diff --git a/.claude/backend.md b/.claude/backend.md
new file mode 100644
index 0000000..729ab2e
--- /dev/null
+++ b/.claude/backend.md
@@ -0,0 +1,217 @@
+# 02 — 后端规则
+
+> **适用**：所有后端 AI 开发任务。
+
+---
+
+## 分层不变式
+
+```
+Controller  → 参数校验 + 调 Service + 返回统一格式
+              禁止：写业务逻辑、直接调 Mapper、处理事务
+
+Service     → 业务逻辑 + 事务管理
+              禁止：处理 HTTP 请求/响应、直接操作 Request/Response
+
+Mapper      → 数据访问（MyBatis-Plus BaseMapper）
+              禁止：写业务逻辑、调用其他 Mapper
+
+Entity      → 数据映射（@TableName 对应表名）
+              禁止：写业务方法、放非持久化字段（放 DTO/VO）
+```
+
+### 包结构
+
+```
+com.ghb.base/
+├── system/                   # 系统模块（不改）
+│   ├── entity/  SysUser, SysRole, SysMenu...
+│   ├── controller/
+│   └── service/
+└── business/                 # 业务模块 ← 你的代码放这里
+    ├── entity/               # 继承 JeecgBoot 的 BaseEntity
+    ├── controller/           # 继承 JeecgController
+    ├── service/              # impl/ 继承 ServiceImpl
+    ├── mapper/               # 继承 BaseMapper
+    │   └── xml/              # MyBatis XML（复杂查询才需要）
+    └── vo/                   # 请求/响应 DTO (*VO, *Request, *ImportRow)
+```
+
+---
+
+## 命名规则
+
+| 元素 | 规则 | 示例（正确 → 错误） |
+|------|------|---------------------|
+| **类名** | 大驼峰，名词 | `TaskController` `OrderService` `UserMapper` |
+| **方法名** | 小驼峰，动词开头 | `getById()` `saveTask()` `listByStatus()` |
+| **变量** | 小驼峰，有意义 | `taskList` `userId` → ❌ `list` `id` `data` |
+| **包名** | 全小写，点分隔 | `com.xxx.server.controller` |
+| **Entity** | 大驼峰，对应表名 | 表 `task_apply` → 类 `TaskApply` |
+| **DTO** | 大驼峰，后缀 DTO/VO/Request | `TaskCreateRequest` `UserListVO` |
+| **常量** | 全大写，下划线分隔 | `MAX_RETRY_COUNT` `DEFAULT_PAGE_SIZE` |
+| **SQL 表名** | 小写，下划线分隔 | `task_apply` `user_profile` |
+| **SQL 字段** | 小写，下划线分隔 | `create_time` `task_id` `del_flag` |
+| **URL 路径** | 小写，短横线或斜杠 | `/app/task/list` → ❌ `/app/Task/GetList` |
+| **配置文件** | kebab-case 或小写 | `application-prod.yml` |
+
+### 长度控制
+
+类名、方法名、表名不要过长。超过 3 个单词或 30 个字符时，用通用缩写。
+
+**前缀也要缩**：模块前缀用一个单词，别堆多个词。
+
+| 完整 | 缩写 | JeecgBoot 实际案例 |
+|------|------|-------------------|
+| Department | Dept | `SysDepartRolePermission` → `SysDeptRolePerm` |
+| Permission | Perm | 同上 |
+| Announcement | Notice | `SysAnnouncementSend` → `SysNoticeSend` |
+| Enterprise | Ent | `WechatEnterprise` → `WxEnt` |
+| Message | Msg | `SysMessageTemplate` → `SysMsgTemplate` |
+
+```java
+// ❌ JeecgBoot 原版 — 太长
+SysDepartRolePermissionServiceImpl        // 35 字符
+SysAnnouncementSendServiceImpl           // 30 字符
+ThirdAppWechatEnterpriseServiceImpl      // 35 字符
+
+// ✅ 缩写后
+SysDeptRolePermServiceImpl               // 26 字符
+SysNoticeSendServiceImpl                 // 25 字符
+ThirdAppWxEntServiceImpl                 // 27 字符
+```
+
+**原则**：优先用全称，超长再缩写。缩写必须一眼能认出含义，不自造别人看不懂的缩写。
+
+---
+
+## 注释规则
+
+| 位置 | 要求 | 示例 |
+|------|------|------|
+| **类/接口** | 必须有 Javadoc，说明职责 | `/** 任务管理 Controller，处理任务的增删改查 */` |
+| **公共方法** | 必须有 Javadoc，说明入参/返回/异常 | `/** @param taskId 任务ID @return 任务详情 @throws 无 */` |
+| **复杂逻辑** | 行内注释说明"为什么这么做" | `// 先查缓存再查库，避免击穿` |
+| **常量** | 必须有注释说明含义 | `/** 最大重试次数 */` |
+| **TODO/FIXME** | 必须有负责人和日期 | `// TODO(yaoshuli 2026-06) 后续改为配置项` |
+| **禁止** | ❌ 注释写"做了什么"（代码本身已说明） | `// 查询任务列表` ← 删掉 |
+| **禁止** | ❌ 注释掉的旧代码 | 直接删，Git 有历史 |
+| **禁止** | ❌ 无意义注释 | `// 定义一个变量` `// 返回结果` |
+| **禁止** | ❌ Controller 方法加 Javadoc 说"这是xxx接口" | 写业务含义，不写技术废话 |
+
+### 注释示例
+
+```java
+/** 任务服务，负责任务的创建、分配、状态流转 */
+@Service
+public class TaskServiceImpl implements TaskService {
+
+    /** 单次批量操作上限 */
+    private static final int BATCH_LIMIT = 100;
+
+    /**
+     * 根据状态和截止时间查询待处理任务。
+     * 先查 Redis 缓存，未命中再查 MySQL。
+     *
+     * @param status 任务状态，不能为 null
+     * @param deadline 截止时间，只查此时间之前的任务
+     * @return 任务列表，可能为空
+     */
+    @Override
+    public List<Task> listPending(String status, LocalDateTime deadline) {
+        // 缓存 key: pending:{status}
+        String cacheKey = "pending:" + status;
+        List<Task> cached = cacheService.get(cacheKey);
+        if (cached != null) return cached;
+
+        // 查库（这里用复合索引 idx_status_deadline）
+        List<Task> tasks = taskMapper.selectByStatusBefore(status, deadline);
+        cacheService.set(cacheKey, tasks, 300);
+        return tasks;
+    }
+}
+```
+
+## 新增功能标准步骤
+
+```
+1. 建表 SQL        → [项目数据库脚本目录]
+2. Entity           → 表映射
+3. Mapper           → 继承 BaseMapper
+4. Service 接口+实现 → 业务逻辑
+5. Controller       → 接口暴露
+6. 编译验证         → 构建通过
+```
+
+---
+
+## CRUD 模板（填空式）
+
+```java
+// ===== 分页列表 =====
+@GetMapping("/list")
+public Result<IPage<Xxx>> list(@RequestParam(defaultValue = "1") int page,
+                                @RequestParam(defaultValue = "10") int size) {
+    Page<Xxx> p = new Page<>(page, size);
+    // [填空] 构建查询条件
+    return Result.ok(service.page(p, wrapper));
+}
+
+// ===== 详情 =====
+@GetMapping("/{id}")
+public Result<Xxx> detail(@PathVariable Long id) {
+    Xxx entity = service.getById(id);
+    if (entity == null) return Result.error("[资源]不存在");
+    return Result.ok(entity);
+}
+
+// ===== 新增 =====
+@PostMapping
+public Result<?> create(@RequestBody @Valid XxxDto dto) {
+    // [填空] DTO → Entity 转换
+    service.save(entity);
+    return Result.ok();
+}
+
+// ===== 更新 =====
+@PutMapping("/{id}")
+public Result<?> update(@PathVariable Long id, @RequestBody @Valid XxxDto dto) {
+    Xxx entity = service.getById(id);
+    if (entity == null) return Result.error("[资源]不存在");
+    // [填空] 字段更新
+    service.updateById(entity);
+    return Result.ok();
+}
+```
+
+---
+
+## 禁止清单
+
+| 类别 | ❌ 禁止 |
+|------|--------|
+| **分层** | Controller 里写 if/else 业务判断 |
+| **分层** | Controller 直接调 Mapper/Repository |
+| **分层** | Entity 里写业务方法 |
+| **数据** | SQL/查询条件字符串拼接 |
+| **数据** | 查不到不判空，直接返回可能 NPE |
+| **数据** | `selectOne` / `getOne` 不做唯一性约束 |
+| **输入** | 入参不校验（该用 `@Valid` 的地方手撸 if） |
+| **输出** | 返回裸对象、裸字符串、自造格式 |
+| **值** | 代码里硬编码魔法数字、魔法字符串 |
+| **事务** | 该加事务的地方漏加 |
+
+---
+
+## 检查表
+
+每完成一个后端任务，逐项自检：
+
+- [ ] 编译通过（`mvn compile` / `go build` / 对应构建命令）
+- [ ] 所有返回值是统一格式，无裸返回
+- [ ] 分页接口格式正确（`list/total/pages/current/size`）
+- [ ] Controller 方法体不超过 20 行（超过说明写了业务逻辑）
+- [ ] 查不到/null 路径有明确的 `fail` 返回
+- [ ] 改了接口 → 已 grep 同步所有前端调用方
+- [ ] 新增/改字段 → 已更新数据库脚本
+- [ ] 无禁止清单中的违规项
diff --git a/.claude/contract.md b/.claude/contract.md
new file mode 100644
index 0000000..a213462
--- /dev/null
+++ b/.claude/contract.md
@@ -0,0 +1,108 @@
+# 01 — 接口契约
+
+> **这是前后端共享的唯一真相来源。** 修改本文件 = 修改协议，必须同步更新所有端。
+
+---
+
+## 契约生命周期（任务拆分时决定）
+
+契约由**任务拆分时先开工的那一端**负责起草。这是任务产出物之一，不是额外工作。
+
+```
+任务拆分阶段：
+  ┌─ 任务A：后端-用户管理CRUD ──→ 产出：接口契约（后端起草）
+  │                                        + 后端代码
+  │
+  └─ 任务B：前端-用户管理页面 ──→ 拿到契约后对接
+
+反过来：
+  ┌─ 任务A：前端-首页改版 ──→ 产出：接口契约（前端起草）
+  │                                   + 前端页面
+  │
+  └─ 任务B：后端-首页数据接口 ──→ 按契约实现
+```
+
+**铁律**：
+- 拆分任务时明确标注：**本任务包含接口契约起草**
+- 契约随任务一起交付，不单独走审批
+- 后开工的一方拿到契约后，发现问题直接跟起草方沟通修改
+- 联调时对照本文件，不一致的以本文件为准
+
+### 分仓库时契约放哪
+
+```
+Monorepo（推荐）：        分仓库：
+项目根/                  后端仓库/              前端仓库/
+└── rules/               ├── rules/              ├── rules/
+    └── 01-接口契约.md    │   └── 01-接口契约.md  │   └── 01-接口契约.md
+                          ← git submodule 引用同一份 →
+```
+
+---
+
+## 返回格式（不变式）
+
+```json
+// ✅ 唯一正确格式
+{ "code": 200, "message": "success", "data": { ... } }
+{ "code": 500, "message": "错误原因", "data": null }
+
+// ❌ 永远不许出现
+return data;                           // 裸对象
+return "ok";                           // 裸字符串
+{ "success": true, "result": {...} }   // 自造格式
+```
+
+---
+
+## 分页格式（不变式）
+
+```json
+{ "list": [...], "total": 100, "pages": 10, "current": 1, "size": 10 }
+```
+
+---
+
+## 接口命名约定
+
+| 前缀 | 用途 | 示例 |
+|------|------|------|
+| `/admin/**` | 管理后台 | `/admin/user/list` |
+| `/app/**` | 移动端/H5/小程序 | `/app/task/list` |
+| `/auth/**` | 登录注册（共享） | `/auth/login` |
+| `/open/**` | 对外开放接口 | `/open/callback` |
+
+---
+
+## 状态值映射表
+
+**← 改这里 = 改协议，必须同步后端 + 所有前端。**
+
+| 含义 | 后端值 | 前端显示 | 前端 CSS 类 |
+|------|--------|----------|------------|
+| [状态1] | [值] | [文字] | [class] |
+| [状态2] | [值] | [文字] | [class] |
+
+---
+
+## 字段名桥接表
+
+同一个概念在不同端字段名不同时，在此登记：
+
+| 概念 | 后端字段 | 前端A字段 | 前端B字段 |
+|------|----------|-----------|-----------|
+| | | | |
+
+---
+
+## 契约同步铁律
+
+```
+改后端接口 → grep 所有前端 → 逐个同步 → 两端都通过才算完成
+
+步骤：
+1. 改之前：grep -r "接口路径" 所有前端目录/
+2. 改后端 → 编译通过
+3. 逐个改前端 → 构建通过
+4. 更新本文件的映射表（如有新增状态值/字段差异）
+```
diff --git a/.claude/database.md b/.claude/database.md
new file mode 100644
index 0000000..e5aa79e
--- /dev/null
+++ b/.claude/database.md
@@ -0,0 +1,175 @@
+# 04 — 数据库表设计规则
+
+> **适用**：所有涉及建表、改表、索引设计的 AI 开发任务。
+
+---
+
+## 命名规则
+
+| 元素       | 规则            | 示例（正确 → 错误）                                              |
+| -------- | ------------- | -------------------------------------------------------- |
+| **表名**   | 小写，下划线分隔，单数名词 | `task_apply` → ❌ `TaskApply` `task_applies`              |
+| **字段名**  | 小写，下划线分隔      | `create_time` `task_id` → ❌ `createdAt` `taskId`          |
+| **主键**   | 统一用 `id`      | `id` → ❌ `task_id` `pk_id`                               |
+| **外键**   | `关联表名_id`     | `task_id` `user_id` → ❌ `tid` `uid`                      |
+| **布尔字段** | `del_flag` 或明确业务含义的 `is_` 前缀      | `del_flag` `is_active` → ❌ `deleted` `status`          |
+| **时间字段** | `_time` 后缀      | `create_time` `update_time` → ❌ `created_at` `updateTime` |
+| **金额字段** | `_amount` 后缀  | `reward_amount` → ❌ `reward` `price`                     |
+| **索引名**  | `idx_表名_字段`   | `idx_task_status` → ❌ `index1` `task_status_idx`         |
+| **唯一索引** | `uk_表名_字段`    | `uk_user_phone` → ❌ `uq_phone`                           |
+| **关联表** | 两表名用下划线连接 | `task_apply` `user_role` → ❌ `apply_task` |
+
+### 长度控制
+
+表名超过 3 个单词或 30 个字符时缩写。前缀也要缩成一个单词。
+
+| 完整 | 缩写 | JeecgBoot 实际案例 |
+|------|------|-------------------|
+| department | dept | `sys_depart_role_permission` → `sys_dept_role_perm` |
+| permission | perm | 同上 |
+| announcement | notice | `sys_announcement_send` → `sys_notice_send` |
+| message | msg | `sys_message_template` → `sys_msg_template` |
+
+```sql
+-- ❌ JeecgBoot 原版 — 太长
+sys_depart_role_permission         -- 26 字符
+sys_permission_data_rule           -- 24 字符
+
+-- ✅ 缩写后
+sys_dept_role_perm                 -- 19 字符
+sys_perm_data_rule                 -- 20 字符
+```
+
+---
+
+## 字段类型规范
+
+| 场景 | 类型 | 说明 |
+|------|------|------|
+| 主键 | `BIGINT` 自增 或 `VARCHAR(32)` | 推荐 BIGINT 自增；分布式用雪花ID |
+| 短文本 | `VARCHAR(N)` | 姓名(50)、标题(200)、URL(500) |
+| 长文本 | `TEXT` / `LONGTEXT` | 文章、JSON、描述 |
+| 金额 | `DECIMAL(12,2)` | **禁止**用 FLOAT/DOUBLE |
+| 状态/类型 | `VARCHAR(20)` 或 `TINYINT` | 枚举值，必须有注释说明 |
+| 布尔 | `TINYINT(1)` | 0=否 1=是，注释必须写清含义 |
+| 时间 | `DATETIME` | **禁止**用 TIMESTAMP（2038 问题） |
+| 日期 | `DATE` | 生日、截止日期 |
+| 数量 | `INT` 或 `BIGINT` | |
+
+---
+
+## 每张表必须有的字段
+
+```sql
+CREATE TABLE xxx (
+    id          BIGINT PRIMARY KEY AUTO_INCREMENT  COMMENT '主键',
+    -- [业务字段]
+    create_by    VARCHAR(32) NULL DEFAULT NULL COMMENT '创建人',
+    create_time  DATETIME    NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+    update_by    VARCHAR(32) NULL DEFAULT NULL COMMENT '更新人',
+    update_time  DATETIME    NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+    del_flag     TINYINT(1)  NOT NULL DEFAULT 0        COMMENT '逻辑删除：0-正常 1-已删除',
+    INDEX idx_xxx_create_time (create_time)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='表说明';
+```
+
+**强制要求**：
+- `create_by` — 创建人，建议保留；系统自动填充时可为空
+- `create_time` — 创建时间，必须有
+- `update_by` — 更新人，建议保留；系统自动填充时可为空
+- `update_time` — 更新时间，必须有（`ON UPDATE CURRENT_TIMESTAMP` 自动更新）
+- `del_flag` — 逻辑删除标记，除非明确不需要软删除
+- 每张表必须有 `COMMENT`
+- 引擎统一 `InnoDB`，字符集 `utf8mb4`
+
+---
+
+## 索引规则
+
+| 规则 | 说明 |
+|------|------|
+| **主键** | 每张表必须有，推荐自增 BIGINT |
+| **外键** | 必须加索引（MySQL 自动加，但显式声明更清晰） |
+| **查询条件** | WHERE 条件字段必须加索引 |
+| **排序字段** | ORDER BY 字段考虑加索引 |
+| **联合索引** | 遵循最左前缀原则，区分度高的在前 |
+| **唯一约束** | 业务唯一字段必须加唯一索引 |
+| **禁止** | ❌ 不加索引的 WHERE / JOIN / ORDER BY |
+| **禁止** | ❌ 在大字段（TEXT/BLOB）上建索引 |
+| **禁止** | ❌ 过多索引（单表建议 ≤ 5 个） |
+
+### 索引命名
+
+```sql
+INDEX       idx_表名_字段            -- 普通索引
+UNIQUE      uk_表名_字段             -- 唯一索引  
+INDEX       idx_表名_字段1_字段2     -- 联合索引
+```
+
+---
+
+## 字段约束规则
+
+| 规则 | 示例 |
+|------|------|
+| 主键 | `PRIMARY KEY` 或 `NOT NULL AUTO_INCREMENT` |
+| 非空 | 业务必填字段 `NOT NULL` |
+| 默认值 | 有默认值的字段 `DEFAULT xxx`，**禁止**依赖代码设默认值 |
+| 唯一 | 业务唯一字段 `UNIQUE` |
+| 外键 | 尽量用逻辑外键（代码维护），**不推荐**物理外键（`FOREIGN KEY`） |
+
+---
+
+## 禁止清单
+
+| ❌ 禁止 | 原因 |
+|---------|------|
+| 表名/字段名用大写或驼峰 | 跨平台兼容 |
+| 金额用 FLOAT/DOUBLE | 精度丢失 |
+| 时间用 TIMESTAMP | 2038 年溢出 |
+| 用物理外键 | 分库分表/数据迁移困难 |
+| 不加注释 | 无人知道字段含义 |
+| 字符串代替布尔 | 空间浪费，索引效率低 |
+| 大表无索引 | 性能灾难 |
+| 字段用 NULL 代替默认值 | 查询需额外处理 `IS NULL` |
+| 在代码里设默认值 | 数据一致性依赖应用层 |
+
+---
+
+## 修改表规则
+
+```sql
+-- ✅ 正确：显式命名约束
+ALTER TABLE task ADD COLUMN priority TINYINT NOT NULL DEFAULT 0 COMMENT '优先级：0-普通 1-紧急';
+ALTER TABLE task ADD INDEX idx_task_priority (priority);
+
+-- ❌ 禁止：不写 COMMENT
+ALTER TABLE task ADD COLUMN priority TINYINT;
+
+-- ❌ 禁止：不写默认值导致存量数据为 NULL
+ALTER TABLE task ADD COLUMN priority TINYINT NOT NULL;
+```
+
+**修改表必须**：
+- 新字段有 `COMMENT`
+- 非空字段有 `DEFAULT`
+- 考虑对存量数据的影响
+- 附带回滚 SQL
+
+---
+
+## 检查表
+
+每涉及建表/改表，逐项自检：
+
+- [ ] 表名、字段名全小写+下划线
+- [ ] 有 `create_by` `create_time` `update_by` `update_time`
+- [ ] 软删除字段 `del_flag`（如需要）
+- [ ] 每张表有 `COMMENT`，每个字段有 `COMMENT`
+- [ ] 金额用 `DECIMAL`，时间用 `DATETIME`
+- [ ] 主键 + 外键 + WHERE 条件字段有索引
+- [ ] 非空字段有 `NOT NULL DEFAULT`
+- [ ] 无物理外键
+- [ ] 索引命名 `idx_表名_字段` / `uk_表名_字段`
+- [ ] 附带回滚 SQL
+- [ ] 引擎 InnoDB，字符集 utf8mb4
diff --git a/.claude/encoding.md b/.claude/encoding.md
new file mode 100644
index 0000000..cdd62f7
--- /dev/null
+++ b/.claude/encoding.md
@@ -0,0 +1,44 @@
+# 编码规范（字符编码）
+
+> 本规则因一次事故而立：批量改包名时用了非 UTF-8 感知的脚本，把中文注释整成乱码（`鐗堟湰`=版本、`寰湇鍔`=微服务），且引入 BOM。以下为硬性约束。
+
+## 不变式（违反即 Bug）
+
+1. **所有源码/配置/文本文件一律 UTF-8 编码**：`.java` `.xml` `.yml` `.yaml` `.properties` `.sql` `.md` `.vue` `.ts` `.js` `.json` 等。
+2. **禁止 BOM**：UTF-8 文件不得带 BOM（`EF BB BF`）。BOM 会让 XML/YAML 解析、shell 脚本、diff 出错。
+3. **禁止 GBK / GB2312 / GB18030 / Latin1 落盘**：任何环节（编辑器、脚本、终端重定向）都不得以非 UTF-8 写文件。
+4. **禁止用非 UTF-8 感知的工具批量改写文本**：如必须批量替换，工具必须显式按 UTF-8 读、UTF-8 写（Python 用 `io.open(p, encoding='utf-8')`；`sed`/`grep` 在 UTF-8 locale 下运行）。
+5. **换行**：统一 LF（`\n`），`.gitattributes` 固化，避免 CRLF 混入触发整文件 diff。
+
+## 构建/工程配置（必须存在）
+
+- **Maven**：父 pom 设
+  ```xml
+  <properties>
+    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+  </properties>
+  ```
+- **`.editorconfig`**（后端仓库和前端仓库根目录各一个 `.editorconfig` 文件）：
+  ```
+  root = true
+  [*]
+  charset = utf-8
+  end_of_line = lf
+  insert_final_newline = true
+  ```
+- **前端**：Vite/Node 默认 UTF-8，源文件保持 UTF-8 无 BOM 即可。
+- **Windows 终端**：PowerShell 默认输出可能是 GBK；**不要用 `>`/`>>` 重定向把含中文的内容写进源文件**（会按当前代码页编码）。要写文件用 UTF-8 感知的程序，不要靠 shell 重定向。
+
+## 处理已损坏文件（mojibake 还原）
+
+经典双重编码（UTF-8 被当 GBK 再存 UTF-8）可逆转：`坏文本.encode('gbk').decode('utf-8')`。
+但若 mojibake 中已出现 `?`（0x3F），该字节已丢失、不可逆，只能按上下文重写注释。
+
+## 检查表（提交前）
+
+- [ ] 新增/修改的文本文件是 UTF-8 无 BOM（`file *.xml` 或编辑器状态栏确认）
+- [ ] 没有出现 `鐗堟湰`/`寰湇`/`锛` 这类乱码片段
+- [ ] 仓库根有 `.editorconfig`（charset=utf-8）
+- [ ] 父 pom 有 `project.build.sourceEncoding=UTF-8`
+- [ ] 批量文本替换用的是 UTF-8 感知工具，不是裸 `>` 重定向
diff --git a/.claude/frontend.md b/.claude/frontend.md
new file mode 100644
index 0000000..05fdf58
--- /dev/null
+++ b/.claude/frontend.md
@@ -0,0 +1,199 @@
+# 03 — 前端规则
+
+> **适用**：所有前端 AI 开发任务（Web / H5 / 小程序）。
+
+---
+
+## 样式铁律
+
+**禁止在组件文件中硬编码**：颜色值（`#xxx` / `rgb()`）、字号（`px` / `rpx` / `rem`）、间距（`margin` / `padding` 数值）、圆角（`border-radius` 数值）。
+
+所有样式必须来自：
+1. **Design Token 文件** → 变量（`$color-primary`）
+2. **全局 CSS 类** → 语义类（`.text-h1` `.card` `.gap-2`）
+3. **UI 框架内置类** → Tailwind / Ant Design 等
+
+```vue
+<!-- ❌ 禁止 -->
+<style scoped>
+.title { color: #333; font-size: 32rpx; margin: 20rpx; }
+
+<!-- ✅ 正确 -->
+<style scoped>
+.title { color: $color-gray-800; @extend .text-h2; margin: $space-3; }
+```
+
+---
+
+## 命名规则
+
+| 元素 | 规则 | 示例（正确 → 错误） |
+|------|------|---------------------|
+| **组件文件** | 短横线分隔（kebab-case） | `task-card.vue` → ❌ `TaskCard.vue` |
+| **页面文件** | 小写或短横线 | `task-detail.vue` `index.vue` |
+| **组件 name** | 大驼峰（PascalCase） | `TaskCard` `UserAvatar` |
+| **CSS 类名** | 短横线分隔 | `.task-card` `.btn-primary` → ❌ `.taskCard` |
+| **JS 变量** | 小驼峰 | `taskList` `userName` → ❌ `task_list` |
+| **JS 常量** | 全大写，下划线分隔 | `MAX_PAGE_SIZE` `API_BASE_URL` |
+| **JS 函数** | 小驼峰，动词开头 | `fetchTasks()` `handleSubmit()` |
+| **API 方法** | 小驼峰，动词+名词 | `taskApi.list()` `taskApi.create()` |
+| **路由路径** | 小写，短横线 | `/task-detail` → ❌ `/taskDetail` |
+| **文件目录** | 小写或短横线 | `task-hall/` `user-center/` |
+| **静态资源** | 短横线分隔 | `icon-phone.svg` `bg-home.jpg` |
+
+---
+
+## 注释规则
+
+| 位置 | 要求 | 示例 |
+|------|------|------|
+| **组件** | 顶部注释说明用途和 Props | `<!-- 任务卡片组件，用于列表展示 -->` |
+| **复杂逻辑** | 行内注释说明"为什么" | `// 先查本地缓存，未命中再请求接口` |
+| **计算属性** | 注释说明计算依据 | `// 根据任务状态和截止时间计算紧急程度` |
+| **API 方法** | JSDoc 说明入参/返回 | `@param {Object} params @returns {Promise<{list,total}>}` |
+| **TODO/FIXME** | 负责人+日期 | `// TODO(yaoshuli 2026-06) 待产品确认逻辑` |
+| **禁止** | ❌ 注释写"做了什么" | `<!-- 循环渲染列表 -->` ← 删掉 |
+| **禁止** | ❌ 注释掉的旧代码/旧模板 | 直接删，Git 有历史 |
+| **禁止** | ❌ 无意义分隔注释 | `// ========== 数据获取 ==========` |
+
+```vue
+<!--
+  任务详情页面
+  - 展示任务基本信息、报名列表、结算记录
+  - 支持接单、提交、结算等操作
+-->
+<template>
+  <app-layout>
+    <!-- 任务信息卡片 -->
+    <m-card>
+      ...
+    </m-card>
+
+    <!-- 仅管理员可见 -->
+    <m-card v-if="isAdmin">
+      ...
+    </m-card>
+  </app-layout>
+</template>
+
+<script setup>
+/**
+ * 提交任务成果。
+ * 提交成功后自动刷新列表并发送通知。
+ *
+ * @param {string} taskId - 任务ID
+ * @param {Object} payload - 提交内容 { files, remark }
+ * @returns {Promise<void>}
+ */
+const handleSubmit = async (taskId, payload) => {
+  // 先本地校验，避免无效请求
+  if (!payload.files.length) return;
+
+  await taskApi.submit(taskId, payload);
+  // TODO(yaoshuli 2026-06) 成功后应跳转到提交记录页
+  router.push('/task-list');
+};
+</script>
+```
+
+---
+
+## 组件使用铁律
+
+| 场景 | ✅ 必须用 | ❌ 禁止 |
+|------|----------|---------|
+| 页面外壳 | 项目统一布局组件 | 自己写页头/侧栏/底栏/TabBar |
+| 图标 | 项目统一图标组件 | 裸 `<img>` / emoji / Unicode |
+| 按钮 | 项目统一按钮组件 | 自己写 button 样式 |
+| 卡片 | 项目统一卡片组件 | 裸露 div+手写圆角阴影 |
+
+---
+
+## API 调用铁律
+
+**所有 HTTP 请求走统一封装**，禁止组件内直调原生 API。
+
+```javascript
+// ✅ 正确：走项目统一封装
+import { taskApi } from '@/services/task';
+const res = await taskApi.list({ page: 1, size: 20 });
+
+// ❌ 禁止
+fetch('/api/task/list').then(...)
+axios.get('/api/task/list')
+uni.request({ url: '/api/task/list' })
+```
+
+---
+
+## 新增页面模板（填空式）
+
+```vue
+<template>
+  <app-layout>
+    <!-- [填空] 页面内容 -->
+    <view v-if="loading">加载中...</view>
+    <view v-else-if="list.length === 0" class="empty-state">
+      <text>暂无数据</text>
+    </view>
+    <view v-else>
+      <!-- [填空] 数据展示 -->
+    </view>
+  </app-layout>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+// [填空] import API 方法
+
+const list = ref([]);
+const loading = ref(false);
+
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const res = await [API方法]({ page: 1, size: 20 });
+    list.value = res.list;
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => fetchData());
+</script>
+
+<style scoped lang="scss">
+// ⚠️ 不得超过 100 行，超过说明在造轮子
+</style>
+```
+
+---
+
+## 禁止清单
+
+| 类别 | ❌ 禁止 |
+|------|--------|
+| **样式** | 硬编码颜色/字号/间距/圆角 |
+| **样式** | 在 scoped 中定义全局重置 |
+| **样式** | scoped 超过 100 行 |
+| **组件** | 自己写布局外壳（页头/侧栏/TabBar） |
+| **组件** | 裸用 `<img>` 代替图标组件 |
+| **网络** | 直调 `fetch` / `axios` / `uni.request` |
+| **网络** | 不处理错误态 |
+| **状态** | 无加载态/空态 |
+
+---
+
+## 检查表
+
+每完成一个前端任务，逐项自检：
+
+- [ ] 使用项目统一布局组件
+- [ ] 无硬编码颜色/字号/间距/圆角
+- [ ] 图标全部走统一图标组件
+- [ ] API 调用走统一封装，无裸调
+- [ ] 页面/组件有加载态 + 空态 + 错误态
+- [ ] 关键操作有 loading 态（防重复点击）
+- [ ] `<style scoped>` 不超过 100 行
+- [ ] PC/移动端均正常（如项目需响应式）
+- [ ] 无禁止清单中的违规项
diff --git a/.claude/git.md b/.claude/git.md
new file mode 100644
index 0000000..54564d4
--- /dev/null
+++ b/.claude/git.md
@@ -0,0 +1,246 @@
+# 05 — Git 协作规则
+
+> **适用**：所有 AI 和人工开发任务。分支怎么拉、什么时候合、冲突怎么处理。
+
+---
+
+## 分支模型
+
+```
+master ──────────────────────────────────────────→ 生产
+  │
+  └── test ──────────────────────────────────────→ 测试主线
+  └── dev ──────────────────────────────────────→ 开发主线
+        │
+        ├── feature/任务编号-简短描述              → 新功能
+        ├── bugfix/任务编号-简短描述               → Bug修复
+        └── hotfix/任务编号-简短描述  (从 master 拉) → 紧急修复
+```
+
+### 什么时候从哪拉
+
+| 场景 | 从哪拉 | 合回哪 |
+|------|--------|--------|
+| 新功能 | `dev` | `dev` |
+| Bug 修复 | `dev` | `dev` |
+| 紧急线上修复 | `master` | `master` + `dev`（两边都要合） |
+
+### 分支命名
+
+```
+feature/2688-用户批量导入        ← 禅道任务号 + 功能描述
+bugfix/2690-任务列表分页错误
+hotfix/2691-登录验证码绕过
+
+禁止：
+feature/xxx                     ← 没任务号
+zhangsan-test                   ← 没意义
+dev-backup-20260603             ← 备份不是分支
+```
+
+---
+
+## 日常操作
+
+### 开始一个新任务
+
+```bash
+# 1. 切到 dev，拉最新
+git checkout dev
+git pull origin dev
+
+# 2. 从 dev 拉分支
+git checkout -b feature/任务号-功能描述
+
+# 3. 开发...
+
+# 4. 定期提交（不要攒到最后一次性交）
+git add .
+git commit -m "feat: xxx"
+
+# 5. 推送到远程（每天至少推一次，防止本地丢失）
+git push origin feature/任务号-功能描述
+```
+
+### 合并回 dev
+
+```bash
+# 1. 确保本地 dev 最新
+git checkout dev
+git pull origin dev
+
+# 2. 切回自己的分支，rebase dev（让历史干净）
+git checkout feature/任务号-功能描述
+git rebase dev
+
+# 如果有冲突：
+#   - 逐个文件解决冲突
+#   - git add <解决的文件>
+#   - git rebase --continue
+#   - 直到完成
+
+# 3. 推 rebase 后的分支（需要 --force-with-lease，不是 --force）
+git push --force-with-lease origin feature/任务号-功能描述
+
+# 4. 到 Git 平台提 PR/MR 到 dev
+# PR 标题：feat: 用户管理增加批量导入
+# PR 描述：改了什么、怎么测试
+```
+
+### 冲突处理
+
+```
+1. git status 看哪些文件冲突
+2. 打开冲突文件，找到 <<<<<<< ======= >>>>>>> 标记
+3. 逐行确认保留哪边的代码
+4. 删掉标记符号
+5. git add <文件>
+6. git rebase --continue 或 git merge --continue
+7. 编译验证
+```
+
+**常见错误**：看到冲突整块接受一边，把别人的代码覆盖了。必须逐行看。
+
+---
+
+## AI 开发特殊规则
+
+### AI 提交必须标注
+
+```
+feat: 用户管理增加批量导入 [AI: Claude Code]
+
+- 新增 UserBatchImportController
+- 新增 UserImportService
+- 新增 import_batch 表
+- 前端增加导入按钮和上传弹窗
+```
+
+**为什么**：review 时知道这是 AI 写的，检查更仔细（尤其是边界条件和安全性）。
+
+### AI 解决冲突
+
+AI 遇到冲突时，不能自己决定保留哪边。必须：
+1. 列出冲突内容和两边来源
+2. 让人类决定
+3. 人类确认后再继续
+
+### AI 禁止操作
+
+```bash
+# ❌ AI 绝对禁止
+git push --force origin dev          # 强制推共享分支
+git push --force origin master       # 同上
+git reset --hard HEAD~10 && git push -f   # 回退远程历史
+git commit --amend && git push -f    # 修改已推送的 commit
+```
+
+---
+
+## Commit 格式
+
+```
+<type>: <简短描述> [来源标注]
+
+类型：
+  feat:     新功能
+  fix:      Bug 修复
+  refactor: 重构（不改功能）
+  style:    格式调整
+  docs:     文档
+  test:     测试
+  chore:    构建/依赖/工具
+
+来源标注（AI 写的必须加）：
+  [AI: Claude Code]
+  [AI: Kimi]
+  [AI: Codex]
+
+正确示例：
+  feat: 用户管理增加批量导入 [AI: Claude Code]
+  fix: 任务列表分页总数计算错误
+  refactor: 提取公共校验逻辑到 BaseService
+  chore: 升级 Spring Boot 到 3.5.6
+
+禁止示例：
+  update                    ← 无意义
+  fix bug                   ← 不知道修的哪个 bug
+  修改                      ← 中文且无具体内容
+  WIP / temp / test         ← 临时提交应该 squash 掉
+```
+
+---
+
+## PR / MR 规范
+
+### PR 必须包含
+
+```markdown
+## 改了什么
+简要描述改动内容
+
+## 关联任务
+禅道 #2688 / 需求文档链接
+
+## 测试方式
+- [ ] 本地编译通过
+- [ ] 接口测试通过
+- [ ] 前端页面正常
+
+## 契约变更
+- [ ] 无接口变更
+- [ ] 有接口变更 → 已更新 contract/ 目录 → 已通知前端
+```
+
+### Review 规则
+
+- 至少一人 approve 才能合
+- AI 生成的代码必须至少一人 review
+- 改动超过 500 行 → 拆分 PR
+
+---
+
+## .gitignore 必备
+
+```
+# Java
+target/
+*.class
+*.jar
+*.war
+
+# IDE
+.idea/
+*.iml
+.vscode/
+.settings/
+.project
+.classpath
+
+# 前端
+node_modules/
+dist/
+.env.local
+
+# 系统
+.DS_Store
+Thumbs.db
+
+# 敏感信息
+*.pem
+*.key
+application-prod.yml  （如果有密码）
+```
+
+---
+
+## 检查表
+
+- [ ] 分支从正确的源头拉（功能/Bug → dev，紧急 → master）
+- [ ] 分支名包含任务号
+- [ ] commit message 有意义
+- [ ] AI 提交标注了来源
+- [ ] push 前 rebase 了 dev
+- [ ] 没用 `--force` 推共享分支
+- [ ] 冲突逐行解决，没整块覆盖
+- [ ] PR 有描述和测试说明
diff --git a/.claude/security.md b/.claude/security.md
new file mode 100644
index 0000000..b0d9358
--- /dev/null
+++ b/.claude/security.md
@@ -0,0 +1,125 @@
+# 06 — 安全与日志规则
+
+> **适用**：所有后端开发任务。
+
+---
+
+## 安全规则
+
+### 认证检查（不变式）
+
+每个需要登录的接口必须通过 Shiro 认证。JeecgBoot 默认全局拦截。
+
+```java
+// JeecgBoot 认证机制：
+// 1. 所有 /sys/** /admin/** 默认需要登录
+// 2. 白名单在 application.yml 配置
+// 3. 权限注解：@RequiresPermissions / @RequiresRoles
+
+// ✅ 接口加权限
+@RequiresPermissions("user:add")
+@PostMapping("/add")
+public Result<?> add(...) { ... }
+
+// ❌ 不要为了调试临时关认证
+// ❌ 不要把需要认证的路径加到 shiro.excludeUrls
+```
+
+### 数据权限（租户隔离）
+
+JeecgBoot 已通过 MyBatis-Plus 拦截器自动注入 tenant_id，**但如果手写 SQL 必须手动加**。
+
+```java
+// ✅ 用 MyBatis-Plus 自动处理
+taskService.list(new LambdaQueryWrapper<Task>().eq(Task::getStatus, "pending"));
+
+// ❌ 手写 SQL 忘了加租户 → 租户A 看到租户B 的数据
+@Select("SELECT * FROM task WHERE status = #{status}")
+
+// ✅ 手写 SQL 正确写法
+@Select("SELECT * FROM task WHERE status = #{status} AND tenant_id = #{tenantId}")
+```
+
+### 敏感信息保护
+
+```java
+// ✅ 密码字段不返回
+@Entity
+public class SysUser {
+    @JsonIgnore  // ← 关键
+    private String password;
+}
+
+// ✅ 手机号脱敏返回（VO 层处理）
+userVO.setPhone(phone.replaceAll("(\\d{3})\\d{4}(\\d{4})", "$1****$2"));
+```
+
+### 文件上传安全
+
+```java
+// ✅ 必须校验（JeecgBoot 已内置部分，确认开启）
+- 文件类型白名单：只允许 jpg/png/pdf/doc/xlsx
+- 文件大小上限：单文件 ≤ 10MB
+- 文件名处理：用 UUID 重命名，防路径穿越
+- 存储路径：不暴露原始文件名给前端
+```
+
+### 接口防刷
+
+```java
+// ✅ 敏感接口（登录/短信/支付）加限流
+// JeecgBoot 使用 Sentinel 或自定义注解
+@RateLimiter(count = 5, time = 60)  // 60秒内最多5次
+@PostMapping("/send-sms")
+public Result<?> sendSms(...) { ... }
+```
+
+---
+
+## 日志规则
+
+### 日志级别
+
+| 级别 | 场景 |
+|------|------|
+| ERROR | 数据库连不上、第三方接口失败、业务异常需要人工介入 |
+| WARN | 降级处理、重试成功、配置缺失但有默认值 |
+| INFO | 用户登录、任务创建、状态变更、定时任务执行 |
+| DEBUG | 开发调试用，不入生产 |
+
+### 日志内容
+
+```java
+// ✅ 关键操作
+log.info("任务状态变更 taskId={} from={} to={} operator={}", taskId, oldStatus, newStatus, userId);
+
+// ✅ 异常
+log.error("调用第三方接口失败 url={}", url, e);  // 最后一个参数是异常对象
+
+// ❌ 不要这样
+log.info("进来了");
+log.info("user=" + user.toString());  // 可能打印密码
+System.out.println("debug: " + xxx);  // 永远不
+```
+
+### 禁止
+
+| ❌ | 原因 |
+|----|------|
+| 循环里打 INFO | 日志爆炸 |
+| 打印完整大对象 | 刷屏且可能泄露敏感数据 |
+| 用 System.out.println | 不入日志文件 |
+| 用 e.printStackTrace() | 不入日志框架 |
+
+
+---
+
+## 检查表
+
+- [ ] 新接口需要认证（不在白名单中）
+- [ ] 手写 SQL 加了租户隔离
+- [ ] 敏感字段不返回给前端
+- [ ] 文件上传有类型/大小校验
+- [ ] 关键操作有 INFO 日志
+- [ ] 异常有 ERROR 日志（带栈）
+- [ ] 无硬编码密码/密钥
diff --git a/.claude/testing.md b/.claude/testing.md
new file mode 100644
index 0000000..a60a8c3
--- /dev/null
+++ b/.claude/testing.md
@@ -0,0 +1,146 @@
+# 07 — 测试与错误处理规则
+
+> **适用**：所有后端开发任务。AI 最容易忽略的两件事：写测试、统一错误码。
+
+---
+
+## 测试规则
+
+### 必须写测试的场景
+
+| 场景 | 测试类型 | 要求 |
+|------|----------|------|
+| 新增 Service 方法 | 单元测试 | 必须 |
+| 新增 Controller 接口 | 集成测试 | 必须 |
+| 涉及金额计算 | 单元测试 | 必须（多组边界值） |
+| 涉及状态流转 | 单元测试 | 必须（覆盖所有状态路径） |
+| 涉及外部接口调用 | 集成测试 | 必须（Mock 外部依赖） |
+| 修 Bug | 回归测试 | 必须（防止复现） |
+| 简单 CRUD | 可选 | 不强制 |
+
+### AI 测试规则
+
+**AI 完成任务后，必须同时交付测试代码。** 禁止说"功能写好了但测试你自己补"。
+
+```java
+// ✅ AI 必须产出完整测试
+@SpringBootTest
+class TaskServiceTest {
+    @Autowired
+    private TaskService taskService;
+
+    @Test
+    void shouldCreateTask() { ... }
+    
+    @Test
+    void shouldNotCreateTaskWithoutTitle() { ... }
+    
+    @Test
+    void shouldCalculateRewardCorrectly() { ... }
+}
+
+// ❌ AI 不能这样
+// "功能已完成，测试代码未编写，建议后续补充"
+```
+
+### 测试命名
+
+```
+方法名_场景_预期结果
+
+shouldCreateTask_whenValidInput
+shouldNotCreateTask_whenTitleIsEmpty
+shouldCalculateReward_whenDiscountApplied
+shouldReturnFail_whenTaskNotFound
+```
+
+### 禁止
+
+- 测试只测正常路径，不测异常路径
+- 测试依赖执行顺序（每个测试必须独立）
+- 测试里有 `Thread.sleep()`（用 Awaitility）
+- 测试代码复制粘贴业务代码（测了个寂寞）
+
+---
+
+## 错误处理规则
+
+### 返回格式（不变式）
+
+```java
+// ✅ 统一返回
+Result.ok(data)              // 成功
+Result.error("原因")          // 业务失败（用户可见）
+Result.error("系统错误")     // 系统异常（用户不可见，只记录日志）
+
+// JSON 格式
+{ "code": 200, "message": "success", "data": {...} }      // 成功
+{ "code": 500, "message": "任务不存在", "data": null }     // 业务失败
+{ "code": 500, "message": "系统繁忙，请稍后重试", "data": null }  // 系统异常
+```
+
+### 什么情况返回什么
+
+```java
+// 查不到 → 业务失败
+if (task == null) return Result.error("任务不存在");
+
+// 参数不合法 → 业务失败
+if (page < 1) return Result.error("页码必须大于0");
+
+// 没权限 → 业务失败
+if (!hasPermission) return Result.error("无权操作");
+
+// 数据库连接失败 → 系统异常（全局异常处理器统一捕获）
+// 第三方接口超时 → 系统异常（记录日志 + 返回通用错误）
+// 不需要手动 try-catch 每个地方，用全局异常处理器统一处理
+```
+
+### 全局异常处理器
+
+```java
+@RestControllerAdvice
+public class GlobalExceptionHandler {
+
+    @ExceptionHandler(BusinessException.class)
+    public Result<?> handleBusiness(BusinessException e) {
+        log.warn("业务异常: {}", e.getMessage());
+        return Result.error(e.getMessage());  // 用户可见
+    }
+
+    @ExceptionHandler(Exception.class)
+    public Result<?> handleException(Exception e) {
+        log.error("系统异常", e);
+        return Result.error("系统繁忙，请稍后重试");  // 用户不可见原文
+    }
+}
+```
+
+### 禁止
+
+| ❌ | ✅ |
+|----|-----|
+| `return Result.error(e.getMessage())` 把栈打印给用户 | `return Result.error("任务不存在")` |
+| 每个方法都 try-catch 一遍 | 全局异常处理器统一处理 |
+| 异常被吞掉 `catch(Exception e) {}` | 至少打日志 `log.error("xxx", e)` |
+| `return null` 让前端爆 NPE | `return Result.error("原因")` |
+| 成功和失败都用 code=200 | 失败用 code=500 |
+
+---
+
+## 检查表
+
+### 测试
+
+- [ ] 新增的非 CRUD 方法有测试
+- [ ] 测试覆盖了异常路径（不是只测正常路径）
+- [ ] 金额计算有边界值测试
+- [ ] AI 交付包含测试代码
+
+### 错误处理
+
+- [ ] 错误信息用户能看懂（不是技术术语）
+- [ ] 系统异常不暴露内部信息给用户
+- [ ] 查不到/null 有明确 fail 返回
+- [ ] 没有空 catch 块
+- [ ] 没有 `return null` 代替错误返回
diff --git a/.claudeignore b/.claudeignore
new file mode 100644
index 0000000..dd1e0e9
--- /dev/null
+++ b/.claudeignore
@@ -0,0 +1,57 @@
+# Git
+.git/
+.gitignore
+.gitmodules
+
+# SVN
+.svn/
+
+# IntelliJ IDEA
+.idea/
+*.iml
+*.iws
+*.ipr
+out/
+
+# Eclipse
+.classpath
+.project
+.settings/
+
+# VS Code
+.vscode/
+
+# Maven / Gradle build output
+target/
+build/
+!.mvn/wrapper/maven-wrapper.jar
+
+# OS files
+.DS_Store
+Thumbs.db
+desktop.ini
+
+# Logs
+*.log
+logs/
+
+# Node (frontend artifacts if any)
+node_modules/
+dist/
+
+# Docker volumes / data
+docker/data/
+
+# Compiled classes
+*.class
+
+# Custom
+*.qqy
+代码修改.log
+代码修改日志
+*.zip
+backup/
+.history/
+.cursor/
+doc/
+docs/
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..f15441a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.env b/.env
new file mode 100644
index 0000000..52efb19
--- /dev/null
+++ b/.env
@@ -0,0 +1,22 @@
+# port
+VITE_PORT = 3100
+
+#  网站标题
+VITE_GLOB_APP_TITLE = test 管理系统
+
+# 简称，此变量只能是字符/下划线
+VITE_GLOB_APP_SHORT_NAME = Test
+
+# 单点登录服务端地址
+VITE_GLOB_APP_CAS_BASE_URL=http://cas.test.com:8443/cas
+
+# 是否开启单点登录
+VITE_GLOB_APP_OPEN_SSO = false
+
+# 开启微前端模式
+VITE_GLOB_APP_OPEN_QIANKUN=true
+
+# 文件预览地址
+VITE_GLOB_ONLINE_VIEW_URL=http://fileview.jeecg.com/onlinePreview
+
+
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..1f8b55e
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,39 @@
+# 是否打开mock
+VITE_USE_MOCK = true
+
+# 发布路径
+VITE_PUBLIC_PATH = /
+
+#VITE_PROXY = [["/jeecgboot","http://localhost:9999"],["/upload","http://localhost:3300/upload"]]
+#VITE_GLOB_DOMAIN_URL=http://localhost:9999
+#VITE_GLOB_API_URL=/jeecgboot
+
+# 跨域代理，您可以配置多个 ,请注意，没有换行符
+VITE_PROXY = [["/test","http://127.0.0.1:8081/ghb"],["/upload","http://127.0.0.1:3300/upload"]]
+
+#后台接口全路径地址(必填)
+VITE_GLOB_DOMAIN_URL=http://localhost:8081/test
+
+#后台接口父地址(必填)
+VITE_GLOB_API_URL=/test
+
+# 接口前缀
+VITE_GLOB_API_URL_PREFIX=
+
+#微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
+VITE_APP_SUB_jeecg-app-1 = '//localhost:8092'
+
+
+# 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
+#VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
+# 作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+#VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//localhost:3001/jeecg-vue3
+
+# 全局隐藏哪些布局。可选属性：sider,header,multi-tabs；多个用逗号隔开
+#VITE_GLOB_HIDE_LAYOUT_TYPES=sider,header,multi-tabs
+
+# 在线文档编辑版本。可选属性：wps, offlineWps(离线版) ,onlyoffice
+VITE_GLOB_ONLINE_DOCUMENT_VERSION=wps
+
+# icon组件的iconify图标库使用在线还是本地。可选属性：online, local
+VITE_GLOB_ICONIFY_USE_TYPE=online
diff --git a/.env.docker b/.env.docker
new file mode 100644
index 0000000..a687197
--- /dev/null
+++ b/.env.docker
@@ -0,0 +1,34 @@
+# 是否启用mock
+VITE_USE_MOCK = false
+
+# 发布路径
+VITE_PUBLIC_PATH = /
+
+# 是否启用gzip或brotli压缩
+# 选项值: gzip | brotli | none
+# 如果需要多个可以使用“,”分隔
+VITE_BUILD_COMPRESS = 'gzip'
+
+# 使用压缩时是否删除原始文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+#后台接口父地址(必填)
+VITE_GLOB_API_URL=/test
+
+#后台接口全路径地址(必填)
+VITE_GLOB_DOMAIN_URL=http://test-system:8080/test
+
+# 接口父路径前缀
+VITE_GLOB_API_URL_PREFIX=
+
+
+# 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
+#VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
+# 作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+#VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//qiankun.boot3.jeecg.com/jeecg-vue3
+
+# 全局隐藏哪些布局。可选属性：sider,header,multi-tabs；多个用逗号隔开
+#VITE_GLOB_HIDE_LAYOUT_TYPES=sider,header,multi-tabs
+
+# 在线文档编辑版本。可选属性：wps, offlineWps(离线版), onlyoffice
+VITE_GLOB_ONLINE_DOCUMENT_VERSION=wps
diff --git a/.env.dockercloud b/.env.dockercloud
new file mode 100644
index 0000000..8014ae4
--- /dev/null
+++ b/.env.dockercloud
@@ -0,0 +1,34 @@
+# 是否启用mock
+VITE_USE_MOCK = false
+
+# 发布路径
+VITE_PUBLIC_PATH = /
+
+# 是否启用gzip或brotli压缩
+# 选项值: gzip | brotli | none
+# 如果需要多个可以使用“,”分隔
+VITE_BUILD_COMPRESS = 'gzip'
+
+# 使用压缩时是否删除原始文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+#后台接口父地址(必填)
+VITE_GLOB_API_URL=/test
+
+#后台接口全路径地址(必填)
+VITE_GLOB_DOMAIN_URL=http://test-gateway:9999
+
+# 接口父路径前缀
+VITE_GLOB_API_URL_PREFIX=
+
+
+# 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
+#VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
+# 作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+#VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//qiankun.boot3.jeecg.com/jeecg-vue3
+
+# 全局隐藏哪些布局。可选属性：sider,header,multi-tabs；多个用逗号隔开
+#VITE_GLOB_HIDE_LAYOUT_TYPES=sider,header,multi-tabs
+
+# 在线文档编辑版本。可选属性：wps, offlineWps(离线版), onlyoffice
+VITE_GLOB_ONLINE_DOCUMENT_VERSION=wps
diff --git a/.env.prod_electron b/.env.prod_electron
new file mode 100644
index 0000000..ca01335
--- /dev/null
+++ b/.env.prod_electron
@@ -0,0 +1,38 @@
+# 是否启用mock
+VITE_USE_MOCK = false
+
+# 后台接口父地址(必填)
+# 【Electron下需要与 VITE_GLOB_DOMAIN_URL 配置保持一致】
+VITE_GLOB_API_URL=https://api3.boot.jeecg.com
+
+# 后台接口全路径地址(必填)
+VITE_GLOB_DOMAIN_URL=https://api3.boot.jeecg.com
+
+# 接口父路径前缀
+VITE_GLOB_API_URL_PREFIX=
+
+# 在线文档编辑版本。可选属性：wps, offlineWps(离线版), onlyoffice
+VITE_GLOB_ONLINE_DOCUMENT_VERSION=wps
+
+# 全局隐藏哪些布局。可选属性：sider,header,multi-tabs；多个用逗号隔开
+#VITE_GLOB_HIDE_LAYOUT_TYPES=sider,header,multi-tabs
+
+# -----------------------------------------
+# ------------ 以下参数不建议修改 ------------
+# -----------------------------------------
+
+# 发布路径
+# 【election下只能是 . 开头的相对路径，建议为 ./ 】
+VITE_PUBLIC_PATH = ./
+
+# 是否启用gzip或brotli压缩
+# 选项值: gzip | brotli | none
+# 如果需要多个可以使用“,”分隔
+# 【electron下由于是本地html文件访问，所以不需要压缩】
+VITE_BUILD_COMPRESS = 'none'
+
+# 使用压缩时是否删除原始文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# ※ 请勿修改此项 ※
+VITE_GLOB_RUN_PLATFORM=electron
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..5cc1825
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,37 @@
+# 是否启用mock
+VITE_USE_MOCK = false
+
+# 发布路径
+VITE_PUBLIC_PATH = /
+
+# 是否启用gzip或brotli压缩
+# 选项值: gzip | brotli | none
+# 如果需要多个可以使用“,”分隔
+VITE_BUILD_COMPRESS = 'gzip'
+
+# 使用压缩时是否删除原始文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+#后台接口父地址(必填)
+VITE_GLOB_API_URL=/test
+
+#后台接口全路径地址(必填)
+VITE_GLOB_DOMAIN_URL=http://127.0.0.1:8080/test
+
+# 接口父路径前缀
+VITE_GLOB_API_URL_PREFIX=
+
+
+# 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
+#VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
+# 作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+#VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//qiankun.boot3.jeecg.com/jeecg-vue3
+
+# 全局隐藏哪些布局。可选属性：sider,header,multi-tabs；多个用逗号隔开
+#VITE_GLOB_HIDE_LAYOUT_TYPES=sider,header,multi-tabs
+
+# 在线文档编辑版本。可选属性：wps, offlineWps(离线版), onlyoffice
+VITE_GLOB_ONLINE_DOCUMENT_VERSION=wps
+
+# icon组件的iconify图标库使用在线还是本地。可选属性：online, local
+VITE_GLOB_ICONIFY_USE_TYPE=local
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..348631b
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,15 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..0e59a86
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,79 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config');
+module.exports = defineConfig({
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+  ],
+  rules: {
+    'prettier/prettier': 'off', // 彻底关闭 prettier 校验规则
+    'vue/script-setup-uses-vars': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'any',
+          component: 'any',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+  },
+});
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ac0d8ab
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,33 @@
+# 依赖与构建产物
+**/node_modules/
+**/dist/
+**/target/
+**/logs/
+**/.cache/
+**/docs/tasks/
+**/docs/tasks/**
+**/.eslintcache
+
+# IDE / 编辑器
+.idea/
+**/*.iml
+.vscode/
+.history/
+*.suo
+*.sw?
+
+# 独立子仓库（接口契约按规则单独管理，不并入主仓库）
+
+# 本地环境与日志
+**/.env.local
+**/.env.*.local
+**/*-debug.log*
+**/docs/tasks/**
+rebel.xml
+derby.log
+
+# 系统
+.DS_Store
+Thumbs.db
+os_del.cmd
+os_del_doc.cmd
diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..2191895
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,6 @@
+ports:
+  - port: 3344
+    onOpen: open-preview
+tasks:
+  - init: yarn
+    command: yarn dev
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..d24fdfc
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..24e8600
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,5 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+
+electron_mirror=https://npmmirror.com/mirrors/electron/
+electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..f7e39e6
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000..0517076
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,3 @@
+/dist/*
+/public/*
+public/*
diff --git a/.yarnclean b/.yarnclean
new file mode 100644
index 0000000..3e556ef
--- /dev/null
+++ b/.yarnclean
@@ -0,0 +1,48 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md
+
+!istanbul-reports/lib/html/assets
+!istanbul-api/node_modules/istanbul-reports/lib/html/assets
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..d183925
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,118 @@
+# ghb-base — AI 开发总纲
+
+> 所有 AI 编码助手首先读本文件。读完本文件后，必须继续读取 `.claude/` 目录下的全部规则文件，再开始编写代码。
+
+## 项目信息
+
+- **名称**：ghb-base（基于 JeecgBoot 3.9.2 精简）
+- **技术栈**：Spring Boot 3.5.5 / Java 17 / MyBatis-Plus / Shiro+JWT / MySQL / Redis
+- **包名**：`com.ghb.base` | 数据库：`ghb_base` | 上下文路径：`/ghb`
+- **前端**：Vue 3 + Vite + Ant Design Vue + TypeScript
+
+## 模块
+
+```
+ghb-base-parent/
+├── ghb-base-core/          # 核心框架（不改）
+├── ghb-module-system/      # 租户/用户/角色/菜单/字典/日志（不改）
+├── ghb-module-business/    # 业务代码 ← 写这里
+└── ghb-server-cloud/       # 微服务（网关/Nacos/监控）
+```
+
+## 必读规则（全部读完再写代码）
+
+1. `.claude/contract.md` — 返回格式 · 分页 · 状态值 · 契约生命周期 · 同步铁律
+2. `.claude/backend.md` — 分层 · 命名 · 注释 · CRUD 模板 · 禁止清单 · 检查表
+3. `.claude/frontend.md` — 样式 · 命名 · 注释 · 组件铁律 · 页面模板 · 检查表
+4. `.claude/database.md` — 表设计 · 字段类型 · 索引 · 必有字段 · 检查表
+5. `.claude/git.md` — 分支命名 · commit 格式 · AI 提交标注 · 禁止操作
+6. `.claude/security.md` — 认证 · 数据权限 · 敏感信息 · 文件上传 · 日志
+7. `.claude/testing.md` — 测试要求 · 错误码 · 全局异常处理 · 检查表
+8. `.claude/encoding.md` — 字符编码（一律 UTF-8 无 BOM · 禁 GBK · 批量改写须 UTF-8 感知 · mojibake 还原）
+
+## 接口契约
+
+契约文件在 `contract/` 目录（独立 git 仓库，前后端 submodule 引用）。修改接口前必须先更新契约。
+
+## 环境要求
+
+- JDK 17+
+- Maven 3.8+
+- MySQL 8.0+
+- Redis 6.0+
+- Node.js 18+ / pnpm
+
+```bash
+# 后端启动
+cd test-module-system/test-system-start
+mvn spring-boot:run -Pdev
+
+# 前端启动
+pnpm install
+pnpm dev
+```
+
+## 多工具兼容
+
+| 工具 | 入口文件 | 操作 |
+|------|----------|------|
+| Claude Code | `CLAUDE.md` | 自动加载，无需操作 |
+| Cursor | `.cursorrules` | 自动加载，无需操作 |
+| Codex / OpenCode | `AGENTS.md` | 自动加载，无需操作 |
+| GitHub Copilot | `.github/copilot-instructions.md` | 自动加载，无需操作 |
+| Windsurf | `.windsurfrules` | 自动加载（把 CLAUDE.md 复制一份改名为 .windsurfrules） |
+| **Kimi / DeepSeek / GPT** | 无自动 | **手动粘贴**：把本文件 + `.claude/` 全部内容一次性贴到对话开头 |
+| **人工开发** | 无自动 | 阅读 `开发规范-人工版.md`（同级目录） |
+
+---
+
+## 审查机制 — 怎么检查代码是否合规
+
+### 自动化检查（提交前自动跑）
+
+```bash
+# 后端代码检查
+mvn checkstyle:check          # Java 代码风格
+mvn test                       # 单元测试
+
+# 前端代码检查
+pnpm lint                      # ESLint
+pnpm stylelint                 # 样式检查
+
+# 数据库 SQL 检查
+# 人工 review：金额字段是不是 DECIMAL、有没有 COMMENT、有没有 create_time
+```
+
+### AI 产出专项检查
+
+| 检查项 | 怎么查 | 不合格的表现 |
+|--------|--------|-------------|
+| 返回值是否包装 | `grep -r "return [^R]" --include="*.java" | grep -v Result` | 出现裸 `return data;` |
+| 手写 SQL 是否带租户 | `grep -r "@Select" --include="*.java"` | SQL 里没有 `tenant_id` |
+| Controller 是否写了业务逻辑 | 人工 review Controller 方法体 | 超过 20 行或有 `if/else` 嵌套 |
+| Commit 是否标注 AI | `git log --oneline -20` | 没有 `[AI: xxx]` 标记 |
+| 是否包含测试 | `git diff --stat` 看是否有测试文件 | 新功能没测试类 |
+
+### PR Review 必查清单
+
+```
+□ 接口变更 → contract/ 目录有对应更新
+□ 返回格式 → 全部用 Result 包装
+□ 手写 SQL → 有 tenant_id 条件
+□ 新增表 → 有 create_time / update_time / COMMENT
+□ 金额字段 → 类型是 DECIMAL
+□ 硬编码 → 无魔法数字、无裸色值、无裸字号
+□ Commit → 格式正确，AI 代码有标注
+□ 测试 → 新功能有测试代码
+```
+
+### 常见违规信号
+
+| 信号 | 可能的问题 |
+|------|-----------|
+| `return data;`（裸返回） | 没读规则 |
+| `@Select("SELECT * FROM xxx WHERE ...")` 缺 tenant_id | 数据泄露风险 |
+| 类名超过 35 字符 | 没缩写 |
+| `color: #` 硬编码 | 没读前端规则 |
+| `git commit -m "update"` | 没读 Git 规则 |
+| Controller 超过 100 行 | 业务逻辑泄漏到接口层 |
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..547fb5b
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,44 @@
+# ============================================
+# 前端 Docker 镜像 — 多阶段构建
+# Stage 1: Node + pnpm 编译
+# Stage 2: Nginx 托管静态文件
+# ============================================
+
+# ---- Stage 1: 编译 ----
+FROM node:22-alpine AS builder
+
+# 限制 Node 内存，防止低配服务器 OOM
+ENV NODE_OPTIONS="--max-old-space-size=512"
+
+RUN corepack enable && corepack prepare pnpm@9 --activate
+
+WORKDIR /build
+
+# 先复制依赖声明，利用缓存
+COPY package.json pnpm-lock.yaml .npmrc ./
+
+RUN pnpm install --frozen-lockfile
+
+# 复制源码
+COPY . .
+
+# 构建（Vite 会把 .env.production 里的变量编译进去）
+RUN pnpm build
+
+# ---- Stage 2: Nginx ----
+FROM nginx:alpine
+
+LABEL maintainer="ghb-base deploy"
+
+# 删除默认配置
+RUN rm /etc/nginx/conf.d/default.conf
+
+# 复制自定义 nginx 配置
+COPY deploy/nginx/default.conf /etc/nginx/conf.d/default.conf
+
+# 复制构建产物
+COPY --from=builder /build/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/Dockerfile.cloud b/Dockerfile.cloud
new file mode 100644
index 0000000..691de96
--- /dev/null
+++ b/Dockerfile.cloud
@@ -0,0 +1,30 @@
+FROM registry.cn-hangzhou.aliyuncs.com/dockerhub_mirror/nginx
+MAINTAINER jeecgos@163.com
+VOLUME /tmp
+ENV LANG en_US.UTF-8
+RUN echo "server {  \
+                      listen       80; \
+                      location   /jeecgboot/ { \
+                      proxy_pass              http://jeecg-boot-gateway:9999/; \
+                      proxy_redirect          off; \
+                      proxy_set_header        Host jeecg-boot-system; \
+                      proxy_set_header        X-Real-IP \$remote_addr; \
+                      proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for; \
+                  } \
+                  #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 \
+                  location / { \
+                     root   /var/www/html/; \
+                      index  index.html index.htm; \
+                      if (!-e \$request_filename) { \
+                          rewrite ^(.*)\$ /index.html?s=\$1 last; \
+                          break; \
+                      } \
+                  } \
+                  access_log  /var/log/nginx/access.log ; \
+              } " > /etc/nginx/conf.d/default.conf \
+    &&  mkdir  -p  /var/www \
+    &&  mkdir -p /var/www/html
+
+ADD dist/ /var/www/html/
+EXPOSE 80
+EXPOSE 443
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..81e9b83
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,33 @@
+MIT License
+
+Copyright (c) 2020-present, Jeecg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+In any case, you must not make any such use of this software as to develop software which may be considered competitive with this software.
+
+JeecgBoot 是由 北京国炬信息技术有限公司 发行的软件。 总部位于北京，地址：中国·北京·朝阳区科荟前街1号院奥林佳泰大厦。邮箱：jeecgos@163.com
+本软件受适用的国家软件著作权法（包括国际条约）和开源协议 双重保护许可。
+  
+开源协议中文释意如下：
+1.JeecgBoot开源版本无任何限制，在遵循本开源协议条款下，允许商用使用，不会造成侵权行为。
+2.允许基于本平台软件开展业务系统开发。
+3.在任何情况下，您不得使用本软件开发可能被认为与本软件竞争的软件。
+	 
+最终解释权归：http://www.jeecg.com
diff --git a/PWA-README.md b/PWA-README.md
new file mode 100644
index 0000000..9aacfe0
--- /dev/null
+++ b/PWA-README.md
@@ -0,0 +1,196 @@
+# PWA 功能说明
+
+## 概述
+
+项目集成了 `vite-plugin-pwa` 插件，**适配按需加载**，实现资源缓存优化和离线支持。
+
+**升级亮点**：通过集成 vite-plugin-pwa 实现渐进式 Web 应用，提升了首屏加载速度，同时异步加载系统资源，点击菜单响应更迅速。
+
+**核心设计**：只预缓存关键资源，按需加载的路由组件 chunk 通过运行时缓存策略处理，避免预缓存过多资源。
+
+## 核心文件
+
+### 构建生成的文件
+
+- **`sw.js`** - Service Worker 文件，由 `vite-plugin-pwa` 自动生成，包含：
+  - 预缓存资源列表（HTML、CSS、核心 JS、静态资源）
+  - 运行时缓存策略（JS chunk、CSS、图片、API 等）
+  - 缓存清理和更新逻辑
+
+- **`workbox-*.js`** - Workbox 运行时库，Service Worker 的核心依赖
+
+- **`manifest.webmanifest`** - PWA 清单文件，定义应用元数据
+
+### 配置文件
+
+- **`build/vite/plugin/pwa.ts`** - PWA 插件配置
+  - **预缓存策略**：只缓存关键资源
+    - 入口文件：`index.html`、`manifest.webmanifest`
+    - 核心 JS：入口 JS（`js/index-*.js`）、vendor chunk（`js/*-vendor-*.js`）
+    - 静态资源：CSS、图片、字体等
+    - **不预缓存**：按需加载的路由组件 chunk（避免预缓存过多资源）
+  - **运行时缓存**：按需加载的资源通过运行时缓存策略处理
+    - 按需加载的 JS chunk：NetworkFirst（优先网络，失败后使用缓存）
+    - CSS、图片、API 等：按需缓存
+  - **注册方式**：`injectRegister: 'inline'`（内联到 HTML，避免缓存问题）
+
+## 功能特性
+
+1. **资源缓存优化** - 通过缓存策略提升加载速度
+2. **离线支持** - 缓存静态资源，支持离线访问
+
+## 缓存策略
+
+### 预缓存（Precache）
+
+| 资源类型 | 说明 |
+|---------|------|
+| `index.html` | 入口 HTML 文件 |
+| `manifest.webmanifest` | PWA 清单文件 |
+| `js/index-*.js` | 入口 JS 文件 |
+| `js/*-vendor-*.js` | 核心 vendor chunk（Vue、Ant Design Vue 等） |
+| `assets/index-*.css` | **仅入口 CSS**（主样式文件） |
+| `favicon.ico`、`logo.png` | **仅关键静态资源**（logo、图标） |
+
+**重要优化**：
+- ❌ **不预缓存**：路由组件的 CSS（避免登录页加载全部 CSS）
+- ❌ **不预缓存**：路由组件的 JS chunk（按需加载）
+- ❌ **不预缓存**：所有图片和字体（按需加载）
+- ✅ **只预缓存**：登录页和首屏必需的关键资源
+
+**效果**：访问登录页时，只加载登录页相关资源，不会预加载系统大部分资源。
+
+### 运行时缓存（Runtime Cache）
+
+| 资源类型 | 策略 | 有效期 | 说明 |
+|---------|------|--------|------|
+| 按需加载 JS chunk | NetworkFirst | 7天 | 优先网络，失败后使用缓存 |
+| 路由组件 CSS | CacheFirst | 30天 | **按需加载**，优先缓存 |
+| 图片 | CacheFirst | 30天 | 优先缓存 |
+| API 请求 | NetworkFirst | 5分钟 | 优先网络，短时缓存 |
+| Google Fonts | CacheFirst | 365天 | 长期缓存 |
+
+**优势**：
+- ✅ **减少预缓存体积 80%+**：只预缓存关键资源，不预缓存路由组件 CSS/JS
+- ✅ **登录页加载优化**：访问登录页时只加载登录页资源，不会加载系统大部分资源
+- ✅ **按需加载**：路由组件的 CSS 和 JS 只在访问对应页面时加载和缓存
+- ✅ **节省存储空间**：按需加载的 chunk 只在需要时缓存
+- ✅ **网络优先策略**：确保用户获取最新代码
+
+## 性能提升分析
+
+### 首次访问（无缓存）
+
+- **Service Worker 注册**：~50-100ms（后台异步，不影响页面加载）
+- **预缓存安装**：~200-500ms（后台进行，关键资源已加载）
+- **页面加载**：无影响（Service Worker 在后台工作）
+
+### 二次访问（有缓存）
+
+| 指标 | 无 PWA | 有 PWA | 提升 |
+|------|--------|--------|------|
+| **首屏加载时间** | 2-5s | 0.5-1.5s | **60-70%** ⬇️ |
+| **关键资源加载** | 网络请求 | 缓存读取 | **90%+** ⬇️ |
+| **CSS 加载** | 100-300ms | <10ms | **95%+** ⬇️ |
+| **图片加载** | 200-500ms | <10ms | **95%+** ⬇️ |
+| **离线访问** | ❌ 不可用 | ✅ 可用 | - |
+
+### 按需加载优化
+
+- **预缓存体积**：仅 ~1-3MB（关键资源），而非全部资源（**减少 80%+**）
+- **Service Worker 安装时间**：减少 **60-80%**
+- **登录页加载**：只加载登录页资源，**不加载系统大部分资源**
+- **存储空间**：节省 **70-85%**（不预缓存路由组件 CSS/JS）
+
+### 实际场景性能提升
+
+1. **弱网环境（3G/4G）**
+   - 首屏加载：**3-5s → 0.8-1.5s**（提升 60-70%）
+   - 页面切换：**1-2s → 0.2-0.5s**（提升 75-80%）
+
+2. **离线访问**
+   - 已访问页面：**完全可用**
+   - 未访问页面：**部分可用**（关键资源已缓存）
+
+3. **重复访问**
+   - 资源加载：**网络 → 缓存**（提升 90%+）
+   - 用户体验：**秒开**（<100ms）
+
+## 前端体验优化建议
+
+### 1. 资源加载优化
+
+- ✅ **已实现**：
+  - 只预缓存关键资源（入口 JS、vendor、入口 CSS、logo）
+  - 路由组件的 CSS 和 JS **不预缓存**，按需加载
+  - 访问登录页时只加载登录页资源，不会加载系统大部分资源
+- 💡 **建议**：确保静态资源（图片、字体）使用 CDN，配合缓存策略
+
+### 2. 网络策略优化
+
+- ✅ **已实现**：JS chunk 使用 NetworkFirst（3s 超时）
+- 💡 **建议**：可根据实际网络情况调整 `networkTimeoutSeconds`
+  - 弱网环境：可适当增加超时时间（5-8s）
+  - 强网环境：可减少超时时间（1-2s）
+
+### 3. 缓存策略优化
+
+- ✅ **已实现**：CSS、图片使用 CacheFirst（30天）
+- 💡 **建议**：
+  - 静态资源（logo、图标）：可延长至 90-180 天
+  - 业务图片：保持 30 天，确保内容更新及时
+
+### 4. 存储空间管理
+
+- ✅ **已实现**：按需加载 chunk 限制 100 个，7 天过期
+- 💡 **建议**：
+  - 监控缓存使用情况（Chrome DevTools → Application → Storage）
+  - 根据用户访问模式调整 `maxEntries` 和 `maxAgeSeconds`
+
+### 5. 用户体验优化
+
+- ✅ **已实现**：Service Worker 后台注册，不阻塞页面加载
+- 💡 **建议**：
+  - 添加加载提示（可选）：显示"正在准备离线功能"
+  - 错误处理：Service Worker 注册失败时优雅降级
+
+### 6. 性能监控
+
+建议监控以下指标：
+- **FCP（First Contentful Paint）**：目标 < 1.5s
+- **LCP（Largest Contentful Paint）**：目标 < 2.5s
+- **TTI（Time to Interactive）**：目标 < 3.5s
+- **缓存命中率**：目标 > 80%
+
+## 注意事项
+
+1. **仅生产环境生效** - 开发环境默认禁用
+2. **HTTPS 要求** - Service Worker 仅在 HTTPS 或 localhost 下工作
+3. **注册代码内联** - 使用 `injectRegister: 'inline'` 避免 `registerSW.js` 缓存问题
+4. **手动注册** - Service Worker 通过内联代码自动注册，但**不包含自动更新检测功能**
+5. **按需加载适配** - 配置已优化适配 Vue Router 的按需加载，只预缓存关键资源，路由组件 chunk 按需缓存
+
+## 禁用 PWA
+
+如需禁用 PWA 功能，在 `build/vite/plugin/index.ts` 中注释：
+
+```typescript
+// vitePlugins.push(configPwaPlugin(isBuild));
+```
+
+## 故障排查
+
+### 清除 Service Worker
+
+浏览器控制台执行：
+
+```javascript
+navigator.serviceWorker.getRegistrations().then(registrations => {
+  registrations.forEach(registration => registration.unregister());
+});
+```
+
+### 检查 Service Worker 状态
+
+- Chrome DevTools → Application → Service Workers
+- 查看注册状态和缓存内容
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a833888
--- /dev/null
+++ b/README.md
@@ -0,0 +1,40 @@
+# ghb-base 前端（ghb-frontend）
+
+> 这是 **ghb-base 基础框架**的前端（管理后台）。以后每个新系统都基于本框架开发。
+> 基于 JeecgBoot 3.9.2 前端精简。
+
+## 技术栈
+- Vue 3 + Vite + TypeScript
+- Ant Design Vue
+- 包管理器：**pnpm**
+
+## 环境要求
+- Node.js 18+、pnpm
+
+## 第一次启动
+```bash
+pnpm install
+pnpm dev
+```
+- 开发服务器由 Vite 启动；接口走代理到后端（默认后端 `http://localhost:8080/ghb`）。
+- **先启动后端再启动前端。** 后端地址在 `.env.development` / `vite.config.ts` 代理配置里调整。
+
+## 构建
+```bash
+pnpm build       # 生产构建
+pnpm preview     # 预览构建产物
+pnpm lint        # ESLint
+pnpm stylelint   # 样式检查
+```
+
+## 新人必读（开始写代码前全部读完）
+1. **`CLAUDE.md`**（本目录）/ base 根 `../CLAUDE.md` — AI 开发总纲
+2. **`../.claude/frontend.md`** — 样式/命名/注释/组件铁律/页面模板/检查表
+3. **`../.claude/contract.md`** — 接口契约与返回格式
+4. **`../contract/`** — 接口契约（独立 git submodule），调接口前先看
+
+## 铁律速记（详见 .claude/frontend.md）
+- 颜色/字号/间距禁硬编码，走主题变量/全局类（无裸 `color:#`、无裸字号）
+- 组件、命名按规范；类名别过长
+- 接口返回判成败看统一返回格式的 code，不依赖 message 文案
+- 改后端接口 → 先更新 `contract/`，前后端同步
diff --git a/build/config/themeConfig.ts b/build/config/themeConfig.ts
new file mode 100644
index 0000000..a12852a
--- /dev/null
+++ b/build/config/themeConfig.ts
@@ -0,0 +1,79 @@
+import { generate } from '@ant-design/colors';
+import setting from '/@/settings/projectSetting';
+// 构建期默认主题色（与 src/settings 中默认 MIX 菜单模式 APP_PRESET_COLOR_LIST[2] 保持一致）
+// 运行时会从 store 拿真实值并显式传入，这里只做 build 阶段的占位与默认色板生成
+export const primaryColor = setting.themeColor;
+export const darkMode = setting.themeMode;
+type Fn = (...arg: any) => any;
+
+type GenerateTheme = 'default' | 'dark';
+
+export interface GenerateColorsParams {
+  mixLighten: Fn;
+  mixDarken: Fn;
+  tinycolor: any;
+  color?: string;
+}
+
+export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
+  return generate(color, {
+    theme,
+  });
+}
+
+export function getThemeColors(color?: string) {
+  const tc = color || primaryColor;
+  const lightColors = generateAntColors(tc);
+  const primary = lightColors[5];
+  const modeColors = generateAntColors(primary, 'dark');
+
+  return [...lightColors, ...modeColors];
+}
+
+export function generateColors({
+  color = primaryColor,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+}: GenerateColorsParams) {
+  const arr = new Array(19).fill(0);
+  const lightens = arr.map((_t, i) => {
+    return mixLighten(color, i / 5);
+  });
+
+  const darkens = arr.map((_t, i) => {
+    return mixDarken(color, i / 5);
+  });
+
+  const alphaColors = arr.map((_t, i) => {
+    return tinycolor(color)
+      .setAlpha(i / 20)
+      .toRgbString();
+  });
+
+  const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
+
+  const tinycolorLightens = arr
+    .map((_t, i) => {
+      return tinycolor(color)
+        .lighten(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#ffffff');
+
+  const tinycolorDarkens = arr
+    .map((_t, i) => {
+      return tinycolor(color)
+        .darken(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#000000');
+  return [
+    ...lightens,
+    ...darkens,
+    ...alphaColors,
+    ...shortAlphaColors,
+    ...tinycolorDarkens,
+    ...tinycolorLightens,
+  ].filter((item) => !item.includes('-'));
+}
diff --git a/build/constant.ts b/build/constant.ts
new file mode 100644
index 0000000..2c6119c
--- /dev/null
+++ b/build/constant.ts
@@ -0,0 +1,6 @@
+/**
+ * The name of the configuration file entered in the production environment
+ */
+export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
+
+export const OUTPUT_DIR = 'dist';
diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts
new file mode 100644
index 0000000..705d339
--- /dev/null
+++ b/build/generate/generateModifyVars.ts
@@ -0,0 +1,49 @@
+import { primaryColor } from '../config/themeConfig';
+// import { getThemeVariables } from 'ant-design-vue/dist/theme';
+import { resolve } from 'path';
+import { generate } from '@ant-design/colors';
+import { theme } from 'ant-design-vue/lib';
+import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken';
+const { defaultAlgorithm, defaultSeed } = theme;
+
+function generateAntColors(color: string, theme: 'default' | 'dark' = 'default') {
+  return generate(color, {
+    theme,
+  });
+}
+
+/**
+ * less global variable
+ */
+export function generateModifyVars() {
+  const palettes = generateAntColors(primaryColor);
+  const primary = palettes[5];
+
+  const primaryColorObj: Record<string, string> = {};
+
+  for (let index = 0; index < 10; index++) {
+    primaryColorObj[`primary-${index + 1}`] = palettes[index];
+  }
+
+  const mapToken = defaultAlgorithm(defaultSeed);
+  const v3Token = convertLegacyToken(mapToken);
+  return {
+    ...v3Token,
+    // ...modifyVars,
+    // Used for global import to avoid the need to import each style file separately
+    // reference:  Avoid repeated references
+    hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+    //'border-color-base': '#EEEEEE',
+    'font-size-base': '14px', //  Main font size
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+    'app-content-background': '#fafafa', //   Link color
+  };
+}
diff --git a/build/generate/icon/index.ts b/build/generate/icon/index.ts
new file mode 100644
index 0000000..1b1bfd7
--- /dev/null
+++ b/build/generate/icon/index.ts
@@ -0,0 +1,68 @@
+import path from 'path';
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import colors from 'picocolors';
+import pkg from '../../../package.json';
+
+async function generateIcon() {
+  const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json');
+
+  const raw = await fs.readJSON(path.join(dir, 'collections.json'));
+
+  const collections = Object.entries(raw).map(([id, v]) => ({
+    ...(v as any),
+    id,
+  }));
+
+  const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }));
+
+  inquirer
+    .prompt([
+      {
+        type: 'list',
+        name: 'useType',
+        choices: [
+          { key: 'local', value: 'local', name: 'Local' },
+          { key: 'onLine', value: 'onLine', name: 'OnLine' },
+        ],
+        message: 'How to use icons?',
+      },
+      {
+        type: 'list',
+        name: 'iconSet',
+        choices: choices,
+        message: 'Select the icon set that needs to be generated?',
+      },
+      {
+        type: 'input',
+        name: 'output',
+        message: 'Select the icon set that needs to be generated?',
+        default: 'src/components/Icon/data',
+      },
+    ])
+    .then(async (answers) => {
+      const { iconSet, output, useType } = answers;
+      const outputDir = path.resolve(process.cwd(), output);
+      fs.ensureDir(outputDir);
+      const genCollections = collections.filter((item) => [iconSet].includes(item.id));
+      const prefixSet: string[] = [];
+      for (const info of genCollections) {
+        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
+        if (data) {
+          const { prefix } = data;
+          const isLocal = useType === 'local';
+          const icons = Object.keys(data.icons).map((item) => `${isLocal ? prefix + ':' : ''}${item}`);
+
+          await fs.writeFileSync(
+            path.join(output, `icons.data.ts`),
+            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`
+          );
+          prefixSet.push(prefix);
+        }
+      }
+      fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
+      console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`);
+    });
+}
+
+generateIcon();
diff --git a/build/getConfigFileName.ts b/build/getConfigFileName.ts
new file mode 100644
index 0000000..46cb902
--- /dev/null
+++ b/build/getConfigFileName.ts
@@ -0,0 +1,7 @@
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+export const getConfigFileName = (env: Record<string, any>) => {
+  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
+};
diff --git a/build/script/buildConf.ts b/build/script/buildConf.ts
new file mode 100644
index 0000000..ee434ce
--- /dev/null
+++ b/build/script/buildConf.ts
@@ -0,0 +1,55 @@
+/**
+ * 生成外部配置文件，用于生产发布后配置，无需重新打包
+ */
+import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
+import fs, { writeFileSync } from 'fs-extra';
+import colors from 'picocolors';
+
+import { getEnvConfig, getRootPath } from '../utils';
+import { getConfigFileName } from '../getConfigFileName';
+
+import pkg from '../../package.json';
+
+interface CreateConfigParams {
+  configName: string;
+  config: any;
+  configFileName?: string;
+}
+
+function createConfig(params: CreateConfigParams) {
+  const { configName, config, configFileName } = params;
+  try {
+    const windowConf = `window.${configName}`;
+    // Ensure that the variable will not be modified
+    let configStr = `${windowConf}=${JSON.stringify(config)};`;
+    configStr += `
+      Object.freeze(${windowConf});
+      Object.defineProperty(window, "${configName}", {
+        configurable: false,
+        writable: false,
+      });
+    `.replace(/\s/g, '');
+
+    fs.mkdirp(getRootPath(OUTPUT_DIR));
+    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
+
+    console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
+    console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
+
+    // 如果是 Electron 环境，还需要将配置文件写入到 JSON 文件中
+    if (config.VITE_GLOB_RUN_PLATFORM === 'electron') {
+      writeFileSync(getRootPath(`${OUTPUT_DIR}/electron/env.json`), JSON.stringify(config));
+      console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - electron env file is build successfully:`);
+      console.log(colors.gray(OUTPUT_DIR + '/' + colors.green('electron/env.json')) + '\n');
+    }
+
+  } catch (error) {
+    console.log(colors.red('configuration file configuration file failed to package:\n' + error));
+  }
+}
+
+export function runBuildConfig() {
+  const config = getEnvConfig();
+  const configFileName = getConfigFileName(config);
+  createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
+}
diff --git a/build/script/copyChat.ts b/build/script/copyChat.ts
new file mode 100644
index 0000000..792331e
--- /dev/null
+++ b/build/script/copyChat.ts
@@ -0,0 +1,14 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+const sourceDir = path.join(__dirname, '../../src/views/super/airag/aiapp/chat/js'); // 源目录
+const destDir = path.join(__dirname, '../../dist', 'chat'); // 目标目录
+
+// 复制目录
+fs.copy(sourceDir, destDir)
+  .then(() => {
+    console.log(`成功将 ${sourceDir} 复制到 ${destDir}`);
+  })
+  .catch((err) => {
+    console.error(`复制失败: ${err}`);
+  });
diff --git a/build/script/postBuild.ts b/build/script/postBuild.ts
new file mode 100644
index 0000000..42635d8
--- /dev/null
+++ b/build/script/postBuild.ts
@@ -0,0 +1,23 @@
+// #!/usr/bin/env node
+
+import { runBuildConfig } from './buildConf';
+import colors from 'picocolors';
+
+import pkg from '../../package.json';
+
+export const runBuild = async () => {
+  try {
+    const argvList = process.argv.splice(2);
+
+    // Generate configuration file
+    if (!argvList.includes('disabled-config')) {
+      runBuildConfig();
+    }
+
+    console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
+  } catch (error) {
+    console.log(colors.red('vite build error:\n' + error));
+    process.exit(1);
+  }
+};
+runBuild();
diff --git a/build/utils.ts b/build/utils.ts
new file mode 100644
index 0000000..471f3d4
--- /dev/null
+++ b/build/utils.ts
@@ -0,0 +1,101 @@
+import fs from 'fs';
+import path from 'path';
+import dotenv from 'dotenv';
+
+export function isDevFn(mode: string): boolean {
+  return mode === 'development';
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === 'production';
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true';
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n');
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+    if (envName === 'VITE_PORT') {
+      realName = Number(realName);
+    }
+    if (envName === 'VITE_PROXY' && realName) {
+      try {
+        realName = JSON.parse(realName.replace(/'/g, '"'));
+      } catch (error) {
+        console.log("PARSE VITE PROXY ERROR:", error);
+        realName = '';
+      }
+    }
+    ret[envName] = realName;
+    if (typeof realName === 'string') {
+      process.env[envName] = realName;
+    } else if (typeof realName === 'object') {
+      process.env[envName] = JSON.stringify(realName);
+    }
+  }
+  return ret;
+}
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+
+  // 代码逻辑说明: 【QQYUN-9685】构建 electron 桌面应用
+  const {VITE_GLOB_RUN_PLATFORM} = process.env
+  if (VITE_GLOB_RUN_PLATFORM === 'electron') {
+    return ['.env', '.env.prod_electron'];
+  }
+
+  const script = process.env.npm_lifecycle_script;
+  // 代码逻辑说明: 【QQYUN-8690】修正获取当前环境下的文件名
+  const reg = new RegExp('NODE_ENV=([a-z_\\d]+)');
+  const result = reg.exec(script as string) as any;
+  if (result) {
+    const mode = result[1] as string;
+    return ['.env', `.env.${mode}`];
+  }
+  return ['.env', '.env.production'];
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
+  let envConfig = {};
+  confFiles.forEach((item) => {
+    try {
+      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+      envConfig = { ...envConfig, ...env };
+    } catch (e) {
+      console.error(`Error in parsing ${item}`, e);
+    }
+  });
+  const reg = new RegExp(`^(${match})`);
+  Object.keys(envConfig).forEach((key) => {
+    if (!reg.test(key)) {
+      Reflect.deleteProperty(envConfig, key);
+    }
+  });
+  return envConfig;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir);
+}
diff --git a/build/vite/plugin/compress.ts b/build/vite/plugin/compress.ts
new file mode 100644
index 0000000..a76d3f8
--- /dev/null
+++ b/build/vite/plugin/compress.ts
@@ -0,0 +1,36 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { PluginOption } from 'vite';
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none', deleteOriginFile = false): PluginOption | PluginOption[] {
+  const compressList = compress.split(',');
+
+  const plugins: PluginOption[] = [];
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        verbose: true,
+        disable: false,
+        threshold: 10240,
+        algorithm: 'gzip',
+        ext: '.gz',
+        deleteOriginFile,
+      })
+    );
+  }
+
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      })
+    );
+  }
+  return plugins;
+}
diff --git a/build/vite/plugin/electron.ts b/build/vite/plugin/electron.ts
new file mode 100644
index 0000000..5b597e9
--- /dev/null
+++ b/build/vite/plugin/electron.ts
@@ -0,0 +1,34 @@
+// import electron from 'vite-plugin-electron/simple'
+//
+// export function configElectronPlugin(_viteEnv: ViteEnv, isBuild: boolean) {
+//   return electron({
+//     main: {
+//       // 主进程入口
+//       entry: 'electron/main.ts',
+//       vite: {
+//         build: {
+//           sourcemap: !isBuild,
+//           outDir: 'dist/electron',
+//         },
+//       },
+//       onstart: ({startup}) => {
+//         // 开发热重载
+//         startup()
+//       },
+//     },
+//     preload: {
+//       input: 'electron/preload/index.ts',
+//       vite: {
+//         build: {
+//           sourcemap: !isBuild,
+//           outDir: 'dist/electron/preload',
+//         },
+//       },
+//       onstart: ({startup}) => {
+//         // 开发热重载
+//         startup()
+//       },
+//     }
+//   })
+//
+// }
diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts
new file mode 100644
index 0000000..f770efb
--- /dev/null
+++ b/build/vite/plugin/html.ts
@@ -0,0 +1,45 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import type { PluginOption } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import pkg from '../../../package.json';
+import { GLOB_CONFIG_FILE_NAME } from '../../constant';
+
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean, isQiankunMicro: boolean) {
+  const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
+  const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
+
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
+  };
+
+  // 【JEECG作为乾坤子应用】补充静态资源前缀
+  const {VITE_GLOB_QIANKUN_MICRO_APP_ENTRY} = env;
+  const basePublicPath = isQiankunMicro ? VITE_GLOB_QIANKUN_MICRO_APP_ENTRY : '';
+
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // 修改模板html的标题
+      data: {
+        title: VITE_GLOB_APP_TITLE,
+        basePublicPath: basePublicPath,
+      },
+      // 将app.config.js文件注入到模板html中
+      tags: isBuild
+        ? [
+            {
+              tag: 'script',
+              attrs: {
+                src: getAppConfigSrc(),
+              },
+            },
+          ]
+        : [],
+    },
+  });
+  return htmlPlugin;
+}
diff --git a/build/vite/plugin/imagemin.ts b/build/vite/plugin/imagemin.ts
new file mode 100644
index 0000000..785b65a
--- /dev/null
+++ b/build/vite/plugin/imagemin.ts
@@ -0,0 +1,35 @@
+// 【图片压缩插件】
+// Image resource files used to compress the output of the production environment
+// https://github.com/anncwb/vite-plugin-imagemin
+import viteImagemin from 'vite-plugin-imagemin';
+
+export function configImageminPlugin() {
+  const plugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    mozjpeg: {
+      quality: 20,
+    },
+    pngquant: {
+      quality: [0.8, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          name: 'removeViewBox',
+        },
+        {
+          name: 'removeEmptyAttrs',
+          active: false,
+        },
+      ],
+    },
+  });
+  return plugin;
+}
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
new file mode 100644
index 0000000..29aea4a
--- /dev/null
+++ b/build/vite/plugin/index.ts
@@ -0,0 +1,146 @@
+import { PluginOption } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import purgeIcons from 'vite-plugin-purge-icons';
+// unplugin-icons 为 ESM-only，用动态 import 避免 CJS 配置加载时 require 报错
+import UnoCSS from 'unocss/vite';
+import { presetTypography, presetUno } from 'unocss';
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+
+// 本地调试https配置方法
+import VitePluginCertificate from 'vite-plugin-mkcert';
+//[issues/555]开发环境，vscode断点调试，文件或行数对不上
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
+import { configHtmlPlugin } from './html';
+import { configMockPlugin } from './mock';
+import { configCompressPlugin } from './compress';
+import { configVisualizerConfig } from './visualizer';
+import { configThemePlugin } from './theme';
+import { configSvgIconsPlugin } from './svgSprite';
+import { configQiankunMicroPlugin } from './qiankunMicro';
+import { configPwaPlugin } from './pwa';
+// // electron plugin
+// import { configElectronPlugin } from "./electron";
+// //预编译加载插件(不支持vite3作废)
+// import OptimizationPersist from 'vite-plugin-optimize-persist';
+// import PkgConfig from 'vite-plugin-package-config';
+
+/**
+ *
+ * @param viteEnv
+ * @param isBuild
+ * @param isQiankunMicro 是否【JEECG作为乾坤子应用】
+ */
+export async function createVitePlugins(
+  viteEnv: ViteEnv,
+  isBuild: boolean,
+  isQiankunMicro: boolean,
+) {
+  const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+
+  // update-begin--author:liaozhiyang---date:20260306---for:【QQYUN-14833】unplugin-icons 使用esm
+  // 动态 import ESM-only，避免 CJS 配置链 require 报 ERR_REQUIRE_ESM （解决node 20启动报错）
+  const [
+    { default: Icons },
+    { default: IconsResolver },
+  ] = await Promise.all([
+    import('unplugin-icons/vite'),
+    import('unplugin-icons/resolver'),
+  ]);
+  // update-end--author:liaozhiyang---date:20260306---for:【QQYUN-14833】unplugin-icons 使用esm
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+    // support name
+    vueSetupExtend(),
+    // @ts-ignore
+    VitePluginCertificate({
+      source: 'coding',
+    }),
+  ];
+
+  vitePlugins.push(UnoCSS({ presets: [presetUno(), presetTypography()] }));
+  // update-begin--author:liaozhiyang---date:20260302---for:【QQYUN-14806】antd采用unplugin-vue-components实现按需加载
+  // unplugin-vue-components: ant-design-vue 组件自动按需导入
+  vitePlugins.push(
+    Components({
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false,
+          // 排除antd的Button组件，让项目中的a-button指向BasicButton组件
+          // 低版本是AButton，高版本是Button
+          exclude: ['AButton', 'Button'],
+        }),
+        IconsResolver({
+          prefix: 'iconify',
+        }),
+      ],
+      dirs: [],
+      dts: false,
+    })
+  );
+  // update-end--author:liaozhiyang---date:20260302---for:【QQYUN-14806】antd采用unplugin-vue-components实现按需加载
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild, isQiankunMicro));
+
+  // vite-plugin-svg-icons
+  vitePlugins.push(configSvgIconsPlugin(isBuild));
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
+
+  // update-begin--author:liaozhiyang---date:20260304---for:【QQYUN-14802】新增unplugin-icons插件，及icon支持online和local两种模式
+  if (viteEnv.VITE_GLOB_ICONIFY_USE_TYPE === 'local') {
+    vitePlugins.push(purgeIcons());
+  } 
+  vitePlugins.push(
+    Icons({
+      compiler: 'vue3',
+       // 自动安装图标集
+      autoInstall: false,
+      scale: 1,
+      defaultClass: 'app-iconify anticon',
+    })
+  );
+  vitePlugins.push(purgeIcons());
+  // update-end--author:liaozhiyang---date:20260304---for:【QQYUN-14802】新增unplugin-icons插件，及icon支持online和local两种模式
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerConfig());
+
+  // vite-plugin-theme
+  vitePlugins.push(configThemePlugin(isBuild));
+
+  // 【JEECG作为乾坤子应用】注册乾坤子应用模式插件
+  if (isQiankunMicro) {
+    // vite-plugin-qiankun
+    vitePlugins.push(...configQiankunMicroPlugin(viteEnv))
+  }
+
+  // // electron plugin
+  const isElectron = viteEnv.VITE_GLOB_RUN_PLATFORM === 'electron';
+  // if (isElectron) {
+  //   vitePlugins.push(configElectronPlugin(viteEnv, isBuild))
+  // }
+
+  // The following plugins only work in the production environment
+  if (isBuild) {
+    
+    // rollup-plugin-gzip
+    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE));
+
+    // vite-plugin-pwa (PWA 插件注册)
+    if (!isElectron) {
+      vitePlugins.push(configPwaPlugin(isBuild));
+    }
+  }
+
+  // //vite-plugin-theme【预编译加载插件，解决vite首次打开界面加载慢问题】
+  // vitePlugins.push(PkgConfig());
+  // vitePlugins.push(OptimizationPersist());
+  return vitePlugins;
+}
diff --git a/build/vite/plugin/mock.ts b/build/vite/plugin/mock.ts
new file mode 100644
index 0000000..d241e26
--- /dev/null
+++ b/build/vite/plugin/mock.ts
@@ -0,0 +1,19 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+import { viteMockServe } from 'vite-plugin-mock';
+
+export function configMockPlugin(isBuild: boolean) {
+  return viteMockServe({
+    ignore: /^\_/,
+    mockPath: 'mock',
+    localEnabled: !isBuild,
+    prodEnabled: isBuild,
+    injectCode: `
+      import { setupProdMockServer } from '../mock/_createProductionServer';
+
+      setupProdMockServer();
+      `,
+  });
+}
diff --git a/build/vite/plugin/pwa.ts b/build/vite/plugin/pwa.ts
new file mode 100644
index 0000000..41d69dd
--- /dev/null
+++ b/build/vite/plugin/pwa.ts
@@ -0,0 +1,130 @@
+/**
+ * PWA 插件配置 - 适配按需加载
+ */
+import { VitePWA } from 'vite-plugin-pwa';
+import type { VitePWAOptions } from 'vite-plugin-pwa';
+import type { PluginOption } from 'vite';
+
+export function configPwaPlugin(isBuild: boolean): PluginOption | PluginOption[] {
+  if (!isBuild) {
+    console.log('非生产环境不启用 PWA 插件!');
+    return [];
+  }
+
+  const pwaOptions: Partial<VitePWAOptions> = {
+    registerType: 'manual',
+    injectRegister: 'inline', // 将 Service Worker 注册代码内联到 HTML 中，避免缓存问题
+    includeAssets: ['favicon.ico', 'logo.png'],
+    manifest: {
+      name: 'JeecgBoot',
+      short_name: 'Jeecg',
+      theme_color: '#ffffff',
+      icons: [
+        {
+          src: '/logo.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: '/logo.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ],
+    },
+    workbox: {
+      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB
+      cleanupOutdatedCaches: true,
+      
+      // 预缓存：只缓存关键资源，不预缓存路由组件 CSS/JS（避免登录页加载全部资源）
+      globPatterns: [
+        'index.html', // 必须预缓存（避免 non-precached-url 错误）
+        'manifest.webmanifest',
+        'assets/index-*.css', // 仅入口 CSS
+        'favicon.ico',
+        'logo.png',
+        'js/index-*.js',
+        'js/*-vendor-*.js',
+      ],
+      
+      // 不使用导航回退功能
+      navigateFallback: undefined,
+      
+      // 运行时缓存：按需加载的资源
+      runtimeCaching: [
+        {
+          urlPattern: /\/js\/.*\.js$/i,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'js-chunks-cache',
+            networkTimeoutSeconds: 3,
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 7, // 7天
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        {
+          urlPattern: /\/assets\/.*\.css$/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'css-cache',
+            expiration: {
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 * 24 * 30, // 30天
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        // Google Fonts
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 * 365,
+            },
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        //update-begin---author:scott ---date:20260417  for：[issues/9564]PWA图片规则过宽导致/filereview/等业务接口走缓存-----------
+        // 图片资源（仅缓存构建产物，避免命中 /filereview/、/jeecgboot/ 等业务接口返回的图片）
+        {
+          urlPattern: /\/(?:assets|img|static|resource)\/.*\.(?:png|jpg|jpeg|svg|gif|webp)$/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'image-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 * 30,
+            },
+          },
+        },
+        // API 请求（JeecgBoot 实际前缀是 /jeecgboot/，原 /api/ 规则未生效）
+        {
+          urlPattern: /\/jeecgboot\/.*/i,
+          handler: 'NetworkOnly',
+        },
+        //update-end---author:scott ---date:20260417  for：[issues/9564]PWA图片规则过宽导致/filereview/等业务接口走缓存-----------
+      ],
+      // 启用立即更新：新 SW 立即激活并接管页面
+      skipWaiting: true,
+      clientsClaim: true,
+    },
+    devOptions: {
+      enabled: false,
+    },
+  };
+
+  return VitePWA(pwaOptions);
+}
+
diff --git a/build/vite/plugin/qiankunMicro.ts b/build/vite/plugin/qiankunMicro.ts
new file mode 100644
index 0000000..aa965e0
--- /dev/null
+++ b/build/vite/plugin/qiankunMicro.ts
@@ -0,0 +1,16 @@
+import qiankun from 'vite-plugin-qiankun';
+
+/**
+ * 【JEECG作为乾坤子应用】Vite适配乾坤以子应用模式运行
+ * @param env
+ */
+export function configQiankunMicroPlugin(env: ViteEnv) {
+  const {VITE_GLOB_QIANKUN_MICRO_APP_NAME} = env
+
+  return [
+    qiankun(VITE_GLOB_QIANKUN_MICRO_APP_NAME!, {
+      useDevMode: true,
+    })
+  ]
+
+}
diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts
new file mode 100644
index 0000000..30d5874
--- /dev/null
+++ b/build/vite/plugin/styleImport.ts
@@ -0,0 +1,82 @@
+/**
+ * 【样式按需加载插件 ——主要处理antd的样式】
+ *  Introduces component library styles on demand.
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export function configStyleImportPlugin(_isBuild: boolean) {
+  if (!_isBuild) {
+    return [];
+  }
+  const styleImportPlugin = createStyleImportPlugin({
+    libs: [
+      {
+        libraryName: 'ant-design-vue',
+        esModule: true,
+        resolveStyle: (name) => {
+          // 这里是无需额外引入样式文件的“子组件”列表
+          const ignoreList = [
+            'anchor-link',
+            'sub-menu',
+            'menu-item',
+            'menu-divider',
+            'menu-item-group',
+            'breadcrumb-item',
+            'breadcrumb-separator',
+            'form-item',
+            'step',
+            'select-option',
+            'select-opt-group',
+            'card-grid',
+            'card-meta',
+            'collapse-panel',
+            'descriptions-item',
+            'list-item',
+            'list-item-meta',
+            'table-column',
+            'table-column-group',
+            'tab-pane',
+            'tab-content',
+            'timeline-item',
+            'tree-node',
+            'skeleton-input',
+            'skeleton-avatar',
+            'skeleton-title',
+            'skeleton-paragraph',
+            'skeleton-image',
+            'skeleton-button',
+          ];
+          // 这里是需要额外引入样式的子组件列表
+          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
+          const replaceList = {
+            'typography-text': 'typography',
+            'typography-title': 'typography',
+            'typography-paragraph': 'typography',
+            'typography-link': 'typography',
+            'dropdown-button': 'dropdown',
+            'input-password': 'input',
+            'input-search': 'input',
+            'input-group': 'input',
+            'radio-group': 'radio',
+            'checkbox-group': 'checkbox',
+            'layout-sider': 'layout',
+            'layout-content': 'layout',
+            'layout-footer': 'layout',
+            'layout-header': 'layout',
+            'month-picker': 'date-picker',
+            'range-picker': 'date-picker',
+            'image-preview-group': 'image',
+          };
+
+          return ignoreList.includes(name)
+            ? ''
+            : replaceList.hasOwnProperty(name)
+            ? `ant-design-vue/es/${replaceList[name]}/style/index`
+            : `ant-design-vue/es/${name}/style/index`;
+        },
+      },
+    ],
+  });
+  return styleImportPlugin;
+}
diff --git a/build/vite/plugin/svgSprite.ts b/build/vite/plugin/svgSprite.ts
new file mode 100644
index 0000000..61f637f
--- /dev/null
+++ b/build/vite/plugin/svgSprite.ts
@@ -0,0 +1,17 @@
+/**
+ *  Vite Plugin for fast creating SVG sprites.
+ * https://github.com/anncwb/vite-plugin-svg-icons
+ */
+
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import path from 'path';
+
+export function configSvgIconsPlugin(isBuild: boolean) {
+  const svgIconsPlugin = createSvgIconsPlugin({
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    svgoOptions: isBuild,
+    // default
+    symbolId: 'icon-[dir]-[name]',
+  });
+  return svgIconsPlugin;
+}
diff --git a/build/vite/plugin/theme-plugin/antdDarkThemePlugin.ts b/build/vite/plugin/theme-plugin/antdDarkThemePlugin.ts
new file mode 100644
index 0000000..e1bf2c8
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/antdDarkThemePlugin.ts
@@ -0,0 +1,224 @@
+import type { Plugin, ResolvedConfig } from 'vite';
+import path from 'path';
+import fs from 'fs-extra';
+import less from 'less';
+import { createFileHash, minifyCSS, extractVariable } from './utils';
+import chalk from 'chalk';
+import { colorRE, linkID } from './constants';
+import { injectClientPlugin } from './injectClientPlugin';
+import { lessPlugin } from './preprocessor/less';
+
+export interface AntdDarkThemeOption {
+  darkModifyVars?: any;
+  fileName?: string;
+  verbose?: boolean;
+  selector?: string;
+  filter?: (id: string) => boolean;
+  extractCss?: boolean;
+  preloadFiles?: string[];
+  loadMethod?: 'link' | 'ajax';
+}
+
+export function antdDarkThemePlugin(options: AntdDarkThemeOption): Plugin[] {
+  const {
+    darkModifyVars,
+    verbose = true,
+    fileName = 'app-antd-dark-theme-style',
+    selector,
+    filter,
+    extractCss = true,
+    preloadFiles = [],
+    loadMethod = 'link',
+  } = options;
+  let isServer = false;
+  let needSourcemap = false;
+  let config: ResolvedConfig;
+  let extCssString = '';
+
+  const styleMap = new Map<string, string>();
+  const codeCache = new Map<string, { code: string; css: string }>();
+
+  const cssOutputName = `${fileName}.${createFileHash()}.css`;
+
+  const hrefProtocals = ['http://'];
+
+  const getCss = (css: string) => {
+    return `[${selector || 'data-theme="dark"'}] {${css}}`;
+  };
+
+  async function preloadLess() {
+    if (!preloadFiles || !preloadFiles.length) return;
+    for (const id of preloadFiles) {
+      const code = fs.readFileSync(id, 'utf-8');
+      less
+        .render(code, {
+          javascriptEnabled: true,
+          modifyVars: darkModifyVars,
+          filename: path.resolve(id),
+          plugins: [lessPlugin(id, config)],
+        })
+        .then(({ css }) => {
+          const colors = css.match(colorRE);
+          if (colors) {
+            css = extractVariable(css, colors.concat(['transparent']));
+            codeCache.set(id, { code, css });
+          }
+        })
+        .catch(() => void 0);
+    }
+  }
+
+  function getProtocal(p: string): string | undefined {
+    let protocal: string | undefined;
+    hrefProtocals.forEach((hrefProtocal) => {
+      if (p.startsWith(hrefProtocal)) protocal = hrefProtocal;
+    });
+    return protocal;
+  }
+
+  return [
+    injectClientPlugin('antdDarkPlugin', {
+      antdDarkCssOutputName: cssOutputName,
+      antdDarkExtractCss: extractCss,
+      antdDarkLoadLink: loadMethod === 'link',
+    }),
+    {
+      name: 'vite:antd-dark-theme',
+      enforce: 'pre',
+      configResolved(resolvedConfig) {
+        config = resolvedConfig;
+        isServer = resolvedConfig.command === 'serve';
+        needSourcemap = !!resolvedConfig.build.sourcemap;
+        if (isServer) preloadLess();
+      },
+      transformIndexHtml: {
+        order: 'pre',
+        handler(html) {
+          let href: string;
+          const protocal = getProtocal(config.base);
+
+          if (isServer || loadMethod !== 'link') return html;
+
+          if (protocal) {
+            href =
+              protocal +
+              path.posix.join(
+                config.base.slice(protocal.length),
+                config.build.assetsDir,
+                cssOutputName,
+              );
+          } else {
+            href = path.posix.join(config.base, config.build.assetsDir, cssOutputName);
+          }
+
+          return {
+            html,
+            tags: [
+              {
+                tag: 'link',
+                attrs: {
+                  disabled: true,
+                  id: linkID,
+                  rel: 'alternate stylesheet',
+                  href,
+                },
+                injectTo: 'head',
+              },
+            ],
+          };
+        },
+      },
+
+      async transform(code, id) {
+        if (!id.endsWith('.less') || !code.includes('@')) return null;
+        if (typeof filter === 'function' && !filter(id)) return null;
+
+        const getResult = (content: string) => ({
+          map: needSourcemap ? this.getCombinedSourcemap() : null,
+          code: content,
+        });
+
+        let processCss = '';
+        const cache = codeCache.get(id);
+        const isUpdate = !cache || cache.code !== code;
+
+        if (isUpdate) {
+          let renderedCss = '';
+          try {
+            const { css } = await less.render(code, {
+              javascriptEnabled: true,
+              modifyVars: darkModifyVars,
+              filename: path.resolve(id),
+              plugins: [lessPlugin(id, config)],
+            });
+            renderedCss = css;
+          } catch {
+            // less 解析失败（典型场景：业务 less 用了 vite alias / virtual import），
+            // 静默跳过该文件 —— 不影响主流程，也不参与 dark theme 提取。
+            return null;
+          }
+          const colors = renderedCss.match(colorRE);
+          if (colors) {
+            processCss = extractVariable(renderedCss, colors.concat(['transparent']));
+          }
+        } else {
+          processCss = cache!.css;
+        }
+
+        if (isServer || !extractCss) {
+          if (isUpdate) codeCache.set(id, { code, css: processCss });
+          return getResult(`${getCss(processCss)}\n` + code);
+        } else {
+          if (!styleMap.has(id) && processCss) {
+            try {
+              const { css } = await less.render(getCss(processCss), {
+                filename: path.resolve(id),
+                plugins: [lessPlugin(id, config)],
+              });
+              extCssString += `${css}\n`;
+            } catch {
+              // 同上：拼出来的 selector wrapper less 解析失败也跳过
+            }
+          }
+          styleMap.set(id, processCss);
+        }
+
+        return null;
+      },
+
+      async writeBundle() {
+        if (!extractCss) return;
+        const {
+          root,
+          build: { outDir, assetsDir, minify },
+        } = config;
+        if (minify) {
+          extCssString = await minifyCSS(extCssString, config);
+        }
+        const cssOutputPath = path.resolve(root, outDir, assetsDir, cssOutputName);
+        fs.writeFileSync(cssOutputPath, extCssString);
+      },
+
+      closeBundle() {
+        if (verbose && !isServer && extractCss) {
+          const {
+            build: { outDir, assetsDir },
+          } = config;
+          console.log(
+            chalk.cyan('\n✨ [vite-plugin-theme:antd-dark]') +
+              ` - extract antd dark css code file is successfully:`,
+          );
+          try {
+            const { size } = fs.statSync(path.join(outDir, assetsDir, cssOutputName));
+            console.log(
+              chalk.dim(outDir + '/') +
+                chalk.magentaBright(`${assetsDir}/${cssOutputName}`) +
+                `\t\t${chalk.dim((size / 1024).toFixed(2) + 'kb')}` +
+                '\n',
+            );
+          } catch {}
+        }
+      },
+    },
+  ];
+}
diff --git a/build/vite/plugin/theme-plugin/client/client.ts b/build/vite/plugin/theme-plugin/client/client.ts
new file mode 100644
index 0000000..e1e4375
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/client/client.ts
@@ -0,0 +1,191 @@
+// @ts-nocheck
+// 以下 6 个 placeholder 标识符由 build/vite/plugin/theme-plugin/injectClientPlugin.ts
+// 在 transform hook 中以正则单词边界字符串替换为最终值。
+// 不要写 `declare const __X__: T` —— 替换会破坏 declare 语句结构。
+// vite 用 oxc/esbuild 编译 .ts 不做严格类型检查，未声明标识符能编过。
+
+export const globalField = '__VITE_THEME__';
+export const styleTagId = '__VITE_PLUGIN_THEME__';
+export const darkStyleTagId = '__VITE_PLUGIN_DARK_THEME__';
+export const linkID = '__VITE_PLUGIN_THEME-ANTD_DARK_THEME_LINK__';
+
+const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
+const isProd = __PROD__;
+const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;
+const injectTo = colorPluginOptions && colorPluginOptions.injectTo;
+
+const debounceThemeRender = debounce(200, renderTheme);
+
+export let darkCssIsReady = false;
+
+(() => {
+  if (!(window as any)[globalField]) {
+    (window as any)[globalField] = {
+      styleIdMap: new Map(),
+      styleRenderQueueMap: new Map(),
+    };
+  }
+  setGlobalOptions('replaceStyleVariables', replaceStyleVariables);
+  if (!getGlobalOptions('defaultOptions')) {
+    setGlobalOptions('defaultOptions', colorPluginOptions);
+  }
+})();
+
+export function addCssToQueue(id: string, styleString: string) {
+  const styleIdMap: Map<string, string> = getGlobalOptions('styleIdMap');
+  if (!styleIdMap.get(id)) {
+    (window as any)[globalField].styleRenderQueueMap.set(id, styleString);
+    debounceThemeRender();
+  }
+}
+
+function renderTheme() {
+  const variables = getGlobalOptions('colorVariables');
+  if (!variables) return;
+  const styleRenderQueueMap: Map<string, string> = getGlobalOptions('styleRenderQueueMap');
+  const styleDom = getStyleDom(styleTagId);
+  let html = styleDom.innerHTML;
+  for (const [id, css] of styleRenderQueueMap.entries()) {
+    html += css;
+    (window as any)[globalField].styleRenderQueueMap.delete(id);
+    (window as any)[globalField].styleIdMap.set(id, css);
+  }
+  replaceCssColors(html, variables).then((processCss) => {
+    appendCssToDom(styleDom, processCss, injectTo);
+  });
+}
+
+export async function replaceStyleVariables({
+  colorVariables,
+  customCssHandler,
+}: {
+  colorVariables: string[];
+  customCssHandler?: (css: string) => string;
+}) {
+  setGlobalOptions('colorVariables', colorVariables);
+  const styleIdMap: Map<string, string> = getGlobalOptions('styleIdMap');
+  const styleRenderQueueMap: Map<string, string> = getGlobalOptions('styleRenderQueueMap');
+  if (!isProd) {
+    for (const [id, css] of styleIdMap.entries()) {
+      styleRenderQueueMap.set(id, css);
+    }
+    renderTheme();
+  } else {
+    try {
+      const cssText = await fetchCss(colorPluginOutputFileName);
+      const styleDom = getStyleDom(styleTagId);
+      const processCss = await replaceCssColors(cssText, colorVariables, customCssHandler);
+      appendCssToDom(styleDom, processCss, injectTo);
+    } catch (error: any) {
+      throw new Error(error);
+    }
+  }
+}
+
+export async function loadDarkThemeCss() {
+  if (darkCssIsReady || !__ANTD_DARK_PLUGIN_EXTRACT_CSS__) return;
+  if (__ANTD_DARK_PLUGIN_LOAD_LINK__) {
+    const linkTag = document.getElementById(linkID);
+    if (linkTag) {
+      linkTag.removeAttribute('disabled');
+      linkTag.setAttribute('rel', 'stylesheet');
+    }
+  } else {
+    const cssText = await fetchCss(__ANTD_DARK_PLUGIN_OUTPUT_FILE_NAME__);
+    const styleDom = getStyleDom(darkStyleTagId);
+    appendCssToDom(styleDom, cssText, injectTo);
+  }
+  darkCssIsReady = true;
+}
+
+export async function replaceCssColors(
+  css: string,
+  colors: string[],
+  customCssHandler?: (css: string) => string,
+) {
+  let retCss = css;
+  const defaultOptions = getGlobalOptions('defaultOptions');
+  const colorVariables: string[] = defaultOptions ? defaultOptions.colorVariables || [] : [];
+  colorVariables.forEach(function (color, index) {
+    const reg = new RegExp(
+      color.replace(/,/g, ',\\s*').replace(/\s/g, '').replace('(', `\\(`).replace(')', `\\)`) +
+        '([\\da-f]{2})?(\\b|\\)|,|\\s)?',
+      'ig',
+    );
+    retCss = retCss.replace(reg, colors[index] + '$1$2').replace('$1$2', '');
+    if (customCssHandler && typeof customCssHandler === 'function') {
+      retCss = customCssHandler(retCss) || retCss;
+    }
+  });
+  return retCss;
+}
+
+export function setGlobalOptions(key: string, value: any) {
+  (window as any)[globalField][key] = value;
+}
+
+export function getGlobalOptions(key: string) {
+  return (window as any)[globalField][key];
+}
+
+export function getStyleDom(id: string): HTMLStyleElement {
+  let style = document.getElementById(id) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement('style');
+    style.setAttribute('id', id);
+  }
+  return style;
+}
+
+export async function appendCssToDom(
+  styleDom: HTMLStyleElement,
+  cssText: string,
+  appendTo: 'head' | 'body' | 'body-prepend' = 'body',
+) {
+  styleDom.innerHTML = cssText;
+  if (appendTo === 'head') {
+    document.head.appendChild(styleDom);
+  } else if (appendTo === 'body') {
+    document.body.appendChild(styleDom);
+  } else if (appendTo === 'body-prepend') {
+    const firstChildren = document.body.firstChild;
+    document.body.insertBefore(styleDom, firstChildren);
+  }
+}
+
+function fetchCss(fileName: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const append = getGlobalOptions('appended');
+    if (append) {
+      setGlobalOptions('appended', false);
+      resolve('');
+      return;
+    }
+    const xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) resolve(xhr.responseText);
+        else reject(xhr.status);
+      }
+    };
+    xhr.onerror = function (e) {
+      reject(e);
+    };
+    xhr.ontimeout = function (e) {
+      reject(e);
+    };
+    xhr.open('GET', fileName, true);
+    xhr.send();
+  });
+}
+
+function debounce<T extends (...args: any[]) => any>(delay: number, fn: T) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  return function (this: any, ...args: any[]) {
+    const ctx = this;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(ctx, args);
+    }, delay);
+  };
+}
diff --git a/build/vite/plugin/theme-plugin/client/colorUtils.ts b/build/vite/plugin/theme-plugin/client/colorUtils.ts
new file mode 100644
index 0000000..2c9ffec
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/client/colorUtils.ts
@@ -0,0 +1,50 @@
+import tinycolor from 'tinycolor2';
+
+export function mixLighten(colorStr: string, weight: number) {
+  return mix('fff', colorStr, weight);
+}
+
+export function mixDarken(colorStr: string, weight: number) {
+  return mix('000', colorStr, weight);
+}
+
+export function mix(color1: string, color2: string, weight: number, alpha1?: number, alpha2?: number) {
+  color1 = dropPrefix(color1);
+  color2 = dropPrefix(color2);
+  if (weight === undefined) weight = 0.5;
+  if (alpha1 === undefined) alpha1 = 1;
+  if (alpha2 === undefined) alpha2 = 1;
+  const w = 2 * weight - 1;
+  const alphaDelta = alpha1 - alpha2;
+  const w1 = ((w * alphaDelta === -1 ? w : (w + alphaDelta) / (1 + w * alphaDelta)) + 1) / 2;
+  const w2 = 1 - w1;
+  const rgb1 = toNum3(color1);
+  const rgb2 = toNum3(color2);
+  const r = Math.round(w1 * rgb1[0] + w2 * rgb2[0]);
+  const g = Math.round(w1 * rgb1[1] + w2 * rgb2[1]);
+  const b = Math.round(w1 * rgb1[2] + w2 * rgb2[2]);
+  return '#' + pad2(r) + pad2(g) + pad2(b);
+}
+
+export function toNum3(colorStr: string) {
+  colorStr = dropPrefix(colorStr);
+  if (colorStr.length === 3) {
+    colorStr = colorStr[0] + colorStr[0] + colorStr[1] + colorStr[1] + colorStr[2] + colorStr[2];
+  }
+  const r = parseInt(colorStr.slice(0, 2), 16);
+  const g = parseInt(colorStr.slice(2, 4), 16);
+  const b = parseInt(colorStr.slice(4, 6), 16);
+  return [r, g, b];
+}
+
+export function dropPrefix(colorStr: string) {
+  return colorStr.replace('#', '');
+}
+
+export function pad2(num: number) {
+  let t = num.toString(16);
+  if (t.length === 1) t = '0' + t;
+  return t;
+}
+
+export { tinycolor };
diff --git a/build/vite/plugin/theme-plugin/constants.ts b/build/vite/plugin/theme-plugin/constants.ts
new file mode 100644
index 0000000..858ece1
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/constants.ts
@@ -0,0 +1,36 @@
+import path from 'path';
+import { normalizePath } from 'vite';
+
+export const VITE_CLIENT_ENTRY = '/@vite/client';
+
+// 客户端入口（指向项目内置的 client.ts —— 预构建后会落到 node_modules/.vite 缓存里）
+// 这里给一个虚拟绝对路径，injectClientPlugin 用它来匹配 transform 的 id
+export const VITE_PLUGIN_THEME_CLIENT_ENTRY = normalizePath(
+  path.resolve(process.cwd(), 'build/vite/plugin/theme-plugin/client'),
+);
+
+export const CLIENT_PUBLIC_ABSOLUTE_PATH = normalizePath(
+  VITE_PLUGIN_THEME_CLIENT_ENTRY + '/client.ts',
+);
+
+// 业务 import 时使用的相对路径片段（按 normalizePath 规范化），用于宽匹配
+export const CLIENT_PUBLIC_PATH_FRAGMENT = 'theme-plugin/client/client';
+
+export const commentRE = /\\\\?n|\n|\\\\?r|\/\*[\s\S]+?\*\//g;
+
+const cssLangs = `\\.(css|less|sass|scss|styl|stylus|postcss)($|\\?)`;
+
+export const colorRE =
+  /#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})|rgba?\((.*),\s*(.*),\s*(.*)(?:,\s*(.*(?:.*)?))?\)/gi;
+
+export const cssVariableString = `const css = "`;
+
+export const cssBlockRE = /[^}]*\{[^{]*\}/g;
+
+export const cssLangRE = new RegExp(cssLangs);
+export const ruleRE = /(\w+-)*\w+:/;
+export const cssValueRE = /(\s?[a-z0-9]+\s)*/;
+export const safeEmptyRE = /\s?/;
+export const importSafeRE = /(\s*!important)?/;
+
+export const linkID = '__VITE_PLUGIN_THEME-ANTD_DARK_THEME_LINK__';
diff --git a/build/vite/plugin/theme-plugin/index.ts b/build/vite/plugin/theme-plugin/index.ts
new file mode 100644
index 0000000..131184b
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/index.ts
@@ -0,0 +1,185 @@
+import type { Plugin, ResolvedConfig } from 'vite';
+import path from 'path';
+import fs from 'fs-extra';
+import { debug as Debug } from 'debug';
+import chalk from 'chalk';
+import { extractVariable, minifyCSS, createFileHash, formatCss } from './utils';
+import { VITE_CLIENT_ENTRY, cssLangRE, cssVariableString, CLIENT_PUBLIC_ABSOLUTE_PATH } from './constants';
+import { injectClientPlugin } from './injectClientPlugin';
+
+export * from './client/colorUtils';
+export { antdDarkThemePlugin } from './antdDarkThemePlugin';
+
+export type ResolveSelector = (selector: string) => string;
+export type InjectTo = 'head' | 'body' | 'body-prepend';
+
+export interface ViteThemeOptions {
+  colorVariables: string[];
+  wrapperCssSelector?: string;
+  resolveSelector?: ResolveSelector;
+  customerExtractVariable?: (code: string) => string;
+  fileName?: string;
+  injectTo?: InjectTo;
+  verbose?: boolean;
+}
+
+const debug = Debug('vite-plugin-theme');
+
+export function viteThemePlugin(opt: ViteThemeOptions): Plugin[] {
+  let isServer = false;
+  let config: ResolvedConfig;
+  let clientPath = '';
+  const styleMap = new Map<string, string>();
+  const extCssSet = new Set<string>();
+
+  const emptyPlugin: Plugin = { name: 'vite:theme' };
+
+  const options: ViteThemeOptions = Object.assign(
+    {
+      colorVariables: [],
+      wrapperCssSelector: '',
+      fileName: 'app-theme-style',
+      injectTo: 'body',
+      verbose: true,
+    },
+    opt,
+  );
+
+  debug('plugin options:', options);
+
+  const {
+    colorVariables,
+    wrapperCssSelector,
+    resolveSelector,
+    customerExtractVariable,
+    fileName,
+    verbose,
+  } = options;
+
+  if (!colorVariables || colorVariables.length === 0) {
+    console.error('colorVariables is not empty!');
+    return [emptyPlugin];
+  }
+
+  const resolveSelectorFn =
+    resolveSelector || ((s: string) => `${wrapperCssSelector} ${s}`);
+
+  const cssOutputName = `${fileName}.${createFileHash()}.css`;
+
+  let needSourcemap = false;
+
+  return [
+    injectClientPlugin('colorPlugin', {
+      colorPluginCssOutputName: cssOutputName,
+      colorPluginOptions: options,
+    }),
+    {
+      ...emptyPlugin,
+      enforce: 'post',
+      configResolved(resolvedConfig) {
+        config = resolvedConfig;
+        isServer = resolvedConfig.command === 'serve';
+        // dev 模式直接通过 /@fs/<absolute> 让浏览器加载内置 client.ts
+        clientPath = JSON.stringify(
+          isServer
+            ? '/@fs/' + CLIENT_PUBLIC_ABSOLUTE_PATH
+            : path.posix.join(config.base, CLIENT_PUBLIC_ABSOLUTE_PATH),
+        );
+        needSourcemap = !!resolvedConfig.build.sourcemap;
+        debug('plugin config base:', resolvedConfig.base);
+      },
+
+      async transform(code, id) {
+        if (!cssLangRE.test(id)) return null;
+
+        const getResult = (content: string) => ({
+          map: needSourcemap ? this.getCombinedSourcemap() : null,
+          code: content,
+        });
+
+        const clientCode = isServer
+          ? await getClientStyleString(code)
+          : code.replace('export default', '').replace('"', '');
+
+        const extractCssCodeTemplate =
+          typeof customerExtractVariable === 'function'
+            ? customerExtractVariable(clientCode)
+            : extractVariable(clientCode, colorVariables, resolveSelectorFn);
+
+        debug('extractCssCodeTemplate:', id, extractCssCodeTemplate?.slice(0, 100));
+
+        if (!extractCssCodeTemplate) return null;
+
+        if (isServer) {
+          const retCode = [
+            `import { addCssToQueue } from ${clientPath}`,
+            `const themeCssId = ${JSON.stringify(id)}`,
+            `const themeCssStr = ${JSON.stringify(formatCss(extractCssCodeTemplate))}`,
+            `addCssToQueue(themeCssId, themeCssStr)`,
+            code,
+          ];
+          return getResult(retCode.join('\n'));
+        } else {
+          if (!styleMap.has(id)) {
+            extCssSet.add(extractCssCodeTemplate);
+          }
+          styleMap.set(id, extractCssCodeTemplate);
+        }
+
+        return null;
+      },
+
+      async writeBundle() {
+        const {
+          root,
+          build: { outDir, assetsDir, minify },
+        } = config;
+        let extCssString = '';
+        for (const css of extCssSet) {
+          extCssString += css;
+        }
+        if (minify) {
+          extCssString = await minifyCSS(extCssString, config);
+        }
+        const cssOutputPath = path.resolve(root, outDir, assetsDir, cssOutputName);
+        fs.ensureDirSync(path.dirname(cssOutputPath));
+        fs.writeFileSync(cssOutputPath, extCssString);
+      },
+
+      closeBundle() {
+        if (verbose && !isServer) {
+          const {
+            build: { outDir, assetsDir },
+          } = config;
+          console.log(
+            chalk.cyan('\n✨ [vite-plugin-theme]') +
+              ` - extract css code file is successfully:`,
+          );
+          try {
+            const { size } = fs.statSync(path.join(outDir, assetsDir, cssOutputName));
+            console.log(
+              chalk.dim(outDir + '/') +
+                chalk.magentaBright(`${assetsDir}/${cssOutputName}`) +
+                `\t\t${chalk.dim((size / 1024).toFixed(2) + 'kb')}` +
+                '\n',
+            );
+          } catch {}
+        }
+      },
+    },
+  ];
+}
+
+async function getClientStyleString(code: string) {
+  if (!code.includes(VITE_CLIENT_ENTRY)) return code;
+  code = code.replace(/\\n/g, '');
+  const cssPrefix = cssVariableString;
+  const cssPrefixLen = cssPrefix.length;
+  const cssPrefixIndex = code.indexOf(cssPrefix);
+  const len = cssPrefixIndex + cssPrefixLen;
+  const cssLastIndex = code.indexOf('\n', len + 1);
+  if (cssPrefixIndex !== -1) {
+    code = code.slice(len, cssLastIndex);
+  }
+  return code;
+}
diff --git a/build/vite/plugin/theme-plugin/injectClientPlugin.ts b/build/vite/plugin/theme-plugin/injectClientPlugin.ts
new file mode 100644
index 0000000..6fcfdbd
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/injectClientPlugin.ts
@@ -0,0 +1,94 @@
+import path from 'path';
+import { normalizePath } from 'vite';
+import type { Plugin, ResolvedConfig } from 'vite';
+import type { ViteThemeOptions } from './index';
+import { CLIENT_PUBLIC_ABSOLUTE_PATH, CLIENT_PUBLIC_PATH_FRAGMENT } from './constants';
+
+type PluginType = 'colorPlugin' | 'antdDarkPlugin';
+
+/**
+ * 通过 transform hook 直接对内置 client.ts 中的 6 个占位符做字符串替换。
+ *
+ * vite 8 的 `define` 在 dev 模式下并未对项目源码（.ts）中的纯标识符占位做编译期替换，
+ * 因此回到 transform-based 替换 —— 与原 @rys-fe/vite-plugin-theme 行为一致。
+ *
+ * 同名 plugin 注册多次（colorPlugin + antdDarkPlugin）时，两次 transform 都会跑，
+ * 各自只替换自己负责的占位，互不干扰。
+ */
+export function injectClientPlugin(
+  type: PluginType,
+  {
+    colorPluginOptions,
+    colorPluginCssOutputName,
+    antdDarkCssOutputName,
+    antdDarkExtractCss,
+    antdDarkLoadLink,
+  }: {
+    colorPluginOptions?: ViteThemeOptions;
+    antdDarkCssOutputName?: string;
+    colorPluginCssOutputName?: string;
+    antdDarkExtractCss?: boolean;
+    antdDarkLoadLink?: boolean;
+  },
+): Plugin {
+  let config: ResolvedConfig;
+  let isServer = false;
+
+  return {
+    name: `vite:inject-vite-plugin-theme-client(${type})`,
+    enforce: 'pre',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+      isServer = resolvedConfig.command === 'serve';
+    },
+
+    transform(code, id) {
+      const nid = normalizePath(id);
+      const isClientFile =
+        nid === CLIENT_PUBLIC_ABSOLUTE_PATH ||
+        nid.endsWith(CLIENT_PUBLIC_PATH_FRAGMENT + '.ts') ||
+        nid.endsWith(CLIENT_PUBLIC_PATH_FRAGMENT + '.js') ||
+        nid.includes(CLIENT_PUBLIC_PATH_FRAGMENT.replace(/\//gi, '_'));
+
+      if (!isClientFile) return;
+
+      const assetsDir = config.build?.assetsDir ?? 'assets';
+      const base = config.base ?? '/';
+      const getOutputFile = (name?: string) =>
+        JSON.stringify(`${base}${assetsDir}/${name}`);
+
+      // __PROD__: 所有 plugin 实例都注入
+      code = code.replace(/\b__PROD__\b/g, JSON.stringify(!isServer));
+
+      if (type === 'colorPlugin') {
+        code = code
+          .replace(/\b__COLOR_PLUGIN_OUTPUT_FILE_NAME__\b/g, getOutputFile(colorPluginCssOutputName))
+          .replace(/\b__COLOR_PLUGIN_OPTIONS__\b/g, JSON.stringify(colorPluginOptions ?? {}));
+      }
+
+      if (type === 'antdDarkPlugin') {
+        code = code.replace(
+          /\b__ANTD_DARK_PLUGIN_OUTPUT_FILE_NAME__\b/g,
+          getOutputFile(antdDarkCssOutputName),
+        );
+        if (typeof antdDarkExtractCss === 'boolean') {
+          code = code.replace(
+            /\b__ANTD_DARK_PLUGIN_EXTRACT_CSS__\b/g,
+            JSON.stringify(antdDarkExtractCss),
+          );
+        }
+        if (typeof antdDarkLoadLink === 'boolean') {
+          code = code.replace(
+            /\b__ANTD_DARK_PLUGIN_LOAD_LINK__\b/g,
+            JSON.stringify(antdDarkLoadLink),
+          );
+        }
+      }
+
+      return { code, map: null };
+    },
+  };
+}
+
+// 防止 path 被 tree-shake
+export const _PATH = path.posix;
diff --git a/build/vite/plugin/theme-plugin/preprocessor/less/index.ts b/build/vite/plugin/theme-plugin/preprocessor/less/index.ts
new file mode 100644
index 0000000..112ff07
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/preprocessor/less/index.ts
@@ -0,0 +1,147 @@
+import path from 'path';
+import fs from 'fs';
+import type { Alias, ResolvedConfig } from 'vite';
+import { normalizePath } from 'vite';
+import less from 'less';
+
+export type ResolveFn = (
+  id: string,
+  importer?: string,
+  aliasOnly?: boolean,
+) => Promise<string | undefined>;
+
+type CssUrlReplacer = (url: string, importer?: string) => string | Promise<string>;
+
+export const externalRE = /^(https?:)?\/\//;
+export const isExternalUrl = (url: string) => externalRE.test(url);
+
+export const dataUrlRE = /^\s*data:/i;
+export const isDataUrl = (url: string) => dataUrlRE.test(url);
+
+const cssUrlRE = /url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/;
+
+let ViteLessManager: any;
+
+function createViteLessPlugin(
+  rootFile: string,
+  alias: Alias[],
+  resolvers: { less: ResolveFn },
+): Less.Plugin {
+  if (!ViteLessManager) {
+    ViteLessManager = class ViteManager extends (less as any).FileManager {
+      resolvers: any;
+      rootFile: string;
+      alias: Alias[];
+      constructor(rootFile: string, resolvers: { less: ResolveFn }, alias: Alias[]) {
+        super();
+        this.rootFile = rootFile;
+        this.resolvers = resolvers;
+        this.alias = alias;
+      }
+      supports() {
+        return true;
+      }
+      supportsSync() {
+        return false;
+      }
+      async loadFile(filename: string, dir: string, opts: any, env: any) {
+        const resolved = await this.resolvers.less(filename, path.join(dir, '*'));
+        if (resolved) {
+          const result = await rebaseUrls(resolved, this.rootFile, this.alias);
+          let contents: string;
+          if (result && 'contents' in result) {
+            contents = result.contents as string;
+          } else {
+            contents = fs.readFileSync(resolved, 'utf-8');
+          }
+          return {
+            filename: path.resolve(resolved),
+            contents,
+          };
+        } else {
+          return super.loadFile(filename, dir, opts, env);
+        }
+      }
+    };
+  }
+
+  return {
+    install(_: any, pluginManager: any) {
+      pluginManager.addFileManager(new ViteLessManager(rootFile, resolvers, alias));
+    },
+    minVersion: [3, 0, 0],
+  };
+}
+
+export function lessPlugin(id: string, config: ResolvedConfig) {
+  const resolvers = createCSSResolvers(config);
+  return createViteLessPlugin(id, (config.resolve as any).alias as Alias[], resolvers);
+}
+
+// vite 8 中 ResolvedConfig.createResolver 已经被环境化（依赖 config.environments），
+// 直接调用会抛 "Cannot read properties of undefined (reading 'environments')"。
+// antd dark theme 处理的是 less 源码，业务 less 中的 alias import 已由上游 vite 流水线处理过；
+// 这里只用 less 默认 FileManager（相对路径），少数 alias import 失败时由 antdDark transform 的
+// try/catch 捕获并跳过，不阻塞 build。
+function createCSSResolvers(_config: ResolvedConfig): { less: ResolveFn } {
+  return {
+    less: (async (_id: string) => undefined) as ResolveFn,
+  };
+}
+
+async function rebaseUrls(file: string, rootFile: string, alias: Alias[]): Promise<any> {
+  file = path.resolve(file);
+  const fileDir = path.dirname(file);
+  const rootDir = path.dirname(rootFile);
+  if (fileDir === rootDir) return { file };
+  const content = fs.readFileSync(file, 'utf-8');
+  if (!cssUrlRE.test(content)) return { file };
+  const rebased = await rewriteCssUrls(content, (url) => {
+    if (url.startsWith('/')) return url;
+    for (const { find } of alias) {
+      const matches = typeof find === 'string' ? url.startsWith(find) : (find as RegExp).test(url);
+      if (matches) return url;
+    }
+    const absolute = path.resolve(fileDir, url);
+    const relative = path.relative(rootDir, absolute);
+    return normalizePath(relative);
+  });
+  return { file, contents: rebased };
+}
+
+function rewriteCssUrls(css: string, replacer: CssUrlReplacer): Promise<string> {
+  return asyncReplace(css, cssUrlRE, async (match) => {
+    const [matched, rawUrl] = match;
+    return await doUrlReplace(rawUrl, matched, replacer);
+  });
+}
+
+export async function asyncReplace(
+  input: string,
+  re: RegExp,
+  replacer: (match: RegExpExecArray) => string | Promise<string>,
+) {
+  let match: RegExpExecArray | null;
+  let remaining = input;
+  let rewritten = '';
+  while ((match = re.exec(remaining))) {
+    rewritten += remaining.slice(0, match.index);
+    rewritten += await replacer(match);
+    remaining = remaining.slice(match.index + match[0].length);
+  }
+  rewritten += remaining;
+  return rewritten;
+}
+
+async function doUrlReplace(rawUrl: string, matched: string, replacer: CssUrlReplacer) {
+  let wrap = '';
+  const first = rawUrl[0];
+  if (first === `"` || first === `'`) {
+    wrap = first;
+    rawUrl = rawUrl.slice(1, -1);
+  }
+  if (isExternalUrl(rawUrl) || isDataUrl(rawUrl) || rawUrl.startsWith('#')) {
+    return matched;
+  }
+  return `url(${wrap}${await replacer(rawUrl)}${wrap})`;
+}
diff --git a/build/vite/plugin/theme-plugin/utils.ts b/build/vite/plugin/theme-plugin/utils.ts
new file mode 100644
index 0000000..89a8c68
--- /dev/null
+++ b/build/vite/plugin/theme-plugin/utils.ts
@@ -0,0 +1,129 @@
+import type { ResolvedConfig } from 'vite';
+import { createHash } from 'crypto';
+import CleanCSS from 'clean-css';
+import {
+  commentRE,
+  cssBlockRE,
+  ruleRE,
+  cssValueRE,
+  safeEmptyRE,
+  importSafeRE,
+} from './constants';
+
+export type ResolveSelector = (selector: string) => string;
+
+export function getVariablesReg(colors: string[]) {
+  return new RegExp(
+    colors
+      .map(
+        (i) =>
+          `(${i
+            .replace(/\s/g, ' ?')
+            .replace(/\(/g, `\\(`)
+            .replace(/\)/g, `\\)`)
+            .replace(/0?\./g, `0?\\.`)})`,
+      )
+      .join('|'),
+  );
+}
+
+export function combineRegs(decorator = '', joinString = '', ...args: any[]) {
+  const regString = args
+    .map((item) => {
+      const str = item.toString();
+      return `(${str.slice(1, str.length - 1)})`;
+    })
+    .join(joinString);
+  return new RegExp(regString, decorator);
+}
+
+export function formatCss(s: string) {
+  s = s.replace(/\s*([{}:;,])\s*/g, '$1');
+  s = s.replace(/;\s*;/g, ';');
+  s = s.replace(/,[\s.#\d]*{/g, '{');
+  s = s.replace(/([^\s])\{([^\s])/g, '$1 {\n\t$2');
+  s = s.replace(/([^\s])\}([^\n]*)/g, '$1\n}\n$2');
+  s = s.replace(/([^\s]);([^\s}])/g, '$1;\n\t$2');
+  return s;
+}
+
+export function createFileHash() {
+  return createHash('sha256').update(Date.now().toString()).digest('hex').substr(0, 8);
+}
+
+/**
+ * Compress the generated css.
+ * vite 8 已移除 config.build.cleanCssOptions，这里直接使用 CleanCSS 默认配置。
+ */
+export async function minifyCSS(css: string, config: ResolvedConfig) {
+  const res = new CleanCSS({ rebase: false }).minify(css);
+
+  if (res.errors && res.errors.length) {
+    console.error(`error when minifying css:\n${res.errors}`);
+    throw res.errors[0];
+  }
+
+  if (res.warnings && res.warnings.length) {
+    config.logger.warn(`warnings when minifying css:\n${res.warnings}`);
+  }
+
+  return res.styles;
+}
+
+// Used to extract relevant color configuration in css
+export function extractVariable(
+  code: string,
+  colorVariables: string[],
+  resolveSelector?: ResolveSelector,
+  colorRE?: RegExp,
+): string {
+  colorVariables = Array.from(new Set(colorVariables));
+  code = code.replace(commentRE, '');
+
+  const cssBlocks = code.match(cssBlockRE);
+  if (!cssBlocks || cssBlocks.length === 0) {
+    return '';
+  }
+
+  let allExtractedVariable = '';
+
+  const variableReg = getVariablesReg(colorVariables);
+
+  for (let index = 0; index < cssBlocks.length; index++) {
+    const cssBlock = cssBlocks[index];
+    if (!variableReg.test(cssBlock) || !cssBlock) continue;
+
+    const cssSelector = cssBlock.match(/[^{]*/)?.[0] ?? '';
+    if (!cssSelector) continue;
+
+    if (/^@.*keyframes/.test(cssSelector)) {
+      allExtractedVariable += `${cssSelector}{${extractVariable(
+        cssBlock.replace(/[^{]*\{/, '').replace(/}$/, ''),
+        colorVariables,
+        resolveSelector,
+        colorRE,
+      )}}`;
+      continue;
+    }
+
+    const colorReg = combineRegs(
+      'g',
+      '',
+      ruleRE,
+      cssValueRE,
+      safeEmptyRE,
+      variableReg,
+      importSafeRE,
+    );
+
+    const colorReplaceTemplates = cssBlock.match(colorRE || colorReg);
+
+    if (!colorReplaceTemplates) continue;
+
+    allExtractedVariable += `${
+      resolveSelector ? resolveSelector(cssSelector) : cssSelector
+    } {${colorReplaceTemplates.join(';')}}`;
+  }
+
+  return allExtractedVariable;
+}
diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
new file mode 100644
index 0000000..626ed59
--- /dev/null
+++ b/build/vite/plugin/theme.ts
@@ -0,0 +1,101 @@
+/**
+ * Vite plugin for website theme color switching
+ * https://github.com/anncwb/vite-plugin-theme
+ */
+import type { PluginOption } from 'vite';
+import path from 'path';
+// 项目内置版本（适配 vite 8）：原 @rys-fe/vite-plugin-theme 不再适配 vite 8，已搬入 ./theme-plugin
+import { viteThemePlugin, antdDarkThemePlugin, mixLighten, mixDarken, tinycolor } from './theme-plugin';
+import { getThemeColors, generateColors } from '../../config/themeConfig';
+import { generateModifyVars } from '../../generate/generateModifyVars';
+
+export function configThemePlugin(isBuild: boolean): PluginOption[] {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+  });
+
+  // update-begin-修复编译后主题色切换不生效黑屏的问题-----------------------
+  // https://github.com/vbenjs/vue-vben-admin/issues/1445
+  // 抽取出viteThemePlugin插件，下方会根据不同环境设置enforce
+  const vite_theme_plugin = viteThemePlugin({
+    resolveSelector: (s) => {
+      s = s.trim();
+      switch (s) {
+        case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+          return '.ant-steps-item-icon > .ant-steps-icon';
+        case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
+        case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
+        case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
+          return s;
+        case '.ant-steps-item-icon > .ant-steps-icon':
+          return s;
+        case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
+          return s;
+        default:
+          if (s.indexOf('.ant-btn') >= -1) {
+            // 按钮被重新定制过，需要过滤掉class防止覆盖
+            return s;
+          }
+      }
+      return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`;
+    },
+    colorVariables: [...getThemeColors(), ...colors],
+  });
+  vite_theme_plugin.forEach(function (item) {
+    //对vite:theme插件特殊配置
+    if ('vite:theme' === item.name) {
+      // 打包时去除enforce: "post"，vite 2.6.x适配，否则生成app-theme-style为空，因为async transform(code, id) {的code没有正确获取
+      if (isBuild) {
+        delete item.enforce;
+      }
+    }
+  });
+  // update-end-修复编译后主题色切换不生效黑屏的问题-----------------------
+
+  const plugin = [
+    vite_theme_plugin,
+    antdDarkThemePlugin({
+      preloadFiles: [
+        // path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/reset.css'),
+        //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
+        path.resolve(process.cwd(), 'src/design/index.less'),
+      ],
+      filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
+      // extractCss: false,
+      darkModifyVars: {
+        ...generateModifyVars(true),
+        'text-color': '#c9d1d9',
+        'primary-1': 'rgb(255 255 255 / 8%)',
+        'text-color-base': '#c9d1d9',
+        'component-background': '#151515',
+        'heading-color': 'rgb(255 255 255 / 65%)',
+        // black: '#0e1117',
+        // #8b949e
+        'text-color-secondary': '#8b949e',
+        'border-color-base': '#303030',
+        'header-light-bottom-border-color': '#303030',
+        // 'border-color-split': '#30363d',
+        'item-active-bg': '#111b26',
+        'app-content-background': '#1e1e1e',
+        'tree-node-selected-bg': '#11263c',
+
+        'alert-success-border-color': '#274916',
+        'alert-success-bg-color': '#162312',
+        'alert-success-icon-color': '#49aa19',
+        'alert-info-border-color': '#153450',
+        'alert-info-bg-color': '#111b26',
+        'alert-info-icon-color': '#177ddc',
+        'alert-warning-border-color': '#594214',
+        'alert-warning-bg-color': '#2b2111',
+        'alert-warning-icon-color': '#d89614',
+        'alert-error-border-color': '#58181c',
+        'alert-error-bg-color': '#2a1215',
+        'alert-error-icon-color': '#a61d24',
+      },
+    }),
+  ];
+
+  return plugin as unknown as PluginOption[];
+}
diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts
new file mode 100644
index 0000000..75d4451
--- /dev/null
+++ b/build/vite/plugin/visualizer.ts
@@ -0,0 +1,17 @@
+/**
+ * Package file volume analysis
+ */
+import visualizer from 'rollup-plugin-visualizer';
+import { isReportMode } from '../../utils';
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }) as Plugin;
+  }
+  return [];
+}
diff --git a/build/vite/proxy.ts b/build/vite/proxy.ts
new file mode 100644
index 0000000..8525397
--- /dev/null
+++ b/build/vite/proxy.ts
@@ -0,0 +1,34 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
+import type { ProxyOptions } from 'vite';
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+const httpsRE = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const isHttps = httpsRE.test(target);
+
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {}),
+    };
+  }
+  return ret;
+}
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 0000000..ac977af
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+};
diff --git a/deploy/.env.example b/deploy/.env.example
new file mode 100644
index 0000000..bde5462
--- /dev/null
+++ b/deploy/.env.example
@@ -0,0 +1,9 @@
+# ============================================
+# 前端部署配置 — 复制为 .env 后修改
+# ============================================
+
+APP_NAME=test
+FRONTEND_PORT=80
+
+# Docker 外部网络（共享后端及 MySQL/Redis 的网络名，与后端保持一致）
+EXTERNAL_NETWORK=public-services_default
diff --git a/deploy/.gitignore b/deploy/.gitignore
new file mode 100644
index 0000000..280fafb
--- /dev/null
+++ b/deploy/.gitignore
@@ -0,0 +1,3 @@
+# 实际配置不入 git
+.env
+.docker/
diff --git a/deploy/Dockerfile b/deploy/Dockerfile
new file mode 100644
index 0000000..1f96cd5
--- /dev/null
+++ b/deploy/Dockerfile
@@ -0,0 +1,23 @@
+# ============================================
+# 前端镜像 — 宿主机构建 dist，Docker 打包 Nginx
+# 启动时通过 BACKEND_PROXY 环境变量指定后端地址
+# ============================================
+FROM nginx:alpine
+
+LABEL maintainer="ghb-base deploy"
+
+# 安装 envsubst（gettext 包提供）
+RUN apk add --no-cache gettext
+
+COPY deploy/nginx/default.conf /etc/nginx/templates/default.conf.template
+
+COPY dist /usr/share/nginx/html
+
+EXPOSE 80
+
+# envsubst 会将模板中 ${BACKEND_PROXY} 替换为实际值
+# 单体模式: http://ghb-backend:8081/ghb
+# Cloud 模式: http://ghb-gateway:9999/ghb
+ENV BACKEND_PROXY=http://ghb-backend:8081/ghb
+
+CMD ["/bin/sh", "-c", "envsubst '${BACKEND_PROXY}' < /etc/nginx/templates/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
diff --git a/deploy/README.md b/deploy/README.md
new file mode 100644
index 0000000..f8ddffa
--- /dev/null
+++ b/deploy/README.md
@@ -0,0 +1,63 @@
+# 前端 Docker 部署
+
+## 前置条件
+
+- 服务器需安装 **Node.js 18+** 和 **pnpm**（macOS 执行 `npm install -g pnpm`）
+- 后端已部署在同一台服务器上
+
+## 首次部署
+
+```bash
+cd deploy
+cp .env.example .env
+vim .env          # 改端口（默认 80 常被占用，建议 3100）
+bash deploy.sh rebuild
+```
+
+## 日常操作
+
+| 命令                            | 作用                       | 场景               |
+| ------------------------------- | -------------------------- | ------------------ |
+| `bash deploy.sh start`          | 停旧容器 → 启动（不编译）  | 改了 nginx 配置    |
+| `bash deploy.sh build [分支]`   | 宿主机构建 dist → 编译镜像 | 代码变了，先编译   |
+| `bash deploy.sh rebuild [分支]` | 拉取分支代码 + 编译 + 启动 | 代码变了，一步到位 |
+| `bash deploy.sh stop`           | 停止                       | -                  |
+| `bash deploy.sh logs`           | 查看日志                   | 排查问题           |
+| `bash deploy.sh status`         | 容器状态                   | -                  |
+
+> 分支参数默认 `master`，指定其他分支：`bash deploy.sh rebuild test`
+
+## 构建原理
+
+宿主机构建 dist + Docker 打包 Nginx（因 Mac Docker Desktop 内存限制，Docker 内编译会 OOM）：
+
+```
+宿主 pnpm build → dist/
+     ↓
+Docker (nginx:alpine)
+  ├─ nginx 配置 → /etc/nginx/conf.d/
+  └─ dist/      → /usr/share/nginx/html/
+```
+
+## Nginx 代理规则
+
+| 路径          | 转发目标                        | 说明                      |
+| ------------- | ------------------------------- | ------------------------- |
+| `/ghb-boot/*` | `http://ghb-backend:8081/ghb/*` | API 代理到后端容器        |
+| `/*`          | 本地静态文件                    | 前端路由回退到 index.html |
+
+前后端通过 `public-services_default` 外部网络互通，无需额外配置。
+
+## 目录结构
+
+```
+deploy/
+├── deploy.sh           # 部署脚本（与后端命令一致）
+├── .env.example        # 配置模板
+├── .env                # 实际配置（不入 git）
+├── Dockerfile          # 精简镜像（nginx + dist）
+├── docker-compose.yml  # Docker 编排
+├── nginx/
+│   └── default.conf    # Nginx 配置（含 API 代理）
+└── README.md
+```
diff --git a/deploy/deploy.sh b/deploy/deploy.sh
new file mode 100755
index 0000000..0cdfb82
--- /dev/null
+++ b/deploy/deploy.sh
@@ -0,0 +1,117 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$(dirname "$SCRIPT_DIR")"
+COMPOSE_FILE="$SCRIPT_DIR/docker-compose.yml"
+
+cd "$SCRIPT_DIR"
+
+# 检查 .env
+if [ ! -f .env ]; then
+    echo "❌ 未找到 .env，请先执行：cp .env.example .env && vim .env"
+    exit 1
+fi
+
+CMD="${1:-help}"
+BRANCH="${2:-master}"
+
+case "$CMD" in
+
+    start)
+        IMAGE_NAME="$(grep APP_NAME .env | cut -d= -f2 | tr -d '"' | tr -d "'" | xargs)-frontend:latest"
+        IMAGE_NAME="${IMAGE_NAME:-ghb-frontend:latest}"
+        if ! docker image inspect "$IMAGE_NAME" > /dev/null 2>&1; then
+            echo "❌ 镜像 $IMAGE_NAME 不存在，请先执行: bash deploy.sh build"
+            exit 1
+        fi
+        echo ">>> 停掉旧容器..."
+        docker compose -f "$COMPOSE_FILE" down 2>/dev/null || true
+        echo ""
+        echo ">>> 启动..."
+        docker compose -f "$COMPOSE_FILE" up -d --force-recreate
+        echo ""
+        echo "✅ 已启动"
+        echo "   地址: http://localhost:$(grep FRONTEND_PORT .env | cut -d= -f2 | tr -d '"' | tr -d "'" | xargs)"
+        echo "   日志: bash deploy.sh logs"
+        ;;
+
+    build)
+        echo ">>> 宿主机构建 dist..."
+        cd "$PROJECT_DIR"
+
+        if ! command -v pnpm &> /dev/null; then
+            echo "安装 pnpm..."
+            npm install -g pnpm
+        fi
+
+        pnpm install
+        pnpm build
+
+        echo ""
+        echo ">>> 编译 Docker 镜像..."
+        cd "$SCRIPT_DIR"
+        docker compose -f "$COMPOSE_FILE" build frontend
+        echo ""
+        echo "✅ 编译完成，执行 bash deploy.sh start 启动"
+        ;;
+
+    rebuild)
+        echo ">>> 切到分支 ${BRANCH} 并拉取最新代码..."
+        cd "$PROJECT_DIR"
+        git fetch origin
+        git checkout "${BRANCH}"
+        git pull origin "${BRANCH}"
+
+        echo ""
+        echo ">>> 宿主机构建 dist..."
+        if ! command -v pnpm &> /dev/null; then
+            echo "安装 pnpm..."
+            npm install -g pnpm
+        fi
+
+        pnpm install
+        pnpm build
+
+        echo ""
+        echo ">>> 重新编译 + 启动..."
+        cd "$SCRIPT_DIR"
+        docker compose -f "$COMPOSE_FILE" down 2>/dev/null || true
+        docker compose -f "$COMPOSE_FILE" build frontend
+        docker compose -f "$COMPOSE_FILE" up -d --force-recreate
+        echo ""
+        echo "✅ 重新部署完成（分支: ${BRANCH}）"
+        echo "   前端地址: http://localhost:$(grep FRONTEND_PORT .env | cut -d= -f2 | tr -d '"' | tr -d "'" | xargs)"
+        ;;
+
+    stop)
+        docker compose -f "$COMPOSE_FILE" down 2>/dev/null || true
+        echo "✅ 已停止"
+        ;;
+
+    logs)
+        docker compose -f "$COMPOSE_FILE" logs -f --tail=200
+        ;;
+
+    status)
+        docker compose -f "$COMPOSE_FILE" ps -a
+        ;;
+
+    *)
+        echo "用法: bash deploy.sh <命令> [分支]"
+        echo ""
+        echo "  start             停旧容器 → 启动（日常使用，不重新编译）"
+        echo "  build             编译 dist + 编译镜像（代码变更后用一次）"
+        echo "  rebuild [分支]     拉取分支代码 + 编译 + 启动（一步到位）"
+        echo "  stop              停止"
+        echo "  logs              查看日志"
+        echo "  status            查看容器状态"
+        echo ""
+        echo "分支参数默认 master，示例："
+        echo "  bash deploy.sh rebuild test"
+        echo ""
+        echo "首次部署：cp .env.example .env && vim .env && bash deploy.sh rebuild"
+        echo "日常更新：bash deploy.sh start"
+        echo "代码变更：bash deploy.sh rebuild <分支>"
+        ;;
+esac
diff --git a/deploy/docker-compose.yml b/deploy/docker-compose.yml
new file mode 100644
index 0000000..da86c72
--- /dev/null
+++ b/deploy/docker-compose.yml
@@ -0,0 +1,26 @@
+# ============================================
+# 前端 Docker Compose
+# ============================================
+#
+# 前端容器通过 public-services_default 网络连接后端及 MySQL/Redis
+# 前提：后端已部署在同一台机器上
+#
+
+services:
+  frontend:
+    build:
+      context: ..
+      dockerfile: deploy/Dockerfile
+    image: ${APP_NAME:-ghb}-frontend:latest
+    container_name: ${APP_NAME:-ghb}-frontend
+    restart: unless-stopped
+    ports:
+      - "${FRONTEND_PORT:-80}:80"
+    networks:
+      - default
+      - shared
+
+networks:
+  shared:
+    name: ${EXTERNAL_NETWORK:-public-services_default}
+    external: true
diff --git a/deploy/nginx/default.conf b/deploy/nginx/default.conf
new file mode 100644
index 0000000..be973d3
--- /dev/null
+++ b/deploy/nginx/default.conf
@@ -0,0 +1,40 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # gzip 压缩
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
+    gzip_min_length 1024;
+
+    # 后端 API — 匹配已知接口路径前缀
+    # 新项目通过 init-project-repos.sh 会将 /test/ 替换为 /项目前缀/
+    location ~ ^/test/(sys|oauth2|jmreport|online|generic|drag|actuator|ws|websocket)/ {
+        proxy_pass ${BACKEND_PROXY};
+        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;
+        proxy_connect_timeout 30s;
+        proxy_read_timeout 120s;
+
+        # WebSocket 支持
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+
+    # 前端 SPA — 所有非 API 非文件请求回退到 index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 静态资源长期缓存（Vite 生成的带 hash 文件）
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
diff --git a/electron-builder.yaml b/electron-builder.yaml
new file mode 100644
index 0000000..05a01e0
--- /dev/null
+++ b/electron-builder.yaml
@@ -0,0 +1,24 @@
+appId: 'com.jeecg.boot3'
+# 产品名称
+productName: 'jeecgboot'
+files:
+  # 仅包含 dist 目录下所有文件
+  - 'dist/**/*'
+  # 特别排除 node_modules 目录
+  - '!node_modules'
+directories:
+  # 输出目录
+  output: 'dist-electron'
+win:
+  # win exe 程序图标
+  icon: 'electron/icons/app.ico'
+  artifactName: 'jeecgboot-setup-${version}.exe'
+# 安装包配置
+nsis:
+  oneClick: false
+  # 是否允许用户选择安装目录
+  allowToChangeInstallationDirectory: true
+  # 是否创建桌面快捷方式
+  createDesktopShortcut: true
+  # 安装程序的图标
+  installerIcon: 'electron/icons/installer.ico'
diff --git a/electron.md b/electron.md
new file mode 100644
index 0000000..758972b
--- /dev/null
+++ b/electron.md
@@ -0,0 +1,36 @@
+# Electron桌面应用打包
+
+- 1.安装依赖很慢，得10分钟左右
+- 2.electron桌面应用打包文档
+  https://help.jeecg.com/ui/setup/electron-build
+- 3.临时注释掉electron功能
+ 注释代码：build/vite/plugin/electron.ts
+ 修改build/vite/plugin/index.ts，搜索`electron plugin`注释相关逻辑代码
+ 修改package.json删除相关依赖
+
+```yaml
+{
+  "main": "dist/electron/main.js",
+  "scripts": {
+    "electron:dev": "cross-env VITE_GLOB_RUN_PLATFORM=electron npm run dev",
+    "electron:build-all": "npm run electron:build-web && npm run electron:build-app",
+    "electron:build-web": "cross-env VITE_GLOB_RUN_PLATFORM=electron NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build --mode prod_electron && cross-env VITE_GLOB_RUN_PLATFORM=electron esno ./build/script/postBuild.ts && esno ./build/script/copyChat.ts",
+    "electron:build-app": "esno ./electron/script/buildBefore.ts && electron-builder && esno ./electron/script/buildAfter.ts",
+    "electron:install": "cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ node node_modules/electron/install.js",
+  },
+  "devDependencies": {
+    "electron": "35.1.4",
+    "electron-builder": "^26.0.12",
+    "vite-plugin-electron": "^0.29.0",
+  },
+}
+```
+
+> 提示：在执行`pnpm install`后如果Electron安装失败，可以尝试运行`npm run electron:install`进行安装
+
+# Electron桌面通知示例和代码位置
+
+1. 代码位置：electron/utils/tray.ts
+2. 发送系统通知调用：sendDesktopNotice
+3. 开始托盘图标闪动调用：startBlink
+4. 停止托盘图标闪动调用：stopBlink
diff --git a/electron/env.ts b/electron/env.ts
new file mode 100644
index 0000000..e6add32
--- /dev/null
+++ b/electron/env.ts
@@ -0,0 +1,18 @@
+// 不能直接使用 process.env，会报错
+export const $ps = process;
+
+export const isDev = !!$ps.env.VITE_DEV_SERVER_URL;
+
+export const $env = getEnv();
+
+function getEnv() {
+  if (isDev) {
+    return $ps.env;
+  }
+  // 非开发环境，从 JSON 文件中获取环境变量
+  const env = require('./env.json');
+  return {
+    ...$ps.env,
+    ...env,
+  };
+}
diff --git a/electron/icons/app.ico b/electron/icons/app.ico
new file mode 100644
index 0000000..c0fbd91
Binary files /dev/null and b/electron/icons/app.ico differ
diff --git a/electron/icons/installer.ico b/electron/icons/installer.ico
new file mode 100644
index 0000000..001572e
Binary files /dev/null and b/electron/icons/installer.ico differ
diff --git a/electron/icons/mac/dock.png b/electron/icons/mac/dock.png
new file mode 100644
index 0000000..796b4d7
Binary files /dev/null and b/electron/icons/mac/dock.png differ
diff --git a/electron/icons/mac/tray-icon.png b/electron/icons/mac/tray-icon.png
new file mode 100644
index 0000000..c4f03ae
Binary files /dev/null and b/electron/icons/mac/tray-icon.png differ
diff --git a/electron/icons/mac/tray-icon@2x.png b/electron/icons/mac/tray-icon@2x.png
new file mode 100644
index 0000000..4b8165e
Binary files /dev/null and b/electron/icons/mac/tray-icon@2x.png differ
diff --git a/electron/ipc/index.ts b/electron/ipc/index.ts
new file mode 100644
index 0000000..bcff9ac
--- /dev/null
+++ b/electron/ipc/index.ts
@@ -0,0 +1,43 @@
+import { Tray, ipcMain, BrowserWindow, app, Notification } from 'electron';
+import type { NotificationConstructorOptions, IpcMainInvokeEvent } from 'electron';
+import { openInBrowser } from '../utils';
+import { omit } from 'lodash-es';
+
+ipcMain.on('open-in-browser', (event: IpcMainInvokeEvent, url: string) => openInBrowser(url));
+// 处理任务栏闪烁
+ipcMain.on('notify-flash', (event: IpcMainInvokeEvent, count: number = 0) => {
+  const win = BrowserWindow.getAllWindows()[0];
+  if (!win) return;
+  if (win.isFocused()) return;
+  if (process.platform === 'win32') {
+    // windows
+    win.flashFrame(true);
+  } else if (process.platform === 'darwin') {
+    // Mac
+    if (app.dock) {
+      app.dock.bounce('informational');
+      // 设置角标(未读消息)
+      if (count > 0) {
+        app.dock.setBadge(count.toString());
+      } else {
+        app.dock.setBadge('');
+      }
+    }
+  }
+});
+// 通知 (点击通知打开指定页面)
+ipcMain.on('notify-with-path', (event: IpcMainInvokeEvent, options: NotificationConstructorOptions & { path: string }) => {
+  const win = BrowserWindow.getAllWindows()[0];
+  if (!win) return;
+  if (win.isFocused()) return;
+  const notification = new Notification({
+    ...omit(options, 'path'),
+  });
+  notification.on('click', () => {
+    if (win.isMinimized()) win.restore();
+    win.show();
+    win.focus();
+    // win.webContents.send('navigate-to', options.path);
+  });
+  notification.show();
+});
diff --git a/electron/main.ts b/electron/main.ts
new file mode 100644
index 0000000..24918fa
--- /dev/null
+++ b/electron/main.ts
@@ -0,0 +1,62 @@
+import { app, BrowserWindow, Menu } from 'electron';
+import { isDev } from './env';
+import { createMainWindow, createIndexWindow } from './utils/window';
+import { getAppInfo } from './utils';
+import './ipc';
+
+// 隐藏所有菜单
+Menu.setApplicationMenu(null);
+
+let mainWindow: BrowserWindow | null = null;
+
+function main() {
+  mainWindow = createMainWindow();
+  // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+  mainWindow.on('focus', () => {
+    // 清除任务栏闪烁
+    if (process.platform === 'win32') {
+      mainWindow!.flashFrame(false);
+    }
+  });
+  return mainWindow;
+}
+
+// 非开发环境，只允许一个实例运行
+if (!isDev) {
+  // 是否取得了单一实例锁
+  const gotTheLock = app.requestSingleInstanceLock();
+
+  if (gotTheLock) {
+    app.on('second-instance', () => {
+      // 开启一个新的窗口
+      createIndexWindow();
+    });
+  } else {
+    // 没有取得单一实例锁，则退出应用
+    app.exit(0);
+  }
+}
+
+// 生命周期管理
+app.whenReady().then(() => {
+  // 获取应用信息
+  const $appInfo = getAppInfo();
+  if ($appInfo?.productName && $appInfo?.appId) {
+    app.setName($appInfo.productName);
+    app.setAppUserModelId($appInfo.appId);
+  }
+
+  main();
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      main();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
diff --git a/electron/paths.ts b/electron/paths.ts
new file mode 100644
index 0000000..ff3c991
--- /dev/null
+++ b/electron/paths.ts
@@ -0,0 +1,18 @@
+import path from 'path'
+import {isDev} from "./env";
+
+export const _PATHS = getPaths()
+
+function getPaths() {
+  const _root = __dirname;
+  const publicRoot = path.join(_root, isDev ? '../../public' : '..');
+  const preloadRoot = path.join(_root, 'preload')
+
+  return {
+    electronRoot: _root,
+    publicRoot,
+    preloadRoot,
+
+    appIcon: path.join(_root, `icons/app.ico`).replace(/[\\/]dist[\\/]/, '/'),
+  }
+}
\ No newline at end of file
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
new file mode 100644
index 0000000..3ef5e49
--- /dev/null
+++ b/electron/preload/index.ts
@@ -0,0 +1,20 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { ElectronEnum } from '../../src/enums/jeecgEnum';
+
+contextBridge.exposeInMainWorld(ElectronEnum.ELECTRON_API, {
+  openInBrowser: (url: string) => ipcRenderer.send('open-in-browser', url),
+  // 发送消息通知
+  sendNotification: (title: string, body: string, path: string) => {
+    ipcRenderer.send('notify-with-path', { title, body, path });
+  },
+  // 绑定路由跳转
+  onNavigate: (cb: (path: string) => void) => {
+    ipcRenderer.on('navigate-to', (_, path) => cb(path));
+  },
+  // 任务栏闪
+  sendNotifyFlash: () => ipcRenderer.send('notify-flash'),
+  // 托盘闪动
+  trayFlash: () => ipcRenderer.send('tray-flash'),
+  // 托盘停止闪动
+  trayFlashStop: () => ipcRenderer.send('tray-flash-stop'),
+});
diff --git a/electron/script/buildAfter.ts b/electron/script/buildAfter.ts
new file mode 100644
index 0000000..50024ea
--- /dev/null
+++ b/electron/script/buildAfter.ts
@@ -0,0 +1 @@
+console.log('build elctron is done.');
\ No newline at end of file
diff --git a/electron/script/buildBefore.ts b/electron/script/buildBefore.ts
new file mode 100644
index 0000000..d1eac5d
--- /dev/null
+++ b/electron/script/buildBefore.ts
@@ -0,0 +1,27 @@
+import path from 'path';
+import fs from 'fs';
+
+const root = path.join(__dirname, '../../');
+const electronDistRoot = path.join(root, 'dist/electron');
+
+let yamlName = 'electron-builder.yaml';
+const sourcePath = fs.readFileSync(path.join(root, yamlName), 'utf-8');
+
+try {
+  // 通过正则表达式匹配 appId 和 productName
+  const appIdMatch = sourcePath.match(/appId:\s*['"]([^'"]+)['"]/);
+  const productNameMatch = sourcePath.match(/productName:\s*['"]([^'"]+)['"]/);
+  if (appIdMatch && productNameMatch) {
+    const fileContent = `${appIdMatch[0]}\n${productNameMatch[0]}`;
+    yamlName = 'env.yaml';
+    const targetPath = path.join(electronDistRoot, yamlName);
+    fs.writeFileSync(targetPath, fileContent, 'utf-8');
+    console.log(`✨ write dist ${yamlName} successfully.`);
+  } else {
+    throw new Error('appId or productName not found');
+  }
+} catch (e) {
+  console.error(e);
+  console.error(`请检查 ${yamlName} 是否存在，或者内容是否正确`);
+  process.exit(1);
+}
diff --git a/electron/utils/index.ts b/electron/utils/index.ts
new file mode 100644
index 0000000..6bc206d
--- /dev/null
+++ b/electron/utils/index.ts
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import path from 'path'
+import {shell, dialog} from 'electron'
+import {_PATHS} from "../paths";
+import {isDev} from "../env";
+
+// 通过浏览器打开链接
+export function openInBrowser(url: string) {
+  return shell.openExternal(url);
+}
+
+
+export function getAppInfo(): any {
+  try {
+    const yamlPath = isDev ? path.join(_PATHS.publicRoot, '../electron-builder.yaml') : path.join(_PATHS.electronRoot, 'env.yaml');
+    const yamlContent = fs.readFileSync(yamlPath, 'utf-8');
+    // 通过正则表达式匹配 appId 和 productName
+    const appIdMatch = yamlContent.match(/appId:\s*['"]([^'"]+)['"]/);
+    const productNameMatch = yamlContent.match(/productName:\s*['"]([^'"]+)['"]/);
+    const appId = appIdMatch ? appIdMatch[1] : '';
+    const productName = productNameMatch ? productNameMatch[1] : '';
+    return {appId, productName}
+  } catch (e) {
+    dialog.showMessageBoxSync(null, {
+      type: 'error',
+      title: '错误',
+      message: '应用启动失败，请从官网下载最新版本安装包后重新安装！',
+    });
+    process.exit(-1);
+  }
+}
diff --git a/electron/utils/tray.ts b/electron/utils/tray.ts
new file mode 100644
index 0000000..20b803e
--- /dev/null
+++ b/electron/utils/tray.ts
@@ -0,0 +1,200 @@
+// tray = 系统托盘
+import path from 'path';
+import { Tray, Menu, app, dialog, nativeImage, BrowserWindow, Notification, ipcMain } from 'electron';
+import type { IpcMainInvokeEvent } from 'electron';
+import {_PATHS} from '../paths';
+import {$env, isDev} from '../env';
+
+const TrayIcons = {
+  // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+  normal: nativeImage.createFromPath(
+    process.platform === 'win32'
+      ? path.join(_PATHS.publicRoot, 'logo.png')
+      : path.join(_PATHS.electronRoot, './icons/mac/tray-icon.png').replace(/[\\/]dist[\\/]/, '/')
+  ),
+  empty: nativeImage.createEmpty(),
+};
+
+// 创建托盘图标
+export function createTray(win: BrowserWindow) {
+  const tray = new Tray(TrayIcons.normal);
+
+  const TrayUtils = useTray(tray, win);
+
+  tray.setToolTip($env.VITE_GLOB_APP_TITLE! + (isDev ? ' (开发环境)' : ''));
+
+  // 左键托盘图标显示主窗口
+  tray.on('click', () => TrayUtils.showMainWindow());
+  // 右键托盘图标显示托盘菜单
+  tray.on('right-click', () => showTrayContextMenu());
+
+  function showTrayContextMenu() {
+    const trayContextMenu = getTrayMenus(win, TrayUtils);
+    // 弹出托盘菜单，不使用 setContextMenu 方法是因为要实时更新菜单内容
+    tray.popUpContextMenu(trayContextMenu);
+  }
+}
+
+export function useTray(tray: Tray, win: BrowserWindow) {
+  let isBlinking = false;
+  let blinkTimer: NodeJS.Timeout | null = null;
+
+  function showMainWindow() {
+    win.show();
+  }
+
+  // 开始闪动
+  function startBlink() {
+    isBlinking = true;
+    tray.setImage(TrayIcons.empty);
+    blinkTimer = setTimeout(() => {
+      tray.setImage(TrayIcons.normal);
+      setTimeout(() => {
+        if (isBlinking) {
+          startBlink();
+        }
+      }, 500);
+    }, 500);
+  }
+
+  // 结束闪动
+  function stopBlink() {
+    isBlinking = false;
+    if (blinkTimer) {
+      clearTimeout(blinkTimer);
+      blinkTimer = null;
+    }
+    tray.setImage(TrayIcons.normal);
+  }
+  ipcMain.on('tray-flash', (event: IpcMainInvokeEvent) => {
+    // 仅在 Windows 系统中闪烁
+    if (process.platform === 'win32') {
+      startBlink();
+    }
+  });
+  ipcMain.on('tray-flash-stop', (event: IpcMainInvokeEvent) => {
+    // 仅在 Windows 系统中停止闪烁
+    if (process.platform === 'win32') {
+      stopBlink();
+    }
+  });
+  win.on('focus', () => {
+    stopBlink();
+  });
+  // 发送桌面通知
+  function sendDesktopNotice() {
+    // 判断是否支持桌面通知
+    if (!Notification.isSupported()) {
+      // todo 实际开发中不需要提示，直接返回或者换一种提示方式
+      dialog.showMessageBoxSync(win, {
+        type: 'error',
+        title: '错误',
+        message: '当前系统不支持桌面通知',
+      });
+      return;
+    }
+    const ins = new Notification({
+      title: '通知标题',
+      body: '通知内容第一行\n通知内容第二行',
+      // icon: TrayIcons.normal.resize({width: 32, height: 32}),
+    });
+
+    ins.on('click', () => {
+      dialog.showMessageBoxSync(win, {
+        type: 'info',
+        title: '提示',
+        message: '通知被点击',
+      });
+    });
+
+    ins.show();
+  }
+
+  return {
+    showMainWindow,
+
+    startBlink,
+    stopBlink,
+    isBlinking: () => isBlinking,
+
+    sendDesktopNotice,
+  };
+}
+
+const MenuIcon = {
+  exit: nativeImage
+    .createFromDataURL(
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACJ0lEQVR4nH1TzWvUQBRP7fpxsWqVXsSLiAevRWhhN28msRJo981kay4WRBCF/QdEFJpbaUHw4kFBQTwUKX4gKh48KPiBBcGLJ1F0uzPZ7ibWXf0DIjObielS+mDIm/fxm9/85sWyBixN06E0CIaV3wB2XhC8puOWNZSG4Y7B+k2mi7Kl9l2n9rHnzvbWJoLRYn7r5jTViQjwzM8ynlC+AFyVgN2NU8G+Rnn6QETx3FfP223A/jeHfWqCsAUJ7Hlryh9Te0nYqiDsz9rE6VHVIABvNwEf/ADYk4OsZPeVFbwiCHtcZBVR9k4CJhJmDuUxwEVJ8H4fINOkC9Vjbeq/UTR1IgPturX3f93Z35+B7ddxgJL6dih/skF9zE9KCJ//5bDLpii1+npIuzolKTubC5gBxzarJo6vWWjrUP+etFlF+ds9lRFOXalN+NPEmxvRDS3KH34v8+PFIgNmTh0EahH+InGCwzoQEbYcuTMnlR8aYbaxGHFvRNiznssP6sA65UsxrdU1+hYnFhlpAGAkdvzlPLFu88mY8pcrVjCsxcqGapC2eYW249/tUH4xS4QaVQLeigi/YWJqPl4DlNRSrAwzSaoXIspeWUYrI9qXINglgT1qAt5JPG+kkNN5BSAJuyoJfhAVdmST4PlPBFASNs6rIgnspqC8HlF+SQAuRQTfKpYiEy6fwuIdP42P71T+t0l/TBKcE8AXm4DXBfB6w50+apgUhf4HZ5j+Z5+zNTAAAAAASUVORK5CYII='
+    )
+    .resize({
+      width: 16,
+      height: 16,
+    }),
+};
+
+// 设置托盘菜单
+function getTrayMenus(win: BrowserWindow, TrayUtils: ReturnType<typeof useTray>) {
+  const {startBlink, stopBlink, sendDesktopNotice} = TrayUtils;
+  const isBlinking = TrayUtils.isBlinking();
+
+  return Menu.buildFromTemplate([
+    ...(isDev
+      ? [
+        {
+          label: '开发工具',
+          submenu: [
+            {
+              label: '以下菜单仅显示在开发环境',
+              sublabel: '当前为开发环境',
+              enabled: false,
+            },
+            {type: 'separator'},
+            {
+              label: '切换 DevTools',
+              click: () => win.webContents.toggleDevTools(),
+            },
+            {
+              label: `托盘图标${isBlinking ? '停止' : '开始'}闪烁`,
+              sublabel: '模拟新消息提醒',
+              click: () => (isBlinking ? stopBlink() : startBlink()),
+            },
+            {
+              label: '发送桌面通知示例',
+              click: () => sendDesktopNotice(),
+            },
+          ],
+        },
+        {type: 'separator'},
+      ]
+      : ([] as any)),
+    {
+      label: '显示主窗口',
+      // 文件图标
+      icon: TrayIcons.normal.resize({width: 16, height: 16}),
+      click: () => win.show(),
+    },
+    {type: 'separator'},
+    {
+      label: '退出',
+      // base64图标
+      icon: MenuIcon.exit,
+      click: () => {
+        // 弹出是否确认退出提示框
+        const choice = dialog.showMessageBoxSync(win, {
+          type: 'question',
+          title: '提示',
+          message: '确定要退出应用吗？',
+          buttons: ['退出', '取消'],
+          defaultId: 1,
+          cancelId: 1,
+          noLink: true,
+        });
+        // 用户选择了退出，直接 exit
+        if (choice === 0) {
+          // global.isQuitting = true;
+          app.exit(0);
+        }
+      },
+    },
+  ]);
+}
diff --git a/electron/utils/window.ts b/electron/utils/window.ts
new file mode 100644
index 0000000..281c98c
--- /dev/null
+++ b/electron/utils/window.ts
@@ -0,0 +1,100 @@
+import type {BrowserWindowConstructorOptions} from 'electron';
+import {app, BrowserWindow, dialog} from 'electron';
+import path from 'path';
+import {_PATHS} from '../paths';
+import {$env, isDev} from '../env';
+import {createTray} from './tray';
+
+// 获取公共窗口选项
+export function getBrowserWindowOptions(options?: BrowserWindowConstructorOptions): BrowserWindowConstructorOptions {
+  return {
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      preload: path.join(_PATHS.preloadRoot, 'index.js'),
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+    // 应用图标
+    icon: isDev ? _PATHS.appIcon : void 0,
+    ...options,
+  }
+}
+
+// 创建窗口
+export function createBrowserWindow(options?: BrowserWindowConstructorOptions) {
+  const win = new BrowserWindow(getBrowserWindowOptions(options));
+  // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+  if (process.platform === 'darwin') { // 仅 macOS 生效
+    if (app.dock) {
+      app.dock.setIcon(path.join(_PATHS.electronRoot, './icons/mac/dock.png').replace(/[\\/]dist[\\/]/, '/'));
+    }
+  }
+
+  // 设置窗口打开处理器
+  win.webContents.setWindowOpenHandler(() => {
+    return {
+      action: 'allow',
+      // 覆写新窗口的选项，用于调整默认尺寸和加载preload脚本等
+      overrideBrowserWindowOptions: getBrowserWindowOptions(),
+    }
+  });
+
+  // 当 beforeunload 阻止窗口关闭时触发
+  win.webContents.on('will-prevent-unload', () => {
+    const choice = dialog.showMessageBoxSync(win, {
+      type: 'question',
+      title: '确认关闭吗？',
+      message: '系统可能不会保存您所做的更改。',
+      buttons: ['关闭', '取消'],
+      defaultId: 1,
+      cancelId: 1,
+      noLink: true,
+    });
+    // 用户选择了关闭，直接销毁窗口
+    if (choice === 0) {
+      win.destroy();
+    }
+  });
+
+  return win;
+}
+
+// 创建主窗口、系统托盘
+export function createMainWindow() {
+  const win = createIndexWindow()
+
+  // 设置系统托盘图标
+  createTray(win);
+
+  // 主窗口尝试关闭时，默认不直接退出应用，而是隐藏到托盘
+  win.on('close', (event) => {
+    event.preventDefault();
+    win.hide();
+  });
+
+  return win;
+}
+
+// 创建索引窗口
+export function createIndexWindow() {
+  const win = createBrowserWindow({
+    width: 1600,
+    height: 1000,
+    title: $env.VITE_GLOB_APP_TITLE!,
+  });
+
+  // 开发环境加载Vite服务，生产加载打包文件
+  if (isDev) {
+    let serverUrl = $env.VITE_DEV_SERVER_URL! as string;
+    // 【JHHB-936】由于wps预览不能使用localhost访问，所以把localhost替换为127.0.0.1
+    serverUrl = serverUrl.replace('localhost', '127.0.0.1');
+    win.loadURL(serverUrl)
+    // 开发环境下，自动打开调试工具
+    // win.webContents.openDevTools()
+  } else {
+    win.loadFile(path.join(_PATHS.publicRoot, 'index.html'));
+  }
+
+  return win;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29726ac
--- /dev/null
+++ b/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="zh_CN" id="htmlRoot">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+
+    <title><%= title %></title>
+    <link rel="icon" href="<%= basePublicPath %>/logo.png" />
+    <!-- 全局配置 -->
+    <script>
+      window._CONFIG = {};
+    </script>
+  </head>
+  <body>
+    <script>
+      (() => {
+        var htmlRoot = document.getElementById('htmlRoot');
+        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+        if (htmlRoot && theme) {
+          htmlRoot.setAttribute('data-theme', theme);
+          theme = htmlRoot = null;
+        }
+      })();
+    </script>
+    <div id="app">
+      <style>
+        html[data-theme='dark'] .app-loading {
+          background-color: #2c344a;
+        }
+
+        html[data-theme='dark'] .app-loading .app-loading-title {
+          color: rgba(255, 255, 255, 0.85);
+        }
+
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f4f7f9;
+        }
+
+        .app-loading .app-loading-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-title {
+          display: flex;
+          margin-top: 30px;
+          font-size: 30px;
+          color: rgba(0, 0, 0, 0.85);
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto;
+          margin-bottom: 20px;
+        }
+
+        .dot {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          margin-top: 30px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 0.3;
+          transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
+          transform-origin: 50% 50%;
+        }
+
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        }
+
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+        }
+
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          -webkit-animation-delay: 1.2s;
+          animation-delay: 1.2s;
+        }
+        @keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+        @-webkit-keyframes antRotate {
+          to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+          }
+        }
+        @keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+        @-webkit-keyframes antSpinMove {
+          to {
+            opacity: 1;
+          }
+        }
+      </style>
+      <div class="app-loading">
+        <div class="app-loading-wrap">
+          <img src="<%= basePublicPath %>/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title"><%= title %></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+    <!-- 百度统计 -->
+    <script>
+    window.addEventListener('load', function() {
+      var _hmt = _hmt || [];
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39";
+      hm.async = true;
+      hm.defer = true;
+      var s = document.getElementsByTagName("script")[0];
+      s.parentNode.insertBefore(hm, s);
+    });
+    </script>
+
+  </body>
+</html>
diff --git a/jest.config.mjs b/jest.config.mjs
new file mode 100644
index 0000000..162e72b
--- /dev/null
+++ b/jest.config.mjs
@@ -0,0 +1,36 @@
+export default {
+  preset: 'ts-jest',
+  roots: ['<rootDir>/tests/'],
+  clearMocks: true,
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'ts', 'vue', 'tsx', 'jsx', 'json', 'node'],
+  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
+  testMatch: [
+    '**/tests/**/*.[jt]s?(x)',
+    '**/?(*.)+(spec|test).[tj]s?(x)',
+    '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
+  ],
+  testPathIgnorePatterns: [
+    '<rootDir>/tests/server/',
+    '<rootDir>/tests/__mocks__/',
+    '/node_modules/',
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'],
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '\\.(vs|fs|vert|frag|glsl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/tests/__mocks__/fileMock.ts',
+    '\\.(sass|s?css|less)$': '<rootDir>/tests/__mocks__/styleMock.ts',
+    '\\?worker$': '<rootDir>/tests/__mocks__/workerMock.ts',
+    '^/@/(.*)$': '<rootDir>/src/$1',
+  },
+  testEnvironment: 'jsdom',
+  verbose: true,
+  collectCoverage: false,
+  coverageDirectory: 'coverage',
+  collectCoverageFrom: ['src/**/*.{js,ts,vue}'],
+  coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'],
+};
diff --git a/mock/_createProductionServer.ts b/mock/_createProductionServer.ts
new file mode 100644
index 0000000..8f47c23
--- /dev/null
+++ b/mock/_createProductionServer.ts
@@ -0,0 +1,18 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+
+const modules = import.meta.glob('./**/*.ts', { eager: true });
+
+const mockModules: any[] = [];
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return;
+  }
+  mockModules.push(...(modules as Recordable)[key].default);
+});
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export function setupProdMockServer() {
+  createProdMockServer(mockModules);
+}
diff --git a/mock/_util.ts b/mock/_util.ts
new file mode 100644
index 0000000..6a171d5
--- /dev/null
+++ b/mock/_util.ts
@@ -0,0 +1,63 @@
+// Interface data format used to return a unified format
+
+export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
+  return {
+    code: 0,
+    result,
+    message,
+    type: 'success',
+  };
+}
+
+export function resultPageSuccess<T = any>(
+  pageNo: number,
+  pageSize: number,
+  list: T[],
+  { message = 'ok' } = {}
+) {
+  const pageData = pagination(pageNo, pageSize, list);
+
+  return {
+    ...resultSuccess({
+      records: pageData,
+      total: list.length,
+    }),
+    message,
+  };
+}
+
+export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
+  return {
+    code,
+    result,
+    message,
+    type: 'error',
+  };
+}
+
+export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
+  const offset = (pageNo - 1) * Number(pageSize);
+  const ret =
+    offset + Number(pageSize) >= array.length
+      ? array.slice(offset, array.length)
+      : array.slice(offset, offset + Number(pageSize));
+  return ret;
+}
+
+export interface requestParams {
+  method: string;
+  body: any;
+  headers?: { authorization?: string };
+  query: any;
+}
+
+/**
+ * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
+ *
+ */
+export function getRequestToken({ headers }: requestParams): string | undefined {
+  return headers?.authorization;
+}
+
+//TODO 接口父路径（写死不够灵活）
+export const baseUrl = '/jeecgboot/mock';
diff --git a/mock/demo/account.ts b/mock/demo/account.ts
new file mode 100644
index 0000000..a8a31c2
--- /dev/null
+++ b/mock/demo/account.ts
@@ -0,0 +1,70 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess, resultError, baseUrl } from '../_util';
+import { ResultEnum } from '../../src/enums/httpEnum';
+const userInfo = {
+  name: 'Jeecg',
+  userid: '00000001',
+  email: 'test@gmail.com',
+  signature: '海纳百川，有容乃大',
+  introduction: '微笑着，努力着，欣赏着',
+  title: '交互专家',
+  group: '某某某事业群－某某平台部－某某技术部－UED',
+  tags: [
+    {
+      key: '0',
+      label: '很有想法的',
+    },
+    {
+      key: '1',
+      label: '专注设计',
+    },
+    {
+      key: '2',
+      label: '辣~',
+    },
+    {
+      key: '3',
+      label: '大长腿',
+    },
+    {
+      key: '4',
+      label: '川妹子',
+    },
+    {
+      key: '5',
+      label: '海纳百川',
+    },
+  ],
+  notifyCount: 12,
+  unreadCount: 11,
+  country: 'China',
+  address: 'Xiamen City 77',
+  phone: '0592-268888888',
+};
+
+export default [
+  {
+    url: `${baseUrl}/account/getAccountInfo`,
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(userInfo);
+    },
+  },
+  {
+    url: `${baseUrl}/user/sessionTimeout`,
+    method: 'post',
+    statusCode: 401,
+    response: () => {
+      return resultError();
+    },
+  },
+  {
+    url: '/basic-api/user/tokenExpired',
+    method: 'post',
+    statusCode: 200,
+    response: () => {
+      return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
+    },
+  },
+] as MockMethod[];
diff --git a/mock/demo/select-demo.ts b/mock/demo/select-demo.ts
new file mode 100644
index 0000000..cb77aec
--- /dev/null
+++ b/mock/demo/select-demo.ts
@@ -0,0 +1,37 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess, baseUrl } from '../_util';
+
+const demoList = (keyword, count = 20) => {
+  const result = {
+    list: [] as any[],
+  };
+  for (let index = 0; index < count; index++) {
+    //根据搜索关键词做一下匹配
+    let name = `选项${index}`;
+    if(keyword && name.indexOf(keyword)!=-1){
+      result.list.push({
+        name: `选项${index}`,
+        id: `${index}`,
+      });
+    }else if(!keyword){
+      result.list.push({
+        name: `选项${index}`,
+        id: `${index}`,
+      });
+    }
+  }
+  return result;
+};
+
+export default [
+  {
+    url: `${baseUrl}/select/getDemoOptions`,
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { keyword,count} = query;
+      console.log("查询条件：", keyword);
+      return resultSuccess(demoList(keyword,count));
+    },
+  },
+] as MockMethod[];
diff --git a/mock/demo/system.ts b/mock/demo/system.ts
new file mode 100644
index 0000000..940c04e
--- /dev/null
+++ b/mock/demo/system.ts
@@ -0,0 +1,298 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultError, resultPageSuccess, resultSuccess, baseUrl } from '../_util';
+
+const accountList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 20; index++) {
+        result.push({
+            id: `${index}`,
+            account: '@first',
+            email: '@email',
+            nickname: '@cname()',
+            role: '@first',
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            'status|1': ['0', '1'],
+        });
+    }
+    return result;
+})();
+
+const userList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 20; index++) {
+        result.push({
+            id: `${index}`,
+            username: '@first',
+            email: '@email',
+            realname: '@cname()',
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640'
+        });
+    }
+    return result;
+})();
+
+const roleList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 4; index++) {
+        result.push({
+            id: index + 1,
+            orderNo: `${index + 1}`,
+            roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
+            roleValue: '@first',
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            menu: [['0', '1', '2'], ['0', '1'], ['0', '2'], ['2']][index],
+            'status|1': ['0', '1'],
+        });
+    }
+    return result;
+})();
+
+const newRoleList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 4; index++) {
+        result.push({
+            id: index + 1,
+            orderNo: `${index + 1}`,
+            roleName: ['超级管理员', '管理员', '文章管理员', '普通用户'][index],
+            roleCode: '@first',
+            createTime: '@datetime',
+            remark: '@cword(10,20)'
+        });
+    }
+    return result;
+})();
+
+const testList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 4; index++) {
+        result.push({
+            id: index + 1,
+            orderNo: `${index + 1}`,
+            testName: ['数据1', '数据2', '数据3', '数据4'][index],
+            testValue: '@first',
+            createTime: '@datetime'
+        });
+    }
+    return result;
+})();
+
+const tableDemoList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 4; index++) {
+        result.push({
+            id: index + 1,
+            orderCode: '2008200' + `${index + 1}`,
+            orderMoney: '@natural(1000,3000)',
+            ctype: '@natural(1,2)',
+            content: '@cword(10,20)',
+            orderDate: '@datetime'
+        });
+    }
+    return result;
+})();
+
+const deptList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 3; index++) {
+        result.push({
+            id: `${index}`,
+            deptName: ['华东分部', '华南分部', '西北分部'][index],
+            orderNo: index + 1,
+            createTime: '@datetime',
+            remark: '@cword(10,20)',
+            'status|1': ['0', '0', '1'],
+            children: (() => {
+                const children: any[] = [];
+                for (let j = 0; j < 4; j++) {
+                    children.push({
+                        id: `${index}-${j}`,
+                        deptName: ['研发部', '市场部', '商务部', '财务部'][j],
+                        orderNo: j + 1,
+                        createTime: '@datetime',
+                        remark: '@cword(10,20)',
+                        'status|1': ['0', '1'],
+                        parentDept: `${index}`,
+                        children: undefined,
+                    });
+                }
+                return children;
+            })(),
+        });
+    }
+    return result;
+})();
+
+const menuList = (() => {
+    const result: any[] = [];
+    for (let index = 0; index < 3; index++) {
+        result.push({
+            id: `${index}`,
+            icon: ['ion:layers-outline', 'ion:git-compare-outline', 'ion:tv-outline'][index],
+            component: 'LAYOUT',
+            type: '0',
+            menuName: ['Dashboard', '权限管理', '功能'][index],
+            permission: '',
+            orderNo: index + 1,
+            createTime: '@datetime',
+            'status|1': ['0', '0', '1'],
+            children: (() => {
+                const children: any[] = [];
+                for (let j = 0; j < 4; j++) {
+                    children.push({
+                        id: `${index}-${j}`,
+                        type: '1',
+                        menuName: ['菜单1', '菜单2', '菜单3', '菜单4'][j],
+                        icon: 'ion:document',
+                        permission: ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index],
+                        component: [
+                            '/dashboard/welcome/index',
+                            '/dashboard/Analysis/index',
+                            '/dashboard/workbench/index',
+                            '/dashboard/test/index',
+                        ][j],
+                        orderNo: j + 1,
+                        createTime: '@datetime',
+                        'status|1': ['0', '1'],
+                        parentMenu: `${index}`,
+                        children: (() => {
+                            const children: any[] = [];
+                            for (let k = 0; k < 4; k++) {
+                                children.push({
+                                    id: `${index}-${j}-${k}`,
+                                    type: '2',
+                                    menuName: '按钮' + (j + 1) + '-' + (k + 1),
+                                    icon: '',
+                                    permission:
+                                        ['menu1:view', 'menu2:add', 'menu3:update', 'menu4:del'][index] +
+                                        ':btn' +
+                                        (k + 1),
+                                    component: [
+                                        '/dashboard/welcome/index',
+                                        '/dashboard/Analysis/index',
+                                        '/dashboard/workbench/index',
+                                        '/dashboard/test/index',
+                                    ][j],
+                                    orderNo: j + 1,
+                                    createTime: '@datetime',
+                                    'status|1': ['0', '1'],
+                                    parentMenu: `${index}-${j}`,
+                                    children: undefined,
+                                });
+                            }
+                            return children;
+                        })(),
+                    });
+                }
+                return children;
+            })(),
+        });
+    }
+    return result;
+})();
+
+export default [
+  {
+    url: `${baseUrl}/system/getAccountList`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, accountList);
+    },
+  },
+  {
+    url: `${baseUrl}/sys/user/list`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, userList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/getRoleListByPage`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, roleList);
+    },
+  },
+  {
+    url: `${baseUrl}/sys/role/list`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, newRoleList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/getTestListByPage`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, testList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/getDemoTableListByPage`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, tableDemoList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/setRoleStatus`,
+    timeout: 500,
+    method: 'post',
+    response: ({ query }) => {
+      const { id, status } = query;
+      return resultSuccess({ id, status });
+    },
+  },
+  {
+    url: `${baseUrl}/system/getAllRoleList`,
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(roleList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/getDeptList`,
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(deptList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/getMenuList`,
+    timeout: 100,
+    method: 'get',
+    response: () => {
+      return resultSuccess(menuList);
+    },
+  },
+  {
+    url: `${baseUrl}/system/accountExist`,
+    timeout: 500,
+    method: 'post',
+    response: ({ body }) => {
+      const { account } = body || {};
+      if (account && account.indexOf('admin') !== -1) {
+        return resultError('该字段不能包含admin');
+      } else {
+        return resultSuccess(`${account} can use`);
+      }
+    },
+  },
+] as MockMethod[];
diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
new file mode 100644
index 0000000..699c9dc
--- /dev/null
+++ b/mock/demo/table-demo.ts
@@ -0,0 +1,56 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { Random } from 'mockjs';
+import { resultPageSuccess, baseUrl } from '../_util';
+
+function getRandomPics(count = 10): string[] {
+  const arr: string[] = [];
+  for (let i = 0; i < count; i++) {
+    arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
+  }
+  return arr;
+}
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 200; index++) {
+    result.push({
+      id: `${index}`,
+      beginTime: '@datetime',
+      endTime: '@datetime',
+      address: '@city()',
+      name: '@cname()',
+      name1: '@cname()',
+      name2: '@cname()',
+      name3: '@cname()',
+      name4: '@cname()',
+      name5: '@cname()',
+      name6: '@cname()',
+      name7: '@cname()',
+      name8: '@cname()',
+      avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
+      imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
+      imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
+      age: Math.ceil(Math.random() * 30) + 1,
+      score: Math.ceil(Math.random() * 80) + 1,
+      date: `@date('yyyy-MM-dd')`,
+      time: `@time('HH:mm')`,
+      'no|100000-10000000': 100000,
+      'status|1': ['normal', 'enable', 'disable'],
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: `${baseUrl}/table/getDemoList`,
+    timeout: 100,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      // 代码逻辑说明: 【issues/6943】mock翻页之后数据id和图片没自动刷新
+      const pageNo = +(query.pageNo ?? page);
+      return resultPageSuccess(pageNo, +pageSize, demoList);
+    },
+  },
+] as MockMethod[];
diff --git a/mock/demo/tree-demo.ts b/mock/demo/tree-demo.ts
new file mode 100644
index 0000000..388d913
--- /dev/null
+++ b/mock/demo/tree-demo.ts
@@ -0,0 +1,38 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess, baseUrl } from '../_util';
+
+const demoTreeList = (keyword) => {
+  const result = {
+    list: [] as Recordable[],
+  };
+  for (let index = 0; index < 5; index++) {
+    const children: Recordable[] = [];
+    for (let j = 0; j < 3; j++) {
+      children.push({
+        title: `${keyword ?? ''}选项${index}-${j}`,
+        value: `${index}-${j}`,
+        key: `${index}-${j}`,
+      });
+    }
+    result.list.push({
+      title: `${keyword ?? ''}选项${index}`,
+      value: `${index}`,
+      key: `${index}`,
+      children,
+    });
+  }
+  return result;
+};
+
+export default [
+  {
+    url: `${baseUrl}/tree/getDemoOptions`,
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { keyword } = query;
+      console.log("查询条件：", keyword);
+      return resultSuccess(demoTreeList(keyword));
+    },
+  },
+] as MockMethod[];
diff --git a/mock/sys/menu.ts b/mock/sys/menu.ts
new file mode 100644
index 0000000..5379cb5
--- /dev/null
+++ b/mock/sys/menu.ts
@@ -0,0 +1,271 @@
+import { resultSuccess, resultError, getRequestToken, requestParams,baseUrl} from '../_util';
+import { MockMethod } from 'vite-plugin-mock';
+import { createFakeUserList } from './user';
+import { PageEnum } from '/@/enums/pageEnum';
+
+// single
+const dashboardRoute = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: 'LAYOUT',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'routes.dashboard.dashboard',
+    hideChildrenInMenu: true,
+    icon: 'bx:bx-home',
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: '/dashboard/Analysis/index',
+      meta: {
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.analysis',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: '/dashboard/workbench/index',
+      meta: {
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.workbench',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
+      },
+    },
+  ],
+};
+
+const backRoute = {
+  path: 'back',
+  name: 'PermissionBackDemo',
+  meta: {
+    title: 'routes.demo.permission.back',
+  },
+
+  children: [
+    {
+      path: 'page',
+      name: 'BackAuthPage',
+      component: '/demo/permission/back/index',
+      meta: {
+        title: 'routes.demo.permission.backPage',
+      },
+    },
+    {
+      path: 'btn',
+      name: 'BackAuthBtn',
+      component: '/demo/permission/back/Btn',
+      meta: {
+        title: 'routes.demo.permission.backBtn',
+      },
+    },
+  ],
+};
+
+const authRoute = {
+  path: '/permission',
+  name: 'Permission',
+  component: 'LAYOUT',
+  redirect: '/permission/front/page',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.permission.permission',
+  },
+  children: [backRoute],
+};
+
+const levelRoute = {
+  path: '/level',
+  name: 'Level',
+  component: 'LAYOUT',
+  redirect: '/level/menu1/menu1-1',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.level.level',
+  },
+
+  children: [
+    {
+      path: 'menu1',
+      name: 'Menu1Demo',
+      meta: {
+        title: 'Menu1',
+      },
+      children: [
+        {
+          path: 'menu1-1',
+          name: 'Menu11Demo',
+          meta: {
+            title: 'Menu1-1',
+          },
+          children: [
+            {
+              path: 'menu1-1-1',
+              name: 'Menu111Demo',
+              component: '/demo/level/Menu111',
+              meta: {
+                title: 'Menu111',
+              },
+            },
+          ],
+        },
+        {
+          path: 'menu1-2',
+          name: 'Menu12Demo',
+          component: '/demo/level/Menu12',
+          meta: {
+            title: 'Menu1-2',
+          },
+        },
+      ],
+    },
+    {
+      path: 'menu2',
+      name: 'Menu2Demo',
+      component: '/demo/level/Menu2',
+      meta: {
+        title: 'Menu2',
+      },
+    },
+  ],
+};
+
+const sysRoute = {
+  path: '/system',
+  name: 'System',
+  component: 'LAYOUT',
+  redirect: '/system/account',
+  meta: {
+    icon: 'ion:settings-outline',
+    title: 'routes.demo.system.moduleName',
+  },
+  children: [
+    {
+      path: 'account',
+      name: 'AccountManagement',
+      meta: {
+        title: 'routes.demo.system.account',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/account/index',
+    },
+    {
+      path: 'account_detail/:id',
+      name: 'AccountDetail',
+      meta: {
+        hideMenu: true,
+        title: 'routes.demo.system.account_detail',
+        ignoreKeepAlive: true,
+        showMenu: false,
+        currentActiveMenu: '/system/account',
+      },
+      component: '/demo/system/account/AccountDetail',
+    },
+    {
+      path: 'role',
+      name: 'RoleManagement',
+      meta: {
+        title: 'routes.demo.system.role',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/role/index',
+    },
+
+    {
+      path: 'menu',
+      name: 'MenuManagement',
+      meta: {
+        title: 'routes.demo.system.menu',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/menu/index',
+    },
+    {
+      path: 'dept',
+      name: 'DeptManagement',
+      meta: {
+        title: 'routes.demo.system.dept',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/dept/index',
+    },
+    {
+      path: 'changePassword',
+      name: 'ChangePassword',
+      meta: {
+        title: 'routes.demo.system.password',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/password/index',
+    },
+  ],
+};
+
+const linkRoute = {
+  path: '/link',
+  name: 'Link',
+  component: 'LAYOUT',
+  meta: {
+    icon: 'ion:tv-outline',
+    title: 'routes.demo.iframe.frame',
+  },
+  children: [
+    {
+      path: 'doc',
+      name: 'Doc',
+      meta: {
+        title: 'routes.demo.iframe.doc',
+        frameSrc: 'https://vvbin.cn/doc-next/',
+      },
+    },
+    {
+      path: 'https://vvbin.cn/doc-next/',
+      name: 'DocExternal',
+      component: 'LAYOUT',
+      meta: {
+        title: 'routes.demo.iframe.docExternal',
+      },
+    },
+  ],
+};
+
+export default [
+  {
+    url: `${baseUrl}/sys/permission/getUserPermissionByToken`,
+    timeout: 1000,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) {
+        return resultError('Invalid token!');
+      }
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid user token!');
+      }
+      const id = checkUser.userId;
+      let menu: Object[];
+      switch (id) {
+        case '1':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[0].path;
+          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute];
+          break;
+        case '2':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[1].path;
+          menu = [dashboardRoute, authRoute, levelRoute, linkRoute];
+          break;
+        default:
+          menu = [];
+      }
+
+      return resultSuccess(menu);
+    },
+  },
+] as MockMethod[];
diff --git a/mock/sys/user.ts b/mock/sys/user.ts
new file mode 100644
index 0000000..ba6f831
--- /dev/null
+++ b/mock/sys/user.ts
@@ -0,0 +1,125 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultError, resultSuccess, getRequestToken, requestParams, baseUrl } from '../_util';
+import { PageEnum } from '/@/enums/pageEnum';
+export function createFakeUserList() {
+  return [
+    {
+      userId: '1',
+      username: 'admin',
+      realname: '管理员',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+      desc: 'manager',
+      password: '123456',
+      token: 'fakeToken1',
+      homePath: PageEnum.BASE_HOME,
+      roles: [
+        {
+          roleName: 'Super Admin',
+          value: 'super',
+        },
+      ],
+    },
+    {
+      userId: '2',
+      username: 'jeecg',
+      password: '123456',
+      realname: '测试用户',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+      desc: 'tester',
+      token: 'fakeToken2',
+      homePath: PageEnum.BASE_HOME,
+      roles: [
+        {
+          roleName: 'Tester',
+          value: 'test',
+        },
+      ],
+    },
+  ];
+}
+
+const fakeCodeList: any = {
+  '1': ['1000', '3000', '5000'],
+
+  '2': ['2000', '4000', '6000'],
+};
+
+export default [
+  // mock user login
+  {
+    url: `${baseUrl}/sys/login`,
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      const { username, password } = body;
+      const checkUser = createFakeUserList().find(
+        (item) => item.username === username && password === item.password
+      );
+      if (!checkUser) {
+        return resultError('Incorrect account or password！');
+      }
+      const { userId, username: _username, token, realname, desc, roles } = checkUser;
+      return resultSuccess({
+        roles,
+        userId,
+        username: _username,
+        token,
+        realname,
+        desc,
+      });
+    },
+  },
+  {
+    url: `${baseUrl}/sys/user/getUserInfo`,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('The corresponding user information was not obtained!');
+      }
+      return resultSuccess(checkUser);
+    },
+  },
+  {
+    url: `${baseUrl}/sys/permission/getPermCode`,
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid token!');
+      }
+      const codeList = fakeCodeList[checkUser.userId];
+
+      return resultSuccess(codeList);
+    },
+  },
+  {
+    url: `${baseUrl}/sys/logout`,
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request);
+      if (!token) return resultError('Invalid token');
+      const checkUser = createFakeUserList().find((item) => item.token === token);
+      if (!checkUser) {
+        return resultError('Invalid token!');
+      }
+      return resultSuccess(undefined, { message: 'Token has been destroyed' });
+    },
+  },
+  {
+    url: `${baseUrl}/sys/randomImage/1629428467008`,
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const result =
+        'data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAjAGkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3h/ME5lErCKNSHi8rO44yCp65/P060gmdbbIaKecxl0VDsEmOmMk8cgZ96dcypFGpkEm0uOUzxznJI6DjnPH54ryTWNW1+P436T4ftNev4LTU7Brhw9tbCSHiZxGrNCcKCijkMeuSSOAD1KJ7hrTZNK0d1Iz7egGVPRSV6HGRkE4z1xV5SWQEqVJGSpxke3FeYL4n1PSfi5pXhK7vxrFlf27XVveyQRrcQHa4KFo1CMhMLdFUjfy2F59NjZm3Bl2kMRxnGO3JA7Y/HI7UAVrjfbWt3NJLNKmCwVAoaNcc4PHTk8+n5rKs1tDGtsdw5X94GkOT90ls5xnr14PYDNeUfDzxvq3xCuNZvG8SNp1zBKHtdFgtYpFjhAADuWXfKpJwwRkIwcFd6geg+Dm12Tw9bN4hkX+0Y5bmKcLGVV9s7KjLkA7dijBPLAgnJ5oWgGrb36zBtqyPh9oKwuvG4DncByCeeexPsLHm7jH5amSNxnzFI2gY479/bNVrxYZpRD57Q3JRkikRFLxlgfmUspGQEbrkccg8V5l8PfEOt6h4p8YW+r+JJf7M8OXZhjWWC2jjMQaZSZWWNSMLGDkFQD1BHFAHq7usMcksjnYoLHI+6AOen0pqllZfNkUMWZVUdG5yOvOcD+dcclt4j1/XlvtM8T3dn4cIc7kgt2a4PGwwBoTiLqfMZm34+VQpVz0Ou2t/eWfk2GrXGmTNxHcW9ukxV8EAOrqwKZIJ+6fl+8M0AXjHcb5GWdcN9xWjyF6ehGe/5j05jmdri3cxPJGI3YOAOXABGARnGTjkcjpwenmvwt8Y61czeIdM8b6g0esaW3mTR3SwQJFAB99dijcOpZySoBjI+8TXR+EtK16SNdR1rWL64WUNPaWtxbxQGBXbKCVY0VjKq/f525dgBxuKA6i4ZfsSEyq0R275Wm8v5f7wZe/TjgHNWqiiSWNEV5vNwp3MygFj68cAdeMen4y0wKk6Mtysp3yQsvktEoyPmI+YgnGB9O57dPIfGML3H7SnhaGO+msXfS2C3EIjLqcXPTzFZeenIPXjnFeyiIJIzx4XzH3SZBO75ccc8dF/L3zXHah4D0K58US+ILuLUPtcMeI5l1G5WT5i+VjYSDYCW2hVIHLDaMg0AX9K8FaVZ+IJPEVxPc6rrTAxLf3rqzRJgKURUVUToeQoPzNk8mt0qRJF5uTMVdBNGuAucHoScdByeOPcAxRw3MdzOpuC3nZkQiEBY8EcMf4sggfRT0qYQSJBJGJWlGwKodirZxjlxzzxzjIOfYAA8Tn+HehfErRoPGvhDUP7J1uQCaWK3YmJLpQWZT0aN95X5xxgBgp3ZPb/AAi8U6r4q8BRajriv9qW5khFy6hBcrkEOoCqAAW2cZ5Q85yBdtPAfhSTSv7Og0mWxiWH7PcQ288lq86Y2/vjEy+cCM8sW6t6mukt9PttNsobLTbC0gtY34gjURIgzuJVVGM55xxz3oAnZf8ASI38vcQrLu3fdBwenccfy96+abbwjqHiu8+K1lpt/NFJBqYlW1MwSO5KzzECRmBJwA2ASBuKljxkfSF9ai7jeESzRtJGy5R3UAdCcoVIOGOCCD36qMc9oHgHw/oGrSalpMd1a3DuWnRb6Z1lYr/y2VnYOw3sQT03Z96AMn4W+PP+Et0xrLVZmi8TaerRX9pJH5Rba2BIE9egbGMMSCACtdxOHuYmXy3CCVRjIHmLkbs5HTrx3A9DXJN8LvCraj/adpa3SajtZBqC6rdGaMhdgw3mZOB8uMjgY9q39X0Sx1myuLLUknWwbLSLDdyQrKGUhgxRlOPvZUnac5OT0AseQfEHT7u71CP4keHrbTZJtFSGWQ/Zmk+3gMytMByDGm0BXwrbVdwwVYmPqXhvxDZeKdEj1bRL6AWM42NvT9/DLtVQkmWOXBx16jbjIINGl+GdPs9I/seG6nSAfIY7e/n3qqEBVSQuZI1A25RWABOOhO7P8NeA/DejRveaBpb2IuW2k/bJmDxjIDlJNyk4LYyOjHBGaAOwjeQogYxtIuBNtbhTjPH6cHsalqlbWMFrcSNuVnkkeZAwG5c/eI79wOO2O+SbtABSMiuMMoYZBwRnkHIP50UUALRRRQAUUUUAFFFFACBVUsVUAscsQOpxjn8AKWiigBFVUQIihVUYAAwAKY8EUkqSOgZ0BCk9uQf5qD+FFFAElFFFAH//2Q==';
+      return resultSuccess(result);
+    },
+  },
+] as MockMethod[];
diff --git a/npm b/npm
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..61ff9e9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,201 @@
+{
+  "name": "test-frontend",
+  "version": "3.9.2",
+  "author": {
+    "name": "北京国炬信息技术有限公司",
+    "email": "jeecgos@163.com",
+    "url": "https://www.jeecg.com"
+  },
+  "scripts": {
+    "pinstall": "pnpm install",
+    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
+    "dev": "vite",
+    "build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 vite build && esno ./build/script/postBuild.ts && esno ./build/script/copyChat.ts",
+    "build:docker": "cross-env NODE_ENV=docker NODE_OPTIONS=--max-old-space-size=8192 vite build --mode docker && esno ./build/script/postBuild.ts && esno ./build/script/copyChat.ts",
+    "build:dockercloud": "cross-env NODE_ENV=dockercloud NODE_OPTIONS=--max-old-space-size=8192 vite build --mode dockercloud && esno ./build/script/postBuild.ts && esno ./build/script/copyChat.ts",
+    "build:report": "pnpm clean:cache && cross-env REPORT=true npm run build",
+    "preview": "npm run build && vite preview",
+    "reinstall": "rimraf pnpm-lock.yaml && rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run install",
+    "clean:lib": "rimraf node_modules",
+    "gen:icon": "esno ./build/generate/icon/index.ts",
+    "lint": "eslint --ext .vue,.ts,.tsx src/",
+    "stylelint": "stylelint \"src/**/*.{vue,less,css}\"",
+    "batch:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "upgrade:log": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "husky:install": "husky install"
+  },
+  "dependencies": {
+    "@jeecg/aiflow": "3.9.2-beta",
+    "@logicflow/core": "^2.1.2",
+    "@logicflow/extension": "^2.1.4",
+    "@logicflow/vue-node-registry": "^1.1.3",
+    "@iconify/iconify": "^3.1.1",
+    "@ant-design/colors": "^7.2.1",
+    "@ant-design/icons-vue": "^7.0.1",
+    "@vue/shared": "^3.5.22",
+    "@vueuse/core": "^10.11.1",
+    "@tinymce/tinymce-vue": "4.0.7",
+    "@zxcvbn-ts/core": "^3.0.4",
+    "ant-design-vue": "^4.2.6",
+    "axios": "^1.12.2",
+    "@vant/area-data": "^1.5.2",
+    "clipboard": "^2.0.11",
+    "codemirror": "^5.65.20",
+    "cron-parser": "^4.9.0",
+    "cropperjs": "^1.6.2",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.18",
+    "dom-align": "^1.12.4",
+    "echarts": "^5.6.0",
+    "emoji-mart-vue-fast": "^15.0.5",
+    "enquire.js": "^2.1.6",
+    "intro.js": "^7.2.0",
+    "lodash-es": "^4.17.21",
+    "lodash.get": "^4.4.2",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
+    "event-source-polyfill": "^1.0.31",
+    "highlight.js": "^11.11.1",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "md5": "^2.3.0",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "path-to-regexp": "^6.3.0",
+    "pinia": "2.1.7",
+    "print-js": "^1.6.0",
+    "pinyin-pro": "^3.27.0",
+    "qs": "^6.14.0",
+    "qrcode": "^1.5.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "showdown": "^2.1.0",
+    "sortablejs": "^1.15.6",
+    "swagger-ui-dist": "^5.29.3",
+    "tinymce": "6.6.2",
+    "vditor": "^3.11.2",
+    "vue": "^3.5.22",
+    "vue-cropper": "^0.6.5",
+    "vue-cropperjs": "^5.0.0",
+    "vue-i18n": "^9.14.5",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-print-nb-jeecg": "^1.0.13",
+    "vue-router": "^4.5.1",
+    "vue-types": "^5.1.3",
+    "vuedraggable": "^4.1.0",
+    "vxe-table": "4.13.31",
+    "vxe-pc-ui": "4.6.12",
+    "vxe-table-plugin-antd": "4.0.8",
+    "xe-utils": "3.5.26",
+    "xss": "^1.0.15",
+    "vue-grid-layout-v3": "^3.1.2",
+    "lunar-javascript": "^1.7.5",
+    "perfect-scrollbar": "^1.5.6",
+    "vue-color": "^3.3.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.3",
+    "@iconify/json": "^2.2.394",
+    "@purge-icons/generated": "^0.10.0",
+    "unplugin-icons": "^0.22.0",
+    "@types/codemirror": "^5.60.16",
+    "@types/crypto-js": "^4.2.2",
+    "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.9",
+    "@types/intro.js": "^5.1.5",
+    "@types/jest": "^29.5.14",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "^1.0.10",
+    "@types/node": "^20.19.20",
+    "@types/nprogress": "^0.2.3",
+    "@types/qrcode": "^1.5.5",
+    "@types/qs": "^6.14.0",
+    "@types/pinyin": "^2.10.2",
+    "@types/showdown": "^2.0.6",
+    "@types/sortablejs": "^1.15.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "@vue/compiler-sfc": "^3.5.22",
+    "@vue/test-utils": "^2.4.6",
+    "autoprefixer": "^10.4.21",
+    "commitizen": "^4.3.1",
+    "conventional-changelog-cli": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "cz-git": "^1.12.0",
+    "czg": "^1.12.0",
+    "dotenv": "^16.6.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^9.33.0",
+    "esno": "^4.8.0",
+    "fs-extra": "^11.3.2",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.3",
+    "inquirer": "^9.3.8",
+    "is-ci": "^3.0.1",
+    "jest": "^29.7.0",
+    "less": "^4.4.2",
+    "lint-staged": "15.2.2",
+    "npm-run-all": "^4.1.5",
+    "picocolors": "^1.1.1",
+    "postcss": "^8.5.6",
+    "postcss-html": "^1.8.0",
+    "postcss-less": "^6.0.0",
+    "prettier": "^3.6.2",
+    "pretty-quick": "^4.2.2",
+    "rimraf": "^5.0.10",
+    "rollup": "4.52.5",
+    "rollup-plugin-visualizer": "5.14.0",
+    "stylelint": "^16.25.0",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
+    "ts-jest": "^29.4.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "unplugin-vue-components": "~0.24.1",
+    "vite": "^7.3.3",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-mkcert": "^1.17.9",
+    "vite-plugin-mock": "^2.9.8",
+    "vite-plugin-optimize-persist": "^0.1.2",
+    "vite-plugin-package-config": "^0.1.1",
+    "vite-plugin-purge-icons": "^0.10.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-pwa": "^1.1.0",
+    "workbox-window": "^7.3.0",
+    "vite-plugin-qiankun": "^1.0.15",
+    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
+    "unocss": "^66.6.8",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^1.8.27",
+    "dingtalk-jsapi": "^3.2.0",
+    "big.js": "^6.2.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeecgboot/JeecgBoot.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jeecgboot/JeecgBoot/issues"
+  },
+  "homepage": "https://www.jeecg.com",
+  "engines": {
+    "node": "^18 || >=20"
+  },
+  "packageManager": "pnpm@9.15.4",
+  "lint-staged": {
+    "*.{vue,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "*.{js,json,scss,css,less,html,md}": "prettier --write"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..bd63d87
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,15376 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@ant-design/colors':
+        specifier: ^7.2.1
+        version: 7.2.1
+      '@ant-design/icons-vue':
+        specifier: ^7.0.1
+        version: 7.0.1(vue@3.5.27(typescript@5.9.3))
+      '@iconify/iconify':
+        specifier: ^3.1.1
+        version: 3.1.1
+      '@jeecg/aiflow':
+        specifier: 3.9.2-beta
+        version: 3.9.2-beta
+      '@logicflow/core':
+        specifier: ^2.1.2
+        version: 2.1.9
+      '@logicflow/extension':
+        specifier: ^2.1.4
+        version: 2.1.11(@logicflow/core@2.1.9)(@logicflow/vue-node-registry@1.1.10(@logicflow/core@2.1.9)(vue@3.5.27(typescript@5.9.3)))
+      '@logicflow/vue-node-registry':
+        specifier: ^1.1.3
+        version: 1.1.10(@logicflow/core@2.1.9)(vue@3.5.27(typescript@5.9.3))
+      '@tinymce/tinymce-vue':
+        specifier: 4.0.7
+        version: 4.0.7(vue@3.5.27(typescript@5.9.3))
+      '@traptitech/markdown-it-katex':
+        specifier: ^3.6.0
+        version: 3.6.0
+      '@vant/area-data':
+        specifier: ^1.5.2
+        version: 1.5.2
+      '@vue/shared':
+        specifier: ^3.5.22
+        version: 3.5.27
+      '@vueuse/core':
+        specifier: ^10.11.1
+        version: 10.11.1(vue@3.5.27(typescript@5.9.3))
+      '@zxcvbn-ts/core':
+        specifier: ^3.0.4
+        version: 3.0.4
+      ant-design-vue:
+        specifier: ^4.2.6
+        version: 4.2.6(vue@3.5.27(typescript@5.9.3))
+      axios:
+        specifier: ^1.12.2
+        version: 1.13.2(debug@4.4.3)
+      clipboard:
+        specifier: ^2.0.11
+        version: 2.0.11
+      codemirror:
+        specifier: ^5.65.20
+        version: 5.65.20
+      cron-parser:
+        specifier: ^4.9.0
+        version: 4.9.0
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
+      dayjs:
+        specifier: ^1.11.18
+        version: 1.11.19
+      dom-align:
+        specifier: ^1.12.4
+        version: 1.12.4
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
+      emoji-mart-vue-fast:
+        specifier: ^15.0.5
+        version: 15.0.5(vue@3.5.27(typescript@5.9.3))
+      enquire.js:
+        specifier: ^2.1.6
+        version: 2.1.6
+      event-source-polyfill:
+        specifier: ^1.0.31
+        version: 1.0.31
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      intro.js:
+        specifier: ^7.2.0
+        version: 7.2.0
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.22
+      lodash.get:
+        specifier: ^4.4.2
+        version: 4.4.2
+      lunar-javascript:
+        specifier: ^1.7.5
+        version: 1.7.7
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
+      markdown-it-link-attributes:
+        specifier: ^4.0.1
+        version: 4.0.1
+      md5:
+        specifier: ^2.3.0
+        version: 2.3.0
+      mockjs:
+        specifier: ^1.1.0
+        version: 1.1.0
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
+      path-to-regexp:
+        specifier: ^6.3.0
+        version: 6.3.0
+      perfect-scrollbar:
+        specifier: ^1.5.6
+        version: 1.5.6
+      pinia:
+        specifier: 2.1.7
+        version: 2.1.7(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
+      pinyin-pro:
+        specifier: ^3.27.0
+        version: 3.28.0
+      print-js:
+        specifier: ^1.6.0
+        version: 1.6.0
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
+      qs:
+        specifier: ^6.14.0
+        version: 6.14.1
+      resize-observer-polyfill:
+        specifier: ^1.5.1
+        version: 1.5.1
+      showdown:
+        specifier: ^2.1.0
+        version: 2.1.0
+      sortablejs:
+        specifier: ^1.15.6
+        version: 1.15.6
+      swagger-ui-dist:
+        specifier: ^5.29.3
+        version: 5.31.0
+      tinymce:
+        specifier: 6.6.2
+        version: 6.6.2
+      vditor:
+        specifier: ^3.11.2
+        version: 3.11.2
+      vue:
+        specifier: ^3.5.22
+        version: 3.5.27(typescript@5.9.3)
+      vue-color:
+        specifier: ^3.3.3
+        version: 3.3.3(vue@3.5.27(typescript@5.9.3))
+      vue-cropper:
+        specifier: ^0.6.5
+        version: 0.6.5
+      vue-cropperjs:
+        specifier: ^5.0.0
+        version: 5.0.0(vue@3.5.27(typescript@5.9.3))
+      vue-grid-layout-v3:
+        specifier: ^3.1.2
+        version: 3.1.2(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.9.3)
+      vue-i18n:
+        specifier: ^9.14.5
+        version: 9.14.5(vue@3.5.27(typescript@5.9.3))
+      vue-infinite-scroll:
+        specifier: ^2.0.2
+        version: 2.0.2
+      vue-print-nb-jeecg:
+        specifier: ^1.0.13
+        version: 1.0.13
+      vue-router:
+        specifier: ^4.5.1
+        version: 4.6.4(vue@3.5.27(typescript@5.9.3))
+      vue-types:
+        specifier: ^5.1.3
+        version: 5.1.3(vue@3.5.27(typescript@5.9.3))
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.27(typescript@5.9.3))
+      vxe-pc-ui:
+        specifier: 4.6.12
+        version: 4.6.12(vue@3.5.27(typescript@5.9.3))
+      vxe-table:
+        specifier: 4.13.31
+        version: 4.13.31(vue@3.5.27(typescript@5.9.3))
+      vxe-table-plugin-antd:
+        specifier: 4.0.8
+        version: 4.0.8(vxe-table@4.13.31(vue@3.5.27(typescript@5.9.3)))
+      xe-utils:
+        specifier: 3.5.26
+        version: 3.5.26
+      xss:
+        specifier: ^1.0.15
+        version: 1.0.15
+    devDependencies:
+      '@commitlint/cli':
+        specifier: ^18.6.1
+        version: 18.6.1(@types/node@20.19.30)(typescript@5.9.3)
+      '@commitlint/config-conventional':
+        specifier: ^18.6.3
+        version: 18.6.3
+      '@iconify/json':
+        specifier: ^2.2.394
+        version: 2.2.430
+      '@purge-icons/generated':
+        specifier: ^0.10.0
+        version: 0.10.0
+      '@types/codemirror':
+        specifier: ^5.60.16
+        version: 5.60.17
+      '@types/crypto-js':
+        specifier: ^4.2.2
+        version: 4.2.2
+      '@types/fs-extra':
+        specifier: ^11.0.4
+        version: 11.0.4
+      '@types/inquirer':
+        specifier: ^9.0.9
+        version: 9.0.9
+      '@types/intro.js':
+        specifier: ^5.1.5
+        version: 5.1.5
+      '@types/jest':
+        specifier: ^29.5.14
+        version: 29.5.14
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+      '@types/mockjs':
+        specifier: ^1.0.10
+        version: 1.0.10
+      '@types/node':
+        specifier: ^20.19.20
+        version: 20.19.30
+      '@types/nprogress':
+        specifier: ^0.2.3
+        version: 0.2.3
+      '@types/pinyin':
+        specifier: ^2.10.2
+        version: 2.10.2
+      '@types/qrcode':
+        specifier: ^1.5.5
+        version: 1.5.6
+      '@types/qs':
+        specifier: ^6.14.0
+        version: 6.14.0
+      '@types/showdown':
+        specifier: ^2.0.6
+        version: 2.0.6
+      '@types/sortablejs':
+        specifier: ^1.15.8
+        version: 1.15.9
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.21.0
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: ^6.21.0
+        version: 6.21.0(eslint@8.57.1)(typescript@5.9.3)
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.6
+        version: 6.0.7(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(vue@3.5.27(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^5.1.5
+        version: 5.1.5(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(vue@3.5.27(typescript@5.9.3))
+      '@vue/compiler-sfc':
+        specifier: ^3.5.22
+        version: 3.5.27
+      '@vue/test-utils':
+        specifier: ^2.4.6
+        version: 2.4.6
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.4.23(postcss@8.5.6)
+      big.js:
+        specifier: ^6.2.2
+        version: 6.2.2
+      commitizen:
+        specifier: ^4.3.1
+        version: 4.3.1(@types/node@20.19.30)(typescript@5.9.3)
+      conventional-changelog-cli:
+        specifier: ^4.1.0
+        version: 4.1.0
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      cz-git:
+        specifier: ^1.12.0
+        version: 1.12.0
+      czg:
+        specifier: ^1.12.0
+        version: 1.12.0
+      dingtalk-jsapi:
+        specifier: ^3.2.0
+        version: 3.2.5
+      dotenv:
+        specifier: ^16.6.1
+        version: 16.6.1
+      eslint:
+        specifier: ^8.57.1
+        version: 8.57.1
+      eslint-config-prettier:
+        specifier: ^9.1.2
+        version: 9.1.2(eslint@8.57.1)
+      eslint-define-config:
+        specifier: ^2.1.0
+        version: 2.1.0
+      eslint-plugin-jest:
+        specifier: ^27.9.0
+        version: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)))(typescript@5.9.3)
+      eslint-plugin-prettier:
+        specifier: ^5.5.4
+        version: 5.5.5(eslint-config-prettier@9.1.2(eslint@8.57.1))(eslint@8.57.1)(prettier@3.8.0)
+      eslint-plugin-vue:
+        specifier: ^9.33.0
+        version: 9.33.0(eslint@8.57.1)
+      esno:
+        specifier: ^4.8.0
+        version: 4.8.0
+      fs-extra:
+        specifier: ^11.3.2
+        version: 11.3.3
+      http-server:
+        specifier: ^14.1.1
+        version: 14.1.1
+      husky:
+        specifier: ^8.0.3
+        version: 8.0.3
+      inquirer:
+        specifier: ^9.3.8
+        version: 9.3.8(@types/node@20.19.30)
+      is-ci:
+        specifier: ^3.0.1
+        version: 3.0.1
+      jest:
+        specifier: ^29.7.0
+        version: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      less:
+        specifier: ^4.4.2
+        version: 4.5.1
+      lint-staged:
+        specifier: 15.2.2
+        version: 15.2.2
+      npm-run-all:
+        specifier: ^4.1.5
+        version: 4.1.5
+      picocolors:
+        specifier: ^1.1.1
+        version: 1.1.1
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
+      postcss-html:
+        specifier: ^1.8.0
+        version: 1.8.1
+      postcss-less:
+        specifier: ^6.0.0
+        version: 6.0.0(postcss@8.5.6)
+      prettier:
+        specifier: ^3.6.2
+        version: 3.8.0
+      pretty-quick:
+        specifier: ^4.2.2
+        version: 4.2.2(prettier@3.8.0)
+      rimraf:
+        specifier: ^5.0.10
+        version: 5.0.10
+      rollup:
+        specifier: 4.52.5
+        version: 4.52.5
+      rollup-plugin-visualizer:
+        specifier: 5.14.0
+        version: 5.14.0(rollup@4.52.5)
+      stylelint:
+        specifier: ^16.25.0
+        version: 16.26.1(typescript@5.9.3)
+      stylelint-config-prettier:
+        specifier: ^9.0.5
+        version: 9.0.5(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended:
+        specifier: ^14.0.1
+        version: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended-vue:
+        specifier: ^1.6.1
+        version: 1.6.1(postcss-html@1.8.1)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-standard:
+        specifier: ^36.0.1
+        version: 36.0.1(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: ^6.0.4
+        version: 6.0.4(stylelint@16.26.1(typescript@5.9.3))
+      ts-jest:
+        specifier: ^29.4.4
+        version: 29.4.6(@babel/core@7.29.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@29.7.0)(jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)))(typescript@5.9.3)
+      ts-node:
+        specifier: ^10.9.2
+        version: 10.9.2(@types/node@20.19.30)(typescript@5.9.3)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      unocss:
+        specifier: ^66.6.8
+        version: 66.7.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      unplugin-icons:
+        specifier: ^0.22.0
+        version: 0.22.0(@vue/compiler-sfc@3.5.27)(vue-template-compiler@2.7.16)
+      unplugin-vue-components:
+        specifier: ~0.24.1
+        version: 0.24.1(@babel/parser@7.29.7)(rollup@4.52.5)(vue@3.5.27(typescript@5.9.3))
+      vite:
+        specifier: ^7.3.3
+        version: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+      vite-plugin-compression:
+        specifier: ^0.5.1
+        version: 0.5.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-html:
+        specifier: ^3.2.2
+        version: 3.2.2(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-mkcert:
+        specifier: ^1.17.9
+        version: 1.17.9(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-mock:
+        specifier: ^2.9.8
+        version: 2.9.8(mockjs@1.1.0)(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-optimize-persist:
+        specifier: ^0.1.2
+        version: 0.1.2(vite-plugin-package-config@0.1.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)))(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-package-config:
+        specifier: ^0.1.1
+        version: 0.1.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-purge-icons:
+        specifier: ^0.10.0
+        version: 0.10.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-pwa:
+        specifier: ^1.1.0
+        version: 1.2.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(workbox-build@7.4.0(@types/babel__core@7.20.5))(workbox-window@7.4.0)
+      vite-plugin-qiankun:
+        specifier: ^1.0.15
+        version: 1.0.15(typescript@5.9.3)(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-svg-icons:
+        specifier: ^2.0.1
+        version: 2.0.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+      vite-plugin-vue-setup-extend-plus:
+        specifier: ^0.1.0
+        version: 0.1.0
+      vue-eslint-parser:
+        specifier: ^9.4.3
+        version: 9.4.3(eslint@8.57.1)
+      vue-tsc:
+        specifier: ^1.8.27
+        version: 1.8.27(typescript@5.9.3)
+      workbox-window:
+        specifier: ^7.3.0
+        version: 7.4.0
+
+packages:
+
+  '@ant-design/colors@6.0.0':
+    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
+
+  '@ant-design/colors@7.2.1':
+    resolution: {integrity: sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==}
+
+  '@ant-design/fast-color@2.0.6':
+    resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==}
+    engines: {node: '>=8.x'}
+
+  '@ant-design/icons-svg@4.4.2':
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+
+  '@ant-design/icons-vue@7.0.1':
+    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
+    peerDependencies:
+      vue: '>=3.0.3'
+
+  '@antfu/install-pkg@0.5.0':
+    resolution: {integrity: sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==}
+
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@antfu/utils@0.7.10':
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
+  '@antv/hierarchy@0.6.14':
+    resolution: {integrity: sha512-V3uknf7bhynOqQDw2sg+9r9DwZ9pc6k/EcqyTFdfXB1+ydr7urisP0MipIuimucvQKN+Qkd+d6w601r1UIroqQ==}
+
+  '@apideck/better-ajv-errors@0.3.6':
+    resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      ajv: '>=8'
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5':
+    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-define-polyfill-provider@0.6.5':
+    resolution: {integrity: sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-remap-async-to-generator@7.27.1':
+    resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-wrap-function@7.28.6':
+    resolution: {integrity: sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.6':
+    resolution: {integrity: sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
+    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1':
+    resolution: {integrity: sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1':
+    resolution: {integrity: sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1':
+    resolution: {integrity: sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.6':
+    resolution: {integrity: sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
+    resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-async-generators@7.8.4':
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-bigint@7.8.3':
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-properties@7.12.13':
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-static-block@7.14.5':
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-assertions@7.28.6':
+    resolution: {integrity: sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.28.6':
+    resolution: {integrity: sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-json-strings@7.8.3':
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3':
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4':
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3':
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3':
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3':
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5':
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-top-level-await@7.14.5':
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
+    resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-arrow-functions@7.27.1':
+    resolution: {integrity: sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-generator-functions@7.28.6':
+    resolution: {integrity: sha512-9knsChgsMzBV5Yh3kkhrZNxH3oCYAfMBkNNaVN4cP2RVlFPe8wYdwwcnOsAbkdDoV9UjFtOXWrWB52M8W4jNeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-to-generator@7.28.6':
+    resolution: {integrity: sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1':
+    resolution: {integrity: sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoping@7.28.6':
+    resolution: {integrity: sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-properties@7.28.6':
+    resolution: {integrity: sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-static-block@7.28.6':
+    resolution: {integrity: sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+
+  '@babel/plugin-transform-classes@7.28.6':
+    resolution: {integrity: sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-computed-properties@7.28.6':
+    resolution: {integrity: sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-destructuring@7.28.5':
+    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-dotall-regex@7.28.6':
+    resolution: {integrity: sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1':
+    resolution: {integrity: sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.28.6':
+    resolution: {integrity: sha512-5suVoXjC14lUN6ZL9OLKIHCNVWCrqGqlmEp/ixdXjvgnEl/kauLvvMO/Xw9NyMc95Joj1AeLVPVMvibBgSoFlA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-dynamic-import@7.27.1':
+    resolution: {integrity: sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.6':
+    resolution: {integrity: sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.6':
+    resolution: {integrity: sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1':
+    resolution: {integrity: sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-for-of@7.27.1':
+    resolution: {integrity: sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-function-name@7.27.1':
+    resolution: {integrity: sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-json-strings@7.28.6':
+    resolution: {integrity: sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-literals@7.27.1':
+    resolution: {integrity: sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.6':
+    resolution: {integrity: sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1':
+    resolution: {integrity: sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-amd@7.27.1':
+    resolution: {integrity: sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5':
+    resolution: {integrity: sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-umd@7.27.1':
+    resolution: {integrity: sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1':
+    resolution: {integrity: sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-new-target@7.27.1':
+    resolution: {integrity: sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6':
+    resolution: {integrity: sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-numeric-separator@7.28.6':
+    resolution: {integrity: sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-rest-spread@7.28.6':
+    resolution: {integrity: sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-super@7.27.1':
+    resolution: {integrity: sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-catch-binding@7.28.6':
+    resolution: {integrity: sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-chaining@7.28.6':
+    resolution: {integrity: sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-parameters@7.27.7':
+    resolution: {integrity: sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-methods@7.28.6':
+    resolution: {integrity: sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-property-in-object@7.28.6':
+    resolution: {integrity: sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-property-literals@7.27.1':
+    resolution: {integrity: sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regenerator@7.28.6':
+    resolution: {integrity: sha512-eZhoEZHYQLL5uc1gS5e9/oTknS0sSSAtd5TkKMUp3J+S/CaUjagc0kOUPsEbDmMeva0nC3WWl4SxVY6+OBuxfw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regexp-modifiers@7.28.6':
+    resolution: {integrity: sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-reserved-words@7.27.1':
+    resolution: {integrity: sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1':
+    resolution: {integrity: sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-spread@7.28.6':
+    resolution: {integrity: sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-sticky-regex@7.27.1':
+    resolution: {integrity: sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-template-literals@7.27.1':
+    resolution: {integrity: sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1':
+    resolution: {integrity: sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1':
+    resolution: {integrity: sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-property-regex@7.28.6':
+    resolution: {integrity: sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-regex@7.27.1':
+    resolution: {integrity: sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-sets-regex@7.28.6':
+    resolution: {integrity: sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/preset-env@7.28.6':
+    resolution: {integrity: sha512-GaTI4nXDrs7l0qaJ6Rg06dtOXTBCG6TMDB44zbqofCIC4PqC7SEvmFFtpxzCDw9W5aJ7RKVshgXTLvLdBFV/qw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-modules@0.1.6-no-external-plugins':
+    resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
+
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.6':
+    resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
+  '@cacheable/memory@2.0.7':
+    resolution: {integrity: sha512-RbxnxAMf89Tp1dLhXMS7ceft/PGsDl1Ip7T20z5nZ+pwIAsQ1p2izPjVG69oCLv/jfQ7HDPHTWK0c9rcAWXN3A==}
+
+  '@cacheable/utils@2.3.3':
+    resolution: {integrity: sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A==}
+
+  '@commitlint/cli@18.6.1':
+    resolution: {integrity: sha512-5IDE0a+lWGdkOvKH892HHAZgbAjcj1mT5QrfA/SVbLJV/BbBMGyKN0W5mhgjekPJJwEQdVNvhl9PwUacY58Usw==}
+    engines: {node: '>=v18'}
+    hasBin: true
+
+  '@commitlint/config-conventional@18.6.3':
+    resolution: {integrity: sha512-8ZrRHqF6je+TRaFoJVwszwnOXb/VeYrPmTwPhf0WxpzpGTcYy1p0SPyZ2eRn/sRi/obnWAcobtDAq6+gJQQNhQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/config-validator@18.6.1':
+    resolution: {integrity: sha512-05uiToBVfPhepcQWE1ZQBR/Io3+tb3gEotZjnI4tTzzPk16NffN6YABgwFQCLmzZefbDcmwWqJWc2XT47q7Znw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/config-validator@20.3.1':
+    resolution: {integrity: sha512-ErVLC/IsHhcvxCyh+FXo7jy12/nkQySjWXYgCoQbZLkFp4hysov8KS6CdxBB0cWjbZWjvNOKBMNoUVqkmGmahw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/ensure@18.6.1':
+    resolution: {integrity: sha512-BPm6+SspyxQ7ZTsZwXc7TRQL5kh5YWt3euKmEIBZnocMFkJevqs3fbLRb8+8I/cfbVcAo4mxRlpTPfz8zX7SnQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/execute-rule@18.6.1':
+    resolution: {integrity: sha512-7s37a+iWyJiGUeMFF6qBlyZciUkF8odSAnHijbD36YDctLhGKoYltdvuJ/AFfRm6cBLRtRk9cCVPdsEFtt/2rg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/execute-rule@20.0.0':
+    resolution: {integrity: sha512-xyCoOShoPuPL44gVa+5EdZsBVao/pNzpQhkzq3RdtlFdKZtjWcLlUFQHSWBuhk5utKYykeJPSz2i8ABHQA+ZZw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/format@18.6.1':
+    resolution: {integrity: sha512-K8mNcfU/JEFCharj2xVjxGSF+My+FbUHoqR+4GqPGrHNqXOGNio47ziiR4HQUPKtiNs05o8/WyLBoIpMVOP7wg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/is-ignored@18.6.1':
+    resolution: {integrity: sha512-MOfJjkEJj/wOaPBw5jFjTtfnx72RGwqYIROABudOtJKW7isVjFe9j0t8xhceA02QebtYf4P/zea4HIwnXg8rvA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/lint@18.6.1':
+    resolution: {integrity: sha512-8WwIFo3jAuU+h1PkYe5SfnIOzp+TtBHpFr4S8oJWhu44IWKuVx6GOPux3+9H1iHOan/rGBaiacicZkMZuluhfQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/load@18.6.1':
+    resolution: {integrity: sha512-p26x8734tSXUHoAw0ERIiHyW4RaI4Bj99D8YgUlVV9SedLf8hlWAfyIFhHRIhfPngLlCe0QYOdRKYFt8gy56TA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/load@20.3.1':
+    resolution: {integrity: sha512-YDD9XA2XhgYgbjju8itZ/weIvOOobApDqwlPYCX5NLO/cPtw2UMO5Cmn44Ks8RQULUVI5fUT6roKvyxcoLbNmw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/message@18.6.1':
+    resolution: {integrity: sha512-VKC10UTMLcpVjMIaHHsY1KwhuTQtdIKPkIdVEwWV+YuzKkzhlI3aNy6oo1eAN6b/D2LTtZkJe2enHmX0corYRw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/parse@18.6.1':
+    resolution: {integrity: sha512-eS/3GREtvVJqGZrwAGRwR9Gdno3YcZ6Xvuaa+vUF8j++wsmxrA2En3n0ccfVO2qVOLJC41ni7jSZhQiJpMPGOQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/read@18.6.1':
+    resolution: {integrity: sha512-ia6ODaQFzXrVul07ffSgbZGFajpe8xhnDeLIprLeyfz3ivQU1dIoHp7yz0QIorZ6yuf4nlzg4ZUkluDrGN/J/w==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/resolve-extends@18.6.1':
+    resolution: {integrity: sha512-ifRAQtHwK+Gj3Bxj/5chhc4L2LIc3s30lpsyW67yyjsETR6ctHAHRu1FSpt0KqahK5xESqoJ92v6XxoDRtjwEQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/resolve-extends@20.3.1':
+    resolution: {integrity: sha512-iGTGeyaoDyHDEZNjD8rKeosjSNs8zYanmuowY4ful7kFI0dnY4b5QilVYaFQJ6IM27S57LAeH5sKSsOHy4bw5w==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/rules@18.6.1':
+    resolution: {integrity: sha512-kguM6HxZDtz60v/zQYOe0voAtTdGybWXefA1iidjWYmyUUspO1zBPQEmJZ05/plIAqCVyNUTAiRPWIBKLCrGew==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/to-lines@18.6.1':
+    resolution: {integrity: sha512-Gl+orGBxYSNphx1+83GYeNy5N0dQsHBQ9PJMriaLQDB51UQHCVLBT/HBdOx5VaYksivSf5Os55TLePbRLlW50Q==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/top-level@18.6.1':
+    resolution: {integrity: sha512-HyiHQZUTf0+r0goTCDs/bbVv/LiiQ7AVtz6KIar+8ZrseB9+YJAIo8HQ2IC2QT1y3N1lbW6OqVEsTHjbT6hGSw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/types@18.6.1':
+    resolution: {integrity: sha512-gwRLBLra/Dozj2OywopeuHj2ac26gjGkz2cZ+86cTJOdtWfiRRr4+e77ZDAGc6MDWxaWheI+mAV5TLWWRwqrFg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/types@20.3.1':
+    resolution: {integrity: sha512-VmIFV/JkBRhDRRv7N5B7zEUkNZIx9Mp+8Pe65erz0rKycXLsi8Epcw0XJ+btSeRXgTzE7DyOyA9bkJ9mn/yqVQ==}
+    engines: {node: '>=v18'}
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.25':
+    resolution: {integrity: sha512-g0Kw9W3vjx5BEBAF8c5Fm2NcB/Fs8jJXh85aXqwEXiL+tqtOut07TWgyaGzAAfTM+gKckrrncyeGEZPcaRgm2Q==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@csstools/media-query-list-parser@4.0.3':
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
+  '@esbuild/aix-ppc64@0.27.2':
+    resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.2':
+    resolution: {integrity: sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.2':
+    resolution: {integrity: sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.2':
+    resolution: {integrity: sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.2':
+    resolution: {integrity: sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.2':
+    resolution: {integrity: sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    resolution: {integrity: sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.2':
+    resolution: {integrity: sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.2':
+    resolution: {integrity: sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.2':
+    resolution: {integrity: sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.2':
+    resolution: {integrity: sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.14.54':
+    resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.2':
+    resolution: {integrity: sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.2':
+    resolution: {integrity: sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.2':
+    resolution: {integrity: sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.2':
+    resolution: {integrity: sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.2':
+    resolution: {integrity: sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.2':
+    resolution: {integrity: sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.2':
+    resolution: {integrity: sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    resolution: {integrity: sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.2':
+    resolution: {integrity: sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    resolution: {integrity: sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.2':
+    resolution: {integrity: sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.2':
+    resolution: {integrity: sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.2':
+    resolution: {integrity: sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.2':
+    resolution: {integrity: sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/eslintrc@2.1.4':
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@eslint/js@8.57.1':
+    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@humanwhocodes/config-array@0.13.0':
+    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
+    engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/object-schema@2.0.3':
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
+
+  '@hutson/parse-repository-url@5.0.0':
+    resolution: {integrity: sha512-e5+YUKENATs1JgYHMzTr2MW/NDcXGfYFAuOQU8gJgF/kEh4EqKgfGrfLI67bMD4tbhZVlkigz/9YYwWcbOFthg==}
+    engines: {node: '>=10.13.0'}
+
+  '@iconify/iconify@2.1.2':
+    resolution: {integrity: sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==}
+    deprecated: no longer maintained, switch to modern iconify-icon web component
+
+  '@iconify/iconify@3.1.1':
+    resolution: {integrity: sha512-1nemfyD/OJzh9ALepH7YfuuP8BdEB24Skhd8DXWh0hzcOxImbb1ZizSZkpCzAwSZSGcJFmscIBaBQu+yLyWaxQ==}
+    deprecated: no longer maintained, switch to modern iconify-icon web component
+
+  '@iconify/json@2.2.430':
+    resolution: {integrity: sha512-h6ZF1tqaY8qw+NzQSAxvZgrXkp0FvlVZbhaf4LIcwcia2ZpqqZWuwhrBlregXdpPUAqcn76Z0l1H0udGMycdsw==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
+  '@iconify/utils@3.1.3':
+    resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==}
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@interactjs/actions@1.10.27':
+    resolution: {integrity: sha512-FCRg5KwB+stkPcAMx/Cn0fgGP6p4LyMX9S/Upcn/W+hpYme31bPi54PCqmOebzz6myTthN6zFf9jMyLOqtI/gg==}
+    peerDependencies:
+      '@interactjs/core': 1.10.27
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/auto-scroll@1.10.27':
+    resolution: {integrity: sha512-zPg5TnVsZv+9Hnt4qnbxLvBMf+rIWHkoJVoSETEbLNaj90C8hIyr0pVwukSUySSgDhCgQ7np0f3pg4INLq9beQ==}
+    peerDependencies:
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/auto-start@1.10.27':
+    resolution: {integrity: sha512-ECLBO/nxmaF1knncJKIE5F7la3KKRgEkn0Cu2JTPOYj9xy/LpfYElo3wkRHsodgOqF651nR70GK2/IzPR2lO9A==}
+    peerDependencies:
+      '@interactjs/core': 1.10.27
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/core@1.10.27':
+    resolution: {integrity: sha512-SliUr/3ZbLAdED8LokzYzWHWMdCB5Cq+UnpXuRy+BIod1j97m4IUFf/D1iIKUBBjBcucgXbz28z96WnenVCB7Q==}
+    peerDependencies:
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/dev-tools@1.10.27':
+    resolution: {integrity: sha512-YolmBwRaKH1gWbvyLeV3m5QSwtD38lOZnCBA87PCAlcd9PQAC2gb03fEPeEyD336bE20oLB8f0WZt4Wre+afiw==}
+    peerDependencies:
+      '@interactjs/modifiers': 1.10.27
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/interact@1.10.27':
+    resolution: {integrity: sha512-XdH3A2UUzjEFGGJgFuJlhiz99tE8jB8xNh/DmnoMuL6uOQPxNA+sWRnzEVjG0+zY2P3/dbhEpi4Cn3FLPzydwA==}
+
+  '@interactjs/modifiers@1.10.27':
+    resolution: {integrity: sha512-ei/qfoQ+9/8k6WzNzdNqHI6cWkIV576N4Ap16r5CoqOWwhA6Xzj3OMHf1g0t1O4eSq2HdJsVJn3eLNfw9HsbeQ==}
+    peerDependencies:
+      '@interactjs/core': 1.10.27
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/snappers@1.10.27':
+    resolution: {integrity: sha512-HZLZ0XSi6HI08OmTv/HKG6AltQoaKAALLQ+KDW92utj3XSgw7oren0KsWUKPhaPg3Av7R1jFQd08s+uafqIlLw==}
+    peerDependencies:
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/utils@1.10.27':
+    resolution: {integrity: sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw==}
+
+  '@intlify/core-base@9.14.5':
+    resolution: {integrity: sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@9.14.5':
+    resolution: {integrity: sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@9.14.5':
+    resolution: {integrity: sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==}
+    engines: {node: '>= 16'}
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
+  '@jeecg/aiflow@3.9.2-beta':
+    resolution: {integrity: sha512-LN8uidNAtNZLdTdIZyWCUmJulfr4GskKOI+ZvgiNfU/T5MqrxTwC32awFASyiZKRHnSvHhfOVxCx7oQ71xIynQ==}
+
+  '@jest/console@29.7.0':
+    resolution: {integrity: sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/core@29.7.0':
+    resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/environment@29.7.0':
+    resolution: {integrity: sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/expect-utils@29.7.0':
+    resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/expect@29.7.0':
+    resolution: {integrity: sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/fake-timers@29.7.0':
+    resolution: {integrity: sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/globals@29.7.0':
+    resolution: {integrity: sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/reporters@29.7.0':
+    resolution: {integrity: sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/schemas@29.6.3':
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/source-map@29.6.3':
+    resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/test-result@29.7.0':
+    resolution: {integrity: sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/test-sequencer@29.7.0':
+    resolution: {integrity: sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/transform@29.7.0':
+    resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jest/types@29.6.3':
+    resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@keyv/bigmap@1.3.0':
+    resolution: {integrity: sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.5.4
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
+  '@logicflow/core@2.1.9':
+    resolution: {integrity: sha512-MeI5xBdO7rU25AhisVixsMOVc38T9W7/XkFUdoHWyPYwFWF4eySGphbk1yM+Qz95HfAXZI96C+YX7pVyR1Rnjw==}
+
+  '@logicflow/extension@2.1.11':
+    resolution: {integrity: sha512-oWioTf3MQCxQqiIF7z6VRhUwpCdmjfE9R9+4O59PurEHjlhum7sb2LHDOMool9DHB0qufpLcsgS+vk35Va+EPw==}
+    peerDependencies:
+      '@logicflow/core': 2.1.9
+      '@logicflow/vue-node-registry': 1.1.10
+
+  '@logicflow/vue-node-registry@1.1.10':
+    resolution: {integrity: sha512-ykKWb0DZ6RbQRGBHqkTkxsJxzyPSZgD5U2gQ4at8RISHHAOrkjAqCCEbm7vfIGbAPqC5GGvrnSTrJwmTT0pJxg==}
+    peerDependencies:
+      '@logicflow/core': 2.1.9
+      '@vue/composition-api': ^1.0.0-rc.10
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
+    resolution: {integrity: sha512-t2xicr9pfzkSRYx5aPqZqlLaayIwJTqgQ81Jor31Xep2nGyL2Aq3d0K5wOfeR7VevaSdxaS9dzSQP9xDwn8fDg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.131.0':
+    resolution: {integrity: sha512-nlGIod6gw75x1aEDgLS+srj+JRGY0HHm9MI9YgzE/B64l6d6+H3MSP9NOgp0+HTg8tp4vV9rVfgQGgd+TfVZcA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
+    resolution: {integrity: sha512-jukuV6xe5RbQKFo7QD34NDCLDZp4PSOm8rmckhNdH/60ymG5zXbDzGBEyc+nTkuLQNama2aSGCt+CPfpjNTqyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.131.0':
+    resolution: {integrity: sha512-g3JOo4khe9rslHm5WYaVDWb0HS/M1MLR3I9S8560MkKIcC96VQY00QjOlsuRyfSj/JDXj8i9T7ryPO2RidiXVg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
+    resolution: {integrity: sha512-1hziITDTxjMePnX+dR9ocVT+EuZkQ8wm4FPAbmbEiKG+Phbo73J1ZnPAA6Y/aGsWF3McOFnQuZIktAFwalkfJQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
+    resolution: {integrity: sha512-9uRxfXwyKG9+MwmGQBo2ncPNwZH5HTmCETFM2WiuDBNDCW4NC5ttSQkwCAMrTAWgwMzVBH1CP8pM0v7nebCWXQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
+    resolution: {integrity: sha512-mgbLvzRShXOLBdWGInf08Af4q+pfj1xD8hSgLClDZ9of/BXkB6+LIhTH7fihiDUipqB3yoSkKBWaZ3Ejlf5Yag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
+    resolution: {integrity: sha512-OPT8++4aN6j2GJ8+3IZHS/byXoZP4aSBn+FoG6rgBJ2fKwPKXWF3MqrFMNW7NKHM28FLY579xYLxJSfgobEqPA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
+    resolution: {integrity: sha512-vtPiwmfVTAXzaxDKsOXG+LwgRAA7WEnaeHzhS5z0GE89gAK18KSXnly7Z6saXXq6L3dVMyK44uoTI03zKxrpmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
+    resolution: {integrity: sha512-8AW8L7w5cGHSdZPcyZX2yR0+GUODsT15rbRjfdD54rv6DMbtuEB19ysLOpKJlRGfH6UNYNpCHaU1uJWgTWf1/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
+    resolution: {integrity: sha512-vvpjkjEOUsPcsYf8evE4MO3aGx9+3wodXEBOicGNnOwTuAik8eBONNkgSdhkGsAblQmfVHJyanRnpxglddTXIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
+    resolution: {integrity: sha512-AqmcNC3fClXX+fxQ6VGEN1667xVFiRBkY0CZmDMSiaeFUsv1+UkBPYYi48IUKcA9/ivvoKNRzQl2I4//kT9F/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
+    resolution: {integrity: sha512-7d3jOMKy7RSQCcDLIci+ySll2FgsOMl/GiRux4q2JNv0zg4EdhFISa9idvrdN/HEUIQQJNg6dmveUeJl2YErGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
+    resolution: {integrity: sha512-JHK/h95qVqVQ+ITER837kcTdwBDFpFaNnOTYGCP0zdUSX/mLKC7tXOoyrTb6vG7iRPwGlcgBil3v2IjYw1FqJA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
+    resolution: {integrity: sha512-b2BO82O8azXAyf7EUgOPKu145nWypbNyk07HbU09fkzhm9lEA5oPvaN/M8Nlo7tOErVTa2WOgS4QbOnxAPXdDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
+    resolution: {integrity: sha512-GHO9glZaX7LkX/OGfluEPf1yjg+ehiFbUdowbX6uNWOQhmwKWU4m4+nZ9FJkrHNKuxyI1KKertMdGjVKCApKWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
+    resolution: {integrity: sha512-3SkikPaEFoih1N83qLVEDLRLeY4nYsf6JT9SnWiMCQ5lGQdKup6bEuKCqkRiG9dD1IIaFeYz9RjlciPmYoFIWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
+    resolution: {integrity: sha512-Os5bEhryeA2jkH+ZrnZyAC1EP5gs+X4YB1Fjqml7UPD5kU7ecsK1MPEVMfCrdt/GDNpDbavYXiOXOdyJ5b3OPw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
+    resolution: {integrity: sha512-m+jNz9EuF0NXoiptc6B9h5yompZQVW/a5MJeOu5zojfH5yWk82tvF2ccrHkfhgtrS9h9DD5l1Qv8dWlfY7Nz8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
+    resolution: {integrity: sha512-o14Hk8dAyiEUMFEWEgmAwFZvBt1RzAYLM3xeQ+5315JXgVYhoemivgYcbYVRbsFkS71ShMGlAFE0kPnr460rww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.131.0':
+    resolution: {integrity: sha512-PgnWDfV0h+b16XNKbXU7Daib/BFSt/J2mEzfYIBu6JB/wNdlU+kVYXCkGA1A9fWkTbOgbjh4e6NhPeQOYvFhEA==}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
+  '@purge-icons/core@0.10.0':
+    resolution: {integrity: sha512-AtJbZv5Yy+vWX5v32DPTr+CW7AkSK8HJx52orDbrYt/9s4lGM2t4KKAmwaTQEH2HYr2HVh1mlqs54/S1s3WT1g==}
+
+  '@purge-icons/generated@0.10.0':
+    resolution: {integrity: sha512-I+1yN7/yDy/eZzfhAZqKF8Z6FM8D/O1vempbPrHJ0m9HlZwvf8sWXOArPJ2qRQGB6mJUVSpaXkoGBuoz1GQX5A==}
+
+  '@quansync/fs@1.0.0':
+    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@rollup/plugin-babel@5.3.1':
+    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      '@types/babel__core':
+        optional: true
+
+  '@rollup/plugin-node-resolve@15.3.1':
+    resolution: {integrity: sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-replace@2.4.2':
+    resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+
+  '@rollup/plugin-terser@0.4.4':
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/pluginutils@3.1.0':
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.52.5':
+    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.52.5':
+    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@scarf/scarf@1.4.0':
+    resolution: {integrity: sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==}
+
+  '@simonwep/pickr@1.8.2':
+    resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
+
+  '@sinclair/typebox@0.27.8':
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+
+  '@sinonjs/commons@3.0.1':
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
+
+  '@sinonjs/fake-timers@10.3.0':
+    resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
+
+  '@sphinxxxx/color-conversion@2.2.2':
+    resolution: {integrity: sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==}
+
+  '@surma/rollup-plugin-off-main-thread@2.2.3':
+    resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
+
+  '@tinymce/tinymce-vue@4.0.7':
+    resolution: {integrity: sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@traptitech/markdown-it-katex@3.6.0':
+    resolution: {integrity: sha512-CnJzTWxsgLGXFdSrWRaGz7GZ1kUUi8g3E9HzJmeveX1YwVJavrKYqysktfHZQsujdnRqV5O7g8FPKEA/aeTkOQ==}
+
+  '@trysound/sax@0.2.0':
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+
+  '@tsconfig/node10@1.0.12':
+    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@tybys/wasm-util@0.10.2':
+    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/codemirror@5.60.17':
+    resolution: {integrity: sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==}
+
+  '@types/conventional-commits-parser@5.0.2':
+    resolution: {integrity: sha512-BgT2szDXnVypgpNxOK8aL5SGjUdaQbC++WZNjF1Qge3Og2+zhHj+RWhmehLhYyvQwqAmvezruVfOf8+3m74W+g==}
+
+  '@types/crypto-js@4.2.2':
+    resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
+
+  '@types/estree@0.0.39':
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/fs-extra@11.0.4':
+    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
+
+  '@types/graceful-fs@4.1.9':
+    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
+
+  '@types/inquirer@9.0.9':
+    resolution: {integrity: sha512-/mWx5136gts2Z2e5izdoRCo46lPp5TMs9R15GTSsgg/XnZyxDWVqoVU3R9lWnccKpqwsJLvRoxbCjoJtZB7DSw==}
+
+  '@types/intro.js@5.1.5':
+    resolution: {integrity: sha512-TT1d8ayz07svlBcoqh26sNpQaU6bBpdFcCC+IMZHp46NNX2mYAHAVefM3wCmQSd4UWhhObeMjFByw2IaPKOXlw==}
+
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@29.5.14':
+    resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/jsonfile@6.1.4':
+    resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.23':
+    resolution: {integrity: sha512-RDvF6wTulMPjrNdCoYRC8gNR880JNGT8uB+REUpC2Ns4pRqQJhGz90wh7rgdXDPpCczF3VGktDuFGVnz8zP7HA==}
+
+  '@types/minimist@1.2.5':
+    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
+
+  '@types/mockjs@1.0.10':
+    resolution: {integrity: sha512-SXgrhajHG7boLv6oU93CcmdDm0HYRiceuz6b+7z+/2lCJPTWDv0V5YiwFHT2ejE4bQqgSXQiVPQYPWv7LGsK1g==}
+
+  '@types/node@20.19.30':
+    resolution: {integrity: sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==}
+
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
+  '@types/pinyin@2.10.2':
+    resolution: {integrity: sha512-jLzlRkaLRLg+lgYPjOuP3HX2cozUkhXls5GTXopsKuKJ9lDGlIAb88OoIztH6TbNUsoJnl/7e/kjaumA5IKKJg==}
+
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+
+  '@types/qs@6.14.0':
+    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+
+  '@types/showdown@2.0.6':
+    resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
+
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/svgo@2.6.4':
+    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
+
+  '@types/tern@0.23.9':
+    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@17.0.35':
+    resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
+
+  '@typescript-eslint/eslint-plugin@6.21.0':
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/parser@6.21.0':
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/scope-manager@5.62.0':
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/type-utils@6.21.0':
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/types@5.62.0':
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@typescript-eslint/types@6.21.0':
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/typescript-estree@5.62.0':
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/typescript-estree@6.21.0':
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/utils@5.62.0':
+    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@typescript-eslint/utils@6.21.0':
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+
+  '@typescript-eslint/visitor-keys@5.62.0':
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@unocss/cli@66.7.0':
+    resolution: {integrity: sha512-Pkd/R+WDs8gc1i9fI5XDW8N5r7aoCWjNzt8wGGj5FWTbmsEzewueaL5LQTH4ymv/BhSHFcYpL7geQ5vYont+BA==}
+    hasBin: true
+
+  '@unocss/config@66.7.0':
+    resolution: {integrity: sha512-C6waL+xzqAPzz5n47qnrs4GbyAtlusNYYmcV6DKYh1MgUP4EFhMnEMyuR2mw3M3tsBpyGuehLdRK5+ECF5yLkA==}
+
+  '@unocss/core@66.7.0':
+    resolution: {integrity: sha512-j6MFMx5C3iIwW4T4hVbh+30fKWgSGkmS3bCcdjlfqM88lRT+dHFBN9nkfNOBJT6e6IHN9415nexuzcQvTjJXxw==}
+
+  '@unocss/extractor-arbitrary-variants@66.7.0':
+    resolution: {integrity: sha512-iHMlXmb8aGtYgPQ8o3D4rMz9DKOqSp8g/LWvEoiM7arSjJF9jMpcpYlqZXzkg1mSQX23TRW76Qxj1gyI4lRd9w==}
+
+  '@unocss/inspector@66.7.0':
+    resolution: {integrity: sha512-W1MOO2d/1ZHwFR8+mrUUW6KW3MgJ6FdrSWfWeQ1+fgb0TVj8CweNzeSh46sTEXEcpvlui5mnGYFxanpLMoyOtA==}
+
+  '@unocss/preset-attributify@66.7.0':
+    resolution: {integrity: sha512-n8ikthHHkAOeHWUwqRNIMGijV6LuIhiZb3D6kreV3oK98wJYupGNGYMByx7R9gQD9uBNLGs0f1jsaAScV3S2Sw==}
+
+  '@unocss/preset-icons@66.7.0':
+    resolution: {integrity: sha512-y6I2qZ2cwNAS2XRBig1lHzdFG9qTnZM/mx3fL3XnURnEYZird4uidLyWOyUGcdy1kMot1QcYVb0D/s9NgrEOgQ==}
+
+  '@unocss/preset-mini@66.7.0':
+    resolution: {integrity: sha512-+YtRlr1Fjd24GYWhPB93r6fjefTBCnFUsZCASncSEU29u2Mi8MYINjefLfKlSJFMKg6AKzWbelKMCQfoKlUkbg==}
+
+  '@unocss/preset-tagify@66.7.0':
+    resolution: {integrity: sha512-MaM07ChHsX8XZM3tlMPuRsZxbNvRVTbmIncOj9cCCrFpeOu8hy2ggRAgGOalWIwnIHc+5KQIkqucbgmXN7KBdA==}
+
+  '@unocss/preset-typography@66.7.0':
+    resolution: {integrity: sha512-Ekdz7jw/TYTiH+QFqMWcWNMnvBnUZ/XPUF938C8DfqD79hZyLdRPo0kQaZh62cit13xNRAb49QP3HIUJIUxoGA==}
+
+  '@unocss/preset-uno@66.7.0':
+    resolution: {integrity: sha512-fcLTj5Wax3QydCSdJq9yQHhqKph6Mx9exwNnkaBCXtmBvrSBd2O6O9ZAylcISnACeXJkjSverU8qVu1X2tITdA==}
+
+  '@unocss/preset-web-fonts@66.7.0':
+    resolution: {integrity: sha512-jpNLjo/2X/J2J+G/M9W+y6VuiIhjZ9AyOnyNJHsdhmSJYCsnMuaYtP9eFn4d9+oe3Sz2lVNPV0A9RiqQ+xVAyQ==}
+
+  '@unocss/preset-wind3@66.7.0':
+    resolution: {integrity: sha512-1xxHBV4TtUHXPpYnWH8J2UHhxaMF84fTvadVzRRaXkyVrXD86Hveh/lfbXHXnCyf0JxwqsleOq8CnCTT8AgoAg==}
+
+  '@unocss/preset-wind4@66.7.0':
+    resolution: {integrity: sha512-5o3y2BcImLbkxa0fNtwaH8iB47FrOKzT7Xogni5PIDOX/DsoHfDLNiNBRrHHHHBeZ3jqvjv2T9T5kEkD5/WtYQ==}
+
+  '@unocss/preset-wind@66.7.0':
+    resolution: {integrity: sha512-K2cCgQawl4GzFyI9almN4jZ33OJNI6U7WxZ9s7D5bivZYfHPaStLTPffNxWlmawwUZF0qpH0S+S7H745ZzgajQ==}
+
+  '@unocss/rule-utils@66.7.0':
+    resolution: {integrity: sha512-DMJIiey/m+xr0hpSbxFhSbKlC3e7QsuwdAEdgMmIM7pEcu/AEMl7oH198QYX9880P2X0hy5iFE6UCWx9CwGAXQ==}
+
+  '@unocss/transformer-attributify-jsx@66.7.0':
+    resolution: {integrity: sha512-mmsAUluRprSyejbzeQnC3ST056EUj2IxD2hMpPJPtnA4QkkyIgBNCmi2OSeVcEWMat1s3r4LcYSTqN88EcX5Kg==}
+
+  '@unocss/transformer-compile-class@66.7.0':
+    resolution: {integrity: sha512-Z3K/s3TmUqUBGgB2SThWbUAP5E9VIFacbs2+bNJNn+53y1kqdLA1MIje3xlU5hig3OzGk8newwiMflh3s3Jzhg==}
+
+  '@unocss/transformer-directives@66.7.0':
+    resolution: {integrity: sha512-6T9JxrPfLQlJFNLv7paG4yGiIgGrJY30268HWLkBFwgsldNPtQ+GeQJOzfemCH19UXXqqXMP0WnvbsFucdclmg==}
+
+  '@unocss/transformer-variant-group@66.7.0':
+    resolution: {integrity: sha512-2TXYLowPMXszGNYRXAWzQ1G9nGP6EYv9XeJvwNvnf0w9J6qOQVVtW/ZViIz61Kk083c06cZ6nai8pCBnc8aPAw==}
+
+  '@unocss/vite@66.7.0':
+    resolution: {integrity: sha512-7J8Mk9M1j55S3bXL87/yHOspnuAaftQWbc3HjCH0/sXNLZJZnlpmUue3EtT5Ez+PE01T3DK1D9Xxn/MvtdvXtA==}
+    peerDependencies:
+      vite: ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0
+
+  '@vant/area-data@1.5.2':
+    resolution: {integrity: sha512-Gtxgt6Rjgopt6234ANpO0bBsSwtjZ23lBlVDHIy8Mi2NJqyoj1vgVWY0dri8/2LCZAWzQ6EnwRrUVViUZ0cvMA==}
+
+  '@vitejs/plugin-vue-jsx@5.1.5':
+    resolution: {integrity: sha512-jIAsvHOEtWpslLOI2MeElGFxH7M8pM83BU/Tor4RLyiwH0FM4nUW3xdvbw20EeU9wc5IspQwMq225K3CMnJEpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.0.0
+
+  '@vitejs/plugin-vue@6.0.7':
+    resolution: {integrity: sha512-km+p+XdSz9Sxm5rqUbqcSfZYaAniKxWBj1KURl+Jr7UaPvvX7BmaWMdP69I5rrFDeQGyxAG7NXdc57vz+snhWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@1.11.1':
+    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
+
+  '@volar/source-map@1.11.1':
+    resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
+
+  '@volar/typescript@1.11.1':
+    resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
+
+  '@vue/babel-helper-vue-transform-on@2.0.1':
+    resolution: {integrity: sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==}
+
+  '@vue/babel-plugin-jsx@2.0.1':
+    resolution: {integrity: sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@2.0.1':
+    resolution: {integrity: sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/compiler-core@3.5.27':
+    resolution: {integrity: sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==}
+
+  '@vue/compiler-dom@3.5.27':
+    resolution: {integrity: sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==}
+
+  '@vue/compiler-sfc@3.5.27':
+    resolution: {integrity: sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==}
+
+  '@vue/compiler-ssr@3.5.27':
+    resolution: {integrity: sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/language-core@1.8.27':
+    resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.5.27':
+    resolution: {integrity: sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==}
+
+  '@vue/runtime-core@3.5.27':
+    resolution: {integrity: sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==}
+
+  '@vue/runtime-dom@3.5.27':
+    resolution: {integrity: sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==}
+
+  '@vue/server-renderer@3.5.27':
+    resolution: {integrity: sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==}
+    peerDependencies:
+      vue: 3.5.27
+
+  '@vue/shared@3.5.27':
+    resolution: {integrity: sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==}
+
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
+  '@vxe-ui/core@4.2.21':
+    resolution: {integrity: sha512-WcwKvNwovuAy+t0t40PwkDvMlCCOWCGSl19qmTq+NYn4GuMfItUsHwfdszO6UD90ozOMyPJzdxLwcfVijYpLng==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@zxcvbn-ts/core@3.0.4':
+    resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==}
+
+  JSONStream@1.3.5:
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
+    hasBin: true
+
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  add-stream@1.0.0:
+    resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-escapes@7.2.0:
+    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+    engines: {node: '>=18'}
+
+  ansi-regex@2.1.1:
+    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    engines: {node: '>=0.10.0'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@2.2.1:
+    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
+    engines: {node: '>=0.10.0'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  ant-design-vue@4.2.6:
+    resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  arr-diff@4.0.0:
+    resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
+    engines: {node: '>=0.10.0'}
+
+  arr-flatten@1.1.0:
+    resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==}
+    engines: {node: '>=0.10.0'}
+
+  arr-union@3.1.0:
+    resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
+    engines: {node: '>=0.10.0'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  array-tree-filter@2.1.0:
+    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  array-unique@0.3.2:
+    resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
+    engines: {node: '>=0.10.0'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  arrify@1.0.1:
+    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
+    engines: {node: '>=0.10.0'}
+
+  assign-symbols@1.0.0:
+    resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
+    engines: {node: '>=0.10.0'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+
+  atob@2.1.2:
+    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
+    engines: {node: '>= 4.5.0'}
+    hasBin: true
+
+  autoprefixer@10.4.23:
+    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axios@0.26.1:
+    resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
+  babel-jest@29.7.0:
+    resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@babel/core': ^7.8.0
+
+  babel-plugin-istanbul@6.1.1:
+    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
+    engines: {node: '>=8'}
+
+  babel-plugin-jest-hoist@29.6.3:
+    resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  babel-plugin-polyfill-corejs2@0.4.14:
+    resolution: {integrity: sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-corejs3@0.13.0:
+    resolution: {integrity: sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-regenerator@0.6.5:
+    resolution: {integrity: sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-transform-runtime@6.23.0:
+    resolution: {integrity: sha512-cpGMVC1vt/772y3jx1gwSaTitQVZuFDlllgreMsZ+rTYC6jlYXRyf5FQOgSnckOiA5QmzbXTyBY2A5AmZXF1fA==}
+
+  babel-preset-current-node-syntax@1.2.0:
+    resolution: {integrity: sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0 || ^8.0.0-0
+
+  babel-preset-jest@29.6.3:
+    resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  base@0.11.2:
+    resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
+    engines: {node: '>=0.10.0'}
+
+  baseline-browser-mapping@2.9.15:
+    resolution: {integrity: sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==}
+    hasBin: true
+
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
+  batch-processor@1.0.0:
+    resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
+
+  big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+
+  big.js@6.2.2:
+    resolution: {integrity: sha512-y/ie+Faknx7sZA5MfGA2xKlu0GDv8RWrXGsmlteyJQ2lvoKv9GBK/fpRMc2qlSoBAgNxrixICFCBefIq8WCQpQ==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@2.3.2:
+    resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
+    engines: {node: '>=0.10.0'}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bs-logger@0.2.6:
+    resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
+    engines: {node: '>= 6'}
+
+  bser@2.1.1:
+    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  cac@7.0.0:
+    resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
+    engines: {node: '>=20.19.0'}
+
+  cache-base@1.0.1:
+    resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
+    engines: {node: '>=0.10.0'}
+
+  cacheable@2.3.2:
+    resolution: {integrity: sha512-w+ZuRNmex9c1TR9RcsxbfTKCjSL0rh1WA5SABbrWprIHeNBdmyQLSYonlDy9gpD+63XT8DgZ/wNh1Smvc9WnJA==}
+
+  cachedir@2.3.0:
+    resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
+    engines: {node: '>=6'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+
+  camelcase-keys@6.2.2:
+    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
+    engines: {node: '>=8'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
+  caniuse-lite@1.0.30001765:
+    resolution: {integrity: sha512-LWcNtSyZrakjECqmpP4qdg0MMGdN368D7X8XvvAqOcqMv0RxnlqVKZl2V6/mBR68oYMxOZPLw/gO7DuisMHUvQ==}
+
+  chalk@1.1.3:
+    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
+    engines: {node: '>=0.10.0'}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+
+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+
+  cheerio@1.1.2:
+    resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==}
+    engines: {node: '>=20.18.1'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
+  cjs-module-lexer@1.4.3:
+    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
+
+  class-utils@0.3.6:
+    resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
+    engines: {node: '>=0.10.0'}
+
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
+  clean-css@5.3.3:
+    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
+    engines: {node: '>= 10.0'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
+
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
+  co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  codemirror@5.65.20:
+    resolution: {integrity: sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==}
+
+  collect-v8-coverage@1.0.3:
+    resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
+
+  collection-visit@1.0.0:
+    resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
+    engines: {node: '>=0.10.0'}
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.2:
+    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
+    engines: {node: '>=20'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  commander@9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+
+  commitizen@4.3.1:
+    resolution: {integrity: sha512-gwAPAVTy/j5YcOOebcCRIijn+mSjWJC+IYKivTu6aG8Ei/scoXgfsMRnuAk6b0GRste2J4NGxVdMN3ZpfNaVaw==}
+    engines: {node: '>= 12'}
+    hasBin: true
+
+  common-tags@1.8.2:
+    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
+    engines: {node: '>=4.0.0'}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  component-emitter@1.3.1:
+    resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==}
+
+  compute-scroll-into-view@1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+
+  computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
+  connect-history-api-fallback@1.6.0:
+    resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
+    engines: {node: '>=0.8'}
+
+  connect@3.7.0:
+    resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
+    engines: {node: '>= 0.10.0'}
+
+  consola@2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  conventional-changelog-angular@7.0.0:
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-atom@4.0.0:
+    resolution: {integrity: sha512-q2YtiN7rnT1TGwPTwjjBSIPIzDJCRE+XAUahWxnh+buKK99Kks4WLMHoexw38GXx9OUxAsrp44f9qXe5VEMYhw==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-cli@4.1.0:
+    resolution: {integrity: sha512-MscvILWZ6nWOoC+p/3Nn3D2cVLkjeQjyZPUr0bQ+vUORE/SPrkClJh8BOoMNpS4yk+zFJ5LlgXACxH6XGQoRXA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  conventional-changelog-codemirror@4.0.0:
+    resolution: {integrity: sha512-hQSojc/5imn1GJK3A75m9hEZZhc3urojA5gMpnar4JHmgLnuM3CUIARPpEk86glEKr3c54Po3WV/vCaO/U8g3Q==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-core@7.0.0:
+    resolution: {integrity: sha512-UYgaB1F/COt7VFjlYKVE/9tTzfU3VUq47r6iWf6lM5T7TlOxr0thI63ojQueRLIpVbrtHK4Ffw+yQGduw2Bhdg==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-ember@4.0.0:
+    resolution: {integrity: sha512-D0IMhwcJUg1Y8FSry6XAplEJcljkHVlvAZddhhsdbL1rbsqRsMfGx/PIkPYq0ru5aDgn+OxhQ5N5yR7P9mfsvA==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-eslint@5.0.0:
+    resolution: {integrity: sha512-6JtLWqAQIeJLn/OzUlYmzd9fKeNSWmQVim9kql+v4GrZwLx807kAJl3IJVc3jTYfVKWLxhC3BGUxYiuVEcVjgA==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-express@4.0.0:
+    resolution: {integrity: sha512-yWyy5c7raP9v7aTvPAWzqrztACNO9+FEI1FSYh7UP7YT1AkWgv5UspUeB5v3Ibv4/o60zj2o9GF2tqKQ99lIsw==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-jquery@5.0.0:
+    resolution: {integrity: sha512-slLjlXLRNa/icMI3+uGLQbtrgEny3RgITeCxevJB+p05ExiTgHACP5p3XiMKzjBn80n+Rzr83XMYfRInEtCPPw==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-jshint@4.0.0:
+    resolution: {integrity: sha512-LyXq1bbl0yG0Ai1SbLxIk8ZxUOe3AjnlwE6sVRQmMgetBk+4gY9EO3d00zlEt8Y8gwsITytDnPORl8al7InTjg==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-preset-loader@4.1.0:
+    resolution: {integrity: sha512-HozQjJicZTuRhCRTq4rZbefaiCzRM2pr6u2NL3XhrmQm4RMnDXfESU6JKu/pnKwx5xtdkYfNCsbhN5exhiKGJA==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-writer@7.0.1:
+    resolution: {integrity: sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  conventional-changelog@5.1.0:
+    resolution: {integrity: sha512-aWyE/P39wGYRPllcCEZDxTVEmhyLzTc9XA6z6rVfkuCD2UBnhV/sgSOKbQrEG5z9mEZJjnopjgQooTKxEg8mAg==}
+    engines: {node: '>=16'}
+
+  conventional-commit-types@3.0.0:
+    resolution: {integrity: sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==}
+
+  conventional-commits-filter@4.0.0:
+    resolution: {integrity: sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==}
+    engines: {node: '>=16'}
+
+  conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+
+  copy-descriptor@0.1.1:
+    resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
+    engines: {node: '>=0.10.0'}
+
+  core-js-compat@3.47.0:
+    resolution: {integrity: sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==}
+
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
+
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
+  corser@2.0.1:
+    resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==}
+    engines: {node: '>= 0.4.0'}
+
+  cosmiconfig-typescript-loader@5.1.0:
+    resolution: {integrity: sha512-7PtBB+6FdsOvZyJtlF3hEPpACq7RQX6BVGsgC7/lfVXnKMvNCu/XY3ykreqG5w/rBNdu2z8LCIKoF3kpHHdHlA==}
+    engines: {node: '>=v16'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=8.2'
+      typescript: '>=4'
+
+  cosmiconfig-typescript-loader@6.2.0:
+    resolution: {integrity: sha512-GEN39v7TgdxgIoNcdkRE3uiAzQt3UXLyHbRHD6YoL048XAeOomyxaP+Hh/+2C6C2wYjxJ2onhJcsQp+L4YEkVQ==}
+    engines: {node: '>=v18'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=9'
+      typescript: '>=5'
+
+  cosmiconfig@8.3.6:
+    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  create-jest@29.7.0:
+    resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  cron-parser@4.9.0:
+    resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
+    engines: {node: '>=12.0.0'}
+
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
+  cross-fetch@3.2.0:
+    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
+
+  cross-spawn@6.0.6:
+    resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
+    engines: {node: '>=4.8'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
+  crypto-random-string@2.0.0:
+    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
+    engines: {node: '>=8'}
+
+  css-functions-list@3.2.3:
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
+
+  css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssfilter@0.0.10:
+    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
+
+  csso@4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
+    engines: {node: '>=8.0.0'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  cz-conventional-changelog@3.3.0:
+    resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
+    engines: {node: '>= 10'}
+
+  cz-git@1.12.0:
+    resolution: {integrity: sha512-LaZ+8whPPUOo6Y0Zy4nIbf6JOleV3ejp41sT6N4RPKiKKA+ICWf4ueeIlxIO8b6JtdlDxRzHH/EcRji07nDxcg==}
+    engines: {node: '>=v12.20.0'}
+
+  czg@1.12.0:
+    resolution: {integrity: sha512-LGltcoZ5m7vhe3WNw16QXqd5WurnHegx9V15MwZJtFAU2AVCYLCqDbwxPUgZOnAcdzzooq33ONcU148HOQsjdA==}
+    engines: {node: '>=v12.20.0'}
+    hasBin: true
+
+  dargs@7.0.0:
+    resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
+    engines: {node: '>=8'}
+
+  dargs@8.1.0:
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    engines: {node: '>=12'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decamelize-keys@1.1.1:
+    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
+    engines: {node: '>=0.10.0'}
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+
+  dedent@0.7.0:
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
+
+  dedent@1.7.1:
+    resolution: {integrity: sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  define-property@0.2.5:
+    resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==}
+    engines: {node: '>=0.10.0'}
+
+  define-property@1.0.0:
+    resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==}
+    engines: {node: '>=0.10.0'}
+
+  define-property@2.0.2:
+    resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
+    engines: {node: '>=0.10.0'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  detect-file@1.0.0:
+    resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
+    engines: {node: '>=0.10.0'}
+
+  detect-indent@6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+
+  detect-newline@3.1.0:
+    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
+    engines: {node: '>=8'}
+
+  diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
+  dingtalk-jsapi@3.2.5:
+    resolution: {integrity: sha512-GHtDTmilJQhr07GNarjlzhvgUkPWc0+52zbN2ToW+JzkydaOwmhiJCTO42+BI+onAlhdfLUbtUnGsjQNDTrM1w==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
+  dom-align@1.12.4:
+    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
+
+  dom-scroll-into-view@2.0.1:
+    resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
+
+  dom-serializer@0.2.2:
+    resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
+
+  dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-zindex@1.0.6:
+    resolution: {integrity: sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA==}
+
+  domelementtype@1.3.1:
+    resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@2.4.2:
+    resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
+
+  domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@1.7.0:
+    resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
+
+  domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dotenv-expand@8.0.3:
+    resolution: {integrity: sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==}
+    engines: {node: '>=12'}
+
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  ejs@3.1.10:
+    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  electron-to-chromium@1.5.267:
+    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+
+  element-resize-detector@1.2.4:
+    resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
+
+  emittery@0.13.1:
+    resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
+    engines: {node: '>=12'}
+
+  emoji-mart-vue-fast@15.0.5:
+    resolution: {integrity: sha512-wnxLor8ggpqshoOPwIc33MdOC3A1XFeDLgUwYLPtNPL8VeAtXJAVrnFq1CN5PeCYAFoLo4IufHQZ9CfHD4IZiw==}
+    peerDependencies:
+      vue: '>2.0.0'
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+
+  encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+
+  encoding-sniffer@0.2.1:
+    resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
+
+  enquire.js@2.1.6:
+    resolution: {integrity: sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==}
+
+  entities@1.1.2:
+    resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
+
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.0:
+    resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-abstract@1.24.1:
+    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  esbuild-android-64@0.14.54:
+    resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  esbuild-android-arm64@0.14.54:
+    resolution: {integrity: sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  esbuild-darwin-64@0.14.54:
+    resolution: {integrity: sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  esbuild-darwin-arm64@0.14.54:
+    resolution: {integrity: sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  esbuild-freebsd-64@0.14.54:
+    resolution: {integrity: sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  esbuild-freebsd-arm64@0.14.54:
+    resolution: {integrity: sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  esbuild-linux-32@0.14.54:
+    resolution: {integrity: sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  esbuild-linux-64@0.14.54:
+    resolution: {integrity: sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  esbuild-linux-arm64@0.14.54:
+    resolution: {integrity: sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  esbuild-linux-arm@0.14.54:
+    resolution: {integrity: sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  esbuild-linux-mips64le@0.14.54:
+    resolution: {integrity: sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  esbuild-linux-ppc64le@0.14.54:
+    resolution: {integrity: sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  esbuild-linux-riscv64@0.14.54:
+    resolution: {integrity: sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  esbuild-linux-s390x@0.14.54:
+    resolution: {integrity: sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  esbuild-netbsd-64@0.14.54:
+    resolution: {integrity: sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  esbuild-openbsd-64@0.14.54:
+    resolution: {integrity: sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  esbuild-sunos-64@0.14.54:
+    resolution: {integrity: sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  esbuild-windows-32@0.14.54:
+    resolution: {integrity: sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  esbuild-windows-64@0.14.54:
+    resolution: {integrity: sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  esbuild-windows-arm64@0.14.54:
+    resolution: {integrity: sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  esbuild@0.14.54:
+    resolution: {integrity: sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.27.2:
+    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-config-prettier@9.1.2:
+    resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-define-config@2.1.0:
+    resolution: {integrity: sha512-QUp6pM9pjKEVannNAbSJNeRuYwW3LshejfyBBpjeMGaJjaDUpVps4C6KVR8R7dWZnD3i0synmrE36znjTkJvdQ==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  eslint-plugin-jest@27.9.0:
+    resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0 || ^7.0.0
+      eslint: ^7.0.0 || ^8.0.0
+      jest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      jest:
+        optional: true
+
+  eslint-plugin-prettier@5.5.5:
+    resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
+  eslint-plugin-vue@9.33.0:
+    resolution: {integrity: sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
+  eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint@8.57.1:
+    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+    hasBin: true
+
+  esno@4.8.0:
+    resolution: {integrity: sha512-acMtooReAQGzLU0zcuEDHa8S62meh5aIyi8jboYxyvAePdmuWx2Mpwmt0xjwO0bs9/SXf+dvXJ0QJoDWw814Iw==}
+    hasBin: true
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  event-source-polyfill@1.0.31:
+    resolution: {integrity: sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  exit@0.1.2:
+    resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
+    engines: {node: '>= 0.8.0'}
+
+  expand-brackets@2.1.4:
+    resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
+    engines: {node: '>=0.10.0'}
+
+  expand-tilde@2.0.2:
+    resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
+    engines: {node: '>=0.10.0'}
+
+  expect@29.7.0:
+    resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+
+  extend-shallow@3.0.2:
+    resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==}
+    engines: {node: '>=0.10.0'}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  extglob@2.0.4:
+    resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
+    engines: {node: '>=0.10.0'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fb-watchman@2.0.2:
+    resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@11.1.2:
+    resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==}
+
+  file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+
+  fill-range@4.0.0:
+    resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==}
+    engines: {node: '>=0.10.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@1.1.2:
+    resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
+    engines: {node: '>= 0.8'}
+
+  find-node-modules@2.1.3:
+    resolution: {integrity: sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==}
+
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@6.3.0:
+    resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  findup-sync@4.0.0:
+    resolution: {integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==}
+    engines: {node: '>= 8'}
+
+  flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  flat-cache@6.1.20:
+    resolution: {integrity: sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ==}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  for-in@1.0.2:
+    resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
+    engines: {node: '>=0.10.0'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fragment-cache@0.2.1:
+    resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
+    engines: {node: '>=0.10.0'}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@11.3.3:
+    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+    engines: {node: '>=14.14'}
+
+  fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-own-enumerable-property-symbols@3.0.2:
+    resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
+
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
+  get-value@2.0.6:
+    resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
+    engines: {node: '>=0.10.0'}
+
+  git-raw-commits@2.0.11:
+    resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  git-semver-tags@7.0.1:
+    resolution: {integrity: sha512-NY0ZHjJzyyNXHTDZmj+GG7PyuAKtMsyWSwh07CR2hOZFa+/yoTsXci/nF2obzL8UDhakFNkD9gNdt/Ed+cxh2Q==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    hasBin: true
+
+  glob@11.1.0:
+    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  global-dirs@0.1.1:
+    resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
+    engines: {node: '>=4'}
+
+  global-modules@1.0.0:
+    resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
+    engines: {node: '>=0.10.0'}
+
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@1.0.2:
+    resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
+    engines: {node: '>=0.10.0'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
+  good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  hard-rejection@2.1.0:
+    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
+    engines: {node: '>=6'}
+
+  has-ansi@2.0.0:
+    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
+    engines: {node: '>=0.10.0'}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@1.0.0:
+    resolution: {integrity: sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==}
+    engines: {node: '>=0.10.0'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  has-value@0.3.1:
+    resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
+    engines: {node: '>=0.10.0'}
+
+  has-value@1.0.0:
+    resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==}
+    engines: {node: '>=0.10.0'}
+
+  has-values@0.1.4:
+    resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==}
+    engines: {node: '>=0.10.0'}
+
+  has-values@1.0.0:
+    resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==}
+    engines: {node: '>=0.10.0'}
+
+  hashery@1.4.0:
+    resolution: {integrity: sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==}
+    engines: {node: '>=20'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  hoist-non-react-statics@2.5.5:
+    resolution: {integrity: sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==}
+
+  homedir-polyfill@1.0.3:
+    resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
+    engines: {node: '>=0.10.0'}
+
+  hookified@1.15.0:
+    resolution: {integrity: sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw==}
+
+  hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+
+  hosted-git-info@4.1.0:
+    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+    engines: {node: '>=10'}
+
+  hosted-git-info@7.0.2:
+    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  html-minifier-terser@6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
+  htmlparser2@3.10.1:
+    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
+
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
+  http-proxy@1.18.1:
+    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
+    engines: {node: '>=8.0.0'}
+
+  http-server@14.1.1:
+    resolution: {integrity: sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  husky@8.0.3:
+    resolution: {integrity: sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-local@3.2.0:
+    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  inquirer@8.2.5:
+    resolution: {integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==}
+    engines: {node: '>=12.0.0'}
+
+  inquirer@9.3.8:
+    resolution: {integrity: sha512-pFGGdaHrmRKMh4WoDDSowddgjT1Vkl90atobmTeSmcPGdYiwikch/m/Ef5wRaiamHejtw0cUUMMerzDUXCci2w==}
+    engines: {node: '>=18'}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  intro.js@7.2.0:
+    resolution: {integrity: sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==}
+
+  is-accessor-descriptor@1.0.1:
+    resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==}
+    engines: {node: '>= 0.10'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-ci@3.0.1:
+    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
+    hasBin: true
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-descriptor@1.0.1:
+    resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-descriptor@0.1.7:
+    resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==}
+    engines: {node: '>= 0.4'}
+
+  is-descriptor@1.0.3:
+    resolution: {integrity: sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+
+  is-extendable@1.0.1:
+    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
+    engines: {node: '>=0.10.0'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
+  is-generator-fn@2.1.0:
+    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
+    engines: {node: '>=6'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@3.0.0:
+    resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@1.0.1:
+    resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
+    engines: {node: '>=0.10.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@3.0.1:
+    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-regexp@1.0.0:
+    resolution: {integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==}
+    engines: {node: '>=0.10.0'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
+  is-utf8@0.2.1:
+    resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isobject@2.1.0:
+    resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==}
+    engines: {node: '>=0.10.0'}
+
+  isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@5.2.1:
+    resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@6.0.3:
+    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@4.0.1:
+    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+    engines: {node: 20 || >=22}
+
+  jake@10.9.4:
+    resolution: {integrity: sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  jest-changed-files@29.7.0:
+    resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-circus@29.7.0:
+    resolution: {integrity: sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-cli@29.7.0:
+    resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jest-config@29.7.0:
+    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      ts-node:
+        optional: true
+
+  jest-diff@29.7.0:
+    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-docblock@29.7.0:
+    resolution: {integrity: sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-each@29.7.0:
+    resolution: {integrity: sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-environment-node@29.7.0:
+    resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-get-type@29.6.3:
+    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-haste-map@29.7.0:
+    resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-leak-detector@29.7.0:
+    resolution: {integrity: sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-matcher-utils@29.7.0:
+    resolution: {integrity: sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-message-util@29.7.0:
+    resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-mock@29.7.0:
+    resolution: {integrity: sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-pnp-resolver@1.2.3:
+    resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+
+  jest-regex-util@29.6.3:
+    resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-resolve-dependencies@29.7.0:
+    resolution: {integrity: sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-resolve@29.7.0:
+    resolution: {integrity: sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-runner@29.7.0:
+    resolution: {integrity: sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-runtime@29.7.0:
+    resolution: {integrity: sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-snapshot@29.7.0:
+    resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-util@29.7.0:
+    resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-validate@29.7.0:
+    resolution: {integrity: sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-watcher@29.7.0:
+    resolution: {integrity: sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest-worker@29.7.0:
+    resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  jest@29.7.0:
+    resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-base64@2.6.4:
+    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
+
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+    hasBin: true
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-better-errors@1.0.2:
+    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-parse-even-better-errors@3.0.2:
+    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json-stringify-safe@5.0.1:
+    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  jsonpointer@5.0.1:
+    resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
+    engines: {node: '>=0.10.0'}
+
+  katex@0.16.27:
+    resolution: {integrity: sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  keyv@5.5.5:
+    resolution: {integrity: sha512-FA5LmZVF1VziNc0bIdCSA1IoSVnDCqE8HJIZZv2/W8YmoAM50+tnUgJR/gQZwEeIMleuIOnRnHA/UaZRNeV4iQ==}
+
+  kind-of@3.2.2:
+    resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
+    engines: {node: '>=0.10.0'}
+
+  kind-of@4.0.0:
+    resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==}
+    engines: {node: '>=0.10.0'}
+
+  kind-of@5.1.0:
+    resolution: {integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==}
+    engines: {node: '>=0.10.0'}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
+
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  less@4.5.1:
+    resolution: {integrity: sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  leven@3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lines-and-columns@2.0.4:
+    resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
+  lint-staged@15.2.2:
+    resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  listr2@8.0.1:
+    resolution: {integrity: sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==}
+    engines: {node: '>=18.0.0'}
+
+  load-json-file@4.0.0:
+    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
+    engines: {node: '>=4'}
+
+  loader-utils@1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+
+  local-pkg@0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
+    engines: {node: '>=14'}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash-es@4.17.22:
+    resolution: {integrity: sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.isfunction@3.0.9:
+    resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+
+  lodash.map@4.6.0:
+    resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
+  lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+
+  lodash.sortby@4.7.0:
+    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  longest@2.0.1:
+    resolution: {integrity: sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==}
+    engines: {node: '>=0.10.0'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lunar-javascript@1.7.7:
+    resolution: {integrity: sha512-u/KYiwPIBo/0bT+WWfU7qO1d+aqeB90Tuy4ErXenr2Gam0QcWeezUvtiOIyXR7HbVnW2I1DKfU0NBvzMZhbVQw==}
+
+  luxon@3.7.2:
+    resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
+    engines: {node: '>=12'}
+
+  magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  makeerror@1.0.12:
+    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+
+  map-cache@0.2.2:
+    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
+    engines: {node: '>=0.10.0'}
+
+  map-obj@1.0.1:
+    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
+    engines: {node: '>=0.10.0'}
+
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
+
+  map-visit@1.0.0:
+    resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
+    engines: {node: '>=0.10.0'}
+
+  markdown-it-link-attributes@4.0.1:
+    resolution: {integrity: sha512-pg5OK0jPLg62H4k7M9mRJLT61gUp9nvG0XveKYHMOOluASo9OEF13WlXrpAp2aj35LbedAy3QOCgQCw0tkLKAQ==}
+
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
+  material-colors@1.2.6:
+    resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+
+  md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
+  medium-editor@5.23.3:
+    resolution: {integrity: sha512-he9/TdjX8f8MGdXGfCs8AllrYnqXJJvjNkDKmPg3aPW/uoIrlRqtkFthrwvmd+u4QyzEiadhCCM0EwTiRdUCJw==}
+
+  memorystream@0.3.1:
+    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
+    engines: {node: '>= 0.10.0'}
+
+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  meow@8.1.2:
+    resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
+    engines: {node: '>=10'}
+
+  merge-options@1.0.1:
+    resolution: {integrity: sha512-iuPV41VWKWBIOpBsjoxjDZw8/GbSfZ2mk7N1453bwMrfzdrIk7EzBd+8UVR6rkw67th7xnk9Dytl3J+lHPdxvg==}
+    engines: {node: '>=4'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  merge@2.1.1:
+    resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==}
+
+  micromatch@3.1.0:
+    resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
+    engines: {node: '>=0.10.0'}
+
+  micromatch@4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@7.4.9:
+    resolution: {integrity: sha512-Brg/fp/iAVDOQoHxkuN5bEYhyQlZhxddI78yWsCbeEwTHXQjlNLtiJDUsp1GIptVqMI7/gkJMz4vVAc01mpoBw==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist-options@4.1.0:
+    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
+    engines: {node: '>= 6'}
+
+  minimist@1.2.7:
+    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mixin-deep@1.3.2:
+    resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
+    engines: {node: '>=0.10.0'}
+
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
+  mobx-preact@3.0.0:
+    resolution: {integrity: sha512-ijan/cBs3WmRye87E5+3JmoFBB00KDAwNA3pm7bMwYLPHBAXlN86aC3gdrXw8aKzM5RI8V3a993PphzPv6P4FA==}
+    peerDependencies:
+      mobx: 5.x
+      preact: '>=8'
+
+  mobx-utils@5.6.2:
+    resolution: {integrity: sha512-a/WlXyGkp6F12b01sTarENpxbmlRgPHFyR1Xv2bsSjQBm5dcOtd16ONb40/vOqck8L99NHpI+C9MXQ+SZ8f+yw==}
+    peerDependencies:
+      mobx: ^4.13.1 || ^5.13.1
+
+  mobx@5.15.7:
+    resolution: {integrity: sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw==}
+
+  mockjs@1.1.0:
+    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
+    hasBin: true
+
+  mousetrap@1.6.5:
+    resolution: {integrity: sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  mute-stream@1.0.0:
+    resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanomatch@1.2.13:
+    resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
+    engines: {node: '>=0.10.0'}
+
+  nanopop@2.4.2:
+    resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  nice-try@1.0.5:
+    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
+
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
+  node-html-parser@5.4.2:
+    resolution: {integrity: sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==}
+
+  node-int64@0.4.0:
+    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+
+  normalize-package-data@3.0.3:
+    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
+    engines: {node: '>=10'}
+
+  normalize-package-data@6.0.2:
+    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
+    engines: {node: ^16.14.0 || >=18.0.0}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  npm-run-all@4.1.5:
+    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
+    engines: {node: '>= 4'}
+    hasBin: true
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-copy@0.1.0:
+    resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object-visit@1.0.1:
+    resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
+    engines: {node: '>=0.10.0'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.pick@1.3.0:
+    resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==}
+    engines: {node: '>=0.10.0'}
+
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  oxc-parser@0.131.0:
+    resolution: {integrity: sha512-SJ3/7ZPbgie8dr5Z9BI/M51zZbpXba+hRSG0MDzVwMW5CRQg2fjYE0jHGlLX4eeiibGgC/mzoDFKSDHwVZEHRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-walker@0.7.0:
+    resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
+    peerDependencies:
+      oxc-parser: '>=0.98.0'
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  param-case@3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@4.0.0:
+    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
+    engines: {node: '>=4'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-json@7.1.1:
+    resolution: {integrity: sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==}
+    engines: {node: '>=16'}
+
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
+  parse-passwd@1.0.0:
+    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
+    engines: {node: '>=0.10.0'}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
+
+  parse5-parser-stream@7.1.2:
+    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+
+  pascalcase@0.1.1:
+    resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
+    engines: {node: '>=0.10.0'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@2.0.1:
+    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
+    engines: {node: '>=4'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-scurry@2.0.1:
+    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
+    engines: {node: 20 || >=22}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-type@3.0.0:
+    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
+    engines: {node: '>=4'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
+
+  perfect-scrollbar@1.5.6:
+    resolution: {integrity: sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pidtree@0.3.1:
+    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  pify@3.0.0:
+    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
+    engines: {node: '>=4'}
+
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pinia@2.1.7:
+    resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
+  pinyin-pro@3.28.0:
+    resolution: {integrity: sha512-mMRty6RisoyYNphJrTo3pnvp3w8OMZBrXm9YSWkxhAfxKj1KZk2y8T2PDIZlDDRsvZ0No+Hz6FI4sZpA6Ey25g==}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+
+  posix-character-classes@0.1.1:
+    resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
+    engines: {node: '>=0.10.0'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-html@1.8.1:
+    resolution: {integrity: sha512-OLF6P7qctfAWayOhLpcVnTGqVeJzu2W3WpIYelfz2+JV5oGxfkcEvweN9U4XpeqE0P98dcD9ssusGwlF0TK0uQ==}
+    engines: {node: ^12 || >=14}
+
+  postcss-less@6.0.0:
+    resolution: {integrity: sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      postcss: ^8.3.5
+
+  postcss-prefix-selector@1.16.1:
+    resolution: {integrity: sha512-Umxu+FvKMwlY6TyDzGFoSUnzW+NOfMBLyC1tAkIjgX+Z/qGspJeRjVC903D7mx7TuBpJlwti2ibXtWuA7fKMeQ==}
+    peerDependencies:
+      postcss: '>4 <9'
+
+  postcss-resolve-nested-selector@0.1.6:
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
+
+  postcss-safe-parser@6.0.0:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss-sorting@8.0.2:
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    peerDependencies:
+      postcss: ^8.4.20
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@5.2.18:
+    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
+    engines: {node: '>=0.12'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  posthtml-parser@0.2.1:
+    resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
+
+  posthtml-rename-id@1.0.12:
+    resolution: {integrity: sha512-UKXf9OF/no8WZo9edRzvuMenb6AD5hDLzIepJW+a4oJT+T/Lx7vfMYWT4aWlGNQh0WMhnUx1ipN9OkZ9q+ddEw==}
+
+  posthtml-render@1.4.0:
+    resolution: {integrity: sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==}
+    engines: {node: '>=10'}
+
+  posthtml-svg-mode@1.0.3:
+    resolution: {integrity: sha512-hEqw9NHZ9YgJ2/0G7CECOeuLQKZi8HjWLkBaSVtOWjygQ9ZD8P7tqeowYs7WrFdKsWEKG7o+IlsPY8jrr0CJpQ==}
+
+  posthtml@0.9.2:
+    resolution: {integrity: sha512-spBB5sgC4cv2YcW03f/IAUN1pgDJWNWD8FzkyY4mArLUMJW+KlQhlmUdKAHQuPfb00Jl5xIfImeOsf6YL8QK7Q==}
+    engines: {node: '>=0.10.0'}
+
+  preact@10.28.2:
+    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-linter-helpers@1.0.1:
+    resolution: {integrity: sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@3.8.0:
+    resolution: {integrity: sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-bytes@5.6.0:
+    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
+    engines: {node: '>=6'}
+
+  pretty-bytes@6.1.1:
+    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
+  pretty-quick@4.2.2:
+    resolution: {integrity: sha512-uAh96tBW1SsD34VhhDmWuEmqbpfYc/B3j++5MC/6b3Cb8Ow7NJsvKFhg0eoGu2xXX+o9RkahkTK6sUdd8E7g5w==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      prettier: ^3.0.0
+
+  print-js@1.6.0:
+    resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==}
+
+  promise-polyfill@7.1.2:
+    resolution: {integrity: sha512-FuEc12/eKqqoRYIGBrUptCBRhobL19PS2U31vMNTfyck1FxPyMfgsXyW4Mav85y/ZN1hop3hOwRlUDok23oYfQ==}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
+  qified@0.6.0:
+    resolution: {integrity: sha512-tsSGN1x3h569ZSU1u6diwhltLyfUWDp3YbFHedapTmpBl0B3P6U3+Qptg7xu+v+1io1EwhdPyyRHYbEw0KN2FA==}
+    engines: {node: '>=20'}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  qs@6.14.1:
+    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
+    engines: {node: '>=0.6'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  quansync@1.0.0:
+    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
+
+  query-string@4.3.4:
+    resolution: {integrity: sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==}
+    engines: {node: '>=0.10.0'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-lru@4.0.1:
+    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
+    engines: {node: '>=8'}
+
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  rangy@1.3.2:
+    resolution: {integrity: sha512-fS1C4MOyk8T+ZJZdLcgrukPWxkyDXa+Hd2Kj+Zg4wIK71yrWgmjzHubzPMY1G+WD9EgGxMp3fIL0zQ1ickmSWA==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  read-pkg-up@10.1.0:
+    resolution: {integrity: sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==}
+    engines: {node: '>=16'}
+
+  read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
+
+  read-pkg@3.0.0:
+    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
+    engines: {node: '>=4'}
+
+  read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
+
+  read-pkg@8.1.0:
+    resolution: {integrity: sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==}
+    engines: {node: '>=16'}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regenerate-unicode-properties@10.2.2:
+    resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
+    engines: {node: '>=4'}
+
+  regenerate@1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+
+  regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+
+  regex-not@1.0.2:
+    resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
+    engines: {node: '>=0.10.0'}
+
+  regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  regexpu-core@6.4.0:
+    resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
+    engines: {node: '>=4'}
+
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
+
+  regjsparser@0.13.0:
+    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
+    hasBin: true
+
+  relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+
+  repeat-element@1.1.4:
+    resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
+    engines: {node: '>=0.10.0'}
+
+  repeat-string@1.6.1:
+    resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
+    engines: {node: '>=0.10'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
+  resolve-cwd@3.0.0:
+    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
+    engines: {node: '>=8'}
+
+  resolve-dir@1.0.1:
+    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-global@1.0.0:
+    resolution: {integrity: sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve-url@0.2.1:
+    resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
+    deprecated: https://github.com/lydell/resolve-url#deprecated
+
+  resolve.exports@2.0.3:
+    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
+    engines: {node: '>=10'}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  ret@0.1.15:
+    resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
+    engines: {node: '>=0.12'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
+    hasBin: true
+
+  rollup-plugin-purge-icons@0.10.0:
+    resolution: {integrity: sha512-GD2ftg4L9G/sagIhtCmBn5vdyzePOisniythubpbywP0Q3ix9rZuDeFvgXTPemOsc22pvH7t22ryYQIl0rwGog==}
+    engines: {node: '>= 12'}
+
+  rollup-plugin-visualizer@5.14.0:
+    resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  rollup@2.79.2:
+    resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  rollup@4.52.5:
+    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-async@3.0.0:
+    resolution: {integrity: sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex@1.1.0:
+    resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sax@1.4.4:
+    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+    engines: {node: '>=11.0.0'}
+
+  scroll-into-view-if-needed@2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+
+  secure-compare@3.0.1:
+    resolution: {integrity: sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==}
+
+  select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  set-value@2.0.1:
+    resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
+    engines: {node: '>=0.10.0'}
+
+  shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+
+  shebang-command@1.2.0:
+    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
+    engines: {node: '>=0.10.0'}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@1.0.0:
+    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
+    engines: {node: '>=0.10.0'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+
+  showdown@2.1.0:
+    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
+    hasBin: true
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
+  smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+
+  snapdragon-node@2.1.1:
+    resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
+    engines: {node: '>=0.10.0'}
+
+  snapdragon-util@3.0.1:
+    resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==}
+    engines: {node: '>=0.10.0'}
+
+  snapdragon@0.8.2:
+    resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
+    engines: {node: '>=0.10.0'}
+
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
+  sortablejs@1.15.6:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-resolve@0.5.3:
+    resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+
+  source-map-support@0.5.13:
+    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map-url@0.4.1:
+    resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
+    deprecated: See https://github.com/lydell/source-map-url#deprecated
+
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  source-map@0.8.0-beta.0:
+    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
+    engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
+
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
+
+  split-string@3.1.0:
+    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
+    engines: {node: '>=0.10.0'}
+
+  split2@3.2.2:
+    resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  stable@0.1.8:
+    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
+    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
+
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
+  static-extend@0.1.2:
+    resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
+    engines: {node: '>=0.10.0'}
+
+  statuses@1.5.0:
+    resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
+    engines: {node: '>= 0.6'}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  strict-uri-encode@1.1.0:
+    resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
+    engines: {node: '>=0.10.0'}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-length@4.0.2:
+    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
+    engines: {node: '>=10'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.padend@3.1.6:
+    resolution: {integrity: sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-object@3.3.0:
+    resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
+    engines: {node: '>=4'}
+
+  strip-ansi@3.0.1:
+    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
+    engines: {node: '>=0.10.0'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-bom@4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+
+  strip-comments@2.0.1:
+    resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
+    engines: {node: '>=10'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  stylelint-config-html@1.1.0:
+    resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-prettier@9.0.5:
+    resolution: {integrity: sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    peerDependencies:
+      stylelint: '>= 11.x < 15'
+
+  stylelint-config-recommended-vue@1.6.1:
+    resolution: {integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-recommended@14.0.1:
+    resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-config-standard@36.0.1:
+    resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-order@6.0.4:
+    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
+    peerDependencies:
+      stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
+
+  stylelint@16.26.1:
+    resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
+  supports-color@2.0.0:
+    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
+    engines: {node: '>=0.8.0'}
+
+  supports-color@3.2.3:
+    resolution: {integrity: sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==}
+    engines: {node: '>=0.8.0'}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svg-baker@1.7.0:
+    resolution: {integrity: sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==}
+
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
+  svgo@2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  swagger-ui-dist@5.31.0:
+    resolution: {integrity: sha512-zSUTIck02fSga6rc0RZP3b7J7wgHXwLea8ZjgLA3Vgnb8QeOl3Wou2/j5QkzSGeoz6HusP/coYuJl33aQxQZpg==}
+
+  synckit@0.11.12:
+    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
+  temp-dir@2.0.0:
+    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
+    engines: {node: '>=8'}
+
+  temp-dir@3.0.0:
+    resolution: {integrity: sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==}
+    engines: {node: '>=14.16'}
+
+  tempfile@5.0.0:
+    resolution: {integrity: sha512-bX655WZI/F7EoTDw9JvQURqAXiPHi8o8+yFxPF2lWYyz1aHnmMRuXWqL6YB6GmeO0o4DIYWHLgGNi/X64T+X4Q==}
+    engines: {node: '>=14.18'}
+
+  tempy@0.6.0:
+    resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
+    engines: {node: '>=10'}
+
+  terser@5.46.0:
+    resolution: {integrity: sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
+  text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+
+  text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
+  through2@4.0.2:
+    resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tinymce@5.10.9:
+    resolution: {integrity: sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==}
+
+  tinymce@6.6.2:
+    resolution: {integrity: sha512-ShoaznNP3qI8dPtEnYt3ByhAJfMhzIY1K04CoFu1IPDeAxmAZCUJLgfiplo8etP4wN8zrBIxHEqpwYYb2IllOQ==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  tmpl@1.0.5:
+    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+
+  to-object-path@0.3.0:
+    resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
+    engines: {node: '>=0.10.0'}
+
+  to-regex-range@2.1.1:
+    resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==}
+    engines: {node: '>=0.10.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  to-regex@3.0.2:
+    resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==}
+    engines: {node: '>=0.10.0'}
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  tr46@1.0.1:
+    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+
+  traverse@0.6.11:
+    resolution: {integrity: sha512-vxXDZg8/+p3gblxB6BhhG5yWVn1kGRlaL8O78UDXc3wRnPizB5g83dcvWV1jpDMIPnjZjOFuxlMmE82XJ4407w==}
+    engines: {node: '>= 0.4'}
+
+  trim-newlines@3.0.1:
+    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
+    engines: {node: '>=8'}
+
+  ts-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  ts-jest@29.4.6:
+    resolution: {integrity: sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@jest/transform': ^29.0.0 || ^30.0.0
+      '@jest/types': ^29.0.0 || ^30.0.0
+      babel-jest: ^29.0.0 || ^30.0.0
+      esbuild: '*'
+      jest: ^29.0.0 || ^30.0.0
+      jest-util: ^29.0.0 || ^30.0.0
+      typescript: '>=4.3 <6'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@jest/transform':
+        optional: true
+      '@jest/types':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+      jest-util:
+        optional: true
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsutils@3.21.0:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+
+  type-fest@0.16.0:
+    resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
+    engines: {node: '>=10'}
+
+  type-fest@0.18.1:
+    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
+    engines: {node: '>=10'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+
+  type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+
+  type-fest@3.13.1:
+    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
+    engines: {node: '>=14.16'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-level-regexp@0.1.17:
+    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typedarray.prototype.slice@1.0.5:
+    resolution: {integrity: sha512-q7QNVDGTdl702bVFiI5eY4l/HkgCM6at9KhcFbgUAzezHFbOVy4+0O/lCjsABEQwbZPravVfBIiBVGo89yzHFg==}
+    engines: {node: '>= 0.4'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
+
+  unconfig@7.5.0:
+    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici@7.18.2:
+    resolution: {integrity: sha512-y+8YjDFzWdQlSE9N5nzKMT3g4a5UBX1HKowfdXh0uvAnTaqqwqB92Jt4UXBAeKekDs5IaDKyJFR4X1gYVCgXcw==}
+    engines: {node: '>=20.18.1'}
+
+  unicode-canonical-property-names-ecmascript@2.0.1:
+    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-ecmascript@2.0.0:
+    resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-value-ecmascript@2.2.1:
+    resolution: {integrity: sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==}
+    engines: {node: '>=4'}
+
+  unicode-property-aliases-ecmascript@2.2.0:
+    resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
+    engines: {node: '>=4'}
+
+  union-value@1.0.1:
+    resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
+    engines: {node: '>=0.10.0'}
+
+  union@0.5.0:
+    resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==}
+    engines: {node: '>= 0.8.0'}
+
+  unique-string@2.0.0:
+    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
+    engines: {node: '>=8'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unocss@66.7.0:
+    resolution: {integrity: sha512-dVfkL7SQv3fOiZdqeRX1PdpQqXlB+wHcEQjVR0D/2nXsuqmUqTVnX3EUUWFjqVR83Z51zQ0EyVgym8ooDfcVvw==}
+    peerDependencies:
+      '@unocss/astro': 66.7.0
+      '@unocss/postcss': 66.7.0
+      '@unocss/webpack': 66.7.0
+    peerDependenciesMeta:
+      '@unocss/astro':
+        optional: true
+      '@unocss/postcss':
+        optional: true
+      '@unocss/webpack':
+        optional: true
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unplugin-icons@0.22.0:
+    resolution: {integrity: sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue-components@0.24.1:
+    resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@1.16.1:
+    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
+    engines: {node: '>=14.0.0'}
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  unset-value@1.0.0:
+    resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
+    engines: {node: '>=0.10.0'}
+
+  upath@1.2.0:
+    resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
+    engines: {node: '>=4'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  urix@0.1.0:
+    resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
+    deprecated: Please see https://github.com/lydell/urix#deprecated
+
+  url-join@4.0.1:
+    resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
+
+  use@3.1.1:
+    resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
+    engines: {node: '>=0.10.0'}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  v8-to-istanbul@9.3.0:
+    resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
+    engines: {node: '>=10.12.0'}
+
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
+  vanilla-picker@2.12.3:
+    resolution: {integrity: sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vditor@3.11.2:
+    resolution: {integrity: sha512-8QguQQUPWbBFocnfQmWjz4jiykQnvsmCuhOomGIVVK7vc+dQq2h8w9qQQuEjUTZpnZT5fEdYbj4aLr1NGdAZaA==}
+
+  vite-plugin-compression@0.5.1:
+    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-html@3.2.2:
+    resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-mkcert@1.17.9:
+    resolution: {integrity: sha512-SwI7yqp2Cq4r2XItarnHRCj2uzHPqevbxFNMLpyN+LDXd5w1vmZeM4l5X/wCZoP4mjPQYN+9+4kmE6e3nPO5fg==}
+    engines: {node: '>=v16.7.0'}
+    peerDependencies:
+      vite: '>=3'
+
+  vite-plugin-mock@2.9.8:
+    resolution: {integrity: sha512-YTQM5Sn7t+/DNOwTkr+W26QGTCk1PrDkhGHslTJ90lIPJhJtDTwuSkEYMAuLP9TcVQ/qExTFx/x/GE3kxJ05sw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      mockjs: '>=1.1.0'
+      vite: '>=2.0.0'
+
+  vite-plugin-optimize-persist@0.1.2:
+    resolution: {integrity: sha512-H/Ebn2kZO8PvwUF08SsT5K5xMJNCWKoGX71+e9/ER3yNj7GHiFjNQlvGg5ih/zEx09MZ9m7WCxOwmEKbeIVzww==}
+    peerDependencies:
+      vite: ^2.0.0
+      vite-plugin-package-config: ^0.1.0
+
+  vite-plugin-package-config@0.1.1:
+    resolution: {integrity: sha512-w9B3I8ZnqoyhlbzimXjXNk85imrMZgvI9m8f6j3zonK5IVA5KXzpT+PZOHlDz8lqh1vqvoEI1uhy+ZDoLAiA/w==}
+    peerDependencies:
+      vite: ^2.0.0
+
+  vite-plugin-purge-icons@0.10.0:
+    resolution: {integrity: sha512-4fMJKQuBu9lAPJWjqGEytRaxty1pP9bWgQLA68dwbbaCXu6NBrOUb/3kMaUc7TP09kerEk+qTriCk05OZXpjwA==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      vite: '>=2'
+
+  vite-plugin-pwa@1.2.0:
+    resolution: {integrity: sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@vite-pwa/assets-generator': ^1.0.0
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      workbox-build: ^7.4.0
+      workbox-window: ^7.4.0
+    peerDependenciesMeta:
+      '@vite-pwa/assets-generator':
+        optional: true
+
+  vite-plugin-qiankun@1.0.15:
+    resolution: {integrity: sha512-0QB0Wr8Eu/LGcuJAfuNXDb7BAFDszo3GCxq4bzgXdSFAlK425u1/UGMxaDEBVA1uPFrLsZPzig83Ufdfl6J45A==}
+    peerDependencies:
+      typescript: '>=4'
+      vite: '>=2'
+
+  vite-plugin-svg-icons@2.0.1:
+    resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-vue-setup-extend-plus@0.1.0:
+    resolution: {integrity: sha512-pa27KIsHIBvBMv4xz9uB3UCfAuP2tr7PLlFhCS9vw+aXd326LEHsvhqd3hCQDOR5MjlQVyQH6vwuGr3u+KRiiw==}
+
+  vite@7.3.5:
+    resolution: {integrity: sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vue-color@3.3.3:
+    resolution: {integrity: sha512-FW/9JXFbCHfFEGv6SFUuK/SE+K61pHoL7lxJMQXcU+Zt7s36Ui1/tMDc3vzGXPrxxRBB+NSzFt+71nEaUJ29dQ==}
+    peerDependencies:
+      vue: '>=2.7.0 <4.0.0'
+
+  vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+
+  vue-cropper@0.6.5:
+    resolution: {integrity: sha512-lSvY6IpeA/Tv/iPZ/FOkMHVRBPSlm7t57nuHEZFBMRNOH8ElvfqVlnHGDOAMlvPhh9gHiddiQoASS+fY0MFX0g==}
+
+  vue-cropperjs@5.0.0:
+    resolution: {integrity: sha512-RhnC8O33uRZNkn74aiHZwNHnBJOXWlS4P6gsRI0lw4cZlWjKSCywZI9oSI9POlIPI6OYv30jvnHMXGch85tw7w==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  vue-grid-layout-v3@3.1.2:
+    resolution: {integrity: sha512-4VB6pel2OklFNnFSUVg4wXwx/fKuKKvnhleLyscwk5ay7aEFk+HghcVKbComg+EgMvjuPzZ7hgIES3FlxuVK6w==}
+
+  vue-i18n@9.14.5:
+    resolution: {integrity: sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==}
+    engines: {node: '>= 16'}
+    deprecated: v9 and v10 no longer supported. please migrate to v11. about maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-infinite-scroll@2.0.2:
+    resolution: {integrity: sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==}
+
+  vue-print-nb-jeecg@1.0.13:
+    resolution: {integrity: sha512-8Yv8OCJQyFEI6hUfAKYWHa6LvAQi+xYnwFvxd/WXsI6exHhBfde26iyHyI42QCZpH6zURUq0oA0SAk8EpYiRng==}
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+
+  vue-tsc@1.8.27:
+    resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+
+  vue-types@3.0.2:
+    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
+    engines: {node: '>=10.15.0'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-types@5.1.3:
+    resolution: {integrity: sha512-3Wy6QcZl0VusCCHX3vYrWSILFlrOB2EQDoySnuYmASM5cUp1FivJGfkS5lp1CutDgyRb41g32r/1QCmiBj5i1Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      vue: ^2.0.0 || ^3.0.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
+  vue@3.5.27:
+    resolution: {integrity: sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
+  vxe-pc-ui@4.6.12:
+    resolution: {integrity: sha512-57sRB/ksP8ip4l0hPcph5qXt/qGlrCjO2/Y6ZL4sHkGdb+CBWgbzvUPcq3GYgSSPdZg+Ae++UcGqgRGMZss+RQ==}
+
+  vxe-table-plugin-antd@4.0.8:
+    resolution: {integrity: sha512-/ZGw8Iz0R6YfDnf7FL3A0VZpQnxEjRnfE0DW4dQTuLnFCP6UmQqQuKVWU9Vj7vPGM3x3p8rwAVHtU8YtMCXZqQ==}
+    peerDependencies:
+      vxe-table: ^4.5.0
+
+  vxe-table@4.13.31:
+    resolution: {integrity: sha512-ibSM7jXYwJyY+eqXoRy/yXEVLENGFzL96cOEwtnFjBYbbaZV6/ptlM3tsyewGFBCUo5AtIyM+98hswxfjyXxMA==}
+
+  walker@1.0.8:
+    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webidl-conversions@4.0.2:
+    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  whatwg-url@7.1.0:
+    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which-typed-array@1.1.20:
+    resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==}
+    engines: {node: '>= 0.4'}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  workbox-background-sync@7.4.0:
+    resolution: {integrity: sha512-8CB9OxKAgKZKyNMwfGZ1XESx89GryWTfI+V5yEj8sHjFH8MFelUwYXEyldEK6M6oKMmn807GoJFUEA1sC4XS9w==}
+
+  workbox-broadcast-update@7.4.0:
+    resolution: {integrity: sha512-+eZQwoktlvo62cI0b+QBr40v5XjighxPq3Fzo9AWMiAosmpG5gxRHgTbGGhaJv/q/MFVxwFNGh/UwHZ/8K88lA==}
+
+  workbox-build@7.4.0:
+    resolution: {integrity: sha512-Ntk1pWb0caOFIvwz/hfgrov/OJ45wPEhI5PbTywQcYjyZiVhT3UrwwUPl6TRYbTm4moaFYithYnl1lvZ8UjxcA==}
+    engines: {node: '>=20.0.0'}
+
+  workbox-cacheable-response@7.4.0:
+    resolution: {integrity: sha512-0Fb8795zg/x23ISFkAc7lbWes6vbw34DGFIMw31cwuHPgDEC/5EYm6m/ZkylLX0EnEbbOyOCLjKgFS/Z5g0HeQ==}
+
+  workbox-core@7.4.0:
+    resolution: {integrity: sha512-6BMfd8tYEnN4baG4emG9U0hdXM4gGuDU3ectXuVHnj71vwxTFI7WOpQJC4siTOlVtGqCUtj0ZQNsrvi6kZZTAQ==}
+
+  workbox-expiration@7.4.0:
+    resolution: {integrity: sha512-V50p4BxYhtA80eOvulu8xVfPBgZbkxJ1Jr8UUn0rvqjGhLDqKNtfrDfjJKnLz2U8fO2xGQJTx/SKXNTzHOjnHw==}
+
+  workbox-google-analytics@7.4.0:
+    resolution: {integrity: sha512-MVPXQslRF6YHkzGoFw1A4GIB8GrKym/A5+jYDUSL+AeJw4ytQGrozYdiZqUW1TPQHW8isBCBtyFJergUXyNoWQ==}
+
+  workbox-navigation-preload@7.4.0:
+    resolution: {integrity: sha512-etzftSgdQfjMcfPgbfaZCfM2QuR1P+4o8uCA2s4rf3chtKTq/Om7g/qvEOcZkG6v7JZOSOxVYQiOu6PbAZgU6w==}
+
+  workbox-precaching@7.4.0:
+    resolution: {integrity: sha512-VQs37T6jDqf1rTxUJZXRl3yjZMf5JX/vDPhmx2CPgDDKXATzEoqyRqhYnRoxl6Kr0rqaQlp32i9rtG5zTzIlNg==}
+
+  workbox-range-requests@7.4.0:
+    resolution: {integrity: sha512-3Vq854ZNuP6Y0KZOQWLaLC9FfM7ZaE+iuQl4VhADXybwzr4z/sMmnLgTeUZLq5PaDlcJBxYXQ3U91V7dwAIfvw==}
+
+  workbox-recipes@7.4.0:
+    resolution: {integrity: sha512-kOkWvsAn4H8GvAkwfJTbwINdv4voFoiE9hbezgB1sb/0NLyTG4rE7l6LvS8lLk5QIRIto+DjXLuAuG3Vmt3cxQ==}
+
+  workbox-routing@7.4.0:
+    resolution: {integrity: sha512-C/ooj5uBWYAhAqwmU8HYQJdOjjDKBp9MzTQ+otpMmd+q0eF59K+NuXUek34wbL0RFrIXe/KKT+tUWcZcBqxbHQ==}
+
+  workbox-strategies@7.4.0:
+    resolution: {integrity: sha512-T4hVqIi5A4mHi92+5EppMX3cLaVywDp8nsyUgJhOZxcfSV/eQofcOA6/EMo5rnTNmNTpw0rUgjAI6LaVullPpg==}
+
+  workbox-streams@7.4.0:
+    resolution: {integrity: sha512-QHPBQrey7hQbnTs5GrEVoWz7RhHJXnPT+12qqWM378orDMo5VMJLCkCM1cnCk+8Eq92lccx/VgRZ7WAzZWbSLg==}
+
+  workbox-sw@7.4.0:
+    resolution: {integrity: sha512-ltU+Kr3qWR6BtbdlMnCjobZKzeV1hN+S6UvDywBrwM19TTyqA03X66dzw1tEIdJvQ4lYKkBFox6IAEhoSEZ8Xw==}
+
+  workbox-window@7.4.0:
+    resolution: {integrity: sha512-/bIYdBLAVsNR3v7gYGaV4pQW3M3kEPx5E8vDxGvxo6khTrGtSSCS7QiFKv9ogzBgZiy0OXLP9zO28U/1nF1mfw==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@4.0.2:
+    resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  xe-utils@3.5.26:
+    resolution: {integrity: sha512-u9R7RqWDumamToEelrCv2nVA2PBJSPPUubvmiMcuHeFxwbYeBsouoi/opejmr7AdPlSj92FifF7IKFzFrczU7w==}
+
+  xe-utils@3.8.4:
+    resolution: {integrity: sha512-1X5k3nUcMatNo+99fZsHFrZ/WW4k4E6tT1ODO6wRncXOdq10QfVaqc70mFwOrHE/P1W8hDhbrnWXxSHwWY3rFQ==}
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xss@1.0.15:
+    resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==}
+    engines: {node: '>= 0.10.0'}
+    hasBin: true
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+    engines: {node: '>= 14'}
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
+snapshots:
+
+  '@ant-design/colors@6.0.0':
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+
+  '@ant-design/colors@7.2.1':
+    dependencies:
+      '@ant-design/fast-color': 2.0.6
+
+  '@ant-design/fast-color@2.0.6':
+    dependencies:
+      '@babel/runtime': 7.28.6
+
+  '@ant-design/icons-svg@4.4.2': {}
+
+  '@ant-design/icons-vue@7.0.1(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.4.2
+      vue: 3.5.27(typescript@5.9.3)
+
+  '@antfu/install-pkg@0.5.0':
+    dependencies:
+      package-manager-detector: 0.2.11
+      tinyexec: 0.3.2
+
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.2
+
+  '@antfu/utils@0.7.10': {}
+
+  '@antfu/utils@8.1.1': {}
+
+  '@antv/hierarchy@0.6.14': {}
+
+  '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
+    dependencies:
+      ajv: 8.17.1
+      json-schema: 0.4.0
+      jsonpointer: 5.0.1
+      leven: 3.1.0
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.7
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      regexpu-core: 6.4.0
+      semver: 6.3.1
+
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      debug: 4.4.3
+      lodash.debounce: 4.0.8
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-wrap-function': 7.28.6
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helper-wrap-function@7.28.6':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.28.6':
+    dependencies:
+      '@babel/types': 7.28.6
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-async-generator-functions@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-async-to-generator@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-block-scoping@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-class-properties@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-class-static-block@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-classes@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-computed-properties@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/template': 7.29.7
+
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-dotall-regex@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-json-strings@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-numeric-separator@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-object-rest-spread@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-optional-catch-binding@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-private-methods@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-property-in-object@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-regenerator@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-regexp-modifiers@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-spread@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-property-regex@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-sets-regex@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/preset-env@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-assertions': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-computed-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-dotall-regex': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-explicit-resource-management': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-json-strings': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-numeric-separator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-property-in-object': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-regenerator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-regexp-modifiers': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-spread': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.28.6(@babel/core@7.29.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.29.7)
+      core-js-compat: 3.47.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/types': 7.29.7
+      esutils: 2.0.3
+
+  '@babel/runtime@7.28.6': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@cacheable/memory@2.0.7':
+    dependencies:
+      '@cacheable/utils': 2.3.3
+      '@keyv/bigmap': 1.3.0(keyv@5.5.5)
+      hookified: 1.15.0
+      keyv: 5.5.5
+
+  '@cacheable/utils@2.3.3':
+    dependencies:
+      hashery: 1.4.0
+      keyv: 5.5.5
+
+  '@commitlint/cli@18.6.1(@types/node@20.19.30)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/format': 18.6.1
+      '@commitlint/lint': 18.6.1
+      '@commitlint/load': 18.6.1(@types/node@20.19.30)(typescript@5.9.3)
+      '@commitlint/read': 18.6.1
+      '@commitlint/types': 18.6.1
+      execa: 5.1.1
+      lodash.isfunction: 3.0.9
+      resolve-from: 5.0.0
+      resolve-global: 1.0.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/config-conventional@18.6.3':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      conventional-changelog-conventionalcommits: 7.0.2
+
+  '@commitlint/config-validator@18.6.1':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      ajv: 8.17.1
+
+  '@commitlint/config-validator@20.3.1':
+    dependencies:
+      '@commitlint/types': 20.3.1
+      ajv: 8.17.1
+    optional: true
+
+  '@commitlint/ensure@18.6.1':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+
+  '@commitlint/execute-rule@18.6.1': {}
+
+  '@commitlint/execute-rule@20.0.0':
+    optional: true
+
+  '@commitlint/format@18.6.1':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      chalk: 4.1.2
+
+  '@commitlint/is-ignored@18.6.1':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      semver: 7.6.0
+
+  '@commitlint/lint@18.6.1':
+    dependencies:
+      '@commitlint/is-ignored': 18.6.1
+      '@commitlint/parse': 18.6.1
+      '@commitlint/rules': 18.6.1
+      '@commitlint/types': 18.6.1
+
+  '@commitlint/load@18.6.1(@types/node@20.19.30)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/config-validator': 18.6.1
+      '@commitlint/execute-rule': 18.6.1
+      '@commitlint/resolve-extends': 18.6.1
+      '@commitlint/types': 18.6.1
+      chalk: 4.1.2
+      cosmiconfig: 8.3.6(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 5.1.0(@types/node@20.19.30)(cosmiconfig@8.3.6(typescript@5.9.3))(typescript@5.9.3)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/load@20.3.1(@types/node@20.19.30)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/config-validator': 20.3.1
+      '@commitlint/execute-rule': 20.0.0
+      '@commitlint/resolve-extends': 20.3.1
+      '@commitlint/types': 20.3.1
+      chalk: 5.6.2
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@20.19.30)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+    optional: true
+
+  '@commitlint/message@18.6.1': {}
+
+  '@commitlint/parse@18.6.1':
+    dependencies:
+      '@commitlint/types': 18.6.1
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+
+  '@commitlint/read@18.6.1':
+    dependencies:
+      '@commitlint/top-level': 18.6.1
+      '@commitlint/types': 18.6.1
+      git-raw-commits: 2.0.11
+      minimist: 1.2.8
+
+  '@commitlint/resolve-extends@18.6.1':
+    dependencies:
+      '@commitlint/config-validator': 18.6.1
+      '@commitlint/types': 18.6.1
+      import-fresh: 3.3.1
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+      resolve-global: 1.0.0
+
+  '@commitlint/resolve-extends@20.3.1':
+    dependencies:
+      '@commitlint/config-validator': 20.3.1
+      '@commitlint/types': 20.3.1
+      global-directory: 4.0.1
+      import-meta-resolve: 4.2.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+    optional: true
+
+  '@commitlint/rules@18.6.1':
+    dependencies:
+      '@commitlint/ensure': 18.6.1
+      '@commitlint/message': 18.6.1
+      '@commitlint/to-lines': 18.6.1
+      '@commitlint/types': 18.6.1
+      execa: 5.1.1
+
+  '@commitlint/to-lines@18.6.1': {}
+
+  '@commitlint/top-level@18.6.1':
+    dependencies:
+      find-up: 5.0.0
+
+  '@commitlint/types@18.6.1':
+    dependencies:
+      chalk: 4.1.2
+
+  '@commitlint/types@20.3.1':
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.2
+      chalk: 5.6.2
+    optional: true
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.25': {}
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/unitless@0.8.1': {}
+
+  '@esbuild/aix-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/android-arm@0.27.2':
+    optional: true
+
+  '@esbuild/android-x64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/linux-loong64@0.14.54':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.2':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.2':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.2':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.2':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.2':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.2':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.2':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@8.57.1)':
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/eslintrc@2.1.4':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@8.57.1': {}
+
+  '@humanwhocodes/config-array@0.13.0':
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/object-schema@2.0.3': {}
+
+  '@hutson/parse-repository-url@5.0.0': {}
+
+  '@iconify/iconify@2.1.2':
+    dependencies:
+      cross-fetch: 3.2.0
+    transitivePeerDependencies:
+      - encoding
+
+  '@iconify/iconify@3.1.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/json@2.2.430':
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 2.0.3
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/utils@3.1.3':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
+
+  '@inquirer/external-editor@1.0.3(@types/node@20.19.30)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.2
+    optionalDependencies:
+      '@types/node': 20.19.30
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@interactjs/actions@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+
+  '@interactjs/auto-scroll@1.10.27(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+
+  '@interactjs/auto-start@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+
+  '@interactjs/core@1.10.27(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/dev-tools@1.10.27(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.9.3)':
+    dependencies:
+      '@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+      vue: 3.5.27(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@interactjs/interact@1.10.27':
+    dependencies:
+      '@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/utils': 1.10.27
+
+  '@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/snappers': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+
+  '@interactjs/snappers@1.10.27(@interactjs/utils@1.10.27)':
+    dependencies:
+      '@interactjs/utils': 1.10.27
+    optionalDependencies:
+      '@interactjs/interact': 1.10.27
+
+  '@interactjs/utils@1.10.27': {}
+
+  '@intlify/core-base@9.14.5':
+    dependencies:
+      '@intlify/message-compiler': 9.14.5
+      '@intlify/shared': 9.14.5
+
+  '@intlify/message-compiler@9.14.5':
+    dependencies:
+      '@intlify/shared': 9.14.5
+      source-map-js: 1.2.1
+
+  '@intlify/shared@9.14.5': {}
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.2
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jeecg/aiflow@3.9.2-beta': {}
+
+  '@jest/console@29.7.0':
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+      slash: 3.0.0
+
+  '@jest/core@29.7.0(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))':
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  '@jest/environment@29.7.0':
+    dependencies:
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      jest-mock: 29.7.0
+
+  '@jest/expect-utils@29.7.0':
+    dependencies:
+      jest-get-type: 29.6.3
+
+  '@jest/expect@29.7.0':
+    dependencies:
+      expect: 29.7.0
+      jest-snapshot: 29.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/fake-timers@29.7.0':
+    dependencies:
+      '@jest/types': 29.6.3
+      '@sinonjs/fake-timers': 10.3.0
+      '@types/node': 20.19.30
+      jest-message-util: 29.7.0
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
+
+  '@jest/globals@29.7.0':
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/expect': 29.7.0
+      '@jest/types': 29.6.3
+      jest-mock: 29.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/reporters@29.7.0':
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      collect-v8-coverage: 1.0.3
+      exit: 0.1.2
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-instrument: 6.0.3
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.2.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+      jest-worker: 29.7.0
+      slash: 3.0.0
+      string-length: 4.0.2
+      strip-ansi: 6.0.1
+      v8-to-istanbul: 9.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/schemas@29.6.3':
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+
+  '@jest/source-map@29.6.3':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      callsites: 3.1.0
+      graceful-fs: 4.2.11
+
+  '@jest/test-result@29.7.0':
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/istanbul-lib-coverage': 2.0.6
+      collect-v8-coverage: 1.0.3
+
+  '@jest/test-sequencer@29.7.0':
+    dependencies:
+      '@jest/test-result': 29.7.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 29.7.0
+      slash: 3.0.0
+
+  '@jest/transform@29.7.0':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@jest/types': 29.6.3
+      '@jridgewell/trace-mapping': 0.3.31
+      babel-plugin-istanbul: 6.1.1
+      chalk: 4.1.2
+      convert-source-map: 2.0.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-util: 29.7.0
+      micromatch: 4.0.8
+      pirates: 4.0.7
+      slash: 3.0.0
+      write-file-atomic: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/types@29.6.3':
+    dependencies:
+      '@jest/schemas': 29.6.3
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.19.30
+      '@types/yargs': 17.0.35
+      chalk: 4.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@keyv/bigmap@1.3.0(keyv@5.5.5)':
+    dependencies:
+      hashery: 1.4.0
+      hookified: 1.15.0
+      keyv: 5.5.5
+
+  '@keyv/serialize@1.1.1': {}
+
+  '@logicflow/core@2.1.9':
+    dependencies:
+      classnames: 2.5.1
+      lodash-es: 4.17.22
+      mobx: 5.15.7
+      mobx-preact: 3.0.0(mobx@5.15.7)(preact@10.28.2)
+      mobx-utils: 5.6.2(mobx@5.15.7)
+      mousetrap: 1.6.5
+      preact: 10.28.2
+      uuid: 9.0.1
+
+  '@logicflow/extension@2.1.11(@logicflow/core@2.1.9)(@logicflow/vue-node-registry@1.1.10(@logicflow/core@2.1.9)(vue@3.5.27(typescript@5.9.3)))':
+    dependencies:
+      '@antv/hierarchy': 0.6.14
+      '@logicflow/core': 2.1.9
+      '@logicflow/vue-node-registry': 1.1.10(@logicflow/core@2.1.9)(vue@3.5.27(typescript@5.9.3))
+      classnames: 2.5.1
+      lodash-es: 4.17.22
+      medium-editor: 5.23.3
+      mobx: 5.15.7
+      preact: 10.28.2
+      rangy: 1.3.2
+      vanilla-picker: 2.12.3
+
+  '@logicflow/vue-node-registry@1.1.10(@logicflow/core@2.1.9)(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@logicflow/core': 2.1.9
+      lodash-es: 4.17.22
+      vue: 3.5.27(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@one-ini/wasm@0.1.1': {}
+
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
+    optional: true
+
+  '@oxc-project/types@0.131.0': {}
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@pkgr/core@0.2.9': {}
+
+  '@polka/url@1.0.0-next.29': {}
+
+  '@purge-icons/core@0.10.0':
+    dependencies:
+      '@iconify/iconify': 2.1.2
+      axios: 0.26.1(debug@4.4.3)
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@purge-icons/generated@0.10.0':
+    dependencies:
+      '@iconify/iconify': 3.1.1
+
+  '@quansync/fs@1.0.0':
+    dependencies:
+      quansync: 1.0.0
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@2.79.2)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
+      rollup: 2.79.2
+    optionalDependencies:
+      '@types/babel__core': 7.20.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rollup/plugin-node-resolve@15.3.1(rollup@2.79.2)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@2.79.2)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.11
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
+    dependencies:
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
+      magic-string: 0.25.9
+      rollup: 2.79.2
+
+  '@rollup/plugin-terser@0.4.4(rollup@2.79.2)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.46.0
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.79.2
+
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
+  '@rollup/pluginutils@5.3.0(rollup@2.79.2)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.52.5
+
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    optional: true
+
+  '@scarf/scarf@1.4.0': {}
+
+  '@simonwep/pickr@1.8.2':
+    dependencies:
+      core-js: 3.47.0
+      nanopop: 2.4.2
+
+  '@sinclair/typebox@0.27.8': {}
+
+  '@sinonjs/commons@3.0.1':
+    dependencies:
+      type-detect: 4.0.8
+
+  '@sinonjs/fake-timers@10.3.0':
+    dependencies:
+      '@sinonjs/commons': 3.0.1
+
+  '@sphinxxxx/color-conversion@2.2.2': {}
+
+  '@surma/rollup-plugin-off-main-thread@2.2.3':
+    dependencies:
+      ejs: 3.1.10
+      json5: 2.2.3
+      magic-string: 0.25.9
+      string.prototype.matchall: 4.0.12
+
+  '@tinymce/tinymce-vue@4.0.7(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      tinymce: 5.10.9
+      vue: 3.5.27(typescript@5.9.3)
+
+  '@traptitech/markdown-it-katex@3.6.0':
+    dependencies:
+      katex: 0.16.27
+
+  '@trysound/sax@0.2.0': {}
+
+  '@tsconfig/node10@1.0.12': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@tybys/wasm-util@0.10.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/codemirror@5.60.17':
+    dependencies:
+      '@types/tern': 0.23.9
+
+  '@types/conventional-commits-parser@5.0.2':
+    dependencies:
+      '@types/node': 20.19.30
+    optional: true
+
+  '@types/crypto-js@4.2.2': {}
+
+  '@types/estree@0.0.39': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/fs-extra@11.0.4':
+    dependencies:
+      '@types/jsonfile': 6.1.4
+      '@types/node': 20.19.30
+
+  '@types/graceful-fs@4.1.9':
+    dependencies:
+      '@types/node': 20.19.30
+
+  '@types/inquirer@9.0.9':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 7.8.2
+
+  '@types/intro.js@5.1.5': {}
+
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@29.5.14':
+    dependencies:
+      expect: 29.7.0
+      pretty-format: 29.7.0
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/jsonfile@6.1.4':
+    dependencies:
+      '@types/node': 20.19.30
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.23
+
+  '@types/lodash@4.17.23': {}
+
+  '@types/minimist@1.2.5': {}
+
+  '@types/mockjs@1.0.10': {}
+
+  '@types/node@20.19.30':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/nprogress@0.2.3': {}
+
+  '@types/pinyin@2.10.2': {}
+
+  '@types/qrcode@1.5.6':
+    dependencies:
+      '@types/node': 20.19.30
+
+  '@types/qs@6.14.0': {}
+
+  '@types/resolve@1.20.2': {}
+
+  '@types/semver@7.7.1': {}
+
+  '@types/showdown@2.0.6': {}
+
+  '@types/sortablejs@1.15.9': {}
+
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/svgo@2.6.4':
+    dependencies:
+      '@types/node': 20.19.30
+
+  '@types/tern@0.23.9':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 20.19.30
+
+  '@types/trusted-types@2.0.7': {}
+
+  '@types/web-bluetooth@0.0.20': {}
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@17.0.35':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
+  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.3
+      eslint: 8.57.1
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      semver: 7.7.3
+      ts-api-utils: 1.4.3(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.3
+      eslint: 8.57.1
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@5.62.0':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+
+  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 8.57.1
+      ts-api-utils: 1.4.3(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@5.62.0': {}
+
+  '@typescript-eslint/types@6.21.0': {}
+
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.4.3
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.7.3
+      tsutils: 3.21.0(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.3
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.7.3
+      ts-api-utils: 1.4.3(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@5.62.0(eslint@8.57.1)(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.7.1
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.9.3)
+      eslint: 8.57.1
+      eslint-scope: 5.1.1
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.7.1
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.9.3)
+      eslint: 8.57.1
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/visitor-keys@5.62.0':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      eslint-visitor-keys: 3.4.3
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unocss/cli@66.7.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.7.0
+      '@unocss/core': 66.7.0
+      '@unocss/preset-wind3': 66.7.0
+      '@unocss/preset-wind4': 66.7.0
+      '@unocss/transformer-directives': 66.7.0
+      cac: 7.0.0
+      chokidar: 5.0.0
+      colorette: 2.0.20
+      consola: 3.4.2
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.1
+
+  '@unocss/config@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      colorette: 2.0.20
+      consola: 3.4.2
+      unconfig: 7.5.0
+
+  '@unocss/core@66.7.0': {}
+
+  '@unocss/extractor-arbitrary-variants@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+
+  '@unocss/inspector@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+      colorette: 2.0.20
+      gzip-size: 6.0.0
+      sirv: 3.0.2
+
+  '@unocss/preset-attributify@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+
+  '@unocss/preset-icons@66.7.0':
+    dependencies:
+      '@iconify/utils': 3.1.3
+      '@unocss/core': 66.7.0
+      ofetch: 1.5.1
+
+  '@unocss/preset-mini@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/extractor-arbitrary-variants': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+
+  '@unocss/preset-tagify@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+
+  '@unocss/preset-typography@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+
+  '@unocss/preset-uno@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/preset-wind3': 66.7.0
+
+  '@unocss/preset-web-fonts@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      ofetch: 1.5.1
+
+  '@unocss/preset-wind3@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/preset-mini': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+
+  '@unocss/preset-wind4@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/extractor-arbitrary-variants': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+
+  '@unocss/preset-wind@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/preset-wind3': 66.7.0
+
+  '@unocss/rule-utils@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      magic-string: 0.30.21
+
+  '@unocss/transformer-attributify-jsx@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      oxc-parser: 0.131.0
+      oxc-walker: 0.7.0(oxc-parser@0.131.0)
+
+  '@unocss/transformer-compile-class@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+
+  '@unocss/transformer-directives@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+      '@unocss/rule-utils': 66.7.0
+      css-tree: 3.2.1
+
+  '@unocss/transformer-variant-group@66.7.0':
+    dependencies:
+      '@unocss/core': 66.7.0
+
+  '@unocss/vite@66.7.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.7.0
+      '@unocss/core': 66.7.0
+      '@unocss/inspector': 66.7.0
+      chokidar: 5.0.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.1
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+
+  '@vant/area-data@1.5.2': {}
+
+  '@vitejs/plugin-vue-jsx@5.1.5(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+      '@rolldown/pluginutils': 1.0.1
+      '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.7)
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+      vue: 3.5.27(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@6.0.7(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+      vue: 3.5.27(typescript@5.9.3)
+
+  '@volar/language-core@1.11.1':
+    dependencies:
+      '@volar/source-map': 1.11.1
+
+  '@volar/source-map@1.11.1':
+    dependencies:
+      muggle-string: 0.3.1
+
+  '@volar/typescript@1.11.1':
+    dependencies:
+      '@volar/language-core': 1.11.1
+      path-browserify: 1.0.1
+
+  '@vue/babel-helper-vue-transform-on@2.0.1': {}
+
+  '@vue/babel-plugin-jsx@2.0.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@vue/babel-helper-vue-transform-on': 2.0.1
+      '@vue/babel-plugin-resolve-type': 2.0.1(@babel/core@7.29.7)
+      '@vue/shared': 3.5.27
+    optionalDependencies:
+      '@babel/core': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@2.0.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/parser': 7.29.7
+      '@vue/compiler-sfc': 3.5.27
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.5.27':
+    dependencies:
+      '@babel/parser': 7.28.6
+      '@vue/shared': 3.5.27
+      entities: 7.0.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.27':
+    dependencies:
+      '@vue/compiler-core': 3.5.27
+      '@vue/shared': 3.5.27
+
+  '@vue/compiler-sfc@3.5.27':
+    dependencies:
+      '@babel/parser': 7.28.6
+      '@vue/compiler-core': 3.5.27
+      '@vue/compiler-dom': 3.5.27
+      '@vue/compiler-ssr': 3.5.27
+      '@vue/shared': 3.5.27
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.27':
+    dependencies:
+      '@vue/compiler-dom': 3.5.27
+      '@vue/shared': 3.5.27
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/language-core@1.8.27(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 1.11.1
+      '@volar/source-map': 1.11.1
+      '@vue/compiler-dom': 3.5.27
+      '@vue/shared': 3.5.27
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.3.1
+      path-browserify: 1.0.1
+      vue-template-compiler: 2.7.16
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/reactivity@3.5.27':
+    dependencies:
+      '@vue/shared': 3.5.27
+
+  '@vue/runtime-core@3.5.27':
+    dependencies:
+      '@vue/reactivity': 3.5.27
+      '@vue/shared': 3.5.27
+
+  '@vue/runtime-dom@3.5.27':
+    dependencies:
+      '@vue/reactivity': 3.5.27
+      '@vue/runtime-core': 3.5.27
+      '@vue/shared': 3.5.27
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.27(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.27
+      '@vue/shared': 3.5.27
+      vue: 3.5.27(typescript@5.9.3)
+
+  '@vue/shared@3.5.27': {}
+
+  '@vue/test-utils@2.4.6':
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+
+  '@vueuse/core@10.11.1(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.27(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
+  '@vueuse/shared@10.11.1(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vxe-ui/core@4.2.21(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      dom-zindex: 1.0.6
+      vue: 3.5.27(typescript@5.9.3)
+      xe-utils: 3.8.4
+
+  '@zxcvbn-ts/core@3.0.4':
+    dependencies:
+      fastest-levenshtein: 1.0.16
+
+  JSONStream@1.3.5:
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+
+  abbrev@2.0.0: {}
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  add-stream@1.0.0: {}
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-escapes@7.2.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@2.1.1: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@2.2.1: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  ant-design-vue@4.2.6(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 7.0.1(vue@3.5.27(typescript@5.9.3))
+      '@babel/runtime': 7.28.6
+      '@ctrl/tinycolor': 3.6.1
+      '@emotion/hash': 0.9.2
+      '@emotion/unitless': 0.8.1
+      '@simonwep/pickr': 1.8.2
+      array-tree-filter: 2.1.0
+      async-validator: 4.2.5
+      csstype: 3.2.3
+      dayjs: 1.11.19
+      dom-align: 1.12.4
+      dom-scroll-into-view: 2.0.1
+      lodash: 4.17.21
+      lodash-es: 4.17.22
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+      shallow-equal: 1.2.1
+      stylis: 4.3.6
+      throttle-debounce: 5.0.2
+      vue: 3.5.27(typescript@5.9.3)
+      vue-types: 3.0.2(vue@3.5.27(typescript@5.9.3))
+      warning: 4.0.3
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@4.1.3: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  arr-diff@4.0.0: {}
+
+  arr-flatten@1.1.0: {}
+
+  arr-union@3.1.0: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-ify@1.0.0: {}
+
+  array-tree-filter@2.1.0: {}
+
+  array-union@2.1.0: {}
+
+  array-unique@0.3.2: {}
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  arrify@1.0.1: {}
+
+  assign-symbols@1.0.0: {}
+
+  astral-regex@2.0.0: {}
+
+  async-function@1.0.0: {}
+
+  async-validator@4.2.5: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  at-least-node@1.0.0: {}
+
+  atob@2.1.2: {}
+
+  autoprefixer@10.4.23(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001765
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axios@0.26.1(debug@4.4.3):
+    dependencies:
+      follow-redirects: 1.15.11(debug@4.4.3)
+    transitivePeerDependencies:
+      - debug
+
+  axios@1.13.2(debug@4.4.3):
+    dependencies:
+      follow-redirects: 1.15.11(debug@4.4.3)
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  babel-jest@29.7.0(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@jest/transform': 29.7.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 29.6.3(@babel/core@7.29.7)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-istanbul@6.1.1:
+    dependencies:
+      '@babel/helper-plugin-utils': 7.29.7
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 5.2.1
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-jest-hoist@29.6.3:
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.29.7):
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.29.7)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.29.7)
+      core-js-compat: 3.47.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-transform-runtime@6.23.0:
+    dependencies:
+      babel-runtime: 6.26.0
+
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.29.7)
+
+  babel-preset-jest@29.6.3(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      babel-plugin-jest-hoist: 29.6.3
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
+
+  babel-runtime@6.26.0:
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@2.0.0: {}
+
+  base64-js@1.5.1: {}
+
+  base@0.11.2:
+    dependencies:
+      cache-base: 1.0.1
+      class-utils: 0.3.6
+      component-emitter: 1.3.1
+      define-property: 1.0.0
+      isobject: 3.0.1
+      mixin-deep: 1.3.2
+      pascalcase: 0.1.1
+
+  baseline-browser-mapping@2.9.15: {}
+
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  batch-processor@1.0.0: {}
+
+  big.js@5.2.2: {}
+
+  big.js@6.2.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  bluebird@3.7.2: {}
+
+  boolbase@1.0.0: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@2.3.2:
+    dependencies:
+      arr-flatten: 1.1.0
+      array-unique: 0.3.2
+      extend-shallow: 2.0.1
+      fill-range: 4.0.0
+      isobject: 3.0.1
+      repeat-element: 1.1.4
+      snapdragon: 0.8.2
+      snapdragon-node: 2.1.1
+      split-string: 3.1.0
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.15
+      caniuse-lite: 1.0.30001765
+      electron-to-chromium: 1.5.267
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  bs-logger@0.2.6:
+    dependencies:
+      fast-json-stable-stringify: 2.1.0
+
+  bser@2.1.1:
+    dependencies:
+      node-int64: 0.4.0
+
+  buffer-from@1.1.2: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  cac@7.0.0: {}
+
+  cache-base@1.0.1:
+    dependencies:
+      collection-visit: 1.0.0
+      component-emitter: 1.3.1
+      get-value: 2.0.6
+      has-value: 1.0.0
+      isobject: 3.0.1
+      set-value: 2.0.1
+      to-object-path: 0.3.0
+      union-value: 1.0.1
+      unset-value: 1.0.0
+
+  cacheable@2.3.2:
+    dependencies:
+      '@cacheable/memory': 2.0.7
+      '@cacheable/utils': 2.3.3
+      hookified: 1.15.0
+      keyv: 5.5.5
+      qified: 0.6.0
+
+  cachedir@2.3.0: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camel-case@4.1.2:
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.8.1
+
+  camelcase-keys@6.2.2:
+    dependencies:
+      camelcase: 5.3.1
+      map-obj: 4.3.0
+      quick-lru: 4.0.1
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
+  caniuse-lite@1.0.30001765: {}
+
+  chalk@1.1.3:
+    dependencies:
+      ansi-styles: 2.2.1
+      escape-string-regexp: 1.0.5
+      has-ansi: 2.0.0
+      strip-ansi: 3.0.1
+      supports-color: 2.0.0
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.3.0: {}
+
+  chalk@5.6.2:
+    optional: true
+
+  char-regex@1.0.2: {}
+
+  chardet@0.7.0: {}
+
+  chardet@2.1.1: {}
+
+  charenc@0.0.2: {}
+
+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.2.2
+      css-what: 6.2.2
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.1.2:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      encoding-sniffer: 0.2.1
+      htmlparser2: 10.0.0
+      parse5: 7.3.0
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      parse5-parser-stream: 7.1.2
+      undici: 7.18.2
+      whatwg-mimetype: 4.0.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  ci-info@3.9.0: {}
+
+  cjs-module-lexer@1.4.3: {}
+
+  class-utils@0.3.6:
+    dependencies:
+      arr-union: 3.1.0
+      define-property: 0.2.5
+      isobject: 3.0.1
+      static-extend: 0.1.2
+
+  classnames@2.5.1: {}
+
+  clean-css@5.3.3:
+    dependencies:
+      source-map: 0.6.1
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
+  cli-width@3.0.0: {}
+
+  cli-width@4.1.0: {}
+
+  clipboard@2.0.11:
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clone@1.0.4: {}
+
+  clone@2.1.2: {}
+
+  co@4.6.0: {}
+
+  codemirror@5.65.20: {}
+
+  collect-v8-coverage@1.0.3: {}
+
+  collection-visit@1.0.0:
+    dependencies:
+      map-visit: 1.0.0
+      object-visit: 1.0.1
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  colord@2.9.3: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@10.0.1: {}
+
+  commander@11.1.0: {}
+
+  commander@14.0.2: {}
+
+  commander@2.20.3: {}
+
+  commander@7.2.0: {}
+
+  commander@8.3.0: {}
+
+  commander@9.5.0: {}
+
+  commitizen@4.3.1(@types/node@20.19.30)(typescript@5.9.3):
+    dependencies:
+      cachedir: 2.3.0
+      cz-conventional-changelog: 3.3.0(@types/node@20.19.30)(typescript@5.9.3)
+      dedent: 0.7.0
+      detect-indent: 6.1.0
+      find-node-modules: 2.1.3
+      find-root: 1.1.0
+      fs-extra: 9.1.0
+      glob: 7.2.3
+      inquirer: 8.2.5
+      is-utf8: 0.2.1
+      lodash: 4.17.21
+      minimist: 1.2.7
+      strip-bom: 4.0.0
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  common-tags@1.8.2: {}
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  component-emitter@1.3.1: {}
+
+  compute-scroll-into-view@1.0.20: {}
+
+  computeds@0.0.1: {}
+
+  concat-map@0.0.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
+  connect-history-api-fallback@1.6.0: {}
+
+  connect@3.7.0:
+    dependencies:
+      debug: 2.6.9
+      finalhandler: 1.1.2
+      parseurl: 1.3.3
+      utils-merge: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  consola@2.15.3: {}
+
+  consola@3.4.2: {}
+
+  conventional-changelog-angular@7.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-atom@4.0.0: {}
+
+  conventional-changelog-cli@4.1.0:
+    dependencies:
+      add-stream: 1.0.0
+      conventional-changelog: 5.1.0
+      meow: 12.1.1
+      tempfile: 5.0.0
+
+  conventional-changelog-codemirror@4.0.0: {}
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-core@7.0.0:
+    dependencies:
+      '@hutson/parse-repository-url': 5.0.0
+      add-stream: 1.0.0
+      conventional-changelog-writer: 7.0.1
+      conventional-commits-parser: 5.0.0
+      git-raw-commits: 4.0.0
+      git-semver-tags: 7.0.1
+      hosted-git-info: 7.0.2
+      normalize-package-data: 6.0.2
+      read-pkg: 8.1.0
+      read-pkg-up: 10.1.0
+
+  conventional-changelog-ember@4.0.0: {}
+
+  conventional-changelog-eslint@5.0.0: {}
+
+  conventional-changelog-express@4.0.0: {}
+
+  conventional-changelog-jquery@5.0.0: {}
+
+  conventional-changelog-jshint@4.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-preset-loader@4.1.0: {}
+
+  conventional-changelog-writer@7.0.1:
+    dependencies:
+      conventional-commits-filter: 4.0.0
+      handlebars: 4.7.8
+      json-stringify-safe: 5.0.1
+      meow: 12.1.1
+      semver: 7.7.3
+      split2: 4.2.0
+
+  conventional-changelog@5.1.0:
+    dependencies:
+      conventional-changelog-angular: 7.0.0
+      conventional-changelog-atom: 4.0.0
+      conventional-changelog-codemirror: 4.0.0
+      conventional-changelog-conventionalcommits: 7.0.2
+      conventional-changelog-core: 7.0.0
+      conventional-changelog-ember: 4.0.0
+      conventional-changelog-eslint: 5.0.0
+      conventional-changelog-express: 4.0.0
+      conventional-changelog-jquery: 5.0.0
+      conventional-changelog-jshint: 4.0.0
+      conventional-changelog-preset-loader: 4.1.0
+
+  conventional-commit-types@3.0.0: {}
+
+  conventional-commits-filter@4.0.0: {}
+
+  conventional-commits-parser@5.0.0:
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  convert-source-map@2.0.0: {}
+
+  copy-anything@2.0.6:
+    dependencies:
+      is-what: 3.14.1
+
+  copy-descriptor@0.1.1: {}
+
+  core-js-compat@3.47.0:
+    dependencies:
+      browserslist: 4.28.1
+
+  core-js@2.6.12: {}
+
+  core-js@3.47.0: {}
+
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  corser@2.0.1: {}
+
+  cosmiconfig-typescript-loader@5.1.0(@types/node@20.19.30)(cosmiconfig@8.3.6(typescript@5.9.3))(typescript@5.9.3):
+    dependencies:
+      '@types/node': 20.19.30
+      cosmiconfig: 8.3.6(typescript@5.9.3)
+      jiti: 1.21.7
+      typescript: 5.9.3
+
+  cosmiconfig-typescript-loader@6.2.0(@types/node@20.19.30)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
+    dependencies:
+      '@types/node': 20.19.30
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      jiti: 2.6.1
+      typescript: 5.9.3
+    optional: true
+
+  cosmiconfig@8.3.6(typescript@5.9.3):
+    dependencies:
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  cosmiconfig@9.0.0(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  create-jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  create-require@1.1.1: {}
+
+  cron-parser@4.9.0:
+    dependencies:
+      luxon: 3.7.2
+
+  cropperjs@1.6.2: {}
+
+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.6
+
+  cross-fetch@3.2.0:
+    dependencies:
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+
+  cross-spawn@6.0.6:
+    dependencies:
+      nice-try: 1.0.5
+      path-key: 2.0.1
+      semver: 5.7.2
+      shebang-command: 1.2.0
+      which: 1.3.1
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crypt@0.0.2: {}
+
+  crypto-js@4.2.0: {}
+
+  crypto-random-string@2.0.0: {}
+
+  css-functions-list@3.2.3: {}
+
+  css-select@4.3.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
+  cssesc@3.0.0: {}
+
+  cssfilter@0.0.10: {}
+
+  csso@4.2.0:
+    dependencies:
+      css-tree: 1.1.3
+
+  csstype@3.2.3: {}
+
+  cz-conventional-changelog@3.3.0(@types/node@20.19.30)(typescript@5.9.3):
+    dependencies:
+      chalk: 2.4.2
+      commitizen: 4.3.1(@types/node@20.19.30)(typescript@5.9.3)
+      conventional-commit-types: 3.0.0
+      lodash.map: 4.6.0
+      longest: 2.0.1
+      word-wrap: 1.2.5
+    optionalDependencies:
+      '@commitlint/load': 20.3.1(@types/node@20.19.30)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  cz-git@1.12.0: {}
+
+  czg@1.12.0: {}
+
+  dargs@7.0.0: {}
+
+  dargs@8.1.0: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  dayjs@1.11.19: {}
+
+  de-indent@1.0.2: {}
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@4.3.4:
+    dependencies:
+      ms: 2.1.2
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decamelize-keys@1.1.1:
+    dependencies:
+      decamelize: 1.2.0
+      map-obj: 1.0.1
+
+  decamelize@1.2.0: {}
+
+  decode-uri-component@0.2.2: {}
+
+  dedent@0.7.0: {}
+
+  dedent@1.7.1: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-lazy-prop@2.0.0: {}
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  define-property@0.2.5:
+    dependencies:
+      is-descriptor: 0.1.7
+
+  define-property@1.0.0:
+    dependencies:
+      is-descriptor: 1.0.3
+
+  define-property@2.0.2:
+    dependencies:
+      is-descriptor: 1.0.3
+      isobject: 3.0.1
+
+  defu@6.1.4: {}
+
+  delayed-stream@1.0.0: {}
+
+  delegate@3.2.0: {}
+
+  destr@2.0.5: {}
+
+  detect-file@1.0.0: {}
+
+  detect-indent@6.1.0: {}
+
+  detect-newline@3.1.0: {}
+
+  diff-match-patch@1.0.5: {}
+
+  diff-sequences@29.6.3: {}
+
+  diff@4.0.2: {}
+
+  dijkstrajs@1.0.3: {}
+
+  dingtalk-jsapi@3.2.5:
+    dependencies:
+      promise-polyfill: 7.1.2
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dom-align@1.12.4: {}
+
+  dom-scroll-into-view@2.0.1: {}
+
+  dom-serializer@0.2.2:
+    dependencies:
+      domelementtype: 2.3.0
+      entities: 2.2.0
+
+  dom-serializer@1.4.1:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-zindex@1.0.6: {}
+
+  domelementtype@1.3.1: {}
+
+  domelementtype@2.3.0: {}
+
+  domhandler@2.4.2:
+    dependencies:
+      domelementtype: 1.3.1
+
+  domhandler@4.3.1:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@1.7.0:
+    dependencies:
+      dom-serializer: 0.2.2
+      domelementtype: 1.3.1
+
+  domutils@2.8.0:
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  dotenv-expand@8.0.3: {}
+
+  dotenv@16.6.1: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexer@0.1.2: {}
+
+  eastasianwidth@0.2.0: {}
+
+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
+  editorconfig@1.0.4:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.3
+
+  ee-first@1.1.1: {}
+
+  ejs@3.1.10:
+    dependencies:
+      jake: 10.9.4
+
+  electron-to-chromium@1.5.267: {}
+
+  element-resize-detector@1.2.4:
+    dependencies:
+      batch-processor: 1.0.0
+
+  emittery@0.13.1: {}
+
+  emoji-mart-vue-fast@15.0.5(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@babel/runtime': 7.28.6
+      core-js: 3.47.0
+      vue: 3.5.27(typescript@5.9.3)
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  emojis-list@3.0.0: {}
+
+  encodeurl@1.0.2: {}
+
+  encoding-sniffer@0.2.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      whatwg-encoding: 3.1.1
+
+  enquire.js@2.1.6: {}
+
+  entities@1.1.2: {}
+
+  entities@2.2.0: {}
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  entities@7.0.0: {}
+
+  env-paths@2.2.1: {}
+
+  environment@1.1.0: {}
+
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-abstract@1.24.1:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.20
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  esbuild-android-64@0.14.54:
+    optional: true
+
+  esbuild-android-arm64@0.14.54:
+    optional: true
+
+  esbuild-darwin-64@0.14.54:
+    optional: true
+
+  esbuild-darwin-arm64@0.14.54:
+    optional: true
+
+  esbuild-freebsd-64@0.14.54:
+    optional: true
+
+  esbuild-freebsd-arm64@0.14.54:
+    optional: true
+
+  esbuild-linux-32@0.14.54:
+    optional: true
+
+  esbuild-linux-64@0.14.54:
+    optional: true
+
+  esbuild-linux-arm64@0.14.54:
+    optional: true
+
+  esbuild-linux-arm@0.14.54:
+    optional: true
+
+  esbuild-linux-mips64le@0.14.54:
+    optional: true
+
+  esbuild-linux-ppc64le@0.14.54:
+    optional: true
+
+  esbuild-linux-riscv64@0.14.54:
+    optional: true
+
+  esbuild-linux-s390x@0.14.54:
+    optional: true
+
+  esbuild-netbsd-64@0.14.54:
+    optional: true
+
+  esbuild-openbsd-64@0.14.54:
+    optional: true
+
+  esbuild-sunos-64@0.14.54:
+    optional: true
+
+  esbuild-windows-32@0.14.54:
+    optional: true
+
+  esbuild-windows-64@0.14.54:
+    optional: true
+
+  esbuild-windows-arm64@0.14.54:
+    optional: true
+
+  esbuild@0.14.54:
+    optionalDependencies:
+      '@esbuild/linux-loong64': 0.14.54
+      esbuild-android-64: 0.14.54
+      esbuild-android-arm64: 0.14.54
+      esbuild-darwin-64: 0.14.54
+      esbuild-darwin-arm64: 0.14.54
+      esbuild-freebsd-64: 0.14.54
+      esbuild-freebsd-arm64: 0.14.54
+      esbuild-linux-32: 0.14.54
+      esbuild-linux-64: 0.14.54
+      esbuild-linux-arm: 0.14.54
+      esbuild-linux-arm64: 0.14.54
+      esbuild-linux-mips64le: 0.14.54
+      esbuild-linux-ppc64le: 0.14.54
+      esbuild-linux-riscv64: 0.14.54
+      esbuild-linux-s390x: 0.14.54
+      esbuild-netbsd-64: 0.14.54
+      esbuild-openbsd-64: 0.14.54
+      esbuild-sunos-64: 0.14.54
+      esbuild-windows-32: 0.14.54
+      esbuild-windows-64: 0.14.54
+      esbuild-windows-arm64: 0.14.54
+
+  esbuild@0.27.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.2
+      '@esbuild/android-arm': 0.27.2
+      '@esbuild/android-arm64': 0.27.2
+      '@esbuild/android-x64': 0.27.2
+      '@esbuild/darwin-arm64': 0.27.2
+      '@esbuild/darwin-x64': 0.27.2
+      '@esbuild/freebsd-arm64': 0.27.2
+      '@esbuild/freebsd-x64': 0.27.2
+      '@esbuild/linux-arm': 0.27.2
+      '@esbuild/linux-arm64': 0.27.2
+      '@esbuild/linux-ia32': 0.27.2
+      '@esbuild/linux-loong64': 0.27.2
+      '@esbuild/linux-mips64el': 0.27.2
+      '@esbuild/linux-ppc64': 0.27.2
+      '@esbuild/linux-riscv64': 0.27.2
+      '@esbuild/linux-s390x': 0.27.2
+      '@esbuild/linux-x64': 0.27.2
+      '@esbuild/netbsd-arm64': 0.27.2
+      '@esbuild/netbsd-x64': 0.27.2
+      '@esbuild/openbsd-arm64': 0.27.2
+      '@esbuild/openbsd-x64': 0.27.2
+      '@esbuild/openharmony-arm64': 0.27.2
+      '@esbuild/sunos-x64': 0.27.2
+      '@esbuild/win32-arm64': 0.27.2
+      '@esbuild/win32-ia32': 0.27.2
+      '@esbuild/win32-x64': 0.27.2
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@2.0.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-config-prettier@9.1.2(eslint@8.57.1):
+    dependencies:
+      eslint: 8.57.1
+
+  eslint-define-config@2.1.0: {}
+
+  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.9.3)
+      eslint: 8.57.1
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3))(eslint@8.57.1)(typescript@5.9.3)
+      jest: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-plugin-prettier@5.5.5(eslint-config-prettier@9.1.2(eslint@8.57.1))(eslint@8.57.1)(prettier@3.8.0):
+    dependencies:
+      eslint: 8.57.1
+      prettier: 3.8.0
+      prettier-linter-helpers: 1.0.1
+      synckit: 0.11.12
+    optionalDependencies:
+      eslint-config-prettier: 9.1.2(eslint@8.57.1)
+
+  eslint-plugin-vue@9.33.0(eslint@8.57.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      eslint: 8.57.1
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.3
+      vue-eslint-parser: 9.4.3(eslint@8.57.1)
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-scope@5.1.1:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint@8.57.1:
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.57.1
+      '@humanwhocodes/config-array': 0.13.0
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.3.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.1
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  esno@4.8.0:
+    dependencies:
+      tsx: 4.21.0
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@4.3.0: {}
+
+  estraverse@5.3.0: {}
+
+  estree-walker@1.0.1: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  event-source-polyfill@1.0.31: {}
+
+  eventemitter3@4.0.7: {}
+
+  eventemitter3@5.0.4: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  exit@0.1.2: {}
+
+  expand-brackets@2.1.4:
+    dependencies:
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      posix-character-classes: 0.1.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  expand-tilde@2.0.2:
+    dependencies:
+      homedir-polyfill: 1.0.3
+
+  expect@29.7.0:
+    dependencies:
+      '@jest/expect-utils': 29.7.0
+      jest-get-type: 29.6.3
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+
+  exsolve@1.0.8: {}
+
+  extend-shallow@2.0.1:
+    dependencies:
+      is-extendable: 0.1.1
+
+  extend-shallow@3.0.2:
+    dependencies:
+      assign-symbols: 1.0.0
+      is-extendable: 1.0.1
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  extglob@2.0.4:
+    dependencies:
+      array-unique: 0.3.2
+      define-property: 1.0.0
+      expand-brackets: 2.1.4
+      extend-shallow: 2.0.1
+      fragment-cache: 0.2.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-diff@1.3.0: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.0: {}
+
+  fastest-levenshtein@1.0.16: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fb-watchman@2.0.2:
+    dependencies:
+      bser: 2.1.1
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  file-entry-cache@11.1.2:
+    dependencies:
+      flat-cache: 6.1.20
+
+  file-entry-cache@6.0.1:
+    dependencies:
+      flat-cache: 3.2.0
+
+  filelist@1.0.4:
+    dependencies:
+      minimatch: 5.1.6
+
+  fill-range@4.0.0:
+    dependencies:
+      extend-shallow: 2.0.1
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+      to-regex-range: 2.1.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@1.1.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      on-finished: 2.3.0
+      parseurl: 1.3.3
+      statuses: 1.5.0
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  find-node-modules@2.1.3:
+    dependencies:
+      findup-sync: 4.0.0
+      merge: 2.1.1
+
+  find-root@1.1.0: {}
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  find-up@6.3.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+
+  findup-sync@4.0.0:
+    dependencies:
+      detect-file: 1.0.0
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      resolve-dir: 1.0.1
+
+  flat-cache@3.2.0:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+      rimraf: 3.0.2
+
+  flat-cache@6.1.20:
+    dependencies:
+      cacheable: 2.3.2
+      flatted: 3.3.3
+      hookified: 1.15.0
+
+  flatted@3.3.3: {}
+
+  follow-redirects@1.15.11(debug@4.4.3):
+    optionalDependencies:
+      debug: 4.4.3
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  for-in@1.0.2: {}
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  fraction.js@5.3.4: {}
+
+  fragment-cache@0.2.1:
+    dependencies:
+      map-cache: 0.2.2
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@11.3.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@9.1.0:
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  generator-function@2.0.1: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-own-enumerable-property-symbols@3.0.2: {}
+
+  get-package-type@0.1.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@6.0.1: {}
+
+  get-stream@8.0.1: {}
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  get-value@2.0.6: {}
+
+  git-raw-commits@2.0.11:
+    dependencies:
+      dargs: 7.0.0
+      lodash: 4.17.21
+      meow: 8.1.2
+      split2: 3.2.2
+      through2: 4.0.2
+
+  git-raw-commits@4.0.0:
+    dependencies:
+      dargs: 8.1.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  git-semver-tags@7.0.1:
+    dependencies:
+      meow: 12.1.1
+      semver: 7.7.3
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@11.1.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.1.1
+      minimatch: 10.1.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+    optional: true
+
+  global-dirs@0.1.1:
+    dependencies:
+      ini: 1.3.8
+
+  global-modules@1.0.0:
+    dependencies:
+      global-prefix: 1.0.2
+      is-windows: 1.0.2
+      resolve-dir: 1.0.1
+
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@1.0.2:
+    dependencies:
+      expand-tilde: 2.0.2
+      homedir-polyfill: 1.0.3
+      ini: 1.3.8
+      is-windows: 1.0.2
+      which: 1.3.1
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globals@15.15.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globjoin@0.1.4: {}
+
+  good-listener@1.2.2:
+    dependencies:
+      delegate: 3.2.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  graphemer@1.4.0: {}
+
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  hard-rejection@2.1.0: {}
+
+  has-ansi@2.0.0:
+    dependencies:
+      ansi-regex: 2.1.1
+
+  has-bigints@1.1.0: {}
+
+  has-flag@1.0.0: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  has-value@0.3.1:
+    dependencies:
+      get-value: 2.0.6
+      has-values: 0.1.4
+      isobject: 2.1.0
+
+  has-value@1.0.0:
+    dependencies:
+      get-value: 2.0.6
+      has-values: 1.0.0
+      isobject: 3.0.1
+
+  has-values@0.1.4: {}
+
+  has-values@1.0.0:
+    dependencies:
+      is-number: 3.0.0
+      kind-of: 4.0.0
+
+  hashery@1.4.0:
+    dependencies:
+      hookified: 1.15.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  he@1.2.0: {}
+
+  highlight.js@11.11.1: {}
+
+  hoist-non-react-statics@2.5.5: {}
+
+  homedir-polyfill@1.0.3:
+    dependencies:
+      parse-passwd: 1.0.0
+
+  hookified@1.15.0: {}
+
+  hosted-git-info@2.8.9: {}
+
+  hosted-git-info@4.1.0:
+    dependencies:
+      lru-cache: 6.0.0
+
+  hosted-git-info@7.0.2:
+    dependencies:
+      lru-cache: 10.4.3
+
+  html-encoding-sniffer@3.0.0:
+    dependencies:
+      whatwg-encoding: 2.0.0
+
+  html-escaper@2.0.2: {}
+
+  html-minifier-terser@6.1.0:
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.3
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.46.0
+
+  html-tags@3.3.1: {}
+
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
+  htmlparser2@3.10.1:
+    dependencies:
+      domelementtype: 1.3.1
+      domhandler: 2.4.2
+      domutils: 1.7.0
+      entities: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
+  http-proxy@1.18.1:
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.15.11(debug@4.4.3)
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+
+  http-server@14.1.1:
+    dependencies:
+      basic-auth: 2.0.1
+      chalk: 4.1.2
+      corser: 2.0.1
+      he: 1.2.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy: 1.18.1
+      mime: 1.6.0
+      minimist: 1.2.8
+      opener: 1.5.2
+      portfinder: 1.0.38
+      secure-compare: 3.0.1
+      union: 0.5.0
+      url-join: 4.0.1
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@5.0.0: {}
+
+  husky@8.0.3: {}
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  idb@7.1.1: {}
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  image-size@0.5.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-local@3.2.0:
+    dependencies:
+      pkg-dir: 4.2.0
+      resolve-cwd: 3.0.0
+
+  import-meta-resolve@4.2.0: {}
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@4.1.1:
+    optional: true
+
+  inquirer@8.2.5:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.8.2
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+      wrap-ansi: 7.0.0
+
+  inquirer@9.3.8(@types/node@20.19.30):
+    dependencies:
+      '@inquirer/external-editor': 1.0.3(@types/node@20.19.30)
+      '@inquirer/figures': 1.0.15
+      ansi-escapes: 4.3.2
+      cli-width: 4.1.0
+      mute-stream: 1.0.0
+      ora: 5.4.1
+      run-async: 3.0.0
+      rxjs: 7.8.2
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  intro.js@7.2.0: {}
+
+  is-accessor-descriptor@1.0.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.2.1: {}
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-buffer@1.1.6: {}
+
+  is-callable@1.2.7: {}
+
+  is-ci@3.0.1:
+    dependencies:
+      ci-info: 3.9.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-descriptor@1.0.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-descriptor@0.1.7:
+    dependencies:
+      is-accessor-descriptor: 1.0.1
+      is-data-descriptor: 1.0.1
+
+  is-descriptor@1.0.3:
+    dependencies:
+      is-accessor-descriptor: 1.0.1
+      is-data-descriptor: 1.0.1
+
+  is-docker@2.2.1: {}
+
+  is-extendable@0.1.1: {}
+
+  is-extendable@1.0.1:
+    dependencies:
+      is-plain-object: 2.0.4
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
+  is-generator-fn@2.1.0: {}
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-interactive@1.0.0: {}
+
+  is-map@2.0.3: {}
+
+  is-module@1.0.0: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@3.0.0:
+    dependencies:
+      kind-of: 3.2.2
+
+  is-number@7.0.0: {}
+
+  is-obj@1.0.1: {}
+
+  is-obj@2.0.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-plain-obj@1.1.0: {}
+
+  is-plain-object@2.0.4:
+    dependencies:
+      isobject: 3.0.1
+
+  is-plain-object@3.0.1: {}
+
+  is-plain-object@5.0.0: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-regexp@1.0.0: {}
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-stream@2.0.1: {}
+
+  is-stream@3.0.0: {}
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-text-path@2.0.0:
+    dependencies:
+      text-extensions: 2.4.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.20
+
+  is-unicode-supported@0.1.0: {}
+
+  is-utf8@0.2.1: {}
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-what@3.14.1: {}
+
+  is-windows@1.0.2: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  isarray@1.0.0: {}
+
+  isarray@2.0.5: {}
+
+  isexe@2.0.0: {}
+
+  isobject@2.1.0:
+    dependencies:
+      isarray: 1.0.0
+
+  isobject@3.0.1: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-instrument@5.2.1:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-instrument@6.0.3:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@4.0.1:
+    dependencies:
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jackspeak@4.1.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+
+  jake@10.9.4:
+    dependencies:
+      async: 3.2.6
+      filelist: 1.0.4
+      picocolors: 1.1.1
+
+  jest-changed-files@29.7.0:
+    dependencies:
+      execa: 5.1.1
+      jest-util: 29.7.0
+      p-limit: 3.1.0
+
+  jest-circus@29.7.0:
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/expect': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      co: 4.6.0
+      dedent: 1.7.1
+      is-generator-fn: 2.1.0
+      jest-each: 29.7.0
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      p-limit: 3.1.0
+      pretty-format: 29.7.0
+      pure-rand: 6.1.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-cli@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      exit: 0.1.2
+      import-local: 3.2.0
+      jest-config: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  jest-config@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.29.7)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.19.30
+      ts-node: 10.9.2(@types/node@20.19.30)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-diff@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 29.6.3
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-docblock@29.7.0:
+    dependencies:
+      detect-newline: 3.1.0
+
+  jest-each@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      jest-get-type: 29.6.3
+      jest-util: 29.7.0
+      pretty-format: 29.7.0
+
+  jest-environment-node@29.7.0:
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
+
+  jest-get-type@29.6.3: {}
+
+  jest-haste-map@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/graceful-fs': 4.1.9
+      '@types/node': 20.19.30
+      anymatch: 3.1.3
+      fb-watchman: 2.0.2
+      graceful-fs: 4.2.11
+      jest-regex-util: 29.6.3
+      jest-util: 29.7.0
+      jest-worker: 29.7.0
+      micromatch: 4.0.8
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  jest-leak-detector@29.7.0:
+    dependencies:
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-matcher-utils@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
+
+  jest-message-util@29.7.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@jest/types': 29.6.3
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-mock@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      jest-util: 29.7.0
+
+  jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
+    optionalDependencies:
+      jest-resolve: 29.7.0
+
+  jest-regex-util@29.6.3: {}
+
+  jest-resolve-dependencies@29.7.0:
+    dependencies:
+      jest-regex-util: 29.6.3
+      jest-snapshot: 29.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-resolve@29.7.0:
+    dependencies:
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      jest-haste-map: 29.7.0
+      jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      resolve: 1.22.11
+      resolve.exports: 2.0.3
+      slash: 3.0.0
+
+  jest-runner@29.7.0:
+    dependencies:
+      '@jest/console': 29.7.0
+      '@jest/environment': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      emittery: 0.13.1
+      graceful-fs: 4.2.11
+      jest-docblock: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-haste-map: 29.7.0
+      jest-leak-detector: 29.7.0
+      jest-message-util: 29.7.0
+      jest-resolve: 29.7.0
+      jest-runtime: 29.7.0
+      jest-util: 29.7.0
+      jest-watcher: 29.7.0
+      jest-worker: 29.7.0
+      p-limit: 3.1.0
+      source-map-support: 0.5.13
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-runtime@29.7.0:
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/globals': 29.7.0
+      '@jest/source-map': 29.6.3
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      cjs-module-lexer: 1.4.3
+      collect-v8-coverage: 1.0.3
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-mock: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-snapshot@29.7.0:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/types': 7.29.7
+      '@jest/expect-utils': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
+      chalk: 4.1.2
+      expect: 29.7.0
+      graceful-fs: 4.2.11
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+      natural-compare: 1.4.0
+      pretty-format: 29.7.0
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-util@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      graceful-fs: 4.2.11
+      picomatch: 2.3.1
+
+  jest-validate@29.7.0:
+    dependencies:
+      '@jest/types': 29.6.3
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      jest-get-type: 29.6.3
+      leven: 3.1.0
+      pretty-format: 29.7.0
+
+  jest-watcher@29.7.0:
+    dependencies:
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 20.19.30
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.13.1
+      jest-util: 29.7.0
+      string-length: 4.0.2
+
+  jest-worker@29.7.0:
+    dependencies:
+      '@types/node': 20.19.30
+      jest-util: 29.7.0
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      '@jest/types': 29.6.3
+      import-local: 3.2.0
+      jest-cli: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
+  jiti@1.21.7: {}
+
+  jiti@2.6.1: {}
+
+  js-base64@2.6.4: {}
+
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.5.0
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
+  js-yaml@3.14.2:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-better-errors@1.0.2: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-parse-even-better-errors@3.0.2: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema@0.4.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json-stringify-safe@5.0.1: {}
+
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonparse@1.3.1: {}
+
+  jsonpointer@5.0.1: {}
+
+  katex@0.16.27:
+    dependencies:
+      commander: 8.3.0
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  keyv@5.5.5:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
+  kind-of@3.2.2:
+    dependencies:
+      is-buffer: 1.1.6
+
+  kind-of@4.0.0:
+    dependencies:
+      is-buffer: 1.1.6
+
+  kind-of@5.1.0: {}
+
+  kind-of@6.0.3: {}
+
+  kleur@3.0.3: {}
+
+  known-css-properties@0.37.0: {}
+
+  kolorist@1.8.0: {}
+
+  less@4.5.1:
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+
+  leven@3.1.0: {}
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lilconfig@3.0.0: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lines-and-columns@2.0.4: {}
+
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
+  lint-staged@15.2.2:
+    dependencies:
+      chalk: 5.3.0
+      commander: 11.1.0
+      debug: 4.3.4
+      execa: 8.0.1
+      lilconfig: 3.0.0
+      listr2: 8.0.1
+      micromatch: 4.0.5
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  listr2@8.0.1:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.4
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.2
+
+  load-json-file@4.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      parse-json: 4.0.0
+      pify: 3.0.0
+      strip-bom: 3.0.0
+
+  loader-utils@1.4.2:
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+
+  local-pkg@0.4.3: {}
+
+  local-pkg@0.5.1:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 1.3.1
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  lodash-es@4.17.22: {}
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.get@4.4.2: {}
+
+  lodash.isfunction@3.0.9: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.kebabcase@4.1.1: {}
+
+  lodash.map@4.6.0: {}
+
+  lodash.memoize@4.1.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.mergewith@4.6.2: {}
+
+  lodash.snakecase@4.1.1: {}
+
+  lodash.sortby@4.7.0: {}
+
+  lodash.startcase@4.4.0: {}
+
+  lodash.truncate@4.4.2: {}
+
+  lodash.uniq@4.5.0: {}
+
+  lodash.upperfirst@4.3.1: {}
+
+  lodash@4.17.21: {}
+
+  log-symbols@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.2.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
+  longest@2.0.1: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.8.1
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.2.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  lunar-javascript@1.7.7: {}
+
+  luxon@3.7.2: {}
+
+  magic-regexp@0.10.0:
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.3
+      unplugin: 2.3.11
+
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  make-error@1.3.6: {}
+
+  makeerror@1.0.12:
+    dependencies:
+      tmpl: 1.0.5
+
+  map-cache@0.2.2: {}
+
+  map-obj@1.0.1: {}
+
+  map-obj@4.3.0: {}
+
+  map-visit@1.0.0:
+    dependencies:
+      object-visit: 1.0.1
+
+  markdown-it-link-attributes@4.0.1: {}
+
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  material-colors@1.2.6: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mathml-tag-names@2.1.3: {}
+
+  md5@2.3.0:
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+
+  mdn-data@2.0.14: {}
+
+  mdn-data@2.12.2: {}
+
+  mdn-data@2.27.1: {}
+
+  mdurl@2.0.0: {}
+
+  medium-editor@5.23.3: {}
+
+  memorystream@0.3.1: {}
+
+  meow@12.1.1: {}
+
+  meow@13.2.0: {}
+
+  meow@8.1.2:
+    dependencies:
+      '@types/minimist': 1.2.5
+      camelcase-keys: 6.2.2
+      decamelize-keys: 1.1.1
+      hard-rejection: 2.1.0
+      minimist-options: 4.1.0
+      normalize-package-data: 3.0.3
+      read-pkg-up: 7.0.1
+      redent: 3.0.0
+      trim-newlines: 3.0.1
+      type-fest: 0.18.1
+      yargs-parser: 20.2.9
+
+  merge-options@1.0.1:
+    dependencies:
+      is-plain-obj: 1.1.0
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  merge@2.1.1: {}
+
+  micromatch@3.1.0:
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      braces: 2.3.2
+      define-property: 1.0.0
+      extend-shallow: 2.0.1
+      extglob: 2.0.4
+      fragment-cache: 0.2.1
+      kind-of: 5.1.0
+      nanomatch: 1.2.13
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.5:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime@1.6.0: {}
+
+  mimic-fn@2.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  min-indent@1.0.1: {}
+
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@7.4.9:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.1:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.3:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist-options@4.1.0:
+    dependencies:
+      arrify: 1.0.1
+      is-plain-obj: 1.1.0
+      kind-of: 6.0.3
+
+  minimist@1.2.7: {}
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  mitt@3.0.1: {}
+
+  mixin-deep@1.3.2:
+    dependencies:
+      for-in: 1.0.2
+      is-extendable: 1.0.1
+
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.3
+
+  mobx-preact@3.0.0(mobx@5.15.7)(preact@10.28.2):
+    dependencies:
+      hoist-non-react-statics: 2.5.5
+      mobx: 5.15.7
+      preact: 10.28.2
+
+  mobx-utils@5.6.2(mobx@5.15.7):
+    dependencies:
+      mobx: 5.15.7
+
+  mobx@5.15.7: {}
+
+  mockjs@1.1.0:
+    dependencies:
+      commander: 14.0.2
+
+  mousetrap@1.6.5: {}
+
+  mri@1.2.0: {}
+
+  mrmime@2.0.1: {}
+
+  ms@2.0.0: {}
+
+  ms@2.1.2: {}
+
+  ms@2.1.3: {}
+
+  muggle-string@0.3.1: {}
+
+  mute-stream@0.0.8: {}
+
+  mute-stream@1.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  nanomatch@1.2.13:
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      fragment-cache: 0.2.1
+      is-windows: 1.0.2
+      kind-of: 6.0.3
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  nanopop@2.4.2: {}
+
+  natural-compare@1.4.0: {}
+
+  needle@3.3.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.4.4
+    optional: true
+
+  neo-async@2.6.2: {}
+
+  nice-try@1.0.5: {}
+
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.8.1
+
+  node-fetch-native@1.6.7: {}
+
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
+  node-html-parser@5.4.2:
+    dependencies:
+      css-select: 4.3.0
+      he: 1.2.0
+
+  node-int64@0.4.0: {}
+
+  node-releases@2.0.27: {}
+
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
+  normalize-package-data@2.5.0:
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.11
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+
+  normalize-package-data@3.0.3:
+    dependencies:
+      hosted-git-info: 4.1.0
+      is-core-module: 2.16.1
+      semver: 7.7.3
+      validate-npm-package-license: 3.0.4
+
+  normalize-package-data@6.0.2:
+    dependencies:
+      hosted-git-info: 7.0.2
+      semver: 7.7.3
+      validate-npm-package-license: 3.0.4
+
+  normalize-path@3.0.0: {}
+
+  npm-run-all@4.1.5:
+    dependencies:
+      ansi-styles: 3.2.1
+      chalk: 2.4.2
+      cross-spawn: 6.0.6
+      memorystream: 0.3.1
+      minimatch: 3.1.2
+      pidtree: 0.3.1
+      read-pkg: 3.0.0
+      shell-quote: 1.8.3
+      string.prototype.padend: 3.1.6
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  nprogress@0.2.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  object-assign@4.1.1: {}
+
+  object-copy@0.1.0:
+    dependencies:
+      copy-descriptor: 0.1.1
+      define-property: 0.2.5
+      kind-of: 3.2.2
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object-visit@1.0.1:
+    dependencies:
+      isobject: 3.0.1
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.pick@1.3.0:
+    dependencies:
+      isobject: 3.0.1
+
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.3
+
+  on-finished@2.3.0:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  opener@1.5.2: {}
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@5.4.1:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
+  os-tmpdir@1.0.2: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  oxc-parser@0.131.0:
+    dependencies:
+      '@oxc-project/types': 0.131.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.131.0
+      '@oxc-parser/binding-android-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-x64': 0.131.0
+      '@oxc-parser/binding-freebsd-x64': 0.131.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.131.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.131.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-musl': 0.131.0
+      '@oxc-parser/binding-openharmony-arm64': 0.131.0
+      '@oxc-parser/binding-wasm32-wasi': 0.131.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.131.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.131.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.131.0
+
+  oxc-walker@0.7.0(oxc-parser@0.131.0):
+    dependencies:
+      magic-regexp: 0.10.0
+      oxc-parser: 0.131.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.11
+
+  package-manager-detector@1.6.0: {}
+
+  param-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.8.1
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@4.0.0:
+    dependencies:
+      error-ex: 1.3.4
+      json-parse-better-errors: 1.0.2
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-json@7.1.1:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 3.0.2
+      lines-and-columns: 2.0.4
+      type-fest: 3.13.1
+
+  parse-node-version@1.0.1: {}
+
+  parse-passwd@1.0.0: {}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.3.0
+
+  parse5-parser-stream@7.1.2:
+    dependencies:
+      parse5: 7.3.0
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  pascal-case@3.1.2:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  pascalcase@0.1.1: {}
+
+  path-browserify@1.0.1: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@2.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-scurry@2.0.1:
+    dependencies:
+      lru-cache: 11.2.4
+      minipass: 7.1.2
+
+  path-to-regexp@6.3.0: {}
+
+  path-type@3.0.0:
+    dependencies:
+      pify: 3.0.0
+
+  path-type@4.0.0: {}
+
+  pathe@0.2.0: {}
+
+  pathe@2.0.3: {}
+
+  perfect-debounce@2.1.0: {}
+
+  perfect-scrollbar@1.5.6: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  picomatch@4.0.4: {}
+
+  pidtree@0.3.1: {}
+
+  pidtree@0.6.0: {}
+
+  pify@3.0.0: {}
+
+  pify@4.0.1:
+    optional: true
+
+  pinia@2.1.7(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.27(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.27(typescript@5.9.3))
+    optionalDependencies:
+      typescript: 5.9.3
+
+  pinyin-pro@3.28.0: {}
+
+  pirates@4.0.7: {}
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  pngjs@5.0.0: {}
+
+  portfinder@1.0.38:
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  posix-character-classes@0.1.1: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-html@1.8.1:
+    dependencies:
+      htmlparser2: 8.0.2
+      js-tokens: 9.0.1
+      postcss: 8.5.6
+      postcss-safe-parser: 6.0.0(postcss@8.5.6)
+
+  postcss-less@6.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-prefix-selector@1.16.1(postcss@5.2.18):
+    dependencies:
+      postcss: 5.2.18
+
+  postcss-resolve-nested-selector@0.1.6: {}
+
+  postcss-safe-parser@6.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-safe-parser@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-sorting@8.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@5.2.18:
+    dependencies:
+      chalk: 1.1.3
+      js-base64: 2.6.4
+      source-map: 0.5.7
+      supports-color: 3.2.3
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  posthtml-parser@0.2.1:
+    dependencies:
+      htmlparser2: 3.10.1
+      isobject: 2.1.0
+
+  posthtml-rename-id@1.0.12:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  posthtml-render@1.4.0: {}
+
+  posthtml-svg-mode@1.0.3:
+    dependencies:
+      merge-options: 1.0.1
+      posthtml: 0.9.2
+      posthtml-parser: 0.2.1
+      posthtml-render: 1.4.0
+
+  posthtml@0.9.2:
+    dependencies:
+      posthtml-parser: 0.2.1
+      posthtml-render: 1.4.0
+
+  preact@10.28.2: {}
+
+  prelude-ls@1.2.1: {}
+
+  prettier-linter-helpers@1.0.1:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier@3.8.0: {}
+
+  pretty-bytes@5.6.0: {}
+
+  pretty-bytes@6.1.1: {}
+
+  pretty-format@29.7.0:
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
+  pretty-quick@4.2.2(prettier@3.8.0):
+    dependencies:
+      '@pkgr/core': 0.2.9
+      ignore: 7.0.5
+      mri: 1.2.0
+      picocolors: 1.1.1
+      picomatch: 4.0.3
+      prettier: 3.8.0
+      tinyexec: 0.3.2
+      tslib: 2.8.1
+
+  print-js@1.6.0: {}
+
+  promise-polyfill@7.1.2: {}
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  proto-list@1.2.4: {}
+
+  proxy-from-env@1.1.0: {}
+
+  prr@1.0.1:
+    optional: true
+
+  punycode.js@2.3.1: {}
+
+  punycode@2.3.1: {}
+
+  pure-rand@6.1.0: {}
+
+  qified@0.6.0:
+    dependencies:
+      hookified: 1.15.0
+
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
+  qs@6.14.1:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@0.2.11: {}
+
+  quansync@1.0.0: {}
+
+  query-string@4.3.4:
+    dependencies:
+      object-assign: 4.1.1
+      strict-uri-encode: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  quick-lru@4.0.1: {}
+
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  rangy@1.3.2: {}
+
+  react-is@18.3.1: {}
+
+  read-pkg-up@10.1.0:
+    dependencies:
+      find-up: 6.3.0
+      read-pkg: 8.1.0
+      type-fest: 4.41.0
+
+  read-pkg-up@7.0.1:
+    dependencies:
+      find-up: 4.1.0
+      read-pkg: 5.2.0
+      type-fest: 0.8.1
+
+  read-pkg@3.0.0:
+    dependencies:
+      load-json-file: 4.0.0
+      normalize-package-data: 2.5.0
+      path-type: 3.0.0
+
+  read-pkg@5.2.0:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 2.5.0
+      parse-json: 5.2.0
+      type-fest: 0.6.0
+
+  read-pkg@8.1.0:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 6.0.2
+      parse-json: 7.1.1
+      type-fest: 4.41.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  readdirp@5.0.0: {}
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regenerate-unicode-properties@10.2.2:
+    dependencies:
+      regenerate: 1.4.2
+
+  regenerate@1.4.2: {}
+
+  regenerator-runtime@0.11.1: {}
+
+  regex-not@1.0.2:
+    dependencies:
+      extend-shallow: 3.0.2
+      safe-regex: 1.1.0
+
+  regexp-tree@0.1.27: {}
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  regexpu-core@6.4.0:
+    dependencies:
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.2.2
+      regjsgen: 0.8.0
+      regjsparser: 0.13.0
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.2.1
+
+  regjsgen@0.8.0: {}
+
+  regjsparser@0.13.0:
+    dependencies:
+      jsesc: 3.1.0
+
+  relateurl@0.2.7: {}
+
+  repeat-element@1.1.4: {}
+
+  repeat-string@1.6.1: {}
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-main-filename@2.0.0: {}
+
+  requires-port@1.0.0: {}
+
+  resize-observer-polyfill@1.5.1: {}
+
+  resolve-cwd@3.0.0:
+    dependencies:
+      resolve-from: 5.0.0
+
+  resolve-dir@1.0.1:
+    dependencies:
+      expand-tilde: 2.0.2
+      global-modules: 1.0.0
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  resolve-global@1.0.0:
+    dependencies:
+      global-dirs: 0.1.1
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve-url@0.2.1: {}
+
+  resolve.exports@2.0.3: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  ret@0.1.15: {}
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rimraf@5.0.10:
+    dependencies:
+      glob: 10.5.0
+
+  rollup-plugin-purge-icons@0.10.0:
+    dependencies:
+      '@purge-icons/core': 0.10.0
+      '@purge-icons/generated': 0.10.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  rollup-plugin-visualizer@5.14.0(rollup@4.52.5):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.52.5
+
+  rollup@2.79.2:
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  rollup@4.52.5:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.52.5
+      '@rollup/rollup-android-arm64': 4.52.5
+      '@rollup/rollup-darwin-arm64': 4.52.5
+      '@rollup/rollup-darwin-x64': 4.52.5
+      '@rollup/rollup-freebsd-arm64': 4.52.5
+      '@rollup/rollup-freebsd-x64': 4.52.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+      '@rollup/rollup-linux-arm64-gnu': 4.52.5
+      '@rollup/rollup-linux-arm64-musl': 4.52.5
+      '@rollup/rollup-linux-loong64-gnu': 4.52.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-musl': 4.52.5
+      '@rollup/rollup-linux-s390x-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-musl': 4.52.5
+      '@rollup/rollup-openharmony-arm64': 4.52.5
+      '@rollup/rollup-win32-arm64-msvc': 4.52.5
+      '@rollup/rollup-win32-ia32-msvc': 4.52.5
+      '@rollup/rollup-win32-x64-gnu': 4.52.5
+      '@rollup/rollup-win32-x64-msvc': 4.52.5
+      fsevents: 2.3.3
+
+  run-async@2.4.1: {}
+
+  run-async@3.0.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safe-regex@1.1.0:
+    dependencies:
+      ret: 0.1.15
+
+  safer-buffer@2.1.2: {}
+
+  sax@1.4.4:
+    optional: true
+
+  scroll-into-view-if-needed@2.2.31:
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+
+  secure-compare@3.0.1: {}
+
+  select@1.1.2: {}
+
+  semver@5.7.2: {}
+
+  semver@6.3.1: {}
+
+  semver@7.6.0:
+    dependencies:
+      lru-cache: 6.0.0
+
+  semver@7.7.3: {}
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  set-blocking@2.0.0: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  set-value@2.0.1:
+    dependencies:
+      extend-shallow: 2.0.1
+      is-extendable: 0.1.1
+      is-plain-object: 2.0.4
+      split-string: 3.1.0
+
+  shallow-equal@1.2.1: {}
+
+  shebang-command@1.2.0:
+    dependencies:
+      shebang-regex: 1.0.0
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@1.0.0: {}
+
+  shebang-regex@3.0.0: {}
+
+  shell-quote@1.8.3: {}
+
+  showdown@2.1.0:
+    dependencies:
+      commander: 9.5.0
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  smob@1.5.0: {}
+
+  snapdragon-node@2.1.1:
+    dependencies:
+      define-property: 1.0.0
+      isobject: 3.0.1
+      snapdragon-util: 3.0.1
+
+  snapdragon-util@3.0.1:
+    dependencies:
+      kind-of: 3.2.2
+
+  snapdragon@0.8.2:
+    dependencies:
+      base: 0.11.2
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      map-cache: 0.2.2
+      source-map: 0.5.7
+      source-map-resolve: 0.5.3
+      use: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  sortablejs@1.14.0: {}
+
+  sortablejs@1.15.6: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map-resolve@0.5.3:
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.2
+      resolve-url: 0.2.1
+      source-map-url: 0.4.1
+      urix: 0.1.0
+
+  source-map-support@0.5.13:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map-url@0.4.1: {}
+
+  source-map@0.5.7: {}
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  source-map@0.8.0-beta.0:
+    dependencies:
+      whatwg-url: 7.1.0
+
+  sourcemap-codec@1.4.8: {}
+
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.22
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+
+  spdx-license-ids@3.0.22: {}
+
+  split-string@3.1.0:
+    dependencies:
+      extend-shallow: 3.0.2
+
+  split2@3.2.2:
+    dependencies:
+      readable-stream: 3.6.2
+
+  split2@4.2.0: {}
+
+  sprintf-js@1.0.3: {}
+
+  stable@0.1.8: {}
+
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
+  static-extend@0.1.2:
+    dependencies:
+      define-property: 0.2.5
+      object-copy: 0.1.0
+
+  statuses@1.5.0: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  strict-uri-encode@1.1.0: {}
+
+  string-argv@0.3.2: {}
+
+  string-length@4.0.2:
+    dependencies:
+      char-regex: 1.0.2
+      strip-ansi: 6.0.1
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.padend@3.1.6:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringify-object@3.3.0:
+    dependencies:
+      get-own-enumerable-property-symbols: 3.0.2
+      is-obj: 1.0.1
+      is-regexp: 1.0.0
+
+  strip-ansi@3.0.1:
+    dependencies:
+      ansi-regex: 2.1.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-bom@4.0.0: {}
+
+  strip-comments@2.0.1: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  stylelint-config-html@1.1.0(postcss-html@1.8.1)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss-html: 1.8.1
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-prettier@9.0.5(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-recommended-vue@1.6.1(postcss-html@1.8.1)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss-html: 1.8.1
+      semver: 7.7.3
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-html: 1.1.0(postcss-html@1.8.1)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
+
+  stylelint-config-recommended@14.0.1(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-standard@36.0.1(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
+
+  stylelint-order@6.0.4(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss: 8.5.6
+      postcss-sorting: 8.0.2(postcss@8.5.6)
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint@16.26.1(typescript@5.9.3):
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-syntax-patches-for-csstree': 1.0.25
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      css-functions-list: 3.2.3
+      css-tree: 3.1.0
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 11.1.2
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 7.0.5
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.6)
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.2.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  stylis@4.3.6: {}
+
+  supports-color@2.0.0: {}
+
+  supports-color@3.2.3:
+    dependencies:
+      has-flag: 1.0.0
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svg-baker@1.7.0:
+    dependencies:
+      bluebird: 3.7.2
+      clone: 2.1.2
+      he: 1.2.0
+      image-size: 0.5.5
+      loader-utils: 1.4.2
+      merge-options: 1.0.1
+      micromatch: 3.1.0
+      postcss: 5.2.18
+      postcss-prefix-selector: 1.16.1(postcss@5.2.18)
+      posthtml-rename-id: 1.0.12
+      posthtml-svg-mode: 1.0.3
+      query-string: 4.3.4
+      traverse: 0.6.11
+    transitivePeerDependencies:
+      - supports-color
+
+  svg-tags@1.0.0: {}
+
+  svgo@2.8.0:
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 4.3.0
+      css-tree: 1.1.3
+      csso: 4.2.0
+      picocolors: 1.1.1
+      stable: 0.1.8
+
+  swagger-ui-dist@5.31.0:
+    dependencies:
+      '@scarf/scarf': 1.4.0
+
+  synckit@0.11.12:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
+  table@6.9.0:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  temp-dir@2.0.0: {}
+
+  temp-dir@3.0.0: {}
+
+  tempfile@5.0.0:
+    dependencies:
+      temp-dir: 3.0.0
+
+  tempy@0.6.0:
+    dependencies:
+      is-stream: 2.0.1
+      temp-dir: 2.0.0
+      type-fest: 0.16.0
+      unique-string: 2.0.0
+
+  terser@5.46.0:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  text-extensions@2.4.0: {}
+
+  text-table@0.2.0: {}
+
+  throttle-debounce@5.0.2: {}
+
+  through2@4.0.2:
+    dependencies:
+      readable-stream: 3.6.2
+
+  through@2.3.8: {}
+
+  tiny-emitter@2.1.0: {}
+
+  tinycolor2@1.6.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  tinymce@5.10.9: {}
+
+  tinymce@6.6.2: {}
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  tmpl@1.0.5: {}
+
+  to-object-path@0.3.0:
+    dependencies:
+      kind-of: 3.2.2
+
+  to-regex-range@2.1.1:
+    dependencies:
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  to-regex@3.0.2:
+    dependencies:
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      regex-not: 1.0.2
+      safe-regex: 1.1.0
+
+  totalist@3.0.1: {}
+
+  tr46@0.0.3: {}
+
+  tr46@1.0.1:
+    dependencies:
+      punycode: 2.3.1
+
+  traverse@0.6.11:
+    dependencies:
+      gopd: 1.2.0
+      typedarray.prototype.slice: 1.0.5
+      which-typed-array: 1.1.20
+
+  trim-newlines@3.0.1: {}
+
+  ts-api-utils@1.4.3(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-jest@29.4.6(@babel/core@7.29.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.7))(jest-util@29.7.0)(jest@29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3)))(typescript@5.9.3):
+    dependencies:
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      handlebars: 4.7.8
+      jest: 29.7.0(@types/node@20.19.30)(ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3))
+      json5: 2.2.3
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.7.3
+      type-fest: 4.41.0
+      typescript: 5.9.3
+      yargs-parser: 21.1.1
+    optionalDependencies:
+      '@babel/core': 7.29.7
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.29.7)
+      jest-util: 29.7.0
+
+  ts-node@10.9.2(@types/node@20.19.30)(typescript@5.9.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.12
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.19.30
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.9.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+
+  tslib@1.14.1: {}
+
+  tslib@2.3.0: {}
+
+  tslib@2.8.1: {}
+
+  tsutils@3.21.0(typescript@5.9.3):
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.9.3
+
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.2
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-detect@4.0.8: {}
+
+  type-fest@0.16.0: {}
+
+  type-fest@0.18.1: {}
+
+  type-fest@0.20.2: {}
+
+  type-fest@0.21.3: {}
+
+  type-fest@0.6.0: {}
+
+  type-fest@0.8.1: {}
+
+  type-fest@3.13.1: {}
+
+  type-fest@4.41.0: {}
+
+  type-level-regexp@0.1.17: {}
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typedarray.prototype.slice@1.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      math-intrinsics: 1.1.0
+      typed-array-buffer: 1.0.3
+      typed-array-byte-offset: 1.0.4
+
+  typescript@5.9.3: {}
+
+  uc.micro@2.1.0: {}
+
+  ufo@1.6.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  unconfig-core@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      quansync: 1.0.0
+
+  unconfig@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      defu: 6.1.4
+      jiti: 2.6.1
+      quansync: 1.0.0
+      unconfig-core: 7.5.0
+
+  undici-types@6.21.0: {}
+
+  undici@7.18.2: {}
+
+  unicode-canonical-property-names-ecmascript@2.0.1: {}
+
+  unicode-match-property-ecmascript@2.0.0:
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.1
+      unicode-property-aliases-ecmascript: 2.2.0
+
+  unicode-match-property-value-ecmascript@2.2.1: {}
+
+  unicode-property-aliases-ecmascript@2.2.0: {}
+
+  union-value@1.0.1:
+    dependencies:
+      arr-union: 3.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      set-value: 2.0.1
+
+  union@0.5.0:
+    dependencies:
+      qs: 6.14.1
+
+  unique-string@2.0.0:
+    dependencies:
+      crypto-random-string: 2.0.0
+
+  universalify@2.0.1: {}
+
+  unocss@66.7.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      '@unocss/cli': 66.7.0
+      '@unocss/core': 66.7.0
+      '@unocss/preset-attributify': 66.7.0
+      '@unocss/preset-icons': 66.7.0
+      '@unocss/preset-mini': 66.7.0
+      '@unocss/preset-tagify': 66.7.0
+      '@unocss/preset-typography': 66.7.0
+      '@unocss/preset-uno': 66.7.0
+      '@unocss/preset-web-fonts': 66.7.0
+      '@unocss/preset-wind': 66.7.0
+      '@unocss/preset-wind3': 66.7.0
+      '@unocss/preset-wind4': 66.7.0
+      '@unocss/transformer-attributify-jsx': 66.7.0
+      '@unocss/transformer-compile-class': 66.7.0
+      '@unocss/transformer-directives': 66.7.0
+      '@unocss/transformer-variant-group': 66.7.0
+      '@unocss/vite': 66.7.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+    transitivePeerDependencies:
+      - vite
+
+  unpipe@1.0.0: {}
+
+  unplugin-icons@0.22.0(@vue/compiler-sfc@3.5.27)(vue-template-compiler@2.7.16):
+    dependencies:
+      '@antfu/install-pkg': 0.5.0
+      '@antfu/utils': 0.7.10
+      '@iconify/utils': 2.3.0
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 0.5.1
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.27
+      vue-template-compiler: 2.7.16
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin-vue-components@0.24.1(@babel/parser@7.29.7)(rollup@4.52.5)(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      chokidar: 3.6.0
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      local-pkg: 0.4.3
+      magic-string: 0.30.21
+      minimatch: 7.4.9
+      resolve: 1.22.11
+      unplugin: 1.16.1
+      vue: 3.5.27(typescript@5.9.3)
+    optionalDependencies:
+      '@babel/parser': 7.29.7
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  unplugin@1.16.1:
+    dependencies:
+      acorn: 8.15.0
+      webpack-virtual-modules: 0.6.2
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  unset-value@1.0.0:
+    dependencies:
+      has-value: 0.3.1
+      isobject: 3.0.1
+
+  upath@1.2.0: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  urix@0.1.0: {}
+
+  url-join@4.0.1: {}
+
+  use@3.1.1: {}
+
+  util-deprecate@1.0.2: {}
+
+  utils-merge@1.0.1: {}
+
+  uuid@9.0.1: {}
+
+  v8-compile-cache-lib@3.0.1: {}
+
+  v8-to-istanbul@9.3.0:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
+
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
+  vanilla-picker@2.12.3:
+    dependencies:
+      '@sphinxxxx/color-conversion': 2.2.2
+
+  vary@1.1.2: {}
+
+  vditor@3.11.2:
+    dependencies:
+      diff-match-patch: 1.0.5
+
+  vite-plugin-compression@0.5.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      chalk: 4.1.2
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-html@3.2.2(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      colorette: 2.0.20
+      connect-history-api-fallback: 1.6.0
+      consola: 2.15.3
+      dotenv: 16.6.1
+      dotenv-expand: 8.0.3
+      ejs: 3.1.10
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+      html-minifier-terser: 6.1.0
+      node-html-parser: 5.4.2
+      pathe: 0.2.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+
+  vite-plugin-mkcert@1.17.9(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      axios: 1.13.2(debug@4.4.3)
+      debug: 4.4.3
+      picocolors: 1.1.1
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-mock@2.9.8(mockjs@1.1.0)(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      '@types/mockjs': 1.0.10
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      connect: 3.7.0
+      debug: 4.4.3
+      esbuild: 0.14.54
+      fast-glob: 3.3.3
+      mockjs: 1.1.0
+      path-to-regexp: 6.3.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-optimize-persist@0.1.2(vite-plugin-package-config@0.1.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)))(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+      vite-plugin-package-config: 0.1.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-package-config@0.1.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      debug: 4.4.3
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-purge-icons@0.10.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      '@purge-icons/core': 0.10.0
+      '@purge-icons/generated': 0.10.0
+      rollup-plugin-purge-icons: 0.10.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  vite-plugin-pwa@1.2.0(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0))(workbox-build@7.4.0(@types/babel__core@7.20.5))(workbox-window@7.4.0):
+    dependencies:
+      debug: 4.4.3
+      pretty-bytes: 6.1.1
+      tinyglobby: 0.2.15
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+      workbox-build: 7.4.0(@types/babel__core@7.20.5)
+      workbox-window: 7.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-qiankun@1.0.15(typescript@5.9.3)(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      cheerio: 1.1.2
+      typescript: 5.9.3
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+
+  vite-plugin-svg-icons@2.0.1(vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)):
+    dependencies:
+      '@types/svgo': 2.6.4
+      cors: 2.8.5
+      debug: 4.4.3
+      etag: 1.8.1
+      fs-extra: 10.1.0
+      pathe: 0.2.0
+      svg-baker: 1.7.0
+      svgo: 2.8.0
+      vite: 7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-setup-extend-plus@0.1.0: {}
+
+  vite@7.3.5(@types/node@20.19.30)(jiti@2.6.1)(less@4.5.1)(terser@5.46.0)(tsx@4.21.0):
+    dependencies:
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.52.5
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.30
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      less: 4.5.1
+      terser: 5.46.0
+      tsx: 4.21.0
+
+  vue-color@3.3.3(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      material-colors: 1.2.6
+      tinycolor2: 1.6.0
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-component-type-helpers@2.2.12: {}
+
+  vue-cropper@0.6.5: {}
+
+  vue-cropperjs@5.0.0(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      cropperjs: 1.6.2
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-demi@0.14.10(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-eslint-parser@9.4.3(eslint@8.57.1):
+    dependencies:
+      debug: 4.4.3
+      eslint: 8.57.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.17.21
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-grid-layout-v3@3.1.2(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.9.3):
+    dependencies:
+      '@interactjs/actions': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
+      '@interactjs/auto-scroll': 1.10.27(@interactjs/utils@1.10.27)
+      '@interactjs/auto-start': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
+      '@interactjs/dev-tools': 1.10.27(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.9.3)
+      '@interactjs/interact': 1.10.27
+      '@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
+      element-resize-detector: 1.2.4
+      mitt: 3.0.1
+    transitivePeerDependencies:
+      - '@interactjs/core'
+      - '@interactjs/utils'
+      - typescript
+
+  vue-i18n@9.14.5(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@intlify/core-base': 9.14.5
+      '@intlify/shared': 9.14.5
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-infinite-scroll@2.0.2: {}
+
+  vue-print-nb-jeecg@1.0.13:
+    dependencies:
+      babel-plugin-transform-runtime: 6.23.0
+
+  vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-template-compiler@2.7.16:
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  vue-tsc@1.8.27(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 1.11.1
+      '@vue/language-core': 1.8.27(typescript@5.9.3)
+      semver: 7.7.3
+      typescript: 5.9.3
+
+  vue-types@3.0.2(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      is-plain-object: 3.0.1
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue-types@5.1.3(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      is-plain-object: 5.0.0
+    optionalDependencies:
+      vue: 3.5.27(typescript@5.9.3)
+
+  vue@3.5.27(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.27
+      '@vue/compiler-sfc': 3.5.27
+      '@vue/runtime-dom': 3.5.27
+      '@vue/server-renderer': 3.5.27(vue@3.5.27(typescript@5.9.3))
+      '@vue/shared': 3.5.27
+    optionalDependencies:
+      typescript: 5.9.3
+
+  vuedraggable@4.1.0(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.27(typescript@5.9.3)
+
+  vxe-pc-ui@4.6.12(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@vxe-ui/core': 4.2.21(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  vxe-table-plugin-antd@4.0.8(vxe-table@4.13.31(vue@3.5.27(typescript@5.9.3))):
+    dependencies:
+      vxe-table: 4.13.31(vue@3.5.27(typescript@5.9.3))
+
+  vxe-table@4.13.31(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      vxe-pc-ui: 4.6.12(vue@3.5.27(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  walker@1.0.8:
+    dependencies:
+      makeerror: 1.0.12
+
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
+  wcwidth@1.0.1:
+    dependencies:
+      defaults: 1.0.4
+
+  webidl-conversions@3.0.1: {}
+
+  webidl-conversions@4.0.2: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-encoding@2.0.0:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
+  whatwg-url@7.1.0:
+    dependencies:
+      lodash.sortby: 4.7.0
+      tr46: 1.0.1
+      webidl-conversions: 4.0.2
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.20
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-module@2.0.1: {}
+
+  which-typed-array@1.1.20:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@1.3.1:
+    dependencies:
+      isexe: 2.0.0
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  workbox-background-sync@7.4.0:
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 7.4.0
+
+  workbox-broadcast-update@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-build@7.4.0(@types/babel__core@7.20.5):
+    dependencies:
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
+      '@babel/core': 7.29.7
+      '@babel/preset-env': 7.28.6(@babel/core@7.29.7)
+      '@babel/runtime': 7.28.6
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@2.79.2)
+      '@rollup/plugin-node-resolve': 15.3.1(rollup@2.79.2)
+      '@rollup/plugin-replace': 2.4.2(rollup@2.79.2)
+      '@rollup/plugin-terser': 0.4.4(rollup@2.79.2)
+      '@surma/rollup-plugin-off-main-thread': 2.2.3
+      ajv: 8.17.1
+      common-tags: 1.8.2
+      fast-json-stable-stringify: 2.1.0
+      fs-extra: 9.1.0
+      glob: 11.1.0
+      lodash: 4.17.21
+      pretty-bytes: 5.6.0
+      rollup: 2.79.2
+      source-map: 0.8.0-beta.0
+      stringify-object: 3.3.0
+      strip-comments: 2.0.1
+      tempy: 0.6.0
+      upath: 1.2.0
+      workbox-background-sync: 7.4.0
+      workbox-broadcast-update: 7.4.0
+      workbox-cacheable-response: 7.4.0
+      workbox-core: 7.4.0
+      workbox-expiration: 7.4.0
+      workbox-google-analytics: 7.4.0
+      workbox-navigation-preload: 7.4.0
+      workbox-precaching: 7.4.0
+      workbox-range-requests: 7.4.0
+      workbox-recipes: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+      workbox-streams: 7.4.0
+      workbox-sw: 7.4.0
+      workbox-window: 7.4.0
+    transitivePeerDependencies:
+      - '@types/babel__core'
+      - supports-color
+
+  workbox-cacheable-response@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-core@7.4.0: {}
+
+  workbox-expiration@7.4.0:
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 7.4.0
+
+  workbox-google-analytics@7.4.0:
+    dependencies:
+      workbox-background-sync: 7.4.0
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-navigation-preload@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-precaching@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-range-requests@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-recipes@7.4.0:
+    dependencies:
+      workbox-cacheable-response: 7.4.0
+      workbox-core: 7.4.0
+      workbox-expiration: 7.4.0
+      workbox-precaching: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-routing@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-strategies@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-streams@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+
+  workbox-sw@7.4.0: {}
+
+  workbox-window@7.4.0:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+      workbox-core: 7.4.0
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  write-file-atomic@4.0.2:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 3.0.7
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  xe-utils@3.5.26: {}
+
+  xe-utils@3.8.4: {}
+
+  xml-name-validator@4.0.0: {}
+
+  xss@1.0.15:
+    dependencies:
+      commander: 2.20.3
+      cssfilter: 0.0.10
+
+  y18n@4.0.3: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yaml@2.3.4: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs-parser@20.2.9: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yn@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.2: {}
+
+  yoctocolors-cjs@2.1.3: {}
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..a47ef4f
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..4b07f91
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 150,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true, //语句末尾使用分号
+  vueIndentScriptAndStyle: true,
+  singleQuote: true, // 使用单引号
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  trailingComma: 'es5',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto', // 自动处理换行符（LF/CRLF）
+  rangeStart: 0,
+};
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..ddd5fb3
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..8072ced
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/resource/img/logo.png b/public/resource/img/logo.png
new file mode 100644
index 0000000..8072ced
Binary files /dev/null and b/public/resource/img/logo.png differ
diff --git a/public/resource/js/iconfont.js b/public/resource/js/iconfont.js
new file mode 100644
index 0000000..8bb5237
--- /dev/null
+++ b/public/resource/js/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_3814468='<svg><symbol id="icon-file-excel-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM575.341 477.839l-61.216 102.307-61.839-102.351a12 12 0 0 0-10.27-5.795h-38.437a12 12 0 0 0-6.406 1.853c-5.604 3.538-7.279 10.949-3.741 16.553l82.333 130.422-83.449 132.787a12 12 0 0 0-1.84 6.385c0 6.627 5.373 12 12 12h34.466a12 12 0 0 0 10.208-5.692l62.707-101.474 62.29 101.445A12 12 0 0 0 582.375 772h37.486a12 12 0 0 0 6.484-1.903c5.577-3.58 7.195-11.004 3.614-16.58l-83.831-130.551 85.296-132.47a12 12 0 0 0 1.91-6.496c0-6.627-5.372-12-12-12h-35.695a12 12 0 0 0-10.297 5.839z"  ></path></symbol><symbol id="icon-file-unknown-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM402 549c0 5.4 4.4 9.5 9.8 9.5h32.4c5.4 0 9.8-4.2 9.8-9.4 0-28.2 25.8-51.6 58-51.6s58 23.4 58 51.5c0 25.3-21 47.2-49.3 50.9-19.3 2.8-34.5 20.3-34.7 40.1v32c0 5.5 4.5 10 10 10h32c5.5 0 10-4.5 10-10v-12.2c0-6 4-11.5 9.7-13.3 44.6-14.4 75-54 74.3-98.9-0.8-55.5-49.2-100.8-108.5-101.6-61.4-0.7-111.5 45.6-111.5 103z m110 227c17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32z"  ></path></symbol><symbol id="icon-file-text-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM320 482a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h384a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8H320z m0 136a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h184a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8H320z"  ></path></symbol><symbol id="icon-file-zip-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM296 136v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m64 64v64h64v-64h-64z m-64 64v64h64v-64h-64z m0 64v160h128V584H296z m48 48h32v64h-32v-64z"  ></path></symbol><symbol id="icon-file-ppt-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM468.526 760v-91.537h59.277c60.57 0 100.197-39.655 100.197-98.125C628 512.116 588.424 472 528.016 472H424c-6.627 0-12 5.373-12 12v276c0 6.627 5.373 12 12 12h32.526c6.628 0 12-5.373 12-12z m0-139.326h34.907c47.815 0 67.186-12.937 67.186-50.336 0-32.045-18.117-50.121-49.87-50.121h-52.223v100.457z"  ></path></symbol><symbol id="icon-file-word-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM512 566.095l52.814 197.012a12 12 0 0 0 11.59 8.893h31.78a12 12 0 0 0 11.587-8.878l74.375-276a12 12 0 0 0 0.413-3.122c0-6.627-5.373-12-12-12h-35.576a12 12 0 0 0-11.695 9.31l-45.79 199.105-49.76-199.321A12 12 0 0 0 528.097 472h-32.192a12 12 0 0 0-11.643 9.094l-49.66 198.927-46.096-198.732a12 12 0 0 0-11.69-9.289h-35.381a12 12 0 0 0-3.115 0.411c-6.4 1.72-10.194 8.303-8.474 14.703l74.173 276A12 12 0 0 0 415.606 772h31.99a12 12 0 0 0 11.59-8.893L512 566.095z"  ></path></symbol><symbol id="icon-file-pdf-fill" viewBox="0 0 1024 1024"><path d="M854.6 288.7c6 6 9.4 14.1 9.4 22.6V928c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h424.7c8.5 0 16.7 3.4 22.7 9.4l215.2 215.3zM790.2 326L602 137.8V326h188.2zM633.217 637.256c-15.174-0.489-31.314 0.67-49.65 2.964-24.298-14.987-40.654-35.582-52.274-65.827 0.28-1.152 0.86-3.538 1.063-4.38 0.474-1.958 0.867-3.594 1.243-5.185 4.293-18.13 6.615-31.358 7.3-44.695 0.518-10.074-0.04-19.368-1.827-27.976-3.298-18.584-16.454-29.453-33.021-30.126-15.446-0.627-29.649 7.993-33.281 21.373-5.913 21.612-2.45 50.07 10.08 98.582-15.964 38.056-37.052 82.661-51.203 107.539-18.885 9.74-33.604 18.605-45.953 28.427-16.303 12.966-26.48 26.29-29.286 40.306-1.355 6.48 0.692 14.966 5.36 21.912 5.296 7.879 13.282 12.991 22.855 13.735 24.152 1.877 53.83-23.024 86.59-79.258 3.295-1.09 6.78-2.257 11.026-3.69 2.323-0.783 10.464-3.538 11.91-4.026 7.521-2.54 12.98-4.36 18.376-6.116 23.396-7.612 41.096-12.429 57.21-15.163 27.973 14.973 60.316 24.796 82.098 24.796 17.979 0 30.126-9.319 34.515-23.985 3.857-12.886 0.794-27.824-7.473-36.084-8.56-8.41-24.3-12.434-45.658-13.123z m-247.985 128.42v-0.36l0.126-0.338c1.275-3.421 3.157-7.008 5.6-10.758 4.284-6.576 10.173-13.5 17.472-20.865 3.92-3.955 8.002-7.8 12.79-12.12 1.073-0.969 7.91-7.059 9.189-8.25l11.176-10.407-8.12 12.934c-12.326 19.638-23.46 33.78-33.013 43.004-3.507 3.387-6.6 5.9-9.091 7.505-1.027 0.662-1.916 1.144-2.613 1.424-0.409 0.163-0.771 0.268-1.13 0.302a2.202 2.202 0 0 1-1.117-0.16 2.068 2.068 0 0 1-1.269-1.911z m125.934-218.269l-2.26 4.007-1.39-4.385c-3.114-9.829-5.387-24.641-6.016-37.997-0.716-15.197 0.49-24.323 5.286-24.323 6.74 0 9.831 10.808 10.076 27.053 0.216 14.28-2.03 29.142-5.696 35.645z m-5.81 58.464l1.534-4.05 2.088 3.795c11.69 21.245 26.858 38.967 43.538 51.315l3.595 2.662-4.38 0.904c-16.328 3.372-31.544 8.457-52.34 16.842 2.174-0.876-21.623 8.863-27.638 11.169l-5.252 2.013 2.802-4.877c12.35-21.496 23.758-47.326 36.052-79.773z m157.626 76.261c-7.864 3.104-24.777 0.329-54.569-12.387l-7.561-3.227 8.199-0.607c23.295-1.724 39.807-0.44 49.422 3.08 4.09 1.498 6.824 3.388 8.037 5.553 1.31 2.336 0.71 4.81-1.362 6.31-0.448 0.427-1.155 0.88-2.166 1.278z"  ></path></symbol><symbol id="icon-location-fill" viewBox="0 0 1024 1024"><path d="M512 92C330.05 92 182 240.05 182 422c0 175.65 295.71 487.53 308.28 500.7C495.95 928.67 503.81 932 512 932c0.21 0 0.45 0 0.66 0 8.43 0 16.38-3.93 21.93-10.26l102.39-117.3C773.03 637.79 842 509.12 842 422 842 240.05 693.95 92 512 92zM512 572c-82.86 0-150-67.14-150-150s67.14-150 150-150 150 67.14 150 150S594.86 572 512 572z"  ></path></symbol><symbol id="icon-location" viewBox="0 0 1024 1024"><path d="M512 97.52381c175.055238 0 316.952381 140.312381 316.952381 313.392761 0 3.657143-0.073143 7.314286-0.219429 11.044572-3.900952 103.570286-61.805714 220.038095-156.842666 338.139428a1352.289524 1352.289524 0 0 1-148.382476 156.306286L512 926.47619l-11.50781-10.069333-13.824-12.531809a1352.289524 1352.289524 0 0 1-134.582857-143.774477c-95.012571-118.101333-152.917333-234.569143-156.818285-338.163809A292.08381 292.08381 0 0 1 195.047619 410.940952c0-170.715429 138.044952-309.540571 309.784381-313.295238L512 97.52381z m0 69.095619c-137.97181 0-249.027048 109.83619-249.027048 244.297142 0 2.755048 0.048762 5.558857 0.146286 8.387048 3.145143 82.724571 51.541333 185.173333 141.55581 297.008762a1271.271619 1271.271619 0 0 0 91.91619 102.058667l15.408762 15.11619 15.408762-15.11619a1271.271619 1271.271619 0 0 0 91.91619-102.058667c90.014476-111.835429 138.410667-214.308571 141.55581-297.008762 0.097524-2.82819 0.146286-5.607619 0.146286-8.387048 0-134.460952-111.055238-244.297143-249.027048-244.297142z m0 80.627809c87.527619 0 158.47619 72.167619 158.47619 161.231238 0 89.039238-70.948571 161.231238-158.47619 161.231238s-158.47619-72.167619-158.47619-161.231238c0-89.039238 70.948571-161.231238 158.47619-161.231238z m0 69.095619c-50.005333 0-90.550857 41.252571-90.550857 92.135619 0 50.883048 40.545524 92.135619 90.550857 92.135619s90.550857-41.252571 90.550857-92.135619c0-50.883048-40.545524-92.135619-90.550857-92.135619z"  ></path></symbol><symbol id="icon-drag-1" viewBox="0 0 1024 1024"><path d="M251.28928375 164.38571167h173.80714416v173.80714416H251.28928375V164.38571167z m0 260.71071626h173.80714416v173.80714416H251.28928375V425.09642791z m0 260.71071624h173.80714416v173.80714416H251.28928375v-173.80714416z m347.61428834-521.4214325h173.80714416v173.80714416h-173.80714418V164.38571167z m0 260.71071626h173.80714414v173.80714416h-173.80714414V425.09642791z m0 260.71071624h173.80714414v173.80714416h-173.80714414v-173.80714416z"  ></path></symbol><symbol id="icon-drag-2" viewBox="0 0 1024 1024"><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"  ></path></symbol><symbol id="icon-drag-3" viewBox="0 0 1024 1024"><path d="M147.91111147 238.93333333a45.51111147 45.51111147 0 0 1 45.5111104-45.51111146h637.15555626a45.51111147 45.51111147 0 1 1 0 91.02222293H193.42222187a45.51111147 45.51111147 0 0 1-45.5111104-45.51111147z m0 182.0444448a45.51111147 45.51111147 0 0 1 45.5111104-45.51111146h637.15555626a45.51111147 45.51111147 0 1 1 0 91.02222186H193.42222187a45.51111147 45.51111147 0 0 1-45.5111104-45.5111104z m0 182.04444374a45.51111147 45.51111147 0 0 1 45.5111104-45.5111104h637.15555626a45.51111147 45.51111147 0 1 1 0 91.02222186H193.42222187a45.51111147 45.51111147 0 0 1-45.5111104-45.51111146z m0 182.0444448a45.51111147 45.51111147 0 0 1 45.5111104-45.51111147h637.15555626a45.51111147 45.51111147 0 1 1 0 91.02222293H193.42222187a45.51111147 45.51111147 0 0 1-45.5111104-45.51111146z"  ></path></symbol><symbol id="icon-eye" viewBox="0 0 1024 1024"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"  ></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"  ></path></symbol><symbol id="icon-eye-close" viewBox="0 0 1024 1024"><path d="M955.733333 492.8c-6.4-12.8-162.133333-317.866667-443.733333-317.866667-23.466667 0-46.933333 2.133333-70.4 6.4-17.066667 4.266667-29.866667 19.2-25.6 36.266667 4.266667 17.066667 19.2 29.866667 36.266667 25.6 19.2-4.266667 38.4-4.266667 57.6-4.266667 209.066667 0 345.6 209.066667 379.733333 266.666667-10.666667 19.2-32 53.333333-64 91.733333-10.666667 12.8-8.533333 34.133333 4.266667 44.8 6.4 4.266667 12.8 6.4 21.333333 6.4s19.2-4.266667 25.6-10.666666c51.2-61.866667 78.933333-115.2 78.933333-117.333334 6.4-8.533333 6.4-19.2 0-27.733333zM215.466667 125.866667c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.733333 91.733333C138.666667 354.133333 72.533333 484.266667 68.266667 490.666667c-4.266667 8.533333-4.266667 19.2 0 29.866666 6.4 12.8 162.133333 315.733333 443.733333 315.733334 83.2 0 164.266667-27.733333 241.066667-81.066667l96 96c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c12.8-12.8 12.8-32 0-44.8L215.466667 125.866667z m243.2 334.933333l104.533333 104.533333c-12.8 12.8-32 21.333333-51.2 21.333334-40.533333 0-74.666667-34.133333-74.666667-74.666667 0-19.2 8.533333-38.4 21.333334-51.2zM512 772.266667c-209.066667 0-345.6-209.066667-379.733333-266.666667 21.333333-36.266667 81.066667-130.133333 174.933333-196.266667l104.533333 104.533334c-25.6 25.6-38.4 59.733333-38.4 96 0 76.8 61.866667 138.666667 138.666667 138.666666 36.266667 0 70.4-14.933333 96-38.4l98.133333 98.133334c-61.866667 42.666667-128 64-194.133333 64z" fill="#666666" ></path></symbol><symbol id="icon-sigma" viewBox="0 0 1024 1024"><path d="M752 856H272.8c-9.6 0-17.6-5.6-21.6-13.6s-2.4-18.4 3.2-25.6l254.4-311.2-241.6-298.4c-5.6-7.2-7.2-16.8-3.2-25.6s12.8-13.6 21.6-13.6H728c13.6 0 24 10.4 24 24s-10.4 24-24 24H336l221.6 274.4c7.2 8.8 7.2 21.6 0 30.4L323.2 808H752c13.6 0 24 10.4 24 24s-10.4 24-24 24z"  ></path></symbol><symbol id="icon-time1" viewBox="0 0 1024 1024"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64zM512 895.712c-211.584 0-383.712-172.16-383.712-383.712C128.288 300.416 300.416 128.288 512 128.288c211.552 0 383.712 172.128 383.712 383.712C895.712 723.552 723.552 895.712 512 895.712z"  ></path><path d="M671.968 512 512 512 512 288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128L448 544c0 17.76 14.272 32 32 32l191.968 0c17.76 0 32.128-14.24 32.128-32S689.728 512 671.968 512z"  ></path></symbol><symbol id="icon-select2" viewBox="0 0 1024 1024"><path d="M768 160 256 160C204.8 160 160 204.8 160 256l0 512c0 51.2 44.8 96 96 96l512 0c51.2 0 96-44.8 96-96L864 256C864 204.8 819.2 160 768 160zM800 768c0 19.2-12.8 32-32 32L256 800c-19.2 0-32-12.8-32-32L224 256c0-19.2 12.8-32 32-32l512 0c19.2 0 32 12.8 32 32L800 768z"  ></path><path d="M448 672c-6.4 0-19.2 0-25.6-6.4l-128-128c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0L448 595.2l230.4-230.4c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8l-256 256C467.2 672 454.4 672 448 672z"  ></path></symbol><symbol id="icon-department" viewBox="0 0 1024 1024"><path d="M926.592 922.688l-157.312 0c-18.432 0-33.344-21.056-33.344-46.976L735.936 745.6c0-25.984 14.912-46.976 33.344-46.976l157.312 0c18.432 0 33.408 20.992 33.408 46.976l0 130.048C960 901.632 945.088 922.688 926.592 922.688zM773.312 513.152l-224 0L549.312 624 512 624 512 513.152 249.472 513.152C171.008 513.216 174.848 566.976 174.848 624L138.688 624 138.688 569.28c0-49.472 39.552-94.144 88.448-94.208L512 474.688 512 400l37.312 0 0 74.688 260.16 0c48.896 0.064 74.624 25.152 74.688 74.688L884.16 624 848 624C847.936 550.272 835.712 513.216 773.312 513.152zM653.504 325.312 406.528 325.312c-24.256 0-43.84-21.824-43.84-48.768L362.688 150.08c0-26.944 19.648-48.768 43.84-48.768l246.976 0c24.256 0 43.968 21.824 43.968 48.768l0 126.464C697.472 303.488 677.824 325.312 653.504 325.312zM288 745.6l0 130.048c0 25.92-14.976 46.976-33.344 46.976L97.344 922.624C78.912 922.688 64 901.632 64 875.712L64 745.6c0-25.984 14.912-46.976 33.344-46.976l157.312 0C273.024 698.688 288 719.68 288 745.6zM433.344 698.688l157.312 0c18.432 0 33.344 20.992 33.344 46.976l0 130.048c0 25.92-14.912 46.976-33.344 46.976L433.344 922.688c-18.432 0-33.344-21.056-33.344-46.976L400 745.6C400 719.68 414.912 698.688 433.344 698.688z"  ></path></symbol><symbol id="icon-tipsdepartmentdown" viewBox="0 0 1025 1024"><path d="M211.451008 532.32448 509.990336 532.32448 509.990336 658.368 552.443008 658.368 552.443008 532.31936 807.169408 532.31936C878.11072 532.31936 892.079872 574.52288 892.079872 658.368L933.177408 658.368 933.177408 573.45792C938.679552 532.06464 909.579584 494.04416 868.18656 488.54208 861.563648 487.6608 854.849088 487.66592 848.226176 488.5472L552.40224 488.5472 552.40224 403.64224 509.949568 403.64224 509.949568 488.55232 185.978368 489.06176C129.103104 491.91488 84.673728 539.23776 85.40224 596.17408L85.40224 658.368 126.540544 658.368C126.540544 593.49952 122.296768 532.36544 211.451008 532.32448L211.451008 532.32448ZM390.014208 318.73152 670.890816 318.73152C699.960192 317.13152 722.284352 292.36224 720.85792 263.28256L720.85792 119.44896C722.279296 90.36928 699.955072 65.6 670.890816 64L390.014208 64C360.970304 65.61984 338.681728 90.38976 340.128576 119.44896L340.128576 263.28768C338.681728 292.34176 360.965248 317.11168 390.014208 318.73152L390.014208 318.73152ZM217.263872 723.2 38.405248 723.2C13.605056 728.1312-3.033664 751.56608 0.491712 776.60608L0.491712 924.5152C-3.013312 949.55008 13.615232 972.9696 38.405248 977.92128L217.263872 977.92128C242.058944 972.9696 258.697664 949.5552 255.218112 924.5152L255.218112 776.60608C258.723136 751.56096 242.06912 728.1312 217.263872 723.2L217.263872 723.2ZM601.314624 723.2 422.410112 723.2C397.594688 728.11136 380.950848 751.56096 384.49664 776.60608L384.49664 924.5152C380.991616 949.55008 397.62016 972.9696 422.410112 977.92128L601.314624 977.92128C626.104576 972.9696 642.728064 949.55008 639.228096 924.5152L639.228096 776.60608C642.748416 751.56608 626.114816 728.1312 601.314624 723.2L601.314624 723.2ZM1023.218112 776.60608C1026.743552 751.55584 1010.084416 728.11136 985.263872 723.2L806.405248 723.2C781.605056 728.1312 764.966336 751.56608 768.491712 776.60608L768.491712 924.5152C764.986688 949.55008 781.615232 972.9696 806.405248 977.92128L985.263872 977.92128C1010.06912 972.99008 1026.71808 949.56032 1023.218112 924.5152L1023.218112 776.60608 1023.218112 776.60608ZM959.785728 813.93792C961.55072 801.39648 953.210368 789.65888 940.783936 787.2L851.238144 787.2C838.821952 789.66912 830.491712 801.4016 832.256768 813.93792L832.256768 887.98848C830.501952 900.52224 838.827008 912.24704 851.238144 914.7264L940.783936 914.7264C953.202688 912.25728 961.537984 900.52736 959.785728 887.98848L959.785728 813.93792 959.785728 813.93792ZM575.785728 813.93792C577.55072 801.39648 569.210368 789.65888 556.783936 787.2L467.238144 787.2C454.821952 789.66912 446.491712 801.4016 448.256768 813.93792L448.256768 887.98848C446.501952 900.52224 454.827008 912.24704 467.238144 914.7264L556.783936 914.7264C569.202688 912.25728 577.537984 900.52736 575.785728 887.98848L575.785728 813.93792 575.785728 813.93792ZM191.785728 813.93792C193.55072 801.39648 185.210368 789.65888 172.783936 787.2L83.238144 787.2C70.821952 789.66912 62.491712 801.4016 64.256768 813.93792L64.256768 887.98848C62.501952 900.52224 70.827008 912.24704 83.238144 914.7264L172.783936 914.7264C185.202688 912.25728 193.537984 900.52736 191.785728 887.98848L191.785728 813.93792 191.785728 813.93792Z" fill="#333" ></path></symbol><symbol id="icon-input1" viewBox="0 0 1024 1024"><path d="M118.784 727.04h778.24V296.96h-778.24v430.08zM77.824 256h860.16v512H77.824V256zM194.56 409.6v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48V409.6c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z"  ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M853.333333 149.333333h-138.666666V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v42.666666h-277.333334V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v42.666666H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666667v618.666667C96 883.2 130.133333 917.333333 170.666667 917.333333h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666666v-618.666667C928 183.466667 893.866667 149.333333 853.333333 149.333333zM170.666667 213.333333h138.666666v64c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-64h277.333334v64c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-64H853.333333c6.4 0 10.666667 4.266667 10.666667 10.666667v194.133333c-4.266667-2.133333-6.4-2.133333-10.666667-2.133333H170.666667c-4.266667 0-6.4 0-10.666667 2.133333v-194.133333c0-6.4 4.266667-10.666667 10.666667-10.666667z m682.666666 640H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666666V477.866667c4.266667 2.133333 6.4 2.133333 10.666667 2.133333h682.666666c4.266667 0 6.4 0 10.666667-2.133333v364.8c0 6.4-4.266667 10.666667-10.666667 10.666666z"  ></path><path d="M384 608h-85.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h85.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM725.333333 608h-192c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h192c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z"  ></path></symbol><symbol id="icon-email1" viewBox="0 0 1024 1024"><path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"  ></path></symbol><symbol id="icon-user1" viewBox="0 0 1024 1024"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z"  ></path></symbol><symbol id="icon-number1" viewBox="0 0 1024 1024"><path d="M279.273 791.273h512a46.545 46.545 0 0 1 0 93.09h-512a46.545 46.545 0 0 1 0-93.09z m33.838-617.984v478.347H193.722V395.171c0-37.004-0.884-59.299-2.653-66.746a24.948 24.948 0 0 0-14.615-16.99c-8.006-3.863-25.786-5.771-53.341-5.771H111.29v-55.855c57.717-12.38 101.562-37.888 131.491-76.52h70.284z m303.71 396.8v81.547H354.163v-68.235c77.778-127.256 124.044-206.01 138.706-236.218 14.662-30.255 22.016-53.854 22.016-70.75 0-13.032-2.234-22.714-6.656-29.137-4.422-6.377-11.171-9.588-20.247-9.588a22.249 22.249 0 0 0-20.201 10.612c-4.469 7.121-6.656 21.178-6.656 42.263v45.522H354.164V318.65c0-26.763 1.397-47.942 4.143-63.348 2.746-15.5 9.542-30.72 20.387-45.661 10.798-14.988 24.902-26.298 42.217-33.978 17.361-7.68 38.167-11.544 62.37-11.544 47.477 0 83.317 11.776 107.707 35.328 24.296 23.552 36.445 53.341 36.445 89.368 0 27.368-6.842 56.32-20.48 86.853-13.731 30.534-54.04 95.325-121.018 194.42H616.82z m270.615-189.394c18.152 6.098 31.65 16.105 40.494 29.976 8.844 13.917 13.312 46.452 13.312 97.652 0 38.028-4.329 67.49-13.033 88.53-8.657 20.945-23.598 36.91-44.87 47.848-21.27 10.938-48.593 16.384-81.873 16.384-37.795 0-67.49-6.33-89.088-19.084-21.55-12.66-35.747-28.253-42.542-46.638-6.796-18.432-10.194-50.362-10.194-95.884v-37.841h119.39v77.73c0 20.667 1.21 33.84 3.723 39.425 2.42 5.585 7.913 8.424 16.337 8.424 9.31 0 15.36-3.537 18.34-10.612 2.932-7.121 4.421-25.6 4.421-55.575v-33.047c0-18.34-2.048-31.744-6.19-40.216a30.72 30.72 0 0 0-18.34-16.71c-8.052-2.653-23.738-4.189-46.964-4.561V357.05c28.393 0 45.894-1.07 52.597-3.258a22.947 22.947 0 0 0 14.475-14.15c2.933-7.307 4.422-18.711 4.422-34.257V278.76c0-16.757-1.722-27.741-5.12-33.048-3.49-5.352-8.844-8.005-16.151-8.005-8.285 0-13.964 2.792-16.99 8.378-3.025 5.632-4.56 17.64-4.56 35.933v39.284h-119.39V280.53c0-45.66 10.473-76.567 31.325-92.625 20.9-16.058 54.086-24.064 99.608-24.064 56.878 0 95.51 11.17 115.805 33.373 20.293 22.249 30.394 53.202 30.394 92.765 0 26.81-3.63 46.173-10.892 58.089-7.307 11.916-20.107 22.807-38.446 32.628z"  ></path></symbol><symbol id="icon-190tree" viewBox="0 0 1024 1024"><path d="M800 832c-41.6 0-76.8 25.6-89.6 64H288c-19.2 0-32-12.8-32-32V537.6c0 3.2 22.4 6.4 32 6.4h422.4c12.8 38.4 48 64 89.6 64 54.4 0 96-41.6 96-96s-41.6-96-96-96c-41.6 0-76.8 25.6-89.6 64H288c-19.2 0-32-12.8-32-32V185.6c32-12.8 64-48 64-89.6 0-54.4-41.6-96-96-96-51.2 0-96 41.6-96 96 0 41.6 32 76.8 64 89.6V864c0 54.4 44.8 96 96 96h422.4c12.8 38.4 48 64 89.6 64 54.4 0 96-41.6 96-96s-41.6-96-96-96z m0-384c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64zM160 96c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m640 896c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z"  ></path></symbol><symbol id="icon-dict-fill" viewBox="0 0 1024 1024"><path d="M764 888H200V324a4 4 0 0 0-4-4h-64a4 4 0 0 0-4 4v596a40 40 0 0 0 40 40h596a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4zM551.9 311.8h-57.5v327.1h56.8c83 0 120.4-60.6 120.4-172.6 0-99.9-40.2-154.5-119.7-154.5zM856 128H312a40 40 0 0 0-40 40v608a40 40 0 0 0 40 40h544a40 40 0 0 0 40-40V168a40 40 0 0 0-40-40zM552.8 694H430.2a4 4 0 0 1-4-4V260a4 4 0 0 1 4-4h128.5c116 0 183.1 74.2 183.1 208.9 0 144.8-63.5 229.1-189 229.1z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M648.6 538.9c63.2-46.6 104.2-121.6 104.2-206C752.8 191.8 638 77 496.9 77S241 191.8 241 332.9c0 84.4 41.1 159.4 104.2 206C200.4 598.7 98.3 741.4 98.3 907.5c0 22.1 17.9 40 40 40s40-17.9 40-40c0-175.8 143-318.7 318.7-318.7s318.7 143 318.7 318.7c0 22.1 17.9 40 40 40s40-17.9 40-40c-0.1-166.1-102.3-308.8-247.1-368.6z m-327.7-206c0-97.1 79-176 176-176s176 79 176 176-79 176-176 176-176-79-176-176z"  ></path></symbol><symbol id="icon-user-circle" viewBox="0 0 1024 1024"><path d="M509.44 1018.368c-141.312 0-277.504-59.904-372.736-164.352l-19.968-21.504 19.968-21.504c95.744-104.448 231.424-164.352 372.736-164.352 141.312 0 277.504 59.904 372.736 164.352l19.968 21.504-19.968 21.504c-95.232 104.448-231.424 164.352-372.736 164.352zM204.8 832.512c81.92 77.824 190.976 121.856 304.64 121.856 113.664 0 222.72-44.032 304.64-121.856-81.92-77.824-190.976-121.856-304.64-121.856-113.664 0-222.72 44.032-304.64 121.856zM509.952 600.576c-89.088 0-161.792-72.704-161.792-161.792 0-89.088 72.704-161.792 161.792-161.792s161.792 72.704 161.792 161.792c0 89.088-72.192 161.792-161.792 161.792z m0-259.584c-53.76 0-97.792 44.032-97.792 97.792s44.032 97.792 97.792 97.792 97.792-44.032 97.792-97.792-43.52-97.792-97.792-97.792z"  ></path><path d="M119.296 719.36c-33.792-63.488-51.2-134.144-51.2-206.848 0-243.712 198.144-441.344 441.344-441.344s441.344 198.144 441.344 441.344c0 72.192-17.92 143.36-51.2 206.336 16.384 15.36 31.744 31.744 46.08 49.152 45.568-77.312 69.12-165.376 69.12-255.488 0-279.04-226.816-505.856-505.856-505.856C230.4 7.168 4.096 233.984 4.096 512.512c0 90.112 24.064 178.688 69.632 255.488 13.824-16.896 29.184-33.28 45.568-48.64z"  ></path></symbol><symbol id="icon-dict" viewBox="0 0 1024 1024"><path d="M487.204 238.103h-81.567v340.516h81.567c59.425 0 102.943-13.871 130.303-41.101 26.721-27.868 40.083-70.88 40.083-129.158 0-59.678-13.362-103.329-40.083-129.923-27.359-27.104-70.877-40.336-130.303-40.336z"  ></path><path d="M778.859 61.224H245.306c-59.678 0-108.414 48.738-108.414 108.414v689.437c0 59.677 48.737 108.414 108.414 108.414h533.553c42.628 0 79.657-24.941 97.346-60.826H252.559c-22.269 0-40.591-18.197-40.591-40.59v-51.282c0-22.269 18.197-40.59 40.591-40.59h487.874c80.801 0 146.845-66.042 146.845-146.845V169.641c0-59.678-48.862-108.418-108.418-108.418zM677.696 581.291c-40.083 42.374-98.235 63.626-175.73 63.626H327.507v-473.11h174.458c77.494 0 135.647 21.25 175.73 63.625 38.048 39.703 57.518 97.346 57.518 172.931 0 74.95-19.468 132.59-57.516 172.93z"  ></path></symbol><symbol id="icon-btn" viewBox="0 0 1828 1024"><path d="M1322.88370217 78.26335901C1554.20991077 78.26335901 1745.77692672 273.44484711 1745.77692672 512s-191.56701595 433.73664099-426.50769668 433.73664099H509.62750045C274.68682069 945.73664099 83.11980375 750.55515289 83.11980375 512S274.68682069 78.26335901 509.62750045 78.26335901h813.25620172m0-72.28944H509.62750045C234.92762806 5.97391901 10.83036375 233.68565546 10.83036375 512s224.0972643 506.02608099 498.7971367 506.02608099h813.25620172C1593.96910242 1018.02608099 1818.0663677 790.31434454 1818.0663677 512S1593.96910242 5.97391901 1322.88370217 5.97391901z"  ></path><path d="M715.65240499 501.15658355c28.91577619-14.4578876 39.75919165-36.1447205 39.75919265-65.0604957-3.61447214-46.98813595-28.91577619-75.90391215-83.13285646-75.90391215H589.14588474c-21.68683191 0-32.53024835 10.84341645-32.53024835 32.53024835v249.39856834c0 21.68683191 10.84341645 32.53024835 32.53024835 32.53024836h90.36180075c65.0604957-3.61447214 97.59074405-36.1447205 101.20521619-97.59074505-3.61447214-43.3736638-25.30130405-68.67496785-65.06049669-75.90391215z m-93.9762719-86.7473276h32.53024835c21.68683191 0 36.1447205 10.84341645 36.1447195 32.53024835 0 21.68683191-14.4578876 32.53024835-36.1447195 36.14471951h-32.53024835v-68.67496786z m50.60260809 198.79596024h-50.60260809v-72.28944h46.98813595c28.91577619 0 43.3736638 10.84341645 46.98813595 36.14471951-3.61447214 21.68683191-18.07235974 32.53024835-43.37366381 36.14472049zM968.66544549 356.57770356H806.01420573c-14.4578876 0-25.30130405 10.84341645-25.30130405 28.91577619 0 21.68683191 10.84341645 32.53024835 25.30130405 32.53024835h46.98813596v224.09726429c0 21.68683191 10.84341645 32.53024835 32.53024735 32.53024836 21.68683191 0 32.53024835-10.84341645 32.53024835-32.53024836v-224.09726431h46.98813596c18.07235974 0 28.91577619-10.84341645 28.91577619-32.53024833 3.61447214-18.07235974-7.22894431-28.91577619-25.30130405-28.91577619zM1239.75084573 352.9632314c-21.68683191 0-32.53024835 14.4578876-32.53024733 36.1447205v166.2657119L1066.25618955 367.42112001c-7.22894431-10.84341645-14.4578876-14.4578876-28.91577622-14.45788861-21.68683191 0-32.53024835 14.4578876-32.53024734 36.1447205v253.01304049c0 21.68683191 10.84341645 32.53024835 32.53024734 32.53024836s32.53024835-10.84341645 32.53024835-32.53024836V475.8552795l137.34993672 184.33807265c7.22894431 7.22894431 14.4578876 10.84341645 28.91577617 10.84341643 21.68683191 0 32.53024835-10.84341645 32.53024736-32.53024833v-253.0130405c0-18.07235974-10.84341645-32.53024835-28.9157762-32.53024835z"  ></path></symbol><symbol id="icon-btn2" viewBox="0 0 1024 1024"><path d="M839.68 220.72888889h-72.81777778a36.40888889 36.40888889 0 0 0-36.22684444-36.40888889H111.32017778C91.47733333 184.32 75.09333333 200.74040889 75.09333333 220.98375111v472.80583111A36.40888889 36.40888889 0 0 0 111.32017778 730.45333333H111.50222222v72.81777778H75.09333333c-40.19541333 0-72.81777778-32.40391111-72.81777778-72.70855111V184.21077333C2.27555555 144.05176889 35.11637333 111.50222222 75.09333333 111.50222222h691.76888889c40.19541333 0 72.81777778 32.40391111 72.81777778 72.70855111V220.72888889zM147.91111111 329.77351111A72.81777778 72.81777778 0 0 1 220.91093333 257.13777778h727.81368889A72.81777778 72.81777778 0 0 1 1021.72444445 329.77351111v510.08853334A72.81777778 72.81777778 0 0 1 948.72462222 912.49777778H220.91093333A72.81777778 72.81777778 0 0 1 147.91111111 839.86204445v-510.08853334z m72.81777778 36.84579556v436.39694222A36.37248 36.37248 0 0 0 256.84650667 839.68h655.94254222c19.55157333 0 36.11761778-16.384 36.11761778-36.66375111V366.61930667A36.37248 36.37248 0 0 0 912.78904889 329.95555555H256.84650667C237.29493333 329.95555555 220.72888889 346.33955555 220.72888889 366.61930667z m249.43729778 271.24622222c0 13.83537778-2.18453333 26.36003555-6.5536 37.50115556-4.33265778 11.14112-10.37653333 20.53461333-18.05880889 28.21688888-7.68227555 7.64586667-16.60245333 13.54410667-26.76053333 17.62190222a86.54392889 86.54392889 0 0 1-32.51313778 6.08028445H293.54666667V439.18222222h82.35690666c9.75758222 0 18.93262222 1.82044445 27.52512 5.42492445 8.59249778 3.64088889 16.20195555 8.66531555 22.90119112 15.10968888 6.66282667 6.48078222 11.90570667 14.45432889 15.76504888 23.9570489a83.99530667 83.99530667 0 0 1 4.40547556 45.36547555c-0.87381333 4.84238222-2.18453333 9.42990222-3.82293334 13.79896889-1.67480889 4.36906667-3.78652445 8.33763555-6.37155555 11.94211556a31.60291555 31.60291555 0 0 1-8.84736 8.59249777c5.13365333 1.82044445 10.26730667 5.09724445 15.40096 9.93962667 5.09724445 4.80597333 9.75758222 10.55857778 13.83537778 17.14858666a91.85962667 91.85962667 0 0 1 13.47128889 47.40437334z m-57.70808889 0c0-12.63388445-3.71370667-22.02737778-11.17752889-28.21688889a38.19292445 38.19292445 0 0 0-25.01290667-9.24785778h-28.47175111v74.49258667h28.47175111c4.62392889 0 9.10222222-0.72817778 13.47128889-2.25735111a33.20490667 33.20490667 0 0 0 11.54161778-6.77205333 33.31413333 33.31413333 0 0 0 8.08277333-11.5052089c2.07530667-4.66033778 3.09475555-10.15808 3.09475556-16.49322666z m-18.85980445-117.85557334c0-10.55857778-2.76707555-18.05880889-8.26481778-22.5735111a28.69020445 28.69020445 0 0 0-18.67776-6.77205334h-18.85980444v58.25422222h18.85980444c6.91768889 0 13.14360889-2.18453333 18.67776-6.5536 5.49774222-4.36906667 8.26481778-11.79648 8.26481778-22.35505778z m189.47185778-24.83086222v232.10666667h-59.23726222v-232.54357333h-74.27413334V439.18222222h207.42144v55.99687111h-73.91004444zM830.75982222 730.45333333l-89.12896-163.18464v160.01706667H682.02951111V439.18222222h48.09614222l86.36188445 145.63555556v-145.63555556H876.08888889v291.27111111h-45.32906667z"  ></path></symbol><symbol id="icon-btn3" viewBox="0 0 1536 1024"><path d="M452.488242 541.251023h-100.802821v113.623092h99.272956c22.504318 0 40.41904-3.564586 53.224012-10.709057 16.369558-9.179191 24.569636-23.559925 24.569635-43.998924 0-20.989751-6.119461-35.814145-17.914722-45.054532q-18.419577-13.829982-58.34906-13.860579zM497.527475 479.367974c10.2195-8.735531 15.880001-22.550214 15.880001-41.489945 0-17.379269-5.660501-30.184241-15.880001-37.818269-11.24451-8.184779-28.654376-12.315415-53.224012-12.315415h-92.618042v104.367407h91.593032c25.594645 0 43.494069-4.589596 54.249022-12.743778z"  ></path><path d="M1407.980877 0H128.003825A128.003825 128.003825 0 0 0 0 128.003825v767.99235a128.003825 128.003825 0 0 0 128.003825 128.003825h1279.977052a128.003825 128.003825 0 0 0 128.003824-128.003825v-767.99235A128.003825 128.003825 0 0 0 1407.980877 0zM550.751487 682.503481c-21.509905 14.30424-52.199002 21.418113-91.103476 21.418113H291.806496V338.620372h167.351959c36.334299 0 64.958078 8.689635 85.458272 26.130099 18.909134 16.369558 28.623779 38.36902 28.623779 65.998386 0 20.439-5.094451 37.879463-14.809096 52.183703-9.745242 13.325126-23.559925 22.947979-41.964203 30.19954 24.034183 4.589596 41.964204 14.30424 54.249021 29.17453 11.749365 14.319539 17.899423 34.253683 17.899423 58.823319 0 36.869752-12.804972 63.994263-37.864164 81.373532zM916.297487 389.809663h-119.742552v314.188425h-59.878926V389.809663h-119.711955v-51.189291h299.333433z m346.59097 314.188425h-58.333761L1021.949981 436.868318h-2.05002v267.12977h-59.94012V338.620372h59.878926L1200.485254 602.262049h1.988825V338.620372h60.368482z"  ></path></symbol><symbol id="icon-popup2" viewBox="0 0 1024 1024"><path d="M989 614.5c-19.3 0-35 15.7-35 35v232.9c0 39.5-32.1 71.6-71.6 71.6H141.6c-6.7 0-13.2-1-19.4-2.7L486 587.5V773c0 19.3 15.7 35 35 35s35-15.7 35-35V501.3c0-0.3 0-0.5-0.1-0.8 0-0.3 0-0.6-0.1-0.9 0-0.3-0.1-0.7-0.1-1 0-0.2-0.1-0.4-0.1-0.7-0.1-0.4-0.1-0.7-0.2-1.1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.4-0.2-0.7-0.2-1.1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.4-0.2-0.7-0.3-1.1-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.7l-0.3-0.9c-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.3-0.2-0.5-0.3-0.7-0.1-0.3-0.3-0.6-0.4-0.8l-0.3-0.6c-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.2-0.2-0.4-0.3-0.5-0.2-0.3-0.4-0.6-0.6-1-0.1-0.2-0.2-0.3-0.3-0.5-0.2-0.3-0.4-0.6-0.6-1-0.1-0.2-0.2-0.3-0.3-0.5l-0.6-0.9c-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.3-0.4-0.5-0.6-0.8-0.2-0.2-0.4-0.4-0.6-0.7-0.2-0.2-0.4-0.4-0.5-0.6-0.4-0.4-0.8-0.8-1.2-1.3-0.4-0.4-0.8-0.8-1.3-1.2-0.2-0.2-0.4-0.4-0.6-0.5-0.2-0.2-0.5-0.4-0.7-0.6-0.3-0.2-0.5-0.4-0.8-0.6-0.2-0.1-0.4-0.3-0.5-0.4l-0.9-0.6c-0.2-0.1-0.3-0.2-0.5-0.3l-0.9-0.6c-0.2-0.1-0.3-0.2-0.5-0.3-0.3-0.2-0.6-0.4-1-0.5-0.2-0.1-0.4-0.2-0.5-0.3-0.3-0.2-0.6-0.3-0.9-0.5l-0.6-0.3c-0.3-0.1-0.6-0.3-0.8-0.4-0.2-0.1-0.5-0.2-0.7-0.3-0.3-0.1-0.5-0.2-0.8-0.3l-0.9-0.3c-0.2-0.1-0.5-0.2-0.7-0.2-0.3-0.1-0.6-0.2-1-0.3-0.2-0.1-0.4-0.1-0.6-0.2-0.3-0.1-0.7-0.2-1.1-0.3-0.2 0-0.4-0.1-0.6-0.1-0.4-0.1-0.7-0.2-1.1-0.2-0.2 0-0.4-0.1-0.6-0.1-0.4-0.1-0.7-0.1-1.1-0.2-0.2 0-0.5-0.1-0.7-0.1-0.3 0-0.7-0.1-1-0.1-0.3 0-0.6 0-0.9-0.1-0.3 0-0.5 0-0.8-0.1H251c-19.3 0-35 15.7-35 35s15.7 35 35 35h185.5L72.7 901.8c-1.7-6.2-2.7-12.7-2.7-19.4V141.6c0-39.5 32.1-71.6 71.6-71.6h232.9c19.3 0 35-15.7 35-35s-15.7-35-35-35H141.6C63.5 0 0 63.5 0 141.6v740.8C0 960.5 63.5 1024 141.6 1024h740.8c78.1 0 141.6-63.5 141.6-141.6V649.5c0-19.3-15.7-35-35-35z"  ></path><path d="M899.7 0H748.3C679.7 0 624 55.7 624 124.3v151.4c0 68.7 55.7 124.3 124.3 124.3h151.4c68.7 0 124.3-55.7 124.3-124.3V124.3C1024 55.7 968.3 0 899.7 0zM954 275.7c0 30-24.4 54.3-54.3 54.3H748.3c-30 0-54.3-24.4-54.3-54.3V124.3c0-30 24.4-54.3 54.3-54.3h151.4c30 0 54.3 24.4 54.3 54.3v151.4z"  ></path></symbol><symbol id="icon-popup" viewBox="0 0 1024 1024"><path d="M819.2 102.4 408.5248 102.4C352.256 102.4 307.2 147.456 307.2 203.776L307.2 614.4c0 56.32 46.08 102.4 102.4 102.4l409.6 0c56.32 0 102.4-46.08 102.4-102.4L921.6 204.8C921.6 148.48 875.52 102.4 819.2 102.4zM819.2 614.4 409.6 614.4 409.6 204.8l409.6 0L819.2 614.4zM204.8 512 102.4 512l0 307.2c0 56.32 46.08 102.4 102.4 102.4l307.2 0 0-102.4L204.8 819.2 204.8 512z"  ></path></symbol><symbol id="icon-depart2" viewBox="0 0 1024 1024"><path d="M411.20278261 292.83431884H612.91594203c12.10991304-1.42469565 21.37043478-11.63501449 21.37043478-24.10110145V73.90608696c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073h-195.89565218c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 12.46608696 9.37924638 22.67640579 21.48915942 24.21982609zM438.39072464 98.24463769h147.21855072v146.03130434H438.39072464v-146.03130434zM171.26028986 536.33855073h316.40115941V681.77623188h48.67710146V536.33855073H852.73971014V681.77623188h48.67710145V513.89959421c0-14.4844058-11.75373913-26.23814493-26.23814493-26.23814494H536.33855073V342.10504348h-48.67710146v145.67513043H150.83965217c-15.55292754 0-28.25646377 12.70353623-28.25646376 28.25646378V681.77623188h48.67710145V536.33855073zM609.3542029 731.04695652H414.6457971c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073z m-24.33855073 194.70840579h-146.03130434v-146.03130434h146.03130434v146.03130434zM244.27594203 731.04695652h-194.7084058c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073z m-24.33855072 194.70840579H73.90608696v-146.03130434h146.03130435v146.03130434zM974.43246377 731.04695652h-194.7084058c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-14.60313044-9.73542029-24.33855073-24.33855072-24.33855073z m-24.33855073 194.70840579H804.06260869v-146.03130434h146.03130435v146.03130434z"  ></path></symbol><symbol id="icon-card" viewBox="0 0 1024 1024"><path d="M96.8 466.9h414.8V98.2H96.8v368.7z m46.1-322.6h322.6v276.5H142.9V144.3z m0 0M557.7 927.8h368.7V651.3H557.7v276.5z m46.1-230.5h276.5v184.3H603.8V697.3z m0 0M557.7 98.2v506.9h368.7V98.2H557.7z m322.6 460.9H603.8V144.3h276.5v414.8z m0 0M96.8 927.8h414.8V513H96.8v414.8z m46.1-368.7h322.6v322.6H142.9V559.1z m0 0"  ></path></symbol><symbol id="icon-tab" viewBox="0 0 1024 1024"><path d="M960 960H64V64h480v224h416v672zM128 896h768V352H480V128H128v768z"  ></path><path d="M608 128h288v96h-288z"  ></path></symbol><symbol id="icon-tab1" viewBox="0 0 1024 1024"><path d="M343.25 315.125V118.25H62v787.5h900V315.125H343.25z m562.5 534.375H118.25V174.5h168.75v196.875h618.75v478.125z"  ></path><path d="M652.625 118.25h-253.125v140.625h253.125V118.25z m-56.25 84.375h-140.625V174.5h140.625v28.125zM708.875 118.25v140.625h253.125V118.25h-253.125z m196.875 84.375h-140.625V174.5h140.625v28.125z"  ></path></symbol><symbol id="icon-tab2" viewBox="0 0 1024 1024"><path d="M615.3846875 68.9234375H408.6153125c-12.9234375 0-22.153125 11.0765625-22.153125 24v46.153125c0 12.9234375 11.0765625 24 22.153125 24h206.769375c12.9234375 0 22.153125-11.0765625 22.153125-24v-46.153125c1.846875-12.9234375-9.2296875-24-22.153125-24z m315.691875 0H724.308125c-12.9234375 0-24 11.0765625-24 24v46.153125c0 12.9234375 11.0765625 24 24 24h206.7684375c12.9234375-1.8459375 24-11.0765625 24-24v-46.153125c0-12.9234375-11.0765625-24-24-24z m0 155.0765625H345.846875c-12.9225 0-24-11.0765625-24-24V92.9234375c0-12.9234375-11.0765625-24-24-24H92.9234375c-12.9234375 0-24 11.0765625-24 24v840c0 11.0765625 11.0765625 22.153125 24 22.153125h838.153125c12.9234375 0 24-11.0765625 24-24V248c0-12.9234375-11.0765625-24-24-24z"  ></path></symbol><symbol id="icon-text" viewBox="0 0 1024 1024"><path d="M962.9656745 932.80074644c-4.52473921-61.83810252-6.03298562-125.18445145-6.03298561-187.02255398 0-31.67317446 0-61.83810252 1.50824638-93.51127698 0-28.65668166 3.01649281-57.31336332-7.54123201-84.46179856-24.13194244-61.83810252-105.57724821-73.90407375-164.39885791-73.90407375-30.16492806 0-60.32985613 4.52473921-90.49478419 12.06597121-21.11544964 6.03298562-42.2308993 13.57421762-60.3298561 22.62369605l19.60720322 48.26388489c4.52473921 9.04947843 6.03298562 19.60720323 7.54123203 28.65668166 39.21440646-18.09895683 78.42881296-28.65668166 117.64321942-28.65668166 61.83810252 0 92.00303057 24.13194244 92.00303057 72.39582735v22.62369604c-9.04947843 0-24.13194244-1.50824641-43.73914568-1.50824639-78.42881296 0-137.25042267 12.06597121-179.48132195 34.68966726-40.72265287 24.13194244-61.83810252 64.85459532-61.83810253 123.67620504 0 43.73914569 13.57421762 78.42881296 40.72265288 102.5607554 27.14843525 24.13194244 61.83810252 36.19791367 102.56075542 36.19791368 36.19791367 0 66.36284173-4.52473921 88.98653777-15.08246403s42.2308993-25.64018885 57.3133633-46.75563849h3.01649283c1.50824641 10.55772482 3.01649281 27.14843525 7.54123202 51.28037771 0 1.50824641 67.87108813 0 75.41232014 0 1.50824641-10.55772482 0-16.59071043 0-24.13194245zM873.97913671 780.46785973c0 10.55772482-1.50824641 21.11544964-6.03298561 31.67317447-3.01649281 7.54123201-6.03298562 15.08246403-12.06597122 22.62369604-18.09895683 25.64018885-49.77213131 39.21440646-79.93705936 45.2473921-19.60720323 3.01649281-37.70616007 1.50824641-57.3133633-1.50824641-15.08246403-3.01649281-30.16492806-10.55772482-37.70616008-24.13194245-13.57421762-21.11544964-10.55772482-54.29687052 4.5247392-73.90407375 9.04947843-12.06597121 22.62369604-19.60720323 36.19791368-24.13194245 37.70616007-12.06597121 81.44530576-12.06597121 119.15146583-12.06597121l33.18142086 1.50824639v34.68966727zM585.90407375 607.01952339L371.73308452 76.11678954c-3.01649281-10.55772482-12.06597121-16.59071043-22.62369604-16.59071043h-67.87108814c-10.55772482 0-21.11544964 7.54123201-24.13194244 16.59071043l-196.0720324 530.90273385c-4.52473921 10.55772482 3.01649281 22.62369604 13.57421763 22.62369604h75.41232016c10.55772482 0 21.11544964-9.04947843 24.13194245-19.60720324l49.77213129-138.75866906h193.05553958l55.80511693 138.75866906c3.01649281 10.55772482 13.57421762 19.60720323 24.13194243 19.60720324h73.90407375c12.06597121 0 21.11544964-12.06597121 15.08246403-22.62369604zM263.13934351 367.20834531l55.80511691-144.79165468 61.83810251 144.79165468h-117.64321942z"  ></path></symbol><symbol id="icon-divider" viewBox="0 0 1024 1024"><path d="M129.70666667 129.70666667h764.58666666a54.61333333 54.61333333 0 0 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 1 1 0-109.22666666z m0 655.36h764.58666666a54.61333333 54.61333333 0 0 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 0 1 0-109.22666666z m0-327.68h140.41088a54.61333333 54.61333333 0 1 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 0 1 0-109.22666666z m312.06058666 0h140.46549334a54.61333333 54.61333333 0 0 1 0 109.22666666H441.76725333a54.61333333 54.61333333 0 0 1 0-109.22666666z m312.1152 0H894.29333333a54.61333333 54.61333333 0 0 1 0 109.22666666h-140.41088a54.61333333 54.61333333 0 0 1 0-109.22666666z"  ></path></symbol><symbol id="icon-markdown" viewBox="0 0 1024 1024"><path d="M92 192C42.24 192 0 232.128 0 282.016v459.968C0 791.904 42.24 832 92 832h840C981.76 832 1024 791.872 1024 741.984V282.016C1024 232.16 981.76 192 932 192z m0 64h840c16.512 0 28 12.256 28 26.016v459.968c0 13.76-11.52 26.016-28 26.016H92C75.488 768 64 755.744 64 741.984V282.016c0-13.76 11.52-25.984 28-25.984zM160 352v320h96v-212.992l96 127.008 96-127.04V672h96V352h-96l-96 128-96-128z m544 0v160h-96l144 160 144-160h-96v-160z"  ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M251.255027 267.144745a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.048248A178.096497 178.096497 0 1 1 251.255027 0.03657a178.096497 178.096497 0 0 1 0 356.192993z"  ></path><path d="M206.712617 267.144745h89.048249v44.542409a89.048248 89.048248 0 0 0 89.048248 89.048248h267.108175v89.011678h-267.108175a177.255384 177.255384 0 0 1-89.084818-23.807149l0.03657 246.409485a89.048248 89.048248 0 0 0 89.048248 89.048248h267.108175v89.048249h-267.108175a178.096497 178.096497 0 0 1-178.096497-178.096497V267.144745z"  ></path><path d="M785.471376 934.951752a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.048248a178.096497 178.096497 0 1 1 0-356.192993 178.096497 178.096497 0 0 1 0 356.192993zM785.471376 534.28949a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.011678a178.096497 178.096497 0 1 1 0-356.156423 178.096497 178.096497 0 0 1 0 356.192993z"  ></path></symbol><symbol id="icon-map" viewBox="0 0 1024 1024"><path d="M649.6 960c-12.8 0-25.6-9.6-28.8-22.4-6.4-16 3.2-35.2 19.2-41.6l256-86.4V428.8l-115.2 38.4c-16 6.4-35.2-3.2-41.6-19.2-6.4-16 3.2-35.2 19.2-41.6l160-51.2c9.6-6.4 19.2-3.2 28.8 3.2 6.4 6.4 12.8 16 12.8 25.6v448c0 12.8-9.6 25.6-22.4 28.8l-278.4 96c-3.2 3.2-6.4 3.2-9.6 3.2z"  ></path><path d="M649.6 960c-3.2 0-6.4 0-9.6-3.2l-278.4-96c-16-6.4-25.6-22.4-19.2-41.6 6.4-16 22.4-25.6 41.6-19.2l278.4 96c16 6.4 25.6 22.4 19.2 41.6-6.4 12.8-19.2 22.4-32 22.4z"  ></path><path d="M96 960c-6.4 0-12.8-3.2-19.2-6.4-9.6-6.4-12.8-16-12.8-25.6V480c0-12.8 9.6-25.6 22.4-28.8l73.6-28.8c16-6.4 35.2 3.2 41.6 19.2s-3.2 35.2-19.2 41.6l-54.4 19.2v380.8l233.6-80c16-6.4 35.2 3.2 41.6 19.2 6.4 16-3.2 35.2-19.2 41.6l-278.4 96H96z"  ></path><path d="M480 416c-54.4 0-96-41.6-96-96s41.6-96 96-96 96 41.6 96 96-41.6 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32z"  ></path><path d="M480 688l-22.4-25.6C435.2 640 256 435.2 256 320c0-124.8 99.2-224 224-224s224 99.2 224 224c0 115.2-179.2 320-201.6 342.4l-22.4 25.6zM480 160c-89.6 0-160 70.4-160 160 0 60.8 89.6 188.8 160 272 70.4-83.2 160-211.2 160-272 0-89.6-70.4-160-160-160z"  ></path></symbol><symbol id="icon-jm-print" viewBox="0 0 1024 1024"><path d="M362.666667 853.333333l298.666667 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L362.666667 810.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333C341.333333 844.8 349.866667 853.333333 362.666667 853.333333zM362.666667 768l213.333333 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L362.666667 725.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333C341.333333 759.466667 349.866667 768 362.666667 768zM853.333333 298.666667l-42.666667 0L810.666667 85.333333c0-23.466667-19.2-42.666667-42.666667-42.666667L256 42.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667l0 213.333333L170.666667 298.666667c-70.4 0-128 57.6-128 128l0 341.333333c0 70.4 57.6 128 128 128l42.666667 0 0 42.666667c0 23.466667 19.2 42.666667 42.666667 42.666667l512 0c23.466667 0 42.666667-19.2 42.666667-42.666667l0-42.666667 42.666667 0c70.4 0 128-57.6 128-128L981.333333 426.666667C981.333333 356.266667 923.733333 298.666667 853.333333 298.666667zM256 85.333333l512 0 0 213.333333L256 298.666667 256 85.333333zM768 896l0 42.666667L256 938.666667l0-42.666667L256 682.666667l512 0L768 896zM938.666667 768c0 46.933333-38.4 85.333333-85.333333 85.333333l-42.666667 0 0-170.666667c0-23.466667-19.2-42.666667-42.666667-42.666667L256 640c-23.466667 0-42.666667 19.2-42.666667 42.666667l0 170.666667L170.666667 853.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333L85.333333 426.666667c0-46.933333 38.4-85.333333 85.333333-85.333333l682.666667 0c46.933333 0 85.333333 38.4 85.333333 85.333333L938.666667 768zM810.666667 426.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666667 42.666667-19.2 42.666667-42.666667S834.133333 426.666667 810.666667 426.666667zM682.666667 426.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666667 42.666667-19.2 42.666667-42.666667S706.133333 426.666667 682.666667 426.666667z"  ></path></symbol><symbol id="icon-phone" viewBox="0 0 1024 1024"><path d="M402.176 208.981333c-28.245333-40.256-50.901333-53.653333-81.258667-47.957333-13.098667 2.453333-21.184 6.869333-36.053333 19.712l-11.328 9.941333-22.037333 18.282667-5.76 5.034667c-3.242667 2.986667-5.589333 5.44-8.597334 8.853333-56 63.402667-71.509333 162.56-38.912 255.786667 23.445333 66.986667 65.28 133.546667 124.928 200.064 63.253333 70.549333 116.416 114.944 177.557334 147.328 48 25.386667 84.757333 36.522667 127.466666 37.824 51.626667 1.6 97.088-10.069333 134.442667-34.261334a141.866667 141.866667 0 0 0 17.109333-13.290666l7.253334-6.613334 14.293333-13.312 4.842667-4.309333 9.557333-8.256c19.285333-17.194667 25.536-27.946667 26.816-44.949333 1.92-25.941333-9.813333-46.144-43.52-74.986667l-22.805333-19.093333-10.602667-9.258667-10.026667-8.597333c-32.576-26.901333-56.704-35.605333-87.68-30.933334-21.248 3.178667-33.493333 10.624-55.189333 33.344l-9.578667 10.197334c-15.786667 16.64-24.789333 22.976-38.101333 25.642666-19.477333 3.904-38.826667-6.165333-70.229333-31.68-40.469333-32.853333-74.048-70.592-102.912-115.456-20.010667-31.296-27.904-55.04-21.824-76.650666 2.474667-8.746667 8.448-14.912 21.056-24.661334l13.12-9.898666 2.112-1.642667 19.904-16.234667c17.6-14.72 24.746667-24.746667 28.501333-40.106666 7.786667-31.594667 0.426667-57.813333-28.373333-102.933334l-13.674667-21.205333-4.864-7.466667-5.632-8.256z"  ></path></symbol><symbol id="icon-mobile-phone" viewBox="0 0 1024 1024"><path d="M746.666667 949.333333H277.333333c-40.533333 0-74.666667-34.133333-74.666666-74.666666V149.333333c0-40.533333 34.133333-74.666667 74.666666-74.666666h469.333334c40.533333 0 74.666667 34.133333 74.666666 74.666666v725.333334c0 40.533333-34.133333 74.666667-74.666666 74.666666z m-469.333334-810.666666c-6.4 0-10.666667 4.266667-10.666666 10.666666v725.333334c0 6.4 4.266667 10.666667 10.666666 10.666666h469.333334c6.4 0 10.666667-4.266667 10.666666-10.666666V149.333333c0-6.4-4.266667-10.666667-10.666666-10.666666H277.333333z"  ></path><path d="M512 768m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"  ></path><path d="M597.333333 245.333333h-170.666666c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h170.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z"  ></path></symbol><symbol id="icon-email-filled" viewBox="0 0 1024 1024"><path d="M512.01284373 570.17116374l443.25167787-369.30789546c-2.401856-0.4367008-4.55967361-1.43854507-7.05143893-1.43854507L75.81260588 199.42472214c-2.44038933 0-4.61105067 0.98899947-7.01290669 1.43854507L512.01284373 570.17116374zM987.87582293 239.08746348c0-4.16150507-1.1431296-8.01475093-2.401856-11.803776L671.2674816 489.17594241l314.6817184 314.7459392c0.80918187-3.1725056 1.92662293-6.22941333 1.92662293-9.65880213L987.87582293 239.08746348zM38.56456533 227.24515521c-1.22019413 3.81471361-2.44038933 7.61658239-2.44038933 11.84230827l0 555.16277226c0 3.46792107 1.1945056 6.51198508 1.97799893 9.68449067l314.78447147-314.77162773L38.56456533 227.24515521zM640.62133548 514.65873921l-115.94415787 96.5751776c-3.63489492 3.09544107-8.13034773 4.58536213-12.66433388 4.58536213-4.4954528 0-9.01659413-1.48992214-12.6900224-4.58536213l-115.8414048-96.52380053L66.21802454 831.96066454c3.12112852 0.8220256 6.21656959 1.9651552 9.59458134 1.9651552l872.41332051 0c3.44223253 0 6.5376736-1.13028587 9.72302294-1.9651552L640.62133548 514.65873921z"  ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M981.48588027 334.89335562V815.7849815a82.85044939 82.85044939 0 0 1-82.85044939 82.85044938H125.36456912a82.85044939 82.85044939 0 0 1-82.85044939-82.85044938V334.89335562l82.85044939 70.22956468V815.7849815h773.27086176V405.1229203l82.85044939-70.22956468zM898.63543088 125.36456912a83.87227117 83.87227117 0 0 1 29.54999276 5.41289689 82.35334669 82.35334669 0 0 1 34.68672191 25.13130254 83.26470163 83.26470163 0 0 1 12.0961656 20.02219237c3.59018571 8.5059799 5.79953147 17.72999617 6.35186822 27.42349875L981.48588027 208.2150185v27.61681732L565.76994165 590.43175918a82.85044939 82.85044939 0 0 1-103.42497721 3.2864003l-4.11490609-3.31401798L42.51411973 235.83183582v-27.61681732a82.57428165 82.57428165 0 0 1 45.48489672-73.95783361A82.68474848 82.68474848 0 0 1 125.36456912 125.36456912h773.27086176z m-12.4275674 82.85044938h-748.41572696L512 527.3825672 886.20786348 208.2150185z"  ></path></symbol><symbol id="icon-qrcode" viewBox="0 0 1024 1024"><path d="M423.836543 114.819049l0-0.274246L204.08256 114.544803c-45.911656 0-83.09451 36.932144-83.356476 82.59309l-0.023536 0 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423.836543 480.882282l0-0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c0 24.14798-19.654642 43.705408-43.88551 43.705408L208.445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717687 43.858904-43.717687l205.708082 0c24.230867 0 43.88551 19.569708 43.88551 43.717687L458.039529 393.46021zM902.246517 195.111746c-0.215918-42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.304747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.472717 80.08906 67.472717l191.70823 0 0-0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.678656 429.282067c-23.658839 0-42.834574-19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.660886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.626197c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 39.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67.079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491.666394 620.001783l-0.049119 0C491.402381 577.308425 457.919802 542.53648 415.680792 539.887141zM448.975083 811.04077c0 23.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-42.690288-19.031449-42.690288-42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19.056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.120616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.214746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849-25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.688849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701.735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 598.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.701358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055-26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.712385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z"  ></path></symbol><symbol id="icon-save" viewBox="0 0 1024 1024"><path d="M753.38336182 141.58221435H164.75650023v740.8355713h694.48699952v-634.97543336L753.38336182 141.58221435z m-125.18749238 45.60699463v185.39428711H395.75778198v-185.39428711h232.43808747zM349.40921021 836.81079102V579.90065766l21.13494872-21.1812973h282.91168214l21.13494872 21.18129729v256.91013337H349.40921021z m463.48571777 0h-91.95556641V564.97641755L668.0092926 512H355.9907074L303.06063843 564.97641755v271.83437347H211.10507203V187.18920898h138.30413818v232.0672989h325.18157958V187.18920898h57.70397188l80.60016631 81.34174348v568.27983856z m-278.09143066-602.53143311h47.7853775v92.69714355H534.80349732v-92.69714355z"  ></path></symbol><symbol id="icon-link" viewBox="0 0 1024 1024"><path d="M928 896 416 896C380.656 896 352 867.344 352 832L352 448C352 412.656 380.656 384 416 384L512 384C529.68 384 544 398.336 544 416 544 433.68 529.68 448 512 448L416 448 416 832 928 832 928 448 768 448C750.32 448 736 433.68 736 416 736 398.336 750.32 384 768 384L928 384C963.344 384 992 412.656 992 448L992 832C992 867.344 963.344 896 928 896ZM608 640 512 640C494.336 640 480 625.68 480 608 480 590.32 494.336 576 512 576L608 576 608 192 96 192 96 576 256 576C273.68 576 288 590.32 288 608 288 625.68 273.68 640 256 640L96 640C60.656 640 32 611.344 32 576L32 192C32 156.656 60.656 128 96 128L608 128C643.344 128 672 156.656 672 192L672 576C672 611.344 643.344 640 608 640Z"  ></path></symbol><symbol id="icon-field" viewBox="0 0 1024 1024"><path d="M905.53963457 264.16739029H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026963h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026963s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 474.0551954H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026962h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026962s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 682.56215968H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026963h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026963s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 892.44996478H121.22204708c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026964h784.31758749c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026964s-22.23153725 49.71026963-49.71026962 49.71026963zM432.04931635 210.45268228v388.29243944c-4.41869063 46.39625165 19.88410785 67.52311625 73.04647953 63.10442561h19.88410785v33.14017975H219.67599776v-33.14017975H249.64024362c44.18690634 2.20934532 66.41844358-18.7794352 66.41844358-63.10442561V210.45268228h-102.8726413c-55.371717-11.04672658-85.19787878 22.09345317-89.61656943 99.55862334h-36.45419772l16.57008988-159.34903097h26.5121438c4.41869063 6.62803595 9.94205392 11.04672658 16.57008988 13.25607188 4.41869063 4.41869063 12.15139925 5.5233633 23.19812583 3.31401798h404.86252931c15.46541722 2.20934532 28.72148912-3.31401797 39.7682157-16.57008986h29.82616178l13.2560719 159.34903097h-33.14017975c-6.62803595-77.46517017-37.69695447-110.60534992-92.93058738-99.55862334h-99.55862335z"  ></path></symbol><symbol id="icon-field-1" viewBox="0 0 1024 1024"><path d="M373.64622187 123.6385184H87.22962987a24.27259307 24.27259307 0 0 0-24.27259307 24.27259307v285.20296213a24.27259307 24.27259307 0 0 0 24.27259307 24.27259307h285.2029632a24.27259307 24.27259307 0 0 0 24.272592-24.27259307V147.91111147a24.27259307 24.27259307 0 0 0-23.0589632-24.27259307z m-24.272592 285.2029632h-236.65777814V172.7905184h236.65777814zM859.70488853 185.53362987H468.91614827a24.27259307 24.27259307 0 1 0 0 48.54518506h390.78874026a24.27259307 24.27259307 0 0 0 0-48.54518506zM468.91614827 365.75762987h245.76a24.27259307 24.27259307 0 1 0 0-48.54518507H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507zM373.64622187 566.61333333H87.22962987a24.27259307 24.27259307 0 0 0-24.27259307 24.27259307V876.08888853a24.27259307 24.27259307 0 0 0 24.27259307 24.27259307h285.2029632a24.27259307 24.27259307 0 0 0 24.272592-24.27259307v-285.20296213a24.27259307 24.27259307 0 0 0-23.0589632-24.27259307z m-24.272592 284.59614827h-236.65777814V615.1585184h236.65777814zM859.70488853 628.5084448H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507h390.78874026a24.27259307 24.27259307 0 0 0 0-48.54518507zM714.67614827 760.18725973H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507h245.76a24.27259307 24.27259307 0 0 0 0-48.54518507z"  ></path></symbol><symbol id="icon-fullscreen" viewBox="0 0 1024 1024"><path d="M290 236.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L169 160c-5.1-0.6-9.5 3.7-8.9 8.9L179 329.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zM642.7 423.7c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7L863.9 169c0.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4zM845 694.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L734 787.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L855 864c5.1 0.6 9.5-3.7 8.9-8.9L845 694.9zM381.3 600.3c-3.1-3.1-8.2-3.1-11.3 0L236.3 733.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L160.1 855c-0.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-0.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"  ></path></symbol><symbol id="icon-fullscreen-exit" viewBox="0 0 1024 1024"><path d="M391 240.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L280 333.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L401 410c5.1 0.6 9.5-3.7 8.9-8.9L391 240.9zM401.1 614.1L240.8 633c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7l18.9-160.1c0.6-5.1-3.7-9.4-8.8-8.8zM622.9 409.9L783.2 391c6.6-0.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3c-3.1-3.1-8.2-3.1-11.3 0L690.3 279.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L614.1 401c-0.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L623 614c-5.1-0.6-9.5 3.7-8.9 8.9L633 783.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z"  ></path></symbol><symbol id="icon-money" viewBox="0 0 1048 1024"><path d="M524.2752 0C241.516134 0 12.288102 229.228032 12.288102 511.976038c0 117.534003 39.610982 225.814016 106.203955 312.231014l38.47895-40.06103C100.53417 708.109005 67.143168 613.944013 67.143168 511.976038c0-252.460954 204.668006-457.120973 457.132032-457.120973 252.45399 0 457.120973 204.660019 457.120973 457.120973 0 252.468019-204.668006 457.12896-457.120973 457.12896-91.12105 0-176.011981-26.66496-247.303987-72.611021l-34.630042 42.907955c80.855962 53.441024 177.760973 84.558029 281.934029 84.558029 282.755994 0 511.984026-229.224038 511.984026-511.984026C1036.258202 229.228032 807.03017 0 524.2752 0zM304.851149 566.841958 304.851149 621.697024 505.983181 621.697024 505.983181 767.966003 505.983181 767.97399 505.983181 767.97399 505.983181 804.54697 560.838144 804.54697 560.838144 767.97399 560.83712 767.97399 560.838144 767.966003 560.838144 621.697024 761.973146 621.697024 761.973146 566.841958 560.838144 566.841958 560.838144 457.136026 761.973146 457.136026 761.973146 402.270003 600.358195 402.270003 718.125158 284.499968 678.615142 244.985958 533.40713 390.177997 388.213146 244.985958 348.695142 284.499968 466.462106 402.270003 304.851149 402.270003 304.851149 457.136026 505.983181 457.136026 505.983181 566.841958Z"  ></path></symbol><symbol id="icon-integer" viewBox="0 0 1024 1024"><path d="M514.077312 702.673667c40.199561 0 70.936609-16.709567 92.211145-50.126654 1.876744-2.951215 3.570315-6.145977 5.279237-9.317203 19.652596 39.590694 52.199872 59.443857 97.718579 59.443857 40.196491 0 70.932516-16.709567 92.207052-50.126654 21.272489-33.419134 31.909757-80.859609 31.909757-142.327566 0-124.82596-39.174208-187.237405-117.515461-187.237405-41.081651 0-72.479755 16.748453-94.189196 50.242288-2.00568 3.100618-3.826142 6.459109-5.646604 9.812483-19.24225-40.009226-51.016931-60.055794-95.372138-60.055794-41.080627 0-72.475662 16.748453-94.186126 50.242288-21.714558 33.503045-32.573883 82.008782-32.573883 145.528468C393.919674 641.367393 433.973926 702.673667 514.077312 702.673667zM712.807469 381.76075c32.127721 0 48.196699 43.767829 48.196699 131.304512 0 87.220481-16.506952 130.828674-49.517787 130.828674-33.600259 0-50.39783-42.343387-50.39783-127.037325C661.089573 426.790316 678.329213 381.76075 712.807469 381.76075zM517.598508 381.76075c32.131815 0 48.196699 43.767829 48.196699 131.304512 0 87.220481-16.504906 130.828674-49.51574 130.828674-33.600259 0-50.395784-42.343387-50.395784-127.037325C465.884706 426.790316 483.124346 381.76075 517.598508 381.76075z"  ></path><path d="M285.863656 416.20933l0 285.908682 64.385403 0 0-381.212258-56.681954 0.181125c-29.344329 24.019043-64.11525 42.345434-104.314811 54.984289l0 65.651232c12.763698-1.575892 26.77583-5.64558 42.035372-12.20395C246.544139 422.962128 277.05913 424.424432 285.863656 416.20933z"  ></path><path d="M897.529587 66.766636 124.898615 66.766636c-35.558867 0-64.385403 28.827559-64.385403 64.385403l0 760.717641c0 35.558867 28.827559 64.387449 64.385403 64.387449l772.630972 0c35.558867 0 64.385403-28.828582 64.385403-64.387449L961.91499 131.153062C961.916013 95.594195 933.088454 66.766636 897.529587 66.766636zM897.529587 892.719025 124.898615 892.719025 124.898615 130.299625l772.630972 0L897.529587 892.719025z"  ></path></symbol><symbol id="icon-tiaoma" viewBox="0 0 1024 1024"><path d="M392.687614 869.933065l29.827329 0L422.514943 154.067958 392.687614 154.067958 392.687614 869.933065zM452.342272 869.933065l29.830399 0L482.172671 154.067958l-29.830399 0L452.342272 869.933065zM243.547899 869.933065l89.485057 0L333.032956 154.067958l-89.485057 0L243.547899 869.933065zM64.583924 869.933065l119.309316 0L183.89324 154.067958l-119.309316-0.002047L64.583924 869.933065zM512 869.933065l89.481987 0L601.481987 154.067958l-89.481987 0L512 869.933065zM840.102666 154.067958l0 715.865107L959.415053 869.933065 959.415053 154.067958 840.102666 154.067958zM750.621702 869.933065l59.654658 0L810.276361 154.067958l-59.654658 0L750.621702 869.933065zM631.309316 869.933065l59.654658 0L690.963974 154.067958l-59.654658 0L631.309316 869.933065z"  ></path></symbol><symbol id="icon-zuhe" viewBox="0 0 1042 1024"><path d="M1036.74608 135.558l-5.363-2.926a35.596 35.596 0 0 0-7.315-7.314L814.39208 4.876a36.084 36.084 0 0 0-34.133 0L570.58308 125.318l-5.852 5.852-8.29 4.876a10.728 10.728 0 0 0-5.363 9.264v20.48l-10.24-5.851a36.084 36.084 0 0 0-36.084 0l-10.24 5.851v-19.504a10.728 10.728 0 0 0-6.827-10.728l-8.29-4.876s-3.413-4.389-5.85-5.852L263.87008 4.876a36.084 36.084 0 0 0-36.084 0L18.11008 125.318a35.109 35.109 0 0 0-7.802 7.802l-5.364 2.926a10.728 10.728 0 0 0-4.876 10.24v263.802a10.728 10.728 0 0 0 5.364 9.264l5.364 2.926a34.621 34.621 0 0 0 7.802 7.802l209.676 120.442a36.084 36.084 0 0 0 36.084 0l11.703-6.827v10.24a36.571 36.571 0 0 0 16.579 31.208l5.364 2.926-19.018 10.727a10.728 10.728 0 0 0-5.363 9.265v265.265a10.24 10.24 0 0 0 4.876 8.777 35.596 35.596 0 0 0 14.14 16.579l209.677 120.442a36.084 36.084 0 0 0 36.084 0l209.676-120.442a35.596 35.596 0 0 0 14.14-16.58 10.24 10.24 0 0 0 4.877-8.776V608.06a10.728 10.728 0 0 0-5.364-9.265L743.20008 588.07l5.365-2.926a36.571 36.571 0 0 0 18.041-31.208v-10.24l11.703 6.827a36.084 36.084 0 0 0 36.084 0l209.676-120.442a36.084 36.084 0 0 0 7.315-7.314l5.363-2.926a10.728 10.728 0 0 0 5.364-9.265v-264.29a10.728 10.728 0 0 0-5.364-10.727zM526.21008 466.164a10.728 10.728 0 0 0-10.24 0l-163.84 92.16-23.893-14.141v-31.208l146.286-83.383 5.851-5.851 7.314-4.389a10.728 10.728 0 0 0 5.364-9.264V226.743l28.282-16.092 28.282 16.092v183.345a10.728 10.728 0 0 0 5.364 9.264l8.29 4.389a35.109 35.109 0 0 0 5.85 5.851l146.286 83.383v30.72l-23.893 14.141z"  ></path></symbol><symbol id="icon-col-2" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM435.2 819.2h-256c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h256c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H190.1c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h234.2c20.1 0 36.5 16.4 36.5 36.5v387.8z m384 190.1h-256c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h256c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H599.7c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h234.2c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-3" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM307.2 819.2H204.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m230.4 190.1H460.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m230.4 190.1H716.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-4" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM113.3 241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3z m128 577.9H138.9c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m214.6 0H353.5c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5H445c20.1 0 36.5 16.4 36.5 36.5v387.8z m189.1 190.1H568.2c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m189 190.1H782.8c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-1" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0z m-76.8 819.2H179.2c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h665.6c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H190.1c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h643.8c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-zuzhijuese" viewBox="0 0 1024 1024"><path d="M853.333333 256h-341.333333l-85.333333-85.333333H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333333v512a85.333333 85.333333 0 0 0 85.333334 85.333333h682.666666a85.333333 85.333333 0 0 0 85.333334-85.333333V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z m-341.333333 85.333333a106.666667 106.666667 0 1 1-106.666667 106.666667A106.24 106.24 0 0 1 512 341.333333z m192 426.666667h-384v-42.666667a128 128 0 0 1 128-128h128a128 128 0 0 1 128 128v42.666667z"  ></path></symbol><symbol id="icon-hashtag" viewBox="0 0 1024 1024"><path d="M870.4 448a64 64 0 0 0 0-128h-114.56l26.88-148.48a64 64 0 0 0-126.08-23.04l-32 171.52h-156.8l26.88-148.48a64 64 0 0 0-126.08-23.04l-32 171.52H198.4a64 64 0 1 0 0 128h116.16l-23.36 128H153.6a64 64 0 0 0 0 128h114.56l-26.88 148.48a64 64 0 1 0 126.08 23.04l32-171.52h157.76l-26.88 148.48a64 64 0 1 0 126.08 23.04l32-171.52h137.28a64 64 0 1 0 0-128h-116.16l23.36-128z m-291.2 128h-157.76l23.36-128h157.76z"  ></path></symbol><symbol id="icon-formula" viewBox="0 0 1024 1024"><path d="M471.2 358.3h-130l19-90.4a133.5 133.5 0 0 1 130.3-106.2h52.7a32.9 32.9 0 1 0 0-65.7h-52.7c-93.8 0-175.6 66.7-194.6 158.6l-21.8 103.7H128.8a32.9 32.9 0 0 0 0 65.7h131.6l-97.3 464.5a32.7 32.7 0 0 0 25.5 38.8 30.5 30.5 0 0 0 6.7 0.7 32.9 32.9 0 0 0 32.1-26.2L327.5 424h143.7a32.9 32.9 0 1 0 0-65.7zM758.4 712l160-160a32.8 32.8 0 1 0-46.5-46.4L712 665.5 552 505.6a32.8 32.8 0 1 0-46.4 46.4l160 160-160 159.9a32.8 32.8 0 1 0 46.4 46.5l160-160 159.9 160a32.9 32.9 0 0 0 46.5-46.5z"  ></path></symbol><symbol id="icon-t" viewBox="0 0 1024 1024"><path d="M851.968 167.936l0 109.568-281.6 0 0 587.776-116.736 0 0-587.776-281.6 0 0-109.568 679.936 0z"  ></path></symbol><symbol id="icon-t-filled" viewBox="0 0 1024 1024"><path d="M832 64 192 64C121.344 64 64 121.344 64 192l0 640c0 70.656 57.344 128 128 128l640 0c70.656 0 128-57.344 128-128L960 192C960 121.344 902.656 64 832 64zM768 320 576 320l0 448c0 35.392-28.608 64-64 64s-64-28.608-64-64L448 320 256 320C220.608 320 192 291.392 192 256s28.608-64 64-64l512 0c35.392 0 64 28.608 64 64S803.392 320 768 320z"  ></path></symbol><symbol id="icon-select" viewBox="0 0 1024 1024"><path d="M912.14545437 992L111.85454563 992A79.85454563 79.85454563 0 0 1 32 912.14545437L32 111.85454563A79.85454563 79.85454563 0 0 1 111.85454563 32l800.29090875 0A79.85454563 79.85454563 0 0 1 992 111.85454563l0 800.29090875A79.85454563 79.85454563 0 0 1 912.14545437 992zM111.85454563 111.85454563l-1e-8 800.29090875 800.29090875 0L912.14545437 111.85454563z"  ></path><path d="M224 520.72727281l205.52727281 205.52727282 370.47272719-370.47272719-58.03636406-58.03636406-312.43636313 311.99999999-147.49090875-147.49090874L224 520.72727281z"  ></path></symbol><symbol id="icon-number" viewBox="0 0 1224 1024"><path d="M0 901.567122h1224.462246v122.432878H0zM122.165946 745.589771h145.12211V10.310343h-101.137624a113.030935 113.030935 0 0 1-5.279325 23.490029C142.393471 95.076129 101.063477 124.690768 14.859223 124.690768h-13.198312v109.279055h120.490205zM400.991403 563.808979a402.222256 402.222256 0 0 0-35.175725 181.780792h397.550943v-130.722604H538.194526c7.044043-27.568159 17.587863-45.971647 49.248981-82.719307 7.044043-8.17109 14.073256-16.31252 21.117299-23.490028 139.842786-146.041543 161.835029-194.030012 156.555704-303.309067C757.197523 54.205852 682.441692-17.272645 517.967001 6.217384a147.450352 147.450352 0 0 0-62.447293 22.466789c-61.572349 39.832208-85.31448 88.843916-87.983801 188.928641 0 10.217569 0 20.420309 0.874944 30.637879h137.203124c-0.874944-9.194329-0.874944-17.365419-0.874945-25.536509 2.639662-78.596688 24.631905-108.255815 58.932687-110.287465 33.425837-1.02324 56.352342 26.544919 57.167968 92.922046 0.874944 71.478497-19.278433 116.426905-118.740317 218.54328-55.373591 57.197627-80.005496 91.943295-101.107965 139.916934zM819.644816 529.078141a246.452519 246.452519 0 0 0 0.874944 43.910338c13.198312 127.652884 69.491336 181.780792 197.900528 181.780792 120.490205 0 179.437721-53.104668 198.716153-171.563223 21.117299-130.722604-20.227525-209.348951-80.910099-228.760849a39.209366 39.209366 0 0 0-14.9482-3.06972c30.786174-8.17109 55.41808-31.661119 73.005942-75.630775 8.793931-21.443549 13.198312-49.026538 13.198311-87.820676-1.764718-136.847214-84.439536-212.418671-242.759958-180.757552-72.116168 14.295699-124.894586 75.630775-136.328179 162.368893-2.639662 16.31252-2.639662 32.62504-1.749888 49.026537h134.563461a150.490413 150.490413 0 0 1-0.889774-19.411899c2.639662-55.151147 16.712918-78.596688 42.219768-85.789026 38.705161-10.20274 60.682575 14.295699 63.322237 84.765787 3.514607 76.594697-25.50685 110.287465-87.954142 109.264225-5.279325-1.02324-11.433594-1.02324-16.712919-2.04648v106.209335h13.198312c84.439536 0 101.152454 17.365419 101.152454 115.403665 0 83.742546-12.323367 110.287465-43.094712 117.435315-43.094712 11.240809-66.851673-15.318939-73.005942-91.943295a104.933993 104.933993 0 0 1 0-23.490029z"  ></path></symbol><symbol id="icon-shangchuan" viewBox="0 0 1024 1024"><path d="M646.791 799v-31.447c0-8.837 7.164-16 16-16H735c88.127 0 159.569-71.46 159.569-159.61 0-88.15-71.442-159.61-159.569-159.61-11.454 0-26.738 2.548-45.854 7.645a7.931 7.931 0 0 1-9.616-10.01c7.907-25.529 11.861-45.89 11.861-61.083 0-99.1-80.316-179.438-179.391-179.438-99.075 0-179.391 80.337-179.391 179.438 0 15.193 3.954 35.554 11.861 61.083a7.929 7.929 0 0 1-9.616 10.01c-19.116-5.097-34.4-7.646-45.854-7.646-88.127 0-159.569 71.46-159.569 159.61 0 88.15 71.442 159.61 159.569 159.61h73.2c8.837 0 16 7.164 16 16V799c0 8.837-7.163 16-16 16H289c-123.16 0-223-99.866-223-223.058 0-116.51 89.304-212.156 203.18-222.188-0.002-0.29-0.002-0.58-0.002-0.87C269.178 234.745 377.893 126 512 126s242.822 108.743 242.822 242.885l-0.001 0.869C868.696 379.786 958 475.432 958 591.942 958 715.134 858.16 815 735 815h-72.209c-8.836 0-16-7.163-16-16z m-168.66-301.848l-79.364 69.93c-13.636 11.031-33.643 8.931-44.685-4.691-11.043-13.622-8.94-33.607 4.696-44.638l126.696-108.219c11-11.252 28.92-12.857 41.826-3.141L664.347 516.97c14.014 10.55 16.814 30.449 6.253 44.447-10.56 14-30.48 16.796-44.494 6.247l-84.431-70.973v286.57c0 17.529-14.225 31.738-31.772 31.738-17.547 0-31.772-14.21-31.772-31.738v-286.11z"  ></path></symbol><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M909.3 506.3L781.7 405.6c-4.7-3.7-11.7-0.4-11.7 5.7V476H548V254h64.8c6 0 9.4-7 5.7-11.7L517.7 114.7c-2.9-3.7-8.5-3.7-11.3 0L405.6 242.3c-3.7 4.7-0.4 11.7 5.7 11.7H476v222H254v-64.8c0-6-7-9.4-11.7-5.7L114.7 506.3c-3.7 2.9-3.7 8.5 0 11.3l127.5 100.8c4.7 3.7 11.7 0.4 11.7-5.7V548h222v222h-64.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7 0.4-11.7-5.7-11.7H548V548h222v64.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.7-2.9 3.7-8.5 0.1-11.4z"  ></path></symbol><symbol id="icon-grid" viewBox="0 0 1024 1024"><path d="M128 469.333333 469.333333 469.333333 469.333333 128 128 128M128 896 469.333333 896 469.333333 554.666667 128 554.666667M554.666667 896 896 896 896 554.666667 554.666667 554.666667M554.666667 128 554.666667 469.333333 896 469.333333 896 128"  ></path></symbol><symbol id="icon-trash" viewBox="0 0 1024 1024"><path d="M394.95161173 414.51738453l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m156.0281088 0l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m156.0281088 0l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m78.0140544 441.2669952l0-577.7915904-546.0983808 0 0 577.7915904q0 13.4086656 4.2663936 24.6841344t8.8375296 16.4560896 6.3995904 5.1806208l507.0913536 0q1.8284544 0 6.3995904-5.1806208t8.8375296-16.4560896 4.2663936-24.6841344z m-409.5737856-655.8056448l273.0491904 0-29.2552704-71.3097216q-4.2663936-5.4853632-10.3612416-6.7043328l-193.2066816 0q-6.094848 1.2189696-10.3612416 6.7043328z m565.6018944 19.5035136l0 39.0070272q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-58.5105408 0 0 577.7915904q0 50.5872384-28.6457856 87.4610688t-68.8717824 36.8738304l-507.0913536 0q-40.2259968 0-68.8717824-35.6548608t-28.6457856-86.2420992l0-580.2295296-58.5105408 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-39.0070272q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l188.3308032 0 42.663936-101.7839616q9.142272-22.5509376 32.9121792-38.3975424t48.1492992-15.8466048l195.035136 0q24.379392 0 48.1492992 15.8466048t32.9121792 38.3975424l42.663936 101.7839616 188.3308032 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z"  ></path></symbol><symbol id="icon-ic" viewBox="0 0 1536 1024"><path d="M1187.84 460.8h-327.68c-22.528 0-40.96-18.432-40.96-40.96V92.16c0-22.528 18.432-40.96 40.96-40.96h327.68c22.528 0 40.96 18.432 40.96 40.96v327.68c0 22.528-18.432 40.96-40.96 40.96z"  ></path><path d="M1126.4 512v358.4c0 28.16-23.04 51.2-51.2 51.2H409.6c-28.16 0-51.2-23.04-51.2-51.2V307.2c0-28.16 23.04-51.2 51.2-51.2h358.4V153.6H389.12c-45.056 0-81.92 36.864-81.92 81.92v655.36c0 45.056 36.864 81.92 81.92 81.92h706.56c45.056 0 81.92-36.864 81.92-81.92v-378.88h-51.2z"  ></path></symbol><symbol id="icon-date" viewBox="0 0 1024 1024"><path d="M205 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24zM205 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24zM205 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24z"  ></path><path d="M870 116H745V64c0-13.3-10.7-24-24-24s-24 10.7-24 24v52H327V64c0-13.3-10.7-24-24-24s-24 10.7-24 24v52H154c-51.9 0-94 42.1-94 94v692c0 51.9 42.1 94 94 94h716c51.9 0 94-42.1 94-94V210c0-51.9-42.1-94-94-94z m46 786c0 25.4-20.6 46-46 46H154c-25.4 0-46-20.6-46-46V387h808v515z m0-563H108V210c0-25.4 20.6-46 46-46h125v68c0 13.3 10.7 24 24 24s24-10.7 24-24v-68h370v68c0 13.3 10.7 24 24 24s24-10.7 24-24v-68h125c25.4 0 46 20.6 46 46v129z"  ></path></symbol><symbol id="icon-fuwenbenkuang" viewBox="0 0 1024 1024"><path d="M218.316 307.727h87.886v205.06h-29.297v29.295h117.179v-29.294H364.79V307.727h87.882v29.293h29.294v-87.882H189.022v87.882h29.294v-29.293z m322.242 58.59h292.945v58.588H540.558v-58.588z m0 117.177h292.945v58.588H540.558v-58.588z m-351.536 117.18h644.481v58.588h-644.48v-58.587z m0 117.176h644.481v58.588h-644.48V717.85z m351.536-468.713h292.945v58.589H540.558v-58.589z m420.923 713.13H61.045V63.309h900.436v898.958z m-864.62-35.816h828.804V99.125H96.861V926.45z"  ></path></symbol><symbol id="icon-bars" viewBox="0 0 1024 1024"><path d="M170.666667 490.666667l682.666666 0 0 42.666666-682.666666 0 0-42.666666Z"  ></path><path d="M170.666667 704l682.666666 0 0 42.666667-682.666666 0 0-42.666667Z"  ></path><path d="M170.666667 277.333333l682.666666 0 0 42.666667-682.666666 0 0-42.666667Z"  ></path></symbol><symbol id="icon-slider" viewBox="0 0 1024 1024"><path d="M901.12 122.88h-757.76c-20.48 0-34.133333 13.653333-34.133333 34.133333v6.826667c0 20.48 13.653333 34.133333 34.133333 34.133333h757.76c6.826667 0 13.653333 0 20.48-6.826666s6.826667-13.653333 6.826667-20.48v-6.826667c0-27.306667-13.653333-40.96-27.306667-40.96z"  ></path><path d="M764.586667 88.746667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333zM901.12 430.08h-757.76c-20.48 0-34.133333 13.653333-34.133333 34.133333v6.826667c0 20.48 13.653333 34.133333 34.133333 34.133333h757.76c20.48 0 34.133333-13.653333 34.133333-34.133333v-6.826667c-6.826667-20.48-20.48-34.133333-34.133333-34.133333z"  ></path><path d="M552.96 395.946667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333zM901.12 737.28h-757.76c-6.826667 0-13.653333 0-20.48 6.826667-6.826667 6.826667-6.826667 13.653333-6.826667 20.48v6.826666c0 20.48 13.653333 34.133333 34.133334 34.133334h757.76c20.48 0 34.133333-13.653333 34.133333-34.133334v-6.826666c-13.653333-13.653333-27.306667-27.306667-40.96-27.306667z"  ></path><path d="M354.986667 703.146667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333z"  ></path></symbol><symbol id="icon-color" viewBox="0 0 1024 1024"><path d="M297.78046416 323.45884442c0-38.83614815 31.06891852-69.90506667 66.02145186-69.90506666s66.02145185 31.06891852 66.02145186 69.90506666S402.63806416 389.48029628 363.80191602 389.48029628s-66.02145185-31.06891852-66.02145186-66.02145186zM165.73756046 459.38536294C165.73756046 420.54921479 196.80647899 389.48029628 231.75901232 389.48029628s66.02145185 31.06891852 66.02145184 69.90506666-31.06891852 66.02145185-66.02145184 66.02145185-66.02145185-31.06891852-66.02145186-66.02145185zM476.42674566 276.85546665c0-38.83614815 31.06891852-69.90506667 66.02145184-69.90506667 34.95253333 0 66.02145185 31.06891852 66.02145185 69.90506665s-31.06891852 66.02145185-66.02145185 66.02145186c-34.95253333 0-66.02145185-31.06891852-66.02145184-66.02145184zM476.42674566 661.33333331c0-50.48699259 38.83614815-89.32314075 89.32314073-89.32314076s89.32314075 38.83614815 89.32314074 89.32314076-38.83614815 89.32314075-89.32314074 89.32314075-89.32314075-38.83614815-89.32314073-89.32314075z"  ></path><path d="M519.14650861 164.23063701C297.78046416 164.23063701 119.13418269 315.69161479 119.13418269 505.98874073s178.64628148 337.87448889 400.01232592 337.87448888c62.13783703 0 108.74121482-7.76722963 147.57736297-23.30168888 27.1853037-11.65084445 50.48699259-27.1853037 62.13783703-46.60337779 27.1853037-42.71976297 7.76722963-104.8576-11.65084445-143.69374815-42.71976297-89.32314075-3.88361482-128.15928889 15.53445927-139.81013333 11.65084445-7.76722963 23.30168889-11.65084445 34.95253333-11.65084445 19.41807408 0 50.48699259 7.76722963 81.55591112 54.37060741 15.53445925 27.1853037 34.95253333 34.95253333 42.71976295 34.95253334 15.53445925 0 27.1853037-27.1853037 27.18530371-69.90506667 0-182.5298963-178.64628148-333.99087408-400.01232593-333.99087408z m0 722.35235556c-116.50844445 0-229.13327408-38.83614815-310.68918518-112.62482963-42.71976297-34.95253333-73.78868148-77.6722963-97.09037037-124.27567408-23.30168889-42.71976297-34.95253333-93.20675555-34.95253333-147.57736296S88.06526416 401.13114073 111.36695306 350.64414813c23.30168889-46.60337778 54.37060741-85.43952592 97.09037037-124.27567407C290.01323454 156.46340739 402.63806416 117.62725923 519.14650861 117.62725923s229.13327408 38.83614815 310.68918519 112.62482963c42.71976297 34.95253333 73.78868148 77.6722963 97.09037036 124.27567408 23.30168889 46.60337778 34.95253333 97.09037037 34.95253334 151.46097777 0 85.43952592-34.95253333 112.62482963-69.90506667 112.62482963-27.1853037 0-58.25422222-19.41807408-81.5559111-54.3706074-15.53445925-23.30168889-31.06891852-34.95253333-42.71976297-34.95253333-3.88361482 0-7.76722963 0-11.65084444 3.88361481-23.30168889 15.53445925-11.65084445 58.25422222 0 77.67229629 34.95253333 73.78868148 38.83614815 139.81013333 7.76722962 190.29712592-34.95253333 58.25422222-116.50844445 85.43952592-244.66773333 85.43952592z"  ></path></symbol><symbol id="icon-radio-active" viewBox="0 0 1024 1024"><path d="M512 4.533c-279.803 0-507.467 227.665-507.467 507.467 0 279.839 227.629 507.467 507.467 507.467 279.839 0 507.467-227.629 507.467-507.467 0-279.803-227.629-507.467-507.467-507.467zM512 946.65c-239.68 0-434.65-195.006-434.65-434.65 0-239.68 194.97-434.65 434.65-434.65 239.644 0 434.65 194.97 434.65 434.65 0 239.644-195.006 434.65-434.65 434.65zM512 329.955c-100.38 0-182.045 81.665-182.045 182.045s81.665 182.045 182.045 182.045 182.045-81.665 182.045-182.045-81.665-182.045-182.045-182.045z"  ></path></symbol><symbol id="icon-input" viewBox="0 0 1669 1024"><path d="M1398.66921433 732.06637047c0 70.6134846-45.10390102 127.64034389-100.83679598 127.64034389L366.82504671 859.70671436C311.18457777 859.70671436 265.98825072 802.67985575 265.98825072 732.06637047L265.98825072 292.02605556C265.98825072 221.41257027 311.18457777 164.38571167 366.82504671 164.38571167l931.09979834 0c55.73289429 0 100.836796 57.0268586 100.83679599 127.54791786L1398.76164038 732.06637047zM1362.43821147 286.48049352c0-51.01916714-41.40686012-92.42602727-92.42602726-92.42602726L394.83013288 194.05446626c-51.01916714 0-92.42602727 41.40686012-92.42602726 92.42602726l0 451.13143898c0 51.11159317 41.40686012 92.42602727 92.42602726 92.42602727l875.18205134 0c51.01916714 0 92.42602727-41.3144341 92.42602725-92.42602727L1362.43821147 286.48049352z"  ></path><path d="M447.23569039 723.84045447c0 16.0821286-12.93964383 28.9293464-28.92934643 28.92934639l0 0c-15.89727654 0-28.9293464-12.8472178-28.92934639-28.9293464l0-392.81061538c0-15.89727654 12.93964383-28.9293464 28.92934639-28.92934639l0 0c15.89727654 0 28.9293464 12.93964383 28.92934643 28.92934639L447.23569039 723.84045447z"  ></path><path d="M556.94538452 690.75193637m-34.65976047 0a0.25460031 0.25460031 0 1 0 69.31952028 0 0.25460031 0.25460031 0 1 0-69.31952028 0Z"  ></path><path d="M691.33282806 690.75193637m-34.65976048 0a0.25460031 0.25460031 0 1 0 69.31952028 0 0.25460031 0.25460031 0 1 0-69.31952028 0Z"  ></path><path d="M821.2838225 690.75193637m-34.65976049 0a0.25460031 0.25460031 0 1 0 69.3195203 0 0.25460031 0.25460031 0 1 0-69.3195203 0Z"  ></path></symbol><symbol id="icon-switch" viewBox="0 0 1024 1024"><path d="M729.008 806.496 295.008 806.496C140.912 806.496 16 681.584 16 527.504l0-31.008c0-154.08 124.912-278.992 279.008-278.992l434 0c154.08 0 279.008 124.912 279.008 278.992l0 31.008C1008 681.584 883.088 806.496 729.008 806.496zM946.96 496.768c0-119.696-97.04-216.736-216.736-216.736L294.384 280.032c-119.696 0-216.736 97.04-216.736 216.736l0 31.008c0 119.696 97.04 216.736 216.736 216.736L730.24 744.512c119.696 0 216.736-97.04 216.736-216.736L946.976 496.768zM702.32 672.576c-90.72 0-164.272-73.536-164.272-164.256 0-90.72 73.552-164.272 164.272-164.272 90.72 0 164.272 73.536 164.272 164.272C866.592 599.04 793.04 672.576 702.32 672.576z"  ></path></symbol><symbol id="icon-checkbox" viewBox="0 0 1024 1024"><path d="M797.8 248.4c-11.4-11.6-30.2-11.6-41.6-0.2L409.2 592.4l-146.8-148c-11.4-11.6-30.2-11.6-41.6-0.2l-55.8 55.4c-11.6 11.4-11.6 30.2-0.2 41.6l222.8 224.6c11.4 11.6 30.2 11.6 41.6 0.2l423.6-420.2c11.6-11.4 11.6-30.2 0.2-41.6l-55.2-55.8z"  ></path><path d="M857 59h-696c-55.2 0-100 44.8-100 100v696c0 55.2 44.8 100 100 100h696c55.2 0 100-44.8 100-100v-696c0-55.2-44.8-100-100-100z m53.8 777.8c0 39.8-32.2 72-72 72H179.2c-39.8 0-72-32.2-72-72V177.2c0-39.8 32.2-72 72-72h659.6c39.8 0 72 32.2 72 72v659.6z"  ></path></symbol><symbol id="icon-tooltip" viewBox="0 0 1024 1024"><path d="M511.999488 64.900126c-247.025093 0-447.290209 200.147436-447.290209 447.085548 0 246.909459 200.264093 447.115224 447.290209 447.115224s447.290209-200.205764 447.290209-447.115224C959.288674 265.046538 759.024581 64.900126 511.999488 64.900126L511.999488 64.900126zM511.999488 895.276267c-211.386408 0-383.348921-172.020842-383.348921-383.291616 0-211.299427 171.962513-383.203612 383.348921-383.203612 211.444736 0 383.408273 171.904185 383.408273 383.203612C895.407762 723.255425 723.444225 895.276267 511.999488 895.276267L511.999488 895.276267zM511.999488 256.486582c-88.048335 0-159.734004 71.685669-159.734004 159.647023l0 32.028461 63.881936 0 0-32.028461c0-52.759621 42.976814-95.764064 95.852068-95.764064 52.876278 0 95.852068 43.004443 95.852068 95.764064 0 35.987632-20.73116 56.019875-54.506405 85.835947-32.66905 28.767184-73.257467 64.521502-73.257467 126.716007l0 42.97579 63.881936 0 0-42.97579c0-31.679513 19.624966-50.547233 51.595099-78.848813 33.95023-29.815049 76.168774-67.083861 76.168774-133.703141C671.733493 328.172251 600.106152 256.486582 511.999488 256.486582L511.999488 256.486582zM480.087685 703.57213l63.881936 0 0 63.940265L480.087685 767.512395 480.087685 703.57213 480.087685 703.57213zM480.087685 703.57213"  ></path></symbol><symbol id="icon-tupian" viewBox="0 0 1170 1024"><path d="M1060.432916 0H109.768851A109.768851 109.768851 0 0 0 0 109.768851v804.462298a109.768851 109.768851 0 0 0 109.768851 109.768851h950.664065a109.768851 109.768851 0 0 0 109.768851-109.768851V109.768851A109.768851 109.768851 0 0 0 1060.432916 0zM109.768851 73.218409h950.781591a36.550442 36.550442 0 0 1 36.550442 36.550442v430.731092c-58.762768-48.302996-161.127511-113.529668-283.706646-113.529669-113.059566 0-224.473775 87.556525-332.127166 172.292437-82.267876 64.874096-167.943992 131.981178-227.76449 131.981177-84.030759 0-155.956387-61.818432-180.284173-85.323539V109.768851a36.667967 36.667967 0 0 1 36.550442-36.550442z m950.781591 877.680707H109.768851a36.550442 36.550442 0 0 1-36.550442-36.550442V740.645931c43.837025 31.026742 107.300815 63.698841 180.284173 63.698841 85.206014 0 176.288305-71.690577 273.011822-147.612074s199.793412-156.66154 286.99736-156.66154c157.131642 0 282.061288 138.327557 283.119018 139.737863v274.422128a36.550442 36.550442 0 0 1-36.550442 36.550442z"  ></path><path d="M303.450935 501.716516a147.259497 147.259497 0 1 0-147.259497-147.612074 147.259497 147.259497 0 0 0 147.259497 147.612074z m0-220.948009a73.335935 73.335935 0 1 1-72.748307 73.335935 73.335935 73.335935 0 0 1 73.21841-73.335935z"  ></path></symbol><symbol id="icon-rate" viewBox="0 0 1024 1024"><path d="M512.161682 66.028832c-7.767917 0-23.348778 6.231935-43.649126 46.343491-48.821939 87.162152-125.945457 229.404784-125.945457 229.404784s-140.995221 27.38572-231.952816 44.577265c-44.614104 7.344269-59.193147 47.083341-36.548404 75.05644 63.996546 77.008908 177.216167 204.165959 177.216167 204.165959s-18.48091 139.628084-28.888957 234.942917c-3.384074 36.602639 15.915481 57.597813 42.837644 57.597813 8.772804 0 18.367323-2.248204 28.256554-6.9022 76.339666-37.858236 192.462406-95.745644 218.751143-108.816335 25.840528 13.211906 140.817166 72.034617 216.300324 110.004393 9.775644 4.686742 19.295462 6.934946 27.958772 6.934946 26.621311 0 45.695738-20.957311 42.314735-57.634652-10.261715-95.458095-28.554336-235.31233-28.554336-235.31233s111.922069-127.270639 175.171602-204.391087c22.381753-28.043706 7.990998-67.821665-36.106336-75.197656-89.908706-17.238616-229.310639-44.650943-229.310639-44.650943S603.786473 199.717647 555.523259 112.451118c-17.066701-32.216749-30.122041-42.547025-38.377052-45.388746C516.367471 66.659189 514.695389 66.028832 512.161682 66.028832L512.161682 66.028832 512.161682 66.028832zM512.161682 66.028832"  ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 831.712c-211.584 0-383.712-172.16-383.712-383.712 0-211.584 172.128-383.712 383.712-383.712 211.552 0 383.712 172.128 383.712 383.712 0 211.552-172.16 383.712-383.712 383.712z"  ></path><path d="M671.968 512H512V288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128V544c0 17.76 14.272 32 32 32h191.968c17.76 0 32.128-14.24 32.128-32s-14.368-32-32.128-32z"  ></path></symbol><symbol id="icon-clone" viewBox="0 0 1024 1024"><path d="M897.71428583 881.64285753l2e-8-546.42857168q0-6.52901748-4.77120499-11.30022335t-11.30022333-4.77120497l-546.42857168 0q-6.52901748 0-11.30022335 4.77120497t-4.77120497 11.30022335l0 546.42857168q0 6.52901748 4.77120497 11.30022333t11.30022335 4.77120499l546.42857168 0q6.52901748 0 11.30022333-4.77120499t4.77120499-11.30022333z m64.28571417-546.42857168l0 546.42857168q0 33.14732167-23.60491084 56.75223251t-56.75223252 23.60491085l-546.42857167 0q-33.14732167 0-56.75223252-23.60491085t-23.60491084-56.75223251l0-546.42857168q0-33.14732167 23.60491084-56.75223252t56.75223252-23.60491084l546.42857167 0q33.14732167 0 56.75223252 23.60491084t23.60491084 56.75223252z m-192.85714247-192.85714249l0 80.35714249-64.28571417 0 0-80.35714249q0-6.52901748-4.77120498-11.30022334t-11.30022335-4.77120498l-546.42857167 0q-6.52901748 0-11.30022334 4.77120498t-4.77120498 11.30022334l0 546.42857168q0 6.52901748 4.77120498 11.30022334t11.30022334 4.77120498l80.35714247 0 0 64.28571417-80.35714247 0q-33.14732167 0-56.75223252-23.60491085t-23.60491084-56.75223251l0-546.42857168q0-33.14732167 23.60491084-56.75223252t56.75223252-23.60491084l546.42857167 0q33.14732167 0 56.75223252 23.60491084t23.60491084 56.75223252z"  ></path></symbol><symbol id="icon-jilianxuanze" viewBox="0 0 1024 1024"><path d="M128 512V224c0-16 12.8-32 32-32h384c19.2 0 32 12.8 32 32v288c0 16-12.8 32-32 32h-32v64h64c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64H128c-35.2 0-64 28.8-64 64v352c0 35.2 28.8 64 64 64h192v-64H160c-16 0-32-12.8-32-32z"  ></path><path d="M896 416H704v64h160c19.2 0 32 12.8 32 32v288c0 16-12.8 32-32 32H480c-19.2 0-32-12.8-32-32V512c0-16 12.8-32 32-32h32v-64h-64c-35.2 0-64 28.8-64 64v352c0 35.2 28.8 64 64 64h448c35.2 0 64-28.8 64-64V480c0-35.2-28.8-64-64-64z"  ></path></symbol><symbol id="icon-textarea" viewBox="0 0 1024 1024"><path d="M64.60757333 814.92195555h885.46417778V209.07804445h-885.46417778v605.8439111zM18.00419555 162.47466667h978.67093334v699.05066666H18.00419555V162.47466667z m885.46417778 466.03377778l-139.81013333 139.81013333h139.81013333V628.50844445z m-752.64455111-291.27111112v233.01688889c0 13.98101333 9.32067555 23.30168889 23.30168889 23.30168889s23.30168889-9.32067555 23.30168889-23.30168889V337.23733333c0-13.98101333-9.32067555-23.30168889-23.30168889-23.30168888s-23.30168889 9.32067555-23.30168889 23.30168888z"  ></path></symbol><symbol id="icon-clear" viewBox="0 0 1024 1024"><path d="M883.2 403.2l-147.2-44.8 57.6-224c0-6.4 0-19.2-6.4-25.6-6.4-6.4-12.8-12.8-19.2-12.8L627.2 57.6c-6.4 0-19.2 0-25.6 0C595.2 70.4 588.8 76.8 588.8 83.2L524.8 300.8 358.4 256c-6.4 0-19.2 0-25.6 0S320 275.2 320 281.6l-89.6 320C211.2 684.8 128 768 128 768c-6.4 6.4-12.8 19.2-6.4 32 0 12.8 12.8 19.2 25.6 25.6l524.8 140.8c0 0 6.4 0 6.4 0 6.4 0 19.2-6.4 25.6-12.8 6.4-6.4 83.2-89.6 115.2-179.2 32-83.2 89.6-326.4 89.6-332.8C908.8 422.4 896 409.6 883.2 403.2zM755.2 748.8c-25.6 57.6-70.4 115.2-89.6 147.2l-70.4-19.2c32-38.4 70.4-96 89.6-160 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 70.4-76.8 134.4-96 153.6l-57.6-12.8c32-38.4 70.4-96 83.2-153.6 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 64-70.4 128-89.6 153.6l-64-19.2c32-38.4 70.4-96 89.6-153.6 6.4-19.2-6.4-32-25.6-38.4C384 608 364.8 620.8 364.8 633.6c-19.2 64-70.4 128-96 153.6l-57.6-19.2c32-38.4 70.4-96 83.2-153.6l76.8-294.4 166.4 44.8c6.4 0 19.2 0 25.6 0C569.6 364.8 576 358.4 582.4 352L640 128l83.2 19.2-57.6 224c-6.4 19.2 6.4 32 19.2 38.4L832 454.4C819.2 524.8 780.8 691.2 755.2 748.8z"  ></path><path d="M364.8 473.6C364.8 492.8 371.2 505.6 390.4 512l339.2 96c0 0 6.4 0 6.4 0 12.8 0 25.6-6.4 32-25.6 6.4-19.2-6.4-32-19.2-38.4L409.6 448C390.4 448 371.2 454.4 364.8 473.6z"  ></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M928.229 784.149c0 44.024-36.02 80.044-80.044 80.044L175.815 864.193c-44.024 0-80.044-36.02-80.044-80.044L95.771 239.851c0-44.024 36.02-80.044 80.044-80.044l672.369 0c44.024 0 80.044 36.02 80.044 80.044L928.228 784.149zM351.912 303.886c0-9.005-7.004-16.009-16.009-16.009L175.815 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 303.886zM351.912 495.991c0-9.005-7.004-16.009-16.009-16.009L175.815 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 495.991zM351.912 688.097c0-9.005-7.004-16.009-16.009-16.009L175.815 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 688.097zM608.053 303.886c0-9.005-7.004-16.009-16.009-16.009L431.956 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 303.886zM608.053 495.991c0-9.005-7.004-16.009-16.009-16.009L431.956 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 495.991zM608.053 688.097c0-9.005-7.004-16.009-16.009-16.009L431.956 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 688.097zM864.193 303.886c0-9.005-7.004-16.009-16.009-16.009L688.097 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 303.886zM864.193 495.991c0-9.005-7.004-16.009-16.009-16.009L688.097 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 495.991zM864.193 688.097c0-9.005-7.004-16.009-16.009-16.009L688.097 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 688.097z"  ></path></symbol><symbol id="icon-depart" viewBox="0 0 1024 1024"><path d="M916.23451733 477.51649173L547.318336 477.51649173 547.318336 255.34498133 696.308 255.34498133 696.308 34.66668053 331.7635616 34.66668053 331.7635616 255.34498133 478.22732907 255.34498133 478.22732907 477.51649173 108.1573568 477.51649173 108.1573568 534.23985493 108.1573568 551.07119467 108.1573568 771.74949653 34.4369952 771.74949653 34.4369952 989.33331947 254.03822507 989.33331947 254.03822507 771.74949653 181.86461973 771.74949653 181.86461973 551.07119467 478.22732907 551.07119467 478.22732907 771.74949653 402.9722176 771.74949653 402.9722176 989.33331947 622.57344747 989.33331947 622.57344747 771.74949653 547.318336 771.74949653 547.318336 551.07119467 842.90712107 551.07119467 842.90712107 771.74949653 769.98797333 771.74949653 769.98797333 989.33331947 989.5619136 989.33331947 989.5619136 771.74949653 916.23451733 771.74949653Z"  ></path></symbol></svg>',function(l){var c=(c=document.getElementsByTagName("script"))[c.length-1],h=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,o,t,z,i,v=function(c,h){h.parentNode.insertBefore(c,h)};if(h&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,h=document.createElement("div");h.innerHTML=l._iconfont_svg_string_3814468,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(c=document.body).firstChild?v(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),a()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(t=a,z=l.document,i=!1,m(),z.onreadystatechange=function(){"complete"==z.readyState&&(z.onreadystatechange=null,s())})}function s(){i||(i=!0,t())}function m(){try{z.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}s()}}(window);
\ No newline at end of file
diff --git a/public/resource/tinymce/langs/en.js b/public/resource/tinymce/langs/en.js
new file mode 100644
index 0000000..27337c3
--- /dev/null
+++ b/public/resource/tinymce/langs/en.js
@@ -0,0 +1,419 @@
+tinymce.addI18n('es', {
+  Redo: 'Rehacer',
+  Undo: 'Deshacer',
+  Cut: 'Cortar',
+  Copy: 'Copiar',
+  Paste: 'Pegar',
+  'Select all': 'Seleccionar todo',
+  'New document': 'Nuevo documento',
+  Ok: 'Ok',
+  Cancel: 'Cancelar',
+  'Visual aids': 'Ayudas visuales',
+  Bold: 'Negrita',
+  Italic: 'Cursiva',
+  Underline: 'Subrayado',
+  Strikethrough: 'Tachado',
+  Superscript: 'Super\u00edndice',
+  Subscript: 'Sub\u00edndice',
+  'Clear formatting': 'Limpiar formato',
+  'Align left': 'Alinear a la izquierda',
+  'Align center': 'Alinear al centro',
+  'Align right': 'Alinear a la derecha',
+  Justify: 'Justificar',
+  'Bullet list': 'Lista de vi\u00f1etas',
+  'Numbered list': 'Lista numerada',
+  'Decrease indent': 'Disminuir sangr\u00eda',
+  'Increase indent': 'Incrementar sangr\u00eda',
+  Close: 'Cerrar',
+  Formats: 'Formatos',
+  "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": 'Su navegador no es compatible con el acceso directo al portapapeles. Use las teclas Crtl+X\/C\/V de su teclado.',
+  Headers: 'Encabezados',
+  'Header 1': 'Encabezado 1',
+  'Header 2': 'Encabezado 2',
+  'Header 3': 'Encabezado 3',
+  'Header 4': 'Encabezado 4',
+  'Header 5': 'Encabezado 5',
+  'Header 6': 'Encabezado 6',
+  Headings: 'Encabezados',
+  'Heading 1': 'Encabezado 1',
+  'Heading 2': 'Encabezado 2',
+  'Heading 3': 'Encabezado 3',
+  'Heading 4': 'Encabezado 4',
+  'Heading 5': 'Encabezado 5',
+  'Heading 6': 'Encabezado 6',
+  Preformatted: 'Con formato previo',
+  Div: 'Div',
+  Pre: 'Pre',
+  Code: 'C\u00f3digo',
+  Paragraph: 'P\u00e1rrafo',
+  Blockquote: 'Blockquote',
+  Inline: 'Alineado',
+  Blocks: 'Bloques',
+  'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.': 'Pegar est\u00e1 ahora en modo de texto plano. El contenido se pegar\u00e1 como texto plano hasta que desactive esta opci\u00f3n.',
+  Fonts: 'Fuentes',
+  'Font Sizes': 'Tama\u00f1os de fuente',
+  Class: 'Clase',
+  'Browse for an image': 'Buscar una imagen',
+  OR: 'OR',
+  'Drop an image here': 'Arrastre una imagen aqu\u00ed',
+  Upload: 'Cargar',
+  Block: 'Bloque',
+  Align: 'Alinear',
+  Default: 'Por defecto',
+  Circle: 'C\u00edrculo',
+  Disc: 'Disco',
+  Square: 'Cuadrado',
+  'Lower Alpha': 'Inferior Alfa',
+  'Lower Greek': 'Inferior Griega',
+  'Lower Roman': 'Inferior Romana',
+  'Upper Alpha': 'Superior Alfa',
+  'Upper Roman': 'Superior Romana',
+  'Anchor...': 'Anclaje...',
+  Name: 'Nombre',
+  Id: 'Id',
+  'Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.': 'Deber\u00eda comenzar por una letra, seguida solo de letras, n\u00fameros, guiones, puntos, dos puntos o guiones bajos.',
+  'You have unsaved changes are you sure you want to navigate away?': 'Tiene cambios sin guardar. \u00bfEst\u00e1 seguro de que quiere salir?',
+  'Restore last draft': 'Restaurar el \u00faltimo borrador',
+  'Special character...': 'Car\u00e1cter especial...',
+  'Source code': 'C\u00f3digo fuente',
+  'Insert\/Edit code sample': 'Insertar\/editar c\u00f3digo de prueba',
+  Language: 'Idioma',
+  'Code sample...': 'Ejemplo de c\u00f3digo...',
+  'Color Picker': 'Selector de colores',
+  R: 'R',
+  G: 'V',
+  B: 'A',
+  'Left to right': 'De izquierda a derecha',
+  'Right to left': 'De derecha a izquierda',
+  'Emoticons...': 'Emoticones...',
+  'Metadata and Document Properties': 'Metadatos y propiedades del documento',
+  Title: 'T\u00edtulo',
+  Keywords: 'Palabras clave',
+  Description: 'Descripci\u00f3n',
+  Robots: 'Robots',
+  Author: 'Autor',
+  Encoding: 'Codificaci\u00f3n',
+  Fullscreen: 'Pantalla completa',
+  Action: 'Acci\u00f3n',
+  Shortcut: 'Atajo',
+  Help: 'Ayuda',
+  Address: 'Direcci\u00f3n',
+  'Focus to menubar': 'Enfocar la barra del men\u00fa',
+  'Focus to toolbar': 'Enfocar la barra de herramientas',
+  'Focus to element path': 'Enfocar la ruta del elemento',
+  'Focus to contextual toolbar': 'Enfocar la barra de herramientas contextual',
+  'Insert link (if link plugin activated)': 'Insertar enlace (si el complemento de enlace est\u00e1 activado)',
+  'Save (if save plugin activated)': 'Guardar (si el componente de salvar est\u00e1 activado)',
+  'Find (if searchreplace plugin activated)': 'Buscar (si el complemento buscar-remplazar est\u00e1 activado)',
+  'Plugins installed ({0}):': 'Plugins instalados ({0}):',
+  'Premium plugins:': 'Complementos premium:',
+  'Learn more...': 'Aprende m\u00e1s...',
+  'You are using {0}': 'Estas usando {0}',
+  Plugins: 'Complementos',
+  'Handy Shortcuts': 'Accesos directos',
+  'Horizontal line': 'L\u00ednea horizontal',
+  'Insert\/edit image': 'Insertar\/editar imagen',
+  'Image description': 'Descripci\u00f3n de la imagen',
+  Source: 'Enlace',
+  Dimensions: 'Dimensiones',
+  'Constrain proportions': 'Restringir proporciones',
+  General: 'General',
+  Advanced: 'Avanzado',
+  Style: 'Estilo',
+  'Vertical space': 'Espacio vertical',
+  'Horizontal space': 'Espacio horizontal',
+  Border: 'Borde',
+  'Insert image': 'Insertar imagen',
+  'Image...': 'Imagen...',
+  'Image list': 'Lista de im\u00e1genes',
+  'Rotate counterclockwise': 'Girar a la izquierda',
+  'Rotate clockwise': 'Girar a la derecha',
+  'Flip vertically': 'Invertir verticalmente',
+  'Flip horizontally': 'Invertir horizontalmente',
+  'Edit image': 'Editar imagen',
+  'Image options': 'Opciones de imagen',
+  'Zoom in': 'Acercar',
+  'Zoom out': 'Alejar',
+  Crop: 'Recortar',
+  Resize: 'Redimensionar',
+  Orientation: 'Orientaci\u00f3n',
+  Brightness: 'Brillo',
+  Sharpen: 'Forma',
+  Contrast: 'Contraste',
+  'Color levels': 'Niveles de color',
+  Gamma: 'Gamma',
+  Invert: 'Invertir',
+  Apply: 'Aplicar',
+  Back: 'Atr\u00e1s',
+  'Insert date\/time': 'Insertar fecha\/hora',
+  'Date\/time': 'Fecha\/hora',
+  'Insert\/Edit Link': 'Insertar\/editar enlace',
+  'Insert\/edit link': 'Insertar\/editar enlace',
+  'Text to display': 'Texto para mostrar',
+  Url: 'URL',
+  'Open link in...': 'Abrir enlace en...',
+  'Current window': 'Ventana actual',
+  None: 'Ninguno',
+  'New window': 'Nueva ventana',
+  'Remove link': 'Quitar enlace',
+  Anchors: 'Anclas',
+  'Link...': 'Enlace...',
+  'Paste or type a link': 'Pega o introduce un enlace',
+  'The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?': 'El enlace que has introducido no parece ser una direcci\u00f3n de correo electr\u00f3nico. Quieres a\u00f1adir el prefijo necesario mailto: ?',
+  'The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?': 'El enlace que has introducido no parece ser una enlace externo. Quieres a\u00f1adir el prefijo necesario http:\/\/ ?',
+  'Link list': 'Lista de enlaces',
+  'Insert video': 'Insertar video',
+  'Insert\/edit video': 'Insertar\/editar video',
+  'Insert\/edit media': 'Insertar\/editar medio',
+  'Alternative source': 'Enlace alternativo',
+  'Alternative source URL': 'Origen de URL alternativo',
+  'Media poster (Image URL)': 'P\u00f3ster de medio (URL de imagen)',
+  'Paste your embed code below:': 'Pega tu c\u00f3digo embebido debajo',
+  Embed: 'Incrustado',
+  'Media...': 'Medios...',
+  'Nonbreaking space': 'Espacio fijo',
+  'Page break': 'Salto de p\u00e1gina',
+  'Paste as text': 'Pegar como texto',
+  Preview: 'Previsualizar',
+  'Print...': 'Imprimir...',
+  Save: 'Guardar',
+  Find: 'Buscar',
+  'Replace with': 'Reemplazar con',
+  Replace: 'Reemplazar',
+  'Replace all': 'Reemplazar todo',
+  Previous: 'Anterior',
+  Next: 'Siguiente',
+  'Find and replace...': 'Buscar y reemplazar...',
+  'Could not find the specified string.': 'No se encuentra la cadena de texto especificada',
+  'Match case': 'Coincidencia exacta',
+  'Find whole words only': 'Solo palabras completas',
+  'Spell check': 'Revisar ortograf\u00eda',
+  Ignore: 'Ignorar',
+  'Ignore all': 'Ignorar todos',
+  Finish: 'Finalizar',
+  'Add to Dictionary': 'A\u00f1adir al Diccionario',
+  'Insert table': 'Insertar tabla',
+  'Table properties': 'Propiedades de la tabla',
+  'Delete table': 'Eliminar tabla',
+  Cell: 'Celda',
+  Row: 'Fila',
+  Column: 'Columna',
+  'Cell properties': 'Propiedades de la celda',
+  'Merge cells': 'Combinar celdas',
+  'Split cell': 'Dividir celdas',
+  'Insert row before': 'Insertar fila antes',
+  'Insert row after': 'Insertar fila despu\u00e9s ',
+  'Delete row': 'Eliminar fila',
+  'Row properties': 'Propiedades de la fila',
+  'Cut row': 'Cortar fila',
+  'Copy row': 'Copiar fila',
+  'Paste row before': 'Pegar la fila antes',
+  'Paste row after': 'Pegar la fila despu\u00e9s',
+  'Insert column before': 'Insertar columna antes',
+  'Insert column after': 'Insertar columna despu\u00e9s',
+  'Delete column': 'Eliminar columna',
+  Cols: 'Columnas',
+  Rows: 'Filas',
+  Width: 'Ancho',
+  Height: 'Alto',
+  'Cell spacing': 'Espacio entre celdas',
+  'Cell padding': 'Relleno de celda',
+  'Show caption': 'Mostrar t\u00edtulo',
+  Left: 'Izquierda',
+  Center: 'Centrado',
+  Right: 'Derecha',
+  'Cell type': 'Tipo de celda',
+  Scope: '\u00c1mbito',
+  Alignment: 'Alineaci\u00f3n',
+  'H Align': 'Alineamiento Horizontal',
+  'V Align': 'Alineamiento Vertical',
+  Top: 'Arriba',
+  Middle: 'Centro',
+  Bottom: 'Abajo',
+  'Header cell': 'Celda de la cebecera',
+  'Row group': 'Grupo de filas',
+  'Column group': 'Grupo de columnas',
+  'Row type': 'Tipo de fila',
+  Header: 'Cabecera',
+  Body: 'Cuerpo',
+  Footer: 'Pie de p\u00e1gina',
+  'Border color': 'Color del borde',
+  'Insert template...': 'Insertar plantilla...',
+  Templates: 'Plantillas',
+  Template: 'Plantilla',
+  'Text color': 'Color del texto',
+  'Background color': 'Color de fondo',
+  'Custom...': 'Personalizar...',
+  'Custom color': 'Color personalizado',
+  'No color': 'Sin color',
+  'Remove color': 'Quitar color',
+  'Table of Contents': 'Tabla de contenidos',
+  'Show blocks': 'Mostrar bloques',
+  'Show invisible characters': 'Mostrar caracteres invisibles',
+  'Word count': 'Contar palabras',
+  Count: 'Recuento',
+  Document: 'Documento',
+  Selection: 'Selecci\u00f3n',
+  Words: 'Palabras',
+  'Words: {0}': 'Palabras: {0}',
+  '{0} words': '{0} palabras',
+  File: 'Archivo',
+  Edit: 'Editar',
+  Insert: 'Insertar',
+  View: 'Ver',
+  Format: 'Formato',
+  Table: 'Tabla',
+  Tools: 'Herramientas',
+  'Powered by {0}': 'Desarrollado por {0}',
+  'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help': '\u00c1rea de texto enriquecido. Pulse ALT-F9 para el menu. Pulse ALT-F10 para la barra de herramientas. Pulse ALT-0 para ayuda',
+  'Image title': 'Titulo de imagen',
+  'Border width': 'Ancho de borde',
+  'Border style': 'Estilo de borde',
+  Error: 'Error',
+  Warn: 'Advertencia',
+  Valid: 'V\u00e1lido',
+  'To open the popup, press Shift+Enter': 'Para abrir el elemento emergente, pulse May\u00fas+Intro',
+  'Rich Text Area. Press ALT-0 for help.': '\u00c1rea de texto enriquecido. Pulse ALT-0 para abrir la ayuda.',
+  'System Font': 'Fuente de sistema',
+  'Failed to upload image: {0}': 'Fallo al cargar imagen: {0}',
+  'Failed to load plugin: {0} from url {1}': 'Fallo al cargar complemento: {0} desde URL {1}',
+  'Failed to load plugin url: {0}': 'Fallo al cargar URL del complemento: {0}',
+  'Failed to initialize plugin: {0}': 'Fallo al iniciar el complemento: {0}',
+  example: 'ejemplo',
+  Search: 'Buscar',
+  All: 'Todo',
+  Currency: 'Divisa',
+  Text: 'Texto',
+  Quotations: 'Comillas',
+  Mathematical: 'S\u00edmbolo matem\u00e1tico',
+  'Extended Latin': 'Latino extendido A',
+  Symbols: 'S\u00edmbolos',
+  Arrows: 'Flechas',
+  'User Defined': 'Definido por el usuario',
+  'dollar sign': 'signo de d\u00f3lar',
+  'currency sign': 'signo de divisa',
+  'euro-currency sign': 'signo de euro',
+  'colon sign': 'signo de dos puntos',
+  'cruzeiro sign': 'signo de cruceiro',
+  'french franc sign': 'signo de franco franc\u00e9s',
+  'lira sign': 'signo de lira',
+  'mill sign': 'signo de mill',
+  'naira sign': 'signo de naira',
+  'peseta sign': 'signo de peseta',
+  'rupee sign': 'signo de rupia',
+  'won sign': 'signo de won',
+  'new sheqel sign': 'signo de nuevo s\u00e9quel',
+  'dong sign': 'signo de dong',
+  'kip sign': 'signo de kip',
+  'tugrik sign': 'signo de tugrik',
+  'drachma sign': 'signo de dracma',
+  'german penny symbol': 'signo de penique alem\u00e1n',
+  'peso sign': 'signo de peso',
+  'guarani sign': 'signo de guaran\u00ed',
+  'austral sign': 'signo de austral',
+  'hryvnia sign': 'signo de grivna',
+  'cedi sign': 'signo de cedi',
+  'livre tournois sign': 'signo de libra tornesa',
+  'spesmilo sign': 'signo de spesmilo',
+  'tenge sign': 'signo de tenge',
+  'indian rupee sign': 'signo de rupia india',
+  'turkish lira sign': 'signo de lira turca',
+  'nordic mark sign': 'signo de marco n\u00f3rdico',
+  'manat sign': 'signo de manat',
+  'ruble sign': 'signo de rublo',
+  'yen character': 'car\u00e1cter de yen',
+  'yuan character': 'car\u00e1cter de yuan',
+  'yuan character, in hong kong and taiwan': 'car\u00e1cter de yuan en Hong Kong y Taiw\u00e1n',
+  'yen\/yuan character variant one': 'Variante uno de car\u00e1cter de yen\/yuan',
+  'Loading emoticons...': 'Cargando emoticonos...',
+  'Could not load emoticons': 'No se han podido cargar los emoticonos',
+  People: 'Personas',
+  'Animals and Nature': 'Animales y naturaleza',
+  'Food and Drink': 'Comida y bebida',
+  Activity: 'Actividad',
+  'Travel and Places': 'Viajes y lugares',
+  Objects: 'Objetos',
+  Flags: 'Banderas',
+  Characters: 'Caracteres',
+  'Characters (no spaces)': 'Caracteres (sin espacios)',
+  '{0} characters': '{0} caracteres',
+  'Error: Form submit field collision.': 'Error: Colisi\u00f3n de campo al enviar formulario.',
+  'Error: No form element found.': 'Error: No se encuentra ning\u00fan elemento de formulario.',
+  Update: 'Actualizar',
+  'Color swatch': 'Muestrario de colores',
+  Turquoise: 'Turquesa',
+  Green: 'Verde',
+  Blue: 'Azul',
+  Purple: 'P\u00farpura',
+  'Navy Blue': 'Azul marino',
+  'Dark Turquoise': 'Turquesa oscuro',
+  'Dark Green': 'Verde oscuro',
+  'Medium Blue': 'Azul medio',
+  'Medium Purple': 'P\u00farpura medio',
+  'Midnight Blue': 'Azul medio',
+  Yellow: 'Amarillo',
+  Orange: 'Naranja',
+  Red: 'Rojo',
+  'Light Gray': 'Gris claro',
+  Gray: 'Gris',
+  'Dark Yellow': 'Amarillo oscuro',
+  'Dark Orange': 'Naranja oscuro',
+  'Dark Red': 'Rojo oscuro',
+  'Medium Gray': 'Gris medio',
+  'Dark Gray': 'Gris oscuro',
+  'Light Green': 'Verde claro',
+  'Light Yellow': 'Amarillo claro',
+  'Light Red': 'Rojo claro',
+  'Light Purple': 'Morado claro',
+  'Light Blue': 'Azul claro',
+  'Dark Purple': 'Morado oscuro',
+  'Dark Blue': 'Azul oscuro',
+  Black: 'Negro',
+  White: 'Blanco',
+  'Switch to or from fullscreen mode': 'Activar o desactivar modo pantalla completa',
+  'Open help dialog': 'Abrir di\u00e1logo de ayuda',
+  history: 'historial',
+  styles: 'estilos',
+  formatting: 'formato',
+  alignment: 'alineaci\u00f3n',
+  indentation: 'sangr\u00eda',
+  'permanent pen': 'bol\u00edgrafo permanente',
+  comments: 'comentarios',
+  'Format Painter': 'Copiar formato',
+  'Insert\/edit iframe': 'Insertar\/editar iframe',
+  Capitalization: 'Uso de may\u00fasculas',
+  lowercase: 'min\u00fasculas',
+  UPPERCASE: 'MAY\u00daSCULAS',
+  'Title Case': 'Tipo T\u00edtulo',
+  'Permanent Pen Properties': 'Propiedades del bol\u00edgrafo permanente',
+  'Permanent pen properties...': 'Propiedades del bol\u00edgrafo permanente...',
+  Font: 'Fuente',
+  Size: 'Tama\u00f1o',
+  'More...': 'M\u00e1s...',
+  'Spellcheck Language': 'Corrector',
+  'Select...': 'Seleccionar...',
+  Preferences: 'Preferencias',
+  Yes: 'S\u00ed',
+  No: 'No',
+  'Keyboard Navigation': 'Navegaci\u00f3n con el teclado',
+  Version: 'Versi\u00f3n',
+  Anchor: 'Ancla',
+  'Special character': 'Car\u00e1cter especial',
+  'Code sample': 'Ejemplo de c\u00f3digo',
+  Color: 'Color',
+  Emoticons: 'Emoticonos',
+  'Document properties': 'Propiedades del documento',
+  Image: 'Imagen',
+  'Insert link': 'Insertar enlace',
+  Target: 'Destino',
+  Link: 'Enlace',
+  Poster: 'Miniatura',
+  Media: 'Media',
+  Print: 'Imprimir',
+  Prev: 'Anterior',
+  'Find and replace': 'Buscar y reemplazar',
+  'Whole words': 'Palabras completas',
+  Spellcheck: 'Corrector ortogr\u00e1fico',
+  Caption: 'Subt\u00edtulo',
+  'Insert template': 'Insertar plantilla'
+})
diff --git a/public/resource/tinymce/langs/zh_CN.js b/public/resource/tinymce/langs/zh_CN.js
new file mode 100644
index 0000000..f9d8b5c
--- /dev/null
+++ b/public/resource/tinymce/langs/zh_CN.js
@@ -0,0 +1,389 @@
+tinymce.addI18n('zh_CN',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u9500",
+"Cut": "\u526a\u5207",
+"Copy": "\u590d\u5236",
+"Paste": "\u7c98\u8d34",
+"Select all": "\u5168\u9009",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u786e\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u7f51\u683c\u7ebf",
+"Bold": "\u7c97\u4f53",
+"Italic": "\u659c\u4f53",
+"Underline": "\u4e0b\u5212\u7ebf",
+"Strikethrough": "\u5220\u9664\u7ebf",
+"Superscript": "\u4e0a\u6807",
+"Subscript": "\u4e0b\u6807",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+"Justify": "\u4e24\u7aef\u5bf9\u9f50",
+"Bullet list": "\u9879\u76ee\u7b26\u53f7",
+"Numbered list": "\u7f16\u53f7\u5217\u8868",
+"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+"Close": "\u5173\u95ed",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+"Headers": "\u6807\u9898",
+"Header 1": "\u6807\u98981",
+"Header 2": "\u6807\u98982",
+"Header 3": "\u6807\u98983",
+"Header 4": "\u6807\u98984",
+"Header 5": "\u6807\u98985",
+"Header 6": "\u6807\u98986",
+"Headings": "\u6807\u9898",
+"Heading 1": "\u6807\u98981",
+"Heading 2": "\u6807\u98982",
+"Heading 3": "\u6807\u98983",
+"Heading 4": "\u6807\u98984",
+"Heading 5": "\u6807\u98985",
+"Heading 6": "\u6807\u98986",
+"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u7801",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u533a\u5757",
+"Inline": "\u6587\u672c",
+"Blocks": "\u57fa\u5757",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+"Fonts": "\u5b57\u4f53",
+"Font Sizes": "\u5b57\u53f7",
+"Class": "\u7c7b\u578b",
+"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+"Upload": "\u4e0a\u4f20",
+"Block": "\u5757",
+"Align": "\u5bf9\u9f50",
+"Default": "\u9ed8\u8ba4",
+"Circle": "\u7a7a\u5fc3\u5706",
+"Disc": "\u5b9e\u5fc3\u5706",
+"Square": "\u65b9\u5757",
+"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Anchor...": "\u951a\u70b9...",
+"Name": "\u540d\u79f0",
+"Id": "\u6807\u8bc6\u7b26",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+"Special characters...": "\u7279\u6b8a\u5b57\u7b26...",
+"Source code": "\u6e90\u4ee3\u7801",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+"Language": "\u8bed\u8a00",
+"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+"Color Picker": "\u9009\u8272\u5668",
+"R": "R",
+"G": "G",
+"B": "B",
+"Left to right": "\u4ece\u5de6\u5230\u53f3",
+"Right to left": "\u4ece\u53f3\u5230\u5de6",
+"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+"Title": "\u6807\u9898",
+"Keywords": "\u5173\u952e\u8bcd",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u673a\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7f16\u7801",
+"Fullscreen": "\u5168\u5c4f",
+"Action": "\u64cd\u4f5c",
+"Shortcut": "\u5feb\u6377\u952e",
+"Help": "\u5e2e\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u63d2\u4ef6",
+"Handy Shortcuts": "\u5feb\u6377\u952e",
+"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+"Image description": "\u56fe\u7247\u63cf\u8ff0",
+"Source": "\u5730\u5740",
+"Dimensions": "\u5927\u5c0f",
+"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+"General": "\u666e\u901a",
+"Advanced": "\u9ad8\u7ea7",
+"Style": "\u6837\u5f0f",
+"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+"Border": "\u8fb9\u6846",
+"Insert image": "\u63d2\u5165\u56fe\u7247",
+"Image...": "\u56fe\u7247...",
+"Image list": "\u56fe\u7247\u5217\u8868",
+"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+"Edit image": "\u7f16\u8f91\u56fe\u7247",
+"Image options": "\u56fe\u7247\u9009\u9879",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7f29\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8c03\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u9510\u5316",
+"Contrast": "\u5bf9\u6bd4\u5ea6",
+"Color levels": "\u989c\u8272\u5c42\u6b21",
+"Gamma": "\u4f3d\u9a6c\u503c",
+"Invert": "\u53cd\u8f6c",
+"Apply": "\u5e94\u7528",
+"Back": "\u540e\u9000",
+"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Text to display": "\u663e\u793a\u6587\u5b57",
+"Url": "\u5730\u5740",
+"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+"Current window": "\u5f53\u524d\u7a97\u53e3",
+"None": "\u65e0",
+"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+"Remove link": "\u5220\u9664\u94fe\u63a5",
+"Anchors": "\u951a\u70b9",
+"Link...": "\u94fe\u63a5...",
+"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+"Link list": "\u94fe\u63a5\u5217\u8868",
+"Insert video": "\u63d2\u5165\u89c6\u9891",
+"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+"Alternative source": "\u955c\u50cf",
+"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+"Embed": "\u5185\u5d4c",
+"Media...": "\u591a\u5a92\u4f53...",
+"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+"Page break": "\u5206\u9875\u7b26",
+"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+"Preview": "\u9884\u89c8",
+"Print...": "\u6253\u5370...",
+"Save": "\u4fdd\u5b58",
+"Find": "\u67e5\u627e",
+"Replace with": "\u66ff\u6362\u4e3a",
+"Replace": "\u66ff\u6362",
+"Replace all": "\u5168\u90e8\u66ff\u6362",
+"Previous": "\u4e0a\u4e00\u4e2a",
+"Next": "\u4e0b\u4e00\u4e2a",
+"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+"Find whole words only": "\u5168\u5b57\u5339\u914d",
+"Spell check": "\u62fc\u5199\u68c0\u67e5",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5168\u90e8\u5ffd\u7565",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c5e\u6027",
+"Delete table": "\u5220\u9664\u8868\u683c",
+"Cell": "\u5355\u5143\u683c",
+"Row": "\u884c",
+"Column": "\u5217",
+"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+"Delete row": "\u5220\u9664\u884c",
+"Row properties": "\u884c\u5c5e\u6027",
+"Cut row": "\u526a\u5207\u884c",
+"Copy row": "\u590d\u5236\u884c",
+"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+"Delete column": "\u5220\u9664\u5217",
+"Cols": "\u5217",
+"Rows": "\u884c",
+"Width": "\u5bbd",
+"Height": "\u9ad8",
+"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+"Show caption": "\u663e\u793a\u6807\u9898",
+"Left": "\u5de6\u5bf9\u9f50",
+"Center": "\u5c45\u4e2d",
+"Right": "\u53f3\u5bf9\u9f50",
+"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+"Scope": "\u8303\u56f4",
+"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+"H Align": "\u6c34\u5e73\u5bf9\u9f50",
+"V Align": "\u5782\u76f4\u5bf9\u9f50",
+"Top": "\u9876\u90e8\u5bf9\u9f50",
+"Middle": "\u5782\u76f4\u5c45\u4e2d",
+"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+"Header cell": "\u8868\u5934\u5355\u5143\u683c",
+"Row group": "\u884c\u7ec4",
+"Column group": "\u5217\u7ec4",
+"Row type": "\u884c\u7c7b\u578b",
+"Header": "\u8868\u5934",
+"Body": "\u8868\u4f53",
+"Footer": "\u8868\u5c3e",
+"Border color": "\u8fb9\u6846\u989c\u8272",
+"Insert template...": "\u63d2\u5165\u6a21\u677f...",
+"Templates": "\u6a21\u677f",
+"Template": "\u6a21\u677f",
+"Text color": "\u6587\u5b57\u989c\u8272",
+"Background color": "\u80cc\u666f\u8272",
+"Custom...": "\u81ea\u5b9a\u4e49...",
+"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+"No color": "\u65e0",
+"Remove color": "\u79fb\u9664\u989c\u8272",
+"Table of Contents": "\u5185\u5bb9\u5217\u8868",
+"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+"Word count": "\u5b57\u6570",
+"Words: {0}": "\u5b57\u6570\uff1a{0}",
+"{0} words": "{0} \u5b57",
+"File": "\u6587\u4ef6",
+"Edit": "\u7f16\u8f91",
+"Insert": "\u63d2\u5165",
+"View": "\u89c6\u56fe",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531{0}\u9a71\u52a8",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+"Image title": "\u56fe\u7247\u6807\u9898",
+"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+"Border style": "\u8fb9\u6846\u6837\u5f0f",
+"Error": "\u9519\u8bef",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+"System Font": "\u7cfb\u7edf\u5b57\u4f53",
+"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+"example": "\u793a\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8d27\u5e01",
+"Text": "\u6587\u5b57",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6570\u5b66",
+"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+"Symbols": "\u7b26\u53f7",
+"Arrows": "\u7bad\u5934",
+"User Defined": "\u81ea\u5b9a\u4e49",
+"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+"currency sign": "\u8d27\u5e01\u7b26\u53f7",
+"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+"colon sign": "\u5192\u53f7",
+"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+"lira sign": "\u91cc\u62c9\u7b26\u53f7",
+"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+"naira sign": "\u5948\u62c9\u7b26\u53f7",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+"won sign": "\u97e9\u5143\u7b26\u53f7",
+"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+"austral sign": "\u6fb3\u5143\u7b26\u53f7",
+"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+"cedi sign": "\u585e\u5730\u7b26\u53f7",
+"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+"spesmilo sign": "spesmilo\u7b26\u53f7",
+"tenge sign": "\u575a\u6208\u7b26\u53f7",
+"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+"ruble sign": "\u5362\u5e03\u7b26\u53f7",
+"yen character": "\u65e5\u5143\u5b57\u6837",
+"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+"People": "\u4eba\u7c7b",
+"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+"Activity": "\u6d3b\u52a8",
+"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u5e1c",
+"Characters": "\u5b57\u7b26",
+"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u989c\u8272\u6837\u672c",
+"Turquoise": "\u9752\u7eff\u8272",
+"Green": "\u7eff\u8272",
+"Blue": "\u84dd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6d77\u519b\u84dd",
+"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+"Dark Green": "\u6df1\u7eff\u8272",
+"Medium Blue": "\u4e2d\u84dd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u6df1\u84dd\u8272",
+"Yellow": "\u9ec4\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7ea2\u8272",
+"Light Gray": "\u6d45\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6697\u9ec4\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6df1\u7ea2\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+"history": "\u5386\u53f2",
+"styles": "\u6837\u5f0f",
+"formatting": "\u683c\u5f0f\u5316",
+"alignment": "\u5bf9\u9f50",
+"indentation": "\u7f29\u8fdb",
+"permanent pen": "\u8bb0\u53f7\u7b14",
+"comments": "\u5907\u6ce8",
+"Anchor": "\u951a\u70b9",
+"Special character": "\u7279\u6b8a\u7b26\u53f7",
+"Code sample": "\u4ee3\u7801\u793a\u4f8b",
+"Color": "\u989c\u8272",
+"Emoticons": "\u8868\u60c5",
+"Document properties": "\u6587\u6863\u5c5e\u6027",
+"Image": "\u56fe\u7247",
+"Insert link": "\u63d2\u5165\u94fe\u63a5",
+"Target": "\u6253\u5f00\u65b9\u5f0f",
+"Link": "\u94fe\u63a5",
+"Poster": "\u5c01\u9762",
+"Media": "\u5a92\u4f53",
+"Print": "\u6253\u5370",
+"Prev": "\u4e0a\u4e00\u4e2a",
+"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Whole words": "\u5168\u5b57\u5339\u914d",
+"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+"Caption": "\u6807\u9898",
+"Insert template": "\u63d2\u5165\u6a21\u677f"
+});
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.css b/public/resource/tinymce/skins/ui/jeecg/content.css
new file mode 100644
index 0000000..c9dc16d
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.css
@@ -0,0 +1,711 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(84, 111, 94, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.inline.css b/public/resource/tinymce/skins/ui/jeecg/content.inline.css
new file mode 100644
index 0000000..9eebd5b
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.inline.css
@@ -0,0 +1,705 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(84, 111, 94, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.inline.min.css b/public/resource/tinymce/skins/ui/jeecg/content.inline.min.css
new file mode 100644
index 0000000..9acf095
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.inline.min.css
@@ -0,0 +1,7 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(84,111,94,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:400;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.min.css b/public/resource/tinymce/skins/ui/jeecg/content.min.css
new file mode 100644
index 0000000..e9a1d89
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.min.css
@@ -0,0 +1,7 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(84,111,94,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:400;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}body{font-family:sans-serif}table{border-collapse:collapse}
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.mobile.css b/public/resource/tinymce/skins/ui/jeecg/content.mobile.css
new file mode 100644
index 0000000..64783f0
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.mobile.css
@@ -0,0 +1,29 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
+  /* Note: this file is used inside the content, so isn't part of theming */
+  background-color: green;
+  display: inline-block;
+  opacity: 0.5;
+  position: absolute;
+}
+body {
+  -webkit-text-size-adjust: none;
+}
+body img {
+  /* this is related to the content margin */
+  max-width: 96vw;
+}
+body table img {
+  max-width: 95%;
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/public/resource/tinymce/skins/ui/jeecg/content.mobile.min.css b/public/resource/tinymce/skins/ui/jeecg/content.mobile.min.css
new file mode 100644
index 0000000..1b87246
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/content.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/jeecg/fonts/tinymce-mobile.woff b/public/resource/tinymce/skins/ui/jeecg/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/public/resource/tinymce/skins/ui/jeecg/fonts/tinymce-mobile.woff differ
diff --git a/public/resource/tinymce/skins/ui/jeecg/skin.css b/public/resource/tinymce/skins/ui/jeecg/skin.css
new file mode 100644
index 0000000..7d54f3c
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/skin.css
@@ -0,0 +1,3045 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.tox {
+  box-shadow: none;
+  box-sizing: content-box;
+  color: rgba(84, 111, 94, 0.85);
+  cursor: auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: initial;
+  white-space: normal;
+}
+.tox *:not(svg):not(rect) {
+  box-sizing: inherit;
+  color: inherit;
+  cursor: inherit;
+  direction: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-tap-highlight-color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow: inherit;
+  text-transform: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+.tox *:not(svg):not(rect) {
+  /* stylelint-disable-line no-duplicate-selectors */
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  float: none;
+  height: auto;
+  margin: 0;
+  max-width: none;
+  outline: 0;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+.tox:not([dir=rtl]) {
+  direction: ltr;
+  text-align: left;
+}
+.tox[dir=rtl] {
+  direction: rtl;
+  text-align: right;
+}
+.tox-tinymce {
+  border: 1px solid #d9d9d9;
+  border-radius: 0px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  position: relative;
+  visibility: inherit !important;
+}
+.tox-tinymce-inline {
+  border: none;
+  box-shadow: none;
+}
+.tox-tinymce-inline .tox-editor-header {
+  background-color: transparent;
+  border: 1px solid #d9d9d9;
+  border-radius: 0px;
+  box-shadow: none;
+}
+.tox-tinymce-aux {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  z-index: 1300;
+}
+.tox-tinymce *:focus,
+.tox-tinymce-aux *:focus {
+  outline: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+.tox[dir=rtl] .tox-icon--flip svg {
+  transform: rotateY(180deg);
+}
+.tox .accessibility-issue__header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 2.5px;
+}
+.tox .accessibility-issue__description {
+  align-items: stretch;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .accessibility-issue__description > div {
+  padding-bottom: 2.5px;
+}
+.tox .accessibility-issue__description > div > div {
+  align-items: center;
+  display: flex;
+  margin-bottom: 2.5px;
+}
+.tox .accessibility-issue__description > *:last-child:not(:only-child) {
+  border-color: #d9d9d9;
+  border-style: solid;
+}
+.tox .accessibility-issue__repair {
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description {
+  background-color: rgba(10, 143, 233, 0.1);
+  border-color: rgba(10, 143, 233, 0.4);
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child {
+  border-color: rgba(10, 143, 233, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 {
+  color: #0a8fe9;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg {
+  fill: #0a8fe9;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon {
+  color: #0a8fe9;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description {
+  background-color: rgba(255, 165, 0, 0.1);
+  border-color: rgba(255, 165, 0, 0.5);
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child {
+  border-color: rgba(255, 165, 0, 0.5);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg {
+  fill: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description {
+  background-color: rgba(204, 0, 0, 0.1);
+  border-color: rgba(204, 0, 0, 0.4);
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child {
+  border-color: rgba(204, 0, 0, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg {
+  fill: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description {
+  background-color: rgba(120, 171, 70, 0.1);
+  border-color: rgba(120, 171, 70, 0.4);
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child {
+  border-color: rgba(120, 171, 70, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg {
+  fill: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue__header h1,
+.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
+  margin-top: 0;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-left: 2.5px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-left: auto;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description {
+  padding: 2.5px 2.5px 2.5px 5px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-left-width: 1px;
+  padding-left: 2.5px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-right: 2.5px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-right: auto;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description {
+  padding: 2.5px 5px 2.5px 2.5px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-right-width: 1px;
+  padding-right: 2.5px;
+}
+.tox .tox-anchorbar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-bar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-button {
+  background-color: #0a8fe9;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #0a8fe9;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 2.5px 10px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-button[disabled] {
+  background-color: #0a8fe9;
+  background-image: none;
+  border-color: #0a8fe9;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-button:focus:not(:disabled) {
+  background-color: #0980d1;
+  background-image: none;
+  border-color: #0980d1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:hover:not(:disabled) {
+  background-color: #0980d1;
+  background-image: none;
+  border-color: #0980d1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:active:not(:disabled) {
+  background-color: #0871b8;
+  background-image: none;
+  border-color: #0871b8;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary {
+  background-color: #f0f0f0;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #f0f0f0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  outline: none;
+  padding: 2.5px 10px;
+  text-decoration: none;
+  text-transform: none;
+}
+.tox .tox-button--secondary[disabled] {
+  background-color: #f0f0f0;
+  background-image: none;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.5);
+}
+.tox .tox-button--secondary:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--secondary:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--secondary:active:not(:disabled) {
+  background-color: #d6d6d6;
+  background-image: none;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--icon,
+.tox .tox-button.tox-button--icon,
+.tox .tox-button.tox-button--secondary.tox-button--icon {
+  padding: 2.5px;
+}
+.tox .tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
+  display: block;
+  fill: currentColor;
+}
+.tox .tox-button-link {
+  background: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 10px;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.tox .tox-button-link--sm {
+  font-size: 8.75px;
+}
+.tox .tox-button--naked {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: unset;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--naked[disabled] {
+  background-color: #f0f0f0;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.5);
+}
+.tox .tox-button--naked:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--naked:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--naked:active:not(:disabled) {
+  background-color: #d6d6d6;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-button--naked .tox-icon svg {
+  fill: currentColor;
+}
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-checkbox {
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  height: 36px;
+  min-width: 36px;
+}
+.tox .tox-checkbox__input {
+  /* Hide from view but visible to screen readers */
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+.tox .tox-checkbox__icons {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px transparent;
+  box-sizing: content-box;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  padding: calc(2.5px - 1px);
+  width: 24px;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: block;
+  fill: rgba(84, 111, 94, 0.3);
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: none;
+  fill: #0a8fe9;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: none;
+  fill: #0a8fe9;
+}
+.tox .tox-checkbox--disabled {
+  color: rgba(84, 111, 94, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  fill: rgba(84, 111, 94, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  fill: rgba(84, 111, 94, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  fill: rgba(84, 111, 94, 0.5);
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #0a8fe9;
+  padding: calc(2.5px - 1px);
+}
+.tox:not([dir=rtl]) .tox-checkbox__label {
+  margin-left: 2.5px;
+}
+.tox:not([dir=rtl]) .tox-checkbox__input {
+  left: -10000px;
+}
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
+  margin-left: 2.5px;
+}
+.tox[dir=rtl] .tox-checkbox__label {
+  margin-right: 2.5px;
+}
+.tox[dir=rtl] .tox-checkbox__input {
+  right: -10000px;
+}
+.tox[dir=rtl] .tox-bar .tox-checkbox {
+  margin-right: 2.5px;
+}
+.tox {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox .tox-collection--toolbar .tox-collection__group {
+  display: flex;
+  padding: 0;
+}
+.tox .tox-collection--grid .tox-collection__group {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 208px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+}
+.tox .tox-collection--list .tox-collection__group {
+  border-bottom-width: 0;
+  border-color: #d9d9d9;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-style: solid;
+  border-top-width: 1px;
+  padding: 2.5px 0;
+}
+.tox .tox-collection--list .tox-collection__group:first-child {
+  border-top-width: 0;
+}
+.tox .tox-collection__group-heading {
+  background-color: #f3f3f3;
+  color: rgba(84, 111, 94, 0.7);
+  cursor: default;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 2.5px;
+  margin-top: -2.5px;
+  padding: 2.5px 5px;
+  text-transform: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection__item {
+  align-items: center;
+  color: rgba(84, 111, 94, 0.85);
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection--list .tox-collection__item {
+  padding: 2.5px 5px;
+}
+.tox .tox-collection--toolbar .tox-collection__item {
+  border-radius: 3px;
+  padding: 2.5px;
+}
+.tox .tox-collection--grid .tox-collection__item {
+  border-radius: 3px;
+  padding: 2.5px;
+}
+.tox .tox-collection--list .tox-collection__item--enabled {
+  background-color: #fff;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection--list .tox-collection__item--active {
+  background-color: #e5e9e7;
+}
+.tox .tox-collection--toolbar .tox-collection__item--enabled {
+  background-color: #e5e9e7;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection--toolbar .tox-collection__item--active {
+  background-color: #e5e9e7;
+}
+.tox .tox-collection--grid .tox-collection__item--enabled {
+  background-color: #e5e9e7;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: #e5e9e7;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection__item-icon,
+.tox .tox-collection__item-checkmark {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+.tox .tox-collection__item-icon svg,
+.tox .tox-collection__item-checkmark svg {
+  fill: currentColor;
+}
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
+  height: 48px;
+  width: 48px;
+}
+.tox .tox-collection__item-label {
+  color: currentColor;
+  display: inline-block;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  text-transform: none;
+  word-break: break-all;
+}
+.tox .tox-collection__item-accessory {
+  color: rgba(84, 111, 94, 0.7);
+  display: inline-block;
+  font-size: 8.75px;
+  height: 24px;
+  line-height: 24px;
+  text-transform: none;
+}
+.tox .tox-collection__item-caret {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
+.tox .tox-collection__item-caret::after {
+  content: '';
+  font-size: 0;
+  min-height: inherit;
+}
+.tox .tox-collection__item-caret svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-collection__item--state-disabled {
+  background-color: transparent;
+  color: rgba(84, 111, 94, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg {
+  fill: rgba(84, 111, 94, 0.5);
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
+  display: none;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
+  display: none;
+}
+.tox .tox-collection--horizontal {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  margin-bottom: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+.tox .tox-collection--horizontal .tox-collection__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0 2.5px;
+}
+.tox .tox-collection--horizontal .tox-collection__item {
+  height: 34px;
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item-label {
+  white-space: nowrap;
+}
+.tox .tox-collection--horizontal .tox-collection__item-caret {
+  margin-left: 4px;
+}
+.tox .tox-collection__item-container {
+  display: flex;
+}
+.tox .tox-collection__item-container--row {
+  align-items: center;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-left {
+  margin-right: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top {
+  align-items: flex-start;
+  margin-bottom: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle {
+  align-items: center;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom {
+  align-items: flex-end;
+  margin-top: auto;
+}
+.tox .tox-collection__item-container--column {
+  -ms-grid-row-align: center;
+      align-self: center;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-left {
+  align-items: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-right {
+  align-items: flex-end;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top {
+  align-self: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom {
+  align-self: flex-end;
+}
+.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-right: 1px solid #d9d9d9;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-left: 5px;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-left: 2.5px;
+}
+.tox:not([dir=rtl]) .tox-collection__item-accessory {
+  margin-left: 10px;
+  text-align: right;
+}
+.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
+  margin-left: 10px;
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-left: 1px solid #d9d9d9;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-right: 5px;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-right: 2.5px;
+}
+.tox[dir=rtl] .tox-collection__item-accessory {
+  margin-right: 10px;
+  text-align: left;
+}
+.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
+  margin-right: 10px;
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
+  margin-right: 4px;
+}
+.tox .tox-color-picker-container {
+  display: flex;
+  flex-direction: row;
+  height: 225px;
+  margin: 0;
+}
+.tox .tox-sv-palette {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+.tox .tox-sv-palette-spectrum {
+  height: 100%;
+}
+.tox .tox-sv-palette,
+.tox .tox-sv-palette-spectrum {
+  width: 225px;
+}
+.tox .tox-sv-palette-thumb {
+  background: none;
+  border: 1px solid black;
+  border-radius: 50%;
+  box-sizing: content-box;
+  height: 12px;
+  position: absolute;
+  width: 12px;
+}
+.tox .tox-sv-palette-inner-thumb {
+  border: 1px solid white;
+  border-radius: 50%;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox .tox-hue-slider {
+  box-sizing: border-box;
+  height: 100%;
+  width: 25px;
+}
+.tox .tox-hue-slider-spectrum {
+  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
+  height: 100%;
+  width: 100%;
+}
+.tox .tox-hue-slider,
+.tox .tox-hue-slider-spectrum {
+  width: 20px;
+}
+.tox .tox-hue-slider-thumb {
+  background: white;
+  border: 1px solid black;
+  box-sizing: content-box;
+  height: 4px;
+  width: 100%;
+}
+.tox .tox-rgb-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tox .tox-rgb-form div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: inherit;
+}
+.tox .tox-rgb-form input {
+  width: 6em;
+}
+.tox .tox-rgb-form input.tox-invalid {
+  /* Need !important to override Chrome's focus styling unfortunately */
+  border: 1px solid red !important;
+}
+.tox .tox-rgb-form .tox-rgba-preview {
+  border: 1px solid black;
+  flex-grow: 2;
+  margin-bottom: 0;
+}
+.tox:not([dir=rtl]) .tox-sv-palette {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider-thumb {
+  margin-left: -1px;
+}
+.tox:not([dir=rtl]) .tox-rgb-form label {
+  margin-right: 0.5em;
+}
+.tox[dir=rtl] .tox-sv-palette {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider-thumb {
+  margin-right: -1px;
+}
+.tox[dir=rtl] .tox-rgb-form label {
+  margin-left: 0.5em;
+}
+.tox .tox-toolbar .tox-swatches,
+.tox .tox-toolbar__primary .tox-swatches,
+.tox .tox-toolbar__overflow .tox-swatches {
+  margin: 2px 0 3px 4px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
+  border: 0;
+  margin: -2.5px 0;
+}
+.tox .tox-swatches__row {
+  display: flex;
+}
+.tox .tox-swatch {
+  height: 30px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  width: 30px;
+}
+.tox .tox-swatch:hover,
+.tox .tox-swatch:focus {
+  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
+  transform: scale(0.8);
+}
+.tox .tox-swatch--remove {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-swatch--remove svg path {
+  stroke: #e74c3c;
+}
+.tox .tox-swatches__picker-btn {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 30px;
+}
+.tox .tox-swatches__picker-btn svg {
+  height: 24px;
+  width: 24px;
+}
+.tox .tox-swatches__picker-btn:hover {
+  background: #e5e9e7;
+}
+.tox:not([dir=rtl]) .tox-swatches__picker-btn {
+  margin-left: auto;
+}
+.tox[dir=rtl] .tox-swatches__picker-btn {
+  margin-right: auto;
+}
+.tox .tox-comment-thread {
+  background: #fff;
+  position: relative;
+}
+.tox .tox-comment-thread > *:not(:first-child) {
+  margin-top: 5px;
+}
+.tox .tox-comment {
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(84, 111, 94, 0.1);
+  padding: 5px 5px 10px 5px;
+  position: relative;
+}
+.tox .tox-comment__header {
+  align-items: center;
+  color: rgba(84, 111, 94, 0.85);
+  display: flex;
+  justify-content: space-between;
+}
+.tox .tox-comment__date {
+  color: rgba(84, 111, 94, 0.7);
+  font-size: 12px;
+}
+.tox .tox-comment__body {
+  color: rgba(84, 111, 94, 0.85);
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin-top: 5px;
+  position: relative;
+  text-transform: initial;
+}
+.tox .tox-comment__body textarea {
+  resize: none;
+  white-space: normal;
+  width: 100%;
+}
+.tox .tox-comment__expander {
+  padding-top: 5px;
+}
+.tox .tox-comment__expander p {
+  color: rgba(84, 111, 94, 0.7);
+  font-size: 8.75px;
+  font-style: normal;
+}
+.tox .tox-comment__body p {
+  margin: 0;
+}
+.tox .tox-comment__buttonspacing {
+  padding-top: 10px;
+  text-align: center;
+}
+.tox .tox-comment-thread__overlay::after {
+  background: #fff;
+  bottom: 0;
+  content: "";
+  display: flex;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__reply {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 5px;
+}
+.tox .tox-comment__reply > *:first-child {
+  margin-bottom: 5px;
+  width: 100%;
+}
+.tox .tox-comment__edit {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.tox .tox-comment__gradient::after {
+  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 5em;
+  margin-top: -40px;
+  position: absolute;
+  width: 100%;
+}
+.tox .tox-comment__overlay {
+  background: #fff;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__loading-text {
+  align-items: center;
+  color: rgba(84, 111, 94, 0.85);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.tox .tox-comment__loading-text > div {
+  padding-bottom: 10px;
+}
+.tox .tox-comment__overlaytext {
+  bottom: 0;
+  flex-direction: column;
+  font-size: 8.75px;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+.tox .tox-comment__overlaytext p {
+  background-color: #fff;
+  box-shadow: 0 0 8px 8px #fff;
+  color: rgba(84, 111, 94, 0.85);
+  text-align: center;
+}
+.tox .tox-comment__overlaytext div:nth-of-type(2) {
+  font-size: 0.8em;
+}
+.tox .tox-comment__busy-spinner {
+  align-items: center;
+  background-color: #fff;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+}
+.tox .tox-comment__scroll {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  overflow: auto;
+}
+.tox .tox-conversations {
+  margin: 5px;
+}
+.tox:not([dir=rtl]) .tox-comment__edit {
+  margin-left: 5px;
+}
+.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__edit > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
+  margin-left: 5px;
+}
+.tox[dir=rtl] .tox-comment__edit {
+  margin-right: 5px;
+}
+.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child,
+.tox[dir=rtl] .tox-comment__edit > *:last-child,
+.tox[dir=rtl] .tox-comment__reply > *:last-child {
+  margin-right: 5px;
+}
+.tox .tox-user {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-user__avatar svg {
+  fill: rgba(84, 111, 94, 0.7);
+}
+.tox .tox-user__name {
+  color: rgba(84, 111, 94, 0.7);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+.tox:not([dir=rtl]) .tox-user__avatar svg {
+  margin-right: 5px;
+}
+.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
+  margin-left: 5px;
+}
+.tox[dir=rtl] .tox-user__avatar svg {
+  margin-left: 5px;
+}
+.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
+  margin-right: 5px;
+}
+.tox .tox-dialog-wrap {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1100;
+}
+.tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.tox .tox-dialog-wrap__backdrop--opaque {
+  background-color: #fff;
+}
+.tox .tox-dialog {
+  background-color: #fff;
+  border-color: #d9d9d9;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 16px 16px -10px rgba(84, 111, 94, 0.15), 0 0 40px 1px rgba(84, 111, 94, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 95vw;
+  z-index: 2;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog {
+    align-self: flex-start;
+    margin: 5px auto;
+    width: calc(100vw - 10px);
+  }
+}
+.tox .tox-dialog-inline {
+  z-index: 1100;
+}
+.tox .tox-dialog__header {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: none;
+  color: rgba(84, 111, 94, 0.85);
+  display: flex;
+  font-size: 10px;
+  justify-content: space-between;
+  padding: 5px 10px 0 10px;
+  position: relative;
+}
+.tox .tox-dialog__header .tox-button {
+  z-index: 1;
+}
+.tox .tox-dialog__draghandle {
+  cursor: grab;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tox .tox-dialog__draghandle:active {
+  cursor: grabbing;
+}
+.tox .tox-dialog__dismiss {
+  margin-left: auto;
+}
+.tox .tox-dialog__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  text-transform: none;
+}
+.tox .tox-dialog__body {
+  color: rgba(84, 111, 94, 0.85);
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  min-width: 0;
+  text-align: left;
+  text-transform: none;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body {
+    flex-direction: column;
+  }
+}
+.tox .tox-dialog__body-nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 10px;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
+    flex-direction: row;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+}
+.tox .tox-dialog__body-nav-item {
+  border-bottom: 2px solid transparent;
+  color: rgba(84, 111, 94, 0.7);
+  display: inline-block;
+  font-size: 8.75px;
+  line-height: 1.3;
+  margin-bottom: 5px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tox .tox-dialog__body-nav-item:focus {
+  background-color: rgba(10, 143, 233, 0.1);
+}
+.tox .tox-dialog__body-nav-item--active {
+  border-bottom: 2px solid #0a8fe9;
+  color: #0a8fe9;
+}
+.tox .tox-dialog__body-content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+  max-height: 650px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 10px 10px;
+}
+.tox .tox-dialog__body-content > * {
+  margin-bottom: 0;
+  margin-top: 10px;
+}
+.tox .tox-dialog__body-content > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content > *:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content a {
+  color: #0a8fe9;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:hover,
+.tox .tox-dialog__body-content a:focus {
+  color: #0871b8;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:active {
+  color: #0871b8;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-dialog__body-content ul {
+  display: block;
+  list-style-type: disc;
+  margin-bottom: 10px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content .tox-form__group h1 {
+  color: rgba(84, 111, 94, 0.85);
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  margin-bottom: 10px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group h2 {
+  color: rgba(84, 111, 94, 0.85);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  margin-bottom: 10px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group p {
+  margin-bottom: 10px;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:first-child,
+.tox .tox-dialog__body-content .tox-form__group h2:first-child,
+.tox .tox-dialog__body-content .tox-form__group p:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:last-child,
+.tox .tox-dialog__body-content .tox-form__group h2:last-child,
+.tox .tox-dialog__body-content .tox-form__group p:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:only-child,
+.tox .tox-dialog__body-content .tox-form__group h2:only-child,
+.tox .tox-dialog__body-content .tox-form__group p:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog--width-lg {
+  height: 650px;
+  max-width: 1200px;
+}
+.tox .tox-dialog--width-md {
+  max-width: 800px;
+}
+.tox .tox-dialog--width-md .tox-dialog__body-content {
+  overflow: auto;
+}
+.tox .tox-dialog__body-content--centered {
+  text-align: center;
+}
+.tox .tox-dialog__footer {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+}
+.tox .tox-dialog__footer-start,
+.tox .tox-dialog__footer-end {
+  display: flex;
+}
+.tox .tox-dialog__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.tox .tox-dialog__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tox .tox-dialog__table thead th {
+  font-weight: normal;
+  padding-bottom: 5px;
+}
+.tox .tox-dialog__table tbody tr {
+  border-bottom: 1px solid #d9d9d9;
+}
+.tox .tox-dialog__table tbody tr:last-child {
+  border-bottom: none;
+}
+.tox .tox-dialog__table td {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.tox .tox-dialog__popups {
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+}
+.tox .tox-dialog__body-iframe {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox .tox-dialog-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox .tox-dialog-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox .tox-dialog-dock-transition {
+  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
+}
+.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
+  transition-delay: 0s;
+}
+.tox.tox-platform-ie {
+  /* IE11 CSS styles go here */
+}
+.tox.tox-platform-ie .tox-dialog-wrap {
+  position: -ms-device-fixed;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
+    margin-left: 5px;
+  }
+}
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-left: 5px;
+}
+.tox[dir=rtl] .tox-dialog__body {
+  text-align: right;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
+    margin-left: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
+    margin-right: 5px;
+  }
+}
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-right: 5px;
+}
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox .tox-dropzone-container {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dropzone {
+  align-items: center;
+  background: #fff;
+  border: 2px dashed #d9d9d9;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-height: 100px;
+  padding: 10px;
+}
+.tox .tox-dropzone p {
+  color: rgba(84, 111, 94, 0.7);
+  margin: 0 0 10px 0;
+}
+.tox .tox-edit-area {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  overflow: hidden;
+  position: relative;
+}
+.tox .tox-edit-area__iframe {
+  background-color: #fff;
+  border: 0;
+  box-sizing: border-box;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tox.tox-inline-edit-area {
+  border: 1px dotted #d9d9d9;
+}
+.tox .tox-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tox .tox-editor-header {
+  z-index: 1;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: none;
+  transition: box-shadow 0.5s;
+}
+.tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+.tox.tox-tinymce-inline .tox-editor-header {
+  margin-bottom: -1px;
+}
+.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+  background-color: transparent;
+  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
+}
+.tox-editor-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox-editor-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox-editor-dock-transition {
+  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.tox-editor-dock-transition.tox-editor-dock-fadein {
+  transition-delay: 0s;
+}
+.tox .tox-control-wrap {
+  flex: 1;
+  position: relative;
+}
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
+  display: none;
+}
+.tox .tox-control-wrap svg {
+  display: block;
+}
+.tox .tox-control-wrap__status-icon-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-control-wrap__status-icon-invalid svg {
+  fill: #c00;
+}
+.tox .tox-control-wrap__status-icon-unknown svg {
+  fill: orange;
+}
+.tox .tox-control-wrap__status-icon-valid svg {
+  fill: green;
+}
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
+  padding-right: 20px;
+}
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
+  right: 2.5px;
+}
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
+  padding-left: 20px;
+}
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
+  left: 2.5px;
+}
+.tox .tox-autocompleter {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-menu {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-autocompleter-highlight {
+  font-weight: normal;
+}
+.tox .tox-color-input {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+.tox .tox-color-input .tox-textfield {
+  z-index: -1;
+}
+.tox .tox-color-input span {
+  border-color: rgba(84, 111, 94, 0.2);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  height: 24px;
+  position: absolute;
+  top: 6px;
+  width: 24px;
+}
+.tox .tox-color-input span:hover:not([aria-disabled=true]),
+.tox .tox-color-input span:focus:not([aria-disabled=true]) {
+  border-color: #0a8fe9;
+  cursor: pointer;
+}
+.tox .tox-color-input span::before {
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  background-size: 12px 12px;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  box-sizing: border-box;
+  content: '';
+  height: 24px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+  z-index: -1;
+}
+.tox .tox-color-input span[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tox:not([dir=rtl]) .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
+  padding-left: 36px;
+}
+.tox:not([dir=rtl]) .tox-color-input span {
+  left: 6px;
+}
+.tox[dir="rtl"] .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir="rtl"] .tox-color-input .tox-textfield {
+  padding-right: 36px;
+}
+.tox[dir="rtl"] .tox-color-input span {
+  right: 6px;
+}
+.tox .tox-label,
+.tox .tox-toolbar-label {
+  color: rgba(84, 111, 94, 0.7);
+  display: block;
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  padding: 0 5px 0 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-toolbar-label {
+  padding: 0 5px;
+}
+.tox[dir=rtl] .tox-label {
+  padding: 0 0 0 5px;
+}
+.tox .tox-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group {
+  box-sizing: border-box;
+  margin-bottom: 2.5px;
+}
+.tox .tox-form-group--maximize {
+  flex: 1;
+}
+.tox .tox-form__group--error {
+  color: #c00;
+}
+.tox .tox-form__group--collection {
+  display: flex;
+}
+.tox .tox-form__grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.tox .tox-form__grid--2col > .tox-form__group {
+  width: calc(50% - (5px / 2));
+}
+.tox .tox-form__grid--3col > .tox-form__group {
+  width: calc(100% / 3 - (5px / 2));
+}
+.tox .tox-form__grid--4col > .tox-form__group {
+  width: calc(25% - (5px / 2));
+}
+.tox .tox-form__controls-h-stack {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--inline {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--stretched {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-textarea {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-left: 2.5px;
+}
+.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-right: 2.5px;
+}
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,
+.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
+  display: none;
+}
+.tox .tox-textfield,
+.tox .tox-toolbar-textfield,
+.tox .tox-listboxfield .tox-listbox--select,
+.tox .tox-textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #d9d9d9;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgba(84, 111, 94, 0.85);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 10px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 3.25px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-textfield[disabled],
+.tox .tox-textarea[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(84, 111, 94, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-textfield:focus,
+.tox .tox-listboxfield .tox-listbox--select:focus,
+.tox .tox-textarea:focus {
+  background-color: #fff;
+  border-color: #0a8fe9;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-toolbar-textfield {
+  border-width: 0;
+  margin-bottom: 3px;
+  margin-top: 2px;
+  max-width: 250px;
+}
+.tox .tox-naked-btn {
+  background-color: transparent;
+  border: 0;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #0a8fe9;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.tox .tox-naked-btn svg {
+  display: block;
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
+  margin-left: 2.5px;
+}
+.tox[dir=rtl] .tox-toolbar-textfield + * {
+  margin-right: 2.5px;
+}
+.tox .tox-listboxfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-listboxfield .tox-listbox--select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(84, 111, 94, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-listbox__select-label {
+  cursor: default;
+  flex: 1;
+  margin: 0 4px;
+}
+.tox .tox-listbox__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 10px;
+}
+.tox .tox-listbox__select-chevron svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-listboxfield .tox-listbox--select {
+  align-items: center;
+  display: flex;
+}
+.tox:not([dir=rtl]) .tox-listboxfield svg {
+  right: 5px;
+}
+.tox[dir=rtl] .tox-listboxfield svg {
+  left: 5px;
+}
+.tox .tox-selectfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-selectfield select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #d9d9d9;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: rgba(84, 111, 94, 0.85);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 10px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 3.25px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-selectfield select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(84, 111, 94, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-selectfield select::-ms-expand {
+  display: none;
+}
+.tox .tox-selectfield select:focus {
+  background-color: #fff;
+  border-color: #0a8fe9;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-selectfield svg {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox:not([dir=rtl]) .tox-selectfield select[size="0"],
+.tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
+  padding-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-selectfield svg {
+  right: 5px;
+}
+.tox[dir=rtl] .tox-selectfield select[size="0"],
+.tox[dir=rtl] .tox-selectfield select[size="1"] {
+  padding-left: 15px;
+}
+.tox[dir=rtl] .tox-selectfield svg {
+  left: 5px;
+}
+.tox .tox-textarea {
+  -webkit-appearance: textarea;
+     -moz-appearance: textarea;
+          appearance: textarea;
+  white-space: pre-wrap;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+  z-index: 1200;
+}
+.tox-shadowhost.tox-fullscreen {
+  z-index: 1200;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
+.tox .tox-help__more-link {
+  list-style: none;
+  margin-top: 1em;
+}
+.tox .tox-image-tools {
+  width: 100%;
+}
+.tox .tox-image-tools__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-image-tools__image {
+  background-color: #666;
+  height: 380px;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.tox .tox-image-tools__image,
+.tox .tox-image-tools__image + .tox-image-tools__toolbar {
+  margin-top: 5px;
+}
+.tox .tox-image-tools__image-bg {
+  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
+}
+.tox .tox-image-tools__toolbar > .tox-spacer {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-croprect-block {
+  background: black;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  position: absolute;
+  zoom: 1;
+}
+.tox .tox-croprect-handle {
+  border: 2px solid white;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tox .tox-croprect-handle-move {
+  border: 0;
+  cursor: move;
+  position: absolute;
+}
+.tox .tox-croprect-handle-nw {
+  border-width: 2px 0 0 2px;
+  cursor: nw-resize;
+  left: 100px;
+  margin: -2px 0 0 -2px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-ne {
+  border-width: 2px 2px 0 0;
+  cursor: ne-resize;
+  left: 200px;
+  margin: -2px 0 0 -20px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-sw {
+  border-width: 0 0 2px 2px;
+  cursor: sw-resize;
+  left: 100px;
+  margin: -20px 2px 0 -2px;
+  top: 200px;
+}
+.tox .tox-croprect-handle-se {
+  border-width: 0 2px 2px 0;
+  cursor: se-resize;
+  left: 200px;
+  margin: -20px 0 0 -20px;
+  top: 200px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-left: 5px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-left: 20px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-left: 20px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-right: 5px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-right: 20px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-right: 20px;
+}
+.tox .tox-insert-table-picker {
+  display: flex;
+  flex-wrap: wrap;
+  width: 110px;
+}
+.tox .tox-insert-table-picker > div {
+  border-color: #d9d9d9;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  height: 11px;
+  width: 11px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
+  margin: -2.5px 0;
+}
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
+  background-color: rgba(10, 143, 233, 0.5);
+  border-color: rgba(10, 143, 233, 0.5);
+}
+.tox .tox-insert-table-picker__label {
+  color: rgba(84, 111, 94, 0.7);
+  display: block;
+  font-size: 8.75px;
+  padding: 2.5px;
+  text-align: center;
+  width: 100%;
+}
+.tox:not([dir=rtl]) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
+  border-right: 0;
+}
+.tox[dir=rtl] {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
+  border-right: 0;
+}
+.tox {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.tox .tox-menu {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(84, 111, 94, 0.1);
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  z-index: 1150;
+}
+.tox .tox-menu.tox-collection.tox-collection--list {
+  padding: 0;
+}
+.tox .tox-menu.tox-collection.tox-collection--toolbar {
+  padding: 2.5px;
+}
+.tox .tox-menu.tox-collection.tox-collection--grid {
+  padding: 2.5px;
+}
+.tox .tox-menu__label h1,
+.tox .tox-menu__label h2,
+.tox .tox-menu__label h3,
+.tox .tox-menu__label h4,
+.tox .tox-menu__label h5,
+.tox .tox-menu__label h6,
+.tox .tox-menu__label p,
+.tox .tox-menu__label blockquote,
+.tox .tox-menu__label code {
+  margin: 0;
+}
+.tox .tox-menubar {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23d9d9d9'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 4px 0 4px;
+}
+.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
+  border-top: 1px solid #d9d9d9;
+}
+/* Deprecated. Remove in next major release */
+.tox .tox-mbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #817f7c;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 4px;
+  text-transform: none;
+  width: auto;
+}
+.tox .tox-mbtn[disabled] {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(129, 127, 124, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-mbtn:focus:not(:disabled) {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: #0a9fe5;
+}
+.tox .tox-mbtn--active {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: rgba(41, 159, 250, 0.88);
+}
+.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: #0a9fe5;
+}
+.tox .tox-mbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
+  cursor: not-allowed;
+}
+.tox .tox-mbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  display: none;
+}
+.tox .tox-notification {
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: -ms-grid;
+  display: grid;
+  font-size: 8.75px;
+  font-weight: normal;
+  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  margin-top: 2.5px;
+  opacity: 0;
+  padding: 2.5px;
+  transition: transform 100ms ease-in, opacity 150ms ease-in;
+}
+.tox .tox-notification p {
+  font-size: 8.75px;
+  font-weight: normal;
+}
+.tox .tox-notification a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-notification--in {
+  opacity: 1;
+}
+.tox .tox-notification--success {
+  background-color: #e4eeda;
+  border-color: #d7e6c8;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--success p {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--success a {
+  color: #547831;
+}
+.tox .tox-notification--success svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--error {
+  background-color: #f8dede;
+  border-color: #f2bfbf;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--error p {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--error a {
+  color: #c00;
+}
+.tox .tox-notification--error svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
+  background-color: #fffaea;
+  border-color: #ffe89d;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--warn p,
+.tox .tox-notification--warning p {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--warn a,
+.tox .tox-notification--warning a {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--warn svg,
+.tox .tox-notification--warning svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--info {
+  background-color: #d9edf7;
+  border-color: #779ecb;
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--info p {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--info a {
+  color: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification--info svg {
+  fill: rgba(84, 111, 94, 0.85);
+}
+.tox .tox-notification__body {
+  -ms-grid-row-align: center;
+      align-self: center;
+  color: rgba(84, 111, 94, 0.85);
+  font-size: 14px;
+  -ms-grid-column-span: 1;
+  grid-column-end: 3;
+  -ms-grid-column: 2;
+      grid-column-start: 2;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  text-align: center;
+  white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
+}
+.tox .tox-notification__body > * {
+  margin: 0;
+}
+.tox .tox-notification__body > * + * {
+  margin-top: 1rem;
+}
+.tox .tox-notification__icon {
+  -ms-grid-row-align: center;
+      align-self: center;
+  -ms-grid-column-span: 1;
+  grid-column-end: 2;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification__icon svg {
+  display: block;
+}
+.tox .tox-notification__dismiss {
+  -ms-grid-row-align: start;
+      align-self: start;
+  -ms-grid-column-span: 1;
+  grid-column-end: 4;
+  -ms-grid-column: 3;
+      grid-column-start: 3;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification .tox-progress-bar {
+  -ms-grid-column-span: 3;
+  grid-column-end: 4;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 3;
+  -ms-grid-row: 2;
+      grid-row-start: 2;
+  -ms-grid-column-align: center;
+      justify-self: center;
+}
+.tox .tox-pop {
+  display: inline-block;
+  position: relative;
+}
+.tox .tox-pop--resizing {
+  transition: width 0.1s ease;
+}
+.tox .tox-pop--resizing .tox-toolbar,
+.tox .tox-pop--resizing .tox-toolbar__group {
+  flex-wrap: nowrap;
+}
+.tox .tox-pop--transition {
+  transition: 0.15s ease;
+  transition-property: left, right, top, bottom;
+}
+.tox .tox-pop--transition::before,
+.tox .tox-pop--transition::after {
+  transition: all 0.15s, visibility 0s, opacity 0.075s ease 0.075s;
+}
+.tox .tox-pop__dialog {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  min-width: 0;
+  overflow: hidden;
+}
+.tox .tox-pop__dialog > *:not(.tox-toolbar) {
+  margin: 2.5px 2.5px 2.5px 5px;
+}
+.tox .tox-pop__dialog .tox-toolbar {
+  background-color: transparent;
+  margin-bottom: -1px;
+}
+.tox .tox-pop::before,
+.tox .tox-pop::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  opacity: 1;
+  position: absolute;
+  width: 0;
+}
+.tox .tox-pop.tox-pop--inset::before,
+.tox .tox-pop.tox-pop--inset::after {
+  opacity: 0;
+  transition: all 0s 0.15s, visibility 0s, opacity 0.075s ease;
+}
+.tox .tox-pop.tox-pop--bottom::before,
+.tox .tox-pop.tox-pop--bottom::after {
+  left: 50%;
+  top: 100%;
+}
+.tox .tox-pop.tox-pop--bottom::after {
+  border-color: #fff transparent transparent transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: -1px;
+}
+.tox .tox-pop.tox-pop--bottom::before {
+  border-color: #d9d9d9 transparent transparent transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--top::before,
+.tox .tox-pop.tox-pop--top::after {
+  left: 50%;
+  top: 0;
+  transform: translateY(-100%);
+}
+.tox .tox-pop.tox-pop--top::after {
+  border-color: transparent transparent #fff transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: 1px;
+}
+.tox .tox-pop.tox-pop--top::before {
+  border-color: transparent transparent #d9d9d9 transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--left::before,
+.tox .tox-pop.tox-pop--left::after {
+  left: 0;
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--left::after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 8px;
+  margin-left: -15px;
+}
+.tox .tox-pop.tox-pop--left::before {
+  border-color: transparent #d9d9d9 transparent transparent;
+  border-width: 10px;
+  margin-left: -19px;
+}
+.tox .tox-pop.tox-pop--right::before,
+.tox .tox-pop.tox-pop--right::after {
+  left: 100%;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--right::after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 8px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--right::before {
+  border-color: transparent transparent transparent #d9d9d9;
+  border-width: 10px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--align-left::before,
+.tox .tox-pop.tox-pop--align-left::after {
+  left: 20px;
+}
+.tox .tox-pop.tox-pop--align-right::before,
+.tox .tox-pop.tox-pop--align-right::after {
+  left: calc(100% - 20px);
+}
+.tox .tox-sidebar-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  min-height: 0;
+}
+.tox .tox-sidebar {
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.tox .tox-sidebar__slider {
+  display: flex;
+  overflow: hidden;
+}
+.tox .tox-sidebar__pane-container {
+  display: flex;
+}
+.tox .tox-sidebar__pane {
+  display: flex;
+}
+.tox .tox-sidebar--sliding-closed {
+  opacity: 0;
+}
+.tox .tox-sidebar--sliding-open {
+  opacity: 1;
+}
+.tox .tox-sidebar--sliding-growing,
+.tox .tox-sidebar--sliding-shrinking {
+  transition: width 0.5s ease, opacity 0.5s ease;
+}
+.tox .tox-selector {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox.tox-platform-touch .tox-selector {
+  height: 12px;
+  width: 12px;
+}
+.tox .tox-slider {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 24px;
+  justify-content: center;
+  position: relative;
+}
+.tox .tox-slider__rail {
+  background-color: transparent;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  height: 10px;
+  min-width: 120px;
+  width: 100%;
+}
+.tox .tox-slider__handle {
+  background-color: #0a8fe9;
+  border: 2px solid #0871b8;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 24px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 14px;
+}
+.tox .tox-source-code {
+  overflow: auto;
+}
+.tox .tox-spinner {
+  display: flex;
+}
+.tox .tox-spinner > div {
+  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
+  background-color: rgba(84, 111, 94, 0.7);
+  border-radius: 100%;
+  height: 5px;
+  width: 5px;
+}
+.tox .tox-spinner > div:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.tox .tox-spinner > div:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes tam-bouncing-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
+  margin-left: 2.5px;
+}
+.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
+  margin-right: 2.5px;
+}
+.tox .tox-statusbar {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #d9d9d9;
+  color: rgba(84, 111, 94, 0.7);
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: normal;
+  height: 18px;
+  overflow: hidden;
+  padding: 0 5px;
+  position: relative;
+  text-transform: uppercase;
+}
+.tox .tox-statusbar__text-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.tox .tox-statusbar__path {
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__path > * {
+  display: inline;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__wordcount {
+  flex: 0 0 auto;
+  margin-left: 1ch;
+}
+.tox .tox-statusbar a,
+.tox .tox-statusbar__path-item,
+.tox .tox-statusbar__wordcount {
+  color: rgba(84, 111, 94, 0.7);
+  text-decoration: none;
+}
+.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-statusbar__resize-handle {
+  align-items: flex-end;
+  align-self: stretch;
+  cursor: nwse-resize;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: -5px;
+  padding-left: 1ch;
+}
+.tox .tox-statusbar__resize-handle svg {
+  display: block;
+  fill: rgba(84, 111, 94, 0.7);
+}
+.tox .tox-statusbar__resize-handle:focus svg {
+  background-color: #e5e9e7;
+  border-radius: 1px;
+  box-shadow: 0 0 0 2px #e5e9e7;
+}
+.tox:not([dir=rtl]) .tox-statusbar__path > * {
+  margin-right: 2.5px;
+}
+.tox:not([dir=rtl]) .tox-statusbar__branding {
+  margin-left: 1ch;
+}
+.tox[dir=rtl] .tox-statusbar {
+  flex-direction: row-reverse;
+}
+.tox[dir=rtl] .tox-statusbar__path > * {
+  margin-left: 2.5px;
+}
+.tox .tox-throbber {
+  z-index: 1299;
+}
+.tox .tox-throbber__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.tox .tox-tbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #817f7c;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-transform: none;
+  width: 34px;
+}
+.tox .tox-tbtn svg {
+  display: block;
+  fill: #817f7c;
+}
+.tox .tox-tbtn.tox-tbtn-more {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: inherit;
+}
+.tox .tox-tbtn:focus {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+}
+.tox .tox-tbtn:hover {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: #0a9fe5;
+}
+.tox .tox-tbtn:hover svg {
+  fill: #0a9fe5;
+}
+.tox .tox-tbtn:active {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: rgba(41, 159, 250, 0.88);
+}
+.tox .tox-tbtn:active svg {
+  fill: rgba(41, 159, 250, 0.88);
+}
+.tox .tox-tbtn--disabled,
+.tox .tox-tbtn--disabled:hover,
+.tox .tox-tbtn:disabled,
+.tox .tox-tbtn:disabled:hover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(129, 127, 124, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-tbtn--disabled svg,
+.tox .tox-tbtn--disabled:hover svg,
+.tox .tox-tbtn:disabled svg,
+.tox .tox-tbtn:disabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(129, 127, 124, 0.5);
+}
+.tox .tox-tbtn--enabled,
+.tox .tox-tbtn--enabled:hover {
+  background: #e5e9e7;
+  border: 0;
+  box-shadow: none;
+  color: rgba(41, 159, 250, 0.88);
+}
+.tox .tox-tbtn--enabled > *,
+.tox .tox-tbtn--enabled:hover > * {
+  transform: none;
+}
+.tox .tox-tbtn--enabled svg,
+.tox .tox-tbtn--enabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(41, 159, 250, 0.88);
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+  color: #ee930e;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
+  fill: #ee930e;
+}
+.tox .tox-tbtn:active > * {
+  transform: none;
+}
+.tox .tox-tbtn--md {
+  height: 51px;
+  width: 51px;
+}
+.tox .tox-tbtn--lg {
+  flex-direction: column;
+  height: 68px;
+  width: 68px;
+}
+.tox .tox-tbtn--return {
+  -ms-grid-row-align: stretch;
+      align-self: stretch;
+  height: unset;
+  width: 16px;
+}
+.tox .tox-tbtn--labeled {
+  padding: 0 4px;
+  width: unset;
+}
+.tox .tox-tbtn__vlabel {
+  display: block;
+  font-size: 10px;
+  font-weight: normal;
+  letter-spacing: -0.025em;
+  margin-bottom: 2.5px;
+  white-space: nowrap;
+}
+.tox .tox-tbtn--select {
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+  width: auto;
+}
+.tox .tox-tbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-tbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 10px;
+}
+.tox .tox-tbtn__select-chevron svg {
+  fill: rgba(129, 127, 124, 0.5);
+}
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 7em;
+}
+.tox .tox-split-button {
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: flex;
+  margin: 2px 0 3px 0;
+  overflow: hidden;
+}
+.tox .tox-split-button:hover {
+  box-shadow: 0 0 0 1px #e5e9e7 inset;
+}
+.tox .tox-split-button:focus {
+  background: #e5e9e7;
+  box-shadow: none;
+  color: #ee930e;
+}
+.tox .tox-split-button > * {
+  border-radius: 0;
+}
+.tox .tox-split-button__chevron {
+  width: 10px;
+}
+.tox .tox-split-button__chevron svg {
+  fill: rgba(129, 127, 124, 0.5);
+}
+.tox .tox-split-button .tox-tbtn {
+  margin: 0;
+}
+.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
+  width: 30px;
+}
+.tox.tox-platform-touch .tox-split-button__chevron {
+  width: 14px;
+}
+.tox .tox-split-button.tox-tbtn--disabled:hover,
+.tox .tox-split-button.tox-tbtn--disabled:focus,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
+  background: transparent;
+  box-shadow: none;
+  color: rgba(129, 127, 124, 0.5);
+}
+.tox .tox-toolbar-overlord {
+  background-color: #fff;
+}
+.tox .tox-toolbar,
+.tox .tox-toolbar__primary,
+.tox .tox-toolbar__overflow {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23d9d9d9'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
+  height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  visibility: hidden;
+}
+.tox .tox-toolbar__overflow--growing {
+  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
+}
+.tox .tox-toolbar__overflow--shrinking {
+  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
+}
+.tox .tox-menubar + .tox-toolbar,
+.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
+  border-top: 1px solid #d9d9d9;
+  margin-top: -1px;
+}
+.tox .tox-toolbar--scrolling {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.tox .tox-pop .tox-toolbar {
+  border-width: 0;
+}
+.tox .tox-toolbar--no-divider {
+  background-image: none;
+}
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child,
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
+  border-top: 1px solid #d9d9d9;
+}
+.tox.tox-tinymce-aux .tox-toolbar__overflow {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.tox .tox-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0;
+  padding: 0 4px 0 4px;
+}
+.tox .tox-toolbar__group--pull-right {
+  margin-left: auto;
+}
+.tox .tox-toolbar--scrolling .tox-toolbar__group {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+  border-right: 1px solid #d9d9d9;
+}
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
+  border-left: 1px solid #d9d9d9;
+}
+.tox .tox-tooltip {
+  display: inline-block;
+  padding: 5px;
+  position: relative;
+}
+.tox .tox-tooltip__body {
+  background-color: rgba(84, 111, 94, 0.85);
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(84, 111, 94, 0.3);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 8.75px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 2.5px 5px;
+  text-transform: none;
+}
+.tox .tox-tooltip__arrow {
+  position: absolute;
+}
+.tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid rgba(84, 111, 94, 0.85);
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom: 5px solid rgba(84, 111, 94, 0.85);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid rgba(84, 111, 94, 0.85);
+  border-top: 5px solid transparent;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid rgba(84, 111, 94, 0.85);
+  border-top: 5px solid transparent;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-well {
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  padding: 5px;
+  width: 100%;
+}
+.tox .tox-well > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-well > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-well > *:only-child {
+  margin: 0;
+}
+.tox .tox-custom-editor {
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+/* stylelint-disable */
+.tox {
+  /* stylelint-enable */
+}
+.tox .tox-dialog-loading::before {
+  background-color: rgba(0, 0, 0, 0.5);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.tox .tox-tab {
+  cursor: pointer;
+}
+.tox .tox-dialog__content-js {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-content .tox-collection {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-image-tools-edit-panel {
+  height: 60px;
+}
+.tox .tox-image-tools__sidebar {
+  height: 60px;
+}
diff --git a/public/resource/tinymce/skins/ui/jeecg/skin.min.css b/public/resource/tinymce/skins/ui/jeecg/skin.min.css
new file mode 100644
index 0000000..c86e0c1
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/skin.min.css
@@ -0,0 +1,7 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.tox{box-shadow:none;box-sizing:content-box;color:rgba(84,111,94,.85);cursor:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:normal;-webkit-tap-highlight-color:transparent;text-decoration:none;text-shadow:none;text-transform:none;vertical-align:initial;white-space:normal}.tox :not(svg):not(rect){box-sizing:inherit;color:inherit;cursor:inherit;direction:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-tap-highlight-color:inherit;text-align:inherit;text-decoration:inherit;text-shadow:inherit;text-transform:inherit;vertical-align:inherit;white-space:inherit}.tox :not(svg):not(rect){background:0 0;border:0;box-shadow:none;float:none;height:auto;margin:0;max-width:none;outline:0;padding:0;position:static;width:auto}.tox:not([dir=rtl]){direction:ltr;text-align:left}.tox[dir=rtl]{direction:rtl;text-align:right}.tox-tinymce{border:1px solid #d9d9d9;border-radius:0;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;overflow:hidden;position:relative;visibility:inherit!important}.tox-tinymce-inline{border:none;box-shadow:none}.tox-tinymce-inline .tox-editor-header{background-color:transparent;border:1px solid #d9d9d9;border-radius:0;box-shadow:none}.tox-tinymce-aux{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;z-index:1300}.tox-tinymce :focus,.tox-tinymce-aux :focus{outline:0}button::-moz-focus-inner{border:0}.tox[dir=rtl] .tox-icon--flip svg{transform:rotateY(180deg)}.tox .accessibility-issue__header{align-items:center;display:flex;margin-bottom:2.5px}.tox .accessibility-issue__description{align-items:stretch;border:1px solid #d9d9d9;border-radius:3px;display:flex;justify-content:space-between}.tox .accessibility-issue__description>div{padding-bottom:2.5px}.tox .accessibility-issue__description>div>div{align-items:center;display:flex;margin-bottom:2.5px}.tox .accessibility-issue__description>:last-child:not(:only-child){border-color:#d9d9d9;border-style:solid}.tox .accessibility-issue__repair{margin-top:16px}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description{background-color:rgba(10,143,233,.1);border-color:rgba(10,143,233,.4);color:rgba(84,111,94,.85)}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description>:last-child{border-color:rgba(10,143,233,.4)}.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2{color:#0a8fe9}.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg{fill:#0a8fe9}.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon{color:#0a8fe9}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description{background-color:rgba(255,165,0,.1);border-color:rgba(255,165,0,.5);color:rgba(84,111,94,.85)}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description>:last-child{border-color:rgba(255,165,0,.5)}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg{fill:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description{background-color:rgba(204,0,0,.1);border-color:rgba(204,0,0,.4);color:rgba(84,111,94,.85)}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description>:last-child{border-color:rgba(204,0,0,.4)}.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg{fill:#c00}.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description{background-color:rgba(120,171,70,.1);border-color:rgba(120,171,70,.4);color:rgba(84,111,94,.85)}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description>:last-child{border-color:rgba(120,171,70,.4)}.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg{fill:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue__header h1,.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2{margin-top:0}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-left:2.5px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-left:auto}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description{padding:2.5px 2.5px 2.5px 5px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description>:last-child{border-left-width:1px;padding-left:2.5px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-right:2.5px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-right:auto}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description{padding:2.5px 5px 2.5px 2.5px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description>:last-child{border-right-width:1px;padding-right:2.5px}.tox .tox-anchorbar{display:flex;flex:0 0 auto}.tox .tox-bar{display:flex;flex:0 0 auto}.tox .tox-button{background-color:#0a8fe9;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#0a8fe9;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:8.75px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:24px;margin:0;outline:0;padding:2.5px 10px;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap}.tox .tox-button[disabled]{background-color:#0a8fe9;background-image:none;border-color:#0a8fe9;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-button:focus:not(:disabled){background-color:#0980d1;background-image:none;border-color:#0980d1;box-shadow:none;color:#fff}.tox .tox-button:hover:not(:disabled){background-color:#0980d1;background-image:none;border-color:#0980d1;box-shadow:none;color:#fff}.tox .tox-button:active:not(:disabled){background-color:#0871b8;background-image:none;border-color:#0871b8;box-shadow:none;color:#fff}.tox .tox-button--secondary{background-color:#f0f0f0;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;color:rgba(84,111,94,.85);font-size:8.75px;font-style:normal;font-weight:400;letter-spacing:normal;outline:0;padding:2.5px 10px;text-decoration:none;text-transform:none}.tox .tox-button--secondary[disabled]{background-color:#f0f0f0;background-image:none;border-color:#f0f0f0;box-shadow:none;color:rgba(84,111,94,.5)}.tox .tox-button--secondary:focus:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--secondary:hover:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--secondary:active:not(:disabled){background-color:#d6d6d6;background-image:none;border-color:#d6d6d6;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding:2.5px}.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display:block;fill:currentColor}.tox .tox-button-link{background:0;border:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:10px;font-weight:400;line-height:1.3;margin:0;padding:0;white-space:nowrap}.tox .tox-button-link--sm{font-size:8.75px}.tox .tox-button--naked{background-color:transparent;border-color:transparent;box-shadow:unset;color:rgba(84,111,94,.85)}.tox .tox-button--naked[disabled]{background-color:#f0f0f0;border-color:#f0f0f0;box-shadow:none;color:rgba(84,111,94,.5)}.tox .tox-button--naked:hover:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--naked:focus:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--naked:active:not(:disabled){background-color:#d6d6d6;border-color:#d6d6d6;box-shadow:none;color:rgba(84,111,94,.85)}.tox .tox-button--naked .tox-icon svg{fill:currentColor}.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color:rgba(84,111,94,.85)}.tox .tox-checkbox{align-items:center;border-radius:3px;cursor:pointer;display:flex;height:36px;min-width:36px}.tox .tox-checkbox__input{height:1px;overflow:hidden;position:absolute;top:auto;width:1px}.tox .tox-checkbox__icons{align-items:center;border-radius:3px;box-shadow:0 0 0 2px transparent;box-sizing:content-box;display:flex;height:24px;justify-content:center;padding:calc(2.5px - 1px);width:24px}.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:block;fill:rgba(84,111,94,.3)}.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:none;fill:#0a8fe9}.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display:none;fill:#0a8fe9}.tox .tox-checkbox--disabled{color:rgba(84,111,94,.5);cursor:not-allowed}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg{fill:rgba(84,111,94,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{fill:rgba(84,111,94,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{fill:rgba(84,111,94,.5)}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display:block}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:block}.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{border-radius:3px;box-shadow:inset 0 0 0 1px #0a8fe9;padding:calc(2.5px - 1px)}.tox:not([dir=rtl]) .tox-checkbox__label{margin-left:2.5px}.tox:not([dir=rtl]) .tox-checkbox__input{left:-10000px}.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left:2.5px}.tox[dir=rtl] .tox-checkbox__label{margin-right:2.5px}.tox[dir=rtl] .tox-checkbox__input{right:-10000px}.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right:2.5px}.tox .tox-collection--toolbar .tox-collection__group{display:flex;padding:0}.tox .tox-collection--grid .tox-collection__group{display:flex;flex-wrap:wrap;max-height:208px;overflow-x:hidden;overflow-y:auto;padding:0}.tox .tox-collection--list .tox-collection__group{border-bottom-width:0;border-color:#d9d9d9;border-left-width:0;border-right-width:0;border-style:solid;border-top-width:1px;padding:2.5px 0}.tox .tox-collection--list .tox-collection__group:first-child{border-top-width:0}.tox .tox-collection__group-heading{background-color:#f3f3f3;color:rgba(84,111,94,.7);cursor:default;font-size:12px;font-style:normal;font-weight:400;margin-bottom:2.5px;margin-top:-2.5px;padding:2.5px 5px;text-transform:none;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection__item{align-items:center;color:rgba(84,111,94,.85);cursor:pointer;display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection--list .tox-collection__item{padding:2.5px 5px}.tox .tox-collection--toolbar .tox-collection__item{border-radius:3px;padding:2.5px}.tox .tox-collection--grid .tox-collection__item{border-radius:3px;padding:2.5px}.tox .tox-collection--list .tox-collection__item--enabled{background-color:#fff;color:rgba(84,111,94,.85)}.tox .tox-collection--list .tox-collection__item--active{background-color:#e5e9e7}.tox .tox-collection--toolbar .tox-collection__item--enabled{background-color:#e5e9e7;color:rgba(84,111,94,.85)}.tox .tox-collection--toolbar .tox-collection__item--active{background-color:#e5e9e7}.tox .tox-collection--grid .tox-collection__item--enabled{background-color:#e5e9e7;color:rgba(84,111,94,.85)}.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){background-color:#e5e9e7;color:rgba(84,111,94,.85)}.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:rgba(84,111,94,.85)}.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:rgba(84,111,94,.85)}.tox .tox-collection__item-checkmark,.tox .tox-collection__item-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.tox .tox-collection__item-checkmark svg,.tox .tox-collection__item-icon svg{fill:currentColor}.tox .tox-collection--toolbar-lg .tox-collection__item-icon{height:48px;width:48px}.tox .tox-collection__item-label{color:currentColor;display:inline-block;flex:1;-ms-flex-preferred-size:auto;font-size:8.75px;font-style:normal;font-weight:400;line-height:24px;text-transform:none;word-break:break-all}.tox .tox-collection__item-accessory{color:rgba(84,111,94,.7);display:inline-block;font-size:8.75px;height:24px;line-height:24px;text-transform:none}.tox .tox-collection__item-caret{align-items:center;display:flex;min-height:24px}.tox .tox-collection__item-caret::after{content:'';font-size:0;min-height:inherit}.tox .tox-collection__item-caret svg{fill:rgba(84,111,94,.85)}.tox .tox-collection__item--state-disabled{background-color:transparent;color:rgba(84,111,94,.5);cursor:not-allowed}.tox .tox-collection__item--state-disabled .tox-collection__item-caret svg{fill:rgba(84,111,94,.5)}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display:none}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory+.tox-collection__item-checkmark{display:none}.tox .tox-collection--horizontal{background-color:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:nowrap;margin-bottom:0;overflow-x:auto;padding:0}.tox .tox-collection--horizontal .tox-collection__group{align-items:center;display:flex;flex-wrap:nowrap;margin:0;padding:0 2.5px}.tox .tox-collection--horizontal .tox-collection__item{height:34px;margin:2px 0 3px 0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item-label{white-space:nowrap}.tox .tox-collection--horizontal .tox-collection__item-caret{margin-left:4px}.tox .tox-collection__item-container{display:flex}.tox .tox-collection__item-container--row{align-items:center;flex:1 1 auto;flex-direction:row}.tox .tox-collection__item-container--row.tox-collection__item-container--align-left{margin-right:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--align-right{justify-content:flex-end;margin-left:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top{align-items:flex-start;margin-bottom:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle{align-items:center}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom{align-items:flex-end;margin-top:auto}.tox .tox-collection__item-container--column{-ms-grid-row-align:center;align-self:center;flex:1 1 auto;flex-direction:column}.tox .tox-collection__item-container--column.tox-collection__item-container--align-left{align-items:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--align-right{align-items:flex-end}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top{align-self:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle{-ms-grid-row-align:center;align-self:center}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom{align-self:flex-end}.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-right:1px solid #d9d9d9}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left:5px}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-left:2.5px}.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left:10px;text-align:right}.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret{margin-left:10px}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-left:1px solid #d9d9d9}.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right:5px}.tox[dir=rtl] .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-right:2.5px}.tox[dir=rtl] .tox-collection__item-accessory{margin-right:10px;text-align:left}.tox[dir=rtl] .tox-collection .tox-collection__item-caret{margin-right:10px;transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret{margin-right:4px}.tox .tox-color-picker-container{display:flex;flex-direction:row;height:225px;margin:0}.tox .tox-sv-palette{box-sizing:border-box;display:flex;height:100%}.tox .tox-sv-palette-spectrum{height:100%}.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width:225px}.tox .tox-sv-palette-thumb{background:0 0;border:1px solid #000;border-radius:50%;box-sizing:content-box;height:12px;position:absolute;width:12px}.tox .tox-sv-palette-inner-thumb{border:1px solid #fff;border-radius:50%;height:10px;position:absolute;width:10px}.tox .tox-hue-slider{box-sizing:border-box;height:100%;width:25px}.tox .tox-hue-slider-spectrum{background:linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);height:100%;width:100%}.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width:20px}.tox .tox-hue-slider-thumb{background:#fff;border:1px solid #000;box-sizing:content-box;height:4px;width:100%}.tox .tox-rgb-form{display:flex;flex-direction:column;justify-content:space-between}.tox .tox-rgb-form div{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px;width:inherit}.tox .tox-rgb-form input{width:6em}.tox .tox-rgb-form input.tox-invalid{border:1px solid red!important}.tox .tox-rgb-form .tox-rgba-preview{border:1px solid #000;flex-grow:2;margin-bottom:0}.tox:not([dir=rtl]) .tox-sv-palette{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left:-1px}.tox:not([dir=rtl]) .tox-rgb-form label{margin-right:.5em}.tox[dir=rtl] .tox-sv-palette{margin-left:15px}.tox[dir=rtl] .tox-hue-slider{margin-left:15px}.tox[dir=rtl] .tox-hue-slider-thumb{margin-right:-1px}.tox[dir=rtl] .tox-rgb-form label{margin-left:.5em}.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin:2px 0 3px 4px}.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{border:0;margin:-2.5px 0}.tox .tox-swatches__row{display:flex}.tox .tox-swatch{height:30px;transition:transform .15s,box-shadow .15s;width:30px}.tox .tox-swatch:focus,.tox .tox-swatch:hover{box-shadow:0 0 0 1px rgba(127,127,127,.3) inset;transform:scale(.8)}.tox .tox-swatch--remove{align-items:center;display:flex;justify-content:center}.tox .tox-swatch--remove svg path{stroke:#e74c3c}.tox .tox-swatches__picker-btn{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;outline:0;padding:0;width:30px}.tox .tox-swatches__picker-btn svg{height:24px;width:24px}.tox .tox-swatches__picker-btn:hover{background:#e5e9e7}.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left:auto}.tox[dir=rtl] .tox-swatches__picker-btn{margin-right:auto}.tox .tox-comment-thread{background:#fff;position:relative}.tox .tox-comment-thread>:not(:first-child){margin-top:5px}.tox .tox-comment{background:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:0 4px 8px 0 rgba(84,111,94,.1);padding:5px 5px 10px 5px;position:relative}.tox .tox-comment__header{align-items:center;color:rgba(84,111,94,.85);display:flex;justify-content:space-between}.tox .tox-comment__date{color:rgba(84,111,94,.7);font-size:12px}.tox .tox-comment__body{color:rgba(84,111,94,.85);font-size:8.75px;font-style:normal;font-weight:400;line-height:1.3;margin-top:5px;position:relative;text-transform:initial}.tox .tox-comment__body textarea{resize:none;white-space:normal;width:100%}.tox .tox-comment__expander{padding-top:5px}.tox .tox-comment__expander p{color:rgba(84,111,94,.7);font-size:8.75px;font-style:normal}.tox .tox-comment__body p{margin:0}.tox .tox-comment__buttonspacing{padding-top:10px;text-align:center}.tox .tox-comment-thread__overlay::after{background:#fff;bottom:0;content:"";display:flex;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:5}.tox .tox-comment__reply{display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;margin-top:5px}.tox .tox-comment__reply>:first-child{margin-bottom:5px;width:100%}.tox .tox-comment__edit{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}.tox .tox-comment__gradient::after{background:linear-gradient(rgba(255,255,255,0),#fff);bottom:0;content:"";display:block;height:5em;margin-top:-40px;position:absolute;width:100%}.tox .tox-comment__overlay{background:#fff;bottom:0;display:flex;flex-direction:column;flex-grow:1;left:0;opacity:.9;position:absolute;right:0;text-align:center;top:0;z-index:5}.tox .tox-comment__loading-text{align-items:center;color:rgba(84,111,94,.85);display:flex;flex-direction:column;position:relative}.tox .tox-comment__loading-text>div{padding-bottom:10px}.tox .tox-comment__overlaytext{bottom:0;flex-direction:column;font-size:8.75px;left:0;padding:1em;position:absolute;right:0;top:0;z-index:10}.tox .tox-comment__overlaytext p{background-color:#fff;box-shadow:0 0 8px 8px #fff;color:rgba(84,111,94,.85);text-align:center}.tox .tox-comment__overlaytext div:nth-of-type(2){font-size:.8em}.tox .tox-comment__busy-spinner{align-items:center;background-color:#fff;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}.tox .tox-comment__scroll{display:flex;flex-direction:column;flex-shrink:1;overflow:auto}.tox .tox-conversations{margin:5px}.tox:not([dir=rtl]) .tox-comment__edit{margin-left:5px}.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left:5px}.tox[dir=rtl] .tox-comment__edit{margin-right:5px}.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right:5px}.tox .tox-user{align-items:center;display:flex}.tox .tox-user__avatar svg{fill:rgba(84,111,94,.7)}.tox .tox-user__name{color:rgba(84,111,94,.7);font-size:12px;font-style:normal;font-weight:400;text-transform:uppercase}.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right:5px}.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left:5px}.tox[dir=rtl] .tox-user__avatar svg{margin-left:5px}.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right:5px}.tox .tox-dialog-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1100}.tox .tox-dialog-wrap__backdrop{background-color:rgba(255,255,255,.75);bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.tox .tox-dialog-wrap__backdrop--opaque{background-color:#fff}.tox .tox-dialog{background-color:#fff;border-color:#d9d9d9;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 16px 16px -10px rgba(84,111,94,.15),0 0 40px 1px rgba(84,111,94,.15);display:flex;flex-direction:column;max-height:100%;max-width:480px;overflow:hidden;position:relative;width:95vw;z-index:2}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog{align-self:flex-start;margin:5px auto;width:calc(100vw - 10px)}}.tox .tox-dialog-inline{z-index:1100}.tox .tox-dialog__header{align-items:center;background-color:#fff;border-bottom:none;color:rgba(84,111,94,.85);display:flex;font-size:10px;justify-content:space-between;padding:5px 10px 0 10px;position:relative}.tox .tox-dialog__header .tox-button{z-index:1}.tox .tox-dialog__draghandle{cursor:grab;height:100%;left:0;position:absolute;top:0;width:100%}.tox .tox-dialog__draghandle:active{cursor:grabbing}.tox .tox-dialog__dismiss{margin-left:auto}.tox .tox-dialog__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12.5px;font-style:normal;font-weight:400;line-height:1.3;margin:0;text-transform:none}.tox .tox-dialog__body{color:rgba(84,111,94,.85);display:flex;flex:1;-ms-flex-preferred-size:auto;font-size:10px;font-style:normal;font-weight:400;line-height:1.3;min-width:0;text-align:left;text-transform:none}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body{flex-direction:column}}.tox .tox-dialog__body-nav{align-items:flex-start;display:flex;flex-direction:column;padding:10px 10px}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body-nav{flex-direction:row;-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:0}}.tox .tox-dialog__body-nav-item{border-bottom:2px solid transparent;color:rgba(84,111,94,.7);display:inline-block;font-size:8.75px;line-height:1.3;margin-bottom:5px;text-decoration:none;white-space:nowrap}.tox .tox-dialog__body-nav-item:focus{background-color:rgba(10,143,233,.1)}.tox .tox-dialog__body-nav-item--active{border-bottom:2px solid #0a8fe9;color:#0a8fe9}.tox .tox-dialog__body-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto;max-height:650px;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 10px}.tox .tox-dialog__body-content>*{margin-bottom:0;margin-top:10px}.tox .tox-dialog__body-content>:first-child{margin-top:0}.tox .tox-dialog__body-content>:last-child{margin-bottom:0}.tox .tox-dialog__body-content>:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog__body-content a{color:#0a8fe9;cursor:pointer;text-decoration:none}.tox .tox-dialog__body-content a:focus,.tox .tox-dialog__body-content a:hover{color:#0871b8;text-decoration:none}.tox .tox-dialog__body-content a:active{color:#0871b8;text-decoration:none}.tox .tox-dialog__body-content svg{fill:rgba(84,111,94,.85)}.tox .tox-dialog__body-content ul{display:block;list-style-type:disc;margin-bottom:10px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.tox .tox-dialog__body-content .tox-form__group h1{color:rgba(84,111,94,.85);font-size:12.5px;font-style:normal;font-weight:400;letter-spacing:normal;margin-bottom:10px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group h2{color:rgba(84,111,94,.85);font-size:10px;font-style:normal;font-weight:400;letter-spacing:normal;margin-bottom:10px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group p{margin-bottom:10px}.tox .tox-dialog__body-content .tox-form__group h1:first-child,.tox .tox-dialog__body-content .tox-form__group h2:first-child,.tox .tox-dialog__body-content .tox-form__group p:first-child{margin-top:0}.tox .tox-dialog__body-content .tox-form__group h1:last-child,.tox .tox-dialog__body-content .tox-form__group h2:last-child,.tox .tox-dialog__body-content .tox-form__group p:last-child{margin-bottom:0}.tox .tox-dialog__body-content .tox-form__group h1:only-child,.tox .tox-dialog__body-content .tox-form__group h2:only-child,.tox .tox-dialog__body-content .tox-form__group p:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog--width-lg{height:650px;max-width:1200px}.tox .tox-dialog--width-md{max-width:800px}.tox .tox-dialog--width-md .tox-dialog__body-content{overflow:auto}.tox .tox-dialog__body-content--centered{text-align:center}.tox .tox-dialog__footer{align-items:center;background-color:#fff;border-top:1px solid #d9d9d9;display:flex;justify-content:space-between;padding:5px 10px}.tox .tox-dialog__footer-end,.tox .tox-dialog__footer-start{display:flex}.tox .tox-dialog__busy-spinner{align-items:center;background-color:rgba(255,255,255,.75);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:3}.tox .tox-dialog__table{border-collapse:collapse;width:100%}.tox .tox-dialog__table thead th{font-weight:400;padding-bottom:5px}.tox .tox-dialog__table tbody tr{border-bottom:1px solid #d9d9d9}.tox .tox-dialog__table tbody tr:last-child{border-bottom:none}.tox .tox-dialog__table td{padding-bottom:5px;padding-top:5px}.tox .tox-dialog__popups{position:absolute;width:100%;z-index:1100}.tox .tox-dialog__body-iframe{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox .tox-dialog-dock-fadeout{opacity:0;visibility:hidden}.tox .tox-dialog-dock-fadein{opacity:1;visibility:visible}.tox .tox-dialog-dock-transition{transition:visibility 0s linear .3s,opacity .3s ease}.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein{transition-delay:0s}.tox.tox-platform-ie .tox-dialog-wrap{position:-ms-device-fixed}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child){margin-left:5px}}.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left:5px}.tox[dir=rtl] .tox-dialog__body{text-align:right}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav{margin-left:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child){margin-right:5px}}.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right:5px}body.tox-dialog__disable-scroll{overflow:hidden}.tox .tox-dropzone-container{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dropzone{align-items:center;background:#fff;border:2px dashed #d9d9d9;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;min-height:100px;padding:10px}.tox .tox-dropzone p{color:rgba(84,111,94,.7);margin:0 0 10px 0}.tox .tox-edit-area{display:flex;flex:1;-ms-flex-preferred-size:auto;overflow:hidden;position:relative}.tox .tox-edit-area__iframe{background-color:#fff;border:0;box-sizing:border-box;flex:1;-ms-flex-preferred-size:auto;height:100%;position:absolute;width:100%}.tox.tox-inline-edit-area{border:1px dotted #d9d9d9}.tox .tox-editor-container{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.tox .tox-editor-header{z-index:1}.tox:not(.tox-tinymce-inline) .tox-editor-header{box-shadow:none;transition:box-shadow .5s}.tox.tox-tinymce--toolbar-bottom .tox-editor-header,.tox.tox-tinymce-inline .tox-editor-header{margin-bottom:-1px}.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header{background-color:transparent;box-shadow:0 4px 4px -3px rgba(0,0,0,.25)}.tox-editor-dock-fadeout{opacity:0;visibility:hidden}.tox-editor-dock-fadein{opacity:1;visibility:visible}.tox-editor-dock-transition{transition:visibility 0s linear .25s,opacity .25s ease}.tox-editor-dock-transition.tox-editor-dock-fadein{transition-delay:0s}.tox .tox-control-wrap{flex:1;position:relative}.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display:none}.tox .tox-control-wrap svg{display:block}.tox .tox-control-wrap__status-icon-wrap{position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-control-wrap__status-icon-invalid svg{fill:#c00}.tox .tox-control-wrap__status-icon-unknown svg{fill:orange}.tox .tox-control-wrap__status-icon-valid svg{fill:green}.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right:20px}.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right:2.5px}.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left:20px}.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left:2.5px}.tox .tox-autocompleter{max-width:25em}.tox .tox-autocompleter .tox-menu{max-width:25em}.tox .tox-autocompleter .tox-autocompleter-highlight{font-weight:400}.tox .tox-color-input{display:flex;position:relative;z-index:1}.tox .tox-color-input .tox-textfield{z-index:-1}.tox .tox-color-input span{border-color:rgba(84,111,94,.2);border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;height:24px;position:absolute;top:6px;width:24px}.tox .tox-color-input span:focus:not([aria-disabled=true]),.tox .tox-color-input span:hover:not([aria-disabled=true]){border-color:#0a8fe9;cursor:pointer}.tox .tox-color-input span::before{background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.25) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border:1px solid #fff;border-radius:3px;box-sizing:border-box;content:'';height:24px;left:-1px;position:absolute;top:-1px;width:24px;z-index:-1}.tox .tox-color-input span[aria-disabled=true]{cursor:not-allowed}.tox:not([dir=rtl]) .tox-color-input .tox-textfield{padding-left:36px}.tox:not([dir=rtl]) .tox-color-input span{left:6px}.tox[dir=rtl] .tox-color-input .tox-textfield{padding-right:36px}.tox[dir=rtl] .tox-color-input span{right:6px}.tox .tox-label,.tox .tox-toolbar-label{color:rgba(84,111,94,.7);display:block;font-size:8.75px;font-style:normal;font-weight:400;line-height:1.3;padding:0 5px 0 0;text-transform:none;white-space:nowrap}.tox .tox-toolbar-label{padding:0 5px}.tox[dir=rtl] .tox-label{padding:0 0 0 5px}.tox .tox-form{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group{box-sizing:border-box;margin-bottom:2.5px}.tox .tox-form-group--maximize{flex:1}.tox .tox-form__group--error{color:#c00}.tox .tox-form__group--collection{display:flex}.tox .tox-form__grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.tox .tox-form__grid--2col>.tox-form__group{width:calc(50% - (5px / 2))}.tox .tox-form__grid--3col>.tox-form__group{width:calc(100% / 3 - (5px / 2))}.tox .tox-form__grid--4col>.tox-form__group{width:calc(25% - (5px / 2))}.tox .tox-form__controls-h-stack{align-items:center;display:flex}.tox .tox-form__group--inline{align-items:center;display:flex}.tox .tox-form__group--stretched{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-textarea{flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left:2.5px}.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right:2.5px}.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display:none}.tox .tox-listboxfield .tox-listbox--select,.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#d9d9d9;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:rgba(84,111,94,.85);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:10px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 3.25px;resize:none;width:100%}.tox .tox-textarea[disabled],.tox .tox-textfield[disabled]{background-color:#f2f2f2;color:rgba(84,111,94,.85);cursor:not-allowed}.tox .tox-listboxfield .tox-listbox--select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{background-color:#fff;border-color:#0a8fe9;box-shadow:none;outline:0}.tox .tox-toolbar-textfield{border-width:0;margin-bottom:3px;margin-top:2px;max-width:250px}.tox .tox-naked-btn{background-color:transparent;border:0;border-color:transparent;box-shadow:unset;color:#0a8fe9;cursor:pointer;display:block;margin:0;padding:0}.tox .tox-naked-btn svg{display:block;fill:rgba(84,111,94,.85)}.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left:2.5px}.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right:2.5px}.tox .tox-listboxfield{cursor:pointer;position:relative}.tox .tox-listboxfield .tox-listbox--select[disabled]{background-color:#f2f2f2;color:rgba(84,111,94,.85);cursor:not-allowed}.tox .tox-listbox__select-label{cursor:default;flex:1;margin:0 4px}.tox .tox-listbox__select-chevron{align-items:center;display:flex;justify-content:center;width:10px}.tox .tox-listbox__select-chevron svg{fill:rgba(84,111,94,.85)}.tox .tox-listboxfield .tox-listbox--select{align-items:center;display:flex}.tox:not([dir=rtl]) .tox-listboxfield svg{right:5px}.tox[dir=rtl] .tox-listboxfield svg{left:5px}.tox .tox-selectfield{cursor:pointer;position:relative}.tox .tox-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#d9d9d9;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:rgba(84,111,94,.85);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:10px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 3.25px;resize:none;width:100%}.tox .tox-selectfield select[disabled]{background-color:#f2f2f2;color:rgba(84,111,94,.85);cursor:not-allowed}.tox .tox-selectfield select::-ms-expand{display:none}.tox .tox-selectfield select:focus{background-color:#fff;border-color:#0a8fe9;box-shadow:none;outline:0}.tox .tox-selectfield svg{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tox:not([dir=rtl]) .tox-selectfield select[size="0"],.tox:not([dir=rtl]) .tox-selectfield select[size="1"]{padding-right:15px}.tox:not([dir=rtl]) .tox-selectfield svg{right:5px}.tox[dir=rtl] .tox-selectfield select[size="0"],.tox[dir=rtl] .tox-selectfield select[size="1"]{padding-left:15px}.tox[dir=rtl] .tox-selectfield svg{left:5px}.tox .tox-textarea{-webkit-appearance:textarea;-moz-appearance:textarea;appearance:textarea;white-space:pre-wrap}.tox-fullscreen{border:0;height:100%;left:0;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;position:fixed;top:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox.tox-tinymce.tox-fullscreen{background-color:transparent;z-index:1200}.tox-shadowhost.tox-fullscreen{z-index:1200}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}.tox .tox-help__more-link{list-style:none;margin-top:1em}.tox .tox-image-tools{width:100%}.tox .tox-image-tools__toolbar{align-items:center;display:flex;justify-content:center}.tox .tox-image-tools__image{background-color:#666;height:380px;overflow:auto;position:relative;width:100%}.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top:5px}.tox .tox-image-tools__image-bg{background:url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==)}.tox .tox-image-tools__toolbar>.tox-spacer{flex:1;-ms-flex-preferred-size:auto}.tox .tox-croprect-block{background:#000;opacity:.5;position:absolute;zoom:1}.tox .tox-croprect-handle{border:2px solid #fff;height:20px;left:0;position:absolute;top:0;width:20px}.tox .tox-croprect-handle-move{border:0;cursor:move;position:absolute}.tox .tox-croprect-handle-nw{border-width:2px 0 0 2px;cursor:nw-resize;left:100px;margin:-2px 0 0 -2px;top:100px}.tox .tox-croprect-handle-ne{border-width:2px 2px 0 0;cursor:ne-resize;left:200px;margin:-2px 0 0 -20px;top:100px}.tox .tox-croprect-handle-sw{border-width:0 0 2px 2px;cursor:sw-resize;left:100px;margin:-20px 2px 0 -2px;top:200px}.tox .tox-croprect-handle-se{border-width:0 2px 2px 0;cursor:se-resize;left:200px;margin:-20px 0 0 -20px;top:200px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left:5px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left:20px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left:20px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right:5px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right:20px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right:20px}.tox .tox-insert-table-picker{display:flex;flex-wrap:wrap;width:110px}.tox .tox-insert-table-picker>div{border-color:#d9d9d9;border-style:solid;border-width:0 1px 1px 0;box-sizing:border-box;height:11px;width:11px}.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin:-2.5px 0}.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color:rgba(10,143,233,.5);border-color:rgba(10,143,233,.5)}.tox .tox-insert-table-picker__label{color:rgba(84,111,94,.7);display:block;font-size:8.75px;padding:2.5px;text-align:center;width:100%}.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right:0}.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right:0}.tox .tox-menu{background-color:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:0 4px 8px 0 rgba(84,111,94,.1);display:inline-block;overflow:hidden;vertical-align:top;z-index:1150}.tox .tox-menu.tox-collection.tox-collection--list{padding:0}.tox .tox-menu.tox-collection.tox-collection--toolbar{padding:2.5px}.tox .tox-menu.tox-collection.tox-collection--grid{padding:2.5px}.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin:0}.tox .tox-menubar{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23d9d9d9'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 4px 0 4px}.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar{border-top:1px solid #d9d9d9}.tox .tox-mbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#817f7c;display:flex;flex:0 0 auto;font-size:8.75px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0 4px;text-transform:none;width:auto}.tox .tox-mbtn[disabled]{background-color:transparent;border:0;box-shadow:none;color:rgba(129,127,124,.5);cursor:not-allowed}.tox .tox-mbtn:focus:not(:disabled){background:#e5e9e7;border:0;box-shadow:none;color:#0a9fe5}.tox .tox-mbtn--active{background:#e5e9e7;border:0;box-shadow:none;color:rgba(41,159,250,.88)}.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){background:#e5e9e7;border:0;box-shadow:none;color:#0a9fe5}.tox .tox-mbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor:not-allowed}.tox .tox-mbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px;display:none}.tox .tox-notification{border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;display:-ms-grid;display:grid;font-size:8.75px;font-weight:400;-ms-grid-columns:minmax(40px,1fr) auto minmax(40px,1fr);grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);margin-top:2.5px;opacity:0;padding:2.5px;transition:transform .1s ease-in,opacity 150ms ease-in}.tox .tox-notification p{font-size:8.75px;font-weight:400}.tox .tox-notification a{cursor:pointer;text-decoration:underline}.tox .tox-notification--in{opacity:1}.tox .tox-notification--success{background-color:#e4eeda;border-color:#d7e6c8;color:rgba(84,111,94,.85)}.tox .tox-notification--success p{color:rgba(84,111,94,.85)}.tox .tox-notification--success a{color:#547831}.tox .tox-notification--success svg{fill:rgba(84,111,94,.85)}.tox .tox-notification--error{background-color:#f8dede;border-color:#f2bfbf;color:rgba(84,111,94,.85)}.tox .tox-notification--error p{color:rgba(84,111,94,.85)}.tox .tox-notification--error a{color:#c00}.tox .tox-notification--error svg{fill:rgba(84,111,94,.85)}.tox .tox-notification--warn,.tox .tox-notification--warning{background-color:#fffaea;border-color:#ffe89d;color:rgba(84,111,94,.85)}.tox .tox-notification--warn p,.tox .tox-notification--warning p{color:rgba(84,111,94,.85)}.tox .tox-notification--warn a,.tox .tox-notification--warning a{color:rgba(84,111,94,.85)}.tox .tox-notification--warn svg,.tox .tox-notification--warning svg{fill:rgba(84,111,94,.85)}.tox .tox-notification--info{background-color:#d9edf7;border-color:#779ecb;color:rgba(84,111,94,.85)}.tox .tox-notification--info p{color:rgba(84,111,94,.85)}.tox .tox-notification--info a{color:rgba(84,111,94,.85)}.tox .tox-notification--info svg{fill:rgba(84,111,94,.85)}.tox .tox-notification__body{-ms-grid-row-align:center;align-self:center;color:rgba(84,111,94,.85);font-size:14px;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;text-align:center;white-space:normal;word-break:break-all;word-break:break-word}.tox .tox-notification__body>*{margin:0}.tox .tox-notification__body>*+*{margin-top:1rem}.tox .tox-notification__icon{-ms-grid-row-align:center;align-self:center;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification__icon svg{display:block}.tox .tox-notification__dismiss{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification .tox-progress-bar{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2;-ms-grid-column-align:center;justify-self:center}.tox .tox-pop{display:inline-block;position:relative}.tox .tox-pop--resizing{transition:width .1s ease}.tox .tox-pop--resizing .tox-toolbar,.tox .tox-pop--resizing .tox-toolbar__group{flex-wrap:nowrap}.tox .tox-pop--transition{transition:.15s ease;transition-property:left,right,top,bottom}.tox .tox-pop--transition::after,.tox .tox-pop--transition::before{transition:all .15s,visibility 0s,opacity 75ms ease 75ms}.tox .tox-pop__dialog{background-color:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);min-width:0;overflow:hidden}.tox .tox-pop__dialog>:not(.tox-toolbar){margin:2.5px 2.5px 2.5px 5px}.tox .tox-pop__dialog .tox-toolbar{background-color:transparent;margin-bottom:-1px}.tox .tox-pop::after,.tox .tox-pop::before{border-style:solid;content:'';display:block;height:0;opacity:1;position:absolute;width:0}.tox .tox-pop.tox-pop--inset::after,.tox .tox-pop.tox-pop--inset::before{opacity:0;transition:all 0s .15s,visibility 0s,opacity 75ms ease}.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{left:50%;top:100%}.tox .tox-pop.tox-pop--bottom::after{border-color:#fff transparent transparent transparent;border-width:8px;margin-left:-8px;margin-top:-1px}.tox .tox-pop.tox-pop--bottom::before{border-color:#d9d9d9 transparent transparent transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{left:50%;top:0;transform:translateY(-100%)}.tox .tox-pop.tox-pop--top::after{border-color:transparent transparent #fff transparent;border-width:8px;margin-left:-8px;margin-top:1px}.tox .tox-pop.tox-pop--top::before{border-color:transparent transparent #d9d9d9 transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{left:0;top:calc(50% - 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--left::after{border-color:transparent #fff transparent transparent;border-width:8px;margin-left:-15px}.tox .tox-pop.tox-pop--left::before{border-color:transparent #d9d9d9 transparent transparent;border-width:10px;margin-left:-19px}.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{left:100%;top:calc(50% + 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--right::after{border-color:transparent transparent transparent #fff;border-width:8px;margin-left:-1px}.tox .tox-pop.tox-pop--right::before{border-color:transparent transparent transparent #d9d9d9;border-width:10px;margin-left:-1px}.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left:20px}.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left:calc(100% - 20px)}.tox .tox-sidebar-wrap{display:flex;flex-direction:row;flex-grow:1;-ms-flex-preferred-size:0;min-height:0}.tox .tox-sidebar{background-color:#fff;display:flex;flex-direction:row;justify-content:flex-end}.tox .tox-sidebar__slider{display:flex;overflow:hidden}.tox .tox-sidebar__pane-container{display:flex}.tox .tox-sidebar__pane{display:flex}.tox .tox-sidebar--sliding-closed{opacity:0}.tox .tox-sidebar--sliding-open{opacity:1}.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition:width .5s ease,opacity .5s ease}.tox .tox-selector{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;display:inline-block;height:10px;position:absolute;width:10px}.tox.tox-platform-touch .tox-selector{height:12px;width:12px}.tox .tox-slider{align-items:center;display:flex;flex:1;-ms-flex-preferred-size:auto;height:24px;justify-content:center;position:relative}.tox .tox-slider__rail{background-color:transparent;border:1px solid #d9d9d9;border-radius:3px;height:10px;min-width:120px;width:100%}.tox .tox-slider__handle{background-color:#0a8fe9;border:2px solid #0871b8;border-radius:3px;box-shadow:none;height:24px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:14px}.tox .tox-source-code{overflow:auto}.tox .tox-spinner{display:flex}.tox .tox-spinner>div{animation:tam-bouncing-dots 1.5s ease-in-out 0s infinite both;background-color:rgba(84,111,94,.7);border-radius:100%;height:5px;width:5px}.tox .tox-spinner>div:nth-child(1){animation-delay:-.32s}.tox .tox-spinner>div:nth-child(2){animation-delay:-.16s}@keyframes tam-bouncing-dots{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left:2.5px}.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right:2.5px}.tox .tox-statusbar{align-items:center;background-color:#fff;border-top:1px solid #d9d9d9;color:rgba(84,111,94,.7);display:flex;flex:0 0 auto;font-size:12px;font-weight:400;height:18px;overflow:hidden;padding:0 5px;position:relative;text-transform:uppercase}.tox .tox-statusbar__text-container{display:flex;flex:1 1 auto;justify-content:flex-end;overflow:hidden}.tox .tox-statusbar__path{display:flex;flex:1 1 auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tox .tox-statusbar__path>*{display:inline;white-space:nowrap}.tox .tox-statusbar__wordcount{flex:0 0 auto;margin-left:1ch}.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount{color:rgba(84,111,94,.7);text-decoration:none}.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]){cursor:pointer;text-decoration:underline}.tox .tox-statusbar__resize-handle{align-items:flex-end;align-self:stretch;cursor:nwse-resize;display:flex;flex:0 0 auto;justify-content:flex-end;margin-left:auto;margin-right:-5px;padding-left:1ch}.tox .tox-statusbar__resize-handle svg{display:block;fill:rgba(84,111,94,.7)}.tox .tox-statusbar__resize-handle:focus svg{background-color:#e5e9e7;border-radius:1px;box-shadow:0 0 0 2px #e5e9e7}.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right:2.5px}.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left:1ch}.tox[dir=rtl] .tox-statusbar{flex-direction:row-reverse}.tox[dir=rtl] .tox-statusbar__path>*{margin-left:2.5px}.tox .tox-throbber{z-index:1299}.tox .tox-throbber__busy-spinner{align-items:center;background-color:rgba(255,255,255,.6);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.tox .tox-tbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#817f7c;display:flex;flex:0 0 auto;font-size:8.75px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0;text-transform:none;width:34px}.tox .tox-tbtn svg{display:block;fill:#817f7c}.tox .tox-tbtn.tox-tbtn-more{padding-left:5px;padding-right:5px;width:inherit}.tox .tox-tbtn:focus{background:#e5e9e7;border:0;box-shadow:none}.tox .tox-tbtn:hover{background:#e5e9e7;border:0;box-shadow:none;color:#0a9fe5}.tox .tox-tbtn:hover svg{fill:#0a9fe5}.tox .tox-tbtn:active{background:#e5e9e7;border:0;box-shadow:none;color:rgba(41,159,250,.88)}.tox .tox-tbtn:active svg{fill:rgba(41,159,250,.88)}.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{background:0 0;border:0;box-shadow:none;color:rgba(129,127,124,.5);cursor:not-allowed}.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill:rgba(129,127,124,.5)}.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:#e5e9e7;border:0;box-shadow:none;color:rgba(41,159,250,.88)}.tox .tox-tbtn--enabled:hover>*,.tox .tox-tbtn--enabled>*{transform:none}.tox .tox-tbtn--enabled svg,.tox .tox-tbtn--enabled:hover svg{fill:rgba(41,159,250,.88)}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled){color:#ee930e}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg{fill:#ee930e}.tox .tox-tbtn:active>*{transform:none}.tox .tox-tbtn--md{height:51px;width:51px}.tox .tox-tbtn--lg{flex-direction:column;height:68px;width:68px}.tox .tox-tbtn--return{-ms-grid-row-align:stretch;align-self:stretch;height:unset;width:16px}.tox .tox-tbtn--labeled{padding:0 4px;width:unset}.tox .tox-tbtn__vlabel{display:block;font-size:10px;font-weight:400;letter-spacing:-.025em;margin-bottom:2.5px;white-space:nowrap}.tox .tox-tbtn--select{margin:2px 0 3px 0;padding:0 4px;width:auto}.tox .tox-tbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-tbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:10px}.tox .tox-tbtn__select-chevron svg{fill:rgba(129,127,124,.5)}.tox .tox-tbtn--bespoke .tox-tbtn__select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:7em}.tox .tox-split-button{border:0;border-radius:3px;box-sizing:border-box;display:flex;margin:2px 0 3px 0;overflow:hidden}.tox .tox-split-button:hover{box-shadow:0 0 0 1px #e5e9e7 inset}.tox .tox-split-button:focus{background:#e5e9e7;box-shadow:none;color:#ee930e}.tox .tox-split-button>*{border-radius:0}.tox .tox-split-button__chevron{width:10px}.tox .tox-split-button__chevron svg{fill:rgba(129,127,124,.5)}.tox .tox-split-button .tox-tbtn{margin:0}.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child{width:30px}.tox.tox-platform-touch .tox-split-button__chevron{width:14px}.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{background:0 0;box-shadow:none;color:rgba(129,127,124,.5)}.tox .tox-toolbar-overlord{background-color:#fff}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23d9d9d9'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 0}.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height:0;opacity:0;padding-bottom:0;padding-top:0;visibility:hidden}.tox .tox-toolbar__overflow--growing{transition:height .3s ease,opacity .2s linear .1s}.tox .tox-toolbar__overflow--shrinking{transition:opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s}.tox .tox-menubar+.tox-toolbar,.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary{border-top:1px solid #d9d9d9;margin-top:-1px}.tox .tox-toolbar--scrolling{flex-wrap:nowrap;overflow-x:auto}.tox .tox-pop .tox-toolbar{border-width:0}.tox .tox-toolbar--no-divider{background-image:none}.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary,.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child{border-top:1px solid #d9d9d9}.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color:#fff;border:1px solid #d9d9d9;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}.tox .tox-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;margin:0 0;padding:0 4px 0 4px}.tox .tox-toolbar__group--pull-right{margin-left:auto}.tox .tox-toolbar--scrolling .tox-toolbar__group{flex-shrink:0;flex-wrap:nowrap}.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right:1px solid #d9d9d9}.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left:1px solid #d9d9d9}.tox .tox-tooltip{display:inline-block;padding:5px;position:relative}.tox .tox-tooltip__body{background-color:rgba(84,111,94,.85);border-radius:3px;box-shadow:0 2px 4px rgba(84,111,94,.3);color:rgba(255,255,255,.75);font-size:8.75px;font-style:normal;font-weight:400;padding:2.5px 5px;text-transform:none}.tox .tox-tooltip__arrow{position:absolute}.tox .tox-tooltip--down .tox-tooltip__arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(84,111,94,.85);bottom:0;left:50%;position:absolute;transform:translateX(-50%)}.tox .tox-tooltip--up .tox-tooltip__arrow{border-bottom:5px solid rgba(84,111,94,.85);border-left:5px solid transparent;border-right:5px solid transparent;left:50%;position:absolute;top:0;transform:translateX(-50%)}.tox .tox-tooltip--right .tox-tooltip__arrow{border-bottom:5px solid transparent;border-left:5px solid rgba(84,111,94,.85);border-top:5px solid transparent;position:absolute;right:0;top:50%;transform:translateY(-50%)}.tox .tox-tooltip--left .tox-tooltip__arrow{border-bottom:5px solid transparent;border-right:5px solid rgba(84,111,94,.85);border-top:5px solid transparent;left:0;position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-well{border:1px solid #d9d9d9;border-radius:3px;padding:5px;width:100%}.tox .tox-well>:first-child{margin-top:0}.tox .tox-well>:last-child{margin-bottom:0}.tox .tox-well>:only-child{margin:0}.tox .tox-custom-editor{border:1px solid #d9d9d9;border-radius:3px;display:flex;flex:1;position:relative}.tox .tox-dialog-loading::before{background-color:rgba(0,0,0,.5);content:"";height:100%;position:absolute;width:100%;z-index:1000}.tox .tox-tab{cursor:pointer}.tox .tox-dialog__content-js{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-content .tox-collection{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-image-tools-edit-panel{height:60px}.tox .tox-image-tools__sidebar{height:60px}
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/jeecg/skin.mobile.css b/public/resource/tinymce/skins/ui/jeecg/skin.mobile.css
new file mode 100644
index 0000000..df458d5
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/skin.mobile.css
@@ -0,0 +1,677 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+/* RESET all the things! */
+.tinymce-mobile-outer-container {
+  all: initial;
+  display: block;
+}
+.tinymce-mobile-outer-container * {
+  border: 0;
+  box-sizing: initial;
+  cursor: inherit;
+  float: none;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* TBIO-3691, stop the gray flicker on touch. */
+  text-shadow: none;
+  white-space: nowrap;
+}
+.tinymce-mobile-icon-arrow-back::before {
+  content: "\e5cd";
+}
+.tinymce-mobile-icon-image::before {
+  content: "\e412";
+}
+.tinymce-mobile-icon-cancel-circle::before {
+  content: "\e5c9";
+}
+.tinymce-mobile-icon-full-dot::before {
+  content: "\e061";
+}
+.tinymce-mobile-icon-align-center::before {
+  content: "\e234";
+}
+.tinymce-mobile-icon-align-left::before {
+  content: "\e236";
+}
+.tinymce-mobile-icon-align-right::before {
+  content: "\e237";
+}
+.tinymce-mobile-icon-bold::before {
+  content: "\e238";
+}
+.tinymce-mobile-icon-italic::before {
+  content: "\e23f";
+}
+.tinymce-mobile-icon-unordered-list::before {
+  content: "\e241";
+}
+.tinymce-mobile-icon-ordered-list::before {
+  content: "\e242";
+}
+.tinymce-mobile-icon-font-size::before {
+  content: "\e245";
+}
+.tinymce-mobile-icon-underline::before {
+  content: "\e249";
+}
+.tinymce-mobile-icon-link::before {
+  content: "\e157";
+}
+.tinymce-mobile-icon-unlink::before {
+  content: "\eca2";
+}
+.tinymce-mobile-icon-color::before {
+  content: "\e891";
+}
+.tinymce-mobile-icon-previous::before {
+  content: "\e314";
+}
+.tinymce-mobile-icon-next::before {
+  content: "\e315";
+}
+.tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-icon-style-formats::before {
+  content: "\e264";
+}
+.tinymce-mobile-icon-undo::before {
+  content: "\e166";
+}
+.tinymce-mobile-icon-redo::before {
+  content: "\e15a";
+}
+.tinymce-mobile-icon-removeformat::before {
+  content: "\e239";
+}
+.tinymce-mobile-icon-small-font::before {
+  content: "\e906";
+}
+.tinymce-mobile-icon-readonly-back::before,
+.tinymce-mobile-format-matches::after {
+  content: "\e5ca";
+}
+.tinymce-mobile-icon-small-heading::before {
+  content: "small";
+}
+.tinymce-mobile-icon-large-heading::before {
+  content: "large";
+}
+.tinymce-mobile-icon-small-heading::before,
+.tinymce-mobile-icon-large-heading::before {
+  font-family: sans-serif;
+  font-size: 80%;
+}
+.tinymce-mobile-mask-edit-icon::before {
+  content: "\e254";
+}
+.tinymce-mobile-icon-back::before {
+  content: "\e5c4";
+}
+.tinymce-mobile-icon-heading::before {
+  /* TODO: Translate */
+  content: "Headings";
+  font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h1::before {
+  content: "H1";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h2::before {
+  content: "H2";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h3::before {
+  content: "H3";
+  font-weight: bold;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: rgba(51, 51, 51, 0.5);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-size: 1em;
+  justify-content: space-between;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1em;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: white;
+  color: #207ab7;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
+  content: "\e900";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
+  z-index: 2;
+}
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
+  background: #ffffff;
+  border: none;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
+  position: relative;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
+  display: flex;
+  flex-grow: 1;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
+  display: flex !important;
+  flex-grow: 1;
+  height: auto !important;
+}
+.tinymce-mobile-android-scroll-reload {
+  overflow: hidden;
+}
+:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
+  margin-top: 23px;
+}
+.tinymce-mobile-toolstrip {
+  background: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  z-index: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex: 1;
+  height: 2.5em;
+  width: 100%;
+  /* Make it no larger than the toolstrip, so that it needs to scroll */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex-shrink: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
+  background: #f44336;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
+  flex-grow: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
+  align-items: center;
+  display: flex;
+  height: 80%;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
+  background: #d4dbd7;
+  color: #cccccc;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
+  background: #207ab7;
+  color: #eceff1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
+  /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
+  /* For widgets like the colour picker, use the whole height */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
+  display: flex;
+  min-height: 1.5em;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
+  display: flex;
+  height: 100%;
+  transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
+  font-family: Sans-serif;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
+  -ms-grid-row-align: center;
+      align-self: center;
+  background: inherit;
+  border: none;
+  border-radius: 50%;
+  color: #888;
+  font-size: 0.6em;
+  font-weight: bold;
+  height: 100%;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
+  display: none;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
+  visibility: hidden;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
+  color: #cccccc;
+  font-size: 10px;
+  line-height: 10px;
+  margin: 0 2px;
+  padding-top: 3px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
+  color: #d4dbd7;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
+  margin-left: 0.5em;
+  margin-right: 0.9em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
+  margin-left: 0.9em;
+  margin-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
+  display: flex;
+  flex: 1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.28em 0;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
+  background: #cccccc;
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
+  background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
+  /* Not part of theming */
+  background: black;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
+  /* Not part of theming */
+  background: white;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
+  /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
+     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
+     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
+     * this approach.
+    */
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #455a64;
+  border: 0.5em solid rgba(136, 136, 136, 0);
+  border-radius: 3em;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  height: 0.5em;
+  justify-content: center;
+  left: -10px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
+  width: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
+  border: 0.5em solid rgba(136, 136, 136, 0.39);
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
+  flex-direction: column;
+  justify-content: center;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
+  background: #ffffff;
+  border: none;
+  border-radius: 0;
+  color: #455a64;
+  flex-grow: 1;
+  font-size: 0.85em;
+  padding-bottom: 0.1em;
+  padding-left: 5px;
+  padding-top: 0.1em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input:-ms-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+/* dropup */
+.tinymce-mobile-dropup {
+  background: white;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
+  transition: height 0.3s ease-out;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
+  transition: height 0.3s ease-in;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
+  flex-grow: 0;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
+  flex-grow: 1;
+}
+/* TODO min-height for device size and orientation */
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+  min-height: 200px;
+}
+@media only screen and (orientation: landscape) {
+  .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 200px;
+  }
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 150px;
+  }
+}
+/* styles menu */
+.tinymce-mobile-styles-menu {
+  font-family: sans-serif;
+  outline: 4px solid black;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"].transitioning {
+  transition: transform 0.5s ease-in-out;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
+  border-bottom: 1px solid #ddd;
+  color: #455a64;
+  cursor: pointer;
+  display: flex;
+  padding: 1em 1em;
+  position: relative;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
+  color: #455a64;
+  content: "\e314";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
+  color: #455a64;
+  content: "\e315";
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
+  align-items: center;
+  background: #fff;
+  border-top: #455a64;
+  color: #455a64;
+  display: flex;
+  min-height: 2.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
+  transform: translate(-100%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
+  transform: translate(0%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
+  transform: translate(100%);
+}
+@font-face {
+  font-family: 'tinymce-mobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
+}
+@media (min-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 25px;
+  }
+}
+@media (max-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 18px;
+  }
+}
+.tinymce-mobile-icon {
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.mixin-flex-and-centre {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mixin-flex-bar {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
+  background-color: #fff;
+  width: 100%;
+}
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+  /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
+  background-color: #207ab7;
+  border-radius: 50%;
+  bottom: 1em;
+  color: white;
+  font-size: 1em;
+  height: 2.1em;
+  position: fixed;
+  right: 2em;
+  width: 2.1em;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
+  height: 300px;
+  overflow: hidden;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
+  height: 100%;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
+  display: none;
+}
+/*
+  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
+  increased and the whole body becomes scrollable. It's important!
+ */
+input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    bottom: 50%;
+  }
+}
diff --git a/public/resource/tinymce/skins/ui/jeecg/skin.mobile.min.css b/public/resource/tinymce/skins/ui/jeecg/skin.mobile.min.css
new file mode 100644
index 0000000..eaad954
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/jeecg/skin.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+.tinymce-mobile-outer-container{all:initial;display:block}.tinymce-mobile-outer-container *{border:0;box-sizing:initial;cursor:inherit;float:none;line-height:1;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:transparent;text-shadow:none;white-space:nowrap}.tinymce-mobile-icon-arrow-back::before{content:"\e5cd"}.tinymce-mobile-icon-image::before{content:"\e412"}.tinymce-mobile-icon-cancel-circle::before{content:"\e5c9"}.tinymce-mobile-icon-full-dot::before{content:"\e061"}.tinymce-mobile-icon-align-center::before{content:"\e234"}.tinymce-mobile-icon-align-left::before{content:"\e236"}.tinymce-mobile-icon-align-right::before{content:"\e237"}.tinymce-mobile-icon-bold::before{content:"\e238"}.tinymce-mobile-icon-italic::before{content:"\e23f"}.tinymce-mobile-icon-unordered-list::before{content:"\e241"}.tinymce-mobile-icon-ordered-list::before{content:"\e242"}.tinymce-mobile-icon-font-size::before{content:"\e245"}.tinymce-mobile-icon-underline::before{content:"\e249"}.tinymce-mobile-icon-link::before{content:"\e157"}.tinymce-mobile-icon-unlink::before{content:"\eca2"}.tinymce-mobile-icon-color::before{content:"\e891"}.tinymce-mobile-icon-previous::before{content:"\e314"}.tinymce-mobile-icon-next::before{content:"\e315"}.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content:"\e264"}.tinymce-mobile-icon-undo::before{content:"\e166"}.tinymce-mobile-icon-redo::before{content:"\e15a"}.tinymce-mobile-icon-removeformat::before{content:"\e239"}.tinymce-mobile-icon-small-font::before{content:"\e906"}.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content:"\e5ca"}.tinymce-mobile-icon-small-heading::before{content:"small"}.tinymce-mobile-icon-large-heading::before{content:"large"}.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family:sans-serif;font-size:80%}.tinymce-mobile-mask-edit-icon::before{content:"\e254"}.tinymce-mobile-icon-back::before{content:"\e5c4"}.tinymce-mobile-icon-heading::before{content:"Headings";font-family:sans-serif;font-size:80%;font-weight:700}.tinymce-mobile-icon-h1::before{content:"H1";font-weight:700}.tinymce-mobile-icon-h2::before{content:"H2";font-weight:700}.tinymce-mobile-icon-h3::before{content:"H3";font-weight:700}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{align-items:center;display:flex;justify-content:center;background:rgba(51,51,51,.5);height:100%;position:absolute;top:0;width:100%}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{align-items:center;border-radius:50%;display:flex;flex-direction:column;font-family:sans-serif;font-size:1em;justify-content:space-between}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items:center;display:flex;justify-content:center;flex-direction:column;font-size:1em}@media only screen and (min-device-width:700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size:1.2em}}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em;background-color:#fff;color:#207ab7}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{content:"\e900";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index:2}.tinymce-mobile-android-container.tinymce-mobile-android-maximized{background:#fff;border:none;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0}.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position:relative}.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display:flex;flex-grow:1}.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display:flex!important;flex-grow:1;height:auto!important}.tinymce-mobile-android-scroll-reload{overflow:hidden}:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top:23px}.tinymce-mobile-toolstrip{background:#fff;display:flex;flex:0 0 auto;z-index:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid #ccc;display:flex;flex:1;height:2.5em;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex-shrink:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background:#f44336}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{align-items:center;display:flex;height:80%;margin-left:2px;margin-right:2px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{background:#d4dbd7;color:#ccc}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{background:#207ab7;color:#eceff1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex:1;padding-bottom:.4em;padding-top:.4em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{display:flex;min-height:1.5em;overflow:hidden;padding-left:0;padding-right:0;position:relative;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display:flex;height:100%;transition:left cubic-bezier(.4,0,1,1) .15s;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display:flex;flex:0 0 auto;justify-content:space-between;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family:Sans-serif}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{display:flex;flex-grow:1;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{-ms-grid-row-align:center;align-self:center;background:inherit;border:none;border-radius:50%;color:#888;font-size:.6em;font-weight:700;height:100%;padding-right:2px;position:absolute;right:0}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display:none}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{align-items:center;display:flex;font-weight:700;height:100%;padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility:hidden}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{color:#ccc;font-size:10px;line-height:10px;margin:0 2px;padding-top:3px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color:#d4dbd7}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-left:.5em;margin-right:.9em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-left:.9em;margin-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{display:flex;flex:1;margin-left:0;margin-right:0;padding:.28em 0;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{background:#ccc;display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-left:2em;padding-right:2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{background:linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{background:#000;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{background:#fff;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{align-items:center;background-clip:padding-box;background-color:#455a64;border:.5em solid rgba(136,136,136,0);border-radius:3em;bottom:0;color:#fff;display:flex;height:.5em;justify-content:center;left:-10px;margin:auto;position:absolute;top:0;transition:border 120ms cubic-bezier(.39,.58,.57,1);width:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border:.5em solid rgba(136,136,136,.39)}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction:column;justify-content:center}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{background:#fff;border:none;border-radius:0;color:#455a64;flex-grow:1;font-size:.85em;padding-bottom:.1em;padding-left:5px;padding-top:.1em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input:-ms-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color:#888}.tinymce-mobile-dropup{background:#fff;display:flex;overflow:hidden;width:100%}.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition:height .3s ease-out}.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition:height .3s ease-in}.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow:0}.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow:1}.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}@media only screen and (orientation:landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:150px}}.tinymce-mobile-styles-menu{font-family:sans-serif;outline:4px solid #000;overflow:hidden;position:relative;width:100%}.tinymce-mobile-styles-menu [role=menu]{display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.tinymce-mobile-styles-menu [role=menu].transitioning{transition:transform .5s ease-in-out}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{border-bottom:1px solid #ddd;color:#455a64;cursor:pointer;display:flex;padding:1em 1em;position:relative}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{color:#455a64;content:"\e314";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{color:#455a64;content:"\e315";font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{align-items:center;background:#fff;border-top:#455a64;color:#455a64;display:flex;min-height:2.5em;padding-left:1em;padding-right:1em}.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform:translate(-100%)}.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform:translate(0)}.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform:translate(100%)}@font-face{font-family:tinymce-mobile;font-style:normal;font-weight:400;src:url(fonts/tinymce-mobile.woff?8x92w3) format('woff')}@media (min-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:25px}}@media (max-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:18px}}.tinymce-mobile-icon{font-family:tinymce-mobile,sans-serif}.mixin-flex-and-centre{align-items:center;display:flex;justify-content:center}.mixin-flex-bar{align-items:center;display:flex;height:100%}.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{background-color:#fff;width:100%}.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{background-color:#207ab7;border-radius:50%;bottom:1em;color:#fff;font-size:1em;height:2.1em;position:fixed;right:2em;width:2.1em;align-items:center;display:flex;justify-content:center}@media only screen and (min-device-width:700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size:1.2em}}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height:300px;overflow:hidden}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height:100%}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display:none}input[type=file]::-webkit-file-upload-button{display:none}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom:50%}}
\ No newline at end of file
diff --git a/public/resource/tinymce/skins/ui/oxide-dark/content.inline.min.css b/public/resource/tinymce/skins/ui/oxide-dark/content.inline.min.css
new file mode 100644
index 0000000..748f313
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide-dark/content.inline.min.css
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{display: inline-block;width: 8px !important;height: 12px !important;padding: 0 2px;cursor: default;background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;-webkit-user-modify: read-only;-moz-user-modify: read-only;}
+
+.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset: 1px;}
+
+.tox-comments-visible .tox-comment{background-color: #fff0b7;}
+
+.tox-comments-visible .tox-comment--active{background-color: #ffe168;}
+
+.tox-checklist>li:not(.tox-checklist--hidden){margin: .25em 0;list-style: none;}
+
+.tox-checklist>li:not(.tox-checklist--hidden)::before{position: absolute;width: 1em;height: 1em;margin-top: .125em;margin-left: -1.5em;cursor: pointer;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");background-size: 100%;content: '';}
+
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");}
+
+[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-right: -1.5em;margin-left: 0;}
+
+code[class*=language-],pre[class*=language-]{font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size: .875rem;-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;line-height: 1.5;word-spacing: normal;color: #000;text-shadow: 0 1px #fff;word-break: normal;word-wrap: normal;white-space: pre;-moz-tab-size: 4;tab-size: 4;}
+
+code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow: none;background: #b3d4fc;}
+
+code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow: none;background: #b3d4fc;}@media print{code[class*=language-],pre[class*=language-]{text-shadow: none;}}
+
+pre[class*=language-]{padding: 1em;margin: .5em 0;overflow: auto;}
+
+:not(pre)>code[class*=language-],pre[class*=language-]{background: 0 0 !important;border: 1px solid #ccc;}
+
+:not(pre)>code[class*=language-]{padding: .1em;border-radius: .3em;}
+
+.token.cdata,.token.comment,.token.doctype,.token.prolog{color: #708090;}
+
+.token.punctuation{color: #999;}
+
+.namespace{opacity: .7;}
+
+.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color: #905;}
+
+.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color: #690;}
+
+.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color: #a67f59;background: hsla(0,0%,100%,.5);}
+
+.token.atrule,.token.attr-value,.token.keyword{color: #07a;}
+
+.token.function{color: #dd4a68;}
+
+.token.important,.token.regex,.token.variable{color: #e90;}
+
+.token.bold,.token.important{font-weight: 700;}
+
+.token.italic{font-style: italic;}
+
+.token.entity{cursor: help;}
+
+:not([dir=rtl]) code[class*=language-],:not([dir=rtl]) pre[class*=language-]{text-align: left;direction: ltr;}
+
+[dir=rtl] code[class*=language-],[dir=rtl] pre[class*=language-]{text-align: right;direction: rtl;}
+
+.mce-content-body{overflow-wrap: break-word;word-wrap: break-word;}
+
+.mce-content-body .mce-visual-caret{position: absolute;background-color: #000;background-color: currentColor;}
+
+.mce-content-body .mce-visual-caret-hidden{display: none;}
+
+.mce-content-body [data-mce-caret]{position: absolute;top: 0;right: auto;left: -1000px;padding: 0;margin: 0;}
+
+.mce-content-body .mce-offscreen-selection{position: absolute;left: -9999999999px;max-width: 1000000px;}
+
+.mce-content-body [contentEditable=false]{cursor: default;}
+
+.mce-content-body [contentEditable=true]{cursor: text;}
+
+.tox-cursor-format-painter{cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default;}
+
+.mce-content-body figure.align-left{float: left;}
+
+.mce-content-body figure.align-right{float: right;}
+
+.mce-content-body figure.image.align-center{display: table;margin-right: auto;margin-left: auto;}
+
+.mce-preview-object{position: relative;display: inline-block;margin: 0 2px 0 2px;line-height: 0;border: 1px solid gray;}
+
+.mce-preview-object .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.mce-preview-object[data-mce-selected="2"] .mce-shim{display: none;}
+
+.mce-object{background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border: 1px dashed #aaa;}
+
+.mce-pagebreak{display: block;width: 100%;height: 5px;margin-top: 15px;cursor: default;border: 1px dashed #aaa;page-break-before: always;}@media print{.mce-pagebreak{border: 0;}}
+
+.tiny-pageembed .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.tiny-pageembed[data-mce-selected="2"] .mce-shim{display: none;}
+
+.tiny-pageembed{position: relative;display: inline-block;}
+
+.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{position: relative;display: block;width: 100%;padding: 0;overflow: hidden;}
+
+.tiny-pageembed--16by9::before,.tiny-pageembed--1by1::before,.tiny-pageembed--21by9::before,.tiny-pageembed--4by3::before{display: block;content: "";}
+
+.tiny-pageembed--21by9::before{padding-top: 42.857143%;}
+
+.tiny-pageembed--16by9::before{padding-top: 56.25%;}
+
+.tiny-pageembed--4by3::before{padding-top: 75%;}
+
+.tiny-pageembed--1by1::before{padding-top: 100%;}
+
+.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}
+
+.mce-content-body div.mce-resizehandle{position: absolute;z-index: 10000;width: 10px;height: 10px;background-color: #4099ff;border-color: #4099ff;border-style: solid;border-width: 1px;box-sizing: border-box;}
+
+.mce-content-body div.mce-resizehandle:hover{background-color: #4099ff;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor: nesw-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor: nesw-resize;}
+
+.mce-content-body .mce-clonedresizable{position: absolute;z-index: 10000;outline: 1px dashed #000;opacity: .5;}
+
+.mce-content-body .mce-resize-helper{position: absolute;z-index: 10001;display: none;padding: 5px;margin: 5px 10px;font-family: sans-serif;font-size: 12px;line-height: 14px;color: #fff;white-space: nowrap;background: #555;background: rgba(0,0,0,.75);border: 1px;border-radius: 3px;}
+
+.mce-match-marker{color: #fff;background: #aaa;}
+
+.mce-match-marker-selected{color: #fff;background: #39f;}
+
+.mce-content-body img[data-mce-selected],.mce-content-body table[data-mce-selected]{outline: 3px solid #b4d7ff;}
+
+.mce-content-body hr[data-mce-selected]{outline: 3px solid #b4d7ff;outline-offset: 1px;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false][data-mce-selected]{cursor: not-allowed;outline: 3px solid #b4d7ff;}
+
+.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline: 0;}
+
+.mce-content-body [data-mce-selected=inline-boundary]{background-color: #b4d7ff;}
+
+.mce-content-body .mce-edit-focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{background-color: #b4d7ff !important;}
+
+.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
+
+.mce-content-body img::-moz-selection{background: 0 0;}
+
+.mce-content-body img::selection{background: 0 0;}
+
+.ephox-snooker-resizer-bar{background-color: #b4d7ff;opacity: 0;}
+
+.ephox-snooker-resizer-cols{cursor: col-resize;}
+
+.ephox-snooker-resizer-rows{cursor: row-resize;}
+
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity: 1;}
+
+.mce-spellchecker-word{height: 2rem;cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.5'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-spellchecker-grammar{cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23008800'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-toc{border: 1px solid gray;}
+
+.mce-toc h2{margin: 4px;}
+
+.mce-toc li{list-style-type: none;}
+
+.mce-item-table,.mce-item-table caption,.mce-item-table td,.mce-item-table th{border: 1px dashed #bbb;}
+
+.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{padding-top: 10px;margin-left: 3px;background-repeat: no-repeat;border: 1px dashed #bbb;}
+
+.mce-visualblocks p{background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);}
+
+.mce-visualblocks h1{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);}
+
+.mce-visualblocks h2{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);}
+
+.mce-visualblocks h3{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);}
+
+.mce-visualblocks h4{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);}
+
+.mce-visualblocks h5{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);}
+
+.mce-visualblocks h6{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);}
+
+.mce-visualblocks div:not([data-mce-bogus]){background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);}
+
+.mce-visualblocks section{background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);}
+
+.mce-visualblocks article{background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);}
+
+.mce-visualblocks blockquote{background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);}
+
+.mce-visualblocks address{background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);}
+
+.mce-visualblocks pre{background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);}
+
+.mce-visualblocks figure{background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);}
+
+.mce-visualblocks figcaption{border: 1px dashed #bbb;}
+
+.mce-visualblocks hgroup{background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);}
+
+.mce-visualblocks aside{background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);}
+
+.mce-visualblocks ul{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);}
+
+.mce-visualblocks ol{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);}
+
+.mce-visualblocks dl{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);}
+
+.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left: 3px;}
+
+.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x: right;margin-right: 3px;}
+
+.mce-nbsp,.mce-shy{background: #aaa;}
+
+.mce-shy::after{content: '-';}
+
+.tox-toolbar-dock-fadeout{opacity: 0;visibility: hidden;}
+
+.tox-toolbar-dock-fadein{opacity: 1;visibility: visible;}
+
+.tox-toolbar-dock-transition{transition: visibility 0s linear .3s,opacity .3s ease;}
+
+.tox-toolbar-dock-transition.tox-toolbar-dock-fadein{transition-delay: 0s;}
diff --git a/public/resource/tinymce/skins/ui/oxide-dark/content.min.css b/public/resource/tinymce/skins/ui/oxide-dark/content.min.css
new file mode 100644
index 0000000..6e7165f
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide-dark/content.min.css
@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{display: inline-block;width: 8px !important;height: 12px !important;padding: 0 2px;cursor: default;background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;-webkit-user-modify: read-only;-moz-user-modify: read-only;}
+
+.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset: 1px;}
+
+.tox-comments-visible .tox-comment{background-color: #fff0b7;}
+
+.tox-comments-visible .tox-comment--active{background-color: #ffe168;}
+
+.tox-checklist>li:not(.tox-checklist--hidden){margin: .25em 0;list-style: none;}
+
+.tox-checklist>li:not(.tox-checklist--hidden)::before{position: absolute;width: 1em;height: 1em;margin-top: .125em;margin-left: -1.5em;cursor: pointer;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");background-size: 100%;content: '';}
+
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");}
+
+[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-right: -1.5em;margin-left: 0;}
+
+code[class*=language-],pre[class*=language-]{font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size: .875rem;-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;line-height: 1.5;word-spacing: normal;color: #000;text-shadow: 0 1px #fff;word-break: normal;word-wrap: normal;white-space: pre;-moz-tab-size: 4;tab-size: 4;}
+
+code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow: none;background: #b3d4fc;}
+
+code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow: none;background: #b3d4fc;}@media print{code[class*=language-],pre[class*=language-]{text-shadow: none;}}
+
+pre[class*=language-]{padding: 1em;margin: .5em 0;overflow: auto;}
+
+:not(pre)>code[class*=language-],pre[class*=language-]{background: 0 0 !important;border: 1px solid #ccc;}
+
+:not(pre)>code[class*=language-]{padding: .1em;border-radius: .3em;}
+
+.token.cdata,.token.comment,.token.doctype,.token.prolog{color: #708090;}
+
+.token.punctuation{color: #999;}
+
+.namespace{opacity: .7;}
+
+.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color: #905;}
+
+.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color: #690;}
+
+.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color: #a67f59;background: hsla(0,0%,100%,.5);}
+
+.token.atrule,.token.attr-value,.token.keyword{color: #07a;}
+
+.token.function{color: #dd4a68;}
+
+.token.important,.token.regex,.token.variable{color: #e90;}
+
+.token.bold,.token.important{font-weight: 700;}
+
+.token.italic{font-style: italic;}
+
+.token.entity{cursor: help;}
+
+:not([dir=rtl]) code[class*=language-],:not([dir=rtl]) pre[class*=language-]{text-align: left;direction: ltr;}
+
+[dir=rtl] code[class*=language-],[dir=rtl] pre[class*=language-]{text-align: right;direction: rtl;}
+
+.mce-content-body{overflow-wrap: break-word;word-wrap: break-word;}
+
+.mce-content-body .mce-visual-caret{position: absolute;background-color: #000;background-color: currentColor;}
+
+.mce-content-body .mce-visual-caret-hidden{display: none;}
+
+.mce-content-body [data-mce-caret]{position: absolute;top: 0;right: auto;left: -1000px;padding: 0;margin: 0;}
+
+.mce-content-body .mce-offscreen-selection{position: absolute;left: -9999999999px;max-width: 1000000px;}
+
+.mce-content-body [contentEditable=false]{cursor: default;}
+
+.mce-content-body [contentEditable=true]{cursor: text;}
+
+.tox-cursor-format-painter{cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default;}
+
+.mce-content-body figure.align-left{float: left;}
+
+.mce-content-body figure.align-right{float: right;}
+
+.mce-content-body figure.image.align-center{display: table;margin-right: auto;margin-left: auto;}
+
+.mce-preview-object{position: relative;display: inline-block;margin: 0 2px 0 2px;line-height: 0;border: 1px solid gray;}
+
+.mce-preview-object .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.mce-preview-object[data-mce-selected="2"] .mce-shim{display: none;}
+
+.mce-object{background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border: 1px dashed #aaa;}
+
+.mce-pagebreak{display: block;width: 100%;height: 5px;margin-top: 15px;cursor: default;border: 1px dashed #aaa;page-break-before: always;}@media print{.mce-pagebreak{border: 0;}}
+
+.tiny-pageembed .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.tiny-pageembed[data-mce-selected="2"] .mce-shim{display: none;}
+
+.tiny-pageembed{position: relative;display: inline-block;}
+
+.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{position: relative;display: block;width: 100%;padding: 0;overflow: hidden;}
+
+.tiny-pageembed--16by9::before,.tiny-pageembed--1by1::before,.tiny-pageembed--21by9::before,.tiny-pageembed--4by3::before{display: block;content: "";}
+
+.tiny-pageembed--21by9::before{padding-top: 42.857143%;}
+
+.tiny-pageembed--16by9::before{padding-top: 56.25%;}
+
+.tiny-pageembed--4by3::before{padding-top: 75%;}
+
+.tiny-pageembed--1by1::before{padding-top: 100%;}
+
+.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}
+
+.mce-content-body div.mce-resizehandle{position: absolute;z-index: 10000;width: 10px;height: 10px;background-color: #4099ff;border-color: #4099ff;border-style: solid;border-width: 1px;box-sizing: border-box;}
+
+.mce-content-body div.mce-resizehandle:hover{background-color: #4099ff;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor: nesw-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor: nesw-resize;}
+
+.mce-content-body .mce-clonedresizable{position: absolute;z-index: 10000;outline: 1px dashed #000;opacity: .5;}
+
+.mce-content-body .mce-resize-helper{position: absolute;z-index: 10001;display: none;padding: 5px;margin: 5px 10px;font-family: sans-serif;font-size: 12px;line-height: 14px;color: #fff;white-space: nowrap;background: #555;background: rgba(0,0,0,.75);border: 1px;border-radius: 3px;}
+
+.mce-match-marker{color: #fff;background: #aaa;}
+
+.mce-match-marker-selected{color: #fff;background: #39f;}
+
+.mce-content-body img[data-mce-selected],.mce-content-body table[data-mce-selected]{outline: 3px solid #b4d7ff;}
+
+.mce-content-body hr[data-mce-selected]{outline: 3px solid #b4d7ff;outline-offset: 1px;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false][data-mce-selected]{cursor: not-allowed;outline: 3px solid #b4d7ff;}
+
+.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline: 0;}
+
+.mce-content-body [data-mce-selected=inline-boundary]{background-color: #b4d7ff;}
+
+.mce-content-body .mce-edit-focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{background-color: #b4d7ff !important;}
+
+.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
+
+.mce-content-body img::-moz-selection{background: 0 0;}
+
+.mce-content-body img::selection{background: 0 0;}
+
+.ephox-snooker-resizer-bar{background-color: #b4d7ff;opacity: 0;}
+
+.ephox-snooker-resizer-cols{cursor: col-resize;}
+
+.ephox-snooker-resizer-rows{cursor: row-resize;}
+
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity: 1;}
+
+.mce-spellchecker-word{height: 2rem;cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.5'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-spellchecker-grammar{cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23008800'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-toc{border: 1px solid gray;}
+
+.mce-toc h2{margin: 4px;}
+
+.mce-toc li{list-style-type: none;}
+
+.mce-item-table,.mce-item-table caption,.mce-item-table td,.mce-item-table th{border: 1px dashed #bbb;}
+
+.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{padding-top: 10px;margin-left: 3px;background-repeat: no-repeat;border: 1px dashed #bbb;}
+
+.mce-visualblocks p{background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);}
+
+.mce-visualblocks h1{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);}
+
+.mce-visualblocks h2{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);}
+
+.mce-visualblocks h3{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);}
+
+.mce-visualblocks h4{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);}
+
+.mce-visualblocks h5{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);}
+
+.mce-visualblocks h6{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);}
+
+.mce-visualblocks div:not([data-mce-bogus]){background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);}
+
+.mce-visualblocks section{background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);}
+
+.mce-visualblocks article{background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);}
+
+.mce-visualblocks blockquote{background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);}
+
+.mce-visualblocks address{background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);}
+
+.mce-visualblocks pre{background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);}
+
+.mce-visualblocks figure{background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);}
+
+.mce-visualblocks figcaption{border: 1px dashed #bbb;}
+
+.mce-visualblocks hgroup{background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);}
+
+.mce-visualblocks aside{background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);}
+
+.mce-visualblocks ul{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);}
+
+.mce-visualblocks ol{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);}
+
+.mce-visualblocks dl{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);}
+
+.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left: 3px;}
+
+.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x: right;margin-right: 3px;}
+
+.mce-nbsp,.mce-shy{background: #aaa;}
+
+.mce-shy::after{content: '-';}
+
+body{font-family: sans-serif;}
+
+table{border-collapse: collapse;}
diff --git a/public/resource/tinymce/skins/ui/oxide-dark/content.mobile.min.css b/public/resource/tinymce/skins/ui/oxide-dark/content.mobile.min.css
new file mode 100644
index 0000000..c052252
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide-dark/content.mobile.min.css
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{position: absolute;display: inline-block;background-color: green;opacity: .5;}
+
+body{-webkit-text-size-adjust: none;}
+
+body img{max-width: 96vw;}
+
+body table img{max-width: 95%;}
+
+body{font-family: sans-serif;}
+
+table{border-collapse: collapse;}
diff --git a/public/resource/tinymce/skins/ui/oxide-dark/skin.min.css b/public/resource/tinymce/skins/ui/oxide-dark/skin.min.css
new file mode 100644
index 0000000..d8dc9b2
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide-dark/skin.min.css
@@ -0,0 +1,875 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: #222f3e;text-decoration: none;text-shadow: none;text-transform: none;white-space: normal;vertical-align: initial;cursor: auto;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}
+
+.tox :not(svg){font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;line-height: inherit;color: inherit;text-align: inherit;text-decoration: inherit;text-shadow: inherit;text-transform: inherit;white-space: inherit;vertical-align: inherit;cursor: inherit;box-sizing: inherit;direction: inherit;-webkit-tap-highlight-color: inherit;}
+
+.tox :not(svg){position: static;float: none;width: auto;height: auto;max-width: none;padding: 0;margin: 0;background: 0 0;border: 0;outline: 0;}
+
+.tox:not([dir=rtl]){text-align: left;direction: ltr;}
+
+.tox[dir=rtl]{text-align: right;direction: rtl;}
+
+.tox-tinymce{position: relative;display: flex;overflow: hidden;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;border: 1px solid #000;border-radius: 0;visibility: inherit !important;box-shadow: none;box-sizing: border-box;flex-direction: column;}
+
+.tox-editor-container{display: flex;flex: 1 1 auto;flex-direction: column;overflow: hidden;}
+
+.tox-editor-container>:first-child{border-top: none !important;}
+
+.tox-tinymce-aux{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}
+
+.tox-tinymce :focus,.tox-tinymce-aux :focus{outline: 0;}
+
+button::-moz-focus-inner{border: 0;}
+
+.tox-silver-sink{z-index: 1300;}
+
+.tox .tox-anchorbar{display: flex;flex: 0 0 auto;}
+
+.tox .tox-bar{display: flex;flex: 0 0 auto;}
+
+.tox .tox-button{display: inline-block;padding: 4px 16px;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;letter-spacing: 1;color: #fff;text-align: center;text-decoration: none;text-transform: capitalize;white-space: nowrap;cursor: pointer;background-color: #207ab7;background-image: none;background-position: none;background-repeat: none;border-color: #207ab7;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;box-sizing: border-box;}
+
+.tox .tox-button[disabled]{color: rgba(255,255,255,.5);cursor: not-allowed;background-color: #207ab7;background-image: none;border-color: #207ab7;box-shadow: none;}
+
+.tox .tox-button:focus:not(:disabled){color: #fff;background-color: #1c6ca1;background-image: none;border-color: #1c6ca1;box-shadow: none;}
+
+.tox .tox-button:hover:not(:disabled){color: #fff;background-color: #1c6ca1;background-image: none;border-color: #1c6ca1;box-shadow: none;}
+
+.tox .tox-button:active:not(:disabled){color: #fff;background-color: #185d8c;background-image: none;border-color: #185d8c;box-shadow: none;}
+
+.tox .tox-button--secondary{padding: 4px 16px;color: #fff;text-decoration: none;text-transform: capitalize;background-color: #3d546f;background-image: none;background-position: none;background-repeat: none;border-color: #3d546f;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;}
+
+.tox .tox-button--secondary[disabled]{color: rgba(255,255,255,.5);background-color: #3d546f;background-image: none;border-color: #3d546f;box-shadow: none;}
+
+.tox .tox-button--secondary:focus:not(:disabled){color: #fff;background-color: #34485f;background-image: none;border-color: #34485f;box-shadow: none;}
+
+.tox .tox-button--secondary:hover:not(:disabled){color: #fff;background-color: #34485f;background-image: none;border-color: #34485f;box-shadow: none;}
+
+.tox .tox-button--secondary:active:not(:disabled){color: #fff;background-color: #2b3b4e;background-image: none;border-color: #2b3b4e;box-shadow: none;}
+
+.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding: 4px;}
+
+.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display: block;fill: currentColor;}
+
+.tox .tox-button-link{display: inline-block;padding: 0;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;font-weight: 400;line-height: 1.3;white-space: nowrap;cursor: pointer;background: 0;border: none;box-sizing: border-box;}
+
+.tox .tox-button-link--sm{font-size: 14px;}
+
+.tox .tox-button--naked{color: #fff;background-color: transparent;border-color: transparent;box-shadow: unset;}
+
+.tox .tox-button--naked:hover:not(:disabled){color: #fff;background-color: #34485f;border-color: #34485f;box-shadow: none;}
+
+.tox .tox-button--naked:focus:not(:disabled){color: #fff;background-color: #34485f;border-color: #34485f;box-shadow: none;}
+
+.tox .tox-button--naked:active:not(:disabled){color: #fff;background-color: #2b3b4e;border-color: #2b3b4e;box-shadow: none;}
+
+.tox .tox-button--naked .tox-icon svg{fill: currentColor;}
+
+.tox .tox-button--naked.tox-button--icon{color: currentColor;}
+
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color: #fff;}
+
+.tox .tox-checkbox{display: flex;height: 36px;min-width: 36px;cursor: pointer;border-radius: 3px;align-items: center;}
+
+.tox .tox-checkbox__input{position: absolute;top: auto;left: -10000px;width: 1px;height: 1px;overflow: hidden;}
+
+.tox .tox-checkbox__icons{width: 24px;height: 24px;padding: calc(4px - 1px);border-radius: 3px;box-shadow: 0 0 0 2px transparent;box-sizing: content-box;}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: block;fill: rgba(255,255,255,.2);}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display: none;fill: #207ab7;}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display: none;fill: #207ab7;}
+
+.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: none;}
+
+.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display: block;}
+
+.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: none;}
+
+.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display: block;}
+
+.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{padding: calc(4px - 1px);border-radius: 3px;box-shadow: inset 0 0 0 1px #207ab7;}
+
+.tox:not([dir=rtl]) .tox-checkbox__label{margin-left: 4px;}
+
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-checkbox__label{margin-right: 4px;}
+
+.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right: 4px;}
+
+.tox .tox-collection--toolbar .tox-collection__group{display: flex;padding: 0;}
+
+.tox .tox-collection--grid .tox-collection__group{display: flex;max-height: 208px;padding: 0;overflow-x: hidden;overflow-y: auto;flex-wrap: wrap;}
+
+.tox .tox-collection--list .tox-collection__group{padding: 4px 0;border-color: #1a1a1a;border-style: solid;border-top-width: 1px;border-right-width: 0;border-bottom-width: 0;border-left-width: 0;}
+
+.tox .tox-collection--list .tox-collection__group:first-child{border-top-width: 0;}
+
+.tox .tox-collection__group-heading{padding: 4px 8px;margin-top: -4px;margin-bottom: 4px;font-size: 12px;font-style: normal;font-weight: 400;color: #fff;text-transform: none;cursor: default;background-color: #333;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;}
+
+.tox .tox-collection__item{display: flex;color: #fff;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;align-items: center;-webkit-touch-callout: none;}
+
+.tox .tox-collection--list .tox-collection__item{padding: 4px 8px;}
+
+.tox .tox-collection--toolbar .tox-collection__item{padding: 4px;border-radius: 3px;}
+
+.tox .tox-collection--grid .tox-collection__item{padding: 4px;border-radius: 3px;}
+
+.tox .tox-collection--list .tox-collection__item--enabled{color: contrast(inherit,#222f3e,#fff);background-color: inherit;}
+
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #fff;background-color: #434e5b;}
+
+.tox .tox-collection--toolbar .tox-collection__item--enabled{color: #fff;background-color: #6f7882;}
+
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #fff;background-color: #434e5b;}
+
+.tox .tox-collection--grid .tox-collection__item--enabled{color: #fff;background-color: #6f7882;}
+
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #fff;background-color: #434e5b;}
+
+.tox .tox-collection__item--state-disabled{color: rgba(255,255,255,.5);cursor: default;background-color: transparent;}
+
+.tox .tox-collection__item-icon{display: flex;width: 24px;height: 24px;align-items: center;justify-content: center;}
+
+.tox .tox-collection__item-icon svg{fill: currentColor;}
+
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon{width: 48px;height: 48px;}
+
+.tox .tox-collection__item[role=menuitemcheckbox]:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display: none;}
+
+.tox .tox-collection__item-label{display: inline-block;font-size: 14px;font-style: normal;font-weight: 400;line-height: 24px;color: currentColor;text-transform: none;word-break: break-all;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-collection__item-accessory{display: inline-block;height: 24px;font-size: 14px;line-height: 24px;color: rgba(255,255,255,.5);text-transform: normal;}
+
+.tox .tox-collection__item-caret{align-items: center;display: flex;min-height: 24px;}
+
+.tox .tox-collection__item-caret::after{min-height: inherit;font-size: 0;content: '';}
+
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item-label:first-child{margin-left: 4px;}
+
+.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left: 16px;text-align: right;}
+
+.tox:not([dir=rtl]) .tox-collection__item-caret{margin-left: 16px;}
+
+.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right: 8px;}
+
+.tox[dir=rtl] .tox-collection--list .tox-collection__item-label:first-child{margin-right: 4px;}
+
+.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg{transform: rotateY(180deg);}
+
+.tox[dir=rtl] .tox-collection__item-accessory{margin-right: 16px;text-align: left;}
+
+.tox[dir=rtl] .tox-collection__item-caret{margin-right: 16px;transform: rotateY(180deg);}
+
+.tox .tox-color-picker-container{display: flex;flex-direction: row;height: 225px;margin: 0;}
+
+.tox .tox-sv-palette{display: flex;height: 100%;box-sizing: border-box;}
+
+.tox .tox-sv-palette-spectrum{height: 100%;}
+
+.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width: 225px;}
+
+.tox .tox-sv-palette-thumb{position: absolute;width: 12px;height: 12px;background: 0 0;border: 1px solid #000;border-radius: 50%;box-sizing: content-box;}
+
+.tox .tox-sv-palette-inner-thumb{position: absolute;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;}
+
+.tox .tox-hue-slider{width: 25px;height: 100%;box-sizing: border-box;}
+
+.tox .tox-hue-slider-spectrum{width: 100%;height: 100%;background: linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);}
+
+.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width: 20px;}
+
+.tox .tox-hue-slider-thumb{width: 100%;height: 4px;background: #fff;border: 1px solid #000;box-sizing: content-box;}
+
+.tox .tox-rgb-form{display: flex;flex-direction: column;justify-content: space-between;}
+
+.tox .tox-rgb-form div{display: flex;width: inherit;margin-bottom: 5px;align-items: center;justify-content: space-between;}
+
+.tox .tox-rgb-form input{width: 6em;}
+
+.tox .tox-rgb-form input.tox-invalid{border: 1px solid red !important;}
+
+.tox .tox-rgb-form .tox-rgba-preview{margin-bottom: 0;border: 1px solid #000;flex-grow: 2;}
+
+.tox:not([dir=rtl]) .tox-sv-palette{margin-right: 15px;}
+
+.tox:not([dir=rtl]) .tox-hue-slider{margin-right: 15px;}
+
+.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left: -1px;}
+
+.tox:not([dir=rtl]) .tox-rgb-form label{margin-right: .5em;}
+
+.tox[dir=rtl] .tox-sv-palette{margin-left: 15px;}
+
+.tox[dir=rtl] .tox-hue-slider{margin-left: 15px;}
+
+.tox[dir=rtl] .tox-hue-slider-thumb{margin-right: -1px;}
+
+.tox[dir=rtl] .tox-rgb-form label{margin-left: .5em;}
+
+.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin: 2px 0 3px 4px;}
+
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{margin: -4px 0;border: 0;}
+
+.tox .tox-swatches__row{display: flex;}
+
+.tox .tox-swatch{width: 30px;height: 30px;transition: transform .15s,box-shadow .15s;}
+
+.tox .tox-swatch:focus,.tox .tox-swatch:hover{transform: scale(.8);box-shadow: 0 0 0 1px rgba(127,127,127,.3) inset;}
+
+.tox .tox-swatch--remove{align-items: center;display: flex;justify-content: center;}
+
+.tox .tox-swatch--remove svg path{stroke: #e74c3c;}
+
+.tox .tox-swatches__picker-btn{display: flex;width: 30px;height: 30px;padding: 0;cursor: pointer;background-color: transparent;border: 0;outline: 0;align-items: center;justify-content: center;}
+
+.tox .tox-swatches__picker-btn svg{width: 24px;height: 24px;}
+
+.tox .tox-swatches__picker-btn:hover{background: #434e5b;}
+
+.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left: auto;}
+
+.tox[dir=rtl] .tox-swatches__picker-btn{margin-right: auto;}
+
+.tox .tox-comment-thread{position: relative;background: #2b3b4e;}
+
+.tox .tox-comment-thread>:not(:first-child){margin-top: 8px;}
+
+.tox .tox-comment{position: relative;padding: 8px 8px 16px 8px;background: #2b3b4e;border: 1px solid #000;border-radius: 3px;box-shadow: 0 4px 8px 0 rgba(34,47,62,.1);}
+
+.tox .tox-comment__header{display: flex;color: #fff;align-items: center;justify-content: space-between;}
+
+.tox .tox-comment__date{font-size: 12px;color: rgba(255,255,255,.5);}
+
+.tox .tox-comment__body{position: relative;margin-top: 8px;font-size: 14px;font-style: normal;font-weight: 400;line-height: 1.3;color: #fff;text-transform: initial;}
+
+.tox .tox-comment__body textarea{width: 100%;white-space: normal;resize: none;}
+
+.tox .tox-comment__expander{padding-top: 8px;}
+
+.tox .tox-comment__expander p{font-size: 14px;font-style: normal;color: rgba(255,255,255,.5);}
+
+.tox .tox-comment__body p{margin: 0;}
+
+.tox .tox-comment__buttonspacing{padding-top: 16px;text-align: center;}
+
+.tox .tox-comment-thread__overlay::after{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 5;display: flex;background: #2b3b4e;content: "";opacity: .9;}
+
+.tox .tox-comment__reply{display: flex;flex-shrink: 0;flex-wrap: wrap;justify-content: flex-end;margin-top: 8px;}
+
+.tox .tox-comment__reply>:first-child{width: 100%;margin-bottom: 8px;}
+
+.tox .tox-comment__edit{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-top: 16px;}
+
+.tox .tox-comment__gradient::after{position: absolute;bottom: 0;display: block;width: 100%;height: 5em;margin-top: -40px;background: linear-gradient(rgba(43,59,78,0),#2b3b4e);content: "";}
+
+.tox .tox-comment__overlay{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 5;display: flex;text-align: center;background: #2b3b4e;opacity: .9;flex-direction: column;flex-grow: 1;}
+
+.tox .tox-comment__loading-text{position: relative;display: flex;color: #fff;align-items: center;flex-direction: column;}
+
+.tox .tox-comment__loading-text>div{padding-bottom: 16px;}
+
+.tox .tox-comment__overlaytext{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 10;padding: 1em;font-size: 14px;flex-direction: column;}
+
+.tox .tox-comment__overlaytext p{color: #fff;text-align: center;background-color: #2b3b4e;box-shadow: 0 0 8px 8px #2b3b4e;}
+
+.tox .tox-comment__overlaytext div:nth-of-type(2){font-size: .8em;}
+
+.tox .tox-comment__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1103;display: flex;background-color: #2b3b4e;align-items: center;justify-content: center;}
+
+.tox .tox-comment__scroll{display: flex;flex-direction: column;flex-shrink: 1;overflow: auto;}
+
+.tox .tox-conversations{margin: 8px;}
+
+.tox:not([dir=rtl]) .tox-comment__edit{margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-comment__edit{margin-right: 8px;}
+
+.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right: 8px;}
+
+.tox .tox-user{align-items: center;display: flex;}
+
+.tox .tox-user__avatar svg{fill: rgba(255,255,255,.5);}
+
+.tox .tox-user__name{font-size: 12px;font-style: normal;font-weight: 700;color: rgba(255,255,255,.5);text-transform: uppercase;}
+
+.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right: 8px;}
+
+.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-user__avatar svg{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right: 8px;}
+
+.tox .tox-dialog-wrap{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1100;display: flex;align-items: center;justify-content: center;}
+
+.tox .tox-dialog-wrap__backdrop{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1101;background-color: rgba(34,47,62,.75);}
+
+.tox .tox-dialog{position: relative;z-index: 1102;display: flex;width: 95vw;max-width: 480px;max-height: 100%;overflow: hidden;background-color: #2b3b4e;border-color: #000;border-style: solid;border-width: 1px;border-radius: 3px;box-shadow: 0 16px 16px -10px rgba(34,47,62,.15),0 0 40px 1px rgba(34,47,62,.15);flex-direction: column;}
+
+.tox .tox-dialog__header{position: relative;display: flex;padding: 8px 16px 0 16px;margin-bottom: 16px;font-size: 16px;color: #fff;background-color: #2b3b4e;border-bottom: none;align-items: center;justify-content: space-between;}
+
+.tox .tox-dialog__header .tox-button{z-index: 1;}
+
+.tox .tox-dialog__draghandle{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: grab;}
+
+.tox .tox-dialog__draghandle:active{cursor: grabbing;}
+
+.tox .tox-dialog__dismiss{margin-left: auto;}
+
+.tox .tox-dialog__title{margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 20px;font-style: normal;font-weight: 400;line-height: 1.3;text-transform: normal;}
+
+.tox .tox-dialog__body{display: flex;min-width: 0;padding: 0 16px;font-size: 16px;font-style: normal;font-weight: 400;line-height: 1.3;color: #fff;text-align: left;text-transform: normal;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-nav{align-items: flex-start;display: flex;flex-direction: column;}
+
+.tox .tox-dialog__body-nav-item{display: inline-block;margin-bottom: 8px;font-size: 14px;line-height: 1.3;color: rgba(255,255,255,.5);text-decoration: none;border-bottom: 2px solid transparent;}
+
+.tox .tox-dialog__body-nav-item--active{color: #207ab7;border-bottom: 2px solid #207ab7;}
+
+.tox .tox-dialog__body-content{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;max-height: 650px;overflow: auto;}
+
+.tox .tox-dialog__body-content>*{margin-top: 16px;margin-bottom: 0;}
+
+.tox .tox-dialog__body-content>:first-child{margin-top: 0;}
+
+.tox .tox-dialog__body-content>:last-child{margin-bottom: 0;}
+
+.tox .tox-dialog__body-content>:only-child{margin-top: 0;margin-bottom: 0;}
+
+.tox .tox-dialog--width-lg{height: 650px;max-width: 1200px;}
+
+.tox .tox-dialog--width-md{max-width: 800px;}
+
+.tox .tox-dialog--width-md .tox-dialog__body-content{overflow: auto;}
+
+.tox .tox-dialog__body-content--centered{text-align: center;}
+
+.tox .tox-dialog__body-content--spacious{margin-bottom: 16px;}
+
+.tox .tox-dialog__footer{display: flex;padding: 8px 16px;margin-top: 16px;background-color: #2b3b4e;border-top: 1px solid #000;align-items: center;justify-content: space-between;}
+
+.tox .tox-dialog__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1103;display: flex;background-color: rgba(34,47,62,.75);align-items: center;justify-content: center;}
+
+.tox .tox-dialog__table{width: 100%;border-collapse: collapse;}
+
+.tox .tox-dialog__table thead th{padding-bottom: 8px;font-weight: 700;}
+
+.tox .tox-dialog__table tbody tr{border-bottom: 1px solid #000;}
+
+.tox .tox-dialog__table tbody tr:last-child{border-bottom: none;}
+
+.tox .tox-dialog__table td{padding-top: 8px;padding-bottom: 8px;}
+
+.tox .tox-dialog__popups{position: absolute;z-index: 1100;width: 100%;}
+
+.tox .tox-dialog__body-iframe{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-iframe .tox-navobj{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex: 1;-ms-flex-preferred-size: auto;height: 100%;}
+
+body.tox-dialog__disable-scroll{overflow: hidden;}
+
+.tox.tox-platform-ie .tox-dialog-wrap{position: -ms-device-fixed;}
+
+.tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right: 32px;}
+
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-dialog__body{text-align: right;}
+
+.tox[dir=rtl] .tox-dialog__body-nav{margin-left: 32px;}
+
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right: 8px;}
+
+.tox .tox-dropzone-container{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dropzone{display: flex;min-height: 100px;padding: 10px;background: #fff;border: 2px dashed #000;box-sizing: border-box;align-items: center;flex-direction: column;flex-grow: 1;justify-content: center;}
+
+.tox .tox-dropzone p{margin: 0 0 16px 0;color: rgba(255,255,255,.5);}
+
+.tox .tox-edit-area{position: relative;display: flex;overflow: hidden;border-top: 1px solid #000;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-edit-area__iframe{position: absolute;width: 100%;height: 100%;background-color: #fff;border: 0;box-sizing: border-box;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox.tox-inline-edit-area{border: 1px dotted #000;}
+
+.tox .tox-control-wrap{flex: 1;position: relative;}
+
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display: none;}
+
+.tox .tox-control-wrap svg{display: block;}
+
+.tox .tox-control-wrap__status-icon-wrap{position: absolute;top: 50%;transform: translateY(-50%);}
+
+.tox .tox-control-wrap__status-icon-invalid svg{fill: #c00;}
+
+.tox .tox-control-wrap__status-icon-unknown svg{fill: orange;}
+
+.tox .tox-control-wrap__status-icon-valid svg{fill: green;}
+
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right: 32px;}
+
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right: 4px;}
+
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left: 32px;}
+
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left: 4px;}
+
+.tox .tox-autocompleter{max-width: 25em;}
+
+.tox .tox-autocompleter .tox-menu{max-width: 25em;}
+
+.tox .tox-color-input{display: flex;}
+
+.tox .tox-color-input .tox-textfield{display: flex;border-radius: 3px 0 0 3px;}
+
+.tox .tox-color-input span{display: flex;width: 35px;cursor: pointer;border-color: rgba(34,47,62,.2);border-style: solid;border-width: 1px 1px 1px 0;border-radius: 0 3px 3px 0;box-shadow: none;box-sizing: border-box;}
+
+.tox .tox-color-input span:focus{border-color: #207ab7;}
+
+.tox[dir=rtl] .tox-color-input .tox-textfield{border-radius: 0 3px 3px 0;}
+
+.tox[dir=rtl] .tox-color-input span{border-width: 1px 0 1px 1px;border-radius: 3px 0 0 3px;}
+
+.tox .tox-label,.tox .tox-toolbar-label{display: block;padding: 0 8px 0 0;font-size: 14px;font-style: normal;font-weight: 400;line-height: 1.3;color: rgba(255,255,255,.5);text-transform: normal;white-space: nowrap;}
+
+.tox .tox-toolbar-label{padding: 0 8px;}
+
+.tox[dir=rtl] .tox-label{padding: 0 0 0 8px;}
+
+.tox .tox-form{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group{margin-bottom: 4px;box-sizing: border-box;}
+
+.tox .tox-form__group--error{color: #c00;}
+
+.tox .tox-form__group--collection{display: flex;}
+
+.tox .tox-form__grid{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
+
+.tox .tox-form__grid--2col>.tox-form__group{width: calc(50% - (8px / 2));}
+
+.tox .tox-form__grid--3col>.tox-form__group{width: calc(100% / 3 - (8px / 2));}
+
+.tox .tox-form__grid--4col>.tox-form__group{width: calc(25% - (8px / 2));}
+
+.tox .tox-form__controls-h-stack{align-items: center;display: flex;}
+
+.tox .tox-form__group--inline{align-items: center;display: flex;}
+
+.tox .tox-form__group--stretched{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-textarea{flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-navobj{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex: 1;-ms-flex-preferred-size: auto;height: 100%;}
+
+.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left: 4px;}
+
+.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right: 4px;}
+
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display: none;}
+
+.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield,.tox:not([dir=rtl]) .tox-selectfield select,.tox[dir=rtl] .tox-selectfield select{width: 100%;padding: 5px 4.75px;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;line-height: 24px;color: #fff;background-color: #2b3b4e;border-color: #000;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;box-sizing: border-box;resize: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
+
+.tox .tox-selectfield select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{border-color: #207ab7;outline: 0;box-shadow: none;}
+
+.tox .tox-toolbar-textfield{max-width: 250px;margin-top: 2px;margin-bottom: 3px;border-width: 0;}
+
+.tox .tox-naked-btn{display: block;padding: 0;margin: 0;color: #207ab7;cursor: pointer;background-color: transparent;border: 0;border-color: transparent;box-shadow: unset;}
+
+.tox .tox-naked-btn svg{display: block;fill: #fff;}
+
+.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right: 4px;}
+
+.tox .tox-selectfield{position: relative;cursor: pointer;}
+
+.tox .tox-selectfield select::-ms-expand{display: none;}
+
+.tox .tox-selectfield svg{position: absolute;top: 50%;pointer-events: none;transform: translateY(-50%);}
+
+.tox:not([dir=rtl]) .tox-selectfield select{padding-right: 24px;}
+
+.tox:not([dir=rtl]) .tox-selectfield svg{right: 8px;}
+
+.tox[dir=rtl] .tox-selectfield select{padding-left: 24px;}
+
+.tox[dir=rtl] .tox-selectfield svg{left: 8px;}
+
+.tox .tox-textarea{white-space: pre-wrap;-webkit-appearance: textarea;-moz-appearance: textarea;appearance: textarea;}
+
+.tox-fullscreen{position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;border: 0;}
+
+.tox-fullscreen .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display: none;}
+
+.tox-fullscreen .tox.tox-tinymce.tox-fullscreen{z-index: 1200;}
+
+.tox-fullscreen .tox.tox-tinymce-aux{z-index: 1201;}
+
+.tox .tox-image-tools{width: 100%;}
+
+.tox .tox-image-tools__toolbar{align-items: center;display: flex;justify-content: center;}
+
+.tox .tox-image-tools__image{position: relative;width: 100%;height: 380px;overflow: auto;background-color: #666;}
+
+.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top: 8px;}
+
+.tox .tox-image-tools__image-bg{background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);}
+
+.tox .tox-image-tools__toolbar>.tox-spacer{flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-croprect-block{position: absolute;background: #000;opacity: .5;zoom: 1;}
+
+.tox .tox-croprect-handle{position: absolute;top: 0;left: 0;width: 20px;height: 20px;border: 2px solid #fff;}
+
+.tox .tox-croprect-handle-move{position: absolute;cursor: move;border: 0;}
+
+.tox .tox-croprect-handle-nw{top: 100px;left: 100px;margin: -2px 0 0 -2px;cursor: nw-resize;border-width: 2px 0 0 2px;}
+
+.tox .tox-croprect-handle-ne{top: 100px;left: 200px;margin: -2px 0 0 -20px;cursor: ne-resize;border-width: 2px 2px 0 0;}
+
+.tox .tox-croprect-handle-sw{top: 200px;left: 100px;margin: -20px 2px 0 -2px;cursor: sw-resize;border-width: 0 0 2px 2px;}
+
+.tox .tox-croprect-handle-se{top: 200px;left: 200px;margin: -20px 0 0 -20px;cursor: se-resize;border-width: 0 2px 2px 0;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left: 32px;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left: 32px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right: 8px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right: 32px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right: 32px;}
+
+.tox .tox-insert-table-picker{display: flex;flex-wrap: wrap;width: 169px;}
+
+.tox .tox-insert-table-picker>div{width: 16px;height: 16px;border-color: #070a0d;border-style: solid;border-width: 0 1px 1px 0;box-sizing: content-box;}
+
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin: -4px 0;}
+
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color: rgba(32,122,183,.5);border-color: rgba(32,122,183,.5);}
+
+.tox .tox-insert-table-picker__label{display: block;width: 100%;padding: 4px;font-size: 14px;color: #fff;text-align: center;}
+
+.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right: 0;}
+
+.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right: 0;}
+
+.tox .tox-menu{z-index: 1;display: inline-block;overflow: hidden;vertical-align: top;background-color: #2b3b4e;border: 1px solid #000;border-radius: 3px;box-shadow: 0 4px 8px 0 rgba(34,47,62,.1);}
+
+.tox .tox-menu.tox-collection.tox-collection--list{padding: 0;}
+
+.tox .tox-menu.tox-collection.tox-collection--toolbar{padding: 4px;}
+
+.tox .tox-menu.tox-collection.tox-collection--grid{padding: 4px;}
+
+.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin: 0;}
+
+.tox .tox-menubar{display: flex;padding: 0 4px;margin-bottom: -1px;background: url("data:image/svg+xml;charset=utf8,%3Csvg height='43px' viewBox='0 0 40 43px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='42px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color: #222f3e;flex: 0 0 auto;flex-shrink: 0;flex-wrap: wrap;}
+
+.tox .tox-mbtn{display: flex;width: auto;height: 34px;padding: 0 4px;margin: 2px 0 3px 0;overflow: hidden;font-size: 14px;font-style: normal;font-weight: 400;color: #fff;text-transform: normal;background: 0 0;border: 0;border-radius: 3px;outline: 0;box-shadow: none;align-items: center;flex: 0 0 auto;justify-content: center;}
+
+.tox .tox-mbtn[disabled]{color: rgba(255,255,255,.5);cursor: not-allowed;background-color: none;border-color: none;box-shadow: none;}
+
+.tox .tox-mbtn:hover:not(:disabled){color: #fff;background: #434e5b;box-shadow: none;}
+
+.tox .tox-mbtn:focus:not(:disabled){color: #fff;background: #434e5b;box-shadow: none;}
+
+.tox .tox-mbtn--active{color: #fff;background: #6f7882;box-shadow: none;}
+
+.tox .tox-mbtn__select-label{margin: 0 4px;font-weight: 400;cursor: default;}
+
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor: not-allowed;}
+
+.tox .tox-mbtn__select-chevron{display: flex;display: none;width: 16px;align-items: center;justify-content: center;}
+
+.tox .tox-notification{display: grid;padding: 5px;margin-top: 5px;background-color: #fffaea;border-color: #ffe89d;border-style: solid;border-width: 1px;opacity: 0;box-sizing: border-box;transition: transform .1s ease-in,opacity 150ms ease-in;grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr);}
+
+.tox .tox-notification--in{opacity: 1;}
+
+.tox .tox-notification--success{background-color: #dff0d8;border-color: #d6e9c6;}
+
+.tox .tox-notification--error{background-color: #f2dede;border-color: #ebccd1;}
+
+.tox .tox-notification--warn{background-color: #fcf8e3;border-color: #faebcc;}
+
+.tox .tox-notification--info{background-color: #d9edf7;border-color: #779ecb;}
+
+.tox .tox-notification__body{font-size: 14px;color: #fff;text-align: center;word-break: break-all;word-break: break-word;white-space: normal;align-self: center;grid-column-end: 3;-ms-grid-column-span: 1;grid-column-start: 2;grid-row-end: 2;grid-row-start: 1;}
+
+.tox .tox-notification__body>*{margin: 0;}
+
+.tox .tox-notification__body>*+*{margin-top: 1rem;}
+
+.tox .tox-notification__icon{align-self: center;-ms-grid-column-align: end;grid-column-end: 2;-ms-grid-column-span: 1;grid-column-start: 1;grid-row-end: 2;grid-row-start: 1;justify-self: end;}
+
+.tox .tox-notification__icon svg{display: block;}
+
+.tox .tox-notification__dismiss{align-self: start;-ms-grid-column-align: end;grid-column-end: 4;-ms-grid-column-span: 1;grid-column-start: 3;grid-row-end: 2;grid-row-start: 1;justify-self: end;}
+
+.tox .tox-notification .tox-progress-bar{-ms-grid-column-align: center;grid-column-end: 4;-ms-grid-column-span: 3;grid-column-start: 1;grid-row-end: 3;-ms-grid-row-span: 1;grid-row-start: 2;justify-self: center;}
+
+.tox .tox-pop{position: relative;display: inline-block;}
+
+.tox .tox-pop--resizing{transition: width .1s ease;}
+
+.tox .tox-pop--resizing .tox-toolbar{flex-wrap: nowrap;}
+
+.tox .tox-pop__dialog{min-width: 0;overflow: hidden;background-color: #222f3e;border: 1px solid #000;border-radius: 3px;box-shadow: 0 1px 3px rgba(0,0,0,.15);}
+
+.tox .tox-pop__dialog>:not(.tox-toolbar){margin: 4px 4px 4px 8px;}
+
+.tox .tox-pop__dialog .tox-toolbar{background-color: transparent;}
+
+.tox .tox-pop::after,.tox .tox-pop::before{position: absolute;display: block;width: 0;height: 0;border-style: solid;content: '';}
+
+.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{top: 100%;left: 50%;}
+
+.tox .tox-pop.tox-pop--bottom::after{margin-top: -1px;margin-left: -8px;border-color: #222f3e transparent transparent transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--bottom::before{margin-left: -9px;border-color: #000 transparent transparent transparent;border-width: 9px;}
+
+.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{top: 0;left: 50%;transform: translateY(-100%);}
+
+.tox .tox-pop.tox-pop--top::after{margin-top: 1px;margin-left: -8px;border-color: transparent transparent #222f3e transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--top::before{margin-left: -9px;border-color: transparent transparent #000 transparent;border-width: 9px;}
+
+.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{top: calc(50% - 1px);left: 0;transform: translateY(-50%);}
+
+.tox .tox-pop.tox-pop--left::after{margin-left: -15px;border-color: transparent #222f3e transparent transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--left::before{margin-left: -19px;border-color: transparent #000 transparent transparent;border-width: 10px;}
+
+.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{top: calc(50% + 1px);left: 100%;transform: translateY(-50%);}
+
+.tox .tox-pop.tox-pop--right::after{margin-left: -1px;border-color: transparent transparent transparent #222f3e;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--right::before{margin-left: -1px;border-color: transparent transparent transparent #000;border-width: 10px;}
+
+.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left: 20px;}
+
+.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left: calc(100% - 20px);}
+
+.tox .tox-sidebar-wrap{display: flex;flex-direction: row;flex-grow: 1;min-height: 0;}
+
+.tox .tox-sidebar{display: flex;flex-direction: row;justify-content: flex-end;}
+
+.tox .tox-sidebar__slider{display: flex;overflow: hidden;}
+
+.tox .tox-sidebar__pane-container{display: flex;}
+
+.tox .tox-sidebar__pane{display: flex;}
+
+.tox .tox-sidebar--sliding-closed{opacity: 0;}
+
+.tox .tox-sidebar--sliding-open{opacity: 1;}
+
+.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition: width .5s ease,opacity .5s ease;}
+
+.tox .tox-slider{position: relative;display: flex;height: 24px;align-items: center;flex: 1;-ms-flex-preferred-size: auto;justify-content: center;}
+
+.tox .tox-slider__rail{width: 100%;height: 10px;min-width: 120px;background-color: transparent;border: 1px solid #000;border-radius: 3px;}
+
+.tox .tox-slider__handle{position: absolute;top: 50%;left: 50%;width: 14px;height: 24px;background-color: #207ab7;border: 2px solid #185d8c;border-radius: 3px;transform: translateX(-50%) translateY(-50%);box-shadow: none;}
+
+.tox .tox-source-code{overflow: auto;}
+
+.tox .tox-spinner{display: flex;}
+
+.tox .tox-spinner>div{width: 8px;height: 8px;background-color: rgba(255,255,255,.5);border-radius: 100%;animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;}
+
+.tox .tox-spinner>div:nth-child(1){animation-delay: -.32s;}
+
+.tox .tox-spinner>div:nth-child(2){animation-delay: -.16s;}@keyframes tam-bouncing-dots{0%,100%,80%{transform: scale(0);}
+
+40%{transform: scale(1);}}
+
+.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left: 4px;}
+
+.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right: 4px;}
+
+.tox .tox-statusbar{position: relative;display: flex;height: 18px;padding: 0 8px;overflow: hidden;font-size: 12px;color: rgba(255,255,255,.5);text-transform: uppercase;background-color: #222f3e;border-top: 1px solid #000;align-items: center;flex: 0 0 auto;}
+
+.tox .tox-statusbar a{color: rgba(255,255,255,.5);text-decoration: none;}
+
+.tox .tox-statusbar a:hover{text-decoration: underline;}
+
+.tox .tox-statusbar__text-container{display: flex;flex: 1 1 auto;justify-content: flex-end;overflow: hidden;}
+
+.tox .tox-statusbar__path{display: flex;flex: 1 1 auto;margin-right: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+.tox .tox-statusbar__path>*{display: inline;white-space: nowrap;}
+
+.tox .tox-statusbar__wordcount{flex: 0 0 auto;margin-left: 1ch;}
+
+.tox .tox-statusbar__resize-handle{display: flex;padding-left: 1ch;margin-right: -8px;margin-left: auto;cursor: nwse-resize;align-items: flex-end;align-self: stretch;flex: 0 0 auto;justify-content: flex-end;}
+
+.tox .tox-statusbar__resize-handle svg{display: block;fill: rgba(255,255,255,.5);}
+
+.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right: 4px;}
+
+.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left: 1ch;}
+
+.tox[dir=rtl] .tox-statusbar{flex-direction: row-reverse;}
+
+.tox[dir=rtl] .tox-statusbar__path>*{margin-left: 4px;}
+
+.tox .tox-throbber{z-index: 1400;}
+
+.tox .tox-throbber__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;background-color: rgba(34,47,62,.6);align-items: center;justify-content: center;}
+
+.tox .tox-tbtn{display: flex;width: 34px;height: 34px;padding: 0;margin: 2px 0 3px 0;overflow: hidden;font-size: 14px;font-style: normal;font-weight: 400;color: #fff;text-transform: normal;background: 0 0;border: 0;border-radius: 3px;outline: 0;box-shadow: none;align-items: center;flex: 0 0 auto;justify-content: center;}
+
+.tox .tox-tbtn svg{display: block;fill: #fff;}
+
+.tox .tox-tbtn.tox-tbtn-more{width: inherit;padding-right: 5px;padding-left: 5px;}
+
+.tox .tox-tbtn--enabled{color: #fff;background: #6f7882;box-shadow: none;}
+
+.tox .tox-tbtn--enabled>*{transform: none;}
+
+.tox .tox-tbtn--enabled svg{fill: #fff;}
+
+.tox .tox-tbtn:hover{color: #fff;background: #434e5b;box-shadow: none;}
+
+.tox .tox-tbtn:hover svg{fill: #fff;}
+
+.tox .tox-tbtn:focus{color: #fff;background: #434e5b;box-shadow: none;}
+
+.tox .tox-tbtn:focus svg{fill: #fff;}
+
+.tox .tox-tbtn:active{color: #fff;background: #6f7882;box-shadow: none;}
+
+.tox .tox-tbtn:active svg{fill: #fff;}
+
+.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{color: rgba(255,255,255,.5);cursor: not-allowed;background: 0 0;box-shadow: none;}
+
+.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill: rgba(255,255,255,.5);}
+
+.tox .tox-tbtn:active>*{transform: none;}
+
+.tox .tox-tbtn--md{width: 51px;height: 51px;}
+
+.tox .tox-tbtn--lg{width: 68px;height: 68px;flex-direction: column;}
+
+.tox .tox-tbtn--return{width: 16px;height: unset;align-self: stretch;}
+
+.tox .tox-tbtn--labeled{width: unset;padding: 0 4px;}
+
+.tox .tox-tbtn__vlabel{display: block;margin-bottom: 4px;font-size: 10px;font-weight: 400;letter-spacing: -.025em;white-space: nowrap;}
+
+.tox .tox-tbtn--select{width: auto;padding: 0 4px;margin: 2px 0 3px 0;}
+
+.tox .tox-tbtn__select-label{margin: 0 4px;font-weight: 400;cursor: default;}
+
+.tox .tox-tbtn__select-chevron{align-items: center;display: flex;justify-content: center;width: 16px;}
+
+.tox .tox-tbtn__select-chevron svg{fill: rgba(255,255,255,.5);}
+
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label{width: 7em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+.tox .tox-split-button{display: flex;margin: 2px 0 3px 0;overflow: hidden;border: 0;border-radius: 3px;box-sizing: border-box;}
+
+.tox .tox-split-button:hover{box-shadow: 0 0 0 1px #434e5b inset;}
+
+.tox .tox-split-button:focus{color: #fff;background: #434e5b;box-shadow: none;}
+
+.tox .tox-split-button>*{border-radius: 0;}
+
+.tox .tox-split-button__chevron{width: 16px;}
+
+.tox .tox-split-button__chevron svg{fill: rgba(255,255,255,.5);}
+
+.tox .tox-pop .tox-split-button__chevron svg{transform: rotate(-90deg);}
+
+.tox .tox-split-button .tox-tbtn{margin: 0;}
+
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{color: rgba(255,255,255,.5);background: 0 0;box-shadow: none;}
+
+.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{display: flex;padding: 0 0;margin-bottom: -1px;background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color: #222f3e;border-top: 1px solid #000;flex: 0 0 auto;flex-shrink: 0;flex-wrap: wrap;}
+
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height: 0;opacity: 0;visibility: hidden;}
+
+.tox .tox-toolbar__overflow--growing{transition: height .3s ease,opacity .2s linear .1s;}
+
+.tox .tox-toolbar__overflow--shrinking{transition: opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s;}
+
+.tox .tox-pop .tox-toolbar{border-width: 0;}
+
+.tox .tox-toolbar--no-divider{background-image: none;}
+
+.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color: #222f3e;border: 1px solid #000;border-radius: 3px;box-shadow: 0 1px 3px rgba(0,0,0,.15);}
+
+.tox.tox-tinymce-aux:not([dir=rtl]) .tox-toolbar__overflow{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-tbtn__icon-rtl svg{transform: rotateY(180deg);}
+
+.tox[dir=rtl].tox-tinymce-aux .tox-toolbar__overflow{margin-right: 4px;}
+
+.tox .tox-toolbar__group{display: flex;padding: 0 4px;margin: 0 0;align-items: center;flex-wrap: wrap;}
+
+.tox .tox-toolbar__group--pull-right{margin-left: auto;}
+
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right: 1px solid #000;}
+
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left: 1px solid #000;}
+
+.tox .tox-tooltip{position: relative;display: inline-block;padding: 8px;}
+
+.tox .tox-tooltip__body{padding: 4px 8px;font-size: 14px;font-style: normal;font-weight: 400;color: rgba(255,255,255,.75);text-transform: normal;background-color: #3d546f;border-radius: 3px;box-shadow: 0 2px 4px rgba(34,47,62,.3);}
+
+.tox .tox-tooltip__arrow{position: absolute;}
+
+.tox .tox-tooltip--down .tox-tooltip__arrow{position: absolute;bottom: 0;left: 50%;border-top: 8px solid #3d546f;border-right: 8px solid transparent;border-left: 8px solid transparent;transform: translateX(-50%);}
+
+.tox .tox-tooltip--up .tox-tooltip__arrow{position: absolute;top: 0;left: 50%;border-right: 8px solid transparent;border-bottom: 8px solid #3d546f;border-left: 8px solid transparent;transform: translateX(-50%);}
+
+.tox .tox-tooltip--right .tox-tooltip__arrow{position: absolute;top: 50%;right: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #3d546f;transform: translateY(-50%);}
+
+.tox .tox-tooltip--left .tox-tooltip__arrow{position: absolute;top: 50%;left: 0;border-top: 8px solid transparent;border-right: 8px solid #3d546f;border-bottom: 8px solid transparent;transform: translateY(-50%);}
+
+.tox .tox-well{width: 100%;padding: 8px;border: 1px solid #000;border-radius: 3px;}
+
+.tox .tox-well>:first-child{margin-top: 0;}
+
+.tox .tox-well>:last-child{margin-bottom: 0;}
+
+.tox .tox-well>:only-child{margin: 0;}
+
+.tox .tox-custom-editor{display: flex;height: 525px;border: 1px solid #000;border-radius: 3px;}
+
+.tox .tox-dialog-loading::before{position: absolute;z-index: 1000;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);content: "";}
+
+.tox .tox-tab{cursor: pointer;}
+
+.tox .tox-dialog__content-js{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-content .tox-collection{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox ul{display: block;list-style-type: disc;-webkit-margin-before: 1em;margin-block-start: 1em;-webkit-margin-after: 1em;margin-block-end: 1em;-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: 0;margin-inline-end: 0;-webkit-padding-start: 40px;padding-inline-start: 40px;}
+
+.tox a{color: #2276d2;cursor: pointer;}
+
+.tox .tox-image-tools-edit-panel{height: 60px;}
+
+.tox .tox-image-tools__sidebar{height: 60px;}
diff --git a/public/resource/tinymce/skins/ui/oxide-dark/skin.mobile.min.css b/public/resource/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
new file mode 100644
index 0000000..14847d0
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all: initial;display: block;}
+
+.tinymce-mobile-outer-container *{float: none;padding: 0;margin: 0;line-height: 1;text-shadow: none;white-space: nowrap;cursor: inherit;border: 0;outline: 0;box-sizing: initial;-webkit-tap-highlight-color: transparent;}
+
+.tinymce-mobile-icon-arrow-back::before{content: "\e5cd";}
+
+.tinymce-mobile-icon-image::before{content: "\e412";}
+
+.tinymce-mobile-icon-cancel-circle::before{content: "\e5c9";}
+
+.tinymce-mobile-icon-full-dot::before{content: "\e061";}
+
+.tinymce-mobile-icon-align-center::before{content: "\e234";}
+
+.tinymce-mobile-icon-align-left::before{content: "\e236";}
+
+.tinymce-mobile-icon-align-right::before{content: "\e237";}
+
+.tinymce-mobile-icon-bold::before{content: "\e238";}
+
+.tinymce-mobile-icon-italic::before{content: "\e23f";}
+
+.tinymce-mobile-icon-unordered-list::before{content: "\e241";}
+
+.tinymce-mobile-icon-ordered-list::before{content: "\e242";}
+
+.tinymce-mobile-icon-font-size::before{content: "\e245";}
+
+.tinymce-mobile-icon-underline::before{content: "\e249";}
+
+.tinymce-mobile-icon-link::before{content: "\e157";}
+
+.tinymce-mobile-icon-unlink::before{content: "\eca2";}
+
+.tinymce-mobile-icon-color::before{content: "\e891";}
+
+.tinymce-mobile-icon-previous::before{content: "\e314";}
+
+.tinymce-mobile-icon-next::before{content: "\e315";}
+
+.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content: "\e264";}
+
+.tinymce-mobile-icon-undo::before{content: "\e166";}
+
+.tinymce-mobile-icon-redo::before{content: "\e15a";}
+
+.tinymce-mobile-icon-removeformat::before{content: "\e239";}
+
+.tinymce-mobile-icon-small-font::before{content: "\e906";}
+
+.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content: "\e5ca";}
+
+.tinymce-mobile-icon-small-heading::before{content: "small";}
+
+.tinymce-mobile-icon-large-heading::before{content: "large";}
+
+.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family: sans-serif;font-size: 80%;}
+
+.tinymce-mobile-mask-edit-icon::before{content: "\e254";}
+
+.tinymce-mobile-icon-back::before{content: "\e5c4";}
+
+.tinymce-mobile-icon-heading::before{font-family: sans-serif;font-size: 80%;font-weight: 700;content: "Headings";}
+
+.tinymce-mobile-icon-h1::before{font-weight: 700;content: "H1";}
+
+.tinymce-mobile-icon-h2::before{font-weight: 700;content: "H2";}
+
+.tinymce-mobile-icon-h3::before{font-weight: 700;content: "H3";}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{position: absolute;top: 0;display: flex;width: 100%;height: 100%;background: rgba(51,51,51,.5);align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{display: flex;font-family: sans-serif;font-size: 1em;border-radius: 50%;align-items: center;flex-direction: column;justify-content: space-between;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{display: flex;width: 2.1em;height: 2.1em;border-radius: 50%;align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items: center;display: flex;justify-content: center;flex-direction: column;font-size: 1em;}@media only screen and (min-device-width: 700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size: 1.2em;}}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{display: flex;width: 2.1em;height: 2.1em;color: #207ab7;background-color: #fff;border-radius: 50%;align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{font-family: tinymce-mobile,sans-serif;content: "\e900";}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index: 2;}
+
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized{position: fixed;top: 0;right: 0;bottom: 0;left: 0;display: flex;background: #fff;border: none;flex-direction: column;}
+
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position: relative;}
+
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display: flex;flex-grow: 1;}
+
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display: flex !important;flex-grow: 1;height: auto !important;}
+
+.tinymce-mobile-android-scroll-reload{overflow: hidden;}
+
+:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top: 23px;}
+
+.tinymce-mobile-toolstrip{z-index: 1;display: flex;background: #fff;flex: 0 0 auto;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{display: flex;width: 100%;height: 2.5em;background-color: #fff;border-bottom: 1px solid #ccc;align-items: center;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items: center;display: flex;height: 100%;flex-shrink: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items: center;display: flex;height: 100%;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background: #f44336;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-right: .5em;padding-left: .5em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{display: flex;height: 80%;margin-right: 2px;margin-left: 2px;align-items: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{color: #ccc;background: #c8cbcf;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{color: #eceff1;background: #207ab7;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{display: flex;height: 100%;padding-top: .4em;padding-bottom: .4em;align-items: center;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{position: relative;display: flex;width: 100%;min-height: 1.5em;padding-right: 0;padding-left: 0;overflow: hidden;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display: flex;width: 100%;height: 100%;transition: left cubic-bezier(.4,0,1,1) .15s;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display: flex;flex: 0 0 auto;justify-content: space-between;width: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family: sans-serif;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{position: relative;display: flex;flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{position: absolute;right: 0;height: 100%;padding-right: 2px;font-size: .6em;font-weight: 700;color: #888;background: inherit;border: none;border-radius: 50%;align-self: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display: none;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items: center;display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{display: flex;height: 100%;padding-right: .5em;padding-left: .5em;font-weight: 700;align-items: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility: hidden;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{padding-top: 3px;margin: 0 2px;font-size: 10px;line-height: 10px;color: #ccc;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color: #c8cbcf;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-right: .9em;margin-left: .5em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-right: .5em;margin-left: .9em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{position: relative;display: flex;padding: .28em 0;margin-right: 0;margin-left: 0;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items: center;display: flex;flex-grow: 1;height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{display: flex;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #ccc;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-right: 2em;padding-left: 2em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items: center;display: flex;flex-grow: 1;height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{display: flex;height: .2em;margin-top: .3em;margin-bottom: .3em;background: linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{width: 1.2em;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #000;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{width: 1.2em;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #fff;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{position: absolute;top: 0;bottom: 0;left: -10px;display: flex;width: .5em;height: .5em;margin: auto;color: #fff;background-color: #455a64;border: .5em solid rgba(136,136,136,0);border-radius: 3em;transition: border 120ms cubic-bezier(.39,.58,.57,1);background-clip: padding-box;align-items: center;justify-content: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border: .5em solid rgba(136,136,136,.39);}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items: center;display: flex;height: 100%;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction: column;justify-content: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items: center;display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{padding-top: .1em;padding-bottom: .1em;padding-left: 5px;font-size: .85em;color: #455a64;background: #fff;border: none;border-radius: 0;flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color: #888;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color: #888;}
+
+.tinymce-mobile-dropup{display: flex;width: 100%;overflow: hidden;background: #fff;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition: height .3s ease-out;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition: height .3s ease-in;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow: 0;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow: 1;}
+
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 200px;}@media only screen and (orientation: landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 200px;}}@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 150px;}}
+
+.tinymce-mobile-styles-menu{position: relative;width: 100%;overflow: hidden;font-family: sans-serif;outline: 4px solid #000;}
+
+.tinymce-mobile-styles-menu [role=menu]{position: absolute;display: flex;width: 100%;height: 100%;flex-direction: column;}
+
+.tinymce-mobile-styles-menu [role=menu].transitioning{transition: transform .5s ease-in-out;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{position: relative;display: flex;padding: 1em 1em;color: #455a64;cursor: pointer;border-bottom: 1px solid #ddd;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{font-family: tinymce-mobile,sans-serif;color: #455a64;content: "\e314";}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{position: absolute;right: 0;padding-right: 1em;padding-left: 1em;font-family: tinymce-mobile,sans-serif;color: #455a64;content: "\e315";}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{position: absolute;right: 0;padding-right: 1em;padding-left: 1em;font-family: tinymce-mobile,sans-serif;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{display: flex;min-height: 2.5em;padding-right: 1em;padding-left: 1em;color: #455a64;background: #fff;border-top: #455a64;align-items: center;}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform: translate(-100%);}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform: translate(0);}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform: translate(100%);}@font-face{font-family: tinymce-mobile;font-style: normal;font-weight: 400;src: url(fonts/tinymce-mobile.woff?8x92w3) format('woff');}@media (min-device-width: 700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size: 25px;}}@media (max-device-width: 700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size: 18px;}}
+
+.tinymce-mobile-icon{font-family: tinymce-mobile,sans-serif;}
+
+.mixin-flex-and-centre{align-items: center;display: flex;justify-content: center;}
+
+.mixin-flex-bar{align-items: center;display: flex;height: 100%;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{width: 100%;background-color: #fff;}
+
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{position: fixed;right: 2em;bottom: 1em;display: flex;width: 2.1em;height: 2.1em;font-size: 1em;color: #fff;background-color: #207ab7;border-radius: 50%;align-items: center;justify-content: center;}@media only screen and (min-device-width: 700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size: 1.2em;}}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height: 300px;overflow: hidden;}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height: 100%;}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display: none;}
+
+input[type=file]::-webkit-file-upload-button{display: none;}@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom: 50%;}}
diff --git a/public/resource/tinymce/skins/ui/oxide/content.inline.min.css b/public/resource/tinymce/skins/ui/oxide/content.inline.min.css
new file mode 100644
index 0000000..748f313
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide/content.inline.min.css
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{display: inline-block;width: 8px !important;height: 12px !important;padding: 0 2px;cursor: default;background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;-webkit-user-modify: read-only;-moz-user-modify: read-only;}
+
+.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset: 1px;}
+
+.tox-comments-visible .tox-comment{background-color: #fff0b7;}
+
+.tox-comments-visible .tox-comment--active{background-color: #ffe168;}
+
+.tox-checklist>li:not(.tox-checklist--hidden){margin: .25em 0;list-style: none;}
+
+.tox-checklist>li:not(.tox-checklist--hidden)::before{position: absolute;width: 1em;height: 1em;margin-top: .125em;margin-left: -1.5em;cursor: pointer;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");background-size: 100%;content: '';}
+
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");}
+
+[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-right: -1.5em;margin-left: 0;}
+
+code[class*=language-],pre[class*=language-]{font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size: .875rem;-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;line-height: 1.5;word-spacing: normal;color: #000;text-shadow: 0 1px #fff;word-break: normal;word-wrap: normal;white-space: pre;-moz-tab-size: 4;tab-size: 4;}
+
+code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow: none;background: #b3d4fc;}
+
+code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow: none;background: #b3d4fc;}@media print{code[class*=language-],pre[class*=language-]{text-shadow: none;}}
+
+pre[class*=language-]{padding: 1em;margin: .5em 0;overflow: auto;}
+
+:not(pre)>code[class*=language-],pre[class*=language-]{background: 0 0 !important;border: 1px solid #ccc;}
+
+:not(pre)>code[class*=language-]{padding: .1em;border-radius: .3em;}
+
+.token.cdata,.token.comment,.token.doctype,.token.prolog{color: #708090;}
+
+.token.punctuation{color: #999;}
+
+.namespace{opacity: .7;}
+
+.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color: #905;}
+
+.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color: #690;}
+
+.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color: #a67f59;background: hsla(0,0%,100%,.5);}
+
+.token.atrule,.token.attr-value,.token.keyword{color: #07a;}
+
+.token.function{color: #dd4a68;}
+
+.token.important,.token.regex,.token.variable{color: #e90;}
+
+.token.bold,.token.important{font-weight: 700;}
+
+.token.italic{font-style: italic;}
+
+.token.entity{cursor: help;}
+
+:not([dir=rtl]) code[class*=language-],:not([dir=rtl]) pre[class*=language-]{text-align: left;direction: ltr;}
+
+[dir=rtl] code[class*=language-],[dir=rtl] pre[class*=language-]{text-align: right;direction: rtl;}
+
+.mce-content-body{overflow-wrap: break-word;word-wrap: break-word;}
+
+.mce-content-body .mce-visual-caret{position: absolute;background-color: #000;background-color: currentColor;}
+
+.mce-content-body .mce-visual-caret-hidden{display: none;}
+
+.mce-content-body [data-mce-caret]{position: absolute;top: 0;right: auto;left: -1000px;padding: 0;margin: 0;}
+
+.mce-content-body .mce-offscreen-selection{position: absolute;left: -9999999999px;max-width: 1000000px;}
+
+.mce-content-body [contentEditable=false]{cursor: default;}
+
+.mce-content-body [contentEditable=true]{cursor: text;}
+
+.tox-cursor-format-painter{cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default;}
+
+.mce-content-body figure.align-left{float: left;}
+
+.mce-content-body figure.align-right{float: right;}
+
+.mce-content-body figure.image.align-center{display: table;margin-right: auto;margin-left: auto;}
+
+.mce-preview-object{position: relative;display: inline-block;margin: 0 2px 0 2px;line-height: 0;border: 1px solid gray;}
+
+.mce-preview-object .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.mce-preview-object[data-mce-selected="2"] .mce-shim{display: none;}
+
+.mce-object{background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border: 1px dashed #aaa;}
+
+.mce-pagebreak{display: block;width: 100%;height: 5px;margin-top: 15px;cursor: default;border: 1px dashed #aaa;page-break-before: always;}@media print{.mce-pagebreak{border: 0;}}
+
+.tiny-pageembed .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.tiny-pageembed[data-mce-selected="2"] .mce-shim{display: none;}
+
+.tiny-pageembed{position: relative;display: inline-block;}
+
+.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{position: relative;display: block;width: 100%;padding: 0;overflow: hidden;}
+
+.tiny-pageembed--16by9::before,.tiny-pageembed--1by1::before,.tiny-pageembed--21by9::before,.tiny-pageembed--4by3::before{display: block;content: "";}
+
+.tiny-pageembed--21by9::before{padding-top: 42.857143%;}
+
+.tiny-pageembed--16by9::before{padding-top: 56.25%;}
+
+.tiny-pageembed--4by3::before{padding-top: 75%;}
+
+.tiny-pageembed--1by1::before{padding-top: 100%;}
+
+.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}
+
+.mce-content-body div.mce-resizehandle{position: absolute;z-index: 10000;width: 10px;height: 10px;background-color: #4099ff;border-color: #4099ff;border-style: solid;border-width: 1px;box-sizing: border-box;}
+
+.mce-content-body div.mce-resizehandle:hover{background-color: #4099ff;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor: nesw-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor: nesw-resize;}
+
+.mce-content-body .mce-clonedresizable{position: absolute;z-index: 10000;outline: 1px dashed #000;opacity: .5;}
+
+.mce-content-body .mce-resize-helper{position: absolute;z-index: 10001;display: none;padding: 5px;margin: 5px 10px;font-family: sans-serif;font-size: 12px;line-height: 14px;color: #fff;white-space: nowrap;background: #555;background: rgba(0,0,0,.75);border: 1px;border-radius: 3px;}
+
+.mce-match-marker{color: #fff;background: #aaa;}
+
+.mce-match-marker-selected{color: #fff;background: #39f;}
+
+.mce-content-body img[data-mce-selected],.mce-content-body table[data-mce-selected]{outline: 3px solid #b4d7ff;}
+
+.mce-content-body hr[data-mce-selected]{outline: 3px solid #b4d7ff;outline-offset: 1px;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false][data-mce-selected]{cursor: not-allowed;outline: 3px solid #b4d7ff;}
+
+.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline: 0;}
+
+.mce-content-body [data-mce-selected=inline-boundary]{background-color: #b4d7ff;}
+
+.mce-content-body .mce-edit-focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{background-color: #b4d7ff !important;}
+
+.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
+
+.mce-content-body img::-moz-selection{background: 0 0;}
+
+.mce-content-body img::selection{background: 0 0;}
+
+.ephox-snooker-resizer-bar{background-color: #b4d7ff;opacity: 0;}
+
+.ephox-snooker-resizer-cols{cursor: col-resize;}
+
+.ephox-snooker-resizer-rows{cursor: row-resize;}
+
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity: 1;}
+
+.mce-spellchecker-word{height: 2rem;cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.5'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-spellchecker-grammar{cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23008800'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-toc{border: 1px solid gray;}
+
+.mce-toc h2{margin: 4px;}
+
+.mce-toc li{list-style-type: none;}
+
+.mce-item-table,.mce-item-table caption,.mce-item-table td,.mce-item-table th{border: 1px dashed #bbb;}
+
+.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{padding-top: 10px;margin-left: 3px;background-repeat: no-repeat;border: 1px dashed #bbb;}
+
+.mce-visualblocks p{background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);}
+
+.mce-visualblocks h1{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);}
+
+.mce-visualblocks h2{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);}
+
+.mce-visualblocks h3{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);}
+
+.mce-visualblocks h4{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);}
+
+.mce-visualblocks h5{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);}
+
+.mce-visualblocks h6{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);}
+
+.mce-visualblocks div:not([data-mce-bogus]){background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);}
+
+.mce-visualblocks section{background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);}
+
+.mce-visualblocks article{background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);}
+
+.mce-visualblocks blockquote{background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);}
+
+.mce-visualblocks address{background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);}
+
+.mce-visualblocks pre{background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);}
+
+.mce-visualblocks figure{background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);}
+
+.mce-visualblocks figcaption{border: 1px dashed #bbb;}
+
+.mce-visualblocks hgroup{background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);}
+
+.mce-visualblocks aside{background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);}
+
+.mce-visualblocks ul{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);}
+
+.mce-visualblocks ol{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);}
+
+.mce-visualblocks dl{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);}
+
+.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left: 3px;}
+
+.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x: right;margin-right: 3px;}
+
+.mce-nbsp,.mce-shy{background: #aaa;}
+
+.mce-shy::after{content: '-';}
+
+.tox-toolbar-dock-fadeout{opacity: 0;visibility: hidden;}
+
+.tox-toolbar-dock-fadein{opacity: 1;visibility: visible;}
+
+.tox-toolbar-dock-transition{transition: visibility 0s linear .3s,opacity .3s ease;}
+
+.tox-toolbar-dock-transition.tox-toolbar-dock-fadein{transition-delay: 0s;}
diff --git a/public/resource/tinymce/skins/ui/oxide/content.min.css b/public/resource/tinymce/skins/ui/oxide/content.min.css
new file mode 100644
index 0000000..6e7165f
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide/content.min.css
@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{display: inline-block;width: 8px !important;height: 12px !important;padding: 0 2px;cursor: default;background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;user-select: all;-webkit-user-modify: read-only;-moz-user-modify: read-only;}
+
+.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset: 1px;}
+
+.tox-comments-visible .tox-comment{background-color: #fff0b7;}
+
+.tox-comments-visible .tox-comment--active{background-color: #ffe168;}
+
+.tox-checklist>li:not(.tox-checklist--hidden){margin: .25em 0;list-style: none;}
+
+.tox-checklist>li:not(.tox-checklist--hidden)::before{position: absolute;width: 1em;height: 1em;margin-top: .125em;margin-left: -1.5em;cursor: pointer;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");background-size: 100%;content: '';}
+
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");}
+
+[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-right: -1.5em;margin-left: 0;}
+
+code[class*=language-],pre[class*=language-]{font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size: .875rem;-webkit-hyphens: none;-ms-hyphens: none;hyphens: none;line-height: 1.5;word-spacing: normal;color: #000;text-shadow: 0 1px #fff;word-break: normal;word-wrap: normal;white-space: pre;-moz-tab-size: 4;tab-size: 4;}
+
+code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow: none;background: #b3d4fc;}
+
+code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow: none;background: #b3d4fc;}@media print{code[class*=language-],pre[class*=language-]{text-shadow: none;}}
+
+pre[class*=language-]{padding: 1em;margin: .5em 0;overflow: auto;}
+
+:not(pre)>code[class*=language-],pre[class*=language-]{background: 0 0 !important;border: 1px solid #ccc;}
+
+:not(pre)>code[class*=language-]{padding: .1em;border-radius: .3em;}
+
+.token.cdata,.token.comment,.token.doctype,.token.prolog{color: #708090;}
+
+.token.punctuation{color: #999;}
+
+.namespace{opacity: .7;}
+
+.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color: #905;}
+
+.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color: #690;}
+
+.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color: #a67f59;background: hsla(0,0%,100%,.5);}
+
+.token.atrule,.token.attr-value,.token.keyword{color: #07a;}
+
+.token.function{color: #dd4a68;}
+
+.token.important,.token.regex,.token.variable{color: #e90;}
+
+.token.bold,.token.important{font-weight: 700;}
+
+.token.italic{font-style: italic;}
+
+.token.entity{cursor: help;}
+
+:not([dir=rtl]) code[class*=language-],:not([dir=rtl]) pre[class*=language-]{text-align: left;direction: ltr;}
+
+[dir=rtl] code[class*=language-],[dir=rtl] pre[class*=language-]{text-align: right;direction: rtl;}
+
+.mce-content-body{overflow-wrap: break-word;word-wrap: break-word;}
+
+.mce-content-body .mce-visual-caret{position: absolute;background-color: #000;background-color: currentColor;}
+
+.mce-content-body .mce-visual-caret-hidden{display: none;}
+
+.mce-content-body [data-mce-caret]{position: absolute;top: 0;right: auto;left: -1000px;padding: 0;margin: 0;}
+
+.mce-content-body .mce-offscreen-selection{position: absolute;left: -9999999999px;max-width: 1000000px;}
+
+.mce-content-body [contentEditable=false]{cursor: default;}
+
+.mce-content-body [contentEditable=true]{cursor: text;}
+
+.tox-cursor-format-painter{cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default;}
+
+.mce-content-body figure.align-left{float: left;}
+
+.mce-content-body figure.align-right{float: right;}
+
+.mce-content-body figure.image.align-center{display: table;margin-right: auto;margin-left: auto;}
+
+.mce-preview-object{position: relative;display: inline-block;margin: 0 2px 0 2px;line-height: 0;border: 1px solid gray;}
+
+.mce-preview-object .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.mce-preview-object[data-mce-selected="2"] .mce-shim{display: none;}
+
+.mce-object{background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border: 1px dashed #aaa;}
+
+.mce-pagebreak{display: block;width: 100%;height: 5px;margin-top: 15px;cursor: default;border: 1px dashed #aaa;page-break-before: always;}@media print{.mce-pagebreak{border: 0;}}
+
+.tiny-pageembed .mce-shim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
+
+.tiny-pageembed[data-mce-selected="2"] .mce-shim{display: none;}
+
+.tiny-pageembed{position: relative;display: inline-block;}
+
+.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{position: relative;display: block;width: 100%;padding: 0;overflow: hidden;}
+
+.tiny-pageembed--16by9::before,.tiny-pageembed--1by1::before,.tiny-pageembed--21by9::before,.tiny-pageembed--4by3::before{display: block;content: "";}
+
+.tiny-pageembed--21by9::before{padding-top: 42.857143%;}
+
+.tiny-pageembed--16by9::before{padding-top: 56.25%;}
+
+.tiny-pageembed--4by3::before{padding-top: 75%;}
+
+.tiny-pageembed--1by1::before{padding-top: 100%;}
+
+.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}
+
+.mce-content-body div.mce-resizehandle{position: absolute;z-index: 10000;width: 10px;height: 10px;background-color: #4099ff;border-color: #4099ff;border-style: solid;border-width: 1px;box-sizing: border-box;}
+
+.mce-content-body div.mce-resizehandle:hover{background-color: #4099ff;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor: nesw-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor: nwse-resize;}
+
+.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor: nesw-resize;}
+
+.mce-content-body .mce-clonedresizable{position: absolute;z-index: 10000;outline: 1px dashed #000;opacity: .5;}
+
+.mce-content-body .mce-resize-helper{position: absolute;z-index: 10001;display: none;padding: 5px;margin: 5px 10px;font-family: sans-serif;font-size: 12px;line-height: 14px;color: #fff;white-space: nowrap;background: #555;background: rgba(0,0,0,.75);border: 1px;border-radius: 3px;}
+
+.mce-match-marker{color: #fff;background: #aaa;}
+
+.mce-match-marker-selected{color: #fff;background: #39f;}
+
+.mce-content-body img[data-mce-selected],.mce-content-body table[data-mce-selected]{outline: 3px solid #b4d7ff;}
+
+.mce-content-body hr[data-mce-selected]{outline: 3px solid #b4d7ff;outline-offset: 1px;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline: 3px solid #b4d7ff;}
+
+.mce-content-body [contentEditable=false][data-mce-selected]{cursor: not-allowed;outline: 3px solid #b4d7ff;}
+
+.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline: 0;}
+
+.mce-content-body [data-mce-selected=inline-boundary]{background-color: #b4d7ff;}
+
+.mce-content-body .mce-edit-focus{outline: 3px solid #b4d7ff;}
+
+.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{background-color: #b4d7ff !important;}
+
+.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background: 0 0;}
+
+.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
+
+.mce-content-body img::-moz-selection{background: 0 0;}
+
+.mce-content-body img::selection{background: 0 0;}
+
+.ephox-snooker-resizer-bar{background-color: #b4d7ff;opacity: 0;}
+
+.ephox-snooker-resizer-cols{cursor: col-resize;}
+
+.ephox-snooker-resizer-rows{cursor: row-resize;}
+
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity: 1;}
+
+.mce-spellchecker-word{height: 2rem;cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.5'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-spellchecker-grammar{cursor: default;background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23008800'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position: 0 calc(100% + 1px);background-repeat: repeat-x;background-size: auto 6px;}
+
+.mce-toc{border: 1px solid gray;}
+
+.mce-toc h2{margin: 4px;}
+
+.mce-toc li{list-style-type: none;}
+
+.mce-item-table,.mce-item-table caption,.mce-item-table td,.mce-item-table th{border: 1px dashed #bbb;}
+
+.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{padding-top: 10px;margin-left: 3px;background-repeat: no-repeat;border: 1px dashed #bbb;}
+
+.mce-visualblocks p{background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);}
+
+.mce-visualblocks h1{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);}
+
+.mce-visualblocks h2{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);}
+
+.mce-visualblocks h3{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);}
+
+.mce-visualblocks h4{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);}
+
+.mce-visualblocks h5{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);}
+
+.mce-visualblocks h6{background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);}
+
+.mce-visualblocks div:not([data-mce-bogus]){background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);}
+
+.mce-visualblocks section{background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);}
+
+.mce-visualblocks article{background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);}
+
+.mce-visualblocks blockquote{background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);}
+
+.mce-visualblocks address{background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);}
+
+.mce-visualblocks pre{background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);}
+
+.mce-visualblocks figure{background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);}
+
+.mce-visualblocks figcaption{border: 1px dashed #bbb;}
+
+.mce-visualblocks hgroup{background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);}
+
+.mce-visualblocks aside{background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);}
+
+.mce-visualblocks ul{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);}
+
+.mce-visualblocks ol{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);}
+
+.mce-visualblocks dl{background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);}
+
+.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left: 3px;}
+
+.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x: right;margin-right: 3px;}
+
+.mce-nbsp,.mce-shy{background: #aaa;}
+
+.mce-shy::after{content: '-';}
+
+body{font-family: sans-serif;}
+
+table{border-collapse: collapse;}
diff --git a/public/resource/tinymce/skins/ui/oxide/content.mobile.min.css b/public/resource/tinymce/skins/ui/oxide/content.mobile.min.css
new file mode 100644
index 0000000..c052252
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide/content.mobile.min.css
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{position: absolute;display: inline-block;background-color: green;opacity: .5;}
+
+body{-webkit-text-size-adjust: none;}
+
+body img{max-width: 96vw;}
+
+body table img{max-width: 95%;}
+
+body{font-family: sans-serif;}
+
+table{border-collapse: collapse;}
diff --git a/public/resource/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff b/public/resource/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/public/resource/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff differ
diff --git a/public/resource/tinymce/skins/ui/oxide/skin.min.css b/public/resource/tinymce/skins/ui/oxide/skin.min.css
new file mode 100644
index 0000000..5886c59
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide/skin.min.css
@@ -0,0 +1,875 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: #222f3e;text-decoration: none;text-shadow: none;text-transform: none;white-space: normal;vertical-align: initial;cursor: auto;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}
+
+.tox :not(svg){font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;line-height: inherit;color: inherit;text-align: inherit;text-decoration: inherit;text-shadow: inherit;text-transform: inherit;white-space: inherit;vertical-align: inherit;cursor: inherit;box-sizing: inherit;direction: inherit;-webkit-tap-highlight-color: inherit;}
+
+.tox :not(svg){position: static;float: none;width: auto;height: auto;max-width: none;padding: 0;margin: 0;background: 0 0;border: 0;outline: 0;}
+
+.tox:not([dir=rtl]){text-align: left;direction: ltr;}
+
+.tox[dir=rtl]{text-align: right;direction: rtl;}
+
+.tox-tinymce{position: relative;display: flex;overflow: hidden;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;border: 1px solid #ccc;border-radius: 0;visibility: inherit !important;box-shadow: none;box-sizing: border-box;flex-direction: column;}
+
+.tox-editor-container{display: flex;flex: 1 1 auto;flex-direction: column;overflow: hidden;}
+
+.tox-editor-container>:first-child{border-top: none !important;}
+
+.tox-tinymce-aux{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}
+
+.tox-tinymce :focus,.tox-tinymce-aux :focus{outline: 0;}
+
+button::-moz-focus-inner{border: 0;}
+
+.tox-silver-sink{z-index: 1300;}
+
+.tox .tox-anchorbar{display: flex;flex: 0 0 auto;}
+
+.tox .tox-bar{display: flex;flex: 0 0 auto;}
+
+.tox .tox-button{display: inline-block;padding: 4px 16px;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 14px;font-weight: 700;line-height: 24px;letter-spacing: 1;color: #fff;text-align: center;text-decoration: none;text-transform: capitalize;white-space: nowrap;cursor: pointer;background-color: #207ab7;background-image: none;background-position: none;background-repeat: none;border-color: #207ab7;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;box-sizing: border-box;}
+
+.tox .tox-button[disabled]{color: rgba(255,255,255,.5);cursor: not-allowed;background-color: #207ab7;background-image: none;border-color: #207ab7;box-shadow: none;}
+
+.tox .tox-button:focus:not(:disabled){color: #fff;background-color: #1c6ca1;background-image: none;border-color: #1c6ca1;box-shadow: none;}
+
+.tox .tox-button:hover:not(:disabled){color: #fff;background-color: #1c6ca1;background-image: none;border-color: #1c6ca1;box-shadow: none;}
+
+.tox .tox-button:active:not(:disabled){color: #fff;background-color: #185d8c;background-image: none;border-color: #185d8c;box-shadow: none;}
+
+.tox .tox-button--secondary{padding: 4px 16px;color: #222f3e;text-decoration: none;text-transform: capitalize;background-color: #f0f0f0;background-image: none;background-position: none;background-repeat: none;border-color: #f0f0f0;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;}
+
+.tox .tox-button--secondary[disabled]{color: rgba(34,47,62,.5);background-color: #f0f0f0;background-image: none;border-color: #f0f0f0;box-shadow: none;}
+
+.tox .tox-button--secondary:focus:not(:disabled){color: #222f3e;background-color: #e3e3e3;background-image: none;border-color: #e3e3e3;box-shadow: none;}
+
+.tox .tox-button--secondary:hover:not(:disabled){color: #222f3e;background-color: #e3e3e3;background-image: none;border-color: #e3e3e3;box-shadow: none;}
+
+.tox .tox-button--secondary:active:not(:disabled){color: #222f3e;background-color: #d6d6d6;background-image: none;border-color: #d6d6d6;box-shadow: none;}
+
+.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding: 4px;}
+
+.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display: block;fill: currentColor;}
+
+.tox .tox-button-link{display: inline-block;padding: 0;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;font-weight: 400;line-height: 1.3;white-space: nowrap;cursor: pointer;background: 0;border: none;box-sizing: border-box;}
+
+.tox .tox-button-link--sm{font-size: 14px;}
+
+.tox .tox-button--naked{color: #222f3e;background-color: transparent;border-color: transparent;box-shadow: unset;}
+
+.tox .tox-button--naked:hover:not(:disabled){color: #222f3e;background-color: #e3e3e3;border-color: #e3e3e3;box-shadow: none;}
+
+.tox .tox-button--naked:focus:not(:disabled){color: #222f3e;background-color: #e3e3e3;border-color: #e3e3e3;box-shadow: none;}
+
+.tox .tox-button--naked:active:not(:disabled){color: #222f3e;background-color: #d6d6d6;border-color: #d6d6d6;box-shadow: none;}
+
+.tox .tox-button--naked .tox-icon svg{fill: currentColor;}
+
+.tox .tox-button--naked.tox-button--icon{color: currentColor;}
+
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color: #222f3e;}
+
+.tox .tox-checkbox{display: flex;height: 36px;min-width: 36px;cursor: pointer;border-radius: 3px;align-items: center;}
+
+.tox .tox-checkbox__input{position: absolute;top: auto;left: -10000px;width: 1px;height: 1px;overflow: hidden;}
+
+.tox .tox-checkbox__icons{width: 24px;height: 24px;padding: calc(4px - 1px);border-radius: 3px;box-shadow: 0 0 0 2px transparent;box-sizing: content-box;}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: block;fill: rgba(34,47,62,.3);}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display: none;fill: #207ab7;}
+
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display: none;fill: #207ab7;}
+
+.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: none;}
+
+.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display: block;}
+
+.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display: none;}
+
+.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display: block;}
+
+.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{padding: calc(4px - 1px);border-radius: 3px;box-shadow: inset 0 0 0 1px #207ab7;}
+
+.tox:not([dir=rtl]) .tox-checkbox__label{margin-left: 4px;}
+
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-checkbox__label{margin-right: 4px;}
+
+.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right: 4px;}
+
+.tox .tox-collection--toolbar .tox-collection__group{display: flex;padding: 0;}
+
+.tox .tox-collection--grid .tox-collection__group{display: flex;max-height: 208px;padding: 0;overflow-x: hidden;overflow-y: auto;flex-wrap: wrap;}
+
+.tox .tox-collection--list .tox-collection__group{padding: 4px 0;border-color: #ccc;border-style: solid;border-top-width: 1px;border-right-width: 0;border-bottom-width: 0;border-left-width: 0;}
+
+.tox .tox-collection--list .tox-collection__group:first-child{border-top-width: 0;}
+
+.tox .tox-collection__group-heading{padding: 4px 8px;margin-top: -4px;margin-bottom: 4px;font-size: 12px;font-style: normal;font-weight: 400;color: rgba(34,47,62,.7);text-transform: none;cursor: default;background-color: #e6e6e6;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;}
+
+.tox .tox-collection__item{display: flex;color: #222f3e;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;align-items: center;-webkit-touch-callout: none;}
+
+.tox .tox-collection--list .tox-collection__item{padding: 4px 8px;}
+
+.tox .tox-collection--toolbar .tox-collection__item{padding: 4px;border-radius: 3px;}
+
+.tox .tox-collection--grid .tox-collection__item{padding: 4px;border-radius: 3px;}
+
+.tox .tox-collection--list .tox-collection__item--enabled{color: contrast(inherit,#222f3e,#fff);background-color: inherit;}
+
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #222f3e;background-color: #dee0e2;}
+
+.tox .tox-collection--toolbar .tox-collection__item--enabled{color: #222f3e;background-color: #c8cbcf;}
+
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #222f3e;background-color: #dee0e2;}
+
+.tox .tox-collection--grid .tox-collection__item--enabled{color: #222f3e;background-color: #c8cbcf;}
+
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){color: #222f3e;background-color: #dee0e2;}
+
+.tox .tox-collection__item--state-disabled{color: rgba(34,47,62,.5);cursor: default;background-color: transparent;}
+
+.tox .tox-collection__item-icon{display: flex;width: 24px;height: 24px;align-items: center;justify-content: center;}
+
+.tox .tox-collection__item-icon svg{fill: currentColor;}
+
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon{width: 48px;height: 48px;}
+
+.tox .tox-collection__item[role=menuitemcheckbox]:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display: none;}
+
+.tox .tox-collection__item-label{display: inline-block;font-size: 14px;font-style: normal;font-weight: 400;line-height: 24px;color: currentColor;text-transform: none;word-break: break-all;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-collection__item-accessory{display: inline-block;height: 24px;font-size: 14px;line-height: 24px;color: rgba(34,47,62,.7);text-transform: normal;}
+
+.tox .tox-collection__item-caret{align-items: center;display: flex;min-height: 24px;}
+
+.tox .tox-collection__item-caret::after{min-height: inherit;font-size: 0;content: '';}
+
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item-label:first-child{margin-left: 4px;}
+
+.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left: 16px;text-align: right;}
+
+.tox:not([dir=rtl]) .tox-collection__item-caret{margin-left: 16px;}
+
+.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right: 8px;}
+
+.tox[dir=rtl] .tox-collection--list .tox-collection__item-label:first-child{margin-right: 4px;}
+
+.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg{transform: rotateY(180deg);}
+
+.tox[dir=rtl] .tox-collection__item-accessory{margin-right: 16px;text-align: left;}
+
+.tox[dir=rtl] .tox-collection__item-caret{margin-right: 16px;transform: rotateY(180deg);}
+
+.tox .tox-color-picker-container{display: flex;flex-direction: row;height: 225px;margin: 0;}
+
+.tox .tox-sv-palette{display: flex;height: 100%;box-sizing: border-box;}
+
+.tox .tox-sv-palette-spectrum{height: 100%;}
+
+.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width: 225px;}
+
+.tox .tox-sv-palette-thumb{position: absolute;width: 12px;height: 12px;background: 0 0;border: 1px solid #000;border-radius: 50%;box-sizing: content-box;}
+
+.tox .tox-sv-palette-inner-thumb{position: absolute;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;}
+
+.tox .tox-hue-slider{width: 25px;height: 100%;box-sizing: border-box;}
+
+.tox .tox-hue-slider-spectrum{width: 100%;height: 100%;background: linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);}
+
+.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width: 20px;}
+
+.tox .tox-hue-slider-thumb{width: 100%;height: 4px;background: #fff;border: 1px solid #000;box-sizing: content-box;}
+
+.tox .tox-rgb-form{display: flex;flex-direction: column;justify-content: space-between;}
+
+.tox .tox-rgb-form div{display: flex;width: inherit;margin-bottom: 5px;align-items: center;justify-content: space-between;}
+
+.tox .tox-rgb-form input{width: 6em;}
+
+.tox .tox-rgb-form input.tox-invalid{border: 1px solid red !important;}
+
+.tox .tox-rgb-form .tox-rgba-preview{margin-bottom: 0;border: 1px solid #000;flex-grow: 2;}
+
+.tox:not([dir=rtl]) .tox-sv-palette{margin-right: 15px;}
+
+.tox:not([dir=rtl]) .tox-hue-slider{margin-right: 15px;}
+
+.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left: -1px;}
+
+.tox:not([dir=rtl]) .tox-rgb-form label{margin-right: .5em;}
+
+.tox[dir=rtl] .tox-sv-palette{margin-left: 15px;}
+
+.tox[dir=rtl] .tox-hue-slider{margin-left: 15px;}
+
+.tox[dir=rtl] .tox-hue-slider-thumb{margin-right: -1px;}
+
+.tox[dir=rtl] .tox-rgb-form label{margin-left: .5em;}
+
+.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin: 2px 0 3px 4px;}
+
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{margin: -4px 0;border: 0;}
+
+.tox .tox-swatches__row{display: flex;}
+
+.tox .tox-swatch{width: 30px;height: 30px;transition: transform .15s,box-shadow .15s;}
+
+.tox .tox-swatch:focus,.tox .tox-swatch:hover{transform: scale(.8);box-shadow: 0 0 0 1px rgba(127,127,127,.3) inset;}
+
+.tox .tox-swatch--remove{align-items: center;display: flex;justify-content: center;}
+
+.tox .tox-swatch--remove svg path{stroke: #e74c3c;}
+
+.tox .tox-swatches__picker-btn{display: flex;width: 30px;height: 30px;padding: 0;cursor: pointer;background-color: transparent;border: 0;outline: 0;align-items: center;justify-content: center;}
+
+.tox .tox-swatches__picker-btn svg{width: 24px;height: 24px;}
+
+.tox .tox-swatches__picker-btn:hover{background: #dee0e2;}
+
+.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left: auto;}
+
+.tox[dir=rtl] .tox-swatches__picker-btn{margin-right: auto;}
+
+.tox .tox-comment-thread{position: relative;background: #fff;}
+
+.tox .tox-comment-thread>:not(:first-child){margin-top: 8px;}
+
+.tox .tox-comment{position: relative;padding: 8px 8px 16px 8px;background: #fff;border: 1px solid #ccc;border-radius: 3px;box-shadow: 0 4px 8px 0 rgba(34,47,62,.1);}
+
+.tox .tox-comment__header{display: flex;color: #222f3e;align-items: center;justify-content: space-between;}
+
+.tox .tox-comment__date{font-size: 12px;color: rgba(34,47,62,.7);}
+
+.tox .tox-comment__body{position: relative;margin-top: 8px;font-size: 14px;font-style: normal;font-weight: 400;line-height: 1.3;color: #222f3e;text-transform: initial;}
+
+.tox .tox-comment__body textarea{width: 100%;white-space: normal;resize: none;}
+
+.tox .tox-comment__expander{padding-top: 8px;}
+
+.tox .tox-comment__expander p{font-size: 14px;font-style: normal;color: rgba(34,47,62,.7);}
+
+.tox .tox-comment__body p{margin: 0;}
+
+.tox .tox-comment__buttonspacing{padding-top: 16px;text-align: center;}
+
+.tox .tox-comment-thread__overlay::after{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 5;display: flex;background: #fff;content: "";opacity: .9;}
+
+.tox .tox-comment__reply{display: flex;flex-shrink: 0;flex-wrap: wrap;justify-content: flex-end;margin-top: 8px;}
+
+.tox .tox-comment__reply>:first-child{width: 100%;margin-bottom: 8px;}
+
+.tox .tox-comment__edit{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-top: 16px;}
+
+.tox .tox-comment__gradient::after{position: absolute;bottom: 0;display: block;width: 100%;height: 5em;margin-top: -40px;background: linear-gradient(rgba(255,255,255,0),#fff);content: "";}
+
+.tox .tox-comment__overlay{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 5;display: flex;text-align: center;background: #fff;opacity: .9;flex-direction: column;flex-grow: 1;}
+
+.tox .tox-comment__loading-text{position: relative;display: flex;color: #222f3e;align-items: center;flex-direction: column;}
+
+.tox .tox-comment__loading-text>div{padding-bottom: 16px;}
+
+.tox .tox-comment__overlaytext{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 10;padding: 1em;font-size: 14px;flex-direction: column;}
+
+.tox .tox-comment__overlaytext p{color: #222f3e;text-align: center;background-color: #fff;box-shadow: 0 0 8px 8px #fff;}
+
+.tox .tox-comment__overlaytext div:nth-of-type(2){font-size: .8em;}
+
+.tox .tox-comment__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1103;display: flex;background-color: #fff;align-items: center;justify-content: center;}
+
+.tox .tox-comment__scroll{display: flex;flex-direction: column;flex-shrink: 1;overflow: auto;}
+
+.tox .tox-conversations{margin: 8px;}
+
+.tox:not([dir=rtl]) .tox-comment__edit{margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-comment__edit{margin-right: 8px;}
+
+.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right: 8px;}
+
+.tox .tox-user{align-items: center;display: flex;}
+
+.tox .tox-user__avatar svg{fill: rgba(34,47,62,.7);}
+
+.tox .tox-user__name{font-size: 12px;font-style: normal;font-weight: 700;color: rgba(34,47,62,.7);text-transform: uppercase;}
+
+.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right: 8px;}
+
+.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-user__avatar svg{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right: 8px;}
+
+.tox .tox-dialog-wrap{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1100;display: flex;align-items: center;justify-content: center;}
+
+.tox .tox-dialog-wrap__backdrop{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1101;background-color: rgba(255,255,255,.75);}
+
+.tox .tox-dialog{position: relative;z-index: 1102;display: flex;width: 95vw;max-width: 480px;max-height: 100%;overflow: hidden;background-color: #fff;border-color: #ccc;border-style: solid;border-width: 1px;border-radius: 3px;box-shadow: 0 16px 16px -10px rgba(34,47,62,.15),0 0 40px 1px rgba(34,47,62,.15);flex-direction: column;}
+
+.tox .tox-dialog__header{position: relative;display: flex;padding: 8px 16px 0 16px;margin-bottom: 16px;font-size: 16px;color: #222f3e;background-color: #fff;border-bottom: none;align-items: center;justify-content: space-between;}
+
+.tox .tox-dialog__header .tox-button{z-index: 1;}
+
+.tox .tox-dialog__draghandle{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: grab;}
+
+.tox .tox-dialog__draghandle:active{cursor: grabbing;}
+
+.tox .tox-dialog__dismiss{margin-left: auto;}
+
+.tox .tox-dialog__title{margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 20px;font-style: normal;font-weight: 400;line-height: 1.3;text-transform: normal;}
+
+.tox .tox-dialog__body{display: flex;min-width: 0;padding: 0 16px;font-size: 16px;font-style: normal;font-weight: 400;line-height: 1.3;color: #222f3e;text-align: left;text-transform: normal;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-nav{align-items: flex-start;display: flex;flex-direction: column;}
+
+.tox .tox-dialog__body-nav-item{display: inline-block;margin-bottom: 8px;font-size: 14px;line-height: 1.3;color: rgba(34,47,62,.7);text-decoration: none;border-bottom: 2px solid transparent;}
+
+.tox .tox-dialog__body-nav-item--active{color: #207ab7;border-bottom: 2px solid #207ab7;}
+
+.tox .tox-dialog__body-content{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;max-height: 650px;overflow: auto;}
+
+.tox .tox-dialog__body-content>*{margin-top: 16px;margin-bottom: 0;}
+
+.tox .tox-dialog__body-content>:first-child{margin-top: 0;}
+
+.tox .tox-dialog__body-content>:last-child{margin-bottom: 0;}
+
+.tox .tox-dialog__body-content>:only-child{margin-top: 0;margin-bottom: 0;}
+
+.tox .tox-dialog--width-lg{height: 650px;max-width: 1200px;}
+
+.tox .tox-dialog--width-md{max-width: 800px;}
+
+.tox .tox-dialog--width-md .tox-dialog__body-content{overflow: auto;}
+
+.tox .tox-dialog__body-content--centered{text-align: center;}
+
+.tox .tox-dialog__body-content--spacious{margin-bottom: 16px;}
+
+.tox .tox-dialog__footer{display: flex;padding: 8px 16px;margin-top: 16px;background-color: #fff;border-top: 1px solid #ccc;align-items: center;justify-content: space-between;}
+
+.tox .tox-dialog__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1103;display: flex;background-color: rgba(255,255,255,.75);align-items: center;justify-content: center;}
+
+.tox .tox-dialog__table{width: 100%;border-collapse: collapse;}
+
+.tox .tox-dialog__table thead th{padding-bottom: 8px;font-weight: 700;}
+
+.tox .tox-dialog__table tbody tr{border-bottom: 1px solid #ccc;}
+
+.tox .tox-dialog__table tbody tr:last-child{border-bottom: none;}
+
+.tox .tox-dialog__table td{padding-top: 8px;padding-bottom: 8px;}
+
+.tox .tox-dialog__popups{position: absolute;z-index: 1100;width: 100%;}
+
+.tox .tox-dialog__body-iframe{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-iframe .tox-navobj{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex: 1;-ms-flex-preferred-size: auto;height: 100%;}
+
+body.tox-dialog__disable-scroll{overflow: hidden;}
+
+.tox.tox-platform-ie .tox-dialog-wrap{position: -ms-device-fixed;}
+
+.tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right: 32px;}
+
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left: 8px;}
+
+.tox[dir=rtl] .tox-dialog__body{text-align: right;}
+
+.tox[dir=rtl] .tox-dialog__body-nav{margin-left: 32px;}
+
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right: 8px;}
+
+.tox .tox-dropzone-container{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dropzone{display: flex;min-height: 100px;padding: 10px;background: #fff;border: 2px dashed #ccc;box-sizing: border-box;align-items: center;flex-direction: column;flex-grow: 1;justify-content: center;}
+
+.tox .tox-dropzone p{margin: 0 0 16px 0;color: rgba(34,47,62,.7);}
+
+.tox .tox-edit-area{position: relative;display: flex;overflow: hidden;border-top: 1px solid #ccc;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-edit-area__iframe{position: absolute;width: 100%;height: 100%;background-color: #fff;border: 0;box-sizing: border-box;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox.tox-inline-edit-area{border: 1px dotted #ccc;}
+
+.tox .tox-control-wrap{flex: 1;position: relative;}
+
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display: none;}
+
+.tox .tox-control-wrap svg{display: block;}
+
+.tox .tox-control-wrap__status-icon-wrap{position: absolute;top: 50%;transform: translateY(-50%);}
+
+.tox .tox-control-wrap__status-icon-invalid svg{fill: #c00;}
+
+.tox .tox-control-wrap__status-icon-unknown svg{fill: orange;}
+
+.tox .tox-control-wrap__status-icon-valid svg{fill: green;}
+
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right: 32px;}
+
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right: 4px;}
+
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left: 32px;}
+
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left: 4px;}
+
+.tox .tox-autocompleter{max-width: 25em;}
+
+.tox .tox-autocompleter .tox-menu{max-width: 25em;}
+
+.tox .tox-color-input{display: flex;}
+
+.tox .tox-color-input .tox-textfield{display: flex;border-radius: 3px 0 0 3px;}
+
+.tox .tox-color-input span{display: flex;width: 35px;cursor: pointer;border-color: rgba(34,47,62,.2);border-style: solid;border-width: 1px 1px 1px 0;border-radius: 0 3px 3px 0;box-shadow: none;box-sizing: border-box;}
+
+.tox .tox-color-input span:focus{border-color: #207ab7;}
+
+.tox[dir=rtl] .tox-color-input .tox-textfield{border-radius: 0 3px 3px 0;}
+
+.tox[dir=rtl] .tox-color-input span{border-width: 1px 0 1px 1px;border-radius: 3px 0 0 3px;}
+
+.tox .tox-label,.tox .tox-toolbar-label{display: block;padding: 0 8px 0 0;font-size: 14px;font-style: normal;font-weight: 400;line-height: 1.3;color: rgba(34,47,62,.7);text-transform: normal;white-space: nowrap;}
+
+.tox .tox-toolbar-label{padding: 0 8px;}
+
+.tox[dir=rtl] .tox-label{padding: 0 0 0 8px;}
+
+.tox .tox-form{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group{margin-bottom: 4px;box-sizing: border-box;}
+
+.tox .tox-form__group--error{color: #c00;}
+
+.tox .tox-form__group--collection{display: flex;}
+
+.tox .tox-form__grid{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
+
+.tox .tox-form__grid--2col>.tox-form__group{width: calc(50% - (8px / 2));}
+
+.tox .tox-form__grid--3col>.tox-form__group{width: calc(100% / 3 - (8px / 2));}
+
+.tox .tox-form__grid--4col>.tox-form__group{width: calc(25% - (8px / 2));}
+
+.tox .tox-form__controls-h-stack{align-items: center;display: flex;}
+
+.tox .tox-form__group--inline{align-items: center;display: flex;}
+
+.tox .tox-form__group--stretched{display: flex;flex: 1;flex-direction: column;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-textarea{flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-navobj{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex: 1;-ms-flex-preferred-size: auto;height: 100%;}
+
+.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left: 4px;}
+
+.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right: 4px;}
+
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display: none;}
+
+.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield,.tox:not([dir=rtl]) .tox-selectfield select,.tox[dir=rtl] .tox-selectfield select{width: 100%;padding: 5px 4.75px;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 16px;line-height: 24px;color: #222f3e;background-color: #fff;border-color: #ccc;border-style: solid;border-width: 1px;border-radius: 3px;outline: 0;box-shadow: none;box-sizing: border-box;resize: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
+
+.tox .tox-selectfield select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{border-color: #207ab7;outline: 0;box-shadow: none;}
+
+.tox .tox-toolbar-textfield{max-width: 250px;margin-top: 2px;margin-bottom: 3px;border-width: 0;}
+
+.tox .tox-naked-btn{display: block;padding: 0;margin: 0;color: #207ab7;cursor: pointer;background-color: transparent;border: 0;border-color: transparent;box-shadow: unset;}
+
+.tox .tox-naked-btn svg{display: block;fill: #222f3e;}
+
+.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right: 4px;}
+
+.tox .tox-selectfield{position: relative;cursor: pointer;}
+
+.tox .tox-selectfield select::-ms-expand{display: none;}
+
+.tox .tox-selectfield svg{position: absolute;top: 50%;pointer-events: none;transform: translateY(-50%);}
+
+.tox:not([dir=rtl]) .tox-selectfield select{padding-right: 24px;}
+
+.tox:not([dir=rtl]) .tox-selectfield svg{right: 8px;}
+
+.tox[dir=rtl] .tox-selectfield select{padding-left: 24px;}
+
+.tox[dir=rtl] .tox-selectfield svg{left: 8px;}
+
+.tox .tox-textarea{white-space: pre-wrap;-webkit-appearance: textarea;-moz-appearance: textarea;appearance: textarea;}
+
+.tox-fullscreen{position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;border: 0;}
+
+.tox-fullscreen .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display: none;}
+
+.tox-fullscreen .tox.tox-tinymce.tox-fullscreen{z-index: 1200;}
+
+.tox-fullscreen .tox.tox-tinymce-aux{z-index: 1201;}
+
+.tox .tox-image-tools{width: 100%;}
+
+.tox .tox-image-tools__toolbar{align-items: center;display: flex;justify-content: center;}
+
+.tox .tox-image-tools__image{position: relative;width: 100%;height: 380px;overflow: auto;background-color: #666;}
+
+.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top: 8px;}
+
+.tox .tox-image-tools__image-bg{background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);}
+
+.tox .tox-image-tools__toolbar>.tox-spacer{flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-croprect-block{position: absolute;background: #000;opacity: .5;zoom: 1;}
+
+.tox .tox-croprect-handle{position: absolute;top: 0;left: 0;width: 20px;height: 20px;border: 2px solid #fff;}
+
+.tox .tox-croprect-handle-move{position: absolute;cursor: move;border: 0;}
+
+.tox .tox-croprect-handle-nw{top: 100px;left: 100px;margin: -2px 0 0 -2px;cursor: nw-resize;border-width: 2px 0 0 2px;}
+
+.tox .tox-croprect-handle-ne{top: 100px;left: 200px;margin: -2px 0 0 -20px;cursor: ne-resize;border-width: 2px 2px 0 0;}
+
+.tox .tox-croprect-handle-sw{top: 200px;left: 100px;margin: -20px 2px 0 -2px;cursor: sw-resize;border-width: 0 0 2px 2px;}
+
+.tox .tox-croprect-handle-se{top: 200px;left: 200px;margin: -20px 0 0 -20px;cursor: se-resize;border-width: 0 2px 2px 0;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left: 8px;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left: 32px;}
+
+.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left: 32px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right: 8px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right: 32px;}
+
+.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right: 32px;}
+
+.tox .tox-insert-table-picker{display: flex;flex-wrap: wrap;width: 169px;}
+
+.tox .tox-insert-table-picker>div{width: 16px;height: 16px;border-color: #ccc;border-style: solid;border-width: 0 1px 1px 0;box-sizing: content-box;}
+
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin: -4px 0;}
+
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color: rgba(32,122,183,.5);border-color: rgba(32,122,183,.5);}
+
+.tox .tox-insert-table-picker__label{display: block;width: 100%;padding: 4px;font-size: 14px;color: rgba(34,47,62,.7);text-align: center;}
+
+.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right: 0;}
+
+.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right: 0;}
+
+.tox .tox-menu{z-index: 1;display: inline-block;overflow: hidden;vertical-align: top;background-color: #fff;border: 1px solid #ccc;border-radius: 3px;box-shadow: 0 4px 8px 0 rgba(34,47,62,.1);}
+
+.tox .tox-menu.tox-collection.tox-collection--list{padding: 0;}
+
+.tox .tox-menu.tox-collection.tox-collection--toolbar{padding: 4px;}
+
+.tox .tox-menu.tox-collection.tox-collection--grid{padding: 4px;}
+
+.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin: 0;}
+
+.tox .tox-menubar{display: flex;padding: 0 4px;margin-bottom: -1px;background: url("data:image/svg+xml;charset=utf8,%3Csvg height='43px' viewBox='0 0 40 43px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='42px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color: #fff;flex: 0 0 auto;flex-shrink: 0;flex-wrap: wrap;}
+
+.tox .tox-mbtn{display: flex;width: auto;height: 34px;padding: 0 4px;margin: 2px 0 3px 0;overflow: hidden;font-size: 14px;font-style: normal;font-weight: 400;color: #222f3e;text-transform: normal;background: 0 0;border: 0;border-radius: 3px;outline: 0;box-shadow: none;align-items: center;flex: 0 0 auto;justify-content: center;}
+
+.tox .tox-mbtn[disabled]{color: rgba(34,47,62,.5);cursor: not-allowed;background-color: none;border-color: none;box-shadow: none;}
+
+.tox .tox-mbtn:hover:not(:disabled){color: #222f3e;background: #dee0e2;box-shadow: none;}
+
+.tox .tox-mbtn:focus:not(:disabled){color: #222f3e;background: #dee0e2;box-shadow: none;}
+
+.tox .tox-mbtn--active{color: #222f3e;background: #c8cbcf;box-shadow: none;}
+
+.tox .tox-mbtn__select-label{margin: 0 4px;font-weight: 400;cursor: default;}
+
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor: not-allowed;}
+
+.tox .tox-mbtn__select-chevron{display: flex;display: none;width: 16px;align-items: center;justify-content: center;}
+
+.tox .tox-notification{display: grid;padding: 5px;margin-top: 5px;background-color: #fffaea;border-color: #ffe89d;border-style: solid;border-width: 1px;opacity: 0;box-sizing: border-box;transition: transform .1s ease-in,opacity 150ms ease-in;grid-template-columns: minmax(40px,1fr) auto minmax(40px,1fr);}
+
+.tox .tox-notification--in{opacity: 1;}
+
+.tox .tox-notification--success{background-color: #dff0d8;border-color: #d6e9c6;}
+
+.tox .tox-notification--error{background-color: #f2dede;border-color: #ebccd1;}
+
+.tox .tox-notification--warn{background-color: #fcf8e3;border-color: #faebcc;}
+
+.tox .tox-notification--info{background-color: #d9edf7;border-color: #779ecb;}
+
+.tox .tox-notification__body{font-size: 14px;color: #222f3e;text-align: center;word-break: break-all;word-break: break-word;white-space: normal;align-self: center;grid-column-end: 3;-ms-grid-column-span: 1;grid-column-start: 2;grid-row-end: 2;grid-row-start: 1;}
+
+.tox .tox-notification__body>*{margin: 0;}
+
+.tox .tox-notification__body>*+*{margin-top: 1rem;}
+
+.tox .tox-notification__icon{align-self: center;-ms-grid-column-align: end;grid-column-end: 2;-ms-grid-column-span: 1;grid-column-start: 1;grid-row-end: 2;grid-row-start: 1;justify-self: end;}
+
+.tox .tox-notification__icon svg{display: block;}
+
+.tox .tox-notification__dismiss{align-self: start;-ms-grid-column-align: end;grid-column-end: 4;-ms-grid-column-span: 1;grid-column-start: 3;grid-row-end: 2;grid-row-start: 1;justify-self: end;}
+
+.tox .tox-notification .tox-progress-bar{-ms-grid-column-align: center;grid-column-end: 4;-ms-grid-column-span: 3;grid-column-start: 1;grid-row-end: 3;-ms-grid-row-span: 1;grid-row-start: 2;justify-self: center;}
+
+.tox .tox-pop{position: relative;display: inline-block;}
+
+.tox .tox-pop--resizing{transition: width .1s ease;}
+
+.tox .tox-pop--resizing .tox-toolbar{flex-wrap: nowrap;}
+
+.tox .tox-pop__dialog{min-width: 0;overflow: hidden;background-color: #fff;border: 1px solid #ccc;border-radius: 3px;box-shadow: 0 1px 3px rgba(0,0,0,.15);}
+
+.tox .tox-pop__dialog>:not(.tox-toolbar){margin: 4px 4px 4px 8px;}
+
+.tox .tox-pop__dialog .tox-toolbar{background-color: transparent;}
+
+.tox .tox-pop::after,.tox .tox-pop::before{position: absolute;display: block;width: 0;height: 0;border-style: solid;content: '';}
+
+.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{top: 100%;left: 50%;}
+
+.tox .tox-pop.tox-pop--bottom::after{margin-top: -1px;margin-left: -8px;border-color: #fff transparent transparent transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--bottom::before{margin-left: -9px;border-color: #ccc transparent transparent transparent;border-width: 9px;}
+
+.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{top: 0;left: 50%;transform: translateY(-100%);}
+
+.tox .tox-pop.tox-pop--top::after{margin-top: 1px;margin-left: -8px;border-color: transparent transparent #fff transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--top::before{margin-left: -9px;border-color: transparent transparent #ccc transparent;border-width: 9px;}
+
+.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{top: calc(50% - 1px);left: 0;transform: translateY(-50%);}
+
+.tox .tox-pop.tox-pop--left::after{margin-left: -15px;border-color: transparent #fff transparent transparent;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--left::before{margin-left: -19px;border-color: transparent #ccc transparent transparent;border-width: 10px;}
+
+.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{top: calc(50% + 1px);left: 100%;transform: translateY(-50%);}
+
+.tox .tox-pop.tox-pop--right::after{margin-left: -1px;border-color: transparent transparent transparent #fff;border-width: 8px;}
+
+.tox .tox-pop.tox-pop--right::before{margin-left: -1px;border-color: transparent transparent transparent #ccc;border-width: 10px;}
+
+.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left: 20px;}
+
+.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left: calc(100% - 20px);}
+
+.tox .tox-sidebar-wrap{display: flex;flex-direction: row;flex-grow: 1;min-height: 0;}
+
+.tox .tox-sidebar{display: flex;flex-direction: row;justify-content: flex-end;}
+
+.tox .tox-sidebar__slider{display: flex;overflow: hidden;}
+
+.tox .tox-sidebar__pane-container{display: flex;}
+
+.tox .tox-sidebar__pane{display: flex;}
+
+.tox .tox-sidebar--sliding-closed{opacity: 0;}
+
+.tox .tox-sidebar--sliding-open{opacity: 1;}
+
+.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition: width .5s ease,opacity .5s ease;}
+
+.tox .tox-slider{position: relative;display: flex;height: 24px;align-items: center;flex: 1;-ms-flex-preferred-size: auto;justify-content: center;}
+
+.tox .tox-slider__rail{width: 100%;height: 10px;min-width: 120px;background-color: transparent;border: 1px solid #ccc;border-radius: 3px;}
+
+.tox .tox-slider__handle{position: absolute;top: 50%;left: 50%;width: 14px;height: 24px;background-color: #207ab7;border: 2px solid #185d8c;border-radius: 3px;transform: translateX(-50%) translateY(-50%);box-shadow: none;}
+
+.tox .tox-source-code{overflow: auto;}
+
+.tox .tox-spinner{display: flex;}
+
+.tox .tox-spinner>div{width: 8px;height: 8px;background-color: rgba(34,47,62,.7);border-radius: 100%;animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;}
+
+.tox .tox-spinner>div:nth-child(1){animation-delay: -.32s;}
+
+.tox .tox-spinner>div:nth-child(2){animation-delay: -.16s;}@keyframes tam-bouncing-dots{0%,100%,80%{transform: scale(0);}
+
+40%{transform: scale(1);}}
+
+.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left: 4px;}
+
+.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right: 4px;}
+
+.tox .tox-statusbar{position: relative;display: flex;height: 18px;padding: 0 8px;overflow: hidden;font-size: 12px;color: rgba(34,47,62,.7);text-transform: uppercase;background-color: #fff;border-top: 1px solid #ccc;align-items: center;flex: 0 0 auto;}
+
+.tox .tox-statusbar a{color: rgba(34,47,62,.7);text-decoration: none;}
+
+.tox .tox-statusbar a:hover{text-decoration: underline;}
+
+.tox .tox-statusbar__text-container{display: flex;flex: 1 1 auto;justify-content: flex-end;overflow: hidden;}
+
+.tox .tox-statusbar__path{display: flex;flex: 1 1 auto;margin-right: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+.tox .tox-statusbar__path>*{display: inline;white-space: nowrap;}
+
+.tox .tox-statusbar__wordcount{flex: 0 0 auto;margin-left: 1ch;}
+
+.tox .tox-statusbar__resize-handle{display: flex;padding-left: 1ch;margin-right: -8px;margin-left: auto;cursor: nwse-resize;align-items: flex-end;align-self: stretch;flex: 0 0 auto;justify-content: flex-end;}
+
+.tox .tox-statusbar__resize-handle svg{display: block;fill: rgba(34,47,62,.7);}
+
+.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right: 4px;}
+
+.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left: 1ch;}
+
+.tox[dir=rtl] .tox-statusbar{flex-direction: row-reverse;}
+
+.tox[dir=rtl] .tox-statusbar__path>*{margin-left: 4px;}
+
+.tox .tox-throbber{z-index: 1400;}
+
+.tox .tox-throbber__busy-spinner{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;background-color: rgba(255,255,255,.6);align-items: center;justify-content: center;}
+
+.tox .tox-tbtn{display: flex;width: 34px;height: 34px;padding: 0;margin: 2px 0 3px 0;overflow: hidden;font-size: 14px;font-style: normal;font-weight: 400;color: #222f3e;text-transform: normal;background: 0 0;border: 0;border-radius: 3px;outline: 0;box-shadow: none;align-items: center;flex: 0 0 auto;justify-content: center;}
+
+.tox .tox-tbtn svg{display: block;fill: #222f3e;}
+
+.tox .tox-tbtn.tox-tbtn-more{width: inherit;padding-right: 5px;padding-left: 5px;}
+
+.tox .tox-tbtn--enabled{color: #222f3e;background: #c8cbcf;box-shadow: none;}
+
+.tox .tox-tbtn--enabled>*{transform: none;}
+
+.tox .tox-tbtn--enabled svg{fill: #222f3e;}
+
+.tox .tox-tbtn:hover{color: #222f3e;background: #dee0e2;box-shadow: none;}
+
+.tox .tox-tbtn:hover svg{fill: #222f3e;}
+
+.tox .tox-tbtn:focus{color: #222f3e;background: #dee0e2;box-shadow: none;}
+
+.tox .tox-tbtn:focus svg{fill: #222f3e;}
+
+.tox .tox-tbtn:active{color: #222f3e;background: #c8cbcf;box-shadow: none;}
+
+.tox .tox-tbtn:active svg{fill: #222f3e;}
+
+.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{color: rgba(34,47,62,.5);cursor: not-allowed;background: 0 0;box-shadow: none;}
+
+.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill: rgba(34,47,62,.5);}
+
+.tox .tox-tbtn:active>*{transform: none;}
+
+.tox .tox-tbtn--md{width: 51px;height: 51px;}
+
+.tox .tox-tbtn--lg{width: 68px;height: 68px;flex-direction: column;}
+
+.tox .tox-tbtn--return{width: 16px;height: unset;align-self: stretch;}
+
+.tox .tox-tbtn--labeled{width: unset;padding: 0 4px;}
+
+.tox .tox-tbtn__vlabel{display: block;margin-bottom: 4px;font-size: 10px;font-weight: 400;letter-spacing: -.025em;white-space: nowrap;}
+
+.tox .tox-tbtn--select{width: auto;padding: 0 4px;margin: 2px 0 3px 0;}
+
+.tox .tox-tbtn__select-label{margin: 0 4px;font-weight: 400;cursor: default;}
+
+.tox .tox-tbtn__select-chevron{align-items: center;display: flex;justify-content: center;width: 16px;}
+
+.tox .tox-tbtn__select-chevron svg{fill: rgba(34,47,62,.7);}
+
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label{width: 7em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+.tox .tox-split-button{display: flex;margin: 2px 0 3px 0;overflow: hidden;border: 0;border-radius: 3px;box-sizing: border-box;}
+
+.tox .tox-split-button:hover{box-shadow: 0 0 0 1px #dee0e2 inset;}
+
+.tox .tox-split-button:focus{color: #222f3e;background: #dee0e2;box-shadow: none;}
+
+.tox .tox-split-button>*{border-radius: 0;}
+
+.tox .tox-split-button__chevron{width: 16px;}
+
+.tox .tox-split-button__chevron svg{fill: rgba(34,47,62,.7);}
+
+.tox .tox-pop .tox-split-button__chevron svg{transform: rotate(-90deg);}
+
+.tox .tox-split-button .tox-tbtn{margin: 0;}
+
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{color: rgba(34,47,62,.5);background: 0 0;box-shadow: none;}
+
+.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{display: flex;padding: 0 0;margin-bottom: -1px;background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color: #fff;border-top: 1px solid #ccc;flex: 0 0 auto;flex-shrink: 0;flex-wrap: wrap;}
+
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height: 0;opacity: 0;visibility: hidden;}
+
+.tox .tox-toolbar__overflow--growing{transition: height .3s ease,opacity .2s linear .1s;}
+
+.tox .tox-toolbar__overflow--shrinking{transition: opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s;}
+
+.tox .tox-pop .tox-toolbar{border-width: 0;}
+
+.tox .tox-toolbar--no-divider{background-image: none;}
+
+.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color: #fff;border: 1px solid #ccc;border-radius: 3px;box-shadow: 0 1px 3px rgba(0,0,0,.15);}
+
+.tox.tox-tinymce-aux:not([dir=rtl]) .tox-toolbar__overflow{margin-left: 4px;}
+
+.tox[dir=rtl] .tox-tbtn__icon-rtl svg{transform: rotateY(180deg);}
+
+.tox[dir=rtl].tox-tinymce-aux .tox-toolbar__overflow{margin-right: 4px;}
+
+.tox .tox-toolbar__group{display: flex;padding: 0 4px;margin: 0 0;align-items: center;flex-wrap: wrap;}
+
+.tox .tox-toolbar__group--pull-right{margin-left: auto;}
+
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right: 1px solid #ccc;}
+
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left: 1px solid #ccc;}
+
+.tox .tox-tooltip{position: relative;display: inline-block;padding: 8px;}
+
+.tox .tox-tooltip__body{padding: 4px 8px;font-size: 14px;font-style: normal;font-weight: 400;color: rgba(255,255,255,.75);text-transform: normal;background-color: #222f3e;border-radius: 3px;box-shadow: 0 2px 4px rgba(34,47,62,.3);}
+
+.tox .tox-tooltip__arrow{position: absolute;}
+
+.tox .tox-tooltip--down .tox-tooltip__arrow{position: absolute;bottom: 0;left: 50%;border-top: 8px solid #222f3e;border-right: 8px solid transparent;border-left: 8px solid transparent;transform: translateX(-50%);}
+
+.tox .tox-tooltip--up .tox-tooltip__arrow{position: absolute;top: 0;left: 50%;border-right: 8px solid transparent;border-bottom: 8px solid #222f3e;border-left: 8px solid transparent;transform: translateX(-50%);}
+
+.tox .tox-tooltip--right .tox-tooltip__arrow{position: absolute;top: 50%;right: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #222f3e;transform: translateY(-50%);}
+
+.tox .tox-tooltip--left .tox-tooltip__arrow{position: absolute;top: 50%;left: 0;border-top: 8px solid transparent;border-right: 8px solid #222f3e;border-bottom: 8px solid transparent;transform: translateY(-50%);}
+
+.tox .tox-well{width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 3px;}
+
+.tox .tox-well>:first-child{margin-top: 0;}
+
+.tox .tox-well>:last-child{margin-bottom: 0;}
+
+.tox .tox-well>:only-child{margin: 0;}
+
+.tox .tox-custom-editor{display: flex;height: 525px;border: 1px solid #ccc;border-radius: 3px;}
+
+.tox .tox-dialog-loading::before{position: absolute;z-index: 1000;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);content: "";}
+
+.tox .tox-tab{cursor: pointer;}
+
+.tox .tox-dialog__content-js{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox .tox-dialog__body-content .tox-collection{display: flex;flex: 1;-ms-flex-preferred-size: auto;}
+
+.tox ul{display: block;list-style-type: disc;-webkit-margin-before: 1em;margin-block-start: 1em;-webkit-margin-after: 1em;margin-block-end: 1em;-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: 0;margin-inline-end: 0;-webkit-padding-start: 40px;padding-inline-start: 40px;}
+
+.tox a{color: #2276d2;cursor: pointer;}
+
+.tox .tox-image-tools-edit-panel{height: 60px;}
+
+.tox .tox-image-tools__sidebar{height: 60px;}
diff --git a/public/resource/tinymce/skins/ui/oxide/skin.mobile.min.css b/public/resource/tinymce/skins/ui/oxide/skin.mobile.min.css
new file mode 100644
index 0000000..14847d0
--- /dev/null
+++ b/public/resource/tinymce/skins/ui/oxide/skin.mobile.min.css
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all: initial;display: block;}
+
+.tinymce-mobile-outer-container *{float: none;padding: 0;margin: 0;line-height: 1;text-shadow: none;white-space: nowrap;cursor: inherit;border: 0;outline: 0;box-sizing: initial;-webkit-tap-highlight-color: transparent;}
+
+.tinymce-mobile-icon-arrow-back::before{content: "\e5cd";}
+
+.tinymce-mobile-icon-image::before{content: "\e412";}
+
+.tinymce-mobile-icon-cancel-circle::before{content: "\e5c9";}
+
+.tinymce-mobile-icon-full-dot::before{content: "\e061";}
+
+.tinymce-mobile-icon-align-center::before{content: "\e234";}
+
+.tinymce-mobile-icon-align-left::before{content: "\e236";}
+
+.tinymce-mobile-icon-align-right::before{content: "\e237";}
+
+.tinymce-mobile-icon-bold::before{content: "\e238";}
+
+.tinymce-mobile-icon-italic::before{content: "\e23f";}
+
+.tinymce-mobile-icon-unordered-list::before{content: "\e241";}
+
+.tinymce-mobile-icon-ordered-list::before{content: "\e242";}
+
+.tinymce-mobile-icon-font-size::before{content: "\e245";}
+
+.tinymce-mobile-icon-underline::before{content: "\e249";}
+
+.tinymce-mobile-icon-link::before{content: "\e157";}
+
+.tinymce-mobile-icon-unlink::before{content: "\eca2";}
+
+.tinymce-mobile-icon-color::before{content: "\e891";}
+
+.tinymce-mobile-icon-previous::before{content: "\e314";}
+
+.tinymce-mobile-icon-next::before{content: "\e315";}
+
+.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content: "\e264";}
+
+.tinymce-mobile-icon-undo::before{content: "\e166";}
+
+.tinymce-mobile-icon-redo::before{content: "\e15a";}
+
+.tinymce-mobile-icon-removeformat::before{content: "\e239";}
+
+.tinymce-mobile-icon-small-font::before{content: "\e906";}
+
+.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content: "\e5ca";}
+
+.tinymce-mobile-icon-small-heading::before{content: "small";}
+
+.tinymce-mobile-icon-large-heading::before{content: "large";}
+
+.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family: sans-serif;font-size: 80%;}
+
+.tinymce-mobile-mask-edit-icon::before{content: "\e254";}
+
+.tinymce-mobile-icon-back::before{content: "\e5c4";}
+
+.tinymce-mobile-icon-heading::before{font-family: sans-serif;font-size: 80%;font-weight: 700;content: "Headings";}
+
+.tinymce-mobile-icon-h1::before{font-weight: 700;content: "H1";}
+
+.tinymce-mobile-icon-h2::before{font-weight: 700;content: "H2";}
+
+.tinymce-mobile-icon-h3::before{font-weight: 700;content: "H3";}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{position: absolute;top: 0;display: flex;width: 100%;height: 100%;background: rgba(51,51,51,.5);align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{display: flex;font-family: sans-serif;font-size: 1em;border-radius: 50%;align-items: center;flex-direction: column;justify-content: space-between;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{display: flex;width: 2.1em;height: 2.1em;border-radius: 50%;align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items: center;display: flex;justify-content: center;flex-direction: column;font-size: 1em;}@media only screen and (min-device-width: 700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size: 1.2em;}}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{display: flex;width: 2.1em;height: 2.1em;color: #207ab7;background-color: #fff;border-radius: 50%;align-items: center;justify-content: center;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{font-family: tinymce-mobile,sans-serif;content: "\e900";}
+
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index: 2;}
+
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized{position: fixed;top: 0;right: 0;bottom: 0;left: 0;display: flex;background: #fff;border: none;flex-direction: column;}
+
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position: relative;}
+
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display: flex;flex-grow: 1;}
+
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display: flex !important;flex-grow: 1;height: auto !important;}
+
+.tinymce-mobile-android-scroll-reload{overflow: hidden;}
+
+:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top: 23px;}
+
+.tinymce-mobile-toolstrip{z-index: 1;display: flex;background: #fff;flex: 0 0 auto;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{display: flex;width: 100%;height: 2.5em;background-color: #fff;border-bottom: 1px solid #ccc;align-items: center;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items: center;display: flex;height: 100%;flex-shrink: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items: center;display: flex;height: 100%;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background: #f44336;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-right: .5em;padding-left: .5em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{display: flex;height: 80%;margin-right: 2px;margin-left: 2px;align-items: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{color: #ccc;background: #c8cbcf;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{color: #eceff1;background: #207ab7;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{display: flex;height: 100%;padding-top: .4em;padding-bottom: .4em;align-items: center;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{position: relative;display: flex;width: 100%;min-height: 1.5em;padding-right: 0;padding-left: 0;overflow: hidden;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display: flex;width: 100%;height: 100%;transition: left cubic-bezier(.4,0,1,1) .15s;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display: flex;flex: 0 0 auto;justify-content: space-between;width: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family: sans-serif;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{position: relative;display: flex;flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{position: absolute;right: 0;height: 100%;padding-right: 2px;font-size: .6em;font-weight: 700;color: #888;background: inherit;border: none;border-radius: 50%;align-self: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display: none;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items: center;display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{display: flex;height: 100%;padding-right: .5em;padding-left: .5em;font-weight: 700;align-items: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility: hidden;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{padding-top: 3px;margin: 0 2px;font-size: 10px;line-height: 10px;color: #ccc;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color: #c8cbcf;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-right: .9em;margin-left: .5em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-right: .5em;margin-left: .9em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{position: relative;display: flex;padding: .28em 0;margin-right: 0;margin-left: 0;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items: center;display: flex;flex-grow: 1;height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{display: flex;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #ccc;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-right: 2em;padding-left: 2em;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items: center;display: flex;flex-grow: 1;height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{display: flex;height: .2em;margin-top: .3em;margin-bottom: .3em;background: linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{width: 1.2em;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #000;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{width: 1.2em;height: .2em;margin-top: .3em;margin-bottom: .3em;background: #fff;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{position: absolute;top: 0;bottom: 0;left: -10px;display: flex;width: .5em;height: .5em;margin: auto;color: #fff;background-color: #455a64;border: .5em solid rgba(136,136,136,0);border-radius: 3em;transition: border 120ms cubic-bezier(.39,.58,.57,1);background-clip: padding-box;align-items: center;justify-content: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border: .5em solid rgba(136,136,136,.39);}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items: center;display: flex;height: 100%;flex: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction: column;justify-content: center;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items: center;display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height: 100%;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display: flex;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{padding-top: .1em;padding-bottom: .1em;padding-left: 5px;font-size: .85em;color: #455a64;background: #fff;border: none;border-radius: 0;flex-grow: 1;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color: #888;}
+
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color: #888;}
+
+.tinymce-mobile-dropup{display: flex;width: 100%;overflow: hidden;background: #fff;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition: height .3s ease-out;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition: height .3s ease-in;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow: 0;}
+
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow: 1;}
+
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 200px;}@media only screen and (orientation: landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 200px;}}@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height: 150px;}}
+
+.tinymce-mobile-styles-menu{position: relative;width: 100%;overflow: hidden;font-family: sans-serif;outline: 4px solid #000;}
+
+.tinymce-mobile-styles-menu [role=menu]{position: absolute;display: flex;width: 100%;height: 100%;flex-direction: column;}
+
+.tinymce-mobile-styles-menu [role=menu].transitioning{transition: transform .5s ease-in-out;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{position: relative;display: flex;padding: 1em 1em;color: #455a64;cursor: pointer;border-bottom: 1px solid #ddd;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{font-family: tinymce-mobile,sans-serif;color: #455a64;content: "\e314";}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{position: absolute;right: 0;padding-right: 1em;padding-left: 1em;font-family: tinymce-mobile,sans-serif;color: #455a64;content: "\e315";}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{position: absolute;right: 0;padding-right: 1em;padding-left: 1em;font-family: tinymce-mobile,sans-serif;}
+
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{display: flex;min-height: 2.5em;padding-right: 1em;padding-left: 1em;color: #455a64;background: #fff;border-top: #455a64;align-items: center;}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform: translate(-100%);}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform: translate(0);}
+
+.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform: translate(100%);}@font-face{font-family: tinymce-mobile;font-style: normal;font-weight: 400;src: url(fonts/tinymce-mobile.woff?8x92w3) format('woff');}@media (min-device-width: 700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size: 25px;}}@media (max-device-width: 700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size: 18px;}}
+
+.tinymce-mobile-icon{font-family: tinymce-mobile,sans-serif;}
+
+.mixin-flex-and-centre{align-items: center;display: flex;justify-content: center;}
+
+.mixin-flex-bar{align-items: center;display: flex;height: 100%;}
+
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{width: 100%;background-color: #fff;}
+
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{position: fixed;right: 2em;bottom: 1em;display: flex;width: 2.1em;height: 2.1em;font-size: 1em;color: #fff;background-color: #207ab7;border-radius: 50%;align-items: center;justify-content: center;}@media only screen and (min-device-width: 700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size: 1.2em;}}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height: 300px;overflow: hidden;}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height: 100%;}
+
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display: none;}
+
+input[type=file]::-webkit-file-upload-button{display: none;}@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom: 50%;}}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..fa3fec8
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,107 @@
+<template>
+  <ConfigProvider :theme="appTheme" :locale="getAntdLocale">
+    <AppProvider>
+      <RouterView />
+    </AppProvider>
+  </ConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  import { watch, ref } from 'vue';
+  import { theme } from 'ant-design-vue';
+  import { ConfigProvider } from 'ant-design-vue';
+  import { AppProvider } from '/@/components/Application';
+  import { useTitle } from '/@/hooks/web/useTitle';
+  import { useLocale } from '/@/locales/useLocale';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
+  import { changeTheme } from '/@/logics/theme/index';
+
+  const appStore = useAppStore();
+  // 解决日期时间国际化问题
+  import 'dayjs/locale/zh-cn';
+  // support Multi-language
+  const { getAntdLocale } = useLocale();
+
+  useTitle();
+  /**
+   * 2024-04-07
+   * liaozhiyang
+   * 暗黑模式下默认文字白色，白天模式默认文字 #333
+   * */
+  const modeAction = (data) => {
+    if (data.token) {
+      if (getDarkMode.value === ThemeEnum.DARK) {
+        Object.assign(data.token, { colorTextBase: 'fff' });
+      } else {
+        Object.assign(data.token, { colorTextBase: '#333' });
+      }
+
+      // 定义主题色 css 变量
+      if (data.token.colorPrimary) {
+        document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
+      }
+    }
+  };
+  // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+  const appTheme: any = ref({});
+  const { getDarkMode } = useRootSetting();
+  watch(
+    () => getDarkMode.value,
+    (newValue) => {
+      delete appTheme.value.algorithm;
+      if (newValue === ThemeEnum.DARK) {
+        appTheme.value.algorithm = theme.darkAlgorithm;
+      }
+      // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
+      if (import.meta.env.PROD) {
+        changeTheme(appStore.getProjectConfig.themeColor);
+      }
+      modeAction(appTheme.value);
+      appTheme.value = {
+        ...appTheme.value,
+      };
+    },
+    { immediate: true }
+  );
+  watch(
+    appStore.getProjectConfig,
+    (newValue) => {
+      const primary = newValue.themeColor;
+      const result = {
+        ...appTheme.value,
+        ...{
+          token: {
+            colorPrimary: primary,
+            wireframe: true,
+            fontSize: 14,
+            colorTextBase: '#333',
+            colorSuccess: '#55D187',
+            colorInfo: primary,
+            borderRadius: 4,
+            sizeStep: 4,
+            sizeUnit: 4,
+            colorWarning: '#EFBD47',
+            colorError: '#ED6F6F',
+            fontFamily:
+              '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
+          },
+        },
+      };
+      appTheme.value = result;
+      modeAction(result);
+    },
+    { immediate: true }
+  );
+  setTimeout(() => {
+    appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
+  }, 300);
+
+</script>
+<style lang="less">
+  // 代码逻辑说明: 【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+  img {
+    display: inline-block;
+  }
+</style>
diff --git a/src/api/common/api.ts b/src/api/common/api.ts
new file mode 100644
index 0000000..fee7386
--- /dev/null
+++ b/src/api/common/api.ts
@@ -0,0 +1,190 @@
+import { defHttp } from '/@/utils/http/axios';
+import { message } from 'ant-design-vue';
+import { useGlobSetting } from '/@/hooks/setting';
+const globSetting = useGlobSetting();
+const baseUploadUrl = globSetting.uploadUrl;
+enum Api {
+  positionList = '/sys/position/list',
+  userList = '/sys/user/list',
+  roleList = '/sys/role/list',
+  queryDepartTreeSync = '/sys/sysDepart/queryDepartTreeSync',
+  queryTreeList = '/sys/sysDepart/queryTreeList',
+  loadTreeData = '/sys/category/loadTreeData',
+  loadDictItem = '/sys/category/loadDictItem',
+  getDictItems = '/sys/dict/getDictItems/',
+  getTableList = '/sys/user/queryUserComponentData',
+  getCategoryData = '/sys/category/loadAllData',
+  refreshDragCache = '/drag/page/refreshCache',
+  refreshDefaultIndexCache = '/sys/sysRoleIndex/cleanDefaultIndexCache',
+  //异步获取部门和岗位
+  queryDepartAndPostTreeSync = '/sys/sysDepart/queryDepartAndPostTreeSync',
+  //查询部门岗位下的用户
+  queryDepartPostUserPageList = '/sys/user/queryDepartPostUserPageList',
+  //查询所选部门的所有父节点ID
+  queryAllParentId = '/sys/sysDepart/queryAllParentId',
+}
+
+/**
+ * 上传父路径
+ */
+export const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
+
+/**
+ * 职务列表
+ * @param params
+ */
+export const getPositionList = (params) => {
+  return defHttp.get({ url: Api.positionList, params });
+};
+
+/**
+ * 用户列表
+ * @param params
+ */
+export const getUserList = (params) => {
+  return defHttp.get({ url: Api.userList, params });
+};
+
+/**
+ * 角色列表
+ * @param params
+ */
+export const getRoleList = (params) => {
+  return defHttp.get({ url: Api.roleList, params });
+};
+
+/**
+ * 异步获取部门树列表
+ */
+export const queryDepartTreeSync = (params?) => {
+  return defHttp.get({ url: Api.queryDepartTreeSync, params });
+};
+/**
+ * 异步获取部门职位树列表
+ */
+export const queryDepartAndPostTreeSync = (params?) => {
+  return defHttp.get({ url: Api.queryDepartAndPostTreeSync, params });
+};
+
+/**
+ * 获取部门树列表
+ */
+export const queryTreeList = (params?) => {
+  return defHttp.get({ url: Api.queryTreeList, params });
+};
+
+/**
+ * 分类字典树控件 加载节点
+ */
+export const loadTreeData = (params?) => {
+  return defHttp.get({ url: Api.loadTreeData, params });
+};
+
+/**
+ * 根据字典code加载字典text
+ */
+export const loadDictItem = (params?) => {
+  return defHttp.get({ url: Api.loadDictItem, params });
+};
+
+/**
+ * 根据字典code加载字典text
+ */
+export const getDictItems = (dictCode) => {
+  return defHttp.get({ url: Api.getDictItems + dictCode }, { joinTime: false });
+};
+/**
+ * 部门用户modal选择列表加载list
+ */
+export const getTableList = (params) => {
+  return defHttp.get({ url: Api.getTableList, params });
+};
+
+/**
+ * 部门岗位用户modal【查询部门岗位下的用户】
+ */
+export const queryDepartPostUserPageList = (params) => {
+  return defHttp.get({ url: Api.queryDepartPostUserPageList, params });
+};
+
+/**
+ * 查询所选部门的所有父节点ID
+ */
+export const queryAllParentId = (params) => {
+  return defHttp.get({ url: Api.queryAllParentId, params });
+};
+
+/**
+ * 加载全部分类字典数据
+ */
+export const loadCategoryData = (params) => {
+  return defHttp.get({ url: Api.getCategoryData, params });
+};
+/**
+ * 文件上传
+ */
+export const uploadFile = (params, success) => {
+  return defHttp.uploadFile({ url: uploadUrl }, params, { success });
+};
+/**
+ * 下载文件
+ * @param url 文件路径
+ * @param fileName 文件名
+ * @param parameter
+ * @returns {*}
+ */
+export const downloadFile = (url, fileName?, parameter?) => {
+  return getFileblob(url, parameter).then((data) => {
+    if (!data || data.size === 0) {
+      message.warning('文件下载失败');
+      return;
+    }
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+      window.navigator.msSaveBlob(new Blob([data]), fileName);
+    } else {
+      let url = window.URL.createObjectURL(new Blob([data]));
+      let link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link); //下载完成移除元素
+      window.URL.revokeObjectURL(url); //释放掉blob对象
+    }
+  });
+};
+
+/**
+ * 下载文件 用于excel导出
+ * @param url
+ * @param parameter
+ * @returns {*}
+ */
+export const getFileblob = (url, parameter) => {
+  return defHttp.get(
+    {
+      url: url,
+      params: parameter,
+      responseType: 'blob',
+    },
+    { isTransformResponse: false }
+  );
+};
+
+/**
+ * 【用于评论功能】自定义文件上传-方法
+ */
+export const uploadMyFile = (url, data) => {
+  return defHttp.uploadMyFile(url, data);
+};
+/**
+ * 刷新仪表盘缓存
+ * @param params
+ */
+export const refreshDragCache = () => defHttp.get({ url: Api.refreshDragCache }, { isTransformResponse: false });
+/**
+ * 刷新默认首页缓存
+ * @param params
+ */
+export const refreshHomeCache = () => defHttp.get({ url: Api.refreshDefaultIndexCache }, { isTransformResponse: false });
diff --git a/src/api/demo/error.ts b/src/api/demo/error.ts
new file mode 100644
index 0000000..fcf089d
--- /dev/null
+++ b/src/api/demo/error.ts
@@ -0,0 +1,5 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export function fireErrorApi() {
+  return defHttp.get({ url: '/demo/error' });
+}
diff --git a/src/api/model/baseModel.ts b/src/api/model/baseModel.ts
new file mode 100644
index 0000000..7a4d797
--- /dev/null
+++ b/src/api/model/baseModel.ts
@@ -0,0 +1,14 @@
+export interface BasicPageParams {
+  page: number;
+  pageSize: number;
+}
+
+export interface BasicFetchResult<T extends any> {
+  items: T[];
+  total: number;
+}
+
+export interface BasicResult<T extends any> {
+  records: T[];
+  total: number;
+}
diff --git a/src/api/sys/menu.ts b/src/api/sys/menu.ts
new file mode 100644
index 0000000..ddd8d85
--- /dev/null
+++ b/src/api/sys/menu.ts
@@ -0,0 +1,61 @@
+import { defHttp } from '/@/utils/http/axios';
+import { getMenuListResultModel } from './model/menuModel';
+import { useUserStoreWithOut } from '@/store/modules/user';
+import { setAuthCache } from '@/utils/auth';
+import { TOKEN_KEY } from '@/enums/cacheEnum';
+import { router } from '@/router';
+import { PageEnum } from '@/enums/pageEnum';
+
+enum Api {
+  GetMenuList = '/sys/permission/getUserPermissionByToken',
+  // 【QQYUN-8487】
+  // SwitchVue3Menu = '/sys/switchVue3Menu',
+}
+
+/**
+ * @description: Get user menu based on id
+ */
+
+export const getMenuList = () => {
+  return new Promise((resolve) => {
+    //为了兼容mock和接口数据
+    defHttp.get<getMenuListResultModel>({ url: Api.GetMenuList }).then((res) => {
+      if (Array.isArray(res)) {
+        resolve(res);
+      } else {
+        resolve(res['menu']);
+      }
+    });
+  });
+};
+
+/**
+ * @description: 获取后台菜单权限和按钮权限
+ */
+export function getBackMenuAndPerms() {
+  return defHttp.get({ url: Api.GetMenuList }).catch((e) => {
+    console.log('接口 getBackMenuAndPerms 异常错误信息：', e);
+    // Token过期失效，直接跳转登录页面 2025-09-08 scott
+    if (e && (e.message.includes('timeout') || e.message.includes('401') || e.message.includes('500'))) {
+      const userStore = useUserStoreWithOut();
+      userStore.setToken('');
+      setAuthCache(TOKEN_KEY, null);
+      router.push({
+        path: PageEnum.BASE_LOGIN,
+        query: {
+          // 传入当前的路由，登录成功后跳转到当前路由
+          redirect: router.currentRoute.value.fullPath,
+        }
+      });
+    }
+  });
+}
+
+/**
+ * 切换成vue3菜单
+ */
+// export const switchVue3Menu = () => {
+//   return new Promise((resolve) => {
+//     defHttp.get({ url: Api.SwitchVue3Menu });
+//   });
+// };
diff --git a/src/api/sys/model/menuModel.ts b/src/api/sys/model/menuModel.ts
new file mode 100644
index 0000000..8d19eea
--- /dev/null
+++ b/src/api/sys/model/menuModel.ts
@@ -0,0 +1,16 @@
+import type { RouteMeta } from 'vue-router';
+export interface RouteItem {
+  path: string;
+  component: any;
+  meta: RouteMeta;
+  name?: string;
+  alias?: string | string[];
+  redirect?: string;
+  caseSensitive?: boolean;
+  children?: RouteItem[];
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type getMenuListResultModel = RouteItem[];
diff --git a/src/api/sys/model/uploadModel.ts b/src/api/sys/model/uploadModel.ts
new file mode 100644
index 0000000..d770c64
--- /dev/null
+++ b/src/api/sys/model/uploadModel.ts
@@ -0,0 +1,5 @@
+export interface UploadApiResult {
+  message: string;
+  code: number;
+  url: string;
+}
diff --git a/src/api/sys/model/userModel.ts b/src/api/sys/model/userModel.ts
new file mode 100644
index 0000000..f1d9be7
--- /dev/null
+++ b/src/api/sys/model/userModel.ts
@@ -0,0 +1,58 @@
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ThirdLoginParams {
+  token: string;
+  thirdType: string;
+}
+
+export interface RoleInfo {
+  roleName: string;
+  value: string;
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+  userId: string | number;
+  token: string;
+  role: RoleInfo;
+  userInfo?: any
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+  roles: RoleInfo[];
+  // 用户id
+  userId: string | number;
+  // 用户名
+  username: string;
+  // 真实名字
+  realname: string;
+  // 头像
+  avatar: string;
+  // 介绍
+  desc?: string;
+  // 用户信息
+  userInfo?: any;
+  // 缓存字典项
+  sysAllDictItems?: any;
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetResultModel {
+  code: number;
+  message: string;
+  result: object;
+  success: Boolean;
+}
diff --git a/src/api/sys/upload.ts b/src/api/sys/upload.ts
new file mode 100644
index 0000000..1a83e93
--- /dev/null
+++ b/src/api/sys/upload.ts
@@ -0,0 +1,32 @@
+import { UploadApiResult } from './model/uploadModel';
+import { defHttp } from '/@/utils/http/axios';
+import { UploadFileParams } from '/#/axios';
+import { useGlobSetting } from '/@/hooks/setting';
+
+const { uploadUrl = '' } = useGlobSetting();
+
+/**
+ * @description: Upload interface
+ */
+export function uploadApi(params: UploadFileParams, onUploadProgress: (progressEvent: ProgressEvent) => void) {
+  return defHttp.uploadFile<UploadApiResult>(
+    {
+      url: uploadUrl,
+      onUploadProgress,
+    },
+    params
+  );
+}
+/**
+ * @description: Upload interface
+ */
+export function uploadImg(params: UploadFileParams, onUploadProgress: (progressEvent: ProgressEvent) => void) {
+  return defHttp.uploadFile<UploadApiResult>(
+    {
+      url: `${uploadUrl}/sys/common/upload`,
+      onUploadProgress,
+    },
+    params,
+    { isReturnResponse: true }
+  );
+}
diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts
new file mode 100644
index 0000000..af355ea
--- /dev/null
+++ b/src/api/sys/user.ts
@@ -0,0 +1,216 @@
+import { defHttp } from '/@/utils/http/axios';
+import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel';
+
+import { ErrorMessageMode } from '/#/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { setAuthCache } from '/@/utils/auth';
+import { TOKEN_KEY } from '/@/enums/cacheEnum';
+import { router } from '/@/router';
+import { PageEnum } from '/@/enums/pageEnum';
+import { ExceptionEnum } from "@/enums/exceptionEnum";
+
+const { createErrorModal } = useMessage();
+enum Api {
+  Login = '/sys/login',
+  phoneLogin = '/sys/phoneLogin',
+  Logout = '/sys/logout',
+  GetUserInfo = '/sys/user/getUserInfo',
+  // 获取系统权限
+  // 1、查询用户拥有的按钮/表单访问权限
+  // 2、所有权限
+  // 3、系统安全模式
+  GetPermCode = '/sys/permission/getPermCode',
+  //新加的获取图形验证码的接口
+  getInputCode = '/sys/randomImage',
+  //获取短信验证码的接口
+  getCaptcha = '/sys/sms',
+  //注册接口
+  registerApi = '/sys/user/register',
+  //校验用户接口
+  checkOnlyUser = '/sys/user/checkOnlyUser',
+  //SSO登录校验
+  validateCasLogin = '/sys/cas/client/validateLogin',
+  //校验手机号
+  phoneVerify = '/sys/user/phoneVerification',
+  //修改密码
+  passwordChange = '/sys/user/passwordChange',
+  //第三方登录
+  thirdLogin = '/sys/thirdLogin/getLoginUser',
+  //第三方登录
+  getThirdCaptcha = '/sys/thirdSms',
+  //获取二维码信息
+  getLoginQrcode = '/sys/getLoginQrcode',
+  //监控二维码扫描状态
+  getQrcodeToken = '/sys/getQrcodeToken',
+}
+
+/**
+ * @description: user login api
+ */
+export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<LoginResultModel>(
+    {
+      url: Api.Login,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    }
+  );
+}
+
+/**
+ * @description: user phoneLogin api
+ */
+export function phoneLoginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<LoginResultModel>(
+    {
+      url: Api.phoneLogin,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    }
+  );
+}
+
+/**
+ * @description: getUserInfo
+ */
+export function getUserInfo() {
+  return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo }, {}).catch((e) => {
+    // Token过期失效，直接跳转登录页面
+    if (e && (e.message.includes('timeout') || e.message.includes('401'))) {
+      //接口不通时跳转到登录界面
+      const userStore = useUserStoreWithOut();
+      userStore.setToken('');
+      setAuthCache(TOKEN_KEY, null);
+      router.push({
+        path: PageEnum.BASE_LOGIN,
+        query: {
+          // 传入当前的路由，登录成功后跳转到当前路由
+          redirect: router.currentRoute.value.fullPath,
+        }
+      });
+    }
+  });
+}
+
+export function getPermCode() {
+  return defHttp.get({ url: Api.GetPermCode });
+}
+
+export function doLogout() {
+  return defHttp.get({ url: Api.Logout });
+}
+
+export function getCodeInfo(currdatetime) {
+  let url = Api.getInputCode + `/${currdatetime}`;
+  return defHttp.get({ url: url });
+}
+/**
+ * @description: 获取短信验证码
+ */
+export function getCaptcha(params) {
+  return new Promise((resolve, reject) => {
+    defHttp.post({ url: Api.getCaptcha, params }, { isTransformResponse: false }).then((res) => {
+      console.log(res);
+      if (res.success) {
+        resolve(true);
+      } else {
+        // 代码逻辑说明: 【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+        if(res.code != ExceptionEnum.PHONE_SMS_FAIL_CODE){
+          createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+          reject();
+        }
+        reject(res);
+      }
+    }).catch((res)=>{
+      createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+      reject();
+    });
+  });
+}
+
+/**
+ * @description: 注册接口
+ */
+export function register(params) {
+  return defHttp.post({ url: Api.registerApi, params }, { isReturnNativeResponse: true });
+}
+
+/**
+ *校验用户是否存在
+ * @param params
+ */
+export const checkOnlyUser = (params) => defHttp.get({ url: Api.checkOnlyUser, params }, { isTransformResponse: false });
+/**
+ *校验手机号码
+ * @param params
+ */
+export const phoneVerify = (params) => defHttp.post({ url: Api.phoneVerify, params }, { isTransformResponse: false });
+/**
+ *密码修改
+ * @param params
+ */
+export const passwordChange = (params) => defHttp.get({ url: Api.passwordChange, params }, { isTransformResponse: false });
+/**
+ * @description: 第三方登录
+ */
+export function thirdLogin(params, mode: ErrorMessageMode = 'modal') {
+  //==========begin 第三方登录/auth2登录需要传递租户id===========
+  let tenantId = "0";
+  if(!params.tenantId){
+    tenantId = params.tenantId;
+  }
+  //==========end 第三方登录/auth2登录需要传递租户id===========
+  return defHttp.get<LoginResultModel>(
+    {
+      url: `${Api.thirdLogin}/${params.token}/${params.thirdType}/${tenantId}`,
+    },
+    {
+      errorMessageMode: mode,
+    }
+  );
+}
+/**
+ * @description: 获取第三方短信验证码
+ */
+export function setThirdCaptcha(params) {
+  return new Promise((resolve, reject) => {
+    defHttp.post({ url: Api.getThirdCaptcha, params }, { isTransformResponse: false }).then((res) => {
+      console.log(res);
+      if (res.success) {
+        resolve(true);
+      } else {
+        createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+        reject();
+      }
+    });
+  });
+}
+
+/**
+ * 获取登录二维码信息
+ */
+export function getLoginQrcode() {
+  let url = Api.getLoginQrcode;
+  return defHttp.get({ url: url });
+}
+
+/**
+ * 监控扫码状态
+ */
+export function getQrcodeToken(params) {
+  let url = Api.getQrcodeToken;
+  return defHttp.get({ url: url, params });
+}
+
+/**
+ * SSO登录校验
+ */
+export async function validateCasLogin(params) {
+  let url = Api.validateCasLogin;
+  return defHttp.get({ url: url, params });
+}
diff --git a/src/assets/icons/calendarNotice.png b/src/assets/icons/calendarNotice.png
new file mode 100644
index 0000000..41eb8f1
Binary files /dev/null and b/src/assets/icons/calendarNotice.png differ
diff --git a/src/assets/icons/collaborationNotice.png b/src/assets/icons/collaborationNotice.png
new file mode 100644
index 0000000..931c29c
Binary files /dev/null and b/src/assets/icons/collaborationNotice.png differ
diff --git a/src/assets/icons/download-count.svg b/src/assets/icons/download-count.svg
new file mode 100644
index 0000000..1c95195
--- /dev/null
+++ b/src/assets/icons/download-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.cls-1{fill:#ffa546;}.cls-2{fill:#ff6059;opacity:0.4;}.cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><title>Asset 91</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-1.svg b/src/assets/icons/dynamic-avatar-1.svg
new file mode 100644
index 0000000..e1553e5
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.31 560.11"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#b46078;}.cls-7{fill:#96426e;}.cls-8{fill:#fff;}.cls-9{fill:#fefdf5;}.cls-10{fill:#f4eae1;}.cls-11{fill:#f9637c;}.cls-12{fill:#ba4264;}.cls-13{fill:#b13a59;}</style></defs><title>Asset 15</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="45.9" cy="303.35" r="41.4"/><path class="cls-2" d="M78.13,278.08a41.39,41.39,0,0,0-57.27,57.27,41.4,41.4,0,1,1,57.27-57.27Z"/><path class="cls-3" d="M45.9,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,265Z"/><circle class="cls-1" cx="345.41" cy="303.35" r="41.4"/><path class="cls-3" d="M345.42,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.42,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.42,265Z"/><path class="cls-1" d="M191.57,88.78h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,193,477.43h0a147.5,147.5,0,0,1-147.5-147.5v-95a146.1,146.1,0,0,1,146.1-146.1Z"/><path class="cls-2" d="M211.7,474.46a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C147.26,95.87,91.42,154.6,81.17,220.06a509,509,0,0,1-13.33,61.86L54.49,328.37C54.49,402.62,140.07,464.5,211.7,474.46Z"/><path class="cls-3" d="M191.41,481.93a152.43,152.43,0,0,1-152-152V234.88A151,151,0,0,1,190,84.28h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM190,93.28a142,142,0,0,0-141.6,141.6v95.05a142.82,142.82,0,0,0,244,101,142,142,0,0,0,42-101V234.88A142,142,0,0,0,192.8,93.28Z"/><path class="cls-4" d="M325.44,305.26v.19C324.89,305.48,325.11,305.35,325.44,305.26Z"/><path class="cls-3" d="M368.43,305.61a3,3,0,0,1-2.94-2.41c-4.06-20.3-24.53-16.89-25.4-16.73a3,3,0,1,1-1-5.91c9.36-1.67,28.17.66,32.33,21.46a3,3,0,0,1-2.35,3.53A3,3,0,0,1,368.43,305.61Z"/><path class="cls-3" d="M21.27,308.26a2.36,2.36,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.75-14.23,7.79-21.26,12.55-24.65a20.94,20.94,0,0,1,10.61-4.05,3,3,0,0,1,.24,6c-.65,0-14.7,1.08-17.45,23.43A3,3,0,0,1,21.27,308.26Z"/><ellipse class="cls-5" cx="184.64" cy="499.11" rx="179.73" ry="52.86"/><path class="cls-6" d="M335.74,353.31c21.15,38.6,14.42,76.22,15.16,112.12l-11.45-12.67a123.72,123.72,0,0,1-30.05,60,44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87A58.87,58.87,0,0,1,233.6,551.2a24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32A51.33,51.33,0,0,1,105.4,511.3c-21.68,1.35-43.33-13.51-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C15.38,468,17.38,382.75,41.91,354.63c0,0,51.63,8.28,83,32.06,8.53,6.48,8.78-2.64,21-7.72,16.48-6.83,45.87-11.63,62.57-11.7,24.41-.11,37.46,30.85,53.1,16.16C303,344.58,335.38,352.66,335.74,353.31Z"/><path class="cls-7" d="M352.35,461,340.9,448.3a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.89,92.89,0,0,1-28.69,48.92A37.38,37.38,0,0,0,267.18,511a58.84,58.84,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.91.11,18.31,4.11,18.65-16.8,2.58-32.53-13.76-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C41.34,476,32.8,461.71,28.19,444.67,44.75,456.74,64.24,465,83.51,472.46c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C349,391.91,351.61,425.08,352.35,461Z"/><path class="cls-3" d="M256.37,560.11l7.72-18.34a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65,9.78-13.42A19.55,19.55,0,0,0,235,535.31c-6.64,5.87-15.71,9.29-25.74,9.47a40.71,40.71,0,0,1-22-5.69c1.08,5.49,1.15,10.37-3.11,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.92-33.69-20.51,1.54,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.05c-18.58,0-36.49-10.43-46.18-26.13l-.46.48-2.31,2.25-2.88-1.46C38,481,27.7,464.56,23.31,441.92c-6.43-33.13.88-73.25,16.66-91.33a4.5,4.5,0,0,1,6.78,5.91c-14.15,16.23-20.57,53-14.61,83.71,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56L61.27,473c5.89,18.64,25.78,32.29,45.3,31.07l3-.19,1.31,2.73c7.82,16.21,18.57,26.05,28.08,30.23A85.81,85.81,0,0,1,135.69,519l-1.27-13.24,9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.85,7.6,14,12.09,24.49,12.09h.66c10.8-.2,20-5,24.71-13l4.51-7.66,3.5,8.16a28.32,28.32,0,0,1,2,14.83,54.25,54.25,0,0,0,19.1-26.84l3.33-10.56,5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.24,88.24,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.58,48.58,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87A127.42,127.42,0,0,1,314.17,513l-4.26,4.66-3-5.54a39.46,39.46,0,0,0-7.37-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M158.08,455.14A10.16,10.16,0,0,1,147.94,445V406.25a10.17,10.17,0,0,1,10.14-10.14H229a10.17,10.17,0,0,1,10.13,10.14V445A10.16,10.16,0,0,1,229,455.14"/><path class="cls-2" d="M240.85,410.47v12a10.15,10.15,0,0,0-9.29-6.1H160.61a10.16,10.16,0,0,0-10.14,10.13v26.74a10.1,10.1,0,0,1-.84-4V410.47a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,240.85,410.47Z"/><path class="cls-3" d="M193.13,394.93c7.32,0,14.47,0,21.37.11l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11-.06,2.21c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06,1-.1,1.41,0,.23,0,.45,0,.68s-.05.55-.08.81a12.38,12.38,0,0,1-.77,3.09,12,12,0,0,1-3.1,4.43,10.12,10.12,0,0,1-6.49,2.68,5.06,5.06,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.23,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.68,5.68,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.1-21.37.1s-14.47,0-21.37-.1l-10.17-.12-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.68,5.68,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07,1-.1,1.41,0,.23,0,.45,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a5.06,5.06,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.43,12.38,12.38,0,0,1-.77-3.09c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11v-.68l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C178.66,395,185.81,394.93,193.13,394.93Z"/><path class="cls-3" d="M54.48,374.11a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.72,50.72,0,0,1,.42-5.48,35.47,35.47,0,0,1,1.17-5.68l10.41,4.56a24.21,24.21,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,54.48,374.11Z"/><path class="cls-3" d="M70,382.66c.81,7.4,4.1,14.79,8.86,21.21A47.32,47.32,0,0,1,64.51,384a38.71,38.71,0,0,1-2.31-12.94,35.09,35.09,0,0,1,2.63-13.62l10,5.38C71,367.93,69.21,375.33,70,382.66Z"/><path class="cls-3" d="M98.32,388.23a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,89,366.14l11.2,1.92A47.79,47.79,0,0,0,98.32,388.23Z"/><path class="cls-3" d="M282.66,384.17a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.21,1.71.88,2.72,2.92A27,27,0,0,1,282.66,384.17Z"/><path class="cls-3" d="M305.19,378.25a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,305.19,378.25Z"/><path class="cls-3" d="M328.91,374.58a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,328.91,374.58Z"/><path class="cls-3" d="M63.25,476.89a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.31c0,.93-.12,1.93-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76,75.5,75.5,0,0,0,1.58,7.62c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A27.16,27.16,0,0,1,67,488.7a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,63.25,476.89Z"/><path class="cls-3" d="M95.32,490.74a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,95.32,490.74Z"/><path class="cls-3" d="M133.57,497.43c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S137.74,512.42,133.57,497.43Z"/><path class="cls-3" d="M246.46,509.58c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.78,59.78,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C244.45,515.67,245.5,512.73,246.46,509.58Z"/><path class="cls-3" d="M276.25,498.2c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.85,68.85,0,0,0,3.11-8.29A89.28,89.28,0,0,0,276.25,498.2Z"/><path class="cls-3" d="M306.39,479c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.77-.33.58-.63,1.14-1,1.66l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72L302,493c.2-.53.41-1.08.62-1.66.47-1.12.85-2.38,1.32-3.67C304.79,485,305.63,482.1,306.39,479Z"/><path class="cls-3" d="M316.6,469.6c1.61-4,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76.28,76.28,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.42-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C313.16,477.18,315,473.53,316.6,469.6Z"/><path class="cls-8" d="M36.38,392.54c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S35.63,396.18,36.38,392.54Z"/><path class="cls-8" d="M37.64,432a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,37.64,432Z"/><path class="cls-3" d="M125.55,391.49h-.49c-5.14-.18-9.18-3.25-12.42-5.71l-.2-.15a157,157,0,0,0-68.06-29.49,4.5,4.5,0,0,1,1.51-8.87,166.07,166.07,0,0,1,72,31.19l.19.15c2.47,1.87,5,3.8,7.31,3.89s4.86-1.61,7.58-3.4l.77-.5C149.09,368.55,169,363,189.86,363h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.3,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,1,1,1.51,8.87,157,157,0,0,0-68.06,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C134.6,388.79,130.5,391.49,125.55,391.49Z"/><path class="cls-3" d="M190.39,345.16a4.49,4.49,0,0,1-4.5-4.5V294.07a4.5,4.5,0,0,1,9,0v46.59A4.5,4.5,0,0,1,190.39,345.16Z"/><path class="cls-2" d="M178.07,222.19c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21a103.64,103.64,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.32"/><path class="cls-2" d="M204.25,225.47c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.21a103.61,103.61,0,0,1,30,3.07c8,2.05,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25-17.57-8.26-39.91-12.29-59.61-10.31"/><path class="cls-6" d="M205.19,214.55c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.66-17-15.81-26.45-20.25-17.57-8.26-39.91-12.28-59.6-10.31"/><path class="cls-3" d="M289.6,259.29a22.42,22.42,0,0,1-3.85-.36c-5-.87-9.51-2.84-13.86-4.75a64.83,64.83,0,0,0-9.76-3.68,98.35,98.35,0,0,0-28.71-2.93c-.88,0-1.78.08-2.68.13-8,.44-18,1-24.83-6.89-6.61-7.6-6.88-19.43-5.11-27.26a5.34,5.34,0,0,1,4.29-3.82,123.23,123.23,0,0,1,62,10.72c9.2,4.33,19.88,12.49,27.87,21.3,5.87,6.47,4.76,11.05,3.58,13.2C297.53,256.7,295.17,259.29,289.6,259.29Zm-51.81-20.82a106.54,106.54,0,0,1,26.58,3.31,73,73,0,0,1,11.13,4.16c4,1.77,7.86,3.44,11.79,4.12a12.72,12.72,0,0,0,2.79.22,12.53,12.53,0,0,0-1.83-2.48c-7.24-8-16.83-15.35-25-19.2a114.19,114.19,0,0,0-54.15-10.17c-.7,5.74.13,12.44,3.63,16.47,4,4.56,10.57,4.2,17.55,3.82l2.79-.15C234.63,238.51,236.21,238.47,237.79,238.47Z"/><path class="cls-6" d="M173.31,210.57c1.68,7.42,1.09,17.32-4.12,23.3-6.08,7-15.66,5.57-23.93,5.22a103.27,103.27,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M88.89,255.31c-5.56,0-7.93-2.59-8.89-4.34-1.19-2.15-2.3-6.72,3.58-13.2,8-8.81,18.66-17,27.86-21.29a123,123,0,0,1,62-10.72,5.3,5.3,0,0,1,4.29,3.82c1.77,7.82,1.49,19.65-5.12,27.25-6.86,7.88-16.82,7.33-24.83,6.89l-2.68-.13a98.35,98.35,0,0,0-28.71,2.93,66.24,66.24,0,0,0-9.75,3.68c-4.36,1.91-8.86,3.88-13.87,4.75A22.42,22.42,0,0,1,88.89,255.31Zm-.47-9a12.45,12.45,0,0,0,2.78-.21c3.93-.69,7.75-2.36,11.8-4.13a73.52,73.52,0,0,1,11.12-4.16,107.61,107.61,0,0,1,31.33-3.2c.92,0,1.85.09,2.8.14,7,.38,13.57.75,17.54-3.82,3.51-4,4.33-10.72,3.63-16.47a114.34,114.34,0,0,0-54.15,10.17c-8.19,3.85-17.78,11.21-25,19.2A12.55,12.55,0,0,0,88.42,246.3Z"/><path class="cls-3" d="M183.32,443.66a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.27-6.88c.3.05,30.64,5.45,44.81-4.67a15.44,15.44,0,0,0,6.65-10.76,3.5,3.5,0,1,1,6.92,1.05,22.47,22.47,0,0,1-9.51,15.42C205.9,442.15,193.63,443.66,183.32,443.66Z"/><path class="cls-3" d="M353.48,315.47a3,3,0,0,1-2.91-2.3,38.7,38.7,0,0,1-1.16-13.9A21,21,0,0,1,355.94,286a3,3,0,0,1,4,4.48,15.11,15.11,0,0,0-4.57,9.53,33.19,33.19,0,0,0,1,11.77,3,3,0,0,1-2.22,3.61A2.79,2.79,0,0,1,353.48,315.47Z"/><path class="cls-3" d="M33.65,315.47a2.79,2.79,0,0,1-.7-.08,3,3,0,0,1-2.23-3.61,33.19,33.19,0,0,0,1-11.77,15.1,15.1,0,0,0-4.56-9.53,3,3,0,1,1,4-4.48,21,21,0,0,1,6.53,13.27,38.93,38.93,0,0,1-1.16,13.9A3,3,0,0,1,33.65,315.47Z"/><path class="cls-8" d="M257.31,169.69a45.27,45.27,0,0,1,7.68,4,35.23,35.23,0,0,1,5.5,4.42c2.85,2.87,4,5.23,3.3,6s-3.05,0-6.42-1.57l-5.81-2.68c-2.18-1-4.56-2-7.09-3s-5-1.88-7.24-2.68l-6.07-2c-3.49-1.2-5.77-2.2-5.73-3.28s2.48-2,6.52-2.08a34.71,34.71,0,0,1,7,.58A45.21,45.21,0,0,1,257.31,169.69Z"/><path class="cls-8" d="M37.56,196.45a14.27,14.27,0,0,1,4.18-5.72c1.52-1.16,2.92-1.47,3.78-.87s1.07,2,.85,3.68a23.93,23.93,0,0,1-1.76,5.89,23.77,23.77,0,0,1-3,5.37c-1.06,1.34-2.18,2.15-3.23,1.95s-1.79-1.42-2-3.31A14.32,14.32,0,0,1,37.56,196.45Z"/><path class="cls-8" d="M59.41,173.58c3.26-1.52,6.63-1.21,7.53.71s-1,4.71-4.29,6.23-6.63,1.2-7.53-.71S56.15,175.1,59.41,173.58Z"/><path class="cls-8" d="M74.62,157.15c2.37-5.05,5.43-8.82,7.45-8.15s2.07,5.88-.51,11.39-6.65,8.81-8.43,7.7S72.26,162.2,74.62,157.15Z"/><path class="cls-9" d="M57.89,159.15V82c0-15.57,6.93-29.64,17.59-35.75l38.7-22.17c46.33-26.53,98.7-26.53,145,0l38.71,22.17C308.57,52.33,315.49,66.4,315.49,82v77.18"/><path class="cls-10" d="M312.46,80.79v19.39c-49.22-48.34-115.1-74.62-177.69-59.93-17.18,4-34.87,11.84-45.35,28.33-13.07,20.57-10.54,52.57,5.53,70C106.58,151.12,122,155,137.89,158h-83V80.79c0-15.58,6.92-29.65,17.59-35.76l38.7-22.17c46.32-26.52,98.7-26.52,145,0L294.88,45C305.55,51.14,312.46,65.21,312.46,80.79Z"/><path class="cls-3" d="M315.3,163.91a4.5,4.5,0,0,1-4.5-4.5V82.23c0-14-6-26.52-15.32-31.85L256.77,28.22c-22.36-12.81-46-19.31-70.27-19.31s-47.91,6.5-70.27,19.31L77.52,50.38C68.22,55.71,62.2,68.22,62.2,82.23v77.18a4.5,4.5,0,0,1-9,0V82.23c0-17.18,7.79-32.75,19.85-39.66l38.7-22.16c47.51-27.21,102-27.21,149.5,0L300,42.57C312,49.48,319.8,65.05,319.8,82.23v77.18A4.49,4.49,0,0,1,315.3,163.91Z"/><path class="cls-11" d="M358.91,168a188.7,188.7,0,0,1-7.86,25.11c-1.65,4.39-15.77,41.8-14.06,43.41-34-31.93-86.3-52.37-145-52.37S81.13,204.56,47.14,236.44c-12.27-38.2-42.51-96.29-6.57-129,10.27-9.35,23.35-13.28,36.1-16.5,72.69-18.36,148.62-20.81,221.57-3.88,12,2.79,24,6.15,34.87,12.74s20.46,16.78,25,30C362.43,142.3,361.73,155.35,358.91,168Z"/><path class="cls-12" d="M61.88,102.48C69,96,77.49,92.12,86.27,89.28q-4.09,1-8.18,2c-12.75,3.22-25.83,7.15-36.1,16.5-35.94,32.71-5.7,90.8,6.57,129a163.52,163.52,0,0,1,17-13.88C52.14,185,28.54,132.83,61.88,102.48Z"/><path class="cls-13" d="M104.58,105a1,1,0,0,1-.19-2c6.25-1.26,12.88-2.39,19.71-3.36a1,1,0,0,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,104.58,105Z"/><path class="cls-13" d="M57.19,120.46a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.63-6.73,35.7-12.92a1,1,0,1,1,.48,1.94c-24.75,6.11-35,12.6-35.1,12.66A1,1,0,0,1,57.19,120.46Z"/><path class="cls-13" d="M220.93,96.32h-.09c-6.83-.61-13.48-1-19.79-1.22a1,1,0,0,1,0-2h0c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M152,99.31a1,1,0,0,1-.16-2l5.35-.91c10.3-1.78,21-3.62,31.71-3.45a1,1,0,1,1,0,2c-10.58-.16-21.13,1.66-31.34,3.42l-5.37.91Z"/><path class="cls-13" d="M326.33,116.8a1,1,0,0,1-.33-.06c-6.55-2.35-13-4.47-19.07-6.29a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.25-.67c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.34,107.21a1,1,0,0,1-.24,0C270.44,101,258.75,102,258.64,102a1,1,0,1,1-.19-2c.48,0,12.09-1.07,37.13,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M105.15,117.87a1,1,0,0,1-.19-2c6.24-1.26,12.88-2.39,19.71-3.36a1,1,0,1,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,105.15,117.87Z"/><path class="cls-13" d="M57.76,133.34a1,1,0,0,1-.54-1.84c.42-.27,10.63-6.73,35.7-12.92a1,1,0,0,1,.48,1.94c-24.69,6.1-35,12.6-35.1,12.66A1,1,0,0,1,57.76,133.34Z"/><path class="cls-13" d="M221.5,109.2h-.09c-6.83-.61-13.49-1-19.79-1.22a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.33.2,13,.62,19.89,1.23a1,1,0,0,1-.08,2Z"/><path class="cls-13" d="M152.57,112.24a1,1,0,0,1-.35-1.94c.46-.17,11.58-4.16,37.21-4.46a1,1,0,0,1,1,1,1,1,0,0,1-1,1c-25.23.3-36.44,4.3-36.55,4.34A1,1,0,0,1,152.57,112.24Z"/><path class="cls-13" d="M326.9,129.68a1,1,0,0,1-.34-.06c-6.54-2.35-12.95-4.47-19.06-6.29a1,1,0,0,1,.58-1.92c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.91,120.09a1,1,0,0,1-.24,0c-24.72-6.23-36.35-5.2-36.46-5.19a1,1,0,0,1-.2-2c.49,0,12.09-1.07,37.14,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M104,132.4a1,1,0,0,1-1-.8,1,1,0,0,1,.78-1.18c6.25-1.25,12.88-2.39,19.71-3.36a1,1,0,0,1,1.14.85,1,1,0,0,1-.85,1.13c-6.8,1-13.4,2.09-19.61,3.34A.65.65,0,0,1,104,132.4Z"/><path class="cls-13" d="M56.62,147.87a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.64-6.73,35.71-12.92a1,1,0,0,1,1.21.73,1,1,0,0,1-.74,1.21c-24.74,6.11-35,12.6-35.1,12.66A1,1,0,0,1,56.62,147.87Z"/><path class="cls-13" d="M220.36,123.73h-.09c-6.83-.62-13.48-1-19.78-1.23a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M151.43,126.77a1,1,0,0,1-.35-1.94c.47-.17,11.58-4.16,37.22-4.46h0a1,1,0,0,1,0,2c-25.29.3-36.43,4.3-36.54,4.34A1.07,1.07,0,0,1,151.43,126.77Z"/><path class="cls-13" d="M325.77,144.22a1,1,0,0,1-.34-.06c-6.54-2.36-12.95-4.48-19.06-6.3a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.24-.67c6.14,1.84,12.59,4,19.16,6.33a1,1,0,0,1-.33,1.95Z"/><path class="cls-13" d="M294.77,134.62l-.24,0c-24.65-6.21-36.35-5.2-36.46-5.19a1,1,0,0,1-.19-2c.48,0,12.08-1.07,37.14,5.24a1,1,0,0,1-.25,2Z"/><path class="cls-8" d="M134.28,55.94a21.68,21.68,0,0,1,9.13,1c2.27.86,3.52,2,3.38,3s-1.6,1.81-3.74,2.36a52.83,52.83,0,0,1-8.1,1.2,52.47,52.47,0,0,1-8.19.23c-2.2-.16-3.76-.65-4.09-1.66s.7-2.36,2.79-3.59A21.52,21.52,0,0,1,134.28,55.94Z"/><path class="cls-8" d="M189.16,54c14.08.87,25.23,3.94,25,6s-11.61,2.48-25.44,1.63S163.63,59,163.64,56.91,175.09,53.15,189.16,54Z"/><path class="cls-3" d="M45,244.59l-2.18-6.77c-1.91-6-4.28-12.43-6.78-19.29-13.82-37.8-31-84.85,1.47-114.42C48.67,94,62.43,89.89,75.57,86.57c75.35-19,152.7-20.37,223.69-3.89C311.33,85.48,324.07,89,335.45,96c12.88,7.83,22.44,19.32,26.92,32.35,4.08,11.86,4.39,25.17.93,40.67h0a191.33,191.33,0,0,1-8,25.71l-.14.4c-10,26.58-13.67,38.62-13.77,40.85a3.89,3.89,0,0,0-1.28-2.7l-6.16,6.56C299.3,207.29,247.58,188.65,192,188.65S84.83,207.26,50.21,239.73ZM197.37,80.24A489.6,489.6,0,0,0,77.77,95.3c-12,3-24.58,6.73-34.17,15.47-28,25.5-12,69.4.92,104.68,1.65,4.52,3.25,8.88,4.7,13.07,36.12-31.14,87.71-48.87,142.8-48.87,54.72,0,106,17.49,142,48.22,1-3.25,2.37-7.53,4.18-12.73,2.27-6.56,5.11-14.37,8.44-23.22l.15-.39A184.81,184.81,0,0,0,354.52,167c3.08-13.83,2.87-25.54-.66-35.78-3.8-11.05-12-20.85-23.09-27.6-9.72-5.91-20.44-9.15-33.54-12.19A441.79,441.79,0,0,0,197.37,80.24ZM358.91,168h0Z"/><path class="cls-8" d="M316.3,283a85,85,0,0,1-.17-10.5c.2-2.77.72-4.63,1.76-4.88s2.37,1.22,3.57,3.91a35.67,35.67,0,0,1,1.44,22.17c-.84,2.82-2,4.45-3,4.34s-1.82-1.89-2.38-4.61A83.3,83.3,0,0,1,316.3,283Z"/><path class="cls-8" d="M310.41,253a8.45,8.45,0,0,1-.74-3.45,4,4,0,0,1,1-2.95,2.9,2.9,0,0,1,3.26-.34,7.5,7.5,0,0,1,3.8,8.75,2.92,2.92,0,0,1-2.48,2.15,4.08,4.08,0,0,1-2.87-1.26A8.5,8.5,0,0,1,310.41,253Z"/><path class="cls-8" d="M300.23,237.15c-1-1.27-.45-3.35,1.22-4.65s3.82-1.33,4.82-.06.44,3.36-1.23,4.66S301.22,238.42,300.23,237.15Z"/><path class="cls-8" d="M258.7,168A36.44,36.44,0,0,1,271.61,173c3,2,4.41,3.89,3.92,4.8s-2.75.81-6,.2-7.55-1.61-12.31-2.55-9.11-1.61-12.36-2.27-5.37-1.37-5.47-2.44,1.91-2.24,5.43-3A36.43,36.43,0,0,1,258.7,168Z"/><path class="cls-8" d="M296.63,182.34a5.05,5.05,0,0,1,2.82,2.8,3,3,0,0,1-.45,3,4.48,4.48,0,0,1-2.58,1.46,4.48,4.48,0,0,1-4.87-2,4.37,4.37,0,0,1-.75-2.87,3,3,0,0,1,1.85-2.44A5.05,5.05,0,0,1,296.63,182.34Z"/><path class="cls-8" d="M320.06,194.45a16.53,16.53,0,0,1,5.18,5.14c1,1.69,1.19,3.15.49,3.94s-2.13.8-3.88.28a28.09,28.09,0,0,1-11.07-7.19c-1.19-1.39-1.77-2.7-1.32-3.67s1.85-1.37,3.8-1.15A16.57,16.57,0,0,1,320.06,194.45Z"/><circle class="cls-3" cx="133.38" cy="300.14" r="22.91"/><circle class="cls-1" cx="143.6" cy="283.11" r="12.7"/><circle class="cls-8" cx="124.18" cy="308.69" r="5.28"/><circle class="cls-3" cx="239.38" cy="305.14" r="22.91"/><circle class="cls-1" cx="249.6" cy="288.11" r="12.7"/><circle class="cls-8" cx="230.18" cy="313.69" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-2.svg b/src/assets/icons/dynamic-avatar-2.svg
new file mode 100644
index 0000000..c4c1722
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.47 510.81"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#ceea57;}.cls-3{fill:#213346;}.cls-4{fill:#95bc4a;}.cls-5{fill:#bfe1ee;}.cls-11,.cls-6{fill:#fff;}.cls-7{fill:#f5a2c6;}.cls-8{fill:#d676a3;}.cls-9{fill:#f9637c;}.cls-10{fill:#cc3656;}.cls-11{opacity:0.5;}.cls-12{fill:#f6aecd;}.cls-13{fill:#86b9f8;}.cls-14{fill:#7662fa;}</style></defs><title>Asset 16</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="191.74" cy="457.95" rx="179.73" ry="52.86"/><circle class="cls-2" cx="334.64" cy="271.05" r="40.33"/><path class="cls-3" d="M334.64,314.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,334.64,314.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,334.64,233.83Z"/><path class="cls-3" d="M356.42,273.33a3,3,0,0,1-2.93-2.41c-3.92-19.6-23.82-16.39-24.67-16.24a3,3,0,0,1-1.05-5.91c9.15-1.63,27.53.65,31.6,21a3,3,0,0,1-2.35,3.53A3.05,3.05,0,0,1,356.42,273.33Z"/><circle class="cls-2" cx="44.83" cy="269.05" r="40.33"/><path class="cls-4" d="M76.23,244.43a40.32,40.32,0,0,0-55.79,55.79,40.33,40.33,0,1,1,55.79-55.79Z"/><path class="cls-3" d="M44.83,312.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,44.83,312.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,44.83,231.83Z"/><path class="cls-2" d="M188.76,62h2.72A142.34,142.34,0,0,1,333.82,204.34v92.6a143.7,143.7,0,0,1-143.7,143.7h0a143.7,143.7,0,0,1-143.7-143.7v-92.6A142.34,142.34,0,0,1,188.76,62Z"/><path class="cls-4" d="M208.37,437.76a143.43,143.43,0,0,1-19.77,1.37c-79,0-143.71-64.66-143.71-143.71V200.94c0-77.25,63.22-140.46,140.47-140.46h6.48a136.88,136.88,0,0,1,16.53,1C138.82,69.71,84.43,129.29,84.43,200.94v94.48C84.43,367.76,138.58,428.06,208.37,437.76Z"/><path class="cls-3" d="M188.6,445.15A148.62,148.62,0,0,1,40.39,296.94v-92.6A147.26,147.26,0,0,1,187.24,57.5H190A147.26,147.26,0,0,1,336.8,204.34v92.6A148.62,148.62,0,0,1,188.6,445.15ZM187.24,66.5A138.26,138.26,0,0,0,49.39,204.34v92.6a139,139,0,0,0,237.52,98.31,138.2,138.2,0,0,0,40.89-98.31v-92.6A138.24,138.24,0,0,0,190,66.5Z"/><path class="cls-5" d="M319.19,272.92v.18C318.65,273.12,318.86,273,319.19,272.92Z"/><path class="cls-3" d="M20.84,273.92a2.31,2.31,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.7-13.89,7.61-20.76,12.26-24.07a20.44,20.44,0,0,1,10.38-4,3,3,0,0,1,.23,6c-.63,0-14.25,1.06-16.92,22.76A3,3,0,0,1,20.84,273.92Z"/><path class="cls-3" d="M190.57,306.5a3,3,0,0,1-3-3V256.91a3,3,0,1,1,6,0V303.5A3,3,0,0,1,190.57,306.5Z"/><path class="cls-6" d="M40.94,365.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S40.22,369.1,40.94,365.6Z"/><path class="cls-6" d="M42.16,403.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,42.16,403.44Z"/><path class="cls-7" d="M137.75,2.51a33.77,33.77,0,0,0-24.37,10.94,34,34,0,0,0-41.26,46,34,34,0,1,0,38.79,54.36,34,34,0,0,0,54.73-27.46c0-.39,0-.78-.06-1.17a34,34,0,1,0,7.68-66.91,34.46,34.46,0,0,0-5.87.62A33.92,33.92,0,0,0,137.75,2.51Z"/><path class="cls-8" d="M89.32,49.48a33.74,33.74,0,0,0,2.8,12.94,34,34,0,0,0,6.82,64,34.92,34.92,0,0,1-6.91.82A34,34,0,0,1,77.12,62.42a34,34,0,0,1,30.57-47.49,34.27,34.27,0,0,1,8.1.82A34,34,0,0,0,89.32,49.48Z"/><path class="cls-3" d="M86.42,130.69A38.47,38.47,0,0,1,66.54,59.3,38.47,38.47,0,0,1,102.61,9.43a38.62,38.62,0,0,1,9.42,1A38,38,0,0,1,137.67,0h0a38.68,38.68,0,0,1,31.88,16c1.2-.14,2.42-.22,3.63-.24a38.47,38.47,0,0,1,28.34,65.18,38.17,38.17,0,0,1-27,11.75,40.18,40.18,0,0,1-4.53-.19,38.46,38.46,0,0,1-58.66,29.07,38.09,38.09,0,0,1-24.22,9.13ZM103.29,18.42h-.53a29.45,29.45,0,0,0-28.94,30,29,29,0,0,0,2.43,11.22l1.75,4L74,65.5a29.47,29.47,0,1,0,33.65,47.16l2.8-2.92,3.2,2.48A29.45,29.45,0,0,0,161.14,88.4c0-.29,0-.58,0-.87l-.53-6.29,6.12,1.55a29.47,29.47,0,1,0,6.65-58.05,28.71,28.71,0,0,0-5.08.54l-3.08.6-1.63-2.68A29.59,29.59,0,0,0,137.83,9h0a29.21,29.21,0,0,0-21.14,9.5l-1.93,2.09L112,19.75A29.32,29.32,0,0,0,103.29,18.42ZM137.75,4.51h0Z"/><polygon class="cls-3" points="225.1 107.59 226.73 112.26 221.44 110.12 233.38 107.94 235.94 107.48 236.58 109.21 243.09 126.94 231.9 111.73 235.06 112.98 224.2 118.39 221.46 119.76 218.98 116.27 215.87 111.89 194.8 82.23 205.66 66.03 225.1 107.59"/><polygon class="cls-3" points="81.49 154.74 81.53 157.94 84.27 155.47 76.54 156.78 74.89 157.06 74.88 158.25 74.82 170.43 78.27 158.75 76.63 160.2 84.41 161.1 86.37 161.33 87.11 158.67 88.04 155.33 95.65 128.68 84.16 125.25 81.49 154.74"/><polygon class="cls-3" points="197.95 122.51 197.9 126.47 194.51 123.42 204.09 125.03 206.15 125.38 206.16 126.86 206.23 141.99 201.95 127.48 203.99 129.29 194.33 130.4 191.89 130.68 190.97 127.38 189.82 123.23 180.37 90.14 194.63 85.89 197.95 122.51"/><polygon class="cls-3" points="149.78 144.16 144.65 143.61 144.93 142.63 148.61 118.63 135.56 121.73 137.8 143.28 138.05 145.98 138.25 148.13 140.4 147.9 147.64 147.1 148.59 155.26 151.23 145.32 151.49 144.35 149.78 144.16"/><circle class="cls-3" cx="241.03" cy="227.35" r="41.06"/><rect class="cls-9" x="238.09" y="225.78" width="15.99" height="86.04" rx="6.5"/><path class="cls-10" d="M249.78,310.38a5.81,5.81,0,0,1-3.69,1.43c-4.42,0-8-5.69-8-12.71V238.48c0-7,3.58-12.7,8-12.7a5.8,5.8,0,0,1,3.69,1.42c-2.56,2.13-4.31,6.38-4.31,11.28V299.1C245.47,304,247.22,308.25,249.78,310.38Z"/><path class="cls-3" d="M246.09,314.81a11,11,0,0,1-11-11v-70a11,11,0,0,1,22,0v70A11,11,0,0,1,246.09,314.81Zm0-86a5,5,0,0,0-5,5v70a5,5,0,1,0,10,0v-70A5,5,0,0,0,246.09,228.78Z"/><path class="cls-6" d="M296.05,131.36a75.23,75.23,0,0,1,6,11c.74,1.78,1.43,3.47,1.95,5.11s1,3.16,1.31,4.57c1.35,5.68,1.2,9.35.22,9.6-2.16.52-6.69-12.4-15.84-26.1-9-13.81-19.06-23.07-17.73-24.84.61-.81,4.05.51,8.73,4,1.17.87,2.42,1.86,3.69,3s2.58,2.43,3.93,3.81A76.62,76.62,0,0,1,296.05,131.36Z"/><path class="cls-6" d="M313.3,178.31c.48,2.42-.82,4.71-2.89,5.12s-4.15-1.22-4.62-3.64.82-4.72,2.9-5.13S312.83,175.89,313.3,178.31Z"/><path class="cls-6" d="M317,202.62c.54,4.11-.73,7.66-2.82,7.94s-4.24-2.84-4.77-6.94.73-7.66,2.83-7.94S316.48,198.52,317,202.62Z"/><circle class="cls-11" cx="229.78" cy="343.53" r="5.28"/><path class="cls-12" d="M138,52.68a29,29,0,0,0-19.37-.87c-4.89,1.53-7.35,3.77-7.61,3.46-.11-.12.35-.84,1.49-1.84A19.53,19.53,0,0,1,118,50.11a27.32,27.32,0,0,1,9.38-1.92,29,29,0,0,1,11.56,2.13,27.34,27.34,0,0,1,9.7,6.66,27.9,27.9,0,0,1,5.25,8,23.39,23.39,0,0,1,1.74,6.16c.19,1.49.1,2.34-.06,2.36-.42.07-.9-3.21-3.31-7.74a30.26,30.26,0,0,0-5.31-7.14A27.38,27.38,0,0,0,138,52.68Z"/><path class="cls-12" d="M108.26,80.3a20.07,20.07,0,0,1,5.12-6.47,17.38,17.38,0,0,1,5.9-3.25,12.35,12.35,0,0,1,4.47-.59c1.06.08,1.62.29,1.61.45,0,.42-2.29.4-5.44,1.83a19,19,0,0,0-5,3.33,20.41,20.41,0,0,0-4.38,5.83,30,30,0,0,0-2.72,13.22c0,3.56.27,5.81-.11,5.89s-1.22-2.07-1.69-5.78a27.59,27.59,0,0,1,0-6.59A24.21,24.21,0,0,1,108.26,80.3Z"/><path class="cls-12" d="M140.43,20.33a25.58,25.58,0,0,1,7.06,2.46,15.34,15.34,0,0,1,4.81,3.92,8.61,8.61,0,0,1,1.76,3.83c.16,1,0,1.54-.14,1.56-.41.07-.75-2-3-4.19a16.3,16.3,0,0,0-4.52-3,28.82,28.82,0,0,0-6.48-2.05,20.5,20.5,0,0,0-6.69-.31,13.86,13.86,0,0,0-5.09,1.69c-2.71,1.55-3.75,3.39-4.09,3.2-.15-.07-.09-.63.35-1.52a9.55,9.55,0,0,1,2.73-3.17,13.55,13.55,0,0,1,5.72-2.52A19.9,19.9,0,0,1,140.43,20.33Z"/><path class="cls-12" d="M186.89,58.43a31.33,31.33,0,0,0,1.87-9.7,11.92,11.92,0,0,0-2.48-7.23,38.35,38.35,0,0,0-3.72-4.12c-.95-1-1.44-1.54-1.33-1.68s.8.18,2,.91a22.1,22.1,0,0,1,4.49,3.76,12.88,12.88,0,0,1,3.43,8.27,30.14,30.14,0,0,1-1.79,10.58,20.67,20.67,0,0,1-2.38,5.16,14,14,0,0,1-3.87,3.81,16.85,16.85,0,0,1-8.49,2.65,18,18,0,0,1-5.85-.68c-1.33-.39-2-.81-1.95-1,.1-.41,3,.43,7.63-.16a16.46,16.46,0,0,0,7.33-2.79A12.18,12.18,0,0,0,184.85,63,19.79,19.79,0,0,0,186.89,58.43Z"/><path class="cls-12" d="M85.1,87.16A13.11,13.11,0,0,1,81,78.56c-.12-2.47.54-3.89.85-3.83s.39,1.48.94,3.56A14,14,0,0,0,94.08,88.92c2.11.43,3.54.36,3.61.74s-1.3,1-3.78,1.06A13.1,13.1,0,0,1,85.1,87.16Z"/><path class="cls-12" d="M133,92.83a24.28,24.28,0,0,0,4.74-.43,20,20,0,0,0,2-.52,16.5,16.5,0,0,0,1.73-.6c2.1-.83,3.36-1.6,3.61-1.3s-.66,1.54-2.78,2.91a13.24,13.24,0,0,1-1.81,1,16.71,16.71,0,0,1-2.21.82,18.08,18.08,0,0,1-10.7-.22,16.23,16.23,0,0,1-2.18-.92,11.2,11.2,0,0,1-1.76-1c-2.06-1.46-2.88-2.81-2.66-3s1.49.54,3.55,1.46c.52.22,1.08.47,1.71.67s1.3.4,2,.6A24.26,24.26,0,0,0,133,92.83Z"/><path class="cls-12" d="M104.17,42.92a20.9,20.9,0,0,1,4-4,17.67,17.67,0,0,1,2.09-1.33,12.45,12.45,0,0,1,2-.9c2.48-.93,4.14-.86,4.19-.55s-1.36.94-3.41,2.17a17.51,17.51,0,0,0-1.62,1.08c-.58.38-1.13.88-1.74,1.37a23.08,23.08,0,0,0-6,8.07c-.29.72-.6,1.4-.8,2.06s-.4,1.29-.55,1.87c-.59,2.31-.7,3.86-1.09,3.89s-.86-1.53-.7-4.17a13.28,13.28,0,0,1,.3-2.13,16.39,16.39,0,0,1,.66-2.4A20.41,20.41,0,0,1,104.17,42.92Z"/><path class="cls-12" d="M163.78,45.73a23.94,23.94,0,0,0,1.71-3.89,22.19,22.19,0,0,0,.81-3.4c.32-2,.34-3.32.72-3.38s.95,1.21,1.09,3.46a14.52,14.52,0,0,1-.35,3.94A16.69,16.69,0,0,1,163,50.82a14.36,14.36,0,0,1-3.2,2.32c-2,1-3.43,1.14-3.54.85s1-1.06,2.54-2.35a22.65,22.65,0,0,0,2.5-2.45A23.79,23.79,0,0,0,163.78,45.73Z"/><path class="cls-6" d="M173.73,70.51a21.63,21.63,0,0,0,8.47-4.27c1.93-1.57,3-3,3.68-2.73.32.11.49.65.41,1.55a8.73,8.73,0,0,1-1.32,3.5,16.46,16.46,0,0,1-10,6.9,22.68,22.68,0,0,1-11.76-.33c-2.83-.87-4.37-1.93-4.22-2.6s2-.89,4.71-1A47.09,47.09,0,0,0,173.73,70.51Z"/><path class="cls-6" d="M186.07,51.39c.2-1.77,1.49-3.08,2.89-2.93s2.38,1.72,2.19,3.49-1.49,3.08-2.89,2.92S185.88,53.16,186.07,51.39Z"/><path class="cls-6" d="M183.86,41.8a2.6,2.6,0,0,1,4.14-3,2.61,2.61,0,0,1-4.14,3Z"/><path class="cls-13" d="M330,302c20.28,37,13.83,73.05,14.54,107.47l-11-12.15a118.62,118.62,0,0,1-28.8,57.47,42.38,42.38,0,0,0-13.34-14.7A89.09,89.09,0,0,1,263.9,487a35.8,35.8,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29,23.17,23.17,0,0,0,2.52-22.37c-11.17,19-43.3,19.54-55.14,1-.82,3.75-.22,8.67,3.61,9-16.11,2.48-30.85-4.3-41.93-16.25a27.05,27.05,0,0,0,9,17.56,49.18,49.18,0,0,1-40.92-27.17c-20.77,1.29-41.53-12.94-47.8-32.79a9.91,9.91,0,0,1-2.59,9.51c-35.89-18.22-34-99.94-10.46-126.89,0,0,49.48,7.94,79.51,30.74,6.43,4.88,14.43-4.6,23.27-7.4,17.51-5.53,38.32-11.15,56.88-11.22,23.39-.1,35.9,29.56,50.89,15.49C298.57,293.65,329.64,301.39,330,302Z"/><path class="cls-14" d="M345.91,405.22l-11-12.16a118.76,118.76,0,0,1-28.81,57.48,42.3,42.3,0,0,0-13.34-14.7,89,89,0,0,1-27.51,46.89,35.83,35.83,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29A23.2,23.2,0,0,0,236,465.06c-11.17,19-43.3,19.54-55.14,1-.83,3.75.11,17.55,3.94,17.87-16.1,2.48-31.18-13.18-42.26-25.13.64,6.7,2.31,18.78,7.36,23.23-17.16-.88-31.84-17.37-39.3-32.84-20.78,1.29-41.53-12.95-47.8-32.79a9.91,9.91,0,0,1-2.58,9.51c-12.41-6.3-20.59-20-25-36.31,15.87,11.57,34.55,19.51,53,26.63,12.54,4.82,25.24,9.42,38.46,11.83,12.82,2.33,25.92,2.56,39,2.79,36.17.62,73.84.94,106.53-14.59,9.37-4.45,19.26-12.08,18.93-22.46-.37-11.86-13.35-18.63-24.42-22.88,23.58-3.5,42.91-21.78,53.67-43.05a131.59,131.59,0,0,0,9.48-25.3L333,305C342.73,339,345.19,370.81,345.91,405.22Z"/><path class="cls-3" d="M253.41,500.93l7.73-18.34a31,31,0,0,0,2.25-14.75,61,61,0,0,1-28.12,25.32l-15.22,6.65,9.79-13.42a18.51,18.51,0,0,0,3.37-9.49,38.29,38.29,0,0,1-24.46,8.83,39.29,39.29,0,0,1-20.87-5.26c1,5.16.93,9.73-3.16,11.61l-1.89.86-1.88-.86c-13-6-23.27-12.19-31.89-19.33,1.42,5.57,3,7.6,3.8,8.31l9.71,8.53-12.91-.66c-18.37-.93-33.64-18.1-41.8-33.56-17.77,0-34.88-10-44.23-24.92l-.28.28L61,433l-2.87-1.46c-13.73-7-23.61-22.79-27.84-44.54-6.17-31.81.86-70.33,16-87.71a4.5,4.5,0,1,1,6.78,5.92c-13.31,15.26-19.57,51.18-14,80.07,3.26,16.82,10.08,29.4,19.38,36a5.07,5.07,0,0,0-.1-2.09l8.63-2.54c5.62,17.79,24.6,30.81,43.23,29.66l3-.19,1.31,2.72c7.38,15.29,17.47,24.65,26.45,28.73a83.68,83.68,0,0,1-3-16.73l-1.27-13.24,9.05,9.75c8.53,9.2,18.86,16.65,33,23.73-.31-1.46-.69-2.95-1-4-1.25-5-1.93-7.92-1.4-10.33l2.33-10.64,5.86,9.18c4.71,7.38,13.68,11.69,24,11.5s19.08-4.81,23.52-12.35l4.51-7.66,3.51,8.17a27.18,27.18,0,0,1,2,13.86A51.87,51.87,0,0,0,260,453.4l3.32-10.56,5,9.88a40,40,0,0,1,4.21,17.36,84.32,84.32,0,0,0,15.89-33.6l1.43-6.48,5.49,3.72a47,47,0,0,1,11.36,10.93,115.09,115.09,0,0,0,23.84-50.82l1.7-8.88,10,11.05c2-35.79-3.31-65-16.46-91.39a4.5,4.5,0,1,1,8-4C349,331,354.25,364.9,350.39,407.23l-.93,10.24-12.07-13.36a122.34,122.34,0,0,1-27.94,51.07l-4.26,4.65-3-5.53a37.69,37.69,0,0,0-6.81-9,93.54,93.54,0,0,1-27.08,42.37Z"/><path class="cls-2" d="M159.69,399.62a9.74,9.74,0,0,1-9.71-9.71V352.76a9.74,9.74,0,0,1,9.71-9.71h68a9.75,9.75,0,0,1,9.72,9.71v37.15a9.75,9.75,0,0,1-9.72,9.71"/><path class="cls-4" d="M239,356.81v11.52a9.75,9.75,0,0,0-8.91-5.85h-68a9.74,9.74,0,0,0-9.71,9.71v25.63a9.65,9.65,0,0,1-.81-3.87V356.81a9.75,9.75,0,0,1,9.71-9.72h68A9.76,9.76,0,0,1,239,356.81Z"/><path class="cls-3" d="M193.29,341.91c7,0,13.87,0,20.49.1l9.74.12,2.37,0,1.18,0h.33l.43,0,.85.06a14.26,14.26,0,0,1,6.29,2.29,14.06,14.06,0,0,1,6.23,10.73l0,.78v.65l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.45,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44-.05.66s-.05.52-.08.78a11.57,11.57,0,0,1-.74,3,11.41,11.41,0,0,1-3,4.24,9.64,9.64,0,0,1-6.23,2.57,4.68,4.68,0,0,1-1.7-.26c-.38-.14-.55-.3-.55-.46s.17-.34.49-.52l1.35-.66a10.23,10.23,0,0,0,3.89-3.22,8.51,8.51,0,0,0,1.34-3.09,8,8,0,0,0,.12-1.84l0-.5c0-.22,0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.43l0-.3a5.41,5.41,0,0,0-4.95-4.71h-.73l-1.18,0-2.37,0-9.74.12c-6.62.06-13.47.1-20.49.1s-13.87,0-20.48-.1l-9.74-.12-2.38,0-1.18,0h-.73a5.42,5.42,0,0,0-4.94,4.71l0,.3,0,.16v.27l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.46,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44,0,.66l0,.5a7.43,7.43,0,0,0,.13,1.84,8.18,8.18,0,0,0,1.34,3.09,10.21,10.21,0,0,0,3.88,3.22l1.35.66c.32.18.5.35.5.52s-.18.32-.55.46A4.74,4.74,0,0,1,157,404a9.6,9.6,0,0,1-6.22-2.57,11.32,11.32,0,0,1-3-4.24,12,12,0,0,1-.74-3c0-.26-.06-.57-.08-.78s0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.65l0-.78a14.08,14.08,0,0,1,6.22-10.73,14.31,14.31,0,0,1,6.29-2.29l.86-.06.43,0h.32l1.18,0,2.38,0,9.74-.12C179.42,342,186.28,341.91,193.29,341.91Z"/><path class="cls-3" d="M60.39,322a37.09,37.09,0,0,0,.47,9,37.78,37.78,0,0,0,2.92,8.91,39.35,39.35,0,0,1-5.49-8A40.74,40.74,0,0,1,55,322.37a44.5,44.5,0,0,1-1-10.27,49.21,49.21,0,0,1,.4-5.25,33.42,33.42,0,0,1,1.13-5.44l10,4.36a23.19,23.19,0,0,0-1.89,3.53,41.21,41.21,0,0,0-1.54,4A38.35,38.35,0,0,0,60.39,322Z"/><path class="cls-3" d="M75.3,330.15c.78,7.09,3.93,14.18,8.49,20.33A45.39,45.39,0,0,1,70,331.43,37.16,37.16,0,0,1,67.79,319,33.53,33.53,0,0,1,70.32,306l9.59,5.16C76.2,316,74.51,323.12,75.3,330.15Z"/><path class="cls-3" d="M102.41,335.48A49,49,0,0,0,109,355a51.46,51.46,0,0,1-11.83-18.14,54.08,54.08,0,0,1-3.61-22.51l10.73,1.85A45.78,45.78,0,0,0,102.41,335.48Z"/><path class="cls-3" d="M279.1,331.6a25.9,25.9,0,0,1-.28,8.41c-.49,2.14-1.22,3.39-1.88,3.33-1.37-.13-2-5.16-2.7-11.16s-1.3-11,0-11.49c.63-.2,1.64.84,2.61,2.8A25.74,25.74,0,0,1,279.1,331.6Z"/><path class="cls-3" d="M300.7,325.92a34.06,34.06,0,0,1-2.28,11.66c-1.17,2.83-2.4,4.35-3,4.13-1.32-.5.23-7.41.4-15.92s-.91-15.49.43-15.91c.62-.19,1.77,1.39,2.79,4.28A34.18,34.18,0,0,1,300.7,325.92Z"/><path class="cls-3" d="M323.44,322.4a51.55,51.55,0,0,1,.48,8.84,42.08,42.08,0,0,1-.84,7.17c-.86,4-2,6.32-2.66,6.19-1.41-.31-.09-10-1.83-21.5s-5.47-20.53-4.18-21.19c.58-.3,2.31,1.61,4.22,5.24a44.14,44.14,0,0,1,2.79,6.64A53.12,53.12,0,0,1,323.44,322.4Z"/><path class="cls-3" d="M68.8,420.47a39.61,39.61,0,0,1-.25-8.28,35.94,35.94,0,0,1,.5-3.58,25.93,25.93,0,0,1,.76-3c1.14-3.68,2.57-5.64,3.16-5.43s.45,2.52.24,6.05c0,.89-.12,1.85-.12,2.88s0,2.13,0,3.28a59.18,59.18,0,0,0,2.11,14.73c.33,1.1.6,2.17.94,3.14s.63,1.89.92,2.73c1.2,3.32,2,5.46,1.47,5.87s-2.43-1.11-4.56-4.32a23.37,23.37,0,0,1-1.57-2.71,33.94,33.94,0,0,1-1.49-3.3A40.12,40.12,0,0,1,68.8,420.47Z"/><path class="cls-3" d="M99.55,433.75a50.42,50.42,0,0,1-.07-13.35c.45-3.36,1.12-5.4,1.79-5.39s1.24,2.09,1.67,5.4.77,7.81,1.45,12.64c.35,2.41.78,4.67,1.25,6.7.27,1,.47,2,.76,2.85l.38,1.3c.14.41.27.8.39,1.18,1,3,1.81,4.94,1.24,5.37s-2.36-.88-4.34-3.84c-.24-.37-.49-.77-.74-1.18s-.46-.87-.7-1.33a28,28,0,0,1-1.31-3.05A39.4,39.4,0,0,1,99.55,433.75Z"/><path class="cls-3" d="M136.2,440.16c-4-14.35-4.59-26.51-3.28-26.67s4.05,11.36,8,25.35,7.6,25.27,6.32,25.82S140.2,454.53,136.2,440.16Z"/><path class="cls-3" d="M244.41,451.81c1.82-6.05,3.09-11.74,4.22-15.84s2.08-6.65,2.75-6.55.91,2.79.66,7.11a75.23,75.23,0,0,1-2.94,16.7,56.28,56.28,0,0,1-3.52,8.82c-.71,1.29-1.35,2.52-2.1,3.61-.37.54-.71,1.07-1.06,1.56l-1.08,1.38c-2.84,3.46-5.24,4.92-5.69,4.49s.9-2.74,2.8-6.4c.24-.45.48-.93.74-1.43l.74-1.58c.54-1.08,1-2.29,1.55-3.52C242.49,457.64,243.49,454.83,244.41,451.81Z"/><path class="cls-3" d="M273,440.9c1.29-7.37,2-14.28,2.87-19.27s1.74-8,2.41-8,1,3.21,1,8.27a116.76,116.76,0,0,1-1.5,19.83,57.15,57.15,0,0,1-2.95,10.79,40,40,0,0,1-4.24,8.17c-3,4.36-5.79,6.2-6.23,5.76s1.21-3.06,3.23-7.47a65,65,0,0,0,3-7.94A85.72,85.72,0,0,0,273,440.9Z"/><path class="cls-3" d="M301.86,422.49c1.43-6,2.41-11.53,3.33-15.56s1.76-6.53,2.43-6.46,1,2.67,1,6.86a74.69,74.69,0,0,1-2,16.31,56.91,56.91,0,0,1-2.88,8.73c-.61,1.29-1.15,2.53-1.8,3.62-.31.55-.6,1.09-.91,1.59l-.95,1.41c-2.48,3.54-4.67,5.16-5.16,4.77s.59-2.76,2.14-6.45l.6-1.45q.3-.76.6-1.59c.45-1.08.82-2.28,1.26-3.51C300.32,428.25,301.13,425.46,301.86,422.49Z"/><path class="cls-3" d="M311.64,413.48c1.55-3.78,2.81-7.46,3.86-10.85.48-1.71,1-3.33,1.35-4.87s.75-3,1.06-4.28c1.21-5.28,1.85-8.64,2.57-8.62s1.22,3.49.85,9.12c-.1,1.41-.23,2.95-.5,4.59s-.58,3.38-1,5.21a72.61,72.61,0,0,1-9.28,22.38c-1,1.56-2,3-3,4.36s-2,2.53-2.89,3.59c-3.73,4.24-6.6,6.27-7.06,5.84s1.41-3.32,4.28-7.9c.72-1.15,1.51-2.4,2.29-3.78s1.62-2.84,2.49-4.39C308.34,420.75,310.06,417.25,311.64,413.48Z"/><path class="cls-6" d="M42.94,339.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S42.22,343.1,42.94,339.6Z"/><path class="cls-6" d="M44.16,377.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,44.16,377.44Z"/><path class="cls-3" d="M128.52,338.8H128c-5-.18-8.88-3.13-12-5.51l-.19-.14a150.17,150.17,0,0,0-65.16-28.23A4.5,4.5,0,0,1,52.19,296,159.48,159.48,0,0,1,121.27,326l.19.15c2.35,1.77,4.77,3.61,6.9,3.69s4.58-1.53,7.15-3.22l.75-.49c14.75-9.64,33.89-14.95,53.9-14.95h0c20,0,39.15,5.31,53.9,14.95l.74.48c2.58,1.7,5,3.3,7.15,3.23s4.56-1.92,6.9-3.69l.19-.15A159.59,159.59,0,0,1,328.13,296a4.5,4.5,0,0,1,1.52,8.88,150.17,150.17,0,0,0-65.16,28.23l-.19.14c-3.13,2.38-7,5.33-12,5.51s-9.12-2.53-12.42-4.7l-.71-.47c-27.47-17.94-70.5-17.94-98,0l-.72.47C137.27,336.2,133.32,338.8,128.52,338.8Z"/><path class="cls-3" d="M210.09,385.31h-36a3.5,3.5,0,1,1,0-7h36a3.5,3.5,0,0,1,0,7Z"/><circle class="cls-14" cx="256.32" cy="340.31" r="34.5"/><circle class="cls-6" cx="246.03" cy="330.35" r="40.04"/><circle class="cls-11" cx="250.78" cy="312.53" r="5.28"/><polygon class="cls-3" points="141.26 29.28 141.29 32.05 143.66 29.92 136.97 31.05 135.54 31.29 135.53 32.32 135.48 42.88 138.47 32.75 137.05 34.01 143.79 34.79 145.49 34.99 146.13 32.68 146.93 29.79 152.37 10.18 143.58 3.72 141.26 29.28"/><polygon class="cls-3" points="131.05 92.41 129.84 89.02 133.69 90.55 125.03 92.19 123.17 92.54 122.7 91.28 117.89 78.43 126.08 89.43 123.78 88.53 131.65 84.56 133.64 83.55 135.46 86.07 137.73 89.24 153.18 110.69 145.37 122.52 131.05 92.41"/><circle class="cls-3" cx="123.96" cy="232.98" r="22.91"/><circle class="cls-2" cx="134.18" cy="215.95" r="12.7"/><circle class="cls-6" cx="114.77" cy="241.53" r="5.28"/><circle class="cls-3" cx="242.84" cy="330.2" r="15.77"/><circle class="cls-6" cx="255.89" cy="340.77" r="10.18"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-3.svg b/src/assets/icons/dynamic-avatar-3.svg
new file mode 100644
index 0000000..81145f9
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.79 532.35"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#e99a4f;}.cls-7{fill:#ce7149;}.cls-8,.cls-9{fill:#fff;}.cls-9{opacity:0.5;}</style></defs><title>Asset 17</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="345.9" cy="275.59" r="41.4"/><path class="cls-2" d="M333.5,312.37a41.4,41.4,0,1,0,0-79.56,41.41,41.41,0,0,1,0,79.56Z"/><circle class="cls-1" cx="45.9" cy="275.59" r="41.4"/><path class="cls-2" d="M55.4,314.37a41.4,41.4,0,1,1,0-79.56,41.41,41.41,0,0,0,0,79.56Z"/><path class="cls-3" d="M45.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,237.27Z"/><path class="cls-3" d="M21.27,281a3.1,3.1,0,0,1-.43,0,3.51,3.51,0,0,1-3.05-3.9c1.77-14.41,7.92-21.55,12.76-25a21.46,21.46,0,0,1,10.88-4.14,3.5,3.5,0,0,1,.28,7c-.65,0-14.28,1.11-17,23A3.5,3.5,0,0,1,21.27,281Z"/><path class="cls-3" d="M33.65,288.21a3.88,3.88,0,0,1-.82-.09,3.5,3.5,0,0,1-2.59-4.22,32.88,32.88,0,0,0,1-11.59,14.61,14.61,0,0,0-4.4-9.21,3.5,3.5,0,1,1,4.65-5.23,21.52,21.52,0,0,1,6.69,13.58,39.36,39.36,0,0,1-1.16,14.07A3.5,3.5,0,0,1,33.65,288.21Z"/><path class="cls-3" d="M345.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.9,237.27Z"/><path class="cls-3" d="M370.52,281a3.5,3.5,0,0,1-3.47-3.07c-2.69-21.94-16.39-23-17-23a3.52,3.52,0,0,1-3.32-3.66,3.47,3.47,0,0,1,3.6-3.34,21.46,21.46,0,0,1,10.88,4.14c4.85,3.45,11,10.59,12.76,25A3.5,3.5,0,0,1,371,281,3,3,0,0,1,370.52,281Z"/><path class="cls-3" d="M358.15,288.21a3.49,3.49,0,0,1-3.4-2.69,39.2,39.2,0,0,1-1.17-14.08,21.56,21.56,0,0,1,6.69-13.57,3.5,3.5,0,1,1,4.66,5.23,14.56,14.56,0,0,0-4.4,9.21,32.42,32.42,0,0,0,1,11.59,3.52,3.52,0,0,1-2.6,4.22A3.72,3.72,0,0,1,358.15,288.21Z"/><path class="cls-1" d="M196.57,61h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,198,449.67h0a147.5,147.5,0,0,1-147.5-147.5v-95A146.1,146.1,0,0,1,196.57,61Z"/><path class="cls-2" d="M216.7,446.7a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C152.26,68.11,96.42,126.84,86.17,192.3a509.6,509.6,0,0,1-13.33,61.87L59.49,300.61C59.49,374.86,145.07,436.74,216.7,446.7Z"/><path class="cls-3" d="M196.41,454.17a152.43,152.43,0,0,1-152-152V207.12A151,151,0,0,1,195,56.52h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM195,65.52a142,142,0,0,0-141.6,141.6v95.05a143.43,143.43,0,0,0,143,143h0a143.43,143.43,0,0,0,143-143V207.12A142,142,0,0,0,197.8,65.52Z"/><path class="cls-4" d="M330.44,277.5v.2C329.89,277.72,330.11,277.59,330.44,277.5Z"/><ellipse class="cls-5" cx="189.64" cy="471.35" rx="179.73" ry="52.86"/><path class="cls-6" d="M340.74,325.56c21.15,38.59,14.42,76.21,15.16,112.11L344.45,425A123.67,123.67,0,0,1,314.4,485a44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87,58.87,58.87,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32,51.33,51.33,0,0,1-42.69-28.35c-21.68,1.35-43.33-13.5-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C20.38,440.24,22.38,355,46.91,326.87c0,0,51.63,8.28,83,32.07,20,15.18,54.48-19.31,83.62-19.43,24.41-.11,37.46,30.85,53.1,16.16C308,316.82,340.38,324.9,340.74,325.56Z"/><path class="cls-7" d="M357.35,433.22,345.9,420.54a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.85,92.85,0,0,1-28.69,48.92,37.38,37.38,0,0,0-1.06-30.87A58.84,58.84,0,0,1,240.05,519a24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.92.11,18.31,4.11,18.65-16.8,2.58-32.53-13.75-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C46.34,448.23,37.8,434,33.19,416.91,49.75,429,69.24,437.27,88.51,444.7c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C354,364.15,356.61,397.32,357.35,433.22Z"/><path class="cls-6" d="M180.3,341l-49.84,18.58-82-37.21a62.33,62.33,0,0,0-12.09,21.43A237,237,0,0,1,86,361.31a244.47,244.47,0,0,1,22.74,12.33c4,2.46,12.45,10.51,17.42,9.89a10.29,10.29,0,0,0,4.12-1.85c45.61-29.33,79.08-30.62,132.55-21.06L237.74,346Z"/><path class="cls-3" d="M261.36,532.35,269.09,514a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65L236.41,518A19.55,19.55,0,0,0,240,507.55c-6.64,5.87-15.71,9.29-25.74,9.47a40.79,40.79,0,0,1-22.06-5.69c1.1,5.49,1.16,10.38-3.1,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.91-33.69-20.51,1.53,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.06c-18.58,0-36.48-10.43-46.17-26.13l-.47.48L60.12,462l-2.88-1.46C43,453.25,32.7,436.8,28.31,414.16,21.88,381,29.19,340.91,45,322.83a4.5,4.5,0,1,1,6.78,5.92c-14.15,16.22-20.57,53-14.61,83.7,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56l8.64-2.54c5.89,18.64,25.8,32.28,45.3,31.07l3-.19,1.32,2.73C123.72,495,134.47,504.86,144,509a85.81,85.81,0,0,1-3.29-17.82L139.42,478l9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.95,7.76,14.36,12.28,25.15,12.09s20-5,24.71-13l4.51-7.66,3.5,8.17a28.27,28.27,0,0,1,2,14.82,54.35,54.35,0,0,0,19.11-26.83L271.21,473l5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.11,88.11,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.76,48.76,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87a127.51,127.51,0,0,1-29.2,53.55l-4.26,4.65-3-5.54a39.94,39.94,0,0,0-7.38-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M163.08,427.38a10.16,10.16,0,0,1-10.14-10.13V378.49a10.17,10.17,0,0,1,10.14-10.14H234a10.17,10.17,0,0,1,10.13,10.14v38.76A10.16,10.16,0,0,1,234,427.38"/><path class="cls-2" d="M245.85,382.71v12a10.15,10.15,0,0,0-9.29-6.1H165.61a10.16,10.16,0,0,0-10.14,10.13V425.5a10.1,10.1,0,0,1-.84-4V382.71a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,245.85,382.71Z"/><path class="cls-3" d="M198.13,367.18c7.32,0,14.47,0,21.37.1l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11L248,386c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06.95-.1,1.41,0,.23,0,.46,0,.68s-.05.55-.08.81a12.57,12.57,0,0,1-.77,3.1,12,12,0,0,1-3.1,4.42A10.12,10.12,0,0,1,236,432a4.84,4.84,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.22,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.7,5.7,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.11-21.37.11s-14.47,0-21.37-.11L166.59,377l-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.7,5.7,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07.95-.1,1.41,0,.23,0,.46,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a4.84,4.84,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.42,12.57,12.57,0,0,1-.77-3.1c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11V382l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C183.66,367.21,190.81,367.18,198.13,367.18Z"/><path class="cls-3" d="M59.48,346.35a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.92,50.92,0,0,1,.42-5.48,35.69,35.69,0,0,1,1.17-5.68l10.41,4.56a24.7,24.7,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,59.48,346.35Z"/><path class="cls-3" d="M75,354.9c.81,7.4,4.1,14.8,8.86,21.21a47.35,47.35,0,0,1-14.38-19.87,38.82,38.82,0,0,1-2.31-12.95,35.09,35.09,0,0,1,2.63-13.62l10,5.38C76,340.17,74.21,347.57,75,354.9Z"/><path class="cls-3" d="M103.32,360.47a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,94,338.38l11.2,1.92A47.79,47.79,0,0,0,103.32,360.47Z"/><path class="cls-3" d="M287.66,356.41a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.22,1.71.87,2.72,2.91A27,27,0,0,1,287.66,356.41Z"/><path class="cls-3" d="M310.19,350.49a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,310.19,350.49Z"/><path class="cls-3" d="M333.91,346.82a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,333.91,346.82Z"/><path class="cls-3" d="M68.25,449.13a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.32c0,.92-.12,1.92-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76A75.5,75.5,0,0,0,74.89,456c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A26.15,26.15,0,0,1,72,460.94a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,68.25,449.13Z"/><path class="cls-3" d="M100.32,463a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,100.32,463Z"/><path class="cls-3" d="M138.57,469.67c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S142.74,484.66,138.57,469.67Z"/><path class="cls-3" d="M251.46,481.82c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.38,59.38,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C249.45,487.91,250.5,485,251.46,481.82Z"/><path class="cls-3" d="M281.25,470.44c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.21,68.21,0,0,0,3.11-8.29A89.28,89.28,0,0,0,281.25,470.44Z"/><path class="cls-3" d="M311.39,451.23c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.78-.33.57-.63,1.13-1,1.65l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72c.2-.48.42-1,.64-1.51s.41-1.08.62-1.66c.47-1.12.85-2.38,1.32-3.67C309.79,457.25,310.63,454.34,311.39,451.23Z"/><path class="cls-3" d="M321.6,441.84c1.61-3.95,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76,76,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.43-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C318.16,449.42,320,445.77,321.6,441.84Z"/><path class="cls-8" d="M41.38,364.78c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S40.63,368.42,41.38,364.78Z"/><path class="cls-8" d="M42.64,404.21a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,42.64,404.21Z"/><path class="cls-3" d="M130.55,363.73h-.49c-5.14-.18-9.18-3.24-12.42-5.71l-.2-.15a157,157,0,0,0-68.07-29.49,4.5,4.5,0,0,1,1.52-8.87,166.07,166.07,0,0,1,72,31.19l.2.15c2.46,1.87,5,3.8,7.3,3.89s4.87-1.61,7.58-3.4l.77-.5c15.36-10,35.29-15.56,56.13-15.56h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.25,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,0,1,1.52,8.87,157,157,0,0,0-68.07,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C139.6,361,135.5,363.73,130.55,363.73Z"/><path class="cls-3" d="M195.39,318.4a3.5,3.5,0,0,1-3.5-3.5V268.31a3.5,3.5,0,0,1,7,0V314.9A3.5,3.5,0,0,1,195.39,318.4Z"/><path class="cls-2" d="M209.25,194.71c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.22a103.26,103.26,0,0,1,30,3.06c8,2,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25a118.77,118.77,0,0,0-59.61-10.31"/><path class="cls-6" d="M210.19,183.79c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.65-17-15.81-26.45-20.24a118.64,118.64,0,0,0-59.6-10.32"/><path class="cls-3" d="M294.6,227.53a21.4,21.4,0,0,1-3.68-.35c-4.88-.84-9.33-2.79-13.63-4.67a65.63,65.63,0,0,0-9.91-3.74,99.68,99.68,0,0,0-29-3c-.89,0-1.79.08-2.69.13-7.79.43-17.48,1-24-6.55-6.37-7.32-6.62-18.78-4.9-26.37a3.52,3.52,0,0,1,1.16-1.91,3.48,3.48,0,0,1,2.26-1.14,122,122,0,0,1,61.44,10.63c9.08,4.27,19.64,12.34,27.55,21.06,5.45,6,4.5,10.13,3.44,12.05C301.77,225.25,299.66,227.53,294.6,227.53Zm-51.81-18.82A105.61,105.61,0,0,1,269.13,212a72.87,72.87,0,0,1,11,4.1c4.1,1.8,8,3.49,12,4.2a8.67,8.67,0,0,0,4.3,0c-.08-.54-.6-1.9-2.43-3.91-7.32-8.08-17-15.53-25.34-19.44a115.35,115.35,0,0,0-55.46-10.2c-.91,6.15-.12,13.61,3.76,18.07,4.29,4.93,11.12,4.55,18.35,4.15l2.78-.14C239.66,208.75,241.23,208.71,242.79,208.71Z"/><path class="cls-2" d="M183.07,186.43c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21A103.64,103.64,0,0,0,125,218c-8,2-15.14,6.95-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.31"/><path class="cls-6" d="M178.31,175.81c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.66,5.56-23.93,5.21a103.27,103.27,0,0,0-30,3.07c-8,2-15.14,6.95-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M93.9,219.55c-5.06,0-7.17-2.27-8-3.82-1.05-1.92-2-6,3.44-12,7.91-8.72,18.47-16.8,27.56-21.07A122.07,122.07,0,0,1,178.31,172a3.5,3.5,0,0,1,2.25,1.14,3.44,3.44,0,0,1,1.16,1.91c1.72,7.59,1.47,19.05-4.89,26.37-6.54,7.52-16.23,7-24,6.56l-2.69-.14a99.71,99.71,0,0,0-29,3,66,66,0,0,0-9.91,3.74c-4.3,1.88-8.75,3.83-13.63,4.68A21.29,21.29,0,0,1,93.9,219.55Zm-1.83-7.24a8.88,8.88,0,0,0,4.3,0c4-.7,7.93-2.4,12-4.19a72.1,72.1,0,0,1,11-4.11,106.66,106.66,0,0,1,31-3.17c.91,0,1.84.09,2.78.14,7.23.4,14.06.77,18.36-4.16,3.87-4.46,4.66-11.92,3.75-18.07A115.18,115.18,0,0,0,119.85,189c-8.31,3.9-18,11.35-25.35,19.43C92.67,210.41,92.15,211.77,92.07,212.31Z"/><path class="cls-7" d="M340.46,243.84c-6-46.08-35.17-92.93-58.18-123.34l-7-5.27,60-2.06C346.81,155.27,349.82,201.11,340.46,243.84Z"/><path class="cls-8" d="M249.46,120.86a38.06,38.06,0,0,1,6.86,3.6,29.12,29.12,0,0,1,4.87,4c2.51,2.63,3.45,4.8,2.77,5.58s-2.86.14-5.88-1.15c-1.51-.65-3.27-1.42-5.19-2.28s-4-1.75-6.26-2.65-4.4-1.67-6.37-2.4-3.8-1.34-5.34-1.9c-3.08-1.15-5.09-2.14-5-3.22s2.22-2,5.84-2.14a29.39,29.39,0,0,1,6.3.43A38.48,38.48,0,0,1,249.46,120.86Z"/><path class="cls-6" d="M92.19,132.81c29.19-4.84,58.37,3.32,87,9,29,5.73,57,5.91,86-.74,38.4-8.81,88.08-27.83,106.7-71.12A76.9,76.9,0,0,0,375,61.34c-20.42,14.6-47.12,12.59-69.71,3s-42.46-25.77-63.5-39.17S197.13.91,173.16,3.63c-23.29,2.64-47.76,17.86-65.39,35A78.55,78.55,0,0,0,91.53,60.7C88,68.12,87.33,78.9,81.26,84.4c-2.86,2.59-6.59,3.46-10,5.08-15.49,7.47-21.13,29-23.64,48-5.17,39-3.54,79,1.88,118"/><path class="cls-3" d="M344,247a4.31,4.31,0,0,1-1.12-.15,4.5,4.5,0,0,1-3.24-5.48c11.44-44.36,5.43-83.13-7.1-127.69a4.5,4.5,0,1,1,8.66-2.44c12.93,46,19.09,86.07,7.16,132.38A4.51,4.51,0,0,1,344,247Z"/><path class="cls-7" d="M84.69,146.36c0,1.6,0,3.18-.09,4.75L75.34,178.6l-3.12,9.24c-3.13,5.88-6.5,11.7-9.62,17.59S59.57,217,57.35,223a130.31,130.31,0,0,0-6.44,22.57c-2-10.35-6-20.67-7.22-31.15,4.9-4.13,7.94-10.22,9.47-16.49,1.66-6.79,1.69-13.86,1.72-20.85a34.9,34.9,0,0,1,7.45,16.14c.05-.22.1-.46.15-.69q4.08-19.68,6.46-39.66c.72,1.35,1.38,2.72,2,4.13a71.28,71.28,0,0,1,2.81,9.87c0-.33.09-.64.12-1Q76,150.39,76.69,134.7A48.12,48.12,0,0,1,84.69,146.36Z"/><path class="cls-7" d="M338,110.71a155.88,155.88,0,0,1-30.76,16c-2.21.87-4.44,1.72-6.67,2.52-4.79,1.72-9.61,3.25-14.4,4.64-8.59,2.5-17.07,4.5-25.07,6.1-29,5.82-57,5.66-86,.65-15.34-2.66-30.82-5.94-46.39-7.76h0l-37.41.79c0,.4.09.81.12,1.21l-1.06.14-1.67,4.22h0l-1.12,2.81c.18-1.56.3-3.14.34-4.74a56.14,56.14,0,0,0-.35-8.13l35.56-.75a95,95,0,0,1-13.84,2l1.47,0a70.84,70.84,0,0,0,14.31-2h0c10-2.44,23.3-8.24,32.64-12.89-1.21,3.52-4,10.23-7.47,11.6,13.7.77,23.75-2.55,37.16-5.45a30.37,30.37,0,0,1-12.68,10.25l-.52.22c.56,0,1.12,0,1.69,0,.17-.09.33-.19.49-.29a49.15,49.15,0,0,0,6.42-4.7s-3.72,6-3.72,6h0a103,103,0,0,0,44.29-4.43l5.39-1.77,5.76-.8c-1.71,1.75-6.58,3.31-8.61,4.67a34.78,34.78,0,0,1-9.85,4.61c1.37,0,3.49,2.12,4.85,2,10.13-.7,19.39-4.89,29.33-7.14,3.41-.77,7.56-2.33,11-3.14,3-.73,12.1-3.72,15-4.82L275,125.25l3.61-.08-2.11-.59-3,3c.11,0-.86,1.54-.75,1.5,16.8-4.79,47.23-14.23,63.65-20.18h1.07C337.63,109.47,337.82,110.08,338,110.71Z"/><path class="cls-3" d="M49.07,260.3a4.4,4.4,0,0,1-1.42-.23,4.51,4.51,0,0,1-2.85-5.69c3-8.87,40.51-120.88,40.89-122a4.5,4.5,0,0,1,8.54,2.86c-.38,1.13-37.94,113.13-40.89,122A4.5,4.5,0,0,1,49.07,260.3Z"/><path class="cls-8" d="M53.66,144.87a12,12,0,0,1,3.85-5.08c1.42-1,2.76-1.21,3.62-.61s1.14,1.88,1,3.42A20.34,20.34,0,0,1,58,152.52c-1,1.17-2.11,1.87-3.16,1.67s-1.81-1.31-2.09-3A12,12,0,0,1,53.66,144.87Z"/><path class="cls-8" d="M73.29,124.32c2.9-1.35,6-.89,6.87,1s-.73,4.57-3.63,5.93-6,.89-6.87-1S70.39,125.68,73.29,124.32Z"/><path class="cls-8" d="M86.6,109.93c2.1-4.46,5-7.73,7-7.06s2.24,5.38-.07,10.31-6.09,7.77-7.88,6.65S84.52,114.4,86.6,109.93Z"/><path class="cls-3" d="M70.57,69.83a55.25,55.25,0,0,0-9.49-9.16c-2.74-2-4.72-2.87-5.16-2.37-.89,1.07,4.59,7,10.86,14.67l2.69,3.26a17.67,17.67,0,0,0-6.57-.85c-2,.18-3.16.77-3.19,1.43s1,1.34,2.69,2,3.87,1.45,6.3,2.34,4.61,1.76,6.3,2.31l.77.23c1.72,1.88,2.94,2.92,3.46,2.62s.07-2.44-1.41-5.5A56.54,56.54,0,0,0,70.57,69.83Z"/><path class="cls-3" d="M189.84,121.17c-.54.28-1.18.64-1.9,1.06s-1.52.9-2.37,1.43l-1.32.83-1.38.88-2.93,1.88-1.53,1c-.26.16-.51.32-.78.47l-.78.48q-1.57.94-3.18,1.83c-1.07.57-2.15,1.12-3.22,1.63l-.82.36c-.26.13-.53.24-.81.36l-1.6.65c-1.07.4-2.11.8-3.13,1.09-.51.18-1,.29-1.49.44s-1,.24-1.43.37l-1.35.3-1.25.23c-.79.12-1.5.23-2.1.29s-1.08.11-1.41.15l-.52.07.41.31a10.67,10.67,0,0,0,1.24.79,16.92,16.92,0,0,0,2.09,1l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09a22.9,22.9,0,0,0,4-.34,18.43,18.43,0,0,0,2.06-.44l1-.28,1-.34a27.94,27.94,0,0,0,4-1.77,34.42,34.42,0,0,0,3.63-2.31l.84-.64c.27-.21.53-.44.79-.66.53-.44,1-.89,1.51-1.36a33.1,33.1,0,0,0,2.6-2.77c.39-.46.75-.92,1.1-1.37l.95-1.32c.59-.87,1.1-1.68,1.52-2.42s.77-1.4,1-2,.46-1,.59-1.32l.19-.49-.47.22C190.82,120.66,190.38,120.88,189.84,121.17Z"/><path class="cls-3" d="M232.08,127.34l-2.08.93c-.79.37-1.67.79-2.64,1.22-.47.23-1,.48-1.47.71l-1.57.75L221,132.56c-.58.26-1.16.55-1.75.84-.3.15-.59.29-.9.42l-.9.43c-1.2.59-2.44,1.13-3.65,1.73s-2.46,1.15-3.68,1.68l-.91.41c-.3.15-.6.28-.9.41-.61.26-1.2.52-1.78.81-1.18.49-2.31,1.05-3.4,1.51-.55.24-1.08.47-1.59.72s-1,.44-1.5.66c-1,.46-1.86.86-2.65,1.22l-2.08,1c-.58.28-1,.52-1.35.69l-.48.27.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.55,0,1.13-.05,1.73-.1s1.2-.13,1.84-.21c1.26-.15,2.57-.42,3.93-.72.67-.16,1.35-.35,2-.55.34-.09.69-.19,1-.3l1-.36c1.39-.45,2.74-1,4.1-1.63s2.66-1.31,3.9-2.07l.94-.55c.31-.19.6-.39.9-.59.59-.4,1.18-.79,1.74-1.2,1.1-.85,2.16-1.66,3.09-2.53l1.35-1.27c.42-.42.81-.86,1.19-1.26a26,26,0,0,0,1.94-2.33,21.05,21.05,0,0,0,1.34-1.93c.35-.55.6-1,.77-1.31l.26-.49-.52.19C233.14,126.89,232.67,127.08,232.08,127.34Z"/><path class="cls-3" d="M285.59,114.78c-.58.47-1.29,1-2.1,1.64-.4.31-.82.65-1.26,1l-1.41,1.09c-.48.38-1,.79-1.49,1.19L277.72,121c-1.08.88-2.28,1.73-3.45,2.67-.62.44-1.22.91-1.84,1.38-.3.23-.61.47-.93.69l-.95.69c-1.25,1-2.58,1.85-3.86,2.79s-2.62,1.84-3.94,2.7l-1,.65c-.31.23-.64.44-1,.65-.65.42-1.29.83-1.92,1.26-1.28.78-2.49,1.63-3.69,2.34l-1.73,1.1c-.55.36-1.12.66-1.64,1l-1.51,1-1.38.84c-.87.54-1.63,1-2.27,1.42s-1.13.72-1.47,1l-.52.36h.63c.41,0,1,0,1.76-.05a26.4,26.4,0,0,0,2.72-.26l1.67-.25c.58-.11,1.18-.24,1.81-.39s1.3-.29,2-.48,1.36-.41,2.07-.63c1.42-.44,2.87-1,4.37-1.67.74-.33,1.48-.69,2.23-1.06.38-.18.76-.36,1.13-.57l1.11-.62c1.5-.81,2.94-1.78,4.39-2.74s2.79-2.05,4.07-3.18l1-.84c.32-.27.62-.57.92-.86.6-.59,1.2-1.16,1.76-1.74,1.1-1.2,2.15-2.35,3.05-3.54l1.3-1.73c.41-.57.76-1.15,1.12-1.68s.68-1.07,1-1.58l.8-1.48a24.8,24.8,0,0,0,1.17-2.47c.29-.7.5-1.26.64-1.64l.2-.59-.52.36C286.65,114,286.17,114.32,285.59,114.78Z"/><path class="cls-3" d="M75.07,168.26c0-.33,0-.66-.07-1-.07-.66-.14-1.3-.21-1.94s-.22-1.25-.33-1.86a16,16,0,0,0-.4-1.75c-.16-.57-.32-1.11-.47-1.64s-.38-1-.56-1.5-.38-.92-.55-1.35-.42-.8-.61-1.17a13.83,13.83,0,0,0-1.09-1.82c-.34-.49-.61-.86-.79-1.11l-.29-.39.11.47.35,1.3c.17.55.33,1.23.49,2,.09.38.18.79.28,1.22s.14.89.22,1.37.2,1,.24,1.47.12,1,.18,1.59.1,1.1.14,1.67.11,1.15.1,1.75,0,1.2,0,1.81c0,.31,0,.62,0,.93l0,.93q0,.94-.06,1.89c0,.64-.06,1.27-.11,1.91-.11,1.27-.2,2.55-.36,3.8l-.1.94-.12.94c-.08.61-.15,1.22-.23,1.83-.19,1.19-.32,2.37-.51,3.47-.08.56-.16,1.1-.23,1.62s-.16,1-.24,1.52c-.14,1-.27,1.87-.39,2.67s-.2,1.5-.27,2.07-.13,1-.16,1.35,0,.48,0,.48l.23-.42.61-1.21c.26-.53.55-1.17.88-1.92s.67-1.59,1-2.53l.54-1.47q.24-.76.51-1.59c.36-1.09.65-2.27,1-3.49.15-.61.28-1.24.41-1.87l.2-1,.15-1c.23-1.3.37-2.65.48-4,.06-.67.06-1.36.09-2a19.44,19.44,0,0,0,0-2Z"/><path class="cls-3" d="M62.89,191.23l-.23-.94c-.08-.31-.17-.62-.27-.92-.19-.61-.36-1.21-.59-1.78a24.73,24.73,0,0,0-1.44-3.24c-.26-.5-.52-1-.8-1.43s-.56-.88-.84-1.28a22.14,22.14,0,0,0-1.65-2.09c-.53-.59-1-1.07-1.44-1.45s-.77-.66-1-.84l-.37-.27.22.4c.14.26.36.64.62,1.13s.57,1.07.89,1.75.68,1.46,1,2.31c.18.42.35.86.52,1.33s.34.94.5,1.43c.34,1,.64,2,.92,3.14.15.54.26,1.11.39,1.67.07.29.13.57.18.86l.16.87c.21,1.16.37,2.35.5,3.55s.19,2.39.21,3.58v.89a8.42,8.42,0,0,1,0,.87c0,.59,0,1.16,0,1.73s-.05,1.13-.1,1.67-.09,1.09-.16,1.61-.11,1-.18,1.52-.13,1-.22,1.43c-.14.91-.31,1.75-.46,2.5s-.31,1.4-.43,1.94l-.3,1.26c-.07.3-.1.45-.1.45l.27-.37c.18-.24.44-.6.75-1.07s.66-1.07,1-1.77a24.08,24.08,0,0,0,1.12-2.41c.2-.45.35-.93.53-1.43s.33-1,.48-1.56.29-1.1.41-1.68.24-1.17.33-1.78.17-1.23.23-1.86c0-.32.06-.64.08-.95l0-1a32.15,32.15,0,0,0-.12-3.92A35.27,35.27,0,0,0,62.89,191.23Z"/><path class="cls-3" d="M340.52,135.12c-.56-.33-2.35,1.41-4.39,4.82a31.05,31.05,0,0,0-1.53,2.85c-.53,1-1,2.19-1.5,3.41a54.73,54.73,0,0,0-2.4,8.19,53.3,53.3,0,0,0-1,8.48c0,1.31,0,2.55,0,3.72s.16,2.24.29,3.22c.54,3.94,1.5,6.24,2.14,6.16,1.42-.19,1-9.55,3.37-20.59S341.75,135.85,340.52,135.12Z"/><path class="cls-3" d="M332.65,76.3q.6-.6,1.08-1.11c1.28-1.36,1.88-2.21,1.67-2.46s-1.68.43-4.06,1.79q.2-.28.12-.42c-.32-.6-3.28.45-8,1.89-1.18.36-2.47.76-3.87,1.11s-2.89.74-4.46,1.13c-3.16.7-6.64,1.35-10.34,1.81s-7.24.61-10.48.67c-1.61,0-3.15,0-4.59,0s-2.79-.11-4-.17c-4.93-.3-8-.62-8.21,0s2.72,2,7.75,3.17a39.25,39.25,0,0,0,4.15.75c1.5.25,3.12.36,4.83.49a68.2,68.2,0,0,0,11.11-.34,68,68,0,0,0,10.48-2.16A105.26,105.26,0,0,1,303,86.69a105.34,105.34,0,0,1-13.4,2.42c-2.09.18-4.08.41-5.94.45-.94,0-1.84.12-2.71.12l-2.51,0c-6.38,0-10.4-.39-10.54.3-.06.31.87.77,2.65,1.35l1.48.45c.55.14,1.15.26,1.79.4a42.19,42.19,0,0,0,4.43.73l2.6.29c.9.08,1.85.09,2.83.14,2,.12,4.05,0,6.26,0a78.72,78.72,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9c2-1,3.85-1.92,5.51-3,.84-.51,1.66-1,2.42-1.48l2.14-1.5a44.2,44.2,0,0,0,3.53-2.77C331.77,77.08,332.24,76.69,332.65,76.3Z"/><path class="cls-3" d="M258.59,56.35c.84-.51,1.67-1,2.42-1.49l2.14-1.49a42.47,42.47,0,0,0,3.53-2.77c.5-.43,1-.82,1.38-1.21s.77-.77,1.09-1.11c1.27-1.36,1.87-2.22,1.67-2.46s-1.69.43-4.07,1.79c.13-.19.17-.33.12-.43-.32-.59-3.27.46-8,1.9-1.18.35-2.47.75-3.87,1.11s-2.89.74-4.46,1.13c-3.15.7-6.64,1.35-10.34,1.8s-7.24.61-10.47.68c-1.62,0-3.16,0-4.6,0s-2.79-.11-4-.18c-4.92-.29-8-.61-8.21,0s2.72,2,7.75,3.17c1.26.28,2.65.56,4.15.75s3.12.36,4.83.49a67.15,67.15,0,0,0,11.11-.35,66.79,66.79,0,0,0,10.48-2.16,104.66,104.66,0,0,1-12.79,4.27A105.34,105.34,0,0,1,225,62.2c-2.09.18-4.07.41-5.94.45-.94,0-1.84.12-2.71.12l-2.5,0c-6.39,0-10.41-.39-10.55.29-.06.31.87.78,2.65,1.36l1.48.45c.55.14,1.15.26,1.79.4a42.64,42.64,0,0,0,4.43.73l2.6.28c.9.09,1.85.1,2.83.15,2,.12,4,0,6.26,0a79.62,79.62,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9C255.05,58.32,256.93,57.4,258.59,56.35Z"/><path class="cls-3" d="M195.19,30.86c.37-.2.73-.43,1.11-.66.73-.47,1.54-.92,2.32-1.45.41-.24.8-.5,1.2-.76.21-.13.41-.27.62-.39l.61-.4c.81-.54,1.66-1.05,2.48-1.62s1.64-1.1,2.47-1.63l.6-.41c.2-.15.4-.28.6-.41.41-.27.81-.53,1.19-.81.79-.52,1.53-1.08,2.26-1.57l1-.76c.34-.26.67-.49,1-.72l1.76-1.33c.52-.43,1-.8,1.37-1.1s.68-.59.88-.77l.15-.14.21-.06,1.73-.51.62-.2-.62-.19c-.41-.12-1-.29-1.77-.45s-1.69-.35-2.77-.5-2.3-.26-3.64-.33c-.67,0-1.37,0-2.1,0s-1.47,0-2.23.07a47,47,0,0,0-4.82.5c-.83.13-1.67.29-2.52.47l-1.28.28-1.28.32A43.6,43.6,0,0,0,191.24,17a39.83,39.83,0,0,0-4.92,2.38c-.39.22-.78.45-1.16.69l-1.13.73c-.73.51-1.46,1-2.13,1.56a28.65,28.65,0,0,0-3.65,3.44l-.78.89-.7.92a17.84,17.84,0,0,0-1.22,1.8,15.91,15.91,0,0,0-1,1.75c-.14.28-.27.55-.41.82s-.21.55-.31.81a18.1,18.1,0,0,0-.83,2.76,13.93,13.93,0,0,0-.26,1.82c0,.41,0,.63,0,.63l.41-.49c.28-.32.61-.81,1.11-1.37s1.07-1.25,1.8-2l.54-.55.61-.56c.41-.38.83-.78,1.31-1.15s.93-.8,1.47-1.18l.78-.59.83-.58c1.11-.79,2.36-1.53,3.64-2.28l2-1.09,1-.52q.51-.27,1.05-.51c1.42-.69,2.91-1.31,4.4-1.92,1.16-.46,2.32-.9,3.5-1.32l0,0-.63.53c-.21.18-.4.37-.6.56-.39.37-.77.74-1.13,1.12a27.05,27.05,0,0,0-2,2.33c-.28.39-.56.76-.81,1.14s-.48.76-.69,1.13a18.31,18.31,0,0,0-1,2.06,12.12,12.12,0,0,0-.65,1.69c-.16.48-.26.87-.33,1.13l-.09.42.39-.17c.25-.11.61-.28,1.05-.5l1.53-.82,1.9-1.07Z"/><path class="cls-3" d="M107.52,78.93q-.13-.72-.33-1.71l-.46-2.13c-.1-.38-.19-.78-.29-1.19s-.2-.82-.31-1.25c-.23-.84-.42-1.75-.7-2.65-.1-.46-.23-.91-.37-1.38-.07-.23-.13-.46-.19-.7l-.2-.7c-.28-.94-.51-1.9-.81-2.84s-.57-1.9-.83-2.85l-.21-.7c-.09-.23-.15-.46-.22-.69-.14-.46-.27-.92-.43-1.37-.25-.91-.57-1.78-.83-2.62l-.41-1.23c-.15-.4-.27-.79-.4-1.17l-.75-2.06-.65-1.64c-.18-.46-.35-.82-.47-1.07l-.09-.18v-.22c0-.77,0-1.39,0-1.8s0-.65,0-.65l-.36.53c-.24.35-.57.87-1,1.55s-.83,1.52-1.29,2.51-.93,2.12-1.4,3.38c-.21.63-.44,1.29-.66,2s-.4,1.42-.6,2.16c-.37,1.49-.7,3.09-.94,4.75q-.18,1.24-.3,2.55L92,66.84q0,.66-.06,1.32A42.83,42.83,0,0,0,92,73.58a39.33,39.33,0,0,0,.82,5.4c.09.44.19.88.31,1.31l.37,1.3c.27.85.54,1.69.86,2.49a29.54,29.54,0,0,0,2.21,4.51l.62,1,.67.93a19.84,19.84,0,0,0,1.36,1.7,15.78,15.78,0,0,0,1.39,1.43l.67.63.68.54a17.42,17.42,0,0,0,2.39,1.6,12.55,12.55,0,0,0,1.66.79l.59.24-.35-.54c-.22-.36-.59-.82-1-1.47s-.88-1.39-1.34-2.3l-.37-.67-.35-.75c-.24-.5-.5-1-.72-1.59s-.49-1.13-.69-1.75c-.11-.3-.22-.61-.34-.92l-.3-1c-.43-1.3-.76-2.71-1.11-4.15-.14-.74-.29-1.48-.44-2.23L99.44,79a11.19,11.19,0,0,1-.18-1.16c-.24-1.55-.39-3.16-.54-4.76-.1-1.25-.17-2.49-.22-3.74v0l.32.75c.11.25.23.5.35.74.25.48.48,1,.74,1.41a28.05,28.05,0,0,0,1.65,2.55c.29.38.57.76.86,1.11s.58.69.87,1A18.9,18.9,0,0,0,105,78.52a12.68,12.68,0,0,0,1.42,1.12c.41.3.75.51,1,.65l.37.21s0-.15,0-.42S107.6,79.41,107.52,78.93Z"/><path class="cls-3" d="M157.63,30.1c.21-.26.41-.52.63-.76l.62-.77c.82-1,1.69-2.06,2.5-3.13s1.66-2.11,2.5-3.13l.6-.79c.19-.27.4-.52.6-.78.41-.51.81-1,1.18-1.54.8-1,1.52-2,2.25-3,.36-.48.7-1,1-1.41s.66-.92,1-1.35l1.7-2.45c.5-.77.93-1.44,1.3-2s.63-1,.81-1.36l.13-.24.25-.17,2-1.38.71-.52h-.87c-.58,0-1.41.06-2.46.17s-2.34.26-3.79.52-3.07.63-4.82,1.1c-.87.26-1.78.52-2.71.83s-1.88.66-2.85,1c-1.94.76-4,1.64-6,2.67-1,.52-2,1.07-3,1.66l-1.53.9-1.51.95a65.41,65.41,0,0,0-5.9,4.36,52.74,52.74,0,0,0-5.32,5.14c-.42.44-.82.9-1.21,1.37l-1.14,1.41c-.73,1-1.45,1.92-2.09,2.91a39.74,39.74,0,0,0-3.25,6q-.31.75-.63,1.47t-.51,1.47a25.35,25.35,0,0,0-.81,2.83,22.86,22.86,0,0,0-.5,2.66c0,.42-.11.83-.17,1.23s0,.79-.06,1.17a22.82,22.82,0,0,0,.1,3.9,18.82,18.82,0,0,0,.42,2.44l.2.85.32-.81c.23-.53.45-1.3.86-2.23s.85-2.06,1.49-3.28l.46-.94.55-1a23.46,23.46,0,0,1,1.2-2c.44-.69.86-1.42,1.39-2.12l.76-1.1.83-1.09c1.09-1.49,2.39-3,3.72-4.47l2.11-2.23L141.81,32c.36-.38.74-.75,1.13-1.11,1.54-1.47,3.19-2.89,4.85-4.31,1.3-1.08,2.61-2.13,4-3.17l0,0-.59.95c-.19.31-.36.64-.53,1-.34.65-.68,1.28-1,1.93a38.56,38.56,0,0,0-1.52,3.8c-.2.63-.4,1.23-.57,1.82s-.29,1.18-.41,1.74a27.31,27.31,0,0,0-.49,3.1,18.32,18.32,0,0,0-.12,2.44c0,.68,0,1.23,0,1.6l.06.57L147,42c.28-.25.67-.62,1.14-1.09l1.63-1.69,2-2.18c.35-.4.71-.82,1.09-1.24s.75-.87,1.14-1.32c.75-.92,1.6-1.84,2.38-2.84C156.83,31.11,157.23,30.61,157.63,30.1Z"/><path class="cls-3" d="M188.32,415.9a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.26-6.88c.31,0,30.65,5.45,44.82-4.67A15.44,15.44,0,0,0,221.82,392a3.5,3.5,0,1,1,6.92,1,22.47,22.47,0,0,1-9.51,15.42C210.9,414.39,198.63,415.9,188.32,415.9Z"/><circle class="cls-9" cx="260.6" cy="260.93" r="5.28"/><circle class="cls-3" cx="245.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="256.02" cy="247.35" r="12.7"/><path class="cls-8" d="M300.59,168.74c1.29,2.37,1.34,4.85.1,5.52s-3.29-.7-4.58-3.08-1.34-4.85-.1-5.52S299.3,166.36,300.59,168.74Z"/><path class="cls-8" d="M310.25,189.88c1.94,3.62,2.51,7.1,1.27,7.77s-3.83-1.73-5.77-5.36-2.52-7.1-1.27-7.77S308.3,186.25,310.25,189.88Z"/><path class="cls-2" d="M299.47,144.54a262.36,262.36,0,0,1-35.32,10.62c-29,6.65-57,6.47-86,.74-25.17-5-50.77-11.88-76.43-10.17q2.81-6.3,6.16-12.27l18.41-.39c10.64,1.22,21.21,3.34,31.78,5.55.36.16.75.32,1.18.49l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09h.06c7.43,1.54,14.86,3,22.32,4.12,2.23.33,4.49.63,6.8.88l-.46.26.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.53,0,1.1-.05,1.68-.1,27.91,1.92,60.1-1.45,89.18-11.39C295,137.79,297.22,141.11,299.47,144.54Z"/><path class="cls-3" d="M48.53,260.48a4.48,4.48,0,0,1-4.45-3.88c-6.29-45.25-7.1-84.24-2.47-119.22C45.3,109.48,53.85,92.67,67.76,86c1.14-.55,2.28-1,3.38-1.45a18.15,18.15,0,0,0,5.5-2.92c3.46-3.14,5-8.42,6.69-14a62.23,62.23,0,0,1,4-10.82C101,30.15,129.81,8.13,159,2c40.31-8.54,71.8,12.57,102.27,33,14.23,9.53,28.94,19.39,44.16,25.83,24.66,10.44,48.47,9.52,65.33-2.54l10.62-7.6-3.69,12.53a80.3,80.3,0,0,1-3.28,9.09C365.33,93.3,343.91,122,293.34,139c-32.79,11-72.38,14.65-105.89,9.64-9.25-1.38-18.56-3.32-27.56-5.2-23.42-4.88-45.55-9.49-68.56-5.67a4.5,4.5,0,0,1-1.47-8.88c24.66-4.09,48.66.91,71.87,5.74,8.87,1.85,18.05,3.77,27.05,5.11,32.17,4.81,70.18,1.35,101.69-9.27,25.37-8.54,58.45-25.6,74.21-58.63-18,7.64-40.17,6.76-62.78-2.81-16-6.78-31.08-16.88-45.66-26.65C226,22.14,197.43,3,160.84,10.75c-26.25,5.56-53.21,26.18-65.55,50.13A54.71,54.71,0,0,0,92,70.14c-1.85,6.24-3.95,13.3-9.28,18.13a25.88,25.88,0,0,1-8.19,4.6c-1,.4-1.95.79-2.83,1.21-10.95,5.28-17.87,19.83-21.13,44.48C46,172.72,46.82,210.93,53,255.37a4.5,4.5,0,0,1-3.84,5.07A4.4,4.4,0,0,1,48.53,260.48Z"/><path class="cls-3" d="M343.6,255.94a4.49,4.49,0,0,1-4.5-4.47c-.3-40.92-49.59-113.6-50.09-114.33a4.5,4.5,0,1,1,7.44-5.08c2.09,3.07,51.33,75.71,51.65,119.35a4.51,4.51,0,0,1-4.47,4.53Z"/><path class="cls-8" d="M327.53,239.22a114.3,114.3,0,0,1,1,14c0,2.15,0,4.2-.15,6.11s-.26,3.69-.45,5.31c-.76,6.47-2,10.34-2.64,10.25-1.5-.19-.14-15.93-2.82-35-2.51-19.06-8.05-33.86-6.65-34.44.61-.26,2.82,3.14,5.29,9.17.62,1.51,1.26,3.17,1.86,5s1.19,3.78,1.78,5.85A114.05,114.05,0,0,1,327.53,239.22Z"/><circle class="cls-3" cx="145.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="156.02" cy="247.35" r="12.7"/><circle class="cls-8" cx="136.6" cy="272.93" r="5.28"/><circle class="cls-8" cx="239.6" cy="272.93" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-4.svg b/src/assets/icons/dynamic-avatar-4.svg
new file mode 100644
index 0000000..e586ed4
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.12 605.75"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#f0d7c2;}.cls-3{fill:#d7ad8c;}.cls-4{fill:#c4987a;}.cls-5{fill:#8376a5;}.cls-6{fill:#655a8e;}.cls-7{fill:#ebcbac;}.cls-16,.cls-8,.cls-9{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-8{stroke-linecap:round;}.cls-8,.cls-9{stroke-width:10px;}.cls-9{stroke-linecap:square;}.cls-10{fill:#dcb79b;}.cls-11{fill:#fff;}.cls-12{fill:#40565a;}.cls-13{fill:#a699d6;}.cls-14{fill:#485d63;}.cls-15{fill:#796f9c;}.cls-16{stroke-width:11px;}.cls-17{fill:#325560;}</style></defs><title>Asset 120</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="236.82" cy="551.53" rx="184.33" ry="54.22"/><path class="cls-2" d="M30.24,275.91A69.67,69.67,0,0,0,21.69,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-3" d="M18,366.5c3.62,6.7,8.36,12.95,14.66,17.24,2.69,1.84,7,1.57,11.13,1.27-5.9-4.26-10.4-10.26-13.86-16.68-15.65-29-9.35-68.14,14.59-90.75H68.76v-1.84H32.58C8.64,298.37,2.34,337.52,18,366.5Z"/><path class="cls-3" d="M419,275a69.67,69.67,0,0,1,29.75,88.61c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><path class="cls-4" d="M411.42,386.76a29.59,29.59,0,0,0,19.15-4.19c6.72-4,11.79-10.17,15.61-16.77A67.58,67.58,0,0,0,453.47,316c-4.12-16.58-18.64-31.49-33.49-41l-1,13.49c7.89,8.45,16.35,18.74,19.1,29.76a67.58,67.58,0,0,1-7.29,49.78c-3.82,6.6-8.9,12.74-15.61,16.77A30.36,30.36,0,0,1,411.42,386.76Z"/><path class="cls-5" d="M452.36,118.46c-8.78-30.07-32.4-57-62.92-63.67a46.85,46.85,0,0,0-9.71-17.86c-5.41-6.13-12.35-10.72-19.61-14.48-36.17-18.7-79.26-17-119.65-11.85-16.15,2.07-32.27,4.63-48,8.91C128.34,37,73,84.38,45.91,145.09s-22.25,133.54,7.56,193L262.36,185.91V334.35H414.7c-8.85-26.74-4.64-73.12,7.76-98.72,9.21-19,22.61-32.09,28.47-53.07C457,160.94,458.72,140.29,452.36,118.46Z"/><path class="cls-6" d="M454.65,186.37C452,196,447.72,203.88,443,211.49c-.82-48.6-11-97.83-36.11-139.38A92.48,92.48,0,0,0,398.41,60c28,8.43,49.4,34,57.66,62.31C462.44,144.1,460.69,164.75,454.65,186.37Z"/><path class="cls-7" d="M53.69,331.22c15.1-11.09,21.39-30.36,26.05-48.51A691.24,691.24,0,0,0,99.16,167.36l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370,167.87s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62l-.21.12a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.47,469.8,52,405.33,52.78,332.34"/><path class="cls-2" d="M146.18,528.31c-48.31-54-94-118-93.24-190.45l.91-1.13c15.09-11.09,21.39-30.36,26-48.51A690.78,690.78,0,0,0,99.31,172.88l28.18,8.41C118.46,222.82,83,409.19,146.18,528.31Z"/><path class="cls-3" d="M323.51,525.35a270.7,270.7,0,0,1-19.2,19.85c22.46-40.14,35.38-85.8,40-131.73,6.33-63.1-2.24-126.93-17.2-188.56-.55-2.26-1.17-4.63-2.75-6.34-2.47-2.67-6.5-3-10.13-3.13-20.76-.84-41.76-1.81-61.63-7.87a105.08,105.08,0,0,1-17.44-7c19.43-4.07,37.77-14.78,56.7-21.88A165.11,165.11,0,0,1,367,169.1s7.49,121.69,48.83,164.46C416.61,406.56,372.26,471,323.51,525.35Z"/><path class="cls-8" d="M390.57,54.45c31.3,6,55.6,33.41,64.53,64,6.37,21.82,4.61,42.47-1.43,64.1-5.86,21-19.26,34.06-28.47,53.07-12.4,25.6-14.78,71.07-5.93,97.81"/><path class="cls-8" d="M27.49,275.91A69.67,69.67,0,0,0,18.93,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-8" d="M422.38,274.38A69.67,69.67,0,0,1,452.13,363c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><polygon class="cls-3" points="237.17 353.31 237.17 432.24 264.71 432.24 237.17 353.31"/><polyline class="cls-9" points="237.32 357.44 236.19 423.51 236.11 428.1"/><path class="cls-10" d="M344.27,308.58c.57,5-.41,9-1.09,8.93s-.9-4-1.45-8.65-1.2-8.52-.51-8.75S343.71,303.58,344.27,308.58Z"/><path class="cls-11" d="M160.6,204.75a109.34,109.34,0,0,1,22.25,7.54c5.49,2.71,8.48,5.28,8,6.57s-4.34,1.18-10.15.31-13.7-2.41-22.45-4.49A144,144,0,0,1,136,207.81c-5.57-2.38-8.76-4.67-8.36-6s4.24-1.55,10.15-1A175.83,175.83,0,0,1,160.6,204.75Z"/><path class="cls-12" d="M397.3,128.18a75.72,75.72,0,0,1,1.9,14c0,2.17.07,4.23-.09,6.16-.07,1-.1,1.89-.21,2.78l-.35,2.55c-1,6.48-2.82,10.19-3.8,10s-1.24-4.15-1.61-10.27L393,151c0-.83-.16-1.7-.23-2.59-.11-1.78-.38-3.68-.6-5.67-.54-4-1.27-8.29-2.32-12.78s-2.39-8.66-3.69-12.45c-.71-1.87-1.32-3.68-2-5.33-.34-.83-.63-1.65-1-2.41l-.95-2.21c-2.43-5.63-4.08-9.23-3.19-9.9s4.05,1.91,7.9,7.22l1.46,2.11c.5.74.95,1.55,1.44,2.38,1,1.65,1.9,3.5,2.85,5.46A75.74,75.74,0,0,1,397.3,128.18Z"/><path class="cls-12" d="M435.13,118.25a108.47,108.47,0,0,1-2.34,18.33c-.67,2.76-1.29,5.39-2.1,7.78-.39,1.2-.73,2.37-1.14,3.46L428.33,151a55.23,55.23,0,0,1-2.41,5.25c-.39.76-.74,1.46-1.11,2.09s-.74,1.19-1.08,1.69c-1.34,2-2.3,3-2.79,2.77-1-.47.38-5.47,2.21-13.44l.71-3.13c.25-1.08.43-2.23.67-3.4.51-2.34.86-4.87,1.31-7.51A173.57,173.57,0,0,0,427.48,118a173.79,173.79,0,0,0-.37-17.39c-.26-2.66-.43-5.21-.77-7.58-.16-1.18-.25-2.34-.42-3.44l-.48-3.17c-1.25-8.08-2.3-13.17-1.24-13.56.5-.18,1.38.87,2.58,3q.45.79,1,1.76c.32.66.62,1.38,1,2.17a55.19,55.19,0,0,1,2,5.41l1,3.21c.33,1.12.59,2.31.89,3.54.64,2.45,1.06,5.11,1.53,7.91A108.47,108.47,0,0,1,435.13,118.25Z"/><path class="cls-12" d="M407,237.87a61.19,61.19,0,0,1,3-13.43,51.88,51.88,0,0,1,2.35-5.53c.43-.84.8-1.66,1.25-2.41l1.31-2.14a30.51,30.51,0,0,1,2.52-3.48c.4-.49.77-.95,1.14-1.34s.75-.73,1.09-1c1.35-1.2,2.28-1.69,2.71-1.38.91.66-.62,4.15-2.6,9.64l-.77,2.16c-.27.75-.48,1.55-.74,2.36-.56,1.61-1,3.38-1.49,5.21A83.83,83.83,0,0,0,414.29,251c.13,1.9.18,3.72.4,5.4.1.85.14,1.68.25,2.46l.32,2.27c.83,5.79,1.62,9.51.59,10-.48.21-1.3-.46-2.37-1.9q-.4-.54-.85-1.23c-.29-.46-.55-1-.84-1.54A30.49,30.49,0,0,1,410,262.5l-.85-2.36c-.28-.83-.48-1.71-.73-2.61a51.91,51.91,0,0,1-1.18-5.89A61.23,61.23,0,0,1,407,237.87Z"/><path class="cls-13" d="M338.06,11a505.1,505.1,0,0,0-65.52,7.53c-9.44,1.72-18.9,3.72-27.78,7.32C237.13,29,230,33.22,222.27,36.08l-1,.35c-15.13,5.37-33.2,6.48-43.21,19L179.81,52q1.31-2.53,2.6-5.07a64.64,64.64,0,0,0-39.5,17c-.84.79-1.73,1.54-2.63,2.27-9,7.24-20.27,11.3-28.87,19.81q-.45-4.32-.89-8.65-2,1.23-3.94,2.52c-9.37,6.19-18,13.53-24.81,22.49-7.31,9.7-12.31,21.4-12.89,33.52a2.76,2.76,0,0,0-1.28-1.65c-.22.33-.44.67-.65,1a164.8,164.8,0,0,0-25.72,75.23q-1.39-4.56-2.77-9.1c-.08,1.17-.16,2.37-.21,3.63a304,304,0,0,0,3.3,57.5,58,58,0,0,1-13.19-23.61,221.08,221.08,0,0,1,5.31-59.68A200.24,200.24,0,0,1,46,142.48a217.66,217.66,0,0,1,18.72-33.54A52.26,52.26,0,0,1,66.84,100a231.53,231.53,0,0,1,78.78-67.78,147.77,147.77,0,0,0-11.25,10A223.1,223.1,0,0,1,179,21.07q6.69-2.31,13.52-4.18a312,312,0,0,1,36.29-7.31c3.89-.58,7.79-1.1,11.68-1.61,10.4-1.34,21-2.43,31.56-3C294.53,3.75,317,4.85,338.06,11Z"/><path class="cls-8" d="M50.86,335.92C21,276.49,16.19,203.66,43.3,142.95S125.73,34.84,189.89,17.37c15.71-4.28,31.83-6.84,48-8.91,40.39-5.18,83.48-6.85,119.65,11.85,7.26,3.75,14.2,8.35,19.61,14.48C388.79,48,392,67.82,386,84.4s-20.53,29.56-37.4,34.67"/><path class="cls-12" d="M119.45,55.71a122.27,122.27,0,0,1,11.37-12.29c1.91-1.73,3.71-3.37,5.52-4.79s3.48-2.72,5.07-3.83c6.39-4.44,10.89-6.3,11.46-5.47,1.28,1.85-13.39,13.4-27.43,31.16C111.22,78.11,103.19,95,101.1,94.13c-.93-.38-.12-5.17,2.8-12.39.74-1.8,1.58-3.75,2.62-5.79s2.18-4.19,3.45-6.44A122.24,122.24,0,0,1,119.45,55.71Z"/><path class="cls-12" d="M152.92,44.74a155.46,155.46,0,0,1,12.6-13.37c2.09-1.91,4.07-3.71,6-5.29s3.78-3,5.5-4.29c6.91-5,11.74-7.28,12.34-6.46,1.32,1.81-14.6,14.92-30.58,34.31C142.68,68.9,132.71,87,130.69,86c-.91-.44.42-5.6,4.09-13.32.92-1.92,2-4,3.21-6.2s2.61-4.49,4.1-6.89A155.46,155.46,0,0,1,152.92,44.74Z"/><path class="cls-12" d="M193,32.11a87.62,87.62,0,0,1,14.89-12.4,79.37,79.37,0,0,1,14-7.35c8.37-3.31,14-3.82,14.24-2.87s-4.55,3.39-11.85,7.73a121.7,121.7,0,0,0-25.76,20.23c-8.94,9.23-15.89,18.86-21.16,25.73s-8.78,11.07-9.7,10.51,1-5.67,5.14-13.44A127.77,127.77,0,0,1,193,32.11Z"/><path class="cls-12" d="M246.25,15.32A101.07,101.07,0,0,1,263,7.14a76.92,76.92,0,0,1,14.74-4c8.63-1.37,14-.51,14.08.47s-5,2.2-12.8,4.79a141.76,141.76,0,0,0-28.82,13.45c-10.67,6.49-19.73,13.51-26.43,18.52s-11.06,8-11.8,7.22,2.32-5.1,8.21-11.27A131.37,131.37,0,0,1,246.25,15.32Z"/><path class="cls-12" d="M38.39,192.46a120.8,120.8,0,0,0,3.08,13.79c.66,2.07,1.22,4.08,1.91,5.9.33.91.6,1.82.94,2.67l.95,2.43c2.44,6.21,4.26,10.1,3.34,10.76-.43.31-1.43-.29-2.9-1.67q-.55-.52-1.19-1.18c-.41-.45-.81-1-1.26-1.52a38.32,38.32,0,0,1-2.81-3.91L39,217.34c-.5-.84-.94-1.75-1.43-2.68a65,65,0,0,1-2.76-6.13,71.66,71.66,0,0,1-4.66-30.3,64.9,64.9,0,0,1,.79-6.68c.19-1,.33-2,.56-3l.69-2.72a38.34,38.34,0,0,1,1.5-4.57c.26-.66.49-1.27.74-1.83s.53-1,.78-1.48c1-1.76,1.76-2.63,2.26-2.47,1.07.35.52,4.61.05,11.26l-.17,2.61c-.06.9,0,1.85-.09,2.82-.11,1.94,0,4,0,6.2A120.86,120.86,0,0,0,38.39,192.46Z"/><path class="cls-12" d="M36.06,250.75a94.42,94.42,0,0,0,5.12,8.54c.9,1.25,1.71,2.48,2.56,3.55.42.55.8,1.1,1.2,1.6l1.16,1.45c3,3.71,5,6.11,4.35,7s-3.77,0-8.06-3.08l-1.65-1.24c-.57-.44-1.1-1-1.68-1.47a42.43,42.43,0,0,1-3.46-3.52,47.69,47.69,0,0,1-10.33-19.94,42.32,42.32,0,0,1-.88-4.85c-.09-.77-.19-1.5-.23-2.22s0-1.4-.06-2.06c0-5.26,1.13-8.39,2.13-8.36s1.91,3.05,3.23,7.61l.52,1.78c.18.62.41,1.25.62,1.91.38,1.32.92,2.69,1.42,4.14A94.39,94.39,0,0,0,36.06,250.75Z"/><path class="cls-12" d="M67.93,123.65A94.35,94.35,0,0,0,69.15,133c.31,1.43.54,2.81.87,4.07.16.64.27,1.27.43,1.86l.44,1.71c1.13,4.37,1.93,7.26,1,7.85s-3.35-1.43-6-5.72l-1-1.71c-.33-.6-.61-1.25-.92-1.92a40.14,40.14,0,0,1-1.7-4.39,45.45,45.45,0,0,1-1.49-21.39,40.27,40.27,0,0,1,1.08-4.58c.22-.71.4-1.39.64-2l.73-1.83c2-4.61,4.21-6.91,5.12-6.49s.62,3.42.11,7.91l-.2,1.76c-.07.61-.1,1.25-.17,1.9-.15,1.3-.19,2.7-.3,4.16A94.26,94.26,0,0,0,67.93,123.65Z"/><path class="cls-6" d="M355.66,174.31a165.11,165.11,0,0,0-59.78,10.43c-10.63,4-21.07,9.1-31.63,13.56v-4.12L252.17,203a106,106,0,0,1-14.22,3.9c-1.55.3-3.11.56-4.69.78a69.08,69.08,0,0,1-11.64.58c-10.43-.39-20.55-3.4-30.53-6.38l-56.29-16.8-14.54-4.34-20.14-6q-2.75,33.38-8.73,66.39Q87.06,265.14,81,288.82c-.1.41-.21.82-.31,1.23-4.66,18.14-10.95,37.42-26,48.5l-.92,1.13c0,1.12,0,2.25,0,3.36Q50.69,336.71,48,330.2c11.22-9.15,18.92-22.41,22.74-36.44,4.32-15.88,4-32.73,1.4-49a1.49,1.49,0,0,0,1.43.57c1.44-.21,3-2.36,3.4-4.18a188.87,188.87,0,0,0,4.36-49.24c0-.66-.06-1.31-.09-2l3.23,3.4c6-11.47,4.25-31.47,6.3-44.25,13.89,12.88,48.77,13.2,66.08,5.51-4.33,3.77-5,12.86-10.1,15.6,1.53,0-8.28,5-6.75,4.94a129.75,129.75,0,0,0,65.78-21.6c-5.24,11-14.41,26.68-26,30.42,1.69.36,2.65-6.32,4.34-6q12.47,2.51,25.09,4.17c12.06,1.61,24.59,2.62,36.17-1.11,14.49-4.66,25.64-16.08,36.16-27.09q0,2.9-.35,5.8a65.84,65.84,0,0,1-5,19.31l32.61-13.88c.05.5.09,1,.12,1.51a27,27,0,0,1-3.55,14.74q25.15-11.8,49.59-25A27.75,27.75,0,0,1,355.66,174.31Z"/><path class="cls-6" d="M411.74,319.21c-8.3-10.85-15.05-25-20.53-40.32-.08-.22-.16-.44-.23-.65-11.25-33.09-16.84-70.92-19.39-93.54,10.71,26.93,25,59.59,39.5,85.45h0C408.88,287.05,408.92,304.81,411.74,319.21Z"/><path class="cls-14" d="M269.63,176.7c24.26-13.66,43.82-25.11,45.05-23.33s-16.68,16.14-41.28,30-46.18,21.74-47,19.86S245.4,190.42,269.63,176.7Z"/><path class="cls-14" d="M257.18,173.65c4.41-4.6,8.39-9.18,11.9-13.46,1.71-2.18,3.38-4.21,4.84-6.2.74-1,1.49-1.92,2.16-2.85l1.94-2.68c4.93-6.84,8-11.24,9-10.75s-.41,5.73-4.33,13.56l-1.59,3c-.56,1.05-1.22,2.11-1.87,3.22-1.28,2.24-2.84,4.51-4.47,6.91a121.8,121.8,0,0,1-26.14,27c-2.34,1.71-4.56,3.34-6.75,4.7-1.09.69-2.12,1.38-3.15,2l-3,1.69c-7.7,4.18-13,5.67-13.41,4.78s3.78-4.16,10.45-9.32l2.61-2c.91-.7,1.81-1.48,2.78-2.25,1.94-1.52,3.92-3.26,6-5C248.28,182.34,252.73,178.22,257.18,173.65Z"/><path class="cls-12" d="M167.43,170.51a127.73,127.73,0,0,0,20.86-7.38c3-1.53,6-2.88,8.6-4.48,1.31-.77,2.63-1.44,3.82-2.21l3.41-2.23c2.24-1.34,4.06-2.84,5.78-4,.84-.61,1.67-1.15,2.38-1.68s1.35-1.06,1.94-1.5c2.38-1.77,3.91-2.61,4.3-2.26s-.39,1.87-2.19,4.37q-.68.93-1.54,2c-.6.72-1.3,1.44-2,2.23a55.67,55.67,0,0,1-5.34,5.13l-3.32,2.77c-1.17.95-2.49,1.79-3.81,2.73a89.12,89.12,0,0,1-8.83,5.42,103.88,103.88,0,0,1-22.17,8.5,103.87,103.87,0,0,1-23.57,2.85,89.14,89.14,0,0,1-10.34-.66c-1.61-.22-3.17-.34-4.64-.63l-4.23-.9a55.7,55.7,0,0,1-7.12-2c-1-.36-2-.66-2.85-1s-1.63-.75-2.32-1.09c-2.76-1.36-4.16-2.34-4-2.84s1.92-.47,4.86,0c.73.11,1.54.26,2.42.42s1.86.23,2.89.37c2.07.25,4.38.72,7,.86l4.06.38c1.41.13,2.89.1,4.41.17,3,.2,6.29,0,9.69-.06A127.74,127.74,0,0,0,167.43,170.51Z"/><path class="cls-12" d="M132.77,165a101.23,101.23,0,0,0,11.59-5.33c1.7-1,3.36-1.87,4.83-2.84.74-.47,1.49-.89,2.17-1.36l2-1.33c5-3.41,8.07-5.83,8.93-5.11.4.34.13,1.39-.74,3q-.33.61-.76,1.34c-.3.47-.67.95-1.06,1.47a32.16,32.16,0,0,1-2.84,3.38L155,160c-.64.63-1.36,1.21-2.09,1.85a54.7,54.7,0,0,1-4.91,3.75,60.59,60.59,0,0,1-26.34,9.87,54.62,54.62,0,0,1-6.16.4c-1,0-1.9,0-2.79,0l-2.57-.2a32.13,32.13,0,0,1-4.36-.68c-.64-.14-1.23-.26-1.76-.41s-1-.34-1.45-.5c-1.73-.66-2.62-1.27-2.54-1.8.17-1.11,4.09-1.32,10.09-2l2.35-.29c.81-.1,1.65-.27,2.52-.4,1.74-.23,3.58-.66,5.51-1A101.21,101.21,0,0,0,132.77,165Z"/><path class="cls-12" d="M72.26,253c-3.94-18.19-10.05-32.28-8.1-33.34.9-.48,3.66,2.5,6.83,8.12.79,1.41,1.62,3,2.4,4.69S75,236,75.75,238a99.8,99.8,0,0,1,4,13.3,99.82,99.82,0,0,1,2,13.73c.12,2.13.24,4.15.2,6.05s-.07,3.66-.19,5.27c-.5,6.44-1.74,10.3-2.76,10.25C76.78,286.49,76.37,271.13,72.26,253Z"/><path class="cls-12" d="M82.64,210.52c-.93-5.11-1.91-9.93-2.87-14.31-.52-2.17-1-4.26-1.47-6.19l-.69-2.81-.68-2.58c-1.72-6.58-2.86-10.76-1.87-11.26s3.8,3,6.94,9.37l1.19,2.53c.4.89.76,1.83,1.15,2.8.8,1.94,1.5,4.06,2.24,6.29a126.38,126.38,0,0,1,3.6,14.79,156.62,156.62,0,0,1,2.4,27.28c0,7-.65,11.34-1.7,11.43s-2.36-4.11-3.69-10.92S84.46,220.74,82.64,210.52Z"/><path class="cls-12" d="M344.09,154.54c1.54-2,2.91-4,4.14-5.82.58-.94,1.18-1.81,1.68-2.67s1-1.65,1.46-2.38c1.79-2.95,3.1-4.91,4.17-4.69s1.56,2.67.92,6.54a22.28,22.28,0,0,1-.74,3.1,30,30,0,0,1-1.27,3.44A34.57,34.57,0,0,1,344.2,165.2a30,30,0,0,1-3,2.07,22.28,22.28,0,0,1-2.83,1.48c-3.59,1.57-6.13,1.62-6.56.71s1.11-2.74,3.53-5.19c.6-.62,1.27-1.27,2-2s1.41-1.49,2.18-2.28C340.94,158.34,342.52,156.53,344.09,154.54Z"/><path class="cls-8" d="M53.84,333.37C68.95,322.28,75.23,303,79.9,284.86A691.24,691.24,0,0,0,99.31,169.51l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370.19,170s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62L289,560a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.62,472,52.12,407.48,52.93,334.49"/><path class="cls-15" d="M366.79,83c3.56-9.19,4.7-18.51,5.61-25.39s1.67-11.38,3.11-11.5,3.15,4.16,4.11,11.49a63.11,63.11,0,0,1,.29,13.08,57.22,57.22,0,0,1-3.61,16A46.21,46.21,0,0,1,367.44,101a36.74,36.74,0,0,1-11,8.3,22.84,22.84,0,0,1-8.9,2.45c-2.21.06-3.45-.39-3.59-1.06-.32-1.48,3.72-3.27,8.61-7.49A48.83,48.83,0,0,0,360.21,95,53.81,53.81,0,0,0,366.79,83Z"/><path class="cls-15" d="M393.72,82.48c.87-4.87,1.17-9.75,1.81-13.49s1.62-6.21,3-6.35,2.93,2,4.17,5.79a32.63,32.63,0,0,1,1.39,6.9,33.45,33.45,0,0,1-.35,9,27.19,27.19,0,0,1-3.21,8.81,20.26,20.26,0,0,1-5.08,5.9,11.07,11.07,0,0,1-4.8,2.28c-1.31.2-2.17-.08-2.53-.67-.73-1.26.54-3.35,1.86-6.32A49.1,49.1,0,0,0,393.72,82.48Z"/><path class="cls-15" d="M363.5,116.33c3.72-2.45,7.13-4.62,9.92-6.06s5-2.06,6-1.12.74,3.29-1,6.3a32.08,32.08,0,0,1-21.71,14.25c-3.46.41-5.77-.25-6.18-1.58s1-3.12,3.44-5.1S359.77,118.77,363.5,116.33Z"/><path class="cls-15" d="M405.25,202a22.88,22.88,0,0,1,7.56-8.1c2.52-1.51,4.63-1.74,5.6-.75s.76,3-.12,5.45a57,57,0,0,1-4.2,8.5,57,57,0,0,1-5.26,7.89c-1.67,2-3.28,3.19-4.65,2.83s-2.2-2.28-2.16-5.22A22.88,22.88,0,0,1,405.25,202Z"/><path class="cls-11" d="M46.05,163.48a38.77,38.77,0,0,1,3.68-7.13,28.5,28.5,0,0,1,4.21-5c2.78-2.58,5.19-3.49,6.27-2.63s.8,3.3-.21,6.55-2.66,7.39-4.44,12-3.35,8.72-4.8,11.81-2.84,5.08-4.27,5-2.54-2.4-2.85-6.18a28.52,28.52,0,0,1,.3-6.56A38.81,38.81,0,0,1,46.05,163.48Z"/><path class="cls-11" d="M77.47,109.21a11.49,11.49,0,0,1,6.45-3c2-.16,3.51.49,4.17,1.73a4.9,4.9,0,0,1-.29,4.37,16,16,0,0,1-8.4,7.53,4.9,4.9,0,0,1-4.37-.18c-1.16-.79-1.64-2.38-1.27-4.33A11.49,11.49,0,0,1,77.47,109.21Z"/><ellipse class="cls-11" cx="210.56" cy="221.64" rx="5.11" ry="8.76" transform="translate(-22.94 418.97) rotate(-86.67)"/><path class="cls-9" d="M224.78,442.79h22.94"/><path class="cls-9" d="M20.87,340A35.55,35.55,0,0,1,42,316.79"/><path class="cls-9" d="M442.19,340A35.55,35.55,0,0,0,421,316.79"/><path class="cls-11" d="M36.71,359.23a58.7,58.7,0,0,1,4.48,7.36c1.06,2.29,1.34,4.25.37,5.29s-2.92,1-5.37-.08a19.33,19.33,0,0,1-8-6.91c-2.49-3.68-3.38-8-2.81-11.09a7,7,0,0,1,1.47-3.46,2.37,2.37,0,0,1,2.07-.95c1.42.21,2.44,1.71,3.61,3.43S35.05,356.75,36.71,359.23Z"/><path class="cls-3" d="M306.74,281.15a53.41,53.41,0,0,0-19.38,5.9c-4.86,2.45-8,4.52-9.27,3.52-.59-.47-.59-1.67.1-3.41a20.9,20.9,0,0,1,4.39-6.38,33.08,33.08,0,0,1,4-3.56,37.32,37.32,0,0,1,5.31-3.26,38.1,38.1,0,0,1,28.15-2.45,37.32,37.32,0,0,1,5.79,2.29,33.07,33.07,0,0,1,4.6,2.8,20.9,20.9,0,0,1,5.43,5.52c1,1.6,1.18,2.78.69,3.34-1.07,1.2-4.53-.29-9.74-1.86A53.41,53.41,0,0,0,306.74,281.15Z"/><path class="cls-9" d="M342.4,280.36a49.37,49.37,0,0,0-70.8,6.17"/><path class="cls-16" d="M264.12,323.48c12.85-5.69,25.89-11.31,39.71-13.84s28.68-1.72,41.06,4.94"/><path class="cls-17" d="M326.2,321.18a17.9,17.9,0,0,1-35.79,0c0-9.88,8-13.77,17.9-13.77S326.2,311.3,326.2,321.18Z"/><path class="cls-3" d="M167.36,281.15a53.41,53.41,0,0,1,19.38,5.9c4.86,2.45,8,4.52,9.27,3.52.59-.47.59-1.67-.1-3.41a20.9,20.9,0,0,0-4.39-6.38,33.08,33.08,0,0,0-4-3.56,37.32,37.32,0,0,0-5.31-3.26A38.1,38.1,0,0,0,154,271.51a37.32,37.32,0,0,0-5.79,2.29,33.07,33.07,0,0,0-4.6,2.8,20.9,20.9,0,0,0-5.43,5.52c-1,1.6-1.18,2.78-.69,3.34,1.07,1.2,4.53-.29,9.74-1.86A53.41,53.41,0,0,1,167.36,281.15Z"/><path class="cls-9" d="M131.69,280.36a49.37,49.37,0,0,1,70.8,6.17"/><path class="cls-16" d="M210,323.48c-12.85-5.69-25.89-11.31-39.71-13.84s-28.68-1.72-41.06,4.94"/><path class="cls-17" d="M147.9,321.18a17.9,17.9,0,0,0,35.79,0c0-9.88-8-13.77-17.9-13.77S147.9,311.3,147.9,321.18Z"/><path class="cls-9" d="M206,498.28A59.24,59.24,0,0,0,236,503c14.26-1.51,29.15-10,32.35-24"/><circle class="cls-2" cx="237.17" cy="528.6" r="10.55" transform="translate(-329.15 406.34) rotate(-53.65)"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-5.svg b/src/assets/icons/dynamic-avatar-5.svg
new file mode 100644
index 0000000..746e4b8
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485.29 648.83"><defs><style>.cls-1{fill:#485d63;}.cls-2{fill:#dfe7ea;}.cls-3{fill:#f0d7c2;}.cls-4{fill:#e8bc70;}.cls-5{fill:#9e8863;}.cls-6{fill:#eace9b;}.cls-7{fill:#ebcbac;}.cls-8{fill:#d7ad8c;}.cls-9{fill:#fff;}.cls-10{fill:#ebdce8;}.cls-11,.cls-12,.cls-13,.cls-15,.cls-16{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-11{stroke-linecap:square;}.cls-11,.cls-15,.cls-16{stroke-width:10px;}.cls-12,.cls-13{stroke-width:8px;}.cls-13,.cls-15{stroke-linecap:round;}.cls-14{fill:#dcb79b;}.cls-17{fill:#325560;}.cls-18{fill:#f9d7a5;}.cls-19{fill:#aa9777;}</style></defs><title>Asset 110</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M443.55,323.66c2.62-14.83,4.62-26.94,6.06-26.84s1.64,12.6-1,27.72-7.13,26.8-8.45,26.42S441,338.5,443.55,323.66Z"/><ellipse class="cls-2" cx="268.35" cy="594.61" rx="184.33" ry="54.22"/><path class="cls-3" d="M428.34,469.65c0-8.3,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88H412.62V469.59S428.34,471.71,428.34,469.65Z"/><path class="cls-4" d="M434.11,381c-9.53,46,36-85,40.14-131.84A277.35,277.35,0,0,0,475.52,220a190.51,190.51,0,0,0-21.46-84.42c-9.77-18.73-24.42-37-45-41.73H276.62V389.38S434.59,378.69,434.11,381Z"/><path class="cls-5" d="M472.25,252.2C468.11,299,422.58,430,432.11,384c.12-.56-8.91-.38-22.68.23,8.3-26.32,15.11-53,19.16-80.32,7-47.44,5.38-96.92-11.08-142a79.81,79.81,0,0,1-9.11,39,99.38,99.38,0,0,0-66.89-53.24,146.34,146.34,0,0,1-3.3,57.77,113.39,113.39,0,0,0-63.59-35.83V96.83H407.05c20.59,4.74,35.24,23,45,41.73A190.51,190.51,0,0,1,473.52,223,276.87,276.87,0,0,1,472.25,252.2Z"/><path class="cls-4" d="M358.56,191.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,107,85.23,85.23,0,0,0,382.46,38.8h0A82.69,82.69,0,0,0,364,24.87C291.64-14.73,216.06,17,145.47,66.21,71.2,118,29.88,211,34.33,301.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,638.32,41.63,645.8,59.15,645.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-6" d="M127.21,490.34c9.35,30.8,14.36,64.3,4.61,95s-37.48,57.33-69.67,57.43c-17.52.06-34.2-7.41-49.34-16.24.81-.49,1.59-1,2.36-1.51,40.57-1.44,79.75-27.29,96.16-64.58a37.9,37.9,0,0,1-38,.64A52.25,52.25,0,0,0,111.77,525a51.18,51.18,0,0,1-32.54,2.87c10.53-2.58,18.3-12,22.13-22.1s4.42-21.18,5.43-32c1.93-20.56,5.55-41.07,12.68-60.45,15.06-40.93,44.72-74.4,74.56-106.4q7.86,36.69,19.35,72.48Z"/><path class="cls-7" d="M115.17,463.89C130.26,540.2,184.36,587,245.46,628.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-3" d="M418.83,302s34.47,218.5-141.37,339.17c-8.65,5.93,20.28-4.85,29.27-10.26,49.1-29.54,94.28-70.57,113.43-124.58,13-36.78,13.08-76.71,13-115.73-.08-30.16-.78-62.3-14.31-88.6"/><path class="cls-8" d="M367.25,203.16c-.15.26-.31.51-.47.77-17,27.27-46.39,49.11-78.51,48-11.52-.41-23-3.7-34.44-2.2-17.75,2.32-32,15.69-42.92,29.89C168,335.51,159.1,412.77,176.93,481c7.78,29.76,20.24,58.34,25.29,88.69a75.28,75.28,0,0,1,.81,21.66c-39.62-33.48-70.95-73.23-81.86-128.43l-4.39-22.2a213.9,213.9,0,0,1-3.08-62.46c0-.14,0-.28,0-.43,5.35-54.09,14.23-109.5,42.33-156,8-13.29,17.76-25.89,30.6-34.62s29.16-13.18,44.2-9.34c11.55,3,21.54,10.46,33.12,13.25,26.94,6.51,54.36-13.7,81.92-8.28a29.37,29.37,0,0,1,9.22,3.32C362.15,190.21,365.45,196.27,367.25,203.16Z"/><path class="cls-9" d="M384.43,338.52c-13.54,10.91-12.77,39.26-34.85,41-14.66,1.18-44.11-16.07-34.5-26.74,5-5.5,25-11.47,25-11.47Z"/><path class="cls-10" d="M384.43,338.52c-13.53,10.91-12.77,39.26-34.85,41-14.66,1.19-44.11-16.07-34.5-26.74a15.69,15.69,0,0,1,3.11-2.48c4.63,9.4,24.27,19.12,35.39,18.22,16.34-1.32,20.17-17.18,26.54-29.76Z"/><path class="cls-8" d="M356,316.88c-12.09,1.06-22.72,5.35-30.26,9.22s-12.51,7-14.47,5.49c-.92-.74-.92-2.6.15-5.33a32.62,32.62,0,0,1,6.86-10,51.64,51.64,0,0,1,6.32-5.55,58.26,58.26,0,0,1,8.29-5.08,59.48,59.48,0,0,1,43.94-3.83,58.26,58.26,0,0,1,9,3.57,51.62,51.62,0,0,1,7.18,4.38,32.64,32.64,0,0,1,8.47,8.62c1.53,2.5,1.85,4.33,1.07,5.22-1.66,1.87-7.07-.45-15.21-2.9S368.11,315.84,356,316.88Z"/><path class="cls-11" d="M411.69,319.94a77.07,77.07,0,0,0-110.53,9.63"/><path class="cls-12" d="M300.9,360.34c13.2-7.76,26.61-15.47,41.26-19.92s30.84-5.43,45.06.23"/><path class="cls-13" d="M313.72,357c5.68,13.18,20.84,23.93,35.5,22.74,22.08-1.78,20.31-29.13,33.85-40"/><path class="cls-14" d="M365.83,389.68a35.49,35.49,0,0,1-7.48,2.76,30.48,30.48,0,0,1-3.43.6,22.93,22.93,0,0,1-3,.2c-3.71,0-5.91-.66-5.87-1s2.27-.36,5.74-.84c.87-.12,1.81-.26,2.81-.49s2.06-.49,3.17-.78a39.27,39.27,0,0,0,13.18-6.78c.88-.73,1.75-1.4,2.48-2.12s1.43-1.37,2-2c2.4-2.54,3.67-4.38,4-4.18s-.46,2.33-2.63,5.33a22.9,22.9,0,0,1-1.92,2.33,30.56,30.56,0,0,1-2.48,2.44A35.49,35.49,0,0,1,365.83,389.68Z"/><path class="cls-14" d="M324.31,390.28a20.85,20.85,0,0,1-5.91-3.69c-1.32-1.22-1.92-2.18-1.69-2.44.49-.55,3.92,1.86,8.59,3.78s8.77,2.73,8.72,3.47c0,.34-1.13.6-2.93.51A20.86,20.86,0,0,1,324.31,390.28Z"/><path class="cls-9" d="M163.16,338.52c13.54,10.91,12.77,39.26,34.85,41,14.66,1.18,44.11-16.07,34.5-26.74-5-5.5-25-11.47-25-11.47Z"/><path class="cls-10" d="M163.16,338.52c13.53,10.91,12.77,39.26,34.85,41,14.66,1.19,44.11-16.07,34.5-26.74a15.69,15.69,0,0,0-3.11-2.48c-4.63,9.4-24.27,19.12-35.39,18.22-16.34-1.32-20.17-17.18-26.54-29.76Z"/><path class="cls-8" d="M191.58,316.88c12.09,1.06,22.72,5.35,30.26,9.22s12.51,7,14.47,5.49c.92-.74.92-2.6-.15-5.33a32.62,32.62,0,0,0-6.86-10,51.64,51.64,0,0,0-6.32-5.55,58.26,58.26,0,0,0-8.29-5.08,59.48,59.48,0,0,0-43.94-3.83,58.26,58.26,0,0,0-9,3.57,51.62,51.62,0,0,0-7.18,4.38,32.64,32.64,0,0,0-8.47,8.62c-1.53,2.5-1.85,4.33-1.07,5.22,1.66,1.87,7.07-.45,15.21-2.9S179.48,315.84,191.58,316.88Z"/><path class="cls-11" d="M135.9,319.94a77.07,77.07,0,0,1,110.53,9.63"/><path class="cls-12" d="M246.69,360.34c-13.2-7.76-26.61-15.47-41.26-19.92s-30.84-5.43-45.06.23"/><path class="cls-13" d="M233.87,357c-5.68,13.18-20.84,23.93-35.5,22.74-22.08-1.78-20.31-29.13-33.85-40"/><path class="cls-14" d="M182.94,387.41a43.84,43.84,0,0,0,6.92,2.76c1.11.29,2.16.61,3.17.78s1.94.37,2.81.49c3.47.47,5.69.44,5.74.84s-2.16,1-5.87,1a22.93,22.93,0,0,1-3-.2,30.47,30.47,0,0,1-3.43-.6,33.07,33.07,0,0,1-14.08-7.24,30.55,30.55,0,0,1-2.48-2.44,22.9,22.9,0,0,1-1.92-2.33c-2.18-3-2.9-5.2-2.63-5.33s1.62,1.63,4,4.18c.61.63,1.26,1.32,2,2s1.6,1.39,2.48,2.12A43.84,43.84,0,0,0,182.94,387.41Z"/><path class="cls-14" d="M222.31,387.93c4.67-1.92,8.1-4.33,8.59-3.78.22.26-.37,1.23-1.69,2.44a21.64,21.64,0,0,1-12.7,5.31c-1.79.09-2.9-.17-2.93-.51C213.54,390.66,217.66,389.9,222.31,387.93Z"/><path class="cls-15" d="M118.17,465.89C133.26,542.2,187.36,589,248.46,630.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-15" d="M408.06,91.27c20.59,4.74,35.24,23,45,41.73a190.51,190.51,0,0,1,21.46,84.42,277.35,277.35,0,0,1-1.27,29.22c-4.14,46.8-11.45,94.63-40.14,131.84"/><path class="cls-15" d="M431.34,466.89c8.08,1.87,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88"/><polygon class="cls-3" points="274.12 398.32 274.12 484.32 304.12 484.32 274.12 398.32"/><polyline class="cls-11" points="274.28 402.83 273.05 474.82 272.96 479.82"/><path class="cls-9" d="M363.87,259.63c2.39,2.34,5,4.47,7.37,6.54a66.27,66.27,0,0,1,6.23,6,21.72,21.72,0,0,1,3.45,5c.59,1.36.69,2.25.28,2.58s-1.28.1-2.47-.56-2.79-1.64-4.78-2.86-4.34-2.7-7-4.47a59.84,59.84,0,0,1-8.45-6.68,30.66,30.66,0,0,1-6.65-9.31,26.37,26.37,0,0,1-2.3-9,17.4,17.4,0,0,1,.59-6.16c.45-1.41,1-2.13,1.55-2.09,1.1.08,1.66,3,3.17,7.19a39.37,39.37,0,0,0,3.26,6.83A35.88,35.88,0,0,0,363.87,259.63Z"/><ellipse class="cls-9" cx="351.31" cy="225.49" rx="3.83" ry="5.04" transform="translate(-15.6 26.39) rotate(-4.21)"/><path class="cls-1" d="M65.56,459.91c-.07-30.74-1.78-55.72.4-56,1-.13,2.79,6,4.36,16.12.79,5.06,1.49,11.11,2,17.86s.84,14.18.88,22-.25,15.25-.71,22-1.13,12.81-1.88,17.87c-1.49,10.13-3.21,16.28-4.23,16.16C64.22,515.65,65.74,490.65,65.56,459.91Z"/><path class="cls-1" d="M111.93,261.4a45.42,45.42,0,0,1,5.4-11.7c1.89-2.77,3.61-4.19,4.56-3.75,1.93.92.15,8.64-2.65,17.73s-5.74,16.44-7.86,16.11c-1-.18-1.65-2.32-1.64-5.67A45.45,45.45,0,0,1,111.93,261.4Z"/><path class="cls-1" d="M77.62,398.25c-4-26.89-6.89-48.82-4.79-49.26s8.3,21,12.36,48.12,4.42,49.44,2.35,49.63S81.69,425.13,77.62,398.25Z"/><path class="cls-1" d="M427.32,123.89a91.18,91.18,0,0,1,3.08,13c.28,2,.56,4,.67,5.81s.21,3.53.22,5.08c0,6.23-.81,10-1.47,10-1.53,0-1.71-15.08-7.36-32.38C417,108.09,408.4,95.73,409.62,94.82c.52-.4,3.4,2.2,7,7.28.9,1.27,1.85,2.68,2.77,4.26s1.88,3.29,2.83,5.11A91.15,91.15,0,0,1,427.32,123.89Z"/><path class="cls-1" d="M435.53,122.29a80.51,80.51,0,0,1,5,12.58c.55,2,1.09,3.91,1.43,5.73.18.91.38,1.78.5,2.62l.33,2.44c.74,6.25.25,10.13-.4,10.17s-1.55-3.67-3.14-9.47l-.63-2.27c-.22-.79-.51-1.59-.76-2.44-.49-1.69-1.15-3.45-1.79-5.32a107.91,107.91,0,0,0-11.54-22.83c-1.12-1.62-2.14-3.2-3.22-4.6-.53-.71-1-1.41-1.51-2.06L418.35,105c-3.72-4.72-6.25-7.57-5.76-8.15s3.83,1.41,8.42,5.71l1.77,1.72c.61.6,1.19,1.28,1.81,2,1.27,1.35,2.48,2.91,3.77,4.55A80.56,80.56,0,0,1,435.53,122.29Z"/><path class="cls-1" d="M437.62,333.7c-.34-15.36-3.9-27.55-2.48-28.05.63-.22,2.37,2.59,4.09,7.59a64,64,0,0,1,2.31,9,74.61,74.61,0,0,1,.62,22.7,63.92,63.92,0,0,1-1.82,9.1c-1.44,5.09-3,8-3.67,7.8C435.24,361.42,438.12,349.06,437.62,333.7Z"/><path class="cls-16" d="M433.65,395.23a27.4,27.4,0,0,1,25.66,32.54"/><path class="cls-17" d="M184.12,352.09a15.92,15.92,0,1,0,31.84,0c0-8.79-7.13-13.92-15.92-13.92S184.12,343.29,184.12,352.09Z"/><circle class="cls-9" cx="206.12" cy="357.33" r="2.5"/><path class="cls-17" d="M364,352.09a15.92,15.92,0,1,1-31.84,0c0-8.79,7.13-13.92,15.92-13.92S364,343.29,364,352.09Z"/><circle class="cls-9" cx="341.95" cy="357.33" r="2.5"/><circle class="cls-3" cx="314.12" cy="599.33" r="11.5"/><path class="cls-8" d="M332.64,526.83c-1.48,3.18-4.8,5.06-8.08,6.31-13,5-25.52,2.38-36.86-5-4.46,3.84-9.18,5.62-14.07,5.29l.4-5.84c3.77.25,7.57-1.5,11.3-5.23l1.72-1.72,2,1.37c7.57,5.19,36.55-.44,42.56-1.18"/><path class="cls-8" d="M209.56,521.86c-3.46-2.9-5.74-5-5.94-5l3-3c6,.75,45.11,13.37,52.68,8.18l2-1.37,1.72,1.72c3.73,3.73,7.53,5.48,11.3,5.23l.4,5.84c-4.88.33-9.61-1.44-14.07-5.29-1.94,1.26-5.62,2.48-10,3.53A46.93,46.93,0,0,1,209.56,521.86Z"/><path class="cls-16" d="M271.67,524.41c3.93.27,8.6-1.11,13.57-6.08,0,0,1.62,1.11,4.16,2.68A33,33,0,0,0,330,516.25h0"/><path class="cls-16" d="M272.36,524.41c-3.93.27-8.6-1.11-13.57-6.08l-.1.07a37.13,37.13,0,0,1-47.07-4.52l-3.53-3.53"/><path class="cls-18" d="M390.67,49.67a524.8,524.8,0,0,0-73-15.76c-22.42-3.1-45.46-4.46-67.51.61-21.72,5-42.56,16.9-54.62,35.6a34.67,34.67,0,0,0,4.79-12.35c.11-.6.21-1.2.28-1.8a71.27,71.27,0,0,0-45.38,38.41,54.12,54.12,0,0,0,4-14.52,52.4,52.4,0,0,0,.43-8.21,96.11,96.11,0,0,0-45.21,47.18c-.65,1.46-1.26,3-1.82,4.45a1.23,1.23,0,0,0-.32-.17c-1.85-.64-3.67.94-4.91,2.45a58.38,58.38,0,0,0-12.54,27.11l-.06-9.87-.51.44a66.28,66.28,0,0,0-22.54,56.07q-.63-3-1.27-6c-.38.65-.75,1.3-1.12,2a87.78,87.78,0,0,0-9.45,57.92A37.49,37.49,0,0,0,54,243.29c-.67-.81-1.38-1.6-2.12-2.35a73.15,73.15,0,0,0-.2,50.58,11.34,11.34,0,0,0-3.33-3q-.41-.24-.84-.45c-.5,15.72-.26,31.47.71,47.16q-2.35-2.53-4.63-5.15c-2.08-8.34-4.19-16.69-6.18-25.05.35,6.55.92,13.09,1.61,19.61-.4-.47-.78-1-1.15-1.43-.68-6.57-1.22-13.15-1.55-19.75q-.3-6.09-.32-12.19a276.58,276.58,0,0,1,2.33-35,282.81,282.81,0,0,1,8.88-42.43,275.52,275.52,0,0,1,52.85-100.1,243.92,243.92,0,0,1,47.39-43.55c9.57-6.67,19.23-13,29-18.91,1.1-1.38,2.25-2.74,3.43-4.06,21-12.49,42.38-22.77,63.85-29.51q-3.33,2-6.52,4.15C280.13,7,323.61,5.69,366,28.88a79.64,79.64,0,0,1,9.72,6.31,87,87,0,0,1,15,14.48Z"/><path class="cls-15" d="M358.56,189.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,105,85.23,85.23,0,0,0,382.46,36.8h0A82.69,82.69,0,0,0,364,22.87C291.64-16.73,216.06,15,145.47,64.21,71.2,116,29.88,209,34.33,299.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,636.32,41.63,643.8,59.15,643.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-1" d="M46.16,273.53c3.26,8.9,6.48,17,8.51,23s2.9,10,1.93,10.42-3.52-2.66-6.84-8.14A133.92,133.92,0,0,1,39,276.15,109.19,109.19,0,0,1,35,262.74c-.42-2.12-.83-4.12-1.06-6-.12-1-.26-1.87-.34-2.76l-.18-2.56c-.35-6.55.52-10.59,1.53-10.63s2.16,3.78,3.82,9.76l.65,2.35.75,2.53c.48,1.75,1.09,3.6,1.67,5.55C43.12,264.82,44.55,269.08,46.16,273.53Z"/><path class="cls-1" d="M54.21,234.57c1.33,3.41,2.73,6.6,4.06,9.5.7,1.43,1.32,2.82,2,4.08s1.23,2.47,1.78,3.57c2.2,4.38,3.55,7.28,2.72,8s-3.63-1-7.18-4.91a39.82,39.82,0,0,1-2.72-3.31c-1-1.22-1.84-2.6-2.78-4.06a61.19,61.19,0,0,1-8.07-21c-.28-1.71-.55-3.34-.66-4.88a39.84,39.84,0,0,1-.19-4.28c0-5.25,1-8.44,2-8.45s2,3,3.34,7.76c.33,1.18.66,2.47,1.07,3.84s.83,2.83,1.27,4.36C51.81,227.84,52.91,231.15,54.21,234.57Z"/><path class="cls-1" d="M69.46,183.31A92.69,92.69,0,0,0,72,193.87c.54,1.58,1,3.13,1.55,4.52.27.7.49,1.4.75,2l.76,1.87c2,4.78,3.38,7.85,2.51,8.56-.41.33-1.31,0-2.6-1q-.49-.36-1-.84c-.36-.32-.72-.7-1.11-1.11A26.41,26.41,0,0,1,70.36,205l-1.3-1.82c-.44-.64-.83-1.35-1.26-2.07a45.69,45.69,0,0,1-2.42-4.77,51.11,51.11,0,0,1-4.07-24A45.6,45.6,0,0,1,62,167c.17-.82.3-1.61.5-2.36l.63-2.14A26.44,26.44,0,0,1,64.53,159c.23-.51.45-1,.68-1.41s.48-.8.71-1.14c.9-1.34,1.63-2,2.13-1.79,1.05.38.72,3.75.45,8.91l-.1,2c0,.7,0,1.43,0,2.18-.07,1.5,0,3.1,0,4.77A92.67,92.67,0,0,0,69.46,183.31Z"/><path class="cls-1" d="M89,131.24a74.29,74.29,0,0,1,2.76-13.29c.66-2,1.28-3.86,2-5.56.37-.85.69-1.68,1.07-2.45l1.12-2.2c3-5.56,5.78-8.38,6.65-7.89s-.08,4.2-1.62,9.9l-.61,2.23c-.21.77-.38,1.59-.6,2.43-.45,1.66-.8,3.47-1.23,5.34-.76,3.78-1.48,7.93-2,12.33s-.65,8.62-.72,12.47c0,1.92,0,3.76.06,5.48,0,.86,0,1.7.06,2.5l.11,2.31c.29,5.9.53,9.7-.54,10s-3.08-3.06-4.81-9.13l-.63-2.39c-.21-.84-.35-1.72-.52-2.63-.37-1.82-.58-3.79-.8-5.87A74.3,74.3,0,0,1,89,131.24Z"/><path class="cls-1" d="M113.68,100.1a74.8,74.8,0,0,1,7.45-12.67,63.61,63.61,0,0,1,4.07-4.95c.68-.74,1.31-1.47,2-2.11l2-1.83a37.12,37.12,0,0,1,3.55-2.91c.54-.4,1-.77,1.54-1.09s1-.57,1.39-.8c1.7-.91,2.78-1.21,3.12-.8.72.86-1.83,4.07-5.57,9.22l-1.46,2c-.51.7-1,1.47-1.51,2.23-1.08,1.51-2.09,3.22-3.21,5a126.11,126.11,0,0,0-6.32,11.89,126.2,126.2,0,0,0-4.81,12.58c-.58,2-1.2,3.88-1.63,5.68-.23.9-.5,1.76-.69,2.6l-.56,2.43c-1.43,6.2-2.17,10.24-3.29,10.26-.53,0-1-1-1.45-2.88q-.16-.7-.31-1.57c-.09-.57-.13-1.2-.19-1.87a37.14,37.14,0,0,1-.14-4.59l.1-2.67c0-.93.18-1.89.29-2.88A63.54,63.54,0,0,1,109,114,74.81,74.81,0,0,1,113.68,100.1Z"/><path class="cls-1" d="M154,73.71A101.68,101.68,0,0,1,161.36,60c1.33-2,2.6-3.88,3.92-5.55.65-.84,1.26-1.66,1.9-2.42L169,49.87c4.85-5.38,8.61-7.92,9.35-7.24,1.66,1.52-9.16,15-17.39,34.15-8.45,19.07-11,36.15-13.21,36-1-.08-1.69-4.56-1.05-11.78l.3-2.82c.12-1,.31-2,.48-3,.32-2.11.85-4.32,1.4-6.65A101.72,101.72,0,0,1,154,73.71Z"/><path class="cls-1" d="M202.65,42a130.36,130.36,0,0,1,14.27-14.29c2.4-2,4.67-3.85,6.94-5.42,1.13-.8,2.19-1.6,3.26-2.29l3.11-2c2-1.27,3.86-2.23,5.51-3.09.83-.42,1.59-.82,2.32-1.15s1.41-.59,2-.83c2.46-.94,3.93-1.23,4.19-.77.56,1-4,4.45-10.88,10.24l-2.7,2.28c-.94.79-1.87,1.67-2.86,2.54-2,1.71-4,3.69-6.18,5.7-4.23,4.13-8.73,8.82-13.15,14s-8.25,10.43-11.62,15.29c-1.62,2.47-3.24,4.78-4.59,7-.69,1.12-1.41,2.18-2,3.24l-1.79,3c-4.56,7.77-7.22,12.82-8.28,12.43-.5-.18-.45-1.68.07-4.26q.19-1,.48-2.14c.2-.77.47-1.59.75-2.48.58-1.76,1.21-3.8,2.13-5.94L185,69.82c.51-1.18,1.12-2.36,1.72-3.6,1.17-2.5,2.65-5.05,4.19-7.75A130.38,130.38,0,0,1,202.65,42Z"/><path class="cls-1" d="M404.92,184.19A38,38,0,0,1,412,199.47c.83,4.26.44,7-.22,7s-1.62-2.32-3.23-6a65.1,65.1,0,0,0-7.68-13.26A56.35,56.35,0,0,0,395.3,181a40.81,40.81,0,0,0-5.17-4.37c-3.08-2.17-5.53-2.54-5.57-3.28,0-.34.64-.73,1.93-.86a11.71,11.71,0,0,1,5.3.94,26.48,26.48,0,0,1,6.61,4A38.63,38.63,0,0,1,404.92,184.19Z"/><path class="cls-1" d="M426.85,221.88c-3.16-30-9.14-53.8-7.67-54.21.64-.18,3,5.57,5.63,15.23,1.33,4.82,2.68,10.63,3.94,17.13s2.34,13.7,3.18,21.3,1.25,14.87,1.45,21.49.08,12.58-.19,17.58c-.52,10-1.57,16.12-2.24,16.08C429.42,276.39,430.17,251.84,426.85,221.88Z"/><path class="cls-19" d="M380.87,146.32A106.55,106.55,0,0,0,391,112.41a124.37,124.37,0,0,0,.3-29.22c-1.82-16.69-6.12-26.48-5-27,.44-.21,2.1,2,4.21,6.39a72.26,72.26,0,0,1,3.24,8.3,88.36,88.36,0,0,1,2.92,11.47A110,110,0,0,1,398,113.2a103.85,103.85,0,0,1-10.25,36.55,85.57,85.57,0,0,1-18,24.27l-4.9,4.58-1.2-6.53c-1.62-8.83-4.94-17-7.77-24.34l-2.08-5.41c-.66-1.78-1.27-3.33-1.94-4.88a69.07,69.07,0,0,0-4.23-8.2,59.88,59.88,0,0,0-8-10.43c-2.15-2.25-3.42-3.45-3.18-3.84s1.94.18,4.73,2a41.67,41.67,0,0,1,10.23,9.73,61.38,61.38,0,0,1,5.38,8.41c.83,1.57,1.68,3.34,2.43,5l2.41,5.24c1.65,3.62,3.4,7.5,5,11.7a85.72,85.72,0,0,1,4.18,13.7l-6.1-2A84.44,84.44,0,0,0,380.87,146.32Z"/><path class="cls-5" d="M355.62,172.83c.9,6.31-1.07,6.63-1,13-1.26-1.84-16.19-21.71-17.49-23.52-9.26-12.88-20.25-25.65-35.12-31.05l-.86-.31c-8.47-2.9-17.55-3.15-26.53-2.35l-2,.19c-1.94.21-3.88.46-5.8.74a206.66,206.66,0,0,0-62.9,19.75c-7.52,3.76-15,8.21-20.48,14.49a112.31,112.31,0,0,1,27.42-27.11c17.7-12.23,39.63-21,61.76-23.36l2-.2a100.49,100.49,0,0,1,29.26,1.53c22,4.57,34.59,18.37,42.26,35.86C344,149.82,357.85,173.33,355.62,172.83Z"/><path class="cls-16" d="M164.14,208.58c8-29.33,23.69-55.63,48.72-72.92,26.11-18,61.42-28.59,93-22,36.59,7.59,47.1,40.71,52.4,73.85"/><path class="cls-1" d="M215.74,147.22a100.7,100.7,0,0,1,26.07-3.78c6.69-.08,10.83.5,10.94,1.54s-3.87,2.39-10.3,3.84-15.26,3.05-24.56,5.75a101.18,101.18,0,0,0-22.64,9.55c-5.48,3.16-8.72,5.67-9.56,4.92-.38-.35-.08-1.46,1-3.12a30.21,30.21,0,0,1,5.4-6.17,51.65,51.65,0,0,1,10-6.95A70.64,70.64,0,0,1,215.74,147.22Z"/><path class="cls-1" d="M309.26,130.58a66.63,66.63,0,0,1,7.25,11.53,56.48,56.48,0,0,1,2.3,5.48c.31.88.63,1.71.87,2.54l.65,2.39a32.74,32.74,0,0,1,.81,4.18c.08.62.17,1.19.2,1.73s0,1,0,1.48c0,1.79-.29,2.81-.81,2.92-1.09.23-2.67-3.22-5.32-8.44l-1-2c-.36-.71-.79-1.42-1.19-2.17-.78-1.52-1.75-3.06-2.7-4.71A99.37,99.37,0,0,0,295,126.14c-1.39-1.31-2.66-2.61-4-3.71-.64-.56-1.23-1.15-1.84-1.66l-1.75-1.48c-4.47-3.77-7.47-6.1-7-7.11.23-.48,1.28-.5,3-.11q.66.15,1.44.37c.51.16,1.05.37,1.64.6a32.82,32.82,0,0,1,3.88,1.75l2.18,1.18c.75.42,1.49.93,2.27,1.43a56.59,56.59,0,0,1,4.8,3.5A66.67,66.67,0,0,1,309.26,130.58Z"/><path class="cls-1" d="M61.4,607.71a117.32,117.32,0,0,0,16.11-10.4C79.9,595.56,82,593.67,84,592l2.81-2.59c.45-.42.91-.81,1.33-1.22L89.4,587c6.42-6.34,10-10.83,11-10.22.82.48-1.2,6.11-6.94,13.78L92.38,592c-.39.49-.81,1-1.23,1.47l-2.67,3.08c-2,2-4.05,4.2-6.49,6.23a91.29,91.29,0,0,1-17,11.7A88.58,88.58,0,0,1,45.76,622l-2.27.6c-.75.17-1.51.31-2.24.46-1.48.27-2.9.6-4.3.78a74.11,74.11,0,0,1-7.8.73c-1.2,0-2.32.09-3.41.1a8.86,8.86,0,0,1-3.91-.72,5.16,5.16,0,0,1-1.69-1.33,7,7,0,0,1-.87-1.36c-.39-.8-.62-1.42-.83-1.84a2.56,2.56,0,0,0-.66-.9,2.74,2.74,0,0,0-.69-.47c-.39-.21-.81-.1-1-.27s-.14-.24-.06-.49a1.5,1.5,0,0,1,.83-.77,3.81,3.81,0,0,1,3.89,1c.63.58,1.11,1.22,1.58,1.73a3.45,3.45,0,0,0,.65.58,1,1,0,0,0,.5.16,7.4,7.4,0,0,0,1.91-.18l3.16-.63c2.22-.36,4.61-1,7.18-1.58,1.28-.3,2.58-.73,3.93-1.09l2-.58,2.07-.7A112.21,112.21,0,0,0,61.4,607.71Z"/><path class="cls-1" d="M93.87,544.17a90.31,90.31,0,0,0,6.1-6.67c.85-1.1,1.72-2.12,2.44-3.14.37-.51.76-1,1.1-1.46l1-1.38c2.5-3.52,4.14-5.89,5.2-5.56s1.14,3.36-.35,8l-.63,1.79c-.23.62-.53,1.23-.83,1.88a37.89,37.89,0,0,1-2.15,4,42.83,42.83,0,0,1-14.82,14.37,37.88,37.88,0,0,1-4.06,2c-.66.27-1.28.56-1.9.77l-1.8.58c-4.65,1.34-7.72,1.07-8,.1s2.12-2.63,5.72-5l1.41-.93c.49-.32,1-.7,1.49-1.05,1-.69,2.09-1.53,3.22-2.34A90.35,90.35,0,0,0,93.87,544.17Z"/><path class="cls-1" d="M95.45,496.29c2.6-8.77,4-17.18,5.28-23.3s2.5-10,3.56-9.87,1.74,4,1.83,10.4a86.21,86.21,0,0,1-3.33,25,60.1,60.1,0,0,1-5.63,13.06A44.34,44.34,0,0,1,90,520.81a26.34,26.34,0,0,1-6.29,4.73c-1.68.84-2.78,1-3.09.6-.67-.9,2-3.78,5.2-8.78A80.56,80.56,0,0,0,95.45,496.29Z"/><path class="cls-9" d="M306.51,19.4a82.38,82.38,0,0,1,10.9,3.14,62.75,62.75,0,0,1,8.43,3.81c4.63,2.56,7.07,4.86,6.63,5.79-1,2-12.76-2.18-27.55-5.25s-27.21-4.21-27.31-6.4c0-1,3.14-2.13,8.41-2.59a62.76,62.76,0,0,1,9.26-.06A82.38,82.38,0,0,1,306.51,19.4Z"/><path class="cls-9" d="M357.75,44.44a32.45,32.45,0,0,1,6.12,10.68c1,3.06.87,5.19-.07,5.63s-2.59-.79-4.62-2.92-4.52-5.16-7.29-8.45-5.32-6.26-7.09-8.62-2.71-4.17-2.09-5,2.71-.57,5.56.89A32.45,32.45,0,0,1,357.75,44.44Z"/><path class="cls-9" d="M367.32,553.4c2.58-2.66,5-5.26,7.12-7.65l5.7-6.46c3.28-3.7,5.55-6,6.51-5.45s.28,3.75-2,8.45a57.59,57.59,0,0,1-4.68,7.85,71.75,71.75,0,0,1-15.58,16,57.59,57.59,0,0,1-7.72,4.89c-4.64,2.4-7.87,3.11-8.39,2.22s1.66-3.27,5.27-6.65l6.31-5.87C362.19,558.5,364.72,556,367.32,553.4Z"/><path class="cls-9" d="M399.53,493.29c2-9.66,4.13-17.57,6.27-17.45,1,.08,1.87,2.22,2.19,5.66a52.17,52.17,0,0,1-5.22,25.92c-1.63,3.06-3.22,4.71-4.21,4.38C396.53,511.09,397.61,503,399.53,493.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dynamic-avatar-6.svg b/src/assets/icons/dynamic-avatar-6.svg
new file mode 100644
index 0000000..b2432f2
--- /dev/null
+++ b/src/assets/icons/dynamic-avatar-6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586.2 682.51"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#b0d7e9;}.cls-3{fill:#54b9d3;}.cls-4{fill:#f2c7a5;}.cls-20,.cls-5{opacity:0.5;}.cls-6{fill:#ffac89;}.cls-14,.cls-7{fill:none;stroke-miterlimit:10;stroke-width:10px;}.cls-7{stroke:#274b5b;}.cls-20,.cls-8{fill:#ef997b;}.cls-9{fill:#fcdac3;}.cls-10{fill:#fff;}.cls-11{fill:#274b5b;}.cls-12{fill:#3b535c;}.cls-13{fill:#d9edf4;}.cls-14{stroke:#42565e;stroke-linecap:round;}.cls-15{fill:#ebcbac;}.cls-16{fill:#d7ad8c;}.cls-17{fill:#3f565e;}.cls-18{fill:#f2dcca;}.cls-19{fill:#ce956e;}</style></defs><title>Asset 100</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="289.02" cy="618.52" rx="184.33" ry="54.22"/><path class="cls-2" d="M518.48,204.9l16.76,4.24,42.08,10.65a7.19,7.19,0,0,1,2.5,12.76L516.64,279a7.19,7.19,0,0,0-.88,10.82l54.39,55.65a7.19,7.19,0,0,1-1.52,11.23l-60.92,35.54a7.19,7.19,0,0,0-3,9l23.9,56.16a7.19,7.19,0,0,1-7.12,10L448.38,459l-305.16,3.1L67.8,467.44a7.19,7.19,0,0,1-7.12-10l23.9-56.16a7.19,7.19,0,0,0-3-9L20.67,356.73a7.19,7.19,0,0,1-1.52-11.23l54.39-55.65A7.19,7.19,0,0,0,72.65,279L9.48,232.55A7.19,7.19,0,0,1,12,219.79l44.73-11.32,23.55-6L125.78,191,90.1,107.72A7.19,7.19,0,0,1,98.83,98l119.89,37.21L233.83,14.4a7.19,7.19,0,0,1,13.82-1.75l45.43,114.84"/><path class="cls-2" d="M492,198.21,463.51,191l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L370.57,135.23l-6.09-48.76-3.73-29.86L355.46,14.4a7.19,7.19,0,0,0-13.82-1.75L296.22,127.48l-7.39,3.1"/><path class="cls-3" d="M233,368q0,46-1.73,92l-86.5.88-75.42,5.37a7.2,7.2,0,0,1-7.13-10l23.9-56.17a7.17,7.17,0,0,0-3-9L22.21,355.52a7.2,7.2,0,0,1-1.52-11.25l54.39-55.64a7.18,7.18,0,0,0-.88-10.81L11,231.34a7.19,7.19,0,0,1,2.49-12.76l44.74-11.32,23.56-5.95,45.51-11.52L91.64,106.5a7.19,7.19,0,0,1,8.75-9.7L142,109.72c-2,20.85-.12,41.93,7.5,61.34,3.36,8.54,7.81,16.73,10,25.65,4.38,18.17-1.25,37.39-10,53.89s-20.63,31.17-30.05,47.31c-5.36,9.22-10,19.27-10.24,29.93s5,22,14.75,26.29c14.89,6.55,31.1-5.22,42.57-16.76S192,312.6,207.88,316c10.25,2.17,18,11.15,21.52,21S233,357.54,233,368Z"/><circle class="cls-4" cx="145.54" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M162,452.3a47.25,47.25,0,1,1-18-90.91,48.21,48.21,0,0,1,6.74.48A47.25,47.25,0,0,0,162,452.3Z"/></g><circle class="cls-7" cx="144" cy="410.18" r="47.25"/><circle class="cls-4" cx="439.86" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M423.36,452.3a47.25,47.25,0,1,0,18-90.91,48.21,48.21,0,0,0-6.74.48,47.25,47.25,0,0,1-11.31,90.43Z"/></g><circle class="cls-7" cx="441.41" cy="410.18" r="47.25"/><path class="cls-4" d="M174.94,538q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18S451.87,307.81,451.87,415.6,382.17,610.78,296.2,610.78c-39.91,0-76.31-18.83-103.86-49.78"/><g class="cls-5"><path class="cls-8" d="M312.5,609.72a126,126,0,0,1-16.3,1.05c-39.92,0-76.32-18.82-103.86-49.79l-17.4-23q-4.09-6.34-7.73-13.09c-16.85-31.2-26.69-68.82-26.69-109.33,0-107.8,69.69-195.18,155.68-195.18a125.57,125.57,0,0,1,16.26,1.05c-78.33,10.19-139.41,93.2-139.41,194.12,0,40.51,9.84,78.13,26.69,109.33q3.65,6.74,7.73,13.09l17.4,23C248.63,587.7,279,605.37,312.5,609.72Z"/></g><g class="cls-5"><path class="cls-9" d="M278.39,608.72a126,126,0,0,0,16.3,1.05C334.6,609.78,371,591,398.55,560l17.4-23q4.09-6.34,7.73-13.09c16.85-31.2,26.69-68.82,26.69-109.33,0-107.8-69.69-195.18-155.68-195.18a125.57,125.57,0,0,0-16.26,1.05c78.33,10.19,139.41,93.2,139.41,194.12,0,40.51-9.84,78.13-26.69,109.33q-3.65,6.74-7.73,13.09L366,560C342.25,586.7,311.91,604.37,278.39,608.72Z"/></g><path class="cls-7" d="M416.2,294.56c20.42,33,32.58,74.47,32.58,119.49,0,107.79-69.7,195.18-155.68,195.18-39.91,0-76.31-18.83-103.86-49.78"/><path class="cls-7" d="M386.26,257.67a174,174,0,0,1,17.85,19.56"/><path class="cls-7" d="M171.84,536.47q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18,25.65,0,49.85,7.78,71.19,21.55"/><path class="cls-10" d="M281.08,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M279.21,387.62a43.37,43.37,0,1,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M278,387.72a43.37,43.37,0,0,1-86.75,0"/><circle class="cls-11" cx="233.06" cy="401.66" r="10.84"/><circle class="cls-10" cx="245.46" cy="398.56" r="7.75"/><path class="cls-10" d="M403.46,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M400,387.62a43.37,43.37,0,0,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M400.36,387.72a43.37,43.37,0,1,1-86.75,0"/><circle class="cls-11" cx="355.44" cy="401.66" r="10.84"/><circle class="cls-10" cx="367.83" cy="398.56" r="7.75"/><path class="cls-12" d="M108.89,340.21a50,50,0,0,1-1.71-8.58,50.56,50.56,0,0,1-.16-8.11,45.27,45.27,0,0,1,2.89-13.28,31.43,31.43,0,0,1,4.37-8c1.36-1.67,2.38-2.4,2.82-2.14,1,.57-.72,4.78-2,11.6a62,62,0,0,0-1,12,59.64,59.64,0,0,0,.55,7,55.64,55.64,0,0,0,1.6,7.31c.4,1.21.76,2.43,1.21,3.58a27,27,0,0,0,1.43,3.15,13.38,13.38,0,0,0,1.74,2.56l.47.58.53.52a9.35,9.35,0,0,0,1.1,1,27.49,27.49,0,0,0,10.2,4.72c3.33.91,6.22,1.44,8.21,2s3.12,1,3.11,1.58-1.15,1-3.23,1.39a36.81,36.81,0,0,1-9,.37,31.7,31.7,0,0,1-6.37-1.1,24,24,0,0,1-7.12-3.28,14.79,14.79,0,0,1-1.73-1.33l-.85-.74-.78-.82a19.33,19.33,0,0,1-2.78-3.69,30.37,30.37,0,0,1-2-4.07C109.8,343.06,109.36,341.65,108.89,340.21Z"/><path class="cls-12" d="M137.29,260.49C144,249.27,149.5,240,151.5,240.83c1,.4.82,3.3-.45,7.63a78.09,78.09,0,0,1-17.71,29.88c-3.19,3.19-5.66,4.71-6.48,4.06C125.2,281,130.66,271.75,137.29,260.49Z"/><path class="cls-12" d="M150.36,180c-3.32-14-7.15-25.25-5.2-26.23.93-.45,3.15,1.86,5.66,6.22a75.14,75.14,0,0,1,9.05,37.63c-.25,5-1.17,8.09-2.21,8.11C155.48,205.77,153.78,194,150.36,180Z"/><path class="cls-2" d="M444.61,469.61c26,26,14.79,78.17,15.55,115l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4-.23,9.28,3.86,9.62-17.23,2.65-33-4.61-44.86-17.39a29,29,0,0,0,9.61,18.79,52.63,52.63,0,0,1-43.78-29.08c-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18C116,587.24,118.1,499.8,143.26,471c0,0,43.88,33.13,85.07,32.88,25.75-.15,55.88-19.8,85.76-19.93,25-.11,35.94,34.12,52,19.06C408.52,463.13,444.07,469.07,444.61,469.61Z"/><path class="cls-3" d="M461,579.41l-11.74-13a127,127,0,0,1-30.82,61.5,45.32,45.32,0,0,0-14.28-15.73,95.26,95.26,0,0,1-29.43,50.18,38.33,38.33,0,0,0-1.08-31.66,60.34,60.34,0,0,1-33,36.69,24.83,24.83,0,0,0,2.69-23.94c-12,20.3-46.33,20.91-59,1.07-.88,4,.12,18.77,4.22,19.12-17.23,2.65-33.36-14.1-45.22-26.89.68,7.17,2.47,20.1,7.87,24.85-18.36-.94-34.06-18.58-42.05-35.14-22.23,1.39-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.76,10.18c-13.27-6.74-22-21.38-26.76-38.85,17,12.38,37,20.88,56.73,28.49,13.42,5.16,27,10.08,41.15,12.66,13.72,2.49,27.74,2.75,41.69,3,38.71.67,79,1,114-15.61,10-4.76,20.61-12.93,20.26-24-.4-12.69-14.29-19.93-26.14-24.48,25.24-3.74,45.92-23.31,57.43-46.07a140.7,140.7,0,0,0,10.14-27.06l3.39,2.64C453.92,508.44,460.27,542.6,461,579.41Z"/><path class="cls-13" d="M279.44,484.79l-51.11,19.06-84.11-38.17a63.86,63.86,0,0,0-12.41,22,243.36,243.36,0,0,1,51,18,250.66,250.66,0,0,1,23.32,12.64c4.12,2.52,12.77,10.78,17.87,10.15a10.52,10.52,0,0,0,4.23-1.9c46.77-30.08,81.11-31.4,135.95-21.6l-25.77-15Z"/><path class="cls-14" d="M443.74,469.61C461,504.23,464.64,541.56,461,581.14l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4,6,20,2.13,21.75-17-7.82-31.27-16.74-43.13-29.52.69,7.17,2.46,21,7.87,25.72-18.36-.94-34.06-19.45-42.05-36-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18c-38.41-19.5-36.36-105.21-11.2-134"/><path class="cls-15" d="M261.78,573.43a10.43,10.43,0,0,1-10.4-10.4V523.29a10.43,10.43,0,0,1,10.4-10.4h72.77a10.43,10.43,0,0,1,10.4,10.4V563a10.43,10.43,0,0,1-10.4,10.4"/><path class="cls-16" d="M346.68,527.62v12.33a10.43,10.43,0,0,0-9.53-6.26H264.38a10.43,10.43,0,0,0-10.4,10.4V571.5a10.29,10.29,0,0,1-.87-4.13V527.62a10.43,10.43,0,0,1,10.4-10.4h72.77A10.43,10.43,0,0,1,346.68,527.62Z"/><path class="cls-17" d="M297.73,509.18c7.51,0,14.84.05,21.92.16l10.42.19,2.54.06,1.26,0h.36l.53,0,1.06.08a17.57,17.57,0,0,1,7.76,2.86,17.26,17.26,0,0,1,7.6,13.23l0,1v.76l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.15,1.44-.19,1.61a13.71,13.71,0,0,1-.95,3.46,13,13,0,0,1-3.6,4.84,10.45,10.45,0,0,1-7.27,2.58c-1.75-.16-2.53-.78-2.52-1.27s.76-1,1.87-1.75a11.19,11.19,0,0,0,3.55-3.62,8,8,0,0,0,1-3,7.12,7.12,0,0,0,0-1.68l-.29-2.61c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.29l0-.11a2,2,0,0,1,0-.2,3.62,3.62,0,0,0-1.85-2.5,3.46,3.46,0,0,0-1.47-.38l-4.35.1-10.42.19c-7.08.1-14.41.16-21.92.16s-14.84-.05-21.92-.16l-10.42-.19-4.35-.1a3.46,3.46,0,0,0-1.47.38,3.62,3.62,0,0,0-1.86,2.5,2,2,0,0,1,0,.2l0,.11v.29l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.29,2.61a7.13,7.13,0,0,0,0,1.68,8,8,0,0,0,1,3,11.2,11.2,0,0,0,3.55,3.62c1.1.73,1.87,1.19,1.87,1.75s-.78,1.11-2.52,1.27a10.45,10.45,0,0,1-7.27-2.58,13,13,0,0,1-3.6-4.84,13.71,13.71,0,0,1-.95-3.46l-.19-1.61-.15-1.44c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.76l0-1a17.26,17.26,0,0,1,7.6-13.23,17.57,17.57,0,0,1,7.76-2.86l1.06-.08.53,0h.36l1.26,0,2.54-.06,10.42-.19C282.89,509.23,290.22,509.18,297.73,509.18Z"/><path class="cls-17" d="M302.86,552.58a54.43,54.43,0,0,0,5.71-1.73,48,48,0,0,0,5-2.23,39.67,39.67,0,0,0,7.71-5.1c2-1.73,3.52-3.4,4.81-4.61s2.25-2,3.11-1.78,1.44,1.34,1.56,3.45a17.79,17.79,0,0,1-2.29,8.39,29.29,29.29,0,0,1-8.6,9.58,38.08,38.08,0,0,1-6.48,3.82,42.55,42.55,0,0,1-7.57,2.62c-1.33.33-2.67.56-4,.77s-2.65.32-3.9.37a47.38,47.38,0,0,1-7.23-.2A41.23,41.23,0,0,1,279,563a23.64,23.64,0,0,1-7-4.26c-1.44-1.37-2-2.56-1.64-3.35.75-1.65,4.79-1.39,10.66-1.18,2.94.11,6.36.18,10.08,0,1.86-.1,3.8-.26,5.79-.51,1-.11,2-.3,2.95-.45S301.87,552.83,302.86,552.58Z"/><path class="cls-17" d="M155.46,490.33A39.37,39.37,0,0,0,156,500a41,41,0,0,0,3.15,9.52,42.44,42.44,0,0,1-5.84-8.6,43.67,43.67,0,0,1-3.52-10.15,47.59,47.59,0,0,1-1-11c0-.93.08-1.86.14-2.79s.15-1.87.31-2.81a36.46,36.46,0,0,1,1.21-5.8l10.41,4.56a25.27,25.27,0,0,0-2,3.8c-.33.69-.58,1.41-.87,2.12l-.76,2.2A40.47,40.47,0,0,0,155.46,490.33Z"/><path class="cls-17" d="M171.41,499.11c.85,7.6,4.25,15.18,9.15,21.74a48.54,48.54,0,0,1-14.67-20.41,39.56,39.56,0,0,1-2.34-13.25,35.77,35.77,0,0,1,2.72-13.91l10,5.38C172.32,484,170.54,491.58,171.41,499.11Z"/><path class="cls-17" d="M200.42,504.82a52.28,52.28,0,0,0,7.09,20.82,55.13,55.13,0,0,1-12.6-19.43,57.85,57.85,0,0,1-3.79-24l11.2,1.92A49.27,49.27,0,0,0,200.42,504.82Z"/><path class="cls-17" d="M389.49,500.65a28,28,0,0,1-.29,9c-.5,2.28-1.27,3.62-2,3.56-1.43-.14-2-5.52-2.82-12S383,489.45,384.35,489c.66-.22,1.72.9,2.74,3A28,28,0,0,1,389.49,500.65Z"/><path class="cls-17" d="M413.62,499.69a36.83,36.83,0,0,1-2.43,12.46c-1.23,3-2.53,4.66-3.17,4.43-1.37-.52.31-7.91.5-17s-1-16.59.39-17c.65-.19,1.87,1.5,2.94,4.59A36.83,36.83,0,0,1,413.62,499.69Z"/><path class="cls-17" d="M436.93,497a55.34,55.34,0,0,1,.52,9.45,45.63,45.63,0,0,1-.89,7.66c-.91,4.3-2.14,6.77-2.8,6.63-1.47-.31,0-10.64-1.89-23s-5.89-22-4.54-22.67c.6-.31,2.44,1.74,4.48,5.63a47.93,47.93,0,0,1,3,7.1A57.59,57.59,0,0,1,436.93,497Z"/><path class="cls-17" d="M164.59,595.73a42.25,42.25,0,0,1-.27-8.85,35.84,35.84,0,0,1,.53-3.82,26.8,26.8,0,0,1,.8-3.26c1.21-3.93,2.72-6,3.34-5.81s.45,2.69.21,6.47c-.06.95-.13,2-.14,3.08s0,2.28,0,3.51a62.81,62.81,0,0,0,2.26,15.79c.35,1.18.65,2.32,1,3.36s.68,2,1,2.92c1.29,3.56,2.22,5.84,1.61,6.27s-2.57-1.21-4.84-4.65a26.73,26.73,0,0,1-1.68-2.91,35.79,35.79,0,0,1-1.58-3.52A42.25,42.25,0,0,1,164.59,595.73Z"/><path class="cls-17" d="M197.49,609.93a54.89,54.89,0,0,1-.09-14.27c.47-3.6,1.18-5.78,1.87-5.77s1.28,2.24,1.74,5.77.81,8.37,1.53,13.54c.38,2.58.84,5,1.34,7.18.3,1.07.52,2.12.83,3.06l.4,1.38.43,1.26c1.09,3.22,2,5.28,1.36,5.73s-2.5-1-4.6-4.13l-.79-1.26c-.25-.45-.49-.93-.74-1.43a32.2,32.2,0,0,1-1.4-3.26A42.34,42.34,0,0,1,197.49,609.93Z"/><path class="cls-17" d="M236.71,616.79c-4.33-15.35-4.94-28.35-3.58-28.52s4.28,12.17,8.5,27.14,8.17,27,6.83,27.61S241,632.15,236.71,616.79Z"/><path class="cls-17" d="M346.34,623.13c1.94-6.48,3.3-12.56,4.5-17s2.2-7.12,2.9-7,.94,3,.66,7.6a81.29,81.29,0,0,1-3.17,17.86,60.46,60.46,0,0,1-3.75,9.43c-.76,1.38-1.45,2.7-2.24,3.86-.39.58-.75,1.15-1.13,1.68l-1.15,1.47c-3,3.7-5.58,5.28-6,4.83s1-2.91,3-6.82l.8-1.53.8-1.69c.58-1.15,1.08-2.45,1.67-3.76C344.27,629.38,345.35,626.36,346.34,623.13Z"/><path class="cls-17" d="M376.89,610.42c1.38-7.88,2.09-15.29,3-20.62s1.84-8.6,2.54-8.54,1.06,3.43,1.06,8.84a126.52,126.52,0,0,1-1.62,21.21,61.86,61.86,0,0,1-3.15,11.54,43.31,43.31,0,0,1-4.52,8.74c-3.21,4.66-6.17,6.64-6.63,6.19s1.33-3.26,3.49-8a69.42,69.42,0,0,0,3.21-8.5A91.9,91.9,0,0,0,376.89,610.42Z"/><path class="cls-17" d="M414,597.91c1.53-6.39,2.57-12.34,3.55-16.65s1.85-7,2.56-6.92,1.08,2.86,1,7.33a81.07,81.07,0,0,1-2.17,17.44,61.49,61.49,0,0,1-3.08,9.33c-.64,1.38-1.22,2.7-1.91,3.87-.33.59-.64,1.16-1,1.7l-1,1.51c-2.65,3.79-5,5.54-5.48,5.13s.65-2.93,2.32-6.87l.65-1.55.65-1.7c.48-1.16.88-2.44,1.36-3.77C412.32,604.08,413.18,601.1,414,597.91Z"/><path class="cls-17" d="M424.42,588.28c1.66-4,3-8,4.13-11.62.51-1.83,1.05-3.56,1.44-5.21s.79-3.18,1.12-4.59c1.28-5.65,2-9.25,2.7-9.22s1.27,3.73.87,9.75c-.11,1.5-.26,3.15-.54,4.9s-.63,3.62-1,5.57a78.08,78.08,0,0,1-9.93,23.93c-1.09,1.67-2.12,3.27-3.21,4.67s-2.1,2.71-3.09,3.84c-4,4.54-7,6.72-7.52,6.27s1.53-3.53,4.62-8.43c.77-1.23,1.62-2.56,2.46-4s1.74-3,2.67-4.7C420.89,596.06,422.73,592.32,424.42,588.28Z"/><path class="cls-18" d="M137,509.24c.76-3.74,2.77-6.36,4.11-5.94s1.6,3.5.9,7-2.17,6.21-3.58,6.05S136.26,513,137,509.24Z"/><path class="cls-18" d="M138.33,549.64a54.36,54.36,0,0,1-1.95-15.24c.12-3.95.78-6.35,1.46-6.36,1.47,0,2.42,9.33,5.42,20.26s6.83,19.45,5.58,20.21c-.59.34-2.39-1.39-4.5-4.73A53.49,53.49,0,0,1,138.33,549.64Z"/><path class="cls-14" d="M442.82,467.33A165.7,165.7,0,0,0,371,498.45c-3.11,2.36-6.43,4.93-10.32,5.07-4.14.15-7.78-2.48-11.25-4.75a88.22,88.22,0,0,0-21-10.34c-7.89-2.54-16.26-3.27-24.5-3.47s-16.56-.42-24.68.2a82.67,82.67,0,0,0-20.63,4.06,87.16,87.16,0,0,0-19.26,9.55c-3.47,2.26-7.11,4.89-11.25,4.75-3.9-.14-7.22-2.72-10.32-5.07a165.7,165.7,0,0,0-71.82-31.12"/><line class="cls-19" x1="228.33" y1="503.85" x2="263.97" y2="487.62"/><path class="cls-3" d="M219.34,122.68a55.94,55.94,0,0,1,29.93,12.77c.6-22.61-11.09-43.51-22.43-63.08A20.72,20.72,0,0,1,250,76.94a162.61,162.61,0,0,0-14.86-54.86c-4.94,2.27-6.38,8.48-7.16,13.85a673.21,673.21,0,0,0-6.9,86.47"/><path class="cls-12" d="M248.91,75a148.5,148.5,0,0,1,16.63,15.51,144.21,144.21,0,0,0-20.85-8.11,139.78,139.78,0,0,0-21.24-4.65l6.15-15.9A152.75,152.75,0,0,1,248.91,75Z"/><path class="cls-12" d="M246.73,129.61c7.6,7.08,14.49,15.09,19.26,24-7.16-7.34-15.61-12.79-24.45-17.26s-18.17-8-27.69-11.66l8.85-14.58C230.8,116.24,239.12,122.51,246.73,129.61Z"/><path class="cls-12" d="M41.67,334.64c5.88-2.52,11.18-5.31,15.27-7.08s6.9-2.54,7.48-1.65-1.16,3.21-4.57,6.22a58.45,58.45,0,0,1-15.18,9.57c-6.61,2.85-13.35,3.82-18.13,3.34s-7.5-2-7.33-3,2.94-1.5,7-2.42A86.51,86.51,0,0,0,41.67,334.64Z"/><path class="cls-3" d="M292,123.06A73,73,0,0,1,312.67,143a111.15,111.15,0,0,0,10.74-54.92l7.34,11.35A218.87,218.87,0,0,0,342,35.73c.18-6.89-.08-14.2-3.84-20a574.49,574.49,0,0,0-39.41,98"/><path class="cls-12" d="M329.81,92.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L318,72.64A152.73,152.73,0,0,1,329.81,92.79Z"/><path class="cls-12" d="M314.81,132.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L303,112.64A152.73,152.73,0,0,1,314.81,132.79Z"/><path class="cls-3" d="M400,125.72l3.05,20.6a98.07,98.07,0,0,0,40.39-35,165.29,165.29,0,0,1,1.82,34.87c18.29-2.58,31.49-18.24,42.86-32.79,3.7-4.74,7.52-9.73,8.59-15.65"/><path class="cls-12" d="M405.83,140.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,405.83,140.91Z"/><path class="cls-12" d="M448.83,134.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,448.83,134.91Z"/><path class="cls-3" d="M464.55,183.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-3" d="M549.55,205.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-12" d="M448.64,203.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L470,194A152.72,152.72,0,0,1,448.64,203.38Z"/><path class="cls-7" d="M78.71,199.41l45.52-11.52L88.55,104.62a7.19,7.19,0,0,1,8.74-9.7l119.89,37.21L232.28,11.3A7.19,7.19,0,0,1,246.1,9.55l46.43,116.84"/><path class="cls-7" d="M38.24,364.79,19.12,353.64A7.19,7.19,0,0,1,17.6,342.4L72,286.75a7.19,7.19,0,0,0-.88-10.82L7.93,229.45a7.19,7.19,0,0,1,2.5-12.76l44.73-11.32"/><path class="cls-7" d="M141.67,459l-75.42,5.37a7.19,7.19,0,0,1-7.12-10L83,398.2a7.19,7.19,0,0,0-3-9L53.83,373.89"/><path class="cls-7" d="M359.19,53.51,353.92,11.3A7.19,7.19,0,0,0,340.1,9.55L292.67,126.39"/><path class="cls-7" d="M490.47,195.11,462,187.9l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L369,132.13l-6.09-48.76"/><path class="cls-7" d="M511.25,417.2l-8.09-19a7.19,7.19,0,0,1,3-9l60.92-35.54a7.19,7.19,0,0,0,1.52-11.23l-54.39-55.65a7.19,7.19,0,0,1,.88-10.82l63.17-46.49a7.19,7.19,0,0,0-2.5-12.76L533.69,206l-16.76-4.24"/><path class="cls-7" d="M446.83,455.88l73.12,8.47a7.19,7.19,0,0,0,7.12-10l-7.48-17.57"/><path class="cls-12" d="M530.64,225.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L552,216A152.72,152.72,0,0,1,530.64,225.38Z"/><path class="cls-10" d="M350.55,248.54a42,42,0,0,1,7.24,3.77,31.91,31.91,0,0,1,5.16,4.21c2.66,2.74,3.69,5,3,5.76s-2.95.06-6.13-1.33l-5.47-2.47c-2-.9-4.28-1.87-6.65-2.83s-4.67-1.77-6.77-2.52l-5.67-2c-3.27-1.17-5.41-2.17-5.36-3.25s2.34-2,6.15-2.11a31.91,31.91,0,0,1,6.64.5A41.94,41.94,0,0,1,350.55,248.54Z"/><path class="cls-10" d="M387.87,278.37a26.41,26.41,0,0,1,4.24,10.33c.43,2.88,0,4.8-1,5.11s-2.39-1-4-3-3.49-5-5.6-8.13-4.06-6-5.38-8.27-2-4-1.3-4.85,2.6-.49,5.11,1A26.41,26.41,0,0,1,387.87,278.37Z"/><path class="cls-10" d="M513.06,362.54c7.17-4.16,14-5.44,14.87-3.54s-4.19,6.2-11,10.17-13.09,6.23-14.32,4.49S505.88,366.68,513.06,362.54Z"/><ellipse class="cls-10" cx="543.85" cy="350.52" rx="5.22" ry="3.83" transform="translate(-99.25 279.43) rotate(-26.49)"/><ellipse class="cls-10" cx="513.36" cy="253.47" rx="11.08" ry="3.83" transform="translate(-32.22 427.05) rotate(-43.93)"/><path class="cls-10" d="M222.9,474a12.54,12.54,0,0,1,6.13,4.21c1.17,1.61,1.35,3.07.67,3.86s-2.05.89-3.66.66a45.65,45.65,0,0,1-10.88-3.6c-1.43-.77-2.48-1.64-2.55-2.71s.94-2.1,2.84-2.7A12.54,12.54,0,0,1,222.9,474Z"/><path class="cls-10" d="M262.35,467.89a49.09,49.09,0,0,1,8.52-.84,37.07,37.07,0,0,1,7,.59c3.93.75,6.21,2,6.1,3s-2.51,1.75-6.16,2.39c-1.83.31-4,.66-6.35,1s-4.94.82-7.64,1.33-5.25,1.08-7.59,1.58-4.46,1-6.28,1.38c-3.63.75-6.11,1-6.61.05s1.17-2.92,4.55-5.06a37.07,37.07,0,0,1,6.26-3.12A49.09,49.09,0,0,1,262.35,467.89Z"/><rect class="cls-20" x="312.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="312.3" y1="359.24" x2="401.3" y2="359.24"/><rect class="cls-20" x="187.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="187.3" y1="359.24" x2="276.3" y2="359.24"/><path class="cls-7" d="M113.3,415.55a22.64,22.64,0,0,1,23-12.58"/><path class="cls-7" d="M473.26,415.55a22.64,22.64,0,0,0-23-12.58"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/flowNotice.png b/src/assets/icons/flowNotice.png
new file mode 100644
index 0000000..ae5d6cd
Binary files /dev/null and b/src/assets/icons/flowNotice.png differ
diff --git a/src/assets/icons/folderNotice.png b/src/assets/icons/folderNotice.png
new file mode 100644
index 0000000..6f25faf
Binary files /dev/null and b/src/assets/icons/folderNotice.png differ
diff --git a/src/assets/icons/js/iconfont.js b/src/assets/icons/js/iconfont.js
new file mode 100644
index 0000000..dead26b
--- /dev/null
+++ b/src/assets/icons/js/iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_3814468='<svg><symbol id="icon-time1" viewBox="0 0 1024 1024"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64zM512 895.712c-211.584 0-383.712-172.16-383.712-383.712C128.288 300.416 300.416 128.288 512 128.288c211.552 0 383.712 172.128 383.712 383.712C895.712 723.552 723.552 895.712 512 895.712z"  ></path><path d="M671.968 512 512 512 512 288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128L448 544c0 17.76 14.272 32 32 32l191.968 0c17.76 0 32.128-14.24 32.128-32S689.728 512 671.968 512z"  ></path></symbol><symbol id="icon-select2" viewBox="0 0 1024 1024"><path d="M768 160 256 160C204.8 160 160 204.8 160 256l0 512c0 51.2 44.8 96 96 96l512 0c51.2 0 96-44.8 96-96L864 256C864 204.8 819.2 160 768 160zM800 768c0 19.2-12.8 32-32 32L256 800c-19.2 0-32-12.8-32-32L224 256c0-19.2 12.8-32 32-32l512 0c19.2 0 32 12.8 32 32L800 768z"  ></path><path d="M448 672c-6.4 0-19.2 0-25.6-6.4l-128-128c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0L448 595.2l230.4-230.4c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8l-256 256C467.2 672 454.4 672 448 672z"  ></path></symbol><symbol id="icon-department" viewBox="0 0 1024 1024"><path d="M926.592 922.688l-157.312 0c-18.432 0-33.344-21.056-33.344-46.976L735.936 745.6c0-25.984 14.912-46.976 33.344-46.976l157.312 0c18.432 0 33.408 20.992 33.408 46.976l0 130.048C960 901.632 945.088 922.688 926.592 922.688zM773.312 513.152l-224 0L549.312 624 512 624 512 513.152 249.472 513.152C171.008 513.216 174.848 566.976 174.848 624L138.688 624 138.688 569.28c0-49.472 39.552-94.144 88.448-94.208L512 474.688 512 400l37.312 0 0 74.688 260.16 0c48.896 0.064 74.624 25.152 74.688 74.688L884.16 624 848 624C847.936 550.272 835.712 513.216 773.312 513.152zM653.504 325.312 406.528 325.312c-24.256 0-43.84-21.824-43.84-48.768L362.688 150.08c0-26.944 19.648-48.768 43.84-48.768l246.976 0c24.256 0 43.968 21.824 43.968 48.768l0 126.464C697.472 303.488 677.824 325.312 653.504 325.312zM288 745.6l0 130.048c0 25.92-14.976 46.976-33.344 46.976L97.344 922.624C78.912 922.688 64 901.632 64 875.712L64 745.6c0-25.984 14.912-46.976 33.344-46.976l157.312 0C273.024 698.688 288 719.68 288 745.6zM433.344 698.688l157.312 0c18.432 0 33.344 20.992 33.344 46.976l0 130.048c0 25.92-14.912 46.976-33.344 46.976L433.344 922.688c-18.432 0-33.344-21.056-33.344-46.976L400 745.6C400 719.68 414.912 698.688 433.344 698.688z"  ></path></symbol><symbol id="icon-tipsdepartmentdown" viewBox="0 0 1025 1024"><path d="M211.451008 532.32448 509.990336 532.32448 509.990336 658.368 552.443008 658.368 552.443008 532.31936 807.169408 532.31936C878.11072 532.31936 892.079872 574.52288 892.079872 658.368L933.177408 658.368 933.177408 573.45792C938.679552 532.06464 909.579584 494.04416 868.18656 488.54208 861.563648 487.6608 854.849088 487.66592 848.226176 488.5472L552.40224 488.5472 552.40224 403.64224 509.949568 403.64224 509.949568 488.55232 185.978368 489.06176C129.103104 491.91488 84.673728 539.23776 85.40224 596.17408L85.40224 658.368 126.540544 658.368C126.540544 593.49952 122.296768 532.36544 211.451008 532.32448L211.451008 532.32448ZM390.014208 318.73152 670.890816 318.73152C699.960192 317.13152 722.284352 292.36224 720.85792 263.28256L720.85792 119.44896C722.279296 90.36928 699.955072 65.6 670.890816 64L390.014208 64C360.970304 65.61984 338.681728 90.38976 340.128576 119.44896L340.128576 263.28768C338.681728 292.34176 360.965248 317.11168 390.014208 318.73152L390.014208 318.73152ZM217.263872 723.2 38.405248 723.2C13.605056 728.1312-3.033664 751.56608 0.491712 776.60608L0.491712 924.5152C-3.013312 949.55008 13.615232 972.9696 38.405248 977.92128L217.263872 977.92128C242.058944 972.9696 258.697664 949.5552 255.218112 924.5152L255.218112 776.60608C258.723136 751.56096 242.06912 728.1312 217.263872 723.2L217.263872 723.2ZM601.314624 723.2 422.410112 723.2C397.594688 728.11136 380.950848 751.56096 384.49664 776.60608L384.49664 924.5152C380.991616 949.55008 397.62016 972.9696 422.410112 977.92128L601.314624 977.92128C626.104576 972.9696 642.728064 949.55008 639.228096 924.5152L639.228096 776.60608C642.748416 751.56608 626.114816 728.1312 601.314624 723.2L601.314624 723.2ZM1023.218112 776.60608C1026.743552 751.55584 1010.084416 728.11136 985.263872 723.2L806.405248 723.2C781.605056 728.1312 764.966336 751.56608 768.491712 776.60608L768.491712 924.5152C764.986688 949.55008 781.615232 972.9696 806.405248 977.92128L985.263872 977.92128C1010.06912 972.99008 1026.71808 949.56032 1023.218112 924.5152L1023.218112 776.60608 1023.218112 776.60608ZM959.785728 813.93792C961.55072 801.39648 953.210368 789.65888 940.783936 787.2L851.238144 787.2C838.821952 789.66912 830.491712 801.4016 832.256768 813.93792L832.256768 887.98848C830.501952 900.52224 838.827008 912.24704 851.238144 914.7264L940.783936 914.7264C953.202688 912.25728 961.537984 900.52736 959.785728 887.98848L959.785728 813.93792 959.785728 813.93792ZM575.785728 813.93792C577.55072 801.39648 569.210368 789.65888 556.783936 787.2L467.238144 787.2C454.821952 789.66912 446.491712 801.4016 448.256768 813.93792L448.256768 887.98848C446.501952 900.52224 454.827008 912.24704 467.238144 914.7264L556.783936 914.7264C569.202688 912.25728 577.537984 900.52736 575.785728 887.98848L575.785728 813.93792 575.785728 813.93792ZM191.785728 813.93792C193.55072 801.39648 185.210368 789.65888 172.783936 787.2L83.238144 787.2C70.821952 789.66912 62.491712 801.4016 64.256768 813.93792L64.256768 887.98848C62.501952 900.52224 70.827008 912.24704 83.238144 914.7264L172.783936 914.7264C185.202688 912.25728 193.537984 900.52736 191.785728 887.98848L191.785728 813.93792 191.785728 813.93792Z" fill="#333" ></path></symbol><symbol id="icon-input1" viewBox="0 0 1024 1024"><path d="M118.784 727.04h778.24V296.96h-778.24v430.08zM77.824 256h860.16v512H77.824V256zM194.56 409.6v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48V409.6c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z"  ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M853.333333 149.333333h-138.666666V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v42.666666h-277.333334V106.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v42.666666H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666667v618.666667C96 883.2 130.133333 917.333333 170.666667 917.333333h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666666v-618.666667C928 183.466667 893.866667 149.333333 853.333333 149.333333zM170.666667 213.333333h138.666666v64c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-64h277.333334v64c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-64H853.333333c6.4 0 10.666667 4.266667 10.666667 10.666667v194.133333c-4.266667-2.133333-6.4-2.133333-10.666667-2.133333H170.666667c-4.266667 0-6.4 0-10.666667 2.133333v-194.133333c0-6.4 4.266667-10.666667 10.666667-10.666667z m682.666666 640H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666666V477.866667c4.266667 2.133333 6.4 2.133333 10.666667 2.133333h682.666666c4.266667 0 6.4 0 10.666667-2.133333v364.8c0 6.4-4.266667 10.666667-10.666667 10.666666z"  ></path><path d="M384 608h-85.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h85.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM725.333333 608h-192c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h192c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z"  ></path></symbol><symbol id="icon-email1" viewBox="0 0 1024 1024"><path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"  ></path></symbol><symbol id="icon-user1" viewBox="0 0 1024 1024"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z"  ></path></symbol><symbol id="icon-number1" viewBox="0 0 1024 1024"><path d="M279.273 791.273h512a46.545 46.545 0 0 1 0 93.09h-512a46.545 46.545 0 0 1 0-93.09z m33.838-617.984v478.347H193.722V395.171c0-37.004-0.884-59.299-2.653-66.746a24.948 24.948 0 0 0-14.615-16.99c-8.006-3.863-25.786-5.771-53.341-5.771H111.29v-55.855c57.717-12.38 101.562-37.888 131.491-76.52h70.284z m303.71 396.8v81.547H354.163v-68.235c77.778-127.256 124.044-206.01 138.706-236.218 14.662-30.255 22.016-53.854 22.016-70.75 0-13.032-2.234-22.714-6.656-29.137-4.422-6.377-11.171-9.588-20.247-9.588a22.249 22.249 0 0 0-20.201 10.612c-4.469 7.121-6.656 21.178-6.656 42.263v45.522H354.164V318.65c0-26.763 1.397-47.942 4.143-63.348 2.746-15.5 9.542-30.72 20.387-45.661 10.798-14.988 24.902-26.298 42.217-33.978 17.361-7.68 38.167-11.544 62.37-11.544 47.477 0 83.317 11.776 107.707 35.328 24.296 23.552 36.445 53.341 36.445 89.368 0 27.368-6.842 56.32-20.48 86.853-13.731 30.534-54.04 95.325-121.018 194.42H616.82z m270.615-189.394c18.152 6.098 31.65 16.105 40.494 29.976 8.844 13.917 13.312 46.452 13.312 97.652 0 38.028-4.329 67.49-13.033 88.53-8.657 20.945-23.598 36.91-44.87 47.848-21.27 10.938-48.593 16.384-81.873 16.384-37.795 0-67.49-6.33-89.088-19.084-21.55-12.66-35.747-28.253-42.542-46.638-6.796-18.432-10.194-50.362-10.194-95.884v-37.841h119.39v77.73c0 20.667 1.21 33.84 3.723 39.425 2.42 5.585 7.913 8.424 16.337 8.424 9.31 0 15.36-3.537 18.34-10.612 2.932-7.121 4.421-25.6 4.421-55.575v-33.047c0-18.34-2.048-31.744-6.19-40.216a30.72 30.72 0 0 0-18.34-16.71c-8.052-2.653-23.738-4.189-46.964-4.561V357.05c28.393 0 45.894-1.07 52.597-3.258a22.947 22.947 0 0 0 14.475-14.15c2.933-7.307 4.422-18.711 4.422-34.257V278.76c0-16.757-1.722-27.741-5.12-33.048-3.49-5.352-8.844-8.005-16.151-8.005-8.285 0-13.964 2.792-16.99 8.378-3.025 5.632-4.56 17.64-4.56 35.933v39.284h-119.39V280.53c0-45.66 10.473-76.567 31.325-92.625 20.9-16.058 54.086-24.064 99.608-24.064 56.878 0 95.51 11.17 115.805 33.373 20.293 22.249 30.394 53.202 30.394 92.765 0 26.81-3.63 46.173-10.892 58.089-7.307 11.916-20.107 22.807-38.446 32.628z"  ></path></symbol><symbol id="icon-190tree" viewBox="0 0 1024 1024"><path d="M800 832c-41.6 0-76.8 25.6-89.6 64H288c-19.2 0-32-12.8-32-32V537.6c0 3.2 22.4 6.4 32 6.4h422.4c12.8 38.4 48 64 89.6 64 54.4 0 96-41.6 96-96s-41.6-96-96-96c-41.6 0-76.8 25.6-89.6 64H288c-19.2 0-32-12.8-32-32V185.6c32-12.8 64-48 64-89.6 0-54.4-41.6-96-96-96-51.2 0-96 41.6-96 96 0 41.6 32 76.8 64 89.6V864c0 54.4 44.8 96 96 96h422.4c12.8 38.4 48 64 89.6 64 54.4 0 96-41.6 96-96s-41.6-96-96-96z m0-384c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64zM160 96c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m640 896c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z"  ></path></symbol><symbol id="icon-dict-fill" viewBox="0 0 1024 1024"><path d="M764 888H200V324a4 4 0 0 0-4-4h-64a4 4 0 0 0-4 4v596a40 40 0 0 0 40 40h596a4 4 0 0 0 4-4v-64a4 4 0 0 0-4-4zM551.9 311.8h-57.5v327.1h56.8c83 0 120.4-60.6 120.4-172.6 0-99.9-40.2-154.5-119.7-154.5zM856 128H312a40 40 0 0 0-40 40v608a40 40 0 0 0 40 40h544a40 40 0 0 0 40-40V168a40 40 0 0 0-40-40zM552.8 694H430.2a4 4 0 0 1-4-4V260a4 4 0 0 1 4-4h128.5c116 0 183.1 74.2 183.1 208.9 0 144.8-63.5 229.1-189 229.1z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M648.6 538.9c63.2-46.6 104.2-121.6 104.2-206C752.8 191.8 638 77 496.9 77S241 191.8 241 332.9c0 84.4 41.1 159.4 104.2 206C200.4 598.7 98.3 741.4 98.3 907.5c0 22.1 17.9 40 40 40s40-17.9 40-40c0-175.8 143-318.7 318.7-318.7s318.7 143 318.7 318.7c0 22.1 17.9 40 40 40s40-17.9 40-40c-0.1-166.1-102.3-308.8-247.1-368.6z m-327.7-206c0-97.1 79-176 176-176s176 79 176 176-79 176-176 176-176-79-176-176z"  ></path></symbol><symbol id="icon-user-circle" viewBox="0 0 1024 1024"><path d="M509.44 1018.368c-141.312 0-277.504-59.904-372.736-164.352l-19.968-21.504 19.968-21.504c95.744-104.448 231.424-164.352 372.736-164.352 141.312 0 277.504 59.904 372.736 164.352l19.968 21.504-19.968 21.504c-95.232 104.448-231.424 164.352-372.736 164.352zM204.8 832.512c81.92 77.824 190.976 121.856 304.64 121.856 113.664 0 222.72-44.032 304.64-121.856-81.92-77.824-190.976-121.856-304.64-121.856-113.664 0-222.72 44.032-304.64 121.856zM509.952 600.576c-89.088 0-161.792-72.704-161.792-161.792 0-89.088 72.704-161.792 161.792-161.792s161.792 72.704 161.792 161.792c0 89.088-72.192 161.792-161.792 161.792z m0-259.584c-53.76 0-97.792 44.032-97.792 97.792s44.032 97.792 97.792 97.792 97.792-44.032 97.792-97.792-43.52-97.792-97.792-97.792z"  ></path><path d="M119.296 719.36c-33.792-63.488-51.2-134.144-51.2-206.848 0-243.712 198.144-441.344 441.344-441.344s441.344 198.144 441.344 441.344c0 72.192-17.92 143.36-51.2 206.336 16.384 15.36 31.744 31.744 46.08 49.152 45.568-77.312 69.12-165.376 69.12-255.488 0-279.04-226.816-505.856-505.856-505.856C230.4 7.168 4.096 233.984 4.096 512.512c0 90.112 24.064 178.688 69.632 255.488 13.824-16.896 29.184-33.28 45.568-48.64z"  ></path></symbol><symbol id="icon-dict" viewBox="0 0 1024 1024"><path d="M487.204 238.103h-81.567v340.516h81.567c59.425 0 102.943-13.871 130.303-41.101 26.721-27.868 40.083-70.88 40.083-129.158 0-59.678-13.362-103.329-40.083-129.923-27.359-27.104-70.877-40.336-130.303-40.336z"  ></path><path d="M778.859 61.224H245.306c-59.678 0-108.414 48.738-108.414 108.414v689.437c0 59.677 48.737 108.414 108.414 108.414h533.553c42.628 0 79.657-24.941 97.346-60.826H252.559c-22.269 0-40.591-18.197-40.591-40.59v-51.282c0-22.269 18.197-40.59 40.591-40.59h487.874c80.801 0 146.845-66.042 146.845-146.845V169.641c0-59.678-48.862-108.418-108.418-108.418zM677.696 581.291c-40.083 42.374-98.235 63.626-175.73 63.626H327.507v-473.11h174.458c77.494 0 135.647 21.25 175.73 63.625 38.048 39.703 57.518 97.346 57.518 172.931 0 74.95-19.468 132.59-57.516 172.93z"  ></path></symbol><symbol id="icon-btn" viewBox="0 0 1828 1024"><path d="M1322.88370217 78.26335901C1554.20991077 78.26335901 1745.77692672 273.44484711 1745.77692672 512s-191.56701595 433.73664099-426.50769668 433.73664099H509.62750045C274.68682069 945.73664099 83.11980375 750.55515289 83.11980375 512S274.68682069 78.26335901 509.62750045 78.26335901h813.25620172m0-72.28944H509.62750045C234.92762806 5.97391901 10.83036375 233.68565546 10.83036375 512s224.0972643 506.02608099 498.7971367 506.02608099h813.25620172C1593.96910242 1018.02608099 1818.0663677 790.31434454 1818.0663677 512S1593.96910242 5.97391901 1322.88370217 5.97391901z"  ></path><path d="M715.65240499 501.15658355c28.91577619-14.4578876 39.75919165-36.1447205 39.75919265-65.0604957-3.61447214-46.98813595-28.91577619-75.90391215-83.13285646-75.90391215H589.14588474c-21.68683191 0-32.53024835 10.84341645-32.53024835 32.53024835v249.39856834c0 21.68683191 10.84341645 32.53024835 32.53024835 32.53024836h90.36180075c65.0604957-3.61447214 97.59074405-36.1447205 101.20521619-97.59074505-3.61447214-43.3736638-25.30130405-68.67496785-65.06049669-75.90391215z m-93.9762719-86.7473276h32.53024835c21.68683191 0 36.1447205 10.84341645 36.1447195 32.53024835 0 21.68683191-14.4578876 32.53024835-36.1447195 36.14471951h-32.53024835v-68.67496786z m50.60260809 198.79596024h-50.60260809v-72.28944h46.98813595c28.91577619 0 43.3736638 10.84341645 46.98813595 36.14471951-3.61447214 21.68683191-18.07235974 32.53024835-43.37366381 36.14472049zM968.66544549 356.57770356H806.01420573c-14.4578876 0-25.30130405 10.84341645-25.30130405 28.91577619 0 21.68683191 10.84341645 32.53024835 25.30130405 32.53024835h46.98813596v224.09726429c0 21.68683191 10.84341645 32.53024835 32.53024735 32.53024836 21.68683191 0 32.53024835-10.84341645 32.53024835-32.53024836v-224.09726431h46.98813596c18.07235974 0 28.91577619-10.84341645 28.91577619-32.53024833 3.61447214-18.07235974-7.22894431-28.91577619-25.30130405-28.91577619zM1239.75084573 352.9632314c-21.68683191 0-32.53024835 14.4578876-32.53024733 36.1447205v166.2657119L1066.25618955 367.42112001c-7.22894431-10.84341645-14.4578876-14.4578876-28.91577622-14.45788861-21.68683191 0-32.53024835 14.4578876-32.53024734 36.1447205v253.01304049c0 21.68683191 10.84341645 32.53024835 32.53024734 32.53024836s32.53024835-10.84341645 32.53024835-32.53024836V475.8552795l137.34993672 184.33807265c7.22894431 7.22894431 14.4578876 10.84341645 28.91577617 10.84341643 21.68683191 0 32.53024835-10.84341645 32.53024736-32.53024833v-253.0130405c0-18.07235974-10.84341645-32.53024835-28.9157762-32.53024835z"  ></path></symbol><symbol id="icon-btn2" viewBox="0 0 1024 1024"><path d="M839.68 220.72888889h-72.81777778a36.40888889 36.40888889 0 0 0-36.22684444-36.40888889H111.32017778C91.47733333 184.32 75.09333333 200.74040889 75.09333333 220.98375111v472.80583111A36.40888889 36.40888889 0 0 0 111.32017778 730.45333333H111.50222222v72.81777778H75.09333333c-40.19541333 0-72.81777778-32.40391111-72.81777778-72.70855111V184.21077333C2.27555555 144.05176889 35.11637333 111.50222222 75.09333333 111.50222222h691.76888889c40.19541333 0 72.81777778 32.40391111 72.81777778 72.70855111V220.72888889zM147.91111111 329.77351111A72.81777778 72.81777778 0 0 1 220.91093333 257.13777778h727.81368889A72.81777778 72.81777778 0 0 1 1021.72444445 329.77351111v510.08853334A72.81777778 72.81777778 0 0 1 948.72462222 912.49777778H220.91093333A72.81777778 72.81777778 0 0 1 147.91111111 839.86204445v-510.08853334z m72.81777778 36.84579556v436.39694222A36.37248 36.37248 0 0 0 256.84650667 839.68h655.94254222c19.55157333 0 36.11761778-16.384 36.11761778-36.66375111V366.61930667A36.37248 36.37248 0 0 0 912.78904889 329.95555555H256.84650667C237.29493333 329.95555555 220.72888889 346.33955555 220.72888889 366.61930667z m249.43729778 271.24622222c0 13.83537778-2.18453333 26.36003555-6.5536 37.50115556-4.33265778 11.14112-10.37653333 20.53461333-18.05880889 28.21688888-7.68227555 7.64586667-16.60245333 13.54410667-26.76053333 17.62190222a86.54392889 86.54392889 0 0 1-32.51313778 6.08028445H293.54666667V439.18222222h82.35690666c9.75758222 0 18.93262222 1.82044445 27.52512 5.42492445 8.59249778 3.64088889 16.20195555 8.66531555 22.90119112 15.10968888 6.66282667 6.48078222 11.90570667 14.45432889 15.76504888 23.9570489a83.99530667 83.99530667 0 0 1 4.40547556 45.36547555c-0.87381333 4.84238222-2.18453333 9.42990222-3.82293334 13.79896889-1.67480889 4.36906667-3.78652445 8.33763555-6.37155555 11.94211556a31.60291555 31.60291555 0 0 1-8.84736 8.59249777c5.13365333 1.82044445 10.26730667 5.09724445 15.40096 9.93962667 5.09724445 4.80597333 9.75758222 10.55857778 13.83537778 17.14858666a91.85962667 91.85962667 0 0 1 13.47128889 47.40437334z m-57.70808889 0c0-12.63388445-3.71370667-22.02737778-11.17752889-28.21688889a38.19292445 38.19292445 0 0 0-25.01290667-9.24785778h-28.47175111v74.49258667h28.47175111c4.62392889 0 9.10222222-0.72817778 13.47128889-2.25735111a33.20490667 33.20490667 0 0 0 11.54161778-6.77205333 33.31413333 33.31413333 0 0 0 8.08277333-11.5052089c2.07530667-4.66033778 3.09475555-10.15808 3.09475556-16.49322666z m-18.85980445-117.85557334c0-10.55857778-2.76707555-18.05880889-8.26481778-22.5735111a28.69020445 28.69020445 0 0 0-18.67776-6.77205334h-18.85980444v58.25422222h18.85980444c6.91768889 0 13.14360889-2.18453333 18.67776-6.5536 5.49774222-4.36906667 8.26481778-11.79648 8.26481778-22.35505778z m189.47185778-24.83086222v232.10666667h-59.23726222v-232.54357333h-74.27413334V439.18222222h207.42144v55.99687111h-73.91004444zM830.75982222 730.45333333l-89.12896-163.18464v160.01706667H682.02951111V439.18222222h48.09614222l86.36188445 145.63555556v-145.63555556H876.08888889v291.27111111h-45.32906667z"  ></path></symbol><symbol id="icon-btn3" viewBox="0 0 1536 1024"><path d="M452.488242 541.251023h-100.802821v113.623092h99.272956c22.504318 0 40.41904-3.564586 53.224012-10.709057 16.369558-9.179191 24.569636-23.559925 24.569635-43.998924 0-20.989751-6.119461-35.814145-17.914722-45.054532q-18.419577-13.829982-58.34906-13.860579zM497.527475 479.367974c10.2195-8.735531 15.880001-22.550214 15.880001-41.489945 0-17.379269-5.660501-30.184241-15.880001-37.818269-11.24451-8.184779-28.654376-12.315415-53.224012-12.315415h-92.618042v104.367407h91.593032c25.594645 0 43.494069-4.589596 54.249022-12.743778z"  ></path><path d="M1407.980877 0H128.003825A128.003825 128.003825 0 0 0 0 128.003825v767.99235a128.003825 128.003825 0 0 0 128.003825 128.003825h1279.977052a128.003825 128.003825 0 0 0 128.003824-128.003825v-767.99235A128.003825 128.003825 0 0 0 1407.980877 0zM550.751487 682.503481c-21.509905 14.30424-52.199002 21.418113-91.103476 21.418113H291.806496V338.620372h167.351959c36.334299 0 64.958078 8.689635 85.458272 26.130099 18.909134 16.369558 28.623779 38.36902 28.623779 65.998386 0 20.439-5.094451 37.879463-14.809096 52.183703-9.745242 13.325126-23.559925 22.947979-41.964203 30.19954 24.034183 4.589596 41.964204 14.30424 54.249021 29.17453 11.749365 14.319539 17.899423 34.253683 17.899423 58.823319 0 36.869752-12.804972 63.994263-37.864164 81.373532zM916.297487 389.809663h-119.742552v314.188425h-59.878926V389.809663h-119.711955v-51.189291h299.333433z m346.59097 314.188425h-58.333761L1021.949981 436.868318h-2.05002v267.12977h-59.94012V338.620372h59.878926L1200.485254 602.262049h1.988825V338.620372h60.368482z"  ></path></symbol><symbol id="icon-popup2" viewBox="0 0 1024 1024"><path d="M989 614.5c-19.3 0-35 15.7-35 35v232.9c0 39.5-32.1 71.6-71.6 71.6H141.6c-6.7 0-13.2-1-19.4-2.7L486 587.5V773c0 19.3 15.7 35 35 35s35-15.7 35-35V501.3c0-0.3 0-0.5-0.1-0.8 0-0.3 0-0.6-0.1-0.9 0-0.3-0.1-0.7-0.1-1 0-0.2-0.1-0.4-0.1-0.7-0.1-0.4-0.1-0.7-0.2-1.1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.4-0.2-0.7-0.2-1.1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.4-0.2-0.7-0.3-1.1-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.7l-0.3-0.9c-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.3-0.2-0.5-0.3-0.7-0.1-0.3-0.3-0.6-0.4-0.8l-0.3-0.6c-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.2-0.2-0.4-0.3-0.5-0.2-0.3-0.4-0.6-0.6-1-0.1-0.2-0.2-0.3-0.3-0.5-0.2-0.3-0.4-0.6-0.6-1-0.1-0.2-0.2-0.3-0.3-0.5l-0.6-0.9c-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.3-0.4-0.5-0.6-0.8-0.2-0.2-0.4-0.4-0.6-0.7-0.2-0.2-0.4-0.4-0.5-0.6-0.4-0.4-0.8-0.8-1.2-1.3-0.4-0.4-0.8-0.8-1.3-1.2-0.2-0.2-0.4-0.4-0.6-0.5-0.2-0.2-0.5-0.4-0.7-0.6-0.3-0.2-0.5-0.4-0.8-0.6-0.2-0.1-0.4-0.3-0.5-0.4l-0.9-0.6c-0.2-0.1-0.3-0.2-0.5-0.3l-0.9-0.6c-0.2-0.1-0.3-0.2-0.5-0.3-0.3-0.2-0.6-0.4-1-0.5-0.2-0.1-0.4-0.2-0.5-0.3-0.3-0.2-0.6-0.3-0.9-0.5l-0.6-0.3c-0.3-0.1-0.6-0.3-0.8-0.4-0.2-0.1-0.5-0.2-0.7-0.3-0.3-0.1-0.5-0.2-0.8-0.3l-0.9-0.3c-0.2-0.1-0.5-0.2-0.7-0.2-0.3-0.1-0.6-0.2-1-0.3-0.2-0.1-0.4-0.1-0.6-0.2-0.3-0.1-0.7-0.2-1.1-0.3-0.2 0-0.4-0.1-0.6-0.1-0.4-0.1-0.7-0.2-1.1-0.2-0.2 0-0.4-0.1-0.6-0.1-0.4-0.1-0.7-0.1-1.1-0.2-0.2 0-0.5-0.1-0.7-0.1-0.3 0-0.7-0.1-1-0.1-0.3 0-0.6 0-0.9-0.1-0.3 0-0.5 0-0.8-0.1H251c-19.3 0-35 15.7-35 35s15.7 35 35 35h185.5L72.7 901.8c-1.7-6.2-2.7-12.7-2.7-19.4V141.6c0-39.5 32.1-71.6 71.6-71.6h232.9c19.3 0 35-15.7 35-35s-15.7-35-35-35H141.6C63.5 0 0 63.5 0 141.6v740.8C0 960.5 63.5 1024 141.6 1024h740.8c78.1 0 141.6-63.5 141.6-141.6V649.5c0-19.3-15.7-35-35-35z"  ></path><path d="M899.7 0H748.3C679.7 0 624 55.7 624 124.3v151.4c0 68.7 55.7 124.3 124.3 124.3h151.4c68.7 0 124.3-55.7 124.3-124.3V124.3C1024 55.7 968.3 0 899.7 0zM954 275.7c0 30-24.4 54.3-54.3 54.3H748.3c-30 0-54.3-24.4-54.3-54.3V124.3c0-30 24.4-54.3 54.3-54.3h151.4c30 0 54.3 24.4 54.3 54.3v151.4z"  ></path></symbol><symbol id="icon-popup" viewBox="0 0 1024 1024"><path d="M819.2 102.4 408.5248 102.4C352.256 102.4 307.2 147.456 307.2 203.776L307.2 614.4c0 56.32 46.08 102.4 102.4 102.4l409.6 0c56.32 0 102.4-46.08 102.4-102.4L921.6 204.8C921.6 148.48 875.52 102.4 819.2 102.4zM819.2 614.4 409.6 614.4 409.6 204.8l409.6 0L819.2 614.4zM204.8 512 102.4 512l0 307.2c0 56.32 46.08 102.4 102.4 102.4l307.2 0 0-102.4L204.8 819.2 204.8 512z"  ></path></symbol><symbol id="icon-depart2" viewBox="0 0 1024 1024"><path d="M411.20278261 292.83431884H612.91594203c12.10991304-1.42469565 21.37043478-11.63501449 21.37043478-24.10110145V73.90608696c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073h-195.89565218c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 12.46608696 9.37924638 22.67640579 21.48915942 24.21982609zM438.39072464 98.24463769h147.21855072v146.03130434H438.39072464v-146.03130434zM171.26028986 536.33855073h316.40115941V681.77623188h48.67710146V536.33855073H852.73971014V681.77623188h48.67710145V513.89959421c0-14.4844058-11.75373913-26.23814493-26.23814493-26.23814494H536.33855073V342.10504348h-48.67710146v145.67513043H150.83965217c-15.55292754 0-28.25646377 12.70353623-28.25646376 28.25646378V681.77623188h48.67710145V536.33855073zM609.3542029 731.04695652H414.6457971c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073z m-24.33855073 194.70840579h-146.03130434v-146.03130434h146.03130434v146.03130434zM244.27594203 731.04695652h-194.7084058c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-13.41588406-10.92266666-24.33855073-24.33855072-24.33855073z m-24.33855072 194.70840579H73.90608696v-146.03130434h146.03130435v146.03130434zM974.43246377 731.04695652h-194.7084058c-13.41588406 0-24.33855073 10.92266666-24.33855072 24.33855073v194.70840579c0 13.41588406 10.92266666 24.33855073 24.33855072 24.33855073h194.7084058c13.41588406 0 24.33855073-10.92266666 24.33855072-24.33855073V755.38550725c0-14.60313044-9.73542029-24.33855073-24.33855072-24.33855073z m-24.33855073 194.70840579H804.06260869v-146.03130434h146.03130435v146.03130434z"  ></path></symbol><symbol id="icon-card" viewBox="0 0 1024 1024"><path d="M96.8 466.9h414.8V98.2H96.8v368.7z m46.1-322.6h322.6v276.5H142.9V144.3z m0 0M557.7 927.8h368.7V651.3H557.7v276.5z m46.1-230.5h276.5v184.3H603.8V697.3z m0 0M557.7 98.2v506.9h368.7V98.2H557.7z m322.6 460.9H603.8V144.3h276.5v414.8z m0 0M96.8 927.8h414.8V513H96.8v414.8z m46.1-368.7h322.6v322.6H142.9V559.1z m0 0"  ></path></symbol><symbol id="icon-tab" viewBox="0 0 1024 1024"><path d="M960 960H64V64h480v224h416v672zM128 896h768V352H480V128H128v768z"  ></path><path d="M608 128h288v96h-288z"  ></path></symbol><symbol id="icon-tab1" viewBox="0 0 1024 1024"><path d="M343.25 315.125V118.25H62v787.5h900V315.125H343.25z m562.5 534.375H118.25V174.5h168.75v196.875h618.75v478.125z"  ></path><path d="M652.625 118.25h-253.125v140.625h253.125V118.25z m-56.25 84.375h-140.625V174.5h140.625v28.125zM708.875 118.25v140.625h253.125V118.25h-253.125z m196.875 84.375h-140.625V174.5h140.625v28.125z"  ></path></symbol><symbol id="icon-tab2" viewBox="0 0 1024 1024"><path d="M615.3846875 68.9234375H408.6153125c-12.9234375 0-22.153125 11.0765625-22.153125 24v46.153125c0 12.9234375 11.0765625 24 22.153125 24h206.769375c12.9234375 0 22.153125-11.0765625 22.153125-24v-46.153125c1.846875-12.9234375-9.2296875-24-22.153125-24z m315.691875 0H724.308125c-12.9234375 0-24 11.0765625-24 24v46.153125c0 12.9234375 11.0765625 24 24 24h206.7684375c12.9234375-1.8459375 24-11.0765625 24-24v-46.153125c0-12.9234375-11.0765625-24-24-24z m0 155.0765625H345.846875c-12.9225 0-24-11.0765625-24-24V92.9234375c0-12.9234375-11.0765625-24-24-24H92.9234375c-12.9234375 0-24 11.0765625-24 24v840c0 11.0765625 11.0765625 22.153125 24 22.153125h838.153125c12.9234375 0 24-11.0765625 24-24V248c0-12.9234375-11.0765625-24-24-24z"  ></path></symbol><symbol id="icon-text" viewBox="0 0 1024 1024"><path d="M962.9656745 932.80074644c-4.52473921-61.83810252-6.03298562-125.18445145-6.03298561-187.02255398 0-31.67317446 0-61.83810252 1.50824638-93.51127698 0-28.65668166 3.01649281-57.31336332-7.54123201-84.46179856-24.13194244-61.83810252-105.57724821-73.90407375-164.39885791-73.90407375-30.16492806 0-60.32985613 4.52473921-90.49478419 12.06597121-21.11544964 6.03298562-42.2308993 13.57421762-60.3298561 22.62369605l19.60720322 48.26388489c4.52473921 9.04947843 6.03298562 19.60720323 7.54123203 28.65668166 39.21440646-18.09895683 78.42881296-28.65668166 117.64321942-28.65668166 61.83810252 0 92.00303057 24.13194244 92.00303057 72.39582735v22.62369604c-9.04947843 0-24.13194244-1.50824641-43.73914568-1.50824639-78.42881296 0-137.25042267 12.06597121-179.48132195 34.68966726-40.72265287 24.13194244-61.83810252 64.85459532-61.83810253 123.67620504 0 43.73914569 13.57421762 78.42881296 40.72265288 102.5607554 27.14843525 24.13194244 61.83810252 36.19791367 102.56075542 36.19791368 36.19791367 0 66.36284173-4.52473921 88.98653777-15.08246403s42.2308993-25.64018885 57.3133633-46.75563849h3.01649283c1.50824641 10.55772482 3.01649281 27.14843525 7.54123202 51.28037771 0 1.50824641 67.87108813 0 75.41232014 0 1.50824641-10.55772482 0-16.59071043 0-24.13194245zM873.97913671 780.46785973c0 10.55772482-1.50824641 21.11544964-6.03298561 31.67317447-3.01649281 7.54123201-6.03298562 15.08246403-12.06597122 22.62369604-18.09895683 25.64018885-49.77213131 39.21440646-79.93705936 45.2473921-19.60720323 3.01649281-37.70616007 1.50824641-57.3133633-1.50824641-15.08246403-3.01649281-30.16492806-10.55772482-37.70616008-24.13194245-13.57421762-21.11544964-10.55772482-54.29687052 4.5247392-73.90407375 9.04947843-12.06597121 22.62369604-19.60720323 36.19791368-24.13194245 37.70616007-12.06597121 81.44530576-12.06597121 119.15146583-12.06597121l33.18142086 1.50824639v34.68966727zM585.90407375 607.01952339L371.73308452 76.11678954c-3.01649281-10.55772482-12.06597121-16.59071043-22.62369604-16.59071043h-67.87108814c-10.55772482 0-21.11544964 7.54123201-24.13194244 16.59071043l-196.0720324 530.90273385c-4.52473921 10.55772482 3.01649281 22.62369604 13.57421763 22.62369604h75.41232016c10.55772482 0 21.11544964-9.04947843 24.13194245-19.60720324l49.77213129-138.75866906h193.05553958l55.80511693 138.75866906c3.01649281 10.55772482 13.57421762 19.60720323 24.13194243 19.60720324h73.90407375c12.06597121 0 21.11544964-12.06597121 15.08246403-22.62369604zM263.13934351 367.20834531l55.80511691-144.79165468 61.83810251 144.79165468h-117.64321942z"  ></path></symbol><symbol id="icon-divider" viewBox="0 0 1024 1024"><path d="M129.70666667 129.70666667h764.58666666a54.61333333 54.61333333 0 0 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 1 1 0-109.22666666z m0 655.36h764.58666666a54.61333333 54.61333333 0 0 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 0 1 0-109.22666666z m0-327.68h140.41088a54.61333333 54.61333333 0 1 1 0 109.22666666H129.70666667a54.61333333 54.61333333 0 0 1 0-109.22666666z m312.06058666 0h140.46549334a54.61333333 54.61333333 0 0 1 0 109.22666666H441.76725333a54.61333333 54.61333333 0 0 1 0-109.22666666z m312.1152 0H894.29333333a54.61333333 54.61333333 0 0 1 0 109.22666666h-140.41088a54.61333333 54.61333333 0 0 1 0-109.22666666z"  ></path></symbol><symbol id="icon-markdown" viewBox="0 0 1024 1024"><path d="M92 192C42.24 192 0 232.128 0 282.016v459.968C0 791.904 42.24 832 92 832h840C981.76 832 1024 791.872 1024 741.984V282.016C1024 232.16 981.76 192 932 192z m0 64h840c16.512 0 28 12.256 28 26.016v459.968c0 13.76-11.52 26.016-28 26.016H92C75.488 768 64 755.744 64 741.984V282.016c0-13.76 11.52-25.984 28-25.984zM160 352v320h96v-212.992l96 127.008 96-127.04V672h96V352h-96l-96 128-96-128z m544 0v160h-96l144 160 144-160h-96v-160z"  ></path></symbol><symbol id="icon-tree" viewBox="0 0 1024 1024"><path d="M251.255027 267.144745a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.048248A178.096497 178.096497 0 1 1 251.255027 0.03657a178.096497 178.096497 0 0 1 0 356.192993z"  ></path><path d="M206.712617 267.144745h89.048249v44.542409a89.048248 89.048248 0 0 0 89.048248 89.048248h267.108175v89.011678h-267.108175a177.255384 177.255384 0 0 1-89.084818-23.807149l0.03657 246.409485a89.048248 89.048248 0 0 0 89.048248 89.048248h267.108175v89.048249h-267.108175a178.096497 178.096497 0 0 1-178.096497-178.096497V267.144745z"  ></path><path d="M785.471376 934.951752a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.048248a178.096497 178.096497 0 1 1 0-356.192993 178.096497 178.096497 0 0 1 0 356.192993zM785.471376 534.28949a89.048248 89.048248 0 1 0 0-178.096497 89.048248 89.048248 0 0 0 0 178.096497z m0 89.011678a178.096497 178.096497 0 1 1 0-356.156423 178.096497 178.096497 0 0 1 0 356.192993z"  ></path></symbol><symbol id="icon-map" viewBox="0 0 1024 1024"><path d="M649.6 960c-12.8 0-25.6-9.6-28.8-22.4-6.4-16 3.2-35.2 19.2-41.6l256-86.4V428.8l-115.2 38.4c-16 6.4-35.2-3.2-41.6-19.2-6.4-16 3.2-35.2 19.2-41.6l160-51.2c9.6-6.4 19.2-3.2 28.8 3.2 6.4 6.4 12.8 16 12.8 25.6v448c0 12.8-9.6 25.6-22.4 28.8l-278.4 96c-3.2 3.2-6.4 3.2-9.6 3.2z"  ></path><path d="M649.6 960c-3.2 0-6.4 0-9.6-3.2l-278.4-96c-16-6.4-25.6-22.4-19.2-41.6 6.4-16 22.4-25.6 41.6-19.2l278.4 96c16 6.4 25.6 22.4 19.2 41.6-6.4 12.8-19.2 22.4-32 22.4z"  ></path><path d="M96 960c-6.4 0-12.8-3.2-19.2-6.4-9.6-6.4-12.8-16-12.8-25.6V480c0-12.8 9.6-25.6 22.4-28.8l73.6-28.8c16-6.4 35.2 3.2 41.6 19.2s-3.2 35.2-19.2 41.6l-54.4 19.2v380.8l233.6-80c16-6.4 35.2 3.2 41.6 19.2 6.4 16-3.2 35.2-19.2 41.6l-278.4 96H96z"  ></path><path d="M480 416c-54.4 0-96-41.6-96-96s41.6-96 96-96 96 41.6 96 96-41.6 96-96 96z m0-128c-19.2 0-32 12.8-32 32s12.8 32 32 32 32-12.8 32-32-12.8-32-32-32z"  ></path><path d="M480 688l-22.4-25.6C435.2 640 256 435.2 256 320c0-124.8 99.2-224 224-224s224 99.2 224 224c0 115.2-179.2 320-201.6 342.4l-22.4 25.6zM480 160c-89.6 0-160 70.4-160 160 0 60.8 89.6 188.8 160 272 70.4-83.2 160-211.2 160-272 0-89.6-70.4-160-160-160z"  ></path></symbol><symbol id="icon-jm-print" viewBox="0 0 1024 1024"><path d="M362.666667 853.333333l298.666667 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L362.666667 810.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333C341.333333 844.8 349.866667 853.333333 362.666667 853.333333zM362.666667 768l213.333333 0c12.8 0 21.333333-8.533333 21.333333-21.333333 0-12.8-8.533333-21.333333-21.333333-21.333333L362.666667 725.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333C341.333333 759.466667 349.866667 768 362.666667 768zM853.333333 298.666667l-42.666667 0L810.666667 85.333333c0-23.466667-19.2-42.666667-42.666667-42.666667L256 42.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667l0 213.333333L170.666667 298.666667c-70.4 0-128 57.6-128 128l0 341.333333c0 70.4 57.6 128 128 128l42.666667 0 0 42.666667c0 23.466667 19.2 42.666667 42.666667 42.666667l512 0c23.466667 0 42.666667-19.2 42.666667-42.666667l0-42.666667 42.666667 0c70.4 0 128-57.6 128-128L981.333333 426.666667C981.333333 356.266667 923.733333 298.666667 853.333333 298.666667zM256 85.333333l512 0 0 213.333333L256 298.666667 256 85.333333zM768 896l0 42.666667L256 938.666667l0-42.666667L256 682.666667l512 0L768 896zM938.666667 768c0 46.933333-38.4 85.333333-85.333333 85.333333l-42.666667 0 0-170.666667c0-23.466667-19.2-42.666667-42.666667-42.666667L256 640c-23.466667 0-42.666667 19.2-42.666667 42.666667l0 170.666667L170.666667 853.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333L85.333333 426.666667c0-46.933333 38.4-85.333333 85.333333-85.333333l682.666667 0c46.933333 0 85.333333 38.4 85.333333 85.333333L938.666667 768zM810.666667 426.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666667 42.666667-19.2 42.666667-42.666667S834.133333 426.666667 810.666667 426.666667zM682.666667 426.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666667 42.666667-19.2 42.666667-42.666667S706.133333 426.666667 682.666667 426.666667z"  ></path></symbol><symbol id="icon-phone" viewBox="0 0 1024 1024"><path d="M402.176 208.981333c-28.245333-40.256-50.901333-53.653333-81.258667-47.957333-13.098667 2.453333-21.184 6.869333-36.053333 19.712l-11.328 9.941333-22.037333 18.282667-5.76 5.034667c-3.242667 2.986667-5.589333 5.44-8.597334 8.853333-56 63.402667-71.509333 162.56-38.912 255.786667 23.445333 66.986667 65.28 133.546667 124.928 200.064 63.253333 70.549333 116.416 114.944 177.557334 147.328 48 25.386667 84.757333 36.522667 127.466666 37.824 51.626667 1.6 97.088-10.069333 134.442667-34.261334a141.866667 141.866667 0 0 0 17.109333-13.290666l7.253334-6.613334 14.293333-13.312 4.842667-4.309333 9.557333-8.256c19.285333-17.194667 25.536-27.946667 26.816-44.949333 1.92-25.941333-9.813333-46.144-43.52-74.986667l-22.805333-19.093333-10.602667-9.258667-10.026667-8.597333c-32.576-26.901333-56.704-35.605333-87.68-30.933334-21.248 3.178667-33.493333 10.624-55.189333 33.344l-9.578667 10.197334c-15.786667 16.64-24.789333 22.976-38.101333 25.642666-19.477333 3.904-38.826667-6.165333-70.229333-31.68-40.469333-32.853333-74.048-70.592-102.912-115.456-20.010667-31.296-27.904-55.04-21.824-76.650666 2.474667-8.746667 8.448-14.912 21.056-24.661334l13.12-9.898666 2.112-1.642667 19.904-16.234667c17.6-14.72 24.746667-24.746667 28.501333-40.106666 7.786667-31.594667 0.426667-57.813333-28.373333-102.933334l-13.674667-21.205333-4.864-7.466667-5.632-8.256z"  ></path></symbol><symbol id="icon-mobile-phone" viewBox="0 0 1024 1024"><path d="M746.666667 949.333333H277.333333c-40.533333 0-74.666667-34.133333-74.666666-74.666666V149.333333c0-40.533333 34.133333-74.666667 74.666666-74.666666h469.333334c40.533333 0 74.666667 34.133333 74.666666 74.666666v725.333334c0 40.533333-34.133333 74.666667-74.666666 74.666666z m-469.333334-810.666666c-6.4 0-10.666667 4.266667-10.666666 10.666666v725.333334c0 6.4 4.266667 10.666667 10.666666 10.666666h469.333334c6.4 0 10.666667-4.266667 10.666666-10.666666V149.333333c0-6.4-4.266667-10.666667-10.666666-10.666666H277.333333z"  ></path><path d="M512 768m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"  ></path><path d="M597.333333 245.333333h-170.666666c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h170.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z"  ></path></symbol><symbol id="icon-email-filled" viewBox="0 0 1024 1024"><path d="M512.01284373 570.17116374l443.25167787-369.30789546c-2.401856-0.4367008-4.55967361-1.43854507-7.05143893-1.43854507L75.81260588 199.42472214c-2.44038933 0-4.61105067 0.98899947-7.01290669 1.43854507L512.01284373 570.17116374zM987.87582293 239.08746348c0-4.16150507-1.1431296-8.01475093-2.401856-11.803776L671.2674816 489.17594241l314.6817184 314.7459392c0.80918187-3.1725056 1.92662293-6.22941333 1.92662293-9.65880213L987.87582293 239.08746348zM38.56456533 227.24515521c-1.22019413 3.81471361-2.44038933 7.61658239-2.44038933 11.84230827l0 555.16277226c0 3.46792107 1.1945056 6.51198508 1.97799893 9.68449067l314.78447147-314.77162773L38.56456533 227.24515521zM640.62133548 514.65873921l-115.94415787 96.5751776c-3.63489492 3.09544107-8.13034773 4.58536213-12.66433388 4.58536213-4.4954528 0-9.01659413-1.48992214-12.6900224-4.58536213l-115.8414048-96.52380053L66.21802454 831.96066454c3.12112852 0.8220256 6.21656959 1.9651552 9.59458134 1.9651552l872.41332051 0c3.44223253 0 6.5376736-1.13028587 9.72302294-1.9651552L640.62133548 514.65873921z"  ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M981.48588027 334.89335562V815.7849815a82.85044939 82.85044939 0 0 1-82.85044939 82.85044938H125.36456912a82.85044939 82.85044939 0 0 1-82.85044939-82.85044938V334.89335562l82.85044939 70.22956468V815.7849815h773.27086176V405.1229203l82.85044939-70.22956468zM898.63543088 125.36456912a83.87227117 83.87227117 0 0 1 29.54999276 5.41289689 82.35334669 82.35334669 0 0 1 34.68672191 25.13130254 83.26470163 83.26470163 0 0 1 12.0961656 20.02219237c3.59018571 8.5059799 5.79953147 17.72999617 6.35186822 27.42349875L981.48588027 208.2150185v27.61681732L565.76994165 590.43175918a82.85044939 82.85044939 0 0 1-103.42497721 3.2864003l-4.11490609-3.31401798L42.51411973 235.83183582v-27.61681732a82.57428165 82.57428165 0 0 1 45.48489672-73.95783361A82.68474848 82.68474848 0 0 1 125.36456912 125.36456912h773.27086176z m-12.4275674 82.85044938h-748.41572696L512 527.3825672 886.20786348 208.2150185z"  ></path></symbol><symbol id="icon-qrcode" viewBox="0 0 1024 1024"><path d="M423.836543 114.819049l0-0.274246L204.08256 114.544803c-45.911656 0-83.09451 36.932144-83.356476 82.59309l-0.023536 0 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423.836543 480.882282l0-0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c0 24.14798-19.654642 43.705408-43.88551 43.705408L208.445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717687 43.858904-43.717687l205.708082 0c24.230867 0 43.88551 19.569708 43.88551 43.717687L458.039529 393.46021zM902.246517 195.111746c-0.215918-42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.304747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.472717 80.08906 67.472717l191.70823 0 0-0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.678656 429.282067c-23.658839 0-42.834574-19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.660886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.626197c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 39.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67.079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491.666394 620.001783l-0.049119 0C491.402381 577.308425 457.919802 542.53648 415.680792 539.887141zM448.975083 811.04077c0 23.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-42.690288-19.031449-42.690288-42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19.056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.120616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.214746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849-25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.688849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701.735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 598.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.701358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055-26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.712385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z"  ></path></symbol><symbol id="icon-save" viewBox="0 0 1024 1024"><path d="M753.38336182 141.58221435H164.75650023v740.8355713h694.48699952v-634.97543336L753.38336182 141.58221435z m-125.18749238 45.60699463v185.39428711H395.75778198v-185.39428711h232.43808747zM349.40921021 836.81079102V579.90065766l21.13494872-21.1812973h282.91168214l21.13494872 21.18129729v256.91013337H349.40921021z m463.48571777 0h-91.95556641V564.97641755L668.0092926 512H355.9907074L303.06063843 564.97641755v271.83437347H211.10507203V187.18920898h138.30413818v232.0672989h325.18157958V187.18920898h57.70397188l80.60016631 81.34174348v568.27983856z m-278.09143066-602.53143311h47.7853775v92.69714355H534.80349732v-92.69714355z"  ></path></symbol><symbol id="icon-link" viewBox="0 0 1024 1024"><path d="M928 896 416 896C380.656 896 352 867.344 352 832L352 448C352 412.656 380.656 384 416 384L512 384C529.68 384 544 398.336 544 416 544 433.68 529.68 448 512 448L416 448 416 832 928 832 928 448 768 448C750.32 448 736 433.68 736 416 736 398.336 750.32 384 768 384L928 384C963.344 384 992 412.656 992 448L992 832C992 867.344 963.344 896 928 896ZM608 640 512 640C494.336 640 480 625.68 480 608 480 590.32 494.336 576 512 576L608 576 608 192 96 192 96 576 256 576C273.68 576 288 590.32 288 608 288 625.68 273.68 640 256 640L96 640C60.656 640 32 611.344 32 576L32 192C32 156.656 60.656 128 96 128L608 128C643.344 128 672 156.656 672 192L672 576C672 611.344 643.344 640 608 640Z"  ></path></symbol><symbol id="icon-field" viewBox="0 0 1024 1024"><path d="M905.53963457 264.16739029H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026963h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026963s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 474.0551954H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026962h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026962s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 682.56215968H724.64948675c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026963h180.89014782c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026963s-22.23153725 49.71026963-49.71026962 49.71026963zM905.53963457 892.44996478H121.22204708c-27.47873238 0-49.71026963-22.23153725-49.71026963-49.71026963s22.23153725-49.71026963 49.71026963-49.71026964h784.31758749c27.47873238 0 49.71026963 22.23153725 49.71026962 49.71026964s-22.23153725 49.71026963-49.71026962 49.71026963zM432.04931635 210.45268228v388.29243944c-4.41869063 46.39625165 19.88410785 67.52311625 73.04647953 63.10442561h19.88410785v33.14017975H219.67599776v-33.14017975H249.64024362c44.18690634 2.20934532 66.41844358-18.7794352 66.41844358-63.10442561V210.45268228h-102.8726413c-55.371717-11.04672658-85.19787878 22.09345317-89.61656943 99.55862334h-36.45419772l16.57008988-159.34903097h26.5121438c4.41869063 6.62803595 9.94205392 11.04672658 16.57008988 13.25607188 4.41869063 4.41869063 12.15139925 5.5233633 23.19812583 3.31401798h404.86252931c15.46541722 2.20934532 28.72148912-3.31401797 39.7682157-16.57008986h29.82616178l13.2560719 159.34903097h-33.14017975c-6.62803595-77.46517017-37.69695447-110.60534992-92.93058738-99.55862334h-99.55862335z"  ></path></symbol><symbol id="icon-field-1" viewBox="0 0 1024 1024"><path d="M373.64622187 123.6385184H87.22962987a24.27259307 24.27259307 0 0 0-24.27259307 24.27259307v285.20296213a24.27259307 24.27259307 0 0 0 24.27259307 24.27259307h285.2029632a24.27259307 24.27259307 0 0 0 24.272592-24.27259307V147.91111147a24.27259307 24.27259307 0 0 0-23.0589632-24.27259307z m-24.272592 285.2029632h-236.65777814V172.7905184h236.65777814zM859.70488853 185.53362987H468.91614827a24.27259307 24.27259307 0 1 0 0 48.54518506h390.78874026a24.27259307 24.27259307 0 0 0 0-48.54518506zM468.91614827 365.75762987h245.76a24.27259307 24.27259307 0 1 0 0-48.54518507H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507zM373.64622187 566.61333333H87.22962987a24.27259307 24.27259307 0 0 0-24.27259307 24.27259307V876.08888853a24.27259307 24.27259307 0 0 0 24.27259307 24.27259307h285.2029632a24.27259307 24.27259307 0 0 0 24.272592-24.27259307v-285.20296213a24.27259307 24.27259307 0 0 0-23.0589632-24.27259307z m-24.272592 284.59614827h-236.65777814V615.1585184h236.65777814zM859.70488853 628.5084448H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507h390.78874026a24.27259307 24.27259307 0 0 0 0-48.54518507zM714.67614827 760.18725973H468.91614827a24.27259307 24.27259307 0 0 0 0 48.54518507h245.76a24.27259307 24.27259307 0 0 0 0-48.54518507z"  ></path></symbol><symbol id="icon-fullscreen" viewBox="0 0 1024 1024"><path d="M290 236.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L169 160c-5.1-0.6-9.5 3.7-8.9 8.9L179 329.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zM642.7 423.7c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7L863.9 169c0.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4zM845 694.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L734 787.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L855 864c5.1 0.6 9.5-3.7 8.9-8.9L845 694.9zM381.3 600.3c-3.1-3.1-8.2-3.1-11.3 0L236.3 733.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L160.1 855c-0.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-0.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"  ></path></symbol><symbol id="icon-fullscreen-exit" viewBox="0 0 1024 1024"><path d="M391 240.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L280 333.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L401 410c5.1 0.6 9.5-3.7 8.9-8.9L391 240.9zM401.1 614.1L240.8 633c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7l18.9-160.1c0.6-5.1-3.7-9.4-8.8-8.8zM622.9 409.9L783.2 391c6.6-0.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3c-3.1-3.1-8.2-3.1-11.3 0L690.3 279.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L614.1 401c-0.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L623 614c-5.1-0.6-9.5 3.7-8.9 8.9L633 783.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z"  ></path></symbol><symbol id="icon-money" viewBox="0 0 1048 1024"><path d="M524.2752 0C241.516134 0 12.288102 229.228032 12.288102 511.976038c0 117.534003 39.610982 225.814016 106.203955 312.231014l38.47895-40.06103C100.53417 708.109005 67.143168 613.944013 67.143168 511.976038c0-252.460954 204.668006-457.120973 457.132032-457.120973 252.45399 0 457.120973 204.660019 457.120973 457.120973 0 252.468019-204.668006 457.12896-457.120973 457.12896-91.12105 0-176.011981-26.66496-247.303987-72.611021l-34.630042 42.907955c80.855962 53.441024 177.760973 84.558029 281.934029 84.558029 282.755994 0 511.984026-229.224038 511.984026-511.984026C1036.258202 229.228032 807.03017 0 524.2752 0zM304.851149 566.841958 304.851149 621.697024 505.983181 621.697024 505.983181 767.966003 505.983181 767.97399 505.983181 767.97399 505.983181 804.54697 560.838144 804.54697 560.838144 767.97399 560.83712 767.97399 560.838144 767.966003 560.838144 621.697024 761.973146 621.697024 761.973146 566.841958 560.838144 566.841958 560.838144 457.136026 761.973146 457.136026 761.973146 402.270003 600.358195 402.270003 718.125158 284.499968 678.615142 244.985958 533.40713 390.177997 388.213146 244.985958 348.695142 284.499968 466.462106 402.270003 304.851149 402.270003 304.851149 457.136026 505.983181 457.136026 505.983181 566.841958Z"  ></path></symbol><symbol id="icon-integer" viewBox="0 0 1024 1024"><path d="M514.077312 702.673667c40.199561 0 70.936609-16.709567 92.211145-50.126654 1.876744-2.951215 3.570315-6.145977 5.279237-9.317203 19.652596 39.590694 52.199872 59.443857 97.718579 59.443857 40.196491 0 70.932516-16.709567 92.207052-50.126654 21.272489-33.419134 31.909757-80.859609 31.909757-142.327566 0-124.82596-39.174208-187.237405-117.515461-187.237405-41.081651 0-72.479755 16.748453-94.189196 50.242288-2.00568 3.100618-3.826142 6.459109-5.646604 9.812483-19.24225-40.009226-51.016931-60.055794-95.372138-60.055794-41.080627 0-72.475662 16.748453-94.186126 50.242288-21.714558 33.503045-32.573883 82.008782-32.573883 145.528468C393.919674 641.367393 433.973926 702.673667 514.077312 702.673667zM712.807469 381.76075c32.127721 0 48.196699 43.767829 48.196699 131.304512 0 87.220481-16.506952 130.828674-49.517787 130.828674-33.600259 0-50.39783-42.343387-50.39783-127.037325C661.089573 426.790316 678.329213 381.76075 712.807469 381.76075zM517.598508 381.76075c32.131815 0 48.196699 43.767829 48.196699 131.304512 0 87.220481-16.504906 130.828674-49.51574 130.828674-33.600259 0-50.395784-42.343387-50.395784-127.037325C465.884706 426.790316 483.124346 381.76075 517.598508 381.76075z"  ></path><path d="M285.863656 416.20933l0 285.908682 64.385403 0 0-381.212258-56.681954 0.181125c-29.344329 24.019043-64.11525 42.345434-104.314811 54.984289l0 65.651232c12.763698-1.575892 26.77583-5.64558 42.035372-12.20395C246.544139 422.962128 277.05913 424.424432 285.863656 416.20933z"  ></path><path d="M897.529587 66.766636 124.898615 66.766636c-35.558867 0-64.385403 28.827559-64.385403 64.385403l0 760.717641c0 35.558867 28.827559 64.387449 64.385403 64.387449l772.630972 0c35.558867 0 64.385403-28.828582 64.385403-64.387449L961.91499 131.153062C961.916013 95.594195 933.088454 66.766636 897.529587 66.766636zM897.529587 892.719025 124.898615 892.719025 124.898615 130.299625l772.630972 0L897.529587 892.719025z"  ></path></symbol><symbol id="icon-tiaoma" viewBox="0 0 1024 1024"><path d="M392.687614 869.933065l29.827329 0L422.514943 154.067958 392.687614 154.067958 392.687614 869.933065zM452.342272 869.933065l29.830399 0L482.172671 154.067958l-29.830399 0L452.342272 869.933065zM243.547899 869.933065l89.485057 0L333.032956 154.067958l-89.485057 0L243.547899 869.933065zM64.583924 869.933065l119.309316 0L183.89324 154.067958l-119.309316-0.002047L64.583924 869.933065zM512 869.933065l89.481987 0L601.481987 154.067958l-89.481987 0L512 869.933065zM840.102666 154.067958l0 715.865107L959.415053 869.933065 959.415053 154.067958 840.102666 154.067958zM750.621702 869.933065l59.654658 0L810.276361 154.067958l-59.654658 0L750.621702 869.933065zM631.309316 869.933065l59.654658 0L690.963974 154.067958l-59.654658 0L631.309316 869.933065z"  ></path></symbol><symbol id="icon-zuhe" viewBox="0 0 1042 1024"><path d="M1036.74608 135.558l-5.363-2.926a35.596 35.596 0 0 0-7.315-7.314L814.39208 4.876a36.084 36.084 0 0 0-34.133 0L570.58308 125.318l-5.852 5.852-8.29 4.876a10.728 10.728 0 0 0-5.363 9.264v20.48l-10.24-5.851a36.084 36.084 0 0 0-36.084 0l-10.24 5.851v-19.504a10.728 10.728 0 0 0-6.827-10.728l-8.29-4.876s-3.413-4.389-5.85-5.852L263.87008 4.876a36.084 36.084 0 0 0-36.084 0L18.11008 125.318a35.109 35.109 0 0 0-7.802 7.802l-5.364 2.926a10.728 10.728 0 0 0-4.876 10.24v263.802a10.728 10.728 0 0 0 5.364 9.264l5.364 2.926a34.621 34.621 0 0 0 7.802 7.802l209.676 120.442a36.084 36.084 0 0 0 36.084 0l11.703-6.827v10.24a36.571 36.571 0 0 0 16.579 31.208l5.364 2.926-19.018 10.727a10.728 10.728 0 0 0-5.363 9.265v265.265a10.24 10.24 0 0 0 4.876 8.777 35.596 35.596 0 0 0 14.14 16.579l209.677 120.442a36.084 36.084 0 0 0 36.084 0l209.676-120.442a35.596 35.596 0 0 0 14.14-16.58 10.24 10.24 0 0 0 4.877-8.776V608.06a10.728 10.728 0 0 0-5.364-9.265L743.20008 588.07l5.365-2.926a36.571 36.571 0 0 0 18.041-31.208v-10.24l11.703 6.827a36.084 36.084 0 0 0 36.084 0l209.676-120.442a36.084 36.084 0 0 0 7.315-7.314l5.363-2.926a10.728 10.728 0 0 0 5.364-9.265v-264.29a10.728 10.728 0 0 0-5.364-10.727zM526.21008 466.164a10.728 10.728 0 0 0-10.24 0l-163.84 92.16-23.893-14.141v-31.208l146.286-83.383 5.851-5.851 7.314-4.389a10.728 10.728 0 0 0 5.364-9.264V226.743l28.282-16.092 28.282 16.092v183.345a10.728 10.728 0 0 0 5.364 9.264l8.29 4.389a35.109 35.109 0 0 0 5.85 5.851l146.286 83.383v30.72l-23.893 14.141z"  ></path></symbol><symbol id="icon-col-2" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM435.2 819.2h-256c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h256c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H190.1c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h234.2c20.1 0 36.5 16.4 36.5 36.5v387.8z m384 190.1h-256c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h256c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H599.7c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h234.2c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-3" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM307.2 819.2H204.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m230.4 190.1H460.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m230.4 190.1H716.8c-14.1 0-25.6-11.5-25.6-25.6 0-14.1 11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-4" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0zM113.3 241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3z m128 577.9H138.9c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m214.6 0H353.5c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5H445c20.1 0 36.5 16.4 36.5 36.5v387.8z m189.1 190.1H568.2c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z m189 190.1H782.8c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h102.4c14.1 0 25.6 11.5 25.6 25.6s-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5h-80.6c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h80.6c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-col-1" viewBox="0 0 1024 1024"><path d="M921.6 0H102.4C45.8 0 0 45.8 0 102.4v819.3C0 978.2 45.8 1024 102.4 1024h819.3c56.5 0 102.4-45.8 102.4-102.4V102.4C1024 45.8 978.2 0 921.6 0z m-76.8 819.2H179.2c-14.1 0-25.6-11.5-25.6-25.6s11.5-25.6 25.6-25.6h665.6c14.1 0 25.6 11.5 25.6 25.6 0 14.1-11.5 25.6-25.6 25.6z m25.6-190.1c0 20.1-16.4 36.5-36.5 36.5H190.1c-20.1 0-36.5-16.4-36.5-36.5V241.3c0-20.1 16.4-36.5 36.5-36.5h643.8c20.1 0 36.5 16.4 36.5 36.5v387.8z"  ></path></symbol><symbol id="icon-zuzhijuese" viewBox="0 0 1024 1024"><path d="M853.333333 256h-341.333333l-85.333333-85.333333H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333333v512a85.333333 85.333333 0 0 0 85.333334 85.333333h682.666666a85.333333 85.333333 0 0 0 85.333334-85.333333V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z m-341.333333 85.333333a106.666667 106.666667 0 1 1-106.666667 106.666667A106.24 106.24 0 0 1 512 341.333333z m192 426.666667h-384v-42.666667a128 128 0 0 1 128-128h128a128 128 0 0 1 128 128v42.666667z"  ></path></symbol><symbol id="icon-hashtag" viewBox="0 0 1024 1024"><path d="M870.4 448a64 64 0 0 0 0-128h-114.56l26.88-148.48a64 64 0 0 0-126.08-23.04l-32 171.52h-156.8l26.88-148.48a64 64 0 0 0-126.08-23.04l-32 171.52H198.4a64 64 0 1 0 0 128h116.16l-23.36 128H153.6a64 64 0 0 0 0 128h114.56l-26.88 148.48a64 64 0 1 0 126.08 23.04l32-171.52h157.76l-26.88 148.48a64 64 0 1 0 126.08 23.04l32-171.52h137.28a64 64 0 1 0 0-128h-116.16l23.36-128z m-291.2 128h-157.76l23.36-128h157.76z"  ></path></symbol><symbol id="icon-formula" viewBox="0 0 1024 1024"><path d="M471.2 358.3h-130l19-90.4a133.5 133.5 0 0 1 130.3-106.2h52.7a32.9 32.9 0 1 0 0-65.7h-52.7c-93.8 0-175.6 66.7-194.6 158.6l-21.8 103.7H128.8a32.9 32.9 0 0 0 0 65.7h131.6l-97.3 464.5a32.7 32.7 0 0 0 25.5 38.8 30.5 30.5 0 0 0 6.7 0.7 32.9 32.9 0 0 0 32.1-26.2L327.5 424h143.7a32.9 32.9 0 1 0 0-65.7zM758.4 712l160-160a32.8 32.8 0 1 0-46.5-46.4L712 665.5 552 505.6a32.8 32.8 0 1 0-46.4 46.4l160 160-160 159.9a32.8 32.8 0 1 0 46.4 46.5l160-160 159.9 160a32.9 32.9 0 0 0 46.5-46.5z"  ></path></symbol><symbol id="icon-t" viewBox="0 0 1024 1024"><path d="M851.968 167.936l0 109.568-281.6 0 0 587.776-116.736 0 0-587.776-281.6 0 0-109.568 679.936 0z"  ></path></symbol><symbol id="icon-t-filled" viewBox="0 0 1024 1024"><path d="M832 64 192 64C121.344 64 64 121.344 64 192l0 640c0 70.656 57.344 128 128 128l640 0c70.656 0 128-57.344 128-128L960 192C960 121.344 902.656 64 832 64zM768 320 576 320l0 448c0 35.392-28.608 64-64 64s-64-28.608-64-64L448 320 256 320C220.608 320 192 291.392 192 256s28.608-64 64-64l512 0c35.392 0 64 28.608 64 64S803.392 320 768 320z"  ></path></symbol><symbol id="icon-select" viewBox="0 0 1024 1024"><path d="M912.14545437 992L111.85454563 992A79.85454563 79.85454563 0 0 1 32 912.14545437L32 111.85454563A79.85454563 79.85454563 0 0 1 111.85454563 32l800.29090875 0A79.85454563 79.85454563 0 0 1 992 111.85454563l0 800.29090875A79.85454563 79.85454563 0 0 1 912.14545437 992zM111.85454563 111.85454563l-1e-8 800.29090875 800.29090875 0L912.14545437 111.85454563z"  ></path><path d="M224 520.72727281l205.52727281 205.52727282 370.47272719-370.47272719-58.03636406-58.03636406-312.43636313 311.99999999-147.49090875-147.49090874L224 520.72727281z"  ></path></symbol><symbol id="icon-number" viewBox="0 0 1224 1024"><path d="M0 901.567122h1224.462246v122.432878H0zM122.165946 745.589771h145.12211V10.310343h-101.137624a113.030935 113.030935 0 0 1-5.279325 23.490029C142.393471 95.076129 101.063477 124.690768 14.859223 124.690768h-13.198312v109.279055h120.490205zM400.991403 563.808979a402.222256 402.222256 0 0 0-35.175725 181.780792h397.550943v-130.722604H538.194526c7.044043-27.568159 17.587863-45.971647 49.248981-82.719307 7.044043-8.17109 14.073256-16.31252 21.117299-23.490028 139.842786-146.041543 161.835029-194.030012 156.555704-303.309067C757.197523 54.205852 682.441692-17.272645 517.967001 6.217384a147.450352 147.450352 0 0 0-62.447293 22.466789c-61.572349 39.832208-85.31448 88.843916-87.983801 188.928641 0 10.217569 0 20.420309 0.874944 30.637879h137.203124c-0.874944-9.194329-0.874944-17.365419-0.874945-25.536509 2.639662-78.596688 24.631905-108.255815 58.932687-110.287465 33.425837-1.02324 56.352342 26.544919 57.167968 92.922046 0.874944 71.478497-19.278433 116.426905-118.740317 218.54328-55.373591 57.197627-80.005496 91.943295-101.107965 139.916934zM819.644816 529.078141a246.452519 246.452519 0 0 0 0.874944 43.910338c13.198312 127.652884 69.491336 181.780792 197.900528 181.780792 120.490205 0 179.437721-53.104668 198.716153-171.563223 21.117299-130.722604-20.227525-209.348951-80.910099-228.760849a39.209366 39.209366 0 0 0-14.9482-3.06972c30.786174-8.17109 55.41808-31.661119 73.005942-75.630775 8.793931-21.443549 13.198312-49.026538 13.198311-87.820676-1.764718-136.847214-84.439536-212.418671-242.759958-180.757552-72.116168 14.295699-124.894586 75.630775-136.328179 162.368893-2.639662 16.31252-2.639662 32.62504-1.749888 49.026537h134.563461a150.490413 150.490413 0 0 1-0.889774-19.411899c2.639662-55.151147 16.712918-78.596688 42.219768-85.789026 38.705161-10.20274 60.682575 14.295699 63.322237 84.765787 3.514607 76.594697-25.50685 110.287465-87.954142 109.264225-5.279325-1.02324-11.433594-1.02324-16.712919-2.04648v106.209335h13.198312c84.439536 0 101.152454 17.365419 101.152454 115.403665 0 83.742546-12.323367 110.287465-43.094712 117.435315-43.094712 11.240809-66.851673-15.318939-73.005942-91.943295a104.933993 104.933993 0 0 1 0-23.490029z"  ></path></symbol><symbol id="icon-shangchuan" viewBox="0 0 1024 1024"><path d="M646.791 799v-31.447c0-8.837 7.164-16 16-16H735c88.127 0 159.569-71.46 159.569-159.61 0-88.15-71.442-159.61-159.569-159.61-11.454 0-26.738 2.548-45.854 7.645a7.931 7.931 0 0 1-9.616-10.01c7.907-25.529 11.861-45.89 11.861-61.083 0-99.1-80.316-179.438-179.391-179.438-99.075 0-179.391 80.337-179.391 179.438 0 15.193 3.954 35.554 11.861 61.083a7.929 7.929 0 0 1-9.616 10.01c-19.116-5.097-34.4-7.646-45.854-7.646-88.127 0-159.569 71.46-159.569 159.61 0 88.15 71.442 159.61 159.569 159.61h73.2c8.837 0 16 7.164 16 16V799c0 8.837-7.163 16-16 16H289c-123.16 0-223-99.866-223-223.058 0-116.51 89.304-212.156 203.18-222.188-0.002-0.29-0.002-0.58-0.002-0.87C269.178 234.745 377.893 126 512 126s242.822 108.743 242.822 242.885l-0.001 0.869C868.696 379.786 958 475.432 958 591.942 958 715.134 858.16 815 735 815h-72.209c-8.836 0-16-7.163-16-16z m-168.66-301.848l-79.364 69.93c-13.636 11.031-33.643 8.931-44.685-4.691-11.043-13.622-8.94-33.607 4.696-44.638l126.696-108.219c11-11.252 28.92-12.857 41.826-3.141L664.347 516.97c14.014 10.55 16.814 30.449 6.253 44.447-10.56 14-30.48 16.796-44.494 6.247l-84.431-70.973v286.57c0 17.529-14.225 31.738-31.772 31.738-17.547 0-31.772-14.21-31.772-31.738v-286.11z"  ></path></symbol><symbol id="icon-drag" viewBox="0 0 1024 1024"><path d="M909.3 506.3L781.7 405.6c-4.7-3.7-11.7-0.4-11.7 5.7V476H548V254h64.8c6 0 9.4-7 5.7-11.7L517.7 114.7c-2.9-3.7-8.5-3.7-11.3 0L405.6 242.3c-3.7 4.7-0.4 11.7 5.7 11.7H476v222H254v-64.8c0-6-7-9.4-11.7-5.7L114.7 506.3c-3.7 2.9-3.7 8.5 0 11.3l127.5 100.8c4.7 3.7 11.7 0.4 11.7-5.7V548h222v222h-64.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7 0.4-11.7-5.7-11.7H548V548h222v64.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.7-2.9 3.7-8.5 0.1-11.4z"  ></path></symbol><symbol id="icon-grid" viewBox="0 0 1024 1024"><path d="M128 469.333333 469.333333 469.333333 469.333333 128 128 128M128 896 469.333333 896 469.333333 554.666667 128 554.666667M554.666667 896 896 896 896 554.666667 554.666667 554.666667M554.666667 128 554.666667 469.333333 896 469.333333 896 128"  ></path></symbol><symbol id="icon-trash" viewBox="0 0 1024 1024"><path d="M394.95161173 414.51738453l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m156.0281088 0l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m156.0281088 0l0 351.0632448q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-39.0070272 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-351.0632448q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l39.0070272 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z m78.0140544 441.2669952l0-577.7915904-546.0983808 0 0 577.7915904q0 13.4086656 4.2663936 24.6841344t8.8375296 16.4560896 6.3995904 5.1806208l507.0913536 0q1.8284544 0 6.3995904-5.1806208t8.8375296-16.4560896 4.2663936-24.6841344z m-409.5737856-655.8056448l273.0491904 0-29.2552704-71.3097216q-4.2663936-5.4853632-10.3612416-6.7043328l-193.2066816 0q-6.094848 1.2189696-10.3612416 6.7043328z m565.6018944 19.5035136l0 39.0070272q0 8.5327872-5.4853632 14.0181504t-14.0181504 5.4853632l-58.5105408 0 0 577.7915904q0 50.5872384-28.6457856 87.4610688t-68.8717824 36.8738304l-507.0913536 0q-40.2259968 0-68.8717824-35.6548608t-28.6457856-86.2420992l0-580.2295296-58.5105408 0q-8.5327872 0-14.0181504-5.4853632t-5.4853632-14.0181504l0-39.0070272q0-8.5327872 5.4853632-14.0181504t14.0181504-5.4853632l188.3308032 0 42.663936-101.7839616q9.142272-22.5509376 32.9121792-38.3975424t48.1492992-15.8466048l195.035136 0q24.379392 0 48.1492992 15.8466048t32.9121792 38.3975424l42.663936 101.7839616 188.3308032 0q8.5327872 0 14.0181504 5.4853632t5.4853632 14.0181504z"  ></path></symbol><symbol id="icon-ic" viewBox="0 0 1536 1024"><path d="M1187.84 460.8h-327.68c-22.528 0-40.96-18.432-40.96-40.96V92.16c0-22.528 18.432-40.96 40.96-40.96h327.68c22.528 0 40.96 18.432 40.96 40.96v327.68c0 22.528-18.432 40.96-40.96 40.96z"  ></path><path d="M1126.4 512v358.4c0 28.16-23.04 51.2-51.2 51.2H409.6c-28.16 0-51.2-23.04-51.2-51.2V307.2c0-28.16 23.04-51.2 51.2-51.2h358.4V153.6H389.12c-45.056 0-81.92 36.864-81.92 81.92v655.36c0 45.056 36.864 81.92 81.92 81.92h706.56c45.056 0 81.92-36.864 81.92-81.92v-378.88h-51.2z"  ></path></symbol><symbol id="icon-date" viewBox="0 0 1024 1024"><path d="M205 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 552h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24zM205 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 687h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24zM205 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H205c-13.3 0-24 10.7-24 24s10.7 24 24 24zM453 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H453c-13.3 0-24 10.7-24 24s10.7 24 24 24zM701 823h120c13.3 0 24-10.7 24-24s-10.7-24-24-24H701c-13.3 0-24 10.7-24 24s10.7 24 24 24z"  ></path><path d="M870 116H745V64c0-13.3-10.7-24-24-24s-24 10.7-24 24v52H327V64c0-13.3-10.7-24-24-24s-24 10.7-24 24v52H154c-51.9 0-94 42.1-94 94v692c0 51.9 42.1 94 94 94h716c51.9 0 94-42.1 94-94V210c0-51.9-42.1-94-94-94z m46 786c0 25.4-20.6 46-46 46H154c-25.4 0-46-20.6-46-46V387h808v515z m0-563H108V210c0-25.4 20.6-46 46-46h125v68c0 13.3 10.7 24 24 24s24-10.7 24-24v-68h370v68c0 13.3 10.7 24 24 24s24-10.7 24-24v-68h125c25.4 0 46 20.6 46 46v129z"  ></path></symbol><symbol id="icon-fuwenbenkuang" viewBox="0 0 1024 1024"><path d="M218.316 307.727h87.886v205.06h-29.297v29.295h117.179v-29.294H364.79V307.727h87.882v29.293h29.294v-87.882H189.022v87.882h29.294v-29.293z m322.242 58.59h292.945v58.588H540.558v-58.588z m0 117.177h292.945v58.588H540.558v-58.588z m-351.536 117.18h644.481v58.588h-644.48v-58.587z m0 117.176h644.481v58.588h-644.48V717.85z m351.536-468.713h292.945v58.589H540.558v-58.589z m420.923 713.13H61.045V63.309h900.436v898.958z m-864.62-35.816h828.804V99.125H96.861V926.45z"  ></path></symbol><symbol id="icon-bars" viewBox="0 0 1024 1024"><path d="M170.666667 490.666667l682.666666 0 0 42.666666-682.666666 0 0-42.666666Z"  ></path><path d="M170.666667 704l682.666666 0 0 42.666667-682.666666 0 0-42.666667Z"  ></path><path d="M170.666667 277.333333l682.666666 0 0 42.666667-682.666666 0 0-42.666667Z"  ></path></symbol><symbol id="icon-slider" viewBox="0 0 1024 1024"><path d="M901.12 122.88h-757.76c-20.48 0-34.133333 13.653333-34.133333 34.133333v6.826667c0 20.48 13.653333 34.133333 34.133333 34.133333h757.76c6.826667 0 13.653333 0 20.48-6.826666s6.826667-13.653333 6.826667-20.48v-6.826667c0-27.306667-13.653333-40.96-27.306667-40.96z"  ></path><path d="M764.586667 88.746667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333zM901.12 430.08h-757.76c-20.48 0-34.133333 13.653333-34.133333 34.133333v6.826667c0 20.48 13.653333 34.133333 34.133333 34.133333h757.76c20.48 0 34.133333-13.653333 34.133333-34.133333v-6.826667c-6.826667-20.48-20.48-34.133333-34.133333-34.133333z"  ></path><path d="M552.96 395.946667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333zM901.12 737.28h-757.76c-6.826667 0-13.653333 0-20.48 6.826667-6.826667 6.826667-6.826667 13.653333-6.826667 20.48v6.826666c0 20.48 13.653333 34.133333 34.133334 34.133334h757.76c20.48 0 34.133333-13.653333 34.133333-34.133334v-6.826666c-13.653333-13.653333-27.306667-27.306667-40.96-27.306667z"  ></path><path d="M354.986667 703.146667h-68.266667c-20.48 0-34.133333 13.653333-34.133333 34.133333v68.266667c0 20.48 13.653333 34.133333 34.133333 34.133333h68.266667c20.48 0 34.133333-13.653333 34.133333-34.133333v-68.266667c0-20.48-13.653333-34.133333-34.133333-34.133333z"  ></path></symbol><symbol id="icon-color" viewBox="0 0 1024 1024"><path d="M297.78046416 323.45884442c0-38.83614815 31.06891852-69.90506667 66.02145186-69.90506666s66.02145185 31.06891852 66.02145186 69.90506666S402.63806416 389.48029628 363.80191602 389.48029628s-66.02145185-31.06891852-66.02145186-66.02145186zM165.73756046 459.38536294C165.73756046 420.54921479 196.80647899 389.48029628 231.75901232 389.48029628s66.02145185 31.06891852 66.02145184 69.90506666-31.06891852 66.02145185-66.02145184 66.02145185-66.02145185-31.06891852-66.02145186-66.02145185zM476.42674566 276.85546665c0-38.83614815 31.06891852-69.90506667 66.02145184-69.90506667 34.95253333 0 66.02145185 31.06891852 66.02145185 69.90506665s-31.06891852 66.02145185-66.02145185 66.02145186c-34.95253333 0-66.02145185-31.06891852-66.02145184-66.02145184zM476.42674566 661.33333331c0-50.48699259 38.83614815-89.32314075 89.32314073-89.32314076s89.32314075 38.83614815 89.32314074 89.32314076-38.83614815 89.32314075-89.32314074 89.32314075-89.32314075-38.83614815-89.32314073-89.32314075z"  ></path><path d="M519.14650861 164.23063701C297.78046416 164.23063701 119.13418269 315.69161479 119.13418269 505.98874073s178.64628148 337.87448889 400.01232592 337.87448888c62.13783703 0 108.74121482-7.76722963 147.57736297-23.30168888 27.1853037-11.65084445 50.48699259-27.1853037 62.13783703-46.60337779 27.1853037-42.71976297 7.76722963-104.8576-11.65084445-143.69374815-42.71976297-89.32314075-3.88361482-128.15928889 15.53445927-139.81013333 11.65084445-7.76722963 23.30168889-11.65084445 34.95253333-11.65084445 19.41807408 0 50.48699259 7.76722963 81.55591112 54.37060741 15.53445925 27.1853037 34.95253333 34.95253333 42.71976295 34.95253334 15.53445925 0 27.1853037-27.1853037 27.18530371-69.90506667 0-182.5298963-178.64628148-333.99087408-400.01232593-333.99087408z m0 722.35235556c-116.50844445 0-229.13327408-38.83614815-310.68918518-112.62482963-42.71976297-34.95253333-73.78868148-77.6722963-97.09037037-124.27567408-23.30168889-42.71976297-34.95253333-93.20675555-34.95253333-147.57736296S88.06526416 401.13114073 111.36695306 350.64414813c23.30168889-46.60337778 54.37060741-85.43952592 97.09037037-124.27567407C290.01323454 156.46340739 402.63806416 117.62725923 519.14650861 117.62725923s229.13327408 38.83614815 310.68918519 112.62482963c42.71976297 34.95253333 73.78868148 77.6722963 97.09037036 124.27567408 23.30168889 46.60337778 34.95253333 97.09037037 34.95253334 151.46097777 0 85.43952592-34.95253333 112.62482963-69.90506667 112.62482963-27.1853037 0-58.25422222-19.41807408-81.5559111-54.3706074-15.53445925-23.30168889-31.06891852-34.95253333-42.71976297-34.95253333-3.88361482 0-7.76722963 0-11.65084444 3.88361481-23.30168889 15.53445925-11.65084445 58.25422222 0 77.67229629 34.95253333 73.78868148 38.83614815 139.81013333 7.76722962 190.29712592-34.95253333 58.25422222-116.50844445 85.43952592-244.66773333 85.43952592z"  ></path></symbol><symbol id="icon-radio-active" viewBox="0 0 1024 1024"><path d="M512 4.533c-279.803 0-507.467 227.665-507.467 507.467 0 279.839 227.629 507.467 507.467 507.467 279.839 0 507.467-227.629 507.467-507.467 0-279.803-227.629-507.467-507.467-507.467zM512 946.65c-239.68 0-434.65-195.006-434.65-434.65 0-239.68 194.97-434.65 434.65-434.65 239.644 0 434.65 194.97 434.65 434.65 0 239.644-195.006 434.65-434.65 434.65zM512 329.955c-100.38 0-182.045 81.665-182.045 182.045s81.665 182.045 182.045 182.045 182.045-81.665 182.045-182.045-81.665-182.045-182.045-182.045z"  ></path></symbol><symbol id="icon-input" viewBox="0 0 1669 1024"><path d="M1398.66921433 732.06637047c0 70.6134846-45.10390102 127.64034389-100.83679598 127.64034389L366.82504671 859.70671436C311.18457777 859.70671436 265.98825072 802.67985575 265.98825072 732.06637047L265.98825072 292.02605556C265.98825072 221.41257027 311.18457777 164.38571167 366.82504671 164.38571167l931.09979834 0c55.73289429 0 100.836796 57.0268586 100.83679599 127.54791786L1398.76164038 732.06637047zM1362.43821147 286.48049352c0-51.01916714-41.40686012-92.42602727-92.42602726-92.42602726L394.83013288 194.05446626c-51.01916714 0-92.42602727 41.40686012-92.42602726 92.42602726l0 451.13143898c0 51.11159317 41.40686012 92.42602727 92.42602726 92.42602727l875.18205134 0c51.01916714 0 92.42602727-41.3144341 92.42602725-92.42602727L1362.43821147 286.48049352z"  ></path><path d="M447.23569039 723.84045447c0 16.0821286-12.93964383 28.9293464-28.92934643 28.92934639l0 0c-15.89727654 0-28.9293464-12.8472178-28.92934639-28.9293464l0-392.81061538c0-15.89727654 12.93964383-28.9293464 28.92934639-28.92934639l0 0c15.89727654 0 28.9293464 12.93964383 28.92934643 28.92934639L447.23569039 723.84045447z"  ></path><path d="M556.94538452 690.75193637m-34.65976047 0a0.25460031 0.25460031 0 1 0 69.31952028 0 0.25460031 0.25460031 0 1 0-69.31952028 0Z"  ></path><path d="M691.33282806 690.75193637m-34.65976048 0a0.25460031 0.25460031 0 1 0 69.31952028 0 0.25460031 0.25460031 0 1 0-69.31952028 0Z"  ></path><path d="M821.2838225 690.75193637m-34.65976049 0a0.25460031 0.25460031 0 1 0 69.3195203 0 0.25460031 0.25460031 0 1 0-69.3195203 0Z"  ></path></symbol><symbol id="icon-switch" viewBox="0 0 1024 1024"><path d="M729.008 806.496 295.008 806.496C140.912 806.496 16 681.584 16 527.504l0-31.008c0-154.08 124.912-278.992 279.008-278.992l434 0c154.08 0 279.008 124.912 279.008 278.992l0 31.008C1008 681.584 883.088 806.496 729.008 806.496zM946.96 496.768c0-119.696-97.04-216.736-216.736-216.736L294.384 280.032c-119.696 0-216.736 97.04-216.736 216.736l0 31.008c0 119.696 97.04 216.736 216.736 216.736L730.24 744.512c119.696 0 216.736-97.04 216.736-216.736L946.976 496.768zM702.32 672.576c-90.72 0-164.272-73.536-164.272-164.256 0-90.72 73.552-164.272 164.272-164.272 90.72 0 164.272 73.536 164.272 164.272C866.592 599.04 793.04 672.576 702.32 672.576z"  ></path></symbol><symbol id="icon-checkbox" viewBox="0 0 1024 1024"><path d="M797.8 248.4c-11.4-11.6-30.2-11.6-41.6-0.2L409.2 592.4l-146.8-148c-11.4-11.6-30.2-11.6-41.6-0.2l-55.8 55.4c-11.6 11.4-11.6 30.2-0.2 41.6l222.8 224.6c11.4 11.6 30.2 11.6 41.6 0.2l423.6-420.2c11.6-11.4 11.6-30.2 0.2-41.6l-55.2-55.8z"  ></path><path d="M857 59h-696c-55.2 0-100 44.8-100 100v696c0 55.2 44.8 100 100 100h696c55.2 0 100-44.8 100-100v-696c0-55.2-44.8-100-100-100z m53.8 777.8c0 39.8-32.2 72-72 72H179.2c-39.8 0-72-32.2-72-72V177.2c0-39.8 32.2-72 72-72h659.6c39.8 0 72 32.2 72 72v659.6z"  ></path></symbol><symbol id="icon-tooltip" viewBox="0 0 1024 1024"><path d="M511.999488 64.900126c-247.025093 0-447.290209 200.147436-447.290209 447.085548 0 246.909459 200.264093 447.115224 447.290209 447.115224s447.290209-200.205764 447.290209-447.115224C959.288674 265.046538 759.024581 64.900126 511.999488 64.900126L511.999488 64.900126zM511.999488 895.276267c-211.386408 0-383.348921-172.020842-383.348921-383.291616 0-211.299427 171.962513-383.203612 383.348921-383.203612 211.444736 0 383.408273 171.904185 383.408273 383.203612C895.407762 723.255425 723.444225 895.276267 511.999488 895.276267L511.999488 895.276267zM511.999488 256.486582c-88.048335 0-159.734004 71.685669-159.734004 159.647023l0 32.028461 63.881936 0 0-32.028461c0-52.759621 42.976814-95.764064 95.852068-95.764064 52.876278 0 95.852068 43.004443 95.852068 95.764064 0 35.987632-20.73116 56.019875-54.506405 85.835947-32.66905 28.767184-73.257467 64.521502-73.257467 126.716007l0 42.97579 63.881936 0 0-42.97579c0-31.679513 19.624966-50.547233 51.595099-78.848813 33.95023-29.815049 76.168774-67.083861 76.168774-133.703141C671.733493 328.172251 600.106152 256.486582 511.999488 256.486582L511.999488 256.486582zM480.087685 703.57213l63.881936 0 0 63.940265L480.087685 767.512395 480.087685 703.57213 480.087685 703.57213zM480.087685 703.57213"  ></path></symbol><symbol id="icon-tupian" viewBox="0 0 1170 1024"><path d="M1060.432916 0H109.768851A109.768851 109.768851 0 0 0 0 109.768851v804.462298a109.768851 109.768851 0 0 0 109.768851 109.768851h950.664065a109.768851 109.768851 0 0 0 109.768851-109.768851V109.768851A109.768851 109.768851 0 0 0 1060.432916 0zM109.768851 73.218409h950.781591a36.550442 36.550442 0 0 1 36.550442 36.550442v430.731092c-58.762768-48.302996-161.127511-113.529668-283.706646-113.529669-113.059566 0-224.473775 87.556525-332.127166 172.292437-82.267876 64.874096-167.943992 131.981178-227.76449 131.981177-84.030759 0-155.956387-61.818432-180.284173-85.323539V109.768851a36.667967 36.667967 0 0 1 36.550442-36.550442z m950.781591 877.680707H109.768851a36.550442 36.550442 0 0 1-36.550442-36.550442V740.645931c43.837025 31.026742 107.300815 63.698841 180.284173 63.698841 85.206014 0 176.288305-71.690577 273.011822-147.612074s199.793412-156.66154 286.99736-156.66154c157.131642 0 282.061288 138.327557 283.119018 139.737863v274.422128a36.550442 36.550442 0 0 1-36.550442 36.550442z"  ></path><path d="M303.450935 501.716516a147.259497 147.259497 0 1 0-147.259497-147.612074 147.259497 147.259497 0 0 0 147.259497 147.612074z m0-220.948009a73.335935 73.335935 0 1 1-72.748307 73.335935 73.335935 73.335935 0 0 1 73.21841-73.335935z"  ></path></symbol><symbol id="icon-rate" viewBox="0 0 1024 1024"><path d="M512.161682 66.028832c-7.767917 0-23.348778 6.231935-43.649126 46.343491-48.821939 87.162152-125.945457 229.404784-125.945457 229.404784s-140.995221 27.38572-231.952816 44.577265c-44.614104 7.344269-59.193147 47.083341-36.548404 75.05644 63.996546 77.008908 177.216167 204.165959 177.216167 204.165959s-18.48091 139.628084-28.888957 234.942917c-3.384074 36.602639 15.915481 57.597813 42.837644 57.597813 8.772804 0 18.367323-2.248204 28.256554-6.9022 76.339666-37.858236 192.462406-95.745644 218.751143-108.816335 25.840528 13.211906 140.817166 72.034617 216.300324 110.004393 9.775644 4.686742 19.295462 6.934946 27.958772 6.934946 26.621311 0 45.695738-20.957311 42.314735-57.634652-10.261715-95.458095-28.554336-235.31233-28.554336-235.31233s111.922069-127.270639 175.171602-204.391087c22.381753-28.043706 7.990998-67.821665-36.106336-75.197656-89.908706-17.238616-229.310639-44.650943-229.310639-44.650943S603.786473 199.717647 555.523259 112.451118c-17.066701-32.216749-30.122041-42.547025-38.377052-45.388746C516.367471 66.659189 514.695389 66.028832 512.161682 66.028832L512.161682 66.028832 512.161682 66.028832zM512.161682 66.028832"  ></path></symbol><symbol id="icon-time" viewBox="0 0 1024 1024"><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 831.712c-211.584 0-383.712-172.16-383.712-383.712 0-211.584 172.128-383.712 383.712-383.712 211.552 0 383.712 172.128 383.712 383.712 0 211.552-172.16 383.712-383.712 383.712z"  ></path><path d="M671.968 512H512V288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128V544c0 17.76 14.272 32 32 32h191.968c17.76 0 32.128-14.24 32.128-32s-14.368-32-32.128-32z"  ></path></symbol><symbol id="icon-clone" viewBox="0 0 1024 1024"><path d="M897.71428583 881.64285753l2e-8-546.42857168q0-6.52901748-4.77120499-11.30022335t-11.30022333-4.77120497l-546.42857168 0q-6.52901748 0-11.30022335 4.77120497t-4.77120497 11.30022335l0 546.42857168q0 6.52901748 4.77120497 11.30022333t11.30022335 4.77120499l546.42857168 0q6.52901748 0 11.30022333-4.77120499t4.77120499-11.30022333z m64.28571417-546.42857168l0 546.42857168q0 33.14732167-23.60491084 56.75223251t-56.75223252 23.60491085l-546.42857167 0q-33.14732167 0-56.75223252-23.60491085t-23.60491084-56.75223251l0-546.42857168q0-33.14732167 23.60491084-56.75223252t56.75223252-23.60491084l546.42857167 0q33.14732167 0 56.75223252 23.60491084t23.60491084 56.75223252z m-192.85714247-192.85714249l0 80.35714249-64.28571417 0 0-80.35714249q0-6.52901748-4.77120498-11.30022334t-11.30022335-4.77120498l-546.42857167 0q-6.52901748 0-11.30022334 4.77120498t-4.77120498 11.30022334l0 546.42857168q0 6.52901748 4.77120498 11.30022334t11.30022334 4.77120498l80.35714247 0 0 64.28571417-80.35714247 0q-33.14732167 0-56.75223252-23.60491085t-23.60491084-56.75223251l0-546.42857168q0-33.14732167 23.60491084-56.75223252t56.75223252-23.60491084l546.42857167 0q33.14732167 0 56.75223252 23.60491084t23.60491084 56.75223252z"  ></path></symbol><symbol id="icon-jilianxuanze" viewBox="0 0 1024 1024"><path d="M128 512V224c0-16 12.8-32 32-32h384c19.2 0 32 12.8 32 32v288c0 16-12.8 32-32 32h-32v64h64c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64H128c-35.2 0-64 28.8-64 64v352c0 35.2 28.8 64 64 64h192v-64H160c-16 0-32-12.8-32-32z"  ></path><path d="M896 416H704v64h160c19.2 0 32 12.8 32 32v288c0 16-12.8 32-32 32H480c-19.2 0-32-12.8-32-32V512c0-16 12.8-32 32-32h32v-64h-64c-35.2 0-64 28.8-64 64v352c0 35.2 28.8 64 64 64h448c35.2 0 64-28.8 64-64V480c0-35.2-28.8-64-64-64z"  ></path></symbol><symbol id="icon-textarea" viewBox="0 0 1024 1024"><path d="M64.60757333 814.92195555h885.46417778V209.07804445h-885.46417778v605.8439111zM18.00419555 162.47466667h978.67093334v699.05066666H18.00419555V162.47466667z m885.46417778 466.03377778l-139.81013333 139.81013333h139.81013333V628.50844445z m-752.64455111-291.27111112v233.01688889c0 13.98101333 9.32067555 23.30168889 23.30168889 23.30168889s23.30168889-9.32067555 23.30168889-23.30168889V337.23733333c0-13.98101333-9.32067555-23.30168889-23.30168889-23.30168888s-23.30168889 9.32067555-23.30168889 23.30168888z"  ></path></symbol><symbol id="icon-clear" viewBox="0 0 1024 1024"><path d="M883.2 403.2l-147.2-44.8 57.6-224c0-6.4 0-19.2-6.4-25.6-6.4-6.4-12.8-12.8-19.2-12.8L627.2 57.6c-6.4 0-19.2 0-25.6 0C595.2 70.4 588.8 76.8 588.8 83.2L524.8 300.8 358.4 256c-6.4 0-19.2 0-25.6 0S320 275.2 320 281.6l-89.6 320C211.2 684.8 128 768 128 768c-6.4 6.4-12.8 19.2-6.4 32 0 12.8 12.8 19.2 25.6 25.6l524.8 140.8c0 0 6.4 0 6.4 0 6.4 0 19.2-6.4 25.6-12.8 6.4-6.4 83.2-89.6 115.2-179.2 32-83.2 89.6-326.4 89.6-332.8C908.8 422.4 896 409.6 883.2 403.2zM755.2 748.8c-25.6 57.6-70.4 115.2-89.6 147.2l-70.4-19.2c32-38.4 70.4-96 89.6-160 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 70.4-76.8 134.4-96 153.6l-57.6-12.8c32-38.4 70.4-96 83.2-153.6 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 64-70.4 128-89.6 153.6l-64-19.2c32-38.4 70.4-96 89.6-153.6 6.4-19.2-6.4-32-25.6-38.4C384 608 364.8 620.8 364.8 633.6c-19.2 64-70.4 128-96 153.6l-57.6-19.2c32-38.4 70.4-96 83.2-153.6l76.8-294.4 166.4 44.8c6.4 0 19.2 0 25.6 0C569.6 364.8 576 358.4 582.4 352L640 128l83.2 19.2-57.6 224c-6.4 19.2 6.4 32 19.2 38.4L832 454.4C819.2 524.8 780.8 691.2 755.2 748.8z"  ></path><path d="M364.8 473.6C364.8 492.8 371.2 505.6 390.4 512l339.2 96c0 0 6.4 0 6.4 0 12.8 0 25.6-6.4 32-25.6 6.4-19.2-6.4-32-19.2-38.4L409.6 448C390.4 448 371.2 454.4 364.8 473.6z"  ></path></symbol><symbol id="icon-table" viewBox="0 0 1024 1024"><path d="M928.229 784.149c0 44.024-36.02 80.044-80.044 80.044L175.815 864.193c-44.024 0-80.044-36.02-80.044-80.044L95.771 239.851c0-44.024 36.02-80.044 80.044-80.044l672.369 0c44.024 0 80.044 36.02 80.044 80.044L928.228 784.149zM351.912 303.886c0-9.005-7.004-16.009-16.009-16.009L175.815 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 303.886zM351.912 495.991c0-9.005-7.004-16.009-16.009-16.009L175.815 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 495.991zM351.912 688.097c0-9.005-7.004-16.009-16.009-16.009L175.815 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L351.912 688.097zM608.053 303.886c0-9.005-7.004-16.009-16.009-16.009L431.956 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 303.886zM608.053 495.991c0-9.005-7.004-16.009-16.009-16.009L431.956 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 495.991zM608.053 688.097c0-9.005-7.004-16.009-16.009-16.009L431.956 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L608.053 688.097zM864.193 303.886c0-9.005-7.004-16.009-16.009-16.009L688.097 287.877c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 303.886zM864.193 495.991c0-9.005-7.004-16.009-16.009-16.009L688.097 479.982c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 495.991zM864.193 688.097c0-9.005-7.004-16.009-16.009-16.009L688.097 672.088c-9.005 0-16.009 7.004-16.009 16.009l0 96.053c0 9.005 7.004 16.009 16.009 16.009l160.088 0c9.005 0 16.009-7.004 16.009-16.009L864.194 688.097z"  ></path></symbol><symbol id="icon-depart" viewBox="0 0 1024 1024"><path d="M916.23451733 477.51649173L547.318336 477.51649173 547.318336 255.34498133 696.308 255.34498133 696.308 34.66668053 331.7635616 34.66668053 331.7635616 255.34498133 478.22732907 255.34498133 478.22732907 477.51649173 108.1573568 477.51649173 108.1573568 534.23985493 108.1573568 551.07119467 108.1573568 771.74949653 34.4369952 771.74949653 34.4369952 989.33331947 254.03822507 989.33331947 254.03822507 771.74949653 181.86461973 771.74949653 181.86461973 551.07119467 478.22732907 551.07119467 478.22732907 771.74949653 402.9722176 771.74949653 402.9722176 989.33331947 622.57344747 989.33331947 622.57344747 771.74949653 547.318336 771.74949653 547.318336 551.07119467 842.90712107 551.07119467 842.90712107 771.74949653 769.98797333 771.74949653 769.98797333 989.33331947 989.5619136 989.33331947 989.5619136 771.74949653 916.23451733 771.74949653Z"  ></path></symbol></svg>',function(l){var c=(c=document.getElementsByTagName("script"))[c.length-1],h=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var a,t,o,z,i,v=function(c,h){h.parentNode.insertBefore(c,h)};if(h&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}a=function(){var c,h=document.createElement("div");h.innerHTML=l._iconfont_svg_string_3814468,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(c=document.body).firstChild?v(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(o=a,z=l.document,i=!1,m(),z.onreadystatechange=function(){"complete"==z.readyState&&(z.onreadystatechange=null,s())})}function s(){i||(i=!0,o())}function m(){try{z.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}s()}}(window);
\ No newline at end of file
diff --git a/src/assets/icons/js/iconfont2.js b/src/assets/icons/js/iconfont2.js
new file mode 100644
index 0000000..b098acf
--- /dev/null
+++ b/src/assets/icons/js/iconfont2.js
@@ -0,0 +1 @@
+!function(c){var a,t,e,i,l,n,o='<svg><symbol id="icon-qiyeweixin1" viewBox="0 0 1024 1024"><path d="M666.058853 824.864557c-72.996863 29.198745-145.993727 36.498432-226.290276 29.198745-36.498432-7.299686-65.697177-7.299686-102.195609-21.899059-7.299686 0-7.299686 0-14.599373 7.299686-43.798118 21.899059-87.596236 43.798118-124.094668 65.697177-14.599373 7.299686-29.198745 7.299686-43.798118 0-14.599373-7.299686-14.599373-21.899059-14.599372-43.798118 7.299686-36.498432 7.299686-65.697177 14.599372-102.195608 0-7.299686-7.299686-7.299686-7.299686-14.599373C96.683319 700.769889 60.184887 649.672084 30.986141 583.974907c-51.097804-116.794981-36.498432-233.589963 29.198746-335.785571C125.882064 131.394354 235.377359 72.996863 359.472027 43.798118s248.189336-14.599373 364.984317 43.798118c109.495295 51.097804 182.492159 131.394354 218.99059 248.189336 7.299686 43.798118 14.599373 87.596236 7.299686 131.394354-43.798118 328.485885-313.886513 343.085258-284.687767 357.684631z" fill="#666666" ></path><path d="M602.405588 761.211292l138.694041-138.694041c29.198745-29.198745 72.996863-29.198745 102.195609 0l138.69404 138.694041c29.198745 29.198745 29.198745 72.996863 0 102.195608l-138.69404 138.694041c-29.198745 29.198745-72.996863 29.198745-102.195609 0l-138.694041-138.694041c-29.198745-29.198745-29.198745-72.996863 0-102.195608z" fill="#FFFFFF" ></path><path d="M573.206843 746.611919z m131.394354-153.293413c21.899059 21.899059 14.599373 51.097804-7.299686 65.697177-21.899059 29.198745-43.798118 58.397491-51.097805 87.596236v14.599373c0 7.299686 0 14.599373-7.299686 21.899059-14.599373 51.097804-58.397491 72.996863-109.495295 65.697177-51.097804-7.299686-94.895922-51.097804-94.895923-102.195609s29.198745-87.596236 80.29655-102.195609c43.798118-7.299686 72.996863-29.198745 102.195609-51.097804 36.498432-29.198745 72.996863-36.498432 87.596236 0z" fill="#666666" ></path><path d="M544.008098 885.30596h-21.899059c-72.996863-7.299686-124.094668-72.996863-124.094668-138.694041 0-65.697177 43.798118-124.094668 109.495295-138.69404 43.798118-14.599373 65.697177-21.899059 94.895922-51.097805 21.899059-21.899059 51.097804-29.198745 80.29655-29.198745 21.899059 7.299686 36.498432 21.899059 51.097804 43.798118 29.198745 36.498432 21.899059 87.596236-14.599372 116.794981-14.599373 21.899059-29.198745 36.498432-36.498432 65.697177v14.599373c0 14.599373-7.299686 21.899059-7.299686 29.198745-21.899059 58.397491-72.996863 87.596236-131.394354 87.596237z m124.094667-284.687768c-7.299686 0-7.299686 0-14.599372 7.299687-36.498432 36.498432-72.996863 58.397491-124.094668 65.697177-36.498432 14.599373-58.397491 36.498432-58.397491 72.996863s21.899059 65.697177 58.397491 65.697177c36.498432 7.299686 58.397491-14.599373 72.996863-43.798118v-7.299686V739.312233c7.299686-43.798118 29.198745-72.996863 58.397491-102.195609 7.299686-7.299686 14.599373-14.599373 7.299686-21.899059 7.299686-14.599373 0-14.599373 0-14.599373z" fill="#FFFFFF" ></path><path d="M850.594924 556.820074c14.599373 29.198745 21.899059 51.097804 36.498432 65.697177 21.899059 21.899059 29.198745 51.097804 7.299686 72.996864-14.599373 29.198745-51.097804 21.899059-80.29655 0-14.599373-21.899059-43.798118-43.798118-80.29655-51.097805H711.900883c-36.498432-14.599373-65.697177-29.198745-72.996863-65.697177-14.599373-36.498432-7.299686-80.29655 21.899059-102.195609 21.899059-36.498432 58.397491-51.097804 109.495295-36.498431 36.498432 14.599373 65.697177 43.798118 72.996864 87.596236 0 7.299686 0 14.599373 7.299686 29.198745z" fill="#666666" ></path><path d="M857.89461 753.911605c-21.899059 0-43.798118-14.599373-65.697177-36.498431-14.599373-14.599373-36.498432-29.198745-65.697177-36.498432h-14.599373c-58.397491-14.599373-94.895922-51.097804-102.195608-87.596236-21.899059-58.397491-14.599373-109.495295 21.899059-145.993727 36.498432-43.798118 80.29655-58.397491 145.993726-43.798118 58.397491 21.899059 87.596236 58.397491 102.195609 116.794981 0 7.299686 0 7.299686 7.299687 21.899059 7.299686 29.198745 14.599373 43.798118 29.198745 51.097805 36.498432 36.498432 36.498432 87.596236 14.599373 124.094668-14.599373 14.599373-36.498432 29.198745-58.397491 29.198745-7.299686 7.299686-7.299686 7.299686-14.599373 7.299686z m-131.394354-145.993726c7.299686 0 14.599373 0 21.899059 7.299686 36.498432 7.299686 72.996863 29.198745 94.895923 58.397491 7.299686 0 14.599373 7.299686 21.899059 7.299686 0 0 7.299686 0 7.299686-7.299686 0-14.599373 0-21.899059-7.299686-29.198746-14.599373-14.599373-29.198745-36.498432-51.097805-72.996863v-7.299687c-7.299686-14.599373-7.299686-21.899059-7.299686-36.498431-7.299686-29.198745-21.899059-43.798118-51.097805-58.397491-29.198745 0-51.097804 7.299686-72.996863 29.198745-21.899059 21.899059-14.599373 51.097804-7.299686 72.996864v7.299686c0 21.899059 21.899059 29.198745 43.798118 29.198746h7.299686z" fill="#FFFFFF" ></path><path d="M989.288964 732.012546c0 36.498432-21.899059 58.397491-51.097804 65.697177-51.097804 14.599373-94.895922 29.198745-131.394354 65.697177-7.299686 7.299686-14.599373 7.299686-21.899059 7.299687-7.299686-7.299686-7.299686-14.599373 0-29.198746 36.498432-29.198745 58.397491-80.29655 65.697177-124.094667 7.299686-36.498432 36.498432-51.097804 72.996863-51.097805 36.498432 7.299686 65.697177 36.498432 65.697177 65.697177z" fill="#666666" ></path><path d="M733.799942 1002.100941c-36.498432 0-65.697177-21.899059-65.697177-51.097804-7.299686-51.097804-29.198745-94.895922-65.697177-124.094668-7.299686 0-7.299686-7.299686-7.299686-14.599373 7.299686-14.599373 14.599373-14.599373 21.899059-7.299686l21.899059 21.899059c29.198745 14.599373 65.697177 29.198745 102.195609 36.498431 36.498432 7.299686 58.397491 36.498432 51.097804 72.996864 7.299686 36.498432-21.899059 65.697177-58.397491 65.697177z" fill="#666666" ></path><path d="M471.011234 746.611919c0-36.498432 21.899059-58.397491 51.097805-65.697177 58.397491-14.599373 94.895922-36.498432 131.394354-72.996863 7.299686-7.299686 21.899059-7.299686 21.899059 0 7.299686 7.299686 7.299686 14.599373-7.299687 21.899059-29.198745 36.498432-43.798118 72.996863-58.39749 116.794981 0 7.299686 0 14.599373-7.299687 21.899059-7.299686 36.498432-36.498432 51.097804-72.996863 51.097804-29.198745-7.299686-58.397491-36.498432-58.397491-72.996863z" fill="#666666" ></path></symbol><symbol id="icon-qiyeweixin2" viewBox="0 0 1536 1024"><path d="M1126.4 51.2H409.6c-56.32 0-102.4 46.08-102.4 102.4v716.8c0 56.32 46.08 102.4 102.4 102.4h716.8c56.32 0 102.4-46.08 102.4-102.4V153.6c0-56.32-46.08-102.4-102.4-102.4z m-149.504 484.864c6.656 37.376 39.936 60.416 33.28 67.072-6.656 6.656-29.696-27.136-67.584-33.28-8.704-1.536-17.408-3.584-24.064-10.24-13.312-13.312-13.312-34.816 0-48.128s34.816-13.312 48.128 0c6.656 7.168 8.704 15.872 10.24 24.576zM713.216 696.32c-26.112 0-51.2-3.584-74.24-9.728-35.328 16.384-64 50.688-92.16 31.744-27.136-18.432-13.824-46.08-7.68-82.432-48.128-40.448-78.336-96.768-78.336-159.232 0-121.344 113.152-219.648 252.416-219.648 139.776 0 252.416 98.304 252.416 219.648v2.048c-12.288-2.56-25.088-4.096-37.888-5.12-2.048-98.816-97.28-178.176-214.528-178.176-118.272 0-214.528 81.408-214.528 181.248 0 57.856 31.744 109.568 81.92 142.336l-13.824 68.096 68.608-41.472c24.064 8.192 50.688 12.288 77.824 12.288 24.064 0 47.616-3.584 69.12-9.728 3.072 6.144 6.144 12.288 9.728 18.432 3.072 5.12 6.144 10.24 9.728 15.36-27.136 9.216-57.344 14.336-88.576 14.336z m106.496-37.888a33.9968 33.9968 0 0 1 0-48.128c6.656-6.656 15.36-8.704 24.064-10.24 37.376-6.656 60.416-39.936 67.072-33.28 6.656 6.656-27.136 29.696-33.28 67.584-1.536 8.704-3.584 17.408-10.24 24.064-12.288 13.312-34.304 13.312-47.616 0z m146.944 98.816a33.9968 33.9968 0 0 1-48.128 0c-6.656-6.656-8.704-15.36-10.24-24.064-6.656-37.376-39.936-60.416-33.28-67.072 6.656-6.656 29.696 27.136 67.584 33.28 8.704 1.536 17.408 3.584 24.064 10.24 13.312 12.8 13.312 34.304 0 47.616z m98.304-98.816c-6.656 6.656-15.36 8.704-24.064 10.24-37.376 6.656-60.416 39.936-67.072 33.28-6.656-6.656 27.136-29.696 33.28-67.584 1.536-8.704 3.584-17.408 10.24-24.064 13.312-13.312 34.816-13.312 48.128 0s13.312 34.816-0.512 48.128z" fill="#323232" ></path></symbol><symbol id="icon-qiyeweixin3" viewBox="0 0 1024 1024"><path d="M210.823529 30.117647h602.352942a180.705882 180.705882 0 0 1 180.705882 180.705882v602.352942a180.705882 180.705882 0 0 1-180.705882 180.705882H210.823529a180.705882 180.705882 0 0 1-180.705882-180.705882v-602.352942a180.705882 180.705882 0 0 1 180.705882-180.705882z m452.246589 685.598118a10.541176 10.541176 0 0 0 1.325176 16.203294c23.250824 21.443765 38.249412 50.356706 42.465882 81.679059a44.935529 44.935529 0 0 0 55.115295 31.081411 44.212706 44.212706 0 0 0 31.442823-54.39247 44.694588 44.694588 0 0 0-38.550588-32.346353 138.24 138.24 0 0 1-76.619294-42.164706 10.842353 10.842353 0 0 0-15.179294 0zM425.622588 207.691294c-80.414118 8.734118-153.359059 42.706824-205.763764 95.774118-20.419765 20.359529-37.345882 43.911529-50.296471 69.692235a240.158118 240.158118 0 0 0 17.347765 245.278118c14.275765 21.202824 37.586824 47.706353 59.030588 66.56l-9.758118 75.053176-1.024 3.132235c-0.301176 0.963765-0.301176 2.048-0.421647 2.95153l-0.240941 2.409412 0.240941 2.409411a24.576 24.576 0 0 0 36.803765 18.672942h0.421647l1.445647-1.084236 23.130353-11.444706 68.909176-34.153411c32.768 9.276235 66.680471 13.854118 100.773647 13.613176 42.164706 0.120471 83.907765-7.047529 123.602824-21.202823a44.152471 44.152471 0 0 1-30.479059-46.260706c-41.020235 13.010824-84.329412 17.227294-127.09647 12.468706l-6.866824-0.90353a312.139294 312.139294 0 0 1-45.658353-9.396706 31.503059 31.503059 0 0 0-24.455529 2.469647l-1.867294 0.963765-56.741647 32.888471-2.409412 1.445647c-1.385412 0.783059-2.048 1.024-2.710588 1.024a3.855059 3.855059 0 0 1-3.614118-3.97553l2.16847-8.613647 2.529883-9.396706 4.035765-15.540706 4.698352-17.227294a23.311059 23.311059 0 0 0-8.613647-26.081882c-22.287059-16.263529-41.562353-36.141176-57.223529-58.849882a189.199059 189.199059 0 0 1-13.974588-193.355294c10.480941-20.540235 24.094118-39.333647 40.357647-55.657412 42.947765-43.791059 103.424-71.619765 170.285176-78.787765a322.379294 322.379294 0 0 1 69.632 0c66.499765 7.529412 126.674824 35.779765 169.381647 79.269647 16.263529 16.504471 29.696 35.358118 39.936 56.018824 13.131294 26.081882 19.998118 54.934588 20.058353 84.148706 0 3.011765-0.301176 6.083765-0.481882 9.035294a45.176471 45.176471 0 0 1 55.115294 6.384941l1.987765 2.409412a238.953412 238.953412 0 0 0-24.45553-125.711059 270.576941 270.576941 0 0 0-49.694117-69.752471 339.124706 339.124706 0 0 0-204.980706-96.37647 383.397647 383.397647 0 0 0-83.064471-0.301177z m439.898353 426.405647a44.935529 44.935529 0 0 0-20.178823 11.504941h-0.120471a43.851294 43.851294 0 0 0-12.890353 26.624 135.529412 135.529412 0 0 1-42.586353 75.715765 10.541176 10.541176 0 0 0-0.240941 15.058824 10.842353 10.842353 0 0 0 16.624941-1.566118c21.925647-23.009882 51.2-37.827765 82.763294-41.803294a44.212706 44.212706 0 0 0 31.62353-54.332235 44.935529 44.935529 0 0 0-54.994824-31.201883z m-168.779294-44.15247l-0.783059 0.783058c-21.985882 23.853176-51.802353 39.213176-83.968 43.369412a43.971765 43.971765 0 0 0-19.877647 73.968941 45.296941 45.296941 0 0 0 63.488-0.12047 44.092235 44.092235 0 0 0 12.769883-26.50353c5.601882-29.274353 20.600471-55.898353 42.767058-75.776a10.541176 10.541176 0 0 0 0.783059-14.938353 10.842353 10.842353 0 0 0-15.179294-0.783058z m41.743059-80.594824a43.851294 43.851294 0 0 0-19.576471 73.968941c7.228235 7.168 16.745412 11.625412 26.864941 12.649412 29.515294 5.421176 56.380235 20.118588 76.739765 42.044235a10.842353 10.842353 0 0 0 15.179294 0.180706 10.480941 10.480941 0 0 0-1.445647-16.323765 135.348706 135.348706 0 0 1-42.526117-81.679058 44.935529 44.935529 0 0 0-55.235765-30.780236z"  ></path></symbol><symbol id="icon-qiyeweixin4" viewBox="0 0 1536 1024"><path d="M1126.4 51.2H409.6c-56.32 0-102.4 46.08-102.4 102.4v716.8c0 56.32 46.08 102.4 102.4 102.4h716.8c56.32 0 102.4-46.08 102.4-102.4V153.6c0-56.32-46.08-102.4-102.4-102.4zM976.896 536.064c6.656 37.376 39.936 60.416 33.28 67.072-6.656 6.656-29.696-27.136-67.584-33.28-8.704-1.536-17.408-3.584-24.064-10.24-13.312-13.312-13.312-34.816 0-48.128s34.816-13.312 48.128 0c6.656 7.168 8.704 15.872 10.24 24.576zM713.216 696.32c-26.112 0-51.2-3.584-74.24-9.728-35.328 16.384-64 50.688-92.16 31.744-27.136-18.432-13.824-46.08-7.68-82.432-48.128-40.448-78.336-96.768-78.336-159.232 0-121.344 113.152-219.648 252.416-219.648 139.776 0 252.416 98.304 252.416 219.648v2.048c-12.288-2.56-25.088-4.096-37.888-5.12-2.048-98.816-97.28-178.176-214.528-178.176-118.272 0-214.528 81.408-214.528 181.248 0 57.856 31.744 109.568 81.92 142.336l-13.824 68.096 68.608-41.472c24.064 8.192 50.688 12.288 77.824 12.288 24.064 0 47.616-3.584 69.12-9.728 3.072 6.144 6.144 12.288 9.728 18.432 3.072 5.12 6.144 10.24 9.728 15.36-27.136 9.216-57.344 14.336-88.576 14.336z m106.496-37.888a33.997 33.997 0 0 1 0-48.128c6.656-6.656 15.36-8.704 24.064-10.24 37.376-6.656 60.416-39.936 67.072-33.28 6.656 6.656-27.136 29.696-33.28 67.584-1.536 8.704-3.584 17.408-10.24 24.064-12.288 13.312-34.304 13.312-47.616 0z m146.944 98.816a33.997 33.997 0 0 1-48.128 0c-6.656-6.656-8.704-15.36-10.24-24.064-6.656-37.376-39.936-60.416-33.28-67.072 6.656-6.656 29.696 27.136 67.584 33.28 8.704 1.536 17.408 3.584 24.064 10.24 13.312 12.8 13.312 34.304 0 47.616z m98.304-98.816c-6.656 6.656-15.36 8.704-24.064 10.24-37.376 6.656-60.416 39.936-67.072 33.28-6.656-6.656 27.136-29.696 33.28-67.584 1.536-8.704 3.584-17.408 10.24-24.064 13.312-13.312 34.816-13.312 48.128 0s13.312 34.816-0.512 48.128z" fill="#323232" ></path></symbol><symbol id="icon-qiyeweixin5" viewBox="0 0 1221 1024"><path d="M667.329988 851.948919c-43.103404 12.930385-87.637863 20.829814-132.891031 22.26087-58.183553 2.881193-114.929689-2.862112-171.682187-16.517565-8.618137-1.437416-19.398758 0-28.016894 2.874832-43.097043 20.829814-86.919155 43.097043-130.016199 63.933217-16.523925 8.618137-31.610435 10.055553-45.971876-1.437416-13.649093-10.055553-15.086509-25.142062-13.649093-43.103404 5.743304-35.916323 10.049193-71.832646 13.649093-107.742608 0-7.187081-4.312248-17.961342-10.061913-23.711006-56.746137-56.746137-105.592845-119.241938-130.016199-198.261665-45.971876-156.589317-4.312248-290.917764 109.186386-402.985342C335.458584-56.027429 698.215354-46.684224 896.477019 163.782758c70.39523 74.707478 109.186385 163.06405 110.623801 265.782062-17.236273-7.899429-36.635031-12.211677-56.746137-12.211677h-2.874832c-67.520398 2.874832-122.11677 53.871304-130.016199 120.679354a150.159106 150.159106 0 0 0 0 35.916323c-25.142062 25.142062-56.033789 40.94728-94.106236 47.415652h-0.718708c-60.339677 12.211677-104.155429 66.801689-104.155428 127.860075 0 40.94728 18.673689 78.294658 48.846708 102.718012z" fill="#040000" ></path><path d="M950.348323 482.005068c31.610435 0 61.058385 20.829814 67.526758 53.871305 8.624497 49.571776 30.173019 92.66882 65.370633 128.585143 4.312248 4.312248 1.437416 16.523925 2.874833 23.704645-8.624497 0-19.398758 2.874832-23.704646-1.437416-35.916323-37.353739-80.457143-56.746137-130.022559-67.520397-33.041491-7.187081-55.30872-40.228571-51.002833-73.270062 5.030957-35.916323 33.047851-62.495801 68.964174-63.933218z m267.225838 268.656895c0 34.478907-20.829814 62.495801-55.31508 68.957813-47.409292 8.624497-89.787627 30.173019-123.547826 63.933218-7.187081 7.187081-17.961342 13.649093-25.142062 2.874832-2.874832-5.749665-1.437416-19.398758 2.868472-23.704646 34.485267-35.916323 55.315081-76.144894 63.933217-125.71031 7.187081-35.916323 40.228571-59.620969 74.707478-55.308721 35.916323 4.305888 62.495801 33.041491 62.495801 68.957814z m-198.261664 198.261664a69.587478 69.587478 0 0 1-59.620969 68.957814c-33.041491 4.312248-67.520398-16.523925-74.707478-49.565416-10.055553-51.002832-31.610435-95.537292-68.957814-132.891031-4.312248-4.312248-1.437416-13.649093-2.874832-20.829814 7.187081 0 19.398758-2.874832 22.26723 0 37.353739 37.353739 83.325615 58.183553 134.328447 70.39523 31.610435 5.749665 48.128 34.478907 49.565416 63.933217z m-336.177292-199.69908c0-30.166658 22.26087-58.183553 52.433888-63.933218 49.565416-8.618137 92.66882-30.166658 128.585143-65.364273 4.305888-4.312248 15.086509-2.874832 22.26723-2.874832-1.437416 7.187081 1.437416 17.954981-2.874832 22.267229-35.916323 35.916323-55.30872 79.019727-65.364274 128.585143-7.187081 35.916323-40.228571 56.746137-74.707478 50.996472-34.478907-5.743304-60.339677-35.916323-60.339677-69.676521z" fill="#040000" ></path></symbol><symbol id="icon-qiyeweixin6" viewBox="0 0 1221 1024"><path d="M667.329988 851.948919c-43.103404 12.930385-87.637863 20.829814-132.891031 22.26087-58.183553 2.881193-114.929689-2.862112-171.682187-16.517565-8.618137-1.437416-19.398758 0-28.016894 2.874832-43.097043 20.829814-86.919155 43.097043-130.016199 63.933217-16.523925 8.618137-31.610435 10.055553-45.971876-1.437416-13.649093-10.055553-15.086509-25.142062-13.649093-43.103404 5.743304-35.916323 10.049193-71.832646 13.649093-107.742608 0-7.187081-4.312248-17.961342-10.061913-23.711006-56.746137-56.746137-105.592845-119.241938-130.016199-198.261665-45.971876-156.589317-4.312248-290.917764 109.186386-402.985342C335.458584-56.027429 698.215354-46.684224 896.477019 163.782758c70.39523 74.707478 109.186385 163.06405 110.623801 265.782062-17.236273-7.899429-36.635031-12.211677-56.746137-12.211677h-2.874832c-67.520398 2.874832-122.11677 53.871304-130.016199 120.679354a150.159106 150.159106 0 0 0 0 35.916323c-25.142062 25.142062-56.033789 40.94728-94.106236 47.415652h-0.718708c-60.339677 12.211677-104.155429 66.801689-104.155428 127.860075 0 40.94728 18.673689 78.294658 48.846708 102.718012z" fill="#040000" ></path><path d="M950.348323 482.005068c31.610435 0 61.058385 20.829814 67.526758 53.871305 8.624497 49.571776 30.173019 92.66882 65.370633 128.585143 4.312248 4.312248 1.437416 16.523925 2.874833 23.704645-8.624497 0-19.398758 2.874832-23.704646-1.437416-35.916323-37.353739-80.457143-56.746137-130.022559-67.520397-33.041491-7.187081-55.30872-40.228571-51.002833-73.270062 5.030957-35.916323 33.047851-62.495801 68.964174-63.933218z m267.225838 268.656895c0 34.478907-20.829814 62.495801-55.31508 68.957813-47.409292 8.624497-89.787627 30.173019-123.547826 63.933218-7.187081 7.187081-17.961342 13.649093-25.142062 2.874832-2.874832-5.749665-1.437416-19.398758 2.868472-23.704646 34.485267-35.916323 55.315081-76.144894 63.933217-125.71031 7.187081-35.916323 40.228571-59.620969 74.707478-55.308721 35.916323 4.305888 62.495801 33.041491 62.495801 68.957814z m-198.261664 198.261664a69.587478 69.587478 0 0 1-59.620969 68.957814c-33.041491 4.312248-67.520398-16.523925-74.707478-49.565416-10.055553-51.002832-31.610435-95.537292-68.957814-132.891031-4.312248-4.312248-1.437416-13.649093-2.874832-20.829814 7.187081 0 19.398758-2.874832 22.26723 0 37.353739 37.353739 83.325615 58.183553 134.328447 70.39523 31.610435 5.749665 48.128 34.478907 49.565416 63.933217z m-336.177292-199.69908c0-30.166658 22.26087-58.183553 52.433888-63.933218 49.565416-8.618137 92.66882-30.166658 128.585143-65.364273 4.305888-4.312248 15.086509-2.874832 22.26723-2.874832-1.437416 7.187081 1.437416 17.954981-2.874832 22.267229-35.916323 35.916323-55.30872 79.019727-65.364274 128.585143-7.187081 35.916323-40.228571 56.746137-74.707478 50.996472-34.478907-5.743304-60.339677-35.916323-60.339677-69.676521z" fill="#040000" ></path></symbol><symbol id="icon-qiyeweixin7" viewBox="0 0 1024 1024"><path d="M512 0c283.10528 0 512 228.89472 512 512s-228.89472 512-512 512S0 795.10528 0 512 228.89472 0 512 0z m122.88 680.96c4.0448 15.49824 11.96544 29.58336 22.93248 40.8064a110.8224 110.8224 0 0 1 14.01856 37.23776c0 16.06144 9.216 30.54592 23.36256 36.68992 14.14144 6.144 30.4128 2.74944 41.2416-8.60672 10.82368-11.35616 14.05952-28.4416 8.20224-43.27936-5.85728-14.84288-19.6608-24.51456-34.96448-24.51456a123.68896 123.68896 0 0 1-41.04192-18.83136v0.23552c-8.71936-10.496-20.65408-17.47456-33.75104-19.7376zM446.0544 225.28C287.36512 225.28 158.72 333.48608 158.72 467.00032c1.9456 76.30336 41.96864 146.6368 106.752 187.5968l-17.67936 70.76864a21.89824 21.89824 0 0 0 7.6288 22.43584 21.90848 21.90848 0 0 0 23.65952 2.4576l98.79552-49.03424a331.86304 331.86304 0 0 0 68.18304 7.47008 337.93024 337.93024 0 0 0 75.89888-8.81664 194.0992 194.0992 0 0 1-8.0128-43.17696 281.7536 281.7536 0 0 1-101.65248 5.80096c-5.4528-0.64512-10.752-1.6128-16.05632-2.54976-8.30976-1.408-16.68096-2.72384-24.63232-4.77696l-54.4512 27.06944c-3.97824-1.66912-7.75168-3.60448-11.63776-5.42208l10.78272-42.79296a245.8624 245.8624 0 0 1-26.5216-16.93184c-52.18304-32.62976-84.7104-88.84736-86.8608-150.09792 0-109.0816 109.0816-197.7856 243.1488-197.7856 125.83936 0 229.84704 78.24384 241.83808 178.10432a190.03392 190.03392 0 0 1 23.36768-2.28352 194.5088 194.5088 0 0 1 20.8896 2.048C720.13824 322.93888 596.736 225.28 446.0544 225.28z m379.19232 373.76c-22.0416 0.06656-39.86432 19.24096-39.81312 42.84416a149.06368 149.06368 0 0 1-18.54464 46.6432c-10.40896 10.04544-17.30048 23.6288-19.36896 38.51264 15.52384-4.736 29.58336-13.83424 40.72448-26.34752a103.74656 103.74656 0 0 1 37.25824-16.14848c22.0416-0.08704 39.84896-19.28704 39.77728-42.89024-0.07168-23.6032-17.99168-42.6752-40.03328-42.61376zM670.72 568.32c-14.848 4.1472-28.30848 12.13952-38.96832 23.1424a103.70048 103.70048 0 0 1-35.6352 14.21824c-21.07392 0.0768-38.09792 16.9728-38.03648 37.74976 0.06144 20.77696 17.18784 37.57568 38.26176 37.5296 21.07392-0.04608 38.12352-16.91648 38.0928-37.69344a125.55264 125.55264 0 0 1 17.73568-41.09824A56.84224 56.84224 0 0 0 670.72 568.32z m51.82464-78.88896c-15.39072-6.15936-33.1008-2.75456-44.88192 8.61696-11.776 11.37664-15.29856 28.48256-8.92416 43.34592 6.3744 14.86336 21.39136 24.55552 38.0416 24.55552a140.55424 140.55424 0 0 1 44.78976 18.67776h0.11776c9.5488 10.43456 22.5536 17.33632 36.79232 19.5328a89.99424 89.99424 0 0 0-25.1392-40.74496 106.32192 106.32192 0 0 1-15.37536-37.24288c0-16.08704-10.0352-30.58688-25.4208-36.74112z"  ></path></symbol><symbol id="icon-qiyeweixin" viewBox="0 0 1228 1024"><path d="M1045.84 747.027a153.563 153.563 0 0 0-53.156 21.515 129.094 129.094 0 0 1-58.092 35.1c2.953-19.828 12.783-37.926 27.633-51.3a191.186 191.186 0 0 0 26.452-62.142 56.953 56.953 0 1 1 57.164 56.827zM941.639 610.634a190.814 190.814 0 0 0-61.932-26.747 56.953 56.953 0 1 1 56.953-56.953 155.266 155.266 0 0 0 21.263 53.325 129.666 129.666 0 0 1 34.762 58.346 85.978 85.978 0 0 1-50.878-27.97h-0.21z m-93.826-200.728c-17.17-143.817-166.092-256.5-346.274-256.5-191.954 0-348.132 127.744-348.132 284.85a266.33 266.33 0 0 0 124.369 216.169 351.762 351.762 0 0 0 37.969 24.384l-15.44 61.636c5.568 2.616 10.968 5.4 16.663 7.805l77.963-38.981c11.39 2.953 23.372 4.851 35.268 6.876 7.594 1.35 15.188 2.742 22.993 3.67a401.119 401.119 0 0 0 145.547-8.353 281.011 281.011 0 0 0 11.474 62.185 481.153 481.153 0 0 1-108.675 12.698 472.5 472.5 0 0 1-97.621-10.758L262.46 846.21a31.219 31.219 0 0 1-33.877-3.543 31.64 31.64 0 0 1-10.926-32.316l25.312-101.925A330.075 330.075 0 0 1 90.125 438.256c0-192.29 184.19-348.131 411.413-348.131 215.746 0 392.428 140.653 409.64 319.444a276.919 276.919 0 0 0-29.91-2.953c-11.18 0.422-22.36 1.476-33.456 3.248zM716.399 634.47c18.943-3.797 36.957-11.053 53.157-21.515a129.094 129.094 0 0 1 58.134-35.016 86.358 86.358 0 0 1-27.675 51.216c-12.445 18.984-21.389 40.078-26.451 62.184a56.953 56.953 0 1 1-57.165-56.869z m102.6 137.025c18.816 12.614 39.741 21.727 61.763 27a56.953 56.953 0 1 1-56.953 56.953 154.406 154.406 0 0 0-21.094-53.409 129.558 129.558 0 0 1-34.51-58.514 85.888 85.888 0 0 1 50.794 28.308v-0.338z"  ></path></symbol><symbol id="icon-xingzhuang" viewBox="0 0 1024 1024"><path d="M700.8256 701.2864c26.88 26.9312 59.392 43.1104 95.4368 53.248l12.1344 3.1232c25.2928 4.608 38.5536 27.648 39.68 51.2 0 27.648-20.1216 51.2-47.7696 55.2448-26.4192 3.4304-54.0672-13.2608-59.8016-39.7312-8.0384-40.8064-25.344-76.4928-55.2448-106.3936-3.4304-3.4816-1.1264-10.9568-2.304-16.6912l13.4656-1.024c2.048 0 3.584 0.256 4.4032 1.024z m48.896-521.216c56.32 59.8016 87.4496 130.56 88.576 212.8384a109.2096 109.2096 0 0 0-45.4656-9.728h-2.304a109.2096 109.2096 0 0 0-104.0896 96.6144 120.2688 120.2688 0 0 0 0 28.7744c-20.1728 20.1216-44.9024 32.768-75.3664 37.9392h-0.6144a105.1648 105.1648 0 0 0-44.288 184.6784 416.3584 416.3584 0 0 1-106.4448 17.8688 481.3824 481.3824 0 0 1-137.472-13.2608 50.0224 50.0224 0 0 0-22.4256 2.304l-104.1408 51.2c-13.2608 6.912-25.344 8.0384-36.864-1.1264-10.9056-8.0896-12.032-20.1728-10.9056-34.56 4.608-28.7232 8.0896-57.4976 10.9568-86.272a31.1296 31.1296 0 0 0-8.0896-18.944c-45.4144-45.5168-84.5312-95.5392-104.0896-158.8224-36.864-125.44-3.4816-232.96 87.4496-322.7648C300.3904 3.9936 590.848 11.4688 749.7216 180.0704z m207.104 414.7712c28.7744 3.4816 50.0224 26.4704 50.0224 55.2448 0 27.648-16.6912 50.0224-44.288 55.2448-33.792 6.144-64.3072 20.48-89.7024 42.496l-9.216 8.704c-5.7856 5.7344-14.3872 10.9056-20.1728 2.304-2.304-4.608-1.1264-15.5648 2.304-18.9952a186.0096 186.0096 0 0 0 51.2-100.7104 54.784 54.784 0 0 1 59.8528-44.288z m-215.1936-51.7632c-1.1264 5.7344 1.1776 14.336-2.304 17.8176-28.7232 28.7744-44.288 63.2832-52.3264 103.0144-5.7856 28.7232-32.256 45.4144-59.8528 40.8064-27.648-4.608-48.3328-28.7744-48.3328-55.808 0-24.1664 17.8688-46.592 41.984-51.2a190.4128 190.4128 0 0 0 103.0144-52.3264c3.4304-3.4816 12.0832-2.304 17.8176-2.304z m51.2-108.1856c25.344 0 48.896 16.6912 54.1184 43.1616 6.8608 39.68 24.1664 74.24 52.3264 102.9632 3.4816 3.4816 1.1776 13.2608 2.304 18.9952-6.912 0-15.5136 2.304-18.944-1.1264-28.8256-29.952-64.512-45.4656-104.192-54.0672a53.6576 53.6576 0 0 1-40.8064-58.7264c3.9936-28.7232 26.4704-50.0224 55.1936-51.2z"  ></path></symbol></svg>',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss");if(d&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}function h(){l||(l=!0,e())}a=function(){var c,a,t,e;(e=document.createElement("div")).innerHTML=o,o=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",c=t,(a=document.body).firstChild?(e=c,(t=a.firstChild).parentNode.insertBefore(e,t)):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),a()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(e=a,i=c.document,l=!1,(n=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}h()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,h())})}(window);
\ No newline at end of file
diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
new file mode 100644
index 0000000..c55da4d
--- /dev/null
+++ b/src/assets/icons/lock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671872759315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29438" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M136.005284 399.993557h751.9874c35.198978 0 63.999619 28.79861 63.99962 63.999619v495.992986c0 35.198978-28.79861 63.999619-63.99962 63.999619H136.005284c-35.198978 0-63.999619-28.79861-63.999619-63.999619V463.993176c0-35.198978 28.800641-63.999619 63.999619-63.999619z" fill="#ECC45C" p-id="29439"></path><path d="M136.005284 367.993748h751.9874c35.198978 0 63.999619 28.79861 63.99962 63.999619v31.999809c0 35.198978-28.79861 63.999619-63.99962 63.99962H136.005284c-35.198978 0-63.999619-28.79861-63.999619-63.99962v-31.999809c0-35.198978 28.800641-63.999619 63.999619-63.999619z" fill="#F8D578" p-id="29440"></path><path d="M232.002682 415.993462c-39.998746 0-71.998556 14.399305-71.998556 31.99981s31.99981 31.99981 71.998556 31.999809 71.998556-14.399305 71.998556-31.999809c0.002031-17.600505-31.997778-31.99981-71.998556-31.99981z m559.992605 0c-39.998746 0-71.998556 14.399305-71.998556 31.99981s31.99981 31.99981 71.998556 31.999809 71.998556-14.399305 71.998556-31.999809S831.994033 415.993462 791.995287 415.993462zM512 655.990003c66.398488 0 119.99827 53.599783 119.99827 119.99827s-53.599783 119.99827-119.99827 119.99827-119.99827-53.599783-119.99827-119.99827 53.597751-119.99827 119.99827-119.99827z" fill="#D4B053" p-id="29441"></path><path d="M512 687.989812c48.800014 0 87.998461 39.198446 87.998461 87.998461s-39.198446 87.998461-87.998461 87.998461-87.998461-39.198446-87.998461-87.998461a87.742527 87.742527 0 0 1 87.998461-87.998461z" fill="#E4E7E7" p-id="29442"></path><path d="M512 735.987495c8.799237 0 15.999905 7.200668 15.999905 15.999905v47.999714c0 8.799237-7.200668 15.999905-15.999905 15.999905s-15.999905-7.200668-15.999905-15.999905v-47.999714c0-8.799237 7.198637-15.999905 15.999905-15.999905z" fill="#324D5B" p-id="29443"></path><path d="M512 0C326.401511 0 176.004031 150.39748 176.004031 335.993938v95.999429c0 17.600505 24.799141 31.99981 55.998651 31.999809s55.998651-14.399305 55.998651-31.999809v-95.999429c0-123.997739 99.998897-223.996636 223.996636-223.996636s223.996636 99.998897 223.996636 223.996636v95.999429c0 17.600505 24.799141 31.99981 55.998651 31.999809s55.998651-14.399305 55.998651-31.999809v-95.999429C847.993938 150.39748 697.596458 0 512 0z" fill="#E4E7E7" p-id="29444"></path><path d="M512 63.999619c-150.39748 0-271.99635 121.59887-271.99635 271.99635v127.997207c27.200041-2.4009 47.999714-15.199605 47.999714-31.999809v-95.999429c0-123.997739 99.998897-223.996636 223.996636-223.996636s223.996636 99.998897 223.996636 223.996636v95.999429c0 15.999905 20.799673 29.59891 47.999714 31.999809v-127.997207c-0.002031-150.399511-121.59887-271.99635-271.99635-271.99635z" fill="#CDCFCF" p-id="29445"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
new file mode 100644
index 0000000..e6667f0
--- /dev/null
+++ b/src/assets/icons/moon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 499.712 499.712" style="enable-background: new 0 0 499.712 499.712;" xml:space="preserve">
+<path style="fill: #FFD93B;" d="M146.88,375.528c126.272,0,228.624-102.368,228.624-228.64c0-55.952-20.16-107.136-53.52-146.88
+	C425.056,33.096,499.696,129.64,499.696,243.704c0,141.392-114.608,256-256,256c-114.064,0-210.608-74.64-243.696-177.712
+	C39.744,355.368,90.944,375.528,146.88,375.528z"/>
+<path style="fill: #F4C534;" d="M401.92,42.776c34.24,43.504,54.816,98.272,54.816,157.952c0,141.392-114.608,256-256,256
+	c-59.68,0-114.448-20.576-157.952-54.816c46.848,59.472,119.344,97.792,200.928,97.792c141.392,0,256-114.608,256-256
+	C499.712,162.12,461.392,89.64,401.92,42.776z"/>
+<g>
+	<polygon style="fill: #FFD83B;" points="128.128,99.944 154.496,153.4 213.472,161.96 170.8,203.56 180.864,262.296
+		128.128,234.568 75.376,262.296 85.44,203.56 42.768,161.96 101.744,153.4"/>
+	<polygon style="fill: #FFD83B;" points="276.864,82.84 290.528,110.552 321.104,114.984 298.976,136.552 304.208,166.984
+		276.864,152.616 249.52,166.984 254.752,136.552 232.624,114.984 263.2,110.552"/>
+</g>
+</svg>
diff --git a/src/assets/icons/reload-01.svg b/src/assets/icons/reload-01.svg
new file mode 100644
index 0000000..2f73719
--- /dev/null
+++ b/src/assets/icons/reload-01.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713356465646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5683" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M320.067666 286.437731c53.150524-53.15564 126.532835-86.077447 207.455889-86.077447 89.598644 0 172.483376 40.805358 227.39501 108.063181l-101.596909 101.603049 251.597225 0L904.918881 158.424172l-90.333378 90.361007C743.985562 166.207439 639.765919 116.493178 527.524578 116.493178c-104.055914 0-198.409862 42.322921-266.757506 110.670565-49.444109 49.455365-84.98865 112.251573-100.999298 182.862771l86.263689 0C260.052804 362.352725 285.750069 320.744072 320.067666 286.437731L320.067666 286.437731z" fill="#272636" p-id="5684"></path><path d="M734.974327 701.344393c-53.151547 53.15564-126.533858 86.083587-207.450772 86.083587-89.599667 0-172.488493-40.810474-227.402173-108.069321l101.603049-101.596909L150.122089 577.76175 150.122089 829.358975l90.333378-90.333378c70.601988 82.555228 174.820608 132.270513 287.067065 132.270513 104.055914 0 198.402699-42.306548 266.750343-110.650099 49.360198-49.397037 84.866876-112.477724 100.920504-182.883237L808.689213 577.762773C794.560424 624.99654 768.983909 667.338904 734.974327 701.344393L734.974327 701.344393z" fill="#272636" p-id="5685"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/robot.svg b/src/assets/icons/robot.svg
new file mode 100644
index 0000000..a1f035a
--- /dev/null
+++ b/src/assets/icons/robot.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="60.24px" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M972.8 742.4v192H115.2v-192H0V454.4h108.8v-192h864v192H1088v288h-115.2z m-108.8 83.2V371.2h-640v454.4h640zM659.2 96v108.8H428.8V96h230.4z m-256 582.4C358.4 678.4 320 640 320 595.2 320 550.4 358.4 512 403.2 512s83.2 38.4 83.2 83.2c0 44.8-38.4 83.2-83.2 83.2z m281.6 0c-44.8 0-83.2-38.4-83.2-83.2 0-44.8 38.4-83.2 83.2-83.2s83.2 38.4 83.2 83.2c-6.4 44.8-44.8 83.2-83.2 83.2z" /></svg>
\ No newline at end of file
diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg
new file mode 100644
index 0000000..a3997cb
--- /dev/null
+++ b/src/assets/icons/sun.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background: new 0 0 60 60;" xml:space="preserve">
+<g>
+	<path style="fill: #F0C419;" d="M30,0c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1V1C31,0.448,30.552,0,30,0z"/>
+	<path style="fill: #F0C419;" d="M30,52c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1v-6C31,52.448,30.552,52,30,52z"/>
+	<path style="fill: #F0C419;" d="M59,29h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S59.552,29,59,29z"/>
+	<path style="fill: #F0C419;" d="M8,30c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h6C7.552,31,8,30.552,8,30z"/>
+	<path style="fill: #F0C419;" d="M46.264,14.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414
+		s-1.023-0.391-1.414,0l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,14.639,46.008,14.736,46.264,14.736z"/>
+	<path style="fill: #F0C419;" d="M13.029,45.557l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C7.488,52.902,7.744,53,8,53
+		s0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414S13.42,45.166,13.029,45.557z"/>
+	<path style="fill: #F0C419;" d="M46.971,45.557c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		C51.488,52.902,51.744,53,52,53s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.971,45.557z"/>
+	<path style="fill: #F0C419;" d="M8.707,7.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L8.707,7.293z"/>
+	<path style="fill: #F0C419;" d="M50.251,21.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,20.309,50.035,20.896,50.251,21.404z"/>
+	<path style="fill: #F0C419;" d="M9.749,38.596c-0.216-0.508-0.803-0.746-1.311-0.53l-2.762,1.172
+		c-0.508,0.216-0.746,0.803-0.53,1.311c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		C9.728,39.691,9.965,39.104,9.749,38.596z"/>
+	<path style="fill: #F0C419;" d="M54.481,38.813L51.7,37.688c-0.511-0.207-1.095,0.041-1.302,0.553
+		c-0.207,0.512,0.041,1.095,0.553,1.302l2.782,1.124c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		C55.241,39.603,54.994,39.02,54.481,38.813z"/>
+	<path style="fill: #F0C419;" d="M5.519,21.188L8.3,22.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.513-0.207-1.095,0.04-1.302,0.553C4.759,20.397,5.006,20.98,5.519,21.188z"
+		/>
+	<path style="fill: #F0C419;" d="M39.907,50.781c-0.216-0.508-0.803-0.745-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311
+		l1.172,2.762c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311L39.907,50.781z"
+		/>
+	<path style="fill: #F0C419;" d="M21.014,9.829c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311l-1.172-2.762
+		c-0.215-0.509-0.802-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311l1.172,2.762C20.254,9.6,20.625,9.829,21.014,9.829z"/>
+	<path style="fill: #F0C419;" d="M21.759,50.398c-0.511-0.205-1.095,0.04-1.302,0.553l-1.124,2.782
+		c-0.207,0.512,0.041,1.095,0.553,1.302c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
+		C22.519,51.188,22.271,50.605,21.759,50.398z"/>
+	<path style="fill: #F0C419;" d="M38.615,9.675c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782c0.207-0.512-0.041-1.095-0.553-1.302
+		c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,8.3c-0.207,0.512,0.041,1.095,0.553,1.302C38.364,9.651,38.491,9.675,38.615,9.675z"
+		/>
+</g>
+<circle style="fill: #F0C419;" cx="30" cy="30" r="20"/>
+<circle style="fill: #EDE21B;" cx="30" cy="30" r="15"/>
+</svg>
diff --git a/src/assets/icons/superviseNotice.png b/src/assets/icons/superviseNotice.png
new file mode 100644
index 0000000..66ceee8
Binary files /dev/null and b/src/assets/icons/superviseNotice.png differ
diff --git a/src/assets/icons/systemNotice.png b/src/assets/icons/systemNotice.png
new file mode 100644
index 0000000..7ed5c72
Binary files /dev/null and b/src/assets/icons/systemNotice.png differ
diff --git a/src/assets/icons/test.svg b/src/assets/icons/test.svg
new file mode 100644
index 0000000..244252d
--- /dev/null
+++ b/src/assets/icons/test.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>Icon1@3x</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="系统首页" transform="translate(-419.000000, -136.000000)" fill="#0593FF">
+            <g id="1" transform="translate(234.000000, 120.000000)">
+                <g id="Total-Users">
+                    <g id="Icon1" transform="translate(185.000000, 16.000000)">
+                        <path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" opacity="0.209999993"></path>
+                        <g id="Group" transform="translate(14.000000, 18.000000)" fill-rule="nonzero">
+                            <path d="M24,6.66666667 C26.209139,6.66666667 28,8.45752767 28,10.6666667 C28,12.8758057 26.209139,14.6666667 24,14.6666667 C21.790861,14.6666667 20,12.8758057 20,10.6666667 C20,8.45752767 21.790861,6.66666667 24,6.66666667 Z M12,0 C14.9455187,0 17.3333333,2.38781467 17.3333333,5.33333333 C17.3333333,8.278852 14.9455187,10.6666667 12,10.6666667 C9.05448133,10.6666667 6.66666667,8.278852 6.66666667,5.33333333 C6.66666667,2.38781467 9.05448133,0 12,0 Z" id="Combined-Shape" opacity="0.587820871"></path>
+                            <path d="M23.4686027,16.0012776 L23.3172917,16 C27.927838,16 31.7158139,18.2931929 31.9979916,23.2 C32.0092328,23.3954741 31.9979916,24 31.2745999,24 L26.1333333,24 L26.1333333,24 C26.1333333,20.9989578 25.1418595,18.2294867 23.4686027,16.0012776 Z M11.9777884,13.3333333 C18.3616218,13.3333333 23.6065116,16.3909238 23.9972191,22.9333333 C24.0127839,23.1939654 23.9972191,24 22.9955999,24 L0.97000297,24 L0.97000297,24 C0.635616207,24 -0.027282334,23.2789066 0.000868912387,22.932274 C0.517678033,16.5686878 5.6825498,13.3333333 11.9777884,13.3333333 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/total-sales.svg b/src/assets/icons/total-sales.svg
new file mode 100644
index 0000000..eff7964
--- /dev/null
+++ b/src/assets/icons/total-sales.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.cls-1{fill:#32caf8;}.cls-2{fill:#00aaf8;opacity:0.5;}.cls-3{fill:#fff;}.cls-4{fill:#426572;}</style></defs><title>Asset 500</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/transaction.svg b/src/assets/icons/transaction.svg
new file mode 100644
index 0000000..7ba9e2f
--- /dev/null
+++ b/src/assets/icons/transaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f3aa9f;}.cls-3{fill:#e1978f;}.cls-4,.cls-6{fill:#426572;}.cls-5{fill:#e1d2d5;}.cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="cls-6" transform="translate(232.67 133.93)">%</text><path class="cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/visit-count.svg b/src/assets/icons/visit-count.svg
new file mode 100644
index 0000000..ba2a306
--- /dev/null
+++ b/src/assets/icons/visit-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.cls-1{fill:#fbc907;}.cls-2{fill:#f3a70f;}.cls-3{fill:#426572;}.cls-4,.cls-9{fill:#fff;}.cls-5{fill:#e8e8e8;}.cls-6{fill:#dadada;}.cls-7{opacity:0.1;}.cls-8{fill:#55e0ff;}.cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="cls-7"><ellipse class="cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/ai/aiflow.png b/src/assets/images/ai/aiflow.png
new file mode 100644
index 0000000..49ffd3d
Binary files /dev/null and b/src/assets/images/ai/aiflow.png differ
diff --git a/src/assets/images/ai/avatar.jpg b/src/assets/images/ai/avatar.jpg
new file mode 100644
index 0000000..9be9587
Binary files /dev/null and b/src/assets/images/ai/avatar.jpg differ
diff --git a/src/assets/images/checkcode.png b/src/assets/images/checkcode.png
new file mode 100644
index 0000000..844fa70
Binary files /dev/null and b/src/assets/images/checkcode.png differ
diff --git a/src/assets/images/cms_bpm.png b/src/assets/images/cms_bpm.png
new file mode 100644
index 0000000..afac2cf
Binary files /dev/null and b/src/assets/images/cms_bpm.png differ
diff --git a/src/assets/images/cms_oa.png b/src/assets/images/cms_oa.png
new file mode 100644
index 0000000..727d0c0
Binary files /dev/null and b/src/assets/images/cms_oa.png differ
diff --git a/src/assets/images/daiban.png b/src/assets/images/daiban.png
new file mode 100644
index 0000000..19002c1
Binary files /dev/null and b/src/assets/images/daiban.png differ
diff --git a/src/assets/images/demo.png b/src/assets/images/demo.png
new file mode 100644
index 0000000..1a45c98
Binary files /dev/null and b/src/assets/images/demo.png differ
diff --git a/src/assets/images/department.png b/src/assets/images/department.png
new file mode 100644
index 0000000..07bfac2
Binary files /dev/null and b/src/assets/images/department.png differ
diff --git a/src/assets/images/drag_cover.png b/src/assets/images/drag_cover.png
new file mode 100644
index 0000000..b95fa73
Binary files /dev/null and b/src/assets/images/drag_cover.png differ
diff --git a/src/assets/images/duban.png b/src/assets/images/duban.png
new file mode 100644
index 0000000..1597486
Binary files /dev/null and b/src/assets/images/duban.png differ
diff --git a/src/assets/images/ghb-login.svg b/src/assets/images/ghb-login.svg
new file mode 100644
index 0000000..d176d3e
--- /dev/null
+++ b/src/assets/images/ghb-login.svg
@@ -0,0 +1,20 @@
+<svg width="380" height="300" viewBox="0 0 380 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="card" x1="60" y1="70" x2="320" y2="240" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#ffffff" stop-opacity="0.95"/>
+      <stop offset="1" stop-color="#e6f0ff" stop-opacity="0.9"/>
+    </linearGradient>
+  </defs>
+  <circle cx="190" cy="150" r="130" fill="#ffffff" fill-opacity="0.08"/>
+  <circle cx="190" cy="150" r="95" fill="#ffffff" fill-opacity="0.10"/>
+  <rect x="78" y="86" width="224" height="150" rx="16" fill="url(#card)"/>
+  <rect x="78" y="86" width="224" height="34" rx="16" fill="#1677ff" fill-opacity="0.85"/>
+  <circle cx="96" cy="103" r="5" fill="#ffffff" fill-opacity="0.9"/>
+  <circle cx="112" cy="103" r="5" fill="#ffffff" fill-opacity="0.7"/>
+  <circle cx="128" cy="103" r="5" fill="#ffffff" fill-opacity="0.5"/>
+  <rect x="98" y="140" width="80" height="12" rx="6" fill="#1677ff" fill-opacity="0.5"/>
+  <rect x="98" y="162" width="184" height="9" rx="4.5" fill="#9bb8e6"/>
+  <rect x="98" y="180" width="160" height="9" rx="4.5" fill="#b9cdf0"/>
+  <rect x="98" y="198" width="120" height="9" rx="4.5" fill="#cdddf7"/>
+  <rect x="234" y="190" width="48" height="22" rx="11" fill="#1677ff"/>
+</svg>
diff --git a/src/assets/images/ghb-logo.svg b/src/assets/images/ghb-logo.svg
new file mode 100644
index 0000000..947f6c3
--- /dev/null
+++ b/src/assets/images/ghb-logo.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="ghbGrad" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1677ff"/>
+      <stop offset="1" stop-color="#0e5ed7"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#ghbGrad)"/>
+  <text x="32" y="41" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="22" font-weight="700" fill="#ffffff" text-anchor="middle" letter-spacing="0.5">TEST</text>
+</svg>
diff --git a/src/assets/images/guaz.png b/src/assets/images/guaz.png
new file mode 100644
index 0000000..7ba480f
Binary files /dev/null and b/src/assets/images/guaz.png differ
diff --git a/src/assets/images/header.jpg b/src/assets/images/header.jpg
new file mode 100644
index 0000000..977584b
Binary files /dev/null and b/src/assets/images/header.jpg differ
diff --git a/src/assets/images/link.png b/src/assets/images/link.png
new file mode 100644
index 0000000..4a0319c
Binary files /dev/null and b/src/assets/images/link.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..8072ced
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/logo_duty.png b/src/assets/images/logo_duty.png
new file mode 100644
index 0000000..8072ced
Binary files /dev/null and b/src/assets/images/logo_duty.png differ
diff --git a/src/assets/images/nodata.png b/src/assets/images/nodata.png
new file mode 100644
index 0000000..2cebdb3
Binary files /dev/null and b/src/assets/images/nodata.png differ
diff --git a/src/assets/images/panel_cover.png b/src/assets/images/panel_cover.png
new file mode 100644
index 0000000..faf0065
Binary files /dev/null and b/src/assets/images/panel_cover.png differ
diff --git a/src/assets/images/pdf4.jpg b/src/assets/images/pdf4.jpg
new file mode 100644
index 0000000..10166e0
Binary files /dev/null and b/src/assets/images/pdf4.jpg differ
diff --git a/src/assets/images/people.png b/src/assets/images/people.png
new file mode 100644
index 0000000..19ed1be
Binary files /dev/null and b/src/assets/images/people.png differ
diff --git a/src/assets/images/placeholderImage.png b/src/assets/images/placeholderImage.png
new file mode 100644
index 0000000..65fbf52
Binary files /dev/null and b/src/assets/images/placeholderImage.png differ
diff --git a/src/assets/images/process_no_form.png b/src/assets/images/process_no_form.png
new file mode 100644
index 0000000..46e3cab
Binary files /dev/null and b/src/assets/images/process_no_form.png differ
diff --git a/src/assets/images/setting.png b/src/assets/images/setting.png
new file mode 100644
index 0000000..8e2e11c
Binary files /dev/null and b/src/assets/images/setting.png differ
diff --git a/src/assets/images/template_cover.jpg b/src/assets/images/template_cover.jpg
new file mode 100644
index 0000000..ee2e502
Binary files /dev/null and b/src/assets/images/template_cover.jpg differ
diff --git a/src/assets/images/wallet.png b/src/assets/images/wallet.png
new file mode 100644
index 0000000..ec10bea
Binary files /dev/null and b/src/assets/images/wallet.png differ
diff --git a/src/assets/images/wordtpl/images/alignment.svg b/src/assets/images/wordtpl/images/alignment.svg
new file mode 100644
index 0000000..08b66e3
--- /dev/null
+++ b/src/assets/images/wordtpl/images/alignment.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2v-1zm0-3h12v1H2v-1zm0-3h12v1H2V7zm0-6h12v1H2V1zm0 3h12v1H2V4z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/arrow-left.svg b/src/assets/images/wordtpl/images/arrow-left.svg
new file mode 100644
index 0000000..b55538b
--- /dev/null
+++ b/src/assets/images/wordtpl/images/arrow-left.svg
@@ -0,0 +1 @@
+<svg width="4" height="7" xmlns="http://www.w3.org/2000/svg"><path fill="#6F6F6F" d="M0 3.5L4 0v7z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/arrow-right.svg b/src/assets/images/wordtpl/images/arrow-right.svg
new file mode 100644
index 0000000..1aadb00
--- /dev/null
+++ b/src/assets/images/wordtpl/images/arrow-right.svg
@@ -0,0 +1 @@
+<svg width="4" height="7" xmlns="http://www.w3.org/2000/svg"><path fill="#6F6F6F" d="M4 3.5L0 0v7z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/barcode.svg b/src/assets/images/wordtpl/images/barcode.svg
new file mode 100644
index 0000000..655b3ef
--- /dev/null
+++ b/src/assets/images/wordtpl/images/barcode.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729581274416" class="icon" viewBox="0 0 1229 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3284" xmlns:xlink="http://www.w3.org/1999/xlink" width="240.0390625" height="200"><path d="M814.461729 219.012428" fill="#272636" p-id="3285"></path><path d="M18.646281 1023.999972l154.377255 0L173.023535-1.3e-05 18.646281-1.3e-05 18.646281 1023.999972zM223.337993 1023.999972l72.590174 0L295.928168-1.3e-05l-72.590174 0L223.337993 1023.999972zM390.338738 1023.999972l91.366339 0L481.705076-1.3e-05l-91.366339 0L390.338738 1023.999972zM651.850748 1023.999972l157.612662 0L809.46341-1.3e-05 651.850748-1.3e-05 651.850748 1023.999972zM850.31244 1023.999972l59.979819 0L910.292259-1.3e-05l-59.979819 0L850.31244 1023.999972zM1004.780175-1.3e-05 1004.780175 1023.999972 1212.730645 1023.999972 1212.730645-1.3e-05 1004.780175-1.3e-05z" fill="#272636" p-id="3286"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/bold.svg b/src/assets/images/wordtpl/images/bold.svg
new file mode 100644
index 0000000..80728d0
--- /dev/null
+++ b/src/assets/images/wordtpl/images/bold.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8.131 6.9c2.035 0 2.569-.9 2.569-1.869 0-.968-.64-1.831-2.623-1.831H5.2v3.7h2.931zm.524 5.9c2.045 0 2.545-1.305 2.545-2.3 0-.985-.506-2.4-2.81-2.4H5.2v4.7h3.455zM4 2h4.71c2.367 0 3.19 1.583 3.19 3s-.325 1.852-1.1 2.5c1.2.5 1.569 1.379 1.6 3 .03 1.606-.586 3.5-3.769 3.5H4V2z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/catalog.svg b/src/assets/images/wordtpl/images/catalog.svg
new file mode 100644
index 0000000..90d45c2
--- /dev/null
+++ b/src/assets/images/wordtpl/images/catalog.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757"><path d="M13 0c.552 0 1 .48 1 1.071V13.93c0 .59-.448 1.07-1 1.07H3c-.552 0-1-.48-1-1.071V1.07C2 .48 2.448 0 3 0h10zm0 1H3v13h10V1z"/><path d="M5 10v1H4v-1h1zm6 0v1H6v-1h5zM5 7v1H4V7h1zm6 0v1H6V7h5zM5 4v1H4V4h1zm6 0v1H6V4h5z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/cellcolor.svg b/src/assets/images/wordtpl/images/cellcolor.svg
new file mode 100644
index 0000000..4a44be1
--- /dev/null
+++ b/src/assets/images/wordtpl/images/cellcolor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1731892090058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14313" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M799.3 630.1l19.5-18.1c0.8-0.7 1.6-1.5 2.3-2.2 13.6-14 13.6-36.9 0-50.8L346.7 72.7c-13.6-14-35.9-14-49.6 0-13.6 14-13.6 36.9 0 50.8l118.1 121.1-290.6 297.9c-24.1 24.7-24.1 65 0 89.7L417.1 932c24.1 24.7 63.4 24.7 87.5 0l292.5-299.8c0.8-0.7 1.5-1.4 2.2-2.1z m-621.5-44.8l284.9-292 284.9 292H177.8z m774 244.2l-88.6-179.4-90.2 182c-9 16-14.1 34.6-14.1 54.5 0 59.9 46.7 108.5 104.2 108.5 57.6 0 104.2-48.6 104.2-108.5 0.1-21-5.7-40.4-15.5-57.1z m0 0" p-id="14314" fill="#2c2c2c"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/center.svg b/src/assets/images/wordtpl/images/center.svg
new file mode 100644
index 0000000..28dc13c
--- /dev/null
+++ b/src/assets/images/wordtpl/images/center.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2v-1zm2-3h8v1H4v-1zM2 7h12v1H2V7zm0-6h12v1H2V1zm2 3h8v1H4V4z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/chart.svg b/src/assets/images/wordtpl/images/chart.svg
new file mode 100644
index 0000000..8705b76
--- /dev/null
+++ b/src/assets/images/wordtpl/images/chart.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723003465965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7196" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128 64H64v896h896v-64H128V64z" fill="#333333" p-id="7197"></path><path d="M480 259.2V576h278.4c-28.8 108.8-128 192-246.4 192-140.8 0-256-115.2-256-256 0-131.2 99.2-236.8 224-252.8m32-67.2c-176 0-320 144-320 320s144 320 320 320 320-144 320-320H544V192h-32z" fill="#333333" p-id="7198"></path><path d="M672 134.4c124.8 22.4 201.6 112 220.8 249.6H672V134.4M608 64v384h352c0-224-128-384-352-384z" fill="#333333" p-id="7199"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/close.svg b/src/assets/images/wordtpl/images/close.svg
new file mode 100644
index 0000000..e5b1c23
--- /dev/null
+++ b/src/assets/images/wordtpl/images/close.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8.9 8.192l4.242 4.243-.707.707L8.192 8.9 3.95 13.142l-.707-.707 4.242-4.243L3.243 3.95l.707-.707 4.242 4.242 4.243-4.242.707.707L8.9 8.192z" fill="#6A6A6A" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/color.svg b/src/assets/images/wordtpl/images/color.svg
new file mode 100644
index 0000000..2b84e88
--- /dev/null
+++ b/src/assets/images/wordtpl/images/color.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.997 3.429L6.398 8h3.2L7.997 3.429zM8.497 2L12 12h-1L9.949 9h-3.9L5 12H4L7.496 2h1z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/download.svg b/src/assets/images/wordtpl/images/download.svg
new file mode 100644
index 0000000..1c7ea4a
--- /dev/null
+++ b/src/assets/images/wordtpl/images/download.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715245280824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1321" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M838.544887 753.01171l-124.702576 0 0 116.708821 123.903201 0 0 127.900078 186.254489-186.254489-185.455113-185.455113L838.544887 753.01171 838.544887 753.01171zM838.544887 753.01171" p-id="1322"></path><path d="M783.387978 949.65808 163.0726 949.65808c-7.194379 0-12.790008-5.595628-12.790008-12.790008L150.282592 86.332553c0-7.194379 5.595628-12.790008 12.790008-12.790008L575.550351 73.542545c7.194379 0 12.790008 5.595628 12.790008 12.790008L588.340359 311.75644c0 29.576893 23.981265 54.357533 54.357533 54.357533l225.423888 0c7.194379 0 12.790008 5.595628 12.790008 12.790008L880.911788 575.550351l72.743169 73.542545L953.654957 281.380172c0-15.98751-6.395004-31.97502-17.586261-43.166276L715.441062 17.586261C703.450429 6.395004 688.262295 0 671.47541 0L138.291959 0c-33.57377 0-61.551913 27.178767-61.551913 61.551913l0 900.896175c0 33.57377 27.178767 61.551913 61.551913 61.551913l645.096019 0L783.387978 949.65808zM661.083528 101.520687c0-12.790008 15.188134-19.185012 24.78064-10.391881L863.325527 267.790788c8.79313 8.79313 2.398126 24.78064-10.391881 24.78064L675.472287 292.571429c-7.993755 0-14.388759-6.395004-14.388759-14.388759L661.083528 101.520687z" p-id="1323"></path><path d="M806.569867 438.857143 663.481655 438.857143c-7.993755 0-14.388759 6.395004-14.388759 14.388759l0 32.774395c0 7.993755 6.395004 14.388759 14.388759 14.388759l19.984387 0c8.79313 0 15.98751 7.993755 13.589383 17.586261l-52.758782 232.618267c-1.598751 7.993755-3.197502 15.98751-3.996877 26.379391l-0.799375 11.990632-2.398126 0-1.598751-11.990632c0 0 0-0.799375 0-0.799375 0-2.398126-0.799375-5.595628-2.398126-11.990632-0.799375-6.395004-2.398126-11.191257-3.197502-14.388759l-79.138173-300.565183c-1.598751-6.395004-7.194379-10.391881-13.589383-10.391881l-43.166276 0c-6.395004 0-11.990632 3.996877-13.589383 10.391881l-79.138173 300.565183c-0.799375 3.197502-1.598751 7.993755-2.398126 13.589383-0.799375 5.595628-1.598751 9.592506-2.398126 11.990632l-2.398126 11.990632L391.693989 787.384856l-0.799375-11.990632c-0.799375-9.592506-2.398126-18.385636-3.996877-26.379391l-52.758782-232.618267c-1.598751-8.79313 4.796253-17.586261 13.589383-17.586261l19.984387 0c7.993755 0 14.388759-6.395004 14.388759-14.388759l0-32.774395c0-7.993755-6.395004-14.388759-14.388759-14.388759L226.223263 437.258392c-8.79313 0-15.98751 7.194379-15.98751 15.98751l0 31.175644c0 7.993755 6.395004 14.388759 14.388759 14.388759l15.188134 0c6.395004 0 11.990632 4.796253 13.589383 10.391881l87.931304 355.722092c1.598751 6.395004 7.194379 10.391881 13.589383 10.391881L423.669009 875.316159c6.395004 0 11.990632-3.996877 13.589383-10.391881l70.345043-266.192037c2.398126-7.993755 4.796253-15.98751 5.595628-26.379391 0.799375-6.395004 0.799375-10.391881 0.799375-13.589383l2.398126 0 1.598751 12.790008c0 0.799375 0 0.799375 0 1.598751 0 1.598751 0.799375 5.595628 1.598751 10.391881 0.799375 6.395004 1.598751 11.191257 3.197502 15.188134l70.345043 266.192037c1.598751 6.395004 7.194379 10.391881 13.589383 10.391881l68.746292 0c6.395004 0 11.990632-4.796253 13.589383-10.391881l87.931304-355.722092c1.598751-6.395004 7.194379-10.391881 13.589383-10.391881l15.188134 0c7.993755 0 14.388759-6.395004 14.388759-14.388759l0-32.774395C820.958626 445.252147 814.563622 438.857143 806.569867 438.857143z" p-id="1324"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/exit-fullscreen.svg b/src/assets/images/wordtpl/images/exit-fullscreen.svg
new file mode 100644
index 0000000..7999e25
--- /dev/null
+++ b/src/assets/images/wordtpl/images/exit-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M9 9h1v4H9z"/><path d="M9 9h4v1H9zM7 7H6V3h1z"/><path d="M7 7H3V6h4z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/format.svg b/src/assets/images/wordtpl/images/format.svg
new file mode 100644
index 0000000..aae6e6b
--- /dev/null
+++ b/src/assets/images/wordtpl/images/format.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M8.213 13H6.8l6.636-6.636-4.243-4.243-7.07 7.071L5.928 13H4.515L1.06 9.546a.5.5 0 010-.707L8.839 1.06a.5.5 0 01.707 0l4.95 4.95a.5.5 0 010 .707L8.213 13z" fill-rule="nonzero"/><path d="M4.536 6.364l4.95 4.95-.707.707-4.95-4.95zM4.521 13h10.03v1H5.496z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/highlight.svg b/src/assets/images/wordtpl/images/highlight.svg
new file mode 100644
index 0000000..c4b2e8b
--- /dev/null
+++ b/src/assets/images/wordtpl/images/highlight.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M13.31 5h-1.92a2.203 2.203 0 00-.39-.034c-.135 0-.27.012-.402.034H10v.18c-.578.256-1 .714-1 1.214v1.928c0 .196.117.43.3.658v1.23a3.543 3.543 0 01-.3-.4V11H8V1h1v4.265C9 4.763 10 4 10.942 4c1.19 0 1.92.422 2.367 1zM2 6c-.03-.498-.175-2 2.5-2C7.11 4 7 5 7 6.902V11H5.984v-.993c.38.662-.115.993-1.484.993C2.708 11 2 9.931 2 9c0-1.428.447-2 2.5-2h1.484c0-1 .031-2-1.484-2-1.533 0-1.577.485-1.577 1H2zm2.5 2C3.601 8 3 7.768 3 9c0 1.31.438 1 1.5 1 .617 0 1.484-.665 1.484-1.847V8H4.5z"/><path d="M13.085 6.316l-2.814 3a1 1 0 101.458 1.368l2.815-3a1 1 0 00-1.459-1.368z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/hyperlink.svg b/src/assets/images/wordtpl/images/hyperlink.svg
new file mode 100644
index 0000000..45090f6
--- /dev/null
+++ b/src/assets/images/wordtpl/images/hyperlink.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(45 5.5 13.328)" fill="#3D4757" fill-rule="evenodd"><path d="M7 6H6V3.515a2.5 2.5 0 10-5 0V6H0V3.515a3.5 3.5 0 117 0V6zm0 4v2.5a3.5 3.5 0 01-7 0V10h1v2.5a2.5 2.5 0 105 0V10h1z" fill-rule="nonzero"/><rect x="3.062" y="5.209" width="1" height="5.5" rx=".5"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/image.svg b/src/assets/images/wordtpl/images/image.svg
new file mode 100644
index 0000000..7b43678
--- /dev/null
+++ b/src/assets/images/wordtpl/images/image.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_0-公共_x2F_02工具栏_x2F_插入图片-16px-"><g id="Group-19" transform="translate(1 1)"><path id="Combined-Shape" class="st0" d="M1 0h12c.6 0 1 .4 1 1v11c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm0 1v11h12V1H1z"/><circle id="椭圆形" class="st0" cx="10" cy="4" r="1"/><path id="Path" class="st0" d="M8.5 11.2l-4-4.1L1 10.7V9.2c1.7-1.6 2.7-2.5 3-2.8.4-.5.7-.4 1 0L8.5 10 11 7.3c.4-.5.6-.5 1-.1l2 2.8v1.5l-2.5-3.4-3 3.1z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/italic.svg b/src/assets/images/wordtpl/images/italic.svg
new file mode 100644
index 0000000..73b2af5
--- /dev/null
+++ b/src/assets/images/wordtpl/images/italic.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M10.017 3L8.08 13H9v1H6v-1h1.182L9 3H8V2h3v1h-.983z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/left.svg b/src/assets/images/wordtpl/images/left.svg
new file mode 100644
index 0000000..b41d2b2
--- /dev/null
+++ b/src/assets/images/wordtpl/images/left.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2zm0-3h8v1H2zm0-3h12v1H2zm0-6h12v1H2zm0 3h8v1H2z" fill="#3d4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-dash-dot-dot.svg b/src/assets/images/wordtpl/images/line-dash-dot-dot.svg
new file mode 100644
index 0000000..30ab5ac
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-dash-dot-dot.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h5v1H4zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2zm4 0h5v1h-5zm7 0h2v1h-2zm4 0h2v1h-2z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-dash-dot.svg b/src/assets/images/wordtpl/images/line-dash-dot.svg
new file mode 100644
index 0000000..1958671
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-dash-dot.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h6v1H4zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3zm6 0h6v1h-6zm9 0h3v1h-3z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-dash-large-gap.svg b/src/assets/images/wordtpl/images/line-dash-large-gap.svg
new file mode 100644
index 0000000..2e38e60
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-dash-large-gap.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v1H5zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4zm8 0h4v1h-4z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-dash-small-gap.svg b/src/assets/images/wordtpl/images/line-dash-small-gap.svg
new file mode 100644
index 0000000..88d6082
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-dash-small-gap.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h4v1H4zm5 0h4v1H9zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h4v1h-4zm5 0h3v1h-3z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-dot.svg b/src/assets/images/wordtpl/images/line-dot.svg
new file mode 100644
index 0000000..c08b564
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-dot.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h1v1H4zm12 0h1v1h-1zM6 10h1v1H6zm12 0h1v1h-1zM8 10h1v1H8zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm2 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm2 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm2 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm2 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1zm12 0h1v1h-1zm-10 0h1v1h-1z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-double.svg b/src/assets/images/wordtpl/images/line-double.svg
new file mode 100644
index 0000000..2efe69f
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-double.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h118v1H4zm0 3h118v1H4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-single.svg b/src/assets/images/wordtpl/images/line-single.svg
new file mode 100644
index 0000000..453d4fa
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-single.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h118v1H4z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/line-wavy.svg b/src/assets/images/wordtpl/images/line-wavy.svg
new file mode 100644
index 0000000..bc0f47c
--- /dev/null
+++ b/src/assets/images/wordtpl/images/line-wavy.svg
@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#000000" d="M4 10 Q6 8,8 10 T12 10 T16 10 T20 10 T24 10 T28 10 T32 10 T36 10 T40 10 T44 10 T48 10 T52 10 T56 10 T60 10 T64 10 T68 10 T72 10 T76 10 T80 10 T84 10 T88 10 T92 10 T96 10 T100 10 T104 10 T108 10 T112 10 T116 10 T120 10 T124 10"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/list.svg b/src/assets/images/wordtpl/images/list.svg
new file mode 100644
index 0000000..564897c
--- /dev/null
+++ b/src/assets/images/wordtpl/images/list.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#3D4757" d="M7 12h7v1H7zm0-5h7v1H7zm0-5h7v1H7zM3 4V2H2V1h2v3h1v1H2V4h1z"/><path d="M2 6h3v1H2V6zm0 3h3v1H2V9z" fill="#4F4F4F"/><path fill="#3D4757" fill-rule="nonzero" d="M4.5 6L5 7l-2.5 3L2 9z"/><path d="M4 14l-1-2H2v-1h3v1H4l1 2v1H2v-1h2z" fill="#3D4757"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/option.svg b/src/assets/images/wordtpl/images/option.svg
new file mode 100644
index 0000000..53b6cae
--- /dev/null
+++ b/src/assets/images/wordtpl/images/option.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1072.147851 406.226367c-6.331285-33.456782-26.762037-55.073399-52.047135-55.073399-0.323417 0-0.651455 0.003081-0.830105 0.009241l-4.655674 0c-73.124722 0-132.618162-59.491899-132.618162-132.618162 0-23.731152 11.447443-50.336101 11.546009-50.565574 13.104573-29.498767 3.023185-65.672257-23.427755-84.127081l-1.601687-1.127342-134.400039-74.661726-1.700252-0.745401c-8.753836-3.805547-18.334698-5.735272-28.479231-5.735272-20.789593 0-41.235746 8.344174-54.683758 22.306575-14.741683 15.216028-65.622973 58.649474-104.721083 58.649474-39.450789 0-90.633935-44.286652-105.438762-59.784516-13.518857-14.247316-34.128258-22.753199-55.127302-22.753199-9.945862 0-19.354234 1.861961-27.958682 5.531982l-1.746455 0.74078-139.141957 76.431283-1.643269 1.139662c-26.537186 18.437884-36.675557 54.579032-23.584845 84.062398 0.115506 0.264895 11.579891 26.725075 11.579891 50.634877 0 73.126262-59.491899 132.618162-132.618162 132.618162l-4.581749 0c-0.318797-0.00616-0.636055-0.01078-0.951772-0.01078-25.260456 0-45.672728 21.618157-52.002472 55.0811-0.462025 2.453354-11.313456 60.622322-11.313456 106.117939 0 45.494078 10.85143 103.659965 11.314996 106.119479 6.334365 33.458322 26.758957 55.076479 52.036353 55.076479 0.320337 0 0.651455-0.00616 0.842426-0.012321l4.655674 0c73.126262 0 132.618162 59.491899 132.618162 132.616622 0 23.760413-11.444363 50.333021-11.546009 50.565574-13.093793 29.474125-3.041666 65.646075 23.395414 84.151722l1.569346 1.093459 131.838879 73.726895 1.675611 0.7377c8.750757 3.84251 18.305437 5.790715 28.397607 5.790715 21.082208 0 41.676209-8.706094 55.0888-23.290689 18.724339-20.347588 69.527086-62.362616 107.04815-62.362616 40.625872 0 92.72537 47.100385 107.759669 63.583903 13.441852 14.831008 34.176001 23.689571 55.470741 23.695731l0.00616 0c9.895039 0 19.27877-1.883523 27.893999-5.598205l1.711034-0.73924 136.659342-75.531873 1.617088-1.128882c26.492523-18.456365 36.601633-54.600594 23.538642-84.016195-0.115506-0.267974-11.595291-27.082374-11.595291-50.67646 0-73.124722 59.49344-132.616622 132.618162-132.616622l4.517066-0.00154c0.300316 0.00616 0.599092 0.009241 0.899409 0.009241 25.331299-0.00154 45.785153-21.619697 52.107197-55.054918 0.112426-0.589852 11.325776-59.507301 11.325776-106.14104C1083.464388 466.640776 1072.609877 408.67356 1072.147851 406.226367zM377.486862 945.656142l-115.32764-64.487932c5.082277-13.052211 15.437801-43.51815 15.437801-75.017486 0-109.382917-84.176364-199.816642-192.587488-208.134635-2.647404-15.427021-8.873963-54.967133-8.873963-85.667166 0-30.65691 6.223479-70.232445 8.869343-85.671786 108.415744-8.311832 192.592108-98.745557 192.592108-208.134635 0-31.416171-10.300081-61.797405-15.371577-74.854236l122.721583-67.40331c0.003081 0 0.00462 0.00154 0.007701 0.00154 4.423121 4.518606 22.121764 22.080182 46.558275 39.493911 39.929754 28.46229 77.952885 42.894416 113.014434 42.894416 34.716571 0 72.437845-14.151831 112.115025-42.06431 24.282503-17.07953 41.896442-34.302288 46.308782-38.74543 0.009241-0.00154 0.018481-0.00462 0.026182-0.00616l118.301542 65.726159c-5.077657 13.055291-15.416239 43.499669-15.416239 74.958962 0 109.389077 84.174824 199.822802 192.590568 208.134635 2.645865 15.462442 8.872423 55.107281 8.872423 85.671786 0 30.687711-6.223479 70.241685-8.869343 85.673326C890.042174 606.334084 805.86427 696.767809 805.86427 806.158426c0 31.450053 10.317022 61.851309 15.393138 74.903519l-119.783103 66.198965c-5.168521-5.490399-22.603811-23.363073-46.740005-41.288109-40.701336-30.224145-79.662378-45.549521-115.800446-45.549521-35.79155 0-74.458435 15.038919-114.927219 44.694774C400.22004 922.554885 382.666163 940.255068 377.486862 945.656142zM731.271848 511.646647c0-105.803762-86.081448-191.88059-191.888289-191.88059-105.803762 0-191.88059 86.076827-191.88059 191.88059 0 105.803762 86.076827 191.882129 191.88059 191.882129C645.19194 703.528777 731.271848 617.450409 731.271848 511.646647zM539.383558 395.903184c63.825696 0 115.751164 51.922387 115.751164 115.743463 0 63.825696-51.925468 115.751164-115.751164 115.751164-63.821076 0-115.743463-51.925468-115.743463-115.751164C423.640095 447.824031 475.562482 395.903184 539.383558 395.903184z" fill="#000000"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/page-break.svg b/src/assets/images/wordtpl/images/page-break.svg
new file mode 100644
index 0000000..c40ec93
--- /dev/null
+++ b/src/assets/images/wordtpl/images/page-break.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:none;stroke:#3d4757}.st1{fill:#3d4757}</style><g id="_x30_1-文字_x2F_02插入_x2F_分页-16px"><path id="矩形" class="st0" d="M5.5 2.5h7c.6 0 1 .4 1 1v3c0 .6-.4 1-1 1h-7c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1z"/><path id="三角形" class="st1" d="M4 8.5L1 6v5z"/><path id="合并形状" class="st0" d="M10.8 9.5H5c-.3 0-.5.2-.5.5v4c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5v-1.8l-2.7-2.7z"/><path id="矩形_1_" class="st1" d="M10 10h1v3h-1z"/><path id="矩形-copy-2" class="st1" d="M10 12h3v1h-3z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/page-mode.svg b/src/assets/images/wordtpl/images/page-mode.svg
new file mode 100644
index 0000000..516f3a8
--- /dev/null
+++ b/src/assets/images/wordtpl/images/page-mode.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 1)"><rect stroke="#3D4757" x=".5" y=".5" width="11" height="8" rx="1"/><path fill="#3D4757" fill-rule="nonzero" d="M2 3h4v1H2zm0 2h8v1H2z"/></g><g fill="#3D4757" fill-rule="nonzero"><path d="M14 15h-1v-5H3v5H2V9h12v6z"/><path d="M4 12h4v1H4zm0 2h8v1H4z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/page-scale-add.svg b/src/assets/images/wordtpl/images/page-scale-add.svg
new file mode 100644
index 0000000..bcfa9a3
--- /dev/null
+++ b/src/assets/images/wordtpl/images/page-scale-add.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7 7V3h2v4h4v2H9v4H7V9H3V7h4z" fill="#636363" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/page-scale-minus.svg b/src/assets/images/wordtpl/images/page-scale-minus.svg
new file mode 100644
index 0000000..f85bf77
--- /dev/null
+++ b/src/assets/images/wordtpl/images/page-scale-minus.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M3 7h10v2H3z" fill="#636363" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/painter.svg b/src/assets/images/wordtpl/images/painter.svg
new file mode 100644
index 0000000..a865d1d
--- /dev/null
+++ b/src/assets/images/wordtpl/images/painter.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M7.5 2v2.5H4a.5.5 0 00-.5.5v2a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V5a.5.5 0 00-.5-.5H9.5V2a.5.5 0 00-.5-.5H8a.5.5 0 00-.5.5z" stroke="#3D4757"/><path fill="#3D4757" d="M13 7h1v4h-1z"/><path d="M11 13a2 2 0 002-2V8.764A3 3 0 118.764 13H11z" fill="#3D4757"/><path fill="#3D4757" d="M1 13h10v1H1z"/><path d="M1 13a2 2 0 002-2V8.764A3 3 0 011 14v-1z" fill="#3D4757"/><path fill="#3D4757" d="M3 7h1v4H3z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/paper-direction.svg b/src/assets/images/wordtpl/images/paper-direction.svg
new file mode 100644
index 0000000..ee90234
--- /dev/null
+++ b/src/assets/images/wordtpl/images/paper-direction.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_1-文字_x2F_04页面_x2F_纸张方向-16px"><g id="编组" transform="translate(1 1)"><path id="合并形状" class="st0" d="M14 6v7c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h9c.6 0 1 .4 1 1zm-1 0H4v7h9V6z"/><path id="路径" class="st0" d="M9 4H8V1H1v9h1v1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1h7c.6 0 1 .4 1 1v3z"/><path id="矩形" class="st0" d="M11 7h1v5h-1z"/><path id="矩形-copy-2" class="st0" d="M2 2h5v1H2z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/paper-margin.svg b/src/assets/images/wordtpl/images/paper-margin.svg
new file mode 100644
index 0000000..6188f36
--- /dev/null
+++ b/src/assets/images/wordtpl/images/paper-margin.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#3D4757" x="2.5" y="1.5" width="11" height="13" rx="1"/><path fill="#3D4757" fill-rule="nonzero" d="M3 4h10v1H3zm0 7h10v1H3z"/><path fill="#3D4757" fill-rule="nonzero" d="M5 14V2h1v12zm5 0V2h1v12z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/paper-size.svg b/src/assets/images/wordtpl/images/paper-size.svg
new file mode 100644
index 0000000..205a6aa
--- /dev/null
+++ b/src/assets/images/wordtpl/images/paper-size.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M10.793 1.5L13.5 4.207V14L3 14.5 2.5 2l8.293-.5z" stroke="#3D4757"/><path fill="#3D4757" d="M10 2h1v3h-1z"/><path fill="#3D4757" d="M10 4h3v1h-3z"/></g><path d="M7 3v1H5v2H4V3h3z" fill="#3D4757"/><path fill="#3D4757" d="M5.169 3.43l6.62 8.784-.799.602-6.62-8.785z"/><path d="M9 13v-1h2v-2h1v3H9z" fill="#3D4757"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/preview.svg b/src/assets/images/wordtpl/images/preview.svg
new file mode 100644
index 0000000..9e36cb1
--- /dev/null
+++ b/src/assets/images/wordtpl/images/preview.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715223357853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1284" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M668.7 150.3c-14.3 0-25.9-11.6-25.9-25.9s11.6-25.9 25.9-25.9h151.4c59.6 0 107.9 48.2 107.9 107.8v151.4c0 14.3-11.6 25.9-25.9 25.9s-25.9-11.6-25.9-25.9V206.3c0-30.9-25-56-56-56H668.7z m207.4 506.3c-0.6-14.3 10.4-26.4 24.7-27.1 14.3-0.6 26.4 10.4 27.1 24.7V820.3c0 59.6-48.2 107.8-107.8 107.8H717.8c-14.3 0-25.9-11.6-25.9-25.9s11.6-25.9 25.9-25.9h102.4c30.9 0 56-25 56-56V656.6zM369.8 876.4c14.3 0 25.9 11.6 25.9 25.9s-11.6 25.9-25.9 25.9H206c-59.5 0-107.8-48.3-107.8-107.8V668.9c0-14.3 11.6-25.9 25.9-25.9s25.9 11.6 25.9 25.9v151.4c0 30.9 25 56 56 56h163.8v0.1zM150.1 357.8c0 14.3-11.6 25.9-25.9 25.9s-25.9-11.6-25.9-25.9V206.3c0-59.7 48.2-107.9 107.8-107.9h151.4c14.3 0 25.9 11.6 25.9 25.9s-11.6 25.9-25.9 25.9H206.1c-30.9 0-56 25-56 56v151.6z m363 285.2c88.8 0 171.5-46.1 249.8-142.6-78.3-96.5-161-142.6-249.8-142.6-88.8 0-171.5 46.2-249.9 142.6C341.6 596.8 424.3 643 513.1 643z m0 51.8c-105.8 0-202.6-53.9-290.1-161.8-15.4-19-15.4-46.3 0-65.3 87.5-107.9 184.3-161.8 290.1-161.8 105.8 0 202.5 53.9 290.1 161.8 15.4 19 15.4 46.3 0 65.3-87.6 107.9-184.3 161.8-290.1 161.8z" p-id="1285"></path><path d="M513.1 565.2c35.8 0 64.8-29 64.8-64.8s-29-64.8-64.8-64.8-64.8 29-64.8 64.8 29 64.8 64.8 64.8z m0 51.9c-64.4 0-116.7-52.2-116.7-116.7s52.2-116.7 116.7-116.7 116.7 52.2 116.7 116.7-52.2 116.7-116.7 116.7z" p-id="1286"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/print.svg b/src/assets/images/wordtpl/images/print.svg
new file mode 100644
index 0000000..5ee44a0
--- /dev/null
+++ b/src/assets/images/wordtpl/images/print.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M12 4h-1V2H5v2H4V2a1 1 0 011-1h6a1 1 0 011 1v2zm0 5v4a1 1 0 01-1 1H5a1 1 0 01-1-1V9h1v4h6V9h1z"/><path d="M12 12v-1h2V5H2v6h2v1H2a1 1 0 01-1-1V5a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1h-2z"/><path d="M3 8h10v1H3zm8-2h2v1h-2z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/qrcode.svg b/src/assets/images/wordtpl/images/qrcode.svg
new file mode 100644
index 0000000..3677506
--- /dev/null
+++ b/src/assets/images/wordtpl/images/qrcode.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729582027290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4641" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M48.384 45.376l412.224 0 0 84.992-412.224 0 0-84.992ZM565.44 45.376l238.656 0 0 84.992-238.656 0 0-84.992ZM891.584 45.376l86.72 0 0 86.72-86.72 0 0-86.72ZM48.384 374.4l412.224 0 0 85.056-412.224 0 0-85.056ZM45.696 45.376l84.992 0 0 412.224-84.992 0 0-412.224ZM375.616 45.376l84.992 0 0 412.224-84.992 0 0-412.224ZM189.376 200.832l115.712 0 0 115.712-115.712 0 0-115.712ZM565.44 130.368l82.752 0 0 87.232-82.752 0 0-87.232ZM804.032 130.368l90.752 0 0 160.512-90.752 0 0-160.512ZM891.584 217.6l86.72 0 0 151.872-86.72 0 0-151.872ZM651.328 282.688l152.768 0 0 109.312-152.768 0 0-109.312ZM736.832 369.408l155.392 0 0 88.128-155.392 0 0-88.128ZM565.952 372.16l85.376 0 0 85.376-85.376 0 0-85.376ZM45.696 542.784l84.992 0 0 192.576-84.992 0 0-192.576ZM130.88 717.248l91.968 0 0 92.032-91.968 0 0-92.032ZM45.696 805.632l85.184 0 0 173.056-85.184 0 0-173.056ZM217.664 542.784l261.696 0 0 105.728-261.696 0 0-105.728ZM281.344 639.104l109.184 0 0 100.48-109.184 0 0-100.48ZM370.176 717.248l109.184 0 0 174.848-109.184 0 0-174.848ZM285.44 805.632l105.088 0 0 173.056-105.088 0 0-173.056ZM197.952 869.12l102.016 0 0 109.568-102.016 0 0-109.568ZM629.184 542.784l195.264 0 0 174.464-195.264 0 0-174.464ZM871.168 542.784l107.136 0 0 107.136-107.136 0 0-107.136ZM545.088 630.016l107.136 0 0 194.304-107.136 0 0-194.304ZM716.672 692.8l107.776 0 0 111.872-107.776 0 0-111.872ZM545.088 869.12l107.136 0 0 109.568-107.136 0 0-109.568ZM802.816 892.096l175.488 0 0 86.592-175.488 0 0-86.592ZM890.56 804.672l87.744 0 0 105.728-87.744 0 0-105.728Z" fill="#272636" p-id="4642"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/redo.svg b/src/assets/images/wordtpl/images/redo.svg
new file mode 100644
index 0000000..fc88331
--- /dev/null
+++ b/src/assets/images/wordtpl/images/redo.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M3 14v-3a4 4 0 014-4h3V6H7a5 5 0 00-5 5v3h1zm7.016-11.282v7.543l4.29-3.73z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/request-fullscreen.svg b/src/assets/images/wordtpl/images/request-fullscreen.svg
new file mode 100644
index 0000000..cf47c4a
--- /dev/null
+++ b/src/assets/images/wordtpl/images/request-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M3 3h1v4H3z"/><path d="M3 3h4v1H3zm10 10h-1V9h1z"/><path d="M13 13H9v-1h4z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/right.svg b/src/assets/images/wordtpl/images/right.svg
new file mode 100644
index 0000000..eca4643
--- /dev/null
+++ b/src/assets/images/wordtpl/images/right.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2v-1zm4-3h8v1H6v-1zM2 7h12v1H2V7zm0-6h12v1H2V1zm4 3h8v1H6V4z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/row-margin.svg b/src/assets/images/wordtpl/images/row-margin.svg
new file mode 100644
index 0000000..97f2baa
--- /dev/null
+++ b/src/assets/images/wordtpl/images/row-margin.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 14h12v1H2v-1zm7-5h5v1H9V9zm0-3h5v1H9V6zM2 1h12v1H2V1zm2.5 3L7 7H2zm0 8L7 9H2z" fill="#3D4757" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/save.svg b/src/assets/images/wordtpl/images/save.svg
new file mode 100644
index 0000000..0d0fb13
--- /dev/null
+++ b/src/assets/images/wordtpl/images/save.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714708781943" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6105" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M701.3 316.1c15.9 0 28.8-13.3 28.8-29.8v-57.6c0-16.4-12.9-29.8-28.8-29.8s-28.8 13.3-28.8 29.8v57.6c0 16.5 12.9 29.8 28.8 29.8z" fill="#00D8A0" p-id="6106"></path><path d="M820.6 960H203.8c-77.2 0-140-62.8-140-140V203.2c0-77.2 62.8-140 140-140h616.7c77.2 0 140 62.8 140 140v616.7c0.1 77.3-62.7 140.1-139.9 140.1zM203.8 103.2c-55.2 0-100 44.9-100 100v616.7c0 55.2 44.9 100 100 100h616.7c55.2 0 100-44.9 100-100V203.2c0-55.2-44.9-100-100-100H203.8z" fill="#1A1A1A" p-id="6107"></path><path d="M764.7 442.1H261.9c-39 0-70.7-31.7-70.7-70.7V79.9h40v291.5c0 16.9 13.8 30.7 30.7 30.7h502.8c16.9 0 30.7-13.8 30.7-30.7V79.9h40v291.5c0 39-31.7 70.7-70.7 70.7z" fill="#1A1A1A" p-id="6108"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/search.svg b/src/assets/images/wordtpl/images/search.svg
new file mode 100644
index 0000000..9d515dc
--- /dev/null
+++ b/src/assets/images/wordtpl/images/search.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="#3D4757" cx="6" cy="6" r="4.5"/><path d="M10.061 10.968L8.707 9.414l.707-.707 1.514 1.457.435-.404 2.632 2.462a1.154 1.154 0 01.05 1.635 1.184 1.184 0 01-1.655.064l-2.788-2.527.46-.426z" fill="#3D4757" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/separator.svg b/src/assets/images/wordtpl/images/separator.svg
new file mode 100644
index 0000000..58225e9
--- /dev/null
+++ b/src/assets/images/wordtpl/images/separator.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 2.8l2.01 2.506c.2.25.58.25.78 0L8.7 2.799l2.01 2.507c.2.25.58.25.78 0l2.4-2.993-.78-.626-2.01 2.507-2.01-2.507a.5.5 0 00-.78 0L6.3 4.194 4.29 1.687a.5.5 0 00-.78 0l-2.4 3 .78.625L3.9 2.8zM1 8h13v1H1zm0 4h3v1H1zm5 0h3v1H6zm5 0h3v1h-3z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/size-add.svg b/src/assets/images/wordtpl/images/size-add.svg
new file mode 100644
index 0000000..aa1073c
--- /dev/null
+++ b/src/assets/images/wordtpl/images/size-add.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M6.215 3.29H7.64L11.855 14H10.52l-1.14-3H4.46l-1.14 3H2L6.215 3.29zM4.85 9.965h4.14L6.965 4.61h-.06L4.85 9.965z"/><path d="M12 4V2h1v2h2v1h-2v2h-1V5h-2V4h2z" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/size-minus.svg b/src/assets/images/wordtpl/images/size-minus.svg
new file mode 100644
index 0000000..7bfa958
--- /dev/null
+++ b/src/assets/images/wordtpl/images/size-minus.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path fill-rule="nonzero" d="M11 4h4v1h-4z"/><path d="M6.215 3.29H7.64L11.855 14H10.52l-1.14-3H4.46l-1.14 3H2L6.215 3.29zM4.85 9.965h4.14L6.965 4.61h-.06L4.85 9.965z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/strikeout.svg b/src/assets/images/wordtpl/images/strikeout.svg
new file mode 100644
index 0000000..c2c83ca
--- /dev/null
+++ b/src/assets/images/wordtpl/images/strikeout.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M10.42 7.903H6.692a9.182 9.182 0 01-.41-.172 5.54 5.54 0 01-.814-.447 2.955 2.955 0 01-.655-.595 2.728 2.728 0 01-.44-.777 2.877 2.877 0 01-.162-1.006c0-.472.094-.888.282-1.25.188-.36.453-.663.793-.907s.747-.43 1.22-.558A5.97 5.97 0 018.063 2c.504 0 .95.049 1.337.147.387.097.725.23 1.013.398.287.169.53.365.73.59a3.337 3.337 0 01.772 1.486c.03.13.054.255.073.379h-1.276a2.393 2.393 0 00-.22-.615 2.315 2.315 0 00-.59-.724 2.467 2.467 0 00-.834-.44 3.376 3.376 0 00-1.005-.146 4.69 4.69 0 00-.958.097 2.77 2.77 0 00-.839.314 1.765 1.765 0 00-.597.566c-.152.233-.229.518-.229.854 0 .348.086.642.258.884.171.241.401.449.689.622.287.174.615.323.983.448s.749.247 1.142.367c.31.097.62.196.934.297a8.439 8.439 0 01.973.38zm1.376 1c.175.217.315.466.418.746.105.285.158.612.158.98 0 .554-.104 1.041-.312 1.462-.207.42-.496.772-.867 1.054-.37.282-.81.495-1.32.64A6.12 6.12 0 018.205 14c-.543 0-1.071-.09-1.586-.273a4.44 4.44 0 01-1.374-.773 3.873 3.873 0 01-.97-1.217 3.695 3.695 0 01-.395-1.612h1.27c.028.407.122.78.282 1.12a2.835 2.835 0 001.581 1.465c.363.138.76.207 1.192.207.387 0 .758-.042 1.112-.126a2.85 2.85 0 00.938-.399 2.01 2.01 0 00.647-.708c.16-.29.241-.642.241-1.054 0-.337-.087-.623-.261-.86a2.333 2.333 0 00-.69-.61 4.651 4.651 0 00-.495-.257h2.099z"/><path d="M3 7h10v1H3z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/subscript.svg b/src/assets/images/wordtpl/images/subscript.svg
new file mode 100644
index 0000000..9ec06b7
--- /dev/null
+++ b/src/assets/images/wordtpl/images/subscript.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_0-公共_x2F_02工具栏_x2F_subscript"><path id="_x32_" class="st0" d="M15 13.3v.7h-3c0-.3.1-.5.3-.8.2-.2.5-.6 1-1 .4-.3.6-.5.7-.7.1-.2.2-.3.2-.5s-.1-.3-.2-.4c-.1-.1-.2-.1-.4-.1s-.3 0-.4.1-.2.4-.2.7l-.9-.1c.1-.4.2-.7.5-.9.3-.2.6-.3 1-.3s.8.1 1 .3c.3.2.4.5.4.8 0 .2 0 .4-.1.5-.1.2-.2.3-.3.5-.1.1-.3.3-.6.5s-.4.4-.5.4c-.1.1-.1.2-.2.3H15z"/><path id="合并形状" class="st0" d="M7.2 8.5l4 5.5H9.8L6.5 9.4 3.2 14H1.8l4-5.5-4-5.5h1.4l3.3 4.6L9.8 3h1.3L7.2 8.5z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/superscript.svg b/src/assets/images/wordtpl/images/superscript.svg
new file mode 100644
index 0000000..053bd3e
--- /dev/null
+++ b/src/assets/images/wordtpl/images/superscript.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_0-公共_x2F_02工具栏_x2F_superscript"><path id="_x32_" class="st0" d="M15 6.3V7h-3c0-.3.1-.5.3-.8.2-.2.5-.6 1-1 .3-.2.6-.5.7-.6.1-.2.2-.3.2-.5s-.1-.3-.2-.4c-.1-.1-.2-.1-.4-.1s-.3 0-.4.1-.2.3-.2.6l-.9-.1c.1-.4.2-.7.5-.9s.6-.3 1-.3.8.1 1 .3c.3.2.4.5.4.8 0 .2 0 .4-.1.5s-.2.4-.4.5c-.1.1-.3.3-.6.5s-.4.4-.4.5c-.1.1-.1.2-.2.3l1.7-.1z"/><path id="合并形状" class="st0" d="M7.4 8.5l4 5.5H10L6.7 9.4 3.4 14H2l4-5.5L2 3h1.4l3.3 4.6L10 3h1.3L7.4 8.5z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/table.svg b/src/assets/images/wordtpl/images/table.svg
new file mode 100644
index 0000000..6a9eb22
--- /dev/null
+++ b/src/assets/images/wordtpl/images/table.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="14px" viewBox="0 0 13 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="iPhone-SE备份" transform="translate(-230.000000, -215.000000)" fill="currentColor">
+            <g id="编组-10" transform="translate(230.000000, 215.000000)">
+                <rect id="矩形" x="1" y="4" width="11" height="1"></rect>
+                <rect id="矩形备份-168" x="1" y="9" width="11" height="1"></rect>
+                <rect id="矩形" x="3" y="1" width="1" height="12"></rect>
+                <path d="M13,0 L13,14 L0,14 L0,0 L13,0 Z M12,1 L1,1 L1,13 L12,13 L12,1 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/wordtpl/images/title.svg b/src/assets/images/wordtpl/images/title.svg
new file mode 100644
index 0000000..c131320
--- /dev/null
+++ b/src/assets/images/wordtpl/images/title.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M14 1a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1h12zm0 1H2v12h12V2z" fill-rule="nonzero"/><path fill-rule="nonzero" d="M4 11h8v1H4zm0-3h4v1H4zm0-3h2v1H4z"/><path d="M9 5h1v4H9z"/><path d="M7 5h5v1H7z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/underline.svg b/src/assets/images/wordtpl/images/underline.svg
new file mode 100644
index 0000000..dcd81b0
--- /dev/null
+++ b/src/assets/images/wordtpl/images/underline.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 2v6a3 3 0 106 0V2h1v6a4 4 0 11-8 0V2h1zM4 13h8v1H4z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/undo.svg b/src/assets/images/wordtpl/images/undo.svg
new file mode 100644
index 0000000..820f852
--- /dev/null
+++ b/src/assets/images/wordtpl/images/undo.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6 2.763v7.544l-4.29-3.73zM13 14v-3a4 4 0 00-4-4H6V6h3a5 5 0 015 5v3h-1z" fill="#3D4757"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/upload.svg b/src/assets/images/wordtpl/images/upload.svg
new file mode 100644
index 0000000..7e2f518
--- /dev/null
+++ b/src/assets/images/wordtpl/images/upload.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727524019529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1348" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M393.2 701.7c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3l115.3-115.3c14-14 36.9-14 50.9 0L652.1 647c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-95.5-95.5-95.5 95.5c-6.2 6.2-14.4 9.4-22.6 9.4z" fill="" p-id="1349"></path><path d="M511.3 921.1c-17.7 0-32-14.3-32-32v-276c0-17.7 14.3-32 32-32s32 14.3 32 32v276c0 17.6-14.3 32-32 32z" fill="" p-id="1350"></path><path d="M732.7 784.9c-17.7 0-32-14.3-32-32s14.3-32 32-32c90.6 0 164.3-73.7 164.3-164.3 0-82.9-61.9-153-144-163.1l-22.7-2.8-4.7-22.4c-20.8-99.9-110.1-172.4-212.4-172.4-102.2 0-191.5 72.5-212.4 172.4l-4.7 22.4-22.7 2.8c-82.1 10.1-144 80.2-144 163.1 0 90.6 73.7 164.3 164.3 164.3 17.7 0 32 14.3 32 32s-14.3 32-32 32c-61 0-118.3-23.8-161.5-66.9-43.1-43.1-66.9-100.5-66.9-161.5 0-107.6 75.2-199.7 178.2-222.8 15.8-53.8 47.7-102.2 91.3-138.1 50.1-41.2 113.4-63.9 178.3-63.9s128.3 22.7 178.3 63.9c43.6 35.9 75.5 84.3 91.3 138.1C885.9 356.8 961 448.9 961 556.5c0 61-23.8 118.3-66.9 161.5-43.1 43.1-100.4 66.9-161.4 66.9z" fill="" p-id="1351"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/wordtpl/images/watermark.svg b/src/assets/images/wordtpl/images/watermark.svg
new file mode 100644
index 0000000..68de565
--- /dev/null
+++ b/src/assets/images/wordtpl/images/watermark.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#3D4757" x="2.5" y="1.5" width="11" height="13" rx="1"/><path d="M4 7h8v1H4V7zm0-2h8v1H4V5zm0 6h8v1H4v-1zm0-2h8v1H4V9z" fill="#909AA9" fill-rule="nonzero"/><path d="M6 5.623c.36-.354.936-.638 2-.604 1.785.057 2-.008 2 1.894v4.098H8.984v-.993c1.046.662.885.993-.484.993-1.792 0-2.5-1.068-2.5-2 0-1.427.447-2 2.5-2h.484c0-1-.006-1.007-.984-1-.978.008-1.419.437-2 .437v-.825zm2.5 2.389c-.899 0-1.5-.232-1.5 1 0 1.31.438 1 1.5 1 .617 0 .484-.665.484-1.848v-.152H8.5z" fill="#3D4757"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/zaiban.png b/src/assets/images/zaiban.png
new file mode 100644
index 0000000..46b1f6e
Binary files /dev/null and b/src/assets/images/zaiban.png differ
diff --git a/src/assets/less/JAreaLinkage.less b/src/assets/less/JAreaLinkage.less
new file mode 100644
index 0000000..4fea722
--- /dev/null
+++ b/src/assets/less/JAreaLinkage.less
@@ -0,0 +1,258 @@
+.area-zoom-in-top-enter-active,
+.area-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.area-zoom-in-top-enter,
+.area-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.area-select {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  outline: 0;
+  display: block;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-top-width: 1.02px;
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.area-select-wrap .area-select {
+  display: inline-block;
+}
+
+.area-select * {
+  box-sizing: border-box;
+}
+
+.area-select:hover {
+  border-color: #40a9ff;
+  border-right-width: 1px !important;
+  outline: 0;
+}
+
+.area-select:active {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.area-select.small {
+  width: 126px;
+}
+
+.area-select.medium {
+  width: 160px;
+}
+
+.area-select.large {
+  width: 194px;
+}
+
+.area-select.is-disabled {
+  background: #eceff5;
+  cursor: not-allowed;
+}
+
+.area-select.is-disabled:hover {
+  border-color: #e1e2e6;
+}
+
+.area-select.is-disabled .area-selected-trigger {
+  cursor: not-allowed;
+}
+
+.area-select .area-selected-trigger {
+  position: relative;
+  display: block;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 100%;
+  padding: 8px 20px 7px 12px;
+}
+
+.area-select .area-select-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -2px;
+  right: 6px;
+  content: '';
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  transition: all 0.3s linear;
+  transform-origin: center;
+}
+
+.area-select .area-select-icon.active {
+  margin-top: -8px;
+  transform: rotate(180deg);
+}
+
+.area-selectable-list-wrap {
+  position: absolute;
+  width: 100%;
+  max-height: 275px;
+  z-index: 15000;
+  background-color: #fff;
+  box-sizing: border-box;
+  overflow-x: auto;
+  margin: 2px 0;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  transition: opacity 0.15s, transform 0.3s !important;
+  transform-origin: center top !important;
+}
+
+.area-selectable-list {
+  position: relative;
+  margin: 0;
+  padding: 6px 0;
+  width: 100%;
+  font-size: 14px;
+  color: #565656;
+  list-style: none;
+}
+
+.area-selectable-list .area-select-option {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  padding: 0 15px 0 10px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.area-selectable-list .area-select-option.hover {
+  background-color: #e6f7ff;
+}
+
+.area-selectable-list .area-select-option.selected {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 600;
+  background-color: #efefef;
+}
+
+.cascader-menu-list-wrap {
+  position: absolute;
+  white-space: nowrap;
+  z-index: 15000;
+  background-color: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 0;
+  margin: 2px 0;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  transition: opacity 0.15s, transform 0.3s !important;
+  transform-origin: center top !important;
+}
+
+.cascader-menu-list {
+  position: relative;
+  margin: 0;
+  font-size: 14px;
+  color: #565656;
+  padding: 6px 0;
+  list-style: none;
+  display: inline-block;
+  height: 204px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 160px;
+  vertical-align: top;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+}
+
+.cascader-menu-list:last-child {
+  border-right: none;
+}
+
+.cascader-menu-list .cascader-menu-option {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  padding: 0 15px 0 10px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.cascader-menu-list .cascader-menu-option.hover,
+.cascader-menu-list .cascader-menu-option:hover {
+  background-color: #e6f7ff;
+}
+
+.cascader-menu-list .cascader-menu-option.selected {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 600;
+  background-color: #efefef;
+}
+
+.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after {
+  position: absolute;
+  top: 50%;
+  margin-top: -4px;
+  right: 5px;
+  content: '';
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-left-color: #a1a4ad;
+}
+
+.cascader-menu-list::-webkit-scrollbar,
+.area-selectable-list-wrap::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:increment,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment {
+  display: none;
+}
+
+.cascader-menu-list::-webkit-scrollbar-thumb:vertical,
+.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical {
+  background-color: #b8b8b8;
+  border-radius: 4px;
+}
+
+.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover,
+.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover {
+  background-color: #777;
+}
diff --git a/src/assets/loginmini/icon/ghb_ad_text.svg b/src/assets/loginmini/icon/ghb_ad_text.svg
new file mode 100644
index 0000000..6cef4bb
--- /dev/null
+++ b/src/assets/loginmini/icon/ghb_ad_text.svg
@@ -0,0 +1,5 @@
+<svg width="420" height="200" viewBox="0 0 420 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <text x="0" y="70" font-family="'Microsoft YaHei', Arial, sans-serif" font-size="52" font-weight="700" fill="#ffffff">test 管理系统</text>
+  <text x="2" y="118" font-family="'Microsoft YaHei', Arial, sans-serif" font-size="20" font-weight="400" fill="#ffffff" fill-opacity="0.9">高效 · 稳定 · 安全的企业级后台管理平台</text>
+  <text x="2" y="150" font-family="'Microsoft YaHei', Arial, sans-serif" font-size="20" font-weight="400" fill="#ffffff" fill-opacity="0.9">助力业务快速落地</text>
+</svg>
diff --git a/src/assets/loginmini/icon/icon-code.png b/src/assets/loginmini/icon/icon-code.png
new file mode 100644
index 0000000..142d3ab
Binary files /dev/null and b/src/assets/loginmini/icon/icon-code.png differ
diff --git a/src/assets/loginmini/icon/icon-depart.png b/src/assets/loginmini/icon/icon-depart.png
new file mode 100644
index 0000000..ed1a416
Binary files /dev/null and b/src/assets/loginmini/icon/icon-depart.png differ
diff --git a/src/assets/loginmini/icon/icon-eye-g.png b/src/assets/loginmini/icon/icon-eye-g.png
new file mode 100644
index 0000000..8cf83d6
Binary files /dev/null and b/src/assets/loginmini/icon/icon-eye-g.png differ
diff --git a/src/assets/loginmini/icon/icon-eye-k.png b/src/assets/loginmini/icon/icon-eye-k.png
new file mode 100644
index 0000000..e1cacb0
Binary files /dev/null and b/src/assets/loginmini/icon/icon-eye-k.png differ
diff --git a/src/assets/loginmini/icon/icon-line-msg.png b/src/assets/loginmini/icon/icon-line-msg.png
new file mode 100644
index 0000000..08e7bea
Binary files /dev/null and b/src/assets/loginmini/icon/icon-line-msg.png differ
diff --git a/src/assets/loginmini/icon/icon-line-pad.png b/src/assets/loginmini/icon/icon-line-pad.png
new file mode 100644
index 0000000..2aaccec
Binary files /dev/null and b/src/assets/loginmini/icon/icon-line-pad.png differ
diff --git a/src/assets/loginmini/icon/icon-line-tel.png b/src/assets/loginmini/icon/icon-line-tel.png
new file mode 100644
index 0000000..c3efe1c
Binary files /dev/null and b/src/assets/loginmini/icon/icon-line-tel.png differ
diff --git a/src/assets/loginmini/icon/icon-line-user.png b/src/assets/loginmini/icon/icon-line-user.png
new file mode 100644
index 0000000..30a280c
Binary files /dev/null and b/src/assets/loginmini/icon/icon-line-user.png differ
diff --git a/src/assets/loginmini/icon/icon-password.png b/src/assets/loginmini/icon/icon-password.png
new file mode 100644
index 0000000..edf6d31
Binary files /dev/null and b/src/assets/loginmini/icon/icon-password.png differ
diff --git a/src/assets/loginmini/icon/icon-success.png b/src/assets/loginmini/icon/icon-success.png
new file mode 100644
index 0000000..aa3a233
Binary files /dev/null and b/src/assets/loginmini/icon/icon-success.png differ
diff --git a/src/assets/loginmini/icon/icon-user.png b/src/assets/loginmini/icon/icon-user.png
new file mode 100644
index 0000000..968fc1a
Binary files /dev/null and b/src/assets/loginmini/icon/icon-user.png differ
diff --git a/src/assets/loginmini/icon/icon_dow.png b/src/assets/loginmini/icon/icon_dow.png
new file mode 100644
index 0000000..03d928d
Binary files /dev/null and b/src/assets/loginmini/icon/icon_dow.png differ
diff --git a/src/assets/loginmini/icon/jeecg_ad_text.png b/src/assets/loginmini/icon/jeecg_ad_text.png
new file mode 100644
index 0000000..8725482
Binary files /dev/null and b/src/assets/loginmini/icon/jeecg_ad_text.png differ
diff --git a/src/assets/loginmini/icon/jeecg_logo.png b/src/assets/loginmini/icon/jeecg_logo.png
new file mode 100644
index 0000000..109687f
Binary files /dev/null and b/src/assets/loginmini/icon/jeecg_logo.png differ
diff --git a/src/assets/loginmini/icon/logo.png b/src/assets/loginmini/icon/logo.png
new file mode 100644
index 0000000..ad1cb65
Binary files /dev/null and b/src/assets/loginmini/icon/logo.png differ
diff --git a/src/assets/loginmini/style/base.less b/src/assets/loginmini/style/base.less
new file mode 100644
index 0000000..0eb0ba4
--- /dev/null
+++ b/src/assets/loginmini/style/base.less
@@ -0,0 +1,365 @@
+::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: #868686;
+  font-size: 15px;
+}
+
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #868686;
+  font-size: 15px;
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: #868686;
+  font-size: 15px;
+}
+
+input:-webkit-autofill {
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  color: #333;
+  margin: 0;
+  height: 100%;
+  font-family: 'Myriad Set Pro', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: normal;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+}
+
+a,
+label,
+button,
+input,
+select {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border: 0;
+}
+
+body {
+  background: #e3f0ff;
+  color: #666;
+}
+
+html,
+body,
+div,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+button,
+fieldset,
+form,
+input,
+legend,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: #08acee;
+}
+
+button {
+  outline: 0;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  color: #666;
+}
+
+.clearfix::after {
+  clear: both;
+  content: '.';
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.clearfix {
+}
+
+.divHeight {
+  width: 100%;
+  height: 10px;
+  background: #f5f5f5;
+  position: relative;
+  overflow: hidden;
+}
+
+.r-line {
+  position: relative;
+}
+
+.r-line:after {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  border-right: 1px solid #d9d9d9;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+}
+
+.b-line {
+  position: relative;
+}
+
+.b-line:after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid #dedede;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+}
+
+.aui-arrow {
+  position: relative;
+  padding-right: 0.8rem;
+}
+
+.aui-arrow span {
+  font-size: 0.8rem;
+  color: #9b9b9b;
+}
+
+.aui-arrow:after {
+  content: ' ';
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+  border-width: 2px 2px 0 0;
+  border-color: #848484;
+  border-style: solid;
+  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position: relative;
+  position: absolute;
+  top: 50%;
+  margin-top: -4px;
+  right: 2px;
+  border-radius: 1px;
+}
+
+.aui-flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  position: relative;
+}
+
+.aui-flex-box {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 必要布局样式css */
+.aui-flexView {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.aui-scrollView {
+  width: 100%;
+  height: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  padding-bottom: 53px;
+}
+
+.aui-navBar {
+  height: 44px;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 102;
+  background-color: #5064eb;
+}
+
+.aui-navBar-item {
+  height: 44px;
+  min-width: 15%;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 15%;
+  -ms-flex: 0 0 15%;
+  flex: 0 0 15%;
+  padding: 0 0.9rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 0.7rem;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #808080;
+  position: relative;
+}
+
+.aui-navBar-item:first-child {
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  margin-right: -25%;
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+.aui-navBar-item:last-child {
+  -webkit-box-ordinal-group: 4;
+  -webkit-order: 3;
+  -ms-flex-order: 3;
+  order: 3;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.aui-center {
+  -webkit-box-ordinal-group: 3;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 44px;
+  width: 80%;
+  margin-left: 22%;
+}
+
+.aui-center-title {
+  text-align: center;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  font-size: 0.95rem;
+  color: #fff;
+  font-weight: 500;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  border: none;
+  float: left;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.login-background-img {
+  background-image: linear-gradient(160deg, #eaf2ff 0%, #d6e6ff 100%);
+  background-size: cover;
+  background-position: top center;
+  background-repeat: no-repeat;
+}
diff --git a/src/assets/loginmini/style/home.less b/src/assets/loginmini/style/home.less
new file mode 100644
index 0000000..306bd24
--- /dev/null
+++ b/src/assets/loginmini/style/home.less
@@ -0,0 +1,615 @@
+.aui-content {
+  padding: 40px 60px;
+  min-height: 100vh;
+}
+
+.aui-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 92%;
+  height: auto;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+}
+
+.aui-form {
+  width: 100%;
+  background: #eee;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.aui-image {
+  padding: 180px 80px;
+  flex-basis: 60%;
+  -webkit-flex-basis: 60%;
+  background-color: #1677ff;
+  background-image: linear-gradient(135deg, #1677ff 0%, #0e4fb0 100%);
+  background-size: cover;
+}
+
+.aui-image-text {
+  top: 50%;
+  left: 50%;
+  width: 100%;
+}
+
+.aui-formBox {
+  flex-basis: 40%;
+  -webkit-flex-basis: 40%;
+  box-sizing: border-box;
+  padding: 30px 20px;
+  background: #fff;
+  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
+}
+
+.aui-logo {
+  width: 180px;
+  height: 80px;
+  position: absolute;
+  top: 2%;
+  left: 8%;
+  z-index: 4;
+}
+
+.aui-account-line {
+  padding-top: 20px;
+  padding-bottom: 40px;
+}
+
+.aui-code-line {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-left: 3px solid #fff;
+  height: 42px;
+  padding: 0 15px;
+  line-height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.aui-eye {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  width: 20px;
+  cursor: pointer;
+}
+
+.aui-input-line {
+  background: #f5f5f9;
+  border-radius: 2px;
+  position: relative;
+  margin: 12px 0;
+}
+
+.aui-input-line input {
+  width: 100%;
+  padding: 12px 10px;
+  border: none;
+  color: #333333;
+  font-size: 14px;
+  background: unset;
+  padding-left: 40px;
+}
+
+.aui-input-line .icon {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.icon-line-user {
+  background-image: url(../icon/icon-line-user.png);
+}
+
+.icon-line-tel {
+  background-image: url(../icon/icon-line-tel.png);
+}
+
+.icon-line-msg {
+  background-image: url(../icon/icon-line-msg.png);
+}
+
+.icon-line-pad {
+  background-image: url(../icon/icon-line-pad.png);
+}
+
+.aui-forgot .aui-input-line input {
+  padding-left: 20px;
+}
+
+.aui-forgot .aui-input-line {
+  background: none;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+}
+
+.aui-forgot .aui-input-line:focus {
+  border-color: #1b90ff;
+}
+
+.aui-forgot .aui-input-line:hover {
+  border-color: #1b90ff;
+}
+
+.aui-forgot .aui-input-line .aui-code-line {
+  border-left: 1px solid #dbdbdb;
+  height: 40px;
+  color: #1b90ff;
+}
+
+.aui-step-box {
+  width: 100%;
+  height: auto;
+  position: relative;
+  overflow: hidden;
+  margin-top: 50px;
+  margin-bottom: 20px;
+}
+
+.aui-step-box::after {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  width: 76%;
+  margin-left: -38%;
+  height: 1px;
+  background: #bcbcbc;
+  content: '';
+}
+
+.aui-step-item {
+  width: 33.333%;
+  float: left;
+  text-align: center;
+  position: relative;
+  z-index: 2;
+}
+
+.aui-step-tags em {
+  width: 40px;
+  height: 40px;
+  border: 8px solid #fff;
+  line-height: 1.3;
+  border-radius: 100px;
+  background: #bcbcbc;
+  display: block;
+  margin: 0 auto;
+  font-style: normal;
+  color: #fff;
+  font-size: 19px;
+  font-weight: 500;
+}
+
+.aui-step-tags p {
+  font-size: 14px;
+  color: #bcbcbc;
+}
+
+.activeStep .aui-step-tags em {
+  background: #1b90ff;
+}
+
+.activeStep .aui-step-tags p {
+  color: #1b90ff;
+}
+
+.aui-success {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 80px;
+  width: 100%;
+  margin-top: -40px;
+  margin-left: -50%;
+}
+
+.aui-success-icon {
+  width: 40px;
+  margin: 0 auto;
+}
+
+.aui-success h3 {
+  width: 100%;
+  text-align: center;
+  color: #515151;
+  font-size: 18px;
+  padding-top: 20px;
+}
+
+.aui-form-nav {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.aui-form-nav .aui-flex-box {
+  color: #040404;
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.aui-clear-left {
+  text-align: left;
+}
+
+.aui-clear-left .activeNav::after {
+  left: 18px;
+}
+
+.activeNav {
+  position: relative;
+}
+
+.activeNav::after {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  bottom: -10px;
+  left: 50%;
+  margin-left: -15px;
+  width: 30px;
+  height: 4px;
+  background: #1b90ff;
+  border-radius: 100px;
+}
+
+.phone .aui-inputClear {
+  padding-left: 0;
+}
+
+.phone .aui-inputClear input {
+  //padding-left: 1px;
+}
+
+.phone .aui-inputClear .aui-code {
+  text-align: right;
+  width: auto;
+  bottom: 10px;
+}
+
+.phone .aui-inputClear .aui-code a {
+  color: #1b90ff;
+  font-size: 14px;
+}
+
+.phoneChina {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  font-size: 14px;
+  color: #040404;
+}
+
+.phoneChina::after {
+  position: absolute;
+  right: -25px;
+  bottom: 0;
+  content: '';
+  background-image: url(../icon/icon_dow.png);
+  background-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+.phoneChina:before {
+  position: absolute;
+  right: -42px;
+  bottom: -15px;
+  content: ' ';
+  background: #fff;
+  width: 18px;
+  height: 18px;
+}
+
+.aui-ewm {
+  width: 280px;
+  margin: 0 auto;
+}
+
+.aui-formEwm {
+  padding: 50px 40px 55px 40px;
+}
+
+.aui-inputClear {
+  width: 100%;
+  border-bottom: 1px solid #cccccc;
+  position: relative;
+  padding-left: 20px;
+  background: #fff;
+  margin-bottom: 8px;
+  margin-top: 20px;
+}
+
+.aui-inputClear .icon {
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
+
+.aui-inputClear input {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  color: #333333;
+  font-size: 14px;
+  background: none;
+}
+
+.aui-code {
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  width: 115px;
+  cursor: pointer;
+}
+
+.icon-code {
+  background-image: url(../icon/icon-user.png);
+}
+
+.icon-password {
+  background-image: url(../icon/icon-password.png);
+}
+.icon-depart {
+  top: 5px !important;
+  background-image: url(../icon/icon-depart.png);
+}
+.icon-code {
+  background-image: url(../icon/icon-code.png);
+}
+
+.aui-inputClear:focus {
+  border-bottom: 1px solid #1b90ff;
+}
+
+.aui-inputClear:hover {
+  border-bottom: 1px solid #1b90ff;
+}
+
+.aui-choice {
+  position: relative;
+  font-size: 12px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  position: relative;
+  color: #040404;
+}
+
+.aui-choice input {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.aui-forget a {
+  color: #1b90ff;
+  font-size: 12px;
+}
+
+.aui-forget a:hover {
+  text-decoration: underline;
+}
+
+.aui-formButton {
+  padding-top: 10px;
+}
+
+.aui-formButton a {
+  height: 42px;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 8px;
+  border-color: #67b5ff;
+  background: #1b90ff;
+  width: 100%;
+  cursor: pointer;
+  border: none;
+  color: #fff;
+  margin: 8px 0;
+  display: block;
+  text-align: center;
+}
+
+.aui-formButton a:focus {
+  opacity: 0.9;
+}
+
+.aui-formButton a:hover {
+  opacity: 0.9;
+}
+
+.aui-formButton .aui-linek-code {
+  background: #fff;
+  color: #3c3c3c;
+  border: 1px solid #dbdbdb;
+}
+
+.aui-formButton .aui-linek-code:hover {
+  color: #1b90ff;
+  border: 1px solid #1b90ff;
+}
+
+.aui-third-text {
+  font-size: 12px;
+  color: #3c3c3c;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.aui-third-text span {
+  color: #afafaf;
+  display: block;
+  width: 38%;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  background: #fff;
+  z-index: 100;
+  font-size: 12px;
+}
+
+.aui-third-border {
+  position: relative;
+}
+
+.aui-third-border::after {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  top: 8px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid #d9d9d9;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+}
+
+.aui-third-login {
+  width: 30px;
+  height: 30px;
+  margin: 0 auto;
+  border-radius: 100px;
+}
+
+.aui-third-login a {
+  font-size: 22px;
+  margin: 0 auto;
+  border-radius: 100px;
+  display: inline-block;
+  color: #888;
+}
+
+.aui-third-login a:hover {
+  color: #1b90ff;
+  cursor: pointer;
+}
+
+.aui-third-login:hover {
+  cursor: pointer;
+}
+
+@media (max-width: 320px) {
+  .aui-form {
+    flex-direction: column;
+  }
+
+  .aui-image {
+    order: 2;
+    display: none;
+  }
+
+  .aui-container {
+    width: 100%;
+    max-width: 550px;
+    margin-top: 10px;
+  }
+
+  .aui-content {
+    justify-content: initial;
+    width: 100%;
+    padding: 20px;
+  }
+}
+
+@media (min-width: 321px) and (max-width: 375px) {
+  .aui-form {
+    flex-direction: column;
+  }
+
+  .aui-image {
+    order: 2;
+    display: none;
+  }
+
+  .aui-container {
+    width: 90%;
+    max-width: 550px;
+  }
+
+  .aui-content {
+    justify-content: initial;
+    width: 100%;
+    padding: 20px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 425px) {
+  .aui-form {
+    flex-direction: column;
+  }
+
+  .aui-image {
+    order: 2;
+    display: none;
+  }
+
+  .aui-container {
+    width: 90%;
+    max-width: 550px;
+  }
+
+  .aui-content {
+    justify-content: initial;
+    width: 100%;
+    padding: 40px;
+  }
+}
+
+@media (min-width: 425px) and (max-width: 768px) {
+  .aui-form {
+    flex-direction: column;
+  }
+
+  .aui-image {
+    order: 2;
+    display: none;
+  }
+
+  .aui-container {
+    width: 90%;
+    max-width: 550px;
+  }
+
+  .aui-content {
+    justify-content: initial;
+    width: 100%;
+    padding: 40px;
+  }
+
+  .aui-step-box::after {
+    width: 70%;
+    margin-left: -35%;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .aui-logo {
+    top: 3%;
+  }
+}
+
+@media screen and (max-width: 300px) {
+  .aui-logo {
+    top: 3%;
+  }
+}
diff --git a/src/assets/svg/fileType/excel.svg b/src/assets/svg/fileType/excel.svg
new file mode 100644
index 0000000..debdb36
--- /dev/null
+++ b/src/assets/svg/fileType/excel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="200"><path fill="#448AFF" d="M-59.667 49.583v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.333c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-195.708 66.622h13.228l13.436 56.874h.208l15.002-56.874h13.334l14.584 56.874h.208l13.854-56.874h13.228l-20.52 74.376h-13.232l-14.892-56.876h-.212l-15.206 56.876h-13.44z"/><path fill="#62BB37" d="M175 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 191.668V8.334C0 3.75 3.708 0 8.334 0h117.124L175 49.584z"/><path fill="#FFF" d="M55.206 66.625H70.73l16.874 26.25 17.602-26.25h14.584l-24.582 35.833L121.562 141h-15.836l-18.538-28.438L68.332 141H53.436l26.354-38.542z"/><path fill="#F57C00" d="M396.989 49.581v142.084c0 4.624-3.75 8.332-8.334 8.332H230.323a8.304 8.304 0 0 1-8.334-8.332V8.331c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M280.429 66.622h32.812c5.274 0 9.582.766 12.914 2.292 3.334 1.53 5.9 3.438 7.708 5.728 1.806 2.292 3.038 4.794 3.698 7.5.66 2.71.988 5.208.988 7.5 0 2.294-.328 4.776-.988 7.45-.66 2.672-1.892 5.156-3.698 7.446-1.808 2.29-4.374 4.186-7.708 5.676-3.332 1.498-7.64 2.242-12.914 2.242h-19.792v28.54h-13.02V66.622zm13.02 35.21h19.06c1.46 0 2.954-.212 4.48-.626a12.867 12.867 0 0 0 4.218-2.032c1.286-.94 2.328-2.188 3.126-3.75.798-1.564 1.196-3.524 1.196-5.884 0-2.43-.346-4.444-1.042-6.042-.692-1.596-1.632-2.866-2.812-3.802-1.18-.94-2.534-1.578-4.06-1.928-1.53-.346-3.162-.52-4.896-.52h-19.27v24.584z"/><path fill="#448AFF" d="M842.467 49.581v142.084c0 4.624-3.75 8.332-8.334 8.332H675.801a8.304 8.304 0 0 1-8.334-8.332V8.331c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M720.811 64.727h14.3l19.69 62.15h.22l20.13-62.15h13.97l-26.84 78.54h-15.288z"/><path fill="#29D3B2" d="M617.477 49.582v142.082c0 4.625-3.751 8.334-8.334 8.334H450.811a8.306 8.306 0 0 1-8.334-8.334V8.333c0-4.584 3.709-8.334 8.334-8.334h117.125l49.541 49.583z"/><path fill="#FFF" d="M494.866 56.625h70.225v13.121H537.51v73.626h-15.186V69.746h-27.458z"/><path fill="#F57C00" d="M-58.667 316.034v143.708c0 4.677-3.793 8.427-8.429 8.427h-160.141a8.398 8.398 0 0 1-8.429-8.427v-185.43c0-4.636 3.75-8.429 8.429-8.429h118.462l50.108 50.151z"/><path fill="#FFF" d="M-104.807 339.919l-33.729 33.73 3.75 4.19 28.869-28.868zM-166.156 363.755c-23.634 23.634-31.372 45.44-31.372 45.44s21.806-7.738 45.44-31.372l4.072-4.074-14.068-14.066-4.072 4.072zM-143.229 368.96l-14.068-14.068 38.406-38.406 14.068 14.068zM-197.528 413.402h92.707v6.274h-92.707z"/><path fill="#62BB37" d="M175 316.611v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 458.695V275.361c0-4.584 3.708-8.334 8.334-8.334h117.124L175 316.611z"/><path fill="#FFF" d="M39.498 359.393h22.914v41.894H39.498zM76.042 319.735h22.914v81.552H76.042zM112.586 343.699H135.5v57.588h-22.914zM39.498 412.525H135.5v6.2H39.498z"/><path fill="#448AFF" d="M408.38 316.609v142.084c0 4.624-3.75 8.332-8.334 8.332H241.714a8.304 8.304 0 0 1-8.334-8.332V275.359c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M275.515 372.827v-41.732c0-4.466 3.654-8.12 8.12-8.12h74.49c4.466 0 8.12 3.654 8.12 8.12v41.732M275.514 380.21h90.73v8.12h-90.73zM299.194 413.564h43.368v8.12h-43.368z"/><path fill="#FFF" d="M316.818 383.077h8.12v34.55h-8.12z"/><path fill="#718BC8" d="M629.721 316.609v142.084c0 4.624-3.75 8.332-8.334 8.332H463.055a8.304 8.304 0 0 1-8.334-8.332V275.359c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M542.221 303.026c-27.614 0-50 22.386-50 50s22.386 50 50 50 50-22.386 50-50-22.386-50-50-50zm0 64.584c-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584 0 8.054-6.53 14.584-14.584 14.584zM519.154 445.239h-4.702v-3.046h-.086c-.668 1.306-1.64 2.242-2.916 2.806a9.85 9.85 0 0 1-4.048.85c-1.77 0-3.316-.312-4.634-.936-1.322-.624-2.418-1.472-3.288-2.546-.872-1.072-1.524-2.342-1.958-3.808-.436-1.466-.654-3.04-.654-4.724 0-2.028.276-3.786.828-5.264.55-1.482 1.284-2.7 2.198-3.658.914-.958 1.958-1.66 3.134-2.11a9.96 9.96 0 0 1 3.59-.676c.698 0 1.406.066 2.134.196a9.66 9.66 0 0 1 2.09.63 8.33 8.33 0 0 1 1.848 1.112 6.16 6.16 0 0 1 1.416 1.588h.086v-11.49h4.962v31.076zm-17.324-11.012c0 .958.124 1.902.37 2.83a7.78 7.78 0 0 0 1.132 2.482 5.727 5.727 0 0 0 1.938 1.74c.782.434 1.71.652 2.784.652 1.104 0 2.054-.23 2.852-.696a5.892 5.892 0 0 0 1.958-1.828 8.278 8.278 0 0 0 1.132-2.546c.246-.942.37-1.908.37-2.894 0-2.496-.558-4.44-1.676-5.834-1.116-1.392-2.632-2.088-4.548-2.088-1.162 0-2.14.24-2.938.718a5.983 5.983 0 0 0-1.958 1.872 7.755 7.755 0 0 0-1.088 2.612 13.58 13.58 0 0 0-.328 2.98M526.727 422.737h4.702v3.132h.128c.378-.55.784-1.058 1.22-1.522.434-.464.92-.856 1.458-1.176a7.466 7.466 0 0 1 1.85-.762c.698-.188 1.494-.282 2.394-.282 1.364 0 2.634.306 3.808.914 1.176.608 2.01 1.554 2.504 2.828.84-1.158 1.812-2.074 2.916-2.74 1.102-.668 2.482-1.002 4.136-1.002 2.378 0 4.228.58 5.55 1.74 1.318 1.162 1.978 3.106 1.978 5.834v15.538h-4.962v-13.146c0-.898-.03-1.718-.086-2.458-.06-.74-.226-1.378-.502-1.916a2.836 2.836 0 0 0-1.24-1.24c-.55-.29-1.306-.434-2.264-.434-1.68 0-2.9.522-3.654 1.566-.756 1.046-1.132 2.524-1.132 4.44v13.188h-4.962v-14.45c0-1.568-.282-2.75-.85-3.548-.566-.796-1.602-1.196-3.112-1.196a4.54 4.54 0 0 0-1.85.392 4.595 4.595 0 0 0-1.566 1.13c-.45.494-.812 1.104-1.088 1.828-.278.728-.414 1.554-.414 2.482v13.362h-4.962v-22.502zM587.574 444.064c0 3.396-.95 5.928-2.85 7.596-1.9 1.67-4.636 2.502-8.204 2.502-1.134 0-2.272-.116-3.418-.346a10.209 10.209 0 0 1-3.134-1.176 7.541 7.541 0 0 1-2.37-2.178c-.64-.9-1.018-2-1.134-3.308h4.962c.146.698.392 1.262.742 1.7.346.434.76.776 1.24 1.02a4.658 4.658 0 0 0 1.586.48c.582.072 1.192.108 1.83.108 2.002 0 3.468-.492 4.396-1.48.928-.984 1.392-2.408 1.392-4.266v-3.436h-.086c-.696 1.246-1.646 2.22-2.852 2.916a7.647 7.647 0 0 1-3.896 1.044c-1.798 0-3.328-.312-4.59-.936a8.733 8.733 0 0 1-3.134-2.568c-.828-1.088-1.43-2.344-1.808-3.764-.376-1.422-.566-2.946-.566-4.57 0-1.508.234-2.946.698-4.31s1.132-2.56 2.002-3.592a9.628 9.628 0 0 1 3.2-2.46c1.262-.608 2.69-.912 4.286-.912 1.422 0 2.728.298 3.918.892 1.19.596 2.102 1.53 2.742 2.808h.086v-3.09h4.962v21.326zm-11.012-2.742c1.104 0 2.038-.224 2.808-.674a5.532 5.532 0 0 0 1.872-1.784 7.844 7.844 0 0 0 1.044-2.524c.218-.942.326-1.894.326-2.852s-.116-1.886-.346-2.786c-.234-.9-.588-1.698-1.068-2.394a5.142 5.142 0 0 0-1.872-1.654c-.768-.404-1.69-.608-2.764-.608-1.104 0-2.032.23-2.786.694a5.575 5.575 0 0 0-1.826 1.808 7.74 7.74 0 0 0-1.002 2.524 13.25 13.25 0 0 0-.306 2.808c0 .93.118 1.834.35 2.72.23.886.588 1.676 1.066 2.374a5.669 5.669 0 0 0 1.828 1.696c.74.436 1.632.652 2.676.652"/><path fill="#D32F2F" d="M842.467 604.638v142.084c0 4.624-3.75 8.332-8.334 8.332H675.801a8.304 8.304 0 0 1-8.334-8.332V563.388c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M753.453 632.684c.758 0 .758 0 0 0 .758-3.03 1.516-4.544 1.516-6.816v-1.514c.756-3.786.756-6.816 0-7.572v-.758l-.758-.758s0 .758-.758.758c-1.514 4.544-1.514 9.844 0 16.66m-22.716 52.25c-1.516.756-3.03 1.514-3.786 2.27-5.302 4.544-9.088 9.846-9.844 12.118 4.542-.758 9.086-5.302 13.63-14.388.756 0 .756 0 0 0 .756 0 0 0 0 0m69.666-11.36c-.756-.756-3.786-3.028-14.388-3.028h-1.514v.758c5.3 2.27 10.602 3.786 14.388 3.786H801.161v-.758s-.758 0-.758-.758m3.03 6.058c-1.516.758-3.786 1.516-6.816 1.516-6.058 0-15.146-1.516-22.718-5.302-12.872 1.514-22.716 3.03-30.29 6.058-.756 0-.756 0-1.514.758-9.086 15.902-16.66 23.474-22.718 23.474-1.514 0-2.27 0-3.028-.756l-3.786-2.272v-.758c-.758-1.514-.758-2.272-.758-3.786.758-3.786 5.302-10.602 14.388-15.902 1.514-.758 3.786-2.272 6.816-3.786 2.27-3.786 4.542-8.33 7.572-13.63 3.786-7.574 6.058-15.146 8.328-21.96-3.028-9.088-4.542-14.388-1.512-24.99.756-3.03 3.028-6.058 6.056-6.058h1.516c1.514 0 3.028.758 4.542 1.514 5.302 5.302 3.03 17.416 0 27.26v.758c3.03 8.33 7.574 15.146 12.116 19.688 2.272 1.516 3.786 3.03 6.816 4.544 3.786 0 6.816-.756 9.844-.756 9.088 0 15.146 1.514 17.416 5.3.758 1.514.758 3.028.758 4.544-.758.756-1.514 3.028-3.028 4.542M754.211 650.1c-1.514 5.3-4.544 11.358-7.572 18.174-1.514 3.03-3.03 5.3-4.544 8.33h1.514c9.844-3.786 18.932-6.058 24.99-6.816-1.514-.756-2.272-1.514-3.03-2.272-3.786-4.542-8.328-10.6-11.358-17.416"/><path fill="#5465FC" d="M-59.671 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-185.922 623.326c4.224-.768 10.081-1.344 18.047-1.344 8.641 0 14.977 1.824 19.107 5.28 3.84 3.168 6.336 8.256 6.336 14.305 0 6.144-1.92 11.231-5.57 14.687-4.704 4.704-12.096 6.914-20.447 6.914-2.21 0-4.224-.096-5.762-.386v24.387h-11.712v-63.843zm11.711 30.144c1.44.384 3.362.48 5.762.48 8.832 0 14.207-4.32 14.207-11.903 0-7.202-4.992-11.041-13.153-11.041-3.264 0-5.568.288-6.816.576v21.888zM-135.334 676.319c2.69 1.632 7.777 3.362 12.001 3.362 5.184 0 7.488-2.114 7.488-5.186 0-3.168-1.92-4.799-7.68-6.816-9.119-3.168-12.959-8.159-12.863-13.633 0-8.255 6.816-14.687 17.663-14.687 5.184 0 9.696 1.344 12.385 2.784l-2.304 8.352c-2.016-1.152-5.762-2.688-9.89-2.688-4.224 0-6.527 2.016-6.527 4.896 0 2.978 2.208 4.416 8.159 6.53 8.448 3.072 12.385 7.392 12.481 14.303 0 8.45-6.623 14.593-19.009 14.593-5.664 0-10.753-1.346-14.207-3.266l2.303-8.544z"/><path fill="#F57C00" d="M156.35 604.638v142.084c0 4.624-3.75 8.332-8.334 8.332H-10.316a8.304 8.304 0 0 1-8.334-8.332V563.388c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M47.875 669.839l-5.568 18.337H30.114l20.739-64.707h15.073l21.023 64.707H74.277l-5.856-18.337H47.875zm18.529-8.928l-5.088-15.937c-1.248-3.936-2.304-8.354-3.264-12.097h-.192c-.96 3.744-1.92 8.258-3.074 12.097l-4.992 15.937h16.61zM107.586 628.366c0 3.552-2.592 6.336-6.72 6.336-3.938 0-6.53-2.784-6.53-6.336 0-3.648 2.69-6.434 6.624-6.434 4.034 0 6.53 2.786 6.626 6.434m-12.578 13.057h11.905v46.754H95.008v-46.754z"/><path fill="#C11187" d="M629.717 604.638v142.084c0 4.624-3.75 8.332-8.334 8.332H463.051a8.304 8.304 0 0 1-8.334-8.332V563.388c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M508.042 623.901h11.807v64.707h-11.807zM576.007 620.445v55.011c0 4.798.194 9.983.386 13.151h-10.561l-.48-7.392h-.192c-2.784 5.182-8.448 8.448-15.263 8.448-11.137 0-19.971-9.505-19.971-23.905-.096-15.649 9.698-24.961 20.931-24.961 6.432 0 11.042 2.688 13.151 6.144h.192v-26.497h11.807zM564.2 661.343c0-.96-.096-2.114-.288-3.074-1.056-4.608-4.8-8.351-10.175-8.351-7.584 0-11.809 6.719-11.809 15.457 0 8.544 4.226 14.783 11.714 14.783 4.8 0 9.023-3.264 10.177-8.352.286-1.056.382-2.208.382-3.456v-7.007z"/><path fill="#F57C00" d="M408.375 604.638v142.084c0 4.624-3.75 8.332-8.334 8.332H241.709a8.304 8.304 0 0 1-8.334-8.332V563.388c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F57C00" d="M310.073 619.961h21.999v21.999h-21.999z"/><path fill="#FFF" d="M367.873 648.46v-5.5h-23.791c7.5 5.298 14.101 13.349 19.571 24.041 7.678 15.011 10.454 29.8 10.566 30.422l-7.866 1.448c-.09-.484-8.178-42.534-33.412-53.021v4.978h-23.735v-4.978c-25.237 10.49-33.324 52.537-33.412 53.021l-7.868-1.448c.114-.622 2.888-15.411 10.568-30.422 5.47-10.691 12.071-18.743 19.571-24.041h-24.187v5.5h-18.999v-18.999h18.999v5.5h35.328v-7.867h23.735v7.867h34.932v-5.5h18.999v18.999h-18.999zm-39.8-16.499h-13.999v13.999h13.999v-13.999z"/><path fill="#C11187" d="M842.467 862.664v142.084c0 4.624-3.75 8.332-8.334 8.332H675.801a8.304 8.304 0 0 1-8.334-8.332V821.414c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M743.257 945.443l-6.76-12.408c-2.686-4.816-4.444-8.15-6.204-11.76h-.278c-1.482 3.61-3.148 6.944-5.648 11.76l-6.206 12.408h-13.056l18.52-31.576-17.78-30.836H718.9l6.762 12.872c2.036 3.888 3.518 6.944 5.186 10.464h.184c1.668-3.89 2.964-6.668 4.908-10.464l6.666-12.872h13.056l-18.24 30.466 18.982 31.946h-13.147zM804.459 879.698v53.06c0 4.628.186 9.63.37 12.686h-10.186l-.462-7.13h-.184c-2.688 4.998-8.15 8.148-14.724 8.148-10.742 0-19.262-9.168-19.262-23.056-.092-15.094 9.352-24.078 20.188-24.078 6.204 0 10.65 2.594 12.686 5.928h.184v-25.558h11.39zm-11.39 39.448c0-.926-.092-2.038-.276-2.964-1.02-4.444-4.632-8.056-9.818-8.056-7.314 0-11.388 6.482-11.388 14.908 0 8.242 4.074 14.26 11.296 14.26 4.63 0 8.706-3.148 9.816-8.054.278-1.02.37-2.132.37-3.336v-6.758z"/></g><path fill="#A0F" d="M156.355 862.665v142.084c0 4.624-3.75 8.332-8.334 8.332H-10.311a8.304 8.304 0 0 1-8.334-8.332V821.415c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M110.343 874.917H29.495l-14.14 31.298 54.564 62.868 54.562-62.868-14.138-31.298zm-3.72 6.926l8.282 20.65h-14.884l6.602-20.65zm-7.058-.33l-6.042 19.378-15.102-19.378h21.144zm-14.072 20.98h-31.15l15.576-19.814 15.574 19.814zm-24.078-20.98l-15.1 19.378-6.044-19.378h21.144zm-28.202.33l6.602 20.65H24.931l8.282-20.65zm-6.632 27.244h16.126l16.454 37.538-32.58-37.538zm23.326 0H89.929l-20.01 45.652-20.012-45.652zm30.768 37.54l16.454-37.538h16.126l-32.58 37.538z"/><path fill="#D32F2F" d="M407.859 862.664v142.084c0 4.634-3.724 8.332-8.282 8.332H242.181c-4.608 0-8.28-3.698-8.28-8.332V821.414c0-4.584 3.698-8.334 8.28-8.334h116.408l49.27 49.584z"/><path fill="#FFF" d="M370.345 887.701c.579.149 1.173.25 1.734.453 1.728.628 2.294 2.07 2.253 3.887-.056 2.523-.229 5.022-.935 7.483-1.308 4.549-4.119 7.567-8.195 9.358-2.871 1.261-5.893 1.72-8.935 2.076-2.098.243-4.193.535-6.287.821-.28.038-.561.149-.823.272-1.119.519-1.41 1.537-.582 2.444a21.79 21.79 0 0 0 2.803 2.557c3.754 2.883 7.615 5.62 11.301 8.595 4.167 3.362 7.819 7.291 10.595 12.06 2.726 4.684 4.108 9.789 3.925 15.378-.048 1.475-.722 2.326-2.111 2.396-2.159.107-4.32.122-6.479.143-2.682.024-5.362.014-8.044.02-2.732.004-5.466.002-8.201.012-1.952.006-3.905.032-5.857.034a18.846 18.846 0 0 1-1.714-.072c-2.436-.213-3.34-1.159-3.585-3.744-.35-3.664-.907-7.263-2.306-10.649-2.35-5.696-6.167-9.981-11.098-13.207-4.259-2.785-8.891-4.531-13.923-4.972-4.961-.436-9.579.553-13.287 4.575-2.241 2.43-3.477 5.428-4.342 8.621-.392 1.445-.734 2.905-1.165 4.336-.491 1.626-1.811 1.96-3.147 2.006-2.916.099-5.831.099-8.746.125-2.682.024-5.362.028-8.044.042-2.473.014-4.947.052-7.418.03-.646-.006-1.294-.153-1.924-.308-.936-.227-1.314-.779-1.261-1.781.328-6.092 2.74-11.054 7.364-14.82 3.811-3.102 8.145-5.034 12.694-6.352 4.315-1.251 8.696-2.227 13.042-3.356 1.219-.316 2.443-.656 3.614-1.135 1.873-.766 2.179-2.022.7-3.4-1.419-1.326-3.006-2.479-4.623-3.529-4.352-2.825-8.839-5.428-12.798-8.873-4.062-3.535-7.462-7.615-9.315-12.969-.974-2.817-1.38-5.744-1.374-8.754 0-1.155.557-2.05 1.783-2.34a21.883 21.883 0 0 1 4.406-.573c3.332-.09 6.664-.052 9.996-.058 2.682-.004 5.364.01 8.044.008 1.98 0 3.958-.02 5.937-.016.909.002 1.819.046 2.73.066 1.533.034 2.197.543 2.491 2.141.348 1.889.584 3.803.885 5.704 1.078 6.814 3.632 12.766 8.76 17.178 3.527 3.036 7.639 4.449 12.194 4.646 2.382.102 4.744.068 7.046-.751 3.547-1.261 5.269-4.096 4.937-8.018-.151-1.813-.272-3.63-.382-5.446-.074-1.235.312-1.982 1.469-2.207 1.451-.284 2.946-.38 4.418-.403 2.942-.042 5.883.03 8.825.044 2.68.01 5.362-.01 8.042.012 1.638.012 3.273.074 4.911.114l.002.096"/><path fill="#D32F2F" d="M629.721 862.664v142.084c0 4.624-3.75 8.332-8.334 8.332H463.055a8.304 8.304 0 0 1-8.334-8.332V821.414c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M552.337 992.754s-.022-23.724 0-30.064c0-.318-.008-.636 0-.952.07-3.12 1.69-4.742 4.84-4.752 6.614-.02 13.226 0 19.84 0 5.562 0 8.37-2.794 8.372-8.35.002-22.692-.008-45.384.008-68.078.002-3.048-1.018-5.546-3.796-6.986-1.046-.542-2.326-.878-3.502-.88a23363.06 23363.06 0 0 0-72.018-.05c-3.896.002-6.908 3.018-7.108 6.962-.046.904-.01 1.812-.01 2.718v66.582c0 5.096 3.012 8.082 8.12 8.08 11.776-.006 35.328-.002 35.328-.002v9.812s-23.946-.008-36.04.008c-2.722.002-5.344-.46-7.734-1.76-5.898-3.212-9.34-8.042-9.346-14.932-.024-23.372.092-46.744-.07-70.114-.05-7.154 5.04-15.584 14.712-17.022a18.82 18.82 0 0 1 2.704-.2c23.916-.024 47.83-.042 71.746-.05 9-.004 16.8 7.706 16.812 16.718.034 23.462.034 46.924.006 70.388-.012 9.346-7.282 17.056-16.64 17.254-4.708.098-9.422.056-14.13.014-1.088-.01-2.122 1.36-2.122 1.36l-9.972 24.296z"/><path d="M525.976 902.34v2.236c.002 11.594.006 23.186.006 34.778 0 1.808-.004 1.814-1.772 1.814-3.432.004-6.864.002-10.436.002-.036-.67-.09-1.194-.09-1.716-.004-16.03.014-32.062-.03-48.092-.004-1.318.376-1.672 1.672-1.656 5.432.068 10.868.076 16.302-.008 1.324-.02 1.76.446 2.066 1.66 2.618 10.354 5.304 20.69 7.972 31.032.12.466.272.922.734 1.436.158-.416.358-.824.47-1.252 2.75-10.552 5.506-21.1 8.212-31.664.244-.948.66-1.198 1.582-1.194 5.616.016 11.23.01 16.844-.068 1.212-.016 1.53.366 1.528 1.544-.034 16.168-.034 32.334.002 48.5.004 1.182-.31 1.582-1.52 1.548-3.214-.092-6.43-.056-9.644-.082-.398-.004-.792-.07-1.36-.124V902.49l-.38-.072c-.148.432-.32.86-.442 1.3-3.336 12.034-6.678 24.068-9.978 36.114-.276 1.008-.706 1.394-1.766 1.36-2.398-.074-4.802-.08-7.2-.002-1.094.036-1.586-.296-1.884-1.388-3.3-12.09-6.654-24.168-9.996-36.246-.116-.42-.266-.832-.4-1.248-.164.012-.328.022-.492.032"/></g><path fill="#A0F" d="M-59.667 862.664v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V821.414c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-194.223 883.831c4.416-.768 11.04-1.344 17.856-1.344 9.314 0 15.65 1.536 19.972 5.184 3.55 2.976 5.568 7.488 5.568 12.962 0 8.352-5.666 14.016-11.714 16.224v.29c4.608 1.726 7.394 6.238 9.024 12.48 2.018 8.064 3.744 15.554 5.09 18.05h-12.194c-.96-1.92-2.496-7.202-4.32-15.266-1.824-8.45-4.896-11.136-11.616-11.328h-5.954v26.594h-11.712v-63.846zm11.712 28.61h7.01c7.968 0 12.96-4.224 12.96-10.656 0-7.104-4.992-10.37-12.674-10.37-3.744 0-6.144.288-7.296.576v20.45zM-139.6 883.831c4.224-.768 10.08-1.344 18.048-1.344 8.642 0 14.978 1.824 19.108 5.28 3.84 3.168 6.336 8.256 6.336 14.306 0 6.144-1.92 11.232-5.57 14.688-4.704 4.704-12.096 6.914-20.448 6.914-2.21 0-4.224-.096-5.762-.386v24.388H-139.6v-63.846zm11.712 30.146c1.442.384 3.362.48 5.762.48 8.832 0 14.208-4.32 14.208-11.904 0-7.202-4.992-11.042-13.154-11.042-3.264 0-5.568.288-6.816.576v21.89z"/><path fill="#7757BC" d="M-59.667 1120.689v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-180.499 1184.253l-5.408 17.81h-11.842l20.142-62.846h14.64l20.42 62.846h-12.31l-5.686-17.81h-19.956zm17.996-8.671l-4.942-15.48c-1.212-3.822-2.238-8.112-3.17-11.748h-.186c-.932 3.636-1.866 8.02-2.984 11.748l-4.85 15.48h16.132zM-127.355 1182.574c.28 8.206 6.714 11.75 13.986 11.75 5.316 0 9.14-.746 12.588-2.052l1.678 7.926c-3.914 1.586-9.322 2.798-15.85 2.798-14.732 0-23.404-9.046-23.404-22.94 0-12.586 7.646-24.428 22.192-24.428 14.732 0 19.58 12.122 19.58 22.098 0 2.146-.186 3.824-.372 4.848h-30.398zm19.954-8.018c.096-4.196-1.772-11.096-9.416-11.096-7.086 0-10.07 6.434-10.538 11.096h19.954z"/><path fill="#009497" d="M156.355 1120.691v142.084c0 4.624-3.75 8.332-8.334 8.332H-10.311a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M68.855 1121.709l32.85 40.88v57.67h21.9v-69.35zM14.105 1220.259h21.9v-57.67l32.85-40.88-54.75 29.2z"/><path fill="#FFF" d="M68.855 1217.339l22.63-24.554-22.63-71.076-23.36 71.076z"/><path fill="#D32F2F" d="M-59.667 1378.716V1520.8c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-126.028 1453.022h-42.28v-42.278h42.28v42.278zm8-50.278h-58.28v58.278h58.28v-58.278z"/><path fill="#FFF" d="M-154.742 1424.308h15.15v15.15h-15.15zM-152.096 1375.392h9.856v29.25h-9.856zM-152.096 1458.974h9.856v29.4h-9.856zM-120.834 1426.954h30.158v9.856h-30.158zM-203.658 1426.954h29.492v9.856h-29.492z"/><path fill="#03A9F4" d="M629.721 1378.715v142.084c0 4.624-3.75 8.332-8.334 8.332H463.055a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M542.221 1485.524l-49.5-27.692v-54.016l49.5-23.076 49.5 23.076v54.016l-49.5 27.692zm-40.5-32.97l40.5 22.658 40.5-22.658v-43.004l-40.5-18.88-40.5 18.88v43.004z"/><path fill="#FFF" d="M542.2 1436.505l-47.176-26.392 4.394-7.856 42.824 23.958 42.816-23.478 4.327 7.892z"/><path fill="#FFF" d="M542.221 1484.868a4.502 4.502 0 0 1-4.5-4.5v-49.008c0-2.484 2.016-4.5 4.5-4.5s4.5 2.016 4.5 4.5v49.008c0 2.484-2.016 4.5-4.5 4.5"/><path fill="#546E7A" d="M396.989 1378.715v142.084c0 4.624-3.75 8.332-8.334 8.332H230.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M366.012 1436.93c-.66-7.46-2.24-13.22-5-18.12-2.88-5.12-6.56-8.7-11.22-11-4.46-2.18-9.44-3.54-16.18-4.4-6.22-.8-12.78-1.02-20.98-.66-3.18.14-6.9.34-10.48.92-3.74.58-6.44 1.26-8.8 2.22-5 2.06-8.96 5.96-12.12 11.96-1.84 3.48-2.92 7.62-3.32 12.64-.58 7.4-.22 12.98 1.14 18.1.76 2.82 1.86 5.02 3.36 6.72 3.62 4.08 8.42 6.76 15.54 8.7 2.48.68 5.06 1.04 7.28 1.3 6.22.76 11.32.46 16.12-.96 5.34-1.58 10.2-3.9 14.48-6.92 2.18-1.54 4.24-3.42 6.12-5.22.62-.6.74-.76-.04-1.78-2.24-2.94-5.3-5.4-9.34-7.58-2.72-1.44-5.42-2.08-8.36-1.94-4.04.18-7.8.24-11.52.14-2.64-.06-5.18-.12-7.52-.9-3.14-1.04-6.12-2.64-8.98-4.2-1.84-.98-3.28-2.24-4.48-3.36-.48-.44-1.1-1.14-1.06-2.04.04-.92.74-1.58 1.34-2.04 1.06-.82 2.16-1.58 3.26-2.3l1.94-1.28c2.44-1.58 4.94-3.2 7.5-4.72l.66-.38c2.14-1.28 4.36-2.6 6.78-3.34 3.52-1.08 7.18-1.22 9.98-1.22.7 0 1.38 0 2.08.02 4.78.1 9.08.9 13.1 2.44 3.44 1.32 6.36 3.18 8.68 5.52 4.54 4.56 7.1 10.58 7.8 18.46.5 5.4.26 10.76-.7 15.88-.4 2.12-1.14 4.22-1.88 6.2-1.08 2.94-3.36 4.9-5.42 6.52-1.54 1.22-3.04 2.08-4.48 2.6-2.94 1.04-5.6 1.76-8.16 2.24l-.66.12c-4.16.78-8.46 1.58-12.76 1.88-4.16.26-8.6.38-14.34.38-1.44 0-2.86 0-4.3-.02-7.74-.06-13.9-1.06-19.36-3.16-3.74-1.42-6.76-3.68-9.02-6.72-2.62-3.54-4.36-7.84-5.16-12.8-1.16-7.24-1.84-12.82-2.24-18.1-.62-8.08.14-15.64 2.28-22.44.74-2.4 1.86-4.8 3.3-7.12 1.68-2.68 4.08-4.98 7.18-6.82 3.38-2.02 7.22-3.32 12.44-4.2 1.5-.26 3.02-.44 4.54-.62.92-.12 1.84-.22 2.76-.36 1.84-.24 3.68-.52 5.52-.78 3.3-.48 6.6-.96 9.9-1.38 5.14-.64 10.2-.72 14.04-.72 2.2 0 4.4.02 6.62.06l1.04.02c3.28.04 6.6.2 9.82.34 1.58.08 3.18.16 4.76.22h.4c0-.08 0-.18-.02-.32l-.76-6.14-.96-7.92-.16-.16c-.34 0-.66.06-.98.1-1.36.24-2.74.48-4.1.72-2.92.5-5.92 1.04-8.92 1.44-7.28.96-13.34 1.74-19.7 2.28l-3.96.32c-7.5.58-15.26 1.2-22.72 2.74-2.62.54-5.66 1.2-8.58 2.12-2.94.92-5.8 2.1-8.22 3.14-2.96 1.28-5.52 3.1-7.62 5.42-3.94 4.36-6.66 9.78-8.58 17.06-1.36 5.22-2.02 10.96-2.12 18.58-.08 8.3.94 16.68 3.14 25.58 1.82 7.34 4.02 13.02 6.92 17.94 2.08 3.5 4.48 6.08 7.32 7.88 3.72 2.38 7.02 3.8 10.38 4.5l2.3.5c2.96.64 6.02 1.32 9.02 1.6 4.24.38 8.58.56 12.78.72l4.4.18.02-.3h.96c1.2 0 2.4.02 3.6.04 2.6.02 5.2.06 7.8-.08 7.2-.4 14.8-1.02 21.92-3.64 2.36-.88 4.84-1.88 6.86-3.3 2.58-1.84 4.98-4.08 7.3-6.24l.56-.54c4.8-4.48 7.56-10.12 8.16-16.72.72-7.88.74-15.78.08-23.5m-55.48 20.6c.04-.44.1-.88.2-1.3.58-2.4 1.16-4.82 1.8-7.2.2-.76.54-2.04 1.98-2.04.3 0 .62.06 1.16.18 4.3 1.06 8.62 2.12 12.94 3.22.36.08.68.24.96.38l.96.44-.14 1.7-5.04 1.8c-3.94 1.38-7.86 2.74-11.8 4.1-.48.16-.96.22-1.4.28l-.52.06-1.32.22.22-1.84z"/><path fill="#FFF" d="M319.944 1419.89c-.42 1.08-.86 2.16-1.28 3.24-.62 1.54-1.24 3.1-1.84 4.66-.08.2-.1.22-.7.32-.06.02-.14.04-.22.04l-1.84-.38c-1.64-.34-3.26-.68-4.88-1.08-1.04-.24-2.06-.58-3.02-.92.76-.3 1.52-.6 2.28-.92 1.6-.64 3.18-1.28 4.78-1.96 1.34-.58 2.68-1.18 4.02-1.8.88-.4 1.76-.8 2.7-1.2"/><path fill="#009497" d="M156.355 1378.715v142.084c0 4.624-3.75 8.332-8.334 8.332H-10.311a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M115.398 1479.674H22.312v-93.086h93.086v93.086zm-89.086-4h85.086v-85.086H26.312v85.086z"/><path fill="#FFF" d="M63.494 1388.588h49.904v49.904H63.494z"/><path fill="#62BB37" d="M384.378 1672.262v142.935c0 4.661-3.746 8.382-8.332 8.382H217.707c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M269.727 1750.487c0 2.76 1.793 4.609 4.523 4.609h4.523v16.094c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.784-3.201 6.784-6.901v-16.094h9.074v16.094c0 3.67 3.173 6.901 6.785 6.901 3.611 0 6.785-3.201 6.785-6.901v-16.094h4.523c2.731 0 4.521-1.849 4.521-4.609v-45.99h-54.299v45.99zm-11.335-45.99c-3.641 0-6.784 3.201-6.784 6.901v32.188c0 3.67 3.173 6.901 6.784 6.901 3.612 0 6.785-3.201 6.785-6.901v-32.188c-.001-3.669-3.173-6.901-6.785-6.901m76.97 0c-3.611 0-6.783 3.201-6.783 6.901v32.188c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.785-3.201 6.785-6.901v-32.188c.03-3.669-3.143-6.901-6.785-6.901m-22.612-26.664l5.903-5.961c.911-.911.911-2.32 0-3.201-.91-.911-2.232-.911-3.171 0l-6.784 6.901c-3.171-2.292-7.253-3.201-11.776-3.201s-8.575.909-12.245 2.761l-6.344-6.931c-.881-.441-2.732-.441-3.614 0-.441.911-.441 2.76 0 3.672l5.903 5.961c-6.344 5.05-10.865 12.863-10.865 22.053h54.299c.001-9.164-4.55-17.445-11.306-22.054m-24.903 12.89h-4.523v-4.611h4.523v4.611zm22.613 0h-4.523v-4.611h4.523v4.611z"/><path fill="#ACACAC" d="M1091.525 1927.589v142.084c0 4.624-3.75 8.332-8.334 8.332H924.859a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M959.994 1945.886h88.062v12.848h-88.062zM959.994 1975.748h88.062v12.848h-88.062zM959.994 2005.61h61.644v12.846h-61.644z"/><path fill="#03A9F4" d="M856.502 1927.859v141.33c0 4.598-3.717 8.29-8.242 8.29H691.744c-4.573 0-8.242-3.693-8.242-8.29v-182.366c0-4.548 3.669-8.29 8.242-8.29h115.773l48.985 49.326z"/><path fill="#FFF" d="M822.322 1980.084c-.135 6.281-2.731 12.037-6.867 16.172-4.146 4.134-9.756 6.671-15.977 6.671H788.43a34.074 34.074 0 0 0 5.939-9.161h5.11c7.404 0 13.513-6.098 13.685-13.818.159-7.513-5.953-13.439-13.685-13.671h-21.634c-3.049 0-5.891 1.036-8.209 2.793a13.78 13.78 0 0 0-3.292 3.536 14.142 14.142 0 0 0-2.318 7.476l-9.159-.135c.014-.817.074-1.634.183-2.427.817-6.462 4.281-12.145 9.245-15.866 3.806-2.854 8.501-4.548 13.55-4.548h21.634c12.476.27 23.11 10.27 22.843 22.978"/><path fill="#FFF" d="M717.683 1979.95c.135-6.281 2.731-12.036 6.866-16.172 4.146-4.134 9.756-6.671 15.977-6.671h11.048a34.05 34.05 0 0 0-5.939 9.161h-5.11c-7.404 0-13.513 6.098-13.685 13.818-.159 7.513 5.953 13.439 13.685 13.671h21.634c3.049 0 5.891-1.036 8.209-2.793a13.748 13.748 0 0 0 3.292-3.536 14.142 14.142 0 0 0 2.318-7.476l9.159.135a20.059 20.059 0 0 1-.183 2.427c-.817 6.462-4.281 12.145-9.245 15.866-3.806 2.854-8.501 4.548-13.55 4.548h-21.634c-12.476-.269-23.11-10.269-22.842-22.978"/><path fill="#7757BC" d="M397.165 1927.79v142.084c0 4.634-3.754 8.332-8.349 8.332H230.159c-4.645 0-8.346-3.698-8.346-8.332V1886.54c0-4.584 3.727-8.334 8.346-8.334H347.5l49.665 49.584z"/><path fill="#FFF" d="M337.965 1973.393v-17.866c0-3.066-2.28-5.109-5.71-5.109h-68.351c-3.405 0-5.71 2.042-5.71 5.109v51.006c0 3.066 2.278 5.108 5.71 5.108h68.377c3.405 0 5.71-2.042 5.71-5.108v-17.84l22.791 20.408v-56.114l-22.817 20.406z"/><path fill="#FF5722" d="M-59.667 1927.59v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V1886.34c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-178.718 1983.242l24.53 27.062 33.552-46.552 38.612 62.062H-208.31zM-156.542 1952.334c0 8.444-6.844 15.288-15.288 15.288-8.442 0-15.288-6.844-15.288-15.288 0-8.444 6.846-15.288 15.288-15.288 8.444 0 15.288 6.844 15.288 15.288"/><path fill="#FDCA07" d="M617.478 1928.276v142.084c0 4.624-3.75 8.332-8.334 8.332H450.812a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M517.715 1877.318h12.262v12.262h-12.262zM517.715 1901.844h12.262v12.262h-12.262zM517.715 1925.364h12.262v12.262h-12.262zM517.715 1949.592h12.262v27.04h-12.262zM529.979 1889.582h12.262v12.262h-12.262zM529.979 1914.106h12.262v12.262h-12.262zM529.979 1937.54h12.262v12.262h-12.262z"/><path fill="#FFF" d="M523.847 1964.37h18.394v12.262h-18.394zM544.713 2021.066l-4.324-33.834-21.932-.198-3.466 34.032c-.484 3.656 1.572 6.864 6.52 6.864h16.682c4.736 0 7.034-3.328 6.52-6.864zm-7.154-.326h-15.414v-6.292h15.414v6.292z"/><path fill="#FFED18" d="M1328.8 1921.909h-78.974l-17.276-17.5h-61.24a8.76 8.76 0 0 0-8.76 8.76v129.683c0 4.812 3.938 8.75 8.75 8.75h157.5c4.812 0 8.75-3.938 8.75-8.75v-112.193c0-4.813-3.938-8.75-8.75-8.75"/><path fill="#FDCA07" d="M1337.55 2042.851c0 4.812-3.938 8.75-8.75 8.75h-157.5c-4.812 0-8.75-3.938-8.75-8.75v-93.984c0-4.812 3.938-8.75 8.75-8.75h157.5c4.812 0 8.75 3.938 8.75 8.75v93.984z"/><g font-family="'MicrosoftYaHei'" font-size="40"><text transform="translate(-400.696 354.195)">M</text><text transform="translate(-361.615 354.195)">A</text><text transform="translate(-334.015 354.195)">C</text></g><text transform="translate(-385.815 103.49)" font-family="'MicrosoftYaHei'" font-size="40">WIN</text><text transform="translate(-509.616 632.053)" font-family="'MicrosoftYaHei'" font-size="40">图形／印刷</text><text transform="translate(-589.616 922.57)" font-family="'MicrosoftYaHei'" font-size="40">产品／思维导图</text><text transform="translate(-509.616 1180.597)" font-family="'MicrosoftYaHei'" font-size="40">影视／广告</text><text transform="translate(-389.616 1714.65)" font-family="'MicrosoftYaHei'" font-size="40">代码</text><text transform="translate(-389.616 2011.68)" font-family="'MicrosoftYaHei'" font-size="40">通用</text><text transform="translate(-509.616 1406.13)" font-family="'MicrosoftYaHei'" font-size="40">工业／建筑</text><path fill="#FF40B6" d="M156.355 1927.289v142.935c0 4.662-3.746 8.382-8.332 8.382H-10.316c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384H106.79l49.565 49.881z"/><path fill="#FFF" d="M39.817 1937.935a2.611 2.611 0 0 0-2.62 2.62v67.198a15.833 15.833 0 0 0-7.911-2.096c-8.724 0-15.772 7.046-15.772 15.744s7.048 15.746 15.772 15.746 15.77-7.048 15.77-15.746c0-.627-.026-1.283-.105-1.859.079-.235.105-.497.105-.761v-55.277l55.251-9.744v38.247a15.854 15.854 0 0 0-7.911-2.096c-8.724 0-15.772 7.048-15.772 15.746s7.048 15.744 15.772 15.744 15.77-7.046 15.77-15.744c0-.63-.027-1.283-.105-1.861a2.43 2.43 0 0 0 .105-.758v-73.512c0-1.284 0-2.881-2.173-2.567-.447.051-66.176 10.976-66.176 10.976"/><path fill="#29D3B2" d="M-59.667 1672.563v142.083c0 4.625-3.75 8.333-8.333 8.333h-158.333a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.541 49.583z"/><g fill="#FFF"><path d="M-168.208 1683.135h1.562v7.812h-1.562c-5.836-.205-8.545 1.772-8.125 5.938v16.562c0 4.17-1.67 7.397-5 9.688 3.33 2.295 5 5.522 5 9.688v16.562c-.42 3.955 2.289 5.83 8.125 5.625h1.562v7.812h-1.562c-11.875.415-17.607-3.75-17.188-12.5v-16.875c.205-4.165-2.188-6.25-7.188-6.25h-.938v-7.812h.938c5 0 7.393-2.08 7.188-6.25v-16.562c-.42-9.375 5.313-13.853 17.188-13.438zM-128 1683.135h1.562c11.875-.415 17.602 4.062 17.188 13.438v16.562c0 4.17 2.393 6.25 7.188 6.25h1.25v7.812h-1.25c-4.795 0-7.188 2.085-7.188 6.25v16.875c.414 8.54-5.313 12.705-17.188 12.5H-128v-7.812h1.562c5.83.205 8.539-1.67 8.125-5.625v-16.562c0-4.165 1.664-7.393 5-9.688-3.336-2.29-5-5.518-5-9.688v-16.562c.414-4.165-2.295-6.143-8.125-5.938H-128v-7.812z"/></g><path fill="#29D3B2" d="M156.355 1672.563v142.083c0 4.625-3.75 8.333-8.333 8.333H-10.312a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.542 49.583z"/><ellipse fill="#FFF" cx="68.855" cy="1687.042" rx="42.548" ry="12.063"/><path fill="#FFF" d="M68.855 1723.112c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M68.855 1747.046c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M68.855 1770.98c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#03A9F4" d="M617.478 1672.563v142.083c0 4.625-3.75 8.333-8.333 8.333H450.811a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.542 49.583z"/><path fill="#FFF" d="M504.68 1725.821c.344 20.488 16.447 28.926 31.6 28.926 12.601 0 20-2.805 26.25-6.055l2.582 10.848c-5.332 3.402-11.332 6.916-29.916 6.916-29.999 0-44.979-18.43-44.979-42.014 0-25.137 18.807-44.938 43.084-44.938 27.205 0 36.437 23.932 36.437 39.256 0 3.1-.346 5.51-.518 7.061h-64.54zm50.422-10.848c.174-9.643-5.959-24.621-23.006-24.621-15.324 0-26.039 14.117-27.244 24.621h50.25z"/><path fill="#3F7AD9" d="M-59.667 49.583l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V0"/><path fill="#D46B1C" d="M396.989 49.583l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V0"/><path fill="#58A138" d="M175 49.387l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.196"/><path fill="#2FB69A" d="M617.478 49.583l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V0"/><path fill="#3F7AD9" d="M842.467 49.388l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.194"/><path fill="#718BC8" d="M1314.455 49.582v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.332c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M1276.955 99.998c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M1241.539 99.998c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path fill="#6479AB" d="M1314.455 49.583l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V0"/><path fill="#D46B1C" d="M-59.591 316.411l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#4A5BD7" d="M-59.591 604.922l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V555.34"/><path fill="#58A138" d="M175 316.411l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#3F7AD9" d="M408.38 316.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#6479AB" d="M629.721 316.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M156.438 604.445l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#8C1DCD" d="M156.436 862.473l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V812.89M-59.676 862.473l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V812.89"/><path fill="#624A97" d="M-59.676 1120.492l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M397.165 1927.788l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DCAE29" d="M617.478 1928.275l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#0F797A" d="M156.355 1120.69l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M156.438 1378.524l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#475A63" d="M396.979 1378.523l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M629.721 1378.715l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M617.478 1672.562l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#5BA23A" d="M384.378 1672.562l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M156.438 1672.562l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-59.667 1672.562l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC4C29" d="M-59.667 1927.589l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC3F9D" d="M156.438 1928.078l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M857.502 1927.397l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#969594" d="M1091.525 1927.275l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M408.376 604.647l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M629.721 604.922l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V555.34"/><path fill="#AD282B" d="M842.546 604.922l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V555.34"/><path fill="#9E176D" d="M842.546 862.473l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V812.89"/><path fill="#AD282B" d="M629.721 862.473l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V812.89M408.376 862.473l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V812.89M-59.667 1378.715l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><g><path fill="#718BC8" d="M1067.455 49.656V191.74c0 4.624-3.75 8.332-8.334 8.332H900.789a8.304 8.304 0 0 1-8.334-8.332V8.406c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M1029.955 86.073c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M994.539 86.073c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path opacity=".2" fill="#231815" d="M1017.914 41.322V.072l49.542 49.583h-41.208c-4.584.001-8.334-3.749-8.334-8.333z"/><g fill="#FFF"><path d="M945.718 167.253c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982h-18.685zm12.265-4.931c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265zM974.539 151.318l3.324 5.275c.917 1.49 1.719 2.865 2.521 4.297h.172c.802-1.547 1.605-2.98 2.408-4.412l3.094-5.16h7.68l-9.342 13.412 9.514 14.5h-7.967l-3.439-5.559c-.917-1.49-1.719-2.98-2.521-4.527h-.115c-.802 1.605-1.604 2.98-2.521 4.527l-3.21 5.559h-7.794l9.685-14.213-9.342-13.699h7.853zM1002.041 167.253c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.23 2.982h-18.684zm12.266-4.931c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/fileType/image.png b/src/assets/svg/fileType/image.png
new file mode 100644
index 0000000..0284ad7
Binary files /dev/null and b/src/assets/svg/fileType/image.png differ
diff --git a/src/assets/svg/fileType/other.svg b/src/assets/svg/fileType/other.svg
new file mode 100644
index 0000000..59b0c41
--- /dev/null
+++ b/src/assets/svg/fileType/other.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="200"><path fill="#448AFF" d="M-502.145-1828.423v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-638.186-1811.383h13.228l13.436 56.874h.208l15.002-56.874h13.334l14.584 56.874h.208l13.854-56.874h13.228l-20.52 74.376h-13.232l-14.892-56.876h-.212l-15.206 56.876h-13.44z"/><path fill="#62BB37" d="M-267.478-1828.421v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-387.272-1811.38h15.524l16.874 26.25 17.602-26.25h14.584l-24.582 35.832 26.354 38.542h-15.836l-18.538-28.438-18.856 28.438h-14.896l26.354-38.542z"/><path fill="#F57C00" d="M-45.489-1828.424v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-162.049-1811.384h32.812c5.274 0 9.582.766 12.914 2.292 3.334 1.53 5.9 3.438 7.708 5.728 1.806 2.292 3.038 4.794 3.698 7.5.66 2.71.988 5.208.988 7.5 0 2.294-.328 4.776-.988 7.45-.66 2.672-1.892 5.156-3.698 7.446-1.808 2.29-4.374 4.186-7.708 5.676-3.332 1.498-7.64 2.242-12.914 2.242h-19.792v28.54h-13.02v-74.374zm13.02 35.21h19.06c1.46 0 2.954-.212 4.48-.626a12.867 12.867 0 0 0 4.218-2.032c1.286-.94 2.328-2.188 3.126-3.75.798-1.564 1.196-3.524 1.196-5.884 0-2.43-.346-4.444-1.042-6.042-.692-1.596-1.632-2.866-2.812-3.802-1.18-.94-2.534-1.578-4.06-1.928-1.53-.346-3.162-.52-4.896-.52h-19.27v24.584z"/><path fill="#448AFF" d="M399.989-1828.424v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M278.333-1813.278h14.3l19.69 62.15h.22l20.13-62.15h13.97l-26.84 78.54h-15.288z"/><path fill="#29D3B2" d="M175-1828.423v142.082c0 4.625-3.751 8.333-8.334 8.333H8.334A8.305 8.305 0 0 1 0-1686.341v-183.331c0-4.584 3.709-8.334 8.334-8.334h117.125L175-1828.423z"/><path fill="#FFF" d="M52.388-1821.38h70.225v13.121H95.032v73.626H79.846v-73.626H52.388z"/><path fill="#F57C00" d="M-501.145-1561.972v143.708c0 4.677-3.793 8.427-8.429 8.427h-160.141a8.398 8.398 0 0 1-8.429-8.427v-185.429c0-4.636 3.75-8.429 8.429-8.429h118.462l50.108 50.15z"/><path fill="#FFF" d="M-547.284-1538.087l-33.73 33.73 3.75 4.19 28.869-28.868zM-608.634-1514.251c-23.634 23.634-31.372 45.44-31.372 45.44s21.806-7.738 45.44-31.372l4.072-4.074-14.068-14.066-4.072 4.072zM-585.69-1509.057l-14.067-14.068 38.405-38.405 14.068 14.067zM-640.006-1464.603h92.707v6.274h-92.707z"/><path fill="#62BB37" d="M-267.478-1561.395v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-402.98-1518.612h22.914v41.894h-22.914zM-366.436-1558.27h22.914v81.552h-22.914zM-329.892-1534.306h22.914v57.588h-22.914zM-402.98-1465.48h96.002v6.2h-96.002z"/><path fill="#448AFF" d="M-34.098-1561.396v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334H-83.64l49.542 49.584z"/><path fill="#FFF" d="M-166.963-1505.178v-41.732c0-4.466 3.654-8.12 8.12-8.12h74.49c4.466 0 8.12 3.654 8.12 8.12v41.732M-166.964-1497.795h90.73v8.12h-90.73zM-143.284-1464.441h43.368v8.12h-43.368z"/><path fill="#FFF" d="M-125.66-1494.929h8.12v34.55h-8.12z"/><path fill="#718BC8" d="M187.243-1561.396v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.541 49.584z"/><path fill="#FFF" d="M99.743-1574.979c-27.614 0-50 22.386-50 50s22.386 50 50 50 50-22.386 50-50-22.386-50-50-50zm0 64.584c-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584 0 8.054-6.53 14.584-14.584 14.584zM76.676-1432.766h-4.702v-3.046h-.086c-.668 1.306-1.64 2.242-2.916 2.806a9.85 9.85 0 0 1-4.048.85c-1.77 0-3.316-.312-4.634-.936-1.322-.624-2.418-1.472-3.288-2.546-.872-1.072-1.524-2.342-1.958-3.808-.436-1.466-.654-3.04-.654-4.724 0-2.028.276-3.786.828-5.264.55-1.482 1.284-2.7 2.198-3.658.914-.958 1.958-1.66 3.134-2.11a9.96 9.96 0 0 1 3.59-.676c.698 0 1.406.066 2.134.196a9.66 9.66 0 0 1 2.09.63 8.33 8.33 0 0 1 1.848 1.112 6.16 6.16 0 0 1 1.416 1.588h.086v-11.49h4.962v31.076zm-17.324-11.012c0 .958.124 1.902.37 2.83a7.78 7.78 0 0 0 1.132 2.482 5.727 5.727 0 0 0 1.938 1.74c.782.434 1.71.652 2.784.652 1.104 0 2.054-.23 2.852-.696a5.892 5.892 0 0 0 1.958-1.828 8.278 8.278 0 0 0 1.132-2.546c.246-.942.37-1.908.37-2.894 0-2.496-.558-4.44-1.676-5.834-1.116-1.392-2.632-2.088-4.548-2.088-1.162 0-2.14.24-2.938.718a5.983 5.983 0 0 0-1.958 1.872 7.755 7.755 0 0 0-1.088 2.612 13.58 13.58 0 0 0-.328 2.98M84.249-1455.268h4.702v3.132h.128c.378-.55.784-1.058 1.22-1.522.434-.464.92-.856 1.458-1.176a7.466 7.466 0 0 1 1.85-.762c.698-.188 1.494-.282 2.394-.282 1.364 0 2.634.306 3.808.914 1.176.608 2.01 1.554 2.504 2.828.84-1.158 1.812-2.074 2.916-2.74 1.102-.668 2.482-1.002 4.136-1.002 2.378 0 4.228.58 5.55 1.74 1.318 1.162 1.978 3.106 1.978 5.834v15.538h-4.962v-13.146c0-.898-.03-1.718-.086-2.458-.06-.74-.226-1.378-.502-1.916a2.836 2.836 0 0 0-1.24-1.24c-.55-.29-1.306-.434-2.264-.434-1.68 0-2.9.522-3.654 1.566-.756 1.046-1.132 2.524-1.132 4.44v13.188h-4.962v-14.45c0-1.568-.282-2.75-.85-3.548-.566-.796-1.602-1.196-3.112-1.196a4.54 4.54 0 0 0-1.85.392 4.595 4.595 0 0 0-1.566 1.13c-.45.494-.812 1.104-1.088 1.828-.278.728-.414 1.554-.414 2.482v13.362h-4.962v-22.502zM145.097-1433.941c0 3.396-.95 5.928-2.85 7.596-1.9 1.67-4.636 2.502-8.204 2.502-1.134 0-2.272-.116-3.418-.346a10.209 10.209 0 0 1-3.134-1.176 7.541 7.541 0 0 1-2.37-2.178c-.64-.9-1.018-2-1.134-3.308h4.962c.146.698.392 1.262.742 1.7.346.434.76.776 1.24 1.02a4.658 4.658 0 0 0 1.586.48c.582.072 1.192.108 1.83.108 2.002 0 3.468-.492 4.396-1.48.928-.984 1.392-2.408 1.392-4.266v-3.436h-.086c-.696 1.246-1.646 2.22-2.852 2.916a7.647 7.647 0 0 1-3.896 1.044c-1.798 0-3.328-.312-4.59-.936a8.733 8.733 0 0 1-3.134-2.568c-.828-1.088-1.43-2.344-1.808-3.764-.376-1.422-.566-2.946-.566-4.57 0-1.508.234-2.946.698-4.31s1.132-2.56 2.002-3.592a9.628 9.628 0 0 1 3.2-2.46c1.262-.608 2.69-.912 4.286-.912 1.422 0 2.728.298 3.918.892 1.19.596 2.102 1.53 2.742 2.808h.086v-3.09h4.962v21.326zm-11.012-2.742c1.104 0 2.038-.224 2.808-.674a5.532 5.532 0 0 0 1.872-1.784 7.844 7.844 0 0 0 1.044-2.524c.218-.942.326-1.894.326-2.852s-.116-1.886-.346-2.786c-.234-.9-.588-1.698-1.068-2.394a5.142 5.142 0 0 0-1.872-1.654c-.768-.404-1.69-.608-2.764-.608-1.104 0-2.032.23-2.786.694a5.575 5.575 0 0 0-1.826 1.808 7.74 7.74 0 0 0-1.002 2.524 13.25 13.25 0 0 0-.306 2.808c0 .93.118 1.834.35 2.72.23.886.588 1.676 1.066 2.374a5.669 5.669 0 0 0 1.828 1.696c.74.436 1.631.652 2.676.652"/><path fill="#D32F2F" d="M399.989-1273.367v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M310.975-1245.321c.758 0 .758 0 0 0 .758-3.03 1.516-4.544 1.516-6.816v-1.514c.756-3.786.756-6.816 0-7.572v-.758l-.758-.758s0 .758-.758.758c-1.514 4.544-1.514 9.844 0 16.66m-22.716 52.25c-1.516.756-3.03 1.514-3.786 2.27-5.302 4.544-9.088 9.846-9.844 12.118 4.542-.758 9.086-5.302 13.63-14.388.756 0 .756 0 0 0 .756 0 0 0 0 0m69.666-11.36c-.756-.756-3.786-3.028-14.388-3.028h-1.514v.758c5.3 2.27 10.602 3.786 14.388 3.786H358.683v-.758s-.758 0-.758-.758m3.03 6.058c-1.516.758-3.786 1.516-6.816 1.516-6.058 0-15.146-1.516-22.718-5.302-12.872 1.514-22.716 3.03-30.29 6.058-.756 0-.756 0-1.514.758-9.086 15.902-16.66 23.474-22.718 23.474-1.514 0-2.27 0-3.028-.756l-3.786-2.272v-.758c-.758-1.514-.758-2.272-.758-3.786.758-3.786 5.302-10.602 14.388-15.902 1.514-.758 3.786-2.272 6.816-3.786 2.27-3.786 4.542-8.33 7.572-13.63 3.786-7.574 6.058-15.146 8.328-21.96-3.028-9.088-4.542-14.388-1.512-24.99.756-3.03 3.028-6.058 6.056-6.058h1.516c1.514 0 3.028.758 4.542 1.514 5.302 5.302 3.03 17.416 0 27.26v.758c3.03 8.33 7.574 15.146 12.116 19.688 2.272 1.516 3.786 3.03 6.816 4.544 3.786 0 6.816-.756 9.844-.756 9.088 0 15.146 1.514 17.416 5.3.758 1.514.758 3.028.758 4.544-.758.756-1.514 3.028-3.028 4.542m-49.222-29.532c-1.514 5.3-4.544 11.358-7.572 18.174-1.514 3.03-3.03 5.3-4.544 8.33h1.514c9.844-3.786 18.932-6.058 24.99-6.816-1.514-.756-2.272-1.514-3.03-2.272-3.786-4.542-8.328-10.6-11.358-17.416"/><path fill="#5465FC" d="M-502.149-1273.366v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-628.4-1254.679c4.224-.768 10.082-1.344 18.047-1.344 8.641 0 14.977 1.824 19.107 5.28 3.84 3.168 6.336 8.256 6.336 14.305 0 6.144-1.92 11.231-5.57 14.687-4.704 4.704-12.096 6.914-20.447 6.914-2.21 0-4.224-.096-5.762-.386v24.387H-628.4v-63.843zm11.711 30.144c1.44.384 3.362.48 5.762.48 8.832 0 14.207-4.32 14.207-11.903 0-7.202-4.992-11.041-13.153-11.041-3.264 0-5.568.288-6.816.576v21.888zM-577.812-1201.686c2.69 1.632 7.777 3.362 12.001 3.362 5.184 0 7.488-2.114 7.488-5.186 0-3.168-1.92-4.8-7.68-6.816-9.119-3.168-12.959-8.16-12.863-13.633 0-8.255 6.816-14.687 17.663-14.687 5.184 0 9.696 1.344 12.385 2.784l-2.304 8.352c-2.016-1.152-5.762-2.688-9.89-2.688-4.224 0-6.527 2.016-6.527 4.896 0 2.978 2.208 4.416 8.159 6.53 8.448 3.072 12.385 7.392 12.481 14.303 0 8.449-6.623 14.593-19.009 14.593-5.664 0-10.753-1.346-14.207-3.266l2.303-8.544z"/><path fill="#F57C00" d="M-286.128-1273.367v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-394.603-1208.166l-5.568 18.337h-12.193l20.739-64.707h15.073l21.023 64.707H-368.2l-5.856-18.337h-20.547zm18.529-8.928l-5.088-15.937c-1.248-3.936-2.304-8.354-3.264-12.097h-.192c-.96 3.744-1.92 8.258-3.074 12.097l-4.992 15.937h16.61zM-334.892-1249.639c0 3.552-2.592 6.336-6.72 6.336-3.938 0-6.53-2.784-6.53-6.336 0-3.648 2.69-6.434 6.624-6.434 4.034 0 6.53 2.786 6.626 6.434m-12.578 13.057h11.905v46.754h-11.905v-46.754z"/><path fill="#C11187" d="M187.239-1273.367v142.084c0 4.624-3.75 8.332-8.334 8.332H20.573a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M65.564-1254.104h11.807v64.707H65.564zM133.529-1257.56v55.011c0 4.798.194 9.984.386 13.151h-10.561l-.48-7.392h-.192c-2.784 5.182-8.448 8.448-15.263 8.448-11.137 0-19.971-9.505-19.971-23.905-.096-15.649 9.697-24.961 20.931-24.961 6.432 0 11.042 2.688 13.151 6.144h.192v-26.497h11.807zm-11.807 40.898c0-.96-.096-2.114-.288-3.074-1.056-4.608-4.8-8.351-10.175-8.351-7.584 0-11.809 6.719-11.809 15.457 0 8.543 4.226 14.783 11.713 14.783 4.8 0 9.023-3.264 10.177-8.351.286-1.056.382-2.208.382-3.456v-7.008z"/><path fill="#F57C00" d="M-34.102-1273.367v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F57C00" d="M-132.405-1258.044h21.999v21.999h-21.999z"/><path fill="#FFF" d="M-74.605-1229.546v-5.5h-23.791c7.5 5.298 14.101 13.349 19.571 24.041 7.678 15.011 10.454 29.8 10.566 30.422l-7.866 1.448c-.09-.484-8.178-42.534-33.412-53.021v4.978h-23.735v-4.978c-25.237 10.49-33.324 52.537-33.412 53.021l-7.867-1.448c.114-.622 2.888-15.411 10.568-30.422 5.47-10.691 12.071-18.743 19.571-24.041H-168.6v5.5h-18.999v-18.999h18.999v5.5h35.328v-7.868h23.735v7.868h34.932v-5.5h18.999v18.999h-18.999zm-39.8-16.499h-13.999v13.999h13.999v-13.999z"/><path fill="#C11187" d="M399.989-1015.342v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M300.779-932.562l-6.76-12.408c-2.686-4.816-4.444-8.15-6.204-11.76h-.278c-1.482 3.61-3.148 6.944-5.648 11.76l-6.206 12.408h-13.056l18.52-31.576-17.78-30.836h13.056l6.762 12.872c2.036 3.888 3.518 6.944 5.186 10.464h.184c1.668-3.89 2.964-6.668 4.908-10.464l6.666-12.872h13.056l-18.24 30.466 18.982 31.946h-13.148zM361.981-998.308v53.06c0 4.628.186 9.63.37 12.686h-10.186l-.462-7.13h-.184c-2.688 4.998-8.15 8.148-14.724 8.148-10.742 0-19.262-9.168-19.262-23.056-.092-15.094 9.352-24.078 20.188-24.078 6.204 0 10.65 2.594 12.686 5.928h.184v-25.558h11.39zm-11.39 39.448c0-.926-.092-2.038-.276-2.964-1.02-4.444-4.632-8.056-9.818-8.056-7.314 0-11.388 6.482-11.388 14.908 0 8.242 4.074 14.26 11.296 14.26 4.63 0 8.706-3.148 9.816-8.054.278-1.02.37-2.132.37-3.336v-6.758z"/></g><path fill="#A0F" d="M-286.123-1015.34v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-332.135-1003.088h-80.848l-14.14 31.298 54.564 62.868 54.562-62.868-14.138-31.298zm-3.72 6.926l8.282 20.65h-14.884l6.602-20.65zm-7.058-.33l-6.042 19.378-15.102-19.378h21.144zm-14.072 20.98h-31.15l15.576-19.814 15.574 19.814zm-24.078-20.98l-15.1 19.378-6.044-19.378h21.144zm-28.202.33l6.602 20.65h-14.884l8.282-20.65zm-6.632 27.244h16.126l16.454 37.538-32.58-37.538zm23.326 0H-352.549l-20.01 45.652-20.012-45.652zm30.768 37.54l16.454-37.538h16.126l-32.58 37.538z"/><path fill="#D32F2F" d="M-34.619-1015.342v142.084c0 4.634-3.724 8.332-8.282 8.332h-157.396c-4.608 0-8.28-3.698-8.28-8.332v-183.334c0-4.584 3.698-8.334 8.28-8.334h116.408l49.27 49.584z"/><path fill="#FFF" d="M-72.133-990.304c.579.149 1.173.25 1.734.453 1.728.628 2.294 2.07 2.253 3.887-.056 2.523-.229 5.022-.936 7.483-1.308 4.549-4.119 7.567-8.195 9.358-2.871 1.261-5.893 1.72-8.935 2.076-2.098.243-4.193.535-6.287.821-.28.038-.561.149-.823.272-1.119.519-1.41 1.537-.582 2.444a21.79 21.79 0 0 0 2.803 2.557c3.754 2.883 7.615 5.62 11.301 8.595 4.167 3.362 7.819 7.291 10.595 12.06 2.726 4.684 4.108 9.789 3.925 15.378-.048 1.475-.722 2.326-2.111 2.396-2.159.107-4.32.122-6.479.143-2.682.024-5.362.014-8.044.02-2.732.004-5.466.002-8.201.012-1.952.006-3.905.032-5.857.034a18.846 18.846 0 0 1-1.714-.072c-2.436-.213-3.34-1.159-3.585-3.744-.35-3.664-.907-7.263-2.306-10.649-2.35-5.696-6.167-9.981-11.098-13.207-4.259-2.785-8.891-4.531-13.923-4.972-4.961-.436-9.579.553-13.287 4.575-2.241 2.43-3.477 5.428-4.342 8.621-.392 1.445-.734 2.905-1.165 4.336-.491 1.626-1.811 1.96-3.147 2.006-2.916.099-5.831.099-8.746.125-2.682.024-5.362.028-8.044.042-2.473.014-4.947.052-7.418.03-.646-.006-1.294-.153-1.924-.308-.936-.227-1.314-.779-1.261-1.781.328-6.092 2.74-11.054 7.364-14.82 3.811-3.102 8.145-5.034 12.694-6.352 4.315-1.251 8.696-2.227 13.042-3.356 1.219-.316 2.443-.656 3.614-1.135 1.873-.766 2.179-2.022.7-3.4-1.419-1.326-3.006-2.479-4.623-3.529-4.352-2.825-8.839-5.428-12.798-8.873-4.062-3.535-7.462-7.615-9.315-12.969-.974-2.817-1.38-5.744-1.374-8.754 0-1.155.557-2.05 1.783-2.34a21.873 21.873 0 0 1 4.406-.573c3.332-.09 6.664-.052 9.996-.058 2.682-.004 5.364.01 8.044.008 1.98 0 3.958-.02 5.937-.016.909.002 1.819.046 2.73.066 1.533.034 2.197.543 2.491 2.141.348 1.889.584 3.803.885 5.704 1.078 6.814 3.631 12.766 8.76 17.178 3.527 3.036 7.639 4.449 12.194 4.646 2.382.102 4.744.068 7.046-.751 3.547-1.261 5.269-4.096 4.937-8.018-.151-1.813-.272-3.63-.382-5.446-.074-1.235.312-1.982 1.469-2.207 1.451-.284 2.946-.38 4.418-.403 2.942-.042 5.883.03 8.825.044 2.68.01 5.362-.01 8.042.012 1.638.012 3.273.074 4.911.114l.003.096"/><path fill="#D32F2F" d="M187.244-1015.342v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M109.86-885.251s-.022-23.724 0-30.064c0-.318-.008-.636 0-.952.07-3.12 1.69-4.742 4.84-4.752 6.614-.02 13.226 0 19.84 0 5.562 0 8.37-2.794 8.372-8.35.002-22.692-.008-45.384.008-68.078.002-3.048-1.018-5.546-3.796-6.986-1.046-.542-2.326-.878-3.502-.88a23363.06 23363.06 0 0 0-72.018-.05c-3.896.002-6.908 3.018-7.108 6.962-.046.904-.01 1.812-.01 2.718v66.582c0 5.096 3.012 8.082 8.12 8.08 11.776-.006 35.328-.002 35.328-.002v9.812s-23.946-.008-36.04.008c-2.722.002-5.344-.46-7.734-1.76-5.898-3.212-9.34-8.042-9.346-14.932-.024-23.372.092-46.744-.07-70.114-.05-7.154 5.04-15.584 14.712-17.022a18.82 18.82 0 0 1 2.704-.2c23.916-.024 47.83-.042 71.746-.05 9-.004 16.8 7.706 16.812 16.718.034 23.462.034 46.924.006 70.388-.012 9.346-7.282 17.056-16.64 17.254-4.708.098-9.422.056-14.13.014-1.088-.01-2.122 1.36-2.122 1.36l-9.972 24.296z"/><path d="M83.498-975.665v2.236c.002 11.594.006 23.186.006 34.778 0 1.808-.004 1.814-1.772 1.814-3.432.004-6.864.002-10.436.002-.036-.67-.09-1.194-.09-1.716-.004-16.03.014-32.062-.03-48.092-.004-1.318.376-1.672 1.672-1.656 5.432.068 10.868.076 16.302-.008 1.324-.02 1.76.446 2.066 1.66 2.618 10.354 5.304 20.69 7.972 31.032.12.466.272.922.734 1.436.158-.416.358-.824.47-1.252 2.75-10.552 5.506-21.1 8.212-31.664.244-.948.66-1.198 1.582-1.194 5.616.016 11.23.01 16.844-.068 1.212-.016 1.53.366 1.528 1.544-.034 16.168-.034 32.334.002 48.5.004 1.182-.31 1.582-1.52 1.548-3.214-.092-6.43-.056-9.644-.082-.398-.004-.792-.07-1.36-.124v-38.544l-.38-.072c-.148.432-.32.86-.442 1.3-3.336 12.034-6.678 24.068-9.978 36.114-.276 1.008-.706 1.394-1.766 1.36-2.398-.074-4.802-.08-7.2-.002-1.094.036-1.586-.296-1.884-1.388-3.3-12.09-6.654-24.168-9.996-36.246-.116-.42-.266-.832-.4-1.248a40.6 40.6 0 0 1-.492.032"/></g><path fill="#A0F" d="M-502.144-1015.341v142.084c0 4.624-3.75 8.332-8.334 8.332H-668.81a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-636.701-994.174c4.416-.768 11.04-1.344 17.856-1.344 9.314 0 15.65 1.536 19.972 5.184 3.55 2.976 5.568 7.488 5.568 12.962 0 8.352-5.666 14.016-11.714 16.224v.29c4.608 1.726 7.394 6.238 9.024 12.48 2.018 8.064 3.744 15.554 5.09 18.05h-12.194c-.96-1.92-2.496-7.202-4.32-15.266-1.824-8.45-4.896-11.136-11.616-11.328h-5.954v26.594h-11.712v-63.846zm11.712 28.609h7.01c7.968 0 12.96-4.224 12.96-10.656 0-7.104-4.992-10.37-12.674-10.37-3.744 0-6.144.288-7.296.576v20.45zM-582.078-994.174c4.224-.768 10.08-1.344 18.048-1.344 8.642 0 14.978 1.824 19.108 5.28 3.84 3.168 6.336 8.256 6.336 14.306 0 6.144-1.92 11.232-5.57 14.688-4.704 4.704-12.096 6.914-20.448 6.914-2.21 0-4.224-.096-5.762-.386v24.388h-11.712v-63.846zm11.712 30.145c1.442.384 3.362.48 5.762.48 8.832 0 14.208-4.32 14.208-11.904 0-7.202-4.992-11.042-13.154-11.042-3.264 0-5.568.288-6.816.576v21.89z"/><path fill="#7757BC" d="M-502.145-757.316v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-622.977-693.753l-5.408 17.81h-11.842l20.142-62.846h14.64l20.42 62.846h-12.31l-5.686-17.81h-19.956zm17.997-8.67l-4.942-15.48c-1.212-3.822-2.238-8.112-3.17-11.748h-.186c-.932 3.636-1.866 8.02-2.984 11.748l-4.85 15.48h16.132zM-569.833-695.431c.28 8.206 6.714 11.75 13.986 11.75 5.316 0 9.14-.746 12.588-2.052l1.678 7.926c-3.914 1.586-9.322 2.798-15.85 2.798-14.732 0-23.404-9.046-23.404-22.94 0-12.586 7.646-24.428 22.192-24.428 14.732 0 19.58 12.122 19.58 22.098 0 2.146-.186 3.824-.372 4.848h-30.398zm19.955-8.018c.096-4.196-1.772-11.096-9.416-11.096-7.086 0-10.07 6.434-10.538 11.096h19.954z"/><path fill="#009497" d="M-286.123-757.314v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-373.623-756.296l32.85 40.88v57.67h21.9v-69.35zM-428.373-657.746h21.9v-57.67l32.85-40.88-54.75 29.2z"/><path fill="#FFF" d="M-373.623-660.666l22.63-24.554-22.63-71.076-23.36 71.076z"/><path fill="#D32F2F" d="M-502.145-499.289v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-568.506-424.983h-42.28v-42.278h42.28v42.278zm8-50.278h-58.28v58.278h58.28v-58.278z"/><path fill="#FFF" d="M-597.22-453.697h15.15v15.15h-15.15zM-594.574-502.613h9.856v29.25h-9.856zM-594.574-419.031h9.856v29.4h-9.856zM-563.312-451.051h30.158v9.856h-30.158zM-646.136-451.051h29.492v9.856h-29.492z"/><path fill="#03A9F4" d="M187.244-499.29v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332V-540.54c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M99.744-392.482l-49.5-27.692v-54.016l49.5-23.076 49.5 23.076v54.016l-49.5 27.692zm-40.5-32.97l40.5 22.658 40.5-22.658v-43.004l-40.5-18.88-40.5 18.88v43.004z"/><path fill="#FFF" d="M99.722-441.5l-47.176-26.392 4.394-7.856 42.824 23.958 42.816-23.478 4.328 7.892z"/><path fill="#FFF" d="M99.744-393.137a4.502 4.502 0 0 1-4.5-4.5v-49.008c0-2.484 2.016-4.5 4.5-4.5s4.5 2.016 4.5 4.5v49.008c0 2.484-2.017 4.5-4.5 4.5"/><path fill="#546E7A" d="M-45.489-499.29v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V-540.54c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-76.466-441.075c-.66-7.46-2.24-13.22-5-18.12-2.88-5.12-6.56-8.7-11.22-11-4.46-2.18-9.44-3.54-16.18-4.4-6.22-.8-12.78-1.02-20.98-.66-3.18.14-6.9.34-10.48.92-3.74.58-6.44 1.26-8.8 2.22-5 2.06-8.96 5.96-12.12 11.96-1.84 3.48-2.92 7.62-3.32 12.64-.58 7.4-.22 12.98 1.14 18.1.76 2.82 1.86 5.02 3.36 6.72 3.62 4.08 8.42 6.76 15.54 8.7 2.48.68 5.06 1.04 7.28 1.3 6.22.76 11.32.46 16.12-.96 5.34-1.58 10.2-3.9 14.48-6.92 2.18-1.54 4.24-3.42 6.12-5.22.62-.6.74-.76-.04-1.78-2.24-2.94-5.3-5.4-9.34-7.58-2.72-1.44-5.42-2.08-8.36-1.94-4.04.18-7.8.24-11.52.14-2.64-.06-5.18-.12-7.52-.9-3.14-1.04-6.12-2.64-8.98-4.2-1.84-.98-3.28-2.24-4.48-3.36-.48-.44-1.1-1.14-1.06-2.04.04-.92.74-1.58 1.34-2.04 1.06-.82 2.16-1.58 3.26-2.3l1.94-1.28c2.44-1.58 4.94-3.2 7.5-4.72l.66-.38c2.14-1.28 4.36-2.6 6.78-3.34 3.52-1.08 7.18-1.22 9.98-1.22.7 0 1.38 0 2.08.02 4.78.1 9.08.9 13.1 2.44 3.44 1.32 6.36 3.18 8.68 5.52 4.54 4.56 7.1 10.58 7.8 18.46.5 5.4.26 10.76-.7 15.88-.4 2.12-1.14 4.22-1.88 6.2-1.08 2.94-3.36 4.9-5.42 6.52-1.54 1.22-3.04 2.08-4.48 2.6-2.94 1.04-5.6 1.76-8.16 2.24l-.66.12c-4.16.78-8.46 1.58-12.76 1.88-4.16.26-8.6.38-14.34.38-1.44 0-2.86 0-4.3-.02-7.74-.06-13.9-1.06-19.36-3.16-3.74-1.42-6.76-3.68-9.02-6.72-2.62-3.54-4.36-7.84-5.16-12.8-1.16-7.24-1.84-12.82-2.24-18.1-.62-8.08.14-15.64 2.28-22.44.74-2.4 1.86-4.8 3.3-7.12 1.68-2.68 4.08-4.98 7.18-6.82 3.38-2.02 7.22-3.32 12.44-4.2 1.5-.26 3.02-.44 4.54-.62.92-.12 1.84-.22 2.76-.36 1.84-.24 3.68-.52 5.52-.78 3.3-.48 6.6-.96 9.9-1.38 5.14-.64 10.2-.72 14.04-.72 2.2 0 4.4.02 6.62.06l1.04.02c3.28.04 6.6.2 9.82.34 1.58.08 3.18.16 4.76.22h.4c0-.08 0-.18-.02-.32l-.76-6.14-.96-7.92-.16-.16c-.34 0-.66.06-.98.1-1.36.24-2.74.48-4.1.72-2.92.5-5.92 1.04-8.92 1.44-7.28.96-13.34 1.74-19.7 2.28l-3.96.32c-7.5.58-15.26 1.2-22.72 2.74-2.62.54-5.66 1.2-8.58 2.12-2.94.92-5.8 2.1-8.22 3.14-2.96 1.28-5.52 3.1-7.62 5.42-3.94 4.36-6.66 9.78-8.58 17.06-1.36 5.22-2.02 10.96-2.12 18.58-.08 8.3.94 16.68 3.14 25.58 1.82 7.34 4.02 13.02 6.92 17.94 2.08 3.5 4.48 6.08 7.32 7.88 3.72 2.38 7.02 3.8 10.38 4.5l2.3.5c2.96.64 6.02 1.32 9.02 1.6 4.24.38 8.58.56 12.78.72l4.4.18.02-.3h.96c1.2 0 2.4.02 3.6.04 2.6.02 5.2.06 7.8-.08 7.2-.4 14.8-1.02 21.92-3.64 2.36-.88 4.84-1.88 6.86-3.3 2.58-1.84 4.98-4.08 7.3-6.24l.56-.54c4.8-4.48 7.56-10.12 8.16-16.72.72-7.88.74-15.78.08-23.5m-55.48 20.6c.04-.44.1-.88.2-1.3.58-2.4 1.16-4.82 1.8-7.2.2-.76.54-2.04 1.98-2.04.3 0 .62.06 1.16.18 4.3 1.06 8.62 2.12 12.94 3.22.36.08.68.24.96.38l.96.44-.14 1.7-5.04 1.8c-3.94 1.38-7.86 2.74-11.8 4.1-.48.16-.96.22-1.4.28l-.52.06-1.32.22.22-1.84z"/><path fill="#FFF" d="M-122.533-458.116c-.42 1.08-.86 2.16-1.28 3.24-.62 1.54-1.24 3.1-1.84 4.66-.08.2-.1.22-.7.32-.06.02-.14.04-.22.04l-1.84-.38c-1.64-.34-3.26-.68-4.88-1.08-1.04-.24-2.06-.58-3.02-.92.76-.3 1.52-.6 2.28-.92 1.6-.64 3.18-1.28 4.78-1.96 1.34-.58 2.68-1.18 4.02-1.8.879-.4 1.759-.8 2.7-1.2"/><path fill="#009497" d="M-286.123-499.29v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V-540.54c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-327.08-398.331h-93.086v-93.086h93.086v93.086zm-89.086-4h85.086v-85.086h-85.086v85.086z"/><path fill="#FFF" d="M-378.984-489.417h49.904v49.904h-49.904z"/><path fill="#62BB37" d="M-58.1-205.743v142.935c0 4.662-3.746 8.382-8.332 8.382h-158.339c-4.636 0-8.329-3.72-8.329-8.382V-247.24c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-172.751-127.518c0 2.76 1.793 4.609 4.523 4.609h4.523v16.094c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.784-3.201 6.784-6.901v-16.094h9.074v16.094c0 3.67 3.173 6.901 6.785 6.901s6.785-3.201 6.785-6.901v-16.094h4.523c2.731 0 4.521-1.849 4.521-4.609v-45.99h-54.299v45.99zm-11.335-45.99c-3.641 0-6.784 3.201-6.784 6.901v32.188c0 3.67 3.173 6.901 6.784 6.901 3.612 0 6.785-3.201 6.785-6.901v-32.188c-.001-3.669-3.173-6.901-6.785-6.901m76.97 0c-3.611 0-6.783 3.201-6.783 6.901v32.188c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.785-3.201 6.785-6.901v-32.188c.03-3.669-3.143-6.901-6.785-6.901m-22.612-26.664l5.903-5.962c.911-.911.911-2.32 0-3.201-.91-.911-2.232-.911-3.171 0l-6.784 6.901c-3.171-2.292-7.253-3.201-11.776-3.201s-8.575.909-12.245 2.761l-6.344-6.931c-.881-.441-2.732-.441-3.614 0-.441.911-.441 2.761 0 3.672l5.903 5.962c-6.344 5.05-10.864 12.862-10.864 22.053h54.299c0-9.164-4.551-17.445-11.307-22.054m-24.902 12.89h-4.523v-4.611h4.523v4.611zm22.612 0h-4.523v-4.611h4.523v4.611z"/><path fill="#ACACAC" d="M649.047 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332H482.381a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M517.517 67.881h88.062v12.848h-88.062zM517.517 97.743h88.062v12.848h-88.062zM517.517 127.605h61.644v12.846h-61.644z"/><path fill="#03A9F4" d="M414.024 49.853v141.33c0 4.598-3.717 8.29-8.242 8.29H249.266c-4.573 0-8.242-3.692-8.242-8.29V8.817c0-4.548 3.669-8.29 8.242-8.29h115.773l48.985 49.326z"/><path fill="#FFF" d="M379.844 102.079c-.135 6.281-2.731 12.037-6.867 16.172-4.146 4.134-9.756 6.671-15.977 6.671h-11.048a34.074 34.074 0 0 0 5.939-9.161H357c7.404 0 13.513-6.098 13.685-13.818.159-7.513-5.953-13.439-13.685-13.671h-21.634c-3.049 0-5.89 1.036-8.209 2.793a13.78 13.78 0 0 0-3.292 3.536 14.142 14.142 0 0 0-2.318 7.476l-9.159-.135c.014-.817.074-1.634.183-2.427.817-6.462 4.281-12.145 9.245-15.866 3.806-2.854 8.501-4.548 13.55-4.548H357c12.477.27 23.111 10.27 22.844 22.978"/><path fill="#FFF" d="M275.205 101.945c.135-6.281 2.731-12.036 6.866-16.172 4.146-4.134 9.756-6.671 15.977-6.671h11.048a34.074 34.074 0 0 0-5.939 9.161h-5.11c-7.404 0-13.513 6.098-13.685 13.818-.159 7.513 5.953 13.439 13.685 13.671h21.634c3.049 0 5.891-1.036 8.209-2.793a13.748 13.748 0 0 0 3.292-3.536 14.142 14.142 0 0 0 2.318-7.476l9.159.135a20.059 20.059 0 0 1-.183 2.427c-.817 6.462-4.281 12.145-9.245 15.866-3.806 2.854-8.501 4.548-13.55 4.548h-21.634c-12.476-.269-23.109-10.269-22.842-22.978"/><path fill="#7757BC" d="M-45.313 49.785v142.084c0 4.634-3.754 8.332-8.349 8.332h-158.657c-4.645 0-8.346-3.698-8.346-8.332V8.535c0-4.584 3.727-8.334 8.346-8.334h117.341l49.665 49.584z"/><path fill="#FFF" d="M-104.513 95.388V77.522c0-3.066-2.28-5.109-5.71-5.109h-68.351c-3.405 0-5.71 2.042-5.71 5.109v51.006c0 3.066 2.278 5.108 5.71 5.108h68.377c3.405 0 5.71-2.042 5.71-5.108v-17.84l22.791 20.408V74.981l-22.817 20.407z"/><path fill="#FF5722" d="M-502.145 49.585v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.335c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-621.196 105.237l24.53 27.062 33.552-46.552 38.612 62.062h-126.286zM-599.02 74.329c0 8.444-6.844 15.288-15.288 15.288-8.442 0-15.288-6.844-15.288-15.288 0-8.444 6.846-15.288 15.288-15.288 8.444 0 15.288 6.844 15.288 15.288"/><path fill="#FDCA07" d="M175 50.271v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 192.355V9.021C0 4.437 3.708.687 8.334.687h117.124L175 50.271z"/><path fill="#FFF" d="M75.237-.687h12.262v12.262H75.237zM75.237 23.839h12.262v12.262H75.237zM75.237 47.359h12.262v12.262H75.237zM75.237 71.587h12.262v27.04H75.237zM87.501 11.577h12.262v12.262H87.501zM87.501 36.101h12.262v12.262H87.501zM87.501 59.535h12.262v12.262H87.501z"/><path fill="#FFF" d="M81.369 86.365h18.394v12.262H81.369zM102.235 143.06l-4.324-33.834-21.932-.198-3.466 34.032c-.484 3.656 1.572 6.864 6.52 6.864h16.682c4.736 0 7.034-3.327 6.52-6.864zm-7.153-.325H79.667v-6.292h15.414v6.292z"/><path fill="#FFED18" d="M886.322 43.904h-78.974l-17.276-17.5h-61.24a8.76 8.76 0 0 0-8.76 8.761V164.847c0 4.812 3.938 8.75 8.75 8.75h157.5c4.812 0 8.75-3.938 8.75-8.75V52.654c0-4.813-3.937-8.75-8.75-8.75"/><path fill="#FDCA07" d="M895.072 164.846c0 4.812-3.938 8.75-8.75 8.75h-157.5c-4.812 0-8.75-3.938-8.75-8.75V70.862c0-4.812 3.938-8.75 8.75-8.75h157.5c4.812 0 8.75 3.938 8.75 8.75v93.984z"/><g font-family="'MicrosoftYaHei'" font-size="40"><text transform="translate(-843.173 -1523.81)">M</text><text transform="translate(-804.093 -1523.81)">A</text><text transform="translate(-776.493 -1523.81)">C</text></g><text transform="translate(-828.293 -1774.516)" font-family="'MicrosoftYaHei'" font-size="40">WIN</text><text transform="translate(-952.094 -1245.953)" font-family="'MicrosoftYaHei'" font-size="40">图形／印刷</text><text transform="translate(-1032.094 -955.434)" font-family="'MicrosoftYaHei'" font-size="40">产品／思维导图</text><text transform="translate(-952.094 -697.409)" font-family="'MicrosoftYaHei'" font-size="40">影视／广告</text><text transform="translate(-832.094 -163.355)" font-family="'MicrosoftYaHei'" font-size="40">代码</text><text transform="translate(-832.094 133.675)" font-family="'MicrosoftYaHei'" font-size="40">通用</text><text transform="translate(-952.094 -471.875)" font-family="'MicrosoftYaHei'" font-size="40">工业／建筑</text><path fill="#FF40B6" d="M-286.123 49.284v142.935c0 4.662-3.746 8.382-8.332 8.382h-158.339c-4.636 0-8.329-3.72-8.329-8.382V7.787c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-402.661 59.929a2.611 2.611 0 0 0-2.62 2.62v67.198a15.833 15.833 0 0 0-7.911-2.096c-8.724 0-15.772 7.046-15.772 15.744s7.048 15.746 15.772 15.746 15.77-7.048 15.77-15.746c0-.628-.026-1.284-.105-1.859.079-.235.105-.497.105-.761V85.498l55.251-9.744v38.248a15.854 15.854 0 0 0-7.911-2.096c-8.724 0-15.772 7.048-15.772 15.746s7.048 15.744 15.772 15.744 15.77-7.046 15.77-15.744c0-.63-.027-1.284-.105-1.861a2.43 2.43 0 0 0 .105-.758V51.519c0-1.284 0-2.881-2.173-2.567-.447.052-66.176 10.977-66.176 10.977"/><path fill="#29D3B2" d="M-502.145-205.442v142.083c0 4.625-3.75 8.333-8.333 8.333h-158.333a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.541 49.583z"/><g fill="#FFF"><path d="M-610.686-194.87h1.562v7.813h-1.562c-5.836-.205-8.545 1.772-8.125 5.938v16.562c0 4.17-1.67 7.397-5 9.688 3.33 2.295 5 5.522 5 9.688v16.562c-.42 3.955 2.289 5.83 8.125 5.625h1.562v7.813h-1.562c-11.875.415-17.607-3.75-17.188-12.5v-16.875c.205-4.165-2.188-6.25-7.188-6.25H-636v-7.812h.938c5 0 7.393-2.08 7.188-6.25v-16.562c-.42-9.378 5.313-13.855 17.188-13.44zM-570.478-194.87h1.562c11.875-.415 17.602 4.063 17.188 13.438v16.562c0 4.17 2.393 6.25 7.188 6.25h1.25v7.812h-1.25c-4.795 0-7.188 2.085-7.188 6.25v16.875c.414 8.54-5.312 12.705-17.188 12.5h-1.562v-7.813h1.562c5.83.205 8.539-1.67 8.125-5.625v-16.562c0-4.165 1.664-7.393 5-9.688-3.336-2.29-5-5.518-5-9.688v-16.562c.414-4.165-2.295-6.143-8.125-5.938h-1.562v-7.811z"/></g><path fill="#29D3B2" d="M-286.123-205.442v142.083c0 4.625-3.75 8.333-8.333 8.333H-452.79a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.542 49.583z"/><ellipse fill="#FFF" cx="-373.623" cy="-190.963" rx="42.548" ry="12.063"/><path fill="#FFF" d="M-373.623-154.893c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-373.623-130.959c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-373.623-107.025c36.612 0 43.5-12.899 43.5-12.899V-137.6s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#03A9F4" d="M175-205.442v142.083c0 4.625-3.75 8.333-8.333 8.333H8.333A8.304 8.304 0 0 1 0-63.359v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125L175-205.442z"/><path fill="#FFF" d="M62.202-152.185c.344 20.488 16.447 28.926 31.6 28.926 12.601 0 20-2.805 26.25-6.055l2.582 10.848c-5.332 3.402-11.332 6.916-29.916 6.916-29.999 0-44.978-18.43-44.978-42.014 0-25.137 18.807-44.937 43.084-44.937 27.205 0 36.437 23.932 36.437 39.256 0 3.1-.346 5.51-.518 7.061H62.202zm50.422-10.847c.174-9.643-5.959-24.621-23.006-24.621-15.324 0-26.039 14.117-27.244 24.621h50.25z"/><path fill="#3F7AD9" d="M-502.145-1828.423l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-45.489-1828.423l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#58A138" d="M-267.478-1828.619l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M175-1828.423l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#3F7AD9" d="M399.989-1828.617l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#718BC8" d="M871.977-1828.423v142.084c0 4.624-3.75 8.332-8.334 8.332H705.311a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M834.477-1778.007c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M799.061-1778.007c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path fill="#6479AB" d="M871.977-1828.423l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-502.069-1561.594l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#4A5BD7" d="M-502.069-1273.083l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#58A138" d="M-267.478-1561.594l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#3F7AD9" d="M-34.098-1561.587l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#6479AB" d="M187.243-1561.587l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-286.04-1273.56l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#8C1DCD" d="M-286.042-1015.532l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.154-1015.532l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#624A97" d="M-502.154-757.513l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-45.313 49.783l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.201"/><path fill="#DCAE29" d="M175 50.27l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.687"/><path fill="#0F797A" d="M-286.123-757.315l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-286.039-499.481l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#475A63" d="M-45.499-499.483l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M187.244-499.29l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M175-205.443l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#5BA23A" d="M-58.1-205.443l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M-286.039-205.443l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.145-205.443l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC4C29" d="M-502.145 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.001"/><path fill="#DC3F9D" d="M-286.039 50.073l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.49"/><path fill="#1993D0" d="M415.024 49.391l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.191"/><path fill="#969594" d="M649.047 49.27l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.313"/><path fill="#D46B1C" d="M-34.101-1273.358l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M187.243-1273.083l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M400.068-1273.083l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M400.068-1015.532l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M187.243-1015.532l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-34.101-1015.532l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.145-499.29l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><g><path fill="#718BC8" d="M624.977-1828.349v142.084c0 4.624-3.75 8.332-8.334 8.332H458.311a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M587.477-1791.932c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M552.061-1791.932c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path opacity=".2" fill="#231815" d="M575.436-1836.683v-41.25l49.542 49.583H583.77c-4.584.001-8.334-3.749-8.334-8.333z"/><g fill="#FFF"><path d="M503.24-1710.753c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982H503.24zm12.265-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265zM532.062-1726.687l3.324 5.275a119.98 119.98 0 0 1 2.522 4.297h.172a149.373 149.373 0 0 1 2.408-4.412l3.094-5.16h7.68l-9.342 13.412 9.514 14.5h-7.967l-3.438-5.559c-.917-1.49-1.719-2.979-2.522-4.527h-.115c-.802 1.604-1.604 2.979-2.522 4.527l-3.21 5.559h-7.794l9.685-14.213-9.342-13.699h7.853zM559.564-1710.753c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982h-18.685zm12.265-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/fileType/pdf.svg b/src/assets/svg/fileType/pdf.svg
new file mode 100644
index 0000000..67c0f10
--- /dev/null
+++ b/src/assets/svg/fileType/pdf.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="200"><path fill="#448AFF" d="M-727.133-505.471v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-863.174-488.432h13.227l13.436 56.874h.208l15.002-56.874h13.334l14.584 56.874h.209l13.853-56.874h13.228l-20.52 74.377h-13.232l-14.892-56.877h-.212l-15.206 56.877h-13.44z"/><path fill="#62BB37" d="M-492.467-505.47v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V-546.72c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-612.26-488.428h15.524l16.874 26.25 17.602-26.25h14.584l-24.582 35.832 26.354 38.542h-15.836l-18.538-28.438-18.856 28.438h-14.896l26.354-38.542z"/><path fill="#F57C00" d="M-270.478-505.473v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-387.038-488.432h32.812c5.274 0 9.582.766 12.914 2.292 3.334 1.53 5.9 3.438 7.708 5.728 1.806 2.292 3.038 4.794 3.698 7.5.66 2.71.988 5.208.988 7.5 0 2.294-.328 4.776-.988 7.45-.66 2.672-1.892 5.156-3.698 7.446-1.808 2.29-4.374 4.186-7.708 5.676-3.332 1.498-7.64 2.242-12.914 2.242h-19.792v28.54h-13.02v-74.374zm13.02 35.21h19.06c1.46 0 2.954-.212 4.48-.626a12.867 12.867 0 0 0 4.218-2.032c1.286-.94 2.328-2.188 3.126-3.75.798-1.564 1.196-3.524 1.196-5.884 0-2.43-.346-4.444-1.042-6.042-.692-1.596-1.632-2.866-2.812-3.802-1.18-.94-2.534-1.578-4.06-1.928-1.53-.346-3.162-.52-4.896-.52h-19.27v24.584z"/><path fill="#448AFF" d="M175-505.473v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0-363.389v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124L175-505.473z"/><path fill="#FFF" d="M53.345-490.326h14.3l19.69 62.15h.22l20.13-62.15h13.97l-26.84 78.54H79.527z"/><path fill="#29D3B2" d="M-49.989-505.472v142.082c0 4.625-3.751 8.334-8.334 8.334h-158.332a8.306 8.306 0 0 1-8.334-8.334v-183.331c0-4.584 3.709-8.334 8.334-8.334H-99.53l49.541 49.583z"/><path fill="#FFF" d="M-172.601-498.429h70.225v13.121h-27.581v73.626h-15.186v-73.626h-27.458z"/><path fill="#F57C00" d="M-726.134-239.02v143.708c0 4.677-3.793 8.427-8.429 8.427h-160.141a8.398 8.398 0 0 1-8.429-8.427v-185.429c0-4.636 3.75-8.429 8.429-8.429h118.462l50.108 50.15z"/><path fill="#FFF" d="M-772.273-215.135l-33.73 33.73 3.75 4.19 28.87-28.868zM-833.623-191.299c-23.634 23.634-31.372 45.44-31.372 45.44s21.806-7.738 45.44-31.372l4.072-4.074-14.068-14.066-4.072 4.072zM-810.692-186.103l-14.068-14.067 38.405-38.406 14.068 14.068zM-864.994-141.652h92.707v6.274h-92.707z"/><path fill="#62BB37" d="M-492.467-238.443v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-627.969-195.661h22.914v41.894h-22.914zM-591.424-235.319h22.914v81.552h-22.914zM-554.881-211.354h22.914v57.588h-22.914zM-627.969-142.529h96.002v6.2h-96.002z"/><path fill="#448AFF" d="M-259.087-238.445v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-391.952-182.227v-41.732c0-4.466 3.654-8.12 8.12-8.12h74.49c4.466 0 8.12 3.654 8.12 8.12v41.732M-391.952-174.843h90.73v8.12h-90.73zM-368.272-141.49h43.368v8.12h-43.368z"/><path fill="#FFF" d="M-350.648-171.977h8.12v34.55h-8.12z"/><path fill="#718BC8" d="M-37.745-238.445v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-125.245-252.028c-27.614 0-50 22.386-50 50s22.386 50 50 50 50-22.386 50-50-22.387-50-50-50zm-.001 64.584c-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584 0 8.054-6.53 14.584-14.584 14.584zM-148.313-109.815h-4.702v-3.046h-.086c-.668 1.306-1.64 2.242-2.916 2.806a9.85 9.85 0 0 1-4.048.85c-1.77 0-3.316-.312-4.634-.936-1.322-.624-2.418-1.472-3.288-2.546-.872-1.072-1.524-2.342-1.958-3.808-.436-1.466-.654-3.04-.654-4.724 0-2.028.276-3.786.828-5.264.55-1.482 1.284-2.7 2.198-3.658.914-.958 1.958-1.66 3.134-2.11a9.96 9.96 0 0 1 3.59-.676c.698 0 1.406.066 2.134.196a9.66 9.66 0 0 1 2.09.63 8.33 8.33 0 0 1 1.848 1.112 6.16 6.16 0 0 1 1.416 1.588h.086v-11.49h4.962v31.076zm-17.324-11.012c0 .958.124 1.902.37 2.83a7.78 7.78 0 0 0 1.132 2.482 5.727 5.727 0 0 0 1.938 1.74c.782.434 1.71.652 2.784.652 1.104 0 2.054-.23 2.852-.696a5.892 5.892 0 0 0 1.958-1.828 8.278 8.278 0 0 0 1.132-2.546c.246-.942.37-1.908.37-2.894 0-2.496-.558-4.44-1.676-5.834-1.116-1.392-2.632-2.088-4.548-2.088-1.162 0-2.14.24-2.938.718a5.983 5.983 0 0 0-1.958 1.872 7.755 7.755 0 0 0-1.088 2.612 13.58 13.58 0 0 0-.328 2.98M-140.739-132.316h4.702v3.132h.128c.378-.55.784-1.058 1.22-1.522.434-.464.92-.856 1.458-1.176a7.466 7.466 0 0 1 1.85-.762c.698-.188 1.494-.282 2.394-.282 1.364 0 2.634.306 3.808.914 1.176.608 2.01 1.554 2.504 2.828.84-1.158 1.812-2.074 2.916-2.74 1.102-.668 2.482-1.002 4.136-1.002 2.378 0 4.228.58 5.55 1.74 1.318 1.162 1.978 3.106 1.978 5.834v15.538h-4.962v-13.146c0-.898-.03-1.718-.086-2.458-.06-.74-.226-1.378-.502-1.916a2.836 2.836 0 0 0-1.24-1.24c-.55-.29-1.306-.434-2.264-.434-1.68 0-2.9.522-3.654 1.566-.756 1.046-1.132 2.524-1.132 4.44v13.188h-4.962v-14.45c0-1.568-.282-2.75-.85-3.548-.566-.796-1.602-1.196-3.112-1.196a4.54 4.54 0 0 0-1.85.392 4.595 4.595 0 0 0-1.566 1.13c-.45.494-.812 1.104-1.088 1.828-.278.728-.414 1.554-.414 2.482v13.362h-4.962v-22.502zM-79.892-110.99c0 3.396-.95 5.928-2.85 7.596-1.9 1.67-4.636 2.502-8.204 2.502-1.134 0-2.272-.116-3.418-.346a10.209 10.209 0 0 1-3.134-1.176 7.541 7.541 0 0 1-2.37-2.178c-.64-.9-1.018-2-1.134-3.308h4.962c.146.698.392 1.262.742 1.7.346.434.76.776 1.24 1.02a4.658 4.658 0 0 0 1.586.48c.582.072 1.192.108 1.83.108 2.002 0 3.468-.492 4.396-1.48.928-.984 1.392-2.408 1.392-4.266v-3.436h-.086c-.696 1.246-1.646 2.22-2.852 2.916a7.647 7.647 0 0 1-3.896 1.044c-1.798 0-3.328-.312-4.59-.936a8.733 8.733 0 0 1-3.134-2.568c-.828-1.088-1.43-2.344-1.808-3.764-.376-1.422-.566-2.946-.566-4.57 0-1.508.234-2.946.698-4.31.464-1.364 1.132-2.56 2.002-3.592a9.628 9.628 0 0 1 3.2-2.46c1.262-.608 2.69-.912 4.286-.912 1.422 0 2.728.298 3.918.892 1.19.596 2.102 1.53 2.742 2.808h.086v-3.09h4.962v21.326zm-11.012-2.742c1.104 0 2.038-.224 2.808-.674a5.532 5.532 0 0 0 1.872-1.784 7.844 7.844 0 0 0 1.044-2.524c.218-.942.326-1.894.326-2.852s-.116-1.886-.346-2.786c-.234-.9-.588-1.698-1.068-2.394a5.142 5.142 0 0 0-1.872-1.654c-.768-.404-1.69-.608-2.764-.608-1.104 0-2.032.23-2.786.694a5.575 5.575 0 0 0-1.826 1.808 7.74 7.74 0 0 0-1.002 2.524 13.25 13.25 0 0 0-.306 2.808c0 .93.118 1.834.35 2.72.23.886.588 1.676 1.066 2.374a5.669 5.669 0 0 0 1.828 1.696c.74.436 1.632.652 2.676.652"/><path fill="#D32F2F" d="M175 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 191.668V8.334C0 3.75 3.708 0 8.334 0h117.124L175 49.584z"/><path fill="#F6F4F4" d="M85.987 77.631c.758 0 .758 0 0 0 .758-3.03 1.516-4.544 1.516-6.816v-1.514c.756-3.786.756-6.816 0-7.572v-.758l-.758-.758s0 .758-.758.758c-1.515 4.544-1.515 9.844 0 16.66m-22.716 52.25c-1.516.756-3.03 1.514-3.786 2.27-5.302 4.544-9.088 9.846-9.844 12.118 4.542-.758 9.086-5.302 13.63-14.388.756 0 .756 0 0 0 .756 0 0 0 0 0m69.666-11.36c-.756-.756-3.786-3.028-14.388-3.028h-1.514v.758c5.3 2.27 10.602 3.786 14.388 3.786H133.695v-.758s-.758 0-.758-.758m3.03 6.058c-1.516.758-3.786 1.516-6.816 1.516-6.058 0-15.146-1.516-22.718-5.302-12.872 1.514-22.716 3.03-30.29 6.058-.756 0-.756 0-1.514.758-9.086 15.902-16.66 23.474-22.718 23.474-1.514 0-2.27 0-3.028-.756l-3.786-2.272v-.758c-.758-1.514-.758-2.272-.758-3.786.758-3.786 5.302-10.602 14.388-15.902 1.514-.758 3.786-2.272 6.816-3.786 2.27-3.786 4.542-8.33 7.572-13.63 3.786-7.574 6.058-15.146 8.328-21.96-3.028-9.088-4.542-14.388-1.512-24.99.756-3.03 3.028-6.058 6.056-6.058h1.516c1.514 0 3.028.758 4.542 1.514 5.302 5.302 3.03 17.416 0 27.26v.758c3.03 8.33 7.574 15.146 12.116 19.688 2.272 1.516 3.786 3.03 6.816 4.544 3.786 0 6.816-.756 9.844-.756 9.088 0 15.146 1.514 17.416 5.3.758 1.514.758 3.028.758 4.544-.758.756-1.515 3.028-3.028 4.542M86.745 95.047c-1.514 5.3-4.544 11.358-7.572 18.174-1.514 3.03-3.03 5.3-4.544 8.33h1.514c9.844-3.786 18.932-6.058 24.99-6.816-1.514-.756-2.272-1.514-3.03-2.272-3.787-4.542-8.329-10.6-11.358-17.416"/><path fill="#5465FC" d="M-727.138 49.585v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.335c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-853.389 68.272c4.224-.768 10.081-1.344 18.047-1.344 8.641 0 14.977 1.824 19.107 5.28 3.84 3.168 6.336 8.256 6.336 14.305 0 6.144-1.92 11.231-5.57 14.687-4.704 4.704-12.096 6.914-20.447 6.914-2.21 0-4.224-.096-5.762-.386v24.387h-11.712V68.272zm11.712 30.145c1.44.384 3.362.48 5.762.48 8.832 0 14.207-4.32 14.207-11.903 0-7.202-4.992-11.041-13.153-11.041-3.264 0-5.568.288-6.816.576v21.888zM-802.801 121.265c2.69 1.632 7.777 3.362 12.001 3.362 5.184 0 7.488-2.114 7.488-5.186 0-3.168-1.92-4.8-7.68-6.816-9.119-3.168-12.959-8.159-12.863-13.633 0-8.255 6.816-14.687 17.663-14.687 5.184 0 9.696 1.344 12.385 2.784l-2.304 8.352c-2.016-1.152-5.762-2.688-9.89-2.688-4.224 0-6.527 2.016-6.527 4.896 0 2.978 2.208 4.416 8.159 6.53 8.448 3.072 12.385 7.392 12.481 14.303 0 8.45-6.623 14.593-19.009 14.593-5.664 0-10.753-1.346-14.207-3.266l2.303-8.544z"/><path fill="#F57C00" d="M-511.116 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-619.592 114.785l-5.568 18.337h-12.193l20.739-64.707h15.073l21.023 64.707h-12.671l-5.856-18.337h-20.547zm18.53-8.927l-5.088-15.937c-1.248-3.936-2.304-8.354-3.264-12.097h-.192c-.96 3.744-1.92 8.258-3.074 12.097l-4.992 15.937h16.61zM-559.881 73.312c0 3.552-2.592 6.336-6.72 6.336-3.938 0-6.53-2.784-6.53-6.336 0-3.648 2.69-6.434 6.624-6.434 4.034 0 6.53 2.786 6.626 6.434m-12.577 13.057h11.905v46.754h-11.905V86.369z"/><path fill="#C11187" d="M-37.75 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-159.425 68.847h11.807v64.707h-11.807zM-91.459 65.392v55.011c0 4.798.194 9.983.386 13.151h-10.561l-.48-7.392h-.192c-2.784 5.182-8.448 8.448-15.263 8.448-11.137 0-19.971-9.505-19.971-23.905-.096-15.649 9.697-24.961 20.931-24.961 6.432 0 11.042 2.688 13.151 6.144h.192V65.392h11.807zm-11.808 40.897c0-.96-.096-2.114-.288-3.074-1.056-4.608-4.8-8.351-10.175-8.351-7.584 0-11.809 6.719-11.809 15.457 0 8.543 4.226 14.783 11.713 14.783 4.8 0 9.023-3.264 10.177-8.351.286-1.056.382-2.208.382-3.456v-7.008z"/><path fill="#F57C00" d="M-259.091 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F57C00" d="M-357.393 64.907h21.999v21.999h-21.999z"/><path fill="#FFF" d="M-299.594 93.406v-5.5h-23.791c7.5 5.298 14.101 13.349 19.571 24.041 7.678 15.011 10.454 29.8 10.566 30.422l-7.866 1.448c-.09-.484-8.178-42.534-33.412-53.021v4.978h-23.735v-4.978c-25.237 10.49-33.324 52.537-33.412 53.021l-7.867-1.448c.114-.622 2.888-15.411 10.568-30.422 5.47-10.691 12.071-18.743 19.571-24.041h-24.187v5.5h-18.999V74.407h18.999v5.5h35.328v-7.868h23.735v7.868h34.932v-5.5h18.999v18.999h-19zm-39.8-16.499h-13.999v13.999h13.999V76.907z"/><path fill="#C11187" d="M175 307.61v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 449.694V266.36c0-4.584 3.708-8.334 8.334-8.334h117.124L175 307.61z"/><g fill="#FFF"><path d="M75.79 390.389l-6.76-12.408c-2.686-4.816-4.444-8.15-6.204-11.76h-.278c-1.482 3.61-3.148 6.944-5.648 11.76l-6.206 12.408H37.638l18.52-31.576-17.78-30.836h13.056l6.762 12.872c2.036 3.888 3.518 6.944 5.186 10.464h.184c1.668-3.89 2.964-6.668 4.908-10.464l6.666-12.872h13.056l-18.24 30.466 18.982 31.946H75.79zM136.992 324.644v53.06c0 4.628.186 9.63.37 12.686h-10.186l-.462-7.13h-.184c-2.688 4.998-8.15 8.148-14.724 8.148-10.742 0-19.262-9.168-19.262-23.056-.092-15.094 9.352-24.078 20.188-24.078 6.204 0 10.65 2.594 12.686 5.928h.184v-25.558h11.39zm-11.39 39.448c0-.926-.092-2.038-.276-2.964-1.02-4.444-4.632-8.056-9.818-8.056-7.314 0-11.388 6.482-11.388 14.908 0 8.242 4.074 14.26 11.296 14.26 4.63 0 8.706-3.148 9.816-8.054.278-1.02.37-2.132.37-3.336v-6.758z"/></g><path fill="#A0F" d="M-511.112 307.611v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V266.361c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-557.124 319.863h-80.848l-14.14 31.298 54.564 62.868 54.562-62.868-14.138-31.298zm-3.72 6.926l8.282 20.65h-14.884l6.602-20.65zm-7.058-.33l-6.042 19.378-15.102-19.378h21.144zm-14.072 20.98h-31.15l15.576-19.814 15.574 19.814zm-24.078-20.98l-15.1 19.378-6.044-19.378h21.144zm-28.202.33l6.602 20.65h-14.884l8.282-20.65zm-6.632 27.244h16.126l16.454 37.538-32.58-37.538zm23.326 0H-577.538l-20.01 45.652-20.012-45.652zm30.768 37.54l16.454-37.538h16.126l-32.58 37.538z"/><path fill="#D32F2F" d="M-259.607 307.61v142.084c0 4.634-3.724 8.332-8.282 8.332h-157.396c-4.608 0-8.28-3.698-8.28-8.332V266.36c0-4.584 3.698-8.334 8.28-8.334h116.408l49.27 49.584z"/><path fill="#FFF" d="M-297.122 332.647c.579.149 1.173.25 1.734.453 1.728.628 2.294 2.07 2.253 3.887-.056 2.523-.229 5.022-.936 7.483-1.308 4.549-4.118 7.567-8.195 9.358-2.871 1.261-5.893 1.72-8.935 2.076-2.098.243-4.193.535-6.287.821-.28.038-.561.149-.823.272-1.119.519-1.41 1.537-.582 2.444a21.79 21.79 0 0 0 2.803 2.557c3.754 2.883 7.615 5.62 11.301 8.595 4.167 3.362 7.819 7.291 10.595 12.06 2.726 4.684 4.108 9.788 3.925 15.378-.048 1.475-.722 2.326-2.111 2.396-2.159.107-4.32.123-6.479.143-2.682.024-5.362.014-8.044.02-2.732.004-5.466.002-8.201.012-1.952.006-3.905.032-5.857.034a18.846 18.846 0 0 1-1.714-.072c-2.436-.213-3.34-1.159-3.585-3.744-.35-3.664-.907-7.263-2.306-10.649-2.35-5.696-6.167-9.981-11.098-13.207-4.259-2.785-8.891-4.531-13.923-4.972-4.961-.436-9.579.553-13.287 4.575-2.241 2.43-3.477 5.428-4.342 8.621-.392 1.445-.734 2.905-1.165 4.336-.491 1.626-1.811 1.96-3.147 2.006-2.916.098-5.831.098-8.746.125-2.682.024-5.362.028-8.044.042-2.473.014-4.947.052-7.418.03-.646-.006-1.294-.153-1.924-.308-.935-.227-1.314-.779-1.261-1.781.328-6.092 2.74-11.054 7.364-14.82 3.811-3.102 8.145-5.034 12.694-6.352 4.315-1.251 8.696-2.227 13.042-3.356 1.219-.316 2.443-.656 3.614-1.135 1.873-.767 2.179-2.022.7-3.4-1.419-1.326-3.006-2.479-4.623-3.529-4.352-2.825-8.839-5.428-12.798-8.873-4.062-3.535-7.462-7.615-9.315-12.969-.974-2.817-1.38-5.744-1.374-8.754 0-1.155.557-2.05 1.783-2.34a21.873 21.873 0 0 1 4.406-.573c3.332-.09 6.664-.052 9.996-.058 2.682-.004 5.364.01 8.044.008 1.98 0 3.958-.02 5.937-.016.909.002 1.819.046 2.73.066 1.533.034 2.197.543 2.491 2.141.348 1.889.584 3.803.885 5.704 1.078 6.814 3.632 12.766 8.76 17.178 3.527 3.036 7.639 4.449 12.194 4.646 2.382.102 4.744.068 7.046-.751 3.547-1.261 5.269-4.096 4.937-8.018-.151-1.813-.272-3.63-.382-5.447-.074-1.235.312-1.982 1.469-2.207 1.451-.284 2.946-.38 4.418-.403 2.942-.042 5.883.03 8.824.044 2.68.01 5.362-.01 8.042.012 1.638.012 3.273.074 4.911.114.002.033.004.065.004.097"/><path fill="#D32F2F" d="M-37.745 307.61v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V266.36c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M-115.129 437.7s-.022-23.724 0-30.064c0-.318-.008-.636 0-.952.07-3.12 1.69-4.742 4.84-4.752 6.614-.02 13.226 0 19.84 0 5.562 0 8.37-2.794 8.372-8.35.002-22.692-.008-45.384.008-68.078.002-3.048-1.018-5.546-3.796-6.986-1.046-.542-2.326-.878-3.502-.88a23363.06 23363.06 0 0 0-72.018-.05c-3.896.002-6.908 3.018-7.108 6.962-.046.904-.01 1.812-.01 2.718v66.582c0 5.096 3.012 8.082 8.12 8.08 11.776-.006 35.328-.002 35.328-.002v9.812s-23.946-.008-36.04.008c-2.722.002-5.344-.46-7.734-1.76-5.898-3.212-9.34-8.042-9.346-14.932-.024-23.372.092-46.744-.07-70.114-.05-7.154 5.04-15.584 14.712-17.022a18.82 18.82 0 0 1 2.704-.2c23.916-.024 47.83-.042 71.746-.05 9-.004 16.8 7.706 16.812 16.718.034 23.462.034 46.924.006 70.388-.012 9.346-7.282 17.056-16.64 17.254-4.708.098-9.422.056-14.13.014-1.088-.01-2.122 1.36-2.122 1.36l-9.972 24.296z"/><path d="M-141.491 347.286v2.236c.002 11.594.006 23.186.006 34.778 0 1.808-.004 1.814-1.772 1.814-3.432.004-6.864.002-10.436.002-.036-.67-.09-1.194-.09-1.716-.004-16.03.014-32.062-.03-48.092-.004-1.318.376-1.672 1.672-1.656 5.432.068 10.868.076 16.302-.008 1.324-.02 1.76.446 2.066 1.66 2.618 10.354 5.304 20.69 7.972 31.032.12.466.272.922.734 1.436.158-.416.358-.824.47-1.252 2.75-10.552 5.506-21.1 8.212-31.664.244-.948.66-1.198 1.582-1.194 5.616.016 11.23.01 16.844-.068 1.212-.016 1.53.366 1.528 1.544-.034 16.168-.034 32.334.002 48.5.004 1.182-.31 1.582-1.52 1.548-3.214-.092-6.43-.056-9.644-.082-.398-.004-.792-.07-1.36-.124v-38.544l-.38-.072c-.148.432-.32.86-.442 1.3-3.336 12.034-6.678 24.068-9.978 36.114-.276 1.008-.706 1.394-1.766 1.36-2.398-.074-4.802-.08-7.2-.002-1.094.036-1.586-.296-1.884-1.388-3.3-12.09-6.654-24.168-9.996-36.246-.116-.42-.266-.832-.4-1.248a20.3 20.3 0 0 1-.492.032"/></g><path fill="#A0F" d="M-727.133 307.611v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V266.361c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-861.69 328.777c4.416-.768 11.04-1.344 17.856-1.344 9.314 0 15.65 1.536 19.972 5.184 3.55 2.976 5.568 7.488 5.568 12.962 0 8.352-5.666 14.016-11.714 16.224v.29c4.608 1.726 7.394 6.238 9.024 12.48 2.018 8.064 3.744 15.554 5.09 18.05h-12.194c-.96-1.92-2.496-7.202-4.32-15.266-1.824-8.45-4.896-11.136-11.616-11.328h-5.954v26.594h-11.712v-63.846zm11.712 28.61h7.01c7.968 0 12.96-4.224 12.96-10.656 0-7.104-4.992-10.37-12.674-10.37-3.744 0-6.144.288-7.296.576v20.45zM-807.067 328.777c4.224-.768 10.08-1.344 18.048-1.344 8.642 0 14.978 1.824 19.108 5.28 3.84 3.168 6.336 8.256 6.336 14.306 0 6.144-1.92 11.232-5.57 14.688-4.704 4.704-12.096 6.914-20.448 6.914-2.21 0-4.224-.096-5.762-.386v24.388h-11.712v-63.846zm11.712 30.146c1.442.384 3.362.48 5.762.48 8.832 0 14.208-4.32 14.208-11.904 0-7.202-4.992-11.042-13.154-11.042-3.264 0-5.568.288-6.816.576v21.89z"/><path fill="#7757BC" d="M-727.133 565.636V707.72c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V524.386c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-847.965 629.199l-5.408 17.81h-11.842l20.142-62.846h14.64l20.42 62.846h-12.31l-5.686-17.81h-19.956zm17.996-8.67l-4.942-15.48c-1.212-3.822-2.238-8.112-3.17-11.748h-.186c-.932 3.636-1.866 8.02-2.984 11.748l-4.85 15.48h16.132zM-794.821 627.52c.28 8.206 6.714 11.75 13.986 11.75 5.316 0 9.14-.746 12.588-2.052l1.678 7.926c-3.914 1.586-9.322 2.798-15.85 2.798-14.732 0-23.404-9.046-23.404-22.94 0-12.586 7.646-24.428 22.192-24.428 14.732 0 19.58 12.122 19.58 22.098 0 2.146-.186 3.824-.372 4.848h-30.398zm19.954-8.018c.096-4.196-1.772-11.096-9.416-11.096-7.086 0-10.07 6.434-10.538 11.096h19.954z"/><path fill="#009497" d="M-511.112 565.637v142.084c0 4.624-3.75 8.332-8.335 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V524.387c0-4.584 3.708-8.334 8.334-8.334h117.124l49.543 49.584z"/><path fill="#FFF" d="M-598.611 566.655l32.849 40.88v57.67h21.9v-69.35zM-653.361 665.205h21.899v-57.67l32.851-40.88-54.75 29.2z"/><path fill="#FFF" d="M-598.611 662.285l22.629-24.554-22.629-71.076-23.361 71.076z"/><path fill="#D32F2F" d="M-727.133 823.662v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V782.412c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-793.495 897.968h-42.28V855.69h42.28v42.278zm8-50.278h-58.28v58.278h58.28V847.69z"/><path fill="#FFF" d="M-822.208 869.254h15.15v15.15h-15.15zM-819.562 820.338h9.856v29.25h-9.856zM-819.562 903.92h9.856v29.4h-9.856zM-788.301 871.9h30.158v9.856h-30.158zM-871.125 871.9h29.492v9.856h-29.492z"/><path fill="#03A9F4" d="M-37.745 823.661v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V782.411c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-125.245 930.47l-49.5-27.692v-54.016l49.5-23.076 49.5 23.076v54.016l-49.5 27.692zm-40.5-32.97l40.5 22.658 40.5-22.658v-43.004l-40.5-18.88-40.5 18.88V897.5z"/><path fill="#FFF" d="M-125.267 881.451l-47.176-26.392 4.394-7.856 42.824 23.958 42.816-23.478 4.328 7.892z"/><path fill="#FFF" d="M-125.245 929.814a4.502 4.502 0 0 1-4.5-4.5v-49.008c0-2.484 2.016-4.5 4.5-4.5s4.5 2.016 4.5 4.5v49.008c0 2.484-2.016 4.5-4.5 4.5"/><path fill="#546E7A" d="M-270.478 823.661v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V782.411c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-301.454 881.876c-.66-7.46-2.24-13.22-5-18.12-2.88-5.12-6.56-8.7-11.22-11-4.46-2.18-9.44-3.54-16.18-4.4-6.22-.8-12.78-1.02-20.98-.66-3.18.14-6.9.34-10.48.92-3.74.58-6.44 1.26-8.8 2.22-5 2.06-8.96 5.96-12.12 11.96-1.84 3.48-2.92 7.62-3.32 12.64-.58 7.4-.22 12.98 1.14 18.1.76 2.82 1.86 5.02 3.36 6.72 3.62 4.08 8.42 6.76 15.54 8.7 2.48.68 5.06 1.04 7.28 1.3 6.22.76 11.32.46 16.12-.96 5.34-1.58 10.2-3.9 14.48-6.92 2.18-1.54 4.24-3.42 6.12-5.22.62-.6.74-.76-.04-1.78-2.24-2.94-5.3-5.4-9.34-7.58-2.72-1.44-5.42-2.08-8.36-1.94-4.04.18-7.8.24-11.52.14-2.64-.06-5.18-.12-7.52-.9-3.14-1.04-6.12-2.64-8.98-4.2-1.84-.98-3.28-2.24-4.48-3.36-.48-.44-1.1-1.14-1.06-2.04.04-.92.74-1.58 1.34-2.04 1.06-.82 2.16-1.58 3.26-2.3l1.94-1.28c2.44-1.58 4.94-3.2 7.5-4.72l.66-.38c2.14-1.28 4.36-2.6 6.78-3.34 3.52-1.08 7.18-1.22 9.98-1.22.7 0 1.38 0 2.08.02 4.78.1 9.08.9 13.1 2.44 3.44 1.32 6.36 3.18 8.68 5.52 4.54 4.56 7.1 10.58 7.8 18.46.5 5.4.26 10.76-.7 15.88-.4 2.12-1.14 4.22-1.88 6.2-1.08 2.94-3.36 4.9-5.42 6.52-1.54 1.22-3.04 2.08-4.48 2.6-2.94 1.04-5.6 1.76-8.16 2.24l-.66.12c-4.16.78-8.46 1.58-12.76 1.88-4.16.26-8.6.38-14.34.38-1.44 0-2.86 0-4.3-.02-7.74-.06-13.9-1.06-19.36-3.16-3.74-1.42-6.76-3.68-9.02-6.72-2.62-3.54-4.36-7.84-5.16-12.8-1.16-7.24-1.84-12.82-2.24-18.1-.62-8.08.14-15.64 2.28-22.44.74-2.4 1.86-4.8 3.3-7.12 1.68-2.68 4.08-4.98 7.18-6.82 3.38-2.02 7.22-3.32 12.44-4.2 1.5-.26 3.02-.44 4.54-.62.92-.12 1.84-.22 2.76-.36 1.84-.24 3.68-.52 5.52-.78 3.3-.48 6.6-.96 9.9-1.38 5.14-.64 10.2-.72 14.04-.72 2.2 0 4.4.02 6.62.06l1.04.02c3.28.04 6.6.2 9.82.34 1.58.08 3.18.16 4.76.22h.4c0-.08 0-.18-.02-.32l-.76-6.14-.96-7.92-.16-.16c-.34 0-.66.06-.98.1-1.36.24-2.74.48-4.1.72-2.92.5-5.92 1.04-8.92 1.44-7.28.96-13.34 1.74-19.7 2.28l-3.96.32c-7.5.58-15.26 1.2-22.72 2.74-2.62.54-5.66 1.2-8.58 2.12-2.94.92-5.8 2.1-8.22 3.14-2.96 1.28-5.52 3.1-7.62 5.42-3.94 4.36-6.66 9.78-8.58 17.06-1.36 5.22-2.02 10.96-2.12 18.58-.08 8.3.94 16.68 3.14 25.58 1.82 7.34 4.02 13.02 6.92 17.94 2.08 3.5 4.48 6.08 7.32 7.88 3.72 2.38 7.02 3.8 10.38 4.5l2.3.5c2.96.64 6.02 1.32 9.02 1.6 4.24.38 8.58.56 12.78.72l4.4.18.02-.3h.96c1.2 0 2.4.02 3.6.04 2.6.02 5.2.06 7.8-.08 7.2-.4 14.8-1.02 21.92-3.64 2.36-.88 4.84-1.88 6.86-3.3 2.58-1.84 4.98-4.08 7.3-6.24l.56-.54c4.8-4.48 7.56-10.12 8.16-16.72.719-7.88.739-15.78.08-23.5m-55.48 20.6c.04-.44.1-.88.2-1.3.58-2.4 1.16-4.82 1.8-7.2.2-.76.54-2.04 1.98-2.04.3 0 .62.06 1.16.18 4.3 1.06 8.62 2.12 12.94 3.22.36.08.68.24.96.38l.96.44-.14 1.7-5.04 1.8c-3.94 1.38-7.86 2.74-11.8 4.1-.48.16-.96.22-1.4.28l-.52.06-1.32.22.22-1.84z"/><path fill="#FFF" d="M-347.522 864.836c-.42 1.08-.86 2.16-1.28 3.24-.62 1.54-1.24 3.1-1.84 4.66-.08.2-.1.22-.7.32-.06.02-.14.04-.22.04l-1.84-.38c-1.64-.34-3.26-.68-4.88-1.08-1.04-.24-2.06-.58-3.02-.92.76-.3 1.52-.6 2.28-.92 1.6-.64 3.18-1.28 4.78-1.96 1.34-.58 2.68-1.18 4.02-1.8.88-.4 1.759-.8 2.7-1.2"/><path fill="#009497" d="M-511.112 823.661v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V782.411c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-552.069 924.62h-93.086v-93.086h93.086v93.086zm-89.086-4h85.086v-85.086h-85.086v85.086z"/><path fill="#FFF" d="M-603.973 833.534h49.904v49.904h-49.904z"/><path fill="#62BB37" d="M-283.089 1117.208v142.935c0 4.661-3.746 8.382-8.332 8.382H-449.76c-4.635 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-397.739 1195.433c0 2.76 1.793 4.609 4.523 4.609h4.523v16.094c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.784-3.201 6.784-6.901v-16.094h9.074v16.094c0 3.67 3.173 6.901 6.785 6.901s6.785-3.201 6.785-6.901v-16.094h4.523c2.731 0 4.521-1.849 4.521-4.609v-45.99h-54.299v45.99zm-11.336-45.99c-3.641 0-6.784 3.201-6.784 6.901v32.188c0 3.67 3.173 6.901 6.784 6.901 3.612 0 6.785-3.201 6.785-6.901v-32.188c0-3.669-3.173-6.901-6.785-6.901m76.971 0c-3.611 0-6.783 3.201-6.783 6.901v32.188c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.785-3.201 6.785-6.901v-32.188c.029-3.669-3.144-6.901-6.785-6.901m-22.613-26.664l5.903-5.962c.911-.911.911-2.32 0-3.201-.91-.911-2.232-.911-3.171 0l-6.784 6.901c-3.171-2.292-7.253-3.201-11.776-3.201s-8.575.91-12.245 2.761l-6.344-6.931c-.881-.441-2.732-.441-3.614 0-.441.911-.441 2.761 0 3.672l5.903 5.962c-6.344 5.05-10.865 12.862-10.865 22.053h54.299c.002-9.163-4.55-17.445-11.306-22.054m-24.902 12.891h-4.523v-4.611h4.523v4.611zm22.612 0h-4.523v-4.611h4.523v4.611z"/><path fill="#ACACAC" d="M424.059 1372.535v142.084c0 4.624-3.75 8.332-8.334 8.332H257.393a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M292.528 1390.832h88.062v12.848h-88.062zM292.528 1420.694h88.062v12.848h-88.062zM292.528 1450.557h61.644v12.846h-61.644z"/><path fill="#03A9F4" d="M189.035 1372.805v141.33c0 4.598-3.717 8.29-8.242 8.29H24.277c-4.573 0-8.242-3.693-8.242-8.29v-182.366c0-4.548 3.669-8.29 8.242-8.29H140.05l48.985 49.326z"/><path fill="#FFF" d="M154.855 1425.031c-.135 6.281-2.731 12.037-6.867 16.172-4.146 4.134-9.756 6.671-15.977 6.671h-11.048a34.074 34.074 0 0 0 5.939-9.161h5.11c7.404 0 13.513-6.098 13.685-13.818.159-7.513-5.953-13.439-13.685-13.671h-21.634c-3.049 0-5.89 1.036-8.209 2.793a13.78 13.78 0 0 0-3.292 3.536 14.142 14.142 0 0 0-2.318 7.476l-9.159-.135c.014-.817.074-1.634.183-2.427.817-6.462 4.281-12.145 9.245-15.866 3.806-2.854 8.501-4.548 13.55-4.548h21.634c12.476.269 23.11 10.269 22.843 22.978"/><path fill="#FFF" d="M50.217 1424.897c.135-6.281 2.731-12.036 6.866-16.172 4.146-4.134 9.756-6.671 15.977-6.671h11.048a34.074 34.074 0 0 0-5.939 9.161h-5.11c-7.404 0-13.513 6.098-13.685 13.818-.159 7.513 5.953 13.439 13.685 13.671h21.634c3.049 0 5.89-1.036 8.209-2.793a13.748 13.748 0 0 0 3.292-3.536 14.142 14.142 0 0 0 2.318-7.476l9.159.135a20.059 20.059 0 0 1-.183 2.427c-.817 6.462-4.281 12.145-9.245 15.866-3.806 2.854-8.501 4.548-13.55 4.548H73.06c-12.477-.27-23.111-10.27-22.843-22.978"/><path fill="#7757BC" d="M-270.302 1372.736v142.084c0 4.634-3.754 8.332-8.349 8.332h-158.657c-4.645 0-8.346-3.698-8.346-8.332v-183.334c0-4.584 3.727-8.334 8.346-8.334h117.341l49.665 49.584z"/><path fill="#FFF" d="M-329.502 1418.339v-17.866c0-3.066-2.28-5.109-5.71-5.109h-68.351c-3.405 0-5.71 2.042-5.71 5.109v51.006c0 3.066 2.278 5.108 5.71 5.108h68.377c3.405 0 5.71-2.042 5.71-5.108v-17.84l22.791 20.408v-56.114l-22.817 20.406z"/><path fill="#FF5722" d="M-727.133 1372.536v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-846.185 1428.188l24.53 27.062 33.552-46.552 38.612 62.062h-126.286zM-824.009 1397.281c0 8.444-6.844 15.288-15.288 15.288-8.442 0-15.288-6.844-15.288-15.288 0-8.444 6.846-15.288 15.288-15.288 8.444 0 15.288 6.844 15.288 15.288"/><path fill="#FDCA07" d="M-49.989 1373.223v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-149.751 1322.264h12.262v12.262h-12.262zM-149.751 1346.79h12.262v12.262h-12.262zM-149.751 1370.31h12.262v12.262h-12.262zM-149.751 1394.538h12.262v27.04h-12.262zM-137.488 1334.528h12.262v12.262h-12.262zM-137.488 1359.052h12.262v12.262h-12.262zM-137.488 1382.486h12.262v12.262h-12.262z"/><path fill="#FFF" d="M-143.62 1409.316h18.394v12.262h-18.394zM-122.754 1466.012l-4.324-33.834-21.932-.198-3.466 34.032c-.484 3.656 1.572 6.864 6.52 6.864h16.682c4.736 0 7.034-3.328 6.52-6.864zm-7.153-.326h-15.414v-6.292h15.414v6.292z"/><path fill="#FFED18" d="M661.333 1366.855h-78.974l-17.276-17.5h-61.24a8.76 8.76 0 0 0-8.76 8.761V1487.798c0 4.812 3.938 8.75 8.75 8.75h157.5c4.812 0 8.75-3.938 8.75-8.75v-112.193c0-4.812-3.937-8.75-8.75-8.75"/><path fill="#FDCA07" d="M670.083 1487.797c0 4.812-3.938 8.75-8.75 8.75h-157.5c-4.812 0-8.75-3.938-8.75-8.75v-93.984c0-4.812 3.938-8.75 8.75-8.75h157.5c4.812 0 8.75 3.938 8.75 8.75v93.984z"/><g font-family="'MicrosoftYaHei'" font-size="40"><text transform="translate(-1068.162 -200.859)">M</text><text transform="translate(-1029.082 -200.859)">A</text><text transform="translate(-1001.482 -200.859)">C</text></g><text transform="translate(-1053.282 -451.565)" font-family="'MicrosoftYaHei'" font-size="40">WIN</text><text transform="translate(-1177.083 76.999)" font-family="'MicrosoftYaHei'" font-size="40">图形／印刷</text><text transform="translate(-1257.083 367.517)" font-family="'MicrosoftYaHei'" font-size="40">产品／思维导图</text><text transform="translate(-1177.083 625.543)" font-family="'MicrosoftYaHei'" font-size="40">影视／广告</text><text transform="translate(-1057.082 1159.597)" font-family="'MicrosoftYaHei'" font-size="40">代码</text><text transform="translate(-1057.082 1456.626)" font-family="'MicrosoftYaHei'" font-size="40">通用</text><text transform="translate(-1177.083 851.076)" font-family="'MicrosoftYaHei'" font-size="40">工业／建筑</text><path fill="#FF40B6" d="M-511.112 1372.235v142.935c0 4.661-3.746 8.382-8.332 8.382h-158.339c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-627.65 1382.881a2.611 2.611 0 0 0-2.62 2.62v67.198a15.833 15.833 0 0 0-7.911-2.096c-8.724 0-15.772 7.046-15.772 15.744s7.048 15.746 15.772 15.746 15.77-7.048 15.77-15.746c0-.627-.026-1.283-.105-1.859.079-.235.105-.497.105-.761v-55.277l55.251-9.744v38.248a15.854 15.854 0 0 0-7.911-2.096c-8.724 0-15.772 7.048-15.772 15.746s7.048 15.744 15.772 15.744 15.77-7.046 15.77-15.744c0-.63-.027-1.284-.105-1.861a2.43 2.43 0 0 0 .105-.758v-73.512c0-1.284 0-2.881-2.173-2.567-.447.05-66.176 10.975-66.176 10.975"/><path fill="#29D3B2" d="M-727.133 1117.509v142.083c0 4.625-3.75 8.333-8.333 8.333H-893.8a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.542 49.583z"/><g fill="#FFF"><path d="M-835.675 1128.081h1.562v7.812h-1.562c-5.836-.205-8.545 1.772-8.125 5.938v16.562c0 4.17-1.67 7.397-5 9.688 3.33 2.295 5 5.522 5 9.688v16.562c-.42 3.955 2.289 5.83 8.125 5.625h1.562v7.812h-1.562c-11.875.415-17.607-3.75-17.188-12.5v-16.875c.205-4.165-2.188-6.25-7.188-6.25h-.938v-7.812h.938c5 0 7.393-2.08 7.188-6.25v-16.562c-.419-9.375 5.313-13.853 17.188-13.438zM-795.467 1128.081h1.562c11.875-.415 17.602 4.062 17.188 13.438v16.562c0 4.17 2.393 6.25 7.188 6.25h1.25v7.812h-1.25c-4.795 0-7.188 2.085-7.188 6.25v16.875c.414 8.54-5.312 12.705-17.188 12.5h-1.562v-7.812h1.562c5.83.205 8.539-1.67 8.125-5.625v-16.562c0-4.165 1.664-7.393 5-9.688-3.336-2.29-5-5.518-5-9.688v-16.562c.414-4.165-2.295-6.143-8.125-5.938h-1.562v-7.812z"/></g><path fill="#29D3B2" d="M-511.112 1117.509v142.083c0 4.625-3.75 8.333-8.333 8.333h-158.333a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.541 49.583z"/><ellipse fill="#FFF" cx="-598.612" cy="1131.989" rx="42.548" ry="12.063"/><path fill="#FFF" d="M-598.612 1168.058c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-598.612 1191.992c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-598.612 1215.926c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#03A9F4" d="M-49.989 1117.509v142.083c0 4.625-3.75 8.333-8.333 8.333h-158.333a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333H-99.53l49.541 49.583z"/><path fill="#FFF" d="M-162.787 1170.767c.344 20.488 16.447 28.926 31.6 28.926 12.601 0 20-2.805 26.25-6.055l2.582 10.848c-5.332 3.402-11.332 6.916-29.916 6.916-29.999 0-44.979-18.43-44.979-42.014 0-25.137 18.807-44.938 43.084-44.938 27.205 0 36.437 23.932 36.437 39.256 0 3.1-.346 5.51-.518 7.061h-64.54zm50.422-10.848c.174-9.643-5.959-24.621-23.006-24.621-15.324 0-26.039 14.117-27.244 24.621h50.25z"/><path fill="#3F7AD9" d="M-727.133-505.471l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-270.478-505.471l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#58A138" d="M-492.467-505.667l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M-49.989-505.471l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#3F7AD9" d="M175-505.666l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#718BC8" d="M646.989-505.472v142.084c0 4.624-3.75 8.332-8.334 8.332H480.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M609.489-455.056c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.387 50 50"/><path fill="#718BC8" d="M574.072-455.056c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054.001 14.584 6.531 14.584 14.584"/><path fill="#6479AB" d="M646.989-505.471l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-727.058-238.642l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#4A5BD7" d="M-727.058 49.869l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.286"/><path fill="#58A138" d="M-492.467-238.642l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#3F7AD9" d="M-259.087-238.635l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#6479AB" d="M-37.745-238.635l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-511.029 49.392l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.191"/><path fill="#8C1DCD" d="M-511.031 307.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-727.143 307.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#624A97" d="M-727.143 565.438l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-270.302 1372.735l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DCAE29" d="M-49.989 1373.221l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#0F797A" d="M-511.112 565.636l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-511.028 823.471l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#475A63" d="M-270.487 823.469l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M-37.745 823.661l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-49.989 1117.509l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#5BA23A" d="M-283.089 1117.509l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M-511.028 1117.509l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-727.133 1117.509l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC4C29" d="M-727.133 1372.535l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC3F9D" d="M-511.028 1373.024l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M190.035 1372.343l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#969594" d="M424.059 1372.221l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-259.09 49.593l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.01"/><path fill="#9E176D" d="M-37.745 49.869l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.286"/><path fill="#AD282B" d="M175.079 49.869l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.286"/><path fill="#9E176D" d="M175.079 307.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M-37.745 307.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-259.09 307.419l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-727.133 823.661l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><g><path fill="#718BC8" d="M399.989-505.397v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M362.489-468.981c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.387 50 50"/><path fill="#718BC8" d="M327.072-468.981c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path opacity=".2" fill="#231815" d="M350.447-513.731v-41.25l49.542 49.583H358.78c-4.583 0-8.333-3.75-8.333-8.333z"/><g fill="#FFF"><path d="M278.251-387.801c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982h-18.685zm12.265-4.931c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265zM307.073-403.736l3.324 5.275a119.98 119.98 0 0 1 2.522 4.297h.172c.802-1.547 1.605-2.98 2.408-4.412l3.094-5.16h7.68l-9.342 13.412 9.514 14.5h-7.967l-3.439-5.559c-.917-1.49-1.719-2.98-2.522-4.527h-.115c-.802 1.605-1.604 2.98-2.522 4.527l-3.21 5.559h-7.794l9.685-14.213-9.342-13.699h7.854zM334.575-387.801c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.23 2.982h-18.684zm12.265-4.931c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/fileType/txt.svg b/src/assets/svg/fileType/txt.svg
new file mode 100644
index 0000000..602c3b9
--- /dev/null
+++ b/src/assets/svg/fileType/txt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="200"><path fill="#448AFF" d="M-502.145 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-638.186 66.624h13.228l13.436 56.874h.208l15.002-56.874h13.334l14.584 56.874h.208l13.854-56.874h13.228L-561.624 141h-13.232l-14.892-56.876h-.212L-605.166 141h-13.44z"/><path fill="#62BB37" d="M-267.478 49.586V191.67c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.336c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-387.272 66.627h15.524l16.874 26.25 17.602-26.25h14.584l-24.582 35.832 26.354 38.542h-15.836l-18.538-28.438-18.856 28.438h-14.896l26.354-38.542z"/><path fill="#F57C00" d="M-45.489 49.582v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.332c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-162.049 66.623h32.812c5.274 0 9.582.766 12.914 2.292 3.334 1.53 5.9 3.438 7.708 5.728 1.806 2.292 3.038 4.794 3.698 7.5.66 2.71.988 5.208.988 7.5 0 2.294-.328 4.776-.988 7.45-.66 2.672-1.892 5.156-3.698 7.446-1.808 2.29-4.374 4.186-7.708 5.676-3.332 1.498-7.64 2.242-12.914 2.242h-19.792v28.54h-13.02V66.623zm13.02 35.21h19.06c1.46 0 2.954-.212 4.48-.626a12.867 12.867 0 0 0 4.218-2.032c1.286-.94 2.328-2.188 3.126-3.75.798-1.564 1.196-3.524 1.196-5.884 0-2.43-.346-4.444-1.042-6.042-.692-1.596-1.632-2.866-2.812-3.802-1.18-.94-2.534-1.578-4.06-1.928-1.53-.346-3.162-.52-4.896-.52h-19.27v24.584z"/><path fill="#448AFF" d="M399.989 49.582v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332V8.332c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M278.333 64.729h14.3l19.69 62.15h.22l20.13-62.15h13.97l-26.84 78.54h-15.288z"/><path fill="#29D3B2" d="M175 49.584v142.082c0 4.625-3.751 8.334-8.334 8.334H8.334A8.306 8.306 0 0 1 0 191.666V8.334C0 3.75 3.709.001 8.334.001h117.125L175 49.584z"/><path fill="#FFF" d="M52.388 56.627h70.225v13.121H95.032v73.626H79.846V69.748H52.388z"/><path fill="#F57C00" d="M-501.145 316.035v143.708c0 4.677-3.793 8.427-8.429 8.427h-160.141a8.398 8.398 0 0 1-8.429-8.427V274.314c0-4.636 3.75-8.429 8.429-8.429h118.462l50.108 50.15z"/><path fill="#FFF" d="M-547.284 339.92l-33.73 33.73 3.75 4.19 28.869-28.868zM-608.634 363.756c-23.634 23.634-31.372 45.44-31.372 45.44s21.806-7.738 45.44-31.372l4.072-4.074-14.068-14.066-4.072 4.072zM-585.708 368.957l-14.068-14.068 38.406-38.406 14.067 14.068zM-640.006 413.403h92.707v6.274h-92.707z"/><path fill="#62BB37" d="M-267.478 316.612v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V275.362c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-402.98 359.395h22.914v41.894h-22.914zM-366.436 319.737h22.914v81.552h-22.914zM-329.892 343.701h22.914v57.588h-22.914zM-402.98 412.527h96.002v6.2h-96.002z"/><path fill="#448AFF" d="M-34.098 316.611v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V275.361c0-4.584 3.708-8.334 8.334-8.334H-83.64l49.542 49.584z"/><path fill="#FFF" d="M-166.963 372.829v-41.732c0-4.466 3.654-8.12 8.12-8.12h74.49c4.466 0 8.12 3.654 8.12 8.12v41.732M-166.964 380.212h90.73v8.12h-90.73zM-143.284 413.566h43.368v8.12h-43.368z"/><path fill="#FFF" d="M-125.66 383.078h8.12v34.55h-8.12z"/><path fill="#718BC8" d="M187.243 316.611v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332V275.361c0-4.584 3.708-8.334 8.334-8.334h117.124l49.541 49.584z"/><path fill="#FFF" d="M99.743 303.027c-27.614 0-50 22.386-50 50s22.386 50 50 50 50-22.386 50-50c0-27.613-22.386-50-50-50zm0 64.584c-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584 0 8.055-6.53 14.584-14.584 14.584zM76.676 445.241h-4.702v-3.046h-.086c-.668 1.306-1.64 2.242-2.916 2.806a9.85 9.85 0 0 1-4.048.85c-1.77 0-3.316-.312-4.634-.936-1.322-.624-2.418-1.472-3.288-2.546-.872-1.072-1.524-2.342-1.958-3.808-.436-1.466-.654-3.04-.654-4.724 0-2.028.276-3.786.828-5.264.55-1.482 1.284-2.7 2.198-3.658.914-.958 1.958-1.66 3.134-2.11a9.96 9.96 0 0 1 3.59-.676c.698 0 1.406.066 2.134.196a9.66 9.66 0 0 1 2.09.63 8.33 8.33 0 0 1 1.848 1.112 6.16 6.16 0 0 1 1.416 1.588h.086v-11.49h4.962v31.076zm-17.324-11.013c0 .958.124 1.902.37 2.83a7.78 7.78 0 0 0 1.132 2.482 5.727 5.727 0 0 0 1.938 1.74c.782.434 1.71.652 2.784.652 1.104 0 2.054-.23 2.852-.696a5.892 5.892 0 0 0 1.958-1.828 8.278 8.278 0 0 0 1.132-2.546c.246-.942.37-1.908.37-2.894 0-2.496-.558-4.44-1.676-5.834-1.116-1.392-2.632-2.088-4.548-2.088-1.162 0-2.14.24-2.938.718a5.983 5.983 0 0 0-1.958 1.872 7.755 7.755 0 0 0-1.088 2.612 13.594 13.594 0 0 0-.328 2.98M84.249 422.739h4.702v3.132h.128c.378-.55.784-1.058 1.22-1.522.434-.464.92-.856 1.458-1.176a7.466 7.466 0 0 1 1.85-.762c.698-.188 1.494-.282 2.394-.282 1.364 0 2.634.306 3.808.914 1.176.608 2.01 1.554 2.504 2.828.84-1.158 1.812-2.074 2.916-2.74 1.102-.668 2.482-1.002 4.136-1.002 2.378 0 4.228.58 5.55 1.74 1.318 1.162 1.978 3.106 1.978 5.834v15.538h-4.962v-13.146c0-.898-.03-1.718-.086-2.458-.06-.74-.226-1.378-.502-1.916a2.836 2.836 0 0 0-1.24-1.24c-.55-.29-1.306-.434-2.264-.434-1.68 0-2.9.522-3.654 1.566-.756 1.046-1.132 2.524-1.132 4.44v13.188h-4.962v-14.45c0-1.568-.282-2.75-.85-3.548-.566-.796-1.602-1.196-3.112-1.196a4.54 4.54 0 0 0-1.85.392 4.595 4.595 0 0 0-1.566 1.13c-.45.494-.812 1.104-1.088 1.828-.278.728-.414 1.554-.414 2.482v13.362h-4.962v-22.502zM145.097 444.066c0 3.396-.95 5.928-2.85 7.596-1.9 1.67-4.636 2.502-8.204 2.502-1.134 0-2.272-.116-3.418-.346a10.209 10.209 0 0 1-3.134-1.176 7.541 7.541 0 0 1-2.37-2.178c-.64-.9-1.018-2-1.134-3.308h4.962c.146.698.392 1.262.742 1.7.346.434.76.776 1.24 1.02a4.658 4.658 0 0 0 1.586.48c.582.072 1.192.108 1.83.108 2.002 0 3.468-.492 4.396-1.48.928-.984 1.392-2.408 1.392-4.266v-3.436h-.086c-.696 1.246-1.646 2.22-2.852 2.916a7.647 7.647 0 0 1-3.896 1.044c-1.798 0-3.328-.312-4.59-.936a8.733 8.733 0 0 1-3.134-2.568c-.828-1.088-1.43-2.344-1.808-3.764-.376-1.422-.566-2.946-.566-4.57 0-1.508.234-2.946.698-4.31s1.132-2.56 2.002-3.592a9.628 9.628 0 0 1 3.2-2.46c1.262-.608 2.69-.912 4.286-.912 1.422 0 2.728.298 3.918.892 1.19.596 2.102 1.53 2.742 2.808h.086v-3.09h4.962v21.326zm-11.012-2.742c1.104 0 2.038-.224 2.808-.674a5.532 5.532 0 0 0 1.872-1.784 7.844 7.844 0 0 0 1.044-2.524c.218-.942.326-1.894.326-2.852s-.116-1.886-.346-2.786c-.234-.9-.588-1.698-1.068-2.394a5.142 5.142 0 0 0-1.872-1.654c-.768-.404-1.69-.608-2.764-.608-1.104 0-2.032.23-2.786.694a5.575 5.575 0 0 0-1.826 1.808 7.74 7.74 0 0 0-1.002 2.524 13.25 13.25 0 0 0-.306 2.808c0 .93.118 1.834.35 2.72.23.886.588 1.676 1.066 2.374a5.669 5.669 0 0 0 1.828 1.696c.74.436 1.631.652 2.676.652"/><path fill="#D32F2F" d="M399.989 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M310.975 632.686c.758 0 .758 0 0 0 .758-3.03 1.516-4.544 1.516-6.816v-1.514c.756-3.786.756-6.816 0-7.572v-.758l-.758-.758s0 .758-.758.758c-1.514 4.544-1.514 9.844 0 16.66m-22.716 52.25c-1.516.756-3.03 1.514-3.786 2.27-5.302 4.544-9.088 9.846-9.844 12.118 4.542-.758 9.086-5.302 13.63-14.388.756 0 .756 0 0 0 .756 0 0 0 0 0m69.666-11.36c-.756-.756-3.786-3.028-14.388-3.028h-1.514v.758c5.3 2.27 10.602 3.786 14.388 3.786H358.683v-.758s-.758 0-.758-.758m3.03 6.058c-1.516.758-3.786 1.516-6.816 1.516-6.058 0-15.146-1.516-22.718-5.302-12.872 1.514-22.716 3.03-30.29 6.058-.756 0-.756 0-1.514.758-9.086 15.902-16.66 23.474-22.718 23.474-1.514 0-2.27 0-3.028-.756l-3.786-2.272v-.758c-.758-1.514-.758-2.272-.758-3.786.758-3.786 5.302-10.602 14.388-15.902 1.514-.758 3.786-2.272 6.816-3.786 2.27-3.786 4.542-8.33 7.572-13.63 3.786-7.574 6.058-15.146 8.328-21.96-3.028-9.088-4.542-14.388-1.512-24.99.756-3.03 3.028-6.058 6.056-6.058h1.516c1.514 0 3.028.758 4.542 1.514 5.302 5.302 3.03 17.416 0 27.26v.758c3.03 8.33 7.574 15.146 12.116 19.688 2.272 1.516 3.786 3.03 6.816 4.544 3.786 0 6.816-.756 9.844-.756 9.088 0 15.146 1.514 17.416 5.3.758 1.514.758 3.028.758 4.544-.758.756-1.514 3.028-3.028 4.542m-49.222-29.532c-1.514 5.3-4.544 11.358-7.572 18.174-1.514 3.03-3.03 5.3-4.544 8.33h1.514c9.844-3.786 18.932-6.058 24.99-6.816-1.514-.756-2.272-1.514-3.03-2.272-3.786-4.542-8.328-10.6-11.358-17.416"/><path fill="#5465FC" d="M-502.149 604.64v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V563.39c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-628.4 623.328c4.224-.768 10.082-1.344 18.047-1.344 8.641 0 14.977 1.824 19.107 5.28 3.84 3.168 6.336 8.256 6.336 14.305 0 6.144-1.92 11.231-5.57 14.687-4.704 4.704-12.096 6.914-20.447 6.914-2.21 0-4.224-.096-5.762-.386v24.387H-628.4v-63.843zm11.711 30.144c1.44.384 3.362.48 5.762.48 8.832 0 14.207-4.32 14.207-11.903 0-7.202-4.992-11.041-13.153-11.041-3.264 0-5.568.288-6.816.576v21.888zM-577.812 676.32c2.69 1.632 7.777 3.362 12.001 3.362 5.184 0 7.488-2.114 7.488-5.186 0-3.168-1.92-4.8-7.68-6.816-9.119-3.168-12.959-8.159-12.863-13.633 0-8.255 6.816-14.687 17.663-14.687 5.184 0 9.696 1.344 12.385 2.784l-2.304 8.352c-2.016-1.152-5.762-2.688-9.89-2.688-4.224 0-6.527 2.016-6.527 4.896 0 2.978 2.208 4.416 8.159 6.53 8.448 3.072 12.385 7.392 12.481 14.303 0 8.45-6.623 14.593-19.009 14.593-5.664 0-10.753-1.346-14.207-3.266l2.303-8.544z"/><path fill="#F57C00" d="M-286.128 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-394.603 669.841l-5.568 18.337h-12.193l20.739-64.707h15.073l21.023 64.707H-368.2l-5.856-18.337h-20.547zm18.529-8.928l-5.088-15.937c-1.248-3.936-2.304-8.354-3.264-12.097h-.192c-.96 3.744-1.92 8.258-3.074 12.097l-4.992 15.937h16.61zM-334.892 628.367c0 3.552-2.592 6.336-6.72 6.336-3.938 0-6.53-2.784-6.53-6.336 0-3.648 2.69-6.434 6.624-6.434 4.034.001 6.53 2.787 6.626 6.434m-12.578 13.058h11.905v46.754h-11.905v-46.754z"/><path fill="#C11187" d="M187.239 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H20.573a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M65.564 623.902h11.807v64.707H65.564zM133.529 620.447v55.011c0 4.798.194 9.983.386 13.151h-10.561l-.48-7.392h-.192c-2.784 5.182-8.448 8.448-15.263 8.448-11.137 0-19.971-9.505-19.971-23.905-.096-15.649 9.697-24.961 20.931-24.961 6.432 0 11.042 2.688 13.151 6.144h.192v-26.497h11.807zm-11.807 40.898c0-.96-.096-2.114-.288-3.074-1.056-4.608-4.8-8.351-10.175-8.351-7.584 0-11.809 6.719-11.809 15.457 0 8.544 4.226 14.783 11.713 14.783 4.8 0 9.023-3.264 10.177-8.352.286-1.056.382-2.208.382-3.456v-7.007z"/><path fill="#F57C00" d="M-34.102 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F57C00" d="M-132.405 619.963h21.999v21.999h-21.999z"/><path fill="#FFF" d="M-74.605 648.461v-5.5h-23.791c7.5 5.298 14.101 13.349 19.571 24.041 7.678 15.011 10.454 29.8 10.566 30.422l-7.866 1.448c-.09-.484-8.178-42.534-33.412-53.021v4.978h-23.735v-4.978c-25.237 10.49-33.324 52.537-33.412 53.021l-7.867-1.448c.114-.622 2.888-15.411 10.568-30.422 5.47-10.691 12.071-18.743 19.571-24.041H-168.6v5.5h-18.999v-18.999h18.999v5.5h35.328v-7.867h23.735v7.867h34.932v-5.5h18.999v18.999h-18.999zm-39.8-16.499h-13.999v13.999h13.999v-13.999z"/><path fill="#C11187" d="M399.989 862.665v142.084c0 4.624-3.75 8.332-8.334 8.332H233.323a8.304 8.304 0 0 1-8.334-8.332V821.415c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M300.779 945.445l-6.76-12.408c-2.686-4.816-4.444-8.15-6.204-11.76h-.278c-1.482 3.61-3.148 6.944-5.648 11.76l-6.206 12.408h-13.056l18.52-31.576-17.78-30.836h13.056l6.762 12.872c2.036 3.888 3.518 6.944 5.186 10.464h.184c1.668-3.89 2.964-6.668 4.908-10.464l6.666-12.872h13.056l-18.24 30.466 18.982 31.946h-13.148zM361.981 879.699v53.06c0 4.628.186 9.63.37 12.686h-10.186l-.462-7.13h-.184c-2.688 4.998-8.15 8.148-14.724 8.148-10.742 0-19.262-9.168-19.262-23.056-.092-15.094 9.352-24.078 20.188-24.078 6.204 0 10.65 2.594 12.686 5.928h.184v-25.558h11.39zm-11.39 39.448c0-.926-.092-2.038-.276-2.964-1.02-4.444-4.632-8.056-9.818-8.056-7.314 0-11.388 6.482-11.388 14.908 0 8.242 4.074 14.26 11.296 14.26 4.63 0 8.706-3.148 9.816-8.054.278-1.02.37-2.132.37-3.336v-6.758z"/></g><path fill="#A0F" d="M-286.123 862.667v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V821.417c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-332.135 874.919h-80.848l-14.14 31.298 54.564 62.868 54.562-62.868-14.138-31.298zm-3.72 6.926l8.282 20.65h-14.884l6.602-20.65zm-7.058-.33l-6.042 19.378-15.102-19.378h21.144zm-14.072 20.98h-31.15l15.576-19.814 15.574 19.814zm-24.078-20.98l-15.1 19.378-6.044-19.378h21.144zm-28.202.33l6.602 20.65h-14.884l8.282-20.65zm-6.632 27.244h16.126l16.454 37.538-32.58-37.538zm23.326 0H-352.549l-20.01 45.652-20.012-45.652zm30.768 37.54l16.454-37.538h16.126l-32.58 37.538z"/><path fill="#D32F2F" d="M-34.619 862.665v142.084c0 4.634-3.724 8.332-8.282 8.332h-157.396c-4.608 0-8.28-3.698-8.28-8.332V821.415c0-4.584 3.698-8.334 8.28-8.334h116.408l49.27 49.584z"/><path fill="#FFF" d="M-72.133 887.703c.579.149 1.173.25 1.734.453 1.728.628 2.294 2.07 2.253 3.887-.056 2.523-.229 5.022-.936 7.483-1.308 4.549-4.119 7.567-8.195 9.358-2.871 1.261-5.893 1.72-8.935 2.076-2.098.243-4.193.535-6.287.821-.28.038-.561.149-.823.272-1.119.519-1.41 1.537-.582 2.444a21.79 21.79 0 0 0 2.803 2.557c3.754 2.883 7.615 5.62 11.301 8.595 4.167 3.362 7.819 7.291 10.595 12.06 2.726 4.684 4.108 9.789 3.925 15.378-.048 1.475-.722 2.326-2.111 2.396-2.159.107-4.32.123-6.479.143-2.682.024-5.362.014-8.044.02-2.732.004-5.466.002-8.201.012-1.952.006-3.905.032-5.857.034a18.846 18.846 0 0 1-1.714-.072c-2.436-.213-3.34-1.159-3.585-3.744-.35-3.664-.907-7.263-2.306-10.649-2.35-5.696-6.167-9.981-11.098-13.207-4.259-2.785-8.891-4.531-13.923-4.972-4.961-.436-9.579.553-13.287 4.575-2.241 2.43-3.477 5.428-4.342 8.621-.392 1.445-.734 2.905-1.165 4.336-.491 1.626-1.811 1.96-3.147 2.006-2.916.099-5.831.099-8.746.125-2.682.024-5.362.028-8.044.042-2.473.014-4.947.052-7.418.03-.646-.006-1.294-.153-1.924-.308-.936-.227-1.314-.779-1.261-1.781.328-6.092 2.74-11.054 7.364-14.82 3.811-3.102 8.145-5.034 12.694-6.352 4.315-1.251 8.696-2.227 13.042-3.356 1.219-.316 2.443-.656 3.614-1.135 1.873-.766 2.179-2.022.7-3.4-1.419-1.326-3.006-2.479-4.623-3.529-4.352-2.825-8.839-5.428-12.798-8.873-4.062-3.535-7.462-7.615-9.315-12.969-.974-2.817-1.38-5.744-1.374-8.754 0-1.155.557-2.05 1.783-2.34a21.873 21.873 0 0 1 4.406-.573c3.332-.09 6.664-.052 9.996-.058 2.682-.004 5.364.01 8.044.008 1.98 0 3.958-.02 5.937-.016.909.002 1.819.046 2.73.066 1.533.034 2.197.543 2.491 2.141.348 1.889.584 3.803.885 5.704 1.078 6.815 3.631 12.766 8.76 17.178 3.527 3.036 7.639 4.449 12.194 4.646 2.382.102 4.744.068 7.046-.751 3.547-1.261 5.269-4.096 4.937-8.018-.151-1.813-.272-3.63-.382-5.446-.074-1.235.312-1.982 1.469-2.207 1.451-.284 2.946-.38 4.418-.403 2.942-.042 5.883.03 8.825.044 2.68.01 5.362-.01 8.042.012 1.638.012 3.273.074 4.911.114l.003.096"/><path fill="#D32F2F" d="M187.244 862.665v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332V821.415c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M109.86 992.755s-.022-23.724 0-30.064c0-.318-.008-.636 0-.952.07-3.12 1.69-4.742 4.84-4.752 6.614-.02 13.226 0 19.84 0 5.562 0 8.37-2.794 8.372-8.35.002-22.692-.008-45.384.008-68.078.002-3.048-1.018-5.546-3.796-6.986-1.046-.542-2.326-.878-3.502-.88a23363.06 23363.06 0 0 0-72.018-.05c-3.896.002-6.908 3.018-7.108 6.962-.046.904-.01 1.812-.01 2.718v66.582c0 5.096 3.012 8.082 8.12 8.08 11.776-.006 35.328-.002 35.328-.002v9.812s-23.946-.008-36.04.008c-2.722.002-5.344-.46-7.734-1.76-5.898-3.212-9.34-8.042-9.346-14.932-.024-23.372.092-46.744-.07-70.114-.05-7.154 5.04-15.584 14.712-17.022a18.82 18.82 0 0 1 2.704-.2c23.916-.024 47.83-.042 71.746-.05 9-.004 16.8 7.706 16.812 16.718.034 23.462.034 46.924.006 70.388-.012 9.346-7.282 17.056-16.64 17.254-4.708.098-9.422.056-14.13.014-1.088-.01-2.122 1.36-2.122 1.36l-9.972 24.296z"/><path d="M83.498 902.342v2.236c.002 11.594.006 23.186.006 34.778 0 1.808-.004 1.814-1.772 1.814-3.432.004-6.864.002-10.436.002-.036-.67-.09-1.194-.09-1.716-.004-16.03.014-32.062-.03-48.092-.004-1.318.376-1.672 1.672-1.656 5.432.068 10.868.076 16.302-.008 1.324-.02 1.76.446 2.066 1.66 2.618 10.354 5.304 20.69 7.972 31.032.12.466.272.922.734 1.436.158-.416.358-.824.47-1.252 2.75-10.552 5.506-21.1 8.212-31.664.244-.948.66-1.198 1.582-1.194 5.616.016 11.23.01 16.844-.068 1.212-.016 1.53.366 1.528 1.544-.034 16.168-.034 32.334.002 48.5.004 1.182-.31 1.582-1.52 1.548-3.214-.092-6.43-.056-9.644-.082-.398-.004-.792-.07-1.36-.124v-38.544l-.38-.072c-.148.432-.32.86-.442 1.3-3.336 12.034-6.678 24.068-9.978 36.114-.276 1.008-.706 1.394-1.766 1.36-2.398-.074-4.802-.08-7.2-.002-1.094.036-1.586-.296-1.884-1.388-3.3-12.09-6.654-24.168-9.996-36.246-.116-.42-.266-.832-.4-1.248a40.6 40.6 0 0 1-.492.032"/></g><path fill="#A0F" d="M-502.144 862.666v142.084c0 4.624-3.75 8.332-8.334 8.332H-668.81a8.304 8.304 0 0 1-8.334-8.332V821.416c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-636.701 883.832c4.416-.768 11.04-1.344 17.856-1.344 9.314 0 15.65 1.536 19.972 5.184 3.55 2.976 5.568 7.488 5.568 12.962 0 8.352-5.666 14.016-11.714 16.224v.29c4.608 1.726 7.394 6.238 9.024 12.48 2.018 8.064 3.744 15.554 5.09 18.05h-12.194c-.96-1.92-2.496-7.202-4.32-15.266-1.824-8.45-4.896-11.136-11.616-11.328h-5.954v26.594h-11.712v-63.846zm11.712 28.61h7.01c7.968 0 12.96-4.224 12.96-10.656 0-7.104-4.992-10.37-12.674-10.37-3.744 0-6.144.288-7.296.576v20.45zM-582.078 883.832c4.224-.768 10.08-1.344 18.048-1.344 8.642 0 14.978 1.824 19.108 5.28 3.84 3.168 6.336 8.256 6.336 14.306 0 6.144-1.92 11.232-5.57 14.688-4.704 4.704-12.096 6.914-20.448 6.914-2.21 0-4.224-.096-5.762-.386v24.388h-11.712v-63.846zm11.712 30.146c1.442.384 3.362.48 5.762.48 8.832 0 14.208-4.32 14.208-11.904 0-7.202-4.992-11.042-13.154-11.042-3.264 0-5.568.288-6.816.576v21.89z"/><path fill="#7757BC" d="M-502.145 1120.691v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-622.977 1184.254l-5.408 17.81h-11.842l20.142-62.846h14.64l20.42 62.846h-12.31l-5.686-17.81h-19.956zm17.997-8.67l-4.942-15.48c-1.212-3.822-2.238-8.112-3.17-11.748h-.186c-.932 3.636-1.866 8.02-2.984 11.748l-4.85 15.48h16.132zM-569.833 1182.576c.28 8.206 6.714 11.75 13.986 11.75 5.316 0 9.14-.746 12.588-2.052l1.678 7.926c-3.914 1.586-9.322 2.798-15.85 2.798-14.732 0-23.404-9.046-23.404-22.94 0-12.586 7.646-24.428 22.192-24.428 14.732 0 19.58 12.122 19.58 22.098 0 2.146-.186 3.824-.372 4.848h-30.398zm19.955-8.018c.096-4.196-1.772-11.096-9.416-11.096-7.086 0-10.07 6.434-10.538 11.096h19.954z"/><path fill="#009497" d="M-286.123 1120.693v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-373.623 1121.711l32.85 40.88v57.67h21.9v-69.35zM-428.373 1220.261h21.9v-57.67l32.85-40.88-54.75 29.2z"/><path fill="#FFF" d="M-373.623 1217.341l22.63-24.554-22.63-71.076-23.36 71.076z"/><path fill="#D32F2F" d="M-502.145 1378.718v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-568.506 1453.024h-42.28v-42.278h42.28v42.278zm8-50.278h-58.28v58.278h58.28v-58.278z"/><path fill="#FFF" d="M-597.22 1424.31h15.15v15.15h-15.15zM-594.574 1375.394h9.856v29.25h-9.856zM-594.574 1458.976h9.856v29.4h-9.856zM-563.312 1426.956h30.158v9.856h-30.158zM-646.136 1426.956h29.492v9.856h-29.492z"/><path fill="#03A9F4" d="M187.244 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332H20.578a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M99.744 1485.525l-49.5-27.692v-54.016l49.5-23.076 49.5 23.076v54.016l-49.5 27.692zm-40.5-32.97l40.5 22.658 40.5-22.658v-43.004l-40.5-18.88-40.5 18.88v43.004z"/><path fill="#FFF" d="M99.722 1436.507l-47.176-26.392 4.394-7.856 42.824 23.958 42.816-23.478 4.328 7.892z"/><path fill="#FFF" d="M99.744 1484.87a4.502 4.502 0 0 1-4.5-4.5v-49.008c0-2.484 2.016-4.5 4.5-4.5s4.5 2.016 4.5 4.5v49.008c0 2.484-2.017 4.5-4.5 4.5"/><path fill="#546E7A" d="M-45.489 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-76.466 1436.932c-.66-7.46-2.24-13.22-5-18.12-2.88-5.12-6.56-8.7-11.22-11-4.46-2.18-9.44-3.54-16.18-4.4-6.22-.8-12.78-1.02-20.98-.66-3.18.14-6.9.34-10.48.92-3.74.58-6.44 1.26-8.8 2.22-5 2.06-8.96 5.96-12.12 11.96-1.84 3.48-2.92 7.62-3.32 12.64-.58 7.4-.22 12.98 1.14 18.1.76 2.82 1.86 5.02 3.36 6.72 3.62 4.08 8.42 6.76 15.54 8.7 2.48.68 5.06 1.04 7.28 1.3 6.22.76 11.32.46 16.12-.96 5.34-1.58 10.2-3.9 14.48-6.92 2.18-1.54 4.24-3.42 6.12-5.22.62-.6.74-.76-.04-1.78-2.24-2.94-5.3-5.4-9.34-7.58-2.72-1.44-5.42-2.08-8.36-1.94-4.04.18-7.8.24-11.52.14-2.64-.06-5.18-.12-7.52-.9-3.14-1.04-6.12-2.64-8.98-4.2-1.84-.98-3.28-2.24-4.48-3.36-.48-.44-1.1-1.14-1.06-2.04.04-.92.74-1.58 1.34-2.04 1.06-.82 2.16-1.58 3.26-2.3l1.94-1.28c2.44-1.58 4.94-3.2 7.5-4.72l.66-.38c2.14-1.28 4.36-2.6 6.78-3.34 3.52-1.08 7.18-1.22 9.98-1.22.7 0 1.38 0 2.08.02 4.78.1 9.08.9 13.1 2.44 3.44 1.32 6.36 3.18 8.68 5.52 4.54 4.56 7.1 10.58 7.8 18.46.5 5.4.26 10.76-.7 15.88-.4 2.12-1.14 4.22-1.88 6.2-1.08 2.94-3.36 4.9-5.42 6.52-1.54 1.22-3.04 2.08-4.48 2.6-2.94 1.04-5.6 1.76-8.16 2.24l-.66.12c-4.16.78-8.46 1.58-12.76 1.88-4.16.26-8.6.38-14.34.38-1.44 0-2.86 0-4.3-.02-7.74-.06-13.9-1.06-19.36-3.16-3.74-1.42-6.76-3.68-9.02-6.72-2.62-3.54-4.36-7.84-5.16-12.8-1.16-7.24-1.84-12.82-2.24-18.1-.62-8.08.14-15.64 2.28-22.44.74-2.4 1.86-4.8 3.3-7.12 1.68-2.68 4.08-4.98 7.18-6.82 3.38-2.02 7.22-3.32 12.44-4.2 1.5-.26 3.02-.44 4.54-.62.92-.12 1.84-.22 2.76-.36 1.84-.24 3.68-.52 5.52-.78 3.3-.48 6.6-.96 9.9-1.38 5.14-.64 10.2-.72 14.04-.72 2.2 0 4.4.02 6.62.06l1.04.02c3.28.04 6.6.2 9.82.34 1.58.08 3.18.16 4.76.22h.4c0-.08 0-.18-.02-.32l-.76-6.14-.96-7.92-.16-.16c-.34 0-.66.06-.98.1-1.36.24-2.74.48-4.1.72-2.92.5-5.92 1.04-8.92 1.44-7.28.96-13.34 1.74-19.7 2.28l-3.96.32c-7.5.58-15.26 1.2-22.72 2.74-2.62.54-5.66 1.2-8.58 2.12-2.94.92-5.8 2.1-8.22 3.14-2.96 1.28-5.52 3.1-7.62 5.42-3.94 4.36-6.66 9.78-8.58 17.06-1.36 5.22-2.02 10.96-2.12 18.58-.08 8.3.94 16.68 3.14 25.58 1.82 7.34 4.02 13.02 6.92 17.94 2.08 3.5 4.48 6.08 7.32 7.88 3.72 2.38 7.02 3.8 10.38 4.5l2.3.5c2.96.64 6.02 1.32 9.02 1.6 4.24.38 8.58.56 12.78.72l4.4.18.02-.3h.96c1.2 0 2.4.02 3.6.04 2.6.02 5.2.06 7.8-.08 7.2-.4 14.8-1.02 21.92-3.64 2.36-.88 4.84-1.88 6.86-3.3 2.58-1.84 4.98-4.08 7.3-6.24l.56-.54c4.8-4.48 7.56-10.12 8.16-16.72.72-7.88.74-15.78.08-23.5m-55.48 20.6c.04-.44.1-.88.2-1.3.58-2.4 1.16-4.82 1.8-7.2.2-.76.54-2.04 1.98-2.04.3 0 .62.06 1.16.18 4.3 1.06 8.62 2.12 12.94 3.22.36.08.68.24.96.38l.96.44-.14 1.7-5.04 1.8c-3.94 1.38-7.86 2.74-11.8 4.1-.48.16-.96.22-1.4.28l-.52.06-1.32.22.22-1.84z"/><path fill="#FFF" d="M-122.533 1419.891c-.42 1.08-.86 2.16-1.28 3.24-.62 1.54-1.24 3.1-1.84 4.66-.08.2-.1.22-.7.32-.06.02-.14.04-.22.04l-1.84-.38c-1.64-.34-3.26-.68-4.88-1.08-1.04-.24-2.06-.58-3.02-.92.76-.3 1.52-.6 2.28-.92 1.6-.64 3.18-1.28 4.78-1.96 1.34-.58 2.68-1.18 4.02-1.8.879-.4 1.759-.8 2.7-1.2"/><path fill="#009497" d="M-286.123 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-327.08 1479.676h-93.086v-93.086h93.086v93.086zm-89.086-4h85.086v-85.086h-85.086v85.086z"/><path fill="#FFF" d="M-378.984 1388.59h49.904v49.904h-49.904z"/><path fill="#62BB37" d="M-58.1 1672.263v142.935c0 4.661-3.746 8.382-8.332 8.382h-158.339c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-172.751 1750.489c0 2.76 1.793 4.609 4.523 4.609h4.523v16.094c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.784-3.201 6.784-6.901v-16.094h9.074v16.094c0 3.67 3.173 6.901 6.785 6.901s6.785-3.201 6.785-6.901v-16.094h4.523c2.731 0 4.521-1.849 4.521-4.609v-45.99h-54.299v45.99zm-11.335-45.99c-3.641 0-6.784 3.201-6.784 6.901v32.188c0 3.67 3.173 6.901 6.784 6.901 3.612 0 6.785-3.201 6.785-6.901V1711.4c-.001-3.67-3.173-6.901-6.785-6.901m76.97 0c-3.611 0-6.783 3.201-6.783 6.901v32.188c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.785-3.201 6.785-6.901V1711.4c.03-3.67-3.143-6.901-6.785-6.901m-22.612-26.665l5.903-5.961c.911-.911.911-2.32 0-3.201-.91-.911-2.232-.911-3.171 0l-6.784 6.901c-3.171-2.292-7.253-3.201-11.776-3.201s-8.575.909-12.245 2.761l-6.344-6.931c-.881-.441-2.732-.441-3.614 0-.441.911-.441 2.76 0 3.672l5.903 5.961c-6.344 5.05-10.864 12.863-10.864 22.053h54.299c0-9.163-4.551-17.444-11.307-22.054m-24.902 12.891h-4.523v-4.611h4.523v4.611zm22.612 0h-4.523v-4.611h4.523v4.611z"/><path fill="#ACACAC" d="M649.047 1927.591v142.084c0 4.624-3.75 8.332-8.334 8.332H482.381a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M517.517 1945.888h88.062v12.848h-88.062zM517.517 1975.75h88.062v12.848h-88.062zM517.517 2005.612h61.644v12.846h-61.644z"/><path fill="#03A9F4" d="M414.024 1927.86v141.33c0 4.598-3.717 8.29-8.242 8.29H249.266c-4.573 0-8.242-3.693-8.242-8.29v-182.366c0-4.548 3.669-8.29 8.242-8.29h115.773l48.985 49.326z"/><path fill="#FFF" d="M379.844 1980.086c-.135 6.281-2.731 12.037-6.867 16.172-4.146 4.134-9.756 6.671-15.977 6.671h-11.048a34.074 34.074 0 0 0 5.939-9.161H357c7.404 0 13.513-6.098 13.685-13.818.159-7.513-5.953-13.439-13.685-13.671h-21.634c-3.049 0-5.89 1.036-8.209 2.793a13.78 13.78 0 0 0-3.292 3.536 14.142 14.142 0 0 0-2.318 7.476l-9.159-.135c.014-.817.074-1.634.183-2.427.817-6.462 4.281-12.145 9.245-15.866 3.806-2.854 8.501-4.548 13.55-4.548H357c12.477.269 23.111 10.269 22.844 22.978"/><path fill="#FFF" d="M275.205 1979.952c.135-6.281 2.731-12.036 6.866-16.172 4.146-4.134 9.756-6.671 15.977-6.671h11.048a34.074 34.074 0 0 0-5.939 9.161h-5.11c-7.404 0-13.513 6.098-13.685 13.818-.159 7.513 5.953 13.439 13.685 13.671h21.634c3.049 0 5.891-1.036 8.209-2.793a13.748 13.748 0 0 0 3.292-3.536 14.142 14.142 0 0 0 2.318-7.476l9.159.135a20.059 20.059 0 0 1-.183 2.427c-.817 6.462-4.281 12.145-9.245 15.866-3.806 2.854-8.501 4.548-13.55 4.548h-21.634c-12.476-.269-23.109-10.269-22.842-22.978"/><path fill="#7757BC" d="M-45.313 1927.791v142.084c0 4.634-3.754 8.332-8.349 8.332h-158.657c-4.645 0-8.346-3.698-8.346-8.332v-183.334c0-4.584 3.727-8.334 8.346-8.334h117.341l49.665 49.584z"/><path fill="#FFF" d="M-104.513 1973.395v-17.866c0-3.066-2.28-5.109-5.71-5.109h-68.351c-3.405 0-5.71 2.042-5.71 5.109v51.006c0 3.066 2.278 5.108 5.71 5.108h68.377c3.405 0 5.71-2.042 5.71-5.108v-17.84l22.791 20.408v-56.114l-22.817 20.406z"/><path fill="#FF5722" d="M-502.145 1927.592v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M-621.196 1983.244l24.53 27.062 33.552-46.552 38.612 62.062h-126.286zM-599.02 1952.336c0 8.444-6.844 15.288-15.288 15.288-8.442 0-15.288-6.844-15.288-15.288 0-8.444 6.846-15.288 15.288-15.288 8.444 0 15.288 6.844 15.288 15.288"/><path fill="#FDCA07" d="M175 1928.278v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 2070.362v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124L175 1928.278z"/><path fill="#FFF" d="M75.237 1877.32h12.262v12.262H75.237zM75.237 1901.846h12.262v12.262H75.237zM75.237 1925.366h12.262v12.262H75.237zM75.237 1949.594h12.262v27.04H75.237zM87.501 1889.584h12.262v12.262H87.501zM87.501 1914.108h12.262v12.262H87.501zM87.501 1937.542h12.262v12.262H87.501z"/><path fill="#FFF" d="M81.369 1964.372h18.394v12.262H81.369zM102.235 2021.067l-4.324-33.834-21.932-.198-3.466 34.032c-.484 3.656 1.572 6.864 6.52 6.864h16.682c4.736 0 7.034-3.328 6.52-6.864zm-7.153-.325H79.667v-6.292h15.414v6.292z"/><path fill="#FFED18" d="M886.322 1921.911h-78.974l-17.276-17.5h-61.24a8.76 8.76 0 0 0-8.76 8.76v129.683c0 4.812 3.938 8.75 8.75 8.75h157.5c4.812 0 8.75-3.938 8.75-8.75v-112.193c0-4.813-3.937-8.75-8.75-8.75"/><path fill="#FDCA07" d="M895.072 2042.852c0 4.812-3.938 8.75-8.75 8.75h-157.5c-4.812 0-8.75-3.938-8.75-8.75v-93.984c0-4.812 3.938-8.75 8.75-8.75h157.5c4.812 0 8.75 3.938 8.75 8.75v93.984z"/><g font-family="'MicrosoftYaHei'" font-size="40"><text transform="translate(-843.173 354.197)">M</text><text transform="translate(-804.093 354.197)">A</text><text transform="translate(-776.493 354.197)">C</text></g><text transform="translate(-828.293 103.49)" font-family="'MicrosoftYaHei'" font-size="40">WIN</text><text transform="translate(-952.094 632.054)" font-family="'MicrosoftYaHei'" font-size="40">图形／印刷</text><text transform="translate(-1032.094 922.573)" font-family="'MicrosoftYaHei'" font-size="40">产品／思维导图</text><text transform="translate(-952.094 1180.598)" font-family="'MicrosoftYaHei'" font-size="40">影视／广告</text><text transform="translate(-832.094 1714.652)" font-family="'MicrosoftYaHei'" font-size="40">代码</text><text transform="translate(-832.094 2011.682)" font-family="'MicrosoftYaHei'" font-size="40">通用</text><text transform="translate(-952.094 1406.132)" font-family="'MicrosoftYaHei'" font-size="40">工业／建筑</text><path fill="#FF40B6" d="M-286.123 1927.291v142.935c0 4.662-3.746 8.382-8.332 8.382h-158.339c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M-402.661 1937.936a2.611 2.611 0 0 0-2.62 2.62v67.198a15.834 15.834 0 0 0-7.911-2.097c-8.724 0-15.772 7.046-15.772 15.744s7.048 15.746 15.772 15.746 15.77-7.048 15.77-15.746c0-.627-.026-1.283-.105-1.859.079-.235.105-.497.105-.761v-55.277l55.251-9.744v38.247a15.854 15.854 0 0 0-7.911-2.096c-8.724 0-15.772 7.048-15.772 15.746s7.048 15.744 15.772 15.744 15.77-7.046 15.77-15.744c0-.63-.027-1.283-.105-1.861a2.43 2.43 0 0 0 .105-.758v-73.512c0-1.284 0-2.881-2.173-2.567-.447.052-66.176 10.977-66.176 10.977"/><path fill="#29D3B2" d="M-502.145 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333h-158.333a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.541 49.583z"/><g fill="#FFF"><path d="M-610.686 1683.137h1.562v7.812h-1.562c-5.836-.205-8.545 1.772-8.125 5.938v16.562c0 4.17-1.67 7.397-5 9.688 3.33 2.295 5 5.522 5 9.688v16.562c-.42 3.955 2.289 5.83 8.125 5.625h1.562v7.812h-1.562c-11.875.415-17.607-3.75-17.188-12.5v-16.875c.205-4.165-2.188-6.25-7.188-6.25H-636v-7.812h.938c5 0 7.393-2.08 7.188-6.25v-16.562c-.42-9.376 5.313-13.853 17.188-13.438zM-570.478 1683.137h1.562c11.875-.415 17.602 4.062 17.188 13.438v16.562c0 4.17 2.393 6.25 7.188 6.25h1.25v7.812h-1.25c-4.795 0-7.188 2.085-7.188 6.25v16.875c.414 8.54-5.312 12.705-17.188 12.5h-1.562v-7.812h1.562c5.83.205 8.539-1.67 8.125-5.625v-16.562c0-4.165 1.664-7.393 5-9.688-3.336-2.29-5-5.518-5-9.688v-16.562c.414-4.165-2.295-6.143-8.125-5.938h-1.562v-7.812z"/></g><path fill="#29D3B2" d="M-286.123 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333H-452.79a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.542 49.583z"/><ellipse fill="#FFF" cx="-373.623" cy="1687.044" rx="42.548" ry="12.063"/><path fill="#FFF" d="M-373.623 1723.114c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-373.623 1747.048c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.888 12.899 43.5 12.899z"/><path fill="#FFF" d="M-373.623 1770.981c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676c0 .001 6.888 12.899 43.5 12.899z"/><path fill="#03A9F4" d="M175 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333H8.333A8.304 8.304 0 0 1 0 1814.648v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125L175 1672.565z"/><path fill="#FFF" d="M62.202 1725.822c.344 20.488 16.447 28.926 31.6 28.926 12.601 0 20-2.805 26.25-6.055l2.582 10.848c-5.332 3.402-11.332 6.916-29.916 6.916-29.999 0-44.978-18.43-44.978-42.014 0-25.137 18.807-44.938 43.084-44.938 27.205 0 36.437 23.932 36.437 39.256 0 3.1-.346 5.51-.518 7.061H62.202zm50.422-10.847c.174-9.643-5.959-24.621-23.006-24.621-15.324 0-26.039 14.117-27.244 24.621h50.25z"/><path fill="#3F7AD9" d="M-502.145 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#D46B1C" d="M-45.489 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#58A138" d="M-267.478 49.388l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.194"/><path fill="#2FB69A" d="M175 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#3F7AD9" d="M399.989 49.39l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.193"/><path fill="#718BC8" d="M871.977 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332H705.311a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M834.477 100c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M799.061 100c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path fill="#6479AB" d="M871.977 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#D46B1C" d="M-502.069 316.413l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V266.83"/><path fill="#4A5BD7" d="M-502.069 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#58A138" d="M-267.478 316.413l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V266.83"/><path fill="#3F7AD9" d="M-34.098 316.42l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#6479AB" d="M187.243 316.42l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-286.04 604.447l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#8C1DCD" d="M-286.042 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.154 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#624A97" d="M-502.154 1120.494l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-45.313 1927.79l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DCAE29" d="M175 1928.277l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#0F797A" d="M-286.123 1120.691l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-286.039 1378.526l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#475A63" d="M-45.499 1378.524l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M187.244 1378.717l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M175 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#5BA23A" d="M-58.1 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M-286.039 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.145 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC4C29" d="M-502.145 1927.59l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC3F9D" d="M-286.039 1928.08l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M415.024 1927.398l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#969594" d="M649.047 1927.276l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M-34.101 604.649l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M187.243 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M400.068 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M400.068 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M187.243 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-34.101 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M-502.145 1378.717l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><g><path fill="#718BC8" d="M624.977 49.658v142.084c0 4.624-3.75 8.332-8.334 8.332H458.311a8.304 8.304 0 0 1-8.334-8.332V8.408c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M587.477 86.075c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M552.061 86.075c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path opacity=".2" fill="#231815" d="M575.436 41.324V.074l49.542 49.583H583.77c-4.584 0-8.334-3.75-8.334-8.333z"/><g fill="#FFF"><path d="M503.24 167.254c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982H503.24zm12.265-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265zM532.062 151.32l3.324 5.275a119.98 119.98 0 0 1 2.522 4.297h.172c.802-1.547 1.604-2.98 2.408-4.412l3.094-5.16h7.68l-9.342 13.412 9.514 14.5h-7.967l-3.438-5.559c-.917-1.49-1.719-2.98-2.522-4.527h-.115c-.802 1.605-1.604 2.98-2.522 4.527l-3.21 5.559h-7.794l9.685-14.213-9.342-13.699h7.853zM559.564 167.254c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982h-18.685zm12.265-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/fileType/word.svg b/src/assets/svg/fileType/word.svg
new file mode 100644
index 0000000..16aa1a4
--- /dev/null
+++ b/src/assets/svg/fileType/word.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="200"><path fill="#448AFF" d="M175 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 191.669V8.334C0 3.75 3.708 0 8.334 0h117.124L175 49.584z"/><path fill="#FFF" d="M38.959 66.624h13.228l13.436 56.874h.208l15.002-56.874h13.334l14.584 56.874h.208l13.854-56.874h13.228L115.521 141h-13.232L87.397 84.124h-.212L71.979 141h-13.44z"/><path fill="#62BB37" d="M409.667 49.586V191.67c0 4.624-3.75 8.332-8.334 8.332H243.001a8.304 8.304 0 0 1-8.334-8.332V8.336c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M289.873 66.627h15.524l16.874 26.25 17.602-26.25h14.584l-24.582 35.832 26.354 38.542h-15.836l-18.538-28.438-18.856 28.438h-14.896l26.354-38.542z"/><path fill="#F57C00" d="M631.656 49.582v142.084c0 4.624-3.75 8.332-8.334 8.332H464.99a8.304 8.304 0 0 1-8.334-8.332V8.332c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M515.096 66.623h32.812c5.274 0 9.582.766 12.914 2.292 3.334 1.53 5.9 3.438 7.708 5.728 1.806 2.292 3.038 4.794 3.698 7.5.66 2.71.988 5.208.988 7.5 0 2.294-.328 4.776-.988 7.45-.66 2.672-1.892 5.156-3.698 7.446-1.808 2.29-4.374 4.186-7.708 5.676-3.332 1.498-7.64 2.242-12.914 2.242h-19.792v28.54h-13.02V66.623zm13.02 35.21h19.06c1.46 0 2.954-.212 4.48-.626a12.867 12.867 0 0 0 4.218-2.032c1.286-.94 2.328-2.188 3.126-3.75.798-1.564 1.196-3.524 1.196-5.884 0-2.43-.346-4.444-1.042-6.042-.692-1.596-1.632-2.866-2.812-3.802-1.18-.94-2.534-1.578-4.06-1.928-1.53-.346-3.162-.52-4.896-.52h-19.27v24.584z"/><path fill="#448AFF" d="M1077.133 49.582v142.084c0 4.624-3.75 8.332-8.334 8.332H910.467a8.304 8.304 0 0 1-8.334-8.332V8.332c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M955.478 64.729h14.3l19.69 62.15h.22l20.13-62.15h13.97l-26.84 78.54H981.66z"/><path fill="#29D3B2" d="M852.144 49.584v142.082c0 4.625-3.751 8.334-8.334 8.334H685.478a8.306 8.306 0 0 1-8.334-8.334V8.334c0-4.584 3.709-8.334 8.334-8.334h117.125l49.541 49.584z"/><path fill="#FFF" d="M729.533 56.627h70.225v13.121h-27.581v73.626h-15.186V69.748h-27.458z"/><path fill="#F57C00" d="M175.999 316.035v143.708c0 4.677-3.793 8.427-8.429 8.427H7.429A8.398 8.398 0 0 1-1 459.743V274.314c0-4.636 3.75-8.429 8.429-8.429h118.462l50.108 50.15z"/><path fill="#FFF" d="M129.86 339.92l-33.73 33.73 3.75 4.19 28.87-28.868zM68.511 363.756c-23.634 23.634-31.372 45.44-31.372 45.44s21.806-7.738 45.44-31.372l4.072-4.074-14.068-14.066-4.072 4.072zM91.439 368.963L77.37 354.895l38.405-38.405 14.068 14.067zM37.139 413.403h92.707v6.274H37.139z"/><path fill="#62BB37" d="M409.667 316.612v142.084c0 4.624-3.75 8.332-8.334 8.332H243.001a8.304 8.304 0 0 1-8.334-8.332V275.362c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M274.165 359.395h22.914v41.894h-22.914zM310.709 319.737h22.914v81.552h-22.914zM347.253 343.701h22.914v57.588h-22.914zM274.165 412.527h96.002v6.2h-96.002z"/><path fill="#448AFF" d="M643.047 316.611v142.084c0 4.624-3.75 8.332-8.334 8.332H476.381a8.304 8.304 0 0 1-8.334-8.332V275.361c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M510.181 372.829v-41.732c0-4.466 3.654-8.12 8.12-8.12h74.49c4.466 0 8.12 3.654 8.12 8.12v41.732M510.181 380.212h90.73v8.12h-90.73zM533.861 413.566h43.368v8.12h-43.368z"/><path fill="#FFF" d="M551.485 383.078h8.12v34.55h-8.12z"/><path fill="#718BC8" d="M864.388 316.611v142.084c0 4.624-3.75 8.332-8.334 8.332H697.722a8.304 8.304 0 0 1-8.334-8.332V275.361c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M776.888 303.027c-27.614 0-50 22.386-50 50s22.386 50 50 50 50-22.386 50-50c0-27.613-22.386-50-50-50zm-.001 64.584c-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584 0 8.055-6.53 14.584-14.584 14.584zM753.82 445.241h-4.702v-3.046h-.086c-.668 1.306-1.64 2.242-2.916 2.806a9.85 9.85 0 0 1-4.048.85c-1.77 0-3.316-.312-4.634-.936-1.322-.624-2.418-1.472-3.288-2.546-.872-1.072-1.524-2.342-1.958-3.808-.436-1.466-.654-3.04-.654-4.724 0-2.028.276-3.786.828-5.264.55-1.482 1.284-2.7 2.198-3.658.914-.958 1.958-1.66 3.134-2.11a9.96 9.96 0 0 1 3.59-.676c.698 0 1.406.066 2.134.196a9.66 9.66 0 0 1 2.09.63 8.33 8.33 0 0 1 1.848 1.112 6.16 6.16 0 0 1 1.416 1.588h.086v-11.49h4.962v31.076zm-17.324-11.013c0 .958.124 1.902.37 2.83a7.78 7.78 0 0 0 1.132 2.482 5.727 5.727 0 0 0 1.938 1.74c.782.434 1.71.652 2.784.652 1.104 0 2.054-.23 2.852-.696a5.892 5.892 0 0 0 1.958-1.828 8.278 8.278 0 0 0 1.132-2.546c.246-.942.37-1.908.37-2.894 0-2.496-.558-4.44-1.676-5.834-1.116-1.392-2.632-2.088-4.548-2.088-1.162 0-2.14.24-2.938.718a5.983 5.983 0 0 0-1.958 1.872 7.755 7.755 0 0 0-1.088 2.612 13.594 13.594 0 0 0-.328 2.98M761.394 422.739h4.702v3.132h.128c.378-.55.784-1.058 1.22-1.522.434-.464.92-.856 1.458-1.176a7.466 7.466 0 0 1 1.85-.762c.698-.188 1.494-.282 2.394-.282 1.364 0 2.634.306 3.808.914 1.176.608 2.01 1.554 2.504 2.828.84-1.158 1.812-2.074 2.916-2.74 1.102-.668 2.482-1.002 4.136-1.002 2.378 0 4.228.58 5.55 1.74 1.318 1.162 1.978 3.106 1.978 5.834v15.538h-4.962v-13.146c0-.898-.03-1.718-.086-2.458-.06-.74-.226-1.378-.502-1.916a2.836 2.836 0 0 0-1.24-1.24c-.55-.29-1.306-.434-2.264-.434-1.68 0-2.9.522-3.654 1.566-.756 1.046-1.132 2.524-1.132 4.44v13.188h-4.962v-14.45c0-1.568-.282-2.75-.85-3.548-.566-.796-1.602-1.196-3.112-1.196a4.54 4.54 0 0 0-1.85.392 4.595 4.595 0 0 0-1.566 1.13c-.45.494-.812 1.104-1.088 1.828-.278.728-.414 1.554-.414 2.482v13.362h-4.962v-22.502zM822.241 444.066c0 3.396-.95 5.928-2.85 7.596-1.9 1.67-4.636 2.502-8.204 2.502-1.134 0-2.272-.116-3.418-.346a10.209 10.209 0 0 1-3.134-1.176 7.541 7.541 0 0 1-2.37-2.178c-.64-.9-1.018-2-1.134-3.308h4.962c.146.698.392 1.262.742 1.7.346.434.76.776 1.24 1.02a4.658 4.658 0 0 0 1.586.48c.582.072 1.192.108 1.83.108 2.002 0 3.468-.492 4.396-1.48.928-.984 1.392-2.408 1.392-4.266v-3.436h-.086c-.696 1.246-1.646 2.22-2.852 2.916a7.647 7.647 0 0 1-3.896 1.044c-1.798 0-3.328-.312-4.59-.936a8.733 8.733 0 0 1-3.134-2.568c-.828-1.088-1.43-2.344-1.808-3.764-.376-1.422-.566-2.946-.566-4.57 0-1.508.234-2.946.698-4.31s1.132-2.56 2.002-3.592a9.628 9.628 0 0 1 3.2-2.46c1.262-.608 2.69-.912 4.286-.912 1.422 0 2.728.298 3.918.892 1.19.596 2.102 1.53 2.742 2.808h.086v-3.09h4.962v21.326zm-11.012-2.742c1.104 0 2.038-.224 2.808-.674a5.532 5.532 0 0 0 1.872-1.784 7.844 7.844 0 0 0 1.044-2.524c.218-.942.326-1.894.326-2.852s-.116-1.886-.346-2.786c-.234-.9-.588-1.698-1.068-2.394a5.142 5.142 0 0 0-1.872-1.654c-.768-.404-1.69-.608-2.764-.608-1.104 0-2.032.23-2.786.694a5.575 5.575 0 0 0-1.826 1.808 7.74 7.74 0 0 0-1.002 2.524 13.25 13.25 0 0 0-.306 2.808c0 .93.118 1.834.35 2.72.23.886.588 1.676 1.066 2.374a5.669 5.669 0 0 0 1.828 1.696c.74.436 1.632.652 2.676.652"/><path fill="#D32F2F" d="M1077.133 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H910.467a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M988.12 632.686c.758 0 .758 0 0 0 .758-3.03 1.516-4.544 1.516-6.816v-1.514c.756-3.786.756-6.816 0-7.572v-.758l-.758-.758s0 .758-.758.758c-1.514 4.544-1.514 9.844 0 16.66m-22.716 52.25c-1.516.756-3.03 1.514-3.786 2.27-5.302 4.544-9.088 9.846-9.844 12.118 4.542-.758 9.086-5.302 13.63-14.388.756 0 .756 0 0 0 .756 0 0 0 0 0m69.666-11.36c-.756-.756-3.786-3.028-14.388-3.028h-1.514v.758c5.3 2.27 10.602 3.786 14.388 3.786H1035.828v-.758s-.758 0-.758-.758m3.03 6.058c-1.516.758-3.786 1.516-6.816 1.516-6.058 0-15.146-1.516-22.718-5.302-12.872 1.514-22.716 3.03-30.29 6.058-.756 0-.756 0-1.514.758-9.086 15.902-16.66 23.474-22.718 23.474-1.514 0-2.27 0-3.028-.756l-3.786-2.272v-.758c-.758-1.514-.758-2.272-.758-3.786.758-3.786 5.302-10.602 14.388-15.902 1.514-.758 3.786-2.272 6.816-3.786 2.27-3.786 4.542-8.33 7.572-13.63 3.786-7.574 6.058-15.146 8.328-21.96-3.028-9.088-4.542-14.388-1.512-24.99.756-3.03 3.028-6.058 6.056-6.058h1.516c1.514 0 3.028.758 4.542 1.514 5.302 5.302 3.03 17.416 0 27.26v.758c3.03 8.33 7.574 15.146 12.116 19.688 2.272 1.516 3.786 3.03 6.816 4.544 3.786 0 6.816-.756 9.844-.756 9.088 0 15.146 1.514 17.416 5.3.758 1.514.758 3.028.758 4.544-.758.756-1.514 3.028-3.028 4.542m-49.222-29.532c-1.514 5.3-4.544 11.358-7.572 18.174-1.514 3.03-3.03 5.3-4.544 8.33h1.514c9.844-3.786 18.932-6.058 24.99-6.816-1.514-.756-2.272-1.514-3.03-2.272-3.786-4.542-8.328-10.6-11.358-17.416"/><path fill="#5465FC" d="M174.995 604.64v142.084c0 4.624-3.75 8.332-8.334 8.332H8.329a8.304 8.304 0 0 1-8.334-8.332V563.39c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M48.744 623.328c4.224-.768 10.081-1.344 18.047-1.344 8.641 0 14.977 1.824 19.107 5.28 3.84 3.168 6.336 8.256 6.336 14.305 0 6.144-1.92 11.231-5.57 14.687-4.704 4.704-12.096 6.914-20.447 6.914-2.21 0-4.224-.096-5.762-.386v24.387H48.744v-63.843zm11.712 30.144c1.44.384 3.362.48 5.762.48 8.832 0 14.207-4.32 14.207-11.903 0-7.202-4.992-11.041-13.153-11.041-3.264 0-5.568.288-6.816.576v21.888zM99.333 676.32c2.69 1.632 7.777 3.362 12.001 3.362 5.184 0 7.488-2.114 7.488-5.186 0-3.168-1.92-4.8-7.68-6.816-9.119-3.168-12.959-8.159-12.863-13.633 0-8.255 6.816-14.687 17.663-14.687 5.184 0 9.696 1.344 12.385 2.784l-2.304 8.352c-2.016-1.152-5.762-2.688-9.89-2.688-4.224 0-6.527 2.016-6.527 4.896 0 2.978 2.208 4.416 8.159 6.53 8.448 3.072 12.385 7.392 12.481 14.303 0 8.45-6.623 14.593-19.009 14.593-5.664 0-10.753-1.346-14.207-3.266l2.303-8.544z"/><path fill="#F57C00" d="M391.017 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H224.351a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M282.542 669.841l-5.568 18.337H264.78l20.739-64.707h15.073l21.023 64.707h-12.671l-5.856-18.337h-20.546zm18.529-8.928l-5.088-15.937c-1.248-3.936-2.304-8.354-3.264-12.097h-.192c-.96 3.744-1.92 8.258-3.074 12.097l-4.992 15.937h16.61zM342.252 628.367c0 3.552-2.592 6.336-6.72 6.336-3.938 0-6.53-2.784-6.53-6.336 0-3.648 2.69-6.434 6.624-6.434 4.034.001 6.53 2.787 6.626 6.434m-12.577 13.058h11.905v46.754h-11.905v-46.754z"/><path fill="#C11187" d="M864.383 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H697.717a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M742.708 623.902h11.807v64.707h-11.807zM810.674 620.447v55.011c0 4.798.194 9.983.386 13.151h-10.561l-.48-7.392h-.192c-2.784 5.182-8.448 8.448-15.263 8.448-11.137 0-19.971-9.505-19.971-23.905-.096-15.649 9.698-24.961 20.931-24.961 6.432 0 11.042 2.688 13.151 6.144h.192v-26.497h11.807zm-11.807 40.898c0-.96-.096-2.114-.288-3.074-1.056-4.608-4.8-8.351-10.176-8.351-7.584 0-11.809 6.719-11.809 15.457 0 8.544 4.226 14.783 11.714 14.783 4.8 0 9.023-3.264 10.177-8.352.286-1.056.382-2.208.382-3.456v-7.007z"/><path fill="#F57C00" d="M643.042 604.639v142.084c0 4.624-3.75 8.332-8.334 8.332H476.376a8.304 8.304 0 0 1-8.334-8.332V563.389c0-4.584 3.708-8.334 8.334-8.334H593.5l49.542 49.584z"/><path fill="#F57C00" d="M544.74 619.963h21.999v21.999H544.74z"/><path fill="#FFF" d="M602.54 648.461v-5.5h-23.791c7.5 5.298 14.101 13.349 19.571 24.041 7.678 15.011 10.454 29.8 10.566 30.422l-7.866 1.448c-.09-.484-8.178-42.534-33.412-53.021v4.978h-23.735v-4.978c-25.237 10.49-33.324 52.537-33.412 53.021l-7.867-1.448c.114-.622 2.888-15.411 10.568-30.422 5.47-10.691 12.071-18.743 19.571-24.041h-24.187v5.5h-18.999v-18.999h18.999v5.5h35.328v-7.867h23.735v7.867h34.932v-5.5h18.999v18.999h-19zm-39.8-16.499h-13.999v13.999h13.999v-13.999z"/><path fill="#C11187" d="M1077.133 862.665v142.084c0 4.624-3.75 8.332-8.334 8.332H910.467a8.304 8.304 0 0 1-8.334-8.332V821.415c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M977.923 945.445l-6.76-12.408c-2.686-4.816-4.444-8.15-6.204-11.76h-.278c-1.482 3.61-3.148 6.944-5.648 11.76l-6.206 12.408h-13.056l18.52-31.576-17.78-30.836h13.056l6.762 12.872c2.036 3.888 3.518 6.944 5.186 10.464h.184c1.668-3.89 2.964-6.668 4.908-10.464l6.666-12.872h13.056l-18.24 30.466 18.982 31.946h-13.148zM1039.125 879.699v53.06c0 4.628.186 9.63.37 12.686h-10.186l-.462-7.13h-.184c-2.688 4.998-8.15 8.148-14.724 8.148-10.742 0-19.262-9.168-19.262-23.056-.092-15.094 9.352-24.078 20.188-24.078 6.204 0 10.65 2.594 12.686 5.928h.184v-25.558h11.39zm-11.389 39.448c0-.926-.092-2.038-.276-2.964-1.02-4.444-4.632-8.056-9.818-8.056-7.314 0-11.388 6.482-11.388 14.908 0 8.242 4.074 14.26 11.296 14.26 4.63 0 8.706-3.148 9.816-8.054.278-1.02.37-2.132.37-3.336v-6.758z"/></g><path fill="#A0F" d="M391.022 862.667v142.084c0 4.624-3.75 8.332-8.334 8.332H224.356a8.304 8.304 0 0 1-8.334-8.332V821.417c0-4.584 3.708-8.334 8.334-8.334H341.48l49.542 49.584z"/><path fill="#FFF" d="M345.01 874.919h-80.848l-14.14 31.298 54.564 62.868 54.562-62.868-14.138-31.298zm-3.72 6.926l8.282 20.65h-14.884l6.602-20.65zm-7.058-.33l-6.042 19.378-15.102-19.378h21.144zm-14.072 20.98h-31.15l15.576-19.814 15.574 19.814zm-24.078-20.98l-15.1 19.378-6.044-19.378h21.144zm-28.202.33l6.602 20.65h-14.884l8.282-20.65zm-6.633 27.244h16.126l16.454 37.538-32.58-37.538zm23.327 0H324.596l-20.01 45.652-20.012-45.652zm30.768 37.54l16.454-37.538h16.126l-32.58 37.538z"/><path fill="#D32F2F" d="M642.526 862.665v142.084c0 4.634-3.724 8.332-8.282 8.332H476.848c-4.608 0-8.28-3.698-8.28-8.332V821.415c0-4.584 3.698-8.334 8.28-8.334h116.408l49.27 49.584z"/><path fill="#FFF" d="M605.012 887.703c.579.149 1.173.25 1.734.453 1.728.628 2.294 2.07 2.253 3.887-.056 2.523-.229 5.022-.935 7.483-1.308 4.549-4.119 7.567-8.195 9.358-2.871 1.261-5.893 1.72-8.935 2.076-2.098.243-4.193.535-6.287.821-.28.038-.561.149-.823.272-1.119.519-1.41 1.537-.582 2.444a21.79 21.79 0 0 0 2.803 2.557c3.754 2.883 7.615 5.62 11.301 8.595 4.167 3.362 7.818 7.291 10.595 12.06 2.726 4.684 4.108 9.789 3.925 15.378-.048 1.475-.722 2.326-2.111 2.396-2.159.107-4.32.123-6.479.143-2.682.024-5.362.014-8.044.02-2.732.004-5.466.002-8.201.012-1.952.006-3.905.032-5.857.034a18.846 18.846 0 0 1-1.714-.072c-2.436-.213-3.34-1.159-3.585-3.744-.35-3.664-.907-7.263-2.306-10.649-2.35-5.696-6.167-9.981-11.098-13.207-4.259-2.785-8.891-4.531-13.923-4.972-4.961-.436-9.579.553-13.287 4.575-2.241 2.43-3.477 5.428-4.342 8.621-.392 1.445-.734 2.905-1.165 4.336-.491 1.626-1.811 1.96-3.147 2.006-2.916.099-5.831.099-8.746.125-2.682.024-5.362.028-8.044.042-2.473.014-4.947.052-7.418.03-.646-.006-1.294-.153-1.924-.308-.935-.227-1.314-.779-1.261-1.781.328-6.092 2.74-11.054 7.364-14.82 3.811-3.102 8.145-5.034 12.694-6.352 4.315-1.251 8.696-2.227 13.042-3.356 1.219-.316 2.443-.656 3.614-1.135 1.873-.766 2.179-2.022.7-3.4-1.419-1.326-3.006-2.479-4.623-3.529-4.352-2.825-8.839-5.428-12.798-8.873-4.062-3.535-7.462-7.615-9.315-12.969-.974-2.817-1.38-5.744-1.374-8.754 0-1.155.557-2.05 1.783-2.34a21.873 21.873 0 0 1 4.406-.573c3.332-.09 6.664-.052 9.996-.058 2.682-.004 5.364.01 8.044.008 1.98 0 3.958-.02 5.938-.016.909.002 1.819.046 2.73.066 1.533.034 2.197.543 2.491 2.141.348 1.889.584 3.803.885 5.704 1.078 6.815 3.632 12.766 8.76 17.178 3.527 3.036 7.639 4.449 12.194 4.646 2.382.102 4.744.068 7.046-.751 3.547-1.261 5.269-4.096 4.937-8.018-.151-1.813-.272-3.63-.382-5.446-.074-1.235.312-1.982 1.469-2.207 1.451-.284 2.946-.38 4.418-.403 2.942-.042 5.883.03 8.825.044 2.68.01 5.362-.01 8.042.012 1.638.012 3.273.074 4.911.114-.001.032.001.064.001.096"/><path fill="#D32F2F" d="M864.388 862.665v142.084c0 4.624-3.75 8.332-8.334 8.332H697.722a8.304 8.304 0 0 1-8.334-8.332V821.415c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><g fill="#FFF"><path d="M787.004 992.755s-.022-23.724 0-30.064c0-.318-.008-.636 0-.952.07-3.12 1.69-4.742 4.84-4.752 6.614-.02 13.226 0 19.84 0 5.562 0 8.37-2.794 8.372-8.35.002-22.692-.008-45.384.008-68.078.002-3.048-1.018-5.546-3.796-6.986-1.046-.542-2.326-.878-3.502-.88a23363.06 23363.06 0 0 0-72.018-.05c-3.896.002-6.908 3.018-7.108 6.962-.046.904-.01 1.812-.01 2.718v66.582c0 5.096 3.012 8.082 8.12 8.08 11.776-.006 35.328-.002 35.328-.002v9.812s-23.946-.008-36.04.008c-2.722.002-5.344-.46-7.734-1.76-5.898-3.212-9.34-8.042-9.346-14.932-.024-23.372.092-46.744-.07-70.114-.05-7.154 5.04-15.584 14.712-17.022a18.82 18.82 0 0 1 2.704-.2c23.916-.024 47.83-.042 71.746-.05 9-.004 16.8 7.706 16.812 16.718.034 23.462.034 46.924.006 70.388-.012 9.346-7.282 17.056-16.64 17.254-4.708.098-9.422.056-14.13.014-1.088-.01-2.122 1.36-2.122 1.36l-9.972 24.296z"/><path d="M760.643 902.342v2.236c.002 11.594.006 23.186.006 34.778 0 1.808-.004 1.814-1.772 1.814-3.432.004-6.864.002-10.436.002-.036-.67-.09-1.194-.09-1.716-.004-16.03.014-32.062-.03-48.092-.004-1.318.376-1.672 1.672-1.656 5.432.068 10.868.076 16.302-.008 1.324-.02 1.76.446 2.066 1.66 2.618 10.354 5.304 20.69 7.972 31.032.12.466.272.922.734 1.436.158-.416.358-.824.47-1.252 2.75-10.552 5.506-21.1 8.212-31.664.244-.948.66-1.198 1.582-1.194 5.616.016 11.23.01 16.844-.068 1.212-.016 1.53.366 1.528 1.544-.034 16.168-.034 32.334.002 48.5.004 1.182-.31 1.582-1.52 1.548-3.214-.092-6.43-.056-9.644-.082-.398-.004-.792-.07-1.36-.124v-38.544l-.38-.072c-.148.432-.32.86-.442 1.3-3.336 12.034-6.678 24.068-9.978 36.114-.276 1.008-.706 1.394-1.766 1.36-2.398-.074-4.802-.08-7.2-.002-1.094.036-1.586-.296-1.884-1.388-3.3-12.09-6.654-24.168-9.996-36.246-.116-.42-.266-.832-.4-1.248-.164.012-.328.022-.492.032"/></g><path fill="#A0F" d="M175 862.666v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 1004.75V821.416c0-4.584 3.708-8.334 8.334-8.334h117.124L175 862.666z"/><path fill="#FFF" d="M40.443 883.832c4.416-.768 11.04-1.344 17.856-1.344 9.314 0 15.65 1.536 19.972 5.184 3.55 2.976 5.568 7.488 5.568 12.962 0 8.352-5.666 14.016-11.714 16.224v.29c4.608 1.726 7.394 6.238 9.024 12.48 2.018 8.064 3.744 15.554 5.09 18.05H74.045c-.96-1.92-2.496-7.202-4.32-15.266-1.824-8.45-4.896-11.136-11.616-11.328h-5.954v26.594H40.443v-63.846zm11.712 28.61h7.01c7.968 0 12.96-4.224 12.96-10.656 0-7.104-4.992-10.37-12.674-10.37-3.744 0-6.144.288-7.296.576v20.45zM95.066 883.832c4.224-.768 10.08-1.344 18.048-1.344 8.642 0 14.978 1.824 19.108 5.28 3.84 3.168 6.336 8.256 6.336 14.306 0 6.144-1.92 11.232-5.57 14.688-4.704 4.704-12.096 6.914-20.448 6.914-2.21 0-4.224-.096-5.762-.386v24.388H95.066v-63.846zm11.712 30.146c1.442.384 3.362.48 5.762.48 8.832 0 14.208-4.32 14.208-11.904 0-7.202-4.992-11.042-13.154-11.042-3.264 0-5.568.288-6.816.576v21.89z"/><path fill="#7757BC" d="M175 1120.691v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 1262.775v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124L175 1120.691z"/><path fill="#FFF" d="M54.168 1184.254l-5.408 17.81H36.918l20.142-62.846H71.7l20.42 62.846H79.81l-5.686-17.81H54.168zm17.996-8.67l-4.942-15.48c-1.212-3.822-2.238-8.112-3.17-11.748h-.186c-.932 3.636-1.866 8.02-2.984 11.748l-4.85 15.48h16.132zM107.312 1182.576c.28 8.206 6.714 11.75 13.986 11.75 5.316 0 9.14-.746 12.588-2.052l1.678 7.926c-3.914 1.586-9.322 2.798-15.85 2.798-14.732 0-23.404-9.046-23.404-22.94 0-12.586 7.646-24.428 22.192-24.428 14.732 0 19.58 12.122 19.58 22.098 0 2.146-.186 3.824-.372 4.848h-30.398zm19.954-8.018c.096-4.196-1.772-11.096-9.416-11.096-7.086 0-10.07 6.434-10.538 11.096h19.954z"/><path fill="#009497" d="M391.022 1120.693v142.084c0 4.624-3.75 8.332-8.334 8.332H224.356a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334H341.48l49.542 49.584z"/><path fill="#FFF" d="M303.522 1121.711l32.85 40.88v57.67h21.9v-69.35zM248.772 1220.261h21.9v-57.67l32.85-40.88-54.75 29.2z"/><path fill="#FFF" d="M303.522 1217.341l22.63-24.554-22.63-71.076-23.36 71.076z"/><path fill="#D32F2F" d="M175 1378.718v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 1520.802v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124L175 1378.718z"/><path fill="#FFF" d="M108.639 1453.024h-42.28v-42.278h42.28v42.278zm8-50.278h-58.28v58.278h58.28v-58.278z"/><path fill="#FFF" d="M79.925 1424.31h15.15v15.15h-15.15zM82.571 1375.394h9.856v29.25h-9.856zM82.571 1458.976h9.856v29.4h-9.856zM113.833 1426.956h30.158v9.856h-30.158zM31.009 1426.956h29.492v9.856H31.009z"/><path fill="#03A9F4" d="M864.388 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332H697.722a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M776.888 1485.525l-49.5-27.692v-54.016l49.5-23.076 49.5 23.076v54.016l-49.5 27.692zm-40.5-32.97l40.5 22.658 40.5-22.658v-43.004l-40.5-18.88-40.5 18.88v43.004z"/><path fill="#FFF" d="M776.867 1436.507l-47.177-26.392 4.394-7.856 42.825 23.958 42.815-23.478 4.328 7.892z"/><path fill="#FFF" d="M776.888 1484.87a4.502 4.502 0 0 1-4.5-4.5v-49.008c0-2.484 2.016-4.5 4.5-4.5s4.5 2.016 4.5 4.5v49.008c0 2.484-2.016 4.5-4.5 4.5"/><path fill="#546E7A" d="M631.656 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332H464.99a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M600.679 1436.932c-.66-7.46-2.24-13.22-5-18.12-2.88-5.12-6.56-8.7-11.22-11-4.46-2.18-9.44-3.54-16.18-4.4-6.22-.8-12.78-1.02-20.98-.66-3.18.14-6.9.34-10.48.92-3.74.58-6.44 1.26-8.8 2.22-5 2.06-8.96 5.96-12.12 11.96-1.84 3.48-2.92 7.62-3.32 12.64-.58 7.4-.22 12.98 1.14 18.1.76 2.82 1.86 5.02 3.36 6.72 3.62 4.08 8.42 6.76 15.54 8.7 2.48.68 5.06 1.04 7.28 1.3 6.22.76 11.32.46 16.12-.96 5.34-1.58 10.2-3.9 14.48-6.92 2.18-1.54 4.24-3.42 6.12-5.22.62-.6.74-.76-.04-1.78-2.24-2.94-5.3-5.4-9.34-7.58-2.72-1.44-5.42-2.08-8.36-1.94-4.04.18-7.8.24-11.52.14-2.64-.06-5.18-.12-7.52-.9-3.14-1.04-6.12-2.64-8.98-4.2-1.84-.98-3.28-2.24-4.48-3.36-.48-.44-1.1-1.14-1.06-2.04.04-.92.74-1.58 1.34-2.04 1.06-.82 2.16-1.58 3.26-2.3l1.94-1.28c2.44-1.58 4.94-3.2 7.5-4.72l.66-.38c2.14-1.28 4.36-2.6 6.78-3.34 3.52-1.08 7.18-1.22 9.98-1.22.7 0 1.38 0 2.08.02 4.78.1 9.08.9 13.1 2.44 3.44 1.32 6.36 3.18 8.68 5.52 4.54 4.56 7.1 10.58 7.8 18.46.5 5.4.26 10.76-.7 15.88-.4 2.12-1.14 4.22-1.88 6.2-1.08 2.94-3.36 4.9-5.42 6.52-1.54 1.22-3.04 2.08-4.48 2.6-2.94 1.04-5.6 1.76-8.16 2.24l-.66.12c-4.16.78-8.46 1.58-12.76 1.88-4.16.26-8.6.38-14.34.38-1.44 0-2.86 0-4.3-.02-7.74-.06-13.9-1.06-19.36-3.16-3.74-1.42-6.76-3.68-9.02-6.72-2.62-3.54-4.36-7.84-5.16-12.8-1.16-7.24-1.84-12.82-2.24-18.1-.62-8.08.14-15.64 2.28-22.44.74-2.4 1.86-4.8 3.3-7.12 1.68-2.68 4.08-4.98 7.18-6.82 3.38-2.02 7.22-3.32 12.44-4.2 1.5-.26 3.02-.44 4.54-.62.92-.12 1.84-.22 2.76-.36 1.84-.24 3.68-.52 5.52-.78 3.3-.48 6.6-.96 9.9-1.38 5.14-.64 10.2-.72 14.04-.72 2.2 0 4.4.02 6.62.06l1.04.02c3.28.04 6.6.2 9.82.34 1.58.08 3.18.16 4.76.22h.4c0-.08 0-.18-.02-.32l-.76-6.14-.96-7.92-.16-.16c-.34 0-.66.06-.98.1-1.36.24-2.74.48-4.1.72-2.92.5-5.92 1.04-8.92 1.44-7.28.96-13.34 1.74-19.7 2.28l-3.96.32c-7.5.58-15.26 1.2-22.72 2.74-2.62.54-5.66 1.2-8.58 2.12-2.94.92-5.8 2.1-8.22 3.14-2.96 1.28-5.52 3.1-7.62 5.42-3.94 4.36-6.66 9.78-8.58 17.06-1.36 5.22-2.02 10.96-2.12 18.58-.08 8.3.94 16.68 3.14 25.58 1.82 7.34 4.02 13.02 6.92 17.94 2.08 3.5 4.48 6.08 7.32 7.88 3.72 2.38 7.02 3.8 10.38 4.5l2.3.5c2.96.64 6.02 1.32 9.02 1.6 4.24.38 8.58.56 12.78.72l4.4.18.02-.3h.96c1.2 0 2.4.02 3.6.04 2.6.02 5.2.06 7.8-.08 7.2-.4 14.8-1.02 21.92-3.64 2.36-.88 4.84-1.88 6.86-3.3 2.58-1.84 4.98-4.08 7.3-6.24l.56-.54c4.8-4.48 7.56-10.12 8.16-16.72.719-7.88.74-15.78.08-23.5m-55.48 20.6c.04-.44.1-.88.2-1.3.58-2.4 1.16-4.82 1.8-7.2.2-.76.54-2.04 1.98-2.04.3 0 .62.06 1.16.18 4.3 1.06 8.62 2.12 12.94 3.22.36.08.68.24.96.38l.96.44-.14 1.7-5.04 1.8c-3.94 1.38-7.86 2.74-11.8 4.1-.48.16-.96.22-1.4.28l-.52.06-1.32.22.22-1.84z"/><path fill="#FFF" d="M554.611 1419.891c-.42 1.08-.86 2.16-1.28 3.24-.62 1.54-1.24 3.1-1.84 4.66-.08.2-.1.22-.7.32-.06.02-.14.04-.22.04l-1.84-.38c-1.64-.34-3.26-.68-4.88-1.08-1.04-.24-2.06-.58-3.02-.92.76-.3 1.52-.6 2.28-.92 1.6-.64 3.18-1.28 4.78-1.96 1.34-.58 2.68-1.18 4.02-1.8.88-.4 1.76-.8 2.7-1.2"/><path fill="#009497" d="M391.022 1378.717v142.084c0 4.624-3.75 8.332-8.334 8.332H224.356a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334H341.48l49.542 49.584z"/><path fill="#FFF" d="M350.064 1479.676h-93.086v-93.086h93.086v93.086zm-89.085-4h85.086v-85.086h-85.086v85.086z"/><path fill="#FFF" d="M298.161 1388.59h49.904v49.904h-49.904z"/><path fill="#62BB37" d="M619.044 1672.263v142.935c0 4.661-3.746 8.382-8.332 8.382H452.374c-4.635 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.565 49.881z"/><path fill="#FFF" d="M504.394 1750.489c0 2.76 1.793 4.609 4.523 4.609h4.523v16.094c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.784-3.201 6.784-6.901v-16.094h9.074v16.094c0 3.67 3.173 6.901 6.785 6.901s6.785-3.201 6.785-6.901v-16.094h4.523c2.731 0 4.521-1.849 4.521-4.609v-45.99h-54.299v45.99zm-11.336-45.99c-3.641 0-6.784 3.201-6.784 6.901v32.188c0 3.67 3.173 6.901 6.784 6.901 3.612 0 6.785-3.201 6.785-6.901V1711.4c0-3.67-3.173-6.901-6.785-6.901m76.971 0c-3.611 0-6.783 3.201-6.783 6.901v32.188c0 3.67 3.171 6.901 6.783 6.901 3.613 0 6.785-3.201 6.785-6.901V1711.4c.029-3.67-3.143-6.901-6.785-6.901m-22.613-26.665l5.903-5.961c.911-.911.911-2.32 0-3.201-.91-.911-2.232-.911-3.171 0l-6.784 6.901c-3.171-2.292-7.253-3.201-11.776-3.201s-8.575.909-12.245 2.761l-6.344-6.931c-.881-.441-2.732-.441-3.614 0-.441.911-.441 2.76 0 3.672l5.903 5.961c-6.344 5.05-10.865 12.863-10.865 22.053h54.299c.002-9.163-4.55-17.444-11.306-22.054m-24.902 12.891h-4.523v-4.611h4.523v4.611zm22.613 0h-4.523v-4.611h4.523v4.611z"/><path fill="#ACACAC" d="M1326.192 1927.591v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#F6F4F4" d="M1194.661 1945.888h88.062v12.848h-88.062zM1194.661 1975.75h88.062v12.848h-88.062zM1194.661 2005.612h61.644v12.846h-61.644z"/><path fill="#03A9F4" d="M1091.169 1927.86v141.33c0 4.598-3.717 8.29-8.243 8.29H926.411c-4.573 0-8.242-3.693-8.242-8.29v-182.366c0-4.548 3.669-8.29 8.242-8.29h115.773l48.985 49.326z"/><path fill="#FFF" d="M1056.988 1980.086c-.135 6.281-2.731 12.037-6.867 16.172-4.146 4.134-9.756 6.671-15.977 6.671h-11.048a34.074 34.074 0 0 0 5.939-9.161h5.11c7.404 0 13.513-6.098 13.685-13.818.159-7.513-5.953-13.439-13.685-13.671h-21.634c-3.049 0-5.891 1.036-8.209 2.793a13.78 13.78 0 0 0-3.292 3.536 14.142 14.142 0 0 0-2.318 7.476l-9.159-.135c.014-.817.074-1.634.183-2.427.817-6.462 4.281-12.145 9.245-15.866 3.806-2.854 8.501-4.548 13.55-4.548h21.634c12.477.269 23.11 10.269 22.843 22.978"/><path fill="#FFF" d="M952.35 1979.952c.135-6.281 2.731-12.036 6.866-16.172 4.146-4.134 9.756-6.671 15.977-6.671h11.048a34.074 34.074 0 0 0-5.939 9.161h-5.11c-7.404 0-13.513 6.098-13.685 13.818-.159 7.513 5.953 13.439 13.685 13.671h21.634c3.049 0 5.89-1.036 8.209-2.793a13.748 13.748 0 0 0 3.292-3.536 14.142 14.142 0 0 0 2.318-7.476l9.159.135a20.059 20.059 0 0 1-.183 2.427c-.817 6.462-4.281 12.145-9.245 15.866-3.806 2.854-8.501 4.548-13.55 4.548h-21.634c-12.476-.269-23.11-10.269-22.842-22.978"/><path fill="#7757BC" d="M631.831 1927.791v142.084c0 4.634-3.754 8.332-8.349 8.332H464.826c-4.645 0-8.346-3.698-8.346-8.332v-183.334c0-4.584 3.727-8.334 8.346-8.334h117.341l49.664 49.584z"/><path fill="#FFF" d="M572.632 1973.395v-17.866c0-3.066-2.28-5.109-5.71-5.109h-68.351c-3.405 0-5.71 2.042-5.71 5.109v51.006c0 3.066 2.278 5.108 5.71 5.108h68.377c3.405 0 5.71-2.042 5.71-5.108v-17.84l22.792 20.408v-56.114l-22.818 20.406z"/><path fill="#FF5722" d="M175 1927.592v142.084c0 4.624-3.75 8.332-8.334 8.332H8.334A8.304 8.304 0 0 1 0 2069.676v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124L175 1927.592z"/><path fill="#FFF" d="M55.949 1983.244l24.53 27.062 33.551-46.552 38.613 62.062H26.356zM78.125 1952.336c0 8.444-6.844 15.288-15.288 15.288-8.442 0-15.288-6.844-15.288-15.288 0-8.444 6.846-15.288 15.288-15.288 8.443 0 15.288 6.844 15.288 15.288"/><path fill="#FDCA07" d="M852.145 1928.278v142.084c0 4.624-3.75 8.332-8.334 8.332H685.479a8.304 8.304 0 0 1-8.334-8.332v-183.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M752.382 1877.32h12.262v12.262h-12.262zM752.382 1901.846h12.262v12.262h-12.262zM752.382 1925.366h12.262v12.262h-12.262zM752.382 1949.594h12.262v27.04h-12.262zM764.646 1889.584h12.262v12.262h-12.262zM764.646 1914.108h12.262v12.262h-12.262zM764.646 1937.542h12.262v12.262h-12.262z"/><path fill="#FFF" d="M758.514 1964.372h18.394v12.262h-18.394zM779.379 2021.067l-4.324-33.834-21.932-.198-3.466 34.032c-.484 3.656 1.572 6.864 6.52 6.864h16.682c4.736 0 7.035-3.328 6.52-6.864zm-7.153-.325h-15.414v-6.292h15.414v6.292z"/><path fill="#FFED18" d="M1563.467 1921.911h-78.974l-17.276-17.5h-61.24a8.76 8.76 0 0 0-8.76 8.76v129.683c0 4.812 3.938 8.75 8.75 8.75h157.5c4.812 0 8.75-3.938 8.75-8.75v-112.193c0-4.813-3.938-8.75-8.75-8.75"/><path fill="#FDCA07" d="M1572.217 2042.852c0 4.812-3.938 8.75-8.75 8.75h-157.5c-4.812 0-8.75-3.938-8.75-8.75v-93.984c0-4.812 3.938-8.75 8.75-8.75h157.5c4.812 0 8.75 3.938 8.75 8.75v93.984z"/><g font-family="'MicrosoftYaHei'" font-size="40"><text transform="translate(-166.029 354.197)">M</text><text transform="translate(-126.949 354.197)">A</text><text transform="translate(-99.349 354.197)">C</text></g><text transform="translate(-151.149 103.49)" font-family="'MicrosoftYaHei'" font-size="40">WIN</text><text transform="translate(-274.95 632.054)" font-family="'MicrosoftYaHei'" font-size="40">图形／印刷</text><text transform="translate(-354.95 922.573)" font-family="'MicrosoftYaHei'" font-size="40">产品／思维导图</text><text transform="translate(-274.95 1180.598)" font-family="'MicrosoftYaHei'" font-size="40">影视／广告</text><text transform="translate(-154.95 1714.652)" font-family="'MicrosoftYaHei'" font-size="40">代码</text><text transform="translate(-154.95 2011.682)" font-family="'MicrosoftYaHei'" font-size="40">通用</text><text transform="translate(-274.95 1406.132)" font-family="'MicrosoftYaHei'" font-size="40">工业／建筑</text><path fill="#FF40B6" d="M391.022 1927.291v142.935c0 4.662-3.746 8.382-8.332 8.382H224.351c-4.636 0-8.329-3.72-8.329-8.382v-184.432c0-4.611 3.72-8.384 8.329-8.384h117.105l49.566 49.881z"/><path fill="#FFF" d="M274.483 1937.936a2.611 2.611 0 0 0-2.62 2.62v67.198a15.834 15.834 0 0 0-7.911-2.097c-8.724 0-15.772 7.046-15.772 15.744s7.048 15.746 15.772 15.746 15.77-7.048 15.77-15.746c0-.627-.026-1.283-.105-1.859.079-.235.105-.497.105-.761v-55.277l55.251-9.744v38.247a15.854 15.854 0 0 0-7.911-2.096c-8.724 0-15.772 7.048-15.772 15.746s7.048 15.744 15.772 15.744 15.77-7.046 15.77-15.744c0-.63-.027-1.283-.105-1.861a2.43 2.43 0 0 0 .105-.758v-73.512c0-1.284 0-2.881-2.173-2.567-.446.052-66.176 10.977-66.176 10.977"/><path fill="#29D3B2" d="M175 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333H8.333A8.304 8.304 0 0 1 0 1814.648v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125L175 1672.565z"/><g fill="#FFF"><path d="M66.458 1683.137h1.562v7.812h-1.562c-5.836-.205-8.545 1.772-8.125 5.938v16.562c0 4.17-1.67 7.397-5 9.688 3.33 2.295 5 5.522 5 9.688v16.562c-.42 3.955 2.289 5.83 8.125 5.625h1.562v7.812h-1.562c-11.875.415-17.607-3.75-17.188-12.5v-16.875c.205-4.165-2.188-6.25-7.188-6.25h-.938v-7.812h.938c5 0 7.393-2.08 7.188-6.25v-16.562c-.419-9.376 5.313-13.853 17.188-13.438zM106.667 1683.137h1.562c11.875-.415 17.602 4.062 17.188 13.438v16.562c0 4.17 2.393 6.25 7.187 6.25h1.25v7.812h-1.25c-4.795 0-7.187 2.085-7.187 6.25v16.875c.414 8.54-5.312 12.705-17.188 12.5h-1.562v-7.812h1.562c5.83.205 8.539-1.67 8.125-5.625v-16.562c0-4.165 1.664-7.393 5-9.688-3.336-2.29-5-5.518-5-9.688v-16.562c.414-4.165-2.295-6.143-8.125-5.938h-1.562v-7.812z"/></g><path fill="#29D3B2" d="M391.022 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333H224.355a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333H341.48l49.542 49.583z"/><ellipse fill="#FFF" cx="303.522" cy="1687.044" rx="42.548" ry="12.063"/><path fill="#FFF" d="M303.522 1723.114c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.887 12.899 43.5 12.899z"/><path fill="#FFF" d="M303.522 1747.048c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676s6.887 12.899 43.5 12.899z"/><path fill="#FFF" d="M303.522 1770.981c36.612 0 43.5-12.899 43.5-12.899v-17.676s-5.167 12.11-43.5 12.11-43.5-12.11-43.5-12.11v17.676c0 .001 6.887 12.899 43.5 12.899z"/><path fill="#03A9F4" d="M852.144 1672.565v142.083c0 4.625-3.75 8.333-8.333 8.333H685.478a8.304 8.304 0 0 1-8.333-8.333v-183.333c0-4.583 3.708-8.333 8.333-8.333h117.125l49.541 49.583z"/><path fill="#FFF" d="M739.347 1725.822c.344 20.488 16.447 28.926 31.6 28.926 12.601 0 20-2.805 26.25-6.055l2.582 10.848c-5.332 3.402-11.332 6.916-29.916 6.916-29.999 0-44.978-18.43-44.978-42.014 0-25.137 18.807-44.938 43.084-44.938 27.205 0 36.438 23.932 36.438 39.256 0 3.1-.346 5.51-.518 7.061h-64.542zm50.421-10.847c.174-9.643-5.959-24.621-23.006-24.621-15.324 0-26.039 14.117-27.244 24.621h50.25z"/><path fill="#3F7AD9" d="M175 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#D46B1C" d="M631.656 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#58A138" d="M409.667 49.388l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.194"/><path fill="#2FB69A" d="M852.145 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#3F7AD9" d="M1077.133 49.39l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V-.193"/><path fill="#718BC8" d="M1549.122 49.584v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.334c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M1511.622 100c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M1476.205 100c0 8.054-6.53 14.584-14.584 14.584s-14.582-6.53-14.582-14.584c0-8.054 6.528-14.584 14.582-14.584s14.584 6.53 14.584 14.584"/><path fill="#6479AB" d="M1549.122 49.584l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V.002"/><path fill="#D46B1C" d="M175.076 316.413l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V266.83"/><path fill="#4A5BD7" d="M175.076 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#58A138" d="M409.667 316.413l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552V266.83"/><path fill="#3F7AD9" d="M643.047 316.42l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#6479AB" d="M864.388 316.42l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M391.104 604.447l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#8C1DCD" d="M391.103 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M174.991 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#624A97" d="M174.991 1120.494l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M631.831 1927.79l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DCAE29" d="M852.144 1928.277l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#0F797A" d="M391.022 1120.691l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M391.105 1378.526l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#475A63" d="M631.646 1378.524l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M864.388 1378.717l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M852.145 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#5BA23A" d="M619.044 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#2FB69A" d="M391.105 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M175 1672.564l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC4C29" d="M175 1927.59l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#DC3F9D" d="M391.105 1928.08l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#1993D0" d="M1092.169 1927.398l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#969594" d="M1326.192 1927.276l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#D46B1C" d="M643.043 604.649l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M864.388 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M1077.213 604.924l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#9E176D" d="M1077.213 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><path fill="#AD282B" d="M864.388 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M643.043 862.475l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417M175 1378.717l-42.456.386c-4.005 0-7.252-3.829-7.252-8.552v-41.417"/><g><path fill="#718BC8" d="M1302.122 49.658v142.084c0 4.624-3.75 8.332-8.334 8.332h-158.332a8.304 8.304 0 0 1-8.334-8.332V8.408c0-4.584 3.708-8.334 8.334-8.334h117.124l49.542 49.584z"/><path fill="#FFF" d="M1264.622 86.075c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50"/><path fill="#718BC8" d="M1229.205 86.075c0 8.054-6.53 14.584-14.584 14.584-8.054 0-14.582-6.53-14.582-14.584 0-8.054 6.528-14.584 14.582-14.584 8.054 0 14.584 6.53 14.584 14.584"/><path opacity=".2" fill="#231815" d="M1252.58 41.324V.074l49.542 49.583h-41.208c-4.584 0-8.334-3.75-8.334-8.333z"/><g fill="#FFF"><path d="M1180.384 167.254c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.731 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.229 2.982h-18.685zm12.266-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.355 0-6.19 3.955-6.476 6.82h12.265zM1209.206 151.32l3.324 5.275c.917 1.49 1.719 2.865 2.521 4.297h.172c.802-1.547 1.604-2.98 2.408-4.412l3.094-5.16h7.68l-9.342 13.412 9.514 14.5h-7.967l-3.438-5.559c-.917-1.49-1.719-2.98-2.521-4.527h-.115c-.802 1.605-1.605 2.98-2.522 4.527l-3.21 5.559h-7.794l9.685-14.213-9.342-13.699h7.853zM1236.708 167.254c.172 5.043 4.127 7.221 8.597 7.221 3.266 0 5.617-.459 7.738-1.26l1.031 4.871c-2.407.973-5.73 1.719-9.743 1.719-9.055 0-14.385-5.559-14.385-14.098 0-7.738 4.7-15.016 13.64-15.016 9.055 0 12.036 7.451 12.036 13.582 0 1.32-.115 2.35-.23 2.982h-18.684zm12.266-4.93c.057-2.578-1.089-6.82-5.789-6.82-4.356 0-6.19 3.955-6.476 6.82h12.265z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/illustration.svg b/src/assets/svg/illustration.svg
new file mode 100644
index 0000000..b45215b
--- /dev/null
+++ b/src/assets/svg/illustration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 676.99 384.01"><defs><style>.cls-1{fill:#f7bd3d;}.cls-19,.cls-2{fill:#181828;}.cls-10,.cls-13,.cls-3,.cls-42,.cls-5,.cls-6,.cls-64{fill:#fff;}.cls-3{opacity:0.48;}.cls-4{fill:#d39021;}.cls-6{opacity:0.61;}.cls-10,.cls-7{opacity:0.2;}.cls-8{fill:#113c47;}.cls-9{fill:#df8a3a;}.cls-10,.cls-41,.cls-42,.cls-43,.cls-46,.cls-56,.cls-57{isolation:isolate;}.cls-11{fill:#c0dbe2;}.cls-12{fill:#f7b14b;}.cls-13{opacity:0.7;}.cls-14{fill:#91dcdc;}.cls-15{fill:#5ba3ba;}.cls-16{fill:#d17e1c;}.cls-17{fill:#6f6372;}.cls-18{fill:#63456b;}.cls-19{opacity:0.5;}.cls-20{fill:#f04d6a;}.cls-21{fill:#928f93;}.cls-22{fill:#83c3db;}.cls-23{fill:#c0f3ff;}.cls-24,.cls-30,.cls-41,.cls-43{fill:#e89176;}.cls-25{fill:#ce7057;}.cls-26{fill:#ffbb59;}.cls-27{fill:#ffdbab;}.cls-28{fill:#f4a031;}.cls-29{fill:#fdc6a2;}.cls-30{opacity:0.62;}.cls-31{fill:#ffdbc7;}.cls-32{fill:#ffe8dc;}.cls-33{fill:#b4e4f9;}.cls-34{fill:#73c7e5;}.cls-35{fill:#eefbff;}.cls-36{opacity:0.15;}.cls-37{fill:#1b3c47;}.cls-38{fill:#e59328;}.cls-39{fill:#ffd097;}.cls-40{fill:#1b1b2b;}.cls-41{opacity:0.49;}.cls-42{opacity:0.55;}.cls-43{opacity:0.62;}.cls-44{fill:#ffc1b3;}.cls-45,.cls-64{opacity:0.25;}.cls-46{fill:#dff5f7;}.cls-46,.cls-56{opacity:0.8;}.cls-47{fill:#f1665d;}.cls-48{fill:#f7bd3b;}.cls-49{fill:#56c643;}.cls-50{fill:none;}.cls-51{fill:#8c7f93;}.cls-52{fill:#5ffd9f;}.cls-53{fill:#aeffcf;}.cls-54{fill:#7dc4ff;}.cls-55{fill:#12dd65;}.cls-56{fill:#b5e5e8;}.cls-57{fill:#c08976;opacity:0.39;}.cls-58{fill:#af143b;}.cls-59{fill:#91052d;}.cls-60{fill:#ffdede;}.cls-61{fill:#ea3d90;}.cls-62{fill:#c60c6e;}.cls-63{fill:#ff7dc7;}</style></defs><title>Asset 336</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M603.5,207.07h30.4a0,0,0,0,1,0,0v32.48a15.2,15.2,0,0,1-15.2,15.2h0a15.2,15.2,0,0,1-15.2-15.2V207.07A0,0,0,0,1,603.5,207.07Z"/><path class="cls-2" d="M618.86,256.08a16.43,16.43,0,0,1-16.42-16.42V207.19a1.21,1.21,0,0,1,1.22-1.22h30.4a1.22,1.22,0,0,1,1.22,1.22v32.47A16.44,16.44,0,0,1,618.86,256.08Zm-14-47.68v31.26a14,14,0,0,0,14,14h0a14,14,0,0,0,14-14V208.4Z"/><path class="cls-1" d="M585.23,168.9a61.1,61.1,0,0,0-12-21.92c11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-3" d="M601.05,157.52c-2.43-8.05-19.31-10.2-28.95-9.36,11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-4" d="M574.58,146.18c.44.51-1.37,1.19-.94,1.73,10.1-3.5,21.09-2.45,29.51,4.11l1.56-1.14C595.7,143.14,585.66,141.67,574.58,146.18Z"/><path class="cls-2" d="M590.78,164.39,585,169a61.12,61.12,0,0,0-11.2-22.31h0A60.89,60.89,0,0,1,590.78,164.39Z"/><path class="cls-2" d="M586.21,159a1,1,0,0,1-.8-.44c-4.91-8.05-11.82-9.68-11.93-9.68a.93.93,0,0,1-.71-1.07,1,1,0,0,1,1.08-.71c.31.07,7.79,1.84,13.11,10.54a.92.92,0,0,1-.3,1.27h0A1,1,0,0,1,586.21,159Z"/><path class="cls-5" d="M588.78,149.94a7.18,7.18,0,0,0-2.63-.62.3.3,0,0,1-.29-.31.31.31,0,0,1,.31-.29,8,8,0,0,1,2.86.65.31.31,0,0,1,.16.41.31.31,0,0,1-.41.16Z"/><ellipse class="cls-6" cx="581.68" cy="148.43" rx="1.08" ry="1.35" transform="translate(422.05 727.14) rotate(-88.89)"/><path class="cls-2" d="M584.67,170.12a1.21,1.21,0,0,1-1.16-.87,59.48,59.48,0,0,0-11.72-21.48,1.22,1.22,0,0,1-.25-1.07,1.2,1.2,0,0,1,.72-.84c11.92-4.87,24.49-3.09,33.63,4.76a1.21,1.21,0,0,1,.13,1.71,1.22,1.22,0,0,1-1.72.13c-8-6.89-19-8.69-29.56-4.94a61.72,61.72,0,0,1,11.1,21,1.21,1.21,0,0,1-.82,1.51A1,1,0,0,1,584.67,170.12Z"/><g class="cls-7"><path class="cls-8" d="M645.38,180.89a2.69,2.69,0,0,1-2.69-2.68V163a2.69,2.69,0,0,1,5.38,0v15.22a2.68,2.68,0,0,1-2.68,2.7Z"/><path class="cls-8" d="M645.38,158.72a2.69,2.69,0,0,1-2.69-2.69v-5.69a2.69,2.69,0,0,1,5.38,0V156A2.68,2.68,0,0,1,645.38,158.72Z"/></g><path class="cls-1" d="M650.18,160.47a60.69,60.69,0,0,1,11.94-21.92c-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-3" d="M631.27,154.46c2.42-8.05,18.52-16.64,30.85-15.91-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-5" d="M630.12,149.4c2.42-8.05,22.41-14.4,32.37-10.48-11-4.49-23.31-3.22-32.37,4.57"/><path class="cls-2" d="M646.3,151.07l5.14,7.34c2.15-8.13,5.86-14,11.09-20.56l.1-1.75C655.85,140.78,650.66,144.09,646.3,151.07Z"/><path class="cls-1" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0a35.47,35.47,0,0,1-35.48,35.48H615.4a35.47,35.47,0,0,1-35.48-35.48h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-5" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0c-4.23-15.44-15.3-31.14-34.89-31.14H616c-19.59,0-29.82,13.42-36.06,31.14h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-9" d="M657.57,177.76a35.47,35.47,0,0,1-35.47,35.47H616a35.47,35.47,0,0,1-35.47-35.47c0-.76,0-1.52.07-2.27a35.47,35.47,0,0,0,35.47,33.21h6.13a35.46,35.46,0,0,0,35.4-33.21C657.55,176.24,657.57,177,657.57,177.76Z"/><path class="cls-2" d="M652.77,197.23c-7.41-1.75-6.87-.88-13.6-8.53,0,0-2,9.61,5.58,15.2Z"/><path class="cls-2" d="M646.41,202.39s-5.81-.82-11.32-6.66c0,0-1.25,7.92,4.41,12.09Z"/><path class="cls-2" d="M666.3,186.94a1,1,0,0,1-.77-.42c-1.77-2.68-3.45-2.93-6.26-3.32a33.71,33.71,0,0,1-3.74-.69,33.62,33.62,0,0,0-5.37-.89,1,1,0,0,1-.84-1,.91.91,0,0,1,1-.84h0a35.1,35.1,0,0,1,5.67.93,30.78,30.78,0,0,0,3.55.66c2.85.41,5.31.75,7.52,4.12a.93.93,0,0,1-.26,1.3,1,1,0,0,1-.51.16Z"/><path class="cls-2" d="M676.05,196.14a.93.93,0,0,1-.78-.42c-1.75-2.66-8.95-5.77-19.74-8.6a35,35,0,0,0-5.37-.88.94.94,0,0,1,.17-1.86,36.26,36.26,0,0,1,5.67.94c8.06,2.09,18.27,5.38,20.83,9.34a.92.92,0,0,1-.25,1.29h0A.89.89,0,0,1,676.05,196.14Z"/><path class="cls-2" d="M664.45,198.15h-.16a13.49,13.49,0,0,1-8-4.15,16,16,0,0,0-3.85-2.88,34.55,34.55,0,0,0-5.07-2,.92.92,0,0,1-.6-1.16v0a.94.94,0,0,1,1.16-.6,38.43,38.43,0,0,1,5.38,2.15,19.06,19.06,0,0,1,4.29,3.17c1.86,1.71,3.47,3.23,7,3.68a.94.94,0,0,1-.14,1.86Z"/><path class="cls-2" d="M570.92,186.94a1,1,0,0,0,.78-.42c1.76-2.68,3.45-2.93,6.25-3.32a33.71,33.71,0,0,0,3.74-.69,33.8,33.8,0,0,1,5.37-.89,1,1,0,0,0,.84-1,.91.91,0,0,0-1-.84h0a35.1,35.1,0,0,0-5.67.93,30.78,30.78,0,0,1-3.55.66c-2.85.41-5.31.75-7.52,4.12a.93.93,0,0,0,.26,1.3,1,1,0,0,0,.51.16Z"/><path class="cls-2" d="M561.17,196.14a.93.93,0,0,0,.78-.42c1.75-2.66,8.95-5.77,19.74-8.6a35,35,0,0,1,5.37-.88.94.94,0,0,0-.17-1.86,36.26,36.26,0,0,0-5.67.94c-8.06,2.09-18.27,5.38-20.83,9.34a.92.92,0,0,0,.25,1.29h0A.89.89,0,0,0,561.17,196.14Z"/><path class="cls-2" d="M572.77,198.15h.16a13.49,13.49,0,0,0,8-4.15,16.2,16.2,0,0,1,3.86-2.88,34,34,0,0,1,5.06-2,.92.92,0,0,0,.6-1.16v0a.94.94,0,0,0-1.16-.6,38.43,38.43,0,0,0-5.38,2.15,19.06,19.06,0,0,0-4.29,3.17c-1.86,1.71-3.46,3.23-7,3.68a.94.94,0,0,0,.14,1.86Z"/><rect class="cls-5" x="591.72" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="603.35" cy="173.72" r="8.79"/><circle class="cls-10" cx="605.84" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="601.53" cy="170.34" rx="4.45" ry="3.39"/><rect class="cls-5" x="622.82" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="634.45" cy="173.72" r="8.79"/><circle class="cls-10" cx="636.94" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="632.62" cy="170.34" rx="4.45" ry="3.39"/><path class="cls-5" d="M602.74,152.19a26.51,26.51,0,0,1,5.66-1.95,29.63,29.63,0,0,1,5.93-.69.64.64,0,0,1,.64.62.63.63,0,0,1-.59.63,29.54,29.54,0,0,0-5.61,1,32.59,32.59,0,0,0-5.33,1.92.83.83,0,0,1-1.09-.42A.82.82,0,0,1,602.74,152.19Z"/><ellipse class="cls-5" cx="618.54" cy="150.08" rx="1.08" ry="1.35" transform="translate(456.54 765.61) rotate(-88.89)"/><path class="cls-2" d="M621.52,214.89H615.4a36.7,36.7,0,1,1,0-73.39h6.12a36.7,36.7,0,1,1,0,73.39Zm-6.12-71a34.26,34.26,0,0,0,0,68.52h6.12a34.26,34.26,0,0,0,0-68.52Z"/><path class="cls-2" d="M652.35,160.22a1.33,1.33,0,0,1-.28,0,1.21,1.21,0,0,1-.91-1.46,57.79,57.79,0,0,1,8.94-20.92c-10.81-3.06-21.62-.57-29.18,6.83a1.22,1.22,0,1,1-1.71-1.74c8.61-8.41,21-11,33.26-6.91a1.24,1.24,0,0,1,.59,1.89c-4.57,6.11-7.51,12.71-9.53,21.4A1.22,1.22,0,0,1,652.35,160.22Z"/><ellipse class="cls-9" cx="624.94" cy="205.15" rx="2.59" ry="0.97"/><circle class="cls-9" cx="620.04" cy="205.36" r="1"/><ellipse class="cls-5" cx="644.21" cy="145.01" rx="1.82" ry="0.89" transform="translate(13.8 341.53) rotate(-30)"/><circle class="cls-5" cx="646.3" cy="146.64" r="0.41"/><path class="cls-2" d="M617.76,185.47a1.74,1.74,0,0,0-1.32,2.89c.79.87,1.93,1.91,3.2,1.91s2.41-1,3.19-1.91a1.74,1.74,0,0,0-.16-2.46,1.8,1.8,0,0,0-1.1-.43Z"/><rect class="cls-11" x="376.08" y="323.79" width="23.87" height="2.17"/><polygon class="cls-11" points="402.27 298.71 402.06 301.15 372.83 301.15 372.62 298.71 402.27 298.71"/><path class="cls-2" d="M396.56,346.71H378.87a3.2,3.2,0,0,1-3.17-2.92l-3.81-46.08a1,1,0,0,1,1-1.09h29.65a1,1,0,0,1,.74.32,1,1,0,0,1,.27.77L401,328.07a1,1,0,1,1-2-.16l2.42-29.28H374l3.73,45a1.17,1.17,0,0,0,1.16,1.07h17.69a1.17,1.17,0,0,0,1.16-1.07l.93-11.2a1,1,0,0,1,1.09-.92,1,1,0,0,1,.92,1.09l-.93,11.19A3.2,3.2,0,0,1,396.56,346.71Z"/><rect class="cls-5" x="368.19" y="293.28" width="39.06" height="4.7"/><path class="cls-2" d="M404.89,299.16H370.54a3.32,3.32,0,1,1,0-6.64h34.35a3.32,3.32,0,0,1,0,6.64Zm-34.35-4.7a1.38,1.38,0,1,0,0,2.76h34.35a1.38,1.38,0,1,0,0-2.76Z"/><path class="cls-2" d="M373.8,294.18h0a.72.72,0,0,1-.68-.76c0-.22.36-5.38,4.8-7.07a.73.73,0,0,1,1,.68v6a.72.72,0,0,1-1.44,0v-4.84c-2.67,1.7-2.9,5.28-2.91,5.32A.71.71,0,0,1,373.8,294.18Z"/><circle class="cls-5" cx="392.19" cy="305.08" r="0.2"/><circle class="cls-11" cx="394.3" cy="301.76" r="1.56"/><circle class="cls-11" cx="397.38" cy="304.44" r="0.44"/><circle class="cls-11" cx="398.57" cy="301.89" r="0.41"/><circle class="cls-11" cx="391.41" cy="301.11" r="0.98"/><circle class="cls-11" cx="394.6" cy="307.28" r="0.37"/><polygon class="cls-12" points="370.95 305.89 372.22 322.52 403.63 322.52 405.08 305.89 370.95 305.89"/><path class="cls-2" d="M403.45,324.07H372a1,1,0,0,1-1-.93l-1.26-16.63a1,1,0,0,1,1-1.08h34.12a1,1,0,0,1,.75.32,1,1,0,0,1,.26.77l-1.45,16.63A1,1,0,0,1,403.45,324.07Zm-30.48-2h29.56l1.27-14.62H371.86Z"/><path class="cls-2" d="M381.05,311.24h-9a.47.47,0,0,1,0-.93h9a.47.47,0,1,1,0,.93Z"/><ellipse class="cls-13" cx="378.25" cy="316.8" rx="3.68" ry="2.89" transform="translate(-113.22 360.25) rotate(-45)"/><ellipse class="cls-13" cx="384.01" cy="314.43" rx="1.44" ry="1.14" transform="translate(-109.86 363.63) rotate(-45)"/><rect class="cls-14" x="210.13" y="327.96" width="112.38" height="17.46"/><rect class="cls-15" x="210.13" y="327.96" width="112.38" height="4.12"/><path class="cls-2" d="M322.52,346.88H210.13a1.45,1.45,0,0,1-1.45-1.46V328a1.45,1.45,0,0,1,1.45-1.45H322.52A1.45,1.45,0,0,1,324,328v17.46A1.45,1.45,0,0,1,322.52,346.88ZM211.59,344H321.06V329.42H211.59Z"/><path class="cls-12" d="M115.69,353.62h516.7a0,0,0,0,1,0,0v0a30.24,30.24,0,0,1-30.24,30.24H145.94a30.24,30.24,0,0,1-30.24-30.24v0a0,0,0,0,1,0,0Z"/><path class="cls-16" d="M631.59,360.3a28.37,28.37,0,0,1-1.23,4H117.73a28.37,28.37,0,0,1-1.23-4Z"/><path class="cls-2" d="M602.15,384H145.94a31.44,31.44,0,0,1-31.4-31.4,1.16,1.16,0,0,1,2.31,0,29.12,29.12,0,0,0,29.09,29.09H602.15a29.12,29.12,0,0,0,29.09-29.09,1.15,1.15,0,1,1,2.3,0A31.43,31.43,0,0,1,602.15,384Z"/><rect class="cls-17" x="568.49" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M595.82,344.38H584.68a16.19,16.19,0,0,1-16.19-16.19V236.45a16.19,16.19,0,0,1,16.19-16.2h11.14a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,595.82,344.38Z"/><circle class="cls-19" cx="616.03" cy="254.16" r="10.16"/><circle class="cls-19" cx="616.03" cy="254.16" r="7.19"/><path class="cls-2" d="M616,265.54a11.38,11.38,0,1,1,11.38-11.38A11.4,11.4,0,0,1,616,265.54Zm0-20.33a8.95,8.95,0,1,0,9,8.95A9,9,0,0,0,616,245.21Z"/><circle class="cls-19" cx="616.03" cy="297.71" r="22.14"/><circle class="cls-19" cx="616.03" cy="297.71" r="15.65"/><path class="cls-2" d="M616,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,616,321.4Zm0-44.28a20.59,20.59,0,1,0,20.59,20.59A20.61,20.61,0,0,0,616,277.12Z"/><path class="cls-2" d="M590.23,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,590.23,230.88Z"/><path class="cls-2" d="M641.84,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,641.84,230.88Z"/><circle class="cls-20" cx="616.03" cy="229.95" r="3.54"/><path class="cls-2" d="M616,234.42a4.47,4.47,0,1,1,4.48-4.47A4.47,4.47,0,0,1,616,234.42Zm0-7.08a2.61,2.61,0,1,0,2.61,2.61A2.61,2.61,0,0,0,616,227.34Z"/><path class="cls-2" d="M590.23,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,590.23,332Z"/><path class="cls-2" d="M641.84,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,641.84,332Z"/><rect class="cls-18" x="577.8" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="248.02" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M647.38,346.66H584.69a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,647.38,346.66ZM584.69,222.53A14.66,14.66,0,0,0,570,237.17v91.74a14.66,14.66,0,0,0,14.65,14.65h62.69A14.66,14.66,0,0,0,662,328.91V237.17a14.66,14.66,0,0,0-14.64-14.64Z"/><rect class="cls-17" x="93.02" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M120.35,344.38H109.22A16.19,16.19,0,0,1,93,328.19V236.45a16.2,16.2,0,0,1,16.2-16.2h11.13a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,120.35,344.38Z"/><circle class="cls-19" cx="140.57" cy="254.16" r="10.16"/><circle class="cls-19" cx="140.57" cy="254.16" r="7.19"/><path class="cls-2" d="M140.57,265.54A11.38,11.38,0,1,1,152,254.16,11.39,11.39,0,0,1,140.57,265.54Zm0-20.33a8.95,8.95,0,1,0,8.94,8.95A9,9,0,0,0,140.57,245.21Z"/><circle class="cls-19" cx="140.57" cy="297.71" r="22.14"/><circle class="cls-19" cx="140.57" cy="297.71" r="15.65"/><path class="cls-2" d="M140.57,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,140.57,321.4Zm0-44.28a20.59,20.59,0,1,0,20.58,20.59A20.61,20.61,0,0,0,140.57,277.12Z"/><path class="cls-2" d="M114.76,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,114.76,230.88Z"/><path class="cls-2" d="M166.37,236.47a3.73,3.73,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,166.37,230.88Z"/><path class="cls-2" d="M114.76,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,114.76,332Z"/><path class="cls-2" d="M166.37,337.61a3.72,3.72,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,166.37,332Z"/><rect class="cls-18" x="102.33" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="182.44" y="248.02" width="4.36" height="19.09" rx="1.62"/><rect class="cls-21" x="182.44" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M171.91,346.66H109.22a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,171.91,346.66ZM109.22,222.53a14.66,14.66,0,0,0-14.64,14.64v91.74a14.66,14.66,0,0,0,14.64,14.65h62.69a14.66,14.66,0,0,0,14.65-14.65V237.17a14.66,14.66,0,0,0-14.65-14.64Z"/><path class="cls-22" d="M331.21,343.91a18,18,0,1,1,35.92,0"/><path class="cls-23" d="M352.41,326.07a18,18,0,0,0-15.82,17.84H332.3a18,18,0,0,1,18-18A16.89,16.89,0,0,1,352.41,326.07Z"/><path class="cls-2" d="M367.13,345.15a1.24,1.24,0,0,1-1.23-1.24,16.63,16.63,0,0,0-2.71-9.12,1.24,1.24,0,0,1,2.08-1.36,19.16,19.16,0,0,1,3.1,10.48A1.24,1.24,0,0,1,367.13,345.15Z"/><path class="cls-2" d="M331.21,345.15a1.24,1.24,0,0,1-1.24-1.24,19.2,19.2,0,0,1,31.21-15,1.24,1.24,0,1,1-1.55,1.93,16.57,16.57,0,0,0-10.46-3.67,16.75,16.75,0,0,0-16.73,16.73A1.24,1.24,0,0,1,331.21,345.15Z"/><path class="cls-24" d="M488.94,54.37a25.94,25.94,0,0,1-51.87,0c0-14.33,11.61-27.18,25.93-27.18S488.94,40,488.94,54.37Z"/><path class="cls-25" d="M487.66,55.17a25.69,25.69,0,0,1-.75,5.57h-1.16a51.46,51.46,0,0,1-36.52-15.13,52.23,52.23,0,0,1-6.82-8.42,25.09,25.09,0,0,1,2.32-2.29,51.1,51.1,0,0,0,4.5,5.14,51.46,51.46,0,0,0,36.52,15.13Z"/><path class="cls-2" d="M463,81.67a27.29,27.29,0,0,1-24-14.35,1.36,1.36,0,1,1,2.4-1.29,24.58,24.58,0,0,0,46.21-11.66c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.8,24.8,0,0,0,.83,6.37,1.36,1.36,0,1,1-2.63.7,27.06,27.06,0,0,1-.93-7.07c0-15.48,12.5-28.55,27.3-28.55s27.31,13.07,27.31,28.55A27.34,27.34,0,0,1,463,81.67Z"/><path class="cls-24" d="M521.88,72.42a25.94,25.94,0,0,0,51.88,0c0-14.33-11.61-27.18-25.94-27.18S521.88,58.09,521.88,72.42Z"/><path class="cls-25" d="M523.16,73.22a25.69,25.69,0,0,0,.76,5.57h1.16a51.7,51.7,0,0,0,43.33-23.55A26.28,26.28,0,0,0,566.1,53c-1.39,1.81-4.91.48-6.52,2.09-9.34,9.35-20.24,18.18-34.5,18.18Z"/><path class="cls-2" d="M547.82,99.72a27.34,27.34,0,0,1-27.3-27.3c0-15.48,12.5-28.55,27.3-28.55s27.3,13.07,27.3,28.55a27.62,27.62,0,0,1-.92,7.08,1.37,1.37,0,0,1-2.64-.71,24.38,24.38,0,0,0,.84-6.37c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.58,24.58,0,0,0,46.21,11.66,1.36,1.36,0,1,1,2.4,1.29A27.3,27.3,0,0,1,547.82,99.72Z"/><path class="cls-26" d="M450.17,338.66l-52.1,11.16v-95a26.05,26.05,0,0,1,26.05-26.06h0a26.05,26.05,0,0,1,26.05,26.06Z"/><path class="cls-27" d="M426.66,228.91a26,26,0,0,0-23,25.87v93.73l-6.15,1.31v-95a26.05,26.05,0,0,1,26.06-26.05A23.88,23.88,0,0,1,426.66,228.91Z"/><path class="cls-2" d="M398.07,351a1.21,1.21,0,0,1-.77-.27,1.24,1.24,0,0,1-.45-.95v-95a27.27,27.27,0,1,1,54.54,0v83.88a1.22,1.22,0,0,1-1,1.19L398.32,351A1.07,1.07,0,0,1,398.07,351Zm26.05-121.1a24.86,24.86,0,0,0-24.83,24.84v93.54L449,337.68v-82.9A24.86,24.86,0,0,0,424.12,229.94Zm26.05,108.72h0Z"/><path class="cls-26" d="M512.58,199h0a42.11,42.11,0,0,1,42.11,42.11V352.61a0,0,0,0,1,0,0H412.1a0,0,0,0,1,0,0V299.48A100.48,100.48,0,0,1,512.58,199Z"/><path class="cls-28" d="M554.55,241.9h0a0,0,0,0,1,0,0V348.38a0,0,0,0,1,0,0H544a0,0,0,0,1,0,0v-96A10.53,10.53,0,0,1,554.55,241.9Z"/><path class="cls-27" d="M517.36,199.22a100.51,100.51,0,0,0-93.67,100.26v53.13h-11.2V299.48A100.49,100.49,0,0,1,513,199,42.29,42.29,0,0,1,517.36,199.22Z"/><path class="cls-2" d="M554.69,353.83H412.1a1.21,1.21,0,0,1-1.22-1.22V299.48a101.81,101.81,0,0,1,101.7-101.7,43.37,43.37,0,0,1,43.33,43.32V352.61A1.22,1.22,0,0,1,554.69,353.83Zm-141.37-2.44H553.47V241.1a40.94,40.94,0,0,0-40.89-40.89,99.38,99.38,0,0,0-99.26,99.27Z"/><rect class="cls-26" x="531.05" y="226.8" width="41.81" height="115.09" rx="20.9"/><path class="cls-27" d="M555.56,341.78c-.72.07-1.44.11-2.18.11A20.91,20.91,0,0,1,532.48,321V247.7a20.9,20.9,0,0,1,20.9-20.9c.74,0,1.46,0,2.18.11a20.91,20.91,0,0,0-18.73,20.79V321A20.92,20.92,0,0,0,555.56,341.78Z"/><path class="cls-2" d="M552,343.11A22.15,22.15,0,0,1,529.84,321V247.7a22.12,22.12,0,0,1,44.24,0V321A22.15,22.15,0,0,1,552,343.11ZM552,228a19.71,19.71,0,0,0-19.69,19.68V321a19.69,19.69,0,1,0,39.38,0V247.7A19.71,19.71,0,0,0,552,228Z"/><rect class="cls-26" x="502.84" y="271.92" width="35.41" height="115.09" rx="17.71" transform="translate(850.01 -191.08) rotate(90)"/><path class="cls-2" d="M560.38,348.39H480.71a18.93,18.93,0,0,1,0-37.85h79.67a18.93,18.93,0,1,1,0,37.85ZM480.71,313a16.49,16.49,0,1,0,0,33h79.67a16.49,16.49,0,1,0,0-33Z"/><ellipse class="cls-29" cx="457.99" cy="329.89" rx="22.56" ry="17.62"/><path class="cls-30" d="M460.53,347a1.53,1.53,0,0,1-.23-3h0a27.23,27.23,0,0,0,7.8-2.68c4.95-2.66,7.59-6.4,7.84-11.11a1.51,1.51,0,0,1,1.61-1.45,1.54,1.54,0,0,1,1.45,1.61c-.31,5.8-3.6,10.54-9.53,13.69a30.37,30.37,0,0,1-8.72,3Z"/><path class="cls-2" d="M458,348.63c-6.56,0-13.09-2.12-17.75-6.26-4.15-3.7-6.27-8.47-5.95-13.42.32-5.17,3.22-9.87,8.15-13.25a1.15,1.15,0,1,1,1.3,1.9c-4.33,3-6.88,7-7.16,11.49-.27,4.24,1.58,8.34,5.19,11.56,7.84,7,21.49,7.66,30.43,1.53,4.33-3,6.87-7.05,7.16-11.49.26-4.24-1.58-8.34-5.2-11.56a1.15,1.15,0,0,1,1.53-1.72c4.16,3.7,6.27,8.47,6,13.42-.33,5.17-3.22,9.87-8.15,13.25A27.61,27.61,0,0,1,458,348.63Z"/><ellipse class="cls-31" cx="454.12" cy="325.7" rx="10.47" ry="6.34"/><rect class="cls-32" x="426.41" y="310.9" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="540.6" y="253.08" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="407.4" y="251.12" width="3.64" height="19.62" rx="1.82"/><rect class="cls-15" x="148.16" y="298.4" width="58.16" height="54.73" transform="translate(354.48 651.53) rotate(-180)"/><path class="cls-2" d="M206.32,354.37H148.16a1.25,1.25,0,0,1-1.24-1.24V298.4a1.24,1.24,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,206.32,354.37Zm-56.92-2.48h55.68V299.64H149.4Z"/><rect class="cls-14" x="160.05" y="298.4" width="58.16" height="54.73" transform="translate(378.26 651.53) rotate(-180)"/><path class="cls-2" d="M218.21,354.37H160.05a1.24,1.24,0,0,1-1.24-1.24V298.4a1.23,1.23,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,218.21,354.37Zm-56.92-2.48H217V299.64H161.29Z"/><path class="cls-15" d="M165.79,316.48H203a0,0,0,0,1,0,0v8.68a0,0,0,0,1,0,0H165.79a4.34,4.34,0,0,1-4.34-4.34v0A4.34,4.34,0,0,1,165.79,316.48Z" transform="translate(364.4 641.64) rotate(-180)"/><rect class="cls-15" x="47.73" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(355.3 445.02) rotate(-180)"/><path class="cls-2" d="M295.65,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16h117a1.24,1.24,0,1,1,0,2.48h-117A10.69,10.69,0,0,0,49,141.9V303.12A10.69,10.69,0,0,0,59.65,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H251.48a1.24,1.24,0,1,1,0-2.48h44.17a13.18,13.18,0,0,1,13.16,13.16V303.12A13.18,13.18,0,0,1,295.65,316.28Z"/><rect class="cls-14" x="59.02" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(377.88 445.02) rotate(-180)"/><rect class="cls-33" x="70.43" y="139.79" width="240.91" height="167.83" rx="7.94" transform="translate(381.77 447.41) rotate(-180)"/><ellipse class="cls-15" cx="188.68" cy="325.28" rx="1.54" ry="0.66"/><circle class="cls-15" cx="185.3" cy="327.96" r="0.9"/><circle class="cls-15" cx="191.39" cy="327.51" r="0.9"/><circle class="cls-15" cx="172.02" cy="324.46" r="2.11"/><circle class="cls-15" cx="194.17" cy="324.46" r="2.11"/><circle class="cls-15" cx="177.29" cy="327.53" r="0.95"/><circle class="cls-15" cx="172.11" cy="329.98" r="0.94"/><circle class="cls-15" cx="167.73" cy="327.96" r="0.43"/><circle class="cls-15" cx="169.45" cy="327.53" r="0.95"/><rect class="cls-34" x="303.75" y="200.35" width="6.76" height="94.24" rx="3.38" transform="translate(614.25 494.94) rotate(180)"/><rect class="cls-34" x="303.75" y="154.37" width="6.76" height="29.8" rx="3.38"/><rect class="cls-35" x="71.77" y="192.66" width="6.76" height="44.67" rx="3.38" transform="translate(150.3 429.98) rotate(-180)"/><rect class="cls-35" x="71.77" y="147.07" width="6.76" height="29.8" rx="3.38" transform="translate(150.3 323.94) rotate(180)"/><rect class="cls-35" x="71.77" y="259.42" width="6.76" height="13.27" rx="3.38" transform="translate(150.3 532.12) rotate(-180)"/><path class="cls-2" d="M70.43,170.51a1.25,1.25,0,0,1-1.24-1.24V147.73a9.19,9.19,0,0,1,9.18-9.18H245.21a1.24,1.24,0,1,1,0,2.48H78.37a6.71,6.71,0,0,0-6.7,6.7v21.54A1.25,1.25,0,0,1,70.43,170.51Z"/><path class="cls-2" d="M303.4,308.86H125.51a1.24,1.24,0,1,1,0-2.48H303.4a6.71,6.71,0,0,0,6.7-6.7v-152a6.71,6.71,0,0,0-6.7-6.7H256.07a1.24,1.24,0,1,1,0-2.48H303.4a9.19,9.19,0,0,1,9.18,9.18v152A9.19,9.19,0,0,1,303.4,308.86Z"/><path class="cls-2" d="M115.61,308.86H78.37a9.19,9.19,0,0,1-9.18-9.18v-48a1.24,1.24,0,0,1,2.48,0v48a6.71,6.71,0,0,0,6.7,6.7h37.24a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-2" d="M70.43,242.72a1.25,1.25,0,0,1-1.24-1.24V179.22a1.24,1.24,0,1,1,2.48,0v62.26A1.25,1.25,0,0,1,70.43,242.72Z"/><rect class="cls-15" x="56.94" y="149.8" width="10.21" height="5.59" rx="2.79" transform="translate(214.64 90.54) rotate(90)"/><rect class="cls-15" x="54.88" y="252.11" width="14.34" height="5.59" rx="2.79" transform="translate(316.95 192.86) rotate(90)"/><rect class="cls-15" x="56.94" y="186.47" width="10.21" height="5.59" rx="2.79" transform="translate(251.31 127.22) rotate(90)"/><path class="cls-2" d="M306.94,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16H225.66a1.24,1.24,0,1,1,0,2.48H70.94A10.69,10.69,0,0,0,60.26,141.9V303.12A10.69,10.69,0,0,0,70.94,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H235.07a1.24,1.24,0,1,1,0-2.48h71.87A13.18,13.18,0,0,1,320.1,141.9V303.12A13.18,13.18,0,0,1,306.94,316.28Z"/><g class="cls-36"><path class="cls-37" d="M392.13,192.34H379V170.15h39.07a1.58,1.58,0,1,1,0,3.16H382.17v15.87h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M402.47,192.34h-5.69a1.58,1.58,0,1,1,0-3.16h5.69a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M406.86,192.34h-.12a1.58,1.58,0,1,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M434.51,192.34H411.28a1.58,1.58,0,0,1,0-3.16h20.08V173.31h-7a1.58,1.58,0,1,1,0-3.16h10.18Z"/><path class="cls-37" d="M407.91,173.31H352.42V151.17h55.49Zm-52.35-3.16h49.19V154.32H355.57Z"/></g><g class="cls-36"><path class="cls-37" d="M110.6,112H97.45V89.83h39.08a1.58,1.58,0,0,1,0,3.15H100.64v15.88h10a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M121,112h-5.7a1.58,1.58,0,0,1,0-3.15H121a1.58,1.58,0,0,1,0,3.15Z"/><path class="cls-37" d="M125.33,112h-.11a1.58,1.58,0,1,1,0-3.15h.11a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M153,112H129.76a1.58,1.58,0,1,1,0-3.15h20.07V93h-7a1.58,1.58,0,1,1,0-3.15H153Z"/><path class="cls-37" d="M126.38,93H70.89V70.84h55.49ZM74,89.83h49.19V74H74.05Z"/></g><g class="cls-36"><path class="cls-37" d="M625.65,103.13H612.5V80.94h39.07a1.58,1.58,0,0,1,0,3.16H615.69V100h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M636,103.13H630.3a1.58,1.58,0,1,1,0-3.16H636a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M640.38,103.13h-.12a1.58,1.58,0,0,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M668,103.13H644.8a1.58,1.58,0,0,1,0-3.16h20.08V84.1h-7a1.58,1.58,0,1,1,0-3.16h10.17Z"/><path class="cls-37" d="M641.43,84.1H585.94V62h55.49Zm-52.35-3.16h49.19V65.11H589.09Z"/></g><path class="cls-2" d="M295.59,345.9H283.86a.93.93,0,1,1,0-1.86h11.73a.93.93,0,0,1,0,1.86Z"/><path class="cls-2" d="M295.59,350.71H283.86a.94.94,0,1,1,0-1.87h11.73a.94.94,0,0,1,0,1.87Z"/><ellipse class="cls-5" cx="262.75" cy="354.03" rx="1.4" ry="2.12"/><circle class="cls-5" cx="262.34" cy="359.31" r="0.99"/><circle class="cls-2" cx="298.2" cy="358.11" r="1.02"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><path class="cls-38" d="M649.46,351.72A7.48,7.48,0,0,1,642,359.2H103.57a7.48,7.48,0,0,1-7.48-7.48,7.27,7.27,0,0,1,.61-2.92,7.46,7.46,0,0,0,6.87,4.54H642a7.49,7.49,0,0,0,5.28-2.18,7.33,7.33,0,0,0,1.59-2.36A7.26,7.26,0,0,1,649.46,351.72Z"/><path class="cls-2" d="M547.49,345.48h-20a1.15,1.15,0,1,1,0-2.3h20a1.15,1.15,0,1,1,0,2.3Z"/><path class="cls-2" d="M117.9,350.63H96.74a.89.89,0,0,1,0-1.77H117.9a.89.89,0,1,1,0,1.77Z"/><path class="cls-2" d="M125.91,350.63h-3.49a.89.89,0,0,1,0-1.77h3.49a.89.89,0,0,1,0,1.77Z"/><rect class="cls-39" x="276.5" y="345.23" width="61.99" height="4.29" rx="2.15"/><rect class="cls-39" x="233.27" y="345.23" width="34.64" height="4.29" rx="2.15"/><rect class="cls-39" x="160.62" y="345.23" width="34.64" height="4.29" rx="2.15"/><path class="cls-2" d="M642,360.43H103.57a8.63,8.63,0,0,1,0-17.25H515.86a1.15,1.15,0,1,1,0,2.3H103.57a6.33,6.33,0,0,0,0,12.65H642a6.33,6.33,0,0,0,0-12.65H560.24a1.15,1.15,0,1,1,0-2.3H642a8.63,8.63,0,1,1,0,17.25Z"/><path class="cls-29" d="M446.88,100.57l6.66.13a15.76,15.76,0,0,1,15.4,16h0A15.68,15.68,0,0,1,453,132.15h0l-6.66-.13a15.76,15.76,0,0,1-15.42-16h0a15.68,15.68,0,0,1,15.95-15.41Z"/><path class="cls-2" d="M430.4,117.12h0a1.36,1.36,0,0,1-1.35-1.38,16.8,16.8,0,0,1,3.32-9.82,1.36,1.36,0,1,1,2.19,1.62,14.06,14.06,0,0,0-2.78,8.24A1.36,1.36,0,0,1,430.4,117.12Z"/><path class="cls-2" d="M452.75,133.31h-.3l-6.68-.13a17.08,17.08,0,0,1-15.65-11,1.37,1.37,0,0,1,.79-1.76,1.36,1.36,0,0,1,1.76.79,14.33,14.33,0,0,0,13.16,9.27l6.64.14a14.38,14.38,0,0,0,.55-28.75l-6.65-.14a14.28,14.28,0,0,0-7.47,1.91,1.36,1.36,0,0,1-1.86-.49,1.37,1.37,0,0,1,.49-1.87,17,17,0,0,1,8.9-2.27l6.65.13a17.11,17.11,0,0,1-.33,34.21Z"/><path class="cls-24" d="M449.18,113.44l3.46.06a8.19,8.19,0,0,1,8,8.34h0a8.18,8.18,0,0,1-8.32,8l-3.46-.07a8.19,8.19,0,0,1-8-8.33h0A8.17,8.17,0,0,1,449.18,113.44Z"/><path class="cls-5" d="M437.52,110.88a5.8,5.8,0,0,1,2.91-3.17c1.16-.45.69-2.34-.51-1.88a7.7,7.7,0,0,0-4.1,4.09c-.48,1.14,1.19,2.13,1.68,1Z"/><ellipse class="cls-5" cx="435.31" cy="114.5" rx="1.55" ry="1.24" transform="matrix(0.15, -0.99, 0.99, 0.15, 258.45, 528.41)"/><path class="cls-29" d="M557,100.57l6.66.13a15.76,15.76,0,0,1,15.42,16h0a15.68,15.68,0,0,1-15.95,15.41h0l-6.65-.13A15.76,15.76,0,0,1,541,116h0a15.68,15.68,0,0,1,16-15.41Z"/><path class="cls-2" d="M563.36,133.33h-.29l-6.69-.14a17.16,17.16,0,0,1-16.76-17.43,17.05,17.05,0,0,1,17-16.75H557l6.65.13a17.09,17.09,0,0,1-.28,34.18Zm-6.69-31.59a14.32,14.32,0,0,0-14.32,14.07,14.43,14.43,0,0,0,14.09,14.66l6.65.13a14.36,14.36,0,0,0,.5-28.72l-6.65-.14h-.27Z"/><path class="cls-24" d="M559.79,113.44l3.47.06a8.2,8.2,0,0,1,8,8.33v0h0a8.19,8.19,0,0,1-8.33,8l-3.45-.07a8.19,8.19,0,0,1-8-8.33h0A8.18,8.18,0,0,1,559.79,113.44Z"/><path class="cls-40" d="M440.47,118.54a1,1,0,0,1-.79-1.67,13.55,13.55,0,0,1,7.79-4.71,1,1,0,0,1,.41,2,11.43,11.43,0,0,0-6.61,4A1,1,0,0,1,440.47,118.54Z"/><path class="cls-40" d="M572.07,118.54a1,1,0,0,1-.8-.38,11.46,11.46,0,0,0-6.61-4,1,1,0,0,1,.41-2,13.55,13.55,0,0,1,7.79,4.71,1,1,0,0,1-.15,1.44A1,1,0,0,1,572.07,118.54Z"/><path class="cls-29" d="M545.17,34.62c.69.59,1.29,1.21,1.91,1.83a58.21,58.21,0,0,1,17.11,41.29V130a58.4,58.4,0,1,1-116.8,1.27c0-.42,0-.84,0-1.27V77.74a58.25,58.25,0,0,1,19-43.13C487.62,15.24,523.88,15.37,545.17,34.62Z"/><path class="cls-24" d="M547.4,36.72c-.62-.62-1.26-1.23-1.91-1.82a57.94,57.94,0,0,1-6,3.18c.28.28.53.58.79.88l2.11,2.47A62,62,0,0,1,550.29,54h-70a6.29,6.29,0,0,0,6.29,6.28h66.17a52.7,52.7,0,0,1,2.48,16.29V130.3a58.4,58.4,0,0,1-53.77,58.22c1.52.12,3.07.18,4.62.18a58.39,58.39,0,0,0,58.4-58.4V78A58.21,58.21,0,0,0,547.4,36.72Z"/><path class="cls-29" d="M518.28,199.55c0,2.51.71,5.34-.47,7.3-2.34,3.91-8.07,5.9-13.06,5.81h0a13.65,13.65,0,0,1-13.35-13.85l.68-10.89v-.68l27,.13"/><path class="cls-41" d="M520,188.4l-1.7,14.13a15.92,15.92,0,0,1-9.25-.74,75.12,75.12,0,0,0-16.28-5.19h-.13l.14-8.18a77.57,77.57,0,0,0,27.22,0Z"/><circle class="cls-42" cx="482.74" cy="182.33" r="0.72"/><circle class="cls-42" cx="492.76" cy="185.81" r="0.95"/><path class="cls-5" d="M511,187.58c-1.49.11-3,.17-4.53.17-32.25,0-61.86-25.73-58.4-58.4V77.06a58.24,58.24,0,0,1,19-43.12c1.85,1.12,1.45,2.17,3.53,3.13-9.83,10.44-17.44,24.54-17.44,40v52.29C453.22,160.09,476.9,186.57,511,187.58Z"/><circle class="cls-29" cx="538.87" cy="96.14" r="4.28"/><path class="cls-2" d="M452.37,154.8a1.37,1.37,0,0,1-1.23-.78,21.42,21.42,0,0,1-1.46-4,1.37,1.37,0,1,1,2.65-.66,18.26,18.26,0,0,0,1.27,3.52,1.36,1.36,0,0,1-.64,1.82A1.38,1.38,0,0,1,452.37,154.8Z"/><ellipse class="cls-43" cx="486.67" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="486.33" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="483.69" cy="106.51" rx="2.73" ry="2.98"/><ellipse class="cls-43" cx="525.69" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="525.36" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="522.71" cy="106.51" rx="2.73" ry="2.98"/><path class="cls-2" d="M505.75,189.86A60,60,0,0,1,454.3,160.5a1.37,1.37,0,1,1,2.35-1.39,57.25,57.25,0,0,0,49.1,28h.07a57.11,57.11,0,0,0,57-57.11V77.74a57.23,57.23,0,0,0-16.7-40.33L546,37.3c-.58-.58-1.13-1.13-1.74-1.66-9.94-9-24-14.13-38.52-14.15h-.09c-14.75,0-28.36,5-38.33,14.13a57,57,0,0,0-18.59,42.12V130a58.27,58.27,0,0,0,.92,10.3,1.37,1.37,0,0,1-2.69.48A60.86,60.86,0,0,1,446,130V77.74A59.79,59.79,0,0,1,465.46,33.6c21.71-19.84,58.61-19.85,80.59,0,.66.57,1.27,1.18,1.86,1.77l.1.11a60,60,0,0,1,17.51,42.26V130a59.84,59.84,0,0,1-59.7,59.84Z"/><path class="cls-2" d="M505.3,213.89a14.28,14.28,0,0,1-9.67-3.79A15.06,15.06,0,0,1,490.72,199V188.42a1.36,1.36,0,1,1,2.72,0V199a12.35,12.35,0,0,0,4,9.11,11.58,11.58,0,0,0,9,3l.82-.1a12.11,12.11,0,0,0,10.11-12V188.4a1.37,1.37,0,1,1,2.73,0V199a14.84,14.84,0,0,1-12.43,14.68c-.33.05-.65.09-1,.12A12.75,12.75,0,0,1,505.3,213.89Z"/><rect class="cls-32" x="456.56" y="88.86" width="4.25" height="22.93" rx="2.12"/><path class="cls-2" d="M508.12,130.22a1.37,1.37,0,0,1-1.27-.88,37,37,0,0,1-2.33-10.85V102.54a1.36,1.36,0,0,1,2.72,0v15.83a34.27,34.27,0,0,0,2.16,10,1.36,1.36,0,0,1-.79,1.76A1.41,1.41,0,0,1,508.12,130.22Z"/><path class="cls-24" d="M531.07,17.71H502.38A39.35,39.35,0,0,0,471.06,2.16H435.38c0,28.52,22.88,52.88,51.1,52.88h80.3C566.78,35.11,550.79,17.71,531.07,17.71Z"/><path class="cls-25" d="M550.67,23.51c9.25,6.54,15.3,18.55,15.3,30.74H484.8A51.54,51.54,0,0,1,444.2,34.5a51.41,51.41,0,0,0,31.9,11h65.65c10.45,0,16.37-13.63,9.45-21.46l-.53-.57"/><rect class="cls-44" x="453.54" y="-5.07" width="4.25" height="22.93" rx="2.12" transform="translate(462.07 -449.27) rotate(90)"/><ellipse class="cls-23" cx="337.53" cy="339.19" rx="0.96" ry="1.51"/><circle class="cls-23" cx="339.35" cy="336.6" r="0.52"/><circle class="cls-23" cx="339.01" cy="334.92" r="0.52"/><circle class="cls-23" cx="340.89" cy="334.74" r="0.43"/><circle class="cls-23" cx="340.19" cy="338.89" r="0.32"/><circle class="cls-23" cx="338.49" cy="338.89" r="0.77"/><circle class="cls-23" cx="337.05" cy="340.91" r="0.48"/><circle class="cls-23" cx="339.35" cy="340.43" r="0.34"/><circle class="cls-23" cx="340.67" cy="336.81" r="0.22"/><circle class="cls-23" cx="338.27" cy="341.39" r="0.22"/><circle class="cls-23" cx="339.69" cy="337.68" r="0.22"/><ellipse class="cls-16" cx="162.43" cy="364.29" rx="8.96" ry="3.08"/><circle class="cls-16" cx="179.44" cy="364.45" r="2.15"/><circle class="cls-16" cx="178.34" cy="372.11" r="1.1"/><circle class="cls-16" cx="171.18" cy="369.18" r="1.1"/><circle class="cls-16" cx="162.43" cy="372.11" r="1.07"/><circle class="cls-16" cx="161.69" cy="367.73" r="1.07"/><circle class="cls-16" cx="146.4" cy="363.99" r="2.61"/><circle class="cls-16" cx="153.47" cy="373.03" r="2.75"/><circle class="cls-16" cx="145.37" cy="368.06" r="2.75"/><ellipse class="cls-16" cx="555.88" cy="364.98" rx="8.96" ry="3.08"/><circle class="cls-16" cx="572.89" cy="365.14" r="2.15"/><circle class="cls-16" cx="571.79" cy="372.8" r="1.1"/><circle class="cls-16" cx="564.63" cy="369.87" r="1.1"/><circle class="cls-16" cx="561.82" cy="373.87" r="1.07"/><circle class="cls-16" cx="555.88" cy="372.8" r="1.07"/><circle class="cls-16" cx="555.14" cy="368.42" r="1.07"/><circle class="cls-16" cx="539.86" cy="364.68" r="2.61"/><circle class="cls-16" cx="546.92" cy="373.72" r="2.75"/><circle class="cls-16" cx="538.82" cy="368.74" r="2.75"/><ellipse class="cls-18" cx="579.86" cy="250.5" rx="1.69" ry="4.9"/><circle class="cls-18" cx="579.94" cy="241.19" r="1.18"/><circle class="cls-18" cx="584.13" cy="241.79" r="0.6"/><circle class="cls-18" cx="582.53" cy="245.71" r="0.6"/><circle class="cls-18" cx="584.72" cy="247.25" r="0.59"/><circle class="cls-18" cx="584.13" cy="250.5" r="0.59"/><circle class="cls-18" cx="581.74" cy="250.91" r="0.59"/><circle class="cls-18" cx="579.69" cy="259.27" r="1.43"/><circle class="cls-18" cx="584.64" cy="255.4" r="1.5"/><circle class="cls-18" cx="581.92" cy="259.84" r="1.5"/><ellipse class="cls-44" cx="444.36" cy="22.97" rx="1.23" ry="3.58" transform="translate(43.04 215.13) rotate(-28.54)"/><circle class="cls-44" cx="441.16" cy="16.96" r="0.86"/><circle class="cls-44" cx="444.06" cy="15.89" r="0.44"/><circle class="cls-44" cx="444.4" cy="18.96" r="0.44"/><circle class="cls-44" cx="446.34" cy="19.18" r="0.43"/><circle class="cls-44" cx="447.1" cy="21.47" r="0.43"/><circle class="cls-44" cx="445.71" cy="22.57" r="0.43"/><path class="cls-44" d="M446.82,27.74a1,1,0,0,1,1.41.41c.28.51.09,2.38-.42,2.66a1,1,0,0,1-1.41-.42C446.13,29.89,446.31,28,446.82,27.74Z"/><circle class="cls-44" cx="449.14" cy="24.44" r="1.1"/><path class="cls-44" d="M448.41,27.28a1.09,1.09,0,0,1,1.49.44c.29.53.1,2.44-.44,2.73s-1.2-1.15-1.48-1.69A1.08,1.08,0,0,1,448.41,27.28Z"/><ellipse class="cls-18" cx="580.23" cy="306.8" rx="1.69" ry="4.9"/><circle class="cls-18" cx="580.32" cy="297.49" r="1.18"/><circle class="cls-18" cx="584.51" cy="298.09" r="0.6"/><circle class="cls-18" cx="582.91" cy="302.01" r="0.6"/><circle class="cls-18" cx="585.1" cy="303.55" r="0.59"/><circle class="cls-18" cx="584.51" cy="306.8" r="0.59"/><circle class="cls-18" cx="582.12" cy="307.21" r="0.59"/><circle class="cls-18" cx="580.07" cy="315.57" r="1.43"/><circle class="cls-18" cx="585.01" cy="311.7" r="1.5"/><circle class="cls-18" cx="582.29" cy="316.14" r="1.5"/><path class="cls-2" d="M616,320.4a.62.62,0,0,1-.62-.62V274.65A.62.62,0,0,1,616,274a.62.62,0,0,1,.62.62v45.13A.62.62,0,0,1,616,320.4Z"/><path class="cls-2" d="M612.49,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,612.49,319.16Z"/><path class="cls-2" d="M608.89,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,608.89,319.16Z"/><path class="cls-2" d="M605.3,316.67a.62.62,0,0,1-.63-.62V279a.63.63,0,0,1,1.25,0v37.05A.62.62,0,0,1,605.3,316.67Z"/><path class="cls-2" d="M601.7,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,601.7,315.43Z"/><path class="cls-2" d="M598.1,312.32a.61.61,0,0,1-.62-.62V284a.61.61,0,0,1,.62-.62.62.62,0,0,1,.62.62V311.7A.62.62,0,0,1,598.1,312.32Z"/><path class="cls-2" d="M619.66,319.78a.62.62,0,0,1-.62-.62V276.51a.63.63,0,0,1,1.25,0v42.65A.63.63,0,0,1,619.66,319.78Z"/><path class="cls-2" d="M623.26,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,623.26,319.78Z"/><path class="cls-2" d="M626.86,317.29a.62.62,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.61.61,0,0,1,626.86,317.29Z"/><path class="cls-2" d="M630.46,316.05a.62.62,0,0,1-.62-.62V281.48a.62.62,0,0,1,1.24,0v33.95A.62.62,0,0,1,630.46,316.05Z"/><path class="cls-2" d="M634.06,311.7a.62.62,0,0,1-.62-.62V284.59a.62.62,0,1,1,1.24,0v26.49A.62.62,0,0,1,634.06,311.7Z"/><g class="cls-45"><path class="cls-2" d="M615,320.4a.62.62,0,0,1-.62-.62V274.65a.62.62,0,1,1,1.24,0v45.13A.62.62,0,0,1,615,320.4Z"/><path class="cls-2" d="M611.44,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,611.44,319.16Z"/><path class="cls-2" d="M607.84,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,607.84,319.16Z"/><path class="cls-2" d="M604.24,316.67a.62.62,0,0,1-.62-.62V279a.62.62,0,0,1,1.24,0v37.05A.62.62,0,0,1,604.24,316.67Z"/><path class="cls-2" d="M600.64,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,600.64,315.43Z"/><path class="cls-2" d="M597,310.46a.62.62,0,0,1-.62-.62V285.21a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v24.63A.62.62,0,0,1,597,310.46Z"/><path class="cls-2" d="M618.61,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,618.61,319.78Z"/><path class="cls-2" d="M622.21,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,622.21,319.78Z"/><path class="cls-2" d="M625.81,317.29a.61.61,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.62.62,0,0,1,625.81,317.29Z"/><path class="cls-2" d="M629.41,316.05a.63.63,0,0,1-.63-.62V281.48a.63.63,0,0,1,1.25,0v33.95A.62.62,0,0,1,629.41,316.05Z"/><path class="cls-2" d="M633,313a.63.63,0,0,1-.62-.63V284.59a.63.63,0,0,1,1.25,0v27.73A.63.63,0,0,1,633,313Z"/></g><path class="cls-2" d="M332.3,337.92H261.69a21.89,21.89,0,0,1-21.87-21.87,1.24,1.24,0,0,1,2.48,0,19.41,19.41,0,0,0,19.39,19.39H332.3a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-44" d="M487.69,9.36a2.27,2.27,0,0,1-.72-.12l-6.62-2.32a31.93,31.93,0,0,0-10.57-1.79H440.87a2.18,2.18,0,1,1,0-4.35h28.91a36.12,36.12,0,0,1,12,2l6.61,2.31a2.18,2.18,0,0,1-.71,4.23Z"/><path class="cls-44" d="M447.38,35.83a2.19,2.19,0,0,1-1.63-.73c-7.95-9-9.87-21.16-9.95-21.67a2.18,2.18,0,1,1,4.3-.66h0c0,.11,1.82,11.42,8.91,19.45a2.17,2.17,0,0,1-1.63,3.61Z"/><path class="cls-2" d="M523.49,18.28h-6.17a1.37,1.37,0,0,1,0-2.73h6.17a1.37,1.37,0,1,1,0,2.73Z"/><path class="cls-2" d="M566.78,55.61H485.61a51.89,51.89,0,0,1-37.49-16.16A54.5,54.5,0,0,1,432.61,1.36,1.36,1.36,0,0,1,434,0H470a41.13,41.13,0,0,1,32.32,15.55h9a1.37,1.37,0,0,1,0,2.73h-9.69a1.32,1.32,0,0,1-1.07-.53A38.4,38.4,0,0,0,470,2.73H435.35a51.86,51.86,0,0,0,14.72,34.82,49.19,49.19,0,0,0,35.54,15.33h79.78c-.72-18.89-16.32-34.6-34.7-34.6h-1.44a1.37,1.37,0,1,1,0-2.73h1.44c20.3,0,37.45,17.72,37.45,38.7A1.36,1.36,0,0,1,566.78,55.61Z"/><path class="cls-34" d="M217,257.27h88.39a0,0,0,0,1,0,0v24.27a0,0,0,0,1,0,0H227.6A10.63,10.63,0,0,1,217,270.91V257.27A0,0,0,0,1,217,257.27Z"/><rect class="cls-5" x="216.97" y="180.49" width="139.42" height="92.63" rx="7.36"/><path class="cls-46" d="M356.39,253.49v9.11a9.7,9.7,0,0,1-9.69,9.7h-120a9.7,9.7,0,0,1-9.69-9.7v-9.11a9.69,9.69,0,0,0,9.69,9.69h120A9.69,9.69,0,0,0,356.39,253.49Z"/><line class="cls-5" x1="216.97" y1="195.71" x2="350.96" y2="195.71"/><path class="cls-2" d="M348.89,274.35H224.47a8.75,8.75,0,0,1-8.74-8.73V188a8.75,8.75,0,0,1,8.74-8.73H348.89a8.75,8.75,0,0,1,8.74,8.73v77.64A8.75,8.75,0,0,1,348.89,274.35ZM224.47,181.73a6.26,6.26,0,0,0-6.26,6.25v77.64a6.27,6.27,0,0,0,6.26,6.26H348.89a6.27,6.27,0,0,0,6.26-6.26V188a6.26,6.26,0,0,0-6.26-6.25Z"/><path class="cls-2" d="M344.75,196.64H217a.93.93,0,1,1,0-1.86H344.75a.93.93,0,1,1,0,1.86Z"/><circle class="cls-47" cx="228.01" cy="188.79" r="2.28"/><circle class="cls-48" cx="236.44" cy="188.72" r="2.28"/><circle class="cls-49" cx="244.86" cy="188.64" r="2.28"/><path class="cls-2" d="M227.65,191.49h-.31a2.82,2.82,0,0,1-2.48-3.1,2.73,2.73,0,0,1,1-1.88,2.8,2.8,0,1,1,1.75,5Zm0-4.56a1.77,1.77,0,0,0-1.75,1.56,1.76,1.76,0,1,0,1.95-1.55Z"/><path class="cls-2" d="M236.08,191.42h-.32a2.81,2.81,0,0,1,.63-5.58,2.8,2.8,0,0,1,2.47,3.1A2.81,2.81,0,0,1,236.08,191.42Zm0-4.56a1.76,1.76,0,1,0,1.75,1.95,1.77,1.77,0,0,0-.37-1.29,1.74,1.74,0,0,0-1.18-.65h-.2Z"/><path class="cls-2" d="M244.5,191.35a1.62,1.62,0,0,1-.31,0,2.76,2.76,0,0,1-1.88-1,2.81,2.81,0,0,1-.6-2.07,2.77,2.77,0,0,1,1-1.88,2.82,2.82,0,0,1,2.06-.59,2.82,2.82,0,0,1,2.48,3.1,2.86,2.86,0,0,1-1,1.88A2.78,2.78,0,0,1,244.5,191.35Zm0-4.56a1.75,1.75,0,0,0-1.74,1.56,1.77,1.77,0,0,0,1.55,1.94,1.75,1.75,0,0,0,1.29-.37,1.76,1.76,0,0,0-.9-3.12Z"/><line class="cls-50" x1="264.05" y1="229.89" x2="264.06" y2="223.98"/><path class="cls-2" d="M273.69,217.59a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,222.38a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,227.18a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><path class="cls-2" d="M273.69,235.35a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,240.14a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,244.94a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><rect class="cls-51" x="257.48" y="212.17" width="8.09" height="1.55" rx="0.77" transform="translate(17.78 446.02) rotate(-82.87)"/><rect class="cls-51" x="260.13" y="216.69" width="8.09" height="1.55" rx="0.77" transform="translate(15.61 452.61) rotate(-82.87)"/><rect class="cls-51" x="255.62" y="241.14" width="4.64" height="0.89" rx="0.44" transform="translate(-13.78 467.56) rotate(-82.87)"/><line class="cls-50" x1="267.43" y1="233.8" x2="267.44" y2="227.89"/><path class="cls-52" d="M267.46,221.23l0-8.57a4.25,4.25,0,0,0-4.23-4.27h0l-29.82-.06a4.26,4.26,0,0,0-4.28,4.23v0l-.07,36.07a4.26,4.26,0,0,0,4.23,4.28h0l29.82.06a4.26,4.26,0,0,0,4.28-4.23v-7.59"/><path class="cls-53" d="M230.14,229.91a.94.94,0,0,1-.95-.92l-.11-16.73c-.07-4.25,3.15-4.42,7.4-4.5a.94.94,0,1,1,.27,1.87h-.23a5.85,5.85,0,0,0-5.72,6l.26,13.36A1,1,0,0,1,230.14,229.91Z"/><ellipse class="cls-53" cx="231.23" cy="226.12" rx="1.13" ry="1.42" transform="translate(-4.31 4.49) rotate(-1.1)"/><circle class="cls-53" cx="232.51" cy="224.11" r="0.3"/><circle class="cls-54" cx="232.1" cy="228.38" r="0.36"/><circle class="cls-53" cx="233.33" cy="226.37" r="0.56"/><circle class="cls-53" cx="231" cy="219.97" r="0.53"/><circle class="cls-53" cx="231.44" cy="222.62" r="0.15"/><circle class="cls-53" cx="232.51" cy="217.27" r="0.47"/><circle class="cls-53" cx="232.33" cy="214.58" r="0.3"/><circle class="cls-53" cx="232.76" cy="211.34" r="0.79"/><path class="cls-2" d="M262.79,253.07h0L232.94,253a5,5,0,0,1-3.57-1.49,5,5,0,0,1-1.44-3.55l.07-36.08a5,5,0,0,1,5-5h0l29.83.06a5,5,0,0,1,5,5v8.57h0l-.06,27.54a5,5,0,0,1-1.49,3.56A4.94,4.94,0,0,1,262.79,253.07ZM233,208.39a3.5,3.5,0,0,0-3.49,3.47L229.45,248a3.47,3.47,0,0,0,3.47,3.51l29.85.06a3.53,3.53,0,0,0,2.48-1,3.44,3.44,0,0,0,1-2.46l.08-36.13a3.51,3.51,0,0,0-3.49-3.5L233,208.39Zm34.09,12.13h0Z"/><path class="cls-55" d="M262.75,236h0a1.19,1.19,0,0,1,1.2,1.19l.05,9.2a1.2,1.2,0,0,1-1.19,1.2h0a1.19,1.19,0,0,1-1.2-1.19l-.05-9.2A1.19,1.19,0,0,1,262.75,236Z"/><path class="cls-5" d="M231.74,226.78h0a.92.92,0,0,1,.92.92l0,7.07a.92.92,0,0,1-.91.92h0a.92.92,0,0,1-.93-.91l0-7.07A.93.93,0,0,1,231.74,226.78Z"/><path class="cls-34" d="M71.77,275.23v8.18l15.11,5.29s3.39,13,16.45,13,15.27-17.42,15.27-17.42Z"/><rect class="cls-5" x="55.12" y="233.44" width="9.07" height="72.78" transform="translate(-215.16 240.76) rotate(-71.49)"/><path class="cls-2" d="M92.73,286.79a1,1,0,0,1-.35-.06l-69-23.1a1.07,1.07,0,0,1-.63-.55,1.09,1.09,0,0,1-.06-.85l2.88-8.6a1.09,1.09,0,0,1,1.39-.69L96,276a1.1,1.1,0,0,1,.63.55,1.11,1.11,0,0,1,.06.84L93.77,286A1.09,1.09,0,0,1,92.73,286.79Zm-67.62-24.9L92,284.29l2.18-6.51-66.92-22.4Z"/><circle class="cls-5" cx="15.54" cy="255.17" r="14.43"/><path class="cls-2" d="M15.57,270.7a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,15.57,270.7Zm-.05-28.87a13.35,13.35,0,0,0-12.79,9.65A13.33,13.33,0,0,0,22,266.84a13.33,13.33,0,0,0-2.76-24.48A13.47,13.47,0,0,0,15.52,241.83Z"/><circle class="cls-20" cx="15.54" cy="255.17" r="7.98"/><path class="cls-2" d="M15.56,264.25a9.09,9.09,0,1,1,4.37-1.13A9,9,0,0,1,15.56,264.25Zm0-16a6.81,6.81,0,0,0-3.31.86,6.9,6.9,0,0,0-2.7,9.35,6.88,6.88,0,1,0,7.93-9.94A7,7,0,0,0,15.53,248.29Z"/><circle class="cls-34" cx="123.54" cy="210.16" r="12.18"/><rect class="cls-5" x="108.02" y="204.21" width="9.07" height="72.78" transform="translate(165.2 500.96) rotate(-166.36)"/><path class="cls-56" d="M122.67,217.83l-1.1,4.52a14.42,14.42,0,0,1-8.65-2.82l.93-3.85A14.45,14.45,0,0,0,122.67,217.83Z"/><path class="cls-2" d="M108.38,278.14a.82.82,0,0,1-.26,0L99.31,276a1.09,1.09,0,0,1-.81-1.33l17.16-70.73a1.08,1.08,0,0,1,.5-.68,1.1,1.1,0,0,1,.83-.13l8.82,2.14a1.1,1.1,0,0,1,.81,1.33l-17.17,70.72a1.11,1.11,0,0,1-1.07.85Zm-7.48-4.06,6.67,1.62,16.65-68.58-6.68-1.62Z"/><circle class="cls-5" cx="121.67" cy="203.06" r="14.43"/><path class="cls-2" d="M121.69,218.59a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,121.69,218.59Zm0-28.86A13.32,13.32,0,0,0,110,209.51a13.33,13.33,0,1,0,11.64-19.78Z"/><circle class="cls-20" cx="121.67" cy="203.06" r="7.98"/><path class="cls-2" d="M121.68,212.14a9.08,9.08,0,1,1,7.93-13.47h0a9.07,9.07,0,0,1-7.93,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0A6.91,6.91,0,0,0,121.65,196.18Z"/><circle class="cls-5" cx="104.16" cy="283.21" r="14.43"/><path class="cls-2" d="M104.19,298.74a15.53,15.53,0,1,1,13.57-23.05h0a15.53,15.53,0,0,1-13.57,23.05Zm0-28.87a13.21,13.21,0,0,0-6.43,1.67,13.33,13.33,0,1,0,18.12,5.22,13.4,13.4,0,0,0-11.69-6.89Z"/><circle class="cls-20" cx="104.16" cy="283.21" r="7.98"/><path class="cls-2" d="M104.17,292.29a9.08,9.08,0,1,1,7.94-13.47h0a9.08,9.08,0,0,1-7.94,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0a6.83,6.83,0,0,0-4.12-3.28A6.94,6.94,0,0,0,104.15,276.33Z"/><path class="cls-2" d="M520.55,311.3a1.17,1.17,0,0,1-1.17-1.17V279.48a1.17,1.17,0,0,1,2.34,0v30.65A1.17,1.17,0,0,1,520.55,311.3Z"/><path class="cls-2" d="M520.55,273.51a1.17,1.17,0,0,1-1.17-1.17v-5.8a1.17,1.17,0,0,1,2.34,0v5.8A1.17,1.17,0,0,1,520.55,273.51Z"/><path class="cls-57" d="M538.86,152.62c0,19.29-14.61,34.93-32.68,35h-1.33c-17.68-.07-32.1-15.12-32.65-34l-.31-14.83c1.42-5.57,5.44-6.1,10.47-7.16h46c5,1.05,9.05.09,10.48,5.7Z"/><path class="cls-58" d="M482,139.28h47.82v10.57a23.91,23.91,0,0,1-23.91,23.91h0A23.91,23.91,0,0,1,482,149.85V139.28Z"/><path class="cls-59" d="M510.83,173.21a23.91,23.91,0,0,1-28.34-18.45,23.3,23.3,0,0,1-.52-4.92V139.28h9.93v10.56A23.9,23.9,0,0,0,510.83,173.21Z"/><rect class="cls-5" x="490.11" y="139.28" width="39.66" height="14.51"/><rect class="cls-60" x="490.11" y="139.28" width="39.66" height="6.05"/><path class="cls-61" d="M527.58,155.37v2.78c0,8.41-6.81,14-15.22,14-2.65,0-5.15,1.84-7.32.63l-.11-.92a16.81,16.81,0,0,1-.28-2.93,15.48,15.48,0,0,1,22.84-13.59Z"/><path class="cls-62" d="M515.17,172.05a15.06,15.06,0,0,1-2.76.24c-2.66,0-5.15,1.85-7.32.63L505,172a16.06,16.06,0,0,1-.28-2.93,15.65,15.65,0,0,1,.27-2.9C506.9,170.34,510.64,171,515.17,172.05Z"/><path class="cls-2" d="M505,173.25a.8.8,0,0,1-.79-.66,16.28,16.28,0,0,1,23.75-17.36.81.81,0,0,1-.77,1.42,14.67,14.67,0,0,0-21.4,15.64.79.79,0,0,1-.64.94Z"/><path class="cls-63" d="M508.67,161.49a.34.34,0,0,1-.23-.08.4.4,0,0,1-.09-.56A15,15,0,0,1,519,154.91a.4.4,0,1,1,.07.79A14.19,14.19,0,0,0,509,161.33.36.36,0,0,1,508.67,161.49Z"/><ellipse class="cls-63" cx="510.25" cy="160.57" rx="1.52" ry="0.97" transform="translate(86.51 487.04) rotate(-55.08)"/><circle class="cls-63" cx="512.9" cy="159.8" r="0.49"/><circle class="cls-63" cx="511.91" cy="162.43" r="0.49"/><path class="cls-2" d="M528.5,155.06H490.11a1.27,1.27,0,0,1-1.27-1.27V139.9a1.27,1.27,0,0,1,2.53,0v12.62H528.5a1.27,1.27,0,0,1,0,2.54Z"/><path class="cls-2" d="M506.93,174.94h-2.12a24.08,24.08,0,0,1-24.05-24v-9.42a3.41,3.41,0,0,1,3.41-3.41h43.39a3.41,3.41,0,0,1,3.41,3.4v9.41a24.05,24.05,0,0,1-24.05,24.06Zm-22.76-34.45a1,1,0,0,0-.7.29,1,1,0,0,0-.29.7v9.42a21.64,21.64,0,0,0,21.62,21.61h2.12a21.59,21.59,0,0,0,21.62-21.63v-9.4a1,1,0,0,0-1-1Z"/><path class="cls-5" d="M545.93,133.71h-2.72a2,2,0,0,1-2-1.63L533,89.3a2,2,0,0,1,2-2.39h2.72a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,545.93,133.71Z"/><path class="cls-64" d="M535,132.44h0a2,2,0,0,1-2-1.63L524.73,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,535,132.44Z"/><path class="cls-17" d="M535.58,82.54a27.59,27.59,0,1,0,27.58,27.58A27.58,27.58,0,0,0,535.58,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,535.58,130.24Z"/><path class="cls-21" d="M563.16,110.12c0,.53,0,1.07,0,1.6a27.58,27.58,0,0,0-55.07,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M535.81,138.56a28.84,28.84,0,1,1,28.84-28.84A28.87,28.87,0,0,1,535.81,138.56Zm0-55.18a26.34,26.34,0,1,0,26.33,26.34A26.37,26.37,0,0,0,535.81,83.38Z"/><path class="cls-2" d="M535.81,131.09a21.38,21.38,0,1,1,21.37-21.37A21.4,21.4,0,0,1,535.81,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.88,18.88,0,0,0,535.81,90.85Z"/><path class="cls-5" d="M485.85,133.71h-2.72a2,2,0,0,1-2-1.63L472.9,89.3a2,2,0,0,1,2-2.39h2.71a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,485.85,133.71Z"/><path class="cls-64" d="M474.88,132.44h0a2,2,0,0,1-2-1.63L464.65,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,474.88,132.44Z"/><path class="cls-17" d="M475.49,82.54a27.59,27.59,0,1,0,27.59,27.58A27.58,27.58,0,0,0,475.49,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,475.49,130.24Z"/><path class="cls-21" d="M503.08,110.12c0,.53,0,1.07-.06,1.6a27.58,27.58,0,0,0-55.06,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M475.72,138.56a28.84,28.84,0,1,1,28.84-28.84A28.88,28.88,0,0,1,475.72,138.56Zm0-55.18a26.34,26.34,0,1,0,26.34,26.34A26.37,26.37,0,0,0,475.72,83.38Z"/><path class="cls-2" d="M475.72,131.09a21.38,21.38,0,1,1,21.38-21.37A21.4,21.4,0,0,1,475.72,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.89,18.89,0,0,0,475.72,90.85Z"/><ellipse class="cls-5" cx="481.22" cy="176.24" rx="2.89" ry="1.66" transform="translate(162.51 577.56) rotate(-71.66)"/><circle class="cls-42" cx="486.45" cy="177.86" r="0.93"/><path class="cls-42" d="M483.61,178.8a.72.72,0,1,1,0,1.44.72.72,0,0,1,0-1.44Z"/><circle class="cls-42" cx="484.56" cy="172.87" r="0.95"/><path class="cls-2" d="M543.44,180.22a1.16,1.16,0,0,1-.87-.39L538,174.78a1.17,1.17,0,0,1,1.74-1.56l4.53,5.05a1.17,1.17,0,0,1-.09,1.65A1.19,1.19,0,0,1,543.44,180.22Z"/><path class="cls-2" d="M556,166.12a1.16,1.16,0,0,1-.87-.39l-4.53-5a1.17,1.17,0,0,1,1.74-1.56l4.53,5a1.17,1.17,0,0,1-.09,1.65A1.16,1.16,0,0,1,556,166.12Z"/><path class="cls-2" d="M525.26,189.2a1.17,1.17,0,0,1-1.1-.78L521.9,182a1.17,1.17,0,1,1,2.2-.77l2.26,6.39a1.16,1.16,0,0,1-.71,1.49A1.07,1.07,0,0,1,525.26,189.2Z"/><path class="cls-2" d="M533.49,187.45a1.17,1.17,0,0,1-1.1-.78l-1.46-4.14a1.17,1.17,0,0,1,2.21-.77l1.46,4.13a1.17,1.17,0,0,1-.72,1.49A1.07,1.07,0,0,1,533.49,187.45Z"/><path class="cls-2" d="M534.13,169.55a1.15,1.15,0,0,1-1-.62l-1.66-3.08a1.17,1.17,0,1,1,2-1.11l1.66,3.09a1.16,1.16,0,0,1-.47,1.58A1.25,1.25,0,0,1,534.13,169.55Z"/><path class="cls-2" d="M545.37,166.94a1.16,1.16,0,0,1-1-.48l-2.08-2.89a1.17,1.17,0,0,1,1.89-1.37l2.09,2.9a1.17,1.17,0,0,1-.27,1.62A1.15,1.15,0,0,1,545.37,166.94Z"/><path class="cls-2" d="M467.31,180.22a1.19,1.19,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5.05a1.17,1.17,0,1,1,1.74,1.56l-4.53,5.05A1.16,1.16,0,0,1,467.31,180.22Z"/><path class="cls-2" d="M454.75,166.12a1.16,1.16,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5a1.17,1.17,0,1,1,1.74,1.56l-4.53,5A1.16,1.16,0,0,1,454.75,166.12Z"/><path class="cls-2" d="M485.49,189.2a1.07,1.07,0,0,1-.39-.07,1.16,1.16,0,0,1-.71-1.49l2.26-6.39a1.17,1.17,0,1,1,2.2.77l-2.26,6.4A1.17,1.17,0,0,1,485.49,189.2Z"/><path class="cls-2" d="M477.26,187.45a1,1,0,0,1-.39-.07,1.17,1.17,0,0,1-.72-1.49l1.46-4.13a1.17,1.17,0,0,1,2.21.77l-1.46,4.14A1.17,1.17,0,0,1,477.26,187.45Z"/><path class="cls-2" d="M476.62,169.55a1.25,1.25,0,0,1-.55-.14,1.16,1.16,0,0,1-.47-1.58l1.66-3.09a1.17,1.17,0,1,1,2.05,1.11l-1.66,3.08A1.15,1.15,0,0,1,476.62,169.55Z"/><path class="cls-2" d="M465.38,166.94a1.15,1.15,0,0,1-.68-.22,1.17,1.17,0,0,1-.27-1.62l2.08-2.9a1.17,1.17,0,0,1,1.9,1.37l-2.08,2.89A1.16,1.16,0,0,1,465.38,166.94Z"/><path class="cls-2" d="M473.22,156.66a1.17,1.17,0,0,1-1-1.72l1.66-3.09a1.17,1.17,0,0,1,2.06,1.11l-1.66,3.09A1.16,1.16,0,0,1,473.22,156.66Z"/><path class="cls-2" d="M462,154.06a1.2,1.2,0,0,1-.68-.22,1.16,1.16,0,0,1-.27-1.63l2.08-2.89a1.16,1.16,0,0,1,1.63-.27,1.18,1.18,0,0,1,.27,1.63l-2.08,2.89A1.17,1.17,0,0,1,462,154.06Z"/><path class="cls-2" d="M542.11,155.08a1.16,1.16,0,0,1-1-.61l-1.66-3.09a1.17,1.17,0,1,1,2.05-1.11l1.67,3.09a1.17,1.17,0,0,1-1,1.72Z"/><path class="cls-2" d="M553.35,152.48a1.17,1.17,0,0,1-1-.49l-2.08-2.89a1.17,1.17,0,1,1,1.9-1.36l2.08,2.89a1.17,1.17,0,0,1-.27,1.63A1.13,1.13,0,0,1,553.35,152.48Z"/><circle class="cls-1" cx="638.68" cy="220.25" r="8.47"/><path class="cls-5" d="M647.15,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S647.15,215.57,647.15,220.25Z"/><path class="cls-2" d="M638.68,229.93a9.69,9.69,0,1,1,9.69-9.68A9.69,9.69,0,0,1,638.68,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,638.68,213Z"/><circle class="cls-1" cx="598.1" cy="220.25" r="8.47"/><path class="cls-5" d="M606.57,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S606.57,215.57,606.57,220.25Z"/><path class="cls-2" d="M598.1,229.93a9.69,9.69,0,1,1,9.68-9.68A9.7,9.7,0,0,1,598.1,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,598.1,213Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/svg/login-bg-dark.svg b/src/assets/svg/login-bg-dark.svg
new file mode 100644
index 0000000..888da7a
--- /dev/null
+++ b/src/assets/svg/login-bg-dark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1080" viewBox="0 0 6395 1080">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_73" data-name="Rectangle 73" width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.631" y1="0.5" x2="0.958" y2="0.488" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2e364a"/>
+      <stop offset="1" stop-color="#2c344a"/>
+    </linearGradient>
+  </defs>
+  <g id="Web_1920_1" data-name="Web 1920 – 1" clip-path="url(#clip-Web_1920_1)">
+    <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+      <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+        <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383)" fill="#2d3750"/>
+        <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022h5599.8V0h759.7s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/svg/login-bg.svg b/src/assets/svg/login-bg.svg
new file mode 100644
index 0000000..7b66baf
--- /dev/null
+++ b/src/assets/svg/login-bg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1079" viewBox="0 0 6395 1079">
+  <defs>
+    <clipPath id="clip-path">
+      <rect  width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.747" y1="0.222" x2="0.973" y2="0.807" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2c41b4"/>
+      <stop offset="1" stop-color="#1b4fab"/>
+    </linearGradient>
+  </defs>
+  <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+    <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+      <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383 0)" fill="#f1f5f8"/>
+      <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022H-2631.1V0H-1871.4s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/svg/net-error.svg b/src/assets/svg/net-error.svg
new file mode 100644
index 0000000..81f2004
--- /dev/null
+++ b/src/assets/svg/net-error.svg
@@ -0,0 +1 @@
+<svg id="ac370e99-250f-4203-ae2c-c306a69114f3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1144" height="697.99" viewBox="0 0 1144 697.99"><defs><linearGradient id="b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8" x1="2612.03" y1="795.18" x2="2612.03" y2="399.52" gradientTransform="matrix(-1, 0, 0, 1, 3436, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>personal settings</title><path d="M1172,516.31a180.56,180.56,0,0,1-26.12,93.88c0,34.62-16.14,66-42.32,88.87a144.74,144.74,0,0,1-21.08,15.28c-.3.19-.61.37-.92.55-.56.33-1.12.66-1.69,1l-.53.31h0A164.61,164.61,0,0,1,998.24,737H245.17q-9,0-17.84-.72a211.15,211.15,0,0,1-61.06-14.14q-5.72-2.26-11.22-4.86-2.62-1.23-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66A187.42,187.42,0,0,1,112.2,689.7c-34-29.23-55.08-69.61-55.08-114.21A180.5,180.5,0,0,1,28,476.82c0-99.14,79.24-179.51,177-179.51,3,0,6,.09,9,.25.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62,72.24-61.9,177.82-100.92,295.43-100.92,98.82,0,189.15,27.55,258.34,73.07A174.18,174.18,0,0,1,920,170.6c97.74,0,177,80.37,177,179.51a184.9,184.9,0,0,1-1,18.78A180,180,0,0,1,1172,516.31Z" transform="translate(-28 -101)" fill="#0960bd" opacity="0.1"/><g opacity="0.2"><path d="M166.37,720.79c0,.46-.05.91-.1,1.35q-5.72-2.26-11.22-4.86a9.1,9.1,0,0,1-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66a13.68,13.68,0,0,1,.81-1.46c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.37,720.79Z" transform="translate(-28 -101)" fill="#3f3d56"/><path d="M166.91,703.67a16.88,16.88,0,0,1-2.51,8.48c-2.06,3.25-5.19,5.29-8.64,5.18l-.71-.05a9.1,9.1,0,0,1-5.19-2.53,12.53,12.53,0,0,1-2.39-3.12,17.55,17.55,0,0,1,.54-17.12c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.91,703.67Z" transform="translate(-28 -101)" fill="#3f3d56"/><ellipse cx="156.75" cy="686.21" rx="14.01" ry="10.7" transform="translate(-562.06 720.24) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.29" cy="669.09" rx="14.01" ry="10.7" transform="translate(-544.43 704.2) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.83" cy="651.97" rx="14.01" ry="10.7" transform="matrix(0.03, -1, 1, 0.03, -526.79, 688.16)" fill="#3f3d56"/><path d="M121.47,533.55a49.66,49.66,0,0,1-3.8-6l28.26-3.73-30.42-.73a51.38,51.38,0,0,1,.31-40.64l40.12,22.45-36.75-28.85a51.28,51.28,0,1,1,82.84,60,51.12,51.12,0,0,1,5.55,9.53l-37.09,17.81,39.33-11.83A51.34,51.34,0,0,1,200,599.47a51.28,51.28,0,1,1-80.56-2.54,51.28,51.28,0,0,1,2-63.38Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M212,568.13a51.06,51.06,0,0,1-12,31.34,51.28,51.28,0,1,1-80.56-2.54C112.87,588,212.18,562.37,212,568.13Z" transform="translate(-28 -101)" opacity="0.1"/></g><path d="M986,239.41V718.59A18.41,18.41,0,0,1,967.59,737H232.41a18.13,18.13,0,0,1-5.08-.72A18.38,18.38,0,0,1,214,718.59V504.75c0-1.09,0-2.17,0-3.25V297.56c.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62H967.59A18.41,18.41,0,0,1,986,239.41Z" transform="translate(-28 -101)" fill="#fff"/><rect x="712.17" y="182.23" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="188.24" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="189.55" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="200.21" r="6.66" fill="#fff"/><rect x="712.17" y="419.28" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="425.29" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="426.6" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="437.26" r="6.66" fill="#fff"/><rect x="712.17" y="537.8" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="543.82" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="545.13" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="555.78" r="6.66" fill="#fff"/><rect x="294" y="159.59" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="189.55" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="219.52" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><g opacity="0.5"><rect x="294" y="278.11" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="308.08" width="167" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="338.04" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/></g><rect x="294" y="396.64" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="426.6" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="456.57" width="139" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="515.16" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="545.13" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="575.09" width="180" height="21.31" rx="10.65" fill="#0960bd"/><line x1="260" y1="259.99" x2="912" y2="259.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="380.49" x2="912" y2="380.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="500.99" x2="912" y2="500.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="624.49" x2="912" y2="624.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><ellipse cx="795" cy="687.49" rx="147.68" ry="10.5" fill="#0960bd" opacity="0.1"/><circle cx="70.52" cy="141.18" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="160.67" cy="21.63" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="153.34" cy="103.76" r="36.25" fill="#0960bd" opacity="0.1"/><rect x="712.17" y="300.75" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="306.77" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><path d="M753.17,762c1.57-.23,3.14-.55,4.68-.91a14.62,14.62,0,0,1-1.32,4.44c-1.53,2.9-4.52,4.65-7.27,6.43a2.25,2.25,0,0,0-2.84-.19c-3.31,2-5.95,4.82-9.46,6.54-1.23.6-2.51,1.08-3.71,1.75a20,20,0,0,0-7,7.23c-1,1.55-1.81,3.59-.83,5.13a4.44,4.44,0,0,0,1.42,1.27,8.08,8.08,0,0,0,4.87,1.45c1-.09,2-.47,3.09-.64,1.37-.24,2.77-.12,4.15-.24a24.26,24.26,0,0,0,5.84-1.51l6.87-2.4a39.68,39.68,0,0,0,5.65-2.32c1.09-.59,2.12-1.28,3.23-1.82a26,26,0,0,1,3.86-1.36l3.9-1.14a3.8,3.8,0,0,1,1.76-.23c.54.1,1,.44,1.55.58a4.68,4.68,0,0,0,2.5-.24l4.52-1.28a8.52,8.52,0,0,0,2.69-1.12c2.07-1.47,2.44-4.39,2.43-6.94A52.57,52.57,0,0,0,782.45,763a3.57,3.57,0,0,0-1.47,1.11,21.44,21.44,0,0,0-1.49-1.87,22.31,22.31,0,0,1-4.51-8.33,14.66,14.66,0,0,0,4-4.52c-2.39-9.11-4.84-18.36-9.7-26.4-1.59-2.62-3.41-5.08-5-7.66-4.73-7.5-5.7-17-11.11-24a4.16,4.16,0,0,1,0-4.88c.62-.82,1.62-1.59,1.43-2.61-.14-.73-.9-1.4-.61-2.08.14-.33.48-.51.74-.75.92-.86.8-2.31.89-3.57.2-3.18,2.09-6,3.91-8.56a5.26,5.26,0,0,1,1.44-1.56c.49-.3,1.07-.44,1.56-.74,1.72-1.09,1.6-3.62,2.42-5.5,1.08-2.48,3.8-3.73,5.58-5.74,2.27-2.56,2.85-6.12,5.24-8.35a6.13,6.13,0,0,1,.79-.64A40.24,40.24,0,0,0,775.15,658c-.23,13.53,3.13,27.53,1.56,41-1.24,10.66,5.27,21.29,14.5,26.62a69.31,69.31,0,0,0,11.29,4.79c5.78,2.07,11.54,4.2,17.21,6.58q6,2.52,11.84,5.41a147.35,147.35,0,0,1,14,7.81c5.56,3.57,11.13,7.19,15.08,12.52a11.94,11.94,0,0,0,6.66-2.45c1.52,1.2,3.36,2.11,4.79,3.44a14.46,14.46,0,0,1,3.8,7.46l-.6,0c.07,1.33.13,2.66.2,4a1.7,1.7,0,0,1-.15,1,1.81,1.81,0,0,1-.54.49l-3.08,2.09c-2.24,1.51-4.71,3.42-4.83,6.13a3.12,3.12,0,0,0,.67,2.19,4.72,4.72,0,0,0,2.74,1.24c5.36,1.13,10.85,2.23,16.28,1.5,2.58-.35,5.25-1.2,6.93-3.2,1.54-1.82,2-4.29,2.42-6.64.67-4,1.23-8.09,1.67-12.15a26.86,26.86,0,0,1,1.66-8.07,1,1,0,0,1,.43-.54c.23-.1.5,0,.74-.1s.4-.47.48-.77a47.71,47.71,0,0,0,1.43-12.08,8.14,8.14,0,0,0-.47-3.11,6.28,6.28,0,0,0-4.28-3.3,34.09,34.09,0,0,0-5.53-.66,27.46,27.46,0,0,1-4.59-.84,4.2,4.2,0,0,0-1.91-.25,1.34,1.34,0,0,0-1.16,1.33,1.71,1.71,0,0,0,.24.65l-1.56-.31c-1.26-.23-3-.78-4.89-1.24q0-.48.06-1a1.89,1.89,0,0,0-1.06-1.72l-26.42-14.12-4.94-2.64c-10.82-5.79-22-11.14-32.85-16.93-.72.22-1.32-.61-1.53-1.35s-.36-1.62-1.05-1.95c-.34-.16-.79-.15-1-.44a1.19,1.19,0,0,1-.19-.89c.35-5.27,4.12-10.13,3.37-15.35-.32-2.23-1.47-4.43-1-6.62.35-1.51,1.43-2.74,2-4.18,1.3-3.22,0-7.09,1.42-10.24a23.71,23.71,0,0,0,1.91-6.52,44.79,44.79,0,0,1,4-12.94,23.35,23.35,0,0,1,3.72-5.67c.79-.86,1.68-1.63,2.44-2.52,2.3-2.75,3.15-6.41,3.8-10,1.18-6.41,2-13.06.52-19.42-.5-2.16-1.26-4.31-1.23-6.53,0-2.66,1.07-5.71-.22-7.84a6.9,6.9,0,0,0,2.49-4.27,5.52,5.52,0,0,1,.35-1.77,5.14,5.14,0,0,1,1.67-1.5,6.91,6.91,0,0,0,2.58-6.87c1.37.62,2.81-.77,3.46-2.14s1.14-3,2.53-3.62c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.17,2.28-2.46,5.51-3.73,8.5-5.24,8.86-4.51,16.08-11.64,23.15-18.66a78.38,78.38,0,0,0,10-11.26c.79-1.17,1.51-2.38,2.19-3.62l.18-.09.06.22c.11.44.24.88.37,1.31.32,1,.68,2.07,1,3.09,1.08,3,2.25,6.2,4.45,8.47a10.48,10.48,0,0,0,2.28,1.77,15.3,15.3,0,0,0,5.87,1.76c.78.1,1.57.16,2.36.2s1.58.07,2.36.09l16.18.43c-5.56-8.06-6-18.54-5.63-28.35.93-25.2,5.84-50.63,1.28-75.43-.55-3-1.28-6-3.11-8.41-2.4-3.15-6.34-4.67-10.18-5.56s-7.83-1.32-11.42-2.93c-3-1.37-5.76-3.57-9-4.29a19.82,19.82,0,0,0-7.2.12q-4.38.65-8.71,1.54l-.7.15H874l-.48.11-.13,0-.43.1-.16,0-.4.11-.18.05-.37.12-.21.07-.34.11-.22.09-.32.12-.24.1-.29.13-.24.12-.27.13-.24.14-.25.14-.24.16-.23.15-.24.17-.2.16-.23.2-.19.17a2.39,2.39,0,0,0-.22.23l-.17.17a3,3,0,0,0-.22.28c0,.05-.09.1-.13.16s-.18.26-.27.41l0,.06a6.09,6.09,0,0,0-.55,1.19c-.07.21-.14.42-.19.63a9.54,9.54,0,0,0-.22,1.3c0,.22,0,.45-.05.67,0,.44,0,.89,0,1.33a19.62,19.62,0,0,0,.25,2.24,24.37,24.37,0,0,0-1.16,41.23,10.94,10.94,0,0,1,.08,1.19v.26a33,33,0,0,1-.44,4.22,58.66,58.66,0,0,0-12-1.07c-2.4,0-4.82.22-7.24.41a109.13,109.13,0,0,1-7.24-9.8l-5.34-7.83a74.58,74.58,0,0,1-5-8c-1.31-2.54-2.33-5.24-3.79-7.7-3-5.07-7.9-9.38-8.51-15.25l-1.41.29c-.77-1.26-1.74-2.59-2.1-3.32a65.55,65.55,0,0,1-4.44-13c-.49-2.32-.86-4.74-2.13-6.74a15.19,15.19,0,0,0-3.11-3.3,20.57,20.57,0,0,0-6.66-4.2,8.61,8.61,0,0,0-6.81.4,10,10,0,0,0-1-.4,8.25,8.25,0,0,0-7.56.88c-2.1,1.61-3,4.37-3.32,7a17.28,17.28,0,0,0,1.78,10.62c2,3.58,5.58,6,8.54,8.84a34.59,34.59,0,0,1,5.37,6.68,73.16,73.16,0,0,1-.41,16.21c-.38,2.3-1,4.56-1.18,6.88-.73,8.38,3.63,16.76,2.07,25a6.1,6.1,0,0,0,2.83,6.47c2.24,1.21,4.86,1.37,7.32,2,4.83,1.24,9,4.33,13.88,5.48,2.25.54,4.59.64,6.83,1.24l.35.11a16.27,16.27,0,0,0-3.59,6.82c-1,4.2-.06,8.69-1.06,12.89-.82,3.46-2.88,6.48-4.91,9.41q-5.86,8.48-11.74,17a104.13,104.13,0,0,1-8.65,11.37c-5.39,5.89-14.69,10.56-17.43,17.64-.06-.17-.14-.34-.2-.51-3.88,2.85-5.33,8.16-8.42,11.85-1.51,1.79-3.37,3.24-5,4.9a56.54,56.54,0,0,0-5.53,6.87c-4.6,6.38-9.23,12.79-12.52,19.94-1.72,3.72-3.05,7.59-4.42,11.44-5.38,15.17-14.16,29.56-17.81,45.25-.89,3.83-3.22,7.29-3.57,11.21-.39,4.18,1.52,8.2,3.5,11.89,3,5.64,6.34,11.12,9,16.92,1.57,3.38,2.93,6.87,4.68,10.17,1.91,3.6,4.25,6.94,6.25,10.49C747.78,742,750.58,752.07,753.17,762Zm66.16-286.55-.48-.24A16.57,16.57,0,0,1,814,472c-4.31-4.6-6.16-11.53-7.51-17.72-.16-.74-.3-1.47-.43-2.21C811.29,459.5,816.23,467.18,819.33,475.47Z" transform="translate(-28 -101)" fill="url(#b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8)"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M883.31,738.67a13.69,13.69,0,0,1,4.67,1.46,11,11,0,0,1,4.06,5.48c2.18,5.38,2.63,11.3,2.73,17.11.08,4.69-.08,9.49-1.76,13.87a8.83,8.83,0,0,1-2.31,3.63,8.33,8.33,0,0,1-3.18,1.54c-2.51.69-5.41.68-7.46-.92-2.28-1.78-2.85-4.93-3.33-7.78-.65-3.84-1.57-7.93-4.43-10.58-2.12-2-5.16-3-6.7-5.42-1.84-2.91-.87-6.71.3-9.95,1-2.81,2.51-8.5,5.45-9.94S880.26,738.12,883.31,738.67Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M775,752.47a22.15,22.15,0,0,0,4.58,8.51c1.3,1.5,2.93,3.32,2.25,5.18a4.82,4.82,0,0,1-1.23,1.65c-9.66,9.44-23.17,14-36.57,15.72a1.29,1.29,0,0,1-.65,0c-.39-.17-.49-.67-.53-1.1a13.51,13.51,0,0,1,0-4.21c.65-3.27,3.52-5.58,6.33-7.39s5.88-3.55,7.44-6.5c1.95-3.66,1.13-8.43,3.45-11.86,1.88-2.79,5.38-4,8.71-4.5,1.15-.18,3.6-1.44,4.58-.86S774.66,751.32,775,752.47Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M884.63,738.33a1.33,1.33,0,0,1,1.16-1.32,4.35,4.35,0,0,1,1.91.24,26.5,26.5,0,0,0,4.59.85,34.07,34.07,0,0,1,5.54.65,6.27,6.27,0,0,1,4.29,3.27,8.12,8.12,0,0,1,.47,3.1,47.06,47.06,0,0,1-1.43,12c-.08.3-.2.65-.49.76s-.5,0-.73.11a.9.9,0,0,0-.43.54,26.42,26.42,0,0,0-1.67,8c-.44,4-1,8.06-1.67,12.06-.39,2.34-.88,4.8-2.42,6.6-1.69,2-4.36,2.83-6.94,3.18-5.44.72-10.93-.37-16.3-1.49a4.77,4.77,0,0,1-2.75-1.23,3.09,3.09,0,0,1-.67-2.18c.12-2.69,2.6-4.59,4.83-6.09l3.09-2.07a1.6,1.6,0,0,0,.54-.49,1.67,1.67,0,0,0,.15-1l-.2-4a11.33,11.33,0,0,1,9.87,6.14c.42.85.83,1.84,1.71,2.17a2.26,2.26,0,0,0,2.69-1.63,6.93,6.93,0,0,0-.09-3.47c-1.81-9.67-1.38-19.61-2.48-29.38a6.63,6.63,0,0,0-1-3.1C885.73,739.88,884.74,739.23,884.63,738.33Z" transform="translate(-28 -101)" fill="#f86d70"/><rect x="752.15" y="409.08" width="43.28" height="21.31" rx="10.65" transform="translate(1519.58 738.47) rotate(180)" fill="#0960bd"/><circle cx="746.12" cy="318.73" r="6.66" fill="#fff"/><path d="M750.11,775.82c-.45.75-1.16,1.33-1.58,2.1a1.8,1.8,0,0,0,.34,2.35,2.32,2.32,0,0,0,1.43.14,48.11,48.11,0,0,0,26-11.78,18.21,18.21,0,0,0,3.19-3.49c.85-1.29,1.57-2.87,3-3.41a51.92,51.92,0,0,1,1.34,11.45c0,2.54-.36,5.43-2.43,6.9a8.63,8.63,0,0,1-2.7,1.1l-4.52,1.28a4.81,4.81,0,0,1-2.51.24c-.53-.14-1-.48-1.55-.58a3.8,3.8,0,0,0-1.76.23l-3.91,1.14a24.86,24.86,0,0,0-3.86,1.35c-1.12.53-2.15,1.21-3.24,1.8a38.78,38.78,0,0,1-5.66,2.3l-6.87,2.39a24.91,24.91,0,0,1-5.85,1.5c-1.38.12-2.79,0-4.16.23-1,.18-2,.56-3.1.64a8.11,8.11,0,0,1-4.87-1.44,4.53,4.53,0,0,1-1.42-1.26c-1-1.53-.13-3.55.83-5.1a20.16,20.16,0,0,1,7-7.18c1.2-.66,2.49-1.14,3.72-1.74,3.51-1.7,6.16-4.54,9.47-6.48C749.57,768.67,751.58,773.4,750.11,775.82Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M846.69,498.94a28.57,28.57,0,0,0,12.16,4.73,49.5,49.5,0,0,0,6.88.37,174.85,174.85,0,0,0,28.63-2.39c-3.76-4.15-7.57-8.59-9-14a23.11,23.11,0,0,1-.44-8.77,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74s-.46,6.67-.43,9.06a2.26,2.26,0,0,1,0,.26,28.93,28.93,0,0,1-2.31,10.58C860,493.19,853.8,498.51,846.69,498.94Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M865.18,475.84a24.06,24.06,0,0,0,19.75,3,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74S865.15,473.45,865.18,475.84Z" transform="translate(-28 -101)" opacity="0.1"/><circle cx="850.38" cy="353.54" r="24.11" fill="#fbbebe"/><path d="M776.09,576.53a11.23,11.23,0,0,0,5.44,9.67,21.69,21.69,0,0,0,5.9,2.08c11,2.66,22.32,4.8,33.65,4.15a18.49,18.49,0,0,0,7.14-1.5,7.66,7.66,0,0,0,4.41-5.51,5.18,5.18,0,0,1,.34-1.75,5.11,5.11,0,0,1,1.67-1.49,6.84,6.84,0,0,0,2.59-6.82c1.37.62,2.81-.77,3.46-2.13s1.15-3,2.53-3.59c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.15,2.28-2.44,5.53-3.7,8.51-5.21,8.88-4.47,16.11-11.56,23.2-18.53a77.76,77.76,0,0,0,10-11.18,41.2,41.2,0,0,0,2.2-3.6,101.82,101.82,0,0,0,5.55-12.71c.9-2.34,1.81-4.8,1.44-7.28,0-.22-.08-.44-.13-.67a14,14,0,0,0-2.19-4.42c-2.45-3.6-5.66-7-9.88-8.12s-8.42.23-12.71,1.14a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64a21.32,21.32,0,0,0-2.76,1.88,17.47,17.47,0,0,0-6.42,9.47c-1,4.17-.06,8.63-1.06,12.8-.82,3.44-2.89,6.44-4.91,9.34L803,543.83a104.13,104.13,0,0,1-8.66,11.28C788,562,776.26,567.18,776.09,576.53Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M807.53,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,807.53,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M722.81,694.64c3,5.6,6.34,11,9.05,16.8,1.57,3.37,2.93,6.83,4.68,10.11,1.91,3.57,4.26,6.89,6.26,10.41,5,8.9,7.83,18.94,10.42,28.83a57.39,57.39,0,0,0,20.52-7.22,12.9,12.9,0,0,0,1.23-.79,14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29a7.11,7.11,0,0,1,.79-.64,39.7,39.7,0,0,0-1.41,11.61c-.23,13.44,3.13,27.34,1.56,40.69-1.24,10.58,5.28,21.14,14.52,26.44a70.28,70.28,0,0,0,11.31,4.76c5.78,2.05,11.56,4.16,17.23,6.53,4,1.66,8,3.46,11.86,5.37a146,146,0,0,1,14,7.76c5.57,3.54,11.15,7.14,15.1,12.43,3.83-.1,7.34-2.4,9.76-5.37s3.93-6.56,5.34-10.11c1.23-3.07,2.45-6.22,2.54-9.53a1.9,1.9,0,0,0-1.06-1.71l-26.46-14-5-2.62c-10.83-5.75-22-11.07-32.89-16.81-.73.21-1.33-.62-1.54-1.34s-.36-1.62-1.05-1.94c-.35-.16-.79-.16-1-.44a1.2,1.2,0,0,1-.18-.88c.35-5.24,4.13-10.06,3.37-15.25-.32-2.22-1.47-4.4-1-6.57.35-1.51,1.43-2.73,2-4.16,1.29-3.2,0-7,1.42-10.17a23.34,23.34,0,0,0,1.91-6.48,43.88,43.88,0,0,1,4.05-12.84,23.18,23.18,0,0,1,3.72-5.64c.8-.85,1.69-1.62,2.44-2.5,2.31-2.73,3.15-6.37,3.81-9.88,1.18-6.37,2-13,.52-19.29-.5-2.15-1.26-4.28-1.23-6.49,0-2.91,1.31-6.32-.71-8.43a6.6,6.6,0,0,0-3-1.52,90.43,90.43,0,0,0-14.35-2.65L790.22,582a20.28,20.28,0,0,1-7.35-1.91c-3-1.65-5-4.72-6.2-7.92-3.88,2.83-5.34,8.1-8.43,11.76-1.51,1.79-3.37,3.23-5,4.87a55.11,55.11,0,0,0-5.54,6.83c-4.61,6.33-9.25,12.71-12.55,19.8-1.71,3.69-3,7.54-4.42,11.36-5.39,15.07-14.18,29.37-17.83,44.94-.9,3.81-3.23,7.24-3.58,11.14C718.91,687,720.82,691,722.81,694.64Z" transform="translate(-28 -101)" fill="#434175"/><path d="M838.53,569.54a6.85,6.85,0,0,1,.81,3.26c-.49-2.44-3.85-3.79-4.06-6.2-.1-1.11.1-1.06.79-.47C837.12,567,837.57,568.58,838.53,569.54Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M828.32,576.94a5.15,5.15,0,0,1,1.53,2.26,5.75,5.75,0,0,1,.3,3.93c-.49-.23-.66-.83-.81-1.36a9.38,9.38,0,0,0-1-2.33c-.4-.63-2.23-2.13-2.21-2.82C826.1,575.58,827.83,576.57,828.32,576.94Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M827.14,495.35a25.23,25.23,0,0,0,5.08,3.38c4.78,2.42,10.07,3.69,14.88,6a72.17,72.17,0,0,1,6.9,4c4.77,3,9.53,6,14.29,9.05a15.75,15.75,0,0,1,3.15,2.39c1.72,1.84,1.71,5,3.28,7a9.4,9.4,0,0,0,6.93,3.2,22.5,22.5,0,0,0,7.73-1.3,38.24,38.24,0,0,0,4.42-1.61,20.47,20.47,0,0,0,4.24-2.42,12.19,12.19,0,0,0,5-7.89,15.58,15.58,0,0,0-.85-6.44,25.11,25.11,0,0,0-1.52-3.91,15.17,15.17,0,0,0-1.22-2.05c-3.28-4.65-9.06-6.84-14.65-7.93-2.95-.57-5.95-.92-8.91-1.42a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64A21.32,21.32,0,0,0,827.14,495.35Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M815.49,431.36c.61,5.83,5.53,10.11,8.53,15.14,1.46,2.45,2.48,5.13,3.79,7.66a75,75,0,0,0,5,8l5.35,7.77c3.15,4.57,6.33,9.18,10.35,13,7,1.19,12.9,6.4,19.55,8.93,5.33,2,11.13,2.3,16.72,3.39s11.37,3.27,14.65,7.93a20.83,20.83,0,0,1,2.74,6,15.54,15.54,0,0,1,.85,6.43,12.19,12.19,0,0,1-5,7.9,27.71,27.71,0,0,1-8.65,4,22.74,22.74,0,0,1-7.73,1.3,9.44,9.44,0,0,1-6.94-3.2c-1.56-2-1.55-5.19-3.27-7a15.75,15.75,0,0,0-3.15-2.39l-14.29-9a72.17,72.17,0,0,0-6.9-4c-4.81-2.35-10.1-3.62-14.88-6s-9.23-6.41-10.17-11.68c-2.91-16.19-14.12-29.84-23.7-43.21.31-.06.22-.78.33-1.08a14,14,0,0,1,7-7.08C808.75,432.5,812.17,432.07,815.49,431.36Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M866,431.48a8.87,8.87,0,0,1,1-5.08c1.59-2.64,4.91-3.57,7.93-4.19s5.8-1.1,8.72-1.52a20.1,20.1,0,0,1,7.21-.13c3.26.72,6,2.91,9,4.26,3.6,1.61,7.6,2,11.44,2.92s7.79,2.39,10.2,5.52c1.83,2.37,2.56,5.4,3.11,8.35,4.57,24.63-.35,49.89-1.28,74.92-.37,9.74.07,20.15,5.64,28.16l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76C867.59,437.75,866.24,435.83,866,431.48Z" transform="translate(-28 -101)" fill="#434175"/><path d="M867,426.4c1.56-2.6,4.8-3.54,7.77-4.15a7.67,7.67,0,0,0-3.85,3,9,9,0,0,0-1,5.09c.22,4.35,1.57,6.27,4.15,9.35a17.44,17.44,0,0,1,3.68,9.76c.4,4.64-.43,9.28-.79,13.93-.61,7.8.32,16.2,5.18,22.35,2.72,3.45,6.47,5.91,9.83,8.75s6.51,6.33,7.32,10.65c1.08,5.78-2.26,11.56-2,17.44a28.51,28.51,0,0,0,2.07,8.34c1.23,3.44,2.59,7.07,5.46,9.32,3.26,2.56,7.73,2.78,11.88,2.89l11.48.3c.25.42.52.84.8,1.25l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76c-2.58-3.08-3.93-5-4.16-9.35A8.87,8.87,0,0,1,867,426.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M745.22,680.23,775,752.78a14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29l.21-.52-2.25-14Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="977.05" cy="659.35" rx="33.95" ry="6.53" fill="#0960bd"/><ellipse cx="977.62" cy="656.57" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="650.25" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="643.92" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="637.6" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="631.27" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="624.95" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="618.63" rx="3.95" ry="5.17" fill="#3f3d56"/><path d="M990.82,676.35a18.78,18.78,0,0,1-1.47-2.17l10.38-1.71-11.23.09a19,19,0,0,1-.36-15l15.07,7.81-13.9-10.21a18.94,18.94,0,1,1,31.27,21.19,18.34,18.34,0,0,1,2.16,3.45l-13.48,7,14.38-4.82a19.07,19.07,0,0,1,1,6.07,18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0,18.94,18.94,0,0,1,0-23.41Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1024.64,688.05a18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0C988.28,696.54,1024.64,685.93,1024.64,688.05Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="1043.17" cy="586.83" rx="22.83" ry="4.39" fill="#0960bd"/><ellipse cx="1043.56" cy="584.97" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="580.72" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="576.46" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="572.21" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="567.96" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="563.71" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="559.45" rx="2.66" ry="3.48" fill="#3f3d56"/><path d="M1061.61,631.36a11,11,0,0,1-1-1.46l7-1.15-7.55.06a12.62,12.62,0,0,1-1.17-5.32,12.78,12.78,0,0,1,.92-4.77l10.14,5.26-9.35-6.87a12.73,12.73,0,1,1,21,14.25,12.56,12.56,0,0,1,1.45,2.32l-9.06,4.71,9.66-3.25a12.77,12.77,0,0,1-2.05,12,12.74,12.74,0,1,1-20,0,12.71,12.71,0,0,1,0-15.74Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1084.34,639.23a12.72,12.72,0,0,1-2.72,7.87,12.74,12.74,0,1,1-20,0C1059.9,644.93,1084.34,637.8,1084.34,639.23Z" transform="translate(-28 -101)" opacity="0.1"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/no-data.svg b/src/assets/svg/no-data.svg
new file mode 100644
index 0000000..2b9f257
--- /dev/null
+++ b/src/assets/svg/no-data.svg
@@ -0,0 +1 @@
+<svg id="e4fde902-34f0-42ac-83bb-70aac2088463" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="855.41839" height="610.77534" viewBox="0 0 855.41839 610.77534"><circle cx="39.53587" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="80.42757" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="121.31927" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="162.21097" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="203.10267" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="243.99437" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="284.88607" cy="110.72662" r="13.63057" fill="#e6e6e6"/><path d="M488.67447,271.93783H180.32909a5.55346,5.55346,0,0,1-5.54693-5.54693V244.28714a5.55345,5.55345,0,0,1,5.54693-5.54693H488.67447a5.55346,5.55346,0,0,1,5.54693,5.54693V266.3909A5.55347,5.55347,0,0,1,488.67447,271.93783ZM180.32909,240.959a3.3318,3.3318,0,0,0-3.32816,3.32816V266.3909a3.3318,3.3318,0,0,0,3.32816,3.32815H488.67447a3.33179,3.33179,0,0,0,3.32815-3.32815V244.28714a3.33179,3.33179,0,0,0-3.32815-3.32816Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M246.31694,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V150.98643a6.37411,6.37411,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M235.76469,165.95293H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,177.23755H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,188.52139H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,199.806H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,211.09063H190.62778a1.59353,1.59353,0,1,1,0-3.18706h45.13691a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M477.37812,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.3741,6.3741,0,0,0,6.3741-6.3741V150.98643a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M466.82588,165.95293H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,177.23755H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,188.52139H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,199.806H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,211.09063H421.689a1.59353,1.59353,0,1,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M707.317,280.59077a3.19065,3.19065,0,0,1,3.187,3.187v69.06255a3.19066,3.19066,0,0,1-3.187,3.187H639.665a3.19066,3.19066,0,0,1-3.187-3.187V283.77782a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.187H639.665a6.3741,6.3741,0,0,0-6.3741,6.3741v69.06255a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V283.77782a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,298.74432H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,310.02894H651.62784a1.59353,1.59353,0,0,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,321.31278H651.62784a1.59352,1.59352,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,332.59739H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,343.882H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M362.73282,226.42308H293.30943a7.08972,7.08972,0,0,1-7.08139-7.08138V169.66541a7.08988,7.08988,0,0,1,7.08139-7.08216h69.42339a7.09,7.09,0,0,1,7.08217,7.08216V219.3417A7.08988,7.08988,0,0,1,362.73282,226.42308ZM293.30943,165.7703a3.89917,3.89917,0,0,0-3.89434,3.89511V219.3417a3.89851,3.89851,0,0,0,3.89434,3.89433h69.42339a3.89917,3.89917,0,0,0,3.89511-3.89433V169.66541a3.89983,3.89983,0,0,0-3.89511-3.89511Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M350.59,184.81246H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,196.09708H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,207.38092H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M593.09111,253.95025,526.41486,234.6141a7.08971,7.08971,0,0,1-4.82882-8.77351l13.83608-47.71054a7.08988,7.08988,0,0,1,8.77372-4.82958l66.67625,19.33615a7.09,7.09,0,0,1,4.82935,8.77447l-13.83608,47.71055A7.08988,7.08988,0,0,1,593.09111,253.95025Zm-49.78294-77.58884a3.89916,3.89916,0,0,0-4.82511,2.65631L524.647,226.72827a3.89851,3.89851,0,0,0,2.65557,4.8249l66.67624,19.33614a3.89918,3.89918,0,0,0,4.82565-2.65535l13.83608-47.71054a3.89985,3.89985,0,0,0-2.65609-4.82587Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M593.01835,210.60411l-43.3508-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094L593.906,207.54318a1.59352,1.59352,0,1,1-.88768,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M589.87531,221.44219,546.5245,208.87043a1.59352,1.59352,0,1,1,.88767-3.06093L590.763,218.38125a1.59353,1.59353,0,0,1-.88767,3.06094Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M586.73248,232.27951l-43.35081-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094l43.35081,12.57176a1.59352,1.59352,0,0,1-.88767,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><rect x="156.10589" y="607.77534" width="699.3125" height="3" fill="#e6e6e6"/><polygon points="562.14 603.085 448.421 603.085 452.276 552.973 558.285 552.973 562.14 603.085" fill="#e6e6e6"/><rect x="442.63878" y="597.3034" width="127.21043" height="11.5646" fill="#e6e6e6"/><path d="M895.37073,374.74021H460.73514a11.56458,11.56458,0,0,0-11.56458,11.56458h0V651.3265H906.93533V386.30479a11.56457,11.56457,0,0,0-11.56456-11.56458Z" transform="translate(-172.29081 -144.61233)" fill="#3f3d56"/><path d="M449.17056,651.3265v43.36719a11.56457,11.56457,0,0,0,11.56458,11.56457H895.37073a11.56459,11.56459,0,0,0,11.5646-11.56457h0V651.3265Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><rect x="300.00891" y="254.22076" width="412.47016" height="231.29169" fill="#e6e6e6"/><circle cx="506.244" cy="533.69821" r="11.56459" fill="#3f3d56"/><circle cx="312.86987" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="321.20026" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="329.53064" cy="261.79534" r="2.19466" fill="#fff"/><rect x="310.6752" y="269.25275" width="389.91608" height="194.24707" fill="#fff"/><path d="M508.885,443.41111a1.37973,1.37973,0,0,0-1.37842,1.37842v69.67578a1.37973,1.37973,0,0,0,1.37842,1.37841H589.3493a1.37973,1.37973,0,0,0,1.37842-1.37841V444.78953a1.37973,1.37973,0,0,0-1.37842-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M638.08075,443.63523a1.37984,1.37984,0,0,0-1.37891,1.37842v69.45166a1.37984,1.37984,0,0,0,1.37891,1.37841h80.208a1.37963,1.37963,0,0,0,1.37793-1.37841V445.01365a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M765.92157,442.9072a1.37963,1.37963,0,0,0-1.37793,1.37842v70.17969a1.37962,1.37962,0,0,0,1.37793,1.37841h81.042a1.37962,1.37962,0,0,0,1.37793-1.37841V444.28562a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.062a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M640.94012,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.0625a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M768.26044,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,563.88865a2.8501,2.8501,0,0,0,0,5.70019H802.322a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/preview/p-rotate.svg b/src/assets/svg/preview/p-rotate.svg
new file mode 100644
index 0000000..5153a81
--- /dev/null
+++ b/src/assets/svg/preview/p-rotate.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595306944988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1820" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M1464.3 279.7" p-id="1821" fill="#ffffff"></path><path d="M512 960c-60.5 0-119.1-11.9-174.4-35.2-53.4-22.6-101.3-54.9-142.4-96s-73.4-89-96-142.4C75.9 631.1 64 572.5 64 512s11.9-119.1 35.2-174.4c22.6-53.4 54.9-101.3 96-142.4s89-73.4 142.4-96C392.9 75.9 451.5 64 512 64s119.1 11.9 174.4 35.2c53.4 22.6 101.3 54.9 142.4 96s73.4 89 96 142.4C948.1 392.9 960 451.5 960 512c0 19.1-15.5 34.6-34.6 34.6s-34.6-15.5-34.6-34.6c0-51.2-10-100.8-29.8-147.4-19.1-45.1-46.4-85.6-81.2-120.4C745 209.4 704.5 182 659.4 163c-46.7-19.7-96.3-29.8-147.4-29.8-51.2 0-100.8 10-147.4 29.8-45.1 19.1-85.6 46.4-120.4 81.2S182 319.5 163 364.6c-19.7 46.7-29.8 96.3-29.8 147.4 0 51.2 10 100.8 29.8 147.4 19.1 45.1 46.4 85.6 81.2 120.4C279 814.6 319.5 842 364.6 861c46.7 19.7 96.3 29.8 147.4 29.8 64.6 0 128.4-16.5 184.4-47.8 54.4-30.4 100.9-74.1 134.6-126.6 10.3-16.1 31.7-20.8 47.8-10.4 16.1 10.3 20.8 31.7 10.4 47.8-39.8 62-94.8 113.7-159.1 149.6-66.2 37-141.7 56.6-218.1 56.6z" p-id="1822" fill="#ffffff"></path><path d="M924 552c-19.8 0-36-16.2-36-36V228c0-19.8 16.2-36 36-36s36 16.2 36 36v288c0 19.8-16.2 36-36 36zM275.4 575.5c9.5-2.5 19.1 2.9 22.3 12.2 3.5 10.2 9.9 17.7 19.1 22.6 7.1 3.9 15.1 5.8 24 5.8 16.6 0 30.8-6.9 42.5-20.8 11.7-13.8 20-32.7 24.9-75.1-7.7 12.2-17.3 20.8-28.7 25.8-11.4 5-23.7 7.4-36.8 7.4-26.7 0-47.7-8.3-63.3-24.9-15.5-16.6-23.3-37.9-23.3-64.1 0-25.1 7.7-47.1 23-66.2 15.3-19 37.9-28.6 67.8-28.6 40.3 0 68.1 18.1 83.4 54.4 8.5 19.9 12.7 44.9 12.7 74.9 0 33.8-5.1 63.8-15.3 89.9-16.9 43.5-45.5 65.2-85.8 65.2-27 0-47.6-7.1-61.6-21.2-10-10.1-16.4-22-19.3-35.8-2-9.6 4-19.1 13.5-21.6l0.9 0.1z m103-74.4c9.4-7.5 14.1-20.6 14.1-39.3 0-16.8-4.2-29.3-12.7-37.5S360.6 412 347.5 412c-14 0-25.2 4.7-33.4 14.1-8.2 9.4-12.4 22-12.4 37.7 0 14.9 3.6 26.7 10.9 35.5 7.2 8.8 18.8 13.1 34.6 13.1 11.4 0 21.8-3.8 31.2-11.3zM646.6 414.4c12.4 22.8 18.5 54 18.5 93.7 0 37.6-5.6 68.7-16.8 93.3-16.2 35.3-42.8 52.9-79.6 52.9-33.2 0-57.9-14.4-74.2-43.3-13.5-24.1-20.3-56.4-20.3-97 0-31.4 4.1-58.4 12.2-80.9 15.2-42 42.7-63 82.5-63 35.9 0 61.8 14.8 77.7 44.3z m-40.2 173.3c9.4-13.9 14-39.9 14-78 0-27.4-3.4-50-10.1-67.7-6.8-17.7-19.9-26.6-39.4-26.6-17.9 0-31 8.4-39.3 25.2-8.3 16.8-12.4 41.6-12.4 74.3 0 24.6 2.6 44.4 7.9 59.4 8.1 22.8 22 34.3 41.6 34.3 15.7 0 28.3-7 37.7-20.9zM803.3 387.2c11.2 11.3 16.8 25 16.8 41.2 0 16.7-5.8 30.7-17.5 41.8C791 481.4 777.4 487 762 487c-17.1 0-31.2-5.8-42.1-17.4-10.9-11.6-16.4-25.1-16.4-40.6 0-16.5 5.8-30.4 17.3-41.7 11.5-11.3 25.3-17 41.2-17 16.3 0 30.1 5.7 41.3 16.9zM739.5 451c6.2 6.2 13.7 9.3 22.5 9.3 8.4 0 15.8-3.1 22.1-9.3 6.3-6.2 9.4-13.7 9.4-22.6 0-8.5-3.1-15.9-9.3-22.1-6.2-6.2-13.6-9.3-22.2-9.3s-16.1 3.1-22.4 9.3c-6.3 6.2-9.4 13.7-9.4 22.6-0.1 8.4 3 15.8 9.3 22.1z" p-id="1823" fill="#ffffff"></path></svg>
diff --git a/src/assets/svg/preview/resume.svg b/src/assets/svg/preview/resume.svg
new file mode 100644
index 0000000..0e86c5f
--- /dev/null
+++ b/src/assets/svg/preview/resume.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307154239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7317" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z" p-id="7318" fill="#ffffff"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z" p-id="7319" fill="#ffffff"></path><path d="M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z" p-id="7320" fill="#ffffff"></path></svg>
diff --git a/src/assets/svg/preview/scale.svg b/src/assets/svg/preview/scale.svg
new file mode 100644
index 0000000..1f7adae
--- /dev/null
+++ b/src/assets/svg/preview/scale.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595307195033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8116" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M887.081 904.791a25.8 25.8 0 0 1-18.376-7.619L705.618 734.075l-4.163 3.369c-58.255 47.18-131.522 73.16-206.32 73.16-181.07 0-328.377-147.308-328.377-328.367 0-181.068 147.308-328.376 328.377-328.376 181.063 0 328.376 147.308 328.376 328.376 0 77.072-27.412 152.07-77.169 211.17l-3.522 4.173 162.719 162.744a25.846 25.846 0 0 1 7.639 18.432 26.081 26.081 0 0 1-26.051 26.045l-0.046-0.01zM495.13 205.957c-152.336 0-276.27 123.935-276.27 276.27 0 152.33 123.934 276.27 276.27 276.27 152.34 0 276.275-123.94 276.275-276.27 0-152.335-123.935-276.27-276.275-276.27z" fill="#ffffff" p-id="8117"></path><path d="M626.545 508.355h-262.83a26.127 26.127 0 0 1 0-52.255h262.83a26.127 26.127 0 0 1 0 52.255z" fill="#ffffff" p-id="8118"></path><path d="M495.13 639.77a26.127 26.127 0 0 1-26.128-26.128v-262.83a26.127 26.127 0 0 1 52.255 0v262.835a26.127 26.127 0 0 1-26.127 26.123z" fill="#ffffff" p-id="8119"></path></svg>
diff --git a/src/assets/svg/preview/unrotate.svg b/src/assets/svg/preview/unrotate.svg
new file mode 100644
index 0000000..e4708be
--- /dev/null
+++ b/src/assets/svg/preview/unrotate.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595306911635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1352" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M924.8 337.6c-22.6-53.4-54.9-101.3-96-142.4s-89-73.4-142.4-96C631.1 75.9 572.5 64 512 64S392.9 75.9 337.6 99.2c-53.4 22.6-101.3 54.9-142.4 96-22.4 22.4-42.2 46.8-59.2 73.1V228c0-19.8-16.2-36-36-36s-36 16.2-36 36v288c0 19.8 16.2 36 36 36s36-16.2 36-36v-50.2c4.2-34.8 13.2-68.7 27-101.2 19.1-45.1 46.4-85.6 81.2-120.4C279 209.4 319.5 182 364.6 163c46.7-19.7 96.3-29.8 147.4-29.8 51.2 0 100.8 10 147.4 29.8 45.1 19.1 85.6 46.4 120.4 81.2C814.6 279 842 319.5 861 364.6c19.7 46.7 29.8 96.3 29.8 147.4 0 51.2-10 100.8-29.8 147.4-19.1 45.1-46.4 85.6-81.2 120.4C745 814.6 704.5 842 659.4 861c-46.7 19.7-96.3 29.8-147.4 29.8-64.6 0-128.4-16.5-184.4-47.8-54.4-30.4-100.9-74.1-134.6-126.6-10.3-16.1-31.7-20.8-47.8-10.4-16.1 10.3-20.8 31.7-10.4 47.8 39.8 62 94.8 113.7 159.1 149.6 66.2 37 141.7 56.6 218.1 56.6 60.5 0 119.1-11.9 174.4-35.2 53.4-22.6 101.3-54.9 142.4-96 41.1-41.1 73.4-89 96-142.4C948.1 631.1 960 572.5 960 512s-11.9-119.1-35.2-174.4z" p-id="1353" fill="#ffffff"></path><path d="M275.4 575.5c9.5-2.5 19.1 2.9 22.3 12.2 3.5 10.2 9.9 17.7 19.1 22.6 7.1 3.9 15.1 5.8 24 5.8 16.6 0 30.8-6.9 42.5-20.8 11.7-13.8 20-32.7 24.9-75.1-7.7 12.2-17.3 20.8-28.7 25.8-11.4 5-23.7 7.4-36.8 7.4-26.7 0-47.7-8.3-63.3-24.9-15.5-16.6-23.3-37.9-23.3-64.1 0-25.1 7.7-47.1 23-66.2 15.3-19 37.9-28.6 67.8-28.6 40.3 0 68.1 18.1 83.4 54.4 8.5 19.9 12.7 44.9 12.7 74.9 0 33.8-5.1 63.8-15.3 89.9-16.9 43.5-45.5 65.2-85.8 65.2-27 0-47.6-7.1-61.6-21.2-10-10.1-16.4-22-19.3-35.8-2-9.6 4-19.1 13.5-21.6l0.9 0.1z m103-74.4c9.4-7.5 14.1-20.6 14.1-39.3 0-16.8-4.2-29.3-12.7-37.5S360.6 412 347.5 412c-14 0-25.2 4.7-33.4 14.1-8.2 9.4-12.4 22-12.4 37.7 0 14.9 3.6 26.7 10.9 35.5 7.2 8.8 18.8 13.1 34.6 13.1 11.4 0 21.8-3.8 31.2-11.3zM646.6 414.4c12.4 22.8 18.5 54 18.5 93.7 0 37.6-5.6 68.7-16.8 93.3-16.2 35.3-42.8 52.9-79.6 52.9-33.2 0-57.9-14.4-74.2-43.3-13.5-24.1-20.3-56.4-20.3-97 0-31.4 4.1-58.4 12.2-80.9 15.2-42 42.7-63 82.5-63 35.9 0 61.8 14.8 77.7 44.3z m-40.2 173.3c9.4-13.9 14-39.9 14-78 0-27.4-3.4-50-10.1-67.7-6.8-17.7-19.9-26.6-39.4-26.6-17.9 0-31 8.4-39.3 25.2-8.3 16.8-12.4 41.6-12.4 74.3 0 24.6 2.6 44.4 7.9 59.4 8.1 22.8 22 34.3 41.6 34.3 15.7 0 28.3-7 37.7-20.9zM803.3 387.2c11.2 11.3 16.8 25 16.8 41.2 0 16.7-5.8 30.7-17.5 41.8C791 481.4 777.4 487 762 487c-17.1 0-31.2-5.8-42.1-17.4-10.9-11.6-16.4-25.1-16.4-40.6 0-16.5 5.8-30.4 17.3-41.7 11.5-11.3 25.3-17 41.2-17 16.3 0 30.1 5.7 41.3 16.9zM739.5 451c6.2 6.2 13.7 9.3 22.5 9.3 8.4 0 15.8-3.1 22.1-9.3 6.3-6.2 9.4-13.7 9.4-22.6 0-8.5-3.1-15.9-9.3-22.1-6.2-6.2-13.6-9.3-22.2-9.3s-16.1 3.1-22.4 9.3c-6.3 6.2-9.4 13.7-9.4 22.6-0.1 8.4 3 15.8 9.3 22.1z" p-id="1354" fill="#ffffff"></path></svg>
diff --git a/src/assets/svg/preview/unscale.svg b/src/assets/svg/preview/unscale.svg
new file mode 100644
index 0000000..1359b34
--- /dev/null
+++ b/src/assets/svg/preview/unscale.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595308005241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9878" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M750.3 198.7C598 46.4 351.1 46.4 198.7 198.7s-152.3 399.2 0 551.5C345.1 896.6 578.8 902.3 732 767.3l172.1 172.1 35.4-35.4-172.1-171.9c135-153.2 129.3-387-17.1-533.4z m39.3 403.8c-17.1 42.1-42.2 80-74.7 112.4-32.5 32.5-70.3 57.6-112.4 74.7-40.7 16.5-83.8 24.9-128 24.9s-87.2-8.4-128-24.9c-42.1-17.1-80-42.2-112.4-74.7s-57.6-70.3-74.7-112.4c-16.5-40.7-24.9-83.8-24.9-128s8.4-87.2 24.9-128c17.1-42.1 42.2-80 74.7-112.4s70.3-57.6 112.4-74.7c40.7-16.5 83.8-24.9 128-24.9s87.2 8.4 128 24.9c42.1 17.1 80 42.2 112.4 74.7 32.5 32.5 57.6 70.3 74.7 112.4 16.5 40.7 24.9 83.8 24.9 128s-8.4 87.3-24.9 128zM671 502H271v-50h400v50z" fill="#ffffff" p-id="9879"></path></svg>
diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
new file mode 100644
index 0000000..01c02bf
--- /dev/null
+++ b/src/components/Application/index.ts
@@ -0,0 +1,10 @@
+import { withInstall } from '/@/utils';
+import { defineAsyncComponent } from 'vue';
+
+export { useAppProviderContext } from './src/useAppContext';
+
+export const AppLogo = withInstall(defineAsyncComponent(() => import('./src/AppLogo.vue')));
+export const AppProvider = withInstall(defineAsyncComponent(() => import('./src/AppProvider.vue')));
+export const AppSearch = withInstall(defineAsyncComponent(() => import('./src/search/AppSearch.vue')));
+export const AppLocalePicker = withInstall(defineAsyncComponent(() => import('./src/AppLocalePicker.vue')));
+export const AppDarkModeToggle = withInstall(defineAsyncComponent(() => import('./src/AppDarkModeToggle.vue')));
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
new file mode 100644
index 0000000..6b07d92
--- /dev/null
+++ b/src/components/Application/src/AppDarkModeToggle.vue
@@ -0,0 +1,76 @@
+<template>
+  <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
+    <div :class="`${prefixCls}-inner`"> </div>
+    <SvgIcon size="14" name="sun" />
+    <SvgIcon size="14" name="moon" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+  import { updateDarkTheme } from '/@/logics/theme/dark';
+  import { ThemeEnum } from '/@/enums/appEnum';
+
+  const { prefixCls } = useDesign('dark-switch');
+  const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+
+  const getClass = computed(() => [
+    prefixCls,
+    {
+      [`${prefixCls}--dark`]: unref(isDark),
+    },
+  ]);
+
+  function toggleDarkMode() {
+    const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+    setDarkMode(darkMode);
+    updateDarkTheme(darkMode);
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-dark-switch';
+
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      border: 1px solid rgb(196, 188, 188);
+    }
+  }
+
+  .@{prefix-cls} {
+    position: relative;
+    display: flex;
+    width: 50px;
+    height: 26px;
+    padding: 0 6px;
+    margin-left: auto;
+    cursor: pointer;
+    background-color: #151515;
+    border-radius: 30px;
+    justify-content: space-between;
+    align-items: center;
+
+    &-inner {
+      position: absolute;
+      z-index: 1;
+      width: 18px;
+      height: 18px;
+      background-color: #fff;
+      border-radius: 50%;
+      transition: transform 0.5s, background-color 0.5s;
+      will-change: transform;
+    }
+
+    &--dark {
+      .@{prefix-cls}-inner {
+        transform: translateX(calc(100% + 2px));
+      }
+    }
+  }
+</style>
diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
new file mode 100644
index 0000000..d600bba
--- /dev/null
+++ b/src/components/Application/src/AppLocalePicker.vue
@@ -0,0 +1,76 @@
+<!--
+ * @Author: Vben
+ * @Description: Multi-language switching component
+-->
+<template>
+  <Dropdown
+    placement="bottom"
+    :trigger="['click']"
+    :dropMenuList="localeList"
+    :selectedKeys="selectedKeys"
+    @menuEvent="handleMenuEvent"
+    overlayClassName="app-locale-picker-overlay"
+  >
+    <span class="cursor-pointer flex items-center">
+      <Icon icon="ion:language" />
+      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
+    </span>
+  </Dropdown>
+</template>
+<script lang="ts" setup>
+  import type { LocaleType } from '/#/config';
+  import type { DropMenu } from '/@/components/Dropdown';
+  import { ref, watchEffect, unref, computed } from 'vue';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { Icon } from '/@/components/Icon';
+  import { useLocale } from '/@/locales/useLocale';
+  import { localeList } from '/@/settings/localeSetting';
+
+  const props = defineProps({
+    /**
+     * Whether to display text
+     */
+    showText: { type: Boolean, default: true },
+    /**
+     * Whether to refresh the interface when changing
+     */
+    reload: { type: Boolean },
+  });
+
+  const selectedKeys = ref<string[]>([]);
+
+  const { changeLocale, getLocale } = useLocale();
+
+  const getLocaleText = computed(() => {
+    const key = selectedKeys.value[0];
+    if (!key) {
+      return '';
+    }
+    return localeList.find((item) => item.event === key)?.text;
+  });
+
+  watchEffect(() => {
+    selectedKeys.value = [unref(getLocale)];
+  });
+
+  async function toggleLocale(lang: LocaleType | string) {
+    await changeLocale(lang as LocaleType);
+    selectedKeys.value = [lang as string];
+    props.reload && location.reload();
+  }
+
+  function handleMenuEvent(menu: DropMenu) {
+    if (unref(getLocale) === menu.event) {
+      return;
+    }
+    toggleLocale(menu.event as string);
+  }
+</script>
+
+<style lang="less">
+  .app-locale-picker-overlay {
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+</style>
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
new file mode 100644
index 0000000..7075ef4
--- /dev/null
+++ b/src/components/Application/src/AppLogo.vue
@@ -0,0 +1,93 @@
+<!--
+ * @Author: Jeecg
+ * @Description: logo component
+-->
+<template>
+  <div class="anticon" :class="getAppLogoClass" @click="goHome">
+    <img src="../../../assets/images/ghb-logo.svg" />
+    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
+      {{ shortTitle }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const props = defineProps({
+    /**
+     * The theme of the current parent component
+     */
+    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
+    /**
+     * Whether to show title
+     */
+    showTitle: { type: Boolean, default: true },
+    /**
+     * The title is also displayed when the menu is collapsed
+     */
+    alwaysShowTitle: { type: Boolean },
+  });
+
+  const { prefixCls } = useDesign('app-logo');
+  const { getCollapsedShowTitle } = useMenuSetting();
+  const userStore = useUserStore();
+  const { title, shortTitle } = useGlobSetting();
+  
+  const go = useGo();
+
+  const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
+
+  const getTitleClass = computed(() => [
+    `${prefixCls}__title`,
+    {
+      'xs:opacity-0': !props.alwaysShowTitle,
+    },
+  ]);
+
+  function goHome() {
+    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-app-logo';
+
+  .@{prefix-cls} {
+    display: flex;
+    align-items: center;
+    padding-left: 7px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    //左侧菜单模式和左侧菜单混合模式加渐变背景色
+    &.jeecg-layout-mix-sider-logo,&.jeecg-layout-menu-logo{
+      background:@sider-logo-bg-color;
+    }
+    // &.light {
+    //   border-bottom: 1px solid @border-color-base;
+    // }
+
+    &.collapsed-show-title {
+      padding-left: 20px;
+    }
+
+    &.light &__title {
+      color: @primary-color;
+    }
+
+    &.dark &__title {
+      color: @white;
+    }
+
+    &__title {
+      font-size: 18px;
+      font-weight: 600;
+      transition: all 0.5s;
+      line-height: normal;
+    }
+  }
+</style>
diff --git a/src/components/Application/src/AppProvider.vue b/src/components/Application/src/AppProvider.vue
new file mode 100644
index 0000000..4c277bd
--- /dev/null
+++ b/src/components/Application/src/AppProvider.vue
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { defineComponent, toRefs, ref, unref } from 'vue';
+  import { createAppProviderContext } from './useAppContext';
+  import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
+  import { prefixCls } from '/@/settings/designSetting';
+  import { useAppStore } from '/@/store/modules/app';
+  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+
+  const props = {
+    /**
+     * class style prefix
+     */
+    prefixCls: { type: String, default: prefixCls },
+  };
+
+  export default defineComponent({
+    name: 'AppProvider',
+    inheritAttrs: false,
+    props,
+    setup(props, { slots }) {
+      const isMobile = ref(false);
+      const isSetState = ref(false);
+
+      const appStore = useAppStore();
+
+      // Monitor screen breakpoint information changes
+      createBreakpointListen(({ screenMap, sizeEnum, width }) => {
+        const lgWidth = screenMap.get(sizeEnum.LG);
+        if (lgWidth) {
+          isMobile.value = width.value - 1 < lgWidth;
+        }
+        handleRestoreState();
+      });
+
+      const { prefixCls } = toRefs(props);
+
+      // Inject variables into the global
+      createAppProviderContext({ prefixCls, isMobile });
+
+      /**
+       * Used to maintain the state before the window changes
+       */
+      function handleRestoreState() {
+        if (unref(isMobile)) {
+          if (!unref(isSetState)) {
+            isSetState.value = true;
+            const {
+              menuSetting: { type: menuType, mode: menuMode, collapsed: menuCollapsed, split: menuSplit },
+            } = appStore.getProjectConfig;
+            appStore.setProjectConfig({
+              menuSetting: {
+                type: MenuTypeEnum.SIDEBAR,
+                mode: MenuModeEnum.INLINE,
+                split: false,
+              },
+            });
+            appStore.setBeforeMiniInfo({ menuMode, menuCollapsed, menuType, menuSplit });
+          }
+        } else {
+          if (unref(isSetState)) {
+            isSetState.value = false;
+            const { menuMode, menuCollapsed, menuType, menuSplit } = appStore.getBeforeMiniInfo;
+            appStore.setProjectConfig({
+              menuSetting: {
+                type: menuType,
+                mode: menuMode,
+                collapsed: menuCollapsed,
+                split: menuSplit,
+              },
+            });
+          }
+        }
+      }
+      return () => slots.default?.();
+    },
+  });
+</script>
diff --git a/src/components/Application/src/search/AppSearch.vue b/src/components/Application/src/search/AppSearch.vue
new file mode 100644
index 0000000..63d346e
--- /dev/null
+++ b/src/components/Application/src/search/AppSearch.vue
@@ -0,0 +1,33 @@
+<script lang="tsx">
+  import { defineComponent, ref, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import AppSearchModal from './AppSearchModal.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  export default defineComponent({
+    name: 'AppSearch',
+    setup() {
+      const showModal = ref(false);
+      const { t } = useI18n();
+
+      function changeModal(show: boolean) {
+        showModal.value = show;
+      }
+
+      return () => {
+        return (
+          <div class="p-1" onClick={changeModal.bind(null, true)}>
+            <Tooltip>
+              {{
+                title: () => t('common.searchText'),
+                default: () => <SearchOutlined />,
+              }}
+            </Tooltip>
+            <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
+          </div>
+        );
+      };
+    },
+  });
+</script>
diff --git a/src/components/Application/src/search/AppSearchFooter.vue b/src/components/Application/src/search/AppSearchFooter.vue
new file mode 100644
index 0000000..06e1372
--- /dev/null
+++ b/src/components/Application/src/search/AppSearchFooter.vue
@@ -0,0 +1,55 @@
+<template>
+  <div :class="`${prefixCls}`">
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
+    <span>{{ t('component.app.toSearch') }}</span>
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
+    <span>{{ t('component.app.toNavigate') }}</span>
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
+    <span>{{ t('common.closeText') }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import AppSearchKeyItem from './AppSearchKeyItem.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { prefixCls } = useDesign('app-search-footer');
+  const { t } = useI18n();
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-app-search-footer';
+
+  .@{prefix-cls} {
+    position: relative;
+    display: flex;
+    height: 44px;
+    padding: 0 16px;
+    font-size: 12px;
+    color: #666;
+    background-color: @component-background;
+    border-top: 1px solid @border-color-base;
+    border-radius: 0 0 16px 16px;
+    align-items: center;
+    flex-shrink: 0;
+
+    &-item {
+      display: flex;
+      width: 20px;
+      height: 18px;
+      padding-bottom: 2px;
+      margin-right: 0.4em;
+      background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+      border-radius: 2px;
+      box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+      align-items: center;
+      justify-content: center;
+
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(6) {
+        margin-left: 14px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Application/src/search/AppSearchKeyItem.vue b/src/components/Application/src/search/AppSearchKeyItem.vue
new file mode 100644
index 0000000..aba36a5
--- /dev/null
+++ b/src/components/Application/src/search/AppSearchKeyItem.vue
@@ -0,0 +1,11 @@
+<template>
+  <span :class="$attrs.class">
+    <Icon :icon="icon" />
+  </span>
+</template>
+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  defineProps({
+    icon: String,
+  });
+</script>
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
new file mode 100644
index 0000000..d5f2290
--- /dev/null
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -0,0 +1,260 @@
+<template>
+  <Teleport to="body">
+    <transition name="zoom-fade" mode="out-in">
+      <div :class="getClass" @click.stop v-if="visible">
+        <div :class="`${prefixCls}-content`" v-click-outside="handleClose">
+          <div :class="`${prefixCls}-input__wrapper`">
+            <a-input :class="`${prefixCls}-input`" :placeholder="t('common.searchText')" ref="inputRef" allow-clear @change="handleSearch">
+              <template #prefix>
+                <SearchOutlined />
+              </template>
+            </a-input>
+            <span :class="`${prefixCls}-cancel`" @click="handleClose">
+              {{ t('common.cancelText') }}
+            </span>
+          </div>
+
+          <div :class="`${prefixCls}-not-data`" v-show="getIsNotData">
+            {{ t('component.app.searchNotData') }}
+          </div>
+
+          <ul :class="`${prefixCls}-list`" v-show="!getIsNotData" ref="scrollWrap">
+            <li
+              :ref="setRefs(index)"
+              v-for="(item, index) in searchResult"
+              :key="item.path"
+              :data-index="index"
+              @mouseenter="handleMouseenter"
+              @click="handleEnter"
+              :class="[
+                `${prefixCls}-list__item`,
+                {
+                  [`${prefixCls}-list__item--active`]: activeIndex === index,
+                },
+              ]"
+            >
+              <div :class="`${prefixCls}-list__item-icon`">
+                <Icon :icon="item.icon || 'mdi:form-select'" :size="20" />
+              </div>
+              <div :class="`${prefixCls}-list__item-text`">
+                {{ item.name }}
+              </div>
+              <div :class="`${prefixCls}-list__item-enter`">
+                <Icon icon="ant-design:enter-outlined" :size="20" />
+              </div>
+            </li>
+          </ul>
+          <AppSearchFooter />
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+  import { computed, unref, ref, watch, nextTick } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import AppSearchFooter from './AppSearchFooter.vue';
+  import Icon from '/@/components/Icon';
+  // @ts-ignore
+  import vClickOutside from '/@/directives/clickOutside';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRefs } from '/@/hooks/core/useRefs';
+  import { useMenuSearch } from './useMenuSearch';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+
+  const props = defineProps({
+    visible: { type: Boolean },
+  });
+
+  const emit = defineEmits(['close']);
+
+  const scrollWrap = ref(null);
+  const inputRef = ref<Nullable<HTMLElement>>(null);
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('app-search-modal');
+  const [refs, setRefs] = useRefs();
+  const { getIsMobile } = useAppInject();
+
+  const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } = useMenuSearch(refs, scrollWrap, emit);
+
+  const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
+
+  const getClass = computed(() => {
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--mobile`]: unref(getIsMobile),
+      },
+    ];
+  });
+
+  watch(
+    () => props.visible,
+    (visible: boolean) => {
+      visible &&
+        nextTick(() => {
+          unref(inputRef)?.focus();
+        });
+    }
+  );
+
+  function handleClose() {
+    searchResult.value = [];
+    emit('close');
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-app-search-modal';
+  @footer-prefix-cls: ~'@{namespace}-app-search-footer';
+  .@{prefix-cls} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 800;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding-top: 50px;
+    background-color: rgba(0, 0, 0, 0.25);
+    justify-content: center;
+
+    &--mobile {
+      padding: 0;
+
+      > div {
+        width: 100%;
+      }
+
+      .@{prefix-cls}-input {
+        width: calc(100% - 38px);
+      }
+
+      .@{prefix-cls}-cancel {
+        display: inline-block;
+      }
+
+      .@{prefix-cls}-content {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+      }
+
+      .@{footer-prefix-cls} {
+        display: none;
+      }
+
+      .@{prefix-cls}-list {
+        height: calc(100% - 80px);
+        max-height: unset;
+
+        &__item {
+          &-enter {
+            opacity: 0 !important;
+          }
+        }
+      }
+    }
+
+    &-content {
+      position: relative;
+      width: 632px;
+      margin: 0 auto auto auto;
+      background-color: @component-background;
+      border-radius: 16px;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      flex-direction: column;
+    }
+
+    &-input__wrapper {
+      display: flex;
+      padding: 14px 14px 0 14px;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &-input {
+      width: 100%;
+      height: 48px;
+      font-size: 1.3em;
+      color: #1c1e21;
+      border-radius: 6px;
+
+      span[role='img'] {
+        color: #999;
+      }
+    }
+
+    &-cancel {
+      display: none;
+      font-size: 1em;
+      color: #666;
+    }
+
+    &-not-data {
+      display: flex;
+      width: 100%;
+      height: 100px;
+      font-size: 0.9;
+      color: rgb(150 159 175);
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-list {
+      max-height: 472px;
+      padding: 0 14px;
+      padding-bottom: 20px;
+      margin: 0 auto;
+      margin-top: 14px;
+      overflow: auto;
+
+      &__item {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 56px;
+        padding-bottom: 4px;
+        padding-left: 14px;
+        margin-top: 8px;
+        font-size: 14px;
+        color: @text-color-base;
+        cursor: pointer;
+        // background-color: @component-background;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px 0 #d4d9e1;
+        align-items: center;
+
+        > div:first-child,
+        > div:last-child {
+          display: flex;
+          align-items: center;
+        }
+
+        &--active {
+          color: #fff;
+          background-color: @primary-color;
+
+          .@{prefix-cls}-list__item-enter {
+            opacity: 1;
+          }
+        }
+
+        &-icon {
+          width: 30px;
+        }
+
+        &-text {
+          flex: 1;
+        }
+
+        &-enter {
+          width: 30px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Application/src/search/useMenuSearch.ts b/src/components/Application/src/search/useMenuSearch.ts
new file mode 100644
index 0000000..2795dc5
--- /dev/null
+++ b/src/components/Application/src/search/useMenuSearch.ts
@@ -0,0 +1,181 @@
+import type { Menu } from '/@/router/types';
+import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
+import { getMenus } from '/@/router/menus';
+import { cloneDeep } from 'lodash-es';
+import { filter, forEach } from '/@/utils/helper/treeHelper';
+import { useGo } from '/@/hooks/web/usePage';
+import { useScrollTo } from '/@/hooks/event/useScrollTo';
+import { onKeyStroke, useDebounceFn } from '@vueuse/core';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { URL_HASH_TAB } from '/@/utils';
+
+export interface SearchResult {
+  name: string;
+  path: string;
+  icon?: string;
+  internalOrExternal: boolean;
+}
+
+// Translate special characters
+function transform(c: string) {
+  const code: string[] = ['$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'];
+  return code.includes(c) ? `\\${c}` : c;
+}
+
+function createSearchReg(key: string) {
+  const keys = [...key].map((item) => transform(item));
+  const str = ['', ...keys, ''].join('.*');
+  return new RegExp(str, 'i');
+}
+
+export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>, emit: EmitType) {
+  const searchResult = ref<SearchResult[]>([]);
+  const keyword = ref('');
+  const activeIndex = ref(-1);
+
+  let menuList: Menu[] = [];
+
+  const { t } = useI18n();
+  const go = useGo();
+  const handleSearch = useDebounceFn(search, 200);
+
+  onBeforeMount(async () => {
+    const list = await getMenus();
+    menuList = cloneDeep(list);
+    forEach(menuList, (item) => {
+      item.name = t(item.name);
+    });
+  });
+
+  function search(e: ChangeEvent) {
+    e?.stopPropagation();
+    const key = e.target.value;
+    keyword.value = key.trim();
+    if (!key) {
+      searchResult.value = [];
+      return;
+    }
+    const reg = createSearchReg(unref(keyword));
+    const filterMenu = filter(menuList, (item) => {
+      // 【issues/33】包含子菜单时，不添加到搜索队列
+      if (Array.isArray(item.children)) {
+        return false;
+      }
+      return reg.test(item.name) && !item.hideMenu;
+    });
+    searchResult.value = handlerSearchResult(filterMenu, reg);
+    activeIndex.value = 0;
+  }
+
+  function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
+    const ret: SearchResult[] = [];
+    filterMenu.forEach((item) => {
+      const { name, path, icon, children, hideMenu, meta, internalOrExternal } = item;
+      if (!hideMenu && reg.test(name) && (!children?.length || meta?.hideChildrenInMenu)) {
+        ret.push({
+          name: parent?.name ? `${parent.name} > ${name}` : name,
+          path,
+          icon,
+          internalOrExternal
+        });
+      }
+      if (!meta?.hideChildrenInMenu && Array.isArray(children) && children.length) {
+        ret.push(...handlerSearchResult(children, reg, item));
+      }
+    });
+    return ret;
+  }
+
+  // Activate when the mouse moves to a certain line
+  function handleMouseenter(e: any) {
+    const index = e.target.dataset.index;
+    activeIndex.value = Number(index);
+  }
+
+  // Arrow key up
+  function handleUp() {
+    if (!searchResult.value.length) return;
+    activeIndex.value--;
+    if (activeIndex.value < 0) {
+      activeIndex.value = searchResult.value.length - 1;
+    }
+    handleScroll();
+  }
+
+  // Arrow key down
+  function handleDown() {
+    if (!searchResult.value.length) return;
+    activeIndex.value++;
+    if (activeIndex.value > searchResult.value.length - 1) {
+      activeIndex.value = 0;
+    }
+    handleScroll();
+  }
+
+  // When the keyboard up and down keys move to an invisible place
+  // the scroll bar needs to scroll automatically
+  function handleScroll() {
+    const refList = unref(refs);
+    if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) {
+      return;
+    }
+
+    const index = unref(activeIndex);
+    const currentRef = refList[index];
+    if (!currentRef) {
+      return;
+    }
+    const wrapEl = unref(scrollWrap);
+    if (!wrapEl) {
+      return;
+    }
+    const scrollHeight = currentRef.offsetTop + currentRef.offsetHeight;
+    const wrapHeight = wrapEl.offsetHeight;
+    const { start } = useScrollTo({
+      el: wrapEl,
+      duration: 100,
+      to: scrollHeight - wrapHeight,
+    });
+    start();
+  }
+
+  // enter keyboard event
+  async function handleEnter() {
+    if (!searchResult.value.length) {
+      return;
+    }
+    const result = unref(searchResult);
+    const index = unref(activeIndex);
+    if (result.length === 0 || index < 0) {
+      return;
+    }
+    const to = result[index];
+    handleClose();
+    await nextTick();
+
+    // 代码逻辑说明: 【QQYUN-8369】搜索区分大小写，外部链接新页打开
+    if (to.internalOrExternal) {
+      // 代码逻辑说明: 【QQYUN-8773】配置外部网址在顶部菜单模式和搜索打不开
+      const path = to.path.replace(URL_HASH_TAB, '#');
+      window.open(path, '_blank');
+    } else {
+      go(to.path);
+    }
+  }
+
+  // close search modal
+  function handleClose() {
+    searchResult.value = [];
+    emit('close');
+  }
+
+  // enter search
+  onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  // esc close
+  onKeyStroke('Escape', handleClose);
+
+  return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };
+}
diff --git a/src/components/Application/src/useAppContext.ts b/src/components/Application/src/useAppContext.ts
new file mode 100644
index 0000000..8bdfb4f
--- /dev/null
+++ b/src/components/Application/src/useAppContext.ts
@@ -0,0 +1,17 @@
+import { InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface AppProviderContextProps {
+  prefixCls: Ref<string>;
+  isMobile: Ref<boolean>;
+}
+
+const key: InjectionKey<AppProviderContextProps> = Symbol();
+
+export function createAppProviderContext(context: AppProviderContextProps) {
+  return createContext<AppProviderContextProps>(context, key);
+}
+
+export function useAppProviderContext() {
+  return useContext<AppProviderContextProps>(key);
+}
diff --git a/src/components/Authority/index.ts b/src/components/Authority/index.ts
new file mode 100644
index 0000000..2f0eab7
--- /dev/null
+++ b/src/components/Authority/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import authority from './src/Authority.vue';
+
+export const Authority = withInstall(authority);
diff --git a/src/components/Authority/src/Authority.vue b/src/components/Authority/src/Authority.vue
new file mode 100644
index 0000000..0d35938
--- /dev/null
+++ b/src/components/Authority/src/Authority.vue
@@ -0,0 +1,45 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+
+  export default defineComponent({
+    name: 'Authority',
+    props: {
+      /**
+       * Specified role is visible
+       * When the permission mode is the role mode, the value value can pass the role value.
+       * When the permission mode is background, the value value can pass the code permission value
+       * @default ''
+       */
+      value: {
+        type: [Number, Array, String] as PropType<RoleEnum | RoleEnum[] | string | string[]>,
+        default: '',
+      },
+    },
+    setup(props, { slots }) {
+      const { hasPermission } = usePermission();
+
+      /**
+       * Render role button
+       */
+      function renderAuth() {
+        const { value } = props;
+        if (!value) {
+          return getSlot(slots);
+        }
+        return hasPermission(value) ? getSlot(slots) : null;
+      }
+
+      return () => {
+        // Role-based value control
+        return renderAuth();
+      };
+    },
+  });
+</script>
diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts
new file mode 100644
index 0000000..97a53a1
--- /dev/null
+++ b/src/components/Basic/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '/@/utils';
+import basicArrow from './src/BasicArrow.vue';
+import basicTitle from './src/BasicTitle.vue';
+import basicHelp from './src/BasicHelp.vue';
+
+export const BasicArrow = withInstall(basicArrow);
+export const BasicTitle = withInstall(basicTitle);
+export const BasicHelp = withInstall(basicHelp);
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
new file mode 100644
index 0000000..6a4cd01
--- /dev/null
+++ b/src/components/Basic/src/BasicArrow.vue
@@ -0,0 +1,84 @@
+<!--
+ * @Author: Vben
+ * @Description: Arrow component with animation
+-->
+<template>
+  <span :class="getClass">
+    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
+  </span>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = defineProps({
+    /**
+     * Arrow expand state
+     */
+    expand: { type: Boolean },
+    /**
+     * Arrow up by default
+     */
+    up: { type: Boolean },
+    /**
+     * Arrow down by default
+     */
+    down: { type: Boolean },
+    /**
+     * Cancel padding/margin for inline
+     */
+    inset: { type: Boolean },
+  });
+
+  const { prefixCls } = useDesign('basic-arrow');
+
+  // get component class
+  const getClass = computed(() => {
+    const { expand, up, down, inset } = props;
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--active`]: expand,
+        up,
+        inset,
+        down,
+      },
+    ];
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-arrow';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: all 0.3s ease 0.1s;
+    transform-origin: center center;
+
+    &--active {
+      transform: rotate(90deg);
+    }
+
+    &.inset {
+      line-height: 0px;
+    }
+
+    &.up {
+      transform: rotate(-90deg);
+    }
+
+    &.down {
+      transform: rotate(90deg);
+    }
+
+    &.up.@{prefix-cls}--active {
+      transform: rotate(90deg);
+    }
+
+    &.down.@{prefix-cls}--active {
+      transform: rotate(-90deg);
+    }
+  }
+</style>
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
new file mode 100644
index 0000000..396bd75
--- /dev/null
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -0,0 +1,112 @@
+<script lang="tsx">
+  import type { CSSProperties, PropType } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { getPopupContainer } from '/@/utils';
+  import { isString, isArray } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = {
+    /**
+     * Help text max-width
+     * @default: 600px
+     */
+    maxWidth: { type: String, default: '600px' },
+    /**
+     * Whether to display the serial number
+     * @default: false
+     */
+    showIndex: { type: Boolean },
+    /**
+     * Help text font color
+     * @default: #ffffff
+     */
+    color: { type: String, default: '#ffffff' },
+    /**
+     * Help text font size
+     * @default: 14px
+     */
+    fontSize: { type: String, default: '14px' },
+    /**
+     * Help text list
+     */
+    placement: { type: String, default: 'right' },
+    /**
+     * Help text list
+     */
+    text: { type: [Array, String] as PropType<string[] | string> },
+  };
+
+  export default defineComponent({
+    name: 'BasicHelp',
+    components: { Tooltip },
+    props,
+    setup(props, { slots }) {
+      const { prefixCls } = useDesign('basic-help');
+
+      const getTooltipStyle = computed((): CSSProperties => ({ color: props.color, fontSize: props.fontSize }));
+
+      const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
+
+      function renderTitle() {
+        const textList = props.text;
+
+        if (isString(textList)) {
+          return <p>{textList}</p>;
+        }
+
+        if (isArray(textList)) {
+          return textList.map((text, index) => {
+            return (
+              <p key={text}>
+                <>
+                  {props.showIndex ? `${index + 1}. ` : ''}
+                  {text}
+                </>
+              </p>
+            );
+          });
+        }
+        return null;
+      }
+
+      return () => {
+        return (
+          <Tooltip
+            overlayClassName={`${prefixCls}__wrap`}
+            title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
+            autoAdjustOverflow={true}
+            overlayStyle={unref(getOverlayStyle)}
+            placement={props.placement as 'right'}
+            getPopupContainer={() => getPopupContainer()}
+          >
+            <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
+          </Tooltip>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-help';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    margin-left: 6px;
+    font-size: 14px;
+    color: @text-color-help-dark;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-color;
+    }
+
+    &__wrap {
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
new file mode 100644
index 0000000..7a796cb
--- /dev/null
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -0,0 +1,80 @@
+<template>
+  <span :class="getClass">
+    <slot></slot>
+    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
+  </span>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { useSlots, computed } from 'vue';
+  import BasicHelp from './BasicHelp.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = defineProps({
+    /**
+     * Help text list or string
+     * @default: ''
+     */
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    /**
+     * Whether the color block on the left side of the title
+     * @default: false
+     */
+    span: { type: Boolean },
+    /**
+     * Whether to default the text, that is, not bold
+     * @default: false
+     */
+    normal: { type: Boolean },
+  });
+
+  const { prefixCls } = useDesign('basic-title');
+  const slots = useSlots();
+  const getClass = computed(() => [
+    prefixCls,
+    { [`${prefixCls}-show-span`]: props.span && slots.default },
+    { [`${prefixCls}-normal`]: props.normal },
+  ]);
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-title';
+
+  .@{prefix-cls} {
+    position: relative;
+    display: flex;
+    padding-left: 7px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: @text-color-base;
+    cursor: move;
+    user-select: none;
+
+    &.is-drawer {
+      cursor: default;
+    }
+
+    &-normal {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    &-show-span::before {
+      position: absolute;
+      top: 4px;
+      left: 0;
+      width: 3px;
+      height: 16px;
+      margin-right: 4px;
+      background-color: @primary-color;
+      content: '';
+    }
+
+    &-help {
+      margin-left: 10px;
+    }
+  }
+</style>
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
new file mode 100644
index 0000000..71bd2e4
--- /dev/null
+++ b/src/components/Button/index.ts
@@ -0,0 +1,11 @@
+import { withInstall } from '/@/utils';
+import type { ExtractPropTypes } from 'vue';
+import button from './src/BasicButton.vue';
+import jUploadButton from './src/JUploadButton.vue';
+import popConfirmButton from './src/PopConfirmButton.vue';
+import { buttonProps } from './src/props';
+
+export const Button = withInstall(button);
+export const JUploadButton = withInstall(jUploadButton);
+export const PopConfirmButton = withInstall(popConfirmButton);
+export declare type ButtonProps = Partial<ExtractPropTypes<typeof buttonProps>>;
diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
new file mode 100644
index 0000000..efbb7c3
--- /dev/null
+++ b/src/components/Button/src/BasicButton.vue
@@ -0,0 +1,41 @@
+<template>
+  <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
+    <template v-if="preIcon" #icon>
+      <Icon :icon="preIcon" :size="iconSize" />
+    </template>
+    <template #default="data">
+      <slot v-bind="data || {}"></slot>
+      <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
+    </template>
+  </Button>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'AButton',
+    inheritAttrs: false,
+  });
+</script>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import { buttonProps } from './props';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  const props = defineProps(buttonProps);
+  // get component class
+  const attrs = useAttrs({ excludeDefaultKeys: false });
+  const getButtonClass = computed(() => {
+    const { color, disabled } = props;
+    return [
+      {
+        [`ant-btn-${color}`]: !!color,
+        [`is-disabled`]: disabled,
+      },
+    ];
+  });
+
+  // get inherit binding value
+  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
+</script>
diff --git a/src/components/Button/src/JUploadButton.vue b/src/components/Button/src/JUploadButton.vue
new file mode 100644
index 0000000..19dddde
--- /dev/null
+++ b/src/components/Button/src/JUploadButton.vue
@@ -0,0 +1,41 @@
+<template>
+  <a-upload name="file" :showUploadList="false" :customRequest="(file) => onClick(file)">
+    <Button :type="type" :class="getButtonClass" :disabled="props.disabled">
+      <template #default="data">
+        <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
+        <slot v-bind="data || {}"></slot>
+        <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
+      </template>
+    </Button>
+  </a-upload>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'JUploadButton',
+    inheritAttrs: false,
+  });
+</script>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import { buttonProps } from './props';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  const props = defineProps(buttonProps);
+  // get component class
+  const attrs = useAttrs({ excludeDefaultKeys: false });
+  const getButtonClass = computed(() => {
+    const { color, disabled } = props;
+    return [
+      {
+        [`ant-btn-${color}`]: !!color,
+        [`is-disabled`]: disabled,
+      },
+    ];
+  });
+
+  // get inherit binding value
+  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
+</script>
diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue
new file mode 100644
index 0000000..05d0f9a
--- /dev/null
+++ b/src/components/Button/src/PopConfirmButton.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { computed, defineComponent, h, unref } from 'vue';
+  import BasicButton from './BasicButton.vue';
+  import { Popconfirm } from 'ant-design-vue';
+  import { extendSlots } from '/@/utils/helper/tsxHelper';
+  import { omit } from 'lodash-es';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const props = {
+    class: propTypes.any,
+    /**
+     * Whether to enable the drop-down menu
+     * @default: true
+     */
+    enable: {
+      type: Boolean,
+      default: true,
+    },
+  };
+
+  export default defineComponent({
+    name: 'PopButton',
+    inheritAttrs: false,
+    props,
+    setup(props, { slots }) {
+      const { t } = useI18n();
+      const attrs = useAttrs();
+
+      // get inherit binding value
+      const getBindValues = computed(() => {
+        return Object.assign(
+          {
+            okText: t('common.okText'),
+            cancelText: t('common.cancelText'),
+          },
+          { ...props, ...unref(attrs) }
+        );
+      });
+
+      return () => {
+        const bindValues = omit(unref(getBindValues), 'icon');
+        const btnBind = omit(bindValues, 'title') as Recordable;
+        if (btnBind.disabled) btnBind.color = '';
+        const Button = h(BasicButton, btnBind, extendSlots(slots));
+
+        // If it is not enabled, it is a normal button
+        if (!props.enable) {
+          return Button;
+        }
+        return h(Popconfirm, bindValues, { default: () => Button });
+      };
+    },
+  });
+</script>
diff --git a/src/components/Button/src/props.ts b/src/components/Button/src/props.ts
new file mode 100644
index 0000000..b5026d6
--- /dev/null
+++ b/src/components/Button/src/props.ts
@@ -0,0 +1,21 @@
+export const buttonProps = {
+  color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
+  loading: { type: Boolean },
+  disabled: { type: Boolean },
+  /**
+   * Text before icon.
+   */
+  preIcon: { type: String },
+  /**
+   * Text after icon.
+   */
+  postIcon: { type: String },
+  type: { type: String },
+  /**
+   * preIcon and postIcon icon size.
+   * @default: 15
+   */
+  iconSize: { type: Number, default: 15 },
+  isUpload: { type: Boolean, default: false },
+  onClick: { type: Function as PropType<(...args) => any>, default: null },
+};
diff --git a/src/components/CardList/index.ts b/src/components/CardList/index.ts
new file mode 100644
index 0000000..b977c1b
--- /dev/null
+++ b/src/components/CardList/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import cardList from './src/CardList.vue';
+
+export const CardList = withInstall(cardList);
diff --git a/src/components/CardList/src/CardList.vue b/src/components/CardList/src/CardList.vue
new file mode 100644
index 0000000..e2d369c
--- /dev/null
+++ b/src/components/CardList/src/CardList.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="p-2">
+    <div class="bg-white mb-2 p-4">
+      <BasicForm @register="registerForm" />
+    </div>
+    {{ sliderProp.width }}
+    <div class="bg-white p-2">
+      <List :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }" :data-source="data" :pagination="paginationProp">
+        <template #header>
+          <div class="flex justify-end space-x-2"
+            ><slot name="header"></slot>
+            <Tooltip>
+              <template #title>
+                <div class="w-50">每行显示数量</div><Slider id="slider" v-bind="sliderProp" v-model:value="grid" @change="sliderChange"
+              /></template>
+              <Button><TableOutlined /></Button>
+            </Tooltip>
+            <Tooltip @click="fetch">
+              <template #title>刷新</template>
+              <Button><RedoOutlined /></Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <ListItem>
+            <Card>
+              <template #title></template>
+              <template #cover>
+                <div :class="height">
+                  <Image :src="item.imgs[0]" />
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <!--              <SettingOutlined key="setting" />-->
+                <EditOutlined key="edit" />
+                <Dropdown
+                  :trigger="['hover']"
+                  :dropMenuList="[
+                    {
+                      text: '删除',
+                      event: '1',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        confirm: handleDelete.bind(null, item.id),
+                      },
+                    },
+                  ]"
+                  popconfirm
+                >
+                  <EllipsisOutlined key="ellipsis" />
+                </Dropdown>
+              </template>
+
+              <CardMeta>
+                <template #title>
+                  <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
+                </template>
+                <template #avatar>
+                  <Avatar :src="item.avatar" />
+                </template>
+                <template #description>{{ item.time }}</template>
+              </CardMeta>
+            </Card>
+          </ListItem>
+        </template>
+      </List>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { EditOutlined, EllipsisOutlined, RedoOutlined, TableOutlined } from '@ant-design/icons-vue';
+  import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Button } from '/@/components/Button';
+  import { isFunction } from '/@/utils/is';
+  import { useSlider, grid } from './data';
+  const ListItem = List.Item;
+  const CardMeta = Card.Meta;
+  const TypographyText = Typography.Text;
+  // 获取slider属性
+  const sliderProp = computed(() => useSlider(4));
+  // 组件接收参数
+  const props = defineProps({
+    // 请求API的参数
+    params: propTypes.object.def({}),
+    //api
+    api: propTypes.func,
+  });
+  //暴露内部方法
+  const emit = defineEmits(['getMethod', 'delete']);
+  //数据
+  const data = ref([]);
+  // 切换每行个数
+  // cover图片自适应高度
+  //修改pageSize并重新请求数据
+
+  const height = computed(() => {
+    return `h-${120 - grid.value * 6}`;
+  });
+  //表单
+  const [registerForm, { validate }] = useForm({
+    schemas: [{ field: 'type', component: 'Input', label: '类型' }],
+    labelWidth: 80,
+    baseColProps: { span: 6 },
+    actionColOptions: { span: 24 },
+    autoSubmitOnEnter: true,
+    submitFunc: handleSubmit,
+  });
+  //表单提交
+  async function handleSubmit() {
+    const data = await validate();
+    await fetch(data);
+  }
+  function sliderChange(n) {
+    pageSize.value = n * 4;
+    fetch();
+  }
+
+  // 自动请求并暴露内部方法
+  onMounted(() => {
+    fetch();
+    emit('getMethod', fetch);
+  });
+
+  async function fetch(p = {}) {
+    const { api, params } = props;
+    if (api && isFunction(api)) {
+      const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p });
+      data.value = res.items;
+      total.value = res.total;
+    }
+  }
+  //分页相关
+  const page = ref(1);
+  const pageSize = ref(36);
+  const total = ref(0);
+  const paginationProp = ref({
+    showSizeChanger: false,
+    showQuickJumper: true,
+    pageSize,
+    current: page,
+    total,
+    showTotal: (total) => `总 ${total} 条`,
+    onChange: pageChange,
+    onShowSizeChange: pageSizeChange,
+  });
+
+  function pageChange(p, pz) {
+    page.value = p;
+    pageSize.value = pz;
+    fetch();
+  }
+  function pageSizeChange(current, size) {
+    pageSize.value = size;
+    fetch();
+  }
+
+  async function handleDelete(id) {
+    emit('delete', id);
+  }
+</script>
diff --git a/src/components/CardList/src/data.ts b/src/components/CardList/src/data.ts
new file mode 100644
index 0000000..ac56cad
--- /dev/null
+++ b/src/components/CardList/src/data.ts
@@ -0,0 +1,25 @@
+import { ref } from 'vue';
+//每行个数
+export const grid = ref(12);
+// slider属性
+export const useSlider = (min = 6, max = 12) => {
+  // 每行显示个数滑动条
+  const getMarks = () => {
+    const l = {};
+    for (let i = min; i < max + 1; i++) {
+      l[i] = {
+        style: {
+          color: '#fff',
+        },
+        label: i,
+      };
+    }
+    return l;
+  };
+  return {
+    min,
+    max,
+    marks: getMarks(),
+    step: 1,
+  };
+};
diff --git a/src/components/ClickOutSide/index.ts b/src/components/ClickOutSide/index.ts
new file mode 100644
index 0000000..5e7dd2d
--- /dev/null
+++ b/src/components/ClickOutSide/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import clickOutSide from './src/ClickOutSide.vue';
+
+export const ClickOutSide = withInstall(clickOutSide);
diff --git a/src/components/ClickOutSide/src/ClickOutSide.vue b/src/components/ClickOutSide/src/ClickOutSide.vue
new file mode 100644
index 0000000..c043cc1
--- /dev/null
+++ b/src/components/ClickOutSide/src/ClickOutSide.vue
@@ -0,0 +1,19 @@
+<template>
+  <div ref="wrap">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { onClickOutside } from '@vueuse/core';
+  const emit = defineEmits(['mounted', 'clickOutside']);
+  const wrap = ref<ElRef>(null);
+
+  onClickOutside(wrap, () => {
+    emit('clickOutside');
+  });
+
+  onMounted(() => {
+    emit('mounted');
+  });
+</script>
diff --git a/src/components/CodeEditor/index.ts b/src/components/CodeEditor/index.ts
new file mode 100644
index 0000000..3255431
--- /dev/null
+++ b/src/components/CodeEditor/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import codeEditor from './src/CodeEditor.vue';
+
+export const CodeEditor = withInstall(codeEditor);
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
new file mode 100644
index 0000000..28abd7b
--- /dev/null
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="h-full">
+    <CodeMirrorEditor :value="getValue" @change="handleValueChange" :mode="mode" :readonly="readonly" />
+  </div>
+</template>
+
+<script lang="ts">
+  const MODE = {
+    JSON: 'application/json',
+    html: 'htmlmixed',
+    js: 'javascript',
+  };
+</script>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import CodeMirrorEditor from './codemirror/CodeMirror.vue';
+  import { isString } from '/@/utils/is';
+  
+  const props = defineProps({
+    value: { type: [Object, String] as PropType<Record<string, any> | string> },
+    mode: { type: String, default: MODE.JSON },
+    readonly: { type: Boolean },
+    autoFormat: { type: Boolean, default: true },
+  });
+
+  const emit = defineEmits(['change', 'update:value', 'format-error']);
+
+  const getValue = computed(() => {
+    const { value, mode, autoFormat } = props;
+    if (!autoFormat || mode !== MODE.JSON) {
+      return value as string;
+    }
+    let result = value;
+    if (isString(value)) {
+      try {
+        result = JSON.parse(value);
+      } catch (e) {
+        emit('format-error', value);
+        return value as string;
+      }
+    }
+    return JSON.stringify(result, null, 2);
+  });
+
+  function handleValueChange(v) {
+    emit('update:value', v);
+    emit('change', v);
+  }
+</script>
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
new file mode 100644
index 0000000..2d3bca1
--- /dev/null
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted, watchEffect, watch, unref, nextTick } from 'vue';
+  import { useDebounceFn } from '@vueuse/core';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+  import CodeMirror from 'codemirror';
+  // css
+  import './codemirror.css';
+  import 'codemirror/theme/idea.css';
+  import 'codemirror/theme/material-palenight.css';
+  // modes
+  import 'codemirror/mode/javascript/javascript';
+  import 'codemirror/mode/css/css';
+  import 'codemirror/mode/htmlmixed/htmlmixed';
+
+  const props = defineProps({
+    mode: { type: String, default: 'application/json' },
+    value: { type: String, default: '' },
+    readonly: { type: Boolean, default: false },
+  });
+
+  const emit = defineEmits(['change']);
+
+  const el = ref();
+  let editor: Nullable<CodeMirror.Editor>;
+
+  const debounceRefresh = useDebounceFn(refresh, 100);
+  const appStore = useAppStore();
+
+  watch(
+    () => props.value,
+    async (value) => {
+      await nextTick();
+      const oldValue = editor?.getValue();
+      if (value !== oldValue) {
+        editor?.setValue(value ? value : '');
+      }
+    },
+    { flush: 'post' }
+  );
+
+  watchEffect(() => {
+    editor?.setOption('mode', props.mode);
+  });
+
+  watch(
+    () => appStore.getDarkMode,
+    async () => {
+      setTheme();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function setTheme() {
+    unref(editor)?.setOption('theme', appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight');
+  }
+
+  function refresh() {
+    editor?.refresh();
+  }
+
+  async function init() {
+    const addonOptions = {
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers'],
+    };
+
+    editor = CodeMirror(el.value!, {
+      value: '',
+      mode: props.mode,
+      readOnly: props.readonly,
+      tabSize: 2,
+      theme: 'material-palenight',
+      lineWrapping: true,
+      lineNumbers: true,
+      ...addonOptions,
+    });
+    editor?.setValue(props.value);
+    setTheme();
+    editor?.on('change', () => {
+      emit('change', editor?.getValue());
+    });
+  }
+
+  onMounted(async () => {
+    await nextTick();
+    init();
+    useWindowSizeFn(debounceRefresh);
+  });
+
+  onUnmounted(() => {
+    editor = null;
+  });
+</script>
diff --git a/src/components/CodeEditor/src/codemirror/codeMirror.ts b/src/components/CodeEditor/src/codemirror/codeMirror.ts
new file mode 100644
index 0000000..e04f51b
--- /dev/null
+++ b/src/components/CodeEditor/src/codemirror/codeMirror.ts
@@ -0,0 +1,21 @@
+import CodeMirror from 'codemirror';
+import './codemirror.css';
+import 'codemirror/theme/idea.css';
+import 'codemirror/theme/material-palenight.css';
+// import 'codemirror/addon/lint/lint.css';
+
+// modes
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+// addons
+// import 'codemirror/addon/edit/closebrackets';
+// import 'codemirror/addon/edit/closetag';
+// import 'codemirror/addon/comment/comment';
+// import 'codemirror/addon/fold/foldcode';
+// import 'codemirror/addon/fold/foldgutter';
+// import 'codemirror/addon/fold/brace-fold';
+// import 'codemirror/addon/fold/indent-fold';
+// import 'codemirror/addon/lint/json-lint';
+// import 'codemirror/addon/fold/comment-fold';
+export { CodeMirror };
diff --git a/src/components/CodeEditor/src/codemirror/codemirror.css b/src/components/CodeEditor/src/codemirror/codemirror.css
new file mode 100644
index 0000000..dc7c681
--- /dev/null
+++ b/src/components/CodeEditor/src/codemirror/codemirror.css
@@ -0,0 +1,539 @@
+/* BASICS */
+
+.CodeMirror {
+  --base: #545281;
+  --comment: hsl(210, 25%, 60%);
+  --keyword: #af4ab1;
+  --variable: #0055d1;
+  --function: #c25205;
+  --string: #2ba46d;
+  --number: #c25205;
+  --tags: #d00;
+  --qualifier: #ff6032;
+  --important: var(--string);
+
+  position: relative;
+  height: auto;
+  height: 100%;
+  overflow: hidden;
+  font-family: var(--font-code);
+  background: white;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  min-height: 1px; /* prevents collapsing before first draw */
+  padding: 4px 0; /* Vertical padding around content */
+  cursor: text;
+}
+
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  min-height: 100%;
+  white-space: nowrap;
+  background-color: transparent;
+  border-right: 1px solid #ddd;
+}
+
+.CodeMirror-linenumber {
+  min-width: 20px;
+  padding: 0 3px 0 5px;
+  color: var(--comment);
+  text-align: right;
+  white-space: nowrap;
+  opacity: 0.6;
+}
+
+.CodeMirror-guttermarker {
+  color: black;
+}
+
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
+
+/* FOLD GUTTER */
+
+.CodeMirror-foldmarker {
+  font-family: arial;
+  line-height: 0.3;
+  color: #414141;
+  text-shadow: #f96 1px 1px 2px, #f96 -1px -1px 2px, #f96 1px -1px 2px, #f96 -1px 1px 2px;
+  cursor: pointer;
+}
+
+.CodeMirror-foldgutter {
+  width: 0.7em;
+}
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+}
+
+.CodeMirror-foldgutter-open::after,
+.CodeMirror-foldgutter-folded::after {
+  position: relative;
+  top: -0.1em;
+  display: inline-block;
+  font-size: 0.8em;
+  content: '>';
+  opacity: 0.8;
+  transform: rotate(90deg);
+  transition: transform 0.2s;
+}
+
+.CodeMirror-foldgutter-folded::after {
+  transform: none;
+}
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  position: absolute;
+  width: 0;
+  pointer-events: none;
+  border-right: none;
+  border-left: 1px solid black;
+}
+
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  background: #7e7;
+  border: 0 !important;
+}
+
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  background-color: #7e7;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+@-moz-keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}
+@-webkit-keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}
+
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+.CodeMirror-rulers {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  bottom: -20px;
+  left: 0;
+  overflow: hidden;
+}
+
+.CodeMirror-ruler {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid #ccc;
+}
+
+/* DEFAULT THEME */
+.cm-s-default.CodeMirror {
+  background-color: transparent;
+}
+
+.cm-s-default .cm-header {
+  color: blue;
+}
+
+.cm-s-default .cm-quote {
+  color: #090;
+}
+
+.cm-negative {
+  color: #d44;
+}
+
+.cm-positive {
+  color: #292;
+}
+
+.cm-header,
+.cm-strong {
+  font-weight: bold;
+}
+
+.cm-em {
+  font-style: italic;
+}
+
+.cm-link {
+  text-decoration: underline;
+}
+
+.cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-default .cm-atom,
+.cm-s-default .cm-def,
+.cm-s-default .cm-property,
+.cm-s-default .cm-variable-2,
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-punctuation {
+  color: var(--base);
+}
+
+.cm-s-default .cm-hr,
+.cm-s-default .cm-comment {
+  color: var(--comment);
+}
+
+.cm-s-default .cm-attribute,
+.cm-s-default .cm-keyword {
+  color: var(--keyword);
+}
+
+.cm-s-default .cm-variable {
+  color: var(--variable);
+}
+
+.cm-s-default .cm-bracket,
+.cm-s-default .cm-tag {
+  color: var(--tags);
+}
+
+.cm-s-default .cm-number {
+  color: var(--number);
+}
+
+.cm-s-default .cm-string,
+.cm-s-default .cm-string-2 {
+  color: var(--string);
+}
+
+.cm-s-default .cm-type {
+  color: #085;
+}
+
+.cm-s-default .cm-meta {
+  color: #555;
+}
+
+.cm-s-default .cm-qualifier {
+  color: var(--qualifier);
+}
+
+.cm-s-default .cm-builtin {
+  color: #7539ff;
+}
+
+.cm-s-default .cm-link {
+  color: var(--flash);
+}
+
+.cm-s-default .cm-error {
+  color: #ff008c;
+}
+
+.cm-invalidchar {
+  color: #ff008c;
+}
+
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0b0;
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #a22;
+}
+
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, 0.3);
+}
+
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror-scroll {
+  position: relative;
+  height: 100%;
+  padding-bottom: 30px;
+  margin-right: -30px;
+
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px;
+  overflow: scroll !important; /* Things will break if this is overridden */
+  outline: none; /* Prevent dragging from highlighting the element */
+}
+
+.CodeMirror-sizer {
+  position: relative;
+  margin-bottom: 20px !important;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+
+.CodeMirror-vscrollbar {
+  top: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.CodeMirror-hscrollbar {
+  bottom: 0;
+  left: 0;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+.CodeMirror-scrollbar-filler {
+  right: 0;
+  bottom: 0;
+}
+
+.CodeMirror-gutter-filler {
+  bottom: 0;
+  left: 0;
+}
+
+.CodeMirror-gutter {
+  display: inline-block;
+  height: 100%;
+  margin-bottom: -30px;
+  white-space: normal;
+  vertical-align: top;
+}
+
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 4;
+}
+
+.CodeMirror-gutter-elt {
+  position: absolute;
+  z-index: 4;
+  cursor: default;
+}
+
+.CodeMirror-gutter-wrapper ::selection {
+  background-color: transparent;
+}
+
+.CodeMirror-gutter-wrapper ::-moz-selection {
+  background-color: transparent;
+}
+
+.CodeMirror pre {
+  position: relative;
+  z-index: 2;
+  padding: 0 4px; /* Horizontal padding of content */
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  word-wrap: normal;
+  white-space: pre;
+  background: transparent;
+  border-width: 0;
+
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+
+.CodeMirror-wrap pre {
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-rtl pre {
+  direction: rtl;
+}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-measure pre {
+  position: static;
+}
+
+div.CodeMirror-cursors {
+  position: relative;
+  z-index: 3;
+  visibility: hidden;
+}
+
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, 0.4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border {
+  padding-right: 0.1px;
+}
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack::after {
+  content: '';
+}
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext {
+  background: none;
+}
diff --git a/src/components/CodeEditor/src/typing.ts b/src/components/CodeEditor/src/typing.ts
new file mode 100644
index 0000000..34b5ed1
--- /dev/null
+++ b/src/components/CodeEditor/src/typing.ts
@@ -0,0 +1,5 @@
+export enum MODE {
+  JSON = 'application/json',
+  HTML = 'htmlmixed',
+  JS = 'javascript',
+}
diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts
new file mode 100644
index 0000000..e1230a0
--- /dev/null
+++ b/src/components/Container/index.ts
@@ -0,0 +1,10 @@
+import { withInstall } from '/@/utils';
+import collapseContainer from './src/collapse/CollapseContainer.vue';
+import scrollContainer from './src/ScrollContainer.vue';
+import lazyContainer from './src/LazyContainer.vue';
+
+export const CollapseContainer = withInstall(collapseContainer);
+export const ScrollContainer = withInstall(scrollContainer);
+export const LazyContainer = withInstall(lazyContainer);
+
+export * from './src/typing';
diff --git a/src/components/Container/src/LazyContainer.vue b/src/components/Container/src/LazyContainer.vue
new file mode 100644
index 0000000..4e26242
--- /dev/null
+++ b/src/components/Container/src/LazyContainer.vue
@@ -0,0 +1,138 @@
+<template>
+  <transition-group class="h-full w-full" v-bind="$attrs" ref="elRef" :name="transitionName" :tag="tag" mode="out-in">
+    <div key="component" v-if="isInit">
+      <slot :loading="loading"></slot>
+    </div>
+    <div key="skeleton" v-else>
+      <slot name="skeleton" v-if="$slots.skeleton"></slot>
+      <Skeleton v-else />
+    </div>
+  </transition-group>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
+  import { Skeleton } from 'ant-design-vue';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
+
+  interface State {
+    isInit: boolean;
+    loading: boolean;
+    intersectionObserverInstance: IntersectionObserver | null;
+  }
+
+  const props = {
+    /**
+     * Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
+     */
+    timeout: { type: Number },
+    /**
+     * The viewport where the component is located.
+     * If the component is scrolling in the page container, the viewport is the container
+     */
+    viewport: {
+      type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<HTMLElement>,
+      default: () => null,
+    },
+    /**
+     * Preload threshold, css unit
+     */
+    threshold: { type: String, default: '0px' },
+    /**
+     * The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
+     */
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: (v) => ['vertical', 'horizontal'].includes(v),
+    },
+    /**
+     * The label name of the outer container that wraps the component
+     */
+    tag: { type: String, default: 'div' },
+    maxWaitingTime: { type: Number, default: 80 },
+    /**
+     * transition name
+     */
+    transitionName: { type: String, default: 'lazy-container' },
+  };
+
+  export default defineComponent({
+    name: 'LazyContainer',
+    components: { Skeleton },
+    inheritAttrs: false,
+    props,
+    emits: ['init'],
+    setup(props, { emit }) {
+      const elRef = ref();
+      const state = reactive<State>({
+        isInit: false,
+        loading: false,
+        intersectionObserverInstance: null,
+      });
+
+      onMounted(() => {
+        immediateInit();
+        initIntersectionObserver();
+      });
+
+      // If there is a set delay time, it will be executed immediately
+      function immediateInit() {
+        const { timeout } = props;
+        timeout &&
+          useTimeoutFn(() => {
+            init();
+          }, timeout);
+      }
+
+      function init() {
+        state.loading = true;
+
+        useTimeoutFn(() => {
+          if (state.isInit) return;
+          state.isInit = true;
+          emit('init');
+        }, props.maxWaitingTime || 80);
+      }
+
+      function initIntersectionObserver() {
+        const { timeout, direction, threshold } = props;
+        if (timeout) return;
+        // According to the scrolling direction to construct the viewport margin, used to load in advance
+        let rootMargin = '0px';
+        switch (direction) {
+          case 'vertical':
+            rootMargin = `${threshold} 0px`;
+            break;
+          case 'horizontal':
+            rootMargin = `0px ${threshold}`;
+            break;
+        }
+
+        try {
+          const { stop, observer } = useIntersectionObserver({
+            rootMargin,
+            target: toRef(elRef.value, '$el'),
+            onIntersect: (entries: any[]) => {
+              const isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatio;
+              if (isIntersecting) {
+                init();
+                if (observer) {
+                  stop();
+                }
+              }
+            },
+            root: toRef(props, 'viewport'),
+          });
+        } catch (e) {
+          init();
+        }
+      }
+      return {
+        elRef,
+        ...toRefs(state),
+      };
+    },
+  });
+</script>
diff --git a/src/components/Container/src/ScrollContainer.vue b/src/components/Container/src/ScrollContainer.vue
new file mode 100644
index 0000000..65c71ed
--- /dev/null
+++ b/src/components/Container/src/ScrollContainer.vue
@@ -0,0 +1,93 @@
+<template>
+  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
+    <slot></slot>
+  </Scrollbar>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref, nextTick } from 'vue';
+  import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
+  import { useScrollTo } from '/@/hooks/event/useScrollTo';
+
+  export default defineComponent({
+    name: 'ScrollContainer',
+    components: { Scrollbar },
+    setup() {
+      const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
+
+      /**
+       * Scroll to the specified position
+       */
+      function scrollTo(to: number, duration = 500) {
+        const scrollbar = unref(scrollbarRef);
+        if (!scrollbar) {
+          return;
+        }
+        nextTick(() => {
+          const wrap = unref(scrollbar.wrap);
+          if (!wrap) {
+            return;
+          }
+          const { start } = useScrollTo({
+            el: wrap,
+            to,
+            duration,
+          });
+          start();
+        });
+      }
+
+      function getScrollWrap() {
+        const scrollbar = unref(scrollbarRef);
+        if (!scrollbar) {
+          return null;
+        }
+        return scrollbar.wrap;
+      }
+
+      /**
+       * Scroll to the bottom
+       */
+      function scrollBottom() {
+        const scrollbar = unref(scrollbarRef);
+        if (!scrollbar) {
+          return;
+        }
+        nextTick(() => {
+          const wrap = unref(scrollbar.wrap) as any;
+          if (!wrap) {
+            return;
+          }
+          const scrollHeight = wrap.scrollHeight as number;
+          const { start } = useScrollTo({
+            el: wrap,
+            to: scrollHeight,
+          });
+          start();
+        });
+      }
+
+      return {
+        scrollbarRef,
+        scrollTo,
+        scrollBottom,
+        getScrollWrap,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .scroll-container {
+    width: 100%;
+    height: 100%;
+
+    .scrollbar__wrap {
+      margin-bottom: 18px !important;
+      overflow-x: hidden;
+    }
+
+    .scrollbar__view {
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
new file mode 100644
index 0000000..8e22046
--- /dev/null
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -0,0 +1,106 @@
+<template>
+  <div :class="prefixCls">
+    <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
+      <template #title>
+        <slot name="title"></slot>
+      </template>
+      <template #action>
+        <slot name="action"></slot>
+      </template>
+    </CollapseHeader>
+
+    <div class="p-2">
+      <CollapseTransition :enable="canExpan">
+        <Skeleton v-if="loading" :active="loading" />
+        <div :class="`${prefixCls}__body`" v-else v-show="show">
+          <slot></slot>
+        </div>
+      </CollapseTransition>
+    </div>
+    <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref } from 'vue';
+  // component
+  import { Skeleton } from 'ant-design-vue';
+  import { CollapseTransition } from '/@/components/Transition';
+  import CollapseHeader from './CollapseHeader.vue';
+  import { triggerWindowResize } from '/@/utils/event';
+  // hook
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const props = defineProps({
+    title: { type: String, default: '' },
+    defaultExpan: { type: Boolean, default: true },
+    loading: { type: Boolean },
+    /**
+     *  Can it be expanded
+     */
+    canExpan: { type: Boolean, default: true },
+    /**
+     * Warm reminder on the right side of the title
+     */
+    helpMessage: {
+      type: [Array, String] as PropType<string[] | string>,
+      default: '',
+    },
+    /**
+     * Whether to trigger window.resize when expanding and contracting,
+     * Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
+     */
+    triggerWindowResize: { type: Boolean },
+    /**
+     * Delayed loading time
+     */
+    lazyTime: { type: Number, default: 0 },
+  });
+  // 代码逻辑说明: 【issues/7402】CollapseContainer组件增加默认不展开属性
+  const show = ref(props.defaultExpan);
+
+  const { prefixCls } = useDesign('collapse-container');
+
+  /**
+   * @description: Handling development events
+   */
+  function handleExpand() {
+    show.value = !show.value;
+    if (props.triggerWindowResize) {
+      // 200 milliseconds here is because the expansion has animation,
+      useTimeoutFn(triggerWindowResize, 200);
+    }
+  }
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-collapse-container';
+
+  .@{prefix-cls} {
+    background-color: @component-background;
+    border-radius: 2px;
+    transition: all 0.3s ease-in-out;
+
+    &__header {
+      display: flex;
+      height: 32px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid @border-color-light;
+    }
+
+    &__footer {
+      border-top: 1px solid @border-color-light;
+    }
+
+    &__action {
+      display: flex;
+      text-align: right;
+      flex: 1;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+</style>
diff --git a/src/components/Container/src/collapse/CollapseHeader.vue b/src/components/Container/src/collapse/CollapseHeader.vue
new file mode 100644
index 0000000..4196c0a
--- /dev/null
+++ b/src/components/Container/src/collapse/CollapseHeader.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
+    <BasicTitle :helpMessage="helpMessage" normal>
+      <template v-if="title">
+        {{ title }}
+      </template>
+      <template v-else>
+        <slot name="title"></slot>
+      </template>
+    </BasicTitle>
+    <div :class="`${prefixCls}__action`">
+      <slot name="action"></slot>
+      <BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicArrow, BasicTitle } from '/@/components/Basic';
+
+  const props = {
+    prefixCls: { type: String },
+    helpMessage: {
+      type: [Array, String] as PropType<string[] | string>,
+      default: '',
+    },
+    title: { type: String },
+    show: { type: Boolean },
+    canExpan: { type: Boolean },
+  };
+
+  export default defineComponent({
+    components: { BasicArrow, BasicTitle },
+    inheritAttrs: false,
+    props,
+    emits: ['expand'],
+  });
+</script>
diff --git a/src/components/Container/src/typing.ts b/src/components/Container/src/typing.ts
new file mode 100644
index 0000000..86c03be
--- /dev/null
+++ b/src/components/Container/src/typing.ts
@@ -0,0 +1,17 @@
+export type ScrollType = 'default' | 'main';
+
+export interface CollapseContainerOptions {
+  canExpand?: boolean;
+  title?: string;
+  helpMessage?: Array<any> | string;
+}
+export interface ScrollContainerOptions {
+  enableScroll?: boolean;
+  type?: ScrollType;
+}
+
+export type ScrollActionType = RefType<{
+  scrollBottom: () => void;
+  getScrollWrap: () => Nullable<HTMLElement>;
+  scrollTo: (top: number) => void;
+}>;
diff --git a/src/components/ContextMenu/index.ts b/src/components/ContextMenu/index.ts
new file mode 100644
index 0000000..ed294d7
--- /dev/null
+++ b/src/components/ContextMenu/index.ts
@@ -0,0 +1,3 @@
+export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
+
+export * from './src/typing';
diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue
new file mode 100644
index 0000000..57dc14f
--- /dev/null
+++ b/src/components/ContextMenu/src/ContextMenu.vue
@@ -0,0 +1,197 @@
+<script lang="tsx">
+  import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
+  import type { FunctionalComponent, CSSProperties } from 'vue';
+  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
+  import Icon from '/@/components/Icon';
+  import { Menu, Divider } from 'ant-design-vue';
+
+  const prefixCls = 'context-menu';
+
+  const props = {
+    width: { type: Number, default: 156 },
+    customEvent: { type: Object as PropType<Event>, default: null },
+    styles: { type: Object as PropType<CSSProperties> },
+    showIcon: { type: Boolean, default: true },
+    axis: {
+      // The position of the right mouse button click
+      type: Object as PropType<Axis>,
+      default() {
+        return { x: 0, y: 0 };
+      },
+    },
+    items: {
+      // The most important list, if not, will not be displayed
+      type: Array as PropType<ContextMenuItem[]>,
+      default() {
+        return [];
+      },
+    },
+  };
+
+  const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
+    const { item } = props;
+    return (
+      <span style="display: inline-block; width: 100%; " class="px-4" onClick={props.handler.bind(null, item)}>
+        {props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
+        <span>{item.label}</span>
+      </span>
+    );
+  };
+
+  export default defineComponent({
+    name: 'ContextMenu',
+    props,
+    setup(props) {
+      const wrapRef = ref(null);
+      const showRef = ref(false);
+
+      const getStyle = computed((): CSSProperties => {
+        const { axis, items, styles, width } = props;
+        const { x, y } = axis || { x: 0, y: 0 };
+        const menuHeight = (items || []).length * 40;
+        const menuWidth = width;
+        const body = document.body;
+
+        const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+        const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+        return {
+          ...styles,
+          width: `${width}px`,
+          left: `${left + 1}px`,
+          top: `${top + 1}px`,
+        };
+      });
+
+      onMounted(() => {
+        nextTick(() => (showRef.value = true));
+      });
+
+      onUnmounted(() => {
+        const el = unref(wrapRef);
+        el && document.body.removeChild(el);
+      });
+
+      function handleAction(item: ContextMenuItem, e: MouseEvent) {
+        const { handler, disabled } = item;
+        if (disabled) {
+          return;
+        }
+        showRef.value = false;
+        e?.stopPropagation();
+        e?.preventDefault();
+        handler?.();
+      }
+
+      function renderMenuItem(items: ContextMenuItem[]) {
+        return items.map((item) => {
+          const { disabled, label, children, divider = false } = item;
+
+          const contentProps = {
+            item,
+            handler: handleAction,
+            showIcon: props.showIcon,
+          };
+
+          if (!children || children.length === 0) {
+            return (
+              <>
+                <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
+                  <ItemContent {...contentProps} />
+                </Menu.Item>
+                {divider ? <Divider key={`d-${label}`} /> : null}
+              </>
+            );
+          }
+          if (!unref(showRef)) return null;
+
+          return (
+            <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
+              {{
+                title: () => <ItemContent {...contentProps} />,
+                default: () => renderMenuItem(children),
+              }}
+            </Menu.SubMenu>
+          );
+        });
+      }
+      return () => {
+        if (!unref(showRef)) {
+          return null;
+        }
+        const { items } = props;
+        return (
+          <Menu inlineIndent={12} mode="vertical" class={prefixCls} ref={wrapRef} style={unref(getStyle)}>
+            {renderMenuItem(items)}
+          </Menu>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @default-height: 42px !important;
+
+  @small-height: 36px !important;
+
+  @large-height: 36px !important;
+
+  .item-style() {
+    li {
+      display: inline-block;
+      // 代码逻辑说明: 【TV360X-1576】右键样式选中缺少了一块---
+      width: 100% !important;
+      height: @default-height;
+      margin: 0 !important;
+      line-height: @default-height;
+
+      span {
+        line-height: @default-height;
+      }
+
+      > div {
+        margin: 0 !important;
+      }
+
+      &:not(.ant-menu-item-disabled):hover {
+        color: @text-color-base;
+        background-color: @item-hover-bg;
+      }
+    }
+  }
+
+  .context-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    display: block;
+    width: 156px;
+    margin: 0;
+    list-style: none;
+    background-color: @component-background;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
+    background-clip: padding-box;
+    user-select: none;
+
+    .item-style();
+
+    .ant-divider {
+      margin: 0 0;
+    }
+
+    &__popup {
+      .ant-divider {
+        margin: 0 0;
+      }
+
+      .item-style();
+    }
+
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+      padding: 0 !important;
+    }
+  }
+</style>
diff --git a/src/components/ContextMenu/src/createContextMenu.ts b/src/components/ContextMenu/src/createContextMenu.ts
new file mode 100644
index 0000000..8f7a1c8
--- /dev/null
+++ b/src/components/ContextMenu/src/createContextMenu.ts
@@ -0,0 +1,75 @@
+import contextMenuVue from './ContextMenu.vue';
+import { isClient } from '/@/utils/is';
+import { CreateContextOptions, ContextMenuProps } from './typing';
+import { createVNode, render } from 'vue';
+
+const menuManager: {
+  domList: Element[];
+  resolve: Fn;
+} = {
+  domList: [],
+  resolve: () => {},
+};
+
+export const createContextMenu = function (options: CreateContextOptions) {
+  const { event } = options || {};
+
+  event && event?.preventDefault();
+
+  if (!isClient) {
+    return;
+  }
+  return new Promise((resolve) => {
+    const body = document.body;
+
+    const container = document.createElement('div');
+    const propsData: Partial<ContextMenuProps> = {};
+    if (options.styles) {
+      propsData.styles = options.styles;
+    }
+
+    if (options.items) {
+      propsData.items = options.items;
+    }
+
+    if (options.event) {
+      propsData.customEvent = event;
+      propsData.axis = { x: event.clientX, y: event.clientY };
+    }
+
+    const vm = createVNode(contextMenuVue, propsData);
+    render(vm, container);
+
+    const handleClick = function () {
+      menuManager.resolve('');
+    };
+
+    menuManager.domList.push(container);
+
+    const remove = function () {
+      menuManager.domList.forEach((dom: Element) => {
+        try {
+          dom && body.removeChild(dom);
+        } catch (error) {}
+      });
+      body.removeEventListener('click', handleClick);
+      body.removeEventListener('scroll', handleClick);
+    };
+
+    menuManager.resolve = function (arg) {
+      remove();
+      resolve(arg);
+    };
+    remove();
+    body.appendChild(container);
+    body.addEventListener('click', handleClick);
+    body.addEventListener('scroll', handleClick);
+  });
+};
+
+export const destroyContextMenu = function () {
+  if (menuManager) {
+    menuManager.resolve('');
+    menuManager.domList = [];
+  }
+};
diff --git a/src/components/ContextMenu/src/typing.ts b/src/components/ContextMenu/src/typing.ts
new file mode 100644
index 0000000..899d36b
--- /dev/null
+++ b/src/components/ContextMenu/src/typing.ts
@@ -0,0 +1,35 @@
+export interface Axis {
+  x: number;
+  y: number;
+}
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+  children?: ContextMenuItem[];
+}
+export interface CreateContextOptions {
+  event: MouseEvent;
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export interface ContextMenuProps {
+  event?: MouseEvent;
+  styles?: any;
+  items: ContextMenuItem[];
+  customEvent?: MouseEvent;
+  axis?: Axis;
+  width?: number;
+  showIcon?: boolean;
+}
+
+export interface ItemContentProps {
+  showIcon: boolean | undefined;
+  item: ContextMenuItem;
+  handler: Fn;
+}
diff --git a/src/components/CountDown/index.ts b/src/components/CountDown/index.ts
new file mode 100644
index 0000000..9809416
--- /dev/null
+++ b/src/components/CountDown/index.ts
@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import countButton from './src/CountButton.vue';
+import countdownInput from './src/CountdownInput.vue';
+
+export const CountdownInput = withInstall(countdownInput);
+export const CountButton = withInstall(countButton);
diff --git a/src/components/CountDown/src/CountButton.vue b/src/components/CountDown/src/CountButton.vue
new file mode 100644
index 0000000..b842bb5
--- /dev/null
+++ b/src/components/CountDown/src/CountButton.vue
@@ -0,0 +1,72 @@
+<template>
+  <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
+    {{ getButtonText }}
+  </Button>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="handleStart" />
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
+  import { Button } from 'ant-design-vue';
+  import { useCountdown } from './useCountdown';
+  import { isFunction } from '/@/utils/is';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useModal } from "@/components/Modal";
+  import { createAsyncComponent } from "@/utils/factory/createAsyncComponent";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+  const CaptchaModal = createAsyncComponent(() => import('/@/components/jeecg/captcha/CaptchaModal.vue'));
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+
+  const props = {
+    value: { type: [Object, Number, String, Array] },
+    count: { type: Number, default: 60 },
+    beforeStartFunc: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
+
+  export default defineComponent({
+    name: 'CountButton',
+    components: { Button, CaptchaModal },
+    props,
+    setup(props) {
+      const loading = ref(false);
+
+      const { currentCount, isStart, start, reset } = useCountdown(props.count);
+      const { t } = useI18n();
+
+      const getButtonText = computed(() => {
+        return !unref(isStart) ? t('component.countdown.normalText') : t('component.countdown.sendText', [unref(currentCount)]);
+      });
+
+      watchEffect(() => {
+        props.value === undefined && reset();
+      });
+
+      /**
+       * @description: Judge whether there is an external function before execution, and decide whether to start after execution
+       */
+      async function handleStart() {
+        const { beforeStartFunc } = props;
+        if (beforeStartFunc && isFunction(beforeStartFunc)) {
+          loading.value = true;
+          try {
+            // 代码逻辑说明: 【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+            const canStart = await beforeStartFunc().catch((res) =>{
+              if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+                openCaptchaModal(true, {});
+              }
+            });
+            canStart && start();
+          } finally {
+            loading.value = false;
+          }
+        } else {
+          start();
+        }
+      }
+      return { handleStart, currentCount, loading, getButtonText, isStart, captchaRegisterModal };
+    },
+  });
+</script>
diff --git a/src/components/CountDown/src/CountdownInput.vue b/src/components/CountDown/src/CountdownInput.vue
new file mode 100644
index 0000000..6a49f77
--- /dev/null
+++ b/src/components/CountDown/src/CountdownInput.vue
@@ -0,0 +1,54 @@
+<template>
+  <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
+    <template #addonAfter>
+      <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
+    </template>
+    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </a-input>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import CountButton from './CountButton.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItemSingle';
+
+  const props = {
+    value: { type: String },
+    size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
+    count: { type: Number, default: 60 },
+    sendCodeApi: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
+
+  export default defineComponent({
+    name: 'CountDownInput',
+    components: { CountButton },
+    inheritAttrs: false,
+    props,
+    setup(props) {
+      const { prefixCls } = useDesign('countdown-input');
+      const [state] = useRuleFormItem(props);
+
+      return { prefixCls, state };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-countdown-input';
+
+  .@{prefix-cls} {
+    .ant-input-group-addon {
+      padding-right: 0;
+      background-color: transparent;
+      border: none;
+
+      button {
+        font-size: 14px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/CountDown/src/useCountdown.ts b/src/components/CountDown/src/useCountdown.ts
new file mode 100644
index 0000000..316d69a
--- /dev/null
+++ b/src/components/CountDown/src/useCountdown.ts
@@ -0,0 +1,51 @@
+import { ref, unref } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+
+export function useCountdown(count: number) {
+  const currentCount = ref(count);
+
+  const isStart = ref(false);
+
+  let timerId: ReturnType<typeof setInterval> | null;
+
+  function clear() {
+    timerId && window.clearInterval(timerId);
+  }
+
+  function stop() {
+    isStart.value = false;
+    clear();
+    timerId = null;
+  }
+
+  function start() {
+    if (unref(isStart) || !!timerId) {
+      return;
+    }
+    isStart.value = true;
+    timerId = setInterval(() => {
+      if (unref(currentCount) === 1) {
+        stop();
+        currentCount.value = count;
+      } else {
+        currentCount.value -= 1;
+      }
+    }, 1000);
+  }
+
+  function reset() {
+    currentCount.value = count;
+    stop();
+  }
+
+  function restart() {
+    reset();
+    start();
+  }
+
+  tryOnUnmounted(() => {
+    reset();
+  });
+
+  return { start, reset, restart, clear, stop, currentCount, isStart };
+}
diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts
new file mode 100644
index 0000000..36a4e65
--- /dev/null
+++ b/src/components/CountTo/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import countTo from './src/CountTo.vue';
+
+export const CountTo = withInstall(countTo);
diff --git a/src/components/CountTo/src/CountTo.vue b/src/components/CountTo/src/CountTo.vue
new file mode 100644
index 0000000..7de3361
--- /dev/null
+++ b/src/components/CountTo/src/CountTo.vue
@@ -0,0 +1,110 @@
+<template>
+  <span :style="{ color }">
+    {{ value }}
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
+  import { useTransition, TransitionPresets } from '@vueuse/core';
+  import { isNumber } from '/@/utils/is';
+
+  const props = {
+    startVal: { type: Number, default: 0 },
+    endVal: { type: Number, default: 2021 },
+    duration: { type: Number, default: 1500 },
+    autoplay: { type: Boolean, default: true },
+    decimals: {
+      type: Number,
+      default: 0,
+      validator(value: number) {
+        return value >= 0;
+      },
+    },
+    prefix: { type: String, default: '' },
+    suffix: { type: String, default: '' },
+    separator: { type: String, default: ',' },
+    decimal: { type: String, default: '.' },
+    /**
+     * font color
+     */
+    color: { type: String },
+    /**
+     * Turn on digital animation
+     */
+    useEasing: { type: Boolean, default: true },
+    /**
+     * Digital animation
+     */
+    transition: { type: String, default: 'linear' },
+  };
+
+  export default defineComponent({
+    name: 'CountTo',
+    props,
+    emits: ['onStarted', 'onFinished'],
+    setup(props, { emit }) {
+      const source = ref(props.startVal);
+      const disabled = ref(false);
+      let outputValue = useTransition(source);
+
+      const value = computed(() => formatNumber(unref(outputValue)));
+
+      watchEffect(() => {
+        source.value = props.startVal;
+      });
+
+      watch([() => props.startVal, () => props.endVal], () => {
+        if (props.autoplay) {
+          start();
+        }
+      });
+
+      onMounted(() => {
+        props.autoplay && start();
+      });
+
+      function start() {
+        run();
+        source.value = props.endVal;
+      }
+
+      function reset() {
+        source.value = props.startVal;
+        run();
+      }
+
+      function run() {
+        outputValue = useTransition(source, {
+          disabled,
+          duration: props.duration,
+          onFinished: () => emit('onFinished'),
+          onStarted: () => emit('onStarted'),
+          ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+        });
+      }
+
+      function formatNumber(num: number | string) {
+        if (!num && num !== 0) {
+          return '';
+        }
+        const { decimals, decimal, separator, suffix, prefix } = props;
+        num = Number(num).toFixed(decimals);
+        num += '';
+
+        const x = num.split('.');
+        let x1 = x[0];
+        const x2 = x.length > 1 ? decimal + x[1] : '';
+
+        const rgx = /(\d+)(\d{3})/;
+        if (separator && !isNumber(separator)) {
+          while (rgx.test(x1)) {
+            x1 = x1.replace(rgx, '$1' + separator + '$2');
+          }
+        }
+        return prefix + x1 + x2 + suffix;
+      }
+
+      return { value, start, reset };
+    },
+  });
+</script>
diff --git a/src/components/Cropper/index.ts b/src/components/Cropper/index.ts
new file mode 100644
index 0000000..88d6d1d
--- /dev/null
+++ b/src/components/Cropper/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from '/@/utils';
+import cropperImage from './src/Cropper.vue';
+import avatarCropper from './src/CropperAvatar.vue';
+
+export * from './src/typing';
+export const CropperImage = withInstall(cropperImage);
+export const CropperAvatar = withInstall(avatarCropper);
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
new file mode 100644
index 0000000..33a6fef
--- /dev/null
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -0,0 +1,237 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="t('component.cropper.modalTitle')"
+    width="800px"
+    :canFullscreen="false"
+    @ok="handleOk"
+    :okText="t('component.cropper.okText')"
+  >
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage v-if="src" :src="src" height="300px" :circled="circled" @cropend="handleCropend" @ready="handleReady" />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
+            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
+              <a-button size="small" preIcon="ant-design:upload-outlined" type="primary" />
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
+              <a-button type="primary" preIcon="ant-design:reload-outlined" size="small" :disabled="!src" @click="handlerToolbar('reset')" />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-left-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', -45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
+              <a-button
+                type="primary"
+                preIcon="ant-design:rotate-right-outlined"
+                size="small"
+                :disabled="!src"
+                @click="handlerToolbar('rotate', 45)"
+              />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
+              <a-button type="primary" preIcon="vaadin:arrows-long-h" size="small" :disabled="!src" @click="handlerToolbar('scaleX')" />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
+              <a-button type="primary" preIcon="vaadin:arrows-long-v" size="small" :disabled="!src" @click="handlerToolbar('scaleY')" />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
+              <a-button type="primary" preIcon="ant-design:zoom-in-outlined" size="small" :disabled="!src" @click="handlerToolbar('zoom', 0.1)" />
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
+              <a-button type="primary" preIcon="ant-design:zoom-out-outlined" size="small" :disabled="!src" @click="handlerToolbar('zoom', -0.1)" />
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img :src="previewSource" v-if="previewSource" :alt="t('component.cropper.preview')" />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource" size="large" />
+            <Avatar :src="previewSource" :size="48" />
+            <Avatar :src="previewSource" :size="64" />
+            <Avatar :src="previewSource" :size="80" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import type { CropendResult, Cropper } from './typing';
+
+  import { defineComponent, ref } from 'vue';
+  import CropperImage from './Cropper.vue';
+  import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { dataURLtoBlob } from '/@/utils/file/base64Conver';
+  import { isFunction } from '/@/utils/is';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  type apiFunParams = { file: Blob; name: string; filename: string };
+
+  const props = {
+    circled: { type: Boolean, default: true },
+    uploadApi: {
+      type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+    },
+  };
+
+  export default defineComponent({
+    name: 'CropperModal',
+    components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
+    props,
+    emits: ['uploadSuccess', 'register'],
+    setup(props, { emit }) {
+      let filename = '';
+      const src = ref('');
+      const previewSource = ref('');
+      const cropper = ref<Cropper>();
+      let scaleX = 1;
+      let scaleY = 1;
+
+      const { prefixCls } = useDesign('cropper-am');
+      const [register, { closeModal, setModalProps }] = useModalInner();
+      const { t } = useI18n();
+
+      // Block upload
+      function handleBeforeUpload(file: File) {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        src.value = '';
+        previewSource.value = '';
+        reader.onload = function (e) {
+          src.value = (e.target?.result as string) ?? '';
+          filename = file.name;
+        };
+        return false;
+      }
+
+      function handleCropend({ imgBase64 }: CropendResult) {
+        previewSource.value = imgBase64;
+      }
+
+      function handleReady(cropperInstance: Cropper) {
+        cropper.value = cropperInstance;
+      }
+
+      function handlerToolbar(event: string, arg?: number) {
+        if (event === 'scaleX') {
+          scaleX = arg = scaleX === -1 ? 1 : -1;
+        }
+        if (event === 'scaleY') {
+          scaleY = arg = scaleY === -1 ? 1 : -1;
+        }
+        cropper?.value?.[event]?.(arg);
+      }
+
+      async function handleOk() {
+        const uploadApi = props.uploadApi;
+        if (uploadApi && isFunction(uploadApi)) {
+          const blob = dataURLtoBlob(previewSource.value);
+          try {
+            setModalProps({ confirmLoading: true });
+            const result = await uploadApi({ name: 'file', file: blob, filename });
+            emit('uploadSuccess', {
+              source: previewSource.value,
+              data: result.data || result.message,
+            });
+            closeModal();
+          } finally {
+            setModalProps({ confirmLoading: false });
+          }
+        }
+      }
+
+      return {
+        t,
+        prefixCls,
+        src,
+        register,
+        previewSource,
+        handleBeforeUpload,
+        handleCropend,
+        handleReady,
+        handlerToolbar,
+        handleOk,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-cropper-am';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &-left,
+    &-right {
+      height: 340px;
+    }
+
+    &-left {
+      width: 55%;
+    }
+
+    &-right {
+      width: 45%;
+    }
+
+    &-cropper {
+      height: 300px;
+      background: #eee;
+      background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0),
+        linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
+      background-position: 0 0, 12px 12px;
+      background-size: 24px 24px;
+    }
+
+    &-toolbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+    }
+
+    &-preview {
+      width: 220px;
+      height: 220px;
+      margin: 0 auto;
+      overflow: hidden;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-group {
+      display: flex;
+      padding-top: 8px;
+      margin-top: 8px;
+      border-top: 1px solid @border-color-base;
+      justify-content: space-around;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/src/components/Cropper/src/Cropper.vue b/src/components/Cropper/src/Cropper.vue
new file mode 100644
index 0000000..99176d7
--- /dev/null
+++ b/src/components/Cropper/src/Cropper.vue
@@ -0,0 +1,181 @@
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img v-show="isReady" ref="imgElRef" :src="src" :alt="alt" :crossorigin="crossorigin" :style="getImageStyle" />
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, onMounted, ref, unref, computed, onUnmounted } from 'vue';
+  import Cropper from 'cropperjs';
+  import 'cropperjs/dist/cropper.css';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDebounceFn } from '@vueuse/core';
+
+  type Options = Cropper.Options;
+
+  const defaultOptions: Options = {
+    aspectRatio: 1,
+    zoomable: true,
+    zoomOnTouch: true,
+    zoomOnWheel: true,
+    cropBoxMovable: true,
+    cropBoxResizable: true,
+    toggleDragModeOnDblclick: true,
+    autoCrop: true,
+    background: true,
+    highlight: true,
+    center: true,
+    responsive: true,
+    restore: true,
+    checkCrossOrigin: true,
+    checkOrientation: true,
+    scalable: true,
+    modal: true,
+    guides: true,
+    movable: true,
+    rotatable: true,
+  };
+
+  const props = {
+    src: { type: String, required: true },
+    alt: { type: String },
+    circled: { type: Boolean, default: false },
+    realTimePreview: { type: Boolean, default: true },
+    height: { type: [String, Number], default: '360px' },
+    crossorigin: {
+      type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+      default: undefined,
+    },
+    imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+    options: { type: Object as PropType<Options>, default: () => ({}) },
+  };
+
+  export default defineComponent({
+    name: 'CropperImage',
+    props,
+    emits: ['cropend', 'ready', 'cropendError'],
+    setup(props, { attrs, emit }) {
+      const imgElRef = ref<ElRef<HTMLImageElement>>();
+      const cropper = ref<Nullable<Cropper>>();
+      const isReady = ref(false);
+
+      const { prefixCls } = useDesign('cropper-image');
+      const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+
+      const getImageStyle = computed((): CSSProperties => {
+        return {
+          height: props.height,
+          maxWidth: '100%',
+          ...props.imageStyle,
+        };
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          attrs.class,
+          {
+            [`${prefixCls}--circled`]: props.circled,
+          },
+        ];
+      });
+
+      const getWrapperStyle = computed((): CSSProperties => {
+        return { height: `${props.height}`.replace(/px/, '') + 'px' };
+      });
+
+      onMounted(init);
+
+      onUnmounted(() => {
+        cropper.value?.destroy();
+      });
+
+      async function init() {
+        const imgEl = unref(imgElRef);
+        if (!imgEl) {
+          return;
+        }
+        cropper.value = new Cropper(imgEl, {
+          ...defaultOptions,
+          ready: () => {
+            isReady.value = true;
+            realTimeCroppered();
+            emit('ready', cropper.value);
+          },
+          crop() {
+            debounceRealTimeCroppered();
+          },
+          zoom() {
+            debounceRealTimeCroppered();
+          },
+          cropmove() {
+            debounceRealTimeCroppered();
+          },
+          ...props.options,
+        });
+      }
+
+      // Real-time display preview
+      function realTimeCroppered() {
+        props.realTimePreview && croppered();
+      }
+
+      // event: return base64 and width and height information after cropping
+      function croppered() {
+        if (!cropper.value) {
+          return;
+        }
+        let imgInfo = cropper.value.getData();
+        const canvas = props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            return;
+          }
+          let fileReader: FileReader = new FileReader();
+          fileReader.readAsDataURL(blob);
+          fileReader.onloadend = (e) => {
+            emit('cropend', {
+              imgBase64: e.target?.result ?? '',
+              imgInfo,
+            });
+          };
+          fileReader.onerror = () => {
+            emit('cropendError');
+          };
+        }, 'image/png');
+      }
+
+      // Get a circular picture canvas
+      function getRoundedCanvas() {
+        const sourceCanvas = cropper.value!.getCroppedCanvas();
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d')!;
+        const width = sourceCanvas.width;
+        const height = sourceCanvas.height;
+        canvas.width = width;
+        canvas.height = height;
+        context.imageSmoothingEnabled = true;
+        context.drawImage(sourceCanvas, 0, 0, width, height);
+        context.globalCompositeOperation = 'destination-in';
+        context.beginPath();
+        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+        context.fill();
+        return canvas;
+      }
+
+      return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-cropper-image';
+
+  .@{prefix-cls} {
+    &--circled {
+      .cropper-view-box,
+      .cropper-face {
+        border-radius: 50%;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
new file mode 100644
index 0000000..e95329a
--- /dev/null
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -0,0 +1,136 @@
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <Icon icon="ant-design:cloud-upload-outlined" :size="getIconWidth" :style="getImageWrapperStyle" color="#d6d6d6" />
+      </div>
+      <img :src="sourceValue" v-if="sourceValue" alt="avatar" />
+    </div>
+    <a-button :class="`${prefixCls}-upload-btn`" @click="openModal" v-if="showBtn" v-bind="btnProps">
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </a-button>
+
+    <CopperModal @register="register" @uploadSuccess="handleUploadSuccess" :uploadApi="uploadApi" :src="sourceValue" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, CSSProperties, unref, ref, watchEffect, watch, PropType } from 'vue';
+  import CopperModal from './CopperModal.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import type { ButtonProps } from '/@/components/Button';
+  import Icon from '/@/components/Icon';
+
+  const props = {
+    width: { type: [String, Number], default: '200px' },
+    value: { type: String },
+    showBtn: { type: Boolean, default: true },
+    btnProps: { type: Object as PropType<ButtonProps> },
+    btnText: { type: String, default: '' },
+    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
+  };
+
+  export default defineComponent({
+    name: 'CropperAvatar',
+    components: { CopperModal, Icon },
+    props,
+    emits: ['update:value', 'change'],
+    setup(props, { emit, expose }) {
+      const sourceValue = ref(props.value || '');
+      const { prefixCls } = useDesign('cropper-avatar');
+      const [register, { openModal, closeModal }] = useModal();
+      const { createMessage } = useMessage();
+      const { t } = useI18n();
+
+      const getClass = computed(() => [prefixCls]);
+
+      const getWidth = computed(() => `${props.width}`.replace(/px/, '') + 'px');
+
+      const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, '')) / 2 + 'px');
+
+      const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+      const getImageWrapperStyle = computed((): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) }));
+
+      watchEffect(() => {
+        sourceValue.value = props.value || '';
+      });
+
+      watch(
+        () => sourceValue.value,
+        (v: string) => {
+          emit('update:value', v);
+        }
+      );
+
+      function handleUploadSuccess({ source, data }) {
+        sourceValue.value = source;
+        emit('change', source, data);
+        createMessage.success(t('component.cropper.uploadSuccess'));
+      }
+
+      expose({ openModal: openModal.bind(null, true), closeModal });
+
+      return {
+        t,
+        prefixCls,
+        register,
+        openModal: openModal as any,
+        getIconWidth,
+        sourceValue,
+        getClass,
+        getImageWrapperStyle,
+        getStyle,
+        handleUploadSuccess,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-cropper-avatar';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    text-align: center;
+
+    &-image-wrapper {
+      overflow: hidden;
+      cursor: pointer;
+      background: @component-background;
+      border: 1px solid @border-color-base;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &-image-mask {
+      opacity: 0;
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      border-radius: inherit;
+      border: inherit;
+      background: rgba(0, 0, 0, 0.4);
+      cursor: pointer;
+      -webkit-transition: opacity 0.4s;
+      transition: opacity 0.4s;
+
+      :deep(svg) {
+        margin: auto;
+      }
+    }
+
+    &-image-mask:hover {
+      opacity: 40;
+    }
+
+    &-upload-btn {
+      margin: 10px auto;
+    }
+  }
+</style>
diff --git a/src/components/Cropper/src/typing.ts b/src/components/Cropper/src/typing.ts
new file mode 100644
index 0000000..e76cc6f
--- /dev/null
+++ b/src/components/Cropper/src/typing.ts
@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs';
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export type { Cropper };
diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts
new file mode 100644
index 0000000..58277d0
--- /dev/null
+++ b/src/components/Description/index.ts
@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import description from './src/Description.vue';
+
+export * from './src/typing';
+export { useDescription } from './src/useDescription';
+export const Description = withInstall(description);
diff --git a/src/components/Description/src/Description.vue b/src/components/Description/src/Description.vue
new file mode 100644
index 0000000..17b8c74
--- /dev/null
+++ b/src/components/Description/src/Description.vue
@@ -0,0 +1,181 @@
+<script lang="tsx">
+  import type { DescriptionProps, DescInstance, DescItem } from './typing';
+  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
+  import type { CSSProperties } from 'vue';
+  import type { CollapseContainerOptions } from '/@/components/Container/index';
+  import { defineComponent, computed, ref, unref } from 'vue';
+  import { get } from 'lodash-es';
+  import { Descriptions } from 'ant-design-vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isFunction } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  const props = {
+    useCollapse: { type: Boolean, default: true },
+    title: { type: String, default: '' },
+    size: {
+      type: String,
+      validator: (v) => ['small', 'default', 'middle', undefined].includes(v),
+      default: 'small',
+    },
+    bordered: { type: Boolean, default: true },
+    column: {
+      type: [Number, Object] as PropType<number | Recordable>,
+      default: () => {
+        return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
+      },
+    },
+    collapseOptions: {
+      type: Object as PropType<CollapseContainerOptions>,
+      default: null,
+    },
+    schema: {
+      type: Array as PropType<DescItem[]>,
+      default: () => [],
+    },
+    data: { type: Object },
+  };
+
+  export default defineComponent({
+    name: 'Description',
+    props,
+    emits: ['register'],
+    setup(props, { slots, emit }) {
+      const propsRef = ref<Partial<DescriptionProps> | null>(null);
+
+      const { prefixCls } = useDesign('description');
+      const attrs = useAttrs();
+
+      // Custom title component: get title
+      const getMergeProps = computed(() => {
+        return {
+          ...props,
+          ...(unref(propsRef) as Recordable),
+        } as DescriptionProps;
+      });
+
+      const getProps = computed(() => {
+        const opt = {
+          ...unref(getMergeProps),
+          title: undefined,
+        };
+        return opt as DescriptionProps;
+      });
+
+      /**
+       * @description: Whether to setting title
+       */
+      const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+      /**
+       * @description: Get configuration Collapse
+       */
+      const getCollapseOptions = computed((): CollapseContainerOptions => {
+        return {
+          // Cannot be expanded by default
+          canExpand: false,
+          ...unref(getProps).collapseOptions,
+        };
+      });
+
+      const getDescriptionsProps = computed(() => {
+        return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+      });
+
+      /**
+       * @description:设置desc
+       */
+      function setDescProps(descProps: Partial<DescriptionProps>): void {
+        // Keep the last setDrawerProps
+        propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
+      }
+
+      // Prevent line breaks
+      function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
+        if (!labelStyle && !labelMinWidth) {
+          return label;
+        }
+
+        const labelStyles: CSSProperties = {
+          ...labelStyle,
+          minWidth: `${labelMinWidth}px `,
+        };
+        return <div style={labelStyles}>{label}</div>;
+      }
+
+      function renderItem() {
+        const { schema, data } = unref(getProps);
+        return unref(schema)
+          .map((item) => {
+            const { render, field, span, show, contentMinWidth } = item;
+
+            if (show && isFunction(show) && !show(data)) {
+              return null;
+            }
+
+            const getContent = () => {
+              const _data = unref(getProps)?.data;
+              if (!_data) {
+                return null;
+              }
+              const getField = get(_data, field);
+              return isFunction(render) ? render(getField, _data) : getField ?? '';
+            };
+
+            const width = contentMinWidth;
+            return (
+              <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
+                {() => {
+                  if (!contentMinWidth) {
+                    return getContent();
+                  }
+                  const style: CSSProperties = {
+                    minWidth: `${width}px`,
+                  };
+                  return <div style={style}>{getContent()}</div>;
+                }}
+              </Descriptions.Item>
+            );
+          })
+          .filter((item) => !!item);
+      }
+
+      const renderDesc = () => {
+        return (
+          <Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
+            {renderItem()}
+          </Descriptions>
+        );
+      };
+
+      const renderContainer = () => {
+        const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
+        // Reduce the dom level
+        if (!props.useCollapse) {
+          return content;
+        }
+
+        const { canExpand, helpMessage } = unref(getCollapseOptions);
+        const { title } = unref(getMergeProps);
+
+        return (
+          <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
+            {{
+              default: () => content,
+              action: () => getSlot(slots, 'action'),
+            }}
+          </CollapseContainer>
+        );
+      };
+
+      const methods: DescInstance = {
+        setDescProps,
+      };
+
+      emit('register', methods);
+      return () => (unref(useWrapper) ? renderContainer() : renderDesc());
+    },
+  });
+</script>
diff --git a/src/components/Description/src/typing.ts b/src/components/Description/src/typing.ts
new file mode 100644
index 0000000..897b7d2
--- /dev/null
+++ b/src/components/Description/src/typing.ts
@@ -0,0 +1,47 @@
+import type { VNode, CSSProperties } from 'vue';
+import type { CollapseContainerOptions } from '/@/components/Container/index';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
+
+export interface DescItem {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties;
+  field: string;
+  label: string | VNode | JSX.Element;
+  // Merge column
+  span?: number;
+  show?: (...arg: any) => boolean;
+  // render
+  render?: (val: any, data: Recordable) => VNode | undefined | JSX.Element | Element | string | number;
+}
+
+export interface DescriptionProps extends DescriptionsProps {
+  // Whether to include the collapse component
+  useCollapse?: boolean;
+  /**
+   * item configuration
+   * @type DescItem
+   */
+  schema: DescItem[];
+  /**
+   * 数据
+   * @type object
+   */
+  data: Recordable;
+  /**
+   * Built-in CollapseContainer component configuration
+   * @type CollapseContainerOptions
+   */
+  collapseOptions?: CollapseContainerOptions;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}
+
+export type Register = (descInstance: DescInstance) => void;
+
+/**
+ * @description:
+ */
+export type UseDescReturnType = [Register, DescInstance];
diff --git a/src/components/Description/src/useDescription.ts b/src/components/Description/src/useDescription.ts
new file mode 100644
index 0000000..d1b3241
--- /dev/null
+++ b/src/components/Description/src/useDescription.ts
@@ -0,0 +1,33 @@
+import type { DescriptionProps, DescInstance, UseDescReturnType } from './typing';
+import { ref, getCurrentInstance, unref, onUnmounted } from 'vue';
+import { isProdMode } from '/@/utils/env';
+
+export function useDescription(props?: Partial<DescriptionProps>): UseDescReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error('useDescription() can only be used inside setup() or functional components!');
+  }
+  const desc = ref<Nullable<DescInstance>>(null);
+  const loaded = ref(false);
+
+  function register(instance: DescInstance) {
+    // update-begin--author:liaozhiyang---date:20251223---for:【pull/9125】在抽屉中配置destroy-on-close，再次打开未正确渲染
+    isProdMode() &&
+      onUnmounted(() => {
+        desc.value = null;
+        loaded.value = false;
+      });
+    if (unref(loaded) && isProdMode() && instance === unref(desc)) return;
+    // update-end--author:liaozhiyang---date:20251223---for:【pull/9125】在抽屉中配置destroy-on-close，再次打开未正确渲染
+    desc.value = instance;
+    props && instance.setDescProps(props);
+    loaded.value = true;
+  }
+
+  const methods: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      unref(desc)?.setDescProps(descProps);
+    },
+  };
+
+  return [register, methods];
+}
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
new file mode 100644
index 0000000..820ade5
--- /dev/null
+++ b/src/components/Drawer/index.ts
@@ -0,0 +1,6 @@
+import { withInstall } from '/@/utils';
+import basicDrawer from './src/BasicDrawer.vue';
+
+export const BasicDrawer = withInstall(basicDrawer);
+export * from './src/typing';
+export { useDrawer, useDrawerInner } from './src/useDrawer';
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
new file mode 100644
index 0000000..eff27b2
--- /dev/null
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -0,0 +1,252 @@
+<template>
+  <Drawer :class="prefixCls" @close="onClose" v-bind="getBindValues">
+    <template #title v-if="!$slots.title">
+      <DrawerHeader :title="getMergeProps.title" :isDetail="isDetail" :showDetailBack="showDetailBack" @close="onClose">
+        <template #titleToolbar>
+          <slot name="titleToolbar"></slot>
+        </template>
+      </DrawerHeader>
+    </template>
+    <template v-else #title>
+      <slot name="title"></slot>
+    </template>
+
+    <ScrollContainer :style="getScrollContentStyle" v-loading="getLoading" :loading-tip="loadingText || t('common.loadingText')">
+      <slot></slot>
+    </ScrollContainer>
+    <DrawerFooter v-bind="getProps" @close="onClose" @ok="handleOk" :height="getFooterHeight">
+      <template #[item]="data" v-for="item in Object.keys($slots)">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </DrawerFooter>
+  </Drawer>
+</template>
+<script lang="ts">
+  import type { DrawerInstance, DrawerProps } from './typing';
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, ref, computed, watch, unref, nextTick, toRaw, getCurrentInstance } from 'vue';
+  import { Drawer } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isFunction, isNumber } from '/@/utils/is';
+  import { deepMerge } from '/@/utils';
+  import DrawerFooter from './components/DrawerFooter.vue';
+  import DrawerHeader from './components/DrawerHeader.vue';
+  import { ScrollContainer } from '/@/components/Container';
+  import { basicProps } from './props';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
+    inheritAttrs: false,
+    props: basicProps,
+    emits: ['visible-change', 'open-change', 'ok', 'close', 'register'],
+    setup(props, { emit }) {
+      const visibleRef = ref(false);
+      const attrs = useAttrs();
+      const propsRef = ref<Partial<Nullable<DrawerProps>>>(null);
+
+      const { t } = useI18n();
+      const { prefixVar, prefixCls } = useDesign('basic-drawer');
+
+      const drawerInstance: DrawerInstance = {
+        setDrawerProps: setDrawerProps,
+        emitVisible: undefined,
+      };
+
+      const instance = getCurrentInstance();
+
+      instance && emit('register', drawerInstance, instance.uid);
+
+      const getMergeProps = computed((): DrawerProps => {
+        // 代码逻辑说明: 【QQYUN-8389】vue3.4以上版本导致角色抽屉隐藏footer逻辑错误（toRaw改成cloneDeep，否则props的变化不会触发computed）
+        return { ...deepMerge(cloneDeep(props), unref(propsRef)) };
+      });
+
+      const getProps = computed((): DrawerProps => {
+        // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+        const opt = {
+          placement: 'right',
+          ...unref(attrs),
+          ...unref(getMergeProps),
+          open: unref(visibleRef),
+        };
+        opt.title = undefined;
+        let { isDetail, width, wrapClassName, getContainer } = opt;
+        if (isDetail) {
+          if (!width) {
+            opt.width = '100%';
+          }
+          const detailCls = `${prefixCls}__detail`;
+          wrapClassName = opt['class'] ? opt['class'] : wrapClassName;
+          opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
+
+          if (!getContainer) {
+            // TODO type error?
+            opt.getContainer = `.${prefixVar}-layout-content` as any;
+          }
+        }
+        return opt as DrawerProps;
+      });
+
+      const getBindValues = computed((): DrawerProps => {
+        return {
+          ...attrs,
+          ...unref(getProps),
+        };
+      });
+
+      // Custom implementation of the bottom button,
+      const getFooterHeight = computed(() => {
+        const { footerHeight, showFooter } = unref(getProps);
+        if (showFooter && footerHeight) {
+          return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
+        }
+        return `0px`;
+      });
+
+      const getScrollContentStyle = computed((): CSSProperties => {
+        const footerHeight = unref(getFooterHeight);
+        return {
+          position: 'relative',
+          height: `calc(100% - ${footerHeight})`,
+        };
+      });
+
+      const getLoading = computed(() => {
+        return !!unref(getProps)?.loading;
+      });
+
+      watch(
+        () => props.visible,
+        (newVal, oldVal) => {
+          if (newVal !== oldVal) visibleRef.value = newVal;
+        },
+        { deep: true }
+      );
+
+      watch(
+        () => props.open,
+        (newVal, oldVal) => {
+          if (newVal !== oldVal) visibleRef.value = newVal;
+        },
+        { deep: true }
+      );
+
+      watch(
+        () => visibleRef.value,
+        (visible) => {
+          nextTick(() => {
+            emit('visible-change', visible);
+            emit('open-change', visible);
+            instance && drawerInstance.emitVisible?.(visible, instance.uid);
+          });
+        }
+      );
+
+      // Cancel event
+      async function onClose(e: Recordable) {
+        const { closeFunc } = unref(getProps);
+        emit('close', e);
+        if (closeFunc && isFunction(closeFunc)) {
+          const res = await closeFunc();
+          visibleRef.value = !res;
+          return;
+        }
+        visibleRef.value = false;
+      }
+
+      function setDrawerProps(props: Partial<DrawerProps>): void {
+        // Keep the last setDrawerProps
+        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+
+        if (Reflect.has(props, 'visible')) {
+          visibleRef.value = !!props.visible;
+        }
+        if (Reflect.has(props, 'open')) {
+          visibleRef.value = !!props.open;
+        }
+      }
+
+      function handleOk() {
+        emit('ok');
+      }
+
+      return {
+        onClose,
+        t,
+        prefixCls,
+        getMergeProps: getMergeProps as any,
+        getScrollContentStyle,
+        getProps: getProps as any,
+        getLoading,
+        getBindValues,
+        getFooterHeight,
+        handleOk,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @header-height: 60px;
+  @detail-header-height: 40px;
+  @prefix-cls: ~'@{namespace}-basic-drawer';
+  @prefix-cls-detail: ~'@{namespace}-basic-drawer__detail';
+
+  .@{prefix-cls} {
+    .ant-drawer-wrapper-body {
+      overflow: hidden;
+    }
+
+    .ant-drawer-close {
+      &:hover {
+        color: @error-color;
+      }
+    }
+
+    .ant-drawer-body {
+      height: calc(100% - @header-height);
+      padding: 0;
+      background-color: @component-background;
+
+      .scrollbar__wrap {
+        padding: 16px !important;
+        margin-bottom: 0 !important;
+      }
+
+      > .scrollbar > .scrollbar__bar.is-horizontal {
+        display: none;
+      }
+    }
+  }
+
+  .@{prefix-cls-detail} {
+    position: absolute;
+
+    .ant-drawer-header {
+      width: 100%;
+      height: @detail-header-height;
+      padding: 0;
+      border-top: 1px solid @border-color-base;
+      box-sizing: border-box;
+    }
+
+    .ant-drawer-title {
+      height: 100%;
+    }
+
+    .ant-drawer-close {
+      height: @detail-header-height;
+      line-height: @detail-header-height;
+    }
+
+    .scrollbar__wrap {
+      padding: 0 !important;
+    }
+
+    .ant-drawer-body {
+      height: calc(100% - @detail-header-height);
+    }
+  }
+</style>
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
new file mode 100644
index 0000000..9e6d322
--- /dev/null
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -0,0 +1,75 @@
+<template>
+  <div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer">
+    <template v-if="!$slots.footer">
+      <slot name="insertFooter"></slot>
+      <a-button v-bind="cancelButtonProps" @click="handleClose" class="mr-2" v-if="showCancelBtn">
+        {{ cancelText }}
+      </a-button>
+      <slot name="centerFooter"></slot>
+      <a-button :type="okType" @click="handleOk" v-bind="okButtonProps" class="mr-2" :loading="confirmLoading" v-if="showOkBtn">
+        {{ okText }}
+      </a-button>
+      <slot name="appendFooter"></slot>
+    </template>
+
+    <template v-else>
+      <slot name="footer"></slot>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { footerProps } from '../props';
+  export default defineComponent({
+    name: 'BasicDrawerFooter',
+    props: {
+      ...footerProps,
+      height: {
+        type: String,
+        default: '60px',
+      },
+    },
+    emits: ['ok', 'close'],
+    setup(props, { emit }) {
+      const { prefixCls } = useDesign('basic-drawer-footer');
+
+      const getStyle = computed((): CSSProperties => {
+        const heightStr = `${props.height}`;
+        return {
+          height: heightStr,
+          lineHeight: heightStr,
+        };
+      });
+
+      function handleOk() {
+        emit('ok');
+      }
+
+      function handleClose() {
+        emit('close');
+      }
+      return { handleOk, prefixCls, handleClose, getStyle };
+    },
+  });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-drawer-footer';
+  @footer-height: 60px;
+  .@{prefix-cls} {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 0 12px 0 20px;
+    text-align: right;
+    background-color: @component-background;
+    border-top: 1px solid @border-color-base;
+
+    > * {
+      margin-right: 8px;
+    }
+  }
+</style>
diff --git a/src/components/Drawer/src/components/DrawerHeader.vue b/src/components/Drawer/src/components/DrawerHeader.vue
new file mode 100644
index 0000000..5eaa44f
--- /dev/null
+++ b/src/components/Drawer/src/components/DrawerHeader.vue
@@ -0,0 +1,74 @@
+<template>
+  <BasicTitle v-if="!isDetail" :class="[prefixCls, 'is-drawer']">
+    <slot name="title"></slot>
+    {{ !$slots.title ? title : '' }}
+  </BasicTitle>
+
+  <div :class="[prefixCls, `${prefixCls}--detail`]" v-else>
+    <span :class="`${prefixCls}__twrap`">
+      <span @click="handleClose" v-if="showDetailBack">
+        <ArrowLeftOutlined :class="`${prefixCls}__back`" />
+      </span>
+      <span v-if="title">{{ title }}</span>
+    </span>
+
+    <span :class="`${prefixCls}__toolbar`">
+      <slot name="titleToolbar"></slot>
+    </span>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTitle } from '/@/components/Basic';
+  import { ArrowLeftOutlined } from '@ant-design/icons-vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { propTypes } from '/@/utils/propTypes';
+  export default defineComponent({
+    name: 'BasicDrawerHeader',
+    components: { BasicTitle, ArrowLeftOutlined },
+    props: {
+      isDetail: propTypes.bool,
+      showDetailBack: propTypes.bool,
+      title: propTypes.string,
+    },
+    emits: ['close'],
+    setup(_, { emit }) {
+      const { prefixCls } = useDesign('basic-drawer-header');
+
+      function handleClose() {
+        emit('close');
+      }
+
+      return { prefixCls, handleClose };
+    },
+  });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-drawer-header';
+  @footer-height: 60px;
+  .@{prefix-cls} {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    &__back {
+      padding: 0 12px;
+      cursor: pointer;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    &__twrap {
+      flex: 1;
+    }
+
+    &__toolbar {
+      padding-right: 50px;
+    }
+  }
+</style>
diff --git a/src/components/Drawer/src/props.ts b/src/components/Drawer/src/props.ts
new file mode 100644
index 0000000..398f251
--- /dev/null
+++ b/src/components/Drawer/src/props.ts
@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+export const footerProps = {
+  confirmLoading: { type: Boolean },
+  /**
+   * @description: Show close button
+   */
+  showCancelBtn: { type: Boolean, default: true },
+  cancelButtonProps: Object as PropType<Recordable>,
+  cancelText: { type: String, default: t('common.cancelText') },
+  /**
+   * @description: Show confirmation button
+   */
+  showOkBtn: { type: Boolean, default: true },
+  okButtonProps: Object as PropType<Recordable>,
+  okText: { type: String, default: t('common.okText') },
+  okType: { type: String, default: 'primary' },
+  showFooter: { type: Boolean },
+  footerHeight: {
+    type: [String, Number] as PropType<string | number>,
+    default: 60,
+  },
+};
+export const basicProps = {
+  class: {type: [String, Object, Array]},
+  isDetail: { type: Boolean },
+  title: { type: String, default: '' },
+  loadingText: { type: String },
+  showDetailBack: { type: Boolean, default: true },
+  visible: { type: Boolean },
+  open: { type: Boolean },
+  loading: { type: Boolean },
+  maskClosable: { type: Boolean, default: true },
+  getContainer: {
+    type: [Object, String, Function, Boolean] as PropType<any>,
+    default: () => 'body',
+  },
+  closeFunc: {
+    type: [Function, Object] as PropType<any>,
+    default: null,
+  },
+  destroyOnClose: { type: Boolean },
+  ...footerProps,
+};
diff --git a/src/components/Drawer/src/typing.ts b/src/components/Drawer/src/typing.ts
new file mode 100644
index 0000000..b129073
--- /dev/null
+++ b/src/components/Drawer/src/typing.ts
@@ -0,0 +1,199 @@
+import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
+import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
+import type { ScrollContainerOptions } from '/@/components/Container/index';
+
+export interface DrawerInstance {
+  setDrawerProps: (props: Partial<DrawerProps> | boolean) => void;
+  emitVisible?: (visible: boolean, uid: number) => void;
+}
+
+export interface ReturnMethods extends DrawerInstance {
+  openDrawer: <T = any>(visible?: boolean, data?: T, openOnSet?: boolean) => void;
+  closeDrawer: () => void;
+  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
+}
+
+export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void;
+
+export interface ReturnInnerMethods extends DrawerInstance {
+  closeDrawer: () => void;
+  changeLoading: (loading: boolean) => void;
+  changeOkLoading: (loading: boolean) => void;
+  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
+}
+
+export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
+
+export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];
+
+export interface DrawerFooterProps {
+  showOkBtn: boolean;
+  showCancelBtn: boolean;
+  /**
+   * Text of the Cancel button
+   * @default 'cancel'
+   * @type string
+   */
+  cancelText: string;
+  /**
+   * Text of the OK button
+   * @default 'OK'
+   * @type string
+   */
+  okText: string;
+
+  /**
+   * Button type of the OK button
+   * @default 'primary'
+   * @type string
+   */
+  okType: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+  /**
+   * The ok button props, follow jsx rules
+   * @type object
+   */
+  okButtonProps: { props: ButtonProps; on: {} };
+
+  /**
+   * The cancel button props, follow jsx rules
+   * @type object
+   */
+  cancelButtonProps: { props: ButtonProps; on: {} };
+  /**
+   * Whether to apply loading visual effect for OK button or not
+   * @default false
+   * @type boolean
+   */
+  confirmLoading: boolean;
+
+  showFooter: boolean;
+  footerHeight: string | number;
+}
+export interface DrawerProps extends DrawerFooterProps {
+  isDetail?: boolean;
+  loading?: boolean;
+  showDetailBack?: boolean;
+  visible?: boolean;
+  open?: boolean;
+  /**
+   * Built-in ScrollContainer component configuration
+   * @type ScrollContainerOptions
+   */
+  scrollOptions?: ScrollContainerOptions;
+  closeFunc?: () => Promise<any>;
+  triggerWindowResize?: boolean;
+  /**
+   * Whether a close (x) button is visible on top right of the Drawer dialog or not.
+   * @default true
+   * @type boolean
+   */
+  closable?: boolean;
+
+  /**
+   * Whether to unmount child components on closing drawer or not.
+   * @default false
+   * @type boolean
+   */
+  destroyOnClose?: boolean;
+
+  /**
+   * Return the mounted node for Drawer.
+   * @default 'body'
+   * @type any ( HTMLElement| () => HTMLElement | string)
+   */
+  getContainer?: () => HTMLElement | string;
+
+  /**
+   * Whether to show mask or not.
+   * @default true
+   * @type boolean
+   */
+  mask?: boolean;
+
+  /**
+   * Clicking on the mask (area outside the Drawer) to close the Drawer or not.
+   * @default true
+   * @type boolean
+   */
+  maskClosable?: boolean;
+
+  /**
+   * Style for Drawer's mask element.
+   * @default {}
+   * @type object
+   */
+  maskStyle?: CSSProperties;
+
+  /**
+   * The title for Drawer.
+   * @type any (string | slot)
+   */
+  title?: VNodeChild | JSX.Element;
+
+  /**
+   * The class name of the container of the Drawer dialog.
+   * @type string
+   */
+  class?: string;
+  // 兼容老版本的写法（后续可能会删除，优先写class）
+  wrapClassName?: string;
+
+  /**
+   * Style of wrapper element which **contains mask** compare to `drawerStyle`
+   * @type object
+   */
+  wrapStyle?: CSSProperties;
+
+  /**
+   * Style of the popup layer element
+   * @type object
+   */
+  drawerStyle?: CSSProperties;
+
+  /**
+   * Style of floating layer, typically used for adjusting its position.
+   * @type object
+   */
+  bodyStyle?: CSSProperties;
+  headerStyle?: CSSProperties;
+
+  /**
+   * Width of the Drawer dialog.
+   * @default 256
+   * @type string | number
+   */
+  width?: string | number;
+
+  /**
+   * placement is top or bottom, height of the Drawer dialog.
+   * @type string | number
+   */
+  height?: string | number;
+
+  /**
+   * The z-index of the Drawer.
+   * @default 1000
+   * @type number
+   */
+  zIndex?: number;
+
+  /**
+   * The placement of the Drawer.
+   * @default 'right'
+   * @type string
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  afterVisibleChange?: (visible?: boolean) => void;
+  keyboard?: boolean;
+  /**
+   * Specify a callback that will be called when a user clicks mask, close button or Cancel button.
+   */
+  onClose?: (e?: Event) => void;
+}
+export interface DrawerActionType {
+  scrollBottom: () => void;
+  scrollTo: (to: number) => void;
+  getScrollWrap: () => Element | null;
+}
diff --git a/src/components/Drawer/src/useDrawer.ts b/src/components/Drawer/src/useDrawer.ts
new file mode 100644
index 0000000..2b86352
--- /dev/null
+++ b/src/components/Drawer/src/useDrawer.ts
@@ -0,0 +1,154 @@
+import type { UseDrawerReturnType, DrawerInstance, ReturnMethods, DrawerProps, UseDrawerInnerReturnType } from './typing';
+import { ref, getCurrentInstance, unref, reactive, watchEffect, nextTick, toRaw, computed } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { isFunction } from '/@/utils/is';
+import { tryOnUnmounted } from '@vueuse/core';
+import { isEqual } from 'lodash-es';
+import { error } from '/@/utils/log';
+
+const dataTransferRef = reactive<any>({});
+
+const visibleData = reactive<{ [key: number]: boolean }>({});
+
+/**
+ * @description: Applicable to separate drawer and call outside
+ */
+export function useDrawer(): UseDrawerReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error('useDrawer() can only be used inside setup() or functional components!');
+  }
+  const drawer = ref<DrawerInstance | null>(null);
+  const loaded = ref<Nullable<boolean>>(false);
+  const uid = ref<string>('');
+
+  function register(drawerInstance: DrawerInstance, uuid: string) {
+    isProdMode() &&
+      tryOnUnmounted(() => {
+        drawer.value = null;
+        loaded.value = null;
+        dataTransferRef[unref(uid)] = null;
+      });
+
+    if (unref(loaded) && isProdMode() && drawerInstance === unref(drawer)) {
+      return;
+    }
+    uid.value = uuid;
+    drawer.value = drawerInstance;
+    loaded.value = true;
+
+    drawerInstance.emitVisible = (visible: boolean, uid: number) => {
+      visibleData[uid] = visible;
+    };
+  }
+
+  const getInstance = () => {
+    const instance = unref(drawer);
+    if (!instance) {
+      error('useDrawer instance is undefined!');
+    }
+    return instance;
+  };
+
+  const methods: ReturnMethods = {
+    setDrawerProps: (props: Partial<DrawerProps>): void => {
+      getInstance()?.setDrawerProps(props);
+    },
+
+    getVisible: computed((): boolean => {
+      return visibleData[~~unref(uid)];
+    }),
+
+    getOpen: computed((): boolean => {
+      return visibleData[~~unref(uid)];
+    }),
+
+    openDrawer: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+      // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+      getInstance()?.setDrawerProps({
+        open: visible,
+      });
+      if (!data) return;
+
+      if (openOnSet) {
+        dataTransferRef[unref(uid)] = null;
+        dataTransferRef[unref(uid)] = toRaw(data);
+        return;
+      }
+      const equal = isEqual(toRaw(dataTransferRef[unref(uid)]), toRaw(data));
+      if (!equal) {
+        dataTransferRef[unref(uid)] = toRaw(data);
+      }
+    },
+    closeDrawer: () => {
+      // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+      getInstance()?.setDrawerProps({ open: false });
+    },
+  };
+
+  return [register, methods];
+}
+
+export const useDrawerInner = (callbackFn?: Fn): UseDrawerInnerReturnType => {
+  const drawerInstanceRef = ref<Nullable<DrawerInstance>>(null);
+  const currentInstance = getCurrentInstance();
+  const uidRef = ref<string>('');
+
+  if (!getCurrentInstance()) {
+    throw new Error('useDrawerInner() can only be used inside setup() or functional components!');
+  }
+
+  const getInstance = () => {
+    const instance = unref(drawerInstanceRef);
+    if (!instance) {
+      error('useDrawerInner instance is undefined!');
+      return;
+    }
+    return instance;
+  };
+
+  const register = (modalInstance: DrawerInstance, uuid: string) => {
+    isProdMode() &&
+      tryOnUnmounted(() => {
+        drawerInstanceRef.value = null;
+      });
+
+    uidRef.value = uuid;
+    drawerInstanceRef.value = modalInstance;
+    currentInstance?.emit('register', modalInstance, uuid);
+  };
+
+  watchEffect(() => {
+    const data = dataTransferRef[unref(uidRef)];
+    if (!data) return;
+    if (!callbackFn || !isFunction(callbackFn)) return;
+    nextTick(() => {
+      callbackFn(data);
+    });
+  });
+
+  return [
+    register,
+    {
+      changeLoading: (loading = true) => {
+        getInstance()?.setDrawerProps({ loading });
+      },
+
+      changeOkLoading: (loading = true) => {
+        getInstance()?.setDrawerProps({ confirmLoading: loading });
+      },
+      getVisible: computed((): boolean => {
+        return visibleData[~~unref(uidRef)];
+      }),
+      getOpen: computed((): boolean => {
+        return visibleData[~~unref(uidRef)];
+      }),
+      closeDrawer: () => {
+        getInstance()?.setDrawerProps({ open: false });
+      },
+
+      setDrawerProps: (props: Partial<DrawerProps>) => {
+        getInstance()?.setDrawerProps(props);
+      },
+    },
+  ];
+};
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
new file mode 100644
index 0000000..80439e5
--- /dev/null
+++ b/src/components/Dropdown/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from '/@/utils';
+import dropdown from './src/Dropdown.vue';
+
+export * from './src/typing';
+export const Dropdown = withInstall(dropdown);
diff --git a/src/components/Dropdown/src/Dropdown.vue b/src/components/Dropdown/src/Dropdown.vue
new file mode 100644
index 0000000..27f0910
--- /dev/null
+++ b/src/components/Dropdown/src/Dropdown.vue
@@ -0,0 +1,117 @@
+<template>
+  <a-dropdown :class="[prefixCls]" :trigger="trigger" v-bind="$attrs">
+    <span>
+      <slot></slot>
+    </span>
+    <template #overlay>
+      <a-menu :class="[`${prefixCls}-menu`]" :selectedKeys="selectedKeys">
+        <template v-for="item in dropMenuList" :key="`${item.event}`">
+          <a-menu-item
+            v-if="!item.hide"
+            v-bind="getAttr(item.event)"
+            @click="handleClickMenu(item)"
+            :disabled="item.disabled"
+            :class="[{ 'is-pop-confirm': item.popConfirm }, item.class ?? []]"
+          >
+            <a-popconfirm :disabled="item.disabled" v-if="popconfirm && item.popConfirm" v-bind="getPopConfirmAttrs(item.popConfirm)">
+              <template #icon v-if="item.popConfirm.icon">
+                <Icon v-if="item.iconColor" :icon="item.popConfirm.icon" :color="item.iconColor" />
+                <Icon v-else :icon="item.popConfirm.icon" />
+              </template>
+              <div class="dropdown-event-area">
+                <Icon :icon="item.icon" v-if="item.icon && item.iconColor" :color="item.iconColor" />
+                <Icon :icon="item.icon" v-else-if="item.icon" />
+                <span class="ml-1">{{ item.text }}</span>
+              </div>
+            </a-popconfirm>
+            <!--  设置动态插槽   -->
+            <template v-else-if="item.slot">
+              <slot :name="item.slot" :label="item.text"></slot>
+            </template>
+            <template v-else>
+              <Icon :icon="item.icon" v-if="item.icon && item.iconColor" :color="item.iconColor" />
+              <Icon :icon="item.icon" v-else-if="item.icon" />
+              <span class="ml-1">{{ item.text }}</span>
+            </template>
+          </a-menu-item>
+          <a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
+        </template>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import { computed, PropType, ref } from 'vue';
+  import type { DropMenu } from './typing';
+  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { omit } from 'lodash-es';
+  import { isFunction } from '/@/utils/is';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const ADropdown = Dropdown;
+  const AMenu = Menu;
+  const AMenuItem = Menu.Item;
+  const AMenuDivider = Menu.Divider;
+  const APopconfirm = Popconfirm;
+
+  const { prefixCls } = useDesign('basic-dropdown');
+  const props = defineProps({
+    popconfirm: Boolean,
+    /**
+     * the trigger mode which executes the drop-down action
+     * @default ['hover']
+     * @type string[]
+     */
+    trigger: {
+      type: [Array] as PropType<('contextmenu' | 'click' | 'hover')[]>,
+      default: () => {
+        return ['contextmenu'];
+      },
+    },
+    dropMenuList: {
+      type: Array as PropType<(DropMenu & Recordable)[]>,
+      default: () => [],
+    },
+    selectedKeys: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  });
+
+  const emit = defineEmits(['menuEvent']);
+
+  function handleClickMenu(item: DropMenu) {
+    const { event } = item;
+    const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`);
+    emit('menuEvent', menu);
+    item.onClick?.();
+  }
+
+  const getPopConfirmAttrs = computed(() => {
+    return (attrs) => {
+      const originAttrs = omit(attrs, ['confirm', 'cancel', 'icon']);
+      if (!attrs.onConfirm && attrs.confirm && isFunction(attrs.confirm)) originAttrs['onConfirm'] = attrs.confirm;
+      if (!attrs.onCancel && attrs.cancel && isFunction(attrs.cancel)) originAttrs['onCancel'] = attrs.cancel;
+      return originAttrs;
+    };
+  });
+
+  const getAttr = (key: string | number) => ({ key });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-dropdown';
+
+  .@{prefix-cls} {
+    // 代码逻辑说明: 【VUEN-180】更多下拉菜单，只有点到字上才有效，点到空白处什么都不会发生，体验不好
+    &-menu .ant-dropdown-menu-item.is-pop-confirm {
+      padding: 0;
+
+      .dropdown-event-area {
+        padding: 5px 12px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Dropdown/src/typing.ts b/src/components/Dropdown/src/typing.ts
new file mode 100644
index 0000000..94a8f8a
--- /dev/null
+++ b/src/components/Dropdown/src/typing.ts
@@ -0,0 +1,11 @@
+export interface DropMenu {
+  onClick?: Fn;
+  to?: string;
+  icon?: string;
+  event: string | number;
+  text: string;
+  disabled?: boolean;
+  // 是否隐藏
+  hide?: boolean;
+  divider?: boolean;
+}
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
new file mode 100644
index 0000000..486016d
--- /dev/null
+++ b/src/components/Form/index.ts
@@ -0,0 +1,43 @@
+import BasicForm from './src/BasicForm.vue';
+import { defineAsyncComponent } from 'vue';
+export * from './src/types/form';
+export * from './src/types/formItem';
+
+export { useComponentRegister } from './src/hooks/useComponentRegister';
+export { useForm } from './src/hooks/useForm';
+
+export const ApiSelect = defineAsyncComponent(() => import('./src/components/ApiSelect.vue'));
+export const RadioButtonGroup = defineAsyncComponent(() => import('./src/components/RadioButtonGroup.vue'));
+export const ApiTreeSelect = defineAsyncComponent(() => import('./src/components/ApiTreeSelect.vue'));
+export const ApiRadioGroup = defineAsyncComponent(() => import('./src/components/ApiRadioGroup.vue'));
+//Jeecg自定义组件
+export const JAreaLinkage = defineAsyncComponent(() => import('./src/jeecg/components/JAreaLinkage.vue'));
+export const JSelectUser = defineAsyncComponent(() => import('./src/jeecg/components/JSelectUser.vue'));
+export const JSelectDept = defineAsyncComponent(() => import('./src/jeecg/components/JSelectDept.vue'));
+export const JSelectDepartPost = defineAsyncComponent(() => import('./src/jeecg/components/JSelectDepartPost.vue'));
+export const JSelectUserByDeptPost = defineAsyncComponent(() => import('./src/jeecg/components/JSelectUserByDeptPost.vue'));
+export const JCodeEditor = defineAsyncComponent(() => import('./src/jeecg/components/JCodeEditor.vue'));
+export const JCategorySelect = defineAsyncComponent(() => import('./src/jeecg/components/JCategorySelect.vue'));
+export const JSelectMultiple = defineAsyncComponent(() => import('./src/jeecg/components/JSelectMultiple.vue'));
+export const JPopup = defineAsyncComponent(() => import('./src/jeecg/components/JPopup.vue'));
+export const JAreaSelect = defineAsyncComponent(() => import('./src/jeecg/components/JAreaSelect.vue'));
+export const JEasyCron = defineAsyncComponent(() => import('./src/jeecg/components/JEasyCron/EasyCronInput.vue'));
+export const JEasyCronInner = defineAsyncComponent(() => import('./src/jeecg/components/JEasyCron/EasyCronInner.vue'));
+export const JEasyCronModal = defineAsyncComponent(() => import('./src/jeecg/components/JEasyCron/EasyCronModal.vue'));
+export const JCheckbox = defineAsyncComponent(() => import('./src/jeecg/components/JCheckbox.vue'));
+export const JInput = defineAsyncComponent(() => import('./src/jeecg/components/JInput.vue'));
+export const JEllipsis = defineAsyncComponent(() => import('./src/jeecg/components/JEllipsis.vue'));
+export const JDictSelectTag = defineAsyncComponent(() => import('./src/jeecg/components/JDictSelectTag.vue'));
+export const JTreeSelect = defineAsyncComponent(() => import('./src/jeecg/components/JTreeSelect.vue'));
+export const JSearchSelect = defineAsyncComponent(() => import('./src/jeecg/components/JSearchSelect.vue'));
+export const JSelectUserByDept = defineAsyncComponent(() => import('./src/jeecg/components/JSelectUserByDept.vue'));
+export const JSelectUserByDepartment = defineAsyncComponent(() => import('./src/jeecg/components/JSelectUserByDepartment.vue'));
+// update-begin--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+export const JEditor = defineAsyncComponent(() => import('./src/jeecg/components/JEditor.vue'));
+// update-end--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+export const JImageUpload = defineAsyncComponent(() => import('./src/jeecg/components/JImageUpload.vue'));
+// Jeecg自定义校验
+// update-begin--author:liaozhiyang---date:20260303---for:【QQYUN-14815】JCronValidator从Form中注释，防止首页加载，改为业务中直接导入
+// export { default as JCronValidator } from '/@/components/Form/src/jeecg/components/JEasyCron/validator';
+// update-end--author:liaozhiyang---date:20260303---for:【QQYUN-14815】JCronValidator从Form中注释，防止首页加载，改为业务中直接导入
+export { BasicForm };
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
new file mode 100644
index 0000000..3b9f44e
--- /dev/null
+++ b/src/components/Form/src/BasicForm.vue
@@ -0,0 +1,455 @@
+<template>
+  <Form v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress">
+    <Row v-bind="getRow">
+      <slot name="formHeader"></slot>
+      <template v-for="schema in getSchema" :key="schema.field">
+        <FormItem
+          :tableAction="tableAction"
+          :formActionType="formActionType"
+          :schema="schema"
+          :formProps="getProps"
+          :allDefaultValues="defaultValueRef"
+          :formModel="formModel"
+          :formName="getBindValue.name"
+          :source="getBindValue.source"
+          :setFormModel="setFormModel"
+          :validateFields="validateFields"
+          :clearValidate="clearValidate"
+          v-auth="schema.auth"
+        >
+          <template #[item]="data" v-for="item in Object.keys($slots)">
+            <slot :name="item" v-bind="data || {}"></slot>
+          </template>
+        </FormItem>
+      </template>
+
+      <FormAction v-bind="getFormActionBindProps" @toggle-advanced="handleToggleAdvanced">
+        <template #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </FormAction>
+      <slot name="formFooter"></slot>
+    </Row>
+  </Form>
+</template>
+<script lang="ts">
+  import type { FormActionType, FormProps, FormSchema } from './types/form';
+  import type { AdvanceState } from './types/hooks';
+  import type { Ref } from 'vue';
+
+  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
+  import { Form, Row } from 'ant-design-vue';
+  import FormItem from './components/FormItem.vue';
+  import FormAction from './components/FormAction.vue';
+
+  import { dateItemType } from './helper';
+  import { dateUtil } from '/@/utils/dateUtil';
+
+  // import { cloneDeep } from 'lodash-es';
+  import { deepMerge } from '/@/utils';
+
+  import { useFormValues } from './hooks/useFormValues';
+  import useAdvanced from './hooks/useAdvanced';
+  import { useFormEvents } from './hooks/useFormEvents';
+  import { createFormContext } from './hooks/useFormContext';
+  import { useAutoFocus } from './hooks/useAutoFocus';
+  import { useModalContext } from '/@/components/Modal';
+
+  import { basicProps } from './props';
+  import componentSetting from '/@/settings/componentSetting';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import dayjs from 'dayjs';
+  import { useDebounceFn } from '@vueuse/core';
+  import { isFunction, isObject } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'BasicForm',
+    components: { FormItem, Form, Row, FormAction },
+    props: basicProps,
+    emits: ['advanced-change', 'reset', 'submit', 'register'],
+    setup(props, { emit, attrs }) {
+      const formModel = reactive<Recordable>({});
+      const modalFn = useModalContext();
+
+      const advanceState = reactive<AdvanceState>({
+        // 默认是收起状态
+        isAdvanced: false,
+        hideAdvanceBtn: true,
+        isLoad: false,
+        actionSpan: 6,
+      });
+
+      const defaultValueRef = ref<Recordable>({});
+      const isInitedDefaultRef = ref(false);
+      const propsRef = ref<Partial<FormProps>>({});
+      const schemaRef = ref<Nullable<FormSchema[]>>(null);
+      const formElRef = ref<Nullable<FormActionType>>(null);
+
+      const { prefixCls } = useDesign('basic-form');
+
+      // Get the basic configuration of the form
+      const getProps = computed((): FormProps => {
+        let mergeProps = { ...props, ...unref(propsRef) } as FormProps;
+        // 代码逻辑说明: 如果用户设置了labelWidth，则使labelCol失效，解决labelWidth设置无效的问题
+        if (mergeProps.labelWidth) {
+          mergeProps.labelCol = undefined;
+        }
+        // 代码逻辑说明: 【QQYUN-6566】BasicForm支持一行显示(inline)
+        if (mergeProps.layout === 'inline') {
+          if (mergeProps.labelCol === componentSetting.form.labelCol) {
+            mergeProps.labelCol = undefined;
+          }
+          if (mergeProps.wrapperCol === componentSetting.form.wrapperCol) {
+            mergeProps.wrapperCol = undefined;
+          }
+        }
+        return mergeProps;
+      });
+
+      const getFormClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--compact`]: unref(getProps).compact,
+            'jeecg-form-detail-effect': unref(getProps).disabled
+          },
+        ];
+      });
+
+      // Get uniform row style and Row configuration for the entire form
+      const getRow = computed((): Recordable => {
+        const { baseRowStyle = {}, rowProps } = unref(getProps);
+        return {
+          style: baseRowStyle,
+          ...rowProps,
+        };
+      });
+
+      const getBindValue = computed(() => {
+        const bindValue = { ...attrs, ...props, ...unref(getProps) } as Recordable;
+        // 代码逻辑说明: 【issues/8484】分类字典中的新增弹窗的label点击会触发查询区域的input
+        if (bindValue.name === undefined && bindValue.source === 'table-query') {
+          bindValue.name = 'top-query-form';
+        }
+        return bindValue;
+      });
+
+      const getSchema = computed((): FormSchema[] => {
+        const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
+        for (const schema of schemas) {
+          const { defaultValue, component, componentProps } = schema;
+          // handle date type
+          if (defaultValue && dateItemType.includes(component)) {
+            // 代码逻辑说明: 【issues/435】代码生成的日期控件赋默认值报错------------
+            let valueFormat:string = "";
+            // 代码逻辑说明: 【issues/8683】DatePicker组件的componentProps使用函数形式时初始值获取不对
+            if(isObject(componentProps)) {
+              valueFormat = componentProps?.valueFormat;
+            } else if (isFunction(componentProps)) {
+              try {
+                // @ts-ignore
+                valueFormat = componentProps({schema, tableAction: props.tableAction, formModel})?.valueFormat;
+              } catch (error) {
+              }
+            }
+            // update-end--author:liaozhiyang---date:20250818---for【issues/8683】DatePicker组件的componentProps使用函数形式时初始值获取不对
+            if(!valueFormat){
+              console.warn("未配置valueFormat,可能导致格式化错误！");
+            }
+            if (!Array.isArray(defaultValue)) {
+              // 代码逻辑说明: [issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
+              if(valueFormat){
+                // schema.defaultValue = dateUtil(defaultValue).format(valueFormat);
+                // 代码逻辑说明: 【TV360X-346 】时间组件填写默认值有问题
+                schema.defaultValue = dateUtil(defaultValue, valueFormat).format(valueFormat);
+              }else{
+                schema.defaultValue = dateUtil(defaultValue);
+              }
+            } else {
+              const def: dayjs.Dayjs[] = [];
+              defaultValue.forEach((item) => {
+                // 代码逻辑说明: [issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
+                if(valueFormat){
+                  // 代码逻辑说明: 【TV360X-346 】时间组件填写默认值有问题
+                  def.push(dateUtil(item, valueFormat).format(valueFormat));
+                }else{
+                  def.push(dateUtil(item));
+                }
+              });
+              // 代码逻辑说明: 【issues/1114】rangepicker等时间控件报错（vue3.4以上版本有问题）
+              def.forEach((item, index) => {
+                defaultValue[index] = item;
+              });
+            }
+          }
+        }
+        if (unref(getProps).showAdvancedButton) {
+          return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
+        } else {
+          return schemas as FormSchema[];
+        }
+      });
+
+      const { handleToggleAdvanced } = useAdvanced({
+        advanceState,
+        emit,
+        getProps,
+        getSchema,
+        formModel,
+        defaultValueRef,
+      });
+
+      const { handleFormValues, initDefault } = useFormValues({
+        getProps,
+        defaultValueRef,
+        getSchema,
+        formModel,
+      });
+
+      useAutoFocus({
+        getSchema,
+        getProps,
+        isInitedDefault: isInitedDefaultRef,
+        formElRef: formElRef as Ref<FormActionType>,
+      });
+
+      const {
+        handleSubmit,
+        setFieldsValue,
+        clearValidate,
+        validate,
+        validateFields,
+        getFieldsValue,
+        updateSchema,
+        resetSchema,
+        getSchemaByField,
+        appendSchemaByField,
+        removeSchemaByFiled,
+        resetFields,
+        scrollToField,
+      } = useFormEvents({
+        emit,
+        getProps,
+        formModel,
+        getSchema,
+        defaultValueRef,
+        formElRef: formElRef as Ref<FormActionType>,
+        schemaRef: schemaRef as Ref<FormSchema[]>,
+        handleFormValues,
+      });
+
+      createFormContext({
+        resetAction: resetFields,
+        submitAction: handleSubmit,
+      });
+
+      watch(
+        () => unref(getProps).model,
+        () => {
+          const { model } = unref(getProps);
+          if (!model) return;
+          setFieldsValue(model);
+        },
+        {
+          immediate: true,
+        }
+      );
+
+      watch(
+        () => unref(getProps).schemas,
+        (schemas) => {
+          resetSchema(schemas ?? []);
+        }
+      );
+
+      watch(
+        () => getSchema.value,
+        (schema) => {
+          nextTick(() => {
+            //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+            modalFn?.redoModalHeight?.();
+          });
+          if (unref(isInitedDefaultRef)) {
+            return;
+          }
+          if (schema?.length) {
+            initDefault();
+            isInitedDefaultRef.value = true;
+          }
+        }
+      );
+
+      async function setProps(formProps: Partial<FormProps>): Promise<void> {
+        propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+      }
+
+      // 代码逻辑说明: QQYUN-3121 【优化】表单视图问题#scott测试 8、此功能未实现
+      const onFormSubmitWhenChange = useDebounceFn(handleSubmit, 300);
+      function setFormModel(key: string, value: any) {
+        formModel[key] = value;
+        // const { validateTrigger } = unref(getBindValue);
+        // if (!validateTrigger || validateTrigger === 'change') {
+        //   validateFields([key]).catch((_) => {});
+        // }
+        if(props.autoSearch === true){
+          onFormSubmitWhenChange();
+        }
+      }
+
+      function handleEnterPress(e: KeyboardEvent) {
+        const { autoSubmitOnEnter } = unref(getProps);
+        if (!autoSubmitOnEnter) return;
+        if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
+          const target: HTMLElement = e.target as HTMLElement;
+          if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+            handleSubmit();
+          }
+        }
+      }
+
+      /**
+       * 获取 componentProps，处理可能是函数的情况
+       * @param schema
+       */
+      function getSchemaComponentProps(schema: FormSchema) {
+        if (typeof schema.componentProps === 'function') {
+          return schema.componentProps({
+            schema,
+            tableAction: props.tableAction,
+            formActionType,
+            formModel,
+          })
+        }
+        return schema.componentProps
+      }
+
+      const formActionType: Partial<FormActionType> = {
+        getFieldsValue,
+        setFieldsValue,
+        resetFields,
+        updateSchema,
+        resetSchema,
+        setProps,
+        getProps,
+        getSchemaByField,
+        removeSchemaByFiled,
+        appendSchemaByField,
+        clearValidate,
+        validateFields,
+        validate,
+        submit: handleSubmit,
+        scrollToField: scrollToField,
+        getSchemaComponentProps,
+      };
+
+      onMounted(() => {
+        initDefault();
+        emit('register', formActionType);
+      });
+
+      return {
+        getBindValue,
+        handleToggleAdvanced,
+        handleEnterPress,
+        formModel,
+        defaultValueRef,
+        advanceState,
+        getRow,
+        getProps,
+        formElRef,
+        getSchema,
+        formActionType: formActionType as any,
+        setFormModel,
+        getFormClass,
+        getFormActionBindProps: computed((): Recordable => ({ ...getProps.value, ...advanceState })),
+        ...formActionType,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-form';
+
+  .@{prefix-cls} {
+    .ant-form-item {
+      &-label label::after {
+        margin: 0 6px 0 2px;
+      }
+
+      &-with-help {
+        margin-bottom: 0;
+      }
+      //&:not(.ant-form-item-with-help) {
+      //  margin-bottom: 24px;
+      //}
+      // 代码逻辑说明: 【TV360X-1420】校验时闪动
+      &-has-error {
+        margin-bottom: 24px;
+      }
+
+      // 表单组件中间件样式
+      .j-form-item-middleware {
+        flex: 1;
+        width: 100%
+      }
+
+      &.suffix-item {
+        .ant-form-item-children {
+          display: flex;
+        }
+
+        .ant-form-item-control {
+          margin-top: 4px;
+        }
+
+        // 【QQYUN-12876】当紧凑型 suffix 时，表单组件中间件的宽度不占满
+        &.suffix-compact .j-form-item-middleware {
+          flex: unset;
+          width: auto;
+        }
+
+        .suffix {
+          display: inline-flex;
+          padding-left: 6px;
+          margin-top: 1px;
+          line-height: 1;
+          align-items: center;
+        }
+      }
+    }
+    /*【美化表单】form的字体改小一号*/
+/*    .ant-form-item-label > label{
+      font-size: 13px;
+    }
+    .ant-form-item .ant-select {
+      font-size: 13px;
+    }
+    .ant-select-item-option-selected {
+      font-size: 13px;
+    }
+    .ant-select-item-option-content {
+      font-size: 13px;
+    }
+    .ant-input {
+      font-size: 13px;
+    }*/
+    /*【美化表单】form的字体改小一号*/
+    
+    .ant-form-explain {
+      font-size: 14px;
+    }
+
+    &--compact {
+      .ant-form-item {
+        margin-bottom: 8px !important;
+      }
+    }
+    // 代码逻辑说明: 【QQYUN-6566】BasicForm支持一行显示(inline)
+    &.ant-form-inline {
+      & > .ant-row {
+        .ant-col { width:auto !important; }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
new file mode 100644
index 0000000..e579762
--- /dev/null
+++ b/src/components/Form/src/componentMap.ts
@@ -0,0 +1,106 @@
+/**
+ * 目前实现了异步加载的组件清单（antd 组件已改为 createAsyncComponent 异步加载）
+ */
+import type { Component } from 'vue';
+import type { ComponentType } from './types/index';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+/**
+ * Component list, register here to setting it in the form
+ */
+
+const componentMap = new Map<ComponentType, Component>();
+
+componentMap.set('Time', createAsyncComponent(() => import('/@/components/Time/src/Time.vue')));
+componentMap.set('Input', createAsyncComponent(() => import('ant-design-vue/es/input')));
+componentMap.set('InputGroup', createAsyncComponent(() => import('ant-design-vue/es/input/Group')));
+componentMap.set('InputPassword', createAsyncComponent(() => import('ant-design-vue/es/input/Password')));
+componentMap.set('InputSearch', createAsyncComponent(() => import('ant-design-vue/es/input/Search')));
+componentMap.set('InputTextArea', createAsyncComponent(() => import('ant-design-vue/es/input/TextArea')));
+componentMap.set('InputNumber', createAsyncComponent(() => import('ant-design-vue/es/input-number')));
+componentMap.set('AutoComplete', createAsyncComponent(() => import('ant-design-vue/es/auto-complete')));
+
+componentMap.set('Select', createAsyncComponent(() => import('ant-design-vue/es/select')));
+componentMap.set('ApiSelect', createAsyncComponent(() => import('./components/ApiSelect.vue')));
+componentMap.set('JTabsSelectUser', createAsyncComponent(() => import('@/components/jeecg/JTabsSelectUser/index.vue')));
+componentMap.set('TreeSelect', createAsyncComponent(() => import('ant-design-vue/es/tree-select')));
+componentMap.set('ApiTreeSelect', createAsyncComponent(() => import('./components/ApiTreeSelect.vue')));
+componentMap.set('ApiRadioGroup', createAsyncComponent(() => import('./components/ApiRadioGroup.vue')));
+componentMap.set('Switch', createAsyncComponent(() => import('ant-design-vue/es/switch')));
+componentMap.set('RadioButtonGroup', createAsyncComponent(() => import('./components/RadioButtonGroup.vue')));
+componentMap.set('RadioGroup', createAsyncComponent(() => import('ant-design-vue/es/radio/Group')));
+componentMap.set('Checkbox', createAsyncComponent(() => import('ant-design-vue/es/checkbox')));
+componentMap.set('CheckboxGroup', createAsyncComponent(() => import('ant-design-vue/es/checkbox/Group')));
+componentMap.set('Cascader', createAsyncComponent(() => import('ant-design-vue/es/cascader')));
+componentMap.set('Slider', createAsyncComponent(() => import('ant-design-vue/es/slider')));
+componentMap.set('Rate', createAsyncComponent(() => import('ant-design-vue/es/rate')));
+
+componentMap.set('DatePicker', createAsyncComponent(() => import('ant-design-vue/es/date-picker')));
+componentMap.set('MonthPicker', createAsyncComponent(() => import('ant-design-vue/es/date-picker').then((m) => m.default.MonthPicker)));
+componentMap.set('RangePicker', createAsyncComponent(() => import('ant-design-vue/es/date-picker').then((m) => m.default.RangePicker)));
+componentMap.set('WeekPicker', createAsyncComponent(() => import('ant-design-vue/es/date-picker').then((m) => m.default.WeekPicker)));
+componentMap.set('TimePicker', createAsyncComponent(() => import('ant-design-vue/es/time-picker')));
+componentMap.set('DatePickerInFilter', createAsyncComponent(() => import('@/components/InFilter/DatePickerInFilter.vue')));
+componentMap.set('JDatePickerMultiple', createAsyncComponent(() => import('./jeecg/components/JDatePickerMultiple.vue')));
+componentMap.set('StrengthMeter', createAsyncComponent(() => import('/@/components/StrengthMeter/src/StrengthMeter.vue')));
+componentMap.set('IconPicker', createAsyncComponent(() => import('/@/components/Icon/src/IconPicker.vue')));
+componentMap.set('InputCountDown', createAsyncComponent(() => import('/@/components/CountDown/src/CountdownInput.vue')));
+
+componentMap.set('Upload', createAsyncComponent(() => import('/@/components/Upload/src/BasicUpload.vue')));
+componentMap.set('Divider', createAsyncComponent(() => import('ant-design-vue/es/divider')));
+
+//注册自定义组件
+
+componentMap.set('JAreaLinkage', createAsyncComponent(() => import('./jeecg/components/JAreaLinkage.vue')));
+componentMap.set('JSelectPosition', createAsyncComponent(() => import('./jeecg/components/JSelectPosition.vue')));
+componentMap.set('JSelectUser', createAsyncComponent(() => import('./jeecg/components/JSelectUser.vue')));
+componentMap.set('JSelectRole', createAsyncComponent(() => import('./jeecg/components/JSelectRole.vue')));
+componentMap.set('JImageUpload', createAsyncComponent(() => import('./jeecg/components/JImageUpload.vue')));
+componentMap.set('JDictSelectTag', createAsyncComponent(() => import('./jeecg/components/JDictSelectTag.vue')));
+componentMap.set('JSelectDept', createAsyncComponent(() => import('./jeecg/components/JSelectDept.vue')));
+componentMap.set('JAreaSelect', createAsyncComponent(() => import('./jeecg/components/JAreaSelect.vue')));
+// update-begin--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+componentMap.set('JLinkTableCard', createAsyncComponent(() => import('./jeecg/components/JLinkTableCard/JLinkTableCard.vue'), { loading: true }));
+componentMap.set('JEditor', createAsyncComponent(() => import('./jeecg/components/JEditor.vue')));
+// update-end--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+componentMap.set('JMarkdownEditor', createAsyncComponent(() => import('./jeecg/components/JMarkdownEditor.vue')));
+componentMap.set('JSelectInput', createAsyncComponent(() => import('./jeecg/components/JSelectInput.vue')));
+componentMap.set('JCodeEditor', createAsyncComponent(() => import('./jeecg/components/JCodeEditor.vue')));
+componentMap.set('JCategorySelect', createAsyncComponent(() => import('./jeecg/components/JCategorySelect.vue')));
+componentMap.set('JSelectMultiple', createAsyncComponent(() => import('./jeecg/components/JSelectMultiple.vue')));
+componentMap.set('JSelectSingle', createAsyncComponent(() => import('./jeecg/components/JSelectSingle.vue')));
+componentMap.set('JPopup', createAsyncComponent(() => import('./jeecg/components/JPopup.vue')));
+// 代码逻辑说明: 【QQYUN-7961】popupDict字典
+componentMap.set('JPopupDict', createAsyncComponent(() => import('./jeecg/components/JPopupDict.vue')));
+componentMap.set('JSwitch', createAsyncComponent(() => import('./jeecg/components/JSwitch.vue')));
+componentMap.set('JTreeDict', createAsyncComponent(() => import('./jeecg/components/JTreeDict.vue')));
+componentMap.set('JInputPop', createAsyncComponent(() => import('./jeecg/components/JInputPop.vue')));
+componentMap.set('JEasyCron', createAsyncComponent(() => import('./jeecg/components/JEasyCron/EasyCronInput.vue')));
+componentMap.set('JCheckbox', createAsyncComponent(() => import('./jeecg/components/JCheckbox.vue')));
+componentMap.set('JInput', createAsyncComponent(() => import('./jeecg/components/JInput.vue')));
+componentMap.set('JTreeSelect', createAsyncComponent(() => import('./jeecg/components/JTreeSelect.vue')));
+componentMap.set('JEllipsis', createAsyncComponent(() => import('./jeecg/components/JEllipsis.vue')));
+componentMap.set('JSelectUserByDept', createAsyncComponent(() => import('./jeecg/components/JSelectUserByDept.vue')));
+componentMap.set('JSelectUserByDepartment', createAsyncComponent(() => import('./jeecg/components/JSelectUserByDepartment.vue')));
+componentMap.set('JUpload', createAsyncComponent(() => import('./jeecg/components/JUpload/JUpload.vue')));
+componentMap.set('JSearchSelect', createAsyncComponent(() => import('./jeecg/components/JSearchSelect.vue')));
+componentMap.set('JAddInput', createAsyncComponent(() => import('./jeecg/components/JAddInput.vue')));
+componentMap.set('JRangeNumber', createAsyncComponent(() => import('./jeecg/components/JRangeNumber.vue')));
+componentMap.set('CascaderPcaInFilter', createAsyncComponent(() => import('@/components/InFilter/CascaderPcaInFilter.vue')));
+componentMap.set('UserSelect', createAsyncComponent(() => import('./jeecg/components/userSelect/index.vue')));
+componentMap.set('RangeDate', createAsyncComponent(() => import('./jeecg/components/JRangeDate.vue')));
+componentMap.set('RangeTime', createAsyncComponent(() => import('./jeecg/components/JRangeTime.vue')));
+componentMap.set('RoleSelect', createAsyncComponent(() => import('./jeecg/components/roleSelect/RoleSelectInput.vue')));
+componentMap.set('JInputSelect', createAsyncComponent(() => import('./jeecg/components/JInputSelect.vue')));
+componentMap.set('JSelectDepartPost', createAsyncComponent(() => import('./jeecg/components/JSelectDepartPost.vue')));
+componentMap.set('JSelectUserByDeptPost', createAsyncComponent(() => import('./jeecg/components/JSelectUserByDeptPost.vue')));
+
+
+export function add(compName: ComponentType, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: ComponentType) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };
diff --git a/src/components/Form/src/components/ApiRadioGroup.vue b/src/components/Form/src/components/ApiRadioGroup.vue
new file mode 100644
index 0000000..b58b421
--- /dev/null
+++ b/src/components/Form/src/components/ApiRadioGroup.vue
@@ -0,0 +1,130 @@
+<!--
+ * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
+-->
+<template>
+  <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid" @change="handleChange">
+    <template v-for="item in getOptions" :key="`${item.value}`">
+      <RadioButton v-if="props.isBtn" :value="item.value" :disabled="item.disabled">
+        {{ item.label }}
+      </RadioButton>
+      <Radio v-else :value="item.value" :disabled="item.disabled">
+        {{ item.label }}
+      </Radio>
+    </template>
+  </RadioGroup>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { Radio } from 'ant-design-vue';
+  import { isFunction } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { propTypes } from '/@/utils/propTypes';
+  import { get, omit } from 'lodash-es';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
+
+  export default defineComponent({
+    name: 'ApiRadioGroup',
+    components: {
+      RadioGroup: Radio.Group,
+      RadioButton: Radio.Button,
+      Radio,
+    },
+    props: {
+      api: {
+        type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
+        default: null,
+      },
+      params: {
+        type: [Object, String] as PropType<Recordable | string>,
+        default: () => ({}),
+      },
+      value: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      },
+      isBtn: {
+        type: [Boolean] as PropType<boolean>,
+        default: false,
+      },
+      numberToString: propTypes.bool,
+      resultField: propTypes.string.def(''),
+      labelField: propTypes.string.def('label'),
+      valueField: propTypes.string.def('value'),
+      immediate: propTypes.bool.def(true),
+    },
+    emits: ['options-change', 'change'],
+    setup(props, { emit }) {
+      const options = ref<OptionsItem[]>([]);
+      const loading = ref(false);
+      const isFirstLoad = ref(true);
+      const emitData = ref<any[]>([]);
+      const attrs = useAttrs();
+      const { t } = useI18n();
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props);
+
+      // Processing options value
+      const getOptions = computed(() => {
+        const { labelField, valueField, numberToString } = props;
+
+        return unref(options).reduce((prev, next: Recordable) => {
+          if (next) {
+            const value = next[valueField];
+            prev.push({
+              label: next[labelField],
+              value: numberToString ? `${value}` : value,
+              ...omit(next, [labelField, valueField]),
+            });
+          }
+          return prev;
+        }, [] as OptionsItem[]);
+      });
+
+      watchEffect(() => {
+        props.immediate && fetch();
+      });
+
+      watch(
+        () => props.params,
+        () => {
+          !unref(isFirstLoad) && fetch();
+        },
+        { deep: true }
+      );
+
+      async function fetch() {
+        const api = props.api;
+        if (!api || !isFunction(api)) return;
+        options.value = [];
+        try {
+          loading.value = true;
+          const res = await api(props.params);
+          if (Array.isArray(res)) {
+            options.value = res;
+            emitChange();
+            return;
+          }
+          if (props.resultField) {
+            options.value = get(res, props.resultField) || [];
+          }
+          emitChange();
+        } catch (error) {
+          console.warn(error);
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      function emitChange() {
+        emit('options-change', unref(getOptions));
+      }
+
+      function handleChange(_, ...args) {
+        emitData.value = args;
+      }
+
+      return { state, getOptions, attrs, loading, t, handleChange, props };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
new file mode 100644
index 0000000..58ce857
--- /dev/null
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -0,0 +1,242 @@
+<template>
+  <Select
+    v-bind="attrs_"
+    v-model:value="state"
+    :options="getOptions"
+    show-search
+    :filter-option="filterOption"
+    @change="handleChange"
+    @dropdownVisibleChange="handleFetch"
+    @popupScroll="handlePopupScroll"
+  >
+    <template #[item]="data" v-for="item in Object.keys($slots)">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template #suffixIcon v-if="loading">
+      <LoadingOutlined spin />
+    </template>
+    <template #notFoundContent v-if="loading">
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+  </Select>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import { isFunction } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { get, omit } from 'lodash-es';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isNumber } from '/@/utils/is';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+  //文档 https://help.jeecg.com/ui/apiSelect#pageconfig%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE
+  export default defineComponent({
+    name: 'ApiSelect',
+    components: {
+      Select,
+      LoadingOutlined,
+    },
+    inheritAttrs: false,
+    props: {
+      value: [Array, String, Number],
+      numberToString: propTypes.bool,
+      api: {
+        type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
+        default: null,
+      },
+      // api params
+      params: {
+        type: Object as PropType<Recordable>,
+        default: () => ({}),
+      },
+      //分页配置
+      pageConfig: {
+        type: Object as PropType<Recordable>,
+        default: () => ({ isPage: false }),
+      },
+      // support xxx.xxx.xx
+      resultField: propTypes.string.def(''),
+      labelField: propTypes.string.def('label'),
+      valueField: propTypes.string.def('value'),
+      immediate: propTypes.bool.def(true),
+    },
+    emits: ['options-change', 'change'],
+    setup(props, { emit }) {
+      const options = ref<OptionsItem[]>([]);
+      const loading = ref(false);
+      const isFirstLoad = ref(true);
+      const emitData = ref<any[]>([]);
+      const attrs = useAttrs();
+      const { t } = useI18n();
+      // 代码逻辑说明: 【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+      const hasMore = ref(true);
+      const pagination = ref({
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+      });
+      const defPageConfig = { isPage: false, pageField: 'pageNo', pageSizeField: 'pageSize', totalField: 'total', listField: 'records' };
+      // update-end--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state, setState] = useRuleFormItem(props, 'value', 'change', emitData);
+      // 代码逻辑说明: 【QQYUN-6308】解决警告
+      let vModalValue: any;
+      const attrs_ = computed(() => {
+        let obj: any = unref(attrs) || {};
+        if (obj && obj['onUpdate:value']) {
+          vModalValue = obj['onUpdate:value'];
+          delete obj['onUpdate:value'];
+        }
+        // 代码逻辑说明: 【issues/5467】ApiSelect修复覆盖了用户传递的方法
+        if (obj['filterOption'] === undefined) {
+          // 代码逻辑说明: 【issues/5305】无法按照预期进行搜索
+          obj['filterOption'] = (inputValue, option) => {
+            if (typeof option['label'] === 'string') {
+              return option['label'].toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
+            } else {
+              return true;
+            }
+          };
+        }
+        return obj;
+      });
+      // 代码逻辑说明: 【QQYUN-6308】解决警告
+      const getOptions = computed(() => {
+        const { labelField, valueField, numberToString } = props;
+        return unref(options).reduce((prev, next: Recordable) => {
+          if (next) {
+            const value = next[valueField];
+            prev.push({
+              // update-begin--author:liaozhiyang---date:20260226---for:【issues/9326】ApiSelect组件，返回数据中包含 options 这个名称导致组件渲染失败
+              ...omit(next, [labelField, valueField, 'options']),
+              // update-end--author:liaozhiyang---date:20260226---for:【issues/9326】ApiSelect组件，返回数据中包含 options 这个名称导致组件渲染失败
+              label: next[labelField],
+              value: numberToString ? `${value}` : value,
+            });
+          }
+          return prev;
+        }, [] as OptionsItem[]);
+      });
+      // 代码逻辑说明: 【issues/8527】apiSelect分页加载重复请求
+      watch(
+        () => props.immediate,
+        () => {
+          props.immediate && fetch();
+        },
+        { immediate: true }
+      );
+      watch(
+        () => [props.api, props.pageConfig, props.resultField, props.params],
+        () => {
+          props.immediate && fetch();
+        },
+        { deep: true }
+      );
+
+      watch(
+        () => props.params,
+        () => {
+          !unref(isFirstLoad) && fetch();
+        },
+        { deep: true }
+      );
+      //监听数值修改，查询数据
+      watchEffect(() => {
+        props.value && handleFetch();
+      });
+      /**
+       * 筛选流程
+       * @param input
+       * @param option
+       */
+      const filterOption = (input: string, option: any) => {
+        return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.label.indexOf(input) >= 0;
+      };
+      async function fetch() {
+        const api = props.api;
+        if (!api || !isFunction(api)) return;
+        // 代码逻辑说明: 【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+        if (!props.pageConfig.isPage || pagination.value.pageNo == 1) {
+          options.value = [];
+        }
+        try {
+          loading.value = true;
+          let { isPage, pageField, pageSizeField, totalField, listField } = { ...defPageConfig, ...props.pageConfig };
+          let params = isPage
+            ? { ...props.params, [pageField]: pagination.value.pageNo, [pageSizeField]: pagination.value.pageSize }
+            : { ...props.params };
+          const res = await api(params);
+          if (isPage) {
+            // 代码逻辑说明: 【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+            options.value = [...options.value, ...res[listField]];
+            pagination.value.total = res[totalField] || 0;
+            hasMore.value = res[totalField] ? options.value.length < res[totalField] : res[listField] < pagination.value.pageSize;
+          } else {
+            if (Array.isArray(res)) {
+              options.value = res;
+              emitChange();
+              return;
+            }
+            if (props.resultField) {
+              options.value = get(res, props.resultField) || [];
+            }
+          }
+          emitChange();
+        } catch (error) {
+          console.warn(error);
+        } finally {
+          loading.value = false;
+          ['multiple', 'tags'].includes(unref(attrs).mode) && !Array.isArray(unref(state)) && setState([]);
+          initValue();
+        }
+      }
+
+      function initValue() {
+        let value = props.value;
+        // 代码逻辑说明: 【issues/8037】初始化值单选的值被错误地写入数组值
+        if (['multiple', 'tags'].includes(unref(attrs).mode)) {
+          if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+            state.value = value.split(',');
+          } else if (isNumber(value)) {
+            state.value = [value];
+          }
+        } else {
+          state.value = value;
+        }
+      }
+
+      async function handleFetch() {
+        if (!props.immediate && unref(isFirstLoad)) {
+          await fetch();
+          isFirstLoad.value = false;
+        }
+      }
+
+      function emitChange() {
+        emit('options-change', unref(getOptions));
+      }
+
+      function handleChange(_, ...args) {
+        vModalValue && vModalValue(_);
+        emitData.value = args;
+      }
+      // 滚动加载更多
+      function handlePopupScroll(e) {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        const isNearBottom = scrollHeight - scrollTop <= clientHeight + 20;
+        if (props.pageConfig.isPage && isNearBottom && hasMore.value && !loading.value) {
+          pagination.value.pageNo += 1;
+          fetch();
+        }
+      }
+      return { state, attrs_, attrs, getOptions, loading, t, handleFetch, handleChange, handlePopupScroll,filterOption };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/components/ApiTreeSelect.vue b/src/components/Form/src/components/ApiTreeSelect.vue
new file mode 100644
index 0000000..158eb03
--- /dev/null
+++ b/src/components/Form/src/components/ApiTreeSelect.vue
@@ -0,0 +1,87 @@
+<template>
+  <a-tree-select v-bind="getAttrs" @change="handleChange">
+    <template #[item]="data" v-for="item in Object.keys($slots)">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template #suffixIcon v-if="loading">
+      <LoadingOutlined spin />
+    </template>
+  </a-tree-select>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { TreeSelect } from 'ant-design-vue';
+  import { isArray, isFunction } from '/@/utils/is';
+  import { get } from 'lodash-es';
+  import { propTypes } from '/@/utils/propTypes';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'ApiTreeSelect',
+    components: { ATreeSelect: TreeSelect, LoadingOutlined },
+    props: {
+      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
+      params: { type: Object },
+      immediate: { type: Boolean, default: true },
+      resultField: propTypes.string.def(''),
+    },
+    emits: ['options-change', 'change'],
+    setup(props, { attrs, emit }) {
+      const treeData = ref<Recordable[]>([]);
+      const isFirstLoaded = ref<Boolean>(false);
+      const loading = ref(false);
+      const getAttrs = computed(() => {
+        return {
+          ...(props.api ? { treeData: unref(treeData) } : {}),
+          ...attrs,
+        };
+      });
+
+      function handleChange(...args) {
+        emit('change', ...args);
+      }
+
+      watch(
+        () => props.params,
+        () => {
+          // 代码逻辑说明: 【QQYUN-8346】 ApiTreeSelect组件入参变化时，不及时刷新数据 #1054---
+          unref(isFirstLoaded) && fetch();
+        },
+        { deep: true }
+      );
+
+      watch(
+        () => props.immediate,
+        (v) => {
+          v && !isFirstLoaded.value && fetch();
+        }
+      );
+
+      onMounted(() => {
+        props.immediate && fetch();
+      });
+
+      async function fetch() {
+        const { api } = props;
+        if (!api || !isFunction(api)) return;
+        loading.value = true;
+        treeData.value = [];
+        let result;
+        try {
+          result = await api(props.params);
+        } catch (e) {
+          console.error(e);
+        }
+        loading.value = false;
+        if (!result) return;
+        if (!isArray(result)) {
+          result = get(result, props.resultField);
+        }
+        treeData.value = (result as Recordable[]) || [];
+        isFirstLoaded.value = true;
+        emit('options-change', treeData.value);
+      }
+      return { getAttrs, loading, handleChange };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/components/FormAction.vue b/src/components/Form/src/components/FormAction.vue
new file mode 100644
index 0000000..cf67c4d
--- /dev/null
+++ b/src/components/Form/src/components/FormAction.vue
@@ -0,0 +1,137 @@
+<template>
+  <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
+    <div class="btnArea" style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
+      <FormItem>
+        <slot name="submitBefore"></slot>
+        <Button type="primary" class="mr-2" v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
+          {{ getSubmitBtnOptions.text }}
+        </Button>
+
+        <slot name="resetBefore"></slot>
+        <Button type="default" class="mr-2" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
+          {{ getResetBtnOptions.text }}
+        </Button>
+
+        <slot name="advanceBefore"></slot>
+        <Button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
+          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
+          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
+        </Button>
+        <slot name="advanceAfter"></slot>
+      </FormItem>
+    </div>
+  </a-col>
+</template>
+<script lang="ts">
+  import type { ColEx } from '../types/index';
+  //import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+  import { defineComponent, computed, PropType } from 'vue';
+  import { Form, Col } from 'ant-design-vue';
+  import { Button, ButtonProps } from '/@/components/Button';
+  import { BasicArrow } from '/@/components/Basic';
+  import { useFormContext } from '../hooks/useFormContext';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { propTypes } from '/@/utils/propTypes';
+
+  type ButtonOptions = Partial<ButtonProps> & { text: string };
+
+  export default defineComponent({
+    name: 'BasicFormAction',
+    components: {
+      FormItem: Form.Item,
+      Button,
+      BasicArrow,
+      [Col.name]: Col,
+    },
+    props: {
+      showActionButtonGroup: propTypes.bool.def(true),
+      showResetButton: propTypes.bool.def(true),
+      showSubmitButton: propTypes.bool.def(true),
+      showAdvancedButton: propTypes.bool.def(true),
+      resetButtonOptions: {
+        type: Object as PropType<ButtonOptions>,
+        default: () => ({}),
+      },
+      submitButtonOptions: {
+        type: Object as PropType<ButtonOptions>,
+        default: () => ({}),
+      },
+      actionColOptions: {
+        type: Object as PropType<Partial<ColEx>>,
+        default: () => ({}),
+      },
+      actionSpan: propTypes.number.def(6),
+      isAdvanced: propTypes.bool,
+      hideAdvanceBtn: propTypes.bool,
+      layout: propTypes.oneOf(['horizontal', 'vertical', 'inline']).def('horizontal'),
+    },
+    emits: ['toggle-advanced'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+
+      const actionColOpt = computed(() => {
+        const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
+        const actionSpan = 24 - span;
+        const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
+        // 代码逻辑说明: 【QQYUN-6566】BasicForm支持一行显示(inline)
+        const defaultSpan = props.layout == 'inline' ? {} : { span: showAdvancedButton ? 6 : 4 };
+        const actionColOpt: Partial<ColEx> = {
+          style: { textAlign: 'right' },
+          ...defaultSpan,
+          ...advancedSpanObj,
+          ...actionColOptions,
+        };
+        
+        
+        
+        return actionColOpt;
+      });
+
+      const getResetBtnOptions = computed((): ButtonOptions => {
+        return Object.assign(
+          {
+            text: t('common.resetText'),
+            preIcon: 'ic:baseline-restart-alt',
+          },
+          props.resetButtonOptions
+        );
+      });
+
+      const getSubmitBtnOptions = computed(() => {
+        return Object.assign(
+          {},
+          {
+            text: t('common.queryText'),
+            preIcon: 'ant-design:search-outlined',
+          },
+          props.submitButtonOptions
+        );
+      });
+
+      function toggleAdvanced() {
+        emit('toggle-advanced');
+      }
+
+      return {
+        t,
+        actionColOpt,
+        getResetBtnOptions,
+        getSubmitBtnOptions,
+        toggleAdvanced,
+        ...useFormContext(),
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【TV360X-999】在1753px宽度下 流程设计页面查询的展开换行了
+  .btnArea {
+    :deep(.ant-form-item-control-input-content) {
+      display: flex;
+      align-items: center;
+      .ant-btn-link {
+        padding-left: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
new file mode 100644
index 0000000..af05918
--- /dev/null
+++ b/src/components/Form/src/components/FormItem.vue
@@ -0,0 +1,527 @@
+<script lang="tsx">
+  import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
+  import type { PropType, Ref } from 'vue';
+  import type { FormActionType, FormProps } from '../types/form';
+  import type { FormSchema } from '../types/form';
+  import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+  import type { TableActionType } from '/@/components/Table';
+  import { defineComponent, computed, unref, toRefs } from 'vue';
+  import { Form, Col, Divider } from 'ant-design-vue';
+  import { componentMap } from '../componentMap';
+  import { BasicHelp } from '/@/components/Basic';
+  import { isBoolean, isFunction, isNull } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { createPlaceholderMessage, setComponentRuleType } from '../helper';
+  import { upperFirst, cloneDeep } from 'lodash-es';
+  import { useItemLabelWidth } from '../hooks/useLabelWidth';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import Middleware from './Middleware.vue';
+  import { useLocaleStoreWithOut } from '/@/store/modules/locale';
+
+  export default defineComponent({
+    name: 'BasicFormItem',
+    inheritAttrs: false,
+    props: {
+      schema: {
+        type: Object as PropType<FormSchema>,
+        default: () => ({}),
+      },
+      formProps: {
+        type: Object as PropType<FormProps>,
+        default: () => ({}),
+      },
+      allDefaultValues: {
+        type: Object as PropType<Recordable>,
+        default: () => ({}),
+      },
+      formModel: {
+        type: Object as PropType<Recordable>,
+        default: () => ({}),
+      },
+      setFormModel: {
+        type: Function as PropType<(key: string, value: any) => void>,
+        default: null,
+      },
+      validateFields: {
+        type: Function as PropType<(nameList?: NamePath[] | undefined, options?: ValidateOptions) => Promise<any>>,
+        default: null,
+      },
+      tableAction: {
+        type: Object as PropType<TableActionType>,
+      },
+      formActionType: {
+        type: Object as PropType<FormActionType>,
+      },
+      // 代码逻辑说明: 【TV360X-857】解决禁用状态下触发校验
+      clearValidate: {
+        type: Function,
+        default: null,
+      },
+      // 代码逻辑说明: 【TV360X-1511】blur不生效
+      formName: {
+        type: String,
+        default: '',
+      },
+      source: {
+        type: String,
+        default: '',
+      },
+    },
+    setup(props, { slots }) {
+      const { t } = useI18n();
+      const localeStore = useLocaleStoreWithOut();
+      const { schema, formProps } = toRefs(props) as {
+        schema: Ref<FormSchema>;
+        formProps: Ref<FormProps>;
+      };
+
+      const itemLabelWidthProp = useItemLabelWidth(schema, formProps);
+
+      const getValues = computed(() => {
+        const { allDefaultValues, formModel, schema } = props;
+        const { mergeDynamicData } = props.formProps;
+        return {
+          field: schema.field,
+          model: formModel,
+          values: {
+            ...mergeDynamicData,
+            ...allDefaultValues,
+            ...formModel,
+          } as Recordable,
+          schema: schema,
+        };
+      });
+
+      const getComponentsProps = computed(() => {
+        const { schema, tableAction, formModel, formActionType } = props;
+        let { componentProps = {} } = schema;
+        if (isFunction(componentProps)) {
+          componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {};
+        }
+        if (schema.component === 'Divider') {
+          // 代码逻辑说明: 【QQYUN-6603】分割线标题位置显示不正确---
+          componentProps = Object.assign({ type: 'horizontal',orientation:'left', plain: true, }, componentProps);
+        }
+        return componentProps as Recordable;
+      });
+
+      const getDisable = computed(() => {
+        const { disabled: globDisabled } = props.formProps;
+        // 代码逻辑说明: 【TV360X-594】表单全局禁用则dynamicDisabled不生效
+        if (!!globDisabled) {
+          return globDisabled;
+        }
+        const { dynamicDisabled } = props.schema;
+        const { disabled: itemDisabled = false } = unref(getComponentsProps);
+        let disabled = !!globDisabled || itemDisabled;
+        if (isBoolean(dynamicDisabled)) {
+          disabled = dynamicDisabled;
+        }
+        if (isFunction(dynamicDisabled)) {
+          disabled = dynamicDisabled(unref(getValues));
+        }
+        return disabled;
+      });
+
+      // 代码逻辑说明: 【QQYUN-8377】formSchema props支持动态修改
+      const getDynamicPropsValue = computed(() => {
+        const { dynamicPropsVal, dynamicPropskey } = props.schema;
+        if (dynamicPropskey == null) {
+          return null;
+        } else {
+          const { [dynamicPropskey]: itemValue } = unref(getComponentsProps);
+          let value = itemValue;
+          if (isFunction(dynamicPropsVal)) {
+            value = dynamicPropsVal(unref(getValues));
+            return value;
+          }
+        }
+      });
+
+      function getShow(): { isShow: boolean; isIfShow: boolean } {
+        const { show, ifShow } = props.schema;
+        const { showAdvancedButton } = props.formProps;
+        const itemIsAdvanced = showAdvancedButton ? (isBoolean(props.schema.isAdvanced) ? props.schema.isAdvanced : true) : true;
+
+        let isShow = true;
+        let isIfShow = true;
+
+        if (isBoolean(show)) {
+          isShow = show;
+        }
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(show)) {
+          isShow = show(unref(getValues));
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(unref(getValues));
+        }
+        isShow = isShow && itemIsAdvanced;
+        return { isShow, isIfShow };
+      }
+      // 代码逻辑说明: 【TV360X-434】validator校验执行两次
+      let vSwitchArr: any = [],
+        prevValidatorArr: any = [];
+      const hijackValidator = (rules) => {
+        vSwitchArr = [];
+        prevValidatorArr = [];
+        rules.forEach((item, index) => {
+          const fn = item.validator;
+          vSwitchArr.push(true);
+          prevValidatorArr.push(null);
+          if (isFunction(fn)) {
+            item.validator = (rule, value, callback) => {
+              if (vSwitchArr[index]) {
+                vSwitchArr[index] = false;
+                setTimeout(() => {
+                  vSwitchArr[index] = true;
+                }, 100);
+                const result = fn(rule, value, callback);
+                prevValidatorArr[index] = result;
+                return result;
+              } else {
+                return prevValidatorArr[index];
+              }
+            };
+          }
+        });
+      };
+      function handleRules(): ValidationRule[] {
+        const { rules: defRules = [], component, rulesMessageJoinLabel, label, dynamicRules, required, auth, field } = props.schema;
+        // 代码逻辑说明: 【TV360X-857】解决禁用状态下触发校验
+        const { disabled: globDisabled } = props.formProps;
+        const { disabled: itemDisabled = false } = unref(getComponentsProps);
+        if (!!globDisabled || !!itemDisabled) {
+          props.clearValidate(field);
+          return [];
+        }
+        // 代码逻辑说明: 【TV360X-842】必填项v-auth、show隐藏的情况下表单无法提交
+        const { hasPermission } = usePermission();
+        const { isShow } = getShow();
+        if ((auth && !hasPermission(auth)) || !isShow) {
+          return [];
+        }
+        if (isFunction(dynamicRules)) {
+          // 代码逻辑说明: 【issues/1244】标识了必填，但是必填标识没显示
+          const ruleArr = dynamicRules(unref(getValues)) as ValidationRule[];
+          if (required) {
+            ruleArr.unshift({ required: true });
+          }
+          // 代码逻辑说明: 【TV360X-434】validator校验执行两次
+          hijackValidator(ruleArr);
+          return ruleArr;
+        }
+
+        let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];
+        const { rulesMessageJoinLabel: globalRulesMessageJoinLabel } = props.formProps;
+
+        const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel') ? rulesMessageJoinLabel : globalRulesMessageJoinLabel;
+        const defaultMsg = createPlaceholderMessage(component) + `${joinLabel ? label : ''}`;
+
+        function validator(rule: any, value: any) {
+          const msg = rule.message || defaultMsg;
+          if (value === undefined || isNull(value)) {
+            // 空值
+            return Promise.reject(msg);
+          } else if (Array.isArray(value) && value.length === 0) {
+            // 数组类型
+            return Promise.reject(msg);
+          } else if (typeof value === 'string' && value.trim() === '') {
+            // 空字符串
+            return Promise.reject(msg);
+          } else if (
+            typeof value === 'object' &&
+            Reflect.has(value, 'checked') &&
+            Reflect.has(value, 'halfChecked') &&
+            Array.isArray(value.checked) &&
+            Array.isArray(value.halfChecked) &&
+            value.checked.length === 0 &&
+            value.halfChecked.length === 0
+          ) {
+            // 非关联选择的tree组件
+            return Promise.reject(msg);
+          }
+          return Promise.resolve();
+        }
+
+        const getRequired = isFunction(required) ? required(unref(getValues)) : required;
+
+        if ((!rules || rules.length === 0) && getRequired) {
+          rules = [{ required: getRequired, validator }];
+        }
+
+        const requiredRuleIndex: number = rules.findIndex((rule) => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator'));
+
+        if (requiredRuleIndex !== -1) {
+          const rule = rules[requiredRuleIndex];
+          const { isShow } = getShow();
+          if (!isShow) {
+            rule.required = false;
+          }
+          if (component) {
+            //https://github.com/vbenjs/vue-vben-admin/pull/3082 github修复原文
+            /*if (!Reflect.has(rule, 'type')) {
+              rule.type = component === 'InputNumber' ? 'number' : 'string';
+            }*/
+
+            rule.message = rule.message || defaultMsg;
+
+            if (component.includes('Input') || component.includes('Textarea')) {
+              rule.whitespace = true;
+            }
+            const valueFormat = unref(getComponentsProps)?.valueFormat;
+            setComponentRuleType(rule, component, valueFormat);
+          }
+        }
+
+        // Maximum input length rule check
+        const characterInx = rules.findIndex((val) => val.max);
+        if (characterInx !== -1 && !rules[characterInx].validator) {
+          rules[characterInx].message = rules[characterInx].message || t('component.form.maxTip', [rules[characterInx].max] as Recordable);
+        }
+        // 代码逻辑说明: 【QQYUN-7495】pattern由字符串改成正则传递给antd（因使用InputNumber时发现正则无效）
+        rules.forEach((item) => {
+          if (typeof item.pattern === 'string') {
+            try {
+              const reg = new Function('item', `return ${item.pattern}`)(item);
+              if (Object.prototype.toString.call(reg) === '[object RegExp]') {
+                item.pattern = reg;
+              } else {
+                item.pattern = new RegExp(item.pattern);
+              }
+            } catch (error) {
+              item.pattern = new RegExp(item.pattern);
+            }
+          }
+        });
+        // 代码逻辑说明: 【TV360X-434】validator校验执行两次
+        hijackValidator(rules);
+        return rules;
+      }
+
+      function renderComponent() {
+        const { renderComponentContent, component, field, changeEvent = 'change', valueField, componentProps, dynamicRules, rules:defRules = [] } = props.schema;
+
+        const isCheck = component && ['Switch', 'Checkbox'].includes(component);
+        // 代码逻辑说明: 【QQYUN-6679】input去空格
+        let isTrim = false;
+        if (component === 'Input' && componentProps && componentProps.trim) {
+          isTrim = true;
+        }
+        const eventKey = `on${upperFirst(changeEvent)}`;
+        const getRules = (): ValidationRule[] => {
+          const dyRules = isFunction(dynamicRules) ? dynamicRules(unref(getValues)) : [];
+          return [...dyRules, ...defRules];
+        };
+        // 代码逻辑说明: 【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
+        const on = {
+          [eventKey]: (...args: Nullable<Recordable>[]) => {
+            const [e] = args;
+            if (propsData[eventKey]) {
+              propsData[eventKey](...args);
+              // 代码逻辑说明: 【issues/8791】js增强popup弹框的onlChange()没生效
+              if (eventKey == 'onPopUpChange') {
+                return;
+              }
+            }
+            const target = e ? e.target : null;
+            // 代码逻辑说明: 【QQYUN-6679】input去空格
+            let value;
+            if (target) {
+              if (isCheck) {
+                value = target.checked;
+              } else {
+                value = isTrim ? target.value.trim() : target.value;
+              }
+            } else {
+              value = e;
+            }
+            props.setFormModel(field, value);
+            // 代码逻辑说明: 【TV360X-1511】blur不生效
+            const findItem = getRules().find((item) => item?.trigger === 'blur');
+            if (!findItem) {
+              // 代码逻辑说明: 【TV360X-341】有值之后必填校验不消失
+              props.validateFields([field]).catch((_) => {});
+            }
+          },
+          // onBlur: () => {
+          //   props.validateFields([field], { triggerName: 'blur' }).catch((_) => {});
+          // },
+        };
+        const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
+
+        const { autoSetPlaceHolder, size } = props.formProps;
+        const propsData: Recordable = {
+          allowClear: true,
+          getPopupContainer: (trigger: Element) => {
+
+            return trigger?.parentNode;
+          },
+          size,
+          ...unref(getComponentsProps),
+          disabled: unref(getDisable),
+        };
+        // 代码逻辑说明: 【QQYUN-8377】formSchema props支持动态修改
+        const dynamicPropskey = props.schema.dynamicPropskey;
+        if (dynamicPropskey) {
+          propsData[dynamicPropskey] = unref(getDynamicPropsValue);
+        }
+
+        // const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder;
+        const isCreatePlaceholder = !!autoSetPlaceHolder;
+
+        // RangePicker place是一个数组
+        if (isCreatePlaceholder && component !== 'RangePicker' && component) {
+          //自动设置placeholder
+          // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+          let label = isFunction(props.schema.label) ? props.schema.label() : props.schema.label;
+          if (localeStore.getLocale === 'en' && !(/^\s/.test(label))) {
+            label = ' ' + label;
+          }
+          propsData.placeholder = unref(getComponentsProps)?.placeholder || createPlaceholderMessage(component) + label;
+        }
+        propsData.codeField = field;
+        propsData.formValues = unref(getValues);
+
+        const bindValue: Recordable = {
+          [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[field],
+        };
+
+        const compAttr: Recordable = {
+          ...propsData,
+          ...on,
+          ...bindValue,
+        };
+
+        if (!renderComponentContent) {
+          return <Comp {...compAttr} />;
+        }
+        const compSlot = isFunction(renderComponentContent)
+          ? { ...renderComponentContent(unref(getValues)) }
+          : {
+              default: () => renderComponentContent,
+            };
+        return <Comp {...compAttr}>{compSlot}</Comp>;
+      }
+
+      /**
+       *渲染Label
+       * @updateBy:zyf
+       */
+      function renderLabelHelpMessage() {
+        //label宽度支持自定义
+        const { label: itemLabel, helpMessage, helpComponentProps, subLabel, labelLength } = props.schema;
+        // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+        const label = isFunction(itemLabel) ? itemLabel() : itemLabel;
+        let showLabel: string = label + '';
+        // 代码逻辑说明: 【TV360X-98】label展示的文字必须和labelLength配置一致
+        if (labelLength) {
+          showLabel = showLabel.substr(0, labelLength);
+        }
+        const titleObj = { title: label };
+        const renderLabel = subLabel ? (
+          <span>
+            {label} <span class="text-secondary">{subLabel}</span>
+          </span>
+        ) : labelLength ? (
+          <label {...titleObj}>{showLabel}</label>
+        ) : (
+          label
+        );
+        const getHelpMessage = isFunction(helpMessage) ? helpMessage(unref(getValues)) : helpMessage;
+        if (!getHelpMessage || (Array.isArray(getHelpMessage) && getHelpMessage.length === 0)) {
+          return renderLabel;
+        }
+        return (
+          <span>
+            {renderLabel}
+            <BasicHelp placement="top" class="mx-1" text={getHelpMessage} {...helpComponentProps} />
+          </span>
+        );
+      }
+
+      function renderItem() {
+        const { itemProps, slot, render, field, suffix, suffixCompact, component } = props.schema;
+        const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
+        const { colon } = props.formProps;
+
+        // 代码逻辑说明: itemProps 属性支持函数形式
+        let getItemProps = itemProps;
+        if (typeof getItemProps === 'function') {
+          getItemProps = getItemProps(unref(getValues));
+        }
+
+        if (component === 'Divider') {
+          return (
+            <Col span={24}>
+              <Divider {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</Divider>
+            </Col>
+          );
+        } else {
+          const getContent = () => {
+            return slot ? getSlot(slots, slot, unref(getValues)) : render ? render(unref(getValues)) : renderComponent();
+          };
+
+          const showSuffix = !!suffix;
+          const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
+          return (
+            <Form.Item
+              name={field}
+              colon={colon}
+              class={{ 'suffix-item': showSuffix, 'suffix-compact': showSuffix && suffixCompact }}
+              {...(getItemProps as Recordable)}
+              label={renderLabelHelpMessage()}
+              rules={handleRules()}
+              // 代码逻辑说明: 【issues/1244】标识了必填，但是必填标识没显示
+              validateFirst = { true }
+              labelCol={labelCol}
+              wrapperCol={wrapperCol}
+            >
+              <div style="display:flex">
+                {/* author: sunjianlei for: 【VUEN-744】此处加上 width: 100%; 因为要防止组件宽度超出 FormItem */}
+                {/* update-begin--author:liaozhiyang---date:20240510---for：【TV360X-719】表单校验不通过项滚动到可视区内 */}
+                <Middleware formName={props.formName} fieldName={field} source={props.source}>{getContent()}</Middleware>
+                {/* update-end--author:liaozhiyang---date:20240510---for：【TV360X-719】表单校验不通过项滚动到可视区内 */}
+                {showSuffix && <span class="suffix">{getSuffix}</span>}
+              </div>
+            </Form.Item>
+          );
+        }
+      }
+
+      return () => {
+        const { colProps = {}, colSlot, renderColContent, component } = props.schema;
+        if (!componentMap.has(component)) {
+          return null;
+        }
+
+        const { baseColProps = {} } = props.formProps;
+        // 代码逻辑说明: 【issues-641】调整表格搜索表单的span配置无效
+        const { getIsMobile } = useAppInject();
+        let realColProps;
+        realColProps = { ...baseColProps, ...colProps };
+        if (colProps['span'] && !unref(getIsMobile)) {
+          ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach((name) => delete realColProps[name]);
+        }
+        const { isIfShow, isShow } = getShow();
+        const values = unref(getValues);
+
+        const getContent = () => {
+          return colSlot ? getSlot(slots, colSlot, values) : renderColContent ? renderColContent(values) : renderItem();
+        };
+
+        return (
+          isIfShow && (
+            <Col {...realColProps} v-show={isShow}>
+              {getContent()}
+            </Col>
+          )
+        );
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/components/Middleware.vue b/src/components/Form/src/components/Middleware.vue
new file mode 100644
index 0000000..ee4f5f1
--- /dev/null
+++ b/src/components/Form/src/components/Middleware.vue
@@ -0,0 +1,22 @@
+<template>
+  <div :id="formItemId" class="j-form-item-middleware">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  // 代码逻辑说明: 【TV360X-1511】blur不生效
+  const formItemId = ref(null);
+  const props = defineProps(['formName', 'fieldName', 'source']);
+  if (props.formName && props.fieldName && props.source !== 'table-query') {
+    formItemId.value = `${props.formName}_${props.fieldName}`;
+  }
+</script>
+
+<style lang="less" scoped>
+  // 代码逻辑说明: 【TV360X-1253】代码生成查询区域和新增组件没撑满
+  div > :deep(.ant-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Form/src/components/RadioButtonGroup.vue b/src/components/Form/src/components/RadioButtonGroup.vue
new file mode 100644
index 0000000..c2c7b22
--- /dev/null
+++ b/src/components/Form/src/components/RadioButtonGroup.vue
@@ -0,0 +1,57 @@
+<!--
+ * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
+-->
+<template>
+  <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
+    <template v-for="item in getOptions" :key="`${item.value}`">
+      <RadioButton :value="item.value" :disabled="item.disabled">
+        {{ item.label }}
+      </RadioButton>
+    </template>
+  </RadioGroup>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+  import { Radio } from 'ant-design-vue';
+  import { isString } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
+  type RadioItem = string | OptionsItem;
+
+  export default defineComponent({
+    name: 'RadioButtonGroup',
+    components: {
+      RadioGroup: Radio.Group,
+      RadioButton: Radio.Button,
+    },
+    props: {
+      value: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      },
+      options: {
+        type: Array as PropType<RadioItem[]>,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const attrs = useAttrs();
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props);
+
+      // Processing options value
+      const getOptions = computed((): OptionsItem[] => {
+        const { options } = props;
+        if (!options || options?.length === 0) return [];
+
+        const isStringArr = options.some((item) => isString(item));
+        if (!isStringArr) return options as OptionsItem[];
+
+        return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
+      });
+
+      return { state, getOptions, attrs };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/container/JFormContainer.vue b/src/components/Form/src/container/JFormContainer.vue
new file mode 100644
index 0000000..270731c
--- /dev/null
+++ b/src/components/Form/src/container/JFormContainer.vue
@@ -0,0 +1,221 @@
+<template>
+  <div :class="formDisabled ? 'jeecg-form-container-disabled jeecg-form-detail-effect' : 'jeecg-and-modal-form'">
+    <fieldset :disabled="formDisabled">
+      <slot name="detail"></slot>
+    </fieldset>
+    <slot name="edit"> </slot>
+    <fieldset disabled>
+      <slot></slot>
+    </fieldset>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch } from 'vue';
+
+  export default defineComponent({
+    name: 'JForm',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+    setup(props, { emit }) {
+      const formDisabled = ref<boolean>(props.disabled);
+
+      watch(
+        () => props.disabled,
+        (value) => {
+          formDisabled.value = value;
+        }
+      );
+
+      return {
+        formDisabled,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  // 代码逻辑说明: 【TV360X-1090】表单label超长省略显示
+  .jeecg-and-modal-form {
+    :deep(.ant-form-item-label) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: 6px;
+      > label {
+        line-height: 32px;
+        display: inline;
+        &::after {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240719---for：【TV360X-1090】表单label超长省略显示
+  .jeecg-form-container-disabled {
+    cursor: not-allowed;
+  }
+  .jeecg-form-container-disabled fieldset[disabled] {
+    -ms-pointer-events: none;
+    pointer-events: none;
+  }
+  .jeecg-form-container-disabled :deep(.ant-select) {
+    -ms-pointer-events: none;
+    pointer-events: none;
+  }
+  // update-begin--author:liaozhiyang---date:20240605---for：【TV360X-857】online代码生成详情样式调整
+  // begin antdv 禁用样式
+  // .jeecg-form-container-disabled :deep(.ant-input-number),
+  // .jeecg-form-container-disabled :deep(.ant-input),
+  // .jeecg-form-container-disabled :deep(.ant-input-password),
+  // .jeecg-form-container-disabled :deep(.ant-select-single .ant-select-selector),
+  // .jeecg-form-container-disabled :deep(.ant-radio-wrapper .ant-radio-checked .ant-radio-inner),
+  // .jeecg-form-container-disabled :deep(.ant-switch),
+  // .jeecg-form-container-disabled :deep(.ant-picker),
+  // .jeecg-form-container-disabled :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector),
+  // .jeecg-form-container-disabled :deep(.ant-input-affix-wrapper),
+  // .jeecg-form-container-disabled :deep(.tox .tox-toolbar__group),
+  // .jeecg-form-container-disabled :deep(.tox .tox-edit-area__iframe),
+  // .jeecg-form-container-disabled :deep(.vditor-toolbar),
+  // .jeecg-form-container-disabled :deep(.vditor-preview),
+  // .jeecg-form-container-disabled :deep(.jeecg-tinymce-img-upload) {
+  //   background: rgba(51, 51, 51, 0.04);
+  // }
+
+  // .jeecg-form-container-disabled :deep(.ant-radio-wrapper),
+  // .jeecg-form-container-disabled :deep(.ant-checkbox-wrapper),
+  // .jeecg-form-container-disabled :deep(.ant-btn) {
+  //   color: rgba(0, 0, 0, 0.65);
+  // }
+  // .jeecg-form-container-disabled :deep(.ant-radio-wrapper .ant-radio-inner:after),
+  // .jeecg-form-container-disabled :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  //   background-color: rgba(51, 51, 51, 0.25);
+  // }
+  // .jeecg-form-container-disabled :deep(.ant-radio-inner),
+  // .jeecg-form-container-disabled :deep(.ant-checkbox-inner) {
+  //   border-color: rgba(51, 51, 51, 0.25) !important;
+  // }
+  // .jeecg-form-container-disabled :deep(.ant-input-password > .ant-input),
+  // .jeecg-form-container-disabled :deep(.ant-input-affix-wrapper .ant-input) {
+  //   background: none;
+  // }
+  html[data-theme='light'] {
+    .jeecg-form-detail-effect {
+      :deep(.ant-select-selector),
+      :deep(.ant-btn),
+      :deep(.ant-input),
+      :deep(.ant-input-affix-wrapper),
+      :deep(.ant-picker),
+      :deep(.ant-input-number) {
+        color: #606266 !important;
+      }
+      :deep(.ant-select) {
+        color: #606266 !important;
+      }
+      :deep(.ant-select-selection-item-content),:deep(.ant-select-selection-item),:deep(input) {
+        color: #606266 !important;
+      }
+
+      :deep(.ant-radio-wrapper),
+      :deep(.ant-checkbox-wrapper),
+      :deep(.ant-btn) {
+        color: rgba(0, 0, 0, 0.65);
+      }
+      :deep(.ant-radio-wrapper .ant-radio-inner:after),
+      :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+        color: #606266 !important;
+      }
+      :deep(.ant-radio-inner),
+      :deep(.ant-checkbox-inner) {
+        border-color: rgba(51, 51, 51, 0.25) !important;
+        background-color: rgba(51, 51, 51, 0.04) !important;
+      }
+      :deep(.ant-checkbox-checked .ant-checkbox-inner::after), :deep(.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after){
+        border-color: rgba(51, 51, 51, 0.25) !important;
+      }
+      :deep(.ant-switch) {
+        background-color: rgba(51, 51, 51, 0.25);
+      }
+      :deep(.tox .tox-toolbar__group),
+      :deep(.tox .tox-edit-area__iframe),
+      :deep(.vditor-toolbar),
+      :deep(.vditor-preview),
+      :deep(.jeecg-tinymce-img-upload) {
+        background: rgba(51, 51, 51, 0.04);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .jeecg-form-detail-effect {
+      :deep(.ant-select-selector),
+      :deep(.ant-btn),
+      :deep(.ant-input),
+      :deep(.ant-input-affix-wrapper),
+      :deep(.ant-picker),
+      :deep(.ant-input-number) {
+        color: rgba(255, 255, 255, 0.25) !important;
+        //background-color: rgba(255, 255, 255, 0.08) !important;
+      }
+      :deep(.ant-select) {
+        color: rgba(255, 255, 255, 0.25) !important;
+      }
+      :deep(.ant-select-selection-item-content),:deep(.ant-select-selection-item),:deep(input) {
+        color: rgba(255, 255, 255, 0.25) !important;
+      }
+
+      :deep(.ant-radio-wrapper),
+      :deep(.ant-checkbox-wrapper){
+        color: rgba(255, 255, 255, 0.25);
+      }
+      :deep(.ant-radio-wrapper .ant-radio-inner:after),
+      :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+        background-color: rgba(255, 255, 255, 0.08);
+      }
+      :deep(.ant-radio-inner),
+      :deep(.ant-checkbox-inner) {
+        border-color: #424242 !important;
+        background-color: rgba(255, 255, 255, 0.08);
+      }
+      :deep(.ant-switch) {
+        background-color: rgba(51, 51, 51, 0.25);
+        opacity: 0.65;
+      }
+      :deep(.tox .tox-toolbar__group),
+      :deep(.tox .tox-edit-area__iframe),
+      :deep(.vditor-toolbar),
+      :deep(.vditor-preview),
+      :deep(.jeecg-tinymce-img-upload) {
+        background: rgba(51, 51, 51, 0.04);
+      }
+    }
+  }
+  // end antdv 禁用样式
+  // 代码逻辑说明: 【TV360X-857】online代码生成详情样式调整
+  .jeecg-form-container-disabled :deep(.ant-upload-select) {
+    cursor: grabbing;
+  }
+  .jeecg-form-container-disabled :deep(.ant-upload-list) {
+    cursor: grabbing;
+  }
+  .jeecg-form-container-disabled fieldset[disabled] :deep(.ant-upload-list){
+    // -ms-pointer-events: auto !important;
+    // pointer-events: auto !important;
+  }
+  .jeecg-form-container-disabled fieldset[disabled] iframe {
+    -ms-pointer-events: auto !important;
+    pointer-events: auto !important;
+  }
+  .jeecg-form-container-disabled :deep(.ant-upload-list-item-actions .anticon-delete),
+  .jeecg-form-container-disabled :deep(.ant-upload-list-item .anticon-close) {
+    display: none;
+  }
+  .jeecg-form-container-disabled :deep(.vditor-sv) {
+    display: none !important;
+    background: rgba(51, 51, 51, 0.04);
+  }
+</style>
diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts
new file mode 100644
index 0000000..616b49c
--- /dev/null
+++ b/src/components/Form/src/helper.ts
@@ -0,0 +1,85 @@
+import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+import type { ComponentType } from './types/index';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { dateUtil } from '/@/utils/dateUtil';
+import { isNumber, isObject } from '/@/utils/is';
+
+const { t } = useI18n();
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(component: ComponentType) {
+  if (component.includes('Input') || component.includes('Complete')) {
+    return t('common.inputText');
+  }
+  if (component.includes('Picker')) {
+    return t('common.chooseText');
+  }
+  if (
+    component.includes('Select') ||
+    component.includes('Cascader') ||
+    component.includes('Checkbox') ||
+    component.includes('Radio') ||
+    component.includes('Switch')
+  ) {
+    // return `请选择${label}`;
+    return t('common.chooseText');
+  }
+  return '';
+}
+
+const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'];
+
+function genType() {
+  return [...DATE_TYPE, 'RangePicker'];
+}
+
+export function setComponentRuleType(rule: ValidationRule, component: ComponentType, valueFormat: string) {
+  //https://github.com/vbenjs/vue-vben-admin/pull/3082 github修复原文
+  if (Reflect.has(rule, 'type')) {
+    return;
+  }
+  if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
+    rule.type = valueFormat ? 'string' : 'object';
+  } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
+    rule.type = 'array';
+  } else if (['InputNumber'].includes(component)) {
+    rule.type = 'number';
+  }
+}
+
+export function processDateValue(attr: Recordable, component: string) {
+  const { valueFormat, value } = attr;
+  if (valueFormat) {
+    attr.value = isObject(value) ? dateUtil(value).format(valueFormat) : value;
+  } else if (DATE_TYPE.includes(component) && value) {
+    attr.value = dateUtil(attr.value);
+  }
+}
+
+export function handleInputNumberValue(component?: ComponentType, val?: any) {
+  if (!component) return val;
+  if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) {
+    return val && isNumber(val) ? `${val}` : val;
+  }
+  return val;
+}
+/** 
+*liaozhiyang
+*2023-12-26
+*某些组件的传值需要把字符串类型转成数值类型
+*/ 
+export function handleInputStringValue(component?: ComponentType, val?: any) {
+  if (!component) return val;
+  // 代码逻辑说明: 【TV360X-13】InputNumber设置精确3位小数传入''变成了0.00
+  if (['InputNumber'].includes(component) && typeof val === 'string' && val != '') {
+    return Number(val);
+  }
+  return val;
+}
+
+/**
+ * 时间字段
+ */
+export const dateItemType = genType();
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
new file mode 100644
index 0000000..156cecb
--- /dev/null
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -0,0 +1,163 @@
+import type { ColEx } from '../types';
+import type { AdvanceState } from '../types/hooks';
+import type { ComputedRef, Ref } from 'vue';
+import type { FormProps, FormSchema } from '../types/form';
+import { computed, unref, watch } from 'vue';
+import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
+import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
+import { useDebounceFn } from '@vueuse/core';
+
+const BASIC_COL_LEN = 24;
+
+interface UseAdvancedContext {
+  advanceState: AdvanceState;
+  emit: EmitType;
+  getProps: ComputedRef<FormProps>;
+  getSchema: ComputedRef<FormSchema[]>;
+  formModel: Recordable;
+  defaultValueRef: Ref<Recordable>;
+}
+
+export default function ({ advanceState, emit, getProps, getSchema, formModel, defaultValueRef }: UseAdvancedContext) {
+  const { realWidthRef, screenEnum, screenRef } = useBreakpoint();
+
+  const getEmptySpan = computed((): number => {
+    if (!advanceState.isAdvanced) {
+      return 0;
+    }
+    // For some special cases, you need to manually specify additional blank lines
+    const emptySpan = unref(getProps).emptySpan || 0;
+
+    if (isNumber(emptySpan)) {
+      return emptySpan;
+    }
+    if (isObject(emptySpan)) {
+      const { span = 0 } = emptySpan;
+      const screen = unref(screenRef) as string;
+
+      const screenSpan = (emptySpan as any)[screen.toLowerCase()];
+      return screenSpan || span || 0;
+    }
+    return 0;
+  });
+
+  const debounceUpdateAdvanced = useDebounceFn(updateAdvanced, 30);
+
+  watch(
+    [() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
+    () => {
+      const { showAdvancedButton } = unref(getProps);
+      if (showAdvancedButton) {
+        debounceUpdateAdvanced();
+      }
+    },
+    { immediate: true }
+  );
+
+  function getAdvanced(itemCol: Partial<ColEx>, itemColSum = 0, isLastAction = false, index = 0) {
+    const width = unref(realWidthRef);
+
+    const mdWidth =
+      parseInt(itemCol.md as string) || parseInt(itemCol.xs as string) || parseInt(itemCol.sm as string) || (itemCol.span as number) || BASIC_COL_LEN;
+
+    const lgWidth = parseInt(itemCol.lg as string) || mdWidth;
+    const xlWidth = parseInt(itemCol.xl as string) || lgWidth;
+    const xxlWidth = parseInt(itemCol.xxl as string) || xlWidth;
+    if (width <= screenEnum.LG) {
+      itemColSum += mdWidth;
+    } else if (width < screenEnum.XL) {
+      itemColSum += lgWidth;
+    } else if (width < screenEnum.XXL) {
+      itemColSum += xlWidth;
+    } else {
+      itemColSum += xxlWidth;
+    }
+
+    let autoAdvancedCol = unref(getProps).autoAdvancedCol ?? 3;
+
+    if (isLastAction) {
+      advanceState.hideAdvanceBtn = unref(getSchema).length <= autoAdvancedCol;
+      // 代码逻辑说明: 注释掉该逻辑，使小于等于2行时，也显示展开收起按钮
+      /* if (itemColSum <= BASIC_COL_LEN * 2) {
+        // 小于等于2行时，不显示折叠和展开按钮
+        advanceState.hideAdvanceBtn = true;
+        advanceState.isAdvanced = true;
+      } else */
+      /*if (itemColSum > BASIC_COL_LEN * 2 && itemColSum <= BASIC_COL_LEN * (unref(getProps).autoAdvancedLine || 3)) {
+        advanceState.hideAdvanceBtn = false;
+
+        // 默认超过 3 行折叠
+      } else*/
+      if (!advanceState.isLoad) {
+        advanceState.isLoad = true;
+        advanceState.isAdvanced = !advanceState.isAdvanced;
+        // 代码逻辑说明: 如果总列数大于 autoAdvancedCol，就默认折叠
+        if (unref(getSchema).length > autoAdvancedCol) {
+          advanceState.hideAdvanceBtn = false;
+          advanceState.isAdvanced = false;
+        }
+      }
+      return { isAdvanced: advanceState.isAdvanced, itemColSum };
+    }
+    if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
+      return { isAdvanced: advanceState.isAdvanced, itemColSum };
+    } else if (!advanceState.isAdvanced && index + 1 > autoAdvancedCol) {
+      // 如果当前是收起状态，并且当前列下标 > autoAdvancedCol，就隐藏
+      return { isAdvanced: false, itemColSum };
+    } else {
+      // The first line is always displayed
+      return { isAdvanced: true, itemColSum };
+    }
+  }
+
+  function updateAdvanced() {
+    let itemColSum = 0;
+    let realItemColSum = 0;
+    const { baseColProps = {} } = unref(getProps);
+
+    const schemas = unref(getSchema);
+    for (let i = 0; i < schemas.length; i++) {
+      const schema = schemas[i];
+      const { show, colProps } = schema;
+      let isShow = true;
+
+      if (isBoolean(show)) {
+        isShow = show;
+      }
+
+      if (isFunction(show)) {
+        isShow = show({
+          schema: schema,
+          model: formModel,
+          field: schema.field,
+          values: {
+            ...unref(defaultValueRef),
+            ...formModel,
+          },
+        });
+      }
+
+      if (isShow && (colProps || baseColProps)) {
+        const { itemColSum: sum, isAdvanced } = getAdvanced({ ...baseColProps, ...colProps }, itemColSum, false, i);
+
+        itemColSum = sum || 0;
+        if (isAdvanced) {
+          realItemColSum = itemColSum;
+        }
+        schema.isAdvanced = isAdvanced;
+      }
+    }
+
+    advanceState.actionSpan = (realItemColSum % BASIC_COL_LEN) + unref(getEmptySpan);
+
+    getAdvanced(unref(getProps).actionColOptions || { span: BASIC_COL_LEN }, itemColSum, true);
+
+    emit('advanced-change');
+  }
+
+  function handleToggleAdvanced() {
+    advanceState.isAdvanced = !advanceState.isAdvanced;
+  }
+
+  return { handleToggleAdvanced };
+}
diff --git a/src/components/Form/src/hooks/useAutoFocus.ts b/src/components/Form/src/hooks/useAutoFocus.ts
new file mode 100644
index 0000000..85dcc2f
--- /dev/null
+++ b/src/components/Form/src/hooks/useAutoFocus.ts
@@ -0,0 +1,35 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FormSchema, FormActionType, FormProps } from '../types/form';
+
+import { unref, nextTick, watchEffect } from 'vue';
+
+interface UseAutoFocusContext {
+  getSchema: ComputedRef<FormSchema[]>;
+  getProps: ComputedRef<FormProps>;
+  isInitedDefault: Ref<boolean>;
+  formElRef: Ref<FormActionType>;
+}
+export async function useAutoFocus({ getSchema, getProps, formElRef, isInitedDefault }: UseAutoFocusContext) {
+  watchEffect(async () => {
+    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) {
+      return;
+    }
+    await nextTick();
+    const schemas = unref(getSchema);
+    const formEl = unref(formElRef);
+    const el = (formEl as any)?.$el as HTMLElement;
+    if (!formEl || !el || !schemas || schemas.length === 0) {
+      return;
+    }
+
+    const firstItem = schemas[0];
+    // Only open when the first form item is input type
+    if (!firstItem.component.includes('Input')) {
+      return;
+    }
+
+    const inputEl = el.querySelector('.ant-row:first-child input') as Nullable<HTMLInputElement>;
+    if (!inputEl) return;
+    inputEl?.focus();
+  });
+}
diff --git a/src/components/Form/src/hooks/useComponentRegister.ts b/src/components/Form/src/hooks/useComponentRegister.ts
new file mode 100644
index 0000000..218aaa9
--- /dev/null
+++ b/src/components/Form/src/hooks/useComponentRegister.ts
@@ -0,0 +1,11 @@
+import type { ComponentType } from '../types/index';
+import { tryOnUnmounted } from '@vueuse/core';
+import { add, del } from '../componentMap';
+import type { Component } from 'vue';
+
+export function useComponentRegister(compName: ComponentType, comp: Component) {
+  add(compName, comp);
+  tryOnUnmounted(() => {
+    del(compName);
+  });
+}
diff --git a/src/components/Form/src/hooks/useForm.ts b/src/components/Form/src/hooks/useForm.ts
new file mode 100644
index 0000000..a260be8
--- /dev/null
+++ b/src/components/Form/src/hooks/useForm.ts
@@ -0,0 +1,148 @@
+import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
+import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
+import type { DynamicProps } from '/#/utils';
+import { handleRangeValue } from '../utils/formUtils';
+import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
+import { getDynamicProps, getValueType, getValueTypeBySchema } from '/@/utils';
+export declare type ValidateFields = (nameList?: NamePath[], options?: ValidateOptions) => Promise<Recordable>;
+
+type Props = Partial<DynamicProps<FormProps>>;
+
+export function useForm(props?: Props): UseFormReturnType {
+  const formRef = ref<Nullable<FormActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+
+  async function getForm() {
+    const form = unref(formRef);
+    if (!form) {
+      error('The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!');
+    }
+    await nextTick();
+    return form as FormActionType;
+  }
+
+  function register(instance: FormActionType) {
+    isProdMode() &&
+      onUnmounted(() => {
+        formRef.value = null;
+        loadedRef.value = null;
+      });
+    if (unref(loadedRef) && isProdMode() && instance === unref(formRef)) return;
+
+    formRef.value = instance;
+    loadedRef.value = true;
+
+    watch(
+      () => props,
+      () => {
+        props && instance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  const methods: FormActionType = {
+    scrollToField: async (name: NamePath, options?: ScrollOptions | undefined) => {
+      const form = await getForm();
+      form.scrollToField(name, options);
+    },
+    setProps: async (formProps: Partial<FormProps>) => {
+      const form = await getForm();
+      form.setProps(formProps);
+    },
+
+    updateSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => {
+      const form = await getForm();
+      form.updateSchema(data);
+    },
+
+    resetSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => {
+      const form = await getForm();
+      form.resetSchema(data);
+    },
+
+    clearValidate: async (name?: string | string[]) => {
+      const form = await getForm();
+      form.clearValidate(name);
+    },
+
+    resetFields: async () => {
+      getForm().then(async (form) => {
+        await form.resetFields();
+      });
+    },
+
+    removeSchemaByFiled: async (field: string | string[]) => {
+      unref(formRef)?.removeSchemaByFiled(field);
+    },
+
+    // TODO promisify
+    getFieldsValue: <T>() => {
+      // 代码逻辑说明: VUEN-1341【流程】编码方式 流程节点编辑表单时，填写数据报错 包括用户组件、部门组件、省市区
+      let values = unref(formRef)?.getFieldsValue() as T;
+      if(values){
+        Object.keys(values).map(key=>{
+          if (values[key] instanceof Array) {
+            // 代码逻辑说明: 【issues/4330】判断如果是对象数组，则不拼接
+            let isObject = typeof (values[key][0] || '') === 'object';
+            if (!isObject) {
+              values[key] = values[key].join(',');
+            }
+          }
+        });
+      }
+      return values;
+    },
+
+    setFieldsValue: async <T>(values: T) => {
+      const form = await getForm();
+      form.setFieldsValue<T>(values);
+    },
+
+    appendSchemaByField: async (schema: FormSchema, prefixField: string | undefined, first: boolean) => {
+      const form = await getForm();
+      form.appendSchemaByField(schema, prefixField, first);
+    },
+
+    submit: async (): Promise<any> => {
+      const form = await getForm();
+      return form.submit();
+    },
+
+    /**
+     * 表单验证并返回表单值
+     * @update:添加表单值转换逻辑
+     * @updateBy:zyf
+     * @updateDate:2021-09-02
+     */
+    validate: async (nameList?: NamePath[]): Promise<Recordable> => {
+      const form = await getForm();
+      let getProps = props || form.getProps;
+      let values = form.validate(nameList).then((values) => {
+        for (let key in values) {
+          if (values[key] instanceof Array) {
+            let valueType = getValueTypeBySchema(form.getSchemaByField(key)!, form);
+            if (valueType === 'string') {
+              values[key] = values[key].join(',');
+            }
+          }
+        }
+        //--@updateBy-begin----author:liusq---date:20210916------for:处理区域事件字典信息------
+        return handleRangeValue(getProps, values);
+        //--@updateBy-end----author:liusq---date:20210916------for:处理区域事件字典信息------
+      });
+      return values;
+    },
+    validateFields: async (nameList?: NamePath[], options?: ValidateOptions): Promise<Recordable> => {
+      const form = await getForm();
+      return form.validateFields(nameList, options);
+    },
+  };
+
+  return [register, methods];
+}
diff --git a/src/components/Form/src/hooks/useFormContext.ts b/src/components/Form/src/hooks/useFormContext.ts
new file mode 100644
index 0000000..01dfadd
--- /dev/null
+++ b/src/components/Form/src/hooks/useFormContext.ts
@@ -0,0 +1,17 @@
+import type { InjectionKey } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface FormContextProps {
+  resetAction: () => Promise<void>;
+  submitAction: () => Promise<void>;
+}
+
+const key: InjectionKey<FormContextProps> = Symbol();
+
+export function createFormContext(context: FormContextProps) {
+  return createContext<FormContextProps>(context, key);
+}
+
+export function useFormContext() {
+  return useContext<FormContextProps>(key);
+}
diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts
new file mode 100644
index 0000000..77086a3
--- /dev/null
+++ b/src/components/Form/src/hooks/useFormEvents.ts
@@ -0,0 +1,319 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FormProps, FormSchema, FormActionType } from '../types/form';
+import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
+import { unref, toRaw } from 'vue';
+import { isArray, isFunction, isObject, isString } from '/@/utils/is';
+import { deepMerge, getValueType } from '/@/utils';
+import { dateItemType, handleInputNumberValue, handleInputStringValue } from '../helper';
+import { dateUtil } from '/@/utils/dateUtil';
+import { cloneDeep, uniqBy } from 'lodash-es';
+import { error } from '/@/utils/log';
+
+interface UseFormActionContext {
+  emit: EmitType;
+  getProps: ComputedRef<FormProps>;
+  getSchema: ComputedRef<FormSchema[]>;
+  formModel: Recordable;
+  defaultValueRef: Ref<Recordable>;
+  formElRef: Ref<FormActionType>;
+  schemaRef: Ref<FormSchema[]>;
+  handleFormValues: Fn;
+}
+
+function mergeComponentProps(srcProps: any, targetProps: any) {
+  if (targetProps == undefined) return srcProps;
+  if (srcProps == undefined) return targetProps;
+  if (isObject(srcProps) && isObject(targetProps)) {
+    return deepMerge(cloneDeep(srcProps), targetProps);
+  }
+  if (isFunction(srcProps) && isObject(targetProps)) {
+    return (ctx: any) => ({ ...(srcProps(ctx) ?? {}), ...targetProps });
+  }
+  if (isObject(srcProps) && isFunction(targetProps)) {
+    return (ctx: any) => ({ ...srcProps, ...(targetProps(ctx) ?? {}) });
+  }
+  if (isFunction(srcProps) && isFunction(targetProps)) {
+    return (ctx: any) => ({ ...(srcProps(ctx) ?? {}), ...(targetProps(ctx) ?? {}) });
+  }
+  return targetProps;
+}
+
+export function useFormEvents({
+  emit,
+  getProps,
+  formModel,
+  getSchema,
+  defaultValueRef,
+  formElRef,
+  schemaRef,
+  handleFormValues,
+}: UseFormActionContext) {
+  async function resetFields(): Promise<void> {
+    const { resetFunc, submitOnReset } = unref(getProps);
+    resetFunc && isFunction(resetFunc) && (await resetFunc());
+
+    const formEl = unref(formElRef);
+    if (!formEl) return;
+
+    Object.keys(formModel).forEach((key) => {
+      formModel[key] = defaultValueRef.value[key];
+    });
+    clearValidate();
+    emit('reset', toRaw(formModel));
+    submitOnReset && handleSubmit();
+  }
+
+  /**
+   * @description: Set form value
+   */
+  async function setFieldsValue(values: Recordable): Promise<void> {
+    const fields = unref(getSchema)
+      .map((item) => item.field)
+      .filter(Boolean);
+
+    const validKeys: string[] = [];
+    Object.keys(values).forEach((key) => {
+      const schema = unref(getSchema).find((item) => item.field === key);
+      let value = values[key];
+
+      //antd3升级后，online表单时间控件选中值报js错 TypeError: Reflect.has called on non-object
+      if(!(values instanceof Object)){
+        return;
+      }
+      
+      const hasKey = Reflect.has(values, key);
+
+      value = handleInputNumberValue(schema?.component, value);
+      // 代码逻辑说明: 【QQYUN-7535】popup回填字段inputNumber组件验证错误
+      value = handleInputStringValue(schema?.component, value);
+      // 0| '' is allow
+      if (hasKey && fields.includes(key)) {
+        // time type
+        if (itemIsDateType(key)) {
+          if (Array.isArray(value)) {
+            const arr: any[] = [];
+            for (const ele of value) {
+              arr.push(ele ? dateUtil(ele) : null);
+            }
+            formModel[key] = arr;
+          } else {
+            const { componentProps } = schema || {};
+            let _props = componentProps as any;
+            if (typeof componentProps === 'function') {
+              _props = _props({ formModel });
+            }
+            formModel[key] = value ? (_props?.valueFormat ? value : dateUtil(value)) : null;
+          }
+        } else {
+          formModel[key] = value;
+        }
+        validKeys.push(key);
+      }
+    });
+    validateFields(validKeys).catch((_) => {});
+  }
+
+  /**
+   *  根据字段名获取schema
+   * @param field
+   */
+  function getSchemaByField(field: string): Nullable<FormSchema> {
+    if (!isString(field)) {
+      return null
+    }
+    const schemaList: FormSchema[] = unref(getSchema);
+    const index = schemaList.findIndex((schema) => schema.field === field);
+    if (index !== -1) {
+      return cloneDeep(schemaList[index]);
+    }
+    return null
+  }
+
+  /**
+   * @description: Delete based on field name
+   */
+  async function removeSchemaByFiled(fields: string | string[]): Promise<void> {
+    const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
+    if (!fields) {
+      return;
+    }
+
+    let fieldList: string[] = isString(fields) ? [fields] : fields;
+    if (isString(fields)) {
+      fieldList = [fields];
+    }
+    for (const field of fieldList) {
+      _removeSchemaByFiled(field, schemaList);
+    }
+    schemaRef.value = schemaList;
+  }
+
+  /**
+   * @description: Delete based on field name
+   */
+  function _removeSchemaByFiled(field: string, schemaList: FormSchema[]): void {
+    if (isString(field)) {
+      const index = schemaList.findIndex((schema) => schema.field === field);
+      if (index !== -1) {
+        delete formModel[field];
+        schemaList.splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * @description: Insert after a certain field, if not insert the last
+   */
+  async function appendSchemaByField(schema: FormSchema, prefixField?: string, first = false) {
+    const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
+
+    const index = schemaList.findIndex((schema) => schema.field === prefixField);
+    const hasInList = schemaList.some((item) => item.field === prefixField || schema.field);
+
+    if (!hasInList) return;
+
+    if (!prefixField || index === -1 || first) {
+      first ? schemaList.unshift(schema) : schemaList.push(schema);
+      schemaRef.value = schemaList;
+      return;
+    }
+    if (index !== -1) {
+      schemaList.splice(index + 1, 0, schema);
+    }
+    schemaRef.value = schemaList;
+  }
+
+  async function resetSchema(data: Partial<FormSchema> | Partial<FormSchema>[]) {
+    let updateData: Partial<FormSchema>[] = [];
+    if (isObject(data)) {
+      updateData.push(data as FormSchema);
+    }
+    if (isArray(data)) {
+      updateData = [...data];
+    }
+
+    const hasField = updateData.every((item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field));
+
+    if (!hasField) {
+      error('All children of the form Schema array that need to be updated must contain the `field` field');
+      return;
+    }
+    schemaRef.value = updateData as FormSchema[];
+  }
+
+  async function updateSchema(data: Partial<FormSchema> | Partial<FormSchema>[]) {
+    let updateData: Partial<FormSchema>[] = [];
+    if (isObject(data)) {
+      updateData.push(data as FormSchema);
+    }
+    if (isArray(data)) {
+      updateData = [...data];
+    }
+
+    const hasField = updateData.every((item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field));
+
+    if (!hasField) {
+      error('All children of the form Schema array that need to be updated must contain the `field` field');
+      return;
+    }
+    const schema: FormSchema[] = [];
+    updateData.forEach((item) => {
+      unref(getSchema).forEach((val) => {
+        if (val.field === item.field) {
+          // update-begin-author:liaozhiyang date:2026-05-12 for:【issue/9612】updateSchema中的函数执行两次
+          const { componentProps: itemCp, ...restItem } = item as any;
+          const newSchema = deepMerge(val, restItem);
+          if (Reflect.has(item, 'componentProps')) {
+            //【issues/7940】componentProps写成函数形式时，updateSchema写成对象时，参数没合并
+            newSchema.componentProps = mergeComponentProps(val.componentProps, itemCp);
+          }
+          // update-end-author:liaozhiyang date:2026-05-12 for:【issue/9612】updateSchema中的函数执行两次
+          schema.push(newSchema as FormSchema);
+        } else {
+          schema.push(val);
+        }
+      });
+    });
+    schemaRef.value = uniqBy(schema, 'field');
+  }
+
+  function getFieldsValue(): Recordable {
+    const formEl = unref(formElRef);
+    if (!formEl) return {};
+    return handleFormValues(toRaw(unref(formModel)));
+  }
+
+  /**
+   * @description: Is it time
+   */
+  function itemIsDateType(key: string) {
+    return unref(getSchema).some((item) => {
+      return item.field === key ? dateItemType.includes(item.component) : false;
+    });
+  }
+
+  async function validateFields(nameList?: NamePath[] | undefined, options?: ValidateOptions) {
+    return unref(formElRef)?.validateFields(nameList, options);
+  }
+
+  async function validate(nameList?: NamePath[] | undefined) {
+    return await unref(formElRef)?.validate(nameList);
+  }
+
+  async function clearValidate(name?: string | string[]) {
+    await unref(formElRef)?.clearValidate(name);
+  }
+
+  async function scrollToField(name: NamePath, options?: ScrollOptions | undefined) {
+    await unref(formElRef)?.scrollToField(name, options);
+  }
+
+  /**
+   * @description: Form submission
+   */
+  async function handleSubmit(e?: Event): Promise<void> {
+    e && e.preventDefault();
+    const { submitFunc } = unref(getProps);
+    if (submitFunc && isFunction(submitFunc)) {
+      await submitFunc();
+      return;
+    }
+    const formEl = unref(formElRef);
+    if (!formEl) return;
+    try {
+      const values = await validate();
+      //代码逻辑说明: 对查询表单提交的数组处理成字符串------
+      for (let key in values) {
+        if (values[key] instanceof Array) {
+          let valueType = getValueType(getProps, key);
+          if (valueType === 'string') {
+            values[key] = values[key].join(',');
+          }
+        }
+      }
+      const res = handleFormValues(values);
+      emit('submit', res);
+    } catch (error) {
+      // 代码逻辑说明: 列表查询表单会触发校验错误导致重置失败，原因不明
+      emit('submit', {});
+      console.error('query form validate error, please ignore!', error)
+      //throw new Error(error);
+    }
+  }
+
+  return {
+    handleSubmit,
+    clearValidate,
+    validate,
+    validateFields,
+    getFieldsValue,
+    updateSchema,
+    resetSchema,
+    getSchemaByField,
+    appendSchemaByField,
+    removeSchemaByFiled,
+    resetFields,
+    setFieldsValue,
+    scrollToField,
+  };
+}
diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts
new file mode 100644
index 0000000..db63c8d
--- /dev/null
+++ b/src/components/Form/src/hooks/useFormValues.ts
@@ -0,0 +1,59 @@
+import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
+import { unref } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
+import type { FormProps, FormSchema } from '../types/form';
+import dayjs from "dayjs";
+import { set } from 'lodash-es';
+import { handleRangeValue } from '/@/components/Form/src/utils/formUtils';
+
+interface UseFormValuesContext {
+  defaultValueRef: Ref<any>;
+  getSchema: ComputedRef<FormSchema[]>;
+  getProps: ComputedRef<FormProps>;
+  formModel: Recordable;
+}
+export function useFormValues({ defaultValueRef, getSchema, formModel, getProps }: UseFormValuesContext) {
+  // Processing form values
+  function handleFormValues(values: Recordable) {
+    if (!isObject(values)) {
+      return {};
+    }
+    const res: Recordable = {};
+    for (const item of Object.entries(values)) {
+      let [, value] = item;
+      const [key] = item;
+      if (!key || (isArray(value) && value.length === 0) || isFunction(value)) {
+        continue;
+      }
+      const transformDateFunc = unref(getProps).transformDateFunc;
+      if (isObject(value)) {
+        value = transformDateFunc?.(value);
+      }
+      // 判断是否是dayjs实例
+      if (isArray(value) && dayjs.isDayjs(value[0]) && dayjs.isDayjs(value[1])) {
+        value = value.map((item) => transformDateFunc?.(item));
+      }
+      // Remove spaces
+      if (isString(value)) {
+        value = value.trim();
+      }
+      set(res, key, value);
+    }
+    return handleRangeValue(getProps, res);
+  }
+
+  function initDefault() {
+    const schemas = unref(getSchema);
+    const obj: Recordable = {};
+    schemas.forEach((item) => {
+      const { defaultValue } = item;
+      if (!isNullOrUnDef(defaultValue)) {
+        obj[item.field] = defaultValue;
+        formModel[item.field] = defaultValue;
+      }
+    });
+    defaultValueRef.value = obj;
+  }
+
+  return { handleFormValues, initDefault };
+}
diff --git a/src/components/Form/src/hooks/useLabelWidth.ts b/src/components/Form/src/hooks/useLabelWidth.ts
new file mode 100644
index 0000000..b932cf7
--- /dev/null
+++ b/src/components/Form/src/hooks/useLabelWidth.ts
@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+import type { FormProps, FormSchema } from '../types/form';
+
+import { computed, unref } from 'vue';
+import { isNumber } from '/@/utils/is';
+
+export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
+  return computed(() => {
+    const schemaItem = unref(schemaItemRef);
+    const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {};
+    const { labelWidth, disabledLabelWidth } = schemaItem;
+
+    const { labelWidth: globalLabelWidth, labelCol: globalLabelCol, wrapperCol: globWrapperCol,layout } = unref(propsRef);
+
+    // 代码逻辑说明: 禁用全局 labelWidth，不自动设置 textAlign --------
+    if (disabledLabelWidth) {
+      return { labelCol, wrapperCol };
+    }
+
+    // If labelWidth is set globally, all items setting
+    if (!globalLabelWidth && !labelWidth && !globalLabelCol) {
+      labelCol.style = {
+        textAlign: 'left',
+      };
+      return { labelCol, wrapperCol };
+    }
+    let width = labelWidth || globalLabelWidth;
+    let col = { ...globalLabelCol, ...labelCol };
+    const wrapCol = { ...globWrapperCol, ...wrapperCol };
+
+    if (width) {
+      width = isNumber(width) ? `${width}px` : width;
+      // 代码逻辑说明: 【issues/6865】配置单个的labelWidth不生效
+      col = {};
+    }
+
+    return {
+      labelCol: { style: { width: width ? width : '100%' }, ...col },
+      wrapperCol: {
+        style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` },
+        ...wrapCol,
+      },
+    };
+  });
+}
diff --git a/src/components/Form/src/jeecg/components/JAddInput.vue b/src/components/Form/src/jeecg/components/JAddInput.vue
new file mode 100644
index 0000000..2b215ff
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JAddInput.vue
@@ -0,0 +1,121 @@
+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <a-input placeholder="请输入参数key" v-model:value="param.label" style="width: 30%; margin-bottom: 5px" @input="emitChange" />
+    <a-input placeholder="请输入参数value" v-model:value="param.value" style="width: 30%; margin: 0 0 5px 5px" @input="emitChange" />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    ></MinusCircleOutlined>
+  </div>
+  <div>
+    <a-button type="dashed" style="width: 60%" @click="add">
+      <PlusOutlined />
+      新增
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, ref, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isEmpty } from '/@/utils/is';
+  import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+  interface Params {
+    label: string;
+    value: string;
+  }
+
+  export default defineComponent({
+    name: 'JAddInput',
+    props: {
+      value: propTypes.string.def(''),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(1),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+      //新增Input
+      const add = () => {
+        dynamicInput.params.push({
+          label: '',
+          value: '',
+        });
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        console.log('props.value', props.value);
+        dynamicInput.params = [];
+        if (props.value && props.value.indexOf('{') == 0) {
+          let jsonObj = JSON.parse(props.value);
+          Object.keys(jsonObj).forEach((key) => {
+            dynamicInput.params.push({ label: key, value: jsonObj[key] });
+          });
+        }
+      }
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj = {};
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item) => {
+            obj[item['label']] = item['value'];
+          });
+        }
+        emit('change', isEmpty(obj) ? '' : JSON.stringify(obj));
+        emit('update:value', isEmpty(obj) ? '' : JSON.stringify(obj));
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        add,
+      };
+    },
+    components: {
+      MinusCircleOutlined,
+      PlusOutlined,
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JAreaLinkage.vue b/src/components/Form/src/jeecg/components/JAreaLinkage.vue
new file mode 100644
index 0000000..734308e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JAreaLinkage.vue
@@ -0,0 +1,194 @@
+<template>
+  <JCascader v-bind="attrs" :value="cascaderValue" :showLastLevelOnly="showLastLevelOnly" :options="getOptions" @change="handleChange" />
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watchEffect, computed } from 'vue';
+  import JCascader from './JCascader.vue';
+  import { Cascader } from 'ant-design-vue';
+  import { provinceAndCityData, regionData, provinceOptions } from '../../utils/areaDataUtil';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { isArray } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JAreaLinkage',
+    components: {
+      JCascader,
+      Cascader,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.object, propTypes.array, propTypes.string]),
+      // 显示层级：province 只显示省，city 显示省市，region 显示省市县（优先于 showArea）
+      displayLevel: propTypes.oneOf(['province', 'city', 'region', 'all']),
+      //是否显示区县
+      showArea: propTypes.bool.def(true),
+      // 存储数据 （all时：传递到外面的是数组；province, city, region传递外面的是字符串）
+      saveCode: propTypes.oneOf(['province', 'city', 'region', 'all']).def('all'),
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit }) {
+      // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+      const showLastLevelOnly = computed(() => {
+        return props.displayLevel === 'province' || props.displayLevel === 'city' || props.displayLevel === 'region';
+      });
+      // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+      const attrs = useAttrs();
+      // const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      const cascaderValue = ref<(string | number)[]>([]);
+      const getOptions = computed(() => {
+        // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+        if (props.displayLevel) {
+          if (props.displayLevel === 'all') {
+            return regionData;
+          } else if (props.displayLevel === 'province') {
+            return provinceOptions;
+          } else if (props.displayLevel === 'city') {
+            return provinceAndCityData;
+          } else if (props.displayLevel === 'region') {
+            return regionData;
+          }
+        } else {
+          if (props.showArea) {
+            return regionData;
+          } else {
+            return provinceAndCityData;
+          }
+        }
+        // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+      });
+      /**
+       * 监听value变化
+       */
+      watchEffect(() => {
+        // 代码逻辑说明: 【TV360X-1223】省市区换新组件
+        if (props.value) {
+          initValue();
+        } else {
+          cascaderValue.value = [];
+        }
+      });
+
+      /**
+       * 老数据可能是区县码（如 120101），displayLevel 为 province 时需显示对应省，
+       */
+      function buildDisplayPathFromCode(code, displayLevel) {
+        if (!code && code !== 0) return [];
+        const str = String(code).trim();
+        if (!str) return [];
+        const provinceCode = str.length >= 2 ? str.substring(0, 2) + '0000' : str;
+        const cityCode = str.length >= 4 ? str.substring(0, 4) + '00' : null;
+        const regionCode = str.length >= 6 ? str : null;
+        const fullPath = [provinceCode];
+        if (cityCode && cityCode !== provinceCode) fullPath.push(cityCode);
+        if (regionCode && regionCode !== cityCode) fullPath.push(regionCode);
+        if (displayLevel === 'province') return fullPath.slice(0, 1);
+        if (displayLevel === 'city') return fullPath.slice(0, 2);
+        return fullPath;
+      }
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        // 代码逻辑说明: 【TV360X-501】省市区换新组件
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          const arr = value.split(',');
+          if (props.displayLevel) {
+            // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+            const code = arr[0];
+            cascaderValue.value = buildDisplayPathFromCode(code, props.displayLevel);
+            // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+          } else {
+            cascaderValue.value = transform(arr);
+          }
+        } else if (isArray(value)) {
+          if (value.length) {
+            if (props.displayLevel) {
+              // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+              // 老数据 saveCode 为 all 时存的是完整路径数组 [省,市,区]，直接按 displayLevel 截断
+              if (value.length >= 2) {
+                const len = props.displayLevel === 'province' ? 1 : props.displayLevel === 'city' ? 2 : Math.min(3, value.length);
+                cascaderValue.value = value.slice(0, len);
+              } else {
+                const code = value[0];
+                cascaderValue.value = buildDisplayPathFromCode(code, props.displayLevel);
+              }
+              // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+            } else {
+              cascaderValue.value = transform(value);
+            }
+          } else {
+            cascaderValue.value = [];
+          }
+        }
+      }
+      function transform(arr) {
+        let result: any = [];
+        if (props.saveCode === 'region') {
+          const regionCode = arr[0];
+          result = [`${regionCode.substring(0, 2)}0000`, `${regionCode.substring(0, 2)}${regionCode.substring(2, 4)}00`, regionCode];
+        } else if (props.saveCode === 'city') {
+          const cityCode = arr[0];
+          result = [`${cityCode.substring(0, 2)}0000`, cityCode];
+        } else if (props.saveCode === 'province') {
+          const provinceCode = arr[0];
+          result = [provinceCode];
+        } else {
+          result = arr;
+        }
+        return result;
+      }
+      /**
+       * liaozhiyang
+       * 2024-06-17
+       * 【TV360X-1224】省市区组件默认传到外面的值是字符串逗号分隔
+       * */
+      const send = (data) => {
+        let result = data;
+        if (result) {
+          if (props.saveCode === 'all') {
+            // 传递的是数组
+          } else {
+            // 传递的是字符串
+            result = data.join(',');
+          }
+        }
+        emit('change', result);
+        emit('update:value', result);
+      };
+
+      function handleChange(arr) {
+        // 代码逻辑说明: 【TV360X-501】省市区换新组件
+        if (arr?.length) {
+          let result: any = [];
+          if (props.saveCode === 'region') {
+            // 可能只有两位（选择香港时，只有省区）
+            result = [arr[arr.length - 1]];
+          } else if (props.saveCode === 'city') {
+            result = [arr[1]];
+          } else if (props.saveCode === 'province') {
+            result = [arr[0]];
+          } else {
+            result = arr;
+          }
+          send(result);
+        } else {
+          send(arr);
+        }
+        // emitData.value = args;
+        // 上面改的v-model:value导致选中数据没有显示
+        // state.value = result;
+      }
+      
+      return {
+        cascaderValue,
+        attrs,
+        regionData,
+        getOptions,
+        handleChange,
+        showLastLevelOnly,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JAreaSelect.vue b/src/components/Form/src/jeecg/components/JAreaSelect.vue
new file mode 100644
index 0000000..f57205b
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JAreaSelect.vue
@@ -0,0 +1,168 @@
+<template>
+  <a-form-item-rest>
+    <div class="area-select">
+      <!--省份-->
+      <a-select v-model:value="province" @change="proChange" allowClear :disabled="disabled">
+        <template v-for="item in provinceOptions" :key="`${item.value}`">
+          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
+        </template>
+      </a-select>
+      <!--城市-->
+      <a-select v-if="level >= 2" v-model:value="city" @change="cityChange" :disabled="disabled">
+        <template v-for="item in cityOptions" :key="`${item.value}`">
+          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
+        </template>
+      </a-select>
+      <!--地区-->
+      <a-select v-if="level >= 3" v-model:value="area" @change="areaChange" :disabled="disabled">
+        <template v-for="item in areaOptions" :key="`${item.value}`">
+          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
+        </template>
+      </a-select>
+    </div>
+  </a-form-item-rest>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, onUnmounted, toRefs } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { provinceOptions, getDataByCode, getRealCode } from '../../utils/areaDataUtil';
+
+  export default defineComponent({
+    name: 'JAreaSelect',
+    props: {
+      value: [Array, String],
+      province: [String],
+      city: [String],
+      area: [String],
+      level: propTypes.number.def(3),
+      disabled: propTypes.bool.def(false),
+      codeField: propTypes.string,
+      size: propTypes.string,
+      placeholder: propTypes.string,
+      formValues: propTypes.any,
+      allowClear: propTypes.bool.def(false),
+      getPopupContainer: {
+        type: Function,
+        default: (node) => node?.parentNode,
+      },
+    },
+    emits: ['change', 'update:value','update:area','update:city','update:province'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>([]);
+      //下拉框的选择值
+      const pca = reactive({
+        province: '',
+        city: '',
+        area: '',
+      });
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //城市下拉框的选项
+      const cityOptions = computed(() => {
+        return pca.province ? getDataByCode(pca.province) : [];
+      });
+      //地区下拉框的选项
+      const areaOptions = computed(() => {
+        return pca.city ? getDataByCode(pca.city) : [];
+      });
+      /**
+       * 监听props值
+       */
+      watchEffect(() => {
+        props && initValue();
+      });
+
+      /**
+       * 监听组件值变化
+       */
+      watch(pca, (newVal) => {
+        if (!props.value) {
+          emit('update:province', pca.province);
+          emit('update:city', pca.city);
+          emit('update:area', pca.area);
+        }
+      });
+      /**
+       * 数据初始化
+       */
+      function initValue() {
+        if (props.value) {
+          //传参是数组的情况下的处理
+          if (Array.isArray(props.value)) {
+            pca.province = props.value[0];
+            pca.city = props.value[1] ? props.value[1] : '';
+            pca.area = props.value[2] ? props.value[2] : '';
+          } else {
+            //传参是数值
+            let valueArr = getRealCode(props.value, props.level);
+            if (valueArr) {
+              pca.province = valueArr[0];
+              pca.city = props.level >= 2 && valueArr[1] ? valueArr[1] : '';
+              pca.area = props.level >= 3 && valueArr[2] ? valueArr[2] : '';
+            }
+          }
+        } else {
+          //绑定三个数据的情况
+          pca.province = props.province ? props.province : '';
+          pca.city = props.city ? props.city : '';
+          pca.area = props.area ? props.area : '';
+        }
+      }
+
+      /**
+       * 省份change事件
+       */
+      function proChange(val) {
+        pca.city = val && getDataByCode(val)[0]?.value;
+        pca.area = pca.city && getDataByCode(pca.city)[0]?.value;
+        state.value = props.level <= 1 ? val : props.level <= 2 ? pca.city : pca.area;
+        emit('update:value', unref(state));
+      }
+
+      /**
+       * 城市change事件
+       */
+      function cityChange(val) {
+        pca.area = val && getDataByCode(val)[0]?.value;
+        state.value = props.level <= 2 ? val : pca.area;
+        emit('update:value', unref(state));
+      }
+
+      /**
+       * 区域change事件
+       */
+      function areaChange(val) {
+        state.value = val;
+        emit('update:value', unref(state));
+      }
+
+      return {
+        ...toRefs(pca),
+        provinceOptions,
+        cityOptions,
+        areaOptions,
+        proChange,
+        cityChange,
+        areaChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .area-select {
+    width: 100%;
+
+    /* update-begin-author:taoyan date:2023-2-18 for: QQYUN-4292【online表单】高级查询 2.省市县样式问题 */
+   /* display: flex;*/
+
+    .ant-select {
+      width: calc(33.3% - 7px)
+    }
+    /* update-end-author:taoyan date:2023-2-18 for:  QQYUN-4292【online表单】高级查询 2.省市县样式问题 */
+
+    .ant-select:not(:first-child) {
+      margin-left: 10px;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JCascader.vue b/src/components/Form/src/jeecg/components/JCascader.vue
new file mode 100644
index 0000000..f6f83d3
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JCascader.vue
@@ -0,0 +1,368 @@
+<!--
+  级联选择器：只读输入框 + 挂载到 body 的下拉多列菜单
+  选中叶子节点时同步 value 并关闭下拉；非叶子节点仅展开下一列
+-->
+<template>
+  <div class="cascader" ref="rootRef">
+    <AInput :value="displayText" :placeholder="inputPlaceholder" readonly :disabled="inputDisabled" v-bind="attrs"
+      :class="{ 'cascader-input-open': visible }" @click="toggle">
+      <template #suffix>
+        <span v-if="displayText && !inputDisabled" class="ant-input-clear-icon ant-input-clear-icon-has-suffix"
+          role="button" tabindex="-1" @click.stop="handleClear" @mousedown.prevent>
+          <CloseCircleFilled />
+        </span>
+        <DownOutlined class="cascader-arrow" :class="{ 'is-open': visible }" />
+      </template>
+    </AInput>
+    <!-- 下拉挂载到 body，用 fixed + 计算出的 left/top 定位 -->
+    <Teleport to="body">
+      <Transition name="cascader-dropdown">
+        <div v-show="visible" ref="dropdownRef" class="cascader-dropdown cascader-dropdown-placement"
+          :style="dropdownPlaceStyle">
+          <div class="cascader-menus">
+            <div v-for="(column, colIndex) in columns" :key="colIndex" class="cascader-menu">
+              <div v-for="opt in column" :key="opt.value" class="cascader-menu-item"
+                :class="{ 'is-active': isActive(opt, colIndex), 'is-selected': isSelected(opt, colIndex) }"
+                @click="onSelectOption(opt, colIndex)">
+                <span class="cascader-menu-item-content">{{ opt.label }}</span>
+                <RightOutlined v-if="hasChildren(opt)" class="cascader-menu-item-arrow" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';
+import { Input as AInput } from 'ant-design-vue';
+import { DownOutlined, RightOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+
+/** 级联选项：value/label + 可选 children */
+export interface CascaderOption {
+  value: string | number;
+  label: string;
+  children?: CascaderOption[];
+}
+
+/** 选中路径：每级的 value 数组 */
+type PathValue = (string | number)[];
+
+const DISPLAY_SEPARATOR = ' / ';
+const DROPDOWN_GAP = 4;
+
+defineOptions({
+  name: 'JCascader',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    /** 当前选中路径（每级 value 数组） */
+    value?: PathValue;
+    /** 级联树数据 */
+    options?: CascaderOption[];
+    /** 是否只在 input 中显示最后一级 */
+    showLastLevelOnly?: boolean;
+  }>(),
+  {
+    value: () => [],
+    options: () => [],
+    showLastLevelOnly: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'change', value: PathValue): void;
+  (e: 'update:value', value: PathValue): void;
+}>();
+
+const attrs = useAttrs();
+const inputPlaceholder = computed(() => String((attrs as Record<string, unknown>).placeholder ?? '请选择'));
+const inputDisabled = computed(() => Boolean((attrs as Record<string, unknown>).disabled));
+const rootRef = ref<HTMLElement>();
+const dropdownRef = ref<HTMLElement>();
+/** 下拉是否展开 */
+const visible = ref(false);
+/** 展开时正在编辑的路径（未确认前）；用于多列菜单的当前高亮与子列数据 */
+const editingPath = ref<PathValue>([]);
+/** 下拉挂到 body 时的 fixed 定位：left、top（px 字符串） */
+const dropdownPlaceStyle = ref<{ left: string; top: string }>({ left: '0', top: '0' });
+
+/** 规范化 value 为路径数组 */
+function normalizePath(val: PathValue | undefined): PathValue {
+  return Array.isArray(val) ? val : [];
+}
+
+/** 是否有子节点（非叶子） */
+function hasChildren(opt: CascaderOption): boolean {
+  return !!(opt.children?.length);
+}
+
+/** 根据 value 路径在 options 树中逐级查找，返回对应的 label 数组 */
+function getPathLabels(opts: CascaderOption[], pathValues: PathValue): string[] {
+  const labels: string[] = [];
+  let current = opts;
+  for (const v of pathValues) {
+    const opt = current.find((o) => o.value === v);
+    if (!opt) break;
+    labels.push(opt.label);
+    current = opt.children ?? [];
+  }
+  return labels;
+}
+
+/** 输入框展示文案：showLastLevelOnly 时只显示最后一级 label，否则用分隔符拼接整条路径 */
+const displayText = computed(() => {
+  const path = normalizePath(props.value);
+  if (!path.length) return '';
+  const labels = getPathLabels(props.options ?? [], path);
+  return props.showLastLevelOnly ? (labels.at(-1) ?? '') : labels.join(DISPLAY_SEPARATOR);
+});
+
+/** 用于菜单高亮与列数据：展开时用 editingPath，收起时用 props.value */
+const pathForMenus = computed<PathValue>(() =>
+  visible.value ? editingPath.value : normalizePath(props.value));
+
+/** 根据当前 path 展开的列：第 0 列为根，第 k 列为 path[k-1] 的 children；列数 = path.length + 1，点击第几级只展示到下一级 */
+const columns = computed(() => {
+  const path = pathForMenus.value;
+  const opts = props.options ?? [];
+  const cols: CascaderOption[][] = [];
+  let current: CascaderOption[] = opts;
+  for (let i = 0; i <= path.length && current.length; i++) {
+    cols.push(current);
+    if (i < path.length && path[i] !== undefined) {
+      const opt = current.find((o) => o.value === path[i]);
+      current = opt?.children ?? [];
+    } else {
+      break;
+    }
+  }
+  return cols;
+});
+
+/** 当前列中该项是否为“当前路径”在该列的节点（高亮并展示子列） */
+function isActive(opt: CascaderOption, colIndex: number): boolean {
+  const path = pathForMenus.value;
+  return path[colIndex] === opt.value;
+}
+
+/** 当前列中该项是否为已选中的叶子节点（选中样式） */
+function isSelected(opt: CascaderOption, colIndex: number): boolean {
+  const path = pathForMenus.value;
+  if (colIndex < path.length - 1) return path[colIndex] === opt.value;
+  return path[colIndex] === opt.value && !hasChildren(opt);
+}
+
+/** 点击某一列选项：截断到该列并追加当前项；若为叶子则 emit 并关闭，否则更新 editingPath 展开下一列 */
+function onSelectOption(opt: CascaderOption, colIndex: number) {
+  const path = visible.value ? [...editingPath.value] : normalizePath(props.value).slice();
+  path.length = colIndex;
+  path.push(opt.value);
+  if (hasChildren(opt)) {
+    editingPath.value = path;
+  } else {
+    emit('change', path);
+    emit('update:value', path);
+    visible.value = false;
+  }
+}
+
+function toggle() {
+  if (inputDisabled.value) return;
+  visible.value = !visible.value;
+}
+
+/** 清除选中：与 UI 库 readonly 下不显示清除按钮的补偿，在 suffix 中手动实现 */
+function handleClear() {
+  emit('change', []);
+  emit('update:value', []);
+  visible.value = false;
+}
+
+/** 点击不在输入框、不在下拉内时关闭下拉（capture 阶段监听） */
+function handleClickOutside(e: MouseEvent) {
+  const target = e.target as Node;
+  if (!target || !document.body.contains(target)) return;
+  if (rootRef.value?.contains(target)) return;
+  if (dropdownRef.value?.contains(target)) return;
+  visible.value = false;
+}
+
+/** 根据触发器 rootRef 的视口位置，设置下拉的 fixed left/top（下拉在 body 下） */
+function updatePopupPosition() {
+  if (!rootRef.value) return;
+  const rect = rootRef.value.getBoundingClientRect();
+  dropdownPlaceStyle.value = {
+    left: `${rect.left}px`,
+    top: `${rect.bottom + DROPDOWN_GAP}px`,
+  };
+}
+
+/** 展开时：用当前 value 初始化 editingPath、计算定位、注册点击外部关闭；收起时移除监听 */
+watch(visible, (v) => {
+  if (v) {
+    editingPath.value = normalizePath(props.value).slice();
+    nextTick(() => {
+      updatePopupPosition();
+      setTimeout(() => document.addEventListener('click', handleClickOutside, true), 0);
+    });
+  } else {
+    document.removeEventListener('click', handleClickOutside, true);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside, true);
+});
+</script>
+
+<!-- 下拉挂 body 时用 .cascader-dropdown-placement 覆盖为 position: fixed -->
+<style scoped lang="less">
+@import (reference) '/@/design/config.less';
+
+.cascader {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+}
+
+.cascader .ant-input-affix-wrapper {
+  cursor: pointer;
+
+  .ant-input-clear-icon {
+    display: none;
+  }
+
+  &:hover {
+    .ant-input-clear-icon {
+      display: block;
+    }
+
+    .cascader-arrow {
+      opacity: 0;
+    }
+  }
+}
+
+.cascader-arrow {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.cascader-arrow.is-open {
+  transform: rotate(180deg);
+}
+
+:deep(.ant-input-suffix) {
+  position: relative;
+
+  .ant-input-clear-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    z-index: 1;
+  }
+}
+
+.cascader-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1050;
+  margin-top: 4px;
+  background: @component-background;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.cascader-dropdown-placement {
+  position: fixed;
+  margin-top: 0;
+}
+
+.cascader-menus {
+  display: flex;
+  min-height: 180px;
+}
+
+.cascader-menu {
+  padding: 5px;
+  min-width: 112px;
+  max-height: 180px;
+  overflow-y: auto;
+  background: @component-background;
+
+  &:not(:last-child) {
+    border-right: 1px solid @border-color-split;
+  }
+}
+
+.cascader-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.cascader-menu-item-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cascader-menu-item-arrow {
+  margin-left: 8px;
+  font-size: 10px;
+  color: @text-color-secondary;
+  flex-shrink: 0;
+}
+
+.cascader-menu-item:hover {
+  background: @item-hover-bg;
+}
+
+.cascader-menu-item.is-active .cascader-menu-item-arrow,
+.cascader-menu-item.is-selected .cascader-menu-item-arrow {
+  color: var(--j-global-primary-color);
+}
+
+.cascader-menu-item.is-active {
+  background: @primary-1;
+  color: var(--j-global-primary-color);
+}
+
+@supports (background: color-mix(in srgb, red, blue)) {
+  .cascader-menu-item.is-active {
+    background: color-mix(in srgb, var(--j-global-primary-color) 10%, #fff);
+  }
+}
+
+.cascader-menu-item.is-selected {
+  font-weight: 500;
+  color: var(--j-global-primary-color);
+}
+
+.cascader-dropdown-enter-active,
+.cascader-dropdown-leave-active {
+  transition: opacity 0.15s;
+}
+
+.cascader-dropdown-enter-from,
+.cascader-dropdown-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/Form/src/jeecg/components/JCategorySelect.vue b/src/components/Form/src/jeecg/components/JCategorySelect.vue
new file mode 100644
index 0000000..fbdfa07
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JCategorySelect.vue
@@ -0,0 +1,266 @@
+<!--下拉树-->
+<template>
+  <a-tree-select
+    allowClear
+    labelInValue
+    style="width: 100%"
+    :disabled="disabled"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    showCheckedStrategy="SHOW_ALL"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    :treeData="treeData"
+    :multiple="multiple"
+    @change="onChange"
+  >
+  </a-tree-select>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref, watch, nextTick } from 'vue';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { loadDictItem, loadTreeData } from '/@/api/common/api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage, createErrorModal } = useMessage();
+  export default defineComponent({
+    name: 'JCategorySelect',
+    components: {},
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      placeholder: {
+        type: String,
+        default: '请选择',
+        required: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      condition: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      // 是否支持多选
+      multiple: {
+        type: [Boolean, String],
+        default: false,
+      },
+      loadTriggleChange: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      pid: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      pcode: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      back: {
+        type: String,
+        default: '',
+        required: false,
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      console.info(props);
+      const emitData = ref<any[]>([]);
+      const treeData = ref<any[]>([]);
+      const treeValue = ref();
+      const attrs = useAttrs();
+      const [state, , , formItemContext] = useRuleFormItem(props, 'value', 'change', emitData);
+      watch(
+        () => props.value,
+        () => {
+          loadItemByCode();
+        },
+        // 代码逻辑说明: 【TV360X-480】封装表单和原生表单，默认值生成有问题的字段：分类字典树附默认值不生效---
+        { deep: true, immediate: true }
+      );
+      watch(
+        () => props.pcode,
+        () => {
+          loadRoot();
+        },
+        { deep: true, immediate: true }
+      );
+
+      function loadRoot() {
+        let param = {
+          pid: props.pid,
+          pcode: !props.pcode ? '0' : props.pcode,
+          condition: props.condition,
+        };
+        console.info(param);
+        loadTreeData(param).then((res) => {
+            if(res && res.length>0){
+                for (let i of res) {
+                    i.value = i.key;
+                    if (i.leaf == false) {
+                        i.isLeaf = false;
+                    } else if (i.leaf == true) {
+                        i.isLeaf = true;
+                    }
+                }
+                treeData.value = res;
+						}
+        });
+      }
+
+      function loadItemByCode() {
+        if (!props.value || props.value == '0') {
+          if(props.multiple){
+            treeValue.value = [];
+          }else{
+            treeValue.value = { value: null, label: null };
+          }
+        } else {
+          console.log("props.value:::",props.value)
+          loadDictItem({ ids: props.value }).then((res) => {
+            let values = props.value.split(',');
+            treeValue.value = res.map((item, index) => ({
+              key: values[index],
+              value: values[index],
+              label: item,
+            }));
+            if(!props.multiple){
+              treeValue.value = treeValue.value[0];
+            }
+            onLoadTriggleChange(res[0]);
+          });
+        }
+      }
+
+      function onLoadTriggleChange(text) {
+        //只有单选才会触发
+        if (!props.multiple && props.loadTriggleChange) {
+          backValue(props.value, text);
+        }
+      }
+
+      function backValue(value, label) {
+        let obj = {};
+        if (props.back) {
+          obj[props.back] = label;
+        }
+        emit('change', value, obj);
+        emit("update:value",value)
+      }
+
+      function asyncLoadTreeData(treeNode) {
+        let dataRef = treeNode.dataRef;
+        return new Promise<void>((resolve) => {
+          if (treeNode.children && treeNode.children.length > 0) {
+            resolve();
+            return;
+          }
+          let pid = dataRef.key;
+          let param = {
+            pid: pid,
+            condition: props.condition,
+          };
+          loadTreeData(param).then((res) => {
+            if (res) {
+              for (let i of res) {
+                i.value = i.key;
+                if (i.leaf == false) {
+                  i.isLeaf = false;
+                } else if (i.leaf == true) {
+                  i.isLeaf = true;
+                }
+              }
+              addChildren(pid, res, treeData.value);
+              resolve();
+            }
+          });
+        });
+      }
+
+      function addChildren(pid, children, treeArray) {
+        if (treeArray && treeArray.length > 0) {
+          for (let item of treeArray) {
+            if (item.key == pid) {
+              if (!children || children.length == 0) {
+                item.isLeaf = true;
+              } else {
+                item.children = children;
+              }
+              break;
+            } else {
+              addChildren(pid, children, item.children);
+            }
+          }
+        }
+      }
+
+      function onChange(value) {
+        if (!value) {
+          emit('change', '');
+          treeValue.value = '';
+          emit("update:value",'')
+        } else if (Array.isArray(value)) {
+          let labels = [];
+          let values = value.map((item) => {
+            labels.push(item.label);
+            return item.value;
+          });
+          backValue(values.join(','), labels.join(','));
+          treeValue.value = value;
+        } else {
+          backValue(value.value, value.label);
+          treeValue.value = value;
+        }
+        // 代码逻辑说明: 【QQYUN-9110】组件有值校验没消失
+        nextTick(() => {
+          formItemContext?.onFieldChange();
+        });
+      }
+
+      function getCurrTreeData() {
+        return treeData;
+      }
+
+      function validateProp() {
+        let mycondition = props.condition;
+        return new Promise((resolve, reject) => {
+          if (!mycondition) {
+            resolve();
+          } else {
+            try {
+              let test = JSON.parse(mycondition);
+              if (typeof test == 'object' && test) {
+                resolve();
+              } else {
+                createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
+                reject();
+              }
+            } catch (e) {
+              createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
+              reject();
+            }
+          }
+        });
+      }
+
+      return {
+        state,
+        attrs,
+        onChange,
+        treeData,
+        treeValue,
+        asyncLoadTreeData,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JCheckbox.vue b/src/components/Form/src/jeecg/components/JCheckbox.vue
new file mode 100644
index 0000000..536a20f
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JCheckbox.vue
@@ -0,0 +1,124 @@
+<template>
+  <a-checkbox-group v-bind="attrs" v-model:value="checkboxArray" :options="checkOptions" @change="handleChange">
+    <template #label="{label, value}">
+      <span :class="[useDicColor && getDicColor(value) ? 'colorText' : '']" :style="{ backgroundColor: `${getDicColor(value)}` }">{{ label }}</span>
+    </template>
+  </a-checkbox-group>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, watch, watchEffect, ref, unref } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import {getDictItems} from "@/api/common/api";
+
+  export default defineComponent({
+    name: 'JCheckbox',
+    props: {
+      value:propTypes.oneOfType([propTypes.string, propTypes.number]),
+      dictCode: propTypes.string,
+      useDicColor: propTypes.bool.def(false),
+      options: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const attrs = useAttrs();
+      //checkbox选项
+      const checkOptions = ref<any[]>([]);
+      //checkbox数值
+      const checkboxArray = ref<any[]>([]);
+      /**
+       * 监听value
+       */
+      watchEffect(() => {
+        // 代码逻辑说明: issues/I5E7YX AUTO在线表单进入功能测试之后一直卡在功能测试界面
+        let temp = props.value;
+        if(!temp && temp!==0){
+          checkboxArray.value = []
+        }else{
+          temp = temp + '';
+          checkboxArray.value = temp.split(',')
+        }
+        // 代码逻辑说明: 调用表单的 resetFields不会清空当前信息，界面显示上一次的数据
+        if (props.value === '' || props.value === undefined) {
+          checkboxArray.value = [];
+        }
+      });
+      /**
+       * 监听字典code
+       */
+      watchEffect(() => {
+        props && initOptions();
+      });
+
+      /**
+       * 初始化选项
+       */
+      async function initOptions() {
+        //根据options, 初始化选项
+        if (props.options && props.options.length > 0) {
+          checkOptions.value = props.options;
+          return;
+        }
+        //根据字典Code, 初始化选项
+        if (props.dictCode) {
+          loadDictOptions()
+        }
+      }
+
+      // 根据字典code查询字典项
+      function loadDictOptions() {
+        // 代码逻辑说明: 字典数据请求前将参数编码处理，但是不能直接编码，因为可能之前已经编码过了
+        let temp = props.dictCode || '';
+        if (temp.indexOf(',') > 0 && temp.indexOf(' ') > 0) {
+          // 编码后 是不包含空格的
+          temp = encodeURI(temp);
+        }
+        getDictItems(temp).then((res) => {
+          if (res) {
+            checkOptions.value = res.map((item) => ({value: item.value, label: item.text, color: item.color}));
+            //console.info('res', dictOptions.value);
+          } else {
+            console.error('getDictItems error: : ', res);
+            checkOptions.value = [];
+          }
+        });
+      }
+
+      /**
+       * change事件
+       * @param $event
+       */
+      function handleChange($event) {
+        emit('update:value', $event.join(','));
+        emit('change', $event.join(','));
+      }
+      const getDicColor = (value) => {
+        if (props.useDicColor) {
+          const findItem = checkOptions.value.find((item) => item.value == value);
+          if (findItem) {
+            return findItem.color;
+          }
+        }
+        return null;
+      };
+      return { checkboxArray, checkOptions, attrs, handleChange, getDicColor };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+  .colorText {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    border-radius: 8px;
+    background-color: red;
+    color: #fff;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JCodeEditor.vue b/src/components/Form/src/jeecg/components/JCodeEditor.vue
new file mode 100644
index 0000000..53d6c8e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JCodeEditor.vue
@@ -0,0 +1,372 @@
+<template>
+  <div ref="containerRef" v-bind="boxBindProps">
+    <!-- 全屏按钮 -->
+    <a-icon v-if="fullScreen" class="full-screen-icon" :type="fullScreenIcon" @click="onToggleFullScreen" />
+    <textarea ref="textarea" v-bind="getBindValue"></textarea>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, reactive, ref, watch, unref, computed } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  // 引入全局实例
+  import _CodeMirror, { EditorFromTextArea } from 'codemirror';
+  // 核心样式
+  import 'codemirror/lib/codemirror.css';
+  // 引入主题后还需要在 options 中指定主题才会生效
+  import 'codemirror/theme/idea.css';
+  // 需要引入具体的语法高亮库才会有对应的语法高亮效果
+  import 'codemirror/mode/javascript/javascript.js';
+  import 'codemirror/mode/css/css.js';
+  import 'codemirror/mode/xml/xml.js';
+  import 'codemirror/mode/clike/clike.js';
+  import 'codemirror/mode/markdown/markdown.js';
+  import 'codemirror/mode/python/python.js';
+  import 'codemirror/mode/r/r.js';
+  import 'codemirror/mode/shell/shell.js';
+  import 'codemirror/mode/sql/sql.js';
+  import 'codemirror/mode/swift/swift.js';
+  import 'codemirror/mode/vue/vue.js';
+  // 折叠资源引入:开始
+  import 'codemirror/addon/fold/foldgutter.css';
+  import 'codemirror/addon/fold/foldcode.js';
+  import 'codemirror/addon/fold/brace-fold.js';
+  import 'codemirror/addon/fold/comment-fold.js';
+  import 'codemirror/addon/fold/indent-fold.js';
+  import 'codemirror/addon/fold/foldgutter.js';
+  // 折叠资源引入:结束
+  //光标行背景高亮，配置里面也需要styleActiveLine设置为true
+  import 'codemirror/addon/selection/active-line.js';
+  // 支持代码自动补全
+  import 'codemirror/addon/hint/show-hint.css';
+  import 'codemirror/addon/hint/show-hint.js';
+  import 'codemirror/addon/hint/anyword-hint.js';
+  // 匹配括号
+  import 'codemirror/addon/edit/matchbrackets';
+  // 占位符
+  import 'codemirror/addon/display/placeholder.js';
+  
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isJsonObjectString } from '/@/utils/is.ts';
+  // 代码提示
+  import { useCodeHinting } from '../hooks/useCodeHinting';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
+  export default defineComponent({
+    name: 'JCodeEditor',
+    // 不将 attrs 的属性绑定到 html 标签上
+    inheritAttrs: false,
+    components: {},
+    props: {
+      value: propTypes.string.def(''),
+      height: propTypes.string.def('auto'),
+      disabled: propTypes.bool.def(false),
+      // 是否显示全屏按钮
+      fullScreen: propTypes.bool.def(false),
+      // 全屏以后的z-index
+      zIndex: propTypes.any.def(1500),
+      theme: propTypes.string.def('idea'),
+      language: propTypes.string.def(''),
+      // 代码提示
+      keywords: propTypes.array.def([]),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const { getDarkMode } = useRootSetting();
+      const containerRef = ref(null);
+      const { prefixCls } = useDesign('code-editer');
+      const CodeMirror = window.CodeMirror || _CodeMirror;
+      const emitData = ref<object>();
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      const textarea = ref<HTMLTextAreaElement>();
+      let coder: Nullable<EditorFromTextArea> = null;
+      const attrs = useAttrs();
+      const height = ref(props.height);
+      const options = reactive({
+        // 缩进格式
+        tabSize: 2,
+        // 主题，对应主题库 JS 需要提前引入
+        // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+        theme: getDarkMode.value == ThemeEnum.DARK ? 'monokai' : props.theme,
+        smartIndent: true, // 是否智能缩进
+        // 显示行号
+        lineNumbers: true,
+        line: true,
+        // 启用代码折叠相关功能:开始
+        foldGutter: true,
+        lineWrapping: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
+        // 启用代码折叠相关功能:结束
+        // 光标行高亮
+        styleActiveLine: true,
+        // 代码逻辑说明: 【issues/869】JCodeEditor组件初始化时没有设置mode
+        mode: props.language,
+        // 代码逻辑说明: 【TV360X-898】代码生成之后的预览改成只读
+        readOnly: props.disabled,
+        // 匹配括号
+        matchBrackets: true,
+        extraKeys: {
+          // Tab: function autoFormat(editor) {
+          //   //var totalLines = editor.lineCount();
+          //   //editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
+          //   setValue(innerValue, false);
+          // },
+          'Cmd-/': (cm) => comment(cm),
+          'Ctrl-/': (cm) => comment(cm),
+        },
+      });
+      // 内部存储值，初始为 props.value
+      let innerValue = props.value ?? '';
+      // 全屏状态
+      const isFullScreen = ref(false);
+      const fullScreenIcon = computed(() => (isFullScreen.value ? 'fullscreen-exit' : 'fullscreen'));
+      // 外部盒子参数
+      const boxBindProps = computed(() => {
+        let _props = {
+          class: [
+            prefixCls,
+            'full-screen-parent',
+            'auto-height',
+            {
+              'full-screen': isFullScreen.value,
+            },
+          ],
+          style: {},
+        };
+        if (isFullScreen.value) {
+          _props.style['z-index'] = props.zIndex;
+        }
+        return _props;
+      });
+      // 代码逻辑说明: 【QQYUN-5955】online js增强，加入代码提示
+      const { codeHintingMount, codeHintingRegistry } = useCodeHinting(CodeMirror, props.keywords, props.language);
+      codeHintingRegistry();
+      /**
+       * 监听组件值
+       */
+      watch(
+        () => props.value,
+        () => {
+          if (innerValue != props.value) {
+            setValue(props.value, false);
+          }
+        }
+      );
+      onMounted(() => {
+        initialize();
+        // 代码逻辑说明: 【QQYUN-8473】代码编辑器首次加载会有遮挡
+        setTimeout(() => {
+          refresh();
+        }, 150);
+      });
+
+      /**
+       * 组件赋值
+       * @param value
+       * @param trigger 是否触发 change 事件
+       */
+      function setValue(value: string, trigger = true) {
+        if (value && isJsonObjectString(value)) {
+          value = JSON.stringify(JSON.parse(value), null, 2);
+        }
+        coder?.setValue(value ?? '');
+        innerValue = value;
+        trigger && emitChange(innerValue);
+        // 代码逻辑说明: 【QQYUN-9231】代码编辑器有遮挡
+        setTimeout(() => {
+          refresh();
+          // 再次刷下防止小概率下遮挡问题
+          setTimeout(() => {
+            refresh();
+          }, 600);
+        }, 400);
+      }
+
+      //编辑器值修改事件
+      function onChange(obj) {
+        let value = obj.getValue();
+        innerValue = value || '';
+        if (props.value != innerValue) {
+          emitChange(innerValue);
+        }
+      }
+
+      function emitChange(value) {
+        emit('change', value);
+        emit('update:value', value);
+      }
+
+      //组件初始化
+      function initialize() {
+        coder = CodeMirror.fromTextArea(textarea.value!, options);
+        //绑定值修改事件
+        coder.on('change', onChange);
+        // 初始化成功时赋值一次
+        setValue(innerValue, false);
+        // 代码逻辑说明: 【QQYUN-5955】online js增强，加入代码提示
+        codeHintingMount(coder);
+      }
+
+      // 切换全屏状态
+      function onToggleFullScreen() {
+        isFullScreen.value = !isFullScreen.value;
+      }
+
+      // 代码逻辑说明: codeEditor禁用功能
+      watch(
+        () => props.disabled,
+        (val) => {
+          if (coder) {
+            coder.setOption('readOnly', val);
+          }
+        }
+      );
+      
+      // 支持动态设置语言
+      watch(()=>props.language, (val)=>{
+        if(val && coder){
+          coder.setOption('mode', val);
+        }
+      });
+
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+
+      // 代码逻辑说明: VUEN-2480【严重bug】online vue3测试的问题 8、online js增强样式问题
+      function refresh(){
+        if(coder){
+          coder.refresh();
+        }
+      }
+
+      /**
+       * 2024-04-01
+       * liaozhiyang
+       * 代码批量注释
+       */
+      function comment(cm) {
+        var selection = cm.getSelection();
+        var start = cm.getCursor('start');
+        var end = cm.getCursor('end');
+        var isCommented = selection.startsWith('//');
+        if (isCommented) {
+          // 如果已经被注释，取消注释
+          cm.replaceRange(selection.replace(/\n\/\/\s/g, '\n').replace(/^\/\/\s/, ''), start, end);
+        } else {
+          // 添加注释
+          cm.replaceRange('// ' + selection.replace(/\n(?=.)/g, '\n// '), start, end);
+        }
+      }
+
+      return {
+        state,
+        textarea,
+        boxBindProps,
+        getBindValue,
+        setValue,
+        isFullScreen,
+        fullScreenIcon,
+        onToggleFullScreen,
+        refresh,
+        containerRef,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-code-editer';
+  .@{prefix-cls} {
+    &.auto-height {
+      .CodeMirror {
+        height: v-bind(height) !important;
+        min-height: 100px;
+      }
+    }
+
+    /* 全屏样式 */
+
+    &.full-screen-parent {
+      position: relative;
+
+      .full-screen-icon {
+        opacity: 0;
+        color: black;
+        width: 20px;
+        height: 20px;
+        line-height: 24px;
+        background-color: white;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        z-index: 9;
+        cursor: pointer;
+        transition: opacity 0.3s;
+        padding: 2px 0 0 1.5px;
+      }
+
+      &:hover {
+        .full-screen-icon {
+          opacity: 1;
+
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.88);
+          }
+        }
+      }
+
+      &.full-screen {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding: 8px;
+        background-color: #f5f5f5;
+
+        .full-screen-icon {
+          top: 12px;
+          right: 12px;
+        }
+
+        .full-screen-child,
+        .CodeMirror {
+          height: 100%;
+          max-height: 100%;
+          min-height: 100%;
+        }
+      }
+
+      .full-screen-child {
+        height: 100%;
+      }
+    }
+    
+    /** VUEN-2344【vue3】这个样式有问题，是不是加个边框 */
+    .CodeMirror{
+      border: 1px solid #ddd;
+    }
+    .CodeMirror pre.CodeMirror-placeholder {
+      color: #cacaca;
+      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+    }
+  }
+  .CodeMirror-hints.idea,
+  .CodeMirror-hints.monokai {
+    z-index: 1001;
+    max-width: 600px;
+    max-height: 300px;
+  }
+  // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      .CodeMirror {
+        border: 1px solid #3a3a3a;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JDatePickerMultiple.vue b/src/components/Form/src/jeecg/components/JDatePickerMultiple.vue
new file mode 100644
index 0000000..b0a3d90
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JDatePickerMultiple.vue
@@ -0,0 +1,222 @@
+<!-- 多选日期 -->
+<template>
+  <div class="j-date-multiple" ref="wrapperRef">
+    <!-- 显示选中项：使用 ASelect 多选标签模式，禁止自身下拉，仅作展示与清空/删除入口 -->
+    <a-select
+      :value="displayValues"
+      mode="multiple"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      allowClear
+      :open="false"
+      :getPopupContainer="getParentContainer"
+      v-bind="attrs"
+      @change="onSelectChange"
+      @click="openPanel"
+    />
+
+    <!-- 隐形触发器，仅用于承载弹出层与月份切换，面板受控打开 -->
+    <a-date-picker
+      ref="pickerRef"
+      :value="void 0"
+      :open="open"
+      :getPopupContainer="getParentContainer"
+      :inputReadOnly="true"
+      :allowClear="false"
+      :disabledDate="disabledDate"
+      :format="format"
+      :showToday="false"
+      @openChange="onOpenChange"
+      class="hidden-picker"
+      popupClassName="j-date-multiple-popup"
+    >
+      <template #dateRender="{ current }">
+        <div
+          class="ant-picker-cell-inner jdm-cell"
+          :class="{ 'is-selected': isSelected(current) }"
+          @click.stop.prevent="onCellClick(current)"
+        >
+          {{ current.date() }}
+        </div>
+      </template>
+    </a-date-picker>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref, watch} from 'vue';
+import dayjs, {Dayjs} from 'dayjs';
+import {propTypes} from '/@/utils/propTypes';
+import {useAttrs} from '/@/hooks/core/useAttrs';
+import {useRuleFormItem} from '/@/hooks/component/useFormItem';
+import {setPopContainer} from '/@/utils';
+
+const props = defineProps({
+  value: propTypes.string.def(''), // 多个日期用分隔符拼接
+  placeholder: propTypes.string.def('请选择日期'),
+  separator: propTypes.string.def(','),
+  format: propTypes.string.def('YYYY-MM-DD'), // 展示格式
+  valueFormat: propTypes.string.def('YYYY-MM-DD'), // 存储格式
+  disabled: propTypes.bool.def(false),
+  popContainer: propTypes.string.def(''),
+  // 透传给 DatePicker 的禁用规则
+  disabledDate: {
+    type: Function as unknown as () => (current: Dayjs) => boolean,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['change', 'update:value']);
+
+// attrs 透传到 ASelect 以复用大小/样式等
+const attrs = useAttrs();
+
+// 与表单校验联动
+const emitData = ref<any[]>([]);
+const [, , , formItemContext] = useRuleFormItem(props as any, 'value', 'change', emitData);
+
+const wrapperRef = ref<HTMLElement | null>(null);
+const pickerRef = ref();
+const open = ref(false);
+
+// 内部选中列表（存储格式字符串数组）
+const selectedValueStrings = ref<string[]>([]);
+
+// 从外部 value 初始化/同步内部选中
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) {
+      selectedValueStrings.value = [];
+    } else {
+      const arr = String(val)
+        .split(props.separator)
+        .map((s) => s && s.trim())
+        .filter((s) => !!s) as string[];
+      // 去重
+      const set = new Set(arr);
+      selectedValueStrings.value = Array.from(set);
+    }
+  },
+  {immediate: true}
+);
+
+// 展示值（格式化为 format）
+const displayValues = computed<string[]>(() => {
+  return selectedValueStrings.value.map((sv) => {
+    const d = dayjs(sv, props.valueFormat);
+    if (d.isValid()) {
+      return d.format(props.format);
+    } else {
+      return sv;
+    }
+  });
+});
+
+// 选择器容器：优先 popContainer，其次使用本组件包裹元素
+function getParentContainer(node: HTMLElement) {
+  if (!props.popContainer) {
+    return wrapperRef.value ?? node?.parentNode;
+  } else {
+    return setPopContainer(node, props.popContainer);
+  }
+}
+
+function openPanel() {
+  if (props.disabled) {
+    return;
+  }
+  open.value = true;
+}
+
+function onOpenChange(val: boolean) {
+  // 仅在外部点击时关闭；日期点击由我们拦截，不会触发默认关闭
+  open.value = val;
+}
+
+function isSelected(current: Dayjs) {
+  const key = current.format(props.valueFormat);
+  return selectedValueStrings.value.includes(key);
+}
+
+function onCellClick(current: Dayjs) {
+  if (props.disabled) {
+    return;
+  }
+  if (props.disabledDate && props.disabledDate(current)) {
+    return;
+  }
+  const key = current.format(props.valueFormat);
+  const idx = selectedValueStrings.value.indexOf(key);
+  if (idx >= 0) {
+    selectedValueStrings.value.splice(idx, 1);
+  } else {
+    selectedValueStrings.value.push(key);
+  }
+  triggerChange();
+  // 保持面板开启
+  nextTick(() => {
+    open.value = true;
+  });
+}
+
+function onSelectChange(nextDisplayValues: string[]) {
+  // 从展示值还原为存储格式
+  const nextStoreValues: string[] = [];
+  for (const dv of nextDisplayValues) {
+    const d = dayjs(dv, props.format);
+    if (d.isValid()) {
+      nextStoreValues.push(d.format(props.valueFormat));
+    }
+  }
+  // 去重
+  const set = new Set(nextStoreValues);
+  selectedValueStrings.value = Array.from(set);
+  triggerChange();
+}
+
+function triggerChange() {
+  const joined = selectedValueStrings.value.join(props.separator);
+  emit('change', joined);
+  emit('update:value', joined);
+  nextTick(() => {
+    if (formItemContext && formItemContext.onFieldChange) {
+      formItemContext.onFieldChange();
+    }
+  });
+}
+
+onMounted(() => {
+  // nothing now
+});
+
+</script>
+
+<style lang="less">
+.j-date-multiple {
+  position: relative;
+  width: 100%;
+
+  .hidden-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 32px;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.j-date-multiple-popup.ant-picker-dropdown {
+  .ant-picker-cell {
+    .ant-picker-cell-inner.jdm-cell {
+      &.is-selected {
+        color: #fff !important;
+        // noinspection LessUnresolvedVariable
+        background-color: @primary-color !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Form/src/jeecg/components/JDictSelectTag.vue b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
new file mode 100644
index 0000000..321b9eb
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
@@ -0,0 +1,257 @@
+<template>
+  <a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state" @change="handleChangeRadio">
+    <template v-for="item in dictOptions" :key="`${item.value}`">
+      <a-radio :value="item.value">
+        <span :class="[useDicColor && item.color ? 'colorText' : '']" :style="{ backgroundColor: `${useDicColor && item.color}` }">
+          {{ item.label }}
+        </span>
+      </a-radio>
+    </template>
+  </a-radio-group>
+
+  <a-radio-group
+    v-else-if="compType === CompTypeEnum.RadioButton"
+    v-bind="attrs"
+    v-model:value="state"
+    buttonStyle="solid"
+    @change="handleChangeRadio"
+  >
+    <template v-for="item in dictOptions" :key="`${item.value}`">
+      <a-radio-button :value="item.value">
+        {{ item.label }}
+      </a-radio-button>
+    </template>
+  </a-radio-group>
+
+  <template v-else-if="compType === CompTypeEnum.Select">
+    <!-- 显示加载效果 -->
+    <a-input v-if="loadingEcho" readOnly placeholder="加载中…">
+      <template #prefix>
+        <LoadingOutlined />
+      </template>
+    </a-input>
+    <a-select
+      v-else
+      :placeholder="placeholder"
+      v-bind="attrs"
+      v-model:value="state"
+      :filterOption="handleFilterOption"
+      :getPopupContainer="getPopupContainer"
+      :style="style"
+      @change="handleChange"
+    >
+      <a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
+      <template v-for="item in dictOptions" :key="`${item.value}`">
+        <a-select-option :value="item.value">
+          <span
+            :class="[useDicColor && item.color ? 'colorText' : '']"
+            :style="{ backgroundColor: `${useDicColor && item.color}` }"
+            :title="item.label"
+          >
+            {{ item.label }}
+          </span>
+        </a-select-option>
+      </template>
+    </a-select>
+  </template>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { initDictOptions } from '/@/utils/dict';
+  import { get, omit } from 'lodash-es';
+  import { CompTypeEnum } from '/@/enums/CompTypeEnum';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'JDictSelectTag',
+    inheritAttrs: false,
+    components: { LoadingOutlined },
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.array]),
+      dictCode: propTypes.string,
+      type: propTypes.string,
+      placeholder: propTypes.string,
+      stringToNumber: propTypes.bool,
+      useDicColor: propTypes.bool.def(false),
+      getPopupContainer: {
+        type: Function,
+        default: (node) => node?.parentNode,
+      },
+      // 是否显示【请选择】选项
+      showChooseOption: propTypes.bool.def(true),
+      // 下拉项-online使用
+      options: {
+        type: Array,
+        default: () => [],
+        required: false,
+      },
+      style: propTypes.any,
+      // 搜索时是否只搜索label
+      onlySearchByLabel: propTypes.bool.def(false),
+    },
+    emits: ['options-change', 'change','update:value'],
+    setup(props, { emit, refs }) {
+      const dictOptions = ref<any[]>([]);
+      const attrs = useAttrs();
+      const formItemContext = Form.useInjectFormItemContext();
+      const state = ref<any>(props.value);
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      // update-begin-author:liaozhiyang date:2026-05-12 for:【issues/9420】系统用户职务多选回显时显示1,2,3
+      watch(
+        () => props.value,
+        (val) => {
+          const { mode } = unref<Recordable>(getBindValue);
+          if ((mode === 'multiple' || mode === 'tags') && typeof val === 'string') {
+            const arr = val ? val.split(',') : [];
+            state.value = props.stringToNumber ? arr.map((v) => Number(v)) : arr;
+          } else {
+            const isMulti = mode === 'multiple' || mode === 'tags';
+            state.value = isMulti && val == null ? [] : val;
+          }
+        },
+        { immediate: true }
+      );
+      // update-end-author:liaozhiyang date:2026-05-12 for:【issues/9420】系统用户职务多选回显时显示1,2,3
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      // 是否是首次加载回显，只有首次加载，才会显示 loading
+      let isFirstLoadEcho = true;
+
+      //组件类型
+      const compType = computed(() => {
+        return !props.type || props.type === 'list' ? 'select' : props.type;
+      });
+      /**
+       * 监听字典code
+       */
+      watchEffect(() => {
+        if (props.dictCode) {
+          loadingEcho.value = isFirstLoadEcho;
+          isFirstLoadEcho = false;
+          initDictData().finally(() => {
+            loadingEcho.value = isFirstLoadEcho;
+          });
+        }
+        //update-begin-author:taoyan date: 如果没有提供dictCode 可以走options的配置--
+        if (!props.dictCode) {
+          dictOptions.value = props.options;
+        }
+        //update-end-author:taoyan date: 如果没有提供dictCode 可以走options的配置--
+      });
+
+      // 此处添加空值的change事件,即当组件调用地代码设置value为''也能触发change事件
+      watch(
+        () => props.value,
+        () => {
+          if (props.value === '') {
+            emit('change', '');
+            nextTick(() => formItemContext.onFieldChange());
+          }
+        }
+      );
+
+      async function initDictData() {
+        let { dictCode, stringToNumber } = props;
+        //根据字典Code, 初始化字典数组
+        const dictData = await initDictOptions(dictCode);
+        dictOptions.value = dictData.reduce((prev, next) => {
+          if (next) {
+            const value = next['value'];
+            prev.push({
+              label: next['text'] || next['label'],
+              value: stringToNumber ? +value : value,
+              color: next['color'],
+              ...omit(next, ['text', 'value', 'color']),
+            });
+          }
+          return prev;
+        }, []);
+      }
+
+      function handleChange(e) {
+        const { mode } = unref<Recordable>(getBindValue);
+        let changeValue:any;
+        // 兼容多选模式
+        
+        //采用一个值，不然的话state值变换触发多个change
+        if (mode === 'multiple') {
+          changeValue = e?.target?.value ?? e;
+          // 过滤掉空值
+          if (changeValue == null || changeValue === '') {
+            changeValue = [];
+          }
+          if (Array.isArray(changeValue)) {
+            changeValue = changeValue.filter((item) => item != null && item !== '');
+          }
+        } else {
+          changeValue = e?.target?.value ?? e;
+        }
+        state.value = changeValue;
+
+        // 代码逻辑说明: 【issues/4507】JDictSelectTag组件使用时，浏览器给出警告提示：Expected Function, got Array------------
+        emit('update:value', changeValue);
+        // 不再依赖 useRuleFormItem 的 setter 自动 emit('change')，这里显式触发，保证 BasicForm 的 onChange wrapper 能写回 formModel 并校验
+        emit('change', changeValue);
+        nextTick(() => formItemContext.onFieldChange());
+      }
+
+      /** 单选radio的值变化事件 */
+      function handleChangeRadio(e) {
+        const radioValue = e?.target?.value ?? e;
+        state.value = radioValue;
+        // 代码逻辑说明: 【issues/506】JDictSelectTag 组件 type="radio" 没有返回值------------
+        emit('update:value', radioValue);
+        emit('change', radioValue);
+        nextTick(() => formItemContext.onFieldChange());
+      }
+
+      /** 用于搜索下拉框中的内容 */
+      function handleFilterOption(input, option) {
+        // 代码逻辑说明: 【QQYUN-6514】 配置的时候，Y轴不能输入多个字段了，控制台报错
+        if (typeof option.children === 'function') {
+          // 在 label 中搜索
+          let labelIf = option.children()[0]?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+          if (labelIf) {
+            return true;
+          }
+        }
+        if (props.onlySearchByLabel) {
+          // 如果开启了只在 label 中搜索，就不继续往下搜索value了
+          return false;
+        }
+        // 在 value 中搜索
+        return (option.value || '').toString().toLowerCase().indexOf(input.toLowerCase()) >= 0;
+      }
+
+      return {
+        state,
+        compType,
+        attrs,
+        loadingEcho,
+        getBindValue,
+        dictOptions,
+        CompTypeEnum,
+        handleChange,
+        handleChangeRadio,
+        handleFilterOption,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  // 代码逻辑说明: 【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+  .colorText {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    border-radius: 8px;
+    background-color: red;
+    color: #fff;
+    font-size: 12px;
+  }
+  // 代码逻辑说明: 【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+</style>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInner.vue b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInner.vue
new file mode 100644
index 0000000..fd0aa46
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInner.vue
@@ -0,0 +1,321 @@
+<template>
+  <div :class="`${prefixCls}`">
+    <div class="content">
+      <a-tabs :size="`small`" v-model:activeKey="activeKey">
+        <a-tab-pane tab="秒" key="second" v-if="!hideSecond">
+          <SecondUI v-model:value="second" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="分" key="minute">
+          <MinuteUI v-model:value="minute" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="时" key="hour">
+          <HourUI v-model:value="hour" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="日" key="day">
+          <DayUI v-model:value="day" :week="week" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="月" key="month">
+          <MonthUI v-model:value="month" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="周" key="week">
+          <WeekUI v-model:value="week" :day="day" :disabled="disabled" />
+        </a-tab-pane>
+        <a-tab-pane tab="年" key="year" v-if="!hideYear && !hideSecond">
+          <YearUI v-model:value="year" :disabled="disabled" />
+        </a-tab-pane>
+      </a-tabs>
+      <a-divider />
+      <!-- 执行时间预览 -->
+      <div style="overflow: hidden">
+        <a-row :gutter="8">
+          <a-col :span="18" style="margin-top: 22px">
+            <a-row :gutter="8">
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.second" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'second'">秒</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.minute" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'minute'">分</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.hour" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'hour'">时</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.day" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'day'">日</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.month" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'month'">月</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8" style="margin-bottom: 12px">
+                <a-input v-model:value="inputValues.week" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'week'">周</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="8">
+                <a-input v-model:value="inputValues.year" @blur="onInputBlur">
+                  <template #addonBefore>
+                    <span class="allow-click" @click="activeKey = 'year'">年</span>
+                  </template>
+                </a-input>
+              </a-col>
+              <a-col :span="16">
+                <a-input v-model:value="inputValues.cron" @blur="onInputCronBlur">
+                  <template #addonBefore>
+                    <a-tooltip title="Cron表达式">式</a-tooltip>
+                  </template>
+                </a-input>
+              </a-col>
+            </a-row>
+          </a-col>
+          <a-col :span="6">
+            <div>近十次执行时间（不含年）</div>
+            <a-textarea type="textarea" :value="preTimeList" :rows="5" />
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, reactive, ref, watch, provide } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import CronParser from 'cron-parser';
+  import SecondUI from './tabs/SecondUI.vue';
+  import MinuteUI from './tabs/MinuteUI.vue';
+  import HourUI from './tabs/HourUI.vue';
+  import DayUI from './tabs/DayUI.vue';
+  import MonthUI from './tabs/MonthUI.vue';
+  import WeekUI from './tabs/WeekUI.vue';
+  import YearUI from './tabs/YearUI.vue';
+  import { cronEmits, cronProps } from './easy.cron.data';
+  import { dateFormat, simpleDebounce } from '/@/utils/common/compUtils';
+
+  const { prefixCls } = useDesign('easy-cron-inner');
+  provide('prefixCls', prefixCls);
+  const emit = defineEmits([...cronEmits]);
+  const props = defineProps({ ...cronProps });
+  const activeKey = ref(props.hideSecond ? 'minute' : 'second');
+  const second = ref('*');
+  const minute = ref('*');
+  const hour = ref('*');
+  const day = ref('*');
+  const month = ref('*');
+  const week = ref('?');
+  const year = ref('*');
+  const inputValues = reactive({
+    second: '',
+    minute: '',
+    hour: '',
+    day: '',
+    month: '',
+    week: '',
+    year: '',
+    cron: '',
+  });
+  const preTimeList = ref('执行预览，会忽略年份参数。');
+
+  // cron表达式
+  const cronValueInner = computed(() => {
+    let result: string[] = [];
+    if (!props.hideSecond) {
+      result.push(second.value ? second.value : '*');
+    }
+    result.push(minute.value ? minute.value : '*');
+    result.push(hour.value ? hour.value : '*');
+    result.push(day.value ? day.value : '*');
+    result.push(month.value ? month.value : '*');
+    result.push(week.value ? week.value : '?');
+    if (!props.hideYear && !props.hideSecond) result.push(year.value ? year.value : '*');
+    return result.join(' ');
+  });
+  // 不含年
+  const cronValueNoYear = computed(() => {
+    const v = cronValueInner.value;
+    if (props.hideYear || props.hideSecond) return v;
+    const vs = v.split(' ');
+    if (vs.length >= 6) {
+      // 转成 Quartz 的规则
+      vs[5] = convertWeekToQuartz(vs[5]);
+    }
+    return vs.slice(0, vs.length - 1).join(' ');
+  });
+  const calTriggerList = simpleDebounce(calTriggerListInner, 500);
+
+  watch(
+    () => props.value,
+    (newVal) => {
+      if (newVal === cronValueInner.value) {
+        return;
+      }
+      formatValue();
+    }
+  );
+
+  watch(cronValueInner, (newValue) => {
+    calTriggerList();
+    emitValue(newValue);
+    assignInput();
+  });
+
+  // watch(minute, () => {
+  //   if (second.value === '*') {
+  //     second.value = '0'
+  //   }
+  // })
+  // watch(hour, () => {
+  //   if (minute.value === '*') {
+  //     minute.value = '0'
+  //   }
+  // })
+  // watch(day, () => {
+  //   if (day.value !== '?' && hour.value === '*') {
+  //     hour.value = '0'
+  //   }
+  // })
+  // watch(week, () => {
+  //   if (week.value !== '?' && hour.value === '*') {
+  //     hour.value = '0'
+  //   }
+  // })
+  // watch(month, () => {
+  //   if (day.value === '?' && week.value === '*') {
+  //     week.value = '1'
+  //   } else if (week.value === '?' && day.value === '*') {
+  //     day.value = '1'
+  //   }
+  // })
+  // watch(year, () => {
+  //   if (month.value === '*') {
+  //     month.value = '1'
+  //   }
+  // })
+
+  assignInput();
+  formatValue();
+  calTriggerListInner();
+
+  function assignInput() {
+    inputValues.second = second.value;
+    inputValues.minute = minute.value;
+    inputValues.hour = hour.value;
+    inputValues.day = day.value;
+    inputValues.month = month.value;
+    inputValues.week = week.value;
+    inputValues.year = year.value;
+    inputValues.cron = cronValueInner.value;
+  }
+
+  function formatValue() {
+    if (!props.value) return;
+    const values = props.value.split(' ').filter((item) => !!item);
+    if (!values || values.length <= 0) return;
+    let i = 0;
+    if (!props.hideSecond) second.value = values[i++];
+    if (values.length > i) minute.value = values[i++];
+    if (values.length > i) hour.value = values[i++];
+    if (values.length > i) day.value = values[i++];
+    if (values.length > i) month.value = values[i++];
+    if (values.length > i) week.value = values[i++];
+    if (values.length > i) year.value = values[i];
+    assignInput();
+  }
+
+  // Quartz 的规则：
+  // 1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
+  function convertWeekToQuartz(week: string) {
+    let convert = (v: string) => {
+      if (v === '0') {
+        return '1';
+      }
+      if (v === '1') {
+        return '0';
+      }
+      return (Number.parseInt(v) - 1).toString();
+    };
+    // 匹配示例 1-7 or 1/7
+    let patten1 = /^([0-7])([-/])([0-7])$/;
+    // 匹配示例 1,4,7
+    let patten2 = /^([0-7])(,[0-7])+$/;
+    if (/^[0-7]$/.test(week)) {
+      return convert(week);
+    } else if (patten1.test(week)) {
+      return week.replace(patten1, ($0, before, separator, after) => {
+        if (separator === '/') {
+          return convert(before) + separator + after;
+        } else {
+          return convert(before) + separator + convert(after);
+        }
+      });
+    } else if (patten2.test(week)) {
+      return week
+        .split(',')
+        .map((v) => convert(v))
+        .join(',');
+    }
+    return week;
+  }
+
+  function calTriggerListInner() {
+    // 设置了回调函数
+    if (props.remote) {
+      props.remote(cronValueInner.value, +new Date(), (v) => {
+        preTimeList.value = v;
+      });
+      return;
+    }
+    const format = 'yyyy-MM-dd hh:mm:ss';
+    const options = {
+      currentDate: dateFormat(new Date(), format),
+    };
+    const iter = CronParser.parseExpression(cronValueNoYear.value, options);
+    const result: string[] = [];
+    for (let i = 1; i <= 10; i++) {
+      result.push(dateFormat(new Date(iter.next() as any), format));
+    }
+    preTimeList.value = result.length > 0 ? result.join('\n') : '无执行时间';
+  }
+
+  function onInputBlur() {
+    second.value = inputValues.second;
+    minute.value = inputValues.minute;
+    hour.value = inputValues.hour;
+    day.value = inputValues.day;
+    month.value = inputValues.month;
+    week.value = inputValues.week;
+    year.value = inputValues.year;
+  }
+
+  function onInputCronBlur(event) {
+    emitValue(event.target.value);
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+</script>
+<style lang="less">
+  @import 'easy.cron.inner';
+</style>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInput.vue b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInput.vue
new file mode 100644
index 0000000..51e8abe
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronInput.vue
@@ -0,0 +1,63 @@
+<template>
+  <div :class="`${prefixCls}`">
+    <a-input :placeholder="placeholder" v-model:value="editCronValue" :disabled="disabled">
+      <template #addonAfter>
+        <a class="open-btn" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
+          <Icon icon="ant-design:setting-outlined" />
+          <span>选择</span>
+        </a>
+      </template>
+    </a-input>
+    <EasyCronModal
+      @register="registerModal"
+      v-model:value="editCronValue"
+      :exeStartTime="exeStartTime"
+      :hideYear="hideYear"
+      :remote="remote"
+      :hideSecond="hideSecond"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import EasyCronModal from './EasyCronModal.vue';
+  import { cronEmits, cronProps } from './easy.cron.data';
+
+  const { prefixCls } = useDesign('easy-cron-input');
+  const emit = defineEmits([...cronEmits]);
+  const props = defineProps({
+    ...cronProps,
+    placeholder: propTypes.string.def('请输入cron表达式'),
+    exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0),
+  });
+  const [registerModal, { openModal }] = useModal();
+  const editCronValue = ref(props.value);
+
+  watch(
+    () => props.value,
+    (newVal) => {
+      if (newVal !== editCronValue.value) {
+        editCronValue.value = newVal;
+      }
+    }
+  );
+  watch(editCronValue, (newVal) => {
+    emit('change', newVal);
+    emit('update:value', newVal);
+  });
+
+  function showConfigModal() {
+    if (!props.disabled) {
+      openModal();
+    }
+  }
+</script>
+
+<style lang="less">
+  @import 'easy.cron.input';
+</style>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/EasyCronModal.vue b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronModal.vue
new file mode 100644
index 0000000..5824cd0
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/EasyCronModal.vue
@@ -0,0 +1,28 @@
+<template>
+  <BasicModal @register="registerModal" title="Cron表达式" width="1000px" @ok="onOk">
+    <EasyCron v-bind="attrs" />
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import EasyCron from './EasyCronInner.vue';
+
+  export default defineComponent({
+    name: 'EasyCronModal',
+    inheritAttrs: false,
+    components: { BasicModal, EasyCron },
+    setup() {
+      const attrs = useAttrs();
+      const [registerModal, { closeModal }] = useModalInner();
+
+      function onOk() {
+        closeModal();
+      }
+
+      return { attrs, registerModal, onOk };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/LICENSE b/src/components/Form/src/jeecg/components/JEasyCron/LICENSE
new file mode 100644
index 0000000..08eddc9
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 知行合一
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.data.ts b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.data.ts
new file mode 100644
index 0000000..335a8c0
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.data.ts
@@ -0,0 +1,10 @@
+import { propTypes } from '/@/utils/propTypes';
+
+export const cronEmits = ['change', 'update:value'];
+export const cronProps = {
+  value: propTypes.string.def(''),
+  disabled: propTypes.bool.def(false),
+  hideSecond: propTypes.bool.def(false),
+  hideYear: propTypes.bool.def(false),
+  remote: propTypes.func,
+};
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.inner.less b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.inner.less
new file mode 100644
index 0000000..3aab6ba
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.inner.less
@@ -0,0 +1,59 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-easy-cron-inner';
+
+.@{prefix-cls} {
+  .content {
+    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+      margin-left: 0;
+    }
+  }
+
+  &-config-list {
+    text-align: left;
+    margin: 0 10px 10px 10px;
+
+    .item {
+      margin-top: 5px;
+      font-size: 14px;
+
+      span {
+        padding: 0 2px;
+      }
+    }
+
+    .choice {
+      padding: 5px 8px;
+    }
+
+    .w60 {
+      width: 60px;
+      min-width: 60px;
+    }
+
+    .w80 {
+      width: 80px;
+      min-width: 80px;
+    }
+
+    .list {
+      margin: 0 20px;
+    }
+
+    .list-check-item {
+      padding: 1px 3px;
+      width: 4em;
+    }
+
+    .list-cn .list-check-item {
+      width: 5em;
+    }
+
+    .tip-info {
+      color: #999;
+    }
+  }
+
+  .allow-click {
+    cursor: pointer;
+  }
+}
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.input.less b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.input.less
new file mode 100644
index 0000000..d72aa15
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/easy.cron.input.less
@@ -0,0 +1,14 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-easy-cron-input';
+
+.@{prefix-cls} {
+  a.open-btn {
+    cursor: pointer;
+
+    .app-iconify {
+      position: relative;
+      top: 1px;
+      right: 2px;
+    }
+  }
+}
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/index.ts b/src/components/Form/src/jeecg/components/JEasyCron/index.ts
new file mode 100644
index 0000000..1513f0d
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/index.ts
@@ -0,0 +1,6 @@
+// 原开源项目地址：https://gitee.com/toktok/easy-cron
+
+export { default as JEasyCron } from './EasyCronInput.vue';
+export { default as JEasyCronInner } from './EasyCronInner.vue';
+export { default as JEasyCronModal } from './EasyCronModal.vue';
+export { default as JCronValidator } from './validator';
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/DayUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/DayUI.vue
new file mode 100644
index 0000000..1cd215c
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/DayUI.vue
@@ -0,0 +1,94 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</a-radio>
+        <span class="tip-info">日和周只能设置其中之一</span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每日</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 日 至 </span>
+        <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 日 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 日开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 日 </span>
+      </div>
+<!--       工作日暂不支持，会报错，先隐藏了 -->
+<!--      <div class="item">-->
+<!--        <a-radio :value="TypeEnum.work" v-bind="beforeRadioAttrs">工作日</a-radio>-->
+<!--        <span> 本月 </span>-->
+<!--        <InputNumber v-model:value="valueWork" v-bind="typeWorkAttrs" />-->
+<!--        <span> 日，最近的工作日 </span>-->
+<!--      </div>-->
+      <div class="item">
+        <a-radio :value="TypeEnum.last" v-bind="beforeRadioAttrs">最后一日</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="i in specifyRange" :key="i">
+              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, watch } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { TypeEnum, useTabEmits, useTabProps, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'DayUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+      props: {
+        week: { type: String, default: '?' },
+      },
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      const disabledChoice = computed(() => {
+        return (props.week && props.week !== '?') || props.disabled;
+      });
+      const setup = useTabSetup(props, context, {
+        defaultValue: '*',
+        valueWork: 1,
+        minValue: 1,
+        maxValue: 31,
+        valueRange: { start: 1, end: 31 },
+        valueLoop: { start: 1, interval: 1 },
+        disabled: disabledChoice,
+      });
+      const typeWorkAttrs = computed(() => ({
+        disabled: setup.type.value !== TypeEnum.work || props.disabled || disabledChoice.value,
+        ...setup.inputNumberAttrs.value,
+      }));
+
+      watch(
+        () => props.week,
+        () => {
+          setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value);
+        }
+      );
+
+      return { ...setup, typeWorkAttrs };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/HourUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/HourUI.vue
new file mode 100644
index 0000000..c3c5224
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/HourUI.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每时</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 时 至 </span>
+        <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 时 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 时开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 时 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="i in specifyRange" :key="i">
+              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'HourUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      return useTabSetup(props, context, {
+        defaultValue: '*',
+        minValue: 0,
+        maxValue: 23,
+        valueRange: { start: 0, end: 23 },
+        valueLoop: { start: 0, interval: 1 },
+      });
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/MinuteUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/MinuteUI.vue
new file mode 100644
index 0000000..34617bf
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/MinuteUI.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每分</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 分 至 </span>
+        <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 分 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 分开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 分 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="i in specifyRange" :key="i">
+              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'MinuteUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      return useTabSetup(props, context, {
+        defaultValue: '*',
+        minValue: 0,
+        maxValue: 59,
+        valueRange: { start: 0, end: 59 },
+        valueLoop: { start: 0, interval: 1 },
+      });
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/MonthUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/MonthUI.vue
new file mode 100644
index 0000000..78f7f4e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/MonthUI.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每月</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 月 至 </span>
+        <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 月 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 月开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 月 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="i in specifyRange" :key="i">
+              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'MonthUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      return useTabSetup(props, context, {
+        defaultValue: '*',
+        minValue: 1,
+        maxValue: 12,
+        valueRange: { start: 1, end: 12 },
+        valueLoop: { start: 1, interval: 1 },
+      });
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/SecondUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/SecondUI.vue
new file mode 100644
index 0000000..6b65b85
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/SecondUI.vue
@@ -0,0 +1,59 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每秒</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 秒 至 </span>
+        <InputNumber v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 秒 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 秒开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 秒 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="i in specifyRange" :key="i">
+              <a-checkbox :value="i" v-bind="typeSpecifyAttrs">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'SecondUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      return useTabSetup(props, context, {
+        defaultValue: '*',
+        minValue: 0,
+        maxValue: 59,
+        valueRange: { start: 0, end: 59 },
+        valueLoop: { start: 0, interval: 1 },
+      });
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/WeekUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/WeekUI.vue
new file mode 100644
index 0000000..c3b15dc
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/WeekUI.vue
@@ -0,0 +1,125 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</a-radio>
+        <span class="tip-info">日和周只能设置其中之一</span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <a-select v-model:value="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+        <span> 至 </span>
+        <a-select v-model:value="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <a-select v-model:value="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
+        <span> 开始，间隔 </span>
+        <InputNumber v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 天 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
+        <div class="list list-cn">
+          <a-checkbox-group v-model:value="valueList">
+            <template v-for="opt in weekOptions" :key="i">
+              <a-checkbox :value="opt.value" v-bind="typeSpecifyAttrs">{{ opt.label }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, watch, defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup, TypeEnum } from './useTabMixin';
+
+  const WEEK_MAP_EN = {
+    '1': 'SUN',
+    '2': 'MON',
+    '3': 'TUE',
+    '4': 'WED',
+    '5': 'THU',
+    '6': 'FRI',
+    '7': 'SAT',
+  };
+
+  const WEEK_MAP_CN = {
+    '1': '周日',
+    '2': '周一',
+    '3': '周二',
+    '4': '周三',
+    '5': '周四',
+    '6': '周五',
+    '7': '周六',
+  };
+
+  export default defineComponent({
+    name: 'WeekUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '?',
+      props: {
+        day: { type: String, default: '*' },
+      },
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      const disabledChoice = computed(() => {
+        return (props.day && props.day !== '?') || props.disabled;
+      });
+      const setup = useTabSetup(props, context, {
+        defaultType: TypeEnum.unset,
+        defaultValue: '?',
+        minValue: 1,
+        maxValue: 7,
+        // 0,7表示周日 1表示周一
+        valueRange: { start: 1, end: 7 },
+        valueLoop: { start: 2, interval: 1 },
+        disabled: disabledChoice,
+      });
+      const weekOptions = computed(() => {
+        let options: { label: string; value: number }[] = [];
+        for (let weekKey of Object.keys(WEEK_MAP_CN)) {
+          let weekName: string = WEEK_MAP_CN[weekKey];
+          options.push({
+            value: Number.parseInt(weekKey),
+            label: weekName,
+          });
+        }
+        return options;
+      });
+
+      const typeRangeSelectAttrs = computed(() => ({
+        class: ['w80'],
+        disabled: setup.typeRangeAttrs.value.disabled,
+      }));
+
+      const typeLoopSelectAttrs = computed(() => ({
+        class: ['w80'],
+        disabled: setup.typeLoopAttrs.value.disabled,
+      }));
+
+      watch(
+        () => props.day,
+        () => {
+          setup.updateValue(disabledChoice.value ? '?' : setup.computeValue.value);
+        }
+      );
+
+      return {
+        ...setup,
+        weekOptions,
+        typeLoopSelectAttrs,
+        typeRangeSelectAttrs,
+        WEEK_MAP_CN,
+        WEEK_MAP_EN,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/YearUI.vue b/src/components/Form/src/jeecg/components/JEasyCron/tabs/YearUI.vue
new file mode 100644
index 0000000..2be7972
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/YearUI.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :class="`${prefixCls}-config-list`">
+    <a-radio-group v-model:value="type">
+      <div class="item">
+        <a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每年</a-radio>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
+        <span> 从 </span>
+        <InputNumber class="w80" v-model:value="valueRange.start" v-bind="typeRangeAttrs" />
+        <span> 年 至 </span>
+        <InputNumber class="w80" v-model:value="valueRange.end" v-bind="typeRangeAttrs" />
+        <span> 年 </span>
+      </div>
+      <div class="item">
+        <a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
+        <span> 从 </span>
+        <InputNumber class="w80" v-model:value="valueLoop.start" v-bind="typeLoopAttrs" />
+        <span> 年开始，间隔 </span>
+        <InputNumber class="w80" v-model:value="valueLoop.interval" v-bind="typeLoopAttrs" />
+        <span> 年 </span>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+  import { useTabProps, useTabEmits, useTabSetup } from './useTabMixin';
+
+  export default defineComponent({
+    name: 'YearUI',
+    components: { InputNumber },
+    props: useTabProps({
+      defaultValue: '*',
+    }),
+    emits: useTabEmits(),
+    setup(props, context) {
+      const nowYear = new Date().getFullYear();
+      return useTabSetup(props, context, {
+        defaultValue: '*',
+        minValue: 0,
+        valueRange: { start: nowYear, end: nowYear + 100 },
+        valueLoop: { start: nowYear, interval: 1 },
+      });
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/tabs/useTabMixin.ts b/src/components/Form/src/jeecg/components/JEasyCron/tabs/useTabMixin.ts
new file mode 100644
index 0000000..291ca19
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/tabs/useTabMixin.ts
@@ -0,0 +1,199 @@
+// 主要用于日和星期的互斥使用
+import { computed, inject, reactive, ref, unref, watch } from 'vue';
+import { propTypes } from '/@/utils/propTypes';
+
+export enum TypeEnum {
+  unset = 'UNSET',
+  every = 'EVERY',
+  range = 'RANGE',
+  loop = 'LOOP',
+  work = 'WORK',
+  last = 'LAST',
+  specify = 'SPECIFY',
+}
+
+// use 公共 props
+export function useTabProps(options) {
+  const defaultValue = options?.defaultValue ?? '?';
+  return {
+    value: propTypes.string.def(defaultValue),
+    disabled: propTypes.bool.def(false),
+    ...options?.props,
+  };
+}
+
+// use 公共 emits
+export function useTabEmits() {
+  return ['change', 'update:value'];
+}
+
+// use 公共 setup
+export function useTabSetup(props, context, options) {
+  const { emit } = context;
+  const prefixCls = inject('prefixCls');
+  const defaultValue = ref(options?.defaultValue ?? '?');
+  // 类型
+  const type = ref(options.defaultType ?? TypeEnum.every);
+  const valueList = ref<any[]>([]);
+  // 对于不同的类型，所定义的值也有所不同
+  const valueRange = reactive(options.valueRange);
+  const valueLoop = reactive(options.valueLoop);
+  const valueWeek = reactive(options.valueWeek);
+  const valueWork = ref(options.valueWork);
+  const maxValue = ref(options.maxValue);
+  const minValue = ref(options.minValue);
+
+  // 根据不同的类型计算出的value
+  const computeValue = computed(() => {
+    let valueArray: any[] = [];
+    switch (type.value) {
+      case TypeEnum.unset:
+        valueArray.push('?');
+        break;
+      case TypeEnum.every:
+        valueArray.push('*');
+        break;
+      case TypeEnum.range:
+        valueArray.push(`${valueRange.start}-${valueRange.end}`);
+        break;
+      case TypeEnum.loop:
+        valueArray.push(`${valueLoop.start}/${valueLoop.interval}`);
+        break;
+      case TypeEnum.work:
+        valueArray.push(`${valueWork.value}W`);
+        break;
+      case TypeEnum.last:
+        valueArray.push('L');
+        break;
+      case TypeEnum.specify:
+        if (valueList.value.length === 0) {
+          valueList.value.push(minValue.value);
+        }
+        valueArray.push(valueList.value.join(','));
+        break;
+      default:
+        valueArray.push(defaultValue.value);
+        break;
+    }
+    return valueArray.length > 0 ? valueArray.join('') : defaultValue.value;
+  });
+  // 指定值范围区间，介于最小值和最大值之间
+  const specifyRange = computed(() => {
+    let range: number[] = [];
+    if (maxValue.value != null) {
+      for (let i = minValue.value; i <= maxValue.value; i++) {
+        range.push(i);
+      }
+    }
+    return range;
+  });
+
+  watch(
+    () => props.value,
+    (val) => {
+      if (val !== computeValue.value) {
+        parseValue(val);
+      }
+    },
+    { immediate: true }
+  );
+
+  watch(computeValue, (v) => updateValue(v));
+
+  function updateValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+
+  /**
+   * parseValue
+   * @param value
+   */
+  function parseValue(value) {
+    if (value === computeValue.value) {
+      return;
+    }
+    try {
+      if (!value || value === defaultValue.value) {
+        type.value = TypeEnum.every;
+      } else if (value.indexOf('?') >= 0) {
+        type.value = TypeEnum.unset;
+      } else if (value.indexOf('-') >= 0) {
+        type.value = TypeEnum.range;
+        const values = value.split('-');
+        if (values.length >= 2) {
+          valueRange.start = parseInt(values[0]);
+          valueRange.end = parseInt(values[1]);
+        }
+      } else if (value.indexOf('/') >= 0) {
+        type.value = TypeEnum.loop;
+        const values = value.split('/');
+        if (values.length >= 2) {
+          valueLoop.start = value[0] === '*' ? 0 : parseInt(values[0]);
+          valueLoop.interval = parseInt(values[1]);
+        }
+      } else if (value.indexOf('W') >= 0) {
+        type.value = TypeEnum.work;
+        const values = value.split('W');
+        if (!values[0] && !isNaN(values[0])) {
+          valueWork.value = parseInt(values[0]);
+        }
+      } else if (value.indexOf('L') >= 0) {
+        type.value = TypeEnum.last;
+      } else if (value.indexOf(',') >= 0 || !isNaN(value)) {
+        type.value = TypeEnum.specify;
+        valueList.value = value.split(',').map((item) => parseInt(item));
+      } else {
+        type.value = TypeEnum.every;
+      }
+    } catch (e) {
+      type.value = TypeEnum.every;
+    }
+  }
+
+  const beforeRadioAttrs = computed(() => ({
+    class: ['choice'],
+    disabled: props.disabled || unref(options.disabled),
+  }));
+  const inputNumberAttrs = computed(() => ({
+    class: ['w60'],
+    max: maxValue.value,
+    min: minValue.value,
+    precision: 0,
+  }));
+  const typeRangeAttrs = computed(() => ({
+    disabled: type.value !== TypeEnum.range || props.disabled || unref(options.disabled),
+    ...inputNumberAttrs.value,
+  }));
+  const typeLoopAttrs = computed(() => ({
+    disabled: type.value !== TypeEnum.loop || props.disabled || unref(options.disabled),
+    ...inputNumberAttrs.value,
+  }));
+  const typeSpecifyAttrs = computed(() => ({
+    disabled: type.value !== TypeEnum.specify || props.disabled || unref(options.disabled),
+    class: ['list-check-item'],
+  }));
+
+  return {
+    type,
+    TypeEnum,
+    prefixCls,
+    defaultValue,
+    valueRange,
+    valueLoop,
+    valueWeek,
+    valueList,
+    valueWork,
+    maxValue,
+    minValue,
+    computeValue,
+    specifyRange,
+    updateValue,
+    parseValue,
+    beforeRadioAttrs,
+    inputNumberAttrs,
+    typeRangeAttrs,
+    typeLoopAttrs,
+    typeSpecifyAttrs,
+  };
+}
diff --git a/src/components/Form/src/jeecg/components/JEasyCron/validator.ts b/src/components/Form/src/jeecg/components/JEasyCron/validator.ts
new file mode 100644
index 0000000..308f1e8
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEasyCron/validator.ts
@@ -0,0 +1,48 @@
+import CronParser from 'cron-parser';
+import type { ValidatorRule } from 'ant-design-vue/lib/form/interface';
+
+const cronRule: ValidatorRule = {
+  validator({}, value) {
+    // 没填写就不校验
+    if (!value) {
+      return Promise.resolve();
+    }
+    const values: string[] = value.split(' ').filter((item) => !!item);
+    if (values.length > 7) {
+      return Promise.reject('Cron表达式最多7项！');
+    }
+    // 检查第7项
+    let val: string = value;
+    if (values.length === 7) {
+      const year = values[6];
+      if (year !== '*' && year !== '?') {
+        let yearValues: string[] = [];
+        if (year.indexOf('-') >= 0) {
+          yearValues = year.split('-');
+        } else if (year.indexOf('/')) {
+          yearValues = year.split('/');
+        } else {
+          yearValues = [year];
+        }
+        // 判断是否都是数字
+        const checkYear = yearValues.some((item) => isNaN(Number(item)));
+        if (checkYear) {
+          return Promise.reject('Cron表达式参数[年]错误：' + year);
+        }
+      }
+      // 取其中的前六项
+      val = values.slice(0, 6).join(' ');
+    }
+    // 6位 没有年
+    // 5位没有秒、年
+    try {
+      const iter = CronParser.parseExpression(val);
+      iter.next();
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject('Cron表达式错误：' + e);
+    }
+  },
+};
+
+export default cronRule.validator;
diff --git a/src/components/Form/src/jeecg/components/JEditor.vue b/src/components/Form/src/jeecg/components/JEditor.vue
new file mode 100644
index 0000000..d8a8626
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEditor.vue
@@ -0,0 +1,46 @@
+<template>
+  <Tinymce v-bind="bindProps" @change="onChange" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, nextTick } from 'vue';
+
+  import { Tinymce } from '/@/components/Tinymce';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Form } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'JEditor',
+    // 不将 attrs 的属性绑定到 html 标签上
+    inheritAttrs: false,
+    components: { Tinymce },
+    props: {
+      value: propTypes.string.def(''),
+      disabled: propTypes.bool.def(false),
+      //是否聚焦
+      autoFocus: propTypes.bool.def(true),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit, attrs }) {
+      // 合并 props 和 attrs
+      const bindProps = computed(() => Object.assign({}, props, attrs));
+      const formItemContext = Form.useInjectFormItemContext();
+      // value change 事件
+      function onChange(value) {
+        emit('change', value);
+        emit('update:value', value);
+        // 代码逻辑说明: 【QQYUN-9110】组件有值校验没消失
+        nextTick(() => {
+          formItemContext?.onFieldChange();
+        });
+      }
+
+      return {
+        bindProps,
+        onChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components/Form/src/jeecg/components/JEllipsis.vue b/src/components/Form/src/jeecg/components/JEllipsis.vue
new file mode 100644
index 0000000..fed14ac
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JEllipsis.vue
@@ -0,0 +1,21 @@
+<template>
+  <a-tooltip placement="topLeft">
+    <template #title>
+      <span>{{ value }}</span>
+    </template>
+    {{ showText }}
+  </a-tooltip>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const props = defineProps({
+    value: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.array]),
+    length: propTypes.number.def(25),
+  });
+  //显示的文本
+  const showText = computed(() =>
+    props.value ? (props.value.length > props.length ? props.value.slice(0, props.length) + '...' : props.value) : props.value
+  );
+</script>
diff --git a/src/components/Form/src/jeecg/components/JFormContainer.vue b/src/components/Form/src/jeecg/components/JFormContainer.vue
new file mode 100644
index 0000000..6fe2398
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JFormContainer.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :class="disabled ? 'jeecg-form-container-disabled' : ''">
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'JFormContainer',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+  });
+</script>
+
+<style lang="less">
+  .jeecg-form-container-disabled {
+    cursor: not-allowed;
+
+    fieldset[disabled] {
+      -ms-pointer-events: none;
+      pointer-events: none;
+    }
+
+    .ant-select {
+      -ms-pointer-events: none;
+      pointer-events: none;
+    }
+
+    .ant-upload-select {
+      display: none;
+    }
+
+    .ant-upload-list {
+      cursor: grabbing;
+    }
+
+    fieldset[disabled]{
+      .anticon-delete{
+        display: none !important;
+      }
+    }
+  }
+
+  .jeecg-form-container-disabled fieldset[disabled] .ant-upload-list {
+    -ms-pointer-events: auto !important;
+    pointer-events: auto !important;
+  }
+
+  .jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete,
+  .jeecg-form-container-disabled .ant-upload-list-item .anticon-close {
+    display: none;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JImageUpload.vue b/src/components/Form/src/jeecg/components/JImageUpload.vue
new file mode 100644
index 0000000..4292170
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JImageUpload.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      :listType="listType"
+      accept="image/*"
+      :multiple="multiple"
+      :action="uploadUrl"
+      :headers="headers"
+      :data="{ biz: bizPath }"
+      v-model:fileList="uploadFileList"
+      :beforeUpload="beforeUpload"
+      :disabled="disabled"
+      @change="handleChange"
+      @preview="handlePreview"
+    >
+      <div v-if="uploadVisible">
+        <div v-if="listType == 'picture-card'">
+          <LoadingOutlined v-if="loading" />
+          <UploadOutlined v-else />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+        <a-button v-if="listType == 'picture'" :disabled="disabled">
+          <UploadOutlined></UploadOutlined>
+          {{ text }}
+        </a-button>
+      </div>
+    </a-upload>
+    <a-modal :width="previewWidth" :open="previewVisible" :footer="null" @cancel="handleCancel()">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, nextTick } from 'vue';
+  import { LoadingOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getFileAccessHttpUrl, getHeaders, getRandom } from '/@/utils/common/compUtils';
+  import { uploadUrl as systemUploadUrl } from '/@/api/common/api';
+  import { getToken } from '/@/utils/auth';
+
+  const { createMessage, createErrorModal } = useMessage();
+  export default defineComponent({
+    name: 'JImageUpload',
+    components: { LoadingOutlined, UploadOutlined },
+    inheritAttrs: false,
+    props: {
+      //绑定值
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      //按钮文本
+      listType: {
+        type: String,
+        required: false,
+        default: 'picture-card',
+      },
+      //按钮文本
+      text: {
+        type: String,
+        required: false,
+        default: '上传',
+      },
+      //这个属性用于控制文件上传的业务路径
+      bizPath: {
+        type: String,
+        required: false,
+        default: 'temp',
+      },
+      //是否禁用
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      //上传数量
+      fileMax: {
+        type: Number,
+        required: false,
+        default: 1,
+      },
+      uploadUrl: {
+        type: String,
+        default: systemUploadUrl,
+      },
+      previewWidth: {
+        type: Number,
+        required: false,
+        default: 520,
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>([]);
+      const attrs = useAttrs();
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //获取文件名
+      const getFileName = (path) => {
+        if (path.lastIndexOf('\\') >= 0) {
+          let reg = new RegExp('\\\\', 'g');
+          path = path.replace(reg, '/');
+        }
+        return path.substring(path.lastIndexOf('/') + 1);
+      };
+      //token
+      const headers = getHeaders();
+      //上传状态
+      const loading = ref<boolean>(false);
+      //是否是初始化加载
+      const initTag = ref<boolean>(true);
+      //文件列表
+      let uploadFileList = ref<any[]>([]);
+      //预览图
+      const previewImage = ref<string | undefined>('');
+      //预览框状态
+      const previewVisible = ref<boolean>(false);
+
+      //计算是否开启多图上传
+      const multiple = computed(() => {
+        return props['fileMax'] > 1 || props['fileMax'] === 0;
+      });
+
+      //计算是否可以继续上传
+      const uploadVisible = computed(() => {
+        if (props['fileMax'] === 0) {
+          return true;
+        }
+        return uploadFileList.value.length < props['fileMax'];
+      });
+
+      /**
+       * 监听value变化
+       */
+      watch(
+        () => props.value,
+        (val, prevCount) => {
+         // 代码逻辑说明: 【issues/556】JImageUpload组件value赋初始值没显示图片------------
+            if (val && val instanceof Array) {
+            val = val.join(',');
+          }
+          if (initTag.value == true) {
+            initFileList(val);
+          }
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 初始化文件列表
+       */
+      function initFileList(paths) {
+        if (!paths || paths.length == 0) {
+          uploadFileList.value = [];
+          return;
+        }
+        let files = [];
+        let arr = paths.split(',');
+        arr.forEach((value) => {
+          let url = getFileAccessHttpUrl(value);
+          files.push({
+            uid: getRandom(10),
+            name: getFileName(value),
+            status: 'done',
+            url: url,
+            response: {
+              status: 'history',
+              message: value,
+            },
+          });
+        });
+        uploadFileList.value = files;
+      }
+
+      /**
+       * 上传前校验
+       */
+      function beforeUpload(file) {
+        let fileType = file.type;
+        if (fileType.indexOf('image') < 0) {
+          createMessage.info('请上传图片');
+          return false;
+        }
+      }
+      /**
+       * 文件上传结果回调
+       */
+      function handleChange({ file, fileList, event }) {
+        initTag.value = false;
+        // uploadFileList.value = fileList;
+        if (file.status === 'error') {
+          createMessage.error(`${file.name} 上传失败.`);
+        }
+        // 代码逻辑说明: 【TV360X-1640】上传图片大小超出限制显示优化
+        if (file.status === 'done' && file.response.success === false) {
+          const failIndex = uploadFileList.value.findIndex((item) => item.uid === file.uid);
+          if (failIndex != -1) {
+            uploadFileList.value.splice(failIndex, 1);
+          }
+          createMessage.warning(file.response.message);
+          return;
+        }
+        let fileUrls = [];
+        let noUploadingFileCount = 0;
+        if (file.status != 'uploading') {
+          fileList.forEach((file) => {
+            if (file.status === 'done') {
+              fileUrls.push(file.response.message);
+            }
+            if (file.status != 'uploading') {
+              noUploadingFileCount++;
+            }
+          });
+          if (file.status === 'removed') {
+            handleDelete(file);
+          }
+          if (noUploadingFileCount == fileList.length) {
+            state.value = fileUrls.join(',');
+            emit('update:value', fileUrls.join(','));
+            // 代码逻辑说明: [issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
+            nextTick(() => {
+              initTag.value = true;
+            });
+          }
+        }
+      }
+
+      /**
+       * 删除图片
+       */
+      function handleDelete(file) {
+        //如有需要新增 删除逻辑
+        console.log(file);
+      }
+
+      /**
+       * 预览图片
+       */
+      function handlePreview(file) {
+        previewImage.value = file.url || file.thumbUrl;
+        previewVisible.value = true;
+      }
+
+      function getAvatarView() {
+        if (uploadFileList.length > 0) {
+          let url = uploadFileList[0].url;
+          return getFileAccessHttpUrl(url, null);
+        }
+      }
+
+      function handleCancel() {
+        previewVisible.value = false;
+      }
+
+      return {
+        state,
+        attrs,
+        previewImage,
+        previewVisible,
+        uploadFileList,
+        multiple,
+        headers,
+        loading,
+        beforeUpload,
+        uploadVisible,
+        handlePreview,
+        handleCancel,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .ant-upload-select-picture-card i {
+    font-size: 32px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JImportModal.vue b/src/components/Form/src/jeecg/components/JImportModal.vue
new file mode 100644
index 0000000..df2ff16
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JImportModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="register" title="导入EXCEL" :width="600" @cancel="handleClose" :confirmLoading="uploading" destroyOnClose>
+      <!--是否校验-->
+      <div style="margin: 0 5px 5px" v-if="online">
+        <span style="display: inline-block; height: 32px; line-height: 32px; vertical-align: middle">是否开启校验:</span>
+        <span style="margin-left: 6px">
+          <a-switch :checked="validateStatus == 1" @change="handleChangeValidateStatus" checked-children="是" un-checked-children="否" />
+        </span>
+      </div>
+      <!--上传-->
+      <a-upload name="file" accept=".xls,.xlsx" :multiple="true" :fileList="fileList" @remove="handleRemove" :beforeUpload="beforeUpload">
+        <a-button preIcon="ant-design:upload-outlined">选择导入文件</a-button>
+      </a-upload>
+      <!--页脚-->
+      <template #footer>
+        <a-button @click="handleClose">关闭</a-button>
+        <a-button type="primary" @click="handleImport" :disabled="uploadDisabled" :loading="uploading">{{
+          uploading ? '上传中...' : '开始上传'
+        }}</a-button>
+      </template>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref, watchEffect, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isObject } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JImportModal',
+    components: {
+      BasicModal,
+    },
+    props: {
+      url: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      biz: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      //是否online导入
+      online: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+    },
+    emits: ['ok', 'register'],
+    setup(props, { emit, refs }) {
+      const { createMessage, createWarningModal } = useMessage();
+      //注册弹框
+      const [register, { closeModal }] = useModalInner((data) => {
+        reset(data);
+      });
+      const glob = useGlobSetting();
+      const attrs = useAttrs();
+      const uploading = ref(false);
+      //文件集合
+      const fileList = ref([]);
+      //上传url
+      const uploadAction = ref('');
+      const foreignKeys = ref('');
+      //校验状态
+      const validateStatus = ref(0);
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      //监听url
+      watchEffect(() => {
+        props.url && (uploadAction.value = `${glob.uploadUrl}${props.url}`);
+      });
+      //按钮disabled状态
+      const uploadDisabled = computed(() => !(unref(fileList).length > 0));
+
+      //关闭方法
+      function handleClose() {
+        // 代码逻辑说明: 【QQYUN-7477】关闭弹窗清空内容（之前上传失败关闭后不会清除）
+        closeModal();
+        reset();
+      }
+
+      //校验状态切换
+      function handleChangeValidateStatus(checked) {
+        validateStatus.value = !!checked ? 1 : 0;
+      }
+
+      //移除上传文件
+      function handleRemove(file) {
+        const index = unref(fileList).indexOf(file);
+        const newFileList = unref(fileList).slice();
+        newFileList.splice(index, 1);
+        fileList.value = newFileList;
+      }
+
+      //上传前处理
+      function beforeUpload(file) {
+        fileList.value = [...unref(fileList), file];
+        return false;
+      }
+
+      //文件上传
+      function handleImport() {
+        let { biz, online } = props;
+        const formData = new FormData();
+        if (biz) {
+          formData.append('isSingleTableImport', biz);
+        }
+        if (unref(foreignKeys) && unref(foreignKeys).length > 0) {
+          formData.append('foreignKeys', unref(foreignKeys));
+        }
+        // 代码逻辑说明: 【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权导入从表数据
+        if (isObject(foreignKeys.value)) {
+          formData.append('foreignKeys', JSON.stringify(foreignKeys.value));
+        }
+        if (!!online) {
+          formData.append('validateStatus', unref(validateStatus));
+        }
+        unref(fileList).forEach((file) => {
+          formData.append('files[]', file);
+        });
+        uploading.value = true;
+
+        //TODO 请求怎样处理的问题
+        let headers = {
+          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
+        };
+        defHttp.post({ url: props.url, params: formData, headers }, { isTransformResponse: false }).then((res) => {
+          uploading.value = false;
+          if (res.success) {
+            if (res.code == 201) {
+              errorTip(res.message, res.result);
+            } else {
+              createMessage.success(res.message);
+            }
+            handleClose();
+            reset();
+            emit('ok');
+          } else {
+            createMessage.warning(res.message);
+          }
+        }).catch(() => {
+          uploading.value = false;
+        });
+      }
+
+      //错误信息提示
+      function errorTip(tipMessage, fileUrl) {
+        let href = glob.uploadUrl + fileUrl;
+        createWarningModal({
+          title: '导入成功,但是有错误数据!',
+          centered: false,
+          content: `<div>
+                        <span>${tipMessage}</span><br/>
+                        <span>具体详情请<a href = ${href} target="_blank"> 点击下载 </a> </span>
+                      </div>`,
+        });
+      }
+
+      //重置
+      function reset(arg?) {
+        fileList.value = [];
+        uploading.value = false;
+        foreignKeys.value = arg;
+        validateStatus.value = 0;
+      }
+
+      return {
+        register,
+        getBindValue,
+        uploadDisabled,
+        fileList,
+        uploading,
+        validateStatus,
+        handleClose,
+        handleChangeValidateStatus,
+        handleRemove,
+        beforeUpload,
+        handleImport,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/JInput.vue b/src/components/Form/src/jeecg/components/JInput.vue
new file mode 100644
index 0000000..dbb1d39
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JInput.vue
@@ -0,0 +1,110 @@
+<template>
+  <a-input v-bind="getBindValue" v-model:value="showText" @input="backValue"></a-input>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, ref, watchEffect, unref, watch, computed } from 'vue';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { propTypes } from '/@/utils/propTypes';
+  import { JInputTypeEnum } from '/@/enums/jeecgEnum.ts';
+  import { omit } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'JInput',
+    inheritAttrs: false,
+    props: {
+      value: propTypes.string.def(''),
+      type: propTypes.string.def(JInputTypeEnum.JINPUT_QUERY_LIKE),
+      placeholder: propTypes.string.def(''),
+      trim: propTypes.bool.def(false),
+      class: propTypes.string,
+      style: propTypes.object,
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const attrs = useAttrs();
+      //表单值
+      const showText = ref('');
+      //绑定属性
+      const getBindValue = computed(() => {
+        return omit(Object.assign({}, unref(props), unref(attrs)), ['value']);
+      });
+      //监听类型变化
+      watch(
+        () => props.type,
+        (val) => {
+          val && backValue({ target: { value: unref(showText) } });
+        }
+      );
+      //监听value变化
+      watch(
+        () => props.value,
+        () => {
+          initVal();
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        if (!props.value) {
+          showText.value = '';
+        } else {
+          let text = props.value;
+          switch (props.type) {
+            case JInputTypeEnum.JINPUT_QUERY_LIKE:
+              //修复路由传参的值传送到jinput框被前后各截取了一位 #1336
+              if (text.indexOf('*') != -1) {
+                text = text.substring(1, text.length - 1);
+              }
+              break;
+            case JInputTypeEnum.JINPUT_QUERY_NE:
+              text = text.substring(1);
+              break;
+            case JInputTypeEnum.JINPUT_QUERY_GE:
+              text = text.substring(2);
+              break;
+            case JInputTypeEnum.JINPUT_QUERY_LE:
+              text = text.substring(2);
+              break;
+            default:
+          }
+          showText.value = text;
+        }
+      }
+
+      /**
+       * 返回值
+       */
+      function backValue(e) {
+        let text = e?.target?.value ?? '';
+        if (text && !!props.trim) {
+          text = text.trim();
+        }
+        switch (props.type) {
+          case JInputTypeEnum.JINPUT_QUERY_LIKE:
+            text = '*' + text + '*';
+            break;
+          case JInputTypeEnum.JINPUT_QUERY_NE:
+            text = '!' + text;
+            break;
+          case JInputTypeEnum.JINPUT_QUERY_GE:
+            text = '>=' + text;
+            break;
+          case JInputTypeEnum.JINPUT_QUERY_LE:
+            text = '<=' + text;
+            break;
+          default:
+        }
+        emit('change', text);
+        emit('update:value', text);
+      }
+
+      return { showText, attrs, getBindValue, backValue };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/Form/src/jeecg/components/JInputPop.vue b/src/components/Form/src/jeecg/components/JInputPop.vue
new file mode 100644
index 0000000..dc2da71
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JInputPop.vue
@@ -0,0 +1,125 @@
+<template>
+  <a-popover
+    trigger="contextmenu"
+    v-model:open="visible"
+    :overlayClassName="`${prefixCls}-popover`"
+    :getPopupContainer="getPopupContainer"
+    :placement="position"
+  >
+    <template #title>
+      <span :class="title ? 'title' : 'emptyTitle'">{{ title }}</span>
+      <span style="float: right" title="关闭">
+        <Icon icon="ant-design:close-outlined" @click="visible = false" />
+      </span>
+    </template>
+    <template #content>
+      <a-textarea ref="textareaRef" :value="innerValue" :disabled="disabled" :style="textareaStyle" v-bind="attrs" @input="onInputChange" @blur="onInputBlur" />
+    </template>
+    <a-input :class="`${prefixCls}-input`" :value="innerValue" :disabled="disabled" v-bind="attrs" @change="onInputChange" @blur="onInputBlur">
+      <template #suffix>
+        <Icon icon="ant-design:fullscreen-outlined" @click.stop="onShowPopup" />
+      </template>
+    </a-input>
+  </a-popover>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, ref, watch } from 'vue';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const { prefixCls } = useDesign('j-input-popup');
+  const props = defineProps({
+    // v-model:value
+    value: propTypes.string.def(''),
+    title: propTypes.string.def(''),
+    // 弹出框显示位置
+    position: propTypes.string.def('right'),
+    width: propTypes.number.def(300),
+    height: propTypes.number.def(150),
+    disabled: propTypes.bool.def(false),
+    // 弹出框挂载的元素ID
+    popContainer: propTypes.oneOfType([propTypes.string, propTypes.func]).def(''),
+  });
+  const attrs = useAttrs();
+  const emit = defineEmits(['change', 'update:value', 'blur']);
+
+  const visible = ref<boolean>(false);
+  const innerValue = ref<string>('');
+  // textarea ref对象
+  const textareaRef = ref();
+  // textarea 样式
+  const textareaStyle = computed(() => ({
+    height: `${props.height}px`,
+    width: `${props.width}px`,
+  }));
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (value && value.length > 0) {
+        innerValue.value = value;
+      }
+    },
+    { immediate: true }
+  );
+
+  function onInputChange(event) {
+    innerValue.value = event.target.value;
+    emitValue(innerValue.value);
+  }
+
+  async function onShowPopup() {
+    visible.value = true;
+    await nextTick();
+    textareaRef.value?.focus();
+  }
+
+  // 获取弹出框挂载的元素
+  function getPopupContainer(node) {
+    if (!props.popContainer) {
+      return node?.parentNode;
+    } else if (typeof props.popContainer === 'function') {
+      return props.popContainer(node);
+    } else {
+      return document.getElementById(props.popContainer);
+    }
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+
+  const onInputBlur = (event) => {
+    emit('blur', event);
+  }
+</script>
+
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-j-input-popup';
+
+  .@{prefix-cls} {
+    &-popover {
+      // 代码逻辑说明: 【TV360X-144】jVxetable中的多行文本组件当title没有时去掉多余的线
+      .ant-popover-title:has(.emptyTitle) {
+        border-bottom: none;
+      }
+    }
+
+    &-input {
+      .app-iconify {
+        cursor: pointer;
+        color: #666666;
+        transition: color 0.3s;
+
+        &:hover {
+          color: black;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JInputSelect.vue b/src/components/Form/src/jeecg/components/JInputSelect.vue
new file mode 100644
index 0000000..f537a3c
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JInputSelect.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="JInputSelect">
+    <a-input-group compact>
+      <a-select
+        v-bind="$attrs"
+        :placeholder="selectPlaceholder"
+        v-if="selectLocation === 'left'"
+        v-model:value="selectVal"
+        @change="handleSelectChange"
+      >
+        <a-select-option v-for="item in options" :key="item.value">{{ item.label }}</a-select-option>
+      </a-select>
+      <a-input v-bind="$attrs" :placeholder="inputPlaceholder" v-model:value="inputVal" @change="handleInputChange" />
+      <a-select
+        v-bind="$attrs"
+        :placeholder="selectPlaceholder"
+        v-if="selectLocation === 'right'"
+        v-model:value="selectVal"
+        @change="handleSelectChange"
+        :style="{width:props.selectWidth}"
+      >
+        <a-select-option v-for="item in options" :key="item.value">{{ item.label }}</a-select-option>
+      </a-select>
+    </a-input-group>
+  </div>
+</template>
+
+<script setup name="JInputSelect" lang="ts">
+  import { ref, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  const props = defineProps({
+    value: propTypes.string.def(''),
+    options: propTypes.array.def([]),
+    selectLocation: propTypes.oneOf(['left', 'right']).def('right'),
+    selectPlaceholder: propTypes.string.def(''),
+    inputPlaceholder: propTypes.string.def(''),
+    selectWidth:propTypes.string.def('auto'),
+  });
+  const emit = defineEmits(['update:value', 'change']);
+  const selectVal = ref<string>();
+  const inputVal = ref<string>();
+
+  
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setSelectValByInputVal(val);
+    emits(val);
+  };
+  const handleSelectChange = (val) => {
+    inputVal.value = val;
+    emits(val);
+  };
+  const setSelectValByInputVal = (val) => {
+    const findItem = props.options.find((item) => item.value === val);
+    if (findItem) {
+      selectVal.value = val;
+    } else {
+      selectVal.value = undefined;
+    }
+  }
+  watchEffect(() => {
+    inputVal.value = props.value;
+    setSelectValByInputVal(props.value);
+  });
+  const emits = (val) => {
+    emit('update:value', val);
+    emit('change', val);
+  };
+</script>
+
+<style lang="less" scoped>
+  .JInputSelect {
+    .ant-input-group {
+      display: flex;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JLinkTableCard/JLinkTableCard.vue b/src/components/Form/src/jeecg/components/JLinkTableCard/JLinkTableCard.vue
new file mode 100644
index 0000000..7ea60c4
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JLinkTableCard/JLinkTableCard.vue
@@ -0,0 +1,375 @@
+<template>
+  <div ref="tableLinkCardRef">
+    <div class="table-link-card">
+      <div style="width: 100%; height: 100%">
+        <div class="card-button" v-if="showButton">
+          <a-button @click="handleAddRecord"><PlusOutlined />记 录</a-button>
+        </div>
+
+        <a-row>
+          <a-col :span="fixedSpan ? fixedSpan : itemSpan" v-for="(record, index) in selectRecords" :key="index">
+            <div class="card-item" :class="{ 'disabled-chunk': detail == true }">
+              <!-- -->
+              <div class="card-item-left" :class="{ 'show-right-image': getImageSrc(record) }">
+                <span class="card-delete" v-if="disabled == false">
+                  <minus-circle-filled @click="(e) => handleDeleteRecord(e, index)" />
+                </span>
+                <div class="card-inner">
+                  <div class="card-main-content">{{ getMainContent(record) }}</div>
+                  <div class="other-content">
+                    <a-row>
+                      <a-col :span="columnSpan" v-for="(col, cIndex) in realShowColumns" :key="cIndex">
+                        <span class="label ellipsis">{{ col.title }}</span>
+                        <span class="text ellipsis">{{ record[col.dataIndex] }}</span>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card-item-image" v-if="getImageSrc(record)">
+                <img v-if="getImageSrc(record)" :src="getImageSrc(record)" @error="handleImageError" />
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+    <LinkTableListModal @register="registerListModal" :multi="multi" :id="popTableName" @success="addCard" />
+  </div>
+</template>
+
+<script>
+  import { propTypes } from '/@/utils/propTypes';
+  import { PlusOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
+  import { computed, ref, watch, onMounted } from 'vue';
+  import { useLinkTable } from './hooks/useLinkTable';
+  import { useModal } from '/@/components/Modal';
+  import placeholderImage from '/@/assets/images/placeholderImage.png';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+
+  export default {
+    name: 'JLinkTableCard',
+    inheritAttrs: false,
+    props: {
+      // value字段
+      valueField: propTypes.string.def(''),
+      // 文本字段
+      textField: propTypes.string.def(''),
+      // 关联表名
+      tableName: propTypes.string.def(''),
+      // 是否多选
+      multi: propTypes.bool.def(false),
+      value: propTypes.oneOfType([propTypes.string, propTypes.number]),
+      // ["表单字段,表字典字段","表单字段,表字典字段"]
+      linkFields: propTypes.array.def([]),
+      //是否是禁用页面
+      disabled: propTypes.bool.def(false),
+      // 是否是detail页面
+      detail: propTypes.bool.def(false),
+      // 图片字段
+      imageField: propTypes.string.def(''),
+    },
+    components: {
+      PlusOutlined,
+      MinusCircleFilled,
+      LinkTableListModal: createAsyncComponent(() => import('./components/LinkTableListModal.vue'), { loading: true }),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const popTableName = computed(() => {
+        return props.tableName;
+      });
+      //注册model
+      const [registerListModal, { openModal: openListModal }] = useModal();
+      const selectValue = ref([]);
+      const selectRecords = ref([]);
+      const tableLinkCardRef = ref(null);
+      const fixedSpan = ref(0);
+
+      const showButton = computed(() => {
+        if (props.disabled == true) {
+          return false;
+        }
+        if (props.multi === false) {
+          //单选且有值
+          if (selectRecords.value.length > 0) {
+            return false;
+          }
+        }
+        return true;
+      });
+
+      const {
+        auths,
+        otherColumns,
+        realShowColumns,
+        tableColumns,
+        textFieldArray,
+        transData,
+        loadOne,
+        compareData,
+        formatData,
+        initFormData,
+        getImageSrc,
+        showImage,
+      } = useLinkTable(props);
+
+      const itemSpan = computed(() => {
+        if (props.multi === true) {
+          return 12;
+        }
+        return 24;
+      });
+
+      const columnSpan = computed(() => {
+        if (props.multi === true) {
+          return 24;
+        }
+        return 12;
+      });
+
+      function getMainContent(record) {
+        if (record) {
+          if (textFieldArray.value.length > 0) {
+            let field = textFieldArray.value[0];
+            return record[field];
+          }
+        }
+      }
+
+      function prevent(e) {
+        e?.stopPropagation();
+        e?.preventDefault();
+      }
+
+
+      function handleAddRecord(e) {
+        prevent(e);
+        openListModal(true, {
+          // 代码逻辑说明: 【TV360X-43】修复关联记录可以添加重复数据
+          selectedRowKeys: selectRecords.value.map((item) => item.id),
+          selectedRows: [...selectRecords.value],
+        });
+      }
+
+      function addCard(data) {
+        // 代码逻辑说明: 【TV360X-43】修复关联记录可以添加重复数据
+        let arr = [];
+        for (let item of data) {
+          let temp = { ...item };
+          transData(temp);
+          arr.push(temp);
+        }
+        selectRecords.value = arr;
+        emitValue();
+      }
+
+      function updateCardData(formData) {
+        let arr = selectRecords.value;
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id === formData.id) {
+            let temp = { ...formData };
+            transData(temp);
+            arr.splice(i, 1, temp);
+          }
+        }
+        selectRecords.value = arr;
+        emitValue();
+      }
+
+      function handleDeleteRecord(e, index) {
+        prevent(e);
+        let temp = selectRecords.value;
+        if (temp && temp.length > index) {
+          temp.splice(index, 1);
+          selectRecords.value = temp;
+        }
+        emitValue();
+      }
+
+      function emitValue() {
+        let arr = selectRecords.value;
+        let values = [];
+        let formData = {};
+        let linkFieldArray = props.linkFields;
+        if (arr.length > 0) {
+          for (let i = 0; i < arr.length; i++) {
+            values.push(arr[i][props.valueField]);
+            initFormData(formData, linkFieldArray, arr[i]);
+          }
+        } else {
+          initFormData(formData, linkFieldArray);
+        }
+        let text = values.join(',');
+        formatData(formData);
+        emit('change', text, formData);
+        emit('update:value', text);
+      }
+
+      watch(
+        () => props.value,
+        async (val) => {
+          if (val) {
+            let flag = compareData(selectRecords.value, val);
+            if (flag === false) {
+              let arr = await loadOne(val);
+              selectRecords.value = arr;
+            }
+            //保证表单其他值回显成功
+            if (props.linkFields && props.linkFields.length > 0) {
+              emitValue();
+            }
+          } else {
+            selectRecords.value = [];
+          }
+        },
+        { immediate: true }
+      );
+
+      onMounted(() => {
+        // 代码逻辑说明: 【TV360X-281】分辨率小时关联记录文字被图片挤没了
+        if (tableLinkCardRef.value.offsetWidth < 250) {
+          fixedSpan.value = 24;
+        }
+      });
+      // 代码逻辑说明: 【TV360X-389】下拉和卡片关联记录图裂开给个默认图片
+      const handleImageError = (event) => {
+        event.target.src = placeholderImage;
+      };
+
+      return {
+        popTableName,
+        selectRecords,
+        otherColumns,
+        realShowColumns,
+        showButton,
+        selectValue,
+        handleAddRecord,
+        handleDeleteRecord,
+        getMainContent,
+        itemSpan,
+        columnSpan,
+        tableColumns,
+        addCard,
+        registerListModal,
+        updateCardData,
+        getImageSrc,
+        showImage,
+        auths,
+        tableLinkCardRef,
+        fixedSpan,
+        placeholderImage,
+        handleImageError,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .table-link-card {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    .card-button {
+      margin-bottom: 10px !important;
+    }
+    .card-item {
+      width: calc(100% - 10px);
+      display: inline-flex;
+      flex-direction: row;
+      margin: 0px 10px 10px 0px;
+      position: relative;
+      border-radius: 3px;
+      background-color: rgb(255, 255, 255);
+      box-shadow:
+        rgb(0 0 0 / 12%) 0px 1px 4px 0px,
+        rgb(0 0 0 / 12%) 0px 0px 2px 0px;
+      cursor: pointer;
+      &:hover {
+        /*  box-shadow: rgb(0 0 0 / 12%) 0px 4px 12px 0px, rgb(0 0 0 / 12%) 0px 0px 2px 0px;*/
+        .card-item-left {
+          .card-delete {
+            display: inline-block;
+          }
+        }
+      }
+
+      &.disabled-chunk {
+        background: none;
+        box-shadow: none;
+      }
+
+      .card-item-image {
+        width: 100px;
+        padding-right: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: hidden;
+        img {
+          width: 100%;
+        }
+      }
+
+      .card-item-left {
+        width: 100%;
+        display: inline-block;
+        &.show-right-image {
+          width: calc(100% - 100px);
+        }
+        .card-delete {
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          font-size: 16px;
+          color: #757575;
+          line-height: 1em;
+          overflow: hidden;
+          display: none;
+        }
+
+        .card-inner {
+          flex: 1 1 0%;
+          padding: 12px 16px;
+          overflow: hidden;
+          padding-bottom: 10px;
+
+          .card-main-content {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: top;
+            white-space: nowrap;
+            margin-bottom: 8px;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 20px;
+            color: rgb(51, 51, 51);
+          }
+
+          .other-content {
+            .text {
+              font-size: 12px !important;
+              display: inline-block;
+              width: 80%;
+            }
+            .label {
+              max-width: 160px;
+              color: rgb(158, 158, 158);
+              padding-right: 0.7em;
+              display: inline-block;
+            }
+            .ellipsis {
+              overflow: hidden;
+              height: 22px;
+              line-height: 22px;
+              text-overflow: ellipsis;
+              /*   vertical-align: top;*/
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JLinkTableCard/components/LinkTableListModal.vue b/src/components/Form/src/jeecg/components/JLinkTableCard/components/LinkTableListModal.vue
new file mode 100644
index 0000000..f61a4e9
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JLinkTableCard/components/LinkTableListModal.vue
@@ -0,0 +1,317 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :width="popModalFixedWidth"
+    :dialogStyle="{ top: '70px' }"
+    :bodyStyle="popBodyStyle"
+    :title="modalTitle"
+    wrapClassName="jeecg-online-pop-list-modal"
+  >
+    <template #footer>
+      <a-button key="back" @click="handleCancel">关闭</a-button>
+      <a-button :disabled="submitDisabled" key="submit" type="primary" @click="handleSubmit" :loading="submitLoading">确定</a-button>
+    </template>
+
+    <BasicTable ref="tableRef" @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-input-search v-model:value="searchText" @search="onSearch" placeholder="请输入关键词，按回车搜索" style="width: 240px" />
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)"> </TableAction>
+      </template>
+
+      <template #fileSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text)"> 下载 </a-button>
+      </template>
+
+      <template #imgSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+        <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+      </template>
+
+      <template #htmlSlot="{ text }">
+        <div v-html="text"></div>
+      </template>
+
+      <template #pcaSlot="{ text, column }">
+        <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+      </template>
+
+      <template #dateSlot="{ text, column }">
+        <span>{{ getFormatDate(text, column) }}</span>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref, toRaw, computed, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useTableColumns } from '@/views/super/online/cgform/hooks/auto/useTableColumns';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+  import { useFixedHeightModal } from '../hooks/useLinkTable';
+
+  export default defineComponent({
+    name: 'LinkTableListModal',
+    props: {
+      /**可以是表名 可以是ID*/
+      id: {
+        type: String,
+        default: '',
+      },
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      addAuth: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    components: {
+      BasicModal,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), { loading: true, delay: 1000 }),
+      TableAction: createAsyncComponent(() => import('/@/components/Table/src/components/TableAction.vue'), { loading: true, delay: 1000 }),
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+      const tableRef = ref(null);
+      // 弹窗高度控制
+      const { popModalFixedWidth, resetBodyStyle, popBodyStyle } = useFixedHeightModal();
+      const searchText = ref('');
+      const modalWidth = ref(800);
+      //useModalInner
+      const [registerModal, { closeModal }] = useModalInner((data) => {
+        searchText.value = '';
+        selectedRowKeys.value = data.selectedRowKeys;
+        selectedRows.value = data.selectedRows;
+        setTimeout(async () => {
+          await setPagination({ current: 1 });
+          await reload(); // 等待表格加载
+          resetBodyStyle();
+        }, 100);
+      });
+
+      function handleCancel() {
+        closeModal();
+      }
+      const submitDisabled = computed(() => {
+        const arr = selectedRowKeys.value;
+        if (arr && arr.length > 0) {
+          return false;
+        }
+        return true;
+      });
+      const submitLoading = ref(false);
+      function handleSubmit() {
+        submitLoading.value = true;
+        let arr = toRaw(selectedRows.value);
+        if (arr && arr.length > 0) {
+          emit('success', arr);
+          closeModal();
+        }
+        setTimeout(() => {
+          submitLoading.value = false;
+        }, 200);
+      }
+
+      //---------------------列表------------------------
+      function queryTableData(params) {
+        const url = '/online/cgform/api/getData/' + props.id;
+        return defHttp.get({ url, params });
+      }
+
+      function list(params) {
+        params['column'] = 'id';
+        return new Promise(async (resolve, _reject) => {
+          const aa = await queryTableData(params);
+          resolve(aa);
+        });
+      }
+
+      const onlineTableContext = {
+        isPopList: true,
+        reloadTable() {
+          console.log('reloadTable');
+        },
+        isTree() {
+          return false;
+        },
+      };
+      const extConfigJson = ref<any>({});
+
+      // 处理 BasicTable 的配置
+      const { columns, downloadRowFile, getImgView, getPcaText, getFormatDate, handleColumnResult, hrefComponent, viewOnlineCellImage } =
+        useTableColumns(onlineTableContext, extConfigJson);
+
+      /**
+       * 查询table列信息 及其他配置
+       */
+      function getColumnList() {
+        const url = '/online/cgform/api/getColumns/' + props.id;
+        return new Promise((resolve, reject) => {
+          defHttp.get({ url }, { isTransformResponse: false }).then((res) => {
+            if (res.success) {
+              resolve(res.result);
+            } else {
+              $message.warning(res.message);
+              reject();
+            }
+          });
+        });
+      }
+
+      const modalTitle = ref('');
+      watch(
+        () => props.id,
+        async () => {
+          let columnResult: any = await getColumnList();
+          handleColumnResult(columnResult);
+          modalTitle.value = columnResult.description;
+        },
+        { immediate: true }
+      );
+
+      const { tableContext } = useListPage({
+        designScope: 'process-design',
+        pagination: true,
+        tableProps: {
+          title: '',
+          api: list,
+          clickToRowSelect: true,
+          columns: columns,
+          showTableSetting: false,
+          immediate: false,
+          //showIndexColumn: true,
+          canResize: false,
+          showActionColumn: false,
+          actionColumn: {
+            dataIndex: 'action',
+            slots: { customRender: 'action' },
+          },
+          useSearchForm: false,
+          beforeFetch: (params) => {
+            return addQueryParams(params);
+          },
+        },
+      });
+      const [registerTable, { reload, setPagination }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+      watch(
+        () => props.multi,
+        (val) => {
+          if (val == true) {
+            rowSelection.type = 'checkbox';
+          } else {
+            rowSelection.type = 'radio';
+          }
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: handleUpdate.bind(null, record),
+          },
+        ];
+      }
+
+      function handleUpdate(record) {
+        console.log('handleUpdate', record);
+      }
+
+      function onSearch() {
+        reload();
+      }
+      const eqConditonTypes = ['int', 'double', 'Date', 'Datetime', 'BigDecimal'];
+      function addQueryParams(params) {
+        let text = searchText.value;
+        if (!text) {
+          params['superQueryMatchType'] = 'or';
+          params['superQueryParams'] = '';
+          return params;
+        }
+        let arr = columns.value;
+        let conditions: any[] = [];
+        if (arr && arr.length > 0) {
+          for (let item of arr) {
+            if (item.dbType) {
+              if (item.dbType == 'string') {
+                conditions.push({ field: item.dataIndex, type: item.dbType.toLowerCase(), rule: 'like', val: text });
+              } else if (item.dbType == 'Date') {
+                if (text.length == '2020-10-10'.length) {
+                  conditions.push({ field: item.dataIndex, type: item.dbType.toLowerCase(), rule: 'eq', val: text });
+                }
+              } else if (item.dbType == 'Datetime') {
+                if (text.length == '2020-10-10 10:10:10'.length) {
+                  conditions.push({ field: item.dataIndex, type: item.dbType.toLowerCase(), rule: 'eq', val: text });
+                }
+              } else if (eqConditonTypes.indexOf(item.dbType)) {
+                conditions.push({ field: item.dataIndex, type: item.dbType.toLowerCase(), rule: 'eq', val: text });
+              } else {
+                //text blob不做处理
+              }
+            }
+          }
+        }
+        params['superQueryMatchType'] = 'or';
+        params['superQueryParams'] = encodeURI(JSON.stringify(conditions));
+        return params;
+      }
+
+      // modal数据新增完成 直接关闭list，将新增的数据带回表单
+      function handleDataSave(data) {
+        console.log('handleDateSave', data);
+        // 代码逻辑说明: 【issues/8163】关联记录新增丢失
+        let arr = [data, ...selectedRows.value];
+        emit('success', arr);
+        closeModal();
+        //reload();
+      }
+
+      return {
+        registerModal,
+        modalWidth,
+        handleCancel,
+        submitDisabled,
+        submitLoading,
+        handleSubmit,
+
+        registerTable,
+        getTableAction,
+        searchText,
+        onSearch,
+
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+        hrefComponent,
+        viewOnlineCellImage,
+        rowSelection,
+        modalTitle,
+
+        reload,
+
+        popModalFixedWidth,
+        popBodyStyle,
+        handleDataSave,
+
+        tableRef,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/Form/src/jeecg/components/JLinkTableCard/hooks/useLinkTable.ts b/src/components/Form/src/jeecg/components/JLinkTableCard/hooks/useLinkTable.ts
new file mode 100644
index 0000000..d0f5798
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JLinkTableCard/hooks/useLinkTable.ts
@@ -0,0 +1,356 @@
+import { defHttp } from '/@/utils/http/axios';
+import { ref, watchEffect, computed, reactive } from 'vue';
+import { pick } from 'lodash-es';
+import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+function queryTableData(tableName, params) {
+  const url = '/online/cgform/api/getData/' + tableName;
+  return defHttp.get({ url, params });
+}
+
+function queryTableColumns(tableName, params) {
+  const url = '/online/cgform/api/getColumns/' + tableName;
+  return defHttp.get({ url, params });
+}
+
+export function useLinkTable(props) {
+  //TODO 目前只支持查询第一页的数据，可以输入关键字搜索
+  const pageNo = ref('1');
+  // 查询列
+  const baseParam = ref<any>({});
+  // 搜素条件
+  const searchParam = ref<any>({});
+  // 第一个文本列
+  const mainContentField = ref('');
+  //权限数据
+  const auths = reactive({
+    add: true,
+    update: true,
+  });
+
+  //显示列
+  const textFieldArray = computed(() => {
+    if (props.textField) {
+      return props.textField.split(',');
+    }
+    return [];
+  });
+  const otherColumns = ref<any[]>([]);
+  // 展示的列 配置的很多列，但是只展示三行
+  const realShowColumns = computed(() => {
+    const columns = otherColumns.value;
+    if (props.multi == true) {
+      return columns.slice(0, 3);
+    } else {
+      return columns.slice(0, 6);
+    }
+  });
+
+  watchEffect(async () => {
+    const table = props.tableName;
+    if (table) {
+      const valueField = props.valueField || '';
+      const textField = props.textField || '';
+      const arr: any[] = [];
+      if (valueField) {
+        arr.push(valueField);
+      }
+      if (textField) {
+        const temp = textField.split(',');
+        mainContentField.value = temp[0];
+        for (const field of temp) {
+          arr.push(field);
+        }
+      }
+      const imageField = props.imageField || '';
+      if (imageField) {
+        arr.push(imageField);
+      }
+      baseParam.value = {
+        linkTableSelectFields: arr.join(','),
+      };
+      await resetTableColumns();
+      await reloadTableLinkOptions();
+    }
+  });
+
+  const otherFields = computed(() => {
+    const textField = props.textField || '';
+    const others: any[] = [];
+    let labelField = '';
+    if (textField) {
+      const temp = textField.split(',');
+      labelField = temp[0];
+      for (let i = 0; i < temp.length; i++) {
+        if (i > 0) {
+          others.push(temp[i]);
+        }
+      }
+    }
+    return {
+      others,
+      labelField,
+    };
+  });
+
+  // 选项
+  const selectOptions = ref<any[]>([]);
+  const tableColumns = ref<any[]>([]);
+  const dictOptions = ref<any>({});
+
+  async function resetTableColumns() {
+    const params = baseParam.value;
+    const data = await queryTableColumns(props.tableName, params);
+    tableColumns.value = data.columns;
+    if (data.columns) {
+      const imageField = props.imageField;
+      const arr = data.columns.filter((c) => c.dataIndex != mainContentField.value && c.dataIndex != imageField);
+      otherColumns.value = arr;
+    }
+    dictOptions.value = data.dictOptions;
+    // 权限数据
+    console.log('隐藏的按钮', data.hideColumns);
+    if (data.hideColumns) {
+      const hideCols = data.hideColumns;
+      if (hideCols.indexOf('add') >= 0) {
+        auths.add = false;
+      } else {
+        auths.add = true;
+      }
+      if (hideCols.indexOf('update') >= 0) {
+        auths.update = false;
+      } else {
+        auths.update = true;
+      }
+    }
+  }
+
+  async function reloadTableLinkOptions() {
+    const params = getLoadDataParams();
+    const data = await queryTableData(props.tableName, params);
+    const records = data.records;
+    //tableTitle.value = data.head.tableTxt;
+    const dataList: any[] = [];
+    const { others, labelField } = otherFields.value;
+    const imageField = props.imageField;
+    if (records && records.length > 0) {
+      for (const rd of records) {
+        const temp = { ...rd };
+        transData(temp);
+        const result = Object.assign({}, pick(temp, others), { id: temp.id, label: temp[labelField], value: temp[props.valueField] });
+        if (imageField) {
+          result[imageField] = temp[imageField];
+        }
+        dataList.push(result);
+      }
+    }
+    //添加一个空对象 为add操作占位
+    // 代码逻辑说明: 【TV360X-1095】高级查询关联记录去掉编辑按钮及去掉记录按钮
+    props.editBtnShow && dataList.push({});
+    selectOptions.value = dataList;
+  }
+
+  /**
+   * 数据简单翻译-字典
+   * @param data
+   */
+  function transData(data) {
+    const columns = tableColumns.value;
+    const dictInfo = dictOptions.value;
+    for (const c of columns) {
+      const { dataIndex, customRender } = c;
+      if (data[dataIndex] || data[dataIndex] === 0) {
+        if (customRender && customRender == dataIndex) {
+          //这样的就是 字典数据了 可以直接翻译
+          if (dictInfo[customRender]) {
+            data[dataIndex] = filterMultiDictText(dictInfo[customRender], data[dataIndex]);
+            continue;
+          }
+        }
+      }
+      // 兼容后台翻译字段
+      const dictText = data[dataIndex + '_dictText'];
+      if (dictText) {
+        data[dataIndex] = dictText;
+      }
+    }
+  }
+
+  //获取加载数据的查询条件
+  function getLoadDataParams() {
+    const params = Object.assign({ pageSize: 100, pageNo: pageNo.value }, baseParam.value, searchParam.value);
+    return params;
+  }
+
+  //设置查询条件
+  function addQueryParams(text) {
+    if (!text) {
+      searchParam.value = {};
+    } else {
+      const arr = textFieldArray.value;
+      const params: any[] = [];
+      const fields: any[] = [];
+      for (let i = 0; i < arr.length; i++) {
+        if (i <= 1) {
+          fields.push(arr[i]);
+          params.push({ field: arr[i], rule: 'like', val: text });
+        }
+      }
+      // params[arr[i]] = `*${text}*`
+      // params['selectConditionFields'] = fields.join(',')
+      // searchParam.value = params;
+      params['superQueryMatchType'] = 'or';
+      params['superQueryParams'] = encodeURI(JSON.stringify(params));
+      searchParam.value = params;
+    }
+  }
+
+  async function loadOne(value) {
+    if (!value) {
+      return [];
+    }
+    let valueFieldName = props.valueField;
+    let params = {
+      ...baseParam.value,
+      pageSize: 100,
+      pageNo: pageNo.value,
+    };
+    params['superQueryMatchType'] = 'and';
+    let valueCondition = [{ field: valueFieldName, rule: 'in', val: value }];
+    params['superQueryParams'] = encodeURI(JSON.stringify(valueCondition));
+    const data = await queryTableData(props.tableName, params);
+    let records = data.records;
+    //tableTitle.value = data.head.tableTxt;
+    let dataList: any[] = [];
+    if (records && records.length > 0) {
+      for (let item of records) {
+        let temp = { ...item };
+        transData(temp);
+        dataList.push(temp);
+      }
+    }
+    return dataList;
+  }
+
+  /**
+   * true:数据一致；false:数据不一致
+   * @param arr
+   * @param value
+   */
+  function compareData(arr, value) {
+    if (!arr || arr.length == 0) {
+      return false;
+    }
+    const valueArray = value.split(',');
+    if (valueArray.length != arr.length) {
+      return false;
+    }
+    let flag = true;
+    for (const item of arr) {
+      const temp = item[props.valueField];
+      if (valueArray.indexOf(temp) < 0) {
+        flag = false;
+      }
+    }
+    return flag;
+  }
+
+  function formatData(formData) {
+    Object.keys(formData).map((k) => {
+      if (formData[k] instanceof Array) {
+        formData[k] = formData[k].join(',');
+      }
+    });
+  }
+
+  function initFormData(formData, linkFieldArray, record) {
+    if (!record) {
+      record = {};
+    }
+    if (linkFieldArray && linkFieldArray.length > 0) {
+      for (const str of linkFieldArray) {
+        const arr = str.split(',');
+        //["表单字段,表字典字段"]
+        const field = arr[0];
+        const dictField = arr[1];
+        if (!formData[field]) {
+          const value = record[dictField] || '';
+          formData[field] = [value];
+        } else {
+          formData[field].push(record[dictField]);
+        }
+      }
+    }
+  }
+
+  // 获取图片地址
+  function getImageSrc(item) {
+    if (props.imageField) {
+      let url = item[props.imageField];
+      // 代码逻辑说明: 【TV360X-38】关联记录空间，被关联数据优多个图片时，封面图片不展示
+      if (typeof url === 'string') {
+        // 有多张图时默认取第一张
+        url = url.split(',')[0];
+      }
+      return getFileAccessHttpUrl(url);
+    }
+    return '';
+  }
+  const showImage = computed(() => {
+    if (props.imageField) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  return {
+    pageNo,
+    otherColumns,
+    realShowColumns,
+    selectOptions,
+    reloadTableLinkOptions,
+    textFieldArray,
+    addQueryParams,
+    tableColumns,
+    transData,
+    mainContentField,
+    loadOne,
+    compareData,
+    formatData,
+    initFormData,
+    getImageSrc,
+    showImage,
+    auths,
+  };
+}
+
+/**
+ * 使用固定高度的modal
+ */
+export function useFixedHeightModal() {
+  const minWidth = 800;
+  const popModalFixedWidth = ref(800);
+  let tempWidth = window.innerWidth - 300;
+  if (tempWidth < minWidth) {
+    tempWidth = minWidth;
+  }
+  popModalFixedWidth.value = tempWidth;
+
+  // 弹窗高度控制
+  const popBodyStyle = ref({});
+  function resetBodyStyle() {
+    const height = window.innerHeight - 210;
+    popBodyStyle.value = {
+      height: height + 'px',
+      overflowY: 'auto',
+    };
+  }
+
+  return {
+    popModalFixedWidth,
+    popBodyStyle,
+    resetBodyStyle,
+  };
+}
diff --git a/src/components/Form/src/jeecg/components/JMarkdownEditor.vue b/src/components/Form/src/jeecg/components/JMarkdownEditor.vue
new file mode 100644
index 0000000..38ed12c
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JMarkdownEditor.vue
@@ -0,0 +1,61 @@
+<template>
+  <MarkDown v-bind="bindProps" @change="onChange" @get="onGetVditor" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, watch, nextTick } from 'vue';
+  import { MarkDown } from '/@/components/Markdown';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Form } from 'ant-design-vue';
+  export default defineComponent({
+    name: 'JMarkdownEditor',
+    // 不将 attrs 的属性绑定到 html 标签上
+    inheritAttrs: false,
+    components: { MarkDown },
+    props: {
+      value: propTypes.string.def(''),
+      disabled: propTypes.bool.def(false),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit, attrs }) {
+      // markdown 组件实例
+      let mdRef: any = null;
+      // vditor 组件实例
+      let vditorRef: any = null;
+      // 合并 props 和 attrs
+      const bindProps = computed(() => Object.assign({}, props, attrs));
+      const formItemContext = Form.useInjectFormItemContext();
+      // 相当于 onMounted
+      function onGetVditor(instance) {
+        mdRef = instance;
+        vditorRef = mdRef.getVditor();
+
+        // 监听禁用，切换编辑器禁用状态
+        watch(
+          () => props.disabled,
+          (disabled) => (disabled ? vditorRef.disabled() : vditorRef.enable()),
+          { immediate: true }
+        );
+      }
+
+      // value change 事件
+      function onChange(value) {
+        emit('change', value);
+        emit('update:value', value);
+        // 代码逻辑说明: 【QQYUN-9110】组件有值校验没消失
+        nextTick(() => {
+          formItemContext?.onFieldChange();
+        });
+      }
+
+      return {
+        bindProps,
+
+        onChange,
+        onGetVditor,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components/Form/src/jeecg/components/JPopup.vue b/src/components/Form/src/jeecg/components/JPopup.vue
new file mode 100644
index 0000000..708caaf
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JPopup.vue
@@ -0,0 +1,188 @@
+<!--popup组件-->
+<template>
+  <div class="JPopup components-input-demo-presuffix" v-if="avalid">
+    <!--输入框-->
+    <a-input @click="handleOpen" :value="innerShowText || showText" :placeholder="placeholder" readOnly v-bind="attrs">
+      <template #prefix>
+        <Icon icon="ant-design:cluster-outlined"></Icon>
+      </template>
+      <!-- <template #suffix>
+                <Icon icon="ant-design:close-circle-outlined" @click="handleEmpty" title="清空" v-if="showText"></Icon>
+            </template>-->
+    </a-input>
+    <a-form-item>
+      <!--popup弹窗-->
+      <JPopupOnlReportModal
+        @register="regModal"
+        :code="code"
+        :multi="multi"
+        :sorter="sorter"
+        :groupId="uniqGroupId"
+        :param="param"
+        :showAdvancedButton="showAdvancedButton"
+        :getContainer="getContainer"
+        :getFormValues="getFormValues"
+        @ok="callBack"
+      ></JPopupOnlReportModal>
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import JPopupOnlReportModal from './modal/JPopupOnlReportModal.vue';
+  import { defineComponent, ref, reactive, onMounted, watchEffect, watch, computed, unref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'JPopup',
+    components: {
+      JPopupOnlReportModal,
+    },
+    inheritAttrs: false,
+    props: {
+      code: propTypes.string.def(''),
+      value: propTypes.string.def(''),
+      sorter: propTypes.string.def(''),
+      width: propTypes.number.def(1200),
+      placeholder: propTypes.string.def('请选择'),
+      multi: propTypes.bool.def(false),
+      param: propTypes.object.def({}),
+      spliter: propTypes.string.def(','),
+      groupId: propTypes.string.def(''),
+      formElRef: propTypes.object,
+      setFieldsValue: propTypes.func,
+      getFormValues: propTypes.func,
+      getContainer: propTypes.func,
+      fieldConfig: {
+        type: Array,
+        default: () => [],
+      },
+      showAdvancedButton: propTypes.bool.def(true),
+      // 是否是在 筛选（search） 中使用
+      inSearch: propTypes.bool.def(false),
+    },
+    emits: ['update:value', 'register', 'popUpChange', 'focus'],
+    setup(props, { emit, refs }) {
+      const { createMessage } = useMessage();
+      const attrs = useAttrs();
+      //pop是否展示
+      const avalid = ref(true);
+      const showText = ref('');
+      const innerShowText = ref('')
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      let {code, fieldConfig } = props;
+      //唯一分组groupId
+      const uniqGroupId = computed(() => (props.groupId ? `${props.groupId}_${code}_${fieldConfig[0]['source']}_${fieldConfig[0]['target']}` : ''));
+      /**
+       * 判断popup配置项是否正确
+       */
+      onMounted(() => {
+        if (props.fieldConfig.length == 0) {
+          createMessage.error('popup参数未正确配置!');
+          avalid.value = false;
+        }
+      });
+      /**
+       * 监听value数值
+       */
+      watch(
+        () => props.value,
+        (val) => {
+          showText.value = val && val.length > 0 ? val.split(props.spliter).join(',') : '';
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 打开pop弹出框
+       */
+      function handleOpen() {
+        emit('focus');
+        // 代码逻辑说明: 【TV360X-317】禁用后JPopup和JPopupdic还可以点击出弹窗
+        !attrs.value.disabled && openModal(true);
+      }
+
+      /**
+       * TODO 清空
+       */
+      function handleEmpty() {
+        showText.value = '';
+      }
+
+      /**
+       * 传值回调
+       */
+      function callBack(rows) {
+        let { fieldConfig } = props;
+        //匹配popup设置的回调值
+        let values = {};
+        let labels = []
+        for (let item of fieldConfig) {
+          let val = rows.map((row) => row[item.source]);
+          // 代码逻辑说明: 【QQYUN-7535】数组只有一个且是number类型，join会改变值的类型为string
+          val = val.length == 1 ? val[0] : val.join(',');
+          item.target.split(',').forEach((target) => {
+            values[target] = val;
+          });
+
+          if (props.inSearch) {
+            // 处理显示值
+            if (item.label) {
+              let txt = rows.map((row) => row[item.label]);
+              txt = txt.length == 1 ? txt[0] : txt.join(',');
+              labels.push(txt);
+            } else {
+              labels.push(val);
+            }
+          }
+
+        }
+        innerShowText.value = labels.join(',');
+        //传入表单示例方式赋值
+        props.formElRef && props.formElRef.setFieldsValue(values);
+        //传入赋值方法方式赋值
+        props.setFieldsValue && props.setFieldsValue(values);
+        // 代码逻辑说明: 【issues/5213】JPopup抛出change事件
+        emit('popUpChange', values);
+      }
+
+      return {
+        showText,
+        innerShowText,
+        avalid,
+        uniqGroupId,
+        attrs,
+        regModal,
+        handleOpen,
+        handleEmpty,
+        callBack,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JPopup {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .components-input-demo-presuffix .anticon-close-circle {
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.3s;
+    font-size: 12px;
+  }
+
+  .components-input-demo-presuffix .anticon-close-circle:hover {
+    color: #f5222d;
+  }
+
+  .components-input-demo-presuffix .anticon-close-circle:active {
+    color: #666;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JPopupDict.vue b/src/components/Form/src/jeecg/components/JPopupDict.vue
new file mode 100644
index 0000000..2b8030b
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JPopupDict.vue
@@ -0,0 +1,236 @@
+<!--popup组件-->
+<template>
+  <div class="JPopupDict components-input-demo-presuffix">
+    <!--输入框-->
+    <a-select v-model:value="showText" v-bind="attrs" :mode="multi ? 'multiple' : ''" @click="handleOpen" readOnly :loading="loading">
+      <a-select-option v-for="item in options" :value="item.value">{{ item.text }}</a-select-option>
+    </a-select>
+    <a-form-item>
+      <!--popup弹窗-->
+      <JPopupOnlReportModal
+        @register="regModal"
+        :code="code"
+        :multi="multi"
+        :selected="selected"
+        :rowkey="valueFiled"
+        :sorter="sorter"
+        :groupId="''"
+        :param="param"
+        :getFormValues="getFormValues"
+        :getContainer="getContainer"
+        :showAdvancedButton="showAdvancedButton"
+        @ok="callBack"
+      />
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import JPopupOnlReportModal from './modal/JPopupOnlReportModal.vue';
+  import { defineComponent, ref, nextTick, watch, reactive, unref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  //定义请求url信息
+  const configUrl = reactive({
+    getColumns: '/online/cgreport/api/getRpColumns/',
+    getData: '/online/cgreport/api/getData/',
+  });
+
+  export default defineComponent({
+    name: 'JPopupDict',
+    components: {
+      JPopupOnlReportModal,
+    },
+    inheritAttrs: false,
+    props: {
+      /**
+       * 示例：demo,name,id
+       * demo: online报表编码
+       * name: online报表的字段，用户显示的label
+       * id: online报表的字段，用于存储key
+       */
+      dictCode: propTypes.string.def(''),
+      value: propTypes.string.def(''),
+      sorter: propTypes.string.def(''),
+      multi: propTypes.bool.def(false),
+      param: propTypes.object.def({}),
+      spliter: propTypes.string.def(','),
+      getFormValues: propTypes.func,
+      getContainer: propTypes.func,
+      showAdvancedButton: propTypes.bool.def(true),
+    },
+    emits: ['update:value', 'register', 'change'],
+    setup(props, { emit }) {
+      const { createMessage } = useMessage();
+      const attrs = useAttrs();
+      const showText = ref<any>(props.multi ? [] : '');
+      const options = ref<any>([]);
+      const cgRpConfigId = ref('');
+      const loading = ref(false);
+      const code = props.dictCode.split(',')[0];
+      const labelFiled = props.dictCode.split(',')[1];
+      const valueFiled = props.dictCode.split(',')[2];
+      const selected = ref([]);
+      if (!code || !valueFiled || !labelFiled) {
+        createMessage.error('popupDict参数未正确配置!');
+      }
+      //注册model
+      const [regModal, { openModal }] = useModal();
+
+      /**
+       * 打开pop弹出框
+       */
+      function handleOpen() {
+        // 代码逻辑说明: 【TV360X-317】禁用后JPopup和JPopupdic还可以点击出弹窗
+        !attrs.value.disabled && openModal(true);
+      }
+      /**
+       * 监听value数值
+       */
+      watch(
+        () => props.value,
+        (val) => {
+          const callBack = () => {
+            if (props.multi) {
+              showText.value = val && val.length > 0 ? val.split(props.spliter) : [];
+            } else {
+              showText.value = val ?? '';
+            }
+          };
+          if (props.value || props.defaultValue) {
+            if (cgRpConfigId.value) {
+              loadData({ callBack });
+            } else {
+              loadColumnsInfo({ callBack });
+            }
+          } else {
+            callBack();
+          }
+        },
+        { immediate: true }
+      );
+      watch(
+        () => showText.value,
+        (val) => {
+          let result;
+          if (props.multi) {
+            result = val.join(',');
+          } else {
+            result = val;
+          }
+          nextTick(() => {
+            emit('change', result);
+            emit('update:value', result);
+          });
+        }
+      );
+      /**
+       * 加载列信息
+       */
+      function loadColumnsInfo({ callBack }) {
+        loading.value = true;
+        let url = `${configUrl.getColumns}${code}`;
+        defHttp
+          .get({ url }, { isTransformResponse: false, successMessageMode: 'none' })
+          .then((res) => {
+            if (res.success) {
+              cgRpConfigId.value = res.result.cgRpConfigId;
+              loadData({ callBack });
+            }
+          })
+          .catch((err) => {
+            loading.value = false;
+            callBack?.();
+          });
+      }
+      function loadData({ callBack }) {
+        loading.value = true;
+        let url = `${configUrl.getData}${unref(cgRpConfigId)}`;
+        defHttp
+          .get(
+            { url, params: { ['force_' + valueFiled]: props.value || props.defaultValue } },
+            { isTransformResponse: false, successMessageMode: 'none' }
+          )
+          .then((res) => {
+            let data = res.result;
+            if (data.records?.length) {
+              options.value = data.records.map((item) => {
+                return { value: item[valueFiled], text: item[labelFiled] };
+              });
+              selected.value = data.records;
+            }
+          })
+          .finally(() => {
+            loading.value = false;
+            callBack?.();
+          });
+      }
+      /**
+       * 传值回调
+       */
+      function callBack(rows) {
+        const dataOptions: any = [];
+        const dataValue: any = [];
+        let result;
+        rows.forEach((item) => {
+          dataOptions.push({ value: item[valueFiled], text: item[labelFiled] });
+          dataValue.push(item[valueFiled]);
+        });
+        options.value = dataOptions;
+        if (props.multi) {
+          showText.value = dataValue;
+          result = dataValue.join(props.spliter);
+        } else {
+          showText.value = dataValue[0];
+          result = dataValue[0];
+        }
+        nextTick(() => {
+          emit('change', result);
+          emit('update:value', result);
+        });
+      }
+
+      return {
+        showText,
+        attrs,
+        regModal,
+        handleOpen,
+        callBack,
+        code,
+        options,
+        loading,
+        selected,
+        valueFiled,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JPopupDict {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .components-input-demo-presuffix {
+    :deep(.ant-select-dropdown) {
+      display: none !important;
+    }
+  }
+  .components-input-demo-presuffix .anticon-close-circle {
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.3s;
+    font-size: 12px;
+  }
+
+  .components-input-demo-presuffix .anticon-close-circle:hover {
+    color: #f5222d;
+  }
+
+  .components-input-demo-presuffix .anticon-close-circle:active {
+    color: #666;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JRangeDate.vue b/src/components/Form/src/jeecg/components/JRangeDate.vue
new file mode 100644
index 0000000..eb252f9
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JRangeDate.vue
@@ -0,0 +1,64 @@
+<template>
+    <a-range-picker v-model:value="rangeValue" @change="handleChange" :show-time="datetime" :placeholder="placeholder" :valueFormat="valueFormat"/>
+</template>
+
+<script>
+    import { defineComponent, ref, watch, computed } from 'vue';
+    import { propTypes } from '/@/utils/propTypes';
+    import { Form } from 'ant-design-vue';
+
+    const placeholder = ['开始日期', '结束日期']
+    /**
+     * 用于范围查询
+     */
+    export default defineComponent({
+        name: "JRangeDate",
+        props:{
+            value: propTypes.string.def(''),
+            datetime: propTypes.bool.def(false),
+            placeholder: propTypes.string.def(''),
+        },
+        emits:['change', 'update:value'],
+        setup(props, {emit}){
+            const rangeValue = ref([])
+            const formItemContext = Form.useInjectFormItemContext();
+
+            watch(()=>props.value, (val)=>{
+                if(val){
+                    rangeValue.value = val.split(',')
+                }else{
+                    rangeValue.value = []
+                }
+            }, {immediate: true});
+
+            const valueFormat = computed(()=>{
+                if(props.datetime === true){
+                    return 'YYYY-MM-DD HH:mm:ss'
+                }else{
+                    return 'YYYY-MM-DD'
+                }
+            });
+
+            function handleChange(arr){
+                let str = ''
+                if(arr && arr.length>0){
+                  // 代码逻辑说明: [issues/6368] rangeDate去掉判断允许起始项或结束项为空兼容allowEmpty
+                  str = arr.join(',')
+                }
+                emit('change', str);
+                emit('update:value', str);
+                formItemContext.onFieldChange();
+            }
+            return {
+                rangeValue,
+                placeholder,
+                valueFormat,
+                handleChange
+            }
+        }
+    });
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Form/src/jeecg/components/JRangeNumber.vue b/src/components/Form/src/jeecg/components/JRangeNumber.vue
new file mode 100644
index 0000000..de95607
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JRangeNumber.vue
@@ -0,0 +1,91 @@
+<template>
+  <a-input-group>
+    <a-input-number v-bind="attrs" :value="beginValue" style="width: calc(50% - 15px)" placeholder="最小值" @change="handleChangeBegin" />
+    <a-input style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff" placeholder="~" disabled />
+    <a-input-number v-bind="attrs" :value="endValue" style="width: calc(50% - 15px); border-left: 0" placeholder="最大值" @change="handleChangeEnd" />
+  </a-input-group>
+</template>
+
+<script>
+  /**
+   * 查询条件用-数值范围查询
+   */
+  import { ref, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  
+  export default {
+    name: 'JRangeNumber',
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    },
+    emits: ['change', 'update:value', 'blur'],
+    setup(props, { emit }) {
+      const beginValue = ref('');
+      const endValue = ref('');
+      const attrs = useAttrs();
+      const formItemContext = Form.useInjectFormItemContext();
+      
+      function handleChangeBegin(e) {
+        beginValue.value = e;
+        emitArray();
+      }
+
+      function handleChangeEnd(e) {
+        endValue.value = e;
+        emitArray();
+      }
+
+      function emitArray() {
+        let arr = [];
+        // 代码逻辑说明: 【TV360X-1749】数量0输入不了，输入清空了
+        let begin = beginValue.value ?? '';
+        let end = endValue.value ?? '';
+        arr.push(begin);
+        arr.push(end);
+        emit('change', arr);
+        emit('update:value', arr);
+        formItemContext.onFieldChange();
+      }
+
+      watch(
+        () => props.value,
+        (val) => {
+          if (val && val.length == 2) {
+            beginValue.value = val[0];
+            endValue.value = val[1];
+          } else {
+            beginValue.value = '';
+            endValue.value = '';
+          }
+        }, {immediate: true}
+      );
+      
+      return {
+        beginValue,
+        endValue,
+        handleChangeBegin,
+        handleChangeEnd,
+        attrs,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  // 代码逻辑说明: 【TV360X-214】范围查询控件没有根据配置格式化
+  .ant-input-group {
+    display: flex;
+    .ant-input-number {
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JRangeTime.vue b/src/components/Form/src/jeecg/components/JRangeTime.vue
new file mode 100644
index 0000000..645b99d
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JRangeTime.vue
@@ -0,0 +1,53 @@
+<template>
+    <a-time-range-picker v-model:value="rangeValue" @change="handleChange" :placeholder="placeholder" :valueFormat="format" :format="format"/>
+</template>
+
+<script>
+    import { defineComponent, ref, watch } from 'vue';
+    import { propTypes } from '/@/utils/propTypes';
+    import { Form } from 'ant-design-vue';
+
+    const placeholder = ['开始时间', '结束时间']
+    /**
+     * 用于时间-time组件的范围查询
+     */
+    export default defineComponent({
+        name: "JRangeTime",
+        props:{
+            value: propTypes.string.def(''),
+            format: propTypes.string.def('HH:mm:ss'),
+            placeholder: propTypes.string.def(''),
+        },
+        emits:['change', 'update:value'],
+        setup(props, {emit}){
+            const rangeValue = ref([])
+            const formItemContext = Form.useInjectFormItemContext();
+
+            watch(()=>props.value, (val)=>{
+                if(val){
+                    rangeValue.value = val.split(',')
+                }else{
+                    rangeValue.value = []
+                }
+            }, {immediate: true});
+
+
+            function handleChange(arr){
+                let str = ''
+                if(arr && arr.length>0){
+                    if(arr[1] && arr[0]){
+                        str = arr.join(',')
+                    }
+                }
+                emit('change', str);
+                emit('update:value', str);
+                formItemContext.onFieldChange();
+            }
+            return {
+                rangeValue,
+                placeholder,
+                handleChange
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/components/Form/src/jeecg/components/JSearchSelect.vue b/src/components/Form/src/jeecg/components/JSearchSelect.vue
new file mode 100644
index 0000000..3d1a504
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSearchSelect.vue
@@ -0,0 +1,554 @@
+<template>
+  <!--异步字典下拉搜素-->
+  <a-select
+    v-if="async"
+    v-bind="attrs"
+    v-model:value="selectedAsyncValue"
+    showSearch
+    labelInValue
+    allowClear
+    :getPopupContainer="getParentContainer"
+    :placeholder="placeholder"
+    :filterOption="isDictTable ? false : filterOption"
+    :notFoundContent="loading ? undefined : null"
+    @focus="handleAsyncFocus"
+    @search="loadData"
+    @change="handleAsyncChange"
+    @popupScroll="handlePopupScroll"
+    :mode="multiple?'multiple':''"
+    @select="handleSelect"
+    @deselect="handleDeSelect"
+  >
+    <template #notFoundContent>
+      <a-spin size="small" />
+    </template>
+    <a-select-option v-for="d in options" :key="d?.value" :value="d?.value">{{ d?.text }}</a-select-option>
+  </a-select>
+  <!--字典下拉搜素-->
+  <a-select
+    v-else
+    v-model:value="selectedValue"
+    v-bind="attrs"
+    showSearch
+    :getPopupContainer="getParentContainer"
+    :placeholder="placeholder"
+    :filterOption="filterOption"
+    :notFoundContent="loading ? undefined : null"
+    :dropdownAlign="{overflow: {adjustY: adjustY }}"
+    @change="handleChange"
+    :mode="multiple?'multiple':''"
+    @select="handleSelect"
+    @deselect="handleDeSelect"
+  >
+    <template #notFoundContent>
+      <a-spin v-if="loading" size="small" />
+    </template>
+    <a-select-option v-for="d in options" :key="d?.value" :value="d?.value">
+      <span :class="[useDicColor && d.color ? 'colorText' : '']" :style="{ backgroundColor: `${useDicColor && d.color}` }">{{ d?.text || d?.label }}</span>
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts">
+  import { useDebounceFn } from '@vueuse/core';
+  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { initDictOptions } from '/@/utils/dict/index';
+  import { defHttp } from '/@/utils/http/axios';
+  import { debounce } from 'lodash-es';
+  import { setPopContainer } from '/@/utils';
+  import { isObject } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JSearchSelect',
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.number]),
+      dict: propTypes.string,
+      dictOptions: {
+        type: Array,
+        default: () => [],
+      },
+      async: propTypes.bool.def(false),
+      placeholder: propTypes.string,
+      popContainer: propTypes.string,
+      pageSize: propTypes.number.def(10),
+      getPopupContainer: {
+        type: Function,
+        default: (node) => node?.parentNode,
+      },
+      //默认开启Y轴溢出位置调整，因此在可视空间不足时下拉框位置会自动上移，导致Select的输入框被遮挡。需要注意的是，默认情况是是可视空间，而不是所拥有的空间
+      // 代码逻辑说明: [issue/286]下拉搜索框遮挡问题
+      adjustY:propTypes.bool.def(true),
+      //是否在有值后立即触发change
+      immediateChange: propTypes.bool.def(false),
+      //支持传入查询参数，如排序信息
+      params:{
+        type: Object,
+        default: ()=>{}
+      },
+      //是否为多选
+      multiple:{
+        type: Boolean,
+        default: false
+      },
+      useDicColor: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const options = ref<any[]>([]);
+      const loading = ref(false);
+      // 代码逻辑说明: 【issues/897】JSearchSelect组件添加class/style样式不生效
+      const attrs = useAttrs({'excludeDefaultKeys': false});
+      const selectedValue = ref([]);
+      const selectedAsyncValue = ref([]);
+      const lastLoad = ref(0);
+      // 是否根据value加载text
+      const loadSelectText = ref(true);
+      // 异步(字典表) - 滚动加载时会用到
+      let isHasData = true;
+      let scrollLoading = false;
+      let pageNo = 1;
+      let searchKeyword = '';
+
+      // 是否是字典表
+      const isDictTable = computed(() => {
+        if (props.dict) {
+          return props.dict.split(',').length >= 2
+        }
+        return false;
+      })
+
+      /**
+       * 监听字典code
+       */
+      watch(() => props.dict, () => {
+        if (!props.dict) {
+          return
+        }
+        if (isDictTable.value) {
+          initDictTableData();
+        } else {
+          initDictCodeData();
+        }
+      }, {immediate: true});
+
+      /**
+       * 监听value
+       */
+      watch(
+        () => props.value,
+        (val) => {
+          if (val || val === 0) {
+            initSelectValue();
+          } else {
+            selectedValue.value = [];
+            selectedAsyncValue.value = [];
+          }
+        },
+        { immediate: true }
+      );
+      /**
+       * 监听dictOptions
+       */
+      watch(
+        () => props.dictOptions,
+        (val) => {
+          if (val && val.length >= 0) {
+            options.value = [...val];
+          }
+        },
+        { immediate: true }
+      );
+      /**
+       * 异步查询数据
+       */
+      const loadData = debounce(async function loadData(value) {
+        if (!isDictTable.value) {
+          return;
+        }
+        // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+        pageNo = 1;
+        isHasData = true;
+        searchKeyword = value;
+ 
+        lastLoad.value += 1;
+        const currentLoad = unref(lastLoad);
+        options.value = [];
+        loading.value = true;
+        let keywordInfo = getKeywordParam(value);
+        // 代码逻辑说明: [QQYUN-8800]JSearchSelect的search事件在中文输入还没拼字成功时会触发，导致后端SQL注入 #6049------------
+        keywordInfo = keywordInfo.replaceAll("'", '');
+        // 字典code格式：table,text,code
+        defHttp
+          .get({
+            url: `/sys/dict/loadDict/${props.dict}`,
+            params: { keyword: keywordInfo, pageSize: props.pageSize, pageNo },
+          })
+          .then((res) => {
+            loading.value = false;
+            if (res && res.length > 0) {
+              if (currentLoad != unref(lastLoad)) {
+                return;
+              }
+              options.value = res;
+              // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+              pageNo++;
+            } else {
+              // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+              pageNo == 1 && (isHasData = false);
+            }
+          });
+      }, 300);
+      /**
+       * 初始化value
+       */
+      function initSelectValue() {
+        // 代码逻辑说明: 下拉搜索组件每次选中值会触发value的监听事件，触发此方法，但是实际不需要
+        if (loadSelectText.value === false) {
+          loadSelectText.value = true;
+          return;
+        }
+        let { async, value, dict } = props;
+        if (async) {
+          if (!selectedAsyncValue || !selectedAsyncValue.key || selectedAsyncValue.key !== value) {
+            defHttp.get({ url: `/sys/dict/loadDictItem/${dict}`, params: { key: value } }).then((res) => {
+              if (res && res.length > 0) {
+                //判断组件是否为多选
+                if(props.multiple){
+                  if(value){
+                    let arr: any = [];
+                    //多选返回的是以逗号拼接的方式
+                    let values = value.toString().split(',');
+                    for (let i = 0; i < res.length; i++) {
+                      let obj = {
+                        key: values[i],
+                        label: res[i],
+                      };
+                      arr.push(obj);
+                      selectedValue.value.push(obj.key);
+                    }
+                    selectedAsyncValue.value = arr;
+                  }
+                } else {
+                  let obj = {
+                    key: value,
+                    label: res,
+                  };
+                  if (props.value == value) {
+                    selectedAsyncValue.value = { ...obj };
+                  }
+                  // 代码逻辑说明: 值改变触发change事件--用于online关联记录配置页面
+                  if(props.immediateChange == true){
+                    emit('change', props.value);
+                  }
+                }
+              }
+            });
+          }
+        } else {
+          // 代码逻辑说明: 【issues/8101】前端dict组件导致内存溢出问题：搜索组件支持多选---
+          if(!props.multiple){
+            selectedValue.value = value.toString();
+            if(props.immediateChange == true){
+              emit('change', value.toString());
+            }
+          }else{
+            //多选的情况下需要转成数组
+            selectedValue.value = value.toString().split(',');
+          }
+        }
+      }
+
+      /**
+       * 初始化字典下拉数据
+       */
+      async function initDictTableData() {
+        let { dict, async, dictOptions, pageSize } = props;
+        if (!async) {
+          //如果字典项集合有数据
+          if (dictOptions && dictOptions.length > 0) {
+            options.value = dictOptions;
+          } else {
+            //根据字典Code, 初始化字典数组
+            let dictStr = '';
+            if (dict) {
+              let arr = dict.split(',');
+              if (arr[0].indexOf('where') > 0) {
+                let tbInfo = arr[0].split('where');
+                dictStr = tbInfo[0].trim() + ',' + arr[1] + ',' + arr[2] + ',' + encodeURIComponent(tbInfo[1]);
+              } else {
+                dictStr = dict;
+              }
+              //根据字典Code, 初始化字典数组
+              const dictData = await initDictOptions(dictStr);
+              options.value = dictData;
+            }
+          }
+        } else {
+          if (!dict) {
+            console.error('搜索组件未配置字典项');
+          } else {
+            // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+            pageNo = 1;
+            isHasData = true;
+            searchKeyword = '';
+
+            //异步一开始也加载一点数据
+            loading.value = true;
+            let keywordInfo = getKeywordParam('');
+            defHttp
+              .get({
+                url: `/sys/dict/loadDict/${dict}`,
+                params: { pageSize: pageSize, keyword: keywordInfo, pageNo },
+              })
+              .then((res) => {
+                loading.value = false;
+                if (res && res.length > 0) {
+                  options.value = res;
+                  // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+                  pageNo++;
+                } else {
+                  // 代码逻辑说明: 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+                  pageNo == 1 && (isHasData = false);
+                }
+              });
+          }
+        }
+      }
+
+      /**
+       * 查询数据字典
+       */
+      async function initDictCodeData() {
+        options.value = await initDictOptions(props.dict);
+      }
+
+      /**
+       * 同步改变事件
+       * */
+      function handleChange(value) {
+        //多选也会触发change事件，需要判断如果时多选不需要赋值
+        if(!props.multiple){
+          selectedValue.value = value;
+          callback();
+        }
+      }
+      /**
+       * 异步改变事件
+       * */
+      function handleAsyncChange(selectedObj) {
+          // 单选情况下使用change事件
+          if(!props.multiple){
+            if (selectedObj) {
+              selectedAsyncValue.value = selectedObj;
+              selectedValue.value = selectedObj.key;
+            } else {
+              selectedAsyncValue.value = null;
+              selectedValue.value = null;
+              options.value = null;
+              loadData('');
+            }
+            callback();
+            // 点x清空时需要把loadSelectText设置true
+            selectedObj ?? (loadSelectText.value = true);
+          }
+      }
+
+      /**
+       * 异步值选中事件
+       * @param selectedObj
+       */
+      function handleSelect(selectedObj){
+        let key = selectedObj;
+        if(props.async){
+          key = selectedObj.key;
+        }
+        //多选情况下使用select事件
+        if(props.multiple && key){
+          //异步的时候才需要在selectedValue数组中添加值操作，同步的情况下直接走更新值操作
+          if(props.async){
+            selectedValue.value.push(key);
+          }
+          selectedObj ?? (loadSelectText.value = true);
+          callback();
+        }
+      }
+      
+      /**
+       * 异步值取消选中事件
+       * @param selectedObj
+       */
+      function handleDeSelect(selectedObj){
+        let key = selectedObj;
+        if(props.async){
+          key = selectedObj.key;
+        }
+        //多选情况下使用select事件
+        if(props.multiple){
+          //异步的时候才需要在selectedValue数组中删除值操作，同步的情况下直接走更新值操作
+          if(props.async){
+            let findIndex = selectedValue.value.findIndex(item => item === key);
+            if(findIndex != -1){
+              selectedValue.value.splice(findIndex,1);
+            }
+          }
+          selectedObj ?? (loadSelectText.value = true);
+          callback();
+        }
+      }
+      
+      /**
+       *回调方法
+       * */
+      function callback() {
+        loadSelectText.value = false;
+        //单选直接走更新值操作
+        if(!props.multiple){
+          emit('change', unref(selectedValue));
+          emit('update:value', unref(selectedValue));
+        } else {
+          //多选需要把数组转成字符串
+          emit('change', unref(selectedValue).join(","));
+          emit('update:value', unref(selectedValue).join(","));
+        }
+      }
+      /**
+       * 过滤选中option
+       */
+      function filterOption(input, option) {
+        // 代码逻辑说明: issues/218 所有功能表单的下拉搜索框搜索无效
+        let value = '', label = '';
+        try {
+          value = option.value;
+          label = option.children()[0].children;
+        }catch (e) {
+          console.log('获取下拉项失败', e)
+        }
+        let str = input.toLowerCase();
+        return value.toLowerCase().indexOf(str) >= 0 || label.toLowerCase().indexOf(str) >= 0;
+      }
+
+      function getParentContainer(node) {
+        // 代码逻辑说明: getPopupContainer一直有值 导致popContainer的逻辑永远走不进去，把它挪到前面判断
+        if (props.popContainer) {
+          // 代码逻辑说明: 【QQYUN-9339】有多个modal弹窗内都有下拉字典多选和下拉搜索组件时，打开另一个modal时组件的options不展示
+          return setPopContainer(node, props.popContainer);
+        } else {
+          if (typeof props.getPopupContainer === 'function') {
+            return props.getPopupContainer(node);
+          } else {
+            return node?.parentNode;
+          }
+        }
+      }
+
+      //获取关键词参数 支持设置排序信息
+      function getKeywordParam(text){
+        // 如果设定了排序信息，需要写入排序信息，在关键词后加 [orderby:create_time,desc]
+        if(props.params && props.params.column && props.params.order){
+          let temp = text||''
+          
+          // 代码逻辑说明: /issues/4905 表单生成器字段配置时，选择关联字段，在进行高级配置时，无法加载数据库列表，提示 Sgin签名校验错误！ #4905
+          temp = temp+'[orderby:'+props.params.column+','+props.params.order+']'
+          return encodeURI(temp);
+          
+        }else{
+          return text;
+        }
+      }
+      // 代码逻辑说明: 【TV360X-26】下拉搜索控件选中选项后再次点击下拉应该显示初始的下拉选项，而不是只展示选中结果
+      const handleAsyncFocus = () => {
+        // 代码逻辑说明: 【issues/6681】异步查询不生效
+        if ((isObject(selectedAsyncValue.value) || selectedAsyncValue.value?.length) && isDictTable.value && props.async) {
+          // 代码逻辑说明: 【TV360X-2062】下拉搜索选择第二页数据后，第一次点击时(得到焦点)滚动条没复原到初始位置且数据会加载第二页数据(应该只加载第一页数据)
+          options.value = [];
+          initDictTableData();
+        }
+        // 代码逻辑说明: 【TV360X-2348】得到焦点时options选项显示第一页内容（解决新增时显示非第一页内容）
+        if (Array.isArray(selectedAsyncValue.value) && selectedAsyncValue.value.length === 0 && isDictTable.value && props.async) {
+          if (pageNo > 2) {
+            options.value = [];
+            initDictTableData();
+          }
+        }
+        attrs.onFocus?.();
+      };
+
+      /**
+       * 2024-07-30
+       * liaozhiyang
+       * 【TV360X-1898】JsearchSelect组件传入字典表格式则支持滚动加载
+       * */
+      const handlePopupScroll = async (e) => {
+        // 字典表才才支持滚动加载
+        if (isDictTable.value) {
+          const { target } = e;
+          const { scrollTop, scrollHeight, clientHeight } = target;
+          if (!scrollLoading && isHasData && scrollTop + clientHeight >= scrollHeight - 10) {
+            scrollLoading = true;
+            let keywordInfo = getKeywordParam(searchKeyword);
+
+            defHttp
+              .get({ url: `/sys/dict/loadDict/${props.dict}`, params: { pageSize: props.pageSize, keyword: keywordInfo, pageNo } })
+              .then((res) => {
+                loading.value = false;
+                if (res?.length > 0) {
+                  // 防止开源只更新了前端代码没更新后端代码（第一页和第二页面的第一条数据相同则是后端代码没更新，没分页）
+                  if (JSON.stringify(res[0]) === JSON.stringify(options.value[0])) {
+                    isHasData =  false;
+                    return;
+                  }
+                  options.value.push(...res);
+                  pageNo++;
+                } else {
+                  isHasData = false;
+                }
+              })
+              .finally(() => {
+                scrollLoading = false;
+              })
+              .catch(() => {
+                pageNo != 1 && pageNo--;
+              });
+          }
+        }
+      };
+
+      return {
+        attrs,
+        options,
+        loading,
+        isDictTable,
+        selectedValue,
+        selectedAsyncValue,
+        loadData: useDebounceFn(loadData, 800),
+        getParentContainer,
+        filterOption,
+        handleChange,
+        handleAsyncChange,
+        handleAsyncFocus,
+        handlePopupScroll,
+        handleSelect,
+        handleDeSelect,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+.colorText {
+  display: inline-block;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 6px;
+  border-radius: 8px;
+  background-color: red;
+  color: #fff;
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectDepartPost.vue b/src/components/Form/src/jeecg/components/JSelectDepartPost.vue
new file mode 100644
index 0000000..52856e9
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectDepartPost.vue
@@ -0,0 +1,180 @@
+<!--部门选择组件-->
+<template>
+  <div class="JSelectDepartPost">
+    <JSelectBiz @change="handleSelectChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs" :isCustomRenderTag="isCustomRenderTag" :rowKey="getBindValue?.rowKey"/>
+    <a-form-item>
+      <DeptSelectModal @register="regModal" @getSelectResult="setValue" modalTitle="部门岗位选择" v-bind="getBindValue" :multiple="multiple" @close="handleClose" :izShowDepPath="izShowDepPath"/>
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import DeptSelectModal from './modal/DeptSelectModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide, unref, toRaw } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'JSelectDepartPost',
+    components: {
+      DeptSelectModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      // 是否允许多选，默认 true
+      multiple: propTypes.bool.def(true),
+      //是否只选择岗位
+      izOnlySelectDepartPost: propTypes.bool.def(true),
+      // 自定义渲染tag
+      isCustomRenderTag: propTypes.bool.def(true),
+      //是否显示部门路径（用户部门选择主岗位和兼职岗位需要显示全路径）
+      izShowDepPath: propTypes.bool.def(false),
+    },
+    emits: ['options-change', 'change', 'select', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<Recordable>({
+        value: [],
+      });
+      let tempSave: any = [];
+
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        tempSave = [];
+        props.value && initValue();
+      });
+
+      watch(
+        () => props.value,
+        () => {
+          initValue();
+        }
+      );
+
+      watch(selectOptions, () => {
+        if (selectOptions) {
+          emit('select', toRaw(unref(selectOptions)), toRaw(unref(selectValues)));
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string') {
+          selectValues.value = value.split(',');
+          tempSave = value.split(',');
+        } else {
+          selectValues.value = value;
+          tempSave = cloneDeep(value);
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        selectValues.value = values;
+        send(values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+
+      const handleClose = () => {
+        if (tempSave.length) {
+          selectValues.value = cloneDeep(tempSave);
+        } else {
+          send(tempSave);
+        }
+      };
+      const handleSelectChange = (values) => {
+        tempSave = cloneDeep(values);
+        send(tempSave);
+      };
+      const send = (values) => {
+        let result = typeof props.value == 'string' ? values.join(',') : values;
+        emit('update:value', result);
+        emit('change', result);
+        if (!values || values.length == 0) {
+          emit('select', null, null);
+        }
+      };
+
+      return {
+        // state,
+        attrs,
+        selectOptions,
+        selectValues,
+        loadingEcho,
+        getBindValue,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+        handleClose,
+        handleSelectChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .JSelectDepartPost {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectDept.vue b/src/components/Form/src/jeecg/components/JSelectDept.vue
new file mode 100644
index 0000000..9796e67
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectDept.vue
@@ -0,0 +1,198 @@
+<!--部门选择组件-->
+<template>
+  <div class="JSelectDept">
+    <JSelectBiz  @change="handleSelectChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs" :isCustomRenderTag="isCustomRenderTag" :rowKey="getBindValue?.rowKey"/>
+    <a-form-item>
+      <DeptSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" :multiple="multiple" @close="handleClose"/>
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import DeptSelectModal from './modal/DeptSelectModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide, unref, toRaw } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'JSelectDept',
+    components: {
+      DeptSelectModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      // 是否允许多选，默认 true
+      multiple: propTypes.bool.def(true),
+      // 自定义渲染tag
+      isCustomRenderTag: propTypes.bool.def(true),
+    },
+    emits: ['options-change', 'change', 'select', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      // const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<Recordable>({
+        value: [],
+      });
+      let tempSave: any = [];
+
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        // 代码逻辑说明: [TV360X-840]用户授权，没有选择，点取消，也会回显一个选过的用户
+        tempSave = [];
+        props.value && initValue();
+      });
+
+      // 代码逻辑说明: 为了解决弹窗form初始化赋值问题 ---
+      watch(
+        () => props.value,
+        () => {
+          initValue();
+        }
+      );
+      /**
+       * 监听selectValues变化
+       */
+      // watch(selectValues, () => {
+      //   if (selectValues) {
+      //     state.value = selectValues.value;
+      //   }
+      // });
+      /**
+       * 监听selectOptions变化
+       */
+      watch(selectOptions, () => {
+        if (selectOptions) {
+          emit('select', toRaw(unref(selectOptions)), toRaw(unref(selectValues)));
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string') {
+          // state.value = value.split(',');
+          selectValues.value = value.split(',');
+          tempSave = value.split(',');
+        } else {
+          // 【VUEN-857】兼容数组（行编辑的用法问题）
+          selectValues.value = value;
+          tempSave = cloneDeep(value);
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        // state.value = values;
+        selectValues.value = values;
+        send(values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+
+       // 代码逻辑说明: 【TV360X-414】部门设置了默认值，查询重置变成空了(同步JSelectUser组件改法)
+      const handleClose = () => {
+        if (tempSave.length) {
+          selectValues.value = cloneDeep(tempSave);
+        } else {
+          send(tempSave);
+        }
+      };
+      const handleSelectChange = (values) => {
+        tempSave = cloneDeep(values);
+        send(tempSave);
+      };
+      const send = (values) => {
+        let result = typeof props.value == 'string' ? values.join(',') : values;
+        emit('update:value', result);
+        emit('change', result);
+        // 代码逻辑说明: 【TV360X-1648】用户编辑界面“所属部门”与“负责部门”联动出错（同步之前丢的代码）
+        if (!values || values.length == 0) {
+          emit('select', null, null);
+        }
+      };
+      
+      return {
+        // state,
+        attrs,
+        selectOptions,
+        selectValues,
+        loadingEcho,
+        getBindValue,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+        handleClose,
+        handleSelectChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JSelectDept {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectInput.vue b/src/components/Form/src/jeecg/components/JSelectInput.vue
new file mode 100644
index 0000000..9fa1c65
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectInput.vue
@@ -0,0 +1,89 @@
+<template>
+  <a-select v-bind="bindProps" @change="onChange" @search="onSearch" />
+</template>
+
+<script lang="ts">
+  import { propTypes } from '/@/utils/propTypes';
+  import { defineComponent, ref, watch, computed } from 'vue';
+
+  // 可以输入的下拉框（此组件暂时没有人用）
+  export default defineComponent({
+    name: 'JSelectInput',
+    props: {
+      options: propTypes.array.def(() => []),
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit, attrs }) {
+      // 内部 options 选项
+      const options = ref<any[]>([]);
+      // 监听外部 options 变化，并覆盖内部 options
+      watch(
+        () => props.options,
+        () => {
+          options.value = [...props.options];
+        },
+        { deep: true, immediate: true }
+      );
+      // 合并 props 和 attrs
+      const bindProps: any = computed(() =>
+        Object.assign(
+          {
+            showSearch: true,
+          },
+          props,
+          attrs,
+          {
+            options: options.value,
+          }
+        )
+      );
+
+      function onChange(...args: any[]) {
+        deleteSearchAdd(args[0]);
+        emit('change', ...args);
+        emit('update:value', args[0]);
+      }
+
+      function onSearch(value) {
+        // 是否找到了对应的项，找不到则添加这一项
+        let foundIt =
+          options.value.findIndex((option) => {
+            return option.value.toString() === value.toString();
+          }) !== -1;
+        // !!value ：不添加空值
+        if (!foundIt && !!value) {
+          deleteSearchAdd(value);
+          // searchAdd 是否是通过搜索添加的
+          options.value.push({ value: value, searchAdd: true });
+          //onChange(value,{ value })
+        } else if (foundIt) {
+          onChange(value);
+        }
+      }
+
+      // 删除无用的因搜索（用户输入）而创建的项
+      function deleteSearchAdd(value = '') {
+        let indexes: any[] = [];
+        options.value.forEach((option, index) => {
+          if (option.searchAdd) {
+            if ((option.value ?? '').toString() !== value.toString()) {
+              indexes.push(index);
+            }
+          }
+        });
+        // 翻转删除数组中的项
+        for (let index of indexes.reverse()) {
+          options.value.splice(index, 1);
+        }
+      }
+
+      return {
+        bindProps,
+        onChange,
+        onSearch,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/Form/src/jeecg/components/JSelectMultiple.vue b/src/components/Form/src/jeecg/components/JSelectMultiple.vue
new file mode 100644
index 0000000..2d2ceac
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectMultiple.vue
@@ -0,0 +1,244 @@
+<!--字典下拉多选-->
+<template>
+  <a-select
+    :value="arrayValue"
+    @change="onChange"
+    mode="multiple"
+    :filter-option="useLoadDict ? false : filterOption"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    allowClear
+    showSearch
+    :getPopupContainer="getParentContainer"
+    :notFoundContent="loading ? undefined : null"
+    @search="handleSearch"
+    @dropdown-visible-change="handleDropdownVisibleChange"
+    @popupScroll="handlePopupScroll"
+  >
+    <template #notFoundContent>
+      <a-spin v-if="loading" size="small" />
+    </template>
+    <template v-for="item of getOptions" :key="item.key">
+      <a-select-option :value="item.value" :getPopupContainer="getParentContainer">
+        <span :class="item.class" :style="item.style">{{ item.text }}</span>
+      </a-select-option>
+    </template>
+  </a-select>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, onMounted, ref, nextTick, watch } from 'vue';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { initDictOptions } from '/@/utils/dict/index';
+  import { setPopContainer } from '/@/utils';
+  import { useScrollLoadDict } from '../hooks/useSelectMultipleScrollLoad';
+
+  export default defineComponent({
+    name: 'JSelectMultiple',
+    components: {},
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      placeholder: {
+        type: String,
+        default: '请选择',
+        required: false,
+      },
+      readOnly: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      options: {
+        type: Array,
+        default: () => [],
+        required: false,
+      },
+      triggerChange: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      spliter: {
+        type: String,
+        required: false,
+        default: ',',
+      },
+      popContainer: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      dictCode: {
+        type: String,
+        required: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      useDicColor: {
+        type: Boolean,
+        default: false,
+      },
+      // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+      // 分页时每页条数，仅当 scrollLoad 为 true 且 dictCode 为字典表格式时生效
+      pageSize: { type: Number, default: 10 },
+      // 是否滚动加载，为 true 且 dictCode 为字典表格式(table,text,code)时走 /sys/dict/loadDict/，否则走 initDictOptions
+      scrollLoad: { type: Boolean, default: false },
+      // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+    },
+    emits: ['options-change', 'change', 'input', 'update:value'],
+    setup(props, { emit }) {
+      //console.info(props);
+      const emitData = ref<any[]>([]);
+      const arrayValue = ref<any[]>(
+        !props.value ? [] : Array.isArray(props.value) ? props.value : (props.value as string).split(props.spliter)
+      );
+      const dictOptions = ref<any[]>([]);
+      const attrs = useAttrs();
+      const [state, , , formItemContext] = useRuleFormItem(props, 'value', 'change', emitData);
+      // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+      const scrollLoadApi = useScrollLoadDict(props, dictOptions, arrayValue);
+      const { useLoadDict, loading, loadDictOptions: loadDictOptionsScroll, ensureValueInOptions, handleSearch, handleDropdownVisibleChange, handlePopupScroll, isDictTable } = scrollLoadApi;
+      // update-end--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+      // 处理下拉选项
+      const getOptions = computed(() => {
+        if (!Array.isArray(dictOptions.value)) {
+          return [];
+        }
+        return dictOptions.value.map((item, index) => {
+          const {useDicColor} = props;
+          const text = item.text || item.label || item.label || '';
+          const key = item.value + '_' + text + '_' + index;
+          return {
+            key: key,
+            text: text,
+            value: item.value,
+            color: item.color,
+            class: [useDicColor && item.color ? 'colorText' : ''],
+            style: {backgroundColor: `${useDicColor && item.color}`},
+          };
+        });
+      });
+
+      onMounted(() => {
+        if (props.dictCode) {
+          loadDictOptions();
+        } else {
+          dictOptions.value = props.options;
+        }
+      });
+
+      watch(
+          () => props.dictCode,
+          () => {
+            if (props.dictCode) {
+              loadDictOptions();
+            } else {
+              dictOptions.value = props.options;
+            }
+          }
+      );
+
+      watch(
+        () => props.value,
+        (val) => {
+          if (!val) {
+            arrayValue.value = [];
+          } else {
+            arrayValue.value = Array.isArray(props.value) ? props.value : (props.value as string).split(props.spliter);
+          }
+          if (useLoadDict.value) ensureValueInOptions();
+        }
+      );
+
+      //适用于 动态改变下拉选项的操作
+      watch(()=>props.options, ()=>{
+        if (props.dictCode) {
+          // update-begin--author:liaozhiyang---date:20260325---for:【QQYUN-15021】online js增强修改下拉不生效
+          // online js增强改变options
+          dictOptions.value = props.options;
+          // update-end--author:liaozhiyang---date:20260325---for:【QQYUN-15021】online js增强修改下拉不生效
+        } else {
+          dictOptions.value = props.options;
+        }
+      });
+
+      function onChange(selectedValue) {
+        if (props.triggerChange) {
+          emit('change', selectedValue.join(props.spliter));
+          emit('update:value', selectedValue.join(props.spliter));
+        } else {
+          emit('input', selectedValue.join(props.spliter));
+          emit('update:value', selectedValue.join(props.spliter));
+        }
+        // 代码逻辑说明: 【QQYUN-9110】组件有值校验没消失
+        nextTick(() => {
+          formItemContext?.onFieldChange();
+        });
+      }
+
+      function getParentContainer(node) {
+        if (!props.popContainer) {
+          return node?.parentNode;
+        } else {
+          // 代码逻辑说明: 【QQYUN-9339】有多个modal弹窗内都有下拉字典多选和下拉搜索组件时，打开另一个modal时组件的options不展示
+          return setPopContainer(node, props.popContainer);
+        }
+      }
+
+      async function loadDictOptions() {
+        // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+        if (useLoadDict.value) {
+          loadDictOptionsScroll();
+        } else {
+          const code = props.dictCode ?? '';
+          try {
+            const dictData = await initDictOptions(code);
+            dictOptions.value = dictData;
+          } catch (error) {
+            console.error('initDictOptions error:', error);
+            dictOptions.value = [];
+          }
+        }
+        // update-end--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+      }
+
+      // 代码逻辑说明: VUEN-1145 下拉多选，搜索时，查不到数据
+      function filterOption(input, option) {
+        return option.children()[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+      }
+
+      return {
+        state,
+        attrs,
+        getOptions,
+        dictOptions,
+        onChange,
+        arrayValue,
+        getParentContainer,
+        filterOption,
+        isDictTable,
+        useLoadDict,
+        loading,
+        handlePopupScroll,
+        handleSearch,
+        handleDropdownVisibleChange,
+      };
+    },
+  });
+</script>
+<style scoped lang='less'>
+.colorText{
+  display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    border-radius: 8px;
+    background-color: red;
+    color: #fff;
+    font-size: 12px;
+}
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectPosition.vue b/src/components/Form/src/jeecg/components/JSelectPosition.vue
new file mode 100644
index 0000000..fc7bc63
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectPosition.vue
@@ -0,0 +1,172 @@
+<!--职务选择组件-->
+<template>
+  <div class="JSelectPosition">
+    <JSelectBiz @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs" @change="(changeValue) => $emit('update:value', changeValue)"></JSelectBiz>
+    <a-form-item>
+      <PositionSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue"></PositionSelectModal>
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import PositionSelectModal from './modal/PositionSelectModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide, computed, unref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+
+  export default defineComponent({
+    name: 'JSelectPosition',
+    components: {
+      PositionSelectModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      labelKey: {
+        type: String,
+        default: 'name',
+      },
+      rowKey: {
+        type: String,
+        default: 'id',
+      },
+      params: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<any>({
+        value: [],
+        change: false,
+      });
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      // 代码逻辑说明: 【pull/8014】插槽方式弹窗中取消该数据checkbox的选中状态，需要点击第二次才生效。
+      watch(
+        () => props.value,
+        () => {
+          if (props.value) {
+            initValue();
+          } else {
+            // 代码逻辑说明: 【issues/8233】resetFields时无法重置
+            if (selectValues.value?.length) {
+              selectValues.value = [];
+            }
+          }
+        },
+        { deep: true, immediate: true }
+      );
+
+      /**
+       * 监听selectValues变化
+       */
+      watch(selectValues, () => {
+        if (selectValues) {
+          state.value = selectValues.value;
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          state.value = value.split(',');
+          selectValues.value = value.split(',');
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        state.value = values;
+        selectValues.value = values;
+        // 代码逻辑说明: 选择职务组件v-model方式绑定值不生效
+        emit('update:value', values.join(','));
+
+      }
+
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      return {
+        state,
+        getBindValue,
+        attrs,
+        selectOptions,
+        selectValues,
+        loadingEcho,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JSelectPosition {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectRole.vue b/src/components/Form/src/jeecg/components/JSelectRole.vue
new file mode 100644
index 0000000..50bec10
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectRole.vue
@@ -0,0 +1,164 @@
+<!--角色选择组件-->
+<template>
+  <div class="JSelectRole">
+    <JSelectBiz @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JSelectBiz>
+    <a-form-item>
+      <RoleSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue"></RoleSelectModal>
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import RoleSelectModal from './modal/RoleSelectModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, unref, reactive, watchEffect, watch, provide } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+
+  export default defineComponent({
+    name: 'JSelectRole',
+    components: {
+      RoleSelectModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      labelKey: {
+        type: String,
+        default: 'roleName',
+      },
+      rowKey: {
+        type: String,
+        default: 'id',
+      },
+      params: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<Recordable>({
+        value: [],
+        change: false,
+      });
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        props.value && initValue();
+        // 查询条件重置的时候，清空界面显示
+        if (!props.value) {
+          selectValues.value = [];
+        }
+      });
+
+      /**
+       * 监听selectValues变化
+       */
+      watch(selectValues, () => {
+        if (selectValues) {
+          state.value = selectValues.value;
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          state.value = value.split(',');
+          selectValues.value = value.split(',');
+        } else {
+          selectValues.value = value;
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        state.value = values;
+        selectValues.value = values;
+        // 代码逻辑说明: 【issues/7948】修复JselectRole组件不支持双向绑定
+        emit('update:value', values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      return {
+        state,
+        attrs,
+        getBindValue,
+        selectOptions,
+        selectValues,
+        loadingEcho,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JSelectRole {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectSingle.vue b/src/components/Form/src/jeecg/components/JSelectSingle.vue
new file mode 100644
index 0000000..1b94045
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectSingle.vue
@@ -0,0 +1,323 @@
+<!-- 字典下拉单选 -->
+<template>
+  <a-select
+    :value="innerValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :filter-option="filterOptionComputed"
+    :showSearch="showSearch"
+    :getPopupContainer="getPopupContainer"
+    :notFoundContent="loading ? undefined : null"
+    allowClear
+    @change="handleChange"
+    @search="handleSearch"
+    @popupScroll="handlePopupScroll"
+    @dropdownVisibleChange="handleDropdownVisibleChange"
+    v-bind="$attrs"
+  >
+    <template #notFoundContent>
+      <a-spin v-if="loading" size="small" />
+    </template>
+    <template v-for="item in selectOptions" :key="item.key">
+      <a-select-option :value="item.value" :getPopupContainer="getPopupContainer">
+        <span :class="item.class" :style="item.style">{{ item.text }}</span>
+      </a-select-option>
+    </template>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch, unref } from 'vue';
+  import { debounce } from 'lodash-es';
+  import { initDictOptions } from '/@/utils/dict/index';
+  import { setPopContainer } from '/@/utils';
+  import { defHttp } from '/@/utils/http/axios';
+
+  defineOptions({ name: 'JSelectSingle' });
+
+  // --- Props & Emits ---
+  interface DictOption {
+    value: string | number;
+    label?: string;
+    text?: string;
+    color?: string;
+  }
+
+  interface SelectOptionItem {
+    key: string;
+    text: string;
+    value: string | number;
+    class: string[];
+    style: { backgroundColor: string };
+  }
+
+  /** 下拉单选组件的值类型（可被 change / update:value / input 等复用） */
+  export type SelectSingleValue = string | number | undefined;
+
+  const props = withDefaults(
+    defineProps<{
+      value?: SelectSingleValue;
+      placeholder?: string;
+      readOnly?: boolean;
+      options?: DictOption[];
+      triggerChange?: boolean;
+      popContainer?: string;
+      dictCode?: string;
+      disabled?: boolean;
+      useDicColor?: boolean;
+      pageSize?: number;
+      scrollLoad?: boolean;
+    }>(),
+    {
+      placeholder: '请选择',
+      readOnly: false,
+      options: () => [],
+      triggerChange: true,
+      popContainer: '',
+      disabled: false,
+      useDicColor: false,
+      pageSize: 10,
+      scrollLoad: false,
+    }
+  );
+  const emit = defineEmits<{
+    (e: 'change', value: SelectSingleValue): void;
+    (e: 'update:value', value: SelectSingleValue): void;
+    (e: 'input', value: SelectSingleValue): void;
+    (e: 'options-change'): void;
+  }>();
+
+  // --- 选项数据 ---
+  const innerValue = ref<SelectSingleValue>(props.value ?? undefined);
+  const dictOptions = ref<DictOption[]>([]);
+  const loading = ref(false);
+  const searchKeyword = ref('');
+
+  // --- 字典加载（分页滚动） ---
+  const scrollState = {
+    pageNo: 1,
+    hasMore: true,
+    loading: false,
+  };
+
+  const isDictTable = computed(() => {
+    if (!props.dictCode) return false;
+    return props.dictCode.split(',').length >= 2;
+  });
+
+  const useLoadDict = computed(() => props.scrollLoad && isDictTable.value);
+
+  const selectOptions = computed<SelectOptionItem[]>(() => {
+    if (!Array.isArray(dictOptions.value)) return [];
+    return dictOptions.value.map((item, index) => {
+      const text = item.text ?? item.label ?? '';
+      return {
+        key: `${item.value}_${text}_${index}`,
+        text,
+        value: item.value,
+        class: [props.useDicColor && item.color ? 'colorText' : ''],
+        style: { backgroundColor: props.useDicColor && item.color ? String(item.color) : '' },
+      };
+    });
+  });
+
+  function fetchDictPage(pageNo: number, append: boolean) {
+    return defHttp
+      .get({
+        url: `/sys/dict/loadDict/${props.dictCode}`,
+        params: { pageNo, pageSize: props.pageSize, keyword: searchKeyword.value, order: 'asc' },
+      })
+      .then((res: any[]) => {
+        const items: DictOption[] = (res ?? []).map((it) => ({
+          value: it.value,
+          label: it.text ?? it.label,
+        }));
+        if (items.length === 0) {
+          if (!append) dictOptions.value = [];
+          scrollState.hasMore = false;
+          return;
+        }
+        if (append) {
+          const existValues = new Set(dictOptions.value.map((o) => String(o.value)));
+          const newItems = items.filter((it) => !existValues.has(String(it.value)));
+          if (newItems.length > 0) {
+            dictOptions.value = [...dictOptions.value, ...newItems];
+          }
+        } else {
+          // 有选中的值且optinos中存在时，需要把选中的值在options中存在且不在新数据中的项保留（防止多次请求）
+          if (unref(innerValue) && unref(dictOptions).length) {
+            const existItem = unref(dictOptions).find((item) => String(item.value) === String(unref(innerValue)));
+            if (existItem && !items.some((item) => String(item.value) === String(existItem.value))) {
+              items.push(existItem);
+            }
+          }
+          dictOptions.value = items;
+        }
+        scrollState.pageNo = pageNo + 1;
+      });
+  }
+
+  async function loadDictOptions() {
+    if (useLoadDict.value) {
+      scrollState.pageNo = 1;
+      scrollState.hasMore = true;
+      loading.value = true;
+      fetchDictPage(1, false)
+        .catch(() => {
+          dictOptions.value = [];
+        })
+        .finally(() => {
+          loading.value = false;
+          ensureValueInOptions();
+        });
+    } else {
+      let code = props.dictCode ?? '';
+      try {
+        const dictData = await initDictOptions(code);
+        dictOptions.value = dictData;
+      } catch (error) {
+        console.error('initDictOptions error:', error);
+        dictOptions.value = [];
+      }
+    }
+  }
+
+  /** 根据 value 拉取单条字典项用于回显（编辑时当前值不在已加载选项中时） */
+  function fetchDictItemByValue(val: SelectSingleValue): Promise<DictOption | null> {
+    if (val == null) return Promise.resolve(null);
+    return defHttp
+      .get({ url: `/sys/dict/loadDictItem/${props.dictCode}`, params: { key: val } })
+      .then((res: any) => {
+        if (Array.isArray(res)) {
+          return { value: val, label: res[0] };
+        }
+        return null;
+      })
+      .catch(() => null);
+  }
+
+  /** 确保当前 value 在选项中（仅 useLoadDict 时：编辑时当前值不在已加载列表中则拉取单条并插入） */
+  function ensureValueInOptions() {
+    if (!useLoadDict.value) return;
+    const val = innerValue.value;
+    if (val == null) return;
+    const exists = dictOptions.value.some((o) => String(o.value) === String(val));
+    if (exists) return;
+    fetchDictItemByValue(val).then((item) => {
+      if (item) dictOptions.value = [item].concat(dictOptions.value);
+    });
+  }
+
+  const handleSearch = debounce((keyword: string) => {
+    if (!useLoadDict.value) return;
+    searchKeyword.value = keyword ?? '';
+    scrollState.pageNo = 1;
+    scrollState.hasMore = true;
+    loading.value = true;
+    fetchDictPage(1, false)
+      .catch(() => {
+        dictOptions.value = [];
+      })
+      .finally(() => {
+        loading.value = false;
+        ensureValueInOptions();
+      });
+  }, 300);
+
+  function handleDropdownVisibleChange(open: boolean) {
+    if (!open || !useLoadDict.value) return;
+    scrollState.pageNo = 1;
+    scrollState.hasMore = true;
+    searchKeyword.value = '';
+    loading.value = true;
+    fetchDictPage(1, false)
+      .finally(() => {
+        loading.value = false;
+        ensureValueInOptions();
+      });
+  }
+
+  function handlePopupScroll(e: Event) {
+    if (!useLoadDict.value || scrollState.loading || !scrollState.hasMore) return;
+    const target = e.target as HTMLElement;
+    const { scrollTop, scrollHeight, clientHeight } = target;
+    if (scrollTop + clientHeight < scrollHeight - 10) return;
+    scrollState.loading = true;
+    fetchDictPage(scrollState.pageNo, true)
+      .finally(() => {
+        scrollState.loading = false;
+      })
+      .catch(() => {
+        if (scrollState.pageNo > 1) {
+          scrollState.pageNo--;
+        }
+      });
+  }
+
+  // --- 弹层挂载 & 搜索过滤 ---
+  const showSearch = computed(() => useLoadDict.value);
+  function getPopupContainer(node: HTMLElement) {
+    return props.popContainer ? setPopContainer(node, props.popContainer) : node?.parentNode;
+  }
+
+  function filterOption(input: string, option: any) {
+    const node = option.children?.();
+    const text = (node?.[0]?.children ?? '').toString().toLowerCase();
+    return text.indexOf(input.toLowerCase()) >= 0;
+  }
+  const filterOptionComputed = computed(() => (input: string, option: any) => {
+    if (useLoadDict.value) return true;
+    return filterOption(input, option);
+  });
+
+  // --- 选择变更 ---
+  function handleChange(value: SelectSingleValue) {
+    const val = value ?? undefined;
+    if (props.triggerChange) {
+      emit('change', val);
+    } else {
+      emit('input', val);
+    }
+    emit('update:value', val);
+  }
+
+  // --- 初始化与监听 ---
+  function syncOptionsFromProps() {
+    if (props.dictCode) {
+      loadDictOptions();
+    } else {
+      dictOptions.value = props.options ?? [];
+    }
+  }
+  watch(() => props.dictCode, syncOptionsFromProps);
+
+  watch(
+    () => props.value,
+    (val) => {
+      innerValue.value = val ?? undefined;
+      if (useLoadDict.value) ensureValueInOptions();
+    }
+  );
+
+  watch(
+    () => props.options,
+    () => {
+      if (!props.dictCode) dictOptions.value = props.options ?? [];
+    }
+  );
+
+  syncOptionsFromProps();
+</script>
+
+<style scoped lang="less">
+  .colorText {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    border-radius: 8px;
+    background-color: red;
+    color: #fff;
+    font-size: 12px;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectUser.vue b/src/components/Form/src/jeecg/components/JSelectUser.vue
new file mode 100644
index 0000000..5f48f32
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectUser.vue
@@ -0,0 +1,212 @@
+<!--用户选择组件-->
+<template>
+  <div class="JselectUser">
+    <JSelectBiz @change="handleSelectChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JSelectBiz>
+    <a-form-item>
+      <UserSelectModal
+        :rowKey="rowKey"
+        @register="regModal"
+        @getSelectResult="setValue"
+        v-bind="getBindValue"
+        :excludeUserIdList="excludeUserIdList"
+        @close="handleClose"
+      />
+    </a-form-item>
+  </div>
+</template>
+<script lang="ts">
+  import { unref } from 'vue';
+  import UserSelectModal from './modal/UserSelectModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'JSelectUser',
+    components: {
+      UserSelectModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      labelKey: {
+        type: String,
+        default: 'realname',
+      },
+      rowKey: {
+        type: String,
+        default: 'username',
+      },
+      params: {
+        type: Object,
+        default: () => {},
+      },
+      //排除用户id的集合
+      excludeUserIdList:{
+        type: Array,
+        default: () => [],
+      }
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      // const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<Recordable>({
+        value: [],
+        change: false,
+      });
+      let tempSave: any = [];
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        // 代码逻辑说明: [TV360X-840]用户授权，没有选择，点取消，也会回显一个选过的用户
+        tempSave = [];
+        props.value && initValue();
+        // 查询条件重置的时候 界面显示未清空
+        if (!props.value) {
+          selectValues.value = [];
+        }
+      });
+
+      /**
+       * 监听selectValues变化
+       */
+      // watch(selectValues, () => {
+      //   if (selectValues) {
+      //     state.value = selectValues.value;
+      //   }
+      // });
+
+      // 代码逻辑说明: 【QQYUN-5685】5、离职人员可以选自己------------
+      const excludeUserIdList = ref<any>([]);
+      
+      /**
+       * 需要监听一下excludeUserIdList，否则modal获取不到
+       */ 
+      watch(()=>props.excludeUserIdList,(data)=>{
+        excludeUserIdList.value = data;
+      },{ immediate: true })
+      
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          // state.value = value.split(',');
+          selectValues.value = value.split(',');
+          tempSave = value.split(',');
+        } else {
+          // 【VUEN-857】兼容数组（行编辑的用法问题）
+          selectValues.value = value;
+          tempSave = cloneDeep(value);
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        // state.value = values;
+        selectValues.value = values;
+        send(values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      // 代码逻辑说明: 【QQYUN-9366】用户选择组件取消和关闭会把选择数据带入
+      const handleClose = () => {
+        if (tempSave.length) {
+          selectValues.value = cloneDeep(tempSave);
+        } else {
+          send(tempSave);
+        }
+      };
+      const handleSelectChange = (values) => {
+        tempSave = cloneDeep(values);
+        send(tempSave);
+      };
+      const send = (values) => {
+        let result = typeof props.value == "string" ? values.join(',') : values;
+        emit('update:value', result);
+        emit('change', result);
+      };
+      return {
+        // state,
+        attrs,
+        selectOptions,
+        getBindValue,
+        selectValues,
+        loadingEcho,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+        excludeUserIdList,
+        handleClose,
+        handleSelectChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-9260】必填模式下会影响到弹窗内antd组件的样式
+  .JselectUser {
+    > .ant-form-item {
+      display: none;
+    }
+  }
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectUserByDepartment.vue b/src/components/Form/src/jeecg/components/JSelectUserByDepartment.vue
new file mode 100644
index 0000000..1fdd5d3
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectUserByDepartment.vue
@@ -0,0 +1,176 @@
+<!--用户选择组件-->
+<template>
+  <div>
+    <JSelectBiz @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs" @change="handleSelectChange"></JSelectBiz>
+    <JSelectUserByDepartmentModal
+      v-if="modalShow"
+      :selectedUser="selectOptions"
+      :modalTitle="modalTitle"
+      :rowKey="rowKey"
+      :labelKey="labelKey"
+      :isRadioSelection="isRadioSelection"
+      :params="params"
+      @register="regModal"
+      @change="setValue"
+      @close="() => (modalShow = false)"
+      v-bind="attrs"
+    ></JSelectUserByDepartmentModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, watch, provide } from 'vue';
+  import JSelectUserByDepartmentModal from './modal/JSelectUserByDepartmentModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  import { isArray, isString, isObject } from '/@/utils/is';
+  import { getTableList as getTableListOrigin } from '/@/api/common/api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  defineOptions({ name: 'JSelectUserByDepartment' });
+  const props = defineProps({
+    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    modalTitle: {
+      type: String,
+      default: '部门用户选择',
+    },
+    rowKey: {
+      type: String,
+      default: 'username',
+    },
+    labelKey: {
+      type: String,
+      default: 'realname',
+    },
+    //查询参数
+    params: {
+      type: Object,
+      default: () => {},
+    },
+    isRadioSelection: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emit = defineEmits(['options-change', 'change', 'update:value']);
+  const { createMessage } = useMessage();
+  //注册model
+  const [regModal, { openModal }] = useModal();
+  // 是否显示弹窗
+  const modalShow = ref(false);
+  //下拉框选项值
+  const selectOptions: any = ref<SelectValue>([]);
+  //下拉框选中值
+  let selectValues: any = reactive<object>({
+    value: [],
+    change: false,
+  });
+  // 是否正在加载回显数据
+  const loadingEcho = ref<boolean>(false);
+  //下发 selectOptions,xxxBiz组件接收
+  provide('selectOptions', selectOptions);
+  //下发 selectValues,xxxBiz组件接收
+  provide('selectValues', selectValues);
+  //下发 loadingEcho,xxxBiz组件接收
+  provide('loadingEcho', loadingEcho);
+
+  const attrs: any = useAttrs();
+
+  // 打开弹窗
+  function handleOpen() {
+    modalShow.value = true;
+    setTimeout(() => {
+      openModal(true, {
+        isUpdate: false,
+      });
+    }, 0);
+  }
+  const handleSelectChange = (data) => {
+    selectOptions.value = selectOptions.value.filter((item) => data.includes(item[props.rowKey]));
+    setValue(selectOptions.value);
+  };
+  // 设置下拉框的值
+  const setValue = (data) => {
+    selectOptions.value = data.map((item) => {
+      return {
+        ...item,
+        label: item[props.labelKey],
+        value: item[props.rowKey],
+      };
+    });
+    selectValues.value = data.map((item) => item[props.rowKey]);
+    // 更新value
+    emit('update:value', selectValues.value);
+    // 触发change事件（不转是因为basicForm提交时会自动将字符串转化为数组）
+    emit('change', selectValues.value);
+    // 触发options-change事件
+    emit('options-change', selectOptions.value);
+  };
+  // 翻译
+  const transform = () => {
+    let value = props.value;
+    let len;
+    if (isArray(value) || isString(value)) {
+      if (isArray(value)) {
+        len = value.length;
+        value = value.join(',');
+      } else {
+        len = value.split(',').length;
+      }
+      value = value.trim();
+      if (value) {
+        // 如果value的值在selectedUser中存在，则不请求翻译
+        let isNotRequestTransform = false;
+        isNotRequestTransform = value.split(',').every((value) => !!selectOptions.value.find((item) => item[props.rowKey] === value));
+        if (isNotRequestTransform) {
+          selectValues.value = value.split(',')
+          return;
+        }
+        const params = { isMultiTranslate: true, pageSize: len, [props.rowKey]: value };
+        if (isObject(attrs.params)) {
+          Object.assign(params, attrs.params);
+        }
+        getTableListOrigin(params).then((result: any) => {
+          const records = result.records ?? [];
+          selectValues.value = records.map((item) => item[props.rowKey]);
+          selectOptions.value = records.map((item) => {
+            return {
+              ...item,
+              label: item[props.labelKey],
+              value: item[props.rowKey],
+            };
+          });
+        });
+      }
+    } else {
+      selectValues.value = [];
+    }
+  };
+  // 监听value变化
+  watch(
+    () => props.value,
+    () => {
+      transform();
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+<style lang="less" scoped>
+  .j-select-row {
+    @width: 82px;
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+    .right {
+      width: @width;
+    }
+    .full {
+      width: 100%;
+    }
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectUserByDept.vue b/src/components/Form/src/jeecg/components/JSelectUserByDept.vue
new file mode 100644
index 0000000..9fe290e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectUserByDept.vue
@@ -0,0 +1,157 @@
+<!--用户选择组件-->
+<template>
+  <div>
+    <JSelectBiz @change="handleChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JSelectBiz>
+    <UserSelectByDepModal :rowKey="rowKey" @register="regModal" @getSelectResult="setValue" v-bind="getBindValue"></UserSelectByDepModal>
+  </div>
+</template>
+<script lang="ts">
+  import { unref } from 'vue';
+  import UserSelectByDepModal from './modal/UserSelectByDepModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  export default defineComponent({
+    name: 'JSelectUserByDept',
+    components: {
+      UserSelectByDepModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      rowKey: {
+        type: String,
+        default: 'username',
+      },
+      labelKey: {
+        type: String,
+        default: 'realname',
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<object>({
+        value: [],
+        change: false,
+      });
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        initValue();
+      });
+
+      /**
+       * 监听selectValues变化
+       */
+      watch(selectValues, () => {
+        if (selectValues) {
+          // 代码逻辑说明: 【QQYUN-12869】通过部门选择用户组件，必填状态下选择用户后，点击重置后，会出校验信息
+          if (props.value === undefined && selectValues.value?.length == 0) {
+            return;
+          }
+          state.value = selectValues.value;
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          state.value = value.split(',');
+          selectValues.value = value.split(',');
+        } else {
+          selectValues.value = value;
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        state.value = values;
+        selectValues.value = values;
+        emit('update:value', values);
+        emit('options-change', options);
+      }
+
+      function handleChange(values) {
+        emit('update:value', values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      return {
+        state,
+        attrs,
+        selectOptions,
+        getBindValue,
+        selectValues,
+        loadingEcho,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSelectUserByDeptPost.vue b/src/components/Form/src/jeecg/components/JSelectUserByDeptPost.vue
new file mode 100644
index 0000000..ec7bf9b
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSelectUserByDeptPost.vue
@@ -0,0 +1,157 @@
+<!--用户选择组件-->
+<template>
+  <div>
+    <JSelectBiz @change="handleChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JSelectBiz>
+    <UserSelectByDepPostModal :rowKey="rowKey" @register="regModal" @getSelectResult="setValue" v-bind="getBindValue"></UserSelectByDepPostModal>
+  </div>
+</template>
+<script lang="ts">
+  import { unref } from 'vue';
+  import UserSelectByDepPostModal from './modal/UserSelectByDepPostModal.vue';
+  import JSelectBiz from './base/JSelectBiz.vue';
+  import { defineComponent, ref, reactive, watchEffect, watch, provide } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { SelectValue } from 'ant-design-vue/es/select';
+  export default defineComponent({
+    name: 'JSelectUserByDeptPost',
+    components: {
+      UserSelectByDepPostModal,
+      JSelectBiz,
+    },
+    inheritAttrs: false,
+    props: {
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      rowKey: {
+        type: String,
+        default: 'username',
+      },
+      labelKey: {
+        type: String,
+        default: 'realname',
+      },
+    },
+    emits: ['options-change', 'change', 'update:value'],
+    setup(props, { emit, refs }) {
+      const emitData = ref<any[]>();
+      //注册model
+      const [regModal, { openModal }] = useModal();
+      //表单值
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+      //下拉框选项值
+      const selectOptions = ref<SelectValue>([]);
+      //下拉框选中值
+      let selectValues = reactive<object>({
+        value: [],
+        change: false,
+      });
+      // 是否正在加载回显数据
+      const loadingEcho = ref<boolean>(false);
+      //下发 selectOptions,xxxBiz组件接收
+      provide('selectOptions', selectOptions);
+      //下发 selectValues,xxxBiz组件接收
+      provide('selectValues', selectValues);
+      //下发 loadingEcho,xxxBiz组件接收
+      provide('loadingEcho', loadingEcho);
+
+      const tag = ref(false);
+      const attrs = useAttrs();
+
+      /**
+       * 监听组件值
+       */
+      watchEffect(() => {
+        initValue();
+      });
+
+      /**
+       * 监听selectValues变化
+       */
+      watch(selectValues, () => {
+        if (selectValues) {
+          // 代码逻辑说明: 【QQYUN-12869】通过部门选择用户组件，必填状态下选择用户后，点击重置后，会出校验信息
+          if (props.value === undefined && selectValues.value?.length == 0) {
+            return;
+          }
+          state.value = selectValues.value;
+        }
+      });
+
+      /**
+       * 打卡弹出框
+       */
+      function handleOpen() {
+        tag.value = true;
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+
+      /**
+       * 将字符串值转化为数组
+       */
+      function initValue() {
+        let value = props.value ? props.value : [];
+        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+          state.value = value.split(',');
+          selectValues.value = value.split(',');
+        } else {
+          selectValues.value = value;
+        }
+      }
+
+      /**
+       * 设置下拉框的值
+       */
+      function setValue(options, values) {
+        selectOptions.value = options;
+        //emitData.value = values.join(",");
+        state.value = values;
+        selectValues.value = values;
+        emit('update:value', values);
+        emit('options-change', options);
+      }
+
+      function handleChange(values) {
+        emit('update:value', values);
+      }
+      const getBindValue = Object.assign({}, unref(props), unref(attrs));
+      return {
+        state,
+        attrs,
+        selectOptions,
+        getBindValue,
+        selectValues,
+        loadingEcho,
+        tag,
+        regModal,
+        setValue,
+        handleOpen,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JSwitch.vue b/src/components/Form/src/jeecg/components/JSwitch.vue
new file mode 100644
index 0000000..9b8d9ce
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JSwitch.vue
@@ -0,0 +1,84 @@
+<template>
+  <div :class="prefixCls">
+    <a-select
+      v-if="query"
+      v-model:value="state"
+      :options="selectOptions"
+      :disabled="disabled"
+      style="width: 100%"
+      v-bind="attrs"
+      @change="onSelectChange"
+    />
+    <a-switch v-else v-model:checked="checked" :disabled="disabled" v-bind="attrs" @change="onSwitchChange" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  const { prefixCls } = useDesign('j-switch');
+  const props = defineProps({
+    // v-model:value
+    value: propTypes.oneOfType([propTypes.string, propTypes.number]),
+    // 取值 options
+    options: propTypes.array.def(() => ['Y', 'N']),
+    // 文本 options
+    labelOptions: propTypes.array.def(() => ['是', '否']),
+    // 是否使用下拉
+    query: propTypes.bool.def(false),
+    // 是否禁用
+    disabled: propTypes.bool.def(false),
+  });
+  const attrs = useAttrs();
+  const emit = defineEmits(['change', 'update:value']);
+
+  const checked = ref<boolean>(false);
+  const [state] = useRuleFormItem(props, 'value', 'change');
+  watch(
+    () => props.value,
+    (val) => {
+      if (!props.query) {
+        // 代码逻辑说明: 【QQYUN-7473】options使用[0,1]，导致开关无法切换
+        if (!val && !props.options.includes(val)) {
+          checked.value = false;
+          emitValue(props.options[1]);
+        } else {
+          checked.value = props.options[0] == val;
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  const selectOptions = computed(() => {
+    let options: any[] = [];
+    options.push({ value: props.options[0], label: props.labelOptions[0] });
+    options.push({ value: props.options[1], label: props.labelOptions[1] });
+    return options;
+  });
+
+  function onSwitchChange(checked) {
+    let flag = checked === false ? props.options[1] : props.options[0];
+    emitValue(flag);
+  }
+
+  function onSelectChange(value) {
+    emitValue(value);
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+</script>
+
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-j-switch';
+
+  .@{prefix-cls} {
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JTreeDict.vue b/src/components/Form/src/jeecg/components/JTreeDict.vue
new file mode 100644
index 0000000..783d0ce
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JTreeDict.vue
@@ -0,0 +1,141 @@
+<template>
+  <TreeSelect
+    :class="prefixCls"
+    :value="treeValue"
+    :treeData="treeData"
+    :loadData="asyncLoadTreeData"
+    allowClear
+    labelInValue
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    style="width: 100%"
+    v-bind="attrs"
+    @change="onChange"
+  >
+  </TreeSelect>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { TreeSelect } from 'ant-design-vue';
+
+  enum Api {
+    view = '/sys/category/loadOne',
+    root = '/sys/category/loadTreeRoot',
+    children = '/sys/category/loadTreeChildren',
+  }
+
+  const { prefixCls } = useDesign('j-tree-dict');
+  const props = defineProps({
+    // v-model:value
+    value: propTypes.string.def(''),
+    field: propTypes.string.def('id'),
+    parentCode: propTypes.string.def(''),
+    async: propTypes.bool.def(false),
+  });
+  const attrs = useAttrs();
+  const emit = defineEmits(['change', 'update:value']);
+
+  const treeData = ref<any[]>([]);
+  const treeValue = ref<any>(null);
+
+  watch(
+    () => props.value,
+    () => loadViewInfo(),
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => props.parentCode,
+    () => loadRoot(),
+    { deep: true, immediate: true }
+  );
+
+  async function loadViewInfo() {
+    if (!props.value || props.value == '0') {
+      treeValue.value = { value: null, label: null };
+    } else {
+      let params = { field: props.field, val: props.value };
+      let result = await defHttp.get({ url: Api.view, params });
+      treeValue.value = {
+        value: props.value,
+        label: result.name,
+      };
+    }
+  }
+
+  async function loadRoot() {
+    let params = {
+      async: props.async,
+      pcode: props.parentCode,
+    };
+    let result = await defHttp.get({ url: Api.root, params });
+    treeData.value = [...result];
+    handleTreeNodeValue(result);
+  }
+
+  async function asyncLoadTreeData(treeNode) {
+    if (!props.async || treeNode.dataRef.children) {
+      return Promise.resolve();
+    }
+    let pid = treeNode.dataRef.key;
+    let params = { pid: pid };
+    let result = await defHttp.get({ url: Api.children, params });
+    handleTreeNodeValue(result);
+    addChildren(pid, result, treeData.value);
+    treeData.value = [...treeData.value];
+    return Promise.resolve();
+  }
+
+  function addChildren(pid, children, treeArray) {
+    if (treeArray && treeArray.length > 0) {
+      for (let item of treeArray) {
+        if (item.key == pid) {
+          if (!children || children.length == 0) {
+            item.leaf = true;
+          } else {
+            item.children = children;
+          }
+          break;
+        } else {
+          addChildren(pid, children, item.children);
+        }
+      }
+    }
+  }
+
+  function handleTreeNodeValue(result) {
+    let storeField = props.field == 'code' ? 'code' : 'key';
+    for (let i of result) {
+      i.value = i[storeField];
+      i.isLeaf = i.leaf;
+      if (i.children && i.children.length > 0) {
+        handleTreeNodeValue(i.children);
+      }
+    }
+  }
+
+  function onChange(value) {
+    if (!value) {
+      emitValue('');
+    } else {
+      emitValue(value.value);
+    }
+    treeValue.value = value;
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+</script>
+
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-j-tree-dict';
+
+  .@{prefix-cls} {
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JTreeSelect.vue b/src/components/Form/src/jeecg/components/JTreeSelect.vue
new file mode 100644
index 0000000..6fb1398
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JTreeSelect.vue
@@ -0,0 +1,457 @@
+<template>
+  <a-tree-select
+    v-if="show"
+    allowClear
+    labelInValue
+    style="width: 100%"
+    :getPopupContainer="(node) => node?.parentNode"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    :treeData="treeData"
+    :multiple="multiple"
+    v-bind="attrs"
+    @change="onChange"
+    @search="onSearch"
+    :tree-checkable="treeCheckAble"
+    :tagRender="tagRender"
+  >
+    <template #[name]="data" v-for="name in slotNamesGroup" :key="name">
+      <slot :name="name" v-bind="data"></slot>
+    </template>
+  </a-tree-select>
+</template>
+<script lang="ts" setup>
+  /*
+   * 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
+   * <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
+   * */
+  import { ref, watch, unref, nextTick, computed } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { TreeSelect } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isObject, isArray } from '/@/utils/is';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  enum Api {
+    url = '/sys/dict/loadTreeData',
+    view = '/sys/dict/loadDictItem/',
+  }
+
+  const props = defineProps({
+    value: propTypes.string.def(''),
+    placeholder: propTypes.string.def('请选择'),
+    dict: propTypes.string.def('id'),
+    parentCode: propTypes.string.def(''),
+    pidField: propTypes.string.def('pid'),
+    // 代码逻辑说明: JTreeSelect组件pidValue还原成空，否则会影响自定义组件树示例------------
+    pidValue: propTypes.string.def(''),
+    hasChildField: propTypes.string.def(''),
+    converIsLeafVal: propTypes.integer.def(1),
+    condition: propTypes.string.def(''),
+    multiple: propTypes.bool.def(false),
+    loadTriggleChange: propTypes.bool.def(false),
+    reload: propTypes.number.def(1),
+    // 代码逻辑说明: issues/4173 Online JTreeSelect控件changeOptions方法未生效
+    url: propTypes.string.def(''),
+    params: propTypes.object.def({}),
+    //默认没有选择框
+    treeCheckAble: propTypes.bool.def(false),
+    hiddenNodeKey: propTypes.string.def(''),
+    //多选时渲染tag文本
+    tagRender: propTypes.func,
+  });
+  const attrs = useAttrs();
+  const { t } = useI18n();
+  const emit = defineEmits(['change', 'update:value']);
+  const slots = defineSlots();
+  const { createMessage } = useMessage();
+  //树形下拉数据
+  const treeData = ref<any[]>([]);
+  //选择数据
+  const treeValue = ref<any>(null);
+  const tableName = ref<any>('');
+  const text = ref<any>('');
+  const code = ref<any>('');
+  const show = ref<boolean>(true);
+  /**
+   * 监听value数据并初始化
+   */
+  watch(
+    () => props.value,
+    () => loadItemByCode(),
+    { deep: true, immediate: true }
+  );
+  /**
+   * 监听dict变化
+   */
+  // 代码逻辑说明: 【issues/1283】JtreeSelect组件初始调用了两次接口
+  watch(
+    () => props.dict,
+    () => {
+      initDictInfo();
+      loadRoot();
+    }
+  );
+  // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+  watch(
+    () => props.hiddenNodeKey,
+    () => {
+      if (treeData.value?.length && props.hiddenNodeKey) {
+        handleHiddenNode(treeData.value);
+        treeData.value = [...treeData.value];
+      }
+    }
+  );
+
+  // 代码逻辑说明: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+  watch(
+    () => props.reload,
+    async () => {
+      treeData.value = [];
+      // 代码逻辑说明: 【TV360X-88】online树表重复新增时父节点数据加载不全且已开的子节点不重新加载
+      show.value = false;
+      nextTick(() => {
+        show.value = true;
+      });
+      await loadRoot();
+    },
+    {
+      immediate: false,
+    }
+  );
+
+  /**
+   * 根据code获取下拉数据并回显
+   */
+  async function loadItemByCode() {
+    if (!props.value || props.value == '0') {
+      if(props.multiple){
+        treeValue.value = [];
+      }else{
+        treeValue.value = { label: null, value: null };
+      }
+    } else {
+      // 代码逻辑说明: issues/4173 Online JTreeSelect控件changeOptions方法未生效
+      if(props.url){
+        getItemFromTreeData();
+      }else{
+        // 代码逻辑说明: 【issues/8093】选择节点后会先变成编码再显示label文字
+        if (props.value) {
+          if (isArray(treeValue.value)) {
+            let isNotRequestTransform = false;
+            const value = isArray(props.value) ? props.value : props.value.split(',');
+            isNotRequestTransform = value.every((value) => !!treeValue.value.find((item) => item.value === value));
+            if (isNotRequestTransform) {
+              return;
+            }
+          } else if (isObject(treeValue.value) && unref(treeValue).label != null) {
+            if (props.value == unref(treeValue).value) {
+              // 不需要再去请求翻译
+              return;
+            }
+          }
+        }
+        let params = { key: props.value };
+        let result = await defHttp.get({ url: `${Api.view}${props.dict}`, params }, { isTransformResponse: false });
+        if (result.success) {
+          if(props.multiple){
+            let values = props.value.split(',');
+            treeValue.value = result.result.map((item, index) => ({
+              key: values[index],
+              value: values[index],
+              label: translateTitle(item),
+            }));
+          }else{
+            treeValue.value = { key: props.value, value: props.value, label: translateTitle(result.result[0]) };
+          }
+          onLoadTriggleChange(result.result[0]);
+        }
+      }
+    }
+  }
+
+  function onLoadTriggleChange(text) {
+    //只有单选才会触发
+    if (!props.multiple && props.loadTriggleChange) {
+      emit('change', props.value, text);
+    }
+  }
+
+  /**
+   * 初始化数据
+   */
+  function initDictInfo() {
+    let arr = props.dict?.split(',');
+    tableName.value = arr[0];
+    text.value = arr[1];
+    code.value = arr[2];
+  }
+
+  /**
+   * 加载下拉树形数据
+   */
+  async function loadRoot() {
+    let params = {
+      pid: props.pidValue,
+      pidField: props.pidField,
+      hasChildField: props.hasChildField,
+      converIsLeafVal: props.converIsLeafVal,
+      condition: props.condition,
+      tableName: unref(tableName),
+      text: unref(text),
+      code: unref(code),
+    };
+    let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
+    if (res.success && res.result) {
+      for (let i of res.result) {
+        i.title = translateTitle(i.title);
+        i.value = i.key;
+        i.isLeaf = !!i.leaf;
+      }
+      // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+      handleHiddenNode(res.result);
+      treeData.value = [...res.result];
+    } else {
+      console.log('数根节点查询结果异常', res);
+    }
+  }
+
+  /**
+   * 翻译
+   * @param text
+   */
+  function translateTitle(text) {
+    if (text.includes("t('") && t) {
+      return new Function('t', `return ${text}`)(t);
+    }
+    return text;
+  }
+  /**
+   * 异步加载数据
+   */
+  async function asyncLoadTreeData(treeNode) {
+    if (treeNode.dataRef.children) {
+      return Promise.resolve();
+    }
+    if (props.url) {
+      return Promise.resolve();
+    }
+    let pid = treeNode.dataRef.key;
+    let params = {
+      pid: pid,
+      pidField: props.pidField,
+      hasChildField: props.hasChildField,
+      converIsLeafVal: props.converIsLeafVal,
+      condition: props.condition,
+      tableName: unref(tableName),
+      text: unref(text),
+      code: unref(code),
+    };
+    let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
+    if (res.success) {
+      for (let i of res.result) {
+        i.title = translateTitle(i.title);
+        i.value = i.key;
+        i.isLeaf = !!i.leaf;
+      }
+      // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+      handleHiddenNode(res.result);
+      //添加子节点
+      addChildren(pid, res.result, treeData.value);
+      treeData.value = [...treeData.value];
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * 加载子节点
+   */
+  function addChildren(pid, children, treeArray) {
+    if (treeArray && treeArray.length > 0) {
+      for (let item of treeArray) {
+        if (item.key == pid) {
+          if (!children || children.length == 0) {
+            item.isLeaf = true;
+          } else {
+            item.children = children;
+          }
+          break;
+        } else {
+          addChildren(pid, children, item.children);
+        }
+      }
+    }
+  }
+
+  /**
+   * 选中树节点事件
+   */
+  function onChange(value) {
+    if (!value) {
+      emitValue('');
+    } else if (value instanceof Array) {
+      emitValue(value.map((item) => item.value).join(','));
+    } else {
+      emitValue(value.value);
+    }
+    // 代码逻辑说明: 【issues/8093】删除后会先变成编码再显示label文字
+    if (isArray(value)) {
+      // 编辑删除时有选中的值是异步（第二级以上的）会不显示label
+      value.forEach((item) => {
+        if (item.label === undefined && item.value != null) {
+          const findItem = treeValue.value.find((o) => o.value === item.value);
+          if (findItem) {
+            item.label = findItem.label;
+          }
+        }
+      });
+      treeValue.value = value;
+    } else {
+      treeValue.value = value;
+    }
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+
+  /**
+   * 文本框值变化
+   */
+  function onSearch(value) {
+    console.log(value);
+  }
+
+  /**
+   * 校验条件配置是否有误
+   */
+  function validateProp() {
+    let mycondition = props.condition;
+    return new Promise((resolve, reject) => {
+      if (!mycondition) {
+        resolve();
+      } else {
+        try {
+          let test = JSON.parse(mycondition);
+          if (typeof test == 'object' && test) {
+            resolve();
+          } else {
+            createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
+            reject();
+          }
+        } catch (e) {
+          createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
+          reject();
+        }
+      }
+    });
+  }
+
+  // 代码逻辑说明: issues/4173 Online JTreeSelect控件changeOptions方法未生效
+  watch(()=>props.url, async (val)=>{
+    if(val){
+      await loadRootByUrl();
+    }
+  });
+
+  /**
+   * 根据自定义的请求地址加载数据
+   */
+  async function loadRootByUrl(){
+    let url = props.url;
+    let params = props.params;
+    let res = await defHttp.get({ url, params }, { isTransformResponse: false });
+    if (res.success && res.result) {
+      for (let i of res.result) {
+        i.title = translateTitle(i.title);
+        i.key = i.value;
+        i.isLeaf = !!i.leaf;
+      }
+      // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+      handleHiddenNode(res.result);
+      treeData.value = [...res.result];
+    } else {
+      console.log('数根节点查询结果异常', res);
+    }
+  }
+
+  /**
+   * 根据已有的树数据 翻译选项
+   */
+  function getItemFromTreeData(){
+    let data = treeData.value;
+    let arr = []
+    findChildrenNode(data, arr);
+    if(arr.length>0){
+      treeValue.value = arr
+      onLoadTriggleChange(arr[0]);
+    }
+  }
+
+  /**
+   * 递归找子节点
+   * @param data
+   * @param arr
+   */
+  function findChildrenNode(data, arr){
+    let val = props.value;
+    if(data && data.length){
+      for(let item of data){
+        if(val===item.value){
+          arr.push({
+            key: item.key,
+            value: item.value,
+            label: item.label||item.title
+          })
+        }else{
+          findChildrenNode(item.children, arr)
+        }
+      }
+    }
+  }
+
+  /**
+   * 2024-05-23
+   * liaozhiyang
+   * 过滤掉指定节点(包含其子孙节点)
+   */
+  function handleHiddenNode(data) {
+    if (props.hiddenNodeKey && data?.length) {
+      for (let i = 0, len = data.length; i < len; i++) {
+        const item = data[i];
+        if (item.key == props.hiddenNodeKey) {
+          data.splice(i, 1);
+          i--;
+          len--;
+          return;
+        }
+      }
+    }
+  }
+  /**
+   * 2024-07-30
+   * liaozhiyang
+   * 【issues/6953】JTreeSelect 组件能支持antdv 对应的a-tree-select 组件的插槽
+   */
+  const slotNamesGroup = computed(() => {
+    const native: string[] = [];
+    if (isObject(slots)) {
+      for (const name of Object.keys(slots)) {
+        native.push(name);
+      }
+    }
+    return native;
+  });
+  // onCreated
+  validateProp().then(() => {
+    initDictInfo();
+    loadRoot();
+    loadItemByCode();
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Form/src/jeecg/components/JUpload/JUpload.vue b/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
new file mode 100644
index 0000000..418850f
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JUpload/JUpload.vue
@@ -0,0 +1,461 @@
+<template>
+  <div ref="containerRef" :class="`${prefixCls}-container`">
+    <a-upload
+      :headers="headers"
+      :multiple="multiple"
+      :action="uploadUrl"
+      :fileList="fileList"
+      :disabled="disabled"
+      v-bind="bindProps"
+      @remove="onRemove"
+      @change="onFileChange"
+      @preview="onFilePreview"
+    >
+      <template v-if="isImageMode">
+        <div v-if="!isMaxCount">
+          <Icon icon="ant-design:plus-outlined" />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+      </template>
+      <a-button v-else-if="buttonVisible" :disabled="buttonDisabled">
+        <Icon icon="ant-design:upload-outlined" />
+        <span>{{ text }}</span>
+      </a-button>
+    </a-upload>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, watch, nextTick, createApp,unref } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { getToken } from '/@/utils/auth';
+  import { uploadUrl } from '/@/api/common/api';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { createImgPreview } from '/@/components/Preview/index';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { UploadTypeEnum } from './upload.data';
+  import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
+  import UploadItemActions from './components/UploadItemActions.vue';
+  import { split } from '/@/utils/index';
+
+  const { createMessage, createConfirm } = useMessage();
+  const { prefixCls } = useDesign('j-upload');
+  const attrs = useAttrs();
+  const emit = defineEmits(['change', 'update:value']);
+  const props = defineProps({
+    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    text: propTypes.string.def('上传'),
+    fileType: propTypes.string.def(UploadTypeEnum.all),
+    /*这个属性用于控制文件上传的业务路径*/
+    bizPath: propTypes.string.def('temp'),
+    /**
+     * 是否返回url，
+     * true：仅返回url
+     * false：返回fileName filePath fileSize
+     */
+    returnUrl: propTypes.bool.def(true),
+    // 最大上传数量
+    maxCount: propTypes.number.def(0),
+    buttonVisible: propTypes.bool.def(true),
+    multiple: propTypes.bool.def(true),
+    // 是否显示左右移动按钮
+    mover: propTypes.bool.def(true),
+    // 是否显示下载按钮
+    download: propTypes.bool.def(true),
+    // 删除时是否显示确认框
+    removeConfirm: propTypes.bool.def(false),
+    beforeUpload: propTypes.func,
+    disabled: propTypes.bool.def(false),
+    // 替换前一个文件，用于超出最大数量依然允许上传
+    replaceLastOne: propTypes.bool.def(false),
+  });
+
+  const headers = getHeaders();
+  const fileList = ref<any[]>([]);
+  const uploadGoOn = ref<boolean>(true);
+  // refs
+  const containerRef = ref();
+  // 是否达到了最大上传数量
+  const isMaxCount = computed(() => props.maxCount > 0 && fileList.value.length >= props.maxCount);
+  // 当前是否是上传图片模式
+  const isImageMode = computed(() => props.fileType === UploadTypeEnum.image);
+  // 上传按钮是否禁用
+  const buttonDisabled = computed(()=>{
+    if(props.disabled === true){
+      return true;
+    }
+    if(isMaxCount.value === true){
+      if(props.replaceLastOne === true){
+        return false
+      }else{
+        return true;
+      }
+    }
+    return false
+  });
+  // 合并 props 和 attrs
+  const bindProps = computed(() => {
+    // 代码逻辑说明: [issue/455]上传组件传入accept限制上传文件类型无效
+    const bind: any = Object.assign({}, props, unref(attrs));
+
+    bind.name = 'file';
+    bind.listType = isImageMode.value ? 'picture-card' : 'text';
+    bind.class = [bind.class, { 'upload-disabled': props.disabled }];
+    bind.data = { biz: props.bizPath, ...bind.data };
+    // 代码逻辑说明: 自定义beforeUpload return false，并不能中断上传过程
+    if (!bind.beforeUpload) {
+      bind.beforeUpload = onBeforeUpload;
+    }
+    // 如果当前是图片上传模式，就只能上传图片
+    if (isImageMode.value && !bind.accept) {
+      bind.accept = 'image/*';
+    }
+    return bind;
+  });
+
+  watch(
+    () => props.value,
+    (val) => {
+      if (Array.isArray(val)) {
+        if (props.returnUrl) {
+          parsePathsValue(val.join(','));
+        } else {
+          parseArrayValue(val);
+        }
+      } else {
+        // 代码逻辑说明: [issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
+        if (props.returnUrl) {
+          parsePathsValue(val);
+        } else {
+          val && parseArrayValue(JSON.parse(val));
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  watch(fileList, () => nextTick(() => addActionsListener()), { immediate: true });
+
+  const antUploadItemCls = 'ant-upload-list-item';
+
+  // Listener
+  function addActionsListener() {
+    if (!isImageMode.value) {
+      return;
+    }
+    const uploadItems = containerRef.value ? containerRef.value.getElementsByClassName(antUploadItemCls) : null;
+    if (!uploadItems || uploadItems.length === 0) {
+      return;
+    }
+    for (const uploadItem of uploadItems) {
+      let hasActions = uploadItem.getAttribute('data-has-actions') === 'true';
+      if (!hasActions) {
+        uploadItem.addEventListener('mouseover', onAddActionsButton);
+      }
+    }
+  }
+
+  // 添加可左右移动的按钮
+  function onAddActionsButton(event) {
+    const getUploadItem = () => {
+      for (const path of event.path) {
+        if (path.classList.contains(antUploadItemCls)) {
+          return path;
+        } else if (path.classList.contains(`${prefixCls}-container`)) {
+          return null;
+        }
+      }
+      return null;
+    };
+    const uploadItem = getUploadItem();
+    if (!uploadItem) {
+      return;
+    }
+    const actions = uploadItem.getElementsByClassName('ant-upload-list-item-actions');
+    if (!actions || actions.length === 0) {
+      return;
+    }
+    // 添加操作按钮
+    const div = document.createElement('div');
+    div.className = 'upload-actions-container';
+    createApp(UploadItemActions, {
+      element: uploadItem,
+      fileList: fileList,
+      mover: props.mover,
+      download: props.download,
+      emitValue: emitValue,
+    }).mount(div);
+    actions[0].appendChild(div);
+    uploadItem.setAttribute('data-has-actions', 'true');
+    uploadItem.removeEventListener('mouseover', onAddActionsButton);
+  }
+
+  // 解析数据库存储的逗号分割
+  function parsePathsValue(paths) {
+    if (!paths || paths.length == 0) {
+      fileList.value = [];
+      return;
+    }
+    let list: any[] = [];
+    // 代码逻辑说明: 【issues/7990】图片参数中包含逗号会错误的识别成多张图
+    const result = split(paths);
+    for (const item of result) {
+      let url = getFileAccessHttpUrl(item);
+      list.push({
+        uid: uidGenerator(),
+        name: getFileName(item),
+        status: 'done',
+        url: url,
+        response: { status: 'history', message: item },
+      });
+    }
+    fileList.value = list;
+  }
+
+  // 解析数组值
+  function parseArrayValue(array) {
+    if (!array || array.length == 0) {
+      fileList.value = [];
+      return;
+    }
+    let list: any[] = [];
+    for (const item of array) {
+      let url = getFileAccessHttpUrl(item.filePath);
+      list.push({
+        uid: uidGenerator(),
+        name: item.fileName,
+        url: url,
+        status: 'done',
+        response: { status: 'history', message: item.filePath },
+      });
+    }
+    fileList.value = list;
+  }
+
+  // 文件上传之前的操作
+  function onBeforeUpload(file) {
+    uploadGoOn.value = true;
+    if (isImageMode.value) {
+      if (file.type.indexOf('image') < 0) {
+        createMessage.warning('请上传图片');
+        uploadGoOn.value = false;
+        return false;
+      }
+    }
+    // 扩展 beforeUpload 验证
+    if (typeof props.beforeUpload === 'function') {
+      return props.beforeUpload(file);
+    }
+    return true;
+  }
+
+  // 删除处理事件
+  function onRemove() {
+    if (props.removeConfirm) {
+      return new Promise((resolve) => {
+        createConfirm({
+          title: '删除',
+          content: `确定要删除这${isImageMode.value ? '张图片' : '个文件'}吗？`,
+          iconType: 'warning',
+          onOk: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      });
+    }
+    return true;
+  }
+
+  // upload组件change事件
+  function onFileChange(info) {
+    if (!info.file.status && uploadGoOn.value === false) {
+      info.fileList.pop();
+    }
+    let fileListTemp = info.fileList;
+    // 限制最大上传数
+    if (props.maxCount > 0) {
+      let count = fileListTemp.length;
+      if (count >= props.maxCount) {
+        let diffNum = props.maxCount - fileListTemp.length;
+        if (diffNum >= 0) {
+          fileListTemp = fileListTemp.slice(-props.maxCount);
+        } else {
+          return;
+        }
+      }
+    }
+    if (info.file.status === 'done') {
+      let successFileList = [];
+      if (info.file.response.success) {
+        successFileList = fileListTemp.map((file) => {
+          if (file.response) {
+            let reUrl = file.response.message;
+            file.url = getFileAccessHttpUrl(reUrl);
+          }
+          return file;
+        });
+      }else{
+        successFileList = fileListTemp.filter(item=>{
+          return item.uid!=info.file.uid;
+        });
+        createMessage.error(`${info.file.name} 上传失败.`);
+      }
+      fileListTemp = successFileList;
+    } else if (info.file.status === 'error') {
+      createMessage.error(`${info.file.name} 上传失败.`);
+    }
+    // beforeUpload 返回false，则没有status
+    info.file.status && (fileList.value = fileListTemp);
+    if (info.file.status === 'done' || info.file.status === 'removed') {
+      //returnUrl为true时仅返回文件路径
+      if (props.returnUrl) {
+        handlePathChange();
+      } else {
+        //returnUrl为false时返回文件名称、文件路径及文件大小
+        let newFileList: any[] = [];
+        for (const item of fileListTemp) {
+          if (item.status === 'done') {
+            let fileJson = {
+              fileName: item.name,
+              filePath: item.response.message,
+              fileSize: item.size,
+            };
+            newFileList.push(fileJson);
+          }else{
+            return;
+          }
+        }
+        // 代码逻辑说明: [issues/5327]Upload组件returnUrl为false时上传的字段值返回了一个'[object Object]' ------------
+        emitValue(JSON.stringify(newFileList));
+      }
+    }
+  }
+
+  function handlePathChange() {
+    let uploadFiles = fileList.value;
+    let path = '';
+    if (!uploadFiles || uploadFiles.length == 0) {
+      path = '';
+    }
+    let pathList: string[] = [];
+    for (const item of uploadFiles) {
+      if (item.status === 'done') {
+        pathList.push(item.response.message);
+      } else {
+        return;
+      }
+    }
+    if (pathList.length > 0) {
+      path = pathList.join(',');
+    }
+    emitValue(path);
+  }
+
+  // 预览文件、图片
+  function onFilePreview(file) {
+    if (isImageMode.value) {
+      createImgPreview({ imageList: [file.url], maskClosable: true });
+    } else {
+      window.open(file.url);
+    }
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+
+  function uidGenerator() {
+    return '-' + parseInt(Math.random() * 10000 + 1, 10);
+  }
+
+  function getFileName(path) {
+    if (path.lastIndexOf('\\') >= 0) {
+      let reg = new RegExp('\\\\', 'g');
+      path = path.replace(reg, '/');
+    }
+    return path.substring(path.lastIndexOf('/') + 1);
+  }
+
+  defineExpose({
+    addActionsListener,
+  });
+</script>
+
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-j-upload';
+
+  .@{prefix-cls} {
+    &-container {
+      position: relative;
+
+      .upload-disabled {
+        .ant-upload-list-item {
+          .anticon-close {
+            display: none;
+          }
+
+          .anticon-delete {
+            display: none;
+          }
+        }
+
+        /* update-begin-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
+        .upload-download-handler {
+          right: 6px !important;
+        }
+        /* update-end-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全*/
+      }
+      .ant-upload-text-icon {
+        color: @primary-color;
+      }
+      .ant-upload-list-item {
+        .upload-actions-container {
+          position: absolute;
+          top: -31px;
+          left: -18px;
+          z-index: 11;
+          width: 84px;
+          height: 84px;
+          line-height: 28px;
+          text-align: center;
+          pointer-events: none;
+
+          a {
+            opacity: 0.9;
+            margin: 0 5px;
+            cursor: pointer;
+            transition: opacity 0.3s;
+
+            .anticon {
+              color: #fff;
+              font-size: 16px;
+            }
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+
+          .upload-mover-handler,
+          .upload-download-handler {
+            position: absolute;
+            pointer-events: auto;
+          }
+
+          .upload-mover-handler {
+            width: 100%;
+            bottom: 0;
+          }
+
+          .upload-download-handler {
+            top: -4px;
+            right: -4px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/JUpload/JUploadModal.vue b/src/components/Form/src/jeecg/components/JUpload/JUploadModal.vue
new file mode 100644
index 0000000..083e1ec
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JUpload/JUploadModal.vue
@@ -0,0 +1,45 @@
+<template>
+  <BasicModal @register="registerModal" :title="modalTitle" :width="width" @ok="handleOk" v-bind="$attrs">
+    <JUpload ref="uploadRef" :value="value" v-bind="uploadBinds.props" @change="emitValue" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, reactive, computed, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import JUpload from './JUpload.vue';
+  import { UploadTypeEnum } from './upload.data';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const { createMessage } = useMessage();
+  const emit = defineEmits(['change', 'update:value', 'register']);
+  const props = defineProps({
+    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    width: propTypes.number.def(520),
+  });
+
+  const uploadRef = ref();
+  const uploadBinds = reactive({ props: {} as any });
+  const modalTitle = computed(() => (uploadBinds.props?.fileType === UploadTypeEnum.image ? '图片上传' : '文件上传'));
+
+  // 注册弹窗
+  const [registerModal, { closeModal }] = useModalInner(async (data) => {
+    uploadBinds.props = unref(data) || {};
+    if ([UploadTypeEnum.image, 'img', 'picture'].includes(uploadBinds.props?.fileType)) {
+      uploadBinds.props.fileType = UploadTypeEnum.image;
+    } else {
+      uploadBinds.props.fileType = UploadTypeEnum.file;
+    }
+    nextTick(() => uploadRef.value.addActionsListener());
+  });
+
+  function handleOk() {
+    closeModal();
+  }
+
+  function emitValue(value) {
+    emit('change', value);
+    emit('update:value', value);
+  }
+</script>
diff --git a/src/components/Form/src/jeecg/components/JUpload/components/UploadItemActions.vue b/src/components/Form/src/jeecg/components/JUpload/components/UploadItemActions.vue
new file mode 100644
index 0000000..61586ab
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JUpload/components/UploadItemActions.vue
@@ -0,0 +1,90 @@
+<template>
+  <div v-show="download" class="upload-download-handler">
+    <a class="download" title="下载" @click="onDownload">
+      <Icon icon="ant-design:download" />
+    </a>
+  </div>
+  <div v-show="mover && list.length > 1" class="upload-mover-handler">
+    <a title="向前移动" @click="onMoveForward">
+      <Icon icon="ant-design:arrow-left" />
+    </a>
+    <a title="向后移动" @click="onMoveBack">
+      <Icon icon="ant-design:arrow-right" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { unref, computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const props = defineProps({
+    element: { type: HTMLElement, required: true },
+    fileList: { type: Object, required: true },
+    mover: { type: Boolean, required: true },
+    download: { type: Boolean, required: true },
+    emitValue: { type: Function, required: true },
+  });
+  const list = computed(() => unref(props.fileList));
+
+  // 向前移动图片
+  function onMoveForward() {
+    let index = getIndexByUrl();
+    if (index === -1) {
+      createMessage.warn('移动失败：' + index);
+      return;
+    }
+    if (index === 0) {
+      doSwap(index, unref(list).length - 1);
+      return;
+    }
+    doSwap(index, index - 1);
+  }
+
+  // 向后移动图片
+  function onMoveBack() {
+    let index = getIndexByUrl();
+    if (index === -1) {
+      createMessage.warn('移动失败：' + index);
+      return;
+    }
+    if (index == unref(list).length - 1) {
+      doSwap(index, 0);
+      return;
+    }
+    doSwap(index, index + 1);
+  }
+
+  function doSwap(oldIndex, newIndex) {
+    if (oldIndex !== newIndex) {
+      let array: any[] = [...(unref(list) as Array<any>)];
+      let temp = array[oldIndex];
+      array[oldIndex] = array[newIndex];
+      array[newIndex] = temp;
+      props.emitValue(array.map((i) => i.url).join(','));
+    }
+  }
+
+  function getIndexByUrl() {
+    const url = props.element?.getElementsByTagName('img')[0]?.src;
+    if (url) {
+      const fileList: any = unref(list);
+      for (let i = 0; i < fileList.length; i++) {
+        let current = fileList[i].url;
+        const replace = url.replace(window.location.origin, '');
+        if (current === replace || encodeURI(current) === replace) {
+          return i;
+        }
+      }
+    }
+    return -1;
+  }
+
+  function onDownload() {
+    const url = props.element?.getElementsByTagName('img')[0]?.src;
+    window.open(url);
+  }
+</script>
diff --git a/src/components/Form/src/jeecg/components/JUpload/index.ts b/src/components/Form/src/jeecg/components/JUpload/index.ts
new file mode 100644
index 0000000..740bf2d
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JUpload/index.ts
@@ -0,0 +1,3 @@
+export { UploadTypeEnum } from './upload.data';
+export { default as JUpload } from './JUpload.vue';
+export { default as JUploadModal } from './JUploadModal.vue';
diff --git a/src/components/Form/src/jeecg/components/JUpload/upload.data.ts b/src/components/Form/src/jeecg/components/JUpload/upload.data.ts
new file mode 100644
index 0000000..820146d
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/JUpload/upload.data.ts
@@ -0,0 +1,5 @@
+export enum UploadTypeEnum {
+  all = 'all',
+  image = 'image',
+  file = 'file',
+}
diff --git a/src/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue b/src/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue
new file mode 100644
index 0000000..7075344
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <svg
+      class="svg-company"
+      v-if="orgCategory && (orgCategory === '1' || orgCategory === '4')"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="256"
+      height="256"
+    >
+      <path
+        d="M234.9 226.9c0-25.9 25.1-46.9 56-46.9h226.9c30.5 0 55.3 21.1 55.3 46.9v580.9h40V340.2h132.5c25.9 0 46.9 21.1 46.9 46.9v413.5h40V387.2c0-47.9-39-86.9-86.9-86.9H613v-73.4c0-23.7-10.2-45.8-28.7-62.3-17.9-15.9-41.5-24.7-66.6-24.7H290.9c-52.9 0-96 39-96 86.9v580.9h40V226.9zM145.8 841.2h734.9v40H145.8z"
+        fill="#333333"
+        p-id="10104"
+      ></path>
+      <path
+        d="M286.9 354.1h124.7v40H286.9zM448.1 353.9h63.2v40h-63.2zM286.9 489.1h124.7v40H286.9zM448.1 488.9h63.2v40h-63.2zM286.9 616.6h124.7v40H286.9zM448.1 616.3h63.2v40h-63.2zM638.5 433.1h71v40h-71zM730.2 433h36v40h-36zM638.5 557.9h71v40h-71zM730.2 557.7h36v40h-36zM638.5 684.7h71v40h-71zM730.2 684.5h36v40h-36z"
+        fill="#333333"
+      ></path>
+    </svg>
+    <svg class="svg-depart" v-if="orgCategory === '2'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+      <path
+        d="M192 384H64V64h320v320H256v256h128v128h384V512h-128V192h320v320h-128v320H384v128H64v-320h128V384z m128 320H128v192h192v-192z m576-448h-192v192h192V256zM320 128H128v192h192V128z"
+        p-id="8946"
+      ></path>
+    </svg>
+    <svg
+      class="svg-post"
+      v-if="orgCategory === '3'"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="11309"
+      width="256"
+      height="256"
+    >
+      <path
+        d="M866.346667 89.6H207.573333C167.253333 89.6 134.4 122.453333 134.4 162.773333v146.346667h64V162.773333c0-5.12 4.266667-9.173333 9.173333-9.173333h658.773334c5.12 0 9.173333 4.053333 9.173333 9.173333v699.946667c0 5.12-4.053333 9.173333-9.173333 9.173333H207.573333c-5.12 0-9.173333-4.053333-9.173333-9.173333v-144h-64v144c0 40.32 32.853333 73.173333 73.173333 73.173333h658.773334c40.32 0 73.173333-32.853333 73.173333-73.173333V162.773333c0-40.32-32.853333-73.173333-73.173333-73.173333z"
+        p-id="11310"
+      ></path>
+      <path
+        d="M134.4 428.16h64V597.333333h-64zM120.96 400.64h82.346667c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32H120.96c-17.706667 0-32 14.293333-32 32s14.506667 32 32 32zM233.386667 657.493333c0-17.706667-14.293333-32-32-32H119.04c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h82.346667c17.706667 0 32-14.293333 32-32zM384.213333 655.146667l146.346667 139.306666c6.186667 5.973333 14.08 8.746667 21.973333 8.746667s15.786667-2.986667 21.973334-8.746667l148.053333-139.306666c8.746667-8.106667 12.16-20.48 8.746667-32l-64.853334-228.053334 39.68-122.666666c3.2-9.813333 1.493333-20.48-4.48-28.586667s-15.573333-13.226667-25.813333-13.226667H428.586667a31.872 31.872 0 0 0-30.293334 41.813334l40.96 126.933333-63.786666 224c-3.2 11.306667 0.213333 23.68 8.746666 31.786667z m168.533334 72.32l-110.506667-105.173334 56.96-199.893333h108.373333l56.96 199.893333-111.786666 105.173334z m78.933333-432.64l-19.413333 60.16h-120.32l-19.413334-60.16h159.146667z"
+        p-id="11311"
+      ></path>
+    </svg>
+    <span :title="title">{{ title }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from 'vue';
+  const props = defineProps({
+    orgCategory: String,
+    title: String,
+  });
+</script>
+
+<style scoped lang="less">
+  .svg-company {
+    width: 18px;
+    height: 18px;
+    position: relative;
+    top: 2px;
+    right: 2px;
+  }
+  .svg-depart,
+  .svg-post {
+    width: 14px;
+    height: 16px;
+    position: relative;
+    top: 3px;
+    right: 2px;
+  }
+  html[data-theme='light'] {
+    .svg-post{
+      path { fill: #333333; }
+    }
+    .svg-company{
+      path { fill: #333333; }
+    }
+    .svg-depart{
+      path { fill: #333333; }
+    }
+  }
+  html[data-theme='dark'] {
+    .svg-post{
+      path { fill: #ffffff; }
+    }
+    .svg-company{
+      path { fill: #ffffff; }
+    }
+    .svg-depart{
+      path { fill: #ffffff; }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/base/JSelectBiz.vue b/src/components/Form/src/jeecg/components/base/JSelectBiz.vue
new file mode 100644
index 0000000..bafa6db
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/base/JSelectBiz.vue
@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <div v-if="isDetailsMode">
+      <p class="detailStr" :title="detailStr">{{ detailStr }}</p>
+    </div>
+    <a-row v-else class="j-select-row" type="flex" :gutter="8">
+      <a-col class="left" :class="{ full: !showButton }">
+        <!-- 显示加载效果 -->
+        <a-input v-if="loading" readOnly placeholder="加载中…">
+          <template #prefix>
+            <LoadingOutlined />
+          </template>
+        </a-input>
+        <a-select
+          v-else
+          ref="select"
+          v-model:value="selectValues.value"
+          :placeholder="placeholder"
+          :mode="multiple"
+          :open="false"
+          :disabled="disabled"
+          :options="options"
+          :maxTagCount="maxTagCount"
+          @change="handleChange"
+          style="width: 100%"
+          @click="!disabled && openModal(false)"
+          v-bind="attrs"
+        >
+          <template v-if="isCustomRenderTag" #tagRender="{ label, value, option}">
+            <a-tag class="ant-select-selection-item" style="margin-right: 4px">
+              <span class="ant-select-selection-item-content" style="font-size: 14px;max-width: 300px" :title="tagRender(label, value, false)">{{ tagRender(label, value, true) }}</span>
+              <span class="ant-select-selection-item-remove">
+                <Icon icon="ant-design:close-outlined" size="12" @click="handleRemoveClick(value)"></Icon>
+              </span>
+            </a-tag>
+          </template>
+        </a-select>
+      </a-col>
+      <a-col v-if="showButton" class="right">
+        <a-button v-if="buttonIcon" :preIcon="buttonIcon" type="primary" @click="openModal(true)" :disabled="disabled">
+          {{ buttonText }}
+        </a-button>
+        <a-button v-else type="primary" @click="openModal(true)" :disabled="disabled">
+          {{ buttonText }}
+        </a-button>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, inject, reactive, watch } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { getDepartPathNameByOrgCode } from "@/utils/common/compUtils";
+
+  export default defineComponent({
+    name: 'JSelectBiz',
+    components: { LoadingOutlined },
+    inheritAttrs: false,
+    props: {
+      showButton: propTypes.bool.def(true),
+      buttonText: propTypes.string.def('选择'),
+      disabled: propTypes.bool.def(false),
+      placeholder: {
+        type: String,
+        default: '请选择',
+      },
+      // 是否支持多选，默认 true
+      multiple: {
+        type: String,
+        default: 'multiple',
+      },
+      // 是否正在加载
+      loading: propTypes.bool.def(false),
+      // 最多显示多少个 tag
+      maxTagCount: propTypes.number,
+      // buttonIcon
+      buttonIcon: propTypes.string.def(''),
+      // 【TV360X-1002】是否是详情模式
+      isDetailsMode: propTypes.bool.def(false),
+      //是否自定义渲染tag
+      isCustomRenderTag: propTypes.bool.def(false),
+      rowKey: propTypes.string.def('id'),
+    },
+    emits: ['handleOpen', 'change'],
+    setup(props, { emit, refs }) {
+      //接收下拉框选项
+      const options = inject('selectOptions') || ref([]);
+      //接收选择的值
+      const selectValues = inject('selectValues') || ref({});
+      const attrs = useAttrs();
+      const detailStr = ref('');
+
+      //存放部门名称
+      const departNamePath = ref<Record<string, string>>({});
+      
+      /**
+       * 打开弹出框
+       */
+      function openModal(isButton) {
+        if (props.showButton && isButton) {
+          emit('handleOpen');
+        }
+        if (!props.showButton && !isButton) {
+          emit('handleOpen');
+        }
+      }
+
+      /**
+       * 下拉框值改变事件
+       */
+      function handleChange(value) {
+        selectValues.value = value;
+        selectValues.change = true;
+        emit('change', value);
+      }
+      
+      /**
+       * 多选tag自定义渲染
+       *
+       * @param label
+       * @param value
+       * @param isEllipsis 是否省略
+       */
+      function tagRender(label, value, isEllipsis) {
+        if (departNamePath.value[value]) {
+           //是否需要省略显示
+           if(!isEllipsis){
+             return departNamePath.value[value];
+           } else {
+             let departName = departNamePath.value[value];
+             //超过20则截取后20位的字符，前面加省略号
+             if(departName && departName.length >= 20){
+               const name:any = departName.substring(departName.length - 20);
+               return '...' + name;
+             } else {
+               return departName;
+             }
+           }
+        }
+        //判断rowKey是否为orgCode
+        if(props?.rowKey && props?.rowKey === 'orgCode'){
+          getDepartPathNameByOrgCode(value, label, '').then((data) => {
+            departNamePath.value[value] = data;
+          });
+        } else {
+          //否则按照id处理
+          getDepartPathNameByOrgCode('', label, value).then((data) => {
+            departNamePath.value[value] = data;
+          });
+        }
+      }
+
+      /**
+       * tag删除
+       * 
+       * @param value
+       */
+      function handleRemoveClick(value) {
+        if(selectValues?.value){
+          let values = selectValues?.value.filter(item => item !== value);
+          handleChange(values);
+        }
+      }
+      // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+      watch(
+        [selectValues, options],
+        () => {
+          if (props.isDetailsMode) {
+            if (Array.isArray(selectValues.value) && Array.isArray(options.value)) {
+              const result = options.value.map((item) => item.label);
+              detailStr.value = result.join(',');
+            }
+          }
+        },
+        { immediate: true }
+      );
+      // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+
+      return {
+        attrs,
+        selectValues,
+        options,
+        handleChange,
+        openModal,
+        detailStr,
+        tagRender,
+        handleRemoveClick,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+  .detailStr {
+    margin: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/base/JTreeBiz.vue b/src/components/Form/src/jeecg/components/base/JTreeBiz.vue
new file mode 100644
index 0000000..cd65c5f
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/base/JTreeBiz.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <a-row class="j-select-row" type="flex" :gutter="8">
+      <a-col class="left" :class="{ full: !showButton }">
+        <a-select
+          ref="select"
+          v-model:value="selectValues.value"
+          :mode="multiple"
+          :open="false"
+          :options="options"
+          @change="handleChange"
+          style="width: 100%"
+        />
+      </a-col>
+      <a-col v-if="showButton" class="right">
+        <a-button type="primary" @click="openModal">选择</a-button>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, inject, reactive } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  export default defineComponent({
+    name: 'JSelectBiz',
+    components: {},
+    inheritAttrs: false,
+    props: {
+      showButton: propTypes.bool.def(true),
+      // 是否支持多选，默认 true
+      multiple: {
+        type: Boolean,
+        default: 'multiple',
+      },
+    },
+    emits: ['btnOk'],
+    setup(props, { emit, refs }) {
+      //接收下拉框选项
+      const options = inject('selectOptions') || ref([]);
+      //接收选择的值
+      const selectValues = inject('selectValues') || ref({});
+      const attrs = useAttrs();
+
+      /**
+       * 打开弹出框
+       */
+      function openModal() {
+        emit('btnOk');
+      }
+
+      /**
+       * 下拉框值改变事件
+       */
+      function handleChange(value) {
+        selectValues.value = value;
+        selectValues.change = true;
+      }
+
+      return {
+        attrs,
+        selectValues,
+        options,
+        handleChange,
+        openModal,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .j-select-row {
+    @width: 82px;
+
+    .left {
+      width: calc(100% - @width - 8px);
+    }
+
+    .right {
+      width: @width;
+    }
+
+    .full {
+      width: 100%;
+    }
+
+    :deep(.ant-select-search__field) {
+      display: none !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/modal/DeptSelectModal.vue b/src/components/Form/src/jeecg/components/modal/DeptSelectModal.vue
new file mode 100644
index 0000000..fd9ca8f
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/DeptSelectModal.vue
@@ -0,0 +1,223 @@
+<!--部门选择框-->
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="600px" :minHeight="300" :maxHeight="maxHeight" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
+      <a-input-search v-if="izOnlySelectDepartPost" placeholder="按岗位名称搜索…" style="margin-bottom: 10px" @search="onSearch" @change="handelSearchChange"/>
+      <BasicTree
+        ref="treeRef"
+        :treeData="treeData"
+        :load-data="sync == false ? null : onLoadData"
+        v-bind="getBindValue"
+        @select="onSelect"
+        @check="onCheck"
+        :fieldNames="fieldNames"
+        :checkedKeys="checkedKeys"
+        :expandedKeys="expandedKeys"
+        :multiple="multiple"
+        :checkStrictly="getCheckStrictly"
+        :key="reloadKey"
+      >
+        <template #title="{ orgCategory, title, orgCode }">
+          <TreeIcon :orgCategory="orgCategory" :title="getTitle(orgCategory, title, orgCode)"></TreeIcon>
+        </template>
+      </BasicTree>
+      <!--树操作部分-->
+      <template #insertFooter>
+        <a-dropdown placement="top">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item v-if="multiple" key="1" @click="checkALL(true)">全部勾选</a-menu-item>
+              <a-menu-item v-if="multiple" key="2" @click="checkALL(false)">取消全选</a-menu-item>
+              <a-menu-item key="3" @click="expandAll(true)">展开全部</a-menu-item>
+              <a-menu-item key="4" @click="expandAll(false)">折叠全部</a-menu-item>
+              <a-menu-item v-if="multiple" key="5" @click="toggleCheckStrictly(false)">层级关联</a-menu-item>
+              <a-menu-item v-if="multiple" key="6" @click="toggleCheckStrictly(true)">层级独立</a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="float: left"> 树操作 <Icon icon="ant-design:up-outlined" /> </a-button>
+        </a-dropdown>
+      </template>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { queryDepartTreeSync, queryTreeList, queryDepartAndPostTreeSync } from '/@/api/common/api';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { treeProps } from '/@/components/Form/src/jeecg/props/props';
+  import { BasicTree, TreeActionType } from '/@/components/Tree';
+  import { useTreeBiz } from '/@/components/Form/src/jeecg/hooks/useTreeBiz';
+  import {propTypes} from "/@/utils/propTypes";
+  import { omit } from 'lodash-es';
+  import TreeIcon from '@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue';
+  import { getDepartPathNameByOrgCode } from "@/utils/common/compUtils";
+
+  export default defineComponent({
+    name: 'DeptSelectModal',
+    components: {
+      TreeIcon,
+      BasicModal,
+      BasicTree,
+    },
+    props: {
+      ...treeProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '部门选择',
+      },
+      // 代码逻辑说明: 【QQYUN-7678】部门组件内容过多没有滚动条（给一个默认最大高）
+      maxHeight: {
+        type: Number,
+        default: 500,
+      },
+      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+      //查询参数
+      params: {
+        type: Object,
+        default: () => ({}),
+      },
+      //是否显示部门路径（用户部门选择主岗位和兼职岗位需要显示全路径）
+      izShowDepPath: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['register', 'getSelectResult', 'close'],
+    setup(props, { emit }) {
+      //注册弹框
+      const [register, { closeModal }] = useModalInner();
+      const attrs = useAttrs();
+      const treeRef = ref<Nullable<TreeActionType>>(null);
+      //加载树key
+      const reloadKey = ref<number>(Math.random());
+      
+      // 代码逻辑说明: 部门选择警告类型不匹配
+      let propValue = props.value === ''?[]:props.value;
+      // 确保传递给BasicTree的value是数组格式
+      if (propValue && typeof propValue === 'string') {
+        propValue = propValue.split(',');
+      }
+      // 代码逻辑说明: [issues/538]JSelectDept组件受 dynamicDisabled 影响
+      let temp = Object.assign({}, unref(props), unref(attrs), {value: propValue},{disabled: false});
+      const getBindValue = omit(temp, 'multiple');
+      
+      const queryUrl = getQueryUrl();
+      const [{ visibleChange, checkedKeys, getCheckStrictly, getSelectTreeData, onCheck, onLoadData, treeData, checkALL, expandAll, onSelect, onSearch, expandedKeys, checkStrictly }] =
+        useTreeBiz(treeRef, queryUrl, getBindValue, props, emit);
+      const searchInfo = ref(props.params || {});
+      const tree = ref([]);
+      //替换treeNode中key字段为treeData中对应的字段
+      const fieldNames = {
+        key: props.rowKey,
+      };
+      // {children:'children', title:'title', key:'key' }
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectTreeData((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+
+      /** 获取查询数据方法 */
+      function getQueryUrl() {
+        let queryFn = props.izOnlySelectDepartPost ? queryDepartAndPostTreeSync :props.sync ? queryDepartTreeSync : queryTreeList;
+        // 代码逻辑说明: issues/I5F3P4 online配置部门选择后编辑，查看数据应该显示部门名称，不是部门代码
+        return (params) => queryFn(Object.assign({}, params, props.params, { primaryKey: props.rowKey }));
+      }
+
+      /**
+       * 搜索值改变事件
+       * @param value
+       */
+      function handelSearchChange(value) {
+        if(!value.target.value){
+          reloadKey.value = Math.random();
+        }
+      }
+
+      /**
+       * 设置层级关联和层级独立
+       * 
+       * @param value
+       */
+      function toggleCheckStrictly(value) {
+        checkStrictly.value = value;
+      }
+
+      //标题缓存
+      const titleCache = reactive<Record<string, string>>({});
+      
+      /**
+       * 获取标题
+       * @param orgCategory
+       * @param title
+       * @param orgCode
+       */
+      function getTitle(orgCategory, title, orgCode) {
+        if(props.izShowDepPath && orgCategory === '2'){
+          const cached = titleCache[orgCode];
+          if (cached){
+            return cached;
+          }
+          getDepartPathNameByOrgCode(orgCode,title,"").then(res=>{
+            if(res){
+              titleCache[orgCode] =  title + "(" + res.substring(0, res.lastIndexOf('/')) + ")";
+            }else{
+              titleCache[orgCode] =  title;
+            }
+          });
+          return title;
+        } else {
+          return title;
+        }
+      }
+      
+      return {
+        tree,
+        handleOk,
+        searchInfo,
+        treeRef,
+        treeData,
+        onCheck,
+        onSelect,
+        checkALL,
+        expandAll,
+        fieldNames,
+        checkedKeys,
+        expandedKeys,
+        register,
+        getBindValue,
+        getCheckStrictly,
+        visibleChange,
+        onLoadData,
+        onSearch,
+        reloadKey,
+        handelSearchChange,
+        toggleCheckStrictly,
+        getTitle,
+      };
+    },
+  });
+</script>
+<style>
+  .svg-company {
+    width: 18px;
+    height: 18px;
+    position: relative;
+    top: 1px;
+    right: 2px;
+  }
+  .svg-depart,.svg-post {
+    width: 14px;
+    height: 16px;
+    position: relative;
+    right: 2px;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/modal/JPopupOnlReportModal.vue b/src/components/Form/src/jeecg/components/modal/JPopupOnlReportModal.vue
new file mode 100644
index 0000000..b0f4bff
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/JPopupOnlReportModal.vue
@@ -0,0 +1,348 @@
+<template>
+  <!--popup选择框-->
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      @register="register"
+      :title="title"
+      :width="1200"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+      cancelText="关闭"
+      wrapClassName="j-popup-modal"
+      @visible-change="visibleChange"
+    >
+      <div class="jeecg-basic-table-form-container">
+        <a-form ref="formRef" v-if="showSearchFlag" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <template v-for="(item, index) in queryInfo">
+              <template v-if="item.hidden === '1'">
+                <a-col :md="8" :sm="24" :key="'query' + index" v-show="toggleSearchStatus">
+                  <SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
+                </a-col>
+              </template>
+              <template v-else>
+                <a-col :md="8" :sm="24" :key="'query' + index">
+                  <SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
+                </a-col>
+              </template>
+            </template>
+
+            <a-col :md="8" :sm="8" v-if="showAdvancedButton">
+              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                <a-col :lg="6">
+                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                  <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+                  <a @click="handleToggleSearch" style="margin-left: 8px">
+                    {{ toggleSearchStatus ? '收起' : '展开' }}
+                    <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
+                  </a>
+                </a-col>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+
+      <BasicTable
+        ref="tableRef"
+        :canResize="false"
+        :bordered="true"
+        :loading="loading"
+        :rowKey="rowkey ? rowkey : combineRowKey"
+        :columns="columns"
+        :showIndexColumn="false"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :rowSelection="rowSelection"
+        @row-click="clickThenCheck"
+        @change="handleChangeInTable"
+      >
+        <template #tableTitle></template>
+         <template #bodyCell="{text, column}">
+          <template v-if="column.fieldType === 'Image'">
+            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+            <img v-else :src="getImgView(text)" alt="图片不存在" class="cellIamge" @click="viewOnlineCellImage($event, text)" />
+          </template>
+        </template>
+      </BasicTable>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, unref, ref, watch, watchEffect, reactive, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { usePopBiz } from '/@/components/jeecg/OnLine/hooks/usePopBiz';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { createImgPreview } from '/@/components/Preview/index';
+
+  export default defineComponent({
+    name: 'JPopupOnlReportModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      SearchFormItem: createAsyncComponent(() => import('/@/components/jeecg/OnLine/SearchFormItem.vue'), { loading: false }),
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: ['multi', 'code', 'sorter', 'groupId', 'param','showAdvancedButton', 'getFormValues', 'selected', 'rowkey'],
+    emits: ['ok', 'register'],
+    setup(props, { emit }) {
+      const { createMessage } = useMessage();
+      const labelCol = reactive({
+        xs: { span: 24 },
+        sm: { span: 6 },
+      });
+      const wrapperCol = reactive({
+        xs: { span: 24 },
+        sm: { span: 18 },
+      });
+      //注册弹框
+      const [register, { closeModal }] = useModalInner();
+      const formRef = ref();
+      const tableRef = ref();
+      const toggleSearchStatus = ref(false);
+      const attrs = useAttrs();
+      const tableScroll = ref({ x: true });
+      // 代码逻辑说明: 【issues/675】子表字段Popup弹框数据不更新
+      const getBindValue = computed(() => {
+        return Object.assign({}, unref(props), unref(attrs));
+      });
+      const [
+        {
+          visibleChange,
+          loadColumnsInfo,
+          dynamicParamHandler,
+          loadData,
+          handleChangeInTable,
+          combineRowKey,
+          clickThenCheck,
+          filterUnuseSelect,
+          getOkSelectRows,
+        },
+        {
+          visible,
+          rowSelection,
+          checkedKeys,
+          selectRows,
+          pagination,
+          dataSource,
+          columns,
+          loading,
+          title,
+          iSorter,
+          queryInfo,
+          queryParam,
+          dictOptions,
+        },
+      ] = usePopBiz(getBindValue,tableRef);
+
+      const showSearchFlag = computed(() => unref(queryInfo) && unref(queryInfo).length > 0);
+      /**
+       *监听code
+       */
+      watch(
+        () => props.code,
+        () => {
+          loadColumnsInfo();
+        }
+      );
+      /**
+       *监听popup动态参数 支持系统变量语法
+       */
+      watch(
+        () => props.param,
+        () => {
+          // 代码逻辑说明: 【issues/901】JPopup组件配置param参数后异常
+          if (visible.value) {
+            dynamicParamHandler();
+            loadData();
+          }
+        }
+      );
+      /**
+       *监听sorter排序字段
+       */
+      watchEffect(() => {
+        if (props.sorter) {
+          let arr = props.sorter.split('=');
+          if (arr.length === 2 && ['asc', 'desc'].includes(arr[1].toLowerCase())) {
+            iSorter.value = { column: arr[0], order: arr[1].toLowerCase() };
+            // 排序字段受控
+            unref(columns).forEach((col) => {
+              if (col.dataIndex === unref(iSorter).column) {
+                col['sortOrder'] = unref(iSorter).order === 'asc' ? 'ascend' : 'descend';
+              } else {
+                col['sortOrder'] = false;
+              }
+            });
+          } else {
+            console.warn('【JPopup】sorter参数不合法');
+          }
+        }
+      });
+
+      // 代码逻辑说明: VUEN-1156 popup 多数据有分页时，选中其他页，关闭popup 再点开，分页仍然选中上一次点击的分页，但数据是第一页的数据 未刷新
+      watch(
+        () => pagination.current,
+        (current) => {
+          if (current) {
+            tableRef.value.setPagination({
+              current: current,
+            });
+          }
+        }
+      );
+
+      function handleToggleSearch() {
+        toggleSearchStatus.value = !unref(toggleSearchStatus);
+      }
+      /**
+       * 取消/关闭
+       */
+      function handleCancel() {
+        closeModal();
+        checkedKeys.value = [];
+        selectRows.value = [];
+        // 代码逻辑说明: 【issues/742】选择后删除默认仍然存在
+        tableRef.value.clearSelectedRowKeys();
+      }
+
+      /**
+       *确认提交
+       */
+      function handleSubmit() {
+        filterUnuseSelect();
+        if (!props.multi && unref(selectRows) && unref(selectRows).length > 1) {
+          createMessage.warning('只能选择一条记录');
+          return false;
+        }
+        if (!unref(selectRows) || unref(selectRows).length == 0) {
+          createMessage.warning('至少选择一条记录');
+          return false;
+        }
+        // 代码逻辑说明: VUEN-1155 popup 选择数据时，会选择多条重复数据
+        let rows = getOkSelectRows!();
+        emit('ok', rows);
+        handleCancel();
+      }
+
+      /**
+       * 查询
+       */
+      function searchQuery() {
+        loadData(1);
+      }
+      /**
+       * 重置
+       */
+      function searchReset() {
+        queryParam.value = {};
+        loadData(1);
+      }
+
+      /**
+       * 2024-07-24
+       * liaozhiyang
+       * 【TV360X-1756】报表添加图片类型
+       * 图片
+       * @param text
+       */
+      function getImgView(text) {
+        if (text && text.indexOf(',') > 0) {
+          text = text.substring(0, text.indexOf(','));
+        }
+        return getFileAccessHttpUrl(text);
+      }
+      /**
+       * 2024-07-24
+       * liaozhiyang
+       * 【TV360X-1756】报表添加图片类型
+       * 预览列表 cell 图片
+       * @param text
+       */
+      function viewOnlineCellImage(e, text) {
+        e.stopPropagation();
+        if (text) {
+          let imgList: any = [];
+          let arr = text.split(',');
+          for (let str of arr) {
+            if (str) {
+              imgList.push(getFileAccessHttpUrl(str));
+            }
+          }
+          createImgPreview({ imageList: imgList });
+        }
+      }
+      // 代码逻辑说明: 【issues/3656】popupdict回显
+      watchEffect(() => {
+        if (props.selected && props.rowkey && unref(visible)) {
+          const selected = props.multi ? props.selected : [props.selected];
+          checkedKeys!.value = selected.map((item) => item[props.rowkey]);
+          selectRows!.value = selected;
+        }
+      });
+      return {
+        attrs,
+        register,
+        tableScroll,
+        dataSource,
+        pagination,
+        columns,
+        rowSelection,
+        checkedKeys,
+        loading,
+        title,
+        handleCancel,
+        handleSubmit,
+        clickThenCheck,
+        loadData,
+        combineRowKey,
+        handleChangeInTable,
+        visibleChange,
+        queryInfo,
+        queryParam,
+        tableRef,
+        formRef,
+        labelCol,
+        wrapperCol,
+        dictOptions,
+        showSearchFlag,
+        toggleSearchStatus,
+        handleToggleSearch,
+        searchQuery,
+        searchReset,
+        getImgView,
+        viewOnlineCellImage,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .jeecg-basic-table-form-container {
+    padding: 5px;
+
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 0;
+      white-space: nowrap;
+    }
+  }
+  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
+    min-height: 0;
+  }
+  .cellIamge {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/modal/JSelectUserByDepartmentModal.vue b/src/components/Form/src/jeecg/components/modal/JSelectUserByDepartmentModal.vue
new file mode 100644
index 0000000..cc946c0
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/JSelectUserByDepartmentModal.vue
@@ -0,0 +1,935 @@
+<template>
+  <BasicModal
+    wrapClassName="JSelectUserByDepartmentModal"
+    v-bind="$attrs"
+    @register="register"
+    :title="modalTitle"
+    width="800px"
+    @ok="handleOk"
+    destroyOnClose
+    @visible-change="visibleChange"
+  >
+    <div class="j-select-user-by-dept">
+      <div class="modal-content">
+        <!-- 左侧搜索和组织列表 -->
+        <div class="left-content">
+          <!-- 搜索框 -->
+          <div class="search-box">
+            <a-input v-model:value.trim="searchText" placeholder="搜索" @change="handleSearch" @pressEnter="handleSearch" allowClear />
+          </div>
+          <!-- 组织架构 -->
+          <div class="tree-box">
+            <template v-if="searchText.length">
+              <template v-if="searchResult.depart.length || searchResult.user.length">
+                <div class="search-result">
+                  <template v-if="searchResult.user.length">
+                    <div class="search-user">
+                      <p class="search-user-title">人员</p>
+                      <template v-for="item in searchResult.user" :key="item.id">
+                        <div class="search-user-item" @click="handleSearchUserCheck(item)">
+                          <a-checkbox v-model:checked="item.checked" />
+                          <div class="right">
+                            <div class="search-user-item-circle">
+                              <img v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)" alt="avatar" />
+                            </div>
+                            <div class="search-user-item-info">
+                              <div class="search-user-item-name">{{ item.realname }}</div>
+                              <div class="search-user-item-org">{{ item.orgCodeTxt }}</div>
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </div>
+                  </template>
+                  <template v-if="searchResult.depart.length">
+                    <div class="search-depart">
+                      <p class="search-depart-title">部门</p>
+                      <template v-for="item in searchResult.depart" :key="item.id">
+                        <div class="search-depart-item" @click="handleSearchDepartClick(item)">
+                          <a-checkbox v-model:checked="item.checked" @click.stop @change="($event) => handleSearchDepartCheck($event, item)" />
+                          <div class="search-depart-item-name">{{ getDepartName(item.departName, item.departNameAbbr) }}</div>
+                          <RightOutlined />
+                        </div>
+                      </template>
+                    </div>
+                  </template>
+                </div>
+              </template>
+              <template v-else>
+                <div class="no-data">
+                  <a-empty description="暂无数据" />
+                </div>
+              </template>
+            </template>
+            <template v-else>
+              <div ref="breadcrumbBoxRef">
+                <a-breadcrumb v-if="breadcrumb.length">
+                  <a-breadcrumb-item @click="handleBreadcrumbClick()">
+                    <HomeOutlined />
+                  </a-breadcrumb-item>
+                  <template v-for="item in breadcrumb" :key="item?.id">
+                    <a-breadcrumb-item @click="handleBreadcrumbClick(item)">
+                      <span>{{ getDepartName(item.departName, item.departNameAbbr) }}</span>
+                    </a-breadcrumb-item>
+                  </template>
+                </a-breadcrumb>
+              </div>
+              <div v-if="currentDepartUsers.length || currentDeptTotal > 0">
+                <!-- 当前部门用户树 -->
+                <div class="depart-users-tree">
+                  <div v-if="!currentDepartTree.length" class="allChecked">
+                    <a-checkbox v-model:checked="currentDepartAllUsers" @change="handleAllUsers">全选</a-checkbox>
+                  </div>
+                  <template v-for="item in currentDepartUsers" :key="item.id">
+                    <div class="depart-users-tree-item" @click="handleDepartUsersTreeCheck(item)">
+                      <a-checkbox v-model:checked="item.checked" />
+                      <div class="right">
+                        <div class="depart-users-tree-item-circle">
+                          <img v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)" alt="avatar" />
+                        </div>
+                        <div class="depart-users-tree-item-name">{{ item.realname }}</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+                <!-- 分页 -->
+                <div v-if="!currentDepartTree.length && currentDeptTotal > currentDeptPageSize" class="dept-user-pagination">
+                  <a-pagination
+                    v-model:current="currentDeptPageNo"
+                    :total="currentDeptTotal"
+                    :pageSize="currentDeptPageSize"
+                    size="small"
+                    :showSizeChanger="false"
+                    :showQuickJumper="false"
+                    @change="handleDeptUserPageChange"
+                  />
+                </div>
+              </div>
+              <!-- 部门树 -->
+              <div v-if="currentDepartTree.length" class="depart-tree">
+                <template v-for="item in currentDepartTree" :key="item.id">
+                  <div class="depart-tree-item" @click="handleDepartTreeClick(item)">
+                    <a-checkbox v-model:checked="item.checked" @click.stop @change="($event) => handleDepartTreeCheck($event, item)" />
+                    <div class="depart-tree-item-name">{{ getDepartName(item.departName, item.departNameAbbr) }}</div>
+                    <RightOutlined />
+                  </div>
+                </template>
+              </div>
+              <div v-if="currentDepartTree.length === 0 && currentDepartUsers.length === 0" class="no-data">
+                <a-empty description="暂无数据" />
+              </div>
+            </template>
+          </div>
+        </div>
+        <!-- 右侧已选人员展示 -->
+        <div class="right-content">
+          <div class="selected-header"> 已选人员：{{ selectedUsers.length }}人 </div>
+          <div class="selected-users">
+            <div class="content">
+              <div v-for="user in selectedUsers" :key="user.id" class="user-avatar" @click="handleDelUser(user)">
+                <div class="avatar-circle">
+                  <img v-if="user.avatar" :src="getFileAccessHttpUrl(user.avatar)" alt="avatar" />
+                  <div class="mask">
+                    <CloseOutlined></CloseOutlined>
+                  </div>
+                </div>
+                <div class="user-name">{{ user.realname }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, watch } from 'vue';
+  import { RightOutlined, HomeOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { queryTreeList, getTableList as getTableListOrigin } from '/@/api/common/api';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { isArray } from '/@/utils/is';
+  import { defHttp } from '/@/utils/http/axios';
+
+  defineOptions({ name: 'JSelectUserByDepartmentModal' });
+  const props = defineProps({
+    // ...selectProps,
+    //回传value字段名
+    rowKey: {
+      type: String,
+      default: 'id',
+    },
+    //回传文本字段名
+    labelKey: {
+      type: String,
+      default: 'name',
+    },
+    modalTitle: {
+      type: String,
+      default: '部门用户选择',
+    },
+    selectedUser: {
+      type: Array,
+      default: () => [],
+    },
+    //查询参数
+    params: {
+      type: Object,
+      default: () => {},
+    },
+    // 是否启用公司简称
+    useCompanyShortName: {
+      type: Boolean,
+      default: true,
+    },
+    //最大选择数量
+    maxSelectCount: {
+      type: Number,
+      default: 0,
+    },
+    // 是否单选
+    isRadioSelection: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emit = defineEmits(['close', 'register', 'change']);
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  // 搜索文本
+  const searchText = ref('');
+  const breadcrumb = ref<any[]>([]);
+  // 部门树(整颗树)
+  const departTree = ref([]);
+  // 当前部门树
+  const currentDepartTree = ref<any[]>([]);
+  // 选中的部门节点
+  const checkedDepartIds = ref<string[]>([]);
+  // 当前部门用户
+  const currentDepartUsers = ref([]);
+  // 当前叶子部门分页状态
+  const currentDeptId = ref('');
+  const currentDeptPageNo = ref(1);
+  const currentDeptPageSize = ref(50);
+  const currentDeptTotal = ref(0);
+  // 已选用户
+  const selectedUsers = ref<any[]>([]);
+  // 全选
+  const currentDepartAllUsers = ref(false);
+  // 搜索结构
+  const searchResult: any = reactive({
+    depart: [],
+    user: [],
+  });
+  // 面包屑框
+  const breadcrumbBoxRef = ref();
+  // 映射部门和人员的关系
+  const cacheDepartUser = {};
+  //注册弹框
+  const [register, { closeModal }] = useModalInner(async (data) => {
+    // 初始化
+    if (props.selectedUser.length) {
+      // 编辑时，传进来已选中的数据
+      selectedUsers.value = props.selectedUser;
+    }
+    getQueryTreeList();
+  });
+  const visibleChange = (visible) => {
+    if (visible === false) {
+      setTimeout(() => {
+        emit('close');
+      }, 300);
+    }
+  };
+  const handleOk = () => {
+    if (selectedUsers.value.length == 0) {
+      createMessage.warning('请选择人员');
+      return;
+    }
+    if (props.isRadioSelection && selectedUsers.value.length > 1) {
+      createMessage.warning('只允许选择一个用户');
+      return;
+    }
+    if (props.maxSelectCount && selectedUsers.value.length > props.maxSelectCount) {
+      createMessage.warning(`最多只能选择${props.maxSelectCount}个用户`);
+      return;
+    }
+    emit('change', selectedUsers.value);
+    closeModal();
+  };
+  // 搜索人员/部门
+  const handleSearch = () => {
+    if (searchText.value) {
+      defHttp
+        .get({
+          url: `/sys/user/listAll`,
+          params: {
+            column: 'createTime',
+            order: 'desc',
+            pageNo: 1,
+            pageSize: 100,
+            realname: `*${searchText.value}*`,
+          },
+        })
+        .then((result: any) => {
+          result.records?.forEach((item) => {
+            const findItem = selectedUsers.value.find((user) => user.id == item.id);
+            if (findItem) {
+              // 能在右侧找到说明选中了，左侧同样需要选中。
+              item.checked = true;
+            } else {
+              item.checked = false;
+            }
+          });
+          searchResult.user = result.records ?? [];
+        });
+      searchResult.depart = getDepartByName(searchText.value) ?? [];
+    } else {
+      searchResult.user = [];
+      searchResult.depart = [];
+    }
+  };
+  // 面包屑
+  const handleBreadcrumbClick = (item?) => {
+    // 先清空
+    currentDepartUsers.value = [];
+    currentDeptId.value = '';
+    currentDeptPageNo.value = 1;
+    currentDeptTotal.value = 0;
+    if (item) {
+      const findIndex = breadcrumb.value.findIndex((o) => o.id === item.id);
+      if (findIndex != -1) {
+        breadcrumb.value = breadcrumb.value.filter((item, index) => {
+          console.log(item);
+          return index <= findIndex;
+        });
+      }
+      const data = getDepartTreeNodeById(item.id, departTree.value);
+      currentDepartTree.value = data.children;
+    } else {
+      // 根节点
+      currentDepartTree.value = departTree.value;
+      breadcrumb.value = [];
+    }
+  };
+  // 点击部门树复选框触发
+  const handleDepartTreeCheck = (e, item) => {
+    const { target } = e;
+    if (target.checked) {
+      // 选中
+      getUsersByDeptId(item['id']).then((users) => {
+        addUsers(users);
+      });
+      checkedDepartIds.value.push((item as any).id);
+      // 检查父节点下所有子节点是否选中
+      const parentItem = getDepartTreeParentById(item.id);
+      if (parentItem?.children) {
+        const isChildAllChecked = parentItem.children.every((item) => item.checked);
+        if (isChildAllChecked) {
+          parentItem.checked = true;
+        } else {
+          parentItem.checked = false;
+        }
+      }
+    } else {
+      // 取消选中
+      const findIndex = checkedDepartIds.value.findIndex((o: any) => o.id === item.id);
+      if (findIndex != -1) {
+        checkedDepartIds.value.splice(findIndex, 1);
+      }
+      // 如果父节点是选中，则需要取消
+      const parentItem = getDepartTreeParentById(item.id);
+      if (parentItem) {
+        parentItem.checked = false;
+      }
+      getUsersByDeptId(item['id']).then((users) => {
+        users.forEach((item) => {
+          const findIndex = selectedUsers.value.findIndex((user) => user.id === item.id);
+          if (findIndex != -1) {
+            selectedUsers.value.splice(findIndex, 1);
+          }
+        });
+      });
+    }
+  };
+  // 点击部门树节点触发
+  const handleDepartTreeClick = (item) => {
+    breadcrumb.value = [...breadcrumb.value, item];
+    if (item.children) {
+      // 有子节点，则显示部门
+      if (item.checked) {
+        // 父节点勾选，则子节点全部勾选
+        item.children.forEach((item) => {
+          item.checked = true;
+        });
+      }
+      currentDepartTree.value = item.children;
+      defHttp
+        .get({
+          url: '/sys/sysDepart/getUsersByDepartId',
+          params: {
+            id: item['id'],
+          },
+        })
+        .then((res: any) => {
+          const result = res ?? [];
+          if (item.checked) {
+            // 父节点勾选，则默认勾选
+            result.forEach((item) => {
+              item.checked = true;
+            });
+          }
+          // 右侧勾选了，则默认勾选（用户存在多部门，在别的部门被选中了）
+          if (selectedUsers.value.length) {
+            result.forEach((item) => {
+              const findItem = selectedUsers.value.find((user) => user.id === item.id);
+              if (findItem) {
+                // 说明在selectedUsers中被找到
+                item.checked = true;
+              }
+            });
+          }
+          currentDepartUsers.value = result.sort((a, b) => a.sort - b.sort );
+        });
+    } else {
+      // 没有子节点，则显示用户
+      currentDepartTree.value = [];
+      currentDeptId.value = item['id'];
+      currentDeptPageNo.value = 1;
+      currentDeptTotal.value = 0;
+      loadDeptUsers(item['id'], 1);
+    }
+  };
+  // 加载叶子部门用户（带分页）
+  const loadDeptUsers = (departId: string, pageNo: number) => {
+    return getTableList({
+      departId,
+      pageNo,
+      pageSize: currentDeptPageSize.value,
+    }).then((res: any) => {
+      if (res?.records) {
+        currentDeptTotal.value = res.total ?? 0;
+        currentDeptPageNo.value = pageNo;
+        let checked = true;
+        res.records.forEach((item) => {
+          const findItem = selectedUsers.value.find((user) => user.id == item.id);
+          if (findItem) {
+            item.checked = true;
+          } else {
+            item.checked = false;
+            checked = false;
+          }
+        });
+        currentDepartAllUsers.value = checked && res.records.length > 0;
+        currentDepartUsers.value = res.records.sort((a, b) => a.sort - b.sort);
+      }
+    });
+  };
+  // 叶子部门用户翻页
+  const handleDeptUserPageChange = (page: number) => {
+    loadDeptUsers(currentDeptId.value, page);
+  };
+  // 点击部门用户树复选框触发
+  const handleDepartUsersTreeCheck = (item) => {
+    item.checked = !item.checked;
+    if (item.checked) {
+      addUsers(item);
+    } else {
+      selectedUsers.value = selectedUsers.value.filter((user) => user.id !== item.id);
+    }
+    if (item.checked == false) {
+      // 有一个是false，则全选false
+      currentDepartAllUsers.value = false;
+    }
+  };
+  // 全选
+  const handleAllUsers = ({ target }) => {
+    const { checked } = target;
+    if (checked) {
+      currentDepartUsers.value.forEach((item: any) => (item.checked = true));
+      addUsers(currentDepartUsers.value);
+    } else {
+      currentDepartUsers.value.forEach((item: any) => (item.checked = false));
+      selectedUsers.value = selectedUsers.value.filter((user) => {
+        const userId = user.id;
+        const findItem = currentDepartUsers.value.find((item: any) => item.id === userId);
+        if (findItem) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    }
+  };
+  // 删除人员
+  const handleDelUser = (item) => {
+    const findIndex = selectedUsers.value.findIndex((user) => user.id === item.id);
+    if (findIndex != -1) {
+      selectedUsers.value.splice(findIndex, 1);
+    }
+    const findItem: any = currentDepartUsers.value.find((user: any) => user.id === item.id);
+    if (findItem) {
+      findItem.checked = false;
+      currentDepartAllUsers.value = false;
+    }
+  };
+  // 点击搜索用户复选框
+  const handleSearchUserCheck = (item) => {
+    item.checked = !item.checked;
+    if (item.checked) {
+      addUsers(item);
+    } else {
+      selectedUsers.value = selectedUsers.value.filter((user) => user.id !== item.id);
+    }
+  };
+  // 点击搜索部门复选框
+  const handleSearchDepartCheck = (e, item) => {
+    handleDepartTreeCheck(e, item);
+  };
+  // 点击搜索部门
+  const handleSearchDepartClick = (item) => {
+    searchResult.depart = [];
+    searchResult.user = [];
+    breadcrumb.value = getPathToNodeById(item.id);
+    handleDepartTreeClick(item);
+  };
+  // 添加人员到右侧
+  const addUsers = (users) => {
+    let newUsers: any = [];
+    if (isArray(users)) {
+      // selectedUsers里面没有才添加（防止重复）
+      newUsers = users.filter((user: any) => !selectedUsers.value.find((item) => item.id === user.id));
+    } else {
+      if (!selectedUsers.value.find((user) => user.id === users.id)) {
+        // selectedUsers里面没有才添加（防止重复）
+        newUsers = [users];
+      }
+    }
+    selectedUsers.value = [...selectedUsers.value, ...newUsers];
+    const result = currentDepartUsers.value.every((item: any) => !!item.checked);
+    currentDepartAllUsers.value = result;
+  };
+  watch(breadcrumb, () => {
+    setTimeout(() => {
+      breadcrumbScrollToRight();
+    }, 0);
+  });
+  const breadcrumbScrollToRight = () => {
+    const olEle = breadcrumbBoxRef.value?.querySelector('ol');
+    if (olEle) {
+      olEle.scrollLeft = 30000;
+    }
+  };
+  // 解析参数
+  const parseParams = (params) => {
+    if (props?.params) {
+      return {
+        ...params,
+        ...props.params,
+      };
+    }
+    return params;
+  };
+  const getQueryTreeList = (params?) => {
+    params = parseParams(params);
+    queryTreeList({ ...params }).then((res) => {
+      if (res) {
+        departTree.value = res;
+        currentDepartTree.value = res;
+      }
+    });
+  };
+  // 根据部门id获取用户
+  const getTableList = (params) => {
+    params = parseParams(params);
+    return getTableListOrigin({ ...params });
+  };
+  const getUsersByDeptId = (id) => {
+    return new Promise<any[]>((resolve) => {
+      if (cacheDepartUser[id]) {
+        resolve(cacheDepartUser[id]);
+      } else {
+        getTableList({
+          departId: id,
+          pageNo: 1,
+          pageSize: 1000,
+        }).then((res: any) => {
+          cacheDepartUser[id] = res.records ?? [];
+          resolve(res.records ?? []);
+        });
+      }
+    });
+  };
+  // 根据id获取根节点到当前节点路径
+  const getPathToNodeById = (id: string, tree = departTree.value, path = []): any[] => {
+    for (const node of tree) {
+      if ((node as any).id === id) {
+        return [...path];
+      }
+      if ((node as any).children) {
+        const foundPath = getPathToNodeById(id, (node as any).children, [...path, node]);
+        if (foundPath.length) {
+          return foundPath;
+        }
+      }
+    }
+    return [];
+  };
+  // 根据id获取部门树父节点数据
+  const getDepartTreeParentById = (id: string, tree = departTree.value, parent = null): any => {
+    for (const node of tree) {
+      if ((node as any).id === id) {
+        return parent;
+      }
+      if ((node as any).children) {
+        const found = getDepartTreeParentById(id, (node as any).children, node);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+  // 通过名称搜索部门支持模糊
+  const getDepartByName = (name: string, tree = departTree.value): any[] => {
+    const result: any[] = [];
+    const search = (nodes: any[]) => {
+      for (const node of nodes) {
+        if (getDepartName(node.departName, node.departNameAbbr)?.toLowerCase().includes(name.toLowerCase())) {
+          result.push(node);
+        }
+        if (node.children?.length) {
+          search(node.children);
+        }
+      }
+    };
+    search(tree);
+    return result;
+  };
+  // 根据id获取部门树当前节点数据
+  const getDepartTreeNodeById = (id: string, tree = departTree.value): any => {
+    for (const node of tree) {
+      if ((node as any).id === id) {
+        return node;
+      }
+      if ((node as any).children) {
+        const found = getDepartTreeNodeById(id, (node as any).children);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+  // 获取部门名称（如果启用公司简称且公司简称不为空，则返回公司简称）
+  function getDepartName(departName, departNameAbbr) {
+    if (props.useCompanyShortName && departNameAbbr) {
+      return departNameAbbr;
+    }
+    return departName;
+  }
+</script>
+<style lang="less">
+  .JSelectUserByDepartmentModal {
+    .scroll-container {
+      padding: 0;
+    }
+  }
+  .ant-modal-root .fullscreen-modal.JSelectUserByDepartmentModal {
+    .j-select-user-by-dept {
+      height: 100%;
+    }
+    .modal-content {
+      height: 100%;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .j-select-user-by-dept {
+    background: #fff;
+    border-radius: 4px;
+  }
+  .modal-content {
+    display: flex;
+    padding: 20px;
+    padding-bottom: 0;
+    padding-left: 0;
+    height: 400px;
+    font-size: 12px;
+  }
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    border-right: 1px solid #e8e8e8;
+    .search-box {
+      :deep(.ant-input-affix-wrapper) {
+        border-color: #d9d9d9 !important;
+      }
+      margin: 0 16px 16px 16px;
+    }
+    :deep(.ant-breadcrumb) {
+      font-size: 12px;
+      margin-left: 16px;
+      margin-right: 16px;
+      color: inherit;
+      cursor: pointer;
+      ol {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        /* 美化滚动条 */
+        &::-webkit-scrollbar {
+          width: 4px;
+          height: 3px;
+          background: #f5f5f5;
+          border-radius: 2px;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: #bfbfbf;
+          border-radius: 3px;
+          transition: background-color 0.2s ease;
+          &:hover {
+            background: #999;
+          }
+        }
+        &::-webkit-scrollbar-track {
+          background: #f5f5f5;
+          border-radius: 3px;
+        }
+      }
+      li {
+        flex: none;
+        .ant-breadcrumb-link {
+          cursor: pointer;
+          &:hover {
+            color: @primary-color;
+          }
+        }
+        &:last-child {
+          .ant-breadcrumb-link {
+            pointer-events: none;
+          }
+        }
+      }
+    }
+    .tree-box {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow-y: auto;
+      .no-data {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .depart-tree {
+      .depart-tree-item {
+        padding: 0 16px;
+        line-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        &:hover {
+          background-color: #f4f6fa;
+        }
+      }
+      .depart-tree-item-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 0 8px;
+      }
+    }
+  }
+  .dept-user-pagination {
+    padding: 8px 16px;
+    text-align: right;
+    border-top: 1px solid #f0f0f0;
+  }
+  .depart-users-tree {
+    .allChecked {
+      padding: 0 16px;
+      margin-bottom: 16px;
+      padding-top: 12px;
+      :deep(.ant-checkbox-wrapper) {
+        font-size: 12px;
+      }
+    }
+    .depart-users-tree-item {
+      line-height: 50px;
+      padding: 0 16px;
+      display: flex;
+      cursor: pointer;
+      &:hover {
+        background-color: #f4f6fa;
+      }
+      .right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        margin: 0 8px;
+      }
+      .depart-users-tree-item-circle {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background-color: #aaa;
+        overflow: hidden;
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .depart-users-tree-item-name {
+        margin-left: 8px;
+      }
+    }
+  }
+  .search-depart {
+    margin-bottom: 8px;
+    .search-depart-title {
+      padding-left: 16px;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+    .search-depart-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 16px;
+      cursor: pointer;
+      &:hover {
+        background-color: #f4f6fa;
+      }
+      .search-depart-item-name {
+        margin-left: 8px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .search-user {
+    margin-bottom: 8px;
+    .search-user-title {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      padding-left: 16px;
+    }
+    .search-user-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 16px;
+      cursor: pointer;
+      &:hover {
+        background-color: #f4f6fa;
+      }
+      .right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        margin: 0 8px;
+      }
+      .search-user-item-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 8px;
+      }
+      .search-user-item-circle {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: #aaa;
+      }
+      .search-user-item-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .search-user-item-org {
+        color: #999;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+  .right-content {
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+    .selected-header {
+      margin-bottom: 16px;
+    }
+    .selected-users {
+      flex: 1;
+      overflow: hidden auto;
+    }
+    .content {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+    }
+    .user-avatar {
+      text-align: center;
+      width: 70px;
+      cursor: pointer;
+    }
+    .avatar-circle {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      margin: 0 auto 8px;
+      position: relative;
+      background-color: rgba(0, 0, 0, 0.5);
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      &:hover {
+        .mask {
+          opacity: 1;
+        }
+      }
+      .mask {
+        opacity: 0;
+        transition: opacity;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .user-name {
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/modal/PositionSelectModal.vue b/src/components/Form/src/jeecg/components/modal/PositionSelectModal.vue
new file mode 100644
index 0000000..cc7470f
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/PositionSelectModal.vue
@@ -0,0 +1,186 @@
+<!--职务选择框-->
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      @register="register"
+      :title="modalTitle"
+      width="1100px"
+      wrapClassName="j-user-select-modal"
+      @ok="handleOk"
+      destroyOnClose
+      @visible-change="visibleChange"
+    >
+      <a-row>
+        <a-col :span="showSelected ? 18 : 24">
+          <BasicTable
+            :columns="columns"
+            :bordered="true"
+            :useSearchForm="true"
+            :formConfig="formConfig"
+            :api="getPositionList"
+            :searchInfo="searchInfo"
+            :rowSelection="rowSelection"
+            :indexColumnProps="indexColumnProps"
+            v-bind="getBindValue"
+          ></BasicTable>
+        </a-col>
+        <a-col :span="showSelected ? 6 : 0">
+          <BasicTable
+            v-bind="selectedTable"
+            :dataSource="selectRows"
+            :useSearchForm="true"
+            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }"
+          >
+            <!--操作栏-->
+            <template #action="{ record }">
+              <a href="javascript:void(0)" @click="handleDeleteSelected(record)"><Icon icon="ant-design:delete-outlined"></Icon></a>
+            </template>
+          </BasicTable>
+        </a-col>
+      </a-row>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getPositionList } from '/@/api/common/api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+
+  export default defineComponent({
+    name: 'PositionSelectModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      ...selectProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '职务选择',
+      },
+    },
+    emits: ['register', 'getSelectResult'],
+    setup(props, { emit, refs }) {
+      //注册弹框
+      const [register, { closeModal }] = useModalInner();
+      const attrs = useAttrs();
+      //表格配置
+      const config = {
+        canResize: false,
+        bordered: true,
+        size: 'small',
+        //改成读取rowKey,自定义传递参数
+        rowKey: props.rowKey,
+      };
+      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
+      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
+        getPositionList,
+        getBindValue
+      );
+      const searchInfo = ref(props.params);
+      //查询form
+      const formConfig = {
+        labelCol: {
+          span: 4,
+        },
+        baseColProps: {
+          xs: 24,
+          sm: 10,
+          md: 10,
+          lg: 10,
+          xl: 10,
+          xxl: 10,
+        },
+        // 代码逻辑说明: [issues/5514]组件页面显示错位
+        actionColOptions: {
+            xs: 24,
+            sm: 8,
+            md: 8,
+            lg: 8,
+            xl: 8,
+            xxl: 8,
+        },
+        schemas: [
+          {
+            label: '职务名称',
+            field: 'name',
+            component: 'JInput',
+            colProps: { span: 10 },
+          },
+        ],
+      };
+      //定义表格列
+      const columns = [
+        {
+          title: '职务名称',
+          dataIndex: 'name',
+          // width: 180,
+        },
+        {
+          title: '职务级别',
+          dataIndex: 'postLevel',
+        },
+      ];
+      //已选择的table信息
+      const selectedTable = {
+        pagination: false,
+        showIndexColumn: false,
+        scroll: { y: 390 },
+        size: 'small',
+        canResize: false,
+        bordered: true,
+        rowKey: 'id',
+        columns: [
+          {
+            title: '职务名称',
+            dataIndex: 'name',
+            width: 40,
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: 'center',
+            width: 40,
+            slots: { customRender: 'action' },
+          },
+        ],
+      };
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectResult((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+      return {
+        handleOk,
+        getPositionList,
+        register,
+        visibleChange,
+        getBindValue,
+        formConfig,
+        indexColumnProps,
+        columns,
+        rowSelection,
+
+        selectedTable,
+        selectRows,
+        handleDeleteSelected,
+        searchInfo,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/modal/RoleSelectModal.vue b/src/components/Form/src/jeecg/components/modal/RoleSelectModal.vue
new file mode 100644
index 0000000..6dc4e82
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/RoleSelectModal.vue
@@ -0,0 +1,129 @@
+<!--角色选择框-->
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="800px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
+      <BasicTable
+        :columns="columns"
+        v-bind="config"
+        :useSearchForm="true"
+        :formConfig="formConfig"
+        :api="getRoleList"
+        :searchInfo="searchInfo"
+        :rowSelection="rowSelection"
+        :indexColumnProps="indexColumnProps"
+      ></BasicTable>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getRoleList } from '/@/api/common/api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+
+  export default defineComponent({
+    name: 'UserSelectModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      ...selectProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '角色选择',
+      },
+    },
+    emits: ['register', 'getSelectResult'],
+    setup(props, { emit, refs }) {
+      //注册弹框
+      const [register, { closeModal }] = useModalInner();
+      const attrs = useAttrs();
+      //表格配置
+      const config = {
+        canResize: false,
+        bordered: true,
+        size: 'small',
+        rowKey: unref(props).rowKey,
+      };
+      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
+      const [{ rowSelection, indexColumnProps, visibleChange, getSelectResult }] = useSelectBiz(getRoleList, getBindValue);
+      const searchInfo = ref(props.params);
+      //查询form
+      const formConfig = {
+        //labelWidth: 220,
+        baseColProps: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 14,
+          xl: 14,
+          xxl: 14,
+        },
+        // 代码逻辑说明: [issues/5514]组件页面显示错位
+        actionColOptions: {
+            xs: 24,
+            sm: 8,
+            md: 8,
+            lg: 8,
+            xl: 8,
+            xxl: 8,
+        },
+        schemas: [
+          {
+            label: '角色名称',
+            field: 'roleName',
+            component: 'Input',
+          },
+        ],
+      };
+      //定义表格列
+      const columns = [
+        {
+          title: '角色名称',
+          dataIndex: 'roleName',
+          width: 240,
+          align: 'left',
+        },
+        {
+          title: '角色编码',
+          dataIndex: 'roleCode',
+          // width: 40,
+        },
+      ];
+
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectResult((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+
+      return {
+        config,
+        handleOk,
+        searchInfo,
+        register,
+        indexColumnProps,
+        visibleChange,
+        getRoleList,
+        formConfig,
+        getBindValue,
+        columns,
+        rowSelection,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/modal/UserSelectByDepModal.vue b/src/components/Form/src/jeecg/components/modal/UserSelectByDepModal.vue
new file mode 100644
index 0000000..fcb7c85
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/UserSelectByDepModal.vue
@@ -0,0 +1,265 @@
+<!--通过部门选择用户-->
+<template>
+  <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="1200px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
+    <a-row :gutter="10">
+      <a-col :md="7" :sm="24" style="height: 613px;overflow: auto ">
+        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
+          <!--组织机构-->
+          <BasicTree
+            ref="treeRef"
+            :style="{ minWidth: '250px' }"
+            selectable
+            @select="onDepSelect"
+            :load-data="loadChildrenTreeData"
+            :treeData="departTree"
+            :selectedKeys="selectedDepIds"
+            :expandedKeys="expandedKeys"
+            :clickRowToExpand="false"
+          >
+            <template #title="{ orgCategory, title }">
+              <TreeIcon :orgCategory="orgCategory" :title="title"></TreeIcon>
+            </template>
+          </BasicTree>
+        </a-card>
+      </a-col>
+      <a-col :md="17" :sm="24">
+        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
+          <!--用户列表-->
+          <BasicTable ref="tableRef" v-bind="getBindValue" :searchInfo="searchInfo" :api="getTableList" :rowSelection="rowSelection" :defSort="{ column: '', order: '' }"></BasicTable>
+        </a-card>
+      </a-col>
+    </a-row>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTree } from '/@/components/Tree/index';
+  import { queryTreeList, getTableList as getTableListOrigin } from '/@/api/common/api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { queryDepartTreeSync as queryDepartTreeSyncOrigin } from '/@/views/system/depart/depart.api';
+  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+  import TreeIcon from '@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue';
+  export default defineComponent({
+    name: 'UserSelectByDepModal',
+    components: {
+      TreeIcon,
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTree,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      ...selectProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '部门用户选择',
+      },
+    },
+    emits: ['register', 'getSelectResult'],
+    setup(props, { emit, refs }) {
+      const tableRef = ref();
+      const treeRef = ref();
+      //注册弹框
+      const [register, { closeModal }] = useModalInner(async (data) => {
+        await queryDepartTree();
+      });
+      const attrs = useAttrs();
+      const departTree = ref([]);
+      const selectedDepIds = ref([]);
+      const expandedKeys = ref([]);
+      const searchInfo = {};
+      /**
+       *表格配置
+       */
+      const tableProps = {
+        columns: [
+          {
+            title: '用户账号',
+            dataIndex: 'username',
+            width: 180,
+          },
+          {
+            title: '用户姓名',
+            dataIndex: 'realname',
+            width: 180,
+          },
+          {
+            title: '性别',
+            dataIndex: 'sex_dictText',
+            width: 80,
+          },
+          {
+            title: '手机号码',
+            dataIndex: 'phone',
+            customRender:( { record, text })=>{
+              if(record.izHideContact && record.izHideContact === '1'){
+                return '/';
+              }
+              return text;
+            }
+            // width: 50,
+          },
+        ],
+        useSearchForm: true,
+        canResize: false,
+        showIndexColumn: false,
+        striped: true,
+        bordered: true,
+        size: 'small',
+        formConfig: {
+          //labelWidth: 200,
+          baseColProps: {
+            xs: 24,
+            sm: 8,
+            md: 6,
+            lg: 8,
+            xl: 6,
+            xxl: 8,
+          },
+          // 代码逻辑说明: [issues/5514]组件页面显示错位
+          actionColOptions: {
+              xs: 24,
+              sm: 12,
+              md: 12,
+              lg: 12,
+              xl: 8,
+              xxl: 8,
+          },
+          schemas: [
+            {
+              label: '账号',
+              field: 'username',
+              component: 'Input',
+            },
+            {
+              label: '姓名',
+              field: 'realname',
+              component: 'Input',
+            },
+          ],
+          resetFunc: customResetFunc,
+        },
+      };
+      const getBindValue = Object.assign({}, unref(props), unref(attrs), tableProps);
+      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, reset }] = useSelectBiz(getTableList, getBindValue);
+
+      function getTableList(params) {
+        params = parseParams(params);
+        return getTableListOrigin({...params});
+      }
+
+      function queryDepartTreeSync(params) {
+        params = parseParams(params);
+        return queryDepartTreeSyncOrigin({...params});
+      }
+
+      /**
+       * 解析参数
+       * @param params
+       */
+      function parseParams(params) {
+        if (props?.params) {
+          return {
+            ...params,
+            ...props.params,
+          }
+        }
+        return params;
+      }
+
+      /**
+       * 加载树形数据
+       */
+      function queryDepartTree() {
+        queryDepartTreeSync().then((res) => {
+          if (res) {
+            departTree.value = res;
+            // 默认展开父节点
+            //expandedKeys.value = unref(departTree).map(item => item.id)
+          }
+        });
+      }
+      /**
+       * 加载子级部门
+       */
+      async function loadChildrenTreeData(treeNode) {
+        try {
+          const result = await queryDepartTreeSync({
+            pid: treeNode.eventKey,
+          });
+          const asyncTreeAction = unref(treeRef);
+          if (asyncTreeAction) {
+            asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: result });
+            asyncTreeAction.setExpandedKeys([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        return Promise.resolve();
+      }
+      /**
+       * 点击树节点,筛选出对应的用户
+       */
+      function onDepSelect(keys) {
+        if (keys[0] != null) {
+          if (unref(selectedDepIds)[0] !== keys[0]) {
+            selectedDepIds.value = [keys[0]];
+          }
+          searchInfo['departId'] = unref(selectedDepIds).join(',');
+          tableRef.value.reload();
+        }
+      }
+      /**
+       * 自定义重置方法
+       * */
+      async function customResetFunc() {
+        console.log('自定义查询');
+        //树节点清空
+        selectedDepIds.value = [];
+        //查询条件清空
+        searchInfo['departId'] = '';
+        //选择项清空
+        reset();
+      }
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectResult((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+
+      return {
+        //config,
+        handleOk,
+        searchInfo,
+        register,
+        indexColumnProps,
+        visibleChange,
+        getBindValue,
+        rowSelection,
+
+        departTree,
+        selectedDepIds,
+        expandedKeys,
+        treeRef,
+        tableRef,
+        getTableList,
+        onDepSelect,
+        loadChildrenTreeData,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/Form/src/jeecg/components/modal/UserSelectByDepPostModal.vue b/src/components/Form/src/jeecg/components/modal/UserSelectByDepPostModal.vue
new file mode 100644
index 0000000..3debe13
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/UserSelectByDepPostModal.vue
@@ -0,0 +1,296 @@
+<!--通过部门选择用户-->
+<template>
+  <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="1200px" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
+    <a-row :gutter="10">
+      <a-col :md="7" :sm="24">
+        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
+          <a-input-search placeholder="按岗位名称搜索…" style="margin-bottom: 10px" @search="onSearch" @change="handelSearchChange"/>
+          <!--组织机构-->
+          <BasicTree
+            ref="treeRef"
+            :style="{ minWidth: '250px' }"
+            selectable
+            @select="onDepSelect"
+            :load-data="loadChildrenTreeData"
+            :treeData="departTree"
+            :selectedKeys="selectedDepIds"
+            :expandedKeys="expandedKeys"
+            :clickRowToExpand="false"
+            :key="reloadKey"
+          >
+            <template #title="{ orgCategory, title }">
+              <TreeIcon :orgCategory="orgCategory" :title="title"></TreeIcon>
+            </template>
+          </BasicTree>
+        </a-card>
+      </a-col>
+      <a-col :md="17" :sm="24">
+        <a-card :style="{ minHeight: '613px', overflow: 'auto' }">
+          <!--用户列表-->
+          <BasicTable ref="tableRef" v-bind="getBindValue" :searchInfo="searchInfo" :api="getTableList" :rowSelection="rowSelection"></BasicTable>
+        </a-card>
+      </a-col>
+    </a-row>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTree } from '/@/components/Tree/index';
+  import { queryDepartPostUserPageList as getTableListOrigin} from '/@/api/common/api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import TreeIcon from '/@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue';
+  import { queryDepartAndPostTreeSync as queryDepartTreeSyncOrigin } from '/@/views/system/depart/depart.api';
+  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+  import {defHttp} from "@/utils/http/axios";
+  export default defineComponent({
+    name: 'UserSelectByDepPostModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTree,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+      TreeIcon,
+    },
+    props: {
+      ...selectProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '部门用户选择',
+      },
+    },
+    emits: ['register', 'getSelectResult'],
+    setup(props, { emit, refs }) {
+      const tableRef = ref();
+      const treeRef = ref();
+      //注册弹框
+      const [register, { closeModal }] = useModalInner(async (data) => {
+        await queryDepartTree();
+      });
+      const attrs = useAttrs();
+      const departTree = ref<any>([]);
+      const selectedDepIds = ref([]);
+      const expandedKeys = ref([]);
+      const searchInfo = {};
+      //树加载的key
+      const reloadKey = ref(Math.random());
+      
+      /**
+       *表格配置
+       */
+      const tableProps = {
+        columns: [
+          {
+            title: '用户账号',
+            dataIndex: 'username',
+            width: 180,
+          },
+          {
+            title: '用户姓名',
+            dataIndex: 'realname',
+            width: 180,
+          },
+          {
+            title: '性别',
+            dataIndex: 'sex_dictText',
+            width: 80,
+          },
+          {
+            title: '手机号码',
+            dataIndex: 'phone',
+            customRender:( { record, text })=>{
+              if(record.izHideContact && record.izHideContact === '1'){
+                return '/';
+              }
+              return text;
+            }
+          },
+        ],
+        useSearchForm: true,
+        canResize: false,
+        showIndexColumn: false,
+        striped: true,
+        bordered: true,
+        size: 'small',
+        formConfig: {
+          //labelWidth: 200,
+          baseColProps: {
+            xs: 24,
+            sm: 8,
+            md: 6,
+            lg: 8,
+            xl: 6,
+            xxl: 10,
+          },
+          // 代码逻辑说明: [issues/5514]组件页面显示错位
+          actionColOptions: {
+            xs: 24,
+            sm: 12,
+            md: 12,
+            lg: 12,
+            xl: 8,
+            xxl: 8,
+          },
+          schemas: [
+            {
+              label: '账号',
+              field: 'username',
+              component: 'Input',
+            },
+          ],
+          resetFunc: customResetFunc,
+        },
+      };
+      const getBindValue = Object.assign({}, unref(props), unref(attrs), tableProps);
+      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, reset }] = useSelectBiz(getTableList, getBindValue);
+
+      function getTableList(params) {
+        params = parseParams(params);
+        return getTableListOrigin({ ...params });
+      }
+
+      function queryDepartTreeSync(params) {
+        params = parseParams(params);
+        return queryDepartTreeSyncOrigin({ ...params });
+      }
+
+      /**
+       * 解析参数
+       * @param params
+       */
+      function parseParams(params) {
+        if (props?.params) {
+          return {
+            ...params,
+            ...props.params,
+          };
+        }
+        return params;
+      }
+
+      /**
+       * 加载树形数据
+       */
+      function queryDepartTree() {
+        queryDepartTreeSync({}).then((res) => {
+          if (res) {
+            departTree.value = res;
+          }
+        });
+      }
+
+      /**
+       * 加载子级部门
+       */
+      async function loadChildrenTreeData(treeNode) {
+        try {
+          const result = await queryDepartTreeSync({
+            pid: treeNode.eventKey,
+          });
+          const asyncTreeAction = unref(treeRef);
+          if (asyncTreeAction) {
+            asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: result });
+            asyncTreeAction.setExpandedKeys([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        return Promise.resolve();
+      }
+      /**
+       * 点击树节点,筛选出对应的用户
+       */
+      function onDepSelect(keys) {
+        if (keys[0] != null) {
+          if (unref(selectedDepIds)[0] !== keys[0]) {
+            selectedDepIds.value = [keys[0]];
+          }
+          searchInfo['departId'] = unref(selectedDepIds).join(',');
+          tableRef.value.reload();
+        }
+      }
+      /**
+       * 自定义重置方法
+       * */
+      async function customResetFunc() {
+        console.log('自定义查询');
+        //树节点清空
+        selectedDepIds.value = [];
+        //查询条件清空
+        searchInfo['departId'] = '';
+        //选择项清空
+        reset();
+      }
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectResult((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+
+      /**
+       * 岗位搜索
+       *
+       * @param value
+       */
+      async function onSearch(value) {
+        if(value){
+          let result = await defHttp.get({ url: "/sys/sysDepart/searchBy", params: { keyWord: value, orgCategory: "3",...props.params } });
+          if (Array.isArray(result)) {
+            departTree.value = result;
+          } else {
+            departTree.value = [];
+          }
+        } else {
+          departTree.value = [];
+          await queryDepartTree();
+        }
+      }
+
+      /**
+       * 搜索值改变事件
+       * @param value
+       */
+      function handelSearchChange(value) {
+        if(!value.target.value){
+          reloadKey.value = Math.random();
+        }
+      }
+
+      return {
+        //config,
+        handleOk,
+        searchInfo,
+        register,
+        indexColumnProps,
+        visibleChange,
+        getBindValue,
+        rowSelection,
+
+        departTree,
+        selectedDepIds,
+        expandedKeys,
+        treeRef,
+        tableRef,
+        getTableList,
+        onDepSelect,
+        loadChildrenTreeData,
+        onSearch,
+        handelSearchChange,
+        reloadKey,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/Form/src/jeecg/components/modal/UserSelectModal.vue b/src/components/Form/src/jeecg/components/modal/UserSelectModal.vue
new file mode 100644
index 0000000..77f03fc
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/modal/UserSelectModal.vue
@@ -0,0 +1,330 @@
+<!--用户选择框-->
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      @register="register"
+      :title="modalTitle"
+      :width="showSelected ? '1200px' : '900px'"
+      :wrapClassName="modalWrapClassName"
+      @ok="handleOk"
+      @cancel="handleCancel"
+      :maxHeight="maxHeight"
+      :centered="true"
+      destroyOnClose
+      @visible-change="visibleChange"
+      
+    >
+      <a-row>
+        <a-col :span="showSelected ? 18 : 24">
+          <BasicTable
+            ref="tableRef"
+            :columns="columns"
+            :scroll="tableScroll"
+            v-bind="getBindValue"
+            :useSearchForm="true"
+            :formConfig="formConfig"
+            :api="hasCustomApi ? customListApi : getUserList"
+            :searchInfo="searchInfo"
+            :rowSelection="rowSelection"
+            :indexColumnProps="indexColumnProps"
+            :afterFetch="afterFetch"
+            :beforeFetch="beforeFetch"
+            :defSort="{ column: '', order: '' }"
+          >
+            <template #tableTitle></template>
+          </BasicTable>
+        </a-col>
+        <a-col :span="showSelected ? 6 : 0">
+          <BasicTable
+            v-bind="selectedTable"
+            :dataSource="selectRows"
+            :useSearchForm="true"
+            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }"
+          >
+            <!--操作栏-->
+            <template #action="{ record }">
+              <a href="javascript:void(0)" @click="handleDeleteSelected(record)"><Icon icon="ant-design:delete-outlined"></Icon></a>
+            </template>
+          </BasicTable>
+        </a-col>
+      </a-row>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, ref, watch, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getUserList } from '/@/api/common/api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+  import { isArray, cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'UserSelectModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      ...selectProps,
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '选择用户',
+      },
+      //排除用户id的集合
+      excludeUserIdList: {
+        type: Array,
+        default: [],
+      },
+
+      // wrap类名
+      modalWrapClassName: {
+        type: String,
+        default: 'j-user-select-modal',
+      },
+      // 查询table数据使用的自定义接口
+      customListApi: {type: Function},
+      // 自定义接口的查询条件是否使用 JInput
+      customApiJInput: {type: Boolean, default: true},
+      // 自定义表单配置条件
+      customFormConfig: {type: Object},
+      // 自定义表格列
+      customTableColumns: {type: Array},
+    },
+    emits: ['register', 'getSelectResult', 'close'],
+    setup(props, { emit, refs }) {
+      // 代码逻辑说明: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条
+      const tableScroll = ref<any>({ x: false });
+      const tableRef = ref();
+      const maxHeight = ref(600);
+
+      const hasCustomApi = computed(() => typeof props.customListApi === 'function');
+
+      //注册弹框
+      const [register, { closeModal }] = useModalInner(() => {
+        if (window.innerWidth < 900) {
+          tableScroll.value = { x: 900 };
+        } else {
+          tableScroll.value = { x: false };
+        }
+        // 代码逻辑说明: VUEN-1112 一对多 用户选择 未显示选择条数，及清空
+        setTimeout(() => {
+          // update-begin--author:liaozhiyang---date:20260120--for：【issues/9275】用户组件第二次点击取消时勾选值还是回显了
+          let selectedData = selectValues['value'];
+          if (isArray(selectedData)) {
+            selectedData = cloneDeep(selectedData);
+          }
+          // update-end--author:liaozhiyang---date:20260120--for：【issues/9275】用户组件第二次点击取消时勾选值还是回显了
+          if (tableRef.value) {
+            tableRef.value.setSelectedRowKeys(selectedData || []);
+          }
+        }, 800);
+      });
+      const attrs = useAttrs();
+      //表格配置
+      const config = {
+        canResize: false,
+        bordered: true,
+        size: 'small',
+      };
+      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
+      const [{ rowSelection, visibleChange, selectValues, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
+        getUserList,
+        getBindValue,
+        emit
+      );
+      const searchInfo = ref(props.params);
+      // 代码逻辑说明: 【issues/657】右侧选中列表删除无效
+      watch(rowSelection.selectedRowKeys, (newVal) => {
+        // 代码逻辑说明: null指针异常导致控制台报错页面不显示------------
+        if(tableRef.value){
+          tableRef.value.setSelectedRowKeys(newVal);
+        }
+      });
+      //查询form
+      const formConfig = {
+        baseColProps: {
+          xs: 24,
+          sm: 8,
+          md: 6,
+          lg: 8,
+          xl: 6,
+          xxl: 6,
+        },
+        // 代码逻辑说明: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
+        actionColOptions: {
+          xs: 24,
+          sm: 8,
+          md: 8,
+          lg: 8,
+          xl: 8,
+          xxl: 8,
+        },
+        schemas: [
+          {
+            label: '账号',
+            field: 'username',
+            component: (hasCustomApi.value && !props.customApiJInput) ? 'Input' : 'JInput',
+          },
+          {
+            label: '姓名',
+            field: 'realname',
+            component: (hasCustomApi.value && !props.customApiJInput) ? 'Input' : 'JInput',
+          },
+        ],
+        autoSubmitOnEnter: true,
+
+        ...props.customFormConfig,
+      };
+      //定义表格列
+      const columns = props.customTableColumns?.length ? props.customTableColumns : [
+        {
+          title: '用户账号',
+          dataIndex: 'username',
+          width: 120,
+          align: 'left',
+        },
+        {
+          title: '用户姓名',
+          dataIndex: 'realname',
+          width: 120,
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex_dictText',
+          width: 50,
+        },
+        {
+          title: '手机号码',
+          dataIndex: 'phone',
+          width: 120,
+          customRender:( { record, text })=>{
+            if(record.izHideContact && record.izHideContact === '1'){
+              return '/';
+            }
+            return text;
+          }
+        },
+        {
+          title: '邮箱',
+          dataIndex: 'email',
+          customRender:( { record, text })=>{
+            if(record.izHideContact && record.izHideContact === '1'){
+              return text?'/':'';
+            }
+            return text;
+          }
+          // width: 40,
+        },
+        {
+          title: '状态',
+          dataIndex: 'status_dictText',
+          width: 80,
+        },
+      ];
+      //已选择的table信息
+      const selectedTable = {
+        pagination: false,
+        showIndexColumn: false,
+        scroll: { y: 390 },
+        size: 'small',
+        canResize: false,
+        bordered: true,
+        rowKey: 'id',
+        columns: [
+          {
+            title: '用户姓名',
+            dataIndex: 'realname',
+            width: 40,
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align: 'center',
+            width: 40,
+            slots: { customRender: 'action' },
+          },
+        ],
+      };
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        getSelectResult((options, values) => {
+          //回传选项和已选择的值
+          emit('getSelectResult', options, values);
+          //关闭弹窗
+          closeModal();
+        });
+      }
+      
+      /**
+       * 用户返回结果逻辑查询
+       */
+      function afterFetch(record) {
+        let excludeList = props.excludeUserIdList;
+        if(!excludeList){
+          return record;
+        }
+        let arr:any[] = [];
+        //如果存在过滤用户id集合，并且后台返回的数据不为空
+        if(excludeList.length>0 && record && record.length>0){
+          for(let item of record){
+            if(excludeList.indexOf(item.id)<0){
+              arr.push({...item})
+            }
+          }
+          return arr;
+        }
+        return record;
+      }
+      // 代码逻辑说明: 【QQYUN-9366】用户选择组件取消和关闭会把选择数据带入
+      const handleCancel = () => {
+        emit('close');
+      };
+
+      // 代码逻辑说明: 【TV360X-305】小屏幕展示10条
+      const clientHeight = document.documentElement.clientHeight * 200;
+      maxHeight.value = clientHeight > 600 ? 600 : clientHeight;
+
+      /**
+       * 请求之前根据创建时间排序
+       *
+       * @param params
+       */
+      function beforeFetch(params) {
+        return Object.assign({ column: 'createTime', order: 'desc' }, params);
+      }
+
+      return {
+        //config,
+        handleOk,
+        searchInfo,
+        register,
+        indexColumnProps,
+        visibleChange,
+        getBindValue,
+        getUserList,
+        formConfig,
+        columns,
+        rowSelection,
+        selectRows,
+        selectedTable,
+        handleDeleteSelected,
+        tableScroll,
+        tableRef,
+        afterFetch,
+        handleCancel,
+        maxHeight,
+        beforeFetch,
+        hasCustomApi,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Form/src/jeecg/components/positionSelect/PositionSelectModal.vue b/src/components/Form/src/jeecg/components/positionSelect/PositionSelectModal.vue
new file mode 100644
index 0000000..88866c1
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/positionSelect/PositionSelectModal.vue
@@ -0,0 +1,282 @@
+<template>
+    <BasicModal
+        @register="register"
+        :getContainer="getContainer"
+        :canFullscreen="false"
+        :title="title"
+        :width="500"
+        destroyOnClose
+        @ok="handleOk"
+        wrapClassName="j-user-select-modal2" >
+
+        <div style="position: relative; min-height: 350px">
+            <div style="width: 100%">
+                <a-input v-model:value="searchText" allowClear style="width: 100%" placeholder="搜索">
+                    <template #prefix>
+                        <SearchOutlined style="color: #c0c0c0" />
+                    </template>
+                </a-input>
+            </div>
+
+            <!-- tabs -->
+            <div class="modal-select-list-container">
+                <div class="scroll">
+                    <div class="content" style="right: -10px">
+                        
+                        <label class="item" v-for="item in showDataList" @click="(e)=>onSelect(e, item)">
+                            <a-checkbox v-model:checked="item.checked">
+                                <span>{{ item.name }}</span>
+                            </a-checkbox>
+                        </label>
+                    </div>
+                    
+                </div>
+            </div>
+
+            <!-- 选中用户 -->
+            <div class="selected-users" style="width: 100%; overflow-x: hidden">
+                <SelectedUserItem v-for="item in selectedList" :info="item" @unSelect="unSelect" />
+            </div>
+        </div>
+    </BasicModal>
+</template>
+
+<script lang="ts">
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { computed, ref, toRaw, watch } from 'vue';
+  
+  export default {
+    name: 'PositionSelectModal',
+    components: {
+      BasicModal,
+      SearchOutlined,
+      CloseOutlined,
+      SelectedUserItem,
+    },
+    props: {
+      multi: {
+        type: Boolean,
+        default: true,
+      },
+      getContainer: {
+        type: Function,
+        default: null,
+      },
+      title:{
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'sys_position',
+      },
+      appId: {
+        type: String,
+        default: '',
+      }
+    },
+    emits: ['selected', 'register'],
+    setup(props, { emit }) {
+
+      const searchText = ref('');
+      const selectedIdList = computed(() => {
+        let arr = selectedList.value;
+        if (!arr || arr.length == 0) {
+          return [];
+        } else {
+          return arr.map((k) => k.id);
+        }
+      });
+
+      watch(()=>props.appId, async (val)=>{
+        if(val){
+          await loadDataList();
+        }
+      }, {immediate: true});
+      
+      
+      // 弹窗事件
+      const [register] = useModalInner(() => {
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+        }
+        for(let item of list){
+          item.checked = false
+        }
+      });
+
+      // 确定事件
+      function handleOk() {
+        let arr = toRaw(selectedIdList.value);
+        emit('selected', arr);
+      }
+      
+      const dataList = ref<any[]>([]);
+      const showDataList = computed(()=>{
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return []
+        }
+        let text = searchText.value;
+        if(!text){
+          return list
+        }
+        return list.filter(item=>item.name.indexOf(text)>=0)
+      });
+  
+      const selectedList = computed(()=>{
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return []
+        }
+        return list.filter(item=>item.checked)
+      });
+
+      function unSelect(id) {
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return;
+        }
+        let arr = list.filter(item=>item.id == id);
+        arr[0].checked = false;
+      }
+      
+      async function loadDataList() {
+        let params = {
+          pageNo: 1,
+          pageSize: 200,
+          column: 'createTime',
+          order: 'desc'
+        };
+        const url = '/sys/position/list'
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          const { records } = data.result;
+          let arr:any[] = [];
+          if(records && records.length>0){
+            for(let item of records){
+              arr.push({
+                id: item.id,
+                name: item.name || item.roleName,
+                selectType: props.type,
+                checked: false
+              })
+            }
+          }
+          dataList.value = arr;
+        } else {
+          console.error(data.message);
+        }
+        console.log('loadDataList', data);
+      }
+
+
+      function onSelect(e, item) {
+        prevent(e);
+        console.log('onselect');
+        item.checked = !item.checked;
+      }
+
+      function prevent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      return {
+        register,
+        showDataList,
+        searchText,
+        handleOk,
+        selectedList,
+        selectedIdList,
+        unSelect,
+        onSelect
+      
+      };
+    },
+  };
+</script>
+<style scoped lang="less">
+    .modal-select-list-container{
+        height: 352px;
+        margin-top: 12px;
+        overflow: auto;
+        .scroll{
+            height: 100%;
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            .content{
+                bottom: 0;
+                left: 0;
+                overflow: scroll;
+                overflow-x: hidden;
+                position: absolute;
+                right: 0;
+                top: 0;
+                .item{
+                    padding: 7px 5px;
+                    cursor: pointer;
+                    display: block;
+                    &:hover{
+                        background-color: #f5f5f5;
+                    }
+                }
+               
+            }
+        }
+
+       
+    }
+</style>
+
+<style lang="less">
+    .j-user-select-modal2 {
+        .depart-select {
+            .ant-select-selector {
+                color: #fff !important;
+                background-color: #409eff !important;
+                border-radius: 5px !important;
+            }
+            .ant-select-selection-item,
+            .ant-select-arrow {
+                color: #fff !important;
+            }
+        }
+        .my-search {
+            position: absolute;
+            top: 14px;
+            z-index: 1;
+            &.all-width {
+                width: 100%;
+            }
+
+            .anticon {
+                cursor: pointer;
+                &:hover {
+                    color: #0a8fe9 !important;
+                }
+            }
+            .hidden {
+                display: none;
+            }
+        }
+
+        .my-tabs {
+        }
+
+        .selected-users {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            padding-top: 15px;
+        }
+
+        .scroll-container {
+            padding-bottom: 0 !important;
+        }
+    }
+</style>
diff --git a/src/components/Form/src/jeecg/components/roleSelect/RoleSelectInput.vue b/src/components/Form/src/jeecg/components/roleSelect/RoleSelectInput.vue
new file mode 100644
index 0000000..a856565
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/roleSelect/RoleSelectInput.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div @click="showModal" :class="disabled ? 'select-input disabled-select' : 'select-input'">
+      <template v-if="selectedList.length > 0">
+        <template v-for="(item, index) in selectedList">
+          <SelectedUserItem v-if="index < maxSelectCount" :info="item" @unSelect="unSelect" query />
+        </template>
+      </template>
+      <span v-else style="height: 30px; line-height: 30px; display: inline-block; margin-left: 7px; color: #bfbfbf">请选择</span>
+      <div v-if="ellipsisInfo.status" class="user-selected-item">
+        <div class="user-select-ellipsis">
+          <span style="color: red">+{{ ellipsisInfo.count }}...</span>
+        </div>
+      </div>
+    </div>
+    <RoleSelectModal :appId="currentAppId" :multi="multi" :getContainer="getContainer" title="选择组织角色" @register="registerRoleModal" @selected="onSelected" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { useModal } from '/@/components/Modal';
+  import { defHttp } from '/@/utils/http/axios';
+  import { computed, ref, watch, watchEffect, defineComponent } from 'vue';
+  import RoleSelectModal from './RoleSelectModal.vue';
+  import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
+  import { Form } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const maxCount = 3;
+
+  export default defineComponent({
+    name: 'RoleSelectInput',
+    components: {
+      RoleSelectModal,
+      SelectedUserItem,
+    },
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      // 代码逻辑说明: 【issues/8078】角色选择组件点击文字部分会一直选中
+      maxSelectCount: {
+        type: Number,
+        default: 2,
+      },
+      store: {
+        type: String,
+        default: 'id',
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      getContainer: {
+        type: Function,
+        default: null,
+      },
+      appId: {
+        type: String,
+        default: '',
+      },
+    },
+    emits: ['update:value', 'change'],
+    setup(props, { emit }) {
+      const formItemContext = Form.useInjectFormItemContext();
+      const selectedList = ref<any[]>([]);
+      const loading = ref(true);
+
+      const [registerRoleModal, { openModal: openRoleModal, closeModal: closeRoleModal }] = useModal();
+      function showModal(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        let list = selectedList.value.map((item) => item.id);
+        openRoleModal(true, {
+          list,
+        });
+      }
+
+      const ellipsisInfo = computed(() => {
+        let max = props.maxSelectCount;
+        let len = selectedList.value.length;
+        if (len > max) {
+          return { status: true, count: len - max };
+        } else {
+          return { status: false };
+        }
+      });
+
+      function unSelect(id) {
+        console.log('unSelectUser', id);
+        loading.value = false;
+        let arr = selectedList.value;
+        let index = -1;
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == id) {
+            index = i;
+            break;
+          }
+        }
+        if (index >= 0) {
+          arr.splice(index, 1);
+          selectedList.value = arr;
+          onSelectedChange();
+        }
+      }
+
+      function onSelectedChange() {
+        let temp: any[] = [];
+        let arr = selectedList.value;
+        if (arr && arr.length > 0) {
+          temp = arr.map((k) => {
+            return k[props.store];
+          });
+        }
+        let str = temp.join(',');
+        emit('update:value', str);
+        emit('change', str);
+        formItemContext.onFieldChange();
+        console.log('选中数据', str);
+      }
+
+      function onSelected(_v, values) {
+        console.log('角色选择完毕：', values);
+        loading.value = false;
+        if (values && values.length > 0) {
+          selectedList.value = values;
+        } else {
+          selectedList.value = [];
+        }
+        onSelectedChange();
+        closeRoleModal();
+      }
+
+      // 目前仅用于数据重新加载的一个状态
+      const currentAppId = ref('');
+      const userStore = useUserStore();
+      watchEffect(() => {
+        let tenantId = userStore.getTenant;
+        let appId = props.appId;
+        if (appId) {
+          currentAppId.value = appId;
+        } else {
+          currentAppId.value = new Date().getTime() + '-' + tenantId;
+        }
+      });
+
+      watch(
+        () => props.value,
+        async (val) => {
+          if (val) {
+            if (loading.value === true) {
+              await getRoleList(val);
+            }
+          } else {
+            selectedList.value = [];
+          }
+          loading.value = true;
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 获取角色列表
+       * @param ids
+       */
+      async function getRoleList(ids) {
+        const url = '/sys/role/listByTenant';
+        let params = {
+          [props.store]: ids,
+          pageSize: 200
+        };
+        // 特殊条件处理（因为后台实体是roleCode，所以折中一下，不能直接改，会出问题）
+        if (props.store === 'code') {
+          params.roleCode = ids;
+        }
+        selectedList.value = [];
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        console.log('getRoleList>>', data);
+        if (data.success) {
+          const { records } = data.result;
+          let arr: any[] = [];
+          if (records && records.length > 0) {
+            for (let item of records) {
+              arr.push({
+                id: item.id,
+                name: item.name || item.roleName,
+                code: item.roleCode,
+                checked: true,
+                selectType: 'sys_role',
+              });
+            }
+            // 根据 ids 的顺序对 arr 进行排序
+            if (props.store === 'code') {
+              arr.sort((a, b) => ids.indexOf(a.code) - ids.indexOf(b.code));
+            } else {
+              arr.sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id));
+            }
+          }
+          selectedList.value = arr;
+        } else {
+          console.error(data.message);
+        }
+      }
+
+      return {
+        selectedList,
+        ellipsisInfo,
+        registerRoleModal,
+        closeRoleModal,
+        showModal,
+        onSelected,
+        unSelect,
+        currentAppId,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .select-input {
+    padding: 0 5px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-sizing: border-box;
+    display: flex;
+    color: #9e9e9e;
+    font-size: 14px;
+    flex-wrap: nowrap;
+    min-height: 32px;
+    overflow-x: hidden;
+    &.disabled-select {
+      cursor: not-allowed;
+      background-color: #f5f5f5 !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/roleSelect/RoleSelectModal.vue b/src/components/Form/src/jeecg/components/roleSelect/RoleSelectModal.vue
new file mode 100644
index 0000000..78f23bd
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/roleSelect/RoleSelectModal.vue
@@ -0,0 +1,318 @@
+<template>
+    <BasicModal
+        @register="register"
+        :getContainer="getContainer"
+        :canFullscreen="false"
+        :title="title"
+        :width="500"
+        destroyOnClose
+        @ok="handleOk"
+        wrapClassName="j-user-select-modal2" >
+
+        <div style="position: relative; min-height: 350px">
+            <div style="width: 100%">
+                <a-input v-model:value="searchText" allowClear style="width: 100%" placeholder="搜索">
+                    <template #prefix>
+                        <SearchOutlined style="color: #c0c0c0" />
+                    </template>
+                </a-input>
+            </div>
+
+            <!-- tabs -->
+            <div class="modal-select-list-container">
+                <div class="scroll">
+                    <div class="content" style="right: -10px">
+                        
+                        <label class="item" v-for="item in showDataList" @click="(e)=>onSelect(e, item)">
+                            <a-checkbox v-model:checked="item.checked">
+                                <span class="text">{{ item.name }}</span>
+                            </a-checkbox>
+                        </label>
+                    </div>
+                    
+                </div>
+            </div>
+
+            <!-- 选中用户 -->
+            <div class="selected-users" style="width: 100%; overflow-x: hidden">
+                <SelectedUserItem v-for="item in selectedList" :info="item" @unSelect="unSelect" />
+            </div>
+        </div>
+    </BasicModal>
+</template>
+
+<script lang="ts">
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
+  import { defHttp } from '/@/utils/http/axios';
+
+  import { computed, ref, toRaw, watch } from 'vue';
+  export default {
+    name: 'RoleSelectModal',
+    components: {
+      BasicModal,
+      SearchOutlined,
+      CloseOutlined,
+      SelectedUserItem,
+    },
+    props: {
+      multi: {
+        type: Boolean,
+        default: true,
+      },
+      getContainer: {
+        type: Function,
+        default: null,
+      },
+      title:{
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'sys_role',
+      },
+      appId: {
+        type: String,
+        default: '',
+      }
+    },
+    emits: ['selected', 'register'],
+    setup(props, { emit }) {
+
+      const searchText = ref('');
+      const selectedIdList = computed(() => {
+        let arr = selectedList.value;
+        if (!arr || arr.length == 0) {
+          return [];
+        } else {
+          return arr.map((k) => k.id);
+        }
+      });
+
+      watch(()=>props.appId, async (val)=>{
+        if(val){
+          await loadDataList();
+        }
+      }, {immediate: true});
+      
+      
+      // 弹窗事件
+      const [register] = useModalInner((data) => {
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+        }else{
+          let selectedIdList = data.list || [];
+          for(let item of list){
+            if(selectedIdList.indexOf(item.id)>=0){
+              item.checked = true;
+            }else{
+              item.checked = false;
+            }
+          }
+        }
+      });
+
+      // 确定事件
+      function handleOk() {
+        let arr = toRaw(selectedIdList.value);
+        emit('selected', arr, toRaw(selectedList.value));
+      }
+      
+      const dataList = ref<any[]>([]);
+      const showDataList = computed(()=>{
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return []
+        }
+        let text = searchText.value;
+        if(!text){
+          return list
+        }
+        return list.filter(item=>item.name.indexOf(text)>=0)
+      });
+
+      const selectedKeys = ref<string[]>([]);
+      const selectedList = computed(()=>{
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return []
+        }
+        list = list.filter(item=>item.checked)
+        // 根据 selectedKeys 的顺序排序
+        let arr: any[] = [];
+        for (let key of selectedKeys.value) {
+          let item = list.find(item => item.id == key);
+          if (item) {
+            arr.push(item);
+          }
+        }
+        return arr;
+      });
+
+      function unSelect(id) {
+        let list = dataList.value;
+        if(!list || list.length ==0 ){
+          return;
+        }
+        // 代码逻辑说明: 【issues/8078】角色选择组件点击文字部分会一直选中
+        let findItem = list.find((item) => item.id == id);
+        findItem.checked = false;
+        selectedKeys.value = selectedKeys.value.filter((key) => key != id);
+      }
+      
+      async function loadDataList() {
+        let params = {
+          pageNo: 1,
+          pageSize: 200,
+          column: 'createTime',
+          order: 'desc'
+        };
+        const url = '/sys/role/listByTenant';
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          const { records } = data.result;
+          let arr:any[] = [];
+          if(records && records.length>0){
+            for(let item of records){
+              arr.push({
+                id: item.id,
+                name: item.name || item.roleName,
+                code: item.roleCode,
+                selectType: props.type,
+                checked: false
+              })
+            }
+          }
+          dataList.value = arr;
+        } else {
+          console.error(data.message);
+        }
+        console.log('loadDataList', data);
+      }
+
+      function onSelect(e, item) {
+        prevent(e);
+        // 单选模式下，先清除所有选中状态
+        if (!props.multi) {
+          dataList.value.forEach(dataItem => {
+            if (dataItem.id != item.id) {
+              dataItem.checked = false;
+            }
+          });
+          // 清空已选择的keys
+          selectedKeys.value = [];
+        }
+
+        // 切换当前项的选中状态
+        item.checked = !item.checked;
+
+        // 更新selectedKeys数组
+        if (item.checked) {
+          selectedKeys.value.push(item.id);
+        } else {
+          selectedKeys.value = selectedKeys.value.filter(key => key !== item.id);
+        }
+      }
+
+      function prevent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      return {
+        register,
+        showDataList,
+        searchText,
+        handleOk,
+        selectedList,
+        selectedIdList,
+        unSelect,
+        onSelect
+      
+      };
+    },
+  };
+</script>
+<style scoped lang="less">
+    .modal-select-list-container{
+        height: 352px;
+        margin-top: 12px;
+        overflow: auto;
+        .scroll{
+            height: 100%;
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+            .content{
+                bottom: 0;
+                left: 0;
+                overflow: scroll;
+                overflow-x: hidden;
+                position: absolute;
+                right: 0;
+                top: 0;
+                .item{
+                    padding: 7px 5px;
+                    cursor: pointer;
+                    display: block;
+                    &:hover{
+                        background-color: #f5f5f5;
+                    }
+                }
+               
+            }
+        }
+
+       
+    }
+</style>
+
+<style lang="less">
+    .j-user-select-modal2 {
+        .depart-select {
+            .ant-select-selector {
+                color: #fff !important;
+                background-color: #409eff !important;
+                border-radius: 5px !important;
+            }
+            .ant-select-selection-item,
+            .ant-select-arrow {
+                color: #fff !important;
+            }
+        }
+        .my-search {
+            position: absolute;
+            top: 14px;
+            z-index: 1;
+            &.all-width {
+                width: 100%;
+            }
+
+            .anticon {
+                cursor: pointer;
+                &:hover {
+                    color: #0a8fe9 !important;
+                }
+            }
+            .hidden {
+                display: none;
+            }
+        }
+
+        .my-tabs {
+        }
+
+        .selected-users {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            padding-top: 15px;
+        }
+
+        .scroll-container {
+            padding-bottom: 0 !important;
+        }
+    }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/FilteredUserSelectModal.vue b/src/components/Form/src/jeecg/components/userSelect/FilteredUserSelectModal.vue
new file mode 100644
index 0000000..fe4d03e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/FilteredUserSelectModal.vue
@@ -0,0 +1,448 @@
+<template>
+  <BasicModal
+    @register="register"
+    :getContainer="getContainer"
+    :canFullscreen="false"
+    destroyOnClose
+    title="会签人员选择"
+    :width="600"
+    wrapClassName="j-filtered-user-select-modal"
+  >
+    <!-- 节点说明 -->
+    <a-select 
+      value="系统角色会签，请筛选参与人员" 
+      disabled 
+      style="width: 100%" 
+      class="node-label-select"
+    >
+      <a-select-option value="系统角色会签，请筛选参与人员">
+        系统角色会签，请筛选参与人员
+      </a-select-option>
+    </a-select>
+
+    <div class="modal-content">
+      <!-- 搜索框 -->
+      <div :class="['search-wrapper', { 'search-expanded': searchInputStatus }]">
+        <span v-show="!searchInputStatus" class="search-icon" @click="showSearchInput">
+          <SearchOutlined />
+        </span>
+        <div v-show="searchInputStatus" class="search-input">
+          <a-input 
+            v-model:value="searchText" 
+            placeholder="请输入用户名按回车搜索"
+            @pressEnter="onSearchUser"
+          >
+            <template #prefix>
+              <SearchOutlined />
+            </template>
+            <template #suffix>
+              <CloseOutlined title="退出搜索" @click="clearSearch" />
+            </template>
+          </a-input>
+        </div>
+      </div>
+
+      <!-- 用户列表 -->
+      <div class="user-list-wrapper">
+        <user-list 
+          :multi="multi" 
+          :dataList="userDataList" 
+          :selectedIdList="selectedIdList" 
+          @selected="onSelectUser" 
+          @unSelect="unSelectUser" 
+        />
+      </div>
+
+      <!-- 已选用户标签 -->
+      <div v-if="selectedUserList.length > 0" class="selected-users">
+        <SelectedUserItem 
+          v-for="item in selectedUserList" 
+          :key="item.id" 
+          :info="item" 
+          @unSelect="unSelectUser" 
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="modal-footer">
+        <div class="pagination-wrapper">
+          <a-pagination
+            v-model:current="pageNo"
+            size="small"
+            :total="totalRecord"
+            :pageSize="PAGE_SIZE"
+            show-quick-jumper
+            @change="onPageChange"
+          />
+        </div>
+        <a-button 
+          type="primary" 
+          :disabled="!hasSelectedUser" 
+          @click="handleOk"
+        >
+          确认提交
+        </a-button>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, ref, toRaw, PropType } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { Pagination } from 'ant-design-vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import UserList from './UserList.vue';
+  import SelectedUserItem from './SelectedUserItem.vue';
+
+  // 用户数据接口
+  interface UserInfo {
+    id: string;
+    username: string;
+    realname: string;
+    [key: string]: any;
+  }
+
+  // 弹窗打开参数接口
+  interface ModalData {
+    usernames?: string[];
+    list?: UserInfo[];
+  }
+
+  // 常量定义
+  const PAGE_SIZE = 10;
+  const API_URL = '/sys/user/selectUserList';
+
+  export default defineComponent({
+    name: 'FilteredUserSelectModal',
+    components: {
+      BasicModal,
+      SearchOutlined,
+      CloseOutlined,
+      SelectedUserItem,
+      UserList,
+      APagination: Pagination,
+    },
+    props: {
+      // 是否多选
+      multi: {
+        type: Boolean,
+        default: true,
+      },
+      // 容器函数
+      getContainer: {
+        type: Function as PropType<() => HTMLElement>,
+        default: undefined,
+      },
+      // 传入的用户账号列表（用于过滤）
+      usernames: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+    },
+    emits: ['selected', 'register'],
+    setup(props, { emit }) {
+      // ==================== 状态定义 ====================
+      const selectedUserList = ref<UserInfo[]>([]);
+      const actualUsernames = ref<string[]>([]);
+      const searchInputStatus = ref(false);
+      const searchText = ref('');
+      const pageNo = ref(1);
+      const totalRecord = ref(0);
+      const userDataList = ref<UserInfo[]>([]);
+
+      // ==================== 计算属性 ====================
+      const selectedIdList = computed(() => 
+        selectedUserList.value.map((item) => item.id)
+      );
+
+      const hasSelectedUser = computed(() => 
+        selectedUserList.value.length > 0
+      );
+
+      // ==================== 弹窗事件 ====================
+      const [register] = useModalInner((data: ModalData) => {
+        initUsernames(data);
+        initSelectedUsers(data);
+        resetSearchState();
+        loadUserList();
+      });
+
+      /**
+       * 初始化用户名列表
+       */
+      function initUsernames(data: ModalData) {
+        if (data?.usernames?.length) {
+          actualUsernames.value = [...data.usernames];
+        } else if (props.usernames?.length) {
+          actualUsernames.value = [...props.usernames];
+        } else {
+          actualUsernames.value = [];
+        }
+      }
+
+      /**
+       * 初始化已选用户
+       */
+      function initSelectedUsers(data: ModalData) {
+        selectedUserList.value = data?.list?.length ? [...data.list] : [];
+      }
+
+      /**
+       * 重置搜索状态
+       */
+      function resetSearchState() {
+        searchText.value = '';
+        searchInputStatus.value = false;
+        pageNo.value = 1;
+      }
+
+      // ==================== 用户操作 ====================
+      /**
+       * 确认选择
+       */
+      function handleOk() {
+        if (!hasSelectedUser.value) return;
+        emit('selected', toRaw(selectedUserList.value));
+      }
+
+      /**
+       * 选中用户
+       */
+      function onSelectUser(info: UserInfo) {
+        if (!props.multi) {
+          selectedUserList.value = [{ ...info }];
+          return;
+        }
+        
+        if (!selectedIdList.value.includes(info.id)) {
+          selectedUserList.value.push({ ...info });
+        }
+      }
+
+      /**
+       * 取消选中用户
+       */
+      function unSelectUser(id: string) {
+        const index = selectedUserList.value.findIndex((item) => item.id === id);
+        if (index >= 0) {
+          selectedUserList.value.splice(index, 1);
+        }
+      }
+
+      // ==================== 搜索功能 ====================
+      /**
+       * 显示搜索框
+       */
+      function showSearchInput(e?: Event) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        searchInputStatus.value = true;
+      }
+
+      /**
+       * 执行搜索
+       */
+      function onSearchUser() {
+        pageNo.value = 1;
+        loadUserList();
+      }
+
+      /**
+       * 清除搜索
+       */
+      function clearSearch(e?: Event) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        searchText.value = '';
+        searchInputStatus.value = false;
+        pageNo.value = 1;
+        loadUserList();
+      }
+
+      // ==================== 分页功能 ====================
+      /**
+       * 翻页处理
+       */
+      function onPageChange() {
+        loadUserList();
+      }
+
+      // ==================== 数据加载 ====================
+      /**
+       * 加载用户列表
+       */
+      async function loadUserList() {
+        if (!actualUsernames.value?.length) {
+          userDataList.value = [];
+          totalRecord.value = 0;
+          return;
+        }
+
+        try {
+          const params: Record<string, any> = {
+            pageNo: pageNo.value,
+            pageSize: PAGE_SIZE,
+            includeUsernameList: actualUsernames.value.join(','),
+          };
+          
+          if (searchText.value.trim()) {
+            params.keyword = searchText.value.trim();
+          }
+
+          const { success, result } = await defHttp.get(
+            { url: API_URL, params }, 
+            { isTransformResponse: false }
+          );
+          
+          if (success && result) {
+            userDataList.value = result.records || [];
+            totalRecord.value = result.total || 0;
+          } else {
+            resetUserData();
+          }
+        } catch (error) {
+          console.error('加载用户列表失败:', error);
+          resetUserData();
+        }
+      }
+
+      /**
+       * 重置用户数据
+       */
+      function resetUserData() {
+        userDataList.value = [];
+        totalRecord.value = 0;
+      }
+
+      // ==================== 返回值 ====================
+      return {
+        PAGE_SIZE,
+        register,
+        handleOk,
+        searchText,
+        searchInputStatus,
+        showSearchInput,
+        onSearchUser,
+        clearSearch,
+        pageNo,
+        totalRecord,
+        onPageChange,
+        userDataList,
+        selectedUserList,
+        selectedIdList,
+        hasSelectedUser,
+        onSelectUser,
+        unSelectUser,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .j-filtered-user-select-modal {
+    // 节点说明标签
+    .node-label-select {
+      margin-bottom: 10px;
+      
+      :deep(.ant-select-selector) {
+        color: #fff !important;
+        background-color: #409eff !important;
+        border-radius: 5px !important;
+        cursor: not-allowed !important;
+      }
+      
+      :deep(.ant-select-selection-item),
+      :deep(.ant-select-arrow) {
+        color: #fff !important;
+      }
+    }
+
+    // 弹窗内容区
+    .modal-content {
+      position: relative;
+      min-height: 350px;
+    }
+
+    // 搜索框容器
+    .search-wrapper {
+      position: absolute;
+      top: 14px;
+      z-index: 1;
+      
+      &.search-expanded {
+        width: 100%;
+      }
+
+      .search-icon {
+        margin-left: 10px;
+        color: #c0c0c0;
+        cursor: pointer;
+        transition: color 0.3s;
+        
+        &:hover {
+          color: #0a8fe9;
+        }
+      }
+
+      .search-input {
+        width: 100%;
+        
+        :deep(.anticon) {
+          color: #c0c0c0;
+          cursor: pointer;
+          transition: color 0.3s;
+          
+          &:hover {
+            color: #0a8fe9;
+          }
+        }
+      }
+    }
+
+    // 用户列表
+    .user-list-wrapper {
+      padding-top: 50px;
+    }
+
+    // 已选用户标签
+    .selected-users {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding-top: 15px;
+      width: 100%;
+      overflow-x: hidden;
+    }
+
+    // 底部容器
+    .modal-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      gap: 16px;
+      
+      .pagination-wrapper {
+        flex: 1;
+        min-width: 0;
+        
+        :deep(.ant-pagination) {
+          display: flex;
+          justify-content: flex-start;
+        }
+      }
+      
+      .ant-btn {
+        flex-shrink: 0;
+      }
+    }
+
+    // 滚动容器优化
+    :deep(.scroll-container) {
+      padding-bottom: 0 !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/SelectedUserItem.vue b/src/components/Form/src/jeecg/components/userSelect/SelectedUserItem.vue
new file mode 100644
index 0000000..0384c6c
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/SelectedUserItem.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="user-selected-item">
+    <div
+      style="
+        display: flex;
+        flex-direction: row;
+        height: 24px;
+        border-radius: 12px;
+        padding-right: 10px;
+        vertical-align: middle;
+        background-color: #f5f5f5;
+      "
+    >
+      <span style="width: 24px; height: 24px; line-height: 20px; margin-right: 3px; display: inline-block">
+        <a-avatar v-if="info.avatar" :src="getFileAccessHttpUrl(info.avatar)" :size="24"></a-avatar>
+        
+        <a-avatar v-else-if="info.avatarIcon" class="ant-btn-primary" :size="24" >
+          <template #icon>
+            <Icon :icon=" 'ant-design:'+info.avatarIcon " style="font-size: 16px;margin-top: 4px"/>
+          </template>
+        </a-avatar>
+        
+        <a-avatar v-else-if="info.selectType == 'sys_role'" :size="24" style="background-color: rgb(255, 173, 0);">
+          <template #icon>
+            <team-outlined style="font-size: 16px"/>
+          </template>
+        </a-avatar>
+        <a-avatar v-else-if="info.selectType == 'sys_position'" :size="24" style="background-color: rgb(245, 34, 45);">
+          <template #icon>
+            <TagsOutlined style="font-size: 16px"/>
+          </template>
+        </a-avatar>
+        
+        <a-avatar :size="24" v-else>
+          <template #icon><UserOutlined /></template>
+        </a-avatar>
+      </span>
+
+      <div style="height: 24px; line-height: 24px" class="ellipsis">
+        {{ info.realname || info.name }}
+      </div>
+
+      <div v-if="showClose" class="icon-close">
+        <CloseOutlined @click="removeSelect"/>
+      </div>
+    </div>
+
+    <div v-if="!showClose" class="icon-remove">
+      <MinusCircleFilled @click="removeSelect" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { UserOutlined, CloseOutlined, MinusCircleFilled, TagsOutlined, TeamOutlined } from '@ant-design/icons-vue';
+  import {computed} from 'vue'
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  
+  export default {
+    name: 'SelectedUserItem',
+    components: {
+      UserOutlined,
+      MinusCircleFilled,
+      CloseOutlined,
+      TagsOutlined,
+      TeamOutlined
+    },
+    props: {
+      info: {
+        type: Object,
+        default: () => {},
+      },
+      // 是否作为查询条件
+      query:{
+        type: Boolean,
+        default: false,
+      }
+    },
+    emits: ['unSelect'],
+    setup(props, { emit }) {
+      function removeSelect(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        emit('unSelect', props.info.id);
+      }
+
+      const showClose = computed(()=>{
+        if(props.query===true){
+          return true;
+        }else{
+          return false;
+        }
+      });
+      
+      return {
+        showClose,
+        removeSelect,
+        getFileAccessHttpUrl
+      };
+    },
+  };
+</script>
+
+<style lang="less">
+  .user-selected-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+    height: 30px;
+    border-radius: 12px;
+    line-height: 30px;
+    vertical-align: middle;
+
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .icon-remove {
+      position: absolute;
+      top: -10px;
+      right: -4px;
+      font-size: 18px;
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+      display: none;
+    }
+    
+    .icon-close{
+      height: 22px;
+      line-height: 24px;
+      font-size: 10px;
+      font-weight: bold;
+      margin-left: 7px;
+      &:hover{
+        color: #0a8fe9;
+      }
+    }
+
+    &:hover {
+      .icon-remove {
+        display: block;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/UserList.vue b/src/components/Form/src/jeecg/components/userSelect/UserList.vue
new file mode 100644
index 0000000..3f8a6e3
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/UserList.vue
@@ -0,0 +1,192 @@
+<template>
+  <a-list item-layout="horizontal" :data-source="showDataList">
+    <template #renderItem="{ item }">
+      <a-list-item style="padding: 3px 0">
+        <div class="user-select-user-info" @click="(e) => onClickUser(e, item)">
+          <div style="margin-left: 10px">
+            <a-checkbox v-model:checked="checkStatus[item.id]" v-if="multi" />
+            <a-radio v-model:checked="checkStatus[item.id]" v-else />
+          </div>
+          <div>
+            <a-avatar v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)"></a-avatar>
+            <a-avatar v-else-if="item.avatarIcon" class="ant-btn-primary">
+              <template #icon>
+                <Icon :icon=" 'ant-design:'+item.avatarIcon " style="margin-top: 4px;font-size: 24px;"/>
+              </template>
+            </a-avatar>
+            <a-avatar v-else>
+              <template #icon><UserOutlined /></template>
+            </a-avatar>
+          </div>
+          <div :style="nameStyle">
+            {{ item.realname }}
+          </div>
+          <div :style="departStyle" class="ellipsis" :title="item.orgCodeTxt">
+            {{ item.orgCodeTxt }}
+          </div>
+          <div style="width: 1px"></div>
+        </div>
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+
+<script lang="ts">
+  import { UserOutlined } from '@ant-design/icons-vue';
+  import { computed, toRaw, reactive, watchEffect, ref } from 'vue';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  
+  export default {
+    name: 'UserList',
+    props: {
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      dataList: {
+        type: Array,
+        default: () => [],
+      },
+      // 是否显示部门文本
+      depart: {
+        type: Boolean,
+        default: false,
+      },
+      selectedIdList: {
+        type: Array,
+        default: () => [],
+      },
+      excludeUserIdList:{
+        type: Array,
+        default: () => [],
+      }
+    },
+    components: {
+      UserOutlined,
+    },
+    emits: ['selected', 'unSelect'],
+    setup(props, { emit }) {
+      function onClickUser(e, user) {
+        e && prevent(e);
+        let status = checkStatus[user.id];
+        if (status === true) {
+          emit('unSelect', user.id);
+        } else {
+          emit('selected', toRaw(user));
+        }
+      }
+
+      function getTwoText(text) {
+        if (!text) {
+          return '';
+        } else {
+          return text.substr(0, 2);
+        }
+      }
+
+      const departStyle = computed(() => {
+        if (props.depart === true) {
+          // 如果显示部门信息
+          return {
+            flex: 1,
+          };
+        } else {
+          return {
+            display: 'none',
+          };
+        }
+      });
+
+      const nameStyle = computed(() => {
+        if (props.depart === true) {
+          // 如果显示部门信息
+          return {
+            width: '200px',
+          };
+        } else {
+          return {
+            flex: 1,
+          };
+        }
+      });
+
+      function onChangeChecked(e) {
+        console.error('onChangeChecked', e);
+      }
+
+     // const showDataList = ref<any[]>([])
+      const checkStatus = reactive<any>({});
+      watchEffect(() => {
+        let arr1 = props.dataList;
+        if (!arr1 || arr1.length === 0) {
+          return;
+        }
+        let idList = props.selectedIdList;
+        for (let item of arr1) {
+          if (idList.indexOf(item.id) >= 0) {
+            checkStatus[item.id] = true;
+          } else {
+            checkStatus[item.id] = false;
+          }
+        }
+        
+      
+      });
+
+      function prevent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+//代码逻辑说明: 【QQYUN-8239】用户角色，添加用户 返回2页数据，实际只显示一页---
+/*      function records2DataList() {
+        let arr:any[] = [];
+        let excludeList = props.excludeUserIdList;
+        let records = props.dataList;
+        if(records && records.length>0){
+          for(let item of records){
+            if(excludeList.indexOf(item.id)<0){
+              arr.push({...item})
+            }
+          }
+        }
+        return arr;
+      }*/
+      
+      const showDataList = computed(()=>{
+/*        let excludeList = props.excludeUserIdList;
+        if(excludeList && excludeList.length>0){
+          return records2DataList();
+        }*/
+        return props.dataList;
+      });
+
+      return {
+        onClickUser,
+        getTwoText,
+        departStyle,
+        nameStyle,
+        onChangeChecked,
+        checkStatus,
+        showDataList,
+        getFileAccessHttpUrl
+      };
+    },
+  };
+</script>
+
+<style lang="less">
+  .user-select-user-info {
+    display: flex;
+    width: 100%;
+    > div {
+      height: 36px;
+      line-height: 36px;
+      margin-right: 10px;
+    }
+    .ellipsis {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/UserListAndDepart.vue b/src/components/Form/src/jeecg/components/userSelect/UserListAndDepart.vue
new file mode 100644
index 0000000..2699f72
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/UserListAndDepart.vue
@@ -0,0 +1,208 @@
+<template>
+  <a-row>
+    <a-col :span="12">
+      <div :style="containerStyle">
+        <a-tree
+          v-if="treeData.length > 0"
+          :load-data="loadChildren"
+          showIcon
+          autoExpandParent
+          :treeData="treeData"
+          :selectedKeys="selectedKeys"
+          v-model:expandedKeys="expandedKeys"
+          @select="onSelect"
+        >
+          <template #title="{ title, key }">
+            <FolderFilled style="color: #9e9e9e"/><span style="margin-left: 5px">{{ title }}</span>
+          </template>
+        </a-tree>
+      </div>
+    </a-col>
+    <a-col :span="12" style="padding-left: 10px">
+      <div :style="containerStyle">
+        <user-list :multi="multi" :excludeUserIdList="excludeUserIdList" :dataList="userDataList" :selectedIdList="selectedIdList" @selected="onSelectUser" @unSelect="unSelectUser" />
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts">
+  import { defHttp } from '/@/utils/http/axios';
+  import { computed, ref, watch } from 'vue';
+  import UserList from './UserList.vue';
+  import { FolderFilled } from '@ant-design/icons-vue';
+
+  export default {
+    name: 'DepartUserList',
+    components: {
+      UserList,
+      FolderFilled
+    },
+    props: {
+      searchText: {
+        type: String,
+        default: '',
+      },
+      selectedIdList: {
+        type: Array,
+        default: () => [],
+      },
+      excludeUserIdList:{
+        type: Array,
+        default: () => [],
+      },
+      multi: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    emits: ['loaded', 'selected', 'unSelect'],
+    setup(props, { emit }) {
+      //export const queryById = (params) => defHttp.get({ url: Api.queryById, params }, { isTransformResponse: false });
+
+      async function loadDepartTree(pid?) {
+        const url = '/sys/sysDepart/queryDepartTreeSync';
+        let params = {};
+        if (pid) {
+          params['pid'] = pid;
+        }
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        console.log('loadDepartTree', data);
+        return data;
+      }
+
+      async function initRoot() {
+        console.log('initRoot');
+        const data = await loadDepartTree();
+        if (data.success) {
+          let arr = data.result;
+          fillTitles(arr);
+          treeData.value = arr;
+          emitDepartOptions(arr);
+        } else {
+          console.error(data.message);
+        }
+        clear();
+      }
+
+      function emitDepartOptions(arr) {
+        let options = [];
+        if (arr && arr.length > 0) {
+          options = arr.map((k) => {
+            return {
+              value: k.id,
+              label: k.departName,
+            };
+          });
+        }
+        emit('loaded', options);
+      }
+
+      initRoot();
+
+      const treeData = ref<any[]>([]);
+      const selectedKeys = ref<string[]>([]);
+      const expandedKeys = ref<string[]>([]);
+      const selectedDepartId = ref('');
+      function onSelect(ids, e) {
+        let record = e.node.dataRef;
+        selectedKeys.value = [record.key];
+
+        let id = ids[0];
+        selectedDepartId.value = id;
+        loadUserList();
+      }
+
+      function clear() {
+        selectedDepartId.value = '';
+      }
+      async function loadChildren(treeNode) {
+        console.log('loadChildren', treeNode);
+        const data = await loadDepartTree(treeNode.eventKey);
+        if (data.success) {
+          let arr = data.result;
+          treeNode.dataRef.children = [...arr];
+          fillTitles(treeData.value);
+          treeData.value = [...treeData.value];
+        } else {
+          console.error(data.message);
+        }
+      }
+
+      const maxHeight = ref(300);
+      maxHeight.value = window.innerHeight - 500;
+      const containerStyle = computed(() => {
+        return {
+          'overflow-y': 'auto',
+          // 代码逻辑说明: JHHB-911 【用户选择】用户选择组件 有滚动条时 不好用 没有显示简称
+          'max-height': (maxHeight.value>=300?maxHeight.value:300) + 'px',
+        };
+      });
+
+      const userDataList = ref<any[]>([]);
+      async function loadUserList() {
+        const url = '/sys/user/selectUserList';
+        let params = {
+          pageNo: 1,
+          pageSize: 99,
+        };
+        if (props.searchText) {
+          params['keyword'] = props.searchText;
+        }
+        if (selectedDepartId.value) {
+          params['departId'] = selectedDepartId.value;
+        }
+        // 代码逻辑说明: 【QQYUN-8239】用户角色，添加用户 返回2页数据，实际只显示一页---
+        if(props.excludeUserIdList && props.excludeUserIdList.length>0){
+          params['excludeUserIdList'] = props.excludeUserIdList.join(",");
+        }
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          const { records } = data.result;
+          userDataList.value = records;
+        } else {
+          console.error(data.message);
+        }
+        console.log('depart-loadUserList', data);
+      }
+      watch(
+        () => props.searchText,
+        () => {
+          loadUserList();
+        }
+      );
+
+      function onSelectUser(info) {
+        emit('selected', info);
+      }
+      function unSelectUser(id) {
+        emit('unSelect', id);
+      }
+      // 递归将 departNameAbbr 赋给 title，并递归处理 children
+      function fillTitles(nodes: any[] = []) {
+        for (const node of nodes) {
+          if (!node) continue;
+          if (node?.departNameAbbr) {
+            node.title = node.departNameAbbr;
+          }
+          if (Array.isArray(node.children) && node.children.length) {
+            fillTitles(node.children);
+          }
+        }
+      }
+      return {
+        containerStyle,
+        treeData,
+        selectedKeys,
+        expandedKeys,
+        onSelect,
+        loadChildren,
+        onSelectUser,
+        unSelectUser,
+        userDataList,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/UserListAndRole.vue b/src/components/Form/src/jeecg/components/userSelect/UserListAndRole.vue
new file mode 100644
index 0000000..5139c54
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/UserListAndRole.vue
@@ -0,0 +1,150 @@
+<template>
+  <a-row>
+    <a-col :span="12">
+      <div :style="containerStyle">
+        <a-tree v-if="treeData.length > 0" showIcon :treeData="treeData" :selectedKeys="selectedKeys" @select="onSelect">
+          <template #title="{ title, key }">
+            <UserOutlined style="color: #9e9e9e"/><span style="margin-left: 5px">{{ title }}</span>
+          </template>
+        </a-tree>
+      </div>
+    </a-col>
+    <a-col :span="12" style="padding-left: 10px">
+      <div :style="containerStyle">
+        <user-list :multi="multi" :excludeUserIdList="excludeUserIdList" :dataList="userDataList" :selectedIdList="selectedIdList" @selected="onSelectUser" @unSelect="unSelectUser" />
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts">
+  import { computed, ref, watch } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import UserList from './UserList.vue';
+  import { UserOutlined } from '@ant-design/icons-vue';
+
+  export default {
+    name: 'RoleUserList',
+    components: {
+      UserList,
+      UserOutlined
+    },
+    props: {
+      searchText: {
+        type: String,
+        default: '',
+      },
+      selectedIdList: {
+        type: Array,
+        default: () => [],
+      },
+      excludeUserIdList:{
+        type: Array,
+        default: () => [],
+      },
+      multi: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    emits: ['selected', 'unSelect'],
+    setup(props, { emit }) {
+      const treeData = ref<any[]>([]);
+      async function loadRoleList() {
+        const url = '/sys/role/listByTenant';
+        let params = {
+          order: 'desc',
+          column: 'createTime',
+          pageSize: 200,
+        };
+        let arr = [];
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          const { records } = data.result;
+          arr = records.map((k) => {
+            return {
+              title: k.roleName,
+              id: k.id,
+              key: k.id,
+            };
+          });
+        }
+        console.log('loadRoleList', data);
+        treeData.value = arr;
+      }
+      loadRoleList();
+
+      const selectedKeys = ref<any[]>([]);
+      const selectedRoleId = ref('');
+      function onSelect(ids, e) {
+        let record = e.node.dataRef;
+        selectedKeys.value = [record.key];
+
+        let id = ids[0];
+        selectedRoleId.value = id;
+        loadUserList();
+      }
+
+      const userDataList = ref<any[]>([]);
+      async function loadUserList() {
+        const url = '/sys/user/selectUserList';
+        let params = {
+          pageNo: 1,
+          pageSize: 99,
+        };
+        if (props.searchText) {
+          params['keyword'] = props.searchText;
+        }
+        if (selectedRoleId.value) {
+          params['roleId'] = selectedRoleId.value;
+        }
+        // 代码逻辑说明: 【QQYUN-8239】用户角色，添加用户 返回2页数据，实际只显示一页---
+        if(props.excludeUserIdList && props.excludeUserIdList.length>0){
+          params['excludeUserIdList'] = props.excludeUserIdList.join(",");
+        }
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          const { records } = data.result;
+          userDataList.value = records;
+        } else {
+          console.error(data.message);
+        }
+        console.log('role-loadUserList', data);
+      }
+      watch(
+        () => props.searchText,
+        () => {
+          loadUserList();
+        }
+      );
+
+      function onSelectUser(info) {
+        emit('selected', info);
+      }
+      function unSelectUser(id) {
+        emit('unSelect', id);
+      }
+
+      const maxHeight = ref(300);
+      maxHeight.value = window.innerHeight - 300;
+      const containerStyle = computed(() => {
+        return {
+          'overflow-y': 'auto',
+          'max-height': maxHeight.value + 'px',
+        };
+      });
+
+      return {
+        containerStyle,
+        treeData,
+        selectedKeys,
+        onSelect,
+        onSelectUser,
+        unSelectUser,
+        userDataList,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue b/src/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue
new file mode 100644
index 0000000..f523f7a
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue
@@ -0,0 +1,376 @@
+<template>
+  <BasicModal
+    @register="register"
+    :getContainer="getContainer"
+    :canFullscreen="false"
+    destroyOnClose
+    title="选择用户"
+    :width="800"
+    wrapClassName="j-user-select-modal2"
+  >
+    <!-- 部门下拉框 -->
+    <a-select v-model:value="selectedDepart" style="width: 100%" class="depart-select" @change="onDepartChange">
+      <a-select-option v-for="item in departOptions" :value="item.value">{{ item.label }}</a-select-option>
+    </a-select>
+
+    <div style="position: relative; min-height: 350px">
+      <!-- 用户搜索框 -->
+      <div :class="searchInputStatus ? 'my-search all-width' : 'my-search'">
+        <span :class="searchInputStatus ? 'hidden' : ''" style="margin-left: 10px"
+          ><SearchOutlined style="color: #c0c0c0" @click="showSearchInput"
+        /></span>
+        <div style="width: 100%" :class="searchInputStatus ? '' : 'hidden'">
+          <a-input v-model:value="searchText" @pressEnter="onSearchUser" style="width: 100%" placeholder="请输入用户名按回车搜索">
+            <template #prefix>
+              <SearchOutlined style="color: #c0c0c0" />
+            </template>
+            <template #suffix>
+              <CloseOutlined title="退出搜索" @click="clearSearch" />
+            </template>
+          </a-input>
+        </div>
+      </div>
+
+      <!-- tabs -->
+      <div class="my-tabs">
+        <a-tabs v-model:activeKey="myActiveKey" :centered="true" @change="onChangeTab">
+          <!-- 所有用户 -->
+          <a-tab-pane key="1" tab="全部" forceRender>
+            <user-list :multi="multi" :excludeUserIdList="excludeUserIdList" :dataList="userDataList" :selectedIdList="selectedIdList" depart @selected="onSelectUser" @unSelect="unSelectUser" />
+          </a-tab-pane>
+
+          <!-- 部门用户 -->
+          <a-tab-pane key="2" tab="按部门" forceRender>
+            <depart-user-list
+              :searchText="searchText"
+              :selectedIdList="selectedIdList"
+              :excludeUserIdList="excludeUserIdList"
+              @loaded="initDepartOptions"
+              @selected="onSelectUser"
+              @unSelect="unSelectUser"
+            />
+          </a-tab-pane>
+
+          <!-- 角色用户 -->
+          <a-tab-pane key="3" tab="按角色" forceRender>
+            <role-user-list :excludeUserIdList="excludeUserIdList" :searchText="searchText" :selectedIdList="selectedIdList" @selected="onSelectUser" @unSelect="unSelectUser" />
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+
+      <!-- 选中用户 -->
+      <div class="selected-users" style="width: 100%; overflow-x: hidden">
+        <SelectedUserItem v-for="item in selectedUserList" :info="item" @unSelect="unSelectUser" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div style="display: flex; justify-content: space-between; width: 100%">
+        <div class="select-user-page-info">
+          <a-pagination
+            v-if="myActiveKey == '1'"
+            v-model:current="pageNo"
+            size="small"
+            :total="totalRecord"
+            show-quick-jumper
+            @change="onPageChange"
+          />
+        </div>
+        <a-button type="primary" @click="handleOk">确 定</a-button>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import UserList from './UserList.vue';
+  import SelectedUserItem from './SelectedUserItem.vue';
+  import DepartUserList from './UserListAndDepart.vue';
+  import RoleUserList from './UserListAndRole.vue';
+  import { Pagination } from 'ant-design-vue';
+  const APagination = Pagination;
+  import { defHttp } from '/@/utils/http/axios';
+
+  import {computed, ref, toRaw, unref} from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { mySelfData } from './useUserSelect'
+  
+  export default {
+    name: 'UserSelectModal',
+    components: {
+      BasicModal,
+      SearchOutlined,
+      CloseOutlined,
+      SelectedUserItem,
+      UserList,
+      DepartUserList,
+      RoleUserList,
+      APagination,
+    },
+    props: {
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      getContainer: {
+        type: Function,
+        default: null,
+      },
+      //是否排除我自己
+      izExcludeMy: {
+        type: Boolean,
+        default: false,
+      },
+      //是否在高级查询中作为条件 可以选择当前用户表达式
+      inSuperQuery:{
+        type: Boolean,
+        default: false,
+      }
+    },
+    emits: ['selected', 'register'],
+    setup(props, { emit }) {
+      const myActiveKey = ref('1');
+      const selectedUserList = ref<any[]>([]);
+      const userStore = useUserStore();
+      const selectedIdList = computed(() => {
+        let arr = selectedUserList.value;
+        if (!arr || arr.length == 0) {
+          return [];
+        } else {
+          return arr.map((k) => k.id);
+        }
+      });
+      // QQYUN-4152【应用】已经存在的用户，添加的时候还可以重复选择
+      const excludeUserIdList = ref<any[]>([]);
+
+      // 弹窗事件
+      const [register] = useModalInner((data) => {
+        let list = data.list;
+        if (list && list.length > 0) {
+          selectedUserList.value = [...list];
+        } else {
+          selectedUserList.value = [];
+        }
+        if(data.excludeUserIdList){
+          excludeUserIdList.value = data.excludeUserIdList;
+        }else{
+          excludeUserIdList.value = [];
+        }
+        //如果排除我自己，直接excludeUserIdList.push排除即可
+        if (props.izExcludeMy) {
+          excludeUserIdList.value.push(userStore.getUserInfo.id);
+        }
+        //加载用户列表
+        loadUserList();
+      });
+
+      // 确定事件
+      function handleOk() {
+        let arr = toRaw(selectedUserList.value);
+        emit('selected', arr);
+      }
+
+      /*--------------部门下拉框，用于筛选用户---------------*/
+      const selectedDepart = ref('');
+      const departOptions = ref<any[]>([]);
+      function initDepartOptions(options) {
+        departOptions.value = [{ value: '', label: '全部用户' }, ...options];
+        selectedDepart.value = '';
+      }
+      function onDepartChange() {
+        loadUserList();
+      }
+      /*--------------部门下拉框，用于筛选用户---------------*/
+
+      /*--------------第一页 搜索框---------------*/
+      const searchInputStatus = ref(false);
+      const searchText = ref('');
+      function showSearchInput(e) {
+        e && prevent(e);
+        searchInputStatus.value = true;
+      }
+
+      // 回车事件，触发查询
+      function onSearchUser() {
+        pageNo.value = 1;
+        loadUserList();
+      }
+
+      // 清除按名称筛选
+      function clearSearch(e) {
+        e && prevent(e);
+        pageNo.value = 1;
+        searchText.value = '';
+        searchInputStatus.value = false;
+        loadUserList();
+      }
+      /*--------------第一页 搜索框---------------*/
+
+      /*--------------加载数据---------------*/
+      const pageNo = ref(1);
+      const totalRecord = ref(0);
+      const userDataList = ref<any[]>([]);
+      async function onPageChange() {
+        console.log('onPageChange', pageNo.value);
+        await loadUserList();
+      }
+      async function loadUserList() {
+        const url = '/sys/user/selectUserList';
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: 10,
+        };
+        if (searchText.value) {
+          params['keyword'] = searchText.value;
+        }
+        if (selectedDepart.value) {
+          params['departId'] = selectedDepart.value;
+        }
+
+        // 代码逻辑说明: 【QQYUN-8239】用户角色，添加用户 返回2页数据，实际只显示一页---
+        if(unref(excludeUserIdList) && unref(excludeUserIdList).length>0){
+          params['excludeUserIdList'] = excludeUserIdList.value.join(",");
+        }
+        
+        const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+        if (data.success) {
+          let { records, total } = data.result;
+          totalRecord.value = total;
+          initCurrentUserData(records);
+          userDataList.value = records;
+        } else {
+          console.error(data.message);
+        }
+        console.log('loadUserList', data);
+      }
+      
+      // 往用户列表中添加一个 当前用户选项
+      function initCurrentUserData(records) {
+        if(pageNo.value==1 && props.inSuperQuery === true){
+          records.unshift({...mySelfData})
+        }
+      }
+      /*--------------加载数据---------------*/
+
+      /*--------------选中/取消选中---------------*/
+      function onSelectUser(info) {
+        if (props.multi === true) {
+          let arr = selectedUserList.value;
+          let idList = selectedIdList.value;
+          if (idList.indexOf(info.id) < 0) {
+            arr.push({ ...info });
+            selectedUserList.value = arr;
+          }
+        } else {
+          selectedUserList.value = [{ ...info }];
+        }
+      }
+      function unSelectUser(id) {
+        let arr = selectedUserList.value;
+        let index = -1;
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id === id) {
+            index = i;
+            break;
+          }
+        }
+        if (index >= 0) {
+          arr.splice(index, 1);
+          selectedUserList.value = arr;
+        }
+      }
+      /*--------------选中/取消选中---------------*/
+
+      function onChangeTab(tab) {
+        myActiveKey.value = tab;
+      }
+
+      function prevent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      //加载第一页数据
+      loadUserList();
+
+      return {
+        selectedDepart,
+        departOptions,
+        initDepartOptions,
+        onDepartChange,
+
+        register,
+        handleOk,
+
+        searchText,
+        searchInputStatus,
+        showSearchInput,
+        onSearchUser,
+        clearSearch,
+
+        myActiveKey,
+        onChangeTab,
+
+        pageNo,
+        totalRecord,
+        onPageChange,
+        userDataList,
+        selectedUserList,
+        selectedIdList,
+        onSelectUser,
+        unSelectUser,
+        excludeUserIdList
+      };
+    },
+  };
+</script>
+
+<style lang="less">
+  .j-user-select-modal2 {
+    .depart-select {
+      .ant-select-selector {
+        color: #fff !important;
+        background-color: #409eff !important;
+        border-radius: 5px !important;
+      }
+      .ant-select-selection-item,
+      .ant-select-arrow {
+        color: #fff !important;
+      }
+    }
+    .my-search {
+      position: absolute;
+      top: 14px;
+      z-index: 1;
+      &.all-width {
+        width: 100%;
+      }
+
+      .anticon {
+        cursor: pointer;
+        &:hover {
+          color: #0a8fe9 !important;
+        }
+      }
+      .hidden {
+        display: none;
+      }
+    }
+
+    .my-tabs {
+    }
+
+    .selected-users {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      padding-top: 15px;
+    }
+
+    .scroll-container {
+      padding-bottom: 0 !important;
+    }
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/index.vue b/src/components/Form/src/jeecg/components/userSelect/index.vue
new file mode 100644
index 0000000..7a8f9cd
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/index.vue
@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <div v-if="isSearchFormComp" @click="click2Add" :class="disabled?'disabled-user-select':''" style="padding:0 5px;background-color: #fff;border: 1px solid #ccc;border-radius: 3px;box-sizing: border-box;display:flex;color: #9e9e9e;font-size: 14px;flex-wrap: wrap;min-height: 32px;">
+      <template v-if="selectedUserList.length > 0">
+        <SelectedUserItem v-for="item in showUserList" :info="item" @unSelect="unSelectUser" query />
+      </template>
+      <span v-else style="height: 30px;line-height: 30px;display: inline-block;margin-left: 7px;color: #bfbfbf;">请选择用户</span>
+      <div v-if="ellipsisInfo.status" class="user-selected-item">
+        <div class="user-select-ellipsis">
+          <span style="color: red">+{{ellipsisInfo.count}}...</span>
+        </div>
+      </div>
+    </div>    
+    
+    <div v-else style="display: flex; flex-wrap: wrap; flex-direction: row" >
+      <template v-if="selectedUserList.length > 0">
+        <SelectedUserItem v-for="item in selectedUserList" :info="item" @unSelect="unSelectUser" />
+      </template>
+      <a-button v-if="showAddButton" shape="circle" @click="onShowModal"><PlusOutlined /></a-button>
+    </div>
+
+    <user-select-modal :inSuperQuery="inSuperQuery" :multi="multi" :getContainer="getContainer" @register="registerModal" @selected="onSelected" :izExcludeMy="izExcludeMy"></user-select-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref, computed, toRaw } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { useModal } from '/@/components/Modal';
+  import UserSelectModal from './UserSelectModal.vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import SelectedUserItem from './SelectedUserItem.vue';
+  import { mySelfExpress, mySelfData } from './useUserSelect'
+
+  export default defineComponent({
+    name: 'UserSelect',
+    components: {
+      PlusOutlined,
+      UserSelectModal,
+      SelectedUserItem,
+    },
+    props: {
+      store: {
+        type: String,
+        default: 'id',
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      multi: {
+        type: Boolean,
+        default: false,
+      },
+      getContainer: {
+        type: Function,
+        default: null,
+      },
+      // 是否作为查询条件
+      query:{
+        type: Boolean,
+        default: false,
+      },
+      //最多显示几个人员-query为true有效
+      maxCount:{
+        type: Number,
+        default: 2
+      },
+      disabled:{
+        type: Boolean,
+        default: false,
+      },
+      //是否排除我自己
+      izExcludeMy:{
+        type: Boolean,
+        default: false,
+      },
+      //是否在高级查询中作为条件 可以选择当前用户
+      inSuperQuery:{
+        type: Boolean,
+        default: false,
+      }
+    },
+    emits: ['update:value', 'change'],
+    setup(props, { emit }) {
+      const formItemContext = Form.useInjectFormItemContext();
+      const loading = ref(true);
+      const selectedUserList = ref<any[]>([]);
+      const showUserList = computed(()=>{
+        let list = selectedUserList.value
+        let max = props.maxCount;
+        if(list.length<=max){
+          return list;
+        }
+        return list.filter((_item, index)=>index<max);
+      });
+      const ellipsisInfo = computed(()=>{
+        let max = props.maxCount;
+        let len = selectedUserList.value.length
+        if(len > max){
+          return {status: true, count: len-max};
+        }else{
+          return {status: false}
+        }
+      });
+
+      // 注册弹窗
+      const [registerModal, { openModal, closeModal }] = useModal();
+      function onShowModal() {
+        if(props.disabled===true){
+          return ;
+        }
+        let list = toRaw(selectedUserList.value);
+        openModal(true, {
+          list,
+        });
+      }
+
+      function onSelected(arr) {
+        console.log('onSelected', arr);
+        selectedUserList.value = arr;
+        onSelectedChange();
+        closeModal();
+      }
+
+      function onSelectedChange() {
+        loading.value = false;
+        let temp: any[] = [];
+        let arr = selectedUserList.value;
+        if (arr && arr.length > 0) {
+          temp = arr.map((k) => {
+            return k[props.store];
+          });
+        }
+        let str = temp.join(',');
+        emit('update:value', str);
+        emit('change', str);
+        formItemContext.onFieldChange();
+        console.log('选中数据', str);
+      }
+
+      watch(
+        () => props.value,
+        async (val) => {
+          if (val) {
+            if (loading.value === true) {
+              await getUserList(val);
+            }
+          } else {
+            selectedUserList.value = [];
+          }
+          loading.value = true;
+        },
+        { immediate: true }
+      );
+
+      async function getUserList(ids) {
+        let hasUserExpress = false;
+        let paramIds = ids;
+        let idList = [];
+        selectedUserList.value = [];
+        if(ids){
+          // 代码逻辑说明: 修复用户选择器逗号分割回显不生效的问题
+          let tempArray = ids.split(',').map(s => s.trim()).filter(s => s != '');
+          if (tempArray.includes(mySelfExpress)) {
+            hasUserExpress = true;
+            idList = tempArray.filter(item => item != mySelfExpress);
+          } else {
+            idList = tempArray;
+          }
+        }
+
+        if(idList.length>0){
+          paramIds = idList.join(',')
+          const url = '/sys/user/list';
+          let params = {
+            [props.store]: paramIds,
+          };
+          const data = await defHttp.get({ url, params }, { isTransformResponse: false });
+          console.log('getUserList', data);
+          if (data.success) {
+            const { records } = data.result;
+            selectedUserList.value = records;
+          } else {
+            console.error(data.message);
+          }
+        }
+        if(hasUserExpress){
+          let temp = selectedUserList.value;
+          temp.push({...mySelfData})
+        }
+      }
+
+      const showAddButton = computed(() => {
+        if(props.disabled === true){
+          return false;
+        }
+        if (props.multi === true) {
+          return true;
+        } else {
+          if (selectedUserList.value.length > 0) {
+            return false;
+          } else {
+            return true;
+          }
+        }
+      });
+
+      function unSelectUser(id) {
+        console.log('unSelectUser', id);
+        let arr = selectedUserList.value;
+        let index = -1;
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == id) {
+            index = i;
+            break;
+          }
+        }
+        if (index >= 0) {
+          arr.splice(index, 1);
+          selectedUserList.value = arr;
+
+          onSelectedChange();
+        }
+      }
+      
+      function click2Add(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        onShowModal();
+      }
+      
+      const isSearchFormComp = computed(()=>{
+        if(props.query===true){
+          return true;
+        }else{
+          return false
+        }
+      });
+      
+      return {
+        registerModal,
+        onShowModal,
+        isSearchFormComp,
+        onSelected,
+        showAddButton,
+        unSelectUser,
+        selectedUserList,
+        showUserList,
+        ellipsisInfo,
+        click2Add
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .user-select-ellipsis{
+    width: 40px;
+    height: 24px;
+    text-align: center;
+    line-height: 22px;
+    border-radius: 8px;
+    background: #f5f5f5;
+    border: 1px solid #f0f0f0;
+  }
+  .disabled-user-select{
+    cursor: not-allowed;
+    background-color: #f5f5f5 !important;
+  }
+</style>
diff --git a/src/components/Form/src/jeecg/components/userSelect/useUserSelect.ts b/src/components/Form/src/jeecg/components/userSelect/useUserSelect.ts
new file mode 100644
index 0000000..2ef7a2e
--- /dev/null
+++ b/src/components/Form/src/jeecg/components/userSelect/useUserSelect.ts
@@ -0,0 +1,11 @@
+/**
+ * 用户选择组件支持选择 我自己，以表达式的形式传值
+ */
+export const mySelfExpress = '#{sys_user_code}';
+
+/**
+ * 用户列表 我自己的数据
+ */
+export const mySelfData = {
+  id: mySelfExpress, username: mySelfExpress, realname: '当前用户', avatarIcon: 'idcard-outlined', avatarColor: 'rgb(75 176 79)'
+}
diff --git a/src/components/Form/src/jeecg/hooks/useCodeHinting.ts b/src/components/Form/src/jeecg/hooks/useCodeHinting.ts
new file mode 100644
index 0000000..76e019e
--- /dev/null
+++ b/src/components/Form/src/jeecg/hooks/useCodeHinting.ts
@@ -0,0 +1,142 @@
+export const useCodeHinting = (CodeMirror, keywords, language) => {
+  const currentKeywords: any = [...keywords];
+  const codeHintingMount = (coder) => {
+    if (keywords.length) {
+      coder.setOption('mode', language);
+      setTimeout(() => {
+        coder!.on('cursorActivity', function () {
+          coder?.showHint({
+            completeSingle: false,
+            // container: containerRef.value
+          });
+        });
+      }, 1e3);
+    }
+  };
+
+  const codeHintingRegistry = () => {
+    // 自定义关键词(.的上一级)
+    const customKeywords: string[] = [];
+
+    currentKeywords.forEach((item) => {
+      if (item.superiors) {
+        customKeywords.push(item.superiors);
+      }
+    });
+    const funcsHint = (cm, callback) => {
+      // 获取光标位置
+      const cur = cm.getCursor();
+      // 获取当前单词的信息
+      const token = cm.getTokenAt(cur);
+      const start = token.start;
+      const end = cur.ch;
+      const str = token.string;
+      let recordKeyword = null;
+      console.log('光标位置：', cur, '单词信息：', token, `start:${start},end:${end},str:${str}`);
+
+      if (str.length) {
+        if (str === '.') {
+          // 查找.前面是否有定义的关键词
+          const curLineCode = cm.getLine(cur.line);
+          for (let i = 0, len = customKeywords.length; i < len; i++) {
+            const k = curLineCode.slice(-(customKeywords[i].length + 1), -1);
+            if (customKeywords.includes(k)) {
+              recordKeyword = k;
+              break;
+            }
+          }
+        } else {
+          // 查找单词前面是否有.this(.关键词)
+          const curLineCode = cm.getLine(cur.line);
+          for (let i = 0, len = customKeywords.length; i < len; i++) {
+            const k = curLineCode.slice(start - (customKeywords[i].length + 1), start);
+            if (k.substr(-1) === '.' && customKeywords.includes(k.replace('.', ''))) {
+              recordKeyword = k.replace('.', '');
+              break;
+            }
+          }
+        }
+        const findIdx = (a, b) => a.toLowerCase().indexOf(b.toLowerCase());
+        let list = currentKeywords.filter((item) => {
+          if (recordKeyword) {
+            // 查特定对象下的属性or方法
+            return item.superiors === recordKeyword;
+          } else {
+            // 查全局属性或者方法
+            return item.superiors == undefined;
+          }
+        });
+        if (str === '.') {
+          if (recordKeyword == null) {
+            list = [];
+          }
+        } else {
+          list = list
+            .filter((item) => {
+              const { text } = item;
+              const index = findIdx(text, str);
+              let result = text.startsWith('.') ? index === 1 : index === 0;
+              return result;
+            })
+            .sort((a, b) => {
+              if (findIdx(a.text, str) < findIdx(b.text, str)) {
+                return -1;
+              } else {
+                return 1;
+              }
+            });
+        }
+
+        if (list.length === 1) {
+          // 只有一个时可能是自己输入，输到最后需要去掉提示。
+          const item = list[0];
+          if (item.text === str || item.text.substring(1) === str) {
+            list = [];
+          }
+        }
+        if (list.length) {
+          // 当str不是点时去掉点
+          if (str != '.') {
+            list = list.map((item) => {
+              if (item.text.indexOf('.') === 0) {
+                return { ...item, text: item.text.substring(1) };
+              }
+              return item;
+            });
+          }
+          callback({
+            list: list,
+            from: CodeMirror.Pos(cur.line, start),
+            to: CodeMirror.Pos(cur.line, end),
+          });
+          // 代码逻辑说明: 【QQYUN-8865】js增强加上鼠标移入提示
+          const item = currentKeywords[0];
+          if (item?.desc) {
+            setTimeout(() => {
+              const elem: HTMLUListElement = document.querySelector('.CodeMirror-hints')!;
+              if (elem) {
+                const childElems = elem.children;
+                Array.from(childElems).forEach((item) => {
+                  const displayText = item.textContent;
+                  const findItem = currentKeywords.find((item) => item.displayText === displayText);
+                  if (findItem) {
+                    item.setAttribute('title', findItem.desc);
+                  }
+                });
+              }
+            }, 0);
+          }
+        } else {
+        }
+      }
+    };
+    funcsHint.async = true;
+    funcsHint.supportsSelection = true;
+    // 自动补全
+    keywords.length && CodeMirror.registerHelper('hint', language, funcsHint);
+  };
+  return {
+    codeHintingRegistry,
+    codeHintingMount,
+  };
+};
diff --git a/src/components/Form/src/jeecg/hooks/useSelectBiz.ts b/src/components/Form/src/jeecg/hooks/useSelectBiz.ts
new file mode 100644
index 0000000..a40cecc
--- /dev/null
+++ b/src/components/Form/src/jeecg/hooks/useSelectBiz.ts
@@ -0,0 +1,172 @@
+import { inject, reactive, ref, watch, unref, Ref } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { isEmpty } from '@/utils/is';
+
+export function useSelectBiz(getList, props, emit?) {
+  //接收下拉框选项
+  const selectOptions = inject('selectOptions', ref<Array<object>>([]));
+  //接收已选择的值
+  const selectValues = <object>inject('selectValues', reactive({ value: [], change: false }));
+  // 是否正在加载回显
+  const loadingEcho = inject<Ref<boolean>>('loadingEcho', ref(false));
+  //数据集
+  const dataSource = ref<Array<object>>([]);
+  //已选择的值
+  const checkedKeys = ref<Array<string | number>>([]);
+  //选则的行记录
+  const selectRows = ref<Array<object>>([]);
+  //提示弹窗
+  const $message = useMessage();
+  // 是否是首次加载回显，只有首次加载，才会显示 loading
+  let isFirstLoadEcho = true;
+
+  /**
+   * 监听selectValues变化
+   */
+  watch(
+    selectValues,
+    () => {
+      //if (selectValues['change'] == false && !isEmpty(selectValues['value'])) {
+      if (selectValues['change'] == false && !isEmpty(selectValues['value'])) {
+        // 代码逻辑说明: 【issues/7405】部门选择用户同时全部选择两页用户，回显到父页面。第二页用户显示的不是真是姓名
+        let params = { isMultiTranslate: 'true', pageSize: selectValues.value?.length };
+        params[props.rowKey] = selectValues['value'].join(',');
+        loadingEcho.value = isFirstLoadEcho;
+        isFirstLoadEcho = false;
+        getDataSource(params, true)
+          .then()
+          .finally(() => {
+            loadingEcho.value = isFirstLoadEcho;
+          });
+      }
+      //设置列表默认选中
+      // 代码逻辑说明: 【QQYUN-12155】弹窗中勾选，再点取消，值被选中了
+      checkedKeys['value'] = [...selectValues['value']];
+    },
+    { immediate: true }
+  );
+
+  async function onSelectChange(selectedRowKeys: (string | number)[], selectRow) {
+    checkedKeys.value = selectedRowKeys;
+    //判断全选的问题checkedKeys和selectRows必须一致
+    if (props.showSelected && unref(checkedKeys).length !== unref(selectRow).length) {
+      let { records } = await getList({
+        code: unref(checkedKeys).join(','),
+        pageSize: unref(checkedKeys).length,
+      });
+      selectRows.value = records;
+    } else {
+      selectRows.value = selectRow;
+    }
+  }
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    // 代码逻辑说明: 动态设置rowSelection的type值,默认是'checkbox' ---
+    type: props.isRadioSelection ? 'radio' : 'checkbox',
+    columnWidth: 20,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+    //table4.4.0新增属性选中之后是否清空上一页下一页的数据，默认false
+    preserveSelectedRowKeys:true,
+  };
+
+  /**
+   * 序号列配置
+   */
+  const indexColumnProps = {
+    dataIndex: 'index',
+    width: 50,
+  };
+
+  /**
+   * 加载列表数据集
+   * @param params
+   * @param flag 是否是默认回显模式加载
+   */
+  async function getDataSource(params, flag) {
+    let { records } = await getList(params);
+    dataSource.value = records;
+    if (flag) {
+      let options = <any[]>[];
+      records.forEach((item) => {
+        options.push({ label: item[props.labelKey], value: item[props.rowKey] });
+      });
+      selectOptions.value = options;
+    }
+  }
+  async function initSelectRows() {
+    let { records } = await getList({
+      code: selectValues['value'].join(','),
+      pageSize: selectValues['value'].length,
+    });
+    // 代码逻辑说明: 【QQYUN-12155】弹窗中勾选，再点取消，值被选中了
+    checkedKeys['value'] = [...selectValues['value']];
+    selectRows['value'] = records;
+  }
+
+  /**
+   * 弹出框显示隐藏触发事件
+   */
+  async function visibleChange(visible) {
+    if (visible) {
+      // 代码逻辑说明: 【QQYUN-12179】弹窗勾选了值，点击取消再次打开弹窗遗留了上次的勾选的值
+      checkedKeys['value'] = [...selectValues['value']];
+      //设置列表默认选中
+      props.showSelected && initSelectRows();
+    } else {
+      // 代码逻辑说明: 【QQYUN-9366】用户选择组件取消和关闭会把选择数据带入
+      emit?.('close');
+    }
+  }
+
+  /**
+   * 确定选择
+   */
+  function getSelectResult(success) {
+    let options = <any[]>[];
+    let values = <any[]>[];
+    selectRows.value.forEach((item) => {
+      options.push({ label: item[props.labelKey], value: item[props.rowKey] });
+    });
+    checkedKeys.value.forEach((item) => {
+      values.push(item);
+    });
+    selectOptions.value = options;
+    if (props.maxSelectCount && values.length > props.maxSelectCount) {
+      $message.createMessage.warning(`最多只能选择${props.maxSelectCount}条数据`);
+      return false;
+    }
+    success && success(options, values);
+  }
+  //删除已选择的信息
+  function handleDeleteSelected(record) {
+    // 代码逻辑说明: 【issues/424】开启右侧列表后，在右侧列表中删除用户时，逻辑有问题------------
+    checkedKeys.value = checkedKeys.value.filter((item) => item != record[props.rowKey]);
+    selectRows.value = selectRows.value.filter((item) => item[props.rowKey] !== record[props.rowKey]);
+  }
+  //清空选择项
+  function reset() {
+    checkedKeys.value = [];
+    selectRows.value = [];
+  }
+  return [
+    {
+      onSelectChange,
+      getDataSource,
+      visibleChange,
+      selectOptions,
+      selectValues,
+      rowSelection,
+      indexColumnProps,
+      checkedKeys,
+      selectRows,
+      dataSource,
+      getSelectResult,
+      handleDeleteSelected,
+      reset,
+    },
+  ];
+}
diff --git a/src/components/Form/src/jeecg/hooks/useSelectMultipleScrollLoad.ts b/src/components/Form/src/jeecg/hooks/useSelectMultipleScrollLoad.ts
new file mode 100644
index 0000000..6dc2ff3
--- /dev/null
+++ b/src/components/Form/src/jeecg/hooks/useSelectMultipleScrollLoad.ts
@@ -0,0 +1,182 @@
+import { computed, ref, Ref, unref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { defHttp } from '/@/utils/http/axios';
+
+/** 触发「加载更多」的滚动剩余距离阈值（px） */
+const SCROLL_LOAD_THRESHOLD = 10;
+/** 搜索输入防抖时间（ms） */
+const SEARCH_DEBOUNCE_MS = 300;
+
+export interface ScrollLoadDictProps {
+  dictCode?: string;
+  pageSize: number;
+  scrollLoad: boolean;
+}
+
+export function useScrollLoadDict(props: ScrollLoadDictProps, dictOptions: Ref<any[]>, arrayValue: Ref<any[]>) {
+  // --- 状态 ---
+  const loading = ref(false);
+  const pageNo = ref(1);
+  const isHasData = ref(true);
+  const scrollLoading = ref(false);
+  const searchKeyword = ref('');
+
+  // --- 计算：是否表字典、是否启用滚动加载 ---
+  const isDictTable = computed(() => {
+    if (!props.dictCode) return false;
+    return props.dictCode.split(',').length >= 2;
+  });
+  const useLoadDict = computed(() => props.scrollLoad && isDictTable.value);
+
+  /**
+   * 拉取一页字典数据（loadDict 接口）。
+   * @param pageNoToLoad 页码（从 1 开始）
+   * @param isAppend true=追加到当前列表，false=替换
+   * @param keyword 搜索关键字，不传则用内部的 searchKeyword
+   */
+  function fetchLoadDictPage(pageNoToLoad: number, isAppend: boolean, keyword?: string) {
+    const kw = keyword !== undefined ? keyword : searchKeyword.value;
+    return defHttp
+      .get({
+        url: `/sys/dict/loadDict/${props.dictCode}`,
+        params: { pageNo: pageNoToLoad, pageSize: props.pageSize, keyword: kw || '', order: 'asc' },
+      })
+      .then((res: any) => {
+        const items = (res || []).map((item: any) => ({
+          value: item.value,
+          label: item.text || item.label,
+          text: item.text || item.label,
+          color: item.color,
+        }));
+        if (items.length > 0) {
+          if (isAppend) {
+            // 追加时按 value 去重，避免与回显补的项重复
+            const existValues = new Set(dictOptions.value.map((o) => String(o.value)));
+            const newItems = items.filter((it: any) => !existValues.has(String(it.value)));
+            if (newItems.length > 0) {
+              dictOptions.value = dictOptions.value.concat(newItems);
+            }
+          } else {
+            // 有选中的值且optinos中存在时，需要把选中的值在options中存在且不在新数据中的项保留（防止多次请求）
+            if (unref(arrayValue).length && unref(dictOptions).length) {
+              unref(arrayValue).forEach((val: any) => {
+                const existOption = unref(dictOptions).find((o: any) => String(o.value) === String(val));
+                if (existOption && !items.some((item: any) => String(item.value) === String(val))) {
+                  items.push(existOption);
+                }
+              });
+            }
+            dictOptions.value = items;
+          }
+          pageNo.value = pageNoToLoad + 1;
+        } else {
+          if (!isAppend) dictOptions.value = [];
+          isHasData.value = false;
+        }
+      });
+  }
+
+  function fetchDictItemByValue(val: any) {
+    if (val == null || !props.dictCode) return Promise.resolve(null);
+    return defHttp
+      .get({ url: `/sys/dict/loadDictItem/${props.dictCode}`, params: { key: val } })
+      .then((res: any) => {
+        if (Array.isArray(res) && res.length > 0) {
+          const first = res[0];
+          if (typeof first === 'string') {
+            return { value: val, label: first, text: first, color: undefined };
+          }
+          return {
+            value: first.value ?? val,
+            label: first.text ?? first.label,
+            text: first.text ?? first.label ?? '',
+            color: first.color,
+          };
+        }
+        return null;
+      })
+      .catch(() => null);
+  }
+
+  function ensureValueInOptions() {
+    if (!useLoadDict.value) return;
+    const vals = arrayValue.value;
+    if (!vals || vals.length === 0) return;
+    const existSet = new Set(dictOptions.value.map((o) => String(o.value)));
+    const missing = vals.filter((v) => !existSet.has(String(v)));
+    if (missing.length === 0) return;
+    Promise.all(missing.map((v) => fetchDictItemByValue(v))).then((items) => {
+      const newItems = items.filter(Boolean);
+      if (newItems.length > 0) {
+        dictOptions.value = [...dictOptions.value, ...newItems];
+      }
+    });
+  }
+
+  /** 搜索：带防抖，用 keyword 拉取第一页并替换列表 */
+  const handleSearch = useDebounceFn((keyword: string) => {
+    if (!useLoadDict.value) return;
+    searchKeyword.value = keyword || '';
+    pageNo.value = 1;
+    isHasData.value = true;
+    loading.value = true;
+    fetchLoadDictPage(1, false, searchKeyword.value).finally(() => {
+      loading.value = false;
+      ensureValueInOptions();
+    });
+  }, SEARCH_DEBOUNCE_MS);
+
+  function handleDropdownVisibleChange(open: boolean) {
+    if (!useLoadDict.value || !open) return;
+    if (!searchKeyword.value) return;
+    searchKeyword.value = '';
+    pageNo.value = 1;
+    isHasData.value = true;
+    loading.value = true;
+    fetchLoadDictPage(1, false, '').finally(() => {
+      loading.value = false;
+      ensureValueInOptions();
+    });
+  }
+
+  /** 初始加载字典：拉取第一页 */
+  function loadDictOptions() {
+    if (!useLoadDict.value) return;
+    pageNo.value = 1;
+    isHasData.value = true;
+    loading.value = true;
+    fetchLoadDictPage(1, false).finally(() => {
+      loading.value = false;
+      ensureValueInOptions();
+    });
+  }
+
+  /** 下拉内滚动触底时加载下一页，按 value 去重后追加 */
+  function handlePopupScroll(e: Event) {
+    if (!useLoadDict.value) return;
+    const target = e.target as HTMLElement;
+    const { scrollTop, scrollHeight, clientHeight } = target;
+    const nearBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_LOAD_THRESHOLD;
+    if (!scrollLoading.value && isHasData.value && nearBottom) {
+      scrollLoading.value = true;
+      fetchLoadDictPage(pageNo.value, true)
+        .finally(() => {
+          scrollLoading.value = false;
+        })
+        .catch(() => {
+          if (pageNo.value > 1) pageNo.value--;
+        });
+    }
+  }
+
+  return {
+    isDictTable,
+    useLoadDict,
+    loading,
+    loadDictOptions,
+    ensureValueInOptions,
+    handleSearch,
+    handleDropdownVisibleChange,
+    handlePopupScroll,
+  };
+}
diff --git a/src/components/Form/src/jeecg/hooks/useTreeBiz.ts b/src/components/Form/src/jeecg/hooks/useTreeBiz.ts
new file mode 100644
index 0000000..6a1ed04
--- /dev/null
+++ b/src/components/Form/src/jeecg/hooks/useTreeBiz.ts
@@ -0,0 +1,468 @@
+import type { Ref } from 'vue';
+import { inject, reactive, ref, computed, unref, watch, nextTick } from 'vue';
+import { TreeActionType } from '/@/components/Tree';
+import { listToTree } from '/@/utils/common/compUtils';
+import { isEqual } from 'lodash-es';
+import { defHttp } from "@/utils/http/axios";
+import { queryAllParentId } from "/@/api/common/api";
+
+export function useTreeBiz(treeRef, getList, props, realProps, emit) {
+  //接收下拉框选项
+  const selectOptions = inject('selectOptions', ref<Array<object>>([]));
+  //接收已选择的值
+  const selectValues = <object>inject('selectValues', reactive({}));
+  // 是否正在加载回显
+  const loadingEcho = inject<Ref<boolean>>('loadingEcho', ref(false));
+  //数据集
+  const treeData = ref<Array<object>>([]);
+  //已选择的值
+  const checkedKeys = ref<Array<string | number>>([]);
+  //选则的行记录
+  const selectRows = ref<Array<object>>([]);
+  //是否是打开弹框模式
+  const openModal = ref(false);
+  //是否层级关联
+  const checkStrictly = ref<boolean>(realProps.multiple ? props.checkStrictly : true);
+  // 是否开启父子关联，如果不可以多选，就始终取消父子关联
+  const getCheckStrictly = computed(() => checkStrictly.value);
+  // 是否是首次加载回显，只有首次加载，才会显示 loading
+  let isFirstLoadEcho = true;
+  let prevSelectValues = [];
+  // 需要展开的父节点ID列表
+  const expandedKeys = ref<Array<string | number>>([]);
+  // 是否启用自动展开功能（可以通过props控制）
+  const enableAutoExpand = props.enableAutoExpand !== false;
+  /**
+   * 监听selectValues变化
+   */
+  watch(
+    selectValues,
+    ({ value: values }: Recordable) => {
+      if(!values){
+        return;
+      }
+      // 代码逻辑说明: 【issues/8232】代码设置JSelectDept组件值没翻译
+      if (values.length > 0) {
+        // 防止多次请求
+        if (isEqual(values, prevSelectValues)) return;
+        prevSelectValues = values;
+        loadingEcho.value = isFirstLoadEcho;
+        isFirstLoadEcho = false;
+        onLoadData(null, values.join(',')).finally(() => {
+          loadingEcho.value = false;
+        });
+      }
+    },
+    { immediate: true }
+  );
+
+  /**
+   * 获取树实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      //throw new Error('tree is null!');
+      return null;
+    }
+    return tree;
+  }
+
+  /**
+   * 获取需要展开的父节点ID
+   */
+  async function getParentIdsToExpand(selectedIds) {
+    if (!selectedIds || selectedIds.length === 0) return [];
+    
+    try {
+      const result = await queryAllParentId({ 
+        departId: selectedIds.join(','),
+        orgCode: props.params?.orgCode 
+      });
+      
+      if (result) {
+        const allParentIds = [];
+        // 处理 Map 或 Object 结构
+        const valuesToProcess = result instanceof Map 
+          ? Array.from(result.values()) 
+          : Object.values(result);
+        
+        // 遍历所有选中节点的父节点
+        valuesToProcess.forEach((nodeData: any) => {
+          if (nodeData && nodeData.parentIds && Array.isArray(nodeData.parentIds)) {
+            // 添加父节点ID（不包含选中节点本身）
+            const parentIds = nodeData.parentIds.filter(id => !selectedIds.includes(id));
+            allParentIds.push(...parentIds);
+          }
+        });
+        
+        return [...new Set(allParentIds)]; // 去重
+      }
+      return [];
+    } catch (error) {
+      console.warn('获取父节点ID失败:', error);
+      return [];
+    }
+  }
+
+  /**
+   * 设置树展开级别
+   */
+  function expandTree() {
+    nextTick(() => {
+      if (props.defaultExpandLevel && props.defaultExpandLevel > 0) {
+        getTree().filterByLevel(props.defaultExpandLevel);
+      }
+      //设置列表默认选中
+      checkedKeys.value = selectValues['value'];
+      
+      // 如果有需要展开的父节点，则展开它们
+      if (expandedKeys.value.length > 0) {
+        getTree().setExpandedKeys(expandedKeys.value);
+      }
+    }).then(() => {
+      // 再次确保展开，因为树可能还没有完全渲染
+      if (expandedKeys.value.length > 0) {
+        setTimeout(() => {
+          getTree().setExpandedKeys(expandedKeys.value);
+        }, 100);
+      }
+    });
+  }
+
+  /**
+   * 树节点选择
+   */
+  function onSelect(keys, info) {
+    if (props.checkable == false) {
+      checkedKeys.value = props.checkStrictly ? keys.checked : keys;
+      const { selectedNodes } = info;
+      let rows = <any[]>[];
+      selectedNodes.forEach((item) => {
+        rows.push(item);
+      });
+      selectRows.value = rows;
+    }
+  }
+
+  /**
+   * 树节点选择
+   */
+  function onCheck(keys, info) {
+    if(!info){
+      return;
+    }
+    if (props.checkable == true) {
+      // 如果不能多选，就只保留最后一个选中的
+      if (!realProps.multiple) {
+        if (info.checked) {
+          // 代码逻辑说明: 单选模式下，设定rowKey，无法选中数据-
+          checkedKeys.value = [info.node.eventKey];
+          let rowKey = props.rowKey;
+          let temp = info.checkedNodes.find((n) => n[rowKey] === info.node.eventKey);
+          selectRows.value = [temp];
+        } else {
+          checkedKeys.value = [];
+          selectRows.value = [];
+        }
+        return;
+      }
+      // 代码逻辑说明: 【JHHB-250】选择部门加一个层级关联/独立的配置，现在是点击就全勾选了---
+      checkedKeys.value = checkStrictly.value ? keys.checked : keys;
+      const { checkedNodes } = info;
+      let rows = <any[]>[];
+      checkedNodes.forEach((item) => {
+        rows.push(item);
+      });
+      selectRows.value = rows;
+    }
+  }
+
+  /**
+   * 勾选全部
+   */
+  async function checkALL(checkAll) {
+    getTree().checkAll(checkAll);
+    // 代码逻辑说明: 【issues/394】所属部门树操作全部勾选不生效/【issues/4646】部门全部勾选后，点击确认按钮，部门信息丢失------------
+    await nextTick();
+    checkedKeys.value = getTree().getCheckedKeys();
+    if(checkAll){
+      getTreeRow();
+    }else{
+      selectRows.value = [];
+    }
+  }
+
+  /**
+   * 获取数列表
+   * @param res
+   */
+  function getTreeRow() {
+    let ids = "";
+    if(unref(checkedKeys).length>0){
+      ids = checkedKeys.value.join(",");
+    }
+    getList({ids:ids}).then((res) =>{
+      selectRows.value = res;
+    })
+  }
+
+  /**
+   * 展开全部
+   */
+  function expandAll(expandAll) {
+    getTree().expandAll(expandAll);
+  }
+
+  /**
+   * 加载树数据
+   */
+  async function onLoadData(treeNode, ids) {
+    let params = {};
+    let startPid = '';
+    if (treeNode) {
+      startPid = treeNode.eventKey;
+      // 代码逻辑说明: rowkey不设置成id，sync开启异步的时候，点击上级下级不显示------------
+      params['pid'] = treeNode.value;
+    }
+    if (ids) {
+      startPid = '';
+      params['ids'] = ids;
+    }
+
+    if(props.params?.departIds){
+      params['departIds'] = props.params.departIds;
+    }
+    let record = await getList(params);
+    let optionData = record;
+    //只展示公司信息（公司+子公司）
+    if(props.onlyShowCompany){
+      record = getCompanyData(record)
+    }
+    //是否只选择部门岗位
+    if (props.izOnlySelectDepartPost) {
+      setCompanyDepartCheckable(record);
+    }
+    //是否缩写departNameAbbr
+    if (props.izShowDepartNameAbbr) {
+      record = getDepartAbbrData(record);
+    }
+    if (!props.serverTreeData) {
+      //前端处理数据为tree结构
+      record = listToTree(record, props, startPid);
+      if (record.length == 0 && treeNode) {
+        checkHasChild(startPid, treeData.value);
+      }
+    }
+
+    if (openModal.value == true) {
+      //弹框模式下加载全部数据
+      if (!treeNode) {
+        treeData.value = record;
+      } else {
+        return new Promise((resolve: (value?: unknown) => void) => {
+          if (!treeNode.children) {
+            resolve();
+            return;
+          }
+          const asyncTreeAction: TreeActionType | null = unref(treeRef);
+          if (asyncTreeAction) {
+            asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: record });
+            asyncTreeAction.setExpandedKeys([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]);
+          }
+          resolve();
+          return;
+        });
+      }
+      expandTree();
+    } else {
+      const options = <any[]>[];
+      optionData.forEach((item) => {
+        // 代码逻辑说明: issues/I5F3P4 online配置部门选择后编辑，查看数据应该显示部门名称，不是部门代码
+        options.push({ label: item[props.labelKey], value: item[props.rowKey] });
+      });
+      selectOptions.value = options;
+    }
+  }
+
+  /**
+   * 获取到公司/子公司数据
+   * @param record
+   */
+  function getCompanyData(record){
+    const companyData = record.filter(item=>item.orgCategory && ['1','4'].includes(item.orgCategory));
+    return companyData
+  }
+  /**
+   * 获取到公司/子公司数据
+   * @param record
+   */
+  function getDepartAbbrData(record){
+    const departAbbrData = record;
+    departAbbrData.forEach(item=>{
+      item.title = item.departNameAbbr || item.title;
+    })
+    return departAbbrData
+  }
+  /**
+   * 异步加载时检测是否含有下级节点
+   * @param pid 父节点
+   * @param treeArray  tree数据
+   */
+  function checkHasChild(pid, treeArray) {
+    if (treeArray && treeArray.length > 0) {
+      for (let item of treeArray) {
+        if (item.key == pid) {
+          if (!item.child) {
+            item.isLeaf = true;
+          }
+          break;
+        } else {
+          checkHasChild(pid, item.children);
+        }
+      }
+    }
+  }
+
+  /**
+   * 获取已选择数据
+   */
+  function getSelectTreeData(success) {
+    const options = <any[]>[];
+    const values = <any[]>[];
+    selectRows.value.forEach((item) => {
+      options.push({ label: item[props.labelKey], value: item[props.rowKey] });
+    });
+    checkedKeys.value.forEach((item) => {
+      values.push(item);
+    });
+    selectOptions.value = options;
+    success && success(options, values);
+  }
+
+  /**
+   * 弹出框显示隐藏触发事件
+   */
+  async function visibleChange(visible) {
+    if (visible) {
+      //弹出框打开时加载全部数据
+      openModal.value = true;
+      await onLoadData(null, null);
+      
+      // 在数据加载完成后，如果有选中的值且启用了自动展开功能，则展开父节点
+      if (enableAutoExpand && selectValues.value && selectValues.value.length > 0) {
+        try {
+          const selectedIds = selectValues.value;
+          const parentIds = await getParentIdsToExpand(selectedIds);
+          
+          if (parentIds.length > 0) {
+            expandedKeys.value = parentIds;
+            
+            // 延迟展开，确保树已经渲染完成
+            nextTick(() => {
+              try {
+                const tree = getTree();
+                if (tree) {
+                  tree.setExpandedKeys(parentIds);
+
+                  // 再次确保展开
+                  setTimeout(() => {
+                    try {
+                      const tree = getTree();
+                      if (tree) {
+                        tree.setExpandedKeys(parentIds);
+                        console.log('父节点已展开:', parentIds);
+                        // 第三次确保展开，使用更长的延迟
+                        setTimeout(() => {
+                          try {
+                            const tree = getTree();
+                            if (tree) {
+                              tree.setExpandedKeys(parentIds);
+                            }
+                          } catch (error) {
+                            console.warn('展开父节点失败:', error);
+                          }
+                        }, 500);
+                      }
+                    } catch (error) {
+                      console.warn('展开父节点失败:', error);
+                    }
+                  }, 200);
+                }
+              } catch (error) {
+                console.warn('展开父节点失败:', error);
+              }
+            });
+            
+          }
+        } catch (error) {
+          console.warn('获取父节点ID失败:', error);
+        }
+      }
+    } else {
+      openModal.value = false;
+      emit?.('close');
+    }
+  }
+
+  /**
+   * 设置公司部门复选框显示
+   * @param record
+   */
+  function setCompanyDepartCheckable(record) {
+    if (record && record.length > 0) {
+      for (const item of record) {
+        if (item.orgCategory !== '3') {
+          item.checkable = false;
+          item.selectable = false;
+        } else {
+          item.checkable = true;
+          item.selectable = true;
+        }
+        if (item.isLeaf) {
+          setCompanyDepartCheckable(item.children);
+        }
+      }
+    }
+  }
+
+  /**
+   * 岗位搜索
+   *
+   * @param value
+   */
+  async function onSearch(value) {
+    if(value){
+      let result = await defHttp.get({ url: "/sys/sysDepart/searchBy", params: { keyWord: value, orgCategory: "3",...props.params } });
+      if (Array.isArray(result)) {
+        treeData.value = result;
+      } else {
+        treeData.value = [];
+      }
+    } else {
+      treeData.value = [];
+      await onLoadData(null, null)
+    }
+  }
+
+  return [
+    {
+      visibleChange,
+      selectOptions,
+      selectValues,
+      onLoadData,
+      onCheck,
+      onSelect,
+      checkALL,
+      expandAll,
+      checkedKeys,
+      selectRows,
+      treeData,
+      getCheckStrictly,
+      getSelectTreeData,
+      onSearch,
+      expandedKeys,
+      checkStrictly,
+    },
+  ];
+}
diff --git a/src/components/Form/src/jeecg/props/props.ts b/src/components/Form/src/jeecg/props/props.ts
new file mode 100644
index 0000000..d30d1b1
--- /dev/null
+++ b/src/components/Form/src/jeecg/props/props.ts
@@ -0,0 +1,92 @@
+//下拉选择框组件公共props
+import { propTypes } from '/@/utils/propTypes';
+
+export const selectProps = {
+  //是否多选
+  isRadioSelection: {
+    type: Boolean,
+    // 代码逻辑说明: 部门用户组件默认应该单选，否则其他地方有问题------------
+    default: false,
+  },
+  //回传value字段名
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  //回传文本字段名
+  labelKey: {
+    type: String,
+    default: 'name',
+  },
+  //查询参数
+  params: {
+    type: Object,
+    default: () => {},
+  },
+  //是否显示选择按钮
+  showButton: propTypes.bool.def(true),
+  //是否显示右侧选中列表
+  showSelected: propTypes.bool.def(false),
+  //最大选择数量
+  maxSelectCount: {
+    type: Number,
+    default: 0,
+  },
+};
+
+//树形选择组件公共props
+export const treeProps = {
+  //回传value字段名
+  rowKey: {
+    type: String,
+    default: 'key',
+  },
+  //回传文本字段名
+  labelKey: {
+    type: String,
+    default: 'title',
+  },
+  //初始展开的层级
+  defaultExpandLevel: {
+    type: [Number],
+    default: 1,
+  },
+  //根pid值
+  startPid: {
+    type: [Number, String],
+    default: '',
+  },
+  //主键字段
+  primaryKey: {
+    type: [String],
+    default: 'id',
+  },
+  //父ID字段
+  parentKey: {
+    type: [String],
+    default: 'parentId',
+  },
+  //title字段
+  titleKey: {
+    type: [String],
+    default: 'title',
+  },
+  //是否开启服务端转换tree数据结构
+  serverTreeData: propTypes.bool.def(true),
+  //是否开启异步加载数据
+  sync: propTypes.bool.def(true),
+  //是否显示选择按钮
+  showButton: propTypes.bool.def(true),
+  //是否只显示公司
+  onlyShowCompany: propTypes.bool.def(false),
+  //是否显示复选框
+  checkable: propTypes.bool.def(true),
+  //checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
+  checkStrictly: propTypes.bool.def(false),
+  // 是否允许多选，默认 true
+  multiple: propTypes.bool.def(true),
+  // 是否只选择岗位
+  izOnlySelectDepartPost: propTypes.bool.def(false),
+  // 是否显示部门简称
+  izShowDepartNameAbbr: propTypes.bool.def(false),
+};
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
new file mode 100644
index 0000000..242d605
--- /dev/null
+++ b/src/components/Form/src/props.ts
@@ -0,0 +1,121 @@
+import type { FieldMapToTime, FormSchema } from './types/form';
+import type { CSSProperties, PropType } from 'vue';
+import type { ColEx } from './types';
+import type { TableActionType } from '/@/components/Table';
+import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import type { RowProps } from 'ant-design-vue/lib/grid/Row';
+import dayjs from "dayjs";
+import { propTypes } from '/@/utils/propTypes';
+import componentSetting from '/@/settings/componentSetting';
+
+const { form } = componentSetting;
+export const basicProps = {
+  model: {
+    type: Object as PropType<Recordable>,
+    default: {},
+  },
+  // 标签宽度  固定宽度
+  labelWidth: {
+    type: [Number, String] as PropType<number | string>,
+    default: 0,
+  },
+  fieldMapToTime: {
+    type: Array as PropType<FieldMapToTime>,
+    default: () => [],
+  },
+  fieldMapToNumber: {
+    type: Array as PropType<FieldMapToTime>,
+    default: () => [],
+  },
+  compact: propTypes.bool,
+  // 表单配置规则
+  schemas: {
+    type: [Array] as PropType<FormSchema[]>,
+    default: () => [],
+  },
+  mergeDynamicData: {
+    type: Object as PropType<Recordable>,
+    default: null,
+  },
+  baseRowStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  baseColProps: {
+    type: Object as PropType<Partial<ColEx>>,
+  },
+  autoSetPlaceHolder: propTypes.bool.def(true),
+  // 在INPUT组件上单击回车时，是否自动提交
+  autoSubmitOnEnter: propTypes.bool.def(false),
+  submitOnReset: propTypes.bool,
+  size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
+  // 禁用表单
+  disabled: propTypes.bool,
+  emptySpan: {
+    type: [Number, Object] as PropType<number>,
+    default: 0,
+  },
+  // 是否显示收起展开按钮
+  showAdvancedButton: propTypes.bool,
+  // 转化时间
+  transformDateFunc: {
+    type: Function as PropType<Fn>,
+    default: (date: any) => {
+      // 判断是否是dayjs实例
+      return dayjs.isDayjs(date) ? date?.format('YYYY-MM-DD HH:mm:ss') : date;
+    },
+  },
+  rulesMessageJoinLabel: propTypes.bool.def(true),
+  // 【jeecg】超过3列自动折叠
+  autoAdvancedCol: propTypes.number.def(3),
+  // 超过3行自动折叠
+  // autoAdvancedLine: propTypes.number.def(3),
+  // 不受折叠影响的行数
+  alwaysShowLines: propTypes.number.def(1),
+
+  // 是否显示操作按钮
+  showActionButtonGroup: propTypes.bool.def(true),
+  // 操作列Col配置
+  actionColOptions: Object as PropType<Partial<ColEx>>,
+  // 显示重置按钮
+  showResetButton: propTypes.bool.def(true),
+  // 是否聚焦第一个输入框，只在第一个表单项为input的时候作用
+  autoFocusFirstItem: propTypes.bool,
+  // 重置按钮配置
+  resetButtonOptions: Object as PropType<Partial<ButtonProps>>,
+
+  // 显示确认按钮
+  showSubmitButton: propTypes.bool.def(true),
+  // 确认按钮配置
+  submitButtonOptions: Object as PropType<Partial<ButtonProps>>,
+
+  // 自定义重置函数
+  resetFunc: Function as PropType<() => Promise<void>>,
+  submitFunc: Function as PropType<() => Promise<void>>,
+
+  // 以下为默认props
+  hideRequiredMark: propTypes.bool,
+
+  labelCol: {
+    type: Object as PropType<Partial<ColEx>>,
+    default: form.labelCol,
+  },
+
+  layout: propTypes.oneOf(['horizontal', 'vertical', 'inline']).def('horizontal'),
+  tableAction: {
+    type: Object as PropType<TableActionType>,
+  },
+
+  wrapperCol: {
+    type: Object as PropType<Partial<ColEx>>,
+    default: form.wrapperCol,
+  },
+
+  colon: propTypes.bool.def(form.colon),
+
+  labelAlign: propTypes.string,
+
+  rowProps: Object as PropType<RowProps>,
+  
+  // 当表单是查询条件的时候 当表单改变后自动查询，不需要点击查询按钮
+  autoSearch: propTypes.bool.def(false),
+};
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
new file mode 100644
index 0000000..75d5303
--- /dev/null
+++ b/src/components/Form/src/types/form.ts
@@ -0,0 +1,228 @@
+import type { NamePath, RuleObject, ValidateOptions } from 'ant-design-vue/lib/form/interface';
+import type { VNode, ComputedRef } from 'vue';
+import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
+import type { FormItem } from './formItem';
+import type { ColEx, ComponentType } from './index';
+import type { TableActionType } from '/@/components/Table/src/types/table';
+import type { CSSProperties } from 'vue';
+import type { RowProps } from 'ant-design-vue/lib/grid/Row';
+
+export type FieldMapToTime = [string, [string, string], string?][];
+export type FieldMapToNumber = [string, [string, string]][];
+
+export type Rule = RuleObject & {
+  trigger?: 'blur' | 'change' | ['change', 'blur'];
+};
+
+export interface RenderCallbackParams {
+  schema: FormSchema;
+  values: Recordable;
+  model: Recordable;
+  field: string;
+}
+
+export interface ButtonProps extends AntdButtonProps {
+  text?: string;
+}
+
+export interface FormActionType {
+  submit: () => Promise<void>;
+  setFieldsValue: <T>(values: T) => Promise<void>;
+  resetFields: () => Promise<void>;
+  getFieldsValue: () => Recordable;
+  clearValidate: (name?: string | string[]) => Promise<void>;
+  updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+  resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
+  setProps: (formProps: Partial<FormProps>) => Promise<void>;
+  getProps: ComputedRef<Partial<FormProps>>;
+  getSchemaByField: (field: string) => Nullable<FormSchema>;
+  removeSchemaByFiled: (field: string | string[]) => Promise<void>;
+  appendSchemaByField: (schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined) => Promise<void>;
+  validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>;
+  validate: (nameList?: NamePath[]) => Promise<any>;
+  scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
+  getSchemaComponentProps: (schema: FormSchema) => Recordable
+}
+
+export type RegisterFn = (formInstance: FormActionType) => void;
+
+export type UseFormReturnType = [RegisterFn, FormActionType];
+
+export interface FormProps {
+  layout?: 'vertical' | 'inline' | 'horizontal';
+  // Form value
+  model?: Recordable;
+  // The width of all items in the entire form
+  labelWidth?: number | string;
+  //alignment
+  labelAlign?: 'left' | 'right';
+  //Row configuration for the entire form
+  rowProps?: RowProps;
+  // Submit form on reset
+  submitOnReset?: boolean;
+  // Col configuration for the entire form
+  labelCol?: Partial<ColEx> | null;
+  // Col configuration for the entire form
+  wrapperCol?: Partial<ColEx> | null;
+
+  // General row style
+  baseRowStyle?: CSSProperties;
+
+  // General col configuration
+  baseColProps?: Partial<ColEx>;
+
+  // Form configuration rules
+  schemas?: FormSchema[];
+  // Function values used to merge into dynamic control form items
+  mergeDynamicData?: Recordable;
+  // Compact mode for search forms
+  compact?: boolean;
+  // Blank line span
+  emptySpan?: number | Partial<ColEx>;
+  // Internal component size of the form
+  size?: 'default' | 'small' | 'large';
+  // Whether to disable
+  disabled?: boolean;
+  // Time interval fields are mapped into multiple
+  fieldMapToTime?: FieldMapToTime;
+  // number interval fields are mapped into multiple
+  fieldMapToNumber?: FieldMapToNumber;
+  // Placeholder is set automatically
+  autoSetPlaceHolder?: boolean;
+  // Auto submit on press enter on input
+  autoSubmitOnEnter?: boolean;
+  // Check whether the information is added to the label
+  rulesMessageJoinLabel?: boolean;
+  // 是否显示展开收起按钮
+  showAdvancedButton?: boolean;
+  // Whether to focus on the first input box, only works when the first form item is input
+  autoFocusFirstItem?: boolean;
+  // 【jeecg】如果 showAdvancedButton 为 true，超过指定列数默认折叠，默认为3
+  autoAdvancedCol?: number;
+  // 如果 showAdvancedButton 为 true，超过指定行数行默认折叠
+  // 代码逻辑说明: 【issues/7261】表格上方查询项autoAdvancedLine配置没有效果（删除autoAdvancedLine）
+  // autoAdvancedLine?: number;
+  // 折叠时始终保持显示的行数
+  alwaysShowLines?: number;
+  // Whether to show the operation button
+  showActionButtonGroup?: boolean;
+
+  // Reset button configuration
+  resetButtonOptions?: Partial<ButtonProps>;
+
+  // Confirm button configuration
+  submitButtonOptions?: Partial<ButtonProps>;
+
+  // Operation column configuration
+  actionColOptions?: Partial<ColEx>;
+
+  // Show reset button
+  showResetButton?: boolean;
+  // Show confirmation button
+  showSubmitButton?: boolean;
+
+  resetFunc?: () => Promise<void>;
+  submitFunc?: () => Promise<void>;
+  transformDateFunc?: (date: any) => string;
+  colon?: boolean;
+}
+export interface FormSchema {
+  // Field name
+  field: string;
+  // Event name triggered by internal value change, default change
+  changeEvent?: string;
+  // Variable name bound to v-model Default value
+  valueField?: string;
+  // Label name
+  // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+  label: string | VNode | Fn;
+  // Auxiliary text
+  subLabel?: string;
+  // Help text on the right side of the text
+  helpMessage?: string | string[] | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
+  // BaseHelp component props
+  helpComponentProps?: Partial<HelpComponentProps>;
+  // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid
+  labelWidth?: string | number;
+  // Disable the adjustment of labelWidth with global settings of formModel, and manually set labelCol and wrapperCol by yourself
+  disabledLabelWidth?: boolean;
+  // render component
+  component: ComponentType;
+  // Component parameters
+  componentProps?:
+    | ((opt: { schema: FormSchema; tableAction: TableActionType; formActionType: FormActionType; formModel: Recordable }) => Recordable)
+    | object;
+  // Required
+  required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+
+  suffix?: string | number | VueNode | ((values: RenderCallbackParams) => string | number | VueNode);
+  // 【QQYUN-12876】是否是紧凑型 suffix（当组件宽度未占满时，可紧挨着组件右侧）
+  suffixCompact?: boolean;
+
+  // Validation rules
+  rules?: Rule[];
+  // Check whether the information is added to the label
+  rulesMessageJoinLabel?: boolean;
+
+  // Reference formModelItem
+  itemProps?: Partial<FormItem> | ((renderCallbackParams: RenderCallbackParams) => Partial<FormItem>);
+
+  // col configuration outside formModelItem
+  colProps?: Partial<ColEx>;
+
+  // 默认值
+  defaultValue?: any;
+  isAdvanced?: boolean;
+
+  // Matching details components
+  span?: number;
+
+  ifShow?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+
+  show?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+
+  // Render the content in the form-item tag
+  render?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+
+  // Rendering col content requires outer wrapper form-item
+  renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string;
+
+  renderComponentContent?: ((renderCallbackParams: RenderCallbackParams) => any) | VNode | VNode[] | string;
+
+  // Custom slot, in from-item
+  slot?: string;
+
+  // Custom slot, similar to renderColContent
+  colSlot?: string;
+
+  dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+
+  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
+  // 设置组件props的key
+  dynamicPropskey?: string;
+  dynamicPropsVal?: ((renderCallbackParams: RenderCallbackParams) => any);
+
+  // 这个属性自定义的 用于自定义的业务 比如在表单打开的时候修改表单的禁用状态，但是又不能重写componentProps，因为他的内容太多了，所以使用dynamicDisabled和buss实现
+  buss?: any;
+  
+  //label字数控制（label宽度）
+  labelLength?: number;
+  // update-begin--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
+  auth?: string;
+  // update-end--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
+}
+export interface HelpComponentProps {
+  maxWidth: string;
+  // Whether to display the serial number
+  showIndex: boolean;
+  // Text list
+  text: any;
+  // colour
+  color: string;
+  // font size
+  fontSize: string;
+  icon: string;
+  absolute: boolean;
+  // Positioning
+  position: any;
+}
diff --git a/src/components/Form/src/types/formItem.ts b/src/components/Form/src/types/formItem.ts
new file mode 100644
index 0000000..77b238a
--- /dev/null
+++ b/src/components/Form/src/types/formItem.ts
@@ -0,0 +1,91 @@
+import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { ColProps } from 'ant-design-vue/lib/grid/Col';
+import type { HTMLAttributes, VNodeChild } from 'vue';
+
+export interface FormItem {
+  /**
+   * Used with label, whether to display : after label text.
+   * @default true
+   * @type boolean
+   */
+  colon?: boolean;
+
+  /**
+   * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.
+   * @type any (string | slot)
+   */
+  extra?: string | VNodeChild | JSX.Element;
+
+  /**
+   * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input.
+   * @default false
+   * @type boolean
+   */
+  hasFeedback?: boolean;
+
+  /**
+   * The prompt message. If not provided, the prompt message will be generated by the validation rule.
+   * @type any (string | slot)
+   */
+  help?: string | VNodeChild | JSX.Element;
+
+  /**
+   * Label test
+   * @type any (string | slot)
+   */
+  label?: string | VNodeChild | JSX.Element;
+
+  /**
+   * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
+   * @type Col
+   */
+  labelCol?: ColProps & HTMLAttributes;
+
+  /**
+   * Whether provided or not, it will be generated by the validation rule.
+   * @default false
+   * @type boolean
+   */
+  required?: boolean;
+
+  /**
+   * The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'
+   * @type string
+   */
+  validateStatus?: '' | 'success' | 'warning' | 'error' | 'validating';
+
+  /**
+   * The layout for input controls, same as labelCol
+   * @type Col
+   */
+  wrapperCol?: ColProps;
+  /**
+   * Set sub label htmlFor.
+   */
+  htmlFor?: string;
+  /**
+   * text align of label
+   */
+  labelAlign?: 'left' | 'right';
+  /**
+   * a key of model. In the setting of validate and resetFields method, the attribute is required
+   */
+  name?: NamePath;
+  /**
+   * validation rules of form
+   */
+  rules?: object | object[];
+  /**
+   * Whether to automatically associate form fields. In most cases, you can setting automatic association.
+   * If the conditions for automatic association are not met, you can manually associate them. See the notes below.
+   */
+  autoLink?: boolean;
+  /**
+   * Whether stop validate on first rule of error for this field.
+   */
+  validateFirst?: boolean;
+  /**
+   * When to validate the value of children node
+   */
+  validateTrigger?: string | string[] | false;
+}
diff --git a/src/components/Form/src/types/hooks.ts b/src/components/Form/src/types/hooks.ts
new file mode 100644
index 0000000..0308e73
--- /dev/null
+++ b/src/components/Form/src/types/hooks.ts
@@ -0,0 +1,6 @@
+export interface AdvanceState {
+  isAdvanced: boolean;
+  hideAdvanceBtn: boolean;
+  isLoad: boolean;
+  actionSpan: number;
+}
diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts
new file mode 100644
index 0000000..e2c97e0
--- /dev/null
+++ b/src/components/Form/src/types/index.ts
@@ -0,0 +1,167 @@
+type ColSpanType = number | string;
+
+export interface ColEx {
+  style?: any;
+  /**
+   * raster number of cells to occupy, 0 corresponds to display: none
+   * @default none (0)
+   * @type ColSpanType
+   */
+  span?: ColSpanType;
+
+  /**
+   * raster order, used in flex layout mode
+   * @default 0
+   * @type ColSpanType
+   */
+  order?: ColSpanType;
+
+  /**
+   * the layout fill of flex
+   * @default none
+   * @type ColSpanType
+   */
+  flex?: ColSpanType;
+
+  /**
+   * the number of cells to offset Col from the left
+   * @default 0
+   * @type ColSpanType
+   */
+  offset?: ColSpanType;
+
+  /**
+   * the number of cells that raster is moved to the right
+   * @default 0
+   * @type ColSpanType
+   */
+  push?: ColSpanType;
+
+  /**
+   * the number of cells that raster is moved to the left
+   * @default 0
+   * @type ColSpanType
+   */
+  pull?: ColSpanType;
+
+  /**
+   * <576px and also default setting, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xs?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥576px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  sm?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥768px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  md?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥992px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  lg?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥1200px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xl?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+
+  /**
+   * ≥1600px, could be a span value or an object containing above props
+   * @type { span: ColSpanType, offset: ColSpanType } | ColSpanType
+   */
+  xxl?: { span: ColSpanType; offset?: ColSpanType } | ColSpanType;
+}
+
+export type ComponentType =
+  | 'Input'
+  | 'InputGroup'
+  | 'InputPassword'
+  | 'InputSearch'
+  | 'InputTextArea'
+  | 'InputNumber'
+  | 'InputCountDown'
+  | 'Select'
+  | 'ApiSelect'
+  | 'TreeSelect'
+  | 'ApiTreeSelect'
+  | 'ApiRadioGroup'
+  | 'RadioButtonGroup'
+  | 'RadioGroup'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'AutoComplete'
+  | 'Cascader'
+  | 'DatePicker'
+  | 'MonthPicker'
+  | 'RangePicker'
+  | 'WeekPicker'
+  | 'TimePicker'
+  | 'DatePickerInFilter'
+  | 'JDatePickerMultiple'
+  | 'Switch'
+  | 'StrengthMeter'
+  | 'Upload'
+  | 'IconPicker'
+  | 'Render'
+  | 'Slider'
+  | 'Rate'
+  | 'Divider'
+  | 'JAreaLinkage'
+  | 'JSelectPosition'
+  | 'JSelectRole'
+  | 'JSelectUser'
+  | 'JImageUpload'
+  | 'JDictSelectTag'
+  | 'JSelectDept'
+  | 'JSelectDepartPost'
+  | 'JAreaSelect'
+  | 'JEditor'
+  | 'JMarkdownEditor'
+  | 'JSelectInput'
+  | 'JCodeEditor'
+  | 'JCategorySelect'
+  | 'JSelectMultiple'
+  | 'JSelectSingle'
+  | 'JPopup'
+  | 'JPopupDict'
+  | 'JSwitch'
+  | 'JEasyCron'
+  | 'JTreeDict'
+  | 'JInputPop'
+  | 'JCheckbox'
+  | 'JInput'
+  | 'JTreeSelect'
+  | 'JEllipsis'
+  | 'JSelectUserByDept'
+  | 'JSelectUserByDeptPost'
+  | 'JSelectUserByDepartment'
+  | 'JTabsSelectUser'
+  | 'JUpload'
+  | 'JSearchSelect'
+  | 'JAddInput'
+  | 'Time'
+  | 'OnlineSelectCascade'
+  | 'LinkTableCard'
+  | 'LinkTableSelect'
+  | 'LinkTableForQuery'
+  | 'CascaderPcaForQuery'
+  | 'CascaderPcaInFilter'
+  | 'UserSelect'
+  | 'RoleSelect'
+  | 'RangeDate'
+  | 'RangeNumber'
+  | 'linkRecordSelect'
+  | 'RangeTime'
+  | 'JRangeNumber'
+  | 'JLinkTableCard'
+  | 'JInputSelect';
+
diff --git a/src/components/Form/src/utils/Area.ts b/src/components/Form/src/utils/Area.ts
new file mode 100644
index 0000000..e783501
--- /dev/null
+++ b/src/components/Form/src/utils/Area.ts
@@ -0,0 +1,163 @@
+import {pcaa as REGION_DATA} from "@/utils/areaData/pcaUtils";
+
+/**
+ * Area 属性all的类型
+ */
+interface PlainPca {
+  id: string;
+  text: string;
+  pid: string;
+  index: Number;
+}
+
+/**
+ * 省市区工具类 -解决列表省市区组件的翻译问题
+ */
+class Area {
+  all: PlainPca[];
+
+  /**
+   * 构造器
+   * @param pcaa
+   */
+  constructor(pcaa?) {
+    if (!pcaa) {
+      pcaa = REGION_DATA;
+    }
+    let arr: PlainPca[] = [];
+    const province = pcaa['86'];
+    Object.keys(province).map((key) => {
+      arr.push({ id: key, text: province[key], pid: '86', index: 1 });
+      const city = pcaa[key];
+      Object.keys(city).map((key2) => {
+        arr.push({ id: key2, text: city[key2], pid: key, index: 2 });
+        const qu = pcaa[key2];
+        if (qu) {
+          Object.keys(qu).map((key3) => {
+            arr.push({ id: key3, text: qu[key3], pid: key2, index: 3 });
+          });
+        }
+      });
+    });
+    this.all = arr;
+  }
+
+  get pca() {
+    return this.all;
+  }
+
+  getCode(text) {
+    if (!text || text.length == 0) {
+      return '';
+    }
+    for (let item of this.all) {
+      if (item.text === text) {
+        return item.id;
+      }
+    }
+  }
+  
+// 代码逻辑说明: [issue/382]省市区组件JAreaLinkage数据不回显---
+  getText(code,index=3) {
+    if (!code || code.length == 0) {
+      return '';
+    }
+    let arr = [];
+    this.getAreaBycode(code, arr, index);
+    return arr.join('/');
+  }
+
+  getRealCode(code) {
+    let arr = [];
+    this.getPcode(code, arr, 3);
+    return arr;
+  }
+
+  getPcode(id, arr, index) {
+    for (let item of this.all) {
+      if (item.id === id && item.index == index) {
+        arr.unshift(id);
+        if (item.pid != '86') {
+          this.getPcode(item.pid, arr, --index);
+        }
+      }
+    }
+  }
+
+  getAreaBycode(code, arr, index) {
+    for (let item of this.all) {
+      if (item.id === code && item.index == index) {
+        arr.unshift(item.text);
+        if (item.pid != '86') {
+          this.getAreaBycode(item.pid, arr, --index);
+        }
+      }
+    }
+  }
+}
+const jeecgAreaData = new Area();
+
+// 根据code找文本
+const getAreaTextByCode = function (code) {
+  let index = 3;
+  // 代码逻辑说明: 判断code是否是多code逗号分割的字符串，是的话，获取最后一位的code ---
+  if (code && code.includes(',')) {
+    index = code.split(",").length;
+    code = code.substr(code.lastIndexOf(',') + 1);
+  }
+  return jeecgAreaData.getText(code,index);
+};
+
+/**
+ * 20260204
+ * liaozhiyang
+ * 【QQYUN-14694】online支持配置独立的省、市、县 （根据 code 找文本（支持仅省、仅省市、省市区））
+ * @param includeParent 是否返回父级路径。默认 false 只返回最后一级（如「长治市」），true 返回完整路径（如「山西省/长治市」）
+ * @param level 层级：1=省，2=市，3=县。传入时作为 index 使用，不传则从 code 推断
+ */
+const getAreaTextByCodeAnyLevel = function (code: string | number | undefined, includeParent = false, level?: 1 | 2 | 3): string {
+  if (!code) return '';
+  const codeStr = String(code).trim();
+  if (!codeStr.length) return '';
+
+  let lastCode: string;
+  let index: number;
+  let resolvedItem: PlainPca | null = null;
+
+  if (codeStr.includes(',')) {
+    const parts = codeStr.split(',').map((s) => s.trim()).filter(Boolean);
+    if (!parts.length) return '';
+    index = level ?? parts.length;
+    lastCode = level != null ? parts[level - 1] : parts[parts.length - 1];
+    if (level != null) {
+      resolvedItem = jeecgAreaData.all.find((it) => String(it.id) === lastCode && it.index == index) ?? null;
+    }
+  } else {
+    const item = jeecgAreaData.all.find((it) => String(it.id) === codeStr);
+    if (!item) return '';
+    const itemIndex = item.index as number;
+    index = level ?? itemIndex;
+    lastCode = codeStr;
+    if (level != null && level !== itemIndex) {
+      const chain: string[] = [];
+      jeecgAreaData.getPcode(codeStr, chain, itemIndex);
+      const targetCode = chain[level - 1];
+      if (targetCode) {
+        lastCode = targetCode;
+        resolvedItem = jeecgAreaData.all.find((it) => String(it.id) === targetCode && it.index == level) ?? null;
+      } else {
+        resolvedItem = item;
+      }
+    } else {
+      resolvedItem = item;
+    }
+  }
+  if (includeParent) {
+    return jeecgAreaData.getText(lastCode, index);
+  } else {
+    const item = resolvedItem ?? jeecgAreaData.all.find((it) => String(it.id) === lastCode && it.index == index);
+    return item ? item.text : '';
+  }
+};
+
+export { getAreaTextByCode, getAreaTextByCodeAnyLevel };
diff --git a/src/components/Form/src/utils/GroupRequest.ts b/src/components/Form/src/utils/GroupRequest.ts
new file mode 100644
index 0000000..ce813df
--- /dev/null
+++ b/src/components/Form/src/utils/GroupRequest.ts
@@ -0,0 +1,27 @@
+import { getAuthCache, setAuthCache } from '/@/utils/auth';
+/**
+ * 将一个请求分组
+ *
+ * @param getPromise 传入一个可以获取到Promise对象的方法
+ * @param groupId 分组ID，如果不传或者为空则不分组
+ * @param expire 过期时间，默认 半分钟
+ */
+export function httpGroupRequest(getPromise, groupId, expire = 1000 * 30) {
+  if (groupId == null || groupId === '') {
+    console.log('--------popup----------getFrom  DB-------with---no--groupId ');
+    return getPromise();
+  }
+
+  if (getAuthCache(groupId)) {
+    console.log('---------popup--------getFrom  Cache--------groupId = ' + groupId);
+    return Promise.resolve(getAuthCache(groupId));
+  } else {
+    console.log('--------popup----------getFrom  DB---------groupId = ' + groupId);
+  }
+
+  // 还没有发出请求，就发出第一次的请求
+  return getPromise().then((res) => {
+    setAuthCache(groupId, res);
+    return Promise.resolve(res);
+  });
+}
diff --git a/src/components/Form/src/utils/areaDataUtil.js b/src/components/Form/src/utils/areaDataUtil.js
new file mode 100644
index 0000000..df96a73
--- /dev/null
+++ b/src/components/Form/src/utils/areaDataUtil.js
@@ -0,0 +1,193 @@
+import {pcaa as REGION_DATA} from "@/utils/areaData/pcaUtils";
+import { cloneDeep } from 'lodash-es';
+
+// code转汉字大对象
+const CodeToText = {};
+// 汉字转code大对象
+const TextToCode = {};
+const provinceObject = REGION_DATA['86']; // 省份对象
+const regionData = [];
+let provinceAndCityData = [];
+
+CodeToText[''] = '全部';
+
+// 计算省
+for (const prop in provinceObject) {
+  regionData.push({
+    value: prop, // 省份code值
+    label: provinceObject[prop], // 省份汉字
+  });
+  CodeToText[prop] = provinceObject[prop];
+  TextToCode[provinceObject[prop]] = {
+    code: prop,
+  };
+  TextToCode[provinceObject[prop]]['全部'] = {
+    code: '',
+  };
+}
+// 计算市
+for (let i = 0, len = regionData.length; i < len; i++) {
+  const provinceCode = regionData[i].value;
+  const provinceText = regionData[i].label;
+  const provinceChildren = [];
+  for (const prop in REGION_DATA[provinceCode]) {
+    provinceChildren.push({
+      value: prop,
+      label: REGION_DATA[provinceCode][prop],
+    });
+    CodeToText[prop] = REGION_DATA[provinceCode][prop];
+    TextToCode[provinceText][REGION_DATA[provinceCode][prop]] = {
+      code: prop,
+    };
+    TextToCode[provinceText][REGION_DATA[provinceCode][prop]]['全部'] = {
+      code: '',
+    };
+  }
+  if (provinceChildren.length) {
+    regionData[i].children = provinceChildren;
+  }
+}
+provinceAndCityData = cloneDeep(regionData);
+
+// 计算区
+for (let i = 0, len = regionData.length; i < len; i++) {
+  const province = regionData[i].children;
+  const provinceText = regionData[i].label;
+  if (province) {
+    for (let j = 0, len = province.length; j < len; j++) {
+      const cityCode = province[j].value;
+      const cityText = province[j].label;
+      const cityChildren = [];
+      for (const prop in REGION_DATA[cityCode]) {
+        cityChildren.push({
+          value: prop,
+          label: REGION_DATA[cityCode][prop],
+        });
+        CodeToText[prop] = REGION_DATA[cityCode][prop];
+        TextToCode[provinceText][cityText][REGION_DATA[cityCode][prop]] = {
+          code: prop,
+        };
+      }
+      if (cityChildren.length) {
+        province[j].children = cityChildren;
+      }
+    }
+  }
+}
+
+// 添加“全部”选项
+const provinceAndCityDataPlus = cloneDeep(provinceAndCityData);
+provinceAndCityDataPlus.unshift({
+  value: '',
+  label: '全部',
+});
+for (let i = 0, len = provinceAndCityDataPlus.length; i < len; i++) {
+  const province = provinceAndCityDataPlus[i].children;
+  if (province && province.length) {
+    province.unshift({
+      value: '',
+      label: '全部',
+    });
+    for (let j = 0, len = province.length; j < len; j++) {
+      const city = province[j].children;
+      if (city && city.length) {
+        city.unshift({
+          value: '',
+          label: '全部',
+        });
+      }
+    }
+  }
+}
+
+const regionDataPlus = cloneDeep(regionData);
+regionDataPlus.unshift({
+  value: '',
+  label: '全部',
+});
+for (let i = 0, len = regionDataPlus.length; i < len; i++) {
+  const province = regionDataPlus[i].children;
+  if (province && province.length) {
+    province.unshift({
+      value: '',
+      label: '全部',
+    });
+
+    for (let j = 0, len = province.length; j < len; j++) {
+      const city = province[j].children;
+      if (city && city.length) {
+        city.unshift({
+          value: '',
+          label: '全部',
+        });
+      }
+    }
+  }
+}
+//--begin--@updateBy:liusq----date:20210922---for:省市区三级联动需求方法-----
+//省份数据
+const provinceOptions = [];
+for (const prop in provinceObject) {
+  provinceOptions.push({
+    value: prop, // 省份code值
+    label: provinceObject[prop], // 省份汉字
+  });
+}
+/**
+ * 根据code获取下拉option的数据
+ * @param code
+ * @returns []
+ */
+function getDataByCode(code) {
+  let data = [];
+  for (const prop in REGION_DATA[code]) {
+    data.push({
+      value: prop, // 省份code值
+      label: REGION_DATA[code][prop], // 省份汉字
+    });
+  }
+  return data;
+}
+
+/**
+ * 获取全部省市区的层级
+ * @type {Array}
+ */
+const pca = [];
+Object.keys(provinceObject).map((province) => {
+  pca.push({ id: province, text: provinceObject[province], pid: '86', index: 1 });
+  const cityObject = REGION_DATA[province];
+  Object.keys(cityObject).map((city) => {
+    pca.push({ id: city, text: cityObject[city], pid: province, index: 2 });
+    const areaObject = REGION_DATA[city];
+    if (areaObject) {
+      Object.keys(areaObject).map((area) => {
+        pca.push({ id: area, text: areaObject[area], pid: city, index: 3 });
+      });
+    }
+  });
+});
+
+/**
+ * 根据code反推value
+ * @param code
+ * @param level
+ * @returns {Array}
+ */
+function getRealCode(code, level) {
+  let arr = [];
+  getPcode(code, arr, level);
+  return arr;
+}
+function getPcode(id, arr, index) {
+  for (let item of pca) {
+    if (item.id === id && item.index == index) {
+      arr.unshift(id);
+      if (item.pid != '86') {
+        getPcode(item.pid, arr, --index);
+      }
+    }
+  }
+}
+//--end--@updateBy:liusq----date:20210922---for:省市区三级联动需求方法-----
+export { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, getDataByCode, provinceOptions, getRealCode };
diff --git a/src/components/Form/src/utils/formUtils.ts b/src/components/Form/src/utils/formUtils.ts
new file mode 100644
index 0000000..eff7655
--- /dev/null
+++ b/src/components/Form/src/utils/formUtils.ts
@@ -0,0 +1,73 @@
+import { unref } from 'vue';
+import { dateUtil } from '/@/utils/dateUtil';
+
+/**
+ * 表单区间时间数值字段转换
+ * @param props
+ * @param values
+ */
+export function handleRangeValue(props, values) {
+  //判断是否配置并处理fieldMapToTime
+  const fieldMapToTime = unref(props)?.fieldMapToTime;
+  fieldMapToTime && (values = handleRangeTimeValue(props, values));
+  //判断是否配置并处理fieldMapToNumber
+  const fieldMapToNumber = unref(props)?.fieldMapToNumber;
+  fieldMapToNumber && (values = handleRangeNumberValue(props, values));
+  return values;
+}
+/**
+ * 处理时间转换成2个字段
+ * @param props
+ * @param values
+ */
+export function handleRangeTimeValue(props, values) {
+  const fieldMapToTime = unref(props).fieldMapToTime;
+  if (!fieldMapToTime || !Array.isArray(fieldMapToTime)) {
+    return values;
+  }
+  for (const [field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD'] of fieldMapToTime) {
+    if (!field || !startTimeKey || !endTimeKey || !values[field]) {
+      continue;
+    }
+
+    // 【issues/I53G9Y】 日期区间组件有可能是字符串
+    let timeValue = values[field];
+    if (!Array.isArray(timeValue)) {
+      timeValue = timeValue.split(',');
+    }
+    const [startTime, endTime]: string[] = timeValue;
+    // 代码逻辑说明: 【issues/7216】当RangePicker组件值允许开始/结束为空时,表单的fieldMapToTime处理异常---
+    startTime && (values[startTimeKey] = dateUtil(startTime).format(format));
+    endTime && (values[endTimeKey] = dateUtil(endTime).format(format));
+    Reflect.deleteProperty(values, field);
+  }
+  return values;
+}
+/**
+ * 处理数字转换成2个字段
+ * @param props
+ * @param values
+ * @updateby liusq
+ * @updateDate:2021-09-16
+ */
+export function handleRangeNumberValue(props, values) {
+  const fieldMapToNumber = unref(props).fieldMapToNumber;
+  if (!fieldMapToNumber || !Array.isArray(fieldMapToNumber)) {
+    return values;
+  }
+  for (const [field, [startNumberKey, endNumberKey]] of fieldMapToNumber) {
+    if (!field || !startNumberKey || !endNumberKey || !values[field]) {
+      continue;
+    }
+    // 代码逻辑说明: 用于数值的范围查询 数组格式的中间转换不知道哪里出了问题，这里会变成字符串，需要再强制转成数组
+    let temp = values[field];
+    if (typeof temp === 'string') {
+      temp = temp.split(',');
+    }
+    const [startNumber, endNumber]: number[] = temp;
+    values[startNumberKey] = startNumber;
+    values[endNumberKey] = endNumber;
+    Reflect.deleteProperty(values, field);
+  }
+  return values;
+}
diff --git a/src/components/Icon/data/icons.data.ts b/src/components/Icon/data/icons.data.ts
new file mode 100644
index 0000000..bcac58e
--- /dev/null
+++ b/src/components/Icon/data/icons.data.ts
@@ -0,0 +1,791 @@
+export default [
+  'ant-design:account-book-filled',
+  'ant-design:account-book-outlined',
+  'ant-design:account-book-twotone',
+  'ant-design:aim-outlined',
+  'ant-design:alert-filled',
+  'ant-design:alert-outlined',
+  'ant-design:alert-twotone',
+  'ant-design:alibaba-outlined',
+  'ant-design:align-center-outlined',
+  'ant-design:align-left-outlined',
+  'ant-design:align-right-outlined',
+  'ant-design:alipay-circle-filled',
+  'ant-design:alipay-circle-outlined',
+  'ant-design:alipay-outlined',
+  'ant-design:alipay-square-filled',
+  'ant-design:aliwangwang-filled',
+  'ant-design:aliwangwang-outlined',
+  'ant-design:aliyun-outlined',
+  'ant-design:amazon-circle-filled',
+  'ant-design:amazon-outlined',
+  'ant-design:amazon-square-filled',
+  'ant-design:android-filled',
+  'ant-design:android-outlined',
+  'ant-design:ant-cloud-outlined',
+  'ant-design:ant-design-outlined',
+  'ant-design:apartment-outlined',
+  'ant-design:api-filled',
+  'ant-design:api-outlined',
+  'ant-design:api-twotone',
+  'ant-design:apple-filled',
+  'ant-design:apple-outlined',
+  'ant-design:appstore-add-outlined',
+  'ant-design:appstore-filled',
+  'ant-design:appstore-outlined',
+  'ant-design:appstore-twotone',
+  'ant-design:area-chart-outlined',
+  'ant-design:arrow-down-outlined',
+  'ant-design:arrow-left-outlined',
+  'ant-design:arrow-right-outlined',
+  'ant-design:arrow-up-outlined',
+  'ant-design:arrows-alt-outlined',
+  'ant-design:audio-filled',
+  'ant-design:audio-muted-outlined',
+  'ant-design:audio-outlined',
+  'ant-design:audio-twotone',
+  'ant-design:audit-outlined',
+  'ant-design:backward-filled',
+  'ant-design:backward-outlined',
+  'ant-design:bank-filled',
+  'ant-design:bank-outlined',
+  'ant-design:bank-twotone',
+  'ant-design:bar-chart-outlined',
+  'ant-design:barcode-outlined',
+  'ant-design:bars-outlined',
+  'ant-design:behance-circle-filled',
+  'ant-design:behance-outlined',
+  'ant-design:behance-square-filled',
+  'ant-design:behance-square-outlined',
+  'ant-design:bell-filled',
+  'ant-design:bell-outlined',
+  'ant-design:bell-twotone',
+  'ant-design:bg-colors-outlined',
+  'ant-design:block-outlined',
+  'ant-design:bold-outlined',
+  'ant-design:book-filled',
+  'ant-design:book-outlined',
+  'ant-design:book-twotone',
+  'ant-design:border-bottom-outlined',
+  'ant-design:border-horizontal-outlined',
+  'ant-design:border-inner-outlined',
+  'ant-design:border-left-outlined',
+  'ant-design:border-outer-outlined',
+  'ant-design:border-outlined',
+  'ant-design:border-right-outlined',
+  'ant-design:border-top-outlined',
+  'ant-design:border-verticle-outlined',
+  'ant-design:borderless-table-outlined',
+  'ant-design:box-plot-filled',
+  'ant-design:box-plot-outlined',
+  'ant-design:box-plot-twotone',
+  'ant-design:branches-outlined',
+  'ant-design:bug-filled',
+  'ant-design:bug-outlined',
+  'ant-design:bug-twotone',
+  'ant-design:build-filled',
+  'ant-design:build-outlined',
+  'ant-design:build-twotone',
+  'ant-design:bulb-filled',
+  'ant-design:bulb-outlined',
+  'ant-design:bulb-twotone',
+  'ant-design:calculator-filled',
+  'ant-design:calculator-outlined',
+  'ant-design:calculator-twotone',
+  'ant-design:calendar-filled',
+  'ant-design:calendar-outlined',
+  'ant-design:calendar-twotone',
+  'ant-design:camera-filled',
+  'ant-design:camera-outlined',
+  'ant-design:camera-twotone',
+  'ant-design:car-filled',
+  'ant-design:car-outlined',
+  'ant-design:car-twotone',
+  'ant-design:caret-down-filled',
+  'ant-design:caret-down-outlined',
+  'ant-design:caret-left-filled',
+  'ant-design:caret-left-outlined',
+  'ant-design:caret-right-filled',
+  'ant-design:caret-right-outlined',
+  'ant-design:caret-up-filled',
+  'ant-design:caret-up-outlined',
+  'ant-design:carry-out-filled',
+  'ant-design:carry-out-outlined',
+  'ant-design:carry-out-twotone',
+  'ant-design:check-circle-filled',
+  'ant-design:check-circle-outlined',
+  'ant-design:check-circle-twotone',
+  'ant-design:check-outlined',
+  'ant-design:check-square-filled',
+  'ant-design:check-square-outlined',
+  'ant-design:check-square-twotone',
+  'ant-design:chrome-filled',
+  'ant-design:chrome-outlined',
+  'ant-design:ci-circle-filled',
+  'ant-design:ci-circle-outlined',
+  'ant-design:ci-circle-twotone',
+  'ant-design:ci-outlined',
+  'ant-design:ci-twotone',
+  'ant-design:clear-outlined',
+  'ant-design:clock-circle-filled',
+  'ant-design:clock-circle-outlined',
+  'ant-design:clock-circle-twotone',
+  'ant-design:close-circle-filled',
+  'ant-design:close-circle-outlined',
+  'ant-design:close-circle-twotone',
+  'ant-design:close-outlined',
+  'ant-design:close-square-filled',
+  'ant-design:close-square-outlined',
+  'ant-design:close-square-twotone',
+  'ant-design:cloud-download-outlined',
+  'ant-design:cloud-filled',
+  'ant-design:cloud-outlined',
+  'ant-design:cloud-server-outlined',
+  'ant-design:cloud-sync-outlined',
+  'ant-design:cloud-twotone',
+  'ant-design:cloud-upload-outlined',
+  'ant-design:cluster-outlined',
+  'ant-design:code-filled',
+  'ant-design:code-outlined',
+  'ant-design:code-sandbox-circle-filled',
+  'ant-design:code-sandbox-outlined',
+  'ant-design:code-sandbox-square-filled',
+  'ant-design:code-twotone',
+  'ant-design:codepen-circle-filled',
+  'ant-design:codepen-circle-outlined',
+  'ant-design:codepen-outlined',
+  'ant-design:codepen-square-filled',
+  'ant-design:coffee-outlined',
+  'ant-design:column-height-outlined',
+  'ant-design:column-width-outlined',
+  'ant-design:comment-outlined',
+  'ant-design:compass-filled',
+  'ant-design:compass-outlined',
+  'ant-design:compass-twotone',
+  'ant-design:compress-outlined',
+  'ant-design:console-sql-outlined',
+  'ant-design:contacts-filled',
+  'ant-design:contacts-outlined',
+  'ant-design:contacts-twotone',
+  'ant-design:container-filled',
+  'ant-design:container-outlined',
+  'ant-design:container-twotone',
+  'ant-design:control-filled',
+  'ant-design:control-outlined',
+  'ant-design:control-twotone',
+  'ant-design:copy-filled',
+  'ant-design:copy-outlined',
+  'ant-design:copy-twotone',
+  'ant-design:copyright-circle-filled',
+  'ant-design:copyright-circle-outlined',
+  'ant-design:copyright-circle-twotone',
+  'ant-design:copyright-outlined',
+  'ant-design:copyright-twotone',
+  'ant-design:credit-card-filled',
+  'ant-design:credit-card-outlined',
+  'ant-design:credit-card-twotone',
+  'ant-design:crown-filled',
+  'ant-design:crown-outlined',
+  'ant-design:crown-twotone',
+  'ant-design:customer-service-filled',
+  'ant-design:customer-service-outlined',
+  'ant-design:customer-service-twotone',
+  'ant-design:dash-outlined',
+  'ant-design:dashboard-filled',
+  'ant-design:dashboard-outlined',
+  'ant-design:dashboard-twotone',
+  'ant-design:database-filled',
+  'ant-design:database-outlined',
+  'ant-design:database-twotone',
+  'ant-design:delete-column-outlined',
+  'ant-design:delete-filled',
+  'ant-design:delete-outlined',
+  'ant-design:delete-row-outlined',
+  'ant-design:delete-twotone',
+  'ant-design:delivered-procedure-outlined',
+  'ant-design:deployment-unit-outlined',
+  'ant-design:desktop-outlined',
+  'ant-design:diff-filled',
+  'ant-design:diff-outlined',
+  'ant-design:diff-twotone',
+  'ant-design:dingding-outlined',
+  'ant-design:dingtalk-circle-filled',
+  'ant-design:dingtalk-outlined',
+  'ant-design:dingtalk-square-filled',
+  'ant-design:disconnect-outlined',
+  'ant-design:dislike-filled',
+  'ant-design:dislike-outlined',
+  'ant-design:dislike-twotone',
+  'ant-design:dollar-circle-filled',
+  'ant-design:dollar-circle-outlined',
+  'ant-design:dollar-circle-twotone',
+  'ant-design:dollar-outlined',
+  'ant-design:dollar-twotone',
+  'ant-design:dot-chart-outlined',
+  'ant-design:double-left-outlined',
+  'ant-design:double-right-outlined',
+  'ant-design:down-circle-filled',
+  'ant-design:down-circle-outlined',
+  'ant-design:down-circle-twotone',
+  'ant-design:down-outlined',
+  'ant-design:down-square-filled',
+  'ant-design:down-square-outlined',
+  'ant-design:down-square-twotone',
+  'ant-design:download-outlined',
+  'ant-design:drag-outlined',
+  'ant-design:dribbble-circle-filled',
+  'ant-design:dribbble-outlined',
+  'ant-design:dribbble-square-filled',
+  'ant-design:dribbble-square-outlined',
+  'ant-design:dropbox-circle-filled',
+  'ant-design:dropbox-outlined',
+  'ant-design:dropbox-square-filled',
+  'ant-design:edit-filled',
+  'ant-design:edit-outlined',
+  'ant-design:edit-twotone',
+  'ant-design:ellipsis-outlined',
+  'ant-design:enter-outlined',
+  'ant-design:environment-filled',
+  'ant-design:environment-outlined',
+  'ant-design:environment-twotone',
+  'ant-design:euro-circle-filled',
+  'ant-design:euro-circle-outlined',
+  'ant-design:euro-circle-twotone',
+  'ant-design:euro-outlined',
+  'ant-design:euro-twotone',
+  'ant-design:exception-outlined',
+  'ant-design:exclamation-circle-filled',
+  'ant-design:exclamation-circle-outlined',
+  'ant-design:exclamation-circle-twotone',
+  'ant-design:exclamation-outlined',
+  'ant-design:expand-alt-outlined',
+  'ant-design:expand-outlined',
+  'ant-design:experiment-filled',
+  'ant-design:experiment-outlined',
+  'ant-design:experiment-twotone',
+  'ant-design:export-outlined',
+  'ant-design:eye-filled',
+  'ant-design:eye-invisible-filled',
+  'ant-design:eye-invisible-outlined',
+  'ant-design:eye-invisible-twotone',
+  'ant-design:eye-outlined',
+  'ant-design:eye-twotone',
+  'ant-design:facebook-filled',
+  'ant-design:facebook-outlined',
+  'ant-design:fall-outlined',
+  'ant-design:fast-backward-filled',
+  'ant-design:fast-backward-outlined',
+  'ant-design:fast-forward-filled',
+  'ant-design:fast-forward-outlined',
+  'ant-design:field-binary-outlined',
+  'ant-design:field-number-outlined',
+  'ant-design:field-string-outlined',
+  'ant-design:field-time-outlined',
+  'ant-design:file-add-filled',
+  'ant-design:file-add-outlined',
+  'ant-design:file-add-twotone',
+  'ant-design:file-done-outlined',
+  'ant-design:file-excel-filled',
+  'ant-design:file-excel-outlined',
+  'ant-design:file-excel-twotone',
+  'ant-design:file-exclamation-filled',
+  'ant-design:file-exclamation-outlined',
+  'ant-design:file-exclamation-twotone',
+  'ant-design:file-filled',
+  'ant-design:file-gif-outlined',
+  'ant-design:file-image-filled',
+  'ant-design:file-image-outlined',
+  'ant-design:file-image-twotone',
+  'ant-design:file-jpg-outlined',
+  'ant-design:file-markdown-filled',
+  'ant-design:file-markdown-outlined',
+  'ant-design:file-markdown-twotone',
+  'ant-design:file-outlined',
+  'ant-design:file-pdf-filled',
+  'ant-design:file-pdf-outlined',
+  'ant-design:file-pdf-twotone',
+  'ant-design:file-ppt-filled',
+  'ant-design:file-ppt-outlined',
+  'ant-design:file-ppt-twotone',
+  'ant-design:file-protect-outlined',
+  'ant-design:file-search-outlined',
+  'ant-design:file-sync-outlined',
+  'ant-design:file-text-filled',
+  'ant-design:file-text-outlined',
+  'ant-design:file-text-twotone',
+  'ant-design:file-twotone',
+  'ant-design:file-unknown-filled',
+  'ant-design:file-unknown-outlined',
+  'ant-design:file-unknown-twotone',
+  'ant-design:file-word-filled',
+  'ant-design:file-word-outlined',
+  'ant-design:file-word-twotone',
+  'ant-design:file-zip-filled',
+  'ant-design:file-zip-outlined',
+  'ant-design:file-zip-twotone',
+  'ant-design:filter-filled',
+  'ant-design:filter-outlined',
+  'ant-design:filter-twotone',
+  'ant-design:fire-filled',
+  'ant-design:fire-outlined',
+  'ant-design:fire-twotone',
+  'ant-design:flag-filled',
+  'ant-design:flag-outlined',
+  'ant-design:flag-twotone',
+  'ant-design:folder-add-filled',
+  'ant-design:folder-add-outlined',
+  'ant-design:folder-add-twotone',
+  'ant-design:folder-filled',
+  'ant-design:folder-open-filled',
+  'ant-design:folder-open-outlined',
+  'ant-design:folder-open-twotone',
+  'ant-design:folder-outlined',
+  'ant-design:folder-twotone',
+  'ant-design:folder-view-outlined',
+  'ant-design:font-colors-outlined',
+  'ant-design:font-size-outlined',
+  'ant-design:fork-outlined',
+  'ant-design:form-outlined',
+  'ant-design:format-painter-filled',
+  'ant-design:format-painter-outlined',
+  'ant-design:forward-filled',
+  'ant-design:forward-outlined',
+  'ant-design:frown-filled',
+  'ant-design:frown-outlined',
+  'ant-design:frown-twotone',
+  'ant-design:fullscreen-exit-outlined',
+  'ant-design:fullscreen-outlined',
+  'ant-design:function-outlined',
+  'ant-design:fund-filled',
+  'ant-design:fund-outlined',
+  'ant-design:fund-projection-screen-outlined',
+  'ant-design:fund-twotone',
+  'ant-design:fund-view-outlined',
+  'ant-design:funnel-plot-filled',
+  'ant-design:funnel-plot-outlined',
+  'ant-design:funnel-plot-twotone',
+  'ant-design:gateway-outlined',
+  'ant-design:gif-outlined',
+  'ant-design:gift-filled',
+  'ant-design:gift-outlined',
+  'ant-design:gift-twotone',
+  'ant-design:github-filled',
+  'ant-design:github-outlined',
+  'ant-design:gitlab-filled',
+  'ant-design:gitlab-outlined',
+  'ant-design:global-outlined',
+  'ant-design:gold-filled',
+  'ant-design:gold-outlined',
+  'ant-design:gold-twotone',
+  'ant-design:golden-filled',
+  'ant-design:google-circle-filled',
+  'ant-design:google-outlined',
+  'ant-design:google-plus-circle-filled',
+  'ant-design:google-plus-outlined',
+  'ant-design:google-plus-square-filled',
+  'ant-design:google-square-filled',
+  'ant-design:group-outlined',
+  'ant-design:hdd-filled',
+  'ant-design:hdd-outlined',
+  'ant-design:hdd-twotone',
+  'ant-design:heart-filled',
+  'ant-design:heart-outlined',
+  'ant-design:heart-twotone',
+  'ant-design:heat-map-outlined',
+  'ant-design:highlight-filled',
+  'ant-design:highlight-outlined',
+  'ant-design:highlight-twotone',
+  'ant-design:history-outlined',
+  'ant-design:holder-outlined',
+  'ant-design:home-filled',
+  'ant-design:home-outlined',
+  'ant-design:home-twotone',
+  'ant-design:hourglass-filled',
+  'ant-design:hourglass-outlined',
+  'ant-design:hourglass-twotone',
+  'ant-design:html5-filled',
+  'ant-design:html5-outlined',
+  'ant-design:html5-twotone',
+  'ant-design:idcard-filled',
+  'ant-design:idcard-outlined',
+  'ant-design:idcard-twotone',
+  'ant-design:ie-circle-filled',
+  'ant-design:ie-outlined',
+  'ant-design:ie-square-filled',
+  'ant-design:import-outlined',
+  'ant-design:inbox-outlined',
+  'ant-design:info-circle-filled',
+  'ant-design:info-circle-outlined',
+  'ant-design:info-circle-twotone',
+  'ant-design:info-outlined',
+  'ant-design:insert-row-above-outlined',
+  'ant-design:insert-row-below-outlined',
+  'ant-design:insert-row-left-outlined',
+  'ant-design:insert-row-right-outlined',
+  'ant-design:instagram-filled',
+  'ant-design:instagram-outlined',
+  'ant-design:insurance-filled',
+  'ant-design:insurance-outlined',
+  'ant-design:insurance-twotone',
+  'ant-design:interaction-filled',
+  'ant-design:interaction-outlined',
+  'ant-design:interaction-twotone',
+  'ant-design:issues-close-outlined',
+  'ant-design:italic-outlined',
+  'ant-design:key-outlined',
+  'ant-design:laptop-outlined',
+  'ant-design:layout-filled',
+  'ant-design:layout-outlined',
+  'ant-design:layout-twotone',
+  'ant-design:left-circle-filled',
+  'ant-design:left-circle-outlined',
+  'ant-design:left-circle-twotone',
+  'ant-design:left-outlined',
+  'ant-design:left-square-filled',
+  'ant-design:left-square-outlined',
+  'ant-design:left-square-twotone',
+  'ant-design:like-filled',
+  'ant-design:like-outlined',
+  'ant-design:like-twotone',
+  'ant-design:line-chart-outlined',
+  'ant-design:line-height-outlined',
+  'ant-design:line-outlined',
+  'ant-design:link-outlined',
+  'ant-design:linkedin-filled',
+  'ant-design:linkedin-outlined',
+  'ant-design:loading-3-quarters-outlined',
+  'ant-design:loading-outlined',
+  'ant-design:lock-filled',
+  'ant-design:lock-outlined',
+  'ant-design:lock-twotone',
+  'ant-design:login-outlined',
+  'ant-design:logout-outlined',
+  'ant-design:mac-command-filled',
+  'ant-design:mac-command-outlined',
+  'ant-design:mail-filled',
+  'ant-design:mail-outlined',
+  'ant-design:mail-twotone',
+  'ant-design:man-outlined',
+  'ant-design:medicine-box-filled',
+  'ant-design:medicine-box-outlined',
+  'ant-design:medicine-box-twotone',
+  'ant-design:medium-circle-filled',
+  'ant-design:medium-outlined',
+  'ant-design:medium-square-filled',
+  'ant-design:medium-workmark-outlined',
+  'ant-design:meh-filled',
+  'ant-design:meh-outlined',
+  'ant-design:meh-twotone',
+  'ant-design:menu-fold-outlined',
+  'ant-design:menu-outlined',
+  'ant-design:menu-unfold-outlined',
+  'ant-design:merge-cells-outlined',
+  'ant-design:message-filled',
+  'ant-design:message-outlined',
+  'ant-design:message-twotone',
+  'ant-design:minus-circle-filled',
+  'ant-design:minus-circle-outlined',
+  'ant-design:minus-circle-twotone',
+  'ant-design:minus-outlined',
+  'ant-design:minus-square-filled',
+  'ant-design:minus-square-outlined',
+  'ant-design:minus-square-twotone',
+  'ant-design:mobile-filled',
+  'ant-design:mobile-outlined',
+  'ant-design:mobile-twotone',
+  'ant-design:money-collect-filled',
+  'ant-design:money-collect-outlined',
+  'ant-design:money-collect-twotone',
+  'ant-design:monitor-outlined',
+  'ant-design:more-outlined',
+  'ant-design:node-collapse-outlined',
+  'ant-design:node-expand-outlined',
+  'ant-design:node-index-outlined',
+  'ant-design:notification-filled',
+  'ant-design:notification-outlined',
+  'ant-design:notification-twotone',
+  'ant-design:number-outlined',
+  'ant-design:one-to-one-outlined',
+  'ant-design:ordered-list-outlined',
+  'ant-design:paper-clip-outlined',
+  'ant-design:partition-outlined',
+  'ant-design:pause-circle-filled',
+  'ant-design:pause-circle-outlined',
+  'ant-design:pause-circle-twotone',
+  'ant-design:pause-outlined',
+  'ant-design:pay-circle-filled',
+  'ant-design:pay-circle-outlined',
+  'ant-design:percentage-outlined',
+  'ant-design:phone-filled',
+  'ant-design:phone-outlined',
+  'ant-design:phone-twotone',
+  'ant-design:pic-center-outlined',
+  'ant-design:pic-left-outlined',
+  'ant-design:pic-right-outlined',
+  'ant-design:picture-filled',
+  'ant-design:picture-outlined',
+  'ant-design:picture-twotone',
+  'ant-design:pie-chart-filled',
+  'ant-design:pie-chart-outlined',
+  'ant-design:pie-chart-twotone',
+  'ant-design:play-circle-filled',
+  'ant-design:play-circle-outlined',
+  'ant-design:play-circle-twotone',
+  'ant-design:play-square-filled',
+  'ant-design:play-square-outlined',
+  'ant-design:play-square-twotone',
+  'ant-design:plus-circle-filled',
+  'ant-design:plus-circle-outlined',
+  'ant-design:plus-circle-twotone',
+  'ant-design:plus-outlined',
+  'ant-design:plus-square-filled',
+  'ant-design:plus-square-outlined',
+  'ant-design:plus-square-twotone',
+  'ant-design:pound-circle-filled',
+  'ant-design:pound-circle-outlined',
+  'ant-design:pound-circle-twotone',
+  'ant-design:pound-outlined',
+  'ant-design:poweroff-outlined',
+  'ant-design:printer-filled',
+  'ant-design:printer-outlined',
+  'ant-design:printer-twotone',
+  'ant-design:profile-filled',
+  'ant-design:profile-outlined',
+  'ant-design:profile-twotone',
+  'ant-design:project-filled',
+  'ant-design:project-outlined',
+  'ant-design:project-twotone',
+  'ant-design:property-safety-filled',
+  'ant-design:property-safety-outlined',
+  'ant-design:property-safety-twotone',
+  'ant-design:pull-request-outlined',
+  'ant-design:pushpin-filled',
+  'ant-design:pushpin-outlined',
+  'ant-design:pushpin-twotone',
+  'ant-design:qq-circle-filled',
+  'ant-design:qq-outlined',
+  'ant-design:qq-square-filled',
+  'ant-design:qrcode-outlined',
+  'ant-design:question-circle-filled',
+  'ant-design:question-circle-outlined',
+  'ant-design:question-circle-twotone',
+  'ant-design:question-outlined',
+  'ant-design:radar-chart-outlined',
+  'ant-design:radius-bottomleft-outlined',
+  'ant-design:radius-bottomright-outlined',
+  'ant-design:radius-setting-outlined',
+  'ant-design:radius-upleft-outlined',
+  'ant-design:radius-upright-outlined',
+  'ant-design:read-filled',
+  'ant-design:read-outlined',
+  'ant-design:reconciliation-filled',
+  'ant-design:reconciliation-outlined',
+  'ant-design:reconciliation-twotone',
+  'ant-design:red-envelope-filled',
+  'ant-design:red-envelope-outlined',
+  'ant-design:red-envelope-twotone',
+  'ant-design:reddit-circle-filled',
+  'ant-design:reddit-outlined',
+  'ant-design:reddit-square-filled',
+  'ant-design:redo-outlined',
+  'ant-design:reload-outlined',
+  'ant-design:rest-filled',
+  'ant-design:rest-outlined',
+  'ant-design:rest-twotone',
+  'ant-design:retweet-outlined',
+  'ant-design:right-circle-filled',
+  'ant-design:right-circle-outlined',
+  'ant-design:right-circle-twotone',
+  'ant-design:right-outlined',
+  'ant-design:right-square-filled',
+  'ant-design:right-square-outlined',
+  'ant-design:right-square-twotone',
+  'ant-design:rise-outlined',
+  'ant-design:robot-filled',
+  'ant-design:robot-outlined',
+  'ant-design:rocket-filled',
+  'ant-design:rocket-outlined',
+  'ant-design:rocket-twotone',
+  'ant-design:rollback-outlined',
+  'ant-design:rotate-left-outlined',
+  'ant-design:rotate-right-outlined',
+  'ant-design:safety-certificate-filled',
+  'ant-design:safety-certificate-outlined',
+  'ant-design:safety-certificate-twotone',
+  'ant-design:safety-outlined',
+  'ant-design:save-filled',
+  'ant-design:save-outlined',
+  'ant-design:save-twotone',
+  'ant-design:scan-outlined',
+  'ant-design:schedule-filled',
+  'ant-design:schedule-outlined',
+  'ant-design:schedule-twotone',
+  'ant-design:scissor-outlined',
+  'ant-design:search-outlined',
+  'ant-design:security-scan-filled',
+  'ant-design:security-scan-outlined',
+  'ant-design:security-scan-twotone',
+  'ant-design:select-outlined',
+  'ant-design:send-outlined',
+  'ant-design:setting-filled',
+  'ant-design:setting-outlined',
+  'ant-design:setting-twotone',
+  'ant-design:shake-outlined',
+  'ant-design:share-alt-outlined',
+  'ant-design:shop-filled',
+  'ant-design:shop-outlined',
+  'ant-design:shop-twotone',
+  'ant-design:shopping-cart-outlined',
+  'ant-design:shopping-filled',
+  'ant-design:shopping-outlined',
+  'ant-design:shopping-twotone',
+  'ant-design:shrink-outlined',
+  'ant-design:signal-filled',
+  'ant-design:sisternode-outlined',
+  'ant-design:sketch-circle-filled',
+  'ant-design:sketch-outlined',
+  'ant-design:sketch-square-filled',
+  'ant-design:skin-filled',
+  'ant-design:skin-outlined',
+  'ant-design:skin-twotone',
+  'ant-design:skype-filled',
+  'ant-design:skype-outlined',
+  'ant-design:slack-circle-filled',
+  'ant-design:slack-outlined',
+  'ant-design:slack-square-filled',
+  'ant-design:slack-square-outlined',
+  'ant-design:sliders-filled',
+  'ant-design:sliders-outlined',
+  'ant-design:sliders-twotone',
+  'ant-design:small-dash-outlined',
+  'ant-design:smile-filled',
+  'ant-design:smile-outlined',
+  'ant-design:smile-twotone',
+  'ant-design:snippets-filled',
+  'ant-design:snippets-outlined',
+  'ant-design:snippets-twotone',
+  'ant-design:solution-outlined',
+  'ant-design:sort-ascending-outlined',
+  'ant-design:sort-descending-outlined',
+  'ant-design:sound-filled',
+  'ant-design:sound-outlined',
+  'ant-design:sound-twotone',
+  'ant-design:split-cells-outlined',
+  'ant-design:star-filled',
+  'ant-design:star-outlined',
+  'ant-design:star-twotone',
+  'ant-design:step-backward-filled',
+  'ant-design:step-backward-outlined',
+  'ant-design:step-forward-filled',
+  'ant-design:step-forward-outlined',
+  'ant-design:stock-outlined',
+  'ant-design:stop-filled',
+  'ant-design:stop-outlined',
+  'ant-design:stop-twotone',
+  'ant-design:strikethrough-outlined',
+  'ant-design:subnode-outlined',
+  'ant-design:swap-left-outlined',
+  'ant-design:swap-outlined',
+  'ant-design:swap-right-outlined',
+  'ant-design:switcher-filled',
+  'ant-design:switcher-outlined',
+  'ant-design:switcher-twotone',
+  'ant-design:sync-outlined',
+  'ant-design:table-outlined',
+  'ant-design:tablet-filled',
+  'ant-design:tablet-outlined',
+  'ant-design:tablet-twotone',
+  'ant-design:tag-filled',
+  'ant-design:tag-outlined',
+  'ant-design:tag-twotone',
+  'ant-design:tags-filled',
+  'ant-design:tags-outlined',
+  'ant-design:tags-twotone',
+  'ant-design:taobao-circle-filled',
+  'ant-design:taobao-circle-outlined',
+  'ant-design:taobao-outlined',
+  'ant-design:taobao-square-filled',
+  'ant-design:team-outlined',
+  'ant-design:thunderbolt-filled',
+  'ant-design:thunderbolt-outlined',
+  'ant-design:thunderbolt-twotone',
+  'ant-design:to-top-outlined',
+  'ant-design:tool-filled',
+  'ant-design:tool-outlined',
+  'ant-design:tool-twotone',
+  'ant-design:trademark-circle-filled',
+  'ant-design:trademark-circle-outlined',
+  'ant-design:trademark-circle-twotone',
+  'ant-design:trademark-outlined',
+  'ant-design:transaction-outlined',
+  'ant-design:translation-outlined',
+  'ant-design:trophy-filled',
+  'ant-design:trophy-outlined',
+  'ant-design:trophy-twotone',
+  'ant-design:twitter-circle-filled',
+  'ant-design:twitter-outlined',
+  'ant-design:twitter-square-filled',
+  'ant-design:underline-outlined',
+  'ant-design:undo-outlined',
+  'ant-design:ungroup-outlined',
+  'ant-design:unlock-filled',
+  'ant-design:unlock-outlined',
+  'ant-design:unlock-twotone',
+  'ant-design:unordered-list-outlined',
+  'ant-design:up-circle-filled',
+  'ant-design:up-circle-outlined',
+  'ant-design:up-circle-twotone',
+  'ant-design:up-outlined',
+  'ant-design:up-square-filled',
+  'ant-design:up-square-outlined',
+  'ant-design:up-square-twotone',
+  'ant-design:upload-outlined',
+  'ant-design:usb-filled',
+  'ant-design:usb-outlined',
+  'ant-design:usb-twotone',
+  'ant-design:user-add-outlined',
+  'ant-design:user-delete-outlined',
+  'ant-design:user-outlined',
+  'ant-design:user-switch-outlined',
+  'ant-design:usergroup-add-outlined',
+  'ant-design:usergroup-delete-outlined',
+  'ant-design:verified-outlined',
+  'ant-design:vertical-align-bottom-outlined',
+  'ant-design:vertical-align-middle-outlined',
+  'ant-design:vertical-align-top-outlined',
+  'ant-design:vertical-left-outlined',
+  'ant-design:vertical-right-outlined',
+  'ant-design:video-camera-add-outlined',
+  'ant-design:video-camera-filled',
+  'ant-design:video-camera-outlined',
+  'ant-design:video-camera-twotone',
+  'ant-design:wallet-filled',
+  'ant-design:wallet-outlined',
+  'ant-design:wallet-twotone',
+  'ant-design:warning-filled',
+  'ant-design:warning-outlined',
+  'ant-design:warning-twotone',
+  'ant-design:wechat-filled',
+  'ant-design:wechat-outlined',
+  'ant-design:weibo-circle-filled',
+  'ant-design:weibo-circle-outlined',
+  'ant-design:weibo-outlined',
+  'ant-design:weibo-square-filled',
+  'ant-design:weibo-square-outlined',
+  'ant-design:whats-app-outlined',
+  'ant-design:wifi-outlined',
+  'ant-design:windows-filled',
+  'ant-design:windows-outlined',
+  'ant-design:woman-outlined',
+  'ant-design:yahoo-filled',
+  'ant-design:yahoo-outlined',
+  'ant-design:youtube-filled',
+  'ant-design:youtube-outlined',
+  'ant-design:yuque-filled',
+  'ant-design:yuque-outlined',
+  'ant-design:zhihu-circle-filled',
+  'ant-design:zhihu-outlined',
+  'ant-design:zhihu-square-filled',
+  'ant-design:zoom-in-outlined',
+  'ant-design:zoom-out-outlined',
+];
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
new file mode 100644
index 0000000..01e7d23
--- /dev/null
+++ b/src/components/Icon/index.ts
@@ -0,0 +1,7 @@
+import Icon from './src/Icon.vue';
+import SvgIcon from './src/SvgIcon.vue';
+import IconPicker from './src/IconPicker.vue';
+
+export { Icon, IconPicker, SvgIcon };
+
+export default Icon;
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
new file mode 100644
index 0000000..075c57a
--- /dev/null
+++ b/src/components/Icon/src/Icon.vue
@@ -0,0 +1,116 @@
+<template>
+  <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class, 'anticon']" :spin="spin" />
+  <span v-else ref="elRef" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']" :style="getWrapStyle"></span>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue';
+  import SvgIcon from './SvgIcon.vue';
+  import { isString } from '/@/utils/is';
+  import { propTypes } from '/@/utils/propTypes';
+  const SVG_END_WITH_FLAG = '|svg';
+  export default defineComponent({
+    name: 'Icon',
+    components: { SvgIcon },
+    props: {
+      // icon name
+      icon: propTypes.string,
+      // icon color
+      color: propTypes.string,
+      // icon size
+      size: {
+        type: [String, Number] as PropType<string | number>,
+        default: 16,
+      },
+      spin: propTypes.bool.def(false),
+      prefix: propTypes.string.def(''),
+    },
+    setup(props) {
+      const elRef = ref<ElRef>(null);
+
+      const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
+      const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
+      const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
+
+      const update = async () => {
+        if (unref(isSvgIcon)) return;
+
+        const el = unref(elRef);
+        if (!el) return;
+
+        await nextTick();
+        const icon = unref(getIconRef);
+        if (!icon) return;
+        // update-begin--author:liaozhiyang---date:20260304---for:【QQYUN-14802】新增unplugin-icons插件，及icon支持online和local两种模式
+        try {
+          let svg: SVGElement | null = null;
+          if (import.meta.env.VITE_GLOB_ICONIFY_USE_TYPE === 'local') {
+            // 使用本地 purge-icons 图标（离线，图标已打包进产物）
+            const iconifyModule = await import('@purge-icons/generated');
+            const Iconify = iconifyModule.default;
+            svg = Iconify.renderSVG(icon, {});
+          } else {
+            // 使用 @iconify/iconify 在线按需加载
+            const iconifyModule = await import('@iconify/iconify');
+            const Iconify = iconifyModule.default;
+            svg = Iconify.renderSVG(icon, {});
+          }
+          if (svg) {
+            el.textContent = '';
+            el.appendChild(svg);
+          } else {
+            // 如果图标不存在，显示占位符
+            const span = document.createElement('span');
+            span.className = 'iconify';
+            span.dataset.icon = icon;
+            el.textContent = '';
+            el.appendChild(span);
+          }
+        } catch (err) {
+          console.error('Failed to render icon:', icon, err);
+        }
+        // update-end--author:liaozhiyang---date:20260304---for:【QQYUN-14802】新增unplugin-icons插件，及icon支持online和local两种模式
+      };
+
+      const getWrapStyle = computed((): CSSProperties => {
+        const { size, color } = props;
+        let fs = size;
+        if (isString(size)) {
+          fs = parseInt(size, 10);
+        }
+
+        return {
+          fontSize: `${fs}px`,
+          color: color,
+          display: 'inline-flex',
+        };
+      });
+
+      watch(() => props.icon, update, { flush: 'post' });
+
+      onMounted(update);
+
+      return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
+    },
+  });
+</script>
+<style lang="less">
+  .app-iconify {
+    display: inline-block;
+    // vertical-align: middle;
+
+    &-spin {
+      svg {
+        animation: loadingCircle 1s infinite linear;
+      }
+    }
+  }
+
+  span.iconify {
+    display: block;
+    min-width: 1em;
+    min-height: 1em;
+    background-color: @iconify-bg-color;
+    border-radius: 100%;
+  }
+</style>
diff --git a/src/components/Icon/src/IconList.vue b/src/components/Icon/src/IconList.vue
new file mode 100644
index 0000000..e4ecb07
--- /dev/null
+++ b/src/components/Icon/src/IconList.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="flex justify-between ml-4 mr-5 mb-1" v-if="isSearch">
+    <a-input :placeholder="t('component.icon.search')" v-model:value="searchIconValue" @change="debounceHandleSearchChange" allowClear />
+  </div>
+  <div v-if="getPaginationList.length > 0">
+    <div class="overflow-auto">
+      <ul class="px-2 icon-list" style="padding-right: 0">
+        <li
+          v-for="icon in getPaginationList"
+          :key="icon"
+          :class="currentSelect === icon ? 'icon-border' : ''"
+          class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"
+          @click="handleClick(icon)"
+          :title="icon"
+        >
+          <SvgIcon v-if="isSvgMode" :name="icon" />
+          <Icon :icon="icon" v-else />
+        </li>
+      </ul>
+    </div>
+    <div class="flex py-2 items-center justify-content-right mr-10 mt-5" v-if="getTotal >= pageSize && isPage">
+      <Pagination
+        showLessItems
+        v-model:current="current"
+        :page-size-options="pageSizeOptions"
+        size="small"
+        v-model:pageSize="pageSize"
+        v-model:total="getTotal"
+        @change="handlePageChange"
+      />
+    </div>
+  </div>
+  <template v-else
+    ><div class="p-5"><empty /></div>
+  </template>
+</template>
+
+<script lang="ts" name="icon-list">
+  import SvgIcon from '@/components/Icon/src/SvgIcon.vue';
+  import Icon from '@/components/Icon/src/Icon.vue';
+  import { defineComponent, ref, unref, watchEffect} from 'vue';
+  import { useDebounceFn } from '@vueuse/core';
+  import { usePagination } from '@/hooks/web/usePagination';
+  import { propTypes } from '@/utils/propTypes';
+  import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Empty, Pagination } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      SvgIcon,
+      Icon,
+      Empty,
+      Pagination,
+    },
+    emits: ['update:value'],
+    props: {
+      currentList: propTypes.any.def([]),
+      clearSelect: propTypes.bool.def(false),
+      copy: propTypes.bool.def(false),
+      isSvgMode: propTypes.bool.def(false),
+      isPage: propTypes.bool.def(false),
+      isSearch: propTypes.bool.def(false),
+      value: propTypes.string.def(''),
+    },
+    setup(props, { emit }) {
+      //选中的值
+      const currentSelect = ref('');
+      //页数
+      const current = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(140);
+      //下拉分页显示
+      const pageSizeOptions = ref<any>(['10', '20', '50', '100', '140']);
+      //下拉搜索值
+      const searchIconValue = ref<string>('');
+      const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
+
+      const currentList = ref<any>(props.currentList);
+      const { getPaginationList, getTotal, setCurrentPage, setPageSize } = usePagination(currentList, pageSize.value);
+      const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
+      const { t } = useI18n();
+      const { createMessage } = useMessage();
+      /**
+       * 搜索
+       * @param e
+       */
+      function handleSearchChange(e: ChangeEvent) {
+        const value = e.target.value;
+        console.log("value::::",value)
+        // 代码逻辑说明: 【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效------------
+        setCurrentPage(1);
+        current.value = 1;
+        if (!value) {
+          currentList.value = props.currentList;
+          return;
+        }
+        currentList.value = props.currentList.filter((item) => item.includes(value));
+      }
+
+      /**
+       * 图标点击重置页数
+       */
+      function currentSelectClick() {
+        setCurrentPage(1);
+        setPageSize(140);
+        current.value = 1;
+        pageSize.value = 140;
+        currentList.value = props.currentList;
+        searchIconValue.value = '';
+      }
+
+      function handlePageChange(page: number, size: number) {
+        // 代码逻辑说明: 【issues/4947】菜单编辑页面菜单图标选择模板，每页显示数量切换无效------------
+        current.value = page;
+        pageSize.value = size;
+        setPageSize(size);
+        setCurrentPage(page);
+      }
+
+      /**
+       * 图标点击事件
+       * @param icon
+       */
+      function handleClick(icon: string) {
+        if (props.clearSelect === true) {
+          if (currentSelect.value === icon) {
+            currentSelect.value = '';
+          } else {
+            currentSelect.value = icon;
+          }
+        } else {
+          currentSelect.value = icon;
+          if (props.copy) {
+            clipboardRef.value = icon;
+            if (unref(isSuccessRef)) {
+              createMessage.success(t('component.icon.copy'));
+            }
+          }
+        }
+        emit('update:value', currentSelect.value);
+      }
+
+      /**
+       * 获取图标
+       */
+      function getIcon() {
+        return currentSelect.value;
+      }
+
+      watchEffect(() => {
+        currentSelect.value = props.value;
+      });
+
+      return {
+        searchIconValue,
+        debounceHandleSearchChange,
+        getTotal,
+        getPaginationList,
+        handlePageChange,
+        handleClick,
+        currentSelect,
+        t,
+        pageSize,
+        pageSizeOptions,
+        current,
+        getIcon,
+        currentSelectClick,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  ul li {
+    width: 32px;
+    height: 32px;
+    float: left;
+    display: flex;
+    margin: 6px;
+  }
+  ul span {
+    font-size: 1.5rem !important;
+    padding: 0.2rem;
+    margin: 0.3rem;
+  }
+  .icon-border {
+    border: 1px solid rgba(24, 144, 255) !important;
+  }
+  .justify-content-right {
+    justify-content: right;
+  }
+</style>
diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue
new file mode 100644
index 0000000..d91c463
--- /dev/null
+++ b/src/components/Icon/src/IconPicker.vue
@@ -0,0 +1,245 @@
+<template>
+  <a-input
+      :class="prefixCls"
+      :value="currentSelect"
+      readOnly
+      :disabled="disabled"
+      :placeholder="t('component.icon.placeholder')"
+      :style="{ width }"
+      @click="currentSelectClick"
+  >
+    <template #suffix v-if="allowClear && currentSelect">
+      <CloseCircleFilled class="menu-current-close" @click.stop="clearCurrentSelect" />
+    </template>
+    <template #addonAfter>
+      <span class="cursor-pointer px-2 py-1 flex items-center" v-if="isSvgMode && currentSelect">
+        <SvgIcon :name="currentSelect" @click="currentSelectClick"/>
+      </span>
+      <Icon v-else :icon="currentSelect || 'ion:apps-outline'" :class="['px-2 py-1', {
+          'cursor-pointer': !disabled,
+          'cursor-not-allowed': disabled,
+        }]"
+        @click="currentSelectClick"
+      />
+    </template>
+  </a-input>
+  <a-modal :bodyStyle="{ padding: '24px', paddingTop: mode === 'svg' ? '48px' : '24px'}" v-bind="$attrs" v-model:open="iconOpen" :keyboard="false" :width="800" @ok="handleOk" :ok-text="t('common.okText')" :cancel-text="t('common.cancelText')">
+    <template v-if="mode === 'iconify'">
+      <a-tabs style="padding-left: 15px;padding-right: 15px">
+        <a-tab-pane tab="方向性图标" key="1">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="directionIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="指示性图标" key="2">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="suggestionIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="编辑类图标" key="3">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="editIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="数据类图标" key="4">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="dataIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="网站通用图标" key="5">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="webIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="品牌和标识" key="6">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-svg-mode="isSvgMode" :current-list="logoIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+        <a-tab-pane tab="其他" key="7">
+          <a-form-item-rest>
+            <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-page="true" :is-search="true" :is-svg-mode="isSvgMode" :current-list="otherIcons" v-model:value="selectIcon" />
+          </a-form-item-rest>
+        </a-tab-pane>
+      </a-tabs>
+    </template>
+    <template v-else>
+      <icon-list ref="iconListRef" :clear-select="clearSelect" :copy="copy" :is-page="true" :is-search="true" :is-svg-mode="isSvgMode" :current-list="otherIcons" v-model:value="selectIcon" />
+    </template>
+  </a-modal>
+</template>
+<script lang="ts" setup name="icon-picker">
+  import { ref, watchEffect, watch, unref, onMounted } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { Input } from 'ant-design-vue';
+  import Icon from './Icon.vue';
+  import SvgIcon from './SvgIcon.vue';
+
+  import iconsData from '../data/icons.data';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import svgIcons from 'virtual:svg-icons-names';
+  import IconList from "./IconList.vue";
+  import { CloseCircleFilled } from '@ant-design/icons-vue';
+  // 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
+  const AInput = Input;
+
+  function getIcons() {
+    const data = iconsData as any;
+    const prefix: string = data?.prefix ?? '';
+    let result: string[] = [];
+    if (prefix) {
+      result = (data?.icons ?? []).map((item) => `${prefix}:${item}`);
+    } else if (Array.isArray(iconsData)) {
+      result = iconsData as string[];
+    }
+    return result;
+  }
+
+  function getSvgIcons() {
+    return svgIcons.map((icon) => icon.replace('icon-', ''));
+  }
+
+  const props = defineProps({
+    value: propTypes.string,
+    width: propTypes.string.def('100%'),
+    copy: propTypes.bool.def(false),
+    mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
+    disabled: propTypes.bool.def(false),
+    clearSelect: propTypes.bool.def(false),
+    allowClear: propTypes.bool.def(false),
+    iconPrefixSave: propTypes.bool.def(true),
+  });
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const isSvgMode = props.mode === 'svg';
+  const icons = isSvgMode ? getSvgIcons() : getIcons();
+
+  const selectIcon = ref('');
+  const currentSelect = ref('');
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('icon-picker');
+
+  // 代码逻辑说明: 【QQYUN-8924】图标库选择组件不如vue2的方便---
+  const iconOpen = ref<boolean>(false);
+  //方向性图标
+  const directionIcons = ['ant-design:step-backward-outlined', 'ant-design:step-forward-outlined', 'ant-design:fast-backward-outlined', 'ant-design:fast-forward-outlined', 'ant-design:shrink-outlined', 'ant-design:arrows-alt-outlined', 'ant-design:down-outlined', 'ant-design:up-outlined', 'ant-design:left-outlined', 'ant-design:right-outlined', 'ant-design:caret-up-outlined', 'ant-design:caret-down-outlined', 'ant-design:caret-left-outlined', 'ant-design:caret-right-outlined', 'ant-design:up-circle-outlined', 'ant-design:down-circle-outlined', 'ant-design:left-circle-outlined', 'ant-design:right-circle-outlined',  'ant-design:double-right-outlined', 'ant-design:double-left-outlined', 'ant-design:vertical-left-outlined', 'ant-design:vertical-right-outlined', 'ant-design:forward-outlined', 'ant-design:backward-outlined', 'ant-design:rollback-outlined', 'ant-design:enter-outlined', 'ant-design:retweet-outlined', 'ant-design:swap-outlined', 'ant-design:swap-left-outlined', 'ant-design:swap-right-outlined', 'ant-design:arrow-up-outlined', 'ant-design:arrow-down-outlined', 'ant-design:arrow-left-outlined', 'ant-design:arrow-right-outlined', 'ant-design:play-circle-outlined', 'ant-design:up-square-outlined', 'ant-design:down-square-outlined', 'ant-design:left-square-outlined', 'ant-design:right-square-outlined', 'ant-design:login-outlined', 'ant-design:logout-outlined', 'ant-design:menu-fold-outlined', 'ant-design:menu-unfold-outlined', 'ant-design:border-bottom-outlined', 'ant-design:border-horizontal-outlined', 'ant-design:border-inner-outlined', 'ant-design:border-left-outlined', 'ant-design:border-right-outlined', 'ant-design:border-top-outlined', 'ant-design:border-verticle-outlined', 'ant-design:pic-center-outlined', 'ant-design:pic-left-outlined', 'ant-design:pic-right-outlined', 'ant-design:radius-bottomleft-outlined', 'ant-design:radius-bottomright-outlined', 'ant-design:radius-upleft-outlined', 'ant-design:radius-upright-outlined', 'ant-design:fullscreen-outlined', 'ant-design:fullscreen-exit-outlined']
+  //提示建议性图标
+  const suggestionIcons = ['ant-design:question-outlined', 'ant-design:question-circle-outlined', 'ant-design:plus-outlined', 'ant-design:plus-circle-outlined', 'ant-design:pause-outlined', 'ant-design:pause-circle-outlined', 'ant-design:minus-outlined', 'ant-design:minus-circle-outlined', 'ant-design:plus-square-outlined', 'ant-design:minus-square-outlined', 'ant-design:info-outlined', 'ant-design:info-circle-outlined', 'ant-design:exclamation-outlined', 'ant-design:exclamation-circle-outlined', 'ant-design:close-outlined', 'ant-design:close-circle-outlined', 'ant-design:close-square-outlined', 'ant-design:check-outlined', 'ant-design:check-circle-outlined', 'ant-design:check-square-outlined', 'ant-design:clock-circle-outlined', 'ant-design:warning-outlined', 'ant-design:issues-close-outlined', 'ant-design:stop-outlined']
+  //编辑类图标
+  const editIcons = ['ant-design:edit-outlined', 'ant-design:form-outlined', 'ant-design:copy-outlined', 'ant-design:scissor-outlined', 'ant-design:delete-outlined', 'ant-design:snippets-outlined', 'ant-design:diff-outlined', 'ant-design:highlight-outlined', 'ant-design:align-center-outlined', 'ant-design:align-left-outlined', 'ant-design:align-right-outlined', 'ant-design:bg-colors-outlined', 'ant-design:bold-outlined', 'ant-design:italic-outlined', 'ant-design:underline-outlined', 'ant-design:strikethrough-outlined', 'ant-design:redo-outlined', 'ant-design:undo-outlined', 'ant-design:zoom-in-outlined', 'ant-design:zoom-out-outlined', 'ant-design:font-colors-outlined', 'ant-design:font-size-outlined', 'ant-design:line-height-outlined', 'ant-design:dash-outlined', 'ant-design:small-dash-outlined', 'ant-design:sort-ascending-outlined', 'ant-design:sort-descending-outlined', 'ant-design:drag-outlined', 'ant-design:ordered-list-outlined', 'ant-design:radius-setting-outlined']
+  //数据类图标
+  const dataIcons = ['ant-design:area-chart-outlined', 'ant-design:pie-chart-outlined', 'ant-design:bar-chart-outlined', 'ant-design:dot-chart-outlined', 'ant-design:line-chart-outlined', 'ant-design:radar-chart-outlined', 'ant-design:heat-map-outlined', 'ant-design:fall-outlined', 'ant-design:rise-outlined', 'ant-design:stock-outlined', 'ant-design:box-plot-outlined', 'ant-design:fund-outlined', 'ant-design:sliders-outlined']
+  //站通用图标
+  const webIcons = ['ant-design:lock-outlined', 'ant-design:unlock-outlined', 'ant-design:bars-outlined', 'ant-design:book-outlined', 'ant-design:calendar-outlined', 'ant-design:cloud-outlined', 'ant-design:cloud-download-outlined', 'ant-design:code-outlined', 'ant-design:copy-outlined', 'ant-design:credit-card-outlined', 'ant-design:delete-outlined', 'ant-design:desktop-outlined', 'ant-design:download-outlined', 'ant-design:ellipsis-outlined', 'ant-design:file-outlined', 'ant-design:file-text-outlined', 'ant-design:file-unknown-outlined', 'ant-design:file-pdf-outlined', 'ant-design:file-word-outlined', 'ant-design:file-excel-outlined', 'ant-design:file-jpg-outlined', 'ant-design:file-ppt-outlined', 'ant-design:file-markdown-outlined', 'ant-design:file-add-outlined', 'ant-design:folder-outlined', 'ant-design:folder-open-outlined', 'ant-design:folder-add-outlined', 'ant-design:hdd-outlined', 'ant-design:frown-outlined', 'ant-design:meh-outlined', 'ant-design:smile-outlined', 'ant-design:inbox-outlined', 'ant-design:laptop-outlined', 'ant-design:appstore-outlined', 'ant-design:link-outlined', 'ant-design:mail-outlined', 'ant-design:mobile-outlined', 'ant-design:notification-outlined', 'ant-design:paper-clip-outlined', 'ant-design:picture-outlined', 'ant-design:poweroff-outlined', 'ant-design:reload-outlined', 'ant-design:search-outlined', 'ant-design:setting-outlined', 'ant-design:share-alt-outlined', 'ant-design:shopping-cart-outlined', 'ant-design:tablet-outlined', 'ant-design:tag-outlined', 'ant-design:tags-outlined', 'ant-design:to-top-outlined', 'ant-design:upload-outlined', 'ant-design:user-outlined', 'ant-design:video-camera-outlined', 'ant-design:home-outlined', 'ant-design:loading-outlined', 'ant-design:loading-3-quarters-outlined', 'ant-design:cloud-upload-outlined', 'ant-design:star-outlined', 'ant-design:heart-outlined', 'ant-design:environment-outlined', 'ant-design:eye-outlined', 'ant-design:camera-outlined', 'ant-design:save-outlined', 'ant-design:team-outlined', 'ant-design:solution-outlined', 'ant-design:phone-outlined', 'ant-design:filter-outlined', 'ant-design:exception-outlined', 'ant-design:export-outlined', 'ant-design:customer-service-outlined', 'ant-design:qrcode-outlined', 'ant-design:scan-outlined', 'ant-design:like-outlined', 'ant-design:dislike-outlined', 'ant-design:message-outlined', 'ant-design:pay-circle-outlined', 'ant-design:calculator-outlined', 'ant-design:pushpin-outlined', 'ant-design:bulb-outlined', 'ant-design:select-outlined', 'ant-design:switcher-outlined', 'ant-design:rocket-outlined', 'ant-design:bell-outlined', 'ant-design:disconnect-outlined', 'ant-design:database-outlined', 'ant-design:compass-outlined', 'ant-design:barcode-outlined', 'ant-design:hourglass-outlined', 'ant-design:key-outlined', 'ant-design:flag-outlined', 'ant-design:layout-outlined', 'ant-design:printer-outlined', 'ant-design:sound-outlined', 'ant-design:usb-outlined', 'ant-design:skin-outlined', 'ant-design:tool-outlined', 'ant-design:sync-outlined', 'ant-design:wifi-outlined', 'ant-design:car-outlined', 'ant-design:schedule-outlined', 'ant-design:user-add-outlined', 'ant-design:user-delete-outlined', 'ant-design:usergroup-add-outlined', 'ant-design:usergroup-delete-outlined', 'ant-design:man-outlined', 'ant-design:woman-outlined', 'ant-design:shop-outlined', 'ant-design:gift-outlined', 'ant-design:idcard-outlined', 'ant-design:medicine-box-outlined', 'ant-design:red-envelope-outlined', 'ant-design:coffee-outlined', 'ant-design:copyright-outlined', 'ant-design:trademark-outlined', 'ant-design:safety-outlined', 'ant-design:wallet-outlined', 'ant-design:bank-outlined', 'ant-design:trophy-outlined', 'ant-design:contacts-outlined', 'ant-design:global-outlined', 'ant-design:shake-outlined', 'ant-design:api-outlined', 'ant-design:fork-outlined', 'ant-design:dashboard-outlined', 'ant-design:table-outlined', 'ant-design:profile-outlined', 'ant-design:alert-outlined', 'ant-design:audit-outlined', 'ant-design:branches-outlined', 'ant-design:build-outlined', 'ant-design:border-outlined', 'ant-design:crown-outlined', 'ant-design:experiment-outlined', 'ant-design:fire-outlined', 'ant-design:money-collect-outlined', 'ant-design:property-safety-outlined', 'ant-design:read-outlined', 'ant-design:reconciliation-outlined', 'ant-design:rest-outlined', 'ant-design:security-scan-outlined', 'ant-design:insurance-outlined', 'ant-design:interation-outlined', 'ant-design:safety-certificate-outlined', 'ant-design:project-outlined', 'ant-design:thunderbolt-outlined', 'ant-design:block-outlined', 'ant-design:cluster-outlined', 'ant-design:deployment-unit-outlined', 'ant-design:dollar-outlined', 'ant-design:euro-outlined', 'ant-design:pound-outlined', 'ant-design:file-done-outlined', 'ant-design:file-exclamation-outlined', 'ant-design:file-protect-outlined', 'ant-design:file-search-outlined', 'ant-design:file-sync-outlined', 'ant-design:gateway-outlined', 'ant-design:gold-outlined', 'ant-design:robot-outlined', 'ant-design:shopping-outlined']
+  //品牌和标识网
+  const logoIcons = ['ant-design:android-outlined', 'ant-design:apple-outlined', 'ant-design:windows-outlined', 'ant-design:ie-outlined', 'ant-design:chrome-outlined', 'ant-design:github-outlined', 'ant-design:aliwangwang-outlined', 'ant-design:dingding-outlined', 'ant-design:weibo-square-outlined', 'ant-design:weibo-circle-outlined', 'ant-design:taobao-circle-outlined', 'ant-design:html5-outlined', 'ant-design:weibo-outlined', 'ant-design:twitter-outlined', 'ant-design:wechat-outlined', 'ant-design:youtube-outlined', 'ant-design:alipay-circle-outlined', 'ant-design:taobao-outlined', 'ant-design:skype-outlined', 'ant-design:qq-outlined', 'ant-design:medium-workmark-outlined', 'ant-design:gitlab-outlined', 'ant-design:medium-outlined', 'ant-design:linkedin-outlined', 'ant-design:google-plus-outlined', 'ant-design:dropbox-outlined', 'ant-design:facebook-outlined', 'ant-design:codepen-outlined', 'ant-design:amazon-outlined', 'ant-design:google-outlined', 'ant-design:codepen-circle-outlined', 'ant-design:alipay-outlined', 'ant-design:ant-design-outlined', 'ant-design:aliyun-outlined', 'ant-design:zhihu-outlined', 'ant-design:slack-outlined', 'ant-design:slack-square-outlined', 'ant-design:behance-outlined', 'ant-design:behance-square-outlined', 'ant-design:dribbble-outlined', 'ant-design:dribbble-square-outlined', 'ant-design:instagram-outlined', 'ant-design:yuque-outlined', 'ant-design:alibaba-outlined', 'ant-design:yahoo-outlined']
+  //其他
+  const otherIcons = ref<any>([]);
+
+  watchEffect(() => {
+    // 代码逻辑说明: 【TV360X-136】按钮图标改成图标组件选择
+    let value = props.value;
+    if (!props.iconPrefixSave && value) {
+      value = `ant-design:${value}`;
+    }
+    currentSelect.value = value;
+  });
+
+  watch(
+    () => currentSelect.value,
+    (v) => {
+      // 代码逻辑说明: 【TV360X-136】按钮图标改成图标组件选择
+      let value = v;
+      if (!props.iconPrefixSave && value) {
+        value = value.split('ant-design:')[1];
+      }
+      emit('update:value', value);
+      return emit('change', value);
+    }
+  );
+
+
+  /**
+   * 图标点击重置页数
+   */
+  function currentSelectClick() {
+    if (props.disabled) {
+      return
+    }
+    iconOpen.value = true;
+    setTimeout(()=>{
+      iconListRef.value.currentSelectClick();
+    },100)
+  }
+
+  function initOtherIcon() {
+    otherIcons.value = icons.filter(item => {
+      if(directionIcons.indexOf(item) === -1 && suggestionIcons.indexOf(item) === -1 && editIcons.indexOf(item) === -1
+         && dataIcons.indexOf(item) === -1 && webIcons.indexOf(item) === -1 && logoIcons.indexOf(item) === -1) {
+          return true;
+      }
+    })
+  }
+
+  const iconListRef = ref();
+
+  /**
+   * 图标弹窗确定事件
+   */
+  function handleOk() {
+    currentSelect.value = selectIcon.value;
+    iconOpen.value = false;
+  }
+
+  /**
+   * 清除当前选择图标
+   */
+  function clearCurrentSelect(){
+    currentSelect.value = '';
+  }
+  onMounted(()=>{
+    //初始化加载图标
+    initOtherIcon();
+  })
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-icon-picker';
+
+  .@{prefix-cls} {
+
+    // 输入框手势图标
+    .ant-input:not([disabled]) {
+      cursor: pointer;
+    }
+
+    .ant-input-group-addon {
+      padding: 0;
+    }
+
+    &-popover {
+      width: 400px;
+
+      .ant-popover-inner-content {
+        padding: 0;
+      }
+
+      .scrollbar {
+        height: 220px;
+      }
+    }
+    //图标样式
+    .menu-current-close {
+      color: #cccccc;
+    }
+  }
+  //图标样式兼容暗黑模式
+  [data-theme='dark'] .@{prefix-cls} {
+    .menu-current-close {
+      color: #4f4f4f;
+      font-size: 12px;
+    }
+  }
+</style>
diff --git a/src/components/Icon/src/SvgIcon.vue b/src/components/Icon/src/SvgIcon.vue
new file mode 100644
index 0000000..20bfcca
--- /dev/null
+++ b/src/components/Icon/src/SvgIcon.vue
@@ -0,0 +1,61 @@
+<template>
+  <svg :class="[prefixCls, $attrs.class, spin && 'svg-icon-spin']" :style="getStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'SvgIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      size: {
+        type: [Number, String],
+        default: 16,
+      },
+      spin: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('svg-icon');
+      const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+
+      const getStyle = computed((): CSSProperties => {
+        const { size } = props;
+        let s = `${size}`;
+        s = `${s.replace('px', '')}px`;
+        return {
+          width: s,
+          height: s,
+        };
+      });
+      return { symbolId, prefixCls, getStyle };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-svg-icon';
+
+  .@{prefix-cls} {
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: -0.15em;
+    fill: currentColor;
+  }
+
+  .svg-icon-spin {
+    animation: loadingCircle 1s infinite linear;
+  }
+</style>
diff --git a/src/components/InFilter/CascaderPcaInFilter.vue b/src/components/InFilter/CascaderPcaInFilter.vue
new file mode 100644
index 0000000..a3786bd
--- /dev/null
+++ b/src/components/InFilter/CascaderPcaInFilter.vue
@@ -0,0 +1,39 @@
+<!-- 省市县选择组件，在筛选中的用法 -->
+<template>
+  <a-space :class="[prefixCls]" direction="vertical">
+  </a-space>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: 'CascaderPcaInFilter',
+  inheritAttrs: false,
+})
+</script>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="less">
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-j-cascader-pca-in-filter';
+
+.@{prefix-cls} {
+  width: 100%;
+}
+
+
+.@{prefix-cls}-menu-item-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  margin-right: 6px;
+
+  &, & + span {
+    vertical-align: middle;
+  }
+}
+</style>
diff --git a/src/components/InFilter/DatePickerInFilter.vue b/src/components/InFilter/DatePickerInFilter.vue
new file mode 100644
index 0000000..bc26ff7
--- /dev/null
+++ b/src/components/InFilter/DatePickerInFilter.vue
@@ -0,0 +1,141 @@
+<!-- 在筛选中使用的日期选择器（可选择今天、本周等范围） -->
+<template>
+  <a-space :id="formItemId" :class="[prefixCls]" direction="vertical">
+    <a-space-compact block>
+      <!-- 日期范围下拉 -->
+      <a-select v-if="isRange" v-model:value="innerValue">
+        <a-select-option v-for="opt of RANGE_OPTIONS" :key="opt.key" :value="opt.key">
+          {{ opt.label }}
+        </a-select-option>
+        <a-select-option key="custom" value="custom">
+          自定义日期
+        </a-select-option>
+      </a-select>
+      <!-- 自定义日期选择器 -->
+      <DatePicker v-else v-model:value="innerValue" v-model:open="datePickerIsOpen" v-bind="attrs"/>
+      <!-- 右侧下拉菜单 -->
+      <a-dropdown v-if="allowSelectRange" :trigger="['click']">
+        <a-button preIcon="ant-design:menu-unfold"/>
+        <template #overlay>
+          <a-menu @click="onMenuClick">
+            <a-menu-item v-for="opt of RANGE_OPTIONS" :key="opt.key">
+              {{ opt.label }}
+            </a-menu-item>
+            <a-menu-item key="custom">
+              自定义日期
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </a-space-compact>
+  </a-space>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: 'DatePickerInFilter',
+  inheritAttrs: false,
+})
+</script>
+
+<script lang="ts" setup>
+import {ref, watch, computed, nextTick, useAttrs, defineProps} from 'vue'
+import {DatePicker} from 'ant-design-vue'
+import {useDesign} from '/@/hooks/web/useDesign';
+import { Form } from 'ant-design-vue';
+const formItemContext = Form.useInjectFormItemContext();
+
+// 日期范围选项
+const RANGE_OPTIONS = [
+  {key: 'TODAY', label: '今天'},
+  {key: 'YESTERDAY', label: '昨天'},
+  {key: 'TOMORROW', label: '明天'},
+  {key: 'THIS_WEEK', label: '本周'},
+  {key: 'LAST_WEEK', label: '上周'},
+  {key: 'NEXT_WEEK', label: '下周'},
+  {key: 'LAST_7_DAYS', label: '过去七天'},
+  {key: 'THIS_MONTH', label: '本月'},
+  {key: 'LAST_MONTH', label: '上月'},
+  {key: 'NEXT_MONTH', label: '下月'},
+];
+const RANGE_OPTION_KEYS = RANGE_OPTIONS.map(item => item.key)
+
+const {prefixCls} = useDesign('j-data-picker-in-filter');
+const props = defineProps({
+  value: {
+    type: [String],
+    default: ''
+  },
+  // 是否允许选择预设范围
+  allowSelectRange: {
+    type: Boolean,
+    default: true,
+  }
+})
+const emit = defineEmits(['change', 'update:value'])
+const attrs = useAttrs()
+
+// 组件id
+const formItemId  = computed(() => formItemContext.id.value)
+
+const innerValue = ref(props.value)
+// 是否打开日期选择器
+const datePickerIsOpen = ref(false)
+
+// 判断是否为范围选项
+const isRange = computed(() => RANGE_OPTION_KEYS.includes(innerValue.value));
+
+// 同步value
+watch(() => props.value, (val) => {
+  innerValue.value = val
+})
+
+// emit 更改
+watch(innerValue, (val) => {
+  if (val === 'custom') {
+    val = ''
+    openDatePicker()
+  }
+  emit('change', val)
+  emit('update:value', val)
+  // 代码逻辑说明: 【QQYUN-9227】日期校验没清空
+  formItemContext?.onFieldChange();
+})
+
+watch(() => props.allowSelectRange, (allow) => {
+  // 如果不允许选择范围，且当前值为范围选项，则清空值
+  if (!allow && isRange.value) {
+    innerValue.value = ''
+  }
+}, {immediate: true});
+
+// 点击右侧下拉菜单
+function onMenuClick(event: Recordable) {
+  if (event.key === 'custom') {
+    if (isRange.value) {
+      innerValue.value = '';
+    }
+    openDatePicker()
+  } else {
+    innerValue.value = event.key
+  }
+}
+
+// 打开日期选择器下拉
+async function openDatePicker() {
+  await nextTick()
+  datePickerIsOpen.value = true
+}
+
+</script>
+
+<style lang="less">
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-j-data-picker-in-filter';
+
+.@{prefix-cls} {
+  width: 100%;
+}
+</style>
diff --git a/src/components/InFilter/index.ts b/src/components/InFilter/index.ts
new file mode 100644
index 0000000..b37c83c
--- /dev/null
+++ b/src/components/InFilter/index.ts
@@ -0,0 +1,2 @@
+export {default as DatePickerInFilter} from './DatePickerInFilter.vue';
+export {default as CascaderPcaInFilter} from './CascaderPcaInFilter.vue';
diff --git a/src/components/JDragNotice/JDragNotice.vue b/src/components/JDragNotice/JDragNotice.vue
new file mode 100644
index 0000000..6b51315
--- /dev/null
+++ b/src/components/JDragNotice/JDragNotice.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <keep-alive>
+      <component
+        v-if="currentModal"
+        v-bind="bindParams"
+        :key="currentModal"
+        :is="currentModal"
+        @register="modalRegCache[currentModal].register"
+        @reply="handReply"
+        @selected="reloadPage"
+      />
+    </keep-alive>
+    <!-- 系统公告弹窗 -->
+    <DynamicNotice ref="showDynamNotice" v-bind="bindParams" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted } from 'vue';
+  import { useDragNotice } from '/@/hooks/web/useDragNotice';
+  import DynamicNotice from '@/views/monitor/mynews/DynamicNotice.vue';
+
+  export default defineComponent({
+    name: 'JDragNotice',
+    components: {
+      DynamicNotice,
+    },
+    setup() {
+      const {
+        initDragWebSocket,
+        currentModal,
+        modalParams,
+        modalRegCache,
+        bindParams,
+        reloadPage,
+      } = useDragNotice();
+
+      onMounted(() => {
+        initDragWebSocket();
+      });
+
+      return {
+        currentModal,
+        modalParams,
+        modalRegCache,
+        bindParams,
+        reloadPage,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/JVxeCustom/index.ts b/src/components/JVxeCustom/index.ts
new file mode 100644
index 0000000..9e87a79
--- /dev/null
+++ b/src/components/JVxeCustom/index.ts
@@ -0,0 +1,36 @@
+import { registerComponent, registerAsyncComponent, registerASyncComponentReal } from '/@/components/jeecg/JVxeTable';
+import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+import { DictSearchSpanCell, DictSearchInputCell } from './src/components/JVxeSelectDictSearchCell';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+export async function registerJVxeCustom() {
+  // ----------------- ⚠ 注意事项 ⚠ -----------------
+  //  当组件内包含 BasicModal 时，必须使用异步引入！
+  //  否则将会导致 i18n 失效！
+  // ----------------- ⚠ 注意事项 ⚠ -----------------
+
+  // 注册【Popup】（普通封装方式）
+  await registerAsyncComponent(JVxeTypes.popup, import('./src/components/JVxePopupCell.vue'));
+
+  // 注册【字典搜索下拉】组件（高级封装方式）
+  registerComponent(JVxeTypes.selectDictSearch, DictSearchInputCell, DictSearchSpanCell);
+
+  // 注册【文件上传】组件
+  await registerAsyncComponent(JVxeTypes.file, import('./src/components/JVxeFileCell.vue'));
+  // 注册【图片上传】组件
+  await registerAsyncComponent(JVxeTypes.image, import('./src/components/JVxeImageCell.vue'));
+  // 注册【用户选择】组件
+  await registerAsyncComponent(JVxeTypes.userSelect, import('./src/components/JVxeUserSelectCell.vue'));
+  // 注册【部门选择】组件
+  await registerAsyncComponent(JVxeTypes.departSelect, import('./src/components/JVxeDepartSelectCell.vue'));
+  // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+  // 注册【关联记录】组件
+  await registerAsyncComponent(JVxeTypes.linkTable, import('./src/components/JVxeLinkTableCell.vue'));
+  // update-end--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+  // 注册【省市区选择】组件
+  // await registerAsyncComponent(JVxeTypes.pca, import('./src/components/JVxePcaCell.vue'));
+  // 代码逻辑说明: 【QQYUN-8241】为避免首次加载china-area-data，JVxePcaCell组件需异步加载
+  registerASyncComponentReal(
+    JVxeTypes.pca,
+    createAsyncComponent(() => import('./src/components/JVxePcaCell.vue'))
+  );
+}
diff --git a/src/components/JVxeCustom/src/components/JVxeDepartSelectCell.vue b/src/components/JVxeCustom/src/components/JVxeDepartSelectCell.vue
new file mode 100644
index 0000000..0a23d59
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeDepartSelectCell.vue
@@ -0,0 +1,216 @@
+<template>
+  <!--  <div>-->
+  <!--    <a-input-->
+  <!--        v-show="!departIds"-->
+  <!--        @click="openSelect"-->
+  <!--        placeholder="请点击选择部门"-->
+  <!--        v-model="departNames"-->
+  <!--        readOnly-->
+  <!--        :disabled="componentDisabled"-->
+  <!--        class="jvxe-select-input">-->
+  <!--      <a-icon slot="prefix" type="cluster" title="部门选择控件"/>-->
+  <!--    </a-input>-->
+  <!--    <j-select-depart-modal-->
+  <!--        ref="innerDepartSelectModal"-->
+  <!--        :modal-width="modalWidth"-->
+  <!--        :multi="multi"-->
+  <!--        :rootOpened="rootOpened"-->
+  <!--        :depart-id="departIds"-->
+  <!--        @ok="handleOK"-->
+  <!--        @initComp="initComp"/>-->
+  <!--    <span style="display: inline-block;height:100%;padding-left:14px" v-if="departIds">-->
+  <!--      <span @click="openSelect" style="display: inline-block;vertical-align: middle">{{ departNames }}</span>-->
+  <!--      <a-icon style="margin-left:5px;vertical-align: middle" type="close-circle" @click="handleEmpty" title="清空"/>-->
+  <!--    </span>-->
+  <!--  </div>-->
+  <div :class="[prefixCls]">
+    <JSelectDept v-bind="getProps" @change="handleChange" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  //import { JSelectDept } from '/@/components/Form';
+  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  // import JSelectDepartModal from '@/components/jeecgbiz/modal/JSelectDepartModal'
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+  import { isArray, isEmpty, isString } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeDepartSelectCell',
+    components: { JSelectDept },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon, useCellDesign } = useJVxeComponent(props);
+      const { prefixCls } = useCellDesign('depart-select');
+
+      const selectedValue = computed(() => {
+        let val: any = innerValue.value;
+        if (val == null) {
+          return val;
+        }
+        if (isEmpty(val)) {
+          return [];
+        }
+        if (isArray(val)) {
+          return val;
+        }
+        if (isString(val)) {
+          return (<string>val).split(',');
+        }
+        return [val];
+      });
+
+      const multiple = computed(() => cellProps.value['multi'] != false);
+
+      const getProps = computed(() => {
+        return {
+          ...cellProps.value,
+          value: selectedValue.value,
+          showButton: false,
+          // 不允许搜索
+          showSearch: false,
+          // 设置最大的显示个数
+          maxTagCount: 1,
+          // 显示提示重写，去掉省略号
+          maxTagPlaceholder: ({ length }) => '+' + length,
+          // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+          isDetailsMode: cellProps.value.disabledTable,
+          // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+        };
+      });
+
+      function handleChange(values) {
+        handleChangeCommon(values.join(','));
+      }
+
+      return {
+        prefixCls,
+        selectedValue,
+        multiple,
+        cellProps,
+        getProps,
+        handleChange,
+      };
+    },
+
+    data() {
+      return {
+        // departNames: '',
+        // departIds: '',
+        // selectedOptions: [],
+        // customReturnField: 'id',
+      };
+    },
+    computed: {
+      // custProps() {
+      //   const { departIds, originColumn: col, caseId, cellProps } = this
+      //   return {
+      //     ...cellProps,
+      //     value: departIds,
+      //     field: col.field || col.key,
+      //     groupId: caseId,
+      //     class: 'jvxe-select',
+      //   }
+      // },
+      // componentDisabled() {
+      //   if (this.cellProps.disabled == true) {
+      //     return true
+      //   }
+      //   return false
+      // },
+      // modalWidth() {
+      //   if (this.cellProps.modalWidth) {
+      //     return this.cellProps.modalWidth
+      //   } else {
+      //     return 500
+      //   }
+      // },
+      // multi() {
+      //   if (this.cellProps.multi == false) {
+      //     return false
+      //   } else {
+      //     return true
+      //   }
+      // },
+      // rootOpened() {
+      //   if (this.cellProps.open == false) {
+      //     return false
+      //   } else {
+      //     return true
+      //   }
+      // },
+    },
+    watch: {
+      // innerValue: {
+      //   immediate: true,
+      //   handler(val) {
+      //     if (val == null || val === '') {
+      //       this.departIds = ''
+      //     } else {
+      //       this.departIds = val
+      //     }
+      //   },
+      // },
+    },
+    methods: {
+      // openSelect() {
+      //   this.$refs.innerDepartSelectModal.show()
+      // },
+      // handleEmpty() {
+      //   this.handleOK('')
+      // },
+      // handleOK(rows, idstr) {
+      //   let value = ''
+      //   if (!rows && rows.length <= 0) {
+      //     this.departNames = ''
+      //     this.departIds = ''
+      //   } else {
+      //     value = rows.map(row => row[this.customReturnField]).join(',')
+      //     this.departNames = rows.map(row => row['departName']).join(',')
+      //     this.departIds = idstr
+      //   }
+      //   this.handleChangeCommon(this.departIds)
+      // },
+      // initComp(departNames) {
+      //   this.departNames = departNames
+      // },
+      // handleChange(value) {
+      //   this.handleChangeCommon(value)
+      // },
+    },
+    enhanced: {
+      switches: {
+        visible: true,
+      },
+      translate: {
+        enabled: false,
+      },
+      aopEvents: {
+        editActived({ $event }) {
+          dispatchEvent({
+            $event,
+            props: this.props,
+            className: '.ant-select .ant-select-selection-search-input',
+            isClick: true,
+          });
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style lang="less">
+  // noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-vxe-cell-depart-select';
+
+  .@{prefix-cls} {
+    // 限制tag最大长度为100px，防止选中文字过多的选项时换行
+    .ant-select .ant-select-selection-overflow-item {
+      max-width: 80px;
+    }
+  }
+</style>
diff --git a/src/components/JVxeCustom/src/components/JVxeFileCell.vue b/src/components/JVxeCustom/src/components/JVxeFileCell.vue
new file mode 100644
index 0000000..6a65155
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeFileCell.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <template v-if="hasFile" v-for="(file, fileKey) of [innerFile || {}]" :key="fileKey">
+      <div style="position: relative">
+        <a-tooltip v-if="file.status === 'uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
+          <LoadingOutlined />
+          <span style="margin-left: 5px">上传中…</span>
+        </a-tooltip>
+
+        <a-tooltip v-else-if="file.status === 'done'" :title="file.name">
+          <Icon icon="ant-design:paper-clip" />
+          <span style="margin-left: 5px">{{ ellipsisFileName }}</span>
+        </a-tooltip>
+
+        <a-tooltip v-else :title="file.message || '上传失败'">
+          <Icon icon="ant-design:exclamation-circle" style="color: red" />
+          <span style="margin-left: 5px">{{ ellipsisFileName }}</span>
+        </a-tooltip>
+
+        <Dropdown :trigger="['click']" placement="bottomRight" style="margin-left: 10px">
+          <a-tooltip title="操作">
+            <Icon v-if="file.status !== 'uploading'" icon="ant-design:setting" style="cursor: pointer" />
+          </a-tooltip>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item v-if="originColumn.allowDownload !== false" @click="handleClickDownloadFile">
+                <span><Icon icon="ant-design:download" />&nbsp;下载</span>
+              </a-menu-item>
+              <a-menu-item :disabled="cellProps.disabled" v-if="originColumn.allowRemove !== false" @click="handleClickDeleteFile">
+                <span><Icon icon="ant-design:delete" />&nbsp;删除</span>
+              </a-menu-item>
+              <a-menu-item :disabled="cellProps.disabled" @click="handleMoreOperation">
+                <span><Icon icon="ant-design:bars" />&nbsp;更多</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </Dropdown>
+      </div>
+    </template>
+
+    <a-upload
+      v-if="!cellProps.disabledTable"
+      v-show="!hasFile"
+      name="file"
+      :data="{ isup: 1 }"
+      :multiple="false"
+      :action="uploadAction"
+      :headers="uploadHeaders"
+      :showUploadList="false"
+      v-bind="cellProps"
+      @change="handleChangeUpload"
+    >
+      <a-button preIcon="ant-design:upload">{{ originColumn.btnText || '点击上传' }}</a-button>
+    </a-upload>
+    <JUploadModal :value="modalValue" @register="registerModel" @change="onModalChange" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { useFileCell, enhanced, components } from '../hooks/useFileCell';
+
+  export default defineComponent({
+    name: 'JVxeFileCell',
+    components: components,
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      return useFileCell(props, UploadTypeEnum.file);
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: enhanced,
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/JVxeCustom/src/components/JVxeImageCell.vue b/src/components/JVxeCustom/src/components/JVxeImageCell.vue
new file mode 100644
index 0000000..ee8d2cf
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeImageCell.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <template v-if="hasFile" v-for="(file, fileKey) of [innerFile || {}]" :key="fileKey">
+      <div class="j-vxe-image-list">
+        <template v-if="!file || !(file['url'] || file['path'] || file['message'])">
+          <a-tooltip :title="'请稍后: ' + JSON.stringify(file) + (file['url'] || file['path'] || file['message'])">
+            <LoadingOutlined />
+          </a-tooltip>
+        </template>
+        <template v-else-if="file['path']">
+          <template v-for="src of imgList">
+            <img class="j-vxe-image" :src="src" alt="图片错误" @[clickEvent]="handleMoreOperation" @click="handlePreview" />
+          </template>
+        </template>
+        <a-tooltip v-else :title="file.message || '上传失败'" @[clickEvent]="handleClickShowImageError">
+          <Icon icon="ant-design:exclamation-circle" style="color: red" />
+        </a-tooltip>
+      </div>
+    </template>
+    <div class="j-vxe-image-upload" v-if="!cellProps.disabledTable">
+      <a-upload
+        :accept="acceptFileType"
+        name="file"
+        :data="{ isup: 1 }"
+        :multiple="false"
+        :action="uploadAction"
+        :headers="uploadHeaders"
+        :showUploadList="false"
+        v-bind="cellProps"
+        @change="handleChangeUpload"
+      >
+        <a-button v-if="!hasFile" preIcon="ant-design:upload">{{ originColumn.btnText || '上传图片' }}</a-button>
+        <div v-if="hasFile && imgList.length < maxCount" class="j-vxe-plus" @click="">
+          <Icon icon="ant-design:plus" />
+        </div>
+      </a-upload>
+    </div>
+    <JUploadModal :value="modalValue" @register="registerModel" @change="onModalChange" />
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent ,unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { components, enhanced, useFileCell } from '../hooks/useFileCell';
+  import { createImgPreview } from '/@/components/Preview/index';
+
+  export default defineComponent({
+    name: 'JVxeImageCell',
+    components: components,
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      
+      const { createErrorModal } = useMessage();
+      const setup = useFileCell(props, UploadTypeEnum.image, { multiple: true });
+      // 代码逻辑说明: 【TV360X-470】jVxetable上传图片组件限制类型
+      const acceptFileType = 'image/*';
+      // 代码逻辑说明: 【issues/953】online子表vxe-table展现形式详情图片上传可点击
+      const clickEvent = computed(() => {
+        return unref(setup.cellProps).disabled ? null : 'click';
+      });
+      const { innerFile, maxCount } = setup;
+
+      const imgList = computed(() => {
+        if (innerFile.value) {
+          if (innerFile.value['url']) {
+            return [innerFile.value['url']];
+          } else if (innerFile.value['path']) {
+            let paths = innerFile.value['path'].split(',');
+            return paths.map((p) => getFileAccessHttpUrl(p));
+          }
+        }
+        return [];
+      });
+
+      // 弹出上传出错详细信息
+      function handleClickShowImageError() {
+        let file = innerFile.value || null;
+        if (file && file['message']) {
+          createErrorModal({
+            title: '上传出错',
+            content: '错误信息：' + file['message'],
+            maskClosable: true,
+          });
+        }
+      }
+      // 代码逻辑说明: 【TV360X-121】jvxetable文件组件禁用状态(详情)下可下载
+      const handlePreview = () => {
+        if (unref(setup.cellProps).disabled) {
+          createImgPreview({ imageList: imgList.value });
+        }
+      };
+      return {
+        ...setup,
+        imgList,
+        maxCount,
+        handleClickShowImageError,
+        clickEvent,
+        handlePreview,
+        acceptFileType,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: enhanced,
+  });
+</script>
+
+<style scoped lang="less">
+  .j-vxe-image {
+    height: 32px;
+    max-width: 100px !important;
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: top;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+
+  .j-vxe-plus {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    background-color: #fafafa;
+    border: 1px dashed #d9d9d9;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .j-vxe-image-list,
+  .j-vxe-image-upload {
+    display: inline-block;
+    vertical-align: top;
+  }
+</style>
diff --git a/src/components/JVxeCustom/src/components/JVxeLinkTableCell.vue b/src/components/JVxeCustom/src/components/JVxeLinkTableCell.vue
new file mode 100644
index 0000000..b1228b0
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeLinkTableCell.vue
@@ -0,0 +1,105 @@
+<template>
+  <LinkTableInput
+    :value="innerValue"
+    :valueField="originColumn.valueField || 'id'"
+    :textField="originColumn.textField || ''"
+    :tableName="originColumn.tableName || ''"
+    :multi="true"
+    :linkFields="originColumn.linkFields || []"
+    :imageField="originColumn.imageField || ''"
+    :editBtnShow="!originColumn.editBtnShow"
+    v-bind="cellProps"
+    @change="handleChange"
+  />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { vModel } from '/@/components/jeecg/JVxeTable/utils';
+  import { isEmpty } from '/@/utils/is';
+  import { defHttp } from '/@/utils/http/axios';
+
+  export default defineComponent({
+    name: 'JVxeLinkTableCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, scrolling, handleChangeCommon, row } = useJVxeComponent(props);
+      function handleChange(value, otherValues) {
+        if (!isEmpty(value)) {
+          Object.keys(otherValues).forEach((key) => {
+            let currentValue = otherValues[key];
+            vModel(currentValue, row, key);
+          });
+          handleChangeCommon(value);
+        }
+      }
+      return {
+        innerValue,
+        cellProps,
+        originColumn,
+        scrolling,
+        handleChange,
+        row,
+      };
+    },
+    enhanced: {
+      aopEvents: {
+      },
+      interceptor: {
+        'event.clearActived.className'(className) {
+          if (className.includes('jeecg-online-pop-list-modal') || className.includes('jeecg-online-pop-modal')) {
+            return false;
+          }
+        },
+      },
+      translate: {
+        enabled: true,
+        async handler(value, ctx) {
+          if (!value) return '';
+          if (!ctx) return value;
+          const { originColumn, row } = ctx.context;
+          const col = originColumn.value;
+          const tableName = col.tableName;
+          const textField = col.textField || '';
+          const valueField = col.valueField || 'id';
+          // 关联记录相关的他表字段
+          const linkFields: string[] = col.linkFields || [];
+          if (!tableName) return value;
+          // 将他表字段对应的关联表字段也一并查询出来
+          const extraTableFields = linkFields.map((lf) => lf.split(',')[1]).filter(Boolean);
+          const allSelectFields = [valueField, textField, ...extraTableFields].filter(Boolean);
+          const selectFields = [...new Set(allSelectFields)].join(',');
+          const params = {
+            linkTableSelectFields: selectFields,
+            pageSize: value.split(',').length,
+            pageNo: 1,
+            superQueryMatchType: 'and',
+            superQueryParams: encodeURI(JSON.stringify([{ field: valueField, rule: 'in', val: value }])),
+          };
+          const data = await defHttp.get({ url: '/online/cgform/api/getData/' + tableName, params });
+          const records = data?.records || [];
+          const textKey = textField.split(',')[0];
+          const vals = (value + '').split(',');
+          const labels = vals.map((v) => {
+            const record = records.find((r) => String(r[valueField]) === String(v));
+            return record ? record[textKey] : v;
+          });
+          // 将他表字段的值同步写入行数据，使对应列能正确显示
+          if (linkFields.length > 0 && row) {
+            linkFields.forEach((lf) => {
+              const [formField, tableField] = lf.split(',');
+              const fieldValues = vals.map((v) => {
+                const record = records.find((r) => String(r[valueField]) === String(v));
+                return record ? (record[tableField] ?? '') : '';
+              });
+              vModel(fieldValues.join(','), row, formField);
+            });
+          }
+          return labels.join(',');
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/JVxeCustom/src/components/JVxePcaCell.vue b/src/components/JVxeCustom/src/components/JVxePcaCell.vue
new file mode 100644
index 0000000..b547892
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxePcaCell.vue
@@ -0,0 +1,77 @@
+<template>
+    <a-cascader v-bind="getProps" class="pca-select" @change="handleChange" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { regionData, getRealCode } from '/@/components/Form/src/utils/areaDataUtil';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+
+  export default defineComponent({
+    name: 'JVxePcaCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon } = useJVxeComponent(props);
+
+      const selectedValue = computed(() => {
+        let val: any = innerValue.value;
+        if (!val) {
+          return []
+        }
+        let arr = getRealCode(val, 3);
+        return arr;
+      });
+
+      const getProps = computed(() => {
+        return {
+          ...cellProps.value,
+          options: regionData,
+          showOverflow: false,
+          value: selectedValue.value,
+        };
+      });
+      
+      function handleChange(arr) {
+        let str = '';
+        if(arr && arr.length==3){
+          str = arr[2];
+        }
+        handleChangeCommon(str);
+      }
+
+      return {
+        handleChange,
+        selectedValue,
+        getProps
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      switches: {
+        visible: true,
+      },
+      translate: {
+        enabled: false,
+      },
+      aopEvents: {
+        editActived({ $event }) {
+          dispatchEvent({
+            $event,
+            props: this.props,
+            className: '.ant-select .ant-select-selection-search-input',
+            isClick: true,
+          });
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+<style lang="less">
+    .pca-select{
+        .ant-select-selection-placeholder{
+            color: #bfbfbf !important;
+        }
+    }
+</style>
diff --git a/src/components/JVxeCustom/src/components/JVxePopupCell.vue b/src/components/JVxeCustom/src/components/JVxePopupCell.vue
new file mode 100644
index 0000000..40b8773
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxePopupCell.vue
@@ -0,0 +1,75 @@
+<template>
+  <JPopup v-bind="popupProps" @focus="handleFocus" />
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref } from 'vue';
+  //import { JPopup } from '/@/components/Form';
+  import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { dispatchEvent, vModel } from '/@/components/jeecg/JVxeTable/utils';
+  import { isEmpty } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxePopupCell',
+    components: { JPopup },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, row, originColumn, cellProps, handleChangeCommon } = useJVxeComponent(props);
+      const groupId = ref<string>('j-vxe-popup');
+      const popupProps = computed(() => {
+        // 代码逻辑说明: 【issues/5371】一对多子表popup增加多选
+        return {
+          ...cellProps.value,
+          value: innerValue.value,
+          field: originColumn.value.field || originColumn.value.key,
+          code: originColumn.value.popupCode,
+          fieldConfig: originColumn.value.fieldConfig,
+          // orgFields: originColumn.value.orgFields,
+          // destFields: originColumn.value.destFields,
+          groupId: groupId.value,
+          // update-begin--author:liaozhiyang---date:20260203---for:【issues/9212】JVxeTypes.popup中属性param传参后，弹框数据为空
+          param: originColumn.value.params ?? originColumn.value.param,
+          // update-end--author:liaozhiyang---date:20260203---for:【issues/9212】JVxeTypes.popup中属性param传参后，弹框数据为空
+          sorter: originColumn.value.sorter,
+          setFieldsValue: (values) => {
+            if (!isEmpty(values)) {
+              let popupValue = '';
+              Object.keys(values).forEach((key) => {
+                let currentValue = values[key];
+                // 当前列直接赋值，其他列通过vModel赋值
+                if (key === originColumn.value.key) {
+                  popupValue = currentValue;
+                } else {
+                  vModel(currentValue, row, key);
+                }
+              });
+              handleChangeCommon(popupValue);
+            }
+          },
+        };
+      });
+      // 代码逻辑说明: 【issues/675】子表字段Popup弹框数据不更新
+      const handleFocus = () => {
+        groupId.value = '';
+      };
+      return {
+        handleFocus,
+        popupProps,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      aopEvents: {
+        editActived({ $event }) {
+          dispatchEvent({
+            $event,
+            props: this.props,
+            className: '.ant-input',
+            isClick: true,
+          });
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/JVxeCustom/src/components/JVxeSelectDictSearchCell.ts b/src/components/JVxeCustom/src/components/JVxeSelectDictSearchCell.ts
new file mode 100644
index 0000000..f1e1298
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeSelectDictSearchCell.ts
@@ -0,0 +1,288 @@
+import { computed, ref, watch, defineComponent, h } from 'vue';
+import { cloneDeep, debounce } from 'lodash-es';
+import { defHttp } from '/@/utils/http/axios';
+import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
+import { ajaxGetDictItems, getDictItemsByCode } from '/@/utils/dict';
+import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Select, SelectOption, Spin } from 'ant-design-vue'
+
+/** value - label map，防止重复查询（刷新清空缓存） */
+const LabelMap = new Map<string, any>();
+// 请求id
+let requestId = 0;
+
+/** 显示组件，自带翻译 */
+export const DictSearchSpanCell = defineComponent({
+  name: 'JVxeSelectSearchSpanCell',
+  props: useJVxeCompProps(),
+  setup(props: JVxeComponent.Props) {
+    const { innerOptions, innerSelectValue, innerValue } = useSelectDictSearch(props);
+    return () => {
+      return h('span', {}, [filterDictText(innerOptions.value, innerSelectValue.value || innerValue.value)]);
+    };
+  },
+});
+
+// 输入选择组件
+export const DictSearchInputCell = defineComponent({
+  name: 'JVxeSelectSearchInputCell',
+  props: useJVxeCompProps(),
+  setup(props: JVxeComponent.Props) {
+    const { createMessage } = useMessage();
+    const { dict, loading, isAsync, options, innerOptions, originColumn, cellProps, innerSelectValue, handleChangeCommon } =
+      useSelectDictSearch(props);
+    const hasRequest = ref(false);
+    // 提示信息
+    const tipsContent = computed(() => {
+      return originColumn.value.tipsContent || '请输入搜索内容';
+    });
+    // 筛选函数
+    const filterOption = computed(() => {
+      if (isAsync.value) {
+        //【jeecgboot-vue3/issues/I5QRT8】JVxeTypes.selectDictSearch sync问题
+        return ()=>true;
+      }
+      return (input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    });
+
+    /** 加载数据 */
+    const loadData = debounce((value) => {
+      const currentRequestId = ++requestId;
+      loading.value = true;
+      innerOptions.value = [];
+      if (value == null || value.trim() === '') {
+        loading.value = false;
+        hasRequest.value = false;
+        return;
+      }
+      // 字典code格式：table,text,code
+      hasRequest.value = true;
+      loadDictByKeyword(dict.value, value)
+        .then((res) => {
+          if (currentRequestId !== requestId) {
+            return;
+          }
+          let { success, result, message } = res;
+          if (success) {
+            innerOptions.value = result;
+            result.forEach((item) => {
+              LabelMap.set(item.value, [item]);
+            });
+          } else {
+            createMessage.warning(message || '查询失败');
+          }
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }, 300);
+
+    function handleChange(selectedValue) {
+      innerSelectValue.value = selectedValue;
+      handleChangeCommon(innerSelectValue.value);
+    }
+
+    function handleSearch(value) {
+      if (isAsync.value) {
+        // 在输入时也应该开启加载，因为loadData加了消抖，所以会有800ms的用户主观上认为的卡顿时间
+        loading.value = true;
+        if (innerOptions.value.length > 0) {
+          innerOptions.value = [];
+        }
+        loadData(value);
+      }
+    }
+
+    function renderOptionItem() {
+      let optionItems: any[] = [];
+      options.value.forEach(({ value, text, label, title, disabled }) => {
+        optionItems.push(
+          h(
+            SelectOption,
+            {
+              key: value,
+              value: value,
+              disabled: disabled,
+            },
+            {
+              default: () => text || label || title,
+            }
+          )
+        );
+      });
+      return optionItems;
+    }
+
+    return () => {
+      return h(
+        Select,
+        {
+          ...cellProps.value,
+          value: innerSelectValue.value,
+          filterOption: filterOption.value,
+          showSearch: true,
+          allowClear: true,
+          autofocus: true,
+          defaultOpen: true,
+          style: 'width: 100%',
+          onSearch: handleSearch,
+          onChange: handleChange,
+        },
+        {
+          default: () => renderOptionItem(),
+          notFoundContent: () => {
+            if (loading.value) {
+              return h(Spin, { size: 'small' });
+            } else if (hasRequest.value) {
+              return h('div', '没有查询到任何数据');
+            } else {
+              return h('div', [tipsContent.value]);
+            }
+          },
+        }
+      );
+    };
+  },
+  // 【组件增强】注释详见：JVxeComponent.Enhanced
+  enhanced: {
+    aopEvents: {
+      editActived({ $event }) {
+        dispatchEvent({
+          $event,
+          props: this.props,
+          className: '.ant-select .ant-select-selection-search-input',
+          isClick: false,
+          handler: (el) => el.focus(),
+        });
+      },
+    },
+  } as JVxeComponent.EnhancedPartial,
+});
+
+function useSelectDictSearch(props) {
+  const setup = useJVxeComponent(props);
+  const { innerValue, originColumn } = setup;
+
+  // 加载状态
+  const loading = ref(false);
+  // 内部选择值
+  const innerSelectValue = ref(null);
+  // 内部 options
+  const innerOptions = ref<any[]>([]);
+
+  const dict = computed(() => originColumn.value.dict);
+  // 是否是异步模式
+  const isAsync = computed(() => {
+    let isAsync = originColumn.value.async;
+    return isAsync != null && isAsync !== '' ? !!isAsync : true;
+  });
+  const options = computed(() => {
+    if (isAsync.value) {
+      return innerOptions.value;
+    } else {
+      return originColumn.value.options || [];
+    }
+  });
+
+  /** 公共属性监听 */
+  watch(
+    innerValue,
+    (value: string) => {
+      if (value == null || value === '') {
+        innerSelectValue.value = null;
+      } else {
+        loadDataByValue(value);
+      }
+    },
+    { immediate: true }
+  );
+  watch(dict, () => loadDataByDict());
+
+  // 根据 value 查询数据，用于回显
+  async function loadDataByValue(value) {
+    if (isAsync.value) {
+      if (innerSelectValue.value !== value) {
+        if (LabelMap.has(value)) {
+          innerOptions.value = cloneDeep(LabelMap.get(value));
+        } else {
+          let result = await loadDictItem(dict.value, value);
+          if (result && result.length > 0) {
+            innerOptions.value = [{ value: value, text: result[0] }];
+            LabelMap.set(value, cloneDeep(innerOptions.value));
+          }
+        }
+      }
+    }
+    innerSelectValue.value = (value || '').toString();
+  }
+
+  // 初始化字典
+  async function loadDataByDict() {
+    if (!isAsync.value) {
+      // 如果字典项集合有数据
+      if (!originColumn.value.options || originColumn.value.options.length === 0) {
+        // 根据字典Code, 初始化字典数组
+        let dictStr = '';
+        if (dict.value) {
+          let arr = dict.value.split(',');
+          if (arr[0].indexOf('where') > 0) {
+            let tbInfo = arr[0].split('where');
+            dictStr = tbInfo[0].trim() + ',' + arr[1] + ',' + arr[2] + ',' + encodeURIComponent(tbInfo[1]);
+          } else {
+            dictStr = dict.value;
+          }
+          if (dict.value.indexOf(',') === -1) {
+            //优先从缓存中读取字典配置
+            let cache = getDictItemsByCode(dict.value);
+            if (cache) {
+              innerOptions.value = cache;
+              return;
+            }
+          }
+          let { success, result } = await ajaxGetDictItems(dictStr, null);
+          if (success) {
+            innerOptions.value = result;
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    ...setup,
+    loading,
+    innerOptions,
+    innerSelectValue,
+    dict,
+    isAsync,
+    options,
+  };
+}
+
+/** 获取字典项 */
+function loadDictItem(dict: string, key: string) {
+  return defHttp.get({
+    url: `/sys/dict/loadDictItem/${dict}`,
+    params: {
+      key: key,
+    },
+  });
+}
+
+/** 根据关键字获取字典项（搜索） */
+function loadDictByKeyword(dict: string, keyword: string) {
+  return defHttp.get(
+    {
+      url: `/sys/dict/loadDict/${dict}`,
+      params: {
+        keyword: keyword,
+      },
+    },
+    {
+      isTransformResponse: false,
+    }
+  );
+}
diff --git a/src/components/JVxeCustom/src/components/JVxeUserSelectCell.vue b/src/components/JVxeCustom/src/components/JVxeUserSelectCell.vue
new file mode 100644
index 0000000..da05296
--- /dev/null
+++ b/src/components/JVxeCustom/src/components/JVxeUserSelectCell.vue
@@ -0,0 +1,106 @@
+<template>
+  <div :class="[prefixCls]">
+    <JSelectUser v-bind="getProps" @change="handleChange" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  //import { JSelectUser } from '/@/components/Form';
+  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+  import { isArray, isEmpty, isString } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeUserSelectCell',
+    components: { JSelectUser },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon, useCellDesign, originColumn } = useJVxeComponent(props);
+      const { prefixCls } = useCellDesign('user-select');
+
+      const selectedValue = computed(() => {
+        let val: any = innerValue.value;
+        if (val == null) {
+          return val;
+        }
+        if (isEmpty(val)) {
+          return [];
+        }
+        if (isArray(val)) {
+          return val;
+        }
+        if (isString(val)) {
+          // @ts-ignore
+          return val.split(',');
+        }
+        return [val];
+      });
+      // @ts-ignore
+      const multiple = computed(() => cellProps.value.multi != false);
+
+      const getProps = computed(() => {
+        return {
+          ...cellProps.value,
+          value: selectedValue.value,
+          showButton: false,
+          // 不允许搜索
+          showSearch: false,
+          // 设置最大的显示个数
+          // 代码逻辑说明: 【issues/7661】vxetable用户组件maxTagCount通过业务传递
+          maxTagCount: originColumn.value.maxTagCount ?? 1,
+          // 显示提示重写，去掉省略号
+          maxTagPlaceholder: ({ length }) => '+' + length,
+          // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+          isDetailsMode: cellProps.value.disabledTable,
+          // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑用户组件和部门组件显示方式优化
+        };
+      });
+
+      function handleChange(values) {
+        handleChangeCommon(values.join(','));
+      }
+
+      return {
+        prefixCls,
+        selectedValue,
+        multiple,
+        cellProps,
+        getProps,
+        handleChange,
+      };
+    },
+    enhanced: {
+      switches: {
+        visible: true,
+      },
+      translate: {
+        enabled: false,
+      },
+      aopEvents: {
+        editActived({ $event }) {
+          dispatchEvent({
+            $event,
+            props: this.props,
+            className: '.ant-select .ant-select-selection-search-input',
+            isClick: true,
+          });
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style lang="less">
+  // noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-vxe-cell-user-select';
+
+  .@{prefix-cls} {
+    // 限制tag最大长度为100px，防止选中文字过多的选项时换行
+    .ant-select .ant-select-selection-overflow-item {
+      max-width: 80px;
+    }
+  }
+</style>
diff --git a/src/components/JVxeCustom/src/hooks/useFileCell.ts b/src/components/JVxeCustom/src/hooks/useFileCell.ts
new file mode 100644
index 0000000..833f175
--- /dev/null
+++ b/src/components/JVxeCustom/src/hooks/useFileCell.ts
@@ -0,0 +1,101 @@
+import { computed } from 'vue';
+import { fileGetValue, fileSetValue, useJVxeUploadCell } from '/@/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell';
+import { uploadUrl } from '/@/api/common/api';
+import { JUploadModal, UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
+import { useModal } from '/@/components/Modal';
+import { JVxeComponent } from '/@/components/jeecg/JVxeTable/src/types/JVxeComponent';
+import { Icon } from '/@/components/Icon';
+import { Dropdown } from 'ant-design-vue';
+import { LoadingOutlined } from '@ant-design/icons-vue';
+
+export function useFileCell(props, fileType: UploadTypeEnum, options?) {
+  const setup = useJVxeUploadCell(props, { token: true, action: uploadUrl, ...options });
+
+  const { innerFile, handleChangeCommon, originColumn } = setup;
+  const [registerModel, { openModal }] = useModal();
+
+  // 截取文件名
+  const ellipsisFileName = computed(() => {
+    let length = 5;
+    let file = innerFile.value;
+    if (!file || !file.name) {
+      return '';
+    }
+    if (file.name.length > length) {
+      return file.name.substr(0, length) + '…';
+    }
+    return file.name;
+  });
+
+  const modalValue = computed(() => {
+    if (innerFile.value) {
+      if (innerFile.value['url']) {
+        return innerFile.value['url'];
+      } else if (innerFile.value['path']) {
+        return innerFile.value['path'];
+      }
+    }
+    return '';
+  });
+
+  const maxCount = computed(() => {
+    let maxCount = originColumn.value.maxCount;
+    // online 扩展JSON
+    if (originColumn.value && originColumn.value.fieldExtendJson) {
+      let json = JSON.parse(originColumn.value.fieldExtendJson);
+      maxCount = json.uploadnum ? json.uploadnum : 0;
+    }
+    return maxCount ?? 0;
+  });
+
+  // 点击更多按钮
+  function handleMoreOperation() {
+    openModal(true, {
+      removeConfirm: true,
+      mover: true,
+      download: true,
+      ...originColumn.value.props,
+      maxCount: maxCount.value,
+      fileType: fileType,
+      action: originColumn.value.action ?? void 0,
+    });
+  }
+
+  // 更多上传回调
+  function onModalChange(path) {
+    if (path) {
+      // 代码逻辑说明: 【TV360X-235】富文本禁用状态下图片上传按钮文字看不清
+      if (innerFile.value === null) {
+        innerFile.value = {};
+      }
+      innerFile.value.path = path;
+      handleChangeCommon(innerFile.value);
+    } else {
+      // 代码逻辑说明: [issues/530]JVxeTable 的JVxeTypes.image类型，无法全部删除上传图片
+      handleChangeCommon(null);
+    }
+  }
+
+  return {
+    ...setup,
+    modalValue,
+    maxCount,
+    ellipsisFileName,
+    registerModel,
+    onModalChange,
+    handleMoreOperation,
+  };
+}
+
+export const components = {
+  Icon,
+  Dropdown,
+  LoadingOutlined,
+  JUploadModal,
+};
+
+export const enhanced = {
+  switches: { visible: true },
+  getValue: (value) => fileGetValue(value),
+  setValue: (value) => fileSetValue(value),
+} as JVxeComponent.EnhancedPartial;
diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts
new file mode 100644
index 0000000..3673a44
--- /dev/null
+++ b/src/components/Loading/index.ts
@@ -0,0 +1,5 @@
+import Loading from './src/Loading.vue';
+
+export { Loading };
+export { useLoading } from './src/useLoading';
+export { createLoading } from './src/createLoading';
diff --git a/src/components/Loading/src/Loading.vue b/src/components/Loading/src/Loading.vue
new file mode 100644
index 0000000..f626b18
--- /dev/null
+++ b/src/components/Loading/src/Loading.vue
@@ -0,0 +1,79 @@
+<template>
+  <section
+    class="full-loading"
+    :class="{ absolute, [theme]: !!theme }"
+    :style="[background ? `background-color: ${background}` : '']"
+    v-show="loading"
+  >
+    <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
+  </section>
+</template>
+<script lang="ts">
+  import { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import { SizeEnum } from '/@/enums/sizeEnum';
+
+  export default defineComponent({
+    name: 'Loading',
+    components: { Spin },
+    props: {
+      tip: {
+        type: String as PropType<string>,
+        default: '',
+      },
+      size: {
+        type: String as PropType<SizeEnum>,
+        default: SizeEnum.LARGE,
+        validator: (v: SizeEnum): boolean => {
+          return [SizeEnum.DEFAULT, SizeEnum.SMALL, SizeEnum.LARGE].includes(v);
+        },
+      },
+      absolute: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      loading: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      background: {
+        type: String as PropType<string>,
+      },
+      theme: {
+        type: String as PropType<'dark' | 'light'>,
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .full-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(240, 242, 245, 0.4);
+
+    &.absolute {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 300;
+    }
+  }
+
+  html[data-theme='dark'] {
+    .full-loading:not(.light) {
+      background-color: @modal-mask-bg;
+    }
+  }
+
+  .full-loading.dark {
+    background-color: @modal-mask-bg;
+  }
+</style>
diff --git a/src/components/Loading/src/createLoading.ts b/src/components/Loading/src/createLoading.ts
new file mode 100644
index 0000000..5efff7f
--- /dev/null
+++ b/src/components/Loading/src/createLoading.ts
@@ -0,0 +1,65 @@
+import { VNode, defineComponent } from 'vue';
+import type { LoadingProps } from './typing';
+
+import { createVNode, render, reactive, h } from 'vue';
+import Loading from './Loading.vue';
+
+export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement, wait = false) {
+  let vm: Nullable<VNode> = null;
+  const data = reactive({
+    tip: '',
+    loading: true,
+    ...props,
+  });
+
+  const LoadingWrap = defineComponent({
+    render() {
+      return h(Loading, { ...data });
+    },
+  });
+
+  vm = createVNode(LoadingWrap);
+
+  if (wait) {
+    // TODO fix https://github.com/anncwb/vue-Jeecg-admin/issues/438
+    setTimeout(() => {
+      render(vm, document.createElement('div'));
+    }, 0);
+  } else {
+    render(vm, document.createElement('div'));
+  }
+
+  function close() {
+    if (vm?.el && vm.el.parentNode) {
+      vm.el.parentNode.removeChild(vm.el);
+    }
+  }
+
+  function open(target: HTMLElement = document.body) {
+    if (!vm || !vm.el) {
+      return;
+    }
+    target.appendChild(vm.el as HTMLElement);
+  }
+
+  if (target) {
+    open(target);
+  }
+  return {
+    vm,
+    close,
+    open,
+    setTip: (tip: string) => {
+      data.tip = tip;
+    },
+    setLoading: (loading: boolean) => {
+      data.loading = loading;
+    },
+    get loading() {
+      return data.loading;
+    },
+    get $el() {
+      return vm?.el as HTMLElement;
+    },
+  };
+}
diff --git a/src/components/Loading/src/typing.ts b/src/components/Loading/src/typing.ts
new file mode 100644
index 0000000..9af60e6
--- /dev/null
+++ b/src/components/Loading/src/typing.ts
@@ -0,0 +1,10 @@
+import { SizeEnum } from '/@/enums/sizeEnum';
+
+export interface LoadingProps {
+  tip: string;
+  size: SizeEnum;
+  absolute: boolean;
+  loading: boolean;
+  background: string;
+  theme: 'dark' | 'light';
+}
diff --git a/src/components/Loading/src/useLoading.ts b/src/components/Loading/src/useLoading.ts
new file mode 100644
index 0000000..b5f1215
--- /dev/null
+++ b/src/components/Loading/src/useLoading.ts
@@ -0,0 +1,47 @@
+import { unref } from 'vue';
+import { createLoading } from './createLoading';
+import type { LoadingProps } from './typing';
+import type { Ref } from 'vue';
+
+export interface UseLoadingOptions {
+  target?: any;
+  props?: Partial<LoadingProps>;
+}
+
+interface Fn {
+  (): void;
+}
+
+export function useLoading(props: Partial<LoadingProps>): [Fn, Fn, (string) => void];
+export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn, (string) => void];
+
+export function useLoading(opt: Partial<LoadingProps> | Partial<UseLoadingOptions>): [Fn, Fn, (string) => void] {
+  let props: Partial<LoadingProps>;
+  let target: HTMLElement | Ref<ElRef> = document.body;
+
+  if (Reflect.has(opt, 'target') || Reflect.has(opt, 'props')) {
+    const options = opt as Partial<UseLoadingOptions>;
+    props = options.props || {};
+    target = options.target || document.body;
+  } else {
+    props = opt as Partial<LoadingProps>;
+  }
+
+  const instance = createLoading(props, undefined, true);
+
+  const open = (): void => {
+    const t = unref(target as Ref<ElRef>);
+    if (!t) return;
+    instance.open(t);
+  };
+
+  const close = (): void => {
+    instance.close();
+  };
+
+  const setTip = (tip: string) => {
+    instance.setTip(tip);
+  };
+
+  return [open, close, setTip];
+}
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
new file mode 100644
index 0000000..d337681
--- /dev/null
+++ b/src/components/Markdown/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from '/@/utils';
+import markDown from './src/Markdown.vue';
+import markDownViewer from './src/MarkdownViewer.vue';
+
+export const MarkDown = withInstall(markDown);
+export const MarkdownViewer = withInstall(markDownViewer);
+export * from './src/typing';
diff --git a/src/components/Markdown/src/Markdown.vue b/src/components/Markdown/src/Markdown.vue
new file mode 100644
index 0000000..14eca5b
--- /dev/null
+++ b/src/components/Markdown/src/Markdown.vue
@@ -0,0 +1,255 @@
+<template>
+  <div ref="wrapRef"></div>
+</template>
+<script lang="ts">
+  import type { Ref } from 'vue';
+  import { defineComponent, ref, unref, nextTick, computed, watch, onBeforeUnmount, onDeactivated } from 'vue';
+  import Vditor from 'vditor';
+  import 'vditor/dist/index.css';
+  import { useLocale } from '/@/locales/useLocale';
+  import { useModalContext } from '../../Modal';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+  import { getTenantId, getToken } from '/@/utils/auth';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { uploadFile } from '@/api/common/api';
+  import {$electron} from "@/electron";
+
+  type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
+
+  export default defineComponent({
+    inheritAttrs: false,
+    props: {
+      height: { type: Number, default: 360 },
+      value: { type: String, default: '' },
+    },
+    emits: ['change', 'get', 'update:value'],
+    setup(props, { attrs, emit }) {
+      console.log("---Markdown---初始化---")
+      const wrapRef = ref<ElRef>(null);
+      const vditorRef = ref(null) as Ref<Nullable<Vditor>>;
+      const initedRef = ref(false);
+
+      const modalFn = useModalContext();
+
+      const { getLocale } = useLocale();
+      const { getDarkMode } = useRootSetting();
+      const valueRef = ref(props.value || '');
+
+      watch(
+        [() => getDarkMode.value, () => initedRef.value],
+        ([val, inited]) => {
+          if (!inited) {
+            return;
+          }
+          const theme = val === 'dark' ? 'dark' : 'classic';
+          instance.getVditor()?.setTheme(theme);
+        },
+        {
+          immediate: true,
+          flush: 'post',
+        }
+      );
+
+      watch(
+        () => props.value,
+        (v) => {
+          if (v !== valueRef.value) {
+            instance.getVditor()?.setValue(v);
+          }
+          valueRef.value = v;
+        }
+      );
+
+      const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
+        let lang: Lang;
+        switch (unref(getLocale)) {
+          case 'en':
+            lang = 'en_US';
+            break;
+          case 'ja':
+            lang = 'ja_JP';
+            break;
+          case 'ko':
+            lang = 'ko_KR';
+            break;
+          default:
+            lang = 'zh_CN';
+        }
+        return lang;
+      });
+      // 代码逻辑说明: VUEN-1090 markdown 无法上传
+      const uploadUrl = `${window._CONFIG['domianURL']}/sys/common/upload`;
+      const token = getToken();
+      const tenantId = getTenantId() ? getTenantId() : '0';
+      function formatResult(files, responseText): string {
+        let data: any = JSON.parse(responseText);
+        // {"success":true,"message":"markdown/aa_1653391146501.png","code":0,"result":null,"timestamp":1653391146501}'
+        let filename = files[0].name as string;
+        let result = {
+          msg: '',
+          code: 0,
+          data: {
+            errFiles: [''],
+            succMap: {},
+          },
+        };
+        if (data.success) {
+          result.data.errFiles = [];
+          result.data.succMap = {
+            [data.message]: getFileAccessHttpUrl(data.message),
+          };
+        } else {
+          result.code = 1;
+          result.msg = data.message;
+          result.data.errFiles = [filename];
+        }
+        return JSON.stringify(result);
+      }
+      function init() {
+        const wrapEl = unref(wrapRef) as HTMLElement;
+        if (!wrapEl) return;
+
+        // vditor组件本地化的路径配置【QQYUN-12053】
+        let localCdn = '/resource/vditor@3.9.4';
+        if ($electron.isElectron()) {
+          localCdn = '.' + localCdn;
+        }
+
+        const bindValue = { ...attrs, ...props };
+        const insEditor = new Vditor(wrapEl, {
+          theme: getDarkMode.value === 'dark' ? 'dark' : 'classic',
+          lang: unref(getCurrentLang),
+          // 代码逻辑说明: 【TV360X-146】Markdown组件去掉录音选项
+          toolbar: [
+            'emoji',
+            'headings',
+            'bold',
+            'italic',
+            'strike',
+            'link',
+            '|',
+            'list',
+            'ordered-list',
+            'check',
+            'outdent',
+            'indent',
+            '|',
+            'quote',
+            'line',
+            'code',
+            'inline-code',
+            'insert-before',
+            'insert-after',
+            '|',
+            'upload',
+            // 'record',
+            'table',
+            '|',
+            'undo',
+            'redo',
+            '|',
+            'fullscreen',
+            'edit-mode',
+            {
+              name: 'more',
+              toolbar: ['both', 'code-theme', 'content-theme', 'export', 'outline', 'preview', 'devtools', 'info', 'help'],
+            },
+          ],
+          mode: 'sv',
+          cdn: 'https://unpkg.com/vditor@3.10.8',
+          //cdn: localCdn,
+          fullscreen: {
+            index: 520,
+          },
+          preview: {
+            actions: [],
+          },
+          // 代码逻辑说明: VUEN-1090 markdown 无法上传
+          upload: {
+            accept: 'image/*',
+            //url: uploadUrl,
+            fieldName: 'file',
+            extraData: { biz: 'markdown' },
+            setHeaders() {
+              return {
+                'X-Access-Token': token as string,
+                'X-Tenant-Id': tenantId,
+              };
+            },
+            format(files, response) {
+              return formatResult(files, response);
+            },
+            // 遍历文件上传并展示
+            async handler(files) {
+              const uploadSuccess = (res) => {
+                // {"success":true,"message":"markdown/aa_1653391146501.png","code":0,"result":null,"timestamp":1653391146501}'
+                if (res.success) {
+                  vditorRef.value?.insertValue(`![${res.message}](${getFileAccessHttpUrl(res.message)})`);
+                }
+              };
+              for (const file of files) {
+                let params = {
+                  file: file,
+                  filename: file.name,
+                  data: { biz: 'markdown' },
+                };
+                await uploadFile(params, uploadSuccess);
+              }
+            },
+          },
+          input: (v) => {
+            valueRef.value = v;
+            emit('update:value', v);
+            emit('change', v);
+          },
+          after: () => {
+            nextTick(() => {
+              modalFn?.redoModalHeight?.();
+              insEditor.setValue(valueRef.value);
+              vditorRef.value = insEditor;
+              initedRef.value = true;
+              emit('get', instance);
+            });
+          },
+          blur: () => {
+            //unref(vditorRef)?.setValue(props.value);
+          },
+          ...bindValue,
+          cache: {
+            enable: false,
+          },
+        });
+      }
+
+      const instance = {
+        getVditor: (): Vditor => vditorRef.value!,
+      };
+
+      function destroy() {
+        const vditorInstance = unref(vditorRef);
+        if (!vditorInstance) return;
+        try {
+          vditorInstance?.destroy?.();
+        } catch (error) {}
+        vditorRef.value = null;
+        initedRef.value = false;
+      }
+
+      onMountedOrActivated(init);
+
+      onBeforeUnmount(destroy);
+      onDeactivated(destroy);
+      return {
+        wrapRef,
+        ...instance,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【TV360X-318】解决markdown控件禁用状态放大按钮还可以点击
+  :deep(.vditor-menu--disabled) {
+    pointer-events: none;
+  }
+</style>
diff --git a/src/components/Markdown/src/MarkdownViewer.vue b/src/components/Markdown/src/MarkdownViewer.vue
new file mode 100644
index 0000000..f25274a
--- /dev/null
+++ b/src/components/Markdown/src/MarkdownViewer.vue
@@ -0,0 +1,127 @@
+<template>
+  <!-- <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer markdown-body"></div> -->
+  <div class="preview" :class="[{ preview_dark: isDarkTheme }]">
+    <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer vditor-reset"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, watch, ref } from 'vue';
+  import showdown from 'showdown';
+  import 'vditor/dist/index.css';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
+  
+  const converter = new showdown.Converter();
+  converter.setOption('tables', true);
+  converter.setOption('emoji', true);
+  const props = defineProps({
+    value: { type: String },
+    class: { type: String },
+  });
+  const getHtmlData = computed(() => converter.makeHtml(props.value || ''));
+
+  // 代码逻辑说明: 【issues/918】MarkdownViewer加上暗黑主题
+  const isDarkTheme = ref(false);
+  const { getDarkMode } = useRootSetting();
+  watch(
+    () => getDarkMode.value,
+    (value) => {
+      isDarkTheme.value = value === ThemeEnum.DARK;
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .markdown-viewer {
+    width: 100%;
+  }
+  
+  .preview {
+    width: 100%;
+  }
+  .preview_dark {
+    .vditor-reset {
+      color: #d1d5da;
+    }
+    .vditor-reset a,
+    .vditor-ir__link {
+      color: #4285f4;
+    }
+
+    .vditor-reset h1,
+    .vditor-reset h2 {
+      padding-bottom: 0.3em;
+      border-bottom: 1px solid #d1d5da;
+    }
+    .vditor-reset hr {
+      background-color: #d1d5da;
+    }
+    .vditor-reset blockquote {
+      padding: 0 1em;
+      color: #b9b9b9;
+      border-left: 0.25em solid #d1d5da;
+    }
+    .vditor-reset iframe {
+      border: 1px solid #141414;
+    }
+    .vditor-reset table tr {
+      background-color: #2f363d;
+    }
+    .vditor-reset table td,
+    .vditor-reset table th {
+      border: 1px solid #dfe2e5;
+    }
+    .vditor-reset table tbody tr:nth-child(2n) {
+      background-color: #24292e;
+    }
+    .vditor-reset code:not(.hljs):not(.highlight-chroma) {
+      background-color: rgba(66, 133, 244, 0.36);
+    }
+    .vditor-reset .language-abc svg,
+    .vditor-reset .language-abc path {
+      fill: currentColor;
+      color: #d1d5da;
+    }
+    .language-graphviz polygon {
+      fill: rgba(66, 133, 244, 0.36);
+    }
+    .vditor-reset kbd {
+      color: #d1d5da;
+      background-color: #2f363d;
+      border: 1px solid #141414;
+      box-shadow: inset 0 -1px 0 #141414;
+    }
+    .vditor-copy svg {
+      color: #b9b9b9;
+    }
+    .vditor-speech {
+      background-color: #1d2125;
+      border: 1px solid #141414;
+      color: #b9b9b9;
+    }
+    .vditor-speech--current,
+    .vditor-speech:hover {
+      color: #fff;
+    }
+    .vditor-linkcard a {
+      background-color: #1d2125;
+    }
+    .vditor-linkcard a:visited .vditor-linkcard__abstract {
+      color: hsla(0, 0%, 72.5%, 0.36);
+    }
+    .vditor-linkcard__title {
+      color: #d1d5da;
+    }
+    .vditor-linkcard__abstract {
+      color: #b9b9b9;
+    }
+    .vditor-linkcard__site {
+      color: #fff;
+    }
+    .vditor-linkcard__image {
+      background-color: hsla(0, 0%, 72.5%, 0.36);
+    }
+  }
+</style>
diff --git a/src/components/Markdown/src/typing.ts b/src/components/Markdown/src/typing.ts
new file mode 100644
index 0000000..b4bb465
--- /dev/null
+++ b/src/components/Markdown/src/typing.ts
@@ -0,0 +1,4 @@
+import Vditor from 'vditor';
+export interface MarkDownActionType {
+  getVditor: () => Vditor;
+}
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
new file mode 100644
index 0000000..4a59225
--- /dev/null
+++ b/src/components/Menu/index.ts
@@ -0,0 +1,3 @@
+import BasicMenu from './src/BasicMenu.vue';
+
+export { BasicMenu };
diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue
new file mode 100644
index 0000000..6e8d7c4
--- /dev/null
+++ b/src/components/Menu/src/BasicMenu.vue
@@ -0,0 +1,298 @@
+<template>
+  <Menu
+    :selectedKeys="selectedKeys"
+    :defaultSelectedKeys="defaultSelectedKeys"
+    :mode="mode"
+    :openKeys="getOpenKeys"
+    :inlineIndent="inlineIndent"
+    :theme="theme"
+    @openChange="handleOpenChange"
+    :class="getMenuClass"
+    @click="handleMenuClick"
+    :subMenuOpenDelay="0.2"
+    v-bind="getInlineCollapseOptions"
+  >
+    <template v-for="item in items" :key="item.path">
+      <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
+    </template>
+  </Menu>
+</template>
+<script lang="ts">
+  import type { MenuState } from './types';
+  import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
+  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+  import { useOpenKeys } from './useOpenKeys';
+  import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
+  import { isFunction, isUrl } from '/@/utils/is';
+  import { basicProps } from './props';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getCurrentParentPath } from '/@/router/menus';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import { getAllParentPath } from '/@/router/helper/menuHelper';
+  import { createBasicRootMenuContext } from './useBasicMenuContext';
+  import { URL_HASH_TAB } from '/@/utils';
+  import { getMenus } from '/@/router/menus';
+
+  const MIX_EXTERNAL_WHITELIST = ['/myapps/index'];
+
+  export default defineComponent({
+    name: 'BasicMenu',
+    components: {
+      Menu,
+      BasicSubMenuItem,
+    },
+    props: basicProps,
+    emits: ['menuClick'],
+    setup(props, { emit }) {
+      const isClickGo = ref(false);
+      const currentActiveMenu = ref('');
+
+      const menuState = reactive<MenuState>({
+        defaultSelectedKeys: [],
+        openKeys: [],
+        selectedKeys: [],
+        collapsedOpenKeys: [],
+      });
+      // 代码逻辑说明: 【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      createBasicRootMenuContext({ menuState: menuState });
+      const { prefixCls } = useDesign('basic-menu');
+      const { items, mode, accordion } = toRefs(props);
+
+      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
+
+      const { currentRoute, getRoutes } = useRouter();
+
+      const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
+
+      const getIsTopMenu = computed(() => {
+        const { type, mode } = props;
+
+        return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
+      });
+
+      const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
+        return [
+          prefixCls,
+          `justify-${align}`,
+          {
+            [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
+            [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
+          },
+        ];
+      });
+
+      const getInlineCollapseOptions = computed(() => {
+        const isInline = props.mode === MenuModeEnum.INLINE;
+
+        const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
+        if (isInline) {
+          inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
+        }
+        return inlineCollapseOptions;
+      });
+
+      listenerRouteChange((route) => {
+        if (route.name === REDIRECT_NAME) return;
+        handleMenuChange(route);
+        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+
+        if (unref(currentActiveMenu)) {
+          menuState.selectedKeys = [unref(currentActiveMenu)];
+          setOpenKeys(unref(currentActiveMenu));
+        }
+      });
+
+      !props.mixSider &&
+        watch(
+          () => props.items,
+          () => {
+            handleMenuChange();
+          }
+        );
+
+      // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+      async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
+        const { beforeClickFn } = props;
+        // 代码逻辑说明: 【QQYUN-8773】配置外部网址在顶部菜单模式和搜索打不开
+        if (isUrl(key)) {
+          key = key.replace(URL_HASH_TAB, '#');
+          window.open(key);
+          return;
+        }
+        // 代码逻辑说明: 【issues/7706】顶部栏导航内部路由也可以支持采用新浏览器tab打开
+        const menus = await getMenus();
+        const findItem = getMatchingPath(menus, key);
+        if (findItem?.internalOrExternal == true && !findItem?.children?.length) {
+          // 一级菜单当设置了外部打开，只有没有子菜单时才生效
+          window.open(location.origin + key);
+          return;
+        }
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+          const flag = await beforeClickFn(key);
+          if (!flag) return;
+        }
+        // 代码逻辑说明: 【QQYUN-8773】顶部混合导航(顶部左侧组合菜单)一级菜单没有配置redirect默认跳子菜单的第一个
+        if (props.type === MenuTypeEnum.MIX) {
+          const menuItem = getMatchingPath(menus, key);
+          if (handleMixMenuClick(menuItem, key)) {
+            return;
+          }
+          emit('menuClick', key, item);
+        } else {
+          emit('menuClick', key, item);
+        }
+        // emit('menuClick', key, item);
+
+        isClickGo.value = true;
+        // const parentPath = await getCurrentParentPath(key);
+
+        // menuState.openKeys = [parentPath];
+        menuState.selectedKeys = [key];
+      }
+
+      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+        if (unref(isClickGo)) {
+          isClickGo.value = false;
+          return;
+        }
+        const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
+        setOpenKeys(path);
+        if (unref(currentActiveMenu)) return;
+        if (props.isHorizontal && unref(getSplit)) {
+          const parentPath = await getCurrentParentPath(path);
+          menuState.selectedKeys = [parentPath];
+        } else {
+          const parentPaths = await getAllParentPath(props.items, path);
+          menuState.selectedKeys = parentPaths;
+        }
+      }
+      /**
+       * liaozhiyang
+       * 2024-05-18
+       * 获取指定菜单下的第一个菜单(忽略隐藏路由)
+       */
+      function getSubMenu(menus) {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path && !item.hideMenu && !item.children?.length) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getSubMenu(item.children);
+            if (result) {
+              return result;
+            }
+            // update-begin--author:liaozhiyang---date:20250401---for：【issues/9405】修复顶部混合导航模式下点击一级菜单时,如果最后一级是隐藏路由显示不对
+            // 子菜单全部是隐藏路由时，返回上一级作为导航目标
+            if (item.path && !item.hideMenu) {
+              return item;
+            }
+            // update-end--author:liaozhiyang---date:20250401---for：【issues/9405】修复顶部混合导航模式下点击一级菜单时,如果最后一级是隐藏路由显示不对
+          }
+        }
+        return null;
+      }
+
+      /**
+       * liaozhiyang
+       * 2024-05-18
+       * 获取匹配path的菜单
+       */
+      function getMatchingPath(menus, path) {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getMatchingPath(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return null;
+      }
+      /**
+       * 2025-01-14
+       * liaozhiyang
+       * 获取菜单中匹配的path所在的项
+       */
+      const getMatchingMenu = (menus, path) => {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path && !item.redirect && !item.paramPath) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getMatchingMenu(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return '';
+      };
+      /*
+      * 2025-11-12
+      * liaozhiyang
+      * 顶部混合导航(顶部左侧组合菜单)一级菜单点击事件处理。
+      * 1.没有重定向打开子菜单的第一个
+      * 2.有重定向判断router中是否存在该路由且路由是否有对应的组件，存在则打开，不存在则打开子菜单的第一个
+      */
+      function handleMixMenuClick(menuItem, key) {
+        const hasChildren = menuItem && menuItem.children?.length;
+        // 不存在子菜单，直接返回
+        if (!hasChildren) {
+          return false;
+        }
+        // 存在redirect，则判断router中是否存在该路由且路由是否有对应的组件
+        if (menuItem.redirect) {
+          const allRoutes = getRoutes();
+          const findRedirectRoute = allRoutes.find((item) => item.path === menuItem.redirect);
+          if (findRedirectRoute && findRedirectRoute.components) {
+            return false;
+          }
+        }
+        // 判断子菜单第一个path是否存在
+        const subMenuItem = getSubMenu(menuItem.children);
+        if (!subMenuItem?.path) {
+          return false;
+        }
+        const path = subMenuItem.redirect ?? subMenuItem.path;
+        let nextKey = path;
+        if (isUrl(path)) {
+          // window.open(path);
+          // 外部打开emit出去的key不能是url，否则左侧菜单出不来
+          nextKey = key;
+        }
+        // =====================================================================
+        // TODO: 临时代码 - 需要删除！！！
+        // 这是针对敲敲云首页菜单的特殊处理，后续需要重构或删除
+        // =====================================================================
+        // 是外部打开且是白名单内的菜单，则直接打开
+        if (subMenuItem?.internalOrExternal == true && MIX_EXTERNAL_WHITELIST.includes(path)) {
+          window.open(location.origin + path);
+          return true;
+        }
+        // =====================================================================
+        emit('menuClick', nextKey, { title: subMenuItem.title });
+        return true;
+      }
+
+      return {
+        handleMenuClick,
+        getInlineCollapseOptions,
+        getMenuClass,
+        handleOpenChange,
+        getOpenKeys,
+        ...toRefs(menuState),
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>
diff --git a/src/components/Menu/src/components/BasicMenuItem.vue b/src/components/Menu/src/components/BasicMenuItem.vue
new file mode 100644
index 0000000..fd54497
--- /dev/null
+++ b/src/components/Menu/src/components/BasicMenuItem.vue
@@ -0,0 +1,20 @@
+<template>
+  <MenuItem :key="item.path" :title="item.title">
+    <MenuItemContent v-bind="$props" :item="item" />
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { itemProps } from '../props';
+
+  import MenuItemContent from './MenuItemContent.vue';
+  export default defineComponent({
+    name: 'BasicMenuItem',
+    components: { MenuItem: Menu.Item, MenuItemContent },
+    props: itemProps,
+    setup() {
+      return {};
+    },
+  });
+</script>
diff --git a/src/components/Menu/src/components/BasicSubMenuItem.vue b/src/components/Menu/src/components/BasicSubMenuItem.vue
new file mode 100644
index 0000000..6d516da
--- /dev/null
+++ b/src/components/Menu/src/components/BasicSubMenuItem.vue
@@ -0,0 +1,131 @@
+<template>
+  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
+  <SubMenu v-if="menuHasChildren(item) && getShowMenu" :class="[theme]" :key="`submenu-${item.path}`" :popupClassName="prefixCls">
+    <template #title>
+      <MenuItemContent v-bind="$props" :item="item" />
+    </template>
+
+    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
+      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
+    </template>
+  </SubMenu>
+</template>
+<script lang="ts">
+  import type { Menu as MenuType } from '/@/router/types';
+  import { defineComponent, computed, watch } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { checkChildrenHidden } from '/@/utils/common/compUtils';
+  import { itemProps } from '../props';
+  import BasicMenuItem from './BasicMenuItem.vue';
+  import MenuItemContent from './MenuItemContent.vue';
+  import { useBasicRootMenuContext } from '../useBasicMenuContext';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { getMenus } from '/@/router/menus';
+  
+  export default defineComponent({
+    name: 'BasicSubMenuItem',
+    isSubMenu: true,
+    components: {
+      BasicMenuItem,
+      SubMenu: Menu.SubMenu,
+      MenuItemContent,
+    },
+    props: itemProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-subMenu');
+      const { menuState } = useBasicRootMenuContext();
+      const localeStore = useLocaleStore();
+      
+      const getShowMenu = computed(() => !props.item.meta?.hideMenu);
+      function menuHasChildren(menuTreeItem: MenuType): boolean {
+        return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
+          Reflect.has(menuTreeItem, 'children') &&
+          !!menuTreeItem.children &&
+          menuTreeItem.children.length > 0
+          &&checkChildrenHidden(menuTreeItem)
+        );
+      }
+      // 代码逻辑说明: 【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      const getMatchingRouterName = (menus, path) => {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path && !item.redirect && !item.paramPath) {
+            return item.meta?.title;
+          } else if (item.children?.length) {
+            const result = getMatchingRouterName(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return '';
+      };
+
+      watch(
+        () => menuState.selectedKeys,
+        async (value) => {
+          if (value.length && value.includes(props.item.path)) {
+            const menus = await getMenus();
+            const getTitle = getMatchingRouterName(menus, props.item.path);
+            localeStore.setPathTitle(props.item.path, getTitle ? getTitle : props.item.name);
+          }
+        },
+        { immediate: true }
+      );
+      return {
+        prefixCls,
+        menuHasChildren,
+        checkChildrenHidden,
+        getShowMenu,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  // 代码逻辑说明: 【QQYUN-8762】顶部模式下拉菜单颜色统一
+  @prefix-cls: ~'@{namespace}-basic-subMenu';
+  html[data-theme='light'] {
+    .@{prefix-cls}.ant-menu-dark {
+      background-color: var(--header-bg-color);
+      color: rgba(255, 255, 255, 0.9);
+      &.ant-menu-submenu {
+        > .ant-menu {
+          background-color: var(--header-bg-color);
+        }
+      }
+      .ant-menu-item-selected {
+        background-color: var(--header-active-menu-bg-color);
+      }
+    }
+    //【QQYUN-8922】顶部导航三个点菜单样式调整
+    .ant-menu-submenu-placement-bottomLeft.ant-menu-dark.ant-menu-submenu-popup {
+      background-color: var(--header-bg-color);
+      &.ant-menu-dark.ant-menu-submenu > .ant-menu {
+        background-color: var(--header-bg-color);
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+  // 代码逻辑说明: 【QQYUN-9128】暗黑主题顶部模式下拉菜单颜色统一
+  html[data-theme='dark'] {
+    @bgcolor:#212121;
+    .@{prefix-cls}.ant-menu-dark {
+      background-color: @bgcolor;
+      &.ant-menu-submenu {
+        > .ant-menu {
+          background-color: @bgcolor;
+        }
+      }
+    }
+    //【QQYUN-8922】顶部导航三个点菜单样式调整
+    .ant-menu-submenu-placement-bottomLeft.ant-menu-dark.ant-menu-submenu-popup {
+      background-color: @bgcolor;
+      &.ant-menu-dark.ant-menu-submenu > .ant-menu {
+        background-color: @bgcolor;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+</style>
diff --git a/src/components/Menu/src/components/MenuItemContent.vue b/src/components/Menu/src/components/MenuItemContent.vue
new file mode 100644
index 0000000..3044fbc
--- /dev/null
+++ b/src/components/Menu/src/components/MenuItemContent.vue
@@ -0,0 +1,34 @@
+<template>
+  <span :class="`${prefixCls}- flex items-center `">
+    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
+    {{ getI18nName }}
+  </span>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+
+  import Icon from '/@/components/Icon/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { contentProps } from '../props';
+  const { t } = useI18n();
+
+  export default defineComponent({
+    name: 'MenuItemContent',
+    components: {
+      Icon,
+    },
+    props: contentProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item-content');
+      const getI18nName = computed(() => t(props.item?.name));
+      const getIcon = computed(() => props.item?.icon);
+
+      return {
+        prefixCls,
+        getI18nName,
+        getIcon,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
new file mode 100644
index 0000000..c969109
--- /dev/null
+++ b/src/components/Menu/src/index.less
@@ -0,0 +1,76 @@
+@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
+
+.app-top-menu-popup {
+  min-width: 150px;
+}
+
+.@{basic-menu-prefix-cls} {
+  width: 100%;
+
+  .ant-menu-item {
+    transition: unset;
+  }
+
+  &__sidebar-hor {
+    &.ant-menu-horizontal {
+      display: flex;
+      align-items: center;
+
+      &.ant-menu-dark {
+        background-color: transparent;
+        // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
+        color: rgba(255 ,255 ,255, 1);
+        // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          color: #fff;
+          background-color: @top-menu-active-bg-color !important;
+        }
+
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          background-color: @top-menu-active-bg-color;
+        }
+
+        .@{basic-menu-prefix-cls}-item__level1 {
+          background-color: transparent;
+
+          &.ant-menu-item-selected,
+          &.ant-menu-submenu-selected {
+            background-color: @top-menu-active-bg-color !important;
+          }
+        }
+
+        .ant-menu-item,
+        .ant-menu-submenu {
+          &.@{basic-menu-prefix-cls}-item__level1,
+          .ant-menu-submenu-title {
+            height: @header-height;
+            line-height: @header-height;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-menu-submenu,
+  .ant-menu-submenu-inline {
+    transition: unset;
+  }
+
+  .ant-menu-inline.ant-menu-sub {
+    box-shadow: unset !important;
+    transition: unset;
+  }
+}
diff --git a/src/components/Menu/src/props.ts b/src/components/Menu/src/props.ts
new file mode 100644
index 0000000..ed3f010
--- /dev/null
+++ b/src/components/Menu/src/props.ts
@@ -0,0 +1,60 @@
+import type { Menu } from '/@/router/types';
+import type { PropType } from 'vue';
+
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { propTypes } from '/@/utils/propTypes';
+import type { MenuTheme } from 'ant-design-vue';
+import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
+export const basicProps = {
+  items: {
+    type: Array as PropType<Menu[]>,
+    default: () => [],
+  },
+  collapsedShowTitle: propTypes.bool,
+  // 最好是4 倍数
+  inlineIndent: propTypes.number.def(20),
+  // 菜单组件的mode属性
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: MenuModeEnum.INLINE,
+  },
+
+  type: {
+    type: String as PropType<MenuTypeEnum>,
+    default: MenuTypeEnum.MIX,
+  },
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: ThemeEnum.DARK,
+  },
+  inlineCollapsed: propTypes.bool,
+  mixSider: propTypes.bool,
+
+  isHorizontal: propTypes.bool,
+  accordion: propTypes.bool.def(true),
+  beforeClickFn: {
+    type: Function as PropType<(key: string) => Promise<boolean>>,
+  },
+};
+
+export const itemProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: {},
+  },
+  level: propTypes.number,
+  theme: propTypes.oneOf(['dark', 'light']),
+  showTitle: propTypes.bool,
+  isHorizontal: propTypes.bool,
+};
+
+export const contentProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: null,
+  },
+  showTitle: propTypes.bool.def(true),
+  level: propTypes.number.def(0),
+  isHorizontal: propTypes.bool.def(true),
+};
diff --git a/src/components/Menu/src/types.ts b/src/components/Menu/src/types.ts
new file mode 100644
index 0000000..ad711c2
--- /dev/null
+++ b/src/components/Menu/src/types.ts
@@ -0,0 +1,25 @@
+// import { ComputedRef } from 'vue';
+// import { ThemeEnum } from '/@/enums/appEnum';
+// import { MenuModeEnum } from '/@/enums/menuEnum';
+export interface MenuState {
+  // 默认选中的列表
+  defaultSelectedKeys: string[];
+
+  // 模式
+  // mode: MenuModeEnum;
+
+  // // 主题
+  // theme: ComputedRef<ThemeEnum> | ThemeEnum;
+
+  // 缩进
+  inlineIndent?: number;
+
+  // 展开数组
+  openKeys: string[];
+
+  // 当前选中的菜单项 key 数组
+  selectedKeys: string[];
+
+  // 收缩状态下展开的数组
+  collapsedOpenKeys: string[];
+}
diff --git a/src/components/Menu/src/useBasicMenuContext.ts b/src/components/Menu/src/useBasicMenuContext.ts
new file mode 100644
index 0000000..4e687c7
--- /dev/null
+++ b/src/components/Menu/src/useBasicMenuContext.ts
@@ -0,0 +1,16 @@
+import type { InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface BasicRootMenuContextProps {
+  menuState: any;
+}
+
+const key: InjectionKey<BasicRootMenuContextProps> = Symbol();
+
+export function createBasicRootMenuContext(context: BasicRootMenuContextProps) {
+  return createContext<BasicRootMenuContextProps>(context, key, { readonly: false, native: true });
+}
+
+export function useBasicRootMenuContext() {
+  return useContext<BasicRootMenuContextProps>(key);
+}
diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts
new file mode 100644
index 0000000..3e35eac
--- /dev/null
+++ b/src/components/Menu/src/useOpenKeys.ts
@@ -0,0 +1,78 @@
+import { MenuModeEnum } from '/@/enums/menuEnum';
+import type { Menu as MenuType } from '/@/router/types';
+import type { MenuState } from './types';
+
+import { computed, Ref, toRaw } from 'vue';
+
+import { unref } from 'vue';
+import { uniq } from 'lodash-es';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { getAllParentPath } from '/@/router/helper/menuHelper';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+
+export function useOpenKeys(menuState: MenuState, menus: Ref<MenuType[]>, mode: Ref<MenuModeEnum>, accordion: Ref<boolean>) {
+  const { getCollapsed, getIsMixSidebar } = useMenuSetting();
+
+  async function setOpenKeys(path: string) {
+    if (mode.value === MenuModeEnum.HORIZONTAL) {
+      return;
+    }
+    const native = unref(getIsMixSidebar);
+    useTimeoutFn(
+      () => {
+        const menuList = toRaw(menus.value);
+        if (menuList?.length === 0) {
+          menuState.openKeys = [];
+          return;
+        }
+        if (!unref(accordion)) {
+          menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
+        } else {
+          menuState.openKeys = getAllParentPath(menuList, path);
+        }
+      },
+      16,
+      !native
+    );
+  }
+
+  const getOpenKeys = computed(() => {
+    const collapse = unref(getIsMixSidebar) ? false : unref(getCollapsed);
+
+    return collapse ? menuState.collapsedOpenKeys : menuState.openKeys;
+  });
+
+  /**
+   * @description:  重置值
+   */
+  function resetKeys() {
+    menuState.selectedKeys = [];
+    menuState.openKeys = [];
+  }
+
+  function handleOpenChange(openKeys: string[]) {
+    if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion) || unref(getIsMixSidebar)) {
+      menuState.openKeys = openKeys;
+    } else {
+      // const menuList = toRaw(menus.value);
+      // getAllParentPath(menuList, path);
+      const rootSubMenuKeys: string[] = [];
+      for (const { children, path } of unref(menus)) {
+        if (children && children.length > 0) {
+          rootSubMenuKeys.push(path);
+        }
+      }
+      if (!unref(getCollapsed)) {
+        const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
+        if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
+          menuState.openKeys = openKeys;
+        } else {
+          menuState.openKeys = latestOpenKey ? [latestOpenKey] : [];
+        }
+      } else {
+        menuState.collapsedOpenKeys = openKeys;
+      }
+    }
+  }
+  return { setOpenKeys, resetKeys, getOpenKeys, handleOpenChange };
+}
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
new file mode 100644
index 0000000..6188c5c
--- /dev/null
+++ b/src/components/Modal/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '/@/utils';
+import './src/index.less';
+import basicModal from './src/BasicModal.vue';
+
+export const BasicModal = withInstall(basicModal);
+export { useModalContext } from './src/hooks/useModalContext';
+export { useModal, useModalInner } from './src/hooks/useModal';
+export * from './src/typing';
diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue
new file mode 100644
index 0000000..4769ea5
--- /dev/null
+++ b/src/components/Modal/src/BasicModal.vue
@@ -0,0 +1,317 @@
+<template>
+  <Modal v-bind="getBindValue" @cancel="handleCancel">
+    <template #closeIcon v-if="!$slots.closeIcon">
+      <ModalClose :canFullscreen="getProps.canFullscreen" :fullScreen="fullScreenRef" :commentSpan="commentSpan" :enableComment="getProps.enableComment" @comment="handleComment" @cancel="handleCancel" @fullscreen="handleFullScreen" />
+    </template>
+
+    <template #title v-if="!isNoTitle">
+      <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" @dblclick="handleTitleDbClick" />
+    </template>
+
+    <template #footer v-if="!$slots.footer">
+      <ModalFooter v-bind="getBindValue" @ok="handleOk" @cancel="handleCancel">
+        <template #[item]="data" v-for="item in Object.keys($slots)">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </ModalFooter>
+    </template>
+
+    <a-row class="jeecg-modal-wrapper">
+      <a-col :span="24-commentSpan" class="jeecg-modal-content">
+        <ModalWrapper
+          :useWrapper="getProps.useWrapper"
+          :footerOffset="wrapperFooterOffset"
+          :fullScreen="fullScreenRef"
+          ref="modalWrapperRef"
+          :loading="getProps.loading"
+          :loading-tip="getProps.loadingTip"
+          :minHeight="getProps.minHeight"
+          :maxHeight="getProps.maxHeight"
+          :height="getWrapperHeight"
+          :visible="visibleRef"
+          :modalHeaderHeight="getProps.modalHeaderHeight"
+          :modalFooterHeight="footer !== undefined && !footer ? 0 : getProps.modalFooterHeight"
+          v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
+          @ext-height="handleExtHeight"
+          @height-change="handleHeightChange">
+          <slot></slot>
+        </ModalWrapper>
+      </a-col>
+      
+      <a-col :span="commentSpan" class="jeecg-comment-outer">
+        <slot name="comment"></slot>
+      </a-col>
+      
+    </a-row>
+    
+    <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </Modal>
+</template>
+<script lang="ts">
+  import type { ModalProps, ModalMethods } from './typing';
+
+  import { defineComponent, computed, ref, watch, unref, watchEffect, toRef, getCurrentInstance, nextTick } from 'vue';
+  import Modal from './components/Modal';
+  import ModalWrapper from './components/ModalWrapper.vue';
+  import ModalClose from './components/ModalClose.vue';
+  import ModalFooter from './components/ModalFooter.vue';
+  import ModalHeader from './components/ModalHeader.vue';
+  import { isFunction } from '/@/utils/is';
+  import { deepMerge } from '/@/utils';
+  import { basicProps } from './props';
+  import { useFullScreen } from './hooks/useModalFullScreen';
+  import { omit } from 'lodash-es';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+
+
+  export default defineComponent({
+    name: 'BasicModal',
+    components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
+    inheritAttrs: false,
+    props: basicProps,
+    emits: ['visible-change', 'open-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible', 'update:open', 'fullScreen','comment-open'],
+    setup(props, { emit, attrs , slots}) {
+      const visibleRef = ref(false);
+      const propsRef = ref<Partial<ModalProps> | null>(null);
+      const modalWrapperRef = ref<any>(null);
+      const { prefixCls } = useDesign('basic-modal');
+      // modal   Bottom and top height
+      const extHeightRef = ref(0);
+      const modalMethods: ModalMethods = {
+        setModalProps,
+        emitVisible: undefined,
+        redoModalHeight: () => {
+          nextTick(() => {
+            if (unref(modalWrapperRef)) {
+              (unref(modalWrapperRef) as any).setModalHeight();
+            }
+          });
+        },
+      };
+
+      const instance = getCurrentInstance();
+      if (instance) {
+        emit('register', modalMethods, instance.uid);
+      }
+      const { getIsMobile } = useAppInject();
+
+      // Custom title component: get title
+      const getMergeProps = computed((): Recordable => {
+        const result = {
+          ...props,
+          ...(unref(propsRef) as any),
+        };
+        // 代码逻辑说明: 【QQYUN-8643】弹窗移动端弹窗统一全屏
+        if (getIsMobile.value) {
+          result.canFullscreen = false;
+          result.defaultFullscreen = true;
+        }
+        return result;
+      });
+        //是否未设置标题
+        const isNoTitle = computed(() => {
+            //标题为空并且不含有标题插槽
+            return !unref(getMergeProps).title && !slots.title;
+        });
+
+      const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
+        modalWrapperRef,
+        extHeightRef,
+        wrapClassName: toRef(getMergeProps.value, 'wrapClassName'),
+      });
+
+      // modal component does not need title and origin buttons
+      const getProps = computed((): Recordable => {
+        const opt = {
+          ...unref(getMergeProps),
+          visible: unref(visibleRef),
+          okButtonProps: undefined,
+          cancelButtonProps: undefined,
+          title: undefined,
+        };
+        return {
+          ...opt,
+          wrapClassName: unref(getWrapClassName),
+        };
+      });
+
+      const getBindValue = computed((): Recordable => {
+        // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+        const attr = {
+          ...attrs,
+          ...unref(getMergeProps),
+          open: unref(visibleRef),
+          wrapClassName: unref(getWrapClassName),
+        };
+        if (unref(fullScreenRef)) {
+          return omit(attr, ['height', 'title', 'visible']);
+        }
+        return omit(attr, ['title', 'visible']);
+      });
+
+      const getWrapperHeight = computed(() => {
+        if (unref(fullScreenRef)) return undefined;
+        return unref(getProps).height;
+      });
+
+      watchEffect(() => {
+        fullScreenRef.value = !!props.defaultFullscreen;
+        // 代码逻辑说明: 【QQYUN-8643】弹窗移动端弹窗统一全屏
+        if (getIsMobile.value) {
+          fullScreenRef.value = true
+        }
+      });
+
+      watchEffect(() => {
+        visibleRef.value = !!props.visible;
+      });
+
+      watchEffect(() => {
+        visibleRef.value = !!props.open;
+      });
+
+      watch(
+        () => unref(visibleRef),
+        (v) => {
+          emit('visible-change', v);
+          emit('open-change', v);
+          emit('update:visible', v);
+          emit('update:open', v);
+          instance && modalMethods.emitVisible?.(v, instance.uid);
+          nextTick(() => {
+            if (props.scrollTop && v && unref(modalWrapperRef)) {
+              (unref(modalWrapperRef) as any).scrollTop();
+            }
+          });
+        },
+        {
+          immediate: false,
+        }
+      );
+
+      // 取消事件
+      async function handleCancel(e: Event) {
+        e?.stopPropagation();
+        // 过滤自定义关闭按钮的空白区域
+        if ((e.target as HTMLElement)?.classList?.contains(prefixCls + '-close--custom')) return;
+        if (props.closeFunc && isFunction(props.closeFunc)) {
+          const isClose: boolean = await props.closeFunc();
+          visibleRef.value = !isClose;
+          return;
+        }
+
+        visibleRef.value = false;
+        emit('cancel', e);
+      }
+
+      /**
+       * @description: 设置modal参数
+       */
+      function setModalProps(props: Partial<ModalProps>): void {
+        // Keep the last setModalProps
+        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+        if (Reflect.has(props, 'visible')) {
+          visibleRef.value = !!props.visible;
+        }
+        if (Reflect.has(props, 'open')) {
+          visibleRef.value = !!props.open;
+        }
+        if (Reflect.has(props, 'defaultFullscreen')) {
+          fullScreenRef.value = !!props.defaultFullscreen;
+           // 代码逻辑说明: 【QQYUN-8643】弹窗移动端弹窗统一全屏
+          if (getIsMobile.value) {
+            fullScreenRef.value = true
+          }
+        }
+      }
+
+      function handleOk(e: Event) {
+        emit('ok', e);
+      }
+
+      function handleHeightChange(height: string) {
+        emit('height-change', height);
+      }
+
+      function handleExtHeight(height: number) {
+        extHeightRef.value = height;
+      }
+
+      function handleTitleDbClick(e) {
+        if (!props.canFullscreen) return;
+        e.stopPropagation();
+        handleFullScreen(e);
+      }
+
+      // 代码逻辑说明: modal支持评论 slot
+      const commentSpan = ref(0);
+      watch(()=>props.enableComment, (flag)=>{
+        handleComment(flag)
+      }, {immediate:true});
+      function handleComment(flag){
+        if(flag=== true){
+          commentSpan.value = 6
+        }else{
+          commentSpan.value = 0
+        }
+        // 代码逻辑说明: 【TV360X-485】开启评论之后弹窗按钮居右隔一个评论的距离
+        emit('comment-open', commentSpan.value === 0, commentSpan.value);
+      }
+
+      // 代码逻辑说明: 【QQYUN-5866】放大行数自适应
+      watch(fullScreenRef,(val)=>{
+        emit('fullScreen',val);
+      });
+
+      return {
+        handleCancel,
+        getBindValue,
+        getProps,
+        handleFullScreen,
+        fullScreenRef,
+        getMergeProps,
+        handleOk,
+        visibleRef,
+        omit,
+        modalWrapperRef,
+        handleExtHeight,
+        handleHeightChange,
+        handleTitleDbClick,
+        getWrapperHeight,
+        commentSpan,
+        handleComment,
+        isNoTitle
+      };
+    },
+  });
+</script>
+<style lang="less">
+  /*update-begin-author:taoyan date:2022-7-27 for:modal评论区域样式*/
+  .jeecg-comment-outer {
+    border-left: 1px solid #f0f0f0;
+    .ant-tabs-nav-wrap{
+    /*  text-align: center;*/
+    }
+  }
+  .jeecg-modal-content{
+    >.scroll-container{
+      // 代码逻辑说明: 【QQYUN-7297】表单讨论弹窗放大按钮时只显示一部分---
+      padding: 6px;
+    }
+  }
+  /*update-end-author:taoyan date:2022-7-27 for:modal评论区域样式*/
+
+  // wrapper设为100%，兼容之前写过的弹窗自定义样式
+  .jeecg-modal-wrapper,
+  .jeecg-modal-content {
+    height: 100%;
+  }
+  html[data-theme='dark'] {
+    .jeecg-comment-outer {
+      border-left: 1px solid rgba(253, 253, 253, 0.12);
+    }
+  }
+</style>
diff --git a/src/components/Modal/src/JModal/JModal.vue b/src/components/Modal/src/JModal/JModal.vue
new file mode 100644
index 0000000..04936fc
--- /dev/null
+++ b/src/components/Modal/src/JModal/JModal.vue
@@ -0,0 +1,337 @@
+<template>
+  <a-modal v-bind="getBindValue" @cancel="handleCancel" :body-style="!fullScreenRef ? bodyStyle : {}">
+    <slot></slot>
+    <template #closeIcon v-if="!$slots.closeIcon">
+      <div class="jeecg-basic-modal-close" v-if="canFullscreen">
+        <Tooltip :title="t('component.modal.restore')" placement="bottom" v-if="fullScreenRef">
+          <FullscreenExitOutlined role="full" @click="handleFullScreen" />
+        </Tooltip>
+        <Tooltip :title="t('component.modal.maximize')" placement="bottom" v-else>
+          <FullscreenOutlined role="close" @click="handleFullScreen" />
+        </Tooltip>
+        <Tooltip :title="t('component.modal.close')" placement="bottom">
+          <CloseOutlined @click="handleCancel" />
+        </Tooltip>
+      </div>
+    </template>
+
+    <template #title v-if="!isNoTitle">
+      <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" @dblclick="handleTitleDbClick" />
+    </template>
+
+    <template #footer v-if="!$slots.footer">
+      <ModalFooter v-bind="getBindValue" @ok="handleOk" @cancel="handleCancel">
+        <template #[item]="data" v-for="item in Object.keys($slots)">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </ModalFooter>
+    </template>
+
+    <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </a-modal>
+</template>
+
+<script lang="ts" name="j-modal">
+  import { computed, defineComponent, getCurrentInstance, ref, toRef, unref, watch, watchEffect } from 'vue';
+  import ModalFooter from '@/components/Modal/src/components/ModalFooter.vue';
+  import ModalClose from '@/components/Modal/src/components/ModalClose.vue';
+  import ModalHeader from '@/components/Modal/src/components/ModalHeader.vue';
+  import { omit } from 'lodash-es';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import type { ModalMethods, ModalProps } from '@/components/Modal';
+  import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { deepMerge } from '@/utils';
+  import { basicProps } from '@/components/Modal/src/props';
+  import Modal from '/@/components/Modal/src/components/Modal';
+  import { isFunction } from '@/utils/is';
+  export default defineComponent({
+    name: 'JModal',
+    methods: { omit },
+    components: {
+      CloseOutlined,
+      Tooltip,
+      FullscreenExitOutlined,
+      FullscreenOutlined,
+      ModalHeader,
+      ModalClose,
+      ModalFooter,
+      Modal,
+    },
+    props: {
+      //是否全屏
+      fullscreen: {
+        type: Boolean,
+        default: false,
+      },
+      ...basicProps,
+    },
+    emits: ['visible-change', 'open-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible', 'update:open', 'fullScreen'],
+    setup(props, { emit, attrs, slots }) {
+      const { getIsMobile } = useAppInject();
+      const visibleRef = ref(false);
+      const propsRef = ref<Partial<ModalProps> | null>(null);
+      const fullScreenRef = ref<any>(props.fullscreen);
+      const fullScreen = ref<boolean>(false);
+      const { t } = useI18n();
+      const bodyStyle = ref<any>({
+        height: props.maxHeight ? props.maxHeight : '600px',
+        'overflow-y': 'auto',
+      });
+      const modalMethods: ModalMethods = {
+        setModalProps,
+        emitVisible: undefined,
+      };
+
+      const getMergeProps = computed((): Recordable => {
+        const result = {
+          ...props,
+          ...(unref(propsRef) as any),
+        };
+        if (getIsMobile.value) {
+          result.fullscreen = false;
+        }
+        return result;
+      });
+
+      const getBindValue = computed((): Recordable => {
+        const attr = {
+          ...attrs,
+          ...unref(getMergeProps),
+          open: unref(visibleRef),
+          wrapClassName: unref(getWrapClassName),
+        };
+        if (unref(fullScreenRef)) {
+          return omit(attr, ['height', 'visible']);
+        }
+        return omit(attr, ['visible']);
+      });
+
+      //整合warpClassName
+      const getWrapClassName = computed(() => {
+        let clsName = toRef(getMergeProps.value, 'wrapClassName').value || '';
+        // 代码逻辑说明: 【issues/7260】原生a-modal关闭按钮位置偏移
+        clsName = `${clsName} jeecg-modal-code-generate`;
+        return unref(fullScreenRef) ? `jeecg-full-screen-modal-code-generate ${clsName} ` : unref(clsName);
+      });
+
+      //获取props
+      const getProps = computed((): Recordable => {
+        const opt = {
+          ...unref(getMergeProps),
+          visible: unref(visibleRef),
+          okButtonProps: undefined,
+          cancelButtonProps: undefined,
+          title: undefined,
+        };
+        return {
+          ...opt,
+          wrapClassName: unref(getWrapClassName),
+        };
+      });
+
+      //注册model,instance.uid 避免多个model冲突
+      const instance = getCurrentInstance();
+      if (instance) {
+        emit('register', modalMethods, instance.uid);
+      }
+
+      /**
+       * 是否含有标题
+       */
+      function isNoTitle() {
+        //标题为空并且不含有标题插槽
+        return !unref(getMergeProps).title && !slots.title;
+      }
+
+      /**
+       * 放大缩小事件
+       * @param e
+       */
+      function handleFullScreen(e: Event) {
+        e?.stopPropagation();
+        e?.preventDefault();
+        fullScreenRef.value = !unref(fullScreenRef);
+      }
+
+      // 取消事件
+      async function handleCancel(e: Event) {
+        e?.stopPropagation();
+        // 过滤自定义关闭按钮的空白区域
+        if (props.closeFunc && isFunction(props.closeFunc)) {
+          const isClose: boolean = await props.closeFunc();
+          visibleRef.value = !isClose;
+          return;
+        }
+        visibleRef.value = false;
+        emit('cancel', e);
+      }
+
+      /**
+       * 确定事件
+       * @param e
+       */
+      function handleOk(e: Event) {
+        emit('ok', e);
+      }
+
+      function handleTitleDbClick(e) {
+        if (!props.fullscreen) return;
+        e.stopPropagation();
+        handleFullScreen(e);
+      }
+      /**
+       * 设置modal参数
+       */
+      function setModalProps(props: Partial<ModalProps>): void {
+        // Keep the last setModalProps
+        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
+        if (Reflect.has(props, 'visible')) {
+          visibleRef.value = !!props.visible;
+        }
+        if (Reflect.has(props, 'open')) {
+          visibleRef.value = !!props.open;
+        }
+        if (Reflect.has(props, 'defaultFullscreen')) {
+          fullScreenRef.value = !!props.defaultFullscreen;
+          if (getIsMobile.value) {
+            fullScreenRef.value = true;
+          }
+        }
+      }
+
+      /**
+       * 监听放大缩小
+       */
+      watchEffect(() => {
+        fullScreenRef.value = props.fullscreen;
+        if (getIsMobile.value) {
+          fullScreenRef.value = true;
+        }
+      });
+
+      /**
+       * 监听model的显示隐藏
+       */
+      watchEffect(() => {
+        visibleRef.value = !!props.visible;
+      });
+
+      /**
+       * 监听model的显示隐藏
+       */
+      watchEffect(() => {
+        visibleRef.value = !!props.open;
+      });
+
+      watch(
+        () => unref(visibleRef),
+        (v) => {
+          emit('visible-change', v);
+          emit('open-change', v);
+          emit('update:visible', v);
+          emit('update:open', v);
+          instance && modalMethods.emitVisible?.(v, instance.uid);
+        },
+        {
+          immediate: false,
+        }
+      );
+
+      return {
+        isNoTitle,
+        getBindValue,
+        fullScreenRef,
+        handleFullScreen,
+        fullScreen,
+        t,
+        handleCancel,
+        handleOk,
+        getProps,
+        getMergeProps,
+        handleTitleDbClick,
+        bodyStyle,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  /*begin 放大关闭按钮样式*/
+  .jeecg-basic-modal-close {
+    display: flex;
+    height: 95%;
+    align-items: center;
+
+    > span {
+      margin-left: 10px;
+      font-size: 16px;
+    }
+
+    &--can-full {
+      > span {
+        margin-left: 12px;
+      }
+    }
+
+    &:not(&--can-full) {
+      > span:nth-child(1) {
+        &:hover {
+          font-weight: 700;
+        }
+      }
+    }
+
+    & span:nth-child(1) {
+      display: inline-block;
+      padding: 10px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    & span:last-child {
+      padding: 10px 10px 10px 0;
+      &:hover {
+        color: @error-color;
+      }
+    }
+  }
+  /*end 放大关闭按钮样式*/
+</style>
+
+<style lang="less">
+  /*begin 全屏弹窗modal样式*/
+  .jeecg-full-screen-modal-code-generate {
+    .ant-modal {
+      max-width: 100%;
+      top: 0 !important;
+      padding-bottom: 0 !important;
+      margin: 0 !important;
+      width: 100% !important;
+      overflow-y: auto;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh);
+    }
+    .ant-modal-body {
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+  /*end 全屏弹窗modal样式*/
+  // 代码逻辑说明: 【issues/7260】原生a-modal关闭按钮位置偏移
+  .jeecg-modal-code-generate {
+    .ant-modal {
+      .ant-modal-close {
+        top: 8px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Modal/src/components/Modal.tsx b/src/components/Modal/src/components/Modal.tsx
new file mode 100644
index 0000000..f2def6d
--- /dev/null
+++ b/src/components/Modal/src/components/Modal.tsx
@@ -0,0 +1,31 @@
+import { Modal } from 'ant-design-vue';
+import { defineComponent, toRefs, unref } from 'vue';
+import { basicProps } from '../props';
+import { useModalDragMove } from '../hooks/useModalDrag';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+import { extendSlots } from '/@/utils/helper/tsxHelper';
+import { omit } from 'lodash-es';
+
+export default defineComponent({
+  name: 'Modal',
+  inheritAttrs: false,
+  props: omit(basicProps, ['visible']),
+  emits: ['cancel'],
+  setup(props, { slots, emit }) {
+    const { open, draggable, destroyOnClose } = toRefs(props);
+    const attrs = useAttrs();
+    useModalDragMove({
+      visible: open,
+      destroyOnClose,
+      draggable,
+    });
+    const onCancel = (e: Event) => {
+      emit('cancel', e);
+    };
+
+    return () => {
+      const propsData = { ...unref(attrs), ...props, onCancel } as Recordable;
+      return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
+    };
+  },
+});
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
new file mode 100644
index 0000000..1d210b7
--- /dev/null
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -0,0 +1,160 @@
+<template>
+  <div :class="getClass">
+    <template v-if="fullScreenStatus">
+      <Tooltip :title="t('component.modal.restore')" placement="bottom" v-if="fullScreen">
+        <FullscreenExitOutlined role="full" @click="handleFullScreen" />
+      </Tooltip>
+      <Tooltip :title="t('component.modal.maximize')" placement="bottom" v-else>
+        <FullscreenOutlined role="close" @click="handleFullScreen" />
+      </Tooltip>
+    </template>
+
+    <!-- 是否开启评论区域 -->
+    <template v-if="enableComment">
+      <Tooltip title="收起" placement="bottom" v-if="commentSpan>0">
+        <RightSquareOutlined @click="handleCloseComment" style="font-size: 16px"/>
+      </Tooltip>
+      <Tooltip title="展开" placement="bottom" v-else>
+        <LeftSquareOutlined @click="handleOpenComment" style="font-size: 16px"/>
+      </Tooltip>
+    </template>
+    
+    <Tooltip :title="t('component.modal.close')" placement="bottom">
+      <CloseOutlined @click="handleCancel" />
+    </Tooltip>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined } from '@ant-design/icons-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { Tooltip } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  export default defineComponent({
+    name: 'ModalClose',
+    components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined },
+    props: {
+      canFullscreen: { type: Boolean, default: true },
+      fullScreen: { type: Boolean },
+      enableComment: { type: Boolean, default: false },
+      commentSpan: { type: Number, default: 0 },
+    },
+    emits: ['cancel', 'fullscreen', 'comment'],
+    setup(props, { emit }) {
+      const { prefixCls } = useDesign('basic-modal-close');
+      const { t } = useI18n();
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          `${prefixCls}--custom`,
+          {
+            [`${prefixCls}--can-full`]: props.canFullscreen || props.enableComment,
+          },
+        ];
+      });
+
+      function handleCancel(e: Event) {
+        emit('cancel', e);
+      }
+
+      function handleFullScreen(e: Event) {
+        e?.stopPropagation();
+        e?.preventDefault();
+        if(props.commentSpan==0 || props.enableComment == false){
+          emit('fullscreen');
+        }
+      }
+
+      /**
+       * 开启评论区域
+       * @param e
+       */
+      function handleOpenComment(e: Event){
+        e?.stopPropagation();
+        e?.preventDefault();
+        if(props.fullScreen==false){
+          emit('fullscreen');
+        }
+        emit('comment', true);
+      }
+
+      /**
+       * 关闭评论区域
+       * @param e
+       */
+      function handleCloseComment(e: Event){
+        e?.stopPropagation();
+        e?.preventDefault();
+        emit('comment', false);
+      }
+
+      /**
+       * 有评论的时候不需要设置全屏
+       */
+      const fullScreenStatus = computed(()=>{
+        if(props.enableComment===true){
+          return false
+        }else{
+          return props.canFullscreen;
+        }
+      });
+      
+      return {
+        t,
+        getClass,
+        prefixCls,
+        handleCancel,
+        handleFullScreen,
+        handleOpenComment,
+        handleCloseComment,
+        fullScreenStatus
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-modal-close';
+  .@{prefix-cls} {
+    display: flex;
+    height: 95%;
+    align-items: center;
+    // 代码逻辑说明: 【issues/7260】原生a-modal关闭按钮位置偏移
+    margin-top: -2px;
+    > span {
+      margin-left: 48px;
+      font-size: 16px;
+    }
+
+    &--can-full {
+      > span {
+        margin-left: 12px;
+      }
+    }
+
+    &:not(&--can-full) {
+      > span:nth-child(1) {
+        &:hover {
+          font-weight: 700;
+        }
+      }
+    }
+
+    & span:nth-child(1) {
+      display: inline-block;
+      padding: 10px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    & span:last-child {
+      padding: 10px 10px 10px 0;
+      &:hover {
+        color: @error-color;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Modal/src/components/ModalFooter.vue b/src/components/Modal/src/components/ModalFooter.vue
new file mode 100644
index 0000000..7bc5786
--- /dev/null
+++ b/src/components/Modal/src/components/ModalFooter.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <slot name="insertFooter"></slot>
+    <a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn">
+      {{ cancelText }}
+    </a-button>
+    <slot name="centerFooter"></slot>
+    <a-button :type="okType" @click="handleOk" :loading="confirmLoading" v-bind="okButtonProps" v-if="showOkBtn">
+      {{ okText }}
+    </a-button>
+    <slot name="appendFooter"></slot>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { basicProps } from '../props';
+  export default defineComponent({
+    name: 'BasicModalFooter',
+    props: basicProps,
+    emits: ['ok', 'cancel'],
+    setup(_, { emit }) {
+      function handleOk(e: Event) {
+        emit('ok', e);
+      }
+
+      function handleCancel(e: Event) {
+        emit('cancel', e);
+      }
+
+      return { handleOk, handleCancel };
+    },
+  });
+</script>
diff --git a/src/components/Modal/src/components/ModalHeader.vue b/src/components/Modal/src/components/ModalHeader.vue
new file mode 100644
index 0000000..bf6c112
--- /dev/null
+++ b/src/components/Modal/src/components/ModalHeader.vue
@@ -0,0 +1,22 @@
+<template>
+  <BasicTitle :helpMessage="helpMessage">
+    {{ title }}
+  </BasicTitle>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+  import { BasicTitle } from '/@/components/Basic';
+
+  export default defineComponent({
+    name: 'BasicModalHeader',
+    components: { BasicTitle },
+    emits: ['dblclick'],
+    props: {
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+      },
+      title: { type: String },
+    },
+  });
+</script>
diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
new file mode 100644
index 0000000..b6ce0d8
--- /dev/null
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -0,0 +1,214 @@
+<template>
+  <ScrollContainer ref="wrapperRef">
+    <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
+      <slot></slot>
+    </div>
+  </ScrollContainer>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue';
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+  import { ScrollContainer } from '/@/components/Container';
+  import { createModalContext } from '../hooks/useModalContext';
+  import { useMutationObserver } from '@vueuse/core';
+
+  const props = {
+    loading: { type: Boolean },
+    useWrapper: { type: Boolean, default: true },
+    modalHeaderHeight: { type: Number, default: 57 },
+    modalFooterHeight: { type: Number, default: 74 },
+    minHeight: { type: Number, default: null },
+    maxHeight: { type: Number, default: null },
+    height: { type: Number },
+    footerOffset: { type: Number, default: 0 },
+    visible: { type: Boolean },
+    fullScreen: { type: Boolean },
+    loadingTip: { type: String },
+  };
+
+  export default defineComponent({
+    name: 'ModalWrapper',
+    components: { ScrollContainer },
+    inheritAttrs: false,
+    props,
+    emits: ['height-change', 'ext-height'],
+    setup(props, { emit }) {
+      const wrapperRef = ref<ComponentRef>(null);
+      const spinRef = ref<ElRef>(null);
+      const realHeightRef = ref(0);
+      const minRealHeightRef = ref(0);
+
+      let realHeight = 0;
+
+      let stopElResizeFn: Fn = () => {};
+
+      useWindowSizeFn(setModalHeight.bind(null, false));
+
+      // 代码逻辑说明: 【TV360X-145】将弹窗还原全屏后，关闭再打开窗口变小了
+      let observer,
+        recordCount: any = {};
+      watch(
+        () => props.visible,
+        () => {
+          if (props.visible && !observer && !(props.maxHeight || props.height)) {
+            recordCount = {};
+            observer = useMutationObserver(
+              spinRef,
+              () => {
+                setModalHeight({
+                  source: 'muob',
+                  callBack: (height) => {
+                    const count = recordCount[height];
+                    if (count) {
+                      recordCount[height] = ++recordCount[height];
+                      if (count > 10) {
+                        observer.stop();
+                        recordCount = {};
+                        observer = null;
+                      }
+                    } else {
+                      recordCount = {};
+                      recordCount[height] = 1;
+                    }
+                  },
+                });
+              },
+              {
+                attributes: true,
+                subtree: true,
+              }
+            );
+          } else {
+            if (observer) {
+              observer.stop();
+              observer = null;
+            }
+          }
+        },
+        { immediate: true }
+      );
+
+      createModalContext({
+        redoModalHeight: setModalHeight,
+      });
+
+      const spinStyle = computed((): CSSProperties => {
+        // 代码逻辑说明: 【QQYUN-7147】Model的高度设置不生效
+        if (props.fullScreen) {
+          return {
+            height: `${unref(realHeightRef)}px`,
+          };
+        } else {
+          const defaultMiniHeight = 200;
+          if (props.height != undefined) {
+            let height: number = props.height;
+            if (props.minHeight === null) {
+              return {
+                height: `${height}px`,
+              };
+            } else {
+              return {
+                height: `${props.minHeight > height ? props.minHeight : height}px`,
+              };
+            }
+          } else {
+            return {
+              minHeight: `${props.minHeight === null ? defaultMiniHeight : props.minHeight}px`,
+              // 代码逻辑说明: 【QQYUN-7641】basicModal组件添加MaxHeight属性
+              maxHeight: `${props.maxHeight ? props.maxHeight : unref(realHeightRef)}px`,
+            };
+          }
+        }
+      });
+
+      watchEffect(() => {
+        props.useWrapper && setModalHeight();
+      });
+
+      watch(
+        () => props.fullScreen,
+        (v) => {
+          setModalHeight();
+          if (!v) {
+            realHeightRef.value = minRealHeightRef.value;
+          } else {
+            minRealHeightRef.value = realHeightRef.value;
+          }
+        }
+      );
+
+      onMounted(() => {
+        const { modalHeaderHeight, modalFooterHeight } = props;
+        emit('ext-height', modalHeaderHeight + modalFooterHeight);
+      });
+
+      onUnmounted(() => {
+        stopElResizeFn && stopElResizeFn();
+      });
+
+      async function scrollTop() {
+        nextTick(() => {
+          const wrapperRefDom = unref(wrapperRef);
+          if (!wrapperRefDom) return;
+          (wrapperRefDom as any)?.scrollTo?.(0);
+        });
+      }
+
+      async function setModalHeight(option?) {
+        console.log("---------性能监控--------setModalHeight----------")
+        const options = option || {};
+        const source = options.source;
+        const callBack = options.callBack;
+        // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
+        // 加上这个,就必须在使用的时候传递父级的visible
+        if (!props.visible) return;
+        const wrapperRefDom = unref(wrapperRef);
+        if (!wrapperRefDom) return;
+        // 代码逻辑说明: 【QQYUN-8573】BasicModal组件在非全屏的情况下最大高度获取异常，不论内容高度是否超出屏幕高度，都等于内容高度
+        const bodyDom = wrapperRefDom.$el.parentElement?.parentElement?.parentElement;
+        if (!bodyDom) return;
+        // bodyDom.style.padding = '0';
+        await nextTick();
+
+        try {
+          const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+          if (!modalDom) return;
+
+          const modalRect = getComputedStyle(modalDom as Element).top;
+          const modalTop = Number.parseInt(modalRect);
+          let maxHeight = window.innerHeight - modalTop * 2 + (props.footerOffset! || 0) - props.modalFooterHeight - props.modalHeaderHeight;
+
+          // 距离顶部过进会出现滚动条
+          if (modalTop < 40) {
+            maxHeight -= 26;
+          }
+          await nextTick();
+          const spinEl = unref(spinRef);
+
+          if (!spinEl) return;
+          await nextTick();
+          // if (!realHeight) {
+          realHeight = spinEl.scrollHeight;
+          // }
+
+          if (props.fullScreen) {
+            realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
+          } else {
+            realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight;
+          }
+          // 代码逻辑说明: 【QQYUN-9035】basicModal不设置maxHeight或height会一直执行setModalHeight，需即使销毁MutationObserver
+          if (source == 'muob') {
+            callBack(realHeightRef.value);
+          }
+          
+          emit('height-change', unref(realHeightRef));
+        } catch (error) {
+          console.log(error);
+        }
+      }
+
+      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight };
+    },
+  });
+</script>
diff --git a/src/components/Modal/src/hooks/useModal.ts b/src/components/Modal/src/hooks/useModal.ts
new file mode 100644
index 0000000..8af596f
--- /dev/null
+++ b/src/components/Modal/src/hooks/useModal.ts
@@ -0,0 +1,154 @@
+import type { UseModalReturnType, ModalMethods, ModalProps, ReturnMethods, UseModalInnerReturnType } from '../typing';
+import { ref, onUnmounted, unref, getCurrentInstance, reactive, watchEffect, nextTick, toRaw } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { isFunction } from '/@/utils/is';
+import { isEqual } from 'lodash-es';
+import { tryOnUnmounted } from '@vueuse/core';
+import { error } from '/@/utils/log';
+import { computed } from 'vue';
+
+const dataTransfer = reactive<any>({});
+
+const visibleData = reactive<{ [key: number]: boolean }>({});
+
+/**
+ * @description: Applicable to independent modal and call outside
+ */
+export function useModal(): UseModalReturnType {
+  const modal = ref<Nullable<ModalMethods>>(null);
+  const loaded = ref<Nullable<boolean>>(false);
+  const uid = ref<string>('');
+
+  function register(modalMethod: ModalMethods, uuid: string) {
+    if (!getCurrentInstance()) {
+      throw new Error('useModal() can only be used inside setup() or functional components!');
+    }
+    uid.value = uuid;
+    isProdMode() &&
+      onUnmounted(() => {
+        modal.value = null;
+        loaded.value = false;
+        dataTransfer[unref(uid)] = null;
+      });
+    if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
+
+    modal.value = modalMethod;
+    loaded.value = true;
+    modalMethod.emitVisible = (visible: boolean, uid: number) => {
+      visibleData[uid] = visible;
+    };
+  }
+
+  const getInstance = () => {
+    const instance = unref(modal);
+    if (!instance) {
+      error('useModal instance is undefined!');
+    }
+    return instance;
+  };
+
+  const methods: ReturnMethods = {
+    setModalProps: (props: Partial<ModalProps>): void => {
+      getInstance()?.setModalProps(props);
+    },
+
+    getVisible: computed((): boolean => {
+      return visibleData[~~unref(uid)];
+    }),
+    getOpen: computed((): boolean => {
+      return visibleData[~~unref(uid)];
+    }),
+    redoModalHeight: () => {
+      getInstance()?.redoModalHeight?.();
+    },
+
+    openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {
+      // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+      getInstance()?.setModalProps({
+        open: visible,
+      });
+
+      if (!data) return;
+      const id = unref(uid);
+      if (openOnSet) {
+        dataTransfer[id] = null;
+        dataTransfer[id] = toRaw(data);
+        return;
+      }
+      const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data));
+      if (!equal) {
+        dataTransfer[id] = toRaw(data);
+      }
+    },
+
+    closeModal: () => {
+      // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+      getInstance()?.setModalProps({ open: false });
+    },
+  };
+  return [register, methods];
+}
+
+export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
+  const modalInstanceRef = ref<Nullable<ModalMethods>>(null);
+  const currentInstance = getCurrentInstance();
+  const uidRef = ref<string>('');
+
+  const getInstance = () => {
+    const instance = unref(modalInstanceRef);
+    if (!instance) {
+      error('useModalInner instance is undefined!');
+    }
+    return instance;
+  };
+
+  const register = (modalInstance: ModalMethods, uuid: string) => {
+    isProdMode() &&
+      tryOnUnmounted(() => {
+        modalInstanceRef.value = null;
+      });
+    uidRef.value = uuid;
+    modalInstanceRef.value = modalInstance;
+    currentInstance?.emit('register', modalInstance, uuid);
+  };
+
+  watchEffect(() => {
+    const data = dataTransfer[unref(uidRef)];
+    if (!data) return;
+    if (!callbackFn || !isFunction(callbackFn)) return;
+    nextTick(() => {
+      callbackFn(data);
+    });
+  });
+
+  return [
+    register,
+    {
+      changeLoading: (loading = true) => {
+        getInstance()?.setModalProps({ loading });
+      },
+      getVisible: computed((): boolean => {
+        return visibleData[~~unref(uidRef)];
+      }),
+      getOpen: computed((): boolean => {
+        return visibleData[~~unref(uidRef)];
+      }),
+      changeOkLoading: (loading = true) => {
+        getInstance()?.setModalProps({ confirmLoading: loading });
+      },
+
+      closeModal: () => {
+        getInstance()?.setModalProps({ open: false });
+      },
+
+      setModalProps: (props: Partial<ModalProps>) => {
+        getInstance()?.setModalProps(props);
+      },
+
+      redoModalHeight: () => {
+        const callRedo = getInstance()?.redoModalHeight;
+        callRedo && callRedo();
+      },
+    },
+  ];
+};
diff --git a/src/components/Modal/src/hooks/useModalContext.ts b/src/components/Modal/src/hooks/useModalContext.ts
new file mode 100644
index 0000000..94d4c4e
--- /dev/null
+++ b/src/components/Modal/src/hooks/useModalContext.ts
@@ -0,0 +1,16 @@
+import { InjectionKey } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface ModalContextProps {
+  redoModalHeight: () => void;
+}
+
+const key: InjectionKey<ModalContextProps> = Symbol();
+
+export function createModalContext(context: ModalContextProps) {
+  return createContext<ModalContextProps>(context, key);
+}
+
+export function useModalContext() {
+  return useContext<ModalContextProps>(key);
+}
diff --git a/src/components/Modal/src/hooks/useModalDrag.ts b/src/components/Modal/src/hooks/useModalDrag.ts
new file mode 100644
index 0000000..38e35e1
--- /dev/null
+++ b/src/components/Modal/src/hooks/useModalDrag.ts
@@ -0,0 +1,111 @@
+import { Ref, unref, watchEffect } from 'vue';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+
+export interface UseModalDragMoveContext {
+  draggable: Ref<boolean>;
+  destroyOnClose: Ref<boolean | undefined> | undefined;
+  visible: Ref<boolean>;
+}
+
+export function useModalDragMove(context: UseModalDragMoveContext) {
+  const getStyle = (dom: any, attr: any) => {
+    return getComputedStyle(dom)[attr];
+  };
+  const drag = (wrap: any) => {
+    if (!wrap) return;
+    wrap.setAttribute('data-drag', unref(context.draggable));
+    const dialogHeaderEl = wrap.querySelector('.ant-modal-header');
+    const dragDom = wrap.querySelector('.ant-modal');
+
+    if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
+
+    dialogHeaderEl.style.cursor = 'move';
+
+    dialogHeaderEl.onmousedown = (e: any) => {
+      if (!e) return;
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX;
+      const disY = e.clientY;
+      const screenWidth = document.body.clientWidth; // body当前宽度
+      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
+
+      const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+      const dragDomheight = dragDom.offsetHeight; // 对话框高度
+
+      const minDragDomLeft = dragDom.offsetLeft;
+
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+      const minDragDomTop = dragDom.offsetTop;
+      let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+      // 代码逻辑说明: [issue/430]弹出页面出现自动吸顶，无法移动和显示头部---
+      if(maxDragDomTop<0){
+        maxDragDomTop = screenHeight - dragDom.offsetTop
+      }
+      // 获取到的值带px 正则匹配替换
+      const domLeft = getStyle(dragDom, 'left');
+      const domTop = getStyle(dragDom, 'top');
+      let styL = +domLeft;
+      let styT = +domTop;
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (domLeft.includes('%')) {
+        styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100);
+        styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100);
+      } else {
+        styL = +domLeft.replace(/px/g, '');
+        styT = +domTop.replace(/px/g, '');
+      }
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
+
+        // 边界处理
+        if (-left > minDragDomLeft) {
+          left = -minDragDomLeft;
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft;
+        }
+
+        if (-top > minDragDomTop) {
+          top = -minDragDomTop;
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop;
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+      };
+
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  };
+
+  const handleDrag = () => {
+    const dragWraps = document.querySelectorAll('.ant-modal-wrap');
+    for (const wrap of Array.from(dragWraps)) {
+      if (!wrap) continue;
+      const display = getStyle(wrap, 'display');
+      const draggable = wrap.getAttribute('data-drag');
+      if (display !== 'none') {
+        // 拖拽位置
+        if (draggable === null || unref(context.destroyOnClose)) {
+          drag(wrap);
+        }
+      }
+    }
+  };
+
+  watchEffect(() => {
+    if (!unref(context.visible) || !unref(context.draggable)) {
+      return;
+    }
+    useTimeoutFn(() => {
+      handleDrag();
+    }, 30);
+  });
+}
diff --git a/src/components/Modal/src/hooks/useModalFullScreen.ts b/src/components/Modal/src/hooks/useModalFullScreen.ts
new file mode 100644
index 0000000..b53563a
--- /dev/null
+++ b/src/components/Modal/src/hooks/useModalFullScreen.ts
@@ -0,0 +1,43 @@
+import { computed, Ref, ref, unref } from 'vue';
+
+export interface UseFullScreenContext {
+  wrapClassName: Ref<string | undefined>;
+  modalWrapperRef: Ref<ComponentRef>;
+  extHeightRef: Ref<number>;
+}
+
+export function useFullScreen(context: UseFullScreenContext) {
+  // const formerHeightRef = ref(0);
+  const fullScreenRef = ref(false);
+
+  const getWrapClassName = computed(() => {
+    const clsName = unref(context.wrapClassName) || '';
+    return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
+  });
+
+  function handleFullScreen(e: Event) {
+    e && e.stopPropagation();
+    fullScreenRef.value = !unref(fullScreenRef);
+
+    // const modalWrapper = unref(context.modalWrapperRef);
+
+    // if (!modalWrapper) return;
+
+    // const wrapperEl = modalWrapper.$el as HTMLElement;
+    // if (!wrapperEl) return;
+    // const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;
+
+    // if (!modalWrapSpinEl) return;
+
+    // if (!unref(formerHeightRef) && unref(fullScreenRef)) {
+    //   formerHeightRef.value = modalWrapSpinEl.offsetHeight;
+    // }
+
+    // if (unref(fullScreenRef)) {
+    //   modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`;
+    // } else {
+    //   modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
+    // }
+  }
+  return { getWrapClassName, handleFullScreen, fullScreenRef };
+}
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
new file mode 100644
index 0000000..d39a0bc
--- /dev/null
+++ b/src/components/Modal/src/index.less
@@ -0,0 +1,142 @@
+.ant-modal-root .fullscreen-modal {
+  overflow: hidden;
+
+  .ant-modal {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+
+    &-content {
+      height: 100%;
+    }
+
+    .ant-modal-header,
+    .@{namespace}-basic-title {
+      cursor: default !important;
+    }
+    // update-begin--author:liaozhiyang---date:20241225---for：【issues/7601】ant-design-vue@4.2.6后弹窗全屏底部有空隙
+    & > div:has( > .ant-modal-content) {
+      height: 100%;
+    }
+    // update-end--author:liaozhiyang---date:20241225---for：【issues/7601】ant-design-vue@4.2.6后弹窗全屏底部有空隙
+  }
+}
+
+.ant-modal {
+  width: 520px;
+  padding-bottom: 0;
+
+  .ant-modal-body > .scrollbar {
+    padding: 14px;
+  }
+
+  .ant-modal-title {
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 16px;
+
+    .base-title {
+      cursor: move !important;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 0;
+
+    > .scrollbar > .scrollbar__bar.is-horizontal {
+      display: none;
+    }
+  }
+
+  .ant-modal-large {
+    top: 60px;
+
+    &--mini {
+      top: 16px;
+    }
+  }
+
+  .ant-modal-header {
+    padding: 16px;
+  }
+
+  .ant-modal-content {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+
+  .ant-modal-footer {
+    button + button {
+      margin-left: 10px;
+    }
+  }
+
+  .ant-modal-close {
+    font-weight: normal;
+    outline: none;
+  }
+
+  .ant-modal-close-x {
+    // update-begin--author:liaozhiyang---date:20241010---for：【issues/7260】原生a-modal关闭按钮位置偏移
+    // display: inline-block;
+    // width: 96px;
+    // height: 56px;
+    // line-height: 56px;
+    // update-end--author:liaozhiyang---date:20241010---for：【issues/7260】原生a-modal关闭按钮位置偏移
+  }
+
+  .ant-modal-confirm-body {
+    .ant-modal-confirm-content {
+      // color: #fff;
+
+      > * {
+        color: @text-color-help-dark;
+      }
+    }
+  }
+
+  .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+    color: @error-color;
+  }
+
+  .ant-modal-confirm-btns {
+    .ant-btn:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .ant-modal-confirm-info {
+    .ant-modal-confirm-body > .anticon {
+      color: @warning-color;
+    }
+  }
+
+  .ant-modal-confirm-confirm.success {
+    .ant-modal-confirm-body > .anticon {
+      color: @success-color;
+    }
+  }
+}
+
+.ant-modal-confirm .ant-modal-body {
+  padding: 24px !important;
+}
+@media screen and (max-height: 600px) {
+  .ant-modal {
+    top: 60px;
+  }
+}
+@media screen and (max-height: 540px) {
+  .ant-modal {
+    top: 30px;
+  }
+}
+@media screen and (max-height: 480px) {
+  .ant-modal {
+    top: 10px;
+  }
+}
diff --git a/src/components/Modal/src/props.ts b/src/components/Modal/src/props.ts
new file mode 100644
index 0000000..4112690
--- /dev/null
+++ b/src/components/Modal/src/props.ts
@@ -0,0 +1,91 @@
+import type { PropType, CSSProperties } from 'vue';
+import type { ModalWrapperProps } from './typing';
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+export const modalProps = {
+  visible: { type: Boolean },
+  scrollTop: { type: Boolean, default: true },
+  height: { type: Number },
+  minHeight: { type: Number },
+  // open drag
+  draggable: { type: Boolean, default: true },
+  centered: { type: Boolean },
+  cancelText: { type: String, default: t('common.cancelText') },
+  okText: { type: String, default: t('common.okText') },
+
+  closeFunc: Function as PropType<() => Promise<boolean>>,
+
+  modalHeaderHeight: Number,
+  modalFooterHeight: Number,
+};
+
+export const basicProps = Object.assign({}, modalProps, {
+  defaultFullscreen: { type: Boolean },
+  // Can it be full screen
+  canFullscreen: { type: Boolean, default: true },
+  // After enabling the wrapper, the bottom can be increased in height
+  wrapperFooterOffset: { type: Number, default: 0 },
+  // Warm reminder message
+  helpMessage: [String, Array] as PropType<string | string[]>,
+  // Whether to setting wrapper
+  useWrapper: { type: Boolean, default: true },
+  loading: { type: Boolean },
+  loadingTip: { type: String },
+  /**
+   * @description: Show close button
+   */
+  showCancelBtn: { type: Boolean, default: true },
+  /**
+   * @description: Show confirmation button
+   */
+  showOkBtn: { type: Boolean, default: true },
+
+  wrapperProps: Object as PropType<Partial<ModalWrapperProps>>,
+
+  afterClose: Function as PropType<() => Promise<VueNode>>,
+
+  bodyStyle: Object as PropType<CSSProperties>,
+
+  closable: { type: Boolean, default: true },
+
+  closeIcon: Object as PropType<VueNode>,
+
+  confirmLoading: { type: Boolean },
+
+  destroyOnClose: { type: Boolean },
+
+  footer: Object as PropType<VueNode>,
+
+  getContainer: Function as PropType<() => any>,
+
+  mask: { type: Boolean, default: true },
+
+  maskClosable: { type: Boolean, default: true },
+  keyboard: { type: Boolean, default: true },
+
+  maskStyle: Object as PropType<CSSProperties>,
+
+  okType: { type: String, default: 'primary' },
+
+  okButtonProps: Object as PropType<ButtonProps>,
+
+  cancelButtonProps: Object as PropType<ButtonProps>,
+
+  title: { type: String },
+
+  visible: { type: Boolean },
+
+  open: { type: Boolean },
+
+  width: [String, Number] as PropType<string | number>,
+
+  wrapClassName: { type: String },
+
+  zIndex: { type: Number },
+  maxHeight: { type: Number },
+  // 是否开启评论区域
+  enableComment: { type: Boolean, default: false },
+});
diff --git a/src/components/Modal/src/typing.ts b/src/components/Modal/src/typing.ts
new file mode 100644
index 0000000..1d7fb9f
--- /dev/null
+++ b/src/components/Modal/src/typing.ts
@@ -0,0 +1,217 @@
+import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
+import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
+/**
+ * @description: 弹窗对外暴露的方法
+ */
+export interface ModalMethods {
+  setModalProps: (props: Partial<ModalProps>) => void;
+  emitVisible?: (visible: boolean, uid: number) => void;
+  redoModalHeight?: () => void;
+}
+
+export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
+
+export interface ReturnMethods extends ModalMethods {
+  openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;
+  closeModal: () => void;
+  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
+}
+
+export type UseModalReturnType = [RegisterFn, ReturnMethods];
+
+export interface ReturnInnerMethods extends ModalMethods {
+  closeModal: () => void;
+  changeLoading: (loading: boolean) => void;
+  changeOkLoading: (loading: boolean) => void;
+  getVisible?: ComputedRef<boolean>;
+  getOpen?: ComputedRef<boolean>;
+  redoModalHeight: () => void;
+}
+
+export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
+
+export interface ModalProps {
+  minHeight?: number;
+  height?: number;
+  // 启用wrapper后 底部可以适当增加高度
+  wrapperFooterOffset?: number;
+  draggable?: boolean;
+  scrollTop?: boolean;
+
+  // 是否可以进行全屏
+  canFullscreen?: boolean;
+  defaultFullscreen?: boolean;
+  visible?: boolean;
+  open?: boolean;
+  // 温馨提醒信息
+  helpMessage: string | string[];
+
+  // 是否使用modalWrapper
+  useWrapper: boolean;
+
+  loading: boolean;
+  loadingTip?: string;
+
+  wrapperProps: Omit<ModalWrapperProps, 'loading'>;
+
+  showOkBtn: boolean;
+  showCancelBtn: boolean;
+  closeFunc: () => Promise<any>;
+
+  /**
+   * Specify a function that will be called when modal is closed completely.
+   * @type Function
+   */
+  afterClose?: () => any;
+
+  /**
+   * Body style for modal body element. Such as height, padding etc.
+   * @default {}
+   * @type object
+   */
+  bodyStyle?: CSSProperties;
+
+  /**
+   * Text of the Cancel button
+   * @default 'cancel'
+   * @type string
+   */
+  cancelText?: string;
+
+  /**
+   * Centered Modal
+   * @default false
+   * @type boolean
+   */
+  centered?: boolean;
+
+  /**
+   * Whether a close (x) button is visible on top right of the modal dialog or not
+   * @default true
+   * @type boolean
+   */
+  closable?: boolean;
+  /**
+   * Whether a close (x) button is visible on top right of the modal dialog or not
+   */
+  closeIcon?: VNodeChild | JSX.Element;
+
+  /**
+   * Whether to apply loading visual effect for OK button or not
+   * @default false
+   * @type boolean
+   */
+  confirmLoading?: boolean;
+
+  /**
+   * Whether to unmount child components on onClose
+   * @default false
+   * @type boolean
+   */
+  destroyOnClose?: boolean;
+
+  /**
+   * Footer content, set as :footer="null" when you don't need default buttons
+   * @default OK and Cancel buttons
+   * @type any (string | slot)
+   */
+  footer?: VNodeChild | JSX.Element;
+
+  /**
+   * Return the mount node for Modal
+   * @default () => document.body
+   * @type Function
+   */
+  getContainer?: (instance: any) => HTMLElement;
+
+  /**
+   * Whether show mask or not.
+   * @default true
+   * @type boolean
+   */
+  mask?: boolean;
+
+  /**
+   * Whether to close the modal dialog when the mask (area outside the modal) is clicked
+   * @default true
+   * @type boolean
+   */
+  maskClosable?: boolean;
+
+  /**
+   * Style for modal's mask element.
+   * @default {}
+   * @type object
+   */
+  maskStyle?: CSSProperties;
+
+  /**
+   * Text of the OK button
+   * @default 'OK'
+   * @type string
+   */
+  okText?: string;
+
+  /**
+   * Button type of the OK button
+   * @default 'primary'
+   * @type string
+   */
+  okType?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+
+  /**
+   * The ok button props, follow jsx rules
+   * @type object
+   */
+  okButtonProps?: ButtonProps;
+
+  /**
+   * The cancel button props, follow jsx rules
+   * @type object
+   */
+  cancelButtonProps?: ButtonProps;
+
+  /**
+   * The modal dialog's title
+   * @type any (string | slot)
+   */
+  title?: VNodeChild | JSX.Element;
+
+  /**
+   * Width of the modal dialog
+   * @default 520
+   * @type string | number
+   */
+  width?: string | number;
+
+  /**
+   * The class name of the container of the modal dialog
+   * @type string
+   */
+  wrapClassName?: string;
+
+  /**
+   * The z-index of the Modal
+   * @default 1000
+   * @type number
+   */
+  zIndex?: number;
+
+  enableComment?: boolean;
+
+  modalHeaderHeight: number;
+  modalFooterHeight: number;
+}
+
+export interface ModalWrapperProps {
+  footerOffset?: number;
+  loading: boolean;
+  modalHeaderHeight: number;
+  modalFooterHeight: number;
+  minHeight: number;
+  height: number;
+  visible: boolean;
+  fullScreen: boolean;
+  useWrapper: boolean;
+}
diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
new file mode 100644
index 0000000..d096264
--- /dev/null
+++ b/src/components/Page/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from '/@/utils';
+
+import pageFooter from './src/PageFooter.vue';
+import pageWrapper from './src/PageWrapper.vue';
+
+export const PageFooter = withInstall(pageFooter);
+export const PageWrapper = withInstall(pageWrapper);
diff --git a/src/components/Page/injectionKey.ts b/src/components/Page/injectionKey.ts
new file mode 100644
index 0000000..9cc4278
--- /dev/null
+++ b/src/components/Page/injectionKey.ts
@@ -0,0 +1 @@
+export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue
new file mode 100644
index 0000000..5440d2a
--- /dev/null
+++ b/src/components/Page/src/PageFooter.vue
@@ -0,0 +1,49 @@
+<template>
+  <div :class="prefixCls" :style="{ width: getCalcContentWidth }">
+    <div :class="`${prefixCls}__left`">
+      <slot name="left"></slot>
+    </div>
+    <slot></slot>
+    <div :class="`${prefixCls}__right`">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'PageFooter',
+    inheritAttrs: false,
+    setup() {
+      const { prefixCls } = useDesign('page-footer');
+      const { getCalcContentWidth } = useMenuSetting();
+      return { prefixCls, getCalcContentWidth };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-page-footer';
+
+  .@{prefix-cls} {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: @page-footer-z-index;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 0 24px;
+    line-height: 44px;
+    background-color: @component-background;
+    border-top: 1px solid @border-color-base;
+    box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
+    transition: width 0.2s;
+
+    &__left {
+      flex: 1 1;
+    }
+  }
+</style>
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
new file mode 100644
index 0000000..a9a5536
--- /dev/null
+++ b/src/components/Page/src/PageWrapper.vue
@@ -0,0 +1,186 @@
+<template>
+  <div :class="getClass" ref="wrapperRef">
+    <PageHeader
+      :ghost="ghost"
+      :title="title"
+      v-bind="omit($attrs, 'class')"
+      ref="headerRef"
+      v-if="content || $slots.headerContent || title || getHeaderSlots.length"
+    >
+      <template #default>
+        <template v-if="content">
+          {{ content }}
+        </template>
+        <slot name="headerContent" v-else></slot>
+      </template>
+      <template #[item]="data" v-for="item in getHeaderSlots">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </PageHeader>
+
+    <div class="overflow-hidden" :class="getContentClass" :style="getContentStyle" ref="contentRef">
+      <slot></slot>
+    </div>
+
+    <PageFooter v-if="getShowFooter" ref="footerRef">
+      <template #left>
+        <slot name="leftFooter"></slot>
+      </template>
+      <template #right>
+        <slot name="rightFooter"></slot>
+      </template>
+    </PageFooter>
+  </div>
+</template>
+<script lang="ts">
+  import { CSSProperties, PropType, provide } from 'vue';
+
+  import { defineComponent, computed, watch, ref, unref } from 'vue';
+  import PageFooter from './PageFooter.vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { omit } from 'lodash-es';
+  import { PageHeader } from 'ant-design-vue';
+  import { useContentHeight } from '/@/hooks/web/useContentHeight';
+  import { PageWrapperFixedHeightKey } from '../injectionKey';
+
+  export default defineComponent({
+    name: 'PageWrapper',
+    components: { PageFooter, PageHeader },
+    inheritAttrs: false,
+    props: {
+      title: propTypes.string,
+      dense: propTypes.bool,
+      ghost: propTypes.bool,
+      content: propTypes.string,
+      contentStyle: {
+        type: Object as PropType<CSSProperties>,
+      },
+      contentBackground: propTypes.bool,
+      contentFullHeight: propTypes.bool,
+      contentClass: propTypes.string,
+      fixedHeight: propTypes.bool,
+      upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
+    },
+    setup(props, { slots, attrs }) {
+      const wrapperRef = ref(null);
+      const headerRef = ref(null);
+      const contentRef = ref(null);
+      const footerRef = ref(null);
+      const { prefixCls } = useDesign('page-wrapper');
+
+      provide(
+        PageWrapperFixedHeightKey,
+        computed(() => props.fixedHeight)
+      );
+
+      const getIsContentFullHeight = computed(() => {
+        return props.contentFullHeight;
+      });
+
+      const getUpwardSpace = computed(() => props.upwardSpace);
+      const { redoHeight, setCompensation, contentHeight } = useContentHeight(
+        getIsContentFullHeight,
+        wrapperRef,
+        [headerRef, footerRef],
+        [contentRef],
+        getUpwardSpace
+      );
+      setCompensation({ useLayoutFooter: true, elements: [footerRef] });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--dense`]: props.dense,
+          },
+          attrs.class ?? {},
+        ];
+      });
+
+      const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);
+
+      const getHeaderSlots = computed(() => {
+        return Object.keys(omit(slots, 'default', 'leftFooter', 'rightFooter', 'headerContent'));
+      });
+
+      const getContentStyle = computed((): CSSProperties => {
+        const { contentFullHeight, contentStyle, fixedHeight } = props;
+        if (!contentFullHeight) {
+          return { ...contentStyle };
+        }
+
+        const height = `${unref(contentHeight)}px`;
+        return {
+          ...contentStyle,
+          minHeight: height,
+          ...(fixedHeight ? { height } : {}),
+        };
+      });
+
+      const getContentClass = computed(() => {
+        const { contentBackground, contentClass } = props;
+        return [
+          `${prefixCls}-content`,
+          contentClass,
+          {
+            [`${prefixCls}-content-bg`]: contentBackground,
+          },
+        ];
+      });
+
+      watch(
+        () => [getShowFooter.value],
+        () => {
+          redoHeight();
+        },
+        {
+          flush: 'post',
+          immediate: true,
+        }
+      );
+
+      return {
+        getContentStyle,
+        wrapperRef,
+        headerRef,
+        contentRef,
+        footerRef,
+        getClass,
+        getHeaderSlots,
+        prefixCls,
+        getShowFooter,
+        omit,
+        getContentClass,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-page-wrapper';
+
+  .@{prefix-cls} {
+    position: relative;
+
+    .@{prefix-cls}-content {
+      margin: 16px;
+    }
+
+    .ant-page-header {
+      &:empty {
+        padding: 0;
+      }
+    }
+
+    &-content-bg {
+      background-color: @component-background;
+    }
+
+    &--dense {
+      .@{prefix-cls}-content {
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Preview/index.ts b/src/components/Preview/index.ts
new file mode 100644
index 0000000..c0b4685
--- /dev/null
+++ b/src/components/Preview/index.ts
@@ -0,0 +1,2 @@
+export { default as ImagePreview } from './src/Preview.vue';
+export { createImgPreview } from './src/functional';
diff --git a/src/components/Preview/src/Functional.vue b/src/components/Preview/src/Functional.vue
new file mode 100644
index 0000000..84c51c2
--- /dev/null
+++ b/src/components/Preview/src/Functional.vue
@@ -0,0 +1,532 @@
+<script lang="tsx">
+  import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
+  import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+  import resumeSvg from '/@/assets/svg/preview/resume.svg';
+  import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
+  import scaleSvg from '/@/assets/svg/preview/scale.svg';
+  import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
+  import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
+
+  enum StatueEnum {
+    LOADING,
+    DONE,
+    FAIL,
+  }
+  interface ImgState {
+    currentUrl: string;
+    imgScale: number;
+    imgRotate: number;
+    imgTop: number;
+    imgLeft: number;
+    currentIndex: number;
+    status: StatueEnum;
+    moveX: number;
+    moveY: number;
+    show: boolean;
+  }
+  const props = {
+    show: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    imageList: {
+      type: [Array] as PropType<string[]>,
+      default: null,
+    },
+    index: {
+      type: Number as PropType<number>,
+      default: 0,
+    },
+    scaleStep: {
+      type: Number as PropType<number>,
+    },
+    defaultWidth: {
+      type: Number as PropType<number>,
+    },
+    maskClosable: {
+      type: Boolean as PropType<boolean>,
+    },
+    rememberState: {
+      type: Boolean as PropType<boolean>,
+    },
+  };
+
+  const prefixCls = 'img-preview';
+  export default defineComponent({
+    name: 'ImagePreview',
+    props,
+    emits: ['img-load', 'img-error'],
+    setup(props, { expose, emit }) {
+      interface stateInfo {
+        scale: number;
+        rotate: number;
+        top: number;
+        left: number;
+      }
+      const stateMap = new Map<string, stateInfo>();
+      const imgState = reactive<ImgState>({
+        currentUrl: '',
+        imgScale: 1,
+        imgRotate: 0,
+        imgTop: 0,
+        imgLeft: 0,
+        status: StatueEnum.LOADING,
+        currentIndex: 0,
+        moveX: 0,
+        moveY: 0,
+        show: props.show,
+      });
+
+      const wrapElRef = ref<HTMLDivElement | null>(null);
+      const imgElRef = ref<HTMLImageElement | null>(null);
+
+      // 初始化
+      function init() {
+        initMouseWheel();
+        const { index, imageList } = props;
+
+        if (!imageList || !imageList.length) {
+          throw new Error('imageList is undefined');
+        }
+        imgState.currentIndex = index;
+        handleIChangeImage(imageList[index]);
+      }
+
+      // 重置
+      function initState() {
+        imgState.imgScale = 1;
+        imgState.imgRotate = 0;
+        imgState.imgTop = 0;
+        imgState.imgLeft = 0;
+      }
+
+      // 初始化鼠标滚轮事件
+      function initMouseWheel() {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return;
+        }
+        (wrapEl as any).onmousewheel = scrollFunc;
+        // 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替
+        document.body.addEventListener('DOMMouseScroll', scrollFunc);
+        // 禁止火狐浏览器下拖拽图片的默认事件
+        document.ondragstart = function () {
+          return false;
+        };
+      }
+
+      const getScaleStep = computed(() => {
+        const scaleStep = props?.scaleStep ?? 0;
+        if (scaleStep ?? (0 > 0 && scaleStep < 100)) {
+          return scaleStep / 100;
+        } else {
+          return imgState.imgScale / 10;
+        }
+      });
+
+      // 监听鼠标滚轮
+      function scrollFunc(e: any) {
+        e = e || window.event;
+        e.delta = e.wheelDelta || -e.detail;
+
+        e.preventDefault();
+        if (e.delta > 0) {
+          // 滑轮向上滚动
+          scaleFunc(getScaleStep.value);
+        }
+        if (e.delta < 0) {
+          // 滑轮向下滚动
+          scaleFunc(-getScaleStep.value);
+        }
+      }
+      // 缩放函数
+      function scaleFunc(num: number) {
+        if (imgState.imgScale <= 0.2 && num < 0) return;
+        imgState.imgScale += num;
+        // 代码逻辑说明: 【QQYUN-13162】图片预览点击缩小一下就没了
+        if (imgState.imgScale < 0.2) {
+          imgState.imgScale = 0.2;
+        }
+      }
+
+      // 旋转图片
+      function rotateFunc(deg: number) {
+        imgState.imgRotate += deg;
+      }
+
+      // 鼠标事件
+      function handleMouseUp() {
+        const imgEl = unref(imgElRef);
+        if (!imgEl) return;
+        imgEl.onmousemove = null;
+      }
+
+      // 更换图片
+      function handleIChangeImage(url: string) {
+        imgState.status = StatueEnum.LOADING;
+        const img = new Image();
+        img.src = url;
+        img.onload = (e: Event) => {
+          if (imgState.currentUrl !== url) {
+            const ele: any[] = e.composedPath();
+            if (props.rememberState) {
+              // 保存当前图片的缩放信息
+              stateMap.set(imgState.currentUrl, {
+                scale: imgState.imgScale,
+                top: imgState.imgTop,
+                left: imgState.imgLeft,
+                rotate: imgState.imgRotate,
+              });
+              // 如果之前已存储缩放信息，就应用
+              const stateInfo = stateMap.get(url);
+              if (stateInfo) {
+                imgState.imgScale = stateInfo.scale;
+                imgState.imgTop = stateInfo.top;
+                imgState.imgRotate = stateInfo.rotate;
+                imgState.imgLeft = stateInfo.left;
+              } else {
+                initState();
+                if (props.defaultWidth) {
+                  imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+                }
+              }
+            } else {
+              if (props.defaultWidth) {
+                imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+              }
+            }
+
+            ele &&
+              emit('img-load', {
+                index: imgState.currentIndex,
+                dom: ele[0] as HTMLImageElement,
+                url,
+              });
+          }
+          imgState.currentUrl = url;
+          imgState.status = StatueEnum.DONE;
+        };
+        img.onerror = (e: Event) => {
+          const ele: EventTarget[] = e.composedPath();
+          ele &&
+            emit('img-error', {
+              index: imgState.currentIndex,
+              dom: ele[0] as HTMLImageElement,
+              url,
+            });
+          imgState.status = StatueEnum.FAIL;
+        };
+      }
+
+      // 关闭
+      function handleClose(e: MouseEvent) {
+        e && e.stopPropagation();
+        close();
+      }
+
+      function close() {
+        imgState.show = false;
+        // 移除火狐浏览器下的鼠标滚动事件
+        document.body.removeEventListener('DOMMouseScroll', scrollFunc);
+        // 恢复火狐及Safari浏览器下的图片拖拽
+        document.ondragstart = null;
+      }
+
+      // 图片复原
+      function resume() {
+        initState();
+      }
+
+      expose({
+        resume,
+        close,
+        prev: handleChange.bind(null, 'left'),
+        next: handleChange.bind(null, 'right'),
+        setScale: (scale: number) => {
+          if (scale > 0 && scale <= 10) imgState.imgScale = scale;
+        },
+        setRotate: (rotate: number) => {
+          imgState.imgRotate = rotate;
+        },
+      });
+
+      // 上一页下一页
+      function handleChange(direction: 'left' | 'right') {
+        const { currentIndex } = imgState;
+        const { imageList } = props;
+        if (direction === 'left') {
+          imgState.currentIndex--;
+          if (currentIndex <= 0) {
+            imgState.currentIndex = imageList.length - 1;
+          }
+        }
+        if (direction === 'right') {
+          imgState.currentIndex++;
+          if (currentIndex >= imageList.length - 1) {
+            imgState.currentIndex = 0;
+          }
+        }
+        handleIChangeImage(imageList[imgState.currentIndex]);
+      }
+
+      function handleAddMoveListener(e: MouseEvent) {
+        e = e || window.event;
+        imgState.moveX = e.clientX;
+        imgState.moveY = e.clientY;
+        const imgEl = unref(imgElRef);
+        if (imgEl) {
+          imgEl.onmousemove = moveFunc;
+        }
+      }
+
+      function moveFunc(e: MouseEvent) {
+        e = e || window.event;
+        e.preventDefault();
+        const movementX = e.clientX - imgState.moveX;
+        const movementY = e.clientY - imgState.moveY;
+        imgState.imgLeft += movementX;
+        imgState.imgTop += movementY;
+        imgState.moveX = e.clientX;
+        imgState.moveY = e.clientY;
+      }
+
+      // 获取图片样式
+      const getImageStyle = computed(() => {
+        const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
+        return {
+          transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
+          marginTop: `${imgTop}px`,
+          marginLeft: `${imgLeft}px`,
+          maxWidth: props.defaultWidth ? 'unset' : '100%',
+        };
+      });
+
+      const getIsMultipleImage = computed(() => {
+        const { imageList } = props;
+        return imageList.length > 1;
+      });
+
+      watchEffect(() => {
+        if (props.show) {
+          init();
+        }
+        if (props.imageList) {
+          initState();
+        }
+      });
+
+      const handleMaskClick = (e: MouseEvent) => {
+        if (props.maskClosable && e.target && (e.target as HTMLDivElement).classList.contains(`${prefixCls}-content`)) {
+          handleClose(e);
+        }
+      };
+
+      const renderClose = () => {
+        return (
+          <div class={`${prefixCls}__close`} onClick={handleClose}>
+            <CloseOutlined class={`${prefixCls}__close-icon`} />
+          </div>
+        );
+      };
+
+      const renderIndex = () => {
+        if (!unref(getIsMultipleImage)) {
+          return null;
+        }
+        const { currentIndex } = imgState;
+        const { imageList } = props;
+        return (
+          <div class={`${prefixCls}__index`}>
+            {currentIndex + 1} / {imageList.length}
+          </div>
+        );
+      };
+
+      const renderController = () => {
+        return (
+          <div class={`${prefixCls}__controller`}>
+            <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-getScaleStep.value)}>
+              <img src={unScaleSvg} />
+            </div>
+            <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(getScaleStep.value)}>
+              <img src={scaleSvg} />
+            </div>
+            <div class={`${prefixCls}__controller-item`} onClick={resume}>
+              <img src={resumeSvg} />
+            </div>
+            <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
+              <img src={unRotateSvg} />
+            </div>
+            <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
+              <img src={rotateSvg} />
+            </div>
+          </div>
+        );
+      };
+
+      const renderArrow = (direction: 'left' | 'right') => {
+        if (!unref(getIsMultipleImage)) {
+          return null;
+        }
+        return (
+          <div class={[`${prefixCls}__arrow`, direction]} onClick={() => handleChange(direction)}>
+            {direction === 'left' ? <LeftOutlined /> : <RightOutlined />}
+          </div>
+        );
+      };
+
+      return () => {
+        return (
+          imgState.show && (
+            <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp} onClick={handleMaskClick}>
+              <div class={`${prefixCls}-content`}>
+                {/*<Spin*/}
+                {/*  indicator={<LoadingOutlined style="font-size: 24px" spin />}*/}
+                {/*  spinning={true}*/}
+                {/*  class={[*/}
+                {/*    `${prefixCls}-image`,*/}
+                {/*    {*/}
+                {/*      hidden: imgState.status !== StatueEnum.LOADING,*/}
+                {/*    },*/}
+                {/*  ]}*/}
+                {/*/>*/}
+                <img
+                  style={unref(getImageStyle)}
+                  class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
+                  ref={imgElRef}
+                  src={imgState.currentUrl}
+                  onMousedown={handleAddMoveListener}
+                />
+                {renderClose()}
+                {renderIndex()}
+                {renderController()}
+                {renderArrow('left')}
+                {renderArrow('right')}
+              </div>
+            </div>
+          )
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .img-preview {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @preview-comp-z-index;
+    background: rgba(0, 0, 0, 0.5);
+    user-select: none;
+
+    &-content {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      color: @white;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-image {
+      cursor: pointer;
+      transition: transform 0.3s;
+    }
+
+    &__close {
+      position: absolute;
+      top: -40px;
+      right: -40px;
+      width: 80px;
+      height: 80px;
+      overflow: hidden;
+      color: @white;
+      cursor: pointer;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      transition: all 0.2s;
+
+      &-icon {
+        position: absolute;
+        top: 46px;
+        left: 16px;
+        font-size: 16px;
+      }
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+      }
+    }
+
+    &__index {
+      position: absolute;
+      bottom: 5%;
+      left: 50%;
+      padding: 0 22px;
+      font-size: 16px;
+      background: rgba(109, 109, 109, 0.6);
+      border-radius: 15px;
+      transform: translateX(-50%);
+    }
+
+    &__controller {
+      position: absolute;
+      bottom: 10%;
+      left: 50%;
+      display: flex;
+      width: 260px;
+      height: 44px;
+      padding: 0 22px;
+      margin-left: -139px;
+      background: rgba(109, 109, 109, 0.6);
+      border-radius: 22px;
+      justify-content: center;
+
+      &-item {
+        display: flex;
+        height: 100%;
+        padding: 0 9px;
+        font-size: 24px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+
+        img {
+          width: 1em;
+        }
+      }
+    }
+
+    &__arrow {
+      position: absolute;
+      top: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50px;
+      height: 50px;
+      font-size: 28px;
+      cursor: pointer;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+      }
+
+      &.left {
+        left: 50px;
+      }
+
+      &.right {
+        right: 50px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Preview/src/Preview.vue b/src/components/Preview/src/Preview.vue
new file mode 100644
index 0000000..3bb0b14
--- /dev/null
+++ b/src/components/Preview/src/Preview.vue
@@ -0,0 +1,94 @@
+<template>
+  <div :class="prefixCls">
+    <PreviewGroup>
+      <slot v-if="!imageList || $slots.default"></slot>
+      <template v-else>
+        <template v-for="item in getImageList" :key="item.src">
+          <Image v-bind="item">
+            <template #placeholder v-if="item.placeholder">
+              <Image v-bind="item" :src="item.placeholder" :preview="false" />
+            </template>
+          </Image>
+        </template>
+      </template>
+    </PreviewGroup>
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, computed } from 'vue';
+
+  import { Image } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isString } from '/@/utils/is';
+
+  interface ImageProps {
+    alt?: string;
+    fallback?: string;
+    src: string;
+    width: string | number;
+    height?: string | number;
+    placeholder?: string | boolean;
+    preview?:
+      | boolean
+      | {
+          visible?: boolean;
+          onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+          getContainer: string | HTMLElement | (() => HTMLElement);
+        };
+  }
+
+  type ImageItem = string | ImageProps;
+
+  export default defineComponent({
+    name: 'ImagePreview',
+    components: {
+      Image,
+      PreviewGroup: Image.PreviewGroup,
+    },
+    props: {
+      functional: propTypes.bool,
+      imageList: {
+        type: Array as PropType<ImageItem[]>,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('image-preview');
+
+      const getImageList = computed((): any[] => {
+        const { imageList } = props;
+        if (!imageList) {
+          return [];
+        }
+        return imageList.map((item) => {
+          if (isString(item)) {
+            return {
+              src: item,
+              placeholder: false,
+            };
+          }
+          return item;
+        });
+      });
+
+      return {
+        prefixCls,
+        getImageList,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-image-preview';
+
+  .@{prefix-cls} {
+    .ant-image {
+      margin-right: 10px;
+    }
+
+    .ant-image-preview-operations {
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+</style>
diff --git a/src/components/Preview/src/functional.ts b/src/components/Preview/src/functional.ts
new file mode 100644
index 0000000..e4b27d6
--- /dev/null
+++ b/src/components/Preview/src/functional.ts
@@ -0,0 +1,18 @@
+import type { Options, Props } from './typing';
+import ImgPreview from './Functional.vue';
+import { isClient } from '/@/utils/is';
+import { createVNode, render } from 'vue';
+
+let instance: ReturnType<typeof createVNode> | null = null;
+
+export function createImgPreview(options: Options) {
+  if (!isClient) return;
+  const propsData: Partial<Props> = {};
+  const container = document.createElement('div');
+  Object.assign(propsData, { show: true, index: 0, scaleStep: 100 }, options);
+
+  instance = createVNode(ImgPreview, propsData);
+  render(instance, container);
+  document.body.appendChild(container);
+  return instance.component?.exposed;
+}
diff --git a/src/components/Preview/src/typing.ts b/src/components/Preview/src/typing.ts
new file mode 100644
index 0000000..bbb8a83
--- /dev/null
+++ b/src/components/Preview/src/typing.ts
@@ -0,0 +1,49 @@
+export interface Options {
+  show?: boolean;
+  imageList: string[];
+  index?: number;
+  scaleStep?: number;
+  defaultWidth?: number;
+  maskClosable?: boolean;
+  rememberState?: boolean;
+  onImgLoad?: ({ index: number, url: string, dom: HTMLImageElement }) => void;
+  onImgError?: ({ index: number, url: string, dom: HTMLImageElement }) => void;
+}
+
+export interface Props {
+  show: boolean;
+  instance: Props;
+  imageList: string[];
+  index: number;
+  scaleStep: number;
+  defaultWidth: number;
+  maskClosable: boolean;
+  rememberState: boolean;
+}
+
+export interface PreviewActions {
+  resume: () => void;
+  close: () => void;
+  prev: () => void;
+  next: () => void;
+  setScale: (scale: number) => void;
+  setRotate: (rotate: number) => void;
+}
+
+export interface ImageProps {
+  alt?: string;
+  fallback?: string;
+  src: string;
+  width: string | number;
+  height?: string | number;
+  placeholder?: string | boolean;
+  preview?:
+    | boolean
+    | {
+        visible?: boolean;
+        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+        getContainer: string | HTMLElement | (() => HTMLElement);
+      };
+}
+
+export type ImageItem = string | ImageProps;
diff --git a/src/components/Qrcode/index.ts b/src/components/Qrcode/index.ts
new file mode 100644
index 0000000..16a2f40
--- /dev/null
+++ b/src/components/Qrcode/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from '/@/utils';
+import qrCode from './src/Qrcode.vue';
+
+export const QrCode = withInstall(qrCode);
+export * from './src/typing';
diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
new file mode 100644
index 0000000..494053a
--- /dev/null
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <component :is="tag" ref="wrapRef" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, watch, PropType, ref, unref, onMounted } from 'vue';
+  import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
+  import { toDataURL } from 'qrcode';
+  import { downloadByUrl } from '/@/utils/file/download';
+  import { QrcodeDoneEventParams } from './typing';
+
+  export default defineComponent({
+    name: 'QrCode',
+    props: {
+      value: {
+        type: [String, Array] as PropType<string | any[]>,
+        default: null,
+      },
+      // 参数
+      options: {
+        type: Object as PropType<QRCodeRenderersOptions>,
+        default: null,
+      },
+      // 宽度
+      width: {
+        type: Number as PropType<number>,
+        default: 200,
+      },
+      // 中间logo图标
+      logo: {
+        type: [String, Object] as PropType<Partial<LogoType> | string>,
+        default: '',
+      },
+      // img 不支持内嵌logo
+      tag: {
+        type: String as PropType<'canvas' | 'img'>,
+        default: 'canvas',
+        validator: (v: string) => ['canvas', 'img'].includes(v),
+      },
+    },
+    emits: { done: (data: QrcodeDoneEventParams) => !!data, error: (error: any) => !!error },
+    setup(props, { emit }) {
+      const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
+      async function createQrcode() {
+        try {
+          const { tag, value, options = {}, width, logo } = props;
+          const renderValue = String(value);
+          const wrapEl = unref(wrapRef);
+
+          // 无值不生成
+          if (renderValue == null || renderValue === '') {
+            return;
+          }
+
+          if (!wrapEl) return;
+
+          if (tag === 'canvas') {
+            const url: string = await toCanvas({
+              canvas: wrapEl,
+              width,
+              logo: logo as any,
+              content: renderValue,
+              options: options || {},
+            });
+            emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
+            return;
+          }
+
+          if (tag === 'img') {
+            const url = await toDataURL(renderValue, {
+              errorCorrectionLevel: 'H',
+              width,
+              ...options,
+            });
+            (unref(wrapRef) as HTMLImageElement).src = url;
+            emit('done', { url });
+          }
+        } catch (error) {
+          emit('error', error);
+        }
+      }
+      /**
+       * file download
+       */
+      function download(fileName?: string) {
+        let url = '';
+        const wrapEl = unref(wrapRef);
+        if (wrapEl instanceof HTMLCanvasElement) {
+          url = wrapEl.toDataURL();
+        } else if (wrapEl instanceof HTMLImageElement) {
+          url = wrapEl.src;
+        }
+        if (!url) return;
+        downloadByUrl({
+          url,
+          fileName,
+        });
+      }
+
+      onMounted(createQrcode);
+
+      // 监听参数变化重新生成二维码
+      watch(
+        props,
+        () => {
+          createQrcode();
+        },
+        {
+          deep: true,
+        }
+      );
+
+      return { wrapRef, download };
+    },
+  });
+</script>
diff --git a/src/components/Qrcode/src/drawCanvas.ts b/src/components/Qrcode/src/drawCanvas.ts
new file mode 100644
index 0000000..82aee5f
--- /dev/null
+++ b/src/components/Qrcode/src/drawCanvas.ts
@@ -0,0 +1,32 @@
+import { toCanvas } from 'qrcode';
+import type { QRCodeRenderersOptions } from 'qrcode';
+import { RenderQrCodeParams, ContentType } from './typing';
+import { cloneDeep } from 'lodash-es';
+
+export const renderQrCode = ({ canvas, content, width = 0, options: params = {} }: RenderQrCodeParams) => {
+  const options = cloneDeep(params);
+  // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+  options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content);
+
+  return getOriginWidth(content, options).then((_width: number) => {
+    options.scale = width === 0 ? undefined : (width / _width) * 4;
+    return toCanvas(canvas, content, options);
+  });
+};
+
+// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+function getOriginWidth(content: ContentType, options: QRCodeRenderersOptions) {
+  const _canvas = document.createElement('canvas');
+  return toCanvas(_canvas, content, options).then(() => _canvas.width);
+}
+
+// 对于内容少的QrCode，增大容错率
+function getErrorCorrectionLevel(content: ContentType) {
+  if (content.length > 36) {
+    return 'M';
+  } else if (content.length > 16) {
+    return 'Q';
+  } else {
+    return 'H';
+  }
+}
diff --git a/src/components/Qrcode/src/drawLogo.ts b/src/components/Qrcode/src/drawLogo.ts
new file mode 100644
index 0000000..dbfe292
--- /dev/null
+++ b/src/components/Qrcode/src/drawLogo.ts
@@ -0,0 +1,81 @@
+import { isString } from '/@/utils/is';
+import { RenderQrCodeParams, LogoType } from './typing';
+export const drawLogo = ({ canvas, logo }: RenderQrCodeParams) => {
+  if (!logo) {
+    return new Promise((resolve) => {
+      resolve((canvas as HTMLCanvasElement).toDataURL());
+    });
+  }
+  const canvasWidth = (canvas as HTMLCanvasElement).width;
+  const { logoSize = 0.15, bgColor = '#ffffff', borderSize = 0.05, crossOrigin, borderRadius = 8, logoRadius = 0 } = logo as LogoType;
+
+  const logoSrc: string = isString(logo) ? logo : logo.src;
+  const logoWidth = canvasWidth * logoSize;
+  const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+  const logoBgWidth = canvasWidth * (logoSize + borderSize);
+  const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  // logo 底色
+  canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius);
+  ctx.fillStyle = bgColor;
+  ctx.fill();
+
+  // logo
+  const image = new Image();
+  if (crossOrigin || logoRadius) {
+    image.setAttribute('crossOrigin', crossOrigin || 'anonymous');
+  }
+  image.src = logoSrc;
+
+  // 使用image绘制可以避免某些跨域情况
+  const drawLogoWithImage = (image: CanvasImageSource) => {
+    ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+  };
+
+  // 使用canvas绘制以获得更多的功能
+  const drawLogoWithCanvas = (image: HTMLImageElement) => {
+    const canvasImage = document.createElement('canvas');
+    canvasImage.width = logoXY + logoWidth;
+    canvasImage.height = logoXY + logoWidth;
+    const imageCanvas = canvasImage.getContext('2d');
+    if (!imageCanvas || !ctx) return;
+    imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+
+    canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+    if (!ctx) return;
+    const fillStyle = ctx.createPattern(canvasImage, 'no-repeat');
+    if (fillStyle) {
+      ctx.fillStyle = fillStyle;
+      ctx.fill();
+    }
+  };
+
+  // 将 logo绘制到 canvas上
+  return new Promise((resolve) => {
+    image.onload = () => {
+      logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+      resolve((canvas as HTMLCanvasElement).toDataURL());
+    };
+  });
+};
+
+// copy来的方法，用于绘制圆角
+function canvasRoundRect(ctx: CanvasRenderingContext2D) {
+  return (x: number, y: number, w: number, h: number, r: number) => {
+    const minSize = Math.min(w, h);
+    if (r > minSize / 2) {
+      r = minSize / 2;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.arcTo(x + w, y, x + w, y + h, r);
+    ctx.arcTo(x + w, y + h, x, y + h, r);
+    ctx.arcTo(x, y + h, x, y, r);
+    ctx.arcTo(x, y, x + w, y, r);
+    ctx.closePath();
+    return ctx;
+  };
+}
diff --git a/src/components/Qrcode/src/qrcodePlus.ts b/src/components/Qrcode/src/qrcodePlus.ts
new file mode 100644
index 0000000..6439861
--- /dev/null
+++ b/src/components/Qrcode/src/qrcodePlus.ts
@@ -0,0 +1,4 @@
+// 参考 qr-code-with-logo 进行ts版本修改
+import { toCanvas } from './toCanvas';
+export * from './typing';
+export { toCanvas };
diff --git a/src/components/Qrcode/src/toCanvas.ts b/src/components/Qrcode/src/toCanvas.ts
new file mode 100644
index 0000000..f74d596
--- /dev/null
+++ b/src/components/Qrcode/src/toCanvas.ts
@@ -0,0 +1,10 @@
+import { renderQrCode } from './drawCanvas';
+import { drawLogo } from './drawLogo';
+import { RenderQrCodeParams } from './typing';
+export const toCanvas = (options: RenderQrCodeParams) => {
+  return renderQrCode(options)
+    .then(() => {
+      return options;
+    })
+    .then(drawLogo) as Promise<string>;
+};
diff --git a/src/components/Qrcode/src/typing.ts b/src/components/Qrcode/src/typing.ts
new file mode 100644
index 0000000..3a037e9
--- /dev/null
+++ b/src/components/Qrcode/src/typing.ts
@@ -0,0 +1,38 @@
+import type { QRCodeSegment, QRCodeRenderersOptions } from 'qrcode';
+
+export type ContentType = string | QRCodeSegment[];
+
+export type { QRCodeRenderersOptions };
+
+export type LogoType = {
+  src: string;
+  logoSize: number;
+  borderColor: string;
+  bgColor: string;
+  borderSize: number;
+  crossOrigin: string;
+  borderRadius: number;
+  logoRadius: number;
+};
+
+export interface RenderQrCodeParams {
+  canvas: any;
+  content: ContentType;
+  width?: number;
+  options?: QRCodeRenderersOptions;
+  logo?: LogoType | string;
+  image?: HTMLImageElement;
+  downloadName?: string;
+  download?: boolean | Fn;
+}
+
+export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown>;
+
+export interface QrCodeActionType {
+  download: (fileName?: string) => void;
+}
+
+export interface QrcodeDoneEventParams {
+  url: string;
+  ctx?: CanvasRenderingContext2D | null;
+}
diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts
new file mode 100644
index 0000000..e5b2cb2
--- /dev/null
+++ b/src/components/Scrollbar/index.ts
@@ -0,0 +1,8 @@
+/**
+ * copy from element-ui
+ */
+
+import Scrollbar from './src/Scrollbar.vue';
+
+export { Scrollbar };
+export type { ScrollbarType } from './src/types';
diff --git a/src/components/Scrollbar/src/Scrollbar.vue b/src/components/Scrollbar/src/Scrollbar.vue
new file mode 100644
index 0000000..3ea4a02
--- /dev/null
+++ b/src/components/Scrollbar/src/Scrollbar.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="scrollbar">
+    <div ref="wrap" :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']" :style="style" @scroll="handleScroll">
+      <component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle">
+        <slot></slot>
+      </component>
+    </div>
+    <template v-if="!native">
+      <bar :move="moveX" :size="sizeWidth" />
+      <bar vertical :move="moveY" :size="sizeHeight" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { addResizeListener, removeResizeListener } from '/@/utils/event';
+  import componentSetting from '/@/settings/componentSetting';
+  const { scrollbar } = componentSetting;
+  import { toObject } from './util';
+  import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, provide, computed, unref } from 'vue';
+  import Bar from './bar';
+
+  export default defineComponent({
+    name: 'Scrollbar',
+    // inheritAttrs: false,
+    components: { Bar },
+    props: {
+      native: {
+        type: Boolean,
+        default: scrollbar?.native ?? false,
+      },
+      wrapStyle: {
+        type: [String, Array],
+        default: '',
+      },
+      wrapClass: {
+        type: [String, Array],
+        default: '',
+      },
+      viewClass: {
+        type: [String, Array],
+        default: '',
+      },
+      viewStyle: {
+        type: [String, Array],
+        default: '',
+      },
+      noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+      tag: {
+        type: String,
+        default: 'div',
+      },
+    },
+    setup(props) {
+      const sizeWidth = ref('0');
+      const sizeHeight = ref('0');
+      const moveX = ref(0);
+      const moveY = ref(0);
+      const wrap = ref();
+      const resize = ref();
+
+      provide('scroll-bar-wrap', wrap);
+
+      const style = computed(() => {
+        if (Array.isArray(props.wrapStyle)) {
+          return toObject(props.wrapStyle);
+        }
+        return props.wrapStyle;
+      });
+
+      const handleScroll = () => {
+        if (!props.native) {
+          moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight;
+          moveX.value = (unref(wrap).scrollLeft * 100) / unref(wrap).clientWidth;
+        }
+      };
+
+      const update = () => {
+        if (!unref(wrap)) return;
+
+        const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
+        const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
+
+        sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
+        sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
+      };
+
+      onMounted(() => {
+        if (props.native) return;
+        nextTick(update);
+        if (!props.noresize) {
+          addResizeListener(unref(resize), update);
+          addResizeListener(unref(wrap), update);
+          addEventListener('resize', update);
+        }
+      });
+
+      onBeforeUnmount(() => {
+        if (props.native) return;
+        if (!props.noresize) {
+          removeResizeListener(unref(resize), update);
+          removeResizeListener(unref(wrap), update);
+          removeEventListener('resize', update);
+        }
+      });
+
+      return {
+        moveX,
+        moveY,
+        sizeWidth,
+        sizeHeight,
+        style,
+        wrap,
+        resize,
+        update,
+        handleScroll,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .scrollbar {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+
+    &__wrap {
+      height: 100%;
+      overflow: auto;
+
+      &--hidden-default {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+          width: 0;
+          height: 0;
+          opacity: 0;
+        }
+      }
+    }
+
+    &__thumb {
+      position: relative;
+      display: block;
+      width: 0;
+      height: 0;
+      cursor: pointer;
+      background-color: rgba(144, 147, 153, 0.3);
+      border-radius: inherit;
+      transition: 0.3s background-color;
+
+      &:hover {
+        background-color: rgba(144, 147, 153, 0.5);
+      }
+    }
+
+    &__bar {
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      z-index: 1;
+      border-radius: 4px;
+      opacity: 0;
+      -webkit-transition: opacity 80ms ease;
+      transition: opacity 80ms ease;
+
+      &.is-vertical {
+        top: 2px;
+        width: 6px;
+
+        & > div {
+          width: 100%;
+        }
+      }
+
+      &.is-horizontal {
+        left: 2px;
+        height: 6px;
+
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .scrollbar:active > .scrollbar__bar,
+  .scrollbar:focus > .scrollbar__bar,
+  .scrollbar:hover > .scrollbar__bar {
+    opacity: 1;
+    transition: opacity 340ms ease-out;
+  }
+</style>
diff --git a/src/components/Scrollbar/src/bar.ts b/src/components/Scrollbar/src/bar.ts
new file mode 100644
index 0000000..d56b56c
--- /dev/null
+++ b/src/components/Scrollbar/src/bar.ts
@@ -0,0 +1,92 @@
+import { defineComponent, h, computed, ref, getCurrentInstance, onUnmounted, inject, Ref } from 'vue';
+import { on, off } from '/@/utils/domUtils';
+
+import { renderThumbStyle, BAR_MAP } from './util';
+
+export default defineComponent({
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number,
+  },
+
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = ref();
+    const wrap = inject('scroll-bar-wrap', {} as Ref<Nullable<HTMLElement>>) as any;
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
+    });
+    const barStore = ref<Recordable>({});
+    const cursorDown = ref();
+    const clickThumbHandler = (e: any) => {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      barStore.value[bar.value.axis] =
+        e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+
+    const clickTrackHandler = (e: any) => {
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100) / instance?.vnode.el?.[bar.value.offset];
+
+      wrap.value[bar.value.scroll] = (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
+    };
+    const startDrag = (e: any) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, 'mousemove', mouseMoveDocumentHandler);
+      on(document, 'mouseup', mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+
+    const mouseMoveDocumentHandler = (e: any) => {
+      if (cursorDown.value === false) return;
+      const prevPage = barStore.value[bar.value.axis];
+
+      if (!prevPage) return;
+
+      const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100) / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
+    };
+
+    function mouseUpDocumentHandler() {
+      cursorDown.value = false;
+      barStore.value[bar.value.axis] = 0;
+      off(document, 'mousemove', mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+
+    onUnmounted(() => {
+      off(document, 'mouseup', mouseUpDocumentHandler);
+    });
+
+    return () =>
+      h(
+        'div',
+        {
+          class: ['scrollbar__bar', 'is-' + bar.value.key],
+          onMousedown: clickTrackHandler,
+        },
+        h('div', {
+          ref: thumb,
+          class: 'scrollbar__thumb',
+          onMousedown: clickThumbHandler,
+          style: renderThumbStyle({
+            size: props.size,
+            move: props.move,
+            bar: bar.value,
+          }),
+        })
+      );
+  },
+});
diff --git a/src/components/Scrollbar/src/types.d.ts b/src/components/Scrollbar/src/types.d.ts
new file mode 100644
index 0000000..4c7eeea
--- /dev/null
+++ b/src/components/Scrollbar/src/types.d.ts
@@ -0,0 +1,18 @@
+export interface BarMapItem {
+  offset: string;
+  scroll: string;
+  scrollSize: string;
+  size: string;
+  key: string;
+  axis: string;
+  client: string;
+  direction: string;
+}
+export interface BarMap {
+  vertical: BarMapItem;
+  horizontal: BarMapItem;
+}
+
+export interface ScrollbarType {
+  wrap: ElRef;
+}
diff --git a/src/components/Scrollbar/src/util.ts b/src/components/Scrollbar/src/util.ts
new file mode 100644
index 0000000..b7c4845
--- /dev/null
+++ b/src/components/Scrollbar/src/util.ts
@@ -0,0 +1,50 @@
+import type { BarMap } from './types';
+export const BAR_MAP: BarMap = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top',
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left',
+  },
+};
+
+// @ts-ignore
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {} as any;
+  const translate = `translate${bar.axis}(${move}%)`;
+
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+
+  return style;
+}
+
+function extend<T, K>(to: T, _from: K): T & K {
+  return Object.assign(to, _from);
+}
+
+export function toObject<T>(arr: Array<T>): Recordable<T> {
+  const res = {};
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      extend(res, arr[i]);
+    }
+  }
+  return res;
+}
diff --git a/src/components/SimpleMenu/index.ts b/src/components/SimpleMenu/index.ts
new file mode 100644
index 0000000..0dfd248
--- /dev/null
+++ b/src/components/SimpleMenu/index.ts
@@ -0,0 +1,2 @@
+export { default as SimpleMenu } from './src/SimpleMenu.vue';
+export { default as SimpleMenuTag } from './src/SimpleMenuTag.vue';
diff --git a/src/components/SimpleMenu/src/SimpleMenu.vue b/src/components/SimpleMenu/src/SimpleMenu.vue
new file mode 100644
index 0000000..0bd3e8c
--- /dev/null
+++ b/src/components/SimpleMenu/src/SimpleMenu.vue
@@ -0,0 +1,193 @@
+<template>
+  <Menu
+    v-bind="getBindValues"
+    :activeName="activeName"
+    :openNames="getOpenKeys"
+    :class="`${prefixCls} ${isThemeBright ? 'bright' : ''}`"
+    :activeSubMenuNames="activeSubMenuNames"
+    @select="handleSelect"
+  >
+    <template v-for="item in items" :key="item.path">
+      <SimpleSubMenu :isThemeBright="isThemeBright" :item="item" :parent="true" :collapsedShowTitle="collapsedShowTitle" :collapse="collapse" />
+    </template>
+  </Menu>
+</template>
+<script lang="ts">
+  import type { MenuState } from './types';
+  import type { Menu as MenuType } from '/@/router/types';
+  import type { RouteLocationNormalizedLoaded } from 'vue-router';
+  import { defineComponent, computed, ref, unref, reactive, toRefs, watch } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import Menu from './components/Menu.vue';
+  import SimpleSubMenu from './SimpleSubMenu.vue';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import { propTypes } from '/@/utils/propTypes';
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { useRouter } from 'vue-router';
+  import { isFunction, isUrl } from '/@/utils/is';
+  import { openWindow } from '/@/utils';
+
+  import { useOpenKeys } from './useOpenKeys';
+  import { URL_HASH_TAB } from '/@/utils';
+  import { useAppStore } from '/@/store/modules/app';
+
+  export default defineComponent({
+    name: 'SimpleMenu',
+    components: {
+      Menu,
+      SimpleSubMenu,
+    },
+    inheritAttrs: false,
+    props: {
+      items: {
+        type: Array as PropType<MenuType[]>,
+        default: () => [],
+      },
+      collapse: propTypes.bool,
+      mixSider: propTypes.bool,
+      theme: propTypes.string,
+      accordion: propTypes.bool.def(true),
+      collapsedShowTitle: propTypes.bool,
+      beforeClickFn: {
+        type: Function as PropType<(key: string) => Promise<boolean>>,
+      },
+      isSplitMenu: propTypes.bool,
+    },
+    emits: ['menuClick'],
+    setup(props, { attrs, emit }) {
+      const currentActiveMenu = ref('');
+      const isClickGo = ref(false);
+      const appStore = useAppStore();
+      const isThemeBright = ref(false);
+
+      const menuState = reactive<MenuState>({
+        activeName: '',
+        openNames: [],
+        activeSubMenuNames: [],
+      });
+
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('simple-menu');
+      const { items, accordion, mixSider, collapse } = toRefs(props);
+
+      const { setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, accordion, mixSider, collapse);
+
+      const getBindValues = computed(() => ({ ...attrs, ...props }));
+
+      watch(
+        () => props.collapse,
+        (collapse) => {
+          if (collapse) {
+            menuState.openNames = [];
+          } else {
+            setOpenKeys(currentRoute.value.path);
+          }
+        },
+        { immediate: true }
+      );
+
+      watch(
+        () => props.items,
+        () => {
+          if (!props.isSplitMenu) {
+            return;
+          }
+          setOpenKeys(currentRoute.value.path);
+        },
+        { flush: 'post' }
+      );
+      // 代码逻辑说明: 【QQYUN-8922】左侧导航栏文字颜色调整区分彩色和暗黑
+      watch(
+        () => appStore.getProjectConfig.menuSetting,
+        (menuSetting) => {
+          isThemeBright.value = !!menuSetting?.isThemeBright;
+        },
+        { immediate: true, deep: true }
+      );
+      listenerRouteChange((route) => {
+        if (route.name === REDIRECT_NAME) return;
+
+        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+        handleMenuChange(route);
+
+        if (unref(currentActiveMenu)) {
+          menuState.activeName = unref(currentActiveMenu);
+          setOpenKeys(unref(currentActiveMenu));
+        }
+      });
+
+      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+        if (unref(isClickGo)) {
+          isClickGo.value = false;
+          return;
+        }
+        const path = (route || unref(currentRoute)).path;
+
+        menuState.activeName = path;
+
+        setOpenKeys(path);
+      }
+
+      async function handleSelect(key: string) {
+        if (isUrl(key)) {
+          // 代码逻辑说明: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+          let url = key.replace(URL_HASH_TAB, '#');
+          window.open(url)
+          //openWindow(url);
+          // 代码逻辑说明: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+          return;
+        }
+        // 代码逻辑说明: 【QQYUN-6366】内部路由也可以支持采用新浏览器tab打开
+        const findItem = getMatchingMenu(props.items, key);
+        if (findItem?.internalOrExternal == true) {
+          window.open(location.origin + key);
+          return;
+        }
+
+        const { beforeClickFn } = props;
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+          const flag = await beforeClickFn(key);
+          if (!flag) return;
+        }
+
+        emit('menuClick', key);
+
+        isClickGo.value = true;
+        setOpenKeys(key);
+        menuState.activeName = key;
+      }
+
+      /**
+       * 2024-02-27
+       * liaozhiyang
+       * 获取菜单中匹配的path所在的项
+       */
+      const getMatchingMenu = (menus, path) => {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path && !item.redirect && !item.paramPath) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getMatchingMenu(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return '';
+      }
+
+      return {
+        prefixCls,
+        getBindValues,
+        handleSelect,
+        getOpenKeys,
+        ...toRefs(menuState),
+        isThemeBright,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>
diff --git a/src/components/SimpleMenu/src/SimpleMenuTag.vue b/src/components/SimpleMenu/src/SimpleMenuTag.vue
new file mode 100644
index 0000000..b7d3cb3
--- /dev/null
+++ b/src/components/SimpleMenu/src/SimpleMenuTag.vue
@@ -0,0 +1,68 @@
+<template>
+  <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
+</template>
+<script lang="ts">
+  import type { Menu } from '/@/router/types';
+
+  import { defineComponent, computed } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'SimpleMenuTag',
+    props: {
+      item: {
+        type: Object as PropType<Menu>,
+        default: () => ({}),
+      },
+      dot: propTypes.bool,
+      collapseParent: propTypes.bool,
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('simple-menu');
+
+      const getShowTag = computed(() => {
+        const { item } = props;
+
+        if (!item) return false;
+
+        const { tag } = item;
+        if (!tag) return false;
+
+        const { dot, content } = tag;
+        if (!dot && !content) return false;
+        return true;
+      });
+
+      const getContent = computed(() => {
+        if (!getShowTag.value) return '';
+        const { item, collapseParent } = props;
+        const { tag } = item;
+        const { dot, content } = tag!;
+        return dot || collapseParent ? '' : content;
+      });
+
+      const getTagClass = computed(() => {
+        const { item, collapseParent } = props;
+        const { tag = {} } = item || {};
+        const { dot, type = 'error' } = tag;
+        const tagCls = `${prefixCls}-tag`;
+        return [
+          tagCls,
+
+          [`${tagCls}--${type}`],
+          {
+            [`${tagCls}--collapse`]: collapseParent,
+            [`${tagCls}--dot`]: dot || props.dot,
+          },
+        ];
+      });
+      return {
+        getTagClass,
+        getShowTag,
+        getContent,
+      };
+    },
+  });
+</script>
diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
new file mode 100644
index 0000000..9bd0e31
--- /dev/null
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -0,0 +1,116 @@
+<template>
+  <MenuItem :name="item.path" v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" :class="getLevelClass">
+    <Icon v-if="getIcon" :icon="getIcon" :size="16" />
+    <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
+      {{ getI18nName }}
+    </div>
+    <template #title>
+      <span :class="['ml-2', `${prefixCls}-sub-title`]">
+        {{ getI18nName }}
+      </span>
+      <SimpleMenuTag :item="item" :collapseParent="getIsCollapseParent" />
+    </template>
+  </MenuItem>
+  <SubMenu
+    :isThemeBright="isThemeBright"
+    :name="item.path"
+    v-if="menuHasChildren(item) && getShowMenu"
+    :class="[getLevelClass, theme]"
+    :collapsedShowTitle="collapsedShowTitle"
+  >
+    <template #title>
+      <Icon v-if="getIcon" :icon="getIcon" :size="16" />
+
+      <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
+        {{ getI18nName }}
+      </div>
+
+      <span v-show="getShowSubTitle" :class="['ml-2', `${prefixCls}-sub-title`]">
+        {{ getI18nName }}
+      </span>
+      <SimpleMenuTag :item="item" :collapseParent="!!collapse && !!parent" />
+    </template>
+    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
+      <SimpleSubMenu v-bind="$props" :isThemeBright="isThemeBright" :item="childrenItem" :parent="false" />
+    </template>
+  </SubMenu>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { Menu } from '/@/router/types';
+
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import Icon from '/@/components/Icon/index';
+  import { checkChildrenHidden } from '/@/utils/common/compUtils';
+  import MenuItem from './components/MenuItem.vue';
+  import SubMenu from './components/SubMenuItem.vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  export default defineComponent({
+    name: 'SimpleSubMenu',
+    components: {
+      SubMenu,
+      MenuItem,
+      SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
+      Icon,
+    },
+    props: {
+      item: {
+        type: Object as PropType<Menu>,
+        default: () => ({}),
+      },
+      parent: propTypes.bool,
+      collapsedShowTitle: propTypes.bool,
+      collapse: propTypes.bool,
+      theme: propTypes.oneOf(['dark', 'light']),
+      // 代码逻辑说明: 【QQYUN-8927】侧边栏导航二级菜单彩色模式文字颜色调整
+      isThemeBright: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('simple-menu');
+
+      const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
+      const getIcon = computed(() => props.item?.icon);
+      const getI18nName = computed(() => t(props.item?.name));
+      const getShowSubTitle = computed(() => !props.collapse || !props.parent);
+      const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
+      const getLevelClass = computed(() => {
+        return [
+          {
+            [`${prefixCls}__parent`]: props.parent,
+            [`${prefixCls}__children`]: !props.parent,
+          },
+        ];
+      });
+
+      function menuHasChildren(menuTreeItem): boolean {
+        return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
+          Reflect.has(menuTreeItem, 'children') &&
+          !!menuTreeItem.children &&
+          menuTreeItem.children.length > 0
+          &&checkChildrenHidden(menuTreeItem)
+        );
+      }
+
+      return {
+        prefixCls,
+        menuHasChildren,
+        checkChildrenHidden,
+        getShowMenu,
+        getIcon,
+        getI18nName,
+        getShowSubTitle,
+        getLevelClass,
+        getIsCollapseParent,
+      };
+    },
+  });
+</script>
diff --git a/src/components/SimpleMenu/src/components/Menu.vue b/src/components/SimpleMenu/src/components/Menu.vue
new file mode 100644
index 0000000..80c0f65
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/Menu.vue
@@ -0,0 +1,148 @@
+<template>
+  <ul :class="getClass">
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { SubMenuProvider } from './types';
+  import { defineComponent, ref, computed, onMounted, watchEffect, watch, nextTick, getCurrentInstance, provide } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { createSimpleRootMenuContext } from './useSimpleMenuContext';
+  import mitt from '/@/utils/mitt';
+  export default defineComponent({
+    name: 'Menu',
+    props: {
+      theme: propTypes.oneOf(['light', 'dark']).def('light'),
+      activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),
+      openNames: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+      accordion: propTypes.bool.def(true),
+      width: propTypes.string.def('100%'),
+      collapsedWidth: propTypes.string.def('48px'),
+      indentSize: propTypes.number.def(16),
+      collapse: propTypes.bool.def(true),
+      activeSubMenuNames: {
+        type: Array as PropType<(string | number)[]>,
+        default: () => [],
+      },
+    },
+    emits: ['select', 'open-change'],
+    setup(props, { emit }) {
+      const rootMenuEmitter = mitt();
+      const instance = getCurrentInstance();
+
+      const currentActiveName = ref<string | number>('');
+      const openedNames = ref<string[]>([]);
+
+      const { prefixCls } = useDesign('menu');
+
+      const isRemoveAllPopup = ref(false);
+
+      createSimpleRootMenuContext({
+        rootMenuEmitter: rootMenuEmitter,
+        activeName: currentActiveName,
+      });
+
+      const getClass = computed(() => {
+        const { theme } = props;
+        return [
+          prefixCls,
+          `${prefixCls}-${theme}`,
+          `${prefixCls}-vertical`,
+          {
+            [`${prefixCls}-collapse`]: props.collapse,
+          },
+        ];
+      });
+
+      watchEffect(() => {
+        openedNames.value = props.openNames;
+      });
+
+      watchEffect(() => {
+        if (props.activeName) {
+          currentActiveName.value = props.activeName;
+        }
+      });
+
+      watch(
+        () => props.openNames,
+        () => {
+          nextTick(() => {
+            updateOpened();
+          });
+        }
+      );
+
+      function updateOpened() {
+        rootMenuEmitter.emit('on-update-opened', openedNames.value);
+      }
+
+      function addSubMenu(name: string) {
+        if (openedNames.value.includes(name)) return;
+        openedNames.value.push(name);
+        updateOpened();
+      }
+
+      function removeSubMenu(name: string) {
+        openedNames.value = openedNames.value.filter((item) => item !== name);
+        updateOpened();
+      }
+
+      function removeAll() {
+        openedNames.value = [];
+        updateOpened();
+      }
+
+      function sliceIndex(index: number) {
+        if (index === -1) return;
+        openedNames.value = openedNames.value.slice(0, index + 1);
+        updateOpened();
+      }
+
+      provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
+        addSubMenu,
+        removeSubMenu,
+        getOpenNames: () => openedNames.value,
+        removeAll,
+        isRemoveAllPopup,
+        sliceIndex,
+        level: 0,
+        props: props as any,
+      });
+
+      onMounted(() => {
+        openedNames.value = !props.collapse ? [...props.openNames] : [];
+        updateOpened();
+        rootMenuEmitter.on('on-menu-item-select', (name: string) => {
+          currentActiveName.value = name;
+
+          nextTick(() => {
+            props.collapse && removeAll();
+          });
+          emit('select', name);
+        });
+
+        rootMenuEmitter.on('open-name-change', ({ name, opened }) => {
+          if (opened && !openedNames.value.includes(name)) {
+            openedNames.value.push(name);
+          } else if (!opened) {
+            const index = openedNames.value.findIndex((item) => item === name);
+            index !== -1 && openedNames.value.splice(index, 1);
+          }
+        });
+      });
+
+      return { getClass, openedNames };
+    },
+  });
+</script>
+<style lang="less">
+  @import './menu.less';
+</style>
diff --git a/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue b/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue
new file mode 100644
index 0000000..5295439
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/MenuCollapseTransition.vue
@@ -0,0 +1,78 @@
+<template>
+  <transition mode="out-in" v-on="on">
+    <slot></slot>
+  </transition>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { addClass, removeClass } from '/@/utils/domUtils';
+
+  export default defineComponent({
+    name: 'MenuCollapseTransition',
+    setup() {
+      return {
+        on: {
+          beforeEnter(el) {
+            addClass(el, 'collapse-transition');
+            if (!el.dataset) el.dataset = {};
+
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+            el.style.height = '0';
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+          },
+
+          enter(el) {
+            el.dataset.oldOverflow = el.style.overflow;
+            if (el.scrollHeight !== 0) {
+              el.style.height = el.scrollHeight + 'px';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            } else {
+              el.style.height = '';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            }
+
+            el.style.overflow = 'hidden';
+          },
+
+          afterEnter(el) {
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+          },
+
+          beforeLeave(el) {
+            if (!el.dataset) el.dataset = {};
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+            el.dataset.oldOverflow = el.style.overflow;
+
+            el.style.height = el.scrollHeight + 'px';
+            el.style.overflow = 'hidden';
+          },
+
+          leave(el) {
+            if (el.scrollHeight !== 0) {
+              addClass(el, 'collapse-transition');
+              el.style.height = 0;
+              el.style.paddingTop = 0;
+              el.style.paddingBottom = 0;
+            }
+          },
+
+          afterLeave(el) {
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          },
+        },
+      };
+    },
+  });
+</script>
diff --git a/src/components/SimpleMenu/src/components/MenuItem.vue b/src/components/SimpleMenu/src/components/MenuItem.vue
new file mode 100644
index 0000000..8809b16
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/MenuItem.vue
@@ -0,0 +1,126 @@
+<template>
+  <li :class="getClass" @click.stop="handleClickItem" :style="getCollapse ? {} : getItemStyle">
+    <Tooltip placement="right" v-if="showTooptip">
+      <template #title>
+        <slot name="title"></slot>
+      </template>
+      <div :class="`${prefixCls}-tooltip`">
+        <slot></slot>
+      </div>
+    </Tooltip>
+
+    <template v-else>
+      <slot></slot>
+      <slot name="title"></slot>
+    </template>
+  </li>
+</template>
+
+<script lang="ts">
+  import { PropType } from 'vue';
+  import { defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useMenuItem } from './useMenu';
+  import { Tooltip } from 'ant-design-vue';
+  import { useSimpleRootMenuContext } from './useSimpleMenuContext';
+  import { useLocaleStore } from '/@/store/modules/locale';
+
+  export default defineComponent({
+    name: 'MenuItem',
+    components: { Tooltip },
+    props: {
+      name: {
+        type: [String, Number] as PropType<string | number>,
+        required: true,
+      },
+      disabled: propTypes.bool,
+    },
+    setup(props, { slots }) {
+      const instance = getCurrentInstance();
+      const localeStore = useLocaleStore();
+
+      const active = ref(false);
+
+      const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem(instance);
+
+      const { prefixCls } = useDesign('menu');
+
+      const { rootMenuEmitter, activeName } = useSimpleRootMenuContext();
+
+      const getClass = computed(() => {
+        return [
+          `${prefixCls}-item`,
+          {
+            [`${prefixCls}-item-active`]: unref(active),
+            [`${prefixCls}-item-selected`]: unref(active),
+            [`${prefixCls}-item-disabled`]: !!props.disabled,
+          },
+        ];
+      });
+
+      const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse);
+
+      const showTooptip = computed(() => {
+        return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title;
+      });
+
+      function handleClickItem() {
+        const { disabled } = props;
+        if (disabled) {
+          return;
+        }
+
+        rootMenuEmitter.emit('on-menu-item-select', props.name);
+        if (unref(getCollapse)) {
+          return;
+        }
+        const { uidList } = getParentList();
+
+        rootMenuEmitter.emit('on-update-opened', {
+          opend: false,
+          parent: instance?.parent,
+          uidList: uidList,
+        });
+      }
+      watch(
+        () => activeName.value,
+        (name: string) => {
+          if (name === props.name) {
+            const { list, uidList } = getParentList();
+            active.value = true;
+            list.forEach((item) => {
+              if (item.proxy) {
+                (item.proxy as any).active = true;
+              }
+            });
+
+            //存储路径和标题的关系
+            storePathTitle(props.name);
+            rootMenuEmitter.emit('on-update-active-name:submenu', uidList);
+          } else {
+            active.value = false;
+          }
+        },
+        { immediate: true }
+      );
+
+      // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+      function storePathTitle(path) {
+        console.log('storePathTitle', path);
+        let title = '';
+        if (instance!.attrs) {
+          let item: any = instance!.attrs.item;
+          if (item) {
+            title = item.title;
+          }
+        }
+        if (localeStore) {
+          localeStore.setPathTitle(path, title);
+        }
+      }
+
+      return { getClass, prefixCls, getItemStyle, getCollapse, handleClickItem, showTooptip };
+    },
+  });
+</script>
diff --git a/src/components/SimpleMenu/src/components/SubMenuItem.vue b/src/components/SimpleMenu/src/components/SubMenuItem.vue
new file mode 100644
index 0000000..ac7d8d3
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/SubMenuItem.vue
@@ -0,0 +1,317 @@
+<template>
+  <li :class="getClass">
+    <template v-if="!getCollapse">
+      <div :class="`${prefixCls}-submenu-title`" @click.stop="handleClick" :style="getItemStyle">
+        <slot name="title" :getIsOpened="getIsOpend"></slot>
+        <Icon icon="eva:arrow-ios-downward-outline" :size="14" :class="`${prefixCls}-submenu-title-icon`" />
+      </div>
+      <CollapseTransition>
+        <ul :class="prefixCls" v-show="opened">
+          <slot></slot>
+        </ul>
+      </CollapseTransition>
+    </template>
+
+    <Popover
+      placement="right"
+      :overlayClassName="`${prefixCls}-menu-popover`"
+      v-else
+      :open="getIsOpend"
+      @openChange="handleVisibleChange"
+      :overlayStyle="getOverlayStyle"
+      :align="{ offset: [0, 0] }"
+    >
+      <div :class="getSubClass" v-bind="getEvents(false)">
+        <div
+          :class="[
+            {
+              [`${prefixCls}-submenu-popup`]: !getParentSubMenu,
+              [`${prefixCls}-submenu-collapsed-show-tit`]: collapsedShowTitle,
+            },
+          ]"
+        >
+          <slot name="title"></slot>
+        </div>
+        <Icon v-if="getParentSubMenu" icon="eva:arrow-ios-downward-outline" :size="14" :class="`${prefixCls}-submenu-title-icon`" />
+      </div>
+      <!-- eslint-disable-next-line -->
+      <template #content v-show="opened">
+        <div v-bind="getEvents(true)">
+          <ul :class="[prefixCls, `${prefixCls}-${getTheme}`, `${prefixCls}-popup`, `${isThemeBright && 'bright'}`]">
+            <slot></slot>
+          </ul>
+        </div>
+      </template>
+    </Popover>
+  </li>
+</template>
+
+<script lang="ts">
+  import type { CSSProperties, PropType } from 'vue';
+  import type { SubMenuProvider } from './types';
+  import { defineComponent, computed, unref, getCurrentInstance, toRefs, reactive, provide, onBeforeMount, inject } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useMenuItem } from './useMenu';
+  import { useSimpleRootMenuContext } from './useSimpleMenuContext';
+  import { CollapseTransition } from '/@/components/Transition';
+  import Icon from '/@/components/Icon';
+  import { Popover } from 'ant-design-vue';
+  import { isBoolean, isObject } from '/@/utils/is';
+  import mitt from '/@/utils/mitt';
+
+  const DELAY = 200;
+  export default defineComponent({
+    name: 'SubMenu',
+    components: {
+      Icon,
+      CollapseTransition,
+      Popover,
+    },
+    props: {
+      name: {
+        type: [String, Number] as PropType<string | number>,
+        required: true,
+      },
+      disabled: propTypes.bool,
+      collapsedShowTitle: propTypes.bool,
+      // 代码逻辑说明: 【QQYUN-8927】侧边栏导航二级菜单彩色模式文字颜色调整
+      isThemeBright: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const instance = getCurrentInstance();
+
+      const state = reactive({
+        active: false,
+        opened: false,
+      });
+
+      const data = reactive({
+        timeout: null as TimeoutHandle | null,
+        mouseInChild: false,
+        isChild: false,
+      });
+
+      const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem(instance);
+
+      const { prefixCls } = useDesign('menu');
+
+      const subMenuEmitter = mitt();
+
+      const { rootMenuEmitter } = useSimpleRootMenuContext();
+
+      const {
+        addSubMenu: parentAddSubmenu,
+        removeSubMenu: parentRemoveSubmenu,
+        removeAll: parentRemoveAll,
+        getOpenNames: parentGetOpenNames,
+        isRemoveAllPopup,
+        sliceIndex,
+        level,
+        props: rootProps,
+        handleMouseleave: parentHandleMouseleave,
+      } = inject<SubMenuProvider>(`subMenu:${getParentMenu.value?.uid}`)!;
+
+      const getClass = computed(() => {
+        return [
+          `${prefixCls}-submenu`,
+          {
+            [`${prefixCls}-item-active`]: state.active,
+            [`${prefixCls}-opened`]: state.opened,
+            [`${prefixCls}-submenu-disabled`]: props.disabled,
+            [`${prefixCls}-submenu-has-parent-submenu`]: unref(getParentSubMenu),
+            [`${prefixCls}-child-item-active`]: state.active,
+          },
+        ];
+      });
+
+      const getAccordion = computed(() => rootProps.accordion);
+      const getCollapse = computed(() => rootProps.collapse);
+      const getTheme = computed(() => rootProps.theme);
+
+      const getOverlayStyle = computed((): CSSProperties => {
+        // 代码逻辑说明: 【QQYUN-8774】侧边混合导航菜单宽度调整
+        return {
+          minWidth: '150px',
+        };
+      });
+
+      const getIsOpend = computed(() => {
+        const name = props.name;
+        if (unref(getCollapse)) {
+          return parentGetOpenNames().includes(name);
+        }
+        return state.opened;
+      });
+
+      const getSubClass = computed(() => {
+        const isActive = rootProps.activeSubMenuNames.includes(props.name);
+        return [
+          `${prefixCls}-submenu-title`,
+          {
+            [`${prefixCls}-submenu-active`]: isActive,
+            [`${prefixCls}-submenu-active-border`]: isActive && level === 0,
+            [`${prefixCls}-submenu-collapse`]: unref(getCollapse) && level === 0,
+          },
+        ];
+      });
+
+      function getEvents(deep: boolean) {
+        if (!unref(getCollapse)) {
+          return {};
+        }
+        return {
+          onMouseenter: handleMouseenter,
+          onMouseleave: () => handleMouseleave(deep),
+        };
+      }
+
+      function handleClick() {
+        const { disabled } = props;
+        if (disabled || unref(getCollapse)) return;
+        const opened = state.opened;
+
+        if (unref(getAccordion)) {
+          const { uidList } = getParentList();
+          rootMenuEmitter.emit('on-update-opened', {
+            opend: false,
+            parent: instance?.parent,
+            uidList: uidList,
+          });
+        } else {
+          rootMenuEmitter.emit('open-name-change', {
+            name: props.name,
+            opened: !opened,
+          });
+        }
+        state.opened = !opened;
+      }
+
+      function handleMouseenter() {
+        const disabled = props.disabled;
+        if (disabled) return;
+
+        subMenuEmitter.emit('submenu:mouse-enter-child');
+
+        const index = parentGetOpenNames().findIndex((item) => item === props.name);
+
+        sliceIndex(index);
+
+        const isRoot = level === 0 && parentGetOpenNames().length === 2;
+        if (isRoot) {
+          parentRemoveAll();
+        }
+        data.isChild = parentGetOpenNames().includes(props.name);
+        clearTimeout(data.timeout!);
+        data.timeout = setTimeout(() => {
+          parentAddSubmenu(props.name);
+        }, DELAY);
+      }
+
+      function handleMouseleave(deepDispatch = false) {
+        const parentName = getParentMenu.value?.props.name;
+        if (!parentName) {
+          isRemoveAllPopup.value = true;
+        }
+
+        if (parentGetOpenNames().slice(-1)[0] === props.name) {
+          data.isChild = false;
+        }
+
+        subMenuEmitter.emit('submenu:mouse-leave-child');
+        if (data.timeout) {
+          clearTimeout(data.timeout!);
+          data.timeout = setTimeout(() => {
+            if (isRemoveAllPopup.value) {
+              parentRemoveAll();
+            } else if (!data.mouseInChild) {
+              parentRemoveSubmenu(props.name);
+            }
+          }, DELAY);
+        }
+        if (deepDispatch) {
+          if (getParentSubMenu.value) {
+            parentHandleMouseleave?.(true);
+          }
+        }
+      }
+
+      onBeforeMount(() => {
+        subMenuEmitter.on('submenu:mouse-enter-child', () => {
+          data.mouseInChild = true;
+          isRemoveAllPopup.value = false;
+          clearTimeout(data.timeout!);
+        });
+        subMenuEmitter.on('submenu:mouse-leave-child', () => {
+          if (data.isChild) return;
+          data.mouseInChild = false;
+          clearTimeout(data.timeout!);
+        });
+
+        rootMenuEmitter.on('on-update-opened', (data: boolean | (string | number)[] | Recordable) => {
+          if (unref(getCollapse)) return;
+          if (isBoolean(data)) {
+            state.opened = data;
+            return;
+          }
+          if (isObject(data) && rootProps.accordion) {
+            const { opend, parent, uidList } = data as Recordable;
+            if (parent === instance?.parent) {
+              state.opened = opend;
+            } else if (!uidList.includes(instance?.uid)) {
+              state.opened = false;
+            }
+            return;
+          }
+
+          if (props.name && Array.isArray(data)) {
+            state.opened = (data as (string | number)[]).includes(props.name);
+          }
+        });
+
+        rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
+          if (instance?.uid) {
+            state.active = data.includes(instance?.uid);
+          }
+        });
+      });
+
+      function handleVisibleChange(visible: boolean) {
+        state.opened = visible;
+      }
+
+      // provide
+      provide<SubMenuProvider>(`subMenu:${instance?.uid}`, {
+        addSubMenu: parentAddSubmenu,
+        removeSubMenu: parentRemoveSubmenu,
+        getOpenNames: parentGetOpenNames,
+        removeAll: parentRemoveAll,
+        isRemoveAllPopup,
+        sliceIndex,
+        level: level + 1,
+        handleMouseleave,
+        props: rootProps,
+      });
+
+      return {
+        getClass,
+        prefixCls,
+        getCollapse,
+        getItemStyle,
+        handleClick,
+        handleVisibleChange,
+        getParentSubMenu,
+        getOverlayStyle,
+        getTheme,
+        getIsOpend,
+        getEvents,
+        getSubClass,
+        ...toRefs(state),
+        ...toRefs(data),
+      };
+    },
+  });
+</script>
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
new file mode 100644
index 0000000..4d25785
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -0,0 +1,340 @@
+@menu-prefix-cls: ~'@{namespace}-menu';
+@menu-popup-prefix-cls: ~'@{namespace}-menu-popup';
+@submenu-popup-prefix-cls: ~'@{namespace}-menu-submenu-popup';
+
+@transition-time: 0.2s;
+@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7);
+
+.light-border {
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 2px;
+    background-color: @primary-color;
+    content: '';
+  }
+}
+
+.@{menu-prefix-cls}-menu-popover {
+  .ant-popover-arrow {
+    display: none;
+  }
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .@{menu-prefix-cls} {
+    &-opened > * > &-submenu-title-icon {
+      transform: translateY(-50%) rotate(90deg) !important;
+    }
+
+    &-item,
+    &-submenu-title {
+      position: relative;
+      z-index: 1;
+      padding: 10px 14px;
+      color: @menu-dark-subsidiary-color;
+      cursor: pointer;
+      transition: all @transition-time @ease-in-out;
+
+      &-icon {
+        position: absolute;
+        top: 50%;
+        right: 18px;
+        transform: translateY(-50%) rotate(-90deg);
+        transition: transform @transition-time @ease-in-out;
+      }
+    }
+
+    &-dark {
+      .@{menu-prefix-cls}-item,
+      .@{menu-prefix-cls}-submenu-title {
+        color: @menu-dark-subsidiary-color;
+        // background: @menu-dark-active-bg;
+
+        &:hover {
+          color: #fff;
+        }
+
+        &-selected {
+          color: #fff;
+          background-color: @primary-color !important;
+        }
+      }
+      // 彩色模式(绿色，橘红等)
+      &.bright {
+        .@{menu-prefix-cls}-item,
+        .@{menu-prefix-cls}-submenu-title {
+          color: #fff;
+          &:hover {
+            color: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
+    }
+
+    &-light {
+      .@{menu-prefix-cls}-item,
+      .@{menu-prefix-cls}-submenu-title {
+        color: @text-color-base;
+
+        &:hover {
+          color: @primary-color;
+        }
+
+        &-selected {
+          z-index: 2;
+          color: @primary-color;
+          background-color: fade(@primary-color, 10);
+
+          .light-border();
+        }
+      }
+    }
+  }
+}
+
+.content();
+.content() {
+  .@{menu-prefix-cls} {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: @font-size-base;
+    color: @text-color-base;
+    list-style: none;
+    outline: none;
+
+    // .collapse-transition {
+    //   transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
+    //     @transition-time padding-bottom ease-in-out;
+    // }
+
+    &-light {
+      background-color: #fff;
+      color: rgba(0, 0, 0, 0.65);
+      .@{menu-prefix-cls} {
+        color: rgba(0, 0, 0, 0.65);
+      }
+      .@{namespace}-menu-submenu:not(.@{namespace}-menu-item-active)  .@{namespace}-menu-submenu-title {
+        .anticon {
+           color: rgba(0, 0, 0, 0.9);
+        }
+      }
+      .@{menu-prefix-cls}-submenu-active {
+        color: @primary-color !important;
+
+        &-border {
+          .light-border();
+        }
+      }
+    }
+
+    &-dark {
+      .@{menu-prefix-cls}-submenu-active {
+        color: #fff !important;
+      }
+    }
+
+    &-item {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      font-size: @font-size-base;
+      list-style: none;
+      cursor: pointer;
+      outline: none;
+      align-items: center;
+
+      &:hover,
+      &:active {
+        color: inherit;
+      }
+    }
+
+    &-item > i {
+      margin-right: 6px;
+    }
+
+    &-submenu-title > i,
+    &-submenu-title span > i {
+      margin-right: 8px;
+    }
+
+    // vertical
+    &-vertical &-item,
+    &-vertical &-submenu-title {
+      position: relative;
+      z-index: 1;
+      padding: 14px 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        color: @primary-color;
+      }
+
+      .@{menu-prefix-cls}-tooltip {
+        width: calc(100% - 0px);
+        padding: 12px 0;
+        text-align: center;
+      }
+      .@{menu-prefix-cls}-submenu-popup {
+        padding: 12px 0;
+      }
+    }
+
+    &-vertical &-submenu-collapse {
+      .@{submenu-popup-prefix-cls} {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .@{menu-prefix-cls}-submenu-collapsed-show-tit {
+        flex-direction: column;
+      }
+    }
+
+    &-vertical&-collapse &-item,
+    &-vertical&-collapse &-submenu-title {
+      padding: 0 0;
+    }
+
+    &-vertical &-submenu-title-icon {
+      position: absolute;
+      top: 50%;
+      right: 18px;
+      transform: translateY(-50%);
+    }
+
+    &-submenu-title-icon {
+      transition: transform @transition-time @ease-in-out;
+    }
+
+    &-vertical &-opened > * > &-submenu-title-icon {
+      transform: translateY(-50%) rotate(180deg);
+    }
+
+    &-vertical &-submenu {
+      &-nested {
+        padding-left: 20px;
+      }
+      .@{menu-prefix-cls}-item {
+        padding-left: 43px;
+      }
+    }
+
+    &-light&-vertical &-item {
+      &-active:not(.@{menu-prefix-cls}-submenu) {
+        z-index: 2;
+        color: @primary-color;
+        background-color: fade(@primary-color, 10);
+
+        .light-border();
+      }
+      &-active.@{menu-prefix-cls}-submenu {
+        color: @primary-color;
+      }
+    }
+
+    &-light&-vertical&-collapse {
+      > li.@{menu-prefix-cls}-item-active,
+      .@{menu-prefix-cls}-submenu-active {
+        position: relative;
+        background-color: fade(@primary-color, 5);
+
+        &::after {
+          display: none;
+        }
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 3px;
+          height: 100%;
+          background-color: @primary-color;
+          content: '';
+        }
+      }
+    }
+
+    &-dark&-vertical &-item,
+    &-dark&-vertical &-submenu-title {
+      color: @menu-dark-subsidiary-color;
+      &-active:not(.@{menu-prefix-cls}-submenu) {
+        color: #fff !important;
+        background-color: @primary-color !important;
+      }
+
+      &:hover {
+        color: #fff;
+      }
+    }
+    // update-begin--author:liaozhiyang---date:20240408---for：【QQYUN-8922】左侧导航栏文字颜色调整区分彩色和暗黑
+    &-dark&-vertical&.bright &-item,
+    &-dark&-vertical.bright &-submenu-title {
+      color: rgba(255, 255, 255, 1);
+      &-active:not(.@{menu-prefix-cls}-submenu) {
+        color: #fff !important;
+        background-color: @primary-color !important;
+      }
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240408---for：【QQYUN-8922】左侧导航栏文字颜色调整区分彩色和暗黑
+
+    &-dark&-vertical&-collapse {
+      > li.@{menu-prefix-cls}-item-active,
+      .@{menu-prefix-cls}-submenu-active {
+        position: relative;
+        color: #fff !important;
+        background-color: @primary-color !important;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 3px;
+          height: 100%;
+          background-color: @primary-color;
+          content: '';
+        }
+
+        .@{menu-prefix-cls}-submenu-collapse {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &-dark&-vertical &-submenu &-item {
+      &-active,
+      &-active:hover {
+        color: #fff;
+        border-right: none;
+      }
+    }
+
+    &-dark&-vertical &-child-item-active > &-submenu-title {
+      color: #fff;
+    }
+
+    &-dark&-vertical &-opened {
+      .@{menu-prefix-cls}-submenu-has-parent-submenu {
+        .@{menu-prefix-cls}-submenu-title {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/SimpleMenu/src/components/types.ts b/src/components/SimpleMenu/src/components/types.ts
new file mode 100644
index 0000000..d828e89
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/types.ts
@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+
+export interface Props {
+  theme: string;
+  activeName?: string | number | undefined;
+  openNames: string[];
+  accordion: boolean;
+  width: string;
+  collapsedWidth: string;
+  indentSize: number;
+  collapse: boolean;
+  activeSubMenuNames: (string | number)[];
+}
+
+export interface SubMenuProvider {
+  addSubMenu: (name: string | number, update?: boolean) => void;
+  removeSubMenu: (name: string | number, update?: boolean) => void;
+  removeAll: () => void;
+  sliceIndex: (index: number) => void;
+  isRemoveAllPopup: Ref<boolean>;
+  getOpenNames: () => (string | number)[];
+  handleMouseleave?: Fn;
+  level: number;
+  props: Props;
+}
diff --git a/src/components/SimpleMenu/src/components/useMenu.ts b/src/components/SimpleMenu/src/components/useMenu.ts
new file mode 100644
index 0000000..8830559
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/useMenu.ts
@@ -0,0 +1,84 @@
+import { computed, ComponentInternalInstance, unref } from 'vue';
+import type { CSSProperties } from 'vue';
+
+export function useMenuItem(instance: ComponentInternalInstance | null) {
+  const getParentMenu = computed(() => {
+    return findParentMenu(['Menu', 'SubMenu']);
+  });
+
+  const getParentRootMenu = computed(() => {
+    return findParentMenu(['Menu']);
+  });
+
+  const getParentSubMenu = computed(() => {
+    return findParentMenu(['SubMenu']);
+  });
+
+  const getItemStyle = computed((): CSSProperties => {
+    let parent = instance?.parent;
+    if (!parent) return {};
+    const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20;
+    let padding = indentSize;
+
+    if (unref(getParentRootMenu)?.props.collapse) {
+      padding = indentSize;
+    } else {
+      while (parent && parent.type.name !== 'Menu') {
+        if (parent.type.name === 'SubMenu') {
+          padding += indentSize;
+        }
+        parent = parent.parent;
+      }
+    }
+    return { paddingLeft: padding + 'px' };
+  });
+
+  function findParentMenu(name: string[]) {
+    let parent = instance?.parent;
+    if (!parent) return null;
+    while (parent && name.indexOf(parent.type.name!) === -1) {
+      parent = parent.parent;
+    }
+    return parent;
+  }
+
+  function getParentList() {
+    let parent = instance;
+    if (!parent)
+      return {
+        uidList: [],
+        list: [],
+      };
+    const ret: any[] = [];
+    while (parent && parent.type.name !== 'Menu') {
+      if (parent.type.name === 'SubMenu') {
+        ret.push(parent);
+      }
+      parent = parent.parent;
+    }
+    return {
+      uidList: ret.map((item) => item.uid),
+      list: ret,
+    };
+  }
+
+  function getParentInstance(instance: ComponentInternalInstance, name = 'SubMenu') {
+    let parent = instance.parent;
+    while (parent) {
+      if (parent.type.name !== name) {
+        return parent;
+      }
+      parent = parent.parent;
+    }
+    return parent;
+  }
+
+  return {
+    getParentMenu,
+    getParentInstance,
+    getParentRootMenu,
+    getParentList,
+    getParentSubMenu,
+    getItemStyle,
+  };
+}
diff --git a/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts b/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
new file mode 100644
index 0000000..f3d8100
--- /dev/null
+++ b/src/components/SimpleMenu/src/components/useSimpleMenuContext.ts
@@ -0,0 +1,18 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { Emitter } from '/@/utils/mitt';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface SimpleRootMenuContextProps {
+  rootMenuEmitter: Emitter;
+  activeName: Ref<string | number>;
+}
+
+const key: InjectionKey<SimpleRootMenuContextProps> = Symbol();
+
+export function createSimpleRootMenuContext(context: SimpleRootMenuContextProps) {
+  return createContext<SimpleRootMenuContextProps>(context, key, { readonly: false, native: true });
+}
+
+export function useSimpleRootMenuContext() {
+  return useContext<SimpleRootMenuContextProps>(key);
+}
diff --git a/src/components/SimpleMenu/src/index.less b/src/components/SimpleMenu/src/index.less
new file mode 100644
index 0000000..4f9c9ce
--- /dev/null
+++ b/src/components/SimpleMenu/src/index.less
@@ -0,0 +1,77 @@
+@simple-prefix-cls: ~'@{namespace}-simple-menu';
+@prefix-cls: ~'@{namespace}-menu';
+
+.@{prefix-cls} {
+  &-dark&-vertical .@{simple-prefix-cls}__parent {
+    background-color: @sider-dark-bg-color;
+    > .@{prefix-cls}-submenu-title {
+      background-color: @sider-dark-bg-color;
+    }
+  }
+
+  &-dark&-vertical .@{simple-prefix-cls}__children,
+  &-dark&-popup .@{simple-prefix-cls}__children {
+    background-color: @sider-dark-lighten-bg-color;
+    > .@{prefix-cls}-submenu-title {
+      background-color: @sider-dark-lighten-bg-color;
+    }
+  }
+
+  .collapse-title {
+    overflow: hidden;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.@{simple-prefix-cls} {
+  &-sub-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all 0.3s;
+  }
+
+  &-tag {
+    position: absolute;
+    top: calc(50% - 8px);
+    right: 30px;
+    display: inline-block;
+    padding: 2px 3px;
+    margin-right: 4px;
+    font-size: 10px;
+    line-height: 14px;
+    color: #fff;
+    border-radius: 2px;
+
+    &--collapse {
+      top: 6px !important;
+      right: 2px;
+    }
+
+    &--dot {
+      top: calc(50% - 2px);
+      width: 6px;
+      height: 6px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &--primary {
+      background-color: @primary-color;
+    }
+
+    &--error {
+      background-color: @error-color;
+    }
+
+    &--success {
+      background-color: @success-color;
+    }
+
+    &--warn {
+      background-color: @warning-color;
+    }
+  }
+}
diff --git a/src/components/SimpleMenu/src/types.ts b/src/components/SimpleMenu/src/types.ts
new file mode 100644
index 0000000..2e292d4
--- /dev/null
+++ b/src/components/SimpleMenu/src/types.ts
@@ -0,0 +1,5 @@
+export interface MenuState {
+  activeName: string;
+  openNames: string[];
+  activeSubMenuNames: string[];
+}
diff --git a/src/components/SimpleMenu/src/useOpenKeys.ts b/src/components/SimpleMenu/src/useOpenKeys.ts
new file mode 100644
index 0000000..c38b92c
--- /dev/null
+++ b/src/components/SimpleMenu/src/useOpenKeys.ts
@@ -0,0 +1,44 @@
+import type { Menu as MenuType } from '/@/router/types';
+import type { MenuState } from './types';
+
+import { computed, Ref, toRaw } from 'vue';
+
+import { unref } from 'vue';
+import { uniq } from 'lodash-es';
+import { getAllParentPath } from '/@/router/helper/menuHelper';
+
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { useDebounceFn } from '@vueuse/core';
+
+export function useOpenKeys(menuState: MenuState, menus: Ref<MenuType[]>, accordion: Ref<boolean>, mixSider: Ref<boolean>, collapse: Ref<boolean>) {
+  const debounceSetOpenKeys = useDebounceFn(setOpenKeys, 50);
+  async function setOpenKeys(path: string) {
+    const native = !mixSider.value;
+    const menuList = toRaw(menus.value);
+    useTimeoutFn(
+      () => {
+        if (menuList?.length === 0) {
+          menuState.activeSubMenuNames = [];
+          menuState.openNames = [];
+          return;
+        }
+        const keys = getAllParentPath(menuList, path);
+
+        if (!unref(accordion)) {
+          menuState.openNames = uniq([...menuState.openNames, ...keys]);
+        } else {
+          menuState.openNames = keys;
+        }
+        menuState.activeSubMenuNames = menuState.openNames;
+      },
+      30,
+      native
+    );
+  }
+
+  const getOpenKeys = computed(() => {
+    return unref(collapse) ? [] : menuState.openNames;
+  });
+
+  return { setOpenKeys: debounceSetOpenKeys, getOpenKeys };
+}
diff --git a/src/components/StrengthMeter/index.ts b/src/components/StrengthMeter/index.ts
new file mode 100644
index 0000000..9763afa
--- /dev/null
+++ b/src/components/StrengthMeter/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import strengthMeter from './src/StrengthMeter.vue';
+
+export const StrengthMeter = withInstall(strengthMeter);
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
new file mode 100644
index 0000000..149ce4d
--- /dev/null
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :class="prefixCls" class="relative">
+    <InputPassword v-if="showInput" v-bind="$attrs" allowClear :value="innerValueRef" @change="handleChange" :disabled="disabled">
+      <template #[item]="data" v-for="item in Object.keys($slots)">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </InputPassword>
+    <div :class="`${prefixCls}-bar`">
+      <div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { zxcvbn } from '@zxcvbn-ts/core';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'StrengthMeter',
+    components: { InputPassword: Input.Password },
+    props: {
+      value: propTypes.string,
+      showInput: propTypes.bool.def(true),
+      disabled: propTypes.bool,
+    },
+    emits: ['score-change', 'change'],
+    setup(props, { emit }) {
+      const innerValueRef = ref('');
+      const { prefixCls } = useDesign('strength-meter');
+
+      const getPasswordStrength = computed(() => {
+        const { disabled } = props;
+        if (disabled) return -1;
+        const innerValue = unref(innerValueRef);
+        const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
+        emit('score-change', score);
+        return score;
+      });
+
+      function handleChange(e: ChangeEvent) {
+        innerValueRef.value = e.target.value;
+        emit('change', e.target.value);
+      }
+
+      watchEffect(() => {
+        innerValueRef.value = props.value || '';
+      });
+
+      // watch(
+      //   () => unref(innerValueRef),
+      //   (val) => {
+      //     emit('change', val);
+      //   }
+      // );
+      return {
+        getPasswordStrength,
+        handleChange,
+        prefixCls,
+        innerValueRef,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-strength-meter';
+
+  .@{prefix-cls} {
+    &-bar {
+      position: relative;
+      height: 6px;
+      margin: 10px auto 6px;
+      background-color: @disabled-color;
+      border-radius: 6px;
+
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 10;
+        display: block;
+        width: 20%;
+        height: inherit;
+        background-color: transparent;
+        border-color: @white;
+        border-style: solid;
+        border-width: 0 5px 0 5px;
+        content: '';
+      }
+
+      &::before {
+        left: 20%;
+      }
+
+      &::after {
+        right: 20%;
+      }
+
+      &--fill {
+        position: absolute;
+        width: 0;
+        height: inherit;
+        background-color: transparent;
+        border-radius: inherit;
+        transition: width 0.5s ease-in-out, background 0.25s;
+
+        &[data-score='0'] {
+          width: 20%;
+          background-color: darken(@error-color, 10%);
+        }
+
+        &[data-score='1'] {
+          width: 40%;
+          background-color: @error-color;
+        }
+
+        &[data-score='2'] {
+          width: 60%;
+          background-color: @warning-color;
+        }
+
+        &[data-score='3'] {
+          width: 80%;
+          background-color: fade(@success-color, 50%);
+        }
+
+        &[data-score='4'] {
+          width: 100%;
+          background-color: @success-color;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
new file mode 100644
index 0000000..7fe08c9
--- /dev/null
+++ b/src/components/Table/index.ts
@@ -0,0 +1,10 @@
+export { default as BasicTable } from './src/BasicTable.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue';
+export { default as TableImg } from './src/components/TableImg.vue';
+export * from './src/types/table';
+export * from './src/types/pagination';
+export * from './src/types/tableAction';
+export { useTable } from './src/hooks/useTable';
+export type { FormSchema, FormProps } from '/@/components/Form/src/types/form';
+export type { EditRecordRow } from './src/components/editable';
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
new file mode 100644
index 0000000..3a109e0
--- /dev/null
+++ b/src/components/Table/src/BasicTable.vue
@@ -0,0 +1,606 @@
+<template>
+  <div ref="wrapRef" :class="getWrapperClass">
+    <BasicForm
+      :class="{ 'table-search-area-hidden': !getBindValues.formConfig?.schemas?.length }"
+      submitOnReset
+      v-bind="getFormProps"
+      source="table-query"
+      v-if="getBindValues.useSearchForm"
+      :tableAction="tableAction"
+      @register="registerForm"
+      @submit="handleSearchInfoChange"
+      @advanced-change="redoHeight"
+    >
+      <template #[replaceFormSlotKey(item)]="data" v-for="item in getFormSlotKeys">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </BasicForm>
+
+    <!-- antd v3 升级兼容，阻止数据的收集，防止控制台报错 -->
+    <!-- https://antdv.com/docs/vue/migration-v3-cn -->
+    <a-form-item-rest>
+      <!-- 【TV360X-377】关联记录必填影响到了table的输入框和页码样式 -->
+      <a-form-item>
+        <Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @resizeColumn="handleResizeColumn" @change="handleTableChange">
+          <!-- antd的原生插槽直接传递 -->
+          <template #[item]="data" v-for="item in slotNamesGroup.native" :key="item">
+            <!-- 代码逻辑说明: 【issues/1146】BasicTable使用headerCell全选框出不来 -->
+            <template v-if="item === 'headerCell'">
+              <CustomSelectHeader v-if="isCustomSelection(data.column)" v-bind="selectHeaderProps" />
+              <slot v-else :name="item" v-bind="data || {}"></slot>
+            </template>
+            <slot v-else :name="item" v-bind="data || {}"></slot>
+          </template>
+          <template #headerCell="{ column }">
+            <!-- 代码逻辑说明: 【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题 -->
+            <CustomSelectHeader v-if="isCustomSelection(column)" v-bind="selectHeaderProps"/>
+            <HeaderCell v-else :column="column" />
+          </template>
+          <!-- 增加对antdv3.x兼容 -->
+          <template #bodyCell="data">
+            <template v-if="data.column?.slotsBak?.customRender">
+              <slot :name="data.column.slotsBak.customRender" v-bind="data || {}"></slot>
+            </template>
+            <template v-else>
+              <slot name="bodyCell" v-bind="data || {}"></slot>
+            </template>
+          </template>
+          <template v-if="showSummaryRef && !getBindValues.showSummary" #summary="data">
+            <slot name="summary" v-bind="data || {}">
+              <TableSummary :data="data || {}" v-bind="getSummaryProps" />
+            </slot>
+          </template>
+        </Table>
+      </a-form-item>
+    </a-form-item-rest>
+  </div>
+</template>
+<script lang="ts">
+  import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam, BasicColumn } from './types/table';
+
+  import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect, watch, onUnmounted, onMounted, nextTick } from 'vue';
+  import { Table } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { PageWrapperFixedHeightKey } from '/@/components/Page/injectionKey';
+  import CustomSelectHeader from './components/CustomSelectHeader.vue'
+  import expandIcon from './components/ExpandIcon';
+  import HeaderCell from './components/HeaderCell.vue';
+  import TableSummary from './components/TableSummary';
+  import { InnerHandlers } from './types/table';
+  import { usePagination } from './hooks/usePagination';
+  import { useColumns } from './hooks/useColumns';
+  import { useDataSource } from './hooks/useDataSource';
+  import { useLoading } from './hooks/useLoading';
+  import { useRowSelection } from './hooks/useRowSelection';
+  import { useTableScroll } from './hooks/useTableScroll';
+  import { useCustomRow } from './hooks/useCustomRow';
+  import { useTableStyle } from './hooks/useTableStyle';
+  import { useTableHeader } from './hooks/useTableHeader';
+  import { useTableExpand } from './hooks/useTableExpand';
+  import { createTableContext } from './hooks/useTableContext';
+  import { useTableFooter } from './hooks/useTableFooter';
+  import { useTableForm } from './hooks/useTableForm';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useCustomSelection } from "./hooks/useCustomSelection";
+
+  import { omit, pick } from 'lodash-es';
+  import { basicProps } from './props';
+  import { isFunction } from '/@/utils/is';
+  import { warn } from '/@/utils/log';
+
+  export default defineComponent({
+    components: {
+      Table,
+      BasicForm,
+      HeaderCell,
+      TableSummary,
+      CustomSelectHeader,
+    },
+    props: basicProps,
+    emits: [
+      'fetch-success',
+      'fetch-error',
+      'selection-change',
+      'register',
+      'row-click',
+      'row-dbClick',
+      'row-contextmenu',
+      'row-mouseenter',
+      'row-mouseleave',
+      'edit-end',
+      'edit-cancel',
+      'edit-row-end',
+      'edit-change',
+      'expanded-rows-change',
+      'change',
+      'columns-change',
+      'table-redo',
+    ],
+    setup(props, { attrs, emit, slots, expose }) {
+      const tableElRef = ref(null);
+      const tableData = ref<Recordable[]>([]);
+
+      const wrapRef = ref(null);
+      const innerPropsRef = ref<Partial<BasicTableProps>>();
+
+      const { prefixCls } = useDesign('basic-table');
+      const [registerForm, formActions] = useForm();
+
+      const getProps = computed(() => {
+        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+      });
+
+      const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
+      watchEffect(() => {
+        unref(isFixedHeightPage) &&
+          props.canResize &&
+          warn("'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)");
+      });
+
+      const { getLoading, setLoading } = useLoading(getProps);
+      const { getPaginationInfo, getPagination, setPagination, setShowPagination, getShowPagination } = usePagination(getProps);
+
+
+      // const { getRowSelection, getRowSelectionRef, getSelectRows, clearSelectedRowKeys, getSelectRowKeys, deleteSelectRowByKey, setSelectedRowKeys } =
+      //   useRowSelection(getProps, tableData, emit);
+
+      // 子级列名
+      const childrenColumnName = computed(() => getProps.value.childrenColumnName || 'children');
+
+      // 自定义选择列
+      const {
+        getRowSelection,
+        getSelectRows,
+        getSelectRowKeys,
+        setSelectedRowKeys,
+        getRowSelectionRef,
+        selectHeaderProps,
+        isCustomSelection,
+        handleCustomSelectColumn,
+        clearSelectedRowKeys,
+        deleteSelectRowByKey,
+        getExpandIconColumnIndex,
+      } = useCustomSelection(
+        getProps,
+        emit,
+        wrapRef,
+        getPaginationInfo,
+        tableData,
+        childrenColumnName
+      )
+
+      const {
+        handleTableChange: onTableChange,
+        getDataSourceRef,
+        getDataSource,
+        getRawDataSource,
+        setTableData,
+        updateTableDataRecord,
+        deleteTableDataRecord,
+        insertTableDataRecord,
+        findTableDataRecord,
+        fetch,
+        getRowKey,
+        reload,
+        getAutoCreateKey,
+        updateTableData,
+      } = useDataSource(
+        getProps,
+        {
+          tableData,
+          getPaginationInfo,
+          setLoading,
+          setPagination,
+          validate: formActions.validate,
+          clearSelectedRowKeys,
+        },
+        emit
+      );
+
+      function handleTableChange(...args) {
+        onTableChange.call(undefined, ...args);
+        emit('change', ...args);
+        // 解决通过useTable注册onChange时不起作用的问题
+        const { onChange } = unref(getProps);
+        onChange && isFunction(onChange) && onChange.call(undefined, ...args);
+      }
+
+      const { getViewColumns, getColumns, getRefColumns, setCacheColumnsByField, setColumns, getColumnsRef, getCacheColumns } = useColumns(
+        getProps,
+        getPaginationInfo,
+        // 代码逻辑说明: 【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
+        handleCustomSelectColumn,
+      );
+
+      const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef, slots, getPaginationInfo);
+
+      const { customRow } = useCustomRow(getProps, {
+        setSelectedRowKeys,
+        getSelectRowKeys,
+        clearSelectedRowKeys,
+        getAutoCreateKey,
+        emit,
+      });
+
+      const { getRowClassName } = useTableStyle(getProps, prefixCls);
+
+      const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);
+
+      const handlers: InnerHandlers = {
+        onColumnsChange: (data: ColumnChangeParam[]) => {
+          emit('columns-change', data);
+          // support useTable
+          unref(getProps).onColumnsChange?.(data);
+        },
+      };
+
+      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
+      // 代码逻辑说明: 【pull/1201】添加antd的TableSummary功能兼容老的summary（表尾合计）
+      const getSummaryProps = computed(() => {
+        // 代码逻辑说明: 【issues/7956】修复showSummary: false时且有内嵌子表时合计栏错位
+        const result = pick(unref(getProps), ['summaryFunc', 'summaryData', 'hasExpandedRow', 'rowKey']);
+        result['hasExpandedRow'] = Object.keys(slots).includes('expandedRowRender');
+        return result;
+      });
+      const getIsEmptyData = computed(() => {
+        return (unref(getDataSourceRef) || []).length === 0;
+      });
+      const showSummaryRef = computed(() => {
+        const summaryProps = unref(getSummaryProps);
+        return (summaryProps.summaryFunc || summaryProps.summaryData) && !unref(getIsEmptyData);
+      });
+
+      const { getFooterProps } = useTableFooter(getProps, slots, getScrollRef, tableElRef, getDataSourceRef);
+
+      const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading);
+
+      const getBindValues = computed(() => {
+        const dataSource = unref(getDataSourceRef);
+        let propsData: Recordable = {
+          // date-begin--author:liaozhiyang---date:20250716---for：【issues/8564】basicTale的TableLayout换成auto不生效
+          tableLayout: 'fixed',
+          // date-begin--author:liaozhiyang---date:20250716---for：【issues/8564】basicTale的TableLayout换成auto不生效
+          // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
+          ...attrs,
+          customRow,
+          //树列表展开使用AntDesignVue默认的加减图标 author:scott date:20210914
+          //expandIcon: slots.expandIcon ? null : expandIcon(),
+          ...unref(getProps),
+          ...unref(getHeaderProps),
+          scroll: unref(getScrollRef),
+          loading: unref(getLoading),
+          rowSelection: unref(getRowSelectionRef),
+          rowKey: unref(getRowKey),
+          columns: toRaw(unref(getViewColumns)),
+          pagination: toRaw(unref(getPaginationInfo)),
+          dataSource,
+          footer: unref(getFooterProps),
+          ...unref(getExpandOption),
+          // 【QQYUN-5837】动态计算 expandIconColumnIndex
+          expandIconColumnIndex: getExpandIconColumnIndex.value,
+        };
+
+        //额外的展开行存在插槽时会将滚动移除掉,注释掉
+        /*if (slots.expandedRowRender) {
+          propsData = omit(propsData, 'scroll');
+        }*/
+
+        // 自定义选择列，需要去掉原生的
+        delete propsData.rowSelection
+
+        // 代码逻辑说明: 【QQYUN-6387】展开写法（去掉报错）
+        !propsData.isTreeTable && delete propsData.expandIconColumnIndex;
+        propsData.expandedRowKeys === null && delete propsData.expandedRowKeys;
+        propsData = omit(propsData, ['class', 'onChange']);
+        return propsData;
+      });
+
+      // 统一设置表格列宽度
+      const getMaxColumnWidth = computed(() => {
+        const values = unref(getBindValues);
+        return values.maxColumnWidth > 0 ? values.maxColumnWidth + 'px' : null;
+      });
+
+      const getWrapperClass = computed(() => {
+        const values = unref(getBindValues);
+        return [
+          prefixCls,
+          attrs.class,
+          {
+            [`${prefixCls}-form-container`]: values.useSearchForm,
+            [`${prefixCls}--inset`]: values.inset,
+            [`${prefixCls}-col-max-width`]: getMaxColumnWidth.value != null,
+            // 是否显示表尾合计
+            [`${prefixCls}--show-summary`]: values.showSummary,
+          },
+        ];
+      });
+
+      const getEmptyDataIsShowTable = computed(() => {
+        const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
+        if (emptyDataIsShowTable || !useSearchForm) {
+          return true;
+        }
+        return !!unref(getDataSourceRef).length;
+      });
+
+      function setProps(props: Partial<BasicTableProps>) {
+        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+      }
+
+      const tableAction: TableActionType = {
+        reload,
+        getSelectRows,
+        clearSelectedRowKeys,
+        getSelectRowKeys,
+        deleteSelectRowByKey,
+        setPagination,
+        setTableData,
+        updateTableDataRecord,
+        deleteTableDataRecord,
+        insertTableDataRecord,
+        findTableDataRecord,
+        redoHeight,
+        setSelectedRowKeys,
+        setColumns,
+        setLoading,
+        getDataSource,
+        getRawDataSource,
+        setProps,
+        getRowSelection,
+        getPaginationRef: getPagination,
+        getColumns,
+        // 代码逻辑说明: 【issues/8529】setColumns后列配置没联动更新
+        getColumnsRef: () => getColumnsRef,
+        getCacheColumns,
+        emit,
+        updateTableData,
+        setShowPagination,
+        getShowPagination,
+        setCacheColumnsByField,
+        expandAll,
+        collapseAll,
+        getSize: () => {
+          return unref(getBindValues).size as SizeType;
+        },
+        // 代码逻辑说明: 【QQYUN-13558】erp风格主表在5条数据时也有滚动条
+        getBindValuesRef: () => getBindValues,
+      };
+      createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+      // 获取分组之后的slot名称
+      const slotNamesGroup = computed<{
+        // AntTable原生插槽
+        native: string[];
+        // 列自定义插槽
+        custom: string[];
+      }>(() => {
+        const native: string[] = [];
+        const custom: string[] = [];
+        const columns = unref<Recordable[]>(getViewColumns) as BasicColumn[];
+        const allCustomRender = columns.map<string>((column) => column.slotsBak?.customRender);
+        for (const name of Object.keys(slots)) {
+          // 过滤特殊的插槽
+          if (['bodyCell'].includes(name)) {
+            continue;
+          }
+          if (allCustomRender.includes(name)) {
+            custom.push(name);
+          } else {
+            native.push(name);
+          }
+        }
+        return { native, custom };
+      });
+      // 代码逻辑说明: 【issues/945】BasicTable组件设置默认展开不生效
+      nextTick(() => {
+        getProps.value.defaultExpandAllRows && expandAll();
+      })
+      // 代码逻辑说明: 【issues/7588】选择后自动刷新表格
+      expose({ ...tableAction, handleSearchInfoChange });
+
+      emit('register', tableAction, formActions);
+
+
+      return {
+        tableElRef,
+        getBindValues,
+        getLoading,
+        registerForm,
+        handleSearchInfoChange,
+        getEmptyDataIsShowTable,
+        handleTableChange,
+        getRowClassName,
+        wrapRef,
+        tableAction,
+        redoHeight,
+        handleResizeColumn: (w, col) => {
+          // 代码逻辑说明: 【issues/7101】列配置resizable: true时，表尾合计的列宽没有同步改变
+          const columns = getColumns();
+          const findItem = columns.find((item) => {
+            if (item['dataIndex'] != null) {
+              return item['dataIndex'] === col['dataIndex'];
+            } else if (item['flag'] != null) {
+              return item['flag'] === col['flag'];
+            }
+            return false;
+          });
+          if (findItem) {
+            findItem.width = w;
+            setColumns(columns);
+          }
+          console.log('col',col);
+          col.width = w;
+        },
+        getFormProps: getFormProps as any,
+        replaceFormSlotKey,
+        getFormSlotKeys,
+        getWrapperClass,
+        getMaxColumnWidth,
+        columns: getViewColumns,
+
+        selectHeaderProps,
+        isCustomSelection,
+        slotNamesGroup,
+        getSummaryProps,
+        showSummaryRef,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @border-color: #cecece4d;
+
+  @prefix-cls: ~'@{namespace}-basic-table';
+
+  [data-theme='dark'] {
+    .ant-table-tbody > tr:hover.ant-table-row-selected > td,
+    .ant-table-tbody > tr.ant-table-row-selected td {
+      background-color: #262626;
+    }
+
+    .@{prefix-cls} {
+      //表格选择工具栏样式
+      .alert {
+        // background-color: #323232;
+        // border-color: #424242;
+      }
+    }
+  }
+
+  .@{prefix-cls} {
+    max-width: 100%;
+
+    &-row__striped {
+      td {
+        background-color: @app-content-background;
+      }
+    }
+    // 代码逻辑说明: 【TV360X-1232】查询区域隐藏后点击刷新不走请求了(采用css隐藏)
+    > .table-search-area-hidden {
+      display: none;
+    }
+    &-form-container {
+      padding: 10px;
+
+      .ant-form {
+        padding: 12px 10px 6px 10px;
+        margin-bottom: 8px;
+        background-color: @component-background;
+        border-radius: 2px;
+      }
+    }
+
+    .ant-tag {
+      margin-right: 0;
+    }
+
+    // 代码逻辑说明: [issues/526]RangePicker 设置预设范围按钮样式问题---
+    .ant-picker-preset {
+      .ant-tag {
+        margin-right: 8px !important;
+      }
+    }
+
+    .ant-table-wrapper {
+      padding: 6px;
+      background-color: @component-background;
+      border-radius: 2px;
+
+      .ant-table-title {
+        min-height: 40px;
+        padding: 0 0 8px 0 !important;
+      }
+
+      .ant-table.ant-table-bordered .ant-table-title {
+        border: none !important;
+      }
+    }
+
+    .ant-table {
+      width: 100%;
+      overflow-x: hidden;
+
+      &-title {
+        display: flex;
+        padding: 8px 6px;
+        border-bottom: none;
+        justify-content: space-between;
+        align-items: center;
+      }
+      //定义行颜色
+      .trcolor {
+        background-color: rgba(255, 192, 203, 0.31);
+        color: red;
+      }
+
+      //.ant-table-tbody > tr.ant-table-row-selected td {
+      //background-color: fade(@primary-color, 8%) !important;
+      //}
+    }
+
+    .ant-pagination {
+      margin: 10px 0 0 0;
+    }
+
+    .ant-table-footer {
+      padding: 0;
+
+      .ant-table-wrapper {
+        padding: 0;
+      }
+
+      table {
+        border: none !important;
+      }
+
+      .ant-table-content {
+        overflow-x: hidden !important;
+        //  overflow-y: scroll !important;
+      }
+
+      td {
+        padding: 12px 8px;
+      }
+    }
+    //表格选择工具栏样式
+    .alert {
+      height: 38px;
+      // background-color: #e6f7ff;
+      // border-color: #91d5ff;
+    }
+    &--inset {
+      .ant-table-wrapper {
+        padding: 0;
+      }
+    }
+
+    // ------ 统一设置表格列最大宽度 ------
+    &-col-max-width {
+      .ant-table-thead tr th,
+      .ant-table-tbody tr td {
+        max-width: v-bind(getMaxColumnWidth);
+      }
+    }
+    // ------ 统一设置表格列最大宽度 ------
+
+    // 代码逻辑说明: 【issues/622】修复表尾合计错位的问题
+    &--show-summary {
+      .ant-table > .ant-table-footer {
+        padding: 12px 0 0;
+      }
+      .ant-table > .ant-table-footer {
+        // 代码逻辑说明: 【issues/7413】合计行有点对不齐
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+      .ant-table.ant-table-bordered > .ant-table-footer {
+        border: 0;
+      }
+    }
+    // 代码逻辑说明: 【TV360X-377】关联记录必填影响到了table的输入框和页码样式
+    > .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+</style>
diff --git a/src/components/Table/src/componentMap.ts b/src/components/Table/src/componentMap.ts
new file mode 100644
index 0000000..0578a60
--- /dev/null
+++ b/src/components/Table/src/componentMap.ts
@@ -0,0 +1,26 @@
+import type { Component } from 'vue';
+import { Input, Select, Checkbox, InputNumber, Switch, DatePicker, TimePicker } from 'ant-design-vue';
+import type { ComponentType } from './types/componentType';
+import { ApiSelect, ApiTreeSelect } from '/@/components/Form';
+
+const componentMap = new Map<ComponentType, Component>();
+
+componentMap.set('Input', Input);
+componentMap.set('InputNumber', InputNumber);
+componentMap.set('Select', Select);
+componentMap.set('ApiSelect', ApiSelect);
+componentMap.set('ApiTreeSelect', ApiTreeSelect);
+componentMap.set('Switch', Switch);
+componentMap.set('Checkbox', Checkbox);
+componentMap.set('DatePicker', DatePicker);
+componentMap.set('TimePicker', TimePicker);
+
+export function add(compName: ComponentType, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: ComponentType) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };
diff --git a/src/components/Table/src/components/CustomSelectHeader.vue b/src/components/Table/src/components/CustomSelectHeader.vue
new file mode 100644
index 0000000..6e863f2
--- /dev/null
+++ b/src/components/Table/src/components/CustomSelectHeader.vue
@@ -0,0 +1,64 @@
+<!-- 自定义选择列，表头实现部分 -->
+<template>
+  <template v-if="isRadio">
+    <!-- radio不存在全选，所以放个空标签 -->
+    <span></span>
+  </template>
+  <template v-else>
+    <template v-if="hideSelectAll">
+      <span></span>
+    </template>
+    <a-checkbox :disabled="disabled" v-else :checked="checked" :indeterminate="isHalf" @update:checked="onChange" />
+  </template>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    isRadio: {
+      type: Boolean,
+      required: true,
+    },
+    selectedLength: {
+      type: Number,
+      required: true,
+    },
+    // 当前页条目数
+    pageSize: {
+      type: Number,
+      required: true,
+    },
+    hideSelectAll: {
+      type: Boolean,
+      default: false,
+    },
+    // 代码逻辑说明: 【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  });
+  const emit = defineEmits(['select-all']);
+
+  // 是否全选
+  const checked = computed(() => {
+    if (props.isRadio) {
+      return false;
+    }
+    return props.selectedLength > 0 && props.selectedLength >= props.pageSize;
+  });
+
+  // 是否半选
+  const isHalf = computed(() => {
+    if (props.isRadio) {
+      return false;
+    }
+    return props.selectedLength > 0 && props.selectedLength < props.pageSize;
+  });
+
+  function onChange(checked: boolean) {
+    emit('select-all', checked);
+  }
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/Table/src/components/EditTableHeaderIcon.vue b/src/components/Table/src/components/EditTableHeaderIcon.vue
new file mode 100644
index 0000000..369820e
--- /dev/null
+++ b/src/components/Table/src/components/EditTableHeaderIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <span>
+    <slot></slot>
+    {{ title }}
+    <FormOutlined />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { FormOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'EditTableHeaderIcon',
+    components: { FormOutlined },
+    props: { title: { type: String, default: '' } },
+  });
+</script>
diff --git a/src/components/Table/src/components/ExpandIcon.tsx b/src/components/Table/src/components/ExpandIcon.tsx
new file mode 100644
index 0000000..3d1d98d
--- /dev/null
+++ b/src/components/Table/src/components/ExpandIcon.tsx
@@ -0,0 +1,23 @@
+import { BasicArrow } from '/@/components/Basic';
+
+export default () => {
+  return (props: Recordable) => {
+    if (!props.expandable) {
+      if (props.needIndentSpaced) {
+        return <span class="ant-table-row-expand-icon ant-table-row-spaced" />;
+      } else {
+        return <span />;
+      }
+    }
+    return (
+      <BasicArrow
+        style="margin-right: 8px"
+        iconStyle="margin-top: -2px;"
+        onClick={(e: Event) => {
+          props.onExpand(props.record, e);
+        }}
+        expand={props.expanded}
+      />
+    );
+  };
+};
diff --git a/src/components/Table/src/components/HeaderCell.vue b/src/components/Table/src/components/HeaderCell.vue
new file mode 100644
index 0000000..4e2f87c
--- /dev/null
+++ b/src/components/Table/src/components/HeaderCell.vue
@@ -0,0 +1,56 @@
+<template>
+  <EditTableHeaderCell v-if="getIsEdit">
+    {{ getTitle }}
+  </EditTableHeaderCell>
+  <span v-else>{{ getTitle }}</span>
+  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { BasicColumn } from '../types/table';
+  import { defineComponent, computed } from 'vue';
+  import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
+  import EditTableHeaderCell from './EditTableHeaderIcon.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'TableHeaderCell',
+    components: {
+      EditTableHeaderCell,
+      BasicHelp,
+    },
+    props: {
+      column: {
+        type: Object as PropType<BasicColumn>,
+        default: () => ({}),
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('basic-table-header-cell');
+
+      const getIsEdit = computed(() => !!props.column?.edit);
+      const getTitle = computed(() => {
+        // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+        const result = props.column?.customTitle || props.column?.title;
+        if (typeof result === 'string') {
+          return result;
+        } else {
+          return '';
+        }
+      });
+      const getHelpMessage = computed(() => props.column?.helpMessage);
+
+      return { prefixCls, getIsEdit, getTitle, getHelpMessage };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-header-cell';
+
+  .@{prefix-cls} {
+    &__help {
+      margin-left: 8px;
+      color: rgb(0 0 0 / 65%) !important;
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
new file mode 100644
index 0000000..337740c
--- /dev/null
+++ b/src/components/Table/src/components/TableAction.vue
@@ -0,0 +1,311 @@
+<template>
+  <div :class="[prefixCls, getAlign]" @click="onCellClick">
+    <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+      <template v-if="action.slot">
+        <slot name="customButton"></slot>
+      </template>
+      <template v-else>
+        <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
+          <PopConfirmButton v-bind="action">
+            <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
+            <template v-if="action.label">{{ action.label }}</template>
+          </PopConfirmButton>
+        </Tooltip>
+        <PopConfirmButton v-else v-bind="action">
+          <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
+          <template v-if="action.label">{{ action.label }}</template>
+        </PopConfirmButton>
+      </template>
+
+      <Divider type="vertical" class="action-divider" v-if="divider && index < getActions.length - 1" />
+    </template>
+    <Dropdown
+      :overlayClassName="dropdownCls"
+      :trigger="['hover']"
+      :dropMenuList="getDropdownList"
+      popconfirm
+      v-if="dropDownActions && getDropdownList.length > 0"
+      :getPopupContainer="dropdownGetPopupContainer"
+    >
+      <slot name="more"></slot>
+      <!--  设置插槽   -->
+      <template v-slot:[item.slot] v-for="(item, index) in getDropdownSlotList" :key="`${index}-${item.label}`">
+        <slot :name="item.slot"></slot>
+      </template>
+
+      <a-button type="link" size="small" v-if="!$slots.more"> 更多 <Icon icon="mdi-light:chevron-down"></Icon> </a-button>
+    </Dropdown>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+  import { MoreOutlined } from '@ant-design/icons-vue';
+  import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
+  import Icon from '/@/components/Icon/index';
+  import { ActionItem, TableActionType } from '/@/components/Table';
+  import { PopConfirmButton } from '/@/components/Button';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../hooks/useTableContext';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { isBoolean, isFunction, isString } from '/@/utils/is';
+  import { propTypes } from '/@/utils/propTypes';
+  import { ACTION_COLUMN_FLAG } from '../const';
+
+  export default defineComponent({
+    name: 'TableAction',
+    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
+    props: {
+      actions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+      },
+      dropDownActions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+      },
+      divider: propTypes.bool.def(true),
+      outside: propTypes.bool,
+      stopButtonPropagation: propTypes.bool.def(false),
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('basic-table-action');
+      const dropdownCls = `${prefixCls}-dropdown`;
+      let table: Partial<TableActionType> = {};
+
+      const tempActionsAuth = {};
+      const tempDropdownListAuth = {};
+
+      if (!props.outside) {
+        table = useTableContext();
+      }
+
+      const { hasPermission } = usePermission();
+      function isIfShow(action: ActionItem): boolean {
+        const ifShow = action.ifShow;
+
+        let isIfShow = true;
+
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(action);
+        }
+        return isIfShow;
+      }
+
+      const getActions = computed(() => {
+        return (toRaw(props.actions) || [])
+          .filter((action) => {
+            // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-528】列表配置了权限，在列表行上划过，都会执行hasPermission
+            const auth: any = action.auth;
+            let authResult;
+            if (action.auth && typeof tempActionsAuth[auth] === 'boolean') {
+              authResult = tempActionsAuth[auth];
+            } else {
+              authResult = hasPermission(action.auth);
+              action.auth && (tempActionsAuth[auth] = authResult);
+            }
+            return authResult && isIfShow(action);
+            // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-528】列表配置了权限，在列表行上划过，都会执行hasPermission
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            // 代码逻辑说明: 【issues/951】table删除记录时按钮显示错位
+            if (popConfirm) {
+              const overlayClassName = popConfirm.overlayClassName;
+              popConfirm.overlayClassName = `${overlayClassName ? overlayClassName : ''} ${prefixCls}-popconfirm`;
+            }
+            return {
+              getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+              type: 'link',
+              size: 'small',
+              ...action,
+              ...(popConfirm || {}),
+              // 代码逻辑说明: 【issues/936】表格操作栏删除当接口失败时，气泡确认框不会消失
+              onConfirm: handelConfirm(popConfirm?.confirm),
+              onCancel: popConfirm?.cancel,
+              enable: !!popConfirm,
+            };
+          });
+      });
+
+      const getDropdownList = computed((): any[] => {
+        //过滤掉隐藏的dropdown,避免出现多余的分割线
+        const list = (toRaw(props.dropDownActions) || []).filter((action) => {
+          // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-528】列表配置了权限，在列表行上划过，都会执行hasPermission
+          const auth: any = action.auth;
+          let authResult;
+          if (action.auth && typeof tempDropdownListAuth[auth] === 'boolean') {
+            authResult = tempDropdownListAuth[auth];
+          } else {
+            authResult = hasPermission(action.auth);
+            action.auth && (tempDropdownListAuth[auth] = authResult);
+          }
+          return authResult && isIfShow(action);
+          // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-528】列表配置了权限，在列表行上划过，都会执行hasPermission
+        });
+        return list.map((action, index) => {
+          const { label, popConfirm } = action;
+          // 代码逻辑说明: 【issues/951】table删除记录时按钮显示错位
+          if (popConfirm) {
+            const overlayClassName = popConfirm.overlayClassName;
+            popConfirm.overlayClassName = `${overlayClassName ? overlayClassName : ''} ${prefixCls}-popconfirm`;
+            // 代码逻辑说明: 【issues/7028】表格全屏后操作列中的下拉菜单和气泡确认框不显示
+            if (!popConfirm.getPopupContainer) {
+              popConfirm.getPopupContainer = () => {
+                return (table as any)?.wrapRef?.value ?? document.body;
+              };
+            }
+          }
+          // 代码逻辑说明: 【issues/936】表格操作栏删除当接口失败时，气泡确认框不会消失
+          if (popConfirm) {
+            popConfirm.confirm = handelConfirm(popConfirm?.confirm);
+          }
+          return {
+            ...action,
+            ...popConfirm,
+            onConfirm: handelConfirm(popConfirm?.confirm),
+            onCancel: popConfirm?.cancel,
+            text: label,
+            divider: index < list.length - 1 ? props.divider : false,
+          };
+        });
+      });
+      /*
+      2023-01-08
+      liaozhiyang
+      给传进来的函数包一层promise
+      */
+      const handelConfirm = (fn) => {
+        if (typeof fn !== 'function') return fn;
+        const anyc = () => {
+          return new Promise<void>((resolve) => {
+            const result = fn();
+            if (Object.prototype.toString.call(result) === '[object Promise]') {
+              result
+                .finally(() => {
+                  resolve();
+                })
+                .catch((err) => {
+                  console.log(err);
+                });
+            } else {
+              resolve();
+            }
+          });
+        };
+        return anyc;
+      };
+      const getDropdownSlotList = computed((): any[] => {
+        return unref(getDropdownList).filter((item) => item.slot);
+      });
+      const getAlign = computed(() => {
+        const columns = (table as TableActionType)?.getColumns?.() || [];
+        const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+        return actionColumn?.align ?? 'left';
+      });
+
+      function getTooltip(data: string | TooltipProps): TooltipProps {
+        return {
+          getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+          placement: 'bottom',
+          ...(isString(data) ? { title: data } : data),
+        };
+      }
+
+      function onCellClick(e: MouseEvent) {
+        if (!props.stopButtonPropagation) return;
+        const path = e.composedPath() as HTMLElement[];
+        const isInButton = path.find((ele) => {
+          return ele.tagName?.toUpperCase() === 'BUTTON';
+        });
+        isInButton && e.stopPropagation();
+      }
+      // 代码逻辑说明: 【issues/7028】表格全屏后操作列中的下拉菜单和气泡确认框不显示
+      const dropdownGetPopupContainer = () => {
+        return (table as any)?.wrapRef?.value ?? document.body;
+      };
+      return { prefixCls, getActions, getDropdownList, getDropdownSlotList, getAlign, onCellClick, getTooltip, dropdownCls, dropdownGetPopupContainer };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-action';
+
+  .@{prefix-cls} {
+    display: flex;
+    align-items: center;
+    /* update-begin-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
+    height: 22px;
+    /* update-end-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
+
+    .action-divider {
+      display: table;
+    }
+
+    &.left {
+      justify-content: flex-start;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+
+      span {
+        margin-left: 0 !important;
+      }
+    }
+
+    button.ant-btn-circle {
+      span {
+        margin: auto !important;
+      }
+    }
+
+    .ant-divider,
+    .ant-divider-vertical {
+      margin: 0 2px;
+    }
+
+    .icon-more {
+      transform: rotate(90deg);
+
+      svg {
+        font-size: 1.1em;
+        font-weight: 700;
+      }
+    }
+    &-popconfirm {
+      .ant-popconfirm-buttons {
+        min-width: 120px;
+        // 代码逻辑说明: 【issues/1019】popConfirm确认框待端后端返回过程中（处理中）样式错乱
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    // 代码逻辑说明: 【QQYUN-8762】调整table操作栏ant-dropdown样式
+    &-dropdown {
+      .ant-dropdown-menu .ant-dropdown-menu-item-divider {
+        margin: 2px 0;
+      }
+      .ant-dropdown-menu .ant-dropdown-menu-item {
+        padding: 3px 8px;
+        font-size: 13.6px;
+      }
+      .dropdown-event-area {
+        padding: 0 !important;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/TableFooter.vue b/src/components/Table/src/components/TableFooter.vue
new file mode 100644
index 0000000..7fb33cd
--- /dev/null
+++ b/src/components/Table/src/components/TableFooter.vue
@@ -0,0 +1,151 @@
+<template>
+  <div ref="tableFooter">
+    <Table
+      v-if="summaryFunc || summaryData"
+      :showHeader="false"
+      :bordered="bordered"
+      :pagination="false"
+      :dataSource="getDataSource"
+      :rowKey="(r) => r[rowKey]"
+      :columns="getColumns"
+      tableLayout="fixed"
+      :scroll="scroll"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, unref, computed, toRaw, onMounted, onUnmounted, ref } from 'vue';
+  import { Table } from 'ant-design-vue';
+  import { cloneDeep } from 'lodash-es';
+  import { isFunction } from '/@/utils/is';
+  import type { BasicColumn } from '../types/table';
+  import { INDEX_COLUMN_FLAG } from '../const';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useTableContext } from '../hooks/useTableContext';
+
+  const SUMMARY_ROW_KEY = '_row';
+  const SUMMARY_INDEX_KEY = '_index';
+  export default defineComponent({
+    name: 'BasicTableFooter',
+    components: { Table },
+    props: {
+      bordered: {
+        type: Boolean,
+        default: false,
+      },
+      summaryFunc: {
+        type: Function as PropType<Fn>,
+      },
+      summaryData: {
+        type: Array as PropType<Recordable[]>,
+      },
+      scroll: {
+        type: Object as PropType<Recordable>,
+      },
+      rowKey: propTypes.string.def('key'),
+      // 是否有展开列
+      hasExpandedRow: propTypes.bool,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const getColumnsRef = table.getColumnsRef();
+      const tableFooter = ref<any>(null);
+      const getDataSource = computed((): Recordable[] => {
+        const { summaryFunc, summaryData } = props;
+        if (summaryData?.length) {
+          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
+          return summaryData;
+        }
+        if (!isFunction(summaryFunc)) {
+          return [];
+        }
+        // 代码逻辑说明: 【QQYUN-8172】可编辑单元格编辑完以后不更新合计值
+        let dataSource = cloneDeep(unref(table.getDataSource()));
+        dataSource = summaryFunc(dataSource);
+        dataSource.forEach((item, i) => {
+          item[props.rowKey] = `${i}`;
+        });
+        return dataSource;
+      });
+
+      const getColumns = computed(() => {
+        const dataSource = unref(getDataSource);
+        // 代码逻辑说明: 【issues/8502】权限列不显示后，表尾行合计栏还显示导致对不齐
+        const allColumns = unref(getColumnsRef);
+        let columns: BasicColumn[] = cloneDeep(table.getColumns({ ignoreAuth: true, ignoreIfShow: true }));
+        // 代码逻辑说明: 【issues/638】表格合计，列自定义隐藏或展示时，合计栏会错位
+        columns = columns.filter((item) => !item.defaultHidden);
+        const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
+        const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
+        const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
+
+        // 是否有序号列
+        let hasIndexCol = false;
+        // 是否有选择列
+        let hasSelection = table.getRowSelection() && hasRowSummary
+
+        if (index !== -1) {
+          if (hasIndexSummary) {
+            hasIndexCol = true;
+            columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
+            columns[index].ellipsis = false;
+          } else {
+            Reflect.deleteProperty(columns[index], 'customRender');
+          }
+        }
+
+        if (hasSelection) {
+          // 代码逻辑说明: 【issues/776】显示100条/页，复选框只能显示3个的问题(fixed也有可能设置true)
+          const isFixed = columns.some((col) => col.fixed === 'left' || col.fixed === true);
+          columns.unshift({
+            width: 50,
+            title: 'selection',
+            key: 'selectionKey',
+            align: 'center',
+            ...(isFixed ? { fixed: 'left' } : {}),
+            customRender: ({ record }) => hasIndexCol ? '' : record[SUMMARY_ROW_KEY],
+          });
+        }
+
+        if (props.hasExpandedRow) {
+          const isFixed = columns.some((col) => col.fixed === 'left');
+          columns.unshift({
+            width: 50,
+            title: 'expandedRow',
+            key: 'expandedRowKey',
+            align: 'center',
+            ...(isFixed ? { fixed: 'left' } : {}),
+            customRender: () => '',
+          });
+        }
+        return columns;
+      });
+      // 代码逻辑说明: 【issues/7773】合计没有跟着左右滚动条滚动
+      let mainTableBody, footerTable;
+      const handleSroll = () => {
+        const scrollLeft = mainTableBody.scrollLeft;
+        footerTable.scrollLeft = scrollLeft;
+      };
+      onMounted(() => {
+        setTimeout(() => {
+          mainTableBody = tableFooter.value?.parentNode?.parentNode?.querySelector('.ant-table-body');
+          footerTable = tableFooter.value?.querySelector('.ant-table-body');
+          mainTableBody?.addEventListener('scroll', handleSroll, false);
+        }, 1e3);
+      });
+      onUnmounted(() => {
+        mainTableBody?.addEventListener('scroll', handleSroll);
+      });
+      return { getColumns, getDataSource, tableFooter };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【issues/776】显示100条/页，复选框只能显示3个的问题(隐藏合计的滚动条)
+  .ant-table-wrapper {
+    :deep(.ant-table-body) {
+      overflow-x: hidden !important;
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
new file mode 100644
index 0000000..f936b75
--- /dev/null
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -0,0 +1,165 @@
+<template>
+  <div style="width: 100%">
+    <div v-if="$slots.headerTop" style="margin: 5px">
+      <slot name="headerTop"></slot>
+    </div>
+    <div :class="`flex items-center ${prefixCls}__table-title-box`">
+      <div :class="`${prefixCls}__tableTitle`">
+        <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
+        <!--修改标题插槽位置-->
+        <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
+      </div>
+
+      <div :class="`${prefixCls}__toolbar`">
+        <slot name="toolbar"></slot>
+        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
+        <TableSetting :class="`${prefixCls}__toolbar-desktop`" style="white-space: nowrap;" :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange" />
+        <a-popover :overlayClassName="`${prefixCls}__toolbar-mobile`" trigger="click" placement="left" :getPopupContainer="(n) => n?.parentElement">
+          <template #content>
+            <TableSetting mode="mobile" :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange" />
+          </template>
+          <a-button :class="`${prefixCls}__toolbar-mobile`" v-if="showTableSetting" type="text" preIcon="ant-design:menu" shape="circle" />
+        </a-popover>
+      </div>
+    </div>
+    <!--添加tableTop插槽-->
+    <div style="margin: -4px 0 -2px; padding-top: 5px">
+      <slot name="tableTop">
+        <a-alert type="info" show-icon class="alert" v-if="openRowSelection != null">
+          <template #message>
+            <template v-if="selectRowKeys.length > 0">
+              <span>
+                <span>已选中 {{ selectRowKeys.length }} 条记录</span>
+                <span v-if="isAcrossPage">(可跨页)</span>
+              </span>
+              <a-divider type="vertical" />
+              <a @click="setSelectedRowKeys([])">清空</a>
+              <slot name="alertAfter" />
+            </template>
+            <template v-else>
+              <span>未选中任何数据</span>
+            </template>
+          </template>
+        </a-alert>
+      </slot>
+    </div>
+    <!--添加tableTop插槽-->
+  </div>
+</template>
+<script lang="ts">
+  import type { TableSetting, ColumnChangeParam } from '../types/table';
+  import type { PropType } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { Divider } from 'ant-design-vue';
+  import TableSettingComponent from './settings/index.vue';
+  import TableTitle from './TableTitle.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../hooks/useTableContext';
+
+  export default defineComponent({
+    name: 'BasicTableHeader',
+    components: {
+      Divider,
+      TableTitle,
+      TableSetting: TableSettingComponent,
+    },
+    props: {
+      title: {
+        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
+      },
+      tableSetting: {
+        type: Object as PropType<TableSetting>,
+      },
+      showTableSetting: {
+        type: Boolean,
+      },
+      titleHelpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+      },
+    },
+    emits: ['columns-change'],
+    setup(_, { emit }) {
+      const { prefixCls } = useDesign('basic-table-header');
+
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        emit('columns-change', data);
+      }
+
+      const { getSelectRowKeys, setSelectedRowKeys, getRowSelection } = useTableContext();
+      const selectRowKeys = computed(() => getSelectRowKeys());
+      const openRowSelection = computed(() => getRowSelection());
+      // 是否允许跨页选择
+      const isAcrossPage = computed(() => openRowSelection.value?.preserveSelectedRowKeys === true);
+
+      return { prefixCls, handleColumnChange, selectRowKeys, setSelectedRowKeys, openRowSelection, isAcrossPage };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-header';
+
+  .@{prefix-cls} {
+    &__toolbar {
+      //flex: 1;
+      width: 140px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      > * {
+        margin-right: 8px;
+      }
+
+      &-desktop {
+        display: block;
+      }
+
+      &-mobile {
+        display: none;
+      }
+    }
+    &__tableTitle {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+
+      > * {
+        margin-right: 4px;
+        margin-bottom: 4px;
+      }
+    }
+
+    @media (max-width: @screen-lg) {
+      &__table-title-box {
+        align-items: flex-end;
+      }
+
+      &__toolbar {
+        width: 30px;
+        text-align: center;
+
+        > * {
+          margin-right: 0;
+        }
+
+        .table-settings > * {
+          margin-right: 0;
+          margin-bottom: 6px;
+        }
+        &-desktop {
+          display: none;
+        }
+
+        &-mobile {
+          display: block;
+          .table-settings > * {
+            margin-right: 6px;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/TableImg.vue b/src/components/Table/src/components/TableImg.vue
new file mode 100644
index 0000000..29a0907
--- /dev/null
+++ b/src/components/Table/src/components/TableImg.vue
@@ -0,0 +1,76 @@
+<template>
+  <div :class="prefixCls" class="flex items-center mx-auto" v-if="imgList && imgList.length" :style="getWrapStyle">
+    <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
+      <div class="img-div">
+        <PreviewGroup>
+          <template v-for="(img, index) in imgList" :key="img">
+            <Image
+              :width="size"
+              :style="{
+                display: index === 0 ? '' : 'none !important',
+              }"
+              :src="srcPrefix + img"
+            />
+          </template>
+        </PreviewGroup>
+      </div>
+    </Badge>
+    <PreviewGroup v-else>
+      <template v-for="(img, index) in imgList" :key="img">
+        <Image :width="size" :style="{ marginLeft: index === 0 ? 0 : margin }" :src="srcPrefix + img" />
+      </template>
+    </PreviewGroup>
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { Image, Badge } from 'ant-design-vue';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'TableImage',
+    components: { Image, PreviewGroup: Image.PreviewGroup, Badge },
+    props: {
+      imgList: propTypes.arrayOf(propTypes.string),
+      size: propTypes.number.def(40),
+      // 是否简单显示（只显示第一张图片）
+      simpleShow: propTypes.bool,
+      // 简单模式下是否显示图片数量的badge
+      showBadge: propTypes.bool.def(true),
+      // 图片间距
+      margin: propTypes.number.def(4),
+      // src前缀，将会附加在imgList中每一项之前
+      srcPrefix: propTypes.string.def(''),
+    },
+    setup(props) {
+      const getWrapStyle = computed((): CSSProperties => {
+        const { size } = props;
+        const s = `${size}px`;
+        return { height: s, width: s };
+      });
+
+      const { prefixCls } = useDesign('basic-table-img');
+      return { prefixCls, getWrapStyle };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-img';
+
+  .@{prefix-cls} {
+    .ant-image {
+      margin-right: 4px;
+      cursor: zoom-in;
+
+      img {
+        border-radius: 2px;
+      }
+    }
+
+    .img-div {
+      display: inline-grid;
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/TableSummary.tsx b/src/components/Table/src/components/TableSummary.tsx
new file mode 100644
index 0000000..63709b4
--- /dev/null
+++ b/src/components/Table/src/components/TableSummary.tsx
@@ -0,0 +1,163 @@
+import type { PropType, VNode } from 'vue';
+import { defineComponent, unref, computed, isVNode } from 'vue';
+import { cloneDeep, pick } from 'lodash-es';
+import { isFunction } from '/@/utils/is';
+import type { BasicColumn } from '../types/table';
+import { INDEX_COLUMN_FLAG } from '../const';
+import { propTypes } from '/@/utils/propTypes';
+import { useTableContext } from '../hooks/useTableContext';
+import { TableSummary, TableSummaryRow, TableSummaryCell } from 'ant-design-vue';
+
+const SUMMARY_ROW_KEY = '_row';
+const SUMMARY_INDEX_KEY = '_index';
+export default defineComponent({
+  name: 'BasicTableSummary',
+  components: { TableSummary, TableSummaryRow, TableSummaryCell },
+  props: {
+    summaryFunc: {
+      type: Function as PropType<Fn>,
+    },
+    summaryData: {
+      type: Array as PropType<Recordable[]>,
+    },
+    rowKey: propTypes.string.def('key'),
+    // 是否有展开列
+    hasExpandedRow: propTypes.bool,
+    data: {
+      type: Object as PropType<Recordable>,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const table = useTableContext();
+
+    const getDataSource = computed((): Recordable[] => {
+      const {
+        summaryFunc,
+        summaryData,
+        data: { pageData },
+      } = props;
+      if (summaryData?.length) {
+        summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
+        return summaryData;
+      }
+      if (!isFunction(summaryFunc)) {
+        return [];
+      }
+      let dataSource = cloneDeep(unref(pageData));
+      dataSource = summaryFunc(dataSource);
+      dataSource.forEach((item, i) => {
+        item[props.rowKey] = `${i}`;
+      });
+      return dataSource;
+    });
+
+    const getColumns = computed(() => {
+      const dataSource = unref(getDataSource);
+      let columns: BasicColumn[] = cloneDeep(table.getColumns({ sort: true }));
+      columns = columns.filter((item) => !item.defaultHidden);
+      const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
+      const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
+      const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
+
+      // 是否有序号列
+      let hasIndexCol = false;
+      // 是否有选择列
+      const hasSelection = table.getRowSelection() && hasRowSummary;
+
+      if (index !== -1) {
+        if (hasIndexSummary) {
+          hasIndexCol = true;
+          columns[index].customSummaryRender = ({ record }) => record[SUMMARY_INDEX_KEY];
+          columns[index].ellipsis = false;
+        } else {
+          Reflect.deleteProperty(columns[index], 'customSummaryRender');
+        }
+      }
+
+      if (hasSelection) {
+        const isFixed = columns.some((col) => col.fixed === 'left' || col.fixed === true);
+        columns.unshift({
+          width: 60,
+          title: 'selection',
+          key: 'selectionKey',
+          align: 'center',
+          ...(isFixed ? { fixed: 'left' } : {}),
+          customSummaryRender: ({ record }) => (hasIndexCol ? '' : record[SUMMARY_ROW_KEY]),
+        });
+      }
+
+      if (props.hasExpandedRow) {
+        const isFixed = columns.some((col) => col.fixed === 'left');
+        columns.unshift({
+          width: 50,
+          title: 'expandedRow',
+          key: 'expandedRowKey',
+          align: 'center',
+          ...(isFixed ? { fixed: 'left' } : {}),
+          customSummaryRender: () => '',
+        });
+      }
+      return columns;
+    });
+
+    function isRenderCell(data: any) {
+      return data && typeof data === 'object' && !Array.isArray(data) && !isVNode(data);
+    }
+
+    const getValues = (row: Recordable, col: BasicColumn, index: number) => {
+      const value = row[col.dataIndex as string];
+      let childNode: VNode | JSX.Element | string | number | undefined | null;
+      childNode = value;
+      if (col.customSummaryRender) {
+        const renderData = col.customSummaryRender({
+          text: value,
+          value,
+          record: row,
+          index,
+          column: cloneDeep(col),
+        });
+        if (isRenderCell(renderData)) {
+          childNode = renderData.children;
+        } else {
+          childNode = renderData;
+        }
+        if (typeof childNode === 'object' && !Array.isArray(childNode) && !isVNode(childNode)) {
+          childNode = null;
+        }
+        if (Array.isArray(childNode) && childNode.length === 1) {
+          childNode = childNode[0];
+        }
+        return childNode;
+      }
+      return childNode;
+    };
+
+    const getCellProps = (col: BasicColumn) => {
+      const cellProps = pick(col, ['colSpan', 'rowSpan', 'align']);
+      return {
+        ...cellProps,
+      };
+    };
+
+    return () => {
+      return (
+        <TableSummary fixed>
+          {(unref(getDataSource) || []).map((row) => {
+            return (
+              <TableSummaryRow key={row[props.rowKey]}>
+                {unref(getColumns).map((col, index) => {
+                  return (
+                    <TableSummaryCell {...getCellProps(col)} index={index} key={`${row[props.rowKey]}_${col.dataIndex}_${index}`}>
+                      {getValues(row, col, index)}
+                    </TableSummaryCell>
+                  );
+                })}
+              </TableSummaryRow>
+            );
+          })}
+        </TableSummary>
+      );
+    };
+  },
+});
diff --git a/src/components/Table/src/components/TableTitle.vue b/src/components/Table/src/components/TableTitle.vue
new file mode 100644
index 0000000..0b797e1
--- /dev/null
+++ b/src/components/Table/src/components/TableTitle.vue
@@ -0,0 +1,53 @@
+<template>
+  <BasicTitle :class="prefixCls" v-if="getTitle" :helpMessage="helpMessage">
+    {{ getTitle }}
+  </BasicTitle>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, PropType } from 'vue';
+  import { BasicTitle } from '/@/components/Basic/index';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isFunction } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'BasicTableTitle',
+    components: { BasicTitle },
+    props: {
+      title: {
+        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
+      },
+      getSelectRows: {
+        type: Function as PropType<() => Recordable[]>,
+      },
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('basic-table-title');
+
+      const getTitle = computed(() => {
+        const { title, getSelectRows = () => {} } = props;
+        let tit = title;
+
+        if (isFunction(title)) {
+          tit = title({
+            selectRows: getSelectRows(),
+          });
+        }
+        return tit;
+      });
+
+      return { getTitle, prefixCls };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-title';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
diff --git a/src/components/Table/src/components/editable/CellComponent.ts b/src/components/Table/src/components/editable/CellComponent.ts
new file mode 100644
index 0000000..e07898d
--- /dev/null
+++ b/src/components/Table/src/components/editable/CellComponent.ts
@@ -0,0 +1,38 @@
+import type { FunctionalComponent, defineComponent } from 'vue';
+import type { ComponentType } from '../../types/componentType';
+import { componentMap } from '/@/components/Table/src/componentMap';
+
+import { Popover } from 'ant-design-vue';
+import { h } from 'vue';
+
+export interface ComponentProps {
+  component: ComponentType;
+  rule: boolean;
+  popoverVisible: boolean;
+  ruleMessage: string;
+  getPopupContainer?: Fn;
+}
+
+export const CellComponent: FunctionalComponent = (
+  { component = 'Input', rule = true, ruleMessage, popoverVisible, getPopupContainer }: ComponentProps,
+  { attrs }
+) => {
+  const Comp = componentMap.get(component) as typeof defineComponent;
+
+  const DefaultComp = h(Comp, attrs);
+  if (!rule) {
+    return DefaultComp;
+  }
+  return h(
+    Popover,
+    {
+      overlayClassName: 'edit-cell-rule-popover',
+      open: !!popoverVisible,
+      ...(getPopupContainer ? { getPopupContainer } : {}),
+    },
+    {
+      default: () => DefaultComp,
+      content: () => ruleMessage,
+    }
+  );
+};
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
new file mode 100644
index 0000000..4df75ec
--- /dev/null
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -0,0 +1,544 @@
+<template>
+  <div :class="prefixCls">
+    <div v-show="!isEdit" :class="{ [`${prefixCls}__normal`]: true, 'ellipsis-cell': column.ellipsis }" @click="handleEdit">
+      <div class="cell-content" :title="column.ellipsis ? getValues ?? '' : ''">
+        {{ typeof getValues === 'string' && getValues.length === 0 ? '&nbsp;' : getValues ?? '&nbsp;' }}
+      </div>
+      <FormOutlined :class="`${prefixCls}__normal-icon`" v-if="!column.editRow" />
+    </div>
+
+    <a-spin v-if="isEdit" :spinning="spinning">
+      <div :class="`${prefixCls}__wrapper`" v-click-outside="onClickOutside">
+        <CellComponent
+          v-bind="getComponentProps"
+          :component="getComponent"
+          :style="getWrapperStyle"
+          :popoverVisible="getRuleVisible"
+          :rule="getRule"
+          :ruleMessage="ruleMessage"
+          :class="getWrapperClass"
+          ref="elRef"
+          @change="handleChange"
+          @options-change="handleOptionsChange"
+          @pressEnter="handleEnter"
+        />
+        <div :class="`${prefixCls}__action`" v-if="!getRowEditable">
+          <CheckOutlined :class="[`${prefixCls}__icon`, 'mx-2']" @click="handleSubmitClick" />
+          <CloseOutlined :class="`${prefixCls}__icon `" @click="handleCancel" />
+        </div>
+      </div>
+    </a-spin>
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties, PropType } from 'vue';
+  import { computed, defineComponent, nextTick, ref, toRaw, unref, watchEffect } from 'vue';
+  import type { BasicColumn } from '../../types/table';
+  import type { EditRecordRow } from './index';
+  import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons-vue';
+  import { CellComponent } from './CellComponent';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  import clickOutside from '/@/directives/clickOutside';
+
+  import { propTypes } from '/@/utils/propTypes';
+  import { isArray, isBoolean, isFunction, isNumber, isString } from '/@/utils/is';
+  import { createPlaceholderMessage } from './helper';
+  import { omit, set } from 'lodash-es';
+  import { treeToList } from '/@/utils/helper/treeHelper';
+  import { Spin } from 'ant-design-vue';
+
+  // 这些字段是表格内部使用的，不应该传递给 beforeEditSubmit
+  const INTERNAL_RECORD_FIELDS = [
+    'editable',
+    'submitCbs',
+    'validCbs',
+    'cancelCbs',
+    'onEdit',
+    'onValid',
+    'onCancelEdit',
+    'onSubmitEdit',
+    'editValueRefs',
+  ];
+
+  export default defineComponent({
+    name: 'EditableCell',
+    components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent, ASpin: Spin },
+    directives: {
+      clickOutside,
+    },
+    props: {
+      value: {
+        type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
+        default: '',
+      },
+      record: {
+        type: Object as PropType<EditRecordRow>,
+      },
+      column: {
+        type: Object as PropType<BasicColumn>,
+        default: () => ({}),
+      },
+      index: propTypes.number,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const isEdit = ref(false);
+      const elRef = ref();
+      const ruleVisible = ref(false);
+      const ruleMessage = ref('');
+      const optionsRef = ref<LabelValueOptions>([]);
+      const currentValueRef = ref<any>(props.value);
+      const defaultValueRef = ref<any>(props.value);
+      const spinning = ref<boolean>(false);
+
+      const { prefixCls } = useDesign('editable-cell');
+
+      const getComponent = computed(() => props.column?.editComponent || 'Input');
+      const getRule = computed(() => props.column?.editRule);
+
+      const getRuleVisible = computed(() => {
+        return unref(ruleMessage) && unref(ruleVisible);
+      });
+
+      const getIsCheckComp = computed(() => {
+        const component = unref(getComponent);
+        return ['Checkbox', 'Switch'].includes(component);
+      });
+
+      const getComponentProps = computed(() => {
+        let compProps;
+        // 代码逻辑说明: 【issues/8680】editComponentProps可接受一个函数传入record
+        if (isFunction(props.column?.editComponentProps)) {
+          compProps = props.column?.editComponentProps(props.record);
+        } else {
+          compProps = props.column?.editComponentProps ?? {};
+        }
+        const component = unref(getComponent);
+        const apiSelectProps: Recordable = {};
+        if (component === 'ApiSelect') {
+          apiSelectProps.cache = true;
+        }
+
+        const isCheckValue = unref(getIsCheckComp);
+
+        const valueField = isCheckValue ? 'checked' : 'value';
+        const val = unref(currentValueRef);
+
+        const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
+        // 代码逻辑说明: 【issues/7136】单元格上的tooltip提示，如果表格有滚动条，会不跟着单元格滚动---
+        let tooltipPosition:any = unref(table?.wrapRef.value)?.parentElement?.querySelector('.ant-table-body');
+        if(tooltipPosition){
+          tooltipPosition.style.position = 'relative';
+        }
+        return {
+          size: 'small',
+          getPopupContainer: () => tooltipPosition ?? document.body,
+          getCalendarContainer: () => unref(table?.wrapRef.value) ?? document.body,
+          placeholder: createPlaceholderMessage(unref(getComponent)),
+          ...apiSelectProps,
+          ...omit(compProps, 'onChange'),
+          [valueField]: value,
+        };
+      });
+
+      const getValues = computed(() => {
+        const { editComponentProps, editValueMap } = props.column;
+
+        const value = unref(currentValueRef);
+
+        if (editValueMap && isFunction(editValueMap)) {
+          return editValueMap(value);
+        }
+
+        const component = unref(getComponent);
+        if (!component.includes('Select')) {
+          return value;
+        }
+
+        const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || []);
+        const option = options.find((item) => `${item.value}` === `${value}`);
+        // 代码逻辑说明: 【QQYUN-13251】表格可编辑单元格apiSelect多选不翻译 ---
+        if (['tags', 'multiple'].includes(editComponentProps?.mode)) {
+          const result = options
+            .filter((item) => {
+              let v = value;
+              if (isString(value)) {
+                v = value.split(',');
+              } else if (isNumber(value)) {
+                v = [value];
+              }
+              if (v.includes(item.value)) {
+                return true;
+              }
+            })
+            .map((item) => item.label);
+          if (result.length) {
+            return result.join(',');
+          }
+          return value;
+        }
+        return option?.label ?? value;
+      });
+
+      const getWrapperStyle = computed((): CSSProperties => {
+        if (unref(getIsCheckComp) || unref(getRowEditable)) {
+          return {};
+        }
+        return {
+          width: 'calc(100% - 48px)',
+        };
+      });
+
+      const getWrapperClass = computed(() => {
+        const { align = 'center' } = props.column;
+        return `edit-cell-align-${align}`;
+      });
+
+      const getRowEditable = computed(() => {
+        const { editable } = props.record || {};
+        return !!editable;
+      });
+
+      watchEffect(() => {
+        defaultValueRef.value = props.value;
+        currentValueRef.value = props.value;
+      });
+
+      watchEffect(() => {
+        const { editable } = props.column;
+        if (isBoolean(editable) || isBoolean(unref(getRowEditable))) {
+          isEdit.value = !!editable || unref(getRowEditable);
+        }
+      });
+
+      function handleEdit() {
+        if (unref(getRowEditable) || unref(props.column?.editRow)) return;
+        ruleMessage.value = '';
+        isEdit.value = true;
+        nextTick(() => {
+          const el = unref(elRef);
+          el?.focus?.();
+        });
+      }
+
+      async function handleChange(e: any) {
+        const component = unref(getComponent);
+        if (!e) {
+          currentValueRef.value = e;
+        } else if (e?.target && Reflect.has(e.target, 'value')) {
+          currentValueRef.value = (e as ChangeEvent).target.value;
+        } else if (component === 'Checkbox') {
+          currentValueRef.value = (e as ChangeEvent).target.checked;
+        } else if (isString(e) || isBoolean(e) || isNumber(e) || isArray(e)) {
+          currentValueRef.value = e;
+        }
+        const onChange = props.column?.editComponentProps?.onChange;
+        if (onChange && isFunction(onChange)) onChange(...arguments);
+
+        table.emit?.('edit-change', {
+          column: props.column,
+          value: unref(currentValueRef),
+          record: toRaw(props.record),
+        });
+        handleSubmiRule();
+      }
+
+      async function handleSubmiRule() {
+        const { column, record } = props;
+        const { editRule } = column;
+        const currentValue = unref(currentValueRef);
+
+        if (editRule) {
+          if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) {
+            ruleVisible.value = true;
+            const component = unref(getComponent);
+            ruleMessage.value = createPlaceholderMessage(component);
+            return false;
+          }
+          if (isFunction(editRule)) {
+            const res = await editRule(currentValue, record as Recordable);
+            if (!!res) {
+              ruleMessage.value = res;
+              ruleVisible.value = true;
+              return false;
+            } else {
+              ruleMessage.value = '';
+              return true;
+            }
+          }
+        }
+        ruleMessage.value = '';
+        return true;
+      }
+
+      async function handleSubmit(needEmit = true, valid = true) {
+        if (valid) {
+          const isPass = await handleSubmiRule();
+          if (!isPass) return false;
+        }
+
+        const { column, index, record } = props;
+        if (!record) return false;
+        const { key, dataIndex } = column;
+        const value = unref(currentValueRef);
+        if (!key || !dataIndex) return;
+
+        const dataKey = (dataIndex || key) as string;
+
+        if (!record.editable) {
+          const { getBindValues } = table;
+
+          const { beforeEditSubmit } = unref(getBindValues);
+
+          if (beforeEditSubmit && isFunction(beforeEditSubmit)) {
+            spinning.value = true;
+            let result: any = true;
+            try {
+              // 过滤掉内部字段，只保留业务数据字段，确保 id 等关键字段不丢失
+              const cleanRecord = omit(record, INTERNAL_RECORD_FIELDS);
+              result = await beforeEditSubmit({
+                record: cleanRecord,
+                index,
+                key,
+                value,
+              });
+            } catch (e) {
+              result = false;
+            } finally {
+              spinning.value = false;
+            }
+            if (result === false) {
+              return;
+            }
+          }
+        }
+
+        set(record, dataKey, value);
+        //const record = await table.updateTableData(index, dataKey, value);
+        needEmit && table.emit?.('edit-end', { record, index, key, value });
+        isEdit.value = false;
+      }
+
+      async function handleEnter() {
+        if (props.column?.editRow) {
+          return;
+        }
+        handleSubmit();
+      }
+
+      function handleSubmitClick() {
+        handleSubmit();
+      }
+
+      function handleCancel() {
+        isEdit.value = false;
+        currentValueRef.value = defaultValueRef.value;
+        const { column, index, record } = props;
+        const { key, dataIndex } = column;
+        table.emit?.('edit-cancel', {
+          record,
+          index,
+          key: dataIndex || key,
+          value: unref(currentValueRef),
+        });
+      }
+
+      function onClickOutside() {
+        if (props.column?.editable || unref(getRowEditable)) {
+          return;
+        }
+        const component = unref(getComponent);
+
+        if (component.includes('Input')) {
+          handleCancel();
+        }
+      }
+
+      // only ApiSelect or TreeSelect
+      function handleOptionsChange(options: LabelValueOptions) {
+        const { replaceFields } = props.column?.editComponentProps ?? {};
+        const component = unref(getComponent);
+        if (component === 'ApiTreeSelect') {
+          const { title = 'title', value = 'value', children = 'children' } = replaceFields || {};
+          let listOptions: Recordable[] = treeToList(options, { children });
+          listOptions = listOptions.map((item) => {
+            return {
+              label: item[title],
+              value: item[value],
+            };
+          });
+          optionsRef.value = listOptions as LabelValueOptions;
+        } else {
+          optionsRef.value = options;
+        }
+      }
+
+      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
+        if (props.record) {
+          /* eslint-disable  */
+          // 代码逻辑说明: 【issues/1165】解决canResize为true时第一行校验不过
+          const { dataIndex, key } = props.column;
+          const field: any = dataIndex || key;
+          if (isArray(props.record[cbs])) {
+            const findItem = props.record[cbs]?.find((item) => item[field]);
+            if (findItem) {
+              findItem[field] = handle;
+            } else {
+              props.record[cbs]?.push({ [field]: handle });
+            }
+          } else {
+            props.record[cbs] = [{ [field]: handle }];
+          }
+        }
+      }
+
+      if (props.record) {
+        initCbs('submitCbs', handleSubmit);
+        initCbs('validCbs', handleSubmiRule);
+        initCbs('cancelCbs', handleCancel);
+
+        if (props.column.dataIndex) {
+          if (!props.record.editValueRefs) props.record.editValueRefs = {};
+          props.record.editValueRefs[props.column.dataIndex] = currentValueRef;
+        }
+        /* eslint-disable  */
+        props.record.onCancelEdit = () => {
+          // 代码逻辑说明: 【issues/1165】解决canResize为true时第一行校验不过
+          isArray(props.record?.cancelCbs) &&
+            props.record?.cancelCbs.forEach((item) => {
+              const [fn] = Object.values(item);
+              fn();
+            });
+        };
+        /* eslint-disable */
+        props.record.onSubmitEdit = async () => {
+          if (isArray(props.record?.submitCbs)) {
+            if (!props.record?.onValid?.()) return;
+            const submitFns = props.record?.submitCbs || [];
+            // 代码逻辑说明: 【issues/1165】解决canResize为true时第一行校验不过
+            submitFns.forEach((item) => {
+              const [fn] = Object.values(item);
+              fn(false, false);
+            });
+            table.emit?.('edit-row-end');
+            return true;
+          }
+        };
+      }
+
+      return {
+        isEdit,
+        prefixCls,
+        handleEdit,
+        currentValueRef,
+        handleSubmit,
+        handleChange,
+        handleCancel,
+        elRef,
+        getComponent,
+        getRule,
+        onClickOutside,
+        ruleMessage,
+        getRuleVisible,
+        getComponentProps,
+        handleOptionsChange,
+        getWrapperStyle,
+        getWrapperClass,
+        getRowEditable,
+        getValues,
+        handleEnter,
+        handleSubmitClick,
+        spinning,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-editable-cell';
+
+  .edit-cell-align-left {
+    text-align: left;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: left;
+    }
+  }
+
+  .edit-cell-align-center {
+    text-align: center;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: center;
+    }
+  }
+
+  .edit-cell-align-right {
+    text-align: right;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: right;
+    }
+  }
+
+  .edit-cell-rule-popover {
+    .ant-popover-inner-content {
+      padding: 4px 8px;
+      color: @error-color;
+      // border: 1px solid @error-color;
+      border-radius: 2px;
+    }
+  }
+  .@{prefix-cls} {
+    position: relative;
+
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > .ant-select {
+        min-width: calc(100% - 50px);
+      }
+    }
+
+    &__icon {
+      &:hover {
+        transform: scale(1.2);
+
+        svg {
+          color: @primary-color;
+        }
+      }
+    }
+
+    .ellipsis-cell {
+      .cell-content {
+        overflow-wrap: break-word;
+        word-break: break-word;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    &__normal {
+      &-icon {
+        position: absolute;
+        top: 4px;
+        right: 0;
+        display: none;
+        width: 20px;
+        cursor: pointer;
+      }
+    }
+
+    &:hover {
+      .@{prefix-cls}__normal-icon {
+        display: inline-block;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/editable/helper.ts b/src/components/Table/src/components/editable/helper.ts
new file mode 100644
index 0000000..d901729
--- /dev/null
+++ b/src/components/Table/src/components/editable/helper.ts
@@ -0,0 +1,28 @@
+import { ComponentType } from '../../types/componentType';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(component: ComponentType) {
+  if (component.includes('Input')) {
+    return t('common.inputText');
+  }
+  if (component.includes('Picker')) {
+    return t('common.chooseText');
+  }
+
+  if (
+    component.includes('Select') ||
+    component.includes('Checkbox') ||
+    component.includes('Radio') ||
+    component.includes('Switch') ||
+    component.includes('DatePicker') ||
+    component.includes('TimePicker')
+  ) {
+    return t('common.chooseText');
+  }
+  return '';
+}
diff --git a/src/components/Table/src/components/editable/index.ts b/src/components/Table/src/components/editable/index.ts
new file mode 100644
index 0000000..de9220d
--- /dev/null
+++ b/src/components/Table/src/components/editable/index.ts
@@ -0,0 +1,77 @@
+import type { BasicColumn } from '/@/components/Table/src/types/table';
+
+import { h, Ref, toRaw } from 'vue';
+
+import EditableCell from './EditableCell.vue';
+import { isArray } from '/@/utils/is';
+
+interface Params {
+  text: string;
+  record: Recordable;
+  index: number;
+}
+
+export function renderEditCell(column: BasicColumn) {
+  return ({ text: value, record, index }: Params) => {
+    toRaw(record).onValid = async () => {
+      if (isArray(record?.validCbs)) {
+        // 代码逻辑说明: 【issues/1165】解决canResize为true时第一行校验不过
+        const validFns = (record?.validCbs || []).map((item) => {
+          const [fn] = Object.values(item);
+          // @ts-ignore
+          return fn();
+        });
+        const res = await Promise.all(validFns);
+        return res.every((item) => !!item);
+      } else {
+        return false;
+      }
+    };
+
+    toRaw(record).onEdit = async (edit: boolean, submit = false) => {
+      if (!submit) {
+        record.editable = edit;
+      }
+
+      if (!edit && submit) {
+        if (!(await record.onValid())) return false;
+        const res = await record.onSubmitEdit?.();
+        if (res) {
+          record.editable = false;
+          return true;
+        }
+        return false;
+      }
+      // cancel
+      if (!edit && !submit) {
+        record.onCancelEdit?.();
+      }
+      return true;
+    };
+
+    return h(EditableCell, {
+      value,
+      record,
+      column,
+      index,
+    });
+  };
+}
+
+interface Cbs {
+  [key: string]: Fn;
+}
+
+export type EditRecordRow<T = Recordable> = Partial<
+  {
+    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    onValid: () => Promise<boolean>;
+    editable: boolean;
+    onCancel: Fn;
+    onSubmit: Fn;
+    submitCbs: Cbs[];
+    cancelCbs: Cbs[];
+    validCbs: Cbs[];
+    editValueRefs: Recordable<Ref>;
+  } & T
+>;
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
new file mode 100644
index 0000000..555d4dc
--- /dev/null
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -0,0 +1,574 @@
+<template>
+  <Tooltip placement="top" v-bind="getBindProps" >
+    <template #title>
+      <span>{{ t('component.table.settingColumn') }}</span>
+    </template>
+    <Popover
+      v-model:open="popoverVisible"
+      placement="bottomLeft"
+      trigger="click"
+      @open-change="handleVisibleChange"
+      :overlayClassName="`${prefixCls}__cloumn-list`"
+      :getPopupContainer="getPopupContainer"
+    >
+      <template #title>
+        <div :class="`${prefixCls}__popover-title`">
+          <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll" @change="onCheckAllChange">
+            {{ t('component.table.settingColumnShow') }}
+          </Checkbox>
+
+          <Checkbox :disabled="isTreeTable" v-model:checked="checkIndex" @change="handleIndexCheckChange">
+            {{ t('component.table.settingIndexColumnShow') }}
+          </Checkbox>
+
+          <!--                    <Checkbox-->
+          <!--                            v-model:checked="checkSelect"-->
+          <!--                            @change="handleSelectCheckChange"-->
+          <!--                            :disabled="!defaultRowSelection"-->
+          <!--                    >-->
+          <!--                        {{ t('component.table.settingSelectColumnShow') }}-->
+          <!--                    </Checkbox>-->
+        </div>
+      </template>
+
+      <template #content>
+        <ScrollContainer>
+          <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
+            <template v-for="item in plainOptions" :key="item.value">
+              <div :class="`${prefixCls}__check-item`" v-if="!('ifShow' in item && !item.ifShow)">
+                <DragOutlined class="table-column-drag-icon" />
+                <Checkbox :value="item.value">
+                  {{ item.label }}
+                </Checkbox>
+
+                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4" :getPopupContainer="getPopupContainer">
+                  <template #title>
+                    {{ t('component.table.settingFixedLeft') }}
+                  </template>
+                  <Icon
+                    icon="line-md:arrow-align-left"
+                    :class="[
+                      `${prefixCls}__fixed-left`,
+                      {
+                        active: item.fixed === 'left',
+                        disabled: !checkedList.includes(item.value),
+                      },
+                    ]"
+                    @click="handleColumnFixed(item, 'left')"
+                  />
+                </Tooltip>
+                <Divider type="vertical" />
+                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4" :getPopupContainer="getPopupContainer">
+                  <template #title>
+                    {{ t('component.table.settingFixedRight') }}
+                  </template>
+                  <Icon
+                    icon="line-md:arrow-align-left"
+                    :class="[
+                      `${prefixCls}__fixed-right`,
+                      {
+                        active: item.fixed === 'right',
+                        disabled: !checkedList.includes(item.value),
+                      },
+                    ]"
+                    @click="handleColumnFixed(item, 'right')"
+                  />
+                </Tooltip>
+              </div>
+            </template>
+          </CheckboxGroup>
+        </ScrollContainer>
+        <div :class="`${prefixCls}__popover-footer`">
+          <a-button size="small" @click="reset">
+            {{ t('common.resetText') }}
+          </a-button>
+          <a-button size="small" type="primary" @click="saveSetting"> 保存 </a-button>
+        </div>
+      </template>
+      <SettingOutlined />
+    </Popover>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import type { BasicColumn, ColumnChangeParam } from '../../types/table';
+  import { defineComponent, ref, reactive, toRefs, watchEffect, nextTick, unref, computed, watch } from 'vue';
+  import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue';
+  import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface';
+  import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue';
+  import { Icon } from '/@/components/Icon';
+  import { ScrollContainer } from '/@/components/Container';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import { useColumnsCache } from '../../hooks/useColumnsCache';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  // import { useSortable } from '/@/hooks/web/useSortable';
+  import { isFunction, isNullAndUnDef } from '/@/utils/is';
+  import { getPopupContainer as getParentContainer } from '/@/utils';
+  import { cloneDeep, omit } from 'lodash-es';
+  import Sortablejs from 'sortablejs';
+  import type Sortable from 'sortablejs';
+  import { useLocaleStoreWithOut } from '/@/store/modules/locale';
+
+  interface State {
+    checkAll: boolean;
+    isInit?: boolean;
+    checkedList: string[];
+    defaultCheckList: string[];
+  }
+
+  interface Options {
+    label: string;
+    value: string;
+    fixed?: boolean | 'left' | 'right';
+  }
+
+  export default defineComponent({
+    name: 'ColumnSetting',
+    props: {
+      isMobile: Boolean,
+    },
+    components: {
+      SettingOutlined,
+      Popover,
+      Tooltip,
+      Checkbox,
+      CheckboxGroup: Checkbox.Group,
+      DragOutlined,
+      ScrollContainer,
+      Divider,
+      Icon,
+    },
+    emits: ['columns-change'],
+
+    setup(props, { emit, attrs }) {
+      const { t } = useI18n();
+      const table = useTableContext();
+      // 代码逻辑说明: 【issues/8301】树形表格序号列禁用
+      const isTreeTable = computed(() => table.getBindValues.value.isTreeTable);
+      const popoverVisible = ref(false);
+      // nextTick(() => popoverVisible.value = false);
+      const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys');
+      // 代码逻辑说明: 【issues/8529】setColumns后列配置没联动更新
+      const getColumnsRef = table.getColumnsRef();
+      let inited = false;
+
+      const cachePlainOptions = ref<Options[]>([]);
+      const plainOptions = ref<Options[] | any>([]);
+
+      const plainSortOptions = ref<Options[]>([]);
+
+      const columnListRef = ref<ComponentRef>(null);
+
+      const restAfterOptions = {
+        value: null,
+      };
+
+      const state = reactive<State>({
+        checkAll: true,
+        checkedList: [],
+        defaultCheckList: [],
+      });
+
+      const checkIndex = ref(false);
+      const checkSelect = ref(false);
+
+      const { prefixCls } = useDesign('basic-column-setting');
+
+      const getValues = computed(() => {
+        return unref(table?.getBindValues) || {};
+      });
+
+      const getBindProps = computed(() => {
+        let obj = {};
+        if (props.isMobile) {
+          obj['open'] = false;
+        }
+        return obj;
+      });
+
+      let sortable: Sortable;
+      const sortableOrder = ref<string[]>();
+      const localeStore = useLocaleStoreWithOut();
+      // 列表字段配置缓存
+      const { saveSetting, resetSetting, getCache } = useColumnsCache(
+        {
+          state,
+          popoverVisible,
+          plainOptions,
+          plainSortOptions,
+          sortableOrder,
+          checkIndex,
+          restAfterOptions,
+        },
+        setColumns,
+        handleColumnFixed
+      );
+
+      watchEffect(() => {
+        setTimeout(() => {
+          if (!state.isInit) {
+            init();
+          }
+        }, 0);
+      });
+
+      watchEffect(() => {
+        const values = unref(getValues);
+        checkIndex.value = !!values.showIndexColumn;
+        checkSelect.value = !!values.rowSelection;
+      });
+      // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+      watch([localeStore], () => {
+        const columns = getColumns();
+        plainOptions.value = columns;
+        plainSortOptions.value = columns;
+        cachePlainOptions.value = columns;
+      });
+      // 代码逻辑说明: 【issues/8529】setColumns将原本隐藏的列展示后，列配置里却没有勾选该列
+      watch([getColumnsRef], () => {
+        init();
+      });
+      function getColumns() {
+        const ret: Options[] = [];
+        // 代码逻辑说明: 【issues/7996】表格列组件取消所有或者只勾选中间，显示非预期
+        let t = table.getColumns({ ignoreIndex: true, ignoreAction: true, ignoreAuth: true, ignoreIfShow: true });
+        if (!t.length) {
+          t = table.getCacheColumns();
+        }
+        t.forEach((item) => {
+          ret.push({
+            label: (item.title as string) || (item.customTitle as string),
+            value: (item.dataIndex || item.title) as string,
+            ...item,
+          });
+        });
+        return ret;
+      }
+
+      async function init() {
+        const columns = getColumns();
+
+        const checkList = table
+          .getColumns({ ignoreAction: true, ignoreIndex: true, ignoreAuth: true, ignoreIfShow: true })
+          .map((item) => {
+            if (item.defaultHidden) {
+              return '';
+            }
+            return item.dataIndex || item.title;
+          })
+          .filter(Boolean) as string[];
+        // 代码逻辑说明: 【issues/7996】表格列组件取消所有或者只勾选中间，显示非预期
+        const { sortedList = [] } = getCache() || {};
+        await nextTick();
+        if (!plainOptions.value.length) {
+          let tmp = columns;
+          if (sortedList?.length) {
+            tmp = columns.sort((prev, next) => {
+              return sortedList.indexOf(prev.value) - sortedList.indexOf(next.value);
+            });
+          }
+          plainOptions.value = tmp;
+          plainSortOptions.value = tmp;
+          cachePlainOptions.value = tmp;
+          state.defaultCheckList = checkList;
+        } else {
+          // const fixedColumns = columns.filter((item) =>
+          //   Reflect.has(item, 'fixed')
+          // ) as BasicColumn[];
+
+          unref(plainOptions).forEach((item: BasicColumn) => {
+            const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex);
+            if (findItem) {
+              item.fixed = findItem.fixed;
+            }
+          });
+          // 代码逻辑说明: 【issues/7996】表格列组件取消所有或者只勾选中间，显示非预期
+          if (sortedList?.length) {
+            plainOptions.value.sort((prev, next) => {
+              return sortedList.indexOf(prev.value) - sortedList.indexOf(next.value);
+            });
+          }
+        }
+        state.isInit = true;
+        state.checkedList = checkList;
+        // 代码逻辑说明: 【TV360X-105】列展示设置问题[列展示如果存在未勾选的列，保存并刷新后，列展示复选框样式会错乱]
+        state.checkAll = columns.length === checkList.length;
+      }
+
+      // checkAll change
+      function onCheckAllChange(e: CheckboxChangeEvent) {
+        const checkList = plainOptions.value.map((item) => item.value);
+        if (e.target.checked) {
+          state.checkedList = checkList;
+          setColumns(checkList);
+        } else {
+          state.checkedList = [];
+          setColumns([]);
+        }
+      }
+
+      const indeterminate = computed(() => {
+        const len = plainOptions.value.length;
+        let checkedLen = state.checkedList.length;
+        // unref(checkIndex) && checkedLen--;
+        return checkedLen > 0 && checkedLen < len;
+      });
+
+      // Trigger when check/uncheck a column
+      function onChange(checkedList: string[]) {
+        const len = plainSortOptions.value.length;
+        state.checkAll = checkedList.length === len;
+        const sortList = unref(plainSortOptions).map((item) => item.value);
+        checkedList.sort((prev, next) => {
+          return sortList.indexOf(prev) - sortList.indexOf(next);
+        });
+        setColumns(checkedList);
+      }
+
+      // reset columns
+      function reset() {
+        // 代码逻辑说明: 【TV360X-105】列展示设置问题[需要重置两次才回到初始状态]
+        setColumns(table.getCacheColumns());
+        setTimeout(() => {
+          const columns = getColumns();
+          // state.checkedList = [...state.defaultCheckList];
+          // 代码逻辑说明: 【issues/825】tabel的列设置隐藏列保存后切换路由问题[重置没勾选]
+          state.checkedList = table
+            .getColumns({ ignoreAction: true, ignoreAuth: true, ignoreIfShow: true })
+            .map((item) => {
+              return item.dataIndex || item.title;
+            })
+            .filter(Boolean) as string[];
+          state.checkAll = true;
+          plainOptions.value = unref(cachePlainOptions);
+          plainSortOptions.value = unref(cachePlainOptions);
+          restAfterOptions.value = columns;
+          if (sortableOrder.value) {
+            sortable.sort(sortableOrder.value);
+          }
+          resetSetting();
+        }, 100);
+      }
+
+      // Open the pop-up window for drag and drop initialization
+      function handleVisibleChange() {
+        if (inited) return;
+        // 代码逻辑说明: 【TV360X-254】列设置闪现及苹果浏览器弹窗过长
+        setTimeout(() => {
+          const columnListEl = unref(columnListRef);
+          if (!columnListEl) return;
+          const el = columnListEl.$el as any;
+          if (!el) return;
+          // Drag and drop sort
+          sortable = Sortablejs.create(unref(el), {
+            animation: 500,
+            delay: 400,
+            delayOnTouchOnly: true,
+            handle: '.table-column-drag-icon ',
+            onEnd: (evt) => {
+              const { oldIndex, newIndex } = evt;
+              if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+                return;
+              }
+              // Sort column
+              const columns = cloneDeep(plainSortOptions.value);
+
+              if (oldIndex > newIndex) {
+                columns.splice(newIndex, 0, columns[oldIndex]);
+                columns.splice(oldIndex + 1, 1);
+              } else {
+                columns.splice(newIndex + 1, 0, columns[oldIndex]);
+                columns.splice(oldIndex, 1);
+              }
+
+              plainSortOptions.value = columns;
+              // 代码逻辑说明: 【TV360X-108】刷新后勾选之前未勾选的字段拖拽之后该字段对应的表格列消失了
+              const cols = columns.map((item) => item.value);
+              const arr = cols.filter((cItem) => state.checkedList.find((lItem) => lItem === cItem));
+              setColumns(arr);
+              // 最开始的代码
+              // setColumns(columns);
+              // 代码逻辑说明: 【TV360X-105】列展示设置问题[重置之后保存的顺序还是上次的]
+              restAfterOptions.value = null;
+            },
+          });
+          // 记录原始 order 序列
+          if (!sortableOrder.value) {
+            sortableOrder.value = sortable.toArray();
+          }
+          inited = true;
+        }, 2000);
+      }
+
+      // Control whether the serial number column is displayed
+      function handleIndexCheckChange(e: CheckboxChangeEvent) {
+        table.setProps({
+          showIndexColumn: e.target.checked,
+        });
+      }
+
+      // Control whether the check box is displayed
+      function handleSelectCheckChange(e: CheckboxChangeEvent) {
+        table.setProps({
+          rowSelection: e.target.checked ? defaultRowSelection : undefined,
+        });
+      }
+
+      function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
+        if (!state.checkedList.includes(item.dataIndex as string)) return;
+
+        const columns = getColumns() as BasicColumn[];
+        const isFixed = item.fixed === fixed ? false : fixed;
+        const index = columns.findIndex((col) => col.dataIndex === item.dataIndex);
+        if (index !== -1) {
+          columns[index].fixed = isFixed;
+        }
+        item.fixed = isFixed;
+
+        if (isFixed && !item.width) {
+          item.width = 100;
+        }
+        table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed });
+        setColumns(columns);
+      }
+
+      function setColumns(columns: BasicColumn[] | string[]) {
+        table.setColumns(columns);
+        const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
+          const visible =
+            columns.findIndex((c: BasicColumn | string) => c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)) !== -1;
+          return { dataIndex: col.value, fixed: col.fixed, visible };
+        });
+
+        emit('columns-change', data);
+      }
+
+      function getPopupContainer() {
+        return isFunction(attrs.getPopupContainer) ? attrs.getPopupContainer() : getParentContainer();
+      }
+
+      return {
+        getBindProps,
+        t,
+        ...toRefs(state),
+        popoverVisible,
+        indeterminate,
+        onCheckAllChange,
+        onChange,
+        plainOptions,
+        reset,
+        saveSetting,
+        prefixCls,
+        columnListRef,
+        handleVisibleChange,
+        checkIndex,
+        checkSelect,
+        handleIndexCheckChange,
+        handleSelectCheckChange,
+        defaultRowSelection,
+        handleColumnFixed,
+        getPopupContainer,
+        isTreeTable,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-column-setting';
+
+  .table-column-drag-icon {
+    margin: 0 5px;
+    cursor: move;
+  }
+
+  .@{prefix-cls} {
+    &__popover-title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    /* 卡片底部样式 */
+    &__popover-footer {
+      position: relative;
+      top: 7px;
+      text-align: right;
+      padding: 4px 0 0;
+      border-top: 1px solid #f0f0f0;
+
+      .ant-btn {
+        margin-right: 6px;
+      }
+    }
+
+    &__check-item {
+      display: flex;
+      align-items: center;
+      min-width: 100%;
+      padding: 4px 16px 8px 0;
+
+      .ant-checkbox-wrapper {
+        width: 100%;
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+
+    &__fixed-left,
+    &__fixed-right {
+      color: rgba(0, 0, 0, 0.45);
+      cursor: pointer;
+
+      &.active,
+      &:hover {
+        color: @primary-color;
+      }
+
+      &.disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+    }
+
+    &__fixed-right {
+      transform: rotate(180deg);
+    }
+
+    &__cloumn-list {
+      svg {
+        width: 1em !important;
+        height: 1em !important;
+      }
+
+      .ant-popover-inner-content {
+        // max-height: 360px;
+        padding-right: 0;
+        padding-left: 0;
+        // overflow: auto;
+      }
+
+      .ant-checkbox-group {
+        // width: 100%;
+        min-width: 260px;
+        max-width: min-content;
+        // flex-wrap: wrap;
+      }
+
+      // 代码逻辑说明: 【TV360X-254】列设置闪现及苹果浏览器弹窗过长
+      &.ant-popover,
+      .ant-popover-content,
+      .ant-popover-inner,
+      .ant-popover-inner-content,
+      .scroll-container,
+      .scrollbar__wrap {
+        max-width: min-content;
+      }
+      .scrollbar {
+        height: 220px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Table/src/components/settings/FullScreenSetting.vue b/src/components/Table/src/components/settings/FullScreenSetting.vue
new file mode 100644
index 0000000..046d647
--- /dev/null
+++ b/src/components/Table/src/components/settings/FullScreenSetting.vue
@@ -0,0 +1,48 @@
+<template>
+  <Tooltip placement="top" v-bind="getBindProps">
+    <template #title>
+      <span>{{ t('component.table.settingFullScreen') }}</span>
+    </template>
+    <FullscreenOutlined @click="toggle" v-if="!isFullscreen" />
+    <FullscreenExitOutlined @click="toggle" v-else />
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
+  import { useFullscreen } from '@vueuse/core';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  export default defineComponent({
+    name: 'FullScreenSetting',
+    props: {
+      isMobile: Boolean,
+    },
+    components: {
+      FullscreenExitOutlined,
+      FullscreenOutlined,
+      Tooltip,
+    },
+
+    setup(props) {
+      const table = useTableContext();
+      const { t } = useI18n();
+      const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
+      const getBindProps = computed(() => {
+        let obj = {};
+        if (props.isMobile) {
+          obj['visible'] = false;
+        }
+        return obj;
+      });
+      return {
+        getBindProps,
+        toggle,
+        isFullscreen,
+        t,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Table/src/components/settings/RedoSetting.vue b/src/components/Table/src/components/settings/RedoSetting.vue
new file mode 100644
index 0000000..e584c13
--- /dev/null
+++ b/src/components/Table/src/components/settings/RedoSetting.vue
@@ -0,0 +1,45 @@
+<template>
+  <Tooltip placement="top" v-bind="getBindProps">
+    <template #title>
+      <span>{{ t('common.redo') }}</span>
+    </template>
+    <RedoOutlined @click="redo" />
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { RedoOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  export default defineComponent({
+    name: 'RedoSetting',
+    props: {
+      isMobile: Boolean,
+    },
+    components: {
+      RedoOutlined,
+      Tooltip,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const { t } = useI18n();
+
+      const getBindProps = computed(() => {
+        let obj = {};
+        if (props.isMobile) {
+          obj['visible'] = false;
+        }
+        return obj;
+      });
+
+      function redo() {
+        table.reload();
+        table.emit!('table-redo');
+      }
+
+      return { getBindProps, redo, t };
+    },
+  });
+</script>
diff --git a/src/components/Table/src/components/settings/SizeSetting.vue b/src/components/Table/src/components/settings/SizeSetting.vue
new file mode 100644
index 0000000..27ba04c
--- /dev/null
+++ b/src/components/Table/src/components/settings/SizeSetting.vue
@@ -0,0 +1,96 @@
+<template>
+  <Tooltip placement="top" v-bind="getBindProps">
+    <template #title>
+      <span>{{ t('component.table.settingDens') }}</span>
+    </template>
+
+    <Dropdown placement="bottom" :trigger="['click']" :getPopupContainer="getPopupContainer">
+      <ColumnHeightOutlined />
+      <template #overlay>
+        <Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
+          <MenuItem key="large">
+            <span>{{ t('component.table.settingDensLarge') }}</span>
+          </MenuItem>
+          <MenuItem key="middle">
+            <span>{{ t('component.table.settingDensMiddle') }}</span>
+          </MenuItem>
+          <MenuItem key="small">
+            <span>{{ t('component.table.settingDensSmall') }}</span>
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import type { SizeType } from '../../types/table';
+  import { computed, defineComponent, ref } from 'vue';
+  import { Tooltip, Dropdown, Menu } from 'ant-design-vue';
+  import { ColumnHeightOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import { getPopupContainer } from '/@/utils';
+  import { useRoute } from 'vue-router';
+  import { createLocalStorage } from '/@/utils/cache';
+
+  export default defineComponent({
+    name: 'SizeSetting',
+    props: {
+      isMobile: Boolean,
+    },
+    components: {
+      ColumnHeightOutlined,
+      Tooltip,
+      Dropdown,
+      Menu,
+      MenuItem: Menu.Item,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const { t } = useI18n();
+      const $ls = createLocalStorage();
+      const route = useRoute();
+
+      const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
+      const getBindProps = computed(() => {
+        let obj = {};
+        if (props.isMobile) {
+          obj['visible'] = false;
+        }
+        return obj;
+      });
+      function handleTitleClick({ key }: { key: SizeType }) {
+        selectedKeysRef.value = [key];
+        table.setProps({
+          size: key,
+        });
+        // 代码逻辑说明: 【TV360X-100】缓存表格密度
+        $ls.set(cacheKey.value, key);
+      }
+      const cacheKey = computed(() => {
+        const path = route.path;
+        let key = path.replace(/[\/\\]/g, '_');
+        let cacheKey = table.getBindValues.value.tableSetting?.cacheKey;
+        if (cacheKey) {
+          key += ':' + cacheKey;
+        }
+        return 'tableSizeCache:' + key;
+      });
+      const local: SizeType | null = $ls.get(cacheKey.value);
+      if (local) {
+        selectedKeysRef.value = [local];
+        table.setProps({
+          size: local,
+        });
+      }
+
+      return {
+        getBindProps,
+        handleTitleClick,
+        selectedKeysRef,
+        getPopupContainer,
+        t,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Table/src/components/settings/index.vue b/src/components/Table/src/components/settings/index.vue
new file mode 100644
index 0000000..3a615ad
--- /dev/null
+++ b/src/components/Table/src/components/settings/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="table-settings">
+    <RedoSetting v-if="getSetting.redo" :isMobile="isMobile" :getPopupContainer="getTableContainer" />
+    <SizeSetting v-if="getSetting.size" :isMobile="isMobile" :getPopupContainer="getTableContainer" />
+    <ColumnSetting v-if="getSetting.setting" :isMobile="isMobile" @columns-change="handleColumnChange" :getPopupContainer="getTableContainer" />
+    <FullScreenSetting v-if="getSetting.fullScreen" :isMobile="isMobile" :getPopupContainer="getTableContainer" />
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { TableSetting, ColumnChangeParam } from '../../types/table';
+  import { defineComponent, computed, unref } from 'vue';
+  import ColumnSetting from './ColumnSetting.vue';
+  import SizeSetting from './SizeSetting.vue';
+  import RedoSetting from './RedoSetting.vue';
+  import FullScreenSetting from './FullScreenSetting.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  export default defineComponent({
+    name: 'TableSetting',
+    components: {
+      ColumnSetting,
+      SizeSetting,
+      RedoSetting,
+      FullScreenSetting,
+    },
+    props: {
+      setting: {
+        type: Object as PropType<TableSetting>,
+        default: () => ({}),
+      },
+      mode: String,
+    },
+    emits: ['columns-change'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const table = useTableContext();
+
+      const getSetting = computed((): TableSetting => {
+        return {
+          redo: true,
+          size: true,
+          setting: true,
+          fullScreen: false,
+          ...props.setting,
+        };
+      });
+      const isMobile = computed(() => props.mode === 'mobile');
+
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        emit('columns-change', data);
+      }
+
+      function getTableContainer() {
+        return table ? unref(table.wrapRef) : document.body;
+      }
+
+      return { getSetting, t, handleColumnChange, getTableContainer, isMobile };
+    },
+  });
+</script>
+<style lang="less">
+  .table-settings {
+    & > * {
+      margin-right: 12px;
+    }
+
+    svg {
+      width: 1.3em;
+      height: 1.3em;
+    }
+  }
+</style>
diff --git a/src/components/Table/src/const.ts b/src/components/Table/src/const.ts
new file mode 100644
index 0000000..9968ec5
--- /dev/null
+++ b/src/components/Table/src/const.ts
@@ -0,0 +1,30 @@
+import componentSetting from '/@/settings/componentSetting';
+
+const { table } = componentSetting;
+
+const { pageSizeOptions, defaultPageSize, defaultSize, fetchSetting, defaultSortFn, defaultFilterFn } = table;
+
+export const ROW_KEY = 'key';
+
+// Optional display number per page;
+export const PAGE_SIZE_OPTIONS = pageSizeOptions;
+
+// Number of items displayed per page
+export const PAGE_SIZE = defaultPageSize;
+
+// Common interface field settings
+export const FETCH_SETTING = fetchSetting;
+
+// Configure general sort function
+export const DEFAULT_SORT_FN = defaultSortFn;
+
+export const DEFAULT_FILTER_FN = defaultFilterFn;
+
+//  Default layout of table cells
+export const DEFAULT_ALIGN = 'center';
+// Default Size
+export const DEFAULT_SIZE = defaultSize;
+
+export const INDEX_COLUMN_FLAG = 'INDEX';
+
+export const ACTION_COLUMN_FLAG = 'ACTION';
diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
new file mode 100644
index 0000000..8efd46a
--- /dev/null
+++ b/src/components/Table/src/hooks/useColumns.ts
@@ -0,0 +1,376 @@
+import type { BasicColumn, BasicTableProps, CellFormat, GetColumnsParams } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import type { ComputedRef } from 'vue';
+import { Table } from 'ant-design-vue';
+import { computed, Ref, ref, toRaw, unref, watch, reactive } from 'vue';
+import { renderEditCell } from '../components/editable';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { isArray, isBoolean, isFunction, isMap, isString } from '/@/utils/is';
+import { cloneDeep, isEqual } from 'lodash-es';
+import { formatToDate } from '/@/utils/dateUtil';
+import { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE } from '../const';
+import { CUS_SEL_COLUMN_KEY } from './useCustomSelection';
+
+function handleItem(item: BasicColumn, ellipsis: boolean) {
+  const { key, dataIndex, children } = item;
+  item.align = item.align || DEFAULT_ALIGN;
+  if (ellipsis) {
+    if (!key) {
+      item.key = dataIndex;
+    }
+    if (!isBoolean(item.ellipsis)) {
+      Object.assign(item, {
+        ellipsis,
+      });
+    }
+  }
+  if (children && children.length) {
+    handleChildren(children, !!ellipsis);
+  }
+}
+
+function handleChildren(children: BasicColumn[] | undefined, ellipsis: boolean) {
+  if (!children) return;
+  children.forEach((item) => {
+    const { children } = item;
+    handleItem(item, ellipsis);
+    handleChildren(children, ellipsis);
+  });
+}
+
+function handleIndexColumn(propsRef: ComputedRef<BasicTableProps>, getPaginationRef: ComputedRef<boolean | PaginationProps>, columns: BasicColumn[]) {
+  const { t } = useI18n();
+
+  const { showIndexColumn, indexColumnProps, isTreeTable } = unref(propsRef);
+
+  let pushIndexColumns = false;
+  if (unref(isTreeTable)) {
+    return;
+  }
+  columns.forEach(() => {
+    const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
+    if (showIndexColumn) {
+      pushIndexColumns = indIndex === -1;
+    } else if (!showIndexColumn && indIndex !== -1) {
+      columns.splice(indIndex, 1);
+    }
+  });
+  // 代码逻辑说明: 【TV360X-105】列展示设置问题[列展示复选框不应该判断序号列复选框的状态]
+  if (columns.length === 0 && showIndexColumn) {
+    const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
+    if (indIndex === -1) {
+      pushIndexColumns = true;
+    }
+  }
+  if (!pushIndexColumns) return;
+
+  const isFixedLeft = columns.some((item) => item.fixed === 'left');
+
+  columns.unshift({
+    flag: INDEX_COLUMN_FLAG,
+    // 代码逻辑说明: 【TV360X-1634】密度是宽松模式时，序号列表头换行了
+    width: propsRef.value.size === 'large' ? 65 : 50,
+    title: t('component.table.index'),
+    align: 'center',
+    customRender: ({ index }) => {
+      const getPagination = unref(getPaginationRef);
+      if (isBoolean(getPagination)) {
+        return `${index + 1}`;
+      }
+      const { current = 1, pageSize = PAGE_SIZE } = getPagination;
+      return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1;
+    },
+    ...(isFixedLeft
+      ? {
+          fixed: 'left',
+        }
+      : {}),
+    ...indexColumnProps,
+  });
+}
+
+function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+  const { actionColumn, showActionColumn } = unref(propsRef);
+  if (!actionColumn || !showActionColumn) return;
+
+  const hasIndex = columns.findIndex((column) => column.flag === ACTION_COLUMN_FLAG);
+  if (hasIndex === -1) {
+    columns.push({
+      ...columns[hasIndex],
+      ...actionColumn,
+      flag: ACTION_COLUMN_FLAG,
+    });
+  }
+}
+
+export function useColumns(
+  propsRef: ComputedRef<BasicTableProps>,
+  getPaginationRef: ComputedRef<boolean | PaginationProps>,
+  handleCustomSelectColumn: Fn
+) {
+  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
+  let cacheColumns = unref(propsRef).columns;
+
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef));
+    // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+    if (isArray(columns)) {
+      columns.forEach((item) => {
+        item.title = isFunction(item.title) ? item.title() : item.title;
+      });
+    }
+    handleIndexColumn(propsRef, getPaginationRef, columns);
+    handleActionColumn(propsRef, columns);
+    // 代码逻辑说明: 【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
+    handleCustomSelectColumn(columns);
+
+    if (!columns) {
+      return [];
+    }
+    const { ellipsis } = unref(propsRef);
+
+    columns.forEach((item) => {
+      const { customRender, slots } = item;
+
+      handleItem(item, Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots);
+    });
+    return columns;
+  });
+
+  function isIfShow(column: BasicColumn): boolean {
+    const ifShow = column.ifShow;
+
+    let isIfShow = true;
+
+    if (isBoolean(ifShow)) {
+      isIfShow = ifShow;
+    }
+    if (isFunction(ifShow)) {
+      isIfShow = ifShow(column);
+    }
+    return isIfShow;
+  }
+  const { hasPermission } = usePermission();
+
+  const getViewColumns = computed(() => {
+    const viewColumns = sortFixedColumn(unref(getColumnsRef));
+
+    const columns = cloneDeep(viewColumns);
+    const formatEditColumn = (columns) => {
+      return columns.map((column) => {
+        // 代码逻辑说明: 【issues-179】antd3 一些警告以及报错(针对表格)
+        if(column.slots?.customRender) {
+          // slots的备份，兼容老的写法，转成新写法避免控制台警告
+          column.slotsBak = column.slots;
+          delete column.slots;
+        }
+
+        const { slots, customRender, format, edit, editRow, flag, title: metaTitle } = column;
+
+        if (!slots || !slots?.title) {
+          // column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
+          column.customTitle = column.title as string;
+          Reflect.deleteProperty(column, 'title');
+        }
+        // 代码逻辑说明: 【online报表】分组标题显示错误，都显示成了联系信息 LOWCOD-2343
+        if (column.children) {
+          column.title = metaTitle;
+        }
+
+        const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
+        if (!customRender && format && !edit && !isDefaultAction) {
+          column.customRender = ({ text, record, index }) => {
+            return formatCell(text, format, record, index);
+          };
+        }
+
+        // edit table
+        if ((edit || editRow) && !isDefaultAction) {
+          column.customRender = renderEditCell(column);
+        }
+        // 代码逻辑说明: 【pull/7333】修复分组表头可编辑表格失效问题
+        if (column.children?.length) {
+          formatEditColumn(column.children.filter((item) => hasPermission(column.auth) && isIfShow(column)));
+        }
+        return reactive(column);
+      });
+    };
+    // 代码逻辑说明: 【pull/7333】修复分组表头可编辑表格失效问题
+    const result = formatEditColumn(columns.filter((item) => hasPermission(item.auth) && isIfShow(item)));
+    // 代码逻辑说明: 【QQYUN-6387】展开写法（去掉报错）
+    if (propsRef.value.expandedRowKeys && !propsRef.value.isTreeTable) {
+      let index = 0;
+      const findIndex = result.findIndex((item) => item.key === CUS_SEL_COLUMN_KEY);
+      if (findIndex != -1) {
+        index = findIndex + 1;
+      }
+      const next: any = result[index + 1];
+      let expand = Table.EXPAND_COLUMN;
+      if (next && (next['fixed'] == true || next['fixed'] == 'left')) {
+        expand = Object.assign(expand, { fixed: 'left' });
+      }
+      result.splice(index, 0, expand);
+    }
+    return result;
+  });
+
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns?.filter((item) => !item.flag) ?? [];
+    }
+  );
+
+  function setCacheColumnsByField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
+    if (!dataIndex || !value) {
+      return;
+    }
+    cacheColumns.forEach((item) => {
+      if (item.dataIndex === dataIndex) {
+        Object.assign(item, value);
+        return;
+      }
+    });
+  }
+
+  /**
+   * set columns
+   * @param columnList key｜column
+   */
+  function setColumns(columnList: Partial<BasicColumn>[] | (string | string[])[]) {
+    const columns = cloneDeep(columnList);
+    if (!isArray(columns)) return;
+
+    if (columns.length <= 0) {
+      columnsRef.value = [];
+      return;
+    }
+
+    const firstColumn = columns[0];
+
+    const cacheKeys = cacheColumns.map((item) => item.dataIndex);
+
+    if (!isString(firstColumn) && !isArray(firstColumn)) {
+      columnsRef.value = columns as BasicColumn[];
+    } else {
+      const columnKeys = (columns as (string | string[])[]).map((m) => m.toString());
+      const newColumns: BasicColumn[] = [];
+      cacheColumns.forEach((item) => {
+        newColumns.push({
+          ...item,
+          defaultHidden: !columnKeys.includes(item.dataIndex?.toString() || (item.key as string)),
+        });
+      });
+      // Sort according to another array
+      if (!isEqual(cacheKeys, columns)) {
+        newColumns.sort((prev, next) => {
+          return columnKeys.indexOf(prev.dataIndex?.toString() as string) - columnKeys.indexOf(next.dataIndex?.toString() as string);
+        });
+      }
+      columnsRef.value = newColumns;
+    }
+  }
+
+  function getColumns(opt?: GetColumnsParams) {
+    const { ignoreIndex, ignoreAction, ignoreAuth, ignoreIfShow, sort } = opt || {};
+    let columns = toRaw(unref(getColumnsRef));
+    if (ignoreIndex) {
+      columns = columns.filter((item) => item.flag !== INDEX_COLUMN_FLAG);
+    }
+    if (ignoreAction) {
+      columns = columns.filter((item) => item.flag !== ACTION_COLUMN_FLAG);
+    }
+    // 过滤自定义选择列
+    columns = columns.filter((item) => item.key !== CUS_SEL_COLUMN_KEY);
+    // 代码逻辑说明: 【issues/8502】解决权限列在列表中不显示，列配置中还显示
+    if (ignoreAuth) {
+      columns = columns.filter((item) => {
+        if (item.auth) {
+          return hasPermission(item.auth);
+        }
+        return true;
+      });
+    }
+    if (ignoreIfShow) {
+      columns = columns.filter((item) => {
+        if (isBoolean(item.ifShow)) {
+          return item.ifShow;
+        }
+        if (isFunction(item.ifShow)) {
+          return item.ifShow(item);
+        }
+        return true;
+      });
+    }
+    if (sort) {
+      columns = sortFixedColumn(columns);
+    }
+
+    return columns;
+  }
+  function getCacheColumns() {
+    return cacheColumns;
+  }
+
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    getColumns,
+    setColumns,
+    getViewColumns,
+    setCacheColumnsByField,
+  };
+}
+
+function sortFixedColumn(columns: BasicColumn[]) {
+  const fixedLeftColumns: BasicColumn[] = [];
+  const fixedRightColumns: BasicColumn[] = [];
+  const defColumns: BasicColumn[] = [];
+  for (const column of columns) {
+    if (column.fixed === 'left') {
+      fixedLeftColumns.push(column);
+      continue;
+    }
+    if (column.fixed === 'right') {
+      fixedRightColumns.push(column);
+      continue;
+    }
+    defColumns.push(column);
+  }
+  return [...fixedLeftColumns, ...defColumns, ...fixedRightColumns].filter((item) => !item.defaultHidden);
+}
+
+// format cell
+export function formatCell(text: string, format: CellFormat, record: Recordable, index: number) {
+  if (!format) {
+    return text;
+  }
+
+  // custom function
+  if (isFunction(format)) {
+    return format(text, record, index);
+  }
+
+  try {
+    // date type
+    const DATE_FORMAT_PREFIX = 'date|';
+    if (isString(format) && format.startsWith(DATE_FORMAT_PREFIX)) {
+      const dateFormat = format.replace(DATE_FORMAT_PREFIX, '');
+
+      if (!dateFormat) {
+        return text;
+      }
+      return formatToDate(text, dateFormat);
+    }
+
+    // Map
+    if (isMap(format)) {
+      return format.get(text);
+    }
+  } catch (error) {
+    return text;
+  }
+}
+
diff --git a/src/components/Table/src/hooks/useColumnsCache.ts b/src/components/Table/src/hooks/useColumnsCache.ts
new file mode 100644
index 0000000..0572c81
--- /dev/null
+++ b/src/components/Table/src/hooks/useColumnsCache.ts
@@ -0,0 +1,147 @@
+import { computed, nextTick, unref, watchEffect } from 'vue';
+import { router } from '/@/router';
+import { useRoute } from 'vue-router';
+import { createLocalStorage } from '/@/utils/cache';
+import { useTableContext } from './useTableContext';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+/**
+ * 列表配置缓存
+ */
+export function useColumnsCache(opt, setColumns, handleColumnFixed) {
+  let isInit = false;
+  const table = useTableContext();
+  const $ls = createLocalStorage();
+  const { createMessage: $message } = useMessage();
+  const route = useRoute();
+  // 列表配置缓存key
+  const cacheKey = computed(() => {
+    // 代码逻辑说明: 【QQYUN-8367】online报表配置列展示保存，影响到其他页面的table字段的显示隐藏（开发环境热更新会有此问题，生产环境无问题）
+    const path = route.path;
+    let key = path.replace(/[\/\\]/g, '_');
+    let cacheKey = table.getBindValues.value.tableSetting?.cacheKey;
+    if (cacheKey) {
+      key += ':' + cacheKey;
+    }
+    return 'columnCache:' + key;
+  });
+
+  watchEffect(() => {
+    const columns = table.getColumns();
+    if (columns.length) {
+      init();
+    }
+  });
+
+  async function init() {
+    if (isInit) {
+      return;
+    }
+    isInit = true;
+    let columnCache = $ls.get(cacheKey.value);
+    if (columnCache && columnCache.checkedList) {
+      const { checkedList, sortedList, sortableOrder, checkIndex } = columnCache;
+      await nextTick();
+      // checkbox的排序缓存
+      opt.sortableOrder.value = sortableOrder;
+      // checkbox的选中缓存
+      opt.state.checkedList = checkedList;
+      // tableColumn的排序缓存
+      opt.plainSortOptions.value.sort((prev, next) => {
+        return sortedList.indexOf(prev.value) - sortedList.indexOf(next.value);
+      });
+      // 重新排序tableColumn
+      checkedList.sort((prev, next) => sortedList.indexOf(prev) - sortedList.indexOf(next));
+      // 是否显示行号列
+      if (checkIndex) {
+        table.setProps({ showIndexColumn: true });
+      }
+      setColumns(checkedList);
+      // 设置固定列
+      setColumnFixed(columnCache);
+    }
+  }
+
+  /** 设置被固定的列 */
+  async function setColumnFixed(columnCache) {
+    const { fixedColumns } = columnCache;
+    const columns = opt.plainOptions.value;
+    for (const column of columns) {
+      let fixedCol = fixedColumns.find((fc) => fc.key === (column.key || column.dataIndex));
+      if (fixedCol) {
+        await nextTick();
+        handleColumnFixed(column, fixedCol.fixed);
+      }
+    }
+  }
+
+  // 判断列固定状态
+  const fixedReg = /^(true|left|right)$/;
+
+  /** 获取被固定的列 */
+  function getFixedColumns() {
+    let fixedColumns: any[] = [];
+    const columns = opt.plainOptions.value;
+    for (const column of columns) {
+      if (fixedReg.test((column.fixed ?? '').toString())) {
+        fixedColumns.push({
+          key: column.key || column.dataIndex,
+          fixed: column.fixed === true ? 'left' : column.fixed,
+        });
+      }
+    }
+    return fixedColumns;
+  }
+
+  /** 保存列配置 */
+  function saveSetting() {
+    const { checkedList } = opt.state;
+    // 代码逻辑说明: 【TV360X-105】列展示设置问题[重置之后保存的顺序还是上次的]
+    let sortedList = [];
+    if (opt.restAfterOptions.value) {
+      sortedList = opt.restAfterOptions.value.map((item) => item.value);
+    } else {
+      sortedList = unref(opt.plainSortOptions).map((item) => item.value);
+    }
+    $ls.set(cacheKey.value, {
+      // 保存的列
+      checkedList,
+      // 排序后的列
+      sortedList,
+      // 是否显示行号列
+      checkIndex: unref(opt.checkIndex),
+      // checkbox原始排序
+      sortableOrder: unref(opt.sortableOrder),
+      // 固定列
+      fixedColumns: getFixedColumns(),
+    });
+    $message.success('保存成功');
+    // 保存之后直接关闭
+    opt.popoverVisible.value = false;
+  }
+
+  /** 重置（删除）列配置 */
+  async function resetSetting() {
+    // 重置固定列
+    await resetFixedColumn();
+    $ls.remove(cacheKey.value);
+    $message.success('重置成功');
+  }
+
+  async function resetFixedColumn() {
+    const columns = opt.plainOptions.value;
+    for (const column of columns) {
+      column.fixed;
+      if (fixedReg.test((column.fixed ?? '').toString())) {
+        await nextTick();
+        handleColumnFixed(column, null);
+      }
+    }
+  }
+
+  return {
+    saveSetting,
+    resetSetting,
+    getCache: () => $ls.get(cacheKey.value),
+  };
+}
diff --git a/src/components/Table/src/hooks/useCustomRow.ts b/src/components/Table/src/hooks/useCustomRow.ts
new file mode 100644
index 0000000..3b87cd7
--- /dev/null
+++ b/src/components/Table/src/hooks/useCustomRow.ts
@@ -0,0 +1,105 @@
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import { unref } from 'vue';
+import { ROW_KEY } from '../const';
+import { isString, isFunction } from '/@/utils/is';
+
+interface Options {
+  setSelectedRowKeys: (keys: string[]) => void;
+  getSelectRowKeys: () => string[];
+  clearSelectedRowKeys: () => void;
+  emit: EmitType;
+  getAutoCreateKey: ComputedRef<boolean | undefined>;
+}
+
+function getKey(record: Recordable, rowKey: string | ((record: Record<string, any>) => string) | undefined, autoCreateKey?: boolean) {
+  if (!rowKey || autoCreateKey) {
+    return record[ROW_KEY];
+  }
+  if (isString(rowKey)) {
+    return record[rowKey];
+  }
+  if (isFunction(rowKey)) {
+    return record[rowKey(record)];
+  }
+  return null;
+}
+
+export function useCustomRow(
+  propsRef: ComputedRef<BasicTableProps>,
+  { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options
+) {
+  const customRow = (record: Recordable, index: number) => {
+    return {
+      onClick: (e: Event) => {
+        e?.stopPropagation();
+        function handleClick() {
+          const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
+          if (!rowSelection || !clickToRowSelect) return;
+          const keys = getSelectRowKeys();
+          const key = getKey(record, rowKey, unref(getAutoCreateKey));
+          if (!key) return;
+
+          const isCheckbox = rowSelection.type === 'checkbox';
+          if (isCheckbox) {
+            // 找到tr
+            const tr: HTMLElement = (e as MouseEvent).composedPath?.().find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
+            if (!tr) return;
+            // 找到Checkbox，检查是否为disabled
+            const checkBox = tr.querySelector('input[type=checkbox]');
+            if (!checkBox || checkBox.hasAttribute('disabled')) return;
+            if (!keys.includes(key)) {
+              setSelectedRowKeys([...keys, key]);
+              return;
+            }
+            const keyIndex = keys.findIndex((item) => item === key);
+            keys.splice(keyIndex, 1);
+            setSelectedRowKeys(keys);
+            return;
+          }
+
+          const isRadio = rowSelection.type === 'radio';
+          if (isRadio) {
+            // 代码逻辑说明: 【QQYUN-6794】table列表增加radio禁用功能
+            const rowSelection = propsRef.value.rowSelection;
+            if (rowSelection.getCheckboxProps) {
+              const result = rowSelection.getCheckboxProps(record);
+              if (result.disabled) {
+                return;
+              }
+            }
+            if (!keys.includes(key)) {
+              if (keys.length) {
+                clearSelectedRowKeys();
+              }
+              setSelectedRowKeys([key]);
+              return;
+            } else {
+              // 点击已经选中的，直接return不在做操作
+              return;
+            }
+            clearSelectedRowKeys();
+          }
+        }
+        handleClick();
+        emit('row-click', record, index, e);
+      },
+      onDblclick: (event: Event) => {
+        emit('row-dbClick', record, index, event);
+      },
+      onContextmenu: (event: Event) => {
+        emit('row-contextmenu', record, index, event);
+      },
+      onMouseenter: (event: Event) => {
+        emit('row-mouseenter', record, index, event);
+      },
+      onMouseleave: (event: Event) => {
+        emit('row-mouseleave', record, index, event);
+      },
+    };
+  };
+
+  return {
+    customRow,
+  };
+}
diff --git a/src/components/Table/src/hooks/useCustomSelection.tsx b/src/components/Table/src/hooks/useCustomSelection.tsx
new file mode 100644
index 0000000..1af2ae5
--- /dev/null
+++ b/src/components/Table/src/hooks/useCustomSelection.tsx
@@ -0,0 +1,730 @@
+import type { BasicColumn } from '/@/components/Table';
+import type { Ref, ComputedRef } from 'vue';
+import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/components/Table';
+import { computed, nextTick, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue';
+import { omit, isEqual } from 'lodash-es';
+import { throttle } from 'lodash-es';
+import { Checkbox, Radio } from 'ant-design-vue';
+import { isFunction } from '/@/utils/is';
+import { findNodeAll } from '/@/utils/helper/treeHelper';
+import { ROW_KEY } from '/@/components/Table/src/const';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { ModalFunc } from 'ant-design-vue/lib/modal/Modal';
+
+// 自定义选择列的key
+export const CUS_SEL_COLUMN_KEY = 'j-custom-selected-column';
+
+/**
+ * 自定义选择列
+ */
+export function useCustomSelection(
+  propsRef: ComputedRef<BasicTableProps>,
+  emit: EmitType,
+  wrapRef: Ref<null | HTMLDivElement>,
+  getPaginationRef: ComputedRef<boolean | PaginationProps>,
+  tableData: Ref<Recordable[]>,
+  childrenColumnName: ComputedRef<string>
+) {
+  const { createConfirm } = useMessage();
+  // 表格body元素
+  const bodyEl = ref<HTMLDivElement>();
+  // body元素高度
+  const bodyHeight = ref<number>(0);
+  // 表格tr高度
+  const rowHeight = ref<number>(0);
+  // body 滚动高度
+  const scrollTop = ref(0);
+  // 选择的key
+  const selectedKeys = ref<string[]>([]);
+  // 选择的行
+  const selectedRows = ref<Recordable[]>([]);
+  // 变更的行
+  let changeRows: Recordable[] = [];
+  let allSelected: boolean = false;
+
+  let timer;
+
+  // 扁平化数据，children数据也会放到一起
+  const flattedData = computed(() => {
+    // 代码逻辑说明: 【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题
+    const data = flattenData(tableData.value, childrenColumnName.value);
+    const rowSelection = propsRef.value.rowSelection;
+    if (rowSelection?.type === 'checkbox' && rowSelection.getCheckboxProps) {
+      for (let i = 0, len = data.length; i < len; i++) {
+        const record = data[i];
+        const result = rowSelection.getCheckboxProps(record);
+        if (result.disabled) {
+          data.splice(i, 1);
+          i--;
+          len--;
+        }
+      }
+    }
+    return data;
+  });
+
+  const getRowSelectionRef = computed((): TableRowSelection | null => {
+    const { rowSelection } = unref(propsRef);
+    if (!rowSelection) {
+      return null;
+    }
+
+    return {
+      preserveSelectedRowKeys: true,
+      // selectedRowKeys: unref(selectedKeys),
+      // onChange: (selectedRowKeys: string[]) => {
+      //   setSelectedRowKeys(selectedRowKeys);
+      // },
+      ...omit(rowSelection, ['onChange', 'selectedRowKeys']),
+    };
+  });
+
+  // 是否是单选
+  const isRadio = computed(() => {
+    return getRowSelectionRef.value?.type === 'radio';
+  });
+
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  // 列key字段
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+  // 获取行的key字段数据
+  const getRecordKey = (record) => {
+    if (!getRowKey.value) {
+      return record[ROW_KEY];
+    } else if (isFunction(getRowKey.value)) {
+      return getRowKey.value(record);
+    } else {
+      return record[getRowKey.value];
+    }
+  };
+
+  // 分页配置
+  const getPagination = computed<PaginationProps>(() => {
+    return typeof getPaginationRef.value === 'boolean' ? {} : getPaginationRef.value;
+  });
+  // 当前页条目数量
+  const currentPageSize = computed(() => {
+    const { pageSize = 10, total = flattedData.value.length } = getPagination.value;
+    return pageSize > total ? total : pageSize;
+  });
+
+  // 选择列表头props
+  const selectHeaderProps = computed(() => {
+    return {
+      onSelectAll,
+      isRadio: isRadio.value,
+      selectedLength: flattedData.value.filter((data) => selectedKeys.value.includes(getRecordKey(data))).length,
+      // 【TV360X-53】为空时会报错，加强判断
+      pageSize: flattedData.value?.length ?? 0,
+      // 【QQYUN-6774】解决checkbox禁用后全选仍能勾选问题
+      disabled: flattedData.value.length == 0,
+      hideSelectAll: unref(propsRef)?.rowSelection?.hideSelectAll,
+    };
+  });
+
+  // 监听传入的selectedRowKeys
+  // 代码逻辑说明: 【QQYUN-8390】部门人员组件点击重置未清空（selectedRowKeys.value=[]，watch没监听到加deep）
+  watch(
+    () => unref(propsRef)?.rowSelection?.selectedRowKeys,
+    (val: string[]) => {
+      // 解决selectedRowKeys在页面调用处使用ref失效
+      const value = unref(val);
+      if (Array.isArray(value) && !sameArray(value, selectedKeys.value)) {
+        // 延迟是为了等watch selectedRows
+        setTimeout(() => {
+          setSelectedRowKeys(value);
+        }, 0);
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  // 编辑时selectedRows可能会回填
+  watch(
+    () => unref(propsRef)?.rowSelection?.selectedRows,
+    (val: string[]) => {
+      const value: any = unref(val);
+      if (Array.isArray(value) && !sameArray(value, selectedRows.value)) {
+        selectedRows.value = value;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+  /**
+  * 2024-03-06
+  * liaozhiyang
+  * 判断是否同一个数组 (引用地址，长度，元素位置信息相同才是同一个数组。数组元素只有字符串)
+  */
+  function sameArray(a, b) {
+    if (a === b) {
+      if (a.length === b.length) {
+        return a.toString() === b.toString();
+      } else {
+        return false;
+      }
+    } else {
+      // 代码逻辑说明: 【QQYUN-9123】popupdict打开弹窗打开程序运行
+      if (isEqual(a, b)) {
+        return true;
+      }
+      return false;
+    }
+  }
+
+  // 当任意一个变化时，触发同步检测
+  watch([selectedKeys, selectedRows], () => {
+    nextTick(() => {
+      syncSelectedRows();
+    });
+  });
+
+  // 监听滚动条事件
+  const onScrollTopChange = throttle((e) => (scrollTop.value = e?.target?.scrollTop), 150);
+
+  let bodyResizeObserver: Nullable<ResizeObserver> = null;
+  // 获取首行行高
+  watchEffect(() => {
+    // 这种写法是为了监听到 size 的变化
+    propsRef.value.size && void 0;
+    if (bodyEl.value) {
+      // 监听div高度变化
+      bodyResizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          if (entry.target === bodyEl.value && entry.contentRect) {
+            const { height } = entry.contentRect;
+            bodyHeight.value = Math.ceil(height);
+          }
+        }
+        updateRowHeight();
+      });
+      bodyResizeObserver.observe(bodyEl.value);
+    }
+    rowHeight.value = 50;
+  });
+
+  onMountedOrActivated(async () => {
+    bodyEl.value = await getTableBody(wrapRef.value!);
+    bodyEl.value.addEventListener('scroll', onScrollTopChange);
+  });
+  onUnmounted(() => {
+    if (bodyEl.value) {
+      bodyEl.value?.removeEventListener('scroll', onScrollTopChange);
+    }
+    if (bodyResizeObserver != null) {
+      bodyResizeObserver.disconnect();
+    }
+  });
+
+  // 更新首行行高
+  function updateRowHeight() {
+    const el = bodyEl.value?.querySelector('tbody.ant-table-tbody tr.ant-table-row') as HTMLDivElement;
+    if (el) {
+      // 代码逻辑说明: 【issues/7442】basicTable从默认切换到宽松紧凑时多选框显示异常
+      nextTick(() => rowHeight.value = el.offsetHeight);
+    }
+  }
+
+  // 选择全部
+  function onSelectAll(checked: boolean, flag = 'currentPage') {
+    // 代码逻辑说明: 【issues/5577】BasicTable组件全选和取消全选时不触发onSelectAll事件
+    if (unref(propsRef)?.rowSelection?.onSelectAll) {
+      allSelected = checked;
+      changeRows = getInvertRows(selectedRows.value, checked, flag);
+    }
+    // 取消全选
+    if (!checked) {
+      // 代码逻辑说明: 【issues/6958】取消没触发onSelectAll事件，跨页选中后 changeRows 为空
+      if (flag === 'allPage') {
+        selectedKeys.value = [];
+        selectedRows.value = [];
+      } else {
+        flattedData.value.forEach((item) => {
+          updateSelected(item, false);
+        });
+      }
+      emitChange('all');
+      return;
+    }
+    let modal: Nullable<ReturnType<ModalFunc>> = null;
+    // 全选
+    const checkAll = () => {
+      if (modal != null) {
+        modal.update({
+          content: '正在分批全选，请稍后……',
+          cancelButtonProps: { disabled: true },
+        });
+      }
+      let showCount = 0;
+      // 最小选中数量
+      let minSelect = 100;
+      const hidden: Recordable[] = [];
+      flattedData.value.forEach((item, index, array) => {
+        if (array.length > 120) {
+          if (showCount <= minSelect && recordIsShow(index, Math.max((minSelect - 10) / 2, 3))) {
+            showCount++;
+            updateSelected(item, checked);
+          } else {
+            hidden.push(item);
+          }
+        } else {
+          updateSelected(item, checked);
+        }
+      });
+      if (hidden.length > 0) {
+        return batchesSelectAll(hidden, checked, minSelect);
+      } else {
+        emitChange('all');
+      }
+    };
+
+    // 当数据量大于120条时，全选会导致页面卡顿，需进行慢速全选
+    if (flattedData.value.length > 120) {
+      modal = createConfirm({
+        title: '全选',
+        content: '当前数据量较大，全选可能会导致页面卡顿，确定要执行此操作吗？',
+        iconType: 'warning',
+        onOk: () => checkAll(),
+      });
+    } else {
+      checkAll();
+    }
+  }
+
+  // 分批全选
+  function batchesSelectAll(hidden: Recordable[], checked: boolean, minSelect: number) {
+    return new Promise<void>((resolve) => {
+      (function call() {
+        // 每隔半秒钟，选择100条数据
+        setTimeout(() => {
+          const list = hidden.splice(0, minSelect);
+          if (list.length > 0) {
+            list.forEach((item) => {
+              updateSelected(item, checked);
+            });
+            call();
+          } else {
+            setTimeout(() => {
+              emitChange('all');
+              // 代码逻辑说明: 【QQYUN-5687】批量选择，提示成功后，又来一个提示
+              setTimeout(() =>resolve(), 0);
+            }, 500);
+          }
+        }, 300);
+      })();
+    });
+  }
+
+  // 选中单个
+  function onSelect(record, checked) {
+    onSelectChild(record, checked);
+    updateSelected(record, checked);
+    onSelectParent(record, checked);
+    // 代码逻辑说明: 【issues/8690】BasicTable的rowSelection新增onSelect方法
+    propsRef.value.rowSelection?.onSelect?.(toRaw(record), checked, toRaw(selectedRows.value));
+    emitChange();
+  }
+
+  function updateSelected(record, checked) {
+    const recordKey = getRecordKey(record);
+    if (isRadio.value) {
+      selectedKeys.value = [recordKey];
+      selectedRows.value = [record];
+      return;
+    }
+    const index = selectedKeys.value.findIndex((key) => key === recordKey);
+    if (checked) {
+      if (index === -1) {
+        selectedKeys.value.push(recordKey);
+        selectedRows.value.push(record);
+      }
+    } else {
+      if (index !== -1) {
+        selectedKeys.value.splice(index, 1);
+        selectedRows.value.splice(index, 1);
+      }
+    }
+    // 代码逻辑说明: 【issues/7200】basicTable选中后没有选中样式
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      selectedKeys.value = [...selectedKeys.value];
+    }, 0);
+  }
+
+  // 调用用户自定义的onChange事件
+  function emitChange(mode = 'single') {
+    const { rowSelection } = unref(propsRef);
+    if (rowSelection) {
+      const { onChange } = rowSelection;
+      if (onChange && isFunction(onChange)) {
+        setTimeout(() => {
+          onChange(selectedKeys.value, selectedRows.value);
+        }, 0);
+      }
+    }
+    emit('selection-change', {
+      keys: getSelectRowKeys(),
+      rows: getSelectRows(),
+    });
+    // 代码逻辑说明: 【issues/5577】BasicTable组件全选和取消全选时不触发onSelectAll事件
+    if (mode == 'all') {
+      const rowSelection = unref(propsRef)?.rowSelection;
+      if (rowSelection?.onSelectAll) {
+        rowSelection.onSelectAll(allSelected, toRaw(getSelectRows()), toRaw(changeRows));
+      }
+    }
+  }
+  /**
+   * 层级关联时，选中下级数据
+   * @param record
+   * @param checked
+   */
+  function onSelectChild(record, checked) {
+    if (unref(propsRef)?.isTreeTable && unref(propsRef)?.rowSelection?.checkStrictly === false && !isRadio.value) {
+      if (record[childrenColumnName.value] && record[childrenColumnName.value].length > 0) {
+        record[childrenColumnName.value].forEach((children) => {
+          updateSelected(children, checked);
+          if (children[childrenColumnName.value] && children[childrenColumnName.value].length > 0) {
+            onSelectChild(children, checked);
+          }
+        });
+      }
+    }
+  }
+  /**
+   * 2024-09-24
+   * liaozhiyang
+   * 层级关联时，选中上级数据
+   * 【issues/7217】BasicTable树形表格设置checkStrictly无效
+   * */
+  function onSelectParent(record, checked) {
+    if (unref(propsRef)?.isTreeTable && unref(propsRef)?.rowSelection?.checkStrictly === false && !isRadio.value) {
+      let condition = true,
+        currentRecord = record;
+      while (condition) {
+        const parentRecord: any = findParent(tableData.value, currentRecord, childrenColumnName.value);
+        if (parentRecord) {
+          const childrenRecordKeys: any = [];
+          parentRecord[childrenColumnName.value].forEach((item) => {
+            childrenRecordKeys.push(getRecordKey(item));
+          });
+          if (checked === true) {
+            const isSubSet = childrenRecordKeys.every((item) => selectedKeys.value.includes(item));
+            isSubSet && updateSelected(parentRecord, checked);
+          } else if (checked === false) {
+            updateSelected(parentRecord, checked);
+          }
+          if (tableData.value.find((item) => getRecordKey(item) === getRecordKey(parentRecord))) {
+            // 循环终止
+            condition = false;
+          } else {
+            currentRecord = parentRecord;
+          }
+        } else {
+          // 循环终止
+          condition = false;
+        }
+      }
+    }
+    function findParent(tree, record, children = 'children') {
+      let parent = null;
+      function search(nodes) {
+        for (let node of nodes) {
+          if (node[children]?.some((child) => getRecordKey(child) === getRecordKey(record))) {
+            parent = node;
+            return true;
+          }
+          if (node[children] && search(node[children])) {
+            return true;
+          }
+        }
+        return false;
+      }
+      search(tree);
+      return parent;
+    }
+  }
+  // 用于判断是否是自定义选择列
+  function isCustomSelection(column: BasicColumn) {
+    return column.key === CUS_SEL_COLUMN_KEY;
+  }
+
+  /**
+   * 判断当前行是否可视，虚拟滚动用
+   * @param index 行下标
+   * @param threshold 前后阈值，默认可视区域前后显示3条
+   */
+  function recordIsShow(index: number, threshold = 3) {
+    // 只有数据量大于50条时，才会进行虚拟滚动
+    const isVirtual = flattedData.value.length > 50;
+    if (isVirtual) {
+      // 根据 scrollTop、bodyHeight、rowHeight 计算出当前行是否可视（阈值前后3条）
+      // flag1 = 判断当前行是否在可视区域上方3条
+      const flag1 = scrollTop.value - rowHeight.value * threshold < index * rowHeight.value;
+      // flag2 = 判断当前行是否在可视区域下方3条
+      const flag2 = index * rowHeight.value < scrollTop.value + bodyHeight.value + rowHeight.value * threshold;
+      // 全部条件满足时，才显示当前行
+      return flag1 && flag2;
+    }
+    return true;
+  }
+
+  // 自定义渲染Body
+  function bodyCustomRender(params) {
+    const { index } = params;
+    // 代码逻辑说明: 【issues/776】显示100条/页，复选框只能显示3个的问题
+    if (propsRef.value.canResize && !recordIsShow(index)) {
+      return '';
+    }
+    if (isRadio.value) {
+      return renderRadioComponent(params);
+    } else {
+      return renderCheckboxComponent(params);
+    }
+  }
+
+  /**
+   * 渲染checkbox组件
+   */
+  function renderCheckboxComponent({ record }) {
+    const recordKey = getRecordKey(record);
+    // 获取用户自定义checkboxProps
+    const checkboxProps = ((getCheckboxProps) => {
+      if (typeof getCheckboxProps === 'function') {
+        try {
+          return getCheckboxProps(record) ?? {};
+        } catch (error) {
+          console.error(error);
+        }
+      }
+      return {};
+    })(propsRef.value.rowSelection?.getCheckboxProps);
+    return (
+      <Checkbox
+        {...checkboxProps}
+        key={'j-select__' + recordKey}
+        checked={selectedKeys.value.includes(recordKey)}
+        onUpdate:checked={(checked) => onSelect(record, checked)}
+        // 代码逻辑说明: 【QQYUN-8694】BasicTable在使用clickToRowSelect=true下，selection-change 事件在触发多次
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  }
+
+  /**
+   * 渲染radio组件
+   */
+  function renderRadioComponent({ record }) {
+    const recordKey = getRecordKey(record);
+    // 获取用户自定义radioProps
+    const checkboxProps = (() => {
+      const rowSelection = propsRef.value.rowSelection;
+      if (rowSelection?.getCheckboxProps) {
+        return rowSelection.getCheckboxProps(record);
+      }
+      return {};
+    })();
+    return (
+      <Radio
+        {...checkboxProps}
+        key={'j-select__' + recordKey}
+        checked={selectedKeys.value.includes(recordKey)}
+        onUpdate:checked={(checked) => onSelect(record, checked)}
+        // 代码逻辑说明: 【QQYUN-8694】BasicTable在使用clickToRowSelect=true下，selection-change 事件在触发多次
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  }
+
+  // 创建选择列
+  function handleCustomSelectColumn(columns: BasicColumn[]) {
+    // 代码逻辑说明: 【issues/757】JPopup表格的选择列固定配置不生效
+    const rowSelection = propsRef.value.rowSelection;
+    if (!rowSelection) {
+      return;
+    }
+    const isFixedLeft = rowSelection.fixed || columns.some((item) => item.fixed === 'left');
+    // 代码逻辑说明: 【issues/757】JPopup表格的选择列固定配置不生效
+    columns.unshift({
+      title: '选择列',
+      flag: 'CHECKBOX',
+      key: CUS_SEL_COLUMN_KEY,
+      width: 50,
+      minWidth: 50,
+      maxWidth: 50,
+      align: 'center',
+      ...(isFixedLeft ? { fixed: 'left' } : {}),
+      customRender: bodyCustomRender,
+    });
+  }
+
+  // 清空所有选择
+  function clearSelectedRowKeys() {
+    onSelectAll(false, 'allPage');
+  }
+
+  // 通过 selectedKeys 同步 selectedRows
+  function syncSelectedRows() {
+    if (selectedKeys.value.length !== selectedRows.value.length) {
+      // 延迟是为了等watch selectedRows
+      setTimeout(() => {
+        setSelectedRowKeys(selectedKeys.value);
+      }, 0);
+    }
+  }
+
+  // 设置选择的key
+  function setSelectedRowKeys(rowKeys: string[]) {
+    const isSomeRowKeys = selectedKeys.value === rowKeys;
+    selectedKeys.value = rowKeys;
+    const allSelectedRows = findNodeAll(
+      toRaw(unref(flattedData)).concat(toRaw(unref(selectedRows))),
+      (item) => rowKeys.includes(getRecordKey(item)),
+      {
+        children: propsRef.value.childrenColumnName ?? 'children',
+      }
+    );
+    const trueSelectedRows: any[] = [];
+    rowKeys.forEach((key: string) => {
+      const found = allSelectedRows.find((item) => getRecordKey(item) === key);
+      found && trueSelectedRows.push(found);
+    });
+    // 代码逻辑说明: 【issues/828】解决卡死问题
+    if (!(isSomeRowKeys && equal(selectedRows.value, trueSelectedRows))) {
+      selectedRows.value = trueSelectedRows;
+      emitChange();
+    }
+  }
+  /**
+   *2023-11-03
+   *廖志阳
+   *检测selectedRows.value和trueSelectedRows是否相等，防止死循环
+   */
+  function equal(oldVal, newVal) {
+    let oldKeys = [],
+      newKeys = [];
+    if (oldVal.length === newVal.length) {
+      oldKeys = oldVal.map((item) => getRecordKey(item));
+      newKeys = newVal.map((item) => getRecordKey(item));
+      for (let i = 0, len = oldKeys.length; i < len; i++) {
+        const findItem = newKeys.find((item) => item === oldKeys[i]);
+        if (!findItem) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  /**
+   *2024-08-08
+   *廖志阳
+   *根据全选或者反选(或者使用clearSelectedRowKeys()方法)返回源数据中这次需要变更的数据
+   */
+  function getInvertRows(selectedRows: any, checked: boolean, flag): any {
+    if (flag == 'currentPage') {
+      const curPageRows = findNodeAll(toRaw(unref(flattedData)), () => true, {
+        children: propsRef.value.childrenColumnName ?? 'children',
+      });
+      const selectedkeys = selectedRows.map((item) => getRecordKey(item));
+      const result: any = [];
+      curPageRows.forEach((item) => {
+        const curRowkey = getRecordKey(item);
+        const index = selectedkeys.findIndex((item) => item === curRowkey);
+        if (index == -1) {
+          checked && result.push(toRaw(item));
+        } else {
+          !checked && result.push(toRaw(item));
+        }
+      });
+      return result;
+    } else {
+      return toRaw(selectedRows);
+    }
+  }
+  function getSelectRows<T = Recordable>() {
+    return unref(selectedRows) as T[];
+  }
+
+  function getSelectRowKeys() {
+    return unref(selectedKeys);
+  }
+
+  function getRowSelection() {
+    return unref(getRowSelectionRef)!;
+  }
+
+  function deleteSelectRowByKey(key: string) {
+    const index = selectedKeys.value.findIndex((item) => item === key);
+    if (index !== -1) {
+      selectedKeys.value.splice(index, 1);
+      selectedRows.value.splice(index, 1);
+    }
+  }
+
+  // 【QQYUN-5837】动态计算 expandIconColumnIndex
+  const getExpandIconColumnIndex = computed(() => {
+    const { expandIconColumnIndex } = unref(propsRef);
+    // 未设置选择列，则保持不变
+    if (getRowSelectionRef.value == null) {
+      return expandIconColumnIndex;
+    }
+    // 设置了选择列，并且未传入 index 参数，则返回 1
+    if (expandIconColumnIndex == null) {
+      return 1;
+    }
+    return expandIconColumnIndex;
+  });
+
+  return {
+    getRowSelection,
+    getRowSelectionRef,
+    getSelectRows,
+    getSelectRowKeys,
+    setSelectedRowKeys,
+    deleteSelectRowByKey,
+    selectHeaderProps,
+    isCustomSelection,
+    handleCustomSelectColumn,
+    clearSelectedRowKeys,
+    getExpandIconColumnIndex,
+  };
+}
+
+function getTableBody(wrap: HTMLDivElement) {
+  return new Promise<HTMLDivElement>((resolve) => {
+    (function fn() {
+      const bodyEl = wrap.querySelector('.ant-table-wrapper .ant-table-body') as HTMLDivElement;
+      if (bodyEl) {
+        resolve(bodyEl);
+      } else {
+        setTimeout(fn, 100);
+      }
+    })();
+  });
+}
+
+function flattenData<RecordType>(data: RecordType[] | undefined, childrenColumnName: string): RecordType[] {
+  let list: RecordType[] = [];
+  (data || []).forEach((record) => {
+    list.push(record);
+
+    if (record && typeof record === 'object' && childrenColumnName in record) {
+      list = [...list, ...flattenData<RecordType>((record as any)[childrenColumnName], childrenColumnName)];
+    }
+  });
+
+  return list;
+}
+
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
new file mode 100644
index 0000000..1520d7b
--- /dev/null
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -0,0 +1,354 @@
+import type { BasicTableProps, FetchParams, SorterResult } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import { ref, unref, ComputedRef, computed, onMounted, watch, reactive, Ref, watchEffect } from 'vue';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { buildUUID } from '/@/utils/uuid';
+import { isFunction, isBoolean } from '/@/utils/is';
+import { get, cloneDeep } from 'lodash-es';
+import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
+
+interface ActionType {
+  getPaginationInfo: ComputedRef<boolean | PaginationProps>;
+  setPagination: (info: Partial<PaginationProps>) => void;
+  setLoading: (loading: boolean) => void;
+  // 代码逻辑说明: 由于 getFieldsValue 返回的不是逗号分割的数据，所以改用 validate
+  validate: () => Recordable;
+  clearSelectedRowKeys: () => void;
+  tableData: Ref<Recordable[]>;
+}
+
+interface SearchState {
+  sortInfo: Recordable;
+  filterInfo: Record<string, string[]>;
+}
+export function useDataSource(
+  propsRef: ComputedRef<BasicTableProps>,
+  { getPaginationInfo, setPagination, setLoading, validate, clearSelectedRowKeys, tableData }: ActionType,
+  emit: EmitType
+) {
+  const searchState = reactive<SearchState>({
+    sortInfo: {},
+    filterInfo: {},
+  });
+  const dataSourceRef = ref<Recordable[]>([]);
+  const rawDataSourceRef = ref<Recordable>({});
+
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource, api } = unref(propsRef);
+      !api && dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function handleTableChange(pagination: PaginationProps, filters: Partial<Recordable<string[]>>, sorter: SorterResult) {
+    const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef);
+    if (clearSelectOnPageChange) {
+      clearSelectedRowKeys();
+    }
+    setPagination(pagination);
+
+    const params: Recordable = {};
+    if (sorter && isFunction(sortFn)) {
+      const sortInfo = sortFn(sorter);
+      searchState.sortInfo = sortInfo;
+      params.sortInfo = sortInfo;
+    }
+
+    if (filters && isFunction(filterFn)) {
+      const filterInfo = filterFn(filters);
+      searchState.filterInfo = filterInfo;
+      params.filterInfo = filterInfo;
+    }
+    fetch(params);
+  }
+
+  function setTableKey(items: any[]) {
+    if (!items || !Array.isArray(items)) return;
+    items.forEach((item) => {
+      if (!item[ROW_KEY]) {
+        item[ROW_KEY] = buildUUID();
+      }
+      if (item.children && item.children.length) {
+        setTableKey(item.children);
+      }
+    });
+  }
+
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef);
+    }
+    if (unref(getAutoCreateKey)) {
+      const firstItem = dataSource[0];
+      const lastItem = dataSource[dataSource.length - 1];
+
+      if (firstItem && lastItem) {
+        if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
+          const data = cloneDeep(unref(dataSourceRef));
+          data.forEach((item) => {
+            if (!item[ROW_KEY]) {
+              item[ROW_KEY] = buildUUID();
+            }
+            if (item.children && item.children.length) {
+              setTableKey(item.children);
+            }
+          });
+          dataSourceRef.value = data;
+        }
+      }
+    }
+    return unref(dataSourceRef);
+  });
+
+  async function updateTableData(index: number, key: string, value: any) {
+    const record = dataSourceRef.value[index];
+    if (record) {
+      dataSourceRef.value[index][key] = value;
+    }
+    return dataSourceRef.value[index];
+  }
+
+  function updateTableDataRecord(rowKey: string | number, record: Recordable): Recordable | undefined {
+    const row = findTableDataRecord(rowKey);
+
+    if (row) {
+      for (const field in row) {
+        if (Reflect.has(record, field)) row[field] = record[field];
+        // 代码逻辑说明: 【TV360X-437】树表 部分组件编辑完后，列表未刷新---
+        if (Reflect.has(record, field + '_dictText')) {
+          row[field + '_dictText'] = record[field + '_dictText'];
+        }
+      }
+      return row;
+    }
+  }
+  function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    const rowKeyName = unref(getRowKey);
+    if (!rowKeyName) return;
+    const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
+    for (const key of rowKeys) {
+      let index: number | undefined = dataSourceRef.value.findIndex((row) => {
+        let targetKeyName: string;
+        if (typeof rowKeyName === 'function') {
+          targetKeyName = rowKeyName(row);
+        } else {
+          targetKeyName = rowKeyName as string;
+        }
+        return row[targetKeyName] === key;
+      });
+      if (index >= 0) {
+        dataSourceRef.value.splice(index, 1);
+      }
+      index = unref(propsRef).dataSource?.findIndex((row) => {
+        let targetKeyName: string;
+        if (typeof rowKeyName === 'function') {
+          targetKeyName = rowKeyName(row);
+        } else {
+          targetKeyName = rowKeyName as string;
+        }
+        return row[targetKeyName] === key;
+      });
+      if (typeof index !== 'undefined' && index !== -1) unref(propsRef).dataSource?.splice(index, 1);
+    }
+    setPagination({
+      total: unref(propsRef).dataSource?.length,
+    });
+  }
+
+  function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
+    // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+    index = index ?? dataSourceRef.value?.length;
+    unref(dataSourceRef).splice(index, 0, record);
+    return unref(dataSourceRef);
+  }
+  function findTableDataRecord(rowKey: string | number) {
+    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+
+    const rowKeyName = unref(getRowKey);
+    if (!rowKeyName) return;
+
+    const { childrenColumnName = 'children' } = unref(propsRef);
+
+    const findRow = (array: any[]) => {
+      let ret;
+      array.some(function iter(r) {
+        if (typeof rowKeyName === 'function') {
+          if ((rowKeyName(r) as string) === rowKey) {
+            ret = r;
+            return true;
+          }
+        } else {
+          if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
+            ret = r;
+            return true;
+          }
+        }
+        return r[childrenColumnName] && r[childrenColumnName].some(iter);
+      });
+      return ret;
+    };
+
+    // const row = dataSourceRef.value.find(r => {
+    //   if (typeof rowKeyName === 'function') {
+    //     return (rowKeyName(r) as string) === rowKey
+    //   } else {
+    //     return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey
+    //   }
+    // })
+    return findRow(dataSourceRef.value);
+  }
+
+  async function fetch(opt?: FetchParams) {
+    const { api, searchInfo, defSort, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } = unref(propsRef);
+    if (!api || !isFunction(api)) return;
+    try {
+      setLoading(true);
+      const { pageField, sizeField, listField, totalField } = Object.assign({}, FETCH_SETTING, fetchSetting);
+      let pageParams: Recordable = {};
+
+      const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo) as PaginationProps;
+
+      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+        pageParams = {};
+      } else {
+        pageParams[pageField] = (opt && opt.page) || current;
+        pageParams[sizeField] = pageSize;
+      }
+
+      const { sortInfo = {}, filterInfo } = searchState;
+
+      // 扩展默认排序多字段数组写法
+      let defSortInfo: Recordable<any> | undefined = {};
+      if (defSort && Array.isArray(defSort) && defSort.length > 0) {
+        defSortInfo['defSortString'] = JSON.stringify(defSort);
+      } else {
+        defSortInfo = defSort;
+      }
+
+      let params: Recordable = {
+        ...pageParams,
+        // 由于 getFieldsValue 返回的不是逗号分割的数据，所以改用 validate
+        ...(useSearchForm ? await validate() : {}),
+        ...searchInfo,
+        ...defSortInfo,
+        ...(opt?.searchInfo ?? {}),
+        ...sortInfo,
+        ...filterInfo,
+        ...(opt?.sortInfo ?? {}),
+        ...(opt?.filterInfo ?? {}),
+      };
+      if (beforeFetch && isFunction(beforeFetch)) {
+        params = (await beforeFetch(params)) || params;
+      }
+      // 代码逻辑说明: 【QQYUN-8316】table查询条件,请求剔除空字符串字段
+      for (let item of Object.entries(params)) {
+        const [key, val] = item;
+        if (val === '') {
+          delete params[key];
+        };
+      };
+      const res = await api(params);
+      rawDataSourceRef.value = res;
+
+      const isArrayResult = Array.isArray(res);
+
+      let resultItems: Recordable[] = isArrayResult ? res : get(res, listField);
+      const resultTotal: number = isArrayResult ? 0 : get(res, totalField);
+
+      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+      if (resultTotal) {
+        const currentTotalPage = Math.ceil(Number(resultTotal) / pageSize);
+        if (current > currentTotalPage) {
+          setPagination({
+            current: currentTotalPage,
+          });
+          return await fetch(opt);
+        }
+      }
+
+      if (afterFetch && isFunction(afterFetch)) {
+        resultItems = (await afterFetch(resultItems)) || resultItems;
+      }
+      dataSourceRef.value = resultItems;
+      setPagination({
+        total: Number(resultTotal) || 0,
+      });
+      if (opt && opt.page) {
+        setPagination({
+          current: opt.page || 1,
+        });
+      }
+      emit('fetch-success', {
+        items: unref(resultItems),
+        total: Number(resultTotal),
+      });
+      return resultItems;
+    } catch (error) {
+      emit('fetch-error', error);
+      dataSourceRef.value = [];
+      setPagination({
+        total: 0,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function setTableData<T = Recordable>(values: T[]) {
+    dataSourceRef.value = values;
+  }
+
+  function getDataSource<T = Recordable>() {
+    return getDataSourceRef.value as T[];
+  }
+
+  function getRawDataSource<T = Recordable>() {
+    return rawDataSourceRef.value as T;
+  }
+
+  async function reload(opt?: FetchParams) {
+    return await fetch(opt);
+  }
+
+  onMounted(() => {
+    useTimeoutFn(() => {
+      unref(propsRef).immediate && fetch();
+    }, 16);
+  });
+
+  return {
+    getDataSourceRef,
+    getDataSource,
+    getRawDataSource,
+    getRowKey,
+    setTableData,
+    getAutoCreateKey,
+    fetch,
+    reload,
+    updateTableData,
+    updateTableDataRecord,
+    deleteTableDataRecord,
+    insertTableDataRecord,
+    findTableDataRecord,
+    handleTableChange,
+  };
+}
diff --git a/src/components/Table/src/hooks/useLoading.ts b/src/components/Table/src/hooks/useLoading.ts
new file mode 100644
index 0000000..0a670b0
--- /dev/null
+++ b/src/components/Table/src/hooks/useLoading.ts
@@ -0,0 +1,21 @@
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+export function useLoading(props: ComputedRef<BasicTableProps>) {
+  const loadingRef = ref(unref(props).loading);
+
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
+    }
+  );
+
+  const getLoading = computed(() => unref(loadingRef));
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+
+  return { getLoading, setLoading };
+}
diff --git a/src/components/Table/src/hooks/usePagination.tsx b/src/components/Table/src/hooks/usePagination.tsx
new file mode 100644
index 0000000..d90eb29
--- /dev/null
+++ b/src/components/Table/src/hooks/usePagination.tsx
@@ -0,0 +1,85 @@
+import type { PaginationProps } from '../types/pagination';
+import type { BasicTableProps } from '../types/table';
+import { computed, unref, ref, ComputedRef, watch } from 'vue';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+import { isBoolean } from '/@/utils/is';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+interface ItemRender {
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
+}
+
+function itemRender({ page, type, originalElement }: ItemRender) {
+  if (type === 'prev') {
+    return page === 0 ? null : <LeftOutlined />;
+  } else if (type === 'next') {
+    return page === 1 ? null : <RightOutlined />;
+  }
+  return originalElement;
+}
+
+export function usePagination(refProps: ComputedRef<BasicTableProps>) {
+  const { t } = useI18n();
+
+  const configRef = ref<PaginationProps>({});
+  const show = ref(true);
+
+  watch(
+    () => unref(refProps).pagination,
+    (pagination) => {
+      if (!isBoolean(pagination) && pagination) {
+        configRef.value = {
+          ...unref(configRef),
+          ...(pagination ?? {}),
+        };
+      }
+    }
+  );
+
+  const getPaginationInfo = computed((): PaginationProps | boolean => {
+    const { pagination } = unref(refProps);
+
+    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
+      return false;
+    }
+
+    return {
+      current: 1,
+      pageSize: PAGE_SIZE,
+      size: 'small',
+      defaultPageSize: PAGE_SIZE,
+      showTotal: (total) => t('component.table.total', { total }),
+      showSizeChanger: true,
+      pageSizeOptions: PAGE_SIZE_OPTIONS,
+      itemRender: itemRender,
+      showQuickJumper: true,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+    };
+  });
+
+  function setPagination(info: Partial<PaginationProps>) {
+    const paginationInfo = unref(getPaginationInfo);
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    };
+  }
+
+  function getPagination() {
+    return unref(getPaginationInfo);
+  }
+
+  function getShowPagination() {
+    return unref(show);
+  }
+
+  async function setShowPagination(flag: boolean) {
+    show.value = flag;
+  }
+
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
+}
diff --git a/src/components/Table/src/hooks/useRowSelection.ts b/src/components/Table/src/hooks/useRowSelection.ts
new file mode 100644
index 0000000..538c69d
--- /dev/null
+++ b/src/components/Table/src/hooks/useRowSelection.ts
@@ -0,0 +1,125 @@
+import { isFunction } from '/@/utils/is';
+import type { BasicTableProps, TableRowSelection } from '../types/table';
+import { computed, ComputedRef, nextTick, Ref, ref, toRaw, unref, watch } from 'vue';
+import { ROW_KEY } from '../const';
+import { omit } from 'lodash-es';
+import { findNodeAll } from '/@/utils/helper/treeHelper';
+
+export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, tableData: Ref<Recordable[]>, emit: EmitType) {
+  const selectedRowKeysRef = ref<string[]>([]);
+  const selectedRowRef = ref<Recordable[]>([]);
+
+  const getRowSelectionRef = computed((): TableRowSelection | null => {
+    const { rowSelection } = unref(propsRef);
+    if (!rowSelection) {
+      return null;
+    }
+
+    return {
+      // AntDV3.0 之后使用远程加载数据进行分页时，
+      // 默认会清空上一页选择的行数据（导致无法跨页选择），
+      // 将此属性设置为 true 即可解决。
+      preserveSelectedRowKeys: true,
+      selectedRowKeys: unref(selectedRowKeysRef),
+      onChange: (selectedRowKeys: string[]) => {
+        setSelectedRowKeys(selectedRowKeys);
+      },
+      ...omit(rowSelection, ['onChange']),
+    };
+  });
+
+  watch(
+    () => unref(propsRef).rowSelection?.selectedRowKeys,
+    (v: string[]) => {
+      setSelectedRowKeys(v);
+    }
+  );
+
+  watch(
+    () => unref(selectedRowKeysRef),
+    () => {
+      nextTick(() => {
+        const { rowSelection } = unref(propsRef);
+        if (rowSelection) {
+          const { onChange } = rowSelection;
+          if (onChange && isFunction(onChange)) onChange(getSelectRowKeys(), getSelectRows());
+        }
+        //table行选择时卡顿明显 #503
+        if (unref(tableData).length > 0) {
+          emit('selection-change', {
+            keys: getSelectRowKeys(),
+            rows: getSelectRows(),
+          });
+        }
+      });
+    },
+    { deep: true }
+  );
+
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+
+  function setSelectedRowKeys(rowKeys: string[]) {
+    selectedRowKeysRef.value = rowKeys;
+    const allSelectedRows = findNodeAll(
+      toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
+      (item) => rowKeys.includes(item[unref(getRowKey) as string]),
+      {
+        children: propsRef.value.childrenColumnName ?? 'children',
+      }
+    );
+    const trueSelectedRows: any[] = [];
+    rowKeys.forEach((key: string) => {
+      const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key);
+      found && trueSelectedRows.push(found);
+    });
+    selectedRowRef.value = trueSelectedRows;
+  }
+
+  function setSelectedRows(rows: Recordable[]) {
+    selectedRowRef.value = rows;
+  }
+
+  function clearSelectedRowKeys() {
+    selectedRowRef.value = [];
+    selectedRowKeysRef.value = [];
+  }
+
+  function deleteSelectRowByKey(key: string) {
+    const selectedRowKeys = unref(selectedRowKeysRef);
+    const index = selectedRowKeys.findIndex((item) => item === key);
+    if (index !== -1) {
+      unref(selectedRowKeysRef).splice(index, 1);
+    }
+  }
+
+  function getSelectRowKeys() {
+    return unref(selectedRowKeysRef);
+  }
+
+  function getSelectRows<T = Recordable>() {
+    // const ret = toRaw(unref(selectedRowRef)).map((item) => toRaw(item));
+    return unref(selectedRowRef) as T[];
+  }
+
+  function getRowSelection() {
+    return unref(getRowSelectionRef)!;
+  }
+
+  return {
+    getRowSelection,
+    getRowSelectionRef,
+    getSelectRows,
+    getSelectRowKeys,
+    setSelectedRowKeys,
+    clearSelectedRowKeys,
+    deleteSelectRowByKey,
+    setSelectedRows,
+  };
+}
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
new file mode 100644
index 0000000..40575a3
--- /dev/null
+++ b/src/components/Table/src/hooks/useTable.ts
@@ -0,0 +1,168 @@
+import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import type { DynamicProps } from '/#/utils';
+import type { FormActionType } from '/@/components/Form';
+import type { WatchStopHandle } from 'vue';
+import { getDynamicProps } from '/@/utils';
+import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
+
+type Props = Partial<DynamicProps<BasicTableProps>>;
+
+type UseTableMethod = TableActionType & {
+  getForm: () => FormActionType;
+};
+
+export function useTable(tableProps?: Props): [
+  (instance: TableActionType, formInstance: UseTableMethod) => void,
+  TableActionType & {
+    getForm: () => FormActionType;
+  }
+] {
+  const tableRef = ref<Nullable<TableActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+  const formRef = ref<Nullable<UseTableMethod>>(null);
+
+  let stopWatch: WatchStopHandle;
+
+  function register(instance: TableActionType, formInstance: UseTableMethod) {
+    isProdMode() &&
+      onUnmounted(() => {
+        tableRef.value = null;
+        loadedRef.value = null;
+      });
+
+    if (unref(loadedRef) && isProdMode() && instance === unref(tableRef)) return;
+
+    tableRef.value = instance;
+    formRef.value = formInstance;
+    tableProps && instance.setProps(getDynamicProps(tableProps));
+    loadedRef.value = true;
+
+    stopWatch?.();
+
+    stopWatch = watch(
+      () => tableProps,
+      () => {
+        tableProps && instance.setProps(getDynamicProps(tableProps));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  function getTableInstance(): TableActionType {
+    const table = unref(tableRef);
+    if (!table) {
+      error('The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!');
+    }
+    return table as TableActionType;
+  }
+  
+  function getTableRef(){
+    return tableRef;
+  }
+
+  const methods: TableActionType & {
+    getForm: () => FormActionType;
+  } & {
+    getTableRef: () => any;
+  } = {
+    reload: async (opt?: FetchParams) => {
+      return await getTableInstance().reload(opt);
+    },
+    setProps: (props: Partial<BasicTableProps>) => {
+      getTableInstance().setProps(props);
+    },
+    redoHeight: () => {
+      getTableInstance().redoHeight();
+    },
+    setLoading: (loading: boolean) => {
+      getTableInstance().setLoading(loading);
+    },
+    getDataSource: () => {
+      return getTableInstance().getDataSource();
+    },
+    getRawDataSource: () => {
+      return getTableInstance().getRawDataSource();
+    },
+    getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
+      const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
+      return toRaw(columns);
+    },
+    setColumns: (columns: BasicColumn[]) => {
+      getTableInstance().setColumns(columns);
+    },
+    setTableData: (values: any[]) => {
+      return getTableInstance().setTableData(values);
+    },
+    setPagination: (info: Partial<PaginationProps>) => {
+      return getTableInstance().setPagination(info);
+    },
+    deleteSelectRowByKey: (key: string) => {
+      getTableInstance().deleteSelectRowByKey(key);
+    },
+    getSelectRowKeys: () => {
+      return toRaw(getTableInstance().getSelectRowKeys());
+    },
+    getSelectRows: () => {
+      return toRaw(getTableInstance().getSelectRows());
+    },
+    clearSelectedRowKeys: () => {
+      getTableInstance().clearSelectedRowKeys();
+    },
+    setSelectedRowKeys: (keys: string[] | number[]) => {
+      getTableInstance().setSelectedRowKeys(keys);
+    },
+    getPaginationRef: () => {
+      return getTableInstance().getPaginationRef();
+    },
+    getSize: () => {
+      return toRaw(getTableInstance().getSize());
+    },
+    updateTableData: (index: number, key: string, value: any) => {
+      return getTableInstance().updateTableData(index, key, value);
+    },
+    deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => {
+      return getTableInstance().deleteTableDataRecord(rowKey);
+    },
+    insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
+      return getTableInstance().insertTableDataRecord(record, index);
+    },
+    updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
+      return getTableInstance().updateTableDataRecord(rowKey, record);
+    },
+    findTableDataRecord: (rowKey: string | number) => {
+      return getTableInstance().findTableDataRecord(rowKey);
+    },
+    getRowSelection: () => {
+      return toRaw(getTableInstance().getRowSelection());
+    },
+    getCacheColumns: () => {
+      return toRaw(getTableInstance().getCacheColumns());
+    },
+    getForm: () => {
+      return unref(formRef) as unknown as FormActionType;
+    },
+    setShowPagination: async (show: boolean) => {
+      getTableInstance().setShowPagination(show);
+    },
+    getShowPagination: () => {
+      return toRaw(getTableInstance().getShowPagination());
+    },
+    expandAll: () => {
+      getTableInstance().expandAll();
+    },
+    collapseAll: () => {
+      getTableInstance().collapseAll();
+    },
+    getTableRef: () => {
+      return getTableRef();
+    }
+  };
+
+  return [register, methods];
+}
diff --git a/src/components/Table/src/hooks/useTableContext.ts b/src/components/Table/src/hooks/useTableContext.ts
new file mode 100644
index 0000000..7ea141c
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableContext.ts
@@ -0,0 +1,33 @@
+import type { Ref } from 'vue';
+import type { BasicTableProps, TableActionType } from '../types/table';
+import { provide, inject, ComputedRef } from 'vue';
+
+// 为每个表格实例创建唯一的 Symbol key，避免父子组件或同级组件间的 context 冲突
+// Vue 的 provide/inject 是按组件树传递的，使用唯一 Symbol 可以确保每个 BasicTable 实例独立
+let tableIdCounter = 0;
+
+type Instance = TableActionType & {
+  wrapRef: Ref<Nullable<HTMLElement>>;
+  getBindValues: ComputedRef<Recordable>;
+};
+
+type RetInstance = Omit<Instance, 'getBindValues'> & {
+  getBindValues: ComputedRef<BasicTableProps>;
+};
+
+export function createTableContext(instance: Instance) {
+  // 每次创建 context 时都生成新的唯一 Symbol
+  const key = Symbol(`basic-table-${++tableIdCounter}`);
+  provide(key, instance);
+  // 同时提供一个内部标记，让子组件能获取到这个 key
+  provide('__BASIC_TABLE_CONTEXT_KEY__', key);
+}
+
+export function useTableContext(): RetInstance {
+  // 从最近的父组件获取 context key
+  const key = inject<symbol>('__BASIC_TABLE_CONTEXT_KEY__');
+  if (!key) {
+    throw new Error('useTableContext must be used after createTableContext');
+  }
+  return inject(key) as RetInstance;
+}
diff --git a/src/components/Table/src/hooks/useTableExpand.ts b/src/components/Table/src/hooks/useTableExpand.ts
new file mode 100644
index 0000000..96bd3e0
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableExpand.ts
@@ -0,0 +1,61 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import { computed, unref, ref, toRaw, watch } from 'vue';
+import { ROW_KEY } from '../const';
+
+export function useTableExpand(propsRef: ComputedRef<BasicTableProps>, tableData: Ref<Recordable[]>, emit: EmitType) {
+  const expandedRowKeys = ref<string[]>([]);
+
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+
+  const getExpandOption = computed(() => {
+    const { isTreeTable } = unref(propsRef);
+    if (!isTreeTable) return {};
+
+    return {
+      expandedRowKeys: unref(expandedRowKeys),
+      onExpandedRowsChange: (keys: string[]) => {
+        expandedRowKeys.value = keys;
+        emit('expanded-rows-change', keys);
+      },
+    };
+  });
+
+  // 监听并同步props中的expandedRowKeys
+  watch(() => propsRef.value?.expandedRowKeys, (keys) => {
+    if (Array.isArray(keys)) {
+      expandedRowKeys.value = keys;
+    }
+  }, {immediate: true});
+
+  function expandAll() {
+    const keys = getAllKeys();
+    expandedRowKeys.value = keys;
+  }
+
+  function getAllKeys(data?: Recordable[]) {
+    const keys: string[] = [];
+    const { childrenColumnName } = unref(propsRef);
+    toRaw(data || unref(tableData)).forEach((item) => {
+      keys.push(item[unref(getRowKey) as string]);
+      const children = item[childrenColumnName || 'children'];
+      if (children?.length) {
+        keys.push(...getAllKeys(children));
+      }
+    });
+    return keys;
+  }
+
+  function collapseAll() {
+    expandedRowKeys.value = [];
+  }
+
+  return { getExpandOption, expandAll, collapseAll };
+}
diff --git a/src/components/Table/src/hooks/useTableFooter.ts b/src/components/Table/src/hooks/useTableFooter.ts
new file mode 100644
index 0000000..bb82847
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableFooter.ts
@@ -0,0 +1,71 @@
+import type { ComputedRef, Ref, Slots } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import { unref, computed, h, nextTick, watchEffect } from 'vue';
+import TableFooter from '../components/TableFooter.vue';
+import { useEventListener } from '/@/hooks/event/useEventListener';
+
+export function useTableFooter(
+  propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
+  scrollRef: ComputedRef<{
+    x: string | number | true;
+    y: Nullable<number>;
+    scrollToFirstRowOnChange: boolean;
+  }>,
+  tableElRef: Ref<ComponentRef>,
+  getDataSourceRef: ComputedRef<Recordable>
+) {
+  const getIsEmptyData = computed(() => {
+    return (unref(getDataSourceRef) || []).length === 0;
+  });
+
+  // 是否有展开行
+  const hasExpandedRow = computed(() => Object.keys(slots).includes('expandedRowRender'))
+
+  const getFooterProps = computed((): Recordable | undefined => {
+    const { summaryFunc, showSummary, summaryData, bordered } = unref(propsRef);
+    return showSummary && !unref(getIsEmptyData) ? () => h(TableFooter, {
+      bordered,
+      summaryFunc,
+      summaryData,
+      scroll: unref(scrollRef),
+      hasExpandedRow: hasExpandedRow.value
+    }) : undefined;
+  });
+
+  watchEffect(() => {
+    handleSummary();
+  });
+
+  function handleSummary() {
+    const { showSummary, canResize } = unref(propsRef);
+    if (!showSummary || unref(getIsEmptyData)) return;
+    nextTick(() => {
+      const tableEl = unref(tableElRef);
+      if (!tableEl) return;
+      let bodyDom;
+      // 代码逻辑说明: 【issues/7422】BasicTable列表canResize属性为true时合计行不能横向滚动
+      if (canResize) {
+        setTimeout(() => {
+          bodyDom = tableEl.$el.querySelector('.ant-table-body');
+        }, 0);
+      } else {
+        bodyDom = tableEl.$el.querySelector('.ant-table-content');
+      }
+      setTimeout(() => {
+        useEventListener({
+          el: bodyDom,
+          name: 'scroll',
+          listener: () => {
+            const footerBodyDom = tableEl.$el.querySelector('.ant-table-footer .ant-table-content') as HTMLDivElement;
+            if (!footerBodyDom || !bodyDom) return;
+            footerBodyDom.scrollLeft = bodyDom.scrollLeft;
+          },
+          wait: 0,
+          options: true,
+        });
+      }, 0);
+    });
+  }
+  return { getFooterProps };
+}
diff --git a/src/components/Table/src/hooks/useTableForm.ts b/src/components/Table/src/hooks/useTableForm.ts
new file mode 100644
index 0000000..1ad738d
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableForm.ts
@@ -0,0 +1,50 @@
+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps, FetchParams } from '../types/table';
+import { unref, computed } from 'vue';
+import type { FormProps } from '/@/components/Form';
+import { isFunction } from '/@/utils/is';
+
+export function useTableForm(
+  propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
+  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  getLoading: ComputedRef<boolean | undefined>
+) {
+  const getFormProps = computed((): Partial<FormProps> => {
+    const { formConfig } = unref(propsRef);
+    const { submitButtonOptions, autoSubmitOnEnter} = formConfig || {};
+    return {
+      showAdvancedButton: true,
+      ...formConfig,
+      submitButtonOptions: { loading: unref(getLoading), ...submitButtonOptions },
+      compact: true,
+      // 代码逻辑说明: [issues/568]设置 autoSubmitOnEnter: false 不生效 ---
+      autoSubmitOnEnter: autoSubmitOnEnter,
+    };
+  });
+
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
+    const keys = Object.keys(slots);
+    return keys.map((item) => (item.startsWith('form-') ? item : null)).filter((item) => !!item) as string[];
+  });
+
+  function replaceFormSlotKey(key: string) {
+    if (!key) return '';
+    return key?.replace?.(/form\-/, '') ?? '';
+  }
+
+  function handleSearchInfoChange(info: Recordable) {
+    const { handleSearchInfoFn } = unref(propsRef);
+    if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
+      info = handleSearchInfoFn(info) || info;
+    }
+    fetch({ searchInfo: info, page: 1 });
+  }
+
+  return {
+    getFormProps,
+    replaceFormSlotKey,
+    getFormSlotKeys,
+    handleSearchInfoChange,
+  };
+}
diff --git a/src/components/Table/src/hooks/useTableHeader.ts b/src/components/Table/src/hooks/useTableHeader.ts
new file mode 100644
index 0000000..597b5ec
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableHeader.ts
@@ -0,0 +1,58 @@
+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps, InnerHandlers } from '../types/table';
+import { unref, computed, h } from 'vue';
+import TableHeader from '../components/TableHeader.vue';
+import { isString } from '/@/utils/is';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+
+export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Slots, handlers: InnerHandlers) {
+  const getHeaderProps = computed((): Recordable => {
+    const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
+    const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting;
+    if (hideTitle && !isString(title)) {
+      return {};
+    }
+
+    return {
+      title: hideTitle
+        ? null
+        : () =>
+            h(
+              TableHeader,
+              {
+                title,
+                titleHelpMessage,
+                showTableSetting,
+                tableSetting,
+                onColumnsChange: handlers.onColumnsChange,
+              } as Recordable,
+              {
+                ...(slots.toolbar
+                  ? {
+                      toolbar: () => getSlot(slots, 'toolbar'),
+                    }
+                  : {}),
+                ...(slots.tableTitle
+                  ? {
+                      tableTitle: () => getSlot(slots, 'tableTitle'),
+                    }
+                  : {}),
+                ...(slots.headerTop
+                  ? {
+                      headerTop: () => getSlot(slots, 'headerTop'),
+                    }
+                  : {}),
+                //添加tableTop插槽
+                ...(slots.tableTop
+                  ? {
+                      tableTop: () => getSlot(slots, 'tableTop'),
+                    }
+                  : {}),
+                // 添加alertAfter插槽
+                ...(slots.alertAfter ? { alertAfter: () => getSlot(slots, 'alertAfter') } : {}),
+              }
+            ),
+    };
+  });
+  return { getHeaderProps };
+}
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
new file mode 100644
index 0000000..8d3869e
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableScroll.ts
@@ -0,0 +1,235 @@
+import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table';
+import type { Ref, ComputedRef, Slots } from 'vue';
+import { computed, unref, ref, nextTick, watch } from 'vue';
+import { getViewportOffset } from '/@/utils/domUtils';
+import { isBoolean } from '/@/utils/is';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { useModalContext } from '/@/components/Modal';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { useDebounceFn } from '@vueuse/core';
+import componentSetting from '/@/settings/componentSetting';
+
+export function useTableScroll(
+  propsRef: ComputedRef<BasicTableProps>,
+  tableElRef: Ref<ComponentRef>,
+  columnsRef: ComputedRef<BasicColumn[]>,
+  rowSelectionRef: ComputedRef<TableRowSelection<any> | null>,
+  getDataSourceRef: ComputedRef<Recordable[]>,
+  slots: Slots,
+  getPaginationInfo: ComputedRef<any>
+) {
+  const tableHeightRef: Ref<Nullable<number>> = ref(null);
+
+  const modalFn = useModalContext();
+
+  // Greater than animation time 280
+  const debounceRedoHeight = useDebounceFn(redoHeight, 100);
+
+  const getCanResize = computed(() => {
+    const { canResize, scroll } = unref(propsRef);
+    return canResize && !(scroll || {}).y;
+  });
+
+  watch(
+    () => [unref(getCanResize), unref(getDataSourceRef)?.length],
+    () => {
+      debounceRedoHeight();
+    },
+    {
+      flush: 'post',
+    }
+  );
+
+  function redoHeight() {
+    nextTick(() => {
+      calcTableHeight();
+    });
+  }
+
+  function setHeight(heigh: number) {
+    tableHeightRef.value = heigh;
+    //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+    modalFn?.redoModalHeight?.();
+  }
+
+  // No need to repeat queries
+  let paginationEl: HTMLElement | null;
+  let footerEl: HTMLElement | null;
+  let bodyEl: HTMLElement | null;
+
+  async function calcTableHeight() {
+    const { resizeHeightOffset, pagination, maxHeight, minHeight } = unref(propsRef);
+    const tableData = unref(getDataSourceRef);
+
+    const table = unref(tableElRef);
+    if (!table) return;
+
+    const tableEl: Element = table.$el;
+    if (!tableEl) return;
+
+    if (!bodyEl) {
+      // 代码逻辑说明: issues/355 前端-jeecgboot-vue3 3.4.4版本,BasicTable高度自适应功能失效,设置BasicTable组件maxHeight失效; 原因已找到,请看详情
+      bodyEl = tableEl.querySelector('.ant-table-tbody');
+      if (!bodyEl) return;
+    }
+
+    const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
+    const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
+
+    if (hasScrollBarY) {
+      tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.remove('hide-scrollbar-y');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y');
+    }
+
+    if (hasScrollBarX) {
+      tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.remove('hide-scrollbar-x');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
+    }
+
+    bodyEl!.style.height = 'unset';
+
+    if (!unref(getCanResize) || ( !tableData || tableData.length === 0)) return;
+
+    await nextTick();
+    //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
+
+    const headEl = tableEl.querySelector('.ant-table-thead');
+
+    if (!headEl) return;
+
+    // Table height from bottom
+    const { bottomIncludeBody } = getViewportOffset(headEl);
+    // Table height from bottom height-custom offset
+
+    const paddingHeight = 32;
+    // Pager height
+    let paginationHeight = 2;
+    // 【issues/9217】当配置了pagination: true时,BasicTable组件自适应高度异常
+    if (pagination !== false) {
+      paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
+      if (paginationEl) {
+        const offsetHeight = paginationEl.offsetHeight;
+        paginationHeight += offsetHeight || 0;
+      } else {
+        // TODO First fix 24
+        paginationHeight += 24;
+      }
+    } else {
+      paginationHeight = -8;
+    }
+
+    let footerHeight = 0;
+    // 代码逻辑说明: 【issues/1137】BasicTable自适应高度计算没有减去尾部高度
+    footerEl = tableEl.querySelector('.ant-table-footer');
+    if (footerEl) {
+      const offsetHeight = footerEl.offsetHeight;
+      footerHeight = offsetHeight || 0;
+    }
+
+    let headerHeight = 0;
+    if (headEl) {
+      headerHeight = (headEl as HTMLElement).offsetHeight;
+    }
+
+    let height = bottomIncludeBody - (resizeHeightOffset || 0) - paddingHeight - paginationHeight - footerHeight - headerHeight;
+    // update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
+    // 10+6(外层边距padding:10 + 内层padding-bottom:6)
+    height -= 16;
+    // 代码逻辑说明: 【issues/8880】BasicTable组件在modal中适应高度
+    try {
+      // 当BasicTable在BasicModal容器中时,扣减容器底部高度
+      const modalFooter = tableEl.closest('.ant-modal-root')?.querySelector('.ant-modal-footer');
+      if (modalFooter) {
+        const { bottomIncludeBody: modalFooterHeight } = getViewportOffset(modalFooter);
+        height = height - modalFooterHeight;
+      }
+    } catch (e) {}
+    height = (height < minHeight! ? (minHeight as number) : height) ?? height;
+    height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
+    setHeight(height);
+
+    bodyEl!.style.height = `${height}px`;
+    // update-begin--author:liaozhiyang---date:20240609---for【issues/8374】分页始终显示在底部
+    nextTick(() => {
+      if (maxHeight === undefined) {
+        if (unref(getPaginationInfo) && unref(getDataSourceRef).length) {
+          const pageSize = unref(getPaginationInfo)?.pageSize;
+          const current = unref(getPaginationInfo)?.current;
+          const total = unref(getPaginationInfo)?.total;
+          const tableBody = tableEl.querySelector('.ant-table-body') as HTMLElement;
+          const tr = tableEl.querySelector('.ant-table-tbody')?.children ?? [];
+          const lastrEl = tr[tr.length - 1] as HTMLElement;
+          const trHeight = lastrEl.offsetHeight;
+          const dataHeight = trHeight * pageSize;
+          if (tableBody && lastrEl) {
+            // table是否隐藏（隐藏的table不能吸底）
+            const isTableBodyHide = tableBody.offsetHeight == 0 && tableBody.offsetWidth == 0;
+            if (isTableBodyHide) {
+              return;
+            }
+            if (current === 1 && pageSize > unref(getDataSourceRef).length && total <= pageSize) {
+              tableBody.style.height = `${height}px`;
+            } else {
+              tableBody.style.height = `${dataHeight < height ? dataHeight : height}px`;
+            }
+          }
+        }
+      }
+    });
+    // update-end--author:liaozhiyang---date:20240609---for【issues/8374】分页始终显示在底部
+  }
+  useWindowSizeFn(calcTableHeight, 280);
+  onMountedOrActivated(() => {
+    calcTableHeight();
+    nextTick(() => {
+      debounceRedoHeight();
+    });
+  });
+
+  const getScrollX = computed(() => {
+    let width = 0;
+    // if (unref(rowSelectionRef)) {
+    //   width += 60;
+    // }
+    // 代码逻辑说明: 【issues/5411】BasicTable 配置maxColumnWidth 未生效
+    const { maxColumnWidth } = unref(propsRef);
+    // TODO props ?? 0;
+    const NORMAL_WIDTH = maxColumnWidth ?? 150;
+    // date-begin--author:liaozhiyang---date:20250716---for：【QQYUN-13122】有数十个字段时只展示2个字段，其余字段为ifShow:false会有滚动条
+    const columns = unref(columnsRef).filter((item) => !(item.defaultHidden == true || item.ifShow == false))
+    // date-end--author:liaozhiyang---date:20250716---for：【QQYUN-13122】有数十个字段时只展示2个字段，其余字段为ifShow:false会有滚动条
+    columns.forEach((item) => {
+      width += Number.parseInt(item.width as string) || 0;
+    });
+    const unsetWidthColumns = columns.filter((item) => !Reflect.has(item, 'width'));
+
+    const len = unsetWidthColumns.length;
+    if (len !== 0) {
+      width += len * NORMAL_WIDTH;
+    }
+    // 代码逻辑说明: 【TV360X-116】内嵌风格字段较多时表格错位
+    if (slots.expandedRowRender) {
+      width += propsRef.value.expandColumnWidth;
+    }
+    const table = unref(tableElRef);
+    const tableWidth = table?.$el?.offsetWidth ?? 0;
+    return tableWidth > width ? '100%' : width;
+  });
+
+  const getScrollRef = computed(() => {
+    const tableHeight = unref(tableHeightRef);
+    const { canResize, scroll } = unref(propsRef);
+    const { table } = componentSetting;
+    return {
+      x: unref(getScrollX),
+      y: canResize ? tableHeight : null,
+      // 代码逻辑说明: 【issues/1188】BasicTable加上scrollToFirstRowOnChange类型定义
+      scrollToFirstRowOnChange: table.scrollToFirstRowOnChange,
+      ...scroll,
+    };
+  });
+
+  return { getScrollRef, redoHeight };
+}
diff --git a/src/components/Table/src/hooks/useTableStyle.ts b/src/components/Table/src/hooks/useTableStyle.ts
new file mode 100644
index 0000000..4a0a752
--- /dev/null
+++ b/src/components/Table/src/hooks/useTableStyle.ts
@@ -0,0 +1,56 @@
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps, TableCustomRecord } from '../types/table';
+import { unref } from 'vue';
+import { isFunction } from '/@/utils/is';
+import { ROW_KEY } from '/@/components/Table/src/const';
+
+export function useTableStyle(propsRef: ComputedRef<BasicTableProps>, prefixCls: string) {
+  /**
+   * 2024-09-19
+   * liaozhiyang
+   * 【issues/7200】basicTable选中后没有选中样式
+   * */
+  const isChecked = (propsRef, record) => {
+    const getAutoCreateKey = () => {
+      return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+    };
+    const getRowKey = () => {
+      const { rowKey } = unref(propsRef);
+      return getAutoCreateKey() ? ROW_KEY : rowKey;
+    };
+    // 获取行的key字段数据
+    const getRecordKey = (record) => {
+      const key = getRowKey();
+      if (!key) {
+        return record[ROW_KEY];
+      } else if (isFunction(key)) {
+        return key(record);
+      } else {
+        return record[key];
+      }
+    };
+    const { rowSelection } = unref(propsRef);
+    if (rowSelection?.selectedRowKeys?.length) {
+      return rowSelection.selectedRowKeys.includes(getRecordKey(record));
+    }
+    return false;
+  };
+
+  function getRowClassName(record: TableCustomRecord, index: number) {
+    const { striped, rowClassName } = unref(propsRef);
+    const classNames: string[] = [];
+    if (striped) {
+      classNames.push((index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : '');
+    }
+    if (rowClassName && isFunction(rowClassName)) {
+      classNames.push(rowClassName(record, index));
+    }
+    // 代码逻辑说明: 【issues/7200】basicTable选中后没有选中样式
+    if (isChecked(propsRef, record)) {
+      classNames.push('ant-table-row-selected');
+    }
+    return classNames.filter((cls) => !!cls).join(' ');
+  }
+
+  return { getRowClassName };
+}
diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts
new file mode 100644
index 0000000..337859f
--- /dev/null
+++ b/src/components/Table/src/props.ts
@@ -0,0 +1,148 @@
+import type { PropType } from 'vue';
+import type { PaginationProps } from './types/pagination';
+import type { BasicColumn, FetchSetting, TableSetting, SorterResult, TableCustomRecord, TableRowSelection, SizeType } from './types/table';
+import type { FormProps } from '/@/components/Form';
+import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
+import { propTypes } from '/@/utils/propTypes';
+
+export const basicProps = {
+  clickToRowSelect: propTypes.bool.def(true),
+  isTreeTable: propTypes.bool.def(false),
+  tableSetting: propTypes.shape<TableSetting>({}),
+  inset: propTypes.bool,
+  sortFn: {
+    type: Function as PropType<(sortInfo: SorterResult) => any>,
+    default: DEFAULT_SORT_FN,
+  },
+  filterFn: {
+    type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
+    default: DEFAULT_FILTER_FN,
+  },
+  showTableSetting: propTypes.bool,
+  autoCreateKey: propTypes.bool.def(true),
+  striped: propTypes.bool.def(false),
+  showSummary: propTypes.bool,
+  summaryFunc: {
+    type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
+    default: null,
+  },
+  summaryData: {
+    type: Array as PropType<Recordable[]>,
+    default: null,
+  },
+  indentSize: propTypes.number.def(24),
+  canColDrag: propTypes.bool.def(true),
+  api: {
+    type: Function as PropType<(...arg: any[]) => Promise<any>>,
+    default: null,
+  },
+  beforeFetch: {
+    type: Function as PropType<Fn>,
+    default: null,
+  },
+  afterFetch: {
+    type: Function as PropType<Fn>,
+    default: null,
+  },
+  handleSearchInfoFn: {
+    type: Function as PropType<Fn>,
+    default: null,
+  },
+  fetchSetting: {
+    type: Object as PropType<FetchSetting>,
+    default: () => {
+      return FETCH_SETTING;
+    },
+  },
+  // 立即请求接口
+  immediate: propTypes.bool.def(true),
+  emptyDataIsShowTable: propTypes.bool.def(true),
+  // 额外的请求参数
+  searchInfo: {
+    type: Object as PropType<Recordable>,
+    default: null,
+  },
+  // 默认的排序参数
+  defSort: {
+    type: Object as PropType<Recordable>,
+    default: null,
+  },
+  // 使用搜索表单
+  useSearchForm: propTypes.bool,
+  // 表单配置
+  formConfig: {
+    type: Object as PropType<Partial<FormProps>>,
+    default: null,
+  },
+  columns: {
+    type: [Array] as PropType<BasicColumn[]>,
+    default: () => [],
+  },
+  showIndexColumn: propTypes.bool.def(true),
+  indexColumnProps: {
+    type: Object as PropType<BasicColumn>,
+    default: null,
+  },
+  showActionColumn: {
+    type: Boolean,
+    default: true,
+  },
+  actionColumn: {
+    type: Object as PropType<BasicColumn>,
+    default: null,
+  },
+  ellipsis: propTypes.bool.def(true),
+  canResize: propTypes.bool.def(true),
+  clearSelectOnPageChange: propTypes.bool,
+  resizeHeightOffset: propTypes.number.def(0),
+  rowSelection: {
+    type: Object as PropType<TableRowSelection | null>,
+    default: null,
+  },
+  title: {
+    type: [String, Function] as PropType<string | ((data: Recordable) => string)>,
+    default: null,
+  },
+  titleHelpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  minHeight: propTypes.number,
+  maxHeight: propTypes.number,
+  // 代码逻辑说明: 【TV360X-116】内嵌风格字段较多时表格错位
+  expandColumnWidth: propTypes.number.def(48),
+  // 统一设置列最大宽度
+  maxColumnWidth: propTypes.number,
+  dataSource: {
+    type: Array as PropType<Recordable[]>,
+    default: null,
+  },
+  rowKey: {
+    type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
+    default: '',
+  },
+  bordered: propTypes.bool,
+  pagination: {
+    type: [Object, Boolean] as PropType<PaginationProps | boolean>,
+    default: null,
+  },
+  loading: propTypes.bool,
+  rowClassName: {
+    type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
+  },
+  scroll: {
+    // 代码逻辑说明: 【issues/1188】BasicTable加上scrollToFirstRowOnChange类型定义
+    type: Object as PropType<{ x?: number | true; y?: number; scrollToFirstRowOnChange?: boolean }>,
+    default: null,
+  },
+  beforeEditSubmit: {
+    type: Function as PropType<(data: { record: Recordable; index: number; key: string | number; value: any }) => Promise<any>>,
+  },
+  size: {
+    type: String as PropType<SizeType>,
+    default: DEFAULT_SIZE,
+  },
+  expandedRowKeys: {
+    type: Array,
+    default: null,
+  },
+};
diff --git a/src/components/Table/src/types/column.ts b/src/components/Table/src/types/column.ts
new file mode 100644
index 0000000..67a7194
--- /dev/null
+++ b/src/components/Table/src/types/column.ts
@@ -0,0 +1,197 @@
+import { VNodeChild } from 'vue';
+
+export interface ColumnFilterItem {
+  text?: string;
+  value?: string;
+  children?: any;
+}
+
+export declare type SortOrder = 'ascend' | 'descend';
+
+export interface RecordProps<T> {
+  text: any;
+  record: T;
+  index: number;
+}
+
+export interface FilterDropdownProps {
+  prefixCls?: string;
+  setSelectedKeys?: (selectedKeys: string[]) => void;
+  selectedKeys?: string[];
+  confirm?: () => void;
+  clearFilters?: () => void;
+  filters?: ColumnFilterItem[];
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  visible?: boolean;
+}
+
+export declare type CustomRenderFunction<T> = (record: RecordProps<T>) => VNodeChild | JSX.Element;
+
+export interface ColumnProps<T> {
+  /**
+   * specify how content is aligned
+   * @default 'left'
+   * @type string
+   */
+  align?: 'left' | 'right' | 'center';
+
+  /**
+   * ellipsize cell content, not working with sorter and filters for now.
+   * tableLayout would be fixed when ellipsis is true.
+   * @default false
+   * @type boolean
+   */
+  ellipsis?: boolean;
+
+  /**
+   * Span of this column's title
+   * @type number
+   */
+  colSpan?: number;
+
+  /**
+   * Display field of the data record, could be set like a.b.c
+   * @type string
+   */
+  dataIndex?: string;
+
+  /**
+   * Default filtered values
+   * @type string[]
+   */
+  defaultFilteredValue?: string[];
+
+  /**
+   * Default order of sorted values: 'ascend' 'descend' null
+   * @type string
+   */
+  defaultSortOrder?: SortOrder;
+
+  /**
+   * Customized filter overlay
+   * @type any (slot)
+   */
+  filterDropdown?: VNodeChild | JSX.Element | ((props: FilterDropdownProps) => VNodeChild | JSX.Element);
+
+  /**
+   * Whether filterDropdown is visible
+   * @type boolean
+   */
+  filterDropdownOpen?: boolean;
+
+  /**
+   * Whether the dataSource is filtered
+   * @default false
+   * @type boolean
+   */
+  filtered?: boolean;
+
+  /**
+   * Controlled filtered value, filter icon will highlight
+   * @type string[]
+   */
+  filteredValue?: string[];
+
+  /**
+   * Customized filter icon
+   * @default false
+   * @type any
+   */
+  filterIcon?: boolean | VNodeChild | JSX.Element;
+
+  /**
+   * Whether multiple filters can be selected
+   * @default true
+   * @type boolean
+   */
+  filterMultiple?: boolean;
+
+  /**
+   * Filter menu config
+   * @type object[]
+   */
+  filters?: ColumnFilterItem[];
+
+  /**
+   * Set column to be fixed: true(same as left) 'left' 'right'
+   * @default false
+   * @type boolean | string
+   */
+  fixed?: boolean | 'left' | 'right';
+
+  /**
+   * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
+   * @type string
+   */
+  key?: string;
+
+  /**
+   * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
+   * @type Function | ScopedSlot
+   */
+  customRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element;
+
+  /**
+   * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
+   * @type boolean | Function
+   */
+  sorter?: boolean | Function;
+
+  /**
+   * Order of sorted values: 'ascend' 'descend' false
+   * @type boolean | string
+   */
+  sortOrder?: boolean | SortOrder;
+
+  /**
+   * supported sort way, could be 'ascend', 'descend'
+   * @default ['ascend', 'descend']
+   * @type string[]
+   */
+  sortDirections?: SortOrder[];
+
+  /**
+   * Title of this column
+   * @type any (string | slot)
+   */
+  title?: VNodeChild | JSX.Element;
+
+  /**
+   * Width of this column
+   * @type string | number
+   */
+  width?: string | number;
+
+  /**
+   * Set props on per cell
+   * @type Function
+   */
+  customCell?: (record: T, rowIndex: number) => object;
+
+  /**
+   * Set props on per header cell
+   * @type object
+   */
+  customHeaderCell?: (column: ColumnProps<T>) => object;
+  // 代码逻辑说明: 【pull/1201】添加antd的TableSummary功能兼容老的summary（表尾合计）
+  customSummaryRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element;
+
+  /**
+   * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
+   * @type Function
+   */
+  onFilter?: (value: any, record: T) => boolean;
+
+  /**
+   * Callback executed when filterDropdownOpen is changed, Use as a filterDropdownVisible event when using template or jsx
+   * @type Function
+   */
+  onFilterDropdownVisibleChange?: (visible: boolean) => void;
+
+  /**
+   * When using columns, you can setting this property to configure the properties that support the slot,
+   * such as slots: { filterIcon: 'XXX'}
+   * @type object
+   */
+  slots?: Recordable<string>;
+}
diff --git a/src/components/Table/src/types/componentType.ts b/src/components/Table/src/types/componentType.ts
new file mode 100644
index 0000000..6e66af6
--- /dev/null
+++ b/src/components/Table/src/types/componentType.ts
@@ -0,0 +1 @@
+export type ComponentType = 'Input' | 'InputNumber' | 'Select' | 'ApiSelect' | 'ApiTreeSelect' | 'Checkbox' | 'Switch' | 'DatePicker' | 'TimePicker';
diff --git a/src/components/Table/src/types/pagination.ts b/src/components/Table/src/types/pagination.ts
new file mode 100644
index 0000000..fbaae05
--- /dev/null
+++ b/src/components/Table/src/types/pagination.ts
@@ -0,0 +1,106 @@
+import Pagination from 'ant-design-vue/lib/pagination';
+import { VNodeChild } from 'vue';
+
+interface PaginationRenderProps {
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
+}
+
+type Position = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+
+export declare class PaginationConfig extends Pagination {
+  position?: 'top' | 'bottom' | 'both';
+}
+export interface PaginationProps {
+  /**
+   * total number of data items
+   * @default 0
+   * @type number
+   */
+  total?: number;
+
+  /**
+   * default initial page number
+   * @default 1
+   * @type number
+   */
+  defaultCurrent?: number;
+
+  /**
+   * current page number
+   * @type number
+   */
+  current?: number;
+
+  /**
+   * default number of data items per page
+   * @default 10
+   * @type number
+   */
+  defaultPageSize?: number;
+
+  /**
+   * number of data items per page
+   * @type number
+   */
+  pageSize?: number;
+
+  /**
+   * Whether to hide pager on single page
+   * @default false
+   * @type boolean
+   */
+  hideOnSinglePage?: boolean;
+
+  /**
+   * determine whether pageSize can be changed
+   * @default false
+   * @type boolean
+   */
+  showSizeChanger?: boolean;
+
+  /**
+   * specify the sizeChanger options
+   * @default ['10', '20', '30', '40']
+   * @type string[]
+   */
+  pageSizeOptions?: string[];
+
+  /**
+   * determine whether you can jump to pages directly
+   * @default false
+   * @type boolean
+   */
+  showQuickJumper?: boolean | object;
+
+  /**
+   * to display the total number and range
+   * @type Function
+   */
+  showTotal?: (total: number, range: [number, number]) => any;
+
+  /**
+   * specify the size of Pagination, can be set to small
+   * @default ''
+   * @type string
+   */
+  size?: string;
+
+  /**
+   * whether to setting simple mode
+   * @type boolean
+   */
+  simple?: boolean;
+
+  /**
+   * to customize item innerHTML
+   * @type Function
+   */
+  itemRender?: (props: PaginationRenderProps) => VNodeChild | JSX.Element;
+  /**
+   * specify the position of Pagination
+   * @type Position[]
+   */
+  position?: Position[];
+}
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
new file mode 100644
index 0000000..10de405
--- /dev/null
+++ b/src/components/Table/src/types/table.ts
@@ -0,0 +1,490 @@
+import type { VNodeChild, ComputedRef } from 'vue';
+import type { PaginationProps } from './pagination';
+import type { FormProps } from '/@/components/Form';
+import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface';
+import type { ColumnProps } from 'ant-design-vue/lib/table';
+
+import { ComponentType } from './componentType';
+import { VueNode } from '/@/utils/propTypes';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+export declare type SortOrder = 'ascend' | 'descend';
+
+export interface TableCurrentDataSource<T = Recordable> {
+  currentDataSource: T[];
+}
+
+export interface TableRowSelection<T = any> extends ITableRowSelection {
+  /**
+   * Callback executed when selected rows change
+   * @type Function
+   */
+  onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
+
+  /**
+   * Callback executed when select/deselect one row
+   * @type Function
+   */
+  onSelect?: (record: T, selected: boolean, selectedRows: Object[]) => any;
+
+  /**
+   * Callback executed when select/deselect all rows
+   * @type Function
+   */
+  onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any;
+
+  /**
+   * Callback executed when row selection is inverted
+   * @type Function
+   */
+  onSelectInvert?: (selectedRows: string[] | number[]) => any;
+  //【issues/8163】关联记录新增丢失
+  selectedRows?: any[];
+}
+
+export interface TableCustomRecord<T> {
+  record?: T;
+  index?: number;
+}
+
+export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> {
+  indent?: number;
+  expanded?: boolean;
+}
+
+export interface ColumnFilterItem {
+  text?: string;
+  value?: string;
+  children?: any;
+}
+
+export interface TableCustomRecord<T = Recordable> {
+  record?: T;
+  index?: number;
+}
+
+export interface SorterResult {
+  column: ColumnProps;
+  order: SortOrder;
+  field: string;
+  columnKey: string;
+}
+
+export interface FetchParams {
+  searchInfo?: Recordable;
+  page?: number;
+  sortInfo?: Recordable;
+  filterInfo?: Recordable;
+}
+
+export interface GetColumnsParams {
+  ignoreIndex?: boolean;
+  ignoreAction?: boolean;
+  // 代码逻辑说明: 【issues/8502】解决权限列在列表中不显示，列配置中还显示
+  ignoreAuth?: boolean;
+  ignoreIfShow?: boolean | ((column: BasicColumn) => boolean);
+  sort?: boolean;
+}
+
+export type SizeType = 'middle' | 'small' | 'large';
+
+export interface TableActionType {
+  reload: (opt?: FetchParams) => Promise<void>;
+  getSelectRows: <T = Recordable>() => T[];
+  clearSelectedRowKeys: () => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  getSelectRowKeys: () => string[];
+  deleteSelectRowByKey: (key: string) => void;
+  setPagination: (info: Partial<PaginationProps>) => void;
+  setTableData: <T = Recordable>(values: T[]) => void;
+  updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
+  deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => void;
+  insertTableDataRecord: (record: Recordable, index?: number) => Recordable | void;
+  findTableDataRecord: (rowKey: string | number) => Recordable | void;
+  getColumns: (opt?: GetColumnsParams) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
+  getDataSource: <T = Recordable>() => T[];
+  getRawDataSource: <T = Recordable>() => T;
+  setLoading: (loading: boolean) => void;
+  setProps: (props: Partial<BasicTableProps>) => void;
+  redoHeight: () => void;
+  setSelectedRowKeys: (rowKeys: string[] | number[]) => void;
+  getPaginationRef: () => PaginationProps | boolean;
+  getSize: () => SizeType;
+  getRowSelection: () => TableRowSelection<Recordable>;
+  getCacheColumns: () => BasicColumn[];
+  emit?: EmitType;
+  updateTableData: (index: number, key: string, value: any) => Recordable;
+  setShowPagination: (show: boolean) => Promise<void>;
+  getShowPagination: () => boolean;
+  setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void;
+  getColumnsRef: () => ComputedRef<BasicColumn[]>;
+  getBindValuesRef: () => ComputedRef<any>;
+}
+
+export interface FetchSetting {
+  // 请求接口当前页数
+  pageField: string;
+  // 每页显示多少条
+  sizeField: string;
+  // 请求结果列表字段  支持 a.b.c
+  listField: string;
+  // 请求结果总数字段  支持 a.b.c
+  totalField: string;
+}
+
+export interface TableSetting {
+  // 是否显示刷新按钮
+  redo?: boolean;
+  // 是否显示尺寸调整按钮
+  size?: boolean;
+  // 是否显示字段调整按钮
+  setting?: boolean;
+  // 缓存“字段调整”配置的key，用于页面上有多个表格需要区分的情况
+  cacheKey?: string;
+  // 是否显示全屏按钮
+  fullScreen?: boolean;
+}
+
+export interface BasicTableProps<T = any> {
+  // 点击行选中
+  clickToRowSelect?: boolean;
+  isTreeTable?: boolean;
+  // 自定义排序方法
+  sortFn?: (sortInfo: SorterResult) => any;
+  // 排序方法
+  filterFn?: (data: Partial<Recordable<string[]>>) => any;
+  // 取消表格的默认padding
+  inset?: boolean;
+  // 显示表格设置
+  showTableSetting?: boolean;
+  // 表格上方操作按钮设置
+  tableSetting?: TableSetting;
+  // 斑马纹
+  striped?: boolean;
+  // 是否自动生成key
+  autoCreateKey?: boolean;
+  // 计算合计行的方法
+  summaryFunc?: (...arg: any) => Recordable[];
+  // 自定义合计表格内容
+  summaryData?: Recordable[];
+  // 是否显示合计行
+  showSummary?: boolean;
+  // 是否可拖拽列
+  canColDrag?: boolean;
+  // 接口请求对象
+  api?: (...arg: any) => Promise<any>;
+  // 请求之前处理参数
+  beforeFetch?: Fn;
+  // 自定义处理接口返回参数
+  afterFetch?: Fn;
+  // 查询条件请求之前处理
+  handleSearchInfoFn?: Fn;
+  // 请求接口配置
+  fetchSetting?: Partial<FetchSetting>;
+  // 立即请求接口
+  immediate?: boolean;
+  // 在开起搜索表单的时候，如果没有数据是否显示表格
+  emptyDataIsShowTable?: boolean;
+  // 额外的请求参数
+  searchInfo?: Recordable;
+  // 默认的排序参数
+  defSort?: Recordable | Recordable[];
+  // 使用搜索表单
+  useSearchForm?: boolean;
+  // 表单配置
+  formConfig?: Partial<FormProps>;
+  // 列配置
+  columns: BasicColumn[];
+  // 统一设置列最大宽度
+  maxColumnWidth?: number;
+  // 是否显示序号列
+  showIndexColumn?: boolean;
+  // 序号列配置
+  indexColumnProps?: BasicColumn;
+  // 是否显示操作列
+  showActionColumn?: boolean;
+  // 操作列配置
+  actionColumn?: Partial<BasicColumn>;
+  // 文本超过宽度是否显示。。。
+  ellipsis?: boolean;
+  // 是否可以自适应高度
+  canResize?: boolean;
+  // 自适应高度偏移， 计算结果-偏移量
+  resizeHeightOffset?: number;
+  // 在分页改变的时候清空选项
+  clearSelectOnPageChange?: boolean;
+  //
+  rowKey?: string | ((record: Recordable) => string);
+  // 数据
+  dataSource?: Recordable[];
+  // 标题右侧提示
+  titleHelpMessage?: string | string[];
+  // 表格最小高度
+  minHeight?: number;
+  // 表格滚动最大高度
+  maxHeight?: number;
+  // 是否显示边框
+  bordered?: boolean;
+  // 展开列宽度
+  expandColumnWidth: number;
+  // 分页配置
+  pagination?: PaginationProps | boolean;
+  // loading加载
+  loading?: boolean;
+
+  /**
+   * The column contains children to display
+   * @default 'children'
+   * @type string | string[]
+   */
+  childrenColumnName?: string;
+
+  /**
+   * Override default table elements
+   * @type object
+   */
+  components?: object;
+
+  /**
+   * Expand all rows initially
+   * @default false
+   * @type boolean
+   */
+  defaultExpandAllRows?: boolean;
+
+  /**
+   * Initial expanded row keys
+   * @type string[]
+   */
+  defaultExpandedRowKeys?: string[];
+
+  /**
+   * Current expanded row keys
+   * @type string[]
+   */
+  expandedRowKeys?: string[];
+
+  /**
+   * Expanded container render for each row
+   * @type Function
+   */
+  expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element;
+
+  /**
+   * Customize row expand Icon.
+   * @type Function | VNodeChild
+   */
+  expandIcon?: Function | VNodeChild | JSX.Element;
+
+  /**
+   * Whether to expand row by clicking anywhere in the whole row
+   * @default false
+   * @type boolean
+   */
+  expandRowByClick?: boolean;
+
+  /**
+   * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
+   */
+  expandIconColumnIndex?: number;
+
+  /**
+   * Table footer renderer
+   * @type Function | VNodeChild
+   */
+  footer?: Function | VNodeChild | JSX.Element;
+
+  /**
+   * Indent size in pixels of tree data
+   * @default 15
+   * @type number
+   */
+  indentSize?: number;
+
+  /**
+   * i18n text including filter, sort, empty text, etc
+   * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
+   * @type object
+   */
+  locale?: object;
+
+  /**
+   * Row's className
+   * @type Function
+   */
+  rowClassName?: (record: TableCustomRecord<T>, index: number) => string;
+
+  /**
+   * Row selection config
+   * @type object
+   */
+  rowSelection?: TableRowSelection;
+
+  /**
+   * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
+   * It is recommended to set a number for x, if you want to set it to true,
+   * you need to add style .ant-table td { white-space: nowrap; }.
+   * @type object
+   */
+  // 代码逻辑说明: 【issues/1188】BasicTable加上scrollToFirstRowOnChange类型定义
+  scroll?: { x?: number | true | 'max-content'; y?: number; scrollToFirstRowOnChange?: boolean };
+
+  /**
+   * Whether to show table header
+   * @default true
+   * @type boolean
+   */
+  showHeader?: boolean;
+
+  /**
+   * Size of table
+   * @default 'default'
+   * @type string
+   */
+  size?: SizeType;
+
+  /**
+   * Table title renderer
+   * @type Function | ScopedSlot
+   */
+  title?: VNodeChild | JSX.Element | string | ((data: Recordable) => string);
+
+  /**
+   * Set props on per header row
+   * @type Function
+   */
+  customHeaderRow?: (column: ColumnProps, index: number) => object;
+
+  /**
+   * Set props on per row
+   * @type Function
+   */
+  customRow?: (record: T, index: number) => object;
+
+  /**
+   * `table-layout` attribute of table element
+   * `fixed` when header/columns are fixed, or using `column.ellipsis`
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
+   * @version 1.5.0
+   */
+  tableLayout?: 'auto' | 'fixed' | string;
+
+  /**
+   * the render container of dropdowns in table
+   * @param triggerNode
+   * @version 1.5.0
+   */
+  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+
+  /**
+   * Data can be changed again before rendering.
+   * The default configuration of general user empty data.
+   * You can configured globally through [ConfigProvider](https://antdv.com/components/config-provider-cn/)
+   *
+   * @version 1.5.4
+   */
+  transformCellText?: Function;
+
+  /**
+   * Callback executed before editable cell submit value, not for row-editor
+   *
+   * The cell will not submit data while callback return false
+   */
+  beforeEditSubmit?: (data: { record: Recordable; index: number; key: string | number; value: any }) => Promise<any>;
+
+  /**
+   * Callback executed when pagination, filters or sorter is changed
+   * @param pagination
+   * @param filters
+   * @param sorter
+   * @param currentDataSource
+   */
+  onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void;
+
+  /**
+   * Callback executed when the row expand icon is clicked
+   *
+   * @param expanded
+   * @param record
+   */
+  onExpand?: (expande: boolean, record: T) => void;
+
+  /**
+   * Callback executed when the expanded rows change
+   * @param expandedRows
+   */
+  onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
+
+  onColumnsChange?: (data: ColumnChangeParam[]) => void;
+}
+
+export type CellFormat = string | ((text: string, record: Recordable, index: number) => string | number) | Map<string | number, any>;
+
+// @ts-ignore
+export interface BasicColumn extends ColumnProps<Recordable> {
+  children?: BasicColumn[];
+  filters?: {
+    text: string;
+    value: string;
+    children?: unknown[] | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[]));
+  }[];
+
+  //
+  flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
+  // 代码逻辑说明: 【issues/6908】多语言无刷新切换时，BasicColumn和FormSchema里面的值不能正常切换
+  title: string | Fn;
+  customTitle?: VueNode;
+
+  slots?: Recordable;
+  // slots的备份，兼容老的写法，转成新写法避免控制台警告
+  slotsBak?: Recordable;
+
+  // Whether to hide the column by default, it can be displayed in the column configuration
+  defaultHidden?: boolean;
+
+  // Help text for table column header
+  helpMessage?: string | string[];
+
+  format?: CellFormat;
+
+  // Editable
+  edit?: boolean;
+  editRow?: boolean;
+  editable?: boolean;
+  editComponent?: ComponentType;
+  // 代码逻辑说明: 【issues/8680】editComponentProps可接受一个函数传入record
+  editComponentProps?: Recordable | ((record: Recordable) => Recordable);
+  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
+  editValueMap?: (value: any) => string;
+  onEditRow?: () => void;
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean);
+  //compType-用于记录类型
+  compType?: string;
+  // 代码逻辑说明: 【pull/1201】添加antd的TableSummary功能兼容老的summary（表尾合计）
+  customSummaryRender?: (opt: {
+    value: any;
+    text: any;
+    record: Recordable;
+    index: number;
+    renderIndex?: number;
+    column: BasicColumn;
+  }) => any | VNodeChild | JSX.Element;
+  // 额外的属性
+  extraProps?: Recordable;
+}
+
+export type ColumnChangeParam = {
+  dataIndex: string;
+  fixed: boolean | 'left' | 'right' | undefined;
+  visible: boolean;
+};
+
+export interface InnerHandlers {
+  onColumnsChange: (data: ColumnChangeParam[]) => void;
+}
diff --git a/src/components/Table/src/types/tableAction.ts b/src/components/Table/src/types/tableAction.ts
new file mode 100644
index 0000000..3d2164f
--- /dev/null
+++ b/src/components/Table/src/types/tableAction.ts
@@ -0,0 +1,33 @@
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
+import { RoleEnum } from '/@/enums/roleEnum';
+export interface ActionItem extends ButtonProps {
+  onClick?: Fn;
+  label?: string;
+  color?: 'success' | 'error' | 'warning';
+  icon?: string;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((action: ActionItem) => boolean);
+  tooltip?: string | TooltipProps;
+  // 自定义类名
+  class?: string | Record<string, boolean> | any[];
+  // 自定义图标颜色
+  iconColor?: string;
+}
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: Fn;
+  cancel?: Fn;
+  icon?: string;
+  placement?: string;
+  overlayClassName?: string;
+  getPopupContainer?: Fn;
+}
diff --git a/src/components/Time/index.ts b/src/components/Time/index.ts
new file mode 100644
index 0000000..7e2f4c0
--- /dev/null
+++ b/src/components/Time/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils/index';
+import time from './src/Time.vue';
+
+export const Time = withInstall(time);
diff --git a/src/components/Time/src/Time.vue b/src/components/Time/src/Time.vue
new file mode 100644
index 0000000..be49ba3
--- /dev/null
+++ b/src/components/Time/src/Time.vue
@@ -0,0 +1,107 @@
+<template>
+  <span>{{ date }}</span>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useIntervalFn } from '@vueuse/core';
+  import { formatToDateTime, formatToDate, dateUtil } from '/@/utils/dateUtil';
+  import { isNumber, isObject, isString } from '/@/utils/is';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const ONE_SECONDS = 1000;
+  const ONE_MINUTES = ONE_SECONDS * 60;
+  const ONE_HOUR = ONE_MINUTES * 60;
+  const ONE_DAY = ONE_HOUR * 24;
+
+  export default defineComponent({
+    name: 'Time',
+    props: {
+      value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string]).isRequired,
+      step: propTypes.number.def(60),
+      mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
+    },
+    setup(props) {
+      const date = ref('');
+
+      const { t } = useI18n();
+
+      useIntervalFn(setTime, props.step * ONE_SECONDS);
+
+      watch(
+        () => props.value,
+        () => {
+          setTime();
+        },
+        { immediate: true }
+      );
+
+      function getTime() {
+        const { value } = props;
+        let time = 0;
+        if (isNumber(value)) {
+          const timestamp = value.toString().length > 10 ? value : value * 1000;
+          time = new Date(timestamp).getTime();
+        } else if (isString(value)) {
+          time = new Date(value).getTime();
+        } else if (isObject(value)) {
+          time = value.getTime();
+        }
+        return time;
+      }
+
+      function setTime() {
+        const { mode, value } = props;
+        const time = getTime();
+        if (mode === 'relative') {
+          date.value = getRelativeTime(time);
+        } else {
+          if (mode === 'datetime') {
+            date.value = formatToDateTime(value);
+          } else if (mode === 'date') {
+            date.value = formatToDate(value);
+          }
+        }
+      }
+
+      function getRelativeTime(timeStamp: number) {
+        const currentTime = new Date().getTime();
+
+        // Determine whether the incoming timestamp is earlier than the current timestamp
+        const isBefore = dateUtil(timeStamp).isBefore(currentTime);
+
+        let diff = currentTime - timeStamp;
+        if (!isBefore) {
+          diff = -diff;
+        }
+
+        let resStr = '';
+        let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
+
+        if (diff < ONE_SECONDS) {
+          resStr = t('component.time.just');
+          // Less than or equal to 59 seconds
+        } else if (diff < ONE_MINUTES) {
+          resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
+          // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
+        } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
+          resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
+          // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
+        } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
+          resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
+          // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
+        } else if (diff >= ONE_DAY && diff < 2623860000) {
+          resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
+          // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
+        } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
+          resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
+        } else {
+          resStr = dateUtil(timeStamp).format('YYYY');
+        }
+        return resStr;
+      }
+
+      return { date };
+    },
+  });
+</script>
diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts
new file mode 100644
index 0000000..ce07f95
--- /dev/null
+++ b/src/components/Tinymce/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils/index';
+import tinymce from './src/Editor.vue';
+
+export const Tinymce = withInstall(tinymce);
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
new file mode 100644
index 0000000..538894d
--- /dev/null
+++ b/src/components/Tinymce/src/Editor.vue
@@ -0,0 +1,809 @@
+<template>
+  <div ref="editorRootRef" :class="prefixCls" :style="{ width: containerWidth }">
+    <Teleport v-if="imgUploadShow" :to="targetElem">
+      <ImgUpload
+        :fullscreen="fullscreen"
+        @uploading="handleImageUploading"
+        @loading="handleLoading"
+        @done="handleDone"
+        v-show="editorRef"
+        :disabled="disabled"
+      />
+    </Teleport>
+    <Editor :id="tinymceId" ref="elRef" :disabled="disabled" :init="initOptions" :style="{ visibility: 'hidden' }" v-if="!initOptions.inline"></Editor>
+    <slot v-else></slot>
+    <ProcessMask ref="processMaskRef" :show="showUploadMask"/>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { RawEditorOptions } from 'tinymce';
+  import tinymce from 'tinymce/tinymce';
+  import Editor from '@tinymce/tinymce-vue'
+  import 'tinymce/themes/silver';
+  import 'tinymce/icons/default/icons';
+  import 'tinymce/models/dom';
+
+  // tinymce插件可按自己的需要进行导入
+  // 更多插件参考：https://www.tiny.cloud/docs/plugins/
+  import 'tinymce/plugins/fullscreen';
+  import 'tinymce/plugins/link';
+  import 'tinymce/plugins/lists';
+  import 'tinymce/plugins/preview';
+  import 'tinymce/plugins/image';
+  import { defineComponent, computed, nextTick, ref, unref, watch, onDeactivated, onBeforeUnmount, onMounted } from 'vue';
+  import ImgUpload from './ImgUpload.vue';
+  import ProcessMask from './ProcessMask.vue';
+  import {simpleToolbar, menubar, simplePlugins} from './tinymce';
+  import { buildShortUUID } from '/@/utils/uuid';
+  import { bindHandlers } from './helper';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isNumber } from '/@/utils/is';
+  import { useLocale } from '/@/locales/useLocale';
+  import { useAppStore } from '/@/store/modules/app';
+  import { uploadFile } from '/@/api/common/api';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { ThemeEnum } from '/@/enums/appEnum';
+  import { defHttp } from "@/utils/http/axios";
+  const tinymceProps = {
+    options: {
+      type: Object as PropType<Partial<RawEditorOptions>>,
+      default: {},
+    },
+    value: {
+      type: String,
+    },
+
+    toolbar: {
+      type: [Array as PropType<string[]>, String],
+      default: simpleToolbar,
+    },
+    plugins: {
+      type: [Array as PropType<string[]>, String],
+      default: simplePlugins,
+    },
+    menubar: {
+      type: [Object, String],
+      default: menubar,
+    },
+    modelValue: {
+      type: String,
+    },
+    height: {
+      type: [Number, String] as PropType<string | number>,
+      required: false,
+      default: 400,
+    },
+    width: {
+      type: [Number, String] as PropType<string | number>,
+      required: false,
+      default: 'auto',
+    },
+    showImageUpload: {
+      type: Boolean,
+      default: true,
+    },
+    showUploadMask: {
+      type: Boolean,
+      default: false,
+    },
+    //是否聚焦
+    autoFocus:{
+      type: Boolean,
+      default: true,
+    }
+  };
+
+  export default defineComponent({
+    name: 'Tinymce',
+    components: { ImgUpload,Editor,ProcessMask },
+    inheritAttrs: false,
+    props: tinymceProps as any,
+    emits: ['change', 'update:modelValue', 'inited', 'init-error'],
+    setup(props, { emit, attrs }) {
+      console.log("---Tinymce---初始化---")
+
+      const editorRef = ref<Nullable<any>>(null);
+      const fullscreen = ref(false);
+      const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+      const elRef = ref<Nullable<HTMLElement>>(null);
+      const editorRootRef = ref<Nullable<HTMLElement>>(null);
+      const processMaskRef = ref<any>(null);
+      const imgUploadShow = ref(false);
+      const targetElem = ref<null | HTMLDivElement>(null);
+
+      const { prefixCls } = useDesign('tinymce-container');
+
+      const appStore = useAppStore();
+
+      const tinymceContent = computed(() => props.modelValue);
+
+      const containerWidth = computed(() => {
+        const width = props.width;
+        if (isNumber(width)) {
+          return `${width}px`;
+        }
+        return width;
+      });
+
+      const skinName = computed(() => {
+        return appStore.getDarkMode === 'light' ? 'jeecg' : 'oxide-dark';
+      });
+
+      const langName = computed(() => {
+        const lang = useLocale().getLocale.value;
+        return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
+      });
+
+      const initOptions = computed(() => {
+        const { height, options, toolbar, plugins, menubar } = props;
+        let publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
+        // 代码逻辑说明: 【QQYUN-8571】发布路径不以/结尾资源会加载失败
+        if (!publicPath.endsWith('/')) {
+          publicPath += '/';
+        }
+        return {
+          selector: `#${unref(tinymceId)}`,
+          height,
+          toolbar,
+          menubar: false,
+          plugins,
+          // 添加以下粘贴相关配置
+          paste_data_images: true, // 允许粘贴图片
+          paste_as_text: false, // 不以纯文本粘贴
+          paste_retain_style_properties: 'all', // 保留所有样式属性
+          paste_webkit_styles: 'all', // 保留webkit样式
+          paste_merge_formats: true, // 合并格式
+          paste_block_drop: true, // 允许拖放粘贴
+          paste_preprocess: (plugin, args) => {
+            // 可以在这里对粘贴的内容进行预处理
+            //console.log('粘贴的内容:', args.content);
+          },
+          paste_postprocess: (plugin, args) => {
+            // 可以在这里对粘贴的内容进行后处理
+            //console.log('处理后的内容:', args.node);
+          },
+          // 放宽内容过滤规则
+          valid_elements: '*[*]',
+          extended_valid_elements: '*[*]',
+          valid_children: '+body[style]',
+          allow_conditional_comments: true,
+          allow_html_in_named_anchor: true,
+
+          language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
+          language: langName.value,
+          branding: false,
+          default_link_target: '_blank',
+          link_title: false,
+          object_resizing: true,
+          toolbar_mode: 'sliding',
+          // 代码逻辑说明: 【TV360X-416】单表代码生成，表单打开时，会先聚焦富文本组件，并滚动到富文本组件所在的位置---
+          auto_focus: props.autoFocus,
+          // toolbar_groups: true,
+          skin: skinName.value,
+          skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
+          images_upload_handler: (blobInfo, process) =>
+            new Promise((resolve, reject) => {
+            let params = {
+              file: blobInfo.blob(),
+              filename: blobInfo.filename(),
+              data: { biz: 'jeditor', jeditor: '1' },
+            };
+            const uploadSuccess = (res) => {
+              if (res.success) {
+                if (res.message == 'local') {
+                  const img = 'data:image/jpeg;base64,' + blobInfo.base64();
+                      resolve(img);
+                } else {
+                  let img = getFileAccessHttpUrl(res.message);
+                  resolve(img);
+                }
+              } else {
+                  reject('上传失败！');
+              }
+            };
+            uploadFile(params, uploadSuccess);
+        }),
+          content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
+          ...options,
+          setup: (editor: any) => {
+            editorRef.value = editor;
+            editor.on('init', (e) => {
+              initSetup(e);
+              // update-begin--author:liaozhiyang---date:20260306---for:【issues/9448】滚动时tinymce如果下拉打开则隐藏
+              // 弹窗内滚动时关闭tinymce下拉菜单，避免下拉菜单挂载在body导致位置不跟随
+              bindScrollCloseMenu(editor);
+              // update-end--author:liaozhiyang---date:20260306---for:【issues/9448】滚动时tinymce如果下拉打开则隐藏
+            });
+            //update-begin-author:liusq---date:2025-11-19--for: JHHB-1070 从word复制的表格不能对齐
+            // 表格对齐功能
+            initTableAlignment(editor);
+            //update-end-author:liusq---date:2025-11-19--for: JHHB-1070 从word复制的表格不能对齐
+            // 在编辑器内部处理粘贴事件，确保能正确替换选中内容
+            editor.on('paste', async (e: any) => {
+              try {
+                e.preventDefault();
+                e.stopPropagation();
+                const clipboardData = e.clipboardData as DataTransfer | undefined;
+                if (!clipboardData) return false;
+
+                // 先处理剪贴板中的图片（截图/粘贴图片）
+                const items = clipboardData.items as DataTransferItemList | undefined;
+                if (items && items.length > 0) {
+                  const imageFiles: File[] = [];
+                  for (let i = 0; i < items.length; i++) {
+                    const it = items[i];
+                    if (it && it.type && it.type.indexOf('image') !== -1) {
+                      const file = it.getAsFile();
+                      if (file) imageFiles.push(file);
+                    }
+                  }
+                  // 若存在图片，逐一上传后替换
+                  if (imageFiles.length > 0) {
+                    for (const file of imageFiles) {
+                      await new Promise<void>((resolve) => {
+                        const params = {
+                          file,
+                          filename: file.name || 'pasted-image.png',
+                          data: { biz: 'jeditor', jeditor: '1' },
+                        };
+                        const uploadSuccess = (res: any) => {
+                          try {
+                            if (res && res.success) {
+                              if (res.message === 'local') {
+                                const reader = new FileReader();
+                                reader.onload = () => {
+                                  const base64 = reader.result as string;
+                                  editor.selection.setContent(`<img src="${base64}"/>`);
+                                  resolve();
+                                };
+                                reader.readAsDataURL(file);
+                              } else {
+                                const imgUrl = getFileAccessHttpUrl(res.message);
+                                editor.selection.setContent(`<img src="${imgUrl}"/>`);
+                                resolve();
+                              }
+                            } else {
+                              resolve();
+                            }
+                          } catch (_) {
+                            resolve();
+                          }
+                        };
+                        uploadFile(params, uploadSuccess);
+                      });
+                    }
+                    return false;
+                  }
+                }
+
+                // 处理 HTML/纯文本
+                const pasteContent = clipboardData.getData('text/html') || clipboardData.getData('text');
+                if (!pasteContent) return false;
+                
+                if (pasteContent.includes('<img')) {
+                  const processedHtml = await preprocess(pasteContent);
+                  editor.selection.setContent(processedHtml);
+                } else {
+                  editor.selection.setContent(pasteContent);
+                }
+              } catch (_) {}
+              return false;
+            });
+          },
+        };
+      });
+
+      const disabled = computed(() => {
+        const { options } = props;
+        const getdDisabled = options && Reflect.get(options, 'readonly');
+        const editor = unref(editorRef);
+        // 代码逻辑说明: 设置disabled，图片上传没有被禁用
+        if (editor && editor?.setMode) {
+          editor.setMode(getdDisabled || attrs.disabled === true ? 'readonly' : 'design');
+        }
+        if (attrs.disabled === true) {
+          return true;
+        }
+        return getdDisabled ?? false;
+      });
+
+      watch(
+        () => attrs.disabled,
+        () => {
+          const editor = unref(editorRef);
+          if (!editor) {
+            return;
+          }
+         editor?.setMode && editor.setMode(attrs.disabled ? 'readonly' : 'design');
+        }
+      );
+
+      onMountedOrActivated(() => {
+        if (!initOptions.value.inline) {
+          tinymceId.value = buildShortUUID('tiny-vue');
+        }
+        nextTick(() => {
+          setTimeout(() => {
+            initEditor();
+          }, 30);
+        });
+      });
+
+      onBeforeUnmount(() => {
+        destory();
+      });
+
+      onDeactivated(() => {
+        destory();
+      });
+
+      function destory() {
+        if (tinymce !== null) {
+          tinymce?.remove?.(unref(initOptions).selector!);
+        }
+      }
+
+      function initEditor() {
+        const el = unref(elRef);
+        if (el && el?.style && el?.style?.visibility) {
+          el.style.visibility = '';
+        }
+        tinymce
+          .init(unref(initOptions))
+          .then((editor) => {
+            changeColor();
+            emit('inited', editor);
+          })
+          .catch((err) => {
+            emit('init-error', err);
+          });
+      }
+
+      function initSetup(e) {
+        const editor = unref(editorRef);
+        if (!editor) {
+          return;
+        }
+        const value = props.modelValue || '';
+
+        editor.setContent(value);
+        bindModelHandlers(editor);
+        bindHandlers(e, attrs, unref(editorRef));
+      }
+
+      function setValue(editor: Recordable, val: string, prevVal?: string) {
+        if (editor && typeof val === 'string' && val !== prevVal && val !== editor.getContent({ format: attrs.outputFormat })) {
+          editor.setContent(val);
+        }
+      }
+
+      function bindModelHandlers(editor: any) {
+        const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
+        const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
+
+        watch(
+          () => props.modelValue,
+          (val: string, prevVal: string) => {
+            setValue(editor, val, prevVal);
+          }
+        );
+
+        watch(
+          () => props.value,
+          (val: string, prevVal: string) => {
+            setValue(editor, val, prevVal);
+          },
+          {
+            immediate: true,
+          }
+        );
+
+        editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
+          const content = editor.getContent({ format: attrs.outputFormat });
+          emit('update:modelValue', content);
+          emit('change', content);
+        });
+
+        editor.on('FullscreenStateChanged', (e) => {
+          fullscreen.value = e.state;
+        });
+      }
+
+      function handleImageUploading(name: string) {
+        const editor = unref(editorRef);
+        if (!editor) {
+          return;
+        }
+        editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+        const content = editor?.getContent() ?? '';
+        setValue(editor, content);
+      }
+
+      async function handleDone(name: string, url: string) {
+        const editor = unref(editorRef);
+        if (!editor) {
+          return;
+        }
+        await handleImageUploading(name);
+        const content = editor?.getContent() ?? '';
+        const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+        setValue(editor, val);
+      }
+
+      /**
+       * 上传进度计算
+       * @param file
+       * @param fileList
+       */
+      function handleLoading(fileLength,showMask){
+        if(fileLength && fileLength > 0){
+          setTimeout(() => {
+              props?.showUploadMask && processMaskRef.value.calcProcess(fileLength)
+          },100)
+        }else{
+           props?.showUploadMask && (processMaskRef.value.showMask = showMask);
+        }
+      }
+      function getUploadingImgName(name: string) {
+        return `[uploading:${name}]`;
+      }
+      // 代码逻辑说明: 【TV360X-35】富文本，图片上传遮挡其他按钮
+      let executeCount = 0;
+      watch(
+        () => props.showImageUpload,
+        () => {
+          mountElem();
+        }
+      );
+      onMounted(() => {
+        mountElem();
+      });
+      const mountElem = () => {
+        if (executeCount > 20) return;
+        setTimeout(() => {
+          if (targetElem.value) {
+            imgUploadShow.value = props.showImageUpload;
+          } else {
+            const toxToolbar = editorRootRef.value?.querySelector('.tox-toolbar__group');
+            if (toxToolbar) {
+              const divElem = document.createElement('div');
+              divElem.setAttribute('style', `width:64px;height:39px;display:flex;align-items:center;`);
+              toxToolbar!.appendChild(divElem);
+              targetElem.value = divElem;
+              imgUploadShow.value = props.showImageUpload;
+              executeCount = 0;
+            } else {
+              mountElem();
+            }
+          }
+          executeCount++;
+        }, 100);
+      };
+      // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+      function changeColor() {
+        setTimeout(() => {
+          const iframe = editorRootRef.value?.querySelector('iframe');
+          const body = iframe?.contentDocument?.querySelector('body');
+          if (body) {
+            if (appStore.getDarkMode == ThemeEnum.DARK) {
+              body.style.color = '#fff';
+            } else {
+              body.style.color = '#000';
+            }
+          }
+        }, 300);
+      }
+      watch(
+        () => appStore.getDarkMode,
+        () => {
+          changeColor();
+        }
+      );
+
+      // 滚动时关闭tinymce下拉菜单
+      function bindScrollCloseMenu(editor) {
+        const root = unref(editorRootRef);
+        if (!root) return;
+        const scrollParent = getScrollParent(root);
+        if (!scrollParent) return;
+        const onScroll = () => {
+          // 触发body上的mousedown，tinymce会自动关闭打开的下拉菜单
+          document.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        };
+        scrollParent.addEventListener('scroll', onScroll, { passive: true });
+        editor.on('remove', () => {
+          scrollParent.removeEventListener('scroll', onScroll);
+        });
+      }
+
+      function getScrollParent(el: HTMLElement): HTMLElement | null {
+        let parent = el.parentElement;
+        while (parent && parent !== document.body) {
+          const { overflow, overflowY } = getComputedStyle(parent);
+          if (/(auto|scroll)/.test(overflow + overflowY)) {
+            return parent;
+          }
+          parent = parent.parentElement;
+        }
+        return null;
+      }
+
+      /**
+       * 处理图片链接地址
+       *
+       * @param pasteContent
+       */
+      async function preprocess(pasteContent) {
+        // 正则提取所有img标签（包含src和其他属性，避免丢失样式/alt等）
+        const imgTagRegex = /<img([^>]+)src="([^">]+)"([^>]*)/g;
+
+        // 收集所有需要替换的图片信息（索引、原始src、完整标签）
+        const imgReplaceList:any = [];
+        let match;
+        while ((match = imgTagRegex.exec(pasteContent)) !== null) {
+          imgReplaceList.push({
+            // 完整的img标签（如<img class="xxx" src="xxx" alt="xxx">）
+            fullTag: match[0],
+            // 原始图片URL
+            src: match[2],
+            // src前的属性（如class="xxx" ）
+            prefix: match[1],
+            // src后的属性（如 alt="xxx"）
+            suffix: match[3]
+          });
+        }
+   
+        // 替换所有图片URL为服务器地址
+        let processedContent = pasteContent;
+        // 获取当前域名（协议+域名+端口）
+        const currentOrigin = window.location.hostname;
+        console.log("当前域名："+ currentOrigin)
+        // 处理图片
+        for (const imgInfo of imgReplaceList) {
+          try {
+            if(imgInfo.src.startsWith('http')){
+              // 判断是否为当前域名下的图片
+              let isOwnServer = false;
+              try {
+                const imgHost = new URL(imgInfo.src, window.location.href).hostname;
+                isOwnServer = imgHost === currentOrigin;
+                console.log("图片中的域名：" + imgHost)
+              } catch (e) {
+                // 如果URL解析失败，使用简单的hostname检查作为后备
+                isOwnServer = imgInfo.src.includes(window.location.hostname);
+                console.log("图片中的域名：" + window.location.hostname)
+              }
+              if(!isOwnServer){
+                // 非当前域名的网络图片，需要上传
+                const filename = getFilenameFromUrl(imgInfo.src) || 'pasted-image.jpg';
+                let newUrl = await uploadImage(imgInfo.src, filename);
+                if(newUrl){
+                  const newImgTag = `<img${imgInfo.prefix}src="${newUrl}"${imgInfo.suffix}`;
+                  processedContent = processedContent.replace(imgInfo.fullTag, newImgTag);
+                }
+              }
+              // 如果是当前域名下的图片，不做任何处理，保持原样
+            }
+          } catch (error) {}
+        }
+        return processedContent;
+      }
+      
+      
+      /**
+       * 根据路径获取文件名
+       * 
+       * @param url
+       */
+      function getFilenameFromUrl(url) {
+        return url.split('/').pop().split('?')[0];
+      }
+
+      /**
+       * 上传文件并返回文件路径
+       * 
+       * @param fileUrl
+       * @param filename
+       */
+      async function uploadImage(fileUrl, filename) {
+        let params = {
+          fileUrl: fileUrl,
+          filename: filename,
+        };
+        try {
+          let { message } = await defHttp.post({ url: "/sys/common/uploadImgByHttp", params },{ isTransformResponse: false });
+          return getFileAccessHttpUrl(message);
+        } catch (e) {
+          return "";
+        }
+      }
+      //update-begin-author:liusq---date:2025-11-19--for: JHHB-1070 从word复制的表格不能对齐
+      /**
+       * 处理表格居中
+       * @param editor
+       */
+      function initTableAlignment(editor) {
+        // 表格左对齐 - 带表格图标的左对齐
+        editor.ui.registry.addIcon('table-align-left', '<svg width="24" height="24"><rect x="2" y="8" width="16" height="8" fill="currentColor"/><path d="M2 4h20v2H2zm0 14h12v2H2z" fill="currentColor"/></svg>');
+
+        // 表格居中对齐 - 带表格图标的居中对齐
+        editor.ui.registry.addIcon('table-align-center', '<svg width="24" height="24"><rect x="4" y="8" width="16" height="8" fill="currentColor"/><path d="M2 4h20v2H2zm4 14h12v2H6z" fill="currentColor"/></svg>');
+
+        // 表格右对齐 - 带表格图标的右对齐
+        editor.ui.registry.addIcon('table-align-right', '<svg width="24" height="24"><rect x="6" y="8" width="16" height="8" fill="currentColor"/><path d="M2 4h20v2H2zm8 14h12v2H10z" fill="currentColor"/></svg>');
+
+        // 添加表格专用对齐按钮
+        editor.ui.registry.addButton('tablealignleft', {
+          tooltip: '表格左对齐',
+          icon: 'table-align-left',
+          onAction: () => {
+            const table = getSelectedTable(editor);
+            if (table) alignTable(editor, table, 'JustifyLeft');
+          }
+        });
+        editor.ui.registry.addButton('tablealigncenter', {
+          tooltip: '表格居中',
+          icon: 'table-align-center',
+          onAction: () => {
+            const table = getSelectedTable(editor);
+            if (table) alignTable(editor, table, 'JustifyCenter');
+          }
+        });
+
+        editor.ui.registry.addButton('tablealignright', {
+          tooltip: '表格右对齐',
+          icon: 'table-align-right',
+          onAction: () => {
+            const table = getSelectedTable(editor);
+            if (table) alignTable(editor, table, 'JustifyRight');
+          }
+        });
+      }
+
+      // 获取当前选中的表格
+      function getSelectedTable(editor) {
+        const selectedNode = editor.selection.getNode();
+        return selectedNode.closest('table');
+      }
+
+      // 使用包装器的表格对齐函数
+      function alignTable(editor, table, command) {
+        // 检查表格是否已经被包装
+        let wrapper = table.parentNode;
+        const isWrapped = wrapper && wrapper.classList && wrapper.classList.contains('table-wrapper');
+
+        switch (command) {
+          case 'JustifyLeft':
+          case 'JustifyRight':
+            // 对于左右对齐，移除包装器（如果有）
+            if (isWrapped) {
+              editor.dom.remove(wrapper, true); // 移除包装器但保留表格
+            }
+            // 直接设置表格的浮动
+            editor.dom.setStyle(table, 'float', command === 'JustifyLeft' ? 'left' : 'right');
+            editor.dom.setStyle(table, 'margin', '0');
+            break;
+
+          case 'JustifyCenter':
+            // 对于居中对齐，使用包装器
+            if (!isWrapped) {
+              // 创建包装器
+              wrapper = editor.dom.create('div', {
+                'class': 'table-wrapper',
+                style: 'text-align: center; margin: 0 auto;'
+              });
+
+              // 包装表格
+              table.parentNode.insertBefore(wrapper, table);
+              wrapper.appendChild(table);
+            }
+
+            // 设置包装器样式
+            editor.dom.setStyles(wrapper, {
+              'text-align': 'center',
+              'margin': '0 auto',
+              'display': 'block'
+            });
+            // 移除表格的浮动和边距
+            editor.dom.setStyles(table, {
+              'float': '',
+              'margin': '0',
+              'display': 'inline-table' // 保持表格显示特性
+            });
+            break;
+
+          case 'JustifyFull':
+            // 移除包装器（如果有）
+            if (isWrapped) {
+              editor.dom.remove(wrapper, true);
+            }
+            editor.dom.setStyle(table, 'width', '100%');
+            editor.dom.setStyle(table, 'float', '');
+            break;
+        }
+
+        // 触发变更事件
+        editor.fire('change');
+        editor.undoManager.add();
+      }
+      //update-end-author:liusq---date:2025-11-19--for: JHHB-1070 从word复制的表格不能对齐 
+
+      return {
+        prefixCls,
+        containerWidth,
+        initOptions,
+        tinymceContent,
+        elRef,
+        tinymceId,
+        handleImageUploading,
+        handleDone,
+        editorRef,
+        fullscreen,
+        disabled,
+        editorRootRef,
+        imgUploadShow,
+        targetElem,
+
+        handleLoading,
+        processMaskRef,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+/* 表格包装器样式 */
+.table-wrapper {
+  text-align: center;
+  margin: 0 auto;
+  display: block;
+}
+
+/* 确保在编辑器中正确显示 */
+.tox-edit-area__iframe {
+  .table-wrapper {
+    text-align: center !important;
+    margin: 0 auto !important;
+    display: block !important;
+  }
+
+  .table-wrapper table {
+    display: inline-table !important;
+    margin: 0 !important;
+    float: none !important;
+  }
+}
+</style>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-tinymce-container';
+
+  .@{prefix-cls} {
+    position: relative;
+    line-height: normal;
+
+    textarea {
+      z-index: -1;
+      visibility: hidden;
+    }
+    .tox:not(.tox-tinymce-inline) .tox-editor-header {
+      padding:0;
+    }
+    // 代码逻辑说明: 【TV360X-329】富文本禁用状态下工具栏划过边框丢失
+    .tox .tox-tbtn--disabled,
+    .tox .tox-tbtn--disabled:hover,
+    .tox .tox-tbtn:disabled,
+    .tox .tox-tbtn:disabled:hover {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23d9d9d9'/%3E%3C/svg%3E");
+      background-position: left 0;
+    }
+  }
+
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      .tox .tox-edit-area__iframe {background-color: #141414;}
+    }
+  }
+</style>
diff --git a/src/components/Tinymce/src/ImgUpload.vue b/src/components/Tinymce/src/ImgUpload.vue
new file mode 100644
index 0000000..3e47ee6
--- /dev/null
+++ b/src/components/Tinymce/src/ImgUpload.vue
@@ -0,0 +1,134 @@
+<template>
+  <div :class="[prefixCls, { fullscreen }]">
+    <Upload
+      name="file"
+      multiple
+      @change="handleChange"
+      :action="uploadUrl"
+      :showUploadList="false"
+      :data="getBizData()"
+      :headers="getheader()"
+      :before-upload="beforeUpload"
+      accept=".jpg,.jpeg,.gif,.png,.webp"
+    >
+      <a-button type="primary" v-bind="{ ...getButtonProps }">
+        {{ t('component.upload.imgUpload') }}
+      </a-button>
+    </Upload>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, ref } from 'vue';
+
+  import { Upload } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getFileAccessHttpUrl, getHeaders } from '/@/utils/common/compUtils';
+
+  export default defineComponent({
+    name: 'TinymceImageUpload',
+    components: { Upload },
+    props: {
+      fullscreen: {
+        type: Boolean,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['uploading', 'done', 'error', 'loading'],
+    setup(props, { emit }) {
+      // 代码逻辑说明: 富文本上传图片不支持
+      function getheader() {
+        return getHeaders();
+      }
+
+      function getBizData() {
+        return {
+          biz: 'jeditor',
+          jeditor: '1',
+        };
+      }
+      const { domainUrl } = useGlobSetting();
+      const uploadUrl = domainUrl + '/sys/common/upload';
+      //文件列表
+      let uploadFileList = ref<any[]>([]);
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('tinymce-img-upload');
+
+      const getButtonProps = computed(() => {
+        const { disabled } = props;
+        return {
+          disabled,
+        };
+      });
+
+      let uploadLength = 0;
+      function handleChange({ file, fileList }) {
+        // 过滤掉已经存在的文件
+        fileList = fileList.filter((file) => {
+          const existFile = uploadFileList.value.find(({ uid }) => uid === file.uid);
+          return existFile ? false : true;
+        });
+        uploadLength == 0 && (uploadLength = fileList.length);
+        if (file.status != 'uploading') {
+          emit('loading', uploadLength, true);
+        }
+        // 处理上传好的文件
+        if (file.status != 'uploading') {
+          fileList.forEach((file) => {
+            if (file.status === 'done' && file.response.success) {
+              const name = file?.name;
+              let realUrl = getFileAccessHttpUrl(file.response.message);
+              uploadFileList.value.push(file);
+              emit('done', name, realUrl);
+            }
+          });
+        }
+      }
+      //上传之前
+      function beforeUpload() {
+        uploadLength = 0;
+        emit('loading', null, true);
+        setTimeout(() => {
+          emit('loading', null, false);
+        }, 10000);
+      }
+      return {
+        prefixCls,
+        handleChange,
+        uploadUrl,
+        getheader,
+        getBizData,
+        t,
+        getButtonProps,
+        uploadFileList,
+        beforeUpload,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-tinymce-img-upload';
+
+  .@{prefix-cls} {
+    background-color: @primary-color;
+    margin: 0 3px;
+    &.fullscreen {
+      position: fixed;
+      z-index: 10000;
+    }
+    // 代码逻辑说明: 【QQYUN-8647】online tinymce组件上传图片按遮挡了控件栏的全屏按钮
+    .ant-btn {
+      padding: 2px 4px;
+      font-size: 12px;
+      height: 24px;
+      // 代码逻辑说明: 【TV360X-235】富文本禁用状态下图片上传按钮文字看不清
+      &.is-disabled {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+</style>
diff --git a/src/components/Tinymce/src/ProcessMask.vue b/src/components/Tinymce/src/ProcessMask.vue
new file mode 100644
index 0000000..b70ae33
--- /dev/null
+++ b/src/components/Tinymce/src/ProcessMask.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :class="[prefixCls]" v-if="showMask && show">
+    <div class="progress-bar-rear">
+      <div class="progress-bar-front" :style="{ width: progressBarWidth }"></div>
+    </div>
+    <div class="value">{{ percentage }}</div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import {useDesign} from "@/hooks/web/useDesign";
+
+  const props = defineProps({
+    backColor: {
+      type: [String],
+      default: 'white',
+    },
+    processColor: {
+      type: String,
+      default: '#018FFB',
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const { prefixCls } = useDesign('tinymce-process-mask');
+
+  //显示遮罩
+  const showMask = ref(false);
+  //进度值占比
+  const progressValue = ref<any>(0);
+  //当前数量
+  const currentNum = ref(0);
+  // 计算进度条宽度的计算属性
+  const progressBarWidth = computed(() => {
+    return progressValue.value > 0 ? `${progressValue.value}px` : '0px';
+  });
+  // 计算进度条百分比
+  const percentage = computed(() => {
+    return `${progressValue.value}%`;
+  });
+  // 进度色
+  const frontColor = computed(() => {
+    return props.processColor;
+  });
+  // 后置背景色
+  const rearColor = computed(() => {
+    return props.backColor;
+  });
+  function calcProcess(totalNum) {
+    !showMask.value && (showMask.value = true);
+    currentNum.value += 1;
+    progressValue.value = ((currentNum.value / totalNum) * 100).toFixed(2);
+    console.log('currentNum.value', currentNum.value);
+    console.log('totalNum.value', totalNum);
+    if (currentNum.value == totalNum) {
+      showMask.value = false;
+      currentNum.value = 0;
+      progressValue.value = 0;
+    }
+  }
+  defineExpose({
+    calcProcess,
+    showMask,
+  });
+</script>
+
+<style lang="less">
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-tinymce-process-mask';
+
+.@{prefix-cls} {
+
+  & {
+    position: absolute; /* 或者使用固定定位等其他方式 */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    z-index: 99;
+  }
+
+  .progress-bar-rear {
+    width: 100px; /* 进度条宽度 */
+    height: 10px; /* 进度条高度 */
+    background-color: v-bind(rearColor); /* 进度条颜色 */
+    border-radius: 4px;
+  }
+
+  .progress-bar-front {
+    height: 10px; /* 进度条高度 */
+    background-color: v-bind(frontColor); /* 进度条颜色 */
+    border-radius: 4px;
+  }
+
+  .value {
+    color: #fff;
+    margin-left: 5px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+</style>
diff --git a/src/components/Tinymce/src/helper.ts b/src/components/Tinymce/src/helper.ts
new file mode 100644
index 0000000..2526ae7
--- /dev/null
+++ b/src/components/Tinymce/src/helper.ts
@@ -0,0 +1,81 @@
+const validEvents = [
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBeforePaste',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResizeStart',
+  'onObjectResized',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid',
+];
+
+const isValidKey = (key: string) => validEvents.indexOf(key) !== -1;
+
+export const bindHandlers = (initEvent: Event, listeners: any, editor: any): void => {
+  Object.keys(listeners)
+    .filter(isValidKey)
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.substring(2), (e: any) => handler(e, editor));
+        }
+      }
+    });
+};
diff --git a/src/components/Tinymce/src/tinymce.ts b/src/components/Tinymce/src/tinymce.ts
new file mode 100644
index 0000000..f74c193
--- /dev/null
+++ b/src/components/Tinymce/src/tinymce.ts
@@ -0,0 +1,19 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+export const plugins = [
+  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace tabfocus  template  textpattern visualblocks visualchars wordcount image',
+];
+
+export const toolbar =
+  'fullscreen code preview | undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent lineheight|subscript superscript blockquote| numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons   | insertfile image media pageembed  link anchor  codesample insertdatetime hr| a11ycheck ltr rtl';
+
+export const simplePlugins = 'lists image link fullscreen paste';
+
+export const simpleToolbar = [
+  'undo redo styles  forecolor fontsize bold italic alignleft aligncenter alignright alignjustify bullist numlist outdent indent lists image link fullscreen',
+];
+
+export const menubar = 'file edit insert view format table';
diff --git a/src/components/Transition/index.ts b/src/components/Transition/index.ts
new file mode 100644
index 0000000..55cbe54
--- /dev/null
+++ b/src/components/Transition/index.ts
@@ -0,0 +1,21 @@
+import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
+
+import ExpandTransitionGenerator from './src/ExpandTransition';
+
+export { default as CollapseTransition } from './src/CollapseTransition.vue';
+
+export const FadeTransition = createSimpleTransition('fade-transition');
+export const ScaleTransition = createSimpleTransition('scale-transition');
+export const SlideYTransition = createSimpleTransition('slide-y-transition');
+export const ScrollYTransition = createSimpleTransition('scroll-y-transition');
+export const SlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition');
+export const ScrollYReverseTransition = createSimpleTransition('scroll-y-reverse-transition');
+export const SlideXTransition = createSimpleTransition('slide-x-transition');
+export const ScrollXTransition = createSimpleTransition('scroll-x-transition');
+export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition');
+export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
+export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
+
+export const ExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true));
+
+export const ExpandTransition = createJavascriptTransition('expand-transition', ExpandTransitionGenerator(''));
diff --git a/src/components/Transition/src/CollapseTransition.vue b/src/components/Transition/src/CollapseTransition.vue
new file mode 100644
index 0000000..6b50fa1
--- /dev/null
+++ b/src/components/Transition/src/CollapseTransition.vue
@@ -0,0 +1,78 @@
+<template>
+  <transition mode="out-in" v-on="on">
+    <slot></slot>
+  </transition>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { addClass, removeClass } from '/@/utils/domUtils';
+
+  export default defineComponent({
+    name: 'CollapseTransition',
+    setup() {
+      return {
+        on: {
+          beforeEnter(el) {
+            addClass(el, 'collapse-transition');
+            if (!el.dataset) el.dataset = {};
+
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+            el.style.height = '0';
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+          },
+
+          enter(el) {
+            el.dataset.oldOverflow = el.style.overflow;
+            if (el.scrollHeight !== 0) {
+              el.style.height = el.scrollHeight + 'px';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            } else {
+              el.style.height = '';
+              el.style.paddingTop = el.dataset.oldPaddingTop;
+              el.style.paddingBottom = el.dataset.oldPaddingBottom;
+            }
+
+            el.style.overflow = 'hidden';
+          },
+
+          afterEnter(el) {
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+          },
+
+          beforeLeave(el) {
+            if (!el.dataset) el.dataset = {};
+            el.dataset.oldPaddingTop = el.style.paddingTop;
+            el.dataset.oldPaddingBottom = el.style.paddingBottom;
+            el.dataset.oldOverflow = el.style.overflow;
+
+            el.style.height = el.scrollHeight + 'px';
+            el.style.overflow = 'hidden';
+          },
+
+          leave(el) {
+            if (el.scrollHeight !== 0) {
+              addClass(el, 'collapse-transition');
+              el.style.height = 0;
+              el.style.paddingTop = 0;
+              el.style.paddingBottom = 0;
+            }
+          },
+
+          afterLeave(el) {
+            removeClass(el, 'collapse-transition');
+            el.style.height = '';
+            el.style.overflow = el.dataset.oldOverflow;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+          },
+        },
+      };
+    },
+  });
+</script>
diff --git a/src/components/Transition/src/CreateTransition.tsx b/src/components/Transition/src/CreateTransition.tsx
new file mode 100644
index 0000000..bad23b5
--- /dev/null
+++ b/src/components/Transition/src/CreateTransition.tsx
@@ -0,0 +1,69 @@
+import type { PropType } from 'vue';
+
+import { defineComponent, Transition, TransitionGroup } from 'vue';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+
+type Mode = 'in-out' | 'out-in' | 'default' | undefined;
+
+export function createSimpleTransition(name: string, origin = 'top center 0', mode?: Mode) {
+  return defineComponent({
+    name,
+    props: {
+      group: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+      mode: {
+        type: String as PropType<Mode>,
+        default: mode,
+      },
+      origin: {
+        type: String as PropType<string>,
+        default: origin,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      const onBeforeEnter = (el: HTMLElement) => {
+        el.style.transformOrigin = props.origin;
+      };
+
+      return () => {
+        const Tag = !props.group ? Transition : TransitionGroup;
+        return (
+          <Tag name={name} mode={props.mode} {...attrs} onBeforeEnter={onBeforeEnter}>
+            {() => getSlot(slots)}
+          </Tag>
+        );
+      };
+    },
+  });
+}
+export function createJavascriptTransition(name: string, functions: Recordable, mode: Mode = 'in-out') {
+  return defineComponent({
+    name,
+    props: {
+      mode: {
+        type: String as PropType<Mode>,
+        default: mode,
+      },
+    },
+    setup(props, { attrs, slots }) {
+      return () => {
+        return (
+          <Transition
+            name={name}
+            mode={props.mode}
+            {...attrs}
+            onBeforeEnter={functions.beforeEnter}
+            onEnter={functions.enter}
+            onLeave={functions.leave}
+            onAfterLeave={functions.afterLeave}
+            onLeaveCancelled={functions.afterLeave}
+          >
+            {() => getSlot(slots)}
+          </Transition>
+        );
+      };
+    },
+  });
+}
diff --git a/src/components/Transition/src/ExpandTransition.ts b/src/components/Transition/src/ExpandTransition.ts
new file mode 100644
index 0000000..2aaef9a
--- /dev/null
+++ b/src/components/Transition/src/ExpandTransition.ts
@@ -0,0 +1,89 @@
+/**
+ * Makes the first character of a string uppercase
+ */
+export function upperFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+interface HTMLExpandElement extends HTMLElement {
+  _parent?: (Node & ParentNode & HTMLElement) | null;
+  _initialStyle: {
+    transition: string;
+    overflow: string | null;
+    height?: string | null;
+    width?: string | null;
+  };
+}
+
+export default function (expandedParentClass = '', x = false) {
+  const sizeProperty = x ? 'width' : ('height' as 'width' | 'height');
+  const offsetProperty = `offset${upperFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
+
+  return {
+    beforeEnter(el: HTMLExpandElement) {
+      el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null;
+      el._initialStyle = {
+        transition: el.style.transition,
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      };
+    },
+
+    enter(el: HTMLExpandElement) {
+      const initialStyle = el._initialStyle;
+
+      el.style.setProperty('transition', 'none', 'important');
+      el.style.overflow = 'hidden';
+      // const offset = `${el[offsetProperty]}px`;
+
+      // el.style[sizeProperty] = '0';
+
+      void el.offsetHeight; // force reflow
+
+      el.style.transition = initialStyle.transition;
+
+      if (expandedParentClass && el._parent) {
+        el._parent.classList.add(expandedParentClass);
+      }
+
+      requestAnimationFrame(() => {
+        // el.style[sizeProperty] = offset;
+      });
+    },
+
+    afterEnter: resetStyles,
+    enterCancelled: resetStyles,
+
+    leave(el: HTMLExpandElement) {
+      el._initialStyle = {
+        transition: '',
+        overflow: el.style.overflow,
+        [sizeProperty]: el.style[sizeProperty],
+      };
+
+      el.style.overflow = 'hidden';
+      el.style[sizeProperty] = `${el[offsetProperty]}px`;
+      /* eslint-disable-next-line */
+      void el.offsetHeight; // force reflow
+
+      requestAnimationFrame(() => (el.style[sizeProperty] = '0'));
+    },
+
+    afterLeave,
+    leaveCancelled: afterLeave,
+  };
+
+  function afterLeave(el: HTMLExpandElement) {
+    if (expandedParentClass && el._parent) {
+      el._parent.classList.remove(expandedParentClass);
+    }
+    resetStyles(el);
+  }
+
+  function resetStyles(el: HTMLExpandElement) {
+    const size = el._initialStyle[sizeProperty];
+    el.style.overflow = el._initialStyle.overflow!;
+    if (size != null) el.style[sizeProperty] = size;
+    Reflect.deleteProperty(el, '_initialStyle');
+  }
+}
diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts
new file mode 100644
index 0000000..169035a
--- /dev/null
+++ b/src/components/Tree/index.ts
@@ -0,0 +1,6 @@
+import BasicTree from './src/BasicTree.vue';
+import './style';
+
+export { BasicTree };
+export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+export * from './src/types/tree';
diff --git a/src/components/Tree/src/BasicTree.vue b/src/components/Tree/src/BasicTree.vue
new file mode 100644
index 0000000..318c2cc
--- /dev/null
+++ b/src/components/Tree/src/BasicTree.vue
@@ -0,0 +1,496 @@
+<script lang="tsx">
+  import type { CSSProperties } from 'vue';
+  import type {
+    FieldNames,
+    TreeState,
+    TreeItem,
+    KeyType,
+    CheckKeys,
+    TreeActionType,
+  } from './types/tree';
+
+  import {
+    defineComponent,
+    reactive,
+    computed,
+    unref,
+    ref,
+    watchEffect,
+    toRaw,
+    watch,
+    onMounted,
+    nextTick,
+  } from 'vue';
+  import TreeHeader from './components/TreeHeader.vue';
+  import { Tree, Spin, Empty } from 'ant-design-vue';
+  import { TreeIcon } from './TreeIcon';
+  import { ScrollContainer } from '/@/components/Container';
+  import { omit, get, difference, cloneDeep } from 'lodash-es';
+  import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
+  import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
+  import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
+  import { useTree } from './hooks/useTree';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
+  import { CreateContextOptions } from '/@/components/ContextMenu';
+  import { treeEmits, treeProps } from './types/tree';
+  import { createBEM } from '/@/utils/bem';
+
+  export default defineComponent({
+    name: 'BasicTree',
+    inheritAttrs: false,
+    props: treeProps,
+    emits: treeEmits,
+    setup(props, { attrs, slots, emit, expose }) {
+      const [bem] = createBEM('tree');
+
+      const state = reactive<TreeState>({
+        checkStrictly: props.checkStrictly,
+        expandedKeys: props.expandedKeys || [],
+        selectedKeys: props.selectedKeys || [],
+        checkedKeys: props.checkedKeys || [],
+      });
+
+      const searchState = reactive({
+        startSearch: false,
+        searchText: '',
+        searchData: [] as TreeItem[],
+      });
+
+      const treeDataRef = ref<TreeItem[]>([]);
+
+      const [createContextMenu] = useContextMenu();
+
+      const getFieldNames = computed((): Required<FieldNames> => {
+        const { fieldNames } = props;
+        return {
+          children: 'children',
+          title: 'title',
+          key: 'key',
+          ...fieldNames,
+        };
+      });
+      const treeRef = ref<any>(null);
+
+      const getBindValues = computed(() => {
+        let propsData = {
+          blockNode: true,
+          ...attrs,
+          ...props,
+          expandedKeys: state.expandedKeys,
+          selectedKeys: state.selectedKeys,
+          checkedKeys: state.checkedKeys,
+          checkStrictly: state.checkStrictly,
+          fieldNames: unref(getFieldNames),
+          'onUpdate:expandedKeys': (v: KeyType[]) => {
+            state.expandedKeys = v;
+            emit('update:expandedKeys', v);
+          },
+          'onUpdate:selectedKeys': (v: KeyType[]) => {
+            state.selectedKeys = v;
+            emit('update:selectedKeys', v);
+          },
+          onCheck: (v: CheckKeys, e) => {
+            handleCheck(v, e);
+          },
+          onRightClick: handleRightClick,
+        };
+        return omit(propsData, 'treeData', 'class');
+      });
+      /**
+       * 2024-04-26
+       * liaozhiyang
+       * 【issues/1151】层级独立时勾选了父级，然后点击层级关联子级视觉上勾选了，但是保存子级没存上(把函数独立出来复用)
+       * */
+      const handleCheck = (v: CheckKeys, e?) => {
+        let currentValue = toRaw(state.checkedKeys) as KeyType[];
+        if (isArray(currentValue) && searchState.startSearch && e) {
+          // 代码逻辑说明: [issue/429]树搜索点击事件失效---
+          const value = e.node.eventKey;
+          currentValue = difference(currentValue, getChildrenKeys(value));
+          if (e.checked) {
+            currentValue.push(value);
+          }
+          state.checkedKeys = currentValue;
+        } else {
+          state.checkedKeys = v;
+        }
+        const rawVal = toRaw(state.checkedKeys);
+        emit('update:value', rawVal);
+        emit('check', rawVal, e);
+      };
+
+      const getTreeData = computed((): TreeItem[] =>
+        searchState.startSearch ? searchState.searchData : unref(treeDataRef),
+      );
+
+      const getNotFound = computed((): boolean => {
+        return !getTreeData.value || getTreeData.value.length === 0;
+      });
+
+      const {
+        deleteNodeByKey,
+        insertNodeByKey,
+        insertNodesByKey,
+        filterByLevel,
+        updateNodeByKey,
+        getAllKeys,
+        getChildrenKeys,
+        getEnabledKeys,
+        getSelectedNode,
+      } = useTree(treeDataRef, getFieldNames);
+
+      function getIcon(params: Recordable, icon?: string) {
+        if (!icon) {
+          if (props.renderIcon && isFunction(props.renderIcon)) {
+            return props.renderIcon(params);
+          }
+        }
+        return icon;
+      }
+
+      async function handleRightClick({ event, node }: Recordable) {
+        const { rightMenuList: menuList = [], beforeRightClick } = props;
+        let contextMenuOptions: CreateContextOptions = { event, items: [] };
+
+        if (beforeRightClick && isFunction(beforeRightClick)) {
+          let result = await beforeRightClick(node, event);
+          if (Array.isArray(result)) {
+            contextMenuOptions.items = result;
+          } else {
+            Object.assign(contextMenuOptions, result);
+          }
+        } else {
+          contextMenuOptions.items = menuList;
+        }
+        if (!contextMenuOptions.items?.length) return;
+        contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
+        createContextMenu(contextMenuOptions);
+      }
+
+      function setExpandedKeys(keys: KeyType[]) {
+        state.expandedKeys = keys;
+      }
+
+      function getExpandedKeys() {
+        return state.expandedKeys;
+      }
+      function setSelectedKeys(keys: KeyType[]) {
+        state.selectedKeys = keys;
+      }
+
+      function getSelectedKeys() {
+        return state.selectedKeys;
+      }
+
+      function setCheckedKeys(keys: CheckKeys) {
+        state.checkedKeys = keys;
+      }
+
+      function getCheckedKeys() {
+        return state.checkedKeys;
+      }
+
+      function checkAll(checkAll: boolean) {
+        state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]);
+      }
+
+      function expandAll(expandAll: boolean) {
+        state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]);
+      }
+
+      function onStrictlyChange(strictly: boolean) {
+        state.checkStrictly = strictly;
+      }
+
+      watch(
+        () => props.searchValue,
+        (val) => {
+          if (val !== searchState.searchText) {
+            searchState.searchText = val;
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
+
+      watch(
+        () => props.treeData,
+        (val) => {
+          if (val) {
+            handleSearch(searchState.searchText);
+          }
+        },
+      );
+
+      function handleSearch(searchValue: string) {
+        if (searchValue !== searchState.searchText) searchState.searchText = searchValue;
+        emit('update:searchValue', searchValue);
+        if (!searchValue) {
+          searchState.startSearch = false;
+          return;
+        }
+        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
+          unref(props);
+        searchState.startSearch = true;
+        const { title: titleField, key: keyField } = unref(getFieldNames);
+
+        const matchedKeys: string[] = [];
+        searchState.searchData = filter(
+          unref(treeDataRef),
+          (node) => {
+            const result = filterFn
+              ? filterFn(searchValue, node, unref(getFieldNames))
+              : node[titleField]?.includes(searchValue) ?? false;
+            if (result) {
+              matchedKeys.push(node[keyField]);
+            }
+            return result;
+          },
+          unref(getFieldNames),
+        );
+
+        if (expandOnSearch) {
+          const expandKeys = treeToList(searchState.searchData).map((val) => {
+            return val[keyField];
+          });
+          if (expandKeys && expandKeys.length) {
+            setExpandedKeys(expandKeys);
+          }
+        }
+
+        if (checkOnSearch && checkable && matchedKeys.length) {
+          setCheckedKeys(matchedKeys);
+        }
+
+        if (selectedOnSearch && matchedKeys.length) {
+          setSelectedKeys(matchedKeys);
+        }
+      }
+
+      function handleClickNode(key: string, children: TreeItem[]) {
+        if (!props.clickRowToExpand || !children || children.length === 0) return;
+        if (!state.expandedKeys.includes(key)) {
+          setExpandedKeys([...state.expandedKeys, key]);
+        } else {
+          const keys = [...state.expandedKeys];
+          const index = keys.findIndex((item) => item === key);
+          if (index !== -1) {
+            keys.splice(index, 1);
+          }
+          setExpandedKeys(keys);
+        }
+      }
+
+      watchEffect(() => {
+        treeDataRef.value = props.treeData as TreeItem[];
+      });
+
+      onMounted(() => {
+        const level = parseInt(props.defaultExpandLevel);
+        if (level > 0) {
+          state.expandedKeys = filterByLevel(level);
+        } else if (props.defaultExpandAll) {
+          expandAll(true);
+        }
+      });
+
+      watchEffect(() => {
+        state.expandedKeys = props.expandedKeys;
+      });
+
+      watchEffect(() => {
+        state.selectedKeys = props.selectedKeys;
+      });
+
+      watchEffect(() => {
+        state.checkedKeys = props.checkedKeys;
+      });
+
+      watch(
+        () => props.value,
+        () => {
+          state.checkedKeys = toRaw(props.value || props.checkedKeys || []);
+        },
+        { immediate: true },
+      );
+
+      watch(
+        () => state.checkedKeys,
+        () => {
+          const v = toRaw(state.checkedKeys);
+          emit('update:value', v);
+          emit('change', v);
+        },
+      );
+      // 代码逻辑说明: 【issues/1151】层级独立时勾选了父级，然后点击层级关联子级视觉上勾选了，但是保存子级没存上
+      watch(
+        () => props.checkStrictly,
+        () => {
+          state.checkStrictly = props.checkStrictly;
+          nextTick(() => {
+            const value = treeRef.value?.checkedKeys;
+            handleCheck([...value]);
+          });
+        }
+      );
+
+      const instance: TreeActionType = {
+        setExpandedKeys,
+        getExpandedKeys,
+        setSelectedKeys,
+        getSelectedKeys,
+        setCheckedKeys,
+        getCheckedKeys,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        updateNodeByKey,
+        getSelectedNode,
+        checkAll,
+        expandAll,
+        filterByLevel: (level: number) => {
+          state.expandedKeys = filterByLevel(level);
+        },
+        setSearchValue: (value: string) => {
+          handleSearch(value);
+        },
+        getSearchValue: () => {
+          return searchState.searchText;
+        },
+      };
+
+      function renderAction(node: TreeItem) {
+        const { actionList } = props;
+        if (!actionList || actionList.length === 0) return;
+        return actionList.map((item, index) => {
+          let nodeShow = true;
+          if (isFunction(item.show)) {
+            nodeShow = item.show?.(node);
+          } else if (isBoolean(item.show)) {
+            nodeShow = item.show;
+          }
+
+          if (!nodeShow) return null;
+
+          return (
+            <span key={index} class={bem('action')}>
+              {item.render(node)}
+            </span>
+          );
+        });
+      }
+
+      const treeData = computed(() => {
+        const data = cloneDeep(getTreeData.value);
+        eachTree(data, (item, _parent) => {
+          const searchText = searchState.searchText;
+          const { highlight } = unref(props);
+          const {
+            title: titleField,
+            key: keyField,
+            children: childrenField,
+          } = unref(getFieldNames);
+
+          const icon = getIcon(item, item.icon);
+          const title = get(item, titleField);
+
+          const searchIdx = searchText ? title.indexOf(searchText) : -1;
+          const isHighlight =
+            searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
+          const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
+
+          const titleDom = isHighlight ? (
+            <span class={unref(getBindValues)?.blockNode ? `${bem('content')}` : ''}>
+              <span>{title.substr(0, searchIdx)}</span>
+              <span style={highlightStyle}>{searchText}</span>
+              <span>{title.substr(searchIdx + (searchText as string).length)}</span>
+            </span>
+          ) : (
+            title
+          );
+          item[titleField] = (
+            <span
+              class={`${bem('title')} pl-2`}
+              onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
+            >
+              {slots?.title ? (
+                getSlot(slots, 'title', item)
+              ) : (
+                <>
+                  {icon && <TreeIcon icon={icon} />}
+                  {titleDom}
+                  <span class={bem('actions')}>{renderAction(item)}</span>
+                </>
+              )}
+            </span>
+          );
+          return item;
+        });
+        return data;
+      });
+
+      expose(instance);
+
+      return () => {
+        const { title, helpMessage, toolbar, search, checkable } = props;
+        const showTitle = title || toolbar || search || slots.headerTitle;
+        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
+        return (
+          <div class={[bem(), 'h-full',unref(getBindValues).multiple === false ? 'custom-radio':'' , attrs.class]}>
+            {showTitle && (
+              <TreeHeader
+                checkable={checkable}
+                checkAll={checkAll}
+                expandAll={expandAll}
+                title={title}
+                search={search}
+                toolbar={toolbar}
+                helpMessage={helpMessage}
+                onStrictlyChange={onStrictlyChange}
+                onSearch={handleSearch}
+                onClickSearch={($event) => emit('search', $event)}
+                searchText={searchState.searchText}
+              >
+                {extendSlots(slots)}
+              </TreeHeader>
+            )}
+            <Spin spinning={unref(props.loading)} tip="加载中...">
+              <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+                <Tree ref={treeRef} {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
+              </ScrollContainer>
+              <Empty
+                v-show={unref(getNotFound)}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                class="!mt-4"
+              />
+            </Spin>
+          </div>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+// 代码逻辑说明: 【JHHB-192】主职务选择，多选框改成单选
+.custom-radio {
+  :deep(.ant-tree) {
+    .ant-tree-checkbox {
+      .ant-tree-checkbox-inner {
+          border-style: solid;
+          border-width: 1px;
+          border-radius: 50%;
+        &::after {
+          width: 0;
+          height: 0;
+          left: 50%;
+          border-width: 6px;
+          border-radius: 50%;
+          margin-left: -3px;
+          margin-top: 1px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Tree/src/TreeIcon.ts b/src/components/Tree/src/TreeIcon.ts
new file mode 100644
index 0000000..900d6bf
--- /dev/null
+++ b/src/components/Tree/src/TreeIcon.ts
@@ -0,0 +1,13 @@
+import type { VNode, FunctionalComponent } from 'vue';
+
+import { h } from 'vue';
+import { isString } from '@vue/shared';
+import { Icon } from '/@/components/Icon';
+
+export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
+  if (!icon) return null;
+  if (isString(icon)) {
+    return h(Icon, { icon, class: 'mr-1' });
+  }
+  return Icon;
+};
diff --git a/src/components/Tree/src/components/TreeHeader.vue b/src/components/Tree/src/components/TreeHeader.vue
new file mode 100644
index 0000000..a1792d2
--- /dev/null
+++ b/src/components/Tree/src/components/TreeHeader.vue
@@ -0,0 +1,171 @@
+<template>
+  <div :class="bem()" class="flex px-2 py-1.5 items-center">
+    <slot name="headerTitle" v-if="slots.headerTitle"></slot>
+    <BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
+      {{ title }}
+    </BasicTitle>
+    <div
+      class="flex items-center flex-1 cursor-pointer justify-self-stretch justify-end"
+      v-if="search || toolbar"
+    >
+      <div :class="getInputSearchCls" v-if="search">
+        <InputSearch
+          :placeholder="t('common.searchText')"
+          size="small"
+          allowClear
+          v-model:value="searchValue"
+          @search="$emit('clickSearch', $event)"
+        />
+      </div>
+      <Dropdown @click.prevent v-if="toolbar">
+        <Icon icon="ion:ellipsis-vertical" />
+        <template #overlay>
+          <Menu @click="handleMenuClick">
+            <template v-for="item in toolbarList" :key="item.value">
+              <MenuItem v-bind="{ key: item.value }">
+                {{ item.label }}
+              </MenuItem>
+              <MenuDivider v-if="item.divider" />
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch, useSlots } from 'vue';
+  import { Dropdown, Menu, MenuItem, MenuDivider, InputSearch } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { BasicTitle } from '/@/components/Basic';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDebounceFn } from '@vueuse/core';
+  import { createBEM } from '/@/utils/bem';
+  import { ToolbarEnum } from '../types/tree';
+
+  const searchValue = ref('');
+
+  const [bem] = createBEM('tree-header');
+
+  const props = defineProps({
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    toolbar: {
+      type: Boolean,
+      default: false,
+    },
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    searchText: {
+      type: String,
+      default: '',
+    },
+    checkAll: {
+      type: Function,
+      default: undefined,
+    },
+    expandAll: {
+      type: Function,
+      default: undefined,
+    },
+  } as const);
+  const emit = defineEmits(['strictly-change', 'search', 'clickSearch']);
+
+  const slots = useSlots();
+  const { t } = useI18n();
+
+  const getInputSearchCls = computed(() => {
+    const titleExists = slots.headerTitle || props.title;
+    return [
+      'mr-1',
+      'w-full',
+      {
+        ['ml-5']: titleExists,
+      },
+    ];
+  });
+
+  const toolbarList = computed(() => {
+    const { checkable } = props;
+    const defaultToolbarList = [
+      { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+      {
+        label: t('component.tree.unExpandAll'),
+        value: ToolbarEnum.UN_EXPAND_ALL,
+        divider: checkable,
+      },
+    ];
+
+    return checkable
+      ? [
+          { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+          {
+            label: t('component.tree.unSelectAll'),
+            value: ToolbarEnum.UN_SELECT_ALL,
+            divider: checkable,
+          },
+          ...defaultToolbarList,
+          { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+          { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
+        ]
+      : defaultToolbarList;
+  });
+
+  function handleMenuClick(e: { key: ToolbarEnum }) {
+    const { key } = e;
+    switch (key) {
+      case ToolbarEnum.SELECT_ALL:
+        props.checkAll?.(true);
+        break;
+      case ToolbarEnum.UN_SELECT_ALL:
+        props.checkAll?.(false);
+        break;
+      case ToolbarEnum.EXPAND_ALL:
+        props.expandAll?.(true);
+        break;
+      case ToolbarEnum.UN_EXPAND_ALL:
+        props.expandAll?.(false);
+        break;
+      case ToolbarEnum.CHECK_STRICTLY:
+        emit('strictly-change', false);
+        break;
+      case ToolbarEnum.CHECK_UN_STRICTLY:
+        emit('strictly-change', true);
+        break;
+    }
+  }
+
+  function emitChange(value?: string): void {
+    emit('search', value);
+  }
+
+  const debounceEmitChange = useDebounceFn(emitChange, 200);
+
+  watch(
+    () => searchValue.value,
+    (v) => {
+      debounceEmitChange(v);
+    },
+  );
+
+  watch(
+    () => props.searchText,
+    (v) => {
+      if (v !== searchValue.value) {
+        searchValue.value = v;
+      }
+    },
+  );
+</script>
diff --git a/src/components/Tree/src/hooks/useTree.ts b/src/components/Tree/src/hooks/useTree.ts
new file mode 100644
index 0000000..17345a2
--- /dev/null
+++ b/src/components/Tree/src/hooks/useTree.ts
@@ -0,0 +1,207 @@
+import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from '../types/tree';
+import type { Ref, ComputedRef } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { cloneDeep } from 'lodash-es';
+import { unref } from 'vue';
+import { forEach } from '/@/utils/helper/treeHelper';
+
+export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
+  function getAllKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getAllKeys(children) as string[]));
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  // get keys that can be checked and selected
+  function getEnabledKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getEnabledKeys(children) as string[]));
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
+    const keys: KeyType[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      const children = node[childrenField];
+      if (nodeKey === node[keyField]) {
+        keys.push(node[keyField]!);
+        if (children && children.length) {
+          keys.push(...(getAllKeys(children) as string[]));
+        }
+      } else {
+        if (children && children.length) {
+          keys.push(...getChildrenKeys(nodeKey, children));
+        }
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  // Update node
+  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData[index] = { ...treeData[index], ...node };
+        break;
+      } else if (children && children.length) {
+        updateNodeByKey(key, node, element[childrenField]);
+      }
+    }
+  }
+
+  // Expand the specified level
+  function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
+    if (!level) {
+      return [];
+    }
+    const res: (string | number)[] = [];
+    const data = list || unref(treeDataRef) || [];
+    for (let index = 0; index < data.length; index++) {
+      const item = data[index];
+
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      const key = keyField ? item[keyField] : '';
+      const children = childrenField ? item[childrenField] : [];
+      res.push(key);
+      if (children && children.length && currentLevel < level) {
+        currentLevel += 1;
+        res.push(...filterByLevel(level, children, currentLevel));
+      }
+    }
+    return res as string[] | number[];
+  }
+
+  /**
+   * 添加节点
+   */
+  function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!parentKey) {
+      treeData[push](node);
+      treeDataRef.value = treeData;
+      return;
+    }
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return;
+
+    forEach(treeData, (treeItem) => {
+      if (treeItem[keyField] === parentKey) {
+        treeItem[childrenField] = treeItem[childrenField] || [];
+        treeItem[childrenField][push](node);
+        return true;
+      }
+    });
+    treeDataRef.value = treeData;
+  }
+  /**
+   * 批量添加节点
+   */
+  function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!list || list.length < 1) {
+      return;
+    }
+    if (!parentKey) {
+      for (let i = 0; i < list.length; i++) {
+        treeData[push](list[i]);
+      }
+    } else {
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      if (!childrenField || !keyField) return;
+
+      forEach(treeData, (treeItem) => {
+        if (treeItem[keyField] === parentKey) {
+          treeItem[childrenField] = treeItem[childrenField] || [];
+          for (let i = 0; i < list.length; i++) {
+            treeItem[childrenField][push](list[i]);
+          }
+          treeDataRef.value = treeData;
+          return true;
+        }
+      });
+    }
+  }
+  // Delete node
+  function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData.splice(index, 1);
+        break;
+      } else if (children && children.length) {
+        deleteNodeByKey(key, element[childrenField]);
+      }
+    }
+  }
+
+  // Get selected node
+  function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
+    if (!key && key !== 0) return null;
+    const treeData = list || unref(treeDataRef);
+    treeData.forEach((item) => {
+      if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
+      if (item.key === key) {
+        selectedNode = item;
+        return;
+      }
+      if (item.children && item.children.length) {
+        selectedNode = getSelectedNode(key, item.children, selectedNode);
+      }
+    });
+    return selectedNode || null;
+  }
+  return {
+    deleteNodeByKey,
+    insertNodeByKey,
+    insertNodesByKey,
+    filterByLevel,
+    updateNodeByKey,
+    getAllKeys,
+    getChildrenKeys,
+    getEnabledKeys,
+    getSelectedNode,
+  };
+}
diff --git a/src/components/Tree/src/types/tree.ts b/src/components/Tree/src/types/tree.ts
new file mode 100644
index 0000000..691daae
--- /dev/null
+++ b/src/components/Tree/src/types/tree.ts
@@ -0,0 +1,195 @@
+import type { ExtractPropTypes } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { buildProps } from '/@/utils/props';
+
+export enum ToolbarEnum {
+  SELECT_ALL,
+  UN_SELECT_ALL,
+  EXPAND_ALL,
+  UN_EXPAND_ALL,
+  CHECK_STRICTLY,
+  CHECK_UN_STRICTLY,
+}
+
+export const treeEmits = [
+  'update:expandedKeys',
+  'update:selectedKeys',
+  'update:value',
+  'change',
+  'check',
+  'search',
+  'update:searchValue',
+];
+
+export interface TreeState {
+  expandedKeys: KeyType[];
+  selectedKeys: KeyType[];
+  checkedKeys: CheckKeys;
+  checkStrictly: boolean;
+}
+
+export interface FieldNames {
+  children?: string;
+  title?: string;
+  key?: string;
+}
+
+export type KeyType = string | number;
+
+export type CheckKeys =
+  | KeyType[]
+  | { checked: string[] | number[]; halfChecked: string[] | number[] };
+
+export const treeProps = buildProps({
+  value: {
+    type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
+  },
+
+  renderIcon: {
+    type: Function as PropType<(params: Recordable) => string>,
+  },
+
+  helpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+
+  title: {
+    type: String,
+    default: '',
+  },
+  toolbar: Boolean,
+  search: Boolean,
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  checkStrictly: Boolean,
+  clickRowToExpand: {
+    type: Boolean,
+    default: false,
+  },
+  checkable: Boolean,
+  defaultExpandLevel: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  defaultExpandAll: Boolean,
+
+  fieldNames: {
+    type: Object as PropType<FieldNames>,
+  },
+
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+  },
+
+  actionList: {
+    type: Array as PropType<TreeActionItem[]>,
+    default: () => [],
+  },
+
+  expandedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  selectedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  checkedKeys: {
+    type: Array as PropType<CheckKeys>,
+    default: () => [],
+  },
+
+  beforeRightClick: {
+    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
+    default: undefined,
+  },
+
+  rightMenuList: {
+    type: Array as PropType<ContextMenuItem[]>,
+  },
+  // 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
+  filterFn: {
+    type: Function as PropType<
+      (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean
+    >,
+    default: undefined,
+  },
+  // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+  highlight: {
+    type: [Boolean, String] as PropType<Boolean | String>,
+    default: false,
+  },
+  // 搜索完成时自动展开结果
+  expandOnSearch: Boolean,
+  // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+  checkOnSearch: Boolean,
+  // 搜索完成自动select所有结果
+  selectedOnSearch: Boolean,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+  children?: ContextMenuItem[];
+}
+
+export interface ContextMenuOptions {
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export interface TreeItem extends TreeDataItem {
+  icon?: any;
+}
+
+export interface TreeActionItem {
+  render: (record: Recordable) => any;
+  show?: boolean | ((record: Recordable) => boolean);
+}
+
+export interface InsertNodeParams {
+  parentKey: string | null;
+  node: TreeDataItem;
+  list?: TreeDataItem[];
+  push?: 'push' | 'unshift';
+}
+
+export interface TreeActionType {
+  checkAll: (checkAll: boolean) => void;
+  expandAll: (expandAll: boolean) => void;
+  setExpandedKeys: (keys: KeyType[]) => void;
+  getExpandedKeys: () => KeyType[];
+  setSelectedKeys: (keys: KeyType[]) => void;
+  getSelectedKeys: () => KeyType[];
+  setCheckedKeys: (keys: CheckKeys) => void;
+  getCheckedKeys: () => CheckKeys;
+  filterByLevel: (level: number) => void;
+  insertNodeByKey: (opt: InsertNodeParams) => void;
+  insertNodesByKey: (opt: InsertNodeParams) => void;
+  deleteNodeByKey: (key: string) => void;
+  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
+  setSearchValue: (value: string) => void;
+  getSearchValue: () => string;
+  getSelectedNode: (
+    key: KeyType,
+    treeList?: TreeItem[],
+    selectNode?: TreeItem | null,
+  ) => TreeItem | null;
+}
diff --git a/src/components/Tree/style/index.less b/src/components/Tree/style/index.less
new file mode 100644
index 0000000..472d4ca
--- /dev/null
+++ b/src/components/Tree/style/index.less
@@ -0,0 +1,52 @@
+@tree-prefix-cls: ~'@{namespace}-tree';
+
+.@{tree-prefix-cls} {
+  background-color: @component-background;
+
+  .ant-tree-node-content-wrapper {
+    position: relative;
+
+    .ant-tree-title {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 10px;
+
+    &:hover {
+      .@{tree-prefix-cls}__action {
+        visibility: visible;
+      }
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+  }
+
+  &__actions {
+    position: absolute;
+    //top: 2px;
+    right: 3px;
+    display: flex;
+  }
+
+  &__action {
+    margin-left: 4px;
+    visibility: hidden;
+  }
+
+  &-header {
+    border-bottom: 1px solid @border-color-base;
+  }
+}
diff --git a/src/components/Tree/style/index.ts b/src/components/Tree/style/index.ts
new file mode 100644
index 0000000..d74e52e
--- /dev/null
+++ b/src/components/Tree/style/index.ts
@@ -0,0 +1 @@
+import './index.less';
diff --git a/src/components/Tree_backup/index.ts b/src/components/Tree_backup/index.ts
new file mode 100644
index 0000000..f47820d
--- /dev/null
+++ b/src/components/Tree_backup/index.ts
@@ -0,0 +1,5 @@
+import BasicTree from './src/Tree.vue';
+
+export { BasicTree };
+export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+export * from './src/typing';
diff --git a/src/components/Tree_backup/src/Tree.vue b/src/components/Tree_backup/src/Tree.vue
new file mode 100644
index 0000000..e1eb8f3
--- /dev/null
+++ b/src/components/Tree_backup/src/Tree.vue
@@ -0,0 +1,449 @@
+<script lang="tsx">
+  import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './typing';
+
+  import { defineComponent, reactive, computed, unref, ref, watchEffect, toRaw, watch, CSSProperties, onMounted } from 'vue';
+  import { Tree, Empty } from 'ant-design-vue';
+  import { TreeIcon } from './TreeIcon';
+  import TreeHeader from './TreeHeader.vue';
+  import { ScrollContainer } from '/@/components/Container';
+
+  import { omit, get, difference } from 'lodash-es';
+  import { isArray, isBoolean, isFunction } from '/@/utils/is';
+  import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
+  import { filter } from '/@/utils/helper/treeHelper';
+
+  import { useTree } from './useTree';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { basicProps } from './props';
+  import { CreateContextOptions } from '/@/components/ContextMenu';
+
+  import { CheckEvent } from './typing';
+
+  interface State {
+    expandedKeys: Keys;
+    selectedKeys: Keys;
+    checkedKeys: CheckKeys;
+    checkStrictly: boolean;
+  }
+
+  export default defineComponent({
+    name: 'BasicTree',
+    inheritAttrs: false,
+    props: basicProps,
+    emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check', 'search', 'update:searchValue'],
+    setup(props, { attrs, slots, emit, expose }) {
+      const state = reactive<State>({
+        checkStrictly: props.checkStrictly,
+        expandedKeys: props.expandedKeys || [],
+        selectedKeys: props.selectedKeys || [],
+        checkedKeys: props.checkedKeys || [],
+      });
+
+      const searchState = reactive({
+        startSearch: false,
+        searchData: [] as TreeItem[],
+      });
+
+      const treeDataRef = ref<TreeItem[]>([]);
+
+      const [createContextMenu] = useContextMenu();
+      const { prefixCls } = useDesign('basic-tree');
+
+      const getReplaceFields = computed((): Required<ReplaceFields> => {
+        const { replaceFields } = props;
+        return {
+          children: 'children',
+          title: 'title',
+          key: 'key',
+          ...replaceFields,
+        };
+      });
+
+      const getBindValues = computed(() => {
+        let propsData = {
+          blockNode: true,
+          ...attrs,
+          ...props,
+          expandedKeys: state.expandedKeys,
+          selectedKeys: state.selectedKeys,
+          checkedKeys: state.checkedKeys,
+          checkStrictly: state.checkStrictly,
+          replaceFields: unref(getReplaceFields),
+          'onUpdate:expandedKeys': (v: Keys) => {
+            state.expandedKeys = v;
+            emit('update:expandedKeys', v);
+          },
+          'onUpdate:selectedKeys': (v: Keys) => {
+            state.selectedKeys = v;
+            emit('update:selectedKeys', v);
+          },
+          onCheck: (v: CheckKeys, e: CheckEvent) => {
+            let currentValue = toRaw(state.checkedKeys) as Keys;
+            if (isArray(currentValue) && searchState.startSearch) {
+              const { key } = unref(getReplaceFields);
+              currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
+              if (e.checked) {
+                currentValue.push(e.node.$attrs.node[key]);
+              }
+              state.checkedKeys = currentValue;
+            } else {
+              state.checkedKeys = v;
+            }
+
+            const rawVal = toRaw(state.checkedKeys);
+            emit('update:value', rawVal);
+            emit('check', rawVal, e);
+          },
+          onRightClick: handleRightClick,
+        };
+        return omit(propsData, 'treeData', 'class');
+      });
+
+      const getTreeData = computed((): TreeItem[] => (searchState.startSearch ? searchState.searchData : unref(treeDataRef)));
+
+      const getNotFound = computed((): boolean => {
+        return !getTreeData.value || getTreeData.value.length === 0;
+      });
+
+      const { deleteNodeByKey, insertNodeByKey, insertNodesByKey, filterByLevel, updateNodeByKey, getAllKeys, getChildrenKeys, getEnabledKeys } =
+        useTree(treeDataRef, getReplaceFields);
+
+      function getIcon(params: Recordable, icon?: string) {
+        if (!icon) {
+          if (props.renderIcon && isFunction(props.renderIcon)) {
+            return props.renderIcon(params);
+          }
+        }
+        return icon;
+      }
+
+      async function handleRightClick({ event, node }: Recordable) {
+        const { rightMenuList: menuList = [], beforeRightClick } = props;
+        let contextMenuOptions: CreateContextOptions = { event, items: [] };
+
+        if (beforeRightClick && isFunction(beforeRightClick)) {
+          let result = await beforeRightClick(node, event);
+          if (Array.isArray(result)) {
+            contextMenuOptions.items = result;
+          } else {
+            Object.assign(contextMenuOptions, result);
+          }
+        } else {
+          contextMenuOptions.items = menuList;
+        }
+        if (!contextMenuOptions.items?.length) return;
+        createContextMenu(contextMenuOptions);
+      }
+
+      function setExpandedKeys(keys: Keys) {
+        state.expandedKeys = keys;
+      }
+
+      function getExpandedKeys() {
+        return state.expandedKeys;
+      }
+
+      function setSelectedKeys(keys: Keys) {
+        state.selectedKeys = keys;
+      }
+
+      function getSelectedKeys() {
+        return state.selectedKeys;
+      }
+
+      function setCheckedKeys(keys: CheckKeys) {
+        state.checkedKeys = keys;
+      }
+
+      function getCheckedKeys() {
+        return state.checkedKeys;
+      }
+
+      function checkAll(checkAll: boolean) {
+        state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys);
+      }
+
+      function expandAll(expandAll: boolean) {
+        state.expandedKeys = expandAll ? getAllKeys() : ([] as Keys);
+      }
+
+      function onStrictlyChange(strictly: boolean) {
+        state.checkStrictly = strictly;
+      }
+
+      const searchText = ref('');
+      watchEffect(() => {
+        if (props.searchValue !== searchText.value) searchText.value = props.searchValue;
+      });
+
+      function handleSearch(searchValue: string) {
+        if (searchValue !== searchText.value) searchText.value = searchValue;
+        emit('update:searchValue', searchValue);
+        if (!searchValue) {
+          searchState.startSearch = false;
+          return;
+        }
+        const { filterFn, checkable, expandOnSearch, checkOnSearch } = unref(props);
+        searchState.startSearch = true;
+        const { title: titleField, key: keyField } = unref(getReplaceFields);
+
+        const searchKeys: string[] = [];
+        searchState.searchData = filter(
+          unref(treeDataRef),
+          (node) => {
+            const result = filterFn ? filterFn(searchValue, node, unref(getReplaceFields)) : node[titleField]?.includes(searchValue) ?? false;
+            if (result) {
+              searchKeys.push(node[keyField]);
+            }
+            return result;
+          },
+          unref(getReplaceFields)
+        );
+
+        if (expandOnSearch && searchKeys.length > 0) {
+          setExpandedKeys(searchKeys);
+        }
+
+        if (checkOnSearch && checkable && searchKeys.length > 0) {
+          setCheckedKeys(searchKeys);
+        }
+      }
+
+      function handleClickNode(key: string, children: TreeItem[]) {
+        if (!props.clickRowToExpand || !children || children.length === 0) return;
+        if (!state.expandedKeys.includes(key)) {
+          setExpandedKeys([...state.expandedKeys, key]);
+        } else {
+          const keys = [...state.expandedKeys];
+          const index = keys.findIndex((item) => item === key);
+          if (index !== -1) {
+            keys.splice(index, 1);
+          }
+          setExpandedKeys(keys);
+        }
+      }
+
+      watchEffect(() => {
+        treeDataRef.value = props.treeData as TreeItem[];
+        handleSearch(unref(searchText));
+      });
+
+      onMounted(() => {
+        const level = parseInt(props.defaultExpandLevel);
+        if (level > 0) {
+          state.expandedKeys = filterByLevel(level);
+        } else if (props.defaultExpandAll) {
+          expandAll(true);
+        }
+      });
+
+      watchEffect(() => {
+        state.expandedKeys = props.expandedKeys;
+      });
+
+      watchEffect(() => {
+        state.selectedKeys = props.selectedKeys;
+      });
+
+      watchEffect(() => {
+        state.checkedKeys = props.checkedKeys;
+      });
+
+      watch(
+        () => props.value,
+        () => {
+          state.checkedKeys = toRaw(props.value || []);
+        }
+      );
+
+      watch(
+        () => state.checkedKeys,
+        () => {
+          const v = toRaw(state.checkedKeys);
+          emit('update:value', v);
+          emit('change', v);
+        }
+      );
+
+      // watchEffect(() => {
+      //   console.log('======================');
+      //   console.log(props.value);
+      //   console.log('======================');
+      //   if (props.value) {
+      //     state.checkedKeys = props.value;
+      //   }
+      // });
+
+      watchEffect(() => {
+        state.checkStrictly = props.checkStrictly;
+      });
+
+      const instance: TreeActionType = {
+        setExpandedKeys,
+        getExpandedKeys,
+        setSelectedKeys,
+        getSelectedKeys,
+        setCheckedKeys,
+        getCheckedKeys,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        updateNodeByKey,
+        checkAll,
+        expandAll,
+        filterByLevel: (level: number) => {
+          state.expandedKeys = filterByLevel(level);
+        },
+        setSearchValue: (value: string) => {
+          handleSearch(value);
+        },
+        getSearchValue: () => {
+          return searchText.value;
+        },
+      };
+
+      expose(instance);
+
+      function renderAction(node: TreeItem) {
+        const { actionList } = props;
+        if (!actionList || actionList.length === 0) return;
+        return actionList.map((item, index) => {
+          let nodeShow = true;
+          if (isFunction(item.show)) {
+            nodeShow = item.show?.(node);
+          } else if (isBoolean(item.show)) {
+            nodeShow = item.show;
+          }
+
+          if (!nodeShow) return null;
+
+          return (
+            <span key={index} class={`${prefixCls}__action`}>
+              {item.render(node)}
+            </span>
+          );
+        });
+      }
+
+      function renderTreeNode({ data, level }: { data: TreeItem[] | undefined; level: number }) {
+        if (!data) {
+          return null;
+        }
+        return data.map((item) => {
+          const { title: titleField, key: keyField, children: childrenField } = unref(getReplaceFields);
+
+          const propsData = omit(item, 'title');
+          const icon = getIcon({ ...item, level }, item.icon);
+          const children = get(item, childrenField) || [];
+          return (
+            <Tree.TreeNode {...propsData} node={toRaw(item)} key={get(item, keyField)}>
+              {{
+                title: () => (
+                  <span class={`${prefixCls}-title pl-2`} onclick={handleClickNode.bind(null, item[keyField], item[childrenField])}>
+                    {slots?.title ? (
+                      getSlot(slots, 'title', item)
+                    ) : (
+                      <>
+                        {icon && <TreeIcon icon={icon} />}
+                        <span class={unref(getBindValues)?.blockNode ? `${prefixCls}__content` : ''}>{get(item, titleField)}</span>
+                        <span class={`${prefixCls}__actions`}>{renderAction({ ...item, level })}</span>
+                      </>
+                    )}
+                  </span>
+                ),
+                default: () => renderTreeNode({ data: children, level: level + 1 }),
+              }}
+            </Tree.TreeNode>
+          );
+        });
+      }
+
+      return () => {
+        const { title, helpMessage, toolbar, search, checkable } = props;
+        const showTitle = title || toolbar || search || slots.headerTitle;
+        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
+        return (
+          <div class={[prefixCls, 'h-full', attrs.class]}>
+            {showTitle && (
+              <TreeHeader
+                checkable={checkable}
+                checkAll={checkAll}
+                expandAll={expandAll}
+                title={title}
+                search={search}
+                toolbar={toolbar}
+                helpMessage={helpMessage}
+                onStrictlyChange={onStrictlyChange}
+                onSearch={handleSearch}
+                onClickSearch={($event) => emit('search', $event)}
+                searchText={unref(searchText)}
+              >
+                {extendSlots(slots)}
+              </TreeHeader>
+            )}
+            <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+              <Tree {...unref(getBindValues)} showIcon={false}>
+                {{
+                  // switcherIcon: () => <DownOutlined />,
+                  default: () => renderTreeNode({ data: unref(getTreeData), level: 1 }),
+                  ...extendSlots(slots),
+                }}
+              </Tree>
+            </ScrollContainer>
+
+            <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
+          </div>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-tree';
+
+  .@{prefix-cls} {
+    background-color: @component-background;
+
+    .ant-tree-node-content-wrapper {
+      position: relative;
+
+      .ant-tree-title {
+        position: absolute;
+        left: 0;
+        width: 100%;
+      }
+    }
+
+    &-title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding-right: 10px;
+
+      &:hover {
+        .@{prefix-cls}__action {
+          visibility: visible;
+        }
+      }
+    }
+
+    &__content {
+      overflow: hidden;
+    }
+
+    &__actions {
+      position: absolute;
+      top: 2px;
+      right: 3px;
+      display: flex;
+    }
+
+    &__action {
+      margin-left: 4px;
+      visibility: hidden;
+    }
+  }
+</style>
diff --git a/src/components/Tree_backup/src/TreeHeader.vue b/src/components/Tree_backup/src/TreeHeader.vue
new file mode 100644
index 0000000..fbe36cf
--- /dev/null
+++ b/src/components/Tree_backup/src/TreeHeader.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="flex px-2 py-1.5 items-center basic-tree-header">
+    <slot name="headerTitle" v-if="$slots.headerTitle"></slot>
+    <BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">
+      {{ title }}
+    </BasicTitle>
+
+    <div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
+      <div :class="getInputSearchCls" v-if="search">
+        <InputSearch
+          :placeholder="t('common.searchText')"
+          size="small"
+          allowClear
+          v-model:value="searchValue"
+          @search="$emit('clickSearch', $event)"
+        />
+      </div>
+      <Dropdown @click.prevent v-if="toolbar">
+        <Icon icon="ion:ellipsis-vertical" />
+        <template #overlay>
+          <Menu @click="handleMenuClick">
+            <template v-for="item in toolbarList" :key="item.value">
+              <MenuItem v-bind="{ key: item.value }">
+                {{ item.label }}
+              </MenuItem>
+              <MenuDivider v-if="item.divider" />
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { PropType } from 'vue';
+  import { defineComponent, computed, ref, watch } from 'vue';
+
+  import { Dropdown, Menu, Input } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { BasicTitle } from '/@/components/Basic';
+
+  import { propTypes } from '/@/utils/propTypes';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDebounceFn } from '@vueuse/core';
+
+  enum ToolbarEnum {
+    SELECT_ALL,
+    UN_SELECT_ALL,
+    EXPAND_ALL,
+    UN_EXPAND_ALL,
+    CHECK_STRICTLY,
+    CHECK_UN_STRICTLY,
+  }
+
+  interface MenuInfo {
+    key: ToolbarEnum;
+  }
+
+  export default defineComponent({
+    name: 'BasicTreeHeader',
+    components: {
+      BasicTitle,
+      Icon,
+      Dropdown,
+      Menu,
+      MenuItem: Menu.Item,
+      MenuDivider: Menu.Divider,
+      InputSearch: Input.Search,
+    },
+    props: {
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+      },
+      title: propTypes.string,
+      toolbar: propTypes.bool,
+      checkable: propTypes.bool,
+      search: propTypes.bool,
+      checkAll: propTypes.func,
+      expandAll: propTypes.func,
+      searchText: propTypes.string,
+    },
+    emits: ['strictly-change', 'search', 'clickSearch'],
+    setup(props, { emit, slots }) {
+      const { t } = useI18n();
+      const searchValue = ref('');
+      const getInputSearchCls = computed(() => {
+        const titleExists = slots.headerTitle || props.title;
+        return [
+          'mr-1',
+          'w-full',
+          // titleExists ? 'w-2/3' : 'w-full',
+          {
+            ['ml-5']: titleExists,
+          },
+        ];
+      });
+      const toolbarList = computed(() => {
+        const { checkable } = props;
+        const defaultToolbarList = [
+          { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+          {
+            label: t('component.tree.unExpandAll'),
+            value: ToolbarEnum.UN_EXPAND_ALL,
+            divider: checkable,
+          },
+        ];
+
+        return checkable
+          ? [
+              { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+              {
+                label: t('component.tree.unSelectAll'),
+                value: ToolbarEnum.UN_SELECT_ALL,
+                divider: checkable,
+              },
+              ...defaultToolbarList,
+              { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+              { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
+            ]
+          : defaultToolbarList;
+      });
+
+      function handleMenuClick(e: MenuInfo) {
+        const { key } = e;
+        switch (key) {
+          case ToolbarEnum.SELECT_ALL:
+            props.checkAll?.(true);
+            break;
+          case ToolbarEnum.UN_SELECT_ALL:
+            props.checkAll?.(false);
+            break;
+          case ToolbarEnum.EXPAND_ALL:
+            props.expandAll?.(true);
+            break;
+          case ToolbarEnum.UN_EXPAND_ALL:
+            props.expandAll?.(false);
+            break;
+          case ToolbarEnum.CHECK_STRICTLY:
+            emit('strictly-change', false);
+            break;
+          case ToolbarEnum.CHECK_UN_STRICTLY:
+            emit('strictly-change', true);
+            break;
+        }
+      }
+
+      function emitChange(value?: string): void {
+        emit('search', value);
+      }
+
+      const debounceEmitChange = useDebounceFn(emitChange, 200);
+
+      watch(
+        () => searchValue.value,
+        (v) => {
+          debounceEmitChange(v);
+        }
+      );
+      watch(
+        () => props.searchText,
+        (v) => {
+          if (v !== searchValue.value) {
+            searchValue.value = v;
+          }
+        }
+      );
+      // function handleSearch(e: ChangeEvent): void {
+      //   debounceEmitChange(e.target.value);
+      // }
+
+      return { t, toolbarList, handleMenuClick, searchValue, getInputSearchCls };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .basic-tree-header {
+    border-bottom: 1px solid @border-color-base;
+  }
+</style>
diff --git a/src/components/Tree_backup/src/TreeIcon.ts b/src/components/Tree_backup/src/TreeIcon.ts
new file mode 100644
index 0000000..69e7cd0
--- /dev/null
+++ b/src/components/Tree_backup/src/TreeIcon.ts
@@ -0,0 +1,17 @@
+import type { VNode, FunctionalComponent } from 'vue';
+
+import { h } from 'vue';
+import { isString } from '/@/utils/is';
+import { Icon } from '/@/components/Icon';
+
+export interface ComponentProps {
+  icon: VNode | string;
+}
+
+export const TreeIcon: FunctionalComponent = ({ icon }: ComponentProps) => {
+  if (!icon) return null;
+  if (isString(icon)) {
+    return h(Icon, { icon, class: 'mr-1' });
+  }
+  return Icon;
+};
diff --git a/src/components/Tree_backup/src/props.ts b/src/components/Tree_backup/src/props.ts
new file mode 100644
index 0000000..e6f6d73
--- /dev/null
+++ b/src/components/Tree_backup/src/props.ts
@@ -0,0 +1,99 @@
+import type { PropType } from 'vue';
+import type { ReplaceFields, ActionItem, Keys, CheckKeys, ContextMenuOptions, TreeItem } from './typing';
+import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+import { propTypes } from '/@/utils/propTypes';
+
+export const basicProps = {
+  value: {
+    type: [Object, Array] as PropType<Keys | CheckKeys>,
+  },
+  renderIcon: {
+    type: Function as PropType<(params: Recordable) => string>,
+  },
+
+  helpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+
+  title: propTypes.string,
+  toolbar: propTypes.bool,
+  search: propTypes.bool,
+  searchValue: propTypes.string,
+  checkStrictly: propTypes.bool,
+  clickRowToExpand: propTypes.bool.def(true),
+  checkable: propTypes.bool.def(false),
+  defaultExpandLevel: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+  highlight: {
+    type: [Boolean, String] as PropType<Boolean | String>,
+    default: false,
+  },
+  defaultExpandAll: propTypes.bool.def(false),
+
+  replaceFields: {
+    type: Object as PropType<ReplaceFields>,
+  },
+
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+  },
+
+  actionList: {
+    type: Array as PropType<ActionItem[]>,
+    default: () => [],
+  },
+
+  expandedKeys: {
+    type: Array as PropType<Keys>,
+    default: () => [],
+  },
+
+  selectedKeys: {
+    type: Array as PropType<Keys>,
+    default: () => [],
+  },
+
+  checkedKeys: {
+    type: Array as PropType<CheckKeys>,
+    default: () => [],
+  },
+
+  beforeRightClick: {
+    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
+    default: null,
+  },
+
+  rightMenuList: {
+    type: Array as PropType<ContextMenuItem[]>,
+  },
+  // 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
+  filterFn: {
+    type: Function as PropType<(searchValue: any, node: TreeItem, replaceFields: ReplaceFields) => boolean>,
+    default: null,
+  },
+  // 搜索完成时自动展开结果
+  expandOnSearch: propTypes.bool.def(false),
+  // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+  checkOnSearch: propTypes.bool.def(false),
+  // 搜索完成自动select所有结果
+  selectedOnSearch: propTypes.bool.def(false),
+};
+
+export const treeNodeProps = {
+  actionList: {
+    type: Array as PropType<ActionItem[]>,
+    default: () => [],
+  },
+  replaceFields: {
+    type: Object as PropType<ReplaceFields>,
+  },
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+    default: () => [],
+  },
+};
diff --git a/src/components/Tree_backup/src/typing.ts b/src/components/Tree_backup/src/typing.ts
new file mode 100644
index 0000000..c606d4d
--- /dev/null
+++ b/src/components/Tree_backup/src/typing.ts
@@ -0,0 +1,53 @@
+import type { TreeDataItem, CheckEvent as CheckEventOrigin } from 'ant-design-vue/es/tree/Tree';
+import { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+
+export interface ActionItem {
+  render: (record: Recordable) => any;
+  show?: boolean | ((record: Recordable) => boolean);
+}
+
+export interface TreeItem extends TreeDataItem {
+  icon?: any;
+}
+
+export interface ReplaceFields {
+  children?: string;
+  title?: string;
+  key?: string;
+}
+
+export type Keys = (string | number)[];
+export type CheckKeys = (string | number)[] | { checked: (string | number)[]; halfChecked: (string | number)[] };
+
+export interface TreeActionType {
+  checkAll: (checkAll: boolean) => void;
+  expandAll: (expandAll: boolean) => void;
+  setExpandedKeys: (keys: Keys) => void;
+  getExpandedKeys: () => Keys;
+  setSelectedKeys: (keys: Keys) => void;
+  getSelectedKeys: () => Keys;
+  setCheckedKeys: (keys: CheckKeys) => void;
+  getCheckedKeys: () => CheckKeys;
+  filterByLevel: (level: number) => void;
+  insertNodeByKey: (opt: InsertNodeParams) => void;
+  insertNodesByKey: (opt: InsertNodeParams) => void;
+  deleteNodeByKey: (key: string) => void;
+  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
+  setSearchValue: (value: string) => void;
+  getSearchValue: () => string;
+}
+
+export interface InsertNodeParams {
+  parentKey: string | null;
+  node: TreeDataItem;
+  list?: TreeDataItem[];
+  push?: 'push' | 'unshift';
+}
+
+export interface ContextMenuOptions {
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export type CheckEvent = CheckEventOrigin;
diff --git a/src/components/Tree_backup/src/useTree.ts b/src/components/Tree_backup/src/useTree.ts
new file mode 100644
index 0000000..1ba6f69
--- /dev/null
+++ b/src/components/Tree_backup/src/useTree.ts
@@ -0,0 +1,192 @@
+import type { InsertNodeParams, Keys, ReplaceFields } from './typing';
+import type { Ref, ComputedRef } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { cloneDeep } from 'lodash-es';
+import { unref } from 'vue';
+import { forEach } from '/@/utils/helper/treeHelper';
+
+export function useTree(treeDataRef: Ref<TreeDataItem[]>, getReplaceFields: ComputedRef<ReplaceFields>) {
+  function getAllKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getAllKeys(children) as string[]));
+      }
+    }
+    return keys as Keys;
+  }
+
+  // get keys that can be checked and selected
+  function getEnabledKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getEnabledKeys(children) as string[]));
+      }
+    }
+    return keys as Keys;
+  }
+
+  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]): Keys {
+    const keys: Keys = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return keys;
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      const children = node[childrenField];
+      if (nodeKey === node[keyField]) {
+        keys.push(node[keyField]!);
+        if (children && children.length) {
+          keys.push(...(getAllKeys(children) as string[]));
+        }
+      } else {
+        if (children && children.length) {
+          keys.push(...getChildrenKeys(nodeKey, children));
+        }
+      }
+    }
+    return keys as Keys;
+  }
+
+  // Update node
+  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData[index] = { ...treeData[index], ...node };
+        break;
+      } else if (children && children.length) {
+        updateNodeByKey(key, node, element[childrenField]);
+      }
+    }
+  }
+
+  // Expand the specified level
+  function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
+    if (!level) {
+      return [];
+    }
+    const res: (string | number)[] = [];
+    const data = list || unref(treeDataRef) || [];
+    for (let index = 0; index < data.length; index++) {
+      const item = data[index];
+
+      const { key: keyField, children: childrenField } = unref(getReplaceFields);
+      const key = keyField ? item[keyField] : '';
+      const children = childrenField ? item[childrenField] : [];
+      res.push(key);
+      if (children && children.length && currentLevel < level) {
+        currentLevel += 1;
+        res.push(...filterByLevel(level, children, currentLevel));
+      }
+    }
+    return res as string[] | number[];
+  }
+
+  /**
+   * 添加节点
+   */
+  function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!parentKey) {
+      treeData[push](node);
+      treeDataRef.value = treeData;
+      return;
+    }
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return;
+
+    forEach(treeData, (treeItem) => {
+      if (treeItem[keyField] === parentKey) {
+        treeItem[childrenField] = treeItem[childrenField] || [];
+        treeItem[childrenField][push](node);
+        return true;
+      }
+    });
+    treeDataRef.value = treeData;
+  }
+
+  /**
+   * 批量添加节点
+   */
+  function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!list || list.length < 1) {
+      return;
+    }
+    if (!parentKey) {
+      for (let i = 0; i < list.length; i++) {
+        treeData[push](list[i]);
+      }
+    } else {
+      const { key: keyField, children: childrenField } = unref(getReplaceFields);
+      if (!childrenField || !keyField) return;
+
+      forEach(treeData, (treeItem) => {
+        if (treeItem[keyField] === parentKey) {
+          treeItem[childrenField] = treeItem[childrenField] || [];
+          for (let i = 0; i < list.length; i++) {
+            treeItem[childrenField][push](list[i]);
+          }
+          treeDataRef.value = treeData;
+          return true;
+        }
+      });
+    }
+  }
+
+  // Delete node
+  function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData.splice(index, 1);
+        break;
+      } else if (children && children.length) {
+        deleteNodeByKey(key, element[childrenField]);
+      }
+    }
+  }
+
+  return {
+    deleteNodeByKey,
+    insertNodeByKey,
+    insertNodesByKey,
+    filterByLevel,
+    updateNodeByKey,
+    getAllKeys,
+    getChildrenKeys,
+    getEnabledKeys,
+  };
+}
diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts
new file mode 100644
index 0000000..568a7d9
--- /dev/null
+++ b/src/components/Upload/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import basicUpload from './src/BasicUpload.vue';
+
+export const BasicUpload = withInstall(basicUpload);
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
new file mode 100644
index 0000000..7e2f4c5
--- /dev/null
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <a-button-group>
+      <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
+        {{ t('component.upload.upload') }}
+      </a-button>
+      <Tooltip placement="bottom" v-if="showPreview">
+        <template #title>
+          {{ t('component.upload.uploaded') }}
+          <template v-if="fileList.length">
+            {{ fileList.length }}
+          </template>
+        </template>
+        <a-button @click="openPreviewModal">
+          <Icon icon="bi:eye" />
+          <template v-if="fileList.length && showPreviewNumber">
+            {{ fileList.length }}
+          </template>
+        </a-button>
+      </Tooltip>
+    </a-button-group>
+
+    <UploadModal v-bind="bindValue" :previewFileList="fileList" @register="registerUploadModal" @change="handleChange" @delete="handleDelete" />
+
+    <UploadPreviewModal :value="fileList" @register="registerPreviewModal" @list-change="handlePreviewChange" @delete="handlePreviewDelete" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch, unref, computed } from 'vue';
+  import UploadModal from './UploadModal.vue';
+  import UploadPreviewModal from './UploadPreviewModal.vue';
+  import { Icon } from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import { uploadContainerProps } from './props';
+  import { omit } from 'lodash-es';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isArray } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'BasicUpload',
+    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
+    props: uploadContainerProps,
+    emits: ['change', 'delete', 'preview-delete', 'update:value'],
+
+    setup(props, { emit, attrs }) {
+      const { t } = useI18n();
+      // 上传modal
+      const [registerUploadModal, { openModal: openUploadModal }] = useModal();
+
+      //   预览modal
+      const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+
+      const fileList = ref<string[]>([]);
+
+      const showPreview = computed(() => {
+        const { emptyHidePreview } = props;
+        if (!emptyHidePreview) return true;
+        return emptyHidePreview ? fileList.value.length > 0 : true;
+      });
+
+      const bindValue = computed(() => {
+        const value = { ...attrs, ...props };
+        return omit(value, 'onChange');
+      });
+
+      watch(
+        () => props.value,
+        (value = []) => {
+          fileList.value = isArray(value) ? value : [];
+        },
+        { immediate: true }
+      );
+
+      // 上传modal保存操作
+      function handleChange(urls: string[]) {
+        fileList.value = [...unref(fileList), ...(urls || [])];
+        emit('update:value', fileList.value);
+        emit('change', fileList.value);
+      }
+
+      // 预览modal保存操作
+      function handlePreviewChange(urls: string[]) {
+        fileList.value = [...(urls || [])];
+        emit('update:value', fileList.value);
+        emit('change', fileList.value);
+      }
+
+      function handleDelete(record: Recordable) {
+        emit('delete', record);
+      }
+
+      function handlePreviewDelete(url: string) {
+        emit('preview-delete', url);
+      }
+
+      return {
+        registerUploadModal,
+        openUploadModal,
+        handleChange,
+        handlePreviewChange,
+        registerPreviewModal,
+        openPreviewModal,
+        fileList,
+        showPreview,
+        bindValue,
+        handleDelete,
+        handlePreviewDelete,
+        t,
+      };
+    },
+  });
+</script>
diff --git a/src/components/Upload/src/FileList.vue b/src/components/Upload/src/FileList.vue
new file mode 100644
index 0000000..19ffb57
--- /dev/null
+++ b/src/components/Upload/src/FileList.vue
@@ -0,0 +1,102 @@
+<script lang="tsx">
+  import { defineComponent, CSSProperties, watch, nextTick } from 'vue';
+  import { fileListProps } from './props';
+  import { isFunction } from '/@/utils/is';
+  import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
+
+  export default defineComponent({
+    name: 'FileList',
+    props: fileListProps,
+    setup(props) {
+      const modalFn = useModalContext();
+      watch(
+        () => props.dataSource,
+        () => {
+          nextTick(() => {
+            modalFn?.redoModalHeight?.();
+          });
+        }
+      );
+      return () => {
+        const { columns, actionColumn, dataSource } = props;
+        const columnList = [...columns, actionColumn];
+        return (
+          <table class="file-table">
+            <colgroup>
+              {columnList.map((item) => {
+                const { width = 0, dataIndex } = item;
+                const style: CSSProperties = {
+                  width: `${width}px`,
+                  minWidth: `${width}px`,
+                };
+                return <col style={width ? style : {}} key={dataIndex} />;
+              })}
+            </colgroup>
+            <thead>
+              <tr class="file-table-tr">
+                {columnList.map((item) => {
+                  const { title = '', align = 'center', dataIndex } = item;
+                  return (
+                    <th class={['file-table-th', align]} key={dataIndex}>
+                      {title}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+            <tbody>
+              {dataSource.map((record = {}, index) => {
+                return (
+                  <tr class="file-table-tr" key={`${index + record.name || ''}`}>
+                    {columnList.map((item) => {
+                      const { dataIndex = '', customRender, align = 'center' } = item;
+                      const render = customRender && isFunction(customRender);
+                      return (
+                        <td class={['file-table-td', align]} key={dataIndex}>
+                          {render ? customRender?.({ text: record[dataIndex], record }) : record[dataIndex]}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .file-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    .center {
+      text-align: center;
+    }
+
+    .left {
+      text-align: left;
+    }
+
+    .right {
+      text-align: right;
+    }
+
+    &-th,
+    &-td {
+      padding: 12px 8px;
+    }
+
+    thead {
+      background-color: @background-color-light;
+    }
+
+    table,
+    td,
+    th {
+      border: 1px solid @border-color-base;
+    }
+  }
+</style>
diff --git a/src/components/Upload/src/ThumbUrl.vue b/src/components/Upload/src/ThumbUrl.vue
new file mode 100644
index 0000000..80fb203
--- /dev/null
+++ b/src/components/Upload/src/ThumbUrl.vue
@@ -0,0 +1,29 @@
+<template>
+  <span class="thumb">
+    <Image v-if="fileUrl" :src="fileUrl" :width="104" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Image } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: { Image },
+    props: {
+      fileUrl: propTypes.string.def(''),
+      fileName: propTypes.string.def(''),
+    },
+  });
+</script>
+<style lang="less">
+  .thumb {
+    img {
+      position: static;
+      display: block;
+      cursor: zoom-in;
+      border-radius: 4px;
+      object-fit: cover;
+    }
+  }
+</style>
diff --git a/src/components/Upload/src/UploadModal.vue b/src/components/Upload/src/UploadModal.vue
new file mode 100644
index 0000000..19eeeca
--- /dev/null
+++ b/src/components/Upload/src/UploadModal.vue
@@ -0,0 +1,309 @@
+<template>
+  <BasicModal
+    width="800px"
+    :title="t('component.upload.upload')"
+    :okText="t('component.upload.save')"
+    v-bind="$attrs"
+    @register="register"
+    @ok="handleOk"
+    :closeFunc="handleCloseFunc"
+    :maskClosable="false"
+    :keyboard="false"
+    wrapClassName="upload-modal"
+    :okButtonProps="getOkButtonProps"
+    :cancelButtonProps="{ disabled: isUploadingRef }"
+  >
+    <template #centerFooter>
+      <a-button @click="handleStartUpload" color="success" :disabled="!getIsSelectFile" :loading="isUploadingRef">
+        {{ getUploadBtnText }}
+      </a-button>
+    </template>
+
+    <div class="upload-modal-toolbar">
+      <Alert :message="getHelpText" type="info" banner class="upload-modal-toolbar__text" />
+
+      <Upload :accept="getStringAccept" :multiple="multiple" :before-upload="beforeUpload" class="upload-modal-toolbar__btn">
+        <a-button type="primary">
+          {{ t('component.upload.choose') }}
+        </a-button>
+      </Upload>
+    </div>
+    <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
+  import { Upload, Alert } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  //   import { BasicTable, useTable } from '/@/components/Table';
+  // hooks
+  import { useUploadType } from './useUpload';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  //   types
+  import { FileItem, UploadResultStatus } from './typing';
+  import { basicProps } from './props';
+  import { createTableColumns, createActionColumn } from './data';
+  // utils
+  import { checkFileType, checkImgType, getBase64WithFile } from './helper';
+  import { buildUUID } from '/@/utils/uuid';
+  import { isFunction } from '/@/utils/is';
+  import { warn } from '/@/utils/log';
+  import FileList from './FileList.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  export default defineComponent({
+    components: { BasicModal, Upload, Alert, FileList },
+    props: {
+      ...basicProps,
+      previewFileList: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+    },
+    emits: ['change', 'register', 'delete'],
+    setup(props, { emit }) {
+      const state = reactive<{ fileList: FileItem[] }>({
+        fileList: [],
+      });
+
+      //   是否正在上传
+      const isUploadingRef = ref(false);
+      const fileListRef = ref<FileItem[]>([]);
+      const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+
+      const { t } = useI18n();
+      const [register, { closeModal }] = useModalInner();
+
+      const { getAccept, getStringAccept, getHelpText } = useUploadType({
+        acceptRef: accept,
+        helpTextRef: helpText,
+        maxNumberRef: maxNumber,
+        maxSizeRef: maxSize,
+      });
+
+      const { createMessage } = useMessage();
+
+      const getIsSelectFile = computed(() => {
+        return fileListRef.value.length > 0 && !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS);
+      });
+
+      const getOkButtonProps = computed(() => {
+        const someSuccess = fileListRef.value.some((item) => item.status === UploadResultStatus.SUCCESS);
+        return {
+          disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
+        };
+      });
+
+      const getUploadBtnText = computed(() => {
+        const someError = fileListRef.value.some((item) => item.status === UploadResultStatus.ERROR);
+        return isUploadingRef.value
+          ? t('component.upload.uploading')
+          : someError
+          ? t('component.upload.reUploadFailed')
+          : t('component.upload.startUpload');
+      });
+
+      // 上传前校验
+      function beforeUpload(file: File) {
+        const { size, name } = file;
+        const { maxSize } = props;
+        const accept = unref(getAccept);
+        // 设置最大值，则判断
+        if (maxSize && file.size / 1024 / 1024 >= maxSize) {
+          createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
+          return false;
+        }
+
+        // 设置类型,则判断
+        if (accept.length > 0 && !checkFileType(file, accept)) {
+          createMessage.error!(t('component.upload.acceptUpload', [accept.join(',')]));
+          return false;
+        }
+        const commonItem = {
+          uuid: buildUUID(),
+          file,
+          size,
+          name,
+          percent: 0,
+          type: name.split('.').pop(),
+        };
+        // 生成图片缩略图
+        if (checkImgType(file)) {
+          // beforeUpload，如果异步会调用自带上传方法
+          // file.thumbUrl = await getBase64(file);
+          getBase64WithFile(file).then(({ result: thumbUrl }) => {
+            fileListRef.value = [
+              ...unref(fileListRef),
+              {
+                thumbUrl,
+                ...commonItem,
+              },
+            ];
+          });
+        } else {
+          fileListRef.value = [...unref(fileListRef), commonItem];
+        }
+        return false;
+      }
+
+      // 删除
+      function handleRemove(record: FileItem) {
+        const index = fileListRef.value.findIndex((item) => item.uuid === record.uuid);
+        index !== -1 && fileListRef.value.splice(index, 1);
+        emit('delete', record);
+      }
+
+      // 预览
+      // function handlePreview(record: FileItem) {
+      //   const { thumbUrl = '' } = record;
+      //   createImgPreview({
+      //     imageList: [thumbUrl],
+      //   });
+      // }
+
+      async function uploadApiByItem(item: FileItem) {
+        const { api } = props;
+        if (!api || !isFunction(api)) {
+          return warn('upload api must exist and be a function');
+        }
+        try {
+          item.status = UploadResultStatus.UPLOADING;
+          const { data } = await props.api?.(
+            {
+              data: {
+                ...(props.uploadParams || {}),
+              },
+              file: item.file,
+              name: props.name,
+              filename: props.filename,
+            },
+            function onUploadProgress(progressEvent: ProgressEvent) {
+              const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+              item.percent = complete;
+            }
+          );
+          item.status = UploadResultStatus.SUCCESS;
+          item.responseData = data;
+          return {
+            success: true,
+            error: null,
+          };
+        } catch (e) {
+          console.log(e);
+          item.status = UploadResultStatus.ERROR;
+          return {
+            success: false,
+            error: e,
+          };
+        }
+      }
+
+      // 点击开始上传
+      async function handleStartUpload() {
+        const { maxNumber } = props;
+        if ((fileListRef.value.length + (props.previewFileList?.length ?? 0)) > maxNumber) {
+          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+        }
+        try {
+          isUploadingRef.value = true;
+          // 只上传不是成功状态的
+          const uploadFileList = fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
+          const data = await Promise.all(
+            uploadFileList.map((item) => {
+              return uploadApiByItem(item);
+            })
+          );
+          isUploadingRef.value = false;
+          // 生产环境:抛出错误
+          const errorList = data.filter((item: any) => !item.success);
+          if (errorList.length > 0) throw errorList;
+        } catch (e) {
+          isUploadingRef.value = false;
+          throw e;
+        }
+      }
+
+      //   点击保存
+      function handleOk() {
+        const { maxNumber } = props;
+
+        if (fileListRef.value.length > maxNumber) {
+          return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+        }
+        if (isUploadingRef.value) {
+          return createMessage.warning(t('component.upload.saveWarn'));
+        }
+        const fileList: string[] = [];
+
+        for (const item of fileListRef.value) {
+          const { status, responseData } = item;
+          if (status === UploadResultStatus.SUCCESS && responseData) {
+            fileList.push(responseData.url);
+          }
+        }
+        // 存在一个上传成功的即可保存
+        if (fileList.length <= 0) {
+          return createMessage.warning(t('component.upload.saveError'));
+        }
+        fileListRef.value = [];
+        closeModal();
+        emit('change', fileList);
+      }
+
+      // 点击关闭：则所有操作不保存，包括上传的
+      async function handleCloseFunc() {
+        if (!isUploadingRef.value) {
+          fileListRef.value = [];
+          return true;
+        } else {
+          createMessage.warning(t('component.upload.uploadWait'));
+          return false;
+        }
+      }
+
+      return {
+        columns: createTableColumns() as any[],
+        actionColumn: createActionColumn(handleRemove) as any,
+        register,
+        closeModal,
+        getHelpText,
+        getStringAccept,
+        getOkButtonProps,
+        beforeUpload,
+        // registerTable,
+        fileListRef,
+        state,
+        isUploadingRef,
+        handleStartUpload,
+        handleOk,
+        handleCloseFunc,
+        getIsSelectFile,
+        getUploadBtnText,
+        t,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .upload-modal {
+    .ant-upload-list {
+      display: none;
+    }
+
+    .ant-table-wrapper .ant-spin-nested-loading {
+      padding: 0;
+    }
+
+    &-toolbar {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+
+      &__btn {
+        margin-left: 8px;
+        text-align: right;
+        flex: 1;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Upload/src/UploadPreviewModal.vue b/src/components/Upload/src/UploadPreviewModal.vue
new file mode 100644
index 0000000..0e51cb9
--- /dev/null
+++ b/src/components/Upload/src/UploadPreviewModal.vue
@@ -0,0 +1,99 @@
+<template>
+  <BasicModal
+    width="800px"
+    :title="t('component.upload.preview')"
+    wrapClassName="upload-preview-modal"
+    v-bind="$attrs"
+    @register="register"
+    :showOkBtn="false"
+  >
+    <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, watch, ref } from 'vue';
+  //   import { BasicTable, useTable } from '/@/components/Table';
+  import FileList from './FileList.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { previewProps } from './props';
+  import { PreviewFileItem } from './typing';
+  import { downloadByUrl } from '/@/utils/file/download';
+  import { createPreviewColumns, createPreviewActionColumn } from './data';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isArray } from '/@/utils/is';
+
+  export default defineComponent({
+    components: { BasicModal, FileList },
+    props: previewProps,
+    emits: ['list-change', 'register', 'delete'],
+    setup(props, { emit }) {
+      const [register, { closeModal }] = useModalInner();
+      const { t } = useI18n();
+
+      const fileListRef = ref<PreviewFileItem[]>([]);
+      watch(
+        () => props.value,
+        (value) => {
+          if (!isArray(value)) value = [];
+          fileListRef.value = value
+            .filter((item) => !!item)
+            .map((item) => {
+              return {
+                url: item,
+                type: item.split('.').pop() || '',
+                name: item.split('/').pop() || '',
+              };
+            });
+        },
+        { immediate: true }
+      );
+
+      // 删除
+      function handleRemove(record: PreviewFileItem) {
+        const index = fileListRef.value.findIndex((item) => item.url === record.url);
+        if (index !== -1) {
+          const removed = fileListRef.value.splice(index, 1);
+          emit('delete', removed[0].url);
+          emit(
+            'list-change',
+            fileListRef.value.map((item) => item.url)
+          );
+        }
+      }
+
+      // // 预览
+      // function handlePreview(record: PreviewFileItem) {
+      //   const { url = '' } = record;
+      //   createImgPreview({
+      //     imageList: [url],
+      //   });
+      // }
+
+      // 下载
+      function handleDownload(record: PreviewFileItem) {
+        const { url = '' } = record;
+        downloadByUrl({ url });
+      }
+
+      return {
+        t,
+        register,
+        closeModal,
+        fileListRef,
+        columns: createPreviewColumns() as any[],
+        actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .upload-preview-modal {
+    .ant-upload-list {
+      display: none;
+    }
+
+    .ant-table-wrapper .ant-spin-nested-loading {
+      padding: 0;
+    }
+  }
+</style>
diff --git a/src/components/Upload/src/data.tsx b/src/components/Upload/src/data.tsx
new file mode 100644
index 0000000..5480788
--- /dev/null
+++ b/src/components/Upload/src/data.tsx
@@ -0,0 +1,147 @@
+import type { BasicColumn, ActionItem } from '/@/components/Table';
+import { FileItem, PreviewFileItem, UploadResultStatus } from './typing';
+import {
+  // checkImgType,
+  isImgTypeByName,
+} from './helper';
+import { Progress, Tag } from 'ant-design-vue';
+import TableAction from '/@/components/Table/src/components/TableAction.vue';
+import ThumbUrl from './ThumbUrl.vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+// 文件上传列表
+export function createTableColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'thumbUrl',
+      title: t('component.upload.legend'),
+      width: 100,
+      customRender: ({ record }) => {
+        const { thumbUrl } = (record as FileItem) || {};
+        return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
+      },
+    },
+    {
+      dataIndex: 'name',
+      title: t('component.upload.fileName'),
+      align: 'left',
+      customRender: ({ text, record }) => {
+        const { percent, status: uploadStatus } = (record as FileItem) || {};
+        let status: 'normal' | 'exception' | 'active' | 'success' = 'normal';
+        if (uploadStatus === UploadResultStatus.ERROR) {
+          status = 'exception';
+        } else if (uploadStatus === UploadResultStatus.UPLOADING) {
+          status = 'active';
+        } else if (uploadStatus === UploadResultStatus.SUCCESS) {
+          status = 'success';
+        }
+        return (
+          <span>
+            <p class="truncate mb-1" title={text}>
+              {text}
+            </p>
+            <Progress percent={percent} size="small" status={status} />
+          </span>
+        );
+      },
+    },
+    {
+      dataIndex: 'size',
+      title: t('component.upload.fileSize'),
+      width: 100,
+      customRender: ({ text = 0 }) => {
+        return text && (text / 1024).toFixed(2) + 'KB';
+      },
+    },
+    // {
+    //   dataIndex: 'type',
+    //   title: '文件类型',
+    //   width: 100,
+    // },
+    {
+      dataIndex: 'status',
+      title: t('component.upload.fileStatue'),
+      width: 100,
+      customRender: ({ text }) => {
+        if (text === UploadResultStatus.SUCCESS) {
+          return <Tag color="green">{() => t('component.upload.uploadSuccess')}</Tag>;
+        } else if (text === UploadResultStatus.ERROR) {
+          return <Tag color="red">{() => t('component.upload.uploadError')}</Tag>;
+        } else if (text === UploadResultStatus.UPLOADING) {
+          return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>;
+        }
+
+        return text;
+      },
+    },
+  ];
+}
+export function createActionColumn(handleRemove: Function): BasicColumn {
+  return {
+    width: 120,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.del'),
+          color: 'error',
+          onClick: handleRemove.bind(null, record),
+        },
+      ];
+      // if (checkImgType(record)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}
+// 文件预览列表
+export function createPreviewColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'url',
+      title: t('component.upload.legend'),
+      width: 100,
+      customRender: ({ record }) => {
+        const { url } = (record as PreviewFileItem) || {};
+        return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
+      },
+    },
+    {
+      dataIndex: 'name',
+      title: t('component.upload.fileName'),
+      align: 'left',
+    },
+  ];
+}
+
+export function createPreviewActionColumn({ handleRemove, handleDownload }: { handleRemove: Fn; handleDownload: Fn }): BasicColumn {
+  return {
+    width: 160,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.del'),
+          color: 'error',
+          onClick: handleRemove.bind(null, record),
+        },
+        {
+          label: t('component.upload.download'),
+          onClick: handleDownload.bind(null, record),
+        },
+      ];
+
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}
diff --git a/src/components/Upload/src/helper.ts b/src/components/Upload/src/helper.ts
new file mode 100644
index 0000000..7b1f16d
--- /dev/null
+++ b/src/components/Upload/src/helper.ts
@@ -0,0 +1,60 @@
+export function checkFileType(file: File, accepts: string[]) {
+  // 代码逻辑说明: 【issues/7954】BasicUpload组件上传文件，限制上传格式校验出错
+  const mimePatterns: string[] = [];
+  const suffixList: string[] = [];
+  // 分类处理 accepts
+  for (const item of accepts) {
+    if (item.includes('/')) {
+      mimePatterns.push(item);
+    } else {
+      // 支持.png 或 png（带点后缀或者不带点后缀）
+      const suffix = item.startsWith('.') ? item.slice(1) : item;
+      suffixList.push(suffix);
+    }
+  }
+  // 后缀匹配逻辑
+  let suffixMatch = false;
+  if (suffixList.length > 0) {
+    const suffixRegex = new RegExp(`\\.(${suffixList.join('|')})$`, 'i');
+    suffixMatch = suffixRegex.test(file.name);
+  }
+  // MIME类型匹配逻辑
+  let mimeMatch = false;
+  if (mimePatterns.length > 0 && file.type) {
+    mimeMatch = mimePatterns.some((pattern) => {
+      // 先转义特殊字符，再处理通配符
+      const regexPattern = pattern
+        .replace(/[.+?^${}()|[\]\\]/g, '\\$&') // 先转义特殊字符
+        .replace(/\*/g, '.*'); // 再替换通配符
+      const regex = new RegExp(`^${regexPattern}$`, 'i');
+      return regex.test(file.type);
+    });
+  }
+  if (mimePatterns.length && suffixList.length) {
+    return suffixMatch || mimeMatch;
+  } else if (mimePatterns.length) {
+    return mimeMatch;
+  } else if (suffixList.length) {
+    return suffixMatch;
+  }
+}
+
+export function checkImgType(file: File) {
+  return isImgTypeByName(file.name);
+}
+
+export function isImgTypeByName(name: string) {
+  return /\.(jpg|jpeg|png|gif)$/i.test(name);
+}
+
+export function getBase64WithFile(file: File) {
+  return new Promise<{
+    result: string;
+    file: File;
+  }>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve({ result: reader.result as string, file });
+    reader.onerror = (error) => reject(error);
+  });
+}
diff --git a/src/components/Upload/src/props.ts b/src/components/Upload/src/props.ts
new file mode 100644
index 0000000..413b95d
--- /dev/null
+++ b/src/components/Upload/src/props.ts
@@ -0,0 +1,83 @@
+import type { PropType } from 'vue';
+import { FileBasicColumn } from './typing';
+
+export const basicProps = {
+  helpText: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  // 文件最大多少MB
+  maxSize: {
+    type: Number as PropType<number>,
+    default: 2,
+  },
+  // 最大数量的文件，Infinity不限制
+  maxNumber: {
+    type: Number as PropType<number>,
+    default: Infinity,
+  },
+  // 根据后缀，或者其他
+  accept: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  uploadParams: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+  api: {
+    type: Function as PropType<PromiseFn>,
+    default: null,
+    required: true,
+  },
+  name: {
+    type: String as PropType<string>,
+    default: 'file',
+  },
+  filename: {
+    type: String as PropType<string>,
+    default: null,
+  },
+};
+
+export const uploadContainerProps = {
+  value: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  ...basicProps,
+  showPreviewNumber: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  emptyHidePreview: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+};
+
+export const previewProps = {
+  value: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+};
+
+export const fileListProps = {
+  columns: {
+    type: [Array] as PropType<FileBasicColumn[]>,
+    default: null,
+  },
+  actionColumn: {
+    type: Object as PropType<FileBasicColumn>,
+    default: null,
+  },
+  dataSource: {
+    type: Array as PropType<any[]>,
+    default: null,
+  },
+};
diff --git a/src/components/Upload/src/typing.ts b/src/components/Upload/src/typing.ts
new file mode 100644
index 0000000..c630110
--- /dev/null
+++ b/src/components/Upload/src/typing.ts
@@ -0,0 +1,55 @@
+import { UploadApiResult } from '/@/api/sys/model/uploadModel';
+
+export enum UploadResultStatus {
+  SUCCESS = 'success',
+  ERROR = 'error',
+  UPLOADING = 'uploading',
+}
+
+export interface FileItem {
+  thumbUrl?: string;
+  name: string;
+  size: string | number;
+  type?: string;
+  percent: number;
+  file: File;
+  status?: UploadResultStatus;
+  responseData?: UploadApiResult;
+  uuid: string;
+}
+
+export interface PreviewFileItem {
+  url: string;
+  name: string;
+  type: string;
+}
+
+export interface FileBasicColumn {
+  /**
+   * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
+   * @type Function | ScopedSlot
+   */
+  customRender?: Function;
+  /**
+   * Title of this column
+   * @type any (string | slot)
+   */
+  title: string;
+
+  /**
+   * Width of this column
+   * @type string | number
+   */
+  width?: number;
+  /**
+   * Display field of the data record, could be set like a.b.c
+   * @type string
+   */
+  dataIndex: string;
+  /**
+   * specify how content is aligned
+   * @default 'left'
+   * @type string
+   */
+  align?: 'left' | 'right' | 'center';
+}
diff --git a/src/components/Upload/src/useUpload.ts b/src/components/Upload/src/useUpload.ts
new file mode 100644
index 0000000..694cc27
--- /dev/null
+++ b/src/components/Upload/src/useUpload.ts
@@ -0,0 +1,60 @@
+import { Ref, unref, computed } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+export function useUploadType({
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
+  acceptRef: Ref<string[]>;
+  helpTextRef: Ref<string>;
+  maxNumberRef: Ref<number>;
+  maxSizeRef: Ref<number>;
+}) {
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const accept = unref(acceptRef);
+    if (accept && accept.length > 0) {
+      return accept;
+    }
+    return [];
+  });
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        if (item.indexOf('/') > 0 || item.startsWith('.')) {
+          return item;
+        } else {
+          return `.${item}`;
+        }
+      })
+      .join(',');
+  });
+
+  // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
+  const getHelpText = computed(() => {
+    const helpText = unref(helpTextRef);
+    if (helpText) {
+      return helpText;
+    }
+    const helpTexts: string[] = [];
+
+    const accept = unref(acceptRef);
+    if (accept.length > 0) {
+      helpTexts.push(t('component.upload.accept', [accept.join(',')]));
+    }
+
+    const maxSize = unref(maxSizeRef);
+    if (maxSize) {
+      helpTexts.push(t('component.upload.maxSize', [maxSize]));
+    }
+
+    const maxNumber = unref(maxNumberRef);
+    if (maxNumber && maxNumber !== Infinity) {
+      helpTexts.push(t('component.upload.maxNumber', [maxNumber]));
+    }
+    return helpTexts.join('，');
+  });
+  return { getAccept, getStringAccept, getHelpText };
+}
diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts
new file mode 100644
index 0000000..7c67101
--- /dev/null
+++ b/src/components/Verify/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from '/@/utils/index';
+import basicDragVerify from './src/DragVerify.vue';
+import rotateDragVerify from './src/ImgRotate.vue';
+
+export const BasicDragVerify = withInstall(basicDragVerify);
+export const RotateDragVerify = withInstall(rotateDragVerify);
+export * from './src/typing';
diff --git a/src/components/Verify/src/DragVerify.vue b/src/components/Verify/src/DragVerify.vue
new file mode 100644
index 0000000..26ce84a
--- /dev/null
+++ b/src/components/Verify/src/DragVerify.vue
@@ -0,0 +1,361 @@
+<script lang="tsx">
+  import type { Ref } from 'vue';
+  import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { basicProps } from './props';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'BaseDargVerify',
+    props: basicProps,
+    emits: ['success', 'update:value', 'change', 'start', 'move', 'end'],
+    setup(props, { emit, slots, expose }) {
+      const state = reactive({
+        isMoving: false,
+        isPassing: false,
+        moveDistance: 0,
+        toLeft: false,
+        startTime: 0,
+        endTime: 0,
+      });
+
+      const wrapElRef = ref<HTMLDivElement | null>(null);
+      const barElRef = ref<HTMLDivElement | null>(null);
+      const contentElRef = ref<HTMLDivElement | null>(null);
+      const actionElRef = ref(null) as Ref<HTMLDivElement | null>;
+
+      useEventListener({
+        el: document,
+        name: 'mouseup',
+        listener: () => {
+          if (state.isMoving) {
+            resume();
+          }
+        },
+      });
+
+      const getActionStyleRef = computed(() => {
+        const { height, actionStyle } = props;
+        const h = `${parseInt(height as string)}px`;
+        return {
+          left: 0,
+          width: h,
+          height: h,
+          ...actionStyle,
+        };
+      });
+
+      const getWrapStyleRef = computed(() => {
+        const { height, width, circle, wrapStyle } = props;
+        const h = parseInt(height as string);
+        const w = `${parseInt(width as string)}px`;
+        return {
+          width: w,
+          height: `${h}px`,
+          lineHeight: `${h}px`,
+          borderRadius: circle ? h / 2 + 'px' : 0,
+          ...wrapStyle,
+        };
+      });
+
+      const getBarStyleRef = computed(() => {
+        const { height, circle, barStyle } = props;
+        const h = parseInt(height as string);
+        return {
+          height: `${h}px`,
+          borderRadius: circle ? h / 2 + 'px 0 0 ' + h / 2 + 'px' : 0,
+          ...barStyle,
+        };
+      });
+
+      const getContentStyleRef = computed(() => {
+        const { height, width, contentStyle } = props;
+        const h = `${parseInt(height as string)}px`;
+        const w = `${parseInt(width as string)}px`;
+
+        return {
+          height: h,
+          width: w,
+          ...contentStyle,
+        };
+      });
+
+      watch(
+        () => state.isPassing,
+        (isPassing) => {
+          if (isPassing) {
+            const { startTime, endTime } = state;
+            const time = (endTime - startTime) / 1000;
+            emit('success', { isPassing, time: time.toFixed(1) });
+            emit('update:value', isPassing);
+            emit('change', isPassing);
+          }
+        }
+      );
+
+      watchEffect(() => {
+        state.isPassing = !!props.value;
+      });
+
+      function getEventPageX(e: MouseEvent | TouchEvent) {
+        return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
+      }
+
+      function handleDragStart(e: MouseEvent | TouchEvent) {
+        if (state.isPassing) {
+          return;
+        }
+        const actionEl = unref(actionElRef);
+        if (!actionEl) return;
+        emit('start', e);
+        state.moveDistance = getEventPageX(e) - parseInt(actionEl.style.left.replace('px', ''), 10);
+        state.startTime = new Date().getTime();
+        state.isMoving = true;
+      }
+
+      function getOffset(el: HTMLDivElement) {
+        const actionWidth = parseInt(el.style.width);
+        const { width } = props;
+        const widthNum = parseInt(width as string);
+        const offset = widthNum - actionWidth - 6;
+        return { offset, widthNum, actionWidth };
+      }
+
+      function handleDragMoving(e: MouseEvent | TouchEvent) {
+        const { isMoving, moveDistance } = state;
+        if (isMoving) {
+          const actionEl = unref(actionElRef);
+          const barEl = unref(barElRef);
+          if (!actionEl || !barEl) return;
+          const { offset, widthNum, actionWidth } = getOffset(actionEl);
+          const moveX = getEventPageX(e) - moveDistance;
+
+          emit('move', {
+            event: e,
+            moveDistance,
+            moveX,
+          });
+          if (moveX > 0 && moveX <= offset) {
+            actionEl.style.left = `${moveX}px`;
+            barEl.style.width = `${moveX + actionWidth / 2}px`;
+          } else if (moveX > offset) {
+            actionEl.style.left = `${widthNum - actionWidth}px`;
+            barEl.style.width = `${widthNum - actionWidth / 2}px`;
+            if (!props.isSlot) {
+              checkPass();
+            }
+          }
+        }
+      }
+
+      function handleDragOver(e: MouseEvent | TouchEvent) {
+        const { isMoving, isPassing, moveDistance } = state;
+        if (isMoving && !isPassing) {
+          emit('end', e);
+          const actionEl = unref(actionElRef);
+          const barEl = unref(barElRef);
+          if (!actionEl || !barEl) return;
+          const moveX = getEventPageX(e) - moveDistance;
+          const { offset, widthNum, actionWidth } = getOffset(actionEl);
+          if (moveX < offset) {
+            if (!props.isSlot) {
+              resume();
+            } else {
+              setTimeout(() => {
+                if (!props.value) {
+                  resume();
+                } else {
+                  const contentEl = unref(contentElRef);
+                  if (contentEl) {
+                    contentEl.style.width = `${parseInt(barEl.style.width)}px`;
+                  }
+                }
+              }, 0);
+            }
+          } else {
+            actionEl.style.left = `${widthNum - actionWidth}px`;
+            barEl.style.width = `${widthNum - actionWidth / 2}px`;
+            checkPass();
+          }
+          state.isMoving = false;
+        }
+      }
+
+      function checkPass() {
+        if (props.isSlot) {
+          resume();
+          return;
+        }
+        state.endTime = new Date().getTime();
+        state.isPassing = true;
+        state.isMoving = false;
+      }
+
+      function resume() {
+        state.isMoving = false;
+        state.isPassing = false;
+        state.moveDistance = 0;
+        state.toLeft = false;
+        state.startTime = 0;
+        state.endTime = 0;
+        const actionEl = unref(actionElRef);
+        const barEl = unref(barElRef);
+        const contentEl = unref(contentElRef);
+        if (!actionEl || !barEl || !contentEl) return;
+        state.toLeft = true;
+        useTimeoutFn(() => {
+          state.toLeft = false;
+          actionEl.style.left = '0';
+          barEl.style.width = '0';
+          //  The time is consistent with the animation time
+        }, 300);
+        contentEl.style.width = unref(getContentStyleRef).width;
+      }
+
+      expose({
+        resume,
+      });
+
+      return () => {
+        const renderBar = () => {
+          const cls = [`darg-verify-bar`];
+          if (state.toLeft) {
+            cls.push('to-left');
+          }
+          return <div class={cls} ref={barElRef} style={unref(getBarStyleRef)} />;
+        };
+
+        const renderContent = () => {
+          const cls = [`darg-verify-content`];
+          const { isPassing } = state;
+          const { text, successText } = props;
+
+          isPassing && cls.push('success');
+
+          return (
+            <div class={cls} ref={contentElRef} style={unref(getContentStyleRef)}>
+              {getSlot(slots, 'text', isPassing) || (isPassing ? successText : text)}
+            </div>
+          );
+        };
+
+        const renderAction = () => {
+          const cls = [`darg-verify-action`];
+          const { toLeft, isPassing } = state;
+          if (toLeft) {
+            cls.push('to-left');
+          }
+          return (
+            <div class={cls} onMousedown={handleDragStart} onTouchstart={handleDragStart} style={unref(getActionStyleRef)} ref={actionElRef}>
+              {getSlot(slots, 'actionIcon', isPassing) ||
+                (isPassing ? <CheckOutlined class={`darg-verify-action__icon`} /> : <DoubleRightOutlined class={`darg-verify-action__icon`} />)}
+            </div>
+          );
+        };
+
+        return (
+          <div
+            class="darg-verify"
+            ref={wrapElRef}
+            style={unref(getWrapStyleRef)}
+            onMousemove={handleDragMoving}
+            onTouchmove={handleDragMoving}
+            onMouseleave={handleDragOver}
+            onMouseup={handleDragOver}
+            onTouchend={handleDragOver}
+          >
+            {renderBar()}
+            {renderContent()}
+            {renderAction()}
+          </div>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @radius: 4px;
+
+  .darg-verify {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    background-color: rgb(238, 238, 238);
+    border: 1px solid #ddd;
+    border-radius: @radius;
+
+    &-bar {
+      position: absolute;
+      width: 0;
+      height: 36px;
+      background-color: @success-color;
+      border-radius: @radius;
+
+      &.to-left {
+        width: 0 !important;
+        transition: width 0.3s;
+      }
+    }
+
+    &-content {
+      position: absolute;
+      top: 0;
+      font-size: 12px;
+      -webkit-text-size-adjust: none;
+      background-color: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        color-stop(0, #333),
+        color-stop(0.4, #333),
+        color-stop(0.5, #fff),
+        color-stop(0.6, #333),
+        color-stop(1, #333)
+      );
+      animation: slidetounlock 3s infinite;
+      background-clip: text;
+      user-select: none;
+
+      &.success {
+        -webkit-text-fill-color: @white;
+      }
+
+      & > * {
+        -webkit-text-fill-color: #333;
+      }
+    }
+
+    &-action {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      cursor: move;
+      background-color: @white;
+      border-radius: @radius;
+      justify-content: center;
+      align-items: center;
+
+      &__icon {
+        cursor: inherit;
+      }
+
+      &.to-left {
+        left: 0 !important;
+        transition: left 0.3s;
+      }
+    }
+  }
+
+  @keyframes slidetounlock {
+    0% {
+      background-position: -120px 0;
+    }
+
+    100% {
+      background-position: 120px 0;
+    }
+  }
+</style>
diff --git a/src/components/Verify/src/ImgRotate.vue b/src/components/Verify/src/ImgRotate.vue
new file mode 100644
index 0000000..e900188
--- /dev/null
+++ b/src/components/Verify/src/ImgRotate.vue
@@ -0,0 +1,216 @@
+<script lang="tsx">
+  import type { MoveData, DragVerifyActionType } from './typing';
+  import { defineComponent, computed, unref, reactive, watch, ref } from 'vue';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import BasicDragVerify from './DragVerify.vue';
+  import { hackCss } from '/@/utils/domUtils';
+  import { rotateProps } from './props';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  export default defineComponent({
+    name: 'ImgRotateDragVerify',
+    inheritAttrs: false,
+    props: rotateProps,
+    emits: ['success', 'change', 'update:value'],
+    setup(props, { emit, attrs, expose }) {
+      const basicRef = ref<Nullable<DragVerifyActionType>>(null);
+      const state = reactive({
+        showTip: false,
+        isPassing: false,
+        imgStyle: {},
+        randomRotate: 0,
+        currentRotate: 0,
+        toOrigin: false,
+        startTime: 0,
+        endTime: 0,
+        draged: false,
+      });
+      const { t } = useI18n();
+
+      watch(
+        () => state.isPassing,
+        (isPassing) => {
+          if (isPassing) {
+            const { startTime, endTime } = state;
+            const time = (endTime - startTime) / 1000;
+            emit('success', { isPassing, time: time.toFixed(1) });
+            emit('change', isPassing);
+            emit('update:value', isPassing);
+          }
+        }
+      );
+
+      const getImgWrapStyleRef = computed(() => {
+        const { imgWrapStyle, imgWidth } = props;
+        return {
+          width: `${imgWidth}px`,
+          height: `${imgWidth}px`,
+          ...imgWrapStyle,
+        };
+      });
+
+      const getFactorRef = computed(() => {
+        const { minDegree, maxDegree } = props;
+        if (minDegree === maxDegree) {
+          return Math.floor(1 + Math.random() * 1) / 10 + 1;
+        }
+        return 1;
+      });
+
+      function handleStart() {
+        state.startTime = new Date().getTime();
+      }
+
+      function handleDragBarMove(data: MoveData) {
+        state.draged = true;
+        const { imgWidth, height, maxDegree } = props;
+        const { moveX } = data;
+        const currentRotate = Math.ceil((moveX / (imgWidth! - parseInt(height as string))) * maxDegree! * unref(getFactorRef));
+        state.currentRotate = currentRotate;
+        state.imgStyle = hackCss('transform', `rotateZ(${state.randomRotate - currentRotate}deg)`);
+      }
+
+      function handleImgOnLoad() {
+        const { minDegree, maxDegree } = props;
+        const ranRotate = Math.floor(minDegree! + Math.random() * (maxDegree! - minDegree!)); // 生成随机角度
+        state.randomRotate = ranRotate;
+        state.imgStyle = hackCss('transform', `rotateZ(${ranRotate}deg)`);
+      }
+
+      function handleDragEnd() {
+        const { randomRotate, currentRotate } = state;
+        const { diffDegree } = props;
+
+        if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
+          state.imgStyle = hackCss('transform', `rotateZ(${randomRotate}deg)`);
+          state.toOrigin = true;
+          useTimeoutFn(() => {
+            state.toOrigin = false;
+            state.showTip = true;
+            //  时间与动画时间保持一致
+          }, 300);
+        } else {
+          checkPass();
+        }
+        state.showTip = true;
+      }
+
+      function checkPass() {
+        state.isPassing = true;
+        state.endTime = new Date().getTime();
+      }
+
+      function resume() {
+        state.showTip = false;
+        const basicEl = unref(basicRef);
+        if (!basicEl) {
+          return;
+        }
+        state.isPassing = false;
+
+        basicEl.resume();
+        handleImgOnLoad();
+      }
+
+      expose({ resume });
+
+      // handleImgOnLoad();
+      return () => {
+        const { src } = props;
+        const { toOrigin, isPassing, startTime, endTime } = state;
+        const imgCls: string[] = [];
+        if (toOrigin) {
+          imgCls.push('to-origin');
+        }
+        const time = (endTime - startTime) / 1000;
+
+        return (
+          <div class="ir-dv">
+            <div class={`ir-dv-img__wrap`} style={unref(getImgWrapStyleRef)}>
+              <img
+                src={src}
+                onLoad={handleImgOnLoad}
+                width={parseInt(props.width as string)}
+                class={imgCls}
+                style={state.imgStyle}
+                onClick={() => {
+                  resume();
+                }}
+                alt="verify"
+              />
+              {state.showTip && (
+                <span class={[`ir-dv-img__tip`, state.isPassing ? 'success' : 'error']}>
+                  {state.isPassing ? t('component.verify.time', { time: time.toFixed(1) }) : t('component.verify.error')}
+                </span>
+              )}
+              {!state.showTip && !state.draged && <span class={[`ir-dv-img__tip`, 'normal']}>{t('component.verify.redoTip')}</span>}
+            </div>
+            <BasicDragVerify
+              class={`ir-dv-drag__bar`}
+              onMove={handleDragBarMove}
+              onEnd={handleDragEnd}
+              onStart={handleStart}
+              ref={basicRef}
+              {...{ ...attrs, ...props }}
+              value={isPassing}
+              isSlot={true}
+            />
+          </div>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .ir-dv {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &-img__wrap {
+      position: relative;
+      overflow: hidden;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        border-radius: 50%;
+
+        &.to-origin {
+          transition: transform 0.3s;
+        }
+      }
+    }
+
+    &-img__tip {
+      position: absolute;
+      bottom: 10px;
+      left: 0;
+      z-index: 1;
+      display: block;
+      width: 100%;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      color: @white;
+      text-align: center;
+
+      &.success {
+        background-color: fade(@success-color, 60%);
+      }
+
+      &.error {
+        background-color: fade(@error-color, 60%);
+      }
+
+      &.normal {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &-drag__bar {
+      margin-top: 20px;
+    }
+  }
+</style>
diff --git a/src/components/Verify/src/props.ts b/src/components/Verify/src/props.ts
new file mode 100644
index 0000000..1e14970
--- /dev/null
+++ b/src/components/Verify/src/props.ts
@@ -0,0 +1,87 @@
+import type { PropType } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+export const basicProps = {
+  value: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+
+  isSlot: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+
+  text: {
+    type: [String] as PropType<string>,
+    default: t('component.verify.dragText'),
+  },
+  successText: {
+    type: [String] as PropType<string>,
+    default: t('component.verify.successText'),
+  },
+  height: {
+    type: [Number, String] as PropType<number | string>,
+    default: 40,
+  },
+
+  width: {
+    type: [Number, String] as PropType<number | string>,
+    default: 220,
+  },
+
+  circle: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+
+  wrapStyle: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+  contentStyle: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+  barStyle: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+  actionStyle: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+};
+
+export const rotateProps = {
+  ...basicProps,
+  src: {
+    type: String as PropType<string>,
+  },
+
+  imgWidth: {
+    type: Number as PropType<number>,
+    default: 260,
+  },
+
+  imgWrapStyle: {
+    type: Object as PropType<any>,
+    default: {},
+  },
+
+  minDegree: {
+    type: Number as PropType<number>,
+    default: 90,
+  },
+
+  maxDegree: {
+    type: Number as PropType<number>,
+    default: 270,
+  },
+
+  diffDegree: {
+    type: Number as PropType<number>,
+    default: 20,
+  },
+};
diff --git a/src/components/Verify/src/typing.ts b/src/components/Verify/src/typing.ts
new file mode 100644
index 0000000..48f7d4c
--- /dev/null
+++ b/src/components/Verify/src/typing.ts
@@ -0,0 +1,14 @@
+export interface DragVerifyActionType {
+  resume: () => void;
+}
+
+export interface PassingData {
+  isPassing: boolean;
+  time: number;
+}
+
+export interface MoveData {
+  event: MouseEvent | TouchEvent;
+  moveDistance: number;
+  moveX: number;
+}
diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts
new file mode 100644
index 0000000..a4c6089
--- /dev/null
+++ b/src/components/VirtualScroll/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils/index';
+import vScroll from './src/VirtualScroll.vue';
+
+export const VScroll = withInstall(vScroll);
diff --git a/src/components/VirtualScroll/src/VirtualScroll.vue b/src/components/VirtualScroll/src/VirtualScroll.vue
new file mode 100644
index 0000000..e010423
--- /dev/null
+++ b/src/components/VirtualScroll/src/VirtualScroll.vue
@@ -0,0 +1,180 @@
+<script lang="tsx">
+  import { defineComponent, computed, ref, unref, reactive, onMounted, watch, nextTick, CSSProperties } from 'vue';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+
+  type NumberOrNumberString = PropType<string | number | undefined>;
+
+  const props = {
+    height: [Number, String] as NumberOrNumberString,
+    maxHeight: [Number, String] as NumberOrNumberString,
+    maxWidth: [Number, String] as NumberOrNumberString,
+    minHeight: [Number, String] as NumberOrNumberString,
+    minWidth: [Number, String] as NumberOrNumberString,
+    width: [Number, String] as NumberOrNumberString,
+    bench: {
+      type: [Number, String] as NumberOrNumberString,
+      default: 0,
+    },
+    itemHeight: {
+      type: [Number, String] as NumberOrNumberString,
+      required: true,
+    },
+    items: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+  };
+
+  const prefixCls = 'virtual-scroll';
+
+  function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
+    if (str == null || str === '') {
+      return undefined;
+    } else if (isNaN(+str!)) {
+      return String(str);
+    } else {
+      return `${Number(str)}${unit}`;
+    }
+  }
+
+  export default defineComponent({
+    name: 'VirtualScroll',
+    props,
+    setup(props, { slots }) {
+      const wrapElRef = ref<HTMLDivElement | null>(null);
+      const state = reactive({
+        first: 0,
+        last: 0,
+        scrollTop: 0,
+      });
+
+      const getBenchRef = computed(() => {
+        return parseInt(props.bench as string, 10);
+      });
+
+      const getItemHeightRef = computed(() => {
+        return parseInt(props.itemHeight as string, 10);
+      });
+
+      const getFirstToRenderRef = computed(() => {
+        return Math.max(0, state.first - unref(getBenchRef));
+      });
+
+      const getLastToRenderRef = computed(() => {
+        return Math.min((props.items || []).length, state.last + unref(getBenchRef));
+      });
+
+      const getContainerStyleRef = computed((): CSSProperties => {
+        return {
+          height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
+        };
+      });
+
+      const getWrapStyleRef = computed((): CSSProperties => {
+        const styles: Recordable<string> = {};
+        const height = convertToUnit(props.height);
+        const minHeight = convertToUnit(props.minHeight);
+        const minWidth = convertToUnit(props.minWidth);
+        const maxHeight = convertToUnit(props.maxHeight);
+        const maxWidth = convertToUnit(props.maxWidth);
+        const width = convertToUnit(props.width);
+
+        if (height) styles.height = height;
+        if (minHeight) styles.minHeight = minHeight;
+        if (minWidth) styles.minWidth = minWidth;
+        if (maxHeight) styles.maxHeight = maxHeight;
+        if (maxWidth) styles.maxWidth = maxWidth;
+        if (width) styles.width = width;
+        return styles;
+      });
+
+      watch([() => props.itemHeight, () => props.height], () => {
+        onScroll();
+      });
+
+      function getLast(first: number): number {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return 0;
+        }
+        const height = parseInt(props.height || 0, 10) || wrapEl.clientHeight;
+
+        return first + Math.ceil(height / unref(getItemHeightRef));
+      }
+
+      function getFirst(): number {
+        return Math.floor(state.scrollTop / unref(getItemHeightRef));
+      }
+
+      function onScroll() {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return;
+        }
+        state.scrollTop = wrapEl.scrollTop;
+        state.first = getFirst();
+        state.last = getLast(state.first);
+      }
+
+      function renderChildren() {
+        const { items = [] } = props;
+        return items.slice(unref(getFirstToRenderRef), unref(getLastToRenderRef)).map(genChild);
+      }
+
+      function genChild(item: any, index: number) {
+        index += unref(getFirstToRenderRef);
+        const top = convertToUnit(index * unref(getItemHeightRef));
+        return (
+          <div class={`${prefixCls}__item`} style={{ top }} key={index}>
+            {getSlot(slots, 'default', { index, item })}
+          </div>
+        );
+      }
+
+      onMounted(() => {
+        state.last = getLast(0);
+        nextTick(() => {
+          const wrapEl = unref(wrapElRef);
+          if (!wrapEl) {
+            return;
+          }
+          useEventListener({
+            el: wrapEl,
+            name: 'scroll',
+            listener: onScroll,
+            wait: 0,
+          });
+        });
+      });
+
+      return () => (
+        <div class={prefixCls} style={unref(getWrapStyleRef)} ref={wrapElRef}>
+          <div class={`${prefixCls}__container`} style={unref(getContainerStyleRef)}>
+            {renderChildren()}
+          </div>
+        </div>
+      );
+    },
+  });
+</script>
+<style scoped lang="less">
+  .virtual-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    overflow: auto;
+    flex: 1 1 auto;
+
+    &__container {
+      display: block;
+    }
+
+    &__item {
+      position: absolute;
+      right: 0;
+      left: 0;
+    }
+  }
+</style>
diff --git a/src/components/chart/Bar.vue b/src/components/chart/Bar.vue
new file mode 100644
index 0000000..f3955d0
--- /dev/null
+++ b/src/components/chart/Bar.vue
@@ -0,0 +1,87 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'bar',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+      seriesColor: {
+        type: String,
+        default: '#1890ff',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: 'bar',
+            type: 'bar',
+            data: [],
+            color: props.seriesColor,
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        let seriesData = props.chartData.map((item) => {
+          return item.value;
+        });
+        let xAxisData = props.chartData.map((item) => {
+          return item.name;
+        });
+        option.series[0].data = seriesData;
+        // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+        option.series[0].color = props.seriesColor;
+        option.xAxis.data = xAxisData;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/BarAndLine.vue b/src/components/chart/BarAndLine.vue
new file mode 100644
index 0000000..7943e26
--- /dev/null
+++ b/src/components/chart/BarAndLine.vue
@@ -0,0 +1,93 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'barAndLine',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      customColor: {
+        type: Array,
+        default: () => [],
+      }
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: 'bar',
+            type: 'bar',
+            data: [],
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        //轴数据
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type,index) => {
+          let obj = { name: type };
+          let chartArr = props.chartData.filter((item) => type === item.type);
+          //data数据
+          obj['data'] = chartArr.map((item) => item.value);
+          obj['type'] = chartArr[0].seriesType;
+          if(props?.customColor && props?.customColor[index]){
+            obj['color'] = props.customColor[index];
+          }
+          seriesData.push(obj);
+        });
+        option.series = seriesData;
+        option.xAxis.data = xAxisData;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/BarMulti.vue b/src/components/chart/BarMulti.vue
new file mode 100644
index 0000000..9dd3bfb
--- /dev/null
+++ b/src/components/chart/BarMulti.vue
@@ -0,0 +1,119 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'BarMulti',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      type: {
+        type: String as PropType<string>,
+        default: 'bar',
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+      seriesColor: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        legend: {
+          top: 30,
+        },
+        grid: {
+          top: 60,
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        //轴数据
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type) => {
+          let obj: any = { name: type, type: props.type };
+          // 代码逻辑说明: [issues/613] LineMulti 在数据不对齐时，横坐标计算错误
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].value);
+            } else {
+              data.push(null);
+            }
+          });
+          //data数据
+          obj['data'] = data;
+          // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+          if (props.seriesColor?.length) {
+            const findItem = props.seriesColor.find((item: any) => item.type === type);
+            if (findItem?.color) {
+              obj['color'] = findItem.color;
+            }
+          }
+          seriesData.push(obj);
+        });
+        option.series = seriesData;
+        option.xAxis.data = xAxisData;
+        setOptions(option);
+        getInstance()?.off('click', onClick);
+        getInstance()?.on('click', onClick);
+      }
+
+      function onClick(params) {
+        emit('click', params);
+      }
+
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/ChartCard.vue b/src/components/chart/ChartCard.vue
new file mode 100644
index 0000000..da7d58b
--- /dev/null
+++ b/src/components/chart/ChartCard.vue
@@ -0,0 +1,109 @@
+<template>
+  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">{{ title }}</span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total"
+        ><span>{{ total }}</span></div
+      >
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <div class="field">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    total: {
+      type: [Number, String],
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .chart-card-header {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    .meta {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .chart-card-action {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .chart-card-footer {
+    border-top: 1px solid #e8e8e8;
+    padding-top: 9px;
+    margin-top: 8px;
+
+    > * {
+      position: relative;
+    }
+
+    .field {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+  }
+
+  .chart-card-content {
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
+
+    .content-fix {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+</style>
diff --git a/src/components/chart/Gauge.vue b/src/components/chart/Gauge.vue
new file mode 100644
index 0000000..384541f
--- /dev/null
+++ b/src/components/chart/Gauge.vue
@@ -0,0 +1,108 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { GaugeChart } from 'echarts/charts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'Gauge',
+    props: {
+      chartData: {
+        type: Object as PropType<Object>,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+      seriesColor: {
+        type: String,
+        default: '#1890ff',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        series: [
+          {
+            type: 'gauge',
+            progress: {
+              show: true,
+              width: 12,
+            },
+            axisLine: {
+              lineStyle: {
+                width: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              length: 12,
+              lineStyle: {
+                width: 1,
+                color: '#999',
+              },
+            },
+            axisLabel: {
+              distance: 25,
+              color: '#999',
+              fontSize: 12,
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 20,
+              itemStyle: {
+                borderWidth: 5,
+              },
+            },
+            title: {},
+            detail: {
+              valueAnimation: true,
+              fontSize: 25,
+              formatter: '{value}%',
+              offsetCenter: [0, '80%'],
+            },
+            data: [
+              {
+                value: 70,
+                name: '本地磁盘',
+              },
+            ],
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        echarts.use(GaugeChart);
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        option.series[0].data[0].name = props.chartData.name;
+        option.series[0].data[0].value = props.chartData.value;
+        // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+        option.series[0].color = props.seriesColor;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/HeadInfo.vue b/src/components/chart/HeadInfo.vue
new file mode 100644
index 0000000..2d46ae4
--- /dev/null
+++ b/src/components/chart/HeadInfo.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="head-info" :class="center && 'center'">
+    <span>{{ title }}</span>
+    <p :style="{ color: `${$props.iconColor}` }">{{ content }} <a-icon :type="icon" :style="{ fontSize: `24px`, color: `${$props.iconColor}` }" /></p>
+    <em v-if="bordered" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'HeadInfo',
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      content: {
+        type: String,
+        default: '',
+      },
+      bordered: {
+        type: Boolean,
+        default: false,
+      },
+      center: {
+        type: Boolean,
+        default: true,
+      },
+      icon: {
+        type: String,
+        default: false,
+      },
+      // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+      iconColor: {
+        type: String,
+        default: '#2b99ff',
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      display: inline-block;
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 4px;
+    }
+
+    p {
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+    }
+
+    em {
+      background-color: #e8e8e8;
+      position: absolute;
+      height: 56px;
+      width: 1px;
+      top: 0;
+      right: 0;
+    }
+  }
+</style>
diff --git a/src/components/chart/LineMulti.vue b/src/components/chart/LineMulti.vue
new file mode 100644
index 0000000..daf1e1d
--- /dev/null
+++ b/src/components/chart/LineMulti.vue
@@ -0,0 +1,114 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+
+  export default defineComponent({
+    name: 'LineMulti',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      type: {
+        type: String as PropType<string>,
+        default: 'line',
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        legend: {
+          top: 30,
+        },
+        grid: {
+          top: 60,
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        //轴数据
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type) => {
+          let obj: any = { name: type, type: props.type };
+          // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+          const findItem: any = props.chartData.find((item: any) => item.type == type);
+          if (findItem && findItem.color) {
+            obj.color = findItem.color;
+          }
+          // 代码逻辑说明: [issues/613] LineMulti 在数据不对齐时，横坐标计算错误
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].value);
+            } else {
+              data.push(null);
+            }
+          });
+          //data数据
+          obj['data'] = data;
+          seriesData.push(obj);
+        });
+        option.series = seriesData;
+        option.xAxis.data = xAxisData;
+        console.log('option', option);
+        setOptions(option);
+        getInstance()?.off('click', onClick);
+        getInstance()?.on('click', onClick);
+      }
+
+      function onClick(params) {
+        emit('click', params);
+      }
+
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/Pie.vue b/src/components/chart/Pie.vue
new file mode 100644
index 0000000..b01370c
--- /dev/null
+++ b/src/components/chart/Pie.vue
@@ -0,0 +1,89 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, watchEffect, reactive, watch } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'Pie',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      size: {
+        type: Object,
+        default: () => {},
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          formatter: '{b} ({c})',
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: '72%',
+            center: ['50%', '55%'],
+            data: [],
+            labelLine: { show: true },
+            label: {
+              show: true,
+              formatter: '{b} \n ({d}%)',
+              color: '#B1B9D3',
+            },
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+      /**
+       * 监听拖拽大小变化
+       */
+      watch(
+        () => props.size,
+        () => {
+          resize();
+        },
+        {
+          immediate: true,
+        }
+      );
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        option.series[0].data = props.chartData;
+        setOptions(option);
+        resize();
+        getInstance()?.off('click', onClick);
+        getInstance()?.on('click', onClick);
+      }
+
+      function onClick(params) {
+        emit('click', params);
+      }
+
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/README.md b/src/components/chart/README.md
new file mode 100644
index 0000000..ee301ef
--- /dev/null
+++ b/src/components/chart/README.md
@@ -0,0 +1,282 @@
+# 报表组件文档
+
+## 柱状图
+
+##### 引用方式
+
+```js
+import Bar from '/@/components/chart/Bar.vue';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+
+##### chartData 示例
+
+```json
+[
+  {
+    "name": "1月",
+    "value": 320
+  },
+  {
+    "name": "2月",
+    "value": 457
+  },
+  {
+    "name": "3月",
+    "value": 182
+  }
+]
+```
+
+##### 代码示例
+
+```html
+<template>
+  <Bar :chartData="chartData"></Bar>
+</template>
+
+<script lang="ts" setup>
+  import Bar from '/@/components/chart/Bar.vue';
+  const chartData = [
+    {
+      name: '1月',
+      value: 320,
+    },
+    {
+      name: '2月',
+      value: 457,
+    },
+    {
+      name: '3月',
+      value: 182,
+    },
+  ];
+</script>
+
+<style></style>
+```
+
+## 多列柱状图
+
+##### 引用方式
+
+```js
+import BarMulti from '/@/components/chart/BarMulti.vue';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+
+##### chartData 示例
+
+```json
+[
+  {
+    "name": "1月",
+    "value": 320,
+    "type": "2021"
+  },
+  {
+    "name": "2月",
+    "value": 457,
+    "type": "2021"
+  },
+  {
+    "name": "3月",
+    "value": 182,
+    "type": "2021"
+  },
+  {
+    "name": "1月",
+    "value": 240,
+    "type": "2022"
+  },
+  {
+    "name": "2月",
+    "value": 357,
+    "type": "2022"
+  },
+  {
+    "name": "3月",
+    "value": 456,
+    "type": "2022"
+  }
+]
+```
+
+## 迷你柱状图
+
+同柱形图，修改配置即可
+
+## 面积图
+
+##### 引用方式
+
+```js
+import Line from '/@/components/chart/Line.vue';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+| option    | object |      | 配置项     |
+
+##### chartData 示例
+
+```json
+[
+  {
+    "name": "1月",
+    "value": 320
+  },
+  {
+    "name": "2月",
+    "value": 457
+  },
+  {
+    "name": "3月",
+    "value": 182
+  }
+]
+```
+
+## 多行折线图
+
+##### 引用方式
+
+```js
+import LineMulti from '/@/components/chart/LineMulti.vue';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+| option    | object |      | 配置项     |
+
+##### chartData 示例
+
+同柱形图
+
+## 饼状图
+
+##### 引用方式
+
+```js
+import Pie from '/@/components/chart/Pie';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+| option    | object |      | 配置项     |
+
+##### chartData 示例
+
+```json
+[
+  { "name": "一月", "value": 40 },
+  { "name": "二月", "value": 21 },
+  { "name": "三月", "value": 17 },
+  { "name": "四月", "value": 13 },
+  { "name": "五月", "value": 9 }
+]
+```
+
+## 雷达图
+
+##### 引用方式
+
+```js
+import Radar from '/@/components/chart/Radar';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+| option    | object |      | 配置项     |
+
+##### chartData 示例
+
+```json
+[
+  { "item": "一月", "score": 40 },
+  { "item": "二月", "score": 20 },
+  { "item": "三月", "score": 67 },
+  { "item": "四月", "score": 43 },
+  { "item": "五月", "score": 90 }
+]
+```
+
+## 仪表盘
+
+##### 引用方式
+
+```js
+import Gauge from '/@/components/chart/Gauge';
+```
+
+##### 参数列表
+
+| 参数名    | 类型   | 必填 | 说明       |
+| --------- | ------ | ---- | ---------- |
+| chartData | array  | ✔️   | 报表数据源 |
+| width     | number |      | 报表宽度   |
+| height    | number |      | 报表高度   |
+| option    | object |      | 配置项     |
+
+## 排名列表
+
+##### 引用方式
+
+```js
+import RankList from '@/components/chart/RankList';
+```
+
+##### 参数列表
+
+| 参数名 | 类型   | 必填 | 说明                     |
+| ------ | ------ | ---- | ------------------------ |
+| title  | string |      | 报表标题                 |
+| list   | array  |      | 排名列表数据             |
+| height | number |      | 报表高度，默认自适应高度 |
+
+##### list 示例
+
+```json
+[
+  { "name": "北京朝阳 1 号店", "total": 1981 },
+  { "name": "北京朝阳 2 号店", "total": 1359 },
+  { "name": "北京朝阳 3 号店", "total": 1354 },
+  { "name": "北京朝阳 4 号店", "total": 263 },
+  { "name": "北京朝阳 5 号店", "total": 446 },
+  { "name": "北京朝阳 6 号店", "total": 796 }
+]
+```
diff --git a/src/components/chart/Radar.vue b/src/components/chart/Radar.vue
new file mode 100644
index 0000000..33bc8a8
--- /dev/null
+++ b/src/components/chart/Radar.vue
@@ -0,0 +1,92 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'Radar',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        title: {
+          text: '',
+          // text: '基础雷达图',
+        },
+        legend: {
+          data: ['文综'],
+        },
+        radar: {
+          indicator: [{ name: '历史' }, { name: '地理' }, { name: '生物' }, { name: '化学' }, { name: '物理' }, { name: '政治' }],
+        },
+        series: [
+          {
+            type: 'radar' as 'custom',
+            data: [
+              {
+                value: [82, 70, 60, 55, 90, 66],
+                name: '文综',
+              },
+            ],
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        //雷达数据
+        let indicator = Array.from(
+          new Set(
+            props.chartData.map((item) => {
+              let { name, max } = item;
+              return { name, max };
+            })
+          )
+        );
+
+        let data = [];
+        typeArr.forEach((type) => {
+          let obj = { name: type };
+          let chartArr = props.chartData.filter((item) => type === item.type);
+          obj['value'] = chartArr.map((item) => item.value);
+          //data数据
+          data.push(obj);
+        });
+        option.legend.data = typeArr;
+        // option.radar.axisName = indicator;
+        option.radar.indicator = indicator;
+        option.series[0]['data'] = data;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/RankList.vue b/src/components/chart/RankList.vue
new file mode 100644
index 0000000..25bb2cf
--- /dev/null
+++ b/src/components/chart/RankList.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list" :style="{ height: height ? `${height}px` : 'auto', overflow: 'auto' }">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'RankList',
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      list: {
+        type: Array,
+        default: null,
+      },
+      height: {
+        type: Number,
+        default: null,
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .rank {
+    padding: 0 32px 32px 72px;
+
+    .list {
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        margin-top: 16px;
+
+        span {
+          font-size: 14px;
+          line-height: 22px;
+
+          &:first-child {
+            background-color: #f5f5f5;
+            color: rgba(0, 0, 0, 0.65);
+            border-radius: 20px;
+            display: inline-block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 24px;
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+            text-align: center;
+          }
+          &.active {
+            background-color: #314659;
+            color: #fff;
+          }
+          &:last-child {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+</style>
diff --git a/src/components/chart/SingleLine.vue b/src/components/chart/SingleLine.vue
new file mode 100644
index 0000000..c3cdfe4
--- /dev/null
+++ b/src/components/chart/SingleLine.vue
@@ -0,0 +1,89 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'single-line',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+      // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+      seriesColor: {
+        type: String,
+        default: '#1890ff',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            smooth: true,
+            areaStyle: {},
+            data: [],
+            color: props.seriesColor,
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+      
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        let seriesData = props.chartData.map((item) => {
+          return item.value;
+        });
+        let xAxisData = props.chartData.map((item) => {
+          return item.name;
+        });
+        option.series[0].data = seriesData;
+        // 代码逻辑说明: 【QQYUN-8762】首页默认及echars颜色调整
+        option.series[0].color = props.seriesColor;
+        option.xAxis.data = xAxisData;
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/StackBar.vue b/src/components/chart/StackBar.vue
new file mode 100644
index 0000000..d570d4a
--- /dev/null
+++ b/src/components/chart/StackBar.vue
@@ -0,0 +1,107 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect, watch } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'StackBar',
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      size: {
+        type: Object,
+        default: () => {},
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      type: {
+        type: String as PropType<string>,
+        default: 'bar',
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(100vh - 78px)',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true,
+              backgroundColor: '#333',
+            },
+          },
+        },
+        legend: {
+          top: 30,
+        },
+        grid: {
+          top: 60,
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: [],
+        },
+        series: [],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+      /**
+       * 监听拖拽大小变化
+       */
+      watch(
+        () => props.size,
+        () => {
+          console.log('props.size', props.size);
+          resize();
+        },
+        {
+          immediate: true,
+        }
+      );
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        //轴数据
+        let yAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type) => {
+          let obj = { name: type, type: props.type, stack: 'total' };
+          let chartArr = props.chartData.filter((item) => type === item.type);
+          //data数据
+          obj['data'] = chartArr.map((item) => item.value);
+          seriesData.push(obj);
+        });
+        option.series = seriesData;
+        option.yAxis.data = yAxisData;
+        setOptions(option);
+      }
+
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/src/components/chart/Trend.vue b/src/components/chart/Trend.vue
new file mode 100644
index 0000000..9294219
--- /dev/null
+++ b/src/components/chart/Trend.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['trend-icon', trend]"><Icon :icon="'ant-design:caret-' + trend + '-outlined'" /></span>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+
+  export default defineComponent({
+    name: 'Trend',
+    props: {
+      // 同title
+      term: {
+        type: String,
+        default: '',
+        required: true,
+      },
+      // 百分比
+      percentage: {
+        type: Number,
+        default: null,
+      },
+      type: {
+        type: Boolean,
+        default: null,
+      },
+      target: {
+        type: Number,
+        default: 0,
+      },
+      value: {
+        type: Number,
+        default: 0,
+      },
+      fixed: {
+        type: Number,
+        default: 2,
+      },
+    },
+    setup(props) {
+      const trend = computed(() => {
+        let type = props.type === null ? props.value >= props.target : props.type;
+        return type ? 'up' : 'down';
+      });
+      const rate = computed(() =>
+        (props.percentage === null ? (Math.abs(props.value - props.target) * 100) / props.target : props.percentage).toFixed(props.fixed)
+      );
+      return {
+        trend,
+        rate,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .chart-trend {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+
+    .trend-icon {
+      font-size: 12px;
+
+      &.up,
+      &.down {
+        margin-left: 4px;
+        position: relative;
+        top: 1px;
+
+        i {
+          font-size: 12px;
+          transform: scale(0.83);
+        }
+      }
+
+      &.up {
+        color: #f5222d;
+      }
+
+      &.down {
+        color: #52c41a;
+        top: -1px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/jeecg/AIcon.vue b/src/components/jeecg/AIcon.vue
new file mode 100644
index 0000000..699f5ce
--- /dev/null
+++ b/src/components/jeecg/AIcon.vue
@@ -0,0 +1,38 @@
+<template>
+  <Icon :icon="icon" :size="size"></Icon>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { isEmpty } from '/@/utils/is';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'AIcon',
+    components: { Icon },
+    props: {
+      icon: String,
+      type: String,
+      // 图标大小，默认 16
+      size: propTypes.any,
+      // 样式
+      theme: propTypes.any,
+    },
+    setup(props) {
+      const icon = computed(() => {
+        if (props.icon && !isEmpty(props.icon)) {
+          return props.icon;
+        }
+        let iconTheme = props.theme ? `-${props.theme}` : '';
+        return `ant-design:${props.type}${iconTheme}`;
+      });
+
+      return {
+        icon,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/jeecg/ExcelButton.vue b/src/components/jeecg/ExcelButton.vue
new file mode 100644
index 0000000..98d5fec
--- /dev/null
+++ b/src/components/jeecg/ExcelButton.vue
@@ -0,0 +1,84 @@
+<template>
+  <a-button type="primary" v-if="hasExportAuth() && config.export" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+  <a-upload name="file" :showUploadList="false" v-if="hasImportAuth() && config.import" :customRequest="(file) => onImportXls(file)">
+    <a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button>
+  </a-upload>
+</template>
+
+<script lang="ts" setup name="ExcelButton">
+  import { PropType } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  // 定义 excel 方法所需参数
+  interface ExcelConfig {
+    // 导出配置
+    exportConfig: {
+      url: string;
+      // 导出文件名
+      name?: string | (() => string);
+      //按钮权限
+      auth?: string | string[];
+    };
+    // 导入配置
+    importConfig: {
+      url: string;
+      // 导出成功后的回调
+      success?: (fileInfo?: any) => void;
+      //按钮权限
+      auth?: string | string[];
+    };
+  }
+  /**
+   * 定义组件参数
+   */
+  const props = defineProps({
+    config: {
+      type: Object as PropType<ExcelConfig>,
+      default: null,
+    },
+  });
+  //按钮权限问题
+  const { hasPermission } = usePermission();
+  //导入导出方法
+  const { handleExportXls, handleImportXls } = useMethods();
+
+  const $message = useMessage();
+  // 导出 excel
+  function onExportXls() {
+    let { url, name } = props.config?.export ?? {};
+    if (url) {
+      let title = typeof name === 'function' ? name() : name;
+      return handleExportXls(title as string, url);
+    } else {
+      $message.createMessage.warn('没有传递 export.url 参数');
+      return Promise.reject();
+    }
+  }
+
+  // 导入 excel
+  function onImportXls(file) {
+    let { url, success } = props.config?.import ?? {};
+    if (url) {
+      return handleImportXls(file, url, success);
+    } else {
+      $message.createMessage.warn('没有传递 import.url 参数');
+      return Promise.reject();
+    }
+  }
+
+  // 导入按钮权限
+  function hasImportAuth() {
+    let auth = props.config?.import?.auth;
+    return auth && auth.length > 0 ? hasPermission(auth) : true;
+  }
+
+  // 导出按钮权限
+  function hasExportAuth() {
+    let auth = props.config?.export?.auth;
+    return auth && auth.length > 0 ? hasPermission(auth) : true;
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/jeecg/JPrompt/JPrompt.vue b/src/components/jeecg/JPrompt/JPrompt.vue
new file mode 100644
index 0000000..fabea94
--- /dev/null
+++ b/src/components/jeecg/JPrompt/JPrompt.vue
@@ -0,0 +1,176 @@
+<template>
+  <ConfigProvider :locale="getAntdLocale">
+    <Modal v-bind="getProps">
+      <Spin :spinning="loading">
+        <div class="j-prompt-content-body">
+          <div v-html="options.content" style="margin-bottom: 8px"></div>
+          <BasicForm @register="registerForm">
+            <template #customInput="{ model, field }">
+              <Input ref="inputRef" v-model:value="model[field]" :placeholder="placeholder" @pressEnter="onSubmit" @input="onChange" />
+            </template>
+          </BasicForm>
+        </div>
+      </Spin>
+    </Modal>
+  </ConfigProvider>
+</template>
+
+<script lang="ts">
+  import type { JPromptProps } from './typing';
+  import type { ModalProps } from '/@/components/Modal';
+  import { ref, defineComponent, computed, unref, onMounted, nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { Modal, Spin, Input, ConfigProvider } from 'ant-design-vue';
+  import { useLocale } from '/@/locales/useLocale';
+
+  export default defineComponent({
+    name: 'JPrompt',
+    components: {
+      Modal,
+      Spin,
+      Input,
+      BasicForm,
+      ConfigProvider,
+    },
+    emits: ['register'],
+    setup(props, { emit }) {
+      const inputRef = ref();
+      const { getAntdLocale } = useLocale();
+      const visible = ref(false);
+      // 当前是否正在加载中
+      const loading = ref(false);
+      const options = ref<JPromptProps>({});
+      const placeholder = computed(() => options.value.placeholder ?? '请输入内容');
+      // 注册表单
+      const [registerForm, { clearValidate, setFieldsValue, validate, updateSchema }] = useForm({
+        compact: true,
+        wrapperCol: { span: 24 },
+        schemas: [
+          {
+            label: '',
+            field: 'input',
+            component: 'Input',
+            slot: 'customInput',
+          },
+        ],
+        showActionButtonGroup: false,
+      });
+
+      // 弹窗最终props
+      const getProps = computed(() => {
+        let opt = options.value;
+        let modalProps: Partial<ModalProps> = {
+          width: (opt.width ?? 500) as number,
+          title: (opt.title ?? 'prompt') as string,
+          open: unref(visible),
+          confirmLoading: unref(loading),
+        };
+        let finalProps: Recordable = {
+          ...modalProps,
+          ...props,
+          ...opt,
+          onOk: onSubmit,
+          onCancel() {
+            if (typeof options.value.onCancel === 'function') {
+              options.value.onCancel();
+            }
+            close();
+          },
+        };
+        return finalProps;
+      });
+
+      onMounted(() => {
+        emit('register', {
+          openModal,
+          setLoading,
+          getVisible: visible,
+        });
+      });
+
+      /** 弹窗开启 */
+      async function openModal(opt: any) {
+        document.body.focus();
+
+        options.value = opt;
+        visible.value = true;
+        await nextTick();
+        await updateSchema({
+          field: 'input',
+          required: options.value.required,
+          rules: options.value.rules,
+          dynamicRules: options.value.dynamicRules,
+        } as any);
+        await setFieldsValue({
+          input: options.value.defaultValue ?? '',
+        });
+        await clearValidate();
+        inputRef.value?.focus();
+      }
+
+      /** 弹窗关闭 */
+      function close() {
+        visible.value = false;
+      }
+
+      function onChange() {
+        validate()
+      }
+
+      /** 提交表单 */
+      async function onSubmit() {
+        try {
+          const { onOk } = options.value;
+          // 表单验证
+          let values = await validate();
+          setLoading(true);
+          if (typeof onOk === 'function') {
+            let flag = await onOk(values.input);
+            // 只有返回 false 才阻止关闭弹窗
+            if (!(flag === false)) {
+              close();
+            }
+          } else {
+            close();
+          }
+        } finally {
+          setLoading(false);
+        }
+      }
+
+      /** 设置加载状态*/
+      function setLoading(flag) {
+        loading.value = flag;
+      }
+
+      return {
+        inputRef,
+        getProps,
+        loading,
+        options,
+        placeholder,
+        getAntdLocale,
+        onChange,
+        onSubmit,
+
+        registerForm,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+.j-prompt-content-body {
+  padding: 20px;
+
+  .ant-form-item-control-input-content {
+    & > div {
+      width: 100%;
+
+      & > .j-form-item-middleware {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/jeecg/JPrompt/hooks/useJPrompt.ts b/src/components/jeecg/JPrompt/hooks/useJPrompt.ts
new file mode 100644
index 0000000..44b1bcd
--- /dev/null
+++ b/src/components/jeecg/JPrompt/hooks/useJPrompt.ts
@@ -0,0 +1,59 @@
+import type { JPromptProps } from '../typing';
+import { render, createVNode, nextTick } from 'vue';
+import { error } from '/@/utils/log';
+import { getAppContext } from "@/store";
+import JPrompt from '../JPrompt.vue';
+
+export function useJPrompt() {
+
+  function createJPrompt(options: JPromptProps) {
+    let instance = null;
+    const box = document.createElement('div');
+    const vm = createVNode(JPrompt, {
+      // 注册
+      async onRegister(ins) {
+        instance = ins;
+        await nextTick();
+        ins.openModal(options);
+      },
+      // 销毁
+      afterClose() {
+        render(null, box);
+        document.body.removeChild(box);
+      },
+    });
+    vm.appContext = getAppContext()!;
+    // 挂载到 body
+    render(vm, box);
+    document.body.appendChild(box);
+
+    function getInstance(): any {
+      if (instance == null) {
+        error('useJPrompt instance is undefined!');
+      }
+      return instance;
+    }
+
+    function updateModal(options: JPromptProps) {
+      getInstance()?.updateModal(options);
+    }
+
+    function closeModal() {
+      getInstance()?.closeModal();
+    }
+
+    function setLoading(loading) {
+      getInstance()?.setLoading(loading);
+    }
+
+    return {
+      closeModal,
+      updateModal,
+      setLoading,
+    };
+  }
+
+  return {
+    createJPrompt,
+  };
+}
diff --git a/src/components/jeecg/JPrompt/index.ts b/src/components/jeecg/JPrompt/index.ts
new file mode 100644
index 0000000..850fc09
--- /dev/null
+++ b/src/components/jeecg/JPrompt/index.ts
@@ -0,0 +1,2 @@
+export { useJPrompt } from './hooks/useJPrompt';
+export { default as JPrompt } from './JPrompt.vue';
diff --git a/src/components/jeecg/JPrompt/typing.ts b/src/components/jeecg/JPrompt/typing.ts
new file mode 100644
index 0000000..785efe0
--- /dev/null
+++ b/src/components/jeecg/JPrompt/typing.ts
@@ -0,0 +1,15 @@
+import { ModalOptionsPartial } from '/@/hooks/web/useMessage';
+import { RenderCallbackParams, Rule } from '/@/components/Form';
+
+export interface JPromptProps extends ModalOptionsPartial {
+  // 输入框是否必填
+  required?: boolean;
+  // 校验
+  rules?: Rule[];
+  // 动态校验
+  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
+  // 占位字符
+  placeholder?: string;
+  // 输入框默认值
+  defaultValue?: string;
+}
diff --git a/src/components/jeecg/JTabsSelectUser/SelectUserModal.vue b/src/components/jeecg/JTabsSelectUser/SelectUserModal.vue
new file mode 100644
index 0000000..d507393
--- /dev/null
+++ b/src/components/jeecg/JTabsSelectUser/SelectUserModal.vue
@@ -0,0 +1,722 @@
+<template>
+  <BasicModal
+    title="选择用户"
+    @register="registerModal"
+    width="100%"
+    style="top: 10px"
+    @ok="handleSelectSuccess"
+    :canFullscreen="true"
+    keyboard
+    defaultFullscreen
+  >
+    <a-row>
+      <!-- 左侧多tabs切换 -->
+      <a-col :xs="24" :sm="6">
+        <a-card :bordered="true" :bodyStyle="{ maxHeight: 'calc(100vh - 200px)', overflow: 'hidden', padding: 0 }">
+          <a-tabs v-model:activeKey="activeTab" size="small" centered :tabBarStyle="{ margin: 10 }" @change="onTabChange">
+            <!-- 部门标签页 -->
+            <a-tab-pane key="depart" tab="部门">
+              <div style="padding: 14px">
+                <a-alert type="info" :showIcon="true" class="alert-info">
+                  <template #message>
+                    <div class="alert-message-content">
+                      <span class="alert-label">当前选择：</span>
+                      <span v-if="departInfo.currentSelectRow.title" class="selected-title">{{ departInfo.currentSelectRow.title }}</span>
+                      <a v-if="departInfo.currentSelectRow.title" style="margin-left: 10px" @click="onClearSelectedDepart">取消选择</a>
+                    </div>
+                  </template>
+                </a-alert>
+                <a-input-search placeholder="按部门名称搜索…" :allowClear="true" style="margin-bottom: 10px" @search="onSearchDepart" v-model:value="departSearchText" />
+                <!--组织机构-->
+                <div class="tree-container" v-if="departInfo.treeData && departInfo.treeData.length > 0">
+                  <a-directory-tree
+                    selectable
+                    :selectedKeys="departInfo.selectedKeys"
+                    :checkStrictly="true"
+                    @select="onSelectDepart"
+                    :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
+                    :load-data="onLoadTreeData"
+                    :treeData="departInfo.treeData"
+                    :showIcon="false"
+                    :expandedKeys="expandedDepartKeys"
+                    @expand="onDepartExpand"
+                  >
+                    <template #title="{ orgCategory, title }">
+                      <TreeIcon :orgCategory="orgCategory" :title="title"></TreeIcon>
+                    </template>
+                  </a-directory-tree>
+                </div>
+                <a-empty v-else description="无部门信息" />
+              </div>
+            </a-tab-pane>
+
+            <!-- 岗位标签页 -->
+            <a-tab-pane key="position" tab="岗位">
+              <div style="padding: 14px">
+                <a-alert type="info" :showIcon="true" class="alert-info">
+                  <template #message>
+                    <div class="alert-message-content">
+                      <span class="alert-label">当前选择：</span>
+                      <span v-if="positionInfo.currentSelectRow.title" class="selected-title">{{ positionInfo.currentSelectRow.title }}</span>
+                      <a v-if="positionInfo.currentSelectRow.title" style="margin-left: 10px" @click="onClearSelectedPosition">取消选择</a>
+                    </div>
+                  </template>
+                </a-alert>
+                <a-input-search
+                  placeholder="按岗位名称搜索…"
+                  style="margin-bottom: 10px"
+                  allowClear
+                  @search="onSearchPosition"
+                  v-model:value="positionSearchText"
+                />
+                <!--岗位列表-->
+                <div class="">
+                  <PostRankRelation :treeData="positionInfo.treeData" @select="onSelectPosition" />
+                </div>
+              </div>
+            </a-tab-pane>
+
+            <!-- 用户组标签页 -->
+            <a-tab-pane key="userGroup" tab="用户组">
+              <div style="padding: 14px">
+                <a-alert type="info" :showIcon="true" class="alert-info">
+                  <template #message>
+                    <div class="alert-message-content">
+                      <span class="alert-label">当前选择：</span>
+                      <span v-if="userGroupInfo.currentSelectRow.title" class="selected-title">{{ userGroupInfo.currentSelectRow.title }}</span>
+                      <a v-if="userGroupInfo.currentSelectRow.title" style="margin-left: 10px" @click="onClearSelectedUserGroup">取消选择</a>
+                    </div>
+                  </template>
+                </a-alert>
+                <a-input-search
+                  placeholder="按用户组名称搜索…"
+                  style="margin-bottom: 10px"
+                  allowClear
+                  @search="onSearchUserGroup"
+                  v-model:value="userGroupSearchText"
+                />
+                <!--用户组列表-->
+                <div class="user-group-list" v-if="userGroupInfo.data && userGroupInfo.data.length > 0">
+                  <div
+                    v-for="item in userGroupInfo.data"
+                    :key="item.id"
+                    class="user-group-item"
+                    :class="{ 'user-group-item-selected': userGroupInfo.selectedKeys.includes(item.id) }"
+                    @click="onSelectUserGroup(item)"
+                  >
+                    <span class="user-group-title">{{ item.title }}</span>
+                  </div>
+                </div>
+                <a-empty v-else description="无用户组信息" />
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-card>
+      </a-col>
+
+      <!-- 中间列表-展示用户信息 -->
+      <a-col :xs="24" :sm="showSelected ? 12 : 18">
+        <a-card title="选择人员" :bordered="true" :bodyStyle="{ paddingTop: '1px' }">
+          <BasicTable @register="registerTable" :rowSelection="rowSelection" />
+        </a-card>
+      </a-col>
+
+      <!-- 右侧显示已经选中用户，支持调整顺序 -->
+      <a-col :xs="24" :sm="6" v-if="showSelected">
+        <a-card title="已选用户" :bordered="true">
+          <BasicTable @register="registerSelectedUserTable">
+            <!--操作栏-->
+            <template #action="{ record }">
+              <a-button type="primary" size="small" @click="handleDelete(record)" preIcon="ant-design:delete">删除</a-button>
+            </template>
+          </BasicTable>
+        </a-card>
+      </a-col>
+    </a-row>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref, unref, reactive, toRaw, watch } from 'vue';
+  import {
+    getDepartTreeData,
+    getDepartUserList,
+    getUserList,
+    queryALLRankRelation,
+    searchByKeywords,
+    columns,
+    selectedUserColumns,
+    searchFormSchema,
+  } from './useSelectUser';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import TreeIcon from '@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import PostRankRelation from './component/PostRankRelation.vue';
+
+  const props = defineProps({
+    multi: {
+      type: Boolean,
+      default: true,
+    },
+    showSelected: {
+      type: Boolean,
+      default: true,
+    },
+    //回传value字段名
+    rowKey: {
+      type: String,
+      default: 'username',
+    },
+  });
+  const emit = defineEmits(['selected', 'register']);
+  const [registerModal, { closeModal }] = useModalInner((data) => {
+    showSelectedValue(data);
+  });
+
+  // 当前激活的标签页
+  const activeTab = ref('depart');
+  // 加载状态
+  const loading = ref(false);
+  // 搜索文本
+  const departSearchText = ref('');
+  const positionSearchText = ref('');
+  const userGroupSearchText = ref('');
+
+  // 原始数据缓存
+  const originalDepartData = ref<any[]>([]);
+  const originalPositionData = ref<any[]>([]);
+  const originalUserGroupData = ref<any[]>([]);
+  /*-----------------部门---begin----------------*/
+  const departInfo = reactive({
+    treeData: [] as any[],
+    selectedKeys: [] as any[],
+    currentSelectRow: {
+      title: '',
+    } as any,
+  });
+  function onSelectDepart(data, { node }) {
+    departInfo.selectedKeys[0] = data[0];
+    departInfo.currentSelectRow = toRaw(node.dataRef);
+    console.log(departInfo);
+    reload();
+  }
+  function onClearSelectedDepart() {
+    departInfo.selectedKeys = [];
+    departInfo.currentSelectRow = { title: '' };
+    reload();
+  }
+  // 部门树展开的keys
+  const expandedDepartKeys = ref<any[]>([]);
+
+  // 部门树展开事件
+  function onDepartExpand(expandedKeys) {
+    expandedDepartKeys.value = expandedKeys;
+    // 延迟触发滚动区域重新计算
+    setTimeout(() => {
+      const treeContainer = document.querySelector('.tree-container') as HTMLElement | null;
+      if (treeContainer) {
+        // 强制触发重排
+        treeContainer.style.overflow = 'hidden';
+        setTimeout(() => {
+          treeContainer.style.overflow = 'auto';
+        }, 10);
+      }
+    }, 100);
+  }
+  async function loadRootDepart() {
+    const result = await getDepartTreeData();
+    if (Array.isArray(result)) {
+      //update-begin-author:liusq---date:2025-12-05--for: JHHB-1175 【流程审批】指定下一步操作人，人员需要按用户的排序进行排序 部门加滚动条 显示部门简称
+      result.forEach((item) => {
+        item.title = item.departNameAbbr || item.title;
+      });
+      //update-end-author:liusq---date:2025-12-05--for: JHHB-1175 【流程审批】指定下一步操作人，人员需要按用户的排序进行排序 部门加滚动条 显示部门简称
+      departInfo.treeData = result;
+      originalDepartData.value = result;
+    }
+  }
+
+  // 部门搜索
+  async function onSearchDepart(value) {
+    departSearchText.value = value;
+    if (!value) {
+      departInfo.treeData = originalDepartData.value;
+      return;
+    }
+    try {
+      departInfo.treeData = [];
+      let result = await searchByKeywords({ keyWord: value, orgCategory: '1,2' });
+      if (Array.isArray(result)) {
+        departInfo.treeData = result;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function onLoadTreeData(treeNode) {
+    try {
+      const result = await getDepartTreeData({
+        pid: treeNode.dataRef.id,
+      });
+      if (result.length == 0) {
+        treeNode.dataRef.isLeaf = true;
+      } else {
+        //update-begin-author:liusq---date:2025-12-05--for: JHHB-1175 【流程审批】指定下一步操作人，人员需要按用户的排序进行排序 部门加滚动条 显示部门简称
+        result.forEach((item) => {
+          item.title = item.departNameAbbr || item.title;
+        });
+        //update-end-author:liusq---date:2025-12-05--for: JHHB-1175 【流程审批】指定下一步操作人，人员需要按用户的排序进行排序 部门加滚动条 显示部门简称
+        treeNode.dataRef.children = result;
+      }
+      // departInfo.treeData = [...departInfo.treeData]
+      // 数据加载完成后，延迟触发滚动区域重新计算
+      // setTimeout(() => {
+      //   const treeContainer = document.querySelector('.tree-container');
+      //   if (treeContainer) {
+      //     // 强制触发重排，保持当前滚动位置
+      //     const scrollTop = treeContainer.scrollTop;
+      //     treeContainer.style.overflow = 'hidden';
+      //     setTimeout(() => {
+      //       treeContainer.style.overflow = 'auto';
+      //       treeContainer.scrollTop = scrollTop;
+      //     }, 10);
+      //   }
+      // }, 50);
+    } catch (e) {
+      console.error('部门树子节点加载失败', e);
+    }
+    return Promise.resolve();
+  }
+  /*-----------------部门---end----------------*/
+
+  /*-----------------岗位---begin----------------*/
+  const positionInfo = reactive({
+    treeData: [] as any[],
+    selectedKeys: [] as any[],
+    currentSelectRow: { title: '' } as any,
+  });
+  // 递归搜索函数，支持搜索所有层级的节点
+  const findNodeInTree = (treeData: any[], targetId: any): any => {
+    for (const node of treeData) {
+      if (node.id == targetId) {
+        return node;
+      }
+      if (node.children && Array.isArray(node.children)) {
+        const found = findNodeInTree(node.children, targetId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+
+  function onSelectPosition(data) {
+    // 避免循环引用错误，只使用安全的数据
+    positionInfo.selectedKeys[0] = data[0];
+    let obj = findNodeInTree(positionInfo.treeData, data[0]);
+    positionInfo.currentSelectRow = obj ? { ...obj } : { title: '' };
+    reload();
+  }
+
+  function onClearSelectedPosition() {
+    positionInfo.selectedKeys = [];
+    positionInfo.currentSelectRow = { title: '' };
+    reload();
+  }
+
+  async function loadPositionList() {
+    try {
+      const result = await queryALLRankRelation();
+      if (result && Array.isArray(result) && result.length > 0) {
+        positionInfo.treeData = result;
+        originalPositionData.value = result;
+      }
+    } catch (error) {
+      console.error('获取岗位列表失败', error);
+    }
+  }
+  // 岗位搜索
+  function onSearchPosition(value) {
+    positionSearchText.value = value;
+    if (!value) {
+      positionInfo.treeData = originalPositionData.value;
+      return;
+    }
+
+    const searchText = value.toLowerCase();
+
+    // 递归过滤树：如果节点自身匹配或任一子孙匹配，则保留该节点（并只保留匹配的子节点）
+    function filterTree(nodes: any[]): any[] {
+      if (!Array.isArray(nodes)) return [];
+      const result: any[] = [];
+      for (const node of nodes) {
+        const title = (node.title || '').toLowerCase();
+        let matched = title.includes(searchText);
+        let filteredChildren = [];
+        if (node.children && Array.isArray(node.children)) {
+          filteredChildren = filterTree(node.children);
+          if (filteredChildren.length > 0) matched = true;
+        }
+        if (matched) {
+          // 浅拷贝节点，避免修改原始数据
+          const newNode: any = { ...node };
+          if (filteredChildren.length > 0) {
+            newNode.children = filteredChildren;
+          } else {
+            // 确保在没有匹配子节点时不携带 children 或将其清空
+            delete newNode.children;
+          }
+          result.push(newNode as any);
+        }
+      }
+      return result;
+    }
+
+    positionInfo.treeData = filterTree(originalPositionData.value || []);
+  }
+  /*-----------------岗位---end----------------*/
+
+  /*-----------------用户组---begin----------------*/
+  const userGroupInfo = reactive({
+    data: [] as any[],
+    selectedKeys: [] as string[],
+    currentSelectRow: {
+      title: '',
+    } as any,
+  });
+
+  function onSelectUserGroup(data) {
+    userGroupInfo.selectedKeys[0] = data.id;
+    userGroupInfo.currentSelectRow = data;
+    reload();
+  }
+
+  function onClearSelectedUserGroup() {
+    userGroupInfo.selectedKeys = [];
+    userGroupInfo.currentSelectRow = { title: '' };
+    reload();
+  }
+
+  async function loadUserGroupList() {
+    try {
+      const result = await defHttp.get({ url: '/sys/ugroup/list' });
+      if (result.records && Array.isArray(result.records) && result.records.length > 0) {
+        const userGroupData = result.records.map((item) => ({
+          key: item.id,
+          title: item.groupName,
+          id: item.id,
+        }));
+        userGroupInfo.data = userGroupData;
+        originalUserGroupData.value = userGroupData;
+      }
+    } catch (error) {
+      console.error('获取用户组列表失败', error);
+    }
+  }
+  // 用户组搜索
+  function onSearchUserGroup(value) {
+    userGroupSearchText.value = value;
+    if (!value) {
+      userGroupInfo.data = originalUserGroupData.value;
+      return;
+    }
+
+    const searchText = value.toLowerCase();
+    const filteredData = originalUserGroupData.value.filter((item) => item.title.toLowerCase().includes(searchText));
+    userGroupInfo.data = filteredData;
+  }
+  /*-----------------用户组---end----------------*/
+
+  /*-----------------用户列表---begin----------------*/
+  async function queryUserList(params) {
+    params['column'] = 'sort';
+    params['order'] = 'ASC';
+    if(departInfo.selectedKeys.length == 0 && positionInfo.selectedKeys.length == 0 && userGroupInfo.selectedKeys.length == 0 && params.realname){
+      params['realname'] = `*${params.realname.trim()}*`;
+    }
+    // 根据当前激活的标签页进行查询
+    if (activeTab.value === 'depart') {
+      let arr = departInfo.selectedKeys;
+      if (arr.length > 0) {
+        //根据部门查询
+        params['id'] = arr[0];
+        let result = await getDepartUserList(params);
+        if (params.username) {
+          result.records = result.records.filter((item) => {
+            return item.username.indexOf(params.username) != -1;
+          });
+        }
+        return Promise.resolve(result);
+      } else {
+        return getUserList(params);
+      }
+    } else if (activeTab.value === 'position') {
+      let arr = positionInfo.selectedKeys;
+      if (arr.length > 0) {
+        //根据岗位查询
+        params['orgCode'] = positionInfo.currentSelectRow?.orgCode;
+        return defHttp.get({ url: '/sys/user/queryDepartPostByOrgCode', params });
+      } else {
+        return getUserList(params);
+      }
+    } else if (activeTab.value === 'userGroup') {
+      let arr = userGroupInfo.selectedKeys;
+      if (arr.length > 0) {
+        //根据用户组查询
+        params['groupId'] = arr[0];
+        return defHttp.get({ url: '/sys/user/groupUserList', params });
+      } else {
+        return getUserList(params);
+      }
+    } else {
+      return getUserList(params);
+    }
+  }
+  const { tableContext } = useListPage({
+    designScope: 'tabs-select-user',
+    pagination: true,
+    tableProps: {
+      title: '',
+      api: queryUserList,
+      columns: columns,
+      showActionColumn: false,
+      showTableSetting: false,
+      canResize: false,
+      clickToRowSelect: true,
+      formConfig: {
+        labelWidth: '90px',
+        schemas: searchFormSchema,
+        autoAdvancedCol: 4,
+        //update-begin-author:liusq---date:2024-06-11--for: 指定会签人员的弹框 查询遮挡了
+        baseColProps: { xs: 24, sm: 24, md: 24, lg: 12, xl: 8, xxl: 8 },
+        actionColOptions: { xs: 24, sm: 24, md: 24, lg: 12, xl: 8, xxl: 8 },
+        //update-end-author:liusq---date:2024-06-11--for:指定会签人员的弹框 查询遮挡了
+      },
+    },
+  });
+  const [registerTable, { reload, deleteSelectRowByKey }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+
+  watch(
+    () => props.multi,
+    (val) => {
+      if (val === false) {
+        rowSelection.type = 'radio';
+      } else {
+        rowSelection.type = 'checkbox';
+      }
+    }
+  );
+
+  /*-----------------用户列表--end-----------------*/
+  const selectedUserList = ref<any[]>([]);
+  //update-begin-author:liusq---date:2024-06-11--for: TV360X-1047 指定下一步操作人/抄送给，选人组件无法多选。
+  watch(
+    selectedRows,
+    () => {
+      let arr = [];
+      for (let row of unref(selectedRows)) {
+        arr.push({
+          realname: row.realname,
+          username: row.username,
+          id: row.id,
+        });
+      }
+      selectedUserList.value = arr;
+    },
+    { deep: true }
+  );
+  //update-end-author:liusq---date:2024-06-11--for: TV360X-1047 指定下一步操作人/抄送给，选人组件无法多选。
+
+  const { tableContext: selectedTableContext } = useListPage({
+    designScope: 'bpm-select-user',
+    pagination: false,
+    tableProps: {
+      title: '',
+      columns: selectedUserColumns,
+      pagination: false,
+      dataSource: selectedUserList,
+      showActionColumn: true,
+      showTableSetting: false,
+      canResize: false,
+      useSearchForm: false,
+    },
+  });
+  const [registerSelectedUserTable] = selectedTableContext;
+  function handleDelete(record) {
+    let id = record.id;
+    let arr = selectedUserList.value;
+    arr = arr.filter((item) => item.id != id);
+    selectedUserList.value = arr;
+    deleteSelectRowByKey(record.id);
+  }
+
+  function handleSelectSuccess() {
+    let arr = toRaw(selectedUserList.value);
+    emit('selected', arr);
+    closeModal();
+  }
+
+  /**
+   * 弹框打开 回显下拉框选中的数据
+   * @param data
+   */
+  function showSelectedValue(data) {
+    let selectedValue = data.selected;
+    if (!selectedValue || selectedValue.length == 0) {
+      selectedUserList.value = [];
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+    } else {
+      let arr1 = [],
+        arr2 = [],
+        arr3 = [];
+      for (let item of selectedValue) {
+        arr1.push(item.id);
+        arr2.push({ ...item });
+        arr3.push({ ...item });
+      }
+      selectedRowKeys.value = arr1;
+      selectedUserList.value = arr2;
+      selectedRows.value = arr3;
+    }
+  }
+
+  /**
+   * tab切换，取消选择
+   * @param key
+   */
+  function onTabChange() {
+    onClearSelectedDepart();
+    onClearSelectedPosition();
+    onClearSelectedUserGroup();
+  }
+  // 初始化加载所有数据
+  loadRootDepart();
+  loadPositionList();
+  loadUserGroupList();
+</script>
+
+<style scoped>
+  .user-group-list {
+    max-height: calc(100vh - 390px);
+    min-height: 150px;
+    overflow-y: auto;
+    margin-top: 8px;
+  }
+
+  .user-group-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    margin-bottom: 4px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: #fff;
+  }
+
+  .user-group-item:hover {
+    border-color: #40a9ff;
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+  }
+
+  .user-group-item-selected {
+    border-color: #1890ff;
+    background-color: #f0f8ff;
+    color: #1890ff;
+    font-weight: 500;
+  }
+
+  .user-group-item-selected:hover {
+    border-color: #096dd9;
+    background-color: #e6f7ff;
+  }
+
+  .user-group-title {
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .selected-icon {
+    color: #52c41a;
+    font-size: 14px;
+    margin-left: 8px;
+  }
+  .alert-info {
+    margin-bottom: 5px;
+  }
+  /**部门树组件滚动条样式*/
+  .tree-container {
+    max-height: calc(100vh - 390px); /* 视口响应式高度，兼容小屏 */
+    min-height: 150px;               /* 最小高度兜底 */
+    height: auto;                    /* 自适应内容 */
+    overflow-y: auto;                /* 垂直滚动 */
+    overflow-x: hidden;              /* 隐藏水平滚动 */
+    position: relative;              /* 相对定位 */
+  }
+  /* 深度选择器优化树组件内部样式 */
+  .tree-container :deep(.ant-tree) {
+    width: 100%;
+    padding: 8px 4px;
+  }
+
+  .tree-container :deep(.ant-tree-list-holder) {
+    overflow: visible !important;
+  }
+  .tree-container::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .tree-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+
+  .tree-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+
+  .tree-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+  .selected-title {
+    display: inline-block; /* 设置为块级元素才能应用宽度限制 */
+    max-width: 180px; /* 最大宽度限制 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    white-space: nowrap; /* 禁止换行 */
+    vertical-align: middle; /* 垂直居中 */
+  }
+  /* Alert消息内容水平对齐 */
+  .alert-message-content {
+    display: flex; /* 弹性布局 */
+    align-items: center; /* 垂直居中 */
+    gap: 8px; /* 元素间距 */
+    flex-wrap: nowrap; /* 允许换行 */
+  }
+
+  .alert-label {
+    color: #000000d9; /* 标签颜色 */
+    font-weight: 500; /* 字体加粗 */
+    white-space: nowrap; /* 禁止换行 */
+  }
+
+  .clear-link {
+    color: #1890ff; /* 链接颜色 */
+    text-decoration: none; /* 去除下划线 */
+    white-space: nowrap; /* 禁止换行 */
+    cursor: pointer; /* 手型光标 */
+  }
+
+  .clear-link:hover {
+    color: #40a9ff; /* 悬停颜色 */
+    text-decoration: underline; /* 悬停下划线 */
+  }
+</style>
diff --git a/src/components/jeecg/JTabsSelectUser/component/PostRankRelation.vue b/src/components/jeecg/JTabsSelectUser/component/PostRankRelation.vue
new file mode 100644
index 0000000..9d4df3a
--- /dev/null
+++ b/src/components/jeecg/JTabsSelectUser/component/PostRankRelation.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-spin :spinning="loading">
+    <template v-if="treeData && treeData.length > 0">
+      <BasicTree
+        :expandedKeys="expandedKeys"
+        :fieldNames="{ children: 'children', title: 'title', key: 'value' }"
+        ref="basicTree"
+        :treeData="treeData"
+        :checkStrictly="true"
+        @select="onSelectDepart"
+        style="height: calc(100vh - 390px); min-height: 150px; overflow: auto"
+      ></BasicTree>
+    </template>
+    <a-empty v-else description="无岗位信息" />
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watchEffect } from 'vue';
+  import { BasicTree } from '/@/components/Tree/index';
+
+  const props = defineProps({
+    treeData: { type: Array, default: () => ([]) },
+  });
+  const emit = defineEmits(['select']);
+  const basicTree = ref();
+  const loading = ref<boolean>(false);
+  //选中的key
+  const expandedKeys = ref<any[]>([]);
+  //所有的部门id
+  const departIds = ref<any[]>([]);
+  /**
+   * 折叠全部
+   *
+   * @param expandAll
+   */
+  async function expandAll(expandAll) {
+    if (!expandAll) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = departIds.value;
+    }
+  }
+
+  watchEffect(() => {
+    props.treeData && (departIds.value = getParentDepartmentIds(props.treeData));
+  });
+
+  /**
+   * 
+   * @param data
+   * @param node
+   */
+  function onSelectDepart(data, { node }) {
+    emit('select', data);
+  }
+  /**
+   * 获取存在子级的部门id
+   * @param departments
+   */
+  function getParentDepartmentIds(departments) {
+    const ids: any = [];
+    departments.forEach((dept) => {
+      // 检查是否有 children 数组且不为空
+      if (dept.children && Array.isArray(dept.children) && dept.children.length > 0) {
+        ids.push(dept.id);
+        // 递归检查子部门是否也有子级
+        ids.push(...getParentDepartmentIds(dept.children));
+      }
+    });
+    return ids;
+  }
+</script>
+
+<style lang="less" scoped>
+  .depart-rule-tree :deep(.scrollbar__bar) {
+    pointer-events: none;
+  }
+</style>
diff --git a/src/components/jeecg/JTabsSelectUser/index.vue b/src/components/jeecg/JTabsSelectUser/index.vue
new file mode 100644
index 0000000..b55123a
--- /dev/null
+++ b/src/components/jeecg/JTabsSelectUser/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="tabsSelectUser" v-bind="$attrs">
+    <JSelectBiz @handleOpen="openSelect" allowClear :placeholder="placeholder" :loading="loadingEcho" v-bind="attrs" @change="handleSelectChange"></JSelectBiz>
+  </div>
+  <teleport to="body">
+    <select-user-modal @register="registerModal" :rowKey="rowKey" @selected="onSelected" />
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+  /**
+   * 选择用户组件 - 多标签切换选择用户
+   */
+  import { provide, reactive, ref, watch } from 'vue';
+  import SelectUserModal from './SelectUserModal.vue';
+  import { useModal } from '/src/components/Modal';
+  import JSelectBiz from '@/components/Form/src/jeecg/components/base/JSelectBiz.vue';
+  import { propTypes } from '@/utils/propTypes';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { isArray, isString, isObject } from '/@/utils/is';
+  import { getTableList as getTableListOrigin } from '/@/api/common/api';
+
+  defineOptions({ name: 'JTabsSelectUser' });
+  //定义props
+  const props = defineProps({
+    placeholder:{
+      type: String,
+      default: '选择人员',
+    },
+    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    rowKey: {
+      type: String,
+      default: 'username',
+    },
+    labelKey: {
+      type: String,
+      default: 'realname',
+    },
+  });
+  //定义emit
+  const emit = defineEmits(['options-change', 'change', 'update:value']);
+  const attrs: any = useAttrs();
+  const [registerModal, { openModal }] = useModal();
+  //下拉框选项值
+  const selectOptions: any = ref<SelectValue>([]);
+  //下拉框选中值
+  let selectValues: any = reactive<object>({
+    value: [],
+    change: false,
+  });
+  // 是否正在加载回显数据
+  const loadingEcho = ref<boolean>(false);
+  //下发 selectOptions,xxxBiz组件接收
+  provide('selectOptions', selectOptions);
+  //下发 selectValues,xxxBiz组件接收
+  provide('selectValues', selectValues);
+  //下发 loadingEcho,xxxBiz组件接收
+  provide('loadingEcho', loadingEcho);
+
+  function openSelect() {
+    let arr = getModalData();
+    openModal(true, {
+      selected: arr,
+    });
+  }
+
+  function getModalData() {
+    //找rows
+    let arr = selectOptions.value;
+    //找username
+    let arr2 = selectValues.value;
+    let dataArray = arr.filter((item) => arr2.indexOf(item[props.rowKey]) >= 0);
+    return dataArray;
+  }
+
+  function onSelected(data) {
+    selectOptions.value = data.map((item) => {
+      return {
+        ...item,
+        label: item[props.labelKey],
+        value: item[props.rowKey],
+      };
+    });
+    selectValues.value = data.map((item) => item[props.rowKey]);
+    // 更新value
+    emit('update:value', selectValues.value);
+    // 触发change事件（不转是因为basicForm提交时会自动将字符串转化为数组）
+    emit('change', selectValues.value,selectOptions.value);
+  }
+
+  const handleSelectChange = (data) => {
+    selectOptions.value = selectOptions.value.filter((item) => data.includes(item[props.rowKey]));
+    setValue(selectOptions.value);
+  };
+  // 设置下拉框的值
+  const setValue = (data) => {
+    selectOptions.value = data.map((item) => {
+      return {
+        ...item,
+        label: item[props.labelKey],
+        value: item[props.rowKey],
+      };
+    });
+    selectValues.value = data.map((item) => item[props.rowKey]);
+    // 更新value
+    emit('update:value', selectValues.value);
+    // 触发change事件（不转是因为basicForm提交时会自动将字符串转化为数组）
+    emit('change', selectValues.value,selectOptions.value);
+  };
+  // 翻译
+  const transform = () => {
+    let value = props.value;
+    let len;
+    if (isArray(value) || isString(value)) {
+      if (isArray(value)) {
+        len = value.length;
+        value = value.join(',');
+      } else {
+        len = value.split(',').length;
+      }
+      value = value.trim();
+      if (value) {
+        // 如果value的值在selectedUser中存在，则不请求翻译
+        let isNotRequestTransform = false;
+        isNotRequestTransform = value.split(',').every((value) => !!selectOptions.value.find((item) => item[props.rowKey] === value));
+        if (isNotRequestTransform) {
+          selectValues.value = value.split(',');
+          return;
+        }
+        const params = { isMultiTranslate: true, pageSize: len, [props.rowKey]: value };
+        if (isObject(attrs.params)) {
+          Object.assign(params, attrs.params);
+        }
+        console.log('JTabsSelectUser params', params);
+        getTableListOrigin(params).then((result: any) => {
+          const records = result.records ?? [];
+          selectValues.value = records.map((item) => item[props.rowKey]);
+          selectOptions.value = records.map((item) => {
+            return {
+              ...item,
+              label: item[props.labelKey],
+              value: item[props.rowKey],
+            };
+          });
+        });
+      }
+    } else {
+      selectValues.value = [];
+    }
+  };
+  // 监听value变化
+  watch(
+    () => props.value,
+    () => {
+      transform();
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  // update-begin--author:liaozhiyang---date:20240605---for：【TV360X-1050】Safari浏览器指定下一步处理人页面控件没对齐
+  .ant-select {
+    vertical-align: middle;
+  }
+  // update-end--author:liaozhiyang---date:20240605---for：【TV360X-1050】Safari浏览器指定下一步处理人页面控件没对齐
+
+  // 自定义按钮样式
+  .custom-btn {
+    height: 28px !important;
+    padding: 0 12px !important;
+    font-size: 13px !important;
+  }
+</style>
diff --git a/src/components/jeecg/JTabsSelectUser/useSelectUser.ts b/src/components/jeecg/JTabsSelectUser/useSelectUser.ts
new file mode 100644
index 0000000..05d6d75
--- /dev/null
+++ b/src/components/jeecg/JTabsSelectUser/useSelectUser.ts
@@ -0,0 +1,101 @@
+import { defHttp } from '/@/utils/http/axios';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export enum Api {
+  departList = '/sys/sysDepart/queryDepartTreeSync',
+  userList = '/sys/user/list',
+  departUserList = '/sys/user/queryUserByDepId',
+
+  //获取所有岗位职级信息
+  queryALLRankRelation = '/sys/sysDepart/getALLRankRelation',
+  //根据关键字搜索部门
+  searchBy = '/sys/sysDepart/searchBy'
+}
+
+/**
+ * 获取部门树列表
+ */
+export const getDepartTreeData = (params?) => defHttp.get({ url: Api.departList, params });
+
+/**
+ * 获取用户列表
+ */
+export const getUserList = (params?) => defHttp.get({ url: Api.userList, params });
+
+/**
+ * 获取指定部门用户列表
+ */
+export const getDepartUserList = (params?) => defHttp.get({ url: Api.departUserList, params });
+/**
+ * 获取职级信息
+ */
+export const queryALLRankRelation = (params?) => defHttp.get({ url: Api.queryALLRankRelation, params,timeout: 2 * 60 * 1000 });
+
+/**
+ * 根据关键字搜索部门
+ */
+export const searchByKeywords = (params) => defHttp.get({ url: Api.searchBy, params });
+/**
+ * 用户列表
+ */
+export const columns: BasicColumn[] = [
+  // {
+  //   title: '用户账号',
+  //   align: 'center',
+  //   dataIndex: 'username',
+  //   ellipsis: true,
+  //   width: 130,
+  // },
+  {
+    title: '用户姓名',
+    align: 'center',
+    width: 150,
+    dataIndex: 'realname',
+    ellipsis: true,
+  },
+  {
+    title: '部门',
+    align: 'center',
+    width: 150,
+    dataIndex: 'orgCodeTxt',
+  },
+];
+
+/**
+ * 选中用户列表
+ */
+export const selectedUserColumns: BasicColumn[] = [
+  {
+    title: '用户姓名',
+    align: 'center',
+    width: 150,
+    dataIndex: 'realname',
+    ellipsis: true,
+  },
+];
+
+/**
+ * 查询条件
+ */
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '用户姓名',
+    field: 'realname',
+    component: 'Input',
+    componentProps: {
+      style: {
+        width: '150px',
+      },
+    },
+  },
+  // {
+  //   label: '用户账号',
+  //   field: 'username',
+  //   component: 'JInput',
+  //   componentProps: {
+  //     style: {
+  //       width: '150px',
+  //     },
+  //   },
+  // },
+];
diff --git a/src/components/jeecg/JVxeTable/hooks.ts b/src/components/jeecg/JVxeTable/hooks.ts
new file mode 100644
index 0000000..54c46fa
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/hooks.ts
@@ -0,0 +1,2 @@
+export { useJVxeCompProps, useJVxeComponent } from './src/hooks/useJVxeComponent';
+export { useResolveComponent } from './src/hooks/useData';
diff --git a/src/components/jeecg/JVxeTable/index.ts b/src/components/jeecg/JVxeTable/index.ts
new file mode 100644
index 0000000..2d8ce0a
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/index.ts
@@ -0,0 +1,21 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+// update-begin--author:liaozhiyang---date:20260318---for:【QQYUN-14948】需要兼容vxetable引入到了页面也不报错
+// 兼容页面直接引入：通过异步组件包装，确保 vxe-table 注册后再渲染，避免页面卡死
+export const JVxeTable = createAsyncComponent(
+  async () => {
+    const app = window['JAppRootInstance'];
+    if (app && !app._context.components['VxeTable']) {
+      const { registerJVxeTable } = await import('./src/install');
+      await registerJVxeTable(app);
+      const { registerJVxeCustom } = await import('/@/components/JVxeCustom');
+      await registerJVxeCustom();
+    }
+    const m = await import('./src/JVxeTable');
+    return m.default;
+  },
+  { loading: true }
+);
+// update-end--author:liaozhiyang---date:20260318---for:【QQYUN-14948】需要兼容vxetable引入到了页面也不报错
+export { registerJVxeTable } from './src/install';
+export { deleteComponent } from './src/componentMap';
+export { registerComponent, registerAsyncComponent, registerASyncComponentReal } from './src/utils/registerUtils';
diff --git a/src/components/jeecg/JVxeTable/src/JVxeTable.ts b/src/components/jeecg/JVxeTable/src/JVxeTable.ts
new file mode 100644
index 0000000..6a7bd86
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/JVxeTable.ts
@@ -0,0 +1,92 @@
+import { defineComponent, h, ref, useSlots, computed, resolveComponent } from 'vue';
+import { vxeEmits, vxeProps } from './vxe.data';
+import { useData, useRefs } from './hooks/useData';
+import { useColumns } from './hooks/useColumns';
+import { useColumnsCache } from './hooks/useColumnsCache';
+import { useMethods } from './hooks/useMethods';
+import { useDataSource } from './hooks/useDataSource';
+import { useDragSort } from './hooks/useDragSort';
+import { useRenderComponents } from './hooks/useRenderComponents';
+import { useFinallyProps } from './hooks/useFinallyProps';
+import { JVxeTableProps } from './types';
+import { Spin } from 'ant-design-vue';
+import './style/index.less';
+
+export default defineComponent({
+  name: 'JVxeTable',
+  inheritAttrs: false,
+  props: vxeProps(),
+  emits: [...vxeEmits],
+  setup(props: JVxeTableProps, context) {
+    const instanceRef = ref();
+    const refs = useRefs();
+    const slots = useSlots();
+    const data = useData(props);
+    const { methods, publicMethods, created } = useMethods(props, context, data, refs, instanceRef);
+    created();
+    useColumns(props, data, methods, slots);
+    useDataSource(props, data, methods, refs);
+    useDragSort(props, methods);
+    // 代码逻辑说明: 【QQYUN-8566】JVXETable无法记住列设置
+    const { initSetting } = useColumnsCache({ cacheColumnsKey: props.cacheColumnsKey });
+    initSetting(props);
+    // 最终传入到 template 里的 props
+    const finallyProps = useFinallyProps(props, data, methods);
+    // 渲染子组件
+    const renderComponents = useRenderComponents(props, data, methods, slots);
+    // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    // 在 setup 阶段缓存组件引用，避免每次 render 调用 resolveComponent 查找
+    const aSpinComp = Spin;
+    const vxeGridComp = resolveComponent('vxe-grid');
+    // 将 vxeProps 和 data 合并为一个 computed，避免 render 每次 spread 生成新对象
+    const vxeGridProps = computed(() => ({
+      ...finallyProps.vxeProps.value,
+      data: data.vxeDataSource.value,
+    }));
+    // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    return {
+      instanceRef,
+      ...refs,
+      ...publicMethods,
+      ...finallyProps,
+      ...renderComponents,
+      vxeDataSource: data.vxeDataSource,
+      aSpinComp,
+      vxeGridComp,
+      vxeGridProps,
+    };
+  },
+  render() {
+    return h(
+      'div',
+      {
+        class: this.$attrs.class,
+        style: this.$attrs.style,
+      },
+      h(
+        this.aSpinComp,
+        {
+          spinning: this.loading,
+          wrapperClassName: this.prefixCls,
+        },
+        {
+          default: () => [
+            this.renderSubPopover(),
+            this.renderToolbar(),
+            this.renderToolbarAfterSlot(),
+            h(
+              this.vxeGridComp,
+              this.vxeGridProps,
+              this.$slots
+            ),
+            this.renderPagination(),
+            this.renderDetailsModal(),
+          ],
+        }
+      )
+    );
+  },
+  created() {
+    this.instanceRef = this;
+  },
+});
diff --git a/src/components/jeecg/JVxeTable/src/componentMap.ts b/src/components/jeecg/JVxeTable/src/componentMap.ts
new file mode 100644
index 0000000..19c2a91
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/componentMap.ts
@@ -0,0 +1,97 @@
+import type { JVxeVueComponent } from './types';
+import { JVxeTypes } from './types/JVxeTypes';
+import { componentMap } from './componentMapStore';
+
+import JVxeSlotCell from './components/cells/JVxeSlotCell';
+import JVxeNormalCell from './components/cells/JVxeNormalCell.vue';
+import JVxeDragSortCell from './components/cells/JVxeDragSortCell.vue';
+
+import JVxeInputCell from './components/cells/JVxeInputCell.vue';
+import JVxeDateCell from './components/cells/JVxeDateCell.vue';
+import JVxeTimeCell from './components/cells/JVxeTimeCell.vue';
+import JVxeSelectCell from './components/cells/JVxeSelectCell.vue';
+import JVxeRadioCell from './components/cells/JVxeRadioCell.vue';
+import JVxeCheckboxCell from './components/cells/JVxeCheckboxCell.vue';
+import JVxeUploadCell from './components/cells/JVxeUploadCell.vue';
+// import { TagsInputCell, TagsSpanCell } from './components/cells/JVxeTagsCell.vue'
+import JVxeProgressCell from './components/cells/JVxeProgressCell.vue';
+import JVxeTextareaCell from './components/cells/JVxeTextareaCell.vue';
+// import JVxeDepartSelectCell from './components/cells/JVxeDepartSelectCell.vue'
+// import JVxeUserSelectCell from './components/cells/JVxeUserSelectCell.vue'
+import JVxeTreeSelectCell from './components/cells/JVxeTreeSelectCell.vue';
+import JVxeCategorySelectCell from './components/cells/JVxeCategorySelectCell.vue';
+
+// 代码逻辑说明: 【issues/860】生成的一对多代码，热更新之后点击新增卡死[暂时先解决]
+const JVxeComponents = 'JVxeComponents__';
+/** span 组件结尾 */
+export const spanEnds: string = ':span';
+
+/** 定义不能用于注册的关键字 */
+export const excludeKeywords: Array<JVxeTypes> = [
+  JVxeTypes.hidden,
+  JVxeTypes.rowNumber,
+  JVxeTypes.rowCheckbox,
+  JVxeTypes.rowRadio,
+  JVxeTypes.rowExpand,
+];
+
+/**
+ * 注册组件
+ *
+ * @param type 组件 type
+ * @param component Vue组件
+ * @param spanComponent 显示组件，可空，默认为 JVxeNormalCell 组件
+ */
+export function addComponent(type: JVxeTypes, component: JVxeVueComponent, spanComponent?: JVxeVueComponent) {
+  if (excludeKeywords.includes(type)) {
+    throw new Error(`【addComponent】不能使用"${type}"作为组件的name，因为这是关键字。`);
+  }
+  if (componentMap.has(type)) {
+    throw new Error(`【addComponent】组件"${type}"已存在`);
+  }
+  componentMap.set(type, component);
+  if (spanComponent) {
+    componentMap.set(type + spanEnds, spanComponent);
+  }
+  // 代码逻辑说明: 【issues/860】生成的一对多代码，热更新之后点击新增卡死[暂时先解决]
+  import.meta.env.DEV && (window[JVxeComponents] = componentMap);
+}
+
+export function deleteComponent(type: JVxeTypes) {
+  componentMap.delete(type);
+  componentMap.delete(type + spanEnds);
+  // 代码逻辑说明: 【issues/860】生成的一对多代码，热更新之后点击新增卡死[暂时先解决]
+  import.meta.env.DEV && (window[JVxeComponents] = componentMap);
+}
+
+/** 定义内置自定义组件 */
+export function definedComponent() {
+  addComponent(JVxeTypes.slot, JVxeSlotCell);
+  addComponent(JVxeTypes.normal, JVxeNormalCell);
+  addComponent(JVxeTypes.rowDragSort, JVxeDragSortCell);
+
+  addComponent(JVxeTypes.input, JVxeInputCell);
+  addComponent(JVxeTypes.inputNumber, JVxeInputCell);
+  addComponent(JVxeTypes.radio, JVxeRadioCell);
+  addComponent(JVxeTypes.checkbox, JVxeCheckboxCell);
+  addComponent(JVxeTypes.select, JVxeSelectCell);
+  addComponent(JVxeTypes.selectSearch, JVxeSelectCell); // 下拉搜索
+  addComponent(JVxeTypes.selectMultiple, JVxeSelectCell); // 下拉多选
+  addComponent(JVxeTypes.date, JVxeDateCell);
+  addComponent(JVxeTypes.datetime, JVxeDateCell);
+  addComponent(JVxeTypes.time, JVxeTimeCell);
+  addComponent(JVxeTypes.upload, JVxeUploadCell);
+  addComponent(JVxeTypes.textarea, JVxeTextareaCell);
+
+  // addComponent(JVxeTypes.tags, TagsInputCell, TagsSpanCell)
+  addComponent(JVxeTypes.progress, JVxeProgressCell);
+
+  // addComponent(JVxeTypes.departSelect, JVxeDepartSelectCell)
+  // addComponent(JVxeTypes.userSelect, JVxeUserSelectCell)
+  // update-begin--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+  addComponent(JVxeTypes.treeSelect, JVxeTreeSelectCell);
+  addComponent(JVxeTypes.catTreeSelect, JVxeCategorySelectCell);
+  // update-end--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+}
+
+export { componentMap, clearComponent } from './componentMapStore';
diff --git a/src/components/jeecg/JVxeTable/src/componentMapStore.ts b/src/components/jeecg/JVxeTable/src/componentMapStore.ts
new file mode 100644
index 0000000..88f92b0
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/componentMapStore.ts
@@ -0,0 +1,20 @@
+import type { JVxeVueComponent } from './types';
+import { JVxeTypes } from './types/JVxeTypes';
+
+/** 仅存 componentMap 与 clearComponent，供 qiankun unmount 等场景使用，不引用任何 Cell 组件 */
+let componentMap = new Map<JVxeTypes | string, JVxeVueComponent>();
+const JVxeComponents = 'JVxeComponents__';
+if (import.meta.env.DEV && componentMap.size === 0 && window[JVxeComponents] && window[JVxeComponents].size > 0) {
+  componentMap = window[JVxeComponents];
+}
+
+export { componentMap };
+
+/**
+ * 清空注册的组件（乾坤子应用 unmount 时调用，仅引用本文件避免加载所有 Cell）
+ */
+export function clearComponent() {
+  componentMap.clear();
+  // 代码逻辑说明: 【issues/860】生成的一对多代码，热更新之后点击新增卡死[暂时先解决]
+  import.meta.env.DEV && (window[JVxeComponents] = componentMap);
+}
diff --git a/src/components/jeecg/JVxeTable/src/components/JVxeDetailsModal.vue b/src/components/jeecg/JVxeTable/src/components/JVxeDetailsModal.vue
new file mode 100644
index 0000000..48d63d0
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/JVxeDetailsModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <BasicModal @register="registerModel" title="详细信息" :width="1200" :keyboard="true" @ok="handleOk" @cancel="close">
+    <transition name="fade">
+      <div v-if="getVisible">
+        <slot name="mainForm" :row="row" :column="column" />
+      </div>
+    </transition>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  import { useModal } from '/@/components/Modal/src/hooks/useModal';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  export default defineComponent({
+    components: {
+      BasicModal: createAsyncComponent(() => import('/@/components/Modal/src/BasicModal.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      trigger: {
+        type: Function,
+        required: true,
+      },
+    },
+    setup(props) {
+      const row = ref(null);
+      const column = ref(null);
+
+      const [registerModel, { openModal, closeModal, getVisible }] = useModal();
+
+      function open(event) {
+        let { row: $row, column: $column } = event;
+        row.value = cloneDeep($row);
+        column.value = $column;
+        openModal();
+      }
+
+      function close() {
+        closeModal();
+      }
+
+      function handleOk() {
+        props.trigger('detailsConfirm', {
+          row: row.value,
+          column: column.value,
+          callback: (success) => {
+            success ? closeModal() : openModal();
+          },
+        });
+      }
+
+      return {
+        getVisible,
+        row,
+        column,
+        open,
+        close,
+        handleOk,
+        registerModel,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  .fade-enter-active,
+  .fade-leave-active {
+    opacity: 1;
+    transition: opacity 0.5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/JVxeReloadEffect.ts b/src/components/jeecg/JVxeTable/src/components/JVxeReloadEffect.ts
new file mode 100644
index 0000000..9f792c1
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/JVxeReloadEffect.ts
@@ -0,0 +1,92 @@
+import { defineComponent, h, ref, watch } from 'vue';
+import { randomString } from '/@/utils/common/compUtils';
+import '../style/reload-effect.less';
+
+// 修改数据特效
+export default defineComponent({
+  props: {
+    vNode: null,
+    // 是否启用特效
+    effect: Boolean,
+  },
+  emits: ['effectBegin', 'effectEnd'],
+  setup(props, { emit }) {
+    // vNode: null,
+    const innerEffect = ref(props.effect);
+    // 应付同时多个特效
+    const effectIdx = ref(0);
+    const effectList = ref<any[]>([]);
+
+    watch(
+      () => props.effect,
+      () => (innerEffect.value = props.effect)
+    );
+    watch(
+      () => props.vNode,
+      (_vNode, old) => {
+        if (props.effect && old != null) {
+          let topLayer = renderSpan(old, 'top');
+          effectList.value.push(topLayer);
+        }
+      },
+      { immediate: true }
+    );
+
+    // 条件渲染内容 span
+    function renderVNode() {
+      if (props.vNode == null) {
+        return null;
+      }
+      let bottom = renderSpan(props.vNode, 'bottom');
+      // 启用了特效，并且有旧数据，就渲染特效顶层
+      if (innerEffect.value && effectList.value.length > 0) {
+        emit('effectBegin');
+        // 1.4s 以后关闭特效
+        window.setTimeout(() => {
+          let item = effectList.value[effectIdx.value];
+          if (item && item.elm) {
+            // 特效结束后，展示先把 display 设为 none，而不是直接删掉该元素，
+            // 目的是为了防止页面重新渲染，导致动画重置
+            item.elm.style.display = 'none';
+          }
+          // 当所有的层级动画都结束时，再删掉所有元素
+          if (++effectIdx.value === effectList.value.length) {
+            innerEffect.value = false;
+            effectIdx.value = 0;
+            effectList.value = [];
+            emit('effectEnd');
+          }
+        }, 1400);
+        return [effectList.value, bottom];
+      } else {
+        return bottom;
+      }
+    }
+
+    // 渲染内容 span
+    function renderSpan(vNode, layer) {
+      let options = {
+        key: layer + effectIdx.value + randomString(6),
+        class: ['j-vxe-reload-effect-span', `layer-${layer}`],
+        style: {},
+        // 代码逻辑说明: 【issues/1175】解决vxetable鼠标hover之后title显示不对的问题
+        title: vNode,
+
+      };
+      if (layer === 'top') {
+        // 最新渲染的在下面
+        options.style['z-index'] = 9999 - effectIdx.value;
+      }
+      return h('span', options, [vNode]);
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: ['j-vxe-reload-effect-box'],
+        },
+        [renderVNode()]
+      );
+  },
+});
diff --git a/src/components/jeecg/JVxeTable/src/components/JVxeSubPopover.vue b/src/components/jeecg/JVxeTable/src/components/JVxeSubPopover.vue
new file mode 100644
index 0000000..497dca2
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/JVxeSubPopover.vue
@@ -0,0 +1,207 @@
+<template>
+  <a-popover :open="visible" :placement="placement" overlayClassName="j-vxe-popover-overlay" :overlayStyle="overlayStyle">
+    <template #title>
+      <div class="j-vxe-popover-title">
+        <div>子表</div>
+        <div class="j-vxe-popover-title-close" @click="close">
+          <a-icon type="close" />
+        </div>
+      </div>
+    </template>
+
+    <template #content>
+      <transition name="fade">
+        <slot v-if="visible" name="subForm" :row="row" :column="column" />
+      </transition>
+    </template>
+
+    <div ref="divRef" class="j-vxe-popover-div"></div>
+  </a-popover>
+</template>
+<script lang="ts">
+  import { ref, reactive, nextTick, defineComponent } from 'vue';
+  import domAlign from 'dom-align';
+  import { getParentNodeByTagName } from '../utils/vxeUtils';
+  import { triggerWindowResizeEvent } from '/@/utils/common/compUtils';
+  import { cloneDeep } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isString } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeSubPopover',
+    setup() {
+      const visible = ref(false);
+      const row = ref<any>(null);
+      const column = ref<any>(null);
+      const overlayStyle = reactive<{
+        width?: number | string;
+        maxWidth?: number | string;
+        zIndex: number;
+      }>({
+        zIndex: 100,
+      });
+      const placement = ref('bottom');
+      const divRef = ref<HTMLElement>();
+      const { createMessage } = useMessage();
+
+      function toggle(event) {
+        if (document.body.clientHeight - event.$event.clientY > 350) {
+          placement.value = 'bottom';
+        } else {
+          placement.value = 'top';
+        }
+        if (row.value == null) {
+          open(event);
+        } else {
+          row.value.id === event.row.id ? close() : reopen(event);
+        }
+      }
+
+      function open(event, level = 0) {
+        if (level > 3) {
+          createMessage.error('打开子表失败');
+          console.warn('【JVxeSubPopover】打开子表失败');
+          return;
+        }
+
+        let {
+          row: $row,
+          column: $column,
+          $table,
+          $event: { target },
+        } = event;
+        row.value = cloneDeep($row);
+        column.value = $column;
+
+        let className = target.className || '';
+        className = isString(className) ? className : className.toString();
+
+        // 获取 td 父级
+        let td = getParentNodeByTagName(target, 'td');
+        // 点击的是拖拽排序列，不做处理
+        if (td && td.querySelector('.j-vxe-drag-box')) {
+          return;
+        }
+        // 点击的是expand，不做处理
+        if (className.includes('vxe-table--expand-btn')) {
+          return;
+        }
+        // 点击的是checkbox，不做处理
+        if (className.includes('vxe-checkbox--icon') || className.includes('vxe-cell--checkbox')) {
+          return;
+        }
+        // 点击的是radio，不做处理
+        if (className.includes('vxe-radio--icon') || className.includes('vxe-cell--radio')) {
+          return;
+        }
+        let parentElem = $table.getParentElem();
+        let tr = getParentNodeByTagName(target, 'tr');
+        if (parentElem && tr) {
+          let clientWidth = parentElem.clientWidth;
+          let clientHeight = tr.clientHeight;
+          divRef.value!.style.width = clientWidth + 'px';
+          divRef.value!.style.height = clientHeight + 'px';
+          overlayStyle.width = Number.parseInt(`${clientWidth - clientWidth * 0.04}`) + 'px';
+          overlayStyle.maxWidth = overlayStyle.width;
+          //let realTable = getParentNodeByTagName(tr, 'table')
+          //let left = realTable.parentNode.scrollLeft
+          let h = event.$event.clientY;
+          if (h) {
+            h = h - 140;
+          }
+          let toolbar = divRef.value!.nextElementSibling;
+          domAlign(divRef.value, toolbar, {
+            points: ['tl', 'tl'],
+            offset: [0, h],
+            overflow: {
+              alwaysByViewport: true,
+            },
+          });
+          nextTick(() => {
+            visible.value = true;
+            nextTick(() => {
+              triggerWindowResizeEvent();
+            });
+          });
+        } else {
+          let num = ++level;
+          console.warn('【JVxeSubPopover】table or tr 获取失败，正在进行第 ' + num + '次重试', {
+            event,
+            table: parentElem,
+            tr,
+          });
+          window.setTimeout(() => open(event, num), 100);
+        }
+      }
+
+      function close() {
+        if (visible.value) {
+          row.value = null;
+          visible.value = false;
+        }
+      }
+
+      function reopen(event) {
+        open(event);
+      }
+
+      return {
+        divRef,
+        row,
+        column,
+        visible,
+        placement,
+        overlayStyle,
+        close,
+        toggle,
+      };
+    },
+  });
+</script>
+<style scoped lang="less">
+  .j-vxe-popover-title {
+    .j-vxe-popover-title-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 31px;
+      height: 31px;
+      text-align: center;
+      line-height: 31px;
+      color: rgba(0, 0, 0, 0.45);
+      cursor: pointer;
+      transition: color 300ms;
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.8);
+      }
+    }
+  }
+
+  .j-vxe-popover-div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 31px;
+    z-index: -1;
+  }
+</style>
+<style lang="less">
+  .j-vxe-popover-overlay.ant-popover {
+    .ant-popover-title {
+      position: relative;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    opacity: 1;
+    transition: opacity 0.5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/JVxeToolbar.vue b/src/components/jeecg/JVxeTable/src/components/JVxeToolbar.vue
new file mode 100644
index 0000000..9c3241b
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/JVxeToolbar.vue
@@ -0,0 +1,144 @@
+<template>
+  <div :class="boxClass">
+    <vxe-toolbar ref="xToolbarRef" :custom="custom">
+      <!-- 工具按钮 -->
+      <template #buttons>
+        <div :class="`${prefixCls}-button div`" :size="btnSize">
+          <slot v-if="showPrefix" name="toolbarPrefix" :size="btnSize" />
+          <a-button v-if="addBtnCfg.enabled && showAdd" type="primary" :preIcon="addBtnCfg.buttonIcon" :disabled="disabled" :loading="deleting" @click="trigger('add')">
+            <span>{{ addBtnCfg.buttonName }}</span>
+          </a-button>
+          <a-button v-if="showSave" preIcon="ant-design:save-outlined" :disabled="disabled" @click="trigger('save')">
+            <span>保存</span>
+          </a-button>
+          <template v-if="deleting || selectedRowIds.length > 0">
+            <Popconfirm v-if="removeBtnCfg.enabled && showRemove" :title="`确定要删除这 ${selectedRowIds.length} 项吗?`" :disabled="deleting" @confirm="onRemove">
+              <a-button :preIcon="removeBtnCfg.buttonIcon" :disabled="disabled" :loading="deleting">
+                <span>{{ removeBtnCfg.buttonName }}</span>
+              </a-button>
+            </Popconfirm>
+            <template v-if="showClearSelection">
+              <a-button preIcon="ant-design:delete-outlined" @click="trigger('clearSelection')">清空选择</a-button>
+            </template>
+          </template>
+          <slot v-if="showSuffix" name="toolbarSuffix" :size="btnSize" />
+          <a v-if="showCollapse" style="margin-left: 4px" @click="toggleCollapse">
+            <span>{{ collapsed ? '展开' : '收起' }}</span>
+            <Icon :icon="collapsed ? 'ant-design:down-outlined' : 'ant-design:up-outlined'" />
+          </a>
+        </div>
+      </template>
+    </vxe-toolbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, inject, ref, onMounted } from 'vue';
+  // noinspection ES6UnusedImports
+  import { Popconfirm } from 'ant-design-vue';
+  import { VxeToolbarInstance } from 'vxe-table';
+  import { Icon } from '/@/components/Icon';
+  import { propTypes } from '/@/utils/propTypes';
+
+  const props = defineProps({
+    size: propTypes.string,
+    disabled: propTypes.bool.def(false),
+    custom: propTypes.bool.def(false),
+    toolbarConfig: propTypes.object,
+    disabledRows: propTypes.object,
+    hasBtnAuth: propTypes.func,
+    selectedRowIds: propTypes.array.def(() => []),
+    addBtnCfg: propTypes.object.def(() => ({
+      enabled: true,
+      buttonIcon: 'ant-design:plus-outlined',
+      buttonName: '新增',
+    })),
+    removeBtnCfg: propTypes.object.def(() => ({
+      enabled: true,
+      buttonIcon: 'ant-design:minus-outlined',
+      buttonName: '删除',
+    })),
+  });
+  const emit = defineEmits(['save', 'add', 'remove', 'clearSelection', 'register']);
+  const xToolbarRef = ref({} as VxeToolbarInstance);
+  const prefixCls = `${inject('prefixCls')}-toolbar`;
+  const boxClass = computed(() => [
+    prefixCls,
+    {
+      [`${prefixCls}-collapsed`]: collapsed.value,
+    },
+  ]);
+  // 是否收起
+  const collapsed = ref(true);
+  // 配置的按钮
+  const btns = computed(() => {
+    let { btn, btns } = props.toolbarConfig || {};
+    btns = btn || btns || ['add', 'remove', 'clearSelection'];
+    // 排除掉没有授权的按钮
+    return btns.filter((btn) => {
+      // 系统默认的批量删除编码配置为 batch_delete 此处需要兼容一下
+      if (btn === 'remove') {
+        // 代码逻辑说明: VUEN-1162 子表按钮没控制
+        return hasBtnAuth(btn) && hasBtnAuth('batch_delete');
+      }
+      return hasBtnAuth(btn);
+    });
+  });
+  const showAdd = computed(() => btns.value.includes('add'));
+  const showSave = computed(() => btns.value.includes('save'));
+  const showRemove = computed(() => btns.value.includes('remove'));
+  // 配置的插槽
+  const slots = computed(() => props.toolbarConfig?.slot || ['prefix', 'suffix']);
+  const showPrefix = computed(() => slots.value.includes('prefix'));
+  const showSuffix = computed(() => slots.value.includes('suffix'));
+  // 是否显示清除选择按钮
+  const showClearSelection = computed(() => {
+    if (btns.value.includes('clearSelection')) {
+      // 有禁用行时才显示清空选择按钮
+      // 因为禁用行会阻止选择行，导致无法取消全选
+      // return Object.keys(props.disabledRows).length > 0
+    }
+    return false;
+  });
+  // 是否显示展开收起按钮
+  const showCollapse = computed(() => btns.value.includes('collapse'));
+  // 按钮 size
+  const btnSize = computed(() => (props.size === 'tiny' ? 'small' : null));
+
+  onMounted(() => {
+    // 注册 vxe-toolbar
+    emit('register', {
+      xToolbarRef,
+    });
+  });
+
+  // 判断按钮是否已授权
+  function hasBtnAuth(key: string) {
+    return props.hasBtnAuth ? props.hasBtnAuth(key) : true;
+  }
+
+  /** 触发事件 */
+  function trigger(name) {
+    emit(name);
+  }
+
+  // 切换展开收起
+  function toggleCollapse() {
+    collapsed.value = !collapsed.value;
+  }
+
+  // 【TV360X-1975】在Online设计中，当字段多时，由于会同步删除其他表格导致删除时间变长，所以增加删除loading，防止以为点击删除按钮无效
+  const deleting = ref(false);
+
+  let deleteTimer: any = null
+
+  function onRemove() {
+    trigger('remove')
+    deleting.value = true;
+    if (deleteTimer) {
+      clearTimeout(deleteTimer)
+    }
+    deleteTimer = setTimeout(() => deleting.value = false, 300);
+  }
+
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeCategorySelectCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeCategorySelectCell.vue
new file mode 100644
index 0000000..f26f6d9
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeCategorySelectCell.vue
@@ -0,0 +1,190 @@
+<template>
+  <a-tree-select
+    allow-clear
+    label-in-value
+    show-checked-strategy="SHOW_ALL"
+    style="width: 100%"
+    :get-popup-container="(node) => node?.parentNode"
+    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="cellAttrs.placeholder || '请选择'"
+    :disabled="cellAttrs.disabled"
+    :multiple="isMultiple"
+    :load-data="asyncLoadTreeData"
+    :value="treeValue"
+    :tree-data="treeData"
+    @change="onChange"
+  />
+</template>
+
+<script lang="ts">
+  /**
+   * 列配置须包含：pcode（分类根编码，优先）或 pid（分类根 ID）。
+   * 支持多选：列配置加 multiple: true，存储值为逗号分隔字符串。
+   */
+  import { ref, computed, watch, defineComponent } from 'vue';
+  import { loadDictItem, loadTreeData } from '/@/api/common/api';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+
+  // 模块级标签缓存，key 为分类节点 id，在选中和回显时写入，translate.handler 优先读缓存
+  const _catLabelCache = new Map<string, string>();
+
+  function _cacheCatLabels(ids: string[], labels: string[]) {
+    ids.forEach((id, i) => _catLabelCache.set(id, String(labels[i])));
+  }
+
+  export default defineComponent({
+    name: 'JVxeCategorySelectCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
+
+      // cellProps 内部以 {} 声明，无具体属性类型；统一转换后供模板直接使用，避免模板内 `as` 断言
+      const cellAttrs = computed(() => cellProps.value as Record<string, any>);
+
+      // 树形节点列表
+      const treeData = ref<any[]>([]);
+      // 当前选中的带 label 的值（labelInValue 格式，多选为数组）
+      const treeValue = ref<any>(null);
+
+      // 是否多选（由列配置 multiple 控制）
+      const isMultiple = computed(() => !!originColumn.value?.multiple);
+
+      /** 从列配置中解析分类树参数，优先使用 pcode */
+      const catConfig = computed(() => {
+        const col = originColumn.value;
+        return {
+          pcode: col?.pcode || '',
+          pid: col?.pid || col?.pidValue || '',
+          condition: col?.condition || '',
+        };
+      });
+
+      // 外部值变化时回显 label
+      watch(() => innerValue.value, (val) => loadItemByCode(val), { immediate: true });
+
+      // 分类配置变化时重新加载根节点
+      watch(() => catConfig.value.pcode, () => loadRoot(), { immediate: true });
+
+      /** 加载分类根节点列表 */
+      async function loadRoot() {
+        const { pcode, pid, condition } = catConfig.value;
+        const param = pcode ? { pcode, condition } : { pid: pid || '0', pcode: '0', condition };
+        const res = await loadTreeData(param);
+        if (res?.length) {
+          treeData.value = res.map((item) => ({
+            ...item,
+            value: item.key,
+            isLeaf: item.leaf === true,
+          }));
+        }
+      }
+
+      /** 根据存储值（逗号分隔 ID）查询对应的 label，用于回显 */
+      async function loadItemByCode(val) {
+        if (!val) {
+          treeValue.value = isMultiple.value ? [] : { label: null, value: null };
+          return;
+        }
+        const ids = val.split(',');
+        // 若缓存已全部命中，直接用缓存构建 treeValue，跳过 API 请求
+        const cachedLabels = ids.map((id) => _catLabelCache.get(id));
+        if (cachedLabels.every((l) => l !== undefined)) {
+          treeValue.value = isMultiple.value
+            ? ids.map((id, i) => ({ key: id, value: id, label: cachedLabels[i] }))
+            : { key: val, value: val, label: cachedLabels[0] };
+          return;
+        }
+        const res = await loadDictItem({ ids: val });
+        if (isMultiple.value) {
+          // 多选：拆分 ID，逐一映射为 {key, value, label}
+          treeValue.value = ids.map((id, index) => ({
+            key: id,
+            value: id,
+            label: res?.[index] ?? id,
+          }));
+          if (res?.length) _cacheCatLabels(ids, res);
+        } else {
+          const label = res?.length ? res[0] : val;
+          treeValue.value = { key: val, value: val, label };
+          if (res?.length) _cacheCatLabels(ids, res);
+        }
+      }
+
+      /** 异步懒加载子节点 */
+      async function asyncLoadTreeData(treeNode) {
+        if (treeNode.dataRef.children) return Promise.resolve();
+        const { condition } = catConfig.value;
+        const pid = treeNode.dataRef.key;
+        const res = await loadTreeData({ pid, condition });
+        if (res?.length) {
+          const children = res.map((item) => ({
+            ...item,
+            value: item.key,
+            isLeaf: item.leaf === true,
+          }));
+          addChildren(pid, children, treeData.value);
+          treeData.value = [...treeData.value];
+        }
+        return Promise.resolve();
+      }
+
+      /** 递归将子节点插入到对应父节点下 */
+      function addChildren(pid, children, arr) {
+        if (!arr?.length) return;
+        for (const item of arr) {
+          if (item.key === pid) {
+            item.children = children.length ? children : undefined;
+            if (!children.length) item.isLeaf = true;
+            break;
+          }
+          addChildren(pid, children, item.children);
+        }
+      }
+
+      /** 选中或清空事件 */
+      function onChange(value) {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+          // 清空
+          treeValue.value = isMultiple.value ? [] : null;
+          handleChangeCommon('');
+        } else if (Array.isArray(value)) {
+          // 多选：数组 → 逗号分隔字符串；同时缓存 id->label 供非编辑模式直接使用
+          treeValue.value = value;
+          _cacheCatLabels(value.map((item) => item.value), value.map((item) => item.label));
+          handleChangeCommon(value.map((item) => item.value).join(','));
+        } else {
+          // 单选
+          treeValue.value = value;
+          if (value.value != null) _cacheCatLabels([value.value], [value.label]);
+          handleChangeCommon(value.value);
+        }
+      }
+
+      return { cellAttrs, treeData, treeValue, isMultiple, asyncLoadTreeData, onChange };
+    },
+    // 【组件增强】非编辑模式：优先读缓存，避免重复 API 请求
+    enhanced: {
+      switches: { editRender: true, visible: false },
+      translate: {
+        enabled: true,
+        async handler(value) {
+          if (!value) return '';
+          const ids = String(value).split(',');
+          const cachedLabels = ids.map((id) => _catLabelCache.get(id));
+          if (cachedLabels.every((l) => l !== undefined)) {
+            return cachedLabels.join(',');
+          }
+          try {
+            const res = await loadDictItem({ ids: value });
+            if (res?.length) {
+              _cacheCatLabels(ids, res);
+              return res.join(',');
+            }
+          } catch {}
+          return value;
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeCheckboxCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeCheckboxCell.vue
new file mode 100644
index 0000000..2d1327d
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeCheckboxCell.vue
@@ -0,0 +1,116 @@
+<template>
+  <div :class="boxClass" :style="boxStyle" title="">
+    <a-checkbox :checked="innerValue" v-bind="cellProps" @change="handleChange" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { isArray, isBoolean } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeCheckboxCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, scrolling, handleChangeCommon } = useJVxeComponent(props);
+      // 是否启用边框
+      const bordered = computed(() => !!props.renderOptions.bordered);
+      // box 类名
+      const boxClass = computed(() => {
+        return {
+          'j-vxe-checkbox': true,
+          'no-animation': scrolling.value,
+        };
+      });
+      // box 行内样式
+      const boxStyle = computed(() => {
+        const style = {};
+        // 如果有边框且未设置align属性，就强制居中
+        if (bordered.value && !originColumn.value.align) {
+          style['text-align'] = 'center';
+        }
+        return style;
+      });
+
+      // onChange 事件
+      function handleChange(event) {
+        handleChangeCommon(event.target.checked);
+      }
+
+      return {
+        cellProps,
+        innerValue,
+        boxClass,
+        boxStyle,
+        handleChange,
+      };
+    },
+
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      switches: {
+        visible: true,
+      },
+      getValue(value, ctx) {
+        let { context } = ctx!;
+        let { originColumn } = context;
+        // 处理 customValue
+        if (isArray(originColumn.value.customValue)) {
+          let customValue = getCustomValue(originColumn.value);
+          if (isBoolean(value)) {
+            return value ? customValue[0] : customValue[1];
+          } else {
+            return value;
+          }
+        } else {
+          return value;
+        }
+      },
+      setValue(value, ctx) {
+        let { context } = ctx!;
+        let { originColumn } = context;
+        // 判断是否设定了customValue（自定义值）
+        if (isArray(originColumn.value.customValue)) {
+          let customValue = getCustomValue(originColumn.value);
+          return neverNull(value).toString() === customValue[0].toString();
+        } else {
+          return !!value;
+        }
+      },
+      createValue(_defaultValue, ctx) {
+        let { context } = ctx!;
+        let {
+          column: { params: col },
+        } = context;
+        if (isArray(col.customValue)) {
+          let customValue = getCustomValue(col);
+          return col.defaultChecked ? customValue[0] : customValue[1];
+        } else {
+          return !!col.defaultChecked;
+        }
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+
+  function neverNull(value, def?) {
+    return value == null ? neverNull(def, '') : value;
+  }
+
+  function getCustomValue(col) {
+    let customTrue = neverNull(col.customValue[0], true);
+    let customFalse = neverNull(col.customValue[1], false);
+    return [customTrue, customFalse];
+  }
+</script>
+
+<style lang="less">
+  // 关闭动画，防止滚动时动态赋值出现问题
+  .j-vxe-checkbox.no-animation {
+    .ant-checkbox-inner,
+    .ant-checkbox-inner::after {
+      transition: none !important;
+    }
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeDateCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeDateCell.vue
new file mode 100644
index 0000000..61eedfe
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeDateCell.vue
@@ -0,0 +1,91 @@
+<template>
+  <a-date-picker
+    :value="innerDateValue"
+    allowClear
+    :format="picker ? null : dateFormat"
+    :showTime="isDatetime"
+    :valueFormat="picker ? dateFormat : null"
+    popupClassName="j-vxe-date-picker"
+    style="min-width: 0"
+    v-model:open="openPicker"
+    v-bind="cellProps"
+    :picker="picker"
+    @change="handleChange"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, computed, watch, defineComponent } from 'vue';
+  import dayjs from 'dayjs';
+  import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { isEmpty } from '/@/utils/is';
+  import { getWeekMonthQuarterYear } from '/@/utils';
+
+  export default defineComponent({
+    name: 'JVxeDateCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
+      const innerDateValue = ref<any>(null);
+      const isDatetime = computed(() => props.type === JVxeTypes.datetime);
+      const dateFormat = computed(() => {
+        let format = originColumn.value.format;
+        return format ? format : isDatetime.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+      });
+      const openPicker = ref(true);
+      // 代码逻辑说明: 【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+      const picker = computed(() => {
+        const picker = originColumn.value.picker;
+        return picker ? picker : null;
+      });
+      watch(
+        innerValue,
+        (val) => {
+          if (val == null || isEmpty(val)) {
+            innerDateValue.value = null;
+          } else {
+            innerDateValue.value = dayjs(val, dateFormat.value);
+          }
+        },
+        { immediate: true }
+      );
+
+      function handleChange(_mom, dateStr) {
+        // 代码逻辑说明: 【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+        if (picker.value) {
+          handleChangeCommon(_mom);
+        } else {
+          handleChangeCommon(dateStr);
+        }
+      }
+
+      return {
+        cellProps,
+        isDatetime,
+        dateFormat,
+        innerDateValue,
+        openPicker,
+        handleChange,
+        picker,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      aopEvents: {
+      },
+      // 代码逻辑说明: 【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+      translate: {
+        enabled: true,
+        handler(value, ctx) {
+          let { props, context } = ctx!;
+          let { row, originColumn } = context;
+          if (originColumn.value.picker && value) {
+            return getWeekMonthQuarterYear(value)[originColumn.value.picker];
+          }
+          return value;
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeDragSortCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeDragSortCell.vue
new file mode 100644
index 0000000..971b612
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeDragSortCell.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="j-vxe-drag-box">
+     <span v-if="!isAllowDrag"><span class="not-drag-btn"> <Icon icon="mi:drag" /> </span
+      ></span>
+    <a-dropdown v-else :trigger="['click']" >
+      <span
+        ><span class="drag-btn"> <Icon icon="mi:drag" /> </span
+      ></span>
+      <template #overlay >
+        <a-menu>
+          <a-menu-item key="0" :disabled="disabledMoveUp" @click="handleRowMoveUp">向上移</a-menu-item>
+          <a-menu-item key="1" :disabled="disabledMoveDown" @click="handleRowMoveDown">向下移</a-menu-item>
+          <template v-if="allowInsertRow">
+            <a-menu-divider />
+            <a-menu-item key="3" @click="handleRowInsertDown">插入一行</a-menu-item>
+          </template>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  export default defineComponent({
+    name: 'JVxeDragSortCell',
+    components: { Icon },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { rowIndex, originColumn, fullDataLength, trigger } = useJVxeComponent(props);
+      // 代码逻辑说明: 【QQYUN-8785】online表单列位置的id未做限制，拖动其他列到id列上面，同步数据库时报错
+      const isAllowDrag = computed(() => {
+        const notAllowDrag = originColumn.value.notAllowDrag;
+        if (notAllowDrag.length) {
+          const row = props.params.row;
+          const find = notAllowDrag.find((item: any) => {
+            const { key, value } = item;
+            return row[key] == value;
+          });
+          return !find;
+        } else {
+          return true;
+        }
+      });
+      const disabledMoveUp = computed(() => rowIndex.value === 0);
+      const disabledMoveDown = computed(() => rowIndex.value === fullDataLength.value - 1);
+
+      // 是否允许插入行
+      const allowInsertRow = computed(() => originColumn.value.insertRow);
+
+      /** 向上移 */
+      function handleRowMoveUp() {
+        if (!disabledMoveUp.value) {
+          trigger('rowResort', {
+            oldIndex: rowIndex.value,
+            newIndex: rowIndex.value - 1,
+          });
+        }
+      }
+
+      /** 向下移 */
+      function handleRowMoveDown() {
+        if (!disabledMoveDown.value) {
+          trigger('rowResort', {
+            oldIndex: rowIndex.value,
+            newIndex: rowIndex.value + 1,
+          });
+        }
+      }
+
+      /** 插入一行 */
+      function handleRowInsertDown() {
+        trigger('rowInsertDown', rowIndex.value);
+      }
+
+      return {
+        disabledMoveUp,
+        disabledMoveDown,
+        handleRowMoveUp,
+        handleRowMoveDown,
+        handleRowInsertDown,
+        isAllowDrag,
+        allowInsertRow,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      // 【功能开关】
+      switches: {
+        editRender: false,
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style lang="less">
+  .j-vxe-drag-box {
+    .app-iconify {
+      cursor: move;
+    }
+  }
+
+  .vxe-table--fixed-wrapper {
+    .j-vxe-drag-box {
+      .app-iconify {
+        cursor: pointer;
+      }
+    }
+  }
+</style>
+<style scoped>
+  .not-drag-btn {
+    opacity: 0.5;
+     .app-iconify {
+      cursor: not-allowed;
+    }
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue
new file mode 100644
index 0000000..499150d
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue
@@ -0,0 +1,152 @@
+<template>
+  <a-input ref="input" :value="innerValue" v-bind="cellProps" @blur="handleBlur" @change="handleChange" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { isString } from '/@/utils/is';
+  import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  const NumberRegExp = /^-?\d+\.?\d*$/;
+  export default defineComponent({
+    name: 'JVxeInputCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon, handleBlurCommon } = useJVxeComponent(props);
+
+      // 是否是数字类型输入框
+      const isNumberType = props.type === JVxeTypes.inputNumber;
+
+      /**
+       * 计算数字类型的限制属性
+       * 包含最大值、最小值和精度配置，供输入组件和格式化逻辑使用
+       */
+      const numberProps = computed<{
+        max?: number,
+        min?: number,
+        precision?: number,
+      }>(() => {
+        const {max, min, precision} = cellProps.value as Recordable;
+        const nProps: Recordable = {};
+        // 最大值
+        if (typeof max === 'number') {
+          nProps.max = max;
+        }
+        // 最小值
+        if (typeof min === 'number') {
+          nProps.min = min;
+        }
+        // 数值精度，保留小数位数
+        if (typeof precision === 'number') {
+          nProps.precision = precision;
+        }
+        return nProps;
+      });
+
+      /** 处理change事件 */
+      function handleChange(event) {
+        let { target } = event;
+        let { value, selectionStart } = target;
+        let change = true;
+        if (isNumberType) {
+          // 判断输入的值是否匹配数字正则表达式，不匹配就还原
+          if (!NumberRegExp.test(value) && value !== '' && value !== '-') {
+            change = false;
+            value = innerValue.value;
+            target.value = value || '';
+            if (typeof selectionStart === 'number') {
+              target.selectionStart = selectionStart - 1;
+              target.selectionEnd = selectionStart - 1;
+            }
+          } else {
+            // 例如：41.1 -> 41.10, 100.1 -> 100.10 不执行handleChangeCommon 函数。
+            if (value.indexOf('.') != -1) {
+              const result = value.split('.').pop();
+              if (result && result.length >= 2 && result.substr(-1) === '0') {
+                change = false;
+                innerValue.value = value;
+              }
+            }
+          }
+        }
+        // 触发事件，存储输入的值
+        if (change) {
+          handleChangeCommon(value);
+        }
+      }
+
+      /** 处理blur失去焦点事件 */
+      function handleBlur(event) {
+        let { target } = event;
+        // 判断输入的值是否匹配数字正则表达式，不匹配就置空
+        if (isNumberType) {
+          if (!NumberRegExp.test(target.value)) {
+            target.value = '';
+          } else {
+            const parsedValue = Number.parseFloat(target.value);
+            const clampedValue = clampNumber(parsedValue);
+            target.value = applyPrecision(clampedValue);
+          }
+        }
+        handleChangeCommon(target.value, true);
+        handleBlurCommon(target.value);
+      }
+
+      /**
+       * 依据最小值和最大值限制数值
+       * @param value 需要裁剪的数值
+       */
+      function clampNumber(value: number): number {
+        let result = value;
+        const { max, min } = numberProps.value;
+        // 应用最小值限制
+        if (typeof min === 'number') {
+          result = Math.max(min, result);
+        }
+        // 应用最大值限制
+        if (typeof max === 'number') {
+          result = Math.min(max, result);
+        }
+        return result;
+      }
+
+      /**
+       * 按配置精度格式化数值
+       * @param value 待格式化的数值
+       */
+      function applyPrecision(value: number): number {
+        const { precision } = numberProps.value;
+        if (typeof precision === 'number') {
+          return Number(value.toFixed(precision));
+        }
+        return value;
+      }
+
+      return {
+        innerValue,
+        cellProps,
+        isNumberType,
+        handleChange,
+        handleBlur,
+      };
+    },
+    enhanced: {
+      installOptions: {
+        autofocus: '.ant-input',
+      },
+      getValue(value, ctx) {
+        if (ctx?.props?.type === JVxeTypes.inputNumber && isString(value)) {
+          if (NumberRegExp.test(value)) {
+            // 【issues/I5IHN7】修复无法输入小数点的bug
+            if (/\.0*$/.test(value)) {
+              return value;
+            }
+            return Number.parseFloat(value);
+          }
+        }
+        return value;
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeNormalCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeNormalCell.vue
new file mode 100644
index 0000000..2ed7073
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeNormalCell.vue
@@ -0,0 +1,53 @@
+<template>
+  <JVxeReloadEffect :vNode="innerLabel" :effect="isEffect" @effectEnd="handleEffectEnd" />
+</template>
+
+<script lang="ts">
+  import { ref, watch, defineComponent } from 'vue';
+  import JVxeReloadEffect from '../JVxeReloadEffect';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  export default defineComponent({
+    name: 'JVxeNormalCell',
+    components: { JVxeReloadEffect },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const setup = useJVxeComponent(props);
+      const { innerValue, innerLabel, row } = setup;
+
+      const reloadEffect = props.renderOptions.reloadEffect;
+      const isEffect = ref<boolean>(false);
+
+      watch(
+        innerValue,
+        () => {
+          if (reloadEffect.enabled) {
+            if (reloadEffect.isEffect(row.value.id)) {
+              isEffect.value = true;
+            }
+          }
+        },
+        { immediate: true }
+      );
+
+      // 特效结束
+      function handleEffectEnd() {
+        isEffect.value = false;
+        reloadEffect.removeEffect(row.value.id);
+      }
+
+      return {
+        innerLabel,
+        innerValue,
+        isEffect,
+        handleEffectEnd,
+      };
+    },
+    enhanced: {
+      switches: { editRender: false },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeProgressCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeProgressCell.vue
new file mode 100644
index 0000000..39a3a56
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeProgressCell.vue
@@ -0,0 +1,52 @@
+<template>
+  <Progress :class="clazz" :percent="innerValue" size="small" v-bind="cellProps" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { Progress } from 'ant-design-vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  export default defineComponent({
+    name: 'JVxeCheckboxCell',
+    components: { Progress },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, scrolling } = useJVxeComponent(props);
+      const clazz = computed(() => {
+        return {
+          'j-vxe-progress': true,
+          'no-animation': scrolling.value,
+        };
+      });
+      return { innerValue, cellProps, clazz };
+    },
+    // 【组件增强】注释详见：：JVxeComponent.Enhanced
+    enhanced: {
+      switches: {
+        editRender: false,
+      },
+      setValue(value) {
+        try {
+          if (typeof value !== 'number') {
+            return Number.parseFloat(value);
+          } else {
+            return value;
+          }
+        } catch {
+          return 0;
+        }
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style scoped lang="less">
+  // 关闭进度条的动画，防止滚动时动态赋值出现问题
+  .j-vxe-progress.no-animation {
+    :deep(.ant-progress-bg) {
+      transition: none !important;
+    }
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeRadioCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeRadioCell.vue
new file mode 100644
index 0000000..503adf5
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeRadioCell.vue
@@ -0,0 +1,60 @@
+<template>
+  <a-radio-group :class="clazz" :value="innerValue" v-bind="cellProps" @change="(e) => handleChangeCommon(e.target.value)">
+    <a-radio v-for="item of originColumn.options" :key="item.value" :value="item.value" @click="(e) => handleRadioClick(item, e)"
+      >{{ item.text || item.label || item.title || item.value }}
+    </a-radio>
+  </a-radio-group>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  export default defineComponent({
+    name: 'JVxeRadioCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
+      const scrolling = computed(() => !!props.renderOptions.scrolling);
+      const clazz = computed(() => {
+        return {
+          'j-vxe-radio': true,
+          'no-animation': scrolling.value,
+        };
+      });
+
+      function handleRadioClick(item) {
+        if (originColumn.value.allowClear === true) {
+          // 取消选择
+          if (item.value === innerValue.value) {
+            handleChangeCommon(null);
+          }
+        }
+      }
+
+      return {
+        clazz,
+        innerValue,
+        originColumn,
+        cellProps,
+        handleRadioClick,
+        handleChangeCommon,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      switches: { visible: true },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
+
+<style lang="less">
+  // 关闭动画，防止滚动时动态赋值出现问题
+  .j-vxe-radio.no-animation {
+    .ant-radio-inner,
+    .ant-radio-inner::after {
+      transition: none !important;
+    }
+  }
+</style>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeSelectCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeSelectCell.vue
new file mode 100644
index 0000000..251acd6
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeSelectCell.vue
@@ -0,0 +1,237 @@
+<template>
+  <a-select :value="innerValue" v-bind="selectProps">
+    <template v-if="loading" #notFoundContent>
+      <LoadingOutlined />
+      <span>&nbsp;加载中…</span>
+    </template>
+    <template v-for="option of selectOptions" :key="option.value">
+      <a-select-option :value="option.value" :title="option.text || option.label || option.title" :disabled="option.disabled">
+        <span>{{ option.text || option.label || option.title || option.value }}</span>
+      </a-select-option>
+    </template>
+  </a-select>
+</template>
+
+<script lang="ts">
+  import { ref, computed, defineComponent } from 'vue';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
+  import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+  import { isPromise } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeSelectCell',
+    components: { LoadingOutlined },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, row, originColumn, scrolling, handleChangeCommon, handleBlurCommon } = useJVxeComponent(props);
+      const loading = ref(false);
+      // 异步加载的options（用于多级联动）
+      const asyncOptions = ref<any[] | null>(null);
+      // 下拉框 props
+      const selectProps = computed(() => {
+        let selProps = {
+          ...cellProps.value,
+          allowClear: true,
+          autofocus: true,
+          defaultOpen: !scrolling.value,
+          style: { width: '100%' },
+          filterOption: handleSelectFilterOption,
+          onBlur: handleBlur,
+          onChange: handleChange,
+        };
+        // 判断select是否允许输入
+        let { allowSearch, allowInput } = originColumn.value;
+        if (allowInput === true || allowSearch === true) {
+          selProps['showSearch'] = true;
+          selProps['onSearch'] = handleSearchSelect;
+        }
+        return selProps;
+      });
+      // 下拉选项
+      const selectOptions = computed(() => {
+        if (asyncOptions.value) {
+          return asyncOptions.value;
+        }
+        let { linkage } = props.renderOptions;
+        if (linkage) {
+          let { getLinkageOptionsSibling, config } = linkage;
+          let res = getLinkageOptionsSibling(row.value, originColumn.value, config, true);
+          // 当返回Promise时，说明是多级联动
+          if (res instanceof Promise) {
+            loading.value = true;
+            res
+              .then((opt) => {
+                asyncOptions.value = opt;
+                loading.value = false;
+              })
+              .catch((e) => {
+                console.error(e);
+                loading.value = false;
+              });
+          } else {
+            asyncOptions.value = null;
+            return res;
+          }
+        }
+        return originColumn.value.options;
+      });
+
+      // --------- created ---------
+
+      // 多选、搜索type
+      let multipleTypes = [JVxeTypes.selectMultiple, 'list_multi'];
+      let searchTypes = [JVxeTypes.selectSearch, 'sel_search'];
+      if (multipleTypes.includes(props.type)) {
+        // 处理多选
+        let props = originColumn.value.props || {};
+        props['mode'] = 'multiple';
+        props['maxTagCount'] = 1;
+        // 代码逻辑说明: issues/271 Online表单主子表单下拉多选无法搜索
+        originColumn.value.allowSearch = true;
+        originColumn.value.props = props;
+      } else if (searchTypes.includes(props.type)) {
+        // 处理搜索
+        originColumn.value.allowSearch = true;
+      }
+
+      /** 处理 change 事件 */
+      function handleChange(value) {
+        // 处理下级联动
+        let linkage = props.renderOptions.linkage;
+        if (linkage) {
+          linkage.handleLinkageSelectChange(row.value, originColumn.value, linkage.config, value);
+        }
+        handleChangeCommon(value);
+      }
+
+      /** 处理blur失去焦点事件 */
+      function handleBlur(value) {
+        let { allowInput, options } = originColumn.value;
+        if (allowInput === true) {
+          // 删除无用的因搜索（用户输入）而创建的项
+          if (typeof value === 'string') {
+            let indexes: number[] = [];
+            options.forEach((option, index) => {
+              if (option.value.toLocaleString() === value.toLocaleString()) {
+                delete option.searchAdd;
+              } else if (option.searchAdd === true) {
+                indexes.push(index);
+              }
+            });
+            // 翻转删除数组中的项
+            for (let index of indexes.reverse()) {
+              options.splice(index, 1);
+            }
+          }
+        }
+        handleBlurCommon(value);
+      }
+
+      /** 用于搜索下拉框中的内容 */
+      function handleSelectFilterOption(input, option) {
+      
+        let { allowSearch, allowInput } = originColumn.value;
+        if (allowSearch === true || allowInput === true) {
+          // 代码逻辑说明: 【QQYUN-5806】js增强改变下拉搜索options (防止option.title为null报错)
+          if (option.title == null) return false;
+          // 代码逻辑说明: 【issues/5305】JVxeTypes.select 无法按照预期进行搜索
+          return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        }
+        return true;
+      }
+
+      /** select 搜索时的事件，用于动态添加options */
+      function handleSearchSelect(value) {
+        let { allowSearch, allowInput, options } = originColumn.value;
+
+        if (allowSearch !== true && allowInput === true) {
+          // 是否找到了对应的项，找不到则添加这一项
+          let flag = false;
+          for (let option of options) {
+            if (option.value.toLocaleString() === value.toLocaleString()) {
+              flag = true;
+              break;
+            }
+          }
+          // !!value ：不添加空值
+          if (!flag && !!value) {
+            // searchAdd 是否是通过搜索添加的
+            options.push({ title: value, value: value, searchAdd: true });
+          }
+        }
+      }
+
+      return {
+        loading,
+        innerValue,
+        selectProps,
+        selectOptions,
+        handleChange,
+        handleBlur,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      aopEvents: {
+        editActived({ $event, row, column }) {
+          dispatchEvent({
+            $event,
+            row,
+            column,
+            props: this.props,
+            instance: this,
+            className: '.ant-select .ant-select-selection-search-input',
+            isClick: false,
+            handler: (el) => el.focus(),
+          });
+        },
+      },
+      translate: {
+        enabled: true,
+        async handler(value, ctx) {
+          let { props, context } = ctx!;
+          let { row, originColumn } = context;
+          let options;
+          let linkage = props?.renderOptions.linkage;
+          // 判断是否是多级联动，如果是就通过接口异步翻译
+          if (linkage) {
+            let { getLinkageOptionsSibling, config } = linkage;
+            let linkageOptions = getLinkageOptionsSibling(row.value, originColumn.value, config, true);
+            options = isPromise(linkageOptions) ? await linkageOptions : linkageOptions;
+          } else if (isPromise(originColumn.value.optionsPromise)) {
+            options = await originColumn.value.optionsPromise;
+          } else {
+            options = originColumn.value.options;
+          }
+          return filterDictText(options, value);
+        },
+      },
+      getValue(value) {
+        if (Array.isArray(value)) {
+          return value.join(',');
+        } else {
+          return value;
+        }
+      },
+      setValue(value, ctx) {
+        let { context } = ctx!;
+        let { originColumn } = context;
+        // 判断是否是多选
+        if ((originColumn.value.props || {})['mode'] === 'multiple') {
+          originColumn.value.props['maxTagCount'] = 1;
+        }
+        if (value != null && value !== '') {
+          if (typeof value === 'string') {
+            return value === '' ? [] : value.split(',');
+          }
+          return value;
+        } else {
+          return undefined;
+        }
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeSlotCell.ts b/src/components/jeecg/JVxeTable/src/components/cells/JVxeSlotCell.ts
new file mode 100644
index 0000000..35fcb9f
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeSlotCell.ts
@@ -0,0 +1,41 @@
+import { computed, defineComponent, h } from 'vue';
+import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/src/hooks/useJVxeComponent';
+import { JVxeComponent } from '/@/components/jeecg/JVxeTable/src/types/JVxeComponent';
+
+export default defineComponent({
+  name: 'JVxeSlotCell',
+  props: useJVxeCompProps(),
+  setup(props: JVxeComponent.Props) {
+    const data = useJVxeComponent(props);
+    const slotProps = computed(() => {
+      return {
+        value: data.innerValue.value,
+        row: data.row.value,
+        column: data.originColumn.value,
+        params: props.params,
+        $table: props.params.$table,
+        rowId: props.params.rowid,
+        index: props.params.rowIndex,
+        rowIndex: props.params.rowIndex,
+        columnIndex: props.params.columnIndex,
+        scrolling: props.renderOptions.scrolling,
+        reloadEffect: props.renderOptions.reloadEffect.enabled,
+        triggerChange: (v) => data.handleChangeCommon(v),
+      };
+    });
+    return () => {
+      let { slot } = props.renderOptions;
+      if (slot) {
+        return h('div', {}, slot(slotProps.value));
+      } else {
+        return h('div');
+      }
+    };
+  },
+  // 【组件增强】注释详见：JVxeComponent.Enhanced
+  enhanced: {
+    switches: {
+      editRender: false,
+    },
+  } as JVxeComponent.EnhancedPartial,
+});
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeTextareaCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTextareaCell.vue
new file mode 100644
index 0000000..fa892ef
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTextareaCell.vue
@@ -0,0 +1,57 @@
+<template>
+  <JInputPop
+    :value="innerValue"
+    :width="300"
+    :height="210"
+    :pop-container="getPopupContainer"
+    v-bind="cellProps"
+    style="width: 100%"
+    @blur="handleBlurCommon"
+    @change="handleChangeCommon"
+  />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import JInputPop from '/@/components/Form/src/jeecg/components/JInputPop.vue';
+  import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+  export default defineComponent({
+    name: 'JVxeTextareaCell',
+    components: { JInputPop },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, handleChangeCommon, handleBlurCommon } = useJVxeComponent(props);
+
+      function getPopupContainer() {
+        return document.body;
+      }
+
+      return { innerValue, cellProps, handleChangeCommon, handleBlurCommon, getPopupContainer };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      installOptions: {
+        autofocus: '.ant-input',
+      },
+      aopEvents: {
+        editActived({ $event, row, column }) {
+          // 是否默认打开右侧弹窗
+          if (column.params.defaultOpen ?? false) {
+            dispatchEvent({
+              $event,
+              row,
+              column,
+              props: this.props,
+              instance: this,
+              className: '.ant-input-suffix .app-iconify',
+              isClick: true,
+            });
+          }
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeTimeCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTimeCell.vue
new file mode 100644
index 0000000..feb0cbb
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTimeCell.vue
@@ -0,0 +1,64 @@
+<template>
+  <TimePicker
+    :value="innerTimeValue"
+    allowClear
+    :format="format"
+    popupClassName="j-vxe-time-picker"
+    style="min-width: 0"
+    v-model:open="openPicker"
+    v-bind="cellProps"
+    @change="handleChange"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, computed, watch, defineComponent } from 'vue';
+  import dayjs from 'dayjs';
+  import { TimePicker } from 'ant-design-vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { isEmpty } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'JVxeTimeCell',
+    components: { TimePicker },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
+      const innerTimeValue = ref<any>(null);
+      const format = computed(() => {
+        let format = originColumn.value.format;
+        return format ? format : 'HH:mm:ss';
+      });
+      const openPicker = ref(true);
+      watch(
+        innerValue,
+        (val) => {
+          if (val == null || isEmpty(val)) {
+            innerTimeValue.value = null;
+          } else {
+            innerTimeValue.value = dayjs(val, format.value);
+          }
+        },
+        { immediate: true }
+      );
+
+      function handleChange(_mom, dateStr) {
+        handleChangeCommon(dateStr);
+      }
+
+      return {
+        cellProps,
+        format,
+        innerTimeValue,
+        openPicker,
+        handleChange,
+      };
+    },
+    // 【组件增强】注释详见：JVxeComponent.Enhanced
+    enhanced: {
+      aopEvents: {
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeTreeSelectCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTreeSelectCell.vue
new file mode 100644
index 0000000..a94fab6
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeTreeSelectCell.vue
@@ -0,0 +1,244 @@
+<template>
+  <a-tree-select
+    v-if="show"
+    allow-clear
+    label-in-value
+    show-checked-strategy="SHOW_ALL"
+    style="width: 100%"
+    :get-popup-container="(node) => node?.parentNode"
+    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="cellAttrs.placeholder || '请选择'"
+    :disabled="cellAttrs.disabled"
+    :multiple="isMultiple"
+    :load-data="asyncLoadTreeData"
+    :value="treeValue"
+    :tree-data="treeData"
+    @change="onChange"
+  />
+</template>
+
+<script lang="ts">
+  /**
+   * 列配置须包含：dict（"表名,文本字段,存储字段"）、pidField（父级字段名）、
+   * pidValue（根节点值，可选）、hasChildField（是否有子节点字段，可选）。
+   * 支持多选：列配置加 multiple: true，存储值为逗号分隔字符串。
+   */
+  import { ref, computed, watch, defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+
+  const API_LOAD_TREE = '/sys/dict/loadTreeData';
+  const API_LOAD_ITEM = '/sys/dict/loadDictItem/';
+
+  // 模块级标签缓存，key 为 "tableName:id"，在选中和回显时写入，translate.handler 优先读缓存
+  const _labelCache = new Map<string, string>();
+
+  function _cacheLabels(tableName: string, ids: string[], labels: string[]) {
+    ids.forEach((id, i) => _labelCache.set(`${tableName}:${id}`, String(labels[i])));
+  }
+
+  export default defineComponent({
+    name: 'JVxeTreeSelectCell',
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
+
+      // cellProps 内部以 {} 声明，无具体属性类型；统一转换后供模板直接使用，避免模板内 `as` 断言
+      const cellAttrs = computed(() => cellProps.value as Record<string, any>);
+
+      // 树形节点列表
+      const treeData = ref<any[]>([]);
+      // 当前选中的带 label 的值（labelInValue 格式，多选为数组）
+      const treeValue = ref<any>(null);
+      // 用于重置组件（dict 变更时重新挂载）
+      const show = ref(true);
+
+      // 是否多选（由列配置 multiple 控制）
+      const isMultiple = computed(() => !!originColumn.value?.multiple);
+
+      /**
+       * 从列配置中解析树相关参数
+       * dict 格式为 "tableName,textField,codeField"
+       */
+      const treeConfig = computed(() => {
+        const col = originColumn.value;
+        const dictArr = (col?.dict || '').split(',');
+        return {
+          tableName: dictArr[0] || '',
+          text: dictArr[1] || '',
+          code: dictArr[2] || '',
+          pidField: col?.pidField || 'pid',
+          pidValue: col?.pidValue || '',
+          hasChildField: col?.hasChildField || '',
+          condition: col?.condition || '',
+        };
+      });
+
+      // 外部值变化时回显 label
+      watch(
+        () => innerValue.value,
+        (val) => loadItemByCode(val),
+        { immediate: true }
+      );
+
+      // dict 配置变化时重新加载根节点
+      watch(
+        () => treeConfig.value.tableName,
+        async (tableName) => {
+          if (tableName) {
+            treeData.value = [];
+            show.value = false;
+            await loadRoot();
+            show.value = true;
+          }
+        },
+        { immediate: true }
+      );
+
+      /** 加载根节点列表 */
+      async function loadRoot() {
+        const { tableName, text, code, pidField, pidValue, hasChildField, condition } = treeConfig.value;
+        if (!tableName) return;
+        const res = await defHttp.get(
+          { url: API_LOAD_TREE, params: { tableName, text, code, pid: pidValue, pidField, hasChildField, condition } },
+          { isTransformResponse: false }
+        );
+        if (res.success && res.result) {
+          treeData.value = res.result.map((item) => ({
+            ...item,
+            value: item.key,
+            isLeaf: !!item.leaf,
+          }));
+        }
+      }
+
+      /** 根据存储值（逗号分隔 ID）查询对应的 label，用于回显 */
+      async function loadItemByCode(val) {
+        if (!val) {
+          treeValue.value = isMultiple.value ? [] : { label: null, value: null };
+          return;
+        }
+        const { tableName, text, code } = treeConfig.value;
+        if (!tableName) {
+          treeValue.value = isMultiple.value ? val.split(',').map((id) => ({ key: id, value: id, label: id })) : { label: val, value: val };
+          return;
+        }
+        const ids = val.split(',');
+        // 若缓存已全部命中，直接用缓存构建 treeValue，跳过 API 请求
+        const cachedLabels = ids.map((id) => _labelCache.get(`${tableName}:${id}`));
+        if (cachedLabels.every((l) => l !== undefined)) {
+          treeValue.value = isMultiple.value
+            ? ids.map((id, i) => ({ key: id, value: id, label: cachedLabels[i] }))
+            : { key: val, value: val, label: cachedLabels[0] };
+          return;
+        }
+        const res = await defHttp.get({ url: `${API_LOAD_ITEM}${tableName},${text},${code}`, params: { key: val } }, { isTransformResponse: false });
+        if (isMultiple.value) {
+          // 多选：拆分 ID，逐一映射为 {key, value, label}
+          treeValue.value = ids.map((id, index) => ({
+            key: id,
+            value: id,
+            label: res.success ? (res.result?.[index] ?? id) : id,
+          }));
+          if (res.success && res.result?.length) _cacheLabels(tableName, ids, res.result);
+        } else {
+          const label = res.success && res.result?.length ? res.result[0] : val;
+          treeValue.value = { key: val, value: val, label };
+          if (res.success && res.result?.length) _cacheLabels(tableName, ids, res.result);
+        }
+      }
+
+      /** 异步懒加载子节点 */
+      async function asyncLoadTreeData(treeNode) {
+        if (treeNode.dataRef.children) return Promise.resolve();
+        const { tableName, text, code, pidField, hasChildField, condition } = treeConfig.value;
+        const pid = treeNode.dataRef.key;
+        const res = await defHttp.get(
+          { url: API_LOAD_TREE, params: { tableName, text, code, pid, pidField, hasChildField, condition } },
+          { isTransformResponse: false }
+        );
+        if (res.success) {
+          const children = res.result.map((item) => ({
+            ...item,
+            value: item.key,
+            isLeaf: !!item.leaf,
+          }));
+          addChildren(pid, children, treeData.value);
+          treeData.value = [...treeData.value];
+        }
+        return Promise.resolve();
+      }
+
+      /** 递归将子节点插入到对应父节点下 */
+      function addChildren(pid, children, arr) {
+        if (!arr?.length) return;
+        for (const item of arr) {
+          if (item.key === pid) {
+            item.children = children.length ? children : undefined;
+            if (!children.length) item.isLeaf = true;
+            break;
+          }
+          addChildren(pid, children, item.children);
+        }
+      }
+
+      /** 选中或清空事件 */
+      function onChange(value) {
+        const { tableName } = treeConfig.value;
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+          // 清空
+          treeValue.value = isMultiple.value ? [] : null;
+          handleChangeCommon('');
+        } else if (Array.isArray(value)) {
+          // 多选：数组 → 逗号分隔字符串；同时缓存 id->label 供非编辑模式直接使用
+          treeValue.value = value;
+          if (tableName)
+            _cacheLabels(
+              tableName,
+              value.map((item) => item.value),
+              value.map((item) => item.label)
+            );
+          handleChangeCommon(value.map((item) => item.value).join(','));
+        } else {
+          // 单选
+          treeValue.value = value;
+          if (tableName && value.value != null) _cacheLabels(tableName, [value.value], [value.label]);
+          handleChangeCommon(value.value);
+        }
+      }
+
+      return { cellAttrs, treeData, treeValue, show, isMultiple, asyncLoadTreeData, onChange };
+    },
+    // 【组件增强】非编辑模式：优先读缓存，避免重复 API 请求
+    enhanced: {
+      switches: { editRender: true, visible: false },
+      translate: {
+        enabled: true,
+        async handler(value, ctx) {
+          if (!value) return '';
+          const col = ctx?.context.originColumn.value;
+          const dictArr = (col?.dict || '').split(',');
+          const tableName = dictArr[0];
+          if (!tableName) return value;
+          const ids = String(value).split(',');
+          const cachedLabels = ids.map((id) => _labelCache.get(`${tableName}:${id}`));
+          if (cachedLabels.every((l) => l !== undefined)) {
+            return cachedLabels.join(',');
+          }
+          try {
+            const res = await defHttp.get(
+              { url: `${API_LOAD_ITEM}${tableName},${dictArr[1] || ''},${dictArr[2] || ''}`, params: { key: value } },
+              { isTransformResponse: false }
+            );
+            if (res.success && res.result?.length) {
+              _cacheLabels(tableName, ids, res.result);
+              return res.result.join(',');
+            }
+          } catch {}
+          return value;
+        },
+      },
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeUploadCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeUploadCell.vue
new file mode 100644
index 0000000..f9d73ec
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeUploadCell.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <template v-if="hasFile" v-for="(file, fileKey) of [innerFile || {}]" :key="fileKey">
+      <a-input :readOnly="true" :value="file.name">
+        <template #addonBefore style="width: 30px">
+          <a-tooltip v-if="file.status === 'uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
+            <LoadingOutlined />
+          </a-tooltip>
+          <a-tooltip v-else-if="file.status === 'done'" title="上传完成">
+            <Icon icon="ant-design:check-circle-outlined" style="color: #00db00" />
+          </a-tooltip>
+          <a-tooltip v-else :title="file.message || '上传失败'">
+            <Icon icon="ant-design:exclamation-circle-outlined" style="color: red" />
+          </a-tooltip>
+        </template>
+        <span v-if="file.status === 'uploading'" slot="addonAfter">{{ Math.floor(file.percent) }}%</span>
+        <template v-if="originColumn.allowDownload !== false || originColumn.allowRemove !== false" #addonAfter>
+          <Dropdown :trigger="['click']" placement="bottomRight">
+            <a-tooltip title="操作">
+              <Icon icon="ant-design:setting-outlined" style="cursor: pointer" />
+            </a-tooltip>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item v-if="originColumn.allowDownload !== false" @click="handleClickDownloadFile">
+                  <span><Icon icon="ant-design:download-outlined" />&nbsp;下载</span>
+                </a-menu-item>
+                <a-menu-item v-if="originColumn.allowRemove !== false" @click="handleClickDeleteFile">
+                  <span><Icon icon="ant-design:delete-outlined" />&nbsp;删除</span>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </Dropdown>
+        </template>
+      </a-input>
+    </template>
+    <a-upload
+      v-if="!cellProps.disabledTable"
+      v-show="!hasFile"
+      name="file"
+      :data="{ isup: 1 }"
+      :multiple="false"
+      :action="originColumn.action"
+      :headers="uploadHeaders"
+      :showUploadList="false"
+      v-bind="cellProps"
+      @change="handleChangeUpload"
+    >
+      <a-button preIcon="ant-design:upload-outlined">{{ originColumn.btnText || '点击上传' }}</a-button>
+    </a-upload>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { Dropdown } from 'ant-design-vue';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
+  import { useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+  import { useJVxeUploadCell, fileGetValue, fileSetValue } from '../../hooks/cells/useJVxeUploadCell';
+
+  export default defineComponent({
+    name: 'JVxeUploadCell',
+    components: { Icon, Dropdown, LoadingOutlined },
+    props: useJVxeCompProps(),
+    setup(props: JVxeComponent.Props) {
+      const setup = useJVxeUploadCell(props);
+      return { ...setup };
+    },
+    // 【组件增强】注释详见：：JVxeComponent.Enhanced
+    enhanced: {
+      switches: { visible: true },
+      getValue: (value) => fileGetValue(value),
+      setValue: (value) => fileSetValue(value),
+    } as JVxeComponent.EnhancedPartial,
+  });
+</script>
diff --git a/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts b/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts
new file mode 100644
index 0000000..c3a7979
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts
@@ -0,0 +1,139 @@
+import { ref, computed, watch } from 'vue';
+
+import {getTenantId, getToken} from '/@/utils/auth';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { JVxeComponent } from '../../types/JVxeComponent';
+import { useJVxeComponent } from '../useJVxeComponent';
+
+/**
+ * use 公共上传组件
+ * @param props
+ * @param options 组件选项，token：默认是否传递token，action：默认上传路径，multiple：是否允许多文件
+ */
+export function useJVxeUploadCell(props: JVxeComponent.Props, options?) {
+  const setup = useJVxeComponent(props);
+  const { innerValue, originColumn, handleChangeCommon } = setup;
+
+  const innerFile = ref<any>(null);
+
+  /** upload headers */
+  const uploadHeaders = computed(() => {
+    let headers = {};
+    if ((originColumn.value.token ?? options?.token ?? false) === true) {
+      headers['X-Access-Token'] = getToken();
+    }
+    let tenantId = getTenantId();
+    headers['X-Tenant-Id'] = tenantId ? tenantId : '0';
+    return headers;
+  });
+
+  /** 上传请求地址 */
+  const uploadAction = computed(() => {
+    if (!originColumn.value.action) {
+      return options?.action ?? '';
+    } else {
+      return originColumn.value.action;
+    }
+  });
+  const hasFile = computed(() => innerFile.value != null);
+  const responseName = computed(() => originColumn.value.responseName ?? 'message');
+
+  watch(
+    innerValue,
+    (val) => {
+      if (val) {
+        innerFile.value = val;
+      } else {
+        innerFile.value = null;
+      }
+    },
+    { immediate: true }
+  );
+
+  function handleChangeUpload(info) {
+    let { file } = info;
+    let value = {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      status: file.status,
+      percent: file.percent,
+      path: innerFile.value?.path ?? '',
+    };
+    if (file.response) {
+      value['responseName'] = file.response[responseName.value];
+    }
+    let paths: string[] = [];
+    if (options?.multiple && innerFile.value && innerFile.value.path) {
+      paths = innerFile.value.path.split(',');
+    }
+    if (file.status === 'done') {
+      if (typeof file.response.success === 'boolean') {
+        if (file.response.success) {
+          paths.push(file.response[responseName.value]);
+          value['path'] = paths.join(',');
+          handleChangeCommon(value);
+        } else {
+          value['status'] = 'error';
+          value['message'] = file.response.message || '未知错误';
+        }
+      } else {
+        // 考虑到如果设置action上传路径为非jeecg-boot后台，可能不会返回 success 属性的情况，就默认为成功
+        paths.push(file.response[responseName.value]);
+        value['path'] = paths.join(',');
+        handleChangeCommon(value);
+      }
+    } else if (file.status === 'error') {
+      value['message'] = file.response.message || '未知错误';
+    }
+    innerFile.value = value;
+  }
+
+  function handleClickDownloadFile() {
+    let { url, path } = innerFile.value || {};
+    if (!url || url.length === 0) {
+      if (path && path.length > 0) {
+        url = getFileAccessHttpUrl(path.split(',')[0]);
+      }
+    }
+    if (url) {
+      window.open(url);
+    }
+  }
+
+  function handleClickDeleteFile() {
+    handleChangeCommon(null);
+  }
+
+  return {
+    ...setup,
+    innerFile,
+    uploadAction,
+    uploadHeaders,
+    hasFile,
+    responseName,
+    handleChangeUpload,
+    handleClickDownloadFile,
+    handleClickDeleteFile,
+  };
+}
+
+export function fileGetValue(value) {
+  if (value && value.path) {
+    return value.path;
+  }
+  return value;
+}
+
+export function fileSetValue(value) {
+  if (value) {
+    let first = value.split(',')[0];
+    let name = first.substring(first.lastIndexOf('/') + 1);
+    return {
+      name: name,
+      path: value,
+      status: 'done',
+    };
+  }
+  return value;
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts b/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts
new file mode 100644
index 0000000..073cb1a
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts
@@ -0,0 +1,440 @@
+import type { JVxeColumn, JVxeDataProps, JVxeTableProps } from '../types';
+import { computed, nextTick, toRaw } from 'vue';
+import { isArray, isEmpty, isPromise } from '/@/utils/is';
+import { cloneDeep } from 'lodash-es';
+import { JVxeTypePrefix, JVxeTypes } from '../types/JVxeTypes';
+import { initDictOptions } from '/@/utils/dict';
+import { pushIfNotExist } from '/@/utils/common/compUtils';
+import { getEnhanced } from '../utils/enhancedUtils';
+import { isRegistered } from '../utils/registerUtils';
+import { JVxeComponent } from '../types/JVxeComponent';
+import { useValidateRules } from './useValidateRules';
+import { JVxeTableMethods } from '../types';
+
+// handle 方法参数
+export interface HandleArgs {
+  props: JVxeTableProps;
+  slots: any;
+  data: JVxeDataProps;
+  methods: JVxeTableMethods;
+  col?: JVxeColumn;
+  columns: JVxeColumn[];
+  renderOptions?: any;
+  enhanced?: JVxeComponent.Enhanced;
+}
+
+export function useColumns(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods, slots) {
+  data.vxeColumns = computed(() => {
+    // linkageConfig变化时也需要执行
+    const linkageConfig = toRaw(props.linkageConfig);
+    if (linkageConfig) {
+      // console.log(linkageConfig);
+    }
+    let columns: JVxeColumn[] = [];
+    if (isArray(props.columns)) {
+      // handle 方法参数
+      const args: HandleArgs = { props, slots, data, methods, columns };
+      let seqColumn, selectionColumn, expandColumn, dragSortColumn;
+
+      const handleColumn = (column: JVxeColumn, container: JVxeColumn[]) => {
+        // 排除未授权的列 1 = 显示/隐藏； 2 = 禁用
+        let auth = methods.getColAuth(column.key);
+        if (auth?.type == '1' && !auth.isAuth) {
+          return;
+        } else if (auth?.type == '2' && !auth.isAuth) {
+          column.disabled = true;
+        }
+        // type 不填，默认为 normal
+        if (column.type == null || isEmpty(column.type)) {
+          column.type = JVxeTypes.normal;
+        }
+        let col: JVxeColumn = cloneDeep(column);
+        // 处理隐藏列
+        if (col.type === JVxeTypes.hidden) {
+          return handleInnerColumn(args, col, handleHiddenColumn);
+        }
+        // 处理子级列
+        // 判断是否是分组列，如果当前是父级，则无需处理 render
+        if (Array.isArray(col.children) && col.children.length > 0) {
+          const children: JVxeColumn[] = [];
+          col.children.forEach((child: JVxeColumn) => handleColumn(child, children));
+          col.children = children;
+          container.push(col);
+          return;
+        }
+        // 组件未注册，自动设置为 normal
+        if (!isRegistered(col.type)) {
+          col.type = JVxeTypes.normal;
+        }
+        args.enhanced = getEnhanced(col.type);
+        args.col = col;
+        args.renderOptions = {
+          bordered: props.bordered,
+          disabled: props.disabled,
+          scrolling: data.scrolling,
+          isDisabledRow: methods.isDisabledRow,
+          listeners: {
+            trigger: (name, event) => methods.trigger(name, event),
+            valueChange: (event) => methods.trigger('valueChange', event),
+            /** 重新排序行 */
+            rowResort: (event) => {
+              methods.doSort(event.oldIndex, event.newIndex);
+              methods.trigger('dragged', event);
+            },
+            /** 在当前行下面插入一行 */
+            rowInsertDown: (rowIndex) => methods.insertRows({}, rowIndex + 1),
+          },
+        };
+        if (col.type === JVxeTypes.rowNumber) {
+          seqColumn = col;
+          container.push(col);
+        } else if (col.type === JVxeTypes.rowRadio || col.type === JVxeTypes.rowCheckbox) {
+          selectionColumn = col;
+          container.push(col);
+        } else if (col.type === JVxeTypes.rowExpand) {
+          expandColumn = col;
+          container.push(col);
+        } else if (col.type === JVxeTypes.rowDragSort) {
+          dragSortColumn = col;
+          container.push(col);
+        } else {
+          col.params = column;
+          args.columns = container;
+          handlerCol(args);
+        }
+      }
+
+      props.columns.forEach((column: JVxeColumn) => handleColumn(column, columns));
+
+      handleInnerColumn(args, seqColumn, handleSeqColumn);
+      handleInnerColumn(args, selectionColumn, handleSelectionColumn);
+      handleInnerColumn(args, expandColumn, handleExpandColumn);
+      handleInnerColumn(args, dragSortColumn, handleDragSortColumn, true);
+      // update-begin--author:liaozhiyang---date:2024-05-30---for【TV360X-371】不可编辑组件必填缺少*号
+      customComponentAddStar(columns);
+    }
+    return columns;
+  });
+}
+
+/**
+ * 2024-05-30
+ * liaozhiyang
+ * 不可编辑组件必填通过title人为加*号
+ */
+function customComponentAddStar(columns) {
+  columns.forEach((column) => {
+    const { params } = column;
+    if (params) {
+      const { validateRules, type } = params;
+      if (
+        validateRules?.length &&
+        [
+          JVxeTypes.checkbox,
+          JVxeTypes.radio,
+          JVxeTypes.upload,
+          JVxeTypes.progress,
+          JVxeTypes.departSelect,
+          JVxeTypes.userSelect,
+          JVxeTypes.image,
+          JVxeTypes.file,
+        ].includes(type)
+      ) {
+        if (validateRules.find((item) => item.required)) {
+          column.title = ` * ${column.title}`;
+        }
+      }
+    }
+  });
+}
+
+/** 处理内置列 */
+function handleInnerColumn(args: HandleArgs, col: JVxeColumn, handler: (args: HandleArgs) => void, assign?: boolean) {
+  let renderOptions = col?.editRender || col?.cellRender;
+  return handler({
+    ...args,
+    col: col,
+    renderOptions: assign ? Object.assign({}, args.renderOptions, renderOptions) : renderOptions,
+  });
+}
+
+/**
+ * 处理隐藏列
+ */
+function handleHiddenColumn({ col, columns }: HandleArgs) {
+  col!.params = cloneDeep(col);
+  delete col!.type;
+  col!.field = col!.key;
+  col!.visible = false;
+  columns.push(col!);
+}
+
+/**
+ * 处理行号列
+ */
+function handleSeqColumn({ props, col, columns }: HandleArgs) {
+  // 判断是否开启了行号列
+  if (props.rowNumber) {
+    let column = {
+      type: 'seq',
+      title: '#',
+      width: 60,
+      // 【QQYUN-8405】
+      fixed: props.rowNumberFixed,
+      align: 'center',
+    };
+    // 代码逻辑说明: 【QQYUN-8405】vxetable支持序号是否固定（移动端需要）
+    if (props.rowNumberFixed === 'none') {
+      delete column.fixed;
+    }
+    if (col) {
+      Object.assign(col, column);
+    } else {
+      columns.unshift(column as any);
+    }
+  }
+}
+
+/**
+ * 处理可选择列
+ */
+function handleSelectionColumn({ props, data, col, columns }: HandleArgs) {
+  // 判断是否开启了可选择行
+  // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑不显示checkbox
+  if (props.rowSelection && props.disabled == false) {
+    // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-1002】详情页面行编辑不显示checkbox
+    let width = 45;
+    if (data.statistics.has && !props.rowExpand && !props.dragSort) {
+      width = 60;
+    }
+    let column: any = {
+      type: props.rowSelectionType,
+      width: width,
+      fixed: 'left',
+      align: 'center',
+    };
+    // 代码逻辑说明: 【issues/1162】JVxeTable列过长（出现横向滚动条）时无法拖拽排序
+    if (props.rowSelectionFixed === 'none') {
+      delete column.fixed;
+    }
+    if (col) {
+      Object.assign(col, column);
+    } else {
+      columns.unshift(column as any);
+    }
+  }
+}
+
+/**
+ * 处理可展开行
+ */
+function handleExpandColumn({ props, data, col, columns }: HandleArgs) {
+  // 是否可展开行
+  if (props.rowExpand) {
+    let width = 40;
+    if (data.statistics.has && !props.dragSort) {
+      width = 60;
+    }
+    let column = {
+      type: 'expand',
+      title: '',
+      width: width,
+      fixed: 'left',
+      align: 'center',
+      slots: { content: 'expandContent' },
+    };
+    if (col) {
+      Object.assign(col, column);
+    } else {
+      columns.unshift(column as any);
+    }
+  }
+}
+
+/** 处理可排序列 */
+function handleDragSortColumn({ props, data, col, columns, renderOptions }: HandleArgs) {
+  // 是否可拖动排序
+  if (props.dragSort) {
+    let width = 40;
+    if (data.statistics.has) {
+      width = 60;
+    }
+    let column: any = {
+      title: '',
+      width: width,
+      fixed: 'left',
+      align: 'center',
+      // 代码逻辑说明: 【QQYUN-8785】online表单列位置的id未做限制，拖动其他列到id列上面，同步数据库时报错
+      params: {
+        insertRow: props.insertRow,
+        notAllowDrag: props.notAllowDrag,
+        ...col?.params,
+      },
+    };
+    // 代码逻辑说明: 【issues/1162】JVxeTable列过长（出现横向滚动条）时无法拖拽排序
+    if (props.dragSortFixed === 'none') {
+      delete column.fixed;
+    }
+    let cellRender = {
+      name: JVxeTypePrefix + JVxeTypes.rowDragSort,
+      sortKey: props.sortKey,
+    };
+    if (renderOptions) {
+      column.cellRender = Object.assign(renderOptions, cellRender);
+    } else {
+      column.cellRender = cellRender;
+    }
+    if (col) {
+      Object.assign(col, column);
+    } else {
+      columns.unshift(column);
+    }
+  }
+}
+
+/** 处理自定义组件列 */
+function handlerCol(args: HandleArgs) {
+  const { props, col, columns, enhanced } = args;
+  if (!col) return;
+  let { type } = col;
+  col.field = col.key;
+  delete col.type;
+  let renderName = 'cellRender';
+  // 渲染选项
+  let $renderOptions: any = { name: JVxeTypePrefix + type };
+  if (enhanced?.switches.editRender) {
+    if (!(enhanced.switches.visible || props.alwaysEdit)) {
+      renderName = 'editRender';
+    }
+    // $renderOptions.type = (enhanced.switches.visible || props.alwaysEdit) ? 'visible' : 'default'
+  }
+  col[renderName] = $renderOptions;
+  // 代码逻辑说明: 【QQYUN-5806】js增强改变下拉搜索options（添加customOptions为true不读字典，走自己的options）
+  !col.params.customOptions && handleDict(args);
+  handleRules(args);
+  handleStatistics(args);
+  handleSlots(args);
+  handleLinkage(args);
+  handleReloadEffect(args);
+
+  if (col.editRender) {
+    Object.assign(col.editRender, args.renderOptions);
+  }
+  if (col.cellRender) {
+    Object.assign(col.cellRender, args.renderOptions);
+  }
+
+  // slot 类型列：通过 titlePrefix 在表头显示编辑图标（不能用 editRender，否则非编辑状态下 cellRender 会被绕过）
+  if (col.params.type === JVxeTypes.slot && col.cellRender && !col.editRender) {
+    col.titlePrefix = { icon: 'vxe-table-icon-edit' };
+  }
+
+  columns.push(col);
+}
+
+/**
+ * 处理字典
+ */
+async function handleDict({ col, methods }: HandleArgs) {
+  if (col && col.params.dictCode) {
+    /** 加载数据字典并合并到 options */
+    try {
+      // 查询字典
+      if (!isPromise(col.params.optionsPromise)) {
+        col.params.optionsPromise = new Promise(async (resolve) => {
+          // 代码逻辑说明: VUEN-1180 【代码生成】子表不支持带条件？
+          let dictCodeString = col.params.dictCode;
+          if (dictCodeString) {
+            dictCodeString = encodeURI(dictCodeString);
+          }
+          const dictOptions: any = await initDictOptions(dictCodeString);
+          let options = col.params.options ?? [];
+          dictOptions.forEach((dict) => {
+            // 过滤重复数据
+            if (options.findIndex((o) => o.value === dict.value) === -1) {
+              options.push(dict);
+            }
+          });
+          resolve(options);
+        });
+      }
+      col.params.options = await col.params.optionsPromise;
+      await nextTick();
+      await methods.getXTable().updateData();
+    } catch (e) {
+      console.group(`[JVxeTable] 查询字典 "${col.params.dictCode}" 时发生异常！`);
+      console.warn(e);
+      console.groupEnd();
+    }
+  }
+}
+
+/**
+ * 处理校验
+ */
+function handleRules(args: HandleArgs) {
+  if (isArray(args.col?.validateRules)) {
+    useValidateRules(args);
+  }
+}
+
+/**
+ * 处理统计列
+ */
+function handleStatistics({ col, data }: HandleArgs) {
+  // sum = 求和、average = 平均值
+  if (col && isArray(col.statistics)) {
+    data.statistics.has = true;
+    col.statistics.forEach((item) => {
+      if (!isEmpty(item)) {
+        let arr = data.statistics[(item as string).toLowerCase()];
+        if (isArray(arr)) {
+          pushIfNotExist(arr, col.key);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * 处理插槽
+ */
+function handleSlots({ slots, col, renderOptions }: HandleArgs) {
+  // slot 组件特殊处理
+  if (col && col.params.type === JVxeTypes.slot) {
+    if (!isEmpty(col.slotName) && slots.hasOwnProperty(col.slotName)) {
+      renderOptions.slot = slots[col.slotName];
+    }
+  }
+}
+
+/** 处理联动列 */
+function handleLinkage({ data, col, renderOptions, methods }: HandleArgs) {
+  // 处理联动列，联动列只能作用于 select 组件
+  if (col && col.params.type === JVxeTypes.select && data.innerLinkageConfig != null) {
+    // 判断当前列是否是联动列
+    if (data.innerLinkageConfig.has(col.key)) {
+      renderOptions.linkage = {
+        config: data.innerLinkageConfig.get(col.key),
+        getLinkageOptionsAsync: methods.getLinkageOptionsAsync,
+        getLinkageOptionsSibling: methods.getLinkageOptionsSibling,
+        handleLinkageSelectChange: methods.handleLinkageSelectChange,
+      };
+    }
+  }
+}
+
+function handleReloadEffect({ props, data, renderOptions }: HandleArgs) {
+  renderOptions.reloadEffect = {
+    enabled: props.reloadEffect,
+    getMap() {
+      return data.reloadEffectRowKeysMap;
+    },
+    isEffect(rowId) {
+      return data.reloadEffectRowKeysMap[rowId] === true;
+    },
+    removeEffect(rowId) {
+      return (data.reloadEffectRowKeysMap[rowId] = false);
+    },
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useColumnsCache.ts b/src/components/jeecg/JVxeTable/src/hooks/useColumnsCache.ts
new file mode 100644
index 0000000..1f5a761
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useColumnsCache.ts
@@ -0,0 +1,105 @@
+import { computed } from 'vue';
+import { router } from '/@/router';
+import { createLocalStorage } from '/@/utils/cache';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export function useColumnsCache({ cacheColumnsKey, refs }: any) {
+  const $ls = createLocalStorage();
+  const { createMessage: $message } = useMessage();
+  const cacheKey = computed(() => {
+    const path = router.currentRoute.value.fullPath;
+    let key = path.replace(/[\/\\]/g, '_');
+    if (cacheColumnsKey) {
+      key += ':' + cacheColumnsKey;
+    }
+    return 'vxe-columnCache:' + key;
+  });
+  const initSetting = (props) => {
+    const columnCache = $ls.get(cacheKey.value);
+    if (columnCache) {
+      columnCache.forEach((key) => {
+        const column = props.columns.find((item) => item.key === key);
+        if (column) {
+          column.visible = false;
+        }
+      });
+    }
+  };
+  // const initSetting = (refs) => {
+  //   let columnCache = $ls.get(cacheKey.value);
+  //   if (columnCache) {
+  //     const $grid = refs.gridRef.value!.getRefMaps().refTable.value;
+  //     console.log('refs.gridRef', $grid);
+  //     const { fullColumn } = $grid.getTableColumn();
+  //     const hideColumns = getHideColumn(fullColumn, columnCache);
+  //     if (hideColumns?.length) {
+  //       hideColumns.forEach((column) => {
+  //         $grid.hideColumn(column);
+  //       });
+  //     }
+  //   }
+  //   console.log(columnCache);
+  // };
+  function saveSetting($grid: any) {
+    console.log($grid);
+    const { fullColumn, visibleColumn } = $grid.getTableColumn();
+    const hideColumnKey = getHideColumnKey(fullColumn, visibleColumn);
+    if (hideColumnKey.length) {
+      $ls.set(cacheKey.value, hideColumnKey);
+      $message.success('保存成功');
+    }
+  }
+  const resetSetting = ($grid) => {
+    const columnCache = $ls.get(cacheKey.value);
+    if (columnCache) {
+      const { fullColumn } = $grid.getTableColumn();
+      const hideColumns = getHideColumn(fullColumn, columnCache);
+      if (hideColumns?.length) {
+        hideColumns.forEach((column) => {
+          if (columnCache.includes(column?.params?.key)) {
+            $grid.showColumn(column);
+          }
+        });
+      }
+    }
+    $ls.remove(cacheKey.value);
+    $message.success('重置成功');
+  };
+  const getHideColumn = (fullColumn, columnCache) => {
+    const result: any = [];
+    if (columnCache?.length) {
+    console.log('--fullColumn:',fullColumn);
+      columnCache.forEach((key) => {
+        const column = fullColumn.find((item) => item?.params?.key === key);
+        if (column) {
+          result.push(column);
+        }
+      });
+    }
+    return result;
+  };
+  const getHideColumnKey = (fullColumn, visibleColumn) => {
+    const reuslt: any = [];
+    if (fullColumn.length === visibleColumn.length) {
+      return reuslt;
+    } else {
+      fullColumn.forEach((item) => {
+        const fKey = item?.params?.key;
+        if (fKey) {
+          const vItem = visibleColumn.find((item) => {
+            return item?.params?.key === fKey;
+          });
+          if (!vItem) {
+            reuslt.push(fKey);
+          }
+        }
+      });
+      return reuslt;
+    }
+  };
+  return {
+    initSetting,
+    resetSetting,
+    saveSetting,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useData.ts b/src/components/jeecg/JVxeTable/src/hooks/useData.ts
new file mode 100644
index 0000000..64e4523
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useData.ts
@@ -0,0 +1,112 @@
+import { ref, reactive, provide, resolveComponent } from 'vue';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { JVxeDataProps, JVxeRefs, JVxeTableProps } from '../types';
+import { VxeGridInstance } from 'vxe-table';
+import { randomString } from '/@/utils/common/compUtils';
+
+export function useData(props: JVxeTableProps): JVxeDataProps {
+  const { prefixCls } = useDesign('j-vxe-table');
+  provide('prefixCls', prefixCls);
+  return {
+    prefixCls: prefixCls,
+    caseId: `j-vxe-${randomString(8)}`,
+    vxeDataSource: ref([]),
+    scroll: reactive({ top: 0, left: 0 }),
+    scrolling: ref(false),
+    defaultVxeProps: reactive({
+      // rowId: props.rowKey,
+      rowConfig: {
+        keyField: props.rowKey,
+        // 高亮hover的行
+        isHover: true,
+      },
+
+      // --- 【issues/209】自带的tooltip会错位，所以替换成原生的title ---
+      // 溢出隐藏并显示tooltip
+      showOverflow: "title",
+      // 表头溢出隐藏并显示tooltip
+      showHeaderOverflow: "title",
+      // --- 【issues/209】自带的tooltip会错位，所以替换成原生的title ---
+
+      showFooterOverflow: true,
+      // 可编辑配置
+      editConfig: {
+        trigger: 'click',
+        mode: 'cell',
+        //activeMethod: () => !props.disabled,
+        beforeEditMethod: () => !props.disabled,
+      },
+      expandConfig: {
+        iconClose: 'vxe-icon-arrow-right',
+        iconOpen: 'vxe-icon-arrow-down',
+        ...props.expandConfig,
+      },
+      // 虚拟滚动配置，y轴大于xx条数据时启用虚拟滚动
+      scrollY: {
+        gt: 30,
+      },
+      scrollX: {
+        gt: 20,
+        // 暂时关闭左右虚拟滚动
+        enabled: false,
+      },
+      radioConfig: {
+        // 保留勾选状态
+        reserve: true,
+        highlight: true,
+      },
+      checkboxConfig: {
+        // 保留勾选状态
+        reserve: true,
+        highlight: true,
+      },
+      // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      // 禁止点击表格外部时清空校验状态，避免每次点击空白区域触发 reactData.validErrorMaps={} 导致不必要的重渲染
+      validConfig: {
+        autoClear: false,
+      },
+      // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      keyboardConfig: {
+        // 删除键功能
+        isDel: false,
+        // Esc键关闭编辑功能
+        isEsc: true,
+        // Tab 键功能
+        isTab: true,
+        // 任意键进入编辑（功能键除外）
+        isEdit: true,
+        // 方向键功能
+        isArrow: true,
+        // 回车键功能
+        isEnter: true,
+        // 如果功能被支持，用于 column.type=checkbox|radio，开启空格键切换复选框或单选框状态功能
+        isChecked: true,
+      },
+    }),
+    selectedRows: ref<any[]>([]),
+    selectedRowIds: ref<string[]>([]),
+    disabledRowIds: [],
+    statistics: reactive({
+      has: false,
+      sum: [],
+      average: [],
+    }),
+    authsMap: ref(null),
+    innerEditRules: {},
+    innerLinkageConfig: new Map<string, any>(),
+    reloadEffectRowKeysMap: reactive({}),
+  };
+}
+
+export function useRefs(): JVxeRefs {
+  return {
+    gridRef: ref<VxeGridInstance>(),
+    subPopoverRef: ref<any>(),
+    detailsModalRef: ref<any>(),
+  };
+}
+
+export function useResolveComponent(...t: any[]): any {
+  // @ts-ignore
+  return resolveComponent(...t);
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts b/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts
new file mode 100644
index 0000000..db0afd8
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts
@@ -0,0 +1,37 @@
+import { nextTick, watch } from 'vue';
+import { JVxeDataProps, JVxeRefs, JVxeTableMethods } from '../types';
+
+export function useDataSource(props, data: JVxeDataProps, methods: JVxeTableMethods, refs: JVxeRefs) {
+  watch(
+    () => props.dataSource,
+    async () => {
+      data.disabledRowIds = [];
+      // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      data.vxeDataSource.value = props.dataSource.map(row => ({ ...row }));
+      // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      data.vxeDataSource.value.forEach((row, rowIndex) => {
+        // 判断是否是禁用行
+        if (methods.isDisabledRow(row, rowIndex)) {
+          data.disabledRowIds.push(row.id);
+        }
+        // 处理联动回显数据
+        methods.handleLinkageBackData(row);
+      });
+      await waitRef(refs.gridRef);
+      methods.recalcSortNumber();
+    },
+    { immediate: true }
+  );
+}
+
+function waitRef($ref) {
+  return new Promise<any>((resolve) => {
+    (function next() {
+      if ($ref.value) {
+        resolve($ref);
+      } else {
+        nextTick(() => next());
+      }
+    })();
+  });
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useDragSort.ts b/src/components/jeecg/JVxeTable/src/hooks/useDragSort.ts
new file mode 100644
index 0000000..0ff8fe1
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useDragSort.ts
@@ -0,0 +1,146 @@
+import { onMounted, onUnmounted, nextTick, watch } from 'vue';
+import { JVxeTableMethods, JVxeTableProps } from '/@/components/jeecg/JVxeTable/src/types';
+import Sortable from 'sortablejs';
+import { isEnabledVirtualYScroll } from '/@/components/jeecg/JVxeTable/utils';
+
+export function useDragSort(props: JVxeTableProps, methods: JVxeTableMethods) {
+  if (props.dragSort) {
+    let sortable2: Sortable;
+    let initTime: any;
+
+    onMounted(() => {
+      // 加载完成之后再绑定拖动事件
+      initTime = setTimeout(createSortable, 300);
+    });
+
+    onUnmounted(() => {
+      clearTimeout(initTime);
+      if (sortable2) {
+        sortable2.destroy();
+      }
+    });
+    // update-begin--author:liaozhiyang---date:20260415---for:【QQYUN-15134】修复jvxetable使用fixed固定后无法拖拽
+    // 代码逻辑说明：监听 maxHeight 变化（弹窗全屏↔缩小切换时触发）。
+    // 解决：maxHeight 变化时销毁旧 Sortable 并重新初始化，让其绑定到正确的 tbody。
+    watch(
+      () => props.maxHeight,
+      () => {
+        if (sortable2) {
+          sortable2.destroy();
+          sortable2 = null as any;
+        }
+        clearTimeout(initTime);
+        initTime = setTimeout(createSortable, 300);
+      }
+    );
+
+    function createSortable() {
+      let xTable = methods.getXTable();
+      // 代码逻辑说明：拖拽排序列默认 fixed:left，此时 drag-btn 在固定列 wrapper 的 tbody 内。
+      // 若 dragSortFixed!='none'，优先绑定固定列 wrapper 的 tbody，确保 Sortable 能捕获拖拽事件；
+      // 若 dragSortFixed='none'（拖拽列不固定），则绑定主 tbody。
+      const domFixed =
+        props.dragSortFixed !== 'none'
+          ? xTable.$el.querySelector('.vxe-table--fixed-left-wrapper .vxe-table--body tbody')
+          : null;
+      const domMain = xTable.$el.querySelector('.vxe-table--body-inner-wrapper > .vxe-table--body tbody');
+      const dom = domFixed || domMain;
+      if (!dom) {
+        console.warn('[JVxeTable] 拖拽排序初始化失败，可能是vxe-table升级导致的版本不兼容。');
+        return;
+      }
+
+      // 拖拽过程中悬停目标行的 DOM 索引（由 onMove 实时更新）
+      let hoverIndex = -1;
+      // 拖拽起始行的 DOM 索引（用于 onMove 中判断是否悬停自身）
+      let dragStartIndex = -1;
+
+      /**
+       * 为所有 tbody 中第 idx 行（0-based）添加或移除 CSS class。
+       * 用于跨主体 + 固定列 wrapper 同步视觉状态，避免只改一侧 tbody 导致样式不一致。
+       */
+      function setRowClass(idx: number, cls: string, add: boolean) {
+        xTable.$el.querySelectorAll(`.vxe-table--body tbody tr:nth-child(${idx + 1})`).forEach((tr) => {
+          (tr as HTMLElement).classList[add ? 'add' : 'remove'](cls);
+        });
+      }
+      /** 清除所有带有指定 class 的行 */
+      function clearRowClass(cls: string) {
+        xTable.$el.querySelectorAll(`.${cls}`).forEach((tr) => {
+          (tr as HTMLElement).classList.remove(cls);
+        });
+      }
+
+      sortable2 = Sortable.create(dom as HTMLElement, {
+        handle: '.drag-btn',
+        // 代码逻辑说明: 【QQYUN-8785】online表单列位置的id未做限制，拖动其他列到id列上面，同步数据库时报错
+        filter: '.not-allow-drag',
+        draggable: '.allow-drag',
+        direction: 'vertical',
+        animation: 0,
+        onStart(e) {
+          // 初始化悬停索引为起始位置，并为被拖起的行添加禁用效果
+          hoverIndex = e.oldIndex!;
+          dragStartIndex = e.oldIndex!;
+          setRowClass(e.oldIndex!, 'j-vxe-drag-source', true);
+        },
+        onMove(e) {
+          // 代码逻辑说明：拖拽期间只记录悬停目标的 DOM 索引，阻止 Sortable 实时交换行位置。
+          // 好处：所有 tbody（主体 + 固定列 wrapper）在松手之前均保持原顺序，不会产生视觉错位；
+          // 松开鼠标后统一由 vxe-table 数据驱动重渲染，fixed 列拖拽排序问题彻底解决。
+          const idx = Array.from((e.from as HTMLElement).children).indexOf(e.related as HTMLElement);
+          if (idx !== -1) {
+            hoverIndex = idx;
+          }
+          // 更新悬停行指示线：先清除旧状态，悬停自身时不显示
+          clearRowClass('j-vxe-drag-hover-top');
+          clearRowClass('j-vxe-drag-hover-bottom');
+          if (hoverIndex !== dragStartIndex) {
+            // 向下拖（插入悬停行下方）→ 底部线；向上拖（插入悬停行上方）→ 顶部线
+            const cls = hoverIndex > dragStartIndex ? 'j-vxe-drag-hover-bottom' : 'j-vxe-drag-hover-top';
+            setRowClass(hoverIndex, cls, true);
+          }
+          return false; // 阻止 Sortable 移动 DOM 行
+        },
+        onEnd(e: any) {
+          // 拖拽结束，清除所有视觉状态
+          clearRowClass('j-vxe-drag-source');
+          clearRowClass('j-vxe-drag-hover-top');
+          clearRowClass('j-vxe-drag-hover-bottom');
+          // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-585】拖动字段虚拟滚动不好使
+          const isRealEnabledVirtual = isEnabledVirtualYScroll(props, xTable);
+          let newIndex: number;
+          let oldIndex: number;
+
+          if (isRealEnabledVirtual) {
+            // 虚拟滚动：onMove 返回 false 后 DOM 行未动，e.item 就是被拖拽行本身
+            const dragNode = e.item as HTMLElement;
+            const dragRowInfo = xTable.getRowNode(dragNode);
+            if (!dragRowInfo) return;
+            oldIndex = dragRowInfo.index;
+            if (hoverIndex === e.oldIndex) return;
+
+            // 通过 hoverIndex 对应的可视区 DOM 节点获取实际数据索引
+            const hoverNode = (e.from as HTMLElement).childNodes[hoverIndex] as HTMLElement;
+            if (!hoverNode) return;
+            const hoverRowInfo = xTable.getRowNode(hoverNode);
+            if (!hoverRowInfo) return;
+            newIndex = hoverRowInfo.index;
+          } else {
+            // 非虚拟滚动：DOM 行从未移动，直接使用 hoverIndex 作为目标索引，无需还原 DOM
+            oldIndex = e.oldIndex;
+            newIndex = hoverIndex;
+            if (oldIndex === newIndex) return;
+          }
+          // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-585】拖动字段虚拟滚动不好使
+
+          nextTick(() => {
+            methods.doSort(oldIndex, newIndex);
+            methods.trigger('dragged', { oldIndex: oldIndex, newIndex: newIndex });
+          });
+        },
+      });
+    }
+    // update-begin--author:liaozhiyang---date:20260415---for:【QQYUN-15134】修复jvxetable使用fixed固定后无法拖拽
+  }
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts b/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts
new file mode 100644
index 0000000..9314d66
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts
@@ -0,0 +1,132 @@
+import { unref, computed, ref, watch, nextTick } from 'vue';
+import { merge, debounce } from 'lodash-es';
+import { isArray } from '/@/utils/is';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+import { useKeyboardEdit } from '../hooks/useKeyboardEdit';
+import { JVxeDataProps, JVxeTableMethods, JVxeTableProps } from '../types';
+
+export function useFinallyProps(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods) {
+  const attrs = useAttrs();
+  // vxe 键盘操作配置
+  const { keyboardEditConfig } = useKeyboardEdit(props);
+  // vxe 最终 editRules
+  const vxeEditRules = computed(() => merge({}, props.editRules, data.innerEditRules));
+  // vxe 最终 events
+  const vxeEvents = computed(() => {
+    let listeners = { ...unref(attrs) };
+    let events = {
+      onScroll: methods.handleVxeScroll,
+      onCellClick: methods.handleCellClick,
+      onEditClosed: methods.handleEditClosed,
+      onEditActived: methods.handleEditActived,
+      onRadioChange: methods.handleVxeRadioChange,
+      onCheckboxAll: methods.handleVxeCheckboxAll,
+      onCheckboxChange: methods.handleVxeCheckboxChange,
+      // 代码逻辑说明: 【QQYUN-8566】JVXETable无法记住列设置
+      onCustom: methods.handleCustom,
+    };
+    // 用户传递的事件，进行合并操作
+    Object.keys(listeners).forEach((key) => {
+      let listen = listeners[key];
+      if (events.hasOwnProperty(key)) {
+        if (isArray(listen)) {
+          listen.push(events[key]);
+        } else {
+          listen = [events[key], listen];
+        }
+      }
+      events[key] = listen;
+    });
+    return events;
+  });
+
+  // vxe 最终 props
+  const vxePropsMerge = computed(() => {
+    // 代码逻辑说明: 【QQYUN-8785】online表单列位置的id未做限制，拖动其他列到id列上面，同步数据库时报错
+    let rowClass = {};
+    if (props.dragSort) {
+      rowClass = {
+        rowClassName: (params) => {
+          let { row } = params;
+          const find = props.notAllowDrag?.find((item:any) => {
+            const {key, value} = item;
+            return row[key] == value;
+          });
+          // 业务传进的来的rowClassName
+          const popsRowClassName = props.rowClassName ?? '';
+          let outClass = '';
+          if(typeof popsRowClassName==='string'){
+            popsRowClassName && (outClass = popsRowClassName);
+          }else if(typeof popsRowClassName==='function'){
+            outClass = popsRowClassName(params)
+          }
+          return find ? `not-allow-drag ${outClass}` : `allow-drag ${outClass}`;
+        },
+      };
+    }
+    return merge(
+      {},
+      data.defaultVxeProps,
+      {
+        showFooter: data.statistics.has,
+      },
+      unref(attrs),
+      {
+        ref: 'gridRef',
+        size: props.size,
+        loading: false,
+        disabled: props.disabled,
+        // columns: unref(data.vxeColumns),
+        editRules: unref(vxeEditRules),
+        height: props.height === 'auto' ? null : props.height,
+        maxHeight: props.maxHeight,
+        // 代码逻辑说明: 【QQYUN-5133】JVxeTable 行编辑升级
+        scrollY: props.scrollY,
+        scrollX: props.scrollX,
+        border: props.bordered,
+        footerMethod: methods.handleFooterMethod,
+        // 展开行配置
+        expandConfig: {
+          toggleMethod: methods.handleExpandToggleMethod,
+        },
+        // 可编辑配置
+        editConfig: {
+          //activeMethod: methods.handleActiveMethod,
+          beforeEditMethod: methods.handleActiveMethod,
+        },
+        radioConfig: {
+          checkMethod: methods.handleCheckMethod,
+        },
+        checkboxConfig: {
+          checkMethod: methods.handleCheckMethod,
+        },
+        ...rowClass
+        // rowClassName:(params)=>{
+        //   const { row } = params;
+        //   return row.dbFieldName=='id'?"not-allow-drag":"allow-drag"
+        // }
+      },
+      unref(vxeEvents),
+      unref(keyboardEditConfig)
+    );
+  });
+
+  const vxeColumnsRef = ref(data.vxeColumns!.value || [])
+  const watchColumnsDebounce = debounce(async () => {
+    vxeColumnsRef.value = data.vxeColumns!.value
+  }, 50)
+  watch(data.vxeColumns!, watchColumnsDebounce)
+
+  const vxeProps = computed(() => {
+    return {
+      ...unref(vxePropsMerge),
+      // 【issue/8695】单独抽出 columns，防止性能问题
+      columns: unref(vxeColumnsRef),
+    }
+  });
+
+  return {
+    vxeProps,
+    prefixCls: data.prefixCls,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts
new file mode 100644
index 0000000..e870b83
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts
@@ -0,0 +1,318 @@
+import { computed, nextTick, ref, unref, watch } from 'vue';
+import { propTypes } from '/@/utils/propTypes';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { getEnhanced, replaceProps } from '../utils/enhancedUtils';
+import { vModel } from '/@/components/jeecg/JVxeTable/utils';
+import { JVxeRenderType } from '../types/JVxeTypes';
+import { isBoolean, isFunction, isObject, isPromise } from '/@/utils/is';
+import { JVxeComponent } from '../types/JVxeComponent';
+import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
+import { getAreaTextByCode } from "@/components/Form/src/utils/Area";
+
+export function useJVxeCompProps() {
+  return {
+    // 组件类型
+    type: propTypes.string,
+    // 渲染类型
+    renderType: propTypes.string.def('default'),
+    // 渲染参数
+    params: propTypes.object,
+    // 渲染自定义选项
+    renderOptions: propTypes.object,
+  };
+}
+
+export function useJVxeComponent(props: JVxeComponent.Props) {
+  const value = computed(() => {
+    // 代码逻辑说明: 【QQYUN-9125】oracle数据库日期类型字段会默认带上时分秒
+    const val = props.params.row[props.params.column.property];
+    if (props.type === 'date' && typeof val === 'string') {
+      return val.split(' ').shift();
+    } else {
+      return val;
+    }
+  });
+  const innerValue = ref(value.value);
+  const row = computed(() => props.params.row);
+  const rows = computed(() => props.params.data);
+  const column = computed(() => props.params.column);
+  // 用户配置的原始 column
+  const originColumn = computed(() => column.value.params);
+  const rowIndex = computed(() => props.params._rowIndex);
+  const columnIndex = computed(() => props.params._columnIndex);
+  // 表格数据长度
+  const fullDataLength = computed(() => props.params.$table.internalData.tableFullData.length);
+  // 是否正在滚动中
+  const scrolling = computed(() => !!props.renderOptions.scrolling);
+  // 当有formatter时，优先使用formatter
+  const innerLabel = computed(() => {
+    if(typeof column.value?.formatter === 'function'){
+      return column.value.formatter({
+        cellValue: innerValue.value,
+        row: row.value,
+        column: column.value,
+      });
+    }
+    return innerValue.value
+  });
+  const cellProps = computed(() => {
+    let renderOptions = props.renderOptions;
+    let col = originColumn.value;
+
+    let cellProps = {};
+
+    // 输入占位符
+    cellProps['placeholder'] = replaceProps(col, col.placeholder);
+
+    // 解析props
+    if (isObject(col.props)) {
+      Object.keys(col.props).forEach((key) => {
+        cellProps[key] = replaceProps(col, col.props[key]);
+      });
+    }
+
+    // 判断是否是禁用的列
+    cellProps['disabled'] = isBoolean(col['disabled']) ? col['disabled'] : cellProps['disabled'];
+    // 判断是否禁用行
+    if (renderOptions.isDisabledRow(row.value, rowIndex.value)) {
+      cellProps['disabled'] = true;
+    }
+    // 代码逻辑说明: 【TV360X-291】没勾选同步数据库禁用排序功能
+    if (col.props && col.props.isDisabledCell) {
+      if (col.props.isDisabledCell({ row: row.value, rowIndex: rowIndex.value, column: col, columnIndex: columnIndex.value })) {
+        cellProps['disabled'] = true;
+      }
+    }
+    // 判断是否禁用所有组件
+    if (renderOptions.disabled === true) {
+      cellProps['disabled'] = true;
+      // 代码逻辑说明: 【TV360X-1068】行编辑整体禁用时上传按钮不显示
+      cellProps['disabledTable'] = true;
+    }
+    // 代码逻辑说明: VUEN-1111 一对多子表 部门选择 不应该级联
+    if (col.checkStrictly === true) {
+      cellProps['checkStrictly'] = true;
+    }
+
+    // 代码逻辑说明: 用户组件 控制单选多选新的参数配置
+    if (col.isRadioSelection === true) {
+      cellProps['isRadioSelection'] = true;
+    } else if (col.isRadioSelection === false) {
+      cellProps['isRadioSelection'] = false;
+    }
+
+    return cellProps;
+  });
+
+  const listeners = computed(() => {
+    let listeners = Object.assign({}, props.renderOptions.listeners || {});
+    // 默认change事件
+    if (!listeners.change) {
+      listeners.change = async (event) => {
+        vModel(event.value, row, column);
+        await nextTick();
+        // 处理 change 事件相关逻辑（例如校验）
+        props.params.$table.updateStatus(props.params);
+      };
+    }
+    return listeners;
+  });
+  const context = {
+    innerLabel,
+    innerValue,
+    row,
+    rows,
+    rowIndex,
+    column,
+    columnIndex,
+    originColumn,
+    fullDataLength,
+    cellProps,
+    scrolling,
+    handleChangeCommon,
+    handleBlurCommon,
+  };
+  const ctx = { props, context };
+
+  // 获取组件增强
+  let enhanced = getEnhanced(props.type);
+
+  watch(
+    value,
+    (newValue) => {
+      // -update-begin--author:liaozhiyang---date:20241210---for：【issues/7497】隐藏某一列后，字典没翻译，恢复后正常
+      // TODO 先这样修复解决问题，根因后期再看看
+      // enhanced = getEnhanced(props.type);
+      // -update-end--author:liaozhiyang---date:20241210---for：【issues/7497】隐藏某一列后，字典没翻译，恢复后
+      // 解决online中对同一条数据点击编辑多次他表字段变成空格的问题
+      if (props.type === 'input' && originColumn.value.flag === 'link-table-field' && (newValue === undefined || newValue === null)) {
+        return;
+      }
+      // 验证值格式
+      let getValue = enhanced.getValue(newValue, ctx);
+      if (newValue !== getValue) {
+        // 值格式不正确，重新赋值
+        newValue = getValue;
+        vModel(newValue, row, column);
+      }
+      innerValue.value = enhanced.setValue(newValue, ctx);
+      // 代码逻辑说明: 【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+      if (props.type === 'date' && props.renderType === JVxeRenderType.spaner && enhanced.translate.enabled === true) {
+        if (isFunction(enhanced.translate.handler)) {
+          innerValue.value = enhanced.translate.handler(newValue, ctx);
+        }
+        return;
+      }
+
+      // 代码逻辑说明: 【issues/7203】自动生成一对多表单代码中，省市区回显问题---
+      if (props.type === 'pca' && props.renderType === JVxeRenderType.spaner) {
+        innerValue.value = getAreaTextByCode(newValue);
+        return;
+      }
+
+      // 判断是否启用翻译
+      if (props.renderType === JVxeRenderType.spaner && enhanced.translate.enabled === true) {
+        if (isFunction(enhanced.translate.handler)) {
+          let res = enhanced.translate.handler(newValue, ctx);
+          // 异步翻译，可解决字典查询慢的问题
+          if (isPromise(res)) {
+            res.then((v) => (innerValue.value = v));
+          } else {
+            innerValue.value = res;
+          }
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  /** 通用处理 change 事件 */
+  function handleChangeCommon($value, force = false) {
+    const newValue = enhanced.getValue($value, ctx);
+    const oldValue = value.value;
+    // 代码逻辑说明: 【issues-5025】JVueTable的事件 @valueChange重复触发问题
+    const execute = force ? true : newValue !== oldValue;
+    if (execute) {
+      trigger('change', { value: newValue });
+      // 触发valueChange事件
+      parentTrigger('valueChange', {
+        type: props.type,
+        value: newValue,
+        oldValue: oldValue,
+        col: originColumn.value,
+        rowIndex: rowIndex.value,
+        columnIndex: columnIndex.value,
+      });
+    }
+  }
+
+  /** 通用处理 blur 事件 */
+  function handleBlurCommon($value) {
+    // 代码逻辑说明: 【issues/636】JVxeTable加上blur事件
+    const newValue = enhanced.getValue($value, ctx);
+    const oldValue = value.value;
+    //trigger('blur', { value });
+    // 触发blur事件
+    parentTrigger('blur', {
+      type: props.type,
+      value: newValue,
+      oldValue: oldValue,
+      col: originColumn.value,
+      rowIndex: rowIndex.value,
+      columnIndex: columnIndex.value,
+    });
+  }
+
+  /**
+   * 如果事件存在的话，就触发
+   * @param name 事件名
+   * @param event 事件参数
+   * @param args 其他附带参数
+   */
+  function trigger(name, event?, args: any[] = []) {
+    let listener = listeners.value[name];
+    if (isFunction(listener)) {
+      if (isObject(event)) {
+        event = packageEvent(name, event);
+      }
+      listener(event, ...args);
+    }
+  }
+
+  function parentTrigger(name, event, args: any[] = []) {
+    args.unshift(packageEvent(name, event));
+    trigger('trigger', name, args);
+  }
+
+  function packageEvent(name, event: any = {}) {
+    event.row = row.value;
+    event.column = column.value;
+    // online增强参数兼容
+    event.column['key'] = column.value['property'];
+    // event.cellTarget = this
+    if (!event.type) {
+      event.type = name;
+    }
+    if (!event.cellType) {
+      event.cellType = props.type;
+    }
+    // 是否校验表单，默认为true
+    if (isBoolean(event.validate)) {
+      event.validate = true;
+    }
+    return event;
+  }
+
+  /**
+   * 防样式冲突类名生成器
+   * @param scope
+   */
+  function useCellDesign(scope: string) {
+    return useDesign(`vxe-cell-${scope}`);
+  }
+
+  return {
+    ...context,
+    enhanced,
+    trigger,
+    useCellDesign,
+  };
+}
+
+/**
+ * 获取组件默认增强
+ */
+export function useDefaultEnhanced(): JVxeComponent.EnhancedPartial {
+  return {
+    installOptions: {
+      autofocus: '',
+    },
+    interceptor: {
+      'event.clearActived': () => true,
+      'event.clearActived.className': () => true,
+    },
+    switches: {
+      editRender: true,
+      visible: false,
+    },
+    aopEvents: {
+      editActived() {},
+      editClosed() {},
+      activeMethod: () => true,
+    },
+    translate: {
+      enabled: false,
+      handler(value, ctx) {
+        // 默认翻译方法
+        if (ctx) {
+          return filterDictText(unref(ctx.context.column).params.options, value);
+        } else {
+          return value;
+        }
+      },
+    },
+    getValue: (value) => value,
+    setValue: (value) => value,
+    createValue: (defaultValue) => defaultValue,
+  } as JVxeComponent.Enhanced;
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useKeyboardEdit.ts b/src/components/jeecg/JVxeTable/src/hooks/useKeyboardEdit.ts
new file mode 100644
index 0000000..a6bb9b9
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useKeyboardEdit.ts
@@ -0,0 +1,37 @@
+/*
+ * JVxeTable 键盘操作
+ */
+import type { VxeTablePropTypes } from 'vxe-table';
+import type { JVxeTableProps } from '../types';
+import { computed } from 'vue';
+
+/**
+ * JVxeTable 键盘操作
+ *
+ * @param props
+ */
+export function useKeyboardEdit(props: JVxeTableProps) {
+  // 是否开启了键盘操作
+  const enabledKeyboard = computed(() => props.keyboardEdit ?? false);
+  // 重写 keyboardConfig
+  const keyboardConfig: VxeTablePropTypes.KeyboardConfig = {
+    editMethod({ row, column, $table }) {
+      // 重写默认的覆盖式，改为追加式
+      $table.setActiveCell(row, column);
+      return true;
+    },
+  };
+  // 键盘操作配置
+  const keyboardEditConfig = computed(() => {
+    return {
+      mouseConfig: {
+        selected: enabledKeyboard.value,
+      },
+      keyboardConfig,
+    };
+  });
+
+  return {
+    keyboardEditConfig,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useLinkage.ts b/src/components/jeecg/JVxeTable/src/hooks/useLinkage.ts
new file mode 100644
index 0000000..f5916d1
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useLinkage.ts
@@ -0,0 +1,145 @@
+import { watch } from 'vue';
+import { isFunction, isPromise, isArray } from '/@/utils/is';
+import { JVxeColumn, JVxeDataProps, JVxeTableProps, JVxeLinkageConfig } from '../types';
+
+/**
+ * 多级联动
+ */
+export function useLinkage(props: JVxeTableProps, data: JVxeDataProps, methods) {
+  // 整理多级联动配置
+  watch(
+    () => props.linkageConfig,
+    (linkageConfig: JVxeLinkageConfig[]) => {
+      data.innerLinkageConfig.clear();
+      if (isArray(linkageConfig) && linkageConfig.length > 0) {
+        linkageConfig.forEach((config) => {
+          let keys = getLinkageKeys(config.key, []);
+          // 多个key共享一个，引用地址
+          let configItem = {
+            ...config,
+            keys,
+            optionsMap: new Map(),
+          };
+          keys.forEach((k) => data.innerLinkageConfig.set(k, configItem));
+        });
+      }
+    },
+    { immediate: true }
+  );
+
+  // 获取联动的key顺序
+  function getLinkageKeys(key: string, keys: string[]): string[] {
+    let col = props.columns?.find((col: JVxeColumn) => col.key === key) as JVxeColumn;
+    if (col) {
+      keys.push(col.key);
+      // 寻找下级
+      if (col.linkageKey) {
+        return getLinkageKeys(col.linkageKey, keys);
+      }
+    }
+    return keys;
+  }
+
+  // 处理联动回显数据
+  function handleLinkageBackData(row) {
+    if (data.innerLinkageConfig.size > 0) {
+      for (let configItem of data.innerLinkageConfig.values()) {
+        autoSetLinkageOptionsByData(row, '', configItem, 0);
+      }
+    }
+  }
+
+  /** 【多级联动】获取同级联动下拉选项 */
+  function getLinkageOptionsSibling(row, col, config, request) {
+    // 如果当前列不是顶级列
+    let key = '';
+    if (col.key !== config.key) {
+      // 就找出联动上级列
+      let idx = config.keys.findIndex((k) => col.key === k);
+      let parentKey = config.keys[idx - 1];
+      key = row[parentKey];
+      // 如果联动上级列没有选择数据，就直接返回空数组
+      if (key === '' || key == null) {
+        return [];
+      }
+    } else {
+      key = 'root';
+    }
+    let options = config.optionsMap.get(key);
+    if (!Array.isArray(options)) {
+      if (request) {
+        let parent = key === 'root' ? '' : key;
+        return getLinkageOptionsAsync(config, parent);
+      } else {
+        options = [];
+      }
+    }
+    return options;
+  }
+
+  /** 【多级联动】获取联动下拉选项（异步） */
+  function getLinkageOptionsAsync(config, parent) {
+    return new Promise((resolve) => {
+      let key = parent ? parent : 'root';
+      let options;
+      if (config.optionsMap.has(key)) {
+        options = config.optionsMap.get(key);
+        if (isPromise(options)) {
+          options.then((opt) => {
+            config.optionsMap.set(key, opt);
+            resolve(opt);
+          });
+        } else {
+          resolve(options);
+        }
+      } else if (isFunction(config.requestData)) {
+        // 调用requestData方法，通过传入parent来获取子级
+        // noinspection JSVoidFunctionReturnValueUsed,TypeScriptValidateJSTypes
+        let promise = config.requestData(parent);
+        config.optionsMap.set(key, promise);
+        promise.then((opt) => {
+          config.optionsMap.set(key, opt);
+          resolve(opt);
+        });
+      } else {
+        resolve([]);
+      }
+    });
+  }
+
+  // 【多级联动】 用于回显数据，自动填充 optionsMap
+  function autoSetLinkageOptionsByData(data, parent, config, level) {
+    if (level === 0) {
+      getLinkageOptionsAsync(config, '');
+    } else {
+      getLinkageOptionsAsync(config, parent);
+    }
+    if (config.keys.length - 1 > level) {
+      let value = data[config.keys[level]];
+      if (value) {
+        autoSetLinkageOptionsByData(data, value, config, level + 1);
+      }
+    }
+  }
+
+  // 【多级联动】联动组件change时，清空下级组件
+  function handleLinkageSelectChange(row, col, config, value) {
+    if (col.linkageKey) {
+      getLinkageOptionsAsync(config, value);
+      let idx = config.keys.findIndex((k) => k === col.key);
+      let values = {};
+      for (let i = idx; i < config.keys.length; i++) {
+        values[config.keys[i]] = '';
+      }
+      // 清空后几列的数据
+      methods.setValues([{ rowKey: row.id, values }]);
+    }
+  }
+
+  return {
+    getLinkageOptionsAsync,
+    getLinkageOptionsSibling,
+    handleLinkageSelectChange,
+    handleLinkageBackData,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts b/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts
new file mode 100644
index 0000000..3385eae
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts
@@ -0,0 +1,920 @@
+import { Ref, watch } from 'vue';
+import XEUtils from 'xe-utils';
+import { simpleDebounce } from '/@/utils/common/compUtils';
+import { JVxeDataProps, JVxeRefs, JVxeTableProps, JVxeTypes } from '../types';
+import { getEnhanced } from '../utils/enhancedUtils';
+import { VxeTableInstance, VxeTablePrivateMethods } from 'vxe-table';
+import { cloneDeep } from 'lodash-es';
+import { isArray, isEmpty, isNull, isString } from '/@/utils/is';
+import { useLinkage } from './useLinkage';
+import { useWebSocket } from './useWebSocket';
+import { getPrefix, getJVxeAuths } from '../utils/authUtils';
+import { excludeKeywords } from '../componentMap';
+import { useColumnsCache } from './useColumnsCache';
+import { isEnabledVirtualYScroll } from '/@/components/jeecg/JVxeTable/utils';
+
+export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, refs: JVxeRefs, instanceRef: Ref) {
+  let xTableTemp: VxeTableInstance & VxeTablePrivateMethods;
+
+  function getXTable() {
+    if (!xTableTemp) {
+      // !. 为 typescript 的非空断言
+      xTableTemp = refs.gridRef.value!.getRefMaps().refTable.value;
+    }
+    return xTableTemp;
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  const hookMethods = {
+    getXTable,
+    addRows,
+    pushRows,
+    insertRows,
+    addOrInsert,
+    setValues,
+    getValues,
+    getTableData,
+    getNewData,
+    getNewDataWithId,
+    getIfRowById,
+    getNewRowById,
+    getDeleteData,
+    getSelectionData,
+    getSelectedData,
+    removeRows,
+    removeRowsById,
+    removeSelection,
+    resetScrollTop,
+    validateTable,
+    fullValidateTable,
+    clearSelection,
+    filterNewRows,
+    isDisabledRow,
+    recalcDisableRows,
+    rowResort,
+  };
+
+  // 多级联动
+  const linkageMethods = useLinkage(props, data, hookMethods);
+  // WebSocket 无痕刷新
+  const socketMethods = useWebSocket(props, data, hookMethods);
+
+  // 可显式供外部调用的方法
+  const publicMethods = {
+    ...hookMethods,
+    ...linkageMethods,
+    ...socketMethods,
+  };
+
+  /** 监听vxe滚动条位置 */
+  function handleVxeScroll(event) {
+    let { scroll } = data;
+
+    // 记录滚动条的位置
+    scroll.top = event.scrollTop;
+    scroll.left = event.scrollLeft;
+
+    refs.subPopoverRef.value?.close();
+    data.scrolling.value = true;
+    closeScrolling();
+  }
+
+  // 当手动勾选单选时触发的事件
+  function handleVxeRadioChange(event) {
+    let row = event.$table.getRadioRecord();
+    data.selectedRows.value = row ? [row] : [];
+    handleSelectChange('radio', data.selectedRows.value, event);
+  }
+
+  // 当手动勾选全选时触发的事件
+  function handleVxeCheckboxAll(event) {
+    data.selectedRows.value = event.$table.getCheckboxRecords();
+    handleSelectChange('checkbox-all', data.selectedRows.value, event);
+  }
+
+  // 当手动勾选并且值发生改变时触发的事件
+  function handleVxeCheckboxChange(event) {
+    data.selectedRows.value = event.$table.getCheckboxRecords();
+    handleSelectChange('checkbox', data.selectedRows.value, event);
+  }
+
+  // 行选择change事件
+  function handleSelectChange(type, selectedRows, $event) {
+    let action;
+    if (type === 'radio') {
+      action = 'selected';
+    } else if (type === 'checkbox') {
+      action = selectedRows.includes($event.row) ? 'selected' : 'unselected';
+    } else {
+      action = 'selected-all';
+    }
+
+    data.selectedRowIds.value = selectedRows.map((row) => row.id);
+    trigger('selectRowChange', {
+      type: type,
+      action: action,
+      $event: $event,
+      row: $event.row,
+      selectedRows: data.selectedRows.value,
+      selectedRowIds: data.selectedRowIds.value,
+    });
+  }
+
+  // 点击单元格时触发的事件
+  function handleCellClick(event) {
+    let { row, column, $event, $table } = event;
+
+    // 点击了可编辑的
+    if (column.editRender) {
+      refs.subPopoverRef.value?.close();
+      return;
+    }
+
+    // 显示详细信息
+    if (column.params?.showDetails) {
+      refs.detailsModalRef.value?.open(event);
+    } else if (refs.subPopoverRef.value) {
+      refs.subPopoverRef.value.toggle(event);
+    } else if (props.clickSelectRow) {
+      let className = $event.target.className || '';
+      className = isString(className) ? className : className.toString();
+      // 点击的是expand，不做处理
+      if (className.includes('vxe-table--expand-btn')) {
+        return;
+      }
+      // 点击的是checkbox，不做处理
+      if (className.includes('vxe-checkbox--icon') || className.includes('vxe-cell--checkbox')) {
+        return;
+      }
+      // 点击的是radio，不做处理
+      if (className.includes('vxe-radio--icon') || className.includes('vxe-cell--radio')) {
+        return;
+      }
+
+      // 代码逻辑说明: 【issues/9038】JVxeTable表格点击行选择BUG---
+      if(!data.disabledRowIds.includes(row.id)){
+        if (props.rowSelectionType === 'radio') {
+          $table.setRadioRow(row);
+          handleVxeRadioChange(event);
+        } else {
+          $table.toggleCheckboxRow(row);
+          handleVxeCheckboxChange(event);
+        }
+      }
+
+    }
+  }
+
+  // 单元格被激活编辑时会触发该事件
+  function handleEditActived({ column }) {
+    // 执行增强
+    getEnhanced(column.params.type).aopEvents.editActived!.apply(instanceRef.value, arguments as any);
+  }
+
+  // 单元格编辑状态下被关闭时会触发该事件
+  function handleEditClosed({ column }) {
+    // 执行增强
+    getEnhanced(column.params.type).aopEvents.editClosed!.apply(instanceRef.value, arguments as any);
+  }
+
+  // 返回值决定行是否可选中
+  function handleCheckMethod({ row }) {
+    if (props.disabled) {
+      return false;
+    }
+    return !data.disabledRowIds.includes(row.id);
+  }
+
+  // 返回值决定单元格是否可以编辑
+  function handleActiveMethod({ row, column }) {
+    let flag = (() => {
+      if (props.disabled) {
+        return false;
+      }
+      if (data.disabledRowIds.includes(row.id)) {
+        return false;
+      }
+      if (column.params?.disabled) {
+        return false;
+      }
+      // 执行增强
+      return getEnhanced(column.params.type).aopEvents.activeMethod!.apply(instanceRef.value, arguments as any) ?? true;
+    })();
+    if (!flag) {
+      // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-1404】vxetable警告
+      getXTable().clearEdit();
+      // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-1404】vxetable警告
+    }
+    return flag;
+  }
+
+  /**
+   * 判断是否是禁用行
+   * @param row 行数据
+   * @param rowIndex 行号
+   * @param force 是否强制判断
+   */
+  function isDisabledRow(row, rowIndex: number | boolean = -1, force = true) {
+    if(typeof rowIndex === 'boolean'){
+      force = rowIndex;
+      rowIndex = -1;
+    }
+    if (!force) {
+      return !data.disabledRowIds.includes(row.id);
+    }
+    if (props.disabledRows == null || isEmpty(props.disabledRows)) {
+      return false;
+    }
+    let disabled: boolean = false;
+    let keys: string[] = Object.keys(props.disabledRows);
+    for (const key of keys) {
+      // 判断是否有该属性
+      if (row.hasOwnProperty(key)) {
+        let value = row[key];
+        let temp: any = props.disabledRows![key];
+        // 禁用规则可以是一个函数
+        if (typeof temp === 'function') {
+          disabled = temp(value, row, rowIndex);
+        } else if (isArray(temp)) {
+          // 禁用规则可以是一个数组
+          disabled = temp.includes(value);
+        } else {
+          // 禁用规则可以是一个具体值
+          disabled = temp === value;
+        }
+        if (disabled) {
+          break;
+        }
+      }
+    }
+    return disabled;
+  }
+
+  // 重新计算禁用行
+  function recalcDisableRows() {
+    let xTable = getXTable();
+    data.disabledRowIds = [];
+    const { tableFullData } = xTable.internalData;
+    tableFullData.forEach((row, rowIndex) => {
+      // 判断是否是禁用行
+      if (isDisabledRow(row, rowIndex)) {
+        data.disabledRowIds.push(row.id);
+      }
+    });
+    xTable.updateData();
+  }
+
+  // 监听 disabledRows，更改时重新计算禁用行
+  watch(
+    () => props.disabledRows,
+    () => recalcDisableRows()
+  );
+
+  // 返回值决定是否允许展开、收起行
+  function handleExpandToggleMethod({ expanded }) {
+    return !(expanded && props.disabled);
+  }
+
+  // 设置 data.scrolling 防抖模式
+  const closeScrolling = simpleDebounce(function () {
+    data.scrolling.value = false;
+  }, 100);
+
+  /** 表尾数据处理方法，用于显示统计信息 */
+  function handleFooterMethod({ columns, data: $data }) {
+    const { statistics } = data;
+    let footers: any[] = [];
+    if (statistics.has) {
+      if (statistics.sum.length > 0) {
+        footers.push(
+          getFooterStatisticsMap({
+            columns: columns,
+            title: '合计',
+            checks: statistics.sum,
+            method: (column) => XEUtils.sum($data, column.property),
+          })
+        );
+      }
+      if (statistics.average.length > 0) {
+        footers.push(
+          getFooterStatisticsMap({
+            columns: columns,
+            title: '平均',
+            checks: statistics.average,
+            method: (column) => XEUtils.mean($data, column.property),
+          })
+        );
+      }
+    }
+    return footers;
+  }
+
+  /** 获取底部统计Map */
+  function getFooterStatisticsMap({ columns, title, checks, method }) {
+    return columns.map((column, columnIndex) => {
+      if (columnIndex === 0) {
+        return title;
+      }
+      if (checks.includes(column.property)) {
+        return method(column, columnIndex);
+      }
+      return null;
+    });
+  }
+
+  // 创建新行，自动添加默认值
+  function createRow(record: Recordable = {}) {
+    let xTable = getXTable();
+    // 添加默认值
+    xTable.internalData.tableFullColumn.forEach((column) => {
+      let col = column.params;
+      // 不能被注册的列不获取增强
+      if (col && !excludeKeywords.includes(col.type)) {
+        if (col.key && (record[col.key] == null || record[col.key] === '')) {
+          // 设置默认值
+          let createValue = getEnhanced(col.type).createValue;
+          let defaultValue = col.defaultValue ?? '';
+          let ctx = { context: { row: record, column, $table: xTable } };
+          record[col.key] = createValue(defaultValue, ctx);
+        }
+        // 处理联动列
+        if (col.type === JVxeTypes.select && data.innerLinkageConfig.size > 0) {
+          // 判断当前列是否是联动列
+          if (data.innerLinkageConfig.has(col.key)) {
+            let configItem = data.innerLinkageConfig.get(col.key);
+            linkageMethods.getLinkageOptionsAsync(configItem, '');
+          }
+        }
+      } else if (col?.type === JVxeTypes.hidden) {
+        record[col.key] = col.defaultValue ?? '';
+      }
+    });
+    return record;
+  }
+
+  async function addOrInsert(rows: Recordable | Recordable[] = {}, index, triggerName, options?: IAddRowsOptions) {
+    let xTable = getXTable();
+    let records;
+    if (isArray(rows)) {
+      records = rows;
+    } else {
+      records = [rows];
+    }
+    // 遍历添加默认值
+    records.forEach((record) => createRow(record));
+    let setActive = options?.setActive ?? props.addSetActive ?? true;
+    let result = await pushRows(records, { index: index, setActive });
+    // 遍历插入的行
+    // online js增强时以传过来值为准，不再赋默认值
+    if (!(options?.isOnlineJS ?? false)) {
+      if (triggerName != null) {
+        for (let i = 0; i < result.rows.length; i++) {
+          let row = result.rows[i];
+          trigger(triggerName, {
+            row: row,
+            rows: result.rows,
+            insertIndex: index,
+            $table: xTable,
+            target: instanceRef.value,
+            isModalData: options?.isModalData
+          });
+        }
+      }
+    }
+    return result;
+  }
+
+  // 新增、插入一行时的可选参数
+  interface IAddRowsOptions {
+    // 是否是 onlineJS增强 触发的
+    isOnlineJS?: boolean;
+    // 是否激活编辑状态
+    setActive?: boolean;
+    //是否需要触发change事件
+    emitChange?:boolean
+    // 是否是modal弹窗添加的数据
+    isModalData?:boolean
+  }
+
+  /**
+   * 添加一行或多行
+   *
+   * @param rows
+   * @param options 参数
+   * @return
+   */
+  async function addRows(rows: Recordable | Recordable[] = {}, options?: IAddRowsOptions) {
+    // 代码逻辑说明: VUEN-1892【online子表弹框】有主从关联js时，子表弹框修改了数据，主表字段未修改
+    let result = await addOrInsert(rows, -1, 'added', options);
+    if(options && options!.emitChange==true){
+      trigger('valueChange', {column: 'all', row: result.row})
+    }
+    // 代码逻辑说明: 【TV360X-279】行编辑添加新字段滚动对应位置
+    let xTable = getXTable();
+    setTimeout(() => {
+      xTable.scrollToRow(result.row);
+    }, 0);
+    return result;
+  }
+
+  /**
+   * 添加一行或多行临时数据，不会填充默认值，传什么就添加进去什么
+   * @param rows
+   * @param options 选项
+   * @param options.setActive 是否激活最后一行的编辑模式
+   */
+  async function pushRows(rows: Recordable | Recordable[] = {}, options = { setActive: false, index: -1 }) {
+    let xTable = getXTable();
+    let { setActive, index } = options;
+    index = index === -1 ? index : xTable.internalData.tableFullData[index];
+    index = index == null ? -1 : index;
+    // 插入行
+    let result = await xTable.insertAt(rows, index);
+    if (setActive) {
+      // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-1404】vxetable警告
+      // 激活最后一行的编辑模式
+      xTable.setEditRow(result.rows[result.rows.length - 1], true);
+      // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-1404】vxetable警告
+    }
+    await recalcSortNumber();
+    return result;
+  }
+
+  /**
+   * 插入一行或多行临时数据
+   *
+   * @param rows
+   * @param index 添加下标，数字，必填
+   * @param options 参数
+   * @return
+   */
+  function insertRows(rows: Recordable | Recordable[] = {}, index: number, options?: IAddRowsOptions) {
+    if (index < 0) {
+      console.warn(`【JVxeTable】insertRows：index必须传递数字，且大于-1`);
+      return;
+    }
+    return addOrInsert(rows, index, 'inserted', options);
+  }
+
+  /** 获取表格表单里的值 */
+  function getValues(callback, rowIds) {
+    let tableData = getTableData({ rowIds: rowIds });
+    // 代码逻辑说明: 【issues/7631】JVxeTable组件的getValues回调函数参数修正
+    callback(tableData, tableData);
+  }
+
+  type getTableDataOptions = {
+    rowIds?: string[];
+    // 是否保留新行的id
+    keepNewId?: boolean;
+  }
+
+  /** 获取表格数据 */
+  function getTableData(options: getTableDataOptions = {}) {
+    let { rowIds } = options;
+    let tableData;
+    // 仅查询指定id的行
+    if (isArray(rowIds) && rowIds.length > 0) {
+      tableData = [];
+      rowIds.forEach((rowId) => {
+        let { row } = getIfRowById(rowId);
+        if (row) {
+          tableData.push(row);
+        }
+      });
+    } else {
+      // 查询所有行
+      tableData = getXTable().getTableData().fullData;
+    }
+    return filterNewRows(tableData, {
+      keepNewId: options.keepNewId ?? false,
+      removeNewLine: false,
+    });
+  }
+
+  /** 仅获取新增的数据 */
+  function getNewData() {
+    let newData = getNewDataWithId();
+    newData.forEach((row) => delete row.id);
+    return newData;
+  }
+
+  /** 仅获取新增的数据,带有id */
+  function getNewDataWithId() {
+    let xTable = getXTable();
+    return cloneDeep(xTable.getInsertRecords());
+  }
+
+  /** 根据ID获取行，新增的行也能查出来 */
+  function getIfRowById(id) {
+    let xTable = getXTable();
+    let row = xTable.getRowById(id),
+      isNew = false;
+    if (!row) {
+      row = getNewRowById(id);
+      if (!row) {
+        console.warn(`JVxeTable.getIfRowById：没有找到id为"${id}"的行`);
+        return { row: null };
+      }
+      isNew = true;
+    }
+    return { row, isNew };
+  }
+
+  /** 通过临时ID获取新增的行 */
+  function getNewRowById(id) {
+    let records = getXTable().getInsertRecords();
+    for (let record of records) {
+      if (record.id === id) {
+        return record;
+      }
+    }
+    return null;
+  }
+
+  type filterNewRowsOptions = {
+    keepNewId?: boolean;
+    removeNewLine?: boolean;
+  } | boolean
+
+  /**
+   * 过滤添加的行
+   * @param rows 要筛选的行数据
+   * @param optOrRm 如果传 boolean 则是 removeNewLine 参数（true = 删除新增，false=只删除id），如果传对象则是配置参数
+   * @param handler function
+   */
+  function filterNewRows(rows, optOrRm:filterNewRowsOptions = true, handler?: Fn) {
+    let insertRecords = getXTable().getInsertRecords();
+    let records: Recordable[] = [];
+    optOrRm = typeof optOrRm === 'boolean' ? { removeNewLine: optOrRm } : optOrRm;
+    // true = 删除新增，false=只删除id
+    let removeNewLine = optOrRm?.removeNewLine ?? true;
+    for (let row of rows) {
+      // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      let item = { ...row };
+      // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      if (insertRecords.includes(row)) {
+        handler ? handler({ item, row, insertRecords }) : null;
+        if (removeNewLine) {
+          continue;
+        }
+        if (!optOrRm?.keepNewId) {
+          delete item.id;
+        }
+      }
+      records.push(item);
+    }
+    return records;
+  }
+
+  /**
+   * 重置滚动条Top位置
+   * @param top 新top位置，留空则滚动到上次记录的位置，用于解决切换tab选项卡时导致白屏以及自动将滚动条滚动到顶部的问题
+   */
+  function resetScrollTop(top?) {
+    let xTable = getXTable();
+    xTable.scrollTo(null, top == null || top === '' ? data.scroll.top : top);
+  }
+
+  /** 校验table，失败返回errMap，成功返回null */
+  async function validateTable(rows?) {
+    let xTable = getXTable();
+    const errMap = await xTable.validate(rows ?? true).catch((errMap) => errMap);
+    return errMap ? errMap : null;
+  }
+
+  /** 完整校验 */
+  async function fullValidateTable(rows?) {
+    let xTable = getXTable();
+    const errMap = await xTable.fullValidate(rows ?? true).catch((errMap) => errMap);
+    return errMap ? errMap : null;
+  }
+
+  type setValuesParam = { rowKey: string; values: Recordable };
+
+  /**
+   * 设置某行某列的值
+   *
+   * @param values
+   * @return 返回受影响的单元格数量
+   */
+  function setValues(values: setValuesParam[]): number {
+    if (!isArray(values)) {
+      console.warn(`[JVxeTable] setValues 必须传递数组`);
+      return 0;
+    }
+    let xTable = getXTable();
+    let count = 0;
+    values.forEach((item) => {
+      let { rowKey, values: record } = item;
+      let { row } = getIfRowById(rowKey);
+      if (!row) {
+        return;
+      }
+      Object.keys(record).forEach((colKey) => {
+        let column = xTable.getColumnByField(colKey);
+        if (column) {
+          let oldValue = row[colKey];
+          let newValue = record[colKey];
+          if (newValue !== oldValue) {
+            row[colKey] = newValue;
+            // 触发 valueChange 事件
+            trigger('valueChange', {
+              type: column.params.type,
+              value: newValue,
+              oldValue: oldValue,
+              col: column.params,
+              column: column,
+              isSetValues: true,
+              row: {...row}
+            });
+            count++;
+          }
+        } else {
+          console.warn(`[JVxeTable] setValues 没有找到key为"${colKey}"的列`);
+        }
+      });
+    });
+    if (count > 0) {
+      xTable.updateData();
+    }
+    return count;
+  }
+
+  /** 清空选择行 */
+  async function clearSelection() {
+    const xTable = getXTable();
+    let event = { $table: xTable, target: instanceRef.value };
+    if (['radio', JVxeTypes.rowRadio].includes(props.rowSelectionType ?? '')) {
+      await xTable.clearRadioRow();
+      handleVxeRadioChange(event);
+    } else {
+      await xTable.clearCheckboxRow();
+      handleVxeCheckboxChange(event);
+    }
+  }
+
+  /**
+   * 获取选中数据
+   * @param isFull 如果 isFull=true 则获取全表已选中的数据
+   */
+  function getSelectionData(isFull?: boolean) {
+    const xTable = getXTable();
+    if (['radio', JVxeTypes.rowRadio].includes(props.rowSelectionType ?? '')) {
+      let row = xTable.getRadioRecord(isFull);
+      if (isNull(row)) {
+        return [];
+      }
+      return filterNewRows([row], false);
+    } else {
+      return filterNewRows(xTable.getCheckboxRecords(isFull), false);
+    }
+  }
+
+  /** 仅获取被删除的数据（新增又被删除的数据不会被获取到） */
+  function getDeleteData() {
+    return filterNewRows(getXTable().getRemoveRecords(), false);
+  }
+
+  /** 删除一行或多行数据 */
+  async function removeRows(rows, asyncRemove = false) {
+    // 代码逻辑说明: vxe-table removeRows方法加上异步删除
+    const xTable = getXTable();
+    const removeEvent: any = { deleteRows: rows, $table: xTable };
+    if (asyncRemove) {
+      const selectedRows = Array.isArray(rows) ? rows : [rows];
+      const deleteOldRows = filterNewRows(selectedRows);
+      if (deleteOldRows.length) {
+        return new Promise((resolve) => {
+          // 确认删除，只有调用这个方法才会真删除
+          removeEvent.confirmRemove = async () => {
+            const insertRecords = xTable.getInsertRecords();
+            selectedRows.forEach((item) => {
+              // 删除新添加的数据id
+              if (insertRecords.includes(item)) {
+                delete item.id;
+              }
+            });
+            const res = await xTable.remove(rows);
+            await recalcSortNumber();
+            resolve(res);
+          };
+          trigger('removed', removeEvent);
+        });
+      } else {
+        // 全新的行立马删除，不等待。
+        const res = await xTable.remove(rows);
+        removeEvent.confirmRemove = () => {};
+        trigger('removed', removeEvent);
+        await recalcSortNumber();
+        return res;
+      }
+    } else {
+      const res = await xTable.remove(rows);
+      trigger('removed', removeEvent);
+      await recalcSortNumber();
+      return res;
+    }
+  }
+
+  /** 根据id删除一行或多行 */
+  function removeRowsById(rowId) {
+    let rowIds;
+    if (isArray(rowId)) {
+      rowIds = rowId;
+    } else {
+      rowIds = [rowId];
+    }
+    let rows = rowIds
+      .map((id) => {
+        let { row } = getIfRowById(id);
+        if (!row) {
+          return;
+        }
+        if (row) {
+          return row;
+        } else {
+          console.warn(`【JVxeTable】removeRowsById：${id}不存在`);
+          return null;
+        }
+      })
+      .filter((row) => row != null);
+    return removeRows(rows);
+  }
+
+  // 删除选中的数据
+  async function removeSelection() {
+    let xTable = getXTable();
+    let res;
+    if (['radio', JVxeTypes.rowRadio].includes(props.rowSelectionType ?? '')) {
+      res = await xTable.removeRadioRow();
+    } else {
+      res = await xTable.removeCheckboxRow();
+    }
+    await clearSelection();
+    await recalcSortNumber();
+    return res;
+  }
+
+  /** 重新计算排序字段的数值 */
+  async function recalcSortNumber(force = false) {
+    if (props.dragSort || force) {
+      let xTable = getXTable();
+      let sortKey = props.sortKey ?? 'orderNum';
+      let sortBegin = props.sortBegin ?? 0;
+      xTable.internalData.tableFullData.forEach((data) => (data[sortKey] = sortBegin++));
+      // 4.1.0
+      //await xTable.updateCache();
+      // 4.1.1
+      await xTable.cacheRowMap(true)
+      return await xTable.updateData();
+    }
+  }
+
+  /**
+   * 排序表格
+   * @param oldIndex
+   * @param newIndex
+   * @param force 强制排序
+   */
+  async function doSort(oldIndex: number, newIndex: number, force = false) {
+    if (props.dragSort || force) {
+      let xTable = getXTable();
+      let sort = (array) => {
+        // 存储old数据，并删除该项
+        let row = array.splice(oldIndex, 1)[0];
+        // 向newIndex处添加old数据
+        array.splice(newIndex, 0, row);
+      };
+      sort(xTable.internalData.tableFullData);
+      if (xTable.keepSource) {
+        sort(xTable.internalData.tableSourceData);
+      }
+      // -update-begin--author:liaozhiyang---date:20240620---for：【TV360X-585】拖动字段虚拟滚动不好使
+      if (isEnabledVirtualYScroll(props, xTable)) {
+        await xTable.loadData(xTable.internalData.tableFullData);
+      }
+      // -update-end--author:liaozhiyang---date:20240620---for：【TV360X-585】拖动字段虚拟滚动不好使
+      return await recalcSortNumber(force);
+    }
+  }
+
+  /** 行重新排序 */
+  function rowResort(oldIndex: number, newIndex: number) {
+    return doSort(oldIndex, newIndex, true);
+  }
+
+  // ---------------- begin 权限控制 ----------------
+  // 加载权限
+  function loadAuthsMap() {
+    if (!props.authPre || props.authPre.length == 0) {
+      data.authsMap.value = null;
+    } else {
+      data.authsMap.value = getJVxeAuths(props.authPre);
+    }
+  }
+
+  /**
+   * 根据 权限code 获取权限
+   * @param authCode
+   */
+  function getAuth(authCode) {
+    if (data.authsMap.value != null && props.authPre) {
+      let prefix = getPrefix(props.authPre);
+      return data.authsMap.value.get(prefix + authCode);
+    }
+    return null;
+  }
+
+  // 获取列权限
+  function getColAuth(key: string) {
+    return getAuth(key);
+  }
+
+  // 判断按钮权限
+  function hasBtnAuth(key: string) {
+    return getAuth('btn:' + key)?.isAuth ?? true;
+  }
+
+  // ---------------- end 权限控制 ----------------
+
+  /* --- 辅助方法 ---*/
+
+  function created() {
+    loadAuthsMap();
+  }
+
+  // 触发事件
+  function trigger(name, event: any = {}) {
+    event.$target = instanceRef.value;
+    event.$table = getXTable();
+    //online增强参数兼容
+    event.target = instanceRef.value;
+    emit(name, event);
+  }
+
+  /**
+   * 获取选中的行-和 getSelectionData 区别在于对于新增的行也会返回ID
+   * 用于onlinePopForm
+   * @param isFull
+   */
+  function getSelectedData(isFull?: boolean) {
+    const xTable = getXTable();
+    let rows:any[] = []
+    if (['radio', JVxeTypes.rowRadio].includes(props.rowSelectionType ?? '')) {
+      let row = xTable.getRadioRecord(isFull);
+      if (isNull(row)) {
+        return [];
+      }
+      rows = [row]
+    } else {
+      rows = xTable.getCheckboxRecords(isFull)
+    }
+    let records: Recordable[] = [];
+    for (let row of rows) {
+      // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+      records.push({ ...row });
+      // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    }
+    return records;
+  }
+  /**
+   *  2024-03-21
+   *  liaozhiyang
+   *  VXETable列设置保存缓存字段名
+   * */
+  function handleCustom({ type, $grid }) {
+    const { saveSetting, resetSetting } = useColumnsCache({ cacheColumnsKey: props.cacheColumnsKey });
+    if (type === 'confirm') {
+      saveSetting($grid);
+    } else if (type == 'reset') {
+      resetSetting($grid);
+    }
+  }
+
+  return {
+    methods: {
+      trigger,
+      ...publicMethods,
+      closeScrolling,
+      doSort,
+      recalcSortNumber,
+      handleVxeScroll,
+      handleVxeRadioChange,
+      handleVxeCheckboxAll,
+      handleVxeCheckboxChange,
+      handleFooterMethod,
+      handleCellClick,
+      handleEditActived,
+      handleEditClosed,
+      handleCheckMethod,
+      handleActiveMethod,
+      handleExpandToggleMethod,
+      getColAuth,
+      hasBtnAuth,
+      handleCustom,
+    },
+    publicMethods,
+    created,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/usePagination.ts b/src/components/jeecg/JVxeTable/src/hooks/usePagination.ts
new file mode 100644
index 0000000..79c5505
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/usePagination.ts
@@ -0,0 +1,70 @@
+import { computed, reactive, h } from 'vue';
+import { JVxeTableMethods, JVxeTableProps } from '/@/components/jeecg/JVxeTable/src/types';
+import { isEmpty } from '/@/utils/is';
+import { Pagination } from 'ant-design-vue';
+
+export function usePagination(props: JVxeTableProps, methods: JVxeTableMethods) {
+  const innerPagination = reactive({
+    current: 1,
+    pageSize: 10,
+    pageSizeOptions: ['10', '20', '30'],
+    showTotal: (total, range) => {
+      return range[0] + '-' + range[1] + ' 共 ' + total + ' 条';
+    },
+    showQuickJumper: true,
+    showSizeChanger: true,
+    total: 100,
+  });
+
+  const bindProps = computed(() => {
+    return {
+      ...innerPagination,
+      ...props.pagination,
+      size: props.size === 'tiny' ? 'small' : '',
+    };
+  });
+
+  const boxClass = computed(() => {
+    return {
+      'j-vxe-pagination': true,
+      'show-quick-jumper': !!bindProps.value.showQuickJumper,
+    };
+  });
+
+  function handleChange(current, pageSize) {
+    innerPagination.current = current;
+    methods.trigger('pageChange', { current, pageSize });
+  }
+
+  function handleShowSizeChange(current, pageSize) {
+    innerPagination.pageSize = pageSize;
+    // -update-begin--author:liaozhiyang---date:20251209---for:【issues/9169】切换页码时，pageChange事件加载了两次
+    // 因为 handleShowSizeChange先触发，紧接着会触发 handleChange，所以可以注释掉。
+    // methods.trigger('pageChange', { current, pageSize });
+    // -update-end--author:liaozhiyang---date:20251209---for:【issues/9169】切换页码时，pageChange事件加载了两次
+  }
+
+  /** 渲染分页器 */
+  function renderPagination() {
+    if (props.pagination && !isEmpty(props.pagination)) {
+      return h(
+        'div',
+        {
+          class: boxClass.value,
+        },
+        [
+          h(Pagination, {
+            ...bindProps.value,
+            // 代码逻辑说明: 【issues/8137】vxetable表格禁用后分页隐藏了
+            disabled: false,
+            onChange: handleChange,
+            onShowSizeChange: handleShowSizeChange,
+          }),
+        ]
+      );
+    }
+    return null;
+  }
+
+  return { renderPagination };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useRenderComponents.ts b/src/components/jeecg/JVxeTable/src/hooks/useRenderComponents.ts
new file mode 100644
index 0000000..e8ad036
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useRenderComponents.ts
@@ -0,0 +1,61 @@
+import { h } from 'vue';
+import { JVxeDataProps, JVxeTableMethods, JVxeTableProps } from '../types';
+import JVxeSubPopover from '../components/JVxeSubPopover.vue';
+import JVxeDetailsModal from '../components/JVxeDetailsModal.vue';
+import { useToolbar } from '/@/components/jeecg/JVxeTable/src/hooks/useToolbar';
+import { usePagination } from '/@/components/jeecg/JVxeTable/src/hooks/usePagination';
+
+export function useRenderComponents(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods, slots) {
+  // 渲染 toolbar
+  const { renderToolbar } = useToolbar(props, data, methods, slots);
+  // 渲染分页器
+  const { renderPagination } = usePagination(props, methods);
+
+  // 渲染 toolbarAfter 插槽
+  function renderToolbarAfterSlot() {
+    if (slots['toolbarAfter']) {
+      return slots['toolbarAfter']();
+    }
+    return null;
+  }
+
+  // 渲染点击时弹出的子表
+  function renderSubPopover() {
+    if (props.clickRowShowSubForm && slots.subForm) {
+      return h(
+        JVxeSubPopover,
+        {
+          ref: 'subPopoverRef',
+        },
+        {
+          subForm: slots.subForm,
+        }
+      );
+    }
+    return null;
+  }
+
+  // 渲染点击时弹出的详细信息
+  function renderDetailsModal() {
+    if (props.clickRowShowMainForm && slots.mainForm) {
+      return h(
+        JVxeDetailsModal,
+        {
+          ref: 'detailsModalRef',
+          trigger: methods.trigger,
+        },
+        {
+          mainForm: slots.mainForm,
+        }
+      );
+    }
+  }
+
+  return {
+    renderToolbar,
+    renderPagination,
+    renderSubPopover,
+    renderDetailsModal,
+    renderToolbarAfterSlot,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts b/src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts
new file mode 100644
index 0000000..8195db9
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts
@@ -0,0 +1,72 @@
+import { h } from 'vue';
+import JVxeToolbar from '../components/JVxeToolbar.vue';
+import { JVxeDataProps, JVxeTableMethods, JVxeTableProps } from '../types';
+
+export function useToolbar(props: JVxeTableProps, data: JVxeDataProps, methods: JVxeTableMethods, $slots) {
+  /** 渲染工具栏 */
+  function renderToolbar() {
+    if (props.toolbar) {
+      return h(
+        JVxeToolbar,
+        {
+          size: props.size,
+          disabled: props.disabled,
+          toolbarConfig: props.toolbarConfig,
+          disabledRows: props.disabledRows,
+          hasBtnAuth: methods.hasBtnAuth,
+          selectedRowIds: data.selectedRowIds.value,
+          custom: props.custom,
+          addBtnCfg: props.addBtnCfg,
+          removeBtnCfg: props.removeBtnCfg,
+          // 新增事件
+          onAdd: () => {
+            // 代码逻辑说明: 【TV360X-212】online新增字段就出校验提示
+            setTimeout(() => {
+              methods.addRows();
+            }, 0);
+          },
+          // 保存事件
+          onSave: () => methods.trigger('save'),
+          onRemove() {
+            const $table = methods.getXTable();
+            // 触发删除事件
+            if (data.selectedRows.value.length > 0) {
+              const deleteOldRows = methods.filterNewRows(data.selectedRows.value);
+              const removeEvent: any = { deleteRows: data.selectedRows.value, $table };
+              const insertRecords = $table.getInsertRecords();
+              if (props.asyncRemove && deleteOldRows.length) {
+                data.selectedRows.value.forEach((item) => {
+                  // 删除新添加的数据id
+                  if (insertRecords.includes(item)) {
+                    delete item.id;
+                  }
+                });
+                // 确认删除，只有调用这个方法才会真删除
+                removeEvent.confirmRemove = () => methods.removeSelection();
+              } else {
+                if (props.asyncRemove) {
+                  // asyncRemove删除的只有新增的数据时，防止调用confirmRemove报错
+                  removeEvent.confirmRemove = () => {};
+                }
+                methods.removeSelection();
+              }
+              methods.trigger('removed', removeEvent);
+            } else {
+              methods.removeSelection();
+            }
+          },
+          // 清除选择事件
+          onClearSelection: () => methods.clearSelection(),
+          onRegister: ({ xToolbarRef }) => methods.getXTable().connect(xToolbarRef.value),
+        },
+        {
+          toolbarPrefix: $slots.toolbarPrefix,
+          toolbarSuffix: $slots.toolbarSuffix,
+        }
+      );
+    }
+    return null;
+  }
+
+  return { renderToolbar };
+}
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useValidateRules.ts b/src/components/jeecg/JVxeTable/src/hooks/useValidateRules.ts
new file mode 100644
index 0000000..296cf9d
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useValidateRules.ts
@@ -0,0 +1,105 @@
+import { VxeTablePropTypes } from 'vxe-table';
+import { isArray } from '/@/utils/is';
+import { HandleArgs } from './useColumns';
+import { replaceProps } from '../utils/enhancedUtils';
+
+export function useValidateRules(args: HandleArgs) {
+  const { data } = args;
+  const col = args.col!;
+  let rules: VxeTablePropTypes.EditRules[] = [];
+  if (isArray(col.validateRules)) {
+    for (let rule of col.validateRules) {
+      let replace = {
+        message: replaceProps(col, rule.message),
+      };
+      if (rule.unique || rule.pattern === 'only') {
+        // 唯一校验器
+        rule.validator = uniqueValidator(args);
+      } else if (rule.pattern) {
+        // 非空
+        if (rule.pattern === fooPatterns[0].value) {
+          rule.required = true;
+          delete rule.pattern;
+        } else {
+          // 兼容Online表单的特殊规则
+          for (let foo of fooPatterns) {
+            if (foo.value === rule.pattern) {
+              rule.pattern = foo.pattern;
+              break;
+            }
+          }
+        }
+      } else if (typeof rule.handler === 'function') {
+        // 自定义函数校验
+        rule.validator = handlerConvertToValidator;
+      }
+      rules.push(Object.assign({}, rule, replace));
+    }
+  }
+  data.innerEditRules[col.key] = rules;
+}
+
+/** 唯一校验器 */
+function uniqueValidator({ methods }: HandleArgs) {
+  return function (event) {
+    const { cellValue, column, rule } = event;
+    // 代码逻辑说明: 【TV360X-299】JVxetable组件中唯一校验过滤掉空字符串
+    if (cellValue == '') return Promise.resolve();
+    let tableData = methods.getTableData();
+    let findCount = 0;
+    for (let rowData of tableData) {
+      if (rowData[column.params.key] === cellValue) {
+        if (++findCount >= 2) {
+          return Promise.reject(new Error(rule.message));
+        }
+      }
+    }
+    return Promise.resolve();
+  };
+}
+
+/** 旧版handler转为新版Validator */
+function handlerConvertToValidator(event) {
+  const { column, rule } = event;
+  return new Promise((resolve, reject) => {
+    rule.handler(event, (flag, msg) => {
+      let message = rule.message;
+      if (typeof msg === 'string') {
+        message = replaceProps(column.params, msg);
+      }
+      if (flag == null) {
+        resolve(message);
+      } else if (!!flag) {
+        resolve(message);
+      } else {
+        reject(new Error(message));
+      }
+    });
+  });
+}
+
+// 兼容 online 的规则
+const fooPatterns = [
+  { title: '非空', value: '*', pattern: /^.+$/ },
+  { title: '6到16位数字', value: 'n6-16', pattern: /^\d{6,16}$/ },
+  { title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
+  { title: '6到18位字母', value: 's6-18', pattern: /^[a-z|A-Z]{6,18}$/ },
+  // 代码逻辑说明: VUEN-1160 对多子表，网址校验不正确
+  {
+    title: '网址',
+    value: 'url',
+    pattern: /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/,
+  },
+  // 代码逻辑说明: 【TV360X-466】邮箱跟一对第一校验规则一致
+  { title: '电子邮件', value: 'e', pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ },
+  { title: '手机号码', value: 'm', pattern: /^1[3456789]\d{9}$/ },
+  { title: '邮政编码', value: 'p', pattern: /^\d{6}$/ },
+  { title: '字母', value: 's', pattern: /^[A-Z|a-z]+$/ },
+  { title: '数字', value: 'n', pattern: /^-?\d+(\.?\d+|\d?)$/ },
+  { title: '整数', value: 'z', pattern: /^-?\d+$/ },
+  {
+    title: '金额',
+    value: 'money',
+    pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,5}))$/,
+  },
+];
diff --git a/src/components/jeecg/JVxeTable/src/hooks/useWebSocket.ts b/src/components/jeecg/JVxeTable/src/hooks/useWebSocket.ts
new file mode 100644
index 0000000..50c6d51
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/hooks/useWebSocket.ts
@@ -0,0 +1,235 @@
+import { watch, onUnmounted } from 'vue';
+import { buildUUID } from '/@/utils/uuid';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useUserStore } from '/@/store/modules/user';
+import { JVxeDataProps, JVxeTableMethods, JVxeTableProps } from '../types';
+import { isArray } from '/@/utils/is';
+import { getToken } from '/@/utils/auth';
+
+// vxe socket
+const vs = {
+  // 页面唯一 id，用于标识同一用户，不同页面的websocket
+  pageId: buildUUID(),
+  // webSocket 对象
+  ws: null,
+  // 一些常量
+  constants: {
+    // 消息类型
+    TYPE: 'type',
+    // 消息数据
+    DATA: 'data',
+    // 消息类型：心跳检测
+    TYPE_HB: 'heart_beat',
+    // 消息类型：更新vxe table数据
+    TYPE_UVT: 'update_vxe_table',
+  },
+  // 心跳检测
+  heartCheck: {
+    // 间隔时间，间隔多久发送一次心跳消息
+    interval: 10000,
+    // 心跳消息超时时间，心跳消息多久没有回复后重连
+    timeout: 6000,
+    timeoutTimer: -1,
+    clear() {
+      clearTimeout(this.timeoutTimer);
+      return this;
+    },
+    start() {
+      vs.sendMessage(vs.constants.TYPE_HB, '');
+      // 如果超过一定时间还没重置，说明后端主动断开了
+      this.timeoutTimer = window.setTimeout(() => {
+        vs.reconnect();
+      }, this.timeout);
+      return this;
+    },
+    // 心跳消息返回
+    back() {
+      this.clear();
+      window.setTimeout(() => this.start(), this.interval);
+    },
+  },
+
+  /** 初始化 WebSocket */
+  initialWebSocket() {
+    if (this.ws === null) {
+      const userId = useUserStore().getUserInfo?.id;
+      const domainURL = useGlobSetting().uploadUrl!;
+      const domain = domainURL.replace('https://', 'wss://').replace('http://', 'ws://');
+      const url = `${domain}/vxeSocket/${userId}/${this.pageId}`;
+      // 代码逻辑说明: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
+      let token = (getToken() || '') as string;
+      this.ws = new WebSocket(url, [token]);
+      this.ws.onopen = this.on.open.bind(this);
+      this.ws.onerror = this.on.error.bind(this);
+      this.ws.onmessage = this.on.message.bind(this);
+      this.ws.onclose = this.on.close.bind(this);
+    }
+  },
+
+  // 发送消息
+  sendMessage(type, message) {
+    try {
+      let ws = this.ws;
+      if (ws != null && ws.readyState === ws.OPEN) {
+        ws.send(
+          JSON.stringify({
+            type: type,
+            data: message,
+          })
+        );
+      }
+    } catch (err: any) {
+      console.warn('【JVxeWebSocket】发送消息失败：(' + err.code + ')');
+    }
+  },
+
+  /** 绑定全局VXE表格 */
+  tableMap: new Map(),
+  /** 添加绑定 */
+  addBind(map, key, value: VmArgs) {
+    let binds = map.get(key);
+    if (isArray(binds)) {
+      binds.push(value);
+    } else {
+      map.set(key, [value]);
+    }
+  },
+  /** 移除绑定 */
+  removeBind(map, key, value: VmArgs) {
+    let binds = map.get(key);
+    if (isArray(binds)) {
+      for (let i = 0; i < binds.length; i++) {
+        let bind = binds[i];
+        if (bind === value) {
+          binds.splice(i, 1);
+          break;
+        }
+      }
+      if (binds.length === 0) {
+        map.delete(key);
+      }
+    } else {
+      map.delete(key);
+    }
+  },
+  // 呼叫绑定的表单
+  callBind(map, key, callback) {
+    let binds = map.get(key);
+    if (isArray(binds)) {
+      binds.forEach(callback);
+    }
+  },
+
+  lockReconnect: false,
+  /** 尝试重连 */
+  reconnect() {
+    if (this.lockReconnect) return;
+    this.lockReconnect = true;
+    setTimeout(() => {
+      if (this.ws && this.ws.close) {
+        this.ws.close();
+      }
+      this.ws = null;
+      console.info('【JVxeWebSocket】尝试重连...');
+      this.initialWebSocket();
+      this.lockReconnect = false;
+    }, 5000);
+  },
+
+  on: {
+    open() {
+      console.info('【JVxeWebSocket】连接成功');
+      this.heartCheck.start();
+    },
+    error(e) {
+      console.warn('【JVxeWebSocket】连接发生错误:', e);
+      this.reconnect();
+    },
+    message(e) {
+      // 解析消息
+      let json;
+      try {
+        json = JSON.parse(e.data);
+      } catch (e: any) {
+        console.warn('【JVxeWebSocket】收到无法解析的消息:', e.data);
+        return;
+      }
+      let type = json[this.constants.TYPE];
+      let data = json[this.constants.DATA];
+      switch (type) {
+        // 心跳检测
+        case this.constants.TYPE_HB:
+          this.heartCheck.back();
+          break;
+        // 更新form数据
+        case this.constants.TYPE_UVT:
+          this.callBind(this.tableMap, data.socketKey, (args) => this.onVM.onUpdateTable(args, ...data.args));
+          break;
+        default:
+          console.warn('【JVxeWebSocket】收到不识别的消息类型:' + type);
+          break;
+      }
+    },
+    close(e) {
+      console.info('【JVxeWebSocket】连接被关闭:', e);
+      this.reconnect();
+    },
+  },
+
+  onVM: {
+    /** 收到更新表格的消息 */
+    onUpdateTable({ props, data, methods }: VmArgs, row, caseId) {
+      if (data.caseId !== caseId) {
+        const tableRow = methods.getIfRowById(row.id).row;
+        // 局部保更新数据
+        if (tableRow) {
+          if (props.reloadEffect) {
+            data.reloadEffectRowKeysMap[row.id] = true;
+          }
+          Object.assign(tableRow, row, { id: tableRow.id });
+          methods.getXTable().reloadRow(tableRow);
+        }
+      }
+    },
+  },
+} as {
+  ws: Nullable<WebSocket>;
+} & Recordable;
+
+type VmArgs = {
+  props: JVxeTableProps;
+  data: JVxeDataProps;
+  methods: JVxeTableMethods;
+};
+
+export function useWebSocket(props: JVxeTableProps, data: JVxeDataProps, methods) {
+  const args: VmArgs = { props, data, methods };
+  watch(
+    () => props.socketReload,
+    (socketReload: boolean) => {
+      if (socketReload) {
+        vs.initialWebSocket();
+        vs.addBind(vs.tableMap, props.socketKey, args);
+      } else {
+        vs.removeBind(vs.tableMap, props.socketKey, args);
+      }
+    },
+    { immediate: true }
+  );
+
+  /** 发送socket消息更新行 */
+  function socketSendUpdateRow(row) {
+    vs.sendMessage(vs.constants.TYPE_UVT, {
+      socketKey: props.socketKey,
+      args: [row, data.caseId],
+    });
+  }
+
+  onUnmounted(() => {
+    vs.removeBind(vs.tableMap, props.socketKey, args);
+  });
+
+  return {
+    socketSendUpdateRow,
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/install.ts b/src/components/jeecg/JVxeTable/src/install.ts
new file mode 100644
index 0000000..bbebb32
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/install.ts
@@ -0,0 +1,86 @@
+import type { App } from 'vue';
+// 引入 vxe-table
+import 'xe-utils';
+import VxeUIAll from 'vxe-pc-ui';
+import VXETable /*Grid*/ from 'vxe-table';
+import VXETablePluginAntd from 'vxe-table-plugin-antd';
+import 'vxe-pc-ui/lib/style.css';
+import 'vxe-table/lib/style.css';
+
+import { getEventPath } from '/@/utils/common/compUtils';
+import { registerAllComponent } from './utils/registerUtils';
+import { getEnhanced } from './utils/enhancedUtils';
+import type { JVxeTypes } from './types/JVxeTypes';
+export interface RegisterJVxeTableOptions {
+  /** 仅注册指定的内置类型；不传则注册全部内置组件 */
+  builtinComponents?: JVxeTypes[];
+}
+
+export async function registerJVxeTable(app: App) {
+  // VXETable 全局配置
+  const VXETableSettings = {
+    // z-index 起始值
+    zIndex: 1000,
+    table: {},
+  };
+
+  // 添加事件拦截器 event.clearActived
+  // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
+  VXETable.interceptor.add('event.clearActived', preventClosingPopUp);
+  VXETable.interceptor.add('event.clearEdit', preventClosingPopUp);
+  // 注册插件
+  VXETable.use(VXETablePluginAntd);
+  // 注册自定义组件
+  registerAllComponent();
+  // 执行注册方法
+  app.use(VxeUIAll);
+  app.use(VXETable, VXETableSettings);
+}
+
+
+/**
+ * 阻止行编辑中关闭弹窗
+ * @param params
+ */
+function preventClosingPopUp(this: any, params) {
+  // 获取组件增强
+  let col = params.column.params;
+  // 代码逻辑说明: 【issues/8178】使用原生vxe-table组件编辑模式下失去焦点报错
+  if (col === undefined) {
+    // 说明使用的是纯原生的vxe-table
+    return;
+  }
+  let { $event } = params;
+  const interceptor = getEnhanced(col.type).interceptor;
+  // 执行增强
+  let flag = interceptor['event.clearActived']?.call(this, ...arguments);
+  if (flag === false) {
+    return false;
+  }
+
+  let path = getEventPath($event);
+  for (let p of path) {
+    let className: any = p.className || '';
+    className = typeof className === 'string' ? className : className.toString();
+
+    /* --- 特殊处理以下组件，点击以下标签时不清空编辑状态 --- */
+
+    // 点击的标签是JInputPop
+    if (className.includes('j-input-pop')) {
+      return false;
+    }
+    // 点击的标签是JPopup的弹出层、部门选择、用户选择
+    if (className.includes('j-popup-modal') || className.includes('j-depart-select-modal') || className.includes('j-user-select-modal')) {
+      return false;
+    }
+    // 点击的是日期选择器
+    if (className.includes('j-vxe-date-picker')) {
+      return false;
+    }
+    // 执行增强
+    let flag = interceptor['event.clearActived.className']?.call(this, className, ...arguments);
+    if (flag === false) {
+      return false;
+    }
+  }
+}
diff --git a/src/components/jeecg/JVxeTable/src/style/index.less b/src/components/jeecg/JVxeTable/src/style/index.less
new file mode 100644
index 0000000..ff20d0d
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/style/index.less
@@ -0,0 +1,115 @@
+@import 'vxe.const';
+@import 'vxe.dark';
+
+.@{prefix-cls} {
+  // 编辑按钮样式
+  .vxe-cell--edit-icon {
+    border-color: #606266;
+  }
+
+  .sort--active {
+    border-color: @primary-color;
+  }
+
+  // toolbar 样式
+  &-toolbar {
+    &-collapsed {
+      [data-collapse] {
+        display: none;
+      }
+    }
+
+    &-button.div .ant-btn {
+      margin-right: 8px;
+    }
+  }
+
+  // 分页器
+  .j-vxe-pagination {
+    margin-top: 8px;
+    text-align: right;
+
+    .ant-pagination-options-size-changer.ant-select {
+      margin-right: 0;
+    }
+
+    &.show-quick-jumper {
+      .ant-pagination-options-size-changer.ant-select {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  // 更改 header 底色
+  .vxe-table.border--default .vxe-table--header-wrapper,
+  .vxe-table.border--full .vxe-table--header-wrapper,
+  .vxe-table.border--outer .vxe-table--header-wrapper {
+    //background-color: #FFFFFF;
+  }
+
+  // 更改 tooltip 校验失败的颜色
+  .vxe-table--tooltip-wrapper.vxe-table--valid-error {
+    background-color: #f5222d !important;
+  }
+
+  // 更改 输入框 校验失败的颜色
+  .col--valid-error > .vxe-cell > .ant-input,
+  .col--valid-error > .vxe-cell > .ant-select .ant-input,
+  .col--valid-error > .vxe-cell > .ant-select .ant-select-selection,
+  .col--valid-error > .vxe-cell > .ant-input-number,
+  .col--valid-error > .vxe-cell > .ant-cascader-picker .ant-cascader-input,
+  .col--valid-error > .vxe-cell > .ant-calendar-picker .ant-calendar-picker-input,
+  .col--valid-error > .vxe-tree-cell > .ant-input,
+  .col--valid-error > .vxe-tree-cell > .ant-select .ant-input,
+  .col--valid-error > .vxe-tree-cell > .ant-select .ant-select-selection,
+  .col--valid-error > .vxe-tree-cell > .ant-input-number,
+  .col--valid-error > .vxe-tree-cell > .ant-cascader-picker .ant-cascader-input,
+  .col--valid-error > .vxe-tree-cell > .ant-calendar-picker .ant-calendar-picker-input {
+    border-color: #f5222d !important;
+  }
+  // update-begin--author:liaozhiyang---date:20260415---for:【QQYUN-15134】修复jvxetable使用fixed固定后无法拖拽
+  // 被拖起的源行：禁用/半透明效果，跨主体和固定列 wrapper 同步生效
+  .vxe-body--row.j-vxe-drag-source {
+    opacity: 0.4;
+  }
+  // 拖拽方向指示线（用 box-shadow 实现，不影响行高/布局）
+  .vxe-body--row.j-vxe-drag-hover-top {
+    box-shadow: inset 0 2px 0 0 #1890ff;
+  }
+  .vxe-body--row.j-vxe-drag-hover-bottom {
+    box-shadow: inset 0 -3px 0 0 #1890ff;
+  }
+
+  // update-end--author:liaozhiyang---date:20260415---for:【QQYUN-15134】修复jvxetable使用fixed固定后无法拖拽
+  .vxe-body--row.sortable-ghost,
+  .vxe-body--row.sortable-chosen {
+    background-color: transparent;
+  }
+
+  // ----------- 【VUEN-1691】默认隐藏滚动条，鼠标放上去才显示 -------------------------------------------
+  .vxe-table {
+    //.vxe-table--footer-wrapper.body--wrapper,
+    .vxe-table--body-wrapper.body--wrapper {
+      // overflow-x: hidden;
+    }
+    
+    &:hover {
+      //.vxe-table--footer-wrapper.body--wrapper,
+      .vxe-table--body-wrapper.body--wrapper {
+        // overflow-x: auto;
+      }
+    }
+  }
+  // ----------- 【VUEN-1691】默认隐藏滚动条，鼠标放上去才显示 -------------------------------------------
+
+  // 调整展开/收起图标样式
+  .vxe-table--render-default .vxe-table--expanded .vxe-table--expand-btn {
+    width: 17px;
+    height: 17px;
+  }
+  /*【美化表单】行编辑table的title字体改小一号*/
+  .vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title{
+    font-size: 13px;
+  }
+
+}
diff --git a/src/components/jeecg/JVxeTable/src/style/reload-effect.less b/src/components/jeecg/JVxeTable/src/style/reload-effect.less
new file mode 100644
index 0000000..0333c81
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/style/reload-effect.less
@@ -0,0 +1,44 @@
+.j-vxe-reload-effect-box {
+  &,
+  .j-vxe-reload-effect-span {
+    display: inline;
+    height: 100%;
+    position: relative;
+  }
+
+  .j-vxe-reload-effect-span {
+    &.layer-top {
+      display: inline-block;
+      width: 100%;
+
+      position: absolute;
+      z-index: 2;
+      background-color: white;
+
+      transform-origin: 0 0;
+      animation: reload-effect 1.5s forwards;
+    }
+
+    &.layer-bottom {
+      z-index: 1;
+    }
+  }
+
+  // 定义动画
+  @keyframes reload-effect {
+    0% {
+      opacity: 1;
+      transform: rotateX(0);
+    }
+    10% {
+      opacity: 1;
+    }
+    90% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+      transform: rotateX(180deg);
+    }
+  }
+}
diff --git a/src/components/jeecg/JVxeTable/src/style/vxe.const.less b/src/components/jeecg/JVxeTable/src/style/vxe.const.less
new file mode 100644
index 0000000..49db4e3
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/style/vxe.const.less
@@ -0,0 +1,2 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-j-vxe-table';
diff --git a/src/components/jeecg/JVxeTable/src/style/vxe.dark.less b/src/components/jeecg/JVxeTable/src/style/vxe.dark.less
new file mode 100644
index 0000000..b050917
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/style/vxe.dark.less
@@ -0,0 +1,124 @@
+@import 'vxe.const';
+// update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+html[data-theme='dark'] { 
+  --vxe-table-body-background-color: #151515;
+  --vxe-table-footer-background-color: #151515;
+  --vxe-table-border-color: #606060;
+  --vxe-table-popup-border-color:#606060;
+  --vxe-table-row-hover-background-color:#1e1e1e;
+  --vxe-input-border-color: #606266;
+}
+// update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+[data-theme='dark'] .@{prefix-cls} {
+  @fontColor: #c9d1d9;
+  @bgColor: #151515;
+  @borderColor: #606060;
+
+  .vxe-cell--item,
+  .vxe-cell--title,
+  .vxe-cell,
+  .vxe-body--expanded-cell {
+    color: @fontColor;
+  }
+
+  .vxe-toolbar {
+    // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+    background-color: #1f1f1f;
+    // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+  }
+
+  .vxe-table--render-default .vxe-table--body-wrapper,
+  .vxe-table--render-default .vxe-table--footer-wrapper {
+    background-color: @bgColor;
+  }
+
+  // 外边框
+  .vxe-table--render-default .vxe-table--border-line {
+    border-color: @borderColor;
+  }
+
+  // header 下边框
+  .vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
+    border-bottom-color: @borderColor;
+  }
+
+  // footer 上边框
+  .vxe-table--render-default .vxe-table--footer-wrapper {
+    border-top-color: @borderColor;
+  }
+
+  // 展开行 边框
+  .vxe-table--render-default .vxe-body--expanded-column {
+    border-bottom-color: @borderColor;
+  }
+
+  // 行斑马纹
+  .vxe-table--render-default .vxe-body--row.row--stripe {
+    background-color: #1e1e1e;
+  }
+
+  // 行hover
+  .vxe-table--render-default .vxe-body--row.row--hover {
+    background-color: #262626;
+  }
+
+  // 选中行
+  .vxe-table--render-default .vxe-body--row.row--checked {
+    background-color: #44403a;
+
+    &.row--hover {
+      background-color: #59524b;
+    }
+  }
+
+  .vxe-table--render-default.border--default .vxe-table--header-wrapper,
+  .vxe-table--render-default.border--full .vxe-table--header-wrapper,
+  .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
+    background-color: #1d1d1d;
+  }
+
+  .vxe-table--render-default.border--default .vxe-body--column,
+  .vxe-table--render-default.border--default .vxe-footer--column,
+  .vxe-table--render-default.border--default .vxe-header--column,
+  .vxe-table--render-default.border--inner .vxe-body--column,
+  .vxe-table--render-default.border--inner .vxe-footer--column,
+  .vxe-table--render-default.border--inner .vxe-header--column {
+    background-image: linear-gradient(#1d1d1d, #1d1d1d);
+  }
+
+  // 列宽拖动
+  .vxe-header--column .vxe-resizable.is--line:before {
+    background-color: #505050;
+  }
+
+  // checkbox
+  .vxe-custom--option .vxe-checkbox--icon:before,
+  .vxe-export--panel-column-option .vxe-checkbox--icon:before,
+  .vxe-table--filter-option .vxe-checkbox--icon:before,
+  .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon:before {
+    background-color: @bgColor;
+    border-color: @borderColor;
+  }
+
+  .vxe-toolbar .vxe-custom--option-wrapper {
+    background-color: @bgColor;
+  }
+
+  .vxe-button {
+    background-color: @bgColor;
+    border-color: @borderColor;
+  }
+
+  .vxe-button.type--button:not(.is--disabled):active {
+    background-color: @bgColor;
+  }
+
+  .vxe-toolbar .vxe-custom--wrapper.is--active > .vxe-button {
+    background-color: @bgColor;
+  }
+
+  .vxe-toolbar .vxe-custom--option-wrapper .vxe-custom--footer button {
+    color: @fontColor;
+  }
+}
+
diff --git a/src/components/jeecg/JVxeTable/src/types/JVxeComponent.ts b/src/components/jeecg/JVxeTable/src/types/JVxeComponent.ts
new file mode 100644
index 0000000..1e7009a
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/types/JVxeComponent.ts
@@ -0,0 +1,87 @@
+import { ComponentInternalInstance, ExtractPropTypes } from 'vue';
+import { useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
+
+export namespace JVxeComponent {
+  export type Props = ExtractPropTypes<ReturnType<typeof useJVxeCompProps>>;
+
+  interface EnhancedCtx {
+    props?: JVxeComponent.Props;
+    context?: any;
+  }
+
+  /** 组件增强类型 */
+  export interface Enhanced {
+    // 注册参数（详见：https://xuliangzhan_admin.gitee.io/vxe-table/v4/table/renderer/edit）
+    installOptions: {
+      // 自动聚焦的 class 类名
+      autofocus?: string;
+    } & Recordable;
+    // 事件拦截器（用于兼容）
+    interceptor: {
+      // 已实现：event.clearActived
+      // 说明：比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
+      'event.clearActived'?: (params, event, target, ctx?: EnhancedCtx) => boolean;
+      // 自定义：event.clearActived.className
+      // 说明：比原生的多了一个参数：className，用于判断点击的元素的样式名（递归到顶层）
+      'event.clearActived.className'?: (params, event, target, ctx?: EnhancedCtx) => boolean;
+    };
+    // 【功能开关】
+    switches: {
+      // 是否使用 editRender 模式（仅当前组件，并非全局）
+      // 如果设为true，则表头上方会出现一个可编辑的图标
+      editRender?: boolean;
+      // false = 组件触发后可视）；true = 组件一直可视
+      visible?: boolean;
+    };
+    // 【切面增强】切面事件处理，一般在某些方法执行后同步执行
+    aopEvents: {
+      // 单元格被激活编辑时会触发该事件
+      editActived?: (this: ComponentInternalInstance, ...args) => any;
+      // 单元格编辑状态下被关闭时会触发该事件
+      editClosed?: (this: ComponentInternalInstance, ...args) => any;
+      // 返回值决定单元格是否可以编辑
+      activeMethod?: (this: ComponentInternalInstance, ...args) => boolean;
+    };
+    // 【翻译增强】可以实现例如select组件保存的value，但是span模式下需要显示成text
+    translate: {
+      // 是否启用翻译
+      enabled?: boolean;
+      /**
+       * 【翻译处理方法】如果handler留空，则使用默认的翻译方法
+       *
+       * @param value 需要翻译的值
+       * @returns{*} 返回翻译后的数据
+       */
+      handler?: (value, ctx?: EnhancedCtx) => any;
+    };
+    /**
+     * 【获取值增强】组件抛出的值
+     *
+     * @param value 保存到数据库里的值
+     * @returns{*} 返回处理后的值
+     */
+    getValue: (value, ctx?: EnhancedCtx) => any;
+    /**
+     * 【设置值增强】设置给组件的值
+     *
+     * @param value 组件触发的值
+     * @returns{*} 返回处理后的值
+     */
+    setValue: (value, ctx?: EnhancedCtx) => any;
+    /**
+     * 【新增行增强】在用户点击新增时触发的事件，返回新行的默认值
+     *
+     * @param defaultValue 默认值
+     * @param row 行数据
+     * @param column 列配置，.params 是用户配置的参数
+     * @param $table vxe 实例
+     * @param renderOptions 渲染选项
+     * @param params 可以在这里获取 $table
+     *
+     * @returns 返回新值
+     */
+    createValue: (defaultValue: any, ctx?: EnhancedCtx) => any;
+  }
+
+  export type EnhancedPartial = Partial<Enhanced>;
+}
diff --git a/src/components/jeecg/JVxeTable/src/types/JVxeTypes.ts b/src/components/jeecg/JVxeTable/src/types/JVxeTypes.ts
new file mode 100644
index 0000000..6b7601a
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/types/JVxeTypes.ts
@@ -0,0 +1,68 @@
+/** 组件类型 */
+export enum JVxeTypes {
+  // 行号列
+  rowNumber = 'row-number',
+  // 选择列
+  rowCheckbox = 'row-checkbox',
+  // 单选列
+  rowRadio = 'row-radio',
+  // 展开列
+  rowExpand = 'row-expand',
+  // 上下排序
+  rowDragSort = 'row-drag-sort',
+
+  input = 'input',
+  inputNumber = 'input-number',
+  textarea = 'textarea',
+  select = 'select',
+  date = 'date',
+  datetime = 'datetime',
+  time = 'time',
+  checkbox = 'checkbox',
+  upload = 'upload',
+  // 下拉搜索
+  selectSearch = 'select-search',
+  // 下拉多选
+  selectMultiple = 'select-multiple',
+  // 进度条
+  progress = 'progress',
+  //部门选择
+  departSelect = 'depart-select',
+  //用户选择
+  userSelect = 'user-select',
+
+  // 拖轮Tags（暂无用）
+  tags = 'tags', // TODO 待实现
+
+  slot = 'slot',
+  normal = 'normal',
+  hidden = 'hidden',
+
+  // 以下为自定义组件
+  popup = 'popup',
+  selectDictSearch = 'selectDictSearch',
+  radio = 'radio',
+  image = 'image',
+  file = 'file',
+  // 省市区
+  pca = 'pca',
+  // 关联记录
+  linkTable = 'link-table',
+  // update-begin--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+  // 自定义树控件
+  treeSelect = 'sel-tree',
+  // 分类字典树
+  catTreeSelect = 'cat-tree',
+  // update-end--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+}
+
+// 为了防止和 vxe 内置的类型冲突，所以加上一个前缀
+// 前缀是自动加的，代码中直接用就行（JVxeTypes.input）
+export const JVxeTypePrefix = 'j-';
+
+/** VxeTable 渲染类型 */
+export enum JVxeRenderType {
+  editer = 'editer',
+  spaner = 'spaner',
+  default = 'default',
+}
diff --git a/src/components/jeecg/JVxeTable/src/types/index.ts b/src/components/jeecg/JVxeTable/src/types/index.ts
new file mode 100644
index 0000000..a7dca8e
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/types/index.ts
@@ -0,0 +1,120 @@
+import type { Component, Ref, ComputedRef, ExtractPropTypes } from 'vue';
+import type { VxeColumnProps } from 'vxe-table/types/column';
+import type { JVxeComponent } from './JVxeComponent';
+import type { VxeGridInstance, VxeTablePropTypes } from 'vxe-table';
+import { JVxeTypes } from './JVxeTypes';
+import { vxeProps } from '../vxe.data';
+import { useMethods } from '../hooks/useMethods';
+import { getJVxeAuths } from '../utils/authUtils';
+
+export type JVxeTableProps = Partial<ExtractPropTypes<ReturnType<typeof vxeProps>>>;
+export type JVxeTableMethods = ReturnType<typeof useMethods>['methods'];
+
+export type JVxeVueComponent = {
+  enhanced?: JVxeComponent.EnhancedPartial;
+} & Component;
+
+type statisticsTypes = 'sum' | 'average';
+
+export type JVxeColumn = IJVxeColumn & Recordable;
+
+/**
+ * JVxe 列配置项
+ */
+export interface IJVxeColumn extends VxeColumnProps {
+  type?: any;
+  // 行唯一标识
+  key: string;
+  // 表单预期值的提示信息，可以使用${...}变量替换文本
+  placeholder?: string;
+  // 默认值
+  defaultValue?: any;
+  // 是否禁用当前列，默认false
+  disabled?: boolean;
+  // 校验规则 TODO 类型待定义
+  validateRules?: any;
+  // 联动下一级的字段key
+  linkageKey?: string;
+  // 自定义传入组件的其他属性
+  props?: Recordable;
+  allowClear?: boolean; // 允许清除
+  // 【inputNumber】是否是统计列，只有 inputNumber 才能设置统计列。统计列：sum 求和；average 平均值
+  statistics?: boolean | [statisticsTypes, statisticsTypes?];
+  // 【select】
+  dictCode?: string; // 字典 code
+  options?: { title?: string; label?: string; text?: string; value: any; disabled?: boolean }[]; // 下拉选项列表
+  allowInput?: boolean; // 允许输入
+  allowSearch?: boolean; // 允许搜索
+  // 【slot】
+  slotName?: string; // 插槽名
+  // 【checkbox】
+  customValue?: [any, any]; // 自定义值
+  defaultChecked?: boolean; // 默认选中
+  // 【upload】 upload
+  btnText?: string; // 上传按钮文字
+  token?: boolean; // 是否传递 token
+  responseName?: string; // 返回取值名称
+  action?: string; // 上传地址
+  allowRemove?: boolean; // 是否允许删除
+  allowDownload?: boolean; // 是否允许下载
+  // 【下拉字典搜索】
+  dict?: string; // 字典表配置信息：数据库表名,显示字段名,存储字段名
+  async?: boolean; // 是否同步模式
+  tipsContent?: string;
+  // 【popup】
+  popupCode?: string;
+  field?: string;
+  orgFields?: string;
+  destFields?: string;
+}
+
+export interface JVxeRefs {
+  gridRef: Ref<VxeGridInstance | undefined>;
+  subPopoverRef: Ref<any>;
+  detailsModalRef: Ref<any>;
+}
+
+export interface JVxeDataProps {
+  prefixCls: string;
+  // vxe 实例ID
+  caseId: string;
+  // vxe 最终 columns
+  vxeColumns?: ComputedRef;
+  // vxe 最终 dataSource
+  vxeDataSource: Ref<Recordable[]>;
+  // 记录滚动条位置
+  scroll: { top: number; left: number };
+  // 当前是否正在滚动
+  scrolling: Ref<boolean>;
+  // vxe 默认配置
+  defaultVxeProps: object;
+  // 绑定左侧选择框
+  selectedRows: Ref<any[]>;
+  // 绑定左侧选择框已选择的id
+  selectedRowIds: Ref<string[]>;
+  disabledRowIds: string[];
+  // 统计列配置
+  statistics: {
+    has: boolean;
+    sum: string[];
+    average: string[];
+  };
+  // 所有和当前表格相关的授权信息
+  authsMap: Ref<Nullable<ReturnType<typeof getJVxeAuths>>>;
+  // 内置 EditRules
+  innerEditRules: Recordable<VxeTablePropTypes.EditRules[]>;
+  // 联动下拉选项（用于隔离不同的下拉选项）
+  // 内部联动配置，map
+  innerLinkageConfig: Map<string, any>;
+  // 开启了数据刷新效果的行
+  reloadEffectRowKeysMap: Recordable;
+}
+
+export interface JVxeLinkageConfig {
+  // 联动第一级的 key
+  key: string;
+  // 获取数据的方法
+  requestData: (parent: string) => Promise<any>;
+}
+
+export { JVxeTypes };
diff --git a/src/components/jeecg/JVxeTable/src/utils/authUtils.ts b/src/components/jeecg/JVxeTable/src/utils/authUtils.ts
new file mode 100644
index 0000000..689e381
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/utils/authUtils.ts
@@ -0,0 +1,48 @@
+/* JVxeTable 行编辑 权限 */
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+/**
+ * JVxe 专用，获取权限
+ * @param prefix
+ */
+export function getJVxeAuths(prefix) {
+  const permissionStore = usePermissionStoreWithOut();
+  prefix = getPrefix(prefix);
+  let { authList, allAuthList } = permissionStore;
+  let authsMap = new Map<string, typeof allAuthList[0]>();
+  if (!prefix || prefix.length == 0) {
+    return authsMap;
+  }
+  // 将所有vxe用到的权限取出来
+  for (let auth of allAuthList) {
+    if (auth.status == '1' && (auth.action || '').startsWith(prefix)) {
+      authsMap.set(auth.action, { ...auth, isAuth: false });
+    }
+  }
+  // 设置是否已授权
+  for (let auth of authList) {
+    let getAuth = authsMap.get(auth.action);
+    if (getAuth != null) {
+      getAuth.isAuth = true;
+    }
+  }
+  // 代码逻辑说明: VUEN-1162 子表按钮没控制
+  let onlineButtonAuths = permissionStore.getOnlineSubTableAuth(prefix);
+  if (onlineButtonAuths && onlineButtonAuths.length > 0) {
+    for (let auth of onlineButtonAuths) {
+      authsMap.set(prefix + 'btn:' + auth, { action: auth, type: 1, status: 1, isAuth: false });
+    }
+  }
+  return authsMap;
+}
+
+/**
+ * 获取前缀
+ * @param prefix
+ */
+export function getPrefix(prefix: string) {
+  if (prefix && !prefix.endsWith(':')) {
+    return prefix + ':';
+  }
+  return prefix;
+}
diff --git a/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts b/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts
new file mode 100644
index 0000000..32c3466
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts
@@ -0,0 +1,55 @@
+import { useDefaultEnhanced } from '../hooks/useJVxeComponent';
+import { isFunction, isObject, isString } from '/@/utils/is';
+import { JVxeTypes } from '../types';
+import { JVxeComponent } from '../types/JVxeComponent';
+import { componentMap } from '../componentMap';
+
+// 已注册的组件增强
+const enhancedMap = new Map<JVxeTypes, JVxeComponent.Enhanced>();
+
+/**
+ * 获取某个组件的增强
+ * @param type JVxeTypes
+ */
+export function getEnhanced(type: JVxeTypes | string): JVxeComponent.Enhanced {
+  let $type: JVxeTypes = <JVxeTypes>type;
+  if (!enhancedMap.has($type)) {
+    let defaultEnhanced = useDefaultEnhanced();
+    if (componentMap.has($type)) {
+      let enhanced = componentMap.get($type)?.enhanced ?? {};
+      if (isObject(enhanced)) {
+        Object.keys(defaultEnhanced).forEach((key) => {
+          let def = defaultEnhanced[key];
+          if (enhanced.hasOwnProperty(key)) {
+            // 方法如果存在就不覆盖
+            if (!isFunction(def) && !isString(def)) {
+              enhanced[key] = Object.assign({}, def, enhanced[key]);
+            }
+          } else {
+            enhanced[key] = def;
+          }
+        });
+        enhancedMap.set($type, <JVxeComponent.Enhanced>enhanced);
+        return <JVxeComponent.Enhanced>enhanced;
+      }
+    } else {
+      throw new Error(`[JVxeTable] ${$type} 组件尚未注册，获取增强失败`);
+    }
+    enhancedMap.set($type, <JVxeComponent.Enhanced>defaultEnhanced);
+  }
+  return <JVxeComponent.Enhanced>enhancedMap.get($type);
+}
+
+/** 辅助方法：替换${...}变量 */
+export function replaceProps(col, value) {
+  if (value && typeof value === 'string') {
+    let text = value;
+    text = text.replace(/\${title}/g, col.title);
+    text = text.replace(/\${key}/g, col.key);
+    text = text.replace(/\${defaultValue}/g, col.defaultValue);
+    return text;
+  }
+  return value;
+}
+
+
diff --git a/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts b/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts
new file mode 100644
index 0000000..74cae91
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/utils/registerUtils.ts
@@ -0,0 +1,150 @@
+import type { Component } from 'vue';
+import { h } from 'vue';
+import VXETable from 'vxe-table';
+import { definedComponent, addComponent, componentMap, spanEnds, excludeKeywords } from '../componentMap';
+import { JVxeRenderType, JVxeTypePrefix, JVxeTypes } from '../types/JVxeTypes';
+import { getEnhanced } from './enhancedUtils';
+import { isFunction } from '/@/utils/is';
+
+/**
+ * 判断某个组件是否已注册
+ * @param type
+ */
+export function isRegistered(type: JVxeTypes | string) {
+  if (excludeKeywords.includes(<JVxeTypes>type)) {
+    return true;
+  }
+  return componentMap.has(type);
+}
+
+/**
+ * 注册vxe自定义组件
+ *
+ * @param type
+ * @param component 编辑状态显示的组件
+ * @param spanComponent 非编辑状态显示的组件，可以为空
+ */
+export function registerComponent(type: JVxeTypes, component: Component, spanComponent?: Component) {
+  addComponent(type, component, spanComponent);
+  registerOneComponent(type);
+}
+
+/**
+ * 异步注册vxe自定义组件
+ *
+ * @param type
+ * @param promise
+ */
+export async function registerAsyncComponent(type: JVxeTypes, promise: Promise<any>) {
+  const result = await promise;
+  if (isFunction(result.installJVxe)) {
+    result.install((component: Component, spanComponent?: Component) => {
+      addComponent(type, component, spanComponent);
+      registerOneComponent(type);
+    });
+  } else {
+    addComponent(type, result.default);
+    registerOneComponent(type);
+  }
+}
+
+/**
+ * 2024-03-08
+ * liaozhiyang
+ * 异步注册vxe自定义组件
+ * 【QQYUN-8241】
+ * @param type
+ * @param promise
+ */
+export function registerASyncComponentReal(type: JVxeTypes, component) {
+  addComponent(type, component);
+  registerOneComponent(type);
+}
+
+/**
+ * 安装所有vxe组件
+ */
+export function registerAllComponent() {
+  definedComponent();
+  // 遍历所有组件批量注册
+  const components = [...componentMap.keys()];
+  components.forEach((type) => {
+    if (!type.endsWith(spanEnds)) {
+      registerOneComponent(<JVxeTypes>type);
+    }
+  });
+}
+
+/**
+ * 注册单个vxe组件
+ *
+ * @param type 组件 type
+ */
+export function registerOneComponent(type: JVxeTypes) {
+  const component = componentMap.get(type);
+  if (component) {
+    const switches = getEnhanced(type).switches;
+    if (switches.editRender && !switches.visible) {
+      createEditRender(type, component);
+    } else {
+      createCellRender(type, component);
+    }
+  } else {
+    throw new Error(`【registerOneComponent】"${type}"不存在于componentMap中`);
+  }
+}
+
+/** 注册可编辑组件 */
+function createEditRender(type: JVxeTypes, component: Component, spanComponent?: Component) {
+  // 获取当前组件的增强
+  const enhanced = getEnhanced(type);
+  if (!spanComponent) {
+    if (componentMap.has(type + spanEnds)) {
+      spanComponent = componentMap.get(type + spanEnds);
+    } else {
+      // 默认的 span 组件为 normal
+      spanComponent = componentMap.get(JVxeTypes.normal);
+    }
+  }
+  // 添加渲染
+  VXETable.renderer.add(JVxeTypePrefix + type, {
+    // 可编辑模板
+    renderEdit: createRender(type, component, JVxeRenderType.editer),
+    // 显示模板
+    renderCell: createRender(type, spanComponent, JVxeRenderType.spaner),
+    // 增强注册
+    ...enhanced.installOptions,
+  });
+}
+
+/** 注册普通组件 */
+function createCellRender(type: JVxeTypes, component: Component = <Component>componentMap.get(JVxeTypes.normal)) {
+  // 获取当前组件的增强
+  const enhanced = getEnhanced(type);
+  VXETable.renderer.add(JVxeTypePrefix + type, {
+    // 默认显示模板
+    renderDefault: createRender(type, component, JVxeRenderType.default),
+    // 增强注册
+    ...enhanced.installOptions,
+  });
+}
+
+function createRender(type, component, renderType) {
+  return function (renderOptions, params) {
+    // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    // 为每个 cell 生成唯一 key，防止相邻列（值相同但 options 不同）被错误复用
+    const rowId = params.row?.id ?? params.rowIndex ?? '';
+    const colId = params.column?.property ?? params.column?.id ?? '';
+    const cellKey = `cell-${rowId}-${colId}`;
+    // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    return [
+      h(component, {
+        key: cellKey,
+        type: type,
+        params: params,
+        renderOptions: renderOptions,
+        renderType: renderType,
+      }),
+    ];
+  };
+}
diff --git a/src/components/jeecg/JVxeTable/src/utils/vxeUtils.ts b/src/components/jeecg/JVxeTable/src/utils/vxeUtils.ts
new file mode 100644
index 0000000..108fd67
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/utils/vxeUtils.ts
@@ -0,0 +1,21 @@
+/**
+ *
+ * 根据 tagName 获取父级节点
+ *
+ * @param dom 一级dom节点
+ * @param tagName 标签名，不区分大小写
+ */
+export function getParentNodeByTagName(dom: HTMLElement, tagName: string = 'body'): HTMLElement | null {
+  if (tagName === 'body') {
+    return document.body;
+  }
+  if (dom.parentElement) {
+    if (dom.parentElement.tagName.toLowerCase() === tagName.trim().toLowerCase()) {
+      return dom.parentElement;
+    } else {
+      return getParentNodeByTagName(dom.parentElement, tagName);
+    }
+  } else {
+    return null;
+  }
+}
diff --git a/src/components/jeecg/JVxeTable/src/vxe.data.ts b/src/components/jeecg/JVxeTable/src/vxe.data.ts
new file mode 100644
index 0000000..e603dbd
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/src/vxe.data.ts
@@ -0,0 +1,121 @@
+import { propTypes } from '/@/utils/propTypes';
+
+export const vxeProps = () => ({
+  rowKey: propTypes.string.def('id'),
+  // 列信息
+  columns: {
+    type: Array,
+    required: true,
+  },
+  // 数据源
+  dataSource: {
+    type: Array,
+    required: true,
+  },
+  authPre: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  // 是否显示工具栏
+  toolbar: propTypes.bool.def(false),
+  // 工具栏配置
+  toolbarConfig: propTypes.object.def(() => ({
+    // prefix 前缀；suffix 后缀；
+    slots: ['prefix', 'suffix'],
+    // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮；collapse 展开收起
+    btns: ['add', 'remove', 'clearSelection'],
+  })),
+  // 是否显示行号
+  rowNumber: propTypes.bool.def(false),
+  // 固定行号位置或者不固定 【QQYUN-8405】
+  rowNumberFixed: propTypes.oneOf(['left', 'none']).def('left'),
+  // 代码逻辑说明: 【issues/1162】JVxeTable列过长（出现横向滚动条）时无法拖拽排序
+  dragSortFixed: propTypes.oneOf(['left', 'none']).def('left'),
+  rowSelectionFixed: propTypes.oneOf(['left', 'none']).def('left'),
+  // 是否可选择行
+  rowSelection: propTypes.bool.def(false),
+  // 选择行类型
+  rowSelectionType: propTypes.oneOf(['checkbox', 'radio']).def('checkbox'),
+  // 是否可展开行
+  rowExpand: propTypes.bool.def(false),
+  // 展开行配置
+  expandConfig: propTypes.object.def(() => ({})),
+  // 是否可插入行
+  insertRow: propTypes.bool.def(true),
+  // 页面是否在加载中
+  loading: propTypes.bool.def(false),
+  // 表格高度
+  height: propTypes.oneOfType([propTypes.number, propTypes.string]).def('auto'),
+  // 最大高度
+  maxHeight: {
+    type: Number,
+    default: () => null,
+  },
+  // 要禁用的行
+  disabledRows: propTypes.object.def(() => ({})),
+  // 是否禁用全部组件
+  disabled: propTypes.bool.def(false),
+  // 是否可拖拽排序（有固定列的情况下无法拖拽排序，仅可上下排序）
+  dragSort: propTypes.bool.def(false),
+  // 排序字段保存的Key
+  sortKey: propTypes.string.def('orderNum'),
+  // 排序序号开始值，默认为 0
+  sortBegin: propTypes.number.def(0),
+  // 大小，可选值有：medium（中）、small（小）、mini（微）
+  size: propTypes.oneOf(['medium', 'small', 'mini']).def('medium'),
+  // 是否显示边框线
+  bordered: propTypes.bool.def(false),
+  // 自定义列配置 默认继承 setup.toolbar.custom
+  custom: propTypes.bool.def(false),
+  // 分页器参数，设置了即可显示分页器
+  pagination: propTypes.object.def(() => ({})),
+  // 点击行时是否显示子表单
+  clickRowShowSubForm: propTypes.bool.def(false),
+  // 点击行时是否显示主表单
+  clickRowShowMainForm: propTypes.bool.def(false),
+  // 是否点击选中行，优先级最低
+  clickSelectRow: propTypes.bool.def(false),
+  // 是否开启 reload 数据效果
+  reloadEffect: propTypes.bool.def(false),
+  // 校验规则
+  editRules: propTypes.object.def(() => ({})),
+  // 是否异步删除行，如果你要实现异步删除，那么需要把这个选项开启，
+  // 在remove事件里调用confirmRemove方法才会真正删除（除非删除的全是新增的行）
+  asyncRemove: propTypes.bool.def(false),
+  // 是否一直显示组件，如果为false则只有点击的时候才出现组件
+  // 注：该参数不能动态修改；如果行、列字段多的情况下，会根据机器性能造成不同程度的卡顿。
+  // TODO 新版vxe-table取消了 visible 参数，导致无法实现该功能
+  alwaysEdit: propTypes.bool.def(false),
+  // 联动配置，数组，详情配置见文档
+  linkageConfig: propTypes.array.def(() => []),
+  // 是否开启使用 webSocket 无痕刷新
+  socketReload: propTypes.bool.def(false),
+  // 相同的socketKey更改时会互相刷新
+  socketKey: propTypes.string.def('vxe-default'),
+  // 新增行时切换行的激活状态
+  addSetActive: propTypes.bool.def(true),
+  // 是否开启键盘编辑
+  keyboardEdit: propTypes.bool.def(false),
+  // 横向虚拟滚动配置（不支持展开行）
+  // 【QQYUN-7676】x滚动条滚动时字典变成了id
+  scrollX: propTypes.object.def(() => ({ enabled: false })),
+  // 纵向虚拟滚动配置（不支持展开行）
+  scrollY: propTypes.object.def(() => ({ enabled: true })),
+  //【QQYUN-8566】缓存列设置的key（路由页面内唯一）
+  cacheColumnsKey: propTypes.string.def(''),
+  // 代码逻辑说明: 【QQYUN-8785】online表单列位置的id未做限制，拖动其他列到id列上面，同步数据库时报错
+  rowClassName: {
+    type: [String, Function],
+    default: null,
+  },
+  // 不允许拖拽的行 [{'key':field,'value':value}]
+  notAllowDrag: propTypes.array.def(() => []),
+
+  // 新增按钮配置
+  addBtnCfg: propTypes.object,
+  // 删除按钮配置
+  removeBtnCfg: propTypes.object,
+});
+
+export const vxeEmits = ['save', 'added', 'removed', 'inserted', 'dragged', 'selectRowChange', 'pageChange', 'valueChange', 'blur'];
diff --git a/src/components/jeecg/JVxeTable/types.ts b/src/components/jeecg/JVxeTable/types.ts
new file mode 100644
index 0000000..7e668f7
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/types.ts
@@ -0,0 +1,6 @@
+import JVxeTable from './src/JVxeTable';
+
+export type { JVxeComponent } from './src/types/JVxeComponent';
+export type { JVxeColumn, JVxeLinkageConfig } from './src/types';
+export { JVxeTypes } from './src/types/JVxeTypes';
+export type JVxeTableInstance = InstanceType<typeof JVxeTable>;
diff --git a/src/components/jeecg/JVxeTable/useVxeTableRegister.ts b/src/components/jeecg/JVxeTable/useVxeTableRegister.ts
new file mode 100644
index 0000000..9d2fcb5
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/useVxeTableRegister.ts
@@ -0,0 +1,12 @@
+// 给使用原生vxe-table的页面注册vxe-table组件
+export const useVxeTableRegister = async () => {
+  const app = window['JAppRootInstance'];
+  if (app._context.components.VxeTable) {
+    // 已全局注册
+  } else {
+    const { registerJVxeTable } = await import('/@/components/jeecg/JVxeTable');
+    await registerJVxeTable(app);
+    const { registerJVxeCustom } = await import('/@/components/JVxeCustom');
+    await registerJVxeCustom();
+  }
+}
diff --git a/src/components/jeecg/JVxeTable/utils.ts b/src/components/jeecg/JVxeTable/utils.ts
new file mode 100644
index 0000000..287c45f
--- /dev/null
+++ b/src/components/jeecg/JVxeTable/utils.ts
@@ -0,0 +1,132 @@
+import type { Ref, ComponentInternalInstance } from 'vue';
+import { unref, isRef } from 'vue';
+import { isFunction } from '/@/utils/is';
+
+type dispatchEventOptions = {
+  // JVxeTable 的 props
+  props;
+  // 触发的 event 事件对象
+  $event;
+  // 行、列
+  row?;
+  column?;
+  // JVxeTable的vue3实例
+  instance?: ComponentInternalInstance | any;
+  // 要寻找的className
+  className: string;
+  // 重写找到dom后的处理方法
+  handler?: Fn;
+  // 是否直接执行click方法而不是模拟click事件
+  isClick?: boolean;
+};
+
+/** 模拟触发事件 */
+export function dispatchEvent(options: dispatchEventOptions) {
+  const { props, $event, row, column, instance, className, handler, isClick } = options;
+  if ((!$event || !$event.path) && !instance) {
+    return;
+  }
+  // alwaysEdit 下不模拟触发事件，否者会导致触发两次
+  if (props && props.alwaysEdit) {
+    return;
+  }
+  let getCell = () => {
+    let paths: HTMLElement[] = [...($event?.path ?? [])];
+    // 通过 instance 获取 cell dom对象
+    if (row && column) {
+      let selector = `table.vxe-table--body tbody tr[rowid='${row.id}'] td[colid='${column.id}']`;
+      let cellDom = instance!.vnode?.el?.querySelector(selector);
+      // -update-begin--author:liaozhiyang---date:20230830---for：【QQYUN-6390】解决online新增字段警告（兼容下）
+      if (!cellDom) {
+        cellDom = instance!.$el?.querySelector(selector);
+      }
+      // -update-begin--author:liaozhiyang---date:20230830---for：【QQYUN-6390】解决online新增字段警告（兼容下）
+      if (cellDom) {
+        paths.unshift(cellDom);
+      }
+    }
+    for (const el of paths) {
+      if (el.classList?.contains('vxe-body--column')) {
+        return el;
+      }
+    }
+    return null;
+  };
+  let cell = getCell();
+  if (cell) {
+    window.setTimeout(() => {
+      let getElement = () => {
+        let classList = className.split(' ');
+        if (classList.length > 0) {
+          const getClassName = (cls: string) => {
+            if (cls.startsWith('.')) {
+              return cls.substring(1, cls.length);
+            }
+            return cls;
+          };
+          let get = (target, className, idx = 0) => {
+            let elements = target.getElementsByClassName(getClassName(className));
+            if (elements && elements.length > 0) {
+              return elements[idx];
+            }
+            return null;
+          };
+          let element: HTMLElement = get(cell, classList[0]);
+          for (let i = 1; i < classList.length; i++) {
+            if (!element) {
+              break;
+            }
+            element = get(element, classList[i]);
+          }
+          return element;
+        }
+        return null;
+      };
+      let element = getElement();
+      if (element) {
+        if (isFunction(handler)) {
+          handler(element);
+        } else {
+          // 模拟触发点击事件
+          if (isClick) {
+            element.click();
+          } else {
+            element.dispatchEvent($event);
+          }
+        }
+      }
+    }, 10);
+  } else {
+    console.warn('【JVxeTable】dispatchEvent 获取 cell 失败');
+  }
+}
+
+/** 绑定 VxeTable 数据 */
+export function vModel(value, row, column: Ref<any> | string) {
+  // @ts-ignore
+  let property = isRef(column) ? column.value.property : column;
+  unref(row)[property] = value;
+}
+
+/**
+ * liaozhiyang
+ * 2024-06-20
+ * 判断当前行编辑是否使用了虚拟滚动（并不是开启了就是，还得满足数据数量大于gt值）
+ */
+export function isEnabledVirtualYScroll(props, xTable): boolean {
+  let isRealEnabledVirtual = false;
+  const isEnabledVScroll = props?.scrollY?.enabled;
+  // 100是底层的默认值
+  const gtYNum = props?.scrollY?.gt || 100;
+  if (isEnabledVScroll) {
+    const tableFullData = xTable.internalData.tableFullData;
+    if (gtYNum === 0) {
+      isRealEnabledVirtual = true;
+    } else {
+      if (tableFullData.length > gtYNum) {
+        isRealEnabledVirtual = true;
+      }
+    }
+  }
+  return isRealEnabledVirtual;
+}
diff --git a/src/components/jeecg/OnLine/JPopupOnlReport.vue b/src/components/jeecg/OnLine/JPopupOnlReport.vue
new file mode 100644
index 0000000..5c02b16
--- /dev/null
+++ b/src/components/jeecg/OnLine/JPopupOnlReport.vue
@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <div class="jeecg-basic-table-form-container" v-if="showSearchFlag">
+      <a-form ref="formRef" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <template v-for="(item, index) in queryInfo">
+            <template v-if="item.hidden === '1'">
+              <a-col :md="6" :sm="24" :key="'query' + index" v-show="toggleSearchStatus">
+                <SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
+              </a-col>
+            </template>
+            <template v-else>
+              <a-col :md="6" :sm="24" :key="'query' + index">
+                <SearchFormItem :formElRef="formRef" :queryParam="queryParam" :item="item" :dictOptions="dictOptions"></SearchFormItem>
+              </a-col>
+            </template>
+          </template>
+
+          <a-col :md="6" :sm="8">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
+                </a>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <BasicTable
+      ref="tableRef"
+      :canResize="true"
+      :bordered="true"
+      :loading="loading"
+      :rowKey="combineRowKey"
+      :columns="columns"
+      :showIndexColumn="false"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      :rowSelection="rowSelection"
+      @row-click="clickThenCheck"
+      @change="handleChangeInTable"
+    >
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+      </template>
+      <template #bodyCell="{ text, column }">
+        <template v-if="column.fieldType === 'Image'">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+          <img v-else :src="getImgView(text)" alt="图片不存在" class="cellIamge" @click="viewOnlineCellImage($event, text)" />
+        </template>
+      </template>
+    </BasicTable>
+
+    <!-- 跳转Href的动态组件方式 -->
+    <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+      <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, unref, ref, watch, watchEffect, reactive, computed } from 'vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { usePopBiz } from '/@/components/jeecg/OnLine/hooks/usePopBiz';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { createImgPreview } from '/@/components/Preview/index';
+
+  export default defineComponent({
+    name: 'JPopupOnlReport',
+    components: {
+      SearchFormItem: createAsyncComponent(() => import('/@/components/jeecg/OnLine/SearchFormItem.vue'), { loading: true }),
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: ['multi', 'code', 'id', 'sorter', 'groupId', 'param', 'clickToRowSelect'],
+    emits: ['ok', 'register'],
+    setup(props, { emit, refs }) {
+      const { createMessage } = useMessage();
+      const labelCol = reactive({
+        xs: { span: 24 },
+        sm: { span: 6 },
+      });
+      const wrapperCol = reactive({
+        xs: { span: 24 },
+        sm: { span: 18 },
+      });
+      const formRef = ref();
+      const tableRef = ref();
+      const toggleSearchStatus = ref(false);
+      const attrs = useAttrs();
+      const tableScroll = ref({ x: true });
+      const route = useRoute();
+      console.log('route.query = ',route.query)
+      const getBindValue = Object.assign({}, {routeQuery: route.query}, unref(props), unref(attrs));
+      
+      const [
+        {
+          visibleChange,
+          loadColumnsInfo,
+          dynamicParamHandler,
+          loadData,
+          loadColumnsAndData,
+          handleChangeInTable,
+          combineRowKey,
+          clickThenCheck,
+          filterUnuseSelect,
+          handleExport,
+        },
+        {
+          hrefComponent,
+          visible,
+          rowSelection,
+          checkedKeys,
+          selectRows,
+          pagination,
+          dataSource,
+          columns,
+          loading,
+          title,
+          iSorter,
+          queryInfo,
+          queryParam,
+          dictOptions,
+        },
+      ] = usePopBiz(getBindValue, tableRef);
+
+      pagination.pageSizeOptions = ['10', '100', '300'];
+
+      const showSearchFlag = computed(() => unref(queryInfo) && unref(queryInfo).length > 0);
+      /**
+       *监听code
+       */
+      watch(
+        () => props.code,
+        () => {
+          loadColumnsAndData();
+        },
+        { immediate: true }
+      );
+      /**
+       *监听popup动态参数 支持系统变量语法
+       */
+      watch(
+        () => props.param,
+        () => {
+          if (visible) {
+            dynamicParamHandler();
+            //loadData();
+          }
+        }
+      );
+      /**
+       *监听sorter排序字段
+       */
+      watchEffect(() => {
+        if (props.sorter) {
+          let arr = props.sorter.split('=');
+          if (arr.length === 2 && ['asc', 'desc'].includes(arr[1].toLowerCase())) {
+            iSorter.value = { column: arr[0], order: arr[1].toLowerCase() };
+            // 排序字段受控
+            unref(columns).forEach((col) => {
+              if (col.dataIndex === unref(iSorter).column) {
+                col['sortOrder'] = unref(iSorter).order === 'asc' ? 'ascend' : 'descend';
+              } else {
+                col['sortOrder'] = false;
+              }
+            });
+          } else {
+            console.warn('【JPopup】sorter参数不合法');
+          }
+        }
+      });
+
+      function handleToggleSearch() {
+        toggleSearchStatus.value = !unref(toggleSearchStatus);
+      }
+
+      /**
+       * 导出excel
+       */
+      function onExportXls() {
+        handleExport!();
+      }
+
+      /**
+       * 查询
+       */
+      function searchQuery() {
+        loadData(1);
+      }
+
+      /**
+       * 重置
+       */
+      function searchReset() {
+        queryParam.value = {};
+        loadData(1);
+      }
+
+      /**
+       * 2024-07-24
+       * liaozhiyang
+       * 【TV360X-1756】报表添加图片类型
+       * 图片
+       * @param text
+       */
+      function getImgView(text) {
+        if (text && text.indexOf(',') > 0) {
+          text = text.substring(0, text.indexOf(','));
+        }
+        return getFileAccessHttpUrl(text);
+      }
+      /**
+       * 2024-07-24
+       * liaozhiyang
+       * 【TV360X-1756】报表添加图片类型
+       * 预览列表 cell 图片
+       * @param text
+       */
+      function viewOnlineCellImage(e, text) {
+        e.stopPropagation();
+        if (text) {
+          let imgList: any = [];
+          let arr = text.split(',');
+          for (let str of arr) {
+            if (str) {
+              imgList.push(getFileAccessHttpUrl(str));
+            }
+          }
+          createImgPreview({ imageList: imgList });
+        }
+      }
+
+      return {
+        attrs,
+
+        tableScroll,
+        dataSource,
+        pagination,
+        columns,
+        rowSelection,
+        checkedKeys,
+        loading,
+        title,
+        hrefComponent,
+
+        clickThenCheck,
+        loadData,
+        combineRowKey,
+        handleChangeInTable,
+        visibleChange,
+        queryInfo,
+        queryParam,
+        tableRef,
+        formRef,
+        labelCol,
+        wrapperCol,
+        dictOptions,
+        showSearchFlag,
+        toggleSearchStatus,
+        handleToggleSearch,
+        searchQuery,
+        searchReset,
+        onExportXls,
+        getImgView,
+        viewOnlineCellImage,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .jeecg-basic-table-form-container {
+    padding: 0px;
+
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 0;
+      white-space: nowrap;
+    }
+  }
+
+  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
+    min-height: 0;
+  }
+  :deep(.ant-select-selector){
+    min-width: 95px;
+  }
+  .cellIamge {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/components/jeecg/OnLine/SearchFormItem.vue b/src/components/jeecg/OnLine/SearchFormItem.vue
new file mode 100644
index 0000000..cb766d0
--- /dev/null
+++ b/src/components/jeecg/OnLine/SearchFormItem.vue
@@ -0,0 +1,327 @@
+<template>
+  <a-form-item v-if="item.view === DateTypeEnum.Date" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <template v-if="single_mode === item.mode">
+      <a-date-picker
+        :showTime="false"
+        valueFormat="YYYY-MM-DD"
+        :placeholder="'请选择' + item.label"
+        v-model:value="queryParam[item.field]"
+      ></a-date-picker>
+    </template>
+    <template v-else>
+      <a-date-picker
+        :showTime="false"
+        valueFormat="YYYY-MM-DD"
+        placeholder="开始日期"
+        v-model:value="queryParam[item.field + '_begin']"
+        style="width: calc(50% - 15px)"
+      ></a-date-picker>
+      <span class="group-query-strig">~</span>
+      <a-date-picker
+        :showTime="false"
+        valueFormat="YYYY-MM-DD"
+        placeholder="结束日期"
+        v-model:value="queryParam[item.field + '_end']"
+        style="width: calc(50% - 15px)"
+      ></a-date-picker>
+    </template>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === DateTypeEnum.Datetime" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label :title="item.label">
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <template v-if="single_mode === item.mode">
+      <a-date-picker
+        :placeholder="'请选择' + item.label"
+        :show-time="true"
+        valueFormat="YYYY-MM-DD HH:mm:ss"
+        v-model:value="queryParam[item.field]"
+      ></a-date-picker>
+    </template>
+    <template v-else>
+      <a-date-picker
+        placeholder="选择开始时间"
+        :show-time="true"
+        valueFormat="YYYY-MM-DD HH:mm:ss"
+        v-model:value="queryParam[item.field + '_begin']"
+        style="width: calc(50% - 9px); min-width: 60px"
+      ></a-date-picker>
+      <span class="group-query-strig" style="width: auto; padding: 0 4px">~</span>
+      <a-date-picker
+        placeholder="选择结束时间"
+        :show-time="true"
+        valueFormat="YYYY-MM-DD HH:mm:ss"
+        v-model:value="queryParam[item.field + '_end']"
+        style="width: calc(50% - 9px); min-width: 60px"
+      ></a-date-picker>
+    </template>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === DateTypeEnum.Time" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <template v-if="single_mode === item.mode">
+      <a-date-picker :placeholder="'请选择' + item.label" mode="time" valueFormat="HH:mm:ss" v-model:value="queryParam[item.field]"></a-date-picker>
+    </template>
+    <template v-else>
+      <a-date-picker
+        placeholder="请选择开始时间"
+        mode="time"
+        valueFormat="HH:mm:ss"
+        v-model:value="queryParam[item.field + '_begin']"
+        style="width: calc(50% - 15px)"
+      ></a-date-picker>
+      <span class="group-query-strig">~</span>
+      <a-date-picker
+        placeholder="请选择结束时间"
+        mode="time"
+        valueFormat="HH:mm:ss"
+        v-model:value="queryParam[item.field + '_end']"
+        style="width: calc(50% - 15px)"
+      ></a-date-picker>
+    </template>
+  </a-form-item>
+
+  <a-form-item
+    v-else-if="item.view === CompTypeEnum.List || item.view === CompTypeEnum.Radio || item.view === CompTypeEnum.Switch"
+    :labelCol="labelCol"
+    :class="'jeecg-online-search'"
+  >
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JDictSelectTag v-if="item.config === '1'" :placeholder="'请选择' + item.label" v-model="queryParam[item.field]" :dictCode="getDictCode(item)">
+    </JDictSelectTag>
+    <a-select v-else :placeholder="'请选择' + item.label" v-model:value="queryParam[item.field]">
+      <template v-for="(obj, index) in dictOptions[getDictOptionKey(item)]" :key="index">
+        <a-select-option :value="obj.value"> {{ obj.text }}</a-select-option>
+      </template>
+    </a-select>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.SelTree" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JTreeSelect
+      :placeholder="'请选择' + item.label"
+      v-model:value="queryParam[item.field]"
+      :dict="item.dict"
+      :pidField="item.pidField"
+      :pidValue="item.pidValue"
+      :hasChildField="item.hasChildField"
+      load-triggle-change
+    >
+    </JTreeSelect>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.CatTree" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JCategorySelect :pcode="item.pcode" v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" />
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.SelSearch" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JOnlineSearchSelect v-model:value="queryParam[item.field]" :placeholder="'请选择'+item.label" :fieldId="item.fieldId"/>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.SelUser" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JSelectUserByDept v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label"></JSelectUserByDept>
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view == CompTypeEnum.SelDepart" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JSelectDept v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" />
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.Popup" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JPopup
+      :placeholder="'请选择' + item.label"
+      v-model:value="queryParam[item.field]"
+      :formElRef="formElRef"
+      :code="item.dictTable"
+      :field-config="item.dictCode"
+      :multi="true"
+    />
+  </a-form-item>
+
+  <a-form-item v-else-if="item.view === CompTypeEnum.Pca" :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <JAreaLinkage :placeholder="'请选择' + item.label" v-model:value="queryParam[item.field]" />
+  </a-form-item>
+  <!--TODO 缺少的组件-->
+  <a-form-item
+    v-else-if="item.view === CompTypeEnum.Checkbox || item.view === CompTypeEnum.ListMulti"
+    :labelCol="labelCol"
+    :label="item.label"
+    :class="'jeecg-online-search'"
+  >
+    <!-- <j-select-multiple
+                v-if="item.config==='1'"
+                :placeholder=" '请选择'+item.label "
+                v-model="queryParam[item.field]"
+                :dictCode="getDictCode(item)">
+        </j-select-multiple>
+        <j-select-multiple
+                v-else
+                :placeholder=" '请选择'+item.label "
+                :options="dictOptions[item.dbField]"
+                v-model="queryParam[item.field]">
+        </j-select-multiple>-->
+  </a-form-item>
+
+  <a-form-item v-else :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+    <template v-if="single_mode === item.mode && 'string'== item.view">
+      <j-input :placeholder="'请输入' + item.label" v-model:value="queryParam[item.field]"></j-input>
+    </template>
+    <template v-else-if="single_mode === item.mode">
+      <a-input :placeholder="'请输入' + item.label" v-model:value="queryParam[item.field]"></a-input>
+    </template>
+    <template v-else>
+      <a-input :placeholder="'请输入开始' + item.label" v-model:value="queryParam[item.field + '_begin']" style="width: calc(50% - 15px)"></a-input>
+      <span class="group-query-strig">~</span>
+      <a-input :placeholder="'请输入结束' + item.label" v-model:value="queryParam[item.field + '_end']" style="width: calc(50% - 15px)"></a-input>
+    </template>
+  </a-form-item>
+</template>
+
+<script lang="ts">
+  //import JOnlineSearchSelect from '@/components/online/autoform/comp/JOnlineSearchSelect'
+  import { defineComponent, ref } from 'vue';
+  import { DateTypeEnum } from '/@/enums/DateTypeEnum.ts';
+  import { CompTypeEnum } from '/@/enums/CompTypeEnum.ts';
+  import { JDictSelectTag, JTreeSelect, JCategorySelect, JSelectUserByDept, JSelectDept, JPopup, JAreaLinkage,JInput,JSearchSelect } from '/@/components/Form';
+  export default defineComponent({
+    name: 'SearchFormItem',
+    components: {
+      //JOnlineSearchSelect
+      JDictSelectTag,
+      JTreeSelect,
+      JCategorySelect,
+      JSelectUserByDept,
+      JSelectDept,
+      JPopup,
+      JAreaLinkage,
+      JInput,
+    },
+    props: {
+      formElRef: {
+        type: Object,
+        default: () => {},
+      },
+      item: {
+        type: Object,
+        default: () => {},
+        required: true,
+      },
+      dictOptions: {
+        type: Object,
+        default: () => {},
+        required: true,
+      },
+      queryParam: {
+        type: Object,
+        default: () => {},
+        required: true,
+      },
+    },
+    setup(props) {
+      const single_mode = ref('single');
+      console.log('dictOptions===>', props.dictOptions);
+      function getDictCode(item) {
+        if (item.dictTable && item.dictTable.length > 0) {
+          return item.dictTable + ',' + item.dictText + ',' + item.dictCode;
+        } else {
+          return item.dictCode;
+        }
+      }
+
+      function getSqlByDictCode(item) {
+        let { dictTable, dictCode, dictText } = item;
+        let temp = dictTable.toLowerCase();
+        let arr = temp.split('where');
+        let condition = '';
+        if (arr.length > 1) {
+          condition = ' where' + arr[1];
+        }
+        let sql = 'select ' + dictCode + " as 'value', " + dictText + " as 'text' from " + arr[0] + condition;
+        console.log('sql', sql);
+        return sql;
+      }
+
+      function getDictOptionKey(item) {
+        if (item.dbField) {
+          return item.dbField;
+        } else {
+          return item.field;
+        }
+      }
+
+      // 定义查询条件 文本label的最大宽度 比起单纯的控制字体个数更好
+      const labelTextMaxWidth = '120px';
+      const labelCol = {
+        style: {
+          'max-width': labelTextMaxWidth,
+        },
+      };
+      return {
+        labelTextMaxWidth,
+        labelCol,
+        single_mode,
+        getDictOptionKey,
+        getDictCode,
+        getSqlByDictCode,
+        DateTypeEnum,
+        CompTypeEnum,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .group-query-strig {
+    width: 30px;
+    text-align: center;
+    display: inline-block;
+  }
+
+  /* 查询条件左对齐样式设置 */
+  .jeecg-online-search :deep(.ant-form-item-label) {
+    flex: 0 0 auto !important;
+    width: auto;
+  }
+  .jeecg-online-search :deep(.ant-form-item-control) {
+    max-width: 100%;
+  }
+
+  /* label显示宽度 超出显示... */
+  .jeecg-online-search :deep(.label-text) {
+    max-width: v-bind(labelTextMaxWidth);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+  }
+</style>
diff --git a/src/components/jeecg/OnLine/hooks/usePopBiz.ts b/src/components/jeecg/OnLine/hooks/usePopBiz.ts
new file mode 100644
index 0000000..a02592c
--- /dev/null
+++ b/src/components/jeecg/OnLine/hooks/usePopBiz.ts
@@ -0,0 +1,973 @@
+import { reactive, ref, unref, defineAsyncComponent, toRaw, markRaw, isRef, watch, onUnmounted } from 'vue';
+import { httpGroupRequest } from '/@/components/Form/src/utils/GroupRequest';
+import { defHttp } from '/@/utils/http/axios';
+import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { OnlineColumn } from '/@/components/jeecg/OnLine/types/onlineConfig';
+import { h } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { importViewsFile, _eval } from '/@/utils';
+import {getToken} from "@/utils/auth";
+import {replaceUserInfoByExpression} from "@/utils/common/compUtils";
+import { isString } from '/@/utils/is';
+
+export function usePopBiz(ob, tableRef?) {
+  // 代码逻辑说明: 【issues/675】子表字段Popup弹框数据不更新
+  let props: any;
+  if (isRef(ob)) {
+    props = ob.value;
+    const stopWatch = watch(ob, (newVal) => {
+      props = newVal;
+    });
+    onUnmounted(() => stopWatch());
+  } else {
+    props = ob;
+  }
+  const { createMessage } = useMessage();
+  //弹窗可视状态
+  const visible = ref(false);
+  //表格加载
+  const loading = ref(false);
+  //cgRpConfigId
+  const cgRpConfigId = ref('');
+  //标题
+  const title = ref('列表');
+  // 排序字段，默认无排序
+  const iSorter = ref<any>('');
+  // 查询对象
+  const queryInfo = ref([]);
+  // 查询参数
+  const queryParam = ref<any>({});
+  // 动态参数
+  const dynamicParam = ref<any>({});
+  //字典配置项
+  const dictOptions = ref({});
+  //数据集
+  const dataSource = ref<Array<object>>([]);
+  //定义表格信息
+  const columns = ref<Array<object>>([]);
+  // 当前路由
+  const route = useRoute();
+  //定义请求url信息
+  const configUrl = reactive({
+    //列表页加载column和data
+    getColumnsAndData: '/online/cgreport/api/getColumnsAndData/',
+    getColumns: '/online/cgreport/api/getRpColumns/',
+    getData: '/online/cgreport/api/getData/',
+    getQueryInfo: '/online/cgreport/api/getQueryInfo/',
+    export: '/online/cgreport/api/exportManySheetXls/',
+  });
+  //已选择的值
+  const checkedKeys = ref<Array<string | number>>([]);
+  //选择的行记录
+  const selectRows = ref<Array<any>>([]);
+  // 点击单元格选中行 popup需要 但是报表预览不需要
+  let clickThenCheckFlag = true;
+  if (props.clickToRowSelect === false) {
+    clickThenCheckFlag = false;
+  }
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    fixed: true,
+    type: props.multi ? 'checkbox' : 'radio',
+    selectedRowKeys: checkedKeys,
+    selectionRows: selectRows,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 序号列配置
+   */
+  const indexColumnProps = {
+    dataIndex: 'index',
+    width: '15px',
+  };
+  /**
+   * 分页配置
+   */
+  const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    pageSizeOptions: ['10', '20', '30'],
+    // showTotal: (total, range) => {
+    //     return range[0] + '-' + range[1] + ' 共' + total + '条'
+    // },
+    showQuickJumper: true,
+    showSizeChanger: true,
+    total: 0,
+    // 合计逻辑 [待优化 3.0]
+    showTotal: (total) => onShowTotal(total),
+    realPageSize: 10,
+    realTotal: 0,
+    // 是否有合计列，默认为""，在第一次获取到数据之后会设计为ture或者false
+    isTotal: <string | boolean>'',
+    onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize),
+  });
+
+  /**
+   * 表格选择事件
+   * @param selectedRowKeys
+   * @param selectRow
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    // 代码逻辑说明: 【QQYUN-7514】popup单选显示radio
+    if (!props.multi) {
+      selectRows.value = [];
+      checkedKeys.value = [];
+      // selectedRowKeys = [selectedRowKeys[selectedRowKeys.length - 1]];
+    }
+    // 代码逻辑说明: 【QQYUN-4263】跨页选择导出问题
+    if (!selectedRowKeys || selectedRowKeys.length == 0) {
+      selectRows.value = [];
+      checkedKeys.value = [];
+    } else {
+      if (selectRows.value.length > selectedRowKeys.length) {
+        // 取消
+        selectRows.value.forEach((item, index) => {
+          const rowKey = combineRowKey(item);
+          if (!selectedRowKeys.find((key) => key === rowKey)) {
+            selectRows.value.splice(index, 1);
+          }
+        });
+      } else {
+        // 新增
+        const append: any = [];
+        const beforeRowKeys = selectRows.value.map((item) => combineRowKey(item));
+        selectedRowKeys.forEach((key) => {
+          if (!beforeRowKeys.find((item) => item === key)) {
+            // 那就是新增选中的行
+            const row = getRowByKey(key);
+            row && append.push(row);
+          }
+        });
+        selectRows.value = [...selectRows.value, ...append];
+      }
+      checkedKeys.value = [...selectedRowKeys];
+    }
+  }
+  /**
+   * 过滤没用选项
+   * @param selectedRowKeys
+   */
+  function filterUnuseSelect() {
+    selectRows.value = unref(selectRows).filter((item) => {
+      let combineKey = combineRowKey(item);
+      return unref(checkedKeys).indexOf(combineKey) >= 0;
+    });
+  }
+
+  /**
+   * 根据key获取row信息
+   * @param key
+   */
+  function getRowByKey(key) {
+    let row = unref(dataSource).filter((record) => combineRowKey(record) === key);
+    return row && row.length > 0 ? row[0] : '';
+  }
+
+  /**
+   * 加载rowKey
+   */
+  function combineRowKey(record) {
+    let res = record?.id || '';
+    if (props?.rowkey) {
+      // 代码逻辑说明: 【issues/3656】popupdict回显
+      res = record[props.rowkey];
+    } else {
+      Object.keys(record).forEach((key) => {
+        res = key == 'rowIndex' ? record[key] + res : res + record[key];
+      });
+      res = res.length > 50 ? res.substring(0, 50) : res;
+    }
+    return res;
+  }
+
+  /**
+   * 加载列信息
+   */
+  function loadColumnsInfo() {
+    const {code} = handleCodeParams(true)
+    let url = `${configUrl.getColumns}${code}`;
+    //缓存key
+    let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
+    httpGroupRequest(() => defHttp.get({ url }, { isTransformResponse: false, successMessageMode: 'none' }), groupIdKey).then((res) => {
+      if (res.success) {
+        initDictOptionData(res.result.dictOptions);
+        cgRpConfigId.value = res.result.cgRpConfigId;
+        title.value = res.result.cgRpConfigName;
+        let currColumns = res.result.columns;
+        for (let a = 0; a < currColumns.length; a++) {
+          if (currColumns[a].customRender) {
+            let dictCode = currColumns[a].customRender;
+            currColumns[a].customRender = ({ text }) => {
+              return filterMultiDictText(unref(dictOptions)[dictCode], text + '');
+            };
+          }
+          // 排序字段受控
+          if (unref(iSorter) && currColumns[a].dataIndex === unref(iSorter).column) {
+            currColumns[a].sortOrder = unref(iSorter).order === 'asc' ? 'ascend' : 'descend';
+          }
+        }
+        // 代码逻辑说明: 【issues/946】popup列宽和在线报表列宽读取配置
+        currColumns.forEach((item) => {
+          if (item.fieldWidth != null) {
+            if (isString(item.fieldWidth) && item.fieldWidth.trim().length == 0) return;
+            item.width = item.fieldWidth;
+            delete item.fieldWidth;
+          }
+        });
+        if (currColumns[0].key !== 'rowIndex') {
+          currColumns.unshift({
+            title: '序号',
+            dataIndex: 'rowIndex',
+            key: 'rowIndex',
+            width: 60,
+            align: 'center',
+            customRender: function ({ text }) {
+              // 代码逻辑说明: 【QQYUN-7584】popup有合计时序号列会出现NaN
+              if (text == undefined) {
+                return '';
+              } else {
+                return parseInt(text) + 1;
+              }
+            },
+          });
+        }
+        columns.value = [...currColumns];
+        initQueryInfo(null);
+      }
+    });
+  }
+
+  /**
+   * 加载列和数据[列表专用]
+   */
+  function loadColumnsAndData() {
+    // 第一次加载 置空isTotal 在这里调用确保 该方法只是进入页面后 加载一次 其余查询不走该方法
+    pagination.isTotal = '';
+    let url = `${configUrl.getColumnsAndData}${props.id}`;
+
+    const {query} = handleCodeParams()
+    if (query) {
+      url = url + query
+    }
+    //缓存key
+    let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
+    httpGroupRequest(() => defHttp.get({ url }, { isTransformResponse: false, successMessageMode: 'none' }), groupIdKey).then((res) => {
+      if (res.success) {
+        initDictOptionData(res.result.dictOptions);
+        cgRpConfigId.value = props.id;
+        let { columns: metaColumnList, cgreportHeadName, fieldHrefSlots, isGroupTitle } = res.result;
+        title.value = cgreportHeadName;
+        // href 跳转
+        const fieldHrefSlotKeysMap = {};
+        fieldHrefSlots.forEach((item) => (fieldHrefSlotKeysMap[item.slotName] = item));
+        let currColumns: any = handleColumnHrefAndDict(metaColumnList, fieldHrefSlotKeysMap);
+        // 代码逻辑说明: 【issues/946】popup列宽和在线报表列宽读取配置
+        currColumns.forEach((item) => {
+          if (isString(item.fieldWidth) && item.fieldWidth.trim().length == 0) return;
+          if (item.fieldWidth != null) {
+            item.width = item.fieldWidth;
+            delete item.fieldWidth;
+          }
+        });
+
+        // popup需要序号， 普通列表不需要
+        if (clickThenCheckFlag === true) {
+          currColumns.unshift({
+            title: '序号',
+            dataIndex: 'rowIndex',
+            key: 'rowIndex',
+            width: 60,
+            align: 'center',
+            customRender: function ({ text }) {
+              return parseInt(text) + 1;
+            },
+          });
+        }
+
+        // 合并表头
+        if (isGroupTitle === true) {
+          currColumns = handleGroupTitle(currColumns);
+        }
+        columns.value = [...currColumns];
+        initQueryInfo(res.result.data);
+      } else {
+        // 代码逻辑说明: VUEN-583【vue3】JeecgBootException: sql黑名单校验不通过,请联系管理员!,前台无提示
+        createMessage.warning(res.message);
+      }
+    });
+  }
+
+  // 处理动态参数和系统变量
+  function handleCodeParams(onlyCode: boolean = false) {
+    if (!props.code) {
+      return {code: '', query: ''}
+    }
+    const firstIndex = props.code.indexOf('?')
+    if (firstIndex === -1) {
+      return {code: props.code, query: ''}
+    }
+    const code = props.code.substring(0, firstIndex)
+    if (onlyCode) {
+      return {code: code, query: ''}
+    }
+    const queryOrigin = props.code.substring(firstIndex, props.code.length);
+    let query: string
+    // 替换系统变量
+    query = replaceUserInfoByExpression(queryOrigin)
+    // 获取表单值
+    if (typeof props.getFormValues === 'function') {
+      const values = props.getFormValues()
+      // 替换动态参数，如果有 ${xxx} 则替换为实际值
+      query = query.replace(/\${([^}]+)}/g, (_$0, $1) => {
+        if (values[$1] == null) {
+          return ''
+        }
+        return values[$1]
+      });
+
+    }
+
+    return {code, query, queryOrigin}
+  }
+
+  /**
+   * 处理求和的列 合计逻辑 [待优化 3.0]
+   */
+  function handleSumColumn(metaColumnList: OnlineColumn[], dataTotal: number): void {
+    // 获取需要合计列的dataIndex
+    let sumColumnList = getNeedSumColumns(metaColumnList);
+    // 判断是否为第一次获取数据，如果是的话，则需要重新设置pageSize
+    if (pagination.isTotal == '') {
+      if (sumColumnList.length > 0) {
+        pagination.isTotal = true;
+        // 有合计字段时，每次最多查询原pageSize-1条记录，另外需要第一次时将查询的10条中删除最后一条
+        // 删除最后一条数据 如果第一次得到的数据长度等于pageSize的话，则删除最后一条
+        if (dataSource.value.length == pagination.pageSize) {
+          let remove_data = dataSource.value.pop();
+        }
+        pagination.realPageSize = pagination.pageSize - 1;
+      } else {
+        pagination.isTotal = false;
+      }
+    }
+    // 需要添加合计字段
+    if (pagination.isTotal) {
+      let totalRow = {};
+      sumColumnList.forEach((dataIndex) => {
+        let count = 0;
+        dataSource.value.forEach((row) => {
+          // 统计去除null及空数据
+          if (row[dataIndex] != null && row[dataIndex] != '') {
+            count += parseFloat(row[dataIndex]);
+          }
+        });
+        totalRow[dataIndex] = isNaN(count) ? '包含非数字内容' : count.toFixed(2);
+
+        // 长整形时合计不显示.00后缀
+        let v = metaColumnList.find((v) => v.dataIndex == dataIndex);
+        if (v && v.fieldType == 'Long') {
+          totalRow[dataIndex] = parseInt(totalRow[dataIndex]);
+        }
+      });
+      dataSource.value.push(totalRow);
+      pagination.realTotal = dataTotal;
+      pagination.total = Number(dataTotal) + Number(Math.floor(dataTotal / pagination.realPageSize));
+    }
+  }
+
+  /**
+   * 获取需要求和的列 dataIndex
+   * @param columns
+   */
+  function getNeedSumColumns(columns: OnlineColumn[]): string[] {
+    let arr: string[] = [];
+    for (let column of columns) {
+      if (column.isTotal === '1') {
+        arr.push(column.dataIndex!);
+      }
+        // 【VUEN-1569】【online报表】合计无效
+      if (column.children && column.children.length > 0) {
+        let subArray = getNeedSumColumns(column.children);
+        if (subArray.length > 0) {
+          arr.push(...subArray);
+        }
+      }
+    }
+    return arr;
+  }
+
+  /**
+   * 处理列的href和字典翻译
+   */
+  function handleColumnHrefAndDict(columns: OnlineColumn[], fieldHrefSlotKeysMap: {}): OnlineColumn[] {
+    for (let column of columns) {
+      let { customRender, hrefSlotName, fieldType } = column;
+      // online 报表中类型配置为日期（yyyy-MM-dd ），但是实际展示为日期时间格式(yyyy-MM-dd HH:mm:ss) issues/3042
+      if (fieldType == 'Date') {
+        column.customRender = ({ text }) => {
+          if (!text) {
+            return '';
+          }
+          if (text.length > 10) {
+            return text.substring(0, 10);
+          }
+          return text;
+        };
+      } else {
+        if (!hrefSlotName && column.scopedSlots && column.scopedSlots.customRender) {
+          //【Online报表】字典和href互斥 这里通过fieldHrefSlotKeysMap 先找到是href的列
+          if (fieldHrefSlotKeysMap.hasOwnProperty(column.scopedSlots.customRender)) {
+            hrefSlotName = column.scopedSlots.customRender;
+          }
+        }
+        // 如果 customRender 有值则代表使用了字典
+        // 如果 hrefSlotName 有值则代表使用了href跳转
+        // 两者可以兼容。兼容的具体思路为：先获取到字典替换的值，再添加href链接跳转
+        if (customRender || hrefSlotName) {
+          let dictCode = customRender as string;
+          let replaceFlag = '_replace_text_';
+          column.customRender = ({ text, record }) => {
+            let value = text;
+            // 如果 dictCode 有值，就进行字典转换
+            if (dictCode) {
+              if (dictCode.startsWith(replaceFlag)) {
+                let textFieldName = dictCode.replace(replaceFlag, '');
+                value = record[textFieldName];
+              } else {
+                value = filterMultiDictText(unref(dictOptions)[dictCode], text + '');
+              }
+            }
+            // 扩展参数设置列的内容长度
+            if (column.showLength) {
+              if (value && value.length > column.showLength) {
+                value = value.substr(0, column.showLength) + '...';
+              }
+            }
+            // 如果 hrefSlotName 有值，就生成一个 a 标签，包裹住字典替换后（或原生）的值
+            if (hrefSlotName) {
+              let field = fieldHrefSlotKeysMap[hrefSlotName];
+              if (field) {
+                return h(
+                  'a',
+                  {
+                    onClick: () => handleClickFieldHref(field, record),
+                  },
+                  value
+                );
+              }
+            }
+            return value;
+          };
+        }
+      }
+    }
+    return columns;
+  }
+
+  /**
+   * 处理合并表头
+   * @param columns
+   */
+  function handleGroupTitle(columns: OnlineColumn[]): OnlineColumn[] {
+    let newColumns: OnlineColumn[] = [];
+    for (let column of columns) {
+      //排序字段受控  ---- 此逻辑为新增逻辑 待
+      if (unref(iSorter) && column.dataIndex === unref(iSorter).column) {
+        column.sortOrder = unref(iSorter).order === 'asc' ? 'ascend' : 'descend';
+      }
+      //判断字段是否需要合并表头
+      if (column.groupTitle) {
+        let clIndex = newColumns.findIndex((im) => im.title === column.groupTitle);
+        if (clIndex !== -1) {
+          //表头已存在直接push children
+          newColumns[clIndex].children!.push(column);
+        } else {
+          //表头不存在组装表头信息
+          let clGroup: OnlineColumn = {},
+            child: OnlineColumn[] = [];
+          child.push(column);
+          clGroup.title = column.groupTitle;
+          clGroup.align = 'center';
+          clGroup.children = child;
+          newColumns.push(clGroup);
+        }
+      } else {
+        newColumns.push(column);
+      }
+    }
+    return newColumns;
+  }
+
+  // 获取路由器对象 href跳转用到
+  let router = useRouter();
+  /**
+   * href 点击事件
+   * @param field
+   * @param record
+   */
+  function handleClickFieldHref(field, record) {
+    let href = field.href;
+    let urlPattern = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/;
+    let compPattern = /\.vue(\?.*)?$/;
+    let jsPattern = /{{([^}]+)}}/g; // {{ xxx }}
+    if (typeof href === 'string') {
+      href = href.trim().replace(/\${([^}]+)?}/g, (s1, s2) => record[s2]);
+      // 执行 {{...}} JS增强语句
+      if (jsPattern.test(href)) {
+        href = href.replace(jsPattern, function (text, s0) {
+          try {
+            // 支持 {{ ACCESS_TOKEN }} 占位符
+            if (s0.trim() === 'ACCESS_TOKEN') {
+              return getToken()
+            }
+
+            // 代码逻辑说明: 【QQYUN-6390】eval替换成new Function，解决build警告
+            return _eval(s0);
+          } catch (e) {
+            console.error(e);
+            return text;
+          }
+        });
+      }
+      if (urlPattern.test(href)) {
+        window.open(href, '_blank');
+      } else if (compPattern.test(href)) {
+        // 处理弹框
+        openHrefCompModal(href);
+      } else {
+        router.push(href);
+      }
+    }
+  }
+
+  /**
+   * 导出
+   */
+  function handleExport() {
+    const { handleExportXls } = useMethods();
+    let url = `${configUrl.export}${cgRpConfigId.value}`;
+    let params = getQueryParams(); //查询条件
+    // 【VUEN-1568】如果选中了某些行，就只导出选中的行
+    let keys = unref(checkedKeys);
+    if (keys.length > 0) {
+      keys = keys
+        .map((i) => selectRows.value.find((item) => combineRowKey(item) === i)?.id)
+        .filter((i) => i != null && i !== '');
+      // 判断是否有ID字段
+      if (keys.length === 0) {
+        createMessage.warning('由于数据中缺少ID字段，故无法使用选中导出功能');
+        return;
+      }
+      params['force_id'] = keys.join(',');
+    }
+    handleExportXls(title.value, url, params);
+  }
+
+  /**
+   * 合计逻辑 [待优化 3.0]
+   * 分页 大小改变事件
+   * @param _current
+   * @param size
+   */
+  function onSizeChange(_current, size) {
+    pagination.isTotal = '';
+    pagination.pageSize = size;
+    if (pagination.isTotal) {
+      pagination.realPageSize = size - 1;
+    } else {
+      pagination.realPageSize = size;
+    }
+    pagination.current = 1;
+  }
+
+  /**
+   *  合计逻辑 [待优化 3.0]
+   * 显示总条数
+   * @param total
+   */
+  function onShowTotal(total) {
+    // 重新根据是否有合计计算每页显示的数据
+    let start = (pagination.current - 1) * pagination.realPageSize + 1;
+    let end = start + (pagination.isTotal ? dataSource.value.length - 1 : dataSource.value.length) - 1;
+    let realTotal = pagination.isTotal ? pagination.realTotal : total;
+    return start + '-' + end + ' 共' + realTotal + '条';
+  }
+
+  /**
+   * 弹出框显示隐藏触发事件
+   */
+  async function visibleChange($event) {
+    visible.value = $event;
+    $event && loadColumnsInfo();
+  }
+
+  /**
+   * 初始化查询条件
+   * @param data 数据结果集
+   */
+  function initQueryInfo(data) {
+    let url = `${configUrl.getQueryInfo}${unref(cgRpConfigId)}`;
+    //缓存key
+    let groupIdKey = props.groupId ? `${props.groupId}${url}` : '';
+    httpGroupRequest(() => defHttp.get({ url }, { isTransformResponse: false, successMessageMode: 'none' }), groupIdKey).then((res) => {
+      // console.log("获取查询条件", res);
+      if (res.success) {
+        dynamicParamHandler(res.result);
+        queryInfo.value = res.result;
+        console.log('queryInfo==>', queryInfo.value);
+        //查询条件加载后再请求数据
+        if (data) {
+          setDataSource(data);
+          //传递路由参数和动态参数，不生效，
+          loadData(1);
+        } else {
+          //没有传递data时查询数据
+          loadData(1);
+        }
+      } else {
+        createMessage.warning(res.message);
+      }
+    });
+  }
+
+  /**
+   * 加载表格数据
+   * @param arg
+   */
+  function loadData(arg?) {
+    if (arg == 1) {
+      pagination.current = 1;
+    }
+    let params = getQueryParams(); //查询条件
+    params['onlRepUrlParamStr'] = getUrlParamString();
+    console.log('params', params);
+    loading.value = true;
+    // 代码逻辑说明: 【TV360X-578】online报表SQL翻译，第二页不翻页数据
+    let url = `${configUrl.getColumnsAndData}${unref(cgRpConfigId)}`;
+    const {query} = handleCodeParams()
+    if (query) {
+      url = url + query
+    }
+    //缓存key
+    let groupIdKey = props.groupId ? `${props.groupId}${url}${JSON.stringify(params)}` : '';
+    httpGroupRequest(() => defHttp.get({ url, params }, { isTransformResponse: false, successMessageMode: 'none' }), groupIdKey).then((res) => {
+      // 代码逻辑说明: 【TV360X-578】online报表SQL翻译，第二页不翻页数据
+      res.result.dictOptions && initDictOptionData(res.result.dictOptions);
+      loading.value = false;
+      // 代码逻辑说明: 【TV360X-578】online报表SQL翻译，第二页不翻页数据
+      let data = res.result.data;
+      console.log('表格信息:', data);
+      setDataSource(data);
+    });
+  }
+
+  /**
+   * 获取地址栏的参数
+   */
+  function getUrlParamString() {
+   let query = route.query;
+   let arr:any[] = []
+   if(query && Object.keys(query).length>0){
+     Object.keys(query).map(k=>{
+       arr.push(`${k}=${query[k]}`)
+     })
+   }
+   return arr.join('&')
+  }
+
+  /**
+   * 设置dataSource
+   */
+  function setDataSource(data) {
+    if (data) {
+      pagination.total = Number(data.total);
+      let currentPage = pagination?.current ?? 1;
+      for (let a = 0; a < data.records.length; a++) {
+        if (!data.records[a].rowIndex) {
+          data.records[a].rowIndex = a + (currentPage - 1) * 10;
+        }
+      }
+      dataSource.value = data.records;
+      // 代码逻辑说明: issues/426 修复356时候引入的回归错误 JPopupOnlReportModal.vue 中未修改
+      tableRef?.value && tableRef?.value?.setPagination({
+        total: Number(data.total)
+      })
+    } else {
+      pagination.total = 0;
+      dataSource.value = [];
+    }
+    // 合计逻辑 [待优化 3.0]
+    handleSumColumn(columns.value, pagination.total);
+  }
+
+  /**
+   * 获取查询参数
+   */
+  function getQueryParams() {
+    let paramTarget = {};
+    if (unref(dynamicParam)) {
+      //处理自定义参数
+      Object.keys(unref(dynamicParam)).map((key) => {
+        paramTarget['self_' + key] = unref(dynamicParam)[key];
+      });
+    }
+    let param = Object.assign(paramTarget, unref(queryParam), unref(iSorter));
+    param.pageNo = pagination.current;
+    // 合计逻辑 [待优化 3.0]
+    //  实际查询时不使用table组件的pageSize，而使用自定义的realPageSize,realPageSize会在第一次获取到数据后变化
+    param.pageSize = pagination.realPageSize;
+    return filterObj(param);
+  }
+
+  /**
+   * 处理动态参数
+   */
+  function dynamicParamHandler(arr?) {
+    if (arr && arr.length > 0) {
+      //第一次加载查询条件前 初始化queryParam为空对象
+      let queryTemp = {};
+      for (let item of arr) {
+        if (item.mode === 'single') {
+          queryTemp[item.field] = '';
+        }
+      }
+      queryParam.value = { ...queryTemp };
+    }
+    // 合并路由参数
+    if (props.routeQuery) {
+      queryParam.value = Object.assign(queryParam.value, props.routeQuery);
+    }
+
+    let dynamicTemp = {};
+    if (props.param) {
+      Object.keys(props.param).map((key) => {
+        let str = props.param[key];
+        //【issues/8426】解决JPopup组件传参不能接收
+        if (key in queryParam.value) {
+          if (str && str.startsWith("'") && str.endsWith("'")) {
+            str = str.substring(1, str.length - 1);
+          }
+          //如果查询条件包含参数 设置值
+          unref(queryParam)[key] = str;
+        }
+        dynamicTemp[key] = props.param[key];
+      });
+    }
+    dynamicParam.value = { ...dynamicTemp };
+  }
+
+  /**
+   * 分页
+   * @param page
+   * @param filters
+   * @param sorter
+   */
+  function handleChangeInTable(page, filters, sorter) {
+    console.log(page, filters, sorter);
+    //分页、排序、筛选变化时触发
+    if (Object.keys(sorter).length > 0) {
+      iSorter.value = {
+        column: sorter.field,
+        order: 'ascend' === sorter.order ? 'asc' : 'desc',
+      };
+      // 排序字段受控
+      unref(columns).forEach((col) => {
+        if (col['dataIndex'] === sorter.field) {
+          col['sortOrder'] = sorter.order;
+        }
+      });
+    }
+    pagination.current = page.current;
+    pagination.pageSize = page.pageSize;
+    loadData();
+  }
+
+  /**
+   * 行点击事件
+   * @param record
+   */
+  function clickThenCheck(record) {
+    if (clickThenCheckFlag === true) {
+      // 代码逻辑说明: 【QQYUN-7514】popup单选显示radio
+      if (!props.multi) {
+        selectRows.value = [];
+        checkedKeys.value = [];
+      }
+      let rowKey = combineRowKey(record);
+      if (!unref(checkedKeys) || unref(checkedKeys).length == 0) {
+        let arr1: any[] = [],
+          arr2: any[] = [];
+        arr1.push(record);
+        arr2.push(rowKey);
+        checkedKeys.value = arr2;
+        //selectRows.value = arr1;
+      } else {
+        if (unref(checkedKeys).indexOf(rowKey) < 0) {
+          //不存在就选中
+          checkedKeys.value.push(rowKey);
+          //selectRows.value.push(record);
+        } else {
+          //已选中就取消
+          let rowKey_index = unref(checkedKeys).indexOf(rowKey);
+          checkedKeys.value.splice(rowKey_index, 1);
+          //selectRows.value.splice(rowKey_index, 1);
+        }
+      }
+      // 代码逻辑说明: 【issues/5357】点击行选中
+      tableRef.value.setSelectedRowKeys([...checkedKeys.value]);
+    }
+  }
+
+  //防止字典中有垃圾数据
+  function initDictOptionData(arr) {
+    let obj = {};
+    Object.keys(arr).map((k) => {
+      obj[k] = arr[k].filter((item) => {
+        return item != null;
+      });
+    });
+    dictOptions.value = obj;
+  }
+
+  /**
+   * 过滤对象中为空的属性
+   * @param obj
+   * @returns {*}
+   */
+  function filterObj(obj) {
+    if (!(typeof obj == 'object')) {
+      return;
+    }
+
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
+        delete obj[key];
+      }
+    }
+    return obj;
+  }
+
+  // 样式
+  const dialogStyle = {
+    top: 0,
+    left: 0,
+    height: '100%',
+    margin: 0,
+    padding: 0,
+  };
+
+  // 弹窗属性配置
+  const hrefComponent = ref({
+    model: {
+      title: '',
+      okText: '关闭',
+      width: '100%',
+      open: false,
+      destroyOnClose: true,
+      style: dialogStyle,
+      // dialogStyle: dialogStyle,
+      bodyStyle: {
+        padding: '8px',
+        height: 'calc(100vh - 108px)',
+        overflow: 'auto',
+        overflowX: 'hidden',
+      },
+      // 隐藏掉取消按钮
+      cancelButtonProps: { style: { display: 'none' } },
+    },
+    on: {
+      ok: () => (hrefComponent.value.model.open = false),
+      cancel: () => (hrefComponent.value.model.open = false),
+    },
+    is: <any>null,
+    params: {},
+  });
+
+  // 超链点击事件--> 打开一个modal窗口
+  function openHrefCompModal(href) {
+    // 解析 href 参数
+    let index = href.indexOf('?');
+    let path = href;
+    if (index !== -1) {
+      path = href.substring(0, index);
+      let paramString = href.substring(index + 1, href.length);
+      let paramArray = paramString.split('&');
+      let params = {};
+      paramArray.forEach((paramObject) => {
+        let paramItem = paramObject.split('=');
+        params[paramItem[0]] = paramItem[1];
+      });
+      hrefComponent.value.params = params;
+    } else {
+      hrefComponent.value.params = {};
+    }
+    hrefComponent.value.model.open = true;
+    hrefComponent.value.model.title = '操作';
+    hrefComponent.value.is = markRaw(defineAsyncComponent(() => importViewsFile(path)));
+  }
+
+  /**
+   * emit事件 获取选中的行数据
+   */
+  function getOkSelectRows(): any[] {
+    let arr = unref(selectRows);
+    let selectedRowKeys = checkedKeys.value;
+    console.log('arr', arr);
+    if (!selectedRowKeys || selectedRowKeys.length <= 0) {
+      return [];
+    }
+    if (!arr || arr.length <= 0) {
+      return [];
+    }
+    let rows: any = [];
+    for (let key of selectedRowKeys) {
+      for (let i = 0; i < arr.length; i++) {
+        let combineKey = combineRowKey(arr[i]);
+        if (key === combineKey) {
+          rows.push(toRaw(arr[i]));
+          break;
+        }
+      }
+    }
+    return rows;
+  }
+
+  return [
+    {
+      visibleChange,
+      loadColumnsInfo,
+      loadColumnsAndData,
+      dynamicParamHandler,
+      loadData,
+      handleChangeInTable,
+      combineRowKey,
+      clickThenCheck,
+      filterUnuseSelect,
+      handleExport,
+      getOkSelectRows,
+    },
+    {
+      hrefComponent,
+      visible,
+      rowSelection,
+      checkedKeys,
+      selectRows,
+      pagination,
+      dataSource,
+      columns,
+      indexColumnProps,
+      loading,
+      title,
+      iSorter,
+      queryInfo,
+      queryParam,
+      dictOptions,
+    },
+  ];
+}
diff --git a/src/components/jeecg/OnLine/types/onlineConfig.ts b/src/components/jeecg/OnLine/types/onlineConfig.ts
new file mode 100644
index 0000000..67d4a80
--- /dev/null
+++ b/src/components/jeecg/OnLine/types/onlineConfig.ts
@@ -0,0 +1,45 @@
+interface ScopedSlots {
+  customRender: string;
+}
+
+interface HrefSlots {
+  // 链接地址
+  href: string;
+  // fieldHref_字段名
+  slotName: string;
+}
+
+interface OnlineColumn {
+  dataIndex?: string;
+  title?: string;
+  key?: string;
+  fieldType?: string;
+  width?: number | string;
+  align?: string;
+  sorter?: string | boolean;
+  isTotal?: string | number | boolean;
+  groupTitle?: string;
+  // 超链的时候 和HrefSlots中的slotName匹配
+  scopedSlots?: ScopedSlots;
+  // 一般用于字典 字典传过来的是字典编码字符串 后转函数
+  customRender?: string | Function;
+  // 这个类型不知道有什么用
+  hrefSlotName?: string;
+  showLength?: number | string;
+  children?: OnlineColumn[];
+  sortOrder?: string;
+  // 插槽对应控件类型(列表)
+  slots?: ScopedSlots;
+  //超过宽度将自动省略，暂不支持和排序筛选一起使用。
+  ellipsis?: boolean;
+  // 是否固定列
+  fixed?: boolean | 'left' | 'right';
+  //字段类型 int/string 
+  dbType?:string;
+  //他表字段用
+  linkField?:string;
+  fieldExtendJson?:string
+  resizable?: boolean;
+}
+
+export { OnlineColumn, HrefSlots };
diff --git a/src/components/jeecg/UserAvatar.vue b/src/components/jeecg/UserAvatar.vue
new file mode 100644
index 0000000..e459fe8
--- /dev/null
+++ b/src/components/jeecg/UserAvatar.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="user-avatar-info">
+      <a-popover title="" :overlayStyle="{width: '250px'}">
+          <template #content>
+             <div style="display: flex;flex-direction: row;align-items: center">
+                 <div style="width: 60px;text-align: center">
+                     <a-avatar v-if="userAvatar" :src="userAvatar" :size="47"/>
+                     <a-avatar v-else :size="47">{{ getAvatarText() }}</a-avatar>
+                 </div>
+                 <div style="flex: 1;display: flex;flex-direction: column;margin-left: 12px">
+                     <div style="color: #000;display: inline-block;font-size: 15px;font-weight: 700;margin-top: 3px;vertical-align: top;width: 170px;">
+                         {{ userLabel }}
+                     </div>
+                     <div style="color: #757575;display: block;margin-top: 4px;">
+                         {{ phone }}
+                     </div>
+                 </div>
+             </div>
+          </template>
+          <span style="cursor: pointer">
+              <a-avatar v-if="userAvatar" :src="userAvatar" :loadError="loadError"/>
+              <a-avatar v-else>{{ getAvatarText() }}</a-avatar>
+          </span>
+      </a-popover>
+      <span class="realname-ellipsis">
+          {{ userLabel }}
+      </span>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, watchEffect, defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  
+  export default defineComponent({
+    name: 'UserAvatar',
+    props: {
+      username: {
+        type: String,
+        default: '',
+      },
+      detail:{
+        type: Object,
+        default: ()=>{},
+      }
+    },
+    setup(props) {
+      const userAvatar = ref('');
+      const userLabel = ref('');
+      const phone = ref('');
+
+      watchEffect(async ()=>{
+        userAvatar.value = '';
+        userLabel.value = '';
+        phone.value = '';
+        let username = props.username;
+        if(username){
+          await initUserInfo(username);
+        }
+        let userInfo = props.detail;
+        if(userInfo){
+          if(userInfo.avatar){
+            userAvatar.value = getFileAccessHttpUrl(userInfo.avatar);
+          }
+          if(userInfo.realname){
+            userLabel.value = userInfo.realname;
+          }
+          if(userInfo.phone){
+            phone.value = userInfo.phone;
+          }
+        }
+      });
+
+      async function initUserInfo(val) {
+        const params = {
+          username: val,
+        };
+        const url = '/sys/user/getMultiUser';
+        const data = await defHttp.get({ url, params }, {isTransformResponse: false});
+        if(data && data.length > 0){
+          let temp = data[0].avatar;
+          if (temp) {
+            userAvatar.value = getFileAccessHttpUrl(temp)
+          }
+          userLabel.value = data[0].realname;
+          phone.value = data[0].phone;
+        }else{
+          console.log(data)
+        }
+      }
+
+      function getAvatarText() {
+        let text = userLabel.value;
+        if (!text) {
+          text = props.username;
+        }
+        if (text) {
+          if (text.length > 2) {
+            return text.substr(0, 2);
+          } else {
+            return text;
+          }
+        }
+        return '';
+      }
+      
+      function loadError() {
+        userAvatar.value = '';
+        return true;
+      }
+      
+
+      return {
+        userAvatar,
+        userLabel,
+        getAvatarText,
+        phone,
+        loadError
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+    .user-avatar-info{
+        .ant-avatar-image{
+            cursor: pointer;
+        }
+        .realname-ellipsis {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: top;
+            white-space: nowrap;
+            height: 32px;
+            line-height: 32px;
+            display: inline-block;
+            margin-left: 10px;
+        }
+    }
+    
+</style>
diff --git a/src/components/jeecg/captcha/CaptchaModal.vue b/src/components/jeecg/captcha/CaptchaModal.vue
new file mode 100644
index 0000000..07d4ae8
--- /dev/null
+++ b/src/components/jeecg/captcha/CaptchaModal.vue
@@ -0,0 +1,134 @@
+<template>
+  <BasicModal @register="registerModal" width="450px" :minHeight="100" :title="title" @ok="handleSubmit" destroyOnClose :canFullscreen="false">
+    <BasicForm @register="registerForm">
+      <template #captchaSlot="{ model, field }">
+        <div style="width: 100%; display: flex">
+          <a-input style="width: 200px" v-model:value="model[field]" placeholder="请输入图片验证码" />
+          <div class="margin-left10">
+            <img
+              class="pointer"
+              v-if="randCodeData.requestCodeSuccess"
+              style="margin-top: 2px; max-width: initial; height: 30px"
+              :src="randCodeData.randCodeImage"
+              @click="getCaptchaCode"
+            />
+            <img v-else class="pointer" style="margin-top: 2px; max-width: initial; height: 30px" :src="codeImage" @click="getCaptchaCode" />
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+
+<script lang="ts" name="CaptchaModal">
+  import { defineComponent, reactive, ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import codeImage from '@/assets/images/checkcode.png';
+  import { getCodeInfo } from '@/api/sys/user';
+  import { defHttp } from '@/utils/http/axios';
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  export default defineComponent({
+    name: 'CaptchaModal',
+    components: { BasicModal, BasicForm },
+    emits: ['ok','register'],
+    setup(props, { emit }) {
+      const title = ref<string>('验证码');
+      const schemas: FormSchema[] = [
+        {
+          field: 'captcha',
+          component: 'Input',
+          label: '图片验证码',
+          rules: [{ required: true }],
+          slot: 'captchaSlot',
+        },
+      ];
+      //表单配置
+      const [registerForm, { resetFields, validate }] = useForm({
+        schemas: schemas,
+        showActionButtonGroup: false,
+        baseRowStyle: { "justify-content": 'center', "display": "grid", "margin-top": "10px" },
+        rowProps: { "justify": "center" },
+        labelCol: { span: 24 },
+        wrapperCol: { span: 24 },
+      });
+
+      //表单赋值
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        setModalProps({ confirmLoading: true });
+        //重置表单
+        await resetFields();
+        await getCaptchaCode();
+        setModalProps({ confirmLoading: false });
+      });
+
+      //存放二维码的数据
+      const randCodeData = reactive({
+        randCodeImage: '',
+        requestCodeSuccess: false,
+        checkKey: -1,
+      });
+      const { createMessage } = useMessage();
+      
+      /**
+       * 获取验证码
+       */
+      async function getCaptchaCode() {
+        await resetFields();
+        // 代码逻辑说明: [QQYUN-10775]验证码可以复用 #7674------------
+        randCodeData.checkKey = new Date().getTime() + Math.random().toString(36).slice(-4); // 1629428467008;
+        getCodeInfo(randCodeData.checkKey).then((res) => {
+          randCodeData.randCodeImage = res;
+          randCodeData.requestCodeSuccess = true;
+        });
+      }
+
+      /**
+       * 第三方配置点击事件
+       */
+      async function handleSubmit() {
+        let values = await validate();
+        defHttp.post({ url: '/sys/smsCheckCaptcha', params: { captcha: values.captcha, checkKey: randCodeData.checkKey } }, { isTransformResponse: false }).then((res)=>{
+          if(res.success){
+            emit('ok');
+            closeModal();
+          }else{
+            createMessage.warning(res.message);
+            getCaptchaCode();
+          }
+        }).catch((res) =>{
+          createMessage.warning(res.message);
+          getCaptchaCode();
+        });
+      }
+
+      /**
+       * 关闭弹窗
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      return {
+        title,
+        registerForm,
+        registerModal,
+        handleSubmit,
+        handleCancel,
+        randCodeData,
+        codeImage,
+        getCaptchaCode,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .margin-left10 {
+    margin-left: 10px;
+  }
+  :deep(.ant-row){
+    display: block;
+  }
+</style>
diff --git a/src/components/jeecg/comment/CommentFiles.vue b/src/components/jeecg/comment/CommentFiles.vue
new file mode 100644
index 0000000..a34fbbe
--- /dev/null
+++ b/src/components/jeecg/comment/CommentFiles.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <a-alert type="info" class="jeecg-comment-files">
+      <template #message>
+        <span class="j-icon">
+          <a-upload multiple v-model:file-list="selectFileList" :showUploadList="false" :before-upload="beforeUpload">
+            <span class="inner-button"><upload-outlined />上传</span>
+          </a-upload>
+        </span>
+      </template>
+    </a-alert>
+
+    <!-- 正在上传的文件 -->
+    <div class="selected-file-warp" v-if="selectFileList && selectFileList.length > 0">
+      <div class="selected-file-list">
+        <div class="item" v-for="item in selectFileList">
+          <div class="complex">
+            <div class="content" >
+              <!-- 图片 -->
+              <div v-if="isImage(item)" class="content-top" style="height: 100%">
+                <div class="content-image" :style="getImageAsBackground(item)">
+                  <!--  <img style="height: 100%;" :src="getImageSrc(item)">-->
+                </div>
+              </div>
+              <!-- 文件 -->
+              <template v-else>
+                <div class="content-top">
+                  <div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ')  no-repeat' }"></div>
+                </div>
+                <div class="content-bottom" :title="item.name">
+                  <span>{{ item.name }}</span>
+                </div>
+              </template>
+            </div>
+            <div class="layer" :class="{'layer-image':isImage(item)}">
+              <div class="next" @click="viewImage(item)"><div class="text">{{ item.name }} </div></div>
+              <div class="buttons">
+                <div class="opt-icon">
+                  <Tooltip title="删除">
+                    <delete-outlined @click="handleRemove(item)" />
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
+      </div>
+
+      <div style="margin-bottom: 24px; margin-top: 18px; text-align: right">
+        <a-button @click="quxiao">取消</a-button>
+        <a-button type="primary" style="margin-left: 10px" @click="queding" :loading="buttonLoading">确定</a-button>
+      </div>
+    </div>
+
+    <!-- 历史文件 -->
+    <history-file-list :dataList="dataList"></history-file-list>
+  </div>
+</template>
+
+<script>
+  import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+  import { uploadFileUrl } from './useComment';
+  import { propTypes } from '/@/utils/propTypes';
+  import { computed, watchEffect, unref, ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { fileList } from './useComment';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { useUserStore } from '/@/store/modules/user';
+  import { saveOne, useCommentWithFile, useFileList } from './useComment';
+  import {useModal} from "/@/components/Modal";
+
+  import { Tooltip } from 'ant-design-vue';
+  import HistoryFileList from './HistoryFileList.vue';
+
+  export default {
+    name: 'CommentFiles',
+    components: {
+      UploadOutlined,
+      FolderOutlined,
+      JUpload,
+      DownloadOutlined,
+      PaperClipOutlined,
+      DeleteOutlined,
+      Tooltip,
+      HistoryFileList,
+    },
+    props: {
+      tableId: propTypes.string.def(''),
+      tableName: propTypes.string.def(''),
+      dataId: propTypes.string.def(''),
+      datetime:  propTypes.number.def(1)
+    },
+    setup(props) {
+      // const { createMessage } = useMessage();
+      const [registerModel, { openModal }] = useModal();
+      const { userInfo } = useUserStore();
+      const dataList = ref([]);
+      const commentId = ref('');
+
+      async function loadFileList() {
+        const params = {
+          tableName: props.tableName,
+          tableDataId: props.dataId,
+        };
+        const data = await fileList(params);
+        console.log('1111', data)
+        if (!data || !data.records || data.records.length == 0) {
+          dataList.value = [];
+        } else {
+          let array = data.records;
+          console.log(123, array);
+          dataList.value = array;
+        }
+        commentId.value = '';
+      }
+
+      watchEffect(() => {
+        // 每次切换tab都会刷新文件列表--- VUEN-1884 评论里上传的图片未在文件中显示
+        if(props.datetime){
+          if (props.tableName && props.dataId) {
+            loadFileList();
+          }
+        }
+      });
+
+      const { saveCommentAndFiles, buttonLoading } = useCommentWithFile(props);
+      const { selectFileList, beforeUpload, handleRemove, getBackground, isImage, getImageAsBackground, viewImage } = useFileList();
+
+      function quxiao() {
+        selectFileList.value = [];
+      }
+      async function queding() {
+        let obj = {
+          fromUserId: userInfo.id,
+          commentContent: '上传了附件'
+        }
+        await saveCommentAndFiles(obj, selectFileList.value)
+        selectFileList.value = [];
+        await loadFileList();
+      }
+      
+      function showFileModal() {
+        openModal(true, {})
+      }
+      
+      function onSelectFileOk(temp) {
+        // 代码逻辑说明: 【TV360X-935】从知识库选择文件判断下是否没选
+        if (temp.length === 0) return;
+        let arr = selectFileList.value;
+        // -update-begin--author:liaozhiyang---date:20240614---for：【TV360X-938】知识库文件选择支持多选
+        temp.forEach((item) => {
+          item.exist = true;
+        });
+        selectFileList.value = [...arr, ...temp];
+        // -update-end--author:liaozhiyang---date:20240614---for：【TV360X-938】知识库文件选择支持多选
+      }
+
+      return {
+        selectFileList,
+        beforeUpload,
+        handleRemove,
+        getBackground,
+        isImage,
+        dataList,
+        uploadFileUrl,
+        quxiao,
+        queding,
+        buttonLoading,
+        getImageAsBackground,
+        viewImage,
+        registerModel,
+        showFileModal,
+        onSelectFileOk,
+
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import 'comment.less';
+</style>
diff --git a/src/components/jeecg/comment/CommentList.vue b/src/components/jeecg/comment/CommentList.vue
new file mode 100644
index 0000000..fa0c053
--- /dev/null
+++ b/src/components/jeecg/comment/CommentList.vue
@@ -0,0 +1,367 @@
+<template>
+  <div :style="{ position: 'relative', height: allHeight + 'px' }">
+    <a-list ref="listRef" class="jeecg-comment-list" header="" item-layout="horizontal" :data-source="dataList" :style="{ height: commentHeight + 'px' }">
+      <template #renderItem="{ item }">
+        <a-list-item style="padding-left: 10px; flex-direction: column" @click="handleClickItem">
+          <a-comment>
+            <template #avatar>
+              <a-avatar class="tx" :src="getAvatar(item)" :alt="getAvatarText(item)">{{ getAvatarText(item) }}</a-avatar>
+            </template>
+
+            <template #author>
+              <div class="comment-author">
+                <span>{{ item.fromUserId_dictText }}</span>
+
+                <template v-if="item.toUserId">
+                  <span>回复</span>
+                  <span>{{ item.toUserId_dictText }}</span>
+                  <Tooltip class="comment-last-content" @openChange="(v)=>visibleChange(v, item)">
+                    <template #title>
+                      <div v-html="getHtml(lineFeed(item.commentId_dictText))"></div>
+                    </template>
+                    <message-outlined />
+                  </Tooltip>
+                </template>
+              </div>
+            </template>
+
+            <template #datetime>
+              <div>
+                <Tooltip :title="item.createTime">
+                  <span>{{ getDateDiff(item) }}</span>
+                </Tooltip>
+              </div>
+            </template>
+
+            <template #actions>
+              <span @click="showReply(item)">回复</span>
+
+              <Popconfirm title="确定删除吗？" @confirm="deleteComment(item)">
+                <span>删除</span>
+              </Popconfirm>
+            </template>
+
+            <template #content>
+              <div class="content" v-html="getHtml(lineFeed(item.commentContent))" style="font-size: 15px">
+              </div>
+
+              <div v-if="item.fileList && item.fileList.length > 0">
+                <!-- 历史文件 -->
+                <history-file-list :dataList="item.fileList" isComment></history-file-list>
+              </div>
+            </template>
+          </a-comment>
+          <div v-if="item.commentStatus" class="inner-comment">
+            <my-comment inner @cancel="item.commentStatus = false" @comment="(content, fileList) => replyComment(item, content, fileList)" :inputFocus="focusStatus"></my-comment>
+          </div>
+        </a-list-item>
+      </template>
+    </a-list>
+
+    <div class="comment-area">
+      <a-comment style="margin: 0 10px">
+        <template #avatar>
+          <a-avatar class="tx" :src="getMyAvatar()" :alt="getMyname()">{{ getMyname() }}</a-avatar>
+        </template>
+        <template #content>
+          <my-comment ref="bottomCommentRef" @comment="sendComment" :inputFocus="focusStatus"></my-comment>
+        </template>
+      </a-comment>
+    </div>
+  </div>
+</template>
+
+<script>
+  /**
+   * 评论列表
+   */
+  import { defineComponent, ref, onMounted, watch, watchEffect ,inject, nextTick } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  // import dayjs from 'dayjs';
+  // import relativeTime from 'dayjs/plugin/relativeTime';
+  // import customParseFormat from 'dayjs/plugin/customParseFormat';
+  // dayjs.locale('zh');
+  // dayjs.extend(relativeTime);
+  // dayjs.extend(customParseFormat);
+  
+  import { MessageOutlined } from '@ant-design/icons-vue';
+  import { Comment, Tooltip } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import MyComment from './MyComment.vue';
+  import { list, saveOne, deleteOne, useCommentWithFile, useEmojiHtml, queryById, getGloablEmojiIndex } from './useComment';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import HistoryFileList from './HistoryFileList.vue';
+  import { Popconfirm } from 'ant-design-vue';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+  export default defineComponent({
+    name: 'CommentList',
+    components: {
+      MessageOutlined,
+      AComment: Comment,
+      Tooltip,
+      MyComment,
+      Popconfirm,
+      HistoryFileList,
+    },
+    props: {
+      tableId: propTypes.string.def(''),
+      tableName: propTypes.string.def(''),
+      dataId: propTypes.string.def(''),
+      datetime:  propTypes.number.def(1),
+      // 其他需要减去的高度
+      otherHeight: propTypes.number.def(0),
+    },
+    setup(props) {
+      const { createMessage } = useMessage();
+      const dataList = ref([]);
+      const { userInfo } = useUserStore();
+      const dayjs = inject('$dayjs')
+      const listRef = ref(null);
+      /**
+       * 获取当前用户名称
+       */
+      function getMyname() {
+        if (userInfo.realname) {
+          return userInfo.realname.substr(0, 2);
+        }
+        return '';
+      }
+      
+      function getMyAvatar(){
+        return getFileAccessHttpUrl(userInfo.avatar);
+      }
+      
+      // 获取头像
+      function getAvatar(item) {
+        if (item.fromUserAvatar) {
+          return getFileAccessHttpUrl(item.fromUserAvatar)
+        }
+        return '';
+      }
+
+      // 头像没有获取 用户名前两位
+      function getAvatarText(item){
+        if (item.fromUserId_dictText) {
+          return item.fromUserId_dictText.substr(0, 2);
+        }
+        return '未知';
+      }
+
+      function getAuthor(item) {
+        if (item.toUser) {
+          return item.fromUserId_dictText + ' 回复 ' + item.fromUserId_dictText;
+        } else {
+          return item.fromUserId_dictText;
+        }
+      }
+
+      function getDateDiff(item) {
+        if (item.createTime) {
+          const temp = dayjs(item.createTime, 'YYYY-MM-DD hh:mm:ss');
+          return temp.fromNow();
+        }
+        return '';
+      }
+      const commentHeight = ref(300);
+      const allHeight = ref(300);
+      onMounted(() => {
+        let otherHeight = props.otherHeight || 0;
+        commentHeight.value = window.innerHeight - 57 - 46 - 70 - 160 - otherHeight;
+        allHeight.value = window.innerHeight - 57 - 46 - 53 -20 - otherHeight;
+      });
+
+      /**
+       * 加载数据
+       * @returns {Promise<void>}
+       */
+      async function loadData() {
+        const params = {
+          tableName: props.tableName,
+          tableDataId: props.dataId,
+          column: 'createTime',
+          order: 'desc',
+        };
+        const data = await list(params);
+        if (!data || !data.records || data.records.length == 0) {
+          dataList.value = [];
+        } else {
+          let array = data.records;
+          console.log(123, array);
+          dataList.value = array;
+          // Number.MAX_SAFE_INTEGER 火狐不兼容改成 10e4
+          nextTick(() => {
+            listRef.value && listRef.value.$el && (listRef.value.$el.scrollTop = 10e5);
+          });
+        }
+      }
+
+      const { saveCommentAndFiles } = useCommentWithFile(props);
+      // 回复
+      async function replyComment(item, content, fileList) {
+        console.log(content, item);
+        let obj = {
+          fromUserId: userInfo.id,
+          toUserId: item.fromUserId,
+          commentId: item.id,
+          commentContent: content
+        }
+        await saveCommentAndFiles(obj, fileList)
+        await loadData();
+      }
+      
+      //评论
+      async function sendComment(content, fileList) {
+        let obj = {
+          fromUserId: userInfo.id,
+          commentContent: content
+        }
+        await saveCommentAndFiles(obj, fileList)
+        await loadData();
+        focusStatus.value = false;
+        setTimeout(()=>{
+          focusStatus.value = true;
+        },100)
+      }
+
+      //删除
+      async function deleteComment(item) {
+        const params = { id: item.id };
+        await deleteOne(params);
+        await loadData();
+      }
+
+      /**
+       * 打开回复时触发
+       * @type {Ref<UnwrapRef<boolean>>}
+       */
+      const focusStatus = ref(false);
+      function showReply(item) {
+        let arr = dataList.value;
+        for (let temp of arr) {
+          temp.commentStatus = false;
+        }
+        item.commentStatus = true;
+        focusStatus.value = false;
+        focusStatus.value = true;
+      }
+
+      // 表单改变 -重新加载评论列表
+      watchEffect(() => {
+        if(props.datetime){
+          if (props.tableName && props.dataId) {
+            loadData();
+          }
+        }
+      });
+
+      //const storageEmojiIndex = inject('$globalEmojiIndex')
+      const storageEmojiIndex = getGloablEmojiIndex()
+      const { getHtml } = useEmojiHtml(storageEmojiIndex);
+      const bottomCommentRef = ref()
+      function handleClickItem(){
+        bottomCommentRef.value.changeActive()
+      }
+
+
+      /**
+       * 根据id查询评论信息
+       */
+      async function visibleChange(v, item){
+        if(v==true){
+          if(!item.commentId_dictText){
+            const data = await queryById(item.commentId);
+            if(data.success == true){
+              item.commentId_dictText = data.result.commentContent
+            }else{
+              console.error(data.message)
+              item.commentId_dictText='该评论已被删除';
+            }
+          }
+        }
+      }
+      // 代码逻辑说明: 【TV360X-932】评论加上换行
+      const lineFeed = (content) => {
+        return content.replace(/\n/g, '<br>');
+      };
+
+      return {
+        dataList,
+        getAvatar,
+        getAvatarText,
+        getAuthor,
+        getDateDiff,
+        commentHeight,
+        allHeight,
+        replyComment,
+        sendComment,
+        getMyname,
+        getMyAvatar,
+
+        focusStatus,
+        showReply,
+        deleteComment,
+        getHtml,
+        handleClickItem,
+        bottomCommentRef,
+        visibleChange,
+        listRef,
+        lineFeed,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .jeecg-comment-list {
+    overflow: auto;
+    /* border-bottom: 1px solid #eee;*/
+    .inner-comment {
+      width: 100%;
+      padding: 0 10px;
+    }
+    .ant-comment {
+      width: 100%;
+    }
+    :deep(.ant-comment-avatar) {
+      cursor: default;
+    }
+  }
+  .comment-author {
+    span {
+      margin: 3px;
+    }
+    .comment-last-content {
+      margin-left: 5px;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+  }
+  .ant-list-items{
+    .ant-list-item:last-child{
+      margin-bottom: 46px;
+    }
+  }
+  .tx{
+    margin-top: 4px;
+  }
+  // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+  .comment-area {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-top: 1px solid #eee;
+    background-color: #fff;
+  }
+  html[data-theme='dark'] {
+    .comment-area {
+      border-color: rgba(253, 253, 253, 0.12);
+      background-color: #1f1f1f;
+    }
+    .content {
+      color:rgba(255, 255, 255, 0.85);
+    }
+  }
+</style>
diff --git a/src/components/jeecg/comment/CommentPanel.vue b/src/components/jeecg/comment/CommentPanel.vue
new file mode 100644
index 0000000..c9dc21f
--- /dev/null
+++ b/src/components/jeecg/comment/CommentPanel.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="comment-tabs-warp" v-if="showStatus">
+    <a-tabs v-if="show" @change="handleChange" :animated="false">
+      <a-tab-pane v-if="showComment" tab="评论" key="comment" class="comment-list-tab">
+        <comment-list :tableId="tableId" :tableName="tableName" :dataId="dataId" :datetime="datetime1" :otherHeight="otherHeight"></comment-list>
+      </a-tab-pane>
+      <a-tab-pane v-if="showFiles" tab="文件" key="file">
+        <comment-files :tableId="tableId" :tableName="tableName" :dataId="dataId" :datetime="datetime2"></comment-files>
+      </a-tab-pane>
+      <a-tab-pane v-if="showDataLog" tab="日志" key="log">
+        <data-log-list :tableName="tableName" :dataId="dataId" :datetime="datetime3"></data-log-list>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+  <a-empty v-else description="新增页面不支持评论" />
+</template>
+
+<script>
+  /**
+   * 评论区域
+   */
+  import { propTypes } from '/@/utils/propTypes';
+  import { computed, ref, nextTick } from 'vue';
+  import CommentList from './CommentList.vue';
+  import CommentFiles from './CommentFiles.vue';
+  import DataLogList from './DataLogList.vue';
+
+  export default {
+    name: 'CommentPanel',
+    components: {
+      CommentList,
+      CommentFiles,
+      DataLogList,
+    },
+    props: {
+      tableId: propTypes.string.def(''),
+      tableName: propTypes.string.def(''),
+      dataId: propTypes.string.def(''),
+      // 显示评论
+      showComment: propTypes.bool.def(true),
+      // 显示文件
+      showFiles: propTypes.bool.def(true),
+      // 显示日志
+      showDataLog: propTypes.bool.def(true),
+      // 其他需要减去的高度
+      otherHeight: propTypes.number.def(0),
+    },
+    setup(props) {
+      const showStatus = computed(() => {
+        if (props.dataId && props.tableName) {
+          return true;
+        }
+        return false;
+      });
+
+      const datetime1 = ref(1);
+      const datetime2 = ref(1);
+      const datetime3 = ref(1);
+      const show = ref(true);
+      function handleChange(e) {
+        let temp = new Date().getTime();
+        if (e == 'comment') {
+          datetime1.value = temp;
+        } else if (e == 'file') {
+          datetime2.value = temp;
+        } else {
+          datetime3.value = temp;
+        }
+      }
+
+      // VUEN-1978【bug】online关联记录和他表字段存在问题  20 修改完数据，再次打开不切换tab的时候，修改日志没有变化
+      function reload() {
+        let temp = new Date().getTime();
+        datetime1.value = temp;
+        datetime2.value = temp;
+        datetime3.value = temp;
+        // 再次打开重置组件内的状态
+        show.value = false;
+        nextTick(() => {
+          show.value = true;
+        });
+      }
+
+      return {
+        showStatus,
+        handleChange,
+        datetime1,
+        datetime2,
+        datetime3,
+        reload,
+        show,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .comment-tabs-warp {
+    height: 100%;
+    overflow: visible;
+    > .ant-tabs {
+      overflow: visible;
+    }
+  }
+  //antd3升级后，表单右侧讨论样式调整
+  :deep(.ant-tabs-top  .ant-tabs-nav, .ant-tabs-bottom  .ant-tabs-nav, .ant-tabs-top  div  .ant-tabs-nav, .ant-tabs-bottom  div  .ant-tabs-nav) {
+    margin: 0 16px 0;
+  }
+</style>
diff --git a/src/components/jeecg/comment/DataLogList.vue b/src/components/jeecg/comment/DataLogList.vue
new file mode 100644
index 0000000..5a443b4
--- /dev/null
+++ b/src/components/jeecg/comment/DataLogList.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="data-log-scroll" :style="{'height': height+'px'}">
+        <div class="data-log-content">
+            <div class="logbox">
+                
+                <div class="log-item" v-for="(item, index) in dataList">
+                    <span class="log-item-icon">
+                        <plus-outlined v-if="lastIndex == index" style="margin-top:3px"/>
+                        <edit-outlined v-else/>
+                    </span>
+                    <span class="log-item-content">
+                        <a @click="handleClickPerson">@{{item.createName || item.createBy}}</a>
+                        {{ item.dataContent }}
+                    </span>
+                    <div class="log-item-date">
+                        <Tooltip :title="item.createTime">
+                            <span>{{ getDateDiff(item) }}</span>
+                        </Tooltip>
+                    </div>
+                </div>
+
+                
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  import { PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
+  import { getModalHeight, getLogList } from './useComment'
+  import {inject, ref, watchEffect} from 'vue'
+  import { propTypes } from '/@/utils/propTypes';
+  import { Tooltip } from 'ant-design-vue';
+  // import dayjs from 'dayjs';
+  // import relativeTime from 'dayjs/plugin/relativeTime';
+  // import customParseFormat from 'dayjs/plugin/customParseFormat';
+  // dayjs.locale('zh');
+  // dayjs.extend(relativeTime);
+  // dayjs.extend(customParseFormat);
+  
+  export default {
+    name: "DataLogList",
+    components:{
+      PlusOutlined,
+      EditOutlined,
+      Tooltip
+    },
+    props: {
+      tableName: propTypes.string.def(''),
+      dataId: propTypes.string.def(''),
+      datetime:  propTypes.number.def(1),
+    },
+    setup(props){
+      const dayjs = inject('$dayjs')
+      const winHeight = getModalHeight();
+      const height = ref(300);
+      height.value = winHeight - 46 - 57 -53 - 30;
+
+      const dataList = ref([]);
+      const lastIndex = ref(0);
+      /**
+       * 加载数据
+       * @returns {Promise<void>}
+       */
+      async function loadData() {
+        const params = {
+          dataTable: props.tableName,
+          dataId: props.dataId,
+          type: 'comment'
+        };
+        const res = await getLogList(params);
+        if (!res || !res.result || res.result.length == 0) {
+          dataList.value = [];
+          lastIndex.value = -1;
+        } else {
+          let arr = res.result;
+          lastIndex.value = arr.length-1;
+          console.log('log-list', arr);
+          dataList.value = arr;
+        }
+      }
+      
+      watchEffect(() => {
+        if(props.datetime){
+          if (props.tableName && props.dataId) {
+            console.log(props.tableName, props.dataId)
+            loadData();
+          }
+        }
+      });
+      
+      
+
+      function getDateDiff(item) {
+        if (item.createTime) {
+          const temp = dayjs(item.createTime, 'YYYY-MM-DD hh:mm:ss');
+          return temp.fromNow();
+        }
+        return '';
+      }
+      
+      function handleClickPerson() {
+        console.log('此功能未开放')
+      }
+      
+      return {
+        height,
+        lastIndex,
+        dataList,
+        getDateDiff,
+        handleClickPerson
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.data-log-scroll{
+    box-sizing: border-box;
+    height: 100%;
+    padding-bottom: 16px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+    overflow-y: auto;
+    .data-log-content{
+ /*       right: -10px;
+        bottom: 0;
+        left: 0;
+        overflow: scroll;
+        overflow-x: hidden;
+        position: absolute;
+        top: 0;*/
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        .logbox{
+            box-sizing: border-box;
+            padding-left: 16px;
+            .log-item{
+                box-sizing: border-box;
+                color: #9e9e9e;
+                margin-bottom: 20px;
+                padding-left: 20px;
+                padding-right: 25px;
+                position: relative;
+                .log-item-icon{
+                    left: 0;
+                    line-height: 16px;
+                    position: absolute;
+                    top: 3px;
+                    vertical-align: middle;
+                }
+                .log-item-content{
+                    word-wrap: break-word;
+                    display: inline-block;
+                    font-size: 13px;
+                    vertical-align: middle;
+                    width: 100%;
+                    word-break: break-word;
+                    box-sizing: border-box;
+                }
+                .log-item-date{
+                    word-wrap: break-word;
+                    display: inline-block;
+                    font-size: 13px;
+                    vertical-align: middle;
+                    width: 100%;
+                    word-break: break-word;
+                    box-sizing: border-box;
+                    margin-top: 5px;
+                }
+            }
+        }
+    }
+
+}
+</style>
diff --git a/src/components/jeecg/comment/HistoryFileList.vue b/src/components/jeecg/comment/HistoryFileList.vue
new file mode 100644
index 0000000..ba039ee
--- /dev/null
+++ b/src/components/jeecg/comment/HistoryFileList.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="comment-file-his-list" :class="isComment === true ? 'in-comment' : ''">
+    <div class="selected-file-list">
+      <div class="item" v-for="item in dataList">
+        <div class="complex">
+          <div class="content">
+            <!-- 图片 -->
+            <div v-if="isImage(item)" class="content-top" style="height: 100%">
+              <div class="content-image" :style="getImageAsBackground(item)">
+                <!--<img style="height: 100%;" :src="getImageSrc(item)"/>-->
+              </div>
+            </div>
+            <!-- 文件 -->
+            <template v-else>
+              <div class="content-top">
+                <div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ')  no-repeat' }"></div>
+              </div>
+              <div class="content-bottom" :title="item.name">
+                <span>{{ item.name }}</span>
+              </div>
+            </template>
+          </div>
+          <div class="layer" :class="{'layer-image':isImage(item)}">
+            <div class="next" @click="viewImage(item)">
+              <div class="text">
+                {{ item.name }}
+              </div>
+              <div class="text">
+                {{ getFileSize(item) }}
+              </div>
+            </div>
+            <div class="buttons">
+              <div class="opt-icon">
+                <Tooltip title="下载">
+                  <download-outlined @click="downLoad(item)" />
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { Tooltip } from 'ant-design-vue';
+  import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { useFileList } from './useComment';
+
+  export default {
+    name: 'HistoryFileList',
+    props: {
+      dataList: {
+        type: Array,
+        default: () => [],
+      },
+      isComment: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    components: {
+      UploadOutlined,
+      FolderOutlined,
+      DownloadOutlined,
+      PaperClipOutlined,
+      DeleteOutlined,
+      Tooltip,
+    },
+    setup() {
+      const { getBackground, getFileSize, downLoad, isImage, getImageAsBackground, viewImage } = useFileList();
+      return {
+        getBackground,
+        downLoad,
+        getFileSize,
+        isImage,
+        getImageAsBackground,
+        viewImage
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import 'comment.less';
+</style>
diff --git a/src/components/jeecg/comment/MyComment.vue b/src/components/jeecg/comment/MyComment.vue
new file mode 100644
index 0000000..7e3d912
--- /dev/null
+++ b/src/components/jeecg/comment/MyComment.vue
@@ -0,0 +1,445 @@
+<template>
+  <div :class="{'comment-active': commentActive}" class="comment-main" @click="handleClickBlank">
+    <textarea ref="commentRef" v-model="myComment" @keyup.enter="sendComment" @input="handleCommentChange" @blur="handleBlur" class="comment-content" :rows="3" placeholder="请输入你的评论，可以@成员"></textarea>
+    <div ref="commentContentRef" class="comment-content comment-html-shower" :class="{'no-content':noConent, 'top-div': showHtml, 'bottom-div': showHtml == false }" v-html="commentHtml" @click="handleClickHtmlShower"></div>
+    <div class="comment-buttons" v-if="commentActive">
+      <div style="cursor: pointer">
+        <Tooltip title="选择@用户">
+          <user-add-outlined @click="openSelectUser" />
+        </Tooltip>
+
+        <Tooltip title="上传附件">
+          <PaperClipOutlined @click="uploadVisible = !uploadVisible" />
+        </Tooltip>
+
+        <span title="表情" style="display: inline-block">
+          <SmileOutlined ref="emojiButton" @click="handleShowEmoji" />
+          <div style="position: relative" v-show=""> </div>
+        </span>
+      </div>
+      <div v-if="commentActive">
+        <a-button v-if="inner" @click="noComment" style="margin-right: 10px">取消</a-button>
+        <a-button type="primary" @click="sendComment" :loading="buttonLoading" :disabled="disabledButton">发 送</a-button>
+      </div>
+    </div>
+    <upload-chunk ref="uploadRef" :visible="uploadVisible" @select="selectFirstFile"></upload-chunk>
+  </div>
+  <UserSelectModal  rowKey="username" @register="registerModal" @selected="setValue" :multi="false"></UserSelectModal>
+  <a-modal v-model:open="visibleEmoji" :footer="null" wrapClassName="emoji-modal" :closable="false" :width="460">
+    <template #title>
+      <span></span>
+    </template>
+    <Picker
+      :pickerStyles="pickerStyles" 
+      :i18n="optionsName" 
+      :data="emojiIndex"
+      emoji="grinning"
+      :showPreview="false" 
+      :infiniteScroll="false" 
+      :showSearch="false" 
+      :showSkinTones="false" 
+      set="apple" 
+      @select="showEmoji">
+    </Picker>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import {ref, watch, computed, inject} from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { UserAddOutlined, PaperClipOutlined, SmileOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
+  import UserSelectModal from '/@/components/Form/src/jeecg/components/userSelect/UserSelectModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import UploadChunk from './UploadChunk.vue';
+  import 'emoji-mart-vue-fast/css/emoji-mart.css';
+  import {getGloablEmojiIndex, useEmojiHtml} from './useComment';
+
+  const optionsName = {
+    categories: {
+      recent: '最常用的',
+      smileys: '表情选择',
+      people: '人物&身体',
+      nature: '动物&自然',
+      foods: '食物&饮料',
+      activity: '活动',
+      places: '旅行&地点',
+      objects: '物品',
+      symbols: '符号',
+      flags: '旗帜',
+    },
+  };
+  export default {
+    name: 'MyComment',
+    components: {
+      UserAddOutlined,
+      Tooltip,
+      UserSelectModal,
+      PaperClipOutlined,
+      UploadChunk,
+      SmileOutlined,
+    },
+    props: {
+      inner: propTypes.bool.def(false),
+      inputFocus: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['cancel', 'comment'],
+    setup(props, { emit }) {
+      const uploadVisible = ref(false);
+      const uploadRef = ref();
+      const commentContentRef = ref<null | HTMLDivElement>(null);
+      //注册model
+      const [registerModal, { openModal, closeModal }] = useModal();
+      const buttonLoading = ref(false);
+      const myComment = ref<string>('');
+      function sendComment(e) {
+        // 代码逻辑说明: 【TV360X-932】评论加上换行
+        const keyCode = e.keyCode || e.which;
+        if (keyCode == 13 && e.shiftKey) {
+          return;
+        }
+        let content = myComment.value;
+        if (!content && content !== '0') {
+          disabledButton.value = true;
+        } else {
+          buttonLoading.value = true;
+          let fileList = [];
+          if (uploadVisible.value == true) {
+            fileList = uploadRef.value.getUploadFileList();
+          }
+          emit('comment', content, fileList);
+          setTimeout(() => {
+            buttonLoading.value = false;
+          }, 350);
+        }
+      }
+      const disabledButton = ref(false);
+      watch(myComment, () => {
+        let content = myComment.value;
+        if (!content && content !== '0') {
+          disabledButton.value = true;
+        } else {
+          disabledButton.value = false;
+        }
+      });
+
+      function noComment() {
+        emit('cancel');
+      }
+
+      const commentRef = ref();
+      watch(
+        () => props.inputFocus,
+        (val) => {
+          if (val == true) {
+            // commentRef.value.focus()
+            myComment.value = '';
+            if (uploadVisible.value == true) {
+              uploadRef.value.clear();
+              uploadVisible.value = false;
+            }
+          }
+        },
+        { deep: true, immediate: true }
+      );
+
+      function openSelectUser() {
+        openModal(true, {
+          isUpdate: false,
+        });
+      }
+      function setValue(options) {
+        console.log('setValue', options);
+        if (options && options.length > 0) {
+          const { realname, username } = options[0];
+          if (realname && username) {
+            let str = `${realname}[${username}]`;
+            let temp = myComment.value;
+            // 代码逻辑说明: 【TV360X-929】选择@用户，应该插入到光标位置
+            if (!temp) {
+              myComment.value = '@' + str + ' ';
+            } else {
+              const index = commentRef.value?.selectionStart ?? temp.length;
+              let startStr = temp.substring(0, index);
+              const endStr = temp.substring(index);
+              if (startStr.endsWith('@')) {
+                if (startStr.length >= 2) {
+                  const i = startStr.length - 1;
+                  const s_str = startStr.substring(0, i);
+                  const e_str = startStr.substring(i);
+                  const spacing = s_str.endsWith(' ') ? '' : ' ';
+                  startStr = s_str + spacing + e_str;
+                }
+                myComment.value = startStr + str + ' ' + endStr;
+              } else {
+                const _symbol = startStr && startStr.endsWith(' ') ? '@' : ' @';
+                myComment.value = startStr + _symbol + str + ' ' + endStr;
+              }
+            }
+
+            // 代码逻辑说明: 【QQYUN-8002】选完人，鼠标应该放到后面并在前面加上空格---
+            showHtml.value = false;
+            commentRef.value.focus();
+            commentActive.value = true;
+          }
+        }
+        closeModal();        
+      }
+      // 代码逻辑说明: 【TV360X-927】@只有在输入时弹出用户弹窗，删除时不应该弹出
+      function handleCommentChange(e) {
+        if (e.data === '@') {
+          e.target.blur();
+          openSelectUser();
+        }
+      }
+      // watch(
+      //   () => myComment.value,
+      //   (val) => {
+      //     if (val && val.endsWith('@')) {
+      //       openSelectUser();
+      //     }
+      //   }
+      // );
+
+      const emojiButton = ref();
+      function onSelectEmoji(emoji) {
+        let temp = myComment.value || '';
+        temp += emoji;
+        myComment.value = temp;
+        emojiButton.value.click();
+      }
+      
+      const visibleEmoji = ref(false);
+      function showEmoji(e) {
+        let temp = myComment.value || '';
+        let str = e.colons;
+        if (str.indexOf('::') > 0) {
+          str = str.substring(0, str.indexOf(':') + 1);
+        }
+        // 代码逻辑说明: 【TV360X-931】评论表情插入光标位置
+        const index = commentRef.value?.selectionStart ?? temp.length;
+        // myComment.value = temp + str;
+        const startStr = temp.substring(0, index);
+        const endStr = temp.substring(index);
+        myComment.value = startStr + str + endStr;
+        visibleEmoji.value = false;
+        handleBlur();
+      }
+
+      const pickerStyles = {
+        width: '460px'
+        /* height: '350px',
+        top: '0px',
+        left: '-75px',
+        position: 'absolute',
+        'z-index': 9999*/
+      };
+      function handleClickBlank(e) {
+        console.log('handleClickBlank');
+        e.preventDefault();
+        e.stopPropagation();
+        visibleEmoji.value = false;
+        commentActive.value = true;
+      }
+      function handleShowEmoji(e) {
+        console.log('handleShowEmoji');
+        e.preventDefault();
+        e.stopPropagation();
+        visibleEmoji.value = !visibleEmoji.value;
+      }
+      
+      //const emojiIndex = inject('$globalEmojiIndex')
+      const emojiIndex = getGloablEmojiIndex()
+      const { getHtml } = useEmojiHtml(emojiIndex);
+
+      const commentHtml = computed(() => {
+        let temp = myComment.value;
+        if (!temp) {
+          return '请输入你的评论，可以@成员';
+        }
+        return getHtml(temp);
+      });
+
+      const showHtml = ref(false);
+      function handleClickHtmlShower(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showHtml.value = false;
+        commentRef.value.focus();
+        console.log(234);
+        commentActive.value = true;
+      }
+      function handleBlur() {
+        showHtml.value = true;
+        // 代码逻辑说明: 解决多行获取焦点和失去焦点时滚动位置不一致
+        setTimeout(() => {
+          commentContentRef.value!.scrollTop = commentRef.value.scrollTop;
+        }, 0);
+      }
+      
+      const commentActive = ref(false);
+      const noConent = computed(()=>{
+        if(myComment.value.length>0){
+          return false;
+        }
+        return true;
+      });
+      function changeActive(){
+        if(myComment.value.length==0){
+          commentActive.value = false
+          uploadVisible.value = false;
+        }
+      }
+      
+      function selectFirstFile(fileName){
+        if(myComment.value.length==0){
+          myComment.value = fileName;
+        }
+      }
+      
+      return {
+        myComment,
+        sendComment,
+        noComment,
+        disabledButton,
+        buttonLoading,
+        commentRef,
+        registerModal,
+        openSelectUser,
+        setValue,
+        handleCommentChange,
+        uploadRef,
+        uploadVisible,
+        onSelectEmoji,
+        optionsName,
+        emojiButton,
+        emojiIndex,
+        showEmoji,
+        pickerStyles,
+        visibleEmoji,
+        handleClickBlank,
+        handleShowEmoji,
+        commentHtml,
+        showHtml,
+        handleClickHtmlShower,
+        handleBlur,
+        commentActive,
+        noConent,
+        changeActive,
+        selectFirstFile,
+        commentContentRef,
+      };
+    },
+  };
+</script>
+
+<style lang="less">
+  // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+  .comment-main {
+    border: 1px solid #eee;
+    margin: 0;
+    position: relative;
+  }
+  .comment-content {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: tnum;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    padding: 4px 11px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 15px;
+    line-height: 1.5715;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    transition: all 0.3s;
+    width: 100%;
+    border: solid 0px;
+    outline: none;
+    // 代码逻辑说明: 【TV360X-933】评论框拖动之后底部评论列表被覆盖了部分
+    resize: none;
+    .emoji-item {
+      display: inline-block !important;
+      width: 0 !important;
+    }
+  }
+  .comment-buttons {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    border-top: 1px solid #d9d9d9;
+    .anticon {
+      margin: 5px;
+    }
+  }
+  .comment-html-shower {
+    position: absolute;
+    top: 0;
+    left: 0;
+    // 代码逻辑说明: 解决多行获取焦点和失去焦点时滚动位置不一致
+    height: 78px;
+    overflow-y: auto;
+    &.bottom-div {
+      z-index: -99;
+    }
+    &.top-div {
+      z-index: 9;
+    }
+  }
+
+  .emoji-modal  {
+   > .ant-modal{
+      right: 25% !important;
+      margin-right: 16px !important;
+    }
+    .ant-modal-header{
+      padding: 0 !important;
+    }
+    .emoji-mart-bar{
+      display: none;
+    }
+    h3.emoji-mart-category-label{
+    /*  display: none;*/
+      border-bottom: 1px solid #eee;
+    }
+  }
+  
+  .comment-active{
+    border-color: @primary-color !important;
+    // box-shadow: 0 1px 1px 0 #90caf9, 0 1px 6px 0 #90caf9;
+  }
+  .no-content{
+    color: #a1a1a1
+  }
+  
+  /**聊天表情本地化*/
+  .emoji-type-image.emoji-set-apple {
+    background-image: url("./image/emoji.png");
+  }
+  // 代码逻辑说明: 【QQYUN-8639】暗黑主题适配
+  html[data-theme='dark'] {
+    .emoji-type-image.emoji-set-apple {
+      background-image: url("./image/emoji_native.png");
+    }
+    .comment-main {
+      border-color: rgba(253, 253, 253, 0.12);
+    }
+    .comment-content {
+      background-color: #141414;
+      color: rgba(255, 255, 255, 0.85);
+      border-color: rgba(253, 253, 253, 0.12);
+    }
+    .comment-buttons{
+      border-color: rgba(253, 253, 253, 0.12);
+    }
+  }
+</style>
diff --git a/src/components/jeecg/comment/UploadChunk.vue b/src/components/jeecg/comment/UploadChunk.vue
new file mode 100644
index 0000000..2ec08ab
--- /dev/null
+++ b/src/components/jeecg/comment/UploadChunk.vue
@@ -0,0 +1,140 @@
+<template>
+  <div v-if="visible">
+    <a-alert type="info" class="jeecg-comment-files" style="margin: 0">
+      <template #message>
+        <span class="j-icon">
+          <a-upload multiple v-model:file-list="selectFileList" :showUploadList="false" :before-upload="beforeUpload">
+            <span class="inner-button"><upload-outlined />上传</span>
+          </a-upload>
+        </span>
+      </template>
+    </a-alert>
+
+    <!-- 正在上传的文件 -->
+    <div class="selected-file-warp" v-if="selectFileList && selectFileList.length > 0">
+      <div class="selected-file-list">
+        <div class="item" v-for="item in selectFileList">
+          <div class="complex">
+            <div class="content">
+              <!-- 图片 -->
+              <div v-if="isImage(item)" class="content-top" style="height: 100%">
+                <div class="content-image" :style="{'height':'100%', 'backgroundImage': 'url('+getImageSrc(item)+')'}">
+                  <!--  <img style="height: 100%;" :src="getImageSrc(item)">-->
+                </div>
+              </div>
+              <!-- 文件 -->
+              <template v-else>
+                <div class="content-top">
+                  <div class="content-icon" :style="{ background: 'url(' + getBackground(item) + ')  no-repeat' }"></div>
+                </div>
+                <div class="content-bottom" :title="item.name">
+                  <span>{{ item.name }}</span>
+                </div>
+              </template>
+            </div>
+            <div class="layer" :class="{'layer-image':isImage(item)}">
+              <div class="next" @click="viewImage(item)">
+                <div class="text">{{ item.name }} </div>
+              </div>
+              <div class="buttons">
+                <div class="opt-icon">
+                  <Tooltip title="删除">
+                    <delete-outlined @click="handleRemove(item)" />
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div> <div class="item empty"></div><div class="item empty"></div><div class="item empty"></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts">
+  import { toRaw, watch } from 'vue';
+  import { useFileList } from './useComment';
+  import { Tooltip } from 'ant-design-vue';
+  import { UploadOutlined, FolderOutlined, DownloadOutlined, PaperClipOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import {useModal} from "/@/components/Modal";
+  
+  export default {
+    name: 'UploadChunk',
+    components: {
+      Tooltip,
+      UploadOutlined,
+      FolderOutlined,
+      DownloadOutlined,
+      PaperClipOutlined,
+      DeleteOutlined,
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits:['select'],
+    setup(_p, {emit}) {
+      const { selectFileList, beforeUpload, handleRemove, getBackground, isImage, getImageSrc, viewImage } = useFileList();
+
+      const [registerModel, { openModal }] = useModal();
+      
+      function getUploadFileList() {
+        let list = toRaw(selectFileList.value);
+        console.log(list);
+        return list;
+      }
+      
+      function clear(){
+        selectFileList.value = [];
+      }
+      
+      watch(()=>selectFileList.value, (arr)=>{
+        if(arr && arr.length>0){
+          let name = arr[0].name;
+          if(name){
+            emit('select', name)
+          }
+        }
+      });
+
+      function showFileModal() {
+        openModal(true, {})
+      }
+
+      function onSelectFileOk(temp) {
+        let arr = selectFileList.value;
+        // 代码逻辑说明: 【JHHB-524】我的日程留言功能，从文件库中无法选附件
+        temp.forEach((item) => {
+          arr.push({
+            ...item,
+            exist: true
+          })
+        });
+        selectFileList.value = arr;
+      }
+
+      return {
+        selectFileList,
+        beforeUpload,
+        handleRemove,
+        getBackground,
+        getUploadFileList,
+        clear,
+        isImage, 
+        getImageSrc, 
+        viewImage,
+        registerModel,
+        showFileModal,
+        onSelectFileOk
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import 'comment.less';
+</style>
diff --git a/src/components/jeecg/comment/comment.less b/src/components/jeecg/comment/comment.less
new file mode 100644
index 0000000..5b9b64a
--- /dev/null
+++ b/src/components/jeecg/comment/comment.less
@@ -0,0 +1,252 @@
+/*文件上传列表-begin*/
+.selected-file-warp,
+.comment-file-his-list {
+  margin: 10px 20px;
+  &.in-comment{
+    margin: 10px 6px;
+  }
+}
+.selected-file-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-right: -6px;
+  .item {
+    box-sizing: border-box;
+    display: inline-block;
+    flex: 1 1 0%;
+    height: 118px;
+    margin: 0 6px 6px 0;
+    min-width: 140px;
+    max-width: 200px;
+    width: 150px;
+    &.empty {
+      height: 0;
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+    .complex {
+      border: 1px solid #e0e0e0;
+      box-sizing: border-box;
+      height: 100%;
+      position: relative;
+      .content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        box-sizing: border-box;
+        .content-top {
+          align-items: center;
+          background-color: #f5f5f5;
+          display: flex;
+          flex: 1 1 0%;
+          justify-content: center;
+          .content-icon {
+            background-position: 50%;
+            background-size: contain !important;
+            height: 55px;
+            width: 40px;
+            display: inline-block;
+            overflow: hidden;
+            text-align: left;
+            text-indent: -9999px;
+          }
+          .content-image{
+            background-position: 50%;
+            background-repeat: no-repeat;
+            background-size: cover;
+            height: 100%;
+            width: 100%;
+          }
+        }
+        .content-bottom {
+          align-items: center;
+          background-color: #fff;
+          display: flex;
+          flex-basis: 30px;
+          font-size: 13px;
+          justify-content: flex-start;
+          padding: 0 10px;
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      .layer {
+        opacity: 0;
+        background-color: #f5f5f5;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transition: opacity 0.2s;
+        width: 100%;
+        &:hover {
+          opacity: 1;
+        }
+        .next {
+          height: 75px;
+          padding: 5px;
+          .text {
+            color: rgba(51, 51, 51, 0.6) !important;
+            align-items: center;
+            display: flex;
+            flex-basis: 30px;
+            font-size: 12px;
+            justify-content: flex-start;
+            padding: 3px 7px 4px;
+            word-break: break-all;
+            display: -webkit-box;
+            line-height: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        .buttons {
+          flex-basis: 32px;
+          text-align: right;
+          display: flex;
+          align-items: flex-end;
+          padding-right: 5px;
+          justify-content: flex-end;
+          .opt-icon {
+            background-color: #fff;
+            border-radius: 2px;
+            cursor: pointer;
+            height: 24px;
+            width: 32px;
+            margin: 5px;
+            text-align: center;
+            .anticon-delete:hover {
+              color: red;
+            }
+            .anticon-download:hover{
+              color: #1e88e5 !important
+            }
+          }
+        }
+      }
+      .layer-image{
+        background: #000;
+        &:hover {
+          opacity: 0.6;
+        }
+        .next{
+          .text{
+            color: #fff !important;
+          }
+        }
+        .opt-icon{
+          color: #000 !important;
+          .anticon-delete:hover {
+            color: red;
+          }
+        }
+      }
+      
+    }
+  }
+}
+
+.jeecg-comment-files {
+  margin: 0 20px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  &.ant-alert-info{
+    background-color: #f5f5f5;
+    border: 1px solid #f5f5f5;
+  }
+  .j-icon {
+    cursor: pointer;
+    display: inline-block;
+    border: 1px solid #e6f7ff;
+    padding: 2px 7px;
+    margin: 0 10px;
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: #fff;
+      color: #096dd9;
+    }
+    .inner-button {
+      display: inline-block;
+      color:#9e9e9e;
+      &:hover,
+      &:focus,
+      &:active {
+        /*border-color: #fff;*/
+       /* color: #096dd9;*/
+        color: #000;
+      }
+      span{
+        margin-right: 3px;
+      }
+    }
+  }
+}
+
+.comment-file-list {
+  .detail-item {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    line-height: 24px;
+    border-bottom: 1px solid #f0f0f0;
+    height: 100%;
+
+    .item-title {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-shrink: 0;
+      flex-grow: 0;
+      min-width: 100px;
+      width: 20%;
+      max-width: 220px;
+      background-color: #fafafa;
+      border-right: 1px solid #f0f0f0;
+      /* border-left: 1px solid #f0f0f0;*/
+      padding: 10px 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .item-content {
+      border-right: 1px solid #f0f0f0;
+      flex-grow: 1;
+      padding-left: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      .anticon {
+        &:hover {
+          color: #40a9ff;
+        }
+      }
+    }
+  }
+}
+
+// update-begin--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
+html[data-theme='dark'] {
+  .jeecg-comment-files {
+    &.ant-alert-info {
+      background-color: #141414;
+      border: 1px solid #3a3a3a;
+    }
+    .j-icon,
+    .j-icon:hover {
+      border-color: #3a3a3a;
+      .inner-button:hover {
+        color: #bebebe;
+      }
+    }
+  }
+}
+// update-end--author:liaozhiyang---date:20240327---for：【QQYUN-8639】暗黑主题适配
diff --git a/src/components/jeecg/comment/image/emoji.png b/src/components/jeecg/comment/image/emoji.png
new file mode 100644
index 0000000..eaef1f3
Binary files /dev/null and b/src/components/jeecg/comment/image/emoji.png differ
diff --git a/src/components/jeecg/comment/image/emoji_native.png b/src/components/jeecg/comment/image/emoji_native.png
new file mode 100644
index 0000000..9efea64
Binary files /dev/null and b/src/components/jeecg/comment/image/emoji_native.png differ
diff --git a/src/components/jeecg/comment/useComment.ts b/src/components/jeecg/comment/useComment.ts
new file mode 100644
index 0000000..8db8f66
--- /dev/null
+++ b/src/components/jeecg/comment/useComment.ts
@@ -0,0 +1,459 @@
+import { useMessage } from '/@/hooks/web/useMessage';
+import { defHttp } from '/@/utils/http/axios';
+import { useGlobSetting } from '/@/hooks/setting';
+const globSetting = useGlobSetting();
+const baseUploadUrl = globSetting.uploadUrl;
+import { ref, toRaw, unref, reactive } from 'vue';
+import { uploadMyFile } from '/@/api/common/api';
+
+import excel from '/@/assets/svg/fileType/excel.svg';
+import other from '/@/assets/svg/fileType/other.svg';
+import pdf from '/@/assets/svg/fileType/pdf.svg';
+import txt from '/@/assets/svg/fileType/txt.svg';
+import word from '/@/assets/svg/fileType/word.svg';
+import image from '/@/assets/svg/fileType/image.png';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { createImgPreview } from '/@/components/Preview';
+import data from "emoji-mart-vue-fast/data/apple.json";
+import { EmojiIndex } from "emoji-mart-vue-fast/src";
+import { encryptByBase64 } from '/@/utils/cipher';
+
+enum Api {
+  list = '/sys/comment/listByForm',
+  addText = '/sys/comment/addText',
+  deleteOne = '/sys/comment/deleteOne',
+  fileList = '/sys/comment/fileList',
+  logList = '/sys/dataLog/queryDataVerList',
+  queryById = '/sys/comment/queryById',
+  getFileViewDomain = '/sys/comment/getFileViewDomain',
+}
+
+// 文件预览地址的domain 在后台配置的
+let onlinePreviewDomain = '';
+
+/**
+ * 获取文件预览的domain
+ */
+const getViewFileDomain = () => defHttp.get({ url: Api.getFileViewDomain });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+export function getGloablEmojiIndex(){
+  if(window['myEmojiIndex']){
+    console.log("----走window['myEmojiIndex']缓存，不new新对象！")
+    return window['myEmojiIndex'];
+  }
+  
+  window['myEmojiIndex'] = new EmojiIndex(data, {
+    function() {
+      return true;
+    },
+    exclude:['recent','people','nature','foods','activity','places','objects','symbols','flags']
+  });
+  return window['myEmojiIndex'];
+}
+
+/**
+ * 查询单条记录
+ * @param params
+ */
+export const queryById = (id) => {
+  let params = { id: id };
+  return defHttp.get({ url: Api.queryById, params },{ isTransformResponse: false });
+};
+
+/**
+ * 文件列表接口
+ * @param params
+ */
+export const fileList = (params) => defHttp.get({ url: Api.fileList, params });
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true });
+};
+
+/**
+ * 保存
+ * @param params
+ */
+export const saveOne = (params) => {
+  let url = Api.addText;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};
+
+/**
+ * 数据日志列表接口
+ * @param params
+ */
+export const getLogList = (params) => defHttp.get({ url: Api.logList, params }, {isTransformResponse: false});
+
+
+/**
+ * 文件上传接口
+ */
+export const uploadFileUrl = `${baseUploadUrl}/sys/comment/addFile`;
+
+export function useCommentWithFile(props) {
+  let uploadData = {
+    biz: 'comment',
+    commentId: '',
+  };
+  const { createMessage } = useMessage();
+  const buttonLoading = ref(false);
+
+  //确定按钮触发
+  async function saveCommentAndFiles(obj, fileList) {
+    buttonLoading.value = true;
+    setTimeout(() => {
+      buttonLoading.value = false;
+    }, 500);
+    await saveComment(obj);
+    await uploadFiles(fileList);
+  }
+
+  /**
+   * 保存评论
+   */
+  async function saveComment(obj) {
+    const {fromUserId, toUserId, commentId, commentContent} = obj;
+    let commentData = {
+      tableId: props.tableId,
+      tableName: props.tableName,
+      tableDataId: props.dataId,
+      fromUserId,
+      commentContent,
+      toUserId: '',
+      commentId: ''
+    };
+    if(toUserId){
+      commentData.toUserId = toUserId;
+    }
+    if(commentId){
+      commentData.commentId = commentId;
+    }
+    uploadData.commentId = '';
+    const res = await saveOne(commentData);
+    if (res.success) {
+      uploadData.commentId = res.result;
+    } else {
+      createMessage.warning(res.message);
+      return Promise.reject('保存评论失败');
+    }
+  }
+
+  async function uploadOne(file) {
+    let url = uploadFileUrl;
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('tableName', props.tableName);
+    formData.append('tableDataId', props.dataId);
+    Object.keys(uploadData).map((k) => {
+      formData.append(k, uploadData[k]);
+    });
+    return new Promise((resolve, reject) => {
+      uploadMyFile(url, formData).then((res: any) => {
+        console.log('uploadMyFile', res);
+        if (res && res.data) {
+          if (res.data.result == 'success') {
+            resolve(1);
+          } else {
+            createMessage.warning(res.data.message);
+            reject();
+          }
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+
+  /**
+   * QQYUN-4310【文件】从文件库选择文件功能未做
+   * @param file
+   */
+  async function saveSysFormFile(file){
+    let url = '/sys/comment/addFile';
+    let params = {
+      fileId: file.id,
+      commentId: uploadData.commentId
+    }
+    await defHttp.post({url, params}, { joinParamsToUrl: true, isTransformResponse: false });
+  }
+
+  async function uploadFiles(fileList) {
+    if (fileList && fileList.length > 0) {
+      for (let i = 0; i < fileList.length; i++) {
+        let file = toRaw(fileList[i]);
+        if(file.exist === true){
+          await saveSysFormFile(file);
+        }else{
+          await uploadOne(file.originFileObj);
+        }
+      }
+    }
+  }
+
+  return {
+    saveCommentAndFiles,
+    buttonLoading,
+  };
+}
+
+export function uploadMu(fileList) {
+  const formData = new FormData();
+  // let arr = []
+  for(let file of fileList){
+    formData.append('files[]', file.originFileObj);
+  }
+  console.log(formData)
+  let url = `${baseUploadUrl}/sys/comment/addFile2`;
+  uploadMyFile(url, formData).then((res: any) => {
+    console.log('uploadMyFile', res);
+  });
+}
+
+/**
+ * 显示文件列表
+ */
+export function useFileList() {
+  const imageSrcMap = reactive({});
+  const typeMap = {
+    xls: excel,
+    xlsx: excel,
+    pdf: pdf,
+    txt: txt,
+    docx: word,
+    doc: word,
+    image
+  };
+   function getBackground(item) {
+    console.log('获取文件背景图', item);
+    if (isImage(item)) {
+      return 'none'
+    } else {
+      const name = item.name;
+      if(!name){
+        return 'none';
+      }
+      const suffix = name.substring(name.lastIndexOf('.') + 1);
+      console.log('suffix', suffix)
+      let bg = typeMap[suffix];
+      if (!bg) {
+        bg = other;
+      }
+      return bg;
+    }
+  }
+  
+  function getImageTypeIcon() {
+    return typeMap['image'];
+  }
+
+  function getBase64(file, id){
+    return new Promise((resolve, reject) => {
+      //声明js的文件流
+      let reader = new FileReader();
+      if(file){
+        //通过文件流将文件转换成Base64字符串
+        reader.readAsDataURL(file);
+        //转换成功后
+        reader.onload = function () {
+          let base = reader.result;
+          console.log('base', base)
+          imageSrcMap[id] = base;
+          console.log('imageSrcMap', imageSrcMap)
+          resolve(base)
+        }
+      }else{
+        reject();
+      }
+    })
+  }
+  function handleImageSrc(file){
+    if(isImage(file)){
+      let id = file.uid;
+      getBase64(file, id);
+    }
+  }
+
+  function downLoad(file) {
+    let url = getFileAccessHttpUrl(file.url);
+    if (url) {
+      window.open(url);
+    }
+  }
+
+  function getFileSize(item) {
+    let size = item.fileSize;
+    if (!size) {
+      return '0B';
+    }
+    let temp = Math.round(size / 1024);
+    return temp + ' KB';
+  }
+
+  const selectFileList = ref<any[]>([]);
+  function beforeUpload(file) {
+    handleImageSrc(file);
+    selectFileList.value = [...selectFileList.value, file];
+    console.log('selectFileList', unref(selectFileList));
+    return false
+  }
+
+  function handleRemove(file) {
+    const index = selectFileList.value.indexOf(file);
+    const newFileList = selectFileList.value.slice();
+    newFileList.splice(index, 1);
+    selectFileList.value = newFileList;
+  }
+
+  function isImage(item){
+    const type = item.type||'';
+    if (type.indexOf('image') >= 0) {
+      return true;
+    }
+    return false;
+  }
+
+  function getImageSrc(file){
+    if(file.exist){
+      return getFileAccessHttpUrl(file.url);
+    }
+    if(isImage(file)){
+      let id = file.uid;
+      if(id){
+        if(imageSrcMap[id]){
+          return imageSrcMap[id];
+        }
+      }else if(file.url){
+        //数据库中地址
+        let url = getFileAccessHttpUrl(file.url);
+        return url;
+      }
+    }
+    return ''
+  }
+
+  /**
+   * 显示图片
+   * @param item
+   */
+  function getImageAsBackground(item){
+    let url;
+    if(item.exist){
+      url = getFileAccessHttpUrl(item.url);
+    }else{
+      url = getImageSrc(item);
+    }
+    if(url){
+      return {
+        "backgroundImage": "url('"+url+"')"
+      }
+    }
+    return {}
+  }
+
+  /**
+   * 预览列表 cell 图片
+   * @param text
+   */
+  async function viewImage(file) {
+    if(isImage(file)){
+      let text = getImageSrc(file)
+      if (text) {
+        let imgList = [text];
+        createImgPreview({ imageList: imgList });
+      }
+    }else{
+      if(file.url){
+        //数据库中地址
+        let url = getFileAccessHttpUrl(file.url);
+        await initViewDomain();
+        //本地测试需要将文件地址的localhost/127.0.0.1替换成IP, 或是直接修改全局domain
+        //url = url.replace('localhost', '192.168.1.100')
+        // 代码逻辑说明: 【TV360X-952】升级到kkfileview4.1.0---
+        let previewUrl = encodeURIComponent(encryptByBase64(url));
+        window.open(onlinePreviewDomain+'?url='+previewUrl);
+      }
+    }
+  }
+
+  /**
+   * 初始化domain
+   */
+  async function initViewDomain(){
+    if(!onlinePreviewDomain){
+      onlinePreviewDomain = await getViewFileDomain();
+    }
+    if(!onlinePreviewDomain.startsWith('http')){
+      onlinePreviewDomain = 'http://'+ onlinePreviewDomain;
+    }
+  }
+
+  return {
+    selectFileList,
+    getBackground,
+    getFileSize,
+    downLoad,
+    beforeUpload,
+    handleRemove,
+    isImage,
+    getImageSrc,
+    getImageAsBackground,
+    viewImage,
+    getImageTypeIcon
+  };
+}
+
+/**
+ * 用于emoji渲染
+ */
+export function useEmojiHtml(globalEmojiIndex){
+  const COLONS_REGEX = new RegExp('([^:]+)?(:[a-zA-Z0-9-_+]+:(:skin-tone-[2-6]:)?)','g');
+
+  function getHtml(text) {
+    if(!text){
+      return ''
+    }
+    return text.replace(COLONS_REGEX, function (match, p1, p2) {
+      const before = p1 || ''
+      if (endsWith(before, 'alt="') || endsWith(before, 'data-text="')) {
+        return match
+      }
+      let emoji = globalEmojiIndex.findEmoji(p2)
+      if (!emoji) {
+        return match
+      }
+      return before + emoji2Html(emoji)
+    })
+    return text;
+  }
+
+  function endsWith(str, temp){
+    return str.endsWith(temp)
+  }
+
+  function emoji2Html(emoji) {
+    let style = `position: absolute;top: -3px;left: 3px;width: 18px; height: 18px;background-position: ${emoji.getPosition()}`
+    return `<span style="width: 24px" class="emoji-mart-emoji"><span class="my-emoji-icon emoji-set-apple emoji-type-image" style="${style}"> </span> </span>`
+  }
+  
+  return {
+    globalEmojiIndex,
+    getHtml
+  }
+}
+
+/**
+ * 获取modal窗体高度
+ */
+export function getModalHeight(){
+  return window.innerHeight;
+}
diff --git a/src/components/jeecg/thirdApp/JThirdAppButton.vue b/src/components/jeecg/thirdApp/JThirdAppButton.vue
new file mode 100644
index 0000000..c6b7f79
--- /dev/null
+++ b/src/components/jeecg/thirdApp/JThirdAppButton.vue
@@ -0,0 +1,180 @@
+<template>
+  <template v-if="syncToApp || syncToLocal">
+    <JThirdAppDropdown v-if="enabledTypes.wechatEnterprise" type="wechatEnterprise" name="企微" v-bind="bindAttrs" v-on="bindEvents" />
+    <JThirdAppDropdown v-if="enabledTypes.dingtalk" type="dingtalk" name="钉钉" v-bind="bindAttrs" v-on="bindEvents" />
+  </template>
+  <template v-else>未设置任何同步方向</template>
+</template>
+
+<script lang="ts" setup>
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { ref, computed, createVNode, h, resolveComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { backEndUrl, getEnabledTypes, doSyncThirdApp } from './jThirdApp.api';
+  import { Modal, Input } from 'ant-design-vue';
+  import JThirdAppDropdown from './JThirdAppDropdown.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage, createWarningModal } = useMessage();
+  const props = defineProps({
+    // 同步类型，可以是 user、depart
+    bizType: {
+      type: String,
+      required: true,
+    },
+    // 是否允许同步到第三方APP
+    syncToApp: Boolean,
+    // 是否允许第三方APP同步到本地
+    syncToLocal: Boolean,
+    // 选择的行
+    selectedRowKeys: Array,
+  });
+  // 声明Emits
+  const emit = defineEmits(['sync-ok', 'sync-error', 'sync-finally']);
+
+  const enabledTypes = ref({});
+  // 绑定属性
+  const bindAttrs = computed(() => {
+    return {
+      syncToApp: props.syncToApp,
+      syncToLocal: props.syncToLocal,
+    };
+  });
+  // 绑定方法
+  const bindEvents = computed(() => {
+    return {
+      'to-app': onToApp,
+      'to-local': onToLocal,
+    };
+  });
+
+  // 同步到第三方App
+  function onToApp(e) {
+    doSync(e.type, '/toApp');
+  }
+
+  // 同步到本地
+  function onToLocal(e) {
+    doSync(e.type, '/toLocal');
+  }
+
+  // 获取启用的第三方App
+  async function loadEnabledTypes() {
+    enabledTypes.value = await getEnabledTypes();
+  }
+
+  // 开始同步第三方App
+  function doSync(type, direction) {
+    let urls = backEndUrl[type];
+    if (!(urls && urls[props.bizType])) {
+      console.warn('配置出错');
+      return;
+    }
+    let url = urls[props.bizType] + direction;
+    let selectedRowKeys = props.selectedRowKeys;
+    let content = '确定要开始同步全部数据吗？可能花费较长时间！';
+
+    if (Array.isArray(selectedRowKeys) && selectedRowKeys.length > 0) {
+      content = `确定要开始同步这 ${selectedRowKeys.length} 项吗？`;
+    } else {
+      selectedRowKeys = [];
+    }
+    return new Promise((resolve, reject) => {
+      const model = Modal.confirm({
+        icon: createVNode(ExclamationCircleOutlined),
+        title: '同步',
+        content,
+        onOk: () => {
+          model.update({
+            keyboard: false,
+            okText: '同步中…',
+            cancelButtonProps: { disabled: true },
+          });
+          let params = { ids: selectedRowKeys.join(',') };
+          return defHttp
+            .get({ url, params }, { isTransformResponse: false })
+            .then((res) => {
+              let options = {};
+              if (res.result) {
+                options = {
+                  width: 600,
+                  title: res.message,
+                  content: () => {
+                    let nodes;
+                    let successInfo = [`成功信息如下：`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
+                    if (res.success) {
+                      nodes = [...successInfo, h('br'), `无失败信息！`];
+                    } else {
+                      nodes = [
+                        `失败信息如下：`,
+                        renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
+                        h('br'),
+                        ...successInfo,
+                      ];
+                    }
+                    return nodes;
+                  },
+                };
+              }
+              if (res.success) {
+                if (options != null) {
+                  Modal.success(options);
+                } else {
+                  createMessage.warning(res.message);
+                }
+                emit('sync-ok');
+              } else {
+                if (options != null) {
+                  Modal.warning(options);
+                } else {
+                  createMessage.warning(res.message);
+                }
+                emit('sync-error');
+              }
+            })
+            .catch(() => model.destroy())
+            .finally(() => {
+              resolve();
+              emit('sync-finally', {
+                type,
+                direction,
+                isToApp: direction === '/toApp',
+                isToLocal: direction === '/toLocal',
+              });
+            });
+        },
+        onCancel() {
+          resolve();
+        },
+      });
+    });
+  }
+
+  function renderTextarea(h, value) {
+    return h(
+      'div',
+      {
+        id: 'box',
+        style: {
+          minHeight: '100px',
+          border: '1px solid #d9d9d9',
+          fontSize: '14px',
+          maxHeight: '250px',
+          whiteSpace: 'pre',
+          overflow: 'auto',
+          padding: '10px',
+        },
+      },
+      value
+    );
+  }
+
+  // 获取启用的第三方App
+  loadEnabledTypes();
+</script>
+
+<style scoped>
+  #box:hover {
+    border-color: #40a9ff;
+  }
+</style>
diff --git a/src/components/jeecg/thirdApp/JThirdAppDropdown.vue b/src/components/jeecg/thirdApp/JThirdAppDropdown.vue
new file mode 100644
index 0000000..bb4230c
--- /dev/null
+++ b/src/components/jeecg/thirdApp/JThirdAppDropdown.vue
@@ -0,0 +1,43 @@
+<template>
+  <a-dropdown v-if="syncToApp && syncToLocal">
+    <a-button type="primary" preIcon="ant-design:sync-outlined">同步{{ name }}</a-button>
+    <template #overlay>
+      <a-menu @click="handleMenuClick">
+        <a-menu-item v-if="syncToApp" key="to-app">同步到{{ name }}</a-menu-item>
+        <a-menu-item v-if="getSyncToLocal" key="to-local">同步到本地</a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+  <a-button v-else-if="syncToApp" type="primary" preIcon="ant-design:sync-outlined" @click="handleMenuClick({ key: 'to-app' })"
+    >同步{{ name }}</a-button
+  >
+  <a-button v-else type="primary" preIcon="ant-design:sync-outlined" @click="handleMenuClick({ key: 'to-local' })">同步{{ name }}到本地</a-button>
+</template>
+
+<script lang="ts" setup>
+  /* JThirdAppButton 的子组件，不可单独使用 */
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    type: String,
+    name: String,
+    syncToApp: Boolean,
+    syncToLocal: Boolean,
+  });
+  // 声明Emits
+  const emit = defineEmits(['to-app', 'to-local']);
+
+  const getSyncToLocal = computed(() => {
+    // 由于企业微信接口变更，将不再支持同步到本地
+    if (props.type === 'wechatEnterprise') {
+      return false;
+    }
+    return props.syncToLocal;
+  });
+
+  function handleMenuClick(event) {
+    emit(event.key, { type: props.type });
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/components/jeecg/thirdApp/jThirdApp.api.ts b/src/components/jeecg/thirdApp/jThirdApp.api.ts
new file mode 100644
index 0000000..a3dfc04
--- /dev/null
+++ b/src/components/jeecg/thirdApp/jThirdApp.api.ts
@@ -0,0 +1,37 @@
+import { defHttp } from '/@/utils/http/axios';
+import { cloneObject } from '/@/utils/index';
+
+export const backEndUrl = {
+  // 获取启用的第三方App
+  getEnabledType: '/sys/thirdApp/getEnabledType',
+  // 企业微信
+  wechatEnterprise: {
+    user: '/sys/thirdApp/sync/wechatEnterprise/user',
+    depart: '/sys/thirdApp/sync/wechatEnterprise/depart',
+  },
+  // 钉钉
+  dingtalk: {
+    user: '/sys/thirdApp/sync/dingtalk/user',
+    depart: '/sys/thirdApp/sync/dingtalk/depart',
+  },
+};
+// 启用了哪些第三方App（在此缓存）
+let enabledTypes = null;
+
+// 获取启用的第三方App
+export const getEnabledTypes = async () => {
+  // 获取缓存
+  if (enabledTypes != null) {
+    return cloneObject(enabledTypes);
+  } else {
+    let { success, result } = await defHttp.get({ url: backEndUrl.getEnabledType }, { isTransformResponse: false });
+    if (success) {
+      // 在此缓存
+      enabledTypes = cloneObject(result);
+      return result;
+    } else {
+      console.warn('getEnabledType查询失败：');
+    }
+  }
+  return {};
+};
diff --git a/src/components/onlinePreview/WpsFileView.vue b/src/components/onlinePreview/WpsFileView.vue
new file mode 100644
index 0000000..a8321d9
--- /dev/null
+++ b/src/components/onlinePreview/WpsFileView.vue
@@ -0,0 +1,63 @@
+<!--wps文件预览页面-->
+<template></template>
+
+<script lang="ts" setup name="online-preview">
+  import { router } from '@/router';
+  import { defHttp } from '/@/utils/http/axios';
+  import OpenSDK from './open-jssdk.es';
+  import { getToken } from '@/utils/auth';
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  const {createWarningModal} = useMessage()
+
+  initWpsPath();
+
+  /**
+   * 初始化wps路径
+   */
+  async function initWpsPath() {
+    let query = router.currentRoute.value.query;
+    if (query && query.url) {
+      let result = await defHttp.get(
+        { url: '/eoa/wps/oaWpsFile/getOfflineViewWpsUrl/fileurl', params: { fileUrl: query.url } },
+        { isTransformResponse: false }
+      );
+      if (result && result.success) {
+        const instance = OpenSDK.config({
+          url: result.message,
+          mode: 'normal',
+          mount: document.querySelector('#app'),
+        });
+        // 设置 token
+        instance.setToken({
+          token: getToken(),
+        });
+      } else {
+        const msg = '请求预览地址失败' + (result.message ? `：${result.message}` : '，请重试！');
+        createWarningModal({
+          title: '提示',
+          content: msg,
+          onOk: () => window.close(),
+        });
+      }
+    } else {
+      createWarningModal({
+        title: '提示',
+        content: '获取预览地址失败，请重试！',
+        onOk: () => window.close(),
+      });
+    }
+  }
+</script>
+
+<style lang="less">
+  #office-iframe {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background: white;
+  }
+</style>
diff --git a/src/components/onlinePreview/open-jssdk.es.js b/src/components/onlinePreview/open-jssdk.es.js
new file mode 100644
index 0000000..93ef4e9
--- /dev/null
+++ b/src/components/onlinePreview/open-jssdk.es.js
@@ -0,0 +1 @@
+var e={658:function(e,t,n){function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function i(){i=function(){return e};var e={},t=Object.prototype,n=t.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},a="function"==typeof Symbol?Symbol:{},s=a.iterator||"@@iterator",c=a.asyncIterator||"@@asyncIterator",u=a.toStringTag||"@@toStringTag";function l(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{l({},"")}catch(e){l=function(e,t,n){return e[t]=n}}function d(e,t,n,r){var i=t&&t.prototype instanceof v?t:v,a=Object.create(i.prototype),s=new L(r||[]);return o(a,"_invoke",{value:_(e,n,s)}),a}function f(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=d;var p={};function v(){}function h(){}function E(){}var T={};l(T,s,(function(){return this}));var g=Object.getPrototypeOf,m=g&&g(g(D([])));m&&m!==t&&n.call(m,s)&&(T=m);var b=E.prototype=v.prototype=Object.create(T);function w(e){["next","throw","return"].forEach((function(t){l(e,t,(function(e){return this._invoke(t,e)}))}))}function y(e,t){function i(o,a,s,c){var u=f(e[o],e,a);if("throw"!==u.type){var l=u.arg,d=l.value;return d&&"object"==r(d)&&n.call(d,"__await")?t.resolve(d.__await).then((function(e){i("next",e,s,c)}),(function(e){i("throw",e,s,c)})):t.resolve(d).then((function(e){l.value=e,s(l)}),(function(e){return i("throw",e,s,c)}))}c(u.arg)}var a;o(this,"_invoke",{value:function(e,n){function r(){return new t((function(t,r){i(e,n,t,r)}))}return a=a?a.then(r,r):r()}})}function _(e,t,n){var r="suspendedStart";return function(i,o){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===i)throw o;return{value:void 0,done:!0}}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var s=I(a,n);if(s){if(s===p)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var c=f(e,t,n);if("normal"===c.type){if(r=n.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r="completed",n.method="throw",n.arg=c.arg)}}}function I(e,t){var n=t.method,r=e.iterator[n];if(void 0===r)return t.delegate=null,"throw"===n&&e.iterator.return&&(t.method="return",t.arg=void 0,I(e,t),"throw"===t.method)||"return"!==n&&(t.method="throw",t.arg=new TypeError("The iterator does not provide a '"+n+"' method")),p;var i=f(r,e.iterator,t.arg);if("throw"===i.type)return t.method="throw",t.arg=i.arg,t.delegate=null,p;var o=i.arg;return o?o.done?(t[e.resultName]=o.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=void 0),t.delegate=null,p):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,p)}function N(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function S(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function L(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(N,this),this.reset(!0)}function D(e){if(e){var t=e[s];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,i=function t(){for(;++r<e.length;)if(n.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t};return i.next=i}}return{next:A}}function A(){return{value:void 0,done:!0}}return h.prototype=E,o(b,"constructor",{value:E,configurable:!0}),o(E,"constructor",{value:h,configurable:!0}),h.displayName=l(E,u,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===h||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,E):(e.__proto__=E,l(e,u,"GeneratorFunction")),e.prototype=Object.create(b),e},e.awrap=function(e){return{__await:e}},w(y.prototype),l(y.prototype,c,(function(){return this})),e.AsyncIterator=y,e.async=function(t,n,r,i,o){void 0===o&&(o=Promise);var a=new y(d(t,n,r,i),o);return e.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},w(b),l(b,u,"Generator"),l(b,s,(function(){return this})),l(b,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},e.values=D,L.prototype={constructor:L,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(S),!e)for(var t in this)"t"===t.charAt(0)&&n.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function r(n,r){return a.type="throw",a.arg=e,t.next=n,r&&(t.method="next",t.arg=void 0),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(o.tryLoc<=this.prev){var s=n.call(o,"catchLoc"),c=n.call(o,"finallyLoc");if(s&&c){if(this.prev<o.catchLoc)return r(o.catchLoc,!0);if(this.prev<o.finallyLoc)return r(o.finallyLoc)}else if(s){if(this.prev<o.catchLoc)return r(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return r(o.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(i.tryLoc<=this.prev&&n.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=e,a.arg=t,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),p},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),S(n),p}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var i=r.arg;S(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,n){return this.delegate={iterator:D(e),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},e}function o(e,t,n,r,i,o,a){try{var s=e[o](a),c=s.value}catch(e){return void n(e)}s.done?t(c):Promise.resolve(c).then(r,i)}function a(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var a=e.apply(t,n);function s(e){o(a,r,i,s,c,"next",e)}function c(e){o(a,r,i,s,c,"throw",e)}s(void 0)}))}}function s(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,u(r.key),r)}}function c(e,t,n){return(t=u(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){var t=function(e,t){if("object"!=r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t);if("object"!=r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==r(t)?t:String(t)}n.r(t),n.d(t,{default:function(){return d}});var l=new(function(e,t,n){return t&&s(e.prototype,t),n&&s(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}((function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),c(this,"init",(function(e){var n=e.url,r=e.token,i=e.refreshToken,o=e.mount;return t.instance&&t.instance.destroy(),n&&(t.fileLink=n,t.iframe=t.initIframe(t.fileLink,o),t.initPostMessage(),r&&t.initToken(r),i&&(t.refreshTokenCallback=i)),t.instance={fileLink:n,setToken:t.setToken,destroy:t.destroy,mount:t.iframe,print:t.print},t.instance})),c(this,"destroy",(function(){t.instance&&(t.iframe.parentElement.removeChild(t.iframe),t.iframe=void 0,t.root&&document.body.removeChild(t.root),window.removeEventListener("message",t.handleMessage),t.instance=void 0)})),c(this,"initToken",(function(e){t.refreshToken(e)})),c(this,"setToken",(function(e){t.refreshToken(e)})),c(this,"refreshToken",(function(e){e.timeout&&t.refreshTokenCallback&&(clearTimeout(t.refreshTokenTimer),t.refreshTokenTimer=setTimeout((function(){t.refreshTokenCallback().then((function(n){t.refreshToken({token:n,timeout:e.timeout})}))}),Math.max(e.timeout-3e4,3e4))),t.token=e.token||e,document.cookie="x-user-token=".concat(t.token,";path=/;Domain=").concat(document.domain,";Expires=").concat(new Date(Date.now()+e.timeout||3e5)),t.postMessage("token.refresh.back",t.token)})),c(this,"initIframe",(function(e,n){var r=document.createElement("iframe");return r.style.cssText="width:100%;height:100%;border: 0;display: block;",r.setAttribute("allowfullscreen",!0),r.src=e,n?n.appendChild(r):(t.root=document.createElement("div"),t.root.classList.add("lite-preview-mount"),t.root.style.cssText="height: 100%;width: 100%;",document.body.appendChild(t.root),t.root.appendChild(r)),r})),c(this,"handleMessage",(function(e){if(t.fileLink.match(e.origin)){var n=e.data,r=n.eventName,i=n.data;switch(r){case"ready":t.postMessage("performance",JSON.stringify(window.performance.timing)),t.token?t.postMessage("token.set",t.token):t.postMessage("token.undefined");break;case"token.refresh":t.refreshTokenCallback&&t.refreshTokenCallback().then((function(e){t.postMessage("token.refresh.back",e)}));break;case"print.response":t.printResolve&&(clearTimeout(t.printTimer),delete t.printTimer,i&&t.printResolve(i),delete t.printResolve)}}})),c(this,"initPostMessage",(function(){window.addEventListener("message",t.handleMessage),t.postMessage=function(e,n){return t.iframe.contentWindow.postMessage({eventName:e,data:n},"*")}})),c(this,"print",a(i().mark((function e(){var n,r=arguments;return i().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=r.length>0&&void 0!==r[0]?r[0]:{},t.printTimer||t.printResolve){e.next=5;break}return e.abrupt("return",new Promise((function(e,r){t.postMessage("print.request",n),clearTimeout(t.printTimer),t.printTimer=setTimeout((function(){delete t.printResolve,delete t.printTimer,r("ERROR:导出接口超时")}),6e5),t.printResolve=e})));case 5:console.error("WARN:已存在未完成的导出任务，请稍后重试");case 6:case"end":return e.stop()}}),e)}))))})));window.litePreviewSDK={config:l.init};var d={config:l.init}},123:function(e,t,n){function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}n.r(t),n.d(t,{config:function(){return be}});var i=function(){return(i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function o(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))}function a(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=(i=a.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}}var s=function(){function e(){}return e.add=function(t){e.HANDLE_LIST.push(t),window.addEventListener("message",t,!1)},e.remove=function(t){var n=e.HANDLE_LIST.indexOf(t);n>=0&&e.HANDLE_LIST.splice(n,1),window.removeEventListener("message",t,!1)},e.empty=function(){for(;e.HANDLE_LIST.length;)window.removeEventListener("message",e.HANDLE_LIST.shift(),!1)},e.parse=function(e){try{if(e&&"string"==typeof e){var t=e.indexOf('"__objName":')>=0,n=JSON.parse(e);return t&&(n.hasInnerObj=!0),n}return e}catch(e){console.log("Message.parse Error:",e)}},e.HANDLE_LIST=[],e}();function c(e){if(!e)return!1;for(var t=e;null!==Object.getPrototypeOf(t);)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)===t}function u(e){return"[object Function]"==={}.toString.call(e)}var l,d,f,p,v,h={origin:""};function E(e,t){h[e]=t}function T(e){return h[e]}function g(e){var t=T("whiteList")||[],n=T("origin");return!!function(e,t,n){return!n.includes(t)&&e!==t&&(e.replace(/www\./i,"").toLowerCase()!==t.replace(/www\./i,"").toLowerCase()||(e.match("www.")?void 0:(E("origin",t),!1)))}(n,e.origin,t)&&(console.warn("postMessage 域名检查不通过",{safeOrigin:n,eventOrigin:e.origin}),!0)}(v=l||(l={})).unknown="unknown",v.spreadsheet="s",v.writer="w",v.presentation="p",v.pdf="f",function(e){e.wps="w",e.et="s",e.presentation="p",e.pdf="f"}(d||(d={})),function(e){e.nomal="nomal",e.simple="simple"}(f||(f={})),function(e){e[e.requestFullscreen=1]="requestFullscreen",e[e.exitFullscreen=0]="exitFullscreen"}(p||(p={}));var m,b,w,y=(m=0,function(){return m+=1}),_=function(e,t,n){void 0===n&&(n=!0);var r=t;if(!b){var i=function e(t){var n=t.clientHeight,r=t.clientWidth;0!==n||0!==r||w?0===n&&0===r||!w||(w.disconnect(),w=null):window.ResizeObserver&&(w=new ResizeObserver((function(n){e(t)}))).observe(t),b.style.cssText+="height: "+n+"px; width: "+r+"px"}.bind(null,r);(b=document.createElement("iframe")).classList.add("web-office-iframe");var o={id:"office-iframe",src:e,scrolling:"no",frameborder:"0",allowfullscreen:"allowfullscreen",webkitallowfullscreen:"true",mozallowfullscreen:"true",allow:"clipboard-read; clipboard-write"};for(var a in r?(o.style="width: "+r.clientWidth+"px; height: "+r.clientHeight+"px;",n&&window.addEventListener("resize",i)):((r=document.createElement("div")).classList.add("web-office-default-container"),function(e){var t=document.createElement("style");document.head.appendChild(t);var n=t.sheet;n.insertRule(".web-office-default-container {position: absolute; padding: 0;  margin: 0; width: 100%; height: 100%; left: 0; top: 0;}",n.cssRules.length)}(),document.body.appendChild(r),o.style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"),H&&window.visualViewport&&window.visualViewport.addEventListener("resize",I),o)b.setAttribute(a,o[a]);r.appendChild(b),b.destroy=function(){b.parentNode.removeChild(b),b=null,window.removeEventListener("resize",i),w&&(w.disconnect(),w=null)}}return b};function I(){var e=window.visualViewport,t=e.width,n=e.height,r=document.body.clientHeight-b.clientHeight;N({eventName:"visualViewportResize",data:{width:t,height:n-r}})}var N=function(e){_().contentWindow&&_().contentWindow.postMessage(JSON.stringify(e),T("realOrigin"))};function S(e,t,n){return new Promise((function(r){var i=y();s.add((function e(t){if(!g(t)){var o=s.parse(t.data);o.eventName===n&&o.msgId===i&&(r(o.data),s.remove(e))}})),N({data:e,msgId:i,eventName:t})}))}var L=function(e){return S(e,"wps.jssdk.api","wps.api.reply")},D=function(e){return S(e,"api.basic","api.basic.reply")},A={idMap:{}},O={};function k(e,t){return o(this,void 0,void 0,(function(){var n,r,i,o;return a(this,(function(a){switch(a.label){case 0:return"api.callback"===e.eventName&&e.callbackId&&O[e.callbackId]?(n=e.data.args,e.hasInnerObj?[4,W(n,t)]:[3,2]):[3,5];case 1:return i=a.sent(),[3,3];case 2:i=n,a.label=3;case 3:return r=i,[4,O[e.callbackId].apply(O,r)];case 4:o=a.sent(),N({result:o,eventName:"api.callback.reply",callbackId:e.callbackId}),a.label=5;case 5:return[2]}}))}))}function W(e,t){return o(this,void 0,void 0,(function(){var n,i,o,s,u,l,d,f,p,v;return a(this,(function(a){switch(a.label){case 0:if(!Array.isArray(e))return[3,5];s=[],n=0,a.label=1;case 1:return n<e.length?(o=(i=s).push,[4,W(e[n],t)]):[3,4];case 2:o.apply(i,[a.sent()]),a.label=3;case 3:return n+=1,[3,1];case 4:return[2,s];case 5:if(function(e){return"object"==r(e)&&e.__objId&&e.__objName}(e))return[2,t(e.__objId,e.__objName)||e];if(!c(e))return[3,10];for(l in s={},u=[],e)u.push(l);d=0,a.label=6;case 6:return d<u.length?(f=u[d],e.hasOwnProperty(f)?(p=s,v=f,[4,W(e[f],t)]):[3,8]):[3,9];case 7:p[v]=a.sent(),a.label=8;case 8:return d++,[3,6];case 9:return[2,s];case 10:return[2,e]}}))}))}function G(e){return o(this,void 0,void 0,(function(){var t,n,r,i,o,c,u,l,d,f;return a(this,(function(a){switch(a.label){case 0:return g(e)?[2]:(t=s.parse(e.data),n=t.eventName,r=t.callbackId,i=t.data,r&&(o=A.idMap[r])?(c=o.split(":"),u=c[0],l=c[1],"api.callback"===n&&A[u]&&A[u][l]?[4,(f=A[u][l]).callback.apply(f,i.args)]:[3,2]):[3,2]);case 1:d=a.sent(),N({result:d,callbackId:r,eventName:"api.callback.reply"}),a.label=2;case 2:return[2]}}))}))}var P=function(e){return o(void 0,void 0,void 0,(function(){function t(){return Object.keys(A.idMap).find((function(e){return A.idMap[e]===r+":"+n}))}var n,r,i,o,c,u,l,d,f;return a(this,(function(a){switch(a.label){case 0:return n=e.prop,r=e.parentObjId,[4,x([i=e.value])];case 1:return o=a.sent(),c=o[0],u=o[1],e.value=c[0],l=Object.keys(u)[0],d=A[r],null===i&&d&&d[n]&&((f=t())&&delete A.idMap[f],delete d[n],Object.keys(d).length||delete A[r],Object.keys(A.idMap).length||s.remove(G)),l&&(Object.keys(A.idMap).length||s.add(G),A[r]||(A[r]={}),A[r][n]={callbackId:l,callback:u[l]},(f=t())&&delete A.idMap[f],A.idMap[l]=r+":"+n),[2]}}))}))},M=function(e,t,n,r){return o(void 0,void 0,void 0,(function(){var c,u,l,d,f,p,v,h;return a(this,(function(E){switch(E.label){case 0:return c=y(),d=new Promise((function(e,t){u=e,l=t})),f={},t.args?[4,x(t.args)]:[3,2];case 1:p=E.sent(),v=p[0],h=p[1],t.args=v,f=h,E.label=2;case 2:return"api.setter"!==e?[3,4]:[4,P(t)];case 3:E.sent(),E.label=4;case 4:return"api.caller"===e&&Object.assign(O,f),function(e){var t=e[0],n=e[1];"function"==typeof(t=i({},t)).data&&(t.data=t.data()),n(),N(t)}([{eventName:e,data:t,msgId:c},function(){var t=this;return s.add((function i(d){return o(t,void 0,void 0,(function(){var t,o,p;return a(this,(function(a){switch(a.label){case 0:return g(d)?[2]:"api.callback"===(t=s.parse(d.data)).eventName&&t.callbackId&&f[t.callbackId]?[4,f[t.callbackId].apply(f,t.data.args)]:[3,2];case 1:o=a.sent(),N({result:o,eventName:"api.callback.reply",callbackId:t.callbackId}),a.label=2;case 2:return t.eventName===e+".reply"&&t.msgId===c&&(t.error?((p=new Error("")).stack=t.error+"\n"+n,r&&r(),l(p)):u(t),s.remove(i)),[2]}}))}))})),d}]),[2,d]}}))}))};function x(e){return o(this,void 0,void 0,(function(){var t,n,r,i,o,s,u,l,d,f,p;return a(this,(function(a){switch(a.label){case 0:t={},n=[],r=e.slice(0),a.label=1;case 1:return r.length?(i=void 0,[4,r.shift()]):[3,13];case 2:return(o=a.sent())&&o.done?[4,o.done()]:[3,4];case 3:a.sent(),a.label=4;case 4:if(!c(i))return[3,11];for(u in i={},s=[],o)s.push(u);l=0,a.label=5;case 5:return l<s.length?(d=s[l],f=o[d],/^[A-Z]/.test(d)?f&&f.done?[4,f.done()]:[3,7]:[3,8]):[3,10];case 6:a.sent(),a.label=7;case 7:f&&f.objId?f={objId:f.objId}:"function"==typeof f&&(p=y(),t[p]=f,f={callbackId:p}),a.label=8;case 8:i[d]=f,a.label=9;case 9:return l++,[3,5];case 10:return[3,12];case 11:o&&o.objId?i={objId:o.objId}:"function"==typeof o&&void 0===o.objId?(p=y(),t[p]=o,i={callbackId:p}):i=o,a.label=12;case 12:return n.push(i),[3,1];case 13:return[2,[n,t]]}}))}))}var C=function(e,t){void 0===t&&(t=!0);var n=i({},e),o=n.headers,a=void 0===o?{}:o,s=n.subscriptions,c=void 0===s?{}:s,u=n.mode,l=void 0===u?f.nomal:u,d=n.commonOptions,p=a.backBtn,v=void 0===p?{}:p,h=a.shareBtn,E=void 0===h?{}:h,T=a.otherMenuBtn,g=void 0===T?{}:T,m=function(e,n){e.subscribe&&"function"==typeof e.subscribe&&(e.callback=n,c[n]=e.subscribe,t&&delete e.subscribe)};if(m(v,"wpsconfig_back_btn"),m(E,"wpsconfig_share_btn"),m(g,"wpsconfig_other_menu_btn"),g.items&&Array.isArray(g.items)){var b=[];g.items.forEach((function(e,t){switch(void 0===e&&(e={}),e.type){case"export_img":e.type=1,e.callback="export_img";break;case"export_pdf":e.type=1,e.callback="export_pdf";break;case"save_version":e.type=1,e.callback="save_version";break;case"about_wps":e.type=1,e.callback="about_wps";break;case"split_line":e.type=2;break;case"custom":e.type=3,m(e,"wpsconfig_other_menu_btn_"+t),b.push(e)}})),b.length&&(B||Y)&&(g.items=b)}n.url=n.url||n.wpsUrl;var w=[];if((l===f.simple||d&&!1===d.isShowTopArea)&&w.push("simple","hidecmb"),n.debug&&w.push("debugger"),n.url&&w.length&&(n.url=n.url+(n.url.indexOf("?")>=0?"&":"?")+w.join("&")),d&&(d.isParentFullscreen||d.isBrowserViewFullscreen)&&(document.addEventListener("fullscreenchange",F),document.addEventListener("webkitfullscreenchange",F),document.addEventListener("mozfullscreenchange",F)),n.wordOptions&&(n.wpsOptions=n.wordOptions),n.excelOptions&&(n.etOptions=n.excelOptions),n.pptOptions&&(n.wppOptions=n.pptOptions),"object"==r(c.print)){var y="wpsconfig_print";"function"==typeof c.print.subscribe&&(c[y]=c.print.subscribe,n.print={callback:y},void 0!==c.print.custom&&(n.print.custom=c.print.custom)),delete c.print}return"function"==typeof c.exportPdf&&(c[y="wpsconfig_export_pdf"]=c.exportPdf,n.exportPdf={callback:y},delete c.exportPdf),n.commandBars&&j(n.commandBars,!1),i(i({},n),{subscriptions:c})},U=function(e){void 0===e&&(e="");var t="";if(!t&&e){var n=e.toLowerCase();-1!==n.indexOf("/office/s/")&&(t=l.spreadsheet),-1!==n.indexOf("/office/w/")&&(t=l.writer),-1!==n.indexOf("/office/p/")&&(t=l.presentation),-1!==n.indexOf("/office/f/")&&(t=l.pdf)}if(!t){var r=e.match(/[\?&]type=([a-z]+)/)||[];t=d[r[1]]||""}return t};function j(e,t){void 0===t&&(t=!0);var n=e.map((function(e){var t=e.attributes;if(!Array.isArray(t)){var n=[];for(var r in t)if(t.hasOwnProperty(r)){var i={name:r,value:t[r]};n.push(i)}e.attributes=n}return e}));return t&&N({data:n,eventName:"setCommandBars"}),n}var R=window.navigator.userAgent.toLowerCase(),B=/Android|webOS|iPhone|iPod|BlackBerry|iPad/i.test(R),H=/iPhone|iPod|iPad/i.test(R),Y=function(){try{return-1!==window._parent.location.search.indexOf("from=wxminiprogram")}catch(e){return!1}}();function F(){var e={status:p.requestFullscreen},t=document,n=t.fullscreenElement||t.webkitFullscreenElement||t.mozFullScreenElement;e.status=n?p.requestFullscreen:p.exitFullscreen,N({data:e,eventName:"fullscreenchange"})}var X=function(){A.idMap={}};function V(){console.group("JSSDK 事件机制调整说明"),console.warn("jssdk.on、jssdk.off 和 jssdk.Application.Sub 将在后续版本中被弃用，建议使用改进后的 ApiEvent"),console.warn("具体请参考：https://wwo.wps.cn/docs/front-end/basic-usage/events/intro/"),console.groupEnd()}var z=0,J=new Set;function K(e){return z+=1,!e&&function(e){J.forEach((function(t){return t(e)}))}(z),z}function q(){var e=new Error("");return(e.stack||e.message||"").split("\n").slice(2).join("\n")}var $={};function Z(e,t){for(var n=$.otherProps,r=$.names,i=Object.keys(r),o=-1,a=0;a<i.length;a+=1){var s=i[a];if(r[s].name===t){o=parseInt(s,10);break}}if(o>=0){var c={objId:e},u=n[o];return u&&ne(c,u,n),c}}function Q(e,t){var n=this,r=t.Events,i=t.Enum,c=t.Props,u=c[0],d=c[1],f=c[2];Object.assign($,{appProps:u,otherProps:d,names:f});var p,v={objId:z};switch(ne(v,u,d),v.Events=r,v.Enum=i,e.Enum=v.Enum,e.Events=v.Events,e.Props=c,U(e.url)){case l.writer:e.WordApplication=e.WpsApplication=function(){return v};break;case l.spreadsheet:e.ExcelApplication=e.EtApplication=function(){return v};break;case l.presentation:e.PPTApplication=e.WppApplication=function(){return v};break;case l.pdf:e.PDFApplication=function(){return v}}e.Application=v,e.Free=function(e){return M("api.free",{objId:e},"")},e.Stack=v.Stack=(p=function(t){e&&e.Free(t)},function(){var e=[],t=function(t){e.push(t)};return J.add(t),{End:function(){p(e),J.delete(t)}}});var h={};s.add((function(e){return o(n,void 0,void 0,(function(){var t,n,r,i,o;return a(this,(function(a){switch(a.label){case 0:return g(e)?[2]:"api.event"===(t=s.parse(e.data)).eventName&&t.data?(n=t.data,r=n.eventName,i=n.data,(o=h[r])?[4,o(i)]:[3,2]):[3,2];case 1:a.sent(),a.label=2;case 2:return[4,k(t,(function(e,t){return Z(e,t)}))];case 3:return a.sent(),[2]}}))}))})),v.Sub={};var E=function(e){var t=r[e];Object.defineProperty(v.Sub,t,{set:function(e){V(),h[t]=e,N({eventName:"api.event.register",data:{eventName:t,register:!!e,objId:z+=1}})}})};for(var T in r)E(T)}var ee=window.FinalizationRegistry&&new FinalizationRegistry((function(e){M("api.free",{objId:e},"")})),te=["ExportAsFixedFormat","GetOperatorsInfo","ImportDataIntoFields","ReplaceText","ReplaceBookmark","GetBookmarkText","GetComments"];function ne(e,t,n){var r=t.slice(0),o=e.objId;r.includes("Destroy")||(e.Destroy=function(){return M("api.free",{objId:o},"")}),ee&&ee.register(e,o);for(var a=function(){var t=r.shift();!t.alias&&~te.indexOf(t.prop)&&r.push(i(i({},t),{alias:t.prop+"Async"}));var o=t.alias||t.prop;Object.defineProperty(e,o,{get:function(){var r=this,i=1===t.cache,o=i&&this["__"+t.prop+"CacheValue"];if(!o){var a=q(),s=K(i),c=function r(){for(var i,o=[],s=0;s<arguments.length;s++)o[s]=arguments[s];return void 0!==t.caller?ne(i={objId:K()},n[t.caller],n):i={},re(r,i,"api.caller",{obj:r,args:o,parentObjId:e.objId,objId:i.objId,prop:t.prop},a),i};return c.objId=-1,void 0!==t.getter&&n[t.getter].length&&(c.objId=s,ne(c,n[t.getter],n)),re(e,c,"api.getter",{parentObjId:e.objId,objId:c.objId,prop:t.prop},a,(function(){delete r["__"+t.prop+"CacheValue"]})),i&&(this["__"+t.prop+"CacheValue"]=c),c}return o},set:function(n){var r=q();return re(e,{},"api.setter",{value:n,parentObjId:e.objId,objId:-1,prop:t.prop},r)}})};r.length;)a()}function re(e,t,n,r,i,s){var c,u=(e.done?e.done():Promise.resolve()).then((function(){return c||(c=M(n,r,i,s)),c}));t.done=function(){return u},t.then=function(e,n){return o(this,void 0,void 0,(function(){var i,o,s;return a(this,(function(a){switch(a.label){case 0:return a.trys.push([0,5,,6]),[4,u];case 1:return(i=a.sent()).hasInnerObj?(o=e,[4,W(i.result,Z)]):[3,3];case 2:return o.apply(void 0,[a.sent()]),[3,4];case 3:r.objId>=0?(t.done=null,t.then=null,e(t)):e(i.result),a.label=4;case 4:return[3,6];case 5:return s=a.sent(),n(s),[3,6];case 6:return[2]}}))}))},t.catch=function(e){return u.catch(e)}}var ie={},oe=null,ae="fileOpen",se="fileSaved",ce="fileStatus",ue="fullscreenChange",le="error",de="stage",fe="api.getToken",pe="event.toast",ve="event.hyperLinkOpen",he="api.getClipboardData";function Ee(e,t,n,r,c,u,l){var d=this;void 0===n&&(n={}),s.add((function(f){return o(d,void 0,void 0,(function(){var o,d,p,v,h,E,T,m,b,w,y,_,I,S,L,D,A,O,k;return a(this,(function(a){switch(a.label){case 0:return g(f)?[2]:(o=s.parse(f.data),d=o.eventName,p=void 0===d?"":d,v=o.data,h=void 0===v?null:v,E=o.url,T=void 0===E?null:E,-1!==["wps.jssdk.api"].indexOf(p)?[2]:"ready"!==p?[3,1]:(c.apiReadySended&&function(e){var t=[];Object.keys(ie).forEach((function(n){ie[n].forEach((function(r){var i=n;e.off(i,r),t.push({handle:r,eventName:i})})),delete ie[n]})),t.forEach((function(e){var t=e.eventName,n=e.handle;null==oe||oe.ApiEvent.AddApiEventListener(t,n)}))}(t),N({eventName:"setConfig",data:i(i({},n),{version:e.version})}),e.tokenData&&e.setToken(i(i({},e.tokenData),{hasRefreshTokenConfig:!!n.refreshToken})),e.iframeReady=!0,[3,15]));case 1:return"error"!==p?[3,2]:(t.emit(le,h),[3,15]);case 2:return"open.result"!==p?[3,3]:(void 0!==(null===(A=null==h?void 0:h.fileInfo)||void 0===A?void 0:A.officeVersion)&&(e.mainVersion=h.fileInfo.officeVersion,console.log("WebOfficeSDK Main Version: V"+e.mainVersion)),t.emit(ae,h),[3,15]);case 3:return"api.scroll"!==p?[3,4]:(window.scrollTo(h.x,h.y),[3,15]);case 4:if(p!==fe)return[3,9];m={token:!1},a.label=5;case 5:return a.trys.push([5,7,,8]),[4,c.refreshToken()];case 6:return m=a.sent(),[3,8];case 7:return b=a.sent(),console.error("refreshToken: "+(b||"fail to get")),[3,8];case 8:return N({eventName:fe+".reply",data:m}),[3,15];case 9:if(p!==he)return[3,14];w={text:"",html:""},a.label=10;case 10:return a.trys.push([10,12,,13]),[4,c.getClipboardData()];case 11:return w=a.sent(),[3,13];case 12:return y=a.sent(),console.error("getClipboardData: "+(y||"fail to get")),[3,13];case 13:return N({eventName:he+".reply",data:w}),[3,15];case 14:p===pe?c.onToast(h):p===ve?c.onHyperLinkOpen(h):"stage"===p?t.emit(de,h):"event.callback"===p?(_=h.eventName,I=h.data,S=_,_===ue&&(S="fullscreenchange"),"file.saved"===_&&(S=ce),((null===(O=n.commonOptions)||void 0===O?void 0:O.isBrowserViewFullscreen)||(null===(k=n.commonOptions)||void 0===k?void 0:k.isParentFullscreen))&&"fullscreenchange"===S&&(L=I.status,D=I.isDispatchEvent,n.commonOptions.isBrowserViewFullscreen?function(e,t,n,r){0===e?t.style="position: static; width: "+n.width+"; height: "+n.height:1===e&&(t.style="position: absolute; width: 100%; height: 100%"),r&&function(e){["fullscreen","fullscreenElement"].forEach((function(t){Object.defineProperty(document,t,{get:function(){return!!e.status},configurable:!0})}));var t=new CustomEvent("fullscreenchange");document.dispatchEvent(t)}({status:e})}(L,u,l,D):n.commonOptions.isParentFullscreen&&function(e,t,n){var r=document.querySelector(n),i=r&&1===r.nodeType?r:t;if(0===e){var o=document;(o.exitFullscreen||o.mozCancelFullScreen||o.msExitFullscreen||o.webkitCancelFullScreen||o.webkitExitFullscreen).call(document)}else if(1===e){(i.requestFullscreen||i.mozRequestFullScreen||i.msRequestFullscreen||i.webkitRequestFullscreen).call(i)}}(L,u,n.commonOptions.isParentFullscreen)),t.emit(S,I)):"api.ready"===p&&Q(e,h),a.label=15;case 15:return"function"==typeof r[p]&&r[p](e,T||h),[2]}}))}))}))}function Te(e){return new Promise((function(t){s.add((function n(r){E("realOrigin",r.origin),g(r)||s.parse(r.data).eventName===e&&(t(null),s.remove(n))}))}))}function ge(e){var t,n=this;void 0===e&&(e={}),oe&&oe.destroy();try{var r=C(e),i=r.subscriptions,c=void 0===i?{}:i,l=r.mount,d=void 0===l?null:l,f=r.url,p=r.refreshToken,v=r.onToast,h=r.onHyperLinkOpen,T=r.getClipboardData;E("whiteList",r.originWhiteList),E("origin",(f.match(/https*:\/\/[^\/]+/g)||[])[0]);var g=_(f,d),m=Te("open.result"),b=Te("api.ready"),w=d?{width:d.clientWidth+"px",height:d.clientHeight+"px"}:{width:"100vw",height:"100vh"};delete r.mount,f&&delete r.url,delete r.subscriptions;var y=(t=t||Object.create(null),{on:function(e,n){(t[e]||(t[e]=[])).push(n)},off:function(e,n){t[e]&&t[e].splice(t[e].indexOf(n)>>>0,1)},emit:function(e,n){(t[e]||[]).slice().map((function(e){e(n)})),(t["*"]||[]).slice().map((function(t){t(e,n)}))}}),I={apiReadySended:!1,apiReadySendedOnce:!1},S=function(e,t,r){return o(n,void 0,void 0,(function(){return a(this,(function(n){switch(n.label){case 0:return function(e,t,n){if(ie[e]){var r=!!ie[e].find((function(e){return e===t}));return r&&"off"===n?(y.off(e,t),ie[e]=ie[e].filter((function(e){return e!==t})),!!ie[e].length||(ie[e]=void 0,!1)):(r||"on"!==n||(ie[e].push(t),y.on(e,t)),!0)}return"on"===n?(ie[e]=[],ie[e].push(t),!1):"off"===n||void 0}(e,t,r)?[3,2]:[4,A];case 1:n.sent(),function(e,t){var n=e.eventName,r=e.type,i=e.handle;"on"===t?y.on(n,i):y.off(n,i),"base.event"===r&&N({eventName:"basic.event",data:{eventName:n,action:t}}),V()}(function(e,t){var n=e,r="base.event";switch(n){case se:console.warn("fileSaved事件监听即将弃用， 推荐使用fileStatus进行文件状态的监听"),n="fileStatus";break;case ue:n="fullscreenchange";break;case"error":case"fileOpen":r="callback.event"}return{eventName:n,type:r,handle:t}}(e,t),r),n.label=2;case 2:return[2]}}))}))};oe={url:f,iframe:g,version:"1.1.20",iframeReady:!1,tokenData:null,commandBars:null,tabs:{getTabs:function(){return o(this,void 0,void 0,(function(){return a(this,(function(e){switch(e.label){case 0:return[4,A];case 1:return e.sent(),[2,D({api:"tab.getTabs"})]}}))}))},switchTab:function(e){return o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),[2,D({api:"tab.switchTab",args:{tabKey:e}})]}}))}))}},setCooperUserColor:function(e){return o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),[2,D({api:"setCooperUserColor",args:e})]}}))}))},setToken:function(e){return o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),oe.tokenData=e,N({eventName:"setToken",data:e}),[2]}}))}))},ready:function(){return o(this,void 0,void 0,(function(){return a(this,(function(e){switch(e.label){case 0:return I.apiReadySendedOnce?[3,2]:(I.apiReadySendedOnce=!0,[4,m]);case 1:e.sent(),I.apiReadySended=!0,N({eventName:"api.ready"}),e.label=2;case 2:return[4,b];case 3:return e.sent(),[2,new Promise((function(e){return setTimeout((function(){return e(null==oe?void 0:oe.Application)}),0)}))]}}))}))},destroy:function(){ie={},g.destroy(),s.empty(),oe=null,J=new Set,z=0,document.removeEventListener("fullscreenchange",F),X()},save:function(){return o(this,void 0,void 0,(function(){return a(this,(function(e){switch(e.label){case 0:return[4,A];case 1:return e.sent(),[2,L({api:"save"})]}}))}))},setCommandBars:function(e){return o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),j(e),[2]}}))}))},updateConfig:function(e){return void 0===e&&(e={}),o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),e.commandBars?(console.warn("Deprecated: `updateConfig()` 方法即将废弃，请使用`setCommandBars()`代替`updateConfig()`更新`commandBars`配置。"),[4,j(e.commandBars)]):[3,3];case 2:t.sent(),t.label=3;case 3:return[2]}}))}))},executeCommandBar:function(e){return o(this,void 0,void 0,(function(){return a(this,(function(t){switch(t.label){case 0:return[4,A];case 1:return t.sent(),j([{cmbId:e,attributes:[{name:"click",value:!0}]}]),[2]}}))}))},on:function(e,t){return o(this,void 0,void 0,(function(){return a(this,(function(n){return[2,this.ApiEvent.AddApiEventListener(e,t)]}))}))},off:function(e,t){return o(this,void 0,void 0,(function(){return a(this,(function(n){return[2,this.ApiEvent.RemoveApiEventListener(e,t)]}))}))},ApiEvent:{AddApiEventListener:function(e,t){return o(this,void 0,void 0,(function(){return a(this,(function(n){switch(n.label){case 0:return[4,S(e,t,"on")];case 1:return[2,n.sent()]}}))}))},RemoveApiEventListener:function(e,t){return o(this,void 0,void 0,(function(){return a(this,(function(n){switch(n.label){case 0:return[4,S(e,t,"off")];case 1:return[2,n.sent()]}}))}))}}},function(e,t,n,r,i,o){t&&u(t)&&(i.refreshToken=t,e.refreshToken={eventName:fe}),o&&u(o)&&(i.getClipboardData=o,e.getClipboardData={eventName:he}),n&&u(n)&&(i.onToast=n,e.onToast={eventName:pe}),r&&u(r)&&(i.onHyperLinkOpen=r,e.onHyperLinkOpen={eventName:ve})}(r,p,v,h,I,T),Ee(oe,y,r,c,I,g,w);var A=Te("ready");return oe}catch(e){console.error(e)}}console.log("WebOfficeSDK JS-SDK V1.1.20");var me=Object.freeze({__proto__:null,listener:Ee,config:ge});window.WPS=me;var be=ge;t.default={config:ge}},606:function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0});var r=n(328),i=function(){function e(){this.events={},this.eventsArr=Object.values(r.AddApiListenerType),this.events={},this.handler=this.handler.bind(this),window.addEventListener("message",this.handler)}return e.prototype.handler=function(e){this.eventsArr.includes(e.data.eventName)&&this.trigger({eventName:e.data.eventName,params:e.data.data})},e.prototype.add=function(e,t){this.events[e]||(this.events[e]=[]),console.log("添加【".concat(e,"】事件成功")),this.events[e].push(t)},e.prototype.remove=function(e,t){this.events[e]&&(this.events[e]=this.events[e].filter((function(e){return e!==t})),console.log("移除【".concat(e,"】事件成功")))},e.prototype.trigger=function(e){var t=e.eventName,n=e.params;this.events[t]&&this.events[t].forEach((function(e){console.log("触发【".concat(t,"】事件，参数为："),n),e(n)}))},e}();t.default=i},620:function(e,t,n){var r=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))},i=this&&this.__generator||function(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}};Object.defineProperty(t,"__esModule",{value:!0}),t.CTX=void 0;var o,a,s,c=n(123),u=n(658),l=n(737),d=n(210),f=n(853),p=n(328),v=n(606),h=function(){function e(e){var t=this;if(this.executeCommandBar=function(e){return r(t,void 0,void 0,(function(){return i(this,(function(t){switch(t.label){case 0:return"TabPrintPreview"!==e?[3,2]:[4,this.printExecute()];case 1:t.sent(),t.label=2;case 2:return[2]}}))}))},this.litePreviewPrint={CommandBars:function(e){if("TabPrintPreview"===e)return{Execute:function(){return r(t,void 0,void 0,(function(){return i(this,(function(e){switch(e.label){case 0:return[4,this.printExecute()];case 1:return[2,e.sent()]}}))}))}}}},console.log("OPEN_JSSDK_VERSION ".concat("0.1.3")),console.log((0,l.isLitePreviewUrl)(null==e?void 0:e.url)?"极速预览":"wo预览"),(0,l.isLitePreviewUrl)(null==e?void 0:e.url))o=u.default;else try{o=WebOfficeSDK,console.log("使用外部的sdk")}catch(e){o=c.default,console.log("使用内部的sdk")}e?(e.mount&&e.mount instanceof Node||(e.mount=document.getElementsByTagName("body")[0]),this.config=e,this.addPreviewContainer()):console.error("初始化sdk失败，缺失config参数")}return e.prototype.getInstance=function(){var e=this,t=this.instance;return(0,l.isLitePreviewUrl)(this.config.url)&&(t.Application=this.litePreviewPrint,t.executeCommandBar=this.executeCommandBar,t.ready=function(){return r(e,void 0,void 0,(function(){return i(this,(function(e){return[2]}))}))}),(0,l.isWebofficeUrl)(this.config.url)&&(this.config.hasWidgetPermission=!0,t.WidgetInstance=new d.Widget(this.instance,s),Object.defineProperty(t,"Widget",{get:function(){return this.WidgetInstance||console.error("用户没有使用连接器的权限"),this.WidgetInstance}})),t},e.prototype.addPreviewContainer=function(){var e,t=document.createElement("div");t.style.position="relative",t.style.width="100%",t.style.height="100%",null===(e=this.config.mount)||void 0===e||e.appendChild(t),this.config.mount=t,a=(0,l.parseUrl)(this.config.url),this.config.webpath=(0,l.parseWebpath)(a.pathname),this.config.url&&(0,l.isWebofficeUrl)(this.config.url)?this.renderWebOffice():this.renderOpendoc()},e.prototype.renderWebOffice=function(){return r(this,void 0,void 0,(function(){var e,t,n=this;return i(this,(function(r){return this.setDbCookie=this.setDbCookie.bind(this),e=this.config.url,this.config.refreshToken&&this.overWriteRefreshToken(e),t=new o.config(this.config),this.instance=Object.create(t),this.instance.setToken=function(r){t.setToken(r),n.setDbCookie(e,r)},[2]}))}))},e.prototype.overWriteRefreshToken=function(e){var t=this.config.refreshToken,n=this;this.config.refreshToken=function(){var r=t();return(0,f.isPromiseLike)(r)?r.then((function(t){n.setDbCookie(e,t)})):n.setDbCookie(e,r),r}},e.prototype.setDbCookie=function(e,t){var n=(0,f.getWappId)(e);n&&(0,f.setCookie)({name:"".concat(n,"_wps_sid"),value:t.token,expires:t.timeout})},e.prototype.isExpired=function(e){return Date.now()>1e3*e},e.prototype.renderOpendoc=function(){var e,t=document.createElement("iframe");t.allow="clipboard-read;clipboard-write",t.allowFullscreen=!0,t.src=this.config.url,t.allowFullscreen=!0,t.frameBorder="none",t.style.width="100%",t.style.height="100%",t.id="third-iframe",null===(e=this.config.mount)||void 0===e||e.appendChild(t),s=t,this.events=new v.default,this.instance={setToken:this.setToken.bind(this),print:this.openDocPrint.bind(this),download:this.openDocDownload.bind(this),ApiEvent:{AddApiEventListener:this.addApiEventListener.bind(this),RemoveApiEventListener:this.removeApiEventListener.bind(this)},ready:this.ready.bind(this),tabs:{getTabs:this.getTabs.bind(this),switchTab:this.switchTab.bind(this)},save:this.save.bind(this),destroy:this.destroy.bind(this),iframe:t}},e.prototype.setToken=function(e){console.log("this.config",this.config),this.config.setToken=e,(0,f.setToken)(this.config,s)},e.prototype.openDocPrint=function(){if(s.src.split("/").includes("micsweb"))(0,p.openDocFunc)(p.EVENT_TYPE.PRINT,s);else{this.invoke(p.EVENT_TYPE.PRINT);var e=function(t){var n,r,i;t.data.eventName===p.EVENT_TYPE.PRINT&&(console.log(null===(i=null===(r=null===(n=t.data)||void 0===n?void 0:n.data)||void 0===r?void 0:r.result)||void 0===i?void 0:i.message),window.removeEventListener("message",e))};window.addEventListener("message",e)}},e.prototype.openDocDownload=function(e){e&&e.type?(console.log("openDocDownload: ".concat(p.EVENT_TYPE.DOWNLOAD,"-type:").concat(e.type)),this.invoke(p.EVENT_TYPE.DOWNLOAD,e.type)):(0,p.openDocFunc)(p.EVENT_TYPE.DOWNLOAD,s)},e.prototype.ready=function(){return r(this,void 0,void 0,(function(){return i(this,(function(e){return[2,new Promise((function(e,t){s.onload=function(){e(!0)}}))]}))}))},e.prototype.save=function(){return r(this,void 0,void 0,(function(){return i(this,(function(e){return this.invoke(p.EVENT_TYPE.SAVE),[2,new Promise((function(e,t){var n=function(t){t.data.eventName===p.EVENT_TYPE.SAVE&&(e(t.data.data),window.removeEventListener("message",n))};window.addEventListener("message",n)}))]}))}))},e.prototype.getTabs=function(){return console.log("触发getTabs方法"),this.invoke(p.EVENT_TYPE.GET_TABS),new Promise((function(e,t){var n=function(t){t.data.eventName===p.EVENT_TYPE.GET_TABS&&(e(t.data.data),window.removeEventListener("message",n))};window.addEventListener("message",n)}))},e.prototype.switchTab=function(e){return r(this,void 0,void 0,(function(){var t;return i(this,(function(n){return t=e.tabKey,[2,new Promise((function(e,n){(0,p.openDocFunc)("action-".concat(p.EVENT_TYPE.SWITCH_TAB),s,{tabKey:t}),e("已切换到".concat(t))}))]}))}))},e.prototype.addApiEventListener=function(e,t){this.events.add(e,t)},e.prototype.removeApiEventListener=function(e,t){this.events.remove(e,t)},e.prototype.destroy=function(){var e=document.getElementById("third-iframe");e.parentNode.removeChild(e),this.instance=null},e.prototype.invoke=function(e,t){(0,p.openDocFunc)("action-".concat(e),s,t)},e.prototype.printExecute=function(){return r(this,void 0,void 0,(function(){var e,t;return i(this,(function(n){switch(n.label){case 0:return[4,this.instance.print()];case 1:return e=n.sent(),(t=document.createElement("iframe")).setAttribute("style","display:none"),fetch(e).then((function(e){return e.blob()})).then((function(e){var n=URL.createObjectURL(e);t.src=n,document.body.appendChild(t),t.onload=function(){t.contentWindow.print()}})),[2]}}))}))},e}();t.CTX=h},328:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.openDocFunc=t.AddApiListenerType=t.EVENT_TYPE=void 0,function(e){e.PRINT="print",e.DOWNLOAD="download",e.GET_TABS="getTabs",e.SWITCH_TAB="switchTab",e.SAVE="save"}(t.EVENT_TYPE||(t.EVENT_TYPE={})),function(e){e.FILE_OPEN="fileOpen",e.FILE_STATUS="fileStatus",e.ON_USER_LIST_INIT="OnUserListInit",e.ON_USER_JOIN="OnUserJoin",e.ON_USER_QUIT="OnUserQuit"}(t.AddApiListenerType||(t.AddApiListenerType={}));var n=null;t.openDocFunc=function(e,t,r){n=t,function(e){console.log("发送事件：",e);var t=n.contentWindow;t&&t.postMessage(e,"*")}({eventName:e,data:r})}},853:function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.isPromiseLike=t.setToken=t.setCookie=t.getWappId=void 0;var n,r=null,i=null,o=!0,a=null;function s(e){var t,n;t={eventName:o?"setToken":"setTokenRefresh",data:e},(n=a.contentWindow)&&n.postMessage(t,"*"),o=!1,r=e,i=(new Date).getTime()}function c(e){return e instanceof Promise||"function"==typeof(null==e?void 0:e.then)}t.getWappId=function(e){if(!e.includes("/weboffice/office/d"))return null;var t=e.match(/_w_appid=([^&]+)/);return t?t[1]:null},t.setCookie=function(e){var t=e.name,n=e.value,r=e.expires,i=new Date;i.setTime(i.getTime()+r||6e5),document.cookie="".concat(t,"=").concat(n,";expires=").concat(i.toUTCString(),";path=/")},t.setToken=function(e,t){if(!e.setToken||!e.setToken.token)return console.error("请按照文档规范设置token格式");n=e,window.addEventListener("message",(function(u){"wpsPreviewDidMount"===u.data&&(r=null,i=null,o=!0,a=t,s(e.setToken),"function"==typeof e.refreshToken&&function(e){window.document.addEventListener("visibilitychange",(function(){if("hidden"!==document.visibilityState){var e=(new Date).getTime();if(r&&e-i>r.timeout){var t=n.refreshToken();c(t)?t.then((function(e){s(e)})):s(t)}}}));var t=function(e){s(e),e.timeout&&o(e.timeout)},o=function(e){var r,i=e-3e5;setTimeout((function(){var o=(new Date).getTime(),a=n.refreshToken();if(c(a))a.then((function(n){r=n;var a=(new Date).getTime();setTimeout((function(){t(r)}),i>0?3e5-(a-o):e-(a-o))}));else{r=a;var s=(new Date).getTime();setTimeout((function(){t(r)}),i>0?3e5-(s-o):e-(s-o))}}),i)};o(e)}(e.setToken.timeout))}))},t.isPromiseLike=c},737:function(e,t){function n(e){return new RegExp(/\/weboffice\/office\//).test(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.decryptTag=t.encryptTag=t.querystring=t.isLitePreviewUrl=t.isWebofficeUrl=t.isOpenDocUrl=t.parseWebpath=t.parseUrl=t.isJSON=void 0,t.isJSON=function(e){if("string"!=typeof e)return!1;try{var t=JSON.parse(e);return!("object"!=typeof t||!t)}catch(t){return console.log("error："+e+"!!!"+t),!1}},t.parseUrl=function(e){var t=document.createElement("a");t.href=e;var n=t.hostname,r="80"===t.port||"443"===t.port?"":t.port,i=n+(r?":".concat(r):"");return{href:e,protocol:t.protocol||"",host:i,hostname:n,port:r,search:t.search.replace(t.hash,"")||"",hash:t.hash||"",pathname:0===(t.pathname||"").indexOf("/")?t.pathname||"":"/"+(t.pathname||""),relative:(e.match(/tps?:\/\/[^\/]+(.+)/)||[,""])[1]||"",segments:t.pathname.replace(/^\//,"").split("/")||[],origin:t.protocol+"//"+i||""}},t.parseWebpath=function(e){var t=e||window.location.pathname||"";return t.substring(0,t.lastIndexOf("/docs/viewweb/"))||""},t.isOpenDocUrl=function(e){return new RegExp(/\/micsweb\/viewweb\/reader\//).test(e)},t.isWebofficeUrl=n,t.isLitePreviewUrl=function(e){return n(e)&&e.includes("wpsCachePreview")},t.querystring=function(e){var t=(e||window.location.search).replace(/^(\S*)\?/,"").split("&"),n={};return t.forEach((function(e){var t=e.split("=");n[t[0]]=t[1]})),n};t.encryptTag=function(e,t){if(!e)return"";try{var n=encodeURIComponent(e),r=encodeURIComponent(t),i=btoa(n);return btoa(r)+"_"+i}catch(e){return""}};t.decryptTag=function(e,t){if(!e)return"";var n=e.split("_");if(n.length<2)return"";try{var r=decodeURIComponent(atob(n[1]));return decodeURIComponent(atob(n[0]))!==t?"":r}catch(e){return""}}},882:function(e,t,n){var r;Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_PLACEHOLDER_TEXT=void 0;var i=n(153);t.DEFAULT_PLACEHOLDER_TEXT=((r={})[i.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT]="请输入文本",r[i.BASE_WIDGET_TYPE.MULTILINE_TEXT]="请输入文本",r[i.BASE_WIDGET_TYPE.HTML]="请输入HTML",r[i.BASE_WIDGET_TYPE.IMAGE]="",r)},210:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},r.apply(this,arguments)},i=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))},o=this&&this.__generator||function(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}},a=this&&this.__values||function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")},s=this&&this.__read||function(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a},c=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,i=0,o=t.length;i<o;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0}),t.Widget=void 0;var u=n(737),l=n(882),d=n(153),f=n(532),p=function(){function e(e,t){this.wpsInstance=e,this.iframe=t}return e.prototype.addApiEventListener=function(e,t){var n,a=this,s=new URL(null===(n=this.wpsInstance)||void 0===n?void 0:n.url),c=null==s?void 0:s.searchParams,l=null==c?void 0:c.get("_w_appid");this.wpsInstance.ApiEvent.AddApiEventListener(e,(function(n){return i(a,void 0,void 0,(function(){var i,a,s,c,d;return o(this,(function(o){switch(o.label){case 0:if(i=(0,u.decryptTag)(null==n?void 0:n.tag,l),a=JSON.parse(i),"ContentControlBeforeDelete"===e)try{return s=r(r({},n),{tag:null==a?void 0:a.tag,widgetId:(null==a?void 0:a.widgetId)||"",widgetName:(null==a?void 0:a.widgetName)||""}),t(s),[2]}catch(e){t(n)}return[4,this.getWpsWidgetItem(n.id)];case 1:return c=o.sent(),(d=!!c)?[4,this.getWidgetInfo(c)]:[3,3];case 2:d=o.sent(),o.label=3;case 3:return t(d||n),[2]}}))}))}))},e.prototype.insertWidget=function(e){var t=e.baseWidgetType,n=e.widgetItem,r=e.range;return i(this,void 0,void 0,(function(){var e;return o(this,(function(i){switch(i.label){case 0:return i.trys.push([0,3,,4]),[4,this.initWidgetInfo({baseWidgetType:t,widgetItem:n,range:r})];case 1:return e=i.sent(),[4,this.getWidgetInfo(e)];case 2:return[2,i.sent()];case 3:return[2,i.sent()];case 4:return[2]}}))}))},e.prototype.getWidgetList=function(e){return i(this,void 0,void 0,(function(){var t,n,r,i;return o(this,(function(o){switch(o.label){case 0:return[4,this.wpsInstance.ready()];case 1:return o.sent(),t=[],(null==e?void 0:e.id)?[4,this.getWidgetItem(null==e?void 0:e.id,!1)]:[3,3];case 2:return i=o.sent(),(null==e?void 0:e.tag)?[2,(null==i?void 0:i.tag)===(null==e?void 0:e.tag)?[i]:[]]:[2,[i]];case 3:return[4,this.wpsInstance.Application.ActiveDocument.ContentControls.Count];case 4:n=o.sent(),r=1,o.label=5;case 5:if(!(r<=n))return[3,10];o.label=6;case 6:return o.trys.push([6,8,,9]),[4,this.getWidgetItem(r,!0)];case 7:return i=o.sent(),[d.WIDGET_TYPE.BASE_WIDGET,d.WIDGET_TYPE.BUSINESS_WIDGET].includes(null==i?void 0:i.widgetType)&&t.push(i),[3,9];case 8:return o.sent(),[3,9];case 9:return r++,[3,5];case 10:return[2,(null==e?void 0:e.tag)?null==t?void 0:t.filter((function(t){return(null==t?void 0:t.tag)===(null==e?void 0:e.tag)})):t]}}))}))},e.prototype.modifyWidgetItemProperty=function(e){var t=e.id,n=e.tag,s=e.widgetItem;return i(this,void 0,void 0,(function(){var e,i,c,u,l,f,p,v,h,E,T,g,m=this;return o(this,(function(o){switch(o.label){case 0:if(e=new Map,!t&&!n)throw new Error("控件ID和标识符tag至少选择一个输入！");return s?(i=function(t,n){var r,i,o,a;try{switch(null==t?void 0:t.baseWidgetType){case d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT:case d.BASE_WIDGET_TYPE.MULTILINE_TEXT:((null==s?void 0:s.imageSource)||(null==s?void 0:s.html))&&e.set(null==t?void 0:t.id,null===(r=Object.keys(s))||void 0===r?void 0:r.filter((function(e){return!["widgetName","tag","content","placeholderText"].includes(e)})));break;case d.BASE_WIDGET_TYPE.IMAGE:((null==s?void 0:s.placeholderText)||(null==s?void 0:s.content)||(null==s?void 0:s.html))&&e.set(null==t?void 0:t.id,null===(i=Object.keys(s))||void 0===i?void 0:i.filter((function(e){return!["imageSource","widgetName","tag"].includes(e)})));break;case d.BASE_WIDGET_TYPE.HTML:(s.imageSource||s.content)&&e.set(t.id,null===(o=Object.keys(s))||void 0===o?void 0:o.filter((function(e){return!["widgetName","tag","placeholderText","html"].includes(e)})))}if(e.size>0)throw new Error("控件".concat(null==t?void 0:t.id,"不支持修改下列属性：").concat(null===(a=e.get(null==t?void 0:t.id))||void 0===a?void 0:a.join(),"，设置失败"));n()}catch(e){n()}},t?[3,2]:[4,this.getWidgetList()]):[2];case 1:if(c=o.sent(),u=null==c?void 0:c.filter((function(e){return(null==e?void 0:e.tag)===n})),!((null==u?void 0:u.length)>0))throw new Error('未检索到和tag = "'.concat(n,'"匹配的控件'));l=function(e){i(e,(function(){var t=r(r({},e),s);m.setWidgetInfo(null==e?void 0:e.id,t)}))};try{for(f=a(u),p=f.next();!p.done;p=f.next())v=p.value,l(v)}catch(e){T={error:e}}finally{try{p&&!p.done&&(g=f.return)&&g.call(f)}finally{if(T)throw T.error}}return[3,5];case 2:return[4,this.getWpsWidgetItem(t)];case 3:return v=o.sent(),[4,this.getWidgetInfo(v)];case 4:if(h=o.sent(),E=r(r({},h),s),n&&(null==h?void 0:h.tag)!==n)throw new Error("未检索到id:".concat(t,'和tag:"').concat(n,'"匹配的控件'));i(E,(function(){m.setWidgetInfo(t,E)})),o.label=5;case 5:return[2]}}))}))},e.prototype.setLocate=function(e){return i(this,void 0,void 0,(function(){return o(this,(function(t){switch(t.label){case 0:return[4,this.getWpsWidgetItem(e)];case 1:return[4,t.sent().Locate()];case 2:return t.sent(),[2]}}))}))},e.prototype.hasBasePropertyExist=function(e){var t=[];return["tag","widgetId","widgetName"].forEach((function(n){t.push(!!e[n])})),t.some((function(e){return e}))},e.prototype.deleteWidgetItem=function(e){return i(this,void 0,void 0,(function(){var t,n;return o(this,(function(r){switch(r.label){case 0:return[4,this.getWpsWidgetItem(e)];case 1:return t=r.sent(),[4,this.getWidgetInfo(t)];case 2:return n=r.sent(),[4,t.Delete()];case 3:return r.sent(),[2,n]}}))}))},e.prototype.getWidgetItem=function(e,t){return i(this,void 0,void 0,(function(){var n,r;return o(this,(function(i){switch(i.label){case 0:return t?[4,this.getWpsWidgetItemByIndex(e)]:[3,2];case 1:return r=i.sent(),[3,4];case 2:return[4,this.getWpsWidgetItem(e)];case 3:r=i.sent(),i.label=4;case 4:return n=r,[4,this.getWidgetInfo(n)];case 5:return[2,i.sent()]}}))}))},e.prototype.getWpsWidgetItem=function(e){var t;return i(this,void 0,void 0,(function(){return o(this,(function(n){switch(n.label){case 0:return[4,this.wpsInstance.ready()];case 1:return n.sent(),[4,null===(t=this.wpsInstance.Application)||void 0===t?void 0:t.ActiveDocument.ContentControls({ID:e})];case 2:return[2,n.sent()]}}))}))},e.prototype.getWpsWidgetItemByIndex=function(e){var t;return i(this,void 0,void 0,(function(){return o(this,(function(n){switch(n.label){case 0:return[4,this.wpsInstance.ready()];case 1:return n.sent(),[2,null===(t=this.wpsInstance)||void 0===t?void 0:t.Application.ActiveDocument.ContentControls.Item(e)]}}))}))},e.prototype.typeIsWidgetType=function(e){var t=[];for(var n in d.WIDGET_TYPE_ENUM)isNaN(Number(n))||t.push(Number(n));return t.includes(e)},e.prototype.initWidgetInfo=function(e){var t,n=e.baseWidgetType,r=e.widgetItem,a=e.range;return i(this,void 0,void 0,(function(){var e,f,p,v,h=this;return o(this,(function(E){switch(E.label){case 0:if(!n)throw new Error("请输入要插入的基础控件类型！");if(isNaN(d.BASE_WIDGET_CONTROL_MAP[n]))throw new Error("基础控件类型不存在！");if(a&&(null==a?void 0:a.end)<=(null==a?void 0:a.start))throw new Error("控件插入的结束位置需要大于起始位置: ".concat(null==a?void 0:a.start,"-").concat(null==a?void 0:a.end));if(n===d.BASE_WIDGET_TYPE.HTML&&!/<(\w+)[^>]*>(.*?<\/\1>)?/i.test(null==r?void 0:r.html))throw new Error("输入HTML内容不合法");f=null!==(t=d.BASE_WIDGET_CONTROL_MAP[n])&&void 0!==t?t:0,E.label=1;case 1:return E.trys.push([1,3,,4]),[4,this.wpsInstance.Application.ActiveDocument.ContentControls.Add(f,{Start:null==a?void 0:a.start,End:null==a?void 0:a.end})];case 2:return e=E.sent(),[3,4];case 3:return[2,E.sent()];case 4:switch(p=function(t){return i(h,void 0,void 0,(function(){var a,s,c=this;return o(this,(function(f){return(s={})[d.WIDGET_SETTING_ENUM.NAME]=function(){return i(c,void 0,void 0,(function(){return o(this,(function(t){return[2,e.Title=(null==r?void 0:r.widgetName)||""]}))}))},s[d.WIDGET_SETTING_ENUM.TAG]=function(){return i(c,void 0,void 0,(function(){var t,i,a,s,c,l,f;return o(this,(function(o){try{t=new URL(null===(f=this.wpsInstance)||void 0===f?void 0:f.url),i=null==t?void 0:t.searchParams,a=null==i?void 0:i.get("_w_appid"),s={tag:(null==r?void 0:r.tag)||"",appId:a,widgetId:d.BASE_WIDGET_IDS[n],dataImportWay:{dataImportType:"hand_write"},baseWidgetType:n||"",widgetType:"base_widget",originType:"base_widget"},c="".concat(JSON.stringify(s)),l=(0,u.encryptTag)(c,a),e.Tag=l}catch(e){throw new Error(e)}return[2]}))}))},s[d.WIDGET_SETTING_ENUM.PLACEHOLDER]=function(){return i(c,void 0,void 0,(function(){return o(this,(function(t){switch(t.label){case 0:return[4,e.SetPlaceholderText({Text:(null==r?void 0:r.placeholderText)||l.DEFAULT_PLACEHOLDER_TEXT[n]})];case 1:return t.sent(),[2]}}))}))},s[d.WIDGET_SETTING_ENUM.CONTENT]=function(){return i(c,void 0,void 0,(function(){return o(this,(function(t){if(!(null==r?void 0:r.content))return[2];switch(n){case d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT:case d.BASE_WIDGET_TYPE.MULTILINE_TEXT:e.Content=null==r?void 0:r.content}return[2]}))}))},s[d.WIDGET_SETTING_ENUM.ALLOW_MULTILINE]=function(){return i(c,void 0,void 0,(function(){var t;return o(this,(function(r){return t=n===d.BASE_WIDGET_TYPE.MULTILINE_TEXT,e.MultiLine=t,[2]}))}))},s[d.WIDGET_SETTING_ENUM.IMAGE_SOURCE]=function(){return i(c,void 0,void 0,(function(){var t,i,a,s,c,u,l,f,p,v,h;return o(this,(function(o){switch(o.label){case 0:if(n!==d.BASE_WIDGET_TYPE.IMAGE||!(null==r?void 0:r.imageSource))return[3,2];if(!(null===(i=null==r?void 0:r.imageSource)||void 0===i?void 0:i.imageUrl)&&!(null===(a=null==r?void 0:r.imageSource)||void 0===a?void 0:a.imageData))throw new Error("图片控件数据源缺失！");return[4,e.Shape.Reset()];case 1:if(o.sent(),t=/^(https?:\/\/).*\.(png|jpg|jpeg|gif|webp|svg)$/i,/^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*?)\s*$/i.test(null===(s=null==r?void 0:r.imageSource)||void 0===s?void 0:s.imageData))e.Shape.Data=null===(c=null==r?void 0:r.imageSource)||void 0===c?void 0:c.imageData;else{if(!t.test(null===(u=null==r?void 0:r.imageSource)||void 0===u?void 0:u.imageUrl))throw new Error("图片数据源格式非法!");e.Shape.Url=null===(l=null==r?void 0:r.imageSource)||void 0===l?void 0:l.imageUrl}(null===(f=null==r?void 0:r.imageSource)||void 0===f?void 0:f.width)&&(e.Shape.Width=null===(p=null==r?void 0:r.imageSource)||void 0===p?void 0:p.width),(null===(v=null==r?void 0:r.imageSource)||void 0===v?void 0:v.height)&&(e.Shape.Height=null===(h=null==r?void 0:r.imageSource)||void 0===h?void 0:h.height),o.label=2;case 2:return[2]}}))}))},s[d.WIDGET_SETTING_ENUM.EXTENSION_DATA]=function(){return i(c,void 0,void 0,(function(){var t;return o(this,(function(i){switch(i.label){case 0:return!0,!0==(n===d.BASE_WIDGET_TYPE.HTML)?[3,1]:[3,4];case 1:return t=null==r?void 0:r.html,t?[4,e.AddOrEditExtensionData([{key:d.EXTENSION_DATA.WIDGET_HTML_FIGMENT,value:t}])]:[3,3];case 2:i.sent(),i.label=3;case 3:case 4:return[3,5];case 5:return[2]}}))}))},s[d.WIDGET_SETTING_ENUM.HTML_PASTE]=function(){return i(c,void 0,void 0,(function(){var t,n,i,a;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,7,,8]),[4,this.wpsInstance.ready()];case 1:return o.sent(),[4,e.LockContents];case 2:return o.sent()&&(e.LockContents=!1),[4,e.Range];case 3:return[4,(t=o.sent()).Start];case 4:return n=o.sent(),[4,t.End];case 5:return i=o.sent(),[4,this.wpsInstance.Application.ActiveDocument.Range(n,i).PasteHtml({HTML:null==r?void 0:r.html}).then((function(){e.LockContents=!0}))];case 6:return o.sent(),[3,8];case 7:throw a=o.sent(),new Error(a);case 8:return[2]}}))}))},s[d.WIDGET_SETTING_ENUM.LOCK_EDIT]=function(){return i(c,void 0,void 0,(function(){return o(this,(function(t){switch(t.label){case 0:return[4,this.wpsInstance.ready()];case 1:if(t.sent(),n===d.BASE_WIDGET_TYPE.HTML)e.SetPlaceholderText({Text:(null==r?void 0:r.placeholderText)||l.DEFAULT_PLACEHOLDER_TEXT[n]}),e.LockContents=!0;return[2]}}))}))},a=s,t.forEach((function(e){var t;null===(t=a[e])||void 0===t||t.call(a)})),[2]}))}))},v=[d.WIDGET_SETTING_ENUM.NAME,d.WIDGET_SETTING_ENUM.TAG],n){case d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT:p(c(c([],s(v),!1),[d.WIDGET_SETTING_ENUM.ALLOW_MULTILINE,d.WIDGET_SETTING_ENUM.CONTENT,d.WIDGET_SETTING_ENUM.PLACEHOLDER],!1));case d.BASE_WIDGET_TYPE.MULTILINE_TEXT:p(c(c([],s(v),!1),[d.WIDGET_SETTING_ENUM.CONTENT,d.WIDGET_SETTING_ENUM.ALLOW_MULTILINE,d.WIDGET_SETTING_ENUM.PLACEHOLDER],!1));break;case d.BASE_WIDGET_TYPE.IMAGE:p(c(c([],s(v),!1),[d.WIDGET_SETTING_ENUM.IMAGE_SOURCE],!1));break;case d.BASE_WIDGET_TYPE.HTML:p(c(c([],s(v),!1),[d.WIDGET_SETTING_ENUM.EXTENSION_DATA,d.WIDGET_SETTING_ENUM.LOCK_EDIT,d.WIDGET_SETTING_ENUM.HTML_PASTE,d.WIDGET_SETTING_ENUM.PLACEHOLDER],!1))}return[2,e]}}))}))},e.prototype.getWidgetInfo=function(e){var t,n,a,s,c,l,p;return i(this,void 0,void 0,(function(){var i,v,h,E,T,g,m,b,w,y,_,I,N,S,L,D,A,O,k,W,G,P;return o(this,(function(o){switch(o.label){case 0:return[4,e.Title];case 1:return i=o.sent()||"",[4,e.Tag];case 2:v=o.sent(),h=new URL(null===(t=this.wpsInstance)||void 0===t?void 0:t.url),E=null==h?void 0:h.searchParams,T=null==E?void 0:E.get("_w_appid"),g=(0,u.decryptTag)(v,T),m="","",b="",w={},y={},_="";try{w=JSON.parse(g),m=(null==w?void 0:w.widgetId)||"",(null==w?void 0:w.widgetName)||""}catch(e){}return[4,e.ID];case 3:return I=o.sent(),[4,e.Type];case 4:return N=o.sent(),[4,e.PlaceholderText];case 5:return S=o.sent(),L=null==w?void 0:w.baseWidgetType,[d.WIDGET_TYPE_ENUM.TEXT,d.WIDGET_TYPE_ENUM.RTF_CONTENT].includes(N)&&[d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT,d.BASE_WIDGET_TYPE.MULTILINE_TEXT,d.BASE_WIDGET_TYPE.HTML].includes(L)?[4,e.Content]:[3,7];case 6:b=o.sent()||"",o.label=7;case 7:if(N!==d.WIDGET_TYPE_ENUM.IMAGE||L!==d.BASE_WIDGET_TYPE.IMAGE)return[3,16];o.label=8;case 8:return o.trys.push([8,15,,16]),D=y,[4,null===(n=null==e?void 0:e.Shape)||void 0===n?void 0:n.Width];case 9:return D.width=o.sent(),A=y,[4,null===(a=null==e?void 0:e.Shape)||void 0===a?void 0:a.Height];case 10:return A.height=o.sent(),(null===(s=null==e?void 0:e.Shape)||void 0===s?void 0:s.Url)?(O=y,[4,null===(c=null==e?void 0:e.Shape)||void 0===c?void 0:c.Url]):[3,12];case 11:O.imageUrl=o.sent(),o.label=12;case 12:return(null===(l=null==e?void 0:e.Shape)||void 0===l?void 0:l.Data)?(k=y,[4,null===(p=null==e?void 0:e.Shape)||void 0===p?void 0:p.Data]):[3,14];case 13:k.imageData=o.sent(),o.label=14;case 14:return[3,16];case 15:return W=o.sent(),console.error("Error","该控件没有对应的属性",W),[3,16];case 16:return N!==d.WIDGET_TYPE_ENUM.RTF_CONTENT||L!==d.BASE_WIDGET_TYPE.HTML?[3,18]:[4,(0,f.getExtensionData)(this.wpsInstance,I,d.EXTENSION_DATA.WIDGET_HTML_FIGMENT)];case 17:(G=o.sent())&&(_=G.value),o.label=18;case 18:switch(P={widgetId:m,widgetName:i||"",tag:(null==w?void 0:w.tag)||"",id:I,widgetType:null==w?void 0:w.widgetType,baseWidgetType:null==w?void 0:w.baseWidgetType},L){case d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT:case d.BASE_WIDGET_TYPE.MULTILINE_TEXT:return[2,r(r({},P),{content:b,placeholderText:S})];case d.BASE_WIDGET_TYPE.IMAGE:return[2,r(r({},P),{imageSource:y})];case d.BASE_WIDGET_TYPE.HTML:return[2,r(r({},P),{content:b,placeholderText:S,html:_})]}return[2]}}))}))},e.prototype.setWidgetInfo=function(e,t){return i(this,void 0,void 0,(function(){var n,a,s,c,l,f=this;return o(this,(function(p){switch(p.label){case 0:return[4,this.getWpsWidgetItem(e)];case 1:return[4,(n=p.sent()).LockContents];case 2:return p.sent()&&(n.LockContents=!1),[4,null==n?void 0:n.Tag];case 3:return a=p.sent(),[4,this.getWidgetInfo(n)];case 4:return s=p.sent(),c=null==s?void 0:s.baseWidgetType,[4,null==n?void 0:n.Type];case 5:switch(p.sent(),l=function(e){return i(f,void 0,void 0,(function(){var l,f,p=this;return o(this,(function(v){return(f={})[d.WIDGET_SETTING_ENUM.NAME]=function(){return i(p,void 0,void 0,(function(){return o(this,(function(e){return t.widgetName&&(n.Title=t.widgetName),[2]}))}))},f[d.WIDGET_SETTING_ENUM.TAG]=function(){return i(p,void 0,void 0,(function(){var e,i,s,c,l,d,f;return o(this,(function(o){try{e=new URL(null===(f=this.wpsInstance)||void 0===f?void 0:f.url),i=null==e?void 0:e.searchParams,s=null==i?void 0:i.get("_w_appid"),c=JSON.parse((0,u.decryptTag)(a,s)),l=JSON.stringify(r(r({},c),{tag:null==t?void 0:t.tag})),d=(0,u.encryptTag)(l,s),n.Tag=d}catch(e){console.error("Error",e)}return[2]}))}))},f[d.WIDGET_SETTING_ENUM.PLACEHOLDER]=function(){return i(p,void 0,void 0,(function(){return o(this,(function(e){switch(e.label){case 0:return(null==t?void 0:t.placeholderText)?(!0,!0==(c===d.BASE_WIDGET_TYPE.HTML)?[3,1]:[3,3]):[3,5];case 1:case 3:return[4,n.SetPlaceholderText({Text:t.placeholderText})];case 2:case 4:return e.sent(),[3,5];case 5:return[2]}}))}))},f[d.WIDGET_SETTING_ENUM.CONTENT]=function(){return i(p,void 0,void 0,(function(){return o(this,(function(e){return(null==t?void 0:t.content)&&c!==d.BASE_WIDGET_TYPE.HTML&&(n.Content=t.content),[2]}))}))},f[d.WIDGET_SETTING_ENUM.ALLOW_MULTILINE]=function(){return i(p,void 0,void 0,(function(){var e;return o(this,(function(r){return e=(null==t?void 0:t.baseWidgetType)===d.BASE_WIDGET_TYPE.MULTILINE_TEXT,(null==s?void 0:s.baseWidgetType)!==d.BASE_WIDGET_TYPE.IMAGE&&(n.MultiLine=e),[2]}))}))},f[d.WIDGET_SETTING_ENUM.IMAGE_SOURCE]=function(){return i(p,void 0,void 0,(function(){var e,r,i,a,s,c,u,l,d,f,p;return o(this,(function(o){switch(o.label){case 0:if(!(null===(r=null==t?void 0:t.imageSource)||void 0===r?void 0:r.imageUrl)&&!(null===(i=null==t?void 0:t.imageSource)||void 0===i?void 0:i.imageData))throw new Error("图片控件数据源缺失！");return[4,n.Shape.Reset()];case 1:if(o.sent(),e=/^(https?:\/\/).*\.(png|jpg|jpeg|gif|webp|svg)$/i,/^\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*?)\s*$/i.test(null===(a=null==t?void 0:t.imageSource)||void 0===a?void 0:a.imageData))n.Shape.Data=null===(s=null==t?void 0:t.imageSource)||void 0===s?void 0:s.imageData;else{if(!e.test(null===(c=null==t?void 0:t.imageSource)||void 0===c?void 0:c.imageUrl))throw new Error("图片数据源格式非法!");n.Shape.Url=null===(u=null==t?void 0:t.imageSource)||void 0===u?void 0:u.imageUrl}return(null===(l=null==t?void 0:t.imageSource)||void 0===l?void 0:l.width)&&(n.Shape.Width=null===(d=null==t?void 0:t.imageSource)||void 0===d?void 0:d.width),(null===(f=null==t?void 0:t.imageSource)||void 0===f?void 0:f.height)&&(n.Shape.Height=null===(p=null==t?void 0:t.imageSource)||void 0===p?void 0:p.height),[2]}}))}))},f[d.WIDGET_SETTING_ENUM.EXTENSION_DATA]=function(){return i(p,void 0,void 0,(function(){var e;return o(this,(function(r){switch(r.label){case 0:return[4,n.LockContents];case 1:return r.sent(),!0,!0==(c===d.BASE_WIDGET_TYPE.HTML)?[3,2]:[3,5];case 2:return e=null==t?void 0:t.html,e?[4,n.AddOrEditExtensionData([{key:d.EXTENSION_DATA.WIDGET_HTML_FIGMENT,value:e}])]:[3,4];case 3:r.sent(),r.label=4;case 4:case 5:return[3,6];case 6:return[2]}}))}))},f[d.WIDGET_SETTING_ENUM.HTML_PASTE]=function(){return i(p,void 0,void 0,(function(){var e,r,i,a;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,7,,8]),(null==t?void 0:t.html)?[4,this.wpsInstance.ready()]:[3,6];case 1:return o.sent(),[4,n.Range];case 2:return[4,(e=o.sent()).Start];case 3:return r=o.sent(),[4,e.End];case 4:return i=o.sent(),[4,this.wpsInstance.Application.ActiveDocument.Range(r,i).PasteHtml({HTML:null==t?void 0:t.html}).then((function(){n.LockContents=!0}))];case 5:o.sent(),o.label=6;case 6:return[3,8];case 7:return a=o.sent(),n.LockContents=!0,console.error(a),[3,8];case 8:return[2]}}))}))},f[d.WIDGET_SETTING_ENUM.LOCK_EDIT]=function(){return i(p,void 0,void 0,(function(){return o(this,(function(e){return[2]}))}))},l=f,e.forEach((function(e){var t;null===(t=l[e])||void 0===t||t.call(l)})),[2]}))}))},c){case d.BASE_WIDGET_TYPE.SINGLE_LINE_TEXT:case d.BASE_WIDGET_TYPE.MULTILINE_TEXT:l([d.WIDGET_SETTING_ENUM.NAME,d.WIDGET_SETTING_ENUM.TAG,d.WIDGET_SETTING_ENUM.PLACEHOLDER,d.WIDGET_SETTING_ENUM.CONTENT,d.WIDGET_SETTING_ENUM.ALLOW_MULTILINE]);break;case d.BASE_WIDGET_TYPE.IMAGE:l([d.WIDGET_SETTING_ENUM.NAME,d.WIDGET_SETTING_ENUM.TAG,d.WIDGET_SETTING_ENUM.IMAGE_SOURCE]);break;case d.BASE_WIDGET_TYPE.HTML:l([d.WIDGET_SETTING_ENUM.NAME,d.WIDGET_SETTING_ENUM.TAG,d.WIDGET_SETTING_ENUM.PLACEHOLDER,d.WIDGET_SETTING_ENUM.EXTENSION_DATA,d.WIDGET_SETTING_ENUM.HTML_PASTE])}return[2]}}))}))},e}();t.Widget=p},153:function(e,t){var n,r,i,o;Object.defineProperty(t,"__esModule",{value:!0}),t.EXTENSION_DATA=t.BASE_WIDGET_IDS=t.BASE_WIDGET_CONTROL_MAP=t.WIDGET_SETTING_ENUM=t.CONTROL_ELEMENT_ENUM=t.BASE_WIDGET_TYPE=t.WIDGET_TYPE=t.WIDGET_TYPE_ENUM=void 0,function(e){e[e.RTF_CONTENT=0]="RTF_CONTENT",e[e.TEXT=1]="TEXT",e[e.IMAGE=2]="IMAGE",e[e.COMBINATION=3]="COMBINATION",e[e.DROP_DOWN=4]="DROP_DOWN",e[e.DATE=6]="DATE",e[e.CHECKBOX=8]="CHECKBOX",e[e.REPEAT=9]="REPEAT"}(i=t.WIDGET_TYPE_ENUM||(t.WIDGET_TYPE_ENUM={})),function(e){e.BASE_WIDGET="base_widget",e.BUSINESS_WIDGET="business_widget"}(t.WIDGET_TYPE||(t.WIDGET_TYPE={})),function(e){e.SINGLE_LINE_TEXT="single_line_text",e.MULTILINE_TEXT="multiline_text",e.IMAGE="image",e.HTML="html"}(o=t.BASE_WIDGET_TYPE||(t.BASE_WIDGET_TYPE={})),function(e){e.BASE_WIDGET="base_widget",e.BUSINESS_WIDGET="business_widget",e.BUSINESS_COMPONENTS="business_components",e.GROUP="group",e.REPEAT_GROUP="repeat_group"}(t.CONTROL_ELEMENT_ENUM||(t.CONTROL_ELEMENT_ENUM={})),function(e){e.NAME="标题",e.TAG="标识符",e.PLACEHOLDER="占位符",e.CONTENT="内容",e.EXTENSION_DATA="拓展属性",e.ALLOW_MULTILINE="设置是否允许换行",e.HTML_PASTE="HTML内容",e.LOCK_EDIT="限制编辑",e.IMAGE_SOURCE="图片数据源"}(t.WIDGET_SETTING_ENUM||(t.WIDGET_SETTING_ENUM={})),t.BASE_WIDGET_CONTROL_MAP=((n={})[o.SINGLE_LINE_TEXT]=i.TEXT,n[o.MULTILINE_TEXT]=i.TEXT,n[o.IMAGE]=i.IMAGE,n[o.HTML]=i.RTF_CONTENT,n),t.BASE_WIDGET_IDS=((r={})[o.SINGLE_LINE_TEXT]="baseSingleLineTextWidgetId",r[o.MULTILINE_TEXT]="baseMultiLineTextWidgetId",r[o.IMAGE]="baseImageWidgetId",r[o.HTML]="baseHTMLWidgetId",r),function(e){e.WIDGET_HTML_FIGMENT="widget_html_figment"}(t.EXTENSION_DATA||(t.EXTENSION_DATA={}))},532:function(e,t){var n=this&&this.__awaiter||function(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function s(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}c((r=r.apply(e,t||[])).next())}))},r=this&&this.__generator||function(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}},i=this&&this.__read||function(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a},o=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,i=0,o=t.length;i<o;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0}),t.pastControlFormatHTML=t.removeExtensionData=t.addOrEditExtensionData=t.getExtensionData=t.checkSpecialSymbols=void 0,t.checkSpecialSymbols=function(e){var t,n=/[&%]/g,r={tag:null==e?void 0:e.tag,widgetName:null==e?void 0:e.widgetName},i={tag:"",widgetName:""};return null===(t=Object.keys(r))||void 0===t||t.forEach((function(e){n.test(r[e])&&(i[e]="".concat(e,"不允许输入特殊符号&、%"))})),i},t.getExtensionData=function(e,t,i){return n(this,void 0,void 0,(function(){var n,o;return r(this,(function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),[4,e.ready()];case 1:return r.sent(),[4,e.Application.ActiveDocument.ContentControls.Item({ID:t}).ExtensionData];case 2:return n=r.sent(),i?[2,null==n?void 0:n.filter((function(e){return(null==e?void 0:e.key)===i}))[0]]:[2,n];case 3:return o=r.sent(),console.error(o),[3,4];case 4:return[2]}}))}))},t.addOrEditExtensionData=function(e,t,i){return n(this,void 0,void 0,(function(){var n;return r(this,(function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),[4,e.ready()];case 1:return r.sent(),[4,e.Application.ActiveDocument.ContentControls.Item({ID:t}).AddOrEditExtensionData([{key:i.key,value:i.value}])];case 2:return r.sent(),[3,4];case 3:return n=r.sent(),console.error(n),[3,4];case 4:return[2]}}))}))},t.removeExtensionData=function(e,t,a){return n(this,void 0,void 0,(function(){var n;return r(this,(function(r){switch(r.label){case 0:return r.trys.push([0,3,,4]),[4,e.ready()];case 1:return r.sent(),[4,e.Application.ActiveDocument.ContentControls.Item({ID:t}).RemoveExtensionData(o([],i(a),!1))];case 2:return r.sent(),[3,4];case 3:return n=r.sent(),console.error(n),[3,4];case 4:return[2]}}))}))},t.pastControlFormatHTML=function(e,t){return n(this,void 0,void 0,(function(){var n,i,o,a,s;return r(this,(function(r){switch(r.label){case 0:return r.trys.push([0,6,,7]),[4,this.app.ActiveDocument.ContentControls.Item({ID:e})];case 1:return[4,null==(n=r.sent())?void 0:n.Range];case 2:return[4,(i=r.sent()).Start];case 3:return o=r.sent(),[4,i.End];case 4:return a=r.sent(),[4,this.app.ActiveDocument.Range(o,a).PasteHtml({HTML:t})];case 5:return r.sent(),[3,7];case 6:return s=r.sent(),console.error(s),[3,7];case 7:return[2]}}))}))}}},t={};function n(r){var i=t[r];if(void 0!==i)return i.exports;var o=t[r]={exports:{}};return e[r].call(o.exports,o,o.exports,n),o.exports}n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){var e=r;Object.defineProperty(e,"X",{value:!0});var t=n(620);e.Z={config:function(e){return new t.CTX(e).getInstance()}}}();var i=r.X,o=r.Z;export{i as __esModule,o as default};
\ No newline at end of file
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
new file mode 100644
index 0000000..b6c4696
--- /dev/null
+++ b/src/components/registerGlobComp.ts
@@ -0,0 +1,39 @@
+import type { App } from 'vue';
+import { Icon } from './Icon';
+import AIcon from '/@/components/jeecg/AIcon.vue';
+//Tinymce富文本
+//  import Editor from '/@/components/Tinymce/src/Editor.vue'
+
+import { Button, JUploadButton } from './Button';
+import { Space } from 'ant-design-vue';
+
+// ant-design-vue 组件通过 unplugin-vue-components + AntDesignVueResolver 自动按需导入，无需手动注册
+const compList = [Icon, AIcon, JUploadButton];
+//注册online模块的全局组件
+import { registerOnlineComp } from '/@/views/super/online/cgform/auto/comp/index';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+
+export function registerGlobComp(app: App) {
+  compList.forEach((comp) => {
+    app.component(comp.name || comp.displayName, comp);
+  });
+  // Space.Compact 是子组件，AntDesignVueResolver 无法自动解析，需手动注册
+  app.component('ASpaceCompact', Space.Compact);
+  
+  //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了）
+  // app.component(Editor.name, Editor);
+  // 代码逻辑说明: Tinymce异步加载
+  // update-begin--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+  app.component(
+    'Tinymce',
+    createAsyncComponent(() => import('./Tinymce/src/Editor.vue'), {
+      loading: true,
+    })
+  );
+  // update-end--author:liaozhiyang---date:20260227---for:【QQYUN-14751】tinymce富文本、JEasyCron、JLinkTableCard异步加载
+  app
+    .use(registerOnlineComp)
+    .use(Button)
+  console.log("---初始化---， 全局注册Antd、仪表盘、流程设计器、online、流程等组件--------------")
+}
diff --git a/src/components/wordtpl/DocDesign.ts b/src/components/wordtpl/DocDesign.ts
new file mode 100644
index 0000000..b96e2ee
--- /dev/null
+++ b/src/components/wordtpl/DocDesign.ts
@@ -0,0 +1,1134 @@
+import Editor from './canvas-editor.js';
+import { reactive, ref } from 'vue';
+import { debounce } from "lodash-es";
+import { getFileAccessHttpUrl } from "@/utils/common/compUtils";
+
+let instance: any = null;
+
+const formState = reactive({
+  family: '微软雅黑',
+  size: '小四',
+  name: 'word在线编辑',
+  title: '正文',
+  highlightColor: '#ffffff00',
+  showCataLogDom: true,
+  separatorColor: '#000000',
+  separator: '0,0',
+  separatorLineWidth: 1,
+});
+
+const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+
+//搜索结果的Dom元素
+const searchCollapseDom = ref<any>();
+const searchInputDom = ref<any>();
+const searchResultDom = ref<any>();
+//替换文本的Dom元素
+const replaceInputDom = ref<any>();
+
+/**
+ * 创建编辑器
+ */
+export async function createEditor(content: any) {
+  let querySelector = document.querySelector('.jeecg__editor');
+  // 初始化编辑器
+  const editorData = {
+    header: content.header ? JSON.parse(content.header) : [],
+    main: content.main ? JSON.parse(content.main) : [],
+    footer: content.footer ? JSON.parse(content.footer) : [],
+  };
+  formState.name = content.name || 'word在线编辑';
+  instance = new Editor(querySelector, editorData, {  scrollContainerSelector: ".editor-container", pageNumber: { format: "第{pageNo}页/共{pageCount}页"} });
+  settingPaper(content);
+  const contextMenuList = await instance.register.getContextMenuList();
+  // 修改内部右键菜单示例
+  //另存为图片是base64位的，所以禁用掉
+  contextMenuList.forEach((menu) => {
+    // 通过菜单key找到菜单项后进行属性修改
+    if (menu.key === 'imageChange') {
+      menu.when = () => false;
+    }
+  });
+  // 全屏
+  const fullscreenDom:any = document.querySelector('.fullscreen')
+  fullscreenDom.onclick = toggleFullscreen
+  window.addEventListener('keydown', (evt) => {
+    if (evt.key === 'F11') {
+      toggleFullscreen();
+      evt.preventDefault();
+    }
+  });
+  document.addEventListener('fullscreenchange', () => {
+    fullscreenDom.classList.toggle('exist')
+  })
+  function toggleFullscreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }
+  //添加监听
+  addListener();
+  //添加可见页发生改变监听
+  addPageNoListListener();
+  //添加监听当前页数发生改变监听
+  addPageSizeListener();
+  //添加当前页发生改变监听
+  addIntersectionPageNoListener();
+  //当前页面缩放比例发生改变监听
+  addPageScaleListener();
+  //页面模式发生改变监听
+  addPageModeListener();
+  //监听字数
+  addWordCountListener();
+}
+
+/**
+ * 添加监听
+ */
+function addListener() {
+  //字体
+  const fontDom: any = document.querySelector('.jeecg-menu-item-font');
+  const fontSelectDom = fontDom.querySelector('.select');
+  const fontOptionDom = fontDom.querySelector('.options');
+  //字体大小
+  const jeecgSizeDom: any = document.querySelector('.jeecg-menu-item-size');
+  const sizeOptionDom = jeecgSizeDom.querySelector('.options');
+  //下划线
+  const underlineDom: any = document.querySelector('.jeecg-menu-item-underline');
+  //加粗
+  const boldDom: any = document.querySelector('.jeecg-menu-item-bold');
+  //倾斜
+  const italicDom: any = document.querySelector('.jeecg-menu-item-italic');
+  //删除线
+  const strikeoutDom: any = document.querySelector('.jeecg-menu-item-strikeout');
+  //上标
+  const subscriptDom: any = document.querySelector('.jeecg-menu-item-subscript');
+  //下标
+  const superscriptDom: any = document.querySelector('.jeecg-menu-item-superscript');
+  //颜色
+  const colorControlDom:any = document.querySelector('#color');
+  const colorDom:any = document.querySelector('.jeecg-menu-item-color');
+  const colorSpanDom:any = colorDom.querySelector('span');
+  //左对齐
+  const leftDom:any = document.querySelector('.jeecg-menu-item-left');
+  //居中对齐
+  const centerDom:any = document.querySelector('.jeecg-menu-item-center');
+  //右对齐
+  const rightDom:any = document.querySelector('.jeecg-menu-item-right');
+  //两端对齐
+  const alignmentDom:any = document.querySelector('.jeecg-menu-item-alignment');
+  //行间距
+  const rowMarginDom:any = document.querySelector('.jeecg-menu-item-row-margin');
+  const rowOptionDom = rowMarginDom.querySelector('.options')
+  //高亮颜色
+  const highlightDom:any = document.querySelector('.jeecg-menu-item-highlight');
+  const highlightSpanDom = highlightDom.querySelector('span');
+  const highlightControlDom:any = document.querySelector('#highlight');
+  //标题
+  const titleDom:any = document.querySelector('.jeecg-menu-item-title')
+  const titleOptionDom = titleDom.querySelector('.options');
+  //列表
+  const listDom:any = document.querySelector('.jeecg-menu-item-list');
+  const listOptionDom = listDom.querySelector('.options');
+  //分割线
+  const separatorDom:any = document.querySelector('.jeecg-menu-item-separator');
+  const separatorOptionDom = separatorDom.querySelector('.options');
+  //搜索查询
+  searchCollapseDom.value = document.querySelector('.jeecg-menu-item-search-collapse');
+  searchResultDom.value = searchCollapseDom.value.querySelector('.search-result');
+  replaceInputDom.value = document.querySelector('.jeecg-menu-item-search-collapse-replace input')
+  searchInputDom.value = document.querySelector('.jeecg-menu-item-search-collapse-search input')
+  // 内部事件监听
+  instance.listener.rangeStyleChange = function (payload) {
+    let undoDom: any = document.querySelector('.jeecg-menu-item-undo');
+    // 撤销
+    if (undoDom && undoDom.classList) {
+      payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow');
+    }
+    // 重做
+    let redoDom: any = document.querySelector('.jeecg-menu-item-redo');
+    if (redoDom && redoDom.classList) {
+      payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow');
+    }
+    let painterDom = document.querySelector('.jeecg-menu-item-painter');
+    // 格式刷
+    if (painterDom && painterDom.classList) {
+      payload.painter ? painterDom.classList.add('active') : painterDom.classList.remove('active');
+    }
+    //字体
+    fontOptionDom.querySelectorAll('li').forEach((li) => li.classList.remove('active'));
+    const curFontDom = fontOptionDom.querySelector(`[data-family='${payload.font}']`);
+    if (curFontDom) {
+      formState.family = curFontDom.innerText;
+      fontSelectDom.style.fontFamily = payload.font;
+      curFontDom.classList.add('active');
+    }
+
+    //字体大小
+    sizeOptionDom.querySelectorAll('li').forEach((li) => li.classList.remove('active'));
+    const curSizeDom = sizeOptionDom.querySelector(`[data-size='${payload.size}']`);
+    if (curSizeDom) {
+      formState.size = curSizeDom.innerText;
+      curSizeDom.classList.add('active');
+    } else {
+      formState.size = `${payload.size}`;
+    }
+    //加粗
+    if (boldDom && boldDom.classList) {
+      payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active');
+    }
+    //倾斜
+    if (italicDom && italicDom.classList) {
+      payload.italic ? italicDom.classList.add('active') : italicDom.classList.remove('active');
+    }
+
+    //下划线
+    if (underlineDom && underlineDom.classList) {
+      payload.underline ? underlineDom.classList.add('active') : underlineDom.classList.remove('active');
+    }
+    //删除线
+    if (strikeoutDom && strikeoutDom.classList) {
+      payload.strikeout ? strikeoutDom.classList.add('active') : strikeoutDom.classList.remove('active');
+    }
+    //上标
+    payload.type === 'superscript' ? superscriptDom.classList.add('active') : superscriptDom.classList.remove('active');
+
+    //下标
+    payload.type === 'subscript' ? subscriptDom.classList.add('active') : subscriptDom.classList.remove('active');
+
+    //字体颜色
+    if (colorDom && colorDom.classList) {
+      if (payload.color) {
+        colorDom.classList.add('active');
+        colorControlDom.value = payload.color;
+        colorSpanDom.style.backgroundColor = payload.color;
+      } else {
+        colorDom.classList.remove('active');
+        colorControlDom.value = '#000000';
+        colorSpanDom.style.backgroundColor = '#000000';
+      }
+    }
+    
+    //对齐方式
+    leftDom.classList.remove('active')
+    centerDom.classList.remove('active')
+    rightDom.classList.remove('active')
+    alignmentDom.classList.remove('active')
+    if (payload.rowFlex && payload.rowFlex === 'right') {
+      rightDom.classList.add('active')
+    } else if (payload.rowFlex && payload.rowFlex === 'center') {
+      centerDom.classList.add('active')
+    } else if (payload.rowFlex && payload.rowFlex === 'alignment') {
+      alignmentDom.classList.add('active')
+    } else {
+      leftDom.classList.add('active')
+    }
+    //行间距
+    rowOptionDom.querySelectorAll('li').forEach(li => li.classList.remove('active'))
+    const curRowMarginDom = rowOptionDom.querySelector(
+      `[data-rowmargin='${payload.rowMargin}']`
+    )
+    curRowMarginDom.classList.add('active')
+    
+    //高亮颜色
+    if (payload.highlight) {
+      highlightDom.classList.add('active')
+      formState.highlightColor = payload.highlight
+      highlightControlDom.value = payload.highlight
+      highlightSpanDom.style.backgroundColor = payload.highlight
+    } else {
+      highlightDom.classList.remove('active')
+      formState.highlightColor = '#ffffff00';
+      highlightControlDom.value = '#ffffff00';
+      highlightSpanDom.style.backgroundColor = '#ffffff00'
+    }
+    
+    // 标题
+    titleOptionDom.querySelectorAll('li') .forEach(li => li.classList.remove('active'));
+    if (payload.level) {
+      const curTitleDom = titleOptionDom.querySelector(`[data-level='${payload.level}']` );
+      formState.title = curTitleDom.innerText;
+      curTitleDom.classList.add('active');
+    } else {
+      formState.title = '正文';
+      titleOptionDom.querySelector('li:first-child').classList.add('active');
+    }
+    
+    //列表
+    listOptionDom.querySelectorAll('li') .forEach(li => li.classList.remove('active'));
+    if (payload.listType) {
+      listDom.classList.add('active')
+      const listType = payload.listType
+      const listStyle = payload.listType === 'ol' ? 'decimal' :payload.listStyle;
+      const curListDom = listOptionDom.querySelector( `[data-list-type='${listType}'][data-list-style='${listStyle}']`);
+      if (curListDom) {
+        curListDom.classList.add('active');
+      }
+    } else {
+      listDom.classList.remove('active');
+    }
+    //分割线
+    separatorOptionDom.querySelectorAll('li') .forEach(li => li.classList.remove('active'))
+    if (payload.type === 'separator') {
+      const separator = payload.dashArray.join(',') || '0,0'
+      formState.separator = separator;
+      const curSeparatorDom = separatorOptionDom.querySelector(`[data-separator='${separator}']`)
+      if (curSeparatorDom) {
+        curSeparatorDom.classList.add('active');
+      }
+      if(payload.color) {
+        formState.separatorColor = payload.color;
+      } else {
+        formState.separatorColor = "#000000";
+      }
+      if(payload.lineWidth) {
+        formState.separatorLineWidth = payload.lineWidth;
+      } else {
+        formState.separatorLineWidth = 1;
+      }
+    }
+  };
+}
+
+/**
+ * 可见页发生改变
+ */
+function addPageNoListListener() {
+  instance.listener.visiblePageNoListChange = function (payload) {
+    const text = payload.map(i => i + 1).join('、');
+    let querySelector:any = document.querySelector('.page-no-list');
+    querySelector.innerText = text
+  }
+}
+
+/**
+ * 当前页数发生改变
+ */
+function addPageSizeListener(){
+  instance.listener.pageSizeChange = function (payload) {
+    let querySelector:any = document.querySelector('.page-size');
+    querySelector!.innerText = `${payload}`
+  }
+}
+
+/**
+ * 添加当前页发生改变
+ */
+function addIntersectionPageNoListener(){
+  instance.listener.intersectionPageNoChange = function (payload) {
+    let querySelector:any = document.querySelector('.page-no');
+    querySelector.innerText = `${ payload + 1 }`
+  }
+}
+
+/**
+ * 当前页面缩放比例发生改变
+ */
+function addPageScaleListener(){
+  instance.listener.pageScaleChange = function (payload) {
+    let querySelector:any = document.querySelector('.page-scale-percentage');
+    querySelector.innerText = `${Math.floor(payload * 10 * 10)}%`
+  }
+}
+
+/**
+ * 页面模式发生改变
+ */
+function addPageModeListener(){
+  const pageModeDom:any = document.querySelector('.page-mode')
+  const pageModeOptionsDom = pageModeDom.querySelector('.options')
+  instance.listener.pageModeChange = function (payload) {
+    const activeMode = pageModeOptionsDom.querySelector(
+      `[data-page-mode='${payload}']`
+    )
+    pageModeOptionsDom.querySelectorAll('li').forEach(li => li.classList.remove('active'))
+    activeMode.classList.add('active')
+  }
+}
+
+/**
+ * 字数
+ */
+const handleContentChange = async function () {
+  // 字数
+  const wordCount = await instance.command.getWordCount();
+  let querySelector:any = document.querySelector('.word-count');
+  querySelector.innerText = `${ wordCount || 0 }`;
+  if(formState.showCataLogDom){
+    updateCatalog();
+  }
+}
+
+/**
+ * 监听字数
+ */
+async function addWordCountListener(){
+  instance.listener.contentChange = debounce(handleContentChange,200);
+}
+
+/**
+ * 设置纸张
+ * @param content
+ */
+function settingPaper(content) {
+  if(content.width && content.height){
+    //设置纸张大小并回显
+    instance.command.executePaperSize(content.width,content.height);
+    const paperSizeDom:any = document.querySelector('.paper-size');
+    const paperSizeDomOptionsDom = paperSizeDom.querySelector('.options')
+    let pagers = paperSizeDomOptionsDom.querySelectorAll('li');
+    for (let index = 0; index < pagers.length; index++) {
+      let element = pagers[index];
+      element.classList.remove('active')
+      if(element.dataset.paperSize == (content.height+"*"+content.width)||element.dataset.paperSize == (content.width+"*"+content.height)) {
+        element.classList.add('active')
+      }
+    }
+    //设置纸张方向并回显
+    if(content.paperDirection){
+      let pageDirection = content.paperDirection;
+      instance.command.executePaperDirection(pageDirection);
+      const paperDirectionDom:any = document.querySelector('.paper-direction')
+      const paperDirectionDomOptionsDom = paperDirectionDom.querySelector('.options')
+      let pagerDirections = paperDirectionDomOptionsDom.querySelectorAll('li')
+      for (let index = 0; index < pagerDirections.length; index++) {
+        let element = pagerDirections[index];
+        element.classList.remove('active')
+        if(element.dataset.paperDirection ==  pageDirection){
+          element.classList.add('active')
+        }
+      }
+    }
+    //设置水印
+    let watermark = content.watermark;
+    if(watermark){
+      let watermarkObj = JSON.parse(watermark);
+      instance.command.executeAddWatermark(watermarkObj)
+    }
+    //设置边距
+    let margins = content.margins;
+    if(margins && margins != "[]"){
+      margins = JSON.parse(margins);
+      instance.command.executeSetPaperMargin([
+        Number(margins[0]),
+        Number(margins[1]),
+        Number(margins[2]),
+        Number(margins[3])
+      ])
+    }
+  }
+}
+
+/**
+ * 更新日志
+ */
+async function updateCatalog() {
+  const catalog = await instance.command.getCatalog()
+  const catalogMainDom:any = document.querySelector('.jeecg-catalog-main')
+  catalogMainDom.innerHTML = ''
+  if (catalog) {
+    const appendCatalog = (
+      parent,
+      catalogItems
+    ) => {
+      for (let c = 0; c < catalogItems.length; c++) {
+        const catalogItem = catalogItems[c]
+        const catalogItemDom = document.createElement('div')
+        catalogItemDom.classList.add('catalog-item')
+        // 渲染
+        const catalogItemContentDom = document.createElement('div')
+        catalogItemContentDom.classList.add('jeecg-catalog-item-content')
+        const catalogItemContentSpanDom = document.createElement('span')
+        catalogItemContentSpanDom.innerText = catalogItem.name
+        catalogItemContentDom.append(catalogItemContentSpanDom)
+        // 定位
+        catalogItemContentDom.onclick = () => {
+          instance.command.executeLocationCatalog(catalogItem.id)
+        }
+        catalogItemDom.append(catalogItemContentDom)
+        if (catalogItem.subCatalog && catalogItem.subCatalog.length) {
+          appendCatalog(catalogItemDom, catalogItem.subCatalog)
+        }
+        // 追加
+        parent.append(catalogItemDom)
+      }
+    }
+    appendCatalog(catalogMainDom, catalog)
+  }
+}
+
+const SURROGATE_PAIR_REG = /[\uD800-\uDBFF][\uDC00-\uDFFF]/ // unicode代理对（surrogate pair）
+const EMOJI_REG =
+  /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g
+
+/**
+ * 分割文本
+ * @param text
+ */
+function splitText(text){
+  const UNICODE_SYMBOL_REG = new RegExp(
+    `${EMOJI_REG.source}|${SURROGATE_PAIR_REG.source}`,
+    'g'
+  )
+  const data:any = []
+  const symbolMap:any = new Map();
+  for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
+    symbolMap.set(match.index, match[0])
+  }
+  let t = 0
+  while (t < text.length) {
+    const symbol = symbolMap.get(t)
+    if (symbol) {
+      data.push(symbol)
+      t += symbol.length
+    } else {
+      data.push(text[t])
+      t++
+    }
+  }
+  return data
+}
+
+/**
+ * 方法
+ */
+export function method() {
+  /**
+   * 清除格式
+   */
+  function clearFormat() {
+    instance.command.executeFormat();
+  }
+
+  /**
+   * 撤销
+   */
+  function undo() {
+    instance.command.executeUndo();
+  }
+
+  /**
+   * 重做
+   */
+  function redo() {
+    instance.command.executeRedo();
+  }
+
+  let isFirstClick = true;
+  let painterTimeout = 0;
+
+  /**
+   * 格式刷（单击）
+   */
+  function painterClick() {
+    if (isFirstClick) {
+      isFirstClick = false;
+      painterTimeout = window.setTimeout(() => {
+        isFirstClick = true;
+        instance.command.executePainter({
+          isDblclick: false,
+        });
+      }, 200);
+    } else {
+      window.clearTimeout(painterTimeout);
+    }
+  }
+
+  /**
+   * 格式刷双击
+   */
+  function painterDblClick() {
+    isFirstClick = true;
+    window.clearTimeout(painterTimeout);
+    instance.command.executePainter({
+      isDblclick: true,
+    });
+  }
+
+  /**
+   * 字体
+   * @param family
+   * @param name
+   */
+  function font(family, name) {
+    formState.family = name;
+    instance.command.executeFont(family);
+  }
+
+  /**
+   * 字体大小
+   * @param size
+   * @param name
+   */
+  function fontSize(size, name) {
+    formState.size = name;
+    instance.command.executeSize(Number(size));
+  }
+
+  /**
+   * 字体+
+   */
+  function sizeAdd() {
+    instance.command.executeSizeAdd();
+  }
+
+  /**
+   * 字体-
+   */
+  function sizeMinus() {
+    instance.command.executeSizeMinus();
+  }
+
+  /**
+   * 加粗
+   */
+  function blob() {
+    instance.command.executeBold();
+  }
+
+  /**
+   * 倾斜
+   */
+  function itailc() {
+    instance.command.executeItalic();
+  }
+
+  /**
+   * 下划线
+   * @param value
+   */
+  function underline(value) {
+    //下划线
+    const underlineDom: any = document.querySelector('.jeecg-menu-item-underline');
+    const underlineOptionDom = underlineDom.querySelector('.options');
+    if(underlineOptionDom && underlineOptionDom.classList){
+      underlineOptionDom.classList.remove('visible');
+    }
+    if (value) {
+      instance.command.executeUnderline({
+        style: value,
+      });
+    } else {
+      instance.command.executeUnderline({
+        style: '',
+      });
+    }
+  }
+
+  /**
+   * 删除线
+   */
+  function strikeout() {
+    instance.command.executeStrikeout();
+  }
+
+  /**
+   * 上标
+   */
+  function superscript() {
+    instance.command.executeSuperscript();
+  }
+
+  /**
+   * 下标
+   */
+  function subscript() {
+    instance.command.executeSubscript();
+  }
+
+  /**
+   * 颜色
+   * @param e
+   */
+  function color(e) {
+    instance.command.executeColor(e.target.value);
+  }
+
+  /**
+   * 单元格背景色
+   * @param e
+   */
+  function cellColor(e) {
+    instance.command.executeTableTdBackgroundColor(e.target.value);
+  }
+
+  /**
+   * 连页分页
+   * @param value
+   */
+  function pageMode(value) {
+    instance.command.executePageMode(value)
+  }
+
+  /**
+   * 放大
+   */
+  function scaleAdd() {
+    instance.command.executePageScaleAdd();
+  }
+
+  /**
+   * 缩小
+   */
+  function scaleMiuns() {
+    instance.command.executePageScaleMinus();
+  }
+
+  /**
+   * 纸张大小
+   * @param value
+   */
+  function paperSize(value) {
+    const [width, height] = value.split('*').map(Number);
+    instance.command.executePaperSize(width, height);
+    // 纸张状态回显
+    const paperSizeDom:any = document.querySelector('.paper-size');
+    const paperSizeDomOptionsDom = paperSizeDom.querySelector('.options');
+    paperSizeDomOptionsDom.querySelectorAll('li').forEach(child => child.classList.remove('active'));
+    let querySelector:any = paperSizeDomOptionsDom.querySelector( `[data-paper-size='${value}']` );
+    querySelector.classList.add('active')
+  }
+
+  /**
+   * 纸张方向
+   */
+  function paperDirection(value) {
+    instance.command.executePaperDirection(value);
+    // 纸张方向状态回显
+    const paperDirectionDom:any = document.querySelector('.paper-direction');
+    const paperDirectionDomOptionsDom =  paperDirectionDom.querySelector('.options');
+    paperDirectionDomOptionsDom.querySelectorAll('li').forEach(child => child.classList.remove('active'));
+    let querySelector:any = paperDirectionDomOptionsDom.querySelector( `[data-paper-direction='${value}']`);
+    querySelector.classList.add('active');
+  }
+
+  /**
+   * 打印
+   */
+  function printTemplate() {
+    instance.command.executePrint();
+  }
+
+  /**
+   * 获取边距
+   */
+  function getPaperMargin() {
+    const [topMargin, rightMargin, bottomMargin, leftMargin] = instance.command.getPaperMargin();
+    return {
+      marginTop: topMargin,
+      marginBottom: bottomMargin,
+      marginLeft: leftMargin,
+      marginRight: rightMargin,
+    }
+  }
+
+  /**
+   * 设置边距
+   * @param values
+   */
+  function setPaperMargin(values) {
+    instance.command.executeSetPaperMargin([
+      values.marginTop,
+      values.marginRight,
+      values.marginBottom,
+      values.marginLeft
+    ])
+  }
+
+  /**
+   * 设置图片
+   * @param url
+   */
+  function setWordImage(url) {
+    let options = instance.command.getOptions();
+    let paperDirection = options.paperDirection;
+    let pageWidth = options.width;
+    let pageHeight = options.height;
+    if(paperDirection == "horizontal"){
+      pageWidth = options.height;
+      pageHeight = options.width;
+    }
+    const img = new Image();
+    img.src =url;
+    img.onload = () => {
+      let width = img.width || 0;
+      let height = img.height || 0;
+      width = width>pageWidth?pageWidth:width;
+      height = height>pageHeight?pageHeight:height;
+      instance.command.executeImage({
+        value: url,
+        width: width,
+        height: height
+      })
+    };
+  }
+
+  /**
+   * 文件上传赋值内容
+   */
+  async function setWordContent(content) {
+    if(content){
+      let main = JSON.parse(content.main);
+      //设置可访问的image
+      main = await setViewImage(main,'import');
+      instance.command.executeSetValue({
+        "header":  JSON.parse(content.header) || [],
+        "main": main,
+        "footer": JSON.parse(content.footer) || []
+      });
+      settingPaper(content);
+    }
+  }
+
+  /**
+   * 设置可访问的image
+   * @param main
+   * @param type
+   */
+  function setViewImage(main,type) {
+    for (const item of main) {
+      if(item.type === 'image'){
+        if(type === 'original'){
+          if(item['oldValue']){
+            item.value = item['oldValue'];
+          }
+        }else{
+          item['oldValue'] = item.value;
+          item.value = getFileAccessHttpUrl(item.value);
+        }
+      }
+      if(item.trList && item.trList.length>0){
+        for (const tr of item.trList) {
+          if(tr.tdList && tr.tdList.length>0){
+            let tdList = tr.tdList;
+            for (const td of tdList) {
+              let tdValue = td.value;
+              if(tdValue && tdValue.length>0){
+                for (const itemValue of tdValue) {
+                  if(itemValue.type === 'image'){
+                    if(type === 'original'){
+                      if(itemValue.oldValue){
+                        itemValue.value = itemValue['oldValue'];
+                      }
+                    }else{
+                      itemValue['oldValue'] = itemValue.value;
+                      itemValue.value = getFileAccessHttpUrl(itemValue.value);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    return main;
+  }
+
+  /**
+   * 左对齐
+   */
+  function leftAlign() {
+    instance.command.executeRowFlex("left");
+  } 
+  
+  /**
+   * 居中对齐
+   */
+  function centerAlign() {
+    instance.command.executeRowFlex("center");
+  }
+
+  /**
+   * 右对齐
+   */
+  function rightAlign() {
+    instance.command.executeRowFlex("right");
+  }  
+  
+  /**
+   * 两端对齐
+   */
+  function alignmentAlign() {
+    instance.command.executeRowFlex("alignment");
+  }
+
+  /**
+   * 行间距
+   * @param value
+   */
+  function rowMargin(value) {
+    instance.command.executeRowMargin(Number(value));
+  }
+
+  /**
+   * 分页符
+   */
+  function pageBreak() {
+    instance.command.executePageBreak();
+  }
+
+  /**
+   * 设置高亮颜色
+   * @param value
+   */
+  function setHighlightColor(value) {
+    let highlightColor = value.highlightColor;
+    if(highlightColor) {
+      instance.command.executeHighlight(highlightColor)
+    }
+  }
+
+  /**
+   * 标题
+   * @param value
+   */
+  function title(value) {
+    instance.command.executeTitle(value || null);
+  }
+
+  /**
+   * 列表
+   * @param listType
+   * @param listStyle
+   */
+  function list(listType,listStyle) {
+    instance.command.executeList(listType, listStyle);
+  }
+
+  /**
+   * 表格
+   * @param rowIndex
+   * @param colIndex
+   * @param recoveryTable
+   */
+  function tabCell(rowIndex,colIndex,recoveryTable) {
+    instance.command.executeInsertTable(rowIndex, colIndex);
+    recoveryTable();
+  }
+
+  /**
+   * 分割线
+   * @param value
+   */
+  function separator() {
+    let payload:any = [];
+    const separatorDash = formState.separator?formState.separator?.split(',').map(Number): "0,0".split(',').map(Number);
+    if (separatorDash) {
+      const isSingleLine = separatorDash.every(d => d === 0)
+      if (!isSingleLine) {
+        payload = separatorDash
+      }
+    }
+    instance.command.executeSeparator(payload,formState.separatorLineWidth,formState.separatorColor);
+  }
+
+  /**
+   * 超链接
+   * @param value
+   */
+  function setHyperlink(value) {
+    instance.command.executeHyperlink({
+      type: 'hyperlink',
+      value: '',
+      url:value.url,
+      valueList: splitText(value.name).map(n => ({
+        value: n,
+        size: 16
+      }))
+    })
+  }
+
+  /**
+   * 获取超链接
+   */
+  function getHyperlink() {
+    let rangeText = instance.command.getRangeText();
+    return {
+      name: rangeText,
+      url: ''
+    }
+  }
+
+  /**
+   * 设置水印
+   * @param watermark
+   */
+  function setWatermark(watermark) {
+    const repeat = watermark.repeat === '1';
+    instance.command.executeAddWatermark({
+      data: watermark.data,
+      color: watermark.color,
+      size: watermark.size,
+      opacity: watermark.opacity,
+      repeat,
+      gap:
+        repeat && watermark.horizontalGap && watermark.verticalGap
+          ? [
+            watermark.horizontalGap,
+            watermark.verticalGap
+          ]
+          : undefined
+    });
+  }
+
+  /**
+   * 删除水印
+   */
+  function deleteWatermarkClick() {
+    instance.command.executeDeleteWatermark();
+  }
+
+  /**
+   * 查询文本输入事件
+   * @param evt
+   */
+  function searchInput(evt) {
+    let value = evt.target.value;
+    instance.command.executeSearch(value || null);
+    setSearchResult();
+  }  
+  
+  /**
+   * 查询文本键盘事件
+   * @param evt
+   */
+  function searchKeyDown(evt) {
+    if (evt.key === 'Enter') {
+      let value = evt.target.value;
+      instance.command.executeSearch(value || null);
+      setSearchResult();
+    }
+  }
+  
+  /**
+   * 上一个
+   */
+  function arrowLeft() {
+    instance.command.executeSearchNavigatePre();
+    setSearchResult();
+  }
+
+  /**
+   * 下一个
+   */
+  function arrowRight() {
+    instance.command.executeSearchNavigateNext();
+    setSearchResult();
+  }
+
+  /**
+   * 替换
+   */
+  function replaceText() {
+    console.log("searchResultDom.value:::",searchResultDom.value)
+    console.log("replaceInputDom.value:::",replaceInputDom.value)
+    const searchValue = searchInputDom.value.value;
+    const replaceValue = replaceInputDom.value.value;
+    if (searchValue && replaceValue && searchValue !== replaceValue) {
+      instance.command.executeReplace(replaceValue);
+    }
+  }
+
+  /**
+   * 关闭搜索
+   */
+  function closeSearch() {
+    searchCollapseDom.value.style.display = 'none';
+    replaceInputDom.value.value = '';
+    searchInputDom.value.value = '';
+    instance.command.executeSearch(null);
+    setSearchResult();
+  }
+
+  /**
+   * 设置搜索结果
+   */
+  function setSearchResult() {
+    const result = instance.command.getSearchNavigateInfo();
+    if (result) {
+      const { index, count } = result;
+      searchResultDom.value.innerText = `${index}/${count}`;
+    } else {
+      searchResultDom.value.innerText = '';
+    }
+  }
+  
+  /**
+   * 保存
+   */
+  function save() {
+    let tplSettings = instance.command.getValue();
+    let options = instance.command.getOptions();
+    let paperDirection = options.paperDirection;
+    let paperMargin = instance.command.getPaperMargin();
+    tplSettings.data.main = setViewImage(tplSettings.data.main,'original');
+    return {
+      header: JSON.stringify(tplSettings.data.header),
+      main: JSON.stringify(tplSettings.data.main),
+      footer: JSON.stringify(tplSettings.data.footer),
+      paperDirection: paperDirection,
+      watermark: JSON.stringify(tplSettings.options.watermark),
+      margins: JSON.stringify(paperMargin),
+      height: options.height,
+      width: options.width,
+    };
+  }
+
+  return {
+    formState,
+    clearFormat,
+    undo,
+    redo,
+    isApple,
+    painterClick,
+    painterDblClick,
+    font,
+    fontSize,
+    sizeAdd,
+    sizeMinus,
+    blob,
+    itailc,
+    underline,
+    strikeout,
+    superscript,
+    subscript,
+    color,
+    save,
+    pageMode,
+    scaleAdd,
+    scaleMiuns,
+    paperSize,
+    paperDirection,
+    printTemplate,
+    getPaperMargin,
+    setPaperMargin,
+    updateCatalog,
+    setWordImage,
+    setWordContent,
+    leftAlign,
+    centerAlign,
+    rightAlign,
+    alignmentAlign,
+    rowMargin,
+    pageBreak,
+    cellColor,
+    setHighlightColor,
+    title,
+    list,
+    tabCell,
+    separator,
+    setHyperlink,
+    getHyperlink,
+    setWatermark,
+    deleteWatermarkClick,
+    arrowLeft,
+    arrowRight,
+    searchInput,
+    searchKeyDown,
+    replaceText,
+    closeSearch,
+  };
+}
diff --git a/src/components/wordtpl/DocDesign.vue b/src/components/wordtpl/DocDesign.vue
new file mode 100644
index 0000000..b1766cd
--- /dev/null
+++ b/src/components/wordtpl/DocDesign.vue
@@ -0,0 +1,1050 @@
+<template>
+  <Loading :loading="loading" content="加载中请稍后"></Loading>
+  <div class="content" style="height: 100vh; display: flex; flex-direction: column; overflow: hidden; background-color: #f0f2f5">
+    <div style="width: 100%; flex: none" class="header-box">
+      <a-layout>
+        <a-layout-header class="space-between header">
+          <div class="align-center header-title">
+            <div class="header-name ellipsis" style="cursor: pointer" :title="formState.name" @click="showInputClick" v-if="!showInput">
+              {{ formState.name }}
+            </div>
+            <div v-else class="header-name">
+              <a-input ref="nameRef" style="border-bottom: 1px solid #73a2e3; border-radius: 0" :bordered="false" v-model:value="formState.name" @pressEnter="saveTemplateNameClick" @blur="saveTemplateNameClick"></a-input>
+            </div>
+          </div>
+        </a-layout-header>
+        <a-layout-content>
+          <div class="center">
+            <div class="menu" editor-component="menu">
+              <div class="menu-item">
+                <!--  保存  -->
+                <div class="jeecg-menu-item-save" title="保存模板" @click="saveTemplate">
+                  <i />
+                </div>
+                <!--  上传  -->
+                <div class="jeecg-menu-item-upload" title="上传" @click="uploadWordFile">
+                  <i />
+                  <input
+                    ref="uploadWordFileRef"
+                    type="file"
+                    accept=".docx"
+                    @change="uploadDocxChange"
+                    style="display: none"/>
+                </div>
+                <div style="display: none">
+                  <input id="uploadDocxBtn" type="file" accept=".docx" />
+                </div>
+                <div class="jeecg-menu-item-download" title="导出模板" @click="downloadTemplate">
+                  <i />
+                </div>
+                <!--  预览  -->
+                <!-- <div class="menu-item-preview" title="预览">
+                   <i />
+                 </div>-->
+                <div class="jeecg-menu-item-undo no-allow" @click="undo" :title="isApple ? '撤销(⌘+Z)' : '撤销(Ctrl+Z)'">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-redo no-allow" @click="redo" :title="isApple ? '(重做⌘)' : '(CtrlY)'">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-painter" title="格式刷(双击可连续使用)" @click="painterClick" @dblclick="painterDblClick">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-format" title="清除格式" @click="clearFormat">
+                  <i />
+                </div>
+              </div>
+              <a-divider type="vertical" style="border-inline-start: 1px solid #cfd2d8; height: 20px" />
+              <div class="menu-item">
+                <div class="jeecg-menu-item-font" @click="fontFamilyClick('.jeecg-menu-item-font', '.options')">
+                  <span class="select" title="字体">{{ formState.family }}</span>
+                  <div class="options">
+                    <ul>
+                      <li v-for="item in fontStyleOption" :data-family="item.value" :style="{ 'font-family': item.value}" @click="font(item.value, item.label)">{{ item.label }}</li>
+                    </ul>
+                  </div>
+                </div>
+                <div title="字号" class="jeecg-menu-item-size" @click="fontFamilyClick('.jeecg-menu-item-size', '.options')">
+                  <span class="select" title="字体">{{ formState.size }}</span>
+                  <div class="options">
+                    <ul>
+                      <li v-for="item in fontSizeOption" :data-size="item.value" @click="fontSize(item.value, item.label)">{{ item.label }}</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-size-add" :title="`增大字号(${isApple ? '⌘' : 'Ctrl'}+[)`" @click="sizeAdd">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-size-minus" :title="`减小字号(${isApple ? '⌘' : 'Ctrl'}+])`" @click="sizeMinus">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-bold" :title="`加粗(${isApple ? '⌘' : 'Ctrl'}+B)`" @click="blob">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-italic" :title="`斜体(${isApple ? '⌘' : 'Ctrl'}+I)`" @click="itailc">
+                  <i />
+                </div>
+                <div
+                  class="jeecg-menu-item-underline"
+                  :title="`下划线(${isApple ? '⌘' : 'Ctrl'}+U)`"
+                  @click="fontFamilyClick('.jeecg-menu-item-underline', '.options')"
+                >
+                  <i @click.stop="underline('')" />
+                  <span class="select" />
+                  <div class="options">
+                    <ul>
+                      <li v-for="item in underlineOptions" :data-decoration-style="item.value" @click.stop="underline(item.value)">
+                        <i />
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-strikeout" title="删除线(Ctrl+Shift+X)" @click="strikeout">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-superscript" :title="`上标(${isApple ? '⌘' : 'Ctrl'}+Shift+,)`" @click="superscript">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-subscript" :title="`下标(${isApple ? '⌘' : 'Ctrl'}+Shift+.)`" @click="subscript">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-color" title="字体颜色" @click="colorClick">
+                  <i />
+                  <span />
+                  <input id="color" ref="colorRef" type="color" @input="color">
+                </div>
+                <div class="jeecg-menu-item-highlight" title="高亮" @click="highLightColorClick">
+                  <i />
+                  <span />
+                  <input id="highlight" type="color">
+                </div>
+                <div class="jeecg-menu-item-cellcolor" title="单元格颜色" @click="cellColorClick">
+                  <i />
+                  <!-- <span></span> -->
+                  <input ref="cellColorRef" id="cellcolor" type="color" @input="cellColor">
+                </div>
+              </div>
+              <a-divider type="vertical" style="border-inline-start: 1px solid #cfd2d8; height: 20px" />
+              <div class="menu-item">
+                <div class="jeecg-menu-item-title" @click="fontFamilyClick('.jeecg-menu-item-title', '.options')">
+                  <i class="page-mode-i"/>
+                  <span class="select" title="切换标题">{{formState.title}}</span>
+                  <div class="options">
+                    <ul>
+                      <li v-for="(item,index) in titleOptions" style="font-size: 16px" :title="`Ctrl+${isApple ? 'Option' : 'Alt'}+${index}`" :data-level="item.value" :style="{fontSize: item.fontSize}" @click="title(item.value)">{{item.label}}</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-left" title="左对齐" @click="leftAlign" :title="`左对齐(${isApple ? '⌘' : 'Ctrl'}+L)`">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-center" title="居中" @click="centerAlign" :title="`居中对齐(${isApple ? '⌘' : 'Ctrl'}+E)`">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-right" title="右对齐" @click="rightAlign" :title="`右对齐(${isApple ? '⌘' : 'Ctrl'}+R)`">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-alignment" title="两端对齐" @click="alignmentAlign" :title="`两端对齐(${isApple ? '⌘' : 'Ctrl'}+J)`">
+                  <i />
+                </div>
+                <div class="jeecg-menu-item-row-margin" @click="fontFamilyClick('.jeecg-menu-item-row-margin', '.options')">
+                  <i title="行间距" class="page-mode-i" />
+                  <div class="options">
+                    <ul>
+                      <li v-for="item in marginOptions" :data-rowmargin="item.value" @click="rowMargin(item.value)">{{item.label}}</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-list" @click="fontFamilyClick('.jeecg-menu-item-list', '.options')">
+                  <i class="page-mode-i" />
+                  <div class="options" :title="`列表(${isApple ? '⌘' : 'Ctrl'}+Shift+U)`">
+                    <ul>
+                      <li  @click="list(null,null)">
+                        <span>取消列表</span>
+                      </li>
+                      <li data-list-type="ol" data-list-style="decimal" @click="list('ol','decimal')">
+                        <span>有序列表：</span>
+                        <ol>
+                          <li>________</li>
+                        </ol>
+                      </li>
+                      <li data-list-type="ul" data-list-style="disc" @click="list('ul','disc')">
+                        <span>实心圆点列表：</span>
+                        <ul style="list-style-type: disc !important;">
+                          <li>________</li>
+                        </ul>
+                      </li>
+                      <li data-list-type="ul" data-list-style="circle" @click="list('ul','circle')">
+                        <span>空心圆点列表：</span>
+                        <ul style="list-style-type: circle !important;">
+                          <li>________</li>
+                        </ul>
+                      </li>
+                      <li data-list-type="ul" data-list-style="square" @click="list('ul','square')">
+                        <span>空心方块列表：</span>
+                        <ul style="list-style-type: square !important;">
+                          <li>________</li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <a-divider type="vertical" style="border-inline-start: 1px solid #cfd2d8; height: 20px" />
+              <div class="menu-item">
+                <!-- <div class="jeecg-menu-item-chart">
+                   <i title="图表" />
+                 </div>-->
+                <div class="jeecg-menu-item-table" @click="tableClick">
+                  <i title="表格" class="page-mode-i"/>
+                </div>
+                <div class="jeecg-menu-item-table-collapse page-mode-i" style="display: none">
+                  <div class="table-close" @click="recoveryTable">×</div>
+                  <div class="table-title page-mode-i" >
+                    <span class="table-select page-mode-i">插入</span>
+                    <span class="page-mode-i">表格</span>
+                  </div>
+                  <div class="table-panel page-mode-i" @mousemove="tableMousemove" @click="tableCellClick"/>
+                </div>
+                <div class="jeecg-menu-item-image" @click="uploadImage">
+                  <i title="图片" />
+                  <input
+                    ref="uploadImageRef"
+                    id="image"
+                    type="file"
+                    accept=".png, .jpg, .jpeg, .svg, .gif"
+                    @change="uploadImageChange"
+                  >
+                </div>
+                <!--<div class="jeecg-menu-item-barcode">
+                  <i title="条形码" />
+                </div>
+                <div class="jeecg-menu-item-qrcode">
+                  <i title="二维码" />
+                </div>-->
+                <div class="jeecg-menu-item-hyperlink" @click="hyperlinkClick">
+                  <i title="超链接" />
+                </div>
+                <div class="jeecg-menu-item-separator" @click.stop="separatorClick">
+                  <i title="分割线" class="page-mode-i"/>
+                  <div class="options page-mode-i">
+                    <ul>
+                      <li class="page-mode-i" v-for="item in separatorOption" :data-separator="item.value" @click.stop="separatorActiveClick(item.value)">
+                        <i />
+                      </li>
+                    </ul>
+                    <div class="more page-mode-i">
+                      <div class="page-mode-i">颜色:<a-input @click.stop="" type="color" class="page-mode-i color" v-model:value="formState.separatorColor"/></div>
+                      <div class="page-mode-i">粗细(px):<a-input-number @click.stop="" type="tel" class="page-mode-i lineWidth"  v-model:value="formState.separatorLineWidth"/></div>
+                      <div class="page-mode-i" style="margin-top: 10px;">
+                        <a-button size="small" type="primary" @click.prevent.stop="separatorOk">确定</a-button>
+                        <a-button @click.prevent.stop="separatorCancel" size="small" style="margin-left: 6px">取消</a-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-watermark" @click="fontFamilyClick('.jeecg-menu-item-watermark', '.options')">
+                  <i title="水印(添加、删除)" class="page-mode-i"/>
+                  <div class="options">
+                    <ul>
+                      <li data-menu="add" @click="addWatermarkClick">添加水印</li>
+                      <li data-menu="delete" @click="deleteWatermarkClick">删除水印</li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="jeecg-menu-item-page-break" title="分页符" @click="pageBreak">
+                  <i />
+                </div>
+              </div>
+              <a-divider type="vertical" style="border-inline-start: 1px solid #cfd2d8; height: 20px" />
+              <div class="menu-item">
+                <div :title="`搜索与替换(${isApple ? '⌘' : 'Ctrl'}+F)`" class="jeecg-menu-item-search" data-menu="search" title="查找替换" @click="searchClick">
+                  <i class="page-mode-i"/>
+                </div>
+                <div class="jeecg-menu-item-search-collapse" data-menu="search" style="display: none">
+                  <div class="jeecg-menu-item-search-collapse-search">
+                    <input type="text" @input="searchInput" @keydown="searchKeyDown">
+                    <label class="search-result" />
+                    <div class="arrow-left" @click="arrowLeft">
+                      <i />
+                    </div>
+                    <div class="arrow-right" @click="arrowRight">
+                      <i />
+                    </div>
+                    <span @click="closeSearch">×</span>
+                  </div>
+                  <div class="jeecg-menu-item-search-collapse-replace">
+                    <input type="text">
+                    <button @click="replaceText">替换</button>
+                  </div>
+                </div>
+                <div :title="`打印(${isApple ? '⌘' : 'Ctrl'}+P)`" class="jeecg-menu-item-print" data-menu="print" title="打印" @click="printTemplate">
+                  <i />
+                </div>
+              </div>
+            </div>
+            <div class="catalog" editor-component="catalog">
+              <div class="jeecg-catalog-header">
+                <span>目录</span>
+                <div class="jeecg-catalog-header-close" @click="closeDirectory">
+                  <i />
+                </div>
+              </div>
+              <div class="jeecg-catalog-main" />
+            </div>
+            <div class="editor-container">
+              <div class="jeecg__editor" />
+            </div>
+          </div>
+        </a-layout-content>
+        <a-layout-footer>
+          <div class="footer" editor-component="footer">
+            <div>
+              <div class="catalog-mode" title="目录" @click="openDirectory">
+                <i />
+              </div>
+              <div class="page-mode" @click="fontFamilyClick('.page-mode', '.options')">
+                <i title="页面模式(分页、连页)" class="page-mode-i"/>
+                <div class="options">
+                  <ul>
+                    <li v-for="item in pageModeOptions" :data-page-mode="item.value" :class="item.value === 'paging'?'active':''" @click="pageMode(item.value)">{{item.label}}</li>
+                  </ul>
+                </div>
+              </div>
+              <span>可见页码：<span class="page-no-list">1</span></span>
+              <span>页面：<span class="page-no">1</span>/<span class="page-size" >1</span></span>
+              <span>字数：<span class="word-count">0</span></span>
+            </div>
+            <div>
+              <div class="page-scale-minus" title="缩小(Ctrl+-)" @click="scaleMiuns">
+                <i />
+              </div>
+              <span
+                class="page-scale-percentage"
+                title="显示比例(点击可复原Ctrl+0)"
+              >100%</span>
+              <div class="page-scale-add" title="放大(Ctrl+=)" @click="scaleAdd">
+                <i />
+              </div>
+              <div class="paper-size" @click="fontFamilyClick('.paper-size', '.options')">
+                <i title="纸张类型" class="page-mode-i"/>
+                <div class="options" title="纸张大小">
+                  <ul>
+                    <li v-for="item in paperSizeOption" :data-paper-size="item.value" :class="item.label === 'A4'?'active':''" @click="paperSize(item.value)">{{item.label}}</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="paper-direction" @click="fontFamilyClick('.paper-direction', '.options')">
+                <i title="纸张方向" class="page-mode-i"/>
+                <div class="options">
+                  <ul>
+                    <li v-for="item in paperDirectionOptions" :data-paper-direction="item.value" :class="item.value == 'vertical'?'active':''" @click="paperDirection(item.value)">{{item.label}}</li>
+                  </ul>
+                </div>
+              </div>
+              <div class="paper-margin" title="页边距" @click="paperMarginClick">
+                <i />
+              </div>
+              <div class="fullscreen" title="全屏显示">
+                <i />
+              </div>
+            </div>
+          </div>
+        </a-layout-footer>
+      </a-layout>
+    </div>
+    <!--  页边距  -->
+    <PagerMarginDrawer @register="registerPagerMarginDrawer" @ok="setPaperMargin"></PagerMarginDrawer>
+    <!--  高亮颜色  -->
+    <HighlightColorModal @register="registerHighlightColorModal" @ok="setHighlightColor"></HighlightColorModal>
+    <!--  超链接  -->
+    <HyperlinkDrawer @register="registerHyperlinkDrawer" @ok="setHyperlink"></HyperlinkDrawer>
+    <!--  水印  -->
+    <WatermarkDrawer @register="registerWatermarkDrawer" @ok="setWatermark"></WatermarkDrawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Loading } from '/@/components/Loading';
+  import { nextTick, onUnmounted, ref } from 'vue';
+  import { createEditor, method } from '@/components/wordtpl/DocDesign';
+  import PagerMarginDrawer from './components/PagerMarginDrawer.vue'
+  import HyperlinkDrawer from './components/HyperlinkDrawer.vue'
+  import WatermarkDrawer from './components/WatermarkDrawer.vue'
+  import HighlightColorModal from './components/HighlightColorModal.vue'
+  import { useDrawer } from "@/components/Drawer";
+  import { defHttp } from "@/utils/http/axios";
+  import { getFileAccessHttpUrl } from "@/utils/common/compUtils";
+  import { useModal } from "@/components/Modal";
+  
+  const props = defineProps({
+    //内容（包含图片、页眉、页脚）
+    content: { type: Object, default: {} },
+    //图片上传路径
+    uploadImageUrl: { type: String, default: '/sys/common/upload' },
+    //文件上传路径
+    uploadFileUrl: { type: String, default: '/wordtpl/template/parse/file' },
+  });
+
+  let emit = defineEmits(['download', 'save']);
+  
+  //字体样式
+  const fontStyleOption = [
+    { label: '微软雅黑', value: 'Microsoft YaHei' },
+    { label: '宋体', value: '宋体' },
+    { label: '黑体', value: '黑体' },
+    { label: '仿宋', value: '仿宋' },
+    { label: '楷体', value: '楷体' },
+    { label: '等线', value: '等线' },
+    { label: '华文琥珀', value: '华文琥珀' },
+    { label: '华文楷体', value: '华文楷体' },
+    { label: '华文隶书', value: '华文隶书' },
+    { label: '华文新魏', value: '华文新魏' },
+    { label: '华文行楷', value: '华文行楷' },
+    { label: '华文中宋', value: '华文中宋' },
+    { label: '华文彩云', value: '华文彩云' },
+    { label: 'Arial', value: 'Arial' },
+    { label: 'Segoe UI', value: 'Segoe UI' },
+    { label: 'Ink Free', value: 'Ink Free' },
+    { label: 'Fantasy', value: 'Fantasy' },
+  ];
+
+  //字体
+  const fontSizeOption = [
+    { label: '初号', value: '56' },{ label: '小初', value: '48' },{ label: '一号', value: '34' },{ label: '小一', value: '32' },
+    { label: '二号', value: '29' },{ label: '小二', value: '24' }, { label: '三号', value: '21' }, { label: '小三', value: '20' },
+    { label: '四号', value: '18' }, { label: '小四', value: '16' }, { label: '五号', value: '14' },  { label: '小五', value: '12' },
+    { label: '六号', value: '10' },{ label: '小六', value: '8' },  { label: '七号', value: '7' },  { label: '八号', value: '6' },
+    { label: '5', value: '5' }, { label: '9', value: '9' },{ label: '13', value: '13' },{ label: '15', value: '15' },
+    { label: '17', value: '17' }, { label: '19', value: '19' },{ label: '23', value: '23' },{ label: '25', value: '25' },
+    { label: '26', value: '26' }, { label: '27', value: '27' },{ label: '30', value: '30' },{ label: '31', value: '31' },
+    { label: '33', value: '33' },  { label: '35', value: '35' },{ label: '36', value: '36' },{ label: '37', value: '37' },
+    { label: '38', value: '38' }, { label: '39', value: '39' },{ label: '40', value: '40' },{ label: '41', value: '41' },
+    { label: '42', value: '42' }, { label: '43', value: '43' },{ label: '44', value: '44' },{ label: '45', value: '45' },
+    { label: '46', value: '46' }, { label: '47', value: '47' },{ label: '50', value: '50' },{ label: '51', value: '51' },
+    { label: '52', value: '52' }, { label: '52', value: '52' },{ label: '54', value: '54' },{ label: '57', value: '57' },
+    { label: '58', value: '58' }, { label: '59', value: '59' },{ label: '60', value: '60' },{ label: '60', value: '60' },
+    { label: '62', value: '62' }, { label: '63', value: '63' },{ label: '64', value: '64' },{ label: '65', value: '65' },
+    { label: '66', value: '66' },{ label: '67', value: '67' },{ label: '68', value: '68' },{ label: '69', value: '69' },
+    { label: '70', value: '70' },{ label: '71', value: '71' },{ label: '72', value: '72' }
+  ];
+
+  //下划线
+  const underlineOptions = [
+    { label: 'solid', value: 'solid' },
+    { label: 'double', value: 'double' },
+    { label: 'dashed', value: 'dashed' },
+    { label: 'dotted', value: 'dotted' },
+    { label: 'wavy', value: 'wavy' },
+  ];
+  
+  //标题
+  const titleOptions = [
+    { label: '正文', value: null, fontSize: '16px' },
+    { label: '标题1', value: 'first', fontSize: '26px' },
+    { label: '标题2', value: 'second', fontSize: '24px' },
+    { label: '标题3', value: 'third', fontSize: '22px' },
+    { label: '标题4', value: 'fourth', fontSize: '20px' },
+    { label: '标题5', value: 'fifth', fontSize: '18px' },
+    { label: '标题6', value: 'sixth', fontSize: '16px' },
+  ];
+  
+  //行间距
+  const marginOptions = [
+    { label: '1', value: '1' },
+    { label: '1.25', value: '1.25' },
+    { label: '1.5', value: '1.5' },
+    { label: '1.75', value: '1.75' },
+    { label: '2', value: '2' },
+    { label: '2.5', value: '2.5' },
+    { label: '3', value: '3' },
+  ]
+  
+  //分割线
+  const separatorOption = [
+    { label: '0,0', value: '0,0' },
+    { label: '1,1', value: '1,1' },
+    { label: '3,1', value: '3,1' },
+    { label: '4,4', value: '4,4' },
+    { label: '7,3,3,3', value: '7,3,3,3' },
+    { label: '6,2,2,2,2,2', value: '6,2,2,2,2,2' },
+  ]
+  
+  //纸张大小
+  const paperSizeOption = [
+    { label: 'A4', value: '794*1123' },
+    { label: 'A2', value: '1593*2251' },
+    { label: 'A3', value: '1125*1593' },
+    { label: 'A5', value: '565*796' },
+    { label: '5号信封', value: '412*488' },
+    { label: '6号信封', value: '450*866' },
+    { label: '7号信封', value: '609*862' },
+    { label: '9号信封', value: '862*1221' },
+    { label: '法律用纸', value: '813*1266' },
+    { label: '信纸', value: '813*1054' },
+  ]
+  
+  //页面模式
+  const pageModeOptions = [
+    { label: '分页', value: 'paging' },
+    { label: '连页', value: 'continuity' },
+  ]  
+  
+  //纸张方向
+  const paperDirectionOptions = [
+    { label: '纵向', value: 'vertical' },
+    { label: '横向', value: 'horizontal' },
+  ]
+
+  //加载状态
+  const loading = ref<boolean>(false);
+  let { formState, save, clearFormat, undo, redo, isApple, painterClick, painterDblClick, font, 
+    fontSize, sizeAdd, sizeMinus, blob, itailc, underline, strikeout, superscript, subscript,
+    color, pageMode, scaleAdd, scaleMiuns, paperSize, paperDirection, printTemplate, getPaperMargin,
+    setPaperMargin, updateCatalog, setWordImage, setWordContent, leftAlign, centerAlign, rightAlign, alignmentAlign,
+    rowMargin, pageBreak, cellColor, setHighlightColor, title, list, tabCell, separator, setHyperlink, getHyperlink,
+    setWatermark, deleteWatermarkClick, arrowLeft, arrowRight, searchInput, searchKeyDown, replaceText, closeSearch } = method();
+  //颜色的ref
+  const colorRef = ref();
+  initEditor();
+  //字体option
+  const fontOptionDom = ref<any>();
+  //字体大小option
+  const sizeOptionDom = ref<any>();
+  //下划线option
+  const underlineOptionDom = ref<any>();
+  //页面模式option
+  const pageModeOptionDom = ref<any>();
+  //纸张大小option
+  const paperSizeOptionDom = ref<any>();
+  //纸张方向option
+  const paperDirectionOptionDom = ref<any>();
+  //行间距option
+  const rowMarginOptionDom = ref<any>();
+  //标题Option
+  const titleOptionDom = ref<any>();
+  //列表Option
+  const listOptionDom = ref<any>();
+  //table折叠层
+  const tableCollapseDom = ref<any>();
+  //分割线
+  const separatorOptionDom = ref<any>();
+  //水印
+  const watermarkOptionDom = ref<any>();
+  //查找替换
+  const searchCollapseDom = ref<any>();
+  //边距的Drawer
+  const [registerPagerMarginDrawer, { openDrawer: openMarginDrawer }] = useDrawer();
+  //超链接的Drawer
+  const [registerHyperlinkDrawer, { openDrawer: openHyperlinkDrawer }] = useDrawer();
+  //水印的Drawer
+  const [registerWatermarkDrawer, { openDrawer: openHyperWatermarkDrawer }] = useDrawer();
+  //上传图片的ref
+  const uploadImageRef = ref();
+  //上传文件的ref
+  const uploadWordFileRef = ref();
+  //单元格背景色ref
+  const cellColorRef = ref();
+  //单元格列的数组
+  const tableCellList = ref<any>([]);
+  //当前第几行
+  const rowIndex = ref<number>(0);
+  //当前第几列
+  const colIndex = ref<number>(0);
+  //弹窗model
+  const [registerHighlightColorModal, { openModal: openHighlightColorModal }] = useModal();
+  
+  function initEditor() {
+    setTimeout(() => {
+      const fontDom: any = document.querySelector('.jeecg-menu-item-font');
+      fontOptionDom.value = fontDom.querySelector('.options');
+      //字体大小
+      const jeecgSizeDom: any = document.querySelector('.jeecg-menu-item-size');
+      sizeOptionDom.value = jeecgSizeDom.querySelector('.options');
+      //下划线
+      const underlineDom: any = document.querySelector('.jeecg-menu-item-underline');
+      underlineOptionDom.value = underlineDom.querySelector('.options');   
+      //分页
+      const pageModeDom: any = document.querySelector('.page-mode');
+      pageModeOptionDom.value = pageModeDom.querySelector('.options');
+      //分页
+      const pageSizeDom: any = document.querySelector('.paper-size');
+      paperSizeOptionDom.value = pageSizeDom.querySelector('.options');
+      //纸张方向
+      const paperDirectionDom: any = document.querySelector('.paper-direction');
+      paperDirectionOptionDom.value = paperDirectionDom.querySelector('.options'); 
+      //行间距
+      const rowMarginDom: any = document.querySelector('.jeecg-menu-item-row-margin');
+      rowMarginOptionDom.value = rowMarginDom.querySelector('.options');
+      //标题
+      const titleDom: any = document.querySelector('.jeecg-menu-item-title');
+      titleOptionDom.value = titleDom.querySelector('.options');
+      //列表
+      const listDom: any = document.querySelector('.jeecg-menu-item-list');
+      listOptionDom.value = listDom.querySelector('.options'); 
+      //表格
+      tableCollapseDom.value = document.querySelector('.jeecg-menu-item-table-collapse');
+      //分割线
+      let separatorDom:any = document.querySelector('.jeecg-menu-item-separator');
+      separatorOptionDom.value = separatorDom.querySelector('.options');
+      //水印
+      let watermarkDom:any = document.querySelector('.jeecg-menu-item-watermark');
+      watermarkOptionDom.value = watermarkDom.querySelector('.options');
+      //查找替换
+      searchCollapseDom.value = document.querySelector('.jeecg-menu-item-search-collapse');
+      
+      setTableStyle()
+      createEditor(props.content);
+      // 组件挂载后添加事件监听器
+      document.addEventListener('click', handleClickOutside);
+      //监听Ctrl或Cmd键和S键事件
+      document.addEventListener('keydown', handleKeyDown);
+    }, 300);
+  }
+
+  /**
+   * 下拉框点击事件
+   */
+  function fontFamilyClick(parentClass, childrenClass) {
+    const font: any = document.querySelector(parentClass);
+    const fontOption = font.querySelector(childrenClass);
+    if (parentClass === '.jeecg-menu-item-font') {
+      hiddenVisible('font');
+    } else if (parentClass === '.jeecg-menu-item-size') {
+      hiddenVisible('size');
+    } else if (parentClass === '.jeecg-menu-item-underline') {
+      hiddenVisible('underline');
+    } else if(parentClass === '.page-mode'){
+      hiddenVisible('pageMode');
+    } else if(parentClass === '.paper-size'){
+      hiddenVisible('paperSize');
+    } else if(parentClass === '.paper-direction'){
+      hiddenVisible('paperDirection');
+    } else if(parentClass === '.jeecg-menu-item-row-margin'){
+      hiddenVisible('rowMargin');
+    }else if(parentClass === '.jeecg-menu-item-title'){
+      hiddenVisible('title');
+    }else if(parentClass === '.jeecg-menu-item-list'){
+      hiddenVisible('list');
+    }else if(parentClass === '.jeecg-menu-item-separator'){
+      hiddenVisible('separator');
+    }else if(parentClass === '.jeecg-menu-item-watermark'){
+      hiddenVisible('watermark');
+    }
+    fontOption.classList.toggle('visible');
+    setDropdownContentPosition(font, fontOption);
+  }
+
+  /**
+   * 动态设置展开面板的位置
+   * @param parentNode
+   * @param dropdownNode
+   */
+  function setDropdownContentPosition(parentNode, dropdownNode) {
+    const dropdownContent = dropdownNode;
+    const rect = parentNode.getBoundingClientRect();
+    const screenWidth = window.innerWidth;
+    dropdownContent.style.top = `${rect.bottom}px`;
+    dropdownContent.style.left = `${rect.left}px`;
+    if (rect.left + dropdownContent.offsetWidth > screenWidth) {
+      dropdownContent.style.left = `${rect.right - dropdownContent.offsetWidth}px`;
+    }
+  }
+
+  /**
+   * 监听关闭事件
+   * @param event
+   */
+  const handleClickOutside = (event) => {
+    if (!event.target.closest('.select') && !event.target.closest(".page-mode-i")) {
+      hiddenVisible();
+    }
+  };
+
+  /**
+   * 颜色点击事件
+   */
+  function colorClick() {
+    colorRef.value.click();
+  }
+
+  /**
+   * 导出模板
+   */
+  function downloadTemplate() {
+    emit('download', props.content);
+  }
+
+  /**
+   * 保存
+   */
+  function saveTemplate() {
+    let saveData = save();
+    const params = Object.assign(props.content, saveData);
+    emit('save', params);
+  }
+
+  /**
+   * 隐藏下拉框的显示
+   * 
+   * @param value
+   */
+  function hiddenVisible(value = ''){
+      if(!value || value !== 'font'){
+        fontOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'size'){
+        sizeOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'underline'){
+        underlineOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'pageMode'){
+        pageModeOptionDom.value.classList.remove('visible');
+      }   
+      if(!value || value !== 'paperSize'){
+        paperSizeOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'paperDirection'){
+        paperDirectionOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'rowMargin'){
+        rowMarginOptionDom.value.classList.remove('visible');
+      }  
+      if(!value || value !== 'title'){
+        titleOptionDom.value.classList.remove('visible');
+      } 
+      if(!value || value !== 'list'){
+        listOptionDom.value.classList.remove('visible');
+      }
+      if(!value || value !== 'table'){
+        recoveryTable();
+      } 
+      if(!value || value !== 'separator'){
+        separatorOptionDom.value.classList.remove('visible');
+      } 
+      if(!value || value !== 'watermark'){
+        watermarkOptionDom.value.classList.remove('visible');
+      }
+  }
+
+  /**
+   * 边距点击事件
+   */
+  function paperMarginClick() {
+    let values = getPaperMargin();
+    openMarginDrawer(true,{
+      ...values
+    })
+  }
+
+  /**
+   * 打开目录
+   */
+  function openDirectory() {
+    const catalogDom:any = document.querySelector('.catalog');
+    catalogDom.style.display = 'block';
+    formState.showCataLogDom = true;
+    updateCatalog();
+  }
+  
+  /**
+   * 关闭目录
+   */
+  function closeDirectory() {
+    const catalogDom:any = document.querySelector('.catalog');
+    formState.showCataLogDom = false;
+    catalogDom.style.display = 'none';
+  }
+  
+  /**
+   * 图片上传
+   */
+  function uploadImage(){
+    uploadImageRef.value.click();
+  }
+  //图片上传成功事件
+  const uploadImageSuccess = (fileInfo) => {
+    if(fileInfo.success){
+      let fileUrl = getFileAccessHttpUrl(fileInfo.message);
+      setWordImage(fileUrl);
+    }
+  }
+  
+  /**
+   * 文件上传改变事件
+   * @param e
+   */
+  function uploadImageChange(e) {
+    let file = e.target.files[0];
+    defHttp.uploadFile({ url: props.uploadImageUrl },  { file: file, filename: file.name, data: { biz: 'word' } }, { success: uploadImageSuccess });
+  }
+
+  //文件上传成功事件
+  const uploadFileSuccess = (fileInfo) => {
+    if(fileInfo.success){
+      setWordContent(fileInfo.result);
+    }
+  }
+  
+  /**
+   * 上传文件
+   */
+  function uploadWordFile() {
+    uploadWordFileRef.value.click();
+  }
+
+  /**
+   * 上传文件change
+   * @param e
+   */
+  function uploadDocxChange(e) {
+    let file = e.target.files[0];
+    defHttp.uploadFile({ url: props.uploadFileUrl },  { file: file, filename: file.name }, { success: uploadFileSuccess });
+  }
+
+  /**
+   * 单元格背景色点击事件
+   */
+  function cellColorClick() {
+    cellColorRef.value.click();
+  }
+
+  /**
+   * 高亮颜色点击事件爱你
+   */
+  function highLightColorClick() {
+    openHighlightColorModal(true,{
+      highlightColor:formState.highlightColor
+    })
+  }
+
+  /**
+   * 设置table9*9样式
+   */
+  function setTableStyle() {
+    const tablePanel:any = document.querySelector('.table-panel');
+    // 绘制行列
+    tableCellList.value = []
+    for (let i = 0; i < 10; i++) {
+      const tr = document.createElement('tr');
+      tr.classList.add('table-row');
+      const trCellList = []
+      for (let j = 0; j < 10; j++) {
+        const td = document.createElement('td');
+        td.classList.add('table-cel');
+        tr.append(td);
+        trCellList.push(td);
+      }
+      tablePanel.append(tr);
+      tableCellList.value.push(trCellList);
+    }
+  }
+  /**
+   * 表格点击事件
+   */
+  function tableClick() {
+    hiddenVisible('table');
+    const tableDom = document.querySelector('.jeecg-menu-item-table');
+    tableCollapseDom.value.style.display = 'block';
+    setDropdownContentPosition(tableDom, tableCollapseDom.value);
+  }
+
+  /**
+   * 移除所有格选择
+   */
+  function removeAllTableCellSelect() {
+    tableCellList.value.forEach(tr => {
+      tr.forEach(td => td.classList.remove('active'))
+    })
+  }
+
+  /**
+   * 设置标题内容
+   * @param payload
+   */
+  function setTableTitle(payload) {
+    const tableTitle:any = document.querySelector('.table-select');
+    tableTitle.innerText = payload;
+  }
+
+  /**
+   * 恢复初始状态
+   */
+  function recoveryTable() {
+    // 还原选择样式、标题、选择行列
+    removeAllTableCellSelect()
+    setTableTitle('插入')
+    colIndex.value = 0
+    rowIndex.value = 0
+    // 隐藏panel
+    tableCollapseDom.value.style.display = 'none';
+  }
+
+  /**
+   * 表格鼠标移动事件
+   * @param evt
+   */
+  function tableMousemove(evt) {
+    const celSize = 16;
+    const rowMarginTop = 10;
+    const celMarginRight = 6;
+    const { offsetX, offsetY } = evt;
+    // 移除所有选择
+    removeAllTableCellSelect()
+    colIndex.value = Math.ceil(offsetX / (celSize + celMarginRight)) || 1;
+    rowIndex.value = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1;
+    // 改变选择样式
+    tableCellList.value.forEach((tr, trIndex) => {
+      tr.forEach((td, tdIndex) => {
+        if (tdIndex < colIndex.value && trIndex < rowIndex.value) {
+          td.classList.add('active');
+        }
+      })
+    })
+    // 改变表格标题
+    setTableTitle(`${rowIndex.value}×${colIndex.value}`);
+  }
+
+  /**
+   * table单元格单击事件
+   */
+  function tableCellClick() {
+    tabCell(rowIndex.value,colIndex.value,recoveryTable);
+  }
+
+  /**
+   * 超链接点击事件
+   */
+  function hyperlinkClick() {
+    let hyperlink = getHyperlink();
+    openHyperlinkDrawer(true,{
+      ...hyperlink
+    })
+  }
+
+  /**
+   * 添加水印
+   */
+  function addWatermarkClick(){
+    openHyperWatermarkDrawer(true,{});
+  }
+
+  /**
+   * 查找点击事件
+   */
+  function searchClick() {
+    searchCollapseDom.value.style.display = 'block';
+    const searchDom:any =document.querySelector('.jeecg-menu-item-search');
+    const searchInputDom:any = document.querySelector('.jeecg-menu-item-search-collapse-search input')
+    const searchCollapseRect = searchCollapseDom.value.getBoundingClientRect();
+    const bodyRect = document.body.getBoundingClientRect();
+    const searchRect = searchDom.getBoundingClientRect();
+    if (searchRect.left + searchCollapseRect.width > bodyRect.width) {
+      searchCollapseDom.value.style.right = '0px';
+      searchCollapseDom.value.style.left = 'unset';
+    } else {
+      searchCollapseDom.value.style.right = 'unset';
+      searchCollapseDom.value.style.left = searchRect.left + 'px';
+    }
+    searchInputDom.focus();
+  }
+
+
+  /**
+   * 检查是否按下了Ctrl或Cmd键和S键
+   * @param event
+   */
+  function handleKeyDown(event) {
+    // 检查是否按下了Ctrl或Cmd键和S键
+    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+      event.preventDefault();
+      //保存
+      saveTemplate();
+    }
+  }
+
+  //是否显示输入框
+  const showInput = ref<boolean>(false);
+  //标题输入框
+  const nameRef = ref();
+  
+  /**
+   * 显示或隐藏输入框
+   */
+  function showInputClick() {
+    showInput.value = true;
+    nextTick(()=>{
+      nameRef.value.focus();
+      nameRef.value.select();
+    })
+  }
+
+  /**
+   * 保存模板名称事件
+   */
+  function saveTemplateNameClick() {
+    showInput.value = false;
+    let saveData = save();
+    if(formState.name != props.content.name){
+      const params = Object.assign(props.content, saveData, { name: formState.name });
+      emit('save', params);
+    }
+  }
+
+  /**
+   * 分隔符点击事件
+   */
+  function separatorClick() {
+    hiddenVisible('separator');
+    const separator: any = document.querySelector(".jeecg-menu-item-separator");
+    const separatorOption = separator.querySelector(".options");
+    separatorOption.classList.add('visible');
+    setDropdownContentPosition(separator, separatorOption);
+  }
+
+  /**
+   * 分割线确定事件
+   */
+  function separatorOk() {
+    const separators: any = document.querySelector(".jeecg-menu-item-separator");
+    const separatorOption = separators.querySelector(".options");
+    separatorOption.classList.remove('visible');
+    console.log("我进来了1111")
+    separator();
+  }
+  
+  /**
+   * 分割线取消事件
+   */
+  function separatorCancel() {
+    separatorOptionDom.value.classList.remove('visible');
+    formState.separatorColor = '#000000';
+    formState.separatorLineWidth = 1;
+    formState.separator = '0,0';
+    separatorOptionDom.value.querySelectorAll('li') .forEach(li => li.classList.remove('active'));
+  }
+
+  /**
+   * 分割线下拉选中事件
+   * @param value
+   */
+  function separatorActiveClick(value) {
+    separatorOptionDom.value.querySelectorAll('li') .forEach(li => li.classList.remove('active'));
+    const curSeparatorDom:any = separatorOptionDom.value.querySelector(`[data-separator='${value}']`);
+    if (curSeparatorDom) {
+      formState.separator = value;
+      curSeparatorDom.classList.add('active');
+    }
+  }
+  
+  
+  onUnmounted(() => {
+    // 组件卸载前移除事件监听器，防止内存泄漏
+    document.removeEventListener('click', handleClickOutside);
+    // 移出键盘事件
+    document.removeEventListener('keydown', handleKeyDown);
+  });
+</script>
+
+<style scoped lang="scss" src="./style/DocDesign.css"></style>
diff --git a/src/components/wordtpl/canvas-editor.js b/src/components/wordtpl/canvas-editor.js
new file mode 100644
index 0000000..b902dbc
--- /dev/null
+++ b/src/components/wordtpl/canvas-editor.js
@@ -0,0 +1,20683 @@
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.id="canvas-editor-style",e.appendChild(document.createTextNode('.ce-select-control-popup{max-width:160px;min-width:69px;max-height:225px;position:absolute;z-index:1;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px #0000001a;box-sizing:border-box;margin:5px 0;overflow-y:auto}.ce-select-control-popup ul{list-style:none;padding:3px 0;margin:0;box-sizing:border-box}.ce-select-control-popup ul li{font-size:13px;padding:0 20px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#666;height:36px;line-height:36px;box-sizing:border-box;cursor:pointer}.ce-select-control-popup ul li:hover{background-color:#eef2fd}.ce-select-control-popup ul li.active{color:var(--COLOR-HOVER, #5175f4);font-weight:700}.ce-date-container{display:none;width:300px;overflow:hidden;left:0;right:0;position:absolute;z-index:1;color:#606266;background:#ffffff;border-radius:4px;padding:10px;user-select:none;border:1px solid #e4e7ed;box-shadow:0 2px 12px #0000001a}.ce-date-container.active{display:block}.ce-date-wrap{display:none}.ce-date-wrap.active{display:block}.ce-date-title{display:flex;justify-content:center;align-items:center;text-align:center;color:#606266;font-size:16px}.ce-date-title>span{display:inline-block}.ce-date-title>span:not(.ce-date-title__now){font-family:cursive;cursor:pointer}.ce-date-title>span:not(.ce-date-title__now):hover{color:#5175f4}.ce-date-title .ce-date-title__pre-year,.ce-date-title .ce-date-title__pre-month{width:15%}.ce-date-title .ce-date-title__now{width:40%}.ce-date-title .ce-date-title__next-year,.ce-date-title .ce-date-title__next-month{width:15%}.ce-date-week{width:100%;display:flex;justify-content:center;margin-top:15px;padding-bottom:5px;border-bottom:1px solid #e4e7ed}.ce-date-week>span{list-style:none;width:calc(100%/7);text-align:center;color:#606266;font-size:14px}.ce-date-day{width:100%;display:flex;flex-wrap:wrap;align-items:center;margin-top:5px}.ce-date-day>div{width:calc(100%/7);height:40px;text-align:center;color:#606266;font-size:14px;cursor:pointer;line-height:40px;border-radius:4px}.ce-date-day>div:hover{color:#5175f4;opacity:.8}.ce-date-day>div.active{color:#5175f4;font-weight:700}.ce-date-day>div.disable{color:#c0c4cc}.ce-date-day>div.select{color:#fff;background-color:#5175f4}.ce-time-wrap{display:none;padding:10px;height:286px}.ce-time-wrap ::-webkit-scrollbar{width:0}.ce-time-wrap.active{display:flex}.ce-time-wrap li{list-style:none}.ce-time-wrap>li{width:33.3%;height:100%;text-align:center}.ce-time-wrap>li>span{transform:translateY(-5px);display:inline-block}.ce-time-wrap>li>ol{height:calc(100% - 20px);overflow-y:auto;border:1px solid #e2e2e2;position:relative}.ce-time-wrap>li:first-child>ol{border-right:0}.ce-time-wrap>li:last-child>ol{border-left:0}.ce-time-wrap>li>ol>li{line-height:30px;cursor:pointer;transition:all .3s}.ce-time-wrap>li>ol>li:hover{background-color:#eaeaea}.ce-time-wrap>li>ol>li.active{color:#fff;background:#5175F4}.ce-date-menu{width:100%;height:28px;display:flex;justify-content:flex-end;align-items:center;padding-top:10px;position:relative;border-top:1px solid #e4e7ed}.ce-date-menu button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;appearance:none;text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:500;user-select:none;padding:7px 15px;font-size:12px;border-radius:3px;margin:0 0 0 10px}.ce-date-menu button:hover{color:#5175f4;border-color:#5175f4}.ce-date-menu button.ce-date-menu__time{border:1px solid transparent;position:absolute;left:0;margin-left:0}.ce-date-menu button.ce-date-menu__time:hover{color:#5175f4}.ce-block-item{position:absolute;z-index:0;overflow:hidden;border-radius:8px;background-color:#fff;border:1px solid rgb(235 236 240)}.ce-table-tool__row{position:absolute;width:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed}.ce-table-tool__row .ce-table-tool__row__item{width:100%;position:relative}.ce-table-tool__row .ce-table-tool__row__item:after{content:"";position:absolute;bottom:0;left:2px;width:8px;height:1px;background-color:#c0c6cf}.ce-table-tool__row .ce-table-tool__row__item:last-child:after{display:none}.ce-table-tool__quick__add{width:16px;height:16px;position:absolute;border-radius:50%;background-color:#e2e6ed;cursor:pointer}.ce-table-tool__quick__add:after{content:"+";color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}.ce-table-tool__select{width:16px;height:18px;position:absolute;border-radius:3px;cursor:pointer}.ce-table-tool__select:hover{background-color:#e2e6ed}.ce-table-tool__select:after{content:":::";color:#aaaaab;position:absolute;top:50%;left:50%;transform:translate(-75%,-50%) rotate(-90deg)}.ce-table-tool__col{position:absolute;height:12px;border-radius:6.5px;overflow:hidden;background-color:#e2e6ed;display:flex}.ce-table-tool__col .ce-table-tool__col__item{height:100%;position:relative}.ce-table-tool__col .ce-table-tool__col__item:after{content:"";position:absolute;top:2px;left:-1px;width:1px;height:8px;z-index:1;background-color:#c0c6cf}.ce-table-tool__col .ce-table-tool__col__item:first-child:after{display:none}.ce-table-tool__row .ce-table-tool__row__item.active,.ce-table-tool__col .ce-table-tool__col__item.active{background-color:#c4d7fa}.ce-table-tool__col .ce-table-tool__anchor{right:-5px;width:10px;height:12px;z-index:9;position:absolute;cursor:col-resize}.ce-table-tool__row .ce-table-tool__anchor{bottom:-5px;left:0;width:12px;height:10px;z-index:9;position:absolute;cursor:row-resize}.ce-table-anchor__line{z-index:9;position:absolute;border:1px dotted #000000}.ce-table-tool__border{position:absolute;z-index:1;background:transparent;pointer-events:none}.ce-table-tool__border__row{position:absolute;cursor:row-resize;pointer-events:auto}.ce-table-tool__border__col{position:absolute;cursor:col-resize;pointer-events:auto}.ce-resizer-selection{position:absolute;border:1px solid;pointer-events:none}.ce-resizer-selection .resizer-handle{position:absolute;z-index:9;width:10px;height:10px;box-shadow:0 1px 4px #0000004d;border-radius:5px;border:2px solid #ffffff;box-sizing:border-box;pointer-events:initial}.ce-resizer-selection .handle-0{cursor:nw-resize}.ce-resizer-selection .handle-1{cursor:n-resize}.ce-resizer-selection .handle-2{cursor:ne-resize}.ce-resizer-selection .handle-3{cursor:e-resize}.ce-resizer-selection .handle-4{cursor:se-resize}.ce-resizer-selection .handle-5{cursor:s-resize}.ce-resizer-selection .handle-6{cursor:sw-resize}.ce-resizer-selection .handle-7{cursor:w-resize}.ce-resizer-size-view{display:flex;align-items:center;height:20px;white-space:nowrap;position:absolute;z-index:9;top:-30px;left:0;opacity:.9;background-color:#000;padding:0 5px;border-radius:4px}.ce-resizer-size-view span{color:#fff;font-size:12px}.ce-resizer-image{position:absolute;opacity:.5}.ce-image-previewer{position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;overflow:hidden;background:#f2f4f7;display:flex;align-items:center;justify-content:center;animation:previewerAnimation .3s}@keyframes previewerAnimation{0%{opacity:.1}to{opacity:1}}.ce-image-previewer .image-close{width:24px;height:24px;display:inline-block;position:absolute;right:50px;top:30px;z-index:99;cursor:pointer;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIzLjk3IDdsMS40MTUgMS40MTQtNy43NzkgNy43NzggNy43NzkgNy43NzktMS40MTQgMS40MTQtNy43NzktNy43NzktNy43NzggNy43NzlMNyAyMy45N2w3Ljc3OC03Ljc3OUw3IDguNDE0IDguNDE0IDdsNy43NzggNy43NzhMMjMuOTcxIDd6IiBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=) no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.ce-image-previewer .image-close:hover{background-color:#e2e6ed}.ce-image-previewer .ce-image-container{position:relative}.ce-image-previewer .ce-image-container img{cursor:move;position:relative}.ce-image-previewer .ce-image-menu{height:50px;position:absolute;bottom:50px;z-index:99;display:flex;align-items:center;justify-content:center}.ce-image-previewer .ce-image-menu i{width:32px;height:32px;margin:0 8px;cursor:pointer;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;transition:all .3s;border-radius:50%}.ce-image-previewer .ce-image-menu i:hover{background-color:#e2e6ed}.ce-image-previewer .ce-image-menu i.zoom-in{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDE0di00aDJ2NGg0djJoLTR2NGgtMnYtNGgtNHYtMmg0em04Ljc0OSAxMC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.zoom-out{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyLjc0OSAyNC4xNjNBMTEuOTUyIDExLjk1MiAwIDAxMTUgMjdDOC4zNzMgMjcgMyAyMS42MjcgMyAxNVM4LjM3MyAzIDE1IDNzMTIgNS4zNzMgMTIgMTJjMCAyLjk1NC0xLjA2NyA1LjY1OC0yLjgzNyA3Ljc0OWw0LjkwOCA0LjkwOC0xLjQxNCAxLjQxNC00LjkwOC00LjkwOHpNMTUgMjVjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFMyMC41MjMgNSAxNSA1IDUgOS40NzcgNSAxNXM0LjQ3NyAxMCAxMCAxMHptLTUtMTFoMTB2MkgxMHYtMnoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.rotate{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTYgNGM2LjYyNyAwIDEyIDUuMzczIDEyIDEyYTExLjk3IDExLjk3IDAgMDEtNCA4Ljk0NFYyM2gtLjg2QTkuOTY4IDkuOTY4IDAgMDAyNiAxNmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEwUzYgMTAuNDc3IDYgMTZjMCA1LjE4NSAzLjk0NyA5LjQ0OSA5IDkuOTV2Mi4wMDlDOC44NCAyNy40NTEgNCAyMi4yOTEgNCAxNiA0IDkuMzczIDkuMzczIDQgMTYgNHoiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik0xOS44NzkgMjcuMzI4bDEuNzY3LTYuNzE3IDQuOTUgNC45NXoiLz48L2c+PC9zdmc+)}.ce-image-previewer .ce-image-menu i.original-size{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgNGgyNHYyNEg0VjR6bTIgMnYyMGgyMFY2SDZ6bTQgNWgydjEwaC0yVjExem01IDJoMnYyaC0ydi0yem0wIDRoMnYyaC0ydi0yem01LTZoMnYxMGgtMlYxMXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-image-previewer .ce-image-menu i.image-download{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuNSAxNXYzLjVoMTVWMTVIMjF2NUgzdi01aDEuNXptOC4yMzItMTEuMjI2djkuMTk2bDQuMDUtNC4wNSAxLjA2IDEuMDYtNS44MzQgNS44MzQtNS44MzMtNS44MzMgMS4wNi0xLjA2IDMuOTk4IDMuOTk2VjMuNzc0aDEuNXoiIGZpbGw9IiMzRDQ3NTciLz48L3N2Zz4=)}.ce-contextmenu-container{z-index:9;position:fixed;display:none;padding:4px;overflow-x:hidden;overflow-y:auto;background:#fff;box-shadow:0 2px 12px #38383833;border:1px solid #e2e6ed;border-radius:2px}.ce-contextmenu-content{display:flex;flex-direction:column}.ce-contextmenu-content .ce-contextmenu-sub-item:after{position:absolute;content:"";width:16px;height:16px;right:12px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PGcgZmlsbD0iIzc2N0M4NSI+PHBhdGggZD0iTTcgMTIuMjQzbC0uNzA3LS43MDcgNC4yNDMtNC4yNDMuNzA3LjcwN3oiLz48cGF0aCBkPSJNNi4yOTMgNC40NjRMNyAzLjc1NyAxMS4yNDMgOGwtLjcwNy43MDd6Ii8+PC9nPjwvZz48L3N2Zz4=)}.ce-contextmenu-content .ce-contextmenu-item{min-width:140px;padding:0 32px 0 16px;height:30px;display:flex;align-items:center;white-space:nowrap;box-sizing:border-box;cursor:pointer}.ce-contextmenu-content .ce-contextmenu-item.hover{background:rgba(25,55,88,.04)}.ce-contextmenu-content .ce-contextmenu-item span{max-width:300px;font-size:12px;color:#3d4757;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ce-contextmenu-content .ce-contextmenu-item span.ce-shortcut{color:#767c85;height:30px;flex:1;text-align:right;line-height:30px;margin-left:20px}.ce-contextmenu-content .ce-contextmenu-item i{width:16px;height:16px;vertical-align:middle;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;flex-shrink:0;margin-right:8px}.ce-contextmenu-divider{background-color:#e2e6ed;margin:4px 16px;height:1px}.ce-contextmenu-print{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiA0aC0xVjJINXYySDRWMmExIDEgMCAwMTEtMWg2YTEgMSAwIDAxMSAxdjJ6bTAgNXY0YTEgMSAwIDAxLTEgMUg1YTEgMSAwIDAxLTEtMVY5aDF2NGg2VjloMXoiLz48cGF0aCBkPSJNMTIgMTJ2LTFoMlY1SDJ2NmgydjFIMmExIDEgMCAwMS0xLTFWNWExIDEgMCAwMTEtMWgxMmExIDEgMCAwMTEgMXY2YTEgMSAwIDAxLTEgMWgtMnoiLz48cGF0aCBkPSJNMyA4aDEwdjFIM3ptOC0yaDJ2MWgtMnoiLz48L2c+PC9zdmc+)}.ce-contextmenu-image{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT4uc3Qwe2ZpbGw6IzNkNDc1N308L3N0eWxlPjxnIGlkPSJfeDMwXzAt5YWs5YWxX3gyRl8wMuW3peWFt+agj194MkZf5o+S5YWl5Zu+54mHLTE2cHgtIj48ZyBpZD0iR3JvdXAtMTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGlkPSJDb21iaW5lZC1TaGFwZSIgY2xhc3M9InN0MCIgZD0iTTEgMGgxMmMuNiAwIDEgLjQgMSAxdjExYzAgLjYtLjQgMS0xIDFIMWMtLjYgMC0xLS40LTEtMVYxYzAtLjYuNC0xIDEtMXptMCAxdjExaDEyVjFIMXoiLz48Y2lyY2xlIGlkPSLmpK3lnIblvaIiIGNsYXNzPSJzdDAiIGN4PSIxMCIgY3k9IjQiIHI9IjEiLz48cGF0aCBpZD0iUGF0aCIgY2xhc3M9InN0MCIgZD0iTTguNSAxMS4ybC00LTQuMUwxIDEwLjdWOS4yYzEuNy0xLjYgMi43LTIuNSAzLTIuOC40LS41LjctLjQgMSAwTDguNSAxMCAxMSA3LjNjLjQtLjUuNi0uNSAxLS4xbDIgMi44djEuNWwtMi41LTMuNC0zIDMuMXoiLz48L2c+PC9nPjwvc3ZnPg==)}.ce-contextmenu-image-change{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIiBmaWxsPSIjM0Q0NzU3Ij48Y2lyY2xlIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjMiIGN5PSIxIiByPSIxIi8+PHBhdGggZD0iTTcuNDczIDguMjIzTDMuNDcgNC4xMDcgMCA3LjY2N3YtMS41QzEuNzE1IDQuNiAyLjcwNyAzLjY2NCAyLjk3NSAzLjM1OGMuNDAyLS40NTcuNjUxLS4zOSAxLjA0MiAwTDcuNDczIDcgOS45NiA0LjM0OWMuNDE0LS40NjIuNjItLjQ2MiAxLjAxMS0uMDcxTDEzIDcuMDZ2MS41bC0yLjUxLTMuNDEtMy4wMTcgMy4wNzJ6Ii8+PC9nPjxwYXRoIGQ9Ik02IDEuNUgxLjV2MTJoMTN2LTRWMTNhLjUuNSAwIDAxLS41LjVIMmEuNS41IDAgMDEtLjUtLjVWMmEuNS41IDAgMDEuNS0uNWg0em04LjUgOFY2bC0uNS41aDFsLS41LS41djMuNXpNNiAxLjVoNEw5LjUgMXYxbC41LS41SDZ6IiBzdHJva2U9IiMzRDQ3NTciLz48cGF0aCBkPSJNMTMuMDg1IDEuMzE2bC0zLjgxNCA0YTEgMSAwIDAwMS40NTggMS4zNjhsMy44MTUtNGExIDEgMCAxMC0xLjQ1OS0xLjM2OHoiIGZpbGw9IiMzRDQ3NTciIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-insert-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiMzRDQ3NTciIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNCA3djFoMlY3em0tMyAuNUw0IDV2NXpNMSAxaDEydjFIMXptMCAxMmgxMnYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-top-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNOCA1SDd2M2gxem0tLjUtM0wxMCA1SDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjEwLjUiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-insert-bottom-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNyAxMWgxVjhIN3ptLjUgM0w1IDExaDV6Ii8+PHJlY3Qgc3Ryb2tlPSIjM0Q0NzU3IiB4PSIxLjUiIHk9IjIuNSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-left-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTEgN3YxaDNWN3ptLTMgLjVMMTEgNXY1eiIvPjxyZWN0IHN0cm9rZT0iIzNENDc1NyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNCA3LjUpIiB4PSItMiIgeT0iNiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjMiIHJ4PSIxIi8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-insert-right-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNNSA4VjdIMnYxem0zLS41TDUgMTBWNXoiLz48cmVjdCBzdHJva2U9IiMzRDQ3NTciIHRyYW5zZm9ybT0icm90YXRlKDkwIDEyIDcuNSkiIHg9IjYiIHk9IjYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-row-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNi41aDZ2MmgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMiAxMmgxMXYxSDJ6TTIgMmgxMXYxSDJ6bS42MyAzTDcgOS4zNWwtLjYzNS42NUwyIDUuNjN6Ii8+PHBhdGggZmlsbD0iIzNENDc1NyIgZD0iTTIgOS4zNjNMNi4zNTUgNSA3IDUuNzA3IDIuNjk1IDEweiIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-row{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik04LjUgNS41aDZ2NGgtNnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMSAxM2gxMnYxSDF6TTEgMWgxMnYxSDF6bTAgNGgxdjFIMXptMSAxaDF2MUgyem0xIDFoMXYxSDN6bTEtMWgxdjFINHptMS0xaDF2MUg1ek00IDhoMXYxSDR6TTIgOGgxdjFIMnptMyAxaDF2MUg1ek0xIDloMXYxSDF6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-delete-col{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBzdHJva2U9IiM5MjlBQTgiIGQ9Ik01LjUgNy41di02aDR2NnoiLz48cGF0aCBmaWxsPSIjM0Q0NzU3IiBkPSJNMTMgMTVWM2gxdjEyek0xIDE1VjNoMXYxMnptNCAwdi0xaDF2MXptMS0xdi0xaDF2MXptMS0xdi0xaDF2MXptLTEtMXYtMWgxdjF6bS0xLTF2LTFoMXYxem0zIDF2LTFoMXYxem0wIDJ2LTFoMXYxem0xLTN2LTFoMXYxem0wIDR2LTFoMXYxeiIvPjwvZz48L3N2Zz4=)}.ce-contextmenu-delete-table{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTQgMTNoLTF2LTNIMnYzSDF2LTNhMSAxIDAgMDExLTFoMTFhMSAxIDAgMDExIDF2M3oiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik01LjYyNSAyTDEwIDYuMzc1IDkuMzc1IDcgNSAyLjYyNXoiLz48cGF0aCBkPSJNNSA2LjM3NUw5LjM3NSAybC42MjUuNjI1TDUuNjI1IDd6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-merge-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik04IDcuNUwxMCA2djN6bS0xIDBMNSA2djN6Ii8+PHBhdGggZD0iTTkgN2gzdjFIOXpNMyA3aDN2MUgzeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMTBoMXY0SDh6bS0yIDBoMXY0SDZ6Ii8+PC9nPjwvc3ZnPg==)}.ce-contextmenu-merge-cancel-cell{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNiAxdjFIMnYxMWg0djFIMmExIDEgMCAwMS0xLTFWMmExIDEgMCAwMTEtMWg0em0zIDBoNGExIDEgMCAwMTEgMXYxMWExIDEgMCAwMS0xIDFIOXYtMWg0VjJIOVYxeiIvPjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTYgMWgxdjRINnptMiAwaDF2NEg4eiIvPjxwYXRoIGQ9Ik0zIDcuNUw1IDZ2M3ptOSAwTDEwIDZ2M3oiLz48cGF0aCBkPSJNNCA3aDN2MUg0em00IDBoM3YxSDh6Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOCAxMGgxdjRIOHptLTIgMGgxdjRINnoiLz48L2c+PC9zdmc+)}.ce-contextmenu-vertical-align{background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMiAxM2gxMnYxSDJ6bTAtM2g4djFIMnptMC0zaDEydjFIMnptMC02aDEydjFIMnptMCAzaDh2MUgyeiIgZmlsbD0iIzNkNDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}.ce-contextmenu-vertical-align-top{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggOEg3djZoMXptLS41LTNMMTAgOEg1ek0yIDNoMTF2MUgyeiIgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}.ce-contextmenu-vertical-align-middle{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAxMkg3djNoMXptLS41LTNsMi41IDNINXpNNyAzaDFWMEg3em0uNSAzTDUgM2g1ek0yIDdoMTF2MUgyeiIgZmlsbD0iIzNENDc1NyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}.ce-contextmenu-vertical-align-bottom{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcgOWgxVjNIN3ptLjUgM0w1IDloNXpNMiAxM2gxMXYxSDJ6IiBmaWxsPSIjM0Q0NzU3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=)}.ce-contextmenu-border-all{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iIzNENDc1NyIvPjxwYXRoIGZpbGw9IiMzRDQ3NTciIGQ9Ik0zIDhoMTF2MUgzeiIvPjxwYXRoIGZpbGw9IiMzRDQ3NTciIGQ9Ik05IDN2MTFIOFYzeiIvPjwvc3ZnPg==)}.ce-contextmenu-border-empty{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAzaC0xVjJoMWExIDEgMCAwMTEgMXYxaC0xVjN6bS0zLTF2MUg4LjV2MmgtMVYzSDZWMmg0ek00IDJ2MUgzdjFIMlYzYTEgMSAwIDAxMS0xaDF6TTIgNmgxdjEuNWgydjFIM1YxMEgyVjZ6bTAgNmgxdjFoMXYxSDNhMSAxIDAgMDEtMS0xdi0xem00IDJ2LTFoMS41di0yaDF2MkgxMHYxSDZ6bTYgMHYtMWgxdi0xaDF2MWExIDEgMCAwMS0xIDFoLTF6bTItNGgtMVY4LjVoLTJ2LTFoMlY2aDF2NHpNOC41IDcuNXYtMWgtMXYxaC0xdjFoMXYxaDF2LTFoMXYtMWgtMXoiIGZpbGw9IiNBQUFDQjAiLz48L3N2Zz4=)}.ce-contextmenu-border-external{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iIzNENDc1NyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSA1VjNIOHYyaDF6bTAgOXYtMkg4djJoMXpNNSA4SDN2MWgyVjh6bTkgMGgtMnYxaDJWOHpNOSA3djFoMXYxSDl2MUg4VjlIN1Y4aDFWN2gxeiIgZmlsbD0iI0FBQUNCMCIvPjwvc3ZnPg==)}.ce-contextmenu-border-td{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIvPjxwYXRoIHN0cm9rZT0iIzNENDc1NyIgZD0iTTguNSAyLjUgdjYgaC02Ii8+PC9zdmc+)}.ce-contextmenu-border-td-top{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIvPjxwYXRoIHN0cm9rZT0iIzNENDc1NyIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMi41IDMgaDEyIi8+PC9zdmc+)}.ce-contextmenu-border-td-left{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIvPjxwYXRoIHN0cm9rZT0iIzNENDc1NyIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMyAzIHYxMSIvPjwvc3ZnPg==)}.ce-contextmenu-border-td-bottom{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIvPjxwYXRoIHN0cm9rZT0iIzNENDc1NyIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMi41IDE0IGgxMiIvPjwvc3ZnPg==)}.ce-contextmenu-border-td-right{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIvPjxwYXRoIHN0cm9rZT0iIzNENDc1NyIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTQgMyB2MTEiLz48L3N2Zz4=)}.ce-contextmenu-border-td-forward{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIgLz48cGF0aCBzdHJva2U9IiMzRDQ3NTciIGQ9Ik0xNCAzIGwtMTEgMTEiIC8+PC9zdmc+)}.ce-contextmenu-border-td-back{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNSAzYS41LjUgMCAwMS41LS41aDExYS41LjUgMCAwMS41LjV2MTFhLjUuNSAwIDAxLS41LjVIM2EuNS41IDAgMDEtLjUtLjVWM3oiIHN0cm9rZT0iI0FBQUNCMCIgLz48cGF0aCBzdHJva2U9IiMzRDQ3NTciIGQ9Ik0zIDMgbDExIDExIiAvPjwvc3ZnPg==)}.ce-hyperlink-popup{background:#fff;box-shadow:0 2px 12px #626b8433;border-radius:2px;color:#3d4757;padding:12px 16px;position:absolute;z-index:1;text-align:center;display:none}.ce-hyperlink-popup a{min-width:100px;max-width:300px;font-size:12px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;color:#00f}.ce-zone-indicator>div{padding:3px 6px;color:#000;font-size:12px;background:rgb(218 231 252);position:absolute;transform-origin:0 0}.ce-zone-indicator-border__top,.ce-zone-indicator-border__bottom,.ce-zone-indicator-border__left,.ce-zone-indicator-border__right{display:block;position:absolute;z-index:0}.ce-zone-indicator-border__top{border-top:2px dashed rgb(238,238,238)}.ce-zone-indicator-border__bottom{border-top:2px dashed rgb(238,238,238);width:100%}.ce-zone-indicator-border__left{border-left:2px dashed rgb(238,238,238)}.ce-zone-indicator-border__right{border-right:2px dashed rgb(238,238,238)}.ce-zone-tip{display:none;align-items:center;height:30px;white-space:nowrap;position:fixed;opacity:.9;background-color:#000;padding:0 5px;border-radius:4px;z-index:9;transition:all .3s;outline:none;user-select:none;pointer-events:none;transform:translate(10px,10px)}.ce-zone-tip.show{display:flex}.ce-zone-tip span{color:#fff;font-size:12px}.ce-inputarea{width:100px;height:30px;min-width:0;min-height:0;margin:0;padding:0;left:0;right:0;letter-spacing:0;font-size:12px;position:absolute;z-index:-1;outline:none;resize:none;border:none;overflow:hidden;color:transparent;user-select:none;caret-color:transparent;background-color:transparent}.ce-cursor{width:1px;height:20px;left:0;right:0;position:absolute;outline:none;background-color:#000;pointer-events:none}.ce-cursor.ce-cursor--animation{animation-duration:1s;animation-iteration-count:infinite;animation-name:cursorAnimation}@keyframes cursorAnimation{0%{opacity:1}13%{opacity:0}50%{opacity:0}63%{opacity:1}to{opacity:1}}.ce-float-image{position:absolute;opacity:.5;pointer-events:none}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+var index = "";
+const version = "0.9.94";
+var MaxHeightRatio;
+(function(MaxHeightRatio2) {
+  MaxHeightRatio2["HALF"] = "half";
+  MaxHeightRatio2["ONE_THIRD"] = "one-third";
+  MaxHeightRatio2["QUARTER"] = "quarter";
+})(MaxHeightRatio || (MaxHeightRatio = {}));
+var NumberType;
+(function(NumberType2) {
+  NumberType2["ARABIC"] = "arabic";
+  NumberType2["CHINESE"] = "chinese";
+})(NumberType || (NumberType = {}));
+var ImageDisplay;
+(function(ImageDisplay2) {
+  ImageDisplay2["INLINE"] = "inline";
+  ImageDisplay2["BLOCK"] = "block";
+  ImageDisplay2["SURROUND"] = "surround";
+  ImageDisplay2["FLOAT_TOP"] = "float-top";
+  ImageDisplay2["FLOAT_BOTTOM"] = "float-bottom";
+})(ImageDisplay || (ImageDisplay = {}));
+var LocationPosition;
+(function(LocationPosition2) {
+  LocationPosition2["BEFORE"] = "before";
+  LocationPosition2["AFTER"] = "after";
+})(LocationPosition || (LocationPosition = {}));
+const ZERO = "\u200B";
+const WRAP = "\n";
+const NBSP = " ";
+const NON_BREAKING_SPACE = "&nbsp;";
+const PUNCTUATION_LIST = [
+  "\xB7",
+  "\u3001",
+  ":",
+  "\uFF1A",
+  ",",
+  "\uFF0C",
+  ".",
+  "\u3002",
+  ";",
+  "\uFF1B",
+  "?",
+  "\uFF1F",
+  "!",
+  "\uFF01"
+];
+const maxHeightRadioMapping = {
+  [MaxHeightRatio.HALF]: 1 / 2,
+  [MaxHeightRatio.ONE_THIRD]: 1 / 3,
+  [MaxHeightRatio.QUARTER]: 1 / 4
+};
+const LETTER_CLASS = {
+  ENGLISH: "A-Za-z",
+  SPANISH: "A-Za-z\xC1\xC9\xCD\xD3\xDA\xE1\xE9\xED\xF3\xFA\xD1\xF1\xDC\xFC",
+  FRENCH: "A-Za-z\xC0\xC2\xC7\xE0\xE2\xE7\xC9\xE9\xC8\xE8\xCA\xEA\xCB\xEB\xCE\xEE\xCF\xEF\xD4\xF4\xD9\xF9\xDB\xFB\u0178\xFF",
+  GERMAN: "A-Za-z\xC4\xE4\xD6\xF6\xDC\xFC\xDF",
+  RUSSIAN: "\u0410-\u042F\u0430-\u044F\u0401\u0451",
+  PORTUGUESE: "A-Za-z\xC1\xC9\xCD\xD3\xDA\xE1\xE9\xED\xF3\xFA\xC3\xD5\xE3\xF5\xC7\xE7",
+  ITALIAN: "A-Za-z\xC0\xE0\xC8\xE8\xC9\xE9\xCC\xEC\xCD\xED\xCE\xEE\xD3\xF3\xD2\xF2\xD9\xF9",
+  DUTCH: "A-Za-z\xC0\xE0\xC1\xE1\xC2\xE2\xC4\xE4\xC8\xE8\xC9\xE9\xCA\xEA\xCB\xEB\xCC\xEC\xCD\xED\xCE\xEE\xCF\xEF\xD3\xF3\xD2\xF2\xD4\xF4\xD6\xF6\xD9\xF9\xDB\xFB\xDC\xFC",
+  SWEDISH: "A-Za-z\xC5\xE5\xC4\xE4\xD6\xF6",
+  GREEK: "\u0391\u03B1\u0392\u03B2\u0393\u03B3\u0394\u03B4\u0395\u03B5\u0396\u03B6\u0397\u03B7\u0398\u03B8\u0399\u03B9\u039A\u03BA\u039B\u03BB\u039C\u03BC\u039D\u03BD\u039E\u03BE\u039F\u03BF\u03A0\u03C0\u03A1\u03C1\u03A3\u03C3\u03C2\u03A4\u03C4\u03A5\u03C5\u03A6\u03C6\u03A7\u03C7\u03A8\u03C8\u03A9\u03C9"
+};
+const METRICS_BASIS_TEXT = "\u65E5";
+var RowFlex;
+(function(RowFlex2) {
+  RowFlex2["LEFT"] = "left";
+  RowFlex2["CENTER"] = "center";
+  RowFlex2["RIGHT"] = "right";
+  RowFlex2["ALIGNMENT"] = "alignment";
+  RowFlex2["JUSTIFY"] = "justify";
+})(RowFlex || (RowFlex = {}));
+const NUMBER_LIKE_REG = /[0-9.]/;
+const SURROGATE_PAIR_REG = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+const EMOJI_REG = /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26D3\uFE0F?(?:\u200D\uD83D\uDCA5)?|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF43\uDF45-\uDF4A\uDF4C-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDF44(?:\u200D\uD83D\uDFEB)?|\uDF4B(?:\u200D\uD83D\uDFE9)?|\uDFC3(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4\uDEB5](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE41\uDE43\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC08(?:\u200D\u2B1B)?|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC26(?:\u200D(?:\u2B1B|\uD83D\uDD25))?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?|\uDE42(?:\u200D[\u2194\u2195]\uFE0F?)?|\uDEB6(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDCE(?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D(?:[\u2640\u2642]\uFE0F?(?:\u200D\u27A1\uFE0F?)?|\u27A1\uFE0F?))?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1|\uDDD1\u200D\uD83E\uDDD2(?:\u200D\uD83E\uDDD2)?|\uDDD2(?:\u200D\uD83E\uDDD2)?))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF\uDDBC\uDDBD](?:\u200D\u27A1\uFE0F?)?|[\uDDB0-\uDDB3]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g;
+const UNICODE_SYMBOL_REG = new RegExp(`${EMOJI_REG.source}|${SURROGATE_PAIR_REG.source}`, "g");
+const PUNCTUATION_REG = /[、，。？！；：……「」“”‘’*（）【】〔〕〖〗〘〙〚〛《》———﹝﹞–—\\/·.,!?;:`~<>()[\]{}'"|]/;
+const START_LINE_BREAK_REG = new RegExp(`^[${ZERO}
+]`);
+function debounce(func, delay) {
+  let timer;
+  return function(...args) {
+    if (timer) {
+      window.clearTimeout(timer);
+    }
+    timer = window.setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+function throttle(func, delay) {
+  let lastExecTime = 0;
+  let timer;
+  return function(...args) {
+    const currentTime = Date.now();
+    if (currentTime - lastExecTime >= delay) {
+      window.clearTimeout(timer);
+      func.apply(this, args);
+      lastExecTime = currentTime;
+    } else {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        func.apply(this, args);
+        lastExecTime = currentTime;
+      }, delay);
+    }
+  };
+}
+function deepCloneOmitKeys(obj, omitKeys) {
+  if (!obj || typeof obj !== "object") {
+    return obj;
+  }
+  let newObj = {};
+  if (Array.isArray(obj)) {
+    newObj = obj.map((item) => deepCloneOmitKeys(item, omitKeys));
+  } else {
+    Object.keys(obj).forEach((key) => {
+      if (omitKeys.includes(key))
+        return;
+      return newObj[key] = deepCloneOmitKeys(obj[key], omitKeys);
+    });
+  }
+  return newObj;
+}
+function deepClone(obj) {
+  if (!obj || typeof obj !== "object") {
+    return obj;
+  }
+  let newObj = {};
+  if (Array.isArray(obj)) {
+    newObj = obj.map((item) => deepClone(item));
+  } else {
+    Object.keys(obj).forEach((key) => {
+      return newObj[key] = deepClone(obj[key]);
+    });
+  }
+  return newObj;
+}
+function isBody(node) {
+  return node && node.nodeType === 1 && node.tagName.toLowerCase() === "body";
+}
+function findParent(node, filterFn, includeSelf) {
+  if (node && !isBody(node)) {
+    node = includeSelf ? node : node.parentNode;
+    while (node) {
+      if (!filterFn || filterFn(node) || isBody(node)) {
+        return filterFn && !filterFn(node) && isBody(node) ? null : node;
+      }
+      node = node.parentNode;
+    }
+  }
+  return null;
+}
+function getUUID() {
+  function S4() {
+    return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  }
+  return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
+}
+function splitText(text) {
+  const data2 = [];
+  if (Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter();
+    const segments = segmenter.segment(text);
+    for (const { segment } of segments) {
+      data2.push(segment);
+    }
+  } else {
+    const symbolMap = /* @__PURE__ */ new Map();
+    for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
+      symbolMap.set(match.index, match[0]);
+    }
+    let t = 0;
+    while (t < text.length) {
+      const symbol = symbolMap.get(t);
+      if (symbol) {
+        data2.push(symbol);
+        t += symbol.length;
+      } else {
+        data2.push(text[t]);
+        t++;
+      }
+    }
+  }
+  return data2;
+}
+function downloadFile(href, fileName) {
+  const a = document.createElement("a");
+  a.href = href;
+  a.download = fileName;
+  a.click();
+}
+function threeClick$1(dom, fn) {
+  nClickEvent(3, dom, fn);
+}
+function nClickEvent(n, dom, fn) {
+  let count = 0;
+  let lastTime = 0;
+  const handler = function(evt) {
+    const currentTime = new Date().getTime();
+    count = currentTime - lastTime < 300 ? count + 1 : 0;
+    lastTime = new Date().getTime();
+    if (count >= n - 1) {
+      fn(evt);
+      count = 0;
+    }
+  };
+  dom.addEventListener("click", handler);
+}
+function isObject(type) {
+  return Object.prototype.toString.call(type) === "[object Object]";
+}
+function isArray(type) {
+  return Array.isArray(type);
+}
+function mergeObject(source, target) {
+  if (isObject(source) && isObject(target)) {
+    const objectTarget = target;
+    for (const [key, val] of Object.entries(source)) {
+      if (!objectTarget[key]) {
+        objectTarget[key] = val;
+      } else {
+        objectTarget[key] = mergeObject(val, objectTarget[key]);
+      }
+    }
+  } else if (isArray(source) && isArray(target)) {
+    target.push(...source);
+  }
+  return target;
+}
+function nextTick(fn) {
+  setTimeout(() => {
+    fn();
+  }, 0);
+}
+function convertNumberToChinese(num) {
+  const chineseNum = [
+    "\u96F6",
+    "\u4E00",
+    "\u4E8C",
+    "\u4E09",
+    "\u56DB",
+    "\u4E94",
+    "\u516D",
+    "\u4E03",
+    "\u516B",
+    "\u4E5D"
+  ];
+  const chineseUnit = [
+    "",
+    "\u5341",
+    "\u767E",
+    "\u5343",
+    "\u4E07",
+    "\u5341",
+    "\u767E",
+    "\u5343",
+    "\u4EBF",
+    "\u5341",
+    "\u767E",
+    "\u5343",
+    "\u4E07",
+    "\u5341",
+    "\u767E",
+    "\u5343",
+    "\u4EBF"
+  ];
+  if (!num || isNaN(num))
+    return "\u96F6";
+  const numStr = num.toString().split("");
+  let result = "";
+  for (let i = 0; i < numStr.length; i++) {
+    const desIndex = numStr.length - 1 - i;
+    result = `${chineseUnit[i]}${result}`;
+    result = `${chineseNum[Number(numStr[desIndex])]}${result}`;
+  }
+  result = result.replace(/零(千|百|十)/g, "\u96F6").replace(/十零/g, "\u5341");
+  result = result.replace(/零+/g, "\u96F6");
+  result = result.replace(/零亿/g, "\u4EBF").replace(/零万/g, "\u4E07");
+  result = result.replace(/亿万/g, "\u4EBF");
+  result = result.replace(/零+$/, "");
+  result = result.replace(/^一十/g, "\u5341");
+  return result;
+}
+function cloneProperty(properties, sourceElement, targetElement) {
+  for (let i = 0; i < properties.length; i++) {
+    const property = properties[i];
+    const value = sourceElement[property];
+    if (value !== void 0) {
+      targetElement[property] = value;
+    } else {
+      delete targetElement[property];
+    }
+  }
+}
+function pickObject(object, pickKeys) {
+  const newObject = {};
+  for (const key in object) {
+    if (pickKeys.includes(key)) {
+      newObject[key] = object[key];
+    }
+  }
+  return newObject;
+}
+function omitObject(object, omitKeys) {
+  const newObject = {};
+  for (const key in object) {
+    if (!omitKeys.includes(key)) {
+      newObject[key] = object[key];
+    }
+  }
+  return newObject;
+}
+function convertStringToBase64(input2) {
+  const encoder = new TextEncoder();
+  const data2 = encoder.encode(input2);
+  const charArray = Array.from(data2, (byte) => String.fromCharCode(byte));
+  const base64 = window.btoa(charArray.join(""));
+  return base64;
+}
+function findScrollContainer(element) {
+  let parent = element.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.getPropertyValue("overflow-y");
+    if (parent.scrollHeight > parent.clientHeight && (overflowY === "auto" || overflowY === "scroll")) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
+function isArrayEqual(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  return !arr1.some((item) => !arr2.includes(item));
+}
+function isObjectEqual(obj1, obj2) {
+  if (!isObject(obj1) || !isObject(obj2))
+    return false;
+  const obj1Keys = Object.keys(obj1);
+  const obj2Keys = Object.keys(obj2);
+  if (obj1Keys.length !== obj2Keys.length) {
+    return false;
+  }
+  return !obj1Keys.some((key) => obj2[key] !== obj1[key]);
+}
+function isRectIntersect(rect1, rect2) {
+  const rect1Left = rect1.x;
+  const rect1Right = rect1.x + rect1.width;
+  const rect1Top = rect1.y;
+  const rect1Bottom = rect1.y + rect1.height;
+  const rect2Left = rect2.x;
+  const rect2Right = rect2.x + rect2.width;
+  const rect2Top = rect2.y;
+  const rect2Bottom = rect2.y + rect2.height;
+  if (rect1Left > rect2Right || rect1Right < rect2Left || rect1Top > rect2Bottom || rect1Bottom < rect2Top) {
+    return false;
+  }
+  return true;
+}
+const CURSOR_AGENT_OFFSET_HEIGHT = 12;
+const defaultCursorOption = {
+  width: 1,
+  color: "#000000",
+  dragWidth: 2,
+  dragColor: "#0000FF"
+};
+const EDITOR_COMPONENT = "editor-component";
+const EDITOR_PREFIX = "ce";
+const EDITOR_CLIPBOARD = `${EDITOR_PREFIX}-clipboard`;
+var MoveDirection;
+(function(MoveDirection2) {
+  MoveDirection2["UP"] = "top";
+  MoveDirection2["DOWN"] = "down";
+  MoveDirection2["LEFT"] = "left";
+  MoveDirection2["RIGHT"] = "right";
+})(MoveDirection || (MoveDirection = {}));
+var ElementType;
+(function(ElementType2) {
+  ElementType2["TEXT"] = "text";
+  ElementType2["IMAGE"] = "image";
+  ElementType2["TABLE"] = "table";
+  ElementType2["HYPERLINK"] = "hyperlink";
+  ElementType2["SUPERSCRIPT"] = "superscript";
+  ElementType2["SUBSCRIPT"] = "subscript";
+  ElementType2["SEPARATOR"] = "separator";
+  ElementType2["PAGE_BREAK"] = "pageBreak";
+  ElementType2["CONTROL"] = "control";
+  ElementType2["CHECKBOX"] = "checkbox";
+  ElementType2["RADIO"] = "radio";
+  ElementType2["LATEX"] = "latex";
+  ElementType2["TAB"] = "tab";
+  ElementType2["DATE"] = "date";
+  ElementType2["BLOCK"] = "block";
+  ElementType2["TITLE"] = "title";
+  ElementType2["LIST"] = "list";
+})(ElementType || (ElementType = {}));
+const EDITOR_ELEMENT_STYLE_ATTR = [
+  "bold",
+  "color",
+  "highlight",
+  "font",
+  "size",
+  "italic",
+  "underline",
+  "strikeout",
+  "textDecoration"
+];
+const EDITOR_ROW_ATTR = ["rowFlex", "rowMargin"];
+const EDITOR_ELEMENT_COPY_ATTR = [
+  "type",
+  "font",
+  "size",
+  "bold",
+  "color",
+  "italic",
+  "highlight",
+  "underline",
+  "strikeout",
+  "rowFlex",
+  "url",
+  "hyperlinkId",
+  "dateId",
+  "dateFormat",
+  "groupIds",
+  "rowMargin",
+  "textDecoration"
+];
+const EDITOR_ELEMENT_ZIP_ATTR = [
+  "type",
+  "font",
+  "size",
+  "bold",
+  "color",
+  "lineWidth",
+  "italic",
+  "highlight",
+  "underline",
+  "strikeout",
+  "rowFlex",
+  "rowMargin",
+  "dashArray",
+  "trList",
+  "borderType",
+  "width",
+  "height",
+  "url",
+  "colgroup",
+  "valueList",
+  "control",
+  "checkbox",
+  "radio",
+  "dateFormat",
+  "block",
+  "level",
+  "title",
+  "listType",
+  "listStyle",
+  "listWrap",
+  "groupIds",
+  "conceptId",
+  "imgDisplay",
+  "imgFloatPosition",
+  "textDecoration",
+  "extension",
+  "externalId"
+];
+const TABLE_TD_ZIP_ATTR = [
+  "conceptId",
+  "extension",
+  "externalId",
+  "verticalAlign",
+  "backgroundColor",
+  "borderTypes",
+  "slashTypes"
+];
+const TABLE_CONTEXT_ATTR = [
+  "tdId",
+  "trId",
+  "tableId"
+];
+const TITLE_CONTEXT_ATTR = [
+  "level",
+  "titleId",
+  "title"
+];
+const LIST_CONTEXT_ATTR = [
+  "listId",
+  "listType",
+  "listStyle"
+];
+const CONTROL_CONTEXT_ATTR = [
+  "control",
+  "controlId",
+  "controlComponent"
+];
+const CONTROL_STYLE_ATTR = [
+  "font",
+  "size",
+  "bold",
+  "highlight",
+  "italic",
+  "strikeout"
+];
+const EDITOR_ELEMENT_CONTEXT_ATTR = [
+  ...TABLE_CONTEXT_ATTR,
+  ...TITLE_CONTEXT_ATTR,
+  ...LIST_CONTEXT_ATTR
+];
+const TEXTLIKE_ELEMENT_TYPE = [
+  ElementType.TEXT,
+  ElementType.HYPERLINK,
+  ElementType.SUBSCRIPT,
+  ElementType.SUPERSCRIPT,
+  ElementType.CONTROL,
+  ElementType.DATE
+];
+const IMAGE_ELEMENT_TYPE = [
+  ElementType.IMAGE,
+  ElementType.LATEX
+];
+const BLOCK_ELEMENT_TYPE = [
+  ElementType.BLOCK,
+  ElementType.PAGE_BREAK,
+  ElementType.SEPARATOR,
+  ElementType.TABLE
+];
+const INLINE_NODE_NAME = ["HR", "TABLE", "UL", "OL"];
+const VIRTUAL_ELEMENT_TYPE = [
+  ElementType.TITLE,
+  ElementType.LIST
+];
+class ImageParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.container = draw.getContainer();
+    this.imageCache = /* @__PURE__ */ new Map();
+    this.floatImageContainer = null;
+    this.floatImage = null;
+  }
+  createFloatImage(element) {
+    const { scale } = this.options;
+    let floatImageContainer = this.floatImageContainer;
+    let floatImage = this.floatImage;
+    if (!floatImageContainer) {
+      floatImageContainer = document.createElement("div");
+      floatImageContainer.classList.add(`${EDITOR_PREFIX}-float-image`);
+      this.container.append(floatImageContainer);
+      this.floatImageContainer = floatImageContainer;
+    }
+    if (!floatImage) {
+      floatImage = document.createElement("img");
+      floatImageContainer.append(floatImage);
+      this.floatImage = floatImage;
+    }
+    floatImageContainer.style.display = "none";
+    floatImage.style.width = `${element.width * scale}px`;
+    floatImage.style.height = `${element.height * scale}px`;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const preY = this.draw.getPageNo() * (height + pageGap);
+    const imgFloatPosition = element.imgFloatPosition;
+    floatImageContainer.style.left = `${imgFloatPosition.x}px`;
+    floatImageContainer.style.top = `${preY + imgFloatPosition.y}px`;
+    floatImage.src = element.value;
+  }
+  dragFloatImage(movementX, movementY) {
+    if (!this.floatImageContainer)
+      return;
+    this.floatImageContainer.style.display = "block";
+    const x = parseFloat(this.floatImageContainer.style.left) + movementX;
+    const y = parseFloat(this.floatImageContainer.style.top) + movementY;
+    this.floatImageContainer.style.left = `${x}px`;
+    this.floatImageContainer.style.top = `${y}px`;
+  }
+  destroyFloatImage() {
+    if (this.floatImageContainer) {
+      this.floatImageContainer.style.display = "none";
+    }
+  }
+  addImageObserver(promise) {
+    this.draw.getImageObserver().add(promise);
+  }
+  getFallbackImage(width, height) {
+    const tileSize = 8;
+    const x = (width - Math.ceil(width / tileSize) * tileSize) / 2;
+    const y = (height - Math.ceil(height / tileSize) * tileSize) / 2;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+                  <rect width="${width}" height="${height}" fill="url(#mosaic)" />
+                  <defs>
+                    <pattern id="mosaic" x="${x}" y="${y}" width="${tileSize * 2}" height="${tileSize * 2}" patternUnits="userSpaceOnUse">
+                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" />
+                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" transform="translate(${tileSize}, ${tileSize})" />
+                    </pattern>
+                  </defs>
+                </svg>`;
+    const fallbackImage = new Image();
+    fallbackImage.src = `data:image/svg+xml;base64,${convertStringToBase64(svg)}`;
+    return fallbackImage;
+  }
+  render(ctx, element, x, y) {
+    const { scale } = this.options;
+    const width = element.width * scale;
+    const height = element.height * scale;
+    if (this.imageCache.has(element.id)) {
+      const img = this.imageCache.get(element.id);
+      ctx.drawImage(img, x, y, width, height);
+    } else {
+      const imageLoadPromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        img.setAttribute("crossOrigin", "Anonymous");
+        img.src = element.value;
+        img.onload = () => {
+          this.imageCache.set(element.id, img);
+          resolve(element);
+          if (element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+            this.draw.render({
+              isCompute: false,
+              isSetCursor: false,
+              isSubmitHistory: false
+            });
+          } else {
+            ctx.drawImage(img, x, y, width, height);
+          }
+        };
+        img.onerror = (error) => {
+          const fallbackImage = this.getFallbackImage(width, height);
+          fallbackImage.onload = () => {
+            ctx.drawImage(fallbackImage, x, y, width, height);
+            this.imageCache.set(element.id, fallbackImage);
+          };
+          reject(error);
+        };
+      });
+      this.addImageObserver(imageLoadPromise);
+    }
+  }
+}
+const ordR = "R".charCodeAt(0);
+function HERSHEY(i) {
+  if (data[i] == null) {
+    compile(i);
+  }
+  return data[i];
+}
+function compile(i) {
+  const entry = raw[i];
+  if (entry == null) {
+    return;
+  }
+  const bound = entry.substring(3, 5);
+  const xmin = 1 * bound.charCodeAt(0) - ordR;
+  const xmax = 1 * bound.charCodeAt(1) - ordR;
+  const content = entry.substring(5);
+  const polylines = [[]];
+  let ymin = Infinity;
+  let ymax = -Infinity;
+  let zmin = Infinity;
+  let zmax = -Infinity;
+  let j = 0;
+  while (j < content.length) {
+    const digit = content.substring(j, j + 2);
+    if (digit == " R") {
+      polylines.push([]);
+    } else {
+      const x = digit.charCodeAt(0) - ordR - xmin;
+      const y = digit.charCodeAt(1) - ordR;
+      ymin = Math.min(y, ymin);
+      ymax = Math.max(y, ymax);
+      zmin = Math.min(x, zmin);
+      zmax = Math.max(x, zmax);
+      polylines[polylines.length - 1].push([x, y]);
+    }
+    j += 2;
+  }
+  data[i] = {
+    w: xmax - xmin,
+    xmin: zmin,
+    xmax: zmax,
+    ymin,
+    ymax,
+    polylines
+  };
+}
+const data = {};
+const raw = {
+  1: "  9MWRMNV RRMVV RPSTS",
+  2: " 16MWOMOV ROMSMUNUPSQ ROQSQURUUSVOV",
+  3: " 11MXVNTMRMPNOPOSPURVTVVU",
+  4: " 12MWOMOV ROMRMTNUPUSTURVOV",
+  5: " 12MWOMOV ROMUM ROQSQ ROVUV",
+  6: "  9MVOMOV ROMUM ROQSQ",
+  7: " 15MXVNTMRMPNOPOSPURVTVVUVR RSRVR",
+  8: "  9MWOMOV RUMUV ROQUQ",
+  9: "  3PTRMRV",
+  10: "  7NUSMSTRVPVOTOS",
+  11: "  9MWOMOV RUMOS RQQUV",
+  12: "  6MVOMOV ROVUV",
+  13: " 12LXNMNV RNMRV RVMRV RVMVV",
+  14: "  9MWOMOV ROMUV RUMUV",
+  15: " 14MXRMPNOPOSPURVSVUUVSVPUNSMRM",
+  16: " 10MWOMOV ROMSMUNUQSROR",
+  17: " 17MXRMPNOPOSPURVSVUUVSVPUNSMRM RSTVW",
+  18: " 13MWOMOV ROMSMUNUQSROR RRRUV",
+  19: " 13MWUNSMQMONOOPPTRUSUUSVQVOU",
+  20: "  6MWRMRV RNMVM",
+  21: "  9MXOMOSPURVSVUUVSVM",
+  22: "  6MWNMRV RVMRV",
+  23: " 12LXNMPV RRMPV RRMTV RVMTV",
+  24: "  6MWOMUV RUMOV",
+  25: "  7MWNMRQRV RVMRQ",
+  26: "  9MWUMOV ROMUM ROVUV",
+  27: "  9MWRMNV RRMVV RPSTS",
+  28: " 16MWOMOV ROMSMUNUPSQ ROQSQURUUSVOV",
+  29: "  6MVOMOV ROMUM",
+  30: "  9MWRMNV RRMVV RNVVV",
+  31: " 12MWOMOV ROMUM ROQSQ ROVUV",
+  32: "  9MWUMOV ROMUM ROVUV",
+  33: "  9MWOMOV RUMUV ROQUQ",
+  34: " 20MXRMPNOPOSPURVSVUUVSVPUNSMRM RQQTR RTQQR",
+  35: "  3PTRMRV",
+  36: "  9MWOMOV RUMOS RQQUV",
+  37: "  6MWRMNV RRMVV",
+  38: " 12LXNMNV RNMRV RVMRV RVMVV",
+  39: "  9MWOMOV ROMUV RUMUV",
+  40: " 12MWOMUM RPQTR RTQPR ROVUV",
+  41: " 14MXRMPNOPOSPURVSVUUVSVPUNSMRM",
+  42: "  9MWOMOV RUMUV ROMUM",
+  43: " 10MWOMOV ROMSMUNUQSROR",
+  44: " 10MWOMRQOV ROMUM ROVUV",
+  45: "  6MWRMRV RNMVM",
+  46: " 15MWNONNOMPMQNRPRV RVOVNUMTMSNRP",
+  47: " 13LXRMRV RPONPNSPTTTVSVPTOPO",
+  48: "  6MWOMUV RUMOV",
+  49: " 12LXRMRV RNOOPOSQTSTUSUPVO",
+  50: " 13MXOVQVOROPPNRMSMUNVPVRTVVV",
+  200: " 12MWRMPNOPOSPURVTUUSUPTNRM",
+  201: "  4MWPORMRV",
+  202: "  9MWONQMSMUNUPTROVUV",
+  203: " 15MWONQMSMUNUPSQ RRQSQURUUSVQVOU",
+  204: "  7MWSMSV RSMNSVS",
+  205: " 14MWPMOQQPRPTQUSTURVQVOU RPMTM",
+  206: " 14MWTMRMPNOPOSPURVTUUSTQRPPQOS",
+  207: "  6MWUMQV ROMUM",
+  208: " 19MWQMONOPQQSQUPUNSMQM RQQOROUQVSVUUURSQ",
+  209: " 14MWUPTRRSPROPPNRMTNUPUSTURVPV",
+  210: "  6PURURVSVSURU",
+  211: "  7PUSVRVRUSUSWRY",
+  212: " 12PURPRQSQSPRP RRURVSVSURU",
+  213: " 13PURPRQSQSPRP RSVRVRUSUSWRY",
+  214: " 12PURMRR RSMSR RRURVSVSURU",
+  215: " 17NWPNRMSMUNUPRQRRSRSQUP RRURVSVSURU",
+  216: "  3PTRMRQ",
+  217: "  6NVPMPQ RTMTQ",
+  218: " 10NVQMPNPPQQSQTPTNSMQM",
+  219: " 16MWUNSMQMONOPQQTRUSUUSVQVOU RRLRW",
+  220: "  3MWVLNW",
+  221: "  7OVTLRNQPQSRUTW",
+  222: "  7NUPLRNSPSSRUPW",
+  223: "  3PTRLRW",
+  224: "  3LXNRVR",
+  225: "  6LXRNRV RNRVR",
+  226: "  6LXNPVP RNTVT",
+  227: "  6MWOOUU RUOOU",
+  228: "  9MWRORU ROPUT RUPOT",
+  229: "  6PURQRRSRSQRQ",
+  230: "  7PUSMRORQSQSPRP",
+  231: "  7PUSNRNRMSMSORQ",
+  232: "  7LXSOVRSU RNRVR",
+  233: " 12MXRLPW RULSW ROPVP ROSVS",
+  234: " 21LXVRURTSSURVOVNUNSORRQSPSNRMPMONOPQSSUUVVV",
+  235: " 20LXNNOQOSNV RVNUQUSVV RNNQOSOVN RNVQUSUVV",
+  501: "  9I[RFJ[ RRFZ[ RMTWT",
+  502: " 24G\\KFK[ RKFTFWGXHYJYLXNWOTP RKPTPWQXRYTYWXYWZT[K[",
+  503: " 19H]ZKYIWGUFQFOGMILKKNKSLVMXOZQ[U[WZYXZV",
+  504: " 16G\\KFK[ RKFRFUGWIXKYNYSXVWXUZR[K[",
+  505: " 12H[LFL[ RLFYF RLPTP RL[Y[",
+  506: "  9HZLFL[ RLFYF RLPTP",
+  507: " 23H]ZKYIWGUFQFOGMILKKNKSLVMXOZQ[U[WZYXZVZS RUSZS",
+  508: "  9G]KFK[ RYFY[ RKPYP",
+  509: "  3NVRFR[",
+  510: " 11JZVFVVUYTZR[P[NZMYLVLT",
+  511: "  9G\\KFK[ RYFKT RPOY[",
+  512: "  6HYLFL[ RL[X[",
+  513: " 12F^JFJ[ RJFR[ RZFR[ RZFZ[",
+  514: "  9G]KFK[ RKFY[ RYFY[",
+  515: " 22G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF",
+  516: " 14G\\KFK[ RKFTFWGXHYJYMXOWPTQKQ",
+  517: " 25G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF RSWY]",
+  518: " 17G\\KFK[ RKFTFWGXHYJYLXNWOTPKP RRPY[",
+  519: " 21H\\YIWGTFPFMGKIKKLMMNOOUQWRXSYUYXWZT[P[MZKX",
+  520: "  6JZRFR[ RKFYF",
+  521: " 11G]KFKULXNZQ[S[VZXXYUYF",
+  522: "  6I[JFR[ RZFR[",
+  523: " 12F^HFM[ RRFM[ RRFW[ R\\FW[",
+  524: "  6H\\KFY[ RYFK[",
+  525: "  7I[JFRPR[ RZFRP",
+  526: "  9H\\YFK[ RKFYF RK[Y[",
+  527: "  9I[RFJ[ RRFZ[ RMTWT",
+  528: " 24G\\KFK[ RKFTFWGXHYJYLXNWOTP RKPTPWQXRYTYWXYWZT[K[",
+  529: "  6HYLFL[ RLFXF",
+  530: "  9I[RFJ[ RRFZ[ RJ[Z[",
+  531: " 12H[LFL[ RLFYF RLPTP RL[Y[",
+  532: "  9H\\YFK[ RKFYF RK[Y[",
+  533: "  9G]KFK[ RYFY[ RKPYP",
+  534: " 25G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF ROPUP",
+  535: "  3NVRFR[",
+  536: "  9G\\KFK[ RYFKT RPOY[",
+  537: "  6I[RFJ[ RRFZ[",
+  538: " 12F^JFJ[ RJFR[ RZFR[ RZFZ[",
+  539: "  9G]KFK[ RKFY[ RYFY[",
+  540: "  9I[KFYF ROPUP RK[Y[",
+  541: " 22G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF",
+  542: "  9G]KFK[ RYFY[ RKFYF",
+  543: " 14G\\KFK[ RKFTFWGXHYJYMXOWPTQKQ",
+  544: " 10I[KFRPK[ RKFYF RK[Y[",
+  545: "  6JZRFR[ RKFYF",
+  546: " 19I[KKKILGMFOFPGQIRMR[ RYKYIXGWFUFTGSIRM",
+  547: " 21H\\RFR[ RPKMLLMKOKRLTMUPVTVWUXTYRYOXMWLTKPK",
+  548: "  6H\\KFY[ RK[YF",
+  549: " 18G]RFR[ RILJLKMLQMSNTQUSUVTWSXQYMZL[L",
+  550: " 17H\\K[O[LTKPKLLINGQFSFVGXIYLYPXTU[Y[",
+  551: " 20G[G[IZLWOSSLVFV[UXSUQSNQLQKRKTLVNXQZT[Y[",
+  552: " 41F]SHTITLSPRSQUOXMZK[J[IZIWJRKOLMNJPHRGUFXFZG[I[KZMYNWOTP RSPTPWQXRYTYWXYWZU[R[PZOX",
+  553: " 24H\\TLTMUNWNYMZKZIYGWFTFQGOIMLLNKRKVLYMZO[Q[TZVXWV",
+  554: " 35G^TFRGQIPMOSNVMXKZI[G[FZFXGWIWKXMZP[S[VZXXZT[O[KZHYGWFTFRHRJSMUPWRZT\\U",
+  555: " 28H\\VJVKWLYLZKZIYGVFRFOGNINLONPOSPPPMQLRKTKWLYMZP[S[VZXXYV",
+  556: " 28H\\RLPLNKMINGQFTFXG[G]F RXGVNTTRXPZN[L[JZIXIVJULUNV RQPZP",
+  557: " 29G^G[IZMVPQQNRJRGQFPFOGNINLONQOUOXNYMZKZQYVXXVZS[O[LZJXIVIT",
+  558: " 38F^MMKLJJJIKGMFNFPGQIQKPONULYJ[H[GZGX RMRVOXN[L]J^H^G]F\\FZHXLVRUWUZV[W[YZZY\\V",
+  559: " 25IZWVUTSQROQLQIRGSFUFVGWIWLVQTVSXQZO[M[KZJXJVKUMUOV",
+  560: " 25JYT^R[PVOPOJPGRFTFUGVJVMURR[PaOdNfLgKfKdLaN^P\\SZWX",
+  561: " 39F^MMKLJJJIKGMFNFPGQIQKPONULYJ[H[GZGX R^I^G]F\\FZGXIVLTNROPO RROSQSXTZU[V[XZYY[V",
+  562: " 29I\\MRORSQVOXMYKYHXFVFUGTISNRSQVPXNZL[J[IZIXJWLWNXQZT[V[YZ[X",
+  563: " 45@aEMCLBJBICGEFFFHGIIIKHPGTE[ RGTJLLHMGOFPFRGSISKRPQTO[ RQTTLVHWGYFZF\\G]I]K\\PZWZZ[[\\[^Z_YaV",
+  564: " 32E]JMHLGJGIHGJFKFMGNINKMPLTJ[ RLTOLQHRGTFVFXGYIYKXPVWVZW[X[ZZ[Y]V",
+  565: " 29H]TFQGOIMLLNKRKVLYMZO[Q[TZVXXUYSZOZKYHXGVFTFRHRKSNUQWSZU\\V",
+  566: " 31F_SHTITLSPRSQUOXMZK[J[IZIWJRKOLMNJPHRGUFZF\\G]H^J^M]O\\PZQWQUPTO",
+  567: " 32H^ULTNSOQPOPNNNLOIQGTFWFYGZIZMYPWSSWPYNZK[I[HZHXIWKWMXPZS[V[YZ[X",
+  568: " 38F_SHTITLSPRSQUOXMZK[J[IZIWJRKOLMNJPHRGUFYF[G\\H]J]M\\O[PYQVQSPTQUSUXVZX[ZZ[Y]V",
+  569: " 28H\\H[JZLXOTQQSMTJTGSFRFQGPIPKQMSOVQXSYUYWXYWZT[P[MZKXJVJT",
+  570: " 25H[RLPLNKMINGQFTFXG[G]F RXGVNTTRXPZN[L[JZIXIVJULUNV",
+  571: " 33E]JMHLGJGIHGJFKFMGNINKMOLRKVKXLZN[P[RZSYUUXMZF RXMWQVWVZW[X[ZZ[Y]V",
+  572: " 32F]KMILHJHIIGKFLFNGOIOKNOMRLVLYM[O[QZTWVTXPYMZIZGYFXFWGVIVKWNYP[Q",
+  573: " 25C_HMFLEJEIFGHFIFKGLILLK[ RUFK[ RUFS[ RaF_G\\JYNVTS[",
+  574: " 36F^NLLLKKKILGNFPFRGSISLQUQXRZT[V[XZYXYVXUVU R]I]G\\FZFXGVITLPUNXLZJ[H[GZGX",
+  575: " 38F]KMILHJHIIGKFLFNGOIOKNOMRLVLXMZN[P[RZTXVUWSYM R[FYMVWT]RbPfNgMfMdNaP^S[VY[V",
+  576: " 40H]ULTNSOQPOPNNNLOIQGTFWFYGZIZMYPWTTWPZN[K[JZJXKWNWPXQYR[R^QaPcNfLgKfKdLaN^Q[TYZV",
+  583: "  9I[JFR[ RZFR[ RJFZF",
+  601: " 18I\\XMX[ RXPVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  602: " 18H[LFL[ RLPNNPMSMUNWPXSXUWXUZS[P[NZLX",
+  603: " 15I[XPVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  604: " 18I\\XFX[ RXPVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  605: " 18I[LSXSXQWOVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  606: "  9MYWFUFSGRJR[ ROMVM",
+  607: " 23I\\XMX]W`VaTbQbOa RXPVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  608: " 11I\\MFM[ RMQPNRMUMWNXQX[",
+  609: "  9NVQFRGSFREQF RRMR[",
+  610: " 12MWRFSGTFSERF RSMS^RaPbNb",
+  611: "  9IZMFM[ RWMMW RQSX[",
+  612: "  3NVRFR[",
+  613: " 19CaGMG[ RGQJNLMOMQNRQR[ RRQUNWMZM\\N]Q][",
+  614: " 11I\\MMM[ RMQPNRMUMWNXQX[",
+  615: " 18I\\QMONMPLSLUMXOZQ[T[VZXXYUYSXPVNTMQM",
+  616: " 18H[LMLb RLPNNPMSMUNWPXSXUWXUZS[P[NZLX",
+  617: " 18I\\XMXb RXPVNTMQMONMPLSLUMXOZQ[T[VZXX",
+  618: "  9KXOMO[ ROSPPRNTMWM",
+  619: " 18J[XPWNTMQMNNMPNRPSUTWUXWXXWZT[Q[NZMX",
+  620: "  9MYRFRWSZU[W[ ROMVM",
+  621: " 11I\\MMMWNZP[S[UZXW RXMX[",
+  622: "  6JZLMR[ RXMR[",
+  623: " 12G]JMN[ RRMN[ RRMV[ RZMV[",
+  624: "  6J[MMX[ RXMM[",
+  625: " 10JZLMR[ RXMR[P_NaLbKb",
+  626: "  9J[XMM[ RMMXM RM[X[",
+  627: " 24H]QMONMPLRKUKXLZN[P[RZUWWTYPZM RQMSMTNUPWXXZY[Z[",
+  628: " 31I\\UFSGQIOMNPMTLZKb RUFWFYHYKXMWNUORO RROTPVRWTWWVYUZS[Q[OZNYMV",
+  629: " 17I\\JPLNNMOMQNROSRSVR[ RZMYPXRR[P_Ob",
+  630: " 24I[TMQMONMPLSLVMYNZP[R[TZVXWUWRVOTMRKQIQGRFTFVGXI",
+  631: " 19JZWOVNTMQMONOPPRSS RSSOTMVMXNZP[S[UZWX",
+  632: " 23JYTFRGQHQIRJUKXK RXKTMQONRMUMWNYP[S]T_TaSbQbP`",
+  633: " 19H\\IQJOLMNMONOPNTL[ RNTPPRNTMVMXOXRWWTb",
+  634: " 27G\\HQIOKMMMNNNPMUMXNZO[Q[SZUWVUWRXMXJWGUFSFRHRJSMUPWRZT",
+  635: "  9LWRMPTOXOZP[R[TYUW",
+  636: " 19I[OMK[ RYNXMWMUNQROSNS RNSPTQUSZT[U[VZ",
+  637: "  9JZKFMFOGPHX[ RRML[",
+  638: " 21H]OMIb RNQMVMYO[Q[SZUXWT RYMWTVXVZW[Y[[Y\\W",
+  639: " 14I[LMOMNSMXL[ RYMXPWRUURXOZL[",
+  640: " 29JZTFRGQHQIRJUKXK RUKRLPMOOOQQSTTVT RTTPUNVMXMZO\\S^T_TaRbPb",
+  641: " 18J[RMPNNPMSMVNYOZQ[S[UZWXXUXRWOVNTMRM",
+  642: " 13G]PML[ RUMVSWXX[ RIPKNNM[M",
+  643: " 19I[MSMVNYOZQ[S[UZWXXUXRWOVNTMRMPNNPMSIb",
+  644: " 18I][MQMONMPLSLVMYNZP[R[TZVXWUWRVOUNSM",
+  645: "  8H\\SMP[ RJPLNOMZM",
+  646: " 16H\\IQJOLMNMONOPMVMYO[Q[TZVXXTYPYM",
+  647: " 21G]ONMOKQJTJWKYLZN[Q[TZWXYUZRZOXMVMTORSPXMb",
+  648: " 14I[KMMMOOU`WbYb RZMYOWRM]K`Jb",
+  649: " 20F]VFNb RGQHOJMLMMNMPLULXMZO[Q[TZVXXUZP[M",
+  650: " 23F]NMLNJQITIWJZK[M[OZQW RRSQWRZS[U[WZYWZTZQYNXM",
+  651: " 22L\\UUTSRRPRNSMTLVLXMZO[Q[SZTXVRUWUZV[W[YZZY\\V",
+  652: " 23M[MVOSRNSLTITGSFQGPIOMNTNZO[P[RZTXUUURVVWWYW[V",
+  653: " 14MXTTTSSRQROSNTMVMXNZP[S[VYXV",
+  654: " 24L\\UUTSRRPRNSMTLVLXMZO[Q[SZTXZF RVRUWUZV[W[YZZY\\V",
+  655: " 17NXOYQXRWSUSSRRQROSNUNXOZQ[S[UZVYXV",
+  656: " 24OWOVSQUNVLWIWGVFTGSIQQNZKaJdJfKgMfNcOZP[R[TZUYWV",
+  657: " 28L[UUTSRRPRNSMTLVLXMZO[Q[SZTY RVRTYPdOfMgLfLdMaP^S\\U[XY[V",
+  658: " 29M\\MVOSRNSLTITGSFQGPIOMNSM[ RM[NXOVQSSRURVSVUUXUZV[W[YZZY\\V",
+  659: " 16PWSMSNTNTMSM RPVRRPXPZQ[R[TZUYWV",
+  660: " 20PWSMSNTNTMSM RPVRRLdKfIgHfHdIaL^O\\Q[TYWV",
+  661: " 33M[MVOSRNSLTITGSFQGPIOMNSM[ RM[NXOVQSSRURVSVUTVQV RQVSWTZU[V[XZYY[V",
+  662: " 18OWOVQSTNULVIVGUFSGRIQMPTPZQ[R[TZUYWV",
+  663: " 33E^EVGSIRJSJTIXH[ RIXJVLSNRPRQSQTPXO[ RPXQVSSURWRXSXUWXWZX[Y[[Z\\Y^V",
+  664: " 23J\\JVLSNROSOTNXM[ RNXOVQSSRURVSVUUXUZV[W[YZZY\\V",
+  665: " 23LZRRPRNSMTLVLXMZO[Q[SZTYUWUUTSRRQSQURWTXWXYWZV",
+  666: " 24KZKVMSNQMUGg RMUNSPRRRTSUUUWTYSZQ[ RMZO[R[UZWYZV",
+  667: " 27L[UUTSRRPRNSMTLVLXMZO[Q[SZ RVRUUSZPaOdOfPgRfScS\\U[XY[V",
+  668: " 15MZMVOSPQPSSSTTTVSYSZT[U[WZXYZV",
+  669: " 16NYNVPSQQQSSVTXTZR[ RNZP[T[VZWYYV",
+  670: " 16OXOVQSSO RVFPXPZQ[S[UZVYXV RPNWN",
+  671: " 19L[LVNRLXLZM[O[QZSXUU RVRTXTZU[V[XZYY[V",
+  672: " 17L[LVNRMWMZN[O[RZTXUUUR RURVVWWYW[V",
+  673: " 25I^LRJTIWIYJ[L[NZPX RRRPXPZQ[S[UZWXXUXR RXRYVZW\\W^V",
+  674: " 20JZJVLSNRPRQSQZR[U[XYZV RWSVRTRSSOZN[L[KZ",
+  675: " 23L[LVNRLXLZM[O[QZSXUU RVRPdOfMgLfLdMaP^S\\U[XY[V",
+  676: " 23LZLVNSPRRRTTTVSXQZN[P\\Q^QaPdOfMgLfLdMaP^S\\WYZV",
+  677: " 22J\\K[NZQXSVUSWOXKXIWGUFSGRHQJPOPTQXRZT[V[XZYY",
+  683: " 26I[WUWRVOUNSMQMONMPLSLVMYNZP[R[TZVXWUXPXKWHVGTFRFPGNI",
+  684: " 16JZWNUMRMPNNPMSMVNYOZQ[T[VZ RMTUT",
+  685: " 23J[TFRGPJOLNOMTMXNZO[Q[SZUWVUWRXMXIWGVFTF RNPWP",
+  686: " 21H\\VFNb RQMNNLPKSKVLXNZQ[S[VZXXYUYRXPVNSMQM",
+  687: " 16I[XOWNTMQMNNMOLQLSMUOWSZT\\T^S_Q_",
+  700: " 18H\\QFNGLJKOKRLWNZQ[S[VZXWYRYOXJVGSFQF",
+  701: "  5H\\NJPISFS[",
+  702: " 15H\\LKLJMHNGPFTFVGWHXJXLWNUQK[Y[",
+  703: " 16H\\MFXFRNUNWOXPYSYUXXVZS[P[MZLYKW",
+  704: "  7H\\UFKTZT RUFU[",
+  705: " 18H\\WFMFLOMNPMSMVNXPYSYUXXVZS[P[MZLYKW",
+  706: " 24H\\XIWGTFRFOGMJLOLTMXOZR[S[VZXXYUYTXQVOSNRNOOMQLT",
+  707: "  6H\\YFO[ RKFYF",
+  708: " 30H\\PFMGLILKMMONSOVPXRYTYWXYWZT[P[MZLYKWKTLRNPQOUNWMXKXIWGTFPF",
+  709: " 24H\\XMWPURRSQSNRLPKMKLLINGQFRFUGWIXMXRWWUZR[P[MZLX",
+  710: "  6MWRYQZR[SZRY",
+  711: "  9MWSZR[QZRYSZS\\R^Q_",
+  712: " 12MWRMQNROSNRM RRYQZR[SZRY",
+  713: " 15MWRMQNROSNRM RSZR[QZRYSZS\\R^Q_",
+  714: "  9MWRFRT RRYQZR[SZRY",
+  715: " 21I[LKLJMHNGPFTFVGWHXJXLWNVORQRT RRYQZR[SZRY",
+  716: "  3NVRFRM",
+  717: "  6JZNFNM RVFVM",
+  718: " 14KYQFOGNINKOMQNSNUMVKVIUGSFQF",
+  719: " 27H\\PBP_ RTBT_ RYIWGTFPFMGKIKKLMMNOOUQWRXSYUYXWZT[P[MZKX",
+  720: "  3G][BIb",
+  721: " 11KYVBTDRGPKOPOTPYR]T`Vb",
+  722: " 11KYNBPDRGTKUPUTTYR]P`Nb",
+  723: "  3NVRBRb",
+  724: "  3E_IR[R",
+  725: "  6E_RIR[ RIR[R",
+  726: "  6E_IO[O RIU[U",
+  727: "  6G]KKYY RYKKY",
+  728: "  9JZRLRX RMOWU RWOMU",
+  729: "  6MWRQQRRSSRRQ",
+  730: "  8MWSFRGQIQKRLSKRJ",
+  731: "  8MWRHQGRFSGSIRKQL",
+  732: "  9E_UMXP[RXTUW RIR[R",
+  733: " 12H]SBLb RYBRb RLOZO RKUYU",
+  734: " 35E_\\O\\N[MZMYNXPVUTXRZP[L[JZIYHWHUISJRQNRMSKSIRGPFNGMIMKNNPQUXWZY[[[\\Z\\Y",
+  735: " 28G]IIJKKOKUJYI[ R[IZKYOYUZY[[ RIIKJOKUKYJ[I RI[KZOYUYYZ[[",
+  737: "  6KYOBO[ RUBU[",
+  738: "  6F^RBR[ RI[[[",
+  739: "  4F^[BI[[[",
+  740: " 18E_RIQJRKSJRI RIYHZI[JZIY R[YZZ[[\\Z[Y",
+  741: " 33F^RHNLKPJSJUKWMXOXQWRU RRHVLYPZSZUYWWXUXSWRU RRUQYP\\ RRUSYT\\ RP\\T\\",
+  742: " 26F^RNQKPINHMHKIJKJOKRLTNWR\\ RRNSKTIVHWHYIZKZOYRXTVWR\\",
+  743: " 20F^RGPJLOIR RRGTJXO[R RIRLUPZR] R[RXUTZR]",
+  744: " 48F^RTTWVXXXZW[U[SZQXPVPSQ RSQUOVMVKUISHQHOINKNMOOQQ RQQNPLPJQISIUJWLXNXPWRT RRTQYP\\ RRTSYT\\ RP\\T\\",
+  745: " 55F^RRR[Q\\ RRVQ\\ RRIQHOHNINKONRR RRISHUHVIVKUNRR RRRNOLNJNIOIQJR RRRVOXNZN[O[QZR RRRNULVJVIUISJR RRRVUXVZV[U[SZR",
+  746: " 55F^ISJSLTMVMXLZ RISIRJQLQMRNTNWMYLZ RRGPIOLOOQUQXPZR\\ RRGTIULUOSUSXTZR\\ R[S[RZQXQWRVTVWWYXZ R[SZSXTWVWXXZ RKVYV",
+  750: " 18PSSRRSQSPRPQQPRPSQSSRUQV RQQQRRRRQQQ",
+  751: " 16PTQPPQPSQTSTTSTQSPQP RRQQRRSSRRQ",
+  752: "  9NVPOTU RTOPU RNRVR",
+  753: " 28MWRKQMOPMR RRKSMUPWR RRMOQ RRMUQ RROPQ RROTQ RQQSQ RMRWR",
+  754: " 26MWMRMQNOONQMSMUNVOWQWR RPNTN ROOUO RNPVP RNQVQ RMRWR",
+  755: " 14LRLFLRRRLF RLIPQ RLLOR RLOMQ",
+  756: " 10MWRKQMOPMR RRKSMUPWR",
+  757: " 11MWWRWQVOUNSMQMONNOMQMR",
+  758: " 13G]]R]P\\MZJWHTGPGMHJJHMGPGR",
+  759: " 11MWMRMSNUOVQWSWUVVUWSWR",
+  760: "  7LXLPNRQSSSVRXP",
+  761: "  6RURUTTURTPRO",
+  762: "  7RVRRUPVNVLUKTK",
+  763: "  7NRRROPNNNLOKPK",
+  764: " 21MWWHVGTFQFOGNHMJMLNNOOUSVTWVWXVZU[S\\P\\N[MZ",
+  765: " 21G]IWHVGTGQHOINKMMMONPOTUUVWWYW[V\\U]S]P\\N[M",
+  766: " 31G]RRTUUVWWYW[V\\U]S]Q\\O[NYMWMUNTOPUOVMWKWIVHUGSGQHOINKMMMONPORR",
+  767: " 22H\\KFK[ RHF[FQP[Z RZV[Y\\[ RZVZY RWYZY RWYZZ\\[",
+  768: " 30KYUARBPCNELHKLKRLUNWQXSXVWXUYR RKPLMNKQJSJVKXMYPYVXZV]T_R`Oa",
+  796: "  3>f>RfR",
+  797: "  3D`D``D",
+  798: "  3RRR>Rf",
+  799: "  3D`DD``",
+  800: "  3D`DR`R",
+  801: "  3F^FY^K",
+  802: "  3KYK^YF",
+  803: "  3RRRDR`",
+  804: "  3KYKFY^",
+  805: "  3F^FK^Y",
+  806: "  3KYKRYR",
+  807: "  3MWMWWM",
+  808: "  3RRRKRY",
+  809: "  3MWMMWW",
+  810: "  8GRRGPGMHJJHMGPGR",
+  811: "  8GRGRGTHWJZM\\P]R]",
+  812: "  8R]R]T]W\\ZZ\\W]T]R",
+  813: "  8R]]R]P\\MZJWHTGRG",
+  814: "  9D`DOGQKSPTTTYS]Q`O",
+  815: "  9PUUDSGQKPPPTQYS]U`",
+  816: "  9OTODQGSKTPTTSYQ]O`",
+  817: "  9D`DUGSKQPPTPYQ]S`U",
+  818: "  5KYRJYNKVRZ",
+  819: "  5JZJRNKVYZR",
+  820: "  5KYKVKNYVYN",
+  821: "  5JZLXJPZTXL",
+  822: " 23JZJ]L]O\\Q[TXUVVSVOULTJSIQIPJOLNONSOVPXS[U\\X]Z]",
+  823: " 23I]]Z]X\\U[SXPVOSNONLOJPIQISJTLUOVSVVUXT[Q\\O]L]J",
+  824: " 23JZZGXGUHSIPLONNQNUOXPZQ[S[TZUXVUVQUNTLQIOHLGJG",
+  825: " 23G[GJGLHOIQLTNUQVUVXUZT[S[QZPXOUNQNNOLPISHUGXGZ",
+  826: " 21E[EPFRHTJUMVQVUUXSZP[NZLWLSMQNNPLSKVKYL\\M^",
+  827: " 19EYETHVKWPWSVVTXQYNYLXKVKSLPNNQMTMYN\\P_",
+  828: " 26OUQOOQOSQUSUUSUQSOQO RQPPQPSQTSTTSTQSPQP RRQQRRSSRRQ",
+  829: " 11RWRMSMUNVOWQWSVUUVSWRW",
+  830: "  9D`DRJR RORUR RZR`R",
+  831: "  5D`DUDO`O`U",
+  832: "  6JZRDJR RRDZR",
+  833: "  9D`DR`R RJYZY RP`T`",
+  834: "  9D`DR`R RDRRb R`RRb",
+  840: " 18KYQKNLLNKQKSLVNXQYSYVXXVYSYQXNVLSKQK",
+  841: "  6LXLLLXXXXLLL",
+  842: "  5KYRJKVYVRJ",
+  843: "  6LXRHLRR\\XRRH",
+  844: " 12JZRIPOJOOSMYRUWYUSZOTORI",
+  845: "  6KYRKRY RKRYR",
+  846: "  6MWMMWW RWMMW",
+  847: "  9MWRLRX RMOWU RWOMU",
+  850: " 35NVQNOONQNSOUQVSVUUVSVQUOSNQN ROQOS RPPPT RQOQU RRORU RSOSU RTPTT RUQUS",
+  851: " 27NVNNNVVVVNNN ROOOU RPOPU RQOQU RRORU RSOSU RTOTU RUOUU",
+  852: " 17MWRLMUWURL RROOT RROUT RRRQT RRRST",
+  853: " 17LULRUWUMLR RORTU RORTO RRRTS RRRTQ",
+  854: " 17MWRXWOMORX RRUUP RRUOP RRRSP RRRQP",
+  855: " 17OXXROMOWXR RURPO RURPU RRRPQ RRRPS",
+  856: " 22LXRLNWXPLPVWRL RRRRL RRRLP RRRNW RRRVW RRRXP",
+  857: " 11RYRKRY RRKYNRQ RSMVNSO",
+  860: " 13MWRLRX ROOUO RMUOWQXSXUWWU",
+  861: " 11LXRLRX RLQMOWOXQ RPWTW",
+  862: " 14KYMNWX RWNMX ROLLOKQ RULXOYQ",
+  863: " 18I[NII[ RVI[[ RMM[[ RWMI[ RNIVI RMMWM",
+  864: " 21I[RGRV RMJWP RWJMP RIVL\\ R[VX\\ RIV[V RL\\X\\",
+  865: " 11G[MJSV RKPSL RG\\[\\[RG\\",
+  866: " 14LXPLPPLPLTPTPXTXTTXTXPTPTLPL",
+  867: " 32KYYPXNVLSKQKNLLNKQKSLVNXQYSYVXXVYT RYPWNUMSMQNPOOQOSPUQVSWUWWVYT",
+  868: " 10KYRJKVYVRJ RRZYNKNRZ",
+  869: " 34G]PIPGQFSFTGTI RGZHXJVKTLPLKMJOIUIWJXKXPYTZV\\X]Z RGZ]Z RQZP[Q\\S\\T[SZ",
+  870: " 64JZRMRS RRSQ\\ RRSS\\ RQ\\S\\ RRMQJPHNG RQJNG RRMSJTHVG RSJVG RRMNKLKJM RPLLLJM RRMVKXKZM RTLXLZM RRMPNOOOR RRMPOOR RRMTNUOUR RRMTOUR",
+  871: " 94JZRIRK RRNRP RRSRU RRYQ\\ RRYS\\ RQ\\S\\ RRGQIPJ RRGSITJ RPJRITJ RRKPNNOMN RRKTNVOWN RNOPORNTOVO RRPPSNTLTKRKSLT RRPTSVTXTYRYSXT RNTPTRSTTVT RRUPXOYMZLZKYJWJYLZ RRUTXUYWZXZYYZWZYXZ RMZOZRYUZWZ",
+  872: " 40JZRYQ\\ RRYS\\ RQ\\S\\ RRYUZXZZXZUYTWTYRZOYMWLUMVJUHSGQGOHNJOMMLKMJOKRMTKTJUJXLZOZRY",
+  873: " 32JZRYQ\\ RRYS\\ RQ\\S\\ RRYVXVVXUXRZQZLYIXHVHTGPGNHLHKIJLJQLRLUNVNXRY",
+  874: " 15I[IPKR RLKNP RRGRO RXKVP R[PYR",
+  899: "  6QSRQQRRSSRRQ",
+  900: " 10PTQPPQPSQTSTTSTQSPQP",
+  901: " 14NVQNOONQNSOUQVSVUUVSVQUOSNQN",
+  902: " 18MWQMONNOMQMSNUOVQWSWUVVUWSWQVOUNSMQM",
+  903: " 18KYQKNLLNKQKSLVNXQYSYVXXVYSYQXNVLSKQK",
+  904: " 22G]PGMHJJHMGPGTHWJZM\\P]T]W\\ZZ\\W]T]P\\MZJWHTGPG",
+  905: " 34AcPALBJCGEEGCJBLAPATBXCZE]G_JaLbPcTcXbZa]__]aZbXcTcPbLaJ_G]EZCXBTAPA",
+  906: " 34<hP<K=G?DAAD?G=K<P<T=Y?]A`DcGeKgPhThYg]e`cc`e]gYhThPgKeGcD`A]?Y=T<P<",
+  907: " 50){O)I*E+@-;073370;-@+E*I)O)U*[+_-d0i3m7q;t@wEyIzO{U{[z_ydwitmqqmtiwdy_z[{U{OzIyEw@t;q7m3i0d-_+[*U)O)",
+  908: " 34>fRAPCMDJDGCEA>H@JAMAZB]D_G`M`PaRc RRATCWDZD]C_AfHdJcMcZb]`_]`W`TaRc",
+  909: " 33AcRAPCMDJDGCEABGAKAPBTDXG\\L`Rc RRATCWDZD]C_AbGcKcPbT`X]\\X`Rc RBHbH",
+  997: "  3MWMXWX",
+  998: "  3JZJZZZ",
+  999: "  3JZJ]Z]",
+  1001: " 18KYRKMX RRNVX RRKWX ROTTT RKXPX RTXYX",
+  1002: " 35JZNKNX ROKOX RLKSKVLWNVPSQ RSKULVNUPSQ ROQSQVRWTWUVWSXLX RSQURVTVUUWSX",
+  1003: " 24KYVLWKWOVLTKQKOLNMMPMSNVOWQXTXVWWU RQKOMNPNSOVQX",
+  1004: " 26JZNKNX ROKOX RLKSKVLWMXPXSWVVWSXLX RSKULVMWPWSVVUWSX",
+  1005: " 22JYNKNX ROKOX RSOSS RLKVKVOUK ROQSQ RLXVXVTUX",
+  1006: " 20JXNKNX ROKOX RSOSS RLKVKVOUK ROQSQ RLXQX",
+  1007: " 36K[VLWKWOVLTKQKOLNMMPMSNVOWQXTXVW RQKOMNPNSOVQX RTXUWVU RVSVX RWSWX RTSYS",
+  1008: " 27J[NKNX ROKOX RVKVX RWKWX RLKQK RTKYK ROQVQ RLXQX RTXYX",
+  1009: " 12NWRKRX RSKSX RPKUK RPXUX",
+  1010: " 19LXSKSURWQX RTKTUSWQXPXNWMUNTOUNV RQKVK",
+  1011: " 27JZNKNX ROKOX RWKOS RQQVX RRQWX RLKQK RTKYK RLXQX RTXYX",
+  1012: " 14KXOKOX RPKPX RMKRK RMXWXWTVX",
+  1013: " 30I\\MKMX RNNRX RNKRU RWKRX RWKWX RXKXX RKKNK RWKZK RKXOX RUXZX",
+  1014: " 21JZNKNX ROMVX ROKVV RVKVX RLKOK RTKXK RLXPX",
+  1015: " 32KZQKOLNMMPMSNVOWQXTXVWWVXSXPWMVLTKQK RQKOMNPNSOVQX RTXVVWSWPVMTK",
+  1016: " 25JYNKNX ROKOX RLKSKVLWNWOVQSROR RSKULVNVOUQSR RLXQX",
+  1017: " 47KZQKOLNMMPMSNVOWQXTXVWWVXSXPWMVLTKQK RQKOMNPNSOVQX RTXVVWSWPVMTK RPWPUQTSTTUUZV[W[XZ RTUUXVZW[",
+  1018: " 37JZNKNX ROKOX RLKSKVLWNWOVQSROR RSKULVNVOUQSR RLXQX RSRTSUWVXWXXW RSRUSVWWX",
+  1019: " 32KZVMWKWOVMULSKQKOLNMNOOPQQTRVSWT RNNOOQPTQVRWSWVVWTXRXPWOVNTNXOV",
+  1020: " 16KZRKRX RSKSX RNKMOMKXKXOWK RPXUX",
+  1021: " 20J[NKNUOWQXTXVWWUWK ROKOUPWQX RLKQK RUKYK",
+  1022: " 15KYMKRX RNKRU RWKRX RKKPK RTKYK",
+  1023: " 24I[LKOX RMKOT RRKOX RRKUX RSKUT RXKUX RJKOK RVKZK",
+  1024: " 21KZNKVX ROKWX RWKNX RLKQK RTKYK RLXQX RTXYX",
+  1025: " 20LYNKRRRX ROKSR RWKSRSX RLKQK RTKYK RPXUX",
+  1026: " 16LYVKNX RWKOX ROKNONKWK RNXWXWTVX",
+  1027: " 18KYRKMX RRNVX RRKWX ROTTT RKXPX RTXYX",
+  1028: " 35JZNKNX ROKOX RLKSKVLWNVPSQ RSKULVNUPSQ ROQSQVRWTWUVWSXLX RSQURVTVUUWSX",
+  1029: " 14KXOKOX RPKPX RMKWKWOVK RMXRX",
+  1030: " 15KYRKLX RRMWX RRKXX RMWVW RLXXX",
+  1031: " 22JYNKNX ROKOX RSOSS RLKVKVOUK ROQSQ RLXVXVTUX",
+  1032: " 16LYVKNX RWKOX ROKNONKWK RNXWXWTVX",
+  1033: " 27J[NKNX ROKOX RVKVX RWKWX RLKQK RTKYK ROQVQ RLXQX RTXYX",
+  1034: " 44KZQKOLNMMPMSNVOWQXTXVWWVXSXPWMVLTKQK RQKOMNPNSOVQX RTXVVWSWPVMTK RQOQT RTOTT RQQTQ RQRTR",
+  1035: " 12NWRKRX RSKSX RPKUK RPXUX",
+  1036: " 27JZNKNX ROKOX RWKOS RQQVX RRQWX RLKQK RTKYK RLXQX RTXYX",
+  1037: " 15KYRKMX RRNVX RRKWX RKXPX RTXYX",
+  1038: " 30I\\MKMX RNNRX RNKRU RWKRX RWKWX RXKXX RKKNK RWKZK RKXOX RUXZX",
+  1039: " 21JZNKNX ROMVX ROKVV RVKVX RLKOK RTKXK RLXPX",
+  1040: " 36JZMJLM RXJWM RPPOS RUPTS RMVLY RXVWY RMKWK RMLWL RPQTQ RPRTR RMWWW RMXWX",
+  1041: " 32KZQKOLNMMPMSNVOWQXTXVWWVXSXPWMVLTKQK RQKOMNPNSOVQX RTXVVWSWPVMTK",
+  1042: " 21J[NKNX ROKOX RVKVX RWKWX RLKYK RLXQX RTXYX",
+  1043: " 25JYNKNX ROKOX RLKSKVLWNWOVQSROR RSKULVNVOUQSR RLXQX",
+  1044: " 20K[MKRQ RNKSQMX RMKWKXOVK RNWWW RMXWXXTVX",
+  1045: " 16KZRKRX RSKSX RNKMOMKXKXOWK RPXUX",
+  1046: " 33KZMONLOKPKQLRORX RXOWLVKUKTLSOSX RMONMOLPLQMRO RXOWMVLULTMSO RPXUX",
+  1047: " 40KZRKRX RSKSX RQNNOMQMRNTQUTUWTXRXQWOTNQN RQNOONQNROTQU RTUVTWRWQVOTN RPKUK RPXUX",
+  1048: " 21KZNKVX ROKWX RWKNX RLKQK RTKYK RLXQX RTXYX",
+  1049: " 33J[RKRX RSKSX RLPMONOOSQU RTUVSWOXOYP RMONROTQUTUVTWRXO RPKUK RPXUX",
+  1050: " 35KZMVNXQXMRMONMOLQKTKVLWMXOXRTXWXXV ROUNRNOOMQK RTKVMWOWRVU RNWPW RUWWW",
+  1051: " 18KYTKKX RSMTX RTKUX RNTTT RIXNX RRXWX",
+  1052: " 34JYPKLX RQKMX RNKUKWLWNVPSQ RUKVLVNUPSQ ROQRQTRUSUUTWQXJX RRQTSTUSWQX",
+  1053: " 25KXVLWLXKWNVLTKRKPLOMNOMRMUNWPXRXTWUU RRKPMOONRNVPX",
+  1054: " 26JYPKLX RQKMX RNKTKVLWNWQVTUVTWQXJX RTKULVNVQUTTVSWQX",
+  1055: " 22JYPKLX RQKMX RSORS RNKXKWNWK ROQRQ RJXTXUUSX",
+  1056: " 20JXPKLX RQKMX RSORS RNKXKWNWK ROQRQ RJXOX",
+  1057: " 33KYVLWLXKWNVLTKRKPLOMNOMRMUNWPXRXTWUVVS RRKPMOONRNVPX RRXTVUS RSSXS",
+  1058: " 27J[PKLX RQKMX RXKTX RYKUX RNKSK RVK[K ROQVQ RJXOX RRXWX",
+  1059: " 12NWTKPX RUKQX RRKWK RNXSX",
+  1060: " 19LXUKRUQWPX RVKSURWPXOXMWLUMTNUMV RSKXK",
+  1061: " 27JZPKLX RQKMX RYKOR RRPTX RSPUX RNKSK RVK[K RJXOX RRXWX",
+  1062: " 14KXQKMX RRKNX ROKTK RKXUXVUTX",
+  1063: " 30I\\OKKX ROMPX RPKQV RYKPX RYKUX RZKVX RMKPK RYK\\K RIXMX RSXXX",
+  1064: " 21JZPKLX RPKTX RQKTU RXKTX RNKQK RVKZK RJXNX",
+  1065: " 32KYRKPLOMNOMRMUNWPXRXTWUVVTWQWNVLTKRK RRKPMOONRNVPX RRXTVUTVQVMTK",
+  1066: " 24JYPKLX RQKMX RNKUKWLXMXOWQTROR RUKWMWOVQTR RJXOX",
+  1067: " 46KYRKPLOMNOMRMUNWPXRXTWUVVTWQWNVLTKRK RRKPMOONRNVPX RRXTVUTVQVMTK ROWOVPUQURVRZS[T[UZ RRVSZT[",
+  1068: " 35JZPKLX RQKMX RNKUKWLXMXOWQTROR RUKWMWOVQTR RSRTWUXVXWW RSRTSUWVX RJXOX",
+  1069: " 28KZWLXLYKXNWLUKRKPLOMOOPPUSVT RONPOURVSVVUWSXPXNWMULXMWNW",
+  1070: " 16KZTKPX RUKQX RPKNNOKZKYNYK RNXSX",
+  1071: " 20J[PKMUMWOXSXUWVUYK RQKNUNWOX RNKSK RWK[K",
+  1072: " 15KYOKPX RPKQV RYKPX RMKRK RVK[K",
+  1073: " 24I[NKMX ROKNV RTKMX RTKSX RUKTV RZKSX RLKQK RXK\\K",
+  1074: " 21KZPKTX RQKUX RYKLX RNKSK RVK[K RJXOX RRXWX",
+  1075: " 20LYPKRQPX RQKSQ RYKSQQX RNKSK RVK[K RNXSX",
+  1076: " 16LYXKLX RYKMX RQKONPKYK RLXUXVUTX",
+  1101: " 32LZQOPPPQOQOPQOTOVQVWWXXX RTOUQUWWX RURRSPTOUOWPXSXTWUU RRSPUPWQX",
+  1102: " 29JYNKNX ROKOX RORPPROTOVPWRWUVWTXRXPWOU RTOUPVRVUUWTX RLKOK",
+  1103: " 24LXVQUQURVRVQUPSOQOOPNRNUOWQXSXUWVV RQOPPOROUPWQX",
+  1104: " 32L[VKVX RWKWX RVRUPSOQOOPNRNUOWQXSXUWVU RQOPPOROUPWQX RTKWK RVXYX",
+  1105: " 26LXOSVSVRUPSOQOOPNRNUOWQXSXUWVV RUSUQSO RQOPPOROUPWQX",
+  1106: " 20LWTKULUMVMVLTKRKPMPX RRKQMQX RNOSO RNXSX",
+  1107: " 42LYQOOQOSQUSUUSUQSOQO RQOPQPSQU RSUTSTQSO RTPUOVO RPTOUOXPYTYVZ ROWPXTXVYV[T\\P\\N[NYPX",
+  1108: " 28J[NKNX ROKOX RORPPROTOVPWRWX RTOUPVRVX RLKOK RLXQX RTXYX",
+  1109: " 18NWRKRLSLSKRK RRORX RSOSX RPOSO RPXUX",
+  1110: " 23NWSKSLTLTKSK RSOSZR\\ RTOTZR\\P\\O[OZPZP[O[ RQOTO",
+  1111: " 27JZNKNX ROKOX RWOOU RRSVX RSSWX RLKOK RTOYO RLXQX RTXYX",
+  1112: " 12NWRKRX RSKSX RPKSK RPXUX",
+  1113: " 44F_JOJX RKOKX RKRLPNOPORPSRSX RPOQPRRRX RSRTPVOXOZP[R[X RXOYPZRZX RHOKO RHXMX RPXUX RXX]X",
+  1114: " 28J[NONX ROOOX RORPPROTOVPWRWX RTOUPVRVX RLOOO RLXQX RTXYX",
+  1115: " 28LYQOOPNRNUOWQXTXVWWUWRVPTOQO RQOPPOROUPWQX RTXUWVUVRUPTO",
+  1116: " 32JYNON\\ ROOO\\ RORPPROTOVPWRWUVWTXRXPWOU RTOUPVRVUUWTX RLOOO RL\\Q\\",
+  1117: " 29KYUOU\\ RVOV\\ RURTPROPONPMRMUNWPXRXTWUU RPOOPNRNUOWPX RS\\X\\",
+  1118: " 22KXOOOX RPOPX RPRQPSOUOVPVQUQUPVP RMOPO RMXRX",
+  1119: " 26LYTOUPUQVQVPTOQOOPORQSTTVU ROQQRTSVTVWTXQXOWOVPVPWQX",
+  1120: " 14LWPKPVRXTXUWUV RQKQVRX RNOTO",
+  1121: " 28J[NONUOWQXSXUWVU ROOOUPWQX RVOVX RWOWX RLOOO RTOWO RVXYX",
+  1122: " 15KYNORX ROORV RVORX RLOQO RTOXO",
+  1123: " 24I[LOOX RMOOU RROOX RROUX RSOUU RXOUX RJOOO RVOZO",
+  1124: " 21KYNOUX ROOVX RVONX RLOQO RTOXO RLXPX RSXXX",
+  1125: " 23KYNORX ROORV RVORXP[N\\M\\L[LZMZM[L[ RLOQO RTOXO",
+  1126: " 16LXUONX RVOOX ROONQNOVO RNXVXVVUX",
+  1127: " 32K[QOOPNQMSMUNWPXQXSWUUWRXO RQOOQNSNUOWPX RQOSOUPWWXX RSOTPVWXXYX",
+  1128: " 40KXRKPMOOMUK\\ RQLPNNTL\\ RRKTKVLVNUPRQ RTKULUNTPRQ RRQTRUTUVTWRXQXOWNT RRQSRTTTVRX",
+  1129: " 19KYLQNOPORPSSSXR\\ RLQNPPPRQSS RWOVRSXQ\\",
+  1130: " 39KYSOQOOPNQMSMUNWPXRXTWUVVTVRUPRNQLQKRJTJUKVM RQOOQNSNVPX RRXTVUTUQSO RQLRKTKVM",
+  1131: " 27LXVPTOQOOPOQPRRS RQOPPPQRS RRSOTNUNWPXSXUW RRSPTOUOWPX",
+  1132: " 28LWRKQLQMSNVNVMSNPOOPNRNTOVPWRXSYS[R\\P\\O[ RSNQOPPOROTPVRX",
+  1133: " 26IYJRKPLONOOPOQMX RMONPNQLX ROQPPROTOVPVRS\\ RTOUPURR\\",
+  1134: " 35IYJSKQLPNPOQOVPX RMPNQNUOWPXQXSWTVUTVQVNULTKRKQLQNRPURWS RQXSVTTUQUNTK",
+  1135: " 13NWROPVPWQXSXUWVU RSOQVQWRX",
+  1136: " 26KYOOLX RPOMX RUOVPWPVOTORQOR RORPSRWTXVWWU RORQSSWTX",
+  1137: " 15LXLKNKPLWX RNKOLVX RRPMX RRPNX",
+  1138: " 26KZOOK\\ RPOL\\ RNUNWOXQXSWTV RVOTVTWUXWXXWYU RWOUVUWVX",
+  1139: " 19JYNOMX ROONUMX RVRVOWOVRTUQWNXMX RLOOO",
+  1140: " 36MXRKQLQMSNVN RTNQOPPPRRSUS RTNROQPQRRS RSSPTOUOWQXSYTZT[S\\Q\\ RSSQTPUPWQX",
+  1141: " 28KXQOOPNQMSMUNWPXRXTWUVVTVRUPSOQO RQOOQNSNVPX RRXTVUTUQSO",
+  1142: " 20IZPPMX RPPNX RTPSX RTPTX RKQMOXO RKQMPXP",
+  1143: " 29JXSOQOOPNQMSJ\\ RQOOQNSK\\ RSOUPVRVTUVTWRXPXNWMU RSOUQUTTVRX",
+  1144: " 28K[YOQOOPNQMSMUNWPXRXTWUVVTVRUPYP RQOOQNSNVPX RRXTVUTUQSO",
+  1145: " 14KZSPQX RSPRX RMQOOXO RMQOPXP",
+  1146: " 24JXKRLPMOOOPPPROUOWPX RNOOPORNUNWPXQXSWUUVRVOUOVP",
+  1147: " 35KZOPNQMSMUNWPXRXUWWUXRXPWOUOTPSRRUO\\ RMUNVPWRWUVWTXR RXQWPUPSR RRUQXP\\",
+  1148: " 17KXMONOPPS[T\\ RNOOPR[T\\U\\ RVOTRNYL\\",
+  1149: " 28I[TKQ\\ RUKP\\ RJRKPLONOOPOVPWSWUVWT RMONPNTOWPXSXUWWTXRYO",
+  1150: " 36JZNPPPPONPMQLSLUMWNXPXQWRUSR RLUNWPWRU RRRRWSXUXWVXTXRWPVOVPWP RRUSWUWWV",
+  1151: " 32KZVOTVTWUXWXXWYU RWOUVUWVX RUSUQSOQOOPNQMSMUNWPXRXTV RQOOQNSNVPX",
+  1152: " 32JXOKMR RPKNRNVPX RNROPQOSOUPVRVTUVTWRXPXNWMUMR RSOUQUTTVRX RMKPK",
+  1153: " 22KXUPUQVQUPSOQOOPNQMSMUNWPXRXTWUV RQOOQNSNVPX",
+  1154: " 35KZWKTVTWUXWXXWYU RXKUVUWVX RUSUQSOQOOPNQMSMUNWPXRXTV RQOOQNSNVPX RUKXK",
+  1155: " 23KWNURTTSURUPSOQOOPNQMSMUNWPXRXTWUV RQOOQNSNVPX",
+  1156: " 23MXWKXLXKVKTLSNPYO[N\\ RVKULTNQYP[N\\L\\L[M\\ RPOVO",
+  1157: " 34KYVOTVSYR[ RWOUVTYR[P\\M\\L[M[N\\ RUSUQSOQOOPNQMSMUNWPXRXTV RQOOQNSNVPX",
+  1158: " 29KZPKLX RQKMX ROQPPROTOVPVRUUUWVX RTOUPURTUTWUXWXXWYU RNKQK",
+  1159: " 26MWSKSLTLTKSK RNROPPOROSPSRRURWSX RQORPRRQUQWRXTXUWVU",
+  1160: " 26MWTKTLULUKTK RORPPQOSOTPTRRYQ[O\\M\\M[N\\ RROSPSRQYP[O\\",
+  1161: " 32KXPKLX RQKMX RVPUQVQVPUOTORQPROR RORPSQWRXTXUWVU RORQSRWSX RNKQK",
+  1162: " 16NVSKPVPWQXSXTWUU RTKQVQWRX RQKTK",
+  1163: " 46F^GRHPIOKOLPLQJX RJOKPKQIX RLQMPOOQOSPSQQX RQORPRQPX RSQTPVOXOZPZRYUYWZX RXOYPYRXUXWYX[X\\W]U",
+  1164: " 33J[KRLPMOOOPPPQNX RNOOPOQMX RPQQPSOUOWPWRVUVWWX RUOVPVRUUUWVXXXYWZU",
+  1165: " 28KXQOOPNQMSMUNWPXRXTWUVVTVRUPSOQO RQOOQNSNVPX RRXTVUTUQSO",
+  1166: " 35JYKRLPMOOOPPPQM\\ RNOOPOQL\\ RPQROTOVPWRWTVVUWSXQXOVOT RTOVQVTUVSX RJ\\O\\",
+  1167: " 28KYVOR\\ RWOS\\ RUSUQSOQOOPNQMSMUNWPXRXTV RQOOQNSNVPX RP\\U\\",
+  1168: " 22LXMRNPOOQORPRQPX RPOQPQQOX RRQSPUOVOWPWQVQWP",
+  1169: " 24LYVPVQWQVPTOQOOPORQSTTVU ROQQRTSVTVWTXQXOWNVOVOW",
+  1170: " 16NWSKPVPWQXSXTWUU RTKQVQWRX RPOUO",
+  1171: " 33IZJRKPLONOOPORNUNWOX RMONPNRMUMWOXQXSWTV RVOTVTWUXWXXWYU RWOUVUWVX",
+  1172: " 24JXKRLPMOOOPPPROUOWPX RNOOPORNUNWPXQXSWUUVRVOUOVP",
+  1173: " 37H\\IRJPKOMONPNRMUMWNX RLOMPMRLULWNXOXQWRV RTORVRWTX RUOSVSWTXUXWWYUZRZOYOZP",
+  1174: " 38JZMRNPPOROSPSR RQORPRRQUPWNXMXLWLVMVLW RXPWQXQXPWOVOTPSRRURWSX RQUQWRXTXVWWU",
+  1175: " 35IYJRKPLONOOPORNUNWOX RMONPNRMUMWOXQXSWTV RVOTVSYR[ RWOUVTYR[P\\M\\L[M[N\\",
+  1176: " 27KYWOWPVQNVMWMX RNQOOROUQ ROPRPUQVQ RNVOVRWUW ROVRXUXVV",
+  1177: " 39H[RKSLSMTMTLRKOKMLLNLX ROKNLMNMX RXKYLYMZMZLXKVKTMTX RVKUMUX RJOWO RJXOX RRXWX",
+  1178: " 29J[UKVLWLWKQKOLNNNX RQKPLONOX RVOVX RWOWX RLOWO RLXQX RTXYX",
+  1179: " 27J[WKQKOLNNNX RQKPLONOX RUKVLVX RWKWX RLOVO RLXQX RTXYX",
+  1180: " 48F_PKQLQMRMRLPKMKKLJNJX RMKLLKNKX RYKZL[L[KUKSLRNRX RUKTLSNSX RZOZX R[O[X RHO[O RHXMX RPXUX RXX]X",
+  1181: " 46F_PKQLQMRMRLPKMKKLJNJX RMKLLKNKX R[KUKSLRNRX RUKTLSNSX RYKZLZX R[K[X RHOZO RHXMX RPXUX RXX]X",
+  1182: " 12NWRORX RSOSX RPOSO RPXUX",
+  1184: " 21LXVPTOROPPOQNSNUOWQXSXUW RROPQOSOVQX ROSSS",
+  1185: " 35LYSKQLPMOONRNUOWPXRXTWUVVTWQWNVLUKSK RSKQMPOOSOVPX RRXTVUTVPVMUK ROQVQ",
+  1186: " 34KZTKQ\\ RUKP\\ RQONPMRMUNWQXTXWWXUXRWPTOQO RQOOPNRNUOWQX RTXVWWUWRVPTO",
+  1187: " 22LXUPVRVQUPSOQOOPNRNTOVRX RQOOQOTPVRXSYS[R\\P\\",
+  1191: " 45I[VKWLXLVKSKQLPMOOLYK[J\\ RSKQMPOMYL[J\\H\\H[I\\ RZK[L[KYKWLVNSYR[Q\\ RYKXLWNTYS[Q\\O\\O[P\\ RLOYO",
+  1192: " 38IZVKWLXLXKSKQLPMOOLYK[J\\ RSKQMPOMYL[J\\H\\H[I\\ RVOTVTWUXWXXWYU RWOUVUWVX RLOWO",
+  1193: " 38IZVKWL RXKSKQLPMOOLYK[J\\ RSKQMPOMYL[J\\H\\H[I\\ RWKTVTWUXWXXWYU RXKUVUWVX RLOVO",
+  1194: " 63F^SKTLTM RULSKPKNLMMLOIYH[G\\ RPKNMMOJYI[G\\E\\E[F\\ RZK[L\\L\\KWKUL RTMSOPYO[N\\ RWKUMTOQYP[N\\L\\L[M\\ RZOXVXWYX[X\\W]U R[OYVYWZX RIO[O",
+  1195: " 63F^SKTLTM RULSKPKNLMMLOIYH[G\\ RPKNMMOJYI[G\\E\\E[F\\ RZK[L R\\KWKUL RTMSOPYO[N\\ RWKUMTOQYP[N\\L\\L[M\\ R[KXVXWYX[X\\W]U R\\KYVYWZX RIOZO",
+  1196: " 20MWNROPPOROSPSRRURWSX RQORPRRQUQWRXTXUWVU",
+  1200: " 28LYQKOLNONTOWQXTXVWWTWOVLTKQK RQKPLOOOTPWQX RTXUWVTVOULTK",
+  1201: " 10LYPNSKSX RRLRX ROXVX",
+  1202: " 35LYOMONNNNMOLQKTKVLWNVPTQQROSNUNX RTKULVNUPTQ RNWOVPVSWVWWV RPVSXVXWVWU",
+  1203: " 39LYOMONNNNMOLQKTKVLWNVPTQ RTKULVNUPTQ RRQTQVRWTWUVWTXQXOWNVNUOUOV RTQURVTVUUWTX",
+  1204: " 13LYSMSX RTKTX RTKMTXT RQXVX",
+  1205: " 33LYOKNQ ROKVK ROLSLVK RNQOPQOTOVPWRWUVWTXQXOWNVNUOUOV RTOUPVRVUUWTX",
+  1206: " 36LYVMVNWNWMVLTKRKPLOMNPNUOWQXTXVWWUWSVQTPQPNR RRKPMOPOUPWQX RTXUWVUVSUQTP",
+  1207: " 22LYNKNO RVMRTPX RWKTQQX RNMPKRKUM RNMPLRLUMVM",
+  1208: " 51LYQKOLNNOPQQTQVPWNVLTKQK RQKPLONPPQQ RTQUPVNULTK RQQORNTNUOWQXTXVWWUWTVRTQ RQQPROTOUPWQX RTXUWVUVTURTQ",
+  1209: " 36LYOVOUNUNVOWQXSXUWVVWSWNVLTKQKOLNNNPORQSTSWQ RSXUVVSVNULTK RQKPLONOPPRQS",
+  1210: "  6NVRVQWRXSWRV",
+  1211: "  8NVSWRXQWRVSWSYQ[",
+  1212: " 12NVROQPRQSPRO RRVQWRXSWRV",
+  1213: " 14NVROQPRQSPRO RSWRXQWRVSWSYQ[",
+  1214: " 15NVRKQLRSSLRK RRLRO RRVQWRXSWRV",
+  1215: " 29LYNNONOONONNOLQKTKVLWNWOVQSRRSRTST RTKVMVPUQSR RRWRXSXSWRW",
+  1216: "  6OVRKRP RSKRP",
+  1217: " 12LXOKOP RPKOP RUKUP RVKUP",
+  1218: " 10MWQKPLPNQOSOTNTLSKQK",
+  1219: "  9MWRJRP ROKUO RUKOO",
+  1220: "  3KZXHM\\",
+  1221: " 16MWUHSJQMPPPTQWSZU\\ RSJRLQPQTRXSZ",
+  1222: " 16MWOHQJSMTPTTSWQZO\\ RQJRLSPSTRXQZ",
+  1223: " 12MWPHP\\ RQHQ\\ RPHUH RP\\U\\",
+  1224: " 12MWSHS\\ RTHT\\ ROHTH RO\\T\\",
+  1225: " 38LWSHQIPJPLRNSP RQIPL RSNRQ RPJQLSNSPRQPRRSSTSVQXPZ RRSSV RPXQ[ RSTRVPXPZQ[S\\",
+  1226: " 38MXQHSITJTLRNQP RSITL RQNRQ RTJSLQNQPRQTRRSQTQVSXTZ RRSQV RTXS[ RQTRVTXTZS[Q\\",
+  1227: "  4MWTHPRT\\",
+  1228: "  4MWPHTRP\\",
+  1229: "  3OURHR\\",
+  1230: "  6MWPHP\\ RTHT\\",
+  1231: "  3I[LRXR",
+  1232: "  6I[RLRX RLRXR",
+  1233: "  9JZRMRX RMRWR RMXWX",
+  1234: "  9JZRMRX RMMWM RMRWR",
+  1235: "  6JZMMWW RWMMW",
+  1236: "  6NVRQQRRSSRRQ",
+  1237: " 15I[RLQMRNSMRL RLRXR RRVQWRXSWRV",
+  1238: "  6I[LPXP RLTXT",
+  1239: "  9I[WLMX RLPXP RLTXT",
+  1240: "  9I[LNXN RLRXR RLVXV",
+  1241: "  4JZWLMRWX",
+  1242: "  4JZMLWRMX",
+  1243: " 10JZWKMOWS RMTWT RMXWX",
+  1244: " 10JZMKWOMS RMTWT RMXWX",
+  1245: " 21H[YUWUUTTSRPQOONNNLOKQKRLTNUOUQTRSTPUOWNYN",
+  1246: " 16JZLTLRMPOPUSWSXR RLRMQOQUTWTXRXP",
+  1247: "  8JZMSRPWS RMSRQWS",
+  1248: "  7NVSKPO RSKTLPO",
+  1249: "  7NVQKTO RQKPLTO",
+  1250: " 14LXNKOMQNSNUMVK RNKONQOSOUNVK",
+  1251: "  8NVSLRMQLRKSLSNQP",
+  1252: "  8NVSKQMQORPSORNQO",
+  1253: "  8NVQLRMSLRKQLQNSP",
+  1254: "  8NVQKSMSORPQORNSO",
+  1256: " 11JZWMQMONNOMQMSNUOVQWWW",
+  1257: " 11JZMMMSNUOVQWSWUVVUWSWM",
+  1258: " 11JZMMSMUNVOWQWSVUUVSWMW",
+  1259: " 11JZMWMQNOONQMSMUNVOWQWW",
+  1260: " 14JZWMQMONNOMQMSNUOVQWWW RMRUR",
+  1261: " 13I[TOUPXRUTTU RUPWRUT RLRWR",
+  1262: " 13MWRMRX ROPPORLTOUP RPORMTO",
+  1263: " 13I[POOPLROTPU ROPMROT RMRXR",
+  1264: " 13MWRLRW ROTPURXTUUT RPURWTU",
+  1265: " 37KYVSUPSOQOOPNQMSMUNWPXRXTWUVVTWQWNVLTKQKPLQLRK RQOOQNSNVPX RRXTVUTVQVNULTK",
+  1266: " 15JZLKRX RMKRV RXKRX RLKXK RNLWL",
+  1267: " 10G[IOLORW RKORX R[FRX",
+  1268: " 26I[XIXJYJYIXHVHTJSLROQUPYO[ RUITKSORUQXPZN\\L\\K[KZLZL[",
+  1269: " 40I[XIXJYJYIXHVHTJSLROQUPYO[ RUITKSORUQXPZN\\L\\K[KZLZL[ RQNOONQNSOUQVSVUUVSVQUOSNQN",
+  1270: " 26H\\ZRYTWUVUTTSSQPPONNMNKOJQJRKTMUNUPTQSSPTOVNWNYOZQZR",
+  1271: " 26JZXKLX ROKPLPNOOMOLNLLMKOKSLVLXK RUTTUTWUXWXXWXUWTUT",
+  1272: " 41J[YPXPXQYQYPXOWOVPUTTVSWQXOXMWLVLTMSORRPSNSLRKPKOLONPQUWWXXXYW ROXMVMTOR RONPPVWWX",
+  1273: " 29J[UPSOQOPQPRQTSTUS RUOUSVTXTYRYQXNVLSKRKOLMNLQLRMUOWRXSXVW",
+  1274: " 34KZQHQ\\ RTHT\\ RWLVLVMWMWLUKPKNLNNOPVSWT RNNOOVRWTWVVWTXQXOWNVNUOUOVNV",
+  1275: " 12KYRKN\\ RVKR\\ RNQWQ RMVVV",
+  1276: " 40LXTLSLSMTMTLSKQKPLPNQPTRUS RPNQOTQUSUUSW RQPOROTPVSXTY ROTPUSWTYT[S\\Q\\P[PZQZQ[P[",
+  1277: " 29LXRKQLRMSLRK RRMRQ RRQQSRVSSRQ RRVR\\ RPOONNOOPPOTOUNVOUPTO",
+  1278: " 42LXRMSLRKQLRMRQQRSURV RRQSRQURVRZQ[R\\S[RZ RPOONNOOPPOTOUNVOUPTO RPXOWNXOYPXTXUWVXUYTX",
+  1279: " 12LYVKVX RNKVK RQQVQ RNXVX",
+  1281: " 24H\\QKNLLNKQKSLVNXQYSYVXXVYSYQXNVLSKQK RRQQRRSSRRQ",
+  1282: " 33LYQKPLPMQN RTKULUMTN RRNPOOQORPTRUSUUTVRVQUOSNRN RRURY RSUSY ROWVW",
+  1283: " 23LYRKPLONOOPQRRSRUQVOVNULSKRK RRRRX RSRSX ROUVU",
+  1284: " 24H\\QKNLLNKQKSLVNXQYSYVXXVYSYQXNVLSKQK RRKRY RKRYR",
+  1285: " 25JYRRPQOQMRLTLUMWOXPXRWSUSTRR RWMRR RRMWMWR RRMVNWR",
+  1286: " 25JZLLMKOKQLRNRPQRPSNT ROKPLQNQQPS RVKUX RWKTX RNTXT",
+  1287: " 27JYNKNU ROKNR RNROPQOSOUPVQVTTVTXUYVYWX RSOUQUTTV RLKOK",
+  1288: " 27LYONRKRQ RVNSKSQ RRQPROTOUPWRXSXUWVUVTURSQ RRTRUSUSTRT",
+  1289: " 27JZRKRY RMKMPNRPSTSVRWPWK RLMMKNM RQMRKSM RVMWKXM ROVUV",
+  1290: " 27JYNKNX ROKOX RLKSKVLWNWOVQSROR RSKULVNVOUQSR RLXVXVUUX",
+  1291: " 20LYWKTKQLONNQNSOVQXTYWY RWKTLRNQQQSRVTXWY",
+  1292: " 23JZRRPQOQMRLTLUMWOXPXRWSUSTRR RSLQQ RWMRR RXQSS",
+  1293: " 12KYPMTW RTMPW RMPWT RWPMT",
+  1294: " 34J[OUMULVLXMYOYPXPVNTMRMONMOLQKTKVLWMXOXRWTUVUXVYXYYXYVXUVU RNMPLULWM",
+  1295: " 34J[OOMOLNLLMKOKPLPNNPMRMUNWOXQYTYVXWWXUXRWPUNULVKXKYLYNXOVO RNWPXUXWW",
+  1401: " 21F^KHK\\ RLHL\\ RXHX\\ RYHY\\ RHH\\H RH\\O\\ RU\\\\\\",
+  1402: " 20H]KHRQJ\\ RJHQQ RJHYHZMXH RK[X[ RJ\\Y\\ZWX\\",
+  1403: " 20KYVBTDRGPKOPOTPYR]T`Vb RTDRHQKPPPTQYR\\T`",
+  1404: " 20KYNBPDRGTKUPUTTYR]P`Nb RPDRHSKTPTTSYR\\P`",
+  1405: " 12KYOBOb RPBPb ROBVB RObVb",
+  1406: " 12KYTBTb RUBUb RNBUB RNbUb",
+  1407: " 40KYTBRCQDPFPHQJRKSMSOQQ RRCQEQGRISJTLTNSPORSTTVTXSZR[Q]Q_Ra RQSSUSWRYQZP\\P^Q`RaTb",
+  1408: " 40KYPBRCSDTFTHSJRKQMQOSQ RRCSESGRIQJPLPNQPURQTPVPXQZR[S]S_Ra RSSQUQWRYSZT\\T^S`RaPb",
+  1409: " 24KYU@RCPFOIOLPOSVTYT\\S_Ra RRCQEPHPKQNTUUXU[T^RaOd",
+  1410: " 24KYO@RCTFUIULTOQVPYP\\Q_Ra RRCSETHTKSNPUOXO[P^RaUd",
+  1411: " 13AXCRGRR` RGSRa RFSRb RX:Rb",
+  1412: " 32F^[CZD[E\\D\\C[BYBWCUETGSJRNPZO^N` RVDUFTJRVQZP]O_MaKbIbHaH`I_J`Ia",
+  2001: " 18H\\RFK[ RRFY[ RRIX[ RMUVU RI[O[ RU[[[",
+  2002: " 45G]LFL[ RMFM[ RIFUFXGYHZJZLYNXOUP RUFWGXHYJYLXNWOUP RMPUPXQYRZTZWYYXZU[I[ RUPWQXRYTYWXYWZU[",
+  2003: " 32G\\XIYLYFXIVGSFQFNGLIKKJNJSKVLXNZQ[S[VZXXYV RQFOGMILKKNKSLVMXOZQ[",
+  2004: " 30G]LFL[ RMFM[ RIFSFVGXIYKZNZSYVXXVZS[I[ RSFUGWIXKYNYSXVWXUZS[",
+  2005: " 22G\\LFL[ RMFM[ RSLST RIFYFYLXF RMPSP RI[Y[YUX[",
+  2006: " 20G[LFL[ RMFM[ RSLST RIFYFYLXF RMPSP RI[P[",
+  2007: " 40G^XIYLYFXIVGSFQFNGLIKKJNJSKVLXNZQ[S[VZXX RQFOGMILKKNKSLVMXOZQ[ RXSX[ RYSY[ RUS\\S",
+  2008: " 27F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RLPXP RH[O[ RU[\\[",
+  2009: " 12MXRFR[ RSFS[ ROFVF RO[V[",
+  2010: " 20KZUFUWTZR[P[NZMXMVNUOVNW RTFTWSZR[ RQFXF",
+  2011: " 27F\\KFK[ RLFL[ RYFLS RQOY[ RPOX[ RHFOF RUF[F RH[O[ RU[[[",
+  2012: " 14I[NFN[ ROFO[ RKFRF RK[Z[ZUY[",
+  2013: " 30F_KFK[ RLFRX RKFR[ RYFR[ RYFY[ RZFZ[ RHFLF RYF]F RH[N[ RV[][",
+  2014: " 21G^LFL[ RMFYY RMHY[ RYFY[ RIFMF RVF\\F RI[O[",
+  2015: " 44G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RQFOGMILKKOKRLVMXOZQ[ RS[UZWXXVYRYOXKWIUGSF",
+  2016: " 29G]LFL[ RMFM[ RIFUFXGYHZJZMYOXPUQMQ RUFWGXHYJYMXOWPUQ RI[P[",
+  2017: " 64G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RQFOGMILKKOKRLVMXOZQ[ RS[UZWXXVYRYOXKWIUGSF RNYNXOVQURUTVUXV_W`Y`Z^Z] RUXV\\W^X_Y_Z^",
+  2018: " 45G]LFL[ RMFM[ RIFUFXGYHZJZLYNXOUPMP RUFWGXHYJYLXNWOUP RI[P[ RRPTQURXYYZZZ[Y RTQUSWZX[Z[[Y[X",
+  2019: " 34H\\XIYFYLXIVGSFPFMGKIKKLMMNOOUQWRYT RKKMMONUPWQXRYTYXWZT[Q[NZLXKUK[LX",
+  2020: " 16I\\RFR[ RSFS[ RLFKLKFZFZLYF RO[V[",
+  2021: " 23F^KFKULXNZQ[S[VZXXYUYF RLFLUMXOZQ[ RHFOF RVF\\F",
+  2022: " 15H\\KFR[ RLFRX RYFR[ RIFOF RUF[F",
+  2023: " 24F^JFN[ RKFNV RRFN[ RRFV[ RSFVV RZFV[ RGFNF RWF]F",
+  2024: " 21H\\KFX[ RLFY[ RYFK[ RIFOF RUF[F RI[O[ RU[[[",
+  2025: " 20H]KFRQR[ RLFSQS[ RZFSQ RIFOF RVF\\F RO[V[",
+  2026: " 16H\\XFK[ RYFL[ RLFKLKFYF RK[Y[YUX[",
+  2027: " 18H\\RFK[ RRFY[ RRIX[ RMUVU RI[O[ RU[[[",
+  2028: " 45G]LFL[ RMFM[ RIFUFXGYHZJZLYNXOUP RUFWGXHYJYLXNWOUP RMPUPXQYRZTZWYYXZU[I[ RUPWQXRYTYWXYWZU[",
+  2029: " 14I[NFN[ ROFO[ RKFZFZLYF RK[R[",
+  2030: " 15H\\RFJ[ RRFZ[ RRIY[ RKZYZ RJ[Z[",
+  2031: " 22G\\LFL[ RMFM[ RSLST RIFYFYLXF RMPSP RI[Y[YUX[",
+  2032: " 16H\\XFK[ RYFL[ RLFKLKFYF RK[Y[YUX[",
+  2033: " 27F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RLPXP RH[O[ RU[\\[",
+  2034: " 56G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RQFOGMILKKOKRLVMXOZQ[ RS[UZWXXVYRYOXKWIUGSF ROMOT RUMUT ROPUP ROQUQ",
+  2035: " 12MXRFR[ RSFS[ ROFVF RO[V[",
+  2036: " 27F\\KFK[ RLFL[ RYFLS RQOY[ RPOX[ RHFOF RUF[F RH[O[ RU[[[",
+  2037: " 15H\\RFK[ RRFY[ RRIX[ RI[O[ RU[[[",
+  2038: " 30F_KFK[ RLFRX RKFR[ RYFR[ RYFY[ RZFZ[ RHFLF RYF]F RH[N[ RV[][",
+  2039: " 21G^LFL[ RMFYY RMHY[ RYFY[ RIFMF RVF\\F RI[O[",
+  2040: " 36G]KEJJ RZEYJ RONNS RVNUS RKWJ\\ RZWY\\ RKGYG RKHYH ROPUP ROQUQ RKYYY RKZYZ",
+  2041: " 44G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RQFOGMILKKOKRLVMXOZQ[ RS[UZWXXVYRYOXKWIUGSF",
+  2042: " 21F^KFK[ RLFL[ RXFX[ RYFY[ RHF\\F RH[O[ RU[\\[",
+  2043: " 29G]LFL[ RMFM[ RIFUFXGYHZJZMYOXPUQMQ RUFWGXHYJYMXOWPUQ RI[P[",
+  2044: " 20H]KFRPJ[ RJFQP RJFYFZLXF RKZXZ RJ[Y[ZUX[",
+  2045: " 16I\\RFR[ RSFS[ RLFKLKFZFZLYF RO[V[",
+  2046: " 33I\\KKKILGMFOFPGQIRMR[ RKIMGOGQI RZKZIYGXFVFUGTISMS[ RZIXGVGTI RO[V[",
+  2047: " 48H]RFR[ RSFS[ RPKMLLMKOKRLTMUPVUVXUYTZRZOYMXLUKPK RPKNLMMLOLRMTNUPV RUVWUXTYRYOXMWLUK ROFVF RO[V[",
+  2048: " 21H\\KFX[ RLFY[ RYFK[ RIFOF RUF[F RI[O[ RU[[[",
+  2049: " 41G^RFR[ RSFS[ RIMJLLMMQNSOTQU RJLKMLQMSNTQUTUWTXSYQZM[L RTUVTWSXQYM[L\\M ROFVF RO[V[",
+  2050: " 43G]JXK[O[MWKSJPJLKIMGPFTFWGYIZLZPYSWWU[Y[ZX RMWLTKPKLLINGPF RTFVGXIYLYPXTWW RKZNZ RVZYZ",
+  2051: " 18H\\UFH[ RUFV[ RTHU[ RLUUU RF[L[ RR[X[",
+  2052: " 41F^OFI[ RPFJ[ RLFWFZG[I[KZNYOVP RWFYGZIZKYNXOVP RMPVPXQYSYUXXVZR[F[ RVPWQXSXUWXUZR[",
+  2053: " 34H]ZH[H\\F[L[JZHYGWFTFQGOIMLLOKSKVLYMZP[S[UZWXXV RTFRGPINLMOLSLVMYNZP[",
+  2054: " 30F]OFI[ RPFJ[ RLFUFXGYHZKZOYSWWUYSZO[F[ RUFWGXHYKYOXSVWTYRZO[",
+  2055: " 22F]OFI[ RPFJ[ RTLRT RLF[FZLZF RMPSP RF[U[WVT[",
+  2056: " 20F\\OFI[ RPFJ[ RTLRT RLF[FZLZF RMPSP RF[M[",
+  2057: " 42H^ZH[H\\F[L[JZHYGWFTFQGOIMLLOKSKVLYMZP[R[UZWXYT RTFRGPINLMOLSLVMYNZP[ RR[TZVXXT RUT\\T",
+  2058: " 27E_NFH[ ROFI[ R[FU[ R\\FV[ RKFRF RXF_F RLPXP RE[L[ RR[Y[",
+  2059: " 12LYUFO[ RVFP[ RRFYF RL[S[",
+  2060: " 21I[XFSWRYQZO[M[KZJXJVKULVKW RWFRWQYO[ RTF[F",
+  2061: " 27F]OFI[ RPFJ[ R]FLS RSOW[ RROV[ RLFSF RYF_F RF[M[ RS[Y[",
+  2062: " 14H\\QFK[ RRFL[ RNFUF RH[W[YUV[",
+  2063: " 30E`NFH[ RNFO[ ROFPY R\\FO[ R\\FV[ R]FW[ RKFOF R\\F`F RE[K[ RS[Z[",
+  2064: " 21F_OFI[ ROFVX ROIV[ R\\FV[ RLFOF RYF_F RF[L[",
+  2065: " 42G]SFPGNILLKOJSJVKYLZN[Q[TZVXXUYRZNZKYHXGVFSF RSFQGOIMLLOKSKVLYN[ RQ[SZUXWUXRYNYKXHVF",
+  2066: " 27F]OFI[ RPFJ[ RLFXF[G\\I\\K[NYPUQMQ RXFZG[I[KZNXPUQ RF[M[",
+  2067: " 61G]SFPGNILLKOJSJVKYLZN[Q[TZVXXUYRZNZKYHXGVFSF RSFQGOIMLLOKSKVLYN[ RQ[SZUXWUXRYNYKXHVF RLYLXMVOUPURVSXS_T`V`W^W] RSXT^U_V_W^",
+  2068: " 42F^OFI[ RPFJ[ RLFWFZG[I[KZNYOVPMP RWFYGZIZKYNXOVP RRPTQURVZW[Y[ZYZX RURWYXZYZZY RF[M[",
+  2069: " 35G^ZH[H\\F[L[JZHYGVFRFOGMIMKNMONVRXT RMKOMVQWRXTXWWYVZS[O[LZKYJWJUI[JYKY",
+  2070: " 16H]UFO[ RVFP[ ROFLLNF]F\\L\\F RL[S[",
+  2071: " 25F_NFKQJUJXKZN[R[UZWXXU\\F ROFLQKUKXLZN[ RKFRF RYF_F",
+  2072: " 15H\\NFO[ ROFPY R\\FO[ RLFRF RXF^F",
+  2073: " 24E_MFK[ RNFLY RUFK[ RUFS[ RVFTY R]FS[ RJFQF RZF`F",
+  2074: " 21G]NFU[ ROFV[ R\\FH[ RLFRF RXF^F RF[L[ RR[X[",
+  2075: " 20H]NFRPO[ ROFSPP[ R]FSP RLFRF RYF_F RL[S[",
+  2076: " 16G][FH[ R\\FI[ ROFLLNF\\F RH[V[XUU[",
+  2077: " 46H\\KILKXWYYY[ RLLXX RKIKKLMXYY[ RPPLTKVKXLZK[ RKVMZ RLTLVMXMZK[ RSSXN RVIVLWNYNYLWKVI RVIWLYN",
+  2101: " 39I]NONPMPMONNPMTMVNWOXQXXYZZ[ RWOWXXZZ[[[ RWQVRPSMTLVLXMZP[S[UZWX RPSNTMVMXNZP[",
+  2102: " 33G\\LFL[ RMFM[ RMPONQMSMVNXPYSYUXXVZS[Q[OZMX RSMUNWPXSXUWXUZS[ RIFMF",
+  2103: " 28H[WPVQWRXQXPVNTMQMNNLPKSKULXNZQ[S[VZXX RQMONMPLSLUMXOZQ[",
+  2104: " 36H]WFW[ RXFX[ RWPUNSMQMNNLPKSKULXNZQ[S[UZWX RQMONMPLSLUMXOZQ[ RTFXF RW[[[",
+  2105: " 31H[LSXSXQWOVNTMQMNNLPKSKULXNZQ[S[VZXX RWSWPVN RQMONMPLSLUMXOZQ[",
+  2106: " 22KXUGTHUIVHVGUFSFQGPIP[ RSFRGQIQ[ RMMUM RM[T[",
+  2107: " 60I\\QMONNOMQMSNUOVQWSWUVVUWSWQVOUNSMQM RONNPNTOV RUVVTVPUN RVOWNYMYNWN RNUMVLXLYM[P\\U\\X]Y^ RLYMZP[U[X\\Y^Y_XaUbObLaK_K^L\\O[",
+  2108: " 28G]LFL[ RMFM[ RMPONRMTMWNXPX[ RTMVNWPW[ RIFMF RI[P[ RT[[[",
+  2109: " 18MXRFQGRHSGRF RRMR[ RSMS[ ROMSM RO[V[",
+  2110: " 25MXSFRGSHTGSF RTMT_SaQbObNaN`O_P`Oa RSMS_RaQb RPMTM",
+  2111: " 27G\\LFL[ RMFM[ RWMMW RRSX[ RQSW[ RIFMF RTMZM RI[P[ RT[Z[",
+  2112: " 12MXRFR[ RSFS[ ROFSF RO[V[",
+  2113: " 44BcGMG[ RHMH[ RHPJNMMOMRNSPS[ ROMQNRPR[ RSPUNXMZM]N^P^[ RZM\\N]P][ RDMHM RD[K[ RO[V[ RZ[a[",
+  2114: " 28G]LML[ RMMM[ RMPONRMTMWNXPX[ RTMVNWPW[ RIMMM RI[P[ RT[[[",
+  2115: " 36H\\QMNNLPKSKULXNZQ[S[VZXXYUYSXPVNSMQM RQMONMPLSLUMXOZQ[ RS[UZWXXUXSWPUNSM",
+  2116: " 36G\\LMLb RMMMb RMPONQMSMVNXPYSYUXXVZS[Q[OZMX RSMUNWPXSXUWXUZS[ RIMMM RIbPb",
+  2117: " 33H\\WMWb RXMXb RWPUNSMQMNNLPKSKULXNZQ[S[UZWX RQMONMPLSLUMXOZQ[ RTb[b",
+  2118: " 23IZNMN[ ROMO[ ROSPPRNTMWMXNXOWPVOWN RKMOM RK[R[",
+  2119: " 32J[WOXMXQWOVNTMPMNNMOMQNRPSUUWVXW RMPNQPRUTWUXVXYWZU[Q[OZNYMWM[NY",
+  2120: " 16KZPFPWQZS[U[WZXX RQFQWRZS[ RMMUM",
+  2121: " 28G]LMLXMZP[R[UZWX RMMMXNZP[ RWMW[ RXMX[ RIMMM RTMXM RW[[[",
+  2122: " 15I[LMR[ RMMRY RXMR[ RJMPM RTMZM",
+  2123: " 24F^JMN[ RKMNX RRMN[ RRMV[ RSMVX RZMV[ RGMNM RWM]M",
+  2124: " 21H\\LMW[ RMMX[ RXML[ RJMPM RTMZM RJ[P[ RT[Z[",
+  2125: " 22H[LMR[ RMMRY RXMR[P_NaLbKbJaK`La RJMPM RTMZM",
+  2126: " 16I[WML[ RXMM[ RMMLQLMXM RL[X[XWW[",
+  2127: " 40G^QMNNLPKRJUJXKZN[P[RZUWWTYPZM RQMONMPLRKUKXLZN[ RQMSMUNVPXXYZZ[ RSMTNUPWXXZZ[[[",
+  2128: " 57G\\TFQGOIMMLPKTJZIb RTFRGPINMMPLTKZJb RTFVFXGYHYKXMWNTOPO RVFXHXKWMVNTO RPOTPVRWTWWVYUZR[P[NZMYLV RPOSPURVTVWUYTZR[",
+  2129: " 28H\\IPKNMMOMQNROSRSVRZOb RJOLNPNRO RZMYPXRSYP^Nb RYMXPWRSY",
+  2130: " 44I\\VNTMRMONMQLTLWMYNZP[R[UZWWXTXQWOSJRHRFSEUEWFYH RRMPNNQMTMXNZ RR[TZVWWTWPVNTKSISGTFVFYH",
+  2131: " 32I[XPVNTMPMNNNPPRSS RPMONOPQRSS RSSNTLVLXMZP[S[UZWX RSSOTMVMXNZP[",
+  2132: " 31I[TFRGQHQIRJUKZKZJWKSMPOMRLULWMYP[S]T_TaSbQbPa RULQONRMUMWNYP[",
+  2133: " 32G]HQIOKMNMONOPNTL[ RMMNNNPMTK[ RNTPPRNTMVMXNYOYRXWUb RVMXOXRWWTb",
+  2134: " 44F]GQHOJMMMNNNPMUMXNZO[ RLMMNMPLULXMZO[Q[SZUXWUXRYMYIXGVFTFRHRJSMUPWRZT RSZUWVUWRXMXIWGVF",
+  2135: " 15LXRMPTOXOZP[S[UYVW RSMQTPXPZQ[",
+  2136: " 29H\\NMJ[ ROMK[ RXMYNZNYMWMUNQROSMS ROSQTSZT[ ROSPTRZS[U[WZYW",
+  2137: " 23H\\KFMFOGPHQJWXXZY[ RMFOHPJVXWZY[Z[ RRMJ[ RRMK[",
+  2138: " 28F]MMGb RNMHb RMPLVLYN[P[RZTXVU RXMUXUZV[Y[[Y\\W RYMVXVZW[",
+  2139: " 24H\\NML[ ROMNSMXL[ RYMXQVU RZMYPXRVUTWQYOZL[ RKMOM",
+  2140: " 45IZTFRGQHQIRJUKXK RUKQLOMNONQPSSTVT RUKRLPMOOOQQSST RSTOUMVLXLZN\\S^T_TaRbPb RSTPUNVMXMZO\\S^",
+  2141: " 32I[RMONMQLTLWMYNZP[R[UZWWXTXQWOVNTMRM RRMPNNQMTMXNZ RR[TZVWWTWPVN",
+  2142: " 22G]PNL[ RPNM[ RVNV[ RVNW[ RIPKNNM[M RIPKONN[N",
+  2143: " 31H[LVMYNZP[R[UZWWXTXQWOVNTMRMONMQLTHb RR[TZVWWTWPVN RRMPNNQMTIb",
+  2144: " 35H][MQMNNLQKTKWLYMZO[Q[TZVWWTWQVOUNSM RQMONMQLTLXMZ RQ[SZUWVTVPUN RUN[N",
+  2145: " 16H\\SNP[ RSNQ[ RJPLNOMZM RJPLOONZN",
+  2146: " 31H\\IQJOLMOMPNPPNVNYP[ RNMONOPMVMYNZP[Q[TZVXXUYRYOXMWNXOYR RXUYO",
+  2147: " 37G]ONMOKQJTJWKYLZN[Q[TZWXYUZRZOXMVMTORSPXMb RJWLYNZQZTYWWYU RZOXNVNTPRSPYNb",
+  2148: " 23I[KMMMONPPU_VaWb RMMNNOPT_UaWbYb RZMYOWRM]K`Jb",
+  2149: " 34F]UFOb RVFNb RGQHOJMMMNNNPMUMXOZRZTYWVYS RLMMNMPLULXMZO[R[TZVXXUYS[M",
+  2150: " 44F]JQLOONNMLNJQITIWJZK[M[OZQWRT RIWJYKZMZOYQW RQTQWRZS[U[WZYWZTZQYNXMWNYOZQ RQWRYSZUZWYYW",
+  2151: " 39H]XMVTUXUZV[Y[[Y\\W RYMWTVXVZW[ RVTVQUNSMQMNNLQKTKWLYMZO[Q[SZUWVT RQMONMQLTLXMZ",
+  2152: " 36H[PFLSLVMYNZ RQFMS RMSNPPNRMTMVNWOXQXTWWUZR[P[NZMWMS RVNWPWTVWTZR[ RMFQF",
+  2153: " 25I[WPWQXQXPWNUMRMONMQLTLWMYNZP[R[UZWW RRMPNNQMTMXNZ",
+  2154: " 42H]ZFVTUXUZV[Y[[Y\\W R[FWTVXVZW[ RVTVQUNSMQMNNLQKTKWLYMZO[Q[SZUWVT RQMONMQLTLXMZ RWF[F",
+  2155: " 26I[MVQUTTWRXPWNUMRMONMQLTLWMYNZP[R[UZWX RRMPNNQMTMXNZ",
+  2156: " 35KZZGYHZI[H[GZFXFVGUHTJSMP[O_Na RXFVHUJTNRWQ[P^O`NaLbJbIaI`J_K`Ja ROMYM",
+  2157: " 43H\\YMU[T^RaObLbJaI`I_J^K_J` RXMT[S^QaOb RVTVQUNSMQMNNLQKTKWLYMZO[Q[SZUWVT RQMONMQLTLXMZ",
+  2158: " 31H]PFJ[ RQFK[ RMTOPQNSMUMWNXOXQVWVZW[ RUMWOWQUWUZV[Y[[Y\\W RMFQF",
+  2159: " 26LYUFTGUHVGUF RMQNOPMSMTNTQRWRZS[ RRMSNSQQWQZR[U[WYXW",
+  2160: " 32LYVFUGVHWGVF RNQOOQMTMUNUQR[Q^P`OaMbKbJaJ`K_L`Ka RSMTNTQQ[P^O`Mb",
+  2161: " 34H\\PFJ[ RQFK[ RXNWOXPYOYNXMWMUNQROSMS ROSQTSZT[ ROSPTRZS[U[WZYW RMFQF",
+  2162: " 18MYUFQTPXPZQ[T[VYWW RVFRTQXQZR[ RRFVF",
+  2163: " 52AbBQCOEMHMINIPHTF[ RGMHNHPGTE[ RHTJPLNNMPMRNSOSQP[ RPMRORQO[ RRTTPVNXMZM\\N]O]Q[W[Z\\[ RZM\\O\\QZWZZ[[^[`YaW",
+  2164: " 37F]GQHOJMMMNNNPMTK[ RLMMNMPLTJ[ RMTOPQNSMUMWNXOXQVWVZW[ RUMWOWQUWUZV[Y[[Y\\W",
+  2165: " 32I[RMONMQLTLWMYNZP[R[UZWWXTXQWOVNTMRM RRMPNNQMTMXNZ RR[TZVWWTWPVN",
+  2166: " 42G\\HQIOKMNMONOPNTJb RMMNNNPMTIb RNTOQQNSMUMWNXOYQYTXWVZS[Q[OZNWNT RWNXPXTWWUZS[ RFbMb",
+  2167: " 33H\\XMRb RYMSb RVTVQUNSMQMNNLQKTKWLYMZO[Q[SZUWVT RQMONMQLTLXMZ RObVb",
+  2168: " 26IZJQKOMMPMQNQPPTN[ ROMPNPPOTM[ RPTRPTNVMXMYNYOXPWOXN",
+  2169: " 28J[XOXPYPYOXNUMRMONNONQORVVWW RNPOQVUWVWYVZS[P[MZLYLXMXMY",
+  2170: " 18KYTFPTOXOZP[S[UYVW RUFQTPXPZQ[ RNMWM",
+  2171: " 37F]GQHOJMMMNNNQLWLYN[ RLMMNMQKWKYLZN[P[RZTXVT RXMVTUXUZV[Y[[Y\\W RYMWTVXVZW[",
+  2172: " 26H\\IQJOLMOMPNPQNWNYP[ RNMONOQMWMYNZP[Q[TZVXXUYQYMXMYO",
+  2173: " 41C`DQEOGMJMKNKQIWIYK[ RIMJNJQHWHYIZK[M[OZQXRV RTMRVRYSZU[W[YZ[X\\V]R]M\\M]O RUMSVSYU[",
+  2174: " 42H\\KQMNOMRMSOSR RQMRORRQVPXNZL[K[JZJYKXLYKZ RQVQYR[U[WZYW RYNXOYPZOZNYMXMVNTPSRRVRYS[",
+  2175: " 41G\\HQIOKMNMONOQMWMYO[ RMMNNNQLWLYMZO[Q[SZUXWT RZMV[U^SaPbMbKaJ`J_K^L_K` RYMU[T^RaPb",
+  2176: " 31H\\YMXOVQNWLYK[ RLQMOOMRMVO RMOONRNVOXO RLYNYRZUZWY RNYR[U[WYXW",
+  2177: " 43G^VGUHVIWHWGUFRFOGMILLL[ RRFPGNIMLM[ R\\G[H\\I]H]G\\FZFXGWIW[ RZFYGXIX[ RIM[M RI[P[ RT[[[",
+  2178: " 33G]WGVHWIXHWGUFRFOGMILLL[ RRFPGNIMLM[ RWMW[ RXMX[ RIMXM RI[P[ RT[[[",
+  2179: " 35G]VGUHVIWHWGUF RXFRFOGMILLL[ RRFPGNIMLM[ RWHW[ RXFX[ RIMWM RI[P[ RT[[[",
+  2180: " 54BcRGQHRISHRGPFMFJGHIGLG[ RMFKGIIHLH[ R]G\\H]I^H]G[FXFUGSIRLR[ RXFVGTISLS[ R]M][ R^M^[ RDM^M RD[K[ RO[V[ RZ[a[",
+  2181: " 56BcRGQHRISHRGPFMFJGHIGLG[ RMFKGIIHLH[ R\\G[H\\I]H]G[F R^FXFUGSIRLR[ RXFVGTISLS[ R]H][ R^F^[ RDM]M RD[K[ RO[V[ RZ[a[",
+  2182: " 12MXRMR[ RSMS[ ROMSM RO[V[",
+  2184: " 25IZWNUMRMONMPLSLVMYNZQ[T[VZ RRMPNNPMSMVNYOZQ[ RMTUT",
+  2185: " 43I\\TFQGOJNLMOLTLXMZO[Q[TZVWWUXRYMYIXGVFTF RTFRGPJOLNOMTMXNZO[ RQ[SZUWVUWRXMXIWGVF RNPWP",
+  2186: " 42G]UFOb RVFNb RQMMNKPJSJVKXMZP[S[WZYXZUZRYPWNTMQM RQMNNLPKSKVLXNZP[ RS[VZXXYUYRXPVNTM",
+  2187: " 27I[TMVNXPXOWNTMQMNNMOLQLSMUOWSZ RQMONNOMQMSNUSZT\\T^S_Q_",
+  2190: " 45G]LMKNJPJRKUOYP[ RJRKTOXP[P]O`MbLbKaJ_J\\KXMTOQRNTMVMYNZPZTYXWZU[T[SZSXTWUXTY RVMXNYPYTXXWZ",
+  2191: " 69E_YGXHYIZHYGWFTFQGOINKMNLRJ[I_Ha RTFRGPIOKNNLWK[J^I`HaFbDbCaC`D_E`Da R_G^H_I`H`G_F]F[GZHYJXMU[T_Sa R]F[HZJYNWWV[U^T`SaQbObNaN`O_P`Oa RIM^M",
+  2192: " 52F^[GZH[I\\H[GXFUFRGPIOKNNMRK[J_Ia RUFSGQIPKONMWL[K^J`IaGbEbDaD`E_F`Ea RYMWTVXVZW[Z[\\Y]W RZMXTWXWZX[ RJMZM",
+  2193: " 54F^YGXHYIZHZGXF R\\FUFRGPIOKNNMRK[J_Ia RUFSGQIPKONMWL[K^J`IaGbEbDaD`E_F`Ea R[FWTVXVZW[Z[\\Y]W R\\FXTWXWZX[ RJMYM",
+  2194: " 86@cTGSHTIUHTGRFOFLGJIIKHNGRE[D_Ca ROFMGKIJKINGWF[E^D`CaAb?b>a>`?_@`?a R`G_H`IaH`G]FZFWGUITKSNRRP[O_Na RZFXGVIUKTNRWQ[P^O`NaLbJbIaI`J_K`Ja R^M\\T[X[Z\\[_[aYbW R_M]T\\X\\Z][ RDM_M",
+  2195: " 88@cTGSHTIUHTGRFOFLGJIIKHNGRE[D_Ca ROFMGKIJKINGWF[E^D`CaAb?b>a>`?_@`?a R^G]H^I_H_G]F RaFZFWGUITKSNRRP[O_Na RZFXGVIUKTNRWQ[P^O`NaLbJbIaI`J_K`Ja R`F\\T[X[Z\\[_[aYbW RaF]T\\X\\Z][ RDM^M",
+  2196: " 20LYMQNOPMSMTNTQRWRZS[ RRMSNSQQWQZR[U[WYXW",
+  2200: " 40H\\QFNGLJKOKRLWNZQ[S[VZXWYRYOXJVGSFQF RQFOGNHMJLOLRMWNYOZQ[ RS[UZVYWWXRXOWJVHUGSF",
+  2201: " 11H\\NJPISFS[ RRGR[ RN[W[",
+  2202: " 45H\\LJMKLLKKKJLHMGPFTFWGXHYJYLXNUPPRNSLUKXK[ RTFVGWHXJXLWNTPPR RKYLXNXSZVZXYYX RNXS[W[XZYXYV",
+  2203: " 47H\\LJMKLLKKKJLHMGPFTFWGXIXLWNTOQO RTFVGWIWLVNTO RTOVPXRYTYWXYWZT[P[MZLYKWKVLUMVLW RWQXTXWWYVZT[",
+  2204: " 13H\\THT[ RUFU[ RUFJUZU RQ[X[",
+  2205: " 39H\\MFKP RKPMNPMSMVNXPYSYUXXVZS[P[MZLYKWKVLUMVLW RSMUNWPXSXUWXUZS[ RMFWF RMGRGWF",
+  2206: " 48H\\WIVJWKXJXIWGUFRFOGMILKKOKULXNZQ[S[VZXXYUYTXQVOSNRNOOMQLT RRFPGNIMKLOLUMXOZQ[ RS[UZWXXUXTWQUOSN",
+  2207: " 31H\\KFKL RKJLHNFPFUIWIXHYF RLHNGPGUI RYFYIXLTQSSRVR[ RXLSQRSQVQ[",
+  2208: " 63H\\PFMGLILLMNPOTOWNXLXIWGTFPF RPFNGMIMLNNPO RTOVNWLWIVGTF RPOMPLQKSKWLYMZP[T[WZXYYWYSXQWPTO RPONPMQLSLWMYNZP[ RT[VZWYXWXSWQVPTO",
+  2209: " 48H\\XMWPURRSQSNRLPKMKLLINGQFSFVGXIYLYRXVWXUZR[O[MZLXLWMVNWMX RQSORMPLMLLMIOGQF RSFUGWIXLXRWVVXTZR[",
+  2210: "  6MWRYQZR[SZRY",
+  2211: "  8MWR[QZRYSZS\\R^Q_",
+  2212: " 12MWRMQNROSNRM RRYQZR[SZRY",
+  2213: " 14MWRMQNROSNRM RR[QZRYSZS\\R^Q_",
+  2214: " 15MWRFQHRTSHRF RRHRN RRYQZR[SZRY",
+  2215: " 32I[MJNKMLLKLJMHNGPFSFVGWHXJXLWNVORQRT RSFUGVHWJWLVNTP RRYQZR[SZRY",
+  2216: "  6NVRFQM RSFQM",
+  2217: " 12JZNFMM ROFMM RVFUM RWFUM",
+  2218: " 14KYQFOGNINKOMQNSNUMVKVIUGSFQF",
+  2219: "  9JZRFRR RMIWO RWIMO",
+  2220: "  3G][BIb",
+  2221: " 20KYVBTDRGPKOPOTPYR]T`Vb RTDRHQKPPPTQYR\\T`",
+  2222: " 20KYNBPDRGTKUPUTTYR]P`Nb RPDRHSKTPTTSYR\\P`",
+  2223: " 12KYOBOb RPBPb ROBVB RObVb",
+  2224: " 12KYTBTb RUBUb RNBUB RNbUb",
+  2225: " 40KYTBRCQDPFPHQJRKSMSOQQ RRCQEQGRISJTLTNSPORSTTVTXSZR[Q]Q_Ra RQSSUSWRYQZP\\P^Q`RaTb",
+  2226: " 40KYPBRCSDTFTHSJRKQMQOSQ RRCSESGRIQJPLPNQPURQTPVPXQZR[S]S_Ra RSSQUQWRYSZT\\T^S`RaPb",
+  2227: "  4KYUBNRUb",
+  2228: "  4KYOBVROb",
+  2229: "  3NVRBRb",
+  2230: "  6KYOBOb RUBUb",
+  2231: "  3E_IR[R",
+  2232: "  6E_RIR[ RIR[R",
+  2233: "  9F^RJR[ RJRZR RJ[Z[",
+  2234: "  9F^RJR[ RJJZJ RJRZR",
+  2235: "  6G]KKYY RYKKY",
+  2236: "  6MWRQQRRSSRRQ",
+  2237: " 15E_RIQJRKSJRI RIR[R RRYQZR[SZRY",
+  2238: "  6E_IO[O RIU[U",
+  2239: "  9E_YIK[ RIO[O RIU[U",
+  2240: "  9E_IM[M RIR[R RIW[W",
+  2241: "  4F^ZIJRZ[",
+  2242: "  4F^JIZRJ[",
+  2243: " 10F^ZFJMZT RJVZV RJ[Z[",
+  2244: " 10F^JFZMJT RJVZV RJ[Z[",
+  2245: " 21F_[WYWWVUTRPQOONMNKOJQJSKUMVOVQURTUPWNYM[M",
+  2246: " 24F^IUISJPLONOPPTSVTXTZS[Q RISJQLPNPPQTTVUXUZT[Q[O",
+  2247: "  8G]JTROZT RJTRPZT",
+  2248: "  7LXTFOL RTFUGOL",
+  2249: "  7LXPFUL RPFOGUL",
+  2250: " 18H\\KFLHNJQKSKVJXHYF RKFLINKQLSLVKXIYF",
+  2251: "  8MWRHQGRFSGSIRKQL",
+  2252: "  8MWSFRGQIQKRLSKRJ",
+  2253: "  8MWRHSGRFQGQIRKSL",
+  2254: "  8MWQFRGSISKRLQKRJ",
+  2255: " 10E[HMLMRY RKMR[ R[BR[",
+  2256: " 13F^ZJSJOKMLKNJQJSKVMXOYSZZZ",
+  2257: " 13F^JJJQKULWNYQZSZVYXWYUZQZJ",
+  2258: " 13F^JJQJUKWLYNZQZSYVWXUYQZJZ",
+  2259: " 13F^JZJSKOLMNKQJSJVKXMYOZSZZ",
+  2260: " 16F^ZJSJOKMLKNJQJSKVMXOYSZZZ RJRVR",
+  2261: " 11E_XP[RXT RUMZRUW RIRZR",
+  2262: " 11JZPLRITL RMORJWO RRJR[",
+  2263: " 11E_LPIRLT ROMJROW RJR[R",
+  2264: " 11JZPXR[TX RMURZWU RRIRZ",
+  2265: " 44I\\XRWOVNTMRMONMQLTLWMYNZP[R[UZWXXUYPYKXHWGUFRFPGOHOIPIPH RRMPNNQMTMXNZ RR[TZVXWUXPXKWHUF",
+  2266: " 15H\\JFR[ RKFRY RZFR[ RJFZF RKGYG",
+  2267: " 10AbDMIMRY RHNR[ Rb:R[",
+  2268: " 32F^[CZD[E\\D\\C[BYBWCUETGSJRNPZO^N` RVDUFTJRVQZP]O_MaKbIbHaH`I_J`Ia",
+  2269: " 50F^[CZD[E\\D\\C[BYBWCUETGSJRNPZO^N` RVDUFTJRVQZP]O_MaKbIbHaH`I_J`Ia RQKNLLNKQKSLVNXQYSYVXXVYSYQXNVLSKQK",
+  2270: " 26F_\\S[UYVWVUUTTQPPONNLNJOIQISJULVNVPUQTTPUOWNYN[O\\Q\\S",
+  2271: " 32F^[FI[ RNFPHPJOLMMKMIKIIJGLFNFPGSHVHYG[F RWTUUTWTYV[X[ZZ[X[VYTWT",
+  2272: " 49F_[NZO[P\\O\\N[MZMYNXPVUTXRZP[M[JZIXIUJSPORMSKSIRGPFNGMIMKNNPQUXWZZ[[[\\Z\\Y RM[KZJXJUKSMQ RMKNMVXXZZ[",
+  2273: " 56E`WNVLTKQKOLNMMPMSNUPVSVUUVS RQKOMNPNSOUPV RWKVSVUXVZV\\T]Q]O\\L[JYHWGTFQFNGLHJJILHOHRIUJWLYNZQ[T[WZYYZX RXKWSWUXV",
+  2274: " 42H\\PBP_ RTBT_ RXIWJXKYJYIWGTFPFMGKIKKLMMNOOUQWRYT RKKMMONUPWQXRYTYXWZT[P[MZKXKWLVMWLX",
+  2275: " 12H]SFLb RYFRb RLQZQ RKWYW",
+  2276: " 46JZUITJUKVJVIUGSFQFOGNINKOMQOVR ROMTPVRWTWVVXTZ RPNNPMRMTNVPXU[ RNVSYU[V]V_UaSbQbOaN_N^O]P^O_",
+  2277: " 30JZRFQHRJSHRF RRFRb RRQQTRbSTRQ RLMNNPMNLLM RLMXM RTMVNXMVLTM",
+  2278: " 56JZRFQHRJSHRF RRFRT RRPQRSVRXQVSRRP RRTRb RR^Q`RbS`R^ RLMNNPMNLLM RLMXM RTMVNXMVLTM RL[N\\P[NZL[ RL[X[ RT[V\\X[VZT[",
+  2279: " 12I\\XFX[ RKFXF RPPXP RK[X[",
+  2281: " 38E`QFNGKIILHOHRIUKXNZQ[T[WZZX\\U]R]O\\LZIWGTFQF RROQPQQRRSRTQTPSORO RRPRQSQSPRP",
+  2282: " 45J[PFNGOIQJ RPFOGOI RUFWGVITJ RUFVGVI RQJOKNLMNMQNSOTQUTUVTWSXQXNWLVKTJQJ RRUR[ RSUS[ RNXWX",
+  2283: " 27I\\RFOGMILLLMMPORRSSSVRXPYMYLXIVGSFRF RRSR[ RSSS[ RNWWW",
+  2284: " 28D`PFMGJIHLGOGSHVJYM[P\\T\\W[ZY\\V]S]O\\LZIWGTFPF RRFR\\ RGQ]Q",
+  2285: " 31G`PMMNKPJSJTKWMYPZQZTYVWWTWSVPTNQMPM R]GWG[HUN R]G]M\\IVO R\\HVN",
+  2286: " 28F\\IIJGLFOFQGRIRLQOPQNSKU ROFPGQIQMPPNS RVFT[ RWFS[ RKUYU",
+  2287: " 30I\\MFMU RNFMQ RMQNOONQMTMWNXPXRWTUV RTMVNWPWRTXTZU[W[YY RKFNF",
+  2288: " 44I\\RNOOMQLTLUMXOZR[S[VZXXYUYTXQVOSNRN RRHNJRFRN RSHWJSFSN RRSQTQURVSVTUTTSSRS RRTRUSUSTRT",
+  2289: " 37G^QHRFR[ RTHSFS[ RJHKFKMLPNRQSRS RMHLFLNMQ R[HZFZMYPWRTSSS RXHYFYNXQ RNWWW",
+  2290: " 31G]LFL[ RMFM[ RIFUFXGYHZJZMYOXPUQMQ RUFWGXHYJYMXOWPUQ RI[Y[YVX[",
+  2291: " 24H[YGUGQHNJLMKPKSLVNYQ[U\\Y\\ RYGVHSJQMPPPSQVSYV[Y\\",
+  2292: " 27F_OQMQKRJSIUIWJYKZM[O[QZRYSWSURSQROQ RSHPQ RZJRR R\\QST",
+  2293: " 12H\\OKUY RUKOY RKOYU RYOKU",
+  2294: " 48F^NVLUKUIVHXHYI[K\\L\\N[OYOXNVKRJOJMKJMHPGTGWHYJZMZOYRVVUXUYV[X\\Y\\[[\\Y\\X[VYUXUVV RJMKKMIPHTHWIYKZM",
+  2295: " 48F^NMLNKNIMHKHJIHKGLGNHOJOKNMKQJTJVKYM[P\\T\\W[YYZVZTYQVMUKUJVHXGYG[H\\J\\K[MYNXNVM RJVKXMZP[T[WZYXZV",
+  2301: " 40F_JMILIJJHLGNGPHQIRKSP RIJKHMHOIPJQLRPR[ R[M\\L\\J[HYGWGUHTISKRP R\\JZHXHVIUJTLSPS[",
+  2302: " 51F^IGJKKMMOPPTPWOYMZK[G RIGJJKLMNPOTOWNYLZJ[G RPONPMQLSLVMXOZQ[S[UZWXXVXSWQVPTO RPPNQMSMVNY RVYWVWSVQTP",
+  2303: " 30F^MJMV RNKNU RVKVU RWJWV RIGKIMJPKTKWJYI[G RIYKWMVPUTUWVYW[Y",
+  2304: " 48F^[ILIJJILINJPLQNQPPQNQLPJ[J RIMJOKPMQ RQMPKOJMI RIXXXZW[U[SZQXPVPTQSSSUTWIW R[TZRYQWP RSTTVUWWX",
+  2305: " 48F]OUMTLTJUIWIXJZL[M[OZPXPWOUJPINIKJILHOGSGWHYJZLZOYRVUUWUYV[X[YZZX RMSKPJNJKKILH RSGVHXJYLYOXRVU",
+  2306: " 48G_HKKHMKMV RJILLLV RMKPHRKRU ROIQLQU RRKUHWKW[ RTIVLV[ RWKZH[J\\M\\P[SZUXWUYP[ RYIZJ[M[PZSYUWWTYP[",
+  2307: " 41F^ISMSLRKOKMLJNHQGSGVHXJYMYOXRWS[S RITOTMRLOLMMJOHQG RSGUHWJXMXOWRUT[T RKXYX RKYYY",
+  2308: " 30F_GLJIMLMX RIJLMLX RMLPISLSX ROJRMRX RSLVIYLYW[Y RUJXMXXZZ]W",
+  2309: " 33G]ZIJY RZIWJQJ RXKUKQJ RZIYLYR RXKXNYR RQRJR RPSMSJR RQRQY RPSPVQY",
+  2310: " 33F^HOJKOU RJMOWRPWPZO[M[KZIXHWHUITKTMUPVRWUWXUZ RWHVIUKUMWQXTXWWYUZ",
+  2311: " 36F^IOLLPN RKMOORLUN RQMTOWLYN RVMXO[L RIULRPT RKSOURRUT RQSTUWRYT RVSXU[R",
+  2312: " 48F^JHNJPLQOQRPUNWJY RJHMIOJQLRO RRRQUOWMXJY RZHWIUJSLRO RRRSUUWWXZY RZHVJTLSOSRTUVWZY RIP[P RIQ[Q",
+  2317: " 12NVQQQSSSSQQQ RQQSS RSQQS",
+  2318: " 18JZMPQRTTVVWYW[V]U^ RMQST RMRPSTUVWWY",
+  2319: " 18JZWKVMTOPQMR RSPMS RUFVGWIWKVNTPQRMT",
+  2320: " 36H\\SMONLPKRKTLVNWQWUVXTYRYPXNVMSM RXNSM RVMQNLP RONKR RLVQW RNWSVXT RUVYR",
+  2321: " 36H\\SMONLPKRKTLVNWQWUVXTYRYPXNVMSM RXNSM RVMQNLP RONKR RLVQW RNWSVXT RUVYR",
+  2322: " 34J[SMPNNPMRMTNVPWRWUVWTXRXPWNUMSM ROPUM RNRVN RMTWO RNUXP ROVWR RPWVT",
+  2323: " 18JZOGO^ RUFU] RMNWL RMOWM RMWWU RMXWV",
+  2324: " 18JZNFNX RVLV^ RNNVL RNOVM RNWVU RNXVV",
+  2325: " 25JZNBNW RNNQLTLVMWOWQVSSUQVNW RNNQMTMVN RUMVOVQUSSU",
+  2326: " 18E_HIHL R\\I\\L RHI\\I RHJ\\J RHK\\K RHL\\L",
+  2327: " 18JZMNMQ RWNWQ RMNWN RMOWO RMPWP RMQWQ",
+  2328: " 49JZMLWX RMLONQOTOVNWMWKUKUMTO RONTO RQOWM RVKVN RULWL RWXUVSUPUNVMWMYOYOWPU RUVPU RSUMW RNVNY RMXOX",
+  2329: " 26JZPOOMOKMKMMNNPOSOUNWL RNKNN RMLOL RMMSO RPOUN RWLWY",
+  2330: " 86A^GfHfIeIdHcGcFdFfGhIiKiNhPfQdR`RUQ;Q4R/S-U,V,X-Y/Y3X6W8U;P?JCHEFHEJDNDREVGYJ[N\\R\\V[XZZW[T[PZMYKWITHPHMIKKJNJRKUMW RGdGeHeHdGd RU;Q?LCIFGIFKENERFVGXJ[ RR\\U[WZYWZTZPYMXKVITH",
+  2331: "103EfNSOUQVSVUUVSVQUOSNQNOONPMSMVNYP[S\\V\\Y[[Y\\W]T]P\\MZJXIUHRHOIMJKLIOHSHXI]KaMcPeTfYf]e`cba RKLJNIRIXJ\\L`NbQdUeYe]d_cba RPOTO ROPUP RNQVQ RNRVR RNSVS ROTUT RPUTU RaLaNcNcLaL RbLbN RaMcM RaVaXcXcVaV RbVbX RaWcW",
+  2332: " 30D`H@Hd RM@Md RW@Wd R\\@\\d RMMWK RMNWL RMOWM RMWWU RMXWV RMYWW",
+  2367: " 12NVQQQSSSSQQQ RQQSS RSQQS",
+  2368: " 18JZMPQRTTVVWYW[V]U^ RMQST RMRPSTUVWWY",
+  2369: " 18JZWKVMTOPQMR RSPMS RUFVGWIWKVNTPQRMT",
+  2370: " 32H\\PMMNLOKQKSLUMVPWTWWVXUYSYQXOWNTMPM RMNLPLSMUNVPW RWVXTXQWOVNTM",
+  2371: " 36H\\SMONLPKRKTLVNWQWUVXTYRYPXNVMSM RXNSM RVMQNLP RONKR RLVQW RNWSVXT RUVYR",
+  2372: " 34J[SMPNNPMRMTNVPWRWUVWTXRXPWNUMSM ROPUM RNRVN RMTWO RNUXP ROVWR RPWVT",
+  2373: " 18JZOGO^ RUFU] RMNWL RMOWM RMWWU RMXWV",
+  2374: " 18JZNFNX RVLV^ RNNVL RNOVM RNWVU RNXVV",
+  2375: " 25JZNBNW RNNQLTLVMWOWQVSSUQVNW RNNQMTMVN RUMVOVQUSSU",
+  2376: " 18E_HIHL R\\I\\L RHI\\I RHJ\\J RHK\\K RHL\\L",
+  2377: " 18JZMNMQ RWNWQ RMNWN RMOWO RMPWP RMQWQ",
+  2378: " 36JZQCVMRTRU RULQS RTITKPRRUUY RW\\UYSXQXOYN[N]O_Ra RW\\UZSYOYO]P_Ra RSXPZN]",
+  2379: " 26JZPOOMOKMKMMNNPOSOUNWL RNKNN RMLOL RMMSO RPOUN RWLSY",
+  2380: " 86A^GfHfIeIdHcGcFdFfGhIiKiNhPfQdR`RUQ;Q4R/S-U,V,X-Y/Y3X6W8U;P?JCHEFHEJDNDREVGYJ[N\\R\\V[XZZW[T[PZMYKWITHPHMIKKJNJRKUMW RGdGeHeHdGd RU;Q?LCIFGIFKENERFVGXJ[ RR\\U[WZYWZTZPYMXKVITH",
+  2381: " 89IjNQOOQNSNUOVQVSUUSVQVOUNTMQMNNKPISHWH[I^K`NaRaW`[_]]`ZcVfQiMk RWHZI]K_N`R`W_[^]\\`YcTgQi RPOTO ROPUP RNQVQ RNRVR RNSVS ROTUT RPUTU ReLeNgNgLeL RfLfN ReMgM ReVeXgXgVeV RfVfX ReWgW",
+  2382: " 85D`H>Hf RI>If RM>Mf RQBSBSDQDQAR?T>W>Y?[A\\D\\I[LYNWOUOSNRLQNOQNROSQVRXSVUUWUYV[X\\[\\`[cYeWfTfReQcQ`S`SbQb RRBRD RQCSC RY?ZA[D[IZLYN RRLRNPQNRPSRVRX RYVZX[[[`ZcYe RR`Rb RQaSa",
+  2401: " 21AcHBHb RIBIb R[B[b R\\B\\b RDB`B RDbMb RWb`b",
+  2402: " 23BaGBQPFb RFBPP REBPQ REB\\B^I[B RGa\\a RFb\\b^[[b",
+  2403: " 28I[X+U1R8P=OANFMNMVN^OcPgRlUsXy RU1S6Q<P@OFNNNVO^PdQhSnUs",
+  2404: " 28I[L+O1R8T=UAVFWNWVV^UcTgRlOsLy RO1Q6S<T@UFVNVVU^TdShQnOs",
+  2405: " 14I[M+MRMy RN+NRNy RM+X+ RMyXy",
+  2406: " 14I[V+VRVy RW+WRWy RL+W+ RLyWy",
+  2407: " 48I[V+S-Q/P1O4O8P<TDUGUJTMRP RS-Q0P4P8Q;UCVGVJUMRPNRRTUWVZV]UaQiPlPpQtSw RRTTWUZU]T`PhOlOpPsQuSwVy",
+  2408: " 48I[N+Q-S/T1U4U8T<PDOGOJPMRP RQ-S0T4T8S;OCNGNJOMRPVRRTOWNZN]OaSiTlTpStQw RRTPWOZO]P`ThUlUpTsSuQwNy",
+  2409: " 32I[V.S1Q4O8N=NCOIPMSXT\\UbUgTlSoQs RS1Q5P8O=OBPHQLTWU[VaVgUlSpQsNv",
+  2410: " 32I[N.Q1S4U8V=VCUITMQXP\\ObOgPlQoSs RQ1S5T8U=UBTHSLPWO[NaNgOlQpSsVv",
+  2411: ' 147Z:RARRo R@RQo R?RRr RZ"VJRr',
+  2412: " 57Ca].\\.[/[0\\1]1^0^.],[+Y+W,U.T0S3R:QJQjPsOv R\\/\\0]0]/\\/ RR:Rj RU.T1S:SZRjQqPtOvMxKyIyGxFvFtGsHsItIuHvGv RGtGuHuHtGt",
+  2501: " 20H\\RFJ[ RRIK[J[ RRIY[Z[ RRFZ[ RMUWU RLVXV",
+  2502: " 44H\\LFL[ RMGMZ RLFTFWGXHYJYMXOWPTQ RMGTGWHXJXMWOTP RMPTPWQXRYTYWXYWZT[L[ RMQTQWRXTXWWYTZMZ",
+  2503: " 38H]ZKYIWGUFQFOGMILKKNKSLVMXOZQ[U[WZYXZV RZKYKXIWHUGQGOHMKLNLSMVOYQZUZWYXXYVZV",
+  2504: " 32H]LFL[ RMGMZ RLFSFVGXIYKZNZSYVXXVZS[L[ RMGSGVHWIXKYNYSXVWXVYSZMZ",
+  2505: " 27I\\MFM[ RNGNZ RMFYF RNGYGYF RNPTPTQ RNQTQ RNZYZY[ RM[Y[",
+  2506: " 21I[MFM[ RNGN[M[ RMFYF RNGYGYF RNPTPTQ RNQTQ",
+  2507: " 44H]ZKYIWGUFQFOGMILKKNKSLVMXOZQ[U[WZYXZVZRUR RZKYKXIWHUGQGOHNIMKLNLSMVNXOYQZUZWYXXYVYSUSUR",
+  2508: " 22G]KFK[ RKFLFL[K[ RYFXFX[Y[ RYFY[ RLPXP RLQXQ",
+  2509: "  8NWRFR[S[ RRFSFS[",
+  2510: " 20J[VFVVUYSZQZOYNVMV RVFWFWVVYUZS[Q[OZNYMV",
+  2511: " 22H]LFL[M[ RLFMFM[ RZFYFMR RZFMS RPOY[Z[ RQOZ[",
+  2512: " 14IZMFM[ RMFNFNZ RNZYZY[ RM[Y[",
+  2513: " 26F^JFJ[ RKKK[J[ RKKR[ RJFRX RZFRX RYKR[ RYKY[Z[ RZFZ[",
+  2514: " 20G]KFK[ RLIL[K[ RLIY[ RKFXX RXFXX RXFYFY[",
+  2515: " 40G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF RQGNHLKKNKSLVNYQZSZVYXVYSYNXKVHSGQG",
+  2516: " 27H\\LFL[ RMGM[L[ RLFUFWGXHYJYMXOWPUQMQ RMGUGWHXJXMWOUPMP",
+  2517: " 48G]PFNGLIKKJNJSKVLXNZP[T[VZXXYVZSZNYKXIVGTFPF RQGNHLKKNKSLVNYQZSZVYXVYSYNXKVHSGQG RSXX]Y] RSXTXY]",
+  2518: " 34H\\LFL[ RMGM[L[ RLFTFWGXHYJYMXOWPTQMQ RMGTGWHXJXMWOTPMP RRQX[Y[ RSQY[",
+  2519: " 43H\\YIWGTFPFMGKIKKLMMNOOTQVRWSXUXXWYTZPZNYMXKX RYIWIVHTGPGMHLILKMMONTPVQXSYUYXWZT[P[MZKX",
+  2520: " 15J[RGR[ RSGS[R[ RLFYFYG RLFLGYG",
+  2521: " 24G]KFKULXNZQ[S[VZXXYUYF RKFLFLUMXNYQZSZVYWXXUXFYF",
+  2522: " 14H\\JFR[ RJFKFRX RZFYFRX RZFR[",
+  2523: " 26E_GFM[ RGFHFMX RRFMX RRIM[ RRIW[ RRFWX R]F\\FWX R]FW[",
+  2524: " 16H\\KFX[Y[ RKFLFY[ RYFXFK[ RYFL[K[",
+  2525: " 17I\\KFRPR[S[ RKFLFSP RZFYFRP RZFSPS[",
+  2526: " 20H\\XFK[ RYFL[ RKFYF RKFKGXG RLZYZY[ RK[Y[",
+  2551: " 38E\\XFVHTKQPOSLWIZG[E[DZDXEWFXEY RXFWJUTT[ RXFU[ RT[TYSVRTPRNQLQKRKTLWOZR[V[XZ",
+  2552: " 70F^UGTHSJQOOUNWLZJ[ RTHSKQSPVOXMZJ[H[GZGXHWIXHY ROLNNMOKOJNJLKJMHOGRFXFZG[I[KZMXNTORO RXFYGZIZKYMXN RTOWPXQYSYVXYWZU[S[RZRXSU RTOVPWQXSXVWYU[",
+  2553: " 41H]KHJJJLKNNOQOUNWMYKZIZGYFWFTGQJOMMQLULXMZP[R[UZWXXVXTWRURSSRU RWFUGRJPMNQMUMXNZP[",
+  2554: " 43F]UGTHSJQOOUNWLZJ[ RTHSKQSPVOXMZJ[H[GZGXHWJWLXNZP[S[UZWXYTZOZLYIWGUFPFMGKIJKJMKNMNNMOK",
+  2555: " 49I\\WIVJVLWMYMZKZIYGWFTFRGQHPJPLQNSO RTFRHQJQMSO RSOQONPLRKTKWLYMZO[R[UZWXXVXTWRURSSRU RQOOPMRLTLXMZ",
+  2556: " 46G\\WHVJTORUQWOZM[ RQLPNNOLOKMKKLINGQF[FXGWHVKTSSVRXPZM[K[IZHYHXIWJXIY RSFWGXG ROSPRRQVQXPZMXT",
+  2557: " 53G]JIIKIMJOLPOPROTNWKXHXGWFVFTGRIQKPNPQQSSTUTWSYQZO RWFUGSIRKQNQRST RZOYSWWUYSZO[L[JZIXIWJVKWJX RYSWVUXRZO[",
+  2558: " 55F^LLKKKILGOFRFOQMWLYKZI[G[FZFXGWHXGY RRFOONRLWKYI[ RJTKSMRVOXN[L]J^H^G]F\\FZGXJWLURTVTYV[W[YZ[X R\\FZHXLVRUVUYV[",
+  2559: " 33IYWHUKSPQUPWNZL[ RYLWNTOQOONNLNJOHQGUFYFWHVJTPRVQXOZL[J[IZIXJWKXJY",
+  2560: " 34IZYFWHUKSPPYN] RYMWOTPQPOONMNKOIQGUFYFWIVKSTQXPZN]M^K_J^J\\KZMXOWRVVU",
+  2561: " 59F^LLKKKIMGPFRFOQMWLYKZI[G[FZFXGWHXGY RRFOONRLWKYI[ RZGWKUMSNPO R]G\\H]I^H^G]F\\FZGWLVMTNPO RPOSPTRUYV[ RPORPSRTYV[W[YZ[X",
+  2562: " 40I[MILKLMMOOPRPUOWNZK[H[GZFYFWGVHTKPUOWMZK[ RVHTLRSQVPXNZK[I[HZHXIWKWMXPZR[U[WZYX",
+  2563: " 49D`RFNOKUIXGZE[C[BZBXCWDXCY RRFPMOQNVNZP[ RRFQJPOOVOZP[ R[FWORXP[ R[FYMXQWVWZY[Z[\\Z^X R[FZJYOXVXZY[",
+  2564: " 38G^RFQJOPMULWJZH[F[EZEXFWGXFY RRFRKSVT[ RRFSKTVT[ R`G_H`IaHaG`F^F\\GZJYLWQUWT[",
+  2565: " 34H]SFQGOIMLLNKRKVLYMZO[Q[TZVXXUYSZOZKYHXGWGUHSJQNPSPV RQGOJMNLRLVMYO[",
+  2566: " 53F]UGTHSJQOOUNWLZJ[ RTHSKQSPVOXMZJ[H[GZGXHWIXHY ROLNNMOKOJNJLKJMHOGRFVFYGZH[J[MZOYPVQTQRP RVFXGYHZJZMYOXPVQ",
+  2567: " 43H]UJULTNSOQPOPNNNLOIQGTFWFYGZIZMYPWSSWPYNZK[I[HZHXIWKWMXPZS[V[XZZX RWFXGYIYMXPVSSVOYK[",
+  2568: " 65F^UGTHSJQOOUNWLZJ[ RTHSKQSPVOXMZJ[H[GZGXHWIXHY ROLNNMOKOJNJLKJMHOGRFWFZG[I[KZMYNVORO RWFYGZIZKYMXNVO RROUPVRWYX[ RROTPURVYX[Y[[Z]X",
+  2569: " 36H\\NIMKMMNOPPSPVOXN[K\\H\\G[FZFXGWHVJUMSTRWPZN[ RVJUNTUSXQZN[K[IZHXHWIVJWIX",
+  2570: " 38I[YHXJVOTUSWQZO[ RSLRNPONOMMMKNIPGSF\\FZGYHXKVSUVTXRZO[M[KZJYJXKWLXKY RUFYGZG",
+  2571: " 39G]HJJGLFMFOHOKNNKVKYL[ RMFNHNKKSJVJYL[N[PZSWUTVR RZFVRUVUYW[X[ZZ\\X R[FWRVVVYW[",
+  2572: " 36G\\HJJGLFMFOHOKNOLVLYM[ RMFNHNKLRKVKYM[N[QZTWVTXPYMZIZGYFXFWGVIVLWNYP[Q]Q",
+  2573: " 41F]ILHLGKGIHGJFNFMHLLKUJ[ RLLLUK[ RVFTHRLOUMYK[ RVFUHTLSUR[ RTLTUS[ R`F^G\\IZLWUUYS[",
+  2574: " 52H\\PKOLMLLKLIMGOFQFSGTITLSPQUOXMZJ[H[GZGXHWIXHY RQFRGSISLRPPUNXLZJ[ R]G\\H]I^H^G]F[FYGWIULSPRURXSZT[U[WZYX",
+  2575: " 42G]JJLGNFOFQGQIOOORPT ROFPGPINONRPTRTUSWQYNZL R\\FZLWTUX R]F[LYQWUUXSZP[L[JZIXIWJVKWJX",
+  2576: " 44G\\ZHYJWOVRUTSWQYOZL[ RSLRNPONOMMMKNIPGSF]F[GZHYKXOVUTXQZL[H[GZGXHWJWLXOZQ[T[WZYX RVFZG[G",
+  2601: " 36H\\WMW[X[ RWMXMX[ RWPUNSMPMNNLPKSKULXNZP[S[UZWX RWPSNPNNOMPLSLUMXNYPZSZWX",
+  2602: " 36H\\LFL[M[ RLFMFM[ RMPONQMTMVNXPYSYUXXVZT[Q[OZMX RMPQNTNVOWPXSXUWXVYTZQZMX",
+  2603: " 32I[XPVNTMQMONMPLSLUMXOZQ[T[VZXX RXPWQVOTNQNOONPMSMUNXOYQZTZVYWWXX",
+  2604: " 36H\\WFW[X[ RWFXFX[ RWPUNSMPMNNLPKSKULXNZP[S[UZWX RWPSNPNNOMPLSLUMXNYPZSZWX",
+  2605: " 36I[MTXTXQWOVNTMQMONMPLSLUMXOZQ[T[VZXX RMSWSWQVOTNQNOONPMSMUNXOYQZTZVYWWXX",
+  2606: " 24LZWFUFSGRJR[S[ RWFWGUGSH RTGSJS[ ROMVMVN ROMONVN",
+  2607: " 48H\\XMWMW\\V_U`SaQaO`N_L_ RXMX\\W_UaSbPbNaL_ RWPUNSMPMNNLPKSKULXNZP[S[UZWX RWPSNPNNOMPLSLUMXNYPZSZWX",
+  2608: " 25H\\LFL[M[ RLFMFM[ RMQPNRMUMWNXQX[ RMQPORNTNVOWQW[X[",
+  2609: " 24NWRFQGQHRISITHTGSFRF RRGRHSHSGRG RRMR[S[ RRMSMS[",
+  2610: " 24NWRFQGQHRISITHTGSFRF RRGRHSHSGRG RRMRbSb RRMSMSb",
+  2611: " 22H[LFL[M[ RLFMFM[ RXMWMMW RXMMX RPTV[X[ RQSX[",
+  2612: "  8NWRFR[S[ RRFSFS[",
+  2613: " 42CbGMG[H[ RGMHMH[ RHQKNMMPMRNSQS[ RHQKOMNONQORQR[S[ RSQVNXM[M]N^Q^[ RSQVOXNZN\\O]Q][^[",
+  2614: " 25H\\LML[M[ RLMMMM[ RMQPNRMUMWNXQX[ RMQPORNTNVOWQW[X[",
+  2615: " 36I\\QMONMPLSLUMXOZQ[T[VZXXYUYSXPVNTMQM RQNOONPMSMUNXOYQZTZVYWXXUXSWPVOTNQN",
+  2616: " 36H\\LMLbMb RLMMMMb RMPONQMTMVNXPYSYUXXVZT[Q[OZMX RMPQNTNVOWPXSXUWXVYTZQZMX",
+  2617: " 36H\\WMWbXb RWMXMXb RWPUNSMPMNNLPKSKULXNZP[S[UZWX RWPSNPNNOMPLSLUMXNYPZSZWX",
+  2618: " 21KYOMO[P[ ROMPMP[ RPSQPSNUMXM RPSQQSOUNXNXM",
+  2619: " 50J[XPWNTMQMNNMPNRPSUUWV RVUWWWXVZ RWYTZQZNY ROZNXMX RXPWPVN RWOTNQNNO RONNPOR RNQPRUTWUXWXXWZT[Q[NZMX",
+  2620: " 16MXRFR[S[ RRFSFS[ ROMVMVN ROMONVN",
+  2621: " 25H\\LMLWMZO[R[TZWW RLMMMMWNYPZRZTYWW RWMW[X[ RWMXMX[",
+  2622: " 14JZLMR[ RLMMMRY RXMWMRY RXMR[",
+  2623: " 26F^IMN[ RIMJMNX RRMNX RRPN[ RRPV[ RRMVX R[MZMVX R[MV[",
+  2624: " 16I[LMW[X[ RLMMMX[ RXMWML[ RXMM[L[",
+  2625: " 17JZLMR[ RLMMMRY RXMWMRYNb RXMR[ObNb",
+  2626: " 20I[VNL[ RXMNZ RLMXM RLMLNVN RNZXZX[ RL[X[",
+  2651: " 33K[UUTSRRPRNSMTLVLXMZO[Q[SZTX RPRNTMVMYO[ RVRTXTZV[XZYY[V RWRUXUZV[",
+  2652: " 23LZLVNSPO RSFMXMZO[P[RZTXUUURVVWWXWZV RTFNXNZO[",
+  2653: " 22LXTSSTTTTSSRQROSNTMVMXNZP[S[VYXV RQROTNVNYP[",
+  2654: " 33K[UUTSRRPRNSMTLVLXMZO[Q[SZTX RPRNTMVMYO[ RZFTXTZV[XZYY[V R[FUXUZV[",
+  2655: " 23LXOYQXRWSUSSRRQROSNTMVMXNZP[S[VYXV RQROTNVNYP[",
+  2656: " 27OXRRUOWLXIXGWFUGTIKdKfLgNfOcPZQ[S[UZVYXV RTISNRRO[M`Kd",
+  2657: " 38K[UUTSRRPRNSMTLVLXMZO[Q[SZTX RPRNTMVMYO[ RVRPd RWRT[R`PdOfMgLfLdMaO_R]V[YY[V",
+  2658: " 30L[LVNSPO RSFL[ RTFM[ ROUQSSRTRVSVUUXUZV[ RTRUSUUTXTZV[XZYY[V",
+  2659: " 19NVSLRMSNTMSL RQROXOZQ[SZTYVV RRRPXPZQ[",
+  2660: " 24NVSLRMSNTMSL RQRKd RRRO[M`KdJfHgGfGdHaJ_M]Q[TYVV",
+  2661: " 31LZLVNSPO RSFL[ RTFM[ RURUSVSURTRRTOU ROURVSZT[ ROUQVRZT[U[XYZV",
+  2662: " 17NVNVPSRO RUFOXOZQ[SZTYVV RVFPXPZQ[",
+  2663: " 45E^EVGSIRKSKUI[ RIRJSJUH[ RKUMSORPRRSRUP[ RPRQSQUO[ RRUTSVRWRYSYUXXXZY[ RWRXSXUWXWZY[[Z\\Y^V",
+  2664: " 32I[IVKSMROSOUM[ RMRNSNUL[ ROUQSSRTRVSVUUXUZV[ RTRUSUUTXTZV[XZYY[V",
+  2665: " 29KYRRPRNSMTLVLXMZO[Q[SZTYUWUUTSRRQSQURWTXVXXWYV RPRNTMVMYO[",
+  2666: " 30L[LVNSPO RQLHg RRLIg ROUQSSRTRVSVUUXUZV[ RTRUSUUTXTZV[XZYY[V",
+  2667: " 35K[UUTSRRPRNSMTLVLXMZO[Q[SZ RPRNTMVMYO[ RVRPdPfQgSfTcT[V[YY[V RWRT[R`Pd",
+  2668: " 24LZLVNSPRRSRUP[ RPRQSQUO[ RRUTSVRWRVU RVRVUWWXWZV",
+  2669: " 22NZNVPSQQQSTUUWUYTZR[ RQSSUTWTYR[ RNZP[U[XYZV",
+  2670: " 20NVNVPSRO RUFOXOZQ[SZTYVV RVFPXPZQ[ RPNVN",
+  2671: " 27K[NRLXLZN[O[QZSXUU RORMXMZN[ RVRTXTZV[XZYY[V RWRUXUZV[",
+  2672: " 23KZNRMTLWLZN[O[RZTXUUUR RORNTMWMZN[ RURVVWWXWZV",
+  2673: " 36H]LRJTIWIZK[L[NZPX RMRKTJWJZK[ RRRPXPZR[S[UZWXXUXR RSRQXQZR[ RXRYVZW[W]V",
+  2674: " 42JZJVLSNRPRQSQUPXOZM[L[KZKYLYKZ RWSVTWTWSVRURSSRUQXQZR[U[XYZV RQSRU RSSQU RPXQZ RQXOZ",
+  2675: " 32K[NRLXLZN[O[QZSXUU RORMXMZN[ RVRPd RWRT[R`PdOfMgLfLdMaO_R]V[YY[V",
+  2676: " 38LYLVNSPRRRTSTVSXPZN[ RRRSSSVRXPZ RN[P\\Q^QaPdNfLgKfKdLaO^R\\VYYV RN[O\\P^PaOdNf",
+  2700: " 42H\\QFNGLJKOKRLWNZQ[S[VZXWYRYOXJVGSFQF ROGMJLOLRMWOZ RNYQZSZVY RUZWWXRXOWJUG RVHSGQGNH",
+  2701: " 12H\\NJPISFS[ RNJNKPJRHR[S[",
+  2702: " 34H\\LKLJMHNGPFTFVGWHXJXLWNUQL[ RLKMKMJNHPGTGVHWJWLVNTQK[ RLZYZY[ RK[Y[",
+  2703: " 48H\\MFXFQO RMFMGWG RWFPO RQNSNVOXQYTYUXXVZS[P[MZLYKWLW RPOSOVPXS RTOWQXTXUWXTZ RXVVYSZPZMYLW ROZLX",
+  2704: " 18H\\UIU[V[ RVFV[ RVFKVZV RUILV RLUZUZV",
+  2705: " 53H\\MFLO RNGMN RMFWFWG RNGWG RMNPMSMVNXPYSYUXXVZS[P[MZLYKWLW RLOMOONSNVOXR RTNWPXSXUWXTZ RXVVYSZPZMYLW ROZLX",
+  2706: " 62H\\VGWIXIWGTFRFOGMJLOLTMXOZR[S[VZXXYUYTXQVOSNRNOOMQ RWHTGRGOH RPGNJMOMTNXQZ RMVOYRZSZVYXV RTZWXXUXTWQTO RXSVPSOROOPMS RQONQMT",
+  2707: " 12H\\KFYFO[ RKFKGXG RXFN[O[",
+  2708: " 68H\\PFMGLILKMMNNPOTPVQWRXTXWWYTZPZMYLWLTMRNQPPTOVNWMXKXIWGTFPF RNGMIMKNMPNTOVPXRYTYWXYWZT[P[MZLYKWKTLRNPPOTNVMWKWIVG RWHTGPGMH RLXOZ RUZXX",
+  2709: " 62H\\WPURRSQSNRLPKMKLLINGQFRFUGWIXMXRWWUZR[P[MZLXMXNZ RWMVPSR RWNUQRRQRNQLN RPRMPLMLLMIPG RLKNHQGRGUHWK RSGVIWMWRVWTZ RUYRZPZMY",
+  2710: " 16MXRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  2711: " 24MXTZS[R[QZQYRXSXTYT\\S^Q_ RRYRZSZSYRY RS[T\\ RTZS^",
+  2712: " 32MXRMQNQORPSPTOTNSMRM RRNROSOSNRN RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  2713: " 40MXRMQNQORPSPTOTNSMRM RRNROSOSNRN RTZS[R[QZQYRXSXTYT\\S^Q_ RRYRZSZSYRY RS[T\\ RTZS^",
+  2714: " 24MXRFRTST RRFSFST RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  2715: " 58I\\LKLJMHNGQFTFWGXHYJYLXNWOUPRQ RLKMKMJNHQGTGWHXJXLWNUORP RMIPG RUGXI RXMTP RRPRTSTSP RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  2716: " 24MXTFRGQIQLRMSMTLTKSJRJQK RRKRLSLSKRK RRGQK RQIRJ",
+  2717: " 24MXTHSIRIQHQGRFSFTGTJSLQM RRGRHSHSGRG RSITJ RTHSL",
+  2718: " 71F_\\MZMXNWPUVTXSYQZMZKYJWJUKSLRQOSMTKTISGQFPFNGMIMKNNPQUWXZZ[\\[ R\\M\\NZNXO RYNXPVVUXSZQ[M[KZJYIWIUJSLQQNRMSKSIRG RSHQGPGNH ROGNINKONQQVWXYZZ\\Z\\[",
+  2719: " 51I\\RBR_S_ RRBSBS_ RWIYIWGTFQFNGLILKMMNNVRWSXUXWWYTZQZOYNX RWIVHTGQGNHMIMKNMVQXSYUYWXYWZT[Q[NZLXNX RXXUZ",
+  2720: "  8G^[BIbJb R[B\\BJb",
+  2721: " 24KYUBSDQGOKNPNTOYQ]S`UbVb RUBVBTDRGPKOPOTPYR]T`Vb",
+  2722: " 24KYNBPDRGTKUPUTTYR]P`NbOb RNBOBQDSGUKVPVTUYS]Q`Ob",
+  2723: " 39JZRFQGSQRR RRFRR RRFSGQQRR RMINIVOWO RMIWO RMIMJWNWO RWIVINOMO RWIMO RWIWJMNMO",
+  2724: "  8F_JQ[Q[R RJQJR[R",
+  2725: " 16F_RIRZSZ RRISISZ RJQ[Q[R RJQJR[R",
+  2726: " 16F_JM[M[N RJMJN[N RJU[U[V RJUJV[V",
+  2727: " 11NWSFRGRM RSGRM RSFTGRM",
+  2728: " 22I[NFMGMM RNGMM RNFOGMM RWFVGVM RWGVM RWFXGVM",
+  2729: " 30KYQFOGNINKOMQNSNUMVKVIUGSFQF RQFNIOMSNVKUGQF RSFOGNKQNUMVISF",
+  2750: " 42H]TFQGOIMLLOKSKVLYMZO[Q[TZVXXUYRZNZKYHXGVFTF RTFRGPINLMOLSLVMYO[ RQ[SZUXWUXRYNYKXHVF",
+  2751: " 15H]TJO[ RVFP[ RVFSIPKNL RUIQKNL",
+  2752: " 42H]OJPKOLNKNJOHPGSFVFYGZIZKYMWOTQPSMUKWI[ RVFXGYIYKXMVOPS RJYKXMXRZUZWYXW RMXR[U[WZXW",
+  2753: " 50H]OJPKOLNKNJOHPGSFVFYGZIZKYMVOSP RVFXGYIYKXMVO RQPSPVQWRXTXWWYVZS[O[LZKYJWJVKULVKW RSPUQVRWTWWVYUZS[",
+  2754: " 10H]XGR[ RYFS[ RYFJUZU",
+  2755: " 39H]QFLP RQF[F RQGVG[F RLPMOPNSNVOWPXRXUWXUZR[O[LZKYJWJVKULVKW RSNUOVPWRWUVXTZR[",
+  2756: " 46H]YIXJYKZJZIYGWFTFQGOIMLLOKSKWLYMZO[R[UZWXXVXSWQVPTOQOOPMRLT RTFRGPINLMOLSLXMZ RR[TZVXWVWRVP",
+  2757: " 30H]NFLL R[FZIXLSRQUPWO[ RXLRRPUOWN[ RMIPFRFWI RNHPGRGWIYIZH[F",
+  2758: " 63H]SFPGOHNJNMOOQPTPXOYNZLZIYGVFSF RSFQGPHOJOMPOQP RTPWOXNYLYIXGVF RQPMQKSJUJXKZN[R[VZWYXWXTWRVQTP RQPNQLSKUKXLZN[ RR[UZVYWWWSVQ",
+  2759: " 46H]YMXOVQTRQROQNPMNMKNIPGSFVFXGYHZJZNYRXUVXTZQ[N[LZKXKWLVMWLX ROQNONKOIQGSF RXGYIYNXRWUUXSZQ[",
+  2760: "  6MXPYOZP[QZPY",
+  2761: "  8MXP[OZPYQZQ[P]N_",
+  2762: " 11MXSMRNSOTNSM RPYOZP[QZ",
+  2763: " 14MXSMRNSOTNSM RP[OZPYQZQ[P]N_",
+  2764: " 17MXUFTGRS RUGRS RUFVGRS RPYOZP[QZPY",
+  2765: " 34H]OJPKOLNKNJOHPGSFWFZG[I[KZMYNSPQQQSRTTT RWFYGZIZKYMXNVO RPYOZP[QZPY",
+  2766: "  8MXVFTHSJSKTLUKTJ",
+  2767: "  8MXUHTGUFVGVHUJSL",
+  2768: " 55E_\\N[O\\P]O]N\\M[MYNWPRXPZN[K[HZGXGVHTISKRPPROTMUKUITGRFPGOIOLPRQUSXUZW[Y[ZYZX RK[IZHXHVITJSPP ROLPQQTSWUYWZYZZY",
+  2769: " 41H]TBL_ RYBQ_ RZJYKZL[K[JZHYGVFRFOGMIMKNMONVRXT RMKOMVQWRXTXWWYVZS[O[LZKYJWJVKULVKW",
+  2770: "  3G]_BEb",
+  2771: " 20KZZBVESHQKOONTNXO]P`Qb RVESIQMPPOUOZP_Qb",
+  2772: " 20JYSBTDUGVLVPUUSYQ\\N_Jb RSBTEUJUOTTSWQ[N_",
+  2773: "  9J[TFTR ROIYO RYIOO",
+  2774: "  3E_IR[R",
+  2775: "  6E_RIR[ RIR[R",
+  2776: "  6E_IO[O RIU[U",
+  2777: "  6NWUFSM RVFSM",
+  2778: " 12I[PFNM RQFNM RYFWM RZFWM",
+  2779: " 14KZSFQGPIPKQMSNUNWMXKXIWGUFSF",
+  2801: " 18H\\RFK[ RRFY[ RRIX[ RMUVU RI[O[ RU[[[",
+  2802: " 31G]LFL[ RMFM[ RIFYFYLXF RMPUPXQYRZTZWYYXZU[I[ RUPWQXRYTYWXYWZU[",
+  2803: " 45G]LFL[ RMFM[ RIFUFXGYHZJZLYNXOUP RUFWGXHYJYLXNWOUP RMPUPXQYRZTZWYYXZU[I[ RUPWQXRYTYWXYWZU[",
+  2804: " 14I[NFN[ ROFO[ RKFZFZLYF RK[R[",
+  2805: " 31F^NFNLMTLXKZJ[ RXFX[ RYFY[ RKF\\F RG[\\[ RG[Gb RH[Gb R[[\\b R\\[\\b",
+  2806: " 22G\\LFL[ RMFM[ RSLST RIFYFYLXF RMPSP RI[Y[YUX[",
+  2807: " 71CbRFR[ RSFS[ ROFVF RGGHHGIFHFGGFHFIGJIKMLONPWPYOZM[I\\G]F^F_G_H^I]H^G RNPLQKSJXIZH[ RNPMQLSKXJZI[G[FZEX RWPYQZS[X\\Z][ RWPXQYSZX[Z\\[^[_Z`X RO[V[",
+  2808: " 45H\\LIKFKLLINGPFTFWGXIXLWNTOQO RTFVGWIWLVNTO RTOVPXRYTYWXYWZT[O[MZLYKWKVLUMVLW RWQXTXWWYVZT[",
+  2809: " 27F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RXHLY RH[O[ RU[\\[",
+  2810: " 37F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RXHLY RH[O[ RU[\\[ RN@N?M?M@NBPCTCVBW@",
+  2811: " 43F^KFK[ RLFL[ RHFOF RLPSPUOVMWIXGYFZF[G[HZIYHZG RSPUQVSWXXZY[ RSPTQUSVXWZX[Z[[Z\\X RH[O[",
+  2812: " 25E^MFMLLTKXJZI[H[GZGYHXIYHZ RXFX[ RYFY[ RJF\\F RU[\\[",
+  2813: " 30F_KFK[ RLFRX RKFR[ RYFR[ RYFY[ RZFZ[ RHFLF RYF]F RH[N[ RV[][",
+  2814: " 27F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RLPXP RH[O[ RU[\\[",
+  2815: " 44G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RQFOGMILKKOKRLVMXOZQ[ RS[UZWXXVYRYOXKWIUGSF",
+  2816: " 21F^KFK[ RLFL[ RXFX[ RYFY[ RHF\\F RH[O[ RU[\\[",
+  2817: " 29G]LFL[ RMFM[ RIFUFXGYHZJZMYOXPUQMQ RUFWGXHYJYMXOWPUQ RI[P[",
+  2818: " 32G\\XIYLYFXIVGSFQFNGLIKKJNJSKVLXNZQ[S[VZXXYV RQFOGMILKKNKSLVMXOZQ[",
+  2819: " 16I\\RFR[ RSFS[ RLFKLKFZFZLYF RO[V[",
+  2820: " 24H]KFRV RLFSV RZFSVQYPZN[M[LZLYMXNYMZ RIFOF RVF\\F",
+  2821: " 48F_RFR[ RSFS[ ROFVF RPILJJLIOIRJULWPXUXYW[U\\R\\O[LYJUIPI RPIMJKLJOJRKUMWPX RUXXWZU[R[OZLXJUI RO[V[",
+  2822: " 21H\\KFX[ RLFY[ RYFK[ RIFOF RUF[F RI[O[ RU[[[",
+  2823: " 27F^KFK[ RLFL[ RXFX[ RYFY[ RHFOF RUF\\F RH[\\[ R[[\\b R\\[\\b",
+  2824: " 28F]KFKQLSOTRTUSWQ RLFLQMSOT RWFW[ RXFX[ RHFOF RTF[F RT[[[",
+  2825: " 30BcGFG[ RHFH[ RRFR[ RSFS[ R]F][ R^F^[ RDFKF ROFVF RZFaF RD[a[",
+  2826: " 36BcGFG[ RHFH[ RRFR[ RSFS[ R]F][ R^F^[ RDFKF ROFVF RZFaF RD[a[ R`[ab Ra[ab",
+  2827: " 31F`PFP[ RQFQ[ RIFHLHFTF RQPXP[Q\\R]T]W\\Y[ZX[M[ RXPZQ[R\\T\\W[YZZX[",
+  2828: " 41CaHFH[ RIFI[ REFLF RIPPPSQTRUTUWTYSZP[E[ RPPRQSRTTTWSYRZP[ R[F[[ R\\F\\[ RXF_F RX[_[",
+  2829: " 29H]MFM[ RNFN[ RJFQF RNPUPXQYRZTZWYYXZU[J[ RUPWQXRYTYWXYWZU[",
+  2830: " 39H]LIKFKLLINGQFSFVGXIYKZNZSYVXXVZS[P[MZLYKWKVLUMVLW RSFUGWIXKYNYSXVWXUZS[ RPPYP",
+  2831: " 59CbHFH[ RIFI[ REFLF RE[L[ RVFSGQIPKOOORPVQXSZV[X[[Z]X^V_R_O^K]I[GXFVF RVFTGRIQKPOPRQVRXTZV[ RX[ZZ\\X]V^R^O]K\\IZGXF RIPOP",
+  2832: " 45G]WFW[ RXFX[ R[FOFLGKHJJJLKNLOOPWP ROFMGLHKJKLLNMOOP RRPPQORLYKZJZIY RPQOSMZL[J[IYIX RT[[[",
+  2901: " 39I]NONPMPMONNPMTMVNWOXQXXYZZ[ RWOWXXZZ[[[ RWQVRPSMTLVLXMZP[S[UZWX RPSNTMVMXNZP[",
+  2902: " 48H\\XFWGQINKLNKQKULXNZQ[S[VZXXYUYSXPVNSMQMNNLPKS RXFWHUIQJNLLN RQMONMPLSLUMXOZQ[ RS[UZWXXUXSWPUNSM",
+  2903: " 37H\\MMM[ RNMN[ RJMUMXNYPYQXSUT RUMWNXPXQWSUT RNTUTXUYWYXXZU[J[ RUTWUXWXXWZU[",
+  2904: " 14HZMMM[ RNMN[ RJMXMXRWM RJ[Q[",
+  2905: " 22F]NMNQMWLZK[ RWMW[ RXMX[ RKM[M RI[H`H[[[[`Z[",
+  2906: " 31H[LSXSXQWOVNTMQMNNLPKSKULXNZQ[S[VZXX RWSWPVN RQMONMPLSLUMXOZQ[",
+  2907: " 59E`RMR[ RSMS[ ROMVM RJNIOHNIMJMKNMRNSPTUTWSXRZN[M\\M]N\\O[N RPTNUMVKZJ[ RPTNVLZK[I[HZGX RUTWUXVZZ[[ RUTWVYZZ[\\[]Z^X RO[V[",
+  2908: " 42I[MOLMLQMONNPMTMWNXPXQWSTT RTMVNWPWQVSTT RQTTTWUXWXXWZT[P[MZLXLWMVNWMX RTTVUWWWXVZT[",
+  2909: " 27G]LML[ RMMM[ RWMW[ RXMX[ RIMPM RTM[M RI[P[ RT[[[ RWNMZ",
+  2910: " 37G]LML[ RMMM[ RWMW[ RXMX[ RIMPM RTM[M RI[P[ RT[[[ RWNMZ ROGOFNFNGOIQJSJUIVG",
+  2911: " 38H\\MMM[ RNMN[ RJMQM RNTPTSSTRVNWMXMYNXOWN RPTSUTVVZW[ RPTRUSVUZV[X[YZZX RJ[Q[",
+  2912: " 22G]NMNQMWLZK[J[IZJYKZ RWMW[ RXMX[ RKM[M RT[[[",
+  2913: " 30G^LML[ RLMR[ RMMRY RXMR[ RXMX[ RYMY[ RIMMM RXM\\M RI[O[ RU[\\[",
+  2914: " 27G]LML[ RMMM[ RWMW[ RXMX[ RIMPM RTM[M RMTWT RI[P[ RT[[[",
+  2915: " 36H\\QMNNLPKSKULXNZQ[S[VZXXYUYSXPVNSMQM RQMONMPLSLUMXOZQ[ RS[UZWXXUXSWPUNSM",
+  2916: " 21G]LML[ RMMM[ RWMW[ RXMX[ RIM[M RI[P[ RT[[[",
+  2917: " 36G\\LMLb RMMMb RMPONQMSMVNXPYSYUXXVZS[Q[OZMX RSMUNWPXSXUWXUZS[ RIMMM RIbPb",
+  2918: " 28H[WPVQWRXQXPVNTMQMNNLPKSKULXNZQ[S[VZXX RQMONMPLSLUMXOZQ[",
+  2919: " 16I\\RMR[ RSMS[ RMMLRLMYMYRXM RO[V[",
+  2920: " 22I[LMR[ RMMRY RXMR[P_NaLbKbJaK`La RJMPM RTMZM",
+  2921: " 52H]RFRb RSFSb ROFSF RRPQNPMNMLNKQKWLZN[P[QZRX RNMMNLQLWMZN[ RWMXNYQYWXZW[ RSPTNUMWMYNZQZWYZW[U[TZSX RObVb",
+  2922: " 21H\\LMW[ RMMX[ RXML[ RJMPM RTMZM RJ[P[ RT[Z[",
+  2923: " 23G]LML[ RMMM[ RWMW[ RXMX[ RIMPM RTM[M RI[[[[`Z[",
+  2924: " 28G]LMLTMVPWRWUVWT RMMMTNVPW RWMW[ RXMX[ RIMPM RTM[M RT[[[",
+  2925: " 30CbHMH[ RIMI[ RRMR[ RSMS[ R\\M\\[ R]M][ REMLM ROMVM RYM`M RE[`[",
+  2926: " 32CbHMH[ RIMI[ RRMR[ RSMS[ R\\M\\[ R]M][ REMLM ROMVM RYM`M RE[`[``_[",
+  2927: " 27H]QMQ[ RRMR[ RLMKRKMUM RRTVTYUZWZXYZV[N[ RVTXUYWYXXZV[",
+  2928: " 37E_JMJ[ RKMK[ RGMNM RKTOTRUSWSXRZO[G[ ROTQURWRXQZO[ RYMY[ RZMZ[ RVM]M RV[][",
+  2929: " 25J[OMO[ RPMP[ RLMSM RPTTTWUXWXXWZT[L[ RTTVUWWWXVZT[",
+  2930: " 34I\\MOLMLQMONNPMSMVNXPYSYUXXVZS[P[NZLXLWMVNWMX RSMUNWPXSXUWXUZS[ RRTXT",
+  2931: " 51DaIMI[ RJMJ[ RFMMM RF[M[ RVMSNQPPSPUQXSZV[X[[Z]X^U^S]P[NXMVM RVMTNRPQSQURXTZV[ RX[ZZ\\X]U]S\\PZNXM RJTPT",
+  2932: " 40G\\VMV[ RWMW[ RZMOMLNKPKQLSOTVT ROMMNLPLQMSOT RTTQUPVNZM[ RTTRUQVOZN[L[KZJX RS[Z[",
+  3001: " 36H\\RFKZ RQIW[ RRIX[ RRFY[ RMUVU RI[O[ RT[[[ RKZJ[ RKZM[ RWZU[ RWYV[ RXYZ[",
+  3002: " 78G]LFL[ RMGMZ RNFN[ RIFUFXGYHZJZLYNXOUP RXHYJYLXN RUFWGXIXMWOUP RNPUPXQYRZTZWYYXZU[I[ RXRYTYWXY RUPWQXSXXWZU[ RJFLG RKFLH ROFNH RPFNG RLZJ[ RLYK[ RNYO[ RNZP[",
+  3003: " 37G\\XIYFYLXIVGTFQFNGLIKKJNJSKVLXNZQ[T[VZXXYV RMILKKNKSLVMX RQFOGMJLNLSMWOZQ[",
+  3004: " 62G]LFL[ RMGMZ RNFN[ RIFSFVGXIYKZNZSYVXXVZS[I[ RWIXKYNYSXVWX RSFUGWJXNXSWWUZS[ RJFLG RKFLH ROFNH RPFNG RLZJ[ RLYK[ RNYO[ RNZP[",
+  3005: " 83G\\LFL[ RMGMZ RNFN[ RIFYFYL RNPTP RTLTT RI[Y[YU RJFLG RKFLH ROFNH RPFNG RTFYG RVFYH RWFYI RXFYL RTLSPTT RTNRPTR RTOPPTQ RLZJ[ RLYK[ RNYO[ RNZP[ RT[YZ RV[YY RW[YX RX[YU",
+  3006: " 70G[LFL[ RMGMZ RNFN[ RIFYFYL RNPTP RTLTT RI[Q[ RJFLG RKFLH ROFNH RPFNG RTFYG RVFYH RWFYI RXFYL RTLSPTT RTNRPTR RTOPPTQ RLZJ[ RLYK[ RNYO[ RNZP[",
+  3007: " 60G^XIYFYLXIVGTFQFNGLIKKJNJSKVLXNZQ[T[VZXZY[YS RMILKKNKSLVMX RQFOGMJLNLSMWOZQ[ RXTXY RWSWYVZ RTS\\S RUSWT RVSWU RZSYU R[SYT",
+  3008: " 81F^KFK[ RLGLZ RMFM[ RWFW[ RXGXZ RYFY[ RHFPF RTF\\F RMPWP RH[P[ RT[\\[ RIFKG RJFKH RNFMH ROFMG RUFWG RVFWH RZFYH R[FYG RKZI[ RKYJ[ RMYN[ RMZO[ RWZU[ RWYV[ RYYZ[ RYZ[[",
+  3009: " 39LXQFQ[ RRGRZ RSFS[ RNFVF RN[V[ ROFQG RPFQH RTFSH RUFSG RQZO[ RQYP[ RSYT[ RSZU[",
+  3010: " 45JYSFSWRZQ[ RTGTWSZ RUFUWTZQ[O[MZLXLVMUNUOVOWNXMX RMVMWNWNVMV RPFXF RQFSG RRFSH RVFUH RWFUG",
+  3011: " 69F\\KFK[ RLGLZ RMFM[ RXGMR RPPW[ RQPX[ RQNY[ RHFPF RUF[F RH[P[ RT[[[ RIFKG RJFKH RNFMH ROFMG RWFXG RZFXG RKZI[ RKYJ[ RMYN[ RMZO[ RWYU[ RWYZ[",
+  3012: " 52I[NFN[ ROGOZ RPFP[ RKFSF RK[Z[ZU RLFNG RMFNH RQFPH RRFPG RNZL[ RNYM[ RPYQ[ RPZR[ RU[ZZ RW[ZY RX[ZX RY[ZU",
+  3013: " 63E_JFJZ RJFQ[ RKFQX RLFRX RXFQ[ RXFX[ RYGYZ RZFZ[ RGFLF RXF]F RG[M[ RU[][ RHFJG R[FZH R\\FZG RJZH[ RJZL[ RXZV[ RXYW[ RZY[[ RZZ\\[",
+  3014: " 39F^KFKZ RKFY[ RLFXX RMFYX RYGY[ RHFMF RVF\\F RH[N[ RIFKG RWFYG R[FYG RKZI[ RKZM[",
+  3015: " 54G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RMILKKNKSLVMX RWXXVYSYNXKWI RQFOGMJLNLSMWOZQ[ RS[UZWWXSXNWJUGSF",
+  3016: " 59G]LFL[ RMGMZ RNFN[ RIFUFXGYHZJZMYOXPUQNQ RXHYJYMXO RUFWGXIXNWPUQ RI[Q[ RJFLG RKFLH ROFNH RPFNG RLZJ[ RLYK[ RNYO[ RNZP[",
+  3017: " 77G]QFNGLIKKJOJRKVLXNZQ[S[VZXXYVZRZOYKXIVGSFQF RMILKKNKSLVMX RWXXVYSYNXKWI RQFOGMJLNLSMWOZQ[ RS[UZWWXSXNWJUGSF RNXOVQURUTVUXV^W`Y`Z^Z\\ RV\\W^X_Y_ RUXW]X^Y^Z]",
+  3018: " 80G]LFL[ RMGMZ RNFN[ RIFUFXGYHZJZLYNXOUPNP RXHYJYLXN RUFWGXIXMWOUP RRPTQUSWYX[Z[[Y[W RWWXYYZZZ RTQURXXYYZY[X RI[Q[ RJFLG RKFLH ROFNH RPFNG RLZJ[ RLYK[ RNYO[ RNZP[",
+  3019: " 44H\\XIYFYLXIVGSFPFMGKIKLLNOPURWSXUXXWZ RLLMNOOUQWRXT RMGLILKMMONUPXRYTYWXYWZT[Q[NZLXKUK[LX",
+  3020: " 57H\\JFJL RQFQ[ RRGRZ RSFS[ RZFZL RJFZF RN[V[ RKFJL RLFJI RMFJH ROFJG RUFZG RWFZH RXFZI RYFZL RQZO[ RQYP[ RSYT[ RSZU[",
+  3021: " 45F^KFKULXNZQ[S[VZXXYUYG RLGLVMX RMFMVNYOZQ[ RHFPF RVF\\F RIFKG RJFKH RNFMH ROFMG RWFYG R[FYG",
+  3022: " 34H\\KFR[ RLFRXR[ RMFSX RYGR[ RIFPF RUF[F RJFLH RNFMH ROFMG RWFYG RZFYG",
+  3023: " 55F^JFN[ RKFNVN[ RLFOV RRFOVN[ RRFV[ RSFVVV[ RTFWV RZGWVV[ RGFOF RRFTF RWF]F RHFKG RIFKH RMFLH RNFLG RXFZG R\\FZG",
+  3024: " 54H\\KFW[ RLFX[ RMFY[ RXGLZ RIFPF RUF[F RI[O[ RT[[[ RJFMH RNFMH ROFMG RVFXG RZFXG RLZJ[ RLZN[ RWZU[ RWYV[ RWYZ[",
+  3025: " 48G]JFQQQ[ RKFRQRZ RLFSQS[ RYGSQ RHFOF RVF\\F RN[V[ RIFKG RNFLG RWFYG R[FYG RQZO[ RQYP[ RSYT[ RSZU[",
+  3026: " 41H\\YFKFKL RWFK[ RXFL[ RYFM[ RK[Y[YU RLFKL RMFKI RNFKH RPFKG RT[YZ RV[YY RW[YX RX[YU",
+  3051: " 38H\\UFIZ RSJT[ RTHUZ RUFUHVYV[ RLUTU RF[L[ RQ[X[ RIZG[ RIZK[ RTZR[ RTYS[ RVYW[",
+  3052: " 78F^OFI[ RPFJ[ RQFK[ RLFWFZG[I[KZNYOVP RYGZIZKYNXO RWFXGYIYKXNVP RNPVPXQYSYUXXVZR[F[ RWQXSXUWXUZ RVPWRWUVXTZR[ RMFPG RNFOH RRFPH RSFPG RJZG[ RJYH[ RKYL[ RJZM[",
+  3053: " 41H]ZH[H\\F[L[JZHYGWFTFQGOIMLLOKSKVLYMZP[S[UZWXXV RQHOJNLMOLSLWMY RTFRGPJOLNOMSMXNZP[",
+  3054: " 63F]OFI[ RPFJ[ RQFK[ RLFUFXGYHZKZOYSWWUYSZO[F[ RWGXHYKYOXSVWTY RUFWHXKXOWSUWRZO[ RMFPG RNFOH RRFPH RSFPG RJZG[ RJYH[ RKYL[ RJZM[",
+  3055: " 80F]OFI[ RPFJ[ RQFK[ RULST RLF[FZL RNPTP RF[U[WV RMFPG RNFOH RRFPH RSFPG RWFZG RXFZH RYFZI RZFZL RULSPST RTNRPSR RTOQPSQ RJZG[ RJYH[ RKYL[ RJZM[ RP[UZ RR[UY RUYWV",
+  3056: " 70F\\OFI[ RPFJ[ RQFK[ RULST RLF[FZL RNPTP RF[N[ RMFPG RNFOH RRFPH RSFPG RWFZG RXFZH RYFZI RZFZL RULSPST RTNRPSR RTOQPSQ RJZG[ RJYH[ RKYL[ RJZM[",
+  3057: " 65H^ZH[H\\F[L[JZHYGWFTFQGOIMLLOKSKVLYMZP[R[UZWXYT RQHOJNLMOLSLWMY RVXWWXT RTFRGPJOLNOMSMXNZP[ RR[TZVWWT RTT\\T RUTWU RVTWW RZTXV R[TXU",
+  3058: " 81E_NFH[ ROFI[ RPFJ[ RZFT[ R[FU[ R\\FV[ RKFSF RWF_F RLPXP RE[M[ RQ[Y[ RLFOG RMFNH RQFOH RRFOG RXF[G RYFZH R]F[H R^F[G RIZF[ RIYG[ RJYK[ RIZL[ RUZR[ RUYS[ RVYW[ RUZX[",
+  3059: " 39KYTFN[ RUFO[ RVFP[ RQFYF RK[S[ RRFUG RSFTH RWFUH RXFUG ROZL[ ROYM[ RPYQ[ ROZR[",
+  3060: " 47I\\WFRWQYO[ RXFTSSVRX RYFUSSXQZO[M[KZJXJVKULUMVMWLXKX RKVKWLWLVKV RTF\\F RUFXG RVFWH RZFXH R[FXG",
+  3061: " 72F]OFI[ RPFJ[ RQFK[ R\\GMR RQOU[ RROV[ RSNWZ RLFTF RYF_F RF[N[ RR[Y[ RMFPG RNFOH RRFPH RSFPG RZF\\G R^F\\G RJZG[ RJYH[ RKYL[ RJZM[ RUZS[ RUYT[ RVYX[",
+  3062: " 49H\\QFK[ RRFL[ RSFM[ RNFVF RH[W[YU ROFRG RPFQH RTFRH RUFRG RLZI[ RLYJ[ RMYN[ RLZO[ RR[WZ RT[XX RV[YU",
+  3063: " 68D`MFGZ RMGNYN[ RNFOY ROFPX R[FPXN[ R[FU[ R\\FV[ R]FW[ RJFOF R[F`F RD[J[ RR[Z[ RKFMG RLFMH R^F\\H R_F\\G RGZE[ RGZI[ RVZS[ RVYT[ RWYX[ RVZY[",
+  3064: " 43F_OFIZ ROFV[ RPFVX RQFWX R\\GWXV[ RLFQF RYF_F RF[L[ RMFPG RNFPH RZF\\G R^F\\G RIZG[ RIZK[",
+  3065: " 56G]SFPGNILLKOJSJVKYLZN[Q[TZVXXUYRZNZKYHXGVFSF ROIMLLOKSKWLY RUXWUXRYNYJXH RSFQGOJNLMOLSLXMZN[ RQ[SZUWVUWRXNXIWGVF",
+  3066: " 60F]OFI[ RPFJ[ RQFK[ RLFXF[G\\I\\K[NYPUQMQ RZG[I[KZNXP RXFYGZIZKYNWPUQ RF[N[ RMFPG RNFOH RRFPH RSFPG RJZG[ RJYH[ RKYL[ RJZM[",
+  3067: " 78G]SFPGNILLKOJSJVKYLZN[Q[TZVXXUYRZNZKYHXGVFSF ROIMLLOKSKWLY RUXWUXRYNYJXH RSFQGOJNLMOLSLXMZN[ RQ[SZUWVUWRXNXIWGVF RLXMVOUPURVSXT]U^V^W] RT^U_V_ RSXS_T`V`W]W\\",
+  3068: " 78F^OFI[ RPFJ[ RQFK[ RLFWFZG[I[KZNYOVPNP RYGZIZKYNXO RWFXGYIYKXNVP RRPTQURWXXYYYZX RWYXZYZ RURVZW[Y[ZXZW RF[N[ RMFPG RNFOH RRFPH RSFPG RJZG[ RJYH[ RKYL[ RJZM[",
+  3069: " 44G^ZH[H\\F[L[JZHYGVFRFOGMIMLNNPPVSWUWXVZ RNLONVRWT ROGNINKOMUPWRXTXWWYVZS[O[LZKYJWJUI[JYKY",
+  3070: " 54G]TFN[ RUFO[ RVFP[ RMFKL R]F\\L RMF]F RK[S[ RNFKL RPFLI RRFMG RYF\\G RZF\\H R[F\\I R\\F\\L ROZL[ ROYM[ RPYQ[ ROZR[",
+  3071: " 48F_NFKQJUJXKZN[R[UZWXXU\\G ROFLQKUKYLZ RPFMQLULYN[ RKFSF RYF_F RLFOG RMFNH RQFOH RRFOG RZF\\G R^F\\G",
+  3072: " 35H\\NFNHOYO[ ROGPX RPFQW R[GO[ RLFSF RXF^F RMFNH RQFPH RRFOG RYF[G R]F[G",
+  3073: " 57E_MFMHKYK[ RNGLX ROFMW RUFMWK[ RUFUHSYS[ RVGTX RWFUW R]GUWS[ RJFRF RUFWF RZF`F RKFNG RLFMH RPFNI RQFNG R[F]G R_F]G",
+  3074: " 54G]NFT[ ROFU[ RPFV[ R[GIZ RLFSF RXF^F RF[L[ RQ[X[ RMFOH RQFPH RRFPG RYF[G R]F[G RIZG[ RIZK[ RTZR[ RTYS[ RUYW[",
+  3075: " 51G]MFQPN[ RNFRPO[ ROFSPP[ R\\GSP RKFRF RYF_F RK[S[ RLFNG RPFOH RQFNG RZF\\G R^F\\G ROZL[ ROYM[ RPYQ[ ROZR[",
+  3076: " 35G]ZFH[ R[FI[ R\\FJ[ R\\FNFLL RH[V[XU ROFLL RPFMI RRFNG RR[VZ RT[WX RU[XU",
+  3101: " 54I]NPNOOOOQMQMONNPMTMVNWOXQXXYZZ[ RVOWQWXXZ RTMUNVPVXWZZ[[[ RVRUSPTMULWLXMZP[S[UZVX RNUMWMXNZ RUSQTOUNWNXOZP[",
+  3102: " 47G\\LFL[MZOZ RMGMY RIFNFNZ RNPONQMSMVNXPYSYUXXVZS[Q[OZNX RWPXRXVWX RSMUNVOWRWVVYUZS[ RJFLG RKFLH",
+  3103: " 34H[WQWPVPVRXRXPVNTMQMNNLPKSKULXNZQ[S[VZXX RMPLRLVMX RQMONNOMRMVNYOZQ[",
+  3104: " 52H]VFV[[[ RWGWZ RSFXFX[ RVPUNSMQMNNLPKSKULXNZQ[S[UZVX RMPLRLVMX RQMONNOMRMVNYOZQ[ RTFVG RUFVH RXYY[ RXZZ[",
+  3105: " 41H[MSXSXQWOVNSMQMNNLPKSKULXNZQ[S[VZXX RWRWQVO RMPLRLVMX RVSVPUNSM RQMONNOMRMVNYOZQ[",
+  3106: " 40KYWHWGVGVIXIXGWFTFRGQHPKP[ RRHQKQZ RTFSGRIR[ RMMVM RM[U[ RPZN[ RPYO[ RRYS[ RRZT[",
+  3107: " 89I\\XNYOZNYMXMVNUO RQMONNOMQMSNUOVQWSWUVVUWSWQVOUNSMQM ROONQNSOU RUUVSVQUO RQMPNOPOTPVQW RSWTVUTUPTNSM RNUMVLXLYM[N\\Q]U]X^Y_ RN[Q\\U\\X] RLYMZP[U[X\\Y^Y_XaUbObLaK_K^L\\O[ RObMaL_L^M\\O[",
+  3108: " 65G^LFL[ RMGMZ RIFNFN[ RNQOOPNRMUMWNXOYRY[ RWOXRXZ RUMVNWQW[ RI[Q[ RT[\\[ RJFLG RKFLH RLZJ[ RLYK[ RNYO[ RNZP[ RWZU[ RWYV[ RYYZ[ RYZ[[",
+  3109: " 43LXQFQHSHSFQF RRFRH RQGSG RQMQ[ RRNRZ RNMSMS[ RN[V[ ROMQN RPMQO RQZO[ RQYP[ RSYT[ RSZU[",
+  3110: " 41KXRFRHTHTFRF RSFSH RRGTG RRMR^QaPb RSNS]R` ROMTMT]S`RaPbMbLaL_N_NaMaM` RPMRN RQMRO",
+  3111: " 61G]LFL[ RMGMZ RIFNFN[ RWNNW RRSY[ RRTX[ RQTW[ RTM[M RI[Q[ RT[[[ RJFLG RKFLH RUMWN RZMWN RLZJ[ RLYK[ RNYO[ RNZP[ RWYU[ RVYZ[",
+  3112: " 31LXQFQ[ RRGRZ RNFSFS[ RN[V[ ROFQG RPFQH RQZO[ RQYP[ RSYT[ RSZU[",
+  3113: " 99AcFMF[ RGNGZ RCMHMH[ RHQIOJNLMOMQNROSRS[ RQORRRZ ROMPNQQQ[ RSQTOUNWMZM\\N]O^R^[ R\\O]R]Z RZM[N\\Q\\[ RC[K[ RN[V[ RY[a[ RDMFN REMFO RFZD[ RFYE[ RHYI[ RHZJ[ RQZO[ RQYP[ RSYT[ RSZU[ R\\ZZ[ R\\Y[[ R^Y_[ R^Z`[",
+  3114: " 65G^LML[ RMNMZ RIMNMN[ RNQOOPNRMUMWNXOYRY[ RWOXRXZ RUMVNWQW[ RI[Q[ RT[\\[ RJMLN RKMLO RLZJ[ RLYK[ RNYO[ RNZP[ RWZU[ RWYV[ RYYZ[ RYZ[[",
+  3115: " 46H\\QMNNLPKSKULXNZQ[S[VZXXYUYSXPVNSMQM RMPLRLVMX RWXXVXRWP RQMONNOMRMVNYOZQ[ RS[UZVYWVWRVOUNSM",
+  3116: " 60G\\LMLb RMNMa RIMNMNb RNPONQMSMVNXPYSYUXXVZS[Q[OZNX RWPXRXVWX RSMUNVOWRWVVYUZS[ RIbQb RJMLN RKMLO RLaJb RL`Kb RN`Ob RNaPb",
+  3117: " 55H\\VNVb RWOWa RUNWNXMXb RVPUNSMQMNNLPKSKULXNZQ[S[UZVX RMPLRLVMX RQMONNOMRMVNYOZQ[ RSb[b RVaTb RV`Ub RX`Yb RXaZb",
+  3118: " 43IZNMN[ RONOZ RKMPMP[ RWOWNVNVPXPXNWMUMSNQPPS RK[S[ RLMNN RMMNO RNZL[ RNYM[ RPYQ[ RPZR[",
+  3119: " 43J[WOXMXQWOVNTMPMNNMOMQNSPTUUWVXY RNNMQ RNRPSUTWU RXVWZ RMONQPRUSWTXVXYWZU[Q[OZNYMWM[NY",
+  3120: " 22KZPHPVQYRZT[V[XZYX RQHQWRY RPHRFRWSZT[ RMMVM",
+  3121: " 43G^LMLVMYNZP[S[UZVYWW RMNMWNY RIMNMNWOZP[ RWMW[\\[ RXNXZ RTMYMY[ RJMLN RKMLO RYYZ[ RYZ[[",
+  3122: " 31I[LMR[ RMMRY RNMSY RXNSYR[ RJMQM RTMZM RKMNO RPMNN RVMXN RYMXN",
+  3123: " 45F^JMN[ RKMNX RLMOX RRMOXN[ RRMV[ RSMVX RRMTMWX RZNWXV[ RGMOM RWM]M RHMKN RNMLN RXMZN R\\MZN",
+  3124: " 48H\\LMV[ RMMW[ RNMX[ RWNMZ RJMQM RTMZM RJ[P[ RS[Z[ RKMMN RPMNN RUMWN RYMWN RMZK[ RMZO[ RVZT[ RWZY[",
+  3125: " 40H[LMR[ RMMRY RNMSY RXNSYP_NaLbJbIaI_K_KaJaJ` RJMQM RTMZM RKMNO RPMNN RVMXN RYMXN",
+  3126: " 41I[VML[ RWMM[ RXMN[ RXMLMLQ RL[X[XW RMMLQ RNMLP ROMLO RQMLN RS[XZ RU[XY RV[XX RW[XW",
+  3151: " 50G]WMUTUXVZW[Y[[Y\\W RXMVTVZ RWMYMWTVX RUTUQTNRMPMMNKQJTJVKYLZN[P[RZSYTWUT RNNLQKTKWLY RPMNOMQLTLWMZN[",
+  3152: " 52I\\PFNMMSMWNYOZQ[S[VZXWYTYRXOWNUMSMQNPOOQNT RQFOMNQNWOZ RVYWWXTXQWO RMFRFPMNT RS[UYVWWTWQVNUM RNFQG ROFPH",
+  3153: " 34I[WQWPVPVRXRXPWNUMRMONMQLTLVMYNZP[R[UZWW ROONQMTMWNY RRMPOOQNTNWOZP[",
+  3154: " 58G]YFVQUUUXVZW[Y[[Y\\W RZFWQVUVZ RVF[FWTVX RUTUQTNRMPMMNKQJTJVKYLZN[P[RZSYTWUT RMOLQKTKWLY RPMNOMQLTLWMZN[ RWFZG RXFYH",
+  3155: " 33I[MVQUTTWRXPWNUMRMONMQLTLVMYNZP[R[UZWX ROONQMTMWNY RRMPOOQNTNWOZP[",
+  3156: " 45JZZHZGYGYI[I[GZFXFVGTISKRNQRO[N^M`Kb RTJSMRRP[O^ RXFVHUJTMSRQZP]O_MaKbIbHaH_J_JaIaI` RNMYM",
+  3157: " 57H]XMT[S^QaOb RYMU[S_ RXMZMV[T_RaObLbJaI`I^K^K`J`J_ RVTVQUNSMQMNNLQKTKVLYMZO[Q[SZTYUWVT RNOMQLTLWMY RQMOONQMTMWNZO[",
+  3158: " 41G]OFI[K[ RPFJ[ RLFQFK[ RMTOPQNSMUMWNXPXSVX RWNWRVVVZ RWPUUUXVZW[Y[[Y\\W RMFPG RNFOH",
+  3159: " 35KXSFSHUHUFSF RTFTH RSGUG RLQMOOMQMRNSPSSQX RRNRRQVQZ RRPPUPXQZR[T[VYWW",
+  3160: " 45KXUFUHWHWFUF RVFVH RUGWG RMQNOPMRMSNTPTSRZQ]P_NaLbJbIaI_K_KaJaJ` RSNSSQZP]O_ RSPRTP[O^N`Lb",
+  3161: " 49G]OFI[K[ RPFJ[ RLFQFK[ RYOYNXNXPZPZNYMWMUNQROS RMSOSQTRUTYUZWZ RQUSYTZ ROSPTRZS[U[WZYW RMFPG RNFOH",
+  3162: " 26LXTFQQPUPXQZR[T[VYWW RUFRQQUQZ RQFVFRTQX RRFUG RSFTH",
+  3163: " 61@cAQBODMFMGNHPHSF[ RGNGSE[ RGPFTD[F[ RHSJPLNNMPMRNSPSSQ[ RRNRSP[ RRPQTO[Q[ RSSUPWNYM[M]N^P^S\\X R]N]R\\V\\Z R]P[U[X\\Z][_[aYbW",
+  3164: " 42F^GQHOJMLMMNNPNSL[ RMNMSK[ RMPLTJ[L[ RNSPPRNTMVMXNYPYSWX RXNXRWVWZ RXPVUVXWZX[Z[\\Y]W",
+  3165: " 46H\\QMNNLQKTKVLYMZP[S[VZXWYTYRXOWNTMQM RNOMQLTLWMY RVYWWXTXQWO RQMOONQMTMWNZP[ RS[UYVWWTWQVNTM",
+  3166: " 66G]HQIOKMMMNNOPOSNWKb RNNNSMWJb RNPMTIb ROTPQQORNTMVMXNYOZRZTYWWZT[R[PZOWOT RXOYQYTXWWY RVMWNXQXTWWVYT[ RFbNb RJaGb RJ`Hb RK`Lb RJaMb",
+  3167: " 57G\\WMQb RXMRb RWMYMSb RUTUQTNRMPMMNKQJTJVKYLZN[P[RZSYTWUT RMOLQKTKWLY RPMNOMQLTLWMZN[ RNbVb RRaOb RR`Pb RS`Tb RRaUb",
+  3168: " 30I[JQKOMMOMPNQPQTO[ RPNPTN[ RPPOTM[O[ RYOYNXNXPZPZNYMWMUNSPQT",
+  3169: " 47J[XPXOWOWQYQYOXNUMRMONNONQOSQTTUVVWX RONNQ RORQSTTVU RWVVZ RNOOQQRTSVTWVWXVZS[P[MZLYLWNWNYMYMX",
+  3170: " 23KYTFQQPUPXQZR[T[VYWW RUFRQQUQZ RTFVFRTQX RNMXM",
+  3171: " 42F^GQHOJMLMMNNPNSLX RMNMRLVLZ RMPKUKXLZN[P[RZTXVU RXMVUVXWZX[Z[\\Y]W RYMWUWZ RXMZMXTWX",
+  3172: " 29H\\IQJOLMNMONPPPSNX RONORNVNZ ROPMUMXNZP[R[TZVXXUYQYMXMXNYP",
+  3173: " 48CaDQEOGMIMJNKPKSIX RJNJRIVIZ RJPHUHXIZK[M[OZQXRU RTMRURXSZU[W[YZ[X]U^Q^M]M]N^P RUMSUSZ RTMVMTTSX",
+  3174: " 51G]JQLNNMPMRNSPSR RPMQNQRPVOXMZK[I[HZHXJXJZIZIY RRORRQVQY RZOZNYNYP[P[NZMXMVNTPSRRVRZS[ RPVPXQZS[U[WZYW",
+  3175: " 49G]HQIOKMMMNNOPOSMX RNNNRMVMZ RNPLULXMZO[Q[SZUXWT RYMU[T^RaPb RZMV[T_ RYM[MW[U_SaPbMbKaJ`J^L^L`K`K_",
+  3176: " 39H\\YMXOVQNWLYK[ RXOOOMPLR RVORNONNO RVORMOMMOLR RLYUYWXXV RNYRZUZVY RNYR[U[WYXV",
+  3200: " 50H\\QFNGLJKOKRLWNZQ[S[VZXWYRYOXJVGSFQF RNHMJLNLSMWNY RVYWWXSXNWJVH RQFOGNIMNMSNXOZQ[ RS[UZVXWSWNVIUGSF",
+  3201: " 28H\\QHQ[ RRHRZ RSFS[ RSFPINJ RM[W[ RQZO[ RQYP[ RSYT[ RSZU[",
+  3202: " 62H\\LJLKMKMJLJ RLIMINJNKMLLLKKKJLHMGPFTFWGXHYJYLXNUPPRNSLUKXK[ RWHXJXLWN RTFVGWJWLVNTPPR RKYLXNXSYWYYX RNXSZWZXY RNXS[W[XZYXYV",
+  3203: " 76H\\LJLKMKMJLJ RLIMINJNKMLLLKKKJLHMGPFTFWGXIXLWNTO RVGWIWLVN RSFUGVIVLUNSO RQOTOVPXRYTYWXYWZT[P[MZLYKWKVLUMUNVNWMXLX RWRXTXWWY RSOUPVQWTWWVZT[ RLVLWMWMVLV",
+  3204: " 28H\\SIS[ RTHTZ RUFU[ RUFJUZU RP[X[ RSZQ[ RSYR[ RUYV[ RUZW[",
+  3205: " 55H\\MFKPMNPMSMVNXPYSYUXXVZS[P[MZLYKWKVLUMUNVNWMXLX RWPXRXVWX RSMUNVOWRWVVYUZS[ RLVLWMWMVLV RMFWF RMGUG RMHQHUGWF",
+  3206: " 69H\\VIVJWJWIVI RWHVHUIUJVKWKXJXIWGUFRFOGMILKKOKULXNZQ[S[VZXXYUYTXQVOSNQNOONPMR RNIMKLOLUMXNY RWXXVXSWQ RRFPGOHNJMNMUNXOZQ[ RS[UZVYWVWSVPUOSN",
+  3207: " 43H\\KFKL RYFYIXLTQSSRWR[ RSRRTQWQ[ RXLSQQTPWP[R[ RKJLHNFPFUIWIXHYF RMHNGPGRH RKJLINHPHUI",
+  3208: " 79H\\PFMGLILLMNPOTOWNXLXIWGTFPF RNGMIMLNN RVNWLWIVG RPFOGNINLONPO RTOUNVLVIUGTF RPOMPLQKSKWLYMZP[T[WZXYYWYSXQWPTO RMQLSLWMY RWYXWXSWQ RPONPMSMWNZP[ RT[VZWWWSVPTO",
+  3209: " 69H\\MWMXNXNWMW RWOVQURSSQSNRLPKMKLLINGQFSFVGXIYLYRXVWXUZR[O[MZLXLWMVNVOWOXNYMY RMPLNLKMI RVHWIXLXRWVVX RQSORNQMNMKNHOGQF RSFUGVIWLWSVWUYTZR[",
+  3210: " 16MXRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  3211: " 24MXTZS[R[QZQYRXSXTYT\\S^Q_ RRYRZSZSYRY RS[T\\ RTZS^",
+  3212: " 32MXRMQNQORPSPTOTNSMRM RRNROSOSNRN RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  3213: " 40MXRMQNQORPSPTOTNSMRM RRNROSOSNRN RTZS[R[QZQYRXSXTYT\\S^Q_ RRYRZSZSYRY RS[T\\ RTZS^",
+  3214: " 34MXRFQGQIRQ RRFRTST RRFSFST RSFTGTISQ RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  3215: " 52I\\MKMJNJNLLLLJMHNGPFTFWGXHYJYLXNWOSQ RWHXIXMWN RTFVGWIWMVOUP RRQRTSTSQRQ RRXQYQZR[S[TZTYSXRX RRYRZSZSYRY",
+  3216: " 24MXTFRGQIQLRMSMTLTKSJRJQK RRKRLSLSKRK RRGQK RQIRJ",
+  3217: " 24MXTHSIRIQHQGRFSFTGTJSLQM RRGRHSHSGRG RSITJ RTHSL",
+  3218: " 74E_[O[NZNZP\\P\\N[MZMYNXPVUTXRZP[L[JZIXIUJSPORMSKSIRGPFNGMIMLNOPRTWWZY[[[\\Y\\X RKZJXJUKSLR RRMSI RSKRG RNGMK RNNPQTVWYYZ RN[LZKXKULSPO RMINMQQUVXYZZ[Z\\Y",
+  3219: " 56H\\PBP_ RTBT_ RXKXJWJWLYLYJXHWGTFPFMGKIKLLNOPURWSXUXXWZ RLLMNOOUQWRXT RMGLILKMMONUPXRYTYWXYWZT[P[MZLYKWKUMUMWLWLV",
+  3220: "  8G^[BIbJb R[B\\BJb",
+  3221: " 27KYUBSDQGOKNPNTOYQ]S`Ub RQHPKOOOUPYQ\\ RSDRFQIPOPUQ[R^S`",
+  3222: " 27KYOBQDSGUKVPVTUYS]Q`Ob RSHTKUOUUTYS\\ RQDRFSITOTUS[R^Q`",
+  3223: " 39JZRFQGSQRR RRFRR RRFSGQQRR RMINIVOWO RMIWO RMIMJWNWO RWIVINOMO RWIMO RWIWJMNMO",
+  3224: "  8F_JQ[Q[R RJQJR[R",
+  3225: " 16F_RIRZSZ RRISISZ RJQ[Q[R RJQJR[R",
+  3226: " 16F_JM[M[N RJMJN[N RJU[U[V RJUJV[V",
+  3227: " 11NWSFRGRM RSGRM RSFTGRM",
+  3228: " 22I[NFMGMM RNGMM RNFOGMM RWFVGVM RWGVM RWFXGVM",
+  3229: " 30KYQFOGNINKOMQNSNUMVKVIUGSFQF RQFNIOMSNVKUGQF RSFOGNKQNUMVISF",
+  3250: " 58H]TFQGOIMLLOKSKVLYMZO[Q[TZVXXUYRZNZKYHXGVFTF RQHOJNLMOLSLWMY RTYVWWUXRYNYJXH RTFRGPJOLNOMSMXNZO[ RQ[SZUWVUWRXNXIWGVF",
+  3251: " 20H]TJO[Q[ RWFUJP[ RWFQ[ RWFTIQKOL RTJRKOL",
+  3252: " 52H]OKOJPJPLNLNJOHPGSFVFYGZIZKYMWOMUKWI[ RXGYIYKXMVOSQ RVFWGXIXKWMUOMU RJYKXMXRYWYXX RMXRZWZ RMXR[U[WZXXXW",
+  3253: " 64H]OKOJPJPLNLNJOHPGSFVFYGZIZKYMXNVOSP RXGYIYKXMWN RVFWGXIXKWMUOSP RQPSPVQWRXTXWWYUZR[O[LZKYJWJULULWKWKV RVRWTWWVY RSPUQVSVWUYTZR[",
+  3254: " 15H]WJR[T[ RZFXJS[ RZFT[ RZFJUZU",
+  3255: " 49H]QFLP RQF[F RQGYG RPHUHYG[F RLPMOPNSNVOWPXRXUWXUZQ[N[LZKYJWJULULWKWKV RVPWRWUVXTZ RSNUOVQVUUXSZQ[",
+  3256: " 61H]YJYIXIXKZKZIYGWFTFQGOIMLLOKSKVLYMZO[R[UZWXXVXSWQVPTOQOOPNQMS RPINLMOLSLWMY RVXWVWSVQ RTFRGPJOLNOMSMXNZO[ RR[TZUYVVVRUPTO",
+  3257: " 39H]NFLL R[FZIXLTQRTQWP[ RRSPWO[ RXLRRPUOWN[P[ RMIPFRFWI ROGRGWI RMIOHRHWIYIZH[F",
+  3258: "104H]SFPGOHNJNMOOQPTPWOYNZLZIYGWFSF RUFPG RPHOJONPO ROORP RSPWO RXNYLYIXG RYGUF RSFQHPJPNQP RTPVOWNXLXHWF RQPMQKSJUJXKZN[R[VZWYXWXTWRVQTP RRPMQ RNQLSKUKXLZ RKZP[VZ RVYWWWTVR RVQSP RQPOQMSLULXMZN[ RR[TZUYVWVSUQTP",
+  3259: " 61H]XNWPVQTRQROQNPMNMKNIPGSFVFXGYHZKZNYRXUVXTZQ[N[LZKXKVMVMXLXLW ROPNNNKOI RXHYJYNXRWUUX RQRPQOOOKPHQGSF RVFWGXIXNWRVUUWSZQ[",
+  3260: " 16MXPXOYOZP[Q[RZRYQXPX RPYPZQZQYPY",
+  3261: " 22MXQ[P[OZOYPXQXRYR[Q]P^N_ RPYPZQZQYPY RQ[Q\\P^",
+  3262: " 32MXSMRNROSPTPUOUNTMSM RSNSOTOTNSN RPXOYOZP[Q[RZRYQXPX RPYPZQZQYPY",
+  3263: " 38MXSMRNROSPTPUOUNTMSM RSNSOTOTNSN RQ[P[OZOYPXQXRYR[Q]P^N_ RPYPZQZQYPY RQ[Q\\P^",
+  3264: " 34MXVFUFTGRT RVGUGRT RVGVHRT RVFWGWHRT RPXOYOZP[Q[RZRYQXPX RPYPZQZQYPY",
+  3265: " 59H]OKOJPJPLNLNJOHPGSFWFZG[I[KZMYNWOSPQQQSSTTT RUFZG RYGZIZKYMXNVO RWFXGYIYKXMWNSPRQRSST RPXOYOZP[Q[RZRYQXPX RPYPZQZQYPY",
+  3266: " 22MXWFUGTHSJSLTMUMVLVKUJTJ RUGTITJ RTKTLULUKTK",
+  3267: " 22MXVIUITHTGUFVFWGWIVKULSM RUGUHVHVGUG RVIVJUL",
+  3268: " 72E_\\O\\N[N[P]P]N\\M[MYNWPRXPZN[K[HZGXGVHTISKRPPROTMUKUITGRFPGOIOLPRQURWTZV[X[YYYX RL[HZ RIZHXHVITJSLR RPPQSTYVZ RK[JZIXIVJTKSMRRO ROLPOQRSVUYWZXZYY",
+  3269: " 52H]TBL_ RYBQ_ RZKZJYJYL[L[JZHYGVFRFOGMIMLNNPPVSWUWXVZ RNLONVRWT ROGNINKOMUPWRXTXWWYVZS[O[LZKYJWJULULWKWKV",
+  3270: "  8G^_BEbFb R_B`BFb",
+  3271: " 32JZZBXCUERHPKNOMSMXN\\O_Qb RSHQKOONTN\\ RZBWDTGRJQLPOOSN\\ RNTO]P`Qb",
+  3272: " 32JZSBUEVHWLWQVUTYR\\O_LaJb RVHVPUUSYQ\\ RSBTDUGVP RVHUQTUSXRZP]M`Jb",
+  3273: " 39J[TFSGUQTR RTFTR RTFUGSQTR ROIPIXOYO ROIYO ROIOJYNYO RYIXIPOOO RYIOO RYIYJONOO",
+  3274: "  8F_JQ[Q[R RJQJR[R",
+  3275: " 16F_RIRZSZ RRISISZ RJQ[Q[R RJQJR[R",
+  3276: " 16F_JM[M[N RJMJN[N RJU[U[V RJUJV[V",
+  3277: " 11MWUFTGRM RUGRM RUFVGRM",
+  3278: " 22H\\PFOGMM RPGMM RPFQGMM RZFYGWM RZGWM RZF[GWM",
+  3279: " 30KZSFQGPIPKQMSNUNWMXKXIWGUFSF RSFPIQMUNXKWGSF RUFQGPKSNWMXIUF",
+  3301: " 62F^IHJIIJHIIGKFMFOGPHQKQOPRNTLUIV ROHPKPPOR RMFNGOJOPNSLU RLVOY RKVOZ RIVN[UV R\\G[H\\H\\G[FYFWGVHUJUYW[[W RWHVJVXXZ RYFXGWJWWYY",
+  3302: "101E_GQGRHSJSLRLOKMIJIHKF RKOIK RJSKRKPIMHKHIIGKFNFPGQHRJRRQUOW RPHQJQT RNFOGPJPUOW RRISGUFWFYGZH[J\\K RYHZJ RWFXGYJZK\\K R\\KRP RYM[O\\R\\U[XYZV[S[PZJWIWHX RXNYN[P RVNYO[Q\\S RTZRZLWKW RZYXZUZRYNWKVIVHXHZI[JZIY",
+  3303: " 79F^RHPFNFLGJJINIRJVLYNZQ[T[WZYY[W RLHKJJMJRKVMYPZ RNFMGLIKMKQLUMWOYRZUZXY[W RUFRHQIPKPLQNTPURUT RQKQLUPUQ RQIQJRLUNVPVRUTSURUPTOR RUFVGXHZH RUGVHWH RTGVIXIZH[G",
+  3304: " 79E_HLHKIIKGNFRFUGWHYJ[M\\Q\\U[XYZV[S[PZJWIWHX RKHMGRGUHWIYK[N RTZRZLWKW RHKJIMHRHUIWJYL[O\\R RZYXZUZRYNWKVIVHXHZI[JZIY RPHMKLMLONSNU RMNMONQNR RMKMMOQOSNUMVKVJUJT",
+  3305: " 95F^RHPFNFLGJJINIRJVLYNZQ[T[WZYY[W RLHKJJMJRKVMYPZ RNFMGLIKMKQLUMWOYRZUZXY[W RUFRHQIPKPLQNTPURUT RQKQLUPUQ RQIQJRLUNVPVRUTSURUPTOR RUFVGXHZH RUGVHWH RTGVIXIZH[G RUNYK RYKZL\\L RXLYMZM RWMXNZN\\L",
+  3306: " 94F^MNKMJKJIKGNFQFTGXI RKHMGRGUH RJKKIMHRHXIZI[H[GZFYF RSHRIQKQMROVSWVWYV\\U]S^ RTPWSXVXYW[ RQMSOVQXSYVYYX[V]S^O^L]K\\JZJWLTLRKQ RL\\K[KWLU RO^M]L[LWMTMRLQJQIRIS RUPYL RYLZM\\M RXMYNZN RWNXOZO\\M",
+  3307: " 99E_UJTHSGQFNFKGIJHNHRIUJWLYNZQ[T[WZYY[W\\T\\Q[NYL RKHJJIMIRJUKW RZW[U[QZNYM RNFLGKIJMJRKVLXNZ RWZYXZUZQYOWM RUFRHPJOLOMPOSQTSTU RPLPMTQTR RPJPKQMTOUQUSTURVQVOUNS RTOYLZJ R\\FZJ RYG]I R\\F[GYGZHZJ[I]I\\H\\F",
+  3308: " 92F_RFPGNIMKMMNOPQQSQU RNLNMQQQR RNINKOMQORQRSQUPVNWLWJVIUHSHQIPJQIR RRFTHVHXG RQGSH RPGQHSIUIXG RRPYK RYK[N\\Q\\T[WYYVZR[ RXLZN[Q[UZW RVMWMYOZRZVYXXYVZ RVZTZRYPYNZM\\N^P_R_T^ RSZQZ RR[PZNZ",
+  3309: " 83F_PPNPLOKNJLJJKHLGOFQFTGWJYK RLHNGRGTHUI RJJKIMHQHTIVJYK[K\\J\\H[GYG RJXKYJZIYIWJVLVNWPYR\\T^ RNXOYQ\\R] RLVMWNYP\\Q]S^V^X]Y\\ZZZWYUWRVPVO RYXYWVRVQ RX]Y[YYXWVTURUPWNYNZOZP",
+  3310: " 83F_PPNPLOKNJLJJKHLGOFQFTGWJYK RLHNGRGTHUI RJJKIMHQHTIVJYK[K\\J\\H[GYG RJXKYJZIYIWJVLVNWPYR\\T^ RNXOYQ\\R] RLVMWNYP\\Q]S^V^X]Y\\ZZZWYUWRVPVO RYXYWVRVQ RX]Y[YYXWVTURUPWNYNZOZP",
+  3311: " 81E_[KZIXGUFRFOGMILKLNMQPWPYN[ RMNMOPUPV RNHMJMMNOPSQVQXPZN[L[JZ RHVJZ RGYKW RHVHXGYIYJZJXKWIWHV RNONMOKQJTJVKXMYM RUKWM RRJTKULVN RYMPQ RUOYXZY[Y RTPXXZZ RSPWYY[\\X",
+  3312: " 73G^ZSYTVTUSUQVOXLYJYH RVQVPYLYK RWTVSVRWPYNZLZJYHXGUFPFMGLHKJKLLNNQOSOTNV RLKLLOQOR RLHLJMLOOPQPSOUMWJY RMWOWRYUZXZZY RNXOXSZTZ RJYLXMXQZT[V[YZZY[W",
+  3313: "128BbEQERFSHSJRJOIMGJGHIF RIOGK RHSIRIPGMFKFIGGIFKFMGOIPLPROUNWLYI[HZGZ RNIOLORNUMW RJZIYHY RKFMHNKNRMVLXKYJXIXF[ RNGPFRFTGVIWLWRVUUWSYQ[PZOZ RUIVLVRUV RRZQYPY RRFTHUKUSTWSYRXQXN[ RUHVGXFZF\\G]H^J_K R\\H]J RZF[G\\J]K_K R_K\\M[NZQZT[X][`X R\\N[P[T\\W^Z R_K]M\\O\\S]W_Y",
+  3314: " 96D`GQGRHSJSLRLOKMIJIHKF RKOIK RJSKRKPIMHKHIIGKFNFPGRISLSRRUQWOYL[KZIZG[ RQIRKRRQUPWOX RMZKYIY RNFPHQKQRPVNYLXJXG[ RRHSGUFWFYGZH[J\\K RYHZJ RWFXGYJZK\\K R\\KYMXNWQWTXXZ[]X RYNXPXTYW[Z R\\KZMYOYSZW\\Y",
+  3315: " 72D`PFNGLIKKKMMQMS RLLLMMOMP RLILKNONQMSLTJTISIR RPFQGWIZK[M\\P\\S[VZXXZU[R[OZIWHWGX RPGQHWJYKZL RPFPHQIWKYL[N\\P RSZQZKWJW RYYWZTZQYMWJVHVGXGZH[IZHY",
+  3316: "100E`HQHRISKSMRMOLMJJJHLF RLOJK RKSLRLPJMIKIIJGLFOFQGRHSJSU RSWS\\R^P_M_L^L\\M[N\\M] RQHRJR\\Q^ ROFPGQJQU RQWQ\\P^O_ RSJXF RXFZI[K\\O\\R[UYXV[ RWGZK[N[O RVHXJZM[P[SZVYX RWYUVSU RQUOVMX RWZUWSVPV RV[TXSW RQWOWMX",
+  3317: " 88D`PFNGLIKKKMMQMS RLLLMMOMP RLILKNONQMSLTJTISIR RPFQGWIZK[M\\P\\S[VZX RXZU[R[OZIWHWGX RPGQHWJYKZL RPFPHQIWKYL[N\\P RSZQZKWJW RXZTZQYMWJVHVGXGZH[IZHY RTXVVXV\\Z]Z RWWXW[Z RUWVWZ[\\[^Y",
+  3318: " 96D`GQGRHSJSLRLOKMIJIHKF RKOIK RJSKRKPIMHKHIIGKFNFPGQHRJRVQXOZM[K[IZ RPHQJQVPX RNFOGPJPVOYM[ RGVIZ RFYJW RGVGXFYHYIZIXJWHWGV RRISGUFWFYGZH[J\\K RYHZJ RWFXGYJZK\\K R\\KRP RTOXYZ[]X RUOYX[Z RVNZX[Y\\Y",
+  3319: " 83E`\\H[G\\F]G]I\\KZKVISHOHKIIK RYJVHSGOGLH R]I\\JZJVGSFOFLGJIIKHNHRIUJWLYNZQ[U[XZZY\\W]T]Q\\OZNWNUOSRQSOS RLXNYQZUZYY RIUKWMXPYUYYX[W\\V]T RXOWOSSRS R]Q[OYOWPUSSTQTOSNQNOOMQL",
+  3320: " 81F_LNJMIKIIJGMFRFUGYJ[J\\I RJHLGRGUHXJ RIKJILHRHUIYK[K\\I\\G[FZG[H RUIRLQNQPSTSV RRORPSRSS RRLRNTRTTSVRWPWOVOT RJYKZJ[IZIXJVLVOWSYVZYZ[Y RLWMWSZUZ RIXJWKWMXQZT[W[ZZ\\X",
+  3321: " 45G]JHKHLILWJX RKGMHMXPZ RIILFNHNWPYRY RJXKXMYO[RYVV RTHUHVIVYX[[X RUGWHWYYZ RSIVFYHXIXXYYZY",
+  3322: "100D`GQGRHSJSLRLOKMIJIHKF RKOIK RJSKRKPIMHKHIIGKFNFPGQHRJRRQUOW RPHQJQT RNFOGPJPUOW RRISGUFWFYG[J\\K RYHZJ RWFXGYJZK\\K RZKXKWLWNXP[R\\T RXO[Q RWMXN[P\\R\\V[XYZW[S[PZJWIWHX RTZRZLWKW RZYXZUZRYNWKVIVHXHZI[JZIY",
+  3323: "143BcEQERFSHSJRJOIMGJGHIF RIOGK RHSIRIPGMFKFIGGIFLFNGOHPJPNOQMTKV RNHOJOONR RLFMGNJNOMSKV RNGPFSFUG RWFTGSISMTPVSWUWWVY RTMTNWSWT RWFUGTITLUNWQXTXVWXUZS[O[MZKXIWGWFX RNZKWJW RQ[OZLWJVGVFXFZG[HZGY RWFZF\\G^J_K R\\H]J RZF[G\\J]K_K R]K[KZLZN[P^R_T R[O^Q RZM[N^P_R_W^Y]Z[[X[UZ RYZXZVY R^Y\\ZZZXYWX",
+  3324: " 86F^KHMHOIPJQMQO RQQQUPXM[KZI[ RNZLYKY ROYNYLXI[ RMGPHQIRLRUSWUYWZ RIINFPGRISLSO RSQSTTWUXWYYY RQURXTZV[[X RSLTIWFYG[F RVGXHYH RUHVHXI[F RKSMOQO RSOWOYM RMPWP RKSMQQQ RSQWQYM",
+  3325: " 74E_HQHRISKSMRMOLMJJJHLF RLOJK RKSLRLPJMIKIIJGLFOFQGRHSJSORRQTQUSWTW RQHRJRPQSPUSX ROFPGQJQPPTOVRYUV RSJ[F RYGYZX] RZGZXY[ R[F[VZZY\\W^T_P_M^K\\JZKYLZK[",
+  3326: " 74F^NIOGQFTFVGWHXJXMWOVPTQ RQQOPNN RVHWIWNVO RTFUGVIVNUPTQ RMUNSORQQTQWRYTZVZZY\\W^T_P_N^KZJY RXTYVYZX\\ RTQWSXUX[W]V^T_ RO^N]LZKY RR_P^O]MZLYIYHZH\\I]J]",
+  3401: " 46J[TMQNOONPMSMVNYO[UX RNVOYPZ RQNOPNSNUOXQZ RRNSOUPUYW[ZX RSNVPVXXZ RTMUNWOXO RWPXO RWPWXXYYY",
+  3402: " 50J[LHMINK RTFQGOINKNXMY RPIOKOXRZ RTFRGQHPKPXRYSZ RMYNYPZQ[TZ RPPVMWOXRXUWXVYTZ RUNVOWQ RTNVPWSWUVXTZ",
+  3403: " 27KXRNTPVOTMRNOPNRNWOYQ[UY RSNUO RPPOROWPYQZ RQOPQPVQXSZ",
+  3404: " 47J[QFNINKOLSNVPWRWUVXTZ ROJOKSMVOWP ROHOIPJUMWOXRXUWXTZQ[ RRNNPNXMY ROPOXRZ RPOPXRYSZ RMYNYPZQ[",
+  3405: " 27KXPUVQSMOPNRNWOYQ[UY RUQRN RPPOROWPYQZ RTRROQOPQPVQXSZ",
+  3406: " 49LYXFWGUGSFQFPHPMOONP RVHTHRGQG RXFWHVITIRHQHPI RPKQMRNTOVOVP RNPPP RRPVP RPPPTQ` RSOPOQNQ[ RRPRTQ`",
+  3407: " 53J[TMQNOONPMSMVNYO[UX RNWOYPZ RQNOPNSNUOXQZ RRNSOUPUXV[V]U_ RSNVPVZ RTMUNWOXO RWPXO RWPW\\V^U_S`P`N_M^M]N]N^",
+  3408: " 50J[LHMINK RTFQGOINKNXMY RPIOKOYPZ RTFRGQHPKPXQYRY RMYOZP[SX RPPVMWOXSXWWZV\\T^Q` RUNVOWR RTNVQWTWWV[T^",
+  3409: " 39MWRFQGQHRISHSGRF RQGSH RQHSG ROOPOQPQYS[VX RPNRORXTZ RNPQMRNTO RSPTO RSPSXTYUY",
+  3410: " 45MWRFQGQHRISHSGRF RQGSH RQHSG ROOPOQPQ[P^O_M` RPNROR[Q] RNPQMRNTO RSPTO RSPS[R]P_M` RS[T]U^",
+  3411: " 63KYNHOIPK RUFSGQIPKPMOONP RPPPXOY RRIQKQM RQOPOQMQXSZ RUFSHRKRO RRPRXSYTY ROYQZR[UX RRLVIWJWLUNSO RUJVKVLUN RROWOWP RNPPP RRPWP",
+  3412: " 29MWOHPIQK RWFTGRIQKQXPY RSIRKRYTZ RWFUGTHSKSXTYUY RPYRZS[VX",
+  3413: " 74E_GOHOIPIXHYJ[ RHNJPJXIYJZKYJX RFPIMKOKXLYJ[ RNNPOQQQXPYR[ RPNQORQRXQYRZSYRX RKPNNPMRNSPSXTYR[ RVNWOYPYY[[^X RWNZPZX\\Z RSPVNXMYN[O\\O R[P\\O R[P[X\\Y]Y",
+  3414: " 49I[KOLOMPMXLYN[ RLNNPNXMYNZOYNX RJPMMOOOXPYN[ RRNSOUPUYW[ZX RSNVPVXXZ ROPRNTMUNWOXO RWPXO RWPWXXYYY",
+  3415: " 41J[NPNXMY ROPOXRZ RQOPPPXRYSZ RMYNYPZQ[TZ RNPQOVMWOXRXUWXVYTZ RUNVOWQ RTNVPWSWUVXTZ",
+  3416: " 57J[OJMLMNNQNXLZ RNYO` RNMNNOQO[ RNKNLONPQPXQXSYTZ RPYO` RSZQY RTZR[PY RNYLZ RPPVMWOXRXUWXVYTZ RUNVOWQ RTNVPWSWUVXTZ",
+  3417: " 43J[TMQNOONPMSMVNYO[UX RNWOYPZ RQNOPNSNUOXQZ RRNSOUPUXV` RSNVPV[ RTMUNWOXO RWPXO RWPWXV`",
+  3418: " 32KYNOOOPPPXOY RONQPQYSZ RMPPMRORXSYTY ROYQZR[UX RTNUPWOVMRO RUNVO",
+  3419: " 42LWXFWGUGSFQFPHPMOONP RVHTHRGQG RXFWHVITIRHQHPI RPKRP RPPPTQ` RQOPOQNQ[ RRPRTQ` RNPPP",
+  3420: " 37LXSIRLQNPONP RSISOVOVP RNPQP RSPVP RQPQXPY RROQORMRXTZ RSPSXTYUY RPYRZS[VX",
+  3421: " 47I[KOLOMPMXLY RLNNPNXPZ RJPMMOOOXQYRZ RLYMYOZP[RZUX RVMTOUPUYW[ZX RVPWOVNUOVPVXXZ RVMXOWPWXXYYY",
+  3422: " 47J[OKMMMONRNXMY RNNNOOROXRZ RNLNMOOPRPXRYSZ RMYNYPZQ[TZ RPPVMWOXRXUWXVYTZ RUNVOWQ RTNVPWSWUVXTZ",
+  3423: " 72F_KKIMIOJRJXIYK[ RJNJOKRKXJYKZLYKX RJLJMKOLRLXMYK[ RONQORQRXQY RQNROSQSXVZ RLPONQMSNTPTXVYWZ RQYRYTZU[XZ RTPZM[O\\R\\T[XZYXZ RYNZO[Q RXNZP[S[UZXXZ",
+  3424: " 44KZOOPOQPQXPXNYM[M]N_P`S`V_V^U^U_ RPNRPRXUZ RNPQMSOSXUYVZ RXYT[SZQYOYM[ RUNVPXOWMSO RVNWO",
+  3425: " 47J[OKMMMONRNXMY RNNNOOROYQZ RNLNMOOPRPXQYRY RMYOZP[SX RPPVMWOXSXWWZV\\T^Q` RUNVOWR RTNVQWTWWV[T^",
+  3426: " 43KYNPSMUNVPVRUTQV RSNUO RRNTOUQURTTSU RSUUWVYV]U_S`Q`O_N]N[OYQXWV RRVTWUY RQVTXUZU]T_S`",
+  3427: " 61JZRMPNMPMRNU RNPNROT RPNOOORPT RPNROTOVNWMWKVJTJ RQNSN RRMTNVN RNUVRWUWWVYR[ RUSVUVXUY RTSUUUXTZ RTZRYOYL[ RSZQZ RR[PZNZL[",
+  3428: " 78J[VFUGSGQFOFNHNMMOLP RTHRHPGOG RVFUHTIRIPHOHNI RNKPP RNPNTO` ROONOONO[ RPPPTO` RLPNP RPPUMWNXPXRWTSV RUNWO RTNVOWQWRVTUU RUUWVXXX[W]U_R` RUVWW RSVTVVWWYW\\V^",
+  3429: " 62J[PIOLNNMOKP RPIPXQYO[ ROONOONOXNYOZPYOX RKPNPNXMYO[ RPPUMWNXPXRWTSV RUNWO RTNVOWQWRVTUU RUUWVXXX[W]U_R` RUVWW RSVTVVWWYW\\V^",
+  3501: " 60G]LINGPFRFSGZW[X]X RQGRHYXZZ[YYX RNGPGQHXXYZZ[[[]X RLMMLOKPKQL RPLPM RMLOLPN RG[IYKXNXPY RJYNYOZ RG[JZMZN[PY RRJLX RNSVS",
+  3502: "110F^HHJFMFOGQF RKGNG RHHJGLHOHQF RMKLLKNKOIOHPHRIQKQKW RLMLU RIPLP RMKMTLVKW RRIQJPLPU RQKQS RRIRRQTPU RRIXFZG[I[KYMUO RXGZIZK RVGXHYIYLWN RWNZP[R[X RYPZRZW RWNXOYQYX RJ[MYPXTXWY RLZOYTYVZ RJ[NZSZU[WYYX[X RUOUX RURYR RUUYU",
+  3503: " 69E]NGLHJJILHOHSIVJXMZP[S[VZXYZW[U RJKINISKWNYQZTZWY RNGLIKKJNJRKUNXQYTYWXYW[U RPJPV RQJQT RRIRSQUPV RPJRIUFWGYGZF RTGVHXH RSHUIWIYHZF RWIWX",
+  3504: " 72G^IFWFYGZIZX RKGWGYIYW RIFJGLHWHXIXX ROKNLMNMOKOJPJRKQMQMV RNMNT RKPNP ROKOSNUMV RI[LYOXSXVY RKZNYSYUZ RI[MZRZT[VYXXZX RRHRX RRMTNVNXM RRSTRVRXS",
+  3505: " 94G]IHKFMFOGQF RLGNG RIHKGMHOHQF RNKMLLNLOJOIPIRJQLQLW RMMMU RJPMP RNKNTMVLW RQMRJSHTGVFXF[G RTHVGXGZH RRJSIUHWHYI[G RQURRSPTOVOXP RTPVPWQ RRRSQUQVRXP RK[NYRXWX[Y RMZPYWYZZ RK[OZVZY[[Y RQMQX",
+  3506: " 91F]JHLFOFQGSF RMGPG RJHLGNHQHSF RPKOLNNNOLOKPKRLQNQNV ROMOT RLPOP RPKPSOUNV RSJSYRZQZMXKXIYG[ RTJTX RTPXP RPZOZMYJY RUIUOXO RXQUQUWTYP[N[LZJZG[ RSJUIXFZG\\G]F RWGYH[H RVHXIZI\\H]F RXIXW",
+  3507: " 87E^NGLHJJILHOHRIUJWLYNZQ[U[XZZX[V[SZQYPWOUO RJKINISJV RNGLIKKJNJSKVLXNZ RYXZWZSYQ RU[WZXYYWYSXQWPUO RPJPW RQJQU RRIRTQVPW RPJRIUFWGYGZF RTGVHXH RSHUIWIYHZF RYHUOU[ RUSYS RUVYV",
+  3508: "112F^HHJFMFOGQF RKGNG RHHJGLHOHQF RMKLLKNKOIOHPHRIQKQKW RLMLU RIPLP RMKMTLVKW RJ[MYPXSXUY RLZOYRYTZ RJ[NZQZS[UY RRIQJPLPU RQKQS RRIRRQTPU RRITGVFXFZG RWGXGYH RTGVGXIZG RUOWNYLZM[P[TZXX[ RXMYNZPZUYX RWNXNYPYUX[ RUOUY RURYR RUUYU",
+  3509: " 67I\\LHNFQFTGVF ROGSG RLHNGQHTHVF RSKRLQNQOOONPNROQQQQV RRMRT ROPRP RSKSSRUQV RYHWJVMVXUZSZOXMXKYI[ RWKWW RRZQZOYLY RYHXJXVWXUZS[P[NZKZI[",
+  3510: " 65H\\LHNFQFTGVF ROGSG RLHNGQHTHVF RSKRLQNQOOONPNROQQQQV RRMRT ROPRP RSKSSRUQV RYHWJVMVXUZ RWKWW RYHXJXVWXUZR[O[LZJXJVKULUMVLWKW RJVMV",
+  3511: "115F^HHJFMFOGQF RKGNG RHHJGLHOHQF RMKLLKNKOIOHPHRIQKQKW RLMLU RIPLP RMKMTLVKW RJ[MYPXSXUY RLZNYRYTZ RJ[NZQZS[UY RRIQJPLPU RQKQS RRIRRQTPU RRITGVFXFZG RWGXGYH RTGVGXIZG RUOXLYM[N RWMYN[N R[NYQWSUU RWSYTZX[Z\\Z RYVZZ RWSXTYZZ[[[\\Z RUOUY",
+  3512: " 85G]IHKFNFPGRF RLGOG RIHKGMHPHRF RNKMLLNLOJOIPIRJQLQLW RMMMU RJPMP RNKNTMVLW RK[NYRXWX[Y RMZPYWYZZ RK[OZVZY[[Y RSIRJQLQU RRKRS RSISRRTQU RSIUGWFYF[G RXGYGZH RUGWGYI[G RWGWX",
+  3513: "107D`LJKKJMJOHOGPGRHQJQJU RKLKS RHPKP RLJLRKTJU RE[GYIXKXMYNYOX RHYKYMZ RE[GZJZL[M[NZOX RLJPFTJTWUYVY RPGSJSXRYSZTYSX RPPSP RNHOHRKROOO ROQRQRXQYS[VYWX RTJXF\\J\\W]Y^Y RXG[J[X]Z RXP[P RVHWHZKZOWO RWQZQZY\\[^Y ROHOX RWHWX",
+  3514: " 84E^GIIGKFMFOGQJVUXXYY RMGOIPKVWYZ RIGKGMHOKTVVYWZY[ RVHXIZI\\H]F RWGYH[H RVHXFZG\\G]F RKOIOHPHRIQKQ RIPKP RG[IYKXNXPY RJYMYOZ RG[JZMZN[PY RKGKX RYIY[ RRLSMUNWNYM RKTMSQSST",
+  3515: " 79E_NFLGJIIKHNHRIUJWLYNZQ[S[VZXYZW[U\\R\\N[KZIXGVFUGRIOJ RJJIMISJV RNFLHKJJMJSKVLXNZ RZV[S[MYIXH RVZXXYVZSZMYKWHUG ROJOW RPJPU RQJQTPVOW RUGUZ RUMWNXNZM RUSWRXRZS",
+  3516: " 70H^KFLGMIMOKOJPJRKQMQMYJ[MZMbO` RMHNJN` RKPNP RKFMGNHOJO` ROKRIVFZJZX RVGYJYX RTHUHXKXY RRXUXXY RSYUYWZ RRZTZV[XYZX RRIR_ RRMTNVNXM RRSTRVRXS",
+  3517: " 99E_NFLGJIIKHNHRIUJWLYNZP[T[VZXYZW[U\\R\\N[KZIXGVFUGRIOJ RJJIMISJV RNFLHKJJMJSKVLXNZ RZV[S[MYIXH RVZXXYVZSZMYKWHUG ROJOW RPJPU RQJQTPVOW RUGUZ RUMWNXNZM RUSWRXRZS RP[QZRZT[X`Za[a RT\\V_XaYa RRZS[VaXbZb[a",
+  3518: "108F^HHJFMFOGQF RKGNG RHHJGLHOHQF RMKLLKNKOIOHPHRIQKQKW RLMLU RIPLP RMKMTLVKW RJ[MYPXRXUY RLZNYRYTZ RJ[NZQZS[UY RRIQJPLPU RQKQS RRIRRQTPU RRIUGWFYGZIZLYNXOTQRR RWGXGYIYMXN RUGWHXJXMWOTQ RTQVRWSZX[Y\\Y RWTYX[Z RTQVSXYZ[\\Y",
+  3519: " 94G^UITHRGOF RVHTG RWGSFOFLGKHJJKLLMONWNYOZPZRYU RKKLLOMXMZN[O[QZS RKHKJLKOLYL[M\\O\\QYUU[ RIOJPLQUQVRVSUU RJQLRTRUS RIOIPJRLSSSUTUU RI[LYPXSXVY RKZNYRYUZ RI[MZRZU[ RWGUISL RRNPQ ROSMUKVJVJUKV",
+  3520: " 71E]JJILHOHSIVKYMZP[S[VZXYZW[U RISJVLXNYQZTZWY RJJIMIQJTLWNXQYTYWXYW[U RHIIGKFOFUGYG[F RPGTHXH RHIIHKGNGTIWIYH[F RSIRJPKPV RQKQT RRJRSQUPV RWIWX",
+  3521: " 89F^HHJFLFOGQF RKGNG RHHJGMHOHQF RKJJLIOISJVKXMZP[S[VZXYZ[\\Y RJSKVNYQZTZ RKJJNJQKTLVNXQYUYXX RUIQJPLPV RQKQT RRJRSQUPV RUIWHYFZG\\HZIZW[Y\\Y RYIZHYGXHYIYX[Z RWHXIXX RUIUY RUNXN RURXR",
+  3522: " 72G^JFKGLILOJOIPIRJQLQLXJY RLHMJMX RJPMP RNYQYSZ RJFLGMHNJNXRXUY RJYMYPZR[UYXXZX RRJUIWHYFZG\\HZIZX RYIZHYGXHYIYW RWHXIXX RRJRX RRMTNVNXM RRSTRVRXS",
+  3523: " 95E`HFIGJIJOHOGPGRHQJQJXHY RJHKJKX RHPKP RLYNYPZ RHFJGKHLJLXOXQY RHYKYNZO[QYTXVYW[YY\\X ROHRFTHTXWXYY RRGSHSX ROHQHRIRXQY RWYXZ RWHZF\\H\\X RZG[H[X RWHYHZIZXYY ROHOX RWHWX RONRN RORRR RWNZN RWRZR",
+  3524: " 65G]HIJGLFNFOGWYXZZZ RMGNHVYWZ RJGLGMHUZV[X[ZZ\\X RWFYG[G\\F RWGXHZH RVHWIYI[H\\F RH[IYKXMXNY RJYLYMZ RH[IZKZM[ RWFSO RQRM[ RLPPP RSPXP",
+  3525: " 86G^JFKGLILOJOIPIRJQLQLXJY RLHMJMX RJPMP RNYQYSZ RJFLGMHNJNXRXUY RJYMYPZR[UYXX RRJUIWHYFZG\\HZIZ^Y`WbUaQ`L` RYIZHYGXHYIYY RWHXIXXZ[ RXaV`S` RY`V_P_L` RRJRX RRMTNVNXM RRSTRVRXS",
+  3526: " 57H\\XGWIROOSMWJ[ RVKNV RZFWJUNRRMXLZ RJHLFOGUGZF RKGOHSHWG RJHNIRIVHXG RLZNYRXVXZY RMZQYUYYZ RJ[OZUZX[ZY RMPQP RTPXP",
+  3601: " 53J[PRNTMVMXNZP[RYUX RMVNXOYQZ RNTNVOXQYRY RNPPPSOUNVMXOWPWXXYYY RONNOQO RTOWOVNVYWZ RMOOMPNROUPUYW[YY RMORT",
+  3602: " 44I[LHMJMXKY RNJMHNGNXQZ RLHOFOXQYRZ RKYMYOZP[RZUYWY ROPROTNUMVNXOYOWPWY RTNVOVX RROSOUPUY",
+  3603: " 35JXNONXLYMYOZP[ ROOOYQZ RPOPXRYSYQZP[ RNORNTMUNWOXO RSNTOVO RPORNTPVPXO",
+  3604: " 41IZRMPNMOMXKY RNONXQZ RRMOOOXQYRZ RKYMYOZP[RZUYWY RMHPFQIWOWY RPINHOGPIVOVX RMHUPUY",
+  3605: " 32JXNONXLYMYOZP[ ROOOYQZ RPOPXRYSYQZP[ RNORNTMWQURPU RSNVQ RPORNUR",
+  3606: " 41JWNHNXLYMYOZP[ ROHOYQZ RPHPXRYSYQZP[ RNHQGSFTGVHWH RRGSHUH RPHQGSIUIWH RKMNM RPMTM",
+  3607: " 56I[MOMXKYLYNZO[PZRYUX RNPNYPZ ROOOXQYRY RMOOORNTMUNWOYOWPW\\V_TaRbQaO`M` RSNVPV\\ RSaQ`P` RRNSOUPUZV]V_ RTaS`Q_O_M`",
+  3608: " 47I[LHMJMXKYLYNZO[ RNJMHNGNYPZ RLHOFOXQYO[ ROPROTNUMVNXOYOWPWYU[T] RTNVOVYU[ RROSOUPUYT]T`UbVbT`",
+  3609: " 35MWRFPHRITHRF RRGQHSHRG RRMQNOOQPQYS[UY RRPSORNQORPRYSZ RRMSNUOSPSXTYUY",
+  3610: " 39MWRFPHRITHRF RRGQHSHRG RRMQNOOQPQYS[T] RRPSORNQORPRYS[ RRMSNUOSPSYT]T`RbPbPaRb",
+  3611: " 50IZLHMJMXKYLYNZO[ RNJMHNGNYPZ RLHOFOXQYO[ ROPRNTMVPSROU RSNUP RRNTQ RSRTSVXWYXY RSSTTUYVZ RRSSTTYV[XY",
+  3612: " 22MWPHQJQXOYPYRZS[ RRJQHRGRYTZ RPHSFSXUYVYTZS[",
+  3613: " 67E_GOHOIPIXGYHYJZK[ RINJOJYLZ RGOIMKOKXMYK[ RKPNOPNQMSOSXUYS[ RPNRORYTZ RNOOOQPQXPYRZS[ RSPVOXNYMZN\\O]O[P[X\\Y]Y RXNZOZY[Z RVOWOYPYY[[]Y",
+  3614: " 45I[KOLOMPMXKYLYNZO[ RMNNONYPZ RKOMMOOOXQYO[ ROPROTNUMVNXOYOWPWXXYYY RTNVOVYWZ RROSOUPUYW[YY",
+  3615: " 40I[MOMXKY RNPNXQZ ROOOXQYRZ RKYMYOZP[RZUYWY RMOOORNTMUNWOYOWPWY RSNVPVX RRNSOUPUY",
+  3616: " 54I[LMMOMXKYMYMb RMNNONaO`N^ RNYOYQZ RLMNNOOOXQYRZ ROZP[RZUYWY ROZO^P`Mb ROPROTNUMVNXOYOWPWY RTNVOVX RROSOUPUY",
+  3617: " 44I[MOMXKY RNPNYPZ ROOOXQYRY RKYLYNZO[PZRYUX RMOOORNTMUNWOYOWPWb RSNVPVaU`V^ RRNSOUPU^T`Wb",
+  3618: " 38JXLOMONPNXLYMYOZP[ RMNOOOYQZ RLONMPOPXRYSYQZP[ RPOTMUNWOXO RSNTOVO RRNTPVPXO",
+  3619: " 59JZMOMSOTUTWUWY RNONS RVUVY RPNOOOSQT RSTUUUYTZ RMOPNRMTNVNWM RQNSN RPNROTOVN RWYTZR[PZNZL[ RSZQZ RTZRYOYL[ RWMVOTROWL[",
+  3620: " 28MWPHQJQXOYPYRZS[ RRJQHRGRYTZ RPHSFSXUYVYTZS[ RNMQM RSMVM",
+  3621: " 47I[KOLOMPMXKY RLNNONYPZ RKOMMOOOXQYRY RKYLYNZO[PZRYUX RUMVNXOYOWPWXXYYY RTNVOVYWZ RUMSOUPUYW[YY",
+  3622: " 36I[LMMOMXP[RYUXWX RMNNONXQZ RLMNNOOOWPXRY RUMVNXOYOWPWX RTNVOVW RUMSOUPUX",
+  3623: " 57E_HMIOIXL[NYQX RINJOJXMZ RHMJNKOKWLXNY RQMOOQPQXT[VYYX[X RPNRORXUZ RQMRNTOSPSWTXVY RYMZN\\O]O[P[X RXNZOZW RYMWOYPYX",
+  3624: " 59H[KOLONPOQSYTZV[XY RMNOOTYVZ RKOMMONPOTWUXWYXY RRSUMVNXNYM RUNVOWO RTOVPXOYM RQUN[MZKZJ[ RNZMYLY ROYMXKYJ[ RMTPT RSTVT",
+  3625: " 60I[KOLOMPMXKY RLNNONYPZ RKOMMOOOXQYRY RKYLYNZO[PZRYUX RUMVNXOYOWPW\\V_TaRbQaO`M` RTNVOV\\ RSaQ`P` RUMSOUPUZV]V_ RTaS`Q_O_M`",
+  3626: " 38I[XML[ RLONPQPTOXM RMNOOSO RLONMPNTNXM RL[PYSXVXXY RQYUYWZ RL[PZTZV[XY RNTVT",
+  3700: " 42H\\LHLXJY RMIMXPZ RNHNXPYQZ RLHNHSGUF RSGTHVIVY RTGWIWX RUFVGXHZHXIXY RJYLYNZO[QZVYXY",
+  3701: " 27H\\OHPIQKQXOY RQIPHQGRIRYTZ ROHRFSHSXUYVY ROYPYRZS[TZVY",
+  3702: " 48H\\LHNHPGQFSGVHXH RPHRG RLHNIPIRHSG RVHVP RWIWO RXHXPQPNQLSKVK[ RK[OYSXVXZY RNZQYVYYZ RK[PZUZX[ZY",
+  3703: " 57H\\LHMHOGPFRGVHXH ROHQG RLHNIPIRG RVHVO RWIWN RXHXOVOSPQQ RQPSQVRXRXY RWSWX RVRVY RKYMXOXQYRZ ROYQZ RKYMYOZP[RZVYXY",
+  3704: " 41H\\UFKPKUTU RVUZU[V[TZU RLPLT RMNMU RTGTXRY RUJVHUGUYWZ RUFWHVJVXXYYY RRYSYUZV[WZYY",
+  3705: " 53H\\LFLO RLFXF RMGVG RLHUHWGXF RVLUMSNOOLO RSNTNVOVY RUMWNWX RVLWMYNZNXOXY RKYMXOXQYRZ ROYQZ RKYMYOZP[RZVYXY",
+  3706: " 59H\\LHLXJY RMIMXPZ RNHNXPYQZ RLHNHRGTFUGWHXH RSGUH RRGTIVIXH RNPOPSOUNVM RSOTOVPVY RUNWPWX RVMWNYOZOXPXY RJYLYNZO[QZVYXY",
+  3707: " 38H\\KHMFPGUGZF RLGOHTHWG RKHOIRIVHZF RZFYHWKSOQRPUPXQ[ RRQQTQWRZ RUMSPRSRVSYQ[",
+  3708: " 71H\\LILO RMJMN RNINO RLINISHUGVF RSHTHVIVO RUGWHWN RVFWGYHZHXIXO RLONOVRXR RXOVONRLR RLRLXJY RMSMXPZ RNRNXPYQZ RVRVY RWSWX RXRXY RJYLYNZO[QZVYXY",
+  3709: " 60H\\LHLQJR RMIMROS RNHNQPRQR RLHNHSGUF RSGTHVIVY RTGWIWX RUFVGXHZHXIXY RJRKRMSNTOSQRUQVQ RKYMXOXQYRZ ROYQZ RKYMYOZP[RZVYXY",
+  3710: " 11LXRXPZR[TZRX RRYQZSZRY",
+  3711: " 14LXR^R\\PZRXSZS\\R^P_ RRYQZR[RY",
+  3712: " 22LXRMPORPTORM RRNQOSORN RRXPZR[TZRX RRYQZSZRY",
+  3713: " 25LXRMPORPTORM RRNQOSORN RR^R\\PZRXSZS\\R^P_ RRYQZR[RY",
+  3714: " 30LXRFQGOHQIRT RRISHRGQHRIRT RRFSGUHSIRT RRXPZR[TZRX RRYQZSZRY",
+  3715: " 51I[LJMHNGQFSFVGWHXJXLWNUPSQ RMJNH RVHWIWMVN RLJNKNIOGQF RSFUGVIVMUOSQ RRQRTSQQQRT RRXPZR[TZRX RRYQZSZRY",
+  3716: " 14LXTFRGQIQKRMTKRIRG RRJRLSKRJ",
+  3717: " 14LXRLRJPHRFSHSJRLPM RRGQHRIRG",
+  3718: " 62E_YNZO[O\\N RXOYP[P RXPYQZQ[P\\N RYNST RRUL[HVNP ROOSKOFJLPRTXVZX[Z[[Z\\X RLZIV RRKOG RKLPQTWVYXZ[Z RMZIU RRLNG RKKQQUWVXXY[Y\\X",
+  3719: " 60H\\PBP_ RTBT_ RTFVGWIWKYJXHWGTFPFMGKIKLLNOPURWSXUXXWZ RXJWH RLLMNOOUQWRXT RMYLW RMGLILKMMONUPXRYTYWXYWZT[P[MZLYKWMVMXNZP[",
+  3720: "  8G^[BIbJb R[B\\BJb",
+  3721: " 27KYUBSDQGOKNPNTOYQ]S`Ub RQHPKOOOUPYQ\\ RSDRFQIPOPUQ[R^S`",
+  3722: " 27KYOBQDSGUKVPVTUYS]Q`Ob RSHTKUOUUTYS\\ RQDRFSITOTUS[R^Q`",
+  3723: " 39JZRFQGSQRR RRFRR RRFSGQQRR RMINIVOWO RMIWO RMIMJWNWO RWIVINOMO RWIMO RWIWJMNMO",
+  3724: "  8F_JQ[Q[R RJQJR[R",
+  3725: " 16F_RIRZSZ RRISISZ RJQ[Q[R RJQJR[R",
+  3726: " 16F_JM[M[N RJMJN[N RJU[U[V RJUJV[V",
+  3727: " 11NWSFRGRM RSGRM RSFTGRM",
+  3728: " 22I[NFMGMM RNGMM RNFOGMM RWFVGVM RWGVM RWFXGVM",
+  3729: " 30KYQFOGNINKOMQNSNUMVKVIUGSFQF RQFNIOMSNVKUGQF RSFOGNKQNUMVISF",
+  3801: " 52E_NHLIJKIMHPHSIUKV RJLIOISJU RNHLJKLJOJRKVKXJZH[ RVHXHXYVY RYHYY RZGZZ RHFKGQHVHZG\\F RJPXP RH[KZQYVYZZ\\[",
+  3802: " 65E_LGLZ RMGMZ RPFNGNZP[ RHJJHLGPFUFXGZIZKYM RXHYIYKXM RUFWGXIXKWL RQUOTNRNPONPMSLVLYM[O\\Q\\T[WYYWZT[P[LZJYHW RZO[Q[UZW RVLYNZQZUYXWZ",
+  3803: " 60E_\\F[HZJXHVGSFQFNGLHJJILHOHRIUJWLYNZQ[S[VZXYZW[Y\\[ R[HZMZT[Y RZKYJ RZNYKXIVG RJKINISJV RNGLIKKJNJSKVLXNZ RYWZV RVZXXYVZS",
+  3804: " 46E_KGKZ RLGLZ RNFMGMZN[ RHKIIKGNFSFVGXHZJ[L\\O\\R[UZWXYVZS[N[KZIXHV RZK[N[SZV RVGXIYKZNZSYVXXVZ",
+  3805: " 86E_\\F[HZJXHVGSFQFNGLHJJILHOHRIUJWLYNZQ[S[VZXYZW[Y\\[ R[HZMZT[Y RZKYJ RZMXIVG RJKINISJV RNGLIKKJNJSKVLXNZ RYWZV RVZXXYVZS RJPKONOUQXQZP RPPRQURWRYQ RMORRUSWSYRZP RZMYLXLWMXNYM",
+  3806: " 69E_JHJZ RMGKHKY ROFMGLILYNY RHJJHLGOFSFVGXHYI\\F R\\F[HZLZO[S\\U RZIYK RVGXIYLZO RLPMOOOTPWPYO RQPTQVQXP RNOTRVRXQYOYLXKWKVLWMXL RH[JZNYSYYZ\\[",
+  3807: " 90E_\\F[HZJXHVGSFQFNGLHJJILHOHRIUJWLYNZQ[T[VZXYYXZV[Y\\[ R[HZMZT[Y RZKYJ RZNYKXIVG RJKINISJV RNGLIKKJNJSKVLXNZ RXXYVYR RVZWYXVXQ RKSLRMSLTKTJS RJPKNMMOMRNUPWQ RKOMNONROTP RJPLOOOUQYQZP",
+  3808: " 50E_JGJZH[ RKHKZ RNHLHLZ RHFJGNHSHYG\\F RLPMNOLRKVKYL[N\\Q\\T[UYV RZN[P[SZU RVKXLYMZOZSYVYXZZ\\[ RH[LZPZU[",
+  3809: " 23E_QIQY RRJRX RSISY RHFLHPITIXH\\F RH[KZOYUYYZ\\[",
+  3810: " 42E_TIVIVXUZS[ RWIWXVY RXHXY RHFLHPITIXH\\F RIOHQHUIXKZN[S[VZXYZW\\T RIUJXKY RHSJUKXLZN[",
+  3811: " 70E_JGJZH[ RKHKZ RNHLHLZ RHFJGNHSHYG\\F RLPMNOLRKUKXLYMYOXPSRQSPTPUQVRUQT RWLXMXOWP RUKWMWOVPSR RSRVRYSZUZWYX RWSYUYW RSRVSXUYXZZ[[\\[ RH[LZPZU[",
+  3812: " 45E_JGJZ RKHKY RNHLHLYNY R\\KZNYPXSXUYW[X RZOYRYUZW R\\K[MZQZT[X\\[ RHFJGNHSHYG\\F RH[JZNYSYYZ\\[",
+  3813: " 68E_QIQY RRJRX RSISY RNYLWJVIUHRHMIJKHMGPFTFWGYH[J\\M\\R[UZVXWVY RJUIRIMJJ RLWKUJRJLKIMG RZJ[M[RZU RWGYIZLZRYUXW RHFLHPITIXH\\F RH[KZOYUYYZ\\[",
+  3814: " 48E_JHJZH[ RLHKIKZ ROFMGLILZ RHJJHLGOFSFVGXHZJ[L\\O\\S[UYV RZK[N[RZU RVGXIYKZNZRYVYXZZ[[\\[ RH[LZPZU[",
+  3815: " 54E_QFNGLHJJILHOHRIUJWLYNZQ[S[VZXYZW[U\\R\\O[LZJXHVGSFQF RJKINISJV RNGLIKKJNJSKVLXNZ RZV[S[NZK RVZXXYVZSZNYKXIVG",
+  3816: " 51E_JIJZ RMHKJKY RQFOGMILKLYNY RHKJINGQFTFWGYH[J\\M\\O[RYTVURUOTMRLO RZJ[L[PZR RWGYIZLZPYSVU RH[JZNYSYYZ\\[",
+  3817: " 74E_QFNGLHJJILHOHRIUJWLYNZQ[S[VZXYZW[U\\R\\O[LZJXHVGSFQF RJKINISJV RNGLIKKJNJSKVLXNZ RZV[S[NZK RVZXXYVZSZNYKXIVG RJSKUNVTW[W\\X\\Z[[[Z\\Y RPWRW RKUNWQXSXTW",
+  3818: " 69E_JIJZH[ RKIKZ RLHLZ RHKJILHNGQFUFYG[I\\K\\N[PZQ RYHZI[K[NZP RUFWGYIZKZOYQ RXRUSRSPRPPROUOXPZR\\U\\W[XZX RXQYR[V[WZT RTOVPXRYTZX[Z\\[ RH[LZPZU[",
+  3819: " 94E_TFZG\\F[H[JYHWGTFPFMGJJIMIOJRLTOURUTTUSVQVP R[GZH[J RJPKRLSOTRTTS RKIJKJNKPMRPSRSTRVPWOXO RLQMQNPPNRMUMWNYPZRZUYXWZ RPMRLULXMZO[R[UZW RIWJYIZ RNPNOOMPLRKUKXL[O\\R\\T[WYYWZT[P[MZKYIWIYH[JZP[",
+  3820: " 66E_QHMHKIJJILHOHSIVJXKYMZP[S[VZXYZW[U\\R\\N[KYIWH RUHTITKULVKUJ RISJVLXNYQZTZWY RJJINIQJTLWNXQYTYWXYW[T\\R RHFKI RKHLG RIGJGKFMGQHWHZG\\F",
+  3821: " 51E_LHJJILHOHRIUJWLYNZQ[U[XZZY RKJJLIOISJV RKILJLKKMJPJSKVLXNZ RVHXHXXWZU[ RYHYXXY RZGZY\\[ RHFKGQHVHZG\\F",
+  3822: " 31E_HFR[ RIGJHQWRY RJGKHRWSX R\\FR[ RWNUS RYLUQTTTV RHFJGOHUHZG\\F",
+  3823: " 67E_LHJJILHOHRIUJWLYNZQ[S[VZXYZW[U\\R\\O[LZJXH RJLIOIRJUKW RJJKKKLJOJRKVLXNZ RYWZU[R[OZL RVZXXYVZRZOYLYKZJ RQIQ[ RRJRZ RSIS[ RHFLHPITIXH\\F",
+  3824: " 41E_HFXYYZ RIGKHZZ RLH\\[ R\\FSP RQRJZ RPSMULW RQRMTLUKWKY RHFLHPITIXH\\F RH[JZNYSYYZ\\[",
+  3825: " 47E_XHXZ RYHYY RZGZY RKHIJHMHPISKUMVPWSWVVXU RLUOVUV RHPIRKTNUTUVV RHFLHPITIXH\\F RHWJYLZP[T[XZ\\X",
+  3826: " 73E_HFIGKHNHSFVFYGZIZKYM RXGYIYKXM RVFWGXIXL RXNTOROPNPLRKTKXL RTKVLWMVNTO RYM[O\\R\\T[WYYWZT[P[MZKYIWHTHRIOJNLMNMPNPPOQNPOO RXMZO[Q[UZW RXNYOZQZUYXWZ",
+  3901: " 42J[PQMTMXP[TY RNTNXPZ ROROWRZ RRSMNNMONNO RONSNUMWOWXXY RUNVOVXUYVZWYVX RSNUPUXTYV[XY",
+  3902: " 31IZNHLFMJMXP[UYWX RNHNXPZ RNHPFOJOWRZ ROOTMWPWX RTNVPVX RRNUQUY",
+  3903: " 23KWNPNYP[RY ROPOYPZ RPOPXQYRY RNPTMVOTPRN RSNUO",
+  3904: " 32JZRMMPMXP[RZUYWY RNPNXPZ ROOOWRZ RPIPFQIWPWY RPIVPVX RPIMIPJUPUY",
+  3905: " 25KXNPNYP[RY ROPOYPZ RPOPXQYRY RNPTMWQPU RSNVQ RRNUR",
+  3906: " 32KWOIOXNYP[ RPIPXOYPZQYPX RQHQXRYP[ ROIUFWHUISG RTGVH RLMOM RQMUM",
+  3907: " 41J[MPMXP[UY RNPNXPZ ROOOWRZ RMPOOTMWPW]V_U`SaQaO`MaObQa RTNVPV]U_ RPaNa RRNUQU^T`Sa",
+  3908: " 42I[NHLFMJMXLYN[ RNHNXMYNZOYNX RNHPFOJOXPYN[ ROORNTMWPWYT]T`UbVbT` RTNVPVYU[ RRNUQUZT]",
+  3909: " 37MWRFPHRJTHRF RRGQHRISHRG RRMPOQPQXPYR[ RRPSORNQORPRXQYRZSYRX RRMTOSPSXTYR[",
+  3910: " 37MWRFPHRJTHRF RRGQHRISHRG RRMPOQPQYT] RRPSORNQORPRYS[ RRMTOSPSZT]T`RbPaPbRb",
+  3911: " 51IZNHLFMJMXLYN[ RNHNXMYNZOYNX RNHPFOJOXPYN[ ROPRNTMVPSROU RSNUP RRNTQ RRSSTTYV[XY RSSTUUYVZ RSRTSVXWYXY",
+  3912: " 21MWRHPFQJQXPYR[ RRHRXQYRZSYRX RRHTFSJSXTYR[",
+  3913: " 66E_GOHOIPIXHYJ[ RINJOJXIYJZKYJX RGOIMKOKXLYJ[ RKONNPMSOSXTYR[ RPNRORXQYRZSYRX RNNQPQXPYR[ RSOVNXM[O[X\\YZ[ RXNZOZXYYZZ[YZX RVNYPYXXYZ[",
+  3914: " 44I[KOLOMPMXLYN[ RMNNONXMYNZOYNX RKOMMOOOXPYN[ ROORNTMWOWXXYV[ RTNVOVXUYVZWYVX RRNUPUXTYV[",
+  3915: " 28JZMPMXP[UYWX RNPNXPZ ROOOWRZ RMPOOTMWPWX RTNVPVX RRNUQUY",
+  3916: " 47IZLMMOMXKYMYM_LbN` RNON` RLMNNOOOXQYRZ RNYOYQZ ROZP[UYWX ROZO_PbN` ROORNTMWPWX RTNVPVX RRNUQUY",
+  3917: " 31J[MPMXP[UY RNPNXPZ ROOOWRZ RMPOOTMWPW_XbV` RTNVPV` RRNUQU_TbV`",
+  3918: " 31KXMONOOPOXNYP[ RONPOPXOYPZQYPX RMOOMQOQXRYP[ RQOUMWOUPSN RTNVO",
+  3919: " 41JZMPMSOUURWTWX RNPNSOT ROOOSPT RUSVTVX RTSUTUY RMPSMVNTOQN RRNUN RWXQ[MYOXSZ ROYQZ",
+  3920: " 27MWRHPFQJQXPYR[ RRHRXQYRZSYRX RRHTFSJSXTYR[ RNMQM RSMVM",
+  3921: " 40I[KOLOMPMYP[UY RMNNONYPZ RKOMMOOOXRZ RVMXOWPWXXYYY RVPWOVNUOVPVYWZ RVMTOUPUYW[YY",
+  3922: " 36I[LMMOMXQ[SYWW RMNNONXQZ RLMNNOOOWRYSY RVMXOWPWW RVPWOVNUOVPVW RVMTOUPUX",
+  3923: " 59E_HMIOIXM[OYQX RINJOJXMZ RHMJNKOKWNYOY RRMPOQPQXU[WY[W RRPSORNQORPRXUZ RRMTOSPSWVYWY RZM\\O[P[W RZP[OZNYOZPZW RZMXOYPYX",
+  3924: " 39I[LONPUZV[XY RMNOOUYWZ RLONMONVXXY RXMVMVOXOXMVOSS RQUNYL[N[NYLYL[ RNTQT RSTVT",
+  3925: " 49I[KOLOMPMYP[UY RMNNONYPZ RKOMMOOOXRZ RVMXOWPW]V_U`SaQaO`MaObQa RVPWOVNUOVPV^U_ RPaNa RVMTOUPU^T`Sa",
+  3926: " 43L[RNOPOORNTMWOWSRU RTNVOVS RRNUPUSTT RRUWWW]V_U`SaQaO`MaObQa RVWV^U_ RPaNa RTVUWU^T`Sa"
+};
+const SYMB = {
+  "\\frac": { glyph: 0, arity: 2, flags: {} },
+  "\\binom": { glyph: 0, arity: 2, flags: {} },
+  "\\sqrt": {
+    glyph: 2267,
+    arity: 1,
+    flags: { opt: true, xfl: true, yfl: true }
+  },
+  "^": { glyph: 0, arity: 1, flags: {} },
+  _: { glyph: 0, arity: 1, flags: {} },
+  "(": { glyph: 2221, arity: 0, flags: { yfl: true } },
+  ")": { glyph: 2222, arity: 0, flags: { yfl: true } },
+  "[": { glyph: 2223, arity: 0, flags: { yfl: true } },
+  "]": { glyph: 2224, arity: 0, flags: { yfl: true } },
+  "\\langle": { glyph: 2227, arity: 0, flags: { yfl: true } },
+  "\\rangle": { glyph: 2228, arity: 0, flags: { yfl: true } },
+  "|": { glyph: 2229, arity: 0, flags: { yfl: true } },
+  "\\|": { glyph: 2230, arity: 0, flags: { yfl: true } },
+  "\\{": { glyph: 2225, arity: 0, flags: { yfl: true } },
+  "\\}": { glyph: 2226, arity: 0, flags: { yfl: true } },
+  "\\#": { glyph: 2275, arity: 0, flags: {} },
+  "\\$": { glyph: 2274, arity: 0, flags: {} },
+  "\\&": { glyph: 2273, arity: 0, flags: {} },
+  "\\%": { glyph: 2271, arity: 0, flags: {} },
+  "\\begin": { glyph: 0, arity: 1, flags: {} },
+  "\\end": { glyph: 0, arity: 1, flags: {} },
+  "\\left": { glyph: 0, arity: 1, flags: {} },
+  "\\right": { glyph: 0, arity: 1, flags: {} },
+  "\\middle": { glyph: 0, arity: 1, flags: {} },
+  "\\cdot": { glyph: 2236, arity: 0, flags: {} },
+  "\\pm": { glyph: 2233, arity: 0, flags: {} },
+  "\\mp": { glyph: 2234, arity: 0, flags: {} },
+  "\\times": { glyph: 2235, arity: 0, flags: {} },
+  "\\div": { glyph: 2237, arity: 0, flags: {} },
+  "\\leqq": { glyph: 2243, arity: 0, flags: {} },
+  "\\geqq": { glyph: 2244, arity: 0, flags: {} },
+  "\\leq": { glyph: 2243, arity: 0, flags: {} },
+  "\\geq": { glyph: 2244, arity: 0, flags: {} },
+  "\\propto": { glyph: 2245, arity: 0, flags: {} },
+  "\\sim": { glyph: 2246, arity: 0, flags: {} },
+  "\\equiv": { glyph: 2240, arity: 0, flags: {} },
+  "\\dagger": { glyph: 2277, arity: 0, flags: {} },
+  "\\ddagger": { glyph: 2278, arity: 0, flags: {} },
+  "\\ell": { glyph: 662, arity: 0, flags: {} },
+  "\\vec": {
+    glyph: 2261,
+    arity: 1,
+    flags: { hat: true, xfl: true, yfl: true }
+  },
+  "\\overrightarrow": {
+    glyph: 2261,
+    arity: 1,
+    flags: { hat: true, xfl: true, yfl: true }
+  },
+  "\\overleftarrow": {
+    glyph: 2263,
+    arity: 1,
+    flags: { hat: true, xfl: true, yfl: true }
+  },
+  "\\bar": { glyph: 2231, arity: 1, flags: { hat: true, xfl: true } },
+  "\\overline": { glyph: 2231, arity: 1, flags: { hat: true, xfl: true } },
+  "\\widehat": {
+    glyph: 2247,
+    arity: 1,
+    flags: { hat: true, xfl: true, yfl: true }
+  },
+  "\\hat": { glyph: 2247, arity: 1, flags: { hat: true } },
+  "\\acute": { glyph: 2248, arity: 1, flags: { hat: true } },
+  "\\grave": { glyph: 2249, arity: 1, flags: { hat: true } },
+  "\\breve": { glyph: 2250, arity: 1, flags: { hat: true } },
+  "\\tilde": { glyph: 2246, arity: 1, flags: { hat: true } },
+  "\\underline": { glyph: 2231, arity: 1, flags: { mat: true, xfl: true } },
+  "\\not": { glyph: 2220, arity: 1, flags: {} },
+  "\\neq": { glyph: 2239, arity: 1, flags: {} },
+  "\\ne": { glyph: 2239, arity: 1, flags: {} },
+  "\\exists": { glyph: 2279, arity: 0, flags: {} },
+  "\\in": { glyph: 2260, arity: 0, flags: {} },
+  "\\subset": { glyph: 2256, arity: 0, flags: {} },
+  "\\supset": { glyph: 2258, arity: 0, flags: {} },
+  "\\cup": { glyph: 2257, arity: 0, flags: {} },
+  "\\cap": { glyph: 2259, arity: 0, flags: {} },
+  "\\infty": { glyph: 2270, arity: 0, flags: {} },
+  "\\partial": { glyph: 2265, arity: 0, flags: {} },
+  "\\nabla": { glyph: 2266, arity: 0, flags: {} },
+  "\\aleph": { glyph: 2077, arity: 0, flags: {} },
+  "\\wp": { glyph: 2190, arity: 0, flags: {} },
+  "\\therefore": { glyph: 740, arity: 0, flags: {} },
+  "\\mid": { glyph: 2229, arity: 0, flags: {} },
+  "\\sum": { glyph: 2402, arity: 0, flags: { big: true } },
+  "\\prod": { glyph: 2401, arity: 0, flags: { big: true } },
+  "\\bigoplus": { glyph: 2284, arity: 0, flags: { big: true } },
+  "\\bigodot": { glyph: 2281, arity: 0, flags: { big: true } },
+  "\\int": { glyph: 2412, arity: 0, flags: { yfl: true } },
+  "\\oint": { glyph: 2269, arity: 0, flags: { yfl: true } },
+  "\\oplus": { glyph: 1284, arity: 0, flags: {} },
+  "\\odot": { glyph: 1281, arity: 0, flags: {} },
+  "\\perp": { glyph: 738, arity: 0, flags: {} },
+  "\\angle": { glyph: 739, arity: 0, flags: {} },
+  "\\triangle": { glyph: 842, arity: 0, flags: {} },
+  "\\Box": { glyph: 841, arity: 0, flags: {} },
+  "\\rightarrow": { glyph: 2261, arity: 0, flags: {} },
+  "\\to": { glyph: 2261, arity: 0, flags: {} },
+  "\\leftarrow": { glyph: 2263, arity: 0, flags: {} },
+  "\\gets": { glyph: 2263, arity: 0, flags: {} },
+  "\\circ": { glyph: 902, arity: 0, flags: {} },
+  "\\bigcirc": { glyph: 904, arity: 0, flags: {} },
+  "\\bullet": { glyph: 828, arity: 0, flags: {} },
+  "\\star": { glyph: 856, arity: 0, flags: {} },
+  "\\diamond": { glyph: 743, arity: 0, flags: {} },
+  "\\ast": { glyph: 728, arity: 0, flags: {} },
+  "\\log": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\ln": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\exp": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\mod": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\lim": { glyph: 0, arity: 0, flags: { txt: true, big: true } },
+  "\\sin": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\cos": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\tan": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\csc": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\sec": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\cot": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\sinh": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\cosh": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\tanh": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\csch": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\sech": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\coth": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arcsin": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arccos": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arctan": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arccsc": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arcsec": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\arccot": { glyph: 0, arity: 0, flags: { txt: true } },
+  "\\text": { glyph: 0, arity: 1, flags: {} },
+  "\\mathnormal": { glyph: 0, arity: 1, flags: {} },
+  "\\mathrm": { glyph: 0, arity: 1, flags: {} },
+  "\\mathit": { glyph: 0, arity: 1, flags: {} },
+  "\\mathbf": { glyph: 0, arity: 1, flags: {} },
+  "\\mathsf": { glyph: 0, arity: 1, flags: {} },
+  "\\mathtt": { glyph: 0, arity: 1, flags: {} },
+  "\\mathfrak": { glyph: 0, arity: 1, flags: {} },
+  "\\mathcal": { glyph: 0, arity: 1, flags: {} },
+  "\\mathbb": { glyph: 0, arity: 1, flags: {} },
+  "\\mathscr": { glyph: 0, arity: 1, flags: {} },
+  "\\rm": { glyph: 0, arity: 1, flags: {} },
+  "\\it": { glyph: 0, arity: 1, flags: {} },
+  "\\bf": { glyph: 0, arity: 1, flags: {} },
+  "\\sf": { glyph: 0, arity: 1, flags: {} },
+  "\\tt": { glyph: 0, arity: 1, flags: {} },
+  "\\frak": { glyph: 0, arity: 1, flags: {} },
+  "\\cal": { glyph: 0, arity: 1, flags: {} },
+  "\\bb": { glyph: 0, arity: 1, flags: {} },
+  "\\scr": { glyph: 0, arity: 1, flags: {} },
+  "\\quad": { glyph: 0, arity: 0, flags: {} },
+  "\\,": { glyph: 0, arity: 0, flags: {} },
+  "\\.": { glyph: 0, arity: 0, flags: {} },
+  "\\;": { glyph: 0, arity: 0, flags: {} },
+  "\\!": { glyph: 0, arity: 0, flags: {} },
+  "\\alpha": { glyph: 2127, flags: {} },
+  "\\beta": { glyph: 2128, flags: {} },
+  "\\gamma": { glyph: 2129, flags: {} },
+  "\\delta": { glyph: 2130, flags: {} },
+  "\\varepsilon": { glyph: 2131, flags: {} },
+  "\\zeta": { glyph: 2132, flags: {} },
+  "\\eta": { glyph: 2133, flags: {} },
+  "\\vartheta": { glyph: 2134, flags: {} },
+  "\\iota": { glyph: 2135, flags: {} },
+  "\\kappa": { glyph: 2136, flags: {} },
+  "\\lambda": { glyph: 2137, flags: {} },
+  "\\mu": { glyph: 2138, flags: {} },
+  "\\nu": { glyph: 2139, flags: {} },
+  "\\xi": { glyph: 2140, flags: {} },
+  "\\omicron": { glyph: 2141, flags: {} },
+  "\\pi": { glyph: 2142, flags: {} },
+  "\\rho": { glyph: 2143, flags: {} },
+  "\\sigma": { glyph: 2144, flags: {} },
+  "\\tau": { glyph: 2145, flags: {} },
+  "\\upsilon": { glyph: 2146, flags: {} },
+  "\\varphi": { glyph: 2147, flags: {} },
+  "\\chi": { glyph: 2148, flags: {} },
+  "\\psi": { glyph: 2149, flags: {} },
+  "\\omega": { glyph: 2150, flags: {} },
+  "\\epsilon": { glyph: 2184, flags: {} },
+  "\\theta": { glyph: 2185, flags: {} },
+  "\\phi": { glyph: 2186, flags: {} },
+  "\\varsigma": { glyph: 2187, flags: {} },
+  "\\Alpha": { glyph: 2027, flags: {} },
+  "\\Beta": { glyph: 2028, flags: {} },
+  "\\Gamma": { glyph: 2029, flags: {} },
+  "\\Delta": { glyph: 2030, flags: {} },
+  "\\Epsilon": { glyph: 2031, flags: {} },
+  "\\Zeta": { glyph: 2032, flags: {} },
+  "\\Eta": { glyph: 2033, flags: {} },
+  "\\Theta": { glyph: 2034, flags: {} },
+  "\\Iota": { glyph: 2035, flags: {} },
+  "\\Kappa": { glyph: 2036, flags: {} },
+  "\\Lambda": { glyph: 2037, flags: {} },
+  "\\Mu": { glyph: 2038, flags: {} },
+  "\\Nu": { glyph: 2039, flags: {} },
+  "\\Xi": { glyph: 2040, flags: {} },
+  "\\Omicron": { glyph: 2041, flags: {} },
+  "\\Pi": { glyph: 2042, flags: {} },
+  "\\Rho": { glyph: 2043, flags: {} },
+  "\\Sigma": { glyph: 2044, flags: {} },
+  "\\Tau": { glyph: 2045, flags: {} },
+  "\\Upsilon": { glyph: 2046, flags: {} },
+  "\\Phi": { glyph: 2047, flags: {} },
+  "\\Chi": { glyph: 2048, flags: {} },
+  "\\Psi": { glyph: 2049, flags: {} },
+  "\\Omega": { glyph: 2050, flags: {} }
+};
+function asciiMap(x, mode = "math") {
+  const c = x.charCodeAt(0);
+  if (65 <= c && c <= 90) {
+    const d = c - 65;
+    if (mode == "text" || mode == "rm") {
+      return d + 2001;
+    } else if (mode == "tt") {
+      return d + 501;
+    } else if (mode == "bf" || mode == "bb") {
+      return d + 3001;
+    } else if (mode == "sf") {
+      return d + 2501;
+    } else if (mode == "frak") {
+      return d + 3301;
+    } else if (mode == "scr" || mode == "cal") {
+      return d + 2551;
+    } else {
+      return d + 2051;
+    }
+  }
+  if (97 <= c && c <= 122) {
+    const d = c - 97;
+    if (mode == "text" || mode == "rm") {
+      return d + 2101;
+    } else if (mode == "tt") {
+      return d + 601;
+    } else if (mode == "bf" || mode == "bb") {
+      return d + 3101;
+    } else if (mode == "sf") {
+      return d + 2601;
+    } else if (mode == "frak") {
+      return d + 3401;
+    } else if (mode == "scr" || mode == "cal") {
+      return d + 2651;
+    } else {
+      return d + 2151;
+    }
+  }
+  if (48 <= c && c <= 57) {
+    const d = c - 48;
+    if (mode == "it") {
+      return d + 2750;
+    } else if (mode == "bf") {
+      return d + 3200;
+    } else if (mode == "tt") {
+      return d + 700;
+    } else {
+      return d + 2200;
+    }
+  }
+  return {
+    ".": 2210,
+    ",": 2211,
+    ":": 2212,
+    ";": 2213,
+    "!": 2214,
+    "?": 2215,
+    "'": 2216,
+    '"': 2217,
+    "*": 2219,
+    "/": 2220,
+    "-": 2231,
+    "+": 2232,
+    "=": 2238,
+    "<": 2241,
+    ">": 2242,
+    "~": 2246,
+    "@": 2273,
+    "\\": 804
+  }[x];
+}
+const CONFIG = {
+  SUB_SUP_SCALE: 0.5,
+  SQRT_MAG_SCALE: 0.5,
+  FRAC_SCALE: 0.85,
+  LINE_SPACING: 0.5,
+  FRAC_SPACING: 0.4
+};
+function tokenize(str) {
+  str = str.replace(/\n/g, " ");
+  let i = 0;
+  const tokens = [];
+  let curr = "";
+  while (i < str.length) {
+    if (str[i] == " ") {
+      if (curr.length) {
+        tokens.push(curr);
+        curr = "";
+      }
+    } else if (str[i] == "\\") {
+      if (curr.length == 1 && curr[0] == "\\") {
+        curr += str[i];
+        tokens.push(curr);
+        curr = "";
+      } else {
+        if (curr.length) {
+          tokens.push(curr);
+        }
+        curr = str[i];
+      }
+    } else if (/[A-Za-z0-9\.]/.test(str[i])) {
+      curr += str[i];
+    } else {
+      if (curr.length && curr != "\\") {
+        tokens.push(curr);
+        curr = "";
+      }
+      curr += str[i];
+      tokens.push(curr);
+      curr = "";
+    }
+    i++;
+  }
+  if (curr.length)
+    tokens.push(curr);
+  return tokens;
+}
+function parseAtom(x) {
+  return {
+    type: SYMB[x] ? "symb" : "char",
+    mode: "math",
+    text: x,
+    chld: [],
+    bbox: null
+  };
+}
+function parse(tokens) {
+  let i = 0;
+  let expr = {
+    type: "node",
+    text: "",
+    mode: "math",
+    chld: [],
+    bbox: null
+  };
+  function takeOpt() {
+    if (tokens[i] != "[") {
+      return null;
+    }
+    let lvl = 0;
+    let j = i;
+    while (j < tokens.length) {
+      if (tokens[j] == "[") {
+        lvl++;
+      } else if (tokens[j] == "]") {
+        lvl--;
+        if (!lvl) {
+          break;
+        }
+      }
+      j++;
+    }
+    const ret = parse(tokens.slice(i + 1, j));
+    i = j;
+    return ret;
+  }
+  function takeN(n) {
+    let j = i;
+    let j0 = j;
+    let lvl = 0;
+    let cnt = 0;
+    const ret = [];
+    while (j < tokens.length) {
+      if (tokens[j] == "{") {
+        if (!lvl) {
+          j0 = j;
+        }
+        lvl++;
+      } else if (tokens[j] == "}") {
+        lvl--;
+        if (!lvl) {
+          ret.push(parse(tokens.slice(j0 + 1, j)));
+          cnt++;
+          if (cnt == n) {
+            break;
+          }
+        }
+      } else {
+        if (lvl == 0) {
+          ret.push(parseAtom(tokens[j]));
+          cnt++;
+          if (cnt == n) {
+            break;
+          }
+        }
+      }
+      j++;
+    }
+    i = j;
+    return ret;
+  }
+  for (i = 0; i < tokens.length; i++) {
+    const s = SYMB[tokens[i]];
+    const e = {
+      type: "",
+      text: tokens[i],
+      mode: "math",
+      chld: [],
+      bbox: null
+    };
+    if (s) {
+      if (s.arity) {
+        i++;
+        e.type = "func";
+        let opt = null;
+        if (s.flags.opt) {
+          opt = takeOpt();
+          if (opt)
+            i++;
+        }
+        const chld = takeN(s.arity);
+        e.chld = chld;
+        if (opt) {
+          e.chld.push(opt);
+        }
+      } else {
+        e.type = "symb";
+      }
+    } else {
+      if (tokens[i] == "{") {
+        e.type = "node";
+        e.text = "";
+        e.chld = takeN(1);
+      } else {
+        e.type = "char";
+      }
+    }
+    expr.chld.push(e);
+  }
+  if (expr.chld.length == 1) {
+    expr = expr.chld[0];
+  }
+  return expr;
+}
+function environments(exprs) {
+  let i = 0;
+  while (i < exprs.length) {
+    if (exprs[i].text == "\\begin") {
+      let j;
+      for (j = i; j < exprs.length; j++) {
+        if (exprs[j].text == "\\end") {
+          break;
+        }
+      }
+      const es = exprs.splice(i + 1, j - (i + 1));
+      environments(es);
+      exprs[i].text = exprs[i].chld[0].text;
+      exprs[i].chld = es;
+      exprs.splice(i + 1, 1);
+    }
+    i++;
+  }
+}
+function transform(expr, sclx, scly, x, y, notFirst) {
+  if (scly == null) {
+    scly = sclx;
+  }
+  if (!expr.bbox)
+    return;
+  if (notFirst) {
+    expr.bbox.x *= sclx;
+    expr.bbox.y *= scly;
+  }
+  expr.bbox.w *= sclx;
+  expr.bbox.h *= scly;
+  for (let i = 0; i < expr.chld.length; i++) {
+    transform(expr.chld[i], sclx, scly, 0, 0, true);
+  }
+  expr.bbox.x += x;
+  expr.bbox.y += y;
+}
+function computeBbox(exprs) {
+  let xmin = Infinity;
+  let xmax = -Infinity;
+  let ymin = Infinity;
+  let ymax = -Infinity;
+  for (let i = 0; i < exprs.length; i++) {
+    if (!exprs[i].bbox) {
+      continue;
+    }
+    xmin = Math.min(xmin, exprs[i].bbox.x);
+    ymin = Math.min(ymin, exprs[i].bbox.y);
+    xmax = Math.max(xmax, exprs[i].bbox.x + exprs[i].bbox.w);
+    ymax = Math.max(ymax, exprs[i].bbox.y + exprs[i].bbox.h);
+  }
+  return { x: xmin, y: ymin, w: xmax - xmin, h: ymax - ymin };
+}
+function group(exprs) {
+  if (!exprs.length) {
+    return null;
+  }
+  const bbox = computeBbox(exprs);
+  for (let i = 0; i < exprs.length; i++) {
+    if (!exprs[i].bbox) {
+      continue;
+    }
+    exprs[i].bbox.x -= bbox.x;
+    exprs[i].bbox.y -= bbox.y;
+  }
+  const expr = {
+    type: "node",
+    text: "",
+    mode: "math",
+    chld: exprs,
+    bbox
+  };
+  return expr;
+}
+function align(exprs, alignment = "center") {
+  for (let i = 0; i < exprs.length; i++) {
+    if (exprs[i].text == "^" || exprs[i].text == "'") {
+      let h = 0;
+      let j = i;
+      while (j > 0 && (exprs[j].text == "^" || exprs[j].text == "_" || exprs[j].text == "'")) {
+        j--;
+      }
+      h = exprs[j].bbox.y;
+      if (exprs[i].text == "'") {
+        exprs[i].bbox.y = h;
+      } else {
+        transform(exprs[i], CONFIG.SUB_SUP_SCALE, null, 0, 0);
+        if (SYMB[exprs[j].text] && SYMB[exprs[j].text].flags.big) {
+          exprs[i].bbox.y = h - exprs[i].bbox.h;
+        } else if (exprs[j].text == "\\int") {
+          exprs[i].bbox.y = h;
+        } else {
+          exprs[i].bbox.y = h - exprs[i].bbox.h / 2;
+        }
+      }
+    } else if (exprs[i].text == "_") {
+      let h = 1;
+      let j = i;
+      while (j > 0 && (exprs[j].text == "^" || exprs[j].text == "_" || exprs[j].text == "'")) {
+        j--;
+      }
+      h = exprs[j].bbox.y + exprs[j].bbox.h;
+      transform(exprs[i], CONFIG.SUB_SUP_SCALE, null, 0, 0);
+      if (SYMB[exprs[j].text] && SYMB[exprs[j].text].flags.big) {
+        exprs[i].bbox.y = h;
+      } else if (exprs[j].text == "\\int") {
+        exprs[i].bbox.y = h - exprs[i].bbox.h;
+      } else {
+        exprs[i].bbox.y = h - exprs[i].bbox.h / 2;
+      }
+    }
+  }
+  function searchHigh(i, l, r, dir, lvl0) {
+    let j = i;
+    let lvl = lvl0;
+    let ymin = Infinity;
+    let ymax = -Infinity;
+    while (dir > 0 ? j < exprs.length : j >= 0) {
+      if (exprs[j].text == l) {
+        lvl++;
+      } else if (exprs[j].text == r) {
+        lvl--;
+        if (lvl == 0) {
+          break;
+        }
+      } else if (exprs[j].text == "^" || exprs[j].text == "_")
+        ;
+      else if (exprs[j].bbox) {
+        ymin = Math.min(ymin, exprs[j].bbox.y);
+        ymax = Math.max(ymax, exprs[j].bbox.y + exprs[j].bbox.h);
+      }
+      j += dir;
+    }
+    return [ymin, ymax];
+  }
+  for (let i = 0; i < exprs.length; i++) {
+    if (exprs[i].text == "\\left") {
+      const [ymin, ymax] = searchHigh(i, "\\left", "\\right", 1, 0);
+      if (ymin != Infinity && ymax != -Infinity) {
+        exprs[i].bbox.y = ymin;
+        transform(exprs[i], 1, (ymax - ymin) / exprs[i].bbox.h, 0, 0);
+      }
+    } else if (exprs[i].text == "\\right") {
+      const [ymin, ymax] = searchHigh(i, "\\right", "\\left", -1, 0);
+      if (ymin != Infinity && ymax != -Infinity) {
+        exprs[i].bbox.y = ymin;
+        transform(exprs[i], 1, (ymax - ymin) / exprs[i].bbox.h, 0, 0);
+      }
+    } else if (exprs[i].text == "\\middle") {
+      const [lmin, lmax] = searchHigh(i, "\\right", "\\left", -1, 1);
+      const [rmin, rmax] = searchHigh(i, "\\left", "\\right", 1, 1);
+      const ymin = Math.min(lmin, rmin);
+      const ymax = Math.max(lmax, rmax);
+      if (ymin != Infinity && ymax != -Infinity) {
+        exprs[i].bbox.y = ymin;
+        transform(exprs[i], 1, (ymax - ymin) / exprs[i].bbox.h, 0, 0);
+      }
+    }
+  }
+  if (!exprs.some((x) => x.text == "&" || x.text == "\\\\")) {
+    return;
+  }
+  const rows = [];
+  let row = [];
+  let cell = [];
+  for (let i = 0; i < exprs.length; i++) {
+    if (exprs[i].text == "&") {
+      row.push(cell);
+      cell = [];
+    } else if (exprs[i].text == "\\\\") {
+      if (cell.length) {
+        row.push(cell);
+        cell = [];
+      }
+      rows.push(row);
+      row = [];
+    } else {
+      cell.push(exprs[i]);
+    }
+  }
+  if (cell.length) {
+    row.push(cell);
+  }
+  if (row.length) {
+    rows.push(row);
+  }
+  const colws = [];
+  const erows = [];
+  for (let i = 0; i < rows.length; i++) {
+    const erow = [];
+    for (let j = 0; j < rows[i].length; j++) {
+      const e = group(rows[i][j]);
+      if (e) {
+        colws[j] = colws[j] || 0;
+        colws[j] = Math.max(e.bbox.w + 1, colws[j]);
+      }
+      erow[j] = e;
+    }
+    erows.push(erow);
+  }
+  const ybds = [];
+  for (let i = 0; i < erows.length; i++) {
+    let ymin = Infinity;
+    let ymax = -Infinity;
+    for (let j = 0; j < erows[i].length; j++) {
+      if (!erows[i][j]) {
+        continue;
+      }
+      ymin = Math.min(ymin, erows[i][j].bbox.y);
+      ymax = Math.max(ymax, erows[i][j].bbox.y + erows[i][j].bbox.h);
+    }
+    ybds.push([ymin, ymax]);
+  }
+  for (let i = 0; i < ybds.length; i++) {
+    if (ybds[i][0] == Infinity || ybds[i][1] == Infinity) {
+      ybds[i][0] = i == 0 ? 0 : ybds[i - 1][1];
+      ybds[i][1] = ybds[i][0] + 2;
+    }
+  }
+  for (let i = 1; i < erows.length; i++) {
+    const shft = ybds[i - 1][1] - ybds[i][0] + CONFIG.LINE_SPACING;
+    for (let j = 0; j < erows[i].length; j++) {
+      if (erows[i][j]) {
+        erows[i][j].bbox.y += shft;
+      }
+    }
+    ybds[i][0] += shft;
+    ybds[i][1] += shft;
+  }
+  exprs.splice(0, exprs.length);
+  for (let i = 0; i < erows.length; i++) {
+    let dx = 0;
+    for (let j = 0; j < erows[i].length; j++) {
+      const e = erows[i][j];
+      if (!e) {
+        dx += colws[j];
+        continue;
+      }
+      e.bbox.x += dx;
+      dx += colws[j] - e.bbox.w;
+      if (alignment == "center") {
+        e.bbox.x += (colws[j] - e.bbox.w) / 2;
+      } else if (alignment == "left")
+        ;
+      else if (alignment == "right") {
+        e.bbox.x += colws[j] - e.bbox.w;
+      } else if (alignment == "equation") {
+        if (j != erows[i].length - 1) {
+          e.bbox.x += colws[j] - e.bbox.w;
+        }
+      }
+      exprs.push(e);
+    }
+  }
+}
+function plan(expr, mode = "math") {
+  var _a, _b, _c;
+  const tmd = (_a = {
+    "\\text": "text",
+    "\\mathnormal": "math",
+    "\\mathrm": "rm",
+    "\\mathit": "it",
+    "\\mathbf": "bf",
+    "\\mathsf": "sf",
+    "\\mathtt": "tt",
+    "\\mathfrak": "frak",
+    "\\mathcal": "cal",
+    "\\mathbb": "bb",
+    "\\mathscr": "scr",
+    "\\rm": "rm",
+    "\\it": "it",
+    "\\bf": "bf",
+    "\\sf": "tt",
+    "\\tt": "tt",
+    "\\frak": "frak",
+    "\\cal": "cal",
+    "\\bb": "bb",
+    "\\scr": "scr"
+  }[expr.text]) != null ? _a : mode;
+  if (!expr.chld.length) {
+    if (SYMB[expr.text]) {
+      if (SYMB[expr.text].flags.big) {
+        if (expr.text == "\\lim") {
+          expr.bbox = { x: 0, y: 0, w: 3.5, h: 2 };
+        } else {
+          expr.bbox = { x: 0, y: -0.5, w: 3, h: 3 };
+        }
+      } else if (SYMB[expr.text].flags.txt) {
+        let w = 0;
+        for (let i = 1; i < expr.text.length; i++) {
+          w += HERSHEY(asciiMap(expr.text[i], "text")).w;
+        }
+        w /= 16;
+        expr.bbox = { x: 0, y: 0, w, h: 2 };
+      } else if (SYMB[expr.text].glyph) {
+        let w = HERSHEY(SYMB[expr.text].glyph).w;
+        w /= 16;
+        if (expr.text == "\\int" || expr.text == "\\oint") {
+          expr.bbox = { x: 0, y: -1.5, w, h: 5 };
+        } else {
+          expr.bbox = { x: 0, y: 0, w, h: 2 };
+        }
+      } else {
+        expr.bbox = { x: 0, y: 0, w: 1, h: 2 };
+      }
+    } else {
+      let w = 0;
+      for (let i = 0; i < expr.text.length; i++) {
+        if (!HERSHEY(asciiMap(expr.text[i], tmd))) {
+          continue;
+        }
+        if (tmd == "tt") {
+          w += 16;
+        } else {
+          w += HERSHEY(asciiMap(expr.text[i], tmd)).w;
+        }
+      }
+      w /= 16;
+      expr.bbox = { x: 0, y: 0, w, h: 2 };
+    }
+    expr.mode = tmd;
+    return;
+  }
+  if (expr.text == "\\frac") {
+    const a = expr.chld[0];
+    const b = expr.chld[1];
+    const s = CONFIG.FRAC_SCALE;
+    plan(a);
+    plan(b);
+    a.bbox.x = 0;
+    a.bbox.y = 0;
+    b.bbox.x = 0;
+    b.bbox.y = 0;
+    const mw = Math.max(a.bbox.w, b.bbox.w) * s;
+    transform(a, s, null, (mw - a.bbox.w * s) / 2, 0);
+    transform(
+      b,
+      s,
+      null,
+      (mw - b.bbox.w * s) / 2,
+      a.bbox.h + CONFIG.FRAC_SPACING
+    );
+    expr.bbox = {
+      x: 0,
+      y: -a.bbox.h + 1 - CONFIG.FRAC_SPACING / 2,
+      w: mw,
+      h: a.bbox.h + b.bbox.h + CONFIG.FRAC_SPACING
+    };
+  } else if (expr.text == "\\binom") {
+    const a = expr.chld[0];
+    const b = expr.chld[1];
+    plan(a);
+    plan(b);
+    a.bbox.x = 0;
+    a.bbox.y = 0;
+    b.bbox.x = 0;
+    b.bbox.y = 0;
+    const mw = Math.max(a.bbox.w, b.bbox.w);
+    transform(a, 1, null, (mw - a.bbox.w) / 2 + 1, 0);
+    transform(b, 1, null, (mw - b.bbox.w) / 2 + 1, a.bbox.h);
+    expr.bbox = { x: 0, y: -a.bbox.h + 1, w: mw + 2, h: a.bbox.h + b.bbox.h };
+  } else if (expr.text == "\\sqrt") {
+    const e = expr.chld[0];
+    plan(e);
+    const f = expr.chld[1];
+    let pl = 0;
+    if (f) {
+      plan(f);
+      pl = Math.max(f.bbox.w * CONFIG.SQRT_MAG_SCALE - 0.5, 0);
+      transform(f, CONFIG.SQRT_MAG_SCALE, null, 0, 0.5);
+    }
+    transform(e, 1, null, 1 + pl, 0.5);
+    expr.bbox = {
+      x: 0,
+      y: 2 - e.bbox.h - 0.5,
+      w: e.bbox.w + 1 + pl,
+      h: e.bbox.h + 0.5
+    };
+  } else if (SYMB[expr.text] && SYMB[expr.text].flags.hat) {
+    const e = expr.chld[0];
+    plan(e);
+    const y0 = e.bbox.y - 0.5;
+    e.bbox.y = 0.5;
+    expr.bbox = { x: 0, y: y0, w: e.bbox.w, h: e.bbox.h + 0.5 };
+  } else if (SYMB[expr.text] && SYMB[expr.text].flags.mat) {
+    const e = expr.chld[0];
+    plan(e);
+    expr.bbox = { x: 0, y: 0, w: e.bbox.w, h: e.bbox.h + 0.5 };
+  } else {
+    let dx = 0;
+    let dy = 0;
+    let mh = 1;
+    for (let i = 0; i < expr.chld.length; i++) {
+      const c = expr.chld[i];
+      const spac = (_b = {
+        "\\quad": 2,
+        "\\,": 2 * 3 / 18,
+        "\\:": 2 * 4 / 18,
+        "\\;": 2 * 5 / 18,
+        "\\!": 2 * -3 / 18
+      }[c.text]) != null ? _b : null;
+      if (c.text == "\\\\") {
+        dy += mh;
+        dx = 0;
+        mh = 1;
+        continue;
+      } else if (c.text == "&") {
+        continue;
+      } else if (spac != null) {
+        dx += spac;
+        continue;
+      } else {
+        plan(c, tmd);
+        transform(c, 1, null, dx, dy);
+        if (c.text == "^" || c.text == "_" || c.text == "'") {
+          let j = i;
+          while (j > 0 && (expr.chld[j].text == "^" || expr.chld[j].text == "_" || expr.chld[j].text == "'")) {
+            j--;
+          }
+          const wasBig = SYMB[expr.chld[j].text] && SYMB[expr.chld[j].text].flags.big;
+          if (c.text == "'") {
+            let k = j + 1;
+            let nth = 0;
+            while (k < i) {
+              if (expr.chld[k].text == "'") {
+                nth++;
+              }
+              k++;
+            }
+            c.bbox.x = expr.chld[j].bbox.x + expr.chld[j].bbox.w + c.bbox.w * nth;
+            dx = Math.max(dx, c.bbox.x + c.bbox.w);
+          } else {
+            if (wasBig) {
+              const ex = expr.chld[j].bbox.x + (expr.chld[j].bbox.w - c.bbox.w * CONFIG.SUB_SUP_SCALE) / 2;
+              c.bbox.x = ex;
+              dx = Math.max(dx, expr.chld[j].bbox.x + expr.chld[j].bbox.w + (c.bbox.w * CONFIG.SUB_SUP_SCALE - expr.chld[j].bbox.w) / 2);
+            } else {
+              c.bbox.x = expr.chld[j].bbox.x + expr.chld[j].bbox.w;
+              dx = Math.max(dx, c.bbox.x + c.bbox.w * CONFIG.SUB_SUP_SCALE);
+            }
+          }
+        } else {
+          dx += c.bbox.w;
+        }
+        if (mode == "text") {
+          dx += 1;
+        }
+        mh = Math.max(c.bbox.y + c.bbox.h - dy, mh);
+      }
+    }
+    dy += mh;
+    const m2s = {
+      bmatrix: ["[", "]"],
+      pmatrix: ["(", ")"],
+      Bmatrix: ["\\{", "\\}"],
+      cases: ["\\{"]
+    };
+    const alt = (_c = {
+      bmatrix: "center",
+      pmatrix: "center",
+      Bmatrix: "center",
+      cases: "left",
+      matrix: "center",
+      aligned: "equation"
+    }[expr.text]) != null ? _c : "left";
+    const hasLp = !!m2s[expr.text];
+    const hasRp = !!m2s[expr.text] && m2s[expr.text].length > 1;
+    align(expr.chld, alt);
+    const bb = computeBbox(expr.chld);
+    if (expr.text == "\\text") {
+      bb.x -= 1;
+      bb.w += 2;
+    }
+    for (let i = 0; i < expr.chld.length; i++) {
+      transform(expr.chld[i], 1, null, -bb.x + (hasLp ? 1.5 : 0), -bb.y);
+    }
+    expr.bbox = {
+      x: 0,
+      y: 0,
+      w: bb.w + 1.5 * Number(hasLp) + 1.5 * Number(hasRp),
+      h: bb.h
+    };
+    if (hasLp) {
+      expr.chld.unshift({
+        type: "symb",
+        text: m2s[expr.text][0],
+        mode: expr.mode,
+        chld: [],
+        bbox: { x: 0, y: 0, w: 1, h: bb.h }
+      });
+    }
+    if (hasRp) {
+      expr.chld.push({
+        type: "symb",
+        text: m2s[expr.text][1],
+        mode: expr.mode,
+        chld: [],
+        bbox: { x: bb.w + 2, y: 0, w: 1, h: bb.h }
+      });
+    }
+    if (hasLp || hasRp || expr.text == "matrix") {
+      expr.type = "node";
+      expr.text = "";
+      expr.bbox.y -= (expr.bbox.h - 2) / 2;
+    }
+  }
+}
+function flatten(expr) {
+  function flat(expr2, dx, dy) {
+    const ff = [];
+    if (expr2.bbox) {
+      dx += expr2.bbox.x;
+      dy += expr2.bbox.y;
+      if (expr2.text == "\\frac") {
+        const h = expr2.chld[1].bbox.y - (expr2.chld[0].bbox.y + expr2.chld[0].bbox.h);
+        const e = {
+          type: "symb",
+          mode: expr2.mode,
+          text: "\\bar",
+          bbox: {
+            x: dx,
+            y: dy + (expr2.chld[1].bbox.y - h / 2) - h / 2,
+            w: expr2.bbox.w,
+            h
+          },
+          chld: []
+        };
+        ff.push(e);
+      } else if (expr2.text == "\\sqrt") {
+        const h = expr2.chld[0].bbox.y;
+        const xx = Math.max(0, expr2.chld[0].bbox.x - expr2.chld[0].bbox.h / 2);
+        const e = {
+          type: "symb",
+          mode: expr2.mode,
+          text: "\\sqrt",
+          bbox: {
+            x: dx + xx,
+            y: dy + h / 2,
+            w: expr2.chld[0].bbox.x - xx,
+            h: expr2.bbox.h - h / 2
+          },
+          chld: []
+        };
+        ff.push(e);
+        ff.push({
+          type: "symb",
+          text: "\\bar",
+          mode: expr2.mode,
+          bbox: {
+            x: dx + expr2.chld[0].bbox.x,
+            y: dy,
+            w: expr2.bbox.w - expr2.chld[0].bbox.x,
+            h
+          },
+          chld: []
+        });
+      } else if (expr2.text == "\\binom") {
+        const w = Math.min(expr2.chld[0].bbox.x, expr2.chld[1].bbox.x);
+        const e = {
+          type: "symb",
+          mode: expr2.mode,
+          text: "(",
+          bbox: {
+            x: dx,
+            y: dy,
+            w,
+            h: expr2.bbox.h
+          },
+          chld: []
+        };
+        ff.push(e);
+        ff.push({
+          type: "symb",
+          text: ")",
+          mode: expr2.mode,
+          bbox: {
+            x: dx + expr2.bbox.w - w,
+            y: dy,
+            w,
+            h: expr2.bbox.h
+          },
+          chld: []
+        });
+      } else if (SYMB[expr2.text] && SYMB[expr2.text].flags.hat) {
+        const h = expr2.chld[0].bbox.y;
+        const e = {
+          type: "symb",
+          mode: expr2.mode,
+          text: expr2.text,
+          bbox: {
+            x: dx,
+            y: dy,
+            w: expr2.bbox.w,
+            h
+          },
+          chld: []
+        };
+        ff.push(e);
+      } else if (SYMB[expr2.text] && SYMB[expr2.text].flags.mat) {
+        const h = expr2.chld[0].bbox.h;
+        const e = {
+          type: "symb",
+          text: expr2.text,
+          mode: expr2.mode,
+          bbox: {
+            x: dx,
+            y: dy + h,
+            w: expr2.bbox.w,
+            h: expr2.bbox.h - h
+          },
+          chld: []
+        };
+        ff.push(e);
+      } else if (expr2.type != "node" && expr2.text != "^" && expr2.text != "_") {
+        const e = {
+          type: expr2.type == "func" ? "symb" : expr2.type,
+          text: expr2.text,
+          mode: expr2.mode,
+          bbox: {
+            x: dx,
+            y: dy,
+            w: expr2.bbox.w,
+            h: expr2.bbox.h
+          },
+          chld: []
+        };
+        ff.push(e);
+      }
+    }
+    for (let i = 0; i < expr2.chld.length; i++) {
+      const f2 = flat(expr2.chld[i], dx, dy);
+      ff.push(...f2);
+    }
+    return ff;
+  }
+  const f = flat(expr, -expr.bbox.x, -expr.bbox.y);
+  expr.type = "node";
+  expr.text = "";
+  expr.chld = f;
+}
+function render(expr) {
+  const o = [];
+  for (let i = 0; i < expr.chld.length; i++) {
+    const e = expr.chld[i];
+    let s = e.bbox.h / 2;
+    let isSmallHat = false;
+    if (SYMB[e.text] && SYMB[e.text].flags.hat && !SYMB[e.text].flags.xfl && !SYMB[e.text].flags.yfl) {
+      s *= 4;
+      isSmallHat = true;
+    }
+    if (SYMB[e.text] && SYMB[e.text].glyph) {
+      const d = HERSHEY(SYMB[e.text].glyph);
+      for (let j = 0; j < d.polylines.length; j++) {
+        const l = [];
+        for (let k = 0; k < d.polylines[j].length; k++) {
+          let x = d.polylines[j][k][0];
+          let y = d.polylines[j][k][1];
+          if (SYMB[e.text].flags.xfl) {
+            x = (x - d.xmin) / Math.max(d.xmax - d.xmin, 1) * e.bbox.w;
+            x += e.bbox.x;
+          } else if (d.w / 16 * s > e.bbox.w) {
+            x = x / Math.max(d.w, 1) * e.bbox.w;
+            x += e.bbox.x;
+          } else {
+            x = x / 16 * s;
+            const p = (e.bbox.w - d.w / 16 * s) / 2;
+            x += e.bbox.x + p;
+          }
+          if (SYMB[e.text].flags.yfl) {
+            y = (y - d.ymin) / Math.max(d.ymax - d.ymin, 1) * e.bbox.h;
+            y += e.bbox.y;
+          } else {
+            y = y / 16 * s;
+            if (isSmallHat) {
+              const p = (d.ymax + d.ymin) / 2;
+              y -= p / 16 * s;
+            }
+            y += e.bbox.y + e.bbox.h / 2;
+          }
+          l.push([x, y]);
+        }
+        o.push(l);
+      }
+    } else if (SYMB[e.text] && SYMB[e.text].flags.txt || e.type == "char") {
+      let x0 = e.bbox.x;
+      const isVerb = !!(SYMB[e.text] && SYMB[e.text].flags.txt);
+      for (let n = Number(isVerb); n < e.text.length; n++) {
+        const d = HERSHEY(asciiMap(e.text[n], isVerb ? "text" : e.mode));
+        if (!d) {
+          console.warn("unmapped character: " + e.text[n]);
+          continue;
+        }
+        for (let j = 0; j < d.polylines.length; j++) {
+          const l = [];
+          for (let k = 0; k < d.polylines[j].length; k++) {
+            let x = d.polylines[j][k][0];
+            let y = d.polylines[j][k][1];
+            x /= 16;
+            y /= 16;
+            x *= s;
+            y *= s;
+            if (e.mode == "tt") {
+              if (d.w > 16) {
+                x *= 16 / d.w;
+              } else {
+                x += (16 - d.w) / 2 / 16;
+              }
+            }
+            x += x0;
+            y += e.bbox.y + e.bbox.h / 2;
+            l.push([x, y]);
+          }
+          o.push(l);
+        }
+        if (e.mode == "tt") {
+          x0 += s;
+        } else {
+          x0 += d.w / 16 * s;
+        }
+      }
+    }
+  }
+  return o;
+}
+function nf(x) {
+  return Math.round(x * 100) / 100;
+}
+class LaTexUtils {
+  constructor(latex) {
+    this._latex = latex;
+    this._tokens = tokenize(latex);
+    this._tree = parse(this._tokens);
+    environments(this._tree.chld);
+    plan(this._tree);
+    flatten(this._tree);
+    this._polylines = render(this._tree);
+  }
+  resolveScale(opt) {
+    var _a, _b, _c, _d;
+    if (opt == void 0) {
+      return [16, 16, 16, 16];
+    }
+    let sclx = (_a = opt.SCALE_X) != null ? _a : 16;
+    let scly = (_b = opt.SCALE_Y) != null ? _b : 16;
+    if (opt.MIN_CHAR_H != void 0) {
+      let mh = 0;
+      for (let i = 0; i < this._tree.chld.length; i++) {
+        const c = this._tree.chld[i];
+        if (c.type == "char" || SYMB[c.text] && (SYMB[c.text].flags.txt || !Object.keys(SYMB[c.text].flags).length)) {
+          mh = Math.min(c.bbox.h, mh);
+        }
+      }
+      const s = Math.max(1, opt.MIN_CHAR_H / mh);
+      sclx *= s;
+      scly *= s;
+    }
+    if (opt.MAX_W != void 0) {
+      const s0 = sclx;
+      sclx = Math.min(sclx, opt.MAX_W / this._tree.bbox.w);
+      scly *= sclx / s0;
+    }
+    if (opt.MAX_H != void 0) {
+      const s0 = scly;
+      scly = Math.min(scly, opt.MAX_H / this._tree.bbox.h);
+      sclx *= scly / s0;
+    }
+    const px = (_c = opt.MARGIN_X) != null ? _c : sclx;
+    const py = (_d = opt.MARGIN_Y) != null ? _d : scly;
+    return [px, py, sclx, scly];
+  }
+  polylines(opt) {
+    if (!opt)
+      opt = {};
+    const polylines = [];
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    for (let i = 0; i < this._polylines.length; i++) {
+      polylines.push([]);
+      for (let j = 0; j < this._polylines[i].length; j++) {
+        const [x, y] = this._polylines[i][j];
+        polylines[polylines.length - 1].push([px + x * sclx, py + y * scly]);
+      }
+    }
+    return polylines;
+  }
+  pathd(opt) {
+    if (!opt)
+      opt = {};
+    let d = "";
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    for (let i = 0; i < this._polylines.length; i++) {
+      for (let j = 0; j < this._polylines[i].length; j++) {
+        const [x, y] = this._polylines[i][j];
+        d += !j ? "M" : "L";
+        d += `${nf(px + x * sclx)} ${nf(py + y * scly)}`;
+      }
+    }
+    return d;
+  }
+  svg(opt) {
+    var _a, _b;
+    if (!opt)
+      opt = {};
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    const w = nf(this._tree.bbox.w * sclx + px * 2);
+    const h = nf(this._tree.bbox.h * scly + py * 2);
+    let o = `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${w}" height="${h}"
+      fill="none" stroke="${(_a = opt.FG_COLOR) != null ? _a : "black"}" stroke-width="${(_b = opt.STROKE_W) != null ? _b : 1}"
+      stroke-linecap="round" stroke-linejoin="round"
+    >`;
+    if (opt.BG_COLOR) {
+      o += `<rect x="${0}" y="${0}" width="${w}" height="${h}" fill="${opt.BG_COLOR}" stroke="none"></rect>`;
+    }
+    o += `<path d="`;
+    for (let i = 0; i < this._polylines.length; i++) {
+      o += "M";
+      for (let j = 0; j < this._polylines[i].length; j++) {
+        const [x, y] = this._polylines[i][j];
+        o += nf(px + x * sclx) + " " + nf(py + y * scly) + " ";
+      }
+    }
+    o += `"/>`;
+    o += `</svg>`;
+    return {
+      svg: `data:image/svg+xml;base64,${window.btoa(o)}`,
+      width: Math.ceil(w),
+      height: Math.ceil(h)
+    };
+  }
+  pdf(opt) {
+    var _a;
+    if (!opt)
+      opt = {};
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    const width = nf(this._tree.bbox.w * sclx + px * 2);
+    const height = nf(this._tree.bbox.h * scly + py * 2);
+    let head = `%PDF-1.1
+%%\xA5\xB1\xEB
+1 0 obj
+<< /Type /Catalog
+/Pages 2 0 R
+>>endobj
+    2 0 obj
+<< /Type /Pages
+/Kids [3 0 R]
+/Count 1
+/MediaBox [0 0 ${width} ${height}]
+>>
+endobj
+    3 0 obj
+<< /Type /Page
+/Parent 2 0 R
+/Resources
+<< /Font
+<< /F1
+<< /Type /Font
+    /Subtype /Type1
+/BaseFont /Times-Roman
+>>
+>>
+>>
+/Contents [`;
+    let pdf = "";
+    let count = 4;
+    for (let i = 0; i < this._polylines.length; i++) {
+      pdf += `${count} 0 obj 
+<< /Length 0 >>
+ stream
+ 1 j 1 J ${(_a = opt.STROKE_W) != null ? _a : 1} w
+`;
+      for (let j = 0; j < this._polylines[i].length; j++) {
+        const [x, y] = this._polylines[i][j];
+        pdf += `${nf(px + x * sclx)} ${nf(height - (py + y * scly))} ${j ? "l" : "m"} `;
+      }
+      pdf += "\nS\nendstream\nendobj\n";
+      head += `${count} 0 R `;
+      count++;
+    }
+    head += "]\n>>\nendobj\n";
+    pdf += "\ntrailer\n<< /Root 1 0 R \n /Size 0\n >>startxref\n\n%%EOF\n";
+    return head + pdf;
+  }
+  boxes(opt) {
+    if (!opt)
+      opt = {};
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    const bs = [];
+    for (let i = 0; i < this._tree.chld.length; i++) {
+      const { x, y, w, h } = this._tree.chld[i].bbox;
+      bs.push({ x: px + x * sclx, y: py + y * scly, w: w * sclx, h: h * scly });
+    }
+    return bs;
+  }
+  box(opt) {
+    if (!opt)
+      opt = {};
+    const [px, py, sclx, scly] = this.resolveScale(opt);
+    return {
+      x: px + this._tree.bbox.x * sclx,
+      y: py + this._tree.bbox.y * scly,
+      w: this._tree.bbox.w * sclx,
+      h: this._tree.bbox.h * scly
+    };
+  }
+}
+class LaTexParticle extends ImageParticle {
+  static convertLaTextToSVG(laTex) {
+    return new LaTexUtils(laTex).svg({
+      SCALE_X: 10,
+      SCALE_Y: 10,
+      MARGIN_X: 0,
+      MARGIN_Y: 0
+    });
+  }
+  render(ctx, element, x, y) {
+    const { scale } = this.options;
+    const width = element.width * scale;
+    const height = element.height * scale;
+    if (this.imageCache.has(element.value)) {
+      const img = this.imageCache.get(element.value);
+      ctx.drawImage(img, x, y, width, height);
+    } else {
+      const laTexLoadPromise = new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = element.laTexSVG;
+        img.onload = () => {
+          ctx.drawImage(img, x, y, width, height);
+          this.imageCache.set(element.value, img);
+          resolve(element);
+        };
+        img.onerror = (error) => {
+          reject(error);
+        };
+      });
+      this.addImageObserver(laTexLoadPromise);
+    }
+  }
+}
+var ListType;
+(function(ListType2) {
+  ListType2["UL"] = "ul";
+  ListType2["OL"] = "ol";
+})(ListType || (ListType = {}));
+var UlStyle;
+(function(UlStyle2) {
+  UlStyle2["DISC"] = "disc";
+  UlStyle2["CIRCLE"] = "circle";
+  UlStyle2["SQUARE"] = "square";
+  UlStyle2["CHECKBOX"] = "checkbox";
+})(UlStyle || (UlStyle = {}));
+var OlStyle;
+(function(OlStyle2) {
+  OlStyle2["DECIMAL"] = "decimal";
+})(OlStyle || (OlStyle = {}));
+var ListStyle;
+(function(ListStyle2) {
+  ListStyle2["DISC"] = "disc";
+  ListStyle2["CIRCLE"] = "circle";
+  ListStyle2["SQUARE"] = "square";
+  ListStyle2["DECIMAL"] = "decimal";
+  ListStyle2["CHECKBOX"] = "checkbox";
+})(ListStyle || (ListStyle = {}));
+const ulStyleMapping = {
+  [UlStyle.DISC]: "\u2022",
+  [UlStyle.CIRCLE]: "\u25E6",
+  [UlStyle.SQUARE]: "\u25AB\uFE0E",
+  [UlStyle.CHECKBOX]: "\u2611\uFE0F"
+};
+const listTypeElementMapping = {
+  [ListType.OL]: "ol",
+  [ListType.UL]: "ul"
+};
+const listStyleCSSMapping = {
+  [ListStyle.DISC]: "disc",
+  [ListStyle.CIRCLE]: "circle",
+  [ListStyle.SQUARE]: "square",
+  [ListStyle.DECIMAL]: "decimal",
+  [ListStyle.CHECKBOX]: "checkbox"
+};
+var TitleLevel;
+(function(TitleLevel2) {
+  TitleLevel2["FIRST"] = "first";
+  TitleLevel2["SECOND"] = "second";
+  TitleLevel2["THIRD"] = "third";
+  TitleLevel2["FOURTH"] = "fourth";
+  TitleLevel2["FIFTH"] = "fifth";
+  TitleLevel2["SIXTH"] = "sixth";
+})(TitleLevel || (TitleLevel = {}));
+const defaultTitleOption = {
+  defaultFirstSize: 26,
+  defaultSecondSize: 24,
+  defaultThirdSize: 22,
+  defaultFourthSize: 20,
+  defaultFifthSize: 18,
+  defaultSixthSize: 16
+};
+const titleSizeMapping = {
+  [TitleLevel.FIRST]: "defaultFirstSize",
+  [TitleLevel.SECOND]: "defaultSecondSize",
+  [TitleLevel.THIRD]: "defaultThirdSize",
+  [TitleLevel.FOURTH]: "defaultFourthSize",
+  [TitleLevel.FIFTH]: "defaultFifthSize",
+  [TitleLevel.SIXTH]: "defaultSixthSize"
+};
+const titleOrderNumberMapping = {
+  [TitleLevel.FIRST]: 1,
+  [TitleLevel.SECOND]: 2,
+  [TitleLevel.THIRD]: 3,
+  [TitleLevel.FOURTH]: 4,
+  [TitleLevel.FIFTH]: 5,
+  [TitleLevel.SIXTH]: 6
+};
+const titleNodeNameMapping = {
+  H1: TitleLevel.FIRST,
+  H2: TitleLevel.SECOND,
+  H3: TitleLevel.THIRD,
+  H4: TitleLevel.FOURTH,
+  H5: TitleLevel.FIFTH,
+  H6: TitleLevel.SIXTH
+};
+var ControlType;
+(function(ControlType2) {
+  ControlType2["TEXT"] = "text";
+  ControlType2["SELECT"] = "select";
+  ControlType2["CHECKBOX"] = "checkbox";
+  ControlType2["RADIO"] = "radio";
+  ControlType2["DATE"] = "date";
+})(ControlType || (ControlType = {}));
+var ControlComponent;
+(function(ControlComponent2) {
+  ControlComponent2["PREFIX"] = "prefix";
+  ControlComponent2["POSTFIX"] = "postfix";
+  ControlComponent2["PLACEHOLDER"] = "placeholder";
+  ControlComponent2["VALUE"] = "value";
+  ControlComponent2["CHECKBOX"] = "checkbox";
+  ControlComponent2["RADIO"] = "radio";
+})(ControlComponent || (ControlComponent = {}));
+var ControlIndentation;
+(function(ControlIndentation2) {
+  ControlIndentation2["ROW_START"] = "rowStart";
+  ControlIndentation2["VALUE_START"] = "valueStart";
+})(ControlIndentation || (ControlIndentation = {}));
+var BackgroundSize;
+(function(BackgroundSize2) {
+  BackgroundSize2["CONTAIN"] = "contain";
+  BackgroundSize2["COVER"] = "cover";
+})(BackgroundSize || (BackgroundSize = {}));
+var BackgroundRepeat;
+(function(BackgroundRepeat2) {
+  BackgroundRepeat2["REPEAT"] = "repeat";
+  BackgroundRepeat2["NO_REPEAT"] = "no-repeat";
+  BackgroundRepeat2["REPEAT_X"] = "repeat-x";
+  BackgroundRepeat2["REPEAT_Y"] = "repeat-y";
+})(BackgroundRepeat || (BackgroundRepeat = {}));
+const defaultBackground = {
+  color: "#FFFFFF",
+  image: "",
+  size: BackgroundSize.COVER,
+  repeat: BackgroundRepeat.NO_REPEAT,
+  applyPageNumbers: []
+};
+var VerticalAlign;
+(function(VerticalAlign2) {
+  VerticalAlign2["TOP"] = "top";
+  VerticalAlign2["MIDDLE"] = "middle";
+  VerticalAlign2["BOTTOM"] = "bottom";
+})(VerticalAlign || (VerticalAlign = {}));
+const defaultCheckboxOption = {
+  width: 14,
+  height: 14,
+  gap: 5,
+  lineWidth: 1,
+  fillStyle: "#5175f4",
+  strokeStyle: "#ffffff",
+  verticalAlign: VerticalAlign.BOTTOM
+};
+const defaultControlOption = {
+  placeholderColor: "#9c9b9b",
+  bracketColor: "#000000",
+  prefix: "{",
+  postfix: "}",
+  borderWidth: 1,
+  borderColor: "#000000",
+  activeBackgroundColor: ""
+};
+const defaultFooterOption = {
+  bottom: 30,
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false,
+  editable: true
+};
+const defaultGroupOption = {
+  opacity: 0.1,
+  backgroundColor: "#E99D00",
+  activeOpacity: 0.5,
+  activeBackgroundColor: "#E99D00",
+  disabled: false
+};
+const defaultHeaderOption = {
+  top: 30,
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false,
+  editable: true
+};
+const defaultLineBreak = {
+  disabled: true,
+  color: "#CCCCCC",
+  lineWidth: 1.5
+};
+const defaultPageBreakOption = {
+  font: "Microsoft YaHei",
+  fontSize: 12,
+  lineDash: [3, 1]
+};
+const FORMAT_PLACEHOLDER = {
+  PAGE_NO: "{pageNo}",
+  PAGE_COUNT: "{pageCount}"
+};
+const defaultPageNumberOption = {
+  bottom: 60,
+  size: 12,
+  font: "Microsoft YaHei",
+  color: "#000000",
+  rowFlex: RowFlex.CENTER,
+  format: FORMAT_PLACEHOLDER.PAGE_NO,
+  numberType: NumberType.ARABIC,
+  disabled: false,
+  startPageNo: 1,
+  fromPageNo: 0,
+  maxPageNo: null
+};
+const defaultPlaceholderOption = {
+  data: "",
+  color: "#DCDFE6",
+  opacity: 1,
+  size: 16,
+  font: "Microsoft YaHei"
+};
+const defaultRadioOption = {
+  width: 14,
+  height: 14,
+  gap: 5,
+  lineWidth: 1,
+  fillStyle: "#5175f4",
+  strokeStyle: "#000000",
+  verticalAlign: VerticalAlign.BOTTOM
+};
+const defaultSeparatorOption = {
+  lineWidth: 1,
+  strokeStyle: "#000000"
+};
+const defaultTableOption = {
+  tdPadding: [0, 5, 5, 5],
+  defaultTrMinHeight: 42,
+  defaultColMinWidth: 40
+};
+const defaultWatermarkOption = {
+  data: "",
+  color: "#AEB5C0",
+  opacity: 0.3,
+  size: 200,
+  font: "Microsoft YaHei",
+  repeat: false,
+  gap: [10, 10]
+};
+const defaultZoneOption = {
+  tipDisabled: true
+};
+var LineNumberType;
+(function(LineNumberType2) {
+  LineNumberType2["PAGE"] = "page";
+  LineNumberType2["CONTINUITY"] = "continuity";
+})(LineNumberType || (LineNumberType = {}));
+const defaultLineNumberOption = {
+  size: 12,
+  font: "Microsoft YaHei",
+  color: "#000000",
+  disabled: true,
+  right: 20,
+  type: LineNumberType.CONTINUITY
+};
+const defaultPageBorderOption = {
+  color: "#000000",
+  lineWidth: 1,
+  padding: [0, 5, 0, 5],
+  disabled: true
+};
+var EditorComponent;
+(function(EditorComponent2) {
+  EditorComponent2["COMPONENT"] = "component";
+  EditorComponent2["MENU"] = "menu";
+  EditorComponent2["MAIN"] = "main";
+  EditorComponent2["FOOTER"] = "footer";
+  EditorComponent2["CONTEXTMENU"] = "contextmenu";
+  EditorComponent2["POPUP"] = "popup";
+  EditorComponent2["CATALOG"] = "catalog";
+  EditorComponent2["COMMENT"] = "comment";
+})(EditorComponent || (EditorComponent = {}));
+var EditorContext;
+(function(EditorContext2) {
+  EditorContext2["PAGE"] = "page";
+  EditorContext2["TABLE"] = "table";
+})(EditorContext || (EditorContext = {}));
+var EditorMode;
+(function(EditorMode2) {
+  EditorMode2["EDIT"] = "edit";
+  EditorMode2["CLEAN"] = "clean";
+  EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
+  EditorMode2["PRINT"] = "print";
+  EditorMode2["DESIGN"] = "design";
+})(EditorMode || (EditorMode = {}));
+var EditorZone;
+(function(EditorZone2) {
+  EditorZone2["HEADER"] = "header";
+  EditorZone2["MAIN"] = "main";
+  EditorZone2["FOOTER"] = "footer";
+})(EditorZone || (EditorZone = {}));
+var PageMode;
+(function(PageMode2) {
+  PageMode2["PAGING"] = "paging";
+  PageMode2["CONTINUITY"] = "continuity";
+})(PageMode || (PageMode = {}));
+var PaperDirection;
+(function(PaperDirection2) {
+  PaperDirection2["VERTICAL"] = "vertical";
+  PaperDirection2["HORIZONTAL"] = "horizontal";
+})(PaperDirection || (PaperDirection = {}));
+var WordBreak;
+(function(WordBreak2) {
+  WordBreak2["BREAK_ALL"] = "break-all";
+  WordBreak2["BREAK_WORD"] = "break-word";
+})(WordBreak || (WordBreak = {}));
+var RenderMode;
+(function(RenderMode2) {
+  RenderMode2["SPEED"] = "speed";
+  RenderMode2["COMPATIBILITY"] = "compatibility";
+})(RenderMode || (RenderMode = {}));
+function mergeOption(options = {}) {
+  const tableOptions = {
+    ...defaultTableOption,
+    ...options.table
+  };
+  const headerOptions = {
+    ...defaultHeaderOption,
+    ...options.header
+  };
+  const footerOptions = {
+    ...defaultFooterOption,
+    ...options.footer
+  };
+  const pageNumberOptions = {
+    ...defaultPageNumberOption,
+    ...options.pageNumber
+  };
+  const waterMarkOptions = {
+    ...defaultWatermarkOption,
+    ...options.watermark
+  };
+  const controlOptions = {
+    ...defaultControlOption,
+    ...options.control
+  };
+  const checkboxOptions = {
+    ...defaultCheckboxOption,
+    ...options.checkbox
+  };
+  const radioOptions = {
+    ...defaultRadioOption,
+    ...options.radio
+  };
+  const cursorOptions = {
+    ...defaultCursorOption,
+    ...options.cursor
+  };
+  const titleOptions = {
+    ...defaultTitleOption,
+    ...options.title
+  };
+  const placeholderOptions = {
+    ...defaultPlaceholderOption,
+    ...options.placeholder
+  };
+  const groupOptions = {
+    ...defaultGroupOption,
+    ...options.group
+  };
+  const pageBreakOptions = {
+    ...defaultPageBreakOption,
+    ...options.pageBreak
+  };
+  const zoneOptions = {
+    ...defaultZoneOption,
+    ...options.zone
+  };
+  const backgroundOptions = {
+    ...defaultBackground,
+    ...options.background
+  };
+  const lineBreakOptions = {
+    ...defaultLineBreak,
+    ...options.lineBreak
+  };
+  const separatorOptions = {
+    ...defaultSeparatorOption,
+    ...options.separator
+  };
+  const lineNumberOptions = {
+    ...defaultLineNumberOption,
+    ...options.lineNumber
+  };
+  const pageBorderOptions = {
+    ...defaultPageBorderOption,
+    ...options.pageBorder
+  };
+  return {
+    mode: EditorMode.EDIT,
+    defaultType: "TEXT",
+    defaultColor: "#000000",
+    defaultFont: "Microsoft YaHei",
+    defaultSize: 16,
+    minSize: 5,
+    maxSize: 72,
+    defaultRowMargin: 1,
+    defaultBasicRowMarginHeight: 8,
+    defaultTabWidth: 32,
+    width: 794,
+    height: 1123,
+    scale: 1,
+    pageGap: 20,
+    underlineColor: "#000000",
+    strikeoutColor: "#FF0000",
+    rangeAlpha: 0.6,
+    rangeColor: "#AECBFA",
+    rangeMinWidth: 5,
+    searchMatchAlpha: 0.6,
+    searchMatchColor: "#FFFF00",
+    searchNavigateMatchColor: "#AAD280",
+    highlightAlpha: 0.6,
+    resizerColor: "#4182D9",
+    resizerSize: 5,
+    marginIndicatorSize: 35,
+    marginIndicatorColor: "#BABABA",
+    margins: [100, 120, 100, 120],
+    pageMode: PageMode.PAGING,
+    renderMode: RenderMode.SPEED,
+    defaultHyperlinkColor: "#0000FF",
+    paperDirection: PaperDirection.VERTICAL,
+    inactiveAlpha: 0.6,
+    historyMaxRecordCount: 100,
+    wordBreak: WordBreak.BREAK_WORD,
+    printPixelRatio: 3,
+    maskMargin: [0, 0, 0, 0],
+    letterClass: [LETTER_CLASS.ENGLISH],
+    contextMenuDisableKeys: [],
+    scrollContainerSelector: "",
+    ...options,
+    table: tableOptions,
+    header: headerOptions,
+    footer: footerOptions,
+    pageNumber: pageNumberOptions,
+    watermark: waterMarkOptions,
+    control: controlOptions,
+    checkbox: checkboxOptions,
+    radio: radioOptions,
+    cursor: cursorOptions,
+    title: titleOptions,
+    placeholder: placeholderOptions,
+    group: groupOptions,
+    pageBreak: pageBreakOptions,
+    zone: zoneOptions,
+    background: backgroundOptions,
+    lineBreak: lineBreakOptions,
+    separator: separatorOptions,
+    lineNumber: lineNumberOptions,
+    pageBorder: pageBorderOptions
+  };
+}
+function unzipElementList(elementList) {
+  const result = [];
+  for (let v = 0; v < elementList.length; v++) {
+    const valueItem = elementList[v];
+    const textList = splitText(valueItem.value);
+    for (let d = 0; d < textList.length; d++) {
+      result.push({ ...valueItem, value: textList[d] });
+    }
+  }
+  return result;
+}
+function formatElementList(elementList, options) {
+  const { isHandleFirstElement = true, isForceCompensation = false, editorOptions } = options;
+  const startElement = elementList[0];
+  if (isForceCompensation || isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
+    elementList.unshift({
+      value: ZERO
+    });
+  }
+  let i = 0;
+  while (i < elementList.length) {
+    let el = elementList[i];
+    if (el.type === ElementType.TITLE) {
+      elementList.splice(i, 1);
+      const valueList = el.valueList || [];
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: false,
+        isForceCompensation: false
+      });
+      if (valueList.length) {
+        const titleId = getUUID();
+        const titleOptions = editorOptions.title;
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.title = el.title;
+          if (el.level) {
+            value.titleId = titleId;
+            value.level = el.level;
+          }
+          if (isTextLikeElement(value)) {
+            if (!value.size) {
+              value.size = titleOptions[titleSizeMapping[value.level]];
+            }
+            if (value.bold === void 0) {
+              value.bold = true;
+            }
+          }
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
+    } else if (el.type === ElementType.LIST) {
+      elementList.splice(i, 1);
+      const valueList = el.valueList || [];
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: true,
+        isForceCompensation: false
+      });
+      if (valueList.length) {
+        const listId = getUUID();
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.listId = listId;
+          value.listType = el.listType;
+          value.listStyle = el.listStyle;
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
+    } else if (el.type === ElementType.TABLE) {
+      const tableId = getUUID();
+      el.id = tableId;
+      if (el.trList) {
+        const { defaultTrMinHeight } = editorOptions.table;
+        for (let t = 0; t < el.trList.length; t++) {
+          const tr = el.trList[t];
+          const trId = getUUID();
+          tr.id = trId;
+          if (!tr.minHeight || tr.minHeight < defaultTrMinHeight) {
+            tr.minHeight = defaultTrMinHeight;
+          }
+          if (tr.height < tr.minHeight) {
+            tr.height = tr.minHeight;
+          }
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const tdId = getUUID();
+            td.id = tdId;
+            formatElementList(td.value, {
+              ...options,
+              isHandleFirstElement: true,
+              isForceCompensation: true
+            });
+            for (let v = 0; v < td.value.length; v++) {
+              const value = td.value[v];
+              value.tdId = tdId;
+              value.trId = trId;
+              value.tableId = tableId;
+            }
+          }
+        }
+      }
+    } else if (el.type === ElementType.HYPERLINK) {
+      elementList.splice(i, 1);
+      const valueList = unzipElementList(el.valueList || []);
+      if (valueList.length) {
+        const hyperlinkId = getUUID();
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.type = el.type;
+          value.url = el.url;
+          value.hyperlinkId = hyperlinkId;
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
+    } else if (el.type === ElementType.DATE) {
+      elementList.splice(i, 1);
+      const valueList = unzipElementList(el.valueList || []);
+      if (valueList.length) {
+        const dateId = getUUID();
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.type = el.type;
+          value.dateFormat = el.dateFormat;
+          value.dateId = dateId;
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
+    } else if (el.type === ElementType.CONTROL) {
+      if (!el.control) {
+        i++;
+        continue;
+      }
+      const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control;
+      const { editorOptions: { control: controlOption, checkbox: checkboxOption, radio: radioOption } } = options;
+      const controlId = getUUID();
+      elementList.splice(i, 1);
+      const controlContext = pickObject(el, [
+        ...EDITOR_ELEMENT_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR
+      ]);
+      const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
+      const thePrePostfixArg = {
+        ...controlDefaultStyle,
+        color: editorOptions.control.bracketColor
+      };
+      const prefixStrList = splitText(prefix || controlOption.prefix);
+      for (let p = 0; p < prefixStrList.length; p++) {
+        const value2 = prefixStrList[p];
+        elementList.splice(i, 0, {
+          ...controlContext,
+          ...thePrePostfixArg,
+          controlId,
+          value: value2,
+          type: el.type,
+          control: el.control,
+          controlComponent: ControlComponent.PREFIX
+        });
+        i++;
+      }
+      if (value && value.length || type === ControlType.CHECKBOX || type === ControlType.RADIO || type === ControlType.SELECT && code && (!value || !value.length)) {
+        let valueList = value || [];
+        if (type === ControlType.CHECKBOX) {
+          const codeList = code ? code.split(",") : [];
+          if (Array.isArray(valueSets) && valueSets.length) {
+            const valueStyleList = valueList.reduce((pre, cur) => pre.concat(cur.value.split("").map((v) => ({ ...cur, value: v }))), []);
+            let valueStyleIndex = 0;
+            for (let v = 0; v < valueSets.length; v++) {
+              const valueSet = valueSets[v];
+              elementList.splice(i, 0, {
+                ...controlContext,
+                ...controlDefaultStyle,
+                controlId,
+                value: "",
+                type: el.type,
+                control: el.control,
+                controlComponent: ControlComponent.CHECKBOX,
+                checkbox: {
+                  code: valueSet.code,
+                  value: codeList.includes(valueSet.code)
+                }
+              });
+              i++;
+              const valueStrList = splitText(valueSet.value);
+              for (let e = 0; e < valueStrList.length; e++) {
+                const value2 = valueStrList[e];
+                const isLastLetter = e === valueStrList.length - 1;
+                elementList.splice(i, 0, {
+                  ...controlContext,
+                  ...controlDefaultStyle,
+                  ...valueStyleList[valueStyleIndex],
+                  controlId,
+                  value: value2 === "\n" ? ZERO : value2,
+                  letterSpacing: isLastLetter ? checkboxOption.gap : 0,
+                  control: el.control,
+                  controlComponent: ControlComponent.VALUE
+                });
+                valueStyleIndex++;
+                i++;
+              }
+            }
+          }
+        } else if (type === ControlType.RADIO) {
+          if (Array.isArray(valueSets) && valueSets.length) {
+            const valueStyleList = valueList.reduce((pre, cur) => pre.concat(cur.value.split("").map((v) => ({ ...cur, value: v }))), []);
+            let valueStyleIndex = 0;
+            for (let v = 0; v < valueSets.length; v++) {
+              const valueSet = valueSets[v];
+              elementList.splice(i, 0, {
+                ...controlContext,
+                ...controlDefaultStyle,
+                controlId,
+                value: "",
+                type: el.type,
+                control: el.control,
+                controlComponent: ControlComponent.RADIO,
+                radio: {
+                  code: valueSet.code,
+                  value: code === valueSet.code
+                }
+              });
+              i++;
+              const valueStrList = splitText(valueSet.value);
+              for (let e = 0; e < valueStrList.length; e++) {
+                const value2 = valueStrList[e];
+                const isLastLetter = e === valueStrList.length - 1;
+                elementList.splice(i, 0, {
+                  ...controlContext,
+                  ...controlDefaultStyle,
+                  ...valueStyleList[valueStyleIndex],
+                  controlId,
+                  value: value2 === "\n" ? ZERO : value2,
+                  letterSpacing: isLastLetter ? radioOption.gap : 0,
+                  control: el.control,
+                  controlComponent: ControlComponent.VALUE
+                });
+                valueStyleIndex++;
+                i++;
+              }
+            }
+          }
+        } else {
+          if (!value || !value.length) {
+            if (Array.isArray(valueSets) && valueSets.length) {
+              const valueSet = valueSets.find((v) => v.code === code);
+              if (valueSet) {
+                valueList = [
+                  {
+                    value: valueSet.value
+                  }
+                ];
+              }
+            }
+          }
+          formatElementList(valueList, {
+            ...options,
+            isHandleFirstElement: false,
+            isForceCompensation: false
+          });
+          for (let v = 0; v < valueList.length; v++) {
+            const element = valueList[v];
+            const value2 = element.value;
+            elementList.splice(i, 0, {
+              ...controlContext,
+              ...controlDefaultStyle,
+              ...element,
+              controlId,
+              value: value2 === "\n" ? ZERO : value2,
+              type: element.type || ElementType.TEXT,
+              control: el.control,
+              controlComponent: ControlComponent.VALUE
+            });
+            i++;
+          }
+        }
+      } else if (placeholder) {
+        const thePlaceholderArgs = {
+          ...controlDefaultStyle,
+          color: editorOptions.control.placeholderColor
+        };
+        const placeholderStrList = splitText(placeholder);
+        for (let p = 0; p < placeholderStrList.length; p++) {
+          const value2 = placeholderStrList[p];
+          elementList.splice(i, 0, {
+            ...controlContext,
+            ...thePlaceholderArgs,
+            controlId,
+            value: value2 === "\n" ? ZERO : value2,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.PLACEHOLDER
+          });
+          i++;
+        }
+      }
+      const postfixStrList = splitText(postfix || controlOption.postfix);
+      for (let p = 0; p < postfixStrList.length; p++) {
+        const value2 = postfixStrList[p];
+        elementList.splice(i, 0, {
+          ...controlContext,
+          ...thePrePostfixArg,
+          controlId,
+          value: value2,
+          type: el.type,
+          control: el.control,
+          controlComponent: ControlComponent.POSTFIX
+        });
+        i++;
+      }
+      i--;
+    } else if ((!el.type || TEXTLIKE_ELEMENT_TYPE.includes(el.type)) && el.value.length > 1) {
+      elementList.splice(i, 1);
+      const valueList = splitText(el.value);
+      for (let v = 0; v < valueList.length; v++) {
+        elementList.splice(i + v, 0, { ...el, value: valueList[v] });
+      }
+      el = elementList[i];
+    }
+    if (el.value === "\n" || el.value == "\r\n") {
+      el.value = ZERO;
+    }
+    if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
+      el.id = getUUID();
+    }
+    if (el.type === ElementType.LATEX) {
+      const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value);
+      el.width = el.width || width;
+      el.height = el.height || height;
+      el.laTexSVG = svg;
+      el.id = getUUID();
+    }
+    i++;
+  }
+}
+function isSameElementExceptValue(source, target) {
+  const sourceKeys = Object.keys(source);
+  const targetKeys = Object.keys(target);
+  if (sourceKeys.length !== targetKeys.length)
+    return false;
+  for (let s = 0; s < sourceKeys.length; s++) {
+    const key = sourceKeys[s];
+    if (key === "value")
+      continue;
+    if (key === "groupIds" && Array.isArray(source[key]) && Array.isArray(target[key]) && isArrayEqual(source[key], target[key])) {
+      continue;
+    }
+    if (source[key] !== target[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function pickElementAttr(payload, option = {}) {
+  const { extraPickAttrs } = option;
+  const zipAttrs = EDITOR_ELEMENT_ZIP_ATTR;
+  if (extraPickAttrs) {
+    zipAttrs.push(...extraPickAttrs);
+  }
+  const element = {
+    value: payload.value === ZERO ? `
+` : payload.value
+  };
+  zipAttrs.forEach((attr) => {
+    const value = payload[attr];
+    if (value !== void 0) {
+      element[attr] = value;
+    }
+  });
+  return element;
+}
+function zipElementList(payload, options = {}) {
+  const { extraPickAttrs } = options;
+  const elementList = deepClone(payload);
+  const zipElementListData = [];
+  let e = 0;
+  while (e < elementList.length) {
+    let element = elementList[e];
+    if (e === 0 && element.value === ZERO && !element.listId && (!element.type || element.type === ElementType.TEXT)) {
+      e++;
+      continue;
+    }
+    if (element.titleId && element.level) {
+      const titleId = element.titleId;
+      if (titleId) {
+        const level = element.level;
+        const titleElement = {
+          type: ElementType.TITLE,
+          title: element.title,
+          value: "",
+          level
+        };
+        const valueList = [];
+        while (e < elementList.length) {
+          const titleE = elementList[e];
+          if (titleId !== titleE.titleId) {
+            e--;
+            break;
+          }
+          delete titleE.level;
+          delete titleE.title;
+          valueList.push(titleE);
+          e++;
+        }
+        titleElement.valueList = zipElementList(valueList, options);
+        element = titleElement;
+      }
+    } else if (element.listId && element.listType) {
+      const listId = element.listId;
+      if (listId) {
+        const listType = element.listType;
+        const listStyle = element.listStyle;
+        const listElement = {
+          type: ElementType.LIST,
+          value: "",
+          listId,
+          listType,
+          listStyle
+        };
+        const valueList = [];
+        while (e < elementList.length) {
+          const listE = elementList[e];
+          if (listId !== listE.listId) {
+            e--;
+            break;
+          }
+          delete listE.listType;
+          delete listE.listStyle;
+          valueList.push(listE);
+          e++;
+        }
+        listElement.valueList = zipElementList(valueList, options);
+        element = listElement;
+      }
+    } else if (element.type === ElementType.TABLE) {
+      if (element.pagingId) {
+        let tableIndex = e + 1;
+        let combineCount = 0;
+        while (tableIndex < elementList.length) {
+          const nextElement = elementList[tableIndex];
+          if (nextElement.pagingId === element.pagingId) {
+            element.height += nextElement.height;
+            element.trList.push(...nextElement.trList);
+            tableIndex++;
+            combineCount++;
+          } else {
+            break;
+          }
+        }
+        e += combineCount;
+      }
+      if (element.trList) {
+        for (let t = 0; t < element.trList.length; t++) {
+          const tr = element.trList[t];
+          delete tr.id;
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const zipTd = {
+              colspan: td.colspan,
+              rowspan: td.rowspan,
+              value: zipElementList(td.value, options)
+            };
+            TABLE_TD_ZIP_ATTR.forEach((attr) => {
+              const value = td[attr];
+              if (value !== void 0) {
+                zipTd[attr] = value;
+              }
+            });
+            tr.tdList[d] = zipTd;
+          }
+        }
+      }
+    } else if (element.type === ElementType.HYPERLINK) {
+      const hyperlinkId = element.hyperlinkId;
+      if (hyperlinkId) {
+        const hyperlinkElement = {
+          type: ElementType.HYPERLINK,
+          value: "",
+          url: element.url
+        };
+        const valueList = [];
+        while (e < elementList.length) {
+          const hyperlinkE = elementList[e];
+          if (hyperlinkId !== hyperlinkE.hyperlinkId) {
+            e--;
+            break;
+          }
+          delete hyperlinkE.type;
+          delete hyperlinkE.url;
+          valueList.push(hyperlinkE);
+          e++;
+        }
+        hyperlinkElement.valueList = zipElementList(valueList, options);
+        element = hyperlinkElement;
+      }
+    } else if (element.type === ElementType.DATE) {
+      const dateId = element.dateId;
+      if (dateId) {
+        const dateElement = {
+          type: ElementType.DATE,
+          value: "",
+          dateFormat: element.dateFormat
+        };
+        const valueList = [];
+        while (e < elementList.length) {
+          const dateE = elementList[e];
+          if (dateId !== dateE.dateId) {
+            e--;
+            break;
+          }
+          delete dateE.type;
+          delete dateE.dateFormat;
+          valueList.push(dateE);
+          e++;
+        }
+        dateElement.valueList = zipElementList(valueList, options);
+        element = dateElement;
+      }
+    } else if (element.controlId) {
+      const controlId = element.controlId;
+      if (controlId) {
+        const controlDefaultStyle = pickObject(element, CONTROL_STYLE_ATTR);
+        const control = {
+          ...element.control,
+          ...controlDefaultStyle
+        };
+        const controlElement = {
+          ...pickObject(element, EDITOR_ROW_ATTR),
+          type: ElementType.CONTROL,
+          value: "",
+          control,
+          controlId
+        };
+        const valueList = [];
+        while (e < elementList.length) {
+          const controlE = elementList[e];
+          if (controlId !== controlE.controlId) {
+            e--;
+            break;
+          }
+          if (controlE.controlComponent === ControlComponent.VALUE) {
+            delete controlE.control;
+            delete controlE.controlId;
+            valueList.push(controlE);
+          }
+          e++;
+        }
+        controlElement.control.value = zipElementList(valueList, options);
+        element = pickElementAttr(controlElement, { extraPickAttrs });
+      }
+    }
+    const pickElement = pickElementAttr(element, { extraPickAttrs });
+    if (!element.type || element.type === ElementType.TEXT || element.type === ElementType.SUBSCRIPT || element.type === ElementType.SUPERSCRIPT) {
+      while (e < elementList.length) {
+        const nextElement = elementList[e + 1];
+        e++;
+        if (nextElement && isSameElementExceptValue(pickElement, pickElementAttr(nextElement, { extraPickAttrs }))) {
+          const nextValue = nextElement.value === ZERO ? "\n" : nextElement.value;
+          pickElement.value += nextValue;
+        } else {
+          break;
+        }
+      }
+    } else {
+      e++;
+    }
+    zipElementListData.push(pickElement);
+  }
+  return zipElementListData;
+}
+function convertTextAlignToRowFlex(node) {
+  const textAlign = window.getComputedStyle(node).textAlign;
+  switch (textAlign) {
+    case "left":
+    case "start":
+      return RowFlex.LEFT;
+    case "center":
+      return RowFlex.CENTER;
+    case "right":
+    case "end":
+      return RowFlex.RIGHT;
+    case "justify":
+      return RowFlex.ALIGNMENT;
+    case "justify-all":
+      return RowFlex.JUSTIFY;
+    default:
+      return RowFlex.LEFT;
+  }
+}
+function convertRowFlexToTextAlign(rowFlex) {
+  return rowFlex === RowFlex.ALIGNMENT ? "justify" : rowFlex;
+}
+function convertRowFlexToJustifyContent(rowFlex) {
+  switch (rowFlex) {
+    case RowFlex.LEFT:
+      return "flex-start";
+    case RowFlex.CENTER:
+      return "center";
+    case RowFlex.RIGHT:
+      return "flex-end";
+    case RowFlex.ALIGNMENT:
+    case RowFlex.JUSTIFY:
+      return "space-between";
+    default:
+      return "flex-start";
+  }
+}
+function isTextLikeElement(element) {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
+}
+function getAnchorElement(elementList, anchorIndex) {
+  const anchorElement = elementList[anchorIndex];
+  if (!anchorElement)
+    return null;
+  const anchorNextElement = elementList[anchorIndex + 1];
+  return !anchorElement.listId && anchorElement.value === ZERO && anchorNextElement && anchorNextElement.value !== ZERO ? anchorNextElement : anchorElement;
+}
+function formatElementContext(sourceElementList, formatElementList2, anchorIndex, options) {
+  var _a, _b, _c;
+  let copyElement = getAnchorElement(sourceElementList, anchorIndex);
+  if (!copyElement)
+    return;
+  const { isBreakWhenWrap = false, editorOptions } = options || {};
+  const { mode } = editorOptions || {};
+  if (mode !== EditorMode.DESIGN && ((_a = copyElement.title) == null ? void 0 : _a.disabled)) {
+    copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR);
+  }
+  let isBreakWarped = false;
+  for (let e = 0; e < formatElementList2.length; e++) {
+    const targetElement = formatElementList2[e];
+    if (isBreakWhenWrap && !copyElement.listId && START_LINE_BREAK_REG.test(targetElement.value)) {
+      isBreakWarped = true;
+    }
+    if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
+      const cloneAttr2 = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
+      cloneProperty(cloneAttr2, copyElement, targetElement);
+      (_b = targetElement.valueList) == null ? void 0 : _b.forEach((valueItem) => {
+        cloneProperty(cloneAttr2, copyElement, valueItem);
+      });
+      continue;
+    }
+    if ((_c = targetElement.valueList) == null ? void 0 : _c.length) {
+      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex, options);
+    }
+    const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR];
+    if (!getIsBlockElement(targetElement)) {
+      cloneAttr.push(...EDITOR_ROW_ATTR);
+    }
+    cloneProperty(cloneAttr, copyElement, targetElement);
+  }
+}
+function convertElementToDom(element, options) {
+  let tagName = "span";
+  if (element.type === ElementType.SUPERSCRIPT) {
+    tagName = "sup";
+  } else if (element.type === ElementType.SUBSCRIPT) {
+    tagName = "sub";
+  }
+  const dom = document.createElement(tagName);
+  dom.style.fontFamily = element.font || options.defaultFont;
+  if (element.rowFlex) {
+    dom.style.textAlign = convertRowFlexToTextAlign(element.rowFlex);
+  }
+  if (element.color) {
+    dom.style.color = element.color;
+  }
+  if (element.bold) {
+    dom.style.fontWeight = "600";
+  }
+  if (element.italic) {
+    dom.style.fontStyle = "italic";
+  }
+  dom.style.fontSize = `${element.size || options.defaultSize}px`;
+  if (element.highlight) {
+    dom.style.backgroundColor = element.highlight;
+  }
+  if (element.underline) {
+    dom.style.textDecoration = "underline";
+  }
+  if (element.strikeout) {
+    dom.style.textDecoration += " line-through";
+  }
+  dom.innerText = element.value.replace(new RegExp(`${ZERO}`, "g"), "\n");
+  return dom;
+}
+function splitListElement(elementList) {
+  let curListIndex = 0;
+  const listElementListMap = /* @__PURE__ */ new Map();
+  for (let e = 0; e < elementList.length; e++) {
+    const element = elementList[e];
+    if (e === 0) {
+      if (element.checkbox)
+        continue;
+      element.value = element.value.replace(START_LINE_BREAK_REG, "");
+    }
+    if (element.listWrap) {
+      const listElementList = listElementListMap.get(curListIndex) || [];
+      listElementList.push(element);
+      listElementListMap.set(curListIndex, listElementList);
+    } else {
+      const valueList = element.value.split("\n");
+      for (let c = 0; c < valueList.length; c++) {
+        if (c > 0) {
+          curListIndex += 1;
+        }
+        const value = valueList[c];
+        const listElementList = listElementListMap.get(curListIndex) || [];
+        listElementList.push({
+          ...element,
+          value
+        });
+        listElementListMap.set(curListIndex, listElementList);
+      }
+    }
+  }
+  return listElementListMap;
+}
+function groupElementListByRowFlex(elementList) {
+  var _a;
+  const elementListGroupList = [];
+  if (!elementList.length)
+    return elementListGroupList;
+  let currentRowFlex = ((_a = elementList[0]) == null ? void 0 : _a.rowFlex) || null;
+  elementListGroupList.push({
+    rowFlex: currentRowFlex,
+    data: [elementList[0]]
+  });
+  for (let e = 1; e < elementList.length; e++) {
+    const element = elementList[e];
+    const rowFlex = element.rowFlex || null;
+    if (currentRowFlex === rowFlex && !getIsBlockElement(element) && !getIsBlockElement(elementList[e - 1])) {
+      const lastElementListGroup = elementListGroupList[elementListGroupList.length - 1];
+      lastElementListGroup.data.push(element);
+    } else {
+      elementListGroupList.push({
+        rowFlex,
+        data: [element]
+      });
+      currentRowFlex = rowFlex;
+    }
+  }
+  for (let g = 0; g < elementListGroupList.length; g++) {
+    const elementListGroup = elementListGroupList[g];
+    elementListGroup.data = zipElementList(elementListGroup.data);
+  }
+  return elementListGroupList;
+}
+function createDomFromElementList(elementList, options) {
+  const editorOptions = mergeOption(options);
+  function buildDom(payload) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const clipboardDom2 = document.createElement("div");
+    for (let e = 0; e < payload.length; e++) {
+      const element = payload[e];
+      if (element.type === ElementType.TABLE) {
+        const tableDom = document.createElement("table");
+        tableDom.setAttribute("cellSpacing", "0");
+        tableDom.setAttribute("cellpadding", "0");
+        tableDom.setAttribute("border", "0");
+        const borderStyle = "1px solid #000000";
+        if (!element.borderType || element.borderType === TableBorder.ALL) {
+          tableDom.style.borderTop = borderStyle;
+          tableDom.style.borderLeft = borderStyle;
+        } else if (element.borderType === TableBorder.EXTERNAL) {
+          tableDom.style.border = borderStyle;
+        }
+        tableDom.style.width = `${element.width}px`;
+        const colgroupDom = document.createElement("colgroup");
+        for (let c = 0; c < element.colgroup.length; c++) {
+          const colgroup = element.colgroup[c];
+          const colDom = document.createElement("col");
+          colDom.setAttribute("width", `${colgroup.width}`);
+          colgroupDom.append(colDom);
+        }
+        tableDom.append(colgroupDom);
+        const trList = element.trList;
+        for (let t = 0; t < trList.length; t++) {
+          const trDom = document.createElement("tr");
+          const tr = trList[t];
+          trDom.style.height = `${tr.height}px`;
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const tdDom = document.createElement("td");
+            if (!element.borderType || element.borderType === TableBorder.ALL) {
+              tdDom.style.borderBottom = tdDom.style.borderRight = "1px solid";
+            }
+            const td = tr.tdList[d];
+            tdDom.colSpan = td.colspan;
+            tdDom.rowSpan = td.rowspan;
+            tdDom.style.verticalAlign = td.verticalAlign || "top";
+            if ((_a = td.borderTypes) == null ? void 0 : _a.includes(TdBorder.TOP)) {
+              tdDom.style.borderTop = borderStyle;
+            }
+            if ((_b = td.borderTypes) == null ? void 0 : _b.includes(TdBorder.RIGHT)) {
+              tdDom.style.borderRight = borderStyle;
+            }
+            if ((_c = td.borderTypes) == null ? void 0 : _c.includes(TdBorder.BOTTOM)) {
+              tdDom.style.borderBottom = borderStyle;
+            }
+            if ((_d = td.borderTypes) == null ? void 0 : _d.includes(TdBorder.LEFT)) {
+              tdDom.style.borderLeft = borderStyle;
+            }
+            const childDom = createDomFromElementList(td.value, options);
+            tdDom.innerHTML = childDom.innerHTML;
+            if (td.backgroundColor) {
+              tdDom.style.backgroundColor = td.backgroundColor;
+            }
+            trDom.append(tdDom);
+          }
+          tableDom.append(trDom);
+        }
+        clipboardDom2.append(tableDom);
+      } else if (element.type === ElementType.HYPERLINK) {
+        const a = document.createElement("a");
+        a.innerText = element.valueList.map((v) => v.value).join("");
+        if (element.url) {
+          a.href = element.url;
+        }
+        clipboardDom2.append(a);
+      } else if (element.type === ElementType.TITLE) {
+        const h = document.createElement(`h${titleOrderNumberMapping[element.level]}`);
+        const childDom = buildDom(element.valueList);
+        h.innerHTML = childDom.innerHTML;
+        clipboardDom2.append(h);
+      } else if (element.type === ElementType.LIST) {
+        const list = document.createElement(listTypeElementMapping[element.listType]);
+        if (element.listStyle) {
+          list.style.listStyleType = listStyleCSSMapping[element.listStyle];
+        }
+        const zipList = zipElementList(element.valueList);
+        const listElementListMap = splitListElement(zipList);
+        listElementListMap.forEach((listElementList) => {
+          const li = document.createElement("li");
+          const childDom = buildDom(listElementList);
+          li.innerHTML = childDom.innerHTML;
+          list.append(li);
+        });
+        clipboardDom2.append(list);
+      } else if (element.type === ElementType.IMAGE) {
+        const img = document.createElement("img");
+        if (element.value) {
+          img.src = element.value;
+          img.width = element.width;
+          img.height = element.height;
+        }
+        clipboardDom2.append(img);
+      } else if (element.type === ElementType.SEPARATOR) {
+        const hr = document.createElement("hr");
+        clipboardDom2.append(hr);
+      } else if (element.type === ElementType.CHECKBOX) {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        if ((_e = element.checkbox) == null ? void 0 : _e.value) {
+          checkbox.setAttribute("checked", "true");
+        }
+        clipboardDom2.append(checkbox);
+      } else if (element.type === ElementType.RADIO) {
+        const radio = document.createElement("input");
+        radio.type = "radio";
+        if ((_f = element.radio) == null ? void 0 : _f.value) {
+          radio.setAttribute("checked", "true");
+        }
+        clipboardDom2.append(radio);
+      } else if (element.type === ElementType.TAB) {
+        const tab2 = document.createElement("span");
+        tab2.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`;
+        clipboardDom2.append(tab2);
+      } else if (element.type === ElementType.CONTROL) {
+        const controlElement = document.createElement("span");
+        const childDom = buildDom(((_g = element.control) == null ? void 0 : _g.value) || []);
+        controlElement.innerHTML = childDom.innerHTML;
+        clipboardDom2.append(controlElement);
+      } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
+        let text = "";
+        if (element.type === ElementType.DATE) {
+          text = ((_h = element.valueList) == null ? void 0 : _h.map((v) => v.value).join("")) || "";
+        } else {
+          text = element.value;
+        }
+        if (!text)
+          continue;
+        const dom = convertElementToDom(element, editorOptions);
+        if (((_i = payload[e - 1]) == null ? void 0 : _i.type) === ElementType.TITLE) {
+          text = text.replace(/^\n/, "");
+        }
+        dom.innerText = text.replace(new RegExp(`${ZERO}`, "g"), "\n");
+        clipboardDom2.append(dom);
+      }
+    }
+    return clipboardDom2;
+  }
+  const clipboardDom = document.createElement("div");
+  const groupElementList = groupElementListByRowFlex(elementList);
+  for (let g = 0; g < groupElementList.length; g++) {
+    const elementGroupRowFlex = groupElementList[g];
+    const isDefaultRowFlex = !elementGroupRowFlex.rowFlex || elementGroupRowFlex.rowFlex === RowFlex.LEFT;
+    const rowFlexDom = document.createElement("div");
+    if (!isDefaultRowFlex) {
+      const firstElement = elementGroupRowFlex.data[0];
+      if (getIsBlockElement(firstElement)) {
+        rowFlexDom.style.display = "flex";
+        rowFlexDom.style.justifyContent = convertRowFlexToJustifyContent(firstElement.rowFlex);
+      } else {
+        rowFlexDom.style.textAlign = convertRowFlexToTextAlign(elementGroupRowFlex.rowFlex);
+      }
+    }
+    rowFlexDom.innerHTML = buildDom(elementGroupRowFlex.data).innerHTML;
+    if (!isDefaultRowFlex) {
+      clipboardDom.append(rowFlexDom);
+    } else {
+      rowFlexDom.childNodes.forEach((child) => {
+        clipboardDom.append(child.cloneNode(true));
+      });
+    }
+  }
+  return clipboardDom;
+}
+function convertTextNodeToElement(textNode) {
+  if (!textNode || textNode.nodeType !== 3)
+    return null;
+  const parentNode = textNode.parentNode;
+  const anchorNode = parentNode.nodeName === "FONT" ? parentNode.parentNode : parentNode;
+  const rowFlex = convertTextAlignToRowFlex(anchorNode);
+  const value = textNode.textContent;
+  const style = window.getComputedStyle(anchorNode);
+  if (!value || anchorNode.nodeName === "STYLE")
+    return null;
+  const element = {
+    value,
+    color: style.color,
+    bold: Number(style.fontWeight) > 500,
+    italic: style.fontStyle.includes("italic"),
+    size: Math.floor(parseFloat(style.fontSize))
+  };
+  if (anchorNode.nodeName === "SUB" || style.verticalAlign === "sub") {
+    element.type = ElementType.SUBSCRIPT;
+  } else if (anchorNode.nodeName === "SUP" || style.verticalAlign === "super") {
+    element.type = ElementType.SUPERSCRIPT;
+  }
+  if (rowFlex !== RowFlex.LEFT) {
+    element.rowFlex = rowFlex;
+  }
+  if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    element.highlight = style.backgroundColor;
+  }
+  if (style.textDecorationLine.includes("underline")) {
+    element.underline = true;
+  }
+  if (style.textDecorationLine.includes("line-through")) {
+    element.strikeout = true;
+  }
+  return element;
+}
+function getElementListByHTML(htmlText, options) {
+  const elementList = [];
+  function findTextNode(dom) {
+    if (dom.nodeType === 3) {
+      const element = convertTextNodeToElement(dom);
+      if (element) {
+        elementList.push(element);
+      }
+    } else if (dom.nodeType === 1) {
+      const childNodes = dom.childNodes;
+      for (let n = 0; n < childNodes.length; n++) {
+        const node = childNodes[n];
+        if (node.nodeName === "BR") {
+          elementList.push({
+            value: "\n"
+          });
+        } else if (node.nodeName === "A") {
+          const aElement = node;
+          const value = aElement.innerText;
+          if (value) {
+            elementList.push({
+              type: ElementType.HYPERLINK,
+              value: "",
+              valueList: [
+                {
+                  value
+                }
+              ],
+              url: aElement.href
+            });
+          }
+        } else if (/H[1-6]/.test(node.nodeName)) {
+          const hElement = node;
+          const valueList = getElementListByHTML(replaceHTMLElementTag(hElement, "div").outerHTML, options);
+          elementList.push({
+            value: "",
+            type: ElementType.TITLE,
+            level: titleNodeNameMapping[node.nodeName],
+            valueList
+          });
+          if (node.nextSibling && !INLINE_NODE_NAME.includes(node.nextSibling.nodeName)) {
+            elementList.push({
+              value: "\n"
+            });
+          }
+        } else if (node.nodeName === "UL" || node.nodeName === "OL") {
+          const listNode = node;
+          const listElement = {
+            value: "",
+            type: ElementType.LIST,
+            valueList: []
+          };
+          if (node.nodeName === "OL") {
+            listElement.listType = ListType.OL;
+          } else {
+            listElement.listType = ListType.UL;
+            listElement.listStyle = listNode.style.listStyleType;
+          }
+          listNode.querySelectorAll("li").forEach((li) => {
+            const liValueList = getElementListByHTML(li.innerHTML, options);
+            liValueList.forEach((list) => {
+              if (list.value === "\n") {
+                list.listWrap = true;
+              }
+            });
+            liValueList.unshift({
+              value: "\n"
+            });
+            listElement.valueList.push(...liValueList);
+          });
+          elementList.push(listElement);
+        } else if (node.nodeName === "HR") {
+          elementList.push({
+            value: "\n",
+            type: ElementType.SEPARATOR
+          });
+        } else if (node.nodeName === "IMG") {
+          const { src, width, height } = node;
+          if (src && width && height) {
+            elementList.push({
+              width,
+              height,
+              value: src,
+              type: ElementType.IMAGE
+            });
+          }
+        } else if (node.nodeName === "TABLE") {
+          const tableElement = node;
+          const element = {
+            type: ElementType.TABLE,
+            value: "\n",
+            colgroup: [],
+            trList: []
+          };
+          tableElement.querySelectorAll("tr").forEach((trElement) => {
+            const trHeightStr = window.getComputedStyle(trElement).height.replace("px", "");
+            const tr = {
+              height: Number(trHeightStr),
+              tdList: []
+            };
+            trElement.querySelectorAll("th,td").forEach((tdElement) => {
+              const tableCell = tdElement;
+              const valueList = getElementListByHTML(tableCell.innerHTML, options);
+              const td = {
+                colspan: tableCell.colSpan,
+                rowspan: tableCell.rowSpan,
+                value: valueList
+              };
+              if (tableCell.style.backgroundColor) {
+                td.backgroundColor = tableCell.style.backgroundColor;
+              }
+              tr.tdList.push(td);
+            });
+            element.trList.push(tr);
+          });
+          if (element.trList.length) {
+            const tdCount = element.trList[0].tdList.reduce((pre, cur) => pre + cur.colspan, 0);
+            const width = Math.ceil(options.innerWidth / tdCount);
+            for (let i = 0; i < tdCount; i++) {
+              element.colgroup.push({
+                width
+              });
+            }
+            elementList.push(element);
+          }
+        } else if (node.nodeName === "INPUT" && node.type === ControlComponent.CHECKBOX) {
+          elementList.push({
+            type: ElementType.CHECKBOX,
+            value: "",
+            checkbox: {
+              value: node.checked
+            }
+          });
+        } else if (node.nodeName === "INPUT" && node.type === ControlComponent.RADIO) {
+          elementList.push({
+            type: ElementType.RADIO,
+            value: "",
+            radio: {
+              value: node.checked
+            }
+          });
+        } else {
+          findTextNode(node);
+          if (node.nodeType === 1 && n !== childNodes.length - 1) {
+            const display = window.getComputedStyle(node).display;
+            if (display === "block") {
+              elementList.push({
+                value: "\n"
+              });
+            }
+          }
+        }
+      }
+    }
+  }
+  const clipboardDom = document.createElement("div");
+  clipboardDom.innerHTML = htmlText;
+  document.body.appendChild(clipboardDom);
+  const deleteNodes = [];
+  clipboardDom.childNodes.forEach((child) => {
+    var _a;
+    if (child.nodeType !== 1 && !((_a = child.textContent) == null ? void 0 : _a.trim())) {
+      deleteNodes.push(child);
+    }
+  });
+  deleteNodes.forEach((node) => node.remove());
+  findTextNode(clipboardDom);
+  clipboardDom.remove();
+  return elementList;
+}
+function getTextFromElementList(elementList) {
+  function buildText(payload) {
+    var _a, _b, _c, _d, _e;
+    let text = "";
+    for (let e = 0; e < payload.length; e++) {
+      const element = payload[e];
+      if (element.type === ElementType.TABLE) {
+        text += `
+`;
+        const trList = element.trList;
+        for (let t = 0; t < trList.length; t++) {
+          const tr = trList[t];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const tdText = buildText(zipElementList(td.value));
+            const isFirst = d === 0;
+            const isLast = tr.tdList.length - 1 === d;
+            text += `${!isFirst ? `  ` : ``}${tdText}${isLast ? `
+` : ``}`;
+          }
+        }
+      } else if (element.type === ElementType.TAB) {
+        text += `	`;
+      } else if (element.type === ElementType.HYPERLINK) {
+        text += element.valueList.map((v) => v.value).join("");
+      } else if (element.type === ElementType.TITLE) {
+        text += `${buildText(zipElementList(element.valueList))}`;
+      } else if (element.type === ElementType.LIST) {
+        const zipList = zipElementList(element.valueList);
+        const listElementListMap = splitListElement(zipList);
+        let ulListStyleText = "";
+        if (element.listType === ListType.UL) {
+          ulListStyleText = ulStyleMapping[element.listStyle];
+        }
+        listElementListMap.forEach((listElementList, listIndex) => {
+          const isLast = listElementListMap.size - 1 === listIndex;
+          text += `
+${ulListStyleText || `${listIndex + 1}.`}${buildText(listElementList)}${isLast ? `
+` : ``}`;
+        });
+      } else if (element.type === ElementType.CHECKBOX) {
+        text += ((_a = element.checkbox) == null ? void 0 : _a.value) ? `\u2611` : `\u25A1`;
+      } else if (element.type === ElementType.RADIO) {
+        text += ((_b = element.radio) == null ? void 0 : _b.value) ? `\u2609` : `\u25CB`;
+      } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
+        let textLike = "";
+        if (element.type === ElementType.CONTROL) {
+          textLike = ((_d = (_c = element.control.value) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "";
+        } else if (element.type === ElementType.DATE) {
+          textLike = ((_e = element.valueList) == null ? void 0 : _e.map((v) => v.value).join("")) || "";
+        } else {
+          textLike = element.value;
+        }
+        text += textLike.replace(new RegExp(`${ZERO}`, "g"), "\n");
+      }
+    }
+    return text;
+  }
+  return buildText(zipElementList(elementList));
+}
+function getSlimCloneElementList(elementList) {
+  return deepCloneOmitKeys(elementList, [
+    "metrics",
+    "style"
+  ]);
+}
+function getIsBlockElement(element) {
+  return !!(element == null ? void 0 : element.type) && (BLOCK_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE);
+}
+function replaceHTMLElementTag(oldDom, tagName) {
+  const newDom = document.createElement(tagName);
+  for (let i = 0; i < oldDom.attributes.length; i++) {
+    const attr = oldDom.attributes[i];
+    newDom.setAttribute(attr.name, attr.value);
+  }
+  newDom.innerHTML = oldDom.innerHTML;
+  return newDom;
+}
+function pickSurroundElementList(elementList) {
+  const surroundElementList = [];
+  for (let e = 0; e < elementList.length; e++) {
+    const element = elementList[e];
+    if (element.imgDisplay === ImageDisplay.SURROUND) {
+      surroundElementList.push(element);
+    }
+  }
+  return surroundElementList;
+}
+function deleteSurroundElementList(elementList, pageNo) {
+  var _a;
+  for (let s = elementList.length - 1; s >= 0; s--) {
+    const surroundElement = elementList[s];
+    if (((_a = surroundElement.imgFloatPosition) == null ? void 0 : _a.pageNo) === pageNo) {
+      elementList.splice(s, 1);
+    }
+  }
+}
+function setClipboardData(data2) {
+  localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
+    text: data2.text,
+    elementList: data2.elementList
+  }));
+}
+function getClipboardData() {
+  const clipboardText = localStorage.getItem(EDITOR_CLIPBOARD);
+  return clipboardText ? JSON.parse(clipboardText) : null;
+}
+function removeClipboardData() {
+  localStorage.removeItem(EDITOR_CLIPBOARD);
+}
+function writeClipboardItem(text, html, elementList) {
+  if (!text && !html && !elementList.length)
+    return;
+  const plainText = new Blob([text], { type: "text/plain" });
+  const htmlText = new Blob([html], { type: "text/html" });
+  if (window.ClipboardItem) {
+    const item = new ClipboardItem({
+      [plainText.type]: plainText,
+      [htmlText.type]: htmlText
+    });
+    window.navigator.clipboard.write([item]);
+  } else {
+    const fakeElement = document.createElement("div");
+    fakeElement.setAttribute("contenteditable", "true");
+    fakeElement.innerHTML = html;
+    document.body.append(fakeElement);
+    const selection = window.getSelection();
+    const range = document.createRange();
+    const br = document.createElement("span");
+    br.innerText = "\n";
+    fakeElement.append(br);
+    range.selectNodeContents(fakeElement);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(range);
+    document.execCommand("copy");
+    fakeElement.remove();
+  }
+  setClipboardData({ text, elementList });
+}
+function writeElementList(elementList, options) {
+  const clipboardDom = createDomFromElementList(elementList, options);
+  document.body.append(clipboardDom);
+  const text = clipboardDom.innerText;
+  clipboardDom.remove();
+  const html = clipboardDom.innerHTML;
+  if (!text && !html && !elementList.length)
+    return;
+  writeClipboardItem(text, html, zipElementList(elementList));
+}
+function getIsClipboardContainFile(clipboardData) {
+  let isFile = false;
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i];
+    if (item.kind === "file") {
+      isFile = true;
+      break;
+    }
+  }
+  return isFile;
+}
+function pasteElement(host, elementList) {
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex } = rangeManager.getRange();
+  const originalElementList = draw.getElementList();
+  if (~startIndex && !rangeManager.getIsSelectAll()) {
+    const anchorElement = originalElementList[startIndex];
+    if ((anchorElement == null ? void 0 : anchorElement.titleId) || (anchorElement == null ? void 0 : anchorElement.listId)) {
+      let start = 0;
+      while (start < elementList.length) {
+        const pasteElement2 = elementList[start];
+        if (anchorElement.titleId && /^\n/.test(pasteElement2.value)) {
+          break;
+        }
+        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement2.type)) {
+          elementList.splice(start, 1);
+          if (pasteElement2.valueList) {
+            for (let v = 0; v < pasteElement2.valueList.length; v++) {
+              const element = pasteElement2.valueList[v];
+              if (element.value === ZERO || element.value === "\n") {
+                continue;
+              }
+              elementList.splice(start, 0, element);
+              start++;
+            }
+          }
+          start--;
+        }
+        start++;
+      }
+    }
+    formatElementContext(originalElementList, elementList, startIndex, {
+      isBreakWhenWrap: true,
+      editorOptions: draw.getOptions()
+    });
+  }
+  draw.insertElementList(elementList);
+}
+function pasteHTML(host, htmlText) {
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const elementList = getElementListByHTML(htmlText, {
+    innerWidth: draw.getOriginalInnerWidth()
+  });
+  pasteElement(host, elementList);
+}
+function pasteImage(host, file) {
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  const fileReader = new FileReader();
+  fileReader.readAsDataURL(file);
+  fileReader.onload = () => {
+    const image = new Image();
+    const value = fileReader.result;
+    image.src = value;
+    image.onload = () => {
+      const imageElement = {
+        value,
+        type: ElementType.IMAGE,
+        width: image.width,
+        height: image.height
+      };
+      if (~startIndex) {
+        formatElementContext(elementList, [imageElement], startIndex, {
+          editorOptions: draw.getOptions()
+        });
+      }
+      draw.insertElementList([imageElement]);
+    };
+  };
+}
+function pasteByEvent(host, evt) {
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const clipboardData = evt.clipboardData;
+  if (!clipboardData)
+    return;
+  const { paste } = draw.getOverride();
+  if (paste) {
+    const overrideResult = paste(evt);
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
+  }
+  if (!getIsClipboardContainFile(clipboardData)) {
+    const clipboardText = clipboardData.getData("text");
+    const editorClipboardData = getClipboardData();
+    if (clipboardText === (editorClipboardData == null ? void 0 : editorClipboardData.text)) {
+      pasteElement(host, editorClipboardData.elementList);
+      return;
+    }
+  }
+  removeClipboardData();
+  let isHTML = false;
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i];
+    if (item.type === "text/html") {
+      isHTML = true;
+      break;
+    }
+  }
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i];
+    if (item.kind === "string") {
+      if (item.type === "text/plain" && !isHTML) {
+        item.getAsString((plainText) => {
+          host.input(plainText);
+        });
+        break;
+      }
+      if (item.type === "text/html" && isHTML) {
+        item.getAsString((htmlText) => {
+          pasteHTML(host, htmlText);
+        });
+        break;
+      }
+    } else if (item.kind === "file") {
+      if (item.type.includes("image")) {
+        const file = item.getAsFile();
+        if (file) {
+          pasteImage(host, file);
+        }
+      }
+    }
+  }
+}
+async function pasteByApi(host, options) {
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const { paste } = draw.getOverride();
+  if (paste) {
+    const overrideResult = paste();
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
+  }
+  const clipboardText = await navigator.clipboard.readText();
+  const editorClipboardData = getClipboardData();
+  if (clipboardText === (editorClipboardData == null ? void 0 : editorClipboardData.text)) {
+    pasteElement(host, editorClipboardData.elementList);
+    return;
+  }
+  removeClipboardData();
+  if (options == null ? void 0 : options.isPlainText) {
+    if (clipboardText) {
+      host.input(clipboardText);
+    }
+  } else {
+    const clipboardData = await navigator.clipboard.read();
+    let isHTML = false;
+    for (const item of clipboardData) {
+      if (item.types.includes("text/html")) {
+        isHTML = true;
+        break;
+      }
+    }
+    for (const item of clipboardData) {
+      if (item.types.includes("text/plain") && !isHTML) {
+        const textBlob = await item.getType("text/plain");
+        const text = await textBlob.text();
+        if (text) {
+          host.input(text);
+        }
+      } else if (item.types.includes("text/html") && isHTML) {
+        const htmlTextBlob = await item.getType("text/html");
+        const htmlText = await htmlTextBlob.text();
+        if (htmlText) {
+          pasteHTML(host, htmlText);
+        }
+      } else if (item.types.some((type) => type.startsWith("image/"))) {
+        const type = item.types.find((type2) => type2.startsWith("image/"));
+        const imageBlob = await item.getType(type);
+        pasteImage(host, imageBlob);
+      }
+    }
+  }
+}
+class CursorAgent {
+  constructor(draw, canvasEvent) {
+    this.draw = draw;
+    this.container = draw.getContainer();
+    this.canvasEvent = canvasEvent;
+    const agentCursorDom = document.createElement("textarea");
+    agentCursorDom.autocomplete = "off";
+    agentCursorDom.classList.add(`${EDITOR_PREFIX}-inputarea`);
+    agentCursorDom.innerText = "";
+    this.container.append(agentCursorDom);
+    this.agentCursorDom = agentCursorDom;
+    agentCursorDom.onkeydown = (evt) => this._keyDown(evt);
+    agentCursorDom.oninput = debounce(this._input.bind(this), 0);
+    agentCursorDom.onpaste = (evt) => this._paste(evt);
+    agentCursorDom.addEventListener("compositionstart", this._compositionstart.bind(this));
+    agentCursorDom.addEventListener("compositionend", this._compositionend.bind(this));
+  }
+  getAgentCursorDom() {
+    return this.agentCursorDom;
+  }
+  _keyDown(evt) {
+    this.canvasEvent.keydown(evt);
+  }
+  _input(evt) {
+    const data2 = evt.data;
+    if (!data2)
+      return;
+    this.canvasEvent.input(data2);
+  }
+  _paste(evt) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const clipboardData = evt.clipboardData;
+    if (!clipboardData)
+      return;
+    pasteByEvent(this.canvasEvent, evt);
+    evt.preventDefault();
+  }
+  _compositionstart() {
+    this.canvasEvent.compositionstart();
+  }
+  _compositionend(evt) {
+    this.canvasEvent.compositionend(evt);
+  }
+}
+class Cursor {
+  constructor(draw, canvasEvent) {
+    this.ANIMATION_CLASS = `${EDITOR_PREFIX}-cursor--animation`;
+    this.draw = draw;
+    this.container = draw.getContainer();
+    this.position = draw.getPosition();
+    this.options = draw.getOptions();
+    this.cursorDom = document.createElement("div");
+    this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor`);
+    this.container.append(this.cursorDom);
+    this.cursorAgent = new CursorAgent(draw, canvasEvent);
+    this.blinkTimeout = null;
+  }
+  getCursorDom() {
+    return this.cursorDom;
+  }
+  getAgentDom() {
+    return this.cursorAgent.getAgentCursorDom();
+  }
+  getAgentIsActive() {
+    return this.getAgentDom() === document.activeElement;
+  }
+  getAgentDomValue() {
+    return this.getAgentDom().value;
+  }
+  clearAgentDomValue() {
+    this.getAgentDom().value = "";
+  }
+  _blinkStart() {
+    this.cursorDom.classList.add(this.ANIMATION_CLASS);
+  }
+  _blinkStop() {
+    this.cursorDom.classList.remove(this.ANIMATION_CLASS);
+  }
+  _setBlinkTimeout() {
+    this._clearBlinkTimeout();
+    this.blinkTimeout = window.setTimeout(() => {
+      this._blinkStart();
+    }, 500);
+  }
+  _clearBlinkTimeout() {
+    if (this.blinkTimeout) {
+      this._blinkStop();
+      window.clearTimeout(this.blinkTimeout);
+      this.blinkTimeout = null;
+    }
+  }
+  drawCursor(payload) {
+    let cursorPosition = this.position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { scale, cursor } = this.options;
+    const { color, width, isShow = true, isBlink = true, isFocus = true, hitLineStartIndex } = { ...cursor, ...payload };
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    if (hitLineStartIndex) {
+      const positionList = this.position.getPositionList();
+      cursorPosition = positionList[hitLineStartIndex];
+    }
+    const { metrics, coordinate: { leftTop, rightTop }, ascent, pageNo } = cursorPosition;
+    const zoneManager = this.draw.getZone();
+    const curPageNo = zoneManager.isMainActive() ? pageNo : this.draw.getPageNo();
+    const preY = curPageNo * (height + pageGap);
+    const defaultOffsetHeight = CURSOR_AGENT_OFFSET_HEIGHT * scale;
+    const increaseHeight = Math.min(metrics.height / 4, defaultOffsetHeight);
+    const cursorHeight = metrics.height + increaseHeight * 2;
+    const agentCursorDom = this.cursorAgent.getAgentCursorDom();
+    if (isFocus) {
+      setTimeout(() => {
+        if (document.activeElement !== agentCursorDom) {
+          agentCursorDom.focus();
+          agentCursorDom.setSelectionRange(0, 0);
+        }
+      });
+    }
+    const descent = metrics.boundingBoxDescent < 0 ? 0 : metrics.boundingBoxDescent;
+    const cursorTop = leftTop[1] + ascent + descent - (cursorHeight - increaseHeight) + preY;
+    const cursorLeft = hitLineStartIndex ? leftTop[0] : rightTop[0];
+    agentCursorDom.style.left = `${cursorLeft}px`;
+    agentCursorDom.style.top = `${cursorTop + cursorHeight - defaultOffsetHeight}px`;
+    if (!isShow) {
+      this.recoveryCursor();
+      return;
+    }
+    const isReadonly = this.draw.isReadonly();
+    this.cursorDom.style.width = `${width * scale}px`;
+    this.cursorDom.style.backgroundColor = color;
+    this.cursorDom.style.left = `${cursorLeft}px`;
+    this.cursorDom.style.top = `${cursorTop}px`;
+    this.cursorDom.style.display = isReadonly ? "none" : "block";
+    this.cursorDom.style.height = `${cursorHeight}px`;
+    if (isBlink) {
+      this._setBlinkTimeout();
+    } else {
+      this._clearBlinkTimeout();
+    }
+  }
+  recoveryCursor() {
+    this.cursorDom.style.display = "none";
+    this._clearBlinkTimeout();
+  }
+  moveCursorToVisible(payload) {
+    const { cursorPosition, direction } = payload;
+    if (!cursorPosition || !direction)
+      return;
+    const { pageNo, coordinate: { leftTop, leftBottom } } = cursorPosition;
+    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
+    const isUp = direction === MoveDirection.UP;
+    const x = leftBottom[0];
+    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY;
+    const scrollContainer = findScrollContainer(this.container);
+    const rect = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    if (scrollContainer === document.documentElement) {
+      rect.right = window.innerWidth;
+      rect.bottom = window.innerHeight;
+    } else {
+      const { left: left2, right: right2, top, bottom } = scrollContainer.getBoundingClientRect();
+      rect.left = left2;
+      rect.right = right2;
+      rect.top = top;
+      rect.bottom = bottom;
+    }
+    const { maskMargin } = this.options;
+    rect.top += maskMargin[0];
+    rect.bottom -= maskMargin[2];
+    if (!(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)) {
+      const { scrollLeft, scrollTop } = scrollContainer;
+      isUp ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y)) : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom);
+    }
+  }
+}
+var MouseEventButton;
+(function(MouseEventButton2) {
+  MouseEventButton2[MouseEventButton2["LEFT"] = 0] = "LEFT";
+  MouseEventButton2[MouseEventButton2["CENTER"] = 1] = "CENTER";
+  MouseEventButton2[MouseEventButton2["RIGHT"] = 2] = "RIGHT";
+})(MouseEventButton || (MouseEventButton = {}));
+const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
+const isIOS = typeof navigator !== "undefined" && /iPad|iPhone/.test(navigator.userAgent);
+function isMod(evt) {
+  return isApple ? evt.metaKey : evt.ctrlKey;
+}
+var KeyMap;
+(function(KeyMap2) {
+  KeyMap2["Delete"] = "Delete";
+  KeyMap2["Backspace"] = "Backspace";
+  KeyMap2["Enter"] = "Enter";
+  KeyMap2["Left"] = "ArrowLeft";
+  KeyMap2["Right"] = "ArrowRight";
+  KeyMap2["Up"] = "ArrowUp";
+  KeyMap2["Down"] = "ArrowDown";
+  KeyMap2["ESC"] = "Escape";
+  KeyMap2["TAB"] = "Tab";
+  KeyMap2["META"] = "Meta";
+  KeyMap2["LEFT_BRACKET"] = "[";
+  KeyMap2["RIGHT_BRACKET"] = "]";
+  KeyMap2["COMMA"] = ",";
+  KeyMap2["PERIOD"] = ".";
+  KeyMap2["LEFT_ANGLE_BRACKET"] = "<";
+  KeyMap2["RIGHT_ANGLE_BRACKET"] = ">";
+  KeyMap2["EQUAL"] = "=";
+  KeyMap2["MINUS"] = "-";
+  KeyMap2["PLUS"] = "+";
+  KeyMap2["A"] = "a";
+  KeyMap2["B"] = "b";
+  KeyMap2["C"] = "c";
+  KeyMap2["D"] = "d";
+  KeyMap2["E"] = "e";
+  KeyMap2["F"] = "f";
+  KeyMap2["G"] = "g";
+  KeyMap2["H"] = "h";
+  KeyMap2["I"] = "i";
+  KeyMap2["J"] = "j";
+  KeyMap2["K"] = "k";
+  KeyMap2["L"] = "l";
+  KeyMap2["M"] = "m";
+  KeyMap2["N"] = "n";
+  KeyMap2["O"] = "o";
+  KeyMap2["P"] = "p";
+  KeyMap2["Q"] = "q";
+  KeyMap2["R"] = "r";
+  KeyMap2["S"] = "s";
+  KeyMap2["T"] = "t";
+  KeyMap2["U"] = "u";
+  KeyMap2["V"] = "v";
+  KeyMap2["W"] = "w";
+  KeyMap2["X"] = "x";
+  KeyMap2["Y"] = "y";
+  KeyMap2["Z"] = "z";
+  KeyMap2["A_UPPERCASE"] = "A";
+  KeyMap2["B_UPPERCASE"] = "B";
+  KeyMap2["C_UPPERCASE"] = "C";
+  KeyMap2["D_UPPERCASE"] = "D";
+  KeyMap2["E_UPPERCASE"] = "E";
+  KeyMap2["F_UPPERCASE"] = "F";
+  KeyMap2["G_UPPERCASE"] = "G";
+  KeyMap2["H_UPPERCASE"] = "H";
+  KeyMap2["I_UPPERCASE"] = "I";
+  KeyMap2["J_UPPERCASE"] = "J";
+  KeyMap2["K_UPPERCASE"] = "K";
+  KeyMap2["L_UPPERCASE"] = "L";
+  KeyMap2["M_UPPERCASE"] = "M";
+  KeyMap2["N_UPPERCASE"] = "N";
+  KeyMap2["O_UPPERCASE"] = "O";
+  KeyMap2["P_UPPERCASE"] = "P";
+  KeyMap2["Q_UPPERCASE"] = "Q";
+  KeyMap2["R_UPPERCASE"] = "R";
+  KeyMap2["S_UPPERCASE"] = "S";
+  KeyMap2["T_UPPERCASE"] = "T";
+  KeyMap2["U_UPPERCASE"] = "U";
+  KeyMap2["V_UPPERCASE"] = "V";
+  KeyMap2["W_UPPERCASE"] = "W";
+  KeyMap2["X_UPPERCASE"] = "X";
+  KeyMap2["Y_UPPERCASE"] = "Y";
+  KeyMap2["Z_UPPERCASE"] = "Z";
+  KeyMap2["ZERO"] = "0";
+  KeyMap2["ONE"] = "1";
+  KeyMap2["TWO"] = "2";
+  KeyMap2["THREE"] = "3";
+  KeyMap2["FOUR"] = "4";
+  KeyMap2["FIVE"] = "5";
+  KeyMap2["SIX"] = "6";
+  KeyMap2["SEVEN"] = "7";
+  KeyMap2["EIGHT"] = "8";
+  KeyMap2["NINE"] = "9";
+})(KeyMap || (KeyMap = {}));
+class CheckboxControl {
+  constructor(element, control) {
+    this.element = element;
+    this.control = control;
+  }
+  setElement(element) {
+    this.element = element;
+  }
+  getElement() {
+    return this.element;
+  }
+  getCode() {
+    var _a;
+    return ((_a = this.element.control) == null ? void 0 : _a.code) || null;
+  }
+  getValue() {
+    const elementList = this.control.getElementList();
+    const { startIndex } = this.control.getRange();
+    const startElement = elementList[startIndex];
+    const data2 = [];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      if (preElement.controlComponent === ControlComponent.VALUE) {
+        data2.unshift(preElement);
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      if (nextElement.controlComponent === ControlComponent.VALUE) {
+        data2.push(nextElement);
+      }
+      nextIndex++;
+    }
+    return data2;
+  }
+  setValue() {
+    return -1;
+  }
+  setSelect(codes, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return;
+    }
+    const { control } = this.element;
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      if (preElement.controlComponent === ControlComponent.CHECKBOX) {
+        const checkbox = preElement.checkbox;
+        checkbox.value = codes.includes(checkbox.code);
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      if (nextElement.controlComponent === ControlComponent.CHECKBOX) {
+        const checkbox = nextElement.checkbox;
+        checkbox.value = codes.includes(checkbox.code);
+      }
+      nextIndex++;
+    }
+    control.code = codes.join(",");
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
+  }
+  keydown(evt) {
+    if (this.control.getIsDisabledControl()) {
+      return null;
+    }
+    const range = this.control.getRange();
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = range;
+    if (evt.key === KeyMap.Backspace || evt.key === KeyMap.Delete) {
+      return this.control.removeControl(startIndex);
+    }
+    return endIndex;
+  }
+  cut() {
+    return -1;
+  }
+}
+class RadioControl extends CheckboxControl {
+  setSelect(codes, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return;
+    }
+    const { control } = this.element;
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      if (preElement.controlComponent === ControlComponent.RADIO) {
+        const radio = preElement.radio;
+        radio.value = codes.includes(radio.code);
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      if (nextElement.controlComponent === ControlComponent.RADIO) {
+        const radio = nextElement.radio;
+        radio.value = codes.includes(radio.code);
+      }
+      nextIndex++;
+    }
+    control.code = codes.join(",");
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
+  }
+}
+function setRangeCache(host) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const rangeManager = draw.getRange();
+  host.isAllowDrag = true;
+  host.cacheRange = deepClone(rangeManager.getRange());
+  host.cacheElementList = draw.getElementList();
+  host.cachePositionList = position.getPositionList();
+  host.cachePositionContext = position.getPositionContext();
+}
+function hitCheckbox(element, draw) {
+  const { checkbox, control } = element;
+  if (!control) {
+    draw.getCheckboxParticle().setSelect(element);
+  } else {
+    const codes = (control == null ? void 0 : control.code) ? control.code.split(",") : [];
+    if (checkbox == null ? void 0 : checkbox.value) {
+      const codeIndex = codes.findIndex((c) => c === checkbox.code);
+      codes.splice(codeIndex, 1);
+    } else {
+      if (checkbox == null ? void 0 : checkbox.code) {
+        codes.push(checkbox.code);
+      }
+    }
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof CheckboxControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
+function hitRadio(element, draw) {
+  const { radio, control } = element;
+  if (!control) {
+    draw.getRadioParticle().setSelect(element);
+  } else {
+    const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof RadioControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
+function mousedown(evt, host) {
+  var _a, _b;
+  if (evt.button === MouseEventButton.RIGHT)
+    return;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  const rangeManager = draw.getRange();
+  const position = draw.getPosition();
+  if (!host.isAllowDrag) {
+    const range = rangeManager.getRange();
+    if (!isReadonly && range.startIndex !== range.endIndex) {
+      const isPointInRange = rangeManager.getIsPointInRange(evt.offsetX, evt.offsetY);
+      if (isPointInRange) {
+        setRangeCache(host);
+        return;
+      }
+    }
+  }
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  host.isAllowSelection = true;
+  const oldPositionContext = deepClone(position.getPositionContext());
+  const positionResult = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  if (!positionResult)
+    return;
+  const { index: index2, isDirectHit, isCheckbox, isRadio, isImage, isTable, tdValueIndex, hitLineStartIndex } = positionResult;
+  host.mouseDownStartPosition = {
+    ...positionResult,
+    index: isTable ? tdValueIndex : index2,
+    x: evt.offsetX,
+    y: evt.offsetY
+  };
+  const elementList = draw.getElementList();
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  const curElement = elementList[curIndex];
+  const isDirectHitImage = !!(isDirectHit && isImage);
+  const isDirectHitCheckbox = !!(isDirectHit && isCheckbox);
+  const isDirectHitRadio = !!(isDirectHit && isRadio);
+  if (~index2) {
+    let startIndex = curIndex;
+    let endIndex = curIndex;
+    if (evt.shiftKey) {
+      const { startIndex: oldStartIndex } = rangeManager.getRange();
+      if (~oldStartIndex) {
+        const newPositionContext = position.getPositionContext();
+        if (newPositionContext.tdId === oldPositionContext.tdId) {
+          if (curIndex > oldStartIndex) {
+            startIndex = oldStartIndex;
+          } else {
+            endIndex = oldStartIndex;
+          }
+        }
+      }
+    }
+    rangeManager.setRange(startIndex, endIndex);
+    position.setCursorPosition(positionList[curIndex]);
+    if (isDirectHitCheckbox && !isReadonly) {
+      hitCheckbox(curElement, draw);
+    } else if (isDirectHitRadio && !isReadonly) {
+      hitRadio(curElement, draw);
+    } else if (curElement.controlComponent === ControlComponent.VALUE && (((_a = curElement.control) == null ? void 0 : _a.type) === ControlType.CHECKBOX || ((_b = curElement.control) == null ? void 0 : _b.type) === ControlType.RADIO)) {
+      let preIndex = curIndex;
+      while (preIndex > 0) {
+        const preElement = elementList[preIndex];
+        if (preElement.controlComponent === ControlComponent.CHECKBOX) {
+          hitCheckbox(preElement, draw);
+          break;
+        } else if (preElement.controlComponent === ControlComponent.RADIO) {
+          hitRadio(preElement, draw);
+          break;
+        }
+        preIndex--;
+      }
+    } else {
+      draw.render({
+        curIndex,
+        isCompute: false,
+        isSubmitHistory: false,
+        isSetCursor: !isDirectHitImage && !isDirectHitCheckbox && !isDirectHitRadio
+      });
+    }
+    if (hitLineStartIndex) {
+      host.getDraw().getCursor().drawCursor({
+        hitLineStartIndex
+      });
+    }
+  }
+  const previewer = draw.getPreviewer();
+  previewer.clearResizer();
+  if (isDirectHitImage) {
+    const previewerDrawOption = {
+      dragDisable: isReadonly || !curElement.controlId && draw.getMode() === EditorMode.FORM
+    };
+    if (curElement.type === ElementType.LATEX) {
+      previewerDrawOption.mime = "svg";
+      previewerDrawOption.srcKey = "laTexSVG";
+    }
+    previewer.drawResizer(curElement, positionList[curIndex], previewerDrawOption);
+    draw.getCursor().drawCursor({
+      isShow: false
+    });
+    setRangeCache(host);
+    if (curElement.imgDisplay === ImageDisplay.SURROUND || curElement.imgDisplay === ImageDisplay.FLOAT_TOP || curElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+      draw.getImageParticle().createFloatImage(curElement);
+    }
+  }
+  const tableTool = draw.getTableTool();
+  tableTool.dispose();
+  if (isTable && !isReadonly && draw.getMode() !== EditorMode.FORM) {
+    tableTool.render();
+  }
+  const hyperlinkParticle = draw.getHyperlinkParticle();
+  hyperlinkParticle.clearHyperlinkPopup();
+  if (curElement.type === ElementType.HYPERLINK) {
+    if (isMod(evt)) {
+      hyperlinkParticle.openHyperlink(curElement);
+    } else {
+      hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+    }
+  }
+  const dateParticle = draw.getDateParticle();
+  dateParticle.clearDatePicker();
+  if (curElement.type === ElementType.DATE && !isReadonly) {
+    dateParticle.renderDatePicker(curElement, positionList[curIndex]);
+  }
+}
+function createDragId(element) {
+  const dragId = getUUID();
+  Reflect.set(element, "dragId", dragId);
+  return dragId;
+}
+function getElementIndexByDragId(dragId, elementList) {
+  return elementList.findIndex((el) => el.dragId === dragId);
+}
+function moveImgPosition(element, evt, host) {
+  const draw = host.getDraw();
+  if (element.imgDisplay === ImageDisplay.SURROUND || element.imgDisplay === ImageDisplay.FLOAT_TOP || element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+    const moveX = evt.offsetX - host.mouseDownStartPosition.x;
+    const moveY = evt.offsetY - host.mouseDownStartPosition.y;
+    const imgFloatPosition = element.imgFloatPosition;
+    element.imgFloatPosition = {
+      x: imgFloatPosition.x + moveX,
+      y: imgFloatPosition.y + moveY,
+      pageNo: draw.getPageNo()
+    };
+  }
+  draw.getImageParticle().destroyFloatImage();
+}
+function mouseup(evt, host) {
+  var _a, _b, _c, _d;
+  if (host.isAllowDrop) {
+    const draw = host.getDraw();
+    if (draw.isReadonly() || draw.isDisabled()) {
+      host.mousedown(evt);
+      return;
+    }
+    const position = draw.getPosition();
+    const positionList = position.getPositionList();
+    const positionContext = position.getPositionContext();
+    const rangeManager = draw.getRange();
+    const cacheRange = host.cacheRange;
+    const cacheElementList = host.cacheElementList;
+    const cachePositionList = host.cachePositionList;
+    const range = rangeManager.getRange();
+    const isCacheRangeCollapsed = cacheRange.startIndex === cacheRange.endIndex;
+    const cacheStartIndex = isCacheRangeCollapsed ? cacheRange.startIndex - 1 : cacheRange.startIndex;
+    const cacheEndIndex = cacheRange.endIndex;
+    if (range.startIndex >= cacheStartIndex && range.endIndex <= cacheEndIndex && ((_a = host.cachePositionContext) == null ? void 0 : _a.tdId) === positionContext.tdId) {
+      draw.clearSideEffect();
+      let isSubmitHistory = false;
+      let isCompute = false;
+      if (isCacheRangeCollapsed) {
+        const dragElement = cacheElementList[cacheEndIndex];
+        if (dragElement.type === ElementType.IMAGE || dragElement.type === ElementType.LATEX) {
+          moveImgPosition(dragElement, evt, host);
+          if (dragElement.imgDisplay === ImageDisplay.SURROUND || dragElement.imgDisplay === ImageDisplay.FLOAT_TOP || dragElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+            draw.getPreviewer().drawResizer(dragElement);
+            isSubmitHistory = true;
+          } else {
+            const cachePosition = cachePositionList[cacheEndIndex];
+            draw.getPreviewer().drawResizer(dragElement, cachePosition);
+          }
+          isCompute = dragElement.imgDisplay === ImageDisplay.SURROUND;
+        }
+      }
+      rangeManager.replaceRange({
+        ...cacheRange
+      });
+      draw.render({
+        isCompute,
+        isSubmitHistory,
+        isSetCursor: false
+      });
+      return;
+    }
+    const dragElementList = cacheElementList.slice(cacheStartIndex + 1, cacheEndIndex + 1);
+    const isContainControl = dragElementList.find((element) => element.controlId);
+    if (isContainControl) {
+      const cacheStartElement2 = cacheElementList[cacheStartIndex + 1];
+      const cacheEndElement2 = cacheElementList[cacheEndIndex];
+      const isAllowDragControl = (!cacheStartElement2.controlId || cacheStartElement2.controlComponent === ControlComponent.PREFIX) && (!cacheEndElement2.controlId || cacheEndElement2.controlComponent === ControlComponent.POSTFIX) || cacheStartElement2.controlId === cacheEndElement2.controlId && cacheStartElement2.controlComponent === ControlComponent.PREFIX && cacheEndElement2.controlComponent === ControlComponent.POSTFIX || ((_b = cacheStartElement2.control) == null ? void 0 : _b.type) === ControlType.TEXT && cacheStartElement2.controlComponent === ControlComponent.VALUE && ((_c = cacheEndElement2.control) == null ? void 0 : _c.type) === ControlType.TEXT && cacheEndElement2.controlComponent === ControlComponent.VALUE;
+      if (!isAllowDragControl) {
+        draw.render({
+          curIndex: range.startIndex,
+          isCompute: false,
+          isSubmitHistory: false
+        });
+        return;
+      }
+    }
+    const control = draw.getControl();
+    const elementList = draw.getElementList();
+    const isOmitControlAttr = !isContainControl || !!elementList[range.startIndex].controlId || !control.getIsElementListContainFullControl(dragElementList);
+    const editorOptions = draw.getOptions();
+    const replaceElementList = dragElementList.map((el) => {
+      if (!el.type || el.type === ElementType.TEXT) {
+        const newElement = {
+          value: el.value
+        };
+        const copyAttr = EDITOR_ELEMENT_STYLE_ATTR;
+        if (!isOmitControlAttr) {
+          copyAttr.push(...CONTROL_CONTEXT_ATTR);
+        }
+        copyAttr.forEach((attr) => {
+          const value = el[attr];
+          if (value !== void 0) {
+            newElement[attr] = value;
+          }
+        });
+        return newElement;
+      } else {
+        let newElement = deepClone(el);
+        if (isOmitControlAttr) {
+          newElement = omitObject(newElement, CONTROL_CONTEXT_ATTR);
+        }
+        formatElementList([newElement], {
+          isHandleFirstElement: false,
+          editorOptions
+        });
+        return newElement;
+      }
+    });
+    formatElementContext(elementList, replaceElementList, range.startIndex, {
+      editorOptions: draw.getOptions()
+    });
+    const cacheStartElement = cacheElementList[cacheStartIndex];
+    const cacheStartPosition = cachePositionList[cacheStartIndex];
+    const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex]);
+    const cacheRangeEndId = createDragId(cacheElementList[cacheEndIndex]);
+    const replaceLength = replaceElementList.length;
+    let rangeStart = range.startIndex;
+    let rangeEnd = rangeStart + replaceLength;
+    const activeControl = control.getActiveControl();
+    if (activeControl && cacheElementList[rangeStart].controlComponent !== ControlComponent.POSTFIX) {
+      rangeEnd = activeControl.setValue(replaceElementList);
+      rangeStart = rangeEnd - replaceLength;
+    } else {
+      draw.spliceElementList(elementList, rangeStart + 1, 0, ...replaceElementList);
+    }
+    if (!~rangeEnd) {
+      draw.render({
+        isSetCursor: false
+      });
+      return;
+    }
+    const rangeStartId = createDragId(elementList[rangeStart]);
+    const rangeEndId = createDragId(elementList[rangeEnd]);
+    const cacheRangeStartIndex = getElementIndexByDragId(cacheRangeStartId, cacheElementList);
+    const cacheRangeEndIndex = getElementIndexByDragId(cacheRangeEndId, cacheElementList);
+    const cacheEndElement = cacheElementList[cacheRangeEndIndex];
+    if (cacheEndElement.controlId && cacheEndElement.controlComponent !== ControlComponent.POSTFIX) {
+      rangeManager.replaceRange({
+        ...cacheRange,
+        startIndex: cacheRangeStartIndex,
+        endIndex: cacheRangeEndIndex
+      });
+      (_d = control.getActiveControl()) == null ? void 0 : _d.cut();
+    } else {
+      draw.spliceElementList(cacheElementList, cacheRangeStartIndex + 1, cacheRangeEndIndex - cacheRangeStartIndex);
+    }
+    const startElement = elementList[range.startIndex];
+    const startPosition = positionList[range.startIndex];
+    let positionContextIndex = positionContext.index;
+    if (positionContextIndex) {
+      if (startElement.tableId && !cacheStartElement.tableId) {
+        if (cacheStartPosition.index < positionContextIndex) {
+          positionContextIndex -= replaceLength;
+        }
+      } else if (!startElement.tableId && cacheStartElement.tableId) {
+        if (startPosition.index < positionContextIndex) {
+          positionContextIndex += replaceLength;
+        }
+      }
+      position.setPositionContext({
+        ...positionContext,
+        index: positionContextIndex
+      });
+    }
+    const rangeStartIndex = getElementIndexByDragId(rangeStartId, elementList);
+    const rangeEndIndex = getElementIndexByDragId(rangeEndId, elementList);
+    rangeManager.setRange(isCacheRangeCollapsed ? rangeEndIndex : rangeStartIndex, rangeEndIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
+    draw.clearSideEffect();
+    let imgElement = null;
+    if (isCacheRangeCollapsed) {
+      const elementList2 = draw.getElementList();
+      const dragElement = elementList2[rangeEndIndex];
+      if (dragElement.type === ElementType.IMAGE || dragElement.type === ElementType.LATEX) {
+        moveImgPosition(dragElement, evt, host);
+        imgElement = dragElement;
+      }
+    }
+    draw.render({
+      isSetCursor: false
+    });
+    if (imgElement) {
+      if (imgElement.imgDisplay === ImageDisplay.SURROUND || imgElement.imgDisplay === ImageDisplay.FLOAT_TOP || imgElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+        draw.getPreviewer().drawResizer(imgElement);
+      } else {
+        const dragPositionList = position.getPositionList();
+        const dragPosition = dragPositionList[rangeEndIndex];
+        draw.getPreviewer().drawResizer(imgElement, dragPosition);
+      }
+    }
+  } else if (host.isAllowDrag) {
+    host.mousedown(evt);
+  }
+}
+function mouseleave(evt, host) {
+  const draw = host.getDraw();
+  const pageContainer = draw.getPageContainer();
+  const { x, y, width, height } = pageContainer.getBoundingClientRect();
+  if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height) {
+    return;
+  }
+  host.setIsAllowSelection(false);
+}
+function mousemove(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  if (host.isAllowDrag) {
+    const x = evt.offsetX;
+    const y = evt.offsetY;
+    const { startIndex: startIndex2, endIndex: endIndex2 } = host.cacheRange;
+    const positionList = host.cachePositionList;
+    for (let p = startIndex2 + 1; p <= endIndex2; p++) {
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
+        return;
+      }
+    }
+    const cacheStartIndex = (_a = host.cacheRange) == null ? void 0 : _a.startIndex;
+    if (cacheStartIndex) {
+      const dragElement = host.cacheElementList[cacheStartIndex];
+      if ((dragElement == null ? void 0 : dragElement.type) === ElementType.IMAGE && (dragElement.imgDisplay === ImageDisplay.SURROUND || dragElement.imgDisplay === ImageDisplay.FLOAT_TOP || dragElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM)) {
+        draw.getPreviewer().clearResizer();
+        draw.getImageParticle().dragFloatImage(evt.movementX, evt.movementY);
+      }
+    }
+    host.dragover(evt);
+    host.isAllowDrop = true;
+    return;
+  }
+  if (!host.isAllowSelection || !host.mouseDownStartPosition)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const positionResult = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  if (!~positionResult.index)
+    return;
+  const { index: index2, isTable, tdValueIndex, tdIndex, trIndex, tableId } = positionResult;
+  const { index: startIndex, isTable: startIsTable, tdIndex: startTdIndex, trIndex: startTrIndex, tableId: startTableId } = host.mouseDownStartPosition;
+  const endIndex = isTable ? tdValueIndex : index2;
+  const rangeManager = draw.getRange();
+  if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
+    rangeManager.setRange(endIndex, endIndex, tableId, startTdIndex, tdIndex, startTrIndex, trIndex);
+  } else {
+    let end = ~endIndex ? endIndex : 0;
+    if ((startIsTable || isTable) && startTableId !== tableId)
+      return;
+    let start = startIndex;
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+    if (start === end)
+      return;
+    const elementList = draw.getElementList();
+    const startElement = elementList[start + 1];
+    const endElement = elementList[end];
+    if ((startElement == null ? void 0 : startElement.controlComponent) === ControlComponent.PLACEHOLDER && (endElement == null ? void 0 : endElement.controlComponent) === ControlComponent.PLACEHOLDER && startElement.controlId === endElement.controlId) {
+      return;
+    }
+    rangeManager.setRange(start, end);
+  }
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  });
+}
+function backspace(evt, host) {
+  const draw = host.getDraw();
+  if (draw.isReadonly())
+    return;
+  const rangeManager = draw.getRange();
+  if (!rangeManager.getIsCanInput())
+    return;
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange();
+  const control = draw.getControl();
+  let curIndex;
+  if (isCrossRowCol) {
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    let isDeleted = false;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1);
+          isDeleted = true;
+        }
+      }
+    }
+    curIndex = isDeleted ? 0 : null;
+  } else if (control.getActiveControl() && control.getIsRangeCanCaptureEvent()) {
+    curIndex = control.keydown(evt);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    const isCollapsed = rangeManager.getIsCollapsed();
+    const elementList = draw.getElementList();
+    if (isCollapsed && index2 === 0) {
+      const firstElement = elementList[index2];
+      if (firstElement.value === ZERO) {
+        if (firstElement.listId) {
+          draw.getListParticle().unsetList();
+        }
+        evt.preventDefault();
+        return;
+      }
+    }
+    const startElement = elementList[startIndex];
+    if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
+      const rowFlexElementList = rangeManager.getRangeRowElementList();
+      if (rowFlexElementList) {
+        const preElement = elementList[startIndex - 1];
+        rowFlexElementList.forEach((element) => {
+          element.rowFlex = preElement == null ? void 0 : preElement.rowFlex;
+        });
+      }
+    }
+    if (!isCollapsed) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      draw.spliceElementList(elementList, index2, 1);
+    }
+    curIndex = isCollapsed ? index2 - 1 : startIndex;
+  }
+  draw.getGlobalEvent().setCanvasEventAbility();
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex);
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex
+    });
+  }
+}
+function del(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  if (draw.isReadonly())
+    return;
+  const rangeManager = draw.getRange();
+  if (!rangeManager.getIsCanInput())
+    return;
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  const control = draw.getControl();
+  let curIndex;
+  if (isCrossRowCol) {
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    let isDeleted = false;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1);
+          isDeleted = true;
+        }
+      }
+    }
+    curIndex = isDeleted ? 0 : null;
+  } else if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    curIndex = control.keydown(evt);
+  } else if ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) {
+    curIndex = control.removeControl(endIndex + 1);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    const positionContext = position.getPositionContext();
+    if (positionContext.isDirectHit && positionContext.isImage) {
+      draw.spliceElementList(elementList, index2, 1);
+      curIndex = index2 - 1;
+    } else {
+      const isCollapsed = rangeManager.getIsCollapsed();
+      if (!isCollapsed) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+      } else {
+        if (!elementList[index2 + 1])
+          return;
+        draw.spliceElementList(elementList, index2 + 1, 1);
+      }
+      curIndex = isCollapsed ? index2 : startIndex;
+    }
+  }
+  draw.getGlobalEvent().setCanvasEventAbility();
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex);
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex
+    });
+  }
+}
+function enter(evt, host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  if (draw.isReadonly())
+    return;
+  const rangeManager = draw.getRange();
+  if (!rangeManager.getIsCanInput())
+    return;
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = rangeManager.getIsCollapsed();
+  const elementList = draw.getElementList();
+  const startElement = elementList[startIndex];
+  const endElement = elementList[endIndex];
+  if (isCollapsed && endElement.listId && endElement.value === ZERO && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.listId) !== endElement.listId) {
+    draw.getListParticle().unsetList();
+    return;
+  }
+  const enterText = {
+    value: ZERO
+  };
+  if (evt.shiftKey && startElement.listId) {
+    enterText.listWrap = true;
+  }
+  formatElementContext(elementList, [enterText], startIndex, {
+    isBreakWhenWrap: true,
+    editorOptions: draw.getOptions()
+  });
+  if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
+    const copyElement = getAnchorElement(elementList, endIndex);
+    if (copyElement) {
+      const copyAttr = [...EDITOR_ROW_ATTR];
+      if (copyElement.controlComponent !== ControlComponent.POSTFIX) {
+        copyAttr.push(...EDITOR_ELEMENT_STYLE_ATTR);
+      }
+      copyAttr.forEach((attr) => {
+        const value = copyElement[attr];
+        if (value !== void 0) {
+          enterText[attr] = value;
+        }
+      });
+    }
+  }
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  let curIndex;
+  if (activeControl && control.getIsRangeWithinControl()) {
+    curIndex = control.setValue([enterText]);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    if (isCollapsed) {
+      draw.spliceElementList(elementList, index2 + 1, 0, enterText);
+    } else {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex, enterText);
+    }
+    curIndex = index2 + 1;
+  }
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  }
+  evt.preventDefault();
+}
+function left(evt, host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const positionContext = position.getPositionContext();
+  const { index: index2 } = cursorPosition;
+  if (index2 <= 0 && !positionContext.isTable)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = rangeManager.getIsCollapsed();
+  const elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2]) == null ? void 0 : _a.controlComponent) === ControlComponent.PREFIX) {
+    control.initNextControl({
+      direction: MoveDirection.UP
+    });
+    return;
+  }
+  let moveCount = 1;
+  if (isMod(evt)) {
+    const LETTER_REG = draw.getLetterReg();
+    const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
+    if (LETTER_REG.test((_b = elementList[moveStartIndex]) == null ? void 0 : _b.value)) {
+      let i = moveStartIndex - 1;
+      while (i > 0) {
+        const element = elementList[i];
+        if (!LETTER_REG.test(element.value)) {
+          break;
+        }
+        moveCount++;
+        i--;
+      }
+    }
+  }
+  const curIndex = startIndex - moveCount;
+  let anchorStartIndex = curIndex;
+  let anchorEndIndex = curIndex;
+  if (evt.shiftKey && cursorPosition) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStartIndex = startIndex;
+        anchorEndIndex = endIndex - moveCount;
+      } else {
+        anchorStartIndex = curIndex;
+        anchorEndIndex = endIndex;
+      }
+    } else {
+      anchorEndIndex = endIndex;
+    }
+  }
+  if (!evt.shiftKey) {
+    const element = elementList[startIndex];
+    if (element.type === ElementType.TABLE) {
+      const trList = element.trList;
+      const lastTrIndex = trList.length - 1;
+      const lastTr = trList[lastTrIndex];
+      const lastTdIndex = lastTr.tdList.length - 1;
+      const lastTd = lastTr.tdList[lastTdIndex];
+      position.setPositionContext({
+        isTable: true,
+        index: startIndex,
+        trIndex: lastTrIndex,
+        tdIndex: lastTdIndex,
+        tdId: lastTd.id,
+        trId: lastTr.id,
+        tableId: element.id
+      });
+      anchorStartIndex = lastTd.value.length - 1;
+      anchorEndIndex = anchorStartIndex;
+      draw.getTableTool().render();
+    } else if (element.tableId) {
+      if (startIndex === 0) {
+        const originalElementList = draw.getOriginalElementList();
+        const trList = originalElementList[positionContext.index].trList;
+        outer:
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            if (tr.id !== element.trId)
+              continue;
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              if (td.id !== element.tdId)
+                continue;
+              if (r === 0 && d === 0) {
+                position.setPositionContext({
+                  isTable: false
+                });
+                anchorStartIndex = positionContext.index - 1;
+                anchorEndIndex = anchorStartIndex;
+                draw.getTableTool().dispose();
+              } else {
+                let preTrIndex = r;
+                let preTdIndex = d - 1;
+                if (preTdIndex < 0) {
+                  preTrIndex = r - 1;
+                  preTdIndex = trList[preTrIndex].tdList.length - 1;
+                }
+                const preTr = trList[preTrIndex];
+                const preTd = preTr.tdList[preTdIndex];
+                position.setPositionContext({
+                  isTable: true,
+                  index: positionContext.index,
+                  trIndex: preTrIndex,
+                  tdIndex: preTdIndex,
+                  tdId: preTd.id,
+                  trId: preTr.id,
+                  tableId: element.id
+                });
+                anchorStartIndex = preTd.value.length - 1;
+                anchorEndIndex = anchorStartIndex;
+                draw.getTableTool().render();
+              }
+              break outer;
+            }
+          }
+      }
+    }
+  }
+  if (!~anchorStartIndex || !~anchorEndIndex)
+    return;
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isAnchorCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  evt.preventDefault();
+}
+function right(evt, host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { index: index2 } = cursorPosition;
+  const positionList = position.getPositionList();
+  const positionContext = position.getPositionContext();
+  if (index2 > positionList.length - 1 && !positionContext.isTable)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = rangeManager.getIsCollapsed();
+  let elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2 + 1]) == null ? void 0 : _a.controlComponent) === ControlComponent.POSTFIX) {
+    control.initNextControl({
+      direction: MoveDirection.DOWN
+    });
+    return;
+  }
+  let moveCount = 1;
+  if (isMod(evt)) {
+    const LETTER_REG = draw.getLetterReg();
+    const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
+    if (LETTER_REG.test((_b = elementList[moveStartIndex + 1]) == null ? void 0 : _b.value)) {
+      let i = moveStartIndex + 2;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        if (!LETTER_REG.test(element.value)) {
+          break;
+        }
+        moveCount++;
+        i++;
+      }
+    }
+  }
+  const curIndex = endIndex + moveCount;
+  let anchorStartIndex = curIndex;
+  let anchorEndIndex = curIndex;
+  if (evt.shiftKey && cursorPosition) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStartIndex = startIndex;
+        anchorEndIndex = curIndex;
+      } else {
+        anchorStartIndex = startIndex + moveCount;
+        anchorEndIndex = endIndex;
+      }
+    } else {
+      anchorStartIndex = startIndex;
+    }
+  }
+  if (!evt.shiftKey) {
+    const element = elementList[endIndex];
+    const nextElement = elementList[endIndex + 1];
+    if ((nextElement == null ? void 0 : nextElement.type) === ElementType.TABLE) {
+      const trList = nextElement.trList;
+      const nextTr = trList[0];
+      const nextTd = nextTr.tdList[0];
+      position.setPositionContext({
+        isTable: true,
+        index: endIndex + 1,
+        trIndex: 0,
+        tdIndex: 0,
+        tdId: nextTd.id,
+        trId: nextTr.id,
+        tableId: nextElement.id
+      });
+      anchorStartIndex = 0;
+      anchorEndIndex = 0;
+      draw.getTableTool().render();
+    } else if (element.tableId) {
+      if (!nextElement) {
+        const originalElementList = draw.getOriginalElementList();
+        const trList = originalElementList[positionContext.index].trList;
+        outer:
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            if (tr.id !== element.trId)
+              continue;
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              if (td.id !== element.tdId)
+                continue;
+              if (r === trList.length - 1 && d === tdList.length - 1) {
+                position.setPositionContext({
+                  isTable: false
+                });
+                anchorStartIndex = positionContext.index;
+                anchorEndIndex = anchorStartIndex;
+                elementList = draw.getElementList();
+                draw.getTableTool().dispose();
+              } else {
+                let nextTrIndex = r;
+                let nextTdIndex = d + 1;
+                if (nextTdIndex > tdList.length - 1) {
+                  nextTrIndex = r + 1;
+                  nextTdIndex = 0;
+                }
+                const preTr = trList[nextTrIndex];
+                const preTd = preTr.tdList[nextTdIndex];
+                position.setPositionContext({
+                  isTable: true,
+                  index: positionContext.index,
+                  trIndex: nextTrIndex,
+                  tdIndex: nextTdIndex,
+                  tdId: preTd.id,
+                  trId: preTr.id,
+                  tableId: element.id
+                });
+                anchorStartIndex = 0;
+                anchorEndIndex = anchorStartIndex;
+                draw.getTableTool().render();
+              }
+              break outer;
+            }
+          }
+      }
+    }
+  }
+  const maxElementListIndex = elementList.length - 1;
+  if (anchorStartIndex > maxElementListIndex || anchorEndIndex > maxElementListIndex) {
+    return;
+  }
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isAnchorCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  evt.preventDefault();
+}
+function tab(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  evt.preventDefault();
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  if (activeControl && control.getIsRangeWithinControl()) {
+    control.initNextControl({
+      direction: evt.shiftKey ? MoveDirection.UP : MoveDirection.DOWN
+    });
+  } else {
+    const tabElement = {
+      type: ElementType.TAB,
+      value: ""
+    };
+    const rangeManager = draw.getRange();
+    const { startIndex } = rangeManager.getRange();
+    const elementList = draw.getElementList();
+    formatElementContext(elementList, [tabElement], startIndex, {
+      editorOptions: draw.getOptions()
+    });
+    draw.insertElementList([tabElement]);
+  }
+}
+function getNextPositionIndex(payload) {
+  const { positionList, index: index2, isUp, rowNo, cursorX } = payload;
+  let nextIndex = -1;
+  const probablePosition = [];
+  if (isUp) {
+    let p = index2 - 1;
+    while (p >= 0) {
+      const position = positionList[p];
+      p--;
+      if (position.rowNo === rowNo)
+        continue;
+      if (probablePosition[0] && probablePosition[0].rowNo !== position.rowNo) {
+        break;
+      }
+      probablePosition.unshift(position);
+    }
+  } else {
+    let p = index2 + 1;
+    while (p < positionList.length) {
+      const position = positionList[p];
+      p++;
+      if (position.rowNo === rowNo)
+        continue;
+      if (probablePosition[0] && probablePosition[0].rowNo !== position.rowNo) {
+        break;
+      }
+      probablePosition.push(position);
+    }
+  }
+  for (let p = 0; p < probablePosition.length; p++) {
+    const nextPosition = probablePosition[p];
+    const { coordinate: { leftTop: [nextLeftX], rightTop: [nextRightX] } } = nextPosition;
+    if (p === probablePosition.length - 1) {
+      nextIndex = nextPosition.index;
+    }
+    if (cursorX < nextLeftX || cursorX > nextRightX)
+      continue;
+    nextIndex = nextPosition.index;
+    break;
+  }
+  return nextIndex;
+}
+function updown(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  let positionList = position.getPositionList();
+  const isUp = evt.key === KeyMap.Up;
+  let anchorStartIndex = -1;
+  let anchorEndIndex = -1;
+  const positionContext = position.getPositionContext();
+  if (!evt.shiftKey && positionContext.isTable && (isUp && cursorPosition.rowIndex === 0 || !isUp && cursorPosition.rowIndex === draw.getRowCount() - 1)) {
+    const { index: index2, trIndex, tdIndex, tableId } = positionContext;
+    if (isUp) {
+      if (trIndex === 0) {
+        position.setPositionContext({
+          isTable: false
+        });
+        anchorStartIndex = index2 - 1;
+        anchorEndIndex = anchorStartIndex;
+        draw.getTableTool().dispose();
+      } else {
+        let preTrIndex = -1;
+        let preTdIndex = -1;
+        const originalElementList = draw.getOriginalElementList();
+        const trList = originalElementList[index2].trList;
+        const curTdColIndex = trList[trIndex].tdList[tdIndex].colIndex;
+        outer:
+          for (let r = trIndex - 1; r >= 0; r--) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              if (td.colIndex === curTdColIndex || td.colIndex + td.colspan - 1 >= curTdColIndex && td.colIndex <= curTdColIndex) {
+                preTrIndex = r;
+                preTdIndex = d;
+                break outer;
+              }
+            }
+          }
+        if (!~preTrIndex || !~preTdIndex)
+          return;
+        const preTr = trList[preTrIndex];
+        const preTd = preTr.tdList[preTdIndex];
+        position.setPositionContext({
+          isTable: true,
+          index: index2,
+          trIndex: preTrIndex,
+          tdIndex: preTdIndex,
+          tdId: preTr.id,
+          trId: preTd.id,
+          tableId
+        });
+        anchorStartIndex = preTd.value.length - 1;
+        anchorEndIndex = anchorStartIndex;
+        draw.getTableTool().render();
+      }
+    } else {
+      const originalElementList = draw.getOriginalElementList();
+      const trList = originalElementList[index2].trList;
+      if (trIndex === trList.length - 1) {
+        position.setPositionContext({
+          isTable: false
+        });
+        anchorStartIndex = index2;
+        anchorEndIndex = anchorStartIndex;
+        draw.getTableTool().dispose();
+      } else {
+        let nexTrIndex = -1;
+        let nextTdIndex = -1;
+        const curTdColIndex = trList[trIndex].tdList[tdIndex].colIndex;
+        outer:
+          for (let r = trIndex + 1; r < trList.length; r++) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              if (td.colIndex === curTdColIndex || td.colIndex + td.colspan - 1 >= curTdColIndex && td.colIndex <= curTdColIndex) {
+                nexTrIndex = r;
+                nextTdIndex = d;
+                break outer;
+              }
+            }
+          }
+        if (!~nexTrIndex || !~nextTdIndex)
+          return;
+        const nextTr = trList[nexTrIndex];
+        const nextTd = nextTr.tdList[nextTdIndex];
+        position.setPositionContext({
+          isTable: true,
+          index: index2,
+          trIndex: nexTrIndex,
+          tdIndex: nextTdIndex,
+          tdId: nextTr.id,
+          trId: nextTd.id,
+          tableId
+        });
+        anchorStartIndex = nextTd.value.length - 1;
+        anchorEndIndex = anchorStartIndex;
+        draw.getTableTool().render();
+      }
+    }
+  } else {
+    let anchorPosition = cursorPosition;
+    if (evt.shiftKey) {
+      if (startIndex === cursorPosition.index) {
+        anchorPosition = positionList[endIndex];
+      } else {
+        anchorPosition = positionList[startIndex];
+      }
+    }
+    const { index: index2, rowNo, rowIndex, coordinate: { rightTop: [curRightX] } } = anchorPosition;
+    if (isUp && rowIndex === 0 || !isUp && rowIndex === draw.getRowCount() - 1) {
+      return;
+    }
+    const nextIndex = getNextPositionIndex({
+      positionList,
+      index: index2,
+      rowNo,
+      isUp,
+      cursorX: curRightX
+    });
+    if (nextIndex < 0)
+      return;
+    anchorStartIndex = nextIndex;
+    anchorEndIndex = nextIndex;
+    if (evt.shiftKey) {
+      if (startIndex !== endIndex) {
+        if (startIndex === cursorPosition.index) {
+          anchorStartIndex = startIndex;
+        } else {
+          anchorEndIndex = endIndex;
+        }
+      } else {
+        if (isUp) {
+          anchorEndIndex = endIndex;
+        } else {
+          anchorStartIndex = startIndex;
+        }
+      }
+    }
+    const elementList = draw.getElementList();
+    const nextElement = elementList[nextIndex];
+    if (nextElement.type === ElementType.TABLE) {
+      const { scale } = draw.getOptions();
+      const margins = draw.getMargins();
+      const trList = nextElement.trList;
+      let trIndex = -1;
+      let tdIndex = -1;
+      let tdPositionIndex = -1;
+      if (isUp) {
+        outer:
+          for (let r = trList.length - 1; r >= 0; r--) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              const tdX = td.x * scale + margins[3];
+              const tdWidth = td.width * scale;
+              if (curRightX >= tdX && curRightX <= tdX + tdWidth) {
+                const tdPositionList = td.positionList;
+                const lastPosition = tdPositionList[tdPositionList.length - 1];
+                const nextPositionIndex = getNextPositionIndex({
+                  positionList: tdPositionList,
+                  index: lastPosition.index + 1,
+                  rowNo: lastPosition.rowNo - 1,
+                  isUp,
+                  cursorX: curRightX
+                }) || lastPosition.index;
+                trIndex = r;
+                tdIndex = d;
+                tdPositionIndex = nextPositionIndex;
+                break outer;
+              }
+            }
+          }
+      } else {
+        outer:
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              const tdX = td.x * scale + margins[3];
+              const tdWidth = td.width * scale;
+              if (curRightX >= tdX && curRightX <= tdX + tdWidth) {
+                const tdPositionList = td.positionList;
+                const nextPositionIndex = getNextPositionIndex({
+                  positionList: tdPositionList,
+                  index: -1,
+                  rowNo: -1,
+                  isUp,
+                  cursorX: curRightX
+                }) || 0;
+                trIndex = r;
+                tdIndex = d;
+                tdPositionIndex = nextPositionIndex;
+                break outer;
+              }
+            }
+          }
+      }
+      if (~trIndex && ~tdIndex && ~tdPositionIndex) {
+        const nextTr = trList[trIndex];
+        const nextTd = nextTr.tdList[tdIndex];
+        position.setPositionContext({
+          isTable: true,
+          index: nextIndex,
+          trIndex,
+          tdIndex,
+          tdId: nextTd.id,
+          trId: nextTr.id,
+          tableId: nextElement.id
+        });
+        anchorStartIndex = tdPositionIndex;
+        anchorEndIndex = anchorStartIndex;
+        positionList = position.getPositionList();
+        draw.getTableTool().render();
+      }
+    }
+  }
+  if (!~anchorStartIndex || !~anchorEndIndex)
+    return;
+  if (anchorStartIndex > anchorEndIndex) {
+    [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
+  }
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  draw.getCursor().moveCursorToVisible({
+    cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
+    direction: isUp ? MoveDirection.UP : MoveDirection.DOWN
+  });
+}
+function keydown(evt, host) {
+  if (host.isComposing)
+    return;
+  const draw = host.getDraw();
+  if (evt.key === KeyMap.Backspace) {
+    backspace(evt, host);
+  } else if (evt.key === KeyMap.Delete) {
+    del(evt, host);
+  } else if (evt.key === KeyMap.Enter) {
+    enter(evt, host);
+  } else if (evt.key === KeyMap.Left) {
+    left(evt, host);
+  } else if (evt.key === KeyMap.Right) {
+    right(evt, host);
+  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    updown(evt, host);
+  } else if (isMod(evt) && evt.key === KeyMap.Z) {
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM)
+      return;
+    draw.getHistoryManager().undo();
+    evt.preventDefault();
+  } else if (isMod(evt) && evt.key === KeyMap.Y) {
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM)
+      return;
+    draw.getHistoryManager().redo();
+    evt.preventDefault();
+  } else if (isMod(evt) && evt.key === KeyMap.C) {
+    host.copy();
+    evt.preventDefault();
+  } else if (isMod(evt) && evt.key === KeyMap.X) {
+    host.cut();
+    evt.preventDefault();
+  } else if (isMod(evt) && evt.key === KeyMap.A) {
+    host.selectAll();
+    evt.preventDefault();
+  } else if (isMod(evt) && evt.key === KeyMap.S) {
+    if (draw.isReadonly())
+      return;
+    const listener = draw.getListener();
+    if (listener.saved) {
+      listener.saved(draw.getValue());
+    }
+    const eventBus = draw.getEventBus();
+    if (eventBus.isSubscribe("saved")) {
+      eventBus.emit("saved", draw.getValue());
+    }
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.ESC) {
+    host.clearPainterStyle();
+    const zoneManager = draw.getZone();
+    if (!zoneManager.isMainActive()) {
+      zoneManager.setZone(EditorZone.MAIN);
+    }
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.TAB) {
+    tab(evt, host);
+  }
+}
+function input(data2, host) {
+  var _a;
+  const draw = host.getDraw();
+  if (draw.isReadonly() || draw.isDisabled())
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!data2 || !cursorPosition)
+    return;
+  const isComposing = host.isComposing;
+  if (isComposing && ((_a = host.compositionInfo) == null ? void 0 : _a.value) === data2)
+    return;
+  const rangeManager = draw.getRange();
+  if (!rangeManager.getIsCanInput())
+    return;
+  removeComposingInput(host);
+  if (!isComposing) {
+    const cursor = draw.getCursor();
+    cursor.clearAgentDomValue();
+  }
+  const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
+  const text = data2.replaceAll(`
+`, ZERO);
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  const copyElement = getAnchorElement(elementList, endIndex);
+  if (!copyElement)
+    return;
+  const isDesignMode = draw.isDesignMode();
+  const inputData = splitText(text).map((value) => {
+    var _a2, _b;
+    const newElement = {
+      value
+    };
+    if (isDesignMode || !((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
+      const nextElement = elementList[endIndex + 1];
+      if (!copyElement.type || copyElement.type === TEXT || copyElement.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || copyElement.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || copyElement.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || copyElement.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
+        EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
+          if (attr === "groupIds" && !(nextElement == null ? void 0 : nextElement.groupIds))
+            return;
+          const value2 = copyElement[attr];
+          if (value2 !== void 0) {
+            newElement[attr] = value2;
+          }
+        });
+      }
+      if (isComposing) {
+        newElement.underline = true;
+      }
+    }
+    return newElement;
+  });
+  const control = draw.getControl();
+  let curIndex;
+  if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    curIndex = control.setValue(inputData);
+  } else {
+    const start = startIndex + 1;
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, start, endIndex - startIndex);
+    }
+    formatElementContext(elementList, inputData, startIndex, {
+      editorOptions: draw.getOptions()
+    });
+    draw.spliceElementList(elementList, start, 0, ...inputData);
+    curIndex = startIndex + inputData.length;
+  }
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex,
+      isSubmitHistory: !isComposing
+    });
+  }
+  if (isComposing) {
+    host.compositionInfo = {
+      elementList,
+      value: text,
+      startIndex: curIndex - inputData.length,
+      endIndex: curIndex
+    };
+  }
+}
+function removeComposingInput(host) {
+  if (!host.compositionInfo)
+    return;
+  const { elementList, startIndex, endIndex } = host.compositionInfo;
+  elementList.splice(startIndex + 1, endIndex - startIndex);
+  const rangeManager = host.getDraw().getRange();
+  rangeManager.setRange(startIndex, startIndex);
+  host.compositionInfo = null;
+}
+function cut(host) {
+  const draw = host.getDraw();
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  if (!~startIndex && !~startIndex)
+    return;
+  if (draw.isReadonly() || !rangeManager.getIsCanInput())
+    return;
+  const elementList = draw.getElementList();
+  let start = startIndex;
+  let end = endIndex;
+  if (startIndex === endIndex) {
+    const position = draw.getPosition();
+    const positionList = position.getPositionList();
+    const startPosition = positionList[startIndex];
+    const curRowNo = startPosition.rowNo;
+    const curPageNo = startPosition.pageNo;
+    const cutElementIndexList = [];
+    for (let p = 0; p < positionList.length; p++) {
+      const position2 = positionList[p];
+      if (position2.pageNo > curPageNo)
+        break;
+      if (position2.pageNo === curPageNo && position2.rowNo === curRowNo) {
+        cutElementIndexList.push(p);
+      }
+    }
+    const firstElementIndex = cutElementIndexList[0] - 1;
+    start = firstElementIndex < 0 ? 0 : firstElementIndex;
+    end = cutElementIndexList[cutElementIndexList.length - 1];
+  }
+  const options = draw.getOptions();
+  writeElementList(elementList.slice(start + 1, end + 1), options);
+  const control = draw.getControl();
+  let curIndex;
+  if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    curIndex = control.cut();
+  } else {
+    draw.spliceElementList(elementList, start + 1, end - start);
+    curIndex = start;
+  }
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function copy(host) {
+  const draw = host.getDraw();
+  const { copy: copy2 } = draw.getOverride();
+  if (copy2) {
+    const overrideResult = copy2();
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
+  }
+  const rangeManager = draw.getRange();
+  let copyElementList = null;
+  const range = rangeManager.getRange();
+  if (range.isCrossRowCol) {
+    const tableElement = rangeManager.getRangeTableElement();
+    if (!tableElement)
+      return;
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    const copyTableElement = {
+      type: ElementType.TABLE,
+      value: "",
+      colgroup: [],
+      trList: []
+    };
+    const firstRow = rowCol[0];
+    const colStartIndex = firstRow[0].colIndex;
+    const lastCol = firstRow[firstRow.length - 1];
+    const colEndIndex = lastCol.colIndex + lastCol.colspan - 1;
+    for (let c = colStartIndex; c <= colEndIndex; c++) {
+      copyTableElement.colgroup.push(tableElement.colgroup[c]);
+    }
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      const tr = tableElement.trList[row[0].rowIndex];
+      const coptTr = {
+        tdList: [],
+        height: tr.height,
+        minHeight: tr.minHeight
+      };
+      for (let c = 0; c < row.length; c++) {
+        coptTr.tdList.push(row[c]);
+      }
+      copyTableElement.trList.push(coptTr);
+    }
+    copyElementList = zipElementList([copyTableElement]);
+  } else {
+    copyElementList = rangeManager.getIsCollapsed() ? rangeManager.getRangeRowElementList() : rangeManager.getSelectionElementList();
+  }
+  if (!(copyElementList == null ? void 0 : copyElementList.length))
+    return;
+  writeElementList(copyElementList, draw.getOptions());
+}
+function drop(evt, host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  const { drop: drop2 } = draw.getOverride();
+  if (drop2) {
+    const overrideResult = drop2(evt);
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
+  }
+  evt.preventDefault();
+  const data2 = (_a = evt.dataTransfer) == null ? void 0 : _a.getData("text");
+  if (data2) {
+    host.input(data2);
+  } else {
+    const files = (_b = evt.dataTransfer) == null ? void 0 : _b.files;
+    if (!files)
+      return;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (file.type.startsWith("image")) {
+        pasteImage(host, file);
+      }
+    }
+  }
+}
+function getWordRangeBySegmenter(host) {
+  var _a;
+  if (!Intl.Segmenter)
+    return null;
+  const draw = host.getDraw();
+  const cursorPosition = draw.getPosition().getCursorPosition();
+  if (!cursorPosition)
+    return null;
+  const rangeManager = draw.getRange();
+  const paragraphInfo = rangeManager.getRangeParagraphInfo();
+  if (!paragraphInfo)
+    return null;
+  const paragraphText = ((_a = paragraphInfo == null ? void 0 : paragraphInfo.elementList) == null ? void 0 : _a.map((e) => !e.type || e.type !== ElementType.CONTROL && TEXTLIKE_ELEMENT_TYPE.includes(e.type) ? e.value : ZERO).join("")) || "";
+  if (!paragraphText)
+    return null;
+  const cursorStartIndex = cursorPosition.index;
+  const offset = paragraphInfo.startIndex;
+  const segmenter = new Intl.Segmenter(void 0, { granularity: "word" });
+  const segments = segmenter.segment(paragraphText);
+  let startIndex = -1;
+  let endIndex = -1;
+  for (const { segment, index: index2, isWordLike } of segments) {
+    const realSegmentStartIndex = index2 + offset;
+    if (isWordLike && cursorStartIndex >= realSegmentStartIndex && cursorStartIndex < realSegmentStartIndex + segment.length) {
+      startIndex = realSegmentStartIndex - 1;
+      endIndex = startIndex + segment.length;
+      break;
+    }
+  }
+  return ~startIndex && ~endIndex ? { startIndex, endIndex } : null;
+}
+function getWordRangeByCursor(host) {
+  const draw = host.getDraw();
+  const cursorPosition = draw.getPosition().getCursorPosition();
+  if (!cursorPosition)
+    return null;
+  const { value, index: index2 } = cursorPosition;
+  const LETTER_REG = draw.getLetterReg();
+  let upCount = 0;
+  let downCount = 0;
+  const isNumber = NUMBER_LIKE_REG.test(value);
+  if (isNumber || LETTER_REG.test(value)) {
+    const elementList = draw.getElementList();
+    let upStartIndex = index2 - 1;
+    while (upStartIndex > 0) {
+      const value2 = elementList[upStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
+        upCount++;
+        upStartIndex--;
+      } else {
+        break;
+      }
+    }
+    let downStartIndex = index2 + 1;
+    while (downStartIndex < elementList.length) {
+      const value2 = elementList[downStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
+        downCount++;
+        downStartIndex++;
+      } else {
+        break;
+      }
+    }
+  }
+  const startIndex = index2 - upCount - 1;
+  if (startIndex < 0)
+    return null;
+  return {
+    startIndex,
+    endIndex: index2 + downCount
+  };
+}
+function dblclick(host, evt) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const positionContext = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  if (positionContext.isImage && positionContext.isDirectHit) {
+    draw.getPreviewer().render();
+    return;
+  }
+  if (draw.getIsPagingMode()) {
+    if (!~positionContext.index && positionContext.zone) {
+      draw.getZone().setZone(positionContext.zone);
+      draw.clearSideEffect();
+      position.setPositionContext({
+        isTable: false
+      });
+      return;
+    }
+  }
+  if ((positionContext.isCheckbox || positionContext.isRadio) && positionContext.isDirectHit) {
+    return;
+  }
+  const rangeManager = draw.getRange();
+  const segmenterRange = getWordRangeBySegmenter(host) || getWordRangeByCursor(host);
+  if (!segmenterRange)
+    return;
+  rangeManager.setRange(segmenterRange.startIndex, segmenterRange.endIndex);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  });
+  rangeManager.setRangeStyle();
+}
+function threeClick(host) {
+  var _a, _b;
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { index: index2 } = cursorPosition;
+  const elementList = draw.getElementList();
+  let upCount = 0;
+  let downCount = 0;
+  let upStartIndex = index2 - 1;
+  while (upStartIndex > 0) {
+    const element = elementList[upStartIndex];
+    const preElement = elementList[upStartIndex - 1];
+    if (element.value === ZERO && !element.listWrap || element.listId !== (preElement == null ? void 0 : preElement.listId) || element.titleId !== (preElement == null ? void 0 : preElement.titleId)) {
+      break;
+    }
+    upCount++;
+    upStartIndex--;
+  }
+  let downStartIndex = index2 + 1;
+  while (downStartIndex < elementList.length) {
+    const element = elementList[downStartIndex];
+    const nextElement = elementList[downStartIndex + 1];
+    if (element.value === ZERO && !element.listWrap || element.listId !== (nextElement == null ? void 0 : nextElement.listId) || element.titleId !== (nextElement == null ? void 0 : nextElement.titleId)) {
+      break;
+    }
+    downCount++;
+    downStartIndex++;
+  }
+  const rangeManager = draw.getRange();
+  let newStartIndex = index2 - upCount - 1;
+  if (((_a = elementList[newStartIndex]) == null ? void 0 : _a.value) !== ZERO) {
+    newStartIndex -= 1;
+  }
+  if (newStartIndex < 0)
+    return;
+  let newEndIndex = index2 + downCount + 1;
+  if (((_b = elementList[newEndIndex]) == null ? void 0 : _b.value) === ZERO || newEndIndex > elementList.length - 1) {
+    newEndIndex -= 1;
+  }
+  rangeManager.setRange(newStartIndex, newEndIndex);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  });
+}
+var click = {
+  dblclick,
+  threeClick
+};
+function compositionstart(host) {
+  host.isComposing = true;
+}
+function compositionend(host, evt) {
+  host.isComposing = false;
+  const draw = host.getDraw();
+  if (!evt.data) {
+    removeComposingInput(host);
+    const rangeManager = draw.getRange();
+    const { endIndex: curIndex } = rangeManager.getRange();
+    draw.render({
+      curIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    setTimeout(() => {
+      if (host.compositionInfo) {
+        input(evt.data, host);
+      }
+    }, 1);
+  }
+  const cursor = draw.getCursor();
+  cursor.clearAgentDomValue();
+}
+var composition = {
+  compositionstart,
+  compositionend
+};
+function dragover(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  evt.preventDefault();
+  const pageContainer = draw.getPageContainer();
+  const editorRegion = findParent(evt.target, (node) => node === pageContainer, true);
+  if (!editorRegion)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const positionContext = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  if (!positionContext)
+    return;
+  const { isTable, tdValueIndex, index: index2 } = positionContext;
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  if (~index2) {
+    const rangeManager = draw.getRange();
+    rangeManager.setRange(curIndex, curIndex);
+    position.setCursorPosition(positionList[curIndex]);
+  }
+  const cursor = draw.getCursor();
+  const { cursor: { dragColor, dragWidth } } = draw.getOptions();
+  cursor.drawCursor({
+    width: dragWidth,
+    color: dragColor,
+    isBlink: false
+  });
+}
+var drag = {
+  dragover
+};
+class CanvasEvent {
+  constructor(draw) {
+    this.draw = draw;
+    this.pageContainer = draw.getPageContainer();
+    this.pageList = draw.getPageList();
+    this.range = this.draw.getRange();
+    this.position = this.draw.getPosition();
+    this.isAllowSelection = false;
+    this.isComposing = false;
+    this.compositionInfo = null;
+    this.isAllowDrag = false;
+    this.isAllowDrop = false;
+    this.cacheRange = null;
+    this.cacheElementList = null;
+    this.cachePositionList = null;
+    this.cachePositionContext = null;
+    this.mouseDownStartPosition = null;
+  }
+  getDraw() {
+    return this.draw;
+  }
+  register() {
+    this.pageContainer.addEventListener("click", this.click.bind(this));
+    this.pageContainer.addEventListener("mousedown", this.mousedown.bind(this));
+    this.pageContainer.addEventListener("mouseup", this.mouseup.bind(this));
+    this.pageContainer.addEventListener("mouseleave", this.mouseleave.bind(this));
+    this.pageContainer.addEventListener("mousemove", this.mousemove.bind(this));
+    this.pageContainer.addEventListener("dblclick", this.dblclick.bind(this));
+    this.pageContainer.addEventListener("dragover", this.dragover.bind(this));
+    this.pageContainer.addEventListener("drop", this.drop.bind(this));
+    threeClick$1(this.pageContainer, this.threeClick.bind(this));
+  }
+  setIsAllowSelection(payload) {
+    this.isAllowSelection = payload;
+    if (!payload) {
+      this.applyPainterStyle();
+    }
+  }
+  setIsAllowDrag(payload) {
+    this.isAllowDrag = payload;
+    this.isAllowDrop = payload;
+  }
+  clearPainterStyle() {
+    this.pageList.forEach((p) => {
+      p.style.cursor = "text";
+    });
+    this.draw.setPainterStyle(null);
+  }
+  applyPainterStyle() {
+    const painterStyle = this.draw.getPainterStyle();
+    if (!painterStyle)
+      return;
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelection();
+    if (!selection)
+      return;
+    const painterStyleKeys = Object.keys(painterStyle);
+    selection.forEach((s) => {
+      painterStyleKeys.forEach((pKey) => {
+        const key = pKey;
+        s[key] = painterStyle[key];
+      });
+    });
+    this.draw.render({ isSetCursor: false });
+    const painterOptions = this.draw.getPainterOptions();
+    if (!painterOptions || !painterOptions.isDblclick) {
+      this.clearPainterStyle();
+    }
+  }
+  selectAll() {
+    const position = this.position.getPositionList();
+    this.range.setRange(0, position.length - 1);
+    this.draw.render({
+      isSubmitHistory: false,
+      isSetCursor: false,
+      isCompute: false
+    });
+  }
+  mousemove(evt) {
+    mousemove(evt, this);
+  }
+  mousedown(evt) {
+    mousedown(evt, this);
+  }
+  click() {
+    if (isIOS && !this.draw.isReadonly()) {
+      this.draw.getCursor().getAgentDom().focus();
+    }
+  }
+  mouseup(evt) {
+    mouseup(evt, this);
+  }
+  mouseleave(evt) {
+    mouseleave(evt, this);
+  }
+  keydown(evt) {
+    keydown(evt, this);
+  }
+  dblclick(evt) {
+    click.dblclick(this, evt);
+  }
+  threeClick() {
+    click.threeClick(this);
+  }
+  input(data2) {
+    input(data2, this);
+  }
+  cut() {
+    cut(this);
+  }
+  copy() {
+    copy(this);
+  }
+  compositionstart() {
+    composition.compositionstart(this);
+  }
+  compositionend(evt) {
+    composition.compositionend(this, evt);
+  }
+  drop(evt) {
+    drop(evt, this);
+  }
+  dragover(evt) {
+    drag.dragover(evt, this);
+  }
+}
+class GlobalEvent {
+  constructor(draw, canvasEvent) {
+    this.clearSideEffect = (evt) => {
+      if (!this.cursor)
+        return;
+      const target = (evt == null ? void 0 : evt.composedPath()[0]) || evt.target;
+      const pageList = this.draw.getPageList();
+      const innerEditorDom = findParent(target, (node) => pageList.includes(node), true);
+      if (innerEditorDom) {
+        this.setRangeStyle();
+        return;
+      }
+      const outerEditorDom = findParent(target, (node) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT), true);
+      if (outerEditorDom) {
+        this.setRangeStyle();
+        this.watchCursorActive();
+        return;
+      }
+      this.cursor.recoveryCursor();
+      this.range.recoveryRangeStyle();
+      this.previewer.clearResizer();
+      this.tableTool.dispose();
+      this.hyperlinkParticle.clearHyperlinkPopup();
+      this.control.destroyControl();
+      this.dateParticle.clearDatePicker();
+      this.imageParticle.destroyFloatImage();
+    };
+    this.setCanvasEventAbility = () => {
+      this.canvasEvent.setIsAllowDrag(false);
+      this.canvasEvent.setIsAllowSelection(false);
+    };
+    this.setRangeStyle = () => {
+      this.range.setRangeStyle();
+    };
+    this.setPageScale = (evt) => {
+      if (!evt.ctrlKey)
+        return;
+      evt.preventDefault();
+      const { scale } = this.options;
+      if (evt.deltaY < 0) {
+        const nextScale = scale * 10 + 1;
+        if (nextScale <= 30) {
+          this.draw.setPageScale(nextScale / 10);
+        }
+      } else {
+        const nextScale = scale * 10 - 1;
+        if (nextScale >= 5) {
+          this.draw.setPageScale(nextScale / 10);
+        }
+      }
+    };
+    this._handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        const range = this.range.getRange();
+        const isSetCursor = !!~range.startIndex && !!~range.endIndex && range.startIndex === range.endIndex;
+        this.range.replaceRange(range);
+        this.draw.render({
+          isSetCursor,
+          isCompute: false,
+          isSubmitHistory: false,
+          curIndex: range.startIndex
+        });
+      }
+    };
+    this._handleDprChange = () => {
+      this.draw.setPageDevicePixel();
+    };
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.canvasEvent = canvasEvent;
+    this.cursor = null;
+    this.range = draw.getRange();
+    this.previewer = draw.getPreviewer();
+    this.tableTool = draw.getTableTool();
+    this.hyperlinkParticle = draw.getHyperlinkParticle();
+    this.dateParticle = draw.getDateParticle();
+    this.imageParticle = draw.getImageParticle();
+    this.control = draw.getControl();
+    this.dprMediaQueryList = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+  }
+  register() {
+    this.cursor = this.draw.getCursor();
+    this.addEvent();
+  }
+  addEvent() {
+    window.addEventListener("blur", this.clearSideEffect);
+    document.addEventListener("keyup", this.setRangeStyle);
+    document.addEventListener("click", this.clearSideEffect);
+    document.addEventListener("mouseup", this.setCanvasEventAbility);
+    document.addEventListener("wheel", this.setPageScale, { passive: false });
+    document.addEventListener("visibilitychange", this._handleVisibilityChange);
+    this.dprMediaQueryList.addEventListener("change", this._handleDprChange);
+  }
+  removeEvent() {
+    window.removeEventListener("blur", this.clearSideEffect);
+    document.removeEventListener("keyup", this.setRangeStyle);
+    document.removeEventListener("click", this.clearSideEffect);
+    document.removeEventListener("mouseup", this.setCanvasEventAbility);
+    document.removeEventListener("wheel", this.setPageScale);
+    document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+    this.dprMediaQueryList.removeEventListener("change", this._handleDprChange);
+  }
+  watchCursorActive() {
+    if (!this.range.getIsCollapsed())
+      return;
+    setTimeout(() => {
+      var _a, _b;
+      if (!((_a = this.cursor) == null ? void 0 : _a.getAgentIsActive())) {
+        (_b = this.cursor) == null ? void 0 : _b.drawCursor({
+          isFocus: false,
+          isBlink: false
+        });
+      }
+    });
+  }
+}
+class HistoryManager {
+  constructor(draw) {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.maxRecordCount = draw.getOptions().historyMaxRecordCount + 1;
+  }
+  undo() {
+    if (this.undoStack.length > 1) {
+      const pop = this.undoStack.pop();
+      this.redoStack.push(pop);
+      if (this.undoStack.length) {
+        this.undoStack[this.undoStack.length - 1]();
+      }
+    }
+  }
+  redo() {
+    if (this.redoStack.length) {
+      const pop = this.redoStack.pop();
+      this.undoStack.push(pop);
+      pop();
+    }
+  }
+  execute(fn) {
+    this.undoStack.push(fn);
+    if (this.redoStack.length) {
+      this.redoStack = [];
+    }
+    while (this.undoStack.length > this.maxRecordCount) {
+      this.undoStack.shift();
+    }
+  }
+  isCanUndo() {
+    return this.undoStack.length > 1;
+  }
+  isCanRedo() {
+    return !!this.redoStack.length;
+  }
+  isStackEmpty() {
+    return !this.undoStack.length && !this.redoStack.length;
+  }
+  recovery() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
+  popUndo() {
+    return this.undoStack.pop();
+  }
+}
+class Position {
+  constructor(draw) {
+    this.positionList = [];
+    this.floatPositionList = [];
+    this.cursorPosition = null;
+    this.positionContext = {
+      isTable: false,
+      isControl: false
+    };
+    this.draw = draw;
+    this.eventBus = draw.getEventBus();
+    this.options = draw.getOptions();
+  }
+  getFloatPositionList() {
+    return this.floatPositionList;
+  }
+  getTablePositionList(sourceElementList) {
+    const { index: index2, trIndex, tdIndex } = this.positionContext;
+    return sourceElementList[index2].trList[trIndex].tdList[tdIndex].positionList || [];
+  }
+  getPositionList() {
+    return this.positionContext.isTable ? this.getTablePositionList(this.draw.getOriginalElementList()) : this.getOriginalPositionList();
+  }
+  getMainPositionList() {
+    return this.positionContext.isTable ? this.getTablePositionList(this.draw.getOriginalMainElementList()) : this.positionList;
+  }
+  getOriginalPositionList() {
+    const zoneManager = this.draw.getZone();
+    if (zoneManager.isHeaderActive()) {
+      const header = this.draw.getHeader();
+      return header.getPositionList();
+    }
+    if (zoneManager.isFooterActive()) {
+      const footer = this.draw.getFooter();
+      return footer.getPositionList();
+    }
+    return this.positionList;
+  }
+  getOriginalMainPositionList() {
+    return this.positionList;
+  }
+  getSelectionPositionList() {
+    const { startIndex, endIndex } = this.draw.getRange().getRange();
+    if (startIndex === endIndex)
+      return null;
+    const positionList = this.getPositionList();
+    return positionList.slice(startIndex + 1, endIndex + 1);
+  }
+  setPositionList(payload) {
+    this.positionList = payload;
+  }
+  setFloatPositionList(payload) {
+    this.floatPositionList = payload;
+  }
+  computePageRowPosition(payload) {
+    const { positionList, rowList, pageNo, startX, startY, startRowIndex, startIndex, innerWidth, zone: zone2 } = payload;
+    const { scale, table: { tdPadding } } = this.options;
+    let x = startX;
+    let y = startY;
+    let index2 = startIndex;
+    for (let i = 0; i < rowList.length; i++) {
+      const curRow = rowList[i];
+      if (!curRow.isSurround) {
+        const curRowWidth = curRow.width + (curRow.offsetX || 0);
+        if (curRow.rowFlex === RowFlex.CENTER) {
+          x += (innerWidth - curRowWidth) / 2;
+        } else if (curRow.rowFlex === RowFlex.RIGHT) {
+          x += innerWidth - curRowWidth;
+        }
+      }
+      x += curRow.offsetX || 0;
+      const tablePreX = x;
+      const tablePreY = y;
+      for (let j = 0; j < curRow.elementList.length; j++) {
+        const element = curRow.elementList[j];
+        const metrics = element.metrics;
+        const offsetY = element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE || element.type === ElementType.LATEX ? curRow.ascent - metrics.height : curRow.ascent;
+        if (element.left) {
+          x += element.left;
+        }
+        const positionItem = {
+          pageNo,
+          index: index2,
+          value: element.value,
+          rowIndex: startRowIndex + i,
+          rowNo: i,
+          metrics,
+          left: element.left || 0,
+          ascent: offsetY,
+          lineHeight: curRow.height,
+          isFirstLetter: j === 0,
+          isLastLetter: j === curRow.elementList.length - 1,
+          coordinate: {
+            leftTop: [x, y],
+            leftBottom: [x, y + curRow.height],
+            rightTop: [x + metrics.width, y],
+            rightBottom: [x + metrics.width, y + curRow.height]
+          }
+        };
+        if (element.imgDisplay === ImageDisplay.SURROUND || element.imgDisplay === ImageDisplay.FLOAT_TOP || element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+          const prePosition = positionList[positionList.length - 1];
+          if (prePosition) {
+            positionItem.metrics = prePosition.metrics;
+            positionItem.coordinate = prePosition.coordinate;
+          }
+          if (!element.imgFloatPosition) {
+            element.imgFloatPosition = {
+              x,
+              y,
+              pageNo
+            };
+          }
+          this.floatPositionList.push({
+            pageNo,
+            element,
+            position: positionItem,
+            isTable: payload.isTable,
+            index: payload.index,
+            tdIndex: payload.tdIndex,
+            trIndex: payload.trIndex,
+            tdValueIndex: index2,
+            zone: zone2
+          });
+        }
+        positionList.push(positionItem);
+        index2++;
+        x += metrics.width;
+        if (element.type === ElementType.TABLE) {
+          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
+          const tdPaddingHeight = tdPadding[0] + tdPadding[2];
+          for (let t = 0; t < element.trList.length; t++) {
+            const tr = element.trList[t];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              td.positionList = [];
+              const rowList2 = td.rowList;
+              const drawRowResult = this.computePageRowPosition({
+                positionList: td.positionList,
+                rowList: rowList2,
+                pageNo,
+                startRowIndex: 0,
+                startIndex: 0,
+                startX: (td.x + tdPadding[3]) * scale + tablePreX,
+                startY: (td.y + tdPadding[0]) * scale + tablePreY,
+                innerWidth: (td.width - tdPaddingWidth) * scale,
+                isTable: true,
+                index: index2 - 1,
+                tdIndex: d,
+                trIndex: t,
+                zone: zone2
+              });
+              if (td.verticalAlign === VerticalAlign.MIDDLE || td.verticalAlign === VerticalAlign.BOTTOM) {
+                const rowsHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
+                const blankHeight = (td.height - tdPaddingHeight) * scale - rowsHeight;
+                const offsetHeight = td.verticalAlign === VerticalAlign.MIDDLE ? blankHeight / 2 : blankHeight;
+                if (Math.floor(offsetHeight) > 0) {
+                  td.positionList.forEach((tdPosition) => {
+                    const { coordinate: { leftTop, leftBottom, rightBottom, rightTop } } = tdPosition;
+                    leftTop[1] += offsetHeight;
+                    leftBottom[1] += offsetHeight;
+                    rightBottom[1] += offsetHeight;
+                    rightTop[1] += offsetHeight;
+                  });
+                }
+              }
+              x = drawRowResult.x;
+              y = drawRowResult.y;
+            }
+          }
+          x = tablePreX;
+          y = tablePreY;
+        }
+      }
+      x = startX;
+      y += curRow.height;
+    }
+    return { x, y, index: index2 };
+  }
+  computePositionList() {
+    var _a;
+    this.positionList = [];
+    const innerWidth = this.draw.getInnerWidth();
+    const pageRowList = this.draw.getPageRowList();
+    const margins = this.draw.getMargins();
+    const startX = margins[3];
+    const header = this.draw.getHeader();
+    const extraHeight = header.getExtraHeight();
+    const startY = margins[0] + extraHeight;
+    let startRowIndex = 0;
+    for (let i = 0; i < pageRowList.length; i++) {
+      const rowList = pageRowList[i];
+      const startIndex = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
+      this.computePageRowPosition({
+        positionList: this.positionList,
+        rowList,
+        pageNo: i,
+        startRowIndex,
+        startIndex,
+        startX,
+        startY,
+        innerWidth
+      });
+      startRowIndex += rowList.length;
+    }
+  }
+  computeRowPosition(payload) {
+    const { row, innerWidth } = payload;
+    const positionList = [];
+    this.computePageRowPosition({
+      positionList,
+      innerWidth,
+      rowList: [deepClone(row)],
+      pageNo: 0,
+      startX: 0,
+      startY: 0,
+      startIndex: 0,
+      startRowIndex: 0
+    });
+    return positionList;
+  }
+  setCursorPosition(position) {
+    this.cursorPosition = position;
+  }
+  getCursorPosition() {
+    return this.cursorPosition;
+  }
+  getPositionContext() {
+    return this.positionContext;
+  }
+  setPositionContext(payload) {
+    this.eventBus.emit("positionContextChange", {
+      value: payload,
+      oldValue: this.positionContext
+    });
+    this.positionContext = payload;
+  }
+  getPositionByXY(payload) {
+    var _a, _b, _c, _d, _e;
+    const { x, y, isTable } = payload;
+    let { elementList, positionList } = payload;
+    if (!elementList) {
+      elementList = this.draw.getOriginalElementList();
+    }
+    if (!positionList) {
+      positionList = this.getOriginalPositionList();
+    }
+    const zoneManager = this.draw.getZone();
+    const curPageNo = (_a = payload.pageNo) != null ? _a : this.draw.getPageNo();
+    const isMainActive = zoneManager.isMainActive();
+    const positionNo = isMainActive ? curPageNo : 0;
+    if (!isTable) {
+      const floatTopPosition = this.getFloatPositionByXY({
+        ...payload,
+        imgDisplays: [ImageDisplay.FLOAT_TOP, ImageDisplay.SURROUND]
+      });
+      if (floatTopPosition)
+        return floatTopPosition;
+    }
+    for (let j = 0; j < positionList.length; j++) {
+      const { index: index2, pageNo, left: left2, isFirstLetter, coordinate: { leftTop, rightTop, leftBottom } } = positionList[j];
+      if (positionNo !== pageNo)
+        continue;
+      if (pageNo > positionNo)
+        break;
+      if (leftTop[0] - left2 <= x && rightTop[0] >= x && leftTop[1] <= y && leftBottom[1] >= y) {
+        let curPositionIndex2 = j;
+        const element = elementList[j];
+        if (element.type === ElementType.TABLE) {
+          for (let t = 0; t < element.trList.length; t++) {
+            const tr = element.trList[t];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              const tablePosition = this.getPositionByXY({
+                x,
+                y,
+                td,
+                pageNo: curPageNo,
+                tablePosition: positionList[j],
+                isTable: true,
+                elementList: td.value,
+                positionList: td.positionList
+              });
+              if (~tablePosition.index) {
+                const { index: tdValueIndex, hitLineStartIndex: hitLineStartIndex3 } = tablePosition;
+                const tdValueElement = td.value[tdValueIndex];
+                return {
+                  index: index2,
+                  isCheckbox: tablePosition.isCheckbox || tdValueElement.type === ElementType.CHECKBOX || tdValueElement.controlComponent === ControlComponent.CHECKBOX,
+                  isRadio: tdValueElement.type === ElementType.RADIO || tdValueElement.controlComponent === ControlComponent.RADIO,
+                  isControl: !!tdValueElement.controlId,
+                  isImage: tablePosition.isImage,
+                  isDirectHit: tablePosition.isDirectHit,
+                  isTable: true,
+                  tdIndex: d,
+                  trIndex: t,
+                  tdValueIndex,
+                  tdId: td.id,
+                  trId: tr.id,
+                  tableId: element.id,
+                  hitLineStartIndex: hitLineStartIndex3
+                };
+              }
+            }
+          }
+        }
+        if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
+          return {
+            index: curPositionIndex2,
+            isDirectHit: true,
+            isImage: true
+          };
+        }
+        if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
+          return {
+            index: curPositionIndex2,
+            isDirectHit: true,
+            isCheckbox: true
+          };
+        }
+        if (element.type === ElementType.RADIO || element.controlComponent === ControlComponent.RADIO) {
+          return {
+            index: curPositionIndex2,
+            isDirectHit: true,
+            isRadio: true
+          };
+        }
+        let hitLineStartIndex2;
+        if (elementList[index2].value !== ZERO) {
+          const valueWidth = rightTop[0] - leftTop[0];
+          if (x < leftTop[0] + valueWidth / 2) {
+            curPositionIndex2 = j - 1;
+            if (isFirstLetter) {
+              hitLineStartIndex2 = j;
+            }
+          }
+        }
+        return {
+          isDirectHit: true,
+          hitLineStartIndex: hitLineStartIndex2,
+          index: curPositionIndex2,
+          isControl: !!element.controlId
+        };
+      }
+    }
+    if (!isTable) {
+      const floatBottomPosition = this.getFloatPositionByXY({
+        ...payload,
+        imgDisplays: [ImageDisplay.FLOAT_BOTTOM]
+      });
+      if (floatBottomPosition)
+        return floatBottomPosition;
+    }
+    let isLastArea = false;
+    let curPositionIndex = -1;
+    let hitLineStartIndex;
+    if (isTable) {
+      const { scale } = this.options;
+      const { td, tablePosition } = payload;
+      if (td && tablePosition) {
+        const { leftTop } = tablePosition.coordinate;
+        const tdX = td.x * scale + leftTop[0];
+        const tdY = td.y * scale + leftTop[1];
+        const tdWidth = td.width * scale;
+        const tdHeight = td.height * scale;
+        if (!(tdX < x && x < tdX + tdWidth && tdY < y && y < tdY + tdHeight)) {
+          return {
+            index: curPositionIndex
+          };
+        }
+      }
+    }
+    const lastLetterList = positionList.filter((p) => p.isLastLetter && p.pageNo === positionNo);
+    for (let j = 0; j < lastLetterList.length; j++) {
+      const { index: index2, rowNo, coordinate: { leftTop, leftBottom } } = lastLetterList[j];
+      if (y > leftTop[1] && y <= leftBottom[1]) {
+        const headIndex = positionList.findIndex((p) => p.pageNo === positionNo && p.rowNo === rowNo);
+        const headElement = elementList[headIndex];
+        const headPosition = positionList[headIndex];
+        const headStartX = headElement.listStyle === ListStyle.CHECKBOX ? this.options.margins[3] : headPosition.coordinate.leftTop[0];
+        if (x < headStartX) {
+          if (~headIndex) {
+            if (headPosition.value === ZERO) {
+              curPositionIndex = headIndex;
+            } else {
+              curPositionIndex = headIndex - 1;
+              hitLineStartIndex = headIndex;
+            }
+          } else {
+            curPositionIndex = index2;
+          }
+        } else {
+          if (headElement.listStyle === ListStyle.CHECKBOX && x < leftTop[0]) {
+            return {
+              index: headIndex,
+              isDirectHit: true,
+              isCheckbox: true
+            };
+          }
+          curPositionIndex = index2;
+        }
+        isLastArea = true;
+        break;
+      }
+    }
+    if (!isLastArea) {
+      const header = this.draw.getHeader();
+      const headerHeight = header.getHeight();
+      const headerBottomY = header.getHeaderTop() + headerHeight;
+      const footer = this.draw.getFooter();
+      const pageHeight = this.draw.getHeight();
+      const footerTopY = pageHeight - (footer.getFooterBottom() + footer.getHeight());
+      if (isMainActive) {
+        if (y < headerBottomY) {
+          return {
+            index: -1,
+            zone: EditorZone.HEADER
+          };
+        }
+        if (y > footerTopY) {
+          return {
+            index: -1,
+            zone: EditorZone.FOOTER
+          };
+        }
+      } else {
+        if (y <= footerTopY && y >= headerBottomY) {
+          return {
+            index: -1,
+            zone: EditorZone.MAIN
+          };
+        }
+      }
+      const margins = this.draw.getMargins();
+      if (y <= margins[1]) {
+        for (let p = 0; p < positionList.length; p++) {
+          const position = positionList[p];
+          if (position.pageNo !== positionNo || position.rowNo !== 0)
+            continue;
+          const { leftTop, rightTop } = position.coordinate;
+          if (x <= margins[3] || x >= leftTop[0] && x <= rightTop[0] || ((_b = positionList[p + 1]) == null ? void 0 : _b.rowNo) !== 0) {
+            return {
+              index: position.index
+            };
+          }
+        }
+      } else {
+        const lastLetter = lastLetterList[lastLetterList.length - 1];
+        if (lastLetter) {
+          const lastRowNo = lastLetter.rowNo;
+          for (let p = 0; p < positionList.length; p++) {
+            const position = positionList[p];
+            if (position.pageNo !== positionNo || position.rowNo !== lastRowNo) {
+              continue;
+            }
+            const { leftTop, rightTop } = position.coordinate;
+            if (x <= margins[3] || x >= leftTop[0] && x <= rightTop[0] || ((_c = positionList[p + 1]) == null ? void 0 : _c.rowNo) !== lastRowNo) {
+              return {
+                index: position.index
+              };
+            }
+          }
+        }
+      }
+      return {
+        index: ((_d = lastLetterList[lastLetterList.length - 1]) == null ? void 0 : _d.index) || positionList.length - 1
+      };
+    }
+    return {
+      hitLineStartIndex,
+      index: curPositionIndex,
+      isControl: !!((_e = elementList[curPositionIndex]) == null ? void 0 : _e.controlId)
+    };
+  }
+  getFloatPositionByXY(payload) {
+    var _a;
+    const { x, y } = payload;
+    const currentPageNo = (_a = payload.pageNo) != null ? _a : this.draw.getPageNo();
+    const currentZone = this.draw.getZone().getZone();
+    for (let f = 0; f < this.floatPositionList.length; f++) {
+      const { position, element, isTable, index: index2, trIndex, tdIndex, tdValueIndex, zone: floatElementZone, pageNo } = this.floatPositionList[f];
+      if (currentPageNo === pageNo && element.type === ElementType.IMAGE && element.imgDisplay && payload.imgDisplays.includes(element.imgDisplay) && (!floatElementZone || floatElementZone === currentZone)) {
+        const imgFloatPosition = element.imgFloatPosition;
+        if (x >= imgFloatPosition.x && x <= imgFloatPosition.x + element.width && y >= imgFloatPosition.y && y <= imgFloatPosition.y + element.height) {
+          if (isTable) {
+            return {
+              index: index2,
+              isDirectHit: true,
+              isImage: true,
+              isTable,
+              trIndex,
+              tdIndex,
+              tdValueIndex,
+              tdId: element.tdId,
+              trId: element.trId,
+              tableId: element.tableId
+            };
+          }
+          return {
+            index: position.index,
+            isDirectHit: true,
+            isImage: true
+          };
+        }
+      }
+    }
+  }
+  adjustPositionContext(payload) {
+    const positionResult = this.getPositionByXY(payload);
+    if (!~positionResult.index)
+      return null;
+    if (positionResult.isControl && this.draw.getMode() !== EditorMode.READONLY) {
+      const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex } = positionResult;
+      const control = this.draw.getControl();
+      const { newIndex } = control.moveCursor({
+        index: index22,
+        isTable: isTable2,
+        trIndex: trIndex2,
+        tdIndex: tdIndex2,
+        tdValueIndex
+      });
+      if (isTable2) {
+        positionResult.tdValueIndex = newIndex;
+      } else {
+        positionResult.index = newIndex;
+      }
+    }
+    const { index: index2, isCheckbox, isRadio, isControl, isImage, isDirectHit, isTable, trIndex, tdIndex, tdId, trId, tableId } = positionResult;
+    this.setPositionContext({
+      isTable: isTable || false,
+      isCheckbox: isCheckbox || false,
+      isRadio: isRadio || false,
+      isControl: isControl || false,
+      isImage: isImage || false,
+      isDirectHit: isDirectHit || false,
+      index: index2,
+      trIndex,
+      tdIndex,
+      tdId,
+      trId,
+      tableId
+    });
+    return positionResult;
+  }
+  setSurroundPosition(payload) {
+    var _a;
+    const { pageNo, row, rowElement, rowElementRect, surroundElementList, availableWidth } = payload;
+    let x = rowElementRect.x;
+    let rowIncreaseWidth = 0;
+    if (surroundElementList.length && !getIsBlockElement(rowElement) && !((_a = rowElement.control) == null ? void 0 : _a.minWidth)) {
+      for (let s = 0; s < surroundElementList.length; s++) {
+        const surroundElement = surroundElementList[s];
+        const floatPosition = surroundElement.imgFloatPosition;
+        if (floatPosition.pageNo !== pageNo)
+          continue;
+        const surroundRect = {
+          ...floatPosition,
+          width: surroundElement.width,
+          height: surroundElement.height
+        };
+        if (isRectIntersect(rowElementRect, surroundRect)) {
+          row.isSurround = true;
+          const translateX = surroundRect.width + surroundRect.x - rowElementRect.x;
+          rowElement.left = translateX;
+          row.width += translateX;
+          rowIncreaseWidth += translateX;
+          x = surroundRect.x + surroundRect.width;
+          if (row.width + rowElement.metrics.width > availableWidth) {
+            rowElement.left = 0;
+            row.width -= rowIncreaseWidth;
+            break;
+          }
+        }
+      }
+    }
+    return { x, rowIncreaseWidth };
+  }
+}
+class RangeManager {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.listener = draw.getListener();
+    this.eventBus = draw.getEventBus();
+    this.position = draw.getPosition();
+    this.historyManager = draw.getHistoryManager();
+    this.range = {
+      startIndex: -1,
+      endIndex: -1
+    };
+  }
+  getRange() {
+    return this.range;
+  }
+  clearRange() {
+    this.setRange(-1, -1);
+  }
+  getIsCollapsed() {
+    const { startIndex, endIndex } = this.range;
+    return startIndex === endIndex;
+  }
+  getSelection() {
+    const { startIndex, endIndex } = this.range;
+    if (startIndex === endIndex)
+      return null;
+    const elementList = this.draw.getElementList();
+    return elementList.slice(startIndex + 1, endIndex + 1);
+  }
+  getSelectionElementList() {
+    if (this.range.isCrossRowCol) {
+      const rowCol = this.draw.getTableParticle().getRangeRowCol();
+      if (!rowCol)
+        return null;
+      const elementList = [];
+      for (let r = 0; r < rowCol.length; r++) {
+        const row = rowCol[r];
+        for (let c = 0; c < row.length; c++) {
+          const col = row[c];
+          elementList.push(...col.value);
+        }
+      }
+      return elementList;
+    }
+    return this.getSelection();
+  }
+  getTextLikeSelection() {
+    const selection = this.getSelection();
+    if (!selection)
+      return null;
+    return selection.filter((s) => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type));
+  }
+  getTextLikeSelectionElementList() {
+    const selection = this.getSelectionElementList();
+    if (!selection)
+      return null;
+    return selection.filter((s) => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type));
+  }
+  getRangeRow() {
+    const { startIndex, endIndex } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    const positionList = this.position.getPositionList();
+    const rangeRow = /* @__PURE__ */ new Map();
+    for (let p = startIndex; p < endIndex + 1; p++) {
+      const { pageNo, rowNo } = positionList[p];
+      const rowSet = rangeRow.get(pageNo);
+      if (!rowSet) {
+        rangeRow.set(pageNo, /* @__PURE__ */ new Set([rowNo]));
+      } else {
+        if (!rowSet.has(rowNo)) {
+          rowSet.add(rowNo);
+        }
+      }
+    }
+    return rangeRow;
+  }
+  getRangeRowElementList() {
+    const { startIndex, endIndex, isCrossRowCol } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    if (isCrossRowCol) {
+      return this.getSelectionElementList();
+    }
+    const rangeRow = this.getRangeRow();
+    if (!rangeRow)
+      return null;
+    const positionList = this.position.getPositionList();
+    const elementList = this.draw.getElementList();
+    const rowElementList = [];
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p];
+      const rowSet = rangeRow.get(position.pageNo);
+      if (!rowSet)
+        continue;
+      if (rowSet.has(position.rowNo)) {
+        rowElementList.push(elementList[p]);
+      }
+    }
+    return rowElementList;
+  }
+  getRangeParagraph() {
+    const { startIndex, endIndex } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    const positionList = this.position.getPositionList();
+    const elementList = this.draw.getElementList();
+    const rangeRow = /* @__PURE__ */ new Map();
+    let start = startIndex;
+    while (start >= 0) {
+      const { pageNo, rowNo } = positionList[start];
+      let rowArray = rangeRow.get(pageNo);
+      if (!rowArray) {
+        rowArray = [];
+        rangeRow.set(pageNo, rowArray);
+      }
+      if (!rowArray.includes(rowNo)) {
+        rowArray.unshift(rowNo);
+      }
+      const element = elementList[start];
+      const preElement = elementList[start - 1];
+      if (element.value === ZERO && !element.listWrap || element.listId !== (preElement == null ? void 0 : preElement.listId) || element.titleId !== (preElement == null ? void 0 : preElement.titleId)) {
+        break;
+      }
+      start--;
+    }
+    const isCollapsed = startIndex === endIndex;
+    if (!isCollapsed) {
+      let middle = startIndex + 1;
+      while (middle < endIndex) {
+        const { pageNo, rowNo } = positionList[middle];
+        let rowArray = rangeRow.get(pageNo);
+        if (!rowArray) {
+          rowArray = [];
+          rangeRow.set(pageNo, rowArray);
+        }
+        if (!rowArray.includes(rowNo)) {
+          rowArray.push(rowNo);
+        }
+        middle++;
+      }
+    }
+    let end = endIndex;
+    if (isCollapsed && elementList[startIndex].value === ZERO) {
+      end += 1;
+    }
+    while (end < positionList.length) {
+      const element = elementList[end];
+      const nextElement = elementList[end + 1];
+      if (element.value === ZERO && !element.listWrap || element.listId !== (nextElement == null ? void 0 : nextElement.listId) || element.titleId !== (nextElement == null ? void 0 : nextElement.titleId)) {
+        break;
+      }
+      const { pageNo, rowNo } = positionList[end];
+      let rowArray = rangeRow.get(pageNo);
+      if (!rowArray) {
+        rowArray = [];
+        rangeRow.set(pageNo, rowArray);
+      }
+      if (!rowArray.includes(rowNo)) {
+        rowArray.push(rowNo);
+      }
+      end++;
+    }
+    return rangeRow;
+  }
+  getRangeParagraphInfo() {
+    const { startIndex, endIndex } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    let startPositionIndex = -1;
+    const rangeElementList = [];
+    const rangeRow = this.getRangeParagraph();
+    if (!rangeRow)
+      return null;
+    const elementList = this.draw.getElementList();
+    const positionList = this.position.getPositionList();
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p];
+      const rowArray = rangeRow.get(position.pageNo);
+      if (!rowArray)
+        continue;
+      if (rowArray.includes(position.rowNo)) {
+        if (!~startPositionIndex) {
+          startPositionIndex = position.index;
+        }
+        rangeElementList.push(elementList[p]);
+      }
+    }
+    if (!rangeElementList.length)
+      return null;
+    return {
+      elementList: rangeElementList,
+      startIndex: startPositionIndex
+    };
+  }
+  getRangeParagraphElementList() {
+    var _a;
+    return ((_a = this.getRangeParagraphInfo()) == null ? void 0 : _a.elementList) || null;
+  }
+  getRangeTableElement() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return null;
+    const originalElementList = this.draw.getOriginalElementList();
+    return originalElementList[positionContext.index];
+  }
+  getIsSelectAll() {
+    const elementList = this.draw.getElementList();
+    const { startIndex, endIndex } = this.range;
+    return startIndex === 0 && elementList.length - 1 === endIndex && !this.position.getPositionContext().isTable;
+  }
+  getIsPointInRange(x, y) {
+    const { startIndex, endIndex } = this.range;
+    const positionList = this.position.getPositionList();
+    for (let p = startIndex + 1; p <= endIndex; p++) {
+      const position = positionList[p];
+      if (!position)
+        break;
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  getKeywordRangeList(payload) {
+    const searchMatchList = this.draw.getSearch().getMatchList(payload, this.draw.getOriginalElementList());
+    const searchRangeMap = /* @__PURE__ */ new Map();
+    for (const searchMatch of searchMatchList) {
+      const searchRange = searchRangeMap.get(searchMatch.groupId);
+      if (searchRange) {
+        searchRange.endIndex += 1;
+      } else {
+        const { type, groupId, tableId, index: index2, tdIndex, trIndex } = searchMatch;
+        const range = {
+          startIndex: index2 - 1,
+          endIndex: index2
+        };
+        if (type === EditorContext.TABLE) {
+          range.tableId = tableId;
+          range.startTdIndex = tdIndex;
+          range.endTdIndex = tdIndex;
+          range.startTrIndex = trIndex;
+          range.endTrIndex = trIndex;
+        }
+        searchRangeMap.set(groupId, range);
+      }
+    }
+    const rangeList = [];
+    searchRangeMap.forEach((searchRange) => {
+      rangeList.push(searchRange);
+    });
+    return rangeList;
+  }
+  getIsCanInput() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    if (startIndex === endIndex)
+      return true;
+    const elementList = this.draw.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    return !startElement.controlId && !endElement.controlId || (!startElement.controlId || startElement.controlComponent === ControlComponent.POSTFIX) && (!endElement.controlId || endElement.controlComponent === ControlComponent.POSTFIX) || !!startElement.controlId && endElement.controlId === startElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX;
+  }
+  setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
+    this.range.startIndex = startIndex;
+    this.range.endIndex = endIndex;
+    this.range.tableId = tableId;
+    this.range.startTdIndex = startTdIndex;
+    this.range.endTdIndex = endTdIndex;
+    this.range.startTrIndex = startTrIndex;
+    this.range.endTrIndex = endTrIndex;
+    this.range.isCrossRowCol = !!(startTdIndex || endTdIndex || startTrIndex || endTrIndex);
+    this.range.zone = this.draw.getZone().getZone();
+    const control = this.draw.getControl();
+    if (~startIndex && ~endIndex) {
+      const elementList = this.draw.getElementList();
+      const element = elementList[startIndex];
+      if (element == null ? void 0 : element.controlId) {
+        control.initControl();
+        return;
+      }
+    }
+    control.destroyControl();
+  }
+  replaceRange(range) {
+    this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
+  }
+  setRangeStyle() {
+    var _a, _b;
+    const rangeStyleChangeListener = this.listener.rangeStyleChange;
+    const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
+    if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
+      return;
+    const { startIndex, endIndex, isCrossRowCol } = this.range;
+    if (!~startIndex && !~endIndex)
+      return;
+    let curElement;
+    if (isCrossRowCol) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const positionContext = this.position.getPositionContext();
+      curElement = originalElementList[positionContext.index];
+    } else {
+      const index2 = ~endIndex ? endIndex : 0;
+      const elementList = this.draw.getElementList();
+      curElement = getAnchorElement(elementList, index2);
+    }
+    if (!curElement)
+      return;
+    const curElementList = this.getSelection() || [curElement];
+    const type = curElement.type || ElementType.TEXT;
+    const font = curElement.font || this.options.defaultFont;
+    const size = curElement.size || this.options.defaultSize;
+    const bold = !~curElementList.findIndex((el) => !el.bold);
+    const italic = !~curElementList.findIndex((el) => !el.italic);
+    const underline = !~curElementList.findIndex((el) => {
+      var _a2;
+      return !el.underline && !((_a2 = el.control) == null ? void 0 : _a2.underline);
+    });
+    const strikeout = !~curElementList.findIndex((el) => !el.strikeout);
+    const color = curElement.color || null;
+    const highlight = curElement.highlight || null;
+    const rowFlex = curElement.rowFlex || null;
+    const rowMargin = (_a = curElement.rowMargin) != null ? _a : this.options.defaultRowMargin;
+    const dashArray = curElement.dashArray || [];
+    const level = curElement.level || null;
+    const listType = curElement.listType || null;
+    const listStyle = curElement.listStyle || null;
+    const textDecoration = underline ? curElement.textDecoration || null : null;
+    const painter = !!this.draw.getPainterStyle();
+    const undo = this.historyManager.isCanUndo();
+    const redo = this.historyManager.isCanRedo();
+    const groupIds = curElement.groupIds || null;
+    const extension = (_b = curElement.extension) != null ? _b : null;
+    const rangeStyle = {
+      type,
+      undo,
+      redo,
+      painter,
+      font,
+      size,
+      bold,
+      italic,
+      underline,
+      strikeout,
+      color,
+      highlight,
+      rowFlex,
+      rowMargin,
+      dashArray,
+      level,
+      listType,
+      listStyle,
+      groupIds,
+      textDecoration,
+      extension
+    };
+    if (rangeStyleChangeListener) {
+      rangeStyleChangeListener(rangeStyle);
+    }
+    if (isSubscribeRangeStyleChange) {
+      this.eventBus.emit("rangeStyleChange", rangeStyle);
+    }
+  }
+  recoveryRangeStyle() {
+    const rangeStyleChangeListener = this.listener.rangeStyleChange;
+    const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
+    if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
+      return;
+    const font = this.options.defaultFont;
+    const size = this.options.defaultSize;
+    const rowMargin = this.options.defaultRowMargin;
+    const painter = !!this.draw.getPainterStyle();
+    const undo = this.historyManager.isCanUndo();
+    const redo = this.historyManager.isCanRedo();
+    const rangeStyle = {
+      type: null,
+      undo,
+      redo,
+      painter,
+      font,
+      size,
+      bold: false,
+      italic: false,
+      underline: false,
+      strikeout: false,
+      color: null,
+      highlight: null,
+      rowFlex: null,
+      rowMargin,
+      dashArray: [],
+      level: null,
+      listType: null,
+      listStyle: null,
+      groupIds: null,
+      textDecoration: null,
+      extension: null
+    };
+    if (rangeStyleChangeListener) {
+      rangeStyleChangeListener(rangeStyle);
+    }
+    if (isSubscribeRangeStyleChange) {
+      this.eventBus.emit("rangeStyleChange", rangeStyle);
+    }
+  }
+  shrinkBoundary(context = {}) {
+    const elementList = context.elementList || this.draw.getElementList();
+    const range = context.range || this.getRange();
+    const { startIndex, endIndex } = range;
+    if (!~startIndex && !~endIndex)
+      return;
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if (startIndex === endIndex) {
+      if (startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+        let index2 = startIndex - 1;
+        while (index2 > 0) {
+          const preElement = elementList[index2];
+          if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+            range.startIndex = index2;
+            range.endIndex = index2;
+            break;
+          }
+          index2--;
+        }
+      }
+    } else {
+      if (startElement.controlComponent === ControlComponent.PLACEHOLDER || endElement.controlComponent === ControlComponent.PLACEHOLDER) {
+        let index2 = endIndex - 1;
+        while (index2 > 0) {
+          const preElement = elementList[index2];
+          if (preElement.controlId !== endElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+            range.startIndex = index2;
+            range.endIndex = index2;
+            return;
+          }
+          index2--;
+        }
+      }
+      if (startElement.controlComponent === ControlComponent.PREFIX) {
+        let index2 = startIndex + 1;
+        while (index2 < elementList.length) {
+          const nextElement = elementList[index2];
+          if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.VALUE) {
+            range.startIndex = index2 - 1;
+            break;
+          } else if (nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
+            range.startIndex = index2 - 1;
+            range.endIndex = index2 - 1;
+            return;
+          }
+          index2++;
+        }
+      }
+      if (endElement.controlComponent !== ControlComponent.VALUE) {
+        let index2 = startIndex - 1;
+        while (index2 > 0) {
+          const preElement = elementList[index2];
+          if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.VALUE) {
+            range.startIndex = index2;
+            break;
+          } else if (preElement.controlComponent === ControlComponent.PLACEHOLDER) {
+            range.startIndex = index2;
+            range.endIndex = index2;
+            return;
+          }
+          index2--;
+        }
+      }
+    }
+  }
+  render(ctx, x, y, width, height) {
+    ctx.save();
+    ctx.globalAlpha = this.options.rangeAlpha;
+    ctx.fillStyle = this.options.rangeColor;
+    ctx.fillRect(x, y, width, height);
+    ctx.restore();
+  }
+  toString() {
+    const selection = this.getTextLikeSelection();
+    if (!selection)
+      return "";
+    return selection.map((s) => s.value).join("").replace(new RegExp(ZERO, "g"), "");
+  }
+}
+class Background {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.imageCache = /* @__PURE__ */ new Map();
+  }
+  _renderBackgroundColor(ctx, color, width, height) {
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+  }
+  _drawImage(ctx, imageElement, width, height) {
+    const { background, scale } = this.options;
+    if (background.size === BackgroundSize.CONTAIN) {
+      const imageWidth = imageElement.width * scale;
+      const imageHeight = imageElement.height * scale;
+      if (!background.repeat || background.repeat === BackgroundRepeat.NO_REPEAT) {
+        ctx.drawImage(imageElement, 0, 0, imageWidth, imageHeight);
+      } else {
+        let startX = 0;
+        let startY = 0;
+        const repeatXCount = background.repeat === BackgroundRepeat.REPEAT || background.repeat === BackgroundRepeat.REPEAT_X ? Math.ceil(width * scale / imageWidth) : 1;
+        const repeatYCount = background.repeat === BackgroundRepeat.REPEAT || background.repeat === BackgroundRepeat.REPEAT_Y ? Math.ceil(height * scale / imageHeight) : 1;
+        for (let x = 0; x < repeatXCount; x++) {
+          for (let y = 0; y < repeatYCount; y++) {
+            ctx.drawImage(imageElement, startX, startY, imageWidth, imageHeight);
+            startY += imageHeight;
+          }
+          startY = 0;
+          startX += imageWidth;
+        }
+      }
+    } else {
+      ctx.drawImage(imageElement, 0, 0, width * scale, height * scale);
+    }
+  }
+  _renderBackgroundImage(ctx, width, height) {
+    const { background } = this.options;
+    const imageElementCache = this.imageCache.get(background.image);
+    if (imageElementCache) {
+      this._drawImage(ctx, imageElementCache, width, height);
+    } else {
+      const img = new Image();
+      img.setAttribute("crossOrigin", "Anonymous");
+      img.src = background.image;
+      img.onload = () => {
+        this.imageCache.set(background.image, img);
+        this._drawImage(ctx, img, width, height);
+        this.draw.render({
+          isCompute: false,
+          isSubmitHistory: false
+        });
+      };
+    }
+  }
+  render(ctx, pageNo) {
+    const { background: { image, color, applyPageNumbers } } = this.options;
+    if (image && (!(applyPageNumbers == null ? void 0 : applyPageNumbers.length) || applyPageNumbers.includes(pageNo))) {
+      const { width, height } = this.options;
+      this._renderBackgroundImage(ctx, width, height);
+    } else {
+      const width = this.draw.getCanvasWidth(pageNo);
+      const height = this.draw.getCanvasHeight(pageNo);
+      this._renderBackgroundColor(ctx, color, width, height);
+    }
+  }
+}
+class AbstractRichText {
+  constructor() {
+    this.fillRect = this.clearFillInfo();
+  }
+  clearFillInfo() {
+    this.fillColor = void 0;
+    this.fillDecorationStyle = void 0;
+    this.fillRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    return this.fillRect;
+  }
+  recordFillInfo(ctx, x, y, width, height, color, decorationStyle) {
+    const isFirstRecord = !this.fillRect.width;
+    if (!isFirstRecord && (this.fillColor !== color || this.fillDecorationStyle !== decorationStyle)) {
+      this.render(ctx);
+      this.clearFillInfo();
+      this.recordFillInfo(ctx, x, y, width, height, color, decorationStyle);
+      return;
+    }
+    if (isFirstRecord) {
+      this.fillRect.x = x;
+      this.fillRect.y = y;
+    }
+    if (height && this.fillRect.height < height) {
+      this.fillRect.height = height;
+    }
+    this.fillRect.width += width;
+    this.fillColor = color;
+    this.fillDecorationStyle = decorationStyle;
+  }
+}
+class Highlight extends AbstractRichText {
+  constructor(draw) {
+    super();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    if (!this.fillRect.width)
+      return;
+    const { highlightAlpha } = this.options;
+    const { x, y, width, height } = this.fillRect;
+    ctx.save();
+    ctx.globalAlpha = highlightAlpha;
+    ctx.fillStyle = this.fillColor;
+    ctx.fillRect(x, y, width, height);
+    ctx.restore();
+    this.clearFillInfo();
+  }
+}
+class Margin {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  render(ctx, pageNo) {
+    const { marginIndicatorColor, pageMode } = this.options;
+    const width = this.draw.getWidth();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
+    const margins = this.draw.getMargins();
+    const marginIndicatorSize = this.draw.getMarginIndicatorSize();
+    ctx.save();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = marginIndicatorColor;
+    ctx.beginPath();
+    const leftTopPoint = [margins[3], margins[0]];
+    const rightTopPoint = [width - margins[1], margins[0]];
+    const leftBottomPoint = [margins[3], height - margins[2]];
+    const rightBottomPoint = [
+      width - margins[1],
+      height - margins[2]
+    ];
+    ctx.moveTo(leftTopPoint[0] - marginIndicatorSize, leftTopPoint[1]);
+    ctx.lineTo(...leftTopPoint);
+    ctx.lineTo(leftTopPoint[0], leftTopPoint[1] - marginIndicatorSize);
+    ctx.moveTo(rightTopPoint[0] + marginIndicatorSize, rightTopPoint[1]);
+    ctx.lineTo(...rightTopPoint);
+    ctx.lineTo(rightTopPoint[0], rightTopPoint[1] - marginIndicatorSize);
+    ctx.moveTo(leftBottomPoint[0] - marginIndicatorSize, leftBottomPoint[1]);
+    ctx.lineTo(...leftBottomPoint);
+    ctx.lineTo(leftBottomPoint[0], leftBottomPoint[1] + marginIndicatorSize);
+    ctx.moveTo(rightBottomPoint[0] + marginIndicatorSize, rightBottomPoint[1]);
+    ctx.lineTo(...rightBottomPoint);
+    ctx.lineTo(rightBottomPoint[0], rightBottomPoint[1] + marginIndicatorSize);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+class Search {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.position = draw.getPosition();
+    this.searchNavigateIndex = null;
+    this.searchKeyword = null;
+    this.searchMatchList = [];
+  }
+  getSearchKeyword() {
+    return this.searchKeyword;
+  }
+  setSearchKeyword(payload) {
+    this.searchKeyword = payload;
+    this.searchNavigateIndex = null;
+  }
+  searchNavigatePre() {
+    if (!this.searchMatchList.length || !this.searchKeyword)
+      return null;
+    if (this.searchNavigateIndex === null) {
+      this.searchNavigateIndex = 0;
+    } else {
+      let index2 = this.searchNavigateIndex - 1;
+      let isExistPre = false;
+      const searchNavigateId = this.searchMatchList[this.searchNavigateIndex].groupId;
+      while (index2 >= 0) {
+        const match = this.searchMatchList[index2];
+        if (searchNavigateId !== match.groupId) {
+          isExistPre = true;
+          this.searchNavigateIndex = index2 - (this.searchKeyword.length - 1);
+          break;
+        }
+        index2--;
+      }
+      if (!isExistPre) {
+        const lastSearchMatch = this.searchMatchList[this.searchMatchList.length - 1];
+        if (lastSearchMatch.groupId === searchNavigateId)
+          return null;
+        this.searchNavigateIndex = this.searchMatchList.length - 1 - (this.searchKeyword.length - 1);
+      }
+    }
+    return this.searchNavigateIndex;
+  }
+  searchNavigateNext() {
+    if (!this.searchMatchList.length || !this.searchKeyword)
+      return null;
+    if (this.searchNavigateIndex === null) {
+      this.searchNavigateIndex = 0;
+    } else {
+      let index2 = this.searchNavigateIndex + 1;
+      let isExistNext = false;
+      const searchNavigateId = this.searchMatchList[this.searchNavigateIndex].groupId;
+      while (index2 < this.searchMatchList.length) {
+        const match = this.searchMatchList[index2];
+        if (searchNavigateId !== match.groupId) {
+          isExistNext = true;
+          this.searchNavigateIndex = index2;
+          break;
+        }
+        index2++;
+      }
+      if (!isExistNext) {
+        const firstSearchMatch = this.searchMatchList[0];
+        if (firstSearchMatch.groupId === searchNavigateId)
+          return null;
+        this.searchNavigateIndex = 0;
+      }
+    }
+    return this.searchNavigateIndex;
+  }
+  searchNavigateScrollIntoView(position) {
+    const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const preY = pageNo * (height + pageGap);
+    const anchor = document.createElement("div");
+    anchor.style.position = "absolute";
+    const ANCHOR_OVERFLOW_SIZE = 50;
+    anchor.style.width = `${rightTop[0] - leftTop[0] + ANCHOR_OVERFLOW_SIZE}px`;
+    anchor.style.height = `${leftBottom[1] - leftTop[1] + ANCHOR_OVERFLOW_SIZE}px`;
+    anchor.style.left = `${leftTop[0]}px`;
+    anchor.style.top = `${leftTop[1] + preY}px`;
+    this.draw.getContainer().append(anchor);
+    anchor.scrollIntoView(false);
+    anchor.remove();
+  }
+  getSearchNavigateIndexList() {
+    if (this.searchNavigateIndex === null || !this.searchKeyword)
+      return [];
+    return new Array(this.searchKeyword.length).fill(this.searchNavigateIndex).map((navigate, index2) => navigate + index2);
+  }
+  getSearchMatchList() {
+    return this.searchMatchList;
+  }
+  getSearchNavigateInfo() {
+    if (!this.searchKeyword || !this.searchMatchList.length)
+      return null;
+    const index2 = this.searchNavigateIndex !== null ? this.searchNavigateIndex / this.searchKeyword.length + 1 : 0;
+    let count = 0;
+    let groupId = null;
+    for (let s = 0; s < this.searchMatchList.length; s++) {
+      const match = this.searchMatchList[s];
+      if (groupId === match.groupId)
+        continue;
+      groupId = match.groupId;
+      count += 1;
+    }
+    return {
+      index: index2,
+      count
+    };
+  }
+  getMatchList(payload, originalElementList) {
+    const keyword = payload.toLocaleLowerCase();
+    const searchMatchList = [];
+    const elementListGroup = [];
+    const originalElementListLength = originalElementList.length;
+    const tableIndexList = [];
+    for (let e = 0; e < originalElementListLength; e++) {
+      const element = originalElementList[e];
+      if (element.type === ElementType.TABLE) {
+        tableIndexList.push(e);
+      }
+    }
+    let i = 0;
+    let elementIndex = 0;
+    while (elementIndex < originalElementListLength - 1) {
+      const endIndex = tableIndexList.length ? tableIndexList[i] : originalElementListLength;
+      const pageElement = originalElementList.slice(elementIndex, endIndex);
+      if (pageElement.length) {
+        elementListGroup.push({
+          index: elementIndex,
+          type: EditorContext.PAGE,
+          elementList: pageElement
+        });
+      }
+      const tableElement = originalElementList[endIndex];
+      if (tableElement) {
+        elementListGroup.push({
+          index: endIndex,
+          type: EditorContext.TABLE,
+          elementList: [tableElement]
+        });
+      }
+      elementIndex = endIndex + 1;
+      i++;
+    }
+    function searchClosure(payload2, type, elementList, restArgs) {
+      if (!payload2)
+        return;
+      const text = elementList.map((e) => !e.type || TEXTLIKE_ELEMENT_TYPE.includes(e.type) && e.controlComponent !== ControlComponent.CHECKBOX ? e.value : ZERO).filter(Boolean).join("").toLocaleLowerCase();
+      const matchStartIndexList = [];
+      let index2 = text.indexOf(payload2);
+      while (index2 !== -1) {
+        matchStartIndexList.push(index2);
+        index2 = text.indexOf(payload2, index2 + payload2.length);
+      }
+      for (let m = 0; m < matchStartIndexList.length; m++) {
+        const startIndex = matchStartIndexList[m];
+        const groupId = getUUID();
+        for (let i2 = 0; i2 < payload2.length; i2++) {
+          const index22 = startIndex + i2 + ((restArgs == null ? void 0 : restArgs.startIndex) || 0);
+          searchMatchList.push({
+            type,
+            index: index22,
+            groupId,
+            ...restArgs
+          });
+        }
+      }
+    }
+    for (let e = 0; e < elementListGroup.length; e++) {
+      const group2 = elementListGroup[e];
+      if (group2.type === EditorContext.TABLE) {
+        const tableElement = group2.elementList[0];
+        for (let t = 0; t < tableElement.trList.length; t++) {
+          const tr = tableElement.trList[t];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const restArgs = {
+              tableId: tableElement.id,
+              tableIndex: group2.index,
+              trIndex: t,
+              tdIndex: d,
+              tdId: td.id
+            };
+            searchClosure(keyword, group2.type, td.value, restArgs);
+          }
+        }
+      } else {
+        searchClosure(keyword, group2.type, group2.elementList, {
+          startIndex: group2.index
+        });
+      }
+    }
+    return searchMatchList;
+  }
+  compute(payload) {
+    this.searchMatchList = this.getMatchList(payload, this.draw.getOriginalElementList());
+  }
+  render(ctx, pageIndex) {
+    var _a, _b;
+    if (!this.searchMatchList || !this.searchMatchList.length || !this.searchKeyword) {
+      return;
+    }
+    const { searchMatchAlpha, searchMatchColor, searchNavigateMatchColor } = this.options;
+    const positionList = this.position.getOriginalPositionList();
+    const elementList = this.draw.getOriginalElementList();
+    ctx.save();
+    ctx.globalAlpha = searchMatchAlpha;
+    for (let s = 0; s < this.searchMatchList.length; s++) {
+      const searchMatch = this.searchMatchList[s];
+      let position = null;
+      if (searchMatch.type === EditorContext.TABLE) {
+        const { tableIndex, trIndex, tdIndex, index: index2 } = searchMatch;
+        position = (_b = (_a = elementList[tableIndex]) == null ? void 0 : _a.trList[trIndex].tdList[tdIndex]) == null ? void 0 : _b.positionList[index2];
+      } else {
+        position = positionList[searchMatch.index];
+      }
+      if (!position)
+        continue;
+      const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position;
+      if (pageNo !== pageIndex)
+        continue;
+      const searchMatchIndexList = this.getSearchNavigateIndexList();
+      if (searchMatchIndexList.includes(s)) {
+        ctx.fillStyle = searchNavigateMatchColor;
+        const preSearchMatch = this.searchMatchList[s - 1];
+        if (!preSearchMatch || preSearchMatch.groupId !== searchMatch.groupId) {
+          this.searchNavigateScrollIntoView(position);
+        }
+      } else {
+        ctx.fillStyle = searchMatchColor;
+      }
+      const x = leftTop[0];
+      const y = leftTop[1];
+      const width = rightTop[0] - leftTop[0];
+      const height = leftBottom[1] - leftTop[1];
+      ctx.fillRect(x, y, width, height);
+    }
+    ctx.restore();
+  }
+}
+class Strikeout extends AbstractRichText {
+  constructor(draw) {
+    super();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    if (!this.fillRect.width)
+      return;
+    const { scale, strikeoutColor } = this.options;
+    const { x, y, width } = this.fillRect;
+    ctx.save();
+    ctx.lineWidth = scale;
+    ctx.strokeStyle = strikeoutColor;
+    const adjustY = y + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(x, adjustY);
+    ctx.lineTo(x + width, adjustY);
+    ctx.stroke();
+    ctx.restore();
+    this.clearFillInfo();
+  }
+}
+var TextDecorationStyle;
+(function(TextDecorationStyle2) {
+  TextDecorationStyle2["SOLID"] = "solid";
+  TextDecorationStyle2["DOUBLE"] = "double";
+  TextDecorationStyle2["DASHED"] = "dashed";
+  TextDecorationStyle2["DOTTED"] = "dotted";
+  TextDecorationStyle2["WAVY"] = "wavy";
+})(TextDecorationStyle || (TextDecorationStyle = {}));
+var DashType;
+(function(DashType2) {
+  DashType2["SOLID"] = "solid";
+  DashType2["DASHED"] = "dashed";
+  DashType2["DOTTED"] = "dotted";
+})(DashType || (DashType = {}));
+class Underline extends AbstractRichText {
+  constructor(draw) {
+    super();
+    this.options = draw.getOptions();
+  }
+  _drawLine(ctx, startX, startY, width, dashType) {
+    const endX = startX + width;
+    ctx.beginPath();
+    switch (dashType) {
+      case DashType.DASHED:
+        ctx.setLineDash([3, 1]);
+        break;
+      case DashType.DOTTED:
+        ctx.setLineDash([1, 1]);
+        break;
+    }
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, startY);
+    ctx.stroke();
+  }
+  _drawDouble(ctx, startX, startY, width) {
+    const SPACING = 3;
+    const endX = startX + width;
+    const endY = startY + SPACING * this.options.scale;
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, startY);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(startX, endY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+  }
+  _drawWave(ctx, startX, startY, width) {
+    const { scale } = this.options;
+    const AMPLITUDE = 1.2 * scale;
+    const FREQUENCY = 1 / scale;
+    const adjustY = startY + 2 * AMPLITUDE;
+    ctx.beginPath();
+    for (let x = 0; x < width; x++) {
+      const y = AMPLITUDE * Math.sin(FREQUENCY * x);
+      ctx.lineTo(startX + x, adjustY + y);
+    }
+    ctx.stroke();
+  }
+  render(ctx) {
+    if (!this.fillRect.width)
+      return;
+    const { underlineColor, scale } = this.options;
+    const { x, y, width } = this.fillRect;
+    ctx.save();
+    ctx.strokeStyle = this.fillColor || underlineColor;
+    ctx.lineWidth = scale;
+    const adjustY = Math.floor(y + 2 * ctx.lineWidth) + 0.5;
+    switch (this.fillDecorationStyle) {
+      case TextDecorationStyle.WAVY:
+        this._drawWave(ctx, x, adjustY, width);
+        break;
+      case TextDecorationStyle.DOUBLE:
+        this._drawDouble(ctx, x, adjustY, width);
+        break;
+      case TextDecorationStyle.DASHED:
+        this._drawLine(ctx, x, adjustY, width, DashType.DASHED);
+        break;
+      case TextDecorationStyle.DOTTED:
+        this._drawLine(ctx, x, adjustY, width, DashType.DOTTED);
+        break;
+      default:
+        this._drawLine(ctx, x, adjustY, width);
+        break;
+    }
+    ctx.restore();
+    this.clearFillInfo();
+  }
+}
+class TextParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.ctx = draw.getCtx();
+    this.curX = -1;
+    this.curY = -1;
+    this.text = "";
+    this.curStyle = "";
+    this.cacheMeasureText = /* @__PURE__ */ new Map();
+  }
+  measureBasisWord(ctx, font) {
+    ctx.save();
+    ctx.font = font;
+    const textMetrics = this.measureText(ctx, {
+      value: METRICS_BASIS_TEXT
+    });
+    ctx.restore();
+    return textMetrics;
+  }
+  measureWord(ctx, elementList, curIndex) {
+    const LETTER_REG = this.draw.getLetterReg();
+    let width = 0;
+    let endElement = elementList[curIndex];
+    let i = curIndex;
+    while (i < elementList.length) {
+      const element = elementList[i];
+      if (element.type && element.type !== ElementType.TEXT || !LETTER_REG.test(element.value)) {
+        endElement = element;
+        break;
+      }
+      width += this.measureText(ctx, element).width;
+      i++;
+    }
+    return {
+      width,
+      endElement
+    };
+  }
+  measurePunctuationWidth(ctx, element) {
+    if (!element || !PUNCTUATION_LIST.includes(element.value))
+      return 0;
+    return this.measureText(ctx, element).width;
+  }
+  measureText(ctx, element) {
+    if (element.width) {
+      const textMetrics2 = ctx.measureText(element.value);
+      return {
+        width: element.width,
+        actualBoundingBoxAscent: textMetrics2.actualBoundingBoxAscent,
+        actualBoundingBoxDescent: textMetrics2.actualBoundingBoxDescent,
+        actualBoundingBoxLeft: textMetrics2.actualBoundingBoxLeft,
+        actualBoundingBoxRight: textMetrics2.actualBoundingBoxRight,
+        fontBoundingBoxAscent: textMetrics2.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: textMetrics2.fontBoundingBoxDescent
+      };
+    }
+    const id = `${element.value}${ctx.font}`;
+    const cacheTextMetrics = this.cacheMeasureText.get(id);
+    if (cacheTextMetrics) {
+      return cacheTextMetrics;
+    }
+    const textMetrics = ctx.measureText(element.value);
+    this.cacheMeasureText.set(id, textMetrics);
+    return textMetrics;
+  }
+  complete() {
+    this._render();
+    this.text = "";
+  }
+  record(ctx, element, x, y) {
+    this.ctx = ctx;
+    if (this.options.renderMode === RenderMode.COMPATIBILITY) {
+      this._setCurXY(x, y);
+      this.text = element.value;
+      this.curStyle = element.style;
+      this.curColor = element.color;
+      this.complete();
+      return;
+    }
+    if (!this.text) {
+      this._setCurXY(x, y);
+    }
+    if (this.curStyle && element.style !== this.curStyle || element.color !== this.curColor) {
+      this.complete();
+      this._setCurXY(x, y);
+    }
+    this.text += element.value;
+    this.curStyle = element.style;
+    this.curColor = element.color;
+  }
+  _setCurXY(x, y) {
+    this.curX = x;
+    this.curY = y;
+  }
+  _render() {
+    if (!this.text || !~this.curX || !~this.curX)
+      return;
+    this.ctx.save();
+    this.ctx.font = this.curStyle;
+    this.ctx.fillStyle = this.curColor || this.options.defaultColor;
+    this.ctx.fillText(this.text, this.curX, this.curY);
+    this.ctx.restore();
+  }
+}
+class PageNumber {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  render(ctx, pageNo) {
+    const { scale, pageMode, pageNumber: { size, font, color, rowFlex, numberType, format, startPageNo, fromPageNo } } = this.options;
+    if (pageNo < fromPageNo)
+      return;
+    let text = format;
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO);
+    if (pageNoReg.test(text)) {
+      const realPageNo = pageNo + startPageNo - fromPageNo;
+      const pageNoText = numberType === NumberType.CHINESE ? convertNumberToChinese(realPageNo) : `${realPageNo}`;
+      text = text.replace(pageNoReg, pageNoText);
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT);
+    if (pageCountReg.test(text)) {
+      const pageCount = this.draw.getPageCount() - fromPageNo;
+      const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}`;
+      text = text.replace(pageCountReg, pageCountText);
+    }
+    const width = this.draw.getWidth();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
+    const pageNumberBottom = this.draw.getPageNumberBottom();
+    const y = height - pageNumberBottom;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.font = `${size * scale}px ${font}`;
+    let x = 0;
+    const margins = this.draw.getMargins();
+    const { width: textWidth } = ctx.measureText(text);
+    if (rowFlex === RowFlex.CENTER) {
+      x = (width - textWidth) / 2;
+    } else if (rowFlex === RowFlex.RIGHT) {
+      x = width - textWidth - margins[1];
+    } else {
+      x = margins[3];
+    }
+    ctx.fillText(text, x, y);
+    ctx.restore();
+  }
+}
+class ScrollObserver {
+  constructor(draw) {
+    this._observer = debounce(() => {
+      const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo();
+      this.draw.setIntersectionPageNo(intersectionPageNo);
+      this.draw.setVisiblePageNoList(visiblePageNoList);
+    }, 150);
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.scrollContainer = this.getScrollContainer();
+    setTimeout(() => {
+      if (!window.scrollY) {
+        this._observer();
+      }
+    });
+    this._addEvent();
+  }
+  getScrollContainer() {
+    return this.options.scrollContainerSelector ? document.querySelector(this.options.scrollContainerSelector) || document : document;
+  }
+  _addEvent() {
+    this.scrollContainer.addEventListener("scroll", this._observer);
+  }
+  removeEvent() {
+    this.scrollContainer.removeEventListener("scroll", this._observer);
+  }
+  getElementVisibleInfo(element) {
+    const rect = element.getBoundingClientRect();
+    const viewHeight = this.scrollContainer === document ? Math.max(document.documentElement.clientHeight, window.innerHeight) : this.scrollContainer.clientHeight;
+    const visibleHeight = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0);
+    return {
+      intersectionHeight: visibleHeight > 0 ? visibleHeight : 0
+    };
+  }
+  getPageVisibleInfo() {
+    const pageList = this.draw.getPageList();
+    const visiblePageNoList = [];
+    let intersectionPageNo = 0;
+    let intersectionMaxHeight = 0;
+    for (let i = 0; i < pageList.length; i++) {
+      const curPage = pageList[i];
+      const { intersectionHeight } = this.getElementVisibleInfo(curPage);
+      if (intersectionMaxHeight && !intersectionHeight)
+        break;
+      if (intersectionHeight) {
+        visiblePageNoList.push(i);
+      }
+      if (intersectionHeight > intersectionMaxHeight) {
+        intersectionMaxHeight = intersectionHeight;
+        intersectionPageNo = i;
+      }
+    }
+    return {
+      intersectionPageNo,
+      visiblePageNoList
+    };
+  }
+}
+class SelectionObserver {
+  constructor(draw) {
+    this.step = 5;
+    this.thresholdPoints = [70, 40, 10, 20];
+    this._mousedown = () => {
+      this.isMousedown = true;
+      this.clientWidth = this.selectionContainer instanceof Document ? document.documentElement.clientWidth : this.selectionContainer.clientWidth;
+      this.clientHeight = this.selectionContainer instanceof Document ? document.documentElement.clientHeight : this.selectionContainer.clientHeight;
+      if (!(this.selectionContainer instanceof Document)) {
+        const rect = this.selectionContainer.getBoundingClientRect();
+        this.containerRect = rect;
+      }
+    };
+    this._mouseup = () => {
+      this.isMousedown = false;
+      this._stopMove();
+    };
+    this._mousemove = (evt) => {
+      if (!this.isMousedown || this.rangeManager.getIsCollapsed())
+        return;
+      let { x, y } = evt;
+      if (this.containerRect) {
+        x = x - this.containerRect.x;
+        y = y - this.containerRect.y;
+      }
+      if (y < this.thresholdPoints[0]) {
+        this._startMove(MoveDirection.UP);
+      } else if (this.clientHeight - y <= this.thresholdPoints[1]) {
+        this._startMove(MoveDirection.DOWN);
+      } else if (x < this.thresholdPoints[2]) {
+        this._startMove(MoveDirection.LEFT);
+      } else if (this.clientWidth - x < this.thresholdPoints[3]) {
+        this._startMove(MoveDirection.RIGHT);
+      } else {
+        this._stopMove();
+      }
+    };
+    this.rangeManager = draw.getRange();
+    const { scrollContainerSelector } = draw.getOptions();
+    this.selectionContainer = scrollContainerSelector ? document.querySelector(scrollContainerSelector) || document : document;
+    this.requestAnimationFrameId = null;
+    this.isMousedown = false;
+    this.isMoving = false;
+    this.clientWidth = 0;
+    this.clientHeight = 0;
+    this.containerRect = null;
+    this._addEvent();
+  }
+  _addEvent() {
+    const container = this.selectionContainer;
+    container.addEventListener("mousedown", this._mousedown);
+    container.addEventListener("mousemove", this._mousemove);
+    container.addEventListener("mouseup", this._mouseup);
+    document.addEventListener("mouseleave", this._mouseup);
+  }
+  removeEvent() {
+    const container = this.selectionContainer;
+    container.removeEventListener("mousedown", this._mousedown);
+    container.removeEventListener("mousemove", this._mousemove);
+    container.removeEventListener("mouseup", this._mouseup);
+    document.removeEventListener("mouseleave", this._mouseup);
+  }
+  _move(direction) {
+    const container = this.selectionContainer instanceof Document ? window : this.selectionContainer;
+    const x = this.selectionContainer instanceof Document ? window.scrollX : container.scrollLeft;
+    const y = this.selectionContainer instanceof Document ? window.scrollY : container.scrollTop;
+    if (direction === MoveDirection.DOWN) {
+      container.scrollTo(x, y + this.step);
+    } else if (direction === MoveDirection.UP) {
+      container.scrollTo(x, y - this.step);
+    } else if (direction === MoveDirection.LEFT) {
+      container.scrollTo(x - this.step, y);
+    } else {
+      container.scrollTo(x + this.step, y);
+    }
+    this.requestAnimationFrameId = window.requestAnimationFrame(this._move.bind(this, direction));
+  }
+  _startMove(direction) {
+    if (this.isMoving)
+      return;
+    this.isMoving = true;
+    this._move(direction);
+  }
+  _stopMove() {
+    if (this.requestAnimationFrameId) {
+      window.cancelAnimationFrame(this.requestAnimationFrameId);
+      this.requestAnimationFrameId = null;
+      this.isMoving = false;
+    }
+  }
+}
+var TableBorder;
+(function(TableBorder2) {
+  TableBorder2["ALL"] = "all";
+  TableBorder2["EMPTY"] = "empty";
+  TableBorder2["EXTERNAL"] = "external";
+})(TableBorder || (TableBorder = {}));
+var TdBorder;
+(function(TdBorder2) {
+  TdBorder2["TOP"] = "top";
+  TdBorder2["RIGHT"] = "right";
+  TdBorder2["BOTTOM"] = "bottom";
+  TdBorder2["LEFT"] = "left";
+})(TdBorder || (TdBorder = {}));
+var TdSlash;
+(function(TdSlash2) {
+  TdSlash2["FORWARD"] = "forward";
+  TdSlash2["BACK"] = "back";
+})(TdSlash || (TdSlash = {}));
+class TableParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.range = draw.getRange();
+    this.options = draw.getOptions();
+  }
+  getTrListGroupByCol(payload) {
+    var _a;
+    const trList = deepClone(payload);
+    for (let t = 0; t < payload.length; t++) {
+      const tr = trList[t];
+      for (let d = tr.tdList.length - 1; d >= 0; d--) {
+        const td = tr.tdList[d];
+        const { rowspan, rowIndex, colIndex } = td;
+        const curRowIndex = rowIndex + rowspan - 1;
+        if (curRowIndex !== d) {
+          const changeTd = tr.tdList.splice(d, 1)[0];
+          (_a = trList[curRowIndex]) == null ? void 0 : _a.tdList.splice(colIndex, 0, changeTd);
+        }
+      }
+    }
+    return trList;
+  }
+  getRangeRowCol() {
+    const { isTable, index: index2, trIndex, tdIndex } = this.draw.getPosition().getPositionContext();
+    if (!isTable)
+      return null;
+    const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange();
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    if (!isCrossRowCol) {
+      return [[curTrList[trIndex].tdList[tdIndex]]];
+    }
+    let startTd = curTrList[startTrIndex].tdList[startTdIndex];
+    let endTd = curTrList[endTrIndex].tdList[endTdIndex];
+    if (startTd.x > endTd.x || startTd.y > endTd.y) {
+      [startTd, endTd] = [endTd, startTd];
+    }
+    const startColIndex = startTd.colIndex;
+    const endColIndex = endTd.colIndex + (endTd.colspan - 1);
+    const startRowIndex = startTd.rowIndex;
+    const endRowIndex = endTd.rowIndex + (endTd.rowspan - 1);
+    const rowCol = [];
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdList = [];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        const tdColIndex = td.colIndex;
+        const tdRowIndex = td.rowIndex;
+        if (tdColIndex >= startColIndex && tdColIndex <= endColIndex && tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex) {
+          tdList.push(td);
+        }
+      }
+      if (tdList.length) {
+        rowCol.push(tdList);
+      }
+    }
+    return rowCol.length ? rowCol : null;
+  }
+  _drawOuterBorder(payload) {
+    const { ctx, startX, startY, width, height, isDrawFullBorder } = payload;
+    ctx.beginPath();
+    const x = Math.round(startX);
+    const y = Math.round(startY);
+    ctx.translate(0.5, 0.5);
+    if (isDrawFullBorder) {
+      ctx.rect(x, y, width, height);
+    } else {
+      ctx.moveTo(x, y + height);
+      ctx.lineTo(x, y);
+      ctx.lineTo(x + width, y);
+    }
+    ctx.stroke();
+    ctx.translate(-0.5, -0.5);
+  }
+  _drawSlash(ctx, td, startX, startY) {
+    var _a, _b;
+    const { scale } = this.options;
+    ctx.save();
+    const width = td.width * scale;
+    const height = td.height * scale;
+    const x = Math.round(td.x * scale + startX);
+    const y = Math.round(td.y * scale + startY);
+    if ((_a = td.slashTypes) == null ? void 0 : _a.includes(TdSlash.FORWARD)) {
+      ctx.moveTo(x + width, y);
+      ctx.lineTo(x, y + height);
+    }
+    if ((_b = td.slashTypes) == null ? void 0 : _b.includes(TdSlash.BACK)) {
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + width, y + height);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+  _drawBorder(ctx, element, startX, startY) {
+    var _a, _b, _c, _d, _e, _f;
+    const { colgroup, trList, borderType } = element;
+    if (!colgroup || !trList)
+      return;
+    const { scale } = this.options;
+    const tableWidth = element.width * scale;
+    const tableHeight = element.height * scale;
+    const isEmptyBorderType = borderType === TableBorder.EMPTY;
+    const isExternalBorderType = borderType === TableBorder.EXTERNAL;
+    ctx.save();
+    ctx.lineWidth = scale;
+    if (!isEmptyBorderType) {
+      this._drawOuterBorder({
+        ctx,
+        startX,
+        startY,
+        width: tableWidth,
+        height: tableHeight,
+        isDrawFullBorder: isExternalBorderType
+      });
+    }
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        if ((_a = td.slashTypes) == null ? void 0 : _a.length) {
+          this._drawSlash(ctx, td, startX, startY);
+        }
+        if (!((_b = td.borderTypes) == null ? void 0 : _b.length) && (isEmptyBorderType || isExternalBorderType)) {
+          continue;
+        }
+        const width = td.width * scale;
+        const height = td.height * scale;
+        const x = Math.round(td.x * scale + startX + width);
+        const y = Math.round(td.y * scale + startY);
+        ctx.translate(0.5, 0.5);
+        ctx.beginPath();
+        if ((_c = td.borderTypes) == null ? void 0 : _c.includes(TdBorder.TOP)) {
+          ctx.moveTo(x - width, y);
+          ctx.lineTo(x, y);
+          ctx.stroke();
+        }
+        if ((_d = td.borderTypes) == null ? void 0 : _d.includes(TdBorder.RIGHT)) {
+          ctx.moveTo(x, y);
+          ctx.lineTo(x, y + height);
+          ctx.stroke();
+        }
+        if ((_e = td.borderTypes) == null ? void 0 : _e.includes(TdBorder.BOTTOM)) {
+          ctx.moveTo(x, y + height);
+          ctx.lineTo(x - width, y + height);
+          ctx.stroke();
+        }
+        if ((_f = td.borderTypes) == null ? void 0 : _f.includes(TdBorder.LEFT)) {
+          ctx.moveTo(x - width, y);
+          ctx.lineTo(x - width, y + height);
+          ctx.stroke();
+        }
+        if (!isEmptyBorderType && !isExternalBorderType) {
+          ctx.moveTo(x, y);
+          ctx.lineTo(x, y + height);
+          ctx.lineTo(x - width, y + height);
+          ctx.stroke();
+        }
+        ctx.translate(-0.5, -0.5);
+      }
+    }
+    ctx.restore();
+  }
+  _drawBackgroundColor(ctx, element, startX, startY) {
+    const { trList } = element;
+    if (!trList)
+      return;
+    const { scale } = this.options;
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        if (!td.backgroundColor)
+          continue;
+        ctx.save();
+        const width = td.width * scale;
+        const height = td.height * scale;
+        const x = Math.round(td.x * scale + startX);
+        const y = Math.round(td.y * scale + startY);
+        ctx.fillStyle = td.backgroundColor;
+        ctx.fillRect(x, y, width, height);
+        ctx.restore();
+      }
+    }
+  }
+  getTableWidth(element) {
+    return element.colgroup.reduce((pre, cur) => pre + cur.width, 0);
+  }
+  getTableHeight(element) {
+    const trList = element.trList;
+    if (!(trList == null ? void 0 : trList.length))
+      return 0;
+    return this.getTdListByColIndex(trList, 0).reduce((pre, cur) => pre + cur.height, 0);
+  }
+  getRowCountByColIndex(trList, colIndex) {
+    return this.getTdListByColIndex(trList, colIndex).reduce((pre, cur) => pre + cur.rowspan, 0);
+  }
+  getTdListByColIndex(trList, colIndex) {
+    const data2 = [];
+    for (let r = 0; r < trList.length; r++) {
+      const tdList = trList[r].tdList;
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d];
+        const min = td.colIndex;
+        const max = min + td.colspan - 1;
+        if (colIndex >= min && colIndex <= max) {
+          data2.push(td);
+        }
+      }
+    }
+    return data2;
+  }
+  computeRowColInfo(element) {
+    const { colgroup, trList } = element;
+    if (!colgroup || !trList)
+      return;
+    let preX = 0;
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      const isLastTr = trList.length - 1 === t;
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        let colIndex = 0;
+        if (trList.length > 1 && t !== 0) {
+          const preTd = tr.tdList[d - 1];
+          const start = preTd ? preTd.colIndex + preTd.colspan : d;
+          for (let c = start; c < colgroup.length; c++) {
+            const rowCount = this.getRowCountByColIndex(trList.slice(0, t), c);
+            if (rowCount === t) {
+              colIndex = c;
+              let preColWidth = 0;
+              for (let preC = 0; preC < c; preC++) {
+                preColWidth += colgroup[preC].width;
+              }
+              preX = preColWidth;
+              break;
+            }
+          }
+        } else {
+          const preTd = tr.tdList[d - 1];
+          if (preTd) {
+            colIndex = preTd.colIndex + preTd.colspan;
+          }
+        }
+        let width = 0;
+        for (let col = 0; col < td.colspan; col++) {
+          width += colgroup[col + colIndex].width;
+        }
+        let height = 0;
+        for (let row = 0; row < td.rowspan; row++) {
+          const curTr = trList[row + t] || trList[t];
+          height += curTr.height;
+        }
+        const isLastRowTd = tr.tdList.length - 1 === d;
+        let isLastColTd = isLastTr;
+        if (!isLastColTd) {
+          if (td.rowspan > 1) {
+            const nextTrLength = trList.length - 1 - t;
+            isLastColTd = td.rowspan - 1 === nextTrLength;
+          }
+        }
+        const isLastTd = isLastTr && isLastRowTd;
+        td.isLastRowTd = isLastRowTd;
+        td.isLastColTd = isLastColTd;
+        td.isLastTd = isLastTd;
+        td.x = preX;
+        let preY = 0;
+        for (let preR = 0; preR < t; preR++) {
+          const preTdList = trList[preR].tdList;
+          for (let preD = 0; preD < preTdList.length; preD++) {
+            const td2 = preTdList[preD];
+            if (colIndex >= td2.colIndex && colIndex < td2.colIndex + td2.colspan) {
+              preY += td2.height;
+              break;
+            }
+          }
+        }
+        td.y = preY;
+        td.width = width;
+        td.height = height;
+        td.rowIndex = t;
+        td.colIndex = colIndex;
+        td.trIndex = t;
+        td.tdIndex = d;
+        preX += width;
+        if (isLastRowTd && !isLastTd) {
+          preX = 0;
+        }
+      }
+    }
+  }
+  drawRange(ctx, element, startX, startY) {
+    const { scale, rangeAlpha, rangeColor } = this.options;
+    const { type, trList } = element;
+    if (!trList || type !== ElementType.TABLE)
+      return;
+    const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange();
+    if (!isCrossRowCol)
+      return;
+    let startTd = trList[startTrIndex].tdList[startTdIndex];
+    let endTd = trList[endTrIndex].tdList[endTdIndex];
+    if (startTd.x > endTd.x || startTd.y > endTd.y) {
+      [startTd, endTd] = [endTd, startTd];
+    }
+    const startColIndex = startTd.colIndex;
+    const endColIndex = endTd.colIndex + (endTd.colspan - 1);
+    const startRowIndex = startTd.rowIndex;
+    const endRowIndex = endTd.rowIndex + (endTd.rowspan - 1);
+    ctx.save();
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        const tdColIndex = td.colIndex;
+        const tdRowIndex = td.rowIndex;
+        if (tdColIndex >= startColIndex && tdColIndex <= endColIndex && tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex) {
+          const x = td.x * scale;
+          const y = td.y * scale;
+          const width = td.width * scale;
+          const height = td.height * scale;
+          ctx.globalAlpha = rangeAlpha;
+          ctx.fillStyle = rangeColor;
+          ctx.fillRect(x + startX, y + startY, width, height);
+        }
+      }
+    }
+    ctx.restore();
+  }
+  render(ctx, element, startX, startY) {
+    this._drawBackgroundColor(ctx, element, startX, startY);
+    this._drawBorder(ctx, element, startX, startY);
+  }
+}
+var TableOrder;
+(function(TableOrder2) {
+  TableOrder2["ROW"] = "row";
+  TableOrder2["COL"] = "col";
+})(TableOrder || (TableOrder = {}));
+class TableTool {
+  constructor(draw) {
+    this.MIN_TD_WIDTH = 20;
+    this.ROW_COL_OFFSET = 18;
+    this.ROW_COL_QUICK_WIDTH = 16;
+    this.ROW_COL_QUICK_OFFSET = 5;
+    this.ROW_COL_QUICK_POSITION = this.ROW_COL_OFFSET + (this.ROW_COL_OFFSET - this.ROW_COL_QUICK_WIDTH) / 2;
+    this.BORDER_VALUE = 4;
+    this.TABLE_SELECT_OFFSET = 20;
+    this.draw = draw;
+    this.canvas = draw.getPage();
+    this.options = draw.getOptions();
+    this.position = draw.getPosition();
+    this.container = draw.getContainer();
+    this.toolRowContainer = null;
+    this.toolRowAddBtn = null;
+    this.toolColAddBtn = null;
+    this.toolTableSelectBtn = null;
+    this.toolColContainer = null;
+    this.toolBorderContainer = null;
+    this.anchorLine = null;
+    this.mousedownX = 0;
+    this.mousedownY = 0;
+  }
+  dispose() {
+    var _a, _b, _c, _d, _e, _f;
+    (_a = this.toolRowContainer) == null ? void 0 : _a.remove();
+    (_b = this.toolRowAddBtn) == null ? void 0 : _b.remove();
+    (_c = this.toolColAddBtn) == null ? void 0 : _c.remove();
+    (_d = this.toolTableSelectBtn) == null ? void 0 : _d.remove();
+    (_e = this.toolColContainer) == null ? void 0 : _e.remove();
+    (_f = this.toolBorderContainer) == null ? void 0 : _f.remove();
+    this.toolRowContainer = null;
+    this.toolRowAddBtn = null;
+    this.toolColAddBtn = null;
+    this.toolTableSelectBtn = null;
+    this.toolColContainer = null;
+    this.toolBorderContainer = null;
+  }
+  render() {
+    const { isTable, index: index2, trIndex, tdIndex } = this.position.getPositionContext();
+    if (!isTable)
+      return;
+    this.dispose();
+    const { scale } = this.options;
+    const elementList = this.draw.getOriginalElementList();
+    const positionList = this.position.getOriginalPositionList();
+    const element = elementList[index2];
+    const position = positionList[index2];
+    const { colgroup, trList } = element;
+    const { coordinate: { leftTop } } = position;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const prePageHeight = this.draw.getPageNo() * (height + pageGap);
+    const tableX = leftTop[0];
+    const tableY = leftTop[1] + prePageHeight;
+    const td = element.trList[trIndex].tdList[tdIndex];
+    const rowIndex = td.rowIndex;
+    const colIndex = td.colIndex;
+    const tableHeight = element.height * scale;
+    const tableWidth = element.width * scale;
+    const tableSelectBtn = document.createElement("div");
+    tableSelectBtn.classList.add(`${EDITOR_PREFIX}-table-tool__select`);
+    tableSelectBtn.style.height = `${tableHeight * scale}`;
+    tableSelectBtn.style.left = `${tableX}px`;
+    tableSelectBtn.style.top = `${tableY}px`;
+    tableSelectBtn.style.transform = `translate(-${this.TABLE_SELECT_OFFSET * scale}px, ${-this.TABLE_SELECT_OFFSET * scale}px)`;
+    tableSelectBtn.onclick = () => {
+      this.draw.getTableOperate().tableSelectAll();
+    };
+    this.container.append(tableSelectBtn);
+    this.toolTableSelectBtn = tableSelectBtn;
+    const rowHeightList = trList.map((tr) => tr.height);
+    const rowContainer = document.createElement("div");
+    rowContainer.classList.add(`${EDITOR_PREFIX}-table-tool__row`);
+    rowContainer.style.transform = `translateX(-${this.ROW_COL_OFFSET * scale}px)`;
+    for (let r = 0; r < rowHeightList.length; r++) {
+      const rowHeight = rowHeightList[r] * scale;
+      const rowItem = document.createElement("div");
+      rowItem.classList.add(`${EDITOR_PREFIX}-table-tool__row__item`);
+      if (r === rowIndex) {
+        rowItem.classList.add("active");
+      }
+      const rowItemAnchor = document.createElement("div");
+      rowItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`);
+      rowItemAnchor.onmousedown = (evt) => {
+        this._mousedown({
+          evt,
+          element,
+          index: r,
+          order: TableOrder.ROW
+        });
+      };
+      rowItem.append(rowItemAnchor);
+      rowItem.style.height = `${rowHeight}px`;
+      rowContainer.append(rowItem);
+    }
+    rowContainer.style.left = `${tableX}px`;
+    rowContainer.style.top = `${tableY}px`;
+    this.container.append(rowContainer);
+    this.toolRowContainer = rowContainer;
+    const rowAddBtn = document.createElement("div");
+    rowAddBtn.classList.add(`${EDITOR_PREFIX}-table-tool__quick__add`);
+    rowAddBtn.style.height = `${tableHeight * scale}`;
+    rowAddBtn.style.left = `${tableX}px`;
+    rowAddBtn.style.top = `${tableY + tableHeight}px`;
+    rowAddBtn.style.transform = `translate(-${this.ROW_COL_QUICK_POSITION * scale}px, ${this.ROW_COL_QUICK_OFFSET * scale}px)`;
+    rowAddBtn.onclick = () => {
+      this.position.setPositionContext({
+        index: index2,
+        isTable: true,
+        trIndex: trList.length - 1,
+        tdIndex: 0
+      });
+      this.draw.getTableOperate().insertTableBottomRow();
+    };
+    this.container.append(rowAddBtn);
+    this.toolRowAddBtn = rowAddBtn;
+    const colWidthList = colgroup.map((col) => col.width);
+    const colContainer = document.createElement("div");
+    colContainer.classList.add(`${EDITOR_PREFIX}-table-tool__col`);
+    colContainer.style.transform = `translateY(-${this.ROW_COL_OFFSET * scale}px)`;
+    for (let c = 0; c < colWidthList.length; c++) {
+      const colWidth = colWidthList[c] * scale;
+      const colItem = document.createElement("div");
+      colItem.classList.add(`${EDITOR_PREFIX}-table-tool__col__item`);
+      if (c === colIndex) {
+        colItem.classList.add("active");
+      }
+      const colItemAnchor = document.createElement("div");
+      colItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`);
+      colItemAnchor.onmousedown = (evt) => {
+        this._mousedown({
+          evt,
+          element,
+          index: c,
+          order: TableOrder.COL
+        });
+      };
+      colItem.append(colItemAnchor);
+      colItem.style.width = `${colWidth}px`;
+      colContainer.append(colItem);
+    }
+    colContainer.style.left = `${tableX}px`;
+    colContainer.style.top = `${tableY}px`;
+    this.container.append(colContainer);
+    this.toolColContainer = colContainer;
+    const colAddBtn = document.createElement("div");
+    colAddBtn.classList.add(`${EDITOR_PREFIX}-table-tool__quick__add`);
+    colAddBtn.style.height = `${tableHeight * scale}`;
+    colAddBtn.style.left = `${tableX + tableWidth}px`;
+    colAddBtn.style.top = `${tableY}px`;
+    colAddBtn.style.transform = `translate(${this.ROW_COL_QUICK_OFFSET * scale}px, -${this.ROW_COL_QUICK_POSITION * scale}px)`;
+    colAddBtn.onclick = () => {
+      this.position.setPositionContext({
+        index: index2,
+        isTable: true,
+        trIndex: 0,
+        tdIndex: trList[0].tdList.length - 1 || 0
+      });
+      this.draw.getTableOperate().insertTableRightCol();
+    };
+    this.container.append(colAddBtn);
+    this.toolColAddBtn = colAddBtn;
+    const borderContainer = document.createElement("div");
+    borderContainer.classList.add(`${EDITOR_PREFIX}-table-tool__border`);
+    borderContainer.style.height = `${tableHeight}px`;
+    borderContainer.style.width = `${tableWidth}px`;
+    borderContainer.style.left = `${tableX}px`;
+    borderContainer.style.top = `${tableY}px`;
+    for (let r = 0; r < trList.length; r++) {
+      const tr = trList[r];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td2 = tr.tdList[d];
+        const rowBorder = document.createElement("div");
+        rowBorder.classList.add(`${EDITOR_PREFIX}-table-tool__border__row`);
+        rowBorder.style.width = `${td2.width * scale}px`;
+        rowBorder.style.height = `${this.BORDER_VALUE}px`;
+        rowBorder.style.top = `${(td2.y + td2.height) * scale - this.BORDER_VALUE / 2}px`;
+        rowBorder.style.left = `${td2.x * scale}px`;
+        rowBorder.onmousedown = (evt) => {
+          this._mousedown({
+            evt,
+            element,
+            index: td2.rowIndex + td2.rowspan - 1,
+            order: TableOrder.ROW
+          });
+        };
+        borderContainer.appendChild(rowBorder);
+        const colBorder = document.createElement("div");
+        colBorder.classList.add(`${EDITOR_PREFIX}-table-tool__border__col`);
+        colBorder.style.width = `${this.BORDER_VALUE}px`;
+        colBorder.style.height = `${td2.height * scale}px`;
+        colBorder.style.top = `${td2.y * scale}px`;
+        colBorder.style.left = `${(td2.x + td2.width) * scale - this.BORDER_VALUE / 2}px`;
+        colBorder.onmousedown = (evt) => {
+          this._mousedown({
+            evt,
+            element,
+            index: td2.colIndex + td2.colspan - 1,
+            order: TableOrder.COL
+          });
+        };
+        borderContainer.appendChild(colBorder);
+      }
+    }
+    this.container.append(borderContainer);
+    this.toolBorderContainer = borderContainer;
+  }
+  _mousedown(payload) {
+    const { evt, index: index2, order, element } = payload;
+    this.canvas = this.draw.getPage();
+    const { scale } = this.options;
+    const width = this.draw.getWidth();
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const prePageHeight = this.draw.getPageNo() * (height + pageGap);
+    this.mousedownX = evt.x;
+    this.mousedownY = evt.y;
+    const target = evt.target;
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const cursor = window.getComputedStyle(target).cursor;
+    document.body.style.cursor = cursor;
+    this.canvas.style.cursor = cursor;
+    let startX = 0;
+    let startY = 0;
+    const anchorLine = document.createElement("div");
+    anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line`);
+    if (order === TableOrder.ROW) {
+      anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__row`);
+      anchorLine.style.width = `${width}px`;
+      startX = 0;
+      startY = prePageHeight + this.mousedownY - canvasRect.top;
+    } else {
+      anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__col`);
+      anchorLine.style.height = `${height}px`;
+      startX = this.mousedownX - canvasRect.left;
+      startY = prePageHeight;
+    }
+    anchorLine.style.left = `${startX}px`;
+    anchorLine.style.top = `${startY}px`;
+    this.container.append(anchorLine);
+    this.anchorLine = anchorLine;
+    let dx = 0;
+    let dy = 0;
+    const mousemoveFn = (evt2) => {
+      const movePosition = this._mousemove(evt2, order, startX, startY);
+      if (movePosition) {
+        dx = movePosition.dx;
+        dy = movePosition.dy;
+      }
+    };
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", () => {
+      var _a;
+      let isChangeSize = false;
+      if (order === TableOrder.ROW) {
+        const trList = element.trList;
+        const tr = trList[index2] || trList[index2 - 1];
+        const { defaultTrMinHeight } = this.options.table;
+        if (dy < 0 && tr.height + dy < defaultTrMinHeight) {
+          dy = defaultTrMinHeight - tr.height;
+        }
+        if (dy) {
+          tr.height += dy;
+          tr.minHeight = tr.height;
+          isChangeSize = true;
+        }
+      } else {
+        const { colgroup } = element;
+        if (colgroup && dx) {
+          const innerWidth = this.draw.getInnerWidth();
+          const curColWidth = colgroup[index2].width;
+          if (dx < 0 && curColWidth + dx < this.MIN_TD_WIDTH) {
+            dx = this.MIN_TD_WIDTH - curColWidth;
+          }
+          const nextColWidth = (_a = colgroup[index2 + 1]) == null ? void 0 : _a.width;
+          if (dx > 0 && nextColWidth && nextColWidth - dx < this.MIN_TD_WIDTH) {
+            dx = nextColWidth - this.MIN_TD_WIDTH;
+          }
+          const moveColWidth = curColWidth + dx;
+          if (index2 === colgroup.length - 1) {
+            let moveTableWidth = 0;
+            for (let c = 0; c < colgroup.length; c++) {
+              const group2 = colgroup[c];
+              if (c === index2 + 1) {
+                moveTableWidth -= dx;
+              }
+              if (c === index2) {
+                moveTableWidth += moveColWidth;
+              }
+              if (c !== index2) {
+                moveTableWidth += group2.width;
+              }
+            }
+            if (moveTableWidth > innerWidth) {
+              const tableWidth = element.width;
+              dx = innerWidth - tableWidth;
+            }
+          }
+          if (dx) {
+            if (colgroup.length - 1 !== index2) {
+              colgroup[index2 + 1].width -= dx / scale;
+            }
+            colgroup[index2].width += dx / scale;
+            isChangeSize = true;
+          }
+        }
+      }
+      if (isChangeSize) {
+        this.draw.render({ isSetCursor: false });
+      }
+      anchorLine.remove();
+      document.removeEventListener("mousemove", mousemoveFn);
+      document.body.style.cursor = "";
+      this.canvas.style.cursor = "text";
+    }, {
+      once: true
+    });
+    evt.preventDefault();
+  }
+  _mousemove(evt, tableOrder, startX, startY) {
+    if (!this.anchorLine)
+      return null;
+    const dx = evt.x - this.mousedownX;
+    const dy = evt.y - this.mousedownY;
+    if (tableOrder === TableOrder.ROW) {
+      this.anchorLine.style.top = `${startY + dy}px`;
+    } else {
+      this.anchorLine.style.left = `${startX + dx}px`;
+    }
+    evt.preventDefault();
+    return { dx, dy };
+  }
+}
+class HyperlinkParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.container = draw.getContainer();
+    const { hyperlinkPopupContainer, hyperlinkDom } = this._createHyperlinkPopupDom();
+    this.hyperlinkDom = hyperlinkDom;
+    this.hyperlinkPopupContainer = hyperlinkPopupContainer;
+  }
+  _createHyperlinkPopupDom() {
+    const hyperlinkPopupContainer = document.createElement("div");
+    hyperlinkPopupContainer.classList.add(`${EDITOR_PREFIX}-hyperlink-popup`);
+    const hyperlinkDom = document.createElement("a");
+    hyperlinkDom.target = "_blank";
+    hyperlinkDom.rel = "noopener";
+    hyperlinkPopupContainer.append(hyperlinkDom);
+    this.container.append(hyperlinkPopupContainer);
+    return { hyperlinkPopupContainer, hyperlinkDom };
+  }
+  drawHyperlinkPopup(element, position) {
+    const { coordinate: { leftTop: [left2, top] }, lineHeight } = position;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const preY = this.draw.getPageNo() * (height + pageGap);
+    this.hyperlinkPopupContainer.style.display = "block";
+    this.hyperlinkPopupContainer.style.left = `${left2}px`;
+    this.hyperlinkPopupContainer.style.top = `${top + preY + lineHeight}px`;
+    const url = element.url || "#";
+    this.hyperlinkDom.href = url;
+    this.hyperlinkDom.title = url;
+    this.hyperlinkDom.innerText = url;
+  }
+  clearHyperlinkPopup() {
+    this.hyperlinkPopupContainer.style.display = "none";
+  }
+  openHyperlink(element) {
+    const newTab = window.open(element.url, "_blank");
+    if (newTab) {
+      newTab.opener = null;
+    }
+  }
+  render(ctx, element, x, y) {
+    ctx.save();
+    ctx.font = element.style;
+    if (!element.color) {
+      element.color = this.options.defaultHyperlinkColor;
+    }
+    ctx.fillStyle = element.color;
+    if (element.underline === void 0) {
+      element.underline = true;
+    }
+    ctx.fillText(element.value, x, y);
+    ctx.restore();
+  }
+}
+class Header {
+  constructor(draw, data2) {
+    this.draw = draw;
+    this.position = draw.getPosition();
+    this.options = draw.getOptions();
+    this.elementList = data2 || [];
+    this.rowList = [];
+    this.positionList = [];
+  }
+  getRowList() {
+    return this.rowList;
+  }
+  setElementList(elementList) {
+    this.elementList = elementList;
+  }
+  getElementList() {
+    return this.elementList;
+  }
+  getPositionList() {
+    return this.positionList;
+  }
+  compute() {
+    this.recovery();
+    this._computeRowList();
+    this._computePositionList();
+  }
+  recovery() {
+    this.rowList = [];
+    this.positionList = [];
+  }
+  _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth();
+    const margins = this.draw.getMargins();
+    const surroundElementList = pickSurroundElementList(this.elementList);
+    this.rowList = this.draw.computeRowList({
+      startX: margins[3],
+      startY: this.getHeaderTop(),
+      innerWidth,
+      elementList: this.elementList,
+      surroundElementList
+    });
+  }
+  _computePositionList() {
+    const headerTop = this.getHeaderTop();
+    const innerWidth = this.draw.getInnerWidth();
+    const margins = this.draw.getMargins();
+    const startX = margins[3];
+    const startY = headerTop;
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth,
+      zone: EditorZone.HEADER
+    });
+  }
+  getHeaderTop() {
+    const { header: { top, disabled }, scale } = this.options;
+    if (disabled)
+      return 0;
+    return Math.floor(top * scale);
+  }
+  getMaxHeight() {
+    const { header: { maxHeightRadio } } = this.options;
+    const height = this.draw.getHeight();
+    return Math.floor(height * maxHeightRadioMapping[maxHeightRadio]);
+  }
+  getHeight() {
+    const maxHeight = this.getMaxHeight();
+    const rowHeight = this.getRowHeight();
+    return rowHeight > maxHeight ? maxHeight : rowHeight;
+  }
+  getRowHeight() {
+    return this.rowList.reduce((pre, cur) => pre + cur.height, 0);
+  }
+  getExtraHeight() {
+    const margins = this.draw.getMargins();
+    const headerHeight = this.getHeight();
+    const headerTop = this.getHeaderTop();
+    const extraHeight = headerTop + headerHeight - margins[0];
+    return extraHeight <= 0 ? 0 : extraHeight;
+  }
+  render(ctx, pageNo) {
+    ctx.globalAlpha = 1;
+    const innerWidth = this.draw.getInnerWidth();
+    const maxHeight = this.getMaxHeight();
+    const rowList = [];
+    let curRowHeight = 0;
+    for (let r = 0; r < this.rowList.length; r++) {
+      const row = this.rowList[r];
+      if (curRowHeight + row.height > maxHeight) {
+        break;
+      }
+      rowList.push(row);
+      curRowHeight += row.height;
+    }
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList,
+      pageNo,
+      startIndex: 0,
+      innerWidth,
+      zone: EditorZone.HEADER
+    });
+  }
+}
+class SuperscriptParticle {
+  getOffsetY(element) {
+    return -element.metrics.height / 2;
+  }
+  render(ctx, element, x, y) {
+    ctx.save();
+    ctx.font = element.style;
+    if (element.color) {
+      ctx.fillStyle = element.color;
+    }
+    ctx.fillText(element.value, x, y + this.getOffsetY(element));
+    ctx.restore();
+  }
+}
+class SubscriptParticle {
+  getOffsetY(element) {
+    return element.metrics.height / 2;
+  }
+  render(ctx, element, x, y) {
+    ctx.save();
+    ctx.font = element.style;
+    if (element.color) {
+      ctx.fillStyle = element.color;
+    }
+    ctx.fillText(element.value, x, y + this.getOffsetY(element));
+    ctx.restore();
+  }
+}
+class SeparatorParticle {
+  constructor(draw) {
+    this.options = draw.getOptions();
+  }
+  render(ctx, element, x, y) {
+    var _a;
+    ctx.save();
+    const { scale, separator: { lineWidth, strokeStyle } } = this.options;
+    ctx.lineWidth = (element.lineWidth || lineWidth) * scale;
+    ctx.strokeStyle = element.color || strokeStyle;
+    if ((_a = element.dashArray) == null ? void 0 : _a.length) {
+      ctx.setLineDash(element.dashArray);
+    }
+    const offsetY = Math.round(y);
+    ctx.translate(0, ctx.lineWidth / 2);
+    ctx.beginPath();
+    ctx.moveTo(x, offsetY);
+    ctx.lineTo(x + element.width * scale, offsetY);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+class PageBreakParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.i18n = draw.getI18n();
+  }
+  render(ctx, element, x, y) {
+    const { pageBreak: { font, fontSize, lineDash } } = this.options;
+    const displayName = this.i18n.t("pageBreak.displayName");
+    const { scale, defaultRowMargin } = this.options;
+    const size = fontSize * scale;
+    const elementWidth = element.width * scale;
+    const offsetY = this.draw.getDefaultBasicRowMarginHeight() * defaultRowMargin;
+    ctx.save();
+    ctx.font = `${size}px ${font}`;
+    const textMeasure = ctx.measureText(displayName);
+    const halfX = (elementWidth - textMeasure.width) / 2;
+    ctx.setLineDash(lineDash);
+    ctx.translate(0, 0.5 + offsetY);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + halfX, y);
+    ctx.moveTo(x + halfX + textMeasure.width, y);
+    ctx.lineTo(x + elementWidth, y);
+    ctx.stroke();
+    ctx.fillText(displayName, x + halfX, y + textMeasure.actualBoundingBoxAscent - size / 2);
+    ctx.restore();
+  }
+}
+class Watermark {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    const { watermark: { data: data2, opacity, font, size, color, repeat, gap }, scale } = this.options;
+    const width = this.draw.getWidth();
+    const height = this.draw.getHeight();
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    ctx.font = `${size * scale}px ${font}`;
+    const measureText = ctx.measureText(data2);
+    if (repeat) {
+      const dpr = this.draw.getPagePixelRatio();
+      const temporaryCanvas = document.createElement("canvas");
+      const temporaryCtx = temporaryCanvas.getContext("2d");
+      const textWidth = measureText.width;
+      const textHeight = measureText.actualBoundingBoxAscent + measureText.actualBoundingBoxDescent;
+      const diagonalLength = Math.sqrt(Math.pow(textWidth, 2) + Math.pow(textHeight, 2));
+      const patternWidth = diagonalLength + 2 * gap[0] * scale;
+      const patternHeight = diagonalLength + 2 * gap[1] * scale;
+      temporaryCanvas.width = patternWidth;
+      temporaryCanvas.height = patternHeight;
+      temporaryCanvas.style.width = `${patternWidth * dpr}px`;
+      temporaryCanvas.style.height = `${patternHeight * dpr}px`;
+      temporaryCtx.translate(patternWidth / 2, patternHeight / 2);
+      temporaryCtx.rotate(-45 * Math.PI / 180);
+      temporaryCtx.translate(-patternWidth / 2, -patternHeight / 2);
+      temporaryCtx.font = `${size * scale}px ${font}`;
+      temporaryCtx.fillStyle = color;
+      temporaryCtx.fillText(data2, (patternWidth - textWidth) / 2, (patternHeight - textHeight) / 2 + measureText.actualBoundingBoxAscent);
+      const pattern = ctx.createPattern(temporaryCanvas, "repeat");
+      if (pattern) {
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, width, height);
+      }
+    } else {
+      const x = width / 2;
+      const y = height / 2;
+      ctx.fillStyle = color;
+      ctx.translate(x, y);
+      ctx.rotate(-45 * Math.PI / 180);
+      ctx.fillText(data2, -measureText.width / 2, measureText.actualBoundingBoxAscent - size / 2);
+    }
+    ctx.restore();
+  }
+}
+class ControlSearch {
+  constructor(control) {
+    this.draw = control.getDraw();
+    this.options = this.draw.getOptions();
+    this.highlightList = [];
+    this.highlightMatchResult = [];
+  }
+  getHighlightMatchResult() {
+    return this.highlightMatchResult;
+  }
+  getHighlightList() {
+    return this.highlightList;
+  }
+  setHighlightList(payload) {
+    this.highlightList = payload;
+  }
+  computeHighlightList() {
+    const search = this.draw.getSearch();
+    const computeHighlight = (elementList, restArgs) => {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              const restArgs2 = {
+                tableId: element.id,
+                tableIndex: i - 1,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id
+              };
+              computeHighlight(td.value, restArgs2);
+            }
+          }
+        }
+        const currentControl = element == null ? void 0 : element.control;
+        if (!currentControl)
+          continue;
+        const highlightIndex = this.highlightList.findIndex((highlight2) => highlight2.id === element.controlId || currentControl.conceptId && currentControl.conceptId === highlight2.conceptId);
+        if (!~highlightIndex)
+          continue;
+        const startIndex = i;
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+        const controlElementList = elementList.slice(startIndex, newEndIndex).map((element2) => element2.controlComponent === ControlComponent.VALUE ? element2 : { value: ZERO });
+        const highlight = this.highlightList[highlightIndex];
+        const { ruleList } = highlight;
+        for (let r = 0; r < ruleList.length; r++) {
+          const rule = ruleList[r];
+          const searchResult = search.getMatchList(rule.keyword, controlElementList);
+          this.highlightMatchResult.push(...searchResult.map((result) => ({
+            ...result,
+            ...rule,
+            ...restArgs,
+            index: result.index + startIndex
+          })));
+        }
+      }
+    };
+    this.highlightMatchResult = [];
+    computeHighlight(this.draw.getOriginalMainElementList());
+  }
+  renderHighlightList(ctx, pageIndex) {
+    var _a, _b, _c;
+    if (!((_a = this.highlightMatchResult) == null ? void 0 : _a.length))
+      return;
+    const { searchMatchAlpha, searchMatchColor } = this.options;
+    const positionList = this.draw.getPosition().getOriginalPositionList();
+    const elementList = this.draw.getOriginalElementList();
+    ctx.save();
+    for (let s = 0; s < this.highlightMatchResult.length; s++) {
+      const searchMatch = this.highlightMatchResult[s];
+      let position = null;
+      if (searchMatch.tableId) {
+        const { tableIndex, trIndex, tdIndex, index: index2 } = searchMatch;
+        position = (_c = (_b = elementList[tableIndex]) == null ? void 0 : _b.trList[trIndex].tdList[tdIndex]) == null ? void 0 : _c.positionList[index2];
+      } else {
+        position = positionList[searchMatch.index];
+      }
+      if (!position)
+        continue;
+      const { coordinate: { leftTop, leftBottom, rightTop }, pageNo } = position;
+      if (pageNo !== pageIndex)
+        continue;
+      ctx.fillStyle = searchMatch.backgroundColor || searchMatchColor;
+      ctx.globalAlpha = searchMatch.alpha || searchMatchAlpha;
+      const x = leftTop[0];
+      const y = leftTop[1];
+      const width = rightTop[0] - leftTop[0];
+      const height = leftBottom[1] - leftTop[1];
+      ctx.fillRect(x, y, width, height);
+    }
+    ctx.restore();
+  }
+}
+class ControlBorder {
+  constructor(draw) {
+    this.borderRect = this.clearBorderInfo();
+    this.options = draw.getOptions();
+  }
+  clearBorderInfo() {
+    this.borderRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    return this.borderRect;
+  }
+  recordBorderInfo(x, y, width, height) {
+    const isFirstRecord = !this.borderRect.width;
+    if (isFirstRecord) {
+      this.borderRect.x = x;
+      this.borderRect.y = y;
+      this.borderRect.height = height;
+    }
+    this.borderRect.width += width;
+  }
+  render(ctx) {
+    if (!this.borderRect.width)
+      return;
+    const { scale, control: { borderWidth, borderColor } } = this.options;
+    const { x, y, width, height } = this.borderRect;
+    ctx.save();
+    ctx.translate(0, 1 * scale);
+    ctx.lineWidth = borderWidth * scale;
+    ctx.strokeStyle = borderColor;
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+    this.clearBorderInfo();
+  }
+}
+class SelectControl {
+  constructor(element, control) {
+    this.options = control.getDraw().getOptions();
+    this.element = element;
+    this.control = control;
+    this.isPopup = false;
+    this.selectDom = null;
+  }
+  setElement(element) {
+    this.element = element;
+  }
+  getElement() {
+    return this.element;
+  }
+  getIsPopup() {
+    return this.isPopup;
+  }
+  getCode() {
+    var _a;
+    return ((_a = this.element.control) == null ? void 0 : _a.code) || null;
+  }
+  getValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    const data2 = [];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      if (preElement.controlComponent === ControlComponent.VALUE) {
+        data2.unshift(preElement);
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      if (nextElement.controlComponent === ControlComponent.VALUE) {
+        data2.push(nextElement);
+      }
+      nextIndex++;
+    }
+    return data2;
+  }
+  setValue() {
+    return -1;
+  }
+  keydown(evt) {
+    if (this.control.getIsDisabledControl()) {
+      return null;
+    }
+    const elementList = this.control.getElementList();
+    const range = this.control.getRange();
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = range;
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if (evt.key === KeyMap.Backspace) {
+      if (startIndex !== endIndex) {
+        return this.clearSelect();
+      } else {
+        if (startElement.controlComponent === ControlComponent.PREFIX || endElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          return this.clearSelect();
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      if (startIndex !== endIndex) {
+        return this.clearSelect();
+      } else {
+        const endNextElement = elementList[endIndex + 1];
+        if (startElement.controlComponent === ControlComponent.PREFIX && endNextElement.controlComponent === ControlComponent.PLACEHOLDER || endNextElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          return this.clearSelect();
+        }
+      }
+    }
+    return endIndex;
+  }
+  cut() {
+    if (this.control.getIsDisabledControl()) {
+      return -1;
+    }
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = this.control.getRange();
+    if (startIndex === endIndex) {
+      return startIndex;
+    }
+    return this.clearSelect();
+  }
+  clearSelect(context = {}, options = {}) {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options;
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    let leftIndex = -1;
+    let rightIndex = -1;
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        leftIndex = preIndex;
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        rightIndex = nextIndex - 1;
+        break;
+      }
+      nextIndex++;
+    }
+    if (!~leftIndex || !~rightIndex)
+      return -1;
+    const draw = this.control.getDraw();
+    draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(preIndex, context);
+    }
+    this.element.control.code = null;
+    return preIndex;
+  }
+  setSelect(code, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    const control = this.element.control;
+    const oldCode = control.code;
+    if (code === oldCode) {
+      this.control.repaintControl({
+        curIndex: range.startIndex,
+        isCompute: false,
+        isSubmitHistory: false
+      });
+      this.destroy();
+      return;
+    }
+    const valueSets = control.valueSets;
+    if (!Array.isArray(valueSets) || !valueSets.length)
+      return;
+    const valueSet = valueSets.find((v) => v.code === code);
+    if (!valueSet)
+      return;
+    const valueElement = this.getValue(context)[0];
+    const styleElement = valueElement ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR) : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR);
+    const prefixIndex = this.clearSelect(context, {
+      isAddPlaceholder: false
+    });
+    if (!~prefixIndex)
+      return;
+    if (!oldCode) {
+      this.control.removePlaceholder(prefixIndex, context);
+    }
+    const propertyElement = omitObject(elementList[prefixIndex], EDITOR_ELEMENT_STYLE_ATTR);
+    const start = prefixIndex + 1;
+    const data2 = splitText(valueSet.value);
+    const draw = this.control.getDraw();
+    for (let i = 0; i < data2.length; i++) {
+      const newElement = {
+        ...styleElement,
+        ...propertyElement,
+        type: ElementType.TEXT,
+        value: data2[i],
+        controlComponent: ControlComponent.VALUE
+      };
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    control.code = code;
+    if (!context.range) {
+      const newIndex = start + data2.length - 1;
+      this.control.repaintControl({
+        curIndex: newIndex
+      });
+      this.destroy();
+    }
+  }
+  _createSelectPopupDom() {
+    const control = this.element.control;
+    const valueSets = control.valueSets;
+    if (!Array.isArray(valueSets) || !valueSets.length)
+      return;
+    const position = this.control.getPosition();
+    if (!position)
+      return;
+    const selectPopupContainer = document.createElement("div");
+    selectPopupContainer.classList.add(`${EDITOR_PREFIX}-select-control-popup`);
+    selectPopupContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP);
+    const ul = document.createElement("ul");
+    for (let v = 0; v < valueSets.length; v++) {
+      const valueSet = valueSets[v];
+      const li = document.createElement("li");
+      const code = this.getCode();
+      if (code === valueSet.code) {
+        li.classList.add("active");
+      }
+      li.onclick = () => {
+        this.setSelect(valueSet.code);
+      };
+      li.append(document.createTextNode(valueSet.value));
+      ul.append(li);
+    }
+    selectPopupContainer.append(ul);
+    const { coordinate: { leftTop: [left2, top] }, lineHeight } = position;
+    const preY = this.control.getPreY();
+    selectPopupContainer.style.left = `${left2}px`;
+    selectPopupContainer.style.top = `${top + preY + lineHeight}px`;
+    const container = this.control.getContainer();
+    container.append(selectPopupContainer);
+    this.selectDom = selectPopupContainer;
+  }
+  awake() {
+    var _a;
+    if (this.isPopup || this.control.getIsDisabledControl())
+      return;
+    const { startIndex } = this.control.getRange();
+    const elementList = this.control.getElementList();
+    if (((_a = elementList[startIndex + 1]) == null ? void 0 : _a.controlId) !== this.element.controlId) {
+      return;
+    }
+    this._createSelectPopupDom();
+    this.isPopup = true;
+  }
+  destroy() {
+    var _a;
+    if (!this.isPopup)
+      return;
+    (_a = this.selectDom) == null ? void 0 : _a.remove();
+    this.isPopup = false;
+  }
+}
+class TextControl {
+  constructor(element, control) {
+    this.options = control.getDraw().getOptions();
+    this.element = element;
+    this.control = control;
+  }
+  setElement(element) {
+    this.element = element;
+  }
+  getElement() {
+    return this.element;
+  }
+  getValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    const data2 = [];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      if (preElement.controlComponent === ControlComponent.VALUE) {
+        data2.unshift(preElement);
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      if (nextElement.controlComponent === ControlComponent.VALUE) {
+        data2.push(nextElement);
+      }
+      nextIndex++;
+    }
+    return data2;
+  }
+  setValue(data2, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    this.control.shrinkBoundary(context);
+    const { startIndex, endIndex } = range;
+    const draw = this.control.getDraw();
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      this.control.removePlaceholder(startIndex, context);
+    }
+    const startElement = elementList[startIndex];
+    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, [
+      "control",
+      "controlId",
+      ...CONTROL_STYLE_ATTR
+    ]) : omitObject(startElement, ["type"]);
+    const start = range.startIndex + 1;
+    for (let i = 0; i < data2.length; i++) {
+      const newElement = {
+        ...anchorElement,
+        ...data2[i],
+        controlComponent: ControlComponent.VALUE
+      };
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    return start + data2.length - 1;
+  }
+  clearValue(context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    const { startIndex, endIndex } = range;
+    this.control.getDraw().spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const value = this.getValue(context);
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex, context);
+    }
+    return startIndex;
+  }
+  keydown(evt) {
+    if (this.control.getIsDisabledControl()) {
+      return null;
+    }
+    const elementList = this.control.getElementList();
+    const range = this.control.getRange();
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = range;
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    const draw = this.control.getDraw();
+    if (evt.key === KeyMap.Backspace) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        if (startElement.controlComponent === ControlComponent.PREFIX || endElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex - 1);
+          }
+          return startIndex - 1;
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        const endNextElement = elementList[endIndex + 1];
+        if (startElement.controlComponent === ControlComponent.PREFIX && endNextElement.controlComponent === ControlComponent.PLACEHOLDER || endNextElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex + 1, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex);
+          }
+          return startIndex;
+        }
+      }
+    }
+    return endIndex;
+  }
+  cut() {
+    if (this.control.getIsDisabledControl()) {
+      return -1;
+    }
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = this.control.getRange();
+    if (startIndex === endIndex) {
+      return startIndex;
+    }
+    const draw = this.control.getDraw();
+    const elementList = this.control.getElementList();
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const value = this.getValue();
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex);
+    }
+    return startIndex;
+  }
+}
+class DatePicker {
+  constructor(draw, options = {}) {
+    this.draw = draw;
+    this.options = options;
+    this.lang = this._getLang();
+    this.now = new Date();
+    this.dom = this._createDom();
+    this.renderOptions = null;
+    this.isDatePicker = true;
+    this.pickDate = null;
+    this._bindEvent();
+  }
+  _createDom() {
+    const datePickerContainer = document.createElement("div");
+    datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`);
+    datePickerContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP);
+    const dateWrap = document.createElement("div");
+    dateWrap.classList.add(`${EDITOR_PREFIX}-date-wrap`);
+    const datePickerTitle = document.createElement("div");
+    datePickerTitle.classList.add(`${EDITOR_PREFIX}-date-title`);
+    const preYearTitle = document.createElement("span");
+    preYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-year`);
+    preYearTitle.innerText = `<<`;
+    const preMonthTitle = document.createElement("span");
+    preMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-month`);
+    preMonthTitle.innerText = `<`;
+    const nowTitle = document.createElement("span");
+    nowTitle.classList.add(`${EDITOR_PREFIX}-date-title__now`);
+    const nextMonthTitle = document.createElement("span");
+    nextMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-month`);
+    nextMonthTitle.innerText = `>`;
+    const nextYearTitle = document.createElement("span");
+    nextYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-year`);
+    nextYearTitle.innerText = `>>`;
+    datePickerTitle.append(preYearTitle);
+    datePickerTitle.append(preMonthTitle);
+    datePickerTitle.append(nowTitle);
+    datePickerTitle.append(nextMonthTitle);
+    datePickerTitle.append(nextYearTitle);
+    const datePickerWeek = document.createElement("div");
+    datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`);
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
+    weekList.forEach((week) => {
+      const weekDom = document.createElement("span");
+      weekDom.innerText = `${week}`;
+      datePickerWeek.append(weekDom);
+    });
+    const datePickerDay = document.createElement("div");
+    datePickerDay.classList.add(`${EDITOR_PREFIX}-date-day`);
+    dateWrap.append(datePickerTitle);
+    dateWrap.append(datePickerWeek);
+    dateWrap.append(datePickerDay);
+    const timeWrap = document.createElement("ul");
+    timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`);
+    let hourTime;
+    let minuteTime;
+    let secondTime;
+    const timeList = [this.lang.hour, this.lang.minute, this.lang.second];
+    timeList.forEach((t, i) => {
+      const li = document.createElement("li");
+      const timeText = document.createElement("span");
+      timeText.innerText = t;
+      li.append(timeText);
+      const ol = document.createElement("ol");
+      const isHour = i === 0;
+      const isMinute = i === 1;
+      const endIndex = isHour ? 24 : 60;
+      for (let i2 = 0; i2 < endIndex; i2++) {
+        const time = document.createElement("li");
+        time.innerText = `${String(i2).padStart(2, "0")}`;
+        time.setAttribute("data-id", `${i2}`);
+        ol.append(time);
+      }
+      if (isHour) {
+        hourTime = ol;
+      } else if (isMinute) {
+        minuteTime = ol;
+      } else {
+        secondTime = ol;
+      }
+      li.append(ol);
+      timeWrap.append(li);
+    });
+    const datePickerMenu = document.createElement("div");
+    datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`);
+    const timeMenu = document.createElement("button");
+    timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`);
+    timeMenu.innerText = this.lang.timeSelect;
+    const nowMenu = document.createElement("button");
+    nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`);
+    nowMenu.innerText = this.lang.now;
+    const submitMenu = document.createElement("button");
+    submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`);
+    submitMenu.innerText = this.lang.confirm;
+    datePickerMenu.append(timeMenu);
+    datePickerMenu.append(nowMenu);
+    datePickerMenu.append(submitMenu);
+    datePickerContainer.append(dateWrap);
+    datePickerContainer.append(timeWrap);
+    datePickerContainer.append(datePickerMenu);
+    this.draw.getContainer().append(datePickerContainer);
+    return {
+      container: datePickerContainer,
+      dateWrap,
+      datePickerWeek,
+      timeWrap,
+      title: {
+        preYear: preYearTitle,
+        preMonth: preMonthTitle,
+        now: nowTitle,
+        nextMonth: nextMonthTitle,
+        nextYear: nextYearTitle
+      },
+      day: datePickerDay,
+      time: {
+        hour: hourTime,
+        minute: minuteTime,
+        second: secondTime
+      },
+      menu: {
+        time: timeMenu,
+        now: nowMenu,
+        submit: submitMenu
+      }
+    };
+  }
+  _bindEvent() {
+    this.dom.title.preYear.onclick = () => {
+      this._preYear();
+    };
+    this.dom.title.preMonth.onclick = () => {
+      this._preMonth();
+    };
+    this.dom.title.nextMonth.onclick = () => {
+      this._nextMonth();
+    };
+    this.dom.title.nextYear.onclick = () => {
+      this._nextYear();
+    };
+    this.dom.menu.time.onclick = () => {
+      this.isDatePicker = !this.isDatePicker;
+      this._toggleDateTimePicker();
+    };
+    this.dom.menu.now.onclick = () => {
+      this._now();
+      this._submit();
+    };
+    this.dom.menu.submit.onclick = () => {
+      this.dispose();
+      this._submit();
+    };
+    this.dom.time.hour.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setHours(Number(id));
+      this._setTimePick(false);
+    };
+    this.dom.time.minute.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setMinutes(Number(id));
+      this._setTimePick(false);
+    };
+    this.dom.time.second.onclick = (evt) => {
+      if (!this.pickDate)
+        return;
+      const li = evt.target;
+      const id = li.dataset.id;
+      if (!id)
+        return;
+      this.pickDate.setSeconds(Number(id));
+      this._setTimePick(false);
+    };
+  }
+  _setPosition() {
+    if (!this.renderOptions)
+      return;
+    const { position: { coordinate: { leftTop: [left2, top] }, lineHeight, pageNo } } = this.renderOptions;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const currentPageNo = pageNo != null ? pageNo : this.draw.getPageNo();
+    const preY = currentPageNo * (height + pageGap);
+    this.dom.container.style.left = `${left2}px`;
+    this.dom.container.style.top = `${top + preY + lineHeight}px`;
+  }
+  isInvalidDate(value) {
+    return value.toDateString() === "Invalid Date";
+  }
+  _setValue() {
+    var _a;
+    const value = (_a = this.renderOptions) == null ? void 0 : _a.value;
+    if (value) {
+      const setDate = new Date(value);
+      this.now = this.isInvalidDate(setDate) ? new Date() : setDate;
+    } else {
+      this.now = new Date();
+    }
+    this.pickDate = new Date(this.now);
+  }
+  _getLang() {
+    const i18n = this.draw.getI18n();
+    const t = i18n.t.bind(i18n);
+    return {
+      now: t("datePicker.now"),
+      confirm: t("datePicker.confirm"),
+      return: t("datePicker.return"),
+      timeSelect: t("datePicker.timeSelect"),
+      weeks: {
+        sun: t("datePicker.weeks.sun"),
+        mon: t("datePicker.weeks.mon"),
+        tue: t("datePicker.weeks.tue"),
+        wed: t("datePicker.weeks.wed"),
+        thu: t("datePicker.weeks.thu"),
+        fri: t("datePicker.weeks.fri"),
+        sat: t("datePicker.weeks.sat")
+      },
+      year: t("datePicker.year"),
+      month: t("datePicker.month"),
+      hour: t("datePicker.hour"),
+      minute: t("datePicker.minute"),
+      second: t("datePicker.second")
+    };
+  }
+  _setLangChange() {
+    this.dom.menu.time.innerText = this.lang.timeSelect;
+    this.dom.menu.now.innerText = this.lang.now;
+    this.dom.menu.submit.innerText = this.lang.confirm;
+    const { weeks: { sun, mon, tue, wed, thu, fri, sat } } = this.lang;
+    const weekList = [sun, mon, tue, wed, thu, fri, sat];
+    this.dom.datePickerWeek.childNodes.forEach((child, i) => {
+      const childElement = child;
+      childElement.innerText = weekList[i];
+    });
+    const hourTitle = this.dom.time.hour.previousElementSibling;
+    hourTitle.innerText = this.lang.hour;
+    const minuteTitle = this.dom.time.minute.previousElementSibling;
+    minuteTitle.innerText = this.lang.minute;
+    const secondTitle = this.dom.time.second.previousElementSibling;
+    secondTitle.innerText = this.lang.second;
+  }
+  _update() {
+    const localDate = new Date();
+    const localYear = localDate.getFullYear();
+    const localMonth = localDate.getMonth() + 1;
+    const localDay = localDate.getDate();
+    let pickYear = null;
+    let pickMonth = null;
+    let pickDay = null;
+    if (this.pickDate) {
+      pickYear = this.pickDate.getFullYear();
+      pickMonth = this.pickDate.getMonth() + 1;
+      pickDay = this.pickDate.getDate();
+    }
+    const year = this.now.getFullYear();
+    const month = this.now.getMonth() + 1;
+    this.dom.title.now.innerText = `${year}${this.lang.year} ${String(month).padStart(2, "0")}${this.lang.month}`;
+    const curDate = new Date(year, month, 0);
+    const curDay = curDate.getDate();
+    let curWeek = new Date(year, month - 1, 1).getDay();
+    if (curWeek === 0) {
+      curWeek = 7;
+    }
+    const preDay = new Date(year, month - 1, 0).getDate();
+    this.dom.day.innerHTML = "";
+    const preStartDay = preDay - curWeek + 1;
+    for (let i = preStartDay; i <= preDay; i++) {
+      const dayDom = document.createElement("div");
+      dayDom.classList.add("disable");
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = () => {
+        const newMonth = month - 2;
+        this.now = new Date(year, newMonth, i);
+        this._setDatePick(year, newMonth, i);
+      };
+      this.dom.day.append(dayDom);
+    }
+    for (let i = 1; i <= curDay; i++) {
+      const dayDom = document.createElement("div");
+      if (localYear === year && localMonth === month && localDay === i) {
+        dayDom.classList.add("active");
+      }
+      if (this.pickDate && pickYear === year && pickMonth === month && pickDay === i) {
+        dayDom.classList.add("select");
+      }
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = (evt) => {
+        const newMonth = month - 1;
+        this.now = new Date(year, newMonth, i);
+        this._setDatePick(year, newMonth, i);
+        evt.stopPropagation();
+      };
+      this.dom.day.append(dayDom);
+    }
+    const nextEndDay = 6 * 7 - curWeek - curDay;
+    for (let i = 1; i <= nextEndDay; i++) {
+      const dayDom = document.createElement("div");
+      dayDom.classList.add("disable");
+      dayDom.innerText = `${i}`;
+      dayDom.onclick = () => {
+        this.now = new Date(year, month, i);
+        this._setDatePick(year, month, i);
+      };
+      this.dom.day.append(dayDom);
+    }
+  }
+  _toggleDateTimePicker() {
+    if (this.isDatePicker) {
+      this.dom.dateWrap.classList.add("active");
+      this.dom.timeWrap.classList.remove("active");
+      this.dom.menu.time.innerText = this.lang.timeSelect;
+    } else {
+      this.dom.dateWrap.classList.remove("active");
+      this.dom.timeWrap.classList.add("active");
+      this.dom.menu.time.innerText = this.lang.return;
+      this._setTimePick();
+    }
+  }
+  _setDatePick(year, month, day) {
+    var _a, _b, _c;
+    this.now = new Date(year, month, day);
+    (_a = this.pickDate) == null ? void 0 : _a.setFullYear(year);
+    (_b = this.pickDate) == null ? void 0 : _b.setMonth(month);
+    (_c = this.pickDate) == null ? void 0 : _c.setDate(day);
+    this._update();
+  }
+  _setTimePick(isIntoView = true) {
+    var _a, _b, _c;
+    const hour = ((_a = this.pickDate) == null ? void 0 : _a.getHours()) || 0;
+    const minute = ((_b = this.pickDate) == null ? void 0 : _b.getMinutes()) || 0;
+    const second = ((_c = this.pickDate) == null ? void 0 : _c.getSeconds()) || 0;
+    const { hour: hourDom, minute: minuteDom, second: secondDom } = this.dom.time;
+    const timeDomList = [hourDom, minuteDom, secondDom];
+    timeDomList.forEach((timeDom) => {
+      timeDom.querySelectorAll("li").forEach((li) => li.classList.remove("active"));
+    });
+    const pickList = [
+      [hourDom, hour],
+      [minuteDom, minute],
+      [secondDom, second]
+    ];
+    pickList.forEach(([dom, time]) => {
+      const pickDom = dom.querySelector(`[data-id='${time}']`);
+      pickDom.classList.add("active");
+      if (isIntoView) {
+        this._scrollIntoView(dom, pickDom);
+      }
+    });
+  }
+  _scrollIntoView(container, selected) {
+    if (!selected) {
+      container.scrollTop = 0;
+      return;
+    }
+    const offsetParents = [];
+    let pointer = selected.offsetParent;
+    while (pointer && container !== pointer && container.contains(pointer)) {
+      offsetParents.push(pointer);
+      pointer = pointer.offsetParent;
+    }
+    const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
+    const bottom = top + selected.offsetHeight;
+    const viewRectTop = container.scrollTop;
+    const viewRectBottom = viewRectTop + container.clientHeight;
+    if (top < viewRectTop) {
+      container.scrollTop = top;
+    } else if (bottom > viewRectBottom) {
+      container.scrollTop = bottom - container.clientHeight;
+    }
+  }
+  _preMonth() {
+    this.now.setMonth(this.now.getMonth() - 1);
+    this._update();
+  }
+  _nextMonth() {
+    this.now.setMonth(this.now.getMonth() + 1);
+    this._update();
+  }
+  _preYear() {
+    this.now.setFullYear(this.now.getFullYear() - 1);
+    this._update();
+  }
+  _nextYear() {
+    this.now.setFullYear(this.now.getFullYear() + 1);
+    this._update();
+  }
+  _now() {
+    this.pickDate = new Date();
+    this.dispose();
+  }
+  _toggleVisible(isVisible) {
+    if (isVisible) {
+      this.dom.container.classList.add("active");
+    } else {
+      this.dom.container.classList.remove("active");
+    }
+  }
+  _submit() {
+    var _a;
+    if (this.options.onSubmit && this.pickDate) {
+      const format = (_a = this.renderOptions) == null ? void 0 : _a.dateFormat;
+      const pickDateString = this.formatDate(this.pickDate, format);
+      this.options.onSubmit(pickDateString);
+    }
+  }
+  formatDate(date, format = "yyyy-MM-dd hh:mm:ss") {
+    let dateString = format;
+    const dateOption = {
+      "y+": date.getFullYear().toString(),
+      "M+": (date.getMonth() + 1).toString(),
+      "d+": date.getDate().toString(),
+      "h+": date.getHours().toString(),
+      "m+": date.getMinutes().toString(),
+      "s+": date.getSeconds().toString()
+    };
+    for (const k in dateOption) {
+      const reg = new RegExp("(" + k + ")").exec(format);
+      const key = k;
+      if (reg) {
+        dateString = dateString.replace(reg[1], reg[1].length === 1 ? dateOption[key] : dateOption[key].padStart(reg[1].length, "0"));
+      }
+    }
+    return dateString;
+  }
+  render(option) {
+    this.renderOptions = option;
+    this.lang = this._getLang();
+    this._setLangChange();
+    this._setValue();
+    this._update();
+    this._setPosition();
+    this.isDatePicker = true;
+    this._toggleDateTimePicker();
+    this._toggleVisible(true);
+  }
+  dispose() {
+    this._toggleVisible(false);
+  }
+  destroy() {
+    this.dom.container.remove();
+  }
+}
+class DateControl {
+  constructor(element, control) {
+    const draw = control.getDraw();
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.element = element;
+    this.control = control;
+    this.isPopup = false;
+    this.datePicker = null;
+  }
+  setElement(element) {
+    this.element = element;
+  }
+  getElement() {
+    return this.element;
+  }
+  getIsPopup() {
+    return this.isPopup;
+  }
+  getValueRange(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const { startIndex } = context.range || this.control.getRange();
+    const startElement = elementList[startIndex];
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId || nextElement.controlComponent === ControlComponent.POSTFIX) {
+        break;
+      }
+      nextIndex++;
+    }
+    if (preIndex === nextIndex)
+      return null;
+    return [preIndex, nextIndex - 1];
+  }
+  getValue(context = {}) {
+    const elementList = context.elementList || this.control.getElementList();
+    const range = this.getValueRange(context);
+    if (!range)
+      return [];
+    const data2 = [];
+    const [startIndex, endIndex] = range;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const element = elementList[i];
+      if (element.controlComponent === ControlComponent.VALUE) {
+        data2.push(element);
+      }
+    }
+    return data2;
+  }
+  setValue(data2, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    this.control.shrinkBoundary(context);
+    const { startIndex, endIndex } = range;
+    const draw = this.control.getDraw();
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      this.control.removePlaceholder(startIndex, context);
+    }
+    const startElement = elementList[startIndex];
+    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, [
+      "control",
+      "controlId",
+      ...CONTROL_STYLE_ATTR
+    ]) : omitObject(startElement, ["type"]);
+    const start = range.startIndex + 1;
+    for (let i = 0; i < data2.length; i++) {
+      const newElement = {
+        ...anchorElement,
+        ...data2[i],
+        controlComponent: ControlComponent.VALUE
+      };
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    return start + data2.length - 1;
+  }
+  clearSelect(context = {}, options = {}) {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options;
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return -1;
+    }
+    const range = this.getValueRange(context);
+    if (!range)
+      return -1;
+    const [leftIndex, rightIndex] = range;
+    if (!~leftIndex || !~rightIndex)
+      return -1;
+    const elementList = context.elementList || this.control.getElementList();
+    const draw = this.control.getDraw();
+    draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(leftIndex, context);
+    }
+    return leftIndex;
+  }
+  setSelect(date, context = {}, options = {}) {
+    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
+      return;
+    }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
+    const valueElement = this.getValue(context)[0];
+    const styleElement = valueElement ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR) : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR);
+    const prefixIndex = this.clearSelect(context, {
+      isAddPlaceholder: false
+    });
+    if (!~prefixIndex)
+      return;
+    const propertyElement = omitObject(elementList[prefixIndex], EDITOR_ELEMENT_STYLE_ATTR);
+    const start = prefixIndex + 1;
+    const draw = this.control.getDraw();
+    for (let i = 0; i < date.length; i++) {
+      const newElement = {
+        ...styleElement,
+        ...propertyElement,
+        type: ElementType.TEXT,
+        value: date[i],
+        controlComponent: ControlComponent.VALUE
+      };
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
+      draw.spliceElementList(elementList, start + i, 0, newElement);
+    }
+    if (!context.range) {
+      const newIndex = start + date.length - 1;
+      this.control.repaintControl({
+        curIndex: newIndex
+      });
+      this.destroy();
+    }
+  }
+  keydown(evt) {
+    if (this.control.getIsDisabledControl()) {
+      return null;
+    }
+    const elementList = this.control.getElementList();
+    const range = this.control.getRange();
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = range;
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    const draw = this.control.getDraw();
+    if (evt.key === KeyMap.Backspace) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        if (startElement.controlComponent === ControlComponent.PREFIX || endElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex - 1);
+          }
+          return startIndex - 1;
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+        const value = this.getValue();
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex);
+        }
+        return startIndex;
+      } else {
+        const endNextElement = elementList[endIndex + 1];
+        if (startElement.controlComponent === ControlComponent.PREFIX && endNextElement.controlComponent === ControlComponent.PLACEHOLDER || endNextElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          return this.control.removeControl(startIndex);
+        } else {
+          draw.spliceElementList(elementList, startIndex + 1, 1);
+          const value = this.getValue();
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex);
+          }
+          return startIndex;
+        }
+      }
+    }
+    return endIndex;
+  }
+  cut() {
+    if (this.control.getIsDisabledControl()) {
+      return -1;
+    }
+    this.control.shrinkBoundary();
+    const { startIndex, endIndex } = this.control.getRange();
+    if (startIndex === endIndex) {
+      return startIndex;
+    }
+    const draw = this.control.getDraw();
+    const elementList = this.control.getElementList();
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    const value = this.getValue();
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex);
+    }
+    return startIndex;
+  }
+  awake() {
+    var _a, _b;
+    if (this.isPopup || this.control.getIsDisabledControl())
+      return;
+    const position = this.control.getPosition();
+    if (!position)
+      return;
+    const elementList = this.draw.getElementList();
+    const { startIndex } = this.control.getRange();
+    if (((_a = elementList[startIndex + 1]) == null ? void 0 : _a.controlId) !== this.element.controlId) {
+      return;
+    }
+    this.datePicker = new DatePicker(this.draw, {
+      onSubmit: this._setDate.bind(this)
+    });
+    const value = this.getValue().map((el) => el.value).join("") || "";
+    const dateFormat = (_b = this.element.control) == null ? void 0 : _b.dateFormat;
+    this.datePicker.render({
+      value,
+      position,
+      dateFormat
+    });
+    this.isPopup = true;
+  }
+  destroy() {
+    var _a;
+    if (!this.isPopup)
+      return;
+    (_a = this.datePicker) == null ? void 0 : _a.destroy();
+    this.isPopup = false;
+  }
+  _setDate(date) {
+    if (!date) {
+      this.clearSelect();
+    } else {
+      this.setSelect(date);
+    }
+    this.destroy();
+  }
+}
+class Control {
+  constructor(draw) {
+    this.controlBorder = new ControlBorder(draw);
+    this.draw = draw;
+    this.range = draw.getRange();
+    this.listener = draw.getListener();
+    this.eventBus = draw.getEventBus();
+    this.controlSearch = new ControlSearch(this);
+    this.options = draw.getOptions();
+    this.controlOptions = this.options.control;
+    this.activeControl = null;
+  }
+  setHighlightList(payload) {
+    this.controlSearch.setHighlightList(payload);
+  }
+  computeHighlightList() {
+    const highlightList = this.controlSearch.getHighlightList();
+    if (highlightList.length) {
+      this.controlSearch.computeHighlightList();
+    }
+  }
+  renderHighlightList(ctx, pageNo) {
+    const highlightMatchResult = this.controlSearch.getHighlightMatchResult();
+    if (highlightMatchResult.length) {
+      this.controlSearch.renderHighlightList(ctx, pageNo);
+    }
+  }
+  getDraw() {
+    return this.draw;
+  }
+  filterAssistElement(elementList) {
+    return elementList.filter((element) => {
+      var _a;
+      if (element.type === ElementType.TABLE) {
+        const trList = element.trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            td.value = this.filterAssistElement(td.value);
+          }
+        }
+      }
+      if (!element.controlId)
+        return true;
+      if ((_a = element.control) == null ? void 0 : _a.minWidth) {
+        if (element.controlComponent === ControlComponent.PREFIX || element.controlComponent === ControlComponent.POSTFIX) {
+          element.value = "";
+          return true;
+        }
+      }
+      return element.controlComponent !== ControlComponent.PREFIX && element.controlComponent !== ControlComponent.POSTFIX && element.controlComponent !== ControlComponent.PLACEHOLDER;
+    });
+  }
+  getIsRangeCanCaptureEvent() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    if (startIndex === endIndex && startElement.controlComponent === ControlComponent.POSTFIX) {
+      return true;
+    }
+    const endElement = elementList[endIndex];
+    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
+      return true;
+    }
+    return false;
+  }
+  getIsRangeInPostfix() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (startIndex !== endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const element = elementList[startIndex];
+    return element.controlComponent === ControlComponent.POSTFIX;
+  }
+  getIsRangeWithinControl() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
+      return true;
+    }
+    return false;
+  }
+  getIsElementListContainFullControl(elementList) {
+    if (!elementList.some((element) => element.controlId))
+      return false;
+    let prefixCount = 0;
+    let postfixCount = 0;
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.controlComponent === ControlComponent.PREFIX) {
+        prefixCount++;
+      } else if (element.controlComponent === ControlComponent.POSTFIX) {
+        postfixCount++;
+      }
+    }
+    if (!prefixCount || !postfixCount)
+      return false;
+    return prefixCount === postfixCount;
+  }
+  getIsDisabledControl(context = {}) {
+    var _a, _b;
+    if (this.draw.isDesignMode() || !this.activeControl)
+      return false;
+    const { startIndex, endIndex } = context.range || this.range.getRange();
+    if (startIndex === endIndex && ~startIndex && ~endIndex) {
+      const elementList = context.elementList || this.getElementList();
+      const startElement = elementList[startIndex];
+      if (startElement.controlComponent === ControlComponent.POSTFIX) {
+        return false;
+      }
+    }
+    return !!((_b = (_a = this.activeControl.getElement()) == null ? void 0 : _a.control) == null ? void 0 : _b.disabled);
+  }
+  getContainer() {
+    return this.draw.getContainer();
+  }
+  getElementList() {
+    return this.draw.getElementList();
+  }
+  getPosition() {
+    const positionList = this.draw.getPosition().getPositionList();
+    const { endIndex } = this.range.getRange();
+    return positionList[endIndex] || null;
+  }
+  getPreY() {
+    var _a, _b;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const pageNo = (_b = (_a = this.getPosition()) == null ? void 0 : _a.pageNo) != null ? _b : this.draw.getPageNo();
+    return pageNo * (height + pageGap);
+  }
+  getRange() {
+    return this.range.getRange();
+  }
+  shrinkBoundary(context = {}) {
+    this.range.shrinkBoundary(context);
+  }
+  getActiveControl() {
+    return this.activeControl;
+  }
+  initControl() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const elementList = this.getElementList();
+    const range = this.getRange();
+    const element = elementList[range.startIndex];
+    if (this.activeControl) {
+      if (this.activeControl instanceof SelectControl || this.activeControl instanceof DateControl) {
+        if (element.controlComponent === ControlComponent.POSTFIX) {
+          this.activeControl.destroy();
+        } else {
+          this.activeControl.awake();
+        }
+      }
+      const controlElement = this.activeControl.getElement();
+      if (element.controlId === controlElement.controlId)
+        return;
+    }
+    this.destroyControl();
+    const control = element.control;
+    if (control.type === ControlType.TEXT) {
+      this.activeControl = new TextControl(element, this);
+    } else if (control.type === ControlType.SELECT) {
+      const selectControl = new SelectControl(element, this);
+      this.activeControl = selectControl;
+      selectControl.awake();
+    } else if (control.type === ControlType.CHECKBOX) {
+      this.activeControl = new CheckboxControl(element, this);
+    } else if (control.type === ControlType.RADIO) {
+      this.activeControl = new RadioControl(element, this);
+    } else if (control.type === ControlType.DATE) {
+      const dateControl = new DateControl(element, this);
+      this.activeControl = dateControl;
+      dateControl.awake();
+    }
+    nextTick(() => {
+      var _a;
+      const controlChangeListener = this.listener.controlChange;
+      const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
+      if (!controlChangeListener && !isSubscribeControlChange)
+        return;
+      let payload;
+      const value = (_a = this.activeControl) == null ? void 0 : _a.getValue();
+      if (value && value.length) {
+        payload = zipElementList(value)[0].control;
+      } else {
+        payload = pickElementAttr(deepClone(element)).control;
+      }
+      if (controlChangeListener) {
+        controlChangeListener(payload);
+      }
+      if (isSubscribeControlChange) {
+        this.eventBus.emit("controlChange", payload);
+      }
+    });
+  }
+  destroyControl() {
+    if (this.activeControl) {
+      if (this.activeControl instanceof SelectControl || this.activeControl instanceof DateControl) {
+        this.activeControl.destroy();
+      }
+      this.activeControl = null;
+      nextTick(() => {
+        const controlChangeListener = this.listener.controlChange;
+        const isSubscribeControlChange = this.eventBus.isSubscribe("controlChange");
+        if (!controlChangeListener && !isSubscribeControlChange)
+          return;
+        if (controlChangeListener) {
+          controlChangeListener(null);
+        }
+        if (isSubscribeControlChange) {
+          this.eventBus.emit("controlChange", null);
+        }
+      });
+    }
+  }
+  repaintControl(options = {}) {
+    const { curIndex, isCompute = true, isSubmitHistory = true, isSetCursor = true } = options;
+    if (curIndex === void 0) {
+      this.range.clearRange();
+      this.draw.render({
+        isCompute,
+        isSubmitHistory,
+        isSetCursor: false
+      });
+    } else {
+      this.range.setRange(curIndex, curIndex);
+      this.draw.render({
+        curIndex,
+        isCompute,
+        isSetCursor,
+        isSubmitHistory
+      });
+    }
+  }
+  reAwakeControl() {
+    if (!this.activeControl)
+      return;
+    const elementList = this.getElementList();
+    const range = this.getRange();
+    const element = elementList[range.startIndex];
+    this.activeControl.setElement(element);
+    if ((this.activeControl instanceof DateControl || this.activeControl instanceof SelectControl) && this.activeControl.getIsPopup()) {
+      this.activeControl.destroy();
+      this.activeControl.awake();
+    }
+  }
+  moveCursor(position) {
+    const { index: index2, trIndex, tdIndex, tdValueIndex } = position;
+    let elementList = this.draw.getOriginalElementList();
+    let element;
+    const newIndex = position.isTable ? tdValueIndex : index2;
+    if (position.isTable) {
+      elementList = elementList[index2].trList[trIndex].tdList[tdIndex].value;
+      element = elementList[tdValueIndex];
+    } else {
+      element = elementList[index2];
+    }
+    if (element.controlComponent === ControlComponent.VALUE) {
+      return {
+        newIndex,
+        newElement: element
+      };
+    } else if (element.controlComponent === ControlComponent.POSTFIX) {
+      let startIndex = newIndex + 1;
+      while (startIndex < elementList.length) {
+        const nextElement = elementList[startIndex];
+        if (nextElement.controlId !== element.controlId) {
+          return {
+            newIndex: startIndex - 1,
+            newElement: elementList[startIndex - 1]
+          };
+        }
+        startIndex++;
+      }
+    } else if (element.controlComponent === ControlComponent.PREFIX) {
+      let startIndex = newIndex + 1;
+      while (startIndex < elementList.length) {
+        const nextElement = elementList[startIndex];
+        if (nextElement.controlId !== element.controlId || nextElement.controlComponent !== ControlComponent.PREFIX) {
+          return {
+            newIndex: startIndex - 1,
+            newElement: elementList[startIndex - 1]
+          };
+        }
+        startIndex++;
+      }
+    } else if (element.controlComponent === ControlComponent.PLACEHOLDER) {
+      let startIndex = newIndex - 1;
+      while (startIndex > 0) {
+        const preElement = elementList[startIndex];
+        if (preElement.controlId !== element.controlId || preElement.controlComponent === ControlComponent.PREFIX) {
+          return {
+            newIndex: startIndex,
+            newElement: elementList[startIndex]
+          };
+        }
+        startIndex--;
+      }
+    }
+    return {
+      newIndex,
+      newElement: element
+    };
+  }
+  removeControl(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    if (!this.draw.isDesignMode()) {
+      const { deletable = true } = startElement.control;
+      if (!deletable)
+        return null;
+    }
+    let leftIndex = -1;
+    let rightIndex = -1;
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.controlId !== startElement.controlId) {
+        leftIndex = preIndex;
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.controlId !== startElement.controlId) {
+        rightIndex = nextIndex - 1;
+        break;
+      }
+      nextIndex++;
+    }
+    if (nextIndex === elementList.length) {
+      rightIndex = nextIndex - 1;
+    }
+    if (!~leftIndex && !~rightIndex)
+      return startIndex;
+    leftIndex = ~leftIndex ? leftIndex : 0;
+    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    return leftIndex;
+  }
+  removePlaceholder(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    const nextElement = elementList[startIndex + 1];
+    if (startElement.controlComponent === ControlComponent.PLACEHOLDER || nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
+      let isHasSubmitHistory = false;
+      let index2 = startIndex;
+      while (index2 < elementList.length) {
+        const curElement = elementList[index2];
+        if (curElement.controlId !== startElement.controlId)
+          break;
+        if (curElement.controlComponent === ControlComponent.PLACEHOLDER) {
+          if (!isHasSubmitHistory) {
+            isHasSubmitHistory = true;
+            this.draw.getHistoryManager().popUndo();
+            this.draw.submitHistory(startIndex);
+          }
+          elementList.splice(index2, 1);
+        } else {
+          index2++;
+        }
+      }
+    }
+  }
+  addPlaceholder(startIndex, context = {}) {
+    const elementList = context.elementList || this.getElementList();
+    const startElement = elementList[startIndex];
+    const control = startElement.control;
+    if (!control.placeholder)
+      return;
+    const placeholderStrList = splitText(control.placeholder);
+    const anchorElementStyleAttr = pickObject(startElement, CONTROL_STYLE_ATTR);
+    for (let p = 0; p < placeholderStrList.length; p++) {
+      const value = placeholderStrList[p];
+      const newElement = {
+        ...anchorElementStyleAttr,
+        value,
+        controlId: startElement.controlId,
+        type: ElementType.CONTROL,
+        control: startElement.control,
+        controlComponent: ControlComponent.PLACEHOLDER,
+        color: this.controlOptions.placeholderColor
+      };
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
+      this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
+    }
+  }
+  setValue(data2) {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
+    }
+    return this.activeControl.setValue(data2);
+  }
+  keydown(evt) {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
+    }
+    return this.activeControl.keydown(evt);
+  }
+  cut() {
+    if (!this.activeControl) {
+      throw new Error("active control is null");
+    }
+    return this.activeControl.cut();
+  }
+  getValueById(payload) {
+    const { id, conceptId } = payload;
+    const result = [];
+    if (!id && !conceptId)
+      return result;
+    const getValue = (elementList, zone2) => {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              getValue(td.value, zone2);
+            }
+          }
+        }
+        if (!element.control || id && element.controlId !== id || conceptId && element.control.conceptId !== conceptId) {
+          continue;
+        }
+        const { type, code, valueSets } = element.control;
+        let j = i;
+        let textControlValue = "";
+        const textControlElementList = [];
+        while (j < elementList.length) {
+          const nextElement = elementList[j];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          if ((type === ControlType.TEXT || type === ControlType.DATE) && nextElement.controlComponent === ControlComponent.VALUE) {
+            textControlValue += nextElement.value;
+            textControlElementList.push(omitObject(nextElement, CONTROL_CONTEXT_ATTR));
+          }
+          j++;
+        }
+        if (type === ControlType.TEXT || type === ControlType.DATE) {
+          result.push({
+            ...element.control,
+            zone: zone2,
+            value: textControlValue || null,
+            innerText: textControlValue || null,
+            elementList: zipElementList(textControlElementList)
+          });
+        } else if (type === ControlType.SELECT || type === ControlType.CHECKBOX || type === ControlType.RADIO) {
+          const innerText = code == null ? void 0 : code.split(",").map((selectCode) => {
+            var _a;
+            return (_a = valueSets == null ? void 0 : valueSets.find((valueSet) => valueSet.code === selectCode)) == null ? void 0 : _a.value;
+          }).filter(Boolean).join("");
+          result.push({
+            ...element.control,
+            zone: zone2,
+            value: code || null,
+            innerText: innerText || null
+          });
+        }
+        i = j;
+      }
+    };
+    const data2 = [
+      {
+        zone: EditorZone.HEADER,
+        elementList: this.draw.getHeaderElementList()
+      },
+      {
+        zone: EditorZone.MAIN,
+        elementList: this.draw.getOriginalMainElementList()
+      },
+      {
+        zone: EditorZone.FOOTER,
+        elementList: this.draw.getFooterElementList()
+      }
+    ];
+    for (const { zone: zone2, elementList } of data2) {
+      getValue(elementList, zone2);
+    }
+    return result;
+  }
+  setValueById(payload) {
+    let isExistSet = false;
+    const { id, conceptId, value } = payload;
+    if (!id && !conceptId)
+      return;
+    const setValue = (elementList) => {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setValue(td.value);
+            }
+          }
+        }
+        if (!element.control || id && element.controlId !== id || conceptId && element.control.conceptId !== conceptId) {
+          continue;
+        }
+        isExistSet = true;
+        const { type } = element.control;
+        let currentEndIndex = i;
+        while (currentEndIndex < elementList.length) {
+          const nextElement = elementList[currentEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          currentEndIndex++;
+        }
+        const fakeRange = {
+          startIndex: i - 1,
+          endIndex: currentEndIndex - 2
+        };
+        const controlContext = {
+          range: fakeRange,
+          elementList
+        };
+        const controlRule = {
+          isIgnoreDisabledRule: true
+        };
+        if (type === ControlType.TEXT) {
+          const formatValue = Array.isArray(value) ? value : [{ value }];
+          formatElementList(formatValue, {
+            isHandleFirstElement: false,
+            editorOptions: this.options
+          });
+          const text = new TextControl(element, this);
+          this.activeControl = text;
+          if (value) {
+            text.setValue(formatValue, controlContext, controlRule);
+          } else {
+            text.clearValue(controlContext, controlRule);
+          }
+        } else if (type === ControlType.SELECT) {
+          if (Array.isArray(value))
+            continue;
+          const select = new SelectControl(element, this);
+          this.activeControl = select;
+          if (value) {
+            select.setSelect(value, controlContext, controlRule);
+          } else {
+            select.clearSelect(controlContext, controlRule);
+          }
+        } else if (type === ControlType.CHECKBOX) {
+          if (Array.isArray(value))
+            continue;
+          const checkbox = new CheckboxControl(element, this);
+          this.activeControl = checkbox;
+          const codes = value ? value.split(",") : [];
+          checkbox.setSelect(codes, controlContext, controlRule);
+        } else if (type === ControlType.RADIO) {
+          if (Array.isArray(value))
+            continue;
+          const radio = new RadioControl(element, this);
+          this.activeControl = radio;
+          const codes = value ? [value] : [];
+          radio.setSelect(codes, controlContext, controlRule);
+        } else if (type === ControlType.DATE) {
+          if (Array.isArray(value))
+            continue;
+          const date = new DateControl(element, this);
+          this.activeControl = date;
+          if (value) {
+            date.setSelect(value, controlContext, controlRule);
+          } else {
+            date.clearSelect(controlContext, controlRule);
+          }
+        }
+        this.activeControl = null;
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    };
+    this.destroyControl();
+    const data2 = [
+      this.draw.getHeaderElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      setValue(elementList);
+    }
+    if (isExistSet) {
+      this.draw.render({
+        isSetCursor: false
+      });
+    }
+  }
+  setExtensionById(payload) {
+    const { id, conceptId, extension } = payload;
+    if (!id && !conceptId)
+      return;
+    const setExtension = (elementList) => {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setExtension(td.value);
+            }
+          }
+        }
+        if (!element.control || id && element.controlId !== id || conceptId && element.control.conceptId !== conceptId) {
+          continue;
+        }
+        element.control.extension = extension;
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    };
+    const data2 = [
+      this.draw.getHeaderElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooterElementList()
+    ];
+    for (const elementList of data2) {
+      setExtension(elementList);
+    }
+  }
+  setPropertiesById(payload) {
+    const { id, conceptId, properties } = payload;
+    if (!id && !conceptId)
+      return;
+    let isExistUpdate = false;
+    function setProperties(elementList) {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setProperties(td.value);
+            }
+          }
+        }
+        if (!element.control || id && element.controlId !== id || conceptId && element.control.conceptId !== conceptId) {
+          continue;
+        }
+        isExistUpdate = true;
+        element.control = {
+          ...element.control,
+          ...properties,
+          value: element.control.value
+        };
+        CONTROL_STYLE_ATTR.forEach((key) => {
+          const controlStyleProperty = properties[key];
+          if (controlStyleProperty) {
+            Reflect.set(element, key, controlStyleProperty);
+          }
+        });
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    }
+    const pageComponentData = {
+      header: this.draw.getHeaderElementList(),
+      main: this.draw.getOriginalMainElementList(),
+      footer: this.draw.getFooterElementList()
+    };
+    for (const key in pageComponentData) {
+      const elementList = pageComponentData[key];
+      setProperties(elementList);
+    }
+    if (!isExistUpdate)
+      return;
+    for (const key in pageComponentData) {
+      const pageComponentKey = key;
+      const elementList = zipElementList(pageComponentData[pageComponentKey]);
+      pageComponentData[pageComponentKey] = elementList;
+      formatElementList(elementList, {
+        editorOptions: this.options,
+        isForceCompensation: true
+      });
+    }
+    this.draw.setEditorData(pageComponentData);
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
+  getList() {
+    const controlElementList = [];
+    function getControlElementList(elementList) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              const tdElement = td.value;
+              getControlElementList(tdElement);
+            }
+          }
+        }
+        if (element.controlId) {
+          const controlElement = omitObject(element, [
+            ...TITLE_CONTEXT_ATTR,
+            ...LIST_CONTEXT_ATTR
+          ]);
+          controlElementList.push(controlElement);
+        }
+      }
+    }
+    const data2 = [
+      this.draw.getHeader().getElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooter().getElementList()
+    ];
+    for (const elementList of data2) {
+      getControlElementList(elementList);
+    }
+    return zipElementList(controlElementList, {
+      extraPickAttrs: ["controlId"]
+    });
+  }
+  recordBorderInfo(x, y, width, height) {
+    this.controlBorder.recordBorderInfo(x, y, width, height);
+  }
+  drawBorder(ctx) {
+    this.controlBorder.render(ctx);
+  }
+  getPreControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getPreContext(elementList2, start) {
+      for (let e = start; e > 0; e--) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = trList.length - 1; r >= 0; r--) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = tdList.length - 1; d >= 0; d--) {
+              const td = tdList[d];
+              const context2 = getPreContext(td.value, td.value.length - 1);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        let nextIndex = e;
+        while (nextIndex > 0) {
+          const nextElement = elementList2[nextIndex];
+          if (nextElement.controlComponent === ControlComponent.VALUE || nextElement.controlComponent === ControlComponent.PREFIX) {
+            break;
+          }
+          nextIndex--;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex
+        };
+      }
+      return null;
+    }
+    const { startIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getPreContext(elementList, startIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r >= 0; r--) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = tdList.length - 1; d >= 0; d--) {
+          if (trIndex === r && d >= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getPreContext(td.value, td.value.length - 1);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getPreContext(originalElementList, index2 - 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  getNextControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getNextContext(elementList2, start) {
+      for (let e = start; e < elementList2.length; e++) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              const context2 = getNextContext(td.value, 0);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: e
+        };
+      }
+      return null;
+    }
+    const { endIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getNextContext(elementList, endIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r < trList.length; r++) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = 0; d < tdList.length; d++) {
+          if (trIndex === r && d <= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getNextContext(td.value, 0);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getNextContext(originalElementList, index2 + 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  initNextControl(option = {}) {
+    const { direction = MoveDirection.DOWN } = option;
+    let context = null;
+    if (direction === MoveDirection.UP) {
+      context = this.getPreControlContext();
+    } else {
+      context = this.getNextControlContext();
+    }
+    if (!context)
+      return;
+    const { nextIndex, positionContext } = context;
+    const position = this.draw.getPosition();
+    position.setPositionContext(positionContext);
+    this.draw.getRange().replaceRange({
+      startIndex: nextIndex,
+      endIndex: nextIndex
+    });
+    this.draw.render({
+      curIndex: nextIndex,
+      isCompute: false,
+      isSetCursor: true,
+      isSubmitHistory: false
+    });
+    const positionList = position.getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[nextIndex],
+      direction
+    });
+  }
+  setMinWidthControlInfo(option) {
+    var _a, _b, _c, _d, _e;
+    const { row, rowElement, controlRealWidth, availableWidth } = option;
+    if (!((_a = rowElement.control) == null ? void 0 : _a.minWidth))
+      return;
+    const { scale } = this.options;
+    const controlMinWidth = rowElement.control.minWidth * scale;
+    let controlFirstElement = null;
+    if (((_b = rowElement.control) == null ? void 0 : _b.minWidth) && (((_c = rowElement.control) == null ? void 0 : _c.rowFlex) === RowFlex.CENTER || ((_d = rowElement.control) == null ? void 0 : _d.rowFlex) === RowFlex.RIGHT)) {
+      let controlContentWidth = rowElement.metrics.width;
+      let controlElementIndex = row.elementList.length - 1;
+      while (controlElementIndex >= 0) {
+        const controlRowElement = row.elementList[controlElementIndex];
+        controlContentWidth += controlRowElement.metrics.width;
+        if (((_e = row.elementList[controlElementIndex - 1]) == null ? void 0 : _e.controlComponent) === ControlComponent.PREFIX) {
+          controlFirstElement = controlRowElement;
+          break;
+        }
+        controlElementIndex--;
+      }
+      if (controlFirstElement) {
+        if (controlContentWidth < controlMinWidth) {
+          if (rowElement.control.rowFlex === RowFlex.CENTER) {
+            controlFirstElement.left = (controlMinWidth - controlContentWidth) / 2;
+          } else if (rowElement.control.rowFlex === RowFlex.RIGHT) {
+            controlFirstElement.left = controlMinWidth - controlContentWidth - rowElement.metrics.width;
+          }
+        }
+      }
+    }
+    const extraWidth = controlMinWidth - controlRealWidth;
+    if (extraWidth > 0) {
+      const controlFirstElementLeft = (controlFirstElement == null ? void 0 : controlFirstElement.left) || 0;
+      const rowRemainingWidth = availableWidth - row.width - rowElement.metrics.width;
+      const left2 = Math.min(rowRemainingWidth, extraWidth);
+      rowElement.left = left2 - controlFirstElementLeft;
+      row.width += left2 - controlFirstElementLeft;
+    }
+  }
+}
+class CheckboxParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  setSelect(element) {
+    const { checkbox } = element;
+    if (checkbox) {
+      checkbox.value = !checkbox.value;
+    } else {
+      element.checkbox = {
+        value: true
+      };
+    }
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false
+    });
+  }
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { checkbox: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, checkbox } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
+    const left2 = Math.round(x + gap * scale);
+    const top = Math.round(y - metrics.height + lineWidth);
+    const width = metrics.width - gap * 2 * scale;
+    const height = metrics.height;
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(0.5, 0.5);
+    if (checkbox == null ? void 0 : checkbox.value) {
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = fillStyle;
+      ctx.rect(left2, top, width, height);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.fillStyle = fillStyle;
+      ctx.fillRect(left2, top, width, height);
+      ctx.beginPath();
+      ctx.strokeStyle = strokeStyle;
+      ctx.lineWidth = lineWidth * 2 * scale;
+      ctx.moveTo(left2 + 2 * scale, top + height / 2);
+      ctx.lineTo(left2 + width / 2, top + height - 3 * scale);
+      ctx.lineTo(left2 + width - 2 * scale, top + 3 * scale);
+      ctx.stroke();
+    } else {
+      ctx.lineWidth = lineWidth;
+      ctx.rect(left2, top, width, height);
+      ctx.stroke();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+}
+class RadioParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  setSelect(element) {
+    const { radio } = element;
+    if (radio) {
+      radio.value = !radio.value;
+    } else {
+      element.radio = {
+        value: true
+      };
+    }
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false
+    });
+  }
+  render(payload) {
+    const { ctx, x, index: index2, row } = payload;
+    let { y } = payload;
+    const { radio: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign }, scale } = this.options;
+    const { metrics, radio } = row.elementList[index2];
+    if (verticalAlign === VerticalAlign.TOP || verticalAlign === VerticalAlign.MIDDLE) {
+      let nextIndex = index2 + 1;
+      let nextElement = null;
+      while (nextIndex < row.elementList.length) {
+        nextElement = row.elementList[nextIndex];
+        if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+          break;
+        nextIndex++;
+      }
+      if (nextElement) {
+        const { metrics: { boundingBoxAscent, boundingBoxDescent } } = nextElement;
+        const textHeight = boundingBoxAscent + boundingBoxDescent;
+        if (textHeight > metrics.height) {
+          if (verticalAlign === VerticalAlign.TOP) {
+            y -= boundingBoxAscent - metrics.height;
+          } else if (verticalAlign === VerticalAlign.MIDDLE) {
+            y -= (textHeight - metrics.height) / 2;
+          }
+        }
+      }
+    }
+    const left2 = Math.round(x + gap * scale);
+    const top = Math.round(y - metrics.height + lineWidth);
+    const width = metrics.width - gap * 2 * scale;
+    const height = metrics.height;
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = (radio == null ? void 0 : radio.value) ? fillStyle : strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.arc(left2 + width / 2, top + height / 2, width / 2, 0, Math.PI * 2);
+    ctx.stroke();
+    if (radio == null ? void 0 : radio.value) {
+      ctx.beginPath();
+      ctx.fillStyle = fillStyle;
+      ctx.arc(left2 + width / 2, top + height / 2, width / 3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+}
+const encodedJs$2 = "KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2NvbnN0IGE9Ilx1MjAwQiIsdT1gCmA7ZnVuY3Rpb24gZihpKXtsZXQgcz0iIixuPTA7Zm9yKDtuPGkubGVuZ3RoOyl7Y29uc3QgZT1pW25dO2lmKGUudHlwZT09PSJ0YWJsZSIpe2lmKGUudHJMaXN0KWZvcihsZXQgbD0wO2w8ZS50ckxpc3QubGVuZ3RoO2wrKyl7Y29uc3Qgbz1lLnRyTGlzdFtsXTtmb3IobGV0IHQ9MDt0PG8udGRMaXN0Lmxlbmd0aDt0Kyspe2NvbnN0IHI9by50ZExpc3RbdF07cys9ZihyLnZhbHVlKX19fWVsc2UgaWYoZS50eXBlPT09Imh5cGVybGluayIpe2NvbnN0IGw9ZS5oeXBlcmxpbmtJZCxvPVtdO2Zvcig7bjxpLmxlbmd0aDspe2NvbnN0IHQ9aVtuXTtpZihsIT09dC5oeXBlcmxpbmtJZCl7bi0tO2JyZWFrfWRlbGV0ZSB0LnR5cGUsby5wdXNoKHQpLG4rK31zKz1mKG8pfWVsc2UgaWYoZS5jb250cm9sSWQpe2NvbnN0IGw9ZS5jb250cm9sSWQsbz1bXTtmb3IoO248aS5sZW5ndGg7KXtjb25zdCB0PWlbbl07aWYobCE9PXQuY29udHJvbElkKXtuLS07YnJlYWt9dC5jb250cm9sQ29tcG9uZW50PT09InZhbHVlIiYmKGRlbGV0ZSB0LmNvbnRyb2xJZCxvLnB1c2godCkpLG4rK31zKz1mKG8pfWVsc2UoIWUudHlwZXx8ZS50eXBlPT09InRleHQiKSYmKHMrPWUudmFsdWUpO24rK31yZXR1cm4gc31mdW5jdGlvbiBoKGkpe2NvbnN0IHM9W10sbj0vWzAtOV0vLGU9L1tBLVphLXpdLyxsPS9ccy87bGV0IG89ITEsdD0hMSxyPSIiO2Z1bmN0aW9uIHAoKXtyJiYocy5wdXNoKHIpLHI9IiIpfWZvcihjb25zdCBjIG9mIGkpZS50ZXN0KGMpPyhvfHxwKCkscis9YyxvPSEwLHQ9ITEpOm4udGVzdChjKT8odHx8cCgpLHIrPWMsbz0hMSx0PSEwKToocCgpLG89ITEsdD0hMSxsLnRlc3QoYyl8fHMucHVzaChjKSk7cmV0dXJuIHAoKSxzfW9ubWVzc2FnZT1pPT57Y29uc3Qgcz1pLmRhdGEsZT1mKHMpLnJlcGxhY2UobmV3IFJlZ0V4cChgXiR7YX1gKSwiIikucmVwbGFjZShuZXcgUmVnRXhwKGEsImciKSx1KSxsPWgoZSk7cG9zdE1lc3NhZ2UobC5sZW5ndGgpfX0pKCk7Cg==";
+const blob$2 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$2)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper$2() {
+  const objURL = blob$2 && (window.URL || window.webkitURL).createObjectURL(blob$2);
+  try {
+    return objURL ? new Worker(objURL, {}) : new Worker("data:application/javascript;base64," + encodedJs$2, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+const encodedJs$1 = "KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2NvbnN0IHU9e2ZpcnN0OjEsc2Vjb25kOjIsdGhpcmQ6Myxmb3VydGg6NCxmaWZ0aDo1LHNpeHRoOjZ9LGg9WyJ0ZXh0IiwiaHlwZXJsaW5rIiwic3Vic2NyaXB0Iiwic3VwZXJzY3JpcHQiLCJjb250cm9sIiwiZGF0ZSJdLGQ9Ilx1MjAwQiI7ZnVuY3Rpb24gZihuKXtyZXR1cm4hbi50eXBlfHxoLmluY2x1ZGVzKG4udHlwZSl9ZnVuY3Rpb24gRShuKXtjb25zdHtlbGVtZW50TGlzdDpvLHBvc2l0aW9uTGlzdDpnfT1uLHA9W107bGV0IHM9MDtmb3IoO3M8by5sZW5ndGg7KXtjb25zdCBlPW9bc107aWYoZS50aXRsZUlkKXtjb25zdCB0PWUudGl0bGVJZCxsPWUubGV2ZWwsaT17dHlwZToidGl0bGUiLHZhbHVlOiIiLGxldmVsOmwsdGl0bGVJZDp0LHBhZ2VObzpnW3NdLnBhZ2VOb30sYT1bXTtmb3IoO3M8by5sZW5ndGg7KXtjb25zdCBjPW9bc107aWYodCE9PWMudGl0bGVJZCl7cy0tO2JyZWFrfWEucHVzaChjKSxzKyt9aS52YWx1ZT1hLmZpbHRlcihjPT5mKGMpKS5tYXAoYz0+Yy52YWx1ZSkuam9pbigiIikucmVwbGFjZShuZXcgUmVnRXhwKGQsImciKSwiIikscC5wdXNoKGkpfXMrK31pZighcC5sZW5ndGgpcmV0dXJuIG51bGw7Y29uc3Qgdj0oZSx0KT0+e2NvbnN0IGw9dC5zdWJDYXRhbG9nW3Quc3ViQ2F0YWxvZy5sZW5ndGgtMV0saT11W2w9PW51bGw/dm9pZCAwOmwubGV2ZWxdLGE9dVtlLmxldmVsXTtsJiZhPmk/dihlLGwpOnQuc3ViQ2F0YWxvZy5wdXNoKHtpZDplLnRpdGxlSWQsbmFtZTplLnZhbHVlLGxldmVsOmUubGV2ZWwscGFnZU5vOmUucGFnZU5vLHN1YkNhdGFsb2c6W119KX0scj1bXTtmb3IobGV0IGU9MDtlPHAubGVuZ3RoO2UrKyl7Y29uc3QgdD1wW2VdLGw9cltyLmxlbmd0aC0xXSxpPXVbbD09bnVsbD92b2lkIDA6bC5sZXZlbF0sYT11W3QubGV2ZWxdO2wmJmE+aT92KHQsbCk6ci5wdXNoKHtpZDp0LnRpdGxlSWQsbmFtZTp0LnZhbHVlLGxldmVsOnQubGV2ZWwscGFnZU5vOnQucGFnZU5vLHN1YkNhdGFsb2c6W119KX1yZXR1cm4gcn1vbm1lc3NhZ2U9bj0+e2NvbnN0IG89bi5kYXRhLGc9RShvKTtwb3N0TWVzc2FnZShnKX19KSgpOwo=";
+const blob$1 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$1)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper$1() {
+  const objURL = blob$1 && (window.URL || window.webkitURL).createObjectURL(blob$1);
+  try {
+    return objURL ? new Worker(objURL, {}) : new Worker("data:application/javascript;base64," + encodedJs$1, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+const encodedJs = "KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2Z1bmN0aW9uIHUoZSl7Y29uc3QgdD1bXTtmb3IoY29uc3QgcyBvZiBlKXtpZihzLnR5cGU9PT0idGFibGUiKXtjb25zdCBvPXMudHJMaXN0O2ZvcihsZXQgbj0wO248by5sZW5ndGg7bisrKXtjb25zdCBjPW9bbl07Zm9yKGxldCByPTA7cjxjLnRkTGlzdC5sZW5ndGg7cisrKXtjb25zdCBpPWMudGRMaXN0W3JdO3QucHVzaCguLi51KGkudmFsdWUpKX19fWlmKCEhcy5ncm91cElkcylmb3IoY29uc3QgbyBvZiBzLmdyb3VwSWRzKXQuaW5jbHVkZXMobyl8fHQucHVzaChvKX1yZXR1cm4gdH1vbm1lc3NhZ2U9ZT0+e2NvbnN0IHQ9ZS5kYXRhLHM9dSh0KTtwb3N0TWVzc2FnZShzKX19KSgpOwo=";
+const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper() {
+  const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
+  try {
+    return objURL ? new Worker(objURL, {}) : new Worker("data:application/javascript;base64," + encodedJs, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+class WorkerManager {
+  constructor(draw) {
+    this.draw = draw;
+    this.wordCountWorker = new WorkerWrapper$2();
+    this.catalogWorker = new WorkerWrapper$1();
+    this.groupWorker = new WorkerWrapper();
+  }
+  getWordCount() {
+    return new Promise((resolve, reject) => {
+      this.wordCountWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.wordCountWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.wordCountWorker.postMessage(elementList);
+    });
+  }
+  getCatalog() {
+    return new Promise((resolve, reject) => {
+      this.catalogWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.catalogWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      const positionList = this.draw.getPosition().getOriginalMainPositionList();
+      this.catalogWorker.postMessage({
+        elementList,
+        positionList
+      });
+    });
+  }
+  getGroupIds() {
+    return new Promise((resolve, reject) => {
+      this.groupWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.groupWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.groupWorker.postMessage(elementList);
+    });
+  }
+}
+class Previewer {
+  constructor(draw) {
+    this._keydown = () => {
+      if (this.resizerSelection.style.display === "block") {
+        this.clearResizer();
+        document.removeEventListener("keydown", this._keydown);
+      }
+    };
+    this.container = draw.getContainer();
+    this.canvas = draw.getPage();
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.curElement = null;
+    this.curElementSrc = "";
+    this.previewerDrawOption = {};
+    this.curPosition = null;
+    const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage, resizerSize } = this._createResizerDom();
+    this.resizerSelection = resizerSelection;
+    this.resizerHandleList = resizerHandleList;
+    this.resizerImageContainer = resizerImageContainer;
+    this.resizerImage = resizerImage;
+    this.resizerSize = resizerSize;
+    this.width = 0;
+    this.height = 0;
+    this.mousedownX = 0;
+    this.mousedownY = 0;
+    this.curHandleIndex = 0;
+    this.previewerContainer = null;
+    this.previewerImage = null;
+  }
+  _getElementPosition(element, position = null) {
+    var _a;
+    let x = 0;
+    let y = 0;
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const pageNo = (_a = position == null ? void 0 : position.pageNo) != null ? _a : this.draw.getPageNo();
+    const preY = pageNo * (height + pageGap);
+    if (element.imgFloatPosition) {
+      x = element.imgFloatPosition.x;
+      y = element.imgFloatPosition.y + preY;
+    } else if (position) {
+      const { coordinate: { leftTop: [left2, top] }, ascent } = position;
+      x = left2;
+      y = top + preY + ascent;
+    }
+    return { x, y };
+  }
+  _createResizerDom() {
+    const { scale } = this.options;
+    const resizerSelection = document.createElement("div");
+    resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
+    resizerSelection.style.display = "none";
+    resizerSelection.style.borderColor = this.options.resizerColor;
+    resizerSelection.style.borderWidth = `${scale}px`;
+    const resizerHandleList = [];
+    for (let i = 0; i < 8; i++) {
+      const handleDom = document.createElement("div");
+      handleDom.style.background = this.options.resizerColor;
+      handleDom.classList.add(`resizer-handle`);
+      handleDom.classList.add(`handle-${i}`);
+      handleDom.setAttribute("data-index", String(i));
+      handleDom.onmousedown = this._mousedown.bind(this);
+      resizerSelection.append(handleDom);
+      resizerHandleList.push(handleDom);
+    }
+    this.container.append(resizerSelection);
+    const resizerSizeView = document.createElement("div");
+    resizerSizeView.classList.add(`${EDITOR_PREFIX}-resizer-size-view`);
+    const resizerSize = document.createElement("span");
+    resizerSizeView.append(resizerSize);
+    resizerSelection.append(resizerSizeView);
+    const resizerImageContainer = document.createElement("div");
+    resizerImageContainer.classList.add(`${EDITOR_PREFIX}-resizer-image`);
+    resizerImageContainer.style.display = "none";
+    const resizerImage = document.createElement("img");
+    resizerImageContainer.append(resizerImage);
+    this.container.append(resizerImageContainer);
+    return {
+      resizerSelection,
+      resizerHandleList,
+      resizerImageContainer,
+      resizerImage,
+      resizerSize
+    };
+  }
+  _mousedown(evt) {
+    this.canvas = this.draw.getPage();
+    if (!this.curElement)
+      return;
+    const { scale } = this.options;
+    this.mousedownX = evt.x;
+    this.mousedownY = evt.y;
+    const target = evt.target;
+    this.curHandleIndex = Number(target.dataset.index);
+    const cursor = window.getComputedStyle(target).cursor;
+    document.body.style.cursor = cursor;
+    this.canvas.style.cursor = cursor;
+    this.resizerImage.src = this.curElementSrc;
+    this.resizerImageContainer.style.display = "block";
+    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(this.curElement, this.curPosition);
+    this.resizerImageContainer.style.left = `${resizerLeft}px`;
+    this.resizerImageContainer.style.top = `${resizerTop}px`;
+    this.resizerImage.style.width = `${this.curElement.width * scale}px`;
+    this.resizerImage.style.height = `${this.curElement.height * scale}px`;
+    const mousemoveFn = this._mousemove.bind(this);
+    document.addEventListener("mousemove", mousemoveFn);
+    document.addEventListener("mouseup", () => {
+      var _a;
+      if (this.curElement && !this.previewerDrawOption.dragDisable) {
+        this.curElement.width = this.width;
+        this.curElement.height = this.height;
+        this.draw.render({
+          isSetCursor: true,
+          curIndex: (_a = this.curPosition) == null ? void 0 : _a.index
+        });
+      }
+      this.resizerImageContainer.style.display = "none";
+      document.removeEventListener("mousemove", mousemoveFn);
+      document.body.style.cursor = "";
+      this.canvas.style.cursor = "text";
+    }, {
+      once: true
+    });
+    evt.preventDefault();
+  }
+  _mousemove(evt) {
+    if (!this.curElement || this.previewerDrawOption.dragDisable)
+      return;
+    const { scale } = this.options;
+    let dx = 0;
+    let dy = 0;
+    switch (this.curHandleIndex) {
+      case 0:
+      {
+        const offsetX = this.mousedownX - evt.x;
+        const offsetY = this.mousedownY - evt.y;
+        dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+        dy = this.curElement.height * dx / this.curElement.width;
+      }
+        break;
+      case 1:
+        dy = this.mousedownY - evt.y;
+        break;
+      case 2:
+      {
+        const offsetX = evt.x - this.mousedownX;
+        const offsetY = this.mousedownY - evt.y;
+        dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+        dy = this.curElement.height * dx / this.curElement.width;
+      }
+        break;
+      case 4:
+      {
+        const offsetX = evt.x - this.mousedownX;
+        const offsetY = evt.y - this.mousedownY;
+        dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+        dy = this.curElement.height * dx / this.curElement.width;
+      }
+        break;
+      case 3:
+        dx = evt.x - this.mousedownX;
+        break;
+      case 5:
+        dy = evt.y - this.mousedownY;
+        break;
+      case 6:
+      {
+        const offsetX = this.mousedownX - evt.x;
+        const offsetY = evt.y - this.mousedownY;
+        dx = Math.cbrt(offsetX ** 3 + offsetY ** 3);
+        dy = this.curElement.height * dx / this.curElement.width;
+      }
+        break;
+      case 7:
+        dx = this.mousedownX - evt.x;
+        break;
+    }
+    const dw = this.curElement.width + dx / scale;
+    const dh = this.curElement.height + dy / scale;
+    if (dw <= 0 || dh <= 0)
+      return;
+    this.width = dw;
+    this.height = dh;
+    const elementWidth = dw * scale;
+    const elementHeight = dh * scale;
+    this.resizerImage.style.width = `${elementWidth}px`;
+    this.resizerImage.style.height = `${elementHeight}px`;
+    this._updateResizerRect(elementWidth, elementHeight);
+    this._updateResizerSizeView(elementWidth, elementHeight);
+    evt.preventDefault();
+  }
+  _drawPreviewer() {
+    const previewerContainer = document.createElement("div");
+    previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`);
+    const closeBtn = document.createElement("i");
+    closeBtn.classList.add("image-close");
+    closeBtn.onclick = () => {
+      this._clearPreviewer();
+    };
+    previewerContainer.append(closeBtn);
+    const imgContainer = document.createElement("div");
+    imgContainer.classList.add(`${EDITOR_PREFIX}-image-container`);
+    const img = document.createElement("img");
+    img.src = this.curElementSrc;
+    img.draggable = false;
+    imgContainer.append(img);
+    this.previewerImage = img;
+    previewerContainer.append(imgContainer);
+    let x = 0;
+    let y = 0;
+    let scaleSize = 1;
+    let rotateSize = 0;
+    const menuContainer = document.createElement("div");
+    menuContainer.classList.add(`${EDITOR_PREFIX}-image-menu`);
+    const zoomIn = document.createElement("i");
+    zoomIn.classList.add("zoom-in");
+    zoomIn.onclick = () => {
+      scaleSize += 0.1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+    menuContainer.append(zoomIn);
+    const zoomOut = document.createElement("i");
+    zoomOut.onclick = () => {
+      if (scaleSize - 0.1 <= 0.1)
+        return;
+      scaleSize -= 0.1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+    zoomOut.classList.add("zoom-out");
+    menuContainer.append(zoomOut);
+    const rotate = document.createElement("i");
+    rotate.classList.add("rotate");
+    rotate.onclick = () => {
+      rotateSize += 1;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+    menuContainer.append(rotate);
+    const originalSize = document.createElement("i");
+    originalSize.classList.add("original-size");
+    originalSize.onclick = () => {
+      x = 0;
+      y = 0;
+      scaleSize = 1;
+      rotateSize = 0;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+    menuContainer.append(originalSize);
+    const imageDownload = document.createElement("i");
+    imageDownload.classList.add("image-download");
+    imageDownload.onclick = () => {
+      var _a;
+      const { mime } = this.previewerDrawOption;
+      downloadFile(img.src, `${(_a = this.curElement) == null ? void 0 : _a.id}.${mime || "png"}`);
+    };
+    menuContainer.append(imageDownload);
+    previewerContainer.append(menuContainer);
+    this.previewerContainer = previewerContainer;
+    document.body.append(previewerContainer);
+    let startX = 0;
+    let startY = 0;
+    let isAllowDrag = false;
+    img.onmousedown = (evt) => {
+      isAllowDrag = true;
+      startX = evt.x;
+      startY = evt.y;
+      previewerContainer.style.cursor = "move";
+    };
+    previewerContainer.onmousemove = (evt) => {
+      if (!isAllowDrag)
+        return;
+      x += evt.x - startX;
+      y += evt.y - startY;
+      startX = evt.x;
+      startY = evt.y;
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+    previewerContainer.onmouseup = () => {
+      isAllowDrag = false;
+      previewerContainer.style.cursor = "auto";
+    };
+    previewerContainer.onwheel = (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (evt.deltaY < 0) {
+        scaleSize += 0.1;
+      } else {
+        if (scaleSize - 0.1 <= 0.1)
+          return;
+        scaleSize -= 0.1;
+      }
+      this._setPreviewerTransform(scaleSize, rotateSize, x, y);
+    };
+  }
+  _setPreviewerTransform(scale, rotate, x, y) {
+    if (!this.previewerImage)
+      return;
+    this.previewerImage.style.left = `${x}px`;
+    this.previewerImage.style.top = `${y}px`;
+    this.previewerImage.style.transform = `scale(${scale}) rotate(${rotate * 90}deg)`;
+  }
+  _clearPreviewer() {
+    var _a;
+    (_a = this.previewerContainer) == null ? void 0 : _a.remove();
+    this.previewerContainer = null;
+    document.body.style.overflow = "auto";
+  }
+  _updateResizerRect(width, height) {
+    const { resizerSize: handleSize, scale } = this.options;
+    this.resizerSelection.style.width = `${width}px`;
+    this.resizerSelection.style.height = `${height}px`;
+    for (let i = 0; i < 8; i++) {
+      const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
+      const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
+      this.resizerHandleList[i].style.transform = `scale(${scale})`;
+      this.resizerHandleList[i].style.left = `${left2}px`;
+      this.resizerHandleList[i].style.top = `${top}px`;
+    }
+  }
+  _updateResizerSizeView(width, height) {
+    this.resizerSize.innerText = `${Math.round(width)} \xD7 ${Math.round(height)}`;
+  }
+  render() {
+    this._drawPreviewer();
+    document.body.style.overflow = "hidden";
+  }
+  drawResizer(element, position = null, options = {}) {
+    this.previewerDrawOption = options;
+    this.curElementSrc = element[options.srcKey || "value"] || "";
+    this.updateResizer(element, position);
+    document.addEventListener("keydown", this._keydown);
+  }
+  updateResizer(element, position = null) {
+    const { scale } = this.options;
+    const elementWidth = element.width * scale;
+    const elementHeight = element.height * scale;
+    this._updateResizerSizeView(elementWidth, elementHeight);
+    const { x: resizerLeft, y: resizerTop } = this._getElementPosition(element, position);
+    this.resizerSelection.style.left = `${resizerLeft}px`;
+    this.resizerSelection.style.top = `${resizerTop}px`;
+    this.resizerSelection.style.borderWidth = `${scale}px`;
+    this._updateResizerRect(elementWidth, elementHeight);
+    this.resizerSelection.style.display = "block";
+    this.curElement = element;
+    this.curPosition = position;
+    this.width = elementWidth;
+    this.height = elementHeight;
+  }
+  clearResizer() {
+    this.resizerSelection.style.display = "none";
+    document.removeEventListener("keydown", this._keydown);
+  }
+}
+class DateParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.range = draw.getRange();
+    this.datePicker = new DatePicker(draw, {
+      onSubmit: this._setValue.bind(this)
+    });
+  }
+  _setValue(date) {
+    if (!date)
+      return;
+    const range = this.getDateElementRange();
+    if (!range)
+      return;
+    const [leftIndex, rightIndex] = range;
+    const elementList = this.draw.getElementList();
+    const startElement = elementList[leftIndex + 1];
+    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
+    this.range.setRange(leftIndex, leftIndex);
+    const dateElement = {
+      type: ElementType.DATE,
+      value: "",
+      dateFormat: startElement.dateFormat,
+      valueList: [
+        {
+          value: date
+        }
+      ]
+    };
+    formatElementContext(elementList, [dateElement], leftIndex, {
+      editorOptions: this.options
+    });
+    this.draw.insertElementList([dateElement]);
+  }
+  getDateElementRange() {
+    let leftIndex = -1;
+    let rightIndex = -1;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return null;
+    const elementList = this.draw.getElementList();
+    const startElement = elementList[startIndex];
+    if (startElement.type !== ElementType.DATE)
+      return null;
+    let preIndex = startIndex;
+    while (preIndex >= 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.dateId !== startElement.dateId) {
+        leftIndex = preIndex;
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.dateId !== startElement.dateId) {
+        rightIndex = nextIndex - 1;
+        break;
+      }
+      nextIndex++;
+    }
+    if (nextIndex === elementList.length) {
+      rightIndex = nextIndex - 1;
+    }
+    if (!~leftIndex || !~rightIndex)
+      return null;
+    return [leftIndex, rightIndex];
+  }
+  clearDatePicker() {
+    this.datePicker.dispose();
+  }
+  renderDatePicker(element, position) {
+    const elementList = this.draw.getElementList();
+    const range = this.getDateElementRange();
+    const value = range ? elementList.slice(range[0] + 1, range[1] + 1).map((el) => el.value).join("") : "";
+    this.datePicker.render({
+      value,
+      position,
+      dateFormat: element.dateFormat
+    });
+  }
+}
+var BlockType;
+(function(BlockType2) {
+  BlockType2["IFRAME"] = "iframe";
+  BlockType2["VIDEO"] = "video";
+})(BlockType || (BlockType = {}));
+const _IFrameBlock = class {
+  constructor(element) {
+    this.element = element;
+  }
+  _defineIframeProperties(iframeWindow) {
+    Object.defineProperties(iframeWindow, {
+      parent: {
+        get: () => null
+      },
+      __POWERED_BY_CANVAS_EDITOR__: {
+        get: () => true
+      }
+    });
+  }
+  render(blockItemContainer) {
+    var _a, _b;
+    const block = this.element.block;
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("data-id", this.element.id);
+    iframe.sandbox.add(..._IFrameBlock.sandbox);
+    iframe.style.border = "none";
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    if ((_a = block.iframeBlock) == null ? void 0 : _a.src) {
+      iframe.src = block.iframeBlock.src;
+    } else if ((_b = block.iframeBlock) == null ? void 0 : _b.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc;
+    }
+    blockItemContainer.append(iframe);
+    this._defineIframeProperties(iframe.contentWindow);
+  }
+};
+let IFrameBlock = _IFrameBlock;
+IFrameBlock.sandbox = ["allow-scripts", "allow-same-origin"];
+class VideoBlock {
+  constructor(element) {
+    this.element = element;
+  }
+  render(blockItemContainer) {
+    var _a;
+    const block = this.element.block;
+    const video = document.createElement("video");
+    video.style.width = "100%";
+    video.style.height = "100%";
+    video.style.objectFit = "contain";
+    video.src = ((_a = block.videoBlock) == null ? void 0 : _a.src) || "";
+    video.controls = true;
+    video.crossOrigin = "anonymous";
+    blockItemContainer.append(video);
+  }
+}
+class BaseBlock {
+  constructor(blockParticle, element) {
+    this.draw = blockParticle.getDraw();
+    this.blockContainer = blockParticle.getBlockContainer();
+    this.element = element;
+    this.block = null;
+    this.blockItem = this._createBlockItem();
+    this.blockContainer.append(this.blockItem);
+  }
+  getBlockElement() {
+    return this.element;
+  }
+  _createBlockItem() {
+    const blockItem = document.createElement("div");
+    blockItem.classList.add(`${EDITOR_PREFIX}-block-item`);
+    return blockItem;
+  }
+  render() {
+    const block = this.element.block;
+    if (block.type === BlockType.IFRAME) {
+      this.block = new IFrameBlock(this.element);
+      this.block.render(this.blockItem);
+    } else if (block.type === BlockType.VIDEO) {
+      this.block = new VideoBlock(this.element);
+      this.block.render(this.blockItem);
+    }
+  }
+  setClientRects(pageNo, x, y) {
+    const height = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const preY = pageNo * (height + pageGap);
+    const { metrics } = this.element;
+    this.blockItem.style.width = `${metrics.width}px`;
+    this.blockItem.style.height = `${metrics.height}px`;
+    this.blockItem.style.left = `${x}px`;
+    this.blockItem.style.top = `${preY + y}px`;
+  }
+  remove() {
+    this.blockItem.remove();
+  }
+}
+class BlockParticle {
+  constructor(draw) {
+    this.draw = draw;
+    this.container = draw.getContainer();
+    this.blockMap = /* @__PURE__ */ new Map();
+    this.blockContainer = this._createBlockContainer();
+    this.container.append(this.blockContainer);
+  }
+  _createBlockContainer() {
+    const blockContainer = document.createElement("div");
+    blockContainer.classList.add(`${EDITOR_PREFIX}-block-container`);
+    return blockContainer;
+  }
+  getDraw() {
+    return this.draw;
+  }
+  getBlockContainer() {
+    return this.blockContainer;
+  }
+  render(pageNo, element, x, y) {
+    const id = element.id;
+    const cacheBlock = this.blockMap.get(id);
+    if (cacheBlock) {
+      cacheBlock.setClientRects(pageNo, x, y);
+    } else {
+      const newBlock = new BaseBlock(this, element);
+      newBlock.render();
+      newBlock.setClientRects(pageNo, x, y);
+      this.blockMap.set(id, newBlock);
+    }
+  }
+  clear() {
+    if (!this.blockMap.size)
+      return;
+    const elementList = this.draw.getElementList();
+    const blockElementIds = [];
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.type === ElementType.BLOCK) {
+        blockElementIds.push(element.id);
+      }
+    }
+    this.blockMap.forEach((block) => {
+      const id = block.getBlockElement().id;
+      if (!blockElementIds.includes(id)) {
+        block.remove();
+        this.blockMap.delete(id);
+      }
+    });
+  }
+}
+const contextmenu$1 = {
+  global: {
+    cut: "\u526A\u5207",
+    copy: "\u590D\u5236",
+    paste: "\u7C98\u8D34",
+    selectAll: "\u5168\u9009",
+    print: "\u6253\u5370"
+  },
+  control: {
+    "delete": "\u5220\u9664\u63A7\u4EF6"
+  },
+  hyperlink: {
+    "delete": "\u5220\u9664\u94FE\u63A5",
+    cancel: "\u53D6\u6D88\u94FE\u63A5",
+    edit: "\u7F16\u8F91\u94FE\u63A5"
+  },
+  image: {
+    change: "\u66F4\u6539\u56FE\u7247",
+    saveAs: "\u53E6\u5B58\u4E3A\u56FE\u7247",
+    textWrap: "\u6587\u5B57\u73AF\u7ED5",
+    textWrapType: {
+      embed: "\u5D4C\u5165\u578B",
+      upDown: "\u4E0A\u4E0B\u578B\u73AF\u7ED5",
+      surround: "\u56DB\u5468\u578B\u73AF\u7ED5",
+      floatTop: "\u6D6E\u4E8E\u6587\u5B57\u4E0A\u65B9",
+      floatBottom: "\u886C\u4E8E\u6587\u5B57\u4E0B\u65B9"
+    }
+  },
+  table: {
+    insertRowCol: "\u63D2\u5165\u884C\u5217",
+    insertTopRow: "\u4E0A\u65B9\u63D2\u51651\u884C",
+    insertBottomRow: "\u4E0B\u65B9\u63D2\u51651\u884C",
+    insertLeftCol: "\u5DE6\u4FA7\u63D2\u51651\u5217",
+    insertRightCol: "\u53F3\u4FA7\u63D2\u51651\u5217",
+    deleteRowCol: "\u5220\u9664\u884C\u5217",
+    deleteRow: "\u5220\u96641\u884C",
+    deleteCol: "\u5220\u96641\u5217",
+    deleteTable: "\u5220\u9664\u6574\u4E2A\u8868\u683C",
+    mergeCell: "\u5408\u5E76\u5355\u5143\u683C",
+    mergeCancelCell: "\u53D6\u6D88\u5408\u5E76",
+    verticalAlign: "\u5782\u76F4\u5BF9\u9F50",
+    verticalAlignTop: "\u9876\u7AEF\u5BF9\u9F50",
+    verticalAlignMiddle: "\u5782\u76F4\u5C45\u4E2D",
+    verticalAlignBottom: "\u5E95\u7AEF\u5BF9\u9F50",
+    border: "\u8868\u683C\u8FB9\u6846",
+    borderAll: "\u6240\u6709\u6846\u7EBF",
+    borderEmpty: "\u65E0\u6846\u7EBF",
+    borderExternal: "\u5916\u4FA7\u6846\u7EBF",
+    borderTd: "\u5355\u5143\u683C\u8FB9\u6846",
+    borderTdTop: "\u4E0A\u8FB9\u6846",
+    borderTdRight: "\u53F3\u8FB9\u6846",
+    borderTdBottom: "\u4E0B\u8FB9\u6846",
+    borderTdLeft: "\u5DE6\u8FB9\u6846",
+    borderTdForward: "\u6B63\u659C\u7EBF",
+    borderTdBack: "\u53CD\u659C\u7EBF"
+  }
+};
+const datePicker$1 = {
+  now: "\u6B64\u523B",
+  confirm: "\u786E\u5B9A",
+  "return": "\u8FD4\u56DE\u65E5\u671F",
+  timeSelect: "\u65F6\u95F4\u9009\u62E9",
+  weeks: {
+    sun: "\u65E5",
+    mon: "\u4E00",
+    tue: "\u4E8C",
+    wed: "\u4E09",
+    thu: "\u56DB",
+    fri: "\u4E94",
+    sat: "\u516D"
+  },
+  year: "\u5E74",
+  month: "\u6708",
+  hour: "\u65F6",
+  minute: "\u5206",
+  second: "\u79D2"
+};
+const frame$1 = {
+  header: "\u9875\u7709",
+  footer: "\u9875\u811A"
+};
+const pageBreak$1 = {
+  displayName: "\u5206\u9875\u7B26"
+};
+const zone$1 = {
+  headerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u7709",
+  footerTip: "\u53CC\u51FB\u7F16\u8F91\u9875\u811A"
+};
+var zhCN = {
+  contextmenu: contextmenu$1,
+  datePicker: datePicker$1,
+  frame: frame$1,
+  pageBreak: pageBreak$1,
+  zone: zone$1
+};
+const contextmenu = {
+  global: {
+    cut: "Cut",
+    copy: "Copy",
+    paste: "Paste",
+    selectAll: "Select all",
+    print: "Print"
+  },
+  control: {
+    "delete": "Delete control"
+  },
+  hyperlink: {
+    "delete": "Delete hyperlink",
+    cancel: "Cancel hyperlink",
+    edit: "Edit hyperlink"
+  },
+  image: {
+    change: "Change image",
+    saveAs: "Save as image",
+    textWrap: "Text wrap",
+    textWrapType: {
+      embed: "Embed",
+      upDown: "Up down",
+      surround: "Surround",
+      floatTop: "Float above text",
+      floatBottom: "Float below text"
+    }
+  },
+  table: {
+    insertRowCol: "Insert row col",
+    insertTopRow: "Insert top 1 row",
+    insertBottomRow: "Insert bottom 1 row",
+    insertLeftCol: "Insert left 1 col",
+    insertRightCol: "Insert right 1 col",
+    deleteRowCol: "Delete row col",
+    deleteRow: "Delete 1 row",
+    deleteCol: "Delete 1 col",
+    deleteTable: "Delete table",
+    mergeCell: "Merge cell",
+    mergeCancelCell: "Cancel merge cell",
+    verticalAlign: "Vertical align",
+    verticalAlignTop: "Top",
+    verticalAlignMiddle: "Middle",
+    verticalAlignBottom: "Bottom",
+    border: "Table border",
+    borderAll: "All",
+    borderEmpty: "Empty",
+    borderExternal: "External",
+    borderTd: "Table cell border",
+    borderTdTop: "Top",
+    borderTdRight: "Right",
+    borderTdBottom: "Bottom",
+    borderTdLeft: "Left",
+    borderTdForward: "Forward",
+    borderTdBack: "Back"
+  }
+};
+const datePicker = {
+  now: "Now",
+  confirm: "Confirm",
+  "return": "Return",
+  timeSelect: "Time select",
+  weeks: {
+    sun: "Sun",
+    mon: "Mon",
+    tue: "Tue",
+    wed: "Wed",
+    thu: "Thu",
+    fri: "Fri",
+    sat: "Sat"
+  },
+  year: " ",
+  month: " ",
+  hour: "Hour",
+  minute: "Minute",
+  second: "Second"
+};
+const frame = {
+  header: "Header",
+  footer: "Footer"
+};
+const pageBreak = {
+  displayName: "Page Break"
+};
+const zone = {
+  headerTip: "Double click to edit header",
+  footerTip: "Double click to edit footer"
+};
+var en = {
+  contextmenu,
+  datePicker,
+  frame,
+  pageBreak,
+  zone
+};
+class I18n {
+  constructor() {
+    this.langMap = /* @__PURE__ */ new Map([
+      ["zhCN", zhCN],
+      ["en", en]
+    ]);
+    this.currentLocale = "zhCN";
+  }
+  registerLangMap(locale, lang) {
+    const sourceLang = this.langMap.get(locale);
+    this.langMap.set(locale, mergeObject(sourceLang || zhCN, lang));
+  }
+  getLocale() {
+    return this.currentLocale;
+  }
+  setLocale(locale) {
+    this.currentLocale = locale;
+  }
+  getLang() {
+    return this.langMap.get(this.currentLocale) || zhCN;
+  }
+  t(path) {
+    const keyList = path.split(".");
+    let value = "";
+    let item = this.getLang();
+    for (let k = 0; k < keyList.length; k++) {
+      const key = keyList[k];
+      const currentValue = Reflect.get(item, key);
+      if (currentValue) {
+        value = item = currentValue;
+      } else {
+        return "";
+      }
+    }
+    return value;
+  }
+}
+class ImageObserver {
+  constructor() {
+    this.promiseList = [];
+  }
+  add(payload) {
+    this.promiseList.push(payload);
+  }
+  clearAll() {
+    this.promiseList = [];
+  }
+  allSettled() {
+    return Promise.allSettled(this.promiseList);
+  }
+}
+class ZoneTip {
+  constructor(draw, zone2) {
+    this.draw = draw;
+    this.zone = zone2;
+    this.i18n = draw.getI18n();
+    this.container = draw.getContainer();
+    this.pageContainer = draw.getPageContainer();
+    const { tipContainer, tipContent } = this._drawZoneTip();
+    this.tipContainer = tipContainer;
+    this.tipContent = tipContent;
+    this.isDisableMouseMove = true;
+    this.currentMoveZone = EditorZone.MAIN;
+    const watchZones = [];
+    const { header, footer } = draw.getOptions();
+    if (!header.disabled) {
+      watchZones.push(EditorZone.HEADER);
+    }
+    if (!footer.disabled) {
+      watchZones.push(EditorZone.FOOTER);
+    }
+    if (watchZones.length) {
+      this._watchMouseMoveZoneChange(watchZones);
+    }
+  }
+  _watchMouseMoveZoneChange(watchZones) {
+    this.pageContainer.addEventListener("mousemove", throttle((evt) => {
+      if (this.isDisableMouseMove || !this.draw.getIsPagingMode())
+        return;
+      if (!evt.offsetY)
+        return;
+      if (evt.target instanceof HTMLCanvasElement) {
+        const mousemoveZone = this.zone.getZoneByY(evt.offsetY);
+        if (!watchZones.includes(mousemoveZone)) {
+          this._updateZoneTip(false);
+          return;
+        }
+        this.currentMoveZone = mousemoveZone;
+        this._updateZoneTip(this.zone.getZone() === EditorZone.MAIN && (mousemoveZone === EditorZone.HEADER || mousemoveZone === EditorZone.FOOTER), evt.x, evt.y);
+      } else {
+        this._updateZoneTip(false);
+      }
+    }, 250));
+    this.pageContainer.addEventListener("mouseenter", () => {
+      this.isDisableMouseMove = false;
+    });
+    this.pageContainer.addEventListener("mouseleave", () => {
+      this.isDisableMouseMove = true;
+      this._updateZoneTip(false);
+    });
+  }
+  _drawZoneTip() {
+    const tipContainer = document.createElement("div");
+    tipContainer.classList.add(`${EDITOR_PREFIX}-zone-tip`);
+    const tipContent = document.createElement("span");
+    tipContainer.append(tipContent);
+    this.container.append(tipContainer);
+    return {
+      tipContainer,
+      tipContent
+    };
+  }
+  _updateZoneTip(visible, left2, top) {
+    if (visible) {
+      this.tipContainer.classList.add("show");
+      this.tipContainer.style.left = `${left2}px`;
+      this.tipContainer.style.top = `${top}px`;
+      this.tipContent.innerText = this.i18n.t(`zone.${this.currentMoveZone === EditorZone.HEADER ? "headerTip" : "footerTip"}`);
+    } else {
+      this.tipContainer.classList.remove("show");
+    }
+  }
+}
+class Zone {
+  constructor(draw) {
+    this.INDICATOR_PADDING = 2;
+    this.INDICATOR_TITLE_TRANSLATE = [20, 5];
+    this.draw = draw;
+    this.i18n = draw.getI18n();
+    this.options = draw.getOptions();
+    this.container = draw.getContainer();
+    this.currentZone = EditorZone.MAIN;
+    this.indicatorContainer = null;
+    if (!this.options.zone.tipDisabled) {
+      new ZoneTip(draw, this);
+    }
+  }
+  isHeaderActive() {
+    return this.getZone() === EditorZone.HEADER;
+  }
+  isMainActive() {
+    return this.getZone() === EditorZone.MAIN;
+  }
+  isFooterActive() {
+    return this.getZone() === EditorZone.FOOTER;
+  }
+  getZone() {
+    return this.currentZone;
+  }
+  setZone(payload) {
+    const { header, footer } = this.options;
+    if (!header.editable && payload === EditorZone.HEADER || !footer.editable && payload === EditorZone.FOOTER) {
+      return;
+    }
+    if (this.currentZone === payload)
+      return;
+    this.currentZone = payload;
+    this.draw.getRange().clearRange();
+    this.draw.render({
+      isSubmitHistory: false,
+      isSetCursor: false,
+      isCompute: false
+    });
+    this.drawZoneIndicator();
+    nextTick(() => {
+      const listener = this.draw.getListener();
+      if (listener.zoneChange) {
+        listener.zoneChange(payload);
+      }
+      const eventBus = this.draw.getEventBus();
+      if (eventBus.isSubscribe("zoneChange")) {
+        eventBus.emit("zoneChange", payload);
+      }
+    });
+  }
+  getZoneByY(y) {
+    const header = this.draw.getHeader();
+    const headerBottomY = header.getHeaderTop() + header.getHeight();
+    const footer = this.draw.getFooter();
+    const pageHeight = this.draw.getHeight();
+    const footerTopY = pageHeight - (footer.getFooterBottom() + footer.getHeight());
+    if (y < headerBottomY) {
+      return EditorZone.HEADER;
+    }
+    if (y > footerTopY) {
+      return EditorZone.FOOTER;
+    }
+    return EditorZone.MAIN;
+  }
+  drawZoneIndicator() {
+    this._clearZoneIndicator();
+    if (!this.isHeaderActive() && !this.isFooterActive())
+      return;
+    const { scale } = this.options;
+    const isHeaderActive = this.isHeaderActive();
+    const [offsetX, offsetY] = this.INDICATOR_TITLE_TRANSLATE;
+    const pageList = this.draw.getPageList();
+    const margins = this.draw.getMargins();
+    const innerWidth = this.draw.getInnerWidth();
+    const pageHeight = this.draw.getHeight();
+    const pageGap = this.draw.getPageGap();
+    const preY = pageHeight + pageGap;
+    this.indicatorContainer = document.createElement("div");
+    this.indicatorContainer.classList.add(`${EDITOR_PREFIX}-zone-indicator`);
+    const header = this.draw.getHeader();
+    const footer = this.draw.getFooter();
+    const indicatorHeight = isHeaderActive ? header.getHeight() : footer.getHeight();
+    const indicatorTop = isHeaderActive ? header.getHeaderTop() : pageHeight - footer.getFooterBottom() - indicatorHeight;
+    for (let p = 0; p < pageList.length; p++) {
+      const startY = preY * p + indicatorTop;
+      const indicatorLeftX = margins[3] - this.INDICATOR_PADDING;
+      const indicatorRightX = margins[3] + innerWidth + this.INDICATOR_PADDING;
+      const indicatorTopY = isHeaderActive ? startY - this.INDICATOR_PADDING : startY + indicatorHeight + this.INDICATOR_PADDING;
+      const indicatorBottomY = isHeaderActive ? startY + indicatorHeight + this.INDICATOR_PADDING : startY - this.INDICATOR_PADDING;
+      const indicatorTitle = document.createElement("div");
+      indicatorTitle.innerText = this.i18n.t(`frame.${isHeaderActive ? "header" : "footer"}`);
+      indicatorTitle.style.top = `${indicatorBottomY}px`;
+      indicatorTitle.style.transform = `translate(${offsetX * scale}px, ${offsetY * scale}px) scale(${scale})`;
+      this.indicatorContainer.append(indicatorTitle);
+      const lineTop = document.createElement("span");
+      lineTop.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__top`);
+      lineTop.style.top = `${indicatorTopY}px`;
+      lineTop.style.width = `${innerWidth}px`;
+      lineTop.style.marginLeft = `${margins[3]}px`;
+      this.indicatorContainer.append(lineTop);
+      const lineLeft = document.createElement("span");
+      lineLeft.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__left`);
+      lineLeft.style.top = `${startY}px`;
+      lineLeft.style.height = `${indicatorHeight}px`;
+      lineLeft.style.left = `${indicatorLeftX}px`;
+      this.indicatorContainer.append(lineLeft);
+      const lineBottom = document.createElement("span");
+      lineBottom.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__bottom`);
+      lineBottom.style.top = `${indicatorBottomY}px`;
+      this.indicatorContainer.append(lineBottom);
+      const lineRight = document.createElement("span");
+      lineRight.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__right`);
+      lineRight.style.top = `${startY}px`;
+      lineRight.style.height = `${indicatorHeight}px`;
+      lineRight.style.left = `${indicatorRightX}px`;
+      this.indicatorContainer.append(lineRight);
+    }
+    this.container.append(this.indicatorContainer);
+  }
+  _clearZoneIndicator() {
+    var _a;
+    (_a = this.indicatorContainer) == null ? void 0 : _a.remove();
+    this.indicatorContainer = null;
+  }
+}
+class Footer {
+  constructor(draw, data2) {
+    this.draw = draw;
+    this.position = draw.getPosition();
+    this.options = draw.getOptions();
+    this.elementList = data2 || [];
+    this.rowList = [];
+    this.positionList = [];
+  }
+  getRowList() {
+    return this.rowList;
+  }
+  setElementList(elementList) {
+    this.elementList = elementList;
+  }
+  getElementList() {
+    return this.elementList;
+  }
+  getPositionList() {
+    return this.positionList;
+  }
+  compute() {
+    this.recovery();
+    this._computeRowList();
+    this._computePositionList();
+  }
+  recovery() {
+    this.rowList = [];
+    this.positionList = [];
+  }
+  _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth();
+    this.rowList = this.draw.computeRowList({
+      innerWidth,
+      elementList: this.elementList
+    });
+  }
+  _computePositionList() {
+    const footerBottom = this.getFooterBottom();
+    const innerWidth = this.draw.getInnerWidth();
+    const margins = this.draw.getMargins();
+    const startX = margins[3];
+    const pageHeight = this.draw.getHeight();
+    const footerHeight = this.getHeight();
+    const startY = pageHeight - footerBottom - footerHeight;
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth,
+      zone: EditorZone.FOOTER
+    });
+  }
+  getFooterBottom() {
+    const { footer: { bottom, disabled }, scale } = this.options;
+    if (disabled)
+      return 0;
+    return Math.floor(bottom * scale);
+  }
+  getMaxHeight() {
+    const { footer: { maxHeightRadio } } = this.options;
+    const height = this.draw.getHeight();
+    return Math.floor(height * maxHeightRadioMapping[maxHeightRadio]);
+  }
+  getHeight() {
+    const maxHeight = this.getMaxHeight();
+    const rowHeight = this.getRowHeight();
+    return rowHeight > maxHeight ? maxHeight : rowHeight;
+  }
+  getRowHeight() {
+    return this.rowList.reduce((pre, cur) => pre + cur.height, 0);
+  }
+  getExtraHeight() {
+    const margins = this.draw.getMargins();
+    const footerHeight = this.getHeight();
+    const footerBottom = this.getFooterBottom();
+    const extraHeight = footerBottom + footerHeight - margins[2];
+    return extraHeight <= 0 ? 0 : extraHeight;
+  }
+  render(ctx, pageNo) {
+    ctx.globalAlpha = 1;
+    const innerWidth = this.draw.getInnerWidth();
+    const maxHeight = this.getMaxHeight();
+    const rowList = [];
+    let curRowHeight = 0;
+    for (let r = 0; r < this.rowList.length; r++) {
+      const row = this.rowList[r];
+      if (curRowHeight + row.height > maxHeight) {
+        break;
+      }
+      rowList.push(row);
+      curRowHeight += row.height;
+    }
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList,
+      pageNo,
+      startIndex: 0,
+      innerWidth,
+      zone: EditorZone.FOOTER
+    });
+  }
+}
+class ListParticle {
+  constructor(draw) {
+    this.UN_COUNT_STYLE_WIDTH = 20;
+    this.MEASURE_BASE_TEXT = "0";
+    this.LIST_GAP = 10;
+    this.draw = draw;
+    this.range = draw.getRange();
+    this.options = draw.getOptions();
+  }
+  setList(listType, listStyle) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const changeElementList = this.range.getRangeParagraphElementList();
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const isUnsetList = changeElementList.find((el) => el.listType === listType && el.listStyle === listStyle);
+    if (isUnsetList || !listType) {
+      this.unsetList();
+      return;
+    }
+    const listId = getUUID();
+    changeElementList.forEach((el) => {
+      el.listId = listId;
+      el.listType = listType;
+      el.listStyle = listStyle;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  unsetList() {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const changeElementList = (_a = this.range.getRangeParagraphElementList()) == null ? void 0 : _a.filter((el) => el.listId);
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const elementList = this.draw.getElementList();
+    const endElement = elementList[endIndex];
+    if (endElement.listId) {
+      let start = endIndex + 1;
+      while (start < elementList.length) {
+        const element = elementList[start];
+        if (element.value === ZERO && !element.listWrap)
+          break;
+        if (element.listId !== endElement.listId) {
+          this.draw.spliceElementList(elementList, start, 0, {
+            value: ZERO
+          });
+          break;
+        }
+        start++;
+      }
+    }
+    changeElementList.forEach((el) => {
+      delete el.listId;
+      delete el.listType;
+      delete el.listStyle;
+      delete el.listWrap;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  computeListStyle(ctx, elementList) {
+    const listStyleMap = /* @__PURE__ */ new Map();
+    let start = 0;
+    let curListId = elementList[start].listId;
+    let curElementList = [];
+    const elementLength = elementList.length;
+    while (start < elementLength) {
+      const curElement = elementList[start];
+      if (curListId && curListId === curElement.listId) {
+        curElementList.push(curElement);
+      } else {
+        if (curElement.listId && curElement.listId !== curListId) {
+          if (curElementList.length) {
+            const width = this.getListStyleWidth(ctx, curElementList);
+            listStyleMap.set(curListId, width);
+          }
+          curListId = curElement.listId;
+          curElementList = curListId ? [curElement] : [];
+        }
+      }
+      start++;
+    }
+    if (curElementList.length) {
+      const width = this.getListStyleWidth(ctx, curElementList);
+      listStyleMap.set(curListId, width);
+    }
+    return listStyleMap;
+  }
+  getListStyleWidth(ctx, listElementList) {
+    const { scale, checkbox } = this.options;
+    const startElement = listElementList[0];
+    if (startElement.listStyle && startElement.listStyle !== ListStyle.DECIMAL) {
+      if (startElement.listStyle === ListStyle.CHECKBOX) {
+        return (checkbox.width + this.LIST_GAP) * scale;
+      }
+      return this.UN_COUNT_STYLE_WIDTH * scale;
+    }
+    const count = listElementList.reduce((pre, cur) => {
+      if (cur.value === ZERO) {
+        pre += 1;
+      }
+      return pre;
+    }, 0);
+    if (!count)
+      return 0;
+    const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${KeyMap.PERIOD}`;
+    const textMetrics = ctx.measureText(text);
+    return Math.ceil((textMetrics.width + this.LIST_GAP) * scale);
+  }
+  drawListStyle(ctx, row, position) {
+    var _a;
+    const { elementList, offsetX, listIndex, ascent } = row;
+    const startElement = elementList[0];
+    if (startElement.value !== ZERO || startElement.listWrap)
+      return;
+    let tabWidth = 0;
+    const { defaultTabWidth, scale, defaultFont, defaultSize } = this.options;
+    for (let i = 1; i < elementList.length; i++) {
+      const element = elementList[i];
+      if ((element == null ? void 0 : element.type) !== ElementType.TAB)
+        break;
+      tabWidth += defaultTabWidth * scale;
+    }
+    const { coordinate: { leftTop: [startX, startY] } } = position;
+    const x = startX - offsetX + tabWidth;
+    const y = startY + ascent;
+    if (startElement.listStyle === ListStyle.CHECKBOX) {
+      const { width, height, gap } = this.options.checkbox;
+      const checkboxRowElement = {
+        ...startElement,
+        checkbox: {
+          value: !!((_a = startElement.checkbox) == null ? void 0 : _a.value)
+        },
+        metrics: {
+          ...startElement.metrics,
+          width: (width + gap * 2) * scale,
+          height: height * scale
+        }
+      };
+      this.draw.getCheckboxParticle().render({
+        ctx,
+        x: x - gap * scale,
+        y,
+        index: 0,
+        row: {
+          ...row,
+          elementList: [checkboxRowElement, ...row.elementList]
+        }
+      });
+    } else {
+      let text = "";
+      if (startElement.listType === ListType.UL) {
+        text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
+      } else {
+        text = `${listIndex + 1}${KeyMap.PERIOD}`;
+      }
+      if (!text)
+        return;
+      ctx.save();
+      ctx.font = `${defaultSize * scale}px ${defaultFont}`;
+      ctx.fillText(text, x, y);
+      ctx.restore();
+    }
+  }
+}
+const _LineBreakParticle = class {
+  constructor(draw) {
+    this.options = draw.getOptions();
+  }
+  render(ctx, element, x, y) {
+    const { scale, lineBreak: { color, lineWidth } } = this.options;
+    ctx.save();
+    ctx.beginPath();
+    const top = y - _LineBreakParticle.HEIGHT * scale / 2;
+    const left2 = x + element.metrics.width;
+    ctx.translate(left2, top);
+    ctx.scale(scale, scale);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(8, 0);
+    ctx.lineTo(12, 0);
+    ctx.lineTo(12, 6);
+    ctx.lineTo(3, 6);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 3);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 9);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+  }
+};
+let LineBreakParticle = _LineBreakParticle;
+LineBreakParticle.WIDTH = 12;
+LineBreakParticle.HEIGHT = 9;
+LineBreakParticle.GAP = 3;
+class Placeholder {
+  constructor(draw) {
+    this.draw = draw;
+    this.position = draw.getPosition();
+    this.options = draw.getOptions();
+    this.elementList = [];
+    this.rowList = [];
+    this.positionList = [];
+  }
+  _recovery() {
+    this.elementList = [];
+    this.rowList = [];
+    this.positionList = [];
+  }
+  _compute() {
+    this._computeRowList();
+    this._computePositionList();
+  }
+  _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth();
+    this.rowList = this.draw.computeRowList({
+      innerWidth,
+      elementList: this.elementList
+    });
+  }
+  _computePositionList() {
+    const { lineBreak, scale } = this.options;
+    const headerExtraHeight = this.draw.getHeader().getExtraHeight();
+    const innerWidth = this.draw.getInnerWidth();
+    const margins = this.draw.getMargins();
+    let startX = margins[3];
+    if (!lineBreak.disabled) {
+      startX += (LineBreakParticle.WIDTH + LineBreakParticle.GAP) * scale;
+    }
+    const startY = margins[0] + headerExtraHeight;
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth
+    });
+  }
+  render(ctx) {
+    const { placeholder: { data: data2, font, size, color, opacity } } = this.options;
+    if (!data2)
+      return;
+    this._recovery();
+    this.elementList = [
+      {
+        value: data2,
+        font,
+        size,
+        color
+      }
+    ];
+    formatElementList(this.elementList, {
+      editorOptions: this.options,
+      isForceCompensation: true
+    });
+    this._compute();
+    const innerWidth = this.draw.getInnerWidth();
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startIndex: 0,
+      innerWidth,
+      isDrawLineBreak: false
+    });
+    ctx.restore();
+  }
+}
+class Group {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+    this.range = draw.getRange();
+    this.fillRectMap = /* @__PURE__ */ new Map();
+  }
+  setGroup() {
+    if (this.draw.isReadonly() || this.draw.getZone().getZone() !== EditorZone.MAIN) {
+      return null;
+    }
+    const selection = this.range.getSelection();
+    if (!selection)
+      return null;
+    const groupId = getUUID();
+    selection.forEach((el) => {
+      if (!Array.isArray(el.groupIds)) {
+        el.groupIds = [];
+      }
+      el.groupIds.push(groupId);
+    });
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    });
+    return groupId;
+  }
+  getElementListByGroupId(elementList, groupId) {
+    var _a, _b;
+    const groupElementList = [];
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.type === ElementType.TABLE) {
+        const trList = element.trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const tdGroupElementList = this.getElementListByGroupId(td.value, groupId);
+            if (tdGroupElementList.length) {
+              groupElementList.push(...tdGroupElementList);
+              return groupElementList;
+            }
+          }
+        }
+      }
+      if ((_a = element == null ? void 0 : element.groupIds) == null ? void 0 : _a.includes(groupId)) {
+        groupElementList.push(element);
+        const nextElement = elementList[e + 1];
+        if (!((_b = nextElement == null ? void 0 : nextElement.groupIds) == null ? void 0 : _b.includes(groupId)))
+          break;
+      }
+    }
+    return groupElementList;
+  }
+  deleteGroup(groupId) {
+    if (this.draw.isReadonly())
+      return;
+    const elementList = this.draw.getOriginalMainElementList();
+    const groupElementList = this.getElementListByGroupId(elementList, groupId);
+    if (!groupElementList.length)
+      return;
+    for (let e = 0; e < groupElementList.length; e++) {
+      const element = groupElementList[e];
+      const groupIds = element.groupIds;
+      const groupIndex = groupIds.findIndex((id) => id === groupId);
+      groupIds.splice(groupIndex, 1);
+      if (!groupIds.length) {
+        delete element.groupIds;
+      }
+    }
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false
+    });
+  }
+  getContextByGroupId(elementList, groupId) {
+    var _a, _b;
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.type === ElementType.TABLE) {
+        const trList = element.trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const range = this.getContextByGroupId(td.value, groupId);
+            if (range) {
+              return {
+                ...range,
+                isTable: true,
+                index: e,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: element.tableId
+              };
+            }
+          }
+        }
+      }
+      const nextElement = elementList[e + 1];
+      if (((_a = element.groupIds) == null ? void 0 : _a.includes(groupId)) && !((_b = nextElement == null ? void 0 : nextElement.groupIds) == null ? void 0 : _b.includes(groupId))) {
+        return {
+          isTable: false,
+          startIndex: e,
+          endIndex: e
+        };
+      }
+    }
+    return null;
+  }
+  clearFillInfo() {
+    this.fillRectMap.clear();
+  }
+  recordFillInfo(element, x, y, width, height) {
+    const groupIds = element.groupIds;
+    if (!groupIds)
+      return;
+    for (const groupId of groupIds) {
+      const fillRect = this.fillRectMap.get(groupId);
+      if (!fillRect) {
+        this.fillRectMap.set(groupId, {
+          x,
+          y,
+          width,
+          height
+        });
+      } else {
+        fillRect.width += width;
+      }
+    }
+  }
+  render(ctx) {
+    var _a;
+    if (!this.fillRectMap.size)
+      return;
+    const range = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const anchorGroupIds = (_a = elementList[range.endIndex]) == null ? void 0 : _a.groupIds;
+    const { group: { backgroundColor, opacity, activeOpacity, activeBackgroundColor } } = this.options;
+    ctx.save();
+    this.fillRectMap.forEach((fillRect, groupId) => {
+      const { x, y, width, height } = fillRect;
+      if (anchorGroupIds == null ? void 0 : anchorGroupIds.includes(groupId)) {
+        ctx.globalAlpha = activeOpacity;
+        ctx.fillStyle = activeBackgroundColor;
+      } else {
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = backgroundColor;
+      }
+      ctx.fillRect(x, y, width, height);
+    });
+    ctx.restore();
+    this.clearFillInfo();
+  }
+}
+class MouseObserver {
+  constructor(draw) {
+    this.draw = draw;
+    this.eventBus = this.draw.getEventBus();
+    this.pageContainer = this.draw.getPageContainer();
+    this.pageContainer.addEventListener("mousemove", this._mousemove.bind(this));
+    this.pageContainer.addEventListener("mouseenter", this._mouseenter.bind(this));
+    this.pageContainer.addEventListener("mouseleave", this._mouseleave.bind(this));
+  }
+  _mousemove(evt) {
+    if (!this.eventBus.isSubscribe("mousemove"))
+      return;
+    this.eventBus.emit("mousemove", evt);
+  }
+  _mouseenter(evt) {
+    if (!this.eventBus.isSubscribe("mouseenter"))
+      return;
+    this.eventBus.emit("mouseenter", evt);
+  }
+  _mouseleave(evt) {
+    if (!this.eventBus.isSubscribe("mouseleave"))
+      return;
+    this.eventBus.emit("mouseleave", evt);
+  }
+}
+class LineNumber {
+  constructor(draw) {
+    this.draw = draw;
+    this.options = draw.getOptions();
+  }
+  render(ctx, pageNo) {
+    const { scale, lineNumber: { color, size, font, right: right2, type } } = this.options;
+    const textParticle = this.draw.getTextParticle();
+    const margins = this.draw.getMargins();
+    const positionList = this.draw.getPosition().getOriginalMainPositionList();
+    const pageRowList = this.draw.getPageRowList();
+    const rowList = pageRowList[pageNo];
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.font = `${size * scale}px ${font}`;
+    for (let i = 0; i < rowList.length; i++) {
+      const row = rowList[i];
+      const { coordinate: { leftBottom } } = positionList[row.startIndex];
+      const seq = type === LineNumberType.PAGE ? i + 1 : row.rowIndex + 1;
+      const textMetrics = textParticle.measureText(ctx, {
+        value: `${seq}`
+      });
+      const x = margins[3] - (textMetrics.width + right2) * scale;
+      const y = leftBottom[1] - textMetrics.actualBoundingBoxAscent * scale;
+      ctx.fillText(`${seq}`, x, y);
+    }
+    ctx.restore();
+  }
+}
+class PageBorder {
+  constructor(draw) {
+    this.draw = draw;
+    this.header = draw.getHeader();
+    this.footer = draw.getFooter();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    const { scale, pageBorder: { color, lineWidth, padding } } = this.options;
+    ctx.save();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth * scale;
+    const margins = this.draw.getMargins();
+    const x = margins[3] - padding[3] * scale;
+    const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale;
+    const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale;
+    const height = this.draw.getHeight() - y - this.footer.getExtraHeight() - margins[2] + padding[2] * scale;
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+function positionContextChange(draw, payload) {
+  const { value, oldValue } = payload;
+  if (oldValue.isTable && !value.isTable) {
+    draw.getTableTool().dispose();
+  }
+}
+class Actuator {
+  constructor(draw) {
+    this.draw = draw;
+    this.eventBus = draw.getEventBus();
+    this.execute();
+  }
+  execute() {
+    this.eventBus.on("positionContextChange", (payload) => {
+      positionContextChange(this.draw, payload);
+    });
+  }
+}
+class TableOperate {
+  constructor(draw) {
+    this.draw = draw;
+    this.range = draw.getRange();
+    this.position = draw.getPosition();
+    this.tableTool = draw.getTableTool();
+    this.tableParticle = draw.getTableParticle();
+    this.options = draw.getOptions();
+  }
+  insertTable(row, col) {
+    var _a;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const { defaultTrMinHeight } = this.options.table;
+    const elementList = this.draw.getElementList();
+    let offsetX = 0;
+    if ((_a = elementList[startIndex]) == null ? void 0 : _a.listId) {
+      const positionList = this.position.getPositionList();
+      const { rowIndex } = positionList[startIndex];
+      const rowList = this.draw.getRowList();
+      const row2 = rowList[rowIndex];
+      offsetX = (row2 == null ? void 0 : row2.offsetX) || 0;
+    }
+    const innerWidth = this.draw.getContextInnerWidth() - offsetX;
+    const colgroup = [];
+    const colWidth = innerWidth / col;
+    for (let c = 0; c < col; c++) {
+      colgroup.push({
+        width: colWidth
+      });
+    }
+    const trList = [];
+    for (let r = 0; r < row; r++) {
+      const tdList = [];
+      const tr = {
+        height: defaultTrMinHeight,
+        tdList
+      };
+      for (let c = 0; c < col; c++) {
+        tdList.push({
+          colspan: 1,
+          rowspan: 1,
+          value: []
+        });
+      }
+      trList.push(tr);
+    }
+    const element = {
+      type: ElementType.TABLE,
+      value: "",
+      colgroup,
+      trList
+    };
+    formatElementList([element], {
+      editorOptions: this.options
+    });
+    formatElementContext(elementList, [element], startIndex, {
+      editorOptions: this.options
+    });
+    const curIndex = startIndex + 1;
+    this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({ curIndex, isSetCursor: false });
+  }
+  insertTableTopRow() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, trIndex, tableId } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTr = curTrList[trIndex];
+    if (curTr.tdList.length < element.colgroup.length) {
+      const curTrNo = curTr.tdList[0].rowIndex;
+      for (let t = 0; t < trIndex; t++) {
+        const tr = curTrList[t];
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d];
+          if (td.rowspan > 1 && td.rowIndex + td.rowspan >= curTrNo + 1) {
+            td.rowspan += 1;
+          }
+        }
+      }
+    }
+    const newTrId = getUUID();
+    const newTr = {
+      height: curTr.height,
+      id: newTrId,
+      tdList: []
+    };
+    for (let t = 0; t < curTr.tdList.length; t++) {
+      const curTd = curTr.tdList[t];
+      const newTdId = getUUID();
+      newTr.tdList.push({
+        id: newTdId,
+        rowspan: 1,
+        colspan: curTd.colspan,
+        value: [
+          {
+            value: ZERO,
+            size: 16,
+            tableId,
+            trId: newTrId,
+            tdId: newTdId
+          }
+        ]
+      });
+    }
+    curTrList.splice(trIndex, 0, newTr);
+    this.position.setPositionContext({
+      isTable: true,
+      index: index2,
+      trIndex,
+      tdIndex: 0,
+      tdId: newTr.tdList[0].id,
+      trId: newTr.id,
+      tableId
+    });
+    this.range.setRange(0, 0);
+    this.draw.render({ curIndex: 0 });
+    this.tableTool.render();
+  }
+  insertTableBottomRow() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, trIndex, tableId } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTr = curTrList[trIndex];
+    const anchorTr = curTrList.length - 1 === trIndex ? curTr : curTrList[trIndex + 1];
+    if (anchorTr.tdList.length < element.colgroup.length) {
+      const curTrNo = anchorTr.tdList[0].rowIndex;
+      for (let t = 0; t < trIndex + 1; t++) {
+        const tr = curTrList[t];
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d];
+          if (td.rowspan > 1 && td.rowIndex + td.rowspan >= curTrNo + 1) {
+            td.rowspan += 1;
+          }
+        }
+      }
+    }
+    const newTrId = getUUID();
+    const newTr = {
+      height: anchorTr.height,
+      id: newTrId,
+      tdList: []
+    };
+    for (let t = 0; t < anchorTr.tdList.length; t++) {
+      const curTd = anchorTr.tdList[t];
+      const newTdId = getUUID();
+      newTr.tdList.push({
+        id: newTdId,
+        rowspan: 1,
+        colspan: curTd.colspan,
+        value: [
+          {
+            value: ZERO,
+            size: 16,
+            tableId,
+            trId: newTrId,
+            tdId: newTdId
+          }
+        ]
+      });
+    }
+    curTrList.splice(trIndex + 1, 0, newTr);
+    this.position.setPositionContext({
+      isTable: true,
+      index: index2,
+      trIndex: trIndex + 1,
+      tdIndex: 0,
+      tdId: newTr.tdList[0].id,
+      trId: newTr.id,
+      tableId: element.id
+    });
+    this.range.setRange(0, 0);
+    this.draw.render({ curIndex: 0 });
+  }
+  insertTableLeftCol() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, tdIndex, tableId } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTdIndex = tdIndex;
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdId = getUUID();
+      tr.tdList.splice(curTdIndex, 0, {
+        id: tdId,
+        rowspan: 1,
+        colspan: 1,
+        value: [
+          {
+            value: ZERO,
+            size: 16,
+            tableId,
+            trId: tr.id,
+            tdId
+          }
+        ]
+      });
+    }
+    const colgroup = element.colgroup;
+    colgroup.splice(curTdIndex, 0, {
+      width: this.options.table.defaultColMinWidth
+    });
+    const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
+    const width = this.draw.getOriginalInnerWidth();
+    if (colgroupWidth > width) {
+      const adjustWidth = (colgroupWidth - width) / colgroup.length;
+      for (let g = 0; g < colgroup.length; g++) {
+        const group2 = colgroup[g];
+        group2.width -= adjustWidth;
+      }
+    }
+    this.position.setPositionContext({
+      isTable: true,
+      index: index2,
+      trIndex: 0,
+      tdIndex: curTdIndex,
+      tdId: curTrList[0].tdList[curTdIndex].id,
+      trId: curTrList[0].id,
+      tableId
+    });
+    this.range.setRange(0, 0);
+    this.draw.render({ curIndex: 0 });
+    this.tableTool.render();
+  }
+  insertTableRightCol() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, tdIndex, tableId } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTdIndex = tdIndex + 1;
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdId = getUUID();
+      tr.tdList.splice(curTdIndex, 0, {
+        id: tdId,
+        rowspan: 1,
+        colspan: 1,
+        value: [
+          {
+            value: ZERO,
+            size: 16,
+            tableId,
+            trId: tr.id,
+            tdId
+          }
+        ]
+      });
+    }
+    const colgroup = element.colgroup;
+    colgroup.splice(curTdIndex, 0, {
+      width: this.options.table.defaultColMinWidth
+    });
+    const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
+    const width = this.draw.getOriginalInnerWidth();
+    if (colgroupWidth > width) {
+      const adjustWidth = (colgroupWidth - width) / colgroup.length;
+      for (let g = 0; g < colgroup.length; g++) {
+        const group2 = colgroup[g];
+        group2.width -= adjustWidth;
+      }
+    }
+    this.position.setPositionContext({
+      isTable: true,
+      index: index2,
+      trIndex: 0,
+      tdIndex: curTdIndex,
+      tdId: curTrList[0].tdList[curTdIndex].id,
+      trId: curTrList[0].id,
+      tableId: element.id
+    });
+    this.range.setRange(0, 0);
+    this.draw.render({ curIndex: 0 });
+  }
+  deleteTableRow() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, trIndex, tdIndex } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const trList = element.trList;
+    const curTr = trList[trIndex];
+    const curTdRowIndex = curTr.tdList[tdIndex].rowIndex;
+    if (trList.length <= 1) {
+      this.deleteTable();
+      return;
+    }
+    for (let r = 0; r < curTdRowIndex; r++) {
+      const tr = trList[r];
+      const tdList = tr.tdList;
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d];
+        if (td.rowIndex + td.rowspan > curTdRowIndex) {
+          td.rowspan--;
+        }
+      }
+    }
+    for (let d = 0; d < curTr.tdList.length; d++) {
+      const td = curTr.tdList[d];
+      if (td.rowspan > 1) {
+        const tdId = getUUID();
+        const nextTr = trList[trIndex + 1];
+        nextTr.tdList.splice(d, 0, {
+          id: tdId,
+          rowspan: td.rowspan - 1,
+          colspan: td.colspan,
+          value: [
+            {
+              value: ZERO,
+              size: 16,
+              tableId: element.id,
+              trId: nextTr.id,
+              tdId
+            }
+          ]
+        });
+      }
+    }
+    trList.splice(trIndex, 1);
+    this.position.setPositionContext({
+      isTable: false
+    });
+    this.range.clearRange();
+    this.draw.render({
+      curIndex: positionContext.index
+    });
+    this.tableTool.dispose();
+  }
+  deleteTableCol() {
+    var _a;
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, tdIndex, trIndex } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTd = curTrList[trIndex].tdList[tdIndex];
+    const curColIndex = curTd.colIndex;
+    const moreTdTr = curTrList.find((tr) => tr.tdList.length > 1);
+    if (!moreTdTr) {
+      this.deleteTable();
+      return;
+    }
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        if (td.colIndex <= curColIndex && td.colIndex + td.colspan > curColIndex) {
+          if (td.colspan > 1) {
+            td.colspan--;
+          } else {
+            tr.tdList.splice(d, 1);
+          }
+        }
+      }
+    }
+    (_a = element.colgroup) == null ? void 0 : _a.splice(curColIndex, 1);
+    this.position.setPositionContext({
+      isTable: false
+    });
+    this.range.setRange(0, 0);
+    this.draw.render({
+      curIndex: positionContext.index
+    });
+    this.tableTool.dispose();
+  }
+  deleteTable() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const originalElementList = this.draw.getOriginalElementList();
+    originalElementList.splice(positionContext.index, 1);
+    const curIndex = positionContext.index - 1;
+    this.position.setPositionContext({
+      isTable: false,
+      index: curIndex
+    });
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({ curIndex });
+    this.tableTool.dispose();
+  }
+  mergeTableCell() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange();
+    if (!isCrossRowCol)
+      return;
+    const { index: index2 } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    let startTd = curTrList[startTrIndex].tdList[startTdIndex];
+    let endTd = curTrList[endTrIndex].tdList[endTdIndex];
+    if (startTd.x > endTd.x || startTd.y > endTd.y) {
+      [startTd, endTd] = [endTd, startTd];
+    }
+    const startColIndex = startTd.colIndex;
+    const endColIndex = endTd.colIndex + (endTd.colspan - 1);
+    const startRowIndex = startTd.rowIndex;
+    const endRowIndex = endTd.rowIndex + (endTd.rowspan - 1);
+    const rowCol = [];
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdList = [];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        const tdColIndex = td.colIndex;
+        const tdRowIndex = td.rowIndex;
+        if (tdColIndex >= startColIndex && tdColIndex <= endColIndex && tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex) {
+          tdList.push(td);
+        }
+      }
+      if (tdList.length) {
+        rowCol.push(tdList);
+      }
+    }
+    if (!rowCol.length)
+      return;
+    const lastRow = rowCol[rowCol.length - 1];
+    const leftTop = rowCol[0][0];
+    const rightBottom = lastRow[lastRow.length - 1];
+    const startX = leftTop.x;
+    const startY = leftTop.y;
+    const endX = rightBottom.x + rightBottom.width;
+    const endY = rightBottom.y + rightBottom.height;
+    for (let t = 0; t < rowCol.length; t++) {
+      const tr = rowCol[t];
+      for (let d = 0; d < tr.length; d++) {
+        const td = tr[d];
+        const tdStartX = td.x;
+        const tdStartY = td.y;
+        const tdEndX = tdStartX + td.width;
+        const tdEndY = tdStartY + td.height;
+        if (startX > tdStartX || startY > tdStartY || endX < tdEndX || endY < tdEndY) {
+          return;
+        }
+      }
+    }
+    const mergeTdIdList = [];
+    const anchorTd = rowCol[0][0];
+    for (let t = 0; t < rowCol.length; t++) {
+      const tr = rowCol[t];
+      for (let d = 0; d < tr.length; d++) {
+        const td = tr[d];
+        const isAnchorTd = t === 0 && d === 0;
+        if (!isAnchorTd) {
+          mergeTdIdList.push(td.id);
+        }
+        if (t === 0 && d !== 0) {
+          anchorTd.colspan += td.colspan;
+        }
+        if (t !== 0) {
+          if (anchorTd.colIndex === td.colIndex) {
+            anchorTd.rowspan += td.rowspan;
+          }
+        }
+      }
+    }
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      let d = 0;
+      while (d < tr.tdList.length) {
+        const td = tr.tdList[d];
+        if (mergeTdIdList.includes(td.id)) {
+          tr.tdList.splice(d, 1);
+          d--;
+        }
+        d++;
+      }
+    }
+    this.position.setPositionContext({
+      ...positionContext,
+      trIndex: anchorTd.trIndex,
+      tdIndex: anchorTd.tdIndex
+    });
+    const curIndex = anchorTd.value.length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render();
+    this.tableTool.render();
+  }
+  cancelMergeTableCell() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2, tdIndex, trIndex } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTr = curTrList[trIndex];
+    const curTd = curTr.tdList[tdIndex];
+    if (curTd.rowspan === 1 && curTd.colspan === 1)
+      return;
+    const colspan = curTd.colspan;
+    if (curTd.colspan > 1) {
+      for (let c = 1; c < curTd.colspan; c++) {
+        const tdId = getUUID();
+        curTr.tdList.splice(tdIndex + c, 0, {
+          id: tdId,
+          rowspan: 1,
+          colspan: 1,
+          value: [
+            {
+              value: ZERO,
+              size: 16,
+              tableId: element.id,
+              trId: curTr.id,
+              tdId
+            }
+          ]
+        });
+      }
+      curTd.colspan = 1;
+    }
+    if (curTd.rowspan > 1) {
+      for (let r = 1; r < curTd.rowspan; r++) {
+        const tr = curTrList[trIndex + r];
+        for (let c = 0; c < colspan; c++) {
+          const tdId = getUUID();
+          tr.tdList.splice(curTd.colIndex, 0, {
+            id: tdId,
+            rowspan: 1,
+            colspan: 1,
+            value: [
+              {
+                value: ZERO,
+                size: 16,
+                tableId: element.id,
+                trId: tr.id,
+                tdId
+              }
+            ]
+          });
+        }
+      }
+      curTd.rowspan = 1;
+    }
+    const curIndex = curTd.value.length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render();
+    this.tableTool.render();
+  }
+  tableTdVerticalAlign(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol)
+      return;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const td = row[c];
+        if (!td || td.verticalAlign === payload || !td.verticalAlign && payload === VerticalAlign.TOP) {
+          continue;
+        }
+        td.verticalAlign = payload;
+      }
+    }
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
+  tableBorderType(payload) {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const { index: index2 } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    if (!element.borderType && payload === TableBorder.ALL || element.borderType === payload) {
+      return;
+    }
+    element.borderType = payload;
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
+  tableTdBorderType(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol)
+      return;
+    const tdList = rowCol.flat();
+    const isSetBorderType = tdList.some((td) => {
+      var _a;
+      return !((_a = td.borderTypes) == null ? void 0 : _a.includes(payload));
+    });
+    tdList.forEach((td) => {
+      if (!td.borderTypes) {
+        td.borderTypes = [];
+      }
+      const borderTypeIndex = td.borderTypes.findIndex((type) => type === payload);
+      if (isSetBorderType) {
+        if (!~borderTypeIndex) {
+          td.borderTypes.push(payload);
+        }
+      } else {
+        if (~borderTypeIndex) {
+          td.borderTypes.splice(borderTypeIndex, 1);
+        }
+      }
+      if (!td.borderTypes.length) {
+        delete td.borderTypes;
+      }
+    });
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
+  tableTdSlashType(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol)
+      return;
+    const tdList = rowCol.flat();
+    const isSetTdSlashType = tdList.some((td) => {
+      var _a;
+      return !((_a = td.slashTypes) == null ? void 0 : _a.includes(payload));
+    });
+    tdList.forEach((td) => {
+      if (!td.slashTypes) {
+        td.slashTypes = [];
+      }
+      const slashTypeIndex = td.slashTypes.findIndex((type) => type === payload);
+      if (isSetTdSlashType) {
+        if (!~slashTypeIndex) {
+          td.slashTypes.push(payload);
+        }
+      } else {
+        if (~slashTypeIndex) {
+          td.slashTypes.splice(slashTypeIndex, 1);
+        }
+      }
+      if (!td.slashTypes.length) {
+        delete td.slashTypes;
+      }
+    });
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
+  tableTdBackgroundColor(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol)
+      return;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        col.backgroundColor = payload;
+      }
+    }
+    this.draw.render({
+      isCompute: false
+    });
+  }
+  tableSelectAll() {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, tableId, isTable } = positionContext;
+    if (!isTable || !tableId)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    const originalElementList = this.draw.getOriginalElementList();
+    const trList = originalElementList[index2].trList;
+    const endTrIndex = trList.length - 1;
+    const endTdIndex = trList[endTrIndex].tdList.length - 1;
+    this.range.replaceRange({
+      startIndex,
+      endIndex,
+      tableId,
+      startTdIndex: 0,
+      endTdIndex,
+      startTrIndex: 0,
+      endTrIndex
+    });
+    this.draw.render({
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
+}
+class Draw {
+  constructor(rootContainer, options, data2, listener, eventBus, override) {
+    this.container = this._wrapContainer(rootContainer);
+    this.pageList = [];
+    this.ctxList = [];
+    this.pageNo = 0;
+    this.pagePixelRatio = null;
+    this.mode = options.mode;
+    this.options = options;
+    this.elementList = data2.main;
+    this.listener = listener;
+    this.eventBus = eventBus;
+    this.override = override;
+    this._formatContainer();
+    this.pageContainer = this._createPageContainer();
+    this._createPage(0);
+    this.i18n = new I18n();
+    this.historyManager = new HistoryManager(this);
+    this.position = new Position(this);
+    this.zone = new Zone(this);
+    this.range = new RangeManager(this);
+    this.margin = new Margin(this);
+    this.background = new Background(this);
+    this.search = new Search(this);
+    this.group = new Group(this);
+    this.underline = new Underline(this);
+    this.strikeout = new Strikeout(this);
+    this.highlight = new Highlight(this);
+    this.previewer = new Previewer(this);
+    this.imageParticle = new ImageParticle(this);
+    this.laTexParticle = new LaTexParticle(this);
+    this.textParticle = new TextParticle(this);
+    this.tableParticle = new TableParticle(this);
+    this.tableTool = new TableTool(this);
+    this.tableOperate = new TableOperate(this);
+    this.pageNumber = new PageNumber(this);
+    this.lineNumber = new LineNumber(this);
+    this.waterMark = new Watermark(this);
+    this.placeholder = new Placeholder(this);
+    this.header = new Header(this, data2.header);
+    this.footer = new Footer(this, data2.footer);
+    this.hyperlinkParticle = new HyperlinkParticle(this);
+    this.dateParticle = new DateParticle(this);
+    this.separatorParticle = new SeparatorParticle(this);
+    this.pageBreakParticle = new PageBreakParticle(this);
+    this.superscriptParticle = new SuperscriptParticle();
+    this.subscriptParticle = new SubscriptParticle();
+    this.checkboxParticle = new CheckboxParticle(this);
+    this.radioParticle = new RadioParticle(this);
+    this.blockParticle = new BlockParticle(this);
+    this.listParticle = new ListParticle(this);
+    this.lineBreakParticle = new LineBreakParticle(this);
+    this.control = new Control(this);
+    this.pageBorder = new PageBorder(this);
+    this.scrollObserver = new ScrollObserver(this);
+    this.selectionObserver = new SelectionObserver(this);
+    this.imageObserver = new ImageObserver();
+    new MouseObserver(this);
+    this.canvasEvent = new CanvasEvent(this);
+    this.cursor = new Cursor(this, this.canvasEvent);
+    this.canvasEvent.register();
+    this.globalEvent = new GlobalEvent(this, this.canvasEvent);
+    this.globalEvent.register();
+    this.workerManager = new WorkerManager(this);
+    new Actuator(this);
+    const { letterClass } = options;
+    this.LETTER_REG = new RegExp(`[${letterClass.join("")}]`);
+    this.WORD_LIKE_REG = new RegExp(`${letterClass.map((letter) => `[^${letter}][${letter}]`).join("|")}`);
+    this.rowList = [];
+    this.pageRowList = [];
+    this.painterStyle = null;
+    this.painterOptions = null;
+    this.visiblePageNoList = [];
+    this.intersectionPageNo = 0;
+    this.lazyRenderIntersectionObserver = null;
+    this.printModeData = null;
+    this.render({
+      isInit: true,
+      isSetCursor: false,
+      isFirstRender: true
+    });
+  }
+  getLetterReg() {
+    return this.LETTER_REG;
+  }
+  getMode() {
+    return this.mode;
+  }
+  setMode(payload) {
+    if (this.mode === payload)
+      return;
+    if (payload === EditorMode.PRINT) {
+      this.printModeData = {
+        header: this.header.getElementList(),
+        main: this.elementList,
+        footer: this.footer.getElementList()
+      };
+      const clonePrintModeData = deepClone(this.printModeData);
+      const editorDataKeys = ["header", "main", "footer"];
+      editorDataKeys.forEach((key) => {
+        clonePrintModeData[key] = this.control.filterAssistElement(clonePrintModeData[key]);
+      });
+      this.setEditorData(clonePrintModeData);
+    }
+    if (this.mode === EditorMode.PRINT && this.printModeData) {
+      this.setEditorData(this.printModeData);
+      this.printModeData = null;
+    }
+    this.clearSideEffect();
+    this.range.clearRange();
+    this.mode = payload;
+    this.options.mode = payload;
+    this.render({
+      isSetCursor: false,
+      isSubmitHistory: false
+    });
+  }
+  isReadonly() {
+    switch (this.mode) {
+      case EditorMode.DESIGN:
+        return false;
+      case EditorMode.READONLY:
+      case EditorMode.PRINT:
+        return true;
+      case EditorMode.FORM:
+        return !this.control.getIsRangeWithinControl();
+      default:
+        return false;
+    }
+  }
+  isDisabled() {
+    var _a, _b, _c, _d, _e;
+    if (this.mode === EditorMode.DESIGN)
+      return false;
+    const { startIndex, endIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    if ((_a = this.getTd()) == null ? void 0 : _a.disabled)
+      return true;
+    if (startIndex === endIndex) {
+      const startElement = elementList[startIndex];
+      const nextElement = elementList[startIndex + 1];
+      return !!(((_b = startElement == null ? void 0 : startElement.title) == null ? void 0 : _b.disabled) && ((_c = nextElement == null ? void 0 : nextElement.title) == null ? void 0 : _c.disabled) || ((_d = startElement == null ? void 0 : startElement.control) == null ? void 0 : _d.disabled) && ((_e = nextElement == null ? void 0 : nextElement.control) == null ? void 0 : _e.disabled));
+    }
+    const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1);
+    return selectionElementList.some((element) => {
+      var _a2, _b2;
+      return ((_a2 = element.title) == null ? void 0 : _a2.disabled) || ((_b2 = element.control) == null ? void 0 : _b2.disabled);
+    });
+  }
+  isDesignMode() {
+    return this.mode === EditorMode.DESIGN;
+  }
+  getOriginalWidth() {
+    const { paperDirection, width, height } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? width : height;
+  }
+  getOriginalHeight() {
+    const { paperDirection, width, height } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? height : width;
+  }
+  getWidth() {
+    return Math.floor(this.getOriginalWidth() * this.options.scale);
+  }
+  getHeight() {
+    return Math.floor(this.getOriginalHeight() * this.options.scale);
+  }
+  getMainHeight() {
+    const pageHeight = this.getHeight();
+    return pageHeight - this.getMainOuterHeight();
+  }
+  getMainOuterHeight() {
+    const margins = this.getMargins();
+    const headerExtraHeight = this.header.getExtraHeight();
+    const footerExtraHeight = this.footer.getExtraHeight();
+    return margins[0] + margins[2] + headerExtraHeight + footerExtraHeight;
+  }
+  getCanvasWidth(pageNo = -1) {
+    const page = this.getPage(pageNo);
+    return page.width;
+  }
+  getCanvasHeight(pageNo = -1) {
+    const page = this.getPage(pageNo);
+    return page.height;
+  }
+  getInnerWidth() {
+    const width = this.getWidth();
+    const margins = this.getMargins();
+    return width - margins[1] - margins[3];
+  }
+  getOriginalInnerWidth() {
+    const width = this.getOriginalWidth();
+    const margins = this.getOriginalMargins();
+    return width - margins[1] - margins[3];
+  }
+  getContextInnerWidth() {
+    const positionContext = this.position.getPositionContext();
+    if (positionContext.isTable) {
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const elementList = this.getOriginalElementList();
+      const td = elementList[index2].trList[trIndex].tdList[tdIndex];
+      const tdPadding = this.getTdPadding();
+      return td.width - tdPadding[1] - tdPadding[3];
+    }
+    return this.getOriginalInnerWidth();
+  }
+  getMargins() {
+    return this.getOriginalMargins().map((m) => m * this.options.scale);
+  }
+  getOriginalMargins() {
+    const { margins, paperDirection } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? margins : [margins[1], margins[2], margins[3], margins[0]];
+  }
+  getPageGap() {
+    return this.options.pageGap * this.options.scale;
+  }
+  getOriginalPageGap() {
+    return this.options.pageGap;
+  }
+  getPageNumberBottom() {
+    const { pageNumber: { bottom }, scale } = this.options;
+    return bottom * scale;
+  }
+  getMarginIndicatorSize() {
+    return this.options.marginIndicatorSize * this.options.scale;
+  }
+  getDefaultBasicRowMarginHeight() {
+    return this.options.defaultBasicRowMarginHeight * this.options.scale;
+  }
+  getTdPadding() {
+    const { table: { tdPadding }, scale } = this.options;
+    return tdPadding.map((m) => m * scale);
+  }
+  getContainer() {
+    return this.container;
+  }
+  getPageContainer() {
+    return this.pageContainer;
+  }
+  getVisiblePageNoList() {
+    return this.visiblePageNoList;
+  }
+  setVisiblePageNoList(payload) {
+    this.visiblePageNoList = payload;
+    if (this.listener.visiblePageNoListChange) {
+      this.listener.visiblePageNoListChange(this.visiblePageNoList);
+    }
+    if (this.eventBus.isSubscribe("visiblePageNoListChange")) {
+      this.eventBus.emit("visiblePageNoListChange", this.visiblePageNoList);
+    }
+  }
+  getIntersectionPageNo() {
+    return this.intersectionPageNo;
+  }
+  setIntersectionPageNo(payload) {
+    this.intersectionPageNo = payload;
+    if (this.listener.intersectionPageNoChange) {
+      this.listener.intersectionPageNoChange(this.intersectionPageNo);
+    }
+    if (this.eventBus.isSubscribe("intersectionPageNoChange")) {
+      this.eventBus.emit("intersectionPageNoChange", this.intersectionPageNo);
+    }
+  }
+  getPageNo() {
+    return this.pageNo;
+  }
+  setPageNo(payload) {
+    this.pageNo = payload;
+  }
+  getPage(pageNo = -1) {
+    return this.pageList[~pageNo ? pageNo : this.pageNo];
+  }
+  getPageList() {
+    return this.pageList;
+  }
+  getPageCount() {
+    return this.pageList.length;
+  }
+  getTableRowList(sourceElementList) {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex } = positionContext;
+    return sourceElementList[index2].trList[trIndex].tdList[tdIndex].rowList;
+  }
+  getOriginalRowList() {
+    const zoneManager = this.getZone();
+    if (zoneManager.isHeaderActive()) {
+      return this.header.getRowList();
+    }
+    if (zoneManager.isFooterActive()) {
+      return this.footer.getRowList();
+    }
+    return this.rowList;
+  }
+  getRowList() {
+    const positionContext = this.position.getPositionContext();
+    return positionContext.isTable ? this.getTableRowList(this.getOriginalElementList()) : this.getOriginalRowList();
+  }
+  getPageRowList() {
+    return this.pageRowList;
+  }
+  getCtx() {
+    return this.ctxList[this.pageNo];
+  }
+  getOptions() {
+    return this.options;
+  }
+  getSearch() {
+    return this.search;
+  }
+  getGroup() {
+    return this.group;
+  }
+  getHistoryManager() {
+    return this.historyManager;
+  }
+  getPosition() {
+    return this.position;
+  }
+  getZone() {
+    return this.zone;
+  }
+  getRange() {
+    return this.range;
+  }
+  getLineBreakParticle() {
+    return this.lineBreakParticle;
+  }
+  getTextParticle() {
+    return this.textParticle;
+  }
+  getHeaderElementList() {
+    return this.header.getElementList();
+  }
+  getTableElementList(sourceElementList) {
+    var _a;
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex } = positionContext;
+    return ((_a = sourceElementList[index2].trList) == null ? void 0 : _a[trIndex].tdList[tdIndex].value) || [];
+  }
+  getElementList() {
+    const positionContext = this.position.getPositionContext();
+    const elementList = this.getOriginalElementList();
+    return positionContext.isTable ? this.getTableElementList(elementList) : elementList;
+  }
+  getMainElementList() {
+    const positionContext = this.position.getPositionContext();
+    return positionContext.isTable ? this.getTableElementList(this.elementList) : this.elementList;
+  }
+  getOriginalElementList() {
+    const zoneManager = this.getZone();
+    if (zoneManager.isHeaderActive()) {
+      return this.getHeaderElementList();
+    }
+    if (zoneManager.isFooterActive()) {
+      return this.getFooterElementList();
+    }
+    return this.elementList;
+  }
+  getOriginalMainElementList() {
+    return this.elementList;
+  }
+  getFooterElementList() {
+    return this.footer.getElementList();
+  }
+  getTd() {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex, isTable } = positionContext;
+    if (isTable) {
+      const elementList = this.getOriginalElementList();
+      return elementList[index2].trList[trIndex].tdList[tdIndex];
+    }
+    return null;
+  }
+  insertElementList(payload) {
+    if (!payload.length || !this.range.getIsCanInput())
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    formatElementList(payload, {
+      isHandleFirstElement: false,
+      editorOptions: this.options
+    });
+    let curIndex = -1;
+    let activeControl = this.control.getActiveControl();
+    if (!activeControl && this.control.getIsRangeWithinControl()) {
+      this.control.initControl();
+      activeControl = this.control.getActiveControl();
+    }
+    if (activeControl && this.control.getIsRangeWithinControl()) {
+      curIndex = activeControl.setValue(payload, void 0, {
+        isIgnoreDisabledRule: true
+      });
+    } else {
+      const elementList = this.getElementList();
+      const isCollapsed = startIndex === endIndex;
+      const start = startIndex + 1;
+      if (!isCollapsed) {
+        this.spliceElementList(elementList, start, endIndex - startIndex);
+      }
+      this.spliceElementList(elementList, start, 0, ...payload);
+      curIndex = startIndex + payload.length;
+      const preElement = elementList[start - 1];
+      if (payload[0].listId && preElement && !preElement.listId && (preElement == null ? void 0 : preElement.value) === ZERO && (!preElement.type || preElement.type === ElementType.TEXT)) {
+        elementList.splice(startIndex, 1);
+        curIndex -= 1;
+      }
+    }
+    if (~curIndex) {
+      this.range.setRange(curIndex, curIndex);
+      this.render({
+        curIndex
+      });
+    }
+  }
+  appendElementList(elementList, options = {}) {
+    if (!elementList.length)
+      return;
+    formatElementList(elementList, {
+      isHandleFirstElement: false,
+      editorOptions: this.options
+    });
+    let curIndex;
+    const { isPrepend } = options;
+    if (isPrepend) {
+      this.elementList.splice(1, 0, ...elementList);
+      curIndex = elementList.length;
+    } else {
+      this.elementList.push(...elementList);
+      curIndex = this.elementList.length - 1;
+    }
+    this.range.setRange(curIndex, curIndex);
+    this.render({
+      curIndex
+    });
+  }
+  spliceElementList(elementList, start, deleteCount, ...items) {
+    var _a, _b, _c, _d;
+    const isDesignMode = this.isDesignMode();
+    if (deleteCount > 0) {
+      const endIndex = start + deleteCount;
+      const endElement = elementList[endIndex];
+      const endElementListId = endElement == null ? void 0 : endElement.listId;
+      if (endElementListId && ((_a = elementList[start - 1]) == null ? void 0 : _a.listId) !== endElementListId) {
+        let startIndex = endIndex;
+        while (startIndex < elementList.length) {
+          const curElement = elementList[startIndex];
+          if (curElement.listId !== endElementListId || curElement.value === ZERO) {
+            break;
+          }
+          delete curElement.listId;
+          delete curElement.listType;
+          delete curElement.listStyle;
+          startIndex++;
+        }
+      }
+      if (!this.control.getActiveControl()) {
+        const tdDeletable = (_b = this.getTd()) == null ? void 0 : _b.deletable;
+        let deleteIndex = endIndex - 1;
+        while (deleteIndex >= start) {
+          const deleteElement = elementList[deleteIndex];
+          if (isDesignMode || tdDeletable !== false && ((_c = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _c.deletable) !== false && ((_d = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _d.deletable) !== false) {
+            elementList.splice(deleteIndex, 1);
+          }
+          deleteIndex--;
+        }
+      } else {
+        elementList.splice(start, deleteCount);
+      }
+    }
+    for (let i = 0; i < items.length; i++) {
+      elementList.splice(start + i, 0, items[i]);
+    }
+  }
+  getCanvasEvent() {
+    return this.canvasEvent;
+  }
+  getGlobalEvent() {
+    return this.globalEvent;
+  }
+  getListener() {
+    return this.listener;
+  }
+  getEventBus() {
+    return this.eventBus;
+  }
+  getOverride() {
+    return this.override;
+  }
+  getCursor() {
+    return this.cursor;
+  }
+  getPreviewer() {
+    return this.previewer;
+  }
+  getImageParticle() {
+    return this.imageParticle;
+  }
+  getTableTool() {
+    return this.tableTool;
+  }
+  getTableOperate() {
+    return this.tableOperate;
+  }
+  getTableParticle() {
+    return this.tableParticle;
+  }
+  getHeader() {
+    return this.header;
+  }
+  getFooter() {
+    return this.footer;
+  }
+  getHyperlinkParticle() {
+    return this.hyperlinkParticle;
+  }
+  getDateParticle() {
+    return this.dateParticle;
+  }
+  getListParticle() {
+    return this.listParticle;
+  }
+  getCheckboxParticle() {
+    return this.checkboxParticle;
+  }
+  getRadioParticle() {
+    return this.radioParticle;
+  }
+  getControl() {
+    return this.control;
+  }
+  getWorkerManager() {
+    return this.workerManager;
+  }
+  getImageObserver() {
+    return this.imageObserver;
+  }
+  getI18n() {
+    return this.i18n;
+  }
+  getRowCount() {
+    return this.getRowList().length;
+  }
+  async getDataURL(payload = {}) {
+    const { pixelRatio, mode } = payload;
+    if (pixelRatio) {
+      this.setPagePixelRatio(pixelRatio);
+    }
+    const currentMode = this.mode;
+    const isSwitchMode = !!mode && currentMode !== mode;
+    if (isSwitchMode) {
+      this.setMode(mode);
+    }
+    this.render({
+      isLazy: false,
+      isCompute: false,
+      isSetCursor: false,
+      isSubmitHistory: false
+    });
+    await this.imageObserver.allSettled();
+    const dataUrlList = this.pageList.map((c) => c.toDataURL());
+    if (pixelRatio) {
+      this.setPagePixelRatio(null);
+    }
+    if (isSwitchMode) {
+      this.setMode(currentMode);
+    }
+    return dataUrlList;
+  }
+  getPainterStyle() {
+    return this.painterStyle && Object.keys(this.painterStyle).length ? this.painterStyle : null;
+  }
+  getPainterOptions() {
+    return this.painterOptions;
+  }
+  setPainterStyle(payload, options) {
+    this.painterStyle = payload;
+    this.painterOptions = options || null;
+    if (this.getPainterStyle()) {
+      this.pageList.forEach((c) => c.style.cursor = "copy");
+    }
+  }
+  setDefaultRange() {
+    if (!this.elementList.length)
+      return;
+    setTimeout(() => {
+      const curIndex = this.elementList.length - 1;
+      this.range.setRange(curIndex, curIndex);
+      this.range.setRangeStyle();
+    });
+  }
+  getIsPagingMode() {
+    return this.options.pageMode === PageMode.PAGING;
+  }
+  setPageMode(payload) {
+    if (!payload || this.options.pageMode === payload)
+      return;
+    this.options.pageMode = payload;
+    if (payload === PageMode.PAGING) {
+      const { height } = this.options;
+      const dpr = this.getPagePixelRatio();
+      const canvas = this.pageList[0];
+      canvas.style.height = `${height}px`;
+      canvas.height = height * dpr;
+      this._initPageContext(this.ctxList[0]);
+    } else {
+      this._disconnectLazyRender();
+      this.header.recovery();
+      this.footer.recovery();
+      this.zone.setZone(EditorZone.MAIN);
+    }
+    const { startIndex } = this.range.getRange();
+    const isCollapsed = this.range.getIsCollapsed();
+    this.render({
+      isSetCursor: true,
+      curIndex: startIndex,
+      isSubmitHistory: false
+    });
+    if (!isCollapsed) {
+      this.cursor.drawCursor({
+        isShow: false
+      });
+    }
+    setTimeout(() => {
+      if (this.listener.pageModeChange) {
+        this.listener.pageModeChange(payload);
+      }
+      if (this.eventBus.isSubscribe("pageModeChange")) {
+        this.eventBus.emit("pageModeChange", payload);
+      }
+    });
+  }
+  setPageScale(payload) {
+    const dpr = this.getPagePixelRatio();
+    this.options.scale = payload;
+    const width = this.getWidth();
+    const height = this.getHeight();
+    this.container.style.width = `${width}px`;
+    this.pageList.forEach((p, i) => {
+      p.width = width * dpr;
+      p.height = height * dpr;
+      p.style.width = `${width}px`;
+      p.style.height = `${height}px`;
+      p.style.marginBottom = `${this.getPageGap()}px`;
+      this._initPageContext(this.ctxList[i]);
+    });
+    const cursorPosition = this.position.getCursorPosition();
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: !!cursorPosition,
+      curIndex: cursorPosition == null ? void 0 : cursorPosition.index
+    });
+    if (this.listener.pageScaleChange) {
+      this.listener.pageScaleChange(payload);
+    }
+    if (this.eventBus.isSubscribe("pageScaleChange")) {
+      this.eventBus.emit("pageScaleChange", payload);
+    }
+  }
+  getPagePixelRatio() {
+    return this.pagePixelRatio || window.devicePixelRatio;
+  }
+  setPagePixelRatio(payload) {
+    if (!this.pagePixelRatio && payload === window.devicePixelRatio || payload === this.pagePixelRatio) {
+      return;
+    }
+    this.pagePixelRatio = payload;
+    this.setPageDevicePixel();
+  }
+  setPageDevicePixel() {
+    const dpr = this.getPagePixelRatio();
+    const width = this.getWidth();
+    const height = this.getHeight();
+    this.pageList.forEach((p, i) => {
+      p.width = width * dpr;
+      p.height = height * dpr;
+      this._initPageContext(this.ctxList[i]);
+    });
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    });
+  }
+  setPaperSize(width, height) {
+    this.options.width = width;
+    this.options.height = height;
+    const dpr = this.getPagePixelRatio();
+    const realWidth = this.getWidth();
+    const realHeight = this.getHeight();
+    this.container.style.width = `${realWidth}px`;
+    this.pageList.forEach((p, i) => {
+      p.width = realWidth * dpr;
+      p.height = realHeight * dpr;
+      p.style.width = `${realWidth}px`;
+      p.style.height = `${realHeight}px`;
+      this._initPageContext(this.ctxList[i]);
+    });
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    });
+  }
+  setPaperDirection(payload) {
+    const dpr = this.getPagePixelRatio();
+    this.options.paperDirection = payload;
+    const width = this.getWidth();
+    const height = this.getHeight();
+    this.container.style.width = `${width}px`;
+    this.pageList.forEach((p, i) => {
+      p.width = width * dpr;
+      p.height = height * dpr;
+      p.style.width = `${width}px`;
+      p.style.height = `${height}px`;
+      this._initPageContext(this.ctxList[i]);
+    });
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    });
+  }
+  setPaperMargin(payload) {
+    this.options.margins = payload;
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    });
+  }
+  getValue(options = {}) {
+    const { pageNo, extraPickAttrs } = options;
+    let mainElementList = this.elementList;
+    if (Number.isInteger(pageNo) && pageNo >= 0 && pageNo < this.pageRowList.length) {
+      mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
+    }
+    const data2 = {
+      header: zipElementList(this.getHeaderElementList(), {
+        extraPickAttrs
+      }),
+      main: zipElementList(mainElementList, {
+        extraPickAttrs
+      }),
+      footer: zipElementList(this.getFooterElementList(), {
+        extraPickAttrs
+      })
+    };
+    return {
+      version,
+      data: data2,
+      options: deepClone(this.options)
+    };
+  }
+  setValue(payload, options) {
+    const { header, main, footer } = deepClone(payload);
+    if (!header && !main && !footer)
+      return;
+    const { isSetCursor = false } = options || {};
+    const pageComponentData = [header, main, footer];
+    pageComponentData.forEach((data2) => {
+      if (!data2)
+        return;
+      formatElementList(data2, {
+        editorOptions: this.options,
+        isForceCompensation: true
+      });
+    });
+    this.setEditorData({
+      header,
+      main,
+      footer
+    });
+    this.historyManager.recovery();
+    const curIndex = isSetCursor ? (main == null ? void 0 : main.length) ? main.length - 1 : 0 : void 0;
+    if (curIndex !== void 0) {
+      this.range.setRange(curIndex, curIndex);
+    }
+    this.render({
+      curIndex,
+      isSetCursor,
+      isFirstRender: true
+    });
+  }
+  setEditorData(payload) {
+    const { header, main, footer } = payload;
+    if (header) {
+      this.header.setElementList(header);
+    }
+    if (main) {
+      this.elementList = main;
+    }
+    if (footer) {
+      this.footer.setElementList(footer);
+    }
+  }
+  _wrapContainer(rootContainer) {
+    const container = document.createElement("div");
+    rootContainer.append(container);
+    return container;
+  }
+  _formatContainer() {
+    this.container.style.position = "relative";
+    this.container.style.width = `${this.getWidth()}px`;
+    this.container.setAttribute(EDITOR_COMPONENT, EditorComponent.MAIN);
+  }
+  _createPageContainer() {
+    const pageContainer = document.createElement("div");
+    pageContainer.classList.add(`${EDITOR_PREFIX}-page-container`);
+    this.container.append(pageContainer);
+    return pageContainer;
+  }
+  _createPage(pageNo) {
+    const width = this.getWidth();
+    const height = this.getHeight();
+    const canvas = document.createElement("canvas");
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.style.display = "block";
+    canvas.style.backgroundColor = "#ffffff";
+    canvas.style.marginBottom = `${this.getPageGap()}px`;
+    canvas.setAttribute("data-index", String(pageNo));
+    this.pageContainer.append(canvas);
+    const dpr = this.getPagePixelRatio();
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.cursor = "text";
+    const ctx = canvas.getContext("2d");
+    this._initPageContext(ctx);
+    this.pageList.push(canvas);
+    this.ctxList.push(ctx);
+  }
+  _initPageContext(ctx) {
+    const dpr = this.getPagePixelRatio();
+    ctx.scale(dpr, dpr);
+    ctx.letterSpacing = "0px";
+    ctx.wordSpacing = "0px";
+    ctx.direction = "ltr";
+  }
+  getElementFont(el, scale = 1) {
+    const { defaultSize, defaultFont } = this.options;
+    const font = el.font || defaultFont;
+    const size = el.actualSize || el.size || defaultSize;
+    return `${el.italic ? "italic " : ""}${el.bold ? "bold " : ""}${size * scale}px ${font}`;
+  }
+  getElementSize(el) {
+    return el.actualSize || el.size || this.options.defaultSize;
+  }
+  getElementRowMargin(el) {
+    var _a;
+    const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
+    return defaultBasicRowMarginHeight * ((_a = el.rowMargin) != null ? _a : defaultRowMargin) * scale;
+  }
+  computeRowList(payload) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const { innerWidth, elementList, isPagingMode = false, isFromTable = false, startX = 0, startY = 0, pageHeight = 0, mainOuterHeight = 0, surroundElementList = [] } = payload;
+    const { defaultSize, defaultRowMargin, scale, table: { tdPadding }, defaultTabWidth } = this.options;
+    const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const listStyleMap = this.listParticle.computeListStyle(ctx, elementList);
+    const rowList = [];
+    if (elementList.length) {
+      rowList.push({
+        width: 0,
+        height: 0,
+        ascent: 0,
+        elementList: [],
+        startIndex: 0,
+        rowIndex: 0,
+        rowFlex: ((_a = elementList == null ? void 0 : elementList[0]) == null ? void 0 : _a.rowFlex) || ((_b = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _b.rowFlex)
+      });
+    }
+    let x = startX;
+    let y = startY;
+    let pageNo = 0;
+    let listId;
+    let listIndex = 0;
+    let controlRealWidth = 0;
+    for (let i = 0; i < elementList.length; i++) {
+      const curRow = rowList[rowList.length - 1];
+      const element = elementList[i];
+      const rowMargin = defaultBasicRowMarginHeight * ((_c = element.rowMargin) != null ? _c : defaultRowMargin);
+      const metrics = {
+        width: 0,
+        height: 0,
+        boundingBoxAscent: 0,
+        boundingBoxDescent: 0
+      };
+      const offsetX = curRow.offsetX || element.listId && listStyleMap.get(element.listId) || 0;
+      const availableWidth = innerWidth - offsetX;
+      x += curRow.elementList.length === 1 ? offsetX : 0;
+      if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
+        if (element.imgDisplay === ImageDisplay.SURROUND || element.imgDisplay === ImageDisplay.FLOAT_TOP || element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
+          metrics.width = 0;
+          metrics.height = 0;
+          metrics.boundingBoxDescent = 0;
+        } else {
+          const elementWidth = element.width * scale;
+          const elementHeight = element.height * scale;
+          if (elementWidth > availableWidth) {
+            const adaptiveHeight = elementHeight * availableWidth / elementWidth;
+            element.width = availableWidth / scale;
+            element.height = adaptiveHeight / scale;
+            metrics.width = availableWidth;
+            metrics.height = adaptiveHeight;
+            metrics.boundingBoxDescent = adaptiveHeight;
+          } else {
+            metrics.width = elementWidth;
+            metrics.height = elementHeight;
+            metrics.boundingBoxDescent = elementHeight;
+          }
+        }
+        metrics.boundingBoxAscent = 0;
+      } else if (element.type === ElementType.TABLE) {
+        const tdPaddingWidth = tdPadding[1] + tdPadding[3];
+        const tdPaddingHeight = tdPadding[0] + tdPadding[2];
+        if (element.pagingId) {
+          let tableIndex = i + 1;
+          let combineCount = 0;
+          while (tableIndex < elementList.length) {
+            const nextElement2 = elementList[tableIndex];
+            if (nextElement2.pagingId === element.pagingId) {
+              const nexTrList = nextElement2.trList.filter((tr) => !tr.pagingRepeat);
+              element.trList.push(...nexTrList);
+              element.height += nextElement2.height;
+              tableIndex++;
+              combineCount++;
+            } else {
+              break;
+            }
+          }
+          if (combineCount) {
+            elementList.splice(i + 1, combineCount);
+          }
+        }
+        element.pagingIndex = (_d = element.pagingIndex) != null ? _d : 0;
+        this.tableParticle.computeRowColInfo(element);
+        const trList = element.trList;
+        for (let t = 0; t < trList.length; t++) {
+          const tr = trList[t];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const rowList2 = this.computeRowList({
+              innerWidth: (td.width - tdPaddingWidth) * scale,
+              elementList: td.value,
+              isFromTable: true,
+              isPagingMode
+            });
+            const rowHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
+            td.rowList = rowList2;
+            const curTdHeight = rowHeight / scale + tdPaddingHeight;
+            if (td.height < curTdHeight) {
+              const extraHeight = curTdHeight - td.height;
+              const changeTr = trList[t + td.rowspan - 1];
+              changeTr.height += extraHeight;
+              changeTr.tdList.forEach((changeTd) => {
+                changeTd.height += extraHeight;
+              });
+            }
+            let curTdMinHeight = 0;
+            let curTdRealHeight = 0;
+            let i2 = 0;
+            while (i2 < td.rowspan) {
+              const curTr = trList[i2 + t] || trList[t];
+              curTdMinHeight += curTr.minHeight;
+              curTdRealHeight += curTr.height;
+              i2++;
+            }
+            td.realMinHeight = curTdMinHeight;
+            td.realHeight = curTdRealHeight;
+            td.mainHeight = curTdHeight;
+          }
+        }
+        const reduceTrList = this.tableParticle.getTrListGroupByCol(trList);
+        for (let t = 0; t < reduceTrList.length; t++) {
+          const tr = reduceTrList[t];
+          let reduceHeight = -1;
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const curTdRealHeight = td.realHeight;
+            const curTdHeight = td.mainHeight;
+            const curTdMinHeight = td.realMinHeight;
+            const curReduceHeight = curTdHeight < curTdMinHeight ? curTdRealHeight - curTdMinHeight : curTdRealHeight - curTdHeight;
+            if (!~reduceHeight || curReduceHeight < reduceHeight) {
+              reduceHeight = curReduceHeight;
+            }
+          }
+          if (reduceHeight > 0) {
+            const changeTr = trList[t];
+            changeTr.height -= reduceHeight;
+            changeTr.tdList.forEach((changeTd) => {
+              changeTd.height -= reduceHeight;
+            });
+          }
+        }
+        this.tableParticle.computeRowColInfo(element);
+        const tableHeight = this.tableParticle.getTableHeight(element);
+        const tableWidth = this.tableParticle.getTableWidth(element);
+        element.width = tableWidth;
+        element.height = tableHeight;
+        const elementWidth = tableWidth * scale;
+        const elementHeight = tableHeight * scale;
+        metrics.width = elementWidth;
+        metrics.height = elementHeight;
+        metrics.boundingBoxDescent = elementHeight;
+        metrics.boundingBoxAscent = -rowMargin;
+        if (isPagingMode) {
+          const height2 = this.getHeight();
+          const marginHeight = this.getMainOuterHeight();
+          let curPagePreHeight = marginHeight;
+          for (let r = 0; r < rowList.length; r++) {
+            const row = rowList[r];
+            if (row.height + curPagePreHeight > height2 || ((_e = rowList[r - 1]) == null ? void 0 : _e.isPageBreak)) {
+              curPagePreHeight = marginHeight + row.height;
+            } else {
+              curPagePreHeight += row.height;
+            }
+          }
+          const rowMarginHeight = rowMargin * 2 * scale;
+          if (curPagePreHeight + element.trList[0].height + rowMarginHeight > height2 || element.pagingIndex !== 0 && element.trList[0].pagingRepeat) {
+            curPagePreHeight = marginHeight;
+          }
+          if (curPagePreHeight + rowMarginHeight + elementHeight > height2) {
+            const trList2 = element.trList;
+            let deleteStart = 0;
+            let deleteCount = 0;
+            let preTrHeight = 0;
+            if (trList2.length > 1) {
+              for (let r = 0; r < trList2.length; r++) {
+                const tr = trList2[r];
+                const trHeight = tr.height * scale;
+                if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
+                  const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
+                  if (((_f = element.colgroup) == null ? void 0 : _f.length) !== rowColCount) {
+                    deleteCount = 0;
+                  }
+                  break;
+                } else {
+                  deleteStart = r + 1;
+                  deleteCount = trList2.length - deleteStart;
+                  preTrHeight += trHeight;
+                }
+              }
+            }
+            if (deleteCount) {
+              const cloneTrList = trList2.splice(deleteStart, deleteCount);
+              const cloneTrHeight = cloneTrList.reduce((pre, cur) => pre + cur.height, 0);
+              const pagingId = element.pagingId || getUUID();
+              element.pagingId = pagingId;
+              element.height -= cloneTrHeight;
+              metrics.height -= cloneTrHeight;
+              metrics.boundingBoxDescent -= cloneTrHeight;
+              const cloneElement = deepClone(element);
+              cloneElement.pagingId = pagingId;
+              cloneElement.pagingIndex = element.pagingIndex + 1;
+              const repeatTrList = trList2.filter((tr) => tr.pagingRepeat);
+              if (repeatTrList.length) {
+                const cloneRepeatTrList = deepClone(repeatTrList);
+                cloneRepeatTrList.forEach((tr) => tr.id = getUUID());
+                cloneTrList.unshift(...cloneRepeatTrList);
+              }
+              cloneElement.trList = cloneTrList;
+              cloneElement.id = getUUID();
+              this.spliceElementList(elementList, i + 1, 0, cloneElement);
+            }
+          }
+          if (element.pagingId) {
+            const positionContext = this.position.getPositionContext();
+            if (positionContext.isTable) {
+              let newPositionContextIndex = -1;
+              let newPositionContextTrIndex = -1;
+              let tableIndex = i;
+              while (tableIndex < elementList.length) {
+                const curElement = elementList[tableIndex];
+                if (curElement.pagingId !== element.pagingId)
+                  break;
+                const trIndex = curElement.trList.findIndex((r) => r.id === positionContext.trId);
+                if (~trIndex) {
+                  newPositionContextIndex = tableIndex;
+                  newPositionContextTrIndex = trIndex;
+                  break;
+                }
+                tableIndex++;
+              }
+              if (~newPositionContextIndex) {
+                positionContext.index = newPositionContextIndex;
+                positionContext.trIndex = newPositionContextTrIndex;
+                this.position.setPositionContext(positionContext);
+              }
+            }
+          }
+        }
+      } else if (element.type === ElementType.SEPARATOR) {
+        const { separator: { lineWidth } } = this.options;
+        element.width = availableWidth / scale;
+        metrics.width = availableWidth;
+        metrics.height = lineWidth * scale;
+        metrics.boundingBoxAscent = -rowMargin;
+        metrics.boundingBoxDescent = -rowMargin + metrics.height;
+      } else if (element.type === ElementType.PAGE_BREAK) {
+        element.width = availableWidth / scale;
+        metrics.width = availableWidth;
+        metrics.height = defaultSize;
+      } else if (element.type === ElementType.RADIO || element.controlComponent === ControlComponent.RADIO) {
+        const { width, height: height2, gap } = this.options.radio;
+        const elementWidth = width + gap * 2;
+        element.width = elementWidth;
+        metrics.width = elementWidth * scale;
+        metrics.height = height2 * scale;
+      } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
+        const { width, height: height2, gap } = this.options.checkbox;
+        const elementWidth = width + gap * 2;
+        element.width = elementWidth;
+        metrics.width = elementWidth * scale;
+        metrics.height = height2 * scale;
+      } else if (element.type === ElementType.TAB) {
+        metrics.width = defaultTabWidth * scale;
+        metrics.height = defaultSize * scale;
+        metrics.boundingBoxDescent = 0;
+        metrics.boundingBoxAscent = metrics.height;
+      } else if (element.type === ElementType.BLOCK) {
+        if (!element.width) {
+          metrics.width = availableWidth;
+        } else {
+          const elementWidth = element.width * scale;
+          metrics.width = Math.min(elementWidth, availableWidth);
+        }
+        metrics.height = element.height * scale;
+        metrics.boundingBoxDescent = metrics.height;
+        metrics.boundingBoxAscent = 0;
+      } else {
+        const size = element.size || defaultSize;
+        if (element.type === ElementType.SUPERSCRIPT || element.type === ElementType.SUBSCRIPT) {
+          element.actualSize = Math.ceil(size * 0.6);
+        }
+        metrics.height = (element.actualSize || size) * scale;
+        ctx.font = this.getElementFont(element);
+        const fontMetrics = this.textParticle.measureText(ctx, element);
+        metrics.width = fontMetrics.width * scale;
+        if (element.letterSpacing) {
+          metrics.width += element.letterSpacing * scale;
+        }
+        metrics.boundingBoxAscent = (element.value === ZERO ? element.size || defaultSize : fontMetrics.actualBoundingBoxAscent) * scale;
+        metrics.boundingBoxDescent = fontMetrics.actualBoundingBoxDescent * scale;
+        if (element.type === ElementType.SUPERSCRIPT) {
+          metrics.boundingBoxAscent += metrics.height / 2;
+        } else if (element.type === ElementType.SUBSCRIPT) {
+          metrics.boundingBoxDescent += metrics.height / 2;
+        }
+      }
+      const ascent = element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE || element.type === ElementType.LATEX ? metrics.height + rowMargin : metrics.boundingBoxAscent + rowMargin;
+      const height = rowMargin + metrics.boundingBoxAscent + metrics.boundingBoxDescent + rowMargin;
+      const rowElement = Object.assign(element, {
+        metrics,
+        left: 0,
+        style: this.getElementFont(element, scale)
+      });
+      if ((_g = rowElement.control) == null ? void 0 : _g.minWidth) {
+        if (rowElement.controlComponent) {
+          controlRealWidth += metrics.width;
+        }
+        if (rowElement.controlComponent === ControlComponent.POSTFIX) {
+          this.control.setMinWidthControlInfo({
+            row: curRow,
+            rowElement,
+            availableWidth,
+            controlRealWidth
+          });
+          controlRealWidth = 0;
+        }
+      }
+      const preElement = elementList[i - 1];
+      let nextElement = elementList[i + 1];
+      let curRowWidth = curRow.width + metrics.width;
+      if (this.options.wordBreak === WordBreak.BREAK_WORD) {
+        if ((!(preElement == null ? void 0 : preElement.type) || (preElement == null ? void 0 : preElement.type) === ElementType.TEXT) && (!element.type || element.type === ElementType.TEXT)) {
+          const word = `${(preElement == null ? void 0 : preElement.value) || ""}${element.value}`;
+          if (this.WORD_LIKE_REG.test(word)) {
+            const { width, endElement } = this.textParticle.measureWord(ctx, elementList, i);
+            const wordWidth = width * scale;
+            if (wordWidth <= availableWidth) {
+              curRowWidth += wordWidth;
+              nextElement = endElement;
+            }
+          }
+          const punctuationWidth = this.textParticle.measurePunctuationWidth(ctx, nextElement);
+          curRowWidth += punctuationWidth * scale;
+        }
+      }
+      if (element.listId) {
+        if (element.listId !== listId) {
+          listIndex = 0;
+        } else if (element.value === ZERO && !element.listWrap) {
+          listIndex++;
+        }
+      }
+      listId = element.listId;
+      const surroundPosition = this.position.setSurroundPosition({
+        pageNo,
+        rowElement,
+        row: curRow,
+        rowElementRect: {
+          x,
+          y,
+          height,
+          width: metrics.width
+        },
+        availableWidth,
+        surroundElementList
+      });
+      x = surroundPosition.x;
+      curRowWidth += surroundPosition.rowIncreaseWidth;
+      x += metrics.width;
+      const isForceBreak = element.type === ElementType.SEPARATOR || element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || (preElement == null ? void 0 : preElement.listId) !== element.listId || i !== 0 && element.value === ZERO;
+      const isWidthNotEnough = curRowWidth > availableWidth;
+      const isWrap = isForceBreak || isWidthNotEnough;
+      if (isWrap) {
+        const row = {
+          width: metrics.width,
+          height,
+          startIndex: i,
+          elementList: [rowElement],
+          ascent,
+          rowIndex: curRow.rowIndex + 1,
+          rowFlex: ((_h = elementList[i]) == null ? void 0 : _h.rowFlex) || ((_i = elementList[i + 1]) == null ? void 0 : _i.rowFlex),
+          isPageBreak: element.type === ElementType.PAGE_BREAK
+        };
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_j = rowElement.control) == null ? void 0 : _j.indentation) === ControlIndentation.VALUE_START) {
+          const preStartIndex = curRow.elementList.findIndex((el) => el.controlId === rowElement.controlId && el.controlComponent !== ControlComponent.PREFIX);
+          if (~preStartIndex) {
+            const preRowPositionList = this.position.computeRowPosition({
+              row: curRow,
+              innerWidth: this.getInnerWidth()
+            });
+            const valueStartPosition = preRowPositionList[preStartIndex];
+            if (valueStartPosition) {
+              row.offsetX = valueStartPosition.coordinate.leftTop[0];
+            }
+          }
+        }
+        if (element.listId) {
+          row.isList = true;
+          row.offsetX = listStyleMap.get(element.listId);
+          row.listIndex = listIndex;
+        }
+        rowList.push(row);
+      } else {
+        curRow.width += metrics.width;
+        if (i === 0 && getIsBlockElement(elementList[1])) {
+          curRow.height = defaultBasicRowMarginHeight;
+          curRow.ascent = defaultBasicRowMarginHeight;
+        } else if (curRow.height < height) {
+          curRow.height = height;
+          curRow.ascent = ascent;
+        }
+        curRow.elementList.push(rowElement);
+      }
+      if (isWrap || i === elementList.length - 1) {
+        curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
+        if (!curRow.isSurround && ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && isWidthNotEnough)) {
+          const rowElementList = ((_k = curRow.elementList[0]) == null ? void 0 : _k.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
+          const gap = (availableWidth - curRow.width) / (rowElementList.length - 1);
+          for (let e = 0; e < rowElementList.length - 1; e++) {
+            const el = rowElementList[e];
+            el.metrics.width += gap;
+          }
+          curRow.width = availableWidth;
+        }
+      }
+      if (isWrap) {
+        x = startX;
+        y += curRow.height;
+        if (isPagingMode && !isFromTable && pageHeight && (y - startY + mainOuterHeight + height > pageHeight || element.type === ElementType.PAGE_BREAK)) {
+          y = startY;
+          deleteSurroundElementList(surroundElementList, pageNo);
+          pageNo += 1;
+        }
+        rowElement.left = 0;
+        const nextRow = rowList[rowList.length - 1];
+        const surroundPosition2 = this.position.setSurroundPosition({
+          pageNo,
+          rowElement,
+          row: nextRow,
+          rowElementRect: {
+            x,
+            y,
+            height,
+            width: metrics.width
+          },
+          availableWidth,
+          surroundElementList
+        });
+        x = surroundPosition2.x;
+        x += metrics.width;
+      }
+    }
+    return rowList;
+  }
+  _computePageList() {
+    var _a;
+    const pageRowList = [[]];
+    const { pageMode, pageNumber: { maxPageNo } } = this.options;
+    const height = this.getHeight();
+    const marginHeight = this.getMainOuterHeight();
+    let pageHeight = marginHeight;
+    let pageNo = 0;
+    if (pageMode === PageMode.CONTINUITY) {
+      pageRowList[0] = this.rowList;
+      pageHeight += this.rowList.reduce((pre, cur) => pre + cur.height, 0);
+      const dpr = this.getPagePixelRatio();
+      const pageDom = this.pageList[0];
+      const pageDomHeight = Number(pageDom.style.height.replace("px", ""));
+      if (pageHeight > pageDomHeight) {
+        pageDom.style.height = `${pageHeight}px`;
+        pageDom.height = pageHeight * dpr;
+      } else {
+        const reduceHeight = pageHeight < height ? height : pageHeight;
+        pageDom.style.height = `${reduceHeight}px`;
+        pageDom.height = reduceHeight * dpr;
+      }
+      this._initPageContext(this.ctxList[0]);
+    } else {
+      for (let i = 0; i < this.rowList.length; i++) {
+        const row = this.rowList[i];
+        if (row.height + pageHeight > height || ((_a = this.rowList[i - 1]) == null ? void 0 : _a.isPageBreak)) {
+          if (Number.isInteger(maxPageNo) && pageNo >= maxPageNo) {
+            this.elementList = this.elementList.slice(0, row.startIndex);
+            break;
+          }
+          pageHeight = marginHeight + row.height;
+          pageRowList.push([row]);
+          pageNo++;
+        } else {
+          pageHeight += row.height;
+          pageRowList[pageNo].push(row);
+        }
+      }
+    }
+    return pageRowList;
+  }
+  _drawHighlight(ctx, payload) {
+    var _a;
+    const { control: { activeBackgroundColor } } = this.options;
+    const { rowList, positionList } = payload;
+    const activeControlElement = (_a = this.control.getActiveControl()) == null ? void 0 : _a.getElement();
+    for (let i = 0; i < rowList.length; i++) {
+      const curRow = rowList[i];
+      for (let j = 0; j < curRow.elementList.length; j++) {
+        const element = curRow.elementList[j];
+        const preElement = curRow.elementList[j - 1];
+        if (element.highlight || activeBackgroundColor && activeControlElement && element.controlId === activeControlElement.controlId && !this.control.getIsRangeInPostfix()) {
+          if (preElement && preElement.highlight && preElement.highlight !== element.highlight) {
+            this.highlight.render(ctx);
+          }
+          const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex + j];
+          const offsetX = element.left || 0;
+          this.highlight.recordFillInfo(ctx, x - offsetX, y, element.metrics.width + offsetX, curRow.height, element.highlight || activeBackgroundColor);
+        } else if (preElement == null ? void 0 : preElement.highlight) {
+          this.highlight.render(ctx);
+        }
+      }
+      this.highlight.render(ctx);
+    }
+  }
+  drawRow(ctx, payload) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    this._drawHighlight(ctx, payload);
+    const { scale, table: { tdPadding }, group: group2, lineBreak } = this.options;
+    const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2, isDrawLineBreak = !lineBreak.disabled } = payload;
+    const isPrintMode = this.mode === EditorMode.PRINT;
+    const { isCrossRowCol, tableId } = this.range.getRange();
+    let index2 = startIndex;
+    for (let i = 0; i < rowList.length; i++) {
+      const curRow = rowList[i];
+      const rangeRecord = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      let tableRangeElement = null;
+      for (let j = 0; j < curRow.elementList.length; j++) {
+        const element = curRow.elementList[j];
+        const metrics = element.metrics;
+        const { ascent: offsetY, coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex + j];
+        const preElement = curRow.elementList[j - 1];
+        if (element.type === ElementType.IMAGE) {
+          this.textParticle.complete();
+          if (element.imgDisplay !== ImageDisplay.SURROUND && element.imgDisplay !== ImageDisplay.FLOAT_TOP && element.imgDisplay !== ImageDisplay.FLOAT_BOTTOM) {
+            this.imageParticle.render(ctx, element, x, y + offsetY);
+          }
+        } else if (element.type === ElementType.LATEX) {
+          this.textParticle.complete();
+          this.laTexParticle.render(ctx, element, x, y + offsetY);
+        } else if (element.type === ElementType.TABLE) {
+          if (isCrossRowCol) {
+            rangeRecord.x = x;
+            rangeRecord.y = y;
+            tableRangeElement = element;
+          }
+          this.tableParticle.render(ctx, element, x, y);
+        } else if (element.type === ElementType.HYPERLINK) {
+          this.textParticle.complete();
+          this.hyperlinkParticle.render(ctx, element, x, y + offsetY);
+        } else if (element.type === ElementType.DATE) {
+          const nextElement = curRow.elementList[j + 1];
+          if (!preElement || preElement.dateId !== element.dateId) {
+            this.textParticle.complete();
+          }
+          this.textParticle.record(ctx, element, x, y + offsetY);
+          if (!nextElement || nextElement.dateId !== element.dateId) {
+            this.textParticle.complete();
+          }
+        } else if (element.type === ElementType.SUPERSCRIPT) {
+          this.textParticle.complete();
+          this.superscriptParticle.render(ctx, element, x, y + offsetY);
+        } else if (element.type === ElementType.SUBSCRIPT) {
+          this.underline.render(ctx);
+          this.textParticle.complete();
+          this.subscriptParticle.render(ctx, element, x, y + offsetY);
+        } else if (element.type === ElementType.SEPARATOR) {
+          this.separatorParticle.render(ctx, element, x, y);
+        } else if (element.type === ElementType.PAGE_BREAK) {
+          if (this.mode !== EditorMode.CLEAN && !isPrintMode) {
+            this.pageBreakParticle.render(ctx, element, x, y);
+          }
+        } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
+          this.textParticle.complete();
+          this.checkboxParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
+        } else if (element.type === ElementType.RADIO || element.controlComponent === ControlComponent.RADIO) {
+          this.textParticle.complete();
+          this.radioParticle.render({
+            ctx,
+            x,
+            y: y + offsetY,
+            index: j,
+            row: curRow
+          });
+        } else if (element.type === ElementType.TAB) {
+          this.textParticle.complete();
+        } else if (element.rowFlex === RowFlex.ALIGNMENT || element.rowFlex === RowFlex.JUSTIFY) {
+          this.textParticle.record(ctx, element, x, y + offsetY);
+          this.textParticle.complete();
+        } else if (element.type === ElementType.BLOCK) {
+          this.textParticle.complete();
+          this.blockParticle.render(pageNo, element, x, y);
+        } else {
+          if (element.left) {
+            this.textParticle.complete();
+          }
+          this.textParticle.record(ctx, element, x, y + offsetY);
+          if (element.width || element.letterSpacing || PUNCTUATION_REG.test(element.value)) {
+            this.textParticle.complete();
+          }
+        }
+        if (isDrawLineBreak && !isPrintMode && this.mode !== EditorMode.CLEAN && !curRow.isWidthNotEnough && j === curRow.elementList.length - 1) {
+          this.lineBreakParticle.render(ctx, element, x, y + curRow.height / 2);
+        }
+        if ((_a = element.control) == null ? void 0 : _a.border) {
+          if (((_b = preElement == null ? void 0 : preElement.control) == null ? void 0 : _b.border) && preElement.controlId !== element.controlId) {
+            this.control.drawBorder(ctx);
+          }
+          const rowMargin = this.getElementRowMargin(element);
+          this.control.recordBorderInfo(x, y + rowMargin, element.metrics.width, curRow.height - 2 * rowMargin);
+        } else if ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.border) {
+          this.control.drawBorder(ctx);
+        }
+        if (element.underline || ((_d = element.control) == null ? void 0 : _d.underline)) {
+          if ((preElement == null ? void 0 : preElement.type) === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT) {
+            this.underline.render(ctx);
+          }
+          const rowMargin = this.getElementRowMargin(element);
+          const offsetX = element.left || 0;
+          let offsetY2 = 0;
+          if (element.type === ElementType.SUBSCRIPT) {
+            offsetY2 = this.subscriptParticle.getOffsetY(element);
+          }
+          const color = ((_e = element.control) == null ? void 0 : _e.underline) ? this.options.underlineColor : element.color;
+          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_f = element.textDecoration) == null ? void 0 : _f.style);
+        } else if ((preElement == null ? void 0 : preElement.underline) || ((_g = preElement == null ? void 0 : preElement.control) == null ? void 0 : _g.underline)) {
+          this.underline.render(ctx);
+        }
+        if (element.strikeout) {
+          if (!element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
+            if (preElement && (preElement.type === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT || preElement.type === ElementType.SUPERSCRIPT && element.type !== ElementType.SUPERSCRIPT || this.getElementSize(preElement) !== this.getElementSize(element))) {
+              this.strikeout.render(ctx);
+            }
+            const standardMetrics = this.textParticle.measureBasisWord(ctx, this.getElementFont(element));
+            let adjustY = y + offsetY + standardMetrics.actualBoundingBoxDescent * scale - metrics.height / 2;
+            if (element.type === ElementType.SUBSCRIPT) {
+              adjustY += this.subscriptParticle.getOffsetY(element);
+            } else if (element.type === ElementType.SUPERSCRIPT) {
+              adjustY += this.superscriptParticle.getOffsetY(element);
+            }
+            this.strikeout.recordFillInfo(ctx, x, adjustY, metrics.width);
+          }
+        } else if (preElement == null ? void 0 : preElement.strikeout) {
+          this.strikeout.render(ctx);
+        }
+        const { zone: currentZone, startIndex: startIndex2, endIndex } = this.range.getRange();
+        if (currentZone === zone2 && startIndex2 !== endIndex && startIndex2 <= index2 && index2 <= endIndex) {
+          const positionContext = this.position.getPositionContext();
+          if (!positionContext.isTable && !element.tdId || positionContext.tdId === element.tdId) {
+            if (startIndex2 === index2) {
+              const nextElement = elementList[startIndex2 + 1];
+              if (nextElement && nextElement.value === ZERO) {
+                rangeRecord.x = x + metrics.width;
+                rangeRecord.y = y;
+                rangeRecord.height = curRow.height;
+                rangeRecord.width += this.options.rangeMinWidth;
+              }
+            } else {
+              let rangeWidth = metrics.width;
+              if (rangeWidth === 0 && curRow.elementList.length === 1) {
+                rangeWidth = this.options.rangeMinWidth;
+              }
+              if (!rangeRecord.width) {
+                rangeRecord.x = x;
+                rangeRecord.y = y;
+                rangeRecord.height = curRow.height;
+              }
+              rangeRecord.width += rangeWidth;
+            }
+          }
+        }
+        if (!group2.disabled && element.groupIds) {
+          this.group.recordFillInfo(element, x, y, metrics.width, curRow.height);
+        }
+        index2++;
+        if (element.type === ElementType.TABLE) {
+          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
+          for (let t = 0; t < element.trList.length; t++) {
+            const tr = element.trList[t];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              this.drawRow(ctx, {
+                elementList: td.value,
+                positionList: td.positionList,
+                rowList: td.rowList,
+                pageNo,
+                startIndex: 0,
+                innerWidth: (td.width - tdPaddingWidth) * scale,
+                zone: zone2,
+                isDrawLineBreak
+              });
+            }
+          }
+        }
+      }
+      if (curRow.isList) {
+        this.listParticle.drawListStyle(ctx, curRow, positionList[curRow.startIndex]);
+      }
+      this.textParticle.complete();
+      this.control.drawBorder(ctx);
+      this.underline.render(ctx);
+      this.strikeout.render(ctx);
+      this.group.render(ctx);
+      if (!isPrintMode) {
+        if (rangeRecord.width && rangeRecord.height) {
+          const { x, y, width, height } = rangeRecord;
+          this.range.render(ctx, x, y, width, height);
+        }
+        if (isCrossRowCol && tableRangeElement && tableRangeElement.id === tableId) {
+          const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex];
+          this.tableParticle.drawRange(ctx, tableRangeElement, x, y);
+        }
+      }
+    }
+  }
+  _drawFloat(ctx, payload) {
+    const { scale } = this.options;
+    const floatPositionList = this.position.getFloatPositionList();
+    const { imgDisplays, pageNo } = payload;
+    for (let e = 0; e < floatPositionList.length; e++) {
+      const floatPosition = floatPositionList[e];
+      const element = floatPosition.element;
+      if ((pageNo === floatPosition.pageNo || floatPosition.zone === EditorZone.HEADER || floatPosition.zone == EditorZone.FOOTER) && element.imgDisplay && imgDisplays.includes(element.imgDisplay) && element.type === ElementType.IMAGE) {
+        const imgFloatPosition = element.imgFloatPosition;
+        this.imageParticle.render(ctx, element, imgFloatPosition.x * scale, imgFloatPosition.y * scale);
+      }
+    }
+  }
+  _clearPage(pageNo) {
+    const ctx = this.ctxList[pageNo];
+    const pageDom = this.pageList[pageNo];
+    ctx.clearRect(0, 0, Math.max(pageDom.width, this.getWidth()), Math.max(pageDom.height, this.getHeight()));
+    this.blockParticle.clear();
+  }
+  _drawPage(payload) {
+    var _a, _b;
+    const { elementList, positionList, rowList, pageNo } = payload;
+    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber, pageBorder } = this.options;
+    const innerWidth = this.getInnerWidth();
+    const ctx = this.ctxList[pageNo];
+    ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
+    this._clearPage(pageNo);
+    this.background.render(ctx, pageNo);
+    if (this.mode !== EditorMode.PRINT) {
+      this.margin.render(ctx, pageNo);
+    }
+    this._drawFloat(ctx, {
+      pageNo,
+      imgDisplays: [ImageDisplay.FLOAT_BOTTOM]
+    });
+    this.control.renderHighlightList(ctx, pageNo);
+    const index2 = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
+    this.drawRow(ctx, {
+      elementList,
+      positionList,
+      rowList,
+      pageNo,
+      startIndex: index2,
+      innerWidth,
+      zone: EditorZone.MAIN
+    });
+    if (this.getIsPagingMode()) {
+      if (!header.disabled) {
+        this.header.render(ctx, pageNo);
+      }
+      if (!pageNumber.disabled) {
+        this.pageNumber.render(ctx, pageNo);
+      }
+      if (!footer.disabled) {
+        this.footer.render(ctx, pageNo);
+      }
+    }
+    this._drawFloat(ctx, {
+      pageNo,
+      imgDisplays: [ImageDisplay.FLOAT_TOP, ImageDisplay.SURROUND]
+    });
+    if (this.search.getSearchKeyword()) {
+      this.search.render(ctx, pageNo);
+    }
+    if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
+      this.waterMark.render(ctx);
+    }
+    if (this.elementList.length <= 1 && !((_b = this.elementList[0]) == null ? void 0 : _b.listId)) {
+      this.placeholder.render(ctx);
+    }
+    if (!lineNumber.disabled) {
+      this.lineNumber.render(ctx, pageNo);
+    }
+    if (!pageBorder.disabled) {
+      this.pageBorder.render(ctx);
+    }
+  }
+  _disconnectLazyRender() {
+    var _a;
+    (_a = this.lazyRenderIntersectionObserver) == null ? void 0 : _a.disconnect();
+  }
+  _lazyRender() {
+    const positionList = this.position.getOriginalMainPositionList();
+    const elementList = this.getOriginalMainElementList();
+    this._disconnectLazyRender();
+    this.lazyRenderIntersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index2 = Number(entry.target.dataset.index);
+          this._drawPage({
+            elementList,
+            positionList,
+            rowList: this.pageRowList[index2],
+            pageNo: index2
+          });
+        }
+      });
+    });
+    this.pageList.forEach((el) => {
+      this.lazyRenderIntersectionObserver.observe(el);
+    });
+  }
+  _immediateRender() {
+    const positionList = this.position.getOriginalMainPositionList();
+    const elementList = this.getOriginalMainElementList();
+    for (let i = 0; i < this.pageRowList.length; i++) {
+      this._drawPage({
+        elementList,
+        positionList,
+        rowList: this.pageRowList[i],
+        pageNo: i
+      });
+    }
+  }
+  render(payload) {
+    const { header, footer } = this.options;
+    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false, isFirstRender = false } = payload || {};
+    let { curIndex } = payload || {};
+    const innerWidth = this.getInnerWidth();
+    const isPagingMode = this.getIsPagingMode();
+    const oldPageSize = this.pageRowList.length;
+    if (isCompute) {
+      this.position.setFloatPositionList([]);
+      if (isPagingMode) {
+        if (!header.disabled) {
+          this.header.compute();
+        }
+        if (!footer.disabled) {
+          this.footer.compute();
+        }
+      }
+      const margins = this.getMargins();
+      const pageHeight = this.getHeight();
+      const extraHeight = this.header.getExtraHeight();
+      const mainOuterHeight = this.getMainOuterHeight();
+      const startX = margins[3];
+      const startY = margins[0] + extraHeight;
+      const surroundElementList = pickSurroundElementList(this.elementList);
+      this.rowList = this.computeRowList({
+        startX,
+        startY,
+        pageHeight,
+        mainOuterHeight,
+        isPagingMode,
+        innerWidth,
+        surroundElementList,
+        elementList: this.elementList
+      });
+      this.pageRowList = this._computePageList();
+      this.position.computePositionList();
+      const searchKeyword = this.search.getSearchKeyword();
+      if (searchKeyword) {
+        this.search.compute(searchKeyword);
+      }
+      this.control.computeHighlightList();
+    }
+    this.imageObserver.clearAll();
+    this.cursor.recoveryCursor();
+    for (let i = 0; i < this.pageRowList.length; i++) {
+      if (!this.pageList[i]) {
+        this._createPage(i);
+      }
+    }
+    const curPageCount = this.pageRowList.length;
+    const prePageCount = this.pageList.length;
+    if (prePageCount > curPageCount) {
+      const deleteCount = prePageCount - curPageCount;
+      this.ctxList.splice(curPageCount, deleteCount);
+      this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
+    }
+    if (isLazy && isPagingMode) {
+      this._lazyRender();
+    } else {
+      this._immediateRender();
+    }
+    if (isSetCursor) {
+      curIndex = this.setCursor(curIndex);
+    }
+    if (isSubmitHistory && !isFirstRender || curIndex !== void 0 && this.historyManager.isStackEmpty()) {
+      this.submitHistory(curIndex);
+    }
+    nextTick(() => {
+      if (isCompute && this.control.getActiveControl()) {
+        this.control.reAwakeControl();
+      }
+      if (isCompute && !this.isReadonly() && this.position.getPositionContext().isTable) {
+        this.tableTool.render();
+      }
+      if (isCompute && !this.zone.isMainActive()) {
+        this.zone.drawZoneIndicator();
+      }
+      if (oldPageSize !== this.pageRowList.length) {
+        if (this.listener.pageSizeChange) {
+          this.listener.pageSizeChange(this.pageRowList.length);
+        }
+        if (this.eventBus.isSubscribe("pageSizeChange")) {
+          this.eventBus.emit("pageSizeChange", this.pageRowList.length);
+        }
+      }
+      if ((isSubmitHistory || isSourceHistory) && !isInit) {
+        if (this.listener.contentChange) {
+          this.listener.contentChange();
+        }
+        if (this.eventBus.isSubscribe("contentChange")) {
+          this.eventBus.emit("contentChange");
+        }
+      }
+    });
+  }
+  setCursor(curIndex) {
+    var _a;
+    const positionContext = this.position.getPositionContext();
+    const positionList = this.position.getPositionList();
+    if (positionContext.isTable) {
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const elementList = this.getOriginalElementList();
+      const tablePositionList = (_a = elementList[index2].trList) == null ? void 0 : _a[trIndex].tdList[tdIndex].positionList;
+      if (curIndex === void 0 && tablePositionList) {
+        curIndex = tablePositionList.length - 1;
+      }
+      const tablePosition = tablePositionList == null ? void 0 : tablePositionList[curIndex];
+      console.log("tablePosition:::", tablePosition);
+      this.position.setCursorPosition(tablePosition || null);
+    } else {
+      this.position.setCursorPosition(curIndex !== void 0 ? positionList[curIndex] : null);
+    }
+    let isShowCursor = true;
+    if (curIndex !== void 0 && positionContext.isImage && positionContext.isDirectHit) {
+      const elementList = this.getElementList();
+      const element = elementList[curIndex];
+      if (IMAGE_ELEMENT_TYPE.includes(element.type)) {
+        isShowCursor = false;
+        const position = this.position.getCursorPosition();
+        this.previewer.updateResizer(element, position);
+      }
+    }
+    this.cursor.drawCursor({
+      isShow: isShowCursor
+    });
+    return curIndex;
+  }
+  submitHistory(curIndex) {
+    const positionContext = this.position.getPositionContext();
+    const oldElementList = getSlimCloneElementList(this.elementList);
+    const oldHeaderElementList = getSlimCloneElementList(this.header.getElementList());
+    const oldFooterElementList = getSlimCloneElementList(this.footer.getElementList());
+    const oldRange = deepClone(this.range.getRange());
+    const pageNo = this.pageNo;
+    const oldPositionContext = deepClone(positionContext);
+    const zone2 = this.zone.getZone();
+    this.historyManager.execute(() => {
+      this.zone.setZone(zone2);
+      this.setPageNo(pageNo);
+      this.position.setPositionContext(deepClone(oldPositionContext));
+      this.header.setElementList(deepClone(oldHeaderElementList));
+      this.footer.setElementList(deepClone(oldFooterElementList));
+      this.elementList = deepClone(oldElementList);
+      this.range.replaceRange(deepClone(oldRange));
+      this.render({
+        curIndex,
+        isSubmitHistory: false,
+        isSourceHistory: true
+      });
+    });
+  }
+  destroy() {
+    this.container.remove();
+    this.globalEvent.removeEvent();
+    this.scrollObserver.removeEvent();
+    this.selectionObserver.removeEvent();
+  }
+  clearSideEffect() {
+    this.getPreviewer().clearResizer();
+    this.getTableTool().dispose();
+    this.getHyperlinkParticle().clearHyperlinkPopup();
+    this.getDateParticle().clearDatePicker();
+  }
+}
+class Command {
+  constructor(adapt) {
+    this.executeMode = adapt.mode.bind(adapt);
+    this.executeCut = adapt.cut.bind(adapt);
+    this.executeCopy = adapt.copy.bind(adapt);
+    this.executePaste = adapt.paste.bind(adapt);
+    this.executeSelectAll = adapt.selectAll.bind(adapt);
+    this.executeBackspace = adapt.backspace.bind(adapt);
+    this.executeSetRange = adapt.setRange.bind(adapt);
+    this.executeReplaceRange = adapt.replaceRange.bind(adapt);
+    this.executeSetPositionContext = adapt.setPositionContext.bind(adapt);
+    this.executeForceUpdate = adapt.forceUpdate.bind(adapt);
+    this.executeBlur = adapt.blur.bind(adapt);
+    this.executeUndo = adapt.undo.bind(adapt);
+    this.executeRedo = adapt.redo.bind(adapt);
+    this.executePainter = adapt.painter.bind(adapt);
+    this.executeApplyPainterStyle = adapt.applyPainterStyle.bind(adapt);
+    this.executeFormat = adapt.format.bind(adapt);
+    this.executeFont = adapt.font.bind(adapt);
+    this.executeSize = adapt.size.bind(adapt);
+    this.executeSizeAdd = adapt.sizeAdd.bind(adapt);
+    this.executeSizeMinus = adapt.sizeMinus.bind(adapt);
+    this.executeBold = adapt.bold.bind(adapt);
+    this.executeItalic = adapt.italic.bind(adapt);
+    this.executeUnderline = adapt.underline.bind(adapt);
+    this.executeStrikeout = adapt.strikeout.bind(adapt);
+    this.executeSuperscript = adapt.superscript.bind(adapt);
+    this.executeSubscript = adapt.subscript.bind(adapt);
+    this.executeColor = adapt.color.bind(adapt);
+    this.executeHighlight = adapt.highlight.bind(adapt);
+    this.executeTitle = adapt.title.bind(adapt);
+    this.executeList = adapt.list.bind(adapt);
+    this.executeRowFlex = adapt.rowFlex.bind(adapt);
+    this.executeRowMargin = adapt.rowMargin.bind(adapt);
+    this.executeInsertTable = adapt.insertTable.bind(adapt);
+    this.executeInsertTableTopRow = adapt.insertTableTopRow.bind(adapt);
+    this.executeInsertTableBottomRow = adapt.insertTableBottomRow.bind(adapt);
+    this.executeInsertTableLeftCol = adapt.insertTableLeftCol.bind(adapt);
+    this.executeInsertTableRightCol = adapt.insertTableRightCol.bind(adapt);
+    this.executeDeleteTableRow = adapt.deleteTableRow.bind(adapt);
+    this.executeDeleteTableCol = adapt.deleteTableCol.bind(adapt);
+    this.executeDeleteTable = adapt.deleteTable.bind(adapt);
+    this.executeMergeTableCell = adapt.mergeTableCell.bind(adapt);
+    this.executeCancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt);
+    this.executeTableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt);
+    this.executeTableBorderType = adapt.tableBorderType.bind(adapt);
+    this.executeTableTdBorderType = adapt.tableTdBorderType.bind(adapt);
+    this.executeTableTdSlashType = adapt.tableTdSlashType.bind(adapt);
+    this.executeTableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
+    this.executeTableSelectAll = adapt.tableSelectAll.bind(adapt);
+    this.executeImage = adapt.image.bind(adapt);
+    this.executeHyperlink = adapt.hyperlink.bind(adapt);
+    this.executeDeleteHyperlink = adapt.deleteHyperlink.bind(adapt);
+    this.executeCancelHyperlink = adapt.cancelHyperlink.bind(adapt);
+    this.executeEditHyperlink = adapt.editHyperlink.bind(adapt);
+    this.executeSeparator = adapt.separator.bind(adapt);
+    this.executePageBreak = adapt.pageBreak.bind(adapt);
+    this.executeAddWatermark = adapt.addWatermark.bind(adapt);
+    this.executeDeleteWatermark = adapt.deleteWatermark.bind(adapt);
+    this.executeSearch = adapt.search.bind(adapt);
+    this.executeSearchNavigatePre = adapt.searchNavigatePre.bind(adapt);
+    this.executeSearchNavigateNext = adapt.searchNavigateNext.bind(adapt);
+    this.executeReplace = adapt.replace.bind(adapt);
+    this.executePrint = adapt.print.bind(adapt);
+    this.executeReplaceImageElement = adapt.replaceImageElement.bind(adapt);
+    this.executeSaveAsImageElement = adapt.saveAsImageElement.bind(adapt);
+    this.executeChangeImageDisplay = adapt.changeImageDisplay.bind(adapt);
+    this.executePageMode = adapt.pageMode.bind(adapt);
+    this.executePageScaleRecovery = adapt.pageScaleRecovery.bind(adapt);
+    this.executePageScaleMinus = adapt.pageScaleMinus.bind(adapt);
+    this.executePageScaleAdd = adapt.pageScaleAdd.bind(adapt);
+    this.executePaperSize = adapt.paperSize.bind(adapt);
+    this.executePaperDirection = adapt.paperDirection.bind(adapt);
+    this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
+    this.executeInsertElementList = adapt.insertElementList.bind(adapt);
+    this.executeAppendElementList = adapt.appendElementList.bind(adapt);
+    this.executeUpdateElementById = adapt.updateElementById.bind(adapt);
+    this.executeSetValue = adapt.setValue.bind(adapt);
+    this.executeRemoveControl = adapt.removeControl.bind(adapt);
+    this.executeSetLocale = adapt.setLocale.bind(adapt);
+    this.executeLocationCatalog = adapt.locationCatalog.bind(adapt);
+    this.executeWordTool = adapt.wordTool.bind(adapt);
+    this.executeSetHTML = adapt.setHTML.bind(adapt);
+    this.executeSetGroup = adapt.setGroup.bind(adapt);
+    this.executeDeleteGroup = adapt.deleteGroup.bind(adapt);
+    this.executeLocationGroup = adapt.locationGroup.bind(adapt);
+    this.executeSetZone = adapt.setZone.bind(adapt);
+    this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
+    this.executeInsertTitle = adapt.insertTitle.bind(adapt);
+    this.executeFocus = adapt.focus.bind(adapt);
+    this.getImage = adapt.getImage.bind(adapt);
+    this.getOptions = adapt.getOptions.bind(adapt);
+    this.getValue = adapt.getValue.bind(adapt);
+    this.getHTML = adapt.getHTML.bind(adapt);
+    this.getText = adapt.getText.bind(adapt);
+    this.getWordCount = adapt.getWordCount.bind(adapt);
+    this.getCursorPosition = adapt.getCursorPosition.bind(adapt);
+    this.getRange = adapt.getRange.bind(adapt);
+    this.getRangeText = adapt.getRangeText.bind(adapt);
+    this.getRangeContext = adapt.getRangeContext.bind(adapt);
+    this.getRangeRow = adapt.getRangeRow.bind(adapt);
+    this.getRangeParagraph = adapt.getRangeParagraph.bind(adapt);
+    this.getKeywordRangeList = adapt.getKeywordRangeList.bind(adapt);
+    this.getCatalog = adapt.getCatalog.bind(adapt);
+    this.getPaperMargin = adapt.getPaperMargin.bind(adapt);
+    this.getSearchNavigateInfo = adapt.getSearchNavigateInfo.bind(adapt);
+    this.getLocale = adapt.getLocale.bind(adapt);
+    this.getGroupIds = adapt.getGroupIds.bind(adapt);
+    this.getContainer = adapt.getContainer.bind(adapt);
+    this.getTitleValue = adapt.getTitleValue.bind(adapt);
+    this.getPositionContextByEvent = adapt.getPositionContextByEvent.bind(adapt);
+    this.executeSetControlValue = adapt.setControlValue.bind(adapt);
+    this.executeSetControlExtension = adapt.setControlExtension.bind(adapt);
+    this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
+    this.executeSetControlHighlight = adapt.setControlHighlight.bind(adapt);
+    this.getControlValue = adapt.getControlValue.bind(adapt);
+    this.getControlList = adapt.getControlList.bind(adapt);
+    this.executeLocationControl = adapt.locationControl.bind(adapt);
+    this.executeInsertControl = adapt.insertControl.bind(adapt);
+  }
+}
+function convertPxToPaperSize(width, height) {
+  if (width === 1125 && height === 1593) {
+    return {
+      size: "a3",
+      width: "297mm",
+      height: "420mm"
+    };
+  }
+  if (width === 794 && height === 1123) {
+    return {
+      size: "a4",
+      width: "210mm",
+      height: "297mm"
+    };
+  }
+  if (width === 565 && height === 796) {
+    return {
+      size: "a5",
+      width: "148mm",
+      height: "210mm"
+    };
+  }
+  return {
+    size: "",
+    width: `${width}px`,
+    height: `${height}px`
+  };
+}
+function printImageBase64(base64List, options) {
+  const { width, height, direction = PaperDirection.VERTICAL } = options;
+  const iframe = document.createElement("iframe");
+  iframe.style.visibility = "hidden";
+  iframe.style.position = "absolute";
+  iframe.style.left = "0";
+  iframe.style.top = "0";
+  iframe.style.width = "0";
+  iframe.style.height = "0";
+  iframe.style.border = "none";
+  document.body.append(iframe);
+  const contentWindow = iframe.contentWindow;
+  const doc = contentWindow.document;
+  doc.open();
+  const container = document.createElement("div");
+  const paperSize = convertPxToPaperSize(width, height);
+  base64List.forEach((base64) => {
+    const image = document.createElement("img");
+    image.style.width = direction === PaperDirection.HORIZONTAL ? paperSize.height : paperSize.width;
+    image.style.height = direction === PaperDirection.HORIZONTAL ? paperSize.width : paperSize.height;
+    image.src = base64;
+    container.append(image);
+  });
+  const style = document.createElement("style");
+  const stylesheet = `
+  * {
+    margin: 0;
+    padding: 0;
+  }
+  @page {
+    margin: 0;
+    size: ${paperSize.size} ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
+  }`;
+  style.append(document.createTextNode(stylesheet));
+  setTimeout(() => {
+    doc.write(`${style.outerHTML}${container.innerHTML}`);
+    contentWindow.print();
+    doc.close();
+    window.addEventListener("mouseover", () => {
+      iframe == null ? void 0 : iframe.remove();
+    }, {
+      once: true
+    });
+  });
+}
+class CommandAdapt {
+  constructor(draw) {
+    this.draw = draw;
+    this.range = draw.getRange();
+    this.position = draw.getPosition();
+    this.historyManager = draw.getHistoryManager();
+    this.canvasEvent = draw.getCanvasEvent();
+    this.options = draw.getOptions();
+    this.control = draw.getControl();
+    this.workerManager = draw.getWorkerManager();
+    this.searchManager = draw.getSearch();
+    this.i18n = draw.getI18n();
+    this.zone = draw.getZone();
+    this.tableOperate = draw.getTableOperate();
+  }
+  mode(payload) {
+    this.draw.setMode(payload);
+  }
+  cut() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    this.canvasEvent.cut();
+  }
+  copy() {
+    this.canvasEvent.copy();
+  }
+  paste(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    pasteByApi(this.canvasEvent, payload);
+  }
+  selectAll() {
+    this.canvasEvent.selectAll();
+  }
+  backspace() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const elementList = this.draw.getElementList();
+    const { startIndex, endIndex } = this.range.getRange();
+    const isCollapsed = startIndex === endIndex;
+    if (isCollapsed && elementList[startIndex].value === ZERO && startIndex === 0) {
+      return;
+    }
+    if (!isCollapsed) {
+      this.draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      this.draw.spliceElementList(elementList, startIndex, 1);
+    }
+    const curIndex = isCollapsed ? startIndex - 1 : startIndex;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({ curIndex });
+  }
+  setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
+    if (startIndex < 0 || endIndex < 0 || endIndex < startIndex)
+      return;
+    this.range.setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex);
+    const isCollapsed = startIndex === endIndex;
+    this.draw.render({
+      curIndex: isCollapsed ? startIndex : void 0,
+      isCompute: false,
+      isSubmitHistory: false,
+      isSetCursor: isCollapsed
+    });
+  }
+  replaceRange(range) {
+    this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
+  }
+  setPositionContext(range) {
+    const { tableId, startTrIndex, startTdIndex } = range;
+    const elementList = this.draw.getOriginalElementList();
+    if (tableId) {
+      const tableElementIndex = elementList.findIndex((el) => el.id === tableId);
+      if (!~tableElementIndex)
+        return;
+      const tableElement = elementList[tableElementIndex];
+      const tr = tableElement.trList[startTrIndex];
+      const td = tr.tdList[startTdIndex];
+      this.position.setPositionContext({
+        isTable: true,
+        index: tableElementIndex,
+        trIndex: startTrIndex,
+        tdIndex: startTdIndex,
+        tdId: td.id,
+        trId: tr.id,
+        tableId
+      });
+    } else {
+      this.position.setPositionContext({
+        isTable: false
+      });
+    }
+  }
+  forceUpdate(options) {
+    const { isSubmitHistory = false } = options || {};
+    this.range.clearRange();
+    this.draw.render({
+      isSubmitHistory,
+      isSetCursor: false
+    });
+  }
+  blur() {
+    this.range.clearRange();
+    this.draw.getCursor().recoveryCursor();
+  }
+  undo() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.historyManager.undo();
+  }
+  redo() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.historyManager.redo();
+  }
+  painter(options) {
+    if (!options.isDblclick && this.draw.getPainterStyle()) {
+      this.canvasEvent.clearPainterStyle();
+      return;
+    }
+    const selection = this.range.getSelection();
+    if (!selection)
+      return;
+    const painterStyle = {};
+    selection.forEach((s) => {
+      const painterStyleKeys = EDITOR_ELEMENT_STYLE_ATTR;
+      painterStyleKeys.forEach((p) => {
+        const key = p;
+        if (painterStyle[key] === void 0) {
+          painterStyle[key] = s[key];
+        }
+      });
+    });
+    this.draw.setPainterStyle(painterStyle, options);
+  }
+  applyPainterStyle() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    this.canvasEvent.applyPainterStyle();
+  }
+  format() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    let renderOption = {};
+    let changeElementList = [];
+    if (selection == null ? void 0 : selection.length) {
+      changeElementList = selection;
+      renderOption = { isSetCursor: false };
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        changeElementList.push(enterElement);
+        renderOption = { curIndex: endIndex };
+      }
+    }
+    if (!changeElementList.length)
+      return;
+    changeElementList.forEach((el) => {
+      EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+        delete el[attr];
+      });
+    });
+    this.draw.render(renderOption);
+  }
+  font(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      selection.forEach((el) => {
+        el.font = payload;
+      });
+      this.draw.render({ isSetCursor: false });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        enterElement.font = payload;
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  size(payload) {
+    const { minSize, maxSize, defaultSize } = this.options;
+    if (payload < minSize || payload > maxSize)
+      return;
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    let renderOption = {};
+    let changeElementList = [];
+    const selection = this.range.getTextLikeSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      changeElementList = selection;
+      renderOption = { isSetCursor: false };
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        changeElementList.push(enterElement);
+        renderOption = { curIndex: endIndex };
+      }
+    }
+    if (!changeElementList.length)
+      return;
+    let isExistUpdate = false;
+    changeElementList.forEach((el) => {
+      if (!el.size && payload === defaultSize || el.size && el.size === payload) {
+        return;
+      }
+      el.size = payload;
+      isExistUpdate = true;
+    });
+    if (isExistUpdate) {
+      this.draw.render(renderOption);
+    }
+  }
+  sizeAdd() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getTextLikeSelectionElementList();
+    let renderOption = {};
+    let changeElementList = [];
+    if (selection == null ? void 0 : selection.length) {
+      changeElementList = selection;
+      renderOption = { isSetCursor: false };
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        changeElementList.push(enterElement);
+        renderOption = { curIndex: endIndex };
+      }
+    }
+    if (!changeElementList.length)
+      return;
+    const { defaultSize, maxSize } = this.options;
+    let isExistUpdate = false;
+    changeElementList.forEach((el) => {
+      if (!el.size) {
+        el.size = defaultSize;
+      }
+      if (el.size >= maxSize)
+        return;
+      if (el.size + 2 > maxSize) {
+        el.size = maxSize;
+      } else {
+        el.size += 2;
+      }
+      isExistUpdate = true;
+    });
+    if (isExistUpdate) {
+      this.draw.render(renderOption);
+    }
+  }
+  sizeMinus() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getTextLikeSelectionElementList();
+    let renderOption = {};
+    let changeElementList = [];
+    if (selection == null ? void 0 : selection.length) {
+      changeElementList = selection;
+      renderOption = { isSetCursor: false };
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        changeElementList.push(enterElement);
+        renderOption = { curIndex: endIndex };
+      }
+    }
+    if (!changeElementList.length)
+      return;
+    const { defaultSize, minSize } = this.options;
+    let isExistUpdate = false;
+    changeElementList.forEach((el) => {
+      if (!el.size) {
+        el.size = defaultSize;
+      }
+      if (el.size <= minSize)
+        return;
+      if (el.size - 2 < minSize) {
+        el.size = minSize;
+      } else {
+        el.size -= 2;
+      }
+      isExistUpdate = true;
+    });
+    if (isExistUpdate) {
+      this.draw.render(renderOption);
+    }
+  }
+  bold() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      const noBoldIndex = selection.findIndex((s) => !s.bold);
+      selection.forEach((el) => {
+        el.bold = !!~noBoldIndex;
+      });
+      this.draw.render({ isSetCursor: false });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        enterElement.bold = !enterElement.bold;
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  italic() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      const noItalicIndex = selection.findIndex((s) => !s.italic);
+      selection.forEach((el) => {
+        el.italic = !!~noItalicIndex;
+      });
+      this.draw.render({ isSetCursor: false });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        enterElement.italic = !enterElement.italic;
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  underline(textDecoration) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      const isSetUnderline = selection.some((s) => !s.underline || !textDecoration && s.textDecoration || textDecoration && !s.textDecoration || textDecoration && s.textDecoration && !isObjectEqual(s.textDecoration, textDecoration));
+      selection.forEach((el) => {
+        el.underline = isSetUnderline;
+        if (isSetUnderline && textDecoration) {
+          el.textDecoration = textDecoration;
+        } else {
+          delete el.textDecoration;
+        }
+      });
+      this.draw.render({
+        isSetCursor: false,
+        isCompute: false
+      });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        enterElement.underline = !enterElement.underline;
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  strikeout() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      const noStrikeoutIndex = selection.findIndex((s) => !s.strikeout);
+      selection.forEach((el) => {
+        el.strikeout = !!~noStrikeoutIndex;
+      });
+      this.draw.render({
+        isSetCursor: false,
+        isCompute: false
+      });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        enterElement.strikeout = !enterElement.strikeout;
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  superscript() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (!selection)
+      return;
+    const superscriptIndex = selection.findIndex((s) => s.type === ElementType.SUPERSCRIPT);
+    selection.forEach((el) => {
+      if (~superscriptIndex) {
+        if (el.type === ElementType.SUPERSCRIPT) {
+          el.type = ElementType.TEXT;
+          delete el.actualSize;
+        }
+      } else {
+        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUBSCRIPT) {
+          el.type = ElementType.SUPERSCRIPT;
+        }
+      }
+    });
+    this.draw.render({ isSetCursor: false });
+  }
+  subscript() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (!selection)
+      return;
+    const subscriptIndex = selection.findIndex((s) => s.type === ElementType.SUBSCRIPT);
+    selection.forEach((el) => {
+      if (~subscriptIndex) {
+        if (el.type === ElementType.SUBSCRIPT) {
+          el.type = ElementType.TEXT;
+          delete el.actualSize;
+        }
+      } else {
+        if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUPERSCRIPT) {
+          el.type = ElementType.SUBSCRIPT;
+        }
+      }
+    });
+    this.draw.render({ isSetCursor: false });
+  }
+  color(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      selection.forEach((el) => {
+        if (payload) {
+          el.color = payload;
+        } else {
+          delete el.color;
+        }
+      });
+      this.draw.render({
+        isSetCursor: false,
+        isCompute: false
+      });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        if (payload) {
+          enterElement.color = payload;
+        } else {
+          delete enterElement.color;
+        }
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  highlight(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const selection = this.range.getSelectionElementList();
+    if (selection == null ? void 0 : selection.length) {
+      selection.forEach((el) => {
+        if (payload) {
+          el.highlight = payload;
+        } else {
+          delete el.highlight;
+        }
+      });
+      this.draw.render({
+        isSetCursor: false,
+        isCompute: false
+      });
+    } else {
+      const { endIndex } = this.range.getRange();
+      const elementList = this.draw.getElementList();
+      const enterElement = elementList[endIndex];
+      if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
+        if (payload) {
+          enterElement.highlight = payload;
+        } else {
+          delete enterElement.highlight;
+        }
+        this.draw.render({ curIndex: endIndex, isCompute: false });
+      }
+    }
+  }
+  title(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const elementList = this.draw.getElementList();
+    const changeElementList = startIndex === endIndex ? this.range.getRangeParagraphElementList() : elementList.slice(startIndex + 1, endIndex + 1);
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const titleId = getUUID();
+    const titleOptions = this.draw.getOptions().title;
+    changeElementList.forEach((el) => {
+      if (!el.type && el.value === ZERO)
+        return;
+      if (payload) {
+        el.level = payload;
+        el.titleId = titleId;
+        if (isTextLikeElement(el)) {
+          el.size = titleOptions[titleSizeMapping[payload]];
+          el.bold = true;
+        }
+      } else {
+        if (el.titleId) {
+          delete el.titleId;
+          delete el.title;
+          delete el.level;
+          delete el.size;
+          delete el.bold;
+        }
+      }
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  list(listType, listStyle) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.getListParticle().setList(listType, listStyle);
+  }
+  rowFlex(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const rowElementList = this.range.getRangeRowElementList();
+    if (!rowElementList)
+      return;
+    rowElementList.forEach((element) => {
+      element.rowFlex = payload;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  rowMargin(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const rowElementList = this.range.getRangeRowElementList();
+    if (!rowElementList)
+      return;
+    rowElementList.forEach((element) => {
+      element.rowMargin = payload;
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
+  insertTable(row, col) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl)
+      return;
+    this.tableOperate.insertTable(row, col);
+  }
+  insertTableTopRow() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.insertTableTopRow();
+  }
+  insertTableBottomRow() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.insertTableBottomRow();
+  }
+  insertTableLeftCol() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.insertTableLeftCol();
+  }
+  insertTableRightCol() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.insertTableRightCol();
+  }
+  deleteTableRow() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.deleteTableRow();
+  }
+  deleteTableCol() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.deleteTableCol();
+  }
+  deleteTable() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.deleteTable();
+  }
+  mergeTableCell() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.mergeTableCell();
+  }
+  cancelMergeTableCell() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.cancelMergeTableCell();
+  }
+  tableTdVerticalAlign(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.tableTdVerticalAlign(payload);
+  }
+  tableBorderType(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.tableBorderType(payload);
+  }
+  tableTdBorderType(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.tableTdBorderType(payload);
+  }
+  tableTdSlashType(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.tableTdSlashType(payload);
+  }
+  tableTdBackgroundColor(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.tableTdBackgroundColor(payload);
+  }
+  tableSelectAll() {
+    this.tableOperate.tableSelectAll();
+  }
+  hyperlink(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const elementList = this.draw.getElementList();
+    const { valueList, url } = payload;
+    const hyperlinkId = getUUID();
+    const newElementList = valueList == null ? void 0 : valueList.map((v) => ({
+      url,
+      hyperlinkId,
+      value: v.value,
+      type: ElementType.HYPERLINK
+    }));
+    if (!newElementList)
+      return;
+    const start = startIndex + 1;
+    formatElementContext(elementList, newElementList, startIndex, {
+      editorOptions: this.options
+    });
+    this.draw.spliceElementList(elementList, start, startIndex === endIndex ? 0 : endIndex - startIndex, ...newElementList);
+    const curIndex = start + newElementList.length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({ curIndex });
+  }
+  getHyperlinkRange() {
+    let leftIndex = -1;
+    let rightIndex = -1;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return null;
+    const elementList = this.draw.getElementList();
+    const startElement = elementList[startIndex];
+    if (startElement.type !== ElementType.HYPERLINK)
+      return null;
+    let preIndex = startIndex;
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex];
+      if (preElement.hyperlinkId !== startElement.hyperlinkId) {
+        leftIndex = preIndex + 1;
+        break;
+      }
+      preIndex--;
+    }
+    let nextIndex = startIndex + 1;
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex];
+      if (nextElement.hyperlinkId !== startElement.hyperlinkId) {
+        rightIndex = nextIndex - 1;
+        break;
+      }
+      nextIndex++;
+    }
+    if (nextIndex === elementList.length) {
+      rightIndex = nextIndex - 1;
+    }
+    if (!~leftIndex || !~rightIndex)
+      return null;
+    return [leftIndex, rightIndex];
+  }
+  deleteHyperlink() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const hyperRange = this.getHyperlinkRange();
+    if (!hyperRange)
+      return;
+    const elementList = this.draw.getElementList();
+    const [leftIndex, rightIndex] = hyperRange;
+    this.draw.spliceElementList(elementList, leftIndex, rightIndex - leftIndex + 1);
+    this.draw.getHyperlinkParticle().clearHyperlinkPopup();
+    const newIndex = leftIndex - 1;
+    this.range.setRange(newIndex, newIndex);
+    this.draw.render({
+      curIndex: newIndex
+    });
+  }
+  cancelHyperlink() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const hyperRange = this.getHyperlinkRange();
+    if (!hyperRange)
+      return;
+    const elementList = this.draw.getElementList();
+    const [leftIndex, rightIndex] = hyperRange;
+    for (let i = leftIndex; i <= rightIndex; i++) {
+      const element = elementList[i];
+      delete element.type;
+      delete element.url;
+      delete element.hyperlinkId;
+      delete element.underline;
+    }
+    this.draw.getHyperlinkParticle().clearHyperlinkPopup();
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false
+    });
+  }
+  editHyperlink(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const hyperRange = this.getHyperlinkRange();
+    if (!hyperRange)
+      return;
+    const elementList = this.draw.getElementList();
+    const [leftIndex, rightIndex] = hyperRange;
+    for (let i = leftIndex; i <= rightIndex; i++) {
+      const element = elementList[i];
+      element.url = payload;
+    }
+    this.draw.getHyperlinkParticle().clearHyperlinkPopup();
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false
+    });
+  }
+  separator(payload, lineWidth, color) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const elementList = this.draw.getElementList();
+    let curIndex = -1;
+    const endElement = elementList[endIndex + 1];
+    if (endElement && endElement.type === ElementType.SEPARATOR) {
+      if (endElement.dashArray && endElement.dashArray.join() === payload.join() && endElement.color === color && endElement.lineWidth === lineWidth) {
+        return;
+      }
+      curIndex = endIndex;
+      endElement.dashArray = payload;
+      endElement.color = color;
+      endElement.lineWidth = lineWidth;
+    } else {
+      const newElement = {
+        value: WRAP,
+        type: ElementType.SEPARATOR,
+        dashArray: payload,
+        lineWidth,
+        color
+      };
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
+      if (startIndex !== 0 && elementList[startIndex].value === ZERO) {
+        this.draw.spliceElementList(elementList, startIndex, 1, newElement);
+        curIndex = startIndex - 1;
+      } else {
+        this.draw.spliceElementList(elementList, startIndex + 1, 0, newElement);
+        curIndex = startIndex;
+      }
+    }
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({ curIndex });
+  }
+  pageBreak() {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl)
+      return;
+    this.insertElementList([
+      {
+        type: ElementType.PAGE_BREAK,
+        value: WRAP
+      }
+    ]);
+  }
+  addWatermark(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const options = this.draw.getOptions();
+    const { color, size, opacity, font } = defaultWatermarkOption;
+    options.watermark.data = payload.data;
+    options.watermark.color = payload.color || color;
+    options.watermark.size = payload.size || size;
+    options.watermark.opacity = payload.opacity || opacity;
+    options.watermark.font = payload.font || font;
+    this.draw.render({
+      isSetCursor: false,
+      isSubmitHistory: false,
+      isCompute: false
+    });
+  }
+  deleteWatermark() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const options = this.draw.getOptions();
+    if (options.watermark && options.watermark.data) {
+      options.watermark = { ...defaultWatermarkOption };
+      this.draw.render({
+        isSetCursor: false,
+        isSubmitHistory: false,
+        isCompute: false
+      });
+    }
+  }
+  image(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const { value, width, height, imgDisplay } = payload;
+    this.insertElementList([
+      {
+        value,
+        width,
+        height,
+        id: getUUID(),
+        type: ElementType.IMAGE,
+        imgDisplay
+      }
+    ]);
+  }
+  search(payload) {
+    this.searchManager.setSearchKeyword(payload);
+    this.draw.render({
+      isSetCursor: false,
+      isSubmitHistory: false
+    });
+  }
+  searchNavigatePre() {
+    const index2 = this.searchManager.searchNavigatePre();
+    if (index2 === null)
+      return;
+    this.draw.render({
+      isSetCursor: false,
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
+    });
+  }
+  searchNavigateNext() {
+    const index2 = this.searchManager.searchNavigateNext();
+    if (index2 === null)
+      return;
+    this.draw.render({
+      isSetCursor: false,
+      isSubmitHistory: false,
+      isCompute: false,
+      isLazy: false
+    });
+  }
+  getSearchNavigateInfo() {
+    return this.searchManager.getSearchNavigateInfo();
+  }
+  replace(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    if (!payload || new RegExp(`${ZERO}`, "g").test(payload))
+      return;
+    const matchList = this.draw.getSearch().getSearchMatchList();
+    if (!matchList.length)
+      return;
+    let pageDiffCount = 0;
+    let tableDiffCount = 0;
+    let curGroupId = "";
+    let curTdId = "";
+    let firstMatchIndex = -1;
+    const elementList = this.draw.getOriginalElementList();
+    for (let m = 0; m < matchList.length; m++) {
+      const match = matchList[m];
+      if (match.type === EditorContext.TABLE) {
+        const { tableIndex, trIndex, tdIndex, index: index2, tdId } = match;
+        if (curTdId && tdId !== curTdId) {
+          tableDiffCount = 0;
+        }
+        curTdId = tdId;
+        const curTableIndex = tableIndex + pageDiffCount;
+        const tableElementList = elementList[curTableIndex].trList[trIndex].tdList[tdIndex].value;
+        const curIndex = index2 + tableDiffCount;
+        const tableElement = tableElementList[curIndex];
+        if (curGroupId === match.groupId) {
+          this.draw.spliceElementList(tableElementList, curIndex, 1);
+          tableDiffCount--;
+          continue;
+        }
+        for (let p = 0; p < payload.length; p++) {
+          const value = payload[p];
+          if (p === 0) {
+            tableElement.value = value;
+          } else {
+            this.draw.spliceElementList(tableElementList, curIndex + p, 0, {
+              ...tableElement,
+              value
+            });
+            tableDiffCount++;
+          }
+        }
+      } else {
+        const curIndex = match.index + pageDiffCount;
+        const element = elementList[curIndex];
+        if (element.type === ElementType.CONTROL && element.controlComponent !== ControlComponent.VALUE) {
+          continue;
+        }
+        if (!~firstMatchIndex) {
+          firstMatchIndex = m;
+        }
+        if (curGroupId === match.groupId) {
+          this.draw.spliceElementList(elementList, curIndex, 1);
+          pageDiffCount--;
+          continue;
+        }
+        for (let p = 0; p < payload.length; p++) {
+          const value = payload[p];
+          if (p === 0) {
+            element.value = value;
+          } else {
+            this.draw.spliceElementList(elementList, curIndex + p, 0, {
+              ...element,
+              value
+            });
+            pageDiffCount++;
+          }
+        }
+      }
+      curGroupId = match.groupId;
+    }
+    if (!~firstMatchIndex)
+      return;
+    const firstMatch = matchList[firstMatchIndex];
+    const firstIndex = firstMatch.index + (payload.length - 1);
+    if (firstMatch.type === EditorContext.TABLE) {
+      const { tableIndex, trIndex, tdIndex, index: index2 } = firstMatch;
+      const element = elementList[tableIndex].trList[trIndex].tdList[tdIndex].value[index2];
+      this.position.setPositionContext({
+        isTable: true,
+        index: tableIndex,
+        trIndex,
+        tdIndex,
+        tdId: element.tdId,
+        trId: element.trId,
+        tableId: element.tableId
+      });
+    } else {
+      this.position.setPositionContext({
+        isTable: false
+      });
+    }
+    this.range.setRange(firstIndex, firstIndex);
+    this.draw.render({
+      curIndex: firstIndex
+    });
+  }
+  async print() {
+    const { scale, printPixelRatio, paperDirection, width, height } = this.options;
+    if (scale !== 1) {
+      this.draw.setPageScale(1);
+    }
+    const base64List = await this.draw.getDataURL({
+      pixelRatio: printPixelRatio,
+      mode: EditorMode.PRINT
+    });
+    printImageBase64(base64List, {
+      width,
+      height,
+      direction: paperDirection
+    });
+    if (scale !== 1) {
+      this.draw.setPageScale(scale);
+    }
+  }
+  replaceImageElement(payload) {
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const element = elementList[startIndex];
+    if (!element || element.type !== ElementType.IMAGE)
+      return;
+    element.id = getUUID();
+    element.value = payload;
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
+  saveAsImageElement() {
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const element = elementList[startIndex];
+    if (!element || element.type !== ElementType.IMAGE)
+      return;
+    downloadFile(element.value, `${element.id}.png`);
+  }
+  changeImageDisplay(element, display) {
+    if (element.imgDisplay === display)
+      return;
+    element.imgDisplay = display;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (display === ImageDisplay.SURROUND || display === ImageDisplay.FLOAT_TOP || display === ImageDisplay.FLOAT_BOTTOM) {
+      const positionList = this.position.getPositionList();
+      const { pageNo, coordinate: { leftTop } } = positionList[startIndex];
+      element.imgFloatPosition = {
+        pageNo,
+        x: leftTop[0],
+        y: leftTop[1]
+      };
+    } else {
+      delete element.imgFloatPosition;
+    }
+    this.draw.getPreviewer().clearResizer();
+    this.draw.render({
+      isSetCursor: true,
+      curIndex: endIndex
+    });
+  }
+  getImage(payload) {
+    return this.draw.getDataURL(payload);
+  }
+  getOptions() {
+    return this.options;
+  }
+  getValue(options) {
+    return this.draw.getValue(options);
+  }
+  getHTML() {
+    const options = this.options;
+    const headerElementList = this.draw.getHeaderElementList();
+    const mainElementList = this.draw.getOriginalMainElementList();
+    const footerElementList = this.draw.getFooterElementList();
+    return {
+      header: createDomFromElementList(headerElementList, options).innerHTML,
+      main: createDomFromElementList(mainElementList, options).innerHTML,
+      footer: createDomFromElementList(footerElementList, options).innerHTML
+    };
+  }
+  getText() {
+    const headerElementList = this.draw.getHeaderElementList();
+    const mainElementList = this.draw.getOriginalMainElementList();
+    const footerElementList = this.draw.getFooterElementList();
+    return {
+      header: getTextFromElementList(headerElementList),
+      main: getTextFromElementList(mainElementList),
+      footer: getTextFromElementList(footerElementList)
+    };
+  }
+  getWordCount() {
+    return this.workerManager.getWordCount();
+  }
+  getCursorPosition() {
+    return this.position.getCursorPosition();
+  }
+  getRange() {
+    return deepClone(this.range.getRange());
+  }
+  getRangeText() {
+    return this.range.toString();
+  }
+  getRangeContext() {
+    const range = this.range.getRange();
+    const { startIndex, endIndex } = range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    const isCollapsed = startIndex === endIndex;
+    const selectionText = this.range.toString();
+    const selectionElementList = zipElementList(this.range.getSelectionElementList() || []);
+    const elementList = this.draw.getElementList();
+    const startElement = pickElementAttr(elementList[isCollapsed ? startIndex : startIndex + 1], {
+      extraPickAttrs: ["id"]
+    });
+    const endElement = pickElementAttr(elementList[endIndex], {
+      extraPickAttrs: ["id"]
+    });
+    const positionList = this.position.getPositionList();
+    const startPageNo = positionList[startIndex].pageNo;
+    const endPageNo = positionList[endIndex].pageNo;
+    const rangeRects = [];
+    const height = this.draw.getOriginalHeight();
+    const pageGap = this.draw.getOriginalPageGap();
+    const selectionPositionList = this.position.getSelectionPositionList();
+    if (selectionPositionList) {
+      let currentRowNo = null;
+      let currentX = 0;
+      let rangeRect = null;
+      for (let p = 0; p < selectionPositionList.length; p++) {
+        const { rowNo, pageNo, coordinate: { leftTop, rightTop }, lineHeight } = selectionPositionList[p];
+        if (currentRowNo === null || currentRowNo !== rowNo) {
+          if (rangeRect) {
+            rangeRects.push(rangeRect);
+          }
+          rangeRect = {
+            x: leftTop[0],
+            y: leftTop[1] + pageNo * (height + pageGap),
+            width: rightTop[0] - leftTop[0],
+            height: lineHeight
+          };
+          currentRowNo = rowNo;
+          currentX = leftTop[0];
+        } else {
+          rangeRect.width = rightTop[0] - currentX;
+        }
+        if (p === selectionPositionList.length - 1 && rangeRect) {
+          rangeRects.push(rangeRect);
+        }
+      }
+    } else {
+      const positionList2 = this.position.getPositionList();
+      const position = positionList2[endIndex];
+      const { coordinate: { rightTop }, pageNo, lineHeight } = position;
+      rangeRects.push({
+        x: rightTop[0],
+        y: rightTop[1] + pageNo * (height + pageGap),
+        width: 0,
+        height: lineHeight
+      });
+    }
+    const zone2 = this.draw.getZone().getZone();
+    const { isTable, trIndex, tdIndex, index: index2 } = this.position.getPositionContext();
+    let tableElement = null;
+    if (isTable) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const originTableElement = originalElementList[index2] || null;
+      if (originTableElement) {
+        tableElement = zipElementList([originTableElement])[0];
+      }
+    }
+    let titleId = null;
+    let titleStartPageNo = null;
+    let start = startIndex - 1;
+    while (start > 0) {
+      const curElement = elementList[start];
+      const preElement = elementList[start - 1];
+      if (curElement.titleId && curElement.titleId !== (preElement == null ? void 0 : preElement.titleId)) {
+        titleId = curElement.titleId;
+        titleStartPageNo = positionList[start].pageNo;
+        break;
+      }
+      start--;
+    }
+    return deepClone({
+      isCollapsed,
+      startElement,
+      endElement,
+      startPageNo,
+      endPageNo,
+      rangeRects,
+      zone: zone2,
+      isTable,
+      trIndex: trIndex != null ? trIndex : null,
+      tdIndex: tdIndex != null ? tdIndex : null,
+      tableElement,
+      selectionText,
+      selectionElementList,
+      titleId,
+      titleStartPageNo
+    });
+  }
+  getRangeRow() {
+    const rowElementList = this.range.getRangeRowElementList();
+    return rowElementList ? zipElementList(rowElementList) : null;
+  }
+  getRangeParagraph() {
+    const paragraphElementList = this.range.getRangeParagraphElementList();
+    return paragraphElementList ? zipElementList(paragraphElementList) : null;
+  }
+  getKeywordRangeList(payload) {
+    return this.range.getKeywordRangeList(payload);
+  }
+  pageMode(payload) {
+    this.draw.setPageMode(payload);
+  }
+  pageScaleRecovery() {
+    const { scale } = this.options;
+    if (scale !== 1) {
+      this.draw.setPageScale(1);
+    }
+  }
+  pageScaleMinus() {
+    const { scale } = this.options;
+    const nextScale = scale * 10 - 1;
+    if (nextScale >= 5) {
+      this.draw.setPageScale(nextScale / 10);
+    }
+  }
+  pageScaleAdd() {
+    const { scale } = this.options;
+    const nextScale = scale * 10 + 1;
+    if (nextScale <= 30) {
+      this.draw.setPageScale(nextScale / 10);
+    }
+  }
+  paperSize(width, height) {
+    this.draw.setPaperSize(width, height);
+  }
+  paperDirection(payload) {
+    this.draw.setPaperDirection(payload);
+  }
+  getPaperMargin() {
+    return this.options.margins;
+  }
+  setPaperMargin(payload) {
+    return this.draw.setPaperMargin(payload);
+  }
+  insertElementList(payload) {
+    if (!payload.length)
+      return;
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const cloneElementList = deepClone(payload);
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    formatElementContext(elementList, cloneElementList, startIndex, {
+      isBreakWhenWrap: true,
+      editorOptions: this.options
+    });
+    this.draw.insertElementList(cloneElementList);
+  }
+  appendElementList(elementList, options) {
+    if (!elementList.length)
+      return;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.appendElementList(deepClone(elementList), options);
+  }
+  updateElementById(payload) {
+    function getElementIndexById(elementList) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.id === payload.id) {
+          return e;
+        }
+      }
+      return -1;
+    }
+    const getElementListFnList = [
+      this.draw.getOriginalMainElementList,
+      this.draw.getHeaderElementList,
+      this.draw.getFooterElementList
+    ];
+    for (const getElementList of getElementListFnList) {
+      const elementList = getElementList.call(this.draw);
+      const elementIndex = getElementIndexById(elementList);
+      if (~elementIndex) {
+        elementList[elementIndex] = {
+          ...elementList[elementIndex],
+          ...payload.properties
+        };
+        formatElementList(zipElementList([elementList[elementIndex]]), {
+          isHandleFirstElement: false,
+          editorOptions: this.options
+        });
+        this.draw.render({
+          isSetCursor: false
+        });
+        break;
+      }
+    }
+  }
+  setValue(payload, options) {
+    this.draw.setValue(payload, options);
+  }
+  removeControl() {
+    const { startIndex, endIndex } = this.range.getRange();
+    if (startIndex !== endIndex)
+      return;
+    const elementList = this.draw.getElementList();
+    const element = elementList[startIndex];
+    if (!element.controlId)
+      return;
+    const control = this.draw.getControl();
+    const newIndex = control.removeControl(startIndex);
+    if (newIndex === null)
+      return;
+    this.range.setRange(newIndex, newIndex);
+    this.draw.render({
+      curIndex: newIndex
+    });
+  }
+  setLocale(payload) {
+    this.i18n.setLocale(payload);
+  }
+  getLocale() {
+    return this.i18n.getLocale();
+  }
+  getCatalog() {
+    return this.workerManager.getCatalog();
+  }
+  locationCatalog(titleId) {
+    var _a;
+    const elementList = this.draw.getMainElementList();
+    let newIndex = -1;
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.titleId === titleId && ((_a = elementList[e + 1]) == null ? void 0 : _a.titleId) !== titleId) {
+        newIndex = e;
+        break;
+      }
+    }
+    if (!~newIndex)
+      return;
+    this.range.setRange(newIndex, newIndex);
+    this.draw.render({
+      curIndex: newIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
+  wordTool() {
+    const elementList = this.draw.getMainElementList();
+    let isApply = false;
+    for (let i = 0; i < elementList.length; i++) {
+      const element = elementList[i];
+      if (element.value === ZERO) {
+        while (i + 1 < elementList.length) {
+          const nextElement = elementList[i + 1];
+          if (nextElement.value !== ZERO && nextElement.value !== NBSP)
+            break;
+          elementList.splice(i + 1, 1);
+          isApply = true;
+        }
+      }
+    }
+    if (!isApply) {
+      const isCollapsed = this.range.getIsCollapsed();
+      this.draw.getCursor().drawCursor({
+        isShow: isCollapsed
+      });
+    } else {
+      this.draw.render({
+        isSetCursor: false
+      });
+    }
+  }
+  setHTML(payload) {
+    const { header, main, footer } = payload;
+    const innerWidth = this.draw.getOriginalInnerWidth();
+    const getElementList = (htmlText) => htmlText !== void 0 ? getElementListByHTML(htmlText, {
+      innerWidth
+    }) : void 0;
+    this.setValue({
+      header: getElementList(header),
+      main: getElementList(main),
+      footer: getElementList(footer)
+    });
+  }
+  setGroup() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return null;
+    return this.draw.getGroup().setGroup();
+  }
+  deleteGroup(groupId) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.getGroup().deleteGroup(groupId);
+  }
+  getGroupIds() {
+    return this.draw.getWorkerManager().getGroupIds();
+  }
+  locationGroup(groupId) {
+    const elementList = this.draw.getOriginalMainElementList();
+    const context = this.draw.getGroup().getContextByGroupId(elementList, groupId);
+    if (!context)
+      return;
+    const { isTable, index: index2, trIndex, tdIndex, tdId, trId, tableId, endIndex } = context;
+    this.position.setPositionContext({
+      isTable,
+      index: index2,
+      trIndex,
+      tdIndex,
+      tdId,
+      trId,
+      tableId
+    });
+    this.range.setRange(endIndex, endIndex);
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
+  setZone(zone2) {
+    this.draw.getZone().setZone(zone2);
+  }
+  getControlValue(payload) {
+    return this.draw.getControl().getValueById(payload);
+  }
+  setControlValue(payload) {
+    this.draw.getControl().setValueById(payload);
+  }
+  setControlExtension(payload) {
+    this.draw.getControl().setExtensionById(payload);
+  }
+  setControlProperties(payload) {
+    this.draw.getControl().setPropertiesById(payload);
+  }
+  setControlHighlight(payload) {
+    this.draw.getControl().setHighlightList(payload);
+    this.draw.render({
+      isSubmitHistory: false
+    });
+  }
+  updateOptions(payload) {
+    const newOption = mergeOption(payload);
+    Object.entries(newOption).forEach(([key, value]) => {
+      Reflect.set(this.options, key, value);
+    });
+    this.forceUpdate();
+  }
+  getControlList() {
+    return this.draw.getControl().getList();
+  }
+  locationControl(controlId, options) {
+    const isLocationAfter = (options == null ? void 0 : options.position) === LocationPosition.AFTER;
+    function location(elementList, zone2) {
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              const locationContext = location(td.value, zone2);
+              if (locationContext) {
+                return {
+                  ...locationContext,
+                  positionContext: {
+                    isTable: true,
+                    index: i - 1,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: element.tdId,
+                    trId: element.trId,
+                    tableId: element.tableId
+                  }
+                };
+              }
+            }
+          }
+        }
+        if ((element == null ? void 0 : element.controlId) !== controlId)
+          continue;
+        let curIndex = i - 1;
+        if (isLocationAfter) {
+          curIndex -= 1;
+          if (element.controlComponent !== ControlComponent.PLACEHOLDER && element.controlComponent !== ControlComponent.POSTFIX) {
+            continue;
+          }
+        }
+        return {
+          zone: zone2,
+          range: {
+            startIndex: curIndex,
+            endIndex: curIndex
+          },
+          positionContext: {
+            isTable: false
+          }
+        };
+      }
+      return null;
+    }
+    const data2 = [
+      {
+        zone: EditorZone.HEADER,
+        elementList: this.draw.getHeaderElementList()
+      },
+      {
+        zone: EditorZone.MAIN,
+        elementList: this.draw.getOriginalMainElementList()
+      },
+      {
+        zone: EditorZone.FOOTER,
+        elementList: this.draw.getFooterElementList()
+      }
+    ];
+    for (const context of data2) {
+      const locationContext = location(context.elementList, context.zone);
+      if (locationContext) {
+        this.setZone(locationContext.zone);
+        this.position.setPositionContext(locationContext.positionContext);
+        this.range.replaceRange(locationContext.range);
+        this.draw.render({
+          curIndex: locationContext.range.startIndex,
+          isCompute: false,
+          isSubmitHistory: false
+        });
+        break;
+      }
+    }
+  }
+  insertControl(payload) {
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const cloneElement = deepClone(payload);
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const copyElement = getAnchorElement(elementList, startIndex);
+    if (!copyElement)
+      return;
+    const cloneAttr = [
+      ...TABLE_CONTEXT_ATTR,
+      ...EDITOR_ROW_ATTR,
+      ...LIST_CONTEXT_ATTR
+    ];
+    cloneProperty(cloneAttr, copyElement, cloneElement);
+    this.draw.insertElementList([cloneElement]);
+  }
+  getContainer() {
+    return this.draw.getContainer();
+  }
+  getTitleValue(payload) {
+    const { conceptId } = payload;
+    const result = [];
+    const getValue = (elementList, zone2) => {
+      var _a;
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              getValue(td.value, zone2);
+            }
+          }
+        }
+        if (((_a = element == null ? void 0 : element.title) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        const valueList = [];
+        let j = i;
+        while (j < elementList.length) {
+          const nextElement = elementList[j];
+          j++;
+          if (element.titleId === nextElement.titleId)
+            continue;
+          if (nextElement.level && titleOrderNumberMapping[nextElement.level] <= titleOrderNumberMapping[element.level]) {
+            break;
+          }
+          valueList.push(nextElement);
+        }
+        result.push({
+          ...element.title,
+          value: getTextFromElementList(valueList),
+          elementList: zipElementList(valueList),
+          zone: zone2
+        });
+        i = j;
+      }
+    };
+    const data2 = [
+      {
+        zone: EditorZone.HEADER,
+        elementList: this.draw.getHeaderElementList()
+      },
+      {
+        zone: EditorZone.MAIN,
+        elementList: this.draw.getOriginalMainElementList()
+      },
+      {
+        zone: EditorZone.FOOTER,
+        elementList: this.draw.getFooterElementList()
+      }
+    ];
+    for (const { zone: zone2, elementList } of data2) {
+      getValue(elementList, zone2);
+    }
+    return result;
+  }
+  getPositionContextByEvent(evt) {
+    var _a, _b, _c;
+    const pageIndex = (_a = evt.target) == null ? void 0 : _a.dataset.index;
+    if (!pageIndex)
+      return null;
+    const pageNo = Number(pageIndex);
+    const positionContext = this.position.getPositionByXY({
+      x: evt.offsetX,
+      y: evt.offsetY,
+      pageNo
+    });
+    const { isDirectHit, isTable, index: index2, trIndex, tdIndex, tdValueIndex, zone: zone2 } = positionContext;
+    if (!isDirectHit || zone2 && zone2 !== this.zone.getZone())
+      return null;
+    let element = null;
+    const elementList = this.draw.getOriginalElementList();
+    let position = null;
+    const positionList = this.position.getOriginalPositionList();
+    if (isTable) {
+      const td = (_b = elementList[index2].trList) == null ? void 0 : _b[trIndex].tdList[tdIndex];
+      element = (td == null ? void 0 : td.value[tdValueIndex]) || null;
+      position = ((_c = td == null ? void 0 : td.positionList) == null ? void 0 : _c[tdValueIndex]) || null;
+    } else {
+      element = elementList[index2] || null;
+      position = positionList[index2] || null;
+    }
+    let rangeRect = null;
+    if (position) {
+      const { pageNo: pageNo2, coordinate: { leftTop, rightTop }, lineHeight } = position;
+      const height = this.draw.getOriginalHeight();
+      const pageGap = this.draw.getOriginalPageGap();
+      rangeRect = {
+        x: leftTop[0],
+        y: leftTop[1] + pageNo2 * (height + pageGap),
+        width: rightTop[0] - leftTop[0],
+        height: lineHeight
+      };
+    }
+    return {
+      pageNo,
+      element,
+      rangeRect
+    };
+  }
+  insertTitle(payload) {
+    var _a;
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
+      return;
+    const cloneElement = deepClone(payload);
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const copyElement = getAnchorElement(elementList, startIndex);
+    if (!copyElement)
+      return;
+    const cloneAttr = [
+      ...TABLE_CONTEXT_ATTR,
+      ...EDITOR_ROW_ATTR,
+      ...LIST_CONTEXT_ATTR
+    ];
+    (_a = cloneElement.valueList) == null ? void 0 : _a.forEach((valueItem) => {
+      cloneProperty(cloneAttr, copyElement, valueItem);
+    });
+    this.draw.insertElementList([cloneElement]);
+  }
+  focus(payload) {
+    const { position = LocationPosition.AFTER } = payload || {};
+    const curIndex = position === LocationPosition.BEFORE ? 0 : this.draw.getOriginalMainElementList().length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({
+      curIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+    const positionList = this.draw.getPosition().getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[curIndex],
+      direction: MoveDirection.DOWN
+    });
+  }
+}
+class Listener {
+  constructor() {
+    this.rangeStyleChange = null;
+    this.visiblePageNoListChange = null;
+    this.intersectionPageNoChange = null;
+    this.pageSizeChange = null;
+    this.pageScaleChange = null;
+    this.saved = null;
+    this.contentChange = null;
+    this.controlChange = null;
+    this.pageModeChange = null;
+    this.zoneChange = null;
+  }
+}
+class Register {
+  constructor(payload) {
+    const { contextMenu, shortcut, i18n } = payload;
+    this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu);
+    this.getContextMenuList = contextMenu.getContextMenuList.bind(contextMenu);
+    this.shortcutList = shortcut.registerShortcutList.bind(shortcut);
+    this.langMap = i18n.registerLangMap.bind(i18n);
+  }
+}
+const NAME_PLACEHOLDER = {
+  SELECTED_TEXT: "%s"
+};
+const INTERNAL_CONTEXT_MENU_KEY = {
+  GLOBAL: {
+    CUT: "globalCut",
+    COPY: "globalCopy",
+    PASTE: "globalPaste",
+    SELECT_ALL: "globalSelectAll",
+    PRINT: "globalPrint"
+  },
+  CONTROL: {
+    DELETE: "controlDelete"
+  },
+  HYPERLINK: {
+    DELETE: "hyperlinkDelete",
+    CANCEL: "hyperlinkCancel",
+    EDIT: "hyperlinkEdit"
+  },
+  IMAGE: {
+    CHANGE: "imageChange",
+    SAVE_AS: "imageSaveAs",
+    TEXT_WRAP: "imageTextWrap",
+    TEXT_WRAP_EMBED: "imageTextWrapEmbed",
+    TEXT_WRAP_UP_DOWN: "imageTextWrapUpDown",
+    TEXT_WRAP_SURROUND: "imageTextWrapSurround",
+    TEXT_WRAP_FLOAT_TOP: "imageTextWrapFloatTop",
+    TEXT_WRAP_FLOAT_BOTTOM: "imageTextWrapFloatBottom"
+  },
+  TABLE: {
+    BORDER: "border",
+    BORDER_ALL: "tableBorderAll",
+    BORDER_EMPTY: "tableBorderEmpty",
+    BORDER_EXTERNAL: "tableBorderExternal",
+    BORDER_TD: "tableBorderTd",
+    BORDER_TD_TOP: "tableBorderTdTop",
+    BORDER_TD_RIGHT: "tableBorderTdRight",
+    BORDER_TD_BOTTOM: "tableBorderTdBottom",
+    BORDER_TD_LEFT: "tableBorderTdLeft",
+    BORDER_TD_FORWARD: "tableBorderTdForward",
+    BORDER_TD_BACK: "tableBorderTdBack",
+    VERTICAL_ALIGN: "tableVerticalAlign",
+    VERTICAL_ALIGN_TOP: "tableVerticalAlignTop",
+    VERTICAL_ALIGN_MIDDLE: "tableVerticalAlignMiddle",
+    VERTICAL_ALIGN_BOTTOM: "tableVerticalAlignBottom",
+    INSERT_ROW_COL: "tableInsertRowCol",
+    INSERT_TOP_ROW: "tableInsertTopRow",
+    INSERT_BOTTOM_ROW: "tableInsertBottomRow",
+    INSERT_LEFT_COL: "tableInsertLeftCol",
+    INSERT_RIGHT_COL: "tableInsertRightCol",
+    DELETE_ROW_COL: "tableDeleteRowCol",
+    DELETE_ROW: "tableDeleteRow",
+    DELETE_COL: "tableDeleteCol",
+    DELETE_TABLE: "tableDeleteTable",
+    MERGE_CELL: "tableMergeCell",
+    CANCEL_MERGE_CELL: "tableCancelMergeCell"
+  }
+};
+const { CONTROL: { DELETE: DELETE$1 } } = INTERNAL_CONTEXT_MENU_KEY;
+const controlMenus = [
+  {
+    key: DELETE$1,
+    i18nPath: "contextmenu.control.delete",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && !payload.editorHasSelection && !!((_a = payload.startElement) == null ? void 0 : _a.controlId) && payload.options.mode !== EditorMode.FORM;
+    },
+    callback: (command) => {
+      command.executeRemoveControl();
+    }
+  }
+];
+const { GLOBAL: { CUT, COPY, PASTE, SELECT_ALL, PRINT } } = INTERNAL_CONTEXT_MENU_KEY;
+const globalMenus = [
+  {
+    key: CUT,
+    i18nPath: "contextmenu.global.cut",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + X`,
+    when: (payload) => {
+      return !payload.isReadonly;
+    },
+    callback: (command) => {
+      command.executeCut();
+    }
+  },
+  {
+    key: COPY,
+    i18nPath: "contextmenu.global.copy",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + C`,
+    when: (payload) => {
+      return payload.editorHasSelection || payload.isCrossRowCol;
+    },
+    callback: (command) => {
+      command.executeCopy();
+    }
+  },
+  {
+    key: PASTE,
+    i18nPath: "contextmenu.global.paste",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + V`,
+    when: (payload) => {
+      return !payload.isReadonly && payload.editorTextFocus;
+    },
+    callback: (command) => {
+      command.executePaste();
+    }
+  },
+  {
+    key: SELECT_ALL,
+    i18nPath: "contextmenu.global.selectAll",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + A`,
+    when: (payload) => {
+      return payload.editorTextFocus;
+    },
+    callback: (command) => {
+      command.executeSelectAll();
+    }
+  },
+  {
+    isDivider: true
+  },
+  {
+    key: PRINT,
+    i18nPath: "contextmenu.global.print",
+    icon: "print",
+    when: () => true,
+    callback: (command) => {
+      command.executePrint();
+    }
+  }
+];
+const { HYPERLINK: { DELETE, CANCEL, EDIT } } = INTERNAL_CONTEXT_MENU_KEY;
+const hyperlinkMenus = [
+  {
+    key: DELETE,
+    i18nPath: "contextmenu.hyperlink.delete",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
+    },
+    callback: (command) => {
+      command.executeDeleteHyperlink();
+    }
+  },
+  {
+    key: CANCEL,
+    i18nPath: "contextmenu.hyperlink.cancel",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
+    },
+    callback: (command) => {
+      command.executeCancelHyperlink();
+    }
+  },
+  {
+    key: EDIT,
+    i18nPath: "contextmenu.hyperlink.edit",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.HYPERLINK;
+    },
+    callback: (command, context) => {
+      var _a;
+      const url = window.prompt("\u7F16\u8F91\u94FE\u63A5", (_a = context.startElement) == null ? void 0 : _a.url);
+      if (url) {
+        command.executeEditHyperlink(url);
+      }
+    }
+  }
+];
+const { IMAGE: { CHANGE, SAVE_AS, TEXT_WRAP, TEXT_WRAP_EMBED, TEXT_WRAP_UP_DOWN, TEXT_WRAP_SURROUND, TEXT_WRAP_FLOAT_TOP, TEXT_WRAP_FLOAT_BOTTOM } } = INTERNAL_CONTEXT_MENU_KEY;
+const imageMenus = [
+  {
+    key: CHANGE,
+    i18nPath: "contextmenu.image.change",
+    icon: "image-change",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && !payload.editorHasSelection && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.IMAGE;
+    },
+    callback: (command) => {
+      const proxyInputFile = document.createElement("input");
+      proxyInputFile.type = "file";
+      proxyInputFile.accept = ".png, .jpg, .jpeg";
+      proxyInputFile.onchange = () => {
+        const file = proxyInputFile.files[0];
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.onload = () => {
+          const value = fileReader.result;
+          command.executeReplaceImageElement(value);
+        };
+      };
+      proxyInputFile.click();
+    }
+  },
+  {
+    key: SAVE_AS,
+    i18nPath: "contextmenu.image.saveAs",
+    icon: "image",
+    when: (payload) => {
+      var _a;
+      return !payload.editorHasSelection && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.IMAGE;
+    },
+    callback: (command) => {
+      command.executeSaveAsImageElement();
+    }
+  },
+  {
+    key: TEXT_WRAP,
+    i18nPath: "contextmenu.image.textWrap",
+    when: (payload) => {
+      var _a;
+      return !payload.isReadonly && !payload.editorHasSelection && ((_a = payload.startElement) == null ? void 0 : _a.type) === ElementType.IMAGE;
+    },
+    childMenus: [
+      {
+        key: TEXT_WRAP_EMBED,
+        i18nPath: "contextmenu.image.textWrapType.embed",
+        when: () => true,
+        callback: (command, context) => {
+          command.executeChangeImageDisplay(context.startElement, ImageDisplay.BLOCK);
+        }
+      },
+      {
+        key: TEXT_WRAP_UP_DOWN,
+        i18nPath: "contextmenu.image.textWrapType.upDown",
+        when: () => true,
+        callback: (command, context) => {
+          command.executeChangeImageDisplay(context.startElement, ImageDisplay.INLINE);
+        }
+      },
+      {
+        key: TEXT_WRAP_SURROUND,
+        i18nPath: "contextmenu.image.textWrapType.surround",
+        when: () => true,
+        callback: (command, context) => {
+          command.executeChangeImageDisplay(context.startElement, ImageDisplay.SURROUND);
+        }
+      },
+      {
+        key: TEXT_WRAP_FLOAT_TOP,
+        i18nPath: "contextmenu.image.textWrapType.floatTop",
+        when: () => true,
+        callback: (command, context) => {
+          command.executeChangeImageDisplay(context.startElement, ImageDisplay.FLOAT_TOP);
+        }
+      },
+      {
+        key: TEXT_WRAP_FLOAT_BOTTOM,
+        i18nPath: "contextmenu.image.textWrapType.floatBottom",
+        when: () => true,
+        callback: (command, context) => {
+          command.executeChangeImageDisplay(context.startElement, ImageDisplay.FLOAT_BOTTOM);
+        }
+      }
+    ]
+  }
+];
+const { TABLE: { BORDER, BORDER_ALL, BORDER_EMPTY, BORDER_EXTERNAL, BORDER_TD, BORDER_TD_TOP, BORDER_TD_LEFT, BORDER_TD_BOTTOM, BORDER_TD_RIGHT, BORDER_TD_BACK, BORDER_TD_FORWARD, VERTICAL_ALIGN, VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM, INSERT_ROW_COL, INSERT_TOP_ROW, INSERT_BOTTOM_ROW, INSERT_LEFT_COL, INSERT_RIGHT_COL, DELETE_ROW_COL, DELETE_ROW, DELETE_COL, DELETE_TABLE, MERGE_CELL, CANCEL_MERGE_CELL } } = INTERNAL_CONTEXT_MENU_KEY;
+const tableMenus = [
+  {
+    isDivider: true
+  },
+  {
+    key: BORDER,
+    i18nPath: "contextmenu.table.border",
+    icon: "border-all",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
+    },
+    childMenus: [
+      {
+        key: BORDER_ALL,
+        i18nPath: "contextmenu.table.borderAll",
+        icon: "border-all",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableBorderType(TableBorder.ALL);
+        }
+      },
+      {
+        key: BORDER_EMPTY,
+        i18nPath: "contextmenu.table.borderEmpty",
+        icon: "border-empty",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableBorderType(TableBorder.EMPTY);
+        }
+      },
+      {
+        key: BORDER_EXTERNAL,
+        i18nPath: "contextmenu.table.borderExternal",
+        icon: "border-external",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableBorderType(TableBorder.EXTERNAL);
+        }
+      },
+      {
+        key: BORDER_TD,
+        i18nPath: "contextmenu.table.borderTd",
+        icon: "border-td",
+        when: () => true,
+        childMenus: [
+          {
+            key: BORDER_TD_TOP,
+            i18nPath: "contextmenu.table.borderTdTop",
+            icon: "border-td-top",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdBorderType(TdBorder.TOP);
+            }
+          },
+          {
+            key: BORDER_TD_RIGHT,
+            i18nPath: "contextmenu.table.borderTdRight",
+            icon: "border-td-right",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdBorderType(TdBorder.RIGHT);
+            }
+          },
+          {
+            key: BORDER_TD_BOTTOM,
+            i18nPath: "contextmenu.table.borderTdBottom",
+            icon: "border-td-bottom",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdBorderType(TdBorder.BOTTOM);
+            }
+          },
+          {
+            key: BORDER_TD_LEFT,
+            i18nPath: "contextmenu.table.borderTdLeft",
+            icon: "border-td-left",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdBorderType(TdBorder.LEFT);
+            }
+          },
+          {
+            key: BORDER_TD_FORWARD,
+            i18nPath: "contextmenu.table.borderTdForward",
+            icon: "border-td-forward",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdSlashType(TdSlash.FORWARD);
+            }
+          },
+          {
+            key: BORDER_TD_BACK,
+            i18nPath: "contextmenu.table.borderTdBack",
+            icon: "border-td-back",
+            when: () => true,
+            callback: (command) => {
+              command.executeTableTdSlashType(TdSlash.BACK);
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    key: VERTICAL_ALIGN,
+    i18nPath: "contextmenu.table.verticalAlign",
+    icon: "vertical-align",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
+    },
+    childMenus: [
+      {
+        key: VERTICAL_ALIGN_TOP,
+        i18nPath: "contextmenu.table.verticalAlignTop",
+        icon: "vertical-align-top",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.TOP);
+        }
+      },
+      {
+        key: VERTICAL_ALIGN_MIDDLE,
+        i18nPath: "contextmenu.table.verticalAlignMiddle",
+        icon: "vertical-align-middle",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE);
+        }
+      },
+      {
+        key: VERTICAL_ALIGN_BOTTOM,
+        i18nPath: "contextmenu.table.verticalAlignBottom",
+        icon: "vertical-align-bottom",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.BOTTOM);
+        }
+      }
+    ]
+  },
+  {
+    key: INSERT_ROW_COL,
+    i18nPath: "contextmenu.table.insertRowCol",
+    icon: "insert-row-col",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
+    },
+    childMenus: [
+      {
+        key: INSERT_TOP_ROW,
+        i18nPath: "contextmenu.table.insertTopRow",
+        icon: "insert-top-row",
+        when: () => true,
+        callback: (command) => {
+          command.executeInsertTableTopRow();
+        }
+      },
+      {
+        key: INSERT_BOTTOM_ROW,
+        i18nPath: "contextmenu.table.insertBottomRow",
+        icon: "insert-bottom-row",
+        when: () => true,
+        callback: (command) => {
+          command.executeInsertTableBottomRow();
+        }
+      },
+      {
+        key: INSERT_LEFT_COL,
+        i18nPath: "contextmenu.table.insertLeftCol",
+        icon: "insert-left-col",
+        when: () => true,
+        callback: (command) => {
+          command.executeInsertTableLeftCol();
+        }
+      },
+      {
+        key: INSERT_RIGHT_COL,
+        i18nPath: "contextmenu.table.insertRightCol",
+        icon: "insert-right-col",
+        when: () => true,
+        callback: (command) => {
+          command.executeInsertTableRightCol();
+        }
+      }
+    ]
+  },
+  {
+    key: DELETE_ROW_COL,
+    i18nPath: "contextmenu.table.deleteRowCol",
+    icon: "delete-row-col",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
+    },
+    childMenus: [
+      {
+        key: DELETE_ROW,
+        i18nPath: "contextmenu.table.deleteRow",
+        icon: "delete-row",
+        when: () => true,
+        callback: (command) => {
+          command.executeDeleteTableRow();
+        }
+      },
+      {
+        key: DELETE_COL,
+        i18nPath: "contextmenu.table.deleteCol",
+        icon: "delete-col",
+        when: () => true,
+        callback: (command) => {
+          command.executeDeleteTableCol();
+        }
+      },
+      {
+        key: DELETE_TABLE,
+        i18nPath: "contextmenu.table.deleteTable",
+        icon: "delete-table",
+        when: () => true,
+        callback: (command) => {
+          command.executeDeleteTable();
+        }
+      }
+    ]
+  },
+  {
+    key: MERGE_CELL,
+    i18nPath: "contextmenu.table.mergeCell",
+    icon: "merge-cell",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isCrossRowCol && payload.options.mode !== EditorMode.FORM;
+    },
+    callback: (command) => {
+      command.executeMergeTableCell();
+    }
+  },
+  {
+    key: CANCEL_MERGE_CELL,
+    i18nPath: "contextmenu.table.mergeCancelCell",
+    icon: "merge-cancel-cell",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
+    },
+    callback: (command) => {
+      command.executeCancelMergeTableCell();
+    }
+  }
+];
+class ContextMenu {
+  constructor(draw, command) {
+    this._proxyContextMenuEvent = (evt) => {
+      this.context = this._getContext();
+      const renderList = this._filterMenuList(this.contextMenuList);
+      const isRegisterContextMenu = renderList.some((menu) => !menu.isDivider);
+      if (isRegisterContextMenu) {
+        this.dispose();
+        this._render({
+          contextMenuList: renderList,
+          left: evt.x,
+          top: evt.y
+        });
+      }
+      evt.preventDefault();
+    };
+    this._handleSideEffect = (evt) => {
+      if (this.contextMenuContainerList.length) {
+        const target = (evt == null ? void 0 : evt.composedPath()[0]) || evt.target;
+        const contextMenuDom = findParent(target, (node) => !!node && node.nodeType === 1 && node.getAttribute(EDITOR_COMPONENT) === EditorComponent.CONTEXTMENU, true);
+        if (!contextMenuDom) {
+          this.dispose();
+        }
+      }
+    };
+    this.options = draw.getOptions();
+    this.draw = draw;
+    this.command = command;
+    this.range = draw.getRange();
+    this.position = draw.getPosition();
+    this.i18n = draw.getI18n();
+    this.container = draw.getContainer();
+    this.context = null;
+    this.contextMenuList = [
+      ...globalMenus,
+      ...tableMenus,
+      ...imageMenus,
+      ...controlMenus,
+      ...hyperlinkMenus
+    ];
+    this.contextMenuContainerList = [];
+    this.contextMenuRelationShip = /* @__PURE__ */ new Map();
+    this._addEvent();
+  }
+  getContextMenuList() {
+    return this.contextMenuList;
+  }
+  _addEvent() {
+    this.container.addEventListener("contextmenu", this._proxyContextMenuEvent);
+    document.addEventListener("mousedown", this._handleSideEffect);
+  }
+  removeEvent() {
+    this.container.removeEventListener("contextmenu", this._proxyContextMenuEvent);
+    document.removeEventListener("mousedown", this._handleSideEffect);
+  }
+  _filterMenuList(menuList) {
+    var _a;
+    const { contextMenuDisableKeys } = this.options;
+    const renderList = [];
+    for (let m = 0; m < menuList.length; m++) {
+      const menu = menuList[m];
+      if (menu.disable || menu.key && contextMenuDisableKeys.includes(menu.key)) {
+        continue;
+      }
+      if (menu.isDivider) {
+        renderList.push(menu);
+      } else {
+        if ((_a = menu.when) == null ? void 0 : _a.call(menu, this.context)) {
+          renderList.push(menu);
+        }
+      }
+    }
+    return renderList;
+  }
+  _getContext() {
+    const isReadonly = this.draw.isReadonly();
+    const { isCrossRowCol: crossRowCol, startIndex, endIndex } = this.range.getRange();
+    const editorTextFocus = !!(~startIndex || ~endIndex);
+    const editorHasSelection = editorTextFocus && startIndex !== endIndex;
+    const { isTable, trIndex, tdIndex, index: index2 } = this.position.getPositionContext();
+    let tableElement = null;
+    if (isTable) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const originTableElement = originalElementList[index2] || null;
+      if (originTableElement) {
+        tableElement = zipElementList([originTableElement], {
+          extraPickAttrs: ["id"]
+        })[0];
+      }
+    }
+    const isCrossRowCol = isTable && !!crossRowCol;
+    const elementList = this.draw.getElementList();
+    const startElement = elementList[startIndex] || null;
+    const endElement = elementList[endIndex] || null;
+    const zone2 = this.draw.getZone().getZone();
+    return {
+      startElement,
+      endElement,
+      isReadonly,
+      editorHasSelection,
+      editorTextFocus,
+      isCrossRowCol,
+      zone: zone2,
+      isInTable: isTable,
+      trIndex: trIndex != null ? trIndex : null,
+      tdIndex: tdIndex != null ? tdIndex : null,
+      tableElement,
+      options: this.options
+    };
+  }
+  _createContextMenuContainer() {
+    const contextMenuContainer = document.createElement("div");
+    contextMenuContainer.classList.add(`${EDITOR_PREFIX}-contextmenu-container`);
+    contextMenuContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.CONTEXTMENU);
+    this.container.append(contextMenuContainer);
+    return contextMenuContainer;
+  }
+  _render(payload) {
+    var _a;
+    const { contextMenuList, left: left2, top, parentMenuContainer } = payload;
+    const contextMenuContainer = this._createContextMenuContainer();
+    const contextMenuContent = document.createElement("div");
+    contextMenuContent.classList.add(`${EDITOR_PREFIX}-contextmenu-content`);
+    let childMenuContainer = null;
+    if (parentMenuContainer) {
+      this.contextMenuRelationShip.set(parentMenuContainer, contextMenuContainer);
+    }
+    for (let c = 0; c < contextMenuList.length; c++) {
+      const menu = contextMenuList[c];
+      if (menu.isDivider) {
+        if (c !== 0 && c !== contextMenuList.length - 1 && !((_a = contextMenuList[c - 1]) == null ? void 0 : _a.isDivider)) {
+          const divider = document.createElement("div");
+          divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`);
+          contextMenuContent.append(divider);
+        }
+      } else {
+        const menuItem = document.createElement("div");
+        menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`);
+        if (menu.childMenus) {
+          const childMenus = this._filterMenuList(menu.childMenus);
+          const isRegisterContextMenu = childMenus.some((menu2) => !menu2.isDivider);
+          if (isRegisterContextMenu) {
+            menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`);
+            menuItem.onmouseenter = () => {
+              this._setHoverStatus(menuItem, true);
+              this._removeSubMenu(contextMenuContainer);
+              const subMenuRect = menuItem.getBoundingClientRect();
+              const left22 = subMenuRect.left + subMenuRect.width;
+              const top2 = subMenuRect.top;
+              childMenuContainer = this._render({
+                contextMenuList: childMenus,
+                left: left22,
+                top: top2,
+                parentMenuContainer: contextMenuContainer
+              });
+            };
+            menuItem.onmouseleave = (evt) => {
+              if (!childMenuContainer || !childMenuContainer.contains(evt.relatedTarget)) {
+                this._setHoverStatus(menuItem, false);
+              }
+            };
+          }
+        } else {
+          menuItem.onmouseenter = () => {
+            this._setHoverStatus(menuItem, true);
+            this._removeSubMenu(contextMenuContainer);
+          };
+          menuItem.onmouseleave = () => {
+            this._setHoverStatus(menuItem, false);
+          };
+          menuItem.onclick = () => {
+            if (menu.callback && this.context) {
+              menu.callback(this.command, this.context);
+            }
+            this.dispose();
+          };
+        }
+        const icon = document.createElement("i");
+        menuItem.append(icon);
+        if (menu.icon) {
+          icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`);
+        }
+        const span = document.createElement("span");
+        const name = menu.i18nPath ? this._formatName(this.i18n.t(menu.i18nPath)) : this._formatName(menu.name || "");
+        span.append(document.createTextNode(name));
+        menuItem.append(span);
+        if (menu.shortCut) {
+          const span2 = document.createElement("span");
+          span2.classList.add(`${EDITOR_PREFIX}-shortcut`);
+          span2.append(document.createTextNode(menu.shortCut));
+          menuItem.append(span2);
+        }
+        contextMenuContent.append(menuItem);
+      }
+    }
+    contextMenuContainer.append(contextMenuContent);
+    contextMenuContainer.style.display = "block";
+    const innerWidth = window.innerWidth;
+    const contextmenuRect = contextMenuContainer.getBoundingClientRect();
+    const contextMenuWidth = contextmenuRect.width;
+    const adjustLeft = left2 + contextMenuWidth > innerWidth ? left2 - contextMenuWidth : left2;
+    contextMenuContainer.style.left = `${adjustLeft}px`;
+    const innerHeight = window.innerHeight;
+    const contextMenuHeight = contextmenuRect.height;
+    const adjustTop = top + contextMenuHeight > innerHeight ? top - contextMenuHeight : top;
+    contextMenuContainer.style.top = `${adjustTop}px`;
+    this.contextMenuContainerList.push(contextMenuContainer);
+    return contextMenuContainer;
+  }
+  _removeSubMenu(payload) {
+    const childMenu = this.contextMenuRelationShip.get(payload);
+    if (childMenu) {
+      this._removeSubMenu(childMenu);
+      childMenu.remove();
+      this.contextMenuRelationShip.delete(payload);
+    }
+  }
+  _setHoverStatus(payload, status) {
+    var _a;
+    if (status) {
+      (_a = payload.parentNode) == null ? void 0 : _a.querySelectorAll(`${EDITOR_PREFIX}-contextmenu-item`).forEach((child) => child.classList.remove("hover"));
+      payload.classList.add("hover");
+    } else {
+      payload.classList.remove("hover");
+    }
+  }
+  _formatName(name) {
+    const placeholderValues = Object.values(NAME_PLACEHOLDER);
+    const placeholderReg = new RegExp(`${placeholderValues.join("|")}`);
+    let formatName = name;
+    if (placeholderReg.test(formatName)) {
+      const selectedReg = new RegExp(NAME_PLACEHOLDER.SELECTED_TEXT, "g");
+      if (selectedReg.test(formatName)) {
+        const selectedText = this.range.toString();
+        formatName = formatName.replace(selectedReg, selectedText);
+      }
+    }
+    return formatName;
+  }
+  registerContextMenuList(payload) {
+    this.contextMenuList.push(...payload);
+  }
+  dispose() {
+    this.contextMenuContainerList.forEach((child) => child.remove());
+    this.contextMenuContainerList = [];
+    this.contextMenuRelationShip.clear();
+  }
+}
+const richtextKeys = [
+  {
+    key: KeyMap.X,
+    ctrl: true,
+    shift: true,
+    callback: (command) => {
+      command.executeStrikeout();
+    }
+  },
+  {
+    key: KeyMap.LEFT_BRACKET,
+    mod: true,
+    callback: (command) => {
+      command.executeSizeAdd();
+    }
+  },
+  {
+    key: KeyMap.RIGHT_BRACKET,
+    mod: true,
+    callback: (command) => {
+      command.executeSizeMinus();
+    }
+  },
+  {
+    key: KeyMap.B,
+    mod: true,
+    callback: (command) => {
+      command.executeBold();
+    }
+  },
+  {
+    key: KeyMap.I,
+    mod: true,
+    callback: (command) => {
+      command.executeItalic();
+    }
+  },
+  {
+    key: KeyMap.U,
+    mod: true,
+    callback: (command) => {
+      command.executeUnderline();
+    }
+  },
+  {
+    key: isApple ? KeyMap.COMMA : KeyMap.RIGHT_ANGLE_BRACKET,
+    mod: true,
+    shift: true,
+    callback: (command) => {
+      command.executeSuperscript();
+    }
+  },
+  {
+    key: isApple ? KeyMap.PERIOD : KeyMap.LEFT_ANGLE_BRACKET,
+    mod: true,
+    shift: true,
+    callback: (command) => {
+      command.executeSubscript();
+    }
+  },
+  {
+    key: KeyMap.L,
+    mod: true,
+    callback: (command) => {
+      command.executeRowFlex(RowFlex.LEFT);
+    }
+  },
+  {
+    key: KeyMap.E,
+    mod: true,
+    callback: (command) => {
+      command.executeRowFlex(RowFlex.CENTER);
+    }
+  },
+  {
+    key: KeyMap.R,
+    mod: true,
+    callback: (command) => {
+      command.executeRowFlex(RowFlex.RIGHT);
+    }
+  },
+  {
+    key: KeyMap.J,
+    mod: true,
+    callback: (command) => {
+      command.executeRowFlex(RowFlex.ALIGNMENT);
+    }
+  },
+  {
+    key: KeyMap.J,
+    mod: true,
+    shift: true,
+    callback: (command) => {
+      command.executeRowFlex(RowFlex.JUSTIFY);
+    }
+  }
+];
+const titleKeys = [
+  {
+    key: KeyMap.ZERO,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(null);
+    }
+  },
+  {
+    key: KeyMap.ONE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FIRST);
+    }
+  },
+  {
+    key: KeyMap.TWO,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.SECOND);
+    }
+  },
+  {
+    key: KeyMap.THREE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.THIRD);
+    }
+  },
+  {
+    key: KeyMap.FOUR,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FOURTH);
+    }
+  },
+  {
+    key: KeyMap.FIVE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FIFTH);
+    }
+  },
+  {
+    key: KeyMap.SIX,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.SIXTH);
+    }
+  }
+];
+const listKeys = [
+  {
+    key: KeyMap.I,
+    shift: true,
+    mod: true,
+    callback: (command) => {
+      command.executeList(ListType.UL, ListStyle.DISC);
+    }
+  },
+  {
+    key: KeyMap.U,
+    shift: true,
+    mod: true,
+    callback: (command) => {
+      command.executeList(ListType.OL);
+    }
+  }
+];
+class Shortcut {
+  constructor(draw, command) {
+    this._globalKeydown = (evt) => {
+      if (!this.globalShortcutList.length)
+        return;
+      this._execute(evt, this.globalShortcutList);
+    };
+    this.command = command;
+    this.globalShortcutList = [];
+    this.agentShortcutList = [];
+    this._addShortcutList([...richtextKeys, ...titleKeys, ...listKeys]);
+    this._addEvent();
+    const agentDom = draw.getCursor().getAgentDom();
+    agentDom.addEventListener("keydown", this._agentKeydown.bind(this));
+  }
+  _addEvent() {
+    document.addEventListener("keydown", this._globalKeydown);
+  }
+  removeEvent() {
+    document.removeEventListener("keydown", this._globalKeydown);
+  }
+  _addShortcutList(payload) {
+    for (let s = payload.length - 1; s >= 0; s--) {
+      const shortCut = payload[s];
+      if (shortCut.isGlobal) {
+        this.globalShortcutList.unshift(shortCut);
+      } else {
+        this.agentShortcutList.unshift(shortCut);
+      }
+    }
+  }
+  registerShortcutList(payload) {
+    this._addShortcutList(payload);
+  }
+  _agentKeydown(evt) {
+    if (!this.agentShortcutList.length)
+      return;
+    this._execute(evt, this.agentShortcutList);
+  }
+  _execute(evt, shortCutList) {
+    var _a;
+    for (let s = 0; s < shortCutList.length; s++) {
+      const shortCut = shortCutList[s];
+      if ((shortCut.mod ? isMod(evt) === !!shortCut.mod : evt.ctrlKey === !!shortCut.ctrl && evt.metaKey === !!shortCut.meta) && evt.shiftKey === !!shortCut.shift && evt.altKey === !!shortCut.alt && evt.key.toLowerCase() === shortCut.key.toLowerCase()) {
+        if (!shortCut.disable) {
+          (_a = shortCut == null ? void 0 : shortCut.callback) == null ? void 0 : _a.call(shortCut, this.command);
+          evt.preventDefault();
+        }
+        break;
+      }
+    }
+  }
+}
+class Plugin {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  use(pluginFunction, options) {
+    pluginFunction(this.editor, options);
+  }
+}
+class EventBus {
+  constructor() {
+    this.eventHub = /* @__PURE__ */ new Map();
+  }
+  on(eventName, callback) {
+    if (!eventName || typeof callback !== "function")
+      return;
+    const eventSet = this.eventHub.get(eventName) || /* @__PURE__ */ new Set();
+    eventSet.add(callback);
+    this.eventHub.set(eventName, eventSet);
+  }
+  emit(eventName, payload) {
+    if (!eventName)
+      return;
+    const callBackSet = this.eventHub.get(eventName);
+    if (!callBackSet)
+      return;
+    if (callBackSet.size === 1) {
+      const callBack = [...callBackSet];
+      return callBack[0](payload);
+    }
+    callBackSet.forEach((callBack) => callBack(payload));
+  }
+  off(eventName, callback) {
+    if (!eventName || typeof callback !== "function")
+      return;
+    const callBackSet = this.eventHub.get(eventName);
+    if (!callBackSet)
+      return;
+    callBackSet.delete(callback);
+  }
+  isSubscribe(eventName) {
+    const eventSet = this.eventHub.get(eventName);
+    return !!eventSet && eventSet.size > 0;
+  }
+}
+class Override {
+}
+class Editor {
+  constructor(container, data2, options = {}) {
+    const editorOptions = mergeOption(options);
+    data2 = deepClone(data2);
+    let headerElementList = [];
+    let mainElementList = [];
+    let footerElementList = [];
+    if (Array.isArray(data2)) {
+      mainElementList = data2;
+    } else {
+      headerElementList = data2.header || [];
+      mainElementList = data2.main;
+      footerElementList = data2.footer || [];
+    }
+    const pageComponentData = [
+      headerElementList,
+      mainElementList,
+      footerElementList
+    ];
+    pageComponentData.forEach((elementList) => {
+      formatElementList(elementList, {
+        editorOptions,
+        isForceCompensation: true
+      });
+    });
+    this.listener = new Listener();
+    this.eventBus = new EventBus();
+    this.override = new Override();
+    const draw = new Draw(container, editorOptions, {
+      header: headerElementList,
+      main: mainElementList,
+      footer: footerElementList
+    }, this.listener, this.eventBus, this.override);
+    this.command = new Command(new CommandAdapt(draw));
+    const contextMenu = new ContextMenu(draw, this.command);
+    const shortcut = new Shortcut(draw, this.command);
+    this.register = new Register({
+      contextMenu,
+      shortcut,
+      i18n: draw.getI18n()
+    });
+    this.destroy = () => {
+      draw.destroy();
+      shortcut.removeEvent();
+      contextMenu.removeEvent();
+    };
+    const plugin = new Plugin(this);
+    this.use = plugin.use.bind(plugin);
+  }
+}
+export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, LineNumberType, ListStyle, ListType, LocationPosition, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, createDomFromElementList, Editor as default, getElementListByHTML, getTextFromElementList, splitText };
diff --git a/src/components/wordtpl/components/HighlightColorModal.vue b/src/components/wordtpl/components/HighlightColorModal.vue
new file mode 100644
index 0000000..98a8c8b
--- /dev/null
+++ b/src/components/wordtpl/components/HighlightColorModal.vue
@@ -0,0 +1,75 @@
+<!-- 高亮颜色 -->
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="设置高亮颜色" @ok="handleSubmit" :width="500">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script setup lang="ts">
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  const formSchema: FormSchema[] = [
+    {
+      label: '高亮颜色',
+      field: 'highlightColor',
+      component: 'Select',
+      required: true,
+      componentProps: {
+        options: [
+          { value: '#ffffff00', label: '无色' },
+          { value: '#FFFF00', label: '黄色' },
+          { value: '#00FF00', label: '绿色' },
+          { value: '#00FFFF', label: '青色' },
+          { value: '#FF00FF', label: '粉红色' },
+          { value: '#0000FF', label: '蓝色' },
+          { value: '#FF0000', label: '红色' },
+          { value: '#000080', label: '深蓝色' },
+          { value: '#008080', label: '深青色' },
+          { value: '#008000', label: '深绿色' },
+          { value: '#800080', label: '紫色' },
+          { value: '#800000', label: '深红色' },
+          { value: '#808000', label: '深黄色' },
+          { value: '#808080', label: '深灰色' },
+          { value: '#C0C0C0', label: '浅灰色' },
+          { value: '#000000', label: '黑色' },
+        ],
+        getPopupContainer: ()=> document.body
+      },
+    },
+  ];
+  // Emits声明
+  const emit = defineEmits(['register', 'ok']);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    //表单赋值
+    await setFieldsValue({
+      ...data,
+    });
+  });
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('ok', values);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/components/wordtpl/components/HyperlinkDrawer.vue b/src/components/wordtpl/components/HyperlinkDrawer.vue
new file mode 100644
index 0000000..9238aa0
--- /dev/null
+++ b/src/components/wordtpl/components/HyperlinkDrawer.vue
@@ -0,0 +1,62 @@
+<!--超链接-->
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="超链接" width="600" showFooter @ok="handleOk">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script setup lang="ts">
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+
+  let emit = defineEmits(['register', 'ok']);
+
+  const schemas: FormSchema[] = [
+    {
+      label: '链接名称',
+      field: 'name',
+      component: 'Input',
+      rules: [{ required: true, message: '请填写链接名称' }],
+    },
+    {
+      label: '链接地址',
+      field: 'url',
+      component: 'Input',
+      componentProps: {
+        min: 0,
+      },
+      rules: [{ required: true, message: '请填写链接地址' }],
+    },
+  ];
+
+  const [registerForm, { setFieldsValue, resetFields, validate, clearValidate }] = useForm({
+    schemas,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  //注册Drawer
+  const [registerBaseDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    resetFields();
+    setFieldsValue({
+      ...data,
+    });
+    clearValidate();
+  });
+
+  /**
+   * 确定事件
+   */
+  async function handleOk() {
+    let values = await validate();
+    emit('ok', values);
+    closeDrawer();
+  }
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/wordtpl/components/PagerMarginDrawer.vue b/src/components/wordtpl/components/PagerMarginDrawer.vue
new file mode 100644
index 0000000..1337194
--- /dev/null
+++ b/src/components/wordtpl/components/PagerMarginDrawer.vue
@@ -0,0 +1,82 @@
+<!--边距页面-->
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="设置边距" width="600" showFooter @ok="handleOk">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script setup lang="ts">
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+
+  let emit = defineEmits(['register','ok']);
+  
+  const schemas: FormSchema[] = [
+    {
+      label:'上边距',
+      field: 'marginTop',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: [{ required: true, message: '请填写上边距' }],
+    },
+    {
+      label:'下边距',
+      field: 'marginBottom',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: [{ required: true, message: '请填写下边距' }],
+    },
+    {
+      label:'左边距',
+      field: 'marginLeft',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: [{ required: true, message: '请填写左边距' }],
+    },
+    {
+      label:'右边距',
+      field: 'marginRight',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: [{ required: true, message: '请填写右边距' }],
+    },
+  ];
+
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    schemas,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  //注册Drawer
+  const [registerBaseDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    resetFields();
+    setFieldsValue({
+      ...data,
+    });
+  });
+
+  /**
+   * 确定事件
+   */
+  async function handleOk() {
+    let values = await validate();
+    emit('ok', values);
+    closeDrawer();
+  }
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-input-number){
+    width: 100%;
+  }
+</style>
diff --git a/src/components/wordtpl/components/WatermarkDrawer.vue b/src/components/wordtpl/components/WatermarkDrawer.vue
new file mode 100644
index 0000000..fe082e9
--- /dev/null
+++ b/src/components/wordtpl/components/WatermarkDrawer.vue
@@ -0,0 +1,108 @@
+<!--水印页面-->
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="设置水印" width="600" showFooter @ok="handleOk">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script setup lang="ts">
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+
+  let emit = defineEmits(['register', 'ok']);
+
+  const schemas: FormSchema[] = [
+    {
+      label: '内容',
+      field: 'data',
+      component: 'Input',
+      rules: [{ required: true, message: '请填写内容' }],
+    },
+    {
+      label: '颜色',
+      field: 'color',
+      component: 'Input',
+      componentProps: {
+        type: 'color',
+      },
+      rules: [{ required: true, message: '请选择颜色' }],
+      defaultValue: '#AEB5C0',
+    },
+    {
+      label: '字体大小',
+      field: 'size',
+      component: 'InputNumber',
+      componentProps: {
+        min: 10,
+      },
+      defaultValue: 50,
+      rules: [{ required: true, message: '请填写字体大小' }],
+    },
+    {
+      label: '透明度',
+      field: 'opacity',
+      component: 'Slider',
+      componentProps: {
+        min: 0.1,
+        max: 1,
+        step: 0.1,
+      },
+      defaultValue: 0.3,
+      rules: [{ required: true, message: '请填写透明度' }],
+    },
+    {
+      label: '重复',
+      field: 'repeat',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '不重复', value: '0' },
+          { label: '重复', value: '1' },
+        ],
+      },
+      defaultValue: '0',
+    },
+    {
+      label: '水平间隔',
+      field: 'horizontalGap',
+      component: 'InputNumber',
+      defaultValue: 10,
+    },
+    {
+      label: '垂直间隔',
+      field: 'verticalGap',
+      component: 'InputNumber',
+      defaultValue: 10,
+    },
+  ];
+
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    schemas,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  //注册Drawer
+  const [registerBaseDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    resetFields();
+    setFieldsValue({
+      ...data,
+    });
+  });
+
+  /**
+   * 确定事件
+   */
+  async function handleOk() {
+    let values = await validate();
+    emit('ok', values);
+    closeDrawer();
+  }
+</script>
+
+<style scoped lang="less">
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/components/wordtpl/style/DocDesign.css b/src/components/wordtpl/style/DocDesign.css
new file mode 100644
index 0000000..d4ac4e1
--- /dev/null
+++ b/src/components/wordtpl/style/DocDesign.css
@@ -0,0 +1,1069 @@
+.content {
+  display: flex;
+}
+
+.space-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.header {
+  height: 64px;
+  padding: 0;
+  background-color: #fff;
+  .header-title {
+    width: 200px;
+  }
+  .headerRight {
+    padding-right: 24px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.9);
+    .role-name {
+      margin-right: 8px;
+    }
+  }
+  .header-name {
+    width: 100%;
+    padding: 0 16px;
+    background-color: rgba(208, 208, 208, 0);
+    font-size: 18px;
+    line-height: 30px;
+    color: #1a1a1a;
+    font-weight: bold;
+    margin: 5px 0;
+  }
+}
+
+.center {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  margin: 0 10px;
+  width: 100%;
+  .left-action {
+    left: -10px;
+    border-radius: 0 3px 3px 0;
+  }
+
+  .right-action {
+    border-radius: 3px 0 0 3px;
+    right: -13px;
+  }
+
+  .action-icon {
+    cursor: pointer;
+    transition: all 0.3s;
+    position: absolute;
+    top: 50%;
+
+    transform: translateY(-50%);
+    z-index: 999;
+    background-color: #ffffff;
+    width: 10px;
+    height: 48px;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+.menu {
+  width: 100%;
+  height: 60px;
+  margin: 0 auto;
+  top: 0;
+  z-index: 9;
+  overflow-x: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f2f4f7;
+  box-shadow: 0 2px 4px 0 transparent;
+  .menu-item {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  .menu-item > div {
+    width: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 2px;
+  }
+
+  .menu-item > div:hover {
+    background: rgba(25, 55, 88, 0.04);
+  }
+
+  .menu-item > div.active {
+    background: rgba(25, 55, 88, 0.08);
+  }
+
+  i {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.menu-item>div>span {
+  width: 16px;
+  height: 3px;
+  display: inline-block;
+  border: 1px solid #e2e6ed;
+}
+
+.jeecg-menu-item-save i {
+  background-image: url('/@/assets/images/wordtpl/images/save.svg');
+}
+.jeecg-menu-item-upload i {
+  background-image: url('/@/assets/images/wordtpl/images/upload.svg');
+}
+.menu-item-preview i {
+  background-image: url('/@/assets/images/wordtpl/images/preview.svg');
+}
+.jeecg-menu-item-undo i {
+  background-image: url('/@/assets/images/wordtpl/images/undo.svg');
+}
+.jeecg-menu-item-redo i {
+  background-image: url('/@/assets/images/wordtpl/images/redo.svg');
+}
+.jeecg-menu-item-painter i {
+  background-image: url('/@/assets/images/wordtpl/images/painter.svg');
+}
+.jeecg-menu-item-format i {
+  background-image: url('/@/assets/images/wordtpl/images/format.svg');
+}
+.jeecg-menu-item-size-add i {
+  background-image: url('/@/assets/images/wordtpl/images/size-add.svg');
+}
+.jeecg-menu-item-size-minus i {
+  background-image: url('/@/assets/images/wordtpl/images/size-minus.svg');
+}
+.jeecg-menu-item-bold i {
+  background-image: url('/@/assets/images/wordtpl/images/bold.svg');
+}
+.jeecg-menu-item-italic i {
+  background-image: url('/@/assets/images/wordtpl/images/italic.svg');
+}
+
+.jeecg-menu-item-underline>i{
+  flex-shrink: 0;
+  background-image: url('/@/assets/images/wordtpl/images/underline.svg');
+}
+.jeecg-menu-item-underline li[data-decoration-style="solid"]{
+  background-image: url(/@/assets/images/wordtpl/images/line-single.svg);
+  background-repeat: no-repeat;
+}
+.jeecg-menu-item-underline li[data-decoration-style="double"]{
+  background-image: url(/@/assets/images/wordtpl/images/line-double.svg);
+  background-repeat: no-repeat;
+}
+.jeecg-menu-item-underline li[data-decoration-style="dashed"]{
+  background-image: url(/@/assets/images/wordtpl/images/line-dash-small-gap.svg);
+  background-repeat: no-repeat;
+}
+.jeecg-menu-item-underline li[data-decoration-style="dotted"]{
+  background-image: url(/@/assets/images/wordtpl/images/line-dot.svg);
+  background-repeat: no-repeat;
+}
+.jeecg-menu-item-underline li[data-decoration-style="wavy"] {
+  background-image: url(/@/assets/images/wordtpl/images/line-wavy.svg);
+  background-repeat: no-repeat;
+}
+.jeecg-menu-item-underline li i{
+  pointer-events: none;
+  padding: 1px 5px !important;
+}
+
+.jeecg-menu-item-underline .select {
+  width: 100%;
+  height: 100%;
+}
+.jeecg-menu-item-strikeout i{
+  background-image: url('/@/assets/images/wordtpl/images/strikeout.svg');
+}
+
+.jeecg-menu-item-superscript i{
+  background-image: url('/@/assets/images/wordtpl/images/superscript.svg');
+}
+
+.jeecg-menu-item-subscript i{
+  background-image: url('/@/assets/images/wordtpl/images/subscript.svg');
+}
+
+.jeecg-menu-item-color i{
+  background-image: url('/@/assets/images/wordtpl/images/color.svg');
+}
+
+.jeecg-menu-item-highlight i{
+  background-image: url('/@/assets/images/wordtpl/images/highlight.svg');
+}
+
+.jeecg-menu-item-cellcolor i{
+  background-image: url('/@/assets/images/wordtpl/images/cellcolor.svg');
+}
+
+.jeecg-menu-item-title i{
+  background-image: url('/@/assets/images/wordtpl/images/title.svg');
+}
+
+.jeecg-menu-item-left i{
+  background-image: url('/@/assets/images/wordtpl/images/left.svg');
+}
+
+.jeecg-menu-item-center i{
+  background-image: url('/@/assets/images/wordtpl/images/center.svg');
+}
+
+.jeecg-menu-item-right i{
+  background-image: url('/@/assets/images/wordtpl/images/right.svg');
+}
+
+.jeecg-menu-item-alignment i{
+  background-image: url('/@/assets/images/wordtpl/images/alignment.svg');
+}
+
+.jeecg-menu-item-row-margin i{
+  background-image: url('/@/assets/images/wordtpl/images/row-margin.svg');
+}
+
+.jeecg-menu-item-list i{
+  background-image: url('/@/assets/images/wordtpl/images/list.svg');
+}
+
+.jeecg-menu-item-download i{
+  background-image: url('/@/assets/images/wordtpl/images/download.svg');
+}
+
+.jeecg-menu-item-chart i {
+  background-image: url('/@/assets/images/wordtpl/images/chart.svg');
+}
+
+.jeecg-menu-item-table i {
+  background-image: url('/@/assets/images/wordtpl/images/table.svg');
+}
+
+.jeecg-menu-item-image i {
+  background-image: url('/@/assets/images/wordtpl/images/image.svg');
+}
+
+.jeecg-menu-item-barcode i {
+  background-image: url('/@/assets/images/wordtpl/images/barcode.svg');
+}
+
+.jeecg-menu-item-qrcode i {
+  background-image: url('/@/assets/images/wordtpl/images/qrcode.svg');
+}
+
+.jeecg-menu-item-hyperlink i {
+  background-image: url('/@/assets/images/wordtpl/images/hyperlink.svg');
+}
+
+.jeecg-menu-item-separator>i {
+  background-image: url('/@/assets/images/wordtpl/images/separator.svg');
+}
+
+.jeecg-menu-item-watermark i {
+  background-image: url('/@/assets/images/wordtpl/images/watermark.svg');
+}
+
+.jeecg-menu-item-page-break i {
+  background-image: url('/@/assets/images/wordtpl/images/page-break.svg');
+}
+.jeecg-menu-item-search i {
+  background-image: url('/@/assets/images/wordtpl/images/search.svg');
+}
+
+.jeecg-menu-item-print i {
+  background-image: url('/@/assets/images/wordtpl/images/print.svg');
+}
+
+
+.jeecg-menu-item-color,
+.jeecg-menu-item-highlight,
+.jeecg-menu-item-cellcolor {
+  display: flex;
+  flex-direction: column;
+}
+
+.jeecg-menu-item-color #color,
+.jeecg-menu-item-highlight #highlight,
+.jeecg-menu-item-cellcolor #cellcolor {
+  width: 1px;
+  height: 1px;
+  visibility: hidden;
+  outline: none;
+  appearance: none;
+}
+
+.jeecg-menu-item-highlight span{
+  background-color: #ffff00;
+}
+
+.jeecg-menu-item-color span {
+  background-color: #000000;
+}
+.menu-item .jeecg-menu-item-underline .options {
+  width: 128px !important;
+}
+
+.menu-item .jeecg-menu-item-underline .options li{
+  padding: 1px 5px;
+}
+
+ul{
+  list-style: none;
+}
+
+
+.editor-container {
+  height: calc(100vh - 164px);
+  overflow-y: auto;
+}
+
+.no-allow {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.menu-item .menu-item__font {
+  width: 70px !important;
+  position: relative;
+  font-size: 14px;
+}
+
+.menu-item .select {
+  border: none;
+  font-size: 14px;
+  line-height: 24px;
+  user-select: none;
+}
+
+.menu-item .select::after {
+  position: absolute;
+  content: '';
+  top: 11px;
+  width: 0;
+  height: 0;
+  right: 2px;
+  border-color: #767c85 transparent transparent;
+  border-style: solid solid none;
+  border-width: 4px 4px 0;
+}
+
+.menu-item .options {
+  width: 110px;
+  position: fixed;
+  top: 113px;
+  padding: 10px;
+  font-size: 14px;
+  border: 1px solid #e2e6ed;
+  display: none;
+  box-sizing: border-box;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+  list-style: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  z-index: 1050;
+  overflow: hidden;
+  font-variant: initial;
+  background-color: #ffffff;
+  border-radius: 8px;
+  outline: none;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  align-items: center;
+}
+
+.menu-item .options.visible {
+  display: block;
+  z-index: 99;
+}
+
+.menu-item .options li {
+  position: relative;
+  display: block;
+  min-height: 32px;
+  padding: 5px 12px;
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  border-radius: 4px;
+}
+
+.menu-item .options li:hover {
+  background-color: #ebecef;
+}
+
+.menu-item .options li.active {
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 600;
+  background-color: #e6f4ff;
+}
+
+.menu-item .jeecg-menu-item-font {
+  width: 65px;
+  position: relative;
+}
+
+.menu-item .jeecg-menu-item-size {
+  width: 50px;
+  text-align: center;
+  position: relative;
+}
+
+.jeecg-menu-item-font .select,
+.jeecg-menu-item-size .select {
+  width: 100%;
+  height: 100%;
+}
+
+.menu-item .jeecg-menu-item-font {
+  width: 70px!important;;
+  position: relative;
+}
+
+.menu-item .jeecg-menu-item-size {
+  width: 50px !important;
+  text-align: center;
+  position: relative;
+}
+
+.jeecg-menu-item-size .options,.jeecg-menu-item-font .options{
+  height: 566px;
+  overflow-y: auto;
+}
+
+.jeecg-menu-item-redo.no-allow,
+.jeecg-menu-item-undo.no-allow,
+.menu-item > div.disable {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.menu-item .options.visible {
+  display: block;
+  z-index: 99;
+}
+
+.menu-item .jeecg-menu-item-underline {
+  width: 30px !important;
+  position: relative;
+}
+
+.jeecg__editor {
+  display: grid;
+  justify-content: center;
+}
+
+.menu-item .jeecg-menu-item-title {
+  width: 60px !important;
+  position: relative;
+}
+
+.jeecg-menu-item-title .select {
+  width: calc(100% - 20px);
+  height: 100%;
+  font-size: 12px !important;
+}
+
+.jeecg-menu-item-title .options {
+  width: 114px;
+}
+
+.jeecg-menu-item-list {
+  position: relative;
+}
+
+.jeecg-menu-item-list .options {
+  width: 150px !important;
+}
+
+.jeecg-menu-item-list .options>ul>li * {
+  pointer-events: none !important;
+}
+
+.jeecg-menu-item-list .options>ul>li li {
+  margin-left: 18px !important;
+}
+.jeecg-menu-item-list .options>ul>li ol {
+  margin: 0;
+  padding: 0;
+}
+
+.menu-item .jeecg-menu-item-table-collapse {
+  width: 270px !important;
+  height: 310px;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%);
+  border: 1px solid #e2e6ed;
+  box-sizing: border-box;
+  border-radius: 2px;
+  position: fixed;
+  z-index: 99;
+  top: 113px;
+  padding: 14px 27px;
+  cursor: auto !important;
+}
+
+.menu-item .jeecg-menu-item-table-collapse .table-close {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  cursor: pointer;
+}
+
+.menu-item .jeecg-menu-item-table-collapse .table-close:hover {
+  color: #7d7e80 !important;;
+}
+
+.menu-item .jeecg-menu-item-table-collapse:hover {
+  background: #fff !important;
+}
+
+.menu-item .jeecg-menu-item-table-collapse .table-title {
+  display: flex;
+  justify-content: flex-start;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #e2e6ed;
+}
+
+.table-title span {
+  font-size: 12px;
+  color: #3d4757;
+  display: inline;
+  margin: 0;
+}
+
+:deep(.table-panel) {
+  cursor: pointer;
+}
+
+:deep(.table-panel .table-row) {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: 10px;
+  pointer-events: none;
+}
+
+:deep(.table-panel .table-cel) {
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid #e2e6ed;
+  background: #fff;
+  position: relative;
+  margin-right: 6px;
+  pointer-events: none;
+}
+
+:deep(.table-panel .table-cel.active) {
+  border: 1px solid rgba(73, 145, 242, .2);
+  background: rgba(73, 145, 242, .15);
+}
+
+:deep(.table-panel .table-row .table-cel:last-child) {
+  margin-right: 0;
+}
+
+.jeecg-menu-item-image input{
+  display: none;
+}
+
+.menu-item .jeecg-menu-item-separator .options {
+  width: 128px !important;
+}
+
+.menu-item .jeecg-menu-item-separator li {
+  padding: 1px 5px;
+  min-height: 20px;
+}
+
+.jeecg-menu-item-separator li i {
+  pointer-events: none;
+}
+
+.jeecg-menu-item-separator .more input{
+  width: 100%;
+}
+.jeecg-menu-item-separator .more div span{
+  width: 30px;
+}
+.jeecg-menu-item-separator .more .menu{
+  margin-top: 20px;
+}
+.jeecg-menu-item-separator .more .menu button:last-child{
+  margin-left: 8px;
+}
+
+.jeecg-menu-item-separator li[data-separator="0,0"] {
+  background: url('/@/assets/images/wordtpl/images/line-single.svg') no-repeat;
+}
+
+.jeecg-menu-item-separator li[data-separator="1,1"] {
+  background: url('/@/assets/images/wordtpl/images/line-dot.svg') no-repeat;
+}
+
+.jeecg-menu-item-separator li[data-separator="3,1"] {
+  background: url('/@/assets/images/wordtpl/images/line-dash-small-gap.svg') no-repeat;
+}
+
+.jeecg-menu-item-separator li[data-separator="4,4"] {
+  background: url('/@/assets/images/wordtpl/images/line-dash-large-gap.svg') no-repeat;
+}
+
+.jeecg-menu-item-separator li[data-separator="7,3,3,3"] {
+  background: url('/@/assets/images/wordtpl/images/line-dash-dot.svg') no-repeat;
+}
+
+.jeecg-menu-item-separator li[data-separator="6,2,2,2,2,2"] {
+  background: url('/@/assets/images/wordtpl/images/line-dash-dot-dot.svg') no-repeat;
+}
+
+.jeecg-menu-item-search {
+  position: relative;
+}
+
+
+.menu-item .jeecg-menu-item-search-collapse {
+  width: 260px !important;
+  height: 72px;
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 99;
+  top: 113px;
+  left: 0;
+  background: #ffffff;
+  box-shadow: 0 5px 5px #e3dfdf;
+}
+
+.menu-item .jeecg-menu-item-search-collapse:hover {
+  background: #ffffff;
+}
+
+.menu-item .jeecg-menu-item-search-collapse>div {
+  width: 250px;
+  height: 36px;
+  padding: 0 5px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse>div input {
+  width: 205px;
+  height: 27px;
+  appearance: none;
+  background-color: #fff;
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+  box-sizing: border-box;
+  color: #606266;
+  display: inline-block;
+  line-height: 27px;
+  outline: none;
+  padding: 0 5px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse>div span {
+  height: 100%;
+  color: #dcdfe6;
+  font-size: 25px;
+  display: inline-block;
+  border: 0;
+  padding: 0 10px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse button {
+  display: inline-block;
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+  background: #fff;
+  line-height: 22px;
+  padding: 0 6px;
+  white-space: nowrap;
+  margin-left: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-replace button:hover {
+  background: rgba(25, 55, 88, .04);
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search {
+  position: relative;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search label {
+  right: 110px;
+  font-size: 12px;
+  color: #3d4757;
+  position: absolute;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search>input {
+  padding: 5px 90px 5px 5px !important;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search>div {
+  width: 28px;
+  height: 27px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  border-left: 1px solid #e2e6ed;
+  transition: all .5s;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search>div:hover {
+  background-color: rgba(25, 55, 88, 0.04);
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search i {
+  width: 6px;
+  height: 8px;
+  transform: translateY(1px);
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search .arrow-left {
+  right: 76px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search .arrow-left i {
+  background: url(/@/assets/images/wordtpl/images/arrow-left.svg) no-repeat;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search .arrow-right {
+  right: 48px;
+}
+
+.menu-item .jeecg-menu-item-search-collapse-search .arrow-right i {
+  background: url(/@/assets/images/wordtpl/images/arrow-right.svg) no-repeat;
+}
+
+.footer {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  background: #f2f4f7;
+  z-index: 9;
+  bottom: 0;
+  left: 0;
+  font-size: 12px;
+  padding: 0 4px 0 20px;
+  box-sizing: border-box;
+}
+
+.footer>div:first-child {
+  display: flex;
+  align-items: center;
+}
+
+.footer .catalog-mode {
+  padding: 1px;
+  position: relative;
+}
+
+.footer .catalog-mode i {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  cursor: pointer;
+  display: block;
+  background-image: url('/@/assets/images/wordtpl/images/catalog.svg');
+}
+
+.footer .page-mode {
+  padding: 1px;
+  position: relative;
+}
+
+.footer .page-mode i {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  cursor: pointer;
+  display: block;
+  background-image: url('/@/assets/images/wordtpl/images/page-mode.svg');
+}
+
+.footer .options {
+  width: 72px;
+  position: absolute;
+  bottom: 26px;
+  padding: 10px;
+  top: unset !important;
+  left: unset !important;
+  font-size: 14px;
+  border: 1px solid #e2e6ed;
+  display: none;
+  box-sizing: border-box;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+  list-style: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  z-index: 1050;
+  overflow: hidden;
+  font-variant: initial;
+  background-color: #ffffff;
+  border-radius: 8px;
+  outline: none;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  align-items: center;
+}
+
+.footer .options.visible {
+  display: block;
+}
+
+.footer .options li {
+  position: relative;
+  display: block;
+  min-height: 32px;
+  padding: 5px 10px;
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  border-radius: 4px;
+}
+
+.footer .options li:hover {
+  background-color: #ebecef;
+}
+
+.footer .options li.active {
+  color: rgba(0, 0, 0, 0.88);
+  font-weight: 600;
+  background-color: #e6f4ff;
+}
+
+.footer>div:first-child>span {
+  display: inline-block;
+  margin-right: 5px;
+  letter-spacing: 1px;
+}
+
+.footer>div:last-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer>div:last-child>div {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer>div:last-child>div:hover {
+  background: rgba(25, 55, 88, .04);
+}
+
+.footer>div:last-child i {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.footer .editor-option i {
+  background-image: url('/@/assets/images/wordtpl/images/option.svg');
+}
+
+.footer .page-scale-minus i {
+  background-image: url('/@/assets/images/wordtpl/images/page-scale-minus.svg');
+}
+
+.footer .page-scale-add i {
+  background-image: url('/@/assets/images/wordtpl/images/page-scale-add.svg');
+}
+
+.footer .page-scale-percentage {
+  cursor: pointer;
+  user-select: none;
+}
+
+.footer .fullscreen i {
+  background-image: url('/@/assets/images/wordtpl/images/request-fullscreen.svg');
+}
+
+.footer .fullscreen.exist i {
+  background-image: url('/@/assets/images/wordtpl/images/exit-fullscreen.svg');
+}
+
+.footer .paper-margin i {
+  background-image: url('/@/assets/images/wordtpl/images/paper-margin.svg');
+}
+
+.footer .editor-mode {
+  cursor: pointer;
+  user-select: none;
+}
+
+.footer .paper-size {
+  position: relative;
+}
+
+.footer .paper-size i {
+  background-image: url('/@/assets/images/wordtpl/images/paper-size.svg');
+}
+
+.footer .paper-size .options {
+  width: 100px !important;
+  height: 340px !important;
+  right: 0;
+  left: unset;
+}
+
+.footer .paper-direction {
+  position: relative;
+}
+
+.footer .paper-direction i {
+  background-image: url('/@/assets/images/wordtpl/images/paper-direction.svg');
+}
+
+.footer .paper-direction .options {
+  right: 0;
+  left: unset;
+  height: 84px;
+}
+.footer .page-mode .options{
+  height: 80px;
+}
+
+.catalog{
+  width: 250px;
+  position: absolute;
+  bottom: 0;
+  top: 70px;
+  padding: 0 20px 40px 20px;
+}
+
+.catalog .jeecg-catalog-header {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e2e6ed;
+}
+
+.catalog .jeecg-catalog-header span {
+  color: #3d4757;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.catalog .jeecg-catalog-header i {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  display: inline-block;
+  background: url(/@/assets/images/wordtpl/images/close.svg) no-repeat;
+  transition: all .2s;
+}
+
+.catalog .jeecg-catalog-header>div:hover {
+  background: rgba(235, 238, 241);
+}
+
+.jeecg-catalog-main {
+  height: calc(100% - 60px);
+  padding: 10px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.jeecg-catalog-main .catalog-item {
+  width: 100%;
+  padding-left: 10px;
+  box-sizing: border-box;
+}
+
+.jeecg-catalog-main>.catalog-item {
+  padding-left: 0;
+}
+
+:deep(.jeecg-catalog-main .catalog-item .jeecg-catalog-item-content) {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:deep(.jeecg-catalog-main .catalog-item .jeecg-catalog-item-content:hover >span) {
+  color: #4991f2;
+}
+
+:deep(.jeecg-catalog-main .catalog-item .jeecg-catalog-item-content span) {
+  color: #3d4757;
+  line-height: 30px;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+
+.jeecg-menu-item-row-margin .options{
+  width: 76px;
+  height: 242px;
+}
+
+.jeecg-menu-item-underline .options{
+  height: 180px;
+}
+
+ol, ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  display: list-item !important;
+  text-align: -webkit-match-parent;
+  unicode-bidi: isolate;
+}
diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
new file mode 100644
index 0000000..eb4c1af
--- /dev/null
+++ b/src/design/ant/btn.less
@@ -0,0 +1,323 @@
+// button reset
+.ant-btn {
+  // display: inline-flex;
+  // justify-content: center;
+  // align-items: center;
+  // &.ant-btn-success:not(.ant-btn-link),
+  // &.ant-btn-error:not(.ant-btn-link),
+  // &.ant-btn-warning:not(.ant-btn-link),
+  // &.ant-btn-primary:not(.ant-btn-link) {
+  //   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
+  // }
+  // &-group {
+  //   .ant-btn:not(:first-child) {
+  //     bottom: 1px;
+  //   }
+  // }
+  &-link:hover,
+  &-link:focus,
+  &-link:active {
+    border-color: transparent !important;
+  }
+
+  &-primary {
+    // update-begin--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+    // color: @white;
+    // background-color: @button-primary-color;
+    // update-end--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+
+    &:hover,
+    &:focus {
+      // update-begin--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+      // color: @white;
+      // background-color: @button-primary-hover-color;
+      // update-end--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+    }
+    //
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: fade(@button-cancel-color, 40%) !important;
+    //  background-color: fade(@button-cancel-bg-color, 40%) !important;
+    //  border-color: fade(@button-cancel-border-color, 40%) !important;
+    //}
+  }
+
+  &-primary:not(&-background-ghost):not([disabled]) {
+    color: @white;
+  }
+
+  //&-primary:not(&-background-ghost) {
+  //  border-width: 0;
+  //}
+
+  &-default {
+    // update-begin--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+    // color: @button-cancel-color;
+    // background-color: @button-cancel-bg-color;
+    // border-color: @button-cancel-border-color;
+
+    // &:hover,
+    // &:focus {
+    //   color: @button-cancel-hover-color;
+    //   background-color: @button-cancel-hover-bg-color;
+    //   border-color: @button-cancel-hover-border-color;
+    // }
+    // update-end--author:liaozhiyang---date:20240223---for：【QQYUN-8327】btn样式显示不正确
+    //
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: fade(@button-cancel-color, 40%) !important;
+    //  background: fade(@button-cancel-bg-color, 40%) !important;
+    //  border-color: fade(@button-cancel-border-color, 40%) !important;
+    //}
+  }
+
+  [data-theme='light'] &.ant-btn-link.is-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    text-shadow: none;
+    cursor: not-allowed !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none;
+  }
+
+  [data-theme='dark'] &.ant-btn-link.is-disabled {
+    color: rgba(255, 255, 255, 0.25) !important;
+    text-shadow: none;
+    cursor: not-allowed !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none;
+  }
+
+  // color: @white;
+
+  &-success.ant-btn-link:not([disabled='disabled']) {
+    color: @button-success-color;
+
+    &:hover,
+    &:focus {
+      color: @button-success-hover-color;
+      border-color: transparent;
+    }
+
+    &:active {
+      color: @button-success-active-color;
+    }
+  }
+
+  &-success.ant-btn-link.ant-btn-loading,
+  &-warning.ant-btn-link.ant-btn-loading,
+  &-error.ant-btn-link.ant-btn-loading,
+  &-background-ghost.ant-btn-link.ant-btn-loading,
+  &.ant-btn-link.ant-btn-loading {
+    &::before {
+      background: transparent;
+    }
+  }
+
+  &-success:not(.ant-btn-link, .is-disabled) {
+    color: @white;
+    background-color: @button-success-color;
+    border-color: @button-success-color;
+    //border-width: 0;
+
+    &:hover,
+    &:focus {
+      color: @white;
+      background-color: @button-success-hover-color;
+      border-color: @button-success-hover-color;
+    }
+
+    &:active {
+      background-color: @button-success-active-color;
+      border-color: @button-success-active-color;
+    }
+
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-success-color, 40%);
+    //  border-color: fade(@button-success-color, 40%);
+    //}
+  }
+
+  &-warning.ant-btn-link:not([disabled='disabled']) {
+    color: @button-warn-color;
+
+    &:hover,
+    &:focus {
+      color: @button-warn-hover-color;
+      border-color: transparent;
+    }
+
+    &:active {
+      color: @button-warn-active-color;
+    }
+  }
+
+  &-warning:not(.ant-btn-link, .is-disabled) {
+    color: @white;
+    background-color: @button-warn-color;
+    border-color: @button-warn-color;
+    //border-width: 0;
+
+    &:hover,
+    &:focus {
+      color: @white;
+      background-color: @button-warn-hover-color;
+      border-color: @button-warn-hover-color;
+    }
+
+    &:active {
+      background-color: @button-warn-active-color;
+      border-color: @button-warn-active-color;
+    }
+
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-warn-color, 40%);
+    //  border-color: fade(@button-warn-color, 40%);
+    //}
+  }
+
+  &-error.ant-btn-link:not([disabled='disabled']) {
+    color: @button-error-color;
+
+    &:hover,
+    &:focus {
+      color: @button-error-hover-color;
+      border-color: transparent;
+    }
+
+    &:active {
+      color: @button-error-active-color;
+    }
+  }
+
+  &-error:not(.ant-btn-link, .is-disabled) {
+    color: @white;
+    background-color: @button-error-color;
+    border-color: @button-error-color;
+    //border-width: 0;
+
+    &:hover,
+    &:focus {
+      color: @white;
+      background-color: @button-error-hover-color;
+      border-color: @button-error-hover-color;
+    }
+
+    &:active {
+      background-color: @button-error-active-color;
+      border-color: @button-error-active-color;
+    }
+
+    //&[disabled],
+    //&[disabled]:hover {
+    //  color: @white;
+    //  background-color: fade(@button-error-color, 40%);
+    //  border-color: fade(@button-error-color, 40%);
+    //}
+  }
+
+  &-background-ghost {
+    border-width: 1px;
+    background-color: transparent !important;
+
+    &[disabled],
+    &[disabled]:hover {
+      color: fade(@white, 40%) !important;
+      background-color: transparent !important;
+      border-color: fade(@white, 40%) !important;
+    }
+  }
+
+  &-dashed&-background-ghost,
+  &-default&-background-ghost {
+    color: @button-ghost-color;
+    border-color: @button-ghost-color;
+
+    &:hover,
+    &:focus {
+      color: @button-ghost-hover-color;
+      border-color: @button-ghost-hover-color;
+    }
+
+    &:active {
+      color: @button-ghost-active-color;
+      border-color: @button-ghost-active-color;
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      color: fade(@white, 40%) !important;
+      border-color: fade(@white, 40%) !important;
+    }
+  }
+
+  &-background-ghost&-success:not(.ant-btn-link) {
+    color: @button-success-color;
+    background-color: transparent;
+    border-color: @button-success-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-success-hover-color !important;
+      border-color: @button-success-hover-color;
+    }
+
+    &:active {
+      color: @button-success-active-color;
+      border-color: @button-success-active-color;
+    }
+  }
+
+  &-background-ghost&-warning:not(.ant-btn-link) {
+    color: @button-warn-color;
+    background-color: transparent;
+    border-color: @button-warn-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-warn-hover-color !important;
+      border-color: @button-warn-hover-color;
+    }
+
+    &:active {
+      color: @button-warn-active-color;
+      border-color: @button-warn-active-color;
+    }
+  }
+
+  &-background-ghost&-error:not(.ant-btn-link) {
+    color: @button-error-color;
+    background-color: transparent;
+    border-color: @button-error-color;
+    border-width: 1px;
+
+    &:hover,
+    &:focus {
+      color: @button-error-hover-color !important;
+      border-color: @button-error-hover-color;
+    }
+
+    &:active {
+      color: @button-error-active-color;
+      border-color: @button-error-active-color;
+    }
+  }
+
+  &-ghost.ant-btn-link:not([disabled='disabled']) {
+    color: @button-ghost-color;
+
+    &:hover,
+    &:focus {
+      color: @button-ghost-hover-color;
+      border-color: transparent;
+    }
+  }
+}
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
new file mode 100644
index 0000000..e0dcf44
--- /dev/null
+++ b/src/design/ant/index.less
@@ -0,0 +1,212 @@
+@import './pagination.less';
+@import './input.less';
+// update-begin--author:liaozhiyang---date:20240130---for：【issues/5857】Button color类型颜色失效
+@import './btn.less';
+// update-end--author:liaozhiyang---date:20240130---for：【issues/5857】Button color类型颜色失效
+// @import './table.less';
+
+// TODO beta.11 fix
+.ant-col {
+  width: 100%;
+}
+
+.ant-image-preview-root {
+  img {
+    display: unset;
+  }
+}
+//update-begin---author:scott ---date:2023-08-28  for����QQYUN-6374��UnoCSS���windicss����Ӧ����ʽ����--
+/*span.anticon:not(.app-iconify) {
+  vertical-align: 0.125em !important;
+}*/
+//update-end---author:scott ---date::2023-08-28  for����QQYUN-6374��UnoCSS���windicss����Ӧ����ʽ����--
+
+.ant-back-top {
+  right: 20px;
+  bottom: 20px;
+}
+
+.collapse-container__body {
+  > .ant-descriptions {
+    margin-left: 6px;
+  }
+}
+
+.ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.ant-popover {
+  &-content {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+// =================================
+// ==============modal message======
+// =================================
+.modal-icon-warning {
+  color: @warning-color !important;
+}
+
+.modal-icon-success {
+  color: @success-color !important;
+}
+
+.modal-icon-error {
+  color: @error-color !important;
+}
+
+.modal-icon-info {
+  color: @primary-color !important;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner::after,
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
+  border-top: 0 !important;
+  border-left: 0 !important;
+}
+
+// update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+.ant-modal {
+  .ant-modal-close {
+    // update-begin--author:liaozhiyang---date:20241010---for：【issues/7260】原生a-modal关闭按钮位置偏移
+    // position: absolute;
+    // top: 0;
+    // right: 0;
+    top: 13px;
+    // update-end--author:liaozhiyang---date:20241010---for：【issues/7260】原生a-modal关闭按钮位置偏移
+    width: auto;
+    height: auto;
+  }
+  .ant-modal-content {
+    padding: 0;
+  }
+}
+
+.ant-input-affix-wrapper > input.ant-input {
+  font-size: 14px;
+}
+
+.ant-pagination-options-size-changer.ant-select {
+  display: inline-block;
+  width: auto;
+}
+
+.ant-tree-select-dropdown .ant-select-tree .ant-select-tree-list-holder-inner {
+  align-items: stretch;
+}
+
+.ant-list .ant-list-item {padding-left: 0;padding-right: 0;}
+
+
+.ant-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  color: #000000d9;
+}
+/** anticon-down跟3.x保持一致*/ 
+.ant-dropdown-trigger>.anticon.anticon-down, .ant-dropdown-link>.anticon.anticon-down, .ant-dropdown-button>.anticon.anticon-down {
+  font-size: 10px;
+  vertical-align: baseline;
+}
+/** 表格排序箭头尺寸保持跟3.x一致 */ 
+.ant-table-wrapper .ant-table-column-sorter-up, .ant-table-wrapper .ant-table-column-sorter-down {
+  font-size: 11px;
+}
+ /** 表格头部文字颜色跟3.x版本保持一致 */
+.ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td {
+  color: #000000d9;
+  font-weight: 500;
+}
+html[data-theme='dark'] .ant-table-wrapper .ant-table-thead >tr>th, .ant-table-wrapper .ant-table-thead >tr>td {
+  color:rgba(255,255,255,.65);
+}
+ /** 下拉菜单文字和图标折叠了 */
+.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content, .ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-title-content{
+  flex: auto;
+  white-space:nowrap;
+}
+// update-end--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+
+// update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7493】多行文本内容过多时内容会覆盖掉清空按钮
+.ant-input-affix-wrapper-textarea-with-clear-btn {
+  .ant-input-clear-icon {
+    background-color: #fff;
+  }
+}
+html[data-theme='dark'] .ant-input-affix-wrapper-textarea-with-clear-btn {
+  .ant-input-clear-icon {
+    background-color: #141414;
+  }
+}
+// update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7493】多行文本内容过多时内容会覆盖掉清空按钮
+
+// update-begin--author:liaozhiyang---date:20230108---for：【QQYUN-7855】table页码同步3.x页面效果
+.ant-table-pagination.ant-pagination {
+  .ant-pagination-item-active,
+  .ant-pagination-item-active:hover {
+    background-color: @primary-color;
+    border-color: transparent;
+    a {
+      color: #fff;
+    }
+  }
+  .ant-pagination-item:not(.ant-pagination-item-active) {
+    background-color: transparent !important;
+    border-color: transparent;
+  }
+  .ant-pagination-prev,
+  .ant-pagination-next,
+  .ant-pagination-item {
+    margin: 0 4px;
+  }
+}
+// update-end--author:liaozhiyang---date:20230108---for：【QQYUN-7855】table页码同步3.x页面效果
+
+//update-begin--author:wangshuai---date:20240429---for：修改tinymce段落下拉框的字体和样式
+.tox .tox-tbtn__select-label{
+  font-size: 14px;
+}
+
+.tox .tox-tbtn--select{
+  width: 80px !important;
+}
+
+.tox .tox-collection__item-label {
+  font-size: 14px !important;
+}
+//update-end--author:wangshuai---date:20240429---for：修改tinymce段落下拉框的字体和样式
+
+// update-begin--author:liaozhiyang---date:20240605---for：【TV360X-189】统一只读样式
+html[data-theme='light'] {
+  .ant-form:not(.jeecg-form-detail-effect) {
+    .ant-select.ant-select-disabled {
+      .ant-select-selection-item {
+        color: rgba(51, 51, 51, 0.25) !important;
+        // color: rgba(51, 51, 51, 0.25);
+        .ant-select-selection-item-content {
+          color: rgba(51, 51, 51, 0.25);
+        }
+      }
+    }
+    .ant-input-number.ant-input-number-disabled {
+      .ant-input-number-input {
+        color: rgba(51, 51, 51, 0.25);
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .ant-form:not(.jeecg-form-detail-effect) {
+    .ant-input-number.ant-input-number-disabled {
+      .ant-input-number-input {
+        color:rgba(255, 255, 255, 0.25);
+      }
+    }
+  }
+}
+// update-end--author:liaozhiyang---date:20240605---for：【TV360X-189】统一只读样式
diff --git a/src/design/ant/input.less b/src/design/ant/input.less
new file mode 100644
index 0000000..57f85e5
--- /dev/null
+++ b/src/design/ant/input.less
@@ -0,0 +1,24 @@
+@import (reference) '../color.less';
+
+// input
+.ant-input {
+  &-number {
+    min-width: 110px;
+  }
+}
+
+.ant-input-affix-wrapper .ant-input-suffix {
+  right: 9px;
+}
+
+.ant-input-clear-icon {
+  margin-right: 5px;
+}
+
+.ant-input-affix-wrapper-textarea-with-clear-btn {
+  padding: 0 !important;
+
+  textarea.ant-input {
+    padding: 4px;
+  }
+}
diff --git a/src/design/ant/pagination.less b/src/design/ant/pagination.less
new file mode 100644
index 0000000..388edcc
--- /dev/null
+++ b/src/design/ant/pagination.less
@@ -0,0 +1,98 @@
+html[data-theme='dark'] {
+  .ant-pagination {
+    &.mini {
+      .ant-pagination-prev,
+      .ant-pagination-next,
+      .ant-pagination-item {
+        background-color: rgb(255 255 255 / 4%) !important;
+
+        a {
+          color: #8b949e !important;
+        }
+      }
+
+      .ant-select-arrow {
+        color: @text-color-secondary !important;
+      }
+
+      .ant-pagination-item-active {
+        background-color: @primary-color !important;
+        border: none;
+        border-radius: none !important;
+
+        a {
+          color: @white !important;
+        }
+      }
+    }
+  }
+}
+
+.ant-pagination {
+  &.mini {
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      font-size: 12px;
+      color: @text-color-base;
+      border: 1px solid;
+    }
+
+    .ant-pagination-prev:hover,
+    .ant-pagination-next:hover,
+    .ant-pagination-item:focus,
+    .ant-pagination-item:hover {
+      a {
+        color: @primary-color;
+      }
+    }
+
+    .ant-pagination-prev,
+    .ant-pagination-next,
+    .ant-pagination-item {
+      margin: 0 4px !important;
+      //update-begin---author:scott ---date:2022-09-30  for：【美化】Table分页页面默认背景色丑，去掉-----------
+      //background-color: #f4f4f5 !important;
+      //update-end---author:scott ---date::2022-09-30  for：【美化】Table分页页面默认背景色丑，去掉------------
+      border: none;
+      border-radius: none !important;
+
+      a {
+        margin-top: 1px;
+        color: #606266;
+      }
+
+      &:last-child {
+        margin-right: 0 !important;
+      }
+    }
+
+    .ant-pagination-item-active {
+      background-color: @primary-color !important;
+      border: none;
+      border-radius: none !important;
+
+      a {
+        color: @white !important;
+      }
+    }
+
+    .ant-pagination-options {
+      margin-left: 12px;
+    }
+
+    .ant-pagination-options-quick-jumper input {
+      height: 22px;
+      margin: 0 6px;
+      line-height: 22px;
+      text-align: center;
+    }
+
+    .ant-select-arrow {
+      color: @border-color-shallow-dark;
+    }
+  }
+
+  &-disabled {
+    display: none !important;
+  }
+}
diff --git a/src/design/ant/table.less b/src/design/ant/table.less
new file mode 100644
index 0000000..fabe60e
--- /dev/null
+++ b/src/design/ant/table.less
@@ -0,0 +1,76 @@
+@prefix-cls: ~'@{namespace}-basic-table';
+
+// fix table unnecessary scrollbar
+.@{prefix-cls} {
+  .hide-scrollbar-y {
+    .ant-spin-nested-loading {
+      .ant-spin-container {
+        .ant-table {
+          .ant-table-content {
+            .ant-table-scroll {
+              .ant-table-hide-scrollbar {
+                overflow-y: auto !important;
+              }
+
+              .ant-table-content {
+                overflow-y: auto !important;
+              }
+            }
+
+            .ant-table-fixed-right {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-y: auto !important;
+                }
+              }
+            }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-y: auto !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hide-scrollbar-x {
+    .ant-spin-nested-loading {
+      .ant-spin-container {
+        .ant-table {
+          .ant-table-content {
+            .ant-table-scroll {
+              .ant-table-hide-scrollbar {
+                //overflow-x: auto !important;
+              }
+
+              .ant-table-content {
+                overflow: auto !important;
+              }
+            }
+
+            .ant-table-fixed-right {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design/color.less b/src/design/color.less
new file mode 100644
index 0000000..b7ad7e2
--- /dev/null
+++ b/src/design/color.less
@@ -0,0 +1,140 @@
+html {
+  // header
+  --header-bg-color: #394664;
+  --header-bg-hover-color: #273352;
+  --header-active-menu-bg-color: #273352;
+
+  // sider
+  --sider-dark-bg-color: #273352;
+  --sider-dark-darken-bg-color: #273352;
+  --sider-dark-lighten-bg-color: #273352;
+  --sider-logo-bg-color:linear-gradient(180deg, #000000, #021d37);
+}
+
+@white: #fff;
+
+@content-bg: #f4f7f9;
+
+// :export {
+//   name: "less";
+//   mainColor: @mainColor;
+//   fontSize: @fontSize;
+// }
+@iconify-bg-color: #5551;
+
+// =================================
+// ==============border-color=======
+// =================================
+
+// Dark-dark
+@border-color-dark: #b6b7b9;
+
+// Dark-light
+@border-color-shallow-dark: #cececd;
+
+// Light-dark
+@border-color-light: @border-color-base;
+
+// =================================
+// ==============message==============
+// =================================
+
+// success-bg-color
+@success-background-color: #f1f9ec;
+// info-bg-color
+@info-background-color: #e8eff8;
+// warn-bg-color
+@warning-background-color: #fdf6ed;
+// danger-bg-color
+@danger-background-color: #fef0f0;
+
+// =================================
+// ==============Header=============
+// =================================
+
+@header-dark-bg-color: var(--header-bg-color);
+@header-dark-bg-hover-color: var(--header-bg-hover-color);
+@header-light-bg-hover-color: #f6f6f6;
+@header-light-desc-color: #7c8087;
+@header-light-bottom-border-color: #eee;
+// top-menu
+@top-menu-active-bg-color: var(--header-active-menu-bg-color);
+
+// =================================
+// ==============Menu============
+// =================================
+
+// let -menu
+@sider-logo-bg-color: var(--sider-logo-bg-color);
+@sider-dark-bg-color: var(--sider-dark-bg-color);
+@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
+@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);
+
+// trigger
+@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
+@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
+
+// =================================
+// ==============tree============
+// =================================
+// tree item hover background
+@tree-hover-background-color: #f5f7fa;
+// tree item hover font color
+@tree-hover-font-color: #f5f7fa;
+
+// =================================
+// ==============link============
+// =================================
+@link-hover-color: @primary-color;
+@link-active-color: darken(@primary-color, 10%);
+
+// =================================
+// ==============Text color-=============
+// =================================
+
+// Main text color
+@text-color-base: @text-color;
+
+// Label color
+@text-color-call-out: #606266;
+
+// Auxiliary information color-dark
+@text-color-help-dark: #909399;
+
+// =================================
+// ==============breadcrumb=========
+// =================================
+@breadcrumb-item-normal-color: #999;
+// =================================
+// ==============button=============
+// =================================
+
+@button-primary-color: @primary-color;
+@button-primary-hover-color: lighten(@primary-color, 5%);
+@button-primary-active-color: darken(@primary-color, 5%);
+
+@button-ghost-color: @white;
+@button-ghost-hover-color: lighten(@white, 10%);
+@button-ghost-hover-bg-color: #e1ebf6;
+@button-ghost-active-color: darken(@white, 10%);
+
+@button-success-color: @success-color;
+@button-success-hover-color: lighten(@success-color, 10%);
+@button-success-active-color: darken(@success-color, 10%);
+
+@button-warn-color: @warning-color;
+@button-warn-hover-color: lighten(@warning-color, 10%);
+@button-warn-active-color: darken(@warning-color, 10%);
+
+@button-error-color: @error-color;
+@button-error-hover-color: lighten(@error-color, 10%);
+@button-error-active-color: darken(@error-color, 10%);
+
+@button-cancel-color: @text-color-call-out;
+@button-cancel-bg-color: @white;
+@button-cancel-border-color: @border-color-shallow-dark;
+
+// Mouse over
+@button-cancel-hover-color: @primary-color;
+@button-cancel-hover-bg-color: @white;
+@button-cancel-hover-border-color: @primary-color;
diff --git a/src/design/config.less b/src/design/config.less
new file mode 100644
index 0000000..64c33f6
--- /dev/null
+++ b/src/design/config.less
@@ -0,0 +1,2 @@
+@import (reference) 'color.less';
+@import (reference) 'var/index.less';
diff --git a/src/design/entry.css b/src/design/entry.css
new file mode 100644
index 0000000..abc8bdb
--- /dev/null
+++ b/src/design/entry.css
@@ -0,0 +1,181 @@
+* > .enter-x:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(1),
+* > .-enter-x:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-x:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(2),
+* > .-enter-x:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-x:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(3),
+* > .-enter-x:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-x:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(4),
+* > .-enter-x:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-x:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(5),
+* > .-enter-x:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+* > .enter-y:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(1),
+* > .-enter-y:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-y:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(2),
+* > .-enter-y:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-y:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(3),
+* > .-enter-y:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-y:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(4),
+* > .-enter-y:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-y:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(5),
+* > .-enter-y:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/*update-begin---author:wangshuai ---date:20230829  for：UnoCSS替代windicss 导致全局默认边框样丢失------------*/
+*, :before, :after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+.border-primary,.hover\:border-primary:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(24,144,255,var(--tw-border-opacity))
+}
+/*update-end---author:wangshuai ---date:20230829  for：UnoCSS替代windicss 导致全局默认边框样丢失------------*/
\ No newline at end of file
diff --git a/src/design/index.less b/src/design/index.less
new file mode 100644
index 0000000..245a6d7
--- /dev/null
+++ b/src/design/index.less
@@ -0,0 +1,332 @@
+@import 'transition/index.less';
+@import 'var/index.less';
+@import 'public.less';
+@import 'ant/index.less';
+@import './theme.less';
+@import './entry.css';
+
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px white inset !important;
+}
+
+:-webkit-autofill {
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+html {
+  overflow: hidden;
+  -webkit-text-size-adjust: 100%;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  // body添加行高保持跟3.x一致
+  line-height: 1.5715;
+  
+  &.color-weak {
+    filter: invert(80%);
+  }
+
+  &.gray-mode {
+    filter: grayscale(100%);
+    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
+  }
+}
+
+/* 【LOWCOD-2300】【vue3】online--online表单开发，下拉框位置靠下时，点开下拉框，整屏跳 */
+body {
+  overflow: visible;
+  overflow-x: hidden;
+}
+
+a:focus,
+a:active,
+button,
+div,
+svg,
+span {
+  outline: none !important;
+}
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+
+// update-begin--author:liaozhiyang---date:20230925---for：【issues/5407】字段信息校验是多行提示会被遮挡
+.vxe-cell--valid-error-msg {
+  white-space: nowrap;
+}
+// update-end--author:liaozhiyang---date:20230925---for：【issues/5407】字段信息校验是多行提示会被遮挡
+
+// update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】升级之后提示样式跟之前一致
+.vxe-table .vxe-body--row:last-child .vxe-cell--valid-error-hint {
+  margin-top: auto;
+}
+.vxe-cell--valid-error-hint {
+  margin-top: 6px;
+}
+.vxe-cell--valid-error-msg {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 8px 12px !important;
+  color: #fff !important;
+  background-color: #f56c6c !important;
+  
+}
+// update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】升级之后提示样式跟之前一致
+// update-begin--author:liaozhiyang---date:20231116---for：【QQYUN-7011】online表单多了一个蓝色的边框
+// .vxe-table.vxe-table--render-default .vxe-body--column.col--selected {
+//   box-shadow: none;
+// }
+// update-end--author:liaozhiyang---date:20231116---for：【QQYUN-7011】online表单多了一个蓝色的边框
+
+// update-begin--author:liaozhiyang---date:20240424---for：【issues/1175】解决vxetable鼠标hover之后title显示不对的问题
+.vxe-cell {
+  pointer-events: none;
+  > * {
+    pointer-events: auto;
+  }
+}
+// update-end--author:liaozhiyang---date:20240424---for：【issues/1175】解决vxetable鼠标hover之后title显示不对的问题
+
+// update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-9023】引导样式调整
+.introjs-tooltipReferenceLayer {
+  .introjs-tooltip-title {
+    font-size: 15px;
+  }
+  .introjs-skipbutton {
+    font-size: 20px;
+    line-height: 35px;
+    height: 35px;
+    width: 35px;
+    font-weight: 500;
+  }
+  .introjs-tooltiptext {
+    padding: 16px;
+    font-size: 14px;
+  }
+  .introjs-bullets {
+    padding-top: 0;
+    padding-bottom: 8px;
+  }
+  .introjs-bullets ul li a {
+    width: 4px;
+    height: 4px;
+  }
+  .introjs-button {
+    padding: .2rem 0.5rem;
+    font-size: 13px;
+  }
+}
+// update-end--author:liaozhiyang---date:20240429---for：【QQYUN-9023】引导样式调整
+
+// update-begin--author:liaozhiyang---date:20240605---for：【TV360X-857】online代码生成详情样式调整
+
+html[data-theme='light'] {
+  .jeecg-form-detail-effect {
+    *:not(.ant-select-selection-placeholder){
+      color: #606266!important;
+      .colorText {
+        color: #ffffff !important;
+      }
+    }
+    .ant-row label {
+      color: #797c81 !important;
+    }
+    .ant-select-selector,
+    .ant-btn,
+    .ant-input,
+    .ant-input-affix-wrapper,
+    .ant-picker,
+    .ant-input-number {
+      // border: none !important;
+      // color: rgba(51, 51, 51, 0.25) !important;
+      color: #606266!important;
+      background-color: #f9f9fa !important;
+    }
+
+    a,
+    .anticon {
+      pointer-events: none;
+      cursor: text;
+      color: #606266!important;
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    .ant-select.ant-select-disabled .ant-select-selection-item .ant-select-selection-item-content {
+      color: #606266!important;
+    }
+    .ant-select-selection-item {
+      color: #606266!important;
+    }
+
+    :where(.css-dev-only-do-not-override-dvamda).ant-picker .ant-picker-input >input-disabled, :where(.css-dev-only-do-not-override-dvamda).ant-picker .ant-picker-input >input[disabled] {
+      color: #606266!important;
+    }
+    .ant-select-selection-item {
+      border-color: #eee !important;
+      background-color: transparent !important;
+    }
+    //【QQYUN-13754】switch在禁用的方式下效果有问题：字体为黑色
+    .ant-switch-disabled .ant-switch-inner-checked,.ant-switch-inner-unchecked{
+      color: #fff !important;
+    }
+  }
+}
+html[data-theme='dark'] {
+  .jeecg-form-detail-effect {
+    * {
+      color: #606266;
+    }
+    .ant-upload-text-icon, a {
+      color:rgba(255, 255, 255, 0.25) ;
+    }
+    .ant-select-selector,
+    .ant-btn,
+    .ant-input,
+    .ant-input-affix-wrapper,
+    .ant-picker,
+    .ant-input-number {
+      background-color: transparent !important;
+    }
+
+    .ant-select-selection-item {
+      background-color: transparent !important;
+    }
+    // 暗黑模式下输入框等icon隐藏
+    .ant-picker-suffix,.ant-select-arrow {
+      content:" ";
+      display: none;
+    }
+  }
+}
+.jeecg-form-detail-effect {
+  .ant-select-selector,
+  .ant-btn,
+  .ant-input,
+  .ant-input-affix-wrapper,
+  .ant-picker,
+  .ant-input-number {
+    border: none !important;
+  }
+  a,
+  .anticon {
+    pointer-events: none;
+    cursor: text;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .ant-picker {
+    width: 100%;
+  }
+  textarea {
+    resize: none !important;
+  }
+  input {
+    border: none !important;
+  }
+  input, textarea {
+    user-select: auto;
+    cursor: text !important;
+  }
+  .JSelectDept,
+  .JselectUser,
+  .JSelectPosition {
+    > div {
+      > .ant-row {
+        .left {
+          width: 100%;
+        }
+        .right {
+          display: none;
+        }
+      }
+    }
+  }
+  .ant-select-selection-item-remove {
+    display: none;
+  }
+  .jeecg-j-upload-container {
+    .ant-upload {
+      display: none;
+    }
+    .ant-upload-list-item-done {
+      a {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+      }
+      .ant-upload-list-item-actions {
+        display: none;
+      }
+    }
+  }
+  .ant-upload-picture-card-wrapper {
+    .ant-upload {
+      pointer-events: none;
+      cursor: not-allowed;
+      .ant-upload-text,.anticon {
+       display: none;
+      }
+    }
+    .ant-upload-list-item-done {
+      a {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+      }
+      .ant-btn {
+        display: none;
+      }
+    }
+  }
+}
+// update-end--author:liaozhiyang---date:20240605---for：【TV360X-857】online代码生成详情样式调整
+
+// update-begin--author:wangshuai---date:20240611---for：【TV360X-1070】一对多内嵌，为什么多这一块，不从头对齐
+.ant-table-wrapper .ant-table.ant-table-middle .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
+  margin-block: 0;
+  margin-inline: 0;
+}
+// update-end--author:wangshuai---date:20240611---for：【TV360X-1070】一对多内嵌，为什么多这一块，不从头对齐
+
+// 单行文本溢出省略号
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+// 两行省略
+.ellipsis-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+// 三行省略
+.ellipsis-3 {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.table-action-item {
+  &.color-red {
+    color: red !important;
+  }
+}
diff --git a/src/design/public.less b/src/design/public.less
new file mode 100644
index 0000000..eda1bbf
--- /dev/null
+++ b/src/design/public.less
@@ -0,0 +1,113 @@
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+// =================================
+// ==============scrollbar==========
+// =================================
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 8px;
+}
+
+// ::-webkit-scrollbar-track {
+//   background: transparent;
+// }
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  // background: rgba(0, 0, 0, 0.6);
+  background-color: rgba(144, 147, 153, 0.3);
+  // background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 2px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: @border-color-dark;
+}
+
+[data-theme='dark'] {
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #5e6063;
+  }
+}
+
+// =================================
+// ==============nprogress==========
+// =================================
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+    width: 100%;
+    height: 2px;
+    background-color: @primary-color;
+    opacity: 0.75;
+  }
+}
+
+// =======================================
+// ============ [sjl] 按钮组样式 ==========
+// =======================================
+.j-table-operator {
+  // Button按钮间距
+  .ant-btn {
+    margin: 0 8px 8px 0;
+    transition: margin 0s;
+  }
+
+  & > .ant-btn:last-of-type {
+    margin: 0 0 8px 0;
+  }
+
+  .ant-btn-group,
+  &.ant-btn-group {
+    .ant-btn {
+      margin: 0;
+      transition: margin 0s;
+    }
+
+    & > .ant-btn:last-of-type {
+      margin: 0 8px 8px 0;
+    }
+  }
+}
+
+// ========================================
+// ============ [sjl] 底部按钮样式 ==========
+// ========================================
+.j-box-bottom-button {
+  height: 28px;
+
+  &-float {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+
+    & .ant-btn {
+      margin-left: 8px;
+    }
+  }
+
+  &.offset-20 &-float {
+    left: -20px;
+    right: -20px;
+    bottom: -20px;
+  }
+}
diff --git a/src/design/theme.less b/src/design/theme.less
new file mode 100644
index 0000000..489e113
--- /dev/null
+++ b/src/design/theme.less
@@ -0,0 +1,84 @@
+.bg-white {
+  background-color: @component-background !important;
+}
+
+html[data-theme='light'] {
+  // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8774】给body加上打底的字体颜色
+  body{
+    color: rgba(0, 0, 0, 0.65);
+  }
+  // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8774】给body加上打底的字体颜色
+  .text-secondary {
+    color: rgba(0, 0, 0, 0.45);
+  }
+  /*【美化】自定义table字体颜色*/
+  .ant-table {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  /*【美化】自定义table字体颜色*/
+  /*【美化】自定义form字体颜色*/
+  .ant-select-multiple .ant-select-selection-item-content {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .ant-input-affix-wrapper > input.ant-input {
+    // update-begin--author:liaozhiyang---date:20240605---for：【TV360X-189】统一只读样式
+    &:not([disabled]) {
+      color: rgba(0, 0, 0, 0.65);
+    }
+    // update-end--author:liaozhiyang---date:20240605---for：【TV360X-189】统一只读样式
+  }
+  .ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow {
+    color: rgba(0, 0, 0, 0.65);
+  }
+  /*【美化】自定义form字体颜色*/
+  
+  .ant-alert-success {
+    background-color: #f6ffed;
+    border: 1px solid #b7eb8f;
+  }
+
+  .ant-alert-error {
+    background-color: #fff2f0;
+    border: 1px solid #ffccc7;
+  }
+
+  .ant-alert-warning {
+    background-color: #fffbe6;
+    border: 1px solid #ffe58f;
+  }
+  :not(:root):fullscreen::backdrop {
+    background-color: @layout-body-background !important;
+  }
+}
+
+[data-theme='dark'] {
+  // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8774】给body加上打底的字体颜色
+  body{
+    color: rgba(255, 255, 255, 0.85);
+  }
+  // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8774】给body加上打底的字体颜色
+  // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8641】黑色主题-流程办理
+  .ant-list .ant-list-item {
+    color: rgba(255, 255, 255, 0.85);
+  }
+  // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8641】黑色主题-流程办理
+  .text-secondary {
+    color: #8b949e;
+  }
+
+  .ant-card-grid-hoverable:hover {
+    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%), 0 9px 28px 8px rgb(0 0 0 / 20%);
+  }
+
+  .ant-card-grid {
+    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset, 0 1px 0 0 #434343 inset;
+  }
+
+  .ant-calendar-selected-day .ant-calendar-date {
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
+    color: rgba(0, 0, 0, 0.9);
+  }
+}
diff --git a/src/design/transition/base.less b/src/design/transition/base.less
new file mode 100644
index 0000000..7944c8b
--- /dev/null
+++ b/src/design/transition/base.less
@@ -0,0 +1,18 @@
+.transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+  }
+
+  &-move {
+    transition: transform 0.4s;
+  }
+}
+
+.expand-transition {
+  .transition-default();
+}
+
+.expand-x-transition {
+  .transition-default();
+}
diff --git a/src/design/transition/fade.less b/src/design/transition/fade.less
new file mode 100644
index 0000000..1f8e63e
--- /dev/null
+++ b/src/design/transition/fade.less
@@ -0,0 +1,81 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// ///////////////////////////////////////////////
+// Fade Bottom
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+// fade-scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+// ///////////////////////////////////////////////
+// Fade Top
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-top-enter-active,
+.fade-top-leave-active {
+  transition: opacity 0.2s, transform 0.25s;
+}
+
+.fade-top-enter-from {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(-8%);
+}
diff --git a/src/design/transition/index.less b/src/design/transition/index.less
new file mode 100644
index 0000000..e372b25
--- /dev/null
+++ b/src/design/transition/index.less
@@ -0,0 +1,10 @@
+@import './base.less';
+@import './fade.less';
+@import './scale.less';
+@import './slide.less';
+@import './scroll.less';
+@import './zoom.less';
+
+.collapse-transition {
+  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
+}
diff --git a/src/design/transition/scale.less b/src/design/transition/scale.less
new file mode 100644
index 0000000..c965493
--- /dev/null
+++ b/src/design/transition/scale.less
@@ -0,0 +1,21 @@
+.scale-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.scale-rotate-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
+  }
+}
diff --git a/src/design/transition/scroll.less b/src/design/transition/scroll.less
new file mode 100644
index 0000000..a5f45e4
--- /dev/null
+++ b/src/design/transition/scroll.less
@@ -0,0 +1,67 @@
+.scroll-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(-15px);
+  }
+
+  &-leave-to {
+    transform: translateY(15px);
+  }
+}
+
+.scroll-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(15px);
+  }
+
+  &-leave-to {
+    transform: translateY(-15px);
+  }
+}
+
+.scroll-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-15px);
+  }
+
+  &-leave-to {
+    transform: translateX(15px);
+  }
+}
+
+.scroll-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(15px);
+  }
+
+  &-leave-to {
+    transform: translateX(-15px);
+  }
+}
diff --git a/src/design/transition/slide.less b/src/design/transition/slide.less
new file mode 100644
index 0000000..79b00df
--- /dev/null
+++ b/src/design/transition/slide.less
@@ -0,0 +1,39 @@
+.slide-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
+.slide-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.slide-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
+  }
+}
diff --git a/src/design/transition/zoom.less b/src/design/transition/zoom.less
new file mode 100644
index 0000000..2ea378c
--- /dev/null
+++ b/src/design/transition/zoom.less
@@ -0,0 +1,27 @@
+// zoom-out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// zoom-fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
diff --git a/src/design/var/breakpoint.less b/src/design/var/breakpoint.less
new file mode 100644
index 0000000..793e826
--- /dev/null
+++ b/src/design/var/breakpoint.less
@@ -0,0 +1,33 @@
+// =================================
+// ==============屏幕断点============
+// =================================
+
+// Extra small screen / phone
+@screen-xs: 480px;
+@screen-xs-min: @screen-xs;
+
+// Small screen / tablet
+@screen-sm: 576px;
+@screen-sm-min: @screen-sm;
+
+// Medium screen / desktop
+@screen-md: 768px;
+@screen-md-min: @screen-md;
+
+// Large screen / wide desktop
+@screen-lg: 992px;
+@screen-lg-min: @screen-lg;
+
+// Extra large screen / full hd
+@screen-xl: 1200px;
+@screen-xl-min: @screen-xl;
+
+// Extra extra large screen / large desktop
+@screen-2xl: 1600px;
+@screen-2xl-min: @screen-2xl;
+
+@screen-xs-max: (@screen-sm-min - 1px);
+@screen-sm-max: (@screen-md-min - 1px);
+@screen-md-max: (@screen-lg-min - 1px);
+@screen-lg-max: (@screen-xl-min - 1px);
+@screen-xl-max: (@screen-2xl-min - 1px);
diff --git a/src/design/var/easing.less b/src/design/var/easing.less
new file mode 100644
index 0000000..e19735f
--- /dev/null
+++ b/src/design/var/easing.less
@@ -0,0 +1,18 @@
+// =================================
+// ==============动画函数-===========
+// =================================
+
+@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
diff --git a/src/design/var/index.less b/src/design/var/index.less
new file mode 100644
index 0000000..f9af55f
--- /dev/null
+++ b/src/design/var/index.less
@@ -0,0 +1,46 @@
+@import (reference) '../color.less';
+@import 'easing';
+@import 'breakpoint';
+
+@namespace: jeecg;
+
+// tabs
+// updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式：更改高度
+@multiple-height: 30px;
+@multiple-card-height: 50px;
+// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】标签页圆滑高度
+@multiple-smooth-height: 48px;
+// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】标签页圆滑高度
+
+// headers
+// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
+@header-height: 60px;
+// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
+
+// logo width
+@logo-width: 32px;
+
+//
+@side-drag-z-index: 200;
+
+@page-loading-z-index: 10000;
+
+@lock-page-z-index: 3000;
+
+@layout-header-fixed-z-index: 500;
+
+@multiple-tab-fixed-z-index: 505;
+
+@layout-sider-fixed-z-index: 510;
+
+@layout-mix-sider-fixed-z-index: 550;
+
+@preview-comp-z-index: 1000;
+
+@page-footer-z-index: 99;
+
+.bem(@n; @content) {
+  @{namespace}-@{n} {
+    @content();
+  }
+}
diff --git a/src/directives/clickOutside.ts b/src/directives/clickOutside.ts
new file mode 100644
index 0000000..fa580c9
--- /dev/null
+++ b/src/directives/clickOutside.ts
@@ -0,0 +1,78 @@
+import { on } from '/@/utils/domUtils';
+import { isServer } from '/@/utils/is';
+import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
+
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler;
+    bindingFn: (...args: unknown[]) => unknown;
+  }
+>;
+
+const nodeList: FlushList = new Map();
+
+let startClick: MouseEvent;
+
+if (!isServer) {
+  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
+  on(document, 'mouseup', (e: MouseEvent) => {
+    for (const { documentHandler } of nodeList.values()) {
+      documentHandler(e, startClick);
+    }
+  });
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = [];
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg;
+  } else {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement);
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: Nullable<HTMLElement>;
+      }>
+    ).popperRef;
+    const mouseUpTarget = mouseup.target as Node;
+    const mouseDownTarget = mousedown.target as Node;
+    const isBound = !binding || !binding.instance;
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    const isSelf = el === mouseUpTarget;
+
+    const isTargetExcluded =
+      (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
+    const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+    if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) {
+      return;
+    }
+    binding.value();
+  };
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  updated(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  unmounted(el) {
+    nodeList.delete(el);
+  },
+};
+
+export default ClickOutside;
diff --git a/src/directives/index.ts b/src/directives/index.ts
new file mode 100644
index 0000000..0329eb6
--- /dev/null
+++ b/src/directives/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Configure and register global directives
+ */
+import type { App } from 'vue';
+import { setupPermissionDirective } from './permission';
+import { setupLoadingDirective } from './loading';
+
+export function setupGlobDirectives(app: App) {
+  setupPermissionDirective(app);
+  setupLoadingDirective(app);
+}
diff --git a/src/directives/loading.ts b/src/directives/loading.ts
new file mode 100644
index 0000000..c2f25c6
--- /dev/null
+++ b/src/directives/loading.ts
@@ -0,0 +1,41 @@
+import { createLoading } from '/@/components/Loading';
+import type { Directive, App } from 'vue';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const tip = el.getAttribute('loading-tip');
+    const background = el.getAttribute('loading-background');
+    const size = el.getAttribute('loading-size');
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        size: size || 'large',
+        loading: !!binding.value,
+        absolute: !fullscreen,
+      },
+      fullscreen ? document.body : el
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute('loading-tip'));
+    if (binding.oldValue !== binding.value) {
+      if (binding.oldValue !== binding.value) {
+        instance.setLoading?.(binding.value && !instance.loading);
+      }
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  },
+};
+
+export function setupLoadingDirective(app: App) {
+  app.directive('loading', loadingDirective);
+}
+
+export default loadingDirective;
diff --git a/src/directives/permission.ts b/src/directives/permission.ts
new file mode 100644
index 0000000..e5f60ac
--- /dev/null
+++ b/src/directives/permission.ts
@@ -0,0 +1,33 @@
+/**
+ * Global authority directive
+ * Used for fine-grained control of component permissions
+ * @Example v-auth="RoleEnum.TEST"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { usePermission } from '/@/hooks/web/usePermission';
+
+function isAuth(el: Element, binding: any) {
+  // update-begin--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
+  const value = binding.value;
+  if (!value) return;
+  // update-end--author:liaozhiyang---date:20240529---for【TV360X-460】basicForm支持v-auth指令(权限控制显隐)
+  const { hasPermission } = usePermission();
+  if (!hasPermission(value)) {
+    el.parentNode?.removeChild(el);
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<any>) => {
+  isAuth(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function setupPermissionDirective(app: App) {
+  app.directive('auth', authDirective);
+}
+
+export default authDirective;
diff --git a/src/directives/repeatClick.ts b/src/directives/repeatClick.ts
new file mode 100644
index 0000000..d4ef150
--- /dev/null
+++ b/src/directives/repeatClick.ts
@@ -0,0 +1,31 @@
+/**
+ * Prevent repeated clicks
+ * @Example v-repeat-click="()=>{}"
+ */
+import { on, once } from '/@/utils/domUtils';
+import type { Directive, DirectiveBinding } from 'vue';
+
+const repeatDirective: Directive = {
+  beforeMount(el: Element, binding: DirectiveBinding<any>) {
+    let interval: Nullable<IntervalHandle> = null;
+    let startTime = 0;
+    const handler = (): void => binding?.value();
+    const clear = (): void => {
+      if (Date.now() - startTime < 100) {
+        handler();
+      }
+      interval && clearInterval(interval);
+      interval = null;
+    };
+
+    on(el, 'mousedown', (e: MouseEvent): void => {
+      if ((e as any).button !== 0) return;
+      startTime = Date.now();
+      once(document as any, 'mouseup', clear);
+      interval && clearInterval(interval);
+      interval = setInterval(handler, 100);
+    });
+  },
+};
+
+export default repeatDirective;
diff --git a/src/directives/ripple/index.less b/src/directives/ripple/index.less
new file mode 100644
index 0000000..9c0718e
--- /dev/null
+++ b/src/directives/ripple/index.less
@@ -0,0 +1,21 @@
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ripple-effect {
+  position: relative;
+  z-index: 9999;
+  width: 1px;
+  height: 1px;
+  margin-top: 0;
+  margin-left: 0;
+  pointer-events: none;
+  border-radius: 50%;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/src/directives/ripple/index.ts b/src/directives/ripple/index.ts
new file mode 100644
index 0000000..6932264
--- /dev/null
+++ b/src/directives/ripple/index.ts
@@ -0,0 +1,180 @@
+import type { Directive } from 'vue';
+import './index.less';
+export interface RippleOptions {
+  event: string;
+  transition: number;
+}
+
+export interface RippleProto {
+  background?: string;
+  zIndex?: string;
+}
+
+export type EventType = Event & MouseEvent & TouchEvent;
+
+const options: RippleOptions = {
+  event: 'mousedown',
+  transition: 400,
+};
+
+const RippleDirective: Directive & RippleProto = {
+  beforeMount: (el: HTMLElement, binding) => {
+    if (binding.value === false) return;
+
+    const bg = el.getAttribute('ripple-background');
+    setProps(Object.keys(binding.modifiers), options);
+
+    const background = bg || RippleDirective.background;
+    const zIndex = RippleDirective.zIndex;
+
+    el.addEventListener(options.event, (event: EventType) => {
+      rippler({
+        event,
+        el,
+        background,
+        zIndex,
+      });
+    });
+  },
+  updated(el, binding) {
+    if (!binding.value) {
+      el?.clearRipple?.();
+      return;
+    }
+    const bg = el.getAttribute('ripple-background');
+    el?.setBackground?.(bg);
+  },
+};
+
+function rippler({ event, el, zIndex, background }: { event: EventType; el: HTMLElement } & RippleProto) {
+  const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', ''));
+  const clientX = event.clientX || event.touches[0].clientX;
+  const clientY = event.clientY || event.touches[0].clientY;
+
+  const rect = el.getBoundingClientRect();
+  const { left, top } = rect;
+  const { offsetWidth: width, offsetHeight: height } = el;
+  const { transition } = options;
+  const dx = clientX - left;
+  const dy = clientY - top;
+  const maxX = Math.max(dx, width - dx);
+  const maxY = Math.max(dy, height - dy);
+  const style = window.getComputedStyle(el);
+  const radius = Math.sqrt(maxX * maxX + maxY * maxY);
+  const border = targetBorder > 0 ? targetBorder : 0;
+
+  const ripple = document.createElement('div');
+  const rippleContainer = document.createElement('div');
+
+  // Styles for ripple
+  ripple.className = 'ripple';
+
+  Object.assign(ripple.style ?? {}, {
+    marginTop: '0px',
+    marginLeft: '0px',
+    width: '1px',
+    height: '1px',
+    transition: `all ${transition}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+    borderRadius: '50%',
+    pointerEvents: 'none',
+    position: 'relative',
+    zIndex: zIndex ?? '9999',
+    backgroundColor: background ?? 'rgba(0, 0, 0, 0.12)',
+  });
+
+  // Styles for rippleContainer
+  rippleContainer.className = 'ripple-container';
+  Object.assign(rippleContainer.style ?? {}, {
+    position: 'absolute',
+    left: `${0 - border}px`,
+    top: `${0 - border}px`,
+    height: '0',
+    width: '0',
+    pointerEvents: 'none',
+    overflow: 'hidden',
+  });
+
+  const storedTargetPosition = el.style.position.length > 0 ? el.style.position : getComputedStyle(el).position;
+
+  if (storedTargetPosition !== 'relative') {
+    el.style.position = 'relative';
+  }
+
+  rippleContainer.appendChild(ripple);
+  el.appendChild(rippleContainer);
+
+  Object.assign(ripple.style, {
+    marginTop: `${dy}px`,
+    marginLeft: `${dx}px`,
+  });
+
+  const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } = style;
+  Object.assign(rippleContainer.style, {
+    width: `${width}px`,
+    height: `${height}px`,
+    direction: 'ltr',
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+  });
+
+  setTimeout(() => {
+    const wh = `${radius * 2}px`;
+    Object.assign(ripple.style ?? {}, {
+      width: wh,
+      height: wh,
+      marginLeft: `${dx - radius}px`,
+      marginTop: `${dy - radius}px`,
+    });
+  }, 0);
+
+  function clearRipple() {
+    setTimeout(() => {
+      ripple.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+    }, 250);
+
+    setTimeout(() => {
+      rippleContainer?.parentNode?.removeChild(rippleContainer);
+    }, 850);
+    el.removeEventListener('mouseup', clearRipple, false);
+    el.removeEventListener('mouseleave', clearRipple, false);
+    el.removeEventListener('dragstart', clearRipple, false);
+    setTimeout(() => {
+      let clearPosition = true;
+      for (let i = 0; i < el.childNodes.length; i++) {
+        if ((el.childNodes[i] as Recordable).className === 'ripple-container') {
+          clearPosition = false;
+        }
+      }
+
+      if (clearPosition) {
+        el.style.position = storedTargetPosition !== 'static' ? storedTargetPosition : '';
+      }
+    }, options.transition + 260);
+  }
+
+  if (event.type === 'mousedown') {
+    el.addEventListener('mouseup', clearRipple, false);
+    el.addEventListener('mouseleave', clearRipple, false);
+    el.addEventListener('dragstart', clearRipple, false);
+  } else {
+    clearRipple();
+  }
+
+  (el as Recordable).setBackground = (bgColor: string) => {
+    if (!bgColor) {
+      return;
+    }
+    ripple.style.backgroundColor = bgColor;
+  };
+}
+
+function setProps(modifiers: Recordable, props: Recordable) {
+  modifiers.forEach((item: Recordable) => {
+    if (isNaN(Number(item))) props.event = item;
+    else props.transition = item;
+  });
+}
+
+export default RippleDirective;
diff --git a/src/electron/index.ts b/src/electron/index.ts
new file mode 100644
index 0000000..856e9ef
--- /dev/null
+++ b/src/electron/index.ts
@@ -0,0 +1,72 @@
+import type {App} from "vue";
+import {router} from "@/router";
+import {useGlobSetting} from "@/hooks/setting";
+import { ElectronEnum } from '/@/enums/jeecgEnum'
+const glob = useGlobSetting();
+
+const _PRELOAD_UTILS = ElectronEnum.ELECTRON_API;
+
+export const $electron = {
+  // 当前是否为Electron平台
+  isElectron: () => glob.isElectronPlatform,
+
+  // 通过浏览器打开链接
+  openInBrowser: bindUtils('openInBrowser') as (url: string) => void,
+
+  resolveRoutePath,
+}
+
+function bindUtils(n: string) {
+  const fn = window[_PRELOAD_UTILS]?.[n];
+  if (typeof fn?.bind === 'function') {
+    return fn.bind(null);
+  }
+  return () => console.warn(`Electron preload util ${n} is not a function`);
+}
+
+// 解析路由路径
+function resolveRoutePath(path: string) {
+  return window.location.origin + window.location.pathname + router.resolve(path).href;
+}
+
+/**
+ * 配置Electron
+ */
+export function setupElectron(_: App) {
+  // 非Electron平台不执行
+  if (!$electron.isElectron()) {
+    return;
+  }
+  hookWindowOpen();
+  // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+  hookNavigate();
+}
+function hookNavigate() {
+  // @ts-ignore
+  window[ElectronEnum.ELECTRON_API].onNavigate((path) => {
+    router.push({ path });
+  });
+}
+function hookWindowOpen() {
+  // 保存原生方法引用
+  const originFunc = window.open;
+  // 重写window.open方法
+  window['open'] = function (url, windowName, windowFeatures) {
+    url = typeof url === 'string' ? url.trim() : '';
+    if (!url) {
+      throw new Error('window.open: url is required');
+    }
+    // 判断是否以http或https开头
+    if (/^https?:\/\//.test(url)) {
+      // 判断是否为本地地址
+      if (url.startsWith(window.location.origin) || url.startsWith(window['_CONFIG']['domianURL'])) {
+        // 直接打开
+        return originFunc(url, windowName, windowFeatures);
+      }
+      // 调用Electron进行外部浏览器打开
+      return $electron.openInBrowser(url) as any;
+    }
+    // 自定义逻辑
+    return originFunc(url, windowName, windowFeatures)
+  }
+}
diff --git a/src/enums/CompTypeEnum.ts b/src/enums/CompTypeEnum.ts
new file mode 100644
index 0000000..2ac5a19
--- /dev/null
+++ b/src/enums/CompTypeEnum.ts
@@ -0,0 +1,32 @@
+/**
+ * 组件类型
+ */
+export enum CompTypeEnum {
+  //单选
+  Radio = 'radio',
+  //按钮样式单选
+  RadioButton = 'radioButton',
+  //下拉框
+  Select = 'select',
+  //列表
+  List = 'list',
+  //开关
+  Switch = 'switch',
+  //下拉树
+  SelTree = 'sel_tree',
+  //分类字典树
+  CatTree = 'cat_tree',
+  //下拉搜索
+  SelSearch = 'search',
+  //用户现在框
+  SelUser = 'sel_user',
+  //复选框
+  Checkbox = 'checkbox',
+  //多选列表
+  ListMulti = 'list_multi',
+  //区域选择
+  Pca = 'pca',
+  Popup = 'popup',
+  //部门选择
+  SelDepart = 'sel_depart',
+}
diff --git a/src/enums/DateTypeEnum.ts b/src/enums/DateTypeEnum.ts
new file mode 100644
index 0000000..9ccf88c
--- /dev/null
+++ b/src/enums/DateTypeEnum.ts
@@ -0,0 +1,8 @@
+/**
+ * 日期类型
+ */
+export enum DateTypeEnum {
+  Date = 'date',
+  Datetime = 'datetime',
+  Time = 'time',
+}
diff --git a/src/enums/appEnum.ts b/src/enums/appEnum.ts
new file mode 100644
index 0000000..5d4b1b1
--- /dev/null
+++ b/src/enums/appEnum.ts
@@ -0,0 +1,58 @@
+export const SIDE_BAR_MINI_WIDTH = 48;
+export const SIDE_BAR_SHOW_TIT_MINI_WIDTH = 80;
+
+// 标签页样式
+export enum TabsThemeEnum {
+  // 圆滑
+  SMOOTH = 'smooth',
+  // 卡片
+  CARD = 'card',
+  // 极简
+  SIMPLE = 'simple',
+}
+
+export enum ContentEnum {
+  // auto width
+  FULL = 'full',
+  // fixed width
+  FIXED = 'fixed',
+}
+
+// menu theme enum
+export enum ThemeEnum {
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+
+export enum SettingButtonPositionEnum {
+  AUTO = 'auto',
+  HEADER = 'header',
+  FIXED = 'fixed',
+}
+
+export enum SessionTimeoutProcessingEnum {
+  ROUTE_JUMP,
+  PAGE_COVERAGE,
+}
+
+/**
+ * 权限模式
+ */
+export enum PermissionModeEnum {
+  // role
+  ROLE = 'ROLE',
+  // 后台
+  BACK = 'BACK',
+  // route mapping
+  ROUTE_MAPPING = 'ROUTE_MAPPING',
+}
+
+//  Route switching animation
+export enum RouterTransitionEnum {
+  ZOOM_FADE = 'zoom-fade',
+  ZOOM_OUT = 'zoom-out',
+  FADE_SIDE = 'fade-slide',
+  FADE = 'fade',
+  FADE_BOTTOM = 'fade-bottom',
+  FADE_SCALE = 'fade-scale',
+}
diff --git a/src/enums/breakpointEnum.ts b/src/enums/breakpointEnum.ts
new file mode 100644
index 0000000..93acc1a
--- /dev/null
+++ b/src/enums/breakpointEnum.ts
@@ -0,0 +1,28 @@
+export enum sizeEnum {
+  XS = 'XS',
+  SM = 'SM',
+  MD = 'MD',
+  LG = 'LG',
+  XL = 'XL',
+  XXL = 'XXL',
+}
+
+export enum screenEnum {
+  XS = 480,
+  SM = 576,
+  MD = 768,
+  LG = 992,
+  XL = 1200,
+  XXL = 1600,
+}
+
+const screenMap = new Map<sizeEnum, number>();
+
+screenMap.set(sizeEnum.XS, screenEnum.XS);
+screenMap.set(sizeEnum.SM, screenEnum.SM);
+screenMap.set(sizeEnum.MD, screenEnum.MD);
+screenMap.set(sizeEnum.LG, screenEnum.LG);
+screenMap.set(sizeEnum.XL, screenEnum.XL);
+screenMap.set(sizeEnum.XXL, screenEnum.XXL);
+
+export { screenMap };
diff --git a/src/enums/cacheEnum.ts b/src/enums/cacheEnum.ts
new file mode 100644
index 0000000..929d312
--- /dev/null
+++ b/src/enums/cacheEnum.ts
@@ -0,0 +1,63 @@
+// token key
+export const TOKEN_KEY = 'TOKEN__';
+
+export const LOCALE_KEY = 'LOCALE__';
+
+// user info key
+export const USER_INFO_KEY = 'USER__INFO__';
+
+// role info key
+export const ROLES_KEY = 'ROLES__KEY__';
+
+// dict info key
+export const DB_DICT_DATA_KEY = 'UI_CACHE_DB_DICT_DATA';
+
+// project config key
+export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
+
+// lock info
+export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
+
+export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__';
+
+export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__';
+
+// base global local key
+export const APP_LOCAL_CACHE_KEY = 'COMMON__LOCAL__KEY__';
+
+// base global session key
+export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__';
+// 租户 key
+export const TENANT_ID = 'TENANT_ID';
+// login info key
+export const LOGIN_INFO_KEY = 'LOGIN__INFO__';
+
+// 聊天UID key
+export const JEECG_CHAT_UID = 'JEECG_CHAT_UID';
+
+// 免登录租户id，与系统分开，避免重复
+export const OAUTH2_THIRD_LOGIN_TENANT_ID = 'THIRD_LOGIN_TENANT_ID';
+
+// ai助手标识（退出需要记录一下）
+export const AIDE_FLAG = 'AIDE_FLAG';
+
+// ai助手标识（退出需要记录一下）
+export const JEECG_CHAT_KEY = 'JEECG-CHAT-KEY';
+
+// 【QQYUN-8925】系统主题颜色（供页面加载使用）
+export const APP__THEME__COLOR = '__APP__THEME__COLOR__';
+
+// 
+export const ROLE_AUTH_CONFIG_KEY = 'ROLE__AUTH__CONFIG__KEY__';
+// 部门角色权限
+export const DEPART_ROLE_AUTH_CONFIG_KEY = 'DEPART__ROLE__AUTH__CONFIG__KEY__';
+// 部门管理权限
+export const DEPART_MANGE_AUTH_CONFIG_KEY = 'DEPART__MANGE__AUTH__CONFIG__KEY__';
+
+//产品包管理权限
+export const PACK_AUTH_CONFIG_KEY = 'PACK__AUTH__CONFIG__KEY__';
+
+export enum CacheTypeEnum {
+  SESSION,
+  LOCAL,
+}
diff --git a/src/enums/exceptionEnum.ts b/src/enums/exceptionEnum.ts
new file mode 100644
index 0000000..b02ac21
--- /dev/null
+++ b/src/enums/exceptionEnum.ts
@@ -0,0 +1,29 @@
+/**
+ * @description: Exception related enumeration
+ */
+export enum ExceptionEnum {
+  // page not access
+  PAGE_NOT_ACCESS = 403,
+
+  // page not found
+  PAGE_NOT_FOUND = 404,
+
+  // error
+  ERROR = 500,
+
+  // net work error
+  NET_WORK_ERROR = 10000,
+
+  // No data on the page. In fact, it is not an exception page
+  PAGE_NOT_DATA = 10100,
+  //短信验证码次数太多失败code，用于判断是否打开弹窗
+  PHONE_SMS_FAIL_CODE = 40002,
+}
+
+export enum ErrorTypeEnum {
+  VUE = 'vue',
+  SCRIPT = 'script',
+  RESOURCE = 'resource',
+  AJAX = 'ajax',
+  PROMISE = 'promise',
+}
diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts
new file mode 100644
index 0000000..7ce5819
--- /dev/null
+++ b/src/enums/httpEnum.ts
@@ -0,0 +1,50 @@
+/**
+ * @description: Request result set
+ */
+export enum ResultEnum {
+  SUCCESS = 0,
+  ERROR = 1,
+  TIMEOUT = 401,
+  TYPE = 'success',
+}
+
+/**
+ * @description: request method
+ */
+export enum RequestEnum {
+  GET = 'GET',
+  POST = 'POST',
+  PUT = 'PUT',
+  DELETE = 'DELETE',
+}
+
+/**
+ * @description:  contentTyp
+ */
+export enum ContentTypeEnum {
+  // json
+  JSON = 'application/json;charset=UTF-8',
+  // form-data qs
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  // form-data  upload
+  FORM_DATA = 'multipart/form-data;charset=UTF-8',
+}
+
+/**
+ * 请求header
+ * @description:  contentTyp
+ */
+export enum ConfigEnum {
+  // TOKEN
+  TOKEN = 'X-Access-Token',
+  // TIMESTAMP
+  TIMESTAMP = 'X-TIMESTAMP',
+  // Sign
+  Sign = 'X-Sign',
+  // 租户id
+  TENANT_ID = 'X-Tenant-Id',
+  // 版本
+  VERSION = 'X-Version',
+  // 低代码应用ID
+  X_LOW_APP_ID = 'X-Low-App-ID',
+}
diff --git a/src/enums/jeecgEnum.ts b/src/enums/jeecgEnum.ts
new file mode 100644
index 0000000..600e01f
--- /dev/null
+++ b/src/enums/jeecgEnum.ts
@@ -0,0 +1,27 @@
+/**
+ * JInput组件类型
+ */
+export enum JInputTypeEnum {
+  //模糊
+  JINPUT_QUERY_LIKE = 'like',
+  //非
+  JINPUT_QUERY_NE = 'ne',
+  //大于等于
+  JINPUT_QUERY_GE = 'ge',
+  //小于等于
+  JINPUT_QUERY_LE = 'le',
+}
+
+/**
+ * 面板设计器需要的常量定义
+ */
+export enum JDragConfigEnum {
+  //baseURL
+  DRAG_BASE_URL = 'drag-base-url',
+  //拖拽缓存前缀
+  DRAG_CACHE_PREFIX = 'drag-cache:',
+}
+// electron 枚举
+export enum ElectronEnum {
+  ELECTRON_API = '_ELECTRON_PRELOAD_UTILS_',
+}
diff --git a/src/enums/menuEnum.ts b/src/enums/menuEnum.ts
new file mode 100644
index 0000000..1ba0068
--- /dev/null
+++ b/src/enums/menuEnum.ts
@@ -0,0 +1,50 @@
+/**
+ * @description: 默认四种菜单主题
+ */
+export enum MenuTypeEnum {
+  // 左侧边菜单导航风格
+  SIDEBAR = 'sidebar',
+  // 顶部栏导航风格
+  MIX = 'mix',
+ // 侧边折叠导航风格
+  MIX_SIDEBAR = 'mix-sidebar',
+  //顶部混合导航风格
+  TOP_MENU = 'top-menu',
+}
+
+// 折叠触发器位置
+export enum TriggerEnum {
+  // 不显示
+  NONE = 'NONE',
+  // 菜单底部
+  FOOTER = 'FOOTER',
+  // 头部
+  HEADER = 'HEADER',
+}
+
+export type Mode = 'vertical' | 'vertical-right' | 'horizontal' | 'inline';
+
+// menu mode
+export enum MenuModeEnum {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+  VERTICAL_RIGHT = 'vertical-right',
+  INLINE = 'inline',
+}
+
+export enum MenuSplitTyeEnum {
+  NONE,
+  TOP,
+  LEFT,
+}
+
+export enum TopMenuAlignEnum {
+  CENTER = 'center',
+  START = 'start',
+  END = 'end',
+}
+
+export enum MixSidebarTriggerEnum {
+  HOVER = 'hover',
+  CLICK = 'click',
+}
diff --git a/src/enums/pageEnum.ts b/src/enums/pageEnum.ts
new file mode 100644
index 0000000..58651ac
--- /dev/null
+++ b/src/enums/pageEnum.ts
@@ -0,0 +1,16 @@
+export enum PageEnum {
+  // basic login path
+  BASE_LOGIN = '/login',
+  // basic home path
+  BASE_HOME = '/dashboard/analysis',
+  // error page path
+  ERROR_PAGE = '/exception',
+  // error log page path
+  ERROR_LOG_PAGE = '/error-log/list',
+  // auth2登录路由路径
+  OAUTH2_LOGIN_PAGE_PATH = '/oauth2-app/login',
+  //文件路由
+  SYS_FILES_PATH = '/file/share',
+  // 邮件中的跳转地址
+  TOKEN_LOGIN = '/tokenLogin'
+}
diff --git a/src/enums/roleEnum.ts b/src/enums/roleEnum.ts
new file mode 100644
index 0000000..857868d
--- /dev/null
+++ b/src/enums/roleEnum.ts
@@ -0,0 +1,7 @@
+export enum RoleEnum {
+  // super admin
+  SUPER = 'super',
+
+  // tester
+  TEST = 'test',
+}
diff --git a/src/enums/sizeEnum.ts b/src/enums/sizeEnum.ts
new file mode 100644
index 0000000..4348c2c
--- /dev/null
+++ b/src/enums/sizeEnum.ts
@@ -0,0 +1,27 @@
+export enum SizeEnum {
+  DEFAULT = 'default',
+  SMALL = 'small',
+  LARGE = 'large',
+}
+
+export enum SizeNumberEnum {
+  DEFAULT = 48,
+  SMALL = 16,
+  LARGE = 64,
+}
+
+export enum ScreenSizeEnum {
+  XS = 480,
+  SM = 576,
+  MD = 768,
+  LG = 992,
+  XL = 1200,
+}
+
+export const sizeMap: Map<SizeEnum, SizeNumberEnum> = (() => {
+  const map = new Map<SizeEnum, SizeNumberEnum>();
+  map.set(SizeEnum.DEFAULT, SizeNumberEnum.DEFAULT);
+  map.set(SizeEnum.SMALL, SizeNumberEnum.SMALL);
+  map.set(SizeEnum.LARGE, SizeNumberEnum.LARGE);
+  return map;
+})();
diff --git a/src/hooks/component/useFormItem.ts b/src/hooks/component/useFormItem.ts
new file mode 100644
index 0000000..8f9eeb9
--- /dev/null
+++ b/src/hooks/component/useFormItem.ts
@@ -0,0 +1,51 @@
+import type { UnwrapRef, Ref, WritableComputedRef, DeepReadonly } from 'vue';
+import { reactive, readonly, computed, getCurrentInstance, watchEffect, unref, nextTick, toRaw } from 'vue';
+import { Form } from 'ant-design-vue';
+import { FormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+
+import { isEqual } from 'lodash-es';
+export function useRuleFormItem<T extends Recordable, K extends keyof T, V = UnwrapRef<T[K]>>(
+  props: T,
+  key?: K,
+  changeEvent?,
+  emitData?: Ref<any[] | undefined>
+): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>, FormItemContext];
+export function useRuleFormItem<T extends Recordable>(props: T, key: keyof T = 'value', changeEvent = 'change', emitData?: Ref<any[]>) {
+  const instance = getCurrentInstance();
+  const emit = instance?.emit;
+  const formItemContext = Form.useInjectFormItemContext();
+
+  const innerState = reactive({
+    value: props[key],
+  });
+
+  const defaultState = readonly(innerState);
+
+  const setState = (val: UnwrapRef<T[keyof T]>): void => {
+    innerState.value = val as T[keyof T];
+  };
+
+  watchEffect(() => {
+    innerState.value = props[key];
+  });
+
+  const state: any = computed({
+    get() {
+      //修复多选时空值显示问题（兼容值为0的情况）
+      return innerState.value == null || innerState.value === '' ? [] : innerState.value;
+    },
+    set(value) {
+      if (isEqual(value, defaultState.value)) return;
+
+      innerState.value = value as T[keyof T];
+      nextTick(() => {
+        emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
+        // https://antdv.com/docs/vue/migration-v3-cn
+        // antDv3升级后需要调用这个方法更新校验的值
+        nextTick(() => formItemContext.onFieldChange());
+      });
+    },
+  });
+
+  return [state, setState, defaultState, formItemContext];
+}
diff --git a/src/hooks/component/useFormItemSingle.ts b/src/hooks/component/useFormItemSingle.ts
new file mode 100644
index 0000000..a8b08fe
--- /dev/null
+++ b/src/hooks/component/useFormItemSingle.ts
@@ -0,0 +1,50 @@
+import type { UnwrapRef, Ref, WritableComputedRef, DeepReadonly } from 'vue';
+import { reactive, readonly, computed, getCurrentInstance, watchEffect, unref, nextTick, toRaw } from 'vue';
+import { Form } from 'ant-design-vue';
+import { FormItemContext } from 'ant-design-vue/es/form/FormItemContext';
+
+import { isEqual } from 'lodash-es';
+export function useRuleFormItem<T extends Recordable, K extends keyof T, V = UnwrapRef<T[K]>>(
+  props: T,
+  key?: K,
+  changeEvent?,
+  emitData?: Ref<any[] | undefined>
+): [WritableComputedRef<V>, (val: V) => void, DeepReadonly<V>, FormItemContext];
+export function useRuleFormItem<T extends Recordable>(props: T, key: keyof T = 'value', changeEvent = 'change', emitData?: Ref<any[]>) {
+  const instance = getCurrentInstance();
+  const emit = instance?.emit;
+  const formItemContext = Form.useInjectFormItemContext();
+
+  const innerState = reactive({
+    value: props[key],
+  });
+
+  const defaultState = readonly(innerState);
+
+  const setState = (val: UnwrapRef<T[keyof T]>): void => {
+    innerState.value = val as T[keyof T];
+  };
+
+  watchEffect(() => {
+    innerState.value = props[key];
+  });
+
+  const state: any = computed({
+    get() {
+      return innerState.value == null ? "" : innerState.value;
+    },
+    set(value) {
+      if (isEqual(value, defaultState.value)) return;
+
+      innerState.value = value as T[keyof T];
+      nextTick(() => {
+        emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
+        // https://antdv.com/docs/vue/migration-v3-cn
+        // antDv3升级后需要调用这个方法更新校验的值
+        nextTick(() => formItemContext.onFieldChange());
+      });
+    },
+  });
+
+  return [state, setState, defaultState, formItemContext];
+}
diff --git a/src/hooks/component/usePageContext.ts b/src/hooks/component/usePageContext.ts
new file mode 100644
index 0000000..12cc160
--- /dev/null
+++ b/src/hooks/component/usePageContext.ts
@@ -0,0 +1,18 @@
+import type { InjectionKey, ComputedRef, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface PageContextProps {
+  contentHeight: ComputedRef<number>;
+  pageHeight: Ref<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<PageContextProps> = Symbol();
+
+export function createPageContext(context: PageContextProps) {
+  return createContext<PageContextProps>(context, key, { native: true });
+}
+
+export function usePageContext() {
+  return useContext<PageContextProps>(key);
+}
diff --git a/src/hooks/core/onMountedOrActivated.ts b/src/hooks/core/onMountedOrActivated.ts
new file mode 100644
index 0000000..859083d
--- /dev/null
+++ b/src/hooks/core/onMountedOrActivated.ts
@@ -0,0 +1,22 @@
+import { nextTick, onMounted, onActivated } from 'vue';
+
+type HookArgs = {
+  type: 'mounted' | 'activated';
+}
+
+export function onMountedOrActivated(hook: Fn<HookArgs, any>) {
+  let mounted: boolean;
+
+  onMounted(() => {
+    hook({type: 'mounted'});
+    nextTick(() => {
+      mounted = true;
+    });
+  });
+
+  onActivated(() => {
+    if (mounted) {
+      hook({type: 'activated'});
+    }
+  });
+}
diff --git a/src/hooks/core/useAttrs.ts b/src/hooks/core/useAttrs.ts
new file mode 100644
index 0000000..ea96575
--- /dev/null
+++ b/src/hooks/core/useAttrs.ts
@@ -0,0 +1,41 @@
+import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue';
+import type { Ref } from 'vue';
+
+interface Params {
+  excludeListeners?: boolean;
+  excludeKeys?: string[];
+  excludeDefaultKeys?: boolean;
+}
+
+const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
+const LISTENER_PREFIX = /^on[A-Z]/;
+
+export function entries<T>(obj: Recordable<T>): [string, T][] {
+  return Object.keys(obj).map((key: string) => [key, obj[key]]);
+}
+
+export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
+  const instance = getCurrentInstance();
+  if (!instance) return {};
+
+  const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
+  const attrs = shallowRef({});
+  const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
+
+  // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
+  instance.attrs = reactive(instance.attrs);
+
+  watchEffect(() => {
+    const res = entries(instance.attrs).reduce((acm, [key, val]) => {
+      if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
+        acm[key] = val;
+      }
+
+      return acm;
+    }, {} as Recordable);
+
+    attrs.value = res;
+  });
+
+  return attrs;
+}
diff --git a/src/hooks/core/useContext.ts b/src/hooks/core/useContext.ts
new file mode 100644
index 0000000..0f039eb
--- /dev/null
+++ b/src/hooks/core/useContext.ts
@@ -0,0 +1,38 @@
+import {
+  InjectionKey,
+  provide,
+  inject,
+  reactive,
+  readonly as defineReadonly,
+  // defineComponent,
+  UnwrapRef,
+} from 'vue';
+
+export interface CreateContextOptions {
+  readonly?: boolean;
+  createProvider?: boolean;
+  native?: boolean;
+}
+
+type ShallowUnwrap<T> = {
+  [P in keyof T]: UnwrapRef<T[P]>;
+};
+
+export function createContext<T>(context: any, key: InjectionKey<T> = Symbol(), options: CreateContextOptions = {}) {
+  const { readonly = true, createProvider = false, native = false } = options;
+
+  const state = reactive(context);
+  const provideData = readonly ? defineReadonly(state) : state;
+  !createProvider && provide(key, native ? context : provideData);
+
+  return {
+    state,
+  };
+}
+
+export function useContext<T>(key: InjectionKey<T>, native?: boolean): T;
+export function useContext<T>(key: InjectionKey<T>, defaultValue?: any, native?: boolean): T;
+
+export function useContext<T>(key: InjectionKey<T> = Symbol(), defaultValue?: any): ShallowUnwrap<T> {
+  return inject(key, defaultValue || {});
+}
diff --git a/src/hooks/core/useLockFn.ts b/src/hooks/core/useLockFn.ts
new file mode 100644
index 0000000..141073b
--- /dev/null
+++ b/src/hooks/core/useLockFn.ts
@@ -0,0 +1,17 @@
+import { ref, unref } from 'vue';
+
+export function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
+  const lockRef = ref(false);
+  return async function (...args: P) {
+    if (unref(lockRef)) return;
+    lockRef.value = true;
+    try {
+      const ret = await fn(...args);
+      lockRef.value = false;
+      return ret;
+    } catch (e) {
+      lockRef.value = false;
+      throw e;
+    }
+  };
+}
diff --git a/src/hooks/core/useRefs.ts b/src/hooks/core/useRefs.ts
new file mode 100644
index 0000000..180bb14
--- /dev/null
+++ b/src/hooks/core/useRefs.ts
@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+import { ref, onBeforeUpdate } from 'vue';
+
+export function useRefs(): [Ref<HTMLElement[]>, (index: number) => (el: HTMLElement) => void] {
+  const refs = ref([]) as Ref<HTMLElement[]>;
+
+  onBeforeUpdate(() => {
+    refs.value = [];
+  });
+
+  const setRefs = (index: number) => (el: HTMLElement) => {
+    refs.value[index] = el;
+  };
+
+  return [refs, setRefs];
+}
diff --git a/src/hooks/core/useTimeout.ts b/src/hooks/core/useTimeout.ts
new file mode 100644
index 0000000..a549ac2
--- /dev/null
+++ b/src/hooks/core/useTimeout.ts
@@ -0,0 +1,45 @@
+import { ref, watch } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import { isFunction } from '/@/utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false }
+    );
+  }
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: TimeoutHandle;
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
+
+  start();
+
+  tryOnUnmounted(stop);
+
+  return { readyRef, stop, start };
+}
diff --git a/src/hooks/event/useBreakpoint.ts b/src/hooks/event/useBreakpoint.ts
new file mode 100644
index 0000000..01bbbec
--- /dev/null
+++ b/src/hooks/event/useBreakpoint.ts
@@ -0,0 +1,89 @@
+import { ref, computed, ComputedRef, unref } from 'vue';
+import { useEventListener } from '/@/hooks/event/useEventListener';
+import { screenMap, sizeEnum, screenEnum } from '/@/enums/breakpointEnum';
+
+let globalScreenRef: ComputedRef<sizeEnum | undefined>;
+let globalWidthRef: ComputedRef<number>;
+let globalRealWidthRef: ComputedRef<number>;
+
+export interface CreateCallbackParams {
+  screen: ComputedRef<sizeEnum | undefined>;
+  width: ComputedRef<number>;
+  realWidth: ComputedRef<number>;
+  screenEnum: typeof screenEnum;
+  screenMap: Map<sizeEnum, number>;
+  sizeEnum: typeof sizeEnum;
+}
+
+export function useBreakpoint() {
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum,
+    realWidthRef: globalRealWidthRef,
+  };
+}
+
+// Just call it once
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
+  const screenRef = ref<sizeEnum>(sizeEnum.XL);
+  const realWidthRef = ref(window.innerWidth);
+
+  function getWindowWidth() {
+    const width = document.body.clientWidth;
+    const xs = screenMap.get(sizeEnum.XS)!;
+    const sm = screenMap.get(sizeEnum.SM)!;
+    const md = screenMap.get(sizeEnum.MD)!;
+    const lg = screenMap.get(sizeEnum.LG)!;
+    const xl = screenMap.get(sizeEnum.XL)!;
+    if (width < xs) {
+      screenRef.value = sizeEnum.XS;
+    } else if (width < sm) {
+      screenRef.value = sizeEnum.SM;
+    } else if (width < md) {
+      screenRef.value = sizeEnum.MD;
+    } else if (width < lg) {
+      screenRef.value = sizeEnum.LG;
+    } else if (width < xl) {
+      screenRef.value = sizeEnum.XL;
+    } else {
+      screenRef.value = sizeEnum.XXL;
+    }
+    realWidthRef.value = width;
+  }
+
+  useEventListener({
+    el: window,
+    name: 'resize',
+
+    listener: () => {
+      getWindowWidth();
+      resizeFn();
+    },
+    // wait: 100,
+  });
+
+  getWindowWidth();
+  globalScreenRef = computed(() => unref(screenRef));
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
+  globalRealWidthRef = computed((): number => unref(realWidthRef));
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum,
+      screenMap,
+      sizeEnum,
+    });
+  }
+
+  resizeFn();
+  return {
+    screenRef: globalScreenRef,
+    screenEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  };
+}
diff --git a/src/hooks/event/useEventListener.ts b/src/hooks/event/useEventListener.ts
new file mode 100644
index 0000000..35e58be
--- /dev/null
+++ b/src/hooks/event/useEventListener.ts
@@ -0,0 +1,52 @@
+import type { Ref } from 'vue';
+import { ref, watch, unref } from 'vue';
+import { useThrottleFn, useDebounceFn } from '@vueuse/core';
+
+export type RemoveEventFn = () => void;
+export interface UseEventParams {
+  el?: Element | Ref<Element | undefined> | Window | any;
+  name: string;
+  listener: EventListener;
+  options?: boolean | AddEventListenerOptions;
+  autoRemove?: boolean;
+  isDebounce?: boolean;
+  wait?: number;
+}
+export function useEventListener({ el = window, name, listener, options, autoRemove = true, isDebounce = true, wait = 80 }: UseEventParams): {
+  removeEvent: RemoveEventFn;
+} {
+  /* eslint-disable-next-line */
+  let remove: RemoveEventFn = () => {};
+  const isAddRef = ref(false);
+
+  if (el) {
+    const element = ref(el as Element) as Ref<Element>;
+
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
+    const realHandler = wait ? handler : listener;
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true;
+      e.removeEventListener(name, realHandler, options);
+    };
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v);
+          cleanUp(() => {
+            autoRemove && removeEventListener(v);
+          });
+        }
+      },
+      { immediate: true }
+    );
+
+    remove = () => {
+      removeEventListener(element.value);
+      removeWatch();
+    };
+  }
+  return { removeEvent: remove };
+}
diff --git a/src/hooks/event/useIntersectionObserver.ts b/src/hooks/event/useIntersectionObserver.ts
new file mode 100644
index 0000000..44ed699
--- /dev/null
+++ b/src/hooks/event/useIntersectionObserver.ts
@@ -0,0 +1,42 @@
+import { Ref, watchEffect, ref } from 'vue';
+
+interface IntersectionObserverProps {
+  target: Ref<Element | null | undefined>;
+  root?: Ref<any>;
+  onIntersect: IntersectionObserverCallback;
+  rootMargin?: string;
+  threshold?: number;
+}
+
+export function useIntersectionObserver({ target, root, onIntersect, rootMargin = '0px', threshold = 0.1 }: IntersectionObserverProps) {
+  let cleanup = () => {};
+  const observer: Ref<Nullable<IntersectionObserver>> = ref(null);
+  const stopEffect = watchEffect(() => {
+    cleanup();
+
+    observer.value = new IntersectionObserver(onIntersect, {
+      root: root ? root.value : null,
+      rootMargin,
+      threshold,
+    });
+
+    const current = target.value;
+
+    current && observer.value.observe(current);
+
+    cleanup = () => {
+      if (observer.value) {
+        observer.value.disconnect();
+        target.value && observer.value.unobserve(target.value);
+      }
+    };
+  });
+
+  return {
+    observer,
+    stop: () => {
+      cleanup();
+      stopEffect();
+    },
+  };
+}
diff --git a/src/hooks/event/useScroll.ts b/src/hooks/event/useScroll.ts
new file mode 100644
index 0000000..2a4b7bc
--- /dev/null
+++ b/src/hooks/event/useScroll.ts
@@ -0,0 +1,65 @@
+import type { Ref } from 'vue';
+
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { isWindow, isObject } from '/@/utils/is';
+import { useThrottleFn } from '@vueuse/core';
+
+export function useScroll(
+  refEl: Ref<Element | Window | null>,
+  options?: {
+    wait?: number;
+    leading?: boolean;
+    trailing?: boolean;
+  }
+) {
+  const refX = ref(0);
+  const refY = ref(0);
+  let handler = () => {
+    if (isWindow(refEl.value)) {
+      refX.value = refEl.value.scrollX;
+      refY.value = refEl.value.scrollY;
+    } else if (refEl.value) {
+      refX.value = (refEl.value as Element).scrollLeft;
+      refY.value = (refEl.value as Element).scrollTop;
+    }
+  };
+
+  if (isObject(options)) {
+    let wait = 0;
+    if (options.wait && options.wait > 0) {
+      wait = options.wait;
+      Reflect.deleteProperty(options, 'wait');
+    }
+
+    handler = useThrottleFn(handler, wait);
+  }
+
+  let stopWatch: () => void;
+  onMounted(() => {
+    stopWatch = watch(
+      refEl,
+      (el, prevEl, onCleanup) => {
+        if (el) {
+          el.addEventListener('scroll', handler);
+        } else if (prevEl) {
+          prevEl.removeEventListener('scroll', handler);
+        }
+        onCleanup(() => {
+          refX.value = refY.value = 0;
+          el && el.removeEventListener('scroll', handler);
+        });
+      },
+      { immediate: true }
+    );
+  });
+
+  onUnmounted(() => {
+    refEl.value && refEl.value.removeEventListener('scroll', handler);
+  });
+
+  function stop() {
+    stopWatch && stopWatch();
+  }
+
+  return { refX, refY, stop };
+}
diff --git a/src/hooks/event/useScrollTo.ts b/src/hooks/event/useScrollTo.ts
new file mode 100644
index 0000000..f6d5dc6
--- /dev/null
+++ b/src/hooks/event/useScrollTo.ts
@@ -0,0 +1,59 @@
+import { isFunction, isUnDef } from '/@/utils/is';
+import { ref, unref } from 'vue';
+
+export interface ScrollToParams {
+  el: any;
+  to: number;
+  duration?: number;
+  callback?: () => any;
+}
+
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t * t + b;
+  }
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
+const move = (el: HTMLElement, amount: number) => {
+  el.scrollTop = amount;
+};
+
+const position = (el: HTMLElement) => {
+  return el.scrollTop;
+};
+export function useScrollTo({ el, to, duration = 500, callback }: ScrollToParams) {
+  const isActiveRef = ref(false);
+  const start = position(el);
+  const change = to - start;
+  const increment = 20;
+  let currentTime = 0;
+  duration = isUnDef(duration) ? 500 : duration;
+
+  const animateScroll = function () {
+    if (!unref(isActiveRef)) {
+      return;
+    }
+    currentTime += increment;
+    const val = easeInOutQuad(currentTime, start, change, duration);
+    move(el, val);
+    if (currentTime < duration && unref(isActiveRef)) {
+      requestAnimationFrame(animateScroll);
+    } else {
+      if (callback && isFunction(callback)) {
+        callback();
+      }
+    }
+  };
+  const run = () => {
+    isActiveRef.value = true;
+    animateScroll();
+  };
+
+  const stop = () => {
+    isActiveRef.value = false;
+  };
+
+  return { start: run, stop };
+}
diff --git a/src/hooks/event/useWindowSizeFn.ts b/src/hooks/event/useWindowSizeFn.ts
new file mode 100644
index 0000000..7b18ca0
--- /dev/null
+++ b/src/hooks/event/useWindowSizeFn.ts
@@ -0,0 +1,36 @@
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+import { useDebounceFn } from '@vueuse/core';
+
+interface WindowSizeOptions {
+  once?: boolean;
+  immediate?: boolean;
+  listenerOptions?: AddEventListenerOptions | boolean;
+}
+
+export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
+  let handler = () => {
+    fn();
+  };
+  const handleSize = useDebounceFn(handler, wait);
+  handler = handleSize;
+
+  const start = () => {
+    if (options && options.immediate) {
+      handler();
+    }
+    window.addEventListener('resize', handler);
+  };
+
+  const stop = () => {
+    window.removeEventListener('resize', handler);
+  };
+
+  tryOnMounted(() => {
+    start();
+  });
+
+  tryOnUnmounted(() => {
+    stop();
+  });
+  return [start, stop];
+}
diff --git a/src/hooks/jeecg/useAdaptiveWidth.ts b/src/hooks/jeecg/useAdaptiveWidth.ts
new file mode 100644
index 0000000..2eb88ec
--- /dev/null
+++ b/src/hooks/jeecg/useAdaptiveWidth.ts
@@ -0,0 +1,88 @@
+/**
+ * 自适应宽度构造器
+ *
+ * @time 2022-4-8
+ * @author sunjianlei
+ */
+import { ref } from 'vue';
+import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
+import { useEventListener } from '/@/hooks/event/useEventListener';
+
+// key = js运算符+数字
+const defWidthConfig: configType = {
+  '<=565': '100%',
+  '<=1366': '800px',
+  '<=1600': '600px',
+  '<=1920': '600px',
+  '>1920': '500px',
+};
+
+type configType = Record<string, string | number>;
+
+/**
+ * 自适应宽度
+ *
+ * @param widthConfig 宽度配置，可参考 defWidthConfig 配置
+ * @param assign 是否合并默认配置
+ * @param debounce 去抖毫秒数
+ */
+export function useAdaptiveWidth(widthConfig = defWidthConfig, assign = true, debounce = 50) {
+  const widthConfigAssign = assign ? Object.assign({}, defWidthConfig, widthConfig) : widthConfig;
+  const configKeys = Object.keys(widthConfigAssign);
+
+  const adaptiveWidth = ref<string | number>();
+
+  /**
+   * 进行计算宽度
+   * @param innerWidth
+   */
+  function calcWidth(innerWidth) {
+    let width;
+    for (const key of configKeys) {
+      try {
+        // 通过js运算
+        let flag = new Function(`return ${innerWidth} ${key}`)();
+        if (flag) {
+          width = widthConfigAssign[key];
+          break;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    if (width) {
+      adaptiveWidth.value = width;
+    } else {
+      console.warn('没有找到匹配的自适应宽度');
+    }
+  }
+
+  // 初始计算
+  calcWidth(window.innerWidth);
+
+  // 监听 resize 事件
+  const { removeEvent } = useEventListener({
+    el: window,
+    name: 'resize',
+    listener: useDebounceFn(() => calcWidth(window.innerWidth), debounce),
+  });
+  // 卸载组件时取消监听事件
+  tryOnUnmounted(() => removeEvent());
+
+  return { adaptiveWidth };
+}
+
+/**
+ * 抽屉自适应宽度
+ */
+export function useDrawerAdaptiveWidth() {
+  return useAdaptiveWidth(
+    {
+      '<=620': '100%',
+      '<=1600': 600,
+      '<=1920': 650,
+      '>1920': 700,
+    },
+    false
+  );
+}
diff --git a/src/hooks/setting/index.ts b/src/hooks/setting/index.ts
new file mode 100644
index 0000000..e849e1c
--- /dev/null
+++ b/src/hooks/setting/index.ts
@@ -0,0 +1,75 @@
+import type { GlobConfig } from '/#/config';
+
+import { getAppEnvConfig } from '/@/utils/env';
+
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_APP_CAS_BASE_URL,
+    VITE_GLOB_APP_OPEN_SSO,
+    VITE_GLOB_APP_OPEN_QIANKUN,
+    VITE_GLOB_DOMAIN_URL,
+    VITE_GLOB_ONLINE_VIEW_URL,
+    VITE_GLOB_RUN_PLATFORM,
+
+    // 【JEECG作为乾坤子应用】
+    VITE_GLOB_QIANKUN_MICRO_APP_NAME,
+    VITE_GLOB_QIANKUN_MICRO_APP_ENTRY,
+  } = getAppEnvConfig();
+
+  // if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+  //   warn(
+  //     `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+  //   );
+  // }
+
+  // 短标题：替换shortName的下划线为空格
+  const shortTitle = VITE_GLOB_APP_SHORT_NAME.replace(/_/g, " ");
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    domainUrl: VITE_GLOB_DOMAIN_URL,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    shortTitle: shortTitle,
+    openSso: VITE_GLOB_APP_OPEN_SSO,
+    openQianKun: VITE_GLOB_APP_OPEN_QIANKUN,
+    casBaseUrl: VITE_GLOB_APP_CAS_BASE_URL,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_DOMAIN_URL,
+    viewUrl: VITE_GLOB_ONLINE_VIEW_URL,
+    // true: 新任务办理页面弹窗, false:旧的任务办理页面弹窗
+    useNewTaskModal: true,
+    // 当前是否运行在 electron 平台
+    isElectronPlatform: VITE_GLOB_RUN_PLATFORM === 'electron',
+
+    // 【JEECG作为乾坤子应用】是否以乾坤子应用模式启动
+    isQiankunMicro: VITE_GLOB_QIANKUN_MICRO_APP_NAME != null && VITE_GLOB_QIANKUN_MICRO_APP_NAME !== '',
+    // 【JEECG作为乾坤子应用】乾坤子应用入口
+    qiankunMicroAppEntry: VITE_GLOB_QIANKUN_MICRO_APP_ENTRY,
+  };
+
+  // 【JEECG作为乾坤子应用】乾坤子应用下，需要定义一下
+  if (!window['_CONFIG']) {
+    window['_CONFIG'] = {}
+  }
+
+  // 代码逻辑说明: 【QQYUN-10956】配置了自定义前缀，外部连接打不开，需要兼容处理
+  let domainURL = VITE_GLOB_DOMAIN_URL;
+
+  // 如果不是以http(s)开头的，也不是以域名开头的，那么就是拼接当前域名
+  if (!/^http(s)?/.test(domainURL) && !/^(\/\/)?(.*\.)?.+\..+/.test(domainURL)) {
+    if (!domainURL.startsWith('/')) {
+      domainURL = '/' + domainURL;
+    }
+    domainURL = window.location.origin + domainURL;
+  }
+
+  // @ts-ignore
+  window._CONFIG['domianURL'] = domainURL;
+
+  return glob as Readonly<GlobConfig>;
+};
diff --git a/src/hooks/setting/useHeaderSetting.ts b/src/hooks/setting/useHeaderSetting.ts
new file mode 100644
index 0000000..098ed39
--- /dev/null
+++ b/src/hooks/setting/useHeaderSetting.ts
@@ -0,0 +1,90 @@
+import type { HeaderSetting } from '/#/config';
+
+import { computed, unref } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useFullContent } from '/@/hooks/web/useFullContent';
+import { MenuModeEnum } from '/@/enums/menuEnum';
+
+export function useHeaderSetting() {
+  const { getFullContent } = useFullContent();
+  const appStore = useAppStore();
+
+  const getShowFullHeaderRef = computed(() => {
+    return !unref(getFullContent) && unref(getShowMixHeaderRef) && unref(getShowHeader) && !unref(getIsTopMenu) && !unref(getIsMixSidebar);
+  });
+
+  const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
+
+  const getShowInsetHeaderRef = computed(() => {
+    const need = !unref(getFullContent) && unref(getShowHeader);
+    return (need && !unref(getShowMixHeaderRef)) || (need && unref(getIsTopMenu)) || (need && unref(getIsMixSidebar));
+  });
+
+  const { getMenuMode, getSplit, getShowHeaderTrigger, getIsSidebarType, getIsMixSidebar, getIsTopMenu } = useMenuSetting();
+  const { getShowBreadCrumb, getShowLogo } = useRootSetting();
+
+  const getShowMixHeaderRef = computed(() => !unref(getIsSidebarType) && unref(getShowHeader));
+
+  const getShowDoc = computed(() => appStore.getHeaderSetting.showDoc);
+
+  const getHeaderTheme = computed(() => appStore.getHeaderSetting.theme);
+
+  const getShowHeader = computed(() => appStore.getHeaderSetting.show);
+
+  const getFixed = computed(() => appStore.getHeaderSetting.fixed);
+
+  const getHeaderBgColor = computed(() => appStore.getHeaderSetting.bgColor);
+
+  const getShowSearch = computed(() => appStore.getHeaderSetting.showSearch);
+
+  const getUseLockPage = computed(() => appStore.getHeaderSetting.useLockPage);
+
+  const getShowFullScreen = computed(() => appStore.getHeaderSetting.showFullScreen);
+
+  const getShowNotice = computed(() => appStore.getHeaderSetting.showNotice);
+
+  const getShowBread = computed(() => {
+    return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit);
+  });
+  const getShowBreadTitle = computed(() => {
+    return unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(getShowBreadCrumb) && !unref(getSplit);
+  });
+
+  const getShowHeaderLogo = computed(() => {
+    return unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar);
+  });
+
+  const getShowContent = computed(() => {
+    return unref(getShowBread) || unref(getShowHeaderTrigger);
+  });
+
+  // Set header configuration
+  function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
+    appStore.setProjectConfig({ headerSetting });
+  }
+  return {
+    setHeaderSetting,
+
+    getShowDoc,
+    getShowSearch,
+    getHeaderTheme,
+    getUseLockPage,
+    getShowFullScreen,
+    getShowNotice,
+    getShowBread,
+    getShowContent,
+    getShowHeaderLogo,
+    getShowHeader,
+    getFixed,
+    getShowMixHeaderRef,
+    getShowFullHeaderRef,
+    getShowInsetHeaderRef,
+    getUnFixedAndFull,
+    getHeaderBgColor,
+    getShowBreadTitle
+  };
+}
diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
new file mode 100644
index 0000000..495df5a
--- /dev/null
+++ b/src/hooks/setting/useMenuSetting.ts
@@ -0,0 +1,156 @@
+import type { MenuSetting } from '/#/config';
+
+import { computed, unref, ref } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+
+import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+import { useFullContent } from '/@/hooks/web/useFullContent';
+
+const mixSideHasChildren = ref(false);
+
+export function useMenuSetting() {
+  const { getFullContent: fullContent } = useFullContent();
+  const appStore = useAppStore();
+
+  const getShowSidebar = computed(() => {
+    return unref(getSplit) || (unref(getShowMenu) && unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && !unref(fullContent));
+  });
+
+  const getCollapsed = computed(() => appStore.getMenuSetting.collapsed);
+
+  const getMenuType = computed(() => appStore.getMenuSetting.type);
+
+  const getMenuMode = computed(() => appStore.getMenuSetting.mode);
+
+  const getMenuFixed = computed(() => appStore.getMenuSetting.fixed);
+
+  const getShowMenu = computed(() => appStore.getMenuSetting.show);
+
+  const getMenuHidden = computed(() => appStore.getMenuSetting.hidden);
+
+  const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth);
+
+  const getTrigger = computed(() => appStore.getMenuSetting.trigger);
+
+  const getMenuTheme = computed(() => appStore.getMenuSetting.theme);
+
+  const getSplit = computed(() => appStore.getMenuSetting.split);
+
+  const getMenuBgColor = computed(() => appStore.getMenuSetting.bgColor);
+
+  const getMixSideTrigger = computed(() => appStore.getMenuSetting.mixSideTrigger);
+
+  const getCanDrag = computed(() => appStore.getMenuSetting.canDrag);
+
+  const getAccordion = computed(() => appStore.getMenuSetting.accordion);
+
+  const getMixSideFixed = computed(() => appStore.getMenuSetting.mixSideFixed);
+
+  const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign);
+
+  const getCloseMixSidebarOnChange = computed(() => appStore.getMenuSetting.closeMixSidebarOnChange);
+
+  const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
+
+  const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
+
+  const getCollapsedShowTitle = computed(() => appStore.getMenuSetting.collapsedShowTitle);
+
+  const getShowTopMenu = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
+  });
+
+  const getShowHeaderTrigger = computed(() => {
+    if (unref(getMenuType) === MenuTypeEnum.TOP_MENU || !unref(getShowMenu) || unref(getMenuHidden)) {
+      return false;
+    }
+
+    return unref(getTrigger) === TriggerEnum.HEADER;
+  });
+
+  const getIsHorizontal = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
+  });
+
+  const getIsMixSidebar = computed(() => {
+    return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR;
+  });
+
+  const getIsMixMode = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.INLINE && unref(getMenuType) === MenuTypeEnum.MIX;
+  });
+
+  const getRealWidth = computed(() => {
+    if (unref(getIsMixSidebar)) {
+      // 代码逻辑说明: 【QQYUN-8774】侧边混合导航菜单宽度调整
+      return unref(getCollapsed) && !unref(getMixSideFixed) ? unref(getMiniWidthNumber) : unref(getMenuWidth) - 60;
+    }
+    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+  });
+
+  const getMiniWidthNumber = computed(() => {
+    const { collapsedShowTitle } = appStore.getMenuSetting;
+    return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+  });
+
+  const getCalcContentWidth = computed(() => {
+    const width =
+      unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
+        ? 0
+        : unref(getIsMixSidebar)
+        ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
+          (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
+        : unref(getRealWidth);
+
+    return `calc(100% - ${unref(width)}px)`;
+  });
+
+  // Set menu configuration
+  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
+    appStore.setProjectConfig({ menuSetting });
+  }
+
+  function toggleCollapsed() {
+    setMenuSetting({
+      collapsed: !unref(getCollapsed),
+    });
+  }
+  return {
+    setMenuSetting,
+
+    toggleCollapsed,
+
+    getMenuFixed,
+    getRealWidth,
+    getMenuType,
+    getMenuMode,
+    getShowMenu,
+    getCollapsed,
+    getMiniWidthNumber,
+    getCalcContentWidth,
+    getMenuWidth,
+    getTrigger,
+    getSplit,
+    getMenuTheme,
+    getCanDrag,
+    getCollapsedShowTitle,
+    getIsHorizontal,
+    getIsSidebarType,
+    getAccordion,
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getTopMenuAlign,
+    getMenuHidden,
+    getIsTopMenu,
+    getMenuBgColor,
+    getShowSidebar,
+    getIsMixMode,
+    getIsMixSidebar,
+    getCloseMixSidebarOnChange,
+    getMixSideTrigger,
+    getMixSideFixed,
+    mixSideHasChildren,
+  };
+}
diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
new file mode 100644
index 0000000..7c7ab01
--- /dev/null
+++ b/src/hooks/setting/useMultipleTabSetting.ts
@@ -0,0 +1,32 @@
+import type { MultiTabsSetting } from '/#/config';
+
+import { computed } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+
+export function useMultipleTabSetting() {
+  const appStore = useAppStore();
+
+  const getShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show);
+
+  const getShowQuick = computed(() => appStore.getMultiTabsSetting.showQuick);
+
+  const getShowRedo = computed(() => appStore.getMultiTabsSetting.showRedo);
+
+  const getShowFold = computed(() => appStore.getMultiTabsSetting.showFold);
+
+  // 获取标签页样式
+  const getTabsTheme = computed(() => appStore.getMultiTabsSetting.theme);
+
+  function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
+    appStore.setProjectConfig({ multiTabsSetting });
+  }
+  return {
+    setMultipleTabSetting,
+    getShowMultipleTab,
+    getShowQuick,
+    getShowRedo,
+    getShowFold,
+    getTabsTheme,
+  };
+}
diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts
new file mode 100644
index 0000000..508fae7
--- /dev/null
+++ b/src/hooks/setting/useRootSetting.ts
@@ -0,0 +1,90 @@
+import type { ProjectConfig } from '/#/config';
+
+import { computed } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+import { ContentEnum, ThemeEnum } from '/@/enums/appEnum';
+
+type RootSetting = Omit<ProjectConfig, 'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'>;
+
+export function useRootSetting() {
+  const appStore = useAppStore();
+
+  const getPageLoading = computed(() => appStore.getPageLoading);
+
+  const getOpenKeepAlive = computed(() => appStore.getProjectConfig.openKeepAlive);
+
+  const getSettingButtonPosition = computed(() => appStore.getProjectConfig.settingButtonPosition);
+
+  const getCanEmbedIFramePage = computed(() => appStore.getProjectConfig.canEmbedIFramePage);
+
+  const getPermissionMode = computed(() => appStore.getProjectConfig.permissionMode);
+
+  const getShowLogo = computed(() => appStore.getProjectConfig.showLogo);
+
+  const getContentMode = computed(() => appStore.getProjectConfig.contentMode);
+
+  const getUseOpenBackTop = computed(() => appStore.getProjectConfig.useOpenBackTop);
+
+  const getShowSettingButton = computed(() => appStore.getProjectConfig.showSettingButton);
+
+  const getUseErrorHandle = computed(() => appStore.getProjectConfig.useErrorHandle);
+
+  const getShowFooter = computed(() => appStore.getProjectConfig.showFooter);
+
+  const getShowBreadCrumb = computed(() => appStore.getProjectConfig.showBreadCrumb);
+
+  const getThemeColor = computed(() => appStore.getProjectConfig.themeColor);
+
+  const getShowBreadCrumbIcon = computed(() => appStore.getProjectConfig.showBreadCrumbIcon);
+
+  const getFullContent = computed(() => appStore.getProjectConfig.fullContent);
+
+  const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak);
+
+  const getGrayMode = computed(() => appStore.getProjectConfig.grayMode);
+  // 代码逻辑说明: 【QQYUN-10952】AI助手支持通过设置来配置是否显示
+  const getAiIconShow = computed(() => appStore.getProjectConfig.aiIconShow);
+  const getLockTime = computed(() => appStore.getProjectConfig.lockTime);
+
+  const getShowDarkModeToggle = computed(() => appStore.getProjectConfig.showDarkModeToggle);
+
+  const getDarkMode = computed(() => appStore.getDarkMode);
+
+  const getLayoutContentMode = computed(() => (appStore.getProjectConfig.contentMode === ContentEnum.FULL ? ContentEnum.FULL : ContentEnum.FIXED));
+
+  function setRootSetting(setting: Partial<RootSetting>) {
+    appStore.setProjectConfig(setting);
+  }
+
+  function setDarkMode(mode: ThemeEnum) {
+    appStore.setDarkMode(mode);
+  }
+  return {
+    setRootSetting,
+
+    getSettingButtonPosition,
+    getFullContent,
+    getColorWeak,
+    getGrayMode,
+    getLayoutContentMode,
+    getPageLoading,
+    getOpenKeepAlive,
+    getCanEmbedIFramePage,
+    getPermissionMode,
+    getShowLogo,
+    getUseErrorHandle,
+    getShowBreadCrumb,
+    getShowBreadCrumbIcon,
+    getUseOpenBackTop,
+    getShowSettingButton,
+    getShowFooter,
+    getContentMode,
+    getLockTime,
+    getThemeColor,
+    getDarkMode,
+    setDarkMode,
+    getShowDarkModeToggle,
+    getAiIconShow,
+  };
+}
diff --git a/src/hooks/setting/useTransitionSetting.ts b/src/hooks/setting/useTransitionSetting.ts
new file mode 100644
index 0000000..b6d421a
--- /dev/null
+++ b/src/hooks/setting/useTransitionSetting.ts
@@ -0,0 +1,31 @@
+import type { TransitionSetting } from '/#/config';
+
+import { computed } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+
+export function useTransitionSetting() {
+  const appStore = useAppStore();
+
+  const getEnableTransition = computed(() => appStore.getTransitionSetting?.enable);
+
+  const getOpenNProgress = computed(() => appStore.getTransitionSetting?.openNProgress);
+
+  const getOpenPageLoading = computed((): boolean => {
+    return !!appStore.getTransitionSetting?.openPageLoading;
+  });
+
+  const getBasicTransition = computed(() => appStore.getTransitionSetting?.basicTransition);
+
+  function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {
+    appStore.setProjectConfig({ transitionSetting });
+  }
+  return {
+    setTransitionSetting,
+
+    getEnableTransition,
+    getOpenNProgress,
+    getOpenPageLoading,
+    getBasicTransition,
+  };
+}
diff --git a/src/hooks/system/useAutoAdapt.ts b/src/hooks/system/useAutoAdapt.ts
new file mode 100644
index 0000000..7f5c71b
--- /dev/null
+++ b/src/hooks/system/useAutoAdapt.ts
@@ -0,0 +1,51 @@
+import { ref } from 'vue';
+import { ScreenSizeEnum } from '/@/enums/sizeEnum';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+// 定义 useAdapt 方法参数
+interface AdaptOptions {
+  // xl>1200
+  xl?: string | number;
+  // xl>992
+  lg?: string | number;
+  // xl>768
+  md?: string | number;
+  // xl>576
+  sm?: string | number;
+  // xl>480
+  xs?: string | number;
+  //xl<480默认值
+  mindef?: string | number;
+  //默认值
+  def?: string | number;
+}
+export function useAdapt(props?: AdaptOptions) {
+  //默认宽度
+  const width = ref<string | number>(props?.def || '600px');
+  //获取宽度
+  useWindowSizeFn(calcWidth, 100, { immediate: true });
+  //计算宽度
+  function calcWidth() {
+    let windowWidth = document.documentElement.clientWidth;
+    switch (true) {
+      case windowWidth > ScreenSizeEnum.XL:
+        width.value = props?.xl || '600px';
+        break;
+      case windowWidth > ScreenSizeEnum.LG:
+        width.value = props?.lg || '600px';
+        break;
+      case windowWidth > ScreenSizeEnum.MD:
+        width.value = props?.md || '600px';
+        break;
+      case windowWidth > ScreenSizeEnum.SM:
+        width.value = props?.sm || '500px';
+        break;
+      case windowWidth > ScreenSizeEnum.XS:
+        width.value = props?.xs || '400px';
+        break;
+      default:
+        width.value = props?.mindef || '300px';
+        break;
+    }
+  }
+  return { width, calcWidth };
+}
diff --git a/src/hooks/system/useJvxeMethods.ts b/src/hooks/system/useJvxeMethods.ts
new file mode 100644
index 0000000..25989dc
--- /dev/null
+++ b/src/hooks/system/useJvxeMethods.ts
@@ -0,0 +1,192 @@
+import { defHttp } from '/@/utils/http/axios';
+import { ref, unref } from 'vue';
+import { VALIDATE_FAILED, validateFormModelAndTables } from '/@/utils/common/vxeUtils';
+
+export function useJvxeMethod(requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys, validateSubForm?) {
+  const formRef = ref();
+  /** 查询某个tab的数据 */
+  function requestSubTableData(url, params, tab, success) {
+    tab.loading = true;
+    defHttp
+      .get({ url, params }, { isTransformResponse: false })
+      .then((res) => {
+        let { result } = res;
+        if (res.success && result) {
+          if (Array.isArray(result)) {
+            tab.dataSource = result;
+          } else if (Array.isArray(result.records)) {
+            tab.dataSource = result.records;
+          }
+        }
+        typeof success === 'function' ? success(res) : '';
+      })
+      .finally(() => {
+        tab.loading = false;
+      });
+  }
+
+  /* --- handle 事件 --- */
+
+  /** ATab 选项卡切换事件 */
+  function handleChangeTabs(key) {
+    // 自动重置scrollTop状态，防止出现白屏
+    tableRefs[key]?.value?.resetScrollTop(0);
+  }
+
+  /** 获取所有的editableTable实例*/
+  function getAllTable() {
+    let values = Object.values(tableRefs);
+    return Promise.all(values);
+  }
+  /** 确定按钮点击事件 */
+  function handleSubmit() {
+    /** 触发表单验证 */
+    getAllTable()
+      .then((tables) => {
+        let values = formRef.value.getFieldsValue();
+        return validateFormModelAndTables(formRef.value.validate, values, tables, formRef.value.getProps, false);
+      })
+      .then((allValues) => {
+        /** 一次性验证一对一的所有子表 */
+        return validateSubForm && typeof validateSubForm === 'function' ? validateSubForm(allValues) : validateAllSubOne(allValues);
+      })
+      .then((allValues) => {
+        if (typeof classifyIntoFormData !== 'function') {
+          throw throwNotFunction('classifyIntoFormData');
+        }
+        let formData = classifyIntoFormData(allValues);
+        // 发起请求
+        return requestAddOrEdit(formData);
+      })
+      .catch((e) => {
+        if (e.error === VALIDATE_FAILED) {
+          // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
+          // 代码逻辑说明: VUEN-2866【代码生成】Tab风格 一对多子表校验不通过时，点击提交表单空白了，流程附加页面也有此问题
+          if(e.paneKey){
+            activeKey.value = e.paneKey
+          }else{
+            // 代码逻辑说明: TV360X-478 一对多tab，校验未通过时，tab没有跳转
+            activeKey.value = e.subIndex == null ? (e.index == null ? unref(activeKey) : refKeys.value[e.index]) : Object.keys(tableRefs)[e.subIndex];
+          }
+          // 代码逻辑说明: 【TV360X-1064】非原生提交表单滚动校验没通过的项---
+          if (e?.errorFields) {
+            const firstField = e.errorFields[0];
+            if (firstField) {
+              formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'end' });
+            }
+          }
+          return Promise.reject(e?.errorFields);
+        } else {
+          console.error(e);
+        }
+      });
+  }
+  //校验所有子表表单
+  function validateAllSubOne(allValues) {
+    return new Promise((resolve) => {
+      resolve(allValues);
+    });
+  }
+  /* --- throw --- */
+
+  /** not a function */
+  function throwNotFunction(name) {
+    return `${name} 未定义或不是一个函数`;
+  }
+
+  /** not a array */
+  function throwNotArray(name) {
+    return `${name} 未定义或不是一个数组`;
+  }
+  return [handleChangeTabs, handleSubmit, requestSubTableData, formRef];
+}
+
+/**
+ * 校验多个表单和子表table，用于原生的antd-vue的表单
+ * @param activeKey 子表表单/vxe-table 所在tabs的 activeKey
+ * @param refMap 子表表单/vxe-table对应的ref对象 map结构
+ * 示例：
+ * useValidateAntFormAndTable(activeKey, {
+ *   'tableA': tableARef,
+ *   'formB': formBRef
+ * })
+ */
+export function useValidateAntFormAndTable(activeKey, refMap) {
+  /**
+   * 获取所有子表数据
+   */
+  async function getSubFormAndTableData() {
+    let formData = {};
+    let all = Object.keys(refMap);
+    let key = '';
+    for (let i = 0; i < all.length; i++) {
+      key = all[i];
+      let instance = refMap[key].value;
+      if (instance.isForm) {
+        let subFormData = await validateFormAndGetData(instance, key);
+        if (subFormData) {
+          formData[key + 'List'] = [subFormData];
+        }
+      } else {
+        let arr = await validateTableAndGetData(instance, key);
+        if (arr && arr.length > 0) {
+          formData[key + 'List'] = arr;
+        }
+      }
+    }
+    return formData;
+  }
+
+  /**
+   * 转换数据用 如果有数组转成逗号分割的格式
+   * @param data
+   */
+  function transformData(data) {
+    if (data) {
+      Object.keys(data).map((k) => {
+        if (data[k] instanceof Array) {
+          data[k] = data[k].join(',');
+        }
+      });
+    }
+    return data;
+  }
+
+  /**
+   * 子表table
+   * @param instance
+   * @param key
+   */
+  async function validateTableAndGetData(instance, key) {
+    const errors = await instance.validateTable();
+    if (!errors) {
+      return instance.getTableData();
+    } else {
+      activeKey.value = key;
+      // 自动重置scrollTop状态，防止出现白屏
+      instance.resetScrollTop(0);
+      return Promise.reject(1);
+    }
+  }
+
+  /**
+   * 子表表单
+   * @param instance
+   * @param key
+   */
+  async function validateFormAndGetData(instance, key) {
+    try {
+      let data = await instance.getFormData();
+      transformData(data);
+      return data;
+    } catch (e) {
+      activeKey.value = key;
+      return Promise.reject(e);
+    }
+  }
+
+  return {
+    getSubFormAndTableData,
+    transformData,
+  };
+}
diff --git a/src/hooks/system/useListPage.ts b/src/hooks/system/useListPage.ts
new file mode 100644
index 0000000..525ad88
--- /dev/null
+++ b/src/hooks/system/useListPage.ts
@@ -0,0 +1,399 @@
+import { reactive, ref, Ref, unref } from 'vue';
+import { merge } from 'lodash-es';
+import { DynamicProps } from '/#/utils';
+import { BasicTableProps, TableActionType, useTable } from '/@/components/Table';
+import { ColEx } from '/@/components/Form/src/types';
+import { FormActionType } from '/@/components/Form';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { filterObj } from '/@/utils/common/compUtils';
+import { isFunction } from '@/utils/is';
+const { handleExportXls, handleImportXls } = useMethods();
+
+// 定义 useListPage 方法所需参数
+interface ListPageOptions {
+  // 样式作用域范围
+  designScope?: string;
+  // 【必填】表格参数配置
+  tableProps: TableProps;
+  // 是否分页
+  pagination?: boolean;
+  // 导出配置
+  exportConfig?: {
+    url: string | (() => string);
+    // 导出文件名
+    name?: string | (() => string);
+    //导出参数
+    params?: object | (() => object);
+  };
+  // 导入配置
+  importConfig?: {
+    // 代码逻辑说明: erp代码生成 子表 导入地址是动态的
+    url: string | (() => string);
+    // 导出成功后的回调
+    success?: (fileInfo?: any) => void;
+  };
+}
+
+interface IDoRequestOptions {
+  // 是否显示确认对话框，默认 true
+  confirm?: boolean;
+  // 是否自动刷新表格，默认 true
+  reload?: boolean;
+  // 是否自动清空选择，默认 true
+  clearSelection?: boolean;
+}
+
+/**
+ * listPage页面公共方法
+ *
+ * @param options
+ */
+export function useListPage(options: ListPageOptions) {
+  const $message = useMessage();
+  let $design = {} as ReturnType<typeof useDesign>;
+  if (options.designScope) {
+    $design = useDesign(options.designScope);
+  }
+
+  const tableContext = useListTable(options.tableProps);
+
+  const [, { getForm, reload, setLoading, getColumns }, { selectedRowKeys }] = tableContext;
+
+  // 导出 excel
+  async function onExportXls() {
+    // 代码逻辑说明: 导出新增自定义参数------------
+    let { url, name, params } = options?.exportConfig ?? {};
+    let realUrl = typeof url === 'function' ? url() : url;
+    if (realUrl) {
+      let title = typeof name === 'function' ? name() : name;
+      // 代码逻辑说明: erp代码生成 子表 导出报错，原因未知-
+      let paramsForm:any = {};
+      try {
+        //当useSearchFor不等于false的时候，才去触发validate
+        if (options?.tableProps?.useSearchForm !== false) {
+          paramsForm = await getForm().validate();
+          console.log('paramsForm', paramsForm);
+          // 在这里把执行beforeFetch
+          if (options?.tableProps?.beforeFetch) {
+            paramsForm = await options?.tableProps?.beforeFetch(paramsForm);
+          }
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+
+      // 代码逻辑说明: [/issues/409]导出功能没有按排序结果导出,设置导出默认排序，创建时间倒序
+      if(!paramsForm?.column){
+         Object.assign(paramsForm,{column:'createTime',order:'desc'});
+      }
+
+      //如果参数不为空，则整合到一起
+      // 代码逻辑说明: erp代码生成 子表 导出动态设置mainId
+      if (params) {
+        // 代码逻辑说明: [QQYUN-11627]代码生成原生表单，数据导出，前端报错，并且范围参数没有转换 #7962
+        const realParams = isFunction(params) ? await params() : { ...(params || {}) };
+        Object.keys(realParams).map((k) => {
+          let temp = (realParams as object)[k];
+          if (temp) {
+            paramsForm[k] = unref(temp);
+          }
+        });
+      }
+      if (selectedRowKeys.value && selectedRowKeys.value.length > 0) {
+        paramsForm['selections'] = selectedRowKeys.value.join(',');
+      }
+
+      //是否显示表格设置
+      if(options?.tableProps?.showTableSetting !== false){
+        //是否显示配置字段
+        if(options?.tableProps?.tableSetting?.setting !== false){
+          await exportColumns(paramsForm)
+        }
+      }
+    
+      return handleExportXls(title as string, realUrl, filterObj(paramsForm));
+    } else {
+      $message.createMessage.warn('没有传递 exportConfig.url 参数');
+      return Promise.reject();
+    }
+  }
+
+  /**
+   * 设置导出的列
+   * 
+   * @param paramsForm
+   */
+  async function exportColumns(paramsForm: any) {
+    //获取表格的列
+    let columns = getColumns();
+    if(columns && columns.length >0){
+      //需要导出的字段
+      let exportFields:any = [];
+      //是否有隐藏列
+      let hiddenColumns = false;
+      for (const column of columns) {
+        if(!column.defaultHidden){
+          let dataIndex = column?.dataIndex;
+          if(column?.dataIndex?.toString()?.indexOf('_dictText') !== -1){
+            dataIndex = column?.dataIndex?.toString().replace('_dictText','')
+          }
+          exportFields.push(dataIndex);
+        } else {
+          hiddenColumns = true;
+        }
+      }
+      if(hiddenColumns){
+        paramsForm['exportFields'] = exportFields.join(",");
+      }
+    }
+  }
+
+  // 导入 excel
+  function onImportXls(file) {
+    let { url, success } = options?.importConfig ?? {};
+    // 代码逻辑说明: erp代码生成 子表 导入地址是动态的
+    let realUrl = typeof url === 'function' ? url() : url;
+    if (realUrl) {
+      return handleImportXls(file, realUrl, success || reload);
+    } else {
+      $message.createMessage.warn('没有传递 importConfig.url 参数');
+      return Promise.reject();
+    }
+  }
+
+  /**
+   * 通用请求处理方法，可自动刷新表格，自动清空选择
+   * @param api 请求api
+   * @param options 是否显示确认框
+   */
+  function doRequest(api: () => Promise<any>, options?: IDoRequestOptions) {
+    return new Promise((resolve, reject) => {
+      const execute = async () => {
+        try {
+          setLoading(true);
+          const res = await api();
+          if (options?.reload ?? true) {
+            reload();
+          }
+          if (options?.clearSelection ?? true) {
+            selectedRowKeys.value = [];
+          }
+          resolve(res);
+        } catch (e) {
+          reject(e);
+        } finally {
+          setLoading(false);
+        }
+      };
+      if (options?.confirm ?? true) {
+        $message.createConfirm({
+          iconType: 'warning',
+          title: '删除',
+          content: '确定要删除吗？',
+          onOk: () => execute(),
+          onCancel: () => reject(),
+        });
+      } else {
+        execute();
+      }
+    });
+  }
+
+  /** 执行单个删除操作 */
+  function doDeleteRecord(api: () => Promise<any>) {
+    return doRequest(api, { confirm: false, clearSelection: false });
+  }
+
+  return {
+    ...$design,
+    ...$message,
+    onExportXls,
+    onImportXls,
+    doRequest,
+    doDeleteRecord,
+    tableContext,
+  };
+}
+
+// 定义表格所需参数
+type TableProps = Partial<DynamicProps<BasicTableProps>>;
+type UseTableMethod = TableActionType & {
+  getForm: () => FormActionType;
+};
+
+/**
+ * useListTable 列表页面标准表格参数
+ *
+ * @param tableProps 表格参数
+ */
+export function useListTable(tableProps: TableProps): [
+  (instance: TableActionType, formInstance: UseTableMethod) => void,
+  TableActionType & {
+    getForm: () => FormActionType;
+  },
+  {
+    rowSelection: any;
+    selectedRows: Ref<Recordable[]>;
+    selectedRowKeys: Ref<any[]>;
+  }
+] {
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 12, // ≥576px
+    md: 12, // ≥768px
+    lg: 8, // ≥992px
+    xl: 8, // ≥1200px
+    xxl: 6, // ≥1600px
+  };
+  const defaultTableProps: TableProps = {
+    rowKey: 'id',
+    // 使用查询条件区域
+    useSearchForm: true,
+    // 查询条件区域配置
+    formConfig: {
+      // 紧凑模式
+      compact: true,
+      // label默认宽度
+      // labelWidth: 120,
+      // 按下回车后自动提交
+      autoSubmitOnEnter: true,
+      // 默认 row 配置
+      rowProps: { gutter: 8 },
+      // 默认 col 配置
+      baseColProps: {
+        ...adaptiveColProps,
+      },
+      labelCol: {
+        xs: 24,
+        sm: 8,
+        md: 6,
+        lg: 8,
+        xl: 6,
+        xxl: 6,
+      },
+      wrapperCol: {},
+      // 是否显示 展开/收起 按钮
+      showAdvancedButton: true,
+      // 超过指定列数默认折叠
+      autoAdvancedCol: 3,
+      // 操作按钮配置
+      actionColOptions: {
+        ...adaptiveColProps,
+        style: { textAlign: 'left' },
+      },
+    },
+    // 斑马纹
+    striped: false,
+    // 是否可以自适应高度
+    canResize: true,
+    // 表格最小高度
+    // update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
+    minHeight: 300,
+    // update-end--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
+    // 点击行选中
+    clickToRowSelect: false,
+    // 是否显示边框
+    bordered: true,
+    // 是否显示序号列
+    showIndexColumn: false,
+    // 显示表格设置
+    showTableSetting: true,
+    // 表格全屏设置
+    tableSetting: {
+      fullScreen: false,
+    },
+    // 是否显示操作列
+    showActionColumn: true,
+    // 操作列
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      //是否锁定操作列取值 right ,left,false
+      fixed: false,
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  };
+  // 合并用户个性化配置
+  if (tableProps) {
+    // 代码逻辑说明: 【issues/6180】前端代码配置表变查询条件显示列不生效---
+    if(tableProps.formConfig){
+      setTableProps(tableProps.formConfig);
+    }
+    // merge 方法可深度合并对象
+    merge(defaultTableProps, tableProps);
+  }
+
+  // 发送请求之前调用的方法
+  function beforeFetch(params) {
+    // 判断是否已有排序参数（defSort 为数组时会转换为 defSortString）
+    const hasSortParams = params.column || params.defSortString || params.order;
+    // 默认以 createTime 降序排序
+    return Object.assign(hasSortParams ? {} : { column: 'createTime', order: 'desc' }, params);
+  }
+
+  // 合并方法
+  Object.assign(defaultTableProps, { beforeFetch });
+  if (typeof tableProps.beforeFetch === 'function') {
+    defaultTableProps.beforeFetch = function (params) {
+      params = beforeFetch(params);
+      // @ts-ignore
+      tableProps.beforeFetch(params);
+      return params;
+    };
+  }
+
+  // 当前选择的行
+  const selectedRowKeys = ref<any[]>([]);
+  // 选择的行记录
+  const selectedRows = ref<Recordable[]>([]);
+
+  // 表格选择列配置
+  const rowSelection: any = tableProps?.rowSelection ?? {};
+  const defaultRowSelection = reactive({
+    ...rowSelection,
+    type: rowSelection.type ?? 'checkbox',
+    // 选择列宽度，默认 50
+    columnWidth: rowSelection.columnWidth ?? 50,
+    selectedRows: selectedRows,
+    selectedRowKeys: selectedRowKeys,
+    onChange(...args) {
+      selectedRowKeys.value = args[0];
+      selectedRows.value = args[1];
+      if (typeof rowSelection.onChange === 'function') {
+        rowSelection.onChange(...args);
+      }
+    },
+  });
+  delete defaultTableProps.rowSelection;
+
+  /**
+   * 设置表格参数
+   *
+   * @param formConfig
+   */
+  function setTableProps(formConfig: any) {
+    const replaceAttributeArray: string[] = ['baseColProps','labelCol'];
+    for (let item of replaceAttributeArray) {
+      if(formConfig && formConfig[item]){
+        if(defaultTableProps.formConfig){
+          let defaultFormConfig:any = defaultTableProps.formConfig;
+          defaultFormConfig[item] = formConfig[item];
+        }
+        formConfig[item] = {};
+      }
+    }
+  }
+
+  return [
+    ...useTable(defaultTableProps),
+    {
+      selectedRows,
+      selectedRowKeys,
+      rowSelection: defaultRowSelection,
+    },
+  ];
+}
diff --git a/src/hooks/system/useMethods.ts b/src/hooks/system/useMethods.ts
new file mode 100644
index 0000000..dff3741
--- /dev/null
+++ b/src/hooks/system/useMethods.ts
@@ -0,0 +1,149 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useGlobSetting } from '/@/hooks/setting';
+
+const { createMessage, createWarningModal } = useMessage();
+const glob = useGlobSetting();
+
+/**
+ * 导出文件xlsx的mime-type
+ */
+export const XLSX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+/**
+ * 导出文件xlsx的文件后缀
+ */
+export const XLSX_FILE_SUFFIX = '.xlsx';
+
+export function useMethods() {
+  /**
+   * 导出xls
+   * @param name
+   * @param url
+   * @param params
+   * @param isXlsx
+   * @param timeout 超时时间（毫秒），默认 60000
+   */
+  async function exportXls(name, url, params, isXlsx = false, timeout = 60000) {
+    // 代码逻辑说明: 【JHHB-794】用户管理，跨页全选后，点击用户导出没反应---
+    if(params?.selections){
+      let split = params.selections.split(",");
+      if(split && split.length > 100){
+        createMessage.warning('最多可选择 100 项进行导出！');
+        return;
+      }
+    }
+    // 修改为返回原生 response，便于获取 headers
+    const response = await defHttp.get(
+      { url: url, params: params, responseType: 'blob', timeout: timeout },
+      { isTransformResponse: false, isReturnNativeResponse: true }
+    );
+    if (!response || !response.data) {
+      createMessage.warning('文件下载失败');
+      return;
+    }
+    // 判断 header 中 content-disposition 是否包含 .xlsx
+    let isXlsxByHeader = isXlsx;
+    const disposition = response.headers && response.headers['content-disposition'];
+    if (disposition && disposition.indexOf('.xlsx') !== -1) {
+      isXlsxByHeader = true;
+    }
+    const data = response.data;
+    // 代码逻辑说明: 导出excel失败提示，不进行导出---
+    let reader = new FileReader()
+    reader.readAsText(data, 'utf-8')
+    reader.onload = async () => {
+      if(reader.result){
+        if(reader.result.toString().indexOf("success") !=-1){
+          // 代码逻辑说明: 【issues/7738】文件中带"success"导出报错 ---
+          try {
+            const { success, message } = JSON.parse(reader.result.toString());
+            if (!success) {
+              createMessage.warning('导出失败，失败原因：' + message);
+            } else {
+              exportExcel(name, isXlsxByHeader, data);
+            }
+            return;
+          } catch (error) {
+            exportExcel(name, isXlsxByHeader, data);
+          }
+        }
+      }
+      exportExcel(name, isXlsxByHeader, data);
+    }
+  }
+
+  /**
+   * 导入xls
+   * @param data 导入的数据
+   * @param url
+   * @param success 成功后的回调
+   */
+  async function importXls(data, url, success) {
+    const isReturn = (fileInfo) => {
+      try {
+        if (fileInfo.code === 201) {
+          let {
+            message,
+            result: { msg, fileUrl, fileName },
+          } = fileInfo;
+          let href = glob.uploadUrl + fileUrl;
+          createWarningModal({
+            title: message,
+            centered: false,
+            content: `<div>
+                                <span>${msg}</span><br/> 
+                                <span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span> 
+                              </div>`,
+          });
+          // 代码逻辑说明: [VUEN-2827]导入无权限，提示图标错误------------
+        } else if (fileInfo.code === 500 || fileInfo.code === 510) {
+          createMessage.error(fileInfo.message || `${data.file.name} 导入失败`);
+        } else {
+          createMessage.success(fileInfo.message || `${data.file.name} 文件上传成功`);
+        }
+      } catch (error) {
+        console.log('导入的数据异常', error);
+      } finally {
+        typeof success === 'function' ? success(fileInfo) : '';
+      }
+    };
+    await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
+  }
+
+  return {
+    handleExportXls: (name: string, url: string, params?: object, timeout?: number) => exportXls(name, url, params, false, timeout),
+    handleImportXls: (data, url, success) => importXls(data, url, success),
+    handleExportXlsx: (name: string, url: string, params?: object, timeout?: number) => exportXls(name, url, params, true, timeout),
+  };
+
+  /**
+   * 导出excel
+   * @param name
+   * @param isXlsx
+   * @param data
+   */
+  function exportExcel(name, isXlsx, data) {
+    if (!name || typeof name != 'string') {
+      name = '导出文件';
+    }
+    let blobOptions = { type: 'application/vnd.ms-excel' };
+    let fileSuffix = '.xls';
+    if (isXlsx) {
+      blobOptions['type'] = XLSX_MIME_TYPE;
+      fileSuffix = XLSX_FILE_SUFFIX;
+    }
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+      window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
+    } else {
+      let url = window.URL.createObjectURL(new Blob([data], blobOptions));
+      let link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', name + fileSuffix);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link); //下载完成移除元素
+      window.URL.revokeObjectURL(url); //释放掉blob对象
+    }
+  }
+}
diff --git a/src/hooks/system/useThirdLogin.ts b/src/hooks/system/useThirdLogin.ts
new file mode 100644
index 0000000..0413bc7
--- /dev/null
+++ b/src/hooks/system/useThirdLogin.ts
@@ -0,0 +1,204 @@
+import { ref, unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useUserStore } from '/@/store/modules/user';
+import { setThirdCaptcha, getCaptcha } from '/@/api/sys/user';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export function useThirdLogin() {
+  const { createMessage, notification } = useMessage();
+  const { t } = useI18n();
+  const glob = useGlobSetting();
+  const userStore = useUserStore();
+  //第三方类型
+  const thirdType = ref('');
+  //第三方登录相关信息
+  const thirdLoginInfo = ref<any>({});
+  //状态
+  const thirdLoginState = ref(false);
+  //绑定手机号弹窗
+  const bindingPhoneModal = ref(false);
+  //第三方用户UUID
+  const thirdUserUuid = ref('');
+  //提示窗
+  const thirdConfirmShow = ref(false);
+  //绑定密码弹窗
+  const thirdPasswordShow = ref(false);
+  //绑定密码
+  const thirdLoginPassword = ref('');
+  //绑定用户
+  const thirdLoginUser = ref('');
+  //加载中
+  const thirdCreateUserLoding = ref(false);
+  //绑定手机号
+  const thirdPhone = ref('');
+  //验证码
+  const thirdCaptcha = ref('');
+  //第三方登录
+  function onThirdLogin(source) {
+    let url = `${glob.uploadUrl}/sys/thirdLogin/render/${source}`;
+    const openWin = window.open(
+      url,
+      `login ${source}`,
+      'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
+    );
+    thirdType.value = source;
+    thirdLoginInfo.value = {};
+    thirdLoginState.value = false;
+    let receiveMessage = function (event) {
+      let token = event.data;
+      if (typeof token === 'string') {
+        //如果是字符串类型 说明是token信息
+        if (token === '登录失败') {
+          createMessage.warning(token);
+        } else if (token.includes('绑定手机号')) {
+          bindingPhoneModal.value = true;
+          let strings = token.split(',');
+          thirdUserUuid.value = strings[1];
+        } else {
+          doThirdLogin(token);
+        }
+      } else if (typeof token === 'object') {
+        //对象类型 说明需要提示是否绑定现有账号
+        if (token['isObj'] === true) {
+          thirdConfirmShow.value = true;
+          thirdLoginInfo.value = { ...token };
+        }
+      } else {
+        createMessage.warning('不识别的信息传递');
+      }
+      // 代码逻辑说明: 【TV360X-1827】mac系统谷歌浏览器企业微信第三方登录成功后没有弹出绑定手机弹窗
+      if (openWin?.closed) {
+        window.removeEventListener('message', receiveMessage, false);
+      }
+    };
+    // 代码逻辑说明: 【TV360X-1827】mac系统谷歌浏览器企业微信第三方登录成功后没有弹出绑定手机弹窗
+    window.removeEventListener('message', receiveMessage, false);
+    window.addEventListener('message', receiveMessage, false);
+  }
+  // 根据token执行登录
+  function doThirdLogin(token) {
+    if (unref(thirdLoginState) === false) {
+      thirdLoginState.value = true;
+      userStore.ThirdLogin({ token, thirdType: unref(thirdType) }).then((res) => {
+        console.log('res====>doThirdLogin', res);
+        if (res && res.userInfo) {
+          notification.success({
+            message: t('sys.login.loginSuccessTitle'),
+            description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
+            duration: 3,
+          });
+        } else {
+          requestFailed(res);
+        }
+      });
+    }
+  }
+
+  function requestFailed(err) {
+    notification.error({
+      message: '登录失败',
+      description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+      duration: 4,
+    });
+  }
+  // 绑定已有账号 需要输入密码
+  function thirdLoginUserBind() {
+    thirdLoginPassword.value = '';
+    thirdLoginUser.value = thirdLoginInfo.value.uuid;
+    thirdConfirmShow.value = false;
+    thirdPasswordShow.value = true;
+  }
+  //创建新账号
+  function thirdLoginUserCreate() {
+    thirdCreateUserLoding.value = true;
+    // 账号名后面添加两位随机数
+    thirdLoginInfo.value.suffix = parseInt(Math.random() * 98 + 1);
+    defHttp
+      .post({ url: '/sys/third/user/create', params: { thirdLoginInfo: unref(thirdLoginInfo) } }, { isTransformResponse: false })
+      .then((res) => {
+        if (res.success) {
+          let token = res.result;
+          doThirdLogin(token);
+          thirdConfirmShow.value = false;
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        thirdCreateUserLoding.value = false;
+      });
+  }
+  // 核实密码
+  function thirdLoginCheckPassword() {
+    let params = Object.assign({}, unref(thirdLoginInfo), { password: unref(thirdLoginPassword) });
+    defHttp.post({ url: '/sys/third/user/checkPassword', params }, { isTransformResponse: false }).then((res) => {
+      if (res.success) {
+        thirdLoginNoPassword();
+        doThirdLogin(res.result);
+      } else {
+        createMessage.warning(res.message);
+      }
+    });
+  }
+  // 没有密码 取消操作
+  function thirdLoginNoPassword() {
+    thirdPasswordShow.value = false;
+    thirdLoginPassword.value = '';
+    thirdLoginUser.value = '';
+  }
+
+  //倒计时执行前的函数
+  function sendCodeApi() {
+    //return setThirdCaptcha({mobile:unref(thirdPhone)});
+    return getCaptcha({ mobile: unref(thirdPhone), smsmode: '0' });
+  }
+  //绑定手机号点击确定按钮
+  function thirdHandleOk() {
+    if (!unref(thirdPhone)) {
+      cmsFailed('请输入手机号');
+    }
+    if (!unref(thirdCaptcha)) {
+      cmsFailed('请输入验证码');
+    }
+    let params = {
+      mobile: unref(thirdPhone),
+      captcha: unref(thirdCaptcha),
+      thirdUserUuid: unref(thirdUserUuid),
+    };
+    defHttp.post({ url: '/sys/thirdLogin/bindingThirdPhone', params }, { isTransformResponse: false }).then((res) => {
+      if (res.success) {
+        bindingPhoneModal.value = false;
+        doThirdLogin(res.result);
+      } else {
+        createMessage.warning(res.message);
+      }
+    });
+  }
+  function cmsFailed(err) {
+    notification.error({
+      message: '登录失败',
+      description: err,
+      duration: 4,
+    });
+    return;
+  }
+  //返回数据和方法
+  return {
+    thirdPasswordShow,
+    thirdLoginCheckPassword,
+    thirdLoginNoPassword,
+    thirdLoginPassword,
+    thirdConfirmShow,
+    thirdCreateUserLoding,
+    thirdLoginUserCreate,
+    thirdLoginUserBind,
+    bindingPhoneModal,
+    thirdHandleOk,
+    thirdPhone,
+    thirdCaptcha,
+    onThirdLogin,
+    sendCodeApi,
+  };
+}
diff --git a/src/hooks/web/useAppInject.ts b/src/hooks/web/useAppInject.ts
new file mode 100644
index 0000000..7d6efb2
--- /dev/null
+++ b/src/hooks/web/useAppInject.ts
@@ -0,0 +1,10 @@
+import { useAppProviderContext } from '/@/components/Application';
+import { computed, unref } from 'vue';
+
+export function useAppInject() {
+  const values = useAppProviderContext();
+
+  return {
+    getIsMobile: computed(() => unref(values.isMobile)),
+  };
+}
diff --git a/src/hooks/web/useContentHeight.ts b/src/hooks/web/useContentHeight.ts
new file mode 100644
index 0000000..b41f300
--- /dev/null
+++ b/src/hooks/web/useContentHeight.ts
@@ -0,0 +1,183 @@
+import { ComputedRef, isRef, nextTick, Ref, ref, unref, watch } from 'vue';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+import { getViewportOffset } from '/@/utils/domUtils';
+import { isNumber, isString } from '/@/utils/is';
+
+export interface CompensationHeight {
+  // 使用 layout Footer 高度作为判断补偿高度的条件
+  useLayoutFooter: boolean;
+  // refs HTMLElement
+  elements?: Ref[];
+}
+
+type Upward = number | string | null | undefined;
+
+/**
+ * 动态计算内容高度，根据锚点dom最下坐标到屏幕最下坐标，根据传入dom的高度、padding、margin等值进行动态计算
+ * 最终获取合适的内容高度
+ *
+ * @param flag 用于开启计算的响应式标识
+ * @param anchorRef 锚点组件 Ref<ElRef | ComponentRef>
+ * @param subtractHeightRefs 待减去高度的组件列表 Ref<ElRef | ComponentRef>
+ * @param substractSpaceRefs 待减去空闲空间(margins/paddings)的组件列表 Ref<ElRef | ComponentRef>
+ * @param offsetHeightRef 计算偏移的响应式高度，计算高度时将直接减去此值
+ * @param upwardSpace 向上递归减去空闲空间的 层级 或 直到指定class为止 数值为2代表向上递归两次|数值为ant-layout表示向上递归直到碰见.ant-layout为止
+ * @returns 响应式高度
+ */
+export function useContentHeight(
+  flag: ComputedRef<Boolean>,
+  anchorRef: Ref,
+  subtractHeightRefs: Ref[],
+  substractSpaceRefs: Ref[],
+  upwardSpace: Ref<Upward> | ComputedRef<Upward> | Upward = 0,
+  offsetHeightRef: Ref<number> = ref(0)
+) {
+  const contentHeight: Ref<Nullable<number>> = ref(null);
+  const { footerHeightRef: layoutFooterHeightRef } = useLayoutHeight();
+  let compensationHeight: CompensationHeight = {
+    useLayoutFooter: true,
+  };
+
+  const setCompensation = (params: CompensationHeight) => {
+    compensationHeight = params;
+  };
+
+  function redoHeight() {
+    nextTick(() => {
+      calcContentHeight();
+    });
+  }
+
+  function calcSubtractSpace(element: Element | null | undefined, direction: 'all' | 'top' | 'bottom' = 'all'): number {
+    function numberPx(px: string) {
+      return Number(px.replace(/[^\d]/g, ''));
+    }
+    let subtractHeight = 0;
+    const ZERO_PX = '0px';
+    if (element) {
+      const cssStyle = getComputedStyle(element);
+      const marginTop = numberPx(cssStyle?.marginTop ?? ZERO_PX);
+      const marginBottom = numberPx(cssStyle?.marginBottom ?? ZERO_PX);
+      const paddingTop = numberPx(cssStyle?.paddingTop ?? ZERO_PX);
+      const paddingBottom = numberPx(cssStyle?.paddingBottom ?? ZERO_PX);
+      if (direction === 'all') {
+        subtractHeight += marginTop;
+        subtractHeight += marginBottom;
+        subtractHeight += paddingTop;
+        subtractHeight += paddingBottom;
+      } else if (direction === 'top') {
+        subtractHeight += marginTop;
+        subtractHeight += paddingTop;
+      } else {
+        subtractHeight += marginBottom;
+        subtractHeight += paddingBottom;
+      }
+    }
+    return subtractHeight;
+  }
+
+  function getEl(element: any): Nullable<HTMLDivElement> {
+    if (element == null) {
+      return null;
+    }
+    return (element instanceof HTMLDivElement ? element : element.$el) as HTMLDivElement;
+  }
+
+  async function calcContentHeight() {
+    if (!flag.value) {
+      return;
+    }
+    // Add a delay to get the correct height
+    await nextTick();
+
+    const anchorEl = getEl(unref(anchorRef));
+    if (!anchorEl) {
+      return;
+    }
+    const { bottomIncludeBody } = getViewportOffset(anchorEl);
+
+    // substract elements height
+    let substractHeight = 0;
+    subtractHeightRefs.forEach((item) => {
+      substractHeight += getEl(unref(item))?.offsetHeight ?? 0;
+    });
+
+    // subtract margins / paddings
+    let substractSpaceHeight = calcSubtractSpace(anchorEl) ?? 0;
+    substractSpaceRefs.forEach((item) => {
+      substractSpaceHeight += calcSubtractSpace(getEl(unref(item)));
+    });
+
+    // upwardSpace
+    let upwardSpaceHeight = 0;
+    function upward(element: Element | null, upwardLvlOrClass: number | string | null | undefined) {
+      if (element && upwardLvlOrClass) {
+        const parent = element.parentElement;
+        if (parent) {
+          if (isString(upwardLvlOrClass)) {
+            if (!parent.classList.contains(upwardLvlOrClass)) {
+              upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
+              upward(parent, upwardLvlOrClass);
+            } else {
+              upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
+            }
+          } else if (isNumber(upwardLvlOrClass)) {
+            if (upwardLvlOrClass > 0) {
+              upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
+              upward(parent, --upwardLvlOrClass);
+            }
+          }
+        }
+      }
+    }
+    if (isRef(upwardSpace)) {
+      upward(anchorEl, unref(upwardSpace));
+    } else {
+      upward(anchorEl, upwardSpace);
+    }
+
+    let height =
+      bottomIncludeBody - unref(layoutFooterHeightRef) - unref(offsetHeightRef) - substractHeight - substractSpaceHeight - upwardSpaceHeight;
+
+    // compensation height
+    const calcCompensationHeight = () => {
+      compensationHeight.elements?.forEach((item) => {
+        height += getEl(unref(item))?.offsetHeight ?? 0;
+      });
+    };
+    if (compensationHeight.useLayoutFooter && unref(layoutFooterHeightRef) > 0) {
+      calcCompensationHeight();
+    } else {
+      calcCompensationHeight();
+    }
+
+    contentHeight.value = height;
+  }
+
+  onMountedOrActivated(() => {
+    nextTick(() => {
+      calcContentHeight();
+    });
+  });
+  useWindowSizeFn(
+    () => {
+      calcContentHeight();
+    },
+    50,
+    { immediate: true }
+  );
+  watch(
+    () => [layoutFooterHeightRef.value],
+    () => {
+      calcContentHeight();
+    },
+    {
+      flush: 'post',
+      immediate: true,
+    }
+  );
+
+  return { redoHeight, setCompensation, contentHeight };
+}
diff --git a/src/hooks/web/useContextMenu.ts b/src/hooks/web/useContextMenu.ts
new file mode 100644
index 0000000..d3c53ce
--- /dev/null
+++ b/src/hooks/web/useContextMenu.ts
@@ -0,0 +1,12 @@
+import { onUnmounted, getCurrentInstance } from 'vue';
+import { createContextMenu, destroyContextMenu } from '/@/components/ContextMenu';
+import type { ContextMenuItem } from '/@/components/ContextMenu';
+export type { ContextMenuItem };
+export function useContextMenu(authRemove = true) {
+  if (getCurrentInstance() && authRemove) {
+    onUnmounted(() => {
+      destroyContextMenu();
+    });
+  }
+  return [createContextMenu, destroyContextMenu];
+}
diff --git a/src/hooks/web/useCopyModal.ts b/src/hooks/web/useCopyModal.ts
new file mode 100644
index 0000000..694630b
--- /dev/null
+++ b/src/hooks/web/useCopyModal.ts
@@ -0,0 +1,64 @@
+import { isRef, unref, watch, Ref, ComputedRef } from 'vue';
+import Clipboard from 'clipboard';
+import { ModalOptionsEx, useMessage } from '/@/hooks/web/useMessage';
+
+/** 带复制按钮的弹窗 */
+interface IOptions extends ModalOptionsEx {
+  // 要复制的文本，可以是一个 ref 对象，动态更新
+  copyText: string | Ref<string> | ComputedRef<string>;
+}
+
+const COPY_CLASS = 'copy-this-text';
+const CLIPBOARD_TEXT = 'data-clipboard-text';
+
+export function useCopyModal() {
+  return { createCopyModal };
+}
+
+const { createMessage, createConfirm } = useMessage();
+
+/** 创建复制弹窗 */
+function createCopyModal(options: Partial<IOptions>) {
+  let modal = createConfirm({
+    ...options,
+    iconType: options.iconType ?? 'info',
+    width: options.width ?? 500,
+    title: options.title ?? '复制',
+    maskClosable: options.maskClosable ?? true,
+    okText: options.okText ?? '复制',
+    okButtonProps: {
+      ...options.okButtonProps,
+      class: COPY_CLASS,
+      [CLIPBOARD_TEXT]: unref(options.copyText),
+    } as any,
+    onOk() {
+      return new Promise((resolve: any) => {
+        const clipboard = new Clipboard('.' + COPY_CLASS);
+        clipboard.on('success', () => {
+          clipboard.destroy();
+          createMessage.success('复制成功');
+          resolve();
+        });
+        clipboard.on('error', () => {
+          createMessage.error('该浏览器不支持自动复制');
+          clipboard.destroy();
+          resolve();
+        });
+      });
+    },
+  });
+
+  // 动态更新 copyText
+  if (isRef(options.copyText)) {
+    watch(options.copyText, (copyText) => {
+      modal.update({
+        okButtonProps: {
+          ...options.okButtonProps,
+          class: COPY_CLASS,
+          [CLIPBOARD_TEXT]: copyText,
+        } as any,
+      });
+    });
+  }
+  return modal;
+}
diff --git a/src/hooks/web/useCopyToClipboard.ts b/src/hooks/web/useCopyToClipboard.ts
new file mode 100644
index 0000000..7a7fea8
--- /dev/null
+++ b/src/hooks/web/useCopyToClipboard.ts
@@ -0,0 +1,69 @@
+import { ref, watch } from 'vue';
+
+import { isDef } from '/@/utils/is';
+interface Options {
+  target?: HTMLElement;
+}
+export function useCopyToClipboard(initial?: string) {
+  const clipboardRef = ref(initial || '');
+  const isSuccessRef = ref(false);
+  const copiedRef = ref(false);
+
+  watch(
+    clipboardRef,
+    (str?: string) => {
+      if (isDef(str)) {
+        copiedRef.value = true;
+        isSuccessRef.value = copyTextToClipboard(str);
+      }
+    },
+    { immediate: !!initial, flush: 'sync' }
+  );
+
+  return { clipboardRef, isSuccessRef, copiedRef };
+}
+
+export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
+  const element = document.createElement('textarea');
+  const previouslyFocusedElement = document.activeElement;
+
+  element.value = input;
+
+  element.setAttribute('readonly', '');
+
+  (element.style as any).contain = 'strict';
+  element.style.position = 'absolute';
+  element.style.left = '-9999px';
+  element.style.fontSize = '12pt';
+
+  const selection = document.getSelection();
+  let originalRange;
+  if (selection && selection.rangeCount > 0) {
+    originalRange = selection.getRangeAt(0);
+  }
+
+  target.append(element);
+  element.select();
+
+  element.selectionStart = 0;
+  element.selectionEnd = input.length;
+
+  let isSuccess = false;
+  try {
+    isSuccess = document.execCommand('copy');
+  } catch (e) {
+    throw new Error(e);
+  }
+
+  element.remove();
+
+  if (originalRange && selection) {
+    selection.removeAllRanges();
+    selection.addRange(originalRange);
+  }
+
+  if (previouslyFocusedElement) {
+    (previouslyFocusedElement as HTMLElement).focus();
+  }
+  return isSuccess;
+}
diff --git a/src/hooks/web/useDesign.ts b/src/hooks/web/useDesign.ts
new file mode 100644
index 0000000..046674b
--- /dev/null
+++ b/src/hooks/web/useDesign.ts
@@ -0,0 +1,22 @@
+import { useAppProviderContext } from '/@/components/Application';
+// import { computed } from 'vue';
+// import { lowerFirst } from 'lodash-es';
+export function useDesign(scope: string) {
+  const values = useAppProviderContext();
+  // const $style = cssModule ? useCssModule() : {};
+
+  // const style: Record<string, string> = {};
+  // if (cssModule) {
+  //   Object.keys($style).forEach((key) => {
+  //     // const moduleCls = $style[key];
+  //     const k = key.replace(new RegExp(`^${values.prefixCls}-?`, 'ig'), '');
+  //     style[lowerFirst(k)] = $style[key];
+  //   });
+  // }
+  return {
+    // prefixCls: computed(() => `${values.prefixCls}-${scope}`),
+    prefixCls: `${values.prefixCls}-${scope}`,
+    prefixVar: values.prefixCls,
+    // style,
+  };
+}
diff --git a/src/hooks/web/useDragNotice.ts b/src/hooks/web/useDragNotice.ts
new file mode 100644
index 0000000..7432738
--- /dev/null
+++ b/src/hooks/web/useDragNotice.ts
@@ -0,0 +1,165 @@
+import { ref, nextTick, getCurrentInstance, watch } from 'vue';
+import { getToken } from '/@/utils/auth';
+import md5 from 'crypto-js/md5';
+import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useModal } from '/@/components/Modal';
+import { useUserStore } from '/@/store/modules/user';
+import { isUrl } from '@/utils/is';
+import { getQueryVariable, getUrlParams } from '@/utils';
+import { useRouter } from 'vue-router';
+import { useMessage } from '@/hooks/web/useMessage';
+const { createMessage } = useMessage();
+export function useDragNotice() {
+  //*********************************websocket配置begin******************************************
+  const glob = useGlobSetting();
+  const { push, currentRoute } = useRouter();
+  const userStore = useUserStore();
+  const instance: any = getCurrentInstance();
+  // 初始化 WebSocket
+  function initWebSocket() {
+    const token = getToken();
+    //将登录token生成一个短的标识
+    const wsClientId = md5(token);
+    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+    const url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/dragChannelSocket/' + wsClientId;
+    connectWebSocket(url);
+    onWebSocket(onWebSocketMessage);
+  }
+
+  async function onWebSocketMessage(data) {
+    console.log('仪表盘监听按钮点击事件websocket', data);
+    if (data?.CMD === 'drag') {
+      //触发动作： url：路径 modal：弹窗
+      const action = data.result.action;
+      //弹窗类型： 点击按钮打开什么弹窗，根据type打开不同的弹窗
+      const type = data.result.type;
+      //url地址，可以是路由，也可以是外部链接
+      let url = data.result.url;
+      //弹窗参数或者url参数
+      const record = data.result.records || {};
+      console.log('仪表盘监听点击事件类型type', type);
+      console.log('仪表盘监听点击事件动作action', action);
+      console.log('仪表盘监听点击事件路径url', url);
+      console.log('仪表盘监听点击事件参数', record);
+      //1.路径的话，判断外部链接还是内部路由跳转
+      if (action == 'url') {
+        //常用下載特殊处理
+        if (url == 'fileUrl') {
+          url = record[url];
+        }
+        const urlParamsObj = getUrlParams(url);
+        if (url.startsWith('http')) {
+          window.open(url, '_blank');
+        } else {
+          push({ path: urlParamsObj.url, query: { ...urlParamsObj.params, ...record } });
+        }
+      } else {
+        //2.弹窗方式打开项目组件
+        switch (type) {
+          case 'email':
+            //邮箱查看弹窗
+            handleOpenType('email', { record });
+            break;
+          default:
+            break;
+        }
+      }
+    }
+  }
+  //*********************************websocket配置end******************************************
+
+  //*********************************打开弹窗修改，动态设置弹窗begin*******************************
+  //当前表单弹窗
+  const currentModal = ref<string | null>(null);
+  //当前表单参数
+  const modalParams = ref<Recordable>({});
+  //表单注册缓存
+  const modalRegCache = ref<Recordable>({});
+  //组件绑定参数
+  const bindParams = ref<Recordable>({});
+  /**
+   * 根据类型打开不同弹窗
+   * @param type
+   * @param params
+   */
+  async function handleOpenType(type, params) {
+    currentModal.value = null;
+    modalParams.value = { ...params };
+    switch (type) {
+      case 'email':
+        //邮件查看
+        currentModal.value = 'EoaMailBoxInModal';
+        break;
+      default:
+        currentModal.value = null;
+        break;
+    }
+    //注册表单弹窗
+    initModalRegister();
+    await nextTick(() => {
+      if (modalRegCache.value[currentModal.value!]?.isRegister) {
+        console.log('已注冊，走缓存');
+        modalRegCache.value[currentModal.value!].modalMethods.openModal(true, modalParams.value);
+      }
+    });
+  }
+  /**
+   * 初始化弹窗注册
+   */
+  function initModalRegister() {
+    //如果当前选择表单为null，就不处理
+    if (!currentModal.value) {
+      return;
+    }
+    //判断缓存中是否存在，不存在就走缓存逻辑
+    if (!modalRegCache.value[currentModal.value]) {
+      const [registerModal, modalMethods] = useModal();
+      modalRegCache.value[currentModal.value] = {
+        isRegister: false,
+        register: bindRegisterModal(registerModal, modalMethods),
+        modalMethods,
+      };
+    }
+  }
+
+  /**
+   * 绑定注册弹窗
+   * @param regFn
+   * @param modalMethod
+   */
+  function bindRegisterModal(regFn, modalMethod) {
+    return async (...args) => {
+      console.log('开始注册：', currentModal.value);
+      await regFn(...args);
+      console.log('注册完成：', currentModal.value);
+      //打开弹窗
+      modalMethod.openModal(true, modalParams.value);
+      //设置缓存标识
+      modalRegCache.value[currentModal.value!].isRegister = true;
+    };
+  }
+  //*********************************打开弹窗修改，动态设置弹窗end******************************************
+  //刷新页面
+  function reloadPage() {
+    const iframes: any = document.getElementsByClassName('jeecg-iframe-page__main');
+    // 将 HTMLCollection 转换为数组
+    const iframeArray = Array.from(iframes);
+    if (currentRoute.value?.meta?.frameSrc && currentRoute.value?.meta?.frameSrc.indexOf('/drag/view?pageId=') >= 0) {
+      const targetIframe: any = iframeArray.find((iframe: any) => iframe.src == currentRoute.value?.meta?.frameSrc);
+      console.log('targetIframe', targetIframe);
+      if (targetIframe) {
+        targetIframe.contentWindow.postMessage({ reload: true }, '*');
+      }
+    }
+  }
+  return {
+    initDragWebSocket: initWebSocket,
+    handleOpenType,
+    currentModal,
+    modalParams,
+    modalRegCache,
+    bindParams,
+    reloadPage,
+  };
+}
diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts
new file mode 100644
index 0000000..66e0fa1
--- /dev/null
+++ b/src/hooks/web/useECharts.ts
@@ -0,0 +1,115 @@
+import type { EChartsOption } from 'echarts';
+import type { Ref } from 'vue';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+import { tryOnUnmounted } from '@vueuse/core';
+import { unref, nextTick, watch, computed, ref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useEventListener } from '/@/hooks/event/useEventListener';
+import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
+import echarts from '/@/utils/lib/echarts';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' | 'default' = 'default') {
+  console.log("---useECharts---初始化加载---")
+
+  const { getDarkMode: getSysDarkMode } = useRootSetting();
+
+  const getDarkMode = computed(() => {
+    return theme === 'default' ? getSysDarkMode.value : theme;
+  });
+  let chartInstance: echarts.ECharts | null = null;
+  let resizeFn: Fn = resize;
+  const cacheOptions = ref({}) as Ref<EChartsOption>;
+  let removeResizeFn: Fn = () => {};
+
+  resizeFn = useDebounceFn(resize, 200);
+
+  const getOptions = computed(() => {
+    if (getDarkMode.value !== 'dark') {
+      return cacheOptions.value as EChartsOption;
+    }
+    return {
+      backgroundColor: 'transparent',
+      ...cacheOptions.value,
+    } as EChartsOption;
+  });
+
+  function initCharts(t = theme) {
+    const el = unref(elRef);
+    if (!el || !unref(el)) {
+      return;
+    }
+
+    chartInstance = echarts.init(el, t);
+    const { removeEvent } = useEventListener({
+      el: window,
+      name: 'resize',
+      listener: resizeFn,
+    });
+    removeResizeFn = removeEvent;
+    const { widthRef, screenEnum } = useBreakpoint();
+    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        resizeFn();
+      }, 30);
+    }
+  }
+
+  function setOptions(options: EChartsOption, clear = true) {
+    cacheOptions.value = options;
+    if (unref(elRef)?.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        setOptions(unref(getOptions));
+      }, 30);
+      return;
+    }
+    nextTick(() => {
+      useTimeoutFn(() => {
+        if (!chartInstance) {
+          initCharts(getDarkMode.value as 'default');
+
+          if (!chartInstance) return;
+        }
+        clear && chartInstance?.clear();
+
+        chartInstance?.setOption(unref(getOptions));
+      }, 30);
+    });
+  }
+
+  function resize() {
+    chartInstance?.resize();
+  }
+
+  watch(
+    () => getDarkMode.value,
+    (theme) => {
+      if (chartInstance) {
+        chartInstance.dispose();
+        initCharts(theme as 'default');
+        setOptions(cacheOptions.value);
+      }
+    }
+  );
+
+  tryOnUnmounted(() => {
+    if (!chartInstance) return;
+    removeResizeFn();
+    chartInstance.dispose();
+    chartInstance = null;
+  });
+
+  function getInstance(): echarts.ECharts | null {
+    if (!chartInstance) {
+      initCharts(getDarkMode.value as 'default');
+    }
+    return chartInstance;
+  }
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  };
+}
diff --git a/src/hooks/web/useFullContent.ts b/src/hooks/web/useFullContent.ts
new file mode 100644
index 0000000..7dea077
--- /dev/null
+++ b/src/hooks/web/useFullContent.ts
@@ -0,0 +1,28 @@
+import { computed, unref } from 'vue';
+
+import { useAppStore } from '/@/store/modules/app';
+
+import { useRouter } from 'vue-router';
+
+/**
+ * @description: Full screen display content
+ */
+export const useFullContent = () => {
+  const appStore = useAppStore();
+  const router = useRouter();
+  const { currentRoute } = router;
+
+  // Whether to display the content in full screen without displaying the menu
+  const getFullContent = computed(() => {
+    // Query parameters, the full screen is displayed when the address bar has a full parameter
+    const route = unref(currentRoute);
+    const query = route.query;
+    if (query && Reflect.has(query, '__full__')) {
+      return true;
+    }
+    // Return to the configuration in the configuration file
+    return appStore.getProjectConfig.fullContent;
+  });
+
+  return { getFullContent };
+};
diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts
new file mode 100644
index 0000000..2a777b7
--- /dev/null
+++ b/src/hooks/web/useI18n.ts
@@ -0,0 +1,55 @@
+import { i18n } from '/@/locales/setupI18n';
+
+type I18nGlobalTranslation = {
+  (key: string): string;
+  (key: string, locale: string): string;
+  (key: string, locale: string, list: unknown[]): string;
+  (key: string, locale: string, named: Record<string, unknown>): string;
+  (key: string, list: unknown[]): string;
+  (key: string, named: Record<string, unknown>): string;
+};
+
+type I18nTranslationRestParameters = [string, any];
+
+function getKey(namespace: string | undefined, key: string) {
+  if (!namespace) {
+    return key;
+  }
+  if (key.startsWith(namespace)) {
+    return key;
+  }
+  return `${namespace}.${key}`;
+}
+
+export function useI18n(namespace?: string): {
+  t: I18nGlobalTranslation;
+} {
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(namespace, key);
+    },
+  };
+
+  if (!i18n) {
+    return normalFn;
+  }
+
+  const { t, ...methods } = i18n.global;
+
+  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+    if (!key) return '';
+    if (!key.includes('.') && !namespace) return key;
+    return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters));
+  };
+  return {
+    ...methods,
+    t: tFn,
+  };
+}
+
+// Why write this function？
+// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places
+
+// 为什么要编写此函数？
+// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
+export const t = (key: string) => key;
diff --git a/src/hooks/web/useLockPage.ts b/src/hooks/web/useLockPage.ts
new file mode 100644
index 0000000..c543be9
--- /dev/null
+++ b/src/hooks/web/useLockPage.ts
@@ -0,0 +1,72 @@
+import { computed, onUnmounted, unref, watchEffect } from 'vue';
+import { useThrottleFn } from '@vueuse/core';
+
+import { useAppStore } from '/@/store/modules/app';
+import { useLockStore } from '/@/store/modules/lock';
+
+import { useUserStore } from '/@/store/modules/user';
+import { useRootSetting } from '../setting/useRootSetting';
+
+export function useLockPage() {
+  const { getLockTime } = useRootSetting();
+  const lockStore = useLockStore();
+  const userStore = useUserStore();
+  const appStore = useAppStore();
+
+  let timeId: TimeoutHandle;
+
+  function clear(): void {
+    window.clearTimeout(timeId);
+  }
+
+  function resetCalcLockTimeout(): void {
+    // not login
+    if (!userStore.getToken) {
+      clear();
+      return;
+    }
+    const lockTime = appStore.getProjectConfig.lockTime;
+    if (!lockTime || lockTime < 1) {
+      clear();
+      return;
+    }
+    clear();
+
+    timeId = setTimeout(() => {
+      lockPage();
+    }, lockTime * 60 * 1000);
+  }
+
+  function lockPage(): void {
+    lockStore.setLockInfo({
+      isLock: true,
+      pwd: undefined,
+    });
+  }
+
+  watchEffect((onClean) => {
+    if (userStore.getToken) {
+      resetCalcLockTimeout();
+    } else {
+      clear();
+    }
+    onClean(() => {
+      clear();
+    });
+  });
+
+  onUnmounted(() => {
+    clear();
+  });
+
+  const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000);
+
+  return computed(() => {
+    if (unref(getLockTime)) {
+      return { onKeyup: keyupFn, onMousemove: keyupFn };
+    } else {
+      clear();
+      return {};
+    }
+  });
+}
diff --git a/src/hooks/web/useMessage.ts b/src/hooks/web/useMessage.ts
new file mode 100644
index 0000000..00f671e
--- /dev/null
+++ b/src/hooks/web/useMessage.ts
@@ -0,0 +1,157 @@
+import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
+
+import { Modal, message as Message, notification } from 'ant-design-vue';
+import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
+
+import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
+import { useI18n } from './useI18n';
+import { isString } from '/@/utils/is';
+import { h } from 'vue';
+
+export interface NotifyApi {
+  info(config: NotificationArgsProps): void;
+  success(config: NotificationArgsProps): void;
+  error(config: NotificationArgsProps): void;
+  warn(config: NotificationArgsProps): void;
+  warning(config: NotificationArgsProps): void;
+  open(args: NotificationArgsProps): void;
+  close(key: String): void;
+  config(options: ConfigProps): void;
+  destroy(): void;
+}
+
+export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
+  iconType: 'warning' | 'success' | 'error' | 'info';
+}
+export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
+
+interface ConfirmOptions {
+  info: ModalFunc;
+  success: ModalFunc;
+  error: ModalFunc;
+  warn: ModalFunc;
+  warning: ModalFunc;
+}
+
+function getIcon(iconType: string) {
+  try {
+    if (iconType === 'warning') {
+      return  h(InfoCircleFilled,{"class":"modal-icon-warning"})
+    } else if (iconType === 'success') {
+      return h(CheckCircleFilled,{"class": "modal-icon-success"});
+    } else if (iconType === 'info') {
+      return h(InfoCircleFilled,{"class": "modal-icon-info"});
+    } else {
+      return h(CloseCircleFilled,{"class":"modal-icon-error"});
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
+  try {
+    if (isString(content)) {
+      return h('div', h('div', {'innerHTML':content as string}));
+    } else {
+      return content;
+    }
+  } catch (e) {
+    console.log(e);
+    return content;
+  }
+}
+
+/**
+ * @description: Create confirmation box
+ */
+function createConfirm(options: ModalOptionsEx): ReturnType<ModalFunc> {
+  const iconType = options.iconType || 'warning';
+  Reflect.deleteProperty(options, 'iconType');
+  const opt: ModalFuncProps = {
+    centered: true,
+    icon: getIcon(iconType),
+    ...options,
+    content: renderContent(options),
+  };
+  return Modal.confirm(opt);
+}
+
+const getBaseOptions = () => {
+  const { t } = useI18n();
+  return {
+    okText: t('common.okText'),
+    centered: true,
+  };
+};
+
+function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOptionsPartial {
+  // 代码逻辑说明: 可以自定义图标
+  let titleIcon:any = ''
+  if(options.icon){
+    titleIcon = options.icon;
+  }else{
+    titleIcon = getIcon(icon)
+  }
+  return {
+    ...getBaseOptions(),
+    ...options,
+    content: renderContent(options),
+    icon: titleIcon
+  };
+}
+
+function createSuccessModal(options: ModalOptionsPartial) {
+  return Modal.success(createModalOptions(options, 'success'));
+}
+
+function createErrorModal(options: ModalOptionsPartial) {
+  return Modal.error(createModalOptions(options, 'close'));
+}
+
+function createInfoModal(options: ModalOptionsPartial) {
+  return Modal.info(createModalOptions(options, 'info'));
+}
+
+function createWarningModal(options: ModalOptionsPartial) {
+  return Modal.warning(createModalOptions(options, 'warning'));
+}
+
+interface MOE extends Omit<ModalOptionsEx, 'iconType'> {
+  iconType?: ModalOptionsEx['iconType'];
+}
+
+// 提示框，无需传入iconType，默认为warning
+function createConfirmSync(options: MOE) {
+  return new Promise((resolve) => {
+    createConfirm({
+      iconType: 'warning',
+      ...options,
+      onOk: () => resolve(true),
+      onCancel: () => resolve(false),
+    });
+  });
+}
+
+notification.config({
+  placement: 'topRight',
+  duration: 3,
+});
+
+/**
+ * @description: message
+ */
+export function useMessage() {
+  return {
+    createMessage: Message,
+    notification: notification as NotifyApi,
+    createConfirm: createConfirm,
+    createConfirmSync,
+    createSuccessModal,
+    createErrorModal,
+    createInfoModal,
+    createWarningModal,
+  };
+}
diff --git a/src/hooks/web/useMessage.tsx_backup b/src/hooks/web/useMessage.tsx_backup
new file mode 100644
index 0000000..ad64eda
--- /dev/null
+++ b/src/hooks/web/useMessage.tsx_backup
@@ -0,0 +1,132 @@
+import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
+
+import { Modal, message as Message, notification } from 'ant-design-vue';
+import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
+
+import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
+import { useI18n } from './useI18n';
+import { isString } from '/@/utils/is';
+
+export interface NotifyApi {
+  info(config: NotificationArgsProps): void;
+  success(config: NotificationArgsProps): void;
+  error(config: NotificationArgsProps): void;
+  warn(config: NotificationArgsProps): void;
+  warning(config: NotificationArgsProps): void;
+  open(args: NotificationArgsProps): void;
+  close(key: String): void;
+  config(options: ConfigProps): void;
+  destroy(): void;
+}
+
+export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type IconType = 'success' | 'info' | 'error' | 'warning';
+export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
+  iconType: 'warning' | 'success' | 'error' | 'info';
+}
+export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
+
+interface ConfirmOptions {
+  info: ModalFunc;
+  success: ModalFunc;
+  error: ModalFunc;
+  warn: ModalFunc;
+  warning: ModalFunc;
+}
+
+function getIcon(iconType: string) {
+  try {
+    if (iconType === 'warning') {
+      return <InfoCircleFilled class="modal-icon-warning" />;
+    } else if (iconType === 'success') {
+      return <CheckCircleFilled class="modal-icon-success" />;
+    } else if (iconType === 'info') {
+      return <InfoCircleFilled class="modal-icon-info" />;
+    } else {
+      return <CloseCircleFilled class="modal-icon-error" />;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
+  try {
+    if (isString(content)) {
+      return <div innerHTML={`<div>${content as string}</div>`}></div>;
+    } else {
+      return content;
+    }
+  } catch (e) {
+    console.log(e);
+    return content;
+  }
+}
+
+/**
+ * @description: Create confirmation box
+ */
+function createConfirm(options: ModalOptionsEx): ReturnType<ModalFunc> {
+  const iconType = options.iconType || 'warning';
+  Reflect.deleteProperty(options, 'iconType');
+  const opt: ModalFuncProps = {
+    centered: true,
+    icon: getIcon(iconType),
+    ...options,
+    content: renderContent(options),
+  };
+  return Modal.confirm(opt);
+}
+
+const getBaseOptions = () => {
+  const { t } = useI18n();
+  return {
+    okText: t('common.okText'),
+    centered: true,
+  };
+};
+
+function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOptionsPartial {
+  return {
+    ...getBaseOptions(),
+    ...options,
+    content: renderContent(options),
+    icon: getIcon(icon),
+  };
+}
+
+function createSuccessModal(options: ModalOptionsPartial) {
+  return Modal.success(createModalOptions(options, 'success'));
+}
+
+function createErrorModal(options: ModalOptionsPartial) {
+  return Modal.error(createModalOptions(options, 'close'));
+}
+
+function createInfoModal(options: ModalOptionsPartial) {
+  return Modal.info(createModalOptions(options, 'info'));
+}
+
+function createWarningModal(options: ModalOptionsPartial) {
+  return Modal.warning(createModalOptions(options, 'warning'));
+}
+
+notification.config({
+  placement: 'topRight',
+  duration: 3,
+});
+
+/**
+ * @description: message
+ */
+export function useMessage() {
+  return {
+    createMessage: Message,
+    notification: notification as NotifyApi,
+    createConfirm: createConfirm,
+    createSuccessModal,
+    createErrorModal,
+    createInfoModal,
+    createWarningModal,
+  };
+}
diff --git a/src/hooks/web/usePage.ts b/src/hooks/web/usePage.ts
new file mode 100644
index 0000000..57a7aeb
--- /dev/null
+++ b/src/hooks/web/usePage.ts
@@ -0,0 +1,81 @@
+import type { RouteLocationRaw, Router } from 'vue-router';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { isString } from '/@/utils/is';
+import { unref } from 'vue';
+
+import { useRouter } from 'vue-router';
+import { REDIRECT_NAME } from '/@/router/constant';
+import { useUserStore } from '/@/store/modules/user';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEnum };
+
+function handleError(e: Error) {
+  console.error(e);
+}
+
+// page switch
+export function useGo(_router?: Router) {
+  // 代码逻辑说明: 【issues/694】404返回首页问题
+  const userStore = useUserStore();
+  const homePath = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+  let router;
+  if (!_router) {
+    router = useRouter();
+  }
+  const { push, replace } = _router || router;
+  function go(opt: PageEnum | RouteLocationRawEx | string = homePath, isReplace = false) {
+    if (!opt) {
+      return;
+    }
+    if (isString(opt)) {
+      isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
+    } else {
+      const o = opt as RouteLocationRaw;
+      isReplace ? replace(o).catch(handleError) : push(o).catch(handleError);
+    }
+  }
+  return go;
+}
+
+/**
+ * @description: redo current page
+ */
+export const useRedo = (_router?: Router, otherQuery?: Recordable) => {
+  const { push, currentRoute } = _router || useRouter();
+  const { query, params = {}, name, fullPath } = unref(currentRoute.value);
+  function redo(): Promise<boolean> {
+    return new Promise((resolve) => {
+      if (name === REDIRECT_NAME) {
+        resolve(false);
+        return;
+      }
+      // 代码逻辑说明: 【QQYUN-7099】动态路由匹配右键重新加载404
+      const tabStore = useMultipleTabStore();
+      if (otherQuery && Object.keys(otherQuery).length > 0) {
+        Object.keys(otherQuery).forEach((key) => {
+          params[key] = otherQuery[key];
+        });
+      }
+      if (name && Object.keys(params).length > 0) {
+        tabStore.setRedirectPageParam({
+          redirect_type: 'name',
+          name: String(name),
+          params,
+          query,
+        });
+        params['path'] = String(name);
+      } else {
+        tabStore.setRedirectPageParam({
+          redirect_type: 'path',
+          path: fullPath,
+          query,
+        });
+        params['path'] = fullPath;
+      }
+      push({ name: REDIRECT_NAME, params, query }).then(() => resolve(true));
+    });
+  }
+  return redo;
+};
diff --git a/src/hooks/web/usePagination.ts b/src/hooks/web/usePagination.ts
new file mode 100644
index 0000000..ea234ef
--- /dev/null
+++ b/src/hooks/web/usePagination.ts
@@ -0,0 +1,31 @@
+import type { Ref } from 'vue';
+import { ref, unref, computed } from 'vue';
+
+function pagination<T = any>(list: T[], pageNo: number, pageSize: number): T[] {
+  const offset = (pageNo - 1) * Number(pageSize);
+  const ret = offset + Number(pageSize) >= list.length ? list.slice(offset, list.length) : list.slice(offset, offset + Number(pageSize));
+  return ret;
+}
+
+export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
+  const currentPage = ref(1);
+  const pageSizeRef = ref(pageSize);
+
+  const getPaginationList = computed(() => {
+    return pagination(unref(list), unref(currentPage), unref(pageSizeRef));
+  });
+
+  const getTotal = computed(() => {
+    return unref(list).length;
+  });
+
+  function setCurrentPage(page: number) {
+    currentPage.value = page;
+  }
+
+  function setPageSize(pageSize: number) {
+    pageSizeRef.value = pageSize;
+  }
+
+  return { setCurrentPage, getTotal, setPageSize, getPaginationList };
+}
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
new file mode 100644
index 0000000..93c0b28
--- /dev/null
+++ b/src/hooks/web/usePermission.ts
@@ -0,0 +1,172 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { useAppStore } from '/@/store/modules/app';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { useUserStore } from '/@/store/modules/user';
+
+import { useTabs } from './useTabs';
+
+import { router, resetRouter } from '/@/router';
+// import { RootRoute } from '/@/router/routes';
+
+import projectSetting from '/@/settings/projectSetting';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+import { intersection } from 'lodash-es';
+import { isArray } from '/@/utils/is';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+// User permissions related operations
+export function usePermission() {
+  const userStore = useUserStore();
+  const appStore = useAppStore();
+  const permissionStore = usePermissionStore();
+  //动态加载流程节点表单权限
+  let formData: any = {};
+  function initBpmFormData(_bpmFormData) {
+    formData = _bpmFormData;
+  }
+  const { closeAll } = useTabs(router);
+
+  //==================================工作流权限判断-begin=========================================
+  function hasBpmPermission(code, type) {
+    // 禁用-type=2
+    // 显示-type=1
+    let codeList: string[] = [];
+    let permissionList = formData.permissionList;
+    if (permissionList && permissionList.length > 0) {
+      for (let item of permissionList) {
+        if (item.type == type) {
+          codeList.push(item.action);
+        }
+      }
+    }
+    return codeList.indexOf(code) >= 0;
+  }
+  //==================================工作流权限判断-end=========================================
+
+  /**
+   * Change permission mode
+   */
+  async function togglePermissionMode() {
+    appStore.setProjectConfig({
+      permissionMode: projectSetting.permissionMode === PermissionModeEnum.BACK ? PermissionModeEnum.ROUTE_MAPPING : PermissionModeEnum.BACK,
+    });
+    location.reload();
+  }
+
+  /**
+   * Reset and regain authority resource information
+   * @param id
+   */
+  async function resume() {
+    const tabStore = useMultipleTabStore();
+    tabStore.clearCacheTabs();
+    resetRouter();
+    const routes = await permissionStore.buildRoutesAction();
+    routes.forEach((route) => {
+      router.addRoute(route as unknown as RouteRecordRaw);
+    });
+    permissionStore.setLastBuildMenuTime();
+    closeAll();
+  }
+
+  /**
+   * 确定是否存在权限
+   */
+  function hasPermission(value?: RoleEnum | RoleEnum[] | string | string[], def = true): boolean {
+    // Visible by default
+    if (!value) {
+      return def;
+    }
+
+    const permMode = projectSetting.permissionMode;
+
+    if ([PermissionModeEnum.ROUTE_MAPPING, PermissionModeEnum.ROLE].includes(permMode)) {
+      if (!isArray(value)) {
+        return userStore.getRoleList?.includes(value as RoleEnum);
+      }
+      return (intersection(value, userStore.getRoleList) as RoleEnum[]).length > 0;
+    }
+
+    if (PermissionModeEnum.BACK === permMode) {
+      const allCodeList = permissionStore.getPermCodeList as string[];
+      if (!isArray(value) && allCodeList && allCodeList.length > 0) {
+        //=============================工作流权限判断-显示-begin==============================================
+        if (formData) {
+          let code = value as string;
+          if (hasBpmPermission(code, '1') === true) {
+            return true;
+          }
+        }
+        //=============================工作流权限判断-显示-end==============================================
+        return allCodeList.includes(value);
+      }
+      return (intersection(value, allCodeList) as string[]).length > 0;
+    }
+    return true;
+  }
+  /**
+   * 是否禁用组件
+   */
+  function isDisabledAuth(value?: RoleEnum | RoleEnum[] | string | string[], def = true): boolean {
+    //=============================工作流权限判断-禁用-begin==============================================
+    if (formData) {
+      let code = value as string;
+      if (hasBpmPermission(code, '2') === true) {
+        return true;
+      }
+      // 代码逻辑说明: VUEN-1342【流程】编码方式 节点权限配置好后，未生效
+      if (isCodingButNoConfig(code) == true) {
+        return false;
+      }
+    }
+    //=============================工作流权限判断-禁用-end==============================================
+    return !hasPermission(value);
+  }
+
+  /**
+   * Change roles
+   * @param roles
+   */
+  async function changeRole(roles: RoleEnum | RoleEnum[]): Promise<void> {
+    if (projectSetting.permissionMode !== PermissionModeEnum.ROUTE_MAPPING) {
+      throw new Error('Please switch PermissionModeEnum to ROUTE_MAPPING mode in the configuration to operate!');
+    }
+
+    if (!isArray(roles)) {
+      roles = [roles];
+    }
+    userStore.setRoleList(roles);
+    await resume();
+  }
+
+  /**
+   * refresh menu data
+   */
+  async function refreshMenu() {
+    resume();
+  }
+
+  /**
+   * 判断是不是 代码里写了逻辑但是没有配置权限这种情况
+   */
+  function isCodingButNoConfig(code) {
+    let all = permissionStore.allAuthList;
+    if (all && all instanceof Array) {
+      let temp = all.filter((item) => item.action == code);
+      if (temp && temp.length > 0) {
+        if (temp[0].status == '0') {
+          return true;
+        }
+      } else {
+        // 代码逻辑说明: 【TV360X-1604】按钮禁用权限在接口中查不到也禁用
+        return false;
+      }
+    }
+    return false;
+  }
+
+  return { changeRole, hasPermission, togglePermissionMode, refreshMenu, isDisabledAuth, initBpmFormData };
+}
diff --git a/src/hooks/web/usePrintJS.ts b/src/hooks/web/usePrintJS.ts
new file mode 100644
index 0000000..8bedf8b
--- /dev/null
+++ b/src/hooks/web/usePrintJS.ts
@@ -0,0 +1,44 @@
+import { nextTick } from 'vue';
+import $printJS, { Configuration } from 'print-js';
+import Print from 'vue-print-nb-jeecg/src/printarea';
+
+/**
+ * 调用 printJS，如果type = html，就走 printNB 的方法
+ */
+export function printJS(configuration: Configuration) {
+  if (configuration?.type === 'html') {
+    printNb(configuration.printable);
+  } else {
+    return $printJS(configuration);
+  }
+}
+
+/** 调用 printNB 打印 */
+export function printNb(domId, endCallback?) {
+  if (domId) {
+    localPrint(domId, endCallback);
+  } else {
+    window.print();
+    endCallback && endCallback();
+  }
+}
+
+let closeBtn = true;
+
+function localPrint(domId, endCallback) {
+  if (typeof domId === 'string' && !domId.startsWith('#')) {
+    domId = '#' + domId;
+  }
+  nextTick(() => {
+    if (closeBtn) {
+      closeBtn = false;
+      new Print({
+        el: domId,
+        endCallback() {
+          closeBtn = true;
+          endCallback && endCallback();
+        },
+      });
+    }
+  });
+}
diff --git a/src/hooks/web/useScript.ts b/src/hooks/web/useScript.ts
new file mode 100644
index 0000000..585c267
--- /dev/null
+++ b/src/hooks/web/useScript.ts
@@ -0,0 +1,48 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface ScriptOptions {
+  src: string;
+}
+
+export function useScript(opts: ScriptOptions) {
+  // date-begin--author:liaozhiyang---date:20250716---for：【issues/8552】useScript的isLoading默认值应该是true
+  const isLoading = ref(true);
+  // date-end--author:liaozhiyang---date:20250716---for：【issues/8552】useScript的isLoading默认值应该是true
+  const error = ref(false);
+  const success = ref(false);
+  let script: HTMLScriptElement;
+
+  const promise = new Promise((resolve, reject) => {
+    onMounted(() => {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = function () {
+        isLoading.value = false;
+        success.value = true;
+        error.value = false;
+        resolve('');
+      };
+
+      script.onerror = function (err) {
+        isLoading.value = false;
+        success.value = false;
+        error.value = true;
+        reject(err);
+      };
+
+      script.src = opts.src;
+      document.head.appendChild(script);
+    });
+  });
+
+  onUnmounted(() => {
+    script && script.remove();
+  });
+
+  return {
+    isLoading,
+    error,
+    success,
+    toPromise: () => promise,
+  };
+}
diff --git a/src/hooks/web/useSortable.ts b/src/hooks/web/useSortable.ts
new file mode 100644
index 0000000..4c66b6a
--- /dev/null
+++ b/src/hooks/web/useSortable.ts
@@ -0,0 +1,21 @@
+import { nextTick, unref } from 'vue';
+import type { Ref } from 'vue';
+import type { Options } from 'sortablejs';
+
+export function useSortable(el: HTMLElement | Ref<HTMLElement>, options?: Options) {
+  function initSortable() {
+    nextTick(async () => {
+      if (!el) return;
+
+      const Sortable = (await import('sortablejs')).default;
+      Sortable.create(unref(el), {
+        animation: 500,
+        delay: 400,
+        delayOnTouchOnly: true,
+        ...options,
+      });
+    });
+  }
+
+  return { initSortable };
+}
diff --git a/src/hooks/web/useSso.ts b/src/hooks/web/useSso.ts
new file mode 100644
index 0000000..61be98a
--- /dev/null
+++ b/src/hooks/web/useSso.ts
@@ -0,0 +1,44 @@
+// 单点登录核心类
+import { getToken } from '/@/utils/auth';
+import { getUrlParam } from '/@/utils';
+import { useGlobSetting } from '/@/hooks/setting';
+import { validateCasLogin } from '/@/api/sys/user';
+import { useUserStore } from '/@/store/modules/user';
+const globSetting = useGlobSetting();
+const openSso = globSetting.openSso;
+export function useSso() {
+  // 代码逻辑说明: 【QQYUN-7805】SSO登录强制用http #957---
+  let locationUrl = document.location.protocol +"//" + window.location.host + '/';
+
+  /**
+   * 单点登录
+   */
+  async function ssoLogin() {
+    if (openSso == 'true') {
+      let token = getToken();
+      let ticket = getUrlParam('ticket');
+      if (!token) {
+        if (ticket) {
+          await validateCasLogin({
+            ticket: ticket,
+            service: locationUrl,
+          }).then((res) => {
+            const userStore = useUserStore();
+            userStore.setToken(res.token);
+            return userStore.afterLoginAction(true, {});
+          });
+        } else {
+          window.location.href = globSetting.casBaseUrl + '/login?service=' + encodeURIComponent(locationUrl);
+        }
+      }
+    }
+  }
+
+  /**
+   * 退出登录
+   */
+  async function ssoLoginOut() {
+    window.location.href = globSetting.casBaseUrl + '/logout?service=' + encodeURIComponent(locationUrl);
+  }
+  return { ssoLogin, ssoLoginOut };
+}
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
new file mode 100644
index 0000000..ab6e88c
--- /dev/null
+++ b/src/hooks/web/useTabs.ts
@@ -0,0 +1,126 @@
+import type { RouteLocationNormalized, Router } from 'vue-router';
+
+import { useRouter } from 'vue-router';
+import { unref } from 'vue';
+
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useAppStore } from '/@/store/modules/app';
+
+enum TableActionEnum {
+  REFRESH,
+  CLOSE_ALL,
+  CLOSE_LEFT,
+  CLOSE_RIGHT,
+  CLOSE_OTHER,
+  CLOSE_CURRENT,
+  HOME_DESIGN,
+  CLOSE,
+}
+
+export function useTabs(_router?: Router) {
+  const appStore = useAppStore();
+
+  function canIUseTabs(): boolean {
+    const { show } = appStore.getMultiTabsSetting;
+    if (!show) {
+      throw new Error('The multi-tab page is currently not open, please open it in the settings！');
+    }
+    return !!show;
+  }
+
+  const tabStore = useMultipleTabStore();
+  const router = _router || useRouter();
+
+  const { currentRoute } = router;
+
+  function getCurrentTab() {
+    const route = unref(currentRoute);
+    return tabStore.getTabList.find((item) => item.path === route.path)!;
+  }
+
+  async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
+    const canIUse = canIUseTabs;
+    if (!canIUse) {
+      return;
+    }
+    const targetTab = tab || getCurrentTab();
+    await tabStore.setTabTitle(title, targetTab);
+  }
+
+  async function updateTabPath(path: string, tab?: RouteLocationNormalized) {
+    const canIUse = canIUseTabs;
+    if (!canIUse) {
+      return;
+    }
+    const targetTab = tab || getCurrentTab();
+    await tabStore.updateTabPath(path, targetTab);
+  }
+
+  async function handleTabAction(action: TableActionEnum, tab?: RouteLocationNormalized) {
+    const canIUse = canIUseTabs;
+    if (!canIUse) {
+      return;
+    }
+    const currentTab = getCurrentTab();
+    switch (action) {
+      case TableActionEnum.REFRESH:
+        await tabStore.refreshPage(router);
+        break;
+
+      case TableActionEnum.HOME_DESIGN:
+        await tabStore.changeDesign(router);
+        break;
+
+      case TableActionEnum.CLOSE_ALL:
+        await tabStore.closeAllTab(router);
+        break;
+
+      case TableActionEnum.CLOSE_LEFT:
+        // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+        await tabStore.closeLeftTabs(tab || currentTab, router);
+        break;
+
+      case TableActionEnum.CLOSE_RIGHT:
+        await tabStore.closeRightTabs(tab || currentTab, router);
+        break;
+
+      case TableActionEnum.CLOSE_OTHER:
+        await tabStore.closeOtherTabs(tab || currentTab, router);
+        break;
+
+      case TableActionEnum.CLOSE_CURRENT:
+      case TableActionEnum.CLOSE:
+        await tabStore.closeTab(tab || currentTab, router);
+        break;
+    }
+  }
+
+  /**
+   * 关闭相同的路由
+   * @param path
+   */
+  function closeSameRoute(path) {
+    if(path.indexOf('?')>0){
+      path = path.split('?')[0];
+    }
+    let tab = tabStore.getTabList.find((item) => item.path.indexOf(path)>=0)!;
+    if(tab){
+      tabStore.closeTab(tab, router);
+    }
+  }
+
+  return {
+    refreshPage: () => handleTabAction(TableActionEnum.REFRESH),
+    changeDesign: () => handleTabAction(TableActionEnum.HOME_DESIGN),
+    // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+    closeAll: (tab) => handleTabAction(TableActionEnum.CLOSE_ALL, tab),
+    closeLeft: (tab) => handleTabAction(TableActionEnum.CLOSE_LEFT, tab),
+    closeRight: (tab) => handleTabAction(TableActionEnum.CLOSE_RIGHT, tab),
+    closeOther: (tab) => handleTabAction(TableActionEnum.CLOSE_OTHER, tab),
+    closeCurrent: () => handleTabAction(TableActionEnum.CLOSE_CURRENT),
+    close: (tab?: RouteLocationNormalized) => handleTabAction(TableActionEnum.CLOSE, tab),
+    setTitle: (title: string, tab?: RouteLocationNormalized) => updateTabTitle(title, tab),
+    updatePath: (fullPath: string, tab?: RouteLocationNormalized) => updateTabPath(fullPath, tab),
+    closeSameRoute
+  };
+}
diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts
new file mode 100644
index 0000000..7747d0d
--- /dev/null
+++ b/src/hooks/web/useTitle.ts
@@ -0,0 +1,71 @@
+import type {Menu} from "@/router/types";
+import { ref, watch, unref } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useTitle as usePageTitle } from '@vueuse/core';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useRouter } from 'vue-router';
+import { useLocaleStore } from '/@/store/modules/locale';
+import { REDIRECT_NAME } from '/@/router/constant';
+import { getMenus } from '/@/router/menus';
+
+/**
+ * Listening to page changes and dynamically changing site titles
+ */
+export function useTitle() {
+  const { title } = useGlobSetting();
+  const { t } = useI18n();
+  const { currentRoute } = useRouter();
+  const localeStore = useLocaleStore();
+
+  const pageTitle = usePageTitle();
+
+  const menus = ref<Menu[] | null>(null)
+
+  watch(
+    [() => currentRoute.value.path, () => localeStore.getLocale],
+    async () => {
+      const route = unref(currentRoute);
+
+      if (route.name === REDIRECT_NAME) {
+        return;
+      }
+      // 代码逻辑说明: 【QQYUN-6938】online菜单名字和页面title不一致
+      if (route.params && Object.keys(route.params).length) {
+        if (!menus.value) {
+          menus.value = await getMenus();
+        }
+        const getTitle = getMatchingRouterName(menus.value, route.fullPath);
+        let tTitle = '';
+        if (getTitle) {
+          tTitle = t(getTitle);
+        } else {
+          tTitle = t(route?.meta?.title as string);
+        }
+        pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+      } else {
+        const tTitle = t(route?.meta?.title as string);
+        pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+      }
+    },
+    { immediate: true }
+  );
+}
+/** 
+ 2023-11-09
+ liaozhiyang
+ 获取路由匹配模式的真实页面名字
+*/
+function getMatchingRouterName(menus, path) {
+  for (let i = 0, len = menus.length; i < len; i++) {
+    const item = menus[i];
+    if (item.path === path && !item.redirect && !item.paramPath) {
+      return item.meta?.title;
+    } else if (item.children?.length) {
+      const result = getMatchingRouterName(item.children, path);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return '';
+}
diff --git a/src/hooks/web/useWatermark.ts b/src/hooks/web/useWatermark.ts
new file mode 100644
index 0000000..bde1549
--- /dev/null
+++ b/src/hooks/web/useWatermark.ts
@@ -0,0 +1,98 @@
+import { getCurrentInstance, onBeforeUnmount, ref, Ref, shallowRef, unref } from 'vue';
+import { useRafThrottle } from '/@/utils/domUtils';
+import { addResizeListener, removeResizeListener } from '/@/utils/event';
+import { isDef } from '/@/utils/is';
+
+const domSymbol = Symbol('watermark-dom');
+
+export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>) {
+  const func = useRafThrottle(function () {
+    const el = unref(appendEl);
+    if (!el) return;
+    const { clientHeight: height, clientWidth: width } = el;
+    updateWatermark({ height, width });
+  });
+  const id = domSymbol.toString();
+  const watermarkEl = shallowRef<HTMLElement>();
+
+  const clear = () => {
+    const domId = unref(watermarkEl);
+    watermarkEl.value = undefined;
+    const el = unref(appendEl);
+    if (!el) return;
+    domId && el.removeChild(domId);
+    removeResizeListener(el, func);
+  };
+
+  function createBase64(str: string) {
+    const can = document.createElement('canvas');
+    const width = 300;
+    const height = 240;
+    Object.assign(can, { width, height });
+
+    const cans = can.getContext('2d');
+    if (cans) {
+      cans.rotate((-20 * Math.PI) / 120);
+      cans.font = '15px Vedana';
+      cans.fillStyle = 'rgba(0, 0, 0, 0.15)';
+      cans.textAlign = 'left';
+      cans.textBaseline = 'middle';
+      cans.fillText(str, width / 20, height);
+    }
+    return can.toDataURL('image/png');
+  }
+
+  function updateWatermark(
+    options: {
+      width?: number;
+      height?: number;
+      str?: string;
+    } = {}
+  ) {
+    const el = unref(watermarkEl);
+    if (!el) return;
+    if (isDef(options.width)) {
+      el.style.width = `${options.width}px`;
+    }
+    if (isDef(options.height)) {
+      el.style.height = `${options.height}px`;
+    }
+    if (isDef(options.str)) {
+      el.style.background = `url(${createBase64(options.str)}) left top repeat`;
+    }
+  }
+
+  const createWatermark = (str: string) => {
+    if (unref(watermarkEl)) {
+      updateWatermark({ str });
+      return id;
+    }
+    const div = document.createElement('div');
+    watermarkEl.value = div;
+    div.id = id;
+    div.style.pointerEvents = 'none';
+    div.style.top = '0px';
+    div.style.left = '0px';
+    div.style.position = 'absolute';
+    div.style.zIndex = '100000';
+    const el = unref(appendEl);
+    if (!el) return id;
+    const { clientHeight: height, clientWidth: width } = el;
+    updateWatermark({ str, width, height });
+    el.appendChild(div);
+    return id;
+  };
+
+  function setWatermark(str: string) {
+    createWatermark(str);
+    addResizeListener(document.documentElement, func);
+    const instance = getCurrentInstance();
+    if (instance) {
+      onBeforeUnmount(() => {
+        clear();
+      });
+    }
+  }
+
+  return { setWatermark, clear };
+}
diff --git a/src/hooks/web/useWebSocket.ts b/src/hooks/web/useWebSocket.ts
new file mode 100644
index 0000000..76bfbce
--- /dev/null
+++ b/src/hooks/web/useWebSocket.ts
@@ -0,0 +1,132 @@
+// noinspection JSUnusedGlobalSymbols
+
+import { unref } from 'vue';
+import { useWebSocket, WebSocketResult } from '@vueuse/core';
+import { getToken } from '/@/utils/auth';
+
+let result: WebSocketResult<any>;
+const listeners = new Map();
+
+/**
+ * 开启 WebSocket 链接，全局只需执行一次
+ * @param url
+ */
+export function connectWebSocket(url: string) {
+  // 代码逻辑说明: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
+  const token = (getToken() || '') as string;
+  result = useWebSocket(url, {
+    // 自动重连 (遇到错误最多重复连接10次)
+    autoReconnect: {
+      retries : 10,
+      delay : 5000
+    },
+    // 心跳检测
+    heartbeat: {
+      message: "ping",
+      interval: 55000
+    },
+    protocols: [token],
+    // 代码逻辑说明: [issues/6662] 演示系统socket总断，换一个写法
+    onConnected: function (ws) {
+      console.log('[WebSocket] 连接成功', ws);
+    },
+    onDisconnected: function (ws, event) {
+      console.log('[WebSocket] 连接断开：', ws, event);
+    },
+    onError: function (ws, event) {
+      console.log('[WebSocket] 连接发生错误: ', ws, event);
+    },
+    onMessage: function (_ws, e) {
+      console.debug('[WebSocket] -----接收消息-------', e.data);
+      try {
+        // 代码逻辑说明: 【issues/1161】前端websocket因心跳导致监听不起作用---
+        if (e.data === 'ping') {
+          return;
+        }
+        const data = JSON.parse(e.data);
+        for (const callback of listeners.keys()) {
+          try {
+            callback(data);
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      } catch (err) {
+        console.error('[WebSocket] data解析失败：', err);
+      }
+    },
+  });
+  // if (result) {
+  //   result.open = onOpen;
+  //   result.close = onClose;
+
+  //   const ws = unref(result.ws);
+  //   if(ws!=null){
+  //     ws.onerror = onError;
+  //     ws.onmessage = onMessage;
+  //     ws.onopen = onOpen;
+  //     ws.onclose = onClose;
+  //     
+  //   }
+  // }
+}
+
+function onOpen() {
+  console.log('[WebSocket] 连接成功');
+}
+
+function onClose(e) {
+  console.log('[WebSocket] 连接断开：', e);
+}
+
+function onError(e) {
+  console.log('[WebSocket] 连接发生错误: ', e);
+}
+
+function onMessage(e) {
+  console.debug('[WebSocket] -----接收消息-------', e.data);
+  try {
+    // 代码逻辑说明: 【issues/1161】前端websocket因心跳导致监听不起作用---
+    if(e==='ping'){
+      return;
+    }
+    const data = JSON.parse(e.data);
+    for (const callback of listeners.keys()) {
+      try {
+        callback(data);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  } catch (err) {
+    console.error('[WebSocket] data解析失败：', err);
+  }
+}
+
+
+/**
+ * 添加 WebSocket 消息监听
+ * @param callback
+ */
+export function onWebSocket(callback: (data: object) => any) {
+  if (!listeners.has(callback)) {
+    if (typeof callback === 'function') {
+      listeners.set(callback, null);
+    } else {
+      console.debug('[WebSocket] 添加 WebSocket 消息监听失败：传入的参数不是一个方法');
+    }
+  }
+}
+
+/**
+ * 解除 WebSocket 消息监听
+ *
+ * @param callback
+ */
+export function offWebSocket(callback: (data: object) => any) {
+  listeners.delete(callback);
+}
+
+export function useMyWebSocket() {
+  return result;
+}
diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue
new file mode 100644
index 0000000..2dc3267
--- /dev/null
+++ b/src/layouts/default/content/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+    <PageLayout />
+    <div :id="qiankunDivId" class="app-view-box" v-if="openQiankun && qiankunDivId"></div>
+  </div>
+</template>
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import PageLayout from '/@/layouts/page/index.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useContentViewHeight } from './useContentViewHeight';
+  // import registerApps from '/@/qiankun';
+  import { useGlobSetting } from '/@/hooks/setting';
+  export default defineComponent({
+    name: 'LayoutContent',
+    components: { PageLayout },
+    setup() {
+      const { prefixCls } = useDesign('layout-content');
+      const { getOpenPageLoading } = useTransitionSetting();
+      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+      const globSetting = useGlobSetting();
+      const openQiankun = globSetting.openQianKun == 'true';
+      const qiankunDivId = ref('');
+      useContentViewHeight();
+
+      // // 注册 qiankun
+      // if (openQiankun) {
+      //   qiankunDivId.value = registerApps?.containerId;
+      //   registerApps();
+      // }
+
+      return {
+        prefixCls,
+        openQiankun,
+        qiankunDivId,
+        getOpenPageLoading,
+        getLayoutContentMode,
+        getPageLoading,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-content';
+
+  .@{prefix-cls} {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    &.fixed {
+      width: 1200px;
+      margin: 0 auto;
+    }
+
+    &-loading {
+      position: absolute;
+      top: 200px;
+      z-index: @page-loading-z-index;
+    }
+  }
+</style>
diff --git a/src/layouts/default/content/useContentContext.ts b/src/layouts/default/content/useContentContext.ts
new file mode 100644
index 0000000..f12e77b
--- /dev/null
+++ b/src/layouts/default/content/useContentContext.ts
@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface ContentContextProps {
+  contentHeight: ComputedRef<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<ContentContextProps> = Symbol();
+
+export function createContentContext(context: ContentContextProps) {
+  return createContext<ContentContextProps>(context, key, { native: true });
+}
+
+export function useContentContext() {
+  return useContext<ContentContextProps>(key);
+}
diff --git a/src/layouts/default/content/useContentViewHeight.ts b/src/layouts/default/content/useContentViewHeight.ts
new file mode 100644
index 0000000..b55b7e8
--- /dev/null
+++ b/src/layouts/default/content/useContentViewHeight.ts
@@ -0,0 +1,42 @@
+import { ref, computed, unref } from 'vue';
+import { createPageContext } from '/@/hooks/component/usePageContext';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+
+const headerHeightRef = ref(0);
+const footerHeightRef = ref(0);
+
+export function useLayoutHeight() {
+  function setHeaderHeight(val) {
+    headerHeightRef.value = val;
+  }
+  function setFooterHeight(val) {
+    footerHeightRef.value = val;
+  }
+  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
+}
+
+export function useContentViewHeight() {
+  const contentHeight = ref(window.innerHeight);
+  const pageHeight = ref(window.innerHeight);
+  const getViewHeight = computed(() => {
+    return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0;
+  });
+
+  useWindowSizeFn(
+    () => {
+      contentHeight.value = window.innerHeight;
+    },
+    100,
+    { immediate: true }
+  );
+
+  async function setPageHeight(height: number) {
+    pageHeight.value = height;
+  }
+
+  createPageContext({
+    contentHeight: getViewHeight,
+    setPageHeight,
+    pageHeight,
+  });
+}
diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue
new file mode 100644
index 0000000..99c83cb
--- /dev/null
+++ b/src/layouts/default/feature/index.vue
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+  import { BackTop } from 'ant-design-vue';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+
+  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
+  export default defineComponent({
+    name: 'LayoutFeatures',
+    components: {
+      BackTop,
+      LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
+      SessionTimeoutLogin,
+    },
+    setup() {
+      const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting();
+      const userStore = useUserStoreWithOut();
+      const { prefixCls } = useDesign('setting-drawer-fearure');
+      const { getShowHeader } = useHeaderSetting();
+
+      const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
+
+      const getIsFixedSettingDrawer = computed(() => {
+        if (!unref(getShowSettingButton)) {
+          return false;
+        }
+        const settingButtonPosition = unref(getSettingButtonPosition);
+
+        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+          return !unref(getShowHeader) || unref(getFullContent);
+        }
+        return settingButtonPosition === SettingButtonPositionEnum.FIXED;
+      });
+
+      return {
+        getTarget: () => document.body,
+        getUseOpenBackTop,
+        getIsFixedSettingDrawer,
+        prefixCls,
+        getIsSessionTimeout,
+      };
+    },
+  });
+</script>
+
+<template>
+  <LayoutLockPage />
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
+  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-setting-drawer-fearure';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 45%;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background-color: @primary-color;
+    border-radius: 6px 0 0 6px;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+</style>
diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue
new file mode 100644
index 0000000..084a4b0
--- /dev/null
+++ b/src/layouts/default/footer/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
+    <div :class="`${prefixCls}__links`">
+      <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>
+
+      <GithubFilled @click="openWindow(GITHUB_URL)" :class="`${prefixCls}__github`" />
+
+      <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
+    </div>
+    <div>Copyright &copy;2021 JEECG开源社区 出品</div>
+  </Footer>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref, ref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+
+  import { GithubFilled } from '@ant-design/icons-vue';
+
+  import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
+  import { openWindow } from '/@/utils';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useRouter } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
+  import { ThemeEnum } from '/@/enums/appEnum';
+
+  export default defineComponent({
+    name: 'LayoutFooter',
+    components: { Footer: Layout.Footer, GithubFilled },
+    setup() {
+      const { t } = useI18n();
+      const { getShowFooter } = useRootSetting();
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('layout-footer');
+
+      const footerRef = ref<ComponentRef>(null);
+      const { setFooterHeight } = useLayoutHeight();
+      //当前主题
+      const { getDarkMode } = useRootSetting();
+      const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+
+      const getShowLayoutFooter = computed(() => {
+        if (unref(getShowFooter)) {
+          const footerEl = unref(footerRef)?.$el;
+          setFooterHeight(footerEl?.offsetHeight || 0);
+        } else {
+          setFooterHeight(0);
+        }
+        return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
+      });
+      //鼠标移入的颜色设置
+      const hoverColor = computed(() => {
+        return unref(isDark) ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 0.85)';
+      });
+      return {
+        getShowLayoutFooter,
+        prefixCls,
+        t,
+        DOC_URL,
+        GITHUB_URL,
+        SITE_URL,
+        openWindow,
+        footerRef,
+        hoverColor,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-layout-footer';
+
+  @normal-color: rgba(0, 0, 0, 0.45);
+  // 代码逻辑说明: [issues/608] dark 模式下底部 footer 文字 hover 样式导致文字消失
+  @hover-color: v-bind(hoverColor);
+  .@{prefix-cls} {
+    color: @normal-color;
+    text-align: center;
+
+    &__links {
+      margin-bottom: 8px;
+
+      a {
+        color: @normal-color;
+
+        &:hover {
+          color: @hover-color;
+        }
+      }
+    }
+
+    &__github {
+      margin: 0 30px;
+
+      &:hover {
+        color: @hover-color;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
new file mode 100644
index 0000000..210119b
--- /dev/null
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -0,0 +1,164 @@
+<template>
+  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
+  <div :style="getWrapStyle" :class="getClass">
+    <LayoutHeader v-if="getShowHeader" />
+    <MultipleTabs v-if="getShowTabs" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed, CSSProperties } from 'vue';
+
+  import LayoutHeader from './index.vue';
+  import MultipleTabs from '../tabs/index.vue';
+
+  import { useAppStore } from "@/store/modules/app";
+  import { useGlobSetting } from "/@/hooks/setting";
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useFullContent } from '/@/hooks/web/useFullContent';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '../content/useContentViewHeight';
+  import { TabsThemeEnum } from '/@/enums/appEnum';
+  import { MenuTypeEnum } from '/@/enums/menuEnum';
+
+  // 代码逻辑说明: 【QQYUN-8774】网站header区域加高
+  const HEADER_HEIGHT = 60;
+
+  // updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式：更改高度
+  const TABS_HEIGHT = 32;
+  const TABS_HEIGHT_CARD = 50;
+  const TABS_HEIGHT_SMOOTH = 50;
+
+  export default defineComponent({
+    name: 'LayoutMultipleHeader',
+    components: { LayoutHeader, MultipleTabs },
+    setup() {
+      const { setHeaderHeight } = useLayoutHeight();
+      const { prefixCls } = useDesign('layout-multiple-header');
+
+      const appStore = useAppStore()
+      const glob = useGlobSetting()
+
+      const { getCalcContentWidth, getSplit, getMenuType } = useMenuSetting();
+      const { getIsMobile } = useAppInject();
+      const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme } = useHeaderSetting();
+
+      const { getFullContent } = useFullContent();
+
+      const { getShowMultipleTab, getTabsTheme } = useMultipleTabSetting();
+
+      const getShowHeader = computed(() => {
+        // 控制是否显示顶部
+        if (appStore.getLayoutHideHeader) {
+          return false;
+        }
+        return unref(getShowInsetHeaderRef);
+      })
+
+      const getShowTabs = computed(() => {
+        // 控制是否显示多Tabs切换
+        if (appStore.getLayoutHideMultiTabs) {
+          return false;
+        }
+        return unref(getShowMultipleTab) && !unref(getFullContent);
+      });
+
+      const getIsShowPlaceholderDom = computed(() => {
+        return unref(getFixed) || unref(getShowFullHeaderRef);
+      });
+
+      const getWrapStyle = computed((): CSSProperties => {
+        const style: CSSProperties = {};
+        if (unref(getFixed) && !glob.isQiankunMicro) {
+          style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
+        }
+        if (unref(getShowFullHeaderRef)) {
+          style.top = `${HEADER_HEIGHT}px`;
+        }
+        return style;
+      });
+
+      const getIsFixed = computed(() => {
+        return unref(getFixed) || unref(getShowFullHeaderRef);
+      });
+
+      // updateBy:sunjianlei---updateDate:2021-09-08---根据主题的不同，动态计算tabs高度
+      const getTabsThemeHeight = computed(() => {
+        let tabsTheme = unref(getTabsTheme);
+        if (tabsTheme === TabsThemeEnum.CARD) {
+          return TABS_HEIGHT_CARD;
+        } else if (tabsTheme === TabsThemeEnum.SMOOTH) {
+          return TABS_HEIGHT_SMOOTH;
+        } else {
+          return TABS_HEIGHT;
+        }
+      });
+
+      const getPlaceholderDomStyle = computed((): CSSProperties => {
+        let height = 0;
+        // 代码逻辑说明: 【issues/7561】主题切换为顶部混合模式时，页面顶部内容显示不出来，被遮盖
+        if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader) && !unref(getFullContent) || unref(getMenuType) == MenuTypeEnum.MIX) {
+          height += HEADER_HEIGHT;
+        }
+        if (unref(getShowTabs) && !unref(getFullContent)) {
+          height += unref(getTabsThemeHeight);
+        }
+        setHeaderHeight(height);
+        return {
+          height: `${height}px`,
+        };
+      });
+
+      const getClass = computed(() => {
+        return [prefixCls, `${prefixCls}--${unref(getHeaderTheme)}`, {
+          [`${prefixCls}--fixed`]: unref(getIsFixed),
+          // 【JEECG作为乾坤子应用】
+          [`${prefixCls}--qiankun-micro`]: glob.isQiankunMicro,
+        }];
+      });
+
+      return {
+        glob,
+        getClass,
+        prefixCls,
+        getPlaceholderDomStyle,
+        getIsFixed,
+        getWrapStyle,
+        getIsShowPlaceholderDom,
+        getShowTabs,
+        getShowHeader,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-layout-multiple-header';
+
+  .@{prefix-cls} {
+    transition: width 0.2s;
+    flex: 0 0 auto;
+    // 代码逻辑说明: 【issues/8709】LayoutContent样式多出1px
+    // &--dark {
+    //   margin-left: -1px;
+    // }
+
+    &--fixed {
+      position: fixed;
+      top: 0;
+      z-index: @multiple-tab-fixed-z-index;
+      width: 100%;
+    }
+
+    // 【JEECG作为乾坤子应用】
+    &--qiankun-micro {
+      position: absolute;
+
+      :deep(.@{namespace}-layout-header--qiankun-micro) {
+        width: 100%;
+      }
+    }
+
+  }
+</style>
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
new file mode 100644
index 0000000..2ec637a
--- /dev/null
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -0,0 +1,222 @@
+<template>
+  <div :class="[prefixCls, `${prefixCls}--${theme}`]">
+    <a-breadcrumb :routes="routes">
+      <template #itemRender="{ route, routes: routesMatched, paths }">
+        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
+        <span v-if="!hasRedirect(routesMatched, route)">
+          {{ t(route.name || route.meta.title) }}
+        </span>
+        <router-link v-else to="" @click="handleClick(route, paths, $event)" style="color: inherit">
+          {{ t(route.name || route.meta.title) }}
+        </router-link>
+      </template>
+    </a-breadcrumb>
+  </div>
+</template>
+<script lang="ts">
+  import type { RouteLocationMatched } from 'vue-router';
+  import { useRouter } from 'vue-router';
+  import type { Menu } from '/@/router/types';
+
+  import { defineComponent, ref, watchEffect } from 'vue';
+
+  import { Breadcrumb } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  import { propTypes } from '/@/utils/propTypes';
+  import { isString } from '/@/utils/is';
+  import { filter } from '/@/utils/helper/treeHelper';
+  import { getMenus } from '/@/router/menus';
+
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { getAllParentPath } from '/@/router/helper/menuHelper';
+
+  export default defineComponent({
+    name: 'LayoutBreadcrumb',
+    components: { Icon, [Breadcrumb.name]: Breadcrumb },
+    props: {
+      theme: propTypes.oneOf(['dark', 'light']),
+    },
+    setup() {
+      const routes = ref<RouteLocationMatched[]>([]);
+      const { currentRoute } = useRouter();
+      const { prefixCls } = useDesign('layout-breadcrumb');
+      const { getShowBreadCrumbIcon } = useRootSetting();
+      const go = useGo();
+
+      const { t } = useI18n();
+      watchEffect(async () => {
+        if (currentRoute.value.name === REDIRECT_NAME) return;
+        const menus = await getMenus();
+
+        const routeMatched = currentRoute.value.matched;
+        const cur = routeMatched?.[routeMatched.length - 1];
+        let path = currentRoute.value.path;
+
+        if (cur && cur?.meta?.currentActiveMenu) {
+          path = cur.meta.currentActiveMenu as string;
+        }
+
+        const parent = getAllParentPath(menus, path);
+        const filterMenus = menus.filter((item) => item.path === parent[0]);
+        const matched = getMatched(filterMenus, parent) as any;
+
+        if (!matched || matched.length === 0) return;
+
+        const breadcrumbList = filterItem(matched);
+
+        if (currentRoute.value.meta?.currentActiveMenu) {
+          breadcrumbList.push({
+            ...currentRoute.value,
+            name: currentRoute.value.meta?.title || currentRoute.value.name,
+          } as unknown as RouteLocationMatched);
+        }
+        routes.value = breadcrumbList;
+      });
+
+      function getMatched(menus: Menu[], parent: string[]) {
+        const metched: Menu[] = [];
+        menus.forEach((item) => {
+          if (parent.includes(item.path)) {
+            metched.push({
+              ...item,
+              name: item.meta?.title || item.name,
+            });
+          }
+          if (item.children?.length) {
+            metched.push(...getMatched(item.children, parent));
+          }
+        });
+        return metched;
+      }
+
+      function filterItem(list: RouteLocationMatched[]) {
+        return filter(list, (item) => {
+          const { meta, name } = item;
+          if (!meta) {
+            return !!name;
+          }
+          const { title, hideBreadcrumb } = meta;
+          if (!title || hideBreadcrumb) {
+            return false;
+          }
+          return true;
+        }).filter((item) => !item.meta?.hideBreadcrumb);
+      }
+
+      function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
+        e?.preventDefault();
+        const { children, redirect, meta } = route;
+
+        if (children?.length && !redirect) {
+          e?.stopPropagation();
+          return;
+        }
+        if (meta?.carryParam) {
+          return;
+        }
+
+        if (redirect && isString(redirect)) {
+          go(redirect);
+        } else {
+          let goPath = '';
+          if (paths.length === 1) {
+            goPath = paths[0];
+          } else {
+            const ps = paths.slice(1);
+            const lastPath = ps.pop() || '';
+            goPath = `${lastPath}`;
+          }
+          goPath = /^\//.test(goPath) ? goPath : `/${goPath}`;
+          go(goPath);
+        }
+      }
+
+      function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
+        return routes.indexOf(route) !== routes.length - 1;
+      }
+
+      function getIcon(route) {
+        return route.icon || route.meta?.icon;
+      }
+
+      return { routes, t, prefixCls, getIcon, getShowBreadCrumbIcon, handleClick, hasRedirect };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-breadcrumb';
+
+  .@{prefix-cls} {
+    display: flex;
+    padding: 0 8px;
+    align-items: center;
+
+    .ant-breadcrumb-link {
+      .anticon {
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+    }
+    // 代码逻辑说明: 【QQYUN-8922】面包屑样式调整
+    &--light {
+      .ant-breadcrumb-link {
+        color: rgba(0, 0, 0, 0.85);
+        a {
+          color: rgba(0, 0, 0, 0.85);
+
+          &:hover {
+            color: @primary-color;
+          }
+        }
+      }
+      .ant-breadcrumb-separator,
+      .anticon {
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+  }
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      &--dark {
+        .ant-breadcrumb-link {
+          color: rgba(255, 255, 255, 0.85);
+          a {
+            color: rgba(255, 255, 255, 0.85);
+            &:hover {
+              color: @white;
+            }
+          }
+        }
+        .ant-breadcrumb-separator,
+        .anticon {
+          color: rgba(255, 255, 255, 0.85);
+        }
+      }
+    }
+  }
+  html[data-theme='light'] {
+    .@{prefix-cls} {
+      &--dark {
+        .ant-breadcrumb-link {
+          color: rgba(255, 255, 255, 1);
+          a {
+            color: rgba(255, 255, 255, 1);
+            &:hover {
+              color: @white;
+            }
+          }
+        }
+        .ant-breadcrumb-separator,
+        .anticon {
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/components/ErrorAction.vue b/src/layouts/default/header/components/ErrorAction.vue
new file mode 100644
index 0000000..ff173ae
--- /dev/null
+++ b/src/layouts/default/header/components/ErrorAction.vue
@@ -0,0 +1,43 @@
+<template>
+  <Tooltip :title="t('layout.header.tooltipErrorLog')" placement="bottom" :mouseEnterDelay="0.5" @click="handleToErrorList">
+    <Badge :count="getCount" :offset="[0, 10]" :overflowCount="99">
+      <Icon icon="ion:bug-outline" />
+    </Badge>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { Tooltip, Badge } from 'ant-design-vue';
+  import Icon from '/@/components/Icon';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useErrorLogStore } from '/@/store/modules/errorLog';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'ErrorAction',
+    components: { Icon, Tooltip, Badge },
+
+    setup() {
+      const { t } = useI18n();
+      const { push } = useRouter();
+      const errorLogStore = useErrorLogStore();
+
+      const getCount = computed(() => errorLogStore.getErrorLogListCount);
+
+      function handleToErrorList() {
+        push(PageEnum.ERROR_LOG_PAGE).then(() => {
+          errorLogStore.setErrorLogListCount(0);
+        });
+      }
+
+      return {
+        t,
+        getCount,
+        handleToErrorList,
+      };
+    },
+  });
+</script>
diff --git a/src/layouts/default/header/components/FullScreen.vue b/src/layouts/default/header/components/FullScreen.vue
new file mode 100644
index 0000000..9efbfab
--- /dev/null
+++ b/src/layouts/default/header/components/FullScreen.vue
@@ -0,0 +1,35 @@
+<template>
+  <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
+    <span @click="toggle">
+      <FullscreenOutlined v-if="!isFullscreen" />
+      <FullscreenExitOutlined v-else />
+    </span>
+  </Tooltip>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useFullscreen } from '@vueuse/core';
+
+  import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'FullScreen',
+    components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
+
+    setup() {
+      const { t } = useI18n();
+      const { toggle, isFullscreen } = useFullscreen();
+
+      const getTitle = computed(() => {
+        return unref(isFullscreen) ? t('layout.header.tooltipExitFull') : t('layout.header.tooltipEntryFull');
+      });
+
+      return {
+        getTitle,
+        isFullscreen,
+        toggle,
+      };
+    },
+  });
+</script>
diff --git a/src/layouts/default/header/components/LockScreen.vue b/src/layouts/default/header/components/LockScreen.vue
new file mode 100644
index 0000000..f7efc36
--- /dev/null
+++ b/src/layouts/default/header/components/LockScreen.vue
@@ -0,0 +1,46 @@
+<template>
+  <Tooltip :title="t('layout.header.tooltipLock')" placement="bottom" :mouseEnterDelay="0.5" @click="handleLock">
+    <LockOutlined />
+  </Tooltip>
+  <LockModal ref="modalRef" v-if="lockModalVisible" @register="register" />
+</template>
+<script lang="ts">
+  import { defineComponent, computed, ref } from 'vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { Tooltip } from 'ant-design-vue';
+  import { LockOutlined } from '@ant-design/icons-vue';
+  import Icon from '/@/components/Icon';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useModal } from '/@/components/Modal';
+  import { getRefPromise } from '/@/utils/index';
+
+  export default defineComponent({
+    name: 'LockScreen',
+    inheritAttrs: false,
+    components: {
+      Icon,
+      Tooltip,
+      LockOutlined,
+      LockModal: createAsyncComponent(() => import('./lock/LockModal.vue')),
+    },
+    setup() {
+      const { t } = useI18n();
+      const [register, { openModal }] = useModal();
+      // 代码逻辑说明: 【QQYUN-6333】空路由问题—首次访问资源太大
+      const lockModalVisible = ref(false);
+      const modalRef = ref(null);
+      async function handleLock() {
+        lockModalVisible.value = true;
+        await getRefPromise(modalRef);
+        openModal(true);
+      }
+      return {
+        t,
+        register,
+        handleLock,
+        lockModalVisible,
+        modalRef,
+      };
+    },
+  });
+</script>
diff --git a/src/layouts/default/header/components/index.ts b/src/layouts/default/header/components/index.ts
new file mode 100644
index 0000000..1256a19
--- /dev/null
+++ b/src/layouts/default/header/components/index.ts
@@ -0,0 +1,16 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import FullScreen from './FullScreen.vue';
+
+export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {
+  loading: true,
+});
+
+export const LayoutBreadcrumb = createAsyncComponent(() => import('./Breadcrumb.vue'));
+
+export const Notify = createAsyncComponent(() => import('./notify/index.vue'));
+
+export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue'));
+
+export const LockScreen = createAsyncComponent(() => import('./LockScreen.vue'));
+
+export { FullScreen };
diff --git a/src/layouts/default/header/components/lock/LockModal.vue b/src/layouts/default/header/components/lock/LockModal.vue
new file mode 100644
index 0000000..664ab6c
--- /dev/null
+++ b/src/layouts/default/header/components/lock/LockModal.vue
@@ -0,0 +1,124 @@
+<template>
+  <BasicModal :footer="null" :title="t('layout.header.lockScreen')" v-bind="$attrs" :class="prefixCls" @register="register" :canFullscreen="false">
+    <div :class="`${prefixCls}__entry`">
+      <div :class="`${prefixCls}__header`">
+        <img :src="avatar" :class="`${prefixCls}__header-img`" />
+        <p :class="`${prefixCls}__header-name`">
+          {{ getRealName }}
+        </p>
+      </div>
+
+      <BasicForm @register="registerForm" />
+
+      <div :class="`${prefixCls}__footer`">
+        <a-button type="primary" block class="mt-2" @click="handleLock">
+          {{ t('layout.header.lockScreenBtn') }}
+        </a-button>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { BasicModal, useModalInner } from '/@/components/Modal/index';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  import { useForm } from '/@/components/Form/src/hooks/useForm';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { useLockStore } from '/@/store/modules/lock';
+  import headerImg from '/@/assets/images/header.jpg';
+  export default defineComponent({
+    name: 'LockModal',
+    components: { BasicModal, BasicForm },
+
+    setup() {
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('header-lock-modal');
+      const userStore = useUserStore();
+      const lockStore = useLockStore();
+
+      const getRealName = computed(() => userStore.getUserInfo?.realname);
+      const [register, { closeModal }] = useModalInner();
+
+      const [registerForm, { validateFields, resetFields }] = useForm({
+        // 代码逻辑说明: 【QQYUN-8895】锁屏样式修改---
+        labelWidth: 74,
+        labelAlign:'left',
+        wrapperCol:{},
+        showActionButtonGroup: false,
+        schemas: [
+          {
+            field: 'password',
+            label: t('layout.header.lockScreenPassword'),
+            component: 'InputPassword',
+            componentProps: {
+              autocomplete: "new-password",
+            },
+          },
+        ],
+      });
+
+      async function handleLock() {
+        const values = (await validateFields()) as any;
+        const password: string | undefined = values.password;
+        closeModal();
+
+        lockStore.setLockInfo({
+          isLock: true,
+          pwd: password,
+        });
+        await resetFields();
+      }
+
+      const avatar = computed(() => {
+        const { avatar } = userStore.getUserInfo;
+        return avatar || headerImg;
+      });
+
+      return {
+        t,
+        prefixCls,
+        getRealName,
+        register,
+        registerForm,
+        handleLock,
+        avatar,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-header-lock-modal';
+
+  .@{prefix-cls} {
+    &__entry {
+      position: relative;
+      //height: 240px;
+      padding: 130px 30px 30px 30px;
+      border-radius: 10px;
+    }
+
+    &__header {
+      position: absolute;
+      top: 0;
+      left: calc(50% - 45px);
+      width: auto;
+      text-align: center;
+
+      &-img {
+        width: 70px;
+        border-radius: 50%;
+      }
+
+      &-name {
+        margin-top: 5px;
+      }
+    }
+
+    &__footer {
+      text-align: center;
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/components/notify/ChangePasswordModal.vue b/src/layouts/default/header/components/notify/ChangePasswordModal.vue
new file mode 100644
index 0000000..f1ccbf5
--- /dev/null
+++ b/src/layouts/default/header/components/notify/ChangePasswordModal.vue
@@ -0,0 +1,207 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    :width="500"
+    @ok="handleSubmit"
+    :keyboard="false"
+    :maskClosable="false"
+    :closable="false"
+    :bodyStyle="{ padding: '10px 20px 20px 20px' }"
+    :ok-button-props="{ loading: confirmLoading }"
+    :cancel-button-props="{ style: { display: 'none' } }"
+    destroyOnClose
+  >
+    <div>
+      <span class="pwd-topbar">您当前密码和系统密码一致，请修改密码！</span>
+      <BasicForm @register="registerForm" />
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { rules } from '@/utils/helper/validator';
+  import { defHttp } from '@/utils/http/axios';
+  import { useUserStore } from '@/store/modules/user';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { t } = useI18n();
+  const { createMessage } = useMessage();
+  const confirmLoading = ref(false);
+  const oldPassword = ref('');
+
+  // 判断密码是否为连续的数字或字母
+  function lxStr (password) {
+    let arr = password.split('');
+    let flag = true;
+    for (let i = 1; i < arr.length - 1; i++) {
+      let firstIndex = arr[i - 1].charCodeAt();
+      let secondIndex = arr[i].charCodeAt();
+      let thirdIndex = arr[i + 1].charCodeAt();
+      thirdIndex - secondIndex == 1;
+      secondIndex - firstIndex == 1;
+      if ((thirdIndex - secondIndex === 1) && (secondIndex - firstIndex === 1)) {
+        flag = false;
+      }
+    }
+    if (!flag) {
+      return flag
+    }
+    return flag
+  }
+  
+  // 表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: [
+      {
+        label: t('layout.changePassword.newPassword'),
+        field: 'password',
+        component: 'StrengthMeter',
+        componentProps: {
+          placeholder: t('layout.changePassword.pleaseEnterNewPassword'),
+        },
+        rules: [
+          {
+            required: true,
+            message: t('layout.changePassword.pleaseEnterNewPassword'),
+          },
+          {
+            validator:(_, value)=>{
+              if(!value){
+                return Promise.resolve();
+              }
+              //不能使用系统密码作为新密码
+              if(value === oldPassword.value){
+                return Promise.reject('不能使用系统密码作为新密码!');
+              }
+              //密码由8位数字、大小写字母和特殊符号组成
+              let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
+              if(!reg.test(value)){
+                return Promise.reject('密码由 8 位及以上数字、大小写字母和特殊符号组成！');
+              }
+              return Promise.resolve();
+            }
+          },
+          /* {
+             // 使用一个函数来自定义验证逻辑，客户使用这个
+             validator: (_, value) => {
+               // 如果密码为空，直接返回 resolve() 让 required 规则去处理
+               if (!value) {
+                 return Promise.resolve();
+               }
+               //不能使用系统密码作为新密码
+               if(value === oldPassword.value){
+                 return Promise.reject('不能使用系统密码作为新密码!');
+               }
+               // 1. 长度不低于8位
+               if (value.length < 8) {
+                 return Promise.reject('密码长度不能少于8位');
+               }
+               // 2. 必须包含数字、字母大小写、特殊字符
+               // 使用正则表达式进行匹配
+               const hasNumber = /[0-9]/.test(value);
+               const hasLowercase = /[a-z]/.test(value);
+               const hasUppercase = /[A-Z]/.test(value);
+               const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~`]/.test(value);
+               if (!(hasNumber && hasLowercase && hasUppercase && hasSpecialChar)) {
+                 return Promise.reject('密码必须包含数字、大小写字母和特殊字符');
+               }
+               if(!lxStr(value)){
+                 return Promise.reject('密码不能出现3位及3为以上的数字或字母');
+               }
+               //不能相同字符（如111、aaa）连续3位或3位以上
+               const reg2 = /(\w)*(\w)\2{2}(\w)*!/g
+               if (reg2.test(value)) {
+                 console.log('密码不能出现相同字符连续3位或3位以上')
+                 return false
+               }
+               // 如果所有规则都通过，返回 resolve()
+               return Promise.resolve();
+             }
+           }*/
+        ],
+      },
+      {
+        label: t('layout.changePassword.confirmNewPassword'),
+        field: 'confirmpassword',
+        component: 'InputPassword',
+        dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+      },
+    ],
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    oldPassword.value = decodeURIComponent(data.oldPassword)
+  });
+
+  const getTitle = computed(() => '修改密码');
+  const userStore = useUserStore();
+  const { createMessage: $message } = useMessage();
+
+  
+  
+  // 提交处理
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      let params = Object.assign({ username: userStore.getUserInfo.username, oldpassword: oldPassword.value }, values);
+      defHttp.put({ url: '/sys/user/updatePassword', params }, { isTransformResponse: false }).then((res) => {
+        if (res.success) {
+            $message.info({
+              content:'密码修改成功，请重新登录！2s后自动退出登录',
+              duration: 2
+            })
+            //3s后返回登录页面
+            setTimeout(()=>{
+              userStore.logout(true);
+            },2000)
+            //关闭弹窗
+            closeModal();
+          //关闭弹窗
+          closeModal();
+        } else {
+          $message.warning(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-form-item) {
+    margin-bottom: 20px;
+  }
+  .pwd-topbar{
+    width: 400px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: linear-gradient(90deg, #fff7e6, #fff1b8);
+    border: 1px solid #ffd591;
+    border-left: 0;
+    border-right: 0;
+    color: #ad6800;
+    position: relative;
+    margin-bottom: 10px;
+    left: 36px;
+  }
+</style>
diff --git a/src/layouts/default/header/components/notify/NoticeList.vue b/src/layouts/default/header/components/notify/NoticeList.vue
new file mode 100644
index 0000000..de42306
--- /dev/null
+++ b/src/layouts/default/header/components/notify/NoticeList.vue
@@ -0,0 +1,232 @@
+<template>
+  <a-list :class="prefixCls" :pagination="getPagination">
+    <template v-for="item in getData" :key="item.id">
+      <a-list-item class="list-item" @click="handleTitleClick(item)" :style="{ cursor: isTitleClickable ? 'pointer' : '' }">
+        <a-list-item-meta>
+          <template #title>
+            <div class="title">
+              <a-typography-paragraph
+                style="width: 100%; margin-bottom: 0 !important"
+                :delete="!!item.titleDelete"
+                :ellipsis="$props.titleRows && $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: !!item.title } : false"
+                :content="item.title"
+              />
+              <div class="extra" v-if="item.extra">
+                <a-tag class="tag" :color="item.color">
+                  {{ item.extra }}
+                </a-tag>
+              </div>
+            </div>
+          </template>
+
+          <template #avatar>
+            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <template v-else-if="item.priority">
+              <a-avatar v-if="item.priority === PriorityTypes.L" class="avatar priority-L" title="一般消息">
+                <template #icon>
+                  <Icon icon="entypo:info" />
+                </template>
+              </a-avatar>
+              <a-avatar v-if="item.priority === PriorityTypes.M" class="avatar priority-M" title="重要消息">
+                <template #icon>
+                  <Icon icon="bi:exclamation-lg" />
+                </template>
+              </a-avatar>
+              <a-avatar v-if="item.priority === PriorityTypes.H" class="avatar priority-H" title="紧急消息">
+                <template #icon>
+                  <Icon icon="ant-design:warning-filled" />
+                </template>
+              </a-avatar>
+            </template>
+            <span v-else> {{ item.avatar }}</span>
+          </template>
+
+          <template #description>
+            <div>
+              <div class="description" v-if="item.description">
+                <a-typography-paragraph
+                  style="width: 100%; margin-bottom: 0 !important"
+                  :ellipsis="$props.descRows && $props.descRows > 0 ? { rows: $props.descRows, tooltip: !!item.description } : false"
+                  :content="item.description"
+                />
+              </div>
+              <div class="datetime">
+                <Time :value="item.datetime" :title="item.datetime" />
+              </div>
+            </div>
+          </template>
+        </a-list-item-meta>
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
+  import { PriorityTypes, ListItem } from './data';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { List, Avatar, Tag, Typography } from 'ant-design-vue';
+  import { Time } from '/@/components/Time';
+  import { isNumber } from '/@/utils/is';
+  export default defineComponent({
+    components: {
+      [Avatar.name]: Avatar,
+      [List.name]: List,
+      [List.Item.name]: List.Item,
+      AListItemMeta: List.Item.Meta,
+      ATypographyParagraph: Typography.Paragraph,
+      [Tag.name]: Tag,
+      Time,
+    },
+    props: {
+      list: {
+        type: Array as PropType<ListItem[]>,
+        default: () => [],
+      },
+      pageSize: {
+        type: [Boolean, Number] as PropType<Boolean | Number>,
+        default: 5,
+      },
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      titleRows: {
+        type: Number,
+        default: 1,
+      },
+      descRows: {
+        type: Number,
+        default: 1,
+      },
+      onTitleClick: {
+        type: Function as PropType<(Recordable) => void>,
+      },
+    },
+    emits: ['update:currentPage'],
+    setup(props, { emit }) {
+      const { prefixCls } = useDesign('header-notify-list');
+      const current = ref(props.currentPage || 1);
+      const getData = computed(() => {
+        const { pageSize, list } = props;
+        if (pageSize === false) return [];
+        let size = isNumber(pageSize) ? pageSize : 5;
+        return list.slice(size * (unref(current) - 1), size * unref(current));
+      });
+      watch(
+        () => props.currentPage,
+        (v) => {
+          current.value = v;
+        }
+      );
+      const isTitleClickable = computed(() => !!props.onTitleClick);
+      const getPagination = computed(() => {
+        const { list, pageSize } = props;
+        if (pageSize > 0 && list && list.length > pageSize) {
+          return {
+            total: list.length,
+            pageSize,
+            //size: 'small',
+            current: unref(current),
+            onChange(page) {
+              current.value = page;
+              emit('update:currentPage', page);
+            },
+          };
+        } else {
+          return false;
+        }
+      });
+
+      function handleTitleClick(item: ListItem) {
+        props.onTitleClick && props.onTitleClick(item);
+      }
+
+      return {
+        prefixCls,
+        getPagination,
+        getData,
+        handleTitleClick,
+        isTitleClickable,
+        PriorityTypes,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-header-notify-list';
+
+  .@{prefix-cls} {
+    width: 340px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    :deep(.ant-pagination-disabled) {
+      display: inline-block !important;
+    }
+
+    &-item {
+      padding: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      .title {
+        margin-bottom: 8px;
+        font-weight: normal;
+
+        .extra {
+          float: right;
+          margin-top: -1.5px;
+          margin-right: 0;
+          font-weight: normal;
+
+          .tag {
+            margin-right: 0;
+          }
+        }
+
+        .avatar {
+          margin-top: 4px;
+        }
+
+        .description {
+          font-size: 12px;
+          line-height: 18px;
+        }
+
+        .datetime {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+
+    .list-item {
+      .priority-L,
+      .priority-M,
+      .priority-H {
+        font-size: 12px;
+      }
+
+      .priority-L {
+        background-color: #7cd1ff;
+      }
+
+      .priority-M {
+        background-color: #ffa743;
+      }
+
+      .priority-H {
+        background-color: #f8766c;
+      }
+
+      .description {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/components/notify/data.ts b/src/layouts/default/header/components/notify/data.ts
new file mode 100644
index 0000000..0570923
--- /dev/null
+++ b/src/layouts/default/header/components/notify/data.ts
@@ -0,0 +1,206 @@
+export interface ListItem {
+  id: string;
+  avatar: string;
+  // 通知的标题内容
+  title: string;
+  // 是否在标题上显示删除线
+  titleDelete?: boolean;
+  datetime: string;
+  type: string;
+  read?: boolean;
+  description: string;
+  clickClose?: boolean;
+  extra?: string;
+  color?: string;
+  // 优先级
+  priority?: string;
+}
+
+export enum PriorityTypes {
+  // 低优先级，一般消息
+  L = 'L',
+  // 中优先级，重要消息
+  M = 'M',
+  // 高优先级，紧急消息
+  H = 'H',
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  list: ListItem[];
+  unreadlist?: ListItem[];
+  count: number;
+}
+
+export const tabListData: TabItem[] = [
+  {
+    key: '1',
+    name: '通知',
+    list: [
+      {
+        id: '000000001',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+        title: '你收到了 14 份新周报',
+        description: '',
+        datetime: '2017-08-09',
+        type: '1',
+      },
+      {
+        id: '000000002',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+        title: '你推荐的 曲妮妮 已通过第三轮面试',
+        description: '',
+        datetime: '2017-08-08',
+        type: '1',
+      },
+      {
+        id: '000000003',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+        title: '这种模板可以区分多种通知类型',
+        description: '',
+        datetime: '2017-08-07',
+        // read: true,
+        type: '1',
+      },
+      {
+        id: '000000004',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000005',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000006',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000007',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000008',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000009',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000010',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+    ],
+    count: 0,
+  },
+  {
+    key: '2',
+    name: '系统消息',
+    list: [
+      {
+        id: '000000006',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+        title: '曲丽丽 评论了你',
+        description: '描述信息描述信息描述信息',
+        datetime: '2017-08-07',
+        type: '2',
+        clickClose: true,
+      },
+      {
+        id: '000000007',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+        title: '朱偏右 回复了你',
+        description: '这种模板用于提醒谁与你发生了互动',
+        datetime: '2017-08-07',
+        type: '2',
+        clickClose: true,
+      },
+      {
+        id: '000000008',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+        title: '标题',
+        description:
+          '请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容',
+        datetime: '2017-08-07',
+        type: '2',
+        clickClose: true,
+      },
+    ],
+    count: 0,
+  },
+  // {
+  //   key: '3',
+  //   name: '待办',
+  //   list: [
+  //     {
+  //       id: '000000009',
+  //       avatar: '',
+  //       title: '任务名称',
+  //       description: '任务需要在 2017-01-12 20:00 前启动',
+  //       datetime: '',
+  //       extra: '未开始',
+  //       color: '',
+  //       type: '3',
+  //     },
+  //     {
+  //       id: '000000010',
+  //       avatar: '',
+  //       title: '第三方紧急代码变更',
+  //       description: '冠霖 需在 2017-01-07 前完成代码变更任务',
+  //       datetime: '',
+  //       extra: '马上到期',
+  //       color: 'red',
+  //       type: '3',
+  //     },
+  //     {
+  //       id: '000000011',
+  //       avatar: '',
+  //       title: '信息安全考试',
+  //       description: '指派竹尔于 2017-01-09 前完成更新并发布',
+  //       datetime: '',
+  //       extra: '已耗时 8 天',
+  //       color: 'gold',
+  //       type: '3',
+  //     },
+  //     {
+  //       id: '000000012',
+  //       avatar: '',
+  //       title: 'ABCD 版本发布',
+  //       description: '指派竹尔于 2017-01-09 前完成更新并发布',
+  //       datetime: '',
+  //       extra: '进行中',
+  //       color: 'blue',
+  //       type: '3',
+  //     },
+  //   ],
+  // },
+];
diff --git a/src/layouts/default/header/components/notify/index.vue b/src/layouts/default/header/components/notify/index.vue
new file mode 100644
index 0000000..154c921
--- /dev/null
+++ b/src/layouts/default/header/components/notify/index.vue
@@ -0,0 +1,376 @@
+<template>
+  <div :class="prefixCls">
+    <Badge :count="messageCount" :overflowCount="9" :offset="[-4, 18]" :numberStyle="numberStyle" @click="clickBadge('')">
+      <BellOutlined />
+    </Badge>
+
+    <DynamicNotice ref="dynamicNoticeRef" v-bind="dynamicNoticeProps" />
+    <DetailModal @register="registerDetail" />
+
+    <sys-message-modal @register="registerMessageModal" @refresh="reloadCount" :messageCount="messageCount"></sys-message-modal>
+    <!--  修改密码弹窗  -->
+    <ChangePasswordModal @register="changePwdModal"></ChangePasswordModal>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, reactive, onMounted, getCurrentInstance } from 'vue';
+  import { Popover, Tabs, Badge } from 'ant-design-vue';
+  import { BellOutlined } from '@ant-design/icons-vue';
+  // import { tabListData } from './data';
+  import { getUnreadMessageCount, editCementSend, clearAllUnReadMessage } from './notify.api';
+  import NoticeList from './NoticeList.vue';
+  import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
+  import DynamicNotice from '/@/views/monitor/mynews/DynamicNotice.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useUserStore } from '/@/store/modules/user';
+  import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
+  import { readAllMsg } from '/@/views/monitor/mynews/mynews.api';
+  import { getToken } from '/@/utils/auth';
+  import md5 from 'crypto-js/md5';
+  import { useRouter } from 'vue-router';
+
+  import SysMessageModal from '/@/views/system/message/components/SysMessageModal.vue'
+  import ChangePasswordModal from './ChangePasswordModal.vue'
+  import { ElectronEnum } from '/@/enums/jeecgEnum';
+  import { defHttp } from "@/utils/http/axios";
+
+  export default defineComponent({
+    components: {
+      Popover,
+      BellOutlined,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      Badge,
+      NoticeList,
+      DetailModal,
+      DynamicNotice,
+      SysMessageModal,
+      ChangePasswordModal,
+    },
+    setup() {
+      const { prefixCls } = useDesign('header-notify');
+      const instance: any = getCurrentInstance();
+      const userStore = useUserStore();
+      const glob = useGlobSetting();
+      const dynamicNoticeProps = reactive({ path: '', formData: {} });
+      const [registerDetail, detailModal] = useModal();
+      const router = useRouter();
+      // const listData = ref(tabListData);
+      // const count = computed(() => {
+      //   let count = 0;
+      //   for (let i = 0; i < listData.value.length; i++) {
+      //     count += listData.value[i].count;
+      //   }
+      //   return count;
+      // });
+      const chatRef = ref();
+
+      const [registerMessageModal, { openModal: openMessageModal }] = useModal();
+      const [registerBookModal, { openModal: openBookModal }] = useModal();
+      const [changePwdModal, { openModal: openPwdModal }] = useModal();
+      //通知消息类型
+      const noticeType = ref<string>('system');
+      //未读消息
+      const unReadNum = ref<any>({});
+      
+      function clickBadge(value){
+        // //消息列表弹窗前去除角标
+        // for (let i = 0; i < listData.value.length; i++) {
+        //   listData.value[i].count = 0;
+        // }
+        // 代码逻辑说明: 【QQYUN-12162】OA项目改造，系统重消息拆分，目前消息都在一起 需按分类进行拆分---
+        openMessageModal(true, { noticeType: value })
+      }
+
+      const popoverVisible = ref<boolean>(false);
+      onMounted(() => {
+       initWebSocket();
+      });
+
+      const messageCount = ref<number>(0)
+      function mapAnnouncement(item) {
+        return {
+          ...item,
+          title: item.titile,
+          description: item.msgAbstract,
+          datetime: item.sendTime,
+        };
+      }
+
+      // 获取系统消息
+      async function loadData() {
+        try {
+          // let { anntMsgList, sysMsgList, anntMsgTotal, sysMsgTotal } = await listCementByUser({
+          //   pageSize: 5,
+          // });
+          // listData.value[0].list = anntMsgList.map(mapAnnouncement);
+          // listData.value[1].list = sysMsgList.map(mapAnnouncement);
+          // listData.value[0].count = anntMsgTotal;
+          // listData.value[1].count = sysMsgTotal;
+          //let msgCount = anntMsgTotal+sysMsgTotal;
+          let msgCount =  await getUnreadMessageCount();
+          // 代码逻辑说明: 【QQYUN-12162】OA项目改造，系统重消息拆分，目前消息都在一起 需按分类进行拆分---
+          unReadNum.value = msgCount;
+          messageCount.value = msgCount.count?msgCount.count:0;
+          // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+          if (glob.isElectronPlatform) {
+            window[ElectronEnum.ELECTRON_API].sendNotifyFlash(messageCount.value);
+            window[ElectronEnum.ELECTRON_API].trayFlash();
+          }
+        } catch (e) {
+          console.warn('系统消息通知异常：', e);
+        }
+      }
+
+      loadData();
+
+      function onNoticeClick(record) {
+        try {
+          editCementSend(record.id);
+          loadData();
+        } catch (e) {
+          console.error(e);
+        }
+        if (record.openType === 'component') {
+          dynamicNoticeProps.path = record.openPage;
+          dynamicNoticeProps.formData = { id: record.busId };
+          instance.refs.dynamicNoticeRef?.detail(record.openPage);
+        } else {
+          detailModal.openModal(true, {
+            record,
+            isUpdate: true,
+          });
+        }
+        popoverVisible.value = false;
+      }
+
+      // 初始化 WebSocket
+      function initWebSocket() {
+        let token = getToken();
+        //将登录token生成一个短的标识
+        let wsClientId = md5(token);
+        let userId = unref(userStore.getUserInfo).id + "_" + wsClientId;
+        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+        let url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;
+        connectWebSocket(url);
+        onWebSocket(onWebSocketMessage);
+      }
+
+      function onWebSocketMessage(data) {
+        if (data.cmd === 'topic' || data.cmd === 'user') {
+          // 代码逻辑说明: VUEN-1674【严重bug】系统通知，为什么必须刷新右上角才提示
+          if(data.noticeType){
+            noticeType.value = data.noticeType;
+          }
+          //后台保存数据太慢 前端延迟刷新消息
+          setTimeout(()=>{
+            // 代码逻辑说明: 【JHHB-13】桌面应用消息通知
+            notification(data);
+            loadData();
+          }, 1000)
+        }
+      }
+      // 桌面应用通知
+      function notification(data) {
+        if (glob.isElectronPlatform && (data.noticeType || data.cmd == 'email')) {
+          // 流程、文件、日程、系统、会议
+          // flow、file、plan、system、meeting
+          let title = '';
+          let msgTxt = '';
+          let path = '';
+          if (data.noticeType === 'flow') {
+            title = '流程';
+            path = '/task/myHandleTaskInfo';
+          } else if (data.noticeType === 'file') {
+            title = '文件';
+            path = '/file';
+          } else if (data.noticeType === 'plan') {
+            title = '日程';
+            path = '/plan/view';
+          } else if (data.noticeType === 'system') {
+            title = '系统';
+            path = '/monitor/mynews';
+          } else if (data.noticeType === 'meeting') {
+            title = '会议';
+            path = '/meeting';
+          } else if (data.cmd === 'email') {
+            title = '邮件';
+            path = '/eoa/email?type=inbox';
+          }
+          msgTxt = data.msgTxt ?? '查看详情';
+          window[ElectronEnum.ELECTRON_API].sendNotification(`有新的${title}消息`, msgTxt, path);
+        }
+      }
+      // 清空消息
+      function onEmptyNotify() {
+        popoverVisible.value = false;
+        readAllMsg({}, loadData);
+      }
+      async function reloadCount(id){
+        try {
+          await editCementSend(id);
+          await loadData();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+
+      /**
+       * 获取消息未读数
+       */
+      function getSystemUnreadNum() {
+      }
+
+      function clickAddressBook() {
+        openBookModal(true,{})
+      }
+
+      /**
+       * 清除全部未读消息
+       */
+      function clearAllUnMessage() {
+        clearAllUnReadMessage().then((res) =>{
+          if(res.success){
+            loadData();
+          }
+        })
+      }
+
+      //验证是否为默认密码
+      verifyIzDefaultPwd();
+      
+      /**
+       * 验证是否为默认密码
+       */
+      function verifyIzDefaultPwd() {
+        defHttp.get({ url: "/sys/user/verifyIzDefaultPwd" } ,{ isTransformResponse: false }).then((res) =>{
+          if(res.success){
+            if(res.message.indexOf('yes') != -1){
+              openPwdModal(true,{
+                oldPassword: res.message.split("_")[1]
+              })
+            }
+          }
+        })
+      }
+
+      return {
+        prefixCls,
+        // listData,
+        // count,
+        clickBadge,
+        registerMessageModal,
+        reloadCount,
+        onNoticeClick,
+        onEmptyNotify,
+        numberStyle: {},
+        popoverVisible,
+        registerDetail,
+        dynamicNoticeProps,
+        chatRef,
+        getSystemUnreadNum,
+        clickAddressBook,
+        registerBookModal,
+        messageCount,
+        clearAllUnMessage,
+        changePwdModal,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-header-notify';
+
+  .@{prefix-cls} {
+  /*  padding-top: 2px;*/
+
+    &__overlay {
+      max-width: 340px;
+
+      .ant-popover-inner-content {
+        padding: 0;
+      }
+
+      .ant-tabs-nav {
+        margin-bottom: 12px;
+      }
+
+      .ant-list-item {
+        padding: 12px 24px;
+        transition: background-color 300ms;
+
+      }
+
+      .bottom-buttons {
+        text-align: center;
+        border-top: 1px solid #f0f0f0;
+        height: 42px;
+
+        .ant-btn {
+          border: 0;
+          height: 100%;
+
+          &:first-child {
+            border-right: 1px solid #f0f0f0;
+          }
+        }
+      }
+    }
+
+    .ant-tabs-content {
+      width: 300px;
+    }
+
+    .ant-badge {
+      font-size: 18px;
+
+      .ant-badge-count {
+        @badget-size: 16px;
+        width: @badget-size;
+        height: @badget-size;
+        min-width: @badget-size;
+        line-height: @badget-size;
+        padding: 0;
+
+        .ant-scroll-number-only > p.ant-scroll-number-only-unit {
+          font-size: 14px;
+          height: @badget-size;
+        }
+      }
+
+      .ant-badge-multiple-words {
+        padding: 0 0 0 2px;
+        font-size: 12px;
+      }
+
+      svg {
+        width: 0.9em;
+      }
+    }
+  }
+
+  // 兼容黑暗模式
+  [data-theme='dark'] .@{prefix-cls} {
+    &__overlay {
+      .ant-list-item {
+        &:hover {
+          background-color: #111b26;
+        }
+      }
+
+      .bottom-buttons {
+        border-top: 1px solid #303030;
+
+        .ant-btn {
+          &:first-child {
+            border-right: 1px solid #303030;
+          }
+        }
+      }
+    }
+  }
+
+</style>
diff --git a/src/layouts/default/header/components/notify/index_old.vue b/src/layouts/default/header/components/notify/index_old.vue
new file mode 100644
index 0000000..a2e62c2
--- /dev/null
+++ b/src/layouts/default/header/components/notify/index_old.vue
@@ -0,0 +1,270 @@
+<template>
+  <div :class="prefixCls">
+    <Popover v-model:open="popoverVisible" title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
+      <Badge :count="count" :overflowCount="9" :offset="[-4, 10]" :numberStyle="numberStyle">
+        <BellOutlined />
+      </Badge>
+      <template #content>
+        <Tabs>
+          <template v-for="item in listData" :key="item.key">
+            <TabPane>
+              <template #tab>
+                {{ item.name }}
+                <span v-if="item.list.length !== 0">({{ item.count }})</span>
+              </template>
+              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
+              <NoticeList :list="item.list" @title-click="onNoticeClick" />
+            </TabPane>
+          </template>
+        </Tabs>
+        <a-row class="bottom-buttons">
+          <a-col :span="count === 0 ? 0 : 12">
+            <a-button @click="onEmptyNotify" type="dashed" block>清空消息</a-button>
+          </a-col>
+          <a-col :span="count === 0 ? 24 : 12">
+            <a-button @click="popoverVisible = false" type="dashed" block>
+              <router-link to="/monitor/mynews">查看更多</router-link>
+            </a-button>
+          </a-col>
+        </a-row>
+      </template>
+    </Popover>
+    <DynamicNotice ref="dynamicNoticeRef" v-bind="dynamicNoticeProps" />
+    <DetailModal @register="registerDetail" />
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue';
+  import { Popover, Tabs, Badge } from 'ant-design-vue';
+  import { BellOutlined } from '@ant-design/icons-vue';
+  import { tabListData } from './data';
+  import { listCementByUser, editCementSend } from './notify.api';
+  import NoticeList from './NoticeList.vue';
+  import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
+  import DynamicNotice from '/@/views/monitor/mynews/DynamicNotice.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useUserStore } from '/@/store/modules/user';
+  import { connectWebSocket, onWebSocket, result } from '/@/hooks/web/useWebSocket';
+  import { readAllMsg } from '/@/views/monitor/mynews/mynews.api';
+  import { getToken } from '/@/utils/auth';
+  export default defineComponent({
+    components: {
+      Popover,
+      BellOutlined,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      Badge,
+      NoticeList,
+      DetailModal,
+      DynamicNotice,
+    },
+    setup() {
+      const { prefixCls } = useDesign('header-notify');
+      const instance: any = getCurrentInstance();
+      const userStore = useUserStore();
+      const glob = useGlobSetting();
+      const dynamicNoticeProps = reactive({ path: '', formData: {} });
+      const [registerDetail, detailModal] = useModal();
+      const popoverVisible = ref<boolean>(false);
+      const listData = ref(tabListData);
+      listData.value[0].list = [];
+      listData.value[1].list = [];
+      listData.value[0].count = 0;
+      listData.value[1].count = 0;
+
+      onMounted(() => {
+        initWebSocket();
+      });
+
+      const count = computed(() => {
+        let count = 0;
+        for (let i = 0; i < listData.value.length; i++) {
+          count += listData.value[i].count;
+        }
+        return count;
+      });
+
+      function mapAnnouncement(item) {
+        return {
+          ...item,
+          title: item.titile,
+          description: item.msgAbstract,
+          datetime: item.sendTime,
+        };
+      }
+
+      // 获取系统消息
+      async function loadData() {
+        try {
+          let { anntMsgList, sysMsgList, anntMsgTotal, sysMsgTotal } = await listCementByUser({
+            pageSize: 5,
+          });
+          listData.value[0].list = anntMsgList.map(mapAnnouncement);
+          listData.value[1].list = sysMsgList.map(mapAnnouncement);
+          listData.value[0].count = anntMsgTotal;
+          listData.value[1].count = sysMsgTotal;
+        } catch (e) {
+          console.warn('系统消息通知异常：', e);
+        }
+      }
+
+      loadData();
+
+      function onNoticeClick(record) {
+        try {
+          editCementSend(record.id);
+          loadData();
+        } catch (e) {
+          console.error(e);
+        }
+        if (record.openType === 'component') {
+          dynamicNoticeProps.path = record.openPage;
+          dynamicNoticeProps.formData = { id: record.busId };
+          instance.refs.dynamicNoticeRef?.detail(record.openPage);
+        } else {
+          detailModal.openModal(true, {
+            record,
+            isUpdate: true,
+          });
+        }
+        popoverVisible.value = false;
+      }
+
+      // 初始化 WebSocket
+      function initWebSocket() {
+        let userId = unref(userStore.getUserInfo).id;
+        let token = getToken();
+        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+        let url = glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId;
+        connectWebSocket(url);
+        onWebSocket(onWebSocketMessage);
+      }
+
+      function onWebSocketMessage(data) {
+        console.log('---onWebSocketMessage---', data)
+        if (data.cmd === 'topic' || data.cmd === 'user') {
+          //后台保存数据太慢 前端延迟刷新消息
+          setTimeout(()=>{
+            loadData();
+          }, 1000)
+        }
+      }
+
+      // 清空消息
+      function onEmptyNotify() {
+        popoverVisible.value = false;
+        readAllMsg({}, loadData);
+      }
+
+      return {
+        prefixCls,
+        listData,
+        count,
+        onNoticeClick,
+        onEmptyNotify,
+        numberStyle: {},
+        popoverVisible,
+        registerDetail,
+        dynamicNoticeProps,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  //noinspection LessUnresolvedVariable
+  @prefix-cls: ~'@{namespace}-header-notify';
+
+  .@{prefix-cls} {
+    padding-top: 2px;
+
+    &__overlay {
+      max-width: 340px;
+
+      .ant-popover-inner-content {
+        padding: 0;
+      }
+
+      .ant-tabs-nav {
+        margin-bottom: 12px;
+      }
+
+      .ant-list-item {
+        padding: 12px 24px;
+        transition: background-color 300ms;
+
+        &:hover {
+          background-color: #e6f7ff;
+        }
+      }
+
+      .bottom-buttons {
+        text-align: center;
+        border-top: 1px solid #f0f0f0;
+        height: 42px;
+
+        .ant-btn {
+          border: 0;
+          height: 100%;
+
+          &:first-child {
+            border-right: 1px solid #f0f0f0;
+          }
+        }
+      }
+    }
+
+    .ant-tabs-content {
+      width: 300px;
+    }
+
+    .ant-badge {
+      font-size: 18px;
+
+      .ant-badge-count {
+        @badget-size: 16px;
+        width: @badget-size;
+        height: @badget-size;
+        min-width: @badget-size;
+        line-height: @badget-size;
+        padding: 0;
+
+        .ant-scroll-number-only > p.ant-scroll-number-only-unit {
+          font-size: 14px;
+          height: @badget-size;
+        }
+      }
+
+      .ant-badge-multiple-words {
+        padding: 0 0 0 2px;
+        font-size: 12px;
+      }
+
+      svg {
+        width: 0.9em;
+      }
+    }
+  }
+
+  // 兼容黑暗模式
+  [data-theme='dark'] .@{prefix-cls} {
+    &__overlay {
+      .ant-list-item {
+        &:hover {
+          background-color: #111b26;
+        }
+      }
+
+      .bottom-buttons {
+        border-top: 1px solid #303030;
+
+        .ant-btn {
+          &:first-child {
+            border-right: 1px solid #303030;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/components/notify/notify.api.ts b/src/layouts/default/header/components/notify/notify.api.ts
new file mode 100644
index 0000000..7a196ad
--- /dev/null
+++ b/src/layouts/default/header/components/notify/notify.api.ts
@@ -0,0 +1,27 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  listCementByUser = '/sys/annountCement/listByUser',
+  getUnreadMessageCount = '/sys/annountCement/getUnreadMessageCount',
+  editCementSend = '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
+  clearAllUnReadMessage = '/sys/annountCement/clearAllUnReadMessage',
+}
+
+/**
+ * 获取系统通知消息列表
+ * @param params
+ */
+export const listCementByUser = (params?) => defHttp.get({ url: Api.listCementByUser, params });
+
+/**
+ * 获取用户近两个月未读消息数量
+ * @param params
+ */
+export const getUnreadMessageCount = (params?) => defHttp.get({ url: Api.getUnreadMessageCount, params });
+
+export const editCementSend = (anntId, params?) => defHttp.put({ url: Api.editCementSend, params: { anntId, ...params } });
+
+/**
+ * 清空全部未读消息
+ */
+export const clearAllUnReadMessage = () => defHttp.post({ url: Api.clearAllUnReadMessage },{ isTransformResponse: false });
diff --git a/src/layouts/default/header/components/user-dropdown/DepartSelect.vue b/src/layouts/default/header/components/user-dropdown/DepartSelect.vue
new file mode 100644
index 0000000..40fcf56
--- /dev/null
+++ b/src/layouts/default/header/components/user-dropdown/DepartSelect.vue
@@ -0,0 +1,285 @@
+<template>
+  <BasicModal v-bind="config" :maxHeight="500" :title="currTitle" v-model:visible="visible" wrapClassName="loginSelectModal">
+    <a-form ref="formRef" v-bind="layout" :colon="false" class="loginSelectForm">
+      <a-form-item v-if="isMultiTenant" :validate-status="validate_status">
+        <!--label内容-->
+        <template #label>
+          <a-tooltip placement="topLeft">
+            <template #title>
+              <span>您隶属于多租户，请选择当前所属租户</span>
+            </template>
+            <a-avatar style="background-color: #87d068" :size="30"> 租户 </a-avatar>
+          </a-tooltip>
+        </template>
+        <!--部门下拉内容-->
+        <a-select v-model:value="tenantSelected" placeholder="请选择登录部门" :class="{ 'valid-error': validate_status == 'error' }">
+          <template #suffixIcon>
+            <Icon icon="ant-design:gold-outline" />
+          </template>
+          <template v-for="tenant in tenantList" :key="tenant.id">
+            <a-select-option :value="tenant.id">{{ tenant.name }}</a-select-option>
+          </template>
+        </a-select>
+      </a-form-item>
+      <a-form-item v-if="isMultiDepart && departList.length > 0" :validate-status="validate_status1">
+        <!--label内容-->
+        <template #label>
+          <a-tooltip placement="topLeft">
+            <template #title>
+              <span>您隶属于多部门，请选择当前所在部门</span>
+            </template>
+            <a-avatar style="background-color: rgb(104, 208, 203)" :size="30"> 部门 </a-avatar>
+          </a-tooltip>
+        </template>
+        <!--部门下拉内容-->
+        <a-select v-model:value="departSelected" placeholder="请选择登录部门" :class="{ 'valid-error': validate_status1 == 'error' }">
+          <template #suffixIcon>
+            <Icon icon="ant-design:gold-outline" />
+          </template>
+          <template v-for="depart in departList" :key="depart.orgCode">
+            <a-select-option :value="depart.orgCode">{{ getShortDeptName(depart) }} </a-select-option>
+          </template>
+        </a-select>
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-button @click="close">关闭</a-button>
+      <a-button @click="handleSubmit" type="primary">确认</a-button>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, watch, unref } from 'vue';
+  import { Avatar } from 'ant-design-vue';
+  import { BasicModal } from '/@/components/Modal';
+  import { getUserDeparts, selectDepart } from '/@/views/system/depart/depart.api';
+  import { getUserTenants } from '/@/views/system/tenant/tenant.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const userStore = useUserStore();
+  const { createMessage, notification } = useMessage();
+  const props = defineProps({
+    title: { type: String, default: '部门选择' },
+    closable: { type: Boolean, default: false },
+    username: { type: String, default: '' },
+  });
+
+  const layout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 18 },
+  };
+
+  const config = {
+    maskClosable: false,
+    closable: false,
+    canFullscreen: false,
+    width: '500px',
+    minHeight: 20,
+    maxHeight: 20,
+  };
+  const currTitle = ref('');
+
+  const isMultiTenant = ref(false);
+  const currentTenantName = ref('');
+  const tenantSelected = ref();
+  const tenantList = ref([]);
+  const validate_status = ref('');
+
+  const isMultiDepart = ref(false);
+  const currentDepartName = ref('');
+  const departSelected = ref('');
+  const departList = ref([]);
+  const validate_status1 = ref('');
+  //弹窗显隐
+  const visible = ref(false);
+  //获取部门缩写
+  const getShortDeptName = computed(()=>{
+    return (depart) => {
+      let deptName = depart.departNameAbbr || depart.departPathName || depart.departName;
+      if (deptName.length > 18) {
+        return '...' + deptName.substring(deptName.length-18, deptName.length) ;
+      }
+      return deptName;
+    };
+  })
+  /**
+   * 弹窗打开前处理
+   */
+  async function show() {
+    //加载部门
+    await loadDepartList();
+    //加载租户
+    await loadTenantList();
+    //标题配置
+    if (unref(isMultiTenant) && unref(isMultiDepart)) {
+      currTitle.value = '切换租户和部门';
+    } else if (unref(isMultiTenant)) {
+      currTitle.value =
+        unref(currentTenantName) && unref(currentTenantName).length > 0 ? `租户切换（当前租户 :${unref(currentTenantName)}）` : props.title;
+    } else if (unref(isMultiDepart)) {
+      currTitle.value =
+        unref(currentDepartName) && unref(currentDepartName).length > 0 ? `部门切换（当前部门 :${unref(currentDepartName)}）` : props.title;
+    }
+    //model显隐
+    if (unref(isMultiTenant) || unref(isMultiDepart)) {
+      visible.value = true;
+    }
+  }
+  /**
+   *加载部门信息
+   */
+  async function loadDepartList() {
+    const result = await getUserDeparts();
+    if (!result.list || result.list.length == 0) {
+      return;
+    }
+    let currentDepart = result.list.filter((item) => item.orgCode == result.orgCode);
+    //TODO 筛选出用户的部门信息（排除公司或者岗位配置）后期回滚
+    const userDeparts = result.list.filter((item) => item.orgCategory == '2');
+    departList.value = userDeparts;
+    // 代码逻辑说明: JHHB-790 用户部门变更，会出现这个情况（因为之前设置的这里只切换部门，过滤了公司和岗位信息）
+    const hasCurrentDepart = userDeparts.some(item => item.orgCode == result.orgCode);
+    departSelected.value = hasCurrentDepart && currentDepart && currentDepart.length > 0 ? result.orgCode : '';
+    currentDepartName.value = currentDepart && currentDepart.length > 0 ? currentDepart[0].departName : '';
+    isMultiDepart.value = true;
+  }
+  /**
+   *加载租户信息
+   */
+  async function loadTenantList() {
+    const result = await getUserTenants();
+    if (!result.list || result.list.length == 0) {
+      return;
+    }
+    let tenantId = userStore.getTenant;
+    let currentTenant = result.list.filter((item) => item.id == tenantId);
+    currentTenantName.value = currentTenant && currentTenant.length > 0 ? currentTenant[0].name : '';
+    tenantList.value = result.list;
+    tenantSelected.value = tenantId;
+    isMultiTenant.value = true;
+  }
+
+  /**
+   * 提交数据
+   */
+  async function handleSubmit() {
+    if (unref(isMultiTenant) && unref(tenantSelected)==null) {
+      validate_status.value = 'error';
+      return false;
+    }
+    if (unref(isMultiDepart) && unref(departList).length > 0 && !unref(departSelected)) {
+      validate_status1.value = 'error';
+      return false;
+    }
+    departResolve()
+      .then(() => {
+        if (unref(isMultiTenant)) {
+          userStore.setTenant(unref(tenantSelected));
+        }
+        createMessage.success('切换成功');
+        
+        //切换租户后要刷新首页
+        window.location.reload();
+      })
+      .catch((e) => {
+        console.log('登录选择出现问题', e);
+      })
+      .finally(() => {
+        if (unref(isMultiTenant)) {
+          userStore.setTenant(unref(tenantSelected));
+        }
+        close();
+      });
+  }
+  /**
+   *切换选择部门
+   */
+  function departResolve() {
+    return new Promise(async (resolve, reject) => {
+      if (!unref(isMultiDepart) || unref(departList).length == 0) {
+        resolve();
+      } else {
+        const result = await selectDepart({
+          username: userStore.getUserInfo.username,
+          orgCode: unref(departSelected),
+          loginTenantId: unref(tenantSelected),
+        });
+        if (result.userInfo) {
+          const userInfo = result.userInfo;
+          userStore.setUserInfo(userInfo);
+          resolve();
+        } else {
+          requestFailed(result);
+          userStore.logout();
+          reject();
+        }
+      }
+    });
+  }
+  /**
+   * 请求失败处理
+   */
+  function requestFailed(err) {
+    notification.error({
+      message: '登录失败',
+      description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+      duration: 4,
+    });
+  }
+  /**
+   * 关闭model
+   */
+  function close() {
+    departClear();
+  }
+
+  /**
+   *初始化数据
+   */
+  function departClear() {
+    currTitle.value = '';
+
+    isMultiTenant.value = false;
+    currentTenantName.value = '';
+    tenantSelected.value = '';
+    tenantList.value = [];
+    validate_status.value = '';
+
+    isMultiDepart.value = false;
+    currentDepartName.value = '';
+    departSelected.value = '';
+    departList.value = [];
+    validate_status1.value = '';
+
+    visible.value = false;
+  }
+
+  /**
+   * 监听username
+   */
+  watch(
+    () => props.username,
+    (value) => {
+      value && loadDepartList();
+    }
+  );
+
+  defineExpose({
+    show,
+  });
+</script>
+<style lang="less" scoped>
+  .loginSelectForm {
+    margin-bottom: -20px;
+  }
+
+  .loginSelectModal {
+    top: 20px;
+  }
+
+  .valid-error .ant-select-selection__placeholder {
+    color: #f5222d;
+  }
+</style>
diff --git a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
new file mode 100644
index 0000000..c9b8536
--- /dev/null
+++ b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <MenuItem :key="itemKey">
+    <span class="flex items-center">
+      <Icon :icon="icon" class="mr-1" />
+      <span>{{ text }}</span>
+    </span>
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { Menu } from 'ant-design-vue';
+
+  import { computed, defineComponent, getCurrentInstance } from 'vue';
+
+  import Icon from '/@/components/Icon/index';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'DropdownMenuItem',
+    components: { MenuItem: Menu.Item, Icon },
+    props: {
+      // 【issues/6855】
+      itemKey: propTypes.string,
+      text: propTypes.string,
+      icon: propTypes.string,
+    },
+    setup(props) {
+      const instance = getCurrentInstance();
+      // 代码逻辑说明: 【issues/6855】组件使用key作props报警告，改为itemKey
+      const itemKey = computed(() => props.itemKey || instance?.vnode?.props?.itemKey);
+      return { itemKey };
+    },
+  });
+</script>
diff --git a/src/layouts/default/header/components/user-dropdown/UpdatePassword.vue b/src/layouts/default/header/components/user-dropdown/UpdatePassword.vue
new file mode 100644
index 0000000..a755b99
--- /dev/null
+++ b/src/layouts/default/header/components/user-dropdown/UpdatePassword.vue
@@ -0,0 +1,103 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="500px" :bodyStyle="{ padding: '20px 40px 20px 20px'}">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { rules } from '/@/utils/helper/validator';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  import { useForm } from '/@/components/Form/src/hooks/useForm';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const localeStore = useLocaleStore();
+  const { t } = useI18n();
+  // 声明Emits
+  const emit = defineEmits(['register']);
+  const $message = useMessage();
+  const formRef = ref();
+  const username = ref('');
+  // 代码逻辑说明: 【QQYUN-7970】国际化
+  const title = ref(t('layout.changePassword.changePassword'));
+  //表单配置
+  const [registerForm, { resetFields, validate, clearValidate }] = useForm({
+    schemas: [
+      {
+        label: t('layout.changePassword.oldPassword'),
+        field: 'oldpassword',
+        component: 'InputPassword',
+        required: true,
+      },
+      {
+        label: t('layout.changePassword.newPassword'),
+        field: 'password',
+        component: 'StrengthMeter',
+        componentProps: {
+          placeholder: t('layout.changePassword.pleaseEnterNewPassword'),
+        },
+        rules: [
+          {
+            required: true,
+            message: t('layout.changePassword.pleaseEnterNewPassword'),
+          },
+          {
+            pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+            message: '密码由 8 位及以上数字、大小写字母和特殊符号组成！',
+          },  
+        ],
+      },
+      {
+        label: t('layout.changePassword.confirmNewPassword'),
+        field: 'confirmpassword',
+        component: 'InputPassword',
+        dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+      },
+    ],
+    showActionButtonGroup: false,
+    wrapperCol: null,
+    labelWidth: localeStore.getLocale == 'zh_CN' ? 100 : 160,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      let params = Object.assign({ username: unref(username) }, values);
+      defHttp.put({ url: '/sys/user/updatePassword', params }, { isTransformResponse: false }).then((res) => {
+        if (res.success) {
+          $message.createMessage.success(res.message);
+          //关闭弹窗
+          closeModal();
+        } else {
+          $message.createMessage.warning(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  async function show(name) {
+    if (!name) {
+      $message.createMessage.warning('当前系统无登录用户!');
+      return;
+    } else {
+      username.value = name;
+      await setModalProps({ visible: true });
+      await resetFields();
+      await clearValidate();
+    }
+  }
+
+  defineExpose({
+    title,
+    show,
+  });
+</script>
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
new file mode 100644
index 0000000..00ed266
--- /dev/null
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -0,0 +1,256 @@
+<template>
+  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
+    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
+      <img :class="`${prefixCls}__header`" :src="getAvatarUrl" />
+      <span :class="`${prefixCls}__info hidden md:block`">
+        <span :class="`${prefixCls}__name  `" class="truncate">
+          {{ getUserInfo.realname }}
+        </span>
+      </span>
+    </span>
+
+    <template #overlay>
+      <Menu @click="handleMenuClick">
+        <MenuItem itemKey="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
+        <MenuDivider v-if="getShowDoc" />
+        <MenuItem itemKey="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
+        <MenuItem itemKey="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
+        <MenuItem itemKey="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
+        <MenuItem itemKey="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
+        <!-- <MenuItem
+            v-if="getUseLockPage"
+            itemKey="lock"
+            :text="t('layout.header.tooltipLock')"
+            icon="ion:lock-closed-outline"
+        />-->
+        <MenuItem itemKey="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
+      </Menu>
+    </template>
+  </Dropdown>
+  <LockAction v-if="lockActionVisible" ref="lockActionRef" @register="register" />
+  <DepartSelect ref="loginSelectRef" />
+  <UpdatePassword v-if="passwordVisible" ref="updatePasswordRef" />
+</template>
+<script lang="ts">
+  // components
+  import { Dropdown, Menu } from 'ant-design-vue';
+
+  import { defineComponent, computed, ref, nextTick } from 'vue';
+
+  import { SITE_URL } from '/@/settings/siteSetting';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { useGo } from '/@/hooks/web/usePage';
+  import headerImg from '/@/assets/images/header.jpg';
+  import { propTypes } from '/@/utils/propTypes';
+  import { openWindow } from '/@/utils';
+
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  import { refreshCache, queryAllDictItems } from '/@/views/system/dict/dict.api';
+  import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
+  import { removeAuthCache, setAuthCache } from '/src/utils/auth';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { getRefPromise } from '/@/utils/index';
+  import { refreshDragCache } from "@/api/common/api";
+
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart' | 'defaultHomePage' | 'password' | 'account';
+  const { createMessage } = useMessage();
+  export default defineComponent({
+    name: 'UserDropdown',
+    components: {
+      Dropdown,
+      Menu,
+      MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+      MenuDivider: Menu.Divider,
+      LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
+      DepartSelect: createAsyncComponent(() => import('./DepartSelect.vue')),
+      UpdatePassword: createAsyncComponent(() => import('./UpdatePassword.vue')),
+    },
+    props: {
+      theme: propTypes.oneOf(['dark', 'light']),
+    },
+    setup() {
+      const { prefixCls } = useDesign('header-user-dropdown');
+      const { t } = useI18n();
+      const { getShowDoc, getUseLockPage } = useHeaderSetting();
+      const userStore = useUserStore();
+      const go = useGo();
+      const passwordVisible = ref(false);
+      const lockActionVisible = ref(false);
+      const lockActionRef = ref(null);
+
+      const getUserInfo = computed(() => {
+        const { realname = '', avatar, desc } = userStore.getUserInfo || {};
+        return { realname, avatar: avatar || headerImg, desc };
+      });
+
+      const getAvatarUrl = computed(() => {
+        let { avatar } = getUserInfo.value;
+        if (avatar == headerImg) {
+          return avatar;
+        } else {
+          return getFileAccessHttpUrl(avatar);
+        }
+      });
+
+      const [register, { openModal }] = useModal();
+      /**
+       * 多部门弹窗逻辑
+       */
+      const loginSelectRef = ref();
+      // 代码逻辑说明: 【QQYUN-6333】空路由问题—首次访问资源太大
+      async function handleLock() {
+        await getRefPromise(lockActionRef);
+        openModal(true);
+      }
+      //  login out
+      function handleLoginOut() {
+        userStore.confirmLoginOut();
+      }
+
+      // open doc
+      function openDoc() {
+        openWindow(SITE_URL);
+      }
+
+      // 清除缓存
+      async function clearCache() {
+        const result = await refreshCache();
+        const dragRes = await refreshDragCache();
+        console.log('dragRes', dragRes);
+        if (result.success) {
+          const res = await queryAllDictItems();
+          removeAuthCache(DB_DICT_DATA_KEY);
+          setAuthCache(DB_DICT_DATA_KEY, res.result);
+          createMessage.success(t('layout.header.refreshCacheComplete'));
+          // 代码逻辑说明: 【issues/7433】vue3 数据字典优化建议
+          userStore.setAllDictItems(res.result);
+        } else {
+          createMessage.error(t('layout.header.refreshCacheFailure'));
+        }
+      }
+      // 切换部门
+      function updateCurrentDepart() {
+        loginSelectRef.value.show();
+      }
+      // 修改密码
+      const updatePasswordRef = ref();
+      // 代码逻辑说明: 【QQYUN-6333】空路由问题—首次访问资源太大
+      async function updatePassword() {
+        passwordVisible.value = true;
+        await getRefPromise(updatePasswordRef);
+        updatePasswordRef.value.show(userStore.getUserInfo.username);
+      }
+      function handleMenuClick(e: { key: MenuEvent }) {
+        switch (e.key) {
+          case 'logout':
+            handleLoginOut();
+            break;
+          case 'doc':
+            openDoc();
+            break;
+          case 'lock':
+            handleLock();
+            break;
+          case 'cache':
+            clearCache();
+            break;
+          case 'depart':
+            updateCurrentDepart();
+            break;
+          case 'password':
+            updatePassword();
+            break;
+          case 'account':
+            // 代码逻辑说明: 进入用户设置页面------------
+            go(`/system/usersetting`);
+            break;
+        }
+      }
+
+      return {
+        prefixCls,
+        t,
+        getUserInfo,
+        getAvatarUrl,
+        handleMenuClick,
+        getShowDoc,
+        register,
+        getUseLockPage,
+        loginSelectRef,
+        updatePasswordRef,
+        passwordVisible,
+        lockActionVisible,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-header-user-dropdown';
+
+  .@{prefix-cls} {
+    height: @header-height;
+    padding: 0 0 0 10px;
+    padding-right: 10px;
+    overflow: hidden;
+    font-size: 12px;
+    cursor: pointer;
+    align-items: center;
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+    }
+
+    &__header {
+      border-radius: 50%;
+    }
+
+    &__name {
+      font-size: 14px;
+    }
+
+    &--dark {
+      &:hover {
+        background-color: @header-dark-bg-hover-color;
+      }
+    }
+
+    &--light {
+      &:hover {
+        background-color: @header-light-bg-hover-color;
+      }
+
+      .@{prefix-cls}__name {
+        color: @text-color-base;
+      }
+
+      .@{prefix-cls}__desc {
+        color: @header-light-desc-color;
+      }
+    }
+
+    &-dropdown-overlay {
+      // 代码逻辑说明: 【QQYUN-7512】顶部账号划过首次弹出时位置会变更一下
+      width: 160px;
+      .ant-dropdown-menu-item {
+        min-width: 160px;
+      }
+    }
+  }
+  // 代码逻辑说明: 【QQYUN-13013】切换到英文模式下拉菜单宽度有点窄
+  html[lang="en"] {
+    .@{prefix-cls} {
+      &-dropdown-overlay {
+        width: 175px;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
new file mode 100644
index 0000000..38ccde9
--- /dev/null
+++ b/src/layouts/default/header/index.less
@@ -0,0 +1,209 @@
+@header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
+@header-prefix-cls: ~'@{namespace}-layout-header';
+@breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
+@logo-prefix-cls: ~'@{namespace}-app-logo';
+
+.@{header-prefix-cls} {
+  display: flex;
+  height: @header-height;
+  padding: 0;
+  // update-begin--author:liaozhiyang---date:20250818---for：【issues/8709】LayoutContent样式多出1px
+  // margin-left: -1px;
+  // update-end--author:liaozhiyang---date:20250818---for：【issues/8709】LayoutContent样式多出1px
+  line-height: @header-height;
+  color: @white;
+  background-color: @white;
+  align-items: center;
+  justify-content: space-between;
+
+  &--mobile {
+    .@{breadcrumb-prefix-cls},
+    .error-action,
+    .notify-item,
+    .lock-item,
+    .fullscreen-item {
+      display: none;
+    }
+
+    .@{logo-prefix-cls} {
+      min-width: unset;
+      padding-right: 0;
+
+      &__title {
+        display: none;
+      }
+    }
+
+    .@{header-trigger-prefix-cls} {
+      padding: 0 4px 0 8px !important;
+    }
+
+    .@{header-prefix-cls}-action {
+      padding-right: 4px;
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-header-fixed-z-index;
+    width: 100%;
+  }
+
+  // 【JEECG作为乾坤子应用】
+  &--qiankun-micro {
+    position: absolute;
+  }
+
+  &-logo {
+    height: @header-height;
+    min-width: 192px;
+    padding: 0 10px;
+    font-size: 14px;
+
+    img {
+      width: @logo-width;
+      height: @logo-width;
+      margin-right: 2px;
+    }
+  }
+
+  &-left {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .@{header-trigger-prefix-cls} {
+      display: flex;
+      height: 100%;
+      padding: 1px 10px 0 10px;
+      cursor: pointer;
+      align-items: center;
+
+      .anticon {
+        font-size: 22px;
+      }
+
+      &.light {
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+
+        svg {
+          fill: #000;
+        }
+      }
+
+      &.dark {
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    height: 100%;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+  }
+
+  &-action {
+    display: flex;
+    min-width: 180px;
+    // padding-right: 12px;
+    align-items: center;
+
+    &__item {
+      display: flex !important;
+      height: @header-height;
+      padding: 0 2px;
+      font-size: 1.2em;
+      cursor: pointer;
+      align-items: center;
+
+      .ant-badge {
+        height: @header-height;
+        line-height: @header-height;
+      }
+
+      .ant-badge-dot {
+        top: 10px;
+        right: 2px;
+      }
+    }
+
+    span[role='img'] {
+      padding: 0 8px;
+    }
+  }
+
+  &--light {
+    background-color: @white !important;
+    border-bottom: 1px solid @header-light-bottom-border-color;
+    border-left: 1px solid @header-light-bottom-border-color;
+
+    .@{header-prefix-cls}-logo {
+      color: @text-color-base;
+
+      &:hover {
+        background-color: @header-light-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        color: @text-color-base;
+
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+      }
+
+      &-icon,
+      span[role='img'] {
+        color: @text-color-base;
+      }
+    }
+  }
+
+  &--dark {
+    background-color: @header-dark-bg-color !important;
+    // border-bottom: 1px solid @border-color-base;
+    // update-begin--author:liaozhiyang---date:20250818---for：【issues/8709】LayoutContent样式多出1px
+    // border-left: 1px solid @border-color-base;
+    // update-end--author:liaozhiyang---date:20250818---for：【issues/8709】LayoutContent样式多出1px
+
+    .@{header-prefix-cls}-logo {
+      &:hover {
+        background-color: @header-dark-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
+        .ant-badge {
+          span {
+            color: @white;
+          }
+        }
+
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue
new file mode 100644
index 0000000..453a692
--- /dev/null
+++ b/src/layouts/default/header/index.vue
@@ -0,0 +1,258 @@
+<template>
+  <Header :class="getHeaderClass">
+    <!-- left start -->
+    <div :class="`${prefixCls}-left`">
+      <!-- logo -->
+      <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
+      <LayoutTrigger
+        v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
+        :theme="getHeaderTheme"
+        :sider="false"
+      />
+      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
+      <!-- 欢迎语 -->
+      <span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> {{t('layout.header.welcomeIn')}} {{ title }} </span>
+    </div>
+    <!-- left end -->
+
+    <!-- menu start -->
+    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+      <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
+    </div>
+    <!-- menu-end -->
+
+    <!-- action  -->
+    <div :class="`${prefixCls}-action`">
+      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+
+      <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
+
+      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
+
+      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
+
+      <LockScreen v-if="getUseLockPage" />
+
+      <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
+
+      <UserDropDown :theme="getHeaderTheme" />
+
+      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
+      <!-- ai助手 -->
+      <Aide v-if="getAiIconShow"></Aide>
+    </div>
+  </Header>
+  <LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { propTypes } from '/@/utils/propTypes';
+
+  import { Layout } from 'ant-design-vue';
+  import { AppLogo } from '/@/components/Application';
+  import LayoutMenu from '../menu/index.vue';
+  import LayoutTrigger from '../trigger/index.vue';
+
+  import { AppSearch } from '/@/components/Application';
+
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+  import { AppLocalePicker } from '/@/components/Application';
+
+  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useLocale } from '/@/locales/useLocale';
+
+  import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import Aide from "@/views/dashboard/ai/components/aide/index.vue"
+  const { t } = useI18n();
+
+  export default defineComponent({
+    name: 'LayoutHeader',
+    components: {
+      Header: Layout.Header,
+      AppLogo,
+      LayoutTrigger,
+      LayoutBreadcrumb,
+      LayoutMenu,
+      UserDropDown,
+      AppLocalePicker,
+      FullScreen,
+      Notify,
+      AppSearch,
+      ErrorAction,
+      LockScreen,
+      LoginSelect,
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
+        loading: true,
+      }),
+      Aide
+    },
+    props: {
+      fixed: propTypes.bool,
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('layout-header');
+      const userStore = useUserStore();
+      const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition, getAiIconShow } = useRootSetting();
+      const { title, isQiankunMicro } = useGlobSetting();
+
+      const {
+        getHeaderTheme,
+        getShowFullScreen,
+        getShowNotice,
+        getShowContent,
+        getShowBread,
+        getShowHeaderLogo,
+        getShowHeader,
+        getShowSearch,
+        getUseLockPage,
+        getShowBreadTitle,
+      } = useHeaderSetting();
+
+      const { getShowLocalePicker } = useLocale();
+
+      const { getIsMobile } = useAppInject();
+
+      const getHeaderClass = computed(() => {
+        const theme = unref(getHeaderTheme);
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--fixed`]: props.fixed,
+            [`${prefixCls}--mobile`]: unref(getIsMobile),
+            [`${prefixCls}--${theme}`]: theme,
+            // 【JEECG作为乾坤子应用】
+            [`${prefixCls}--qiankun-micro`]: isQiankunMicro,
+          },
+        ];
+      });
+
+      const getShowSetting = computed(() => {
+        if (!unref(getShowSettingButton)) {
+          return false;
+        }
+        const settingButtonPosition = unref(getSettingButtonPosition);
+
+        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+          return unref(getShowHeader);
+        }
+        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+      });
+
+      const getLogoWidth = computed(() => {
+        if (!unref(getIsMixMode) || unref(getIsMobile)) {
+          return {};
+        }
+        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+        return { width: `${width}px` };
+      });
+
+      const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
+      });
+
+      const getMenuMode = computed(() => {
+        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
+      });
+
+      /**
+       * 首页多租户部门弹窗逻辑
+       */
+      const loginSelectRef = ref();
+
+      function showLoginSelect() {
+        //判断是否是登陆进来
+        const loginInfo = toRaw(userStore.getLoginInfo) || {};
+        if (!!loginInfo.isLogin) {
+          loginSelectRef.value.show(loginInfo);
+        }
+      }
+
+      function loginSelectOk() {
+        console.log('成功。。。。。');
+      }
+
+      onMounted(() => {
+        showLoginSelect();
+      });
+
+      return {
+        prefixCls,
+        getHeaderClass,
+        getShowHeaderLogo,
+        getHeaderTheme,
+        getShowHeaderTrigger,
+        getIsMobile,
+        getShowBreadTitle,
+        getShowBread,
+        getShowContent,
+        getSplitType,
+        getSplit,
+        getMenuMode,
+        getShowTopMenu,
+        getShowLocalePicker,
+        getShowFullScreen,
+        getShowNotice,
+        getUseErrorHandle,
+        getLogoWidth,
+        getIsMixSidebar,
+        getShowSettingButton,
+        getShowSetting,
+        getShowSearch,
+        getUseLockPage,
+        loginSelectOk,
+        loginSelectRef,
+        title,
+        t,
+        getAiIconShow
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+  //顶部欢迎语展示样式
+  @prefix-cls: ~'@{namespace}-layout-header';
+
+  .ant-layout .@{prefix-cls} {
+    display: flex;
+    padding: 0 8px;
+    // 代码逻辑说明: 【QQYUN-8762】顶栏高度
+    height: @header-height;
+    align-items: center;
+
+    .headerIntroductionClass {
+      margin-right: 4px;
+      margin-bottom: 2px;
+      border-bottom: 0px;
+      border-left: 0px;
+    }
+
+    &--light {
+      .headerIntroductionClass {
+        color: #000;
+      }
+    }
+
+    &--dark {
+      .headerIntroductionClass {
+        color: rgba(255, 255, 255, 1);
+      }
+      .anticon, .truncate {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
new file mode 100644
index 0000000..4c09370
--- /dev/null
+++ b/src/layouts/default/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <Layout :class="[layoutBoxClass]" v-bind="lockEvents">
+    <LayoutFeatures />
+    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
+    <Layout :class="[layoutClass]">
+      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
+      <Layout :class="layoutMainClass">
+        <LayoutMultipleHeader />
+        <LayoutContent />
+        <LayoutFooter />
+      </Layout>
+    </Layout>
+  </Layout>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, unref, ref } from 'vue';
+  import { Layout } from 'ant-design-vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+  import LayoutHeader from './header/index.vue';
+  import LayoutContent from './content/index.vue';
+  import LayoutSideBar from './sider/index.vue';
+  import LayoutMultipleHeader from './header/MultipleHeader.vue';
+
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLockPage } from '/@/hooks/web/useLockPage';
+
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  export default defineComponent({
+    name: 'DefaultLayout',
+    components: {
+      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
+      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
+      LayoutHeader,
+      LayoutContent,
+      LayoutSideBar,
+      LayoutMultipleHeader,
+      Layout,
+    },
+    setup() {
+      const { prefixCls } = useDesign('default-layout');
+      const { getIsMobile } = useAppInject();
+      const { getShowFullHeaderRef } = useHeaderSetting();
+      const { getShowSidebar, getIsMixSidebar, getShowMenu, getMenuType } = useMenuSetting();
+      const glob = useGlobSetting();
+      const { isQiankunMicro } = glob;
+
+      // Create a lock screen monitor
+      const lockEvents = useLockPage();
+
+      const layoutBoxClass = computed(() => {
+        let cls: string[] = [prefixCls];
+        if (unref(getMenuType)) {
+          cls.push(`${prefixCls}--menu-${unref(getMenuType)}`);
+        }
+        return cls;
+      });
+
+      const layoutClass = computed(() => {
+        let cls: string[] = ['ant-layout'];
+        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+          cls.push('ant-layout-has-sider');
+        }
+        return cls;
+      });
+
+      const layoutMainClass = computed(() => {
+        let cls: string[] = [`${prefixCls}-main`];
+
+        // 【JEECG作为乾坤子应用】
+        if (unref(isQiankunMicro)) {
+          cls.push(`${prefixCls}-main--qiankun-micro`);
+        }
+        return cls;
+      });
+
+      return {
+        getShowFullHeaderRef,
+        getShowSidebar,
+        prefixCls,
+        getIsMobile,
+        getIsMixSidebar,
+        isQiankunMicro,
+        layoutBoxClass,
+        layoutClass,
+        layoutMainClass,
+        lockEvents
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-default-layout';
+
+  .@{prefix-cls} {
+    display: flex;
+    width: 100%;
+    min-height: 100%;
+    background-color: @content-bg;
+    flex-direction: column;
+
+    &--menu {
+      // 【JEECG作为乾坤子应用】
+      &-mix-sidebar {
+
+        .@{namespace}-layout-mix-sider {
+          position: absolute;
+          overflow: visible;
+
+          > .@{namespace}-layout-mix-sider-menu-list {
+            position: absolute;
+          }
+        }
+      }
+
+      // 【JEECG作为乾坤子应用】
+      &-mix {
+        .@{namespace}-multiple-tabs {
+          margin-top: 0 !important;
+        }
+      }
+    }
+
+    > .ant-layout {
+      min-height: 100%;
+    }
+
+    &-main {
+      width: 100%;
+      // 代码逻辑说明:【issues/8709】LayoutContent样式多出1px
+      // margin-left: 1px;
+
+      // 【JEECG作为乾坤子应用】根 Layout 作为 absolute 定位的参照容器
+      &--qiankun-micro {
+        position: relative;
+
+        .@{namespace}-multiple-tabs {
+          margin-top: 60px;
+        }
+      }
+
+    }
+  }
+</style>
diff --git a/src/layouts/default/menu/index.vue b/src/layouts/default/menu/index.vue
new file mode 100644
index 0000000..58121b2
--- /dev/null
+++ b/src/layouts/default/menu/index.vue
@@ -0,0 +1,203 @@
+<script lang="tsx">
+  import type { PropType, CSSProperties } from 'vue';
+
+  import { computed, defineComponent, unref, toRef } from 'vue';
+  import { BasicMenu } from '/@/components/Menu';
+  import { SimpleMenu } from '/@/components/SimpleMenu';
+  import { AppLogo } from '/@/components/Application';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { ScrollContainer } from '/@/components/Container';
+
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useGlobSetting } from "/@/hooks/setting";
+  import { useSplitMenu } from './useLayoutMenu';
+  import { openWindow } from '/@/utils';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isUrl } from '/@/utils/is';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLocaleStore } from '/@/store/modules/locale';
+
+  export default defineComponent({
+    name: 'LayoutMenu',
+    props: {
+      theme: propTypes.oneOf(['light', 'dark']),
+
+      splitType: {
+        type: Number as PropType<MenuSplitTyeEnum>,
+        default: MenuSplitTyeEnum.NONE,
+      },
+
+      isHorizontal: propTypes.bool,
+      // menu Mode
+      menuMode: {
+        type: [String] as PropType<Nullable<MenuModeEnum>>,
+        default: '',
+      },
+    },
+    setup(props) {
+      const go = useGo();
+
+      const {
+        getMenuMode,
+        getMenuType,
+        getMenuTheme,
+        getCollapsed,
+        getCollapsedShowTitle,
+        getAccordion,
+        getIsHorizontal,
+        getIsSidebarType,
+        getSplit,
+      } = useMenuSetting();
+      const { getShowLogo } = useRootSetting();
+
+      const { prefixCls } = useDesign('layout-menu');
+
+      const glob = useGlobSetting()
+
+      const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
+
+      const { getIsMobile } = useAppInject();
+
+      const getComputedMenuMode = computed(() => (unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode)));
+
+      const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
+
+      const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
+
+      const getUseScroll = computed(() => {
+        // 【JEECG作为乾坤子应用】在乾坤子应用下，菜单不固定
+        if (glob.isQiankunMicro) {
+          return false;
+        }
+
+        return (
+          !unref(getIsHorizontal) &&
+          (unref(getIsSidebarType) || props.splitType === MenuSplitTyeEnum.LEFT || props.splitType === MenuSplitTyeEnum.NONE)
+        );
+      });
+
+      const getWrapperStyle = computed((): CSSProperties => {
+        return {
+          // 代码逻辑说明: 【issues/7548】侧边栏导航模式时会导致下面菜单滚动显示不全
+          height: `calc(100% - ${unref(getIsShowLogo) ? '60px' : '0px'})`,
+        };
+      });
+
+      const getLogoClass = computed(() => {
+        return [
+          `${prefixCls}-logo`,
+          unref(getComputedMenuTheme),
+          {
+            [`${prefixCls}--mobile`]: unref(getIsMobile),
+          },
+        ];
+      });
+
+      const getCommonProps = computed(() => {
+        const menus = unref(menusRef);
+        return {
+          menus,
+          beforeClickFn: beforeMenuClickFn,
+          items: menus,
+          theme: unref(getComputedMenuTheme),
+          accordion: unref(getAccordion),
+          collapse: unref(getCollapsed),
+          collapsedShowTitle: unref(getCollapsedShowTitle),
+          onMenuClick: handleMenuClick,
+        };
+      });
+      /**
+       * click menu
+       * @param menu
+       */
+      // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+      const localeStore = useLocaleStore();
+      function handleMenuClick(path: string, item) {
+        if (item) {
+          localeStore.setPathTitle(path, item.title || '');
+        }
+        go(path);
+      }
+
+      /**
+       * before click menu
+       * @param menu
+       */
+      async function beforeMenuClickFn(path: string) {
+        if (!isUrl(path)) {
+          return true;
+        }
+        openWindow(path);
+        return false;
+      }
+
+      function renderHeader() {
+        if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null;
+
+        return <AppLogo showTitle={!unref(getCollapsed)} class={unref(getLogoClass)} theme={unref(getComputedMenuTheme)} />;
+      }
+
+      function renderMenu() {
+        const { menus, ...menuProps } = unref(getCommonProps);
+        // console.log(menus);
+        if (!menus || !menus.length) return null;
+        return !props.isHorizontal ? (
+          <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
+        ) : (
+          <BasicMenu
+            {...(menuProps as any)}
+            isHorizontal={props.isHorizontal}
+            type={unref(getMenuType)}
+            showLogo={unref(getIsShowLogo)}
+            mode={unref(getComputedMenuMode as any)}
+            items={menus}
+          />
+        );
+      }
+
+      return () => {
+        return (
+          <>
+            {renderHeader()}
+            {unref(getUseScroll) ? <ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer> : renderMenu()}
+          </>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // 代码逻辑说明: 【QQYUN-5872】菜单优化，上下滚动条去掉
+  .scroll-container :deep(.scrollbar__bar) {
+    display: none;
+  }
+</style>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-menu';
+  @logo-prefix-cls: ~'@{namespace}-app-logo';
+
+  .@{prefix-cls} {
+    &-logo {
+      height: @header-height;
+      padding: 10px 4px 10px 10px;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+      }
+    }
+
+    &--mobile {
+      .@{logo-prefix-cls} {
+        &__title {
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/menu/useLayoutMenu.ts b/src/layouts/default/menu/useLayoutMenu.ts
new file mode 100644
index 0000000..3200db1
--- /dev/null
+++ b/src/layouts/default/menu/useLayoutMenu.ts
@@ -0,0 +1,117 @@
+import type { Menu } from '/@/router/types';
+import type { Ref } from 'vue';
+import { watch, unref, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { useThrottleFn } from '@vueuse/core';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { useAppInject } from '/@/hooks/web/useAppInject';
+import { PAGE_NOT_FOUND_NAME_404 } from '/@/router/constant';
+
+export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
+  // Menu array
+  const menusRef = ref<Menu[]>([]);
+  const { currentRoute } = useRouter();
+  const { getIsMobile } = useAppInject();
+  const permissionStore = usePermissionStore();
+  const { setMenuSetting, getIsHorizontal, getSplit, getMenuType } = useMenuSetting();
+
+  const throttleHandleSplitLeftMenu = useThrottleFn(handleSplitLeftMenu, 50);
+
+  const splitNotLeft = computed(() => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal));
+
+  const getSplitLeft = computed(() => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT);
+
+  const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
+
+  const normalType = computed(() => {
+    return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
+  });
+
+  watch(
+    [() => unref(currentRoute).path, () => unref(splitType)],
+    async ([path]: [string, MenuSplitTyeEnum]) => {
+      if (unref(splitNotLeft) || unref(getIsMobile)) return;
+      const { meta } = unref(currentRoute);
+      const currentActiveMenu = meta.currentActiveMenu as string;
+      // 顶部混合模式且顶部左侧组合菜单开始时
+      if (unref(getMenuType) === MenuTypeEnum.MIX && unref(getSplit)) { 
+        // 404页面时，跳转到重定向的路径
+        if (unref(currentRoute).name === PAGE_NOT_FOUND_NAME_404 && unref(currentRoute)?.redirectedFrom?.path) {
+          const menus = await getMenus();
+          const findItem = menus.find((item:any) => item.redirect === unref(currentRoute).path);
+          if (findItem) {
+            // 说明是从一级菜单重定向过来的
+            path = findItem.path;
+          }
+        }
+      }
+      let parentPath = await getCurrentParentPath(path);
+      if (!parentPath) {
+        parentPath = await getCurrentParentPath(currentActiveMenu);
+      }
+      parentPath && throttleHandleSplitLeftMenu(parentPath);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  // Menu changes
+  watch(
+    [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
+    () => {
+      genMenus();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  // split Menu changes
+  watch(
+    () => getSplit.value,
+    () => {
+      // if (unref(splitNotLeft)) return;
+      genMenus();
+    }
+  );
+
+  // Handle left menu split
+  async function handleSplitLeftMenu(parentPath: string) {
+    if (unref(getSplitLeft) || unref(getIsMobile)) return;
+
+    // spilt mode left
+    const children = await getChildrenMenus(parentPath);
+
+    if (!children || !children.length) {
+      setMenuSetting({ hidden: true });
+      menusRef.value = [];
+      return;
+    }
+
+    setMenuSetting({ hidden: false });
+    menusRef.value = children;
+  }
+
+  // get menus
+  async function genMenus() {
+    // normal mode
+    if (unref(normalType) || unref(getIsMobile)) {
+      menusRef.value = await getMenus();
+      return;
+    }
+
+    // split-top
+    if (unref(getSpiltTop)) {
+      const shallowMenus = await getShallowMenus();
+
+      menusRef.value = shallowMenus;
+      return;
+    }
+  }
+
+  return { menusRef };
+}
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
new file mode 100644
index 0000000..ff43bca
--- /dev/null
+++ b/src/layouts/default/setting/SettingDrawer.tsx
@@ -0,0 +1,367 @@
+import { defineComponent, computed, unref } from 'vue';
+import { BasicDrawer } from '/@/components/Drawer/index';
+import { Divider } from 'ant-design-vue';
+import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem } from './components';
+
+import { AppDarkModeToggle } from '/@/components/Application';
+
+import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+import { layoutHandler } from './handler';
+
+import {
+  HandlerEnum,
+  contentModeOptions,
+  topMenuAlignOptions,
+  getMenuTriggerOptions,
+  routerTransitionOptions,
+  menuTypeList,
+  mixSidebarTriggerOptions,
+  tabsThemeOptions,
+} from './enum';
+
+import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST } from '/@/settings/designSetting';
+
+const { t } = useI18n();
+
+export default defineComponent({
+  name: 'SettingDrawer',
+  setup(_, { attrs }) {
+    const {
+      getContentMode,
+      getShowFooter,
+      getShowBreadCrumb,
+      getShowBreadCrumbIcon,
+      getShowLogo,
+      getFullContent,
+      getColorWeak,
+      getGrayMode,
+      getLockTime,
+      getShowDarkModeToggle,
+      getThemeColor,
+      getAiIconShow,
+    } = useRootSetting();
+
+    const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } = useTransitionSetting();
+
+    const {
+      getIsHorizontal,
+      getShowMenu,
+      getMenuType,
+      getTrigger,
+      getCollapsedShowTitle,
+      getMenuFixed,
+      getCollapsed,
+      getCanDrag,
+      getTopMenuAlign,
+      getAccordion,
+      getMenuWidth,
+      getMenuBgColor,
+      getIsTopMenu,
+      getSplit,
+      getIsMixSidebar,
+      getCloseMixSidebarOnChange,
+      getMixSideTrigger,
+      getMixSideFixed,
+    } = useMenuSetting();
+
+    const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor, getShowSearch } = useHeaderSetting();
+
+    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();
+
+    const getShowMenuRef = computed(() => {
+      return unref(getShowMenu) && !unref(getIsHorizontal);
+    });
+
+    const isDev= import.meta.env.DEV
+
+    function renderSidebar() {
+      return (
+        <>
+          <TypePicker
+            menuTypeList={menuTypeList}
+            handler={(item: typeof menuTypeList[0]) => {
+              layoutHandler(HandlerEnum.CHANGE_LAYOUT, {
+                mode: item.mode,
+                type: item.type,
+                split: unref(getIsHorizontal) ? false : undefined,
+              });
+            }}
+            def={unref(getMenuType)}
+          />
+        </>
+      );
+    }
+
+    function renderHeaderTheme() {
+      return <ThemeColorPicker colorList={HEADER_PRESET_BG_COLOR_LIST} def={unref(getHeaderBgColor)} event={HandlerEnum.HEADER_THEME} />;
+    }
+
+    function renderSiderTheme() {
+      return <ThemeColorPicker colorList={SIDE_BAR_BG_COLOR_LIST} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME} />;
+    }
+
+    function renderMainTheme() {
+      return <ThemeColorPicker colorList={APP_PRESET_COLOR_LIST} def={unref(getThemeColor)} event={HandlerEnum.CHANGE_THEME_COLOR} />;
+    }
+
+    /**
+     * @description:
+     */
+    function renderFeatures() {
+      let triggerDef = unref(getTrigger);
+
+      const triggerOptions = getMenuTriggerOptions(unref(getSplit));
+      const some = triggerOptions.some((item) => item.value === triggerDef);
+      if (!some) {
+        triggerDef = TriggerEnum.FOOTER;
+      }
+
+      return (
+        <>
+          <SwitchItem
+            title={t('layout.setting.splitMenu')}
+            event={HandlerEnum.MENU_SPLIT}
+            def={unref(getSplit)}
+            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
+          />
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.mixSidebarFixed')}*/}
+          {/*  event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}*/}
+          {/*  def={unref(getMixSideFixed)}*/}
+          {/*  disabled={!unref(getIsMixSidebar)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.closeMixSidebarOnChange')}*/}
+          {/*  event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}*/}
+          {/*  def={unref(getCloseMixSidebarOnChange)}*/}
+          {/*  disabled={!unref(getIsMixSidebar)}*/}
+          {/*/>*/}
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.menuCollapse')}*/}
+          {/*  event={HandlerEnum.MENU_COLLAPSED}*/}
+          {/*  def={unref(getCollapsed)}*/}
+          {/*  disabled={!unref(getShowMenuRef)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.menuSearch')}*/}
+          {/*  event={HandlerEnum.HEADER_SEARCH}*/}
+          {/*  def={unref(getShowSearch)}*/}
+          {/*  disabled={!unref(getShowHeader)}*/}
+          {/*/>*/}
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.menuAccordion')}*/}
+          {/*  event={HandlerEnum.MENU_ACCORDION}*/}
+          {/*  def={unref(getAccordion)}*/}
+          {/*  disabled={!unref(getShowMenuRef)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.fixedHeader')}*/}
+          {/*  event={HandlerEnum.HEADER_FIXED}*/}
+          {/*  def={unref(getHeaderFixed)}*/}
+          {/*  disabled={!unref(getShowHeader)}*/}
+          {/*/>*/}
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.fixedSideBar')}*/}
+          {/*  event={HandlerEnum.MENU_FIXED}*/}
+          {/*  def={unref(getMenuFixed)}*/}
+          {/*  disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}*/}
+          {/*/>*/}
+          {/*<SelectItem*/}
+          {/*  title={t('layout.setting.mixSidebarTrigger')}*/}
+          {/*  event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}*/}
+          {/*  def={unref(getMixSideTrigger)}*/}
+          {/*  options={mixSidebarTriggerOptions}*/}
+          {/*  disabled={!unref(getIsMixSidebar)}*/}
+          {/*/>*/}
+          <SelectItem title={t('layout.setting.tabsTheme')} event={HandlerEnum.TABS_THEME} def={unref(getTabsTheme)} options={tabsThemeOptions} />
+          <SelectItem
+            title={t('layout.setting.topMenuLayout')}
+            event={HandlerEnum.MENU_TOP_ALIGN}
+            def={unref(getTopMenuAlign)}
+            options={topMenuAlignOptions}
+            disabled={!unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit)) || unref(getIsMixSidebar)}
+          />
+          <SelectItem
+            title={t('layout.setting.menuCollapseButton')}
+            event={HandlerEnum.MENU_TRIGGER}
+            def={triggerDef}
+            options={triggerOptions}
+            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
+          />
+          {
+            isDev && <SelectItem
+              title={t('layout.setting.contentMode')}
+              event={HandlerEnum.CONTENT_MODE}
+              def={unref(getContentMode)}
+              options={contentModeOptions}
+            />
+          }
+          {
+            isDev && <InputNumberItem
+              title={t('layout.setting.autoScreenLock')}
+              min={0}
+              event={HandlerEnum.LOCK_TIME}
+              defaultValue={unref(getLockTime)}
+              formatter={(value: string) => {
+                return parseInt(value) === 0 ? `0(${t('layout.setting.notAutoScreenLock')})` : `${value}${t('layout.setting.minute')}`;
+              }}
+            />
+          }
+          {
+            isDev && <InputNumberItem
+              title={t('layout.setting.expandedMenuWidth')}
+              max={600}
+              min={100}
+              step={10}
+              event={HandlerEnum.MENU_WIDTH}
+              disabled={!unref(getShowMenuRef)}
+              defaultValue={unref(getMenuWidth)}
+              formatter={(value: string) => `${parseInt(value)}px`}
+            />
+          }
+        </>
+      );
+    }
+
+    function renderContent() {
+      return (
+        <>
+          {
+            isDev && <SwitchItem
+              title={t('layout.setting.menuDrag')}
+              event={HandlerEnum.MENU_HAS_DRAG}
+              def={unref(getCanDrag)}
+              disabled={!unref(getShowMenuRef)}
+            />
+          }
+          {
+            isDev &&  <SwitchItem
+              title={t('layout.setting.collapseMenuDisplayName')}
+              event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
+              def={unref(getCollapsedShowTitle)}
+              disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
+            />
+          }
+          <SwitchItem title={t('layout.setting.tabs')} event={HandlerEnum.TABS_SHOW} def={unref(getShowMultipleTab)} />
+          <SwitchItem
+            title={t('layout.setting.breadcrumb')}
+            event={HandlerEnum.SHOW_BREADCRUMB}
+            def={unref(getShowBreadCrumb)}
+            disabled={!unref(getShowHeader)}
+          />
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.breadcrumbIcon')}*/}
+          {/*  event={HandlerEnum.SHOW_BREADCRUMB_ICON}*/}
+          {/*  def={unref(getShowBreadCrumbIcon)}*/}
+          {/*  disabled={!unref(getShowHeader)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.tabsRedoBtn')}*/}
+          {/*  event={HandlerEnum.TABS_SHOW_REDO}*/}
+          {/*  def={unref(getShowRedo)}*/}
+          {/*  disabled={!unref(getShowMultipleTab)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.tabsQuickBtn')}*/}
+          {/*  event={HandlerEnum.TABS_SHOW_QUICK}*/}
+          {/*  def={unref(getShowQuick)}*/}
+          {/*  disabled={!unref(getShowMultipleTab)}*/}
+          {/*/>*/}
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.tabsFoldBtn')}*/}
+          {/*  event={HandlerEnum.TABS_SHOW_FOLD}*/}
+          {/*  def={unref(getShowFold)}*/}
+          {/*  disabled={!unref(getShowMultipleTab)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.sidebar')}*/}
+          {/*  event={HandlerEnum.MENU_SHOW_SIDEBAR}*/}
+          {/*  def={unref(getShowMenu)}*/}
+          {/*  disabled={unref(getIsHorizontal)}*/}
+          {/*/>*/}
+
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.header')}*/}
+          {/*  event={HandlerEnum.HEADER_SHOW}*/}
+          {/*  def={unref(getShowHeader)}*/}
+          {/*/>*/}
+          {/*<SwitchItem*/}
+          {/*  title="Logo"*/}
+          {/*  event={HandlerEnum.SHOW_LOGO}*/}
+          {/*  def={unref(getShowLogo)}*/}
+          {/*  disabled={unref(getIsMixSidebar)}*/}
+          {/*/>*/}
+          <SwitchItem title={t('layout.setting.footer')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)} />
+          {/*<SwitchItem*/}
+          {/*  title={t('layout.setting.fullContent')}*/}
+          {/*  event={HandlerEnum.FULL_CONTENT}*/}
+          {/*  def={unref(getFullContent)}*/}
+          {/*/>*/}
+
+          <SwitchItem title={t('layout.setting.grayMode')} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)} />
+
+          <SwitchItem title={t('layout.setting.colorWeak')} event={HandlerEnum.COLOR_WEAK} def={unref(getColorWeak)} />
+
+           <SwitchItem title={t('layout.setting.aiIconSHow')} event={HandlerEnum.AI_ICON_SHOW} def={unref(getAiIconShow)} />
+        </>
+      );
+    }
+
+    function renderTransition() {
+      return (
+        <>
+          <SwitchItem title={t('layout.setting.progress')} event={HandlerEnum.OPEN_PROGRESS} def={unref(getOpenNProgress)} />
+          <SwitchItem title={t('layout.setting.switchLoading')} event={HandlerEnum.OPEN_PAGE_LOADING} def={unref(getOpenPageLoading)} />
+
+          <SwitchItem title={t('layout.setting.switchAnimation')} event={HandlerEnum.OPEN_ROUTE_TRANSITION} def={unref(getEnableTransition)} />
+
+          <SelectItem
+            title={t('layout.setting.animationType')}
+            event={HandlerEnum.ROUTER_TRANSITION}
+            def={unref(getBasicTransition)}
+            options={routerTransitionOptions}
+            disabled={!unref(getEnableTransition)}
+          />
+        </>
+      );
+    }
+
+    return () => (
+      <BasicDrawer {...attrs} title={t('layout.setting.drawerTitle')} width={330} class="setting-drawer">
+        {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
+        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
+        <Divider>{() => t('layout.setting.navMode')}</Divider>
+        {renderSidebar()}
+        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
+        {renderMainTheme()}
+        <Divider>{() => t('layout.setting.headerTheme')}</Divider>
+        {renderHeaderTheme()}
+        <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
+        {renderSiderTheme()}
+        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
+        {renderFeatures()}
+        {/*<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>*/}
+        {renderContent()}
+        {/*<Divider>{() => t('layout.setting.animation')}</Divider>*/}
+        {/*{renderTransition()}*/}
+        <Divider />
+        <SettingFooter />
+      </BasicDrawer>
+    );
+  },
+});
diff --git a/src/layouts/default/setting/components/InputNumberItem.vue b/src/layouts/default/setting/components/InputNumberItem.vue
new file mode 100644
index 0000000..237f7d6
--- /dev/null
+++ b/src/layouts/default/setting/components/InputNumberItem.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <InputNumber :max="7200" v-bind="$attrs" size="small" :class="`${prefixCls}-input-number`" @change="handleChange" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { InputNumber } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'InputNumberItem',
+    components: { InputNumber },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      title: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-input-number-item');
+
+      function handleChange(e) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-input-number-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-input-number {
+      width: 126px;
+    }
+  }
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+</style>
diff --git a/src/layouts/default/setting/components/SelectItem.vue b/src/layouts/default/setting/components/SelectItem.vue
new file mode 100644
index 0000000..393c78a
--- /dev/null
+++ b/src/layouts/default/setting/components/SelectItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Select v-bind="getBindValue" :class="`${prefixCls}-select`" @change="handleChange" :disabled="disabled" size="small" :options="options" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Select } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SelectItem',
+    components: { Select },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      initValue: {
+        type: [String, Number] as PropType<string | number>,
+      },
+      options: {
+        type: Array as PropType<LabelValueOptions>,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-select-item');
+      const getBindValue = computed(() => {
+        return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
+      });
+
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-select-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+
+    &-select {
+      width: 126px;
+    }
+  }
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+</style>
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
new file mode 100644
index 0000000..54471a9
--- /dev/null
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -0,0 +1,99 @@
+<template>
+  <div :class="prefixCls">
+    <a-button v-if="isDev" type="primary" block @click="handleCopy">
+      <CopyOutlined class="mr-2" />
+      {{ t('layout.setting.copyBtn') }}
+    </a-button>
+
+    <a-button color="warning" block @click="handleResetSetting" class="my-3">
+      <RedoOutlined class="mr-2" />
+      {{ t('common.resetText') }}
+    </a-button>
+
+    <a-button color="error" block @click="handleClearAndRedo">
+      <RedoOutlined class="mr-2" />
+      {{ t('layout.setting.clearBtn') }}
+    </a-button>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref } from 'vue';
+
+  import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
+
+  import { useAppStore } from '/@/store/modules/app';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useUserStore } from '/@/store/modules/user';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+  import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+  import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+  import defaultSetting from '/@/settings/projectSetting';
+
+  export default defineComponent({
+    name: 'SettingFooter',
+    components: { CopyOutlined, RedoOutlined },
+    setup() {
+      const permissionStore = usePermissionStore();
+      const { prefixCls } = useDesign('setting-footer');
+      const { t } = useI18n();
+      const { createSuccessModal, createMessage } = useMessage();
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const appStore = useAppStore();
+
+      function handleCopy() {
+        const { isSuccessRef } = useCopyToClipboard(JSON.stringify(unref(appStore.getProjectConfig), null, 2));
+        unref(isSuccessRef) &&
+          createSuccessModal({
+            title: t('layout.setting.operatingTitle'),
+            content: t('layout.setting.operatingContent'),
+          });
+      }
+      function handleResetSetting() {
+        try {
+          appStore.setProjectConfig(defaultSetting);
+          const { colorWeak, grayMode } = defaultSetting;
+          // updateTheme(themeColor);
+          updateColorWeak(colorWeak);
+          updateGrayMode(grayMode);
+          createMessage.success(t('layout.setting.resetSuccess'));
+        } catch (error) {
+          createMessage.error(error);
+        }
+      }
+
+      function handleClearAndRedo() {
+        localStorage.clear();
+        appStore.resetAllState();
+        permissionStore.resetState();
+        tabStore.resetState();
+        userStore.resetState();
+        location.reload();
+      }
+      const isDev = import.meta.env.DEV;
+      return {
+        prefixCls,
+        t,
+        handleCopy,
+        handleResetSetting,
+        handleClearAndRedo,
+        isDev,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-footer';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>
diff --git a/src/layouts/default/setting/components/SwitchItem.vue b/src/layouts/default/setting/components/SwitchItem.vue
new file mode 100644
index 0000000..09962f4
--- /dev/null
+++ b/src/layouts/default/setting/components/SwitchItem.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="prefixCls">
+    <span> {{ title }}</span>
+    <Switch
+      v-bind="getBindValue"
+      @change="handleChange"
+      :disabled="disabled"
+      :checkedChildren="t('layout.setting.on')"
+      :unCheckedChildren="t('layout.setting.off')"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, computed } from 'vue';
+
+  import { Switch } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+
+  export default defineComponent({
+    name: 'SwitchItem',
+    components: { Switch },
+    props: {
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      disabled: {
+        type: Boolean,
+      },
+      title: {
+        type: String,
+      },
+      def: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-switch-item');
+      const { t } = useI18n();
+
+      const getBindValue = computed(() => {
+        return props.def ? { checked: props.def } : {};
+      });
+      function handleChange(e: ChangeEvent) {
+        props.event && baseHandler(props.event, e);
+      }
+      return {
+        prefixCls,
+        t,
+        handleChange,
+        getBindValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-switch-item';
+
+  .@{prefix-cls} {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+</style>
diff --git a/src/layouts/default/setting/components/ThemeColorPicker.vue b/src/layouts/default/setting/components/ThemeColorPicker.vue
new file mode 100644
index 0000000..c014626
--- /dev/null
+++ b/src/layouts/default/setting/components/ThemeColorPicker.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :class="prefixCls">
+    <template v-for="color in colorList || []" :key="color">
+      <span
+        @click=" !isDisabledColor && handleClick(color)"
+        :class="[
+          `${prefixCls}__item`,
+          {
+            [`${prefixCls}__item--active`]: def === color,
+            [`${prefixCls}__item--black`]: color == '#ffffff',
+            disabledColor: isDisabledColor,
+          },
+        ]"
+        :style="{ background: color }"
+      >
+        <CheckOutlined />
+      </span>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, watch, ref } from 'vue';
+  import { CheckOutlined } from '@ant-design/icons-vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { baseHandler } from '../handler';
+  import { HandlerEnum } from '../enum';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
+
+  export default defineComponent({
+    name: 'ThemeColorPicker',
+    components: { CheckOutlined },
+    props: {
+      colorList: {
+        type: Array as PropType<string[]>,
+        defualt: [],
+      },
+      event: {
+        type: Number as PropType<HandlerEnum>,
+      },
+      def: {
+        type: String,
+      },
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('setting-theme-picker');
+      const { getDarkMode } = useRootSetting();
+      const isDisabledColor = ref(false);
+
+      function handleClick(color: string) {
+        props.event && baseHandler(props.event, color);
+      }
+      // 代码逻辑说明: 【QQYUN-8927】暗黑主题下不允许切换顶栏主题和菜单主题
+      watch(
+        () => getDarkMode.value,
+        (newValue) => {
+          isDisabledColor.value = props.event === 1 ? false : newValue === ThemeEnum.DARK;
+        },
+        { immediate: true }
+      );
+      return {
+        prefixCls,
+        handleClick,
+        isDisabledColor
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-setting-theme-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 16px 0;
+    justify-content: space-around;
+    // 代码逻辑说明: 【QQYUN-7677】antd4兼容改造，勾选垂直居中
+    line-height: 1.3;
+    &__item {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      border-radius: 2px;
+      &.disabledColor {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+      svg {
+        display: none;
+      }
+
+      &--active {
+        svg {
+          display: inline-block;
+          margin: 0 0 3px 3px;
+          font-size: 12px;
+          fill: @white !important;
+        }
+      }
+      &--black {
+        svg {
+          fill: #000 !important;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
new file mode 100644
index 0000000..ab46aa8
--- /dev/null
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -0,0 +1,178 @@
+<template>
+  <div :class="prefixCls">
+    <template v-for="item in menuTypeList || []" :key="item.title">
+      <Tooltip :title="item.title" placement="bottom">
+        <div
+          @click="handler(item)"
+          :class="[
+            `${prefixCls}__item`,
+            `${prefixCls}__item--${item.type}`,
+            {
+              [`${prefixCls}__item--active`]: def === item.type,
+            },
+          ]"
+        >
+          <div class="mix-sidebar"></div>
+        </div>
+      </Tooltip>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import { Tooltip } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { menuTypeList } from '../enum';
+  export default defineComponent({
+    name: 'MenuTypePicker',
+    components: { Tooltip },
+    props: {
+      menuTypeList: {
+        type: Array as PropType<typeof menuTypeList>,
+        defualt: () => [],
+      },
+      handler: {
+        type: Function as PropType<Fn>,
+        default: () => ({}),
+      },
+      def: {
+        type: String,
+        default: '',
+      },
+    },
+    setup() {
+      const { prefixCls } = useDesign('setting-menu-type-picker');
+
+      return {
+        prefixCls,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-setting-menu-type-picker';
+
+  .@{prefix-cls} {
+    display: flex;
+
+    &__item {
+      position: relative;
+      width: 56px;
+      height: 48px;
+      margin-right: 16px;
+      overflow: hidden;
+      cursor: pointer;
+      background-color: #f0f2f5;
+      border-radius: 4px;
+      box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
+
+      &::before,
+      &::after {
+        position: absolute;
+        content: '';
+      }
+
+      &--sidebar,
+      &--light {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 33%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+      }
+
+      &--mix {
+        &::before {
+          top: 0;
+          left: 0;
+          width: 33%;
+          height: 100%;
+          background-color: #fff;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--top-menu {
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #273352;
+        }
+      }
+
+      &--dark {
+        background-color: #273352;
+      }
+
+      &--mix-sidebar {
+        &::before {
+          top: 0;
+          left: 0;
+          z-index: 1;
+          width: 25%;
+          height: 100%;
+          background-color: #273352;
+          border-radius: 4px 0 0 4px;
+        }
+
+        &::after {
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 25%;
+          background-color: #fff;
+        }
+
+        .mix-sidebar {
+          position: absolute;
+          left: 25%;
+          width: 15%;
+          height: 100%;
+          background-color: #fff;
+        }
+      }
+
+      &:hover,
+      &--active {
+        padding: 12px;
+        border: 2px solid @primary-color;
+
+        &::before,
+        &::after {
+          border-radius: 0;
+        }
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/layouts/default/setting/components/index.ts b/src/layouts/default/setting/components/index.ts
new file mode 100644
index 0000000..bd24888
--- /dev/null
+++ b/src/layouts/default/setting/components/index.ts
@@ -0,0 +1,8 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
+export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'));
+export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'));
+export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
+export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
+export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));
diff --git a/src/layouts/default/setting/enum.ts b/src/layouts/default/setting/enum.ts
new file mode 100644
index 0000000..8111d8e
--- /dev/null
+++ b/src/layouts/default/setting/enum.ts
@@ -0,0 +1,168 @@
+import { TabsThemeEnum, ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum, TopMenuAlignEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
+
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+export enum HandlerEnum {
+  CHANGE_LAYOUT,
+  CHANGE_THEME_COLOR,
+  CHANGE_THEME,
+  // menu
+  MENU_HAS_DRAG,
+  MENU_ACCORDION,
+  MENU_TRIGGER,
+  MENU_TOP_ALIGN,
+  MENU_COLLAPSED,
+  MENU_COLLAPSED_SHOW_TITLE,
+  MENU_WIDTH,
+  MENU_SHOW_SIDEBAR,
+  MENU_THEME,
+  MENU_SPLIT,
+  MENU_FIXED,
+  MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
+  MENU_TRIGGER_MIX_SIDEBAR,
+  MENU_FIXED_MIX_SIDEBAR,
+
+  // header
+  HEADER_SHOW,
+  HEADER_THEME,
+  HEADER_FIXED,
+
+  HEADER_SEARCH,
+
+  TABS_SHOW_QUICK,
+  TABS_SHOW_REDO,
+  TABS_SHOW,
+  TABS_SHOW_FOLD,
+  TABS_THEME,
+
+  LOCK_TIME,
+  FULL_CONTENT,
+  CONTENT_MODE,
+  SHOW_BREADCRUMB,
+  SHOW_BREADCRUMB_ICON,
+  GRAY_MODE,
+  COLOR_WEAK,
+  SHOW_LOGO,
+  SHOW_FOOTER,
+
+  ROUTER_TRANSITION,
+  OPEN_PROGRESS,
+  OPEN_PAGE_LOADING,
+  OPEN_ROUTE_TRANSITION,
+  AI_ICON_SHOW,
+}
+
+// 标签页样式
+export const tabsThemeOptions = [
+  {
+    value: TabsThemeEnum.SMOOTH,
+    label: t('layout.setting.tabsThemeSmooth'),
+  },
+  {
+    value: TabsThemeEnum.CARD,
+    label: t('layout.setting.tabsThemeCard'),
+  },
+  {
+    value: TabsThemeEnum.SIMPLE,
+    label: t('layout.setting.tabsThemeSimple'),
+  },
+];
+
+export const contentModeOptions = [
+  {
+    value: ContentEnum.FULL,
+    label: t('layout.setting.contentModeFull'),
+  },
+  {
+    value: ContentEnum.FIXED,
+    label: t('layout.setting.contentModeFixed'),
+  },
+];
+
+export const topMenuAlignOptions = [
+  {
+    value: TopMenuAlignEnum.CENTER,
+    label: t('layout.setting.topMenuAlignRight'),
+  },
+  {
+    value: TopMenuAlignEnum.START,
+    label: t('layout.setting.topMenuAlignLeft'),
+  },
+  {
+    value: TopMenuAlignEnum.END,
+    label: t('layout.setting.topMenuAlignCenter'),
+  },
+];
+
+export const getMenuTriggerOptions = (hideTop: boolean) => {
+  return [
+    {
+      value: TriggerEnum.NONE,
+      label: t('layout.setting.menuTriggerNone'),
+    },
+    {
+      value: TriggerEnum.FOOTER,
+      label: t('layout.setting.menuTriggerBottom'),
+    },
+    ...(hideTop
+      ? []
+      : [
+          {
+            value: TriggerEnum.HEADER,
+            label: t('layout.setting.menuTriggerTop'),
+          },
+        ]),
+  ];
+};
+
+export const routerTransitionOptions = [
+  RouterTransitionEnum.ZOOM_FADE,
+  RouterTransitionEnum.FADE,
+  RouterTransitionEnum.ZOOM_OUT,
+  RouterTransitionEnum.FADE_SIDE,
+  RouterTransitionEnum.FADE_BOTTOM,
+  RouterTransitionEnum.FADE_SCALE,
+].map((item) => {
+  return {
+    label: item,
+    value: item,
+  };
+});
+
+export const menuTypeList = [
+  {
+    title: t('layout.setting.menuTypeSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.SIDEBAR,
+  },
+  {
+    title: t('layout.setting.menuTypeMix'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX,
+  },
+
+  {
+    title: t('layout.setting.menuTypeTopMenu'),
+    mode: MenuModeEnum.HORIZONTAL,
+    type: MenuTypeEnum.TOP_MENU,
+  },
+  {
+    title: t('layout.setting.menuTypeMixSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX_SIDEBAR,
+  },
+];
+
+export const mixSidebarTriggerOptions = [
+  {
+    value: MixSidebarTriggerEnum.HOVER,
+    label: t('layout.setting.triggerHover'),
+  },
+  {
+    value: MixSidebarTriggerEnum.CLICK,
+    label: t('layout.setting.triggerClick'),
+  },
+];
diff --git a/src/layouts/default/setting/handler.ts b/src/layouts/default/setting/handler.ts
new file mode 100644
index 0000000..e70d0d4
--- /dev/null
+++ b/src/layouts/default/setting/handler.ts
@@ -0,0 +1,248 @@
+import { HandlerEnum, tabsThemeOptions} from './enum';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+
+import { useAppStore } from '/@/store/modules/app';
+import { ProjectConfig } from '/#/config';
+import { changeTheme } from '/@/logics/theme';
+import { updateDarkTheme } from '/@/logics/theme/dark';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { getConfigByMenuType } from '../../../utils/getConfigByMenuType';
+import { isObject } from '/@/utils/is';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { APP__THEME__COLOR } from '/@/enums/cacheEnum';
+
+/**
+ *  2024-04-07
+ *  liaozhiyang
+ *  切换导航栏模式都走这个方法，每个模式都会有固定的顶部和菜单颜色搭配。暗黑模式则不走固定搭配
+ * */
+export function layoutHandler(event: HandlerEnum, value: any) {
+  const isHTopMenu = isObject(value) && value.type == MenuTypeEnum.TOP_MENU && value.mode == MenuModeEnum.HORIZONTAL;
+  const isMixMenu = isObject(value) && value.type == MenuTypeEnum.MIX && value.mode == MenuModeEnum.INLINE;
+  const isMixSidebarMenu = isObject(value) && value.type == MenuTypeEnum.MIX_SIDEBAR && value.mode == MenuModeEnum.INLINE;
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  // 根据菜单类型动态获取主题色
+  const {themeColor: dynamicThemeColor, headerBgColor, sideBgColor } = getConfigByMenuType(value.type);
+  if (isHTopMenu) {
+    baseHandler(event, value);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
+    baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
+    if (darkMode) {
+      updateHeaderBgColor();
+      updateSidebarBgColor();
+    }
+    baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
+  } else if (isMixMenu) {
+    baseHandler(event, value);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
+    if (darkMode) {
+      updateHeaderBgColor();
+      updateSidebarBgColor();
+    }
+    // 顶部混合导航模式使用动态主题色
+    baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
+    baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
+  } else if (isMixSidebarMenu) {
+    baseHandler(event, value);
+    baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
+    if (darkMode) {
+      updateHeaderBgColor();
+      updateSidebarBgColor();
+    }
+    baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
+  } else {
+    baseHandler(event, value);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
+    if (darkMode) {
+      updateHeaderBgColor();
+      updateSidebarBgColor();
+    }
+    baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
+    baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
+  }
+  // 代码逻辑说明: 【QQYUN-13600】默认顶部混合导航模式且启用顶部左侧导航，切换到其他模式时导航刷新后菜单样式混乱
+  if (isMixMenu) {
+    baseHandler(HandlerEnum.MENU_SPLIT, true);
+  } else {
+    baseHandler(HandlerEnum.MENU_SPLIT, false);
+  }
+}
+
+export function baseHandler(event: HandlerEnum, value: any) {
+  const appStore = useAppStore();
+  const config = handler(event, value);
+  appStore.setProjectConfig(config);
+  if (event === HandlerEnum.CHANGE_THEME) {
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  }
+}
+
+export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
+  const appStore = useAppStore();
+
+  const { getThemeColor, getDarkMode } = useRootSetting();
+  switch (event) {
+    case HandlerEnum.CHANGE_LAYOUT:
+      const { mode, type, split } = value;
+      const splitOpt = split === undefined ? { split } : {};
+
+      return {
+        menuSetting: {
+          mode,
+          type,
+          collapsed: false,
+          show: true,
+          hidden: false,
+          ...splitOpt,
+        },
+      };
+
+    case HandlerEnum.CHANGE_THEME_COLOR:
+      if (getThemeColor.value === value) {
+        return {};
+      }
+      // 代码逻辑说明: 【QQYUN-8925】系统主题颜色（供页面加载使用）
+      localStorage.setItem(APP__THEME__COLOR, value);
+      changeTheme(value);
+
+      return { themeColor: value };
+
+    case HandlerEnum.CHANGE_THEME:
+      if (getDarkMode.value === value) {
+        return {};
+      }
+      updateDarkTheme(value);
+
+      return {};
+
+    case HandlerEnum.MENU_HAS_DRAG:
+      return { menuSetting: { canDrag: value } };
+
+    case HandlerEnum.MENU_ACCORDION:
+      return { menuSetting: { accordion: value } };
+
+    case HandlerEnum.MENU_TRIGGER:
+      return { menuSetting: { trigger: value } };
+
+    case HandlerEnum.MENU_TOP_ALIGN:
+      return { menuSetting: { topMenuAlign: value } };
+
+    case HandlerEnum.MENU_COLLAPSED:
+      return { menuSetting: { collapsed: value } };
+
+    case HandlerEnum.MENU_WIDTH:
+      return { menuSetting: { menuWidth: value } };
+
+    case HandlerEnum.MENU_SHOW_SIDEBAR:
+      return { menuSetting: { show: value } };
+
+    case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menuSetting: { collapsedShowTitle: value } };
+
+    case HandlerEnum.MENU_THEME:
+      updateSidebarBgColor(value);
+      return { menuSetting: { bgColor: value } };
+
+    case HandlerEnum.MENU_SPLIT:
+      return { menuSetting: { split: value } };
+
+    case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      return { menuSetting: { closeMixSidebarOnChange: value } };
+
+    case HandlerEnum.MENU_FIXED:
+      return { menuSetting: { fixed: value } };
+
+    case HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      return { menuSetting: { mixSideTrigger: value } };
+
+    case HandlerEnum.MENU_FIXED_MIX_SIDEBAR:
+      return { menuSetting: { mixSideFixed: value } };
+
+    // ============transition==================
+    case HandlerEnum.OPEN_PAGE_LOADING:
+      appStore.setPageLoading(false);
+      return { transitionSetting: { openPageLoading: value } };
+
+    case HandlerEnum.ROUTER_TRANSITION:
+      return { transitionSetting: { basicTransition: value } };
+
+    case HandlerEnum.OPEN_ROUTE_TRANSITION:
+      return { transitionSetting: { enable: value } };
+
+    case HandlerEnum.OPEN_PROGRESS:
+      return { transitionSetting: { openNProgress: value } };
+    // ============root==================
+
+    case HandlerEnum.LOCK_TIME:
+      return { lockTime: value };
+
+    case HandlerEnum.FULL_CONTENT:
+      return { fullContent: value };
+
+    case HandlerEnum.CONTENT_MODE:
+      return { contentMode: value };
+
+    case HandlerEnum.SHOW_BREADCRUMB:
+      return { showBreadCrumb: value };
+
+    case HandlerEnum.SHOW_BREADCRUMB_ICON:
+      return { showBreadCrumbIcon: value };
+
+    case HandlerEnum.GRAY_MODE:
+      updateGrayMode(value);
+      return { grayMode: value };
+
+    case HandlerEnum.SHOW_FOOTER:
+      return { showFooter: value };
+
+    case HandlerEnum.COLOR_WEAK:
+      updateColorWeak(value);
+      return { colorWeak: value };
+    // 代码逻辑说明: 【QQYUN-10952】AI助手支持通过设置来配置是否显示
+    case HandlerEnum.AI_ICON_SHOW:
+      return { aiIconShow: value };
+    case HandlerEnum.SHOW_LOGO:
+      return { showLogo: value };
+
+    // ============tabs==================
+    case HandlerEnum.TABS_SHOW_QUICK:
+      return { multiTabsSetting: { showQuick: value } };
+
+    case HandlerEnum.TABS_SHOW:
+      return { multiTabsSetting: { show: value } };
+
+    case HandlerEnum.TABS_SHOW_REDO:
+      return { multiTabsSetting: { showRedo: value } };
+
+    case HandlerEnum.TABS_SHOW_FOLD:
+      return { multiTabsSetting: { showFold: value } };
+
+    case HandlerEnum.TABS_THEME:
+      return { multiTabsSetting: { theme: value } };
+
+    // ============header==================
+    case HandlerEnum.HEADER_THEME:
+      updateHeaderBgColor(value);
+      return { headerSetting: { bgColor: value } };
+
+    case HandlerEnum.HEADER_SEARCH:
+      return { headerSetting: { showSearch: value } };
+
+    case HandlerEnum.HEADER_FIXED:
+      return { headerSetting: { fixed: value } };
+
+    case HandlerEnum.HEADER_SHOW:
+      return { headerSetting: { show: value } };
+    default:
+      return {};
+  }
+}
diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue
new file mode 100644
index 0000000..9c5bb87
--- /dev/null
+++ b/src/layouts/default/setting/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div @click="openDrawer(true)">
+    <Icon icon="ion:settings-outline" />
+    <SettingDrawer @register="register" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import SettingDrawer from './SettingDrawer';
+  import Icon from '/@/components/Icon';
+
+  import { useDrawer } from '/@/components/Drawer';
+
+  export default defineComponent({
+    name: 'SettingButton',
+    components: { SettingDrawer, Icon },
+    setup() {
+      const [register, { openDrawer }] = useDrawer();
+
+      return {
+        register,
+        openDrawer,
+      };
+    },
+  });
+</script>
diff --git a/src/layouts/default/sider/DragBar.vue b/src/layouts/default/sider/DragBar.vue
new file mode 100644
index 0000000..3bc6fb9
--- /dev/null
+++ b/src/layouts/default/sider/DragBar.vue
@@ -0,0 +1,66 @@
+<template>
+  <div :class="getClass" :style="getDragBarStyle"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'DargBar',
+    props: {
+      mobile: Boolean,
+    },
+    setup(props) {
+      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
+
+      const { prefixCls } = useDesign('darg-bar');
+      const getDragBarStyle = computed(() => {
+        if (unref(getCollapsed)) {
+          return { left: `${unref(getMiniWidthNumber)}px` };
+        }
+        return {};
+      });
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
+          },
+        ];
+      });
+
+      return {
+        prefixCls,
+        getDragBarStyle,
+        getClass,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-darg-bar';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: @side-drag-z-index;
+    width: 2px;
+    height: 100%;
+    cursor: col-resize;
+    border-top: none;
+    border-bottom: none;
+
+    &--hide {
+      display: none;
+    }
+
+    &:hover {
+      background-color: @primary-color;
+      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+    }
+  }
+</style>
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
new file mode 100644
index 0000000..d785280
--- /dev/null
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -0,0 +1,189 @@
+<template>
+  <div v-if="getMenuFixed && !getIsMobile" :style="getHiddenDomStyle" v-show="showClassSideBarRef"></div>
+  <Sider
+    v-show="showClassSideBarRef"
+    ref="sideRef"
+    breakpoint="lg"
+    collapsible
+    :class="getSiderClass"
+    :width="getMenuWidth"
+    :collapsed="getCollapsed"
+    :collapsedWidth="getCollapsedWidth"
+    :theme="getMenuTheme"
+    @breakpoint="onBreakpointChange"
+    :trigger="getTrigger"
+    v-bind="getTriggerAttr"
+  >
+    <template #trigger v-if="getShowTrigger">
+      <LayoutTrigger />
+    </template>
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
+    <DragBar ref="dragBarRef" />
+  </Sider>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
+
+  import { Layout } from 'ant-design-vue';
+  import LayoutMenu from '../menu/index.vue';
+  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
+
+  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+
+  import { useAppStore } from "@/store/modules/app";
+  import { useGlobSetting } from "/@/hooks/setting";
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import DragBar from './DragBar.vue';
+
+  export default defineComponent({
+    name: 'LayoutSideBar',
+    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
+    setup() {
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+
+      const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
+        useMenuSetting();
+
+      const { prefixCls } = useDesign('layout-sideBar');
+
+      const glob = useGlobSetting()
+      const appStore = useAppStore()
+
+      const { getIsMobile } = useAppInject();
+
+      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+
+      useDragLine(sideRef, dragBarRef);
+
+      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+
+      const getMode = computed(() => {
+        return unref(getSplit) ? MenuModeEnum.INLINE : null;
+      });
+
+      const getSplitType = computed(() => {
+        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+      });
+
+      const showClassSideBarRef = computed(() => {
+        // 控制是否显示侧边栏
+        if (appStore.getLayoutHideSider) {
+          return false;
+        }
+        return unref(getSplit) ? !unref(getMenuHidden) : true;
+      });
+
+      const getSiderClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--fixed`]: unref(getMenuFixed),
+            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+            // 【JEECG作为乾坤子应用】
+            [`${prefixCls}--qiankun-micro`]: glob.isQiankunMicro,
+          },
+        ];
+      });
+
+      const getHiddenDomStyle = computed((): CSSProperties => {
+        const width = `${unref(getRealWidth)}px`;
+        return {
+          width: width,
+          overflow: 'hidden',
+          flex: `0 0 ${width}`,
+          maxWidth: width,
+          minWidth: width,
+          transition: 'all 0.2s',
+        };
+      });
+
+      // 在此处使用计算量可能会导致sider异常
+      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
+      const getTrigger = h(LayoutTrigger);
+
+      return {
+        prefixCls,
+        sideRef,
+        dragBarRef,
+        getIsMobile,
+        getHiddenDomStyle,
+        getSiderClass,
+        getTrigger,
+        getTriggerAttr,
+        getCollapsedWidth,
+        getMenuFixed,
+        showClassSideBarRef,
+        getMenuWidth,
+        getCollapsed,
+        getMenuTheme,
+        onBreakpointChange,
+        getMode,
+        getSplitType,
+        getShowTrigger,
+        toggleCollapsed,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-sideBar';
+
+  .@{prefix-cls} {
+    z-index: @layout-sider-fixed-z-index;
+
+    &--fixed {
+      position: fixed !important;
+      top: 0;
+      left: 0;
+      height: 100%;
+    }
+
+    // 【JEECG作为乾坤子应用】
+    &--qiankun-micro {
+      position: absolute !important;
+    }
+
+    &--mix {
+      top: @header-height;
+      height: calc(100% - @header-height);
+    }
+
+    &.ant-layout-sider-dark {
+      background-color: @sider-dark-bg-color;
+
+      .ant-layout-sider-trigger {
+        color: darken(@white, 25%);
+        background-color: @trigger-dark-bg-color;
+
+        &:hover {
+          color: @white;
+          background-color: @trigger-dark-hover-bg-color;
+        }
+      }
+    }
+
+    &:not(.ant-layout-sider-dark) {
+      // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+      .ant-layout-sider-trigger {
+        color: @text-color-base;
+        border-top: 1px solid @border-color-light;
+      }
+    }
+
+    .ant-layout-sider-zero-width-trigger {
+      top: 40%;
+      z-index: 10;
+    }
+
+    & .ant-layout-sider-trigger {
+      height: 36px;
+      line-height: 36px;
+    }
+  }
+</style>
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
new file mode 100644
index 0000000..5f6a36a
--- /dev/null
+++ b/src/layouts/default/sider/MixSider.vue
@@ -0,0 +1,593 @@
+<template>
+  <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
+  <div
+    v-click-outside="handleClickOutside"
+    :style="getWrapStyle"
+    :class="[
+      prefixCls,
+      getMenuTheme,
+      {
+        open: openMenu,
+        mini: getCollapsed,
+        bright: isThemeBright,
+      },
+    ]"
+    v-bind="getMenuEvents"
+  >
+    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
+
+    <LayoutTrigger :class="`${prefixCls}-trigger`" />
+
+    <ScrollContainer>
+      <ul :class="`${prefixCls}-module`">
+        <li
+          :class="[
+            `${prefixCls}-module__item `,
+            {
+              [`${prefixCls}-module__item--active`]: item.path === activePath,
+            },
+          ]"
+          v-bind="getItemEvents(item)"
+          v-for="item in menuModules"
+          :key="item.path"
+        >
+          <SimpleMenuTag :item="item" collapseParent dot />
+          <Icon :class="`${prefixCls}-module__icon`" :size="getCollapsed ? 16 : 20" :icon="item.icon || (item.meta && item.meta.icon)" />
+          <p :class="`${prefixCls}-module__name`">
+            {{ t(item.name) }}
+          </p>
+        </li>
+      </ul>
+    </ScrollContainer>
+
+    <div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
+      <div
+        v-show="openMenu"
+        :class="[
+          `${prefixCls}-menu-list__title`,
+          {
+            show: openMenu,
+          },
+        ]"
+      >
+        <span class="text"> {{ shortTitle }}</span>
+        <Icon :size="16" :icon="getMixSideFixed ? 'ri:pushpin-2-fill' : 'ri:pushpin-2-line'" class="pushpin" @click="handleFixedMenu" />
+      </div>
+      <ScrollContainer :class="`${prefixCls}-menu-list__content`">
+        <SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menuClick="handleMenuClick" />
+      </ScrollContainer>
+      <div v-show="getShowDragBar && openMenu" :class="`${prefixCls}-drag-bar`" ref="dragBarRef"></div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { Menu } from '/@/router/types';
+  import type { CSSProperties } from 'vue';
+  import { computed, defineComponent, onMounted, ref, unref, watch} from 'vue';
+  import type { RouteLocationNormalized } from 'vue-router';
+  import { ScrollContainer } from '/@/components/Container';
+  import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
+  import { Icon } from '/@/components/Icon';
+  import { AppLogo } from '/@/components/Application';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDragLine } from './useLayoutSider';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+  import clickOutside from '/@/directives/clickOutside';
+  import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import LayoutTrigger from '../trigger/index.vue';
+  import { useAppStore } from '/@/store/modules/app';
+
+  export default defineComponent({
+    name: 'LayoutMixSider',
+    components: {
+      ScrollContainer,
+      AppLogo,
+      SimpleMenu,
+      Icon,
+      LayoutTrigger,
+      SimpleMenuTag,
+    },
+    directives: {
+      clickOutside,
+    },
+    setup() {
+      let menuModules = ref<Menu[]>([]);
+      const activePath = ref('');
+      const childrenMenus = ref<Menu[]>([]);
+      const openMenu = ref(false);
+      const dragBarRef = ref<ElRef>(null);
+      const sideRef = ref<ElRef>(null);
+      const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
+      const appStore = useAppStore();
+      const isThemeBright = ref(false);
+
+      const { prefixCls } = useDesign('layout-mix-sider');
+      const go = useGo();
+      const { t } = useI18n();
+      const {
+        getMenuWidth,
+        getCanDrag,
+        getCloseMixSidebarOnChange,
+        getMenuTheme,
+        getMixSideTrigger,
+        getRealWidth,
+        getMixSideFixed,
+        mixSideHasChildren,
+        setMenuSetting,
+        getIsMixSidebar,
+        getCollapsed,
+      } = useMenuSetting();
+
+      const { shortTitle } = useGlobSetting();
+
+      useDragLine(sideRef, dragBarRef, true);
+
+      const getMenuStyle = computed((): CSSProperties => {
+        return {
+          width: unref(openMenu) ? `${unref(getMenuWidth) - 60}px` : 0,
+          left: `${unref(getMixSideWidth)}px`,
+        };
+      });
+
+      const getIsFixed = computed(() => {
+        /* eslint-disable-next-line */
+        mixSideHasChildren.value = unref(childrenMenus).length > 0;
+        const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
+        if (isFixed) {
+          /* eslint-disable-next-line */
+          openMenu.value = true;
+        }
+        return isFixed;
+      });
+
+      const getMixSideWidth = computed(() => {
+        return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
+      });
+
+      const getDomStyle = computed((): CSSProperties => {
+        const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
+        const width = `${unref(getMixSideWidth) + fixedWidth}px`;
+        return getWrapCommonStyle(width);
+      });
+
+      const getWrapStyle = computed((): CSSProperties => {
+        const width = `${unref(getMixSideWidth)}px`;
+        return getWrapCommonStyle(width);
+      });
+
+      const getMenuEvents = computed(() => {
+        return !unref(getMixSideFixed)
+          ? {
+              onMouseleave: () => {
+                setActive(true);
+                closeMenu();
+              },
+            }
+          : {};
+      });
+
+      const getShowDragBar = computed(() => unref(getCanDrag));
+
+      onMounted(async () => {
+        menuModules.value = await getShallowMenus();
+      });
+
+      listenerRouteChange((route) => {
+        currentRoute.value = route;
+        setActive(true);
+        if (unref(getCloseMixSidebarOnChange)) {
+          closeMenu();
+        }
+      });
+
+      function getWrapCommonStyle(width: string): CSSProperties {
+        return {
+          width,
+          maxWidth: width,
+          minWidth: width,
+          flex: `0 0 ${width}`,
+        };
+      }
+
+      // Process module menu click
+      async function handleModuleClick(path: string, hover = false) {
+        const children = await getChildrenMenus(path);
+        if (unref(activePath) === path) {
+          if (!hover) {
+            if (!unref(openMenu)) {
+              openMenu.value = true;
+            } else {
+              closeMenu();
+            }
+          } else {
+            if (!unref(openMenu)) {
+              openMenu.value = true;
+            }
+          }
+          if (!unref(openMenu)) {
+            setActive();
+          }
+        } else {
+          openMenu.value = true;
+          activePath.value = path;
+        }
+
+        if (!children || children.length === 0) {
+          if (!hover) go(path);
+          childrenMenus.value = [];
+          closeMenu();
+          return;
+        }
+        childrenMenus.value = children;
+      }
+
+      // Set the currently active menu and submenu
+      async function setActive(setChildren = false) {
+        const path = currentRoute.value?.path;
+        if (!path) return;
+        activePath.value = await getCurrentParentPath(path);
+        // hanldeModuleClick(parentPath);
+        if (unref(getIsMixSidebar)) {
+          const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
+          const p = activeMenu?.path;
+          if (p) {
+            const children = await getChildrenMenus(p);
+            if (setChildren) {
+              childrenMenus.value = children;
+
+              if (unref(getMixSideFixed)) {
+                openMenu.value = children.length > 0;
+              }
+            }
+            if (children.length === 0) {
+              childrenMenus.value = [];
+            }
+          }
+        }
+      }
+
+      function handleMenuClick(path: string) {
+        go(path);
+      }
+
+      function handleClickOutside() {
+        setActive(true);
+        closeMenu();
+      }
+
+      function getItemEvents(item: Menu) {
+        if (unref(getMixSideTrigger) === 'hover') {
+          return {
+            onMouseenter: () => handleModuleClick(item.path, true),
+            onClick: async () => {
+              const children = await getChildrenMenus(item.path);
+              if (item.path && (!children || children.length === 0)) go(item.path);
+            },
+          };
+        }
+        return {
+          onClick: () => handleModuleClick(item.path),
+        };
+      }
+
+      function handleFixedMenu() {
+        setMenuSetting({
+          mixSideFixed: !unref(getIsFixed),
+        });
+      }
+
+      // Close menu
+      function closeMenu() {
+        if (!unref(getIsFixed)) {
+          openMenu.value = false;
+        }
+      }
+
+      // 代码逻辑说明: 【QQYUN-8927】侧边折叠导航模式区分彩色模式
+      watch(
+        () => appStore.getProjectConfig.menuSetting,
+        (menuSetting) => {
+          isThemeBright.value = !!menuSetting?.isThemeBright;
+        },
+        { immediate: true, deep: true }
+      );
+
+      return {
+        t,
+        prefixCls,
+        menuModules,
+        handleModuleClick: handleModuleClick,
+        activePath,
+        childrenMenus: childrenMenus,
+        getShowDragBar,
+        handleMenuClick,
+        getMenuStyle,
+        handleClickOutside,
+        sideRef,
+        dragBarRef,
+        shortTitle,
+        openMenu,
+        getMenuTheme,
+        getItemEvents,
+        getMenuEvents,
+        getDomStyle,
+        handleFixedMenu,
+        getMixSideFixed,
+        getWrapStyle,
+        getCollapsed,
+        isThemeBright,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-mix-sider';
+  @width: 80px;
+  .@{prefix-cls} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-mix-sider-fixed-z-index;
+    height: 100%;
+    overflow: hidden;
+    background-color: @sider-dark-bg-color;
+    transition: all 0.2s ease 0s;
+
+    &-dom {
+      height: 100%;
+      overflow: hidden;
+      transition: all 0.2s ease 0s;
+    }
+
+    &-logo {
+      display: flex;
+      height: @header-height;
+      padding-left: 0 !important;
+      justify-content: center;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+      }
+    }
+
+    &.light {
+      .@{prefix-cls}-logo {
+        border-bottom: 1px solid rgb(238, 238, 238);
+      }
+
+      &.open {
+        > .scrollbar {
+          border-right: 1px solid rgb(238, 238, 238);
+        }
+      }
+
+      .@{prefix-cls}-module {
+        &__item {
+          font-weight: normal;
+          color: rgba(0, 0, 0, 0.65);
+
+          &--active {
+            color: @primary-color;
+            background-color: unset;
+          }
+        }
+      }
+      .@{prefix-cls}-menu-list {
+        &__content {
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        &__title {
+          .pushpin {
+            color: rgba(0, 0, 0, 0.35);
+
+            &:hover {
+              color: rgba(0, 0, 0, 0.85);
+            }
+          }
+        }
+      }
+    }
+    @border-color: @sider-dark-lighten-bg-color;
+
+    &.dark {
+      &.open {
+        .@{prefix-cls}-logo {
+          // border-bottom: 1px solid @border-color;
+        }
+
+        > .scrollbar {
+          border-right: 1px solid @border-color;
+        }
+      }
+      .@{prefix-cls}-menu-list {
+        background-color: @sider-dark-bg-color;
+
+        &__title {
+          color: @white;
+          border-bottom: none;
+          border-bottom: 1px solid @border-color;
+        }
+      }
+      // 侧边折叠导航彩色模式文字颜色
+      &.bright {
+        .@{prefix-cls}-module {
+          &__item {
+            font-weight: normal;
+            color: rgba(255, 255, 255, 1);
+            &:hover {
+              color: rgba(255, 255, 255, 0.8);
+            }
+          }
+        }
+      }
+    }
+
+    > .scrollbar {
+      height: calc(100% - @header-height - 38px);
+    }
+
+    &.mini &-module {
+      &__name {
+        display: none;
+      }
+
+      &__icon {
+        margin-bottom: 0;
+      }
+    }
+
+    &-module {
+      position: relative;
+      padding-top: 1px;
+
+      &__item {
+        position: relative;
+        padding: 12px 0;
+        color: rgba(255, 255, 255, 0.65);
+        text-align: center;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: @white;
+        }
+        // &:hover,
+        &--active {
+          font-weight: 700;
+          color: @white;
+          background-color: @sider-dark-darken-bg-color;
+
+          &::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background-color: @primary-color;
+            content: '';
+          }
+        }
+      }
+
+      &__icon {
+        margin-bottom: 8px;
+        font-size: 24px;
+        transition: all 0.2s;
+      }
+
+      &__name {
+        margin-bottom: 0;
+        font-size: 12px;
+        transition: all 0.2s;
+      }
+    }
+
+    &-trigger {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.65);
+      text-align: center;
+      cursor: pointer;
+      background-color: @trigger-dark-bg-color;
+      height: 36px;
+      line-height: 36px;
+    }
+
+    &.light &-trigger {
+      color: rgba(0, 0, 0, 0.65);
+      background-color: #fff;
+      border-top: 1px solid #eee;
+    }
+
+    &-menu-list {
+      position: fixed;
+      top: 0;
+      width: 200px;
+      height: calc(100%);
+      background-color: #fff;
+      transition: all 0.2s;
+
+      &__title {
+        display: flex;
+        height: @header-height;
+        // margin-left: -6px;
+        font-size: 18px;
+        color: @primary-color;
+        border-bottom: 1px solid rgb(238, 238, 238);
+        opacity: 0;
+        transition: unset;
+        align-items: center;
+        justify-content: space-between;
+
+        text-align: center;
+        .text {flex: 1;}
+
+        &.show {
+          min-width: 130px;
+          opacity: 1;
+          transition: all 0.5s ease;
+        }
+
+        .pushpin {
+          margin-right: 6px;
+          color: rgba(255, 255, 255, 0.65);
+          cursor: pointer;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+
+      .@{namespace}-simple-menu-sub-title {
+        font-size: 14px;
+      }
+
+      &__content {
+        height: calc(100% - @header-height) !important;
+
+        .scrollbar__wrap {
+          height: 100%;
+          overflow-x: hidden;
+        }
+
+        .scrollbar__bar.is-horizontal {
+          display: none;
+        }
+
+        .ant-menu {
+          height: 100%;
+        }
+
+        .ant-menu-inline,
+        .ant-menu-vertical,
+        .ant-menu-vertical-left {
+          border-right: 1px solid transparent;
+        }
+      }
+    }
+
+    &-drag-bar {
+      position: absolute;
+      top: 50px;
+      right: -1px;
+      width: 1px;
+      height: calc(100% - 50px);
+      cursor: ew-resize;
+      background-color: #f8f8f9;
+      border-top: none;
+      border-bottom: none;
+      box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
+    }
+  }
+</style>
diff --git a/src/layouts/default/sider/index.vue b/src/layouts/default/sider/index.vue
new file mode 100644
index 0000000..546a4cd
--- /dev/null
+++ b/src/layouts/default/sider/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <Drawer
+    v-if="getIsMobile"
+    placement="left"
+    :class="prefixCls"
+    :width="getMenuWidth"
+    :getContainer="null"
+    :open="!getCollapsed"
+    @close="handleClose"
+  >
+    <Sider />
+  </Drawer>
+  <MixSider v-else-if="getIsMixSidebar" />
+  <Sider v-else />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import Sider from './LayoutSider.vue';
+  import MixSider from './MixSider.vue';
+  import { Drawer } from 'ant-design-vue';
+
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  export default defineComponent({
+    name: 'SiderWrapper',
+    components: { Sider, Drawer, MixSider },
+    setup() {
+      const { prefixCls } = useDesign('layout-sider-wrapper');
+      const { getIsMobile } = useAppInject();
+      const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+
+      function handleClose() {
+        setMenuSetting({
+          collapsed: true,
+        });
+      }
+
+      return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-sider-wrapper';
+
+  .@{prefix-cls} {
+    .ant-drawer-body {
+      height: 100vh;
+      padding: 0;
+    }
+
+    .ant-drawer-header-no-title {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/layouts/default/sider/useLayoutSider.ts b/src/layouts/default/sider/useLayoutSider.ts
new file mode 100644
index 0000000..48f2814
--- /dev/null
+++ b/src/layouts/default/sider/useLayoutSider.ts
@@ -0,0 +1,133 @@
+import type { Ref } from 'vue';
+
+import { computed, unref, onMounted, nextTick, ref } from 'vue';
+
+import { TriggerEnum } from '/@/enums/menuEnum';
+
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useDebounceFn } from '@vueuse/core';
+
+/**
+ * Handle related operations of menu events
+ */
+export function useSiderEvent() {
+  const brokenRef = ref(false);
+
+  const { getMiniWidthNumber } = useMenuSetting();
+
+  const getCollapsedWidth = computed(() => {
+    return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
+  });
+
+  function onBreakpointChange(broken: boolean) {
+    brokenRef.value = broken;
+  }
+
+  return { getCollapsedWidth, onBreakpointChange };
+}
+
+/**
+ * Handle related operations of menu folding
+ */
+export function useTrigger(getIsMobile: Ref<boolean>) {
+  const { getTrigger, getSplit } = useMenuSetting();
+
+  const getShowTrigger = computed(() => {
+    const trigger = unref(getTrigger);
+
+    return trigger !== TriggerEnum.NONE && !unref(getIsMobile) && (trigger === TriggerEnum.FOOTER || unref(getSplit));
+  });
+
+  const getTriggerAttr = computed(() => {
+    if (unref(getShowTrigger)) {
+      return {};
+    }
+    return {
+      trigger: null,
+    };
+  });
+
+  return { getTriggerAttr, getShowTrigger };
+}
+
+/**
+ * Handle menu drag and drop related operations
+ * @param siderRef
+ * @param dragBarRef
+ */
+export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, mix = false) {
+  const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();
+
+  onMounted(() => {
+    nextTick(() => {
+      const exec = useDebounceFn(changeWrapWidth, 80);
+      exec();
+    });
+  });
+
+  function getEl(elRef: Ref<ElRef | ComponentRef>): any {
+    const el = unref(elRef);
+    if (!el) return null;
+    if (Reflect.has(el, '$el')) {
+      return (unref(elRef) as ComponentRef)?.$el;
+    }
+    return unref(elRef);
+  }
+
+  function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
+    document.onmousemove = function (innerE) {
+      let iT = (ele as any).left + (innerE.clientX - clientX);
+      innerE = innerE || window.event;
+      const maxT = 800;
+      const minT = unref(getMiniWidthNumber);
+      iT < 0 && (iT = 0);
+      iT > maxT && (iT = maxT);
+      iT < minT && (iT = minT);
+      ele.style.left = wrap.style.width = iT + 'px';
+      return false;
+    };
+  }
+
+  // Drag and drop in the menu area-release the mouse
+  function removeMouseup(ele: any) {
+    const wrap = getEl(siderRef);
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      wrap.style.transition = 'width 0.2s';
+      const width = parseInt(wrap.style.width);
+
+      if (!mix) {
+        const miniWidth = unref(getMiniWidthNumber);
+        if (!unref(getCollapsed)) {
+          width > miniWidth + 20 ? setMenuSetting({ menuWidth: width }) : setMenuSetting({ collapsed: true });
+        } else {
+          width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
+        }
+      } else {
+        setMenuSetting({ menuWidth: width });
+      }
+
+      ele.releaseCapture?.();
+    };
+  }
+
+  function changeWrapWidth() {
+    const ele = getEl(dragBarRef);
+    if (!ele) return;
+    const wrap = getEl(siderRef);
+    if (!wrap) return;
+
+    ele.onmousedown = (e: any) => {
+      wrap.style.transition = 'unset';
+      const clientX = e?.clientX;
+      ele.left = ele.offsetLeft;
+      handleMouseMove(ele, wrap, clientX);
+      removeMouseup(ele);
+      ele.setCapture?.();
+      return false;
+    };
+  }
+
+  return {};
+}
diff --git a/src/layouts/default/tabs/components/FoldButton.vue b/src/layouts/default/tabs/components/FoldButton.vue
new file mode 100644
index 0000000..6ed5b36
--- /dev/null
+++ b/src/layouts/default/tabs/components/FoldButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <span :class="`${prefixCls}__extra-fold`" @click="handleFold">
+    <Icon :icon="getIcon" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { triggerWindowResize } from '/@/utils/event';
+
+  export default defineComponent({
+    name: 'FoldButton',
+    components: { Icon },
+    setup() {
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { getShowMenu, setMenuSetting } = useMenuSetting();
+      const { getShowHeader, setHeaderSetting } = useHeaderSetting();
+
+      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
+      const getIcon = computed(() => (unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full'));
+
+      function handleFold() {
+        const isUnFold = unref(getIsUnFold);
+        setMenuSetting({
+          show: isUnFold,
+          hidden: !isUnFold,
+        });
+        setHeaderSetting({ show: isUnFold });
+        triggerWindowResize();
+      }
+
+      return { prefixCls, getIcon, handleFold };
+    },
+  });
+</script>
diff --git a/src/layouts/default/tabs/components/TabContent.vue b/src/layouts/default/tabs/components/TabContent.vue
new file mode 100644
index 0000000..1c3cc9e
--- /dev/null
+++ b/src/layouts/default/tabs/components/TabContent.vue
@@ -0,0 +1,112 @@
+<template>
+  <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menuEvent="handleMenuEvent" :overlayClassName="prefixCls">
+    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
+      <!-- updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式：增加前缀图标 -->
+      <!-- <span v-if="showPrefixIcon" :class="`${prefixCls}__prefix-icon`" @click="handleContext">
+        <Icon :icon="prefixIconType" :size="14" />
+      </span> -->
+      <span class="ml-1">{{ getTitle }}</span>
+    </div>
+    <span :class="`${prefixCls}__extra-quick`" v-else @click="handleContext">
+      <Icon icon="ion:chevron-down" />
+    </span>
+  </Dropdown>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { RouteLocationNormalized } from 'vue-router';
+
+  import { defineComponent, computed, unref } from 'vue';
+  import { Dropdown } from '/@/components/Dropdown/index';
+  import { Icon } from '/@/components/Icon';
+
+  import { TabContentProps } from '../types';
+
+  import { TabsThemeEnum } from '/@/enums/appEnum';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTabDropdown } from '../useTabDropdown';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  export default defineComponent({
+    name: 'TabContent',
+    components: { Dropdown, Icon },
+    props: {
+      tabItem: {
+        type: Object as PropType<RouteLocationNormalized>,
+        default: null,
+      },
+      isExtra: Boolean,
+    },
+    setup(props) {
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { t } = useI18n();
+
+      // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+      const localeStore = useLocaleStore();
+      const getTitle = computed(() => {
+        const { tabItem: { meta, fullPath } = {} } = props;
+        let title = localeStore.getPathTitle(fullPath);
+        if (title) {
+          return title;
+        }
+        return meta && t(meta.title as string);
+      });
+
+      const getIsTabs = computed(() => !props.isExtra);
+
+      // updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式：前缀图标类型
+      const prefixIconType = computed(() => {
+        if (props.tabItem.meta.icon) {
+          return props.tabItem.meta.icon;
+        } else if (props.tabItem.path === PageEnum.BASE_HOME) {
+          // 当是首页时返回 home 图标 TODO 此处可能需要动态判断首页路径
+          return 'ant-design:home-outlined';
+        } else {
+          return 'ant-design:code';
+        }
+      });
+
+      const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] => (unref(getIsTabs) ? ['contextmenu'] : ['click']));
+
+      const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(props as TabContentProps, getIsTabs);
+
+      function handleContext(e) {
+        props.tabItem && handleContextMenu(props.tabItem)(e);
+      }
+
+      const { getTabsTheme } = useMultipleTabSetting();
+      // 是否显示图标
+      const showPrefixIcon = computed(() => unref(getTabsTheme) === TabsThemeEnum.SMOOTH);
+
+      return {
+        prefixCls,
+        getDropMenuList,
+        handleMenuEvent,
+        handleContext,
+        getTrigger,
+        getIsTabs,
+        getTitle,
+        prefixIconType,
+        showPrefixIcon,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-multiple-tabs-content';
+  .@{prefix-cls} {
+    .ant-dropdown-menu-item {
+      .ant-dropdown-menu-title-content {
+        .anticon {
+          font-size: 14px !important;
+        }
+        span:not(.anticon) {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/default/tabs/components/TabRedo.vue b/src/layouts/default/tabs/components/TabRedo.vue
new file mode 100644
index 0000000..9a122dd
--- /dev/null
+++ b/src/layouts/default/tabs/components/TabRedo.vue
@@ -0,0 +1,32 @@
+<template>
+  <span :class="`${prefixCls}__extra-redo`" @click="handleRedo">
+    <SvgIcon name="reload-01"></SvgIcon>
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  import { SvgIcon } from '/@/components/Icon/index';
+  export default defineComponent({
+    name: 'TabRedo',
+    components: { SvgIcon },
+
+    setup() {
+      const loading = ref(false);
+
+      const { prefixCls } = useDesign('multiple-tabs-content');
+      const { refreshPage } = useTabs();
+
+      async function handleRedo() {
+        loading.value = true;
+        await refreshPage();
+        setTimeout(() => {
+          loading.value = false;
+          // Animation execution time
+        }, 1200);
+      }
+      return { prefixCls, handleRedo, loading };
+    },
+  });
+</script>
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
new file mode 100644
index 0000000..c9bdec2
--- /dev/null
+++ b/src/layouts/default/tabs/index.less
@@ -0,0 +1,228 @@
+@prefix-cls: ~'@{namespace}-multiple-tabs';
+
+html[data-theme='dark'] {
+  .@{prefix-cls} {
+    .ant-tabs-tab {
+      border-bottom: 1px solid @border-color-base;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .@{prefix-cls} {
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border: 1px solid #e6e6e6;
+    }
+  }
+}
+
+.@{prefix-cls} {
+  z-index: 10;
+  height: @multiple-height + 2;
+  line-height: @multiple-height + 2;
+  background-color: @component-background;
+  border-bottom: 1px solid @border-color-base;
+  box-shadow: 0 4px 4px rgb(0 21 41 / 8%);
+
+  .ant-tabs-small {
+    height: calc(@multiple-height + 4px);
+  }
+
+  .ant-tabs.ant-tabs-card {
+    padding-left: 0px;
+
+    .ant-tabs-nav {
+      height: calc(@multiple-height);
+      margin: 0;
+      background-color: @component-background;
+      border: 0;
+      box-shadow: none;
+
+      .ant-tabs-nav-wrap {
+        height: @multiple-height;
+        margin-top: 2px;
+      }
+
+      .ant-tabs-tab {
+        height: calc(@multiple-height - 4px);
+        padding-right: 12px;
+        line-height: calc(@multiple-height - 4px);
+        color: @text-color-base;
+        background-color: @component-background;
+        transition: none;
+
+        .ant-tabs-tab-btn {
+          color: @text-color-base;
+          transition: none;
+        }
+
+        &:hover {
+          .ant-tabs-tab-remove .anticon-close {
+            opacity: 1;
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          margin: 0;
+          padding: 0;
+          position: relative;
+          top: 0;
+          left: 4px;
+
+          .anticon-close {
+            width: 8px;
+            height: 12px;
+            font-size: 12px;
+            color: inherit;
+            opacity: 0;
+            transition: none;
+
+            &:hover {
+              svg {
+                width: 0.8em;
+              }
+            }
+          }
+        }
+
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          fill: @text-color-base;
+        }
+      }
+
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        &:hover {
+          color: @primary-color;
+        }
+      }
+
+      .ant-tabs-tab-active {
+        position: relative;
+        padding-left: 18px;
+        color: @white !important;
+        background: @primary-color;
+        border: 1px solid transparent;
+        transition: none;
+
+        .ant-tabs-tab-btn {
+          color: @white;
+        }
+
+        .ant-tabs-tab-remove .anticon-close {
+          opacity: 1;
+        }
+
+        svg {
+          width: 0.7em;
+          fill: @white;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 6px;
+
+      .ant-tabs-tab {
+        margin-right: 6px !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .ant-tabs-tab-remove .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-tabs-extra-content {
+    // update-begin--author:liaozhiyang---date:20241016---for：【issues/7345】标签样式切换到极简模式样式错乱
+    // margin-top: 2px;
+    // update-end--author:liaozhiyang---date:20241016---for：【issues/7345】标签样式切换到极简模式样式错乱
+    line-height: @multiple-height !important;
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  &--hide-close {
+    .ant-tabs-tab-remove .anticon-close {
+      opacity: 0 !important;
+    }
+  }
+
+  &-content {
+    &__extra-quick,
+    &__extra-redo,
+    &__extra-fold {
+      display: inline-block;
+      width: 36px;
+      height: @multiple-height;
+      line-height: @multiple-height;
+      color: @text-color-secondary;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid @border-color-base;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__extra-redo {
+      span[role='img'] {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @multiple-height - 2;
+      padding-left: 0;
+      margin-left: -10px;
+      font-size: 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+
+.ant-tabs-dropdown-menu {
+  &-title-content {
+    display: flex;
+    align-items: center;
+
+    .@{prefix-cls} {
+      &-content__info {
+        width: auto;
+        margin-left: 0;
+        line-height: 28px;
+      }
+    }
+  }
+
+  &-item-remove {
+    margin-left: auto;
+  }
+}
+
+.multiple-tabs__dropdown {
+  .ant-dropdown-content {
+    width: 172px;
+  }
+}
diff --git a/src/layouts/default/tabs/index.vue b/src/layouts/default/tabs/index.vue
new file mode 100644
index 0000000..7da3fdb
--- /dev/null
+++ b/src/layouts/default/tabs/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div :class="getWrapClass">
+    <Tabs
+      type="editable-card"
+      size="small"
+      :animated="false"
+      :hideAdd="true"
+      :tabBarGutter="3"
+      :activeKey="activeKeyRef"
+      @change="handleChange"
+      @edit="handleEdit"
+    >
+      <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
+        <TabPane :closable="!(item && item.meta && item.meta.affix)">
+          <template #tab>
+            <TabContent :tabItem="item" />
+          </template>
+        </TabPane>
+      </template>
+
+      <template #rightExtra v-if="getShowRedo || getShowQuick">
+        <div class="rightExtra">
+          <TabRedo v-if="getShowRedo" />
+          <!-- <TabContent isExtra :tabItem="$route" v-if="getShowQuick" /> -->
+          <!-- 列表页全屏 
+          <FoldButton v-if="getShowFold" />-->
+          <!-- <FullscreenOutlined /> -->
+          <router-link v-if="!getIsSimpleTheme" to="/ai" class="ai-icon">
+            <a-tooltip title="AI助手" placement="left">
+              <svg t="1706259688149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2056" width="17" height="17">
+                <path d="M826.368 325.632c0-7.168 2.048-10.24 10.24-10.24h123.904c7.168 0 10.24 2.048 10.24 10.24v621.568c0 7.168-2.048 10.24-10.24 10.24h-122.88c-8.192 0-10.24-4.096-10.24-10.24l-1.024-621.568z m-8.192-178.176c0-50.176 35.84-79.872 79.872-79.872 48.128 0 79.872 32.768 79.872 79.872 0 52.224-33.792 79.872-81.92 79.872-46.08 1.024-77.824-27.648-77.824-79.872zM462.848 584.704C441.344 497.664 389.12 307.2 368.64 215.04h-2.048c-16.384 92.16-58.368 247.808-92.16 369.664h188.416zM243.712 712.704l-62.464 236.544c-2.048 7.168-4.096 8.192-12.288 8.192H54.272c-8.192 0-10.24-2.048-8.192-12.288l224.256-783.36c4.096-13.312 7.168-26.624 8.192-65.536 0-6.144 2.048-8.192 7.168-8.192H450.56c6.144 0 8.192 2.048 10.24 8.192l250.88 849.92c2.048 7.168 0 10.24-7.168 10.24H573.44c-7.168 0-10.24-2.048-12.288-7.168l-65.536-236.544c1.024 1.024-251.904 0-251.904 0z" fill="#333333" p-id="19816"></path>
+              </svg>
+            </a-tooltip>
+          </router-link>
+        </div>
+      </template>
+    </Tabs>
+  </div>
+</template>
+<script lang="ts">
+  import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
+
+  import { defineComponent, computed, unref, ref } from 'vue';
+
+  import { Tabs } from 'ant-design-vue';
+  import TabContent from './components/TabContent.vue';
+  import FoldButton from './components/FoldButton.vue';
+  import TabRedo from './components/TabRedo.vue';
+
+  import { useGo } from '/@/hooks/web/usePage';
+
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useUserStore } from '/@/store/modules/user';
+
+  import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+  import { TabsThemeEnum } from '/@/enums/appEnum';
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+
+  import { useRouter } from 'vue-router';
+  import Aide from "/@/views/dashboard/ai/components/aide/index.vue"
+
+  export default defineComponent({
+    name: 'MultipleTabs',
+    components: {
+      TabRedo,
+      FoldButton,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      TabContent,
+      Aide,
+    },
+    setup() {
+      const affixTextList = initAffixTabs();
+      const activeKeyRef = ref('');
+
+      useTabsDrag(affixTextList);
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const router = useRouter();
+
+      const { prefixCls } = useDesign('multiple-tabs');
+      const go = useGo();
+      const { getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();
+
+      const getTabsState = computed(() => {
+        return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
+      });
+
+      const unClose = computed(() => unref(getTabsState).length === 1);
+
+      // 极简模式隐藏标签栏AI入口图标
+      const getIsSimpleTheme = computed(() => unref(getTabsTheme) === TabsThemeEnum.SIMPLE);
+
+      const getWrapClass = computed(() => {
+        return [
+          prefixCls,
+          {
+            [`${prefixCls}--hide-close`]: unref(unClose),
+          },
+          `${prefixCls}--theme-${unref(getTabsTheme)}`,
+        ];
+      });
+
+      listenerRouteChange((route) => {
+        const { name } = route;
+        if (name === REDIRECT_NAME || !route || !userStore.getToken) {
+          return;
+        }
+
+        const { path, fullPath, meta = {} } = route;
+        const { currentActiveMenu, hideTab } = meta as RouteMeta;
+        const isHide = !hideTab ? null : currentActiveMenu;
+        const p = isHide || fullPath || path;
+        if (activeKeyRef.value !== p) {
+          activeKeyRef.value = p as string;
+        }
+
+        if (isHide) {
+          const findParentRoute = router.getRoutes().find((item) => item.path === currentActiveMenu);
+
+          findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
+        } else {
+          tabStore.addTab(unref(route));
+        }
+      });
+
+      function handleChange(activeKey: any) {
+        activeKeyRef.value = activeKey;
+        go(activeKey, false);
+      }
+
+      // Close the current tab
+      function handleEdit(targetKey: string) {
+        // Added operation to hide, currently only use delete operation
+        if (unref(unClose)) {
+          return;
+        }
+
+        tabStore.closeTabByKey(targetKey, router);
+      }
+      return {
+        prefixCls,
+        unClose,
+        getWrapClass,
+        handleEdit,
+        handleChange,
+        activeKeyRef,
+        getTabsState,
+        getShowQuick,
+        getShowRedo,
+        getShowFold,
+        getIsSimpleTheme,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+  @import './tabs.theme.card.less';
+  @import './tabs.theme.smooth.less';
+  @import './tabs.theme.simple.less';
+</style>
+<style lang="less" scoped>
+@prefix-cls: ~'@{namespace}-multiple-tabs';
+.@{prefix-cls} {
+  :deep(.anticon) {
+    display: inline-block;
+  }
+  // 代码逻辑说明: 【issues/7345】标签样式切换到极简模式样式错乱
+  .rightExtra {
+    display: flex;
+    :deep(svg) {
+      &:not(.icon) {
+        vertical-align: -0.3em;
+      }
+    }
+    .ai-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      width: 36px;
+      color: @text-color;
+      text-align: center;
+      border-left: 1px solid @border-color-base;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/default/tabs/tabs.theme.card.less b/src/layouts/default/tabs/tabs.theme.card.less
new file mode 100644
index 0000000..6b87e52
--- /dev/null
+++ b/src/layouts/default/tabs/tabs.theme.card.less
@@ -0,0 +1,236 @@
+// tabs卡片样式
+@prefix-cls-theme-card: ~'@{prefix-cls}.@{prefix-cls}--theme-card';
+
+html[data-theme='dark'] {
+  .@{prefix-cls-theme-card} {
+    .ant-tabs-tab {
+      border-top: none !important;
+      border-left: none !important;
+      border-right: none !important;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .@{prefix-cls-theme-card} {
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border-top: none !important;
+      border-left: none !important;
+      border-right: none !important;
+    }
+  }
+}
+
+.@{prefix-cls-theme-card} {
+  @tabHeight: calc(@multiple-card-height - 10px);
+
+  z-index: 10;
+  height: @multiple-card-height;
+  line-height: @multiple-card-height;
+  background-color: @component-background;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
+  .ant-tabs-small {
+    height: @multiple-card-height;
+  }
+
+  .ant-tabs.ant-tabs-card {
+    .ant-tabs-nav {
+      height: @multiple-card-height;
+      margin: 0;
+      background-color: @component-background;
+      border: 0;
+      box-shadow: none;
+      padding-left: 10px;
+
+      .ant-tabs-nav-wrap {
+        height: @tabHeight;
+        margin-top: 4px;
+        padding-top: 0;
+      }
+
+      .ant-tabs-tab {
+        height: @tabHeight;
+        line-height: @tabHeight;
+        color: @text-color-base;
+        background-color: @component-background;
+        padding: 0 20px 0 30px;
+        margin: 0 10px 0 0 !important;
+
+        .ant-tabs-tab-btn {
+          color: @text-color-call-out;
+        }
+
+        &:hover {
+          //padding: 0 36px 0 30px;
+
+          .ant-tabs-tab-remove .anticon-close {
+            opacity: 1;
+
+            &:hover {
+              color: #fff;
+              background-color: #c0c4cc;
+            }
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          //update-begin---author:scott ---date:2023-08-28  for：【QQYUN-6374】UnoCSS替代windicss导致应用样式问题--
+          /*   top: 5px;*/
+          //update-end---author:scott ---date::2023-08-28  for：【QQYUN-6374】UnoCSS替代windicss导致应用样式问题--
+          left: 4px;
+
+          .anticon-close {
+            position: relative;
+            width: 14px;
+            height: 14px;
+            font-size: 13px;
+            color: inherit;
+            opacity: 0;
+            transition: opacity 0.15s;
+            top: 0;
+            left: 6px;
+            vertical-align: middle;
+            line-height: 10px;
+            overflow: hidden;
+            transform-origin: 100% 50%;
+            border-radius: 100%;
+
+            &:hover {
+              svg {
+                fill: #fff;
+              }
+            }
+          }
+        }
+
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          fill: @text-color-base;
+        }
+
+        &:first-child {
+        }
+      }
+
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        border: none !important;
+
+        &:hover {
+          color: @primary-color !important;
+          background-color: inherit;
+        }
+      }
+
+      .ant-tabs-tab-active {
+        position: relative;
+        color: @primary-color !important;
+        border: 1px solid transparent;
+        border-bottom: 1px solid @primary-color !important;
+        font-weight: inherit;
+
+        .ant-tabs-tab-btn {
+          color: @primary-color;
+        }
+
+        .ant-tabs-tab-remove .anticon-close {
+          opacity: 0;
+
+          svg {
+            width: 0.6em;
+          }
+        }
+
+        svg {
+          width: inherit;
+          fill: @primary-color;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 6px;
+
+      .ant-tabs-tab {
+        margin-right: 10px !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .ant-tabs-tab-remove .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-tabs-extra-content {
+    position: relative;
+    top: 0;
+    line-height: @multiple-card-height !important;
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  .@{prefix-cls}--hide-close {
+    .ant-tabs-tab-remove .anticon-close {
+      opacity: 0 !important;
+    }
+  }
+
+  .@{prefix-cls}-content {
+    &__extra-quick,
+    &__extra-redo,
+    &__extra-fold {
+      display: inline-block;
+      width: 36px;
+      height: @multiple-card-height;
+      line-height: @multiple-card-height;
+      color: @text-color-secondary;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid @border-color-base;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__extra-redo {
+      span[role='img'] {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @tabHeight;
+      padding-left: 0;
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    // tab 前缀图标样式
+    &__prefix-icon {
+      & .app-iconify.anticon {
+        margin-right: 4px;
+      }
+    }
+  }
+}
diff --git a/src/layouts/default/tabs/tabs.theme.simple.less b/src/layouts/default/tabs/tabs.theme.simple.less
new file mode 100644
index 0000000..af98359
--- /dev/null
+++ b/src/layouts/default/tabs/tabs.theme.simple.less
@@ -0,0 +1,237 @@
+// tabs极简样式
+@prefix-cls-theme-simple: ~'@{prefix-cls}.@{prefix-cls}--theme-simple';
+
+@multiple-simple-height: 38px;
+
+html[data-theme='dark'] {
+  .@{prefix-cls-theme-simple} {
+    .ant-tabs-tab {
+      border: none !important;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .@{prefix-cls-theme-simple} {
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border: none !important;
+    }
+  }
+}
+
+.@{prefix-cls-theme-simple} {
+  z-index: 10;
+  height: @multiple-simple-height;
+  line-height: @multiple-simple-height;
+  background-color: @component-background;
+  border-bottom: 1px solid @border-color-base;
+  box-shadow: none;
+
+  .ant-tabs-small {
+    height: @multiple-simple-height;
+  }
+
+  .ant-tabs.ant-tabs-card {
+    .ant-tabs-nav {
+      height: @multiple-simple-height;
+      margin: 0;
+      background-color: @component-background;
+      border: 0;
+      box-shadow: none;
+      padding-left: 6px;
+
+      .ant-tabs-nav-wrap {
+        height: @multiple-simple-height;
+        margin-top: 0;
+      }
+
+      .ant-tabs-tab {
+        height: @multiple-simple-height;
+        line-height: calc(@multiple-simple-height - 6px);
+        color: @text-color-secondary;
+        background-color: transparent;
+        border: none !important;
+        border-radius: 0;
+        padding: 0 16px;
+        margin: 0 !important;
+        position: relative;
+        transition: color 0.2s;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0;
+          height: 2px;
+          background-color: @primary-color;
+          transition: all 0.2s ease;
+          transform: translateX(-50%);
+        }
+
+        .ant-tabs-tab-btn {
+          color: inherit;
+          transition: none;
+        }
+
+        &:hover {
+          color: @text-color-base;
+
+          .ant-tabs-tab-remove .anticon-close {
+            opacity: 1;
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          margin: 0;
+          padding: 0;
+          position: relative;
+          top: 0;
+          left: 2px;
+
+          .anticon-close {
+            width: 14px;
+            height: 14px;
+            font-size: 12px;
+            color: inherit;
+            opacity: 0;
+            transition: opacity 0.15s;
+            border-radius: 100%;
+            vertical-align: middle;
+            line-height: 10px;
+            overflow: hidden;
+
+            &:hover {
+              color: #fff;
+              background-color: #c0c4cc;
+
+              svg {
+                fill: #fff;
+              }
+            }
+          }
+        }
+
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          fill: @text-color-secondary;
+        }
+      }
+
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        &:hover {
+          color: @primary-color;
+
+          svg {
+            fill: @primary-color;
+          }
+        }
+      }
+
+      .ant-tabs-tab-active {
+        color: @primary-color !important;
+        background-color: transparent;
+        border: none !important;
+
+        &::after {
+          width: 100%;
+        }
+
+        .ant-tabs-tab-btn {
+          color: @primary-color;
+          font-weight: 500;
+        }
+
+        .ant-tabs-tab-remove .anticon-close {
+          opacity: 1;
+
+          svg {
+            width: 0.6em;
+          }
+        }
+
+        svg {
+          fill: @primary-color;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 2px;
+
+      .ant-tabs-tab {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .ant-tabs-tab-remove .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-tabs-extra-content {
+    position: relative;
+    top: 0;
+    line-height: @multiple-simple-height !important;
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  .@{prefix-cls}--hide-close {
+    .ant-tabs-tab-remove .anticon-close {
+      opacity: 0 !important;
+    }
+  }
+
+  .@{prefix-cls}-content {
+    &__extra-quick,
+    &__extra-redo,
+    &__extra-fold {
+      display: inline-block;
+      width: 36px;
+      height: @multiple-simple-height;
+      line-height: @multiple-simple-height;
+      color: @text-color-secondary;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid @border-color-base;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__extra-redo {
+      span[role='img'] {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @multiple-simple-height;
+      padding-left: 0;
+      font-size: 13px;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
diff --git a/src/layouts/default/tabs/tabs.theme.smooth.less b/src/layouts/default/tabs/tabs.theme.smooth.less
new file mode 100644
index 0000000..05a3960
--- /dev/null
+++ b/src/layouts/default/tabs/tabs.theme.smooth.less
@@ -0,0 +1,233 @@
+// tabs圆滑样式
+@prefix-cls-theme-smooth: ~'@{prefix-cls}.@{prefix-cls}--theme-smooth';
+
+html[data-theme='dark'] {
+  .@{prefix-cls-theme-smooth} {
+    .ant-tabs-tab {
+      border: none !important;
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .@{prefix-cls-theme-smooth} {
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border: none !important;
+    }
+  }
+}
+
+.@{prefix-cls-theme-smooth} {
+  @tabHeight: calc(@multiple-smooth-height - 12px);
+  z-index: 10;
+  height: @multiple-smooth-height;
+  line-height: @multiple-smooth-height;
+  background-color: @component-background;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
+  .ant-tabs-small {
+    height: @multiple-smooth-height;
+  }
+
+  .ant-tabs.ant-tabs-card {
+    .ant-tabs-nav {
+      height: @multiple-smooth-height;
+      margin: 0;
+      background-color: @component-background;
+      border: 0;
+      box-shadow: none;
+      padding-left: 10px;
+
+      .ant-tabs-nav-wrap {
+        height: @tabHeight;
+        margin-top: 12px;
+      }
+
+      .ant-tabs-tab {
+        height: @tabHeight;
+        line-height: @tabHeight;
+        color: @text-color-base;
+        background-color: @component-background;
+        transition: padding 0.3s;
+        padding: 0 20px 0 26px;
+        margin: 0 -14px 0 0 !important;
+        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
+        mask-size: 100% 100%;
+        position: relative;
+        z-index: 1;
+
+        .ant-tabs-tab-btn {
+          color: @text-color-base;
+        }
+
+        &:hover {
+          z-index: 2;
+          padding: 0 20px 0 26px;
+
+          .ant-tabs-tab-remove .anticon-close {
+            opacity: 1;
+
+            &:hover {
+              color: #fff;
+              background-color: #c0c4cc;
+            }
+          }
+        }
+
+        .ant-tabs-tab-remove {
+          top: -1px;
+          left: 8px;
+
+          .anticon-close {
+            position: relative;
+            width: 14px;
+            height: 14px;
+            font-size: 13px;
+            color: inherit;
+            opacity: 0;
+            transition: opacity 0.15s;
+            vertical-align: middle;
+            line-height: 10px;
+            overflow: hidden;
+            transform-origin: 100% 50%;
+            border-radius: 100%;
+
+            &:hover {
+              svg {
+                fill: #fff;
+              }
+            }
+          }
+        }
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          fill: @text-color-base;
+        }
+
+        &:first-child {
+          padding: 0 30px 0 30px !important;
+        }
+        span{font-weight: 200;}
+      }
+
+      .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        &:hover {
+          color: inherit;
+          background-color: #f5f5f5;
+        }
+      }
+
+      .ant-tabs-tab.ant-tabs-tab-active {
+        position: relative;
+        padding: 0 20px 0 26px;
+        color: @primary-color !important;
+        background: #f5f5f5;
+        border: 0;
+        z-index: 3;
+
+        .ant-tabs-tab-btn {
+          color: @primary-color;
+        }
+
+        .ant-tabs-tab-remove .anticon-close {
+          opacity: 1;
+
+          svg {
+            width: 0.6em;
+          }
+        }
+
+        svg {
+          width: inherit;
+          fill: @primary-color;
+        }
+      }
+    }
+
+    .ant-tabs-nav > div:nth-child(1) {
+      padding: 0 6px;
+
+      .ant-tabs-tab {
+        margin-right: -15px !important;
+      }
+    }
+  }
+
+  .ant-tabs-tab:not(.ant-tabs-tab-active) {
+    .anticon-close {
+      font-size: 12px;
+
+      svg {
+        width: 0.6em;
+      }
+    }
+  }
+
+  .ant-tabs-extra-content {
+    position: relative;
+    top: 0;
+    line-height: @multiple-smooth-height !important;
+  }
+
+  .ant-dropdown-trigger {
+    display: inline-flex;
+  }
+
+  .@{prefix-cls}--hide-close {
+    .ant-tabs-tab-remove .anticon-close {
+      opacity: 0 !important;
+    }
+  }
+
+  .@{prefix-cls}-content {
+    &__extra-quick,
+    &__extra-redo,
+    &__extra-fold {
+      display: inline-block;
+      width: 36px;
+      height: @multiple-smooth-height;
+      line-height: @multiple-smooth-height;
+      color: @text-color-secondary;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid @border-color-base;
+
+      &:hover {
+        color: @text-color-base;
+      }
+
+      span[role='img'] {
+        transform: rotate(90deg);
+      }
+    }
+
+    &__extra-redo {
+      span[role='img'] {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__info {
+      display: inline-block;
+      width: 100%;
+      height: @tabHeight;
+      line-height: 32px;
+      padding-left: 0;
+      font-size: 14px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    // tab 前缀图标样式
+    &__prefix-icon {
+      & .app-iconify.anticon {
+        margin-right: 4px;
+      }
+    }
+  }
+}
diff --git a/src/layouts/default/tabs/types.ts b/src/layouts/default/tabs/types.ts
new file mode 100644
index 0000000..72c13f5
--- /dev/null
+++ b/src/layouts/default/tabs/types.ts
@@ -0,0 +1,26 @@
+import type { DropMenu } from '/@/components/Dropdown/index';
+import type { RouteLocationNormalized } from 'vue-router';
+
+export enum TabContentEnum {
+  TAB_TYPE,
+  EXTRA_TYPE,
+}
+
+export type { DropMenu };
+
+export interface TabContentProps {
+  tabItem: RouteLocationNormalized;
+  type?: TabContentEnum;
+  trigger?: ('click' | 'hover' | 'contextmenu')[];
+}
+
+export enum MenuEventEnum {
+  REFRESH_PAGE,
+  CLOSE_CURRENT,
+  CLOSE_LEFT,
+  CLOSE_RIGHT,
+  CLOSE_OTHER,
+  CLOSE_ALL,
+  SCALE,
+  HOME_DESIGN,
+}
diff --git a/src/layouts/default/tabs/useHideHomeDesign.ts b/src/layouts/default/tabs/useHideHomeDesign.ts
new file mode 100644
index 0000000..9cc2bca
--- /dev/null
+++ b/src/layouts/default/tabs/useHideHomeDesign.ts
@@ -0,0 +1,65 @@
+import { ref } from 'vue';
+import { getMenus } from '/@/router/menus';
+
+export const useHideHomeDesign = (currentRoute) => {
+  let menus: any = [];
+  // 是否隐藏门户设计
+  const isHideHomeDesign = ref(true);
+  const getHideHomeDesign = (isCurItem, path) => {
+    if (/^\/portal-view\/[^/]+$/.test(path) && isCurItem) {
+      if (['/portal-view/system', '/portal-view/template'].includes(path)) {
+        // 主门户、模板门户 (需要检查是否存在设计列表,存在则显示门户设计,不存在则隐藏门户设计)
+        getIsHasPortalDesignList();
+      } else if (['/portal-view/default'].includes(path)) {
+        // 设计器打开的预览需隐藏设计模式
+        isHideHomeDesign.value = true;
+      } else {
+        // 个人工作台或者普通门户都可显示门户设计
+        isHideHomeDesign.value = false;
+      }
+    } else {
+      // 非门户页面隐藏门户设计
+      isHideHomeDesign.value = true;
+    }
+  };
+  const getMenusContainPath = async (ptah) => {
+    if (!menus.length) {
+      menus = await getMenus();
+    }
+    const result = getMatchingRouterName(menus, ptah);
+    return !!result;
+  };
+  const getIsHasPortalDesignList = async () => {
+    if (['/portal-view/system', '/portal-view/template'].includes(currentRoute.value.path)) {
+      // 主门户、模板门户时才需要查询菜单中是否有portalDesignList
+      getMenusContainPath('/super/eoa/portalapp/portalDesignList').then((result) => {
+        isHideHomeDesign.value = !result;
+      });
+    }
+  };
+  getIsHasPortalDesignList();
+  return {
+    getHideHomeDesign,
+    isHideHomeDesign,
+  };
+};
+
+/*
+ * 20250701
+ * liaozhiyang
+ * 通过path匹配菜单中的项
+ * */
+function getMatchingRouterName(menus, path) {
+  for (let i = 0, len = menus.length; i < len; i++) {
+    const item = menus[i];
+    if (item.path === path && !item.redirect && !item.paramPath) {
+      return item;
+    } else if (item.children?.length) {
+      const result = getMatchingRouterName(item.children, path);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
diff --git a/src/layouts/default/tabs/useMultipleTabs.ts b/src/layouts/default/tabs/useMultipleTabs.ts
new file mode 100644
index 0000000..35b553b
--- /dev/null
+++ b/src/layouts/default/tabs/useMultipleTabs.ts
@@ -0,0 +1,78 @@
+import { toRaw, ref, nextTick } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useSortable } from '/@/hooks/web/useSortable';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { isNullAndUnDef } from '/@/utils/is';
+import projectSetting from '/@/settings/projectSetting';
+import { useRouter } from 'vue-router';
+
+export function initAffixTabs(): string[] {
+  const affixList = ref<RouteLocationNormalized[]>([]);
+
+  const tabStore = useMultipleTabStore();
+  const router = useRouter();
+  /**
+   * @description: Filter all fixed routes
+   */
+  function filterAffixTabs(routes: RouteLocationNormalized[]) {
+    const tabs: RouteLocationNormalized[] = [];
+    routes &&
+      routes.forEach((route) => {
+        if (route.meta && route.meta.affix) {
+          tabs.push(toRaw(route));
+        }
+      });
+    return tabs;
+  }
+
+  /**
+   * @description: Set fixed tabs
+   */
+  function addAffixTabs(): void {
+    const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
+    affixList.value = affixTabs;
+    for (const tab of affixTabs) {
+      tabStore.addTab({
+        meta: tab.meta,
+        name: tab.name,
+        path: tab.path,
+      } as unknown as RouteLocationNormalized);
+    }
+  }
+
+  let isAddAffix = false;
+
+  if (!isAddAffix) {
+    addAffixTabs();
+    isAddAffix = true;
+  }
+  return affixList.value.map((item) => item.meta?.title).filter(Boolean) as string[];
+}
+
+export function useTabsDrag(affixTextList: string[]) {
+  const tabStore = useMultipleTabStore();
+  const { multiTabsSetting } = projectSetting;
+  const { prefixCls } = useDesign('multiple-tabs');
+  nextTick(() => {
+    if (!multiTabsSetting.canDrag) return;
+    const el = document.querySelectorAll(`.${prefixCls} .ant-tabs-nav > div`)?.[0] as HTMLElement;
+    const { initSortable } = useSortable(el, {
+      filter: (e: ChangeEvent) => {
+        const text = e?.target?.innerText;
+        if (!text) return false;
+        return affixTextList.includes(text);
+      },
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+
+        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+
+        tabStore.sortTabs(oldIndex, newIndex);
+      },
+    });
+    initSortable();
+  });
+}
diff --git a/src/layouts/default/tabs/useTabDropdown.ts b/src/layouts/default/tabs/useTabDropdown.ts
new file mode 100644
index 0000000..58645ae
--- /dev/null
+++ b/src/layouts/default/tabs/useTabDropdown.ts
@@ -0,0 +1,175 @@
+import type { TabContentProps } from './types';
+import type { DropMenu } from '/@/components/Dropdown';
+import type { ComputedRef } from 'vue';
+
+import { computed, unref, reactive } from 'vue';
+import { MenuEventEnum } from './types';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { RouteLocationNormalized, useRouter } from 'vue-router';
+import { useTabs } from '/@/hooks/web/useTabs';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useHideHomeDesign } from './useHideHomeDesign';
+
+export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) {
+  const state = reactive({
+    current: null as Nullable<RouteLocationNormalized>,
+    currentIndex: 0,
+  });
+
+  const { t } = useI18n();
+  const tabStore = useMultipleTabStore();
+  const { currentRoute } = useRouter();
+  const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight, changeDesign } = useTabs();
+
+  const getTargetTab = computed((): RouteLocationNormalized => {
+    return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
+  });
+  // 隐藏下拉菜单中的门户设计项
+  const { getHideHomeDesign, isHideHomeDesign } = useHideHomeDesign(currentRoute);
+
+  /**
+   * @description: drop-down list
+   */
+  const getDropMenuList = computed(() => {
+    if (!unref(getTargetTab)) {
+      return;
+    }
+    const { meta } = unref(getTargetTab);
+    const { path } = unref(currentRoute);
+
+    // Refresh button
+    const curItem = state.current;
+
+    const isCurItem = curItem ? curItem.path === path : false;
+    const index = state.currentIndex;
+    const refreshDisabled = !isCurItem;
+    // Close left
+    const closeLeftDisabled = () => {
+      if (index === 0) {
+        return true;
+      } else {
+        // 【TV360X-1039】当只有首页和另一个tab页时关闭左侧禁用
+        const validTabList = tabStore.getTabList.filter((item) => !item?.meta?.affix);
+        // update-begin--author:liaozhiyang---date:20251128---for：【issues/9098】tabs标签页关闭异常
+        return validTabList[0]?.path === state.current?.path;
+        // update-end--author:liaozhiyang---date:20251128---for：【issues/9098】tabs标签页关闭异常
+      }
+    };
+    // Close other
+    const closeOtherDisabled = () => {
+      if (tabStore.getTabList.length === 1) {
+        return true;
+      } else {
+        // 【TV360X-1039】当只有首页和另一个tab页时关闭其它禁用
+        const validTabList = tabStore.getTabList.filter((item) => !item?.meta?.affix);
+        return validTabList.length == 1;
+      }
+    };
+
+    // Close right
+    const closeRightDisabled = index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0;
+    // 隐藏下拉菜单中的门户设计项
+    getHideHomeDesign(isCurItem, path);
+    const dropMenuList: DropMenu[] = [
+      {
+        icon: 'jam:refresh-reverse',
+        event: MenuEventEnum.REFRESH_PAGE,
+        text: t('layout.multipleTab.reload'),
+        disabled: refreshDisabled,
+      },
+      {
+        icon: 'ant-design:setting-outlined',
+        event: MenuEventEnum.HOME_DESIGN,
+        text: t('layout.multipleTab.homeDesign'),
+        disabled: !/^\/portal-view\/[^/]+$/.test(path),
+        hide: isHideHomeDesign.value,
+        divider: true,
+      },
+      // {
+      //   icon: 'ic:twotone-close',
+      //   event: MenuEventEnum.CLOSE_CURRENT,
+      //   text: t('layout.multipleTab.close'),
+      //   disabled: !!meta?.affix || disabled,
+      //   divider: true,
+      // },
+      {
+        icon: 'mdi:arrow-left',
+        event: MenuEventEnum.CLOSE_LEFT,
+        text: t('layout.multipleTab.closeLeft'),
+        // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+        disabled: closeLeftDisabled(),
+        divider: false,
+      },
+      {
+        icon: 'mdi:arrow-right',
+        event: MenuEventEnum.CLOSE_RIGHT,
+        text: t('layout.multipleTab.closeRight'),
+        disabled: closeRightDisabled,
+        divider: true,
+      },
+      {
+        icon: 'material-symbols:arrows-outward',
+        event: MenuEventEnum.CLOSE_OTHER,
+        text: t('layout.multipleTab.closeOther'),
+        // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+        disabled: closeOtherDisabled(),
+      },
+      // {
+      //   icon: 'clarity:minus-line',
+      //   event: MenuEventEnum.CLOSE_ALL,
+      //   text: t('layout.multipleTab.closeAll'),
+      //   disabled: disabled,
+      // },
+    ];
+
+    return dropMenuList;
+  });
+
+  function handleContextMenu(tabItem: RouteLocationNormalized) {
+    return (e: Event) => {
+      if (!tabItem) {
+        return;
+      }
+      e?.preventDefault();
+      const index = tabStore.getTabList.findIndex((tab) => tab.path === tabItem.path);
+      state.current = tabItem;
+      state.currentIndex = index;
+    };
+  }
+
+  // Handle right click event
+  function handleMenuEvent(menu: DropMenu): void {
+    const { event } = menu;
+    switch (event) {
+      case MenuEventEnum.REFRESH_PAGE:
+        // refresh page
+        refreshPage();
+        break;
+      // Close current
+      case MenuEventEnum.CLOSE_CURRENT:
+        close(tabContentProps.tabItem);
+        break;
+      // Close left
+      case MenuEventEnum.CLOSE_LEFT:
+        closeLeft(state.current);
+        break;
+      // Close right
+      case MenuEventEnum.CLOSE_RIGHT:
+        closeRight(state.current);
+        break;
+      // Close other
+      case MenuEventEnum.CLOSE_OTHER:
+        closeOther(state.current);
+        break;
+      // Close all
+      case MenuEventEnum.CLOSE_ALL:
+        closeAll(state.current);
+        break;
+      // Close all
+      case MenuEventEnum.HOME_DESIGN:
+        changeDesign();
+        break;
+    }
+  }
+  return { getDropMenuList, handleMenuEvent, handleContextMenu };
+}
diff --git a/src/layouts/default/trigger/HeaderTrigger.vue b/src/layouts/default/trigger/HeaderTrigger.vue
new file mode 100644
index 0000000..33077ba
--- /dev/null
+++ b/src/layouts/default/trigger/HeaderTrigger.vue
@@ -0,0 +1,23 @@
+<template>
+  <span :class="[prefixCls, theme]" @click="toggleCollapsed"> <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else /> </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'HeaderTrigger',
+    components: { MenuUnfoldOutlined, MenuFoldOutlined },
+    props: {
+      theme: propTypes.oneOf(['light', 'dark']),
+    },
+    setup() {
+      const { getCollapsed, toggleCollapsed } = useMenuSetting();
+      const { prefixCls } = useDesign('layout-header-trigger');
+      return { getCollapsed, toggleCollapsed, prefixCls };
+    },
+  });
+</script>
diff --git a/src/layouts/default/trigger/SiderTrigger.vue b/src/layouts/default/trigger/SiderTrigger.vue
new file mode 100644
index 0000000..0eb38b5
--- /dev/null
+++ b/src/layouts/default/trigger/SiderTrigger.vue
@@ -0,0 +1,21 @@
+<template>
+  <div @click.stop="toggleCollapsed">
+    <DoubleRightOutlined v-if="getCollapsed" />
+    <DoubleLeftOutlined v-else />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
+  export default defineComponent({
+    name: 'SiderTrigger',
+    components: { DoubleRightOutlined, DoubleLeftOutlined },
+    setup() {
+      const { getCollapsed, toggleCollapsed } = useMenuSetting();
+
+      return { getCollapsed, toggleCollapsed };
+    },
+  });
+</script>
diff --git a/src/layouts/default/trigger/index.vue b/src/layouts/default/trigger/index.vue
new file mode 100644
index 0000000..61f43b3
--- /dev/null
+++ b/src/layouts/default/trigger/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <SiderTrigger v-if="sider" />
+  <HeaderTrigger v-else :theme="theme" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { propTypes } from '/@/utils/propTypes';
+  import HeaderTrigger from './HeaderTrigger.vue';
+
+  export default defineComponent({
+    name: 'LayoutTrigger',
+    components: {
+      SiderTrigger: createAsyncComponent(() => import('./SiderTrigger.vue')),
+      HeaderTrigger: HeaderTrigger,
+    },
+    props: {
+      sider: propTypes.bool.def(true),
+      theme: propTypes.oneOf(['light', 'dark']),
+    },
+  });
+</script>
diff --git a/src/layouts/iframe/index.vue b/src/layouts/iframe/index.vue
new file mode 100644
index 0000000..09900cc
--- /dev/null
+++ b/src/layouts/iframe/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div v-if="showFrame">
+    <template v-for="frame in getFramePages" :key="frame.path">
+      <FramePage v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)" v-show="showIframe(frame)" :frameSrc="frame.meta.frameSrc" />
+    </template>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, computed } from 'vue';
+  import FramePage from '/@/views/sys/iframe/index.vue';
+
+  import { useFrameKeepAlive } from './useFrameKeepAlive';
+
+  export default defineComponent({
+    name: 'FrameLayout',
+    components: { FramePage },
+    setup() {
+      const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
+
+      const showFrame = computed(() => unref(getFramePages).length > 0);
+
+      return { getFramePages, hasRenderFrame, showIframe, showFrame };
+    },
+  });
+</script>
diff --git a/src/layouts/iframe/useFrameKeepAlive.ts b/src/layouts/iframe/useFrameKeepAlive.ts
new file mode 100644
index 0000000..e84c49f
--- /dev/null
+++ b/src/layouts/iframe/useFrameKeepAlive.ts
@@ -0,0 +1,59 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+
+import { computed, toRaw, unref } from 'vue';
+
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+import { uniqBy } from 'lodash-es';
+
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+import { useRouter } from 'vue-router';
+
+export function useFrameKeepAlive() {
+  const router = useRouter();
+  const { currentRoute } = router;
+  const { getShowMultipleTab } = useMultipleTabSetting();
+  const tabStore = useMultipleTabStore();
+  const getFramePages = computed(() => {
+    const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
+    return ret;
+  });
+
+  const getOpenTabList = computed((): string[] => {
+    return tabStore.getTabList.reduce((prev: string[], next) => {
+      if (next.meta && Reflect.has(next.meta, 'frameSrc')) {
+        prev.push(next.name as string);
+      }
+      return prev;
+    }, []);
+  });
+
+  function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
+    let res: AppRouteRecordRaw[] = [];
+    for (const route of routes) {
+      const { meta: { frameSrc } = {}, children } = route;
+      if (frameSrc) {
+        res.push(route);
+      }
+      if (children && children.length) {
+        res.push(...getAllFramePages(children));
+      }
+    }
+    res = uniqBy(res, 'name');
+    return res;
+  }
+
+  function showIframe(item: AppRouteRecordRaw) {
+    return item.name === unref(currentRoute).name;
+  }
+
+  function hasRenderFrame(name: string) {
+    if (!unref(getShowMultipleTab)) {
+      return router.currentRoute.value.name === name;
+    }
+    return unref(getOpenTabList).includes(name);
+  }
+
+  return { hasRenderFrame, getFramePages, showIframe, getAllFramePages };
+}
diff --git a/src/layouts/page/components/EmptyPage.vue b/src/layouts/page/components/EmptyPage.vue
new file mode 100644
index 0000000..bb30f2d
--- /dev/null
+++ b/src/layouts/page/components/EmptyPage.vue
@@ -0,0 +1,174 @@
+<template>
+  <template v-if="isQiankunRoute">
+    <!-- qiankun 路由不显示空白页提示 -->
+  </template>
+  <!-- 【QQYUN-13593】空白页美化 -->
+  <div v-else class="animationEffect" :style="effectVars">
+    <div class="effect-layer">
+      <div class="blob blob-a"></div>
+      <div class="blob blob-b"></div>
+      <div class="blob blob-c"></div>
+    </div>
+    <div class="effect-grid"></div>
+    <div class="effect-tip">
+      <p>{{ pageTip }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { router } from "@/router";
+import { useEmpty } from '../useEmpty';
+
+// 判断是否是 qiankun 路由
+const isQiankunRoute = computed(() => !!router.currentRoute.value?.meta?.isQiankunRoute);
+
+const {pageTip, effectVars} = useEmpty();
+</script>
+
+<style lang="less" scoped>
+/** update-begin---author:liaozy ---date:2025-08-26  for：空白页美化样式 */
+.pageTip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 18px;
+  color: #999;
+  margin: 0;
+}
+
+.animationEffect {
+  position: relative;
+  height: 100%;
+  min-height: 420px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
+}
+
+.effect-layer {
+  position: absolute;
+  top: -20%;
+  left: -20%;
+  right: -20%;
+  bottom: -20%;
+  filter: blur(30px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.blob {
+  position: absolute;
+  width: 380px;
+  height: 380px;
+  border-radius: 50%;
+  opacity: 0.45;
+}
+
+.blob-a {
+  background: radial-gradient(circle at 30% 30%, var(--blob-a-1) 0%, var(--blob-a-2) 60%, var(--blob-a-2) 100%);
+  left: 5%;
+  top: 10%;
+  animation: float-a 18s ease-in-out infinite;
+}
+
+.blob-b {
+  background: radial-gradient(circle at 30% 30%, var(--blob-b-1) 0%, var(--blob-b-2) 60%, var(--blob-b-2) 100%);
+  right: 0;
+  top: 30%;
+  animation: float-b 22s ease-in-out infinite;
+}
+
+.blob-c {
+  background: radial-gradient(circle at 30% 30%, var(--blob-c-1) 0%, var(--blob-c-2) 60%, var(--blob-c-2) 100%);
+  left: 35%;
+  bottom: -5%;
+  animation: float-c 26s ease-in-out infinite;
+}
+
+@keyframes float-a {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(20%, -10%) scale(1.05);
+  }
+  50% {
+    transform: translate(35%, 5%) scale(0.95);
+  }
+  75% {
+    transform: translate(10%, 15%) scale(1.02);
+  }
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+@keyframes float-b {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(-15%, 10%) scale(1.08);
+  }
+  50% {
+    transform: translate(-30%, -5%) scale(0.92);
+  }
+  75% {
+    transform: translate(-10%, -15%) scale(1.03);
+  }
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+@keyframes float-c {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(-10%, -10%) scale(0.9);
+  }
+  50% {
+    transform: translate(10%, -25%) scale(1.05);
+  }
+  75% {
+    transform: translate(20%, 0%) scale(0.98);
+  }
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+.effect-grid {
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(0deg, var(--grid-color) 1px, rgba(0, 0, 0, 0) 1px),
+  linear-gradient(90deg, var(--grid-color) 1px, rgba(0, 0, 0, 0) 1px);
+  background-size: 36px 36px, 36px 36px;
+  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 70%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.effect-tip {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  pointer-events: none;
+
+  p {
+    margin: 0;
+    padding: 8px 14px;
+    color: var(--tip-color);
+    font-size: 20px;
+    border-radius: 8px;
+  }
+}
+
+/** update-end---author:liaozy ---date:2025-08-26  for：空白页美化样式 */
+</style>
diff --git a/src/layouts/page/index.vue b/src/layouts/page/index.vue
new file mode 100644
index 0000000..3465ed5
--- /dev/null
+++ b/src/layouts/page/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <!--      <transition-->
+      <!--        :name="-->
+      <!--          getTransitionName({-->
+      <!--            route,-->
+      <!--            openCache,-->
+      <!--            enableTransition: getEnableTransition,-->
+      <!--            cacheTabs: getCaches,-->
+      <!--            def: getBasicTransition,-->
+      <!--          })-->
+      <!--        "-->
+      <!--        mode="out-in"-->
+      <!--        appear-->
+      <!--      >-->
+      <keep-alive v-if="openCache" :include="getCaches">
+        <template v-if="Component">
+          <component :is="Component" :key="route.fullPath"/>
+        </template>
+        <EmptyPage v-else/>
+      </keep-alive>
+      <component v-else-if="Component" :is="Component" :key="route.fullPath"/>
+      <EmptyPage v-else/>
+      <!--      </transition>-->
+    </template>
+  </RouterView>
+  <FrameLayout v-if="getCanEmbedIFramePage" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, unref } from 'vue';
+
+  import FrameLayout from '/@/layouts/iframe/index.vue';
+  import EmptyPage from './components/EmptyPage.vue';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+  import { getTransitionName } from './transition';
+
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+
+  export default defineComponent({
+    name: 'PageLayout',
+    components: { FrameLayout, EmptyPage },
+    setup() {
+      const { getShowMultipleTab } = useMultipleTabSetting();
+      const tabStore = useMultipleTabStore();
+
+      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+
+      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+
+      const getCaches = computed((): string[] => {
+        if (!unref(getOpenKeepAlive)) {
+          return [];
+        }
+        return tabStore.getCachedTabList;
+      });
+      return {
+        getTransitionName,
+        openCache,
+        getEnableTransition,
+        getBasicTransition,
+        getCaches,
+        getCanEmbedIFramePage,
+      };
+    },
+  });
+</script>
diff --git a/src/layouts/page/transition.ts b/src/layouts/page/transition.ts
new file mode 100644
index 0000000..9e93009
--- /dev/null
+++ b/src/layouts/page/transition.ts
@@ -0,0 +1,33 @@
+import type { FunctionalComponent } from 'vue';
+import type { RouteLocation } from 'vue-router';
+
+export interface DefaultContext {
+  Component: FunctionalComponent & { type: Recordable };
+  route: RouteLocation;
+}
+
+export function getTransitionName({
+  route,
+  openCache,
+  cacheTabs,
+  enableTransition,
+  def,
+}: Pick<DefaultContext, 'route'> & {
+  enableTransition: boolean;
+  openCache: boolean;
+  def: string;
+  cacheTabs: string[];
+}): string | undefined {
+  if (!enableTransition) {
+    return undefined;
+  }
+
+  const isInCache = cacheTabs.includes(route.name as string);
+  const transitionName = 'fade-slide';
+  let name: string | undefined = transitionName;
+
+  if (openCache) {
+    name = isInCache && route.meta.loaded ? transitionName : undefined;
+  }
+  return name || (route.meta.transitionName as string) || def;
+}
diff --git a/src/layouts/page/useEmpty.ts b/src/layouts/page/useEmpty.ts
new file mode 100644
index 0000000..41e7d4c
--- /dev/null
+++ b/src/layouts/page/useEmpty.ts
@@ -0,0 +1,87 @@
+import { computed, unref, ref, watch } from 'vue';
+import { getMenus } from '/@/router/menus';
+import { useRoute } from 'vue-router';
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { lighten, darken } from '/@/utils/color';
+export const useEmpty = () => {
+  const { getThemeColor, getDarkMode } = useRootSetting();
+  const route = useRoute();
+  const { getHeaderBgColor } = useHeaderSetting();
+  const { getMenuBgColor } = useMenuSetting();
+  const pageTip = ref('');
+  const effectVars = computed(() => {
+    const primary = unref(getThemeColor) || '#1890ff';
+    const menuBg = unref(getMenuBgColor) || '#ffffff';
+    const headerBg = unref(getHeaderBgColor);
+    const isDark = unref(getDarkMode) === 'dark';
+    // 以主题色为基色，派生三组渐变色
+    const a1 = lighten(primary, 25);
+    const a2 = primary;
+    const b1 = lighten(headerBg, 45);
+    const b2 = lighten(headerBg, 10);
+    const c1 = lighten(menuBg, 35);
+    const c2 = darken(primary, 5);
+    const bg1 = isDark ? '#0f172a' : '#f7f8fa';
+    const bg2 = isDark ? '#111827' : '#f2f5f9';
+    const grid = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(60,70,90,0.06)';
+    const tipColor = isDark ? '#626262' : '#b9b9b9';
+    const tipBg = isDark ? 'rgba(17,24,39,0.6)' : 'rgba(255,255,255,0.6)';
+    const tipBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
+    return {
+      '--blob-a-1': a1,
+      '--blob-a-2': a2,
+      '--blob-b-1': b1,
+      '--blob-b-2': b2,
+      '--blob-c-1': c1,
+      '--blob-c-2': c2,
+      '--bg-1': bg1,
+      '--bg-2': bg2,
+      '--grid-color': grid,
+      '--tip-color': tipColor,
+      '--tip-bg': tipBg,
+      '--tip-border': tipBorder,
+    } as Record<string, string>;
+  });
+
+  const getPageTip = async (route) => {
+    const menus = await getMenus();
+    const menu = getMatchingPath(menus, route.path);
+    if (menu) {
+      if (['/layouts/default/index'].includes(menu.originComponent)) {
+        pageTip.value = '点击子菜单跳转到对应外部链接！';
+      } else {
+        pageTip.value = '查看组件引用是否正确';
+      }
+    }
+  };
+  watch(
+    route,
+    () => {
+      getPageTip({ path: window.location.pathname });
+    },
+    { immediate: true }
+  );
+
+  function getMatchingPath(menus, path) {
+    for (let i = 0, len = menus.length; i < len; i++) {
+      const item = menus[i];
+      if (item.path === path) {
+        return item;
+      } else if (item.children?.length) {
+        const result = getMatchingPath(item.children, path);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }
+
+  return {
+    pageTip,
+    getPageTip,
+    effectVars,
+  };
+};
diff --git a/src/locales/helper.ts b/src/locales/helper.ts
new file mode 100644
index 0000000..4f78439
--- /dev/null
+++ b/src/locales/helper.ts
@@ -0,0 +1,37 @@
+import type { LocaleType } from '/#/config';
+
+import { set } from 'lodash-es';
+
+export const loadLocalePool: LocaleType[] = [];
+
+export function setHtmlPageLang(locale: LocaleType) {
+  document.querySelector('html')?.setAttribute('lang', locale);
+}
+
+export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
+  cb(loadLocalePool);
+}
+
+export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
+  const obj: Recordable = {};
+
+  Object.keys(langs).forEach((key) => {
+    const langFileModule = langs[key].default;
+    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');
+    const lastIndex = fileName.lastIndexOf('.');
+    fileName = fileName.substring(0, lastIndex);
+    const keyList = fileName.split('/');
+    const moduleName = keyList.shift();
+    const objKey = keyList.join('.');
+
+    if (moduleName) {
+      if (objKey) {
+        set(obj, moduleName, obj[moduleName] || {});
+        set(obj[moduleName], objKey, langFileModule);
+      } else {
+        set(obj, moduleName, langFileModule || {});
+      }
+    }
+  });
+  return obj;
+}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
new file mode 100644
index 0000000..57d8aad
--- /dev/null
+++ b/src/locales/lang/en.ts
@@ -0,0 +1,13 @@
+import { genMessage } from '../helper';
+import antdLocale from 'ant-design-vue/es/locale/en_US';
+//import momentLocale from 'moment/dist/locale/eu';
+
+const modules = import.meta.glob('./en/**/*.ts', { eager: true });
+export default {
+  message: {
+    ...genMessage(modules as Recordable<Recordable>, 'en'),
+    antdLocale,
+  },
+  dateLocale: null,
+  dateLocaleName: 'en',
+};
diff --git a/src/locales/lang/en/common.ts b/src/locales/lang/en/common.ts
new file mode 100644
index 0000000..f7cdce0
--- /dev/null
+++ b/src/locales/lang/en/common.ts
@@ -0,0 +1,20 @@
+export default {
+  okText: 'OK',
+  closeText: 'Close',
+  cancelText: 'Cancel',
+  loadingText: 'Loading...',
+  saveText: 'Save',
+  delText: 'Delete',
+  resetText: 'Reset',
+  searchText: 'Search',
+  queryText: 'Search',
+
+  inputText: 'Please enter',
+  chooseText: 'Please choose',
+
+  redo: 'Refresh',
+  back: 'Back',
+
+  light: 'Light',
+  dark: 'Dark',
+};
diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts
new file mode 100644
index 0000000..b93dbd5
--- /dev/null
+++ b/src/locales/lang/en/component.ts
@@ -0,0 +1,129 @@
+export default {
+  app: {
+    searchNotData: 'No search results yet',
+    toSearch: 'to search',
+    toNavigate: 'to navigate',
+  },
+  countdown: {
+    normalText: 'Get SMS code',
+    sendText: 'Reacquire in {0}s',
+  },
+  cropper: {
+    selectImage: 'Select Image',
+    uploadSuccess: 'Uploaded success!',
+    modalTitle: 'Avatar upload',
+    okText: 'Confirm and upload',
+    btn_reset: 'Reset',
+    btn_rotate_left: 'Counterclockwise rotation',
+    btn_rotate_right: 'Clockwise rotation',
+    btn_scale_x: 'Flip horizontal',
+    btn_scale_y: 'Flip vertical',
+    btn_zoom_in: 'Zoom in',
+    btn_zoom_out: 'Zoom out',
+    preview: 'Preivew',
+  },
+  drawer: {
+    loadingText: 'Loading...',
+    cancelText: 'Close',
+    okText: 'Confirm',
+  },
+  excel: {
+    exportModalTitle: 'Export data',
+    fileType: 'File type',
+    fileName: 'File name',
+  },
+  form: {
+    putAway: 'Put away',
+    unfold: 'Unfold',
+    maxTip: 'The number of characters should be less than {0}',
+    apiSelectNotFound: 'Wait for data loading to complete...',
+  },
+  icon: {
+    placeholder: 'Click the select icon',
+    search: 'Search icon',
+    copy: 'Copy icon successfully!',
+  },
+  menu: {
+    search: 'Menu search',
+  },
+  modal: {
+    cancelText: 'Close',
+    okText: 'Confirm',
+    close: 'Close',
+    maximize: 'Maximize',
+    restore: 'Restore',
+  },
+  table: {
+    settingDens: 'Density',
+    settingDensDefault: 'Default',
+    settingDensMiddle: 'Middle',
+    settingDensSmall: 'Compact',
+    settingColumn: 'Column settings',
+    settingColumnShow: 'Column display',
+    settingIndexColumnShow: 'Index Column',
+    settingSelectColumnShow: 'Selection Column',
+    settingFixedLeft: 'Fixed Left',
+    settingFixedRight: 'Fixed Right',
+    settingFullScreen: 'Full Screen',
+    index: 'Index',
+    total: 'total of {total}',
+  },
+  time: {
+    before: ' ago',
+    after: ' after',
+    just: 'just now',
+    seconds: ' seconds',
+    minutes: ' minutes',
+    hours: ' hours',
+    days: ' days',
+  },
+  tree: {
+    selectAll: 'Select All',
+    unSelectAll: 'Cancel Select',
+    expandAll: 'Expand All',
+    unExpandAll: 'Collapse all',
+
+    checkStrictly: 'Hierarchical association',
+    checkUnStrictly: 'Hierarchical independence',
+  },
+  upload: {
+    save: 'Save',
+    upload: 'Upload',
+    imgUpload: 'ImageUpload',
+    uploaded: 'Uploaded',
+
+    operating: 'Operating',
+    del: 'Delete',
+    download: 'download',
+    saveWarn: 'Please wait for the file to upload and save!',
+    saveError: 'There is no file successfully uploaded and cannot be saved!',
+
+    preview: 'Preview',
+    choose: 'Select the file',
+
+    accept: 'Support {0} format',
+    acceptUpload: 'Only upload files in {0} format',
+    maxSize: 'A single file does not exceed {0}MB ',
+    maxSizeMultiple: 'Only upload files up to {0}MB!',
+    maxNumber: 'Only upload up to {0} files',
+
+    legend: 'Legend',
+    fileName: 'File name',
+    fileSize: 'File size',
+    fileStatue: 'File status',
+
+    startUpload: 'Start upload',
+    uploadSuccess: 'Upload successfully',
+    uploadError: 'Upload failed',
+    uploading: 'Uploading',
+    uploadWait: 'Please wait for the file upload to finish',
+    reUploadFailed: 'Re-upload failed files',
+  },
+  verify: {
+    error: 'verification failed！',
+    time: 'The verification is successful and it takes {time} seconds！',
+    redoTip: 'Click the picture to refresh',
+    dragText: 'Hold down the slider and drag',
+    successText: 'Verified',
+  },
+};
diff --git a/src/locales/lang/en/layout.ts b/src/locales/lang/en/layout.ts
new file mode 100644
index 0000000..971b10d
--- /dev/null
+++ b/src/locales/lang/en/layout.ts
@@ -0,0 +1,136 @@
+export default {
+  footer: { onlinePreview: 'Preview', onlineDocument: 'Document' },
+  header: {
+    // user dropdown
+    dropdownItemDoc: 'Document',
+    dropdownItemLoginOut: 'Login Out',
+    dropdownItemSwitchPassword: 'Password Change',
+    dropdownItemSwitchDepart: 'Switch Department',
+    dropdownItemRefreshCache: 'Clean cache',
+    dropdownItemSwitchAccount: 'Account Setting',
+    dropdownItemSwitchDefaultHomePage: 'Switch Home Page',
+    dropdownItemSwitchDefaultWeb: 'Web Download',
+    dropdownItemSwitchDefaultAndroid: 'Android Apk Download',
+
+    tooltipErrorLog: 'Error log',
+    tooltipLock: 'Lock screen',
+    tooltipNotify: 'Notification',
+
+    tooltipEntryFull: 'Full Screen',
+    tooltipExitFull: 'Exit Full Screen',
+
+    // lock
+    lockScreenPassword: 'Password',
+    lockScreen: 'Lock screen',
+    lockScreenBtn: 'Locking',
+
+    home: 'Home',
+    welcomeIn: 'Welcome in',
+    refreshCacheComplete: 'Refresh cache complete',
+    refreshCacheFailure: 'Refresh cache failure',
+  },
+  multipleTab: {
+    reload: 'Refresh current',
+    close: 'Close current',
+    closeLeft: 'Close Left',
+    closeRight: 'Close Right',
+    closeOther: 'Close Other',
+    closeAll: 'Close All',
+    homeDesign: 'Home Design',
+  },
+  setting: {
+    // content mode
+    contentModeFull: 'Full',
+    contentModeFixed: 'Fixed width',
+    // topMenu align
+    topMenuAlignLeft: 'Left',
+    topMenuAlignRight: 'Center',
+    topMenuAlignCenter: 'Right',
+    // menu trigger
+    menuTriggerNone: 'Not Show',
+    menuTriggerBottom: 'Bottom',
+    menuTriggerTop: 'Top',
+    // menu type
+    menuTypeSidebar: 'Left menu mode',
+    menuTypeMixSidebar: 'Left menu mixed mode',
+    menuTypeMix: 'Top Menu Mix mode',
+    menuTypeTopMenu: 'Top menu mode',
+
+    on: 'On',
+    off: 'Off',
+    minute: 'Minute',
+
+    operatingTitle: 'Successful!',
+    operatingContent: 'The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!',
+    resetSuccess: 'Successfully reset!',
+
+    copyBtn: 'Copy',
+    clearBtn: 'Clear cache and to the login page',
+
+    drawerTitle: 'Configuration',
+
+    darkMode: 'Dark mode',
+    navMode: 'Navigation mode',
+    interfaceFunction: 'Interface function',
+    interfaceDisplay: 'Interface display',
+    animation: 'Animation',
+    splitMenu: 'Split menu',
+    closeMixSidebarOnChange: 'Switch page to close menu',
+
+    sysTheme: 'System theme',
+    headerTheme: 'Header theme',
+    sidebarTheme: 'Menu theme',
+
+    menuDrag: 'Drag Sidebar',
+    menuSearch: 'Menu search',
+    menuAccordion: 'Sidebar accordion',
+    menuCollapse: 'Collapse menu',
+    collapseMenuDisplayName: 'Collapse menu display name',
+    topMenuLayout: 'Top menu layout',
+    menuCollapseButton: 'Menu collapse button',
+    contentMode: 'Content area width',
+    expandedMenuWidth: 'Expanded menu width',
+
+    breadcrumb: 'Breadcrumbs',
+    breadcrumbIcon: 'Breadcrumbs Icon',
+    tabs: 'Tabs',
+    tabDetail: 'Tab Detail',
+    tabsQuickBtn: 'Tabs quick button',
+    tabsRedoBtn: 'Tabs redo button',
+    tabsFoldBtn: 'Tabs flod button',
+    tabsTheme: 'tabs theme',
+    tabsThemeSmooth: 'Smooth',
+    tabsThemeCard: 'Card',
+    tabsThemeSimple: 'Simple',
+    sidebar: 'Sidebar',
+    header: 'Header',
+    footer: 'Footer',
+    fullContent: 'Full content',
+    grayMode: 'Gray mode',
+    colorWeak: 'Color Weak Mode',
+
+    progress: 'Progress',
+    switchLoading: 'Switch Loading',
+    switchAnimation: 'Switch animation',
+    animationType: 'Animation type',
+
+    autoScreenLock: 'Auto screen lock',
+    notAutoScreenLock: 'Not auto lock',
+
+    fixedHeader: 'Fixed header',
+    fixedSideBar: 'Fixed Sidebar',
+
+    mixSidebarTrigger: 'Mixed menu Trigger',
+    triggerHover: 'Hover',
+    triggerClick: 'Click',
+
+    mixSidebarFixed: 'Fixed expanded menu',
+  },
+  changePassword: {
+    changePassword: 'Change password',
+    oldPassword: 'Old password',
+    newPassword: 'New password',
+    confirmNewPassword: 'Confirm new password',
+    pleaseEnterNewPassword: 'Please enter new password',
+  },
+};
diff --git a/src/locales/lang/en/routes/basic.ts b/src/locales/lang/en/routes/basic.ts
new file mode 100644
index 0000000..15d9141
--- /dev/null
+++ b/src/locales/lang/en/routes/basic.ts
@@ -0,0 +1,5 @@
+export default {
+  login: 'Login',
+  errorLogList: 'Error Log',
+  defaultHomePage: 'Default Home Page',
+};
diff --git a/src/locales/lang/en/routes/dashboard.ts b/src/locales/lang/en/routes/dashboard.ts
new file mode 100644
index 0000000..6d047b5
--- /dev/null
+++ b/src/locales/lang/en/routes/dashboard.ts
@@ -0,0 +1,6 @@
+export default {
+  dashboard: 'Dashboard',
+  about: 'About',
+  workbench: 'Workbench',
+  analysis: 'Analysis',
+};
diff --git a/src/locales/lang/en/routes/demo.ts b/src/locales/lang/en/routes/demo.ts
new file mode 100644
index 0000000..b299192
--- /dev/null
+++ b/src/locales/lang/en/routes/demo.ts
@@ -0,0 +1,199 @@
+export default {
+  charts: {
+    baiduMap: 'Baidu map',
+    aMap: 'A map',
+    googleMap: 'Google map',
+    charts: 'Chart',
+    map: 'Map',
+    line: 'Line',
+    pie: 'Pie',
+  },
+  comp: {
+    comp: 'Component',
+    basic: 'Basic',
+    transition: 'Animation',
+    countTo: 'Count To',
+
+    scroll: 'Scroll',
+    scrollBasic: 'Basic',
+    scrollAction: 'Scroll Function',
+    virtualScroll: 'Virtual Scroll',
+
+    tree: 'Tree',
+
+    treeBasic: 'Basic',
+    editTree: 'Searchable/toolbar',
+    actionTree: 'Function operation',
+
+    modal: 'Modal',
+    drawer: 'Drawer',
+    desc: 'Desc',
+
+    lazy: 'Lazy',
+    lazyBasic: 'Basic',
+    lazyTransition: 'Animation',
+
+    verify: 'Verify',
+    verifyDrag: 'Drag ',
+    verifyRotate: 'Picture Restore',
+
+    qrcode: 'QR code',
+    strength: 'Password strength',
+    upload: 'Upload',
+
+    loading: 'Loading',
+
+    time: 'Relative Time',
+    cropperImage: 'Cropper Image',
+    cardList: 'Card List',
+  },
+  editor: {
+    editor: 'Editor',
+    jsonEditor: 'Json editor',
+    markdown: 'Markdown editor',
+
+    tinymce: 'Rich text',
+    tinymceBasic: 'Basic',
+    tinymceForm: 'embedded form',
+  },
+  excel: {
+    excel: 'Excel',
+    customExport: 'Select export format',
+    jsonExport: 'JSON data export',
+    arrayExport: 'Array data export',
+    importExcel: 'Import',
+  },
+  feat: {
+    feat: 'Page Function',
+    icon: 'Icon',
+    tabs: 'Tabs',
+    tabDetail: 'Tab Detail',
+    sessionTimeout: 'Session Timeout',
+    print: 'Print',
+    contextMenu: 'Context Menu',
+    download: 'Download',
+    clickOutSide: 'ClickOutSide',
+    imgPreview: 'Picture Preview',
+    copy: 'Clipboard',
+    msg: 'Message prompt',
+    watermark: 'Watermark',
+    ripple: 'Ripple',
+    fullScreen: 'Full Screen',
+    errorLog: 'Error Log',
+    tab: 'Tab with parameters',
+    tab1: 'Tab with parameter 1',
+    tab2: 'Tab with parameter 2',
+    menu: 'Menu with parameters',
+    menu1: 'Menu with parameters 1',
+    menu2: 'Menu with parameters 2',
+
+    ws: 'Websocket test',
+
+    breadcrumb: 'Breadcrumbs',
+    breadcrumbFlat: 'Flat Mode',
+    breadcrumbFlatDetail: 'Flat mode details',
+
+    breadcrumbChildren: 'Level mode',
+    breadcrumbChildrenDetail: 'Level mode detail',
+  },
+  flow: {
+    name: 'Graphics editor',
+    flowChart: 'FlowChart',
+  },
+  form: {
+    form: 'Form',
+    basic: 'Basic',
+    useForm: 'useForm',
+    refForm: 'RefForm',
+    advancedForm: 'Shrinkable',
+    ruleForm: 'Form validation',
+    dynamicForm: 'Dynamic',
+    customerForm: 'Custom',
+    appendForm: 'Append',
+  },
+  iframe: {
+    frame: 'External',
+    antv: 'antVue doc (embedded)',
+    doc: 'Project doc (embedded)',
+    docExternal: 'Project doc (external)',
+  },
+  level: { level: 'MultiMenu' },
+  page: {
+    page: 'Page',
+
+    form: 'Form',
+    formBasic: 'Basic Form',
+    formStep: 'Step Form',
+    formHigh: 'Advanced Form',
+
+    desc: 'Details',
+    descBasic: 'Basic Details',
+    descHigh: 'Advanced Details',
+
+    result: 'Result',
+    resultSuccess: 'Success',
+    resultFail: 'Failed',
+
+    account: 'Personal',
+    accountCenter: 'Personal Center',
+    accountSetting: 'Personal Settings',
+
+    exception: 'Exception',
+    netWorkError: 'Network Error',
+    notData: 'No data',
+
+    list: 'List page',
+    listCard: 'Card list',
+    basic: 'Basic list',
+    listBasic: 'Basic list',
+    listSearch: 'Search list',
+  },
+  permission: {
+    permission: 'Permission',
+
+    front: 'front-end',
+    frontPage: 'Page',
+    frontBtn: 'Button',
+    frontTestA: 'Test page A',
+    frontTestB: 'Test page B',
+
+    back: 'background',
+    backPage: 'Page',
+    backBtn: 'Button',
+  },
+  setup: {
+    page: 'Intro page',
+  },
+  system: {
+    moduleName: 'System management',
+
+    account: 'Account management',
+    account_detail: 'Account detail',
+    password: 'Change password',
+
+    dept: 'Department management',
+
+    menu: 'Menu management',
+    role: 'Role management',
+  },
+  table: {
+    table: 'Table',
+
+    basic: 'Basic',
+    treeTable: 'Tree',
+    fetchTable: 'Remote loading',
+    fixedColumn: 'Fixed column',
+    customerCell: 'Custom column',
+    formTable: 'Open search',
+    useTable: 'UseTable',
+    refTable: 'RefTable',
+    multipleHeader: 'MultiLevel header',
+    mergeHeader: 'Merge cells',
+    expandTable: 'Expandable table',
+    fixedHeight: 'Fixed height',
+    footerTable: 'Footer',
+    editCellTable: 'Editable cell',
+    editRowTable: 'Editable row',
+    authColumn: 'Auth column',
+  },
+};
diff --git a/src/locales/lang/en/sys.ts b/src/locales/lang/en/sys.ts
new file mode 100644
index 0000000..3722557
--- /dev/null
+++ b/src/locales/lang/en/sys.ts
@@ -0,0 +1,112 @@
+export default {
+  api: {
+    operationFailed: 'Operation failed',
+    errorTip: 'Error Tip',
+    errorMessage: 'The operation failed, the system is abnormal!',
+    timeoutMessage: 'Login timed out, please log in again!',
+    apiTimeoutMessage: 'The interface request timed out, please refresh the page and try again!',
+    apiRequestFailed: 'The interface request failed, please try again later!',
+    networkException: 'network anomaly',
+    networkExceptionMsg: 'Please check if your network connection is normal! The network is abnormal',
+
+    errMsg401: 'The user does not have permission (token, user name, password error)!',
+    errMsg403: 'The user is authorized, but access is forbidden!',
+    errMsg404: 'Network request error, the resource was not found!',
+    errMsg405: 'Network request error, request method not allowed!',
+    errMsg408: 'Network request timed out!',
+    errMsg500: 'Server error, please contact the administrator!',
+    errMsg501: 'The network is not implemented!',
+    errMsg502: 'Network Error!',
+    errMsg503: 'The service is unavailable, the server is temporarily overloaded or maintained!',
+    errMsg504: 'Network timeout!',
+    errMsg505: 'The http version does not support the request!',
+  },
+  app: {
+    logoutTip: 'Reminder',
+    logoutMessage: 'Confirm to exit the system?',
+    menuLoading: 'Menu loading...',
+  },
+  errorLog: {
+    tableTitle: 'Error log list',
+    tableColumnType: 'Type',
+    tableColumnDate: 'Time',
+    tableColumnFile: 'File',
+    tableColumnMsg: 'Error message',
+    tableColumnStackMsg: 'Stack info',
+
+    tableActionDesc: 'Details',
+
+    modalTitle: 'Error details',
+
+    fireVueError: 'Fire vue error',
+    fireResourceError: 'Fire resource error',
+    fireAjaxError: 'Fire ajax error',
+
+    enableMessage: 'Only effective when useErrorHandle=true in `/src/settings/projectSetting.ts`.',
+  },
+  exception: {
+    backLogin: 'Back Login',
+    backHome: 'Back Home',
+    subTitle403: "Sorry, you don't have access to this page.",
+    subTitle404: 'Sorry, the page you visited does not exist.',
+    subTitle500: 'Sorry, the server is reporting an error.',
+    noDataTitle: 'No data on the current page.',
+    networkErrorTitle: 'Network Error',
+    networkErrorSubTitle: 'Sorry，Your network connection has been disconnected, please check your network!',
+  },
+  lock: {
+    unlock: 'Click to unlock',
+    alert: 'Lock screen password error',
+    backToLogin: 'Back to login',
+    entry: 'Enter the system',
+    placeholder: 'lock screen password',
+  },
+  login: {
+    backSignIn: 'Back sign in',
+    mobileSignInFormTitle: 'Mobile sign in',
+    qrSignInFormTitle: 'Qr code sign in',
+    signInFormTitle: 'Sign in',
+    signUpFormTitle: 'Sign up',
+    forgetFormTitle: 'Reset password',
+
+    signInTitle: 'test Admin System',
+    signInDesc: 'A secure and efficient enterprise management platform.',
+    policy: 'I agree to the xxx Privacy Policy',
+    scanSign: `scanning the code to complete the login`,
+
+    loginButton: 'Sign in',
+    registerButton: 'Sign up',
+    rememberMe: 'Remember me',
+    forgetPassword: 'Forget Password?',
+    otherSignIn: 'Sign in with',
+
+    // notify
+    loginSuccessTitle: 'Login successful',
+    loginSuccessDesc: 'Welcome back',
+
+    // placeholder
+    accountPlaceholder: 'Please input username',
+    passwordPlaceholder: 'Please input password',
+    smsPlaceholder: 'Please input sms code',
+    mobilePlaceholder: 'Please input mobile',
+    mobileCorrectPlaceholder: 'Please input correct mobile',
+    policyPlaceholder: 'Register after checking',
+    diffPwd: 'The two passwords are inconsistent',
+
+    userName: 'Username',
+    password: 'Password',
+    loginOrgCode: 'Department',
+    inputCode: 'Verification code',
+    confirmPassword: 'Confirm Password',
+    email: 'Email',
+    smsCode: 'SMS code',
+    mobile: 'Mobile',
+
+    //重置密码页面英文
+    authentication:'authentication',
+    resetLoginPassword:'reset login password',
+    resetSuccess:'reset succeeded',
+    nextStep:'next step',
+    goToLogin:'go to login'
+  },
+};
diff --git a/src/locales/lang/zh-CN/common.ts b/src/locales/lang/zh-CN/common.ts
new file mode 100644
index 0000000..478c625
--- /dev/null
+++ b/src/locales/lang/zh-CN/common.ts
@@ -0,0 +1,20 @@
+export default {
+  okText: '确认',
+  closeText: '关闭',
+  cancelText: '取消',
+  loadingText: '加载中...',
+  saveText: '保存',
+  delText: '删除',
+  resetText: '重置',
+  searchText: '搜索',
+  queryText: '查询',
+
+  inputText: '请输入',
+  chooseText: '请选择',
+
+  redo: '刷新',
+  back: '返回',
+
+  light: '亮色主题',
+  dark: '黑暗主题',
+};
diff --git a/src/locales/lang/zh-CN/component.ts b/src/locales/lang/zh-CN/component.ts
new file mode 100644
index 0000000..e2ae6ac
--- /dev/null
+++ b/src/locales/lang/zh-CN/component.ts
@@ -0,0 +1,135 @@
+export default {
+  app: {
+    searchNotData: '暂无搜索结果',
+    toSearch: '确认',
+    toNavigate: '切换',
+  },
+  countdown: {
+    normalText: '获取验证码',
+    sendText: '{0}秒后重新获取',
+  },
+  cropper: {
+    selectImage: '选择图片',
+    uploadSuccess: '上传成功',
+    modalTitle: '头像上传',
+    okText: '确认并上传',
+    btn_reset: '重置',
+    btn_rotate_left: '逆时针旋转',
+    btn_rotate_right: '顺时针旋转',
+    btn_scale_x: '水平翻转',
+    btn_scale_y: '垂直翻转',
+    btn_zoom_in: '放大',
+    btn_zoom_out: '缩小',
+    preview: '预览',
+  },
+  drawer: {
+    loadingText: '加载中...',
+    cancelText: '关闭',
+    okText: '确认',
+  },
+  excel: {
+    exportModalTitle: '导出数据',
+    fileType: '文件类型',
+    fileName: '文件名',
+  },
+  form: {
+    putAway: '收起',
+    unfold: '展开',
+
+    maxTip: '字符数应小于{0}位',
+
+    apiSelectNotFound: '请等待数据加载完成...',
+  },
+  icon: {
+    placeholder: '点击选择图标',
+    search: '搜索图标',
+    copy: '复制图标成功!',
+  },
+  menu: {
+    search: '菜单搜索',
+  },
+  modal: {
+    cancelText: '关闭',
+    okText: '确认',
+    close: '关闭',
+    maximize: '最大化',
+    restore: '还原',
+  },
+  table: {
+    settingDens: '密度',
+    // settingDensDefault: '默认',
+    settingDensLarge: '宽松',
+    settingDensMiddle: '默认',
+    settingDensSmall: '紧凑',
+    settingColumn: '列设置',
+    settingColumnShow: '列展示',
+    settingIndexColumnShow: '序号列',
+    settingSelectColumnShow: '勾选列',
+    settingFixedLeft: '固定到左侧',
+    settingFixedRight: '固定到右侧',
+    settingFullScreen: '全屏',
+
+    index: '序号',
+
+    total: '共 {total} 条数据',
+  },
+  time: {
+    before: '前',
+    after: '后',
+    just: '刚刚',
+    seconds: '秒',
+    minutes: '分钟',
+    hours: '小时',
+    days: '天',
+  },
+  tree: {
+    selectAll: '选择全部',
+    unSelectAll: '取消选择',
+    expandAll: '展开全部',
+    unExpandAll: '折叠全部',
+    checkStrictly: '层级关联',
+    checkUnStrictly: '层级独立',
+  },
+  upload: {
+    save: '保存',
+    upload: '上传',
+    imgUpload: '图片上传',
+    uploaded: '已上传',
+
+    operating: '操作',
+    del: '删除',
+    download: '下载',
+    saveWarn: '请等待文件上传后，保存!',
+    saveError: '没有上传成功的文件，无法保存!',
+
+    preview: '预览',
+    choose: '选择文件',
+
+    accept: '支持{0}格式',
+    acceptUpload: '只能上传{0}格式文件',
+    maxSize: '单个文件不超过{0}MB',
+    maxSizeMultiple: '只能上传不超过{0}MB的文件!',
+    maxNumber: '最多只能上传{0}个文件',
+
+    legend: '略缩图',
+    fileName: '文件名',
+    fileSize: '文件大小',
+    fileStatue: '状态',
+
+    startUpload: '开始上传',
+    uploadSuccess: '上传成功',
+    uploadError: '上传失败',
+    uploading: '上传中',
+    uploadWait: '请等待文件上传结束后操作',
+    reUploadFailed: '重新上传失败文件',
+  },
+  verify: {
+    error: '验证失败！',
+    time: '验证校验成功,耗时{time}秒！',
+
+    redoTip: '点击图片可刷新',
+
+    dragText: '请按住滑块拖动',
+    successText: '验证通过',
+  },
+};
diff --git a/src/locales/lang/zh-CN/layout.ts b/src/locales/lang/zh-CN/layout.ts
new file mode 100644
index 0000000..b6aa05b
--- /dev/null
+++ b/src/locales/lang/zh-CN/layout.ts
@@ -0,0 +1,139 @@
+export default {
+  footer: { onlinePreview: 'JEECG首页', onlineDocument: '在线文档' },
+  header: {
+    // user dropdown
+    dropdownItemDoc: '官网',
+    dropdownItemLoginOut: '退出系统',
+    dropdownItemSwitchPassword: '密码修改',
+    dropdownItemSwitchDepart: '切换部门',
+    dropdownItemRefreshCache: '刷新缓存',
+    dropdownItemSwitchAccount: '账户设置',
+    dropdownItemSwitchDefaultHomePage: '切换首页',
+
+    dropdownItemSwitchDefaultWeb: '桌面应用',
+    dropdownItemSwitchDefaultAndroid: '移动App',
+
+    // tooltip
+    tooltipErrorLog: '错误日志',
+    tooltipLock: '锁定屏幕',
+    tooltipNotify: '消息通知',
+
+    tooltipEntryFull: '全屏',
+    tooltipExitFull: '退出全屏',
+
+    // lock
+    lockScreenPassword: '锁屏密码',
+    lockScreen: '锁定屏幕',
+    lockScreenBtn: '锁定',
+
+    home: '首页',
+    welcomeIn:"欢迎进入",
+    refreshCacheComplete: "刷新缓存完成！",
+    refreshCacheFailure: "刷新缓存失败！",
+  },
+  multipleTab: {
+    reload: '刷 新',
+    close: '关闭当前',
+    closeLeft: '关闭左侧',
+    closeRight: '关闭右侧',
+    closeOther: '关闭其它',
+    closeAll: '关闭全部',
+    homeDesign: '门户设计',
+  },
+  setting: {
+    // content mode
+    contentModeFull: '流式',
+    contentModeFixed: '定宽',
+    // topMenu align
+    topMenuAlignLeft: '居左',
+    topMenuAlignRight: '居中',
+    topMenuAlignCenter: '居右',
+    // menu trigger
+    menuTriggerNone: '不显示',
+    menuTriggerBottom: '底部',
+    menuTriggerTop: '顶部',
+    // menu type
+    menuTypeSidebar: '侧边栏导航',
+    menuTypeMixSidebar: '侧边折叠导航',
+    menuTypeMix: '顶部混合导航',
+    menuTypeTopMenu: '顶部栏导航',
+
+    on: '开',
+    off: '关',
+    minute: '分钟',
+
+    operatingTitle: '操作成功',
+    operatingContent: '复制成功,请到 src/settings/projectSetting.ts 中修改配置！',
+    resetSuccess: '重置成功！',
+
+    copyBtn: '拷贝',
+    clearBtn: '清空并返回登录',
+
+    drawerTitle: '项目配置',
+
+    darkMode: '主题',
+    navMode: '导航栏模式',
+    interfaceFunction: '界面设置',
+    interfaceDisplay: '界面显示',
+    animation: '动画',
+    splitMenu: '顶部左侧组合菜单',
+    closeMixSidebarOnChange: '切换页面关闭菜单',
+
+    sysTheme: '系统主题',
+    headerTheme: '顶栏主题',
+    sidebarTheme: '菜单主题',
+
+    menuDrag: '侧边菜单拖拽',
+    menuSearch: '菜单搜索',
+    menuAccordion: '侧边菜单手风琴模式',
+    menuCollapse: '折叠菜单',
+    collapseMenuDisplayName: '折叠菜单显示名称',
+    topMenuLayout: '顶部菜单布局',
+    menuCollapseButton: '菜单折叠按钮',
+    contentMode: '内容区域宽度',
+    expandedMenuWidth: '菜单展开宽度',
+
+    breadcrumb: '面包屑',
+    breadcrumbIcon: '面包屑图标',
+    tabs: '标签页',
+    tabDetail: '标签详情页',
+    tabsQuickBtn: '标签页快捷按钮',
+    tabsRedoBtn: '标签页刷新按钮',
+    tabsFoldBtn: '标签页折叠按钮',
+    tabsTheme: '标签页样式',
+    tabsThemeSmooth: '圆滑',
+    tabsThemeCard: '卡片',
+    tabsThemeSimple: '极简',
+    sidebar: '左侧菜单',
+    header: '顶栏',
+    footer: '页脚',
+    fullContent: '全屏内容',
+    grayMode: '灰色模式',
+    colorWeak: '色弱模式',
+    aiIconSHow: 'Ai图标显示',
+
+    progress: '顶部进度条',
+    switchLoading: '切换loading',
+    switchAnimation: '切换动画',
+    animationType: '动画类型',
+
+    autoScreenLock: '自动锁屏',
+    notAutoScreenLock: '不自动锁屏',
+
+    fixedHeader: '固定header',
+    fixedSideBar: '固定Sidebar',
+
+    mixSidebarTrigger: '混合菜单触发方式',
+    triggerHover: '悬停',
+    triggerClick: '点击',
+
+    mixSidebarFixed: '固定展开菜单',
+  },
+  changePassword: {
+    changePassword: '修改密码',
+    oldPassword: '旧密码',
+    newPassword: '新密码',
+    confirmNewPassword: '确认新密码',
+    pleaseEnterNewPassword: '请输入新密码',
+  },
+};
diff --git a/src/locales/lang/zh-CN/routes/basic.ts b/src/locales/lang/zh-CN/routes/basic.ts
new file mode 100644
index 0000000..d154a4e
--- /dev/null
+++ b/src/locales/lang/zh-CN/routes/basic.ts
@@ -0,0 +1,5 @@
+export default {
+  login: '登录',
+  errorLogList: '错误日志列表',
+  defaultHomePage: '默认首页',
+};
diff --git a/src/locales/lang/zh-CN/routes/dashboard.ts b/src/locales/lang/zh-CN/routes/dashboard.ts
new file mode 100644
index 0000000..04b1b19
--- /dev/null
+++ b/src/locales/lang/zh-CN/routes/dashboard.ts
@@ -0,0 +1,6 @@
+export default {
+  dashboard: 'Dashboard',
+  about: '关于',
+  workbench: '工作台',
+  analysis: '分析页',
+};
diff --git a/src/locales/lang/zh-CN/routes/demo.ts b/src/locales/lang/zh-CN/routes/demo.ts
new file mode 100644
index 0000000..b7c2822
--- /dev/null
+++ b/src/locales/lang/zh-CN/routes/demo.ts
@@ -0,0 +1,207 @@
+export default {
+  charts: {
+    baiduMap: '百度地图',
+    aMap: '高德地图',
+    googleMap: '谷歌地图',
+    charts: '图表',
+    map: '地图',
+    line: '折线图',
+    pie: '饼图',
+  },
+  comp: {
+    comp: '组件',
+    basic: '基础组件',
+    jeecg: 'Jeecg组件',
+    transition: '动画组件',
+    countTo: '数字动画',
+    third: '第三方组件',
+
+    scroll: '滚动组件',
+    scrollBasic: '基础滚动',
+    scrollAction: '滚动函数',
+    virtualScroll: '虚拟滚动',
+
+    tree: 'Tree',
+    treeBasic: '基础树',
+    editTree: '可搜索/工具栏',
+    actionTree: '函数操作示例',
+
+    modal: '弹窗抽屉',
+    desc: '详情组件',
+
+    lazy: '懒加载组件',
+    lazyBasic: '基础示例',
+    lazyTransition: '动画效果',
+
+    verify: '验证组件',
+    verifyDrag: '拖拽校验',
+    verifyRotate: '图片还原',
+
+    qrcode: '二维码组件',
+    strength: '密码强度组件',
+    upload: '上传组件',
+
+    loading: 'Loading',
+
+    time: '相对时间',
+    cropperImage: '图片裁剪',
+    cardList: '卡片列表',
+    oneToMore: '一对多示例',
+    vexTable: '一对多示例',
+  },
+  basic: {
+    button: '按钮组件',
+  },
+  editor: {
+    editor: '编辑器',
+    jsonEditor: 'Json编辑器',
+    markdown: 'markdown编辑器',
+
+    tinymce: '富文本',
+    tinymceBasic: '基础使用',
+    tinymceForm: '嵌入form',
+  },
+  excel: {
+    excel: 'Excel',
+    customExport: '选择导出格式',
+    jsonExport: 'JSON数据导出',
+    arrayExport: 'Array数据导出',
+    importExcel: '导入',
+  },
+  feat: {
+    feat: '功能',
+    icon: '图标',
+    sessionTimeout: '登录过期',
+    tabs: '标签页操作',
+    tabDetail: '标签详情页',
+    print: '打印',
+    contextMenu: '右键菜单',
+    download: '文件下载',
+    clickOutSide: 'ClickOutSide组件',
+    imgPreview: '图片预览',
+    copy: '剪切板',
+    msg: '消息提示',
+    watermark: '水印',
+    ripple: '水波纹',
+    fullScreen: '全屏',
+    errorLog: '错误日志',
+    tab: 'Tab带参',
+    tab1: 'Tab带参1',
+    tab2: 'Tab带参2',
+    menu: 'Menu带参',
+    menu1: 'Menu带参1',
+    menu2: 'Menu带参2',
+    ws: 'websocket测试',
+    breadcrumb: '面包屑导航',
+    breadcrumbFlat: '平级模式',
+    breadcrumbFlatDetail: '平级详情',
+    breadcrumbChildren: '层级模式',
+    breadcrumbChildrenDetail: '层级详情',
+    fullCalendar: '日历(New)',
+    codemirror: '代码高亮(New)',
+  },
+  flow: {
+    name: '图形编辑器',
+    flowChart: '流程图',
+  },
+  form: {
+    form: 'Form',
+    basic: '基础表单',
+    useForm: 'useForm',
+    refForm: 'RefForm',
+    advancedForm: '可收缩表单',
+    ruleForm: '表单验证',
+    dynamicForm: '动态表单',
+    customerForm: '自定义组件',
+    appendForm: '表单增删示例',
+  },
+  modal: {
+    basic: '弹窗扩展',
+    drawer: '抽屉扩展',
+  },
+  iframe: {
+    frame: '外部页面',
+    antv: 'antVue文档(内嵌)',
+    doc: '项目文档(内嵌)',
+    docExternal: '项目文档(外链)',
+  },
+  level: { level: '多级菜单' },
+  page: {
+    page: '页面',
+
+    form: '表单页',
+    formBasic: '基础表单',
+    formStep: '分步表单',
+    formHigh: '高级表单',
+
+    desc: '详情页',
+    descBasic: '基础详情页',
+    descHigh: '高级详情页',
+
+    result: '结果页',
+    resultSuccess: '成功页',
+    resultFail: '失败页',
+
+    account: '个人页',
+    accountCenter: '个人中心',
+    accountSetting: '个人设置',
+
+    exception: '异常页',
+    netWorkError: '网络错误',
+    notData: '无数据',
+
+    list: '列表页',
+    listCard: '卡片列表',
+    listBasic: '标准列表',
+    listSearch: '搜索列表',
+  },
+  permission: {
+    permission: '权限管理',
+
+    front: '基于前端权限',
+    frontPage: '页面权限',
+    frontBtn: '按钮权限',
+    frontTestA: '权限测试页A',
+    frontTestB: '权限测试页B',
+
+    back: '基于后台权限',
+    backPage: '页面权限',
+    backBtn: '按钮权限',
+  },
+  setup: {
+    page: '引导页',
+  },
+  system: {
+    moduleName: '系统管理',
+    account: '账号管理',
+    account_detail: '账号详情',
+    password: '修改密码',
+    dept: '部门管理',
+    menu: '菜单管理',
+    test: '测试功能',
+    role: '角色管理',
+  },
+  table: {
+    table: 'Table',
+    basic: '基础表格',
+    treeTable: '树形表格',
+    fetchTable: '远程加载示例',
+    fixedColumn: '固定列',
+    customerCell: '自定义列',
+    formTable: '开启搜索区域',
+    useTable: 'UseTable',
+    refTable: 'RefTable',
+    multipleHeader: '多级表头',
+    mergeHeader: '合并单元格',
+    nestedTable: '嵌套子表格',
+    expandTable: '可展开表格',
+    fixedHeight: '定高/头部自定义',
+    footerTable: '表尾行合计',
+    editCellTable: '可编辑单元格',
+    editRowTable: '可编辑行',
+    authColumn: '权限列',
+  },
+  jeecg: {
+    JAreaLinkage: '区域选择',
+  },
+};
diff --git a/src/locales/lang/zh-CN/sys.ts b/src/locales/lang/zh-CN/sys.ts
new file mode 100644
index 0000000..962e40e
--- /dev/null
+++ b/src/locales/lang/zh-CN/sys.ts
@@ -0,0 +1,114 @@
+export default {
+  api: {
+    operationFailed: '操作失败',
+    errorTip: '错误提示',
+    errorMessage: '操作失败,系统异常!',
+    timeoutMessage: '登录超时,请重新登录!',
+    apiTimeoutMessage: '接口请求超时,请刷新页面重试!',
+    apiRequestFailed: '请求出错，请稍候重试',
+    networkException: '网络异常',
+    networkExceptionMsg: '网络异常，请检查您的网络连接是否正常!',
+
+    errMsg401: '用户没有权限（令牌、用户名、密码错误）!',
+    errMsg403: '用户得到授权，但是访问是被禁止的。!',
+    errMsg404: '网络请求错误,未找到该资源!',
+    errMsg405: '网络请求错误,请求方法未允许!',
+    errMsg408: '网络请求超时!',
+    errMsg500: '服务器错误,请联系管理员!',
+    errMsg501: '网络未实现!',
+    errMsg502: '网络错误!',
+    errMsg503: '服务不可用，服务器暂时过载或维护!',
+    errMsg504: '网络超时!',
+    errMsg505: 'http版本不支持该请求!',
+
+    registerMsg: '注册成功',
+  },
+  app: { logoutTip: '温馨提醒', logoutMessage: '是否确认退出系统?', menuLoading: '菜单加载中...' },
+  errorLog: {
+    tableTitle: '错误日志列表',
+    tableColumnType: '类型',
+    tableColumnDate: '时间',
+    tableColumnFile: '文件',
+    tableColumnMsg: '错误信息',
+    tableColumnStackMsg: 'stack信息',
+
+    tableActionDesc: '详情',
+
+    modalTitle: '错误详情',
+
+    fireVueError: '点击触发vue错误',
+    fireResourceError: '点击触发资源加载错误',
+    fireAjaxError: '点击触发ajax错误',
+
+    enableMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效.',
+  },
+  exception: {
+    backLogin: '返回登录',
+    backHome: '返回首页',
+    subTitle403: '抱歉，您无权访问此页面。',
+    subTitle404: '抱歉，您访问的页面不存在。',
+    subTitle500: '抱歉，服务器报告错误。',
+    noDataTitle: '当前页无数据',
+    networkErrorTitle: '网络错误',
+    networkErrorSubTitle: '抱歉，您的网络连接已断开，请检查您的网络！',
+  },
+  lock: {
+    unlock: '点击解锁',
+    alert: '锁屏密码错误',
+    backToLogin: '返回登录',
+    entry: '进入系统',
+    placeholder: '锁屏密码',
+  },
+  login: {
+    backSignIn: '返回',
+    signInFormTitle: '登录',
+    mobileSignInFormTitle: '手机登录',
+    qrSignInFormTitle: '二维码登录',
+    signUpFormTitle: '注册',
+    forgetFormTitle: '重置密码',
+
+    signInTitle: 'test 管理系统',
+    signInDesc: '高效、稳定、安全的企业级后台管理平台，助力业务快速落地。',
+    policy: '我同意隐私政策',
+    scanSign: `扫码后，即可完成登录`,
+    scanSuccess: `扫码成功，登录中`,
+
+    loginButton: '登录',
+    registerButton: '注册',
+    rememberMe: '记住我',
+    forgetPassword: '忘记密码?',
+    otherSignIn: '其他登录方式',
+
+    // notify
+    loginSuccessTitle: '登录成功',
+    loginSuccessDesc: '欢迎回来',
+
+    // placeholder
+    accountPlaceholder: '请输入账号',
+    passwordPlaceholder: '请输入密码',
+    inputCodePlaceholder: '请输入验证码',
+    smsPlaceholder: '请输入验证码',
+    mobilePlaceholder: '请输入手机号码',
+    mobileCorrectPlaceholder: '请输入正确的手机号码',
+    policyPlaceholder: '勾选后才能注册',
+    diffPwd: '两次输入密码不一致',
+
+    userName: '账号',
+    password: '密码',
+    loginOrgCode: '部门',
+    inputCode: '验证码',
+    confirmPassword: '确认密码',
+    email: '邮箱',
+    smsCode: '短信验证码',
+    mobile: '手机号码',
+
+    subTitleText: '{0}秒后返回登录页面',
+
+    //重置密码页面中文
+    authentication:'验证身份',
+    resetLoginPassword:'重置登录密码',
+    resetSuccess:'重置成功',
+    nextStep:'下一步',
+    goToLogin:'去登录'
+  },
+};
diff --git a/src/locales/lang/zh_CN.ts b/src/locales/lang/zh_CN.ts
new file mode 100644
index 0000000..8fc3305
--- /dev/null
+++ b/src/locales/lang/zh_CN.ts
@@ -0,0 +1,10 @@
+import { genMessage } from '../helper';
+import antdLocale from 'ant-design-vue/es/locale/zh_CN';
+
+const modules = import.meta.glob('./zh-CN/**/*.ts', { eager: true });
+export default {
+  message: {
+    ...genMessage(modules as Recordable<Recordable>, 'zh-CN'),
+    antdLocale,
+  },
+};
diff --git a/src/locales/setupI18n.ts b/src/locales/setupI18n.ts
new file mode 100644
index 0000000..405fb0c
--- /dev/null
+++ b/src/locales/setupI18n.ts
@@ -0,0 +1,44 @@
+import type { App } from 'vue';
+import type { I18n, I18nOptions } from 'vue-i18n';
+
+import { createI18n } from 'vue-i18n';
+import { setHtmlPageLang, setLoadLocalePool } from './helper';
+import { localeSetting } from '/@/settings/localeSetting';
+import { useLocaleStoreWithOut } from '/@/store/modules/locale';
+
+const { fallback, availableLocales } = localeSetting;
+
+export let i18n: ReturnType<typeof createI18n>;
+
+async function createI18nOptions(): Promise<I18nOptions> {
+  const localeStore = useLocaleStoreWithOut();
+  const locale = localeStore.getLocale;
+  const defaultLocal = await import(`./lang/${locale}.ts`);
+  const message = defaultLocal.default?.message ?? {};
+
+  setHtmlPageLang(locale);
+  setLoadLocalePool((loadLocalePool) => {
+    loadLocalePool.push(locale);
+  });
+
+  return {
+    legacy: false,
+    locale,
+    fallbackLocale: fallback,
+    messages: {
+      [locale]: message,
+    },
+    availableLocales: availableLocales,
+    sync: true, //If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
+    silentTranslationWarn: true, // true - warning off
+    missingWarn: false,
+    silentFallbackWarn: true,
+  };
+}
+
+// setup i18n instance with glob
+export async function setupI18n(app: App) {
+  const options = await createI18nOptions();
+  i18n = createI18n(options) as I18n;
+  app.use(i18n);
+}
diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts
new file mode 100644
index 0000000..64bd4a1
--- /dev/null
+++ b/src/locales/useLocale.ts
@@ -0,0 +1,69 @@
+/**
+ * Multi-language related operations
+ */
+import type { LocaleType } from '/#/config';
+
+import { i18n } from './setupI18n';
+import { useLocaleStoreWithOut } from '/@/store/modules/locale';
+import { unref, computed } from 'vue';
+import { loadLocalePool, setHtmlPageLang } from './helper';
+
+interface LangModule {
+  message: Recordable;
+  dateLocale: Recordable;
+  dateLocaleName: string;
+}
+
+function setI18nLanguage(locale: LocaleType) {
+  const localeStore = useLocaleStoreWithOut();
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale;
+  } else {
+    (i18n.global.locale as any).value = locale;
+  }
+  localeStore.setLocaleInfo({ locale });
+  setHtmlPageLang(locale);
+}
+
+export function useLocale() {
+  const localeStore = useLocaleStoreWithOut();
+  const getLocale = computed(() => localeStore.getLocale);
+  const getShowLocalePicker = computed(() => localeStore.getShowPicker);
+
+  const getAntdLocale = computed((): any => {
+    return i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale ?? {};
+  });
+
+  // Switching the language will change the locale of useI18n
+  // And submit to configuration modification
+  async function changeLocale(locale: LocaleType) {
+    const globalI18n = i18n.global;
+    const currentLocale = unref(globalI18n.locale);
+    if (currentLocale === locale) {
+      return locale;
+    }
+
+    if (loadLocalePool.includes(locale)) {
+      setI18nLanguage(locale);
+      return locale;
+    }
+    const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
+    if (!langModule) return;
+
+    const { message } = langModule;
+
+    globalI18n.setLocaleMessage(locale, message);
+    loadLocalePool.push(locale);
+
+    setI18nLanguage(locale);
+    return locale;
+  }
+
+  return {
+    getLocale,
+    getShowLocalePicker,
+    changeLocale,
+    getAntdLocale,
+  };
+}
diff --git a/src/logics/error-handle/index.ts b/src/logics/error-handle/index.ts
new file mode 100644
index 0000000..d4d0c82
--- /dev/null
+++ b/src/logics/error-handle/index.ts
@@ -0,0 +1,178 @@
+/**
+ * Used to configure the global error handling function, which can monitor vue errors, script errors, static resource errors and Promise errors
+ */
+
+import type { ErrorLogInfo } from '/#/store';
+
+import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
+
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { App } from 'vue';
+import projectSetting from '/@/settings/projectSetting';
+
+/**
+ * Handling error stack information
+ * @param error
+ */
+function processStackMsg(error: Error) {
+  if (!error.stack) {
+    return '';
+  }
+  let stack = error.stack
+    .replace(/\n/gi, '') // Remove line breaks to save the size of the transmitted content
+    .replace(/\bat\b/gi, '@') // At in chrome, @ in ff
+    .split('@') // Split information with @
+    .slice(0, 9) // The maximum stack length (Error.stackTraceLimit = 10), so only take the first 10
+    .map((v) => v.replace(/^\s*|\s*$/g, '')) // Remove extra spaces
+    .join('~') // Manually add separators for later display
+    .replace(/\?[^:]+/gi, ''); // Remove redundant parameters of js file links (?x=1 and the like)
+  const msg = error.toString();
+  if (stack.indexOf(msg) < 0) {
+    stack = msg + '@' + stack;
+  }
+  return stack;
+}
+
+/**
+ * get comp name
+ * @param vm
+ */
+function formatComponentName(vm: any) {
+  if (vm.$root === vm) {
+    return {
+      name: 'root',
+      path: 'root',
+    };
+  }
+
+  const options = vm.$options as any;
+  if (!options) {
+    return {
+      name: 'anonymous',
+      path: 'anonymous',
+    };
+  }
+  const name = options.name || options._componentTag;
+  return {
+    name: name,
+    path: options.__file,
+  };
+}
+
+/**
+ * Configure Vue error handling function
+ */
+
+function vueErrorHandler(err: Error, vm: any, info: string) {
+  const errorLogStore = useErrorLogStoreWithOut();
+  const { name, path } = formatComponentName(vm);
+  errorLogStore.addErrorLogInfo({
+    type: ErrorTypeEnum.VUE,
+    name,
+    file: path,
+    message: err.message,
+    stack: processStackMsg(err),
+    detail: info,
+    url: window.location.href,
+  });
+}
+
+/**
+ * Configure script error handling function
+ */
+export function scriptErrorHandler(event: Event | string, source?: string, lineno?: number, colno?: number, error?: Error) {
+  if (event === 'Script error.' && !source) {
+    return false;
+  }
+  const errorInfo: Partial<ErrorLogInfo> = {};
+  colno = colno || (window.event && (window.event as any).errorCharacter) || 0;
+  errorInfo.message = event as string;
+  if (error?.stack) {
+    errorInfo.stack = error.stack;
+  } else {
+    errorInfo.stack = '';
+  }
+  const name = source ? source.substr(source.lastIndexOf('/') + 1) : 'script';
+  const errorLogStore = useErrorLogStoreWithOut();
+  errorLogStore.addErrorLogInfo({
+    type: ErrorTypeEnum.SCRIPT,
+    name: name,
+    file: source as string,
+    detail: 'lineno' + lineno,
+    url: window.location.href,
+    ...(errorInfo as Pick<ErrorLogInfo, 'message' | 'stack'>),
+  });
+  return true;
+}
+
+/**
+ * Configure Promise error handling function
+ */
+function registerPromiseErrorHandler() {
+  window.addEventListener(
+    'unhandledrejection',
+    function (event) {
+      const errorLogStore = useErrorLogStoreWithOut();
+      errorLogStore.addErrorLogInfo({
+        type: ErrorTypeEnum.PROMISE,
+        name: 'Promise Error!',
+        file: 'none',
+        detail: 'promise error!',
+        url: window.location.href,
+        stack: 'promise error!',
+        message: event.reason,
+      });
+    },
+    true
+  );
+}
+
+/**
+ * Configure monitoring resource loading error handling function
+ */
+function registerResourceErrorHandler() {
+  // Monitoring resource loading error(img,script,css,and jsonp)
+  window.addEventListener(
+    'error',
+    function (e: Event) {
+      const target = e.target ? e.target : (e.srcElement as any);
+      const errorLogStore = useErrorLogStoreWithOut();
+      errorLogStore.addErrorLogInfo({
+        type: ErrorTypeEnum.RESOURCE,
+        name: 'Resource Error!',
+        file: (e.target || ({} as any)).currentSrc,
+        detail: JSON.stringify({
+          tagName: target.localName,
+          html: target.outerHTML,
+          type: e.type,
+        }),
+        url: window.location.href,
+        stack: 'resource is not found',
+        message: (e.target || ({} as any)).localName + ' is load error',
+      });
+    },
+    true
+  );
+}
+
+/**
+ * Configure global error handling
+ * @param app
+ */
+export function setupErrorHandle(app: App) {
+  const { useErrorHandle } = projectSetting;
+  if (!useErrorHandle) {
+    return;
+  }
+  // Vue exception monitoring;
+  app.config.errorHandler = vueErrorHandler;
+
+  // script error
+  window.onerror = scriptErrorHandler;
+
+  //  promise exception
+  registerPromiseErrorHandler();
+
+  // Static resource exception
+  registerResourceErrorHandler();
+}
diff --git a/src/logics/initAppConfig.ts b/src/logics/initAppConfig.ts
new file mode 100644
index 0000000..a186450
--- /dev/null
+++ b/src/logics/initAppConfig.ts
@@ -0,0 +1,84 @@
+/**
+ * Application configuration
+ */
+import type { ProjectConfig } from '/#/config';
+
+import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
+import projectSetting from '/@/settings/projectSetting';
+
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+import { updateDarkTheme } from '/@/logics/theme/dark';
+import { changeTheme } from '/@/logics/theme';
+
+import { useAppStore } from '/@/store/modules/app';
+import { useLocaleStore } from '/@/store/modules/locale';
+
+import { getCommonStoragePrefix, getStorageShortName } from '/@/utils/env';
+
+import { primaryColor } from '../../build/config/themeConfig';
+import { Persistent } from '/@/utils/cache/persistent';
+import { deepMerge } from '/@/utils';
+import { ThemeEnum } from '/@/enums/appEnum';
+
+// Initial project configuration
+export function initAppConfigStore() {
+  const localeStore = useLocaleStore();
+  const appStore = useAppStore();
+  let projCfg: ProjectConfig = Persistent.getLocal(PROJ_CFG_KEY) as ProjectConfig;
+  projCfg = deepMerge(projectSetting, projCfg || {});
+  const darkMode = appStore.getDarkMode;
+  const {
+    colorWeak,
+    grayMode,
+    themeColor,
+
+    headerSetting: { bgColor: headerBgColor } = {},
+    menuSetting: { bgColor } = {},
+  } = projCfg;
+  try {
+    if (themeColor && themeColor !== primaryColor) {
+      changeTheme(themeColor);
+    }
+
+    grayMode && updateGrayMode(grayMode);
+    colorWeak && updateColorWeak(colorWeak);
+  } catch (error) {
+    console.log(error);
+  }
+  appStore.setProjectConfig(projCfg);
+
+  // init dark mode
+  updateDarkTheme(darkMode);
+  if (darkMode === ThemeEnum.DARK) {
+    updateHeaderBgColor();
+    updateSidebarBgColor();
+  } else {
+    headerBgColor && updateHeaderBgColor(headerBgColor);
+    bgColor && updateSidebarBgColor(bgColor);
+  }
+  // init store
+  localeStore.initLocale();
+
+  setTimeout(() => {
+    clearObsoleteStorage();
+  }, 16);
+}
+
+/**
+ * As the version continues to iterate, there will be more and more cache keys stored in localStorage.
+ * This method is used to delete useless keys
+ */
+export function clearObsoleteStorage() {
+  const commonPrefix = getCommonStoragePrefix();
+  const shortPrefix = getStorageShortName();
+
+  [localStorage, sessionStorage].forEach((item: Storage) => {
+    Object.keys(item).forEach((key) => {
+      if (key && key.startsWith(commonPrefix) && !key.startsWith(shortPrefix)) {
+        item.removeItem(key);
+      }
+    });
+  });
+}
diff --git a/src/logics/mitt/routeChange.ts b/src/logics/mitt/routeChange.ts
new file mode 100644
index 0000000..1f842eb
--- /dev/null
+++ b/src/logics/mitt/routeChange.ts
@@ -0,0 +1,28 @@
+/**
+ * Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
+ */
+
+import mitt from '/@/utils/mitt';
+import type { RouteLocationNormalized } from 'vue-router';
+import { getRawRoute } from '/@/utils';
+
+const emitter = mitt();
+
+const key = Symbol();
+
+let lastChangeTab: RouteLocationNormalized;
+
+export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
+  const r = getRawRoute(lastChangeRoute);
+  emitter.emit(key, r);
+  lastChangeTab = r;
+}
+
+export function listenerRouteChange(callback: (route: RouteLocationNormalized) => void, immediate = true) {
+  emitter.on(key, callback);
+  immediate && lastChangeTab && callback(lastChangeTab);
+}
+
+export function removeTabChangeListener() {
+  emitter.clear();
+}
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
new file mode 100644
index 0000000..2991e09
--- /dev/null
+++ b/src/logics/theme/dark.ts
@@ -0,0 +1,24 @@
+import { darkCssIsReady, loadDarkThemeCss } from '@rys-fe/vite-plugin-theme/es/client';
+import { addClass, hasClass, removeClass } from '/@/utils/domUtils';
+
+export async function updateDarkTheme(mode: string | null = 'light') {
+  const htmlRoot = document.getElementById('htmlRoot');
+  if (!htmlRoot) {
+    return;
+  }
+  const hasDarkClass = hasClass(htmlRoot, 'dark');
+  if (mode === 'dark') {
+    if (import.meta.env.PROD && !darkCssIsReady) {
+      await loadDarkThemeCss();
+    }
+    htmlRoot.setAttribute('data-theme', 'dark');
+    if (!hasDarkClass) {
+      addClass(htmlRoot, 'dark');
+    }
+  } else {
+    htmlRoot.setAttribute('data-theme', 'light');
+    if (hasDarkClass) {
+      removeClass(htmlRoot, 'dark');
+    }
+  }
+}
diff --git a/src/logics/theme/index.ts b/src/logics/theme/index.ts
new file mode 100644
index 0000000..6634b22
--- /dev/null
+++ b/src/logics/theme/index.ts
@@ -0,0 +1,54 @@
+import { getThemeColors, generateColors } from '../../../build/config/themeConfig';
+import {
+  replaceStyleVariables,
+  loadDarkThemeCss,
+  replaceCssColors,
+  darkCssIsReady,
+  linkID,
+  styleTagId,
+  appendCssToDom,
+  getStyleDom,
+} from '@rys-fe/vite-plugin-theme/es/client';
+import { mixLighten, mixDarken, tinycolor } from '@rys-fe/vite-plugin-theme/es/colorUtils';
+import { useAppStore } from '/@/store/modules/app';
+import { defHttp } from '/@/utils/http/axios';
+
+let cssText = '';
+export async function changeTheme(color: string) {
+  // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+  const appStore = useAppStore();
+  appStore.setProjectConfig({ themeColor: color });
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+    color,
+  });
+  // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
+  if (import.meta.env.PROD && appStore.getDarkMode === 'dark') {
+    if (!darkCssIsReady && !cssText) {
+      await loadDarkThemeCss();
+    }
+    const el: HTMLLinkElement = document.getElementById(linkID) as HTMLLinkElement;
+    if (el?.href) {
+      // cssText = await fetchCss(el.href) as string;
+      !cssText && (cssText = await defHttp.get({ url: el.href }, { isTransformResponse: false }));
+      const colorVariables = [...getThemeColors(color), ...colors];
+      const processCss = await replaceCssColors(cssText, colorVariables);
+      appendCssToDom(getStyleDom(styleTagId) as HTMLStyleElement, processCss);
+    }
+  } else {
+    await replaceStyleVariables({
+      colorVariables: [...getThemeColors(color), ...colors],
+    });
+    fixDark();
+  }
+}
+// 【LOWCOD-2262】修复黑暗模式下切换皮肤无效的问题
+async function fixDark() {
+  // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
+  const el = document.getElementById(styleTagId);
+  if (el) {
+    el.innerHTML = el.innerHTML.replace(/\\["']dark\\["']/g, `'dark'`);
+  }
+}
diff --git a/src/logics/theme/updateBackground.ts b/src/logics/theme/updateBackground.ts
new file mode 100644
index 0000000..6459f3d
--- /dev/null
+++ b/src/logics/theme/updateBackground.ts
@@ -0,0 +1,90 @@
+import { colorIsDark, lighten, darken } from '/@/utils/color';
+import { useAppStore } from '/@/store/modules/app';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { setCssVar } from './util';
+import { SIDE_BAR_BG_COLOR_LIST, SIDER_LOGO_BG_COLOR_LIST } from '/@/settings/designSetting';
+
+const HEADER_BG_COLOR_VAR = '--header-bg-color';
+const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
+const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
+
+const SIDER_LOGO_BG_COLOR = '--sider-logo-bg-color';
+const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
+const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
+const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color';
+
+/**
+ * Change the background color of the top header
+ * @param color
+ */
+export function updateHeaderBgColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#151515';
+    } else {
+      color = appStore.getHeaderSetting.bgColor;
+    }
+  }
+  // bg color
+  setCssVar(HEADER_BG_COLOR_VAR, color);
+
+  // hover color
+  const hoverColor = lighten(color!, 6);
+  setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
+  setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
+
+  // Determine the depth of the color value and automatically switch the theme
+  const isDark = colorIsDark(color!);
+
+  appStore.setProjectConfig({
+    headerSetting: {
+      theme: isDark || darkMode ? ThemeEnum.DARK : ThemeEnum.LIGHT,
+    },
+  });
+}
+
+/**
+ * Change the background color of the left menu
+ * @param color  bg color
+ */
+export function updateSidebarBgColor(color?: string) {
+  const appStore = useAppStore();
+
+  // if (!isHexColor(color)) return;
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#212121';
+    } else {
+      color = appStore.getMenuSetting.bgColor;
+    }
+  }
+  // 代码逻辑说明: 【QQYUN-5922】logo背景色渐变
+  let findIndex = SIDE_BAR_BG_COLOR_LIST.findIndex((item) => item === color);
+  setCssVar(SIDER_LOGO_BG_COLOR, findIndex == -1 ? 'linear-gradient(180deg, #000000, #282828)' : SIDER_LOGO_BG_COLOR_LIST[findIndex]);
+  setCssVar(SIDER_DARK_BG_COLOR, color);
+  setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color!, 6));
+  setCssVar(SIDER_LIGHTEN_BG_COLOR, lighten(color!, 5));
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  // 代码逻辑说明: 【QQYUN-8922】左侧导航栏文字颜色调整区分彩色和暗黑
+  let theme;
+  let isThemeBright = false;
+  if (['#fff', '#ffffff'].includes(color!.toLowerCase()) && !darkMode) {
+    theme = ThemeEnum.LIGHT;
+  } else if (['#009688', '#e74c3c','#037bd5'].includes(color!.toLowerCase()) && !darkMode) {
+    theme = ThemeEnum.DARK;
+    isThemeBright = true;
+  } else {
+    theme = ThemeEnum.DARK;
+  }
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme,
+      isThemeBright,
+    },
+  });
+}
diff --git a/src/logics/theme/updateColorWeak.ts b/src/logics/theme/updateColorWeak.ts
new file mode 100644
index 0000000..8a0e64a
--- /dev/null
+++ b/src/logics/theme/updateColorWeak.ts
@@ -0,0 +1,9 @@
+import { toggleClass } from './util';
+
+/**
+ * Change the status of the project's color weakness mode
+ * @param colorWeak
+ */
+export function updateColorWeak(colorWeak: boolean) {
+  toggleClass(colorWeak, 'color-weak', document.documentElement);
+}
diff --git a/src/logics/theme/updateGrayMode.ts b/src/logics/theme/updateGrayMode.ts
new file mode 100644
index 0000000..0fd16fe
--- /dev/null
+++ b/src/logics/theme/updateGrayMode.ts
@@ -0,0 +1,9 @@
+import { toggleClass } from './util';
+
+/**
+ * Change project gray mode status
+ * @param gray
+ */
+export function updateGrayMode(gray: boolean) {
+  toggleClass(gray, 'gray-mode', document.documentElement);
+}
diff --git a/src/logics/theme/util.ts b/src/logics/theme/util.ts
new file mode 100644
index 0000000..30aef37
--- /dev/null
+++ b/src/logics/theme/util.ts
@@ -0,0 +1,11 @@
+const docEle = document.documentElement;
+export function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+  const targetEl = target || document.body;
+  let { className } = targetEl;
+  className = className.replace(clsName, '');
+  targetEl.className = flag ? `${className} ${clsName} ` : className;
+}
+
+export function setCssVar(prop: string, val: any, dom = docEle) {
+  dom.style.setProperty(prop, val);
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..537c88d
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,141 @@
+import type { MainAppProps } from "#/main";
+import 'uno.css';
+import '/@/design/index.less';
+import 'ant-design-vue/dist/reset.css';
+// 注册图标
+import 'virtual:svg-icons-register';
+
+import App from './App.vue';
+import { createApp } from 'vue';
+import { initAppConfigStore } from '/@/logics/initAppConfig';
+import { setupErrorHandle } from '/@/logics/error-handle';
+import { router, createRouter, setupRouter } from '/@/router';
+import { setupRouterGuard } from '/@/router/guard';
+import { setupStore } from '/@/store';
+import { setupGlobDirectives } from '/@/directives';
+import { setupI18n } from '/@/locales/setupI18n';
+import { setupElectron } from "@/electron";
+import { registerGlobComp } from '/@/components/registerGlobComp';
+import { registerThirdComp } from '/@/settings/registerThirdComp';
+import { registerSuper } from '/@/views/super/registerSuper';
+import { useSso } from '/@/hooks/web/useSso';
+import { checkIsQiankunMicro } from "/@/qiankun/micro";
+import { autoUseQiankunMicro } from "/@/qiankun/micro/qiankunMicro";
+import { useAppStoreWithOut } from "@/store/modules/app";
+
+// 注册online模块lib
+import { registerPackages } from '/@/utils/monorepo/registerPackages';
+
+// 程序入口
+async function main() {
+  if (checkIsQiankunMicro()) {
+    // 【JEECG作为乾坤子应用】以乾坤子应用模式启动
+    // await autoUseQiankunMicro(bootstrap)
+    await autoUseQiankunMicro(bootstrap)
+  } else {
+    // 获取参数
+    const props = getMainAppProps();
+    // 普通启动
+    await bootstrap(props)
+  }
+}
+
+main();
+
+async function bootstrap(props?: MainAppProps) {
+  // 创建应用实例
+  const app = createApp(App);
+  // 【QQYUN-6329】
+  window['JAppRootInstance'] = app;
+
+  // 创建路由
+  createRouter();
+
+  // 配置存储
+  setupStore(app);
+
+  // 配置参数
+  setupProps(props);
+
+  // 多语言配置,异步情况:语言文件可以从服务器端获得
+  await setupI18n(app);
+
+  // 初始化内部系统配置
+  initAppConfigStore();
+
+  // 注册外部模块路由(注册online模块lib)
+  registerPackages(app);
+
+  // 注册全局组件
+  registerGlobComp(app);
+
+  //CAS单点登录
+  await useSso().ssoLogin();
+
+  // 注册super应用路由
+  await registerSuper(app);
+  
+  // 配置路由
+  setupRouter(app);
+
+  // 路由保护
+  setupRouterGuard(router);
+
+  // 注册全局指令
+  setupGlobDirectives(app);
+
+  // 配置全局错误处理
+  setupErrorHandle(app);
+
+  // 注册第三方组件
+  await registerThirdComp(app);
+
+  // 配置electron
+  setupElectron(app)
+
+  // 当路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
+  await router.isReady();
+
+  // 挂载应用
+  app.mount(getMountContainer(props), true);
+
+  console.log(" vue3 app 加载完成！")
+
+  return app
+}
+
+// 获取应用挂载容器
+function getMountContainer(props?: MainAppProps) {
+  const id = '#app';
+  if (!props?.container?.querySelector) {
+    return id;
+  }
+  return props.container.querySelector(id) ?? id;
+}
+
+// 获取主应用参数
+function getMainAppProps(): MainAppProps {
+  // 从 queryString 中获取
+  const searchParams = new URLSearchParams(window.location.search);
+  // 隐藏侧边栏（菜单）
+  let hideSider = searchParams.get('hideSider') === 'true';
+  // 隐藏顶部
+  let hideHeader = searchParams.get('hideHeader') === 'true';
+  // 隐藏 多Tab 切换
+  let hideMultiTabs = searchParams.get('hideMultiTabs') === 'true';
+
+  return {
+    hideSider,
+    hideHeader,
+    hideMultiTabs
+  }
+}
+
+// 配置主应用参数
+function setupProps(props?: MainAppProps) {
+  if (!props) {
+    return
+  }
+  const appStore = useAppStoreWithOut();
+  appStore.setMainAppProps(props);
+}
diff --git a/src/qiankun/apps.ts b/src/qiankun/apps.ts
new file mode 100644
index 0000000..aa70314
--- /dev/null
+++ b/src/qiankun/apps.ts
@@ -0,0 +1,24 @@
+// export const containerId = 'qiankun-content'
+//
+// /**
+//  *微应用apps
+//  * @name: 微应用名称 - 具有唯一性
+//  * @entry: 微应用入口.必选 - 通过该地址加载微应用，
+//  * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
+//  * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
+//  */
+// //子应用列表
+// const _apps: Recordable[] = [];
+// for (const key in import.meta.env) {
+//   if (key.includes('VITE_APP_SUB_')) {
+//     const name = key.split('VITE_APP_SUB_')[1];
+//     const obj = {
+//       name,
+//       entry: import.meta.env[key],
+//       container: '#' + containerId,
+//       activeRule: name,
+//     };
+//     _apps.push(obj);
+//   }
+// }
+// export const apps = _apps;
diff --git a/src/qiankun/index.ts b/src/qiankun/index.ts
new file mode 100644
index 0000000..37b4a04
--- /dev/null
+++ b/src/qiankun/index.ts
@@ -0,0 +1,110 @@
+// /**
+//  * qiankun配置
+//  */
+// import {
+//   start,
+//   registerMicroApps,
+//   runAfterFirstMounted,
+//   addGlobalUncaughtErrorHandler
+// } from 'qiankun';
+// import { apps, containerId } from './apps';
+// import { getProps, initGlState } from './state';
+// import { registerQiankunRouter } from './route';
+//
+// registerQiankunRouter();
+//
+// /**
+//  * 重构apps
+//  */
+// function filterApps() {
+//   apps.forEach((item) => {
+//     //主应用需要传递给微应用的数据。
+//     // @ts-ignore
+//     item.props = getProps();
+//     //微应用触发的路由规则
+//     // @ts-ignore
+//     item.activeRule = genActiveRule('/' + item.activeRule);
+//   });
+//   return apps;
+// }
+//
+// /**
+//  * 路由监听
+//  * @param {*} routerPrefix 前缀
+//  */
+// function genActiveRule(routerPrefix) {
+//   return (location) => location.pathname.startsWith(routerPrefix);
+// }
+//
+// let retryCount = 0;
+//
+// /**
+//  * 微应用注册
+//  */
+// function registerApps() {
+//   const container = document.querySelector('#' + containerId);
+//   if (!container) {
+//     // 如果容器不存在，递归尝试注册应用，最多尝试10次，每次间隔500毫秒
+//     if (retryCount < 10) {
+//       retryCount++;
+//       setTimeout(() => registerApps(), 500);
+//     }
+//   } else {
+//     registerAppsNow();
+//   }
+// }
+//
+// registerApps['containerId'] = containerId;
+//
+// function registerAppsNow() {
+//   if (window.qiankunStarted) {
+//     return;
+//   }
+//   window.qiankunStarted = true;
+//   const _apps = filterApps();
+//   // @ts-ignore
+//   registerMicroApps(_apps, {
+//     beforeLoad: [
+//       // @ts-ignore
+//       (loadApp) => {
+//         console.log('[qiankun] before load', loadApp);
+//       },
+//     ],
+//     beforeMount: [
+//       // @ts-ignore
+//       (mountApp) => {
+//         console.log('[qiankun] before mount', mountApp);
+//       },
+//     ],
+//     afterMount: [
+//       // @ts-ignore
+//       (mountApp) => {
+//         console.log('[qiankun] after mount', mountApp);
+//       },
+//     ],
+//     beforeUnmount: [
+//       // @ts-ignore
+//       (unloadApp) => {
+//         console.log('[qiankun] before unmount', unloadApp);
+//       },
+//     ],
+//     afterUnmount: [
+//       // @ts-ignore
+//       (unloadApp) => {
+//         console.log('[qiankun] after unmount', unloadApp);
+//       },
+//     ],
+//   });
+//   // 设置默认子应用,与 genActiveRule中的参数保持一致
+//   // setDefaultMountApp();
+//   // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
+//   runAfterFirstMounted(() => console.log('开启监控'));
+//   // 添加全局的未捕获异常处理器。
+//   addGlobalUncaughtErrorHandler((event) => console.log(event));
+//   // 定义全局状态
+//   initGlState();
+//   //启动qiankun
+//   start({});
+// }
+//
+// export default registerApps;
diff --git a/src/qiankun/micro/index.ts b/src/qiankun/micro/index.ts
new file mode 100644
index 0000000..859d287
--- /dev/null
+++ b/src/qiankun/micro/index.ts
@@ -0,0 +1,12 @@
+import {qiankunWindow} from 'vite-plugin-qiankun/dist/helper'
+
+/**
+ * 【JEECG作为乾坤子应用】【判断当前是否是以乾坤子应用的模式运行】
+ */
+export function checkIsQiankunMicro(): boolean {
+  return !!qiankunWindow.__POWERED_BY_QIANKUN__;
+}
+
+export function getGlobal() {
+  return (checkIsQiankunMicro() ? qiankunWindow : window) as Window
+}
diff --git a/src/qiankun/micro/qiankunMicro.ts b/src/qiankun/micro/qiankunMicro.ts
new file mode 100644
index 0000000..4e9d5c1
--- /dev/null
+++ b/src/qiankun/micro/qiankunMicro.ts
@@ -0,0 +1,57 @@
+/*
+* 【JEECG作为乾坤子应用】
+*/
+import type {App} from 'vue';
+import type {MainAppProps} from "#/main";
+
+import {destroyStore} from "@/store";
+import {destroyRouter} from "@/router";
+import { clearComponent } from '@/components/jeecg/JVxeTable/src/componentMapStore';
+
+import {renderWithQiankun} from 'vite-plugin-qiankun/dist/helper';
+
+/**
+ * 以乾坤子应用模式运行
+ * @param render
+ */
+export async function useQiankunMicroApp(render: (props?: MainAppProps) => Promise<App>) {
+  let instance: Nullable<App> = null;
+
+  // 注册乾坤子应用生命周期函数
+  renderWithQiankun({
+    async mount(props) {
+      console.debug('[qiankun-micro] mount - props :', props)
+      instance = await render({
+        container: props.container!,
+        hideSider: props.hideSider,
+        hideHeader: props.hideHeader,
+        hideMultiTabs: props.hideMultiTabs,
+      });
+    },
+    bootstrap() {
+      console.debug('[qiankun-micro] bootstrap');
+    },
+    update(props) {
+      console.debug('[qiankun-micro] update: ', props);
+    },
+    unmount(props) {
+      console.debug('[qiankun-micro] unmount: ', props);
+
+      destroyStore();
+      destroyRouter();
+
+      if (instance) {
+        clearComponent();
+        instance.unmount();
+        instance._container.innerHTML = '';
+        instance = null;
+      }
+    },
+  });
+
+  return instance!
+}
+
+export async function autoUseQiankunMicro(fn: Fn) {
+  return useQiankunMicroApp(fn)
+}
diff --git a/src/qiankun/route.ts b/src/qiankun/route.ts
new file mode 100644
index 0000000..30ee8ff
--- /dev/null
+++ b/src/qiankun/route.ts
@@ -0,0 +1,45 @@
+// import { router } from "@/router";
+// import { apps } from './apps';
+//
+// export const {registerQiankunRouter} = (function () {
+//
+//   let registered = false;
+//
+//   /**
+//    * 注册qiankun路由
+//    */
+//   function registerQiankunRouter() {
+//     if (!router) {
+//       // 如果路由对象不存在，递归调用，直到路由对象可用
+//       setTimeout(() => registerQiankunRouter(), 1);
+//     } else {
+//       registerQiankunRouterNow();
+//     }
+//   }
+//
+//   function registerQiankunRouterNow() {
+//     if (registered) {
+//       return;
+//     }
+//     registered = true;
+//     const checkQiankunRoute = (path: string) => apps.some(app => path.startsWith('/' + app.name));
+//     // 添加路由守卫
+//     // 路由守卫，判断是否是qiankun子应用路由
+//     router.beforeEach(async (to, from, next) => {
+//       const isQiankunRoute = checkQiankunRoute(to.path);
+//       if (isQiankunRoute) {
+//         // 如果是qiankun子应用路由，设置meta属性
+//         to.meta.isQiankunRoute = true;
+//       } else {
+//         // 如果不是qiankun子应用路由，清除meta属性
+//         delete to.meta.isQiankunRoute;
+//       }
+//       next();
+//     });
+//   }
+//
+//
+//   return {
+//     registerQiankunRouter,
+//   }
+// })();
diff --git a/src/qiankun/state.ts b/src/qiankun/state.ts
new file mode 100644
index 0000000..92aaf03
--- /dev/null
+++ b/src/qiankun/state.ts
@@ -0,0 +1,38 @@
+// /**
+//  *公共数据
+//  */
+// import { initGlobalState } from 'qiankun';
+// import { store } from '/@/store';
+// import { router } from '/@/router';
+// import { getToken } from '/@/utils/auth';
+// //定义传入子应用的数据
+// export function getProps() {
+//   return {
+//     data: {
+//       publicPath: '/',
+//       token: getToken(),
+//       store,
+//       router,
+//     },
+//   };
+// }
+//
+// /**
+//  * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
+//  * @param state 主应用穿的公共数据
+//  */
+// export function initGlState(info = { userName: 'admin' }) {
+//   // 初始化state
+//   const actions = initGlobalState(info);
+//   // 设置新的值
+//   actions.setGlobalState(info);
+//   // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
+//   actions.onGlobalStateChange((newState, prev) => {
+//     // state: 变更后的状态; prev 变更前的状态
+//     console.info('newState', newState);
+//     console.info('prev', prev);
+//     for (const key in newState) {
+//       console.info('onGlobalStateChange', key);
+//     }
+//   });
+// }
diff --git a/src/router/constant.ts b/src/router/constant.ts
new file mode 100644
index 0000000..a641f59
--- /dev/null
+++ b/src/router/constant.ts
@@ -0,0 +1,26 @@
+export const REDIRECT_NAME = 'Redirect';
+
+export const PARENT_LAYOUT_NAME = 'ParentLayout';
+
+export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
+// 代码逻辑说明: 【issues/7500】vue-router4.5.0版本路由name:PageNotFound同名导致登录进不去
+export const PAGE_NOT_FOUND_NAME_404 = 'PageNotFound404';
+
+export const EXCEPTION_COMPONENT = () => import('/@/views/sys/exception/Exception.vue');
+
+/**
+ * @description: default layout
+ */
+export const LAYOUT = () => import('/@/layouts/default/index.vue');
+
+/**
+ * @description: parent-layout
+ */
+export const getParentLayout = (_name?: string) => {
+  return () =>
+    new Promise((resolve) => {
+      resolve({
+        name: _name || PARENT_LAYOUT_NAME,
+      });
+    });
+};
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
new file mode 100644
index 0000000..c567749
--- /dev/null
+++ b/src/router/guard/index.ts
@@ -0,0 +1,147 @@
+import type { Router, RouteLocationNormalized } from 'vue-router';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
+import { Modal, notification } from 'ant-design-vue';
+import { warn } from '/@/utils/log';
+import { unref } from 'vue';
+import { setRouteChange } from '/@/logics/mitt/routeChange';
+import { createPermissionGuard } from './permissionGuard';
+import { createStateGuard } from './stateGuard';
+import nProgress from 'nprogress';
+import projectSetting from '/@/settings/projectSetting';
+import { createParamMenuGuard } from './paramMenuGuard';
+
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
+  createPageGuard(router);
+  createPageLoadingGuard(router);
+  createHttpGuard(router);
+  createScrollGuard(router);
+  createMessageGuard(router);
+  createProgressGuard(router);
+  createPermissionGuard(router);
+  createParamMenuGuard(router); // must after createPermissionGuard (menu has been built.)
+  createStateGuard(router);
+}
+
+/**
+ * Hooks for handling page state
+ */
+function createPageGuard(router: Router) {
+  const loadedPageMap = new Map<string, boolean>();
+
+  router.beforeEach(async (to) => {
+    // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+    to.meta.loaded = !!loadedPageMap.get(to.path);
+    // Notify routing changes
+    setRouteChange(to);
+
+    return true;
+  });
+
+  router.afterEach((to) => {
+    loadedPageMap.set(to.path, true);
+  });
+}
+
+// Used to handle page loading status
+function createPageLoadingGuard(router: Router) {
+  const userStore = useUserStoreWithOut();
+  const appStore = useAppStoreWithOut();
+  const { getOpenPageLoading } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (!userStore.getToken) {
+      return true;
+    }
+    if (to.meta.loaded) {
+      return true;
+    }
+
+    if (unref(getOpenPageLoading)) {
+      appStore.setPageLoadingAction(true);
+      return true;
+    }
+
+    return true;
+  });
+  router.afterEach(async () => {
+    if (unref(getOpenPageLoading)) {
+      // TODO Looking for a better way
+      // The timer simulates the loading time to prevent flashing too fast,
+      setTimeout(() => {
+        appStore.setPageLoading(false);
+      }, 220);
+    }
+    return true;
+  });
+}
+
+/**
+ * The interface used to close the current page to complete the request when the route is switched
+ * @param router
+ */
+function createHttpGuard(router: Router) {
+  const { removeAllHttpPending } = projectSetting;
+  let axiosCanceler: Nullable<AxiosCanceler>;
+  if (removeAllHttpPending) {
+    axiosCanceler = new AxiosCanceler();
+  }
+  router.beforeEach(async () => {
+    // Switching the route will delete the previous request
+    axiosCanceler?.removeAllPending();
+    return true;
+  });
+}
+
+// Routing switch back to the top
+function createScrollGuard(router: Router) {
+  const isHash = (href: string) => {
+    return /^#/.test(href);
+  };
+
+  const body = document.body;
+
+  router.afterEach(async (to) => {
+    // scroll top
+    isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
+    return true;
+  });
+}
+
+/**
+ * Used to close the message instance when the route is switched
+ * @param router
+ */
+export function createMessageGuard(router: Router) {
+  const { closeMessageOnSwitch } = projectSetting;
+
+  router.beforeEach(async () => {
+    try {
+      if (closeMessageOnSwitch) {
+        Modal.destroyAll();
+        notification.destroy();
+      }
+    } catch (error) {
+      warn('message guard error:' + error);
+    }
+    return true;
+  });
+}
+
+export function createProgressGuard(router: Router) {
+  const { getOpenNProgress } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (to.meta.loaded) {
+      return true;
+    }
+    unref(getOpenNProgress) && nProgress.start();
+    return true;
+  });
+
+  router.afterEach(async () => {
+    unref(getOpenNProgress) && nProgress.done();
+    return true;
+  });
+}
diff --git a/src/router/guard/paramMenuGuard.ts b/src/router/guard/paramMenuGuard.ts
new file mode 100644
index 0000000..1c75157
--- /dev/null
+++ b/src/router/guard/paramMenuGuard.ts
@@ -0,0 +1,47 @@
+import type { Router } from 'vue-router';
+import { configureDynamicParamsMenu } from '../helper/menuHelper';
+import { Menu } from '../types';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { useAppStoreWithOut } from '/@/store/modules/app';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+export function createParamMenuGuard(router: Router) {
+  const permissionStore = usePermissionStoreWithOut();
+  router.beforeEach(async (to, _, next) => {
+    // filter no name route
+    if (!to.name) {
+      next();
+      return;
+    }
+
+    // menu has been built.
+    if (!permissionStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    let menus: Menu[] = [];
+    if (isBackMode()) {
+      menus = permissionStore.getBackMenuList;
+    } else if (isRouteMappingMode()) {
+      menus = permissionStore.getFrontMenuList;
+    }
+    menus.forEach((item) => configureDynamicParamsMenu(item, to.params));
+
+    next();
+  });
+}
+
+const getPermissionMode = () => {
+  const appStore = useAppStoreWithOut();
+  return appStore.getProjectConfig.permissionMode;
+};
+
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK;
+};
+
+const isRouteMappingMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
+};
diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts
new file mode 100644
index 0000000..e0c509b
--- /dev/null
+++ b/src/router/guard/permissionGuard.ts
@@ -0,0 +1,202 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import { usePermissionStoreWithOut } from '/@/store/modules/permission';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+
+import { RootRoute } from '/@/router/routes';
+
+import {isOAuth2AppEnv, isOAuth2DingAppEnv} from '/@/views/sys/login/useLogin';
+import { OAUTH2_THIRD_LOGIN_TENANT_ID } from "/@/enums/cacheEnum";
+import { setAuthCache } from "/@/utils/auth";
+import { PAGE_NOT_FOUND_NAME_404 } from '/@/router/constant';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+//auth2登录路由
+const OAUTH2_LOGIN_PAGE_PATH = PageEnum.OAUTH2_LOGIN_PAGE_PATH;
+
+//分享免登录路由
+const SYS_FILES_PATH = PageEnum.SYS_FILES_PATH;
+
+// 邮件中的跳转地址,对应此路由,携带token免登录直接去办理页面
+const TOKEN_LOGIN = PageEnum.TOKEN_LOGIN;
+
+const ROOT_PATH = RootRoute.path;
+
+// 代码逻辑说明: [VUEN-2472]分享免登录------------
+const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,SYS_FILES_PATH, TOKEN_LOGIN ];
+
+export function createPermissionGuard(router: Router) {
+  const userStore = useUserStoreWithOut();
+  const permissionStore = usePermissionStoreWithOut();
+
+  // 自定义首页跳转次数
+  let homePathJumpCount = 0;
+
+  router.beforeEach(async (to, from, next) => {
+    if (
+      // 【#6861】跳转到自定义首页的逻辑，只跳转一次即可
+      homePathJumpCount < 1 &&
+      from.path === ROOT_PATH &&
+      to.path === PageEnum.BASE_HOME &&
+      userStore.getUserInfo.homePath &&
+      userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
+    ) {
+      homePathJumpCount++;
+      next(userStore.getUserInfo.homePath);
+      return;
+    }
+
+    const token = userStore.getToken;
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      if (to.path === LOGIN_PATH && token) {
+        const isSessionTimeout = userStore.getSessionTimeout;
+        
+        //TODO vben默认写法，暂时不知目的，有问题暂时先注释掉
+        //await userStore.afterLoginAction();
+        
+        try {
+          if (!isSessionTimeout) {
+            next((to.query?.redirect as string) || '/');
+            return;
+          }
+        } catch {}
+        // 代码逻辑说明: [issues/I5BG1I]vue3不支持auth2登录------------
+      } else if (to.path === LOGIN_PATH && isOAuth2AppEnv() && !token) {
+        //退出登录进入此逻辑
+        //如果进入的页面是login页面并且当前是OAuth2app环境，并且token为空，就进入OAuth2登录页面
+        // 代码逻辑说明: [QQYUN-3440]新建企业微信和钉钉配置表，通过租户模式隔离------------
+        if(to.query.tenantId){
+          setAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID,to.query.tenantId)
+        }
+        next({ path: OAUTH2_LOGIN_PAGE_PATH });
+        return;
+      }
+      next();
+      return;
+    }
+
+    // token does not exist
+    if (!token) {
+      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+
+      // 代码逻辑说明: [issues/I5BG1I]vue3 Auth2未实现------------
+      let path = LOGIN_PATH;
+      if (whitePathList.includes(to.path as PageEnum)) {
+        // 在免登录白名单，如果进入的页面是login页面并且当前是OAuth2app环境，就进入OAuth2登录页面
+        if (to.path === LOGIN_PATH && isOAuth2AppEnv()) {
+          next({ path: OAUTH2_LOGIN_PAGE_PATH });
+        } else {
+          //在免登录白名单，直接进入
+          next();
+        }
+      } else {
+        //----------【首次登陆并且是企业微信或者钉钉的情况下才会调用】-----------------------------------------------
+        //只有首次登陆并且是企业微信或者钉钉的情况下才会调用
+        let href = window.location.href;
+        //判断当前是auth2页面，并且是钉钉/企业微信，并且包含tenantId参数
+        if(isOAuth2AppEnv() && href.indexOf("/tenantId/")!= -1){
+          let params = to.params;
+          if(params && params.path && params.path.length>0){
+            //直接获取参数最后一位
+            setAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID,params.path[params.path.length-1])
+          }
+        }
+        //---------【首次登陆并且是企业微信或者钉钉的情况下才会调用】------------------------------------------------
+        // 如果当前是在OAuth2APP环境，就跳转到OAuth2登录页面，否则跳转到登录页面
+        path = isOAuth2AppEnv() ? OAUTH2_LOGIN_PAGE_PATH : LOGIN_PATH;
+      }
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+        // 代码逻辑说明: [issues/I5BG1I]vue3 Auth2未实现------------
+        path: path,
+        replace: true,
+      };
+
+      // 代码逻辑说明: 【QQYUN-4713】登录代码调整逻辑有问题，改造待观察--
+      if (to.fullPath) {
+        console.log("to.fullPath 1",to.fullPath)
+        console.log("to.path 2",to.path)
+        
+        let getFullPath = to.fullPath;
+        if(getFullPath=='/' || getFullPath=='/500' || getFullPath=='/400' || getFullPath=='/login?redirect=/' || getFullPath=='/login?redirect=/login?redirect=/'){
+          return;
+        }
+        
+        redirectData.query = {
+          ...redirectData.query,
+          // 代码逻辑说明: 修复登录成功后，没有正确重定向的问题
+          redirect: to.fullPath,
+
+        };
+      }
+      next(redirectData);
+      return;
+    }
+
+    //==============================【首次登录并且是企业微信或者钉钉的情况下才会调用】==================
+    //判断是免登录页面,如果页面包含/tenantId/,那么就直接前往主页
+    if(isOAuth2AppEnv() && to.path.indexOf("/tenantId/") != -1){
+      // 代码逻辑说明: 【TV360X-2958】钉钉登录后打开了敲敲云，换其他账号登录后，再打开敲敲云显示的是原来账号的应用---
+      if (isOAuth2DingAppEnv()) {
+        next(OAUTH2_LOGIN_PAGE_PATH);
+      } else {
+        next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+      }
+      return;
+    }
+    //==============================【首次登录并且是企业微信或者钉钉的情况下才会调用】==================
+    // Jump to the 404 page after processing the login
+    if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_NAME_404 && to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)) {
+      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+      return;
+    }
+
+    // // get userinfo while last fetch time is empty
+    // if (userStore.getLastUpdateTime === 0) {
+    //   try {
+    //     console.log("--LastUpdateTime---getUserInfoAction-----")
+    //     await userStore.getUserInfoAction();
+    //   } catch (err) {
+    //     console.info(err);
+    //     next();
+    //   }
+    // }
+    // 代码逻辑说明: 【QQYUN-8572】表格行选择卡顿问题（customRender中字典引起的）
+    if (userStore.getLastUpdateTime === 0) {
+      userStore.setAllDictItemsByLocal();
+    }
+    if (permissionStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    // 构建后台菜单路由
+    const routes = await permissionStore.buildRoutesAction();
+    routes.forEach((route) => {
+      router.addRoute(route as unknown as RouteRecordRaw);
+    });
+
+    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+    permissionStore.setDynamicAddedRoute(true);
+    // 代码逻辑说明: 【issues/7500】vue-router4.5.0版本路由name:PageNotFound同名导致登录进不去
+    if (to.name === PAGE_NOT_FOUND_NAME_404) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true, query: to.query });
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string;
+      const redirect = decodeURIComponent(redirectPath);
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+      next(nextData);
+    }
+  });
+}
diff --git a/src/router/guard/stateGuard.ts b/src/router/guard/stateGuard.ts
new file mode 100644
index 0000000..c34513c
--- /dev/null
+++ b/src/router/guard/stateGuard.ts
@@ -0,0 +1,24 @@
+import type { Router } from 'vue-router';
+import { useAppStore } from '/@/store/modules/app';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useUserStore } from '/@/store/modules/user';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { PageEnum } from '/@/enums/pageEnum';
+import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
+
+export function createStateGuard(router: Router) {
+  router.afterEach((to) => {
+    // Just enter the login page and clear the authentication information
+    if (to.path === PageEnum.BASE_LOGIN) {
+      const tabStore = useMultipleTabStore();
+      const userStore = useUserStore();
+      const appStore = useAppStore();
+      const permissionStore = usePermissionStore();
+      appStore.resetAllState();
+      permissionStore.resetState();
+      tabStore.resetState();
+      userStore.resetState();
+      removeTabChangeListener();
+    }
+  });
+}
diff --git a/src/router/helper/menuHelper.ts b/src/router/helper/menuHelper.ts
new file mode 100644
index 0000000..561c23a
--- /dev/null
+++ b/src/router/helper/menuHelper.ts
@@ -0,0 +1,132 @@
+import { AppRouteModule } from '/@/router/types';
+import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types';
+import { findPath, treeMap } from '/@/utils/helper/treeHelper';
+import { cloneDeep } from 'lodash-es';
+import { isUrl } from '/@/utils/is';
+import { RouteParams } from 'vue-router';
+import { toRaw } from 'vue';
+
+export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
+  // 原代码
+  // const menuList = findPath(treeData, (n) => n.path === path) as Menu[];
+  // 先匹配不包含隐藏菜单的路径
+  let menuList = findMenuPath(treeData, path, false);
+  // 如果没有匹配到，再匹配包含隐藏菜单的路径
+  if(!(menuList?.length)) {
+    menuList = findMenuPath(treeData, path, true)
+  }
+  return (menuList || []).map((item) => item.path);
+}
+
+/**
+ * 查找菜单路径
+ *
+ * @param treeData
+ * @param path
+ * @param matchHide 是否匹配隐藏菜单
+ */
+function findMenuPath<T = Recordable>(treeData: T[], path: string, matchHide: boolean) {
+  return findPath(treeData, (n) => {
+    // 隐藏菜单不参与匹配
+    if(!matchHide && n.hideMenu) {
+      return false;
+    }
+    return n.path === path
+  }) as Menu[];
+}
+
+// 路径处理
+function joinParentPath(menus: Menu[], parentPath = '') {
+  for (let index = 0; index < menus.length; index++) {
+    const menu = menus[index];
+    // https://next.router.vuejs.org/guide/essentials/nested-routes.html
+    // Note that nested paths that start with / will be treated as a root path.
+    // 请注意，以 / 开头的嵌套路径将被视为根路径。
+    // This allows you to leverage the component nesting without having to use a nested URL.
+    // 这允许你利用组件嵌套，而无需使用嵌套 URL。
+    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+      // path doesn't start with /, nor is it a url, join parent path
+      // 路径不以 / 开头，也不是 url，加入父路径
+      menu.path = `${parentPath}/${menu.path}`;
+    }
+    if (menu?.children?.length) {
+      joinParentPath(menu.children, menu.meta?.hidePathForChildren ? parentPath : menu.path);
+    }
+  }
+}
+
+// Parsing the menu module
+export function transformMenuModule(menuModule: MenuModule): Menu {
+  const { menu } = menuModule;
+
+  const menuList = [menu];
+
+  joinParentPath(menuList);
+  return menuList[0];
+}
+
+// 将路由转换成菜单
+export function transformRouteToMenu(routeModList: AppRouteModule[], routerMapping = false) {
+  // 借助 lodash 深拷贝
+  const cloneRouteModList = cloneDeep(routeModList);
+  const routeList: AppRouteRecordRaw[] = [];
+
+  // 对路由项进行修改
+  cloneRouteModList.forEach((item) => {
+    if (routerMapping && item.meta.hideChildrenInMenu && typeof item.redirect === 'string') {
+      item.path = item.redirect;
+    }
+
+    if (item.meta?.single) {
+      const realItem = item?.children?.[0];
+      realItem && routeList.push(realItem);
+    } else {
+      routeList.push(item);
+    }
+  });
+  // 提取树指定结构
+  const list = treeMap(routeList, {
+    conversion: (node: AppRouteRecordRaw) => {
+      const { meta: { title, hideMenu = false } = {} } = node;
+
+      return {
+        ...(node.meta || {}),
+        meta: node.meta,
+        name: title,
+        hideMenu,
+        alwaysShow:node.alwaysShow||false,
+        path: node.path,
+        originComponent: node.originComponent,
+        ...(node.redirect ? { redirect: node.redirect } : {}),
+      };
+    },
+  });
+  // 路径处理
+  joinParentPath(list);
+  return cloneDeep(list);
+}
+
+/**
+ * config menu with given params
+ */
+const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g;
+
+export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
+  const { path, paramPath } = toRaw(menu);
+  let realPath = paramPath ? paramPath : path;
+  const matchArr = realPath.match(menuParamRegex);
+
+  matchArr?.forEach((it) => {
+    const realIt = it.substr(1);
+    if (params[realIt]) {
+      realPath = realPath.replace(`:${realIt}`, params[realIt] as string);
+    }
+  });
+  // save original param path.
+  if (!paramPath && matchArr && matchArr.length > 0) {
+    menu.paramPath = path;
+  }
+  menu.path = realPath;
+  // children
+  menu.children?.forEach((item) => configureDynamicParamsMenu(item, params));
+}
diff --git a/src/router/helper/routeHelper.ts b/src/router/helper/routeHelper.ts
new file mode 100644
index 0000000..b907011
--- /dev/null
+++ b/src/router/helper/routeHelper.ts
@@ -0,0 +1,247 @@
+import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
+import type { Router, RouteRecordNormalized } from 'vue-router';
+
+import { getParentLayout, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
+import { cloneDeep, omit } from 'lodash-es';
+import { warn } from '/@/utils/log';
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { getTenantId, getToken } from "/@/utils/auth";
+import { URL_HASH_TAB, _eval } from '/@/utils';
+//引入online lib路由
+import { packageViews } from '/@/utils/monorepo/dynamicRouter';
+import { loadPackageComponent } from '/@/utils/monorepo/registerPackages';
+import { dynamicPages } from '/@/utils/dynamicPages';
+import {useI18n} from "/@/hooks/web/useI18n";
+
+export type LayoutMapKey = 'LAYOUT';
+const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
+const LayoutContent = () => import('/@/layouts/default/content/index.vue');
+
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', LAYOUT);
+LayoutMap.set('IFRAME', IFRAME);
+//微前端qiankun
+LayoutMap.set('LayoutsContent', LayoutContent);
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable>>;
+
+// Dynamic introduction
+function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
+  if (!dynamicViewsModules) {
+    // update-begin--author:liaozhiyang---date:20260302---for:【QQYUN-14799】动态引入页面会生成两份及引入components下的组件文件
+    dynamicViewsModules = dynamicPages as Record<string, () => Promise<Recordable>>;
+    // update-end--author:liaozhiyang---date:20260302---for:【QQYUN-14799】动态引入页面会生成两份及引入components下的组件文件
+    //合并online lib路由
+    dynamicViewsModules = Object.assign({}, dynamicViewsModules, packageViews);
+  }
+  if (!routes) return;
+  routes.forEach((item) => {
+
+    //【jeecg-boot/issues/I5N2PN】左侧动态菜单怎么做国际化处理  2022-10-09
+    //菜单支持国际化翻译
+    if (item?.meta?.title) {
+      const { t } = useI18n();
+      if(item.meta.title.includes('t(\'') && t){
+        // 代码逻辑说明: 【QQYUN-6390】eval替换成new Function，解决build警告
+        item.meta.title = new Function('t', `return ${item.meta.title}`)(t);
+      }
+    }
+    // @ts-ignore 适配隐藏路由
+    if (item?.hidden) {
+      item.meta.hideMenu = true;
+      //是否隐藏面包屑
+      item.meta.hideBreadcrumb = true;
+    }
+    // @ts-ignore 添加忽略路由配置
+    if (item?.route == 0) {
+      item.meta.ignoreRoute = true;
+    }
+    // @ts-ignore 添加是否缓存路由配置
+    item.meta.ignoreKeepAlive = !item?.meta.keepAlive;
+    let token = getToken();
+    let tenantId = getTenantId();
+    // URL支持{{ window.xxx }}占位符变量
+    // 代码逻辑说明: [VUEN-1638]菜单tenantId需要动态生成------------
+    item.component = (item.component || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => _eval(s2)).replace('${token}', token).replace('${tenantId}', tenantId);
+    // 适配 iframe
+    if (/^\/?http(s)?/.test(item.component as string)) {
+      item.component = item.component.substring(1, item.component.length);
+    }
+    if (/^http(s)?/.test(item.component as string)) {
+      if (item.meta?.internalOrExternal) {
+        // @ts-ignore 外部打开
+        item.path = item.component;
+        // 代码逻辑说明: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+        item.path = item.path.replace('#', URL_HASH_TAB);
+      } else {
+        // @ts-ignore 内部打开
+        item.meta.frameSrc = item.component;
+      }
+      delete item.component;
+    }
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME';
+    }
+    let { component, name } = item;
+    const { children } = item;
+    if (component) {
+      const layoutFound = LayoutMap.get(component.toUpperCase());
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        if (component.indexOf('dashboard/') > -1) {
+          //当数据标sys_permission中component没有拼接index时前端需要拼接
+          if (component.indexOf('/index') < 0) {
+            component = component + '/index';
+          }
+        }
+        item.component = dynamicImport(dynamicViewsModules, component as string);
+      }
+    } else if (name) {
+      item.component = getParentLayout();
+    }
+    children && asyncImportRoute(children);
+  });
+}
+
+function dynamicImport(dynamicViewsModules: Record<string, () => Promise<Recordable>>, component: string) {
+  const keys = Object.keys(dynamicViewsModules);
+  const matchKeys = keys.filter((key) => {
+    // update-begin--author:liaozhiyang---date:20260302---for:【QQYUN-14799】动态引入页面会生成两份及引入components下的组件文件
+    // 兼容两种前缀：dynamicPages 的 ../views 与 packageViews 的 ../../views
+    const k = key.replace(/^(\.\.\/)+views/, '');
+    // update-end--author:liaozhiyang---date:20260302---for:【QQYUN-14799】动态引入页面会生成两份及引入components下的组件文件
+    const startFlag = component.startsWith('/');
+    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
+    const startIndex = startFlag ? 0 : 1;
+    const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
+    return k.substring(startIndex, lastIndex) === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return dynamicViewsModules[matchKey];
+  } else if (matchKeys?.length > 1) {
+    warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
+    );
+    return;
+  }
+  // online/aiflow 本地未找到，尝试从懒加载包中按需加载
+  if (component.startsWith('/super/airag/aiflow')) {
+    return () => {
+      return loadPackageComponent(component).then((factory) => (factory ? factory() : Promise.reject(`组件 ${component} 未找到`)));
+    };
+  }
+}
+
+// Turn background objects into routing objects
+export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
+  routeList.forEach((route) => {
+    const component = route.component as string;
+    if (component) {
+      route.originComponent = component;
+      if (component.toUpperCase() === 'LAYOUT') {
+        route.component = LayoutMap.get(component.toUpperCase());
+      } else {
+        route.children = [cloneDeep(route)];
+        route.component = LAYOUT;
+        route.name = `${route.name}Parent`;
+        route.path = '';
+        const meta = route.meta || {};
+        meta.single = true;
+        meta.affix = false;
+        route.meta = meta;
+      }
+    } else {
+      warn('请正确配置路由：' + route?.name + '的component属性');
+    }
+    route.children && asyncImportRoute(route.children);
+  });
+  return routeList as unknown as T[];
+}
+
+/**
+ *  将多级路由转换为二级
+ */
+export function flatMultiLevelRoutes(routeModules: AppRouteModule[]) {
+  const modules: AppRouteModule[] = cloneDeep(routeModules);
+  for (let index = 0; index < modules.length; index++) {
+    const routeModule = modules[index];
+    if (!isMultipleRoute(routeModule)) {
+      continue;
+    }
+    promoteRouteLevel(routeModule);
+  }
+  return modules;
+}
+
+//提升路由级别
+function promoteRouteLevel(routeModule: AppRouteModule) {
+  // Use vue-router to splice menus
+  let router: Router | null = createRouter({
+    routes: [routeModule as unknown as RouteRecordNormalized],
+    history: createWebHashHistory(),
+  });
+
+  const routes = router.getRoutes();
+  addToChildren(routes, routeModule.children || [], routeModule);
+  router = null;
+
+  routeModule.children = routeModule.children?.map((item) => omit(item, 'children'));
+}
+
+// Add all sub-routes to the secondary route
+function addToChildren(routes: RouteRecordNormalized[], children: AppRouteRecordRaw[], routeModule: AppRouteModule) {
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const route = routes.find((item) => item.name === child.name);
+    if (!route) {
+      continue;
+    }
+    routeModule.children = routeModule.children || [];
+    if (!routeModule.children.find((item) => item.name === route.name)) {
+      routeModule.children?.push(route as unknown as AppRouteModule);
+    }
+    if (child.children?.length) {
+      addToChildren(routes, child.children, routeModule);
+    }
+  }
+}
+
+// Determine whether the level exceeds 2 levels
+function isMultipleRoute(routeModule: AppRouteModule) {
+  if (!routeModule || !Reflect.has(routeModule, 'children') || !routeModule.children?.length) {
+    return false;
+  }
+
+  const children = routeModule.children;
+
+  let flag = false;
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    if (child.children?.length) {
+      flag = true;
+      break;
+    }
+  }
+  return flag;
+}
+/**
+ * 组件地址前加斜杠处理
+ * @updateBy:lsq
+ * @updateDate:2021-09-08
+ */
+export function addSlashToRouteComponent(routeList: AppRouteRecordRaw[]) {
+  routeList.forEach((route) => {
+    let component = route.component as string;
+    if (component) {
+      const layoutFound = LayoutMap.get(component);
+      if (!layoutFound) {
+        route.component = component.startsWith('/') ? component : `/${component}`;
+      }
+    }
+    route.children && addSlashToRouteComponent(route.children);
+  });
+  return routeList as unknown as T[];
+}
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..474bcc2
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,59 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { App } from 'vue';
+
+import { $electron } from "@/electron";
+import { basicRoutes } from './routes';
+import {createRouter as createVueRouter, destroyRouter, router} from './router'
+
+// 白名单应该包含基本静态路由
+const WHITE_NAME_LIST: string[] = [];
+const getRouteNames = (array: any[]) =>
+  array.forEach((item) => {
+    WHITE_NAME_LIST.push(item.name);
+    getRouteNames(item.children || []);
+  });
+getRouteNames(basicRoutes);
+
+/**
+ * 创建路由实例
+ */
+export function createRouter() {
+  let router = createVueRouter({
+      routes: basicRoutes as unknown as RouteRecordRaw[],
+      strict: true,
+      scrollBehavior: () => ({left: 0, top: 0}),
+    },
+    // 如果是 Electron 环境，则使用 hash 路由
+    $electron.isElectron(),
+  )
+
+  // TODO 【QQYUN-4517】【表单设计器】记录分享路由守卫测试
+  // @ts-ignore
+  router.beforeEach(async (to, from, next) => {
+    //console.group('【QQYUN-4517】beforeEach');
+    //console.warn('from', from);
+    //console.warn('to', to);
+    //console.groupEnd();
+    next();
+  });
+}
+
+// reset router
+export function resetRouter() {
+  router.getRoutes().forEach((route) => {
+    const { name } = route;
+    if (name && !WHITE_NAME_LIST.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name);
+    }
+  });
+}
+
+// config router
+export function setupRouter(app: App<Element>) {
+  app.use(router);
+}
+
+export {
+  router,
+  destroyRouter,
+}
diff --git a/src/router/menus/index.ts b/src/router/menus/index.ts
new file mode 100644
index 0000000..97b7199
--- /dev/null
+++ b/src/router/menus/index.ts
@@ -0,0 +1,126 @@
+import type { Menu, MenuModule } from '/@/router/types';
+import type { RouteRecordNormalized } from 'vue-router';
+
+import { useAppStoreWithOut } from '/@/store/modules/app';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
+import { filter } from '/@/utils/helper/treeHelper';
+import { isUrl } from '/@/utils/is';
+import { router } from '/@/router';
+import { PermissionModeEnum } from '/@/enums/appEnum';
+import { pathToRegexp } from 'path-to-regexp';
+
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
+
+const menuModules: MenuModule[] = [];
+
+Object.keys(modules).forEach((key) => {
+  const mod = (modules as Recordable)[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  menuModules.push(...modList);
+});
+
+// ===========================
+// ==========Helper===========
+// ===========================
+
+const getPermissionMode = () => {
+  const appStore = useAppStoreWithOut();
+  return appStore.getProjectConfig.permissionMode;
+};
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK;
+};
+
+const isRouteMappingMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
+};
+
+const isRoleMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROLE;
+};
+
+const staticMenus: Menu[] = [];
+(() => {
+  menuModules.sort((a, b) => {
+    return (a.orderNo || 0) - (b.orderNo || 0);
+  });
+
+  for (const menu of menuModules) {
+    staticMenus.push(transformMenuModule(menu));
+  }
+})();
+
+async function getAsyncMenus() {
+  const permissionStore = usePermissionStore();
+  if (isBackMode()) {
+    return permissionStore.getBackMenuList.filter((item) => !item.meta?.hideMenu && !item.hideMenu);
+  }
+  if (isRouteMappingMode()) {
+    return permissionStore.getFrontMenuList.filter((item) => !item.hideMenu);
+  }
+  return staticMenus;
+}
+
+export const getMenus = async (): Promise<Menu[]> => {
+  const menus = await getAsyncMenus();
+  if (isRoleMode()) {
+    const routes = router.getRoutes();
+    return filter(menus, basicFilter(routes));
+  }
+  return menus;
+};
+
+export async function getCurrentParentPath(currentPath: string) {
+  const menus = await getAsyncMenus();
+  const allParentPath = await getAllParentPath(menus, currentPath);
+  return allParentPath?.[0];
+}
+
+// Get the level 1 menu, delete children
+export async function getShallowMenus(): Promise<Menu[]> {
+  const menus = await getAsyncMenus();
+  const shallowMenuList = menus.map((item) => ({ ...item, children: undefined }));
+  if (isRoleMode()) {
+    const routes = router.getRoutes();
+    return shallowMenuList.filter(basicFilter(routes));
+  }
+  return shallowMenuList;
+}
+
+// Get the children of the menu
+export async function getChildrenMenus(parentPath: string) {
+  const menus = await getMenus();
+  const parent = menus.find((item) => item.path === parentPath);
+  if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) {
+    return [] as Menu[];
+  }
+  if (isRoleMode()) {
+    const routes = router.getRoutes();
+    return filter(parent.children, basicFilter(routes));
+  }
+  return parent.children;
+}
+
+function basicFilter(routes: RouteRecordNormalized[]) {
+  return (menu: Menu) => {
+    const matchRoute = routes.find((route) => {
+      if (isUrl(menu.path)) return true;
+
+      if (route.meta?.carryParam) {
+        return pathToRegexp(route.path).test(menu.path);
+      }
+      const isSame = route.path === menu.path;
+      if (!isSame) return false;
+
+      if (route.meta?.ignoreAuth) return true;
+
+      return isSame || pathToRegexp(route.path).test(menu.path);
+    });
+
+    if (!matchRoute) return false;
+    menu.icon = (menu.icon || matchRoute.meta.icon) as string;
+    menu.meta = matchRoute.meta;
+    return true;
+  };
+}
diff --git a/src/router/router.ts b/src/router/router.ts
new file mode 100644
index 0000000..7a847b1
--- /dev/null
+++ b/src/router/router.ts
@@ -0,0 +1,42 @@
+/*
+ * 路由实例存储文件，请勿轻易添加其他代码，防止出现 HMR 或其他问题
+ */
+import type {Router, RouterHistory} from 'vue-router';
+import {createRouter as createVueRouter, createWebHistory, createWebHashHistory, RouterOptions} from 'vue-router';
+
+export let router: Router = null as unknown as Router;
+
+export function setRouter(r: Router) {
+  router = r
+}
+
+let webHistory: Nullable<RouterHistory> = null;
+
+/**
+ * 创建路由
+ * @param options 参数
+ * @param useHashHistory 是否使用 hash 路由，true使用，false不使用hash路由
+ */
+export function createRouter(options: Partial<RouterOptions>, useHashHistory = false) {
+  const createFn = useHashHistory ? createWebHashHistory : createWebHistory;
+  webHistory = createFn(import.meta.env.VITE_PUBLIC_PATH);
+  // app router
+  let router = createVueRouter({
+    history: webHistory,
+    routes: [],
+    ...options,
+  });
+
+  setRouter(router)
+
+  return router
+}
+
+// 销毁路由
+export function destroyRouter() {
+  setRouter(null as unknown as Router);
+  if (webHistory) {
+    webHistory.destroy();
+  }
+  webHistory = null
+}
diff --git a/src/router/routes/basic.ts b/src/router/routes/basic.ts
new file mode 100644
index 0000000..386e75f
--- /dev/null
+++ b/src/router/routes/basic.ts
@@ -0,0 +1,75 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT, PAGE_NOT_FOUND_NAME, PAGE_NOT_FOUND_NAME_404 } from '/@/router/constant';
+
+// 404 on a page
+export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+ 
+  name: PAGE_NOT_FOUND_NAME,
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+    hideMenu: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      // 代码逻辑说明: 【issues/7500】vue-router4.5.0版本路由name:PageNotFound同名导致登录进不去
+      name: PAGE_NOT_FOUND_NAME_404,
+      component: EXCEPTION_COMPONENT,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+        hideMenu: true,
+      },
+    },
+  ],
+};
+
+export const REDIRECT_ROUTE: AppRouteRecordRaw = {
+  path: '/redirect',
+  component: LAYOUT,
+  name: 'RedirectTo',
+  meta: {
+    title: REDIRECT_NAME,
+    hideBreadcrumb: true,
+    hideMenu: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: REDIRECT_NAME,
+      component: () => import('/@/views/sys/redirect/index.vue'),
+      meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
+  path: '/error-log',
+  name: 'ErrorLog',
+  component: LAYOUT,
+  redirect: '/error-log/list',
+  meta: {
+    title: 'ErrorLog',
+    hideBreadcrumb: true,
+    hideChildrenInMenu: true,
+  },
+  children: [
+    {
+      path: 'list',
+      name: 'ErrorLogList',
+      component: () => import('/@/views/sys/error-log/index.vue'),
+      meta: {
+        title: t('routes.basic.errorLogList'),
+        hideBreadcrumb: true,
+        currentActiveMenu: '/error-log',
+      },
+    },
+  ],
+};
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
new file mode 100644
index 0000000..60a4831
--- /dev/null
+++ b/src/router/routes/index.ts
@@ -0,0 +1,66 @@
+import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
+
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+
+import { mainOutRoutes } from './mainOut';
+import { PageEnum } from '/@/enums/pageEnum';
+import { t } from '/@/hooks/web/useI18n';
+import { LAYOUT } from '/@/router/constant';
+
+const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
+
+const routeModuleList: AppRouteModule[] = [];
+
+// 加入到路由集合中
+Object.keys(modules).forEach((key) => {
+  const mod = (modules as Recordable)[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  routeModuleList.push(...modList);
+});
+
+export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList];
+
+export const RootRoute: AppRouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root',
+  },
+};
+
+export const LoginRoute: AppRouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('/@/views/system/loginmini/MiniLogin.vue'),
+  meta: {
+    title: t('routes.basic.login'),
+  },
+};
+
+// 代码逻辑说明: auth2登录页面路由------------
+export const Oauth2LoginRoute: AppRouteRecordRaw = {
+  path: '/oauth2-app/login',
+  name: 'oauth2-app-login',
+  //新版钉钉免登录，如果想要使用旧版放开即可
+  // component: () => import('/@/views/sys/login/OAuth2Login.vue'),
+  component: () => import('/@/views/system/loginmini/OAuth2Login.vue'),
+  meta: {
+    title: t('routes.oauth2.login'),
+  },
+};
+
+/**
+ * 【通过token直接静默登录】流程办理登录页面 中转跳转
+ */
+export const TokenLoginRoute: AppRouteRecordRaw = {
+  path: '/tokenLogin',
+  name: 'TokenLoginRoute',
+  component: () => import('/@/views/sys/login/TokenLoginPage.vue'),
+  meta: {
+    title: '带token登录页面',
+    ignoreAuth: true,
+  },
+};
+// Basic routing without permission
+export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];
diff --git a/src/router/routes/mainOut.ts b/src/router/routes/mainOut.ts
new file mode 100644
index 0000000..99b3cae
--- /dev/null
+++ b/src/router/routes/mainOut.ts
@@ -0,0 +1,11 @@
+/**
+The routing of this file will not show the layout.
+It is an independent new page.
+the contents of the file still need to log in to access
+ */
+import type { AppRouteModule } from '/@/router/types';
+
+// 演示用免登录路由已移除（精简版无 demo 页面）
+export const mainOutRoutes: AppRouteModule[] = [];
+
+export const mainOutRouteNames = mainOutRoutes.map((item) => item.name);
diff --git a/src/router/routes/modules/about.ts b/src/router/routes/modules/about.ts
new file mode 100644
index 0000000..d32c4f5
--- /dev/null
+++ b/src/router/routes/modules/about.ts
@@ -0,0 +1,31 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+  path: '/about',
+  name: 'About',
+  component: LAYOUT,
+  redirect: '/about/index',
+  meta: {
+    hideChildrenInMenu: true,
+    icon: 'simple-icons:about-dot-me',
+    title: t('routes.dashboard.about'),
+    orderNo: 100000,
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'AboutPage',
+      component: () => import('/@/views/sys/about/index.vue'),
+      meta: {
+        title: t('routes.dashboard.about'),
+        icon: 'simple-icons:about-dot-me',
+        hideMenu: true,
+      },
+    },
+  ],
+};
+
+export default dashboard;
diff --git a/src/router/routes/modules/dashboard.ts b/src/router/routes/modules/dashboard.ts
new file mode 100644
index 0000000..2a7bebb
--- /dev/null
+++ b/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,37 @@
+import type { AppRouteModule } from '/@/router/types';
+import { PageEnum } from '/@/enums/pageEnum';
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: LAYOUT,
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    orderNo: 10,
+    icon: 'ion:grid-outline',
+    title: t('routes.dashboard.dashboard'),
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: () => import('/@/views/dashboard/Analysis/index.vue'),
+      meta: {
+        // affix: true,
+        title: t('routes.dashboard.analysis'),
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: () => import('/@/views/dashboard/workbench/index.vue'),
+      meta: {
+        title: t('routes.dashboard.workbench'),
+      },
+    },
+  ],
+};
+
+export default dashboard;
diff --git a/src/router/routes/staticRouter.ts b/src/router/routes/staticRouter.ts
new file mode 100644
index 0000000..e7e95e1
--- /dev/null
+++ b/src/router/routes/staticRouter.ts
@@ -0,0 +1,23 @@
+import type { AppRouteRecordRaw } from '/@/router/types';
+import { LAYOUT } from '/@/router/constant';
+
+export const AI_ROUTE: AppRouteRecordRaw = {
+  path: '',
+  name: 'ai-parent',
+  component: LAYOUT,
+  meta: {
+    title: 'ai',
+  },
+  children: [
+    {
+      path: '/ai',
+      name: 'ai',
+      component: () => import('/@/views/dashboard/ai/index.vue'),
+      meta: {
+        title: 'AI助手',
+      },
+    },
+  ],
+};
+
+export const staticRoutesList = [AI_ROUTE];
diff --git a/src/router/types.ts b/src/router/types.ts
new file mode 100644
index 0000000..995dd79
--- /dev/null
+++ b/src/router/types.ts
@@ -0,0 +1,60 @@
+import type { RouteRecordRaw, RouteMeta } from 'vue-router';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { defineComponent } from 'vue';
+
+export type Component<T extends any = any> = ReturnType<typeof defineComponent> | (() => Promise<typeof import('*.vue')>) | (() => Promise<T>);
+
+// @ts-ignore
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+  name: string;
+  meta: RouteMeta;
+  component?: Component | string;
+  originComponent?: string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+  alwaysShow?: boolean;
+}
+
+export interface MenuTag {
+  type?: 'primary' | 'error' | 'warn' | 'success';
+  content?: string;
+  dot?: boolean;
+}
+
+export interface Menu {
+  name: string;
+
+  icon?: string;
+
+  path: string;
+
+  // path contains param, auto assignment.
+  paramPath?: string;
+
+  disabled?: boolean;
+
+  children?: Menu[];
+
+  orderNo?: number;
+
+  roles?: RoleEnum[];
+
+  meta?: Partial<RouteMeta>;
+
+  tag?: MenuTag;
+
+  hideMenu?: boolean;
+  
+  alwaysShow?: boolean;
+  
+}
+
+export interface MenuModule {
+  orderNo?: number;
+  menu: Menu;
+}
+
+// export type AppRouteModule = RouteModule | AppRouteRecordRaw;
+export type AppRouteModule = AppRouteRecordRaw;
diff --git a/src/settings/componentSetting.ts b/src/settings/componentSetting.ts
new file mode 100644
index 0000000..d9c2257
--- /dev/null
+++ b/src/settings/componentSetting.ts
@@ -0,0 +1,91 @@
+// 用于配置某些组件的常规配置，而无需修改组件
+
+import type { SorterResult } from '../components/Table';
+
+export default {
+  // 表格配置
+  table: {
+    // 表格接口请求通用配置，可在组件prop覆盖
+    // 支持 xxx.xxx.xxx格式
+    fetchSetting: {
+      // 传给后台的当前页字段
+      pageField: 'pageNo',
+      // 传给后台的每页显示多少条的字段
+      sizeField: 'pageSize',
+      // 接口返回表格数据的字段
+      listField: 'records',
+      // 接口返回表格总数的字段
+      totalField: 'total',
+    },
+    // 可选的分页选项
+    pageSizeOptions: ['10', '50', '80', '100'],
+    // 表格默认尺寸
+    defaultSize: 'middle',
+    //默认每页显示多少条
+    defaultPageSize: 10,
+    // 默认排序方法
+    defaultSortFn: (sortInfo: SorterResult) => {
+      // 代码逻辑说明: VUEN-2199【表单设计器】多字段排序
+      if(sortInfo instanceof Array){
+        let sortInfoArray:any[] = []
+        for(let item of sortInfo){
+          let info = getSort(item);
+          if(info){
+            sortInfoArray.push(info)
+          }
+        }
+        return {
+          sortInfoString: JSON.stringify(sortInfoArray)
+        }
+      }else{
+        let info = getSort(sortInfo)
+        return info || {}
+      }
+    },
+    // 自定义过滤方法
+    defaultFilterFn: (data: Partial<Recordable<string[]>>) => {
+      return data;
+    },
+    // 代码逻辑说明: 【issues/1188】BasicTable加上scrollToFirstRowOnChange类型定义
+    scrollToFirstRowOnChange: false,
+  },
+  // 滚动组件配置
+  scrollbar: {
+    // 是否使用原生滚动样式
+    // 开启后，菜单，弹窗，抽屉会使用原生滚动条组件
+    native: false,
+  },
+  //表单配置
+  form: {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+      xl: { span: 6 },
+      xxl: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+    //表单默认冒号
+    colon: true,
+  },
+};
+
+/**
+ * 获取排序信息
+ * @param item
+ */
+function getSort(item){
+  const { field, order } = item;
+  if (field && order) {
+    let sortType = 'ascend' == order ? 'asc' : 'desc';
+    return {
+      // 排序字段
+      column: field,
+      // 排序方式 asc/desc
+      order: sortType,
+    };
+  }
+  return ''
+}
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
new file mode 100644
index 0000000..fddd4ff
--- /dev/null
+++ b/src/settings/designSetting.ts
@@ -0,0 +1,71 @@
+import { ThemeEnum } from '../enums/appEnum';
+
+export const prefixCls = 'jeecg';
+
+export const darkMode = ThemeEnum.LIGHT;
+
+// app theme preset color
+export const APP_PRESET_COLOR_LIST: string[] = [
+  '#0960bd',
+  '#1890ff',
+  '#009688',
+  '#536dfe',
+  '#ff5c93',
+  '#13c2c2',
+  '#52c41a',
+  '#ee4f12',
+  '#0096c7',
+  '#9c27b0',
+  '#ff9800',
+];
+
+// header preset color
+export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
+  '#ffffff',
+  '#151515',
+  '#009688',
+  '#5172DC',
+  '#018ffb',
+  '#13c2c2',
+  '#e74c3c',
+  '#52c41a',
+  '#394664',
+  '#faad14',
+  '#383f45',
+];
+
+// sider preset color
+export const SIDE_BAR_BG_COLOR_LIST: string[] = [
+  '#001529',
+  // '#212121',
+  '#009688',
+  '#273352',
+  '#ffffff',
+  '#191b24',
+  // '#191a23',
+  '#037bd5',
+  '#304156',
+  '#001628',
+  '#28333E',
+  // '#344058',
+  '#e74c3c',
+  '#383f45',
+];
+
+// sider logo line preset color [logo����ɫ]
+export const SIDER_LOGO_BG_COLOR_LIST: string[] = [
+  'linear-gradient(180deg, #000000, #021d37)',
+  // 'linear-gradient(180deg, #000000, #282828)',
+  'linear-gradient(180deg, #078d80, #029184)',
+  'linear-gradient(180deg, #1c253e, #2b385c)',
+  'linear-gradient(180deg, #ffffff, #ffffff)',
+  'linear-gradient(180deg, #000000, #242735)',
+  // 'linear-gradient(180deg, #000000, #1d1f2a)',
+  'linear-gradient(180deg, #1d77bb, #188efa)',
+  'linear-gradient(180deg, #304156, #32455d)',
+  'linear-gradient(180deg, #000000, #001f39)',
+  'linear-gradient(180deg, #000000, #2b3743)',
+  // 'linear-gradient(180deg, #344058, #374560)',
+  'linear-gradient(180deg, #e83723, #e52611)',
+  'linear-gradient(180deg, #383f45, #3b434b)',
+];
diff --git a/src/settings/encryptionSetting.ts b/src/settings/encryptionSetting.ts
new file mode 100644
index 0000000..e9266f7
--- /dev/null
+++ b/src/settings/encryptionSetting.ts
@@ -0,0 +1,13 @@
+import { isDevMode } from '/@/utils/env';
+
+// 缓存默认过期时间
+export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+
+// 开启缓存加密后，加密密钥。采用aes加密
+export const cacheCipher = {
+  key: '_11111000001111@',
+  iv: '@11111000001111_',
+};
+
+// 是否加密缓存，默认生产环境加密
+export const enableStorageEncryption = false;
diff --git a/src/settings/localeSetting.ts b/src/settings/localeSetting.ts
new file mode 100644
index 0000000..304f807
--- /dev/null
+++ b/src/settings/localeSetting.ts
@@ -0,0 +1,30 @@
+import type { DropMenu } from '../components/Dropdown';
+import type { LocaleSetting, LocaleType } from '/#/config';
+
+export const LOCALE: { [key: string]: LocaleType } = {
+  ZH_CN: 'zh_CN',
+  EN_US: 'en',
+};
+
+export const localeSetting: LocaleSetting = {
+  // 是否显示语言选择器
+  showPicker: true,
+  // 当前语言
+  locale: LOCALE.ZH_CN,
+  // 默认语言
+  fallback: LOCALE.ZH_CN,
+  // 允许的语言
+  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
+};
+
+// 语言列表
+export const localeList: DropMenu[] = [
+  {
+    text: '简体中文',
+    event: LOCALE.ZH_CN,
+  },
+  {
+    text: 'English',
+    event: LOCALE.EN_US,
+  },
+];
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
new file mode 100644
index 0000000..40e1522
--- /dev/null
+++ b/src/settings/projectSetting.ts
@@ -0,0 +1,203 @@
+import type { ProjectConfig } from '/#/config';
+import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
+import {
+  ContentEnum,
+  PermissionModeEnum,
+  ThemeEnum,
+  RouterTransitionEnum,
+  SettingButtonPositionEnum,
+  SessionTimeoutProcessingEnum,
+  TabsThemeEnum,
+} from '/@/enums/appEnum';
+import { darkMode } from '/@/settings/designSetting';
+import { getConfigByMenuType } from '../utils/getConfigByMenuType';
+// 修改此属性，实现默认的四个系统主题快速切换
+const menuType = MenuTypeEnum.SIDEBAR;
+
+// update-begin--author:liaozhiyang---date:20251201---for【QQYUN-14176】修改一个配置就能切换默认四个主题，不需要额外修改颜色等
+const { themeColor, headerBgColor, sideBgColor, split, mode } = getConfigByMenuType(menuType);
+// update-end--author:liaozhiyang---date:20251201---for【QQYUN-14176】修改一个配置就能切换默认四个主题，不需要额外修改颜色等
+// ! 改动后需要清空浏览器缓存
+const setting: ProjectConfig = {
+  // 是否显示SettingButton
+  showSettingButton: true,
+
+  // 是否显示主题切换按钮
+  showDarkModeToggle: true,
+
+  // 设置按钮位置 可选项
+  // SettingButtonPositionEnum.AUTO: 自动选择
+  // SettingButtonPositionEnum.HEADER: 位于头部
+  // SettingButtonPositionEnum.FIXED: 固定在右侧
+  settingButtonPosition: SettingButtonPositionEnum.AUTO,
+
+  // 权限模式,默认前端角色权限模式
+  // ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）
+  // ROLE：前端模式（菜单路由分开）
+  // BACK：后台模式
+  permissionMode: PermissionModeEnum.BACK,
+
+  // 权限缓存存放位置。默认存放于localStorage
+  permissionCacheType: CacheTypeEnum.LOCAL,
+
+  // 会话超时处理方案
+  // SessionTimeoutProcessingEnum.ROUTE_JUMP: 路由跳转到登录页
+  // SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+  // 项目主题色 - 根据导航栏模式确定主题色动态设置
+  themeColor: themeColor,
+  // 项目主题模式
+  themeMode: darkMode,
+
+  // 网站灰色模式，用于可能悼念的日期开启
+  grayMode: false,
+
+  // 色弱模式
+  colorWeak: false,
+
+  // 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
+  fullContent: false,
+
+  // 主题内容宽度
+  contentMode: ContentEnum.FULL,
+
+  // 是否显示logo
+  showLogo: true,
+
+  // 是否显示底部信息 copyright
+  showFooter: false,
+
+  // ai图标显示
+  aiIconShow: false,
+
+  // 头部配置
+  headerSetting: {
+    // 背景色
+    bgColor: headerBgColor,
+    // 固定头部
+    fixed: true,
+    // 是否显示顶部
+    show: true,
+    // 主题
+    theme: ThemeEnum.LIGHT,
+    // 开启锁屏功能
+    useLockPage: false,
+    // 显示全屏按钮
+    showFullScreen: false,
+    // 显示官网按钮
+    showDoc: false,
+    // 显示消息中心按钮
+    showNotice: true,
+    // 显示菜单搜索按钮
+    showSearch: true,
+  },
+
+  // 菜单配置
+  menuSetting: {
+    // 背景色
+    bgColor: sideBgColor,
+    // 是否固定住左侧菜单
+    fixed: true,
+    // 菜单折叠
+    collapsed: false,
+    // 折叠菜单时候是否显示菜单名
+    collapsedShowTitle: false,
+    // 是否可拖拽
+    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
+    canDrag: false,
+    // Whether to show no dom
+    show: true,
+    // Whether to show dom
+    hidden: false,
+    // 菜单宽度
+    menuWidth: 210,
+    // 菜单模式
+    mode,
+    // 菜单类型
+    type: menuType,
+    // 菜单主题
+    theme: ThemeEnum.LIGHT,
+    // 左侧导航栏文字颜色调整区分彩色和暗黑 (不对应配置)
+    isThemeBright: false,
+    // 分割菜单
+    split,
+    // 顶部菜单布局
+    topMenuAlign: 'center',
+    // 折叠触发器的位置
+    trigger: TriggerEnum.HEADER,
+    // 手风琴模式，只展示一个菜单
+    accordion: true,
+    // 在路由切换的时候关闭左侧混合菜单展开菜单
+    closeMixSidebarOnChange: false,
+    // 左侧混合菜单模块切换触发方式 ‘click’ |'hover'
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+    // 是否固定左侧混合菜单
+    mixSideFixed: false,
+  },
+
+  // 多标签
+  multiTabsSetting: {
+    // 刷新后是否保留已经打开的标签页
+    cache: false,
+    // 开启
+    show: true,
+    // 是否可以拖拽
+    canDrag: true,
+    // 开启快速操作
+    showQuick: true,
+    // 是否显示刷新按钮
+    showRedo: true,
+    // 是否显示折叠按钮
+    showFold: true,
+    // 标签页样式
+    theme: TabsThemeEnum.CARD,
+  },
+
+  // 动画配置
+  transitionSetting: {
+    //  是否开启切换动画
+    // The disabled state will also disable pageLoading
+    enable: true,
+
+    // 动画名 Route basic switching animation
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+    // 是否打开页面切换loading
+    // Only open when enable=true
+    openPageLoading: true,
+
+    //是否打开页面切换顶部进度条
+    openNProgress: true,
+  },
+
+  // 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存
+  openKeepAlive: true,
+
+  // 自动锁屏时间，为0不锁屏。 单位分钟 默认1个小时
+  lockTime: 0,
+
+  // 显示面包屑
+  showBreadCrumb: false,
+
+  // 显示面包屑图标
+  showBreadCrumbIcon: true,
+
+  // 是否使用全局错误捕获
+  useErrorHandle: false,
+
+  // 是否开启回到顶部
+  useOpenBackTop: true,
+
+  // 是否可以嵌入iframe页面
+  canEmbedIFramePage: true,
+
+  // 切换界面的时候是否删除未关闭的message及notify
+  closeMessageOnSwitch: true,
+
+  // 切换界面的时候是否取消已经发送但是未响应的http请求。
+  // 如果开启,想对单独接口覆盖。可以在单独接口设置
+  removeAllHttpPending: false,
+};
+
+export default setting;
diff --git a/src/settings/registerThirdComp.ts b/src/settings/registerThirdComp.ts
new file mode 100644
index 0000000..1e21719
--- /dev/null
+++ b/src/settings/registerThirdComp.ts
@@ -0,0 +1,68 @@
+import type { App } from 'vue';
+import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
+import { registerJVxeCustom } from '/@/components/JVxeCustom';
+
+// 注册全局dayjs
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+// JVxeTable 按需加载：仅首次渲染时注册一次
+let jvxeRegistered = false;
+
+export async function registerThirdComp(app: App) {
+  //---------------------------------------------------------------------
+  // update-begin--author:liaozhiyang---date:20260210---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+  // 注册 JVxeTable 组件（按需加载：首次使用 <JVxeTable> 时才加载 vxe-table 与 JVxeTable）
+  app.component(
+    'JVxeTable',
+    createAsyncComponent(
+      () => {
+        return import('/@/components/jeecg/JVxeTable/src/JVxeTable').then(async (m) => {
+          if (!jvxeRegistered) {
+            if (app._context.components.VxeTable) {
+              // 已全局注册
+            } else {
+              const { registerJVxeTable } = await import('/@/components/jeecg/JVxeTable/src/install');
+              await registerJVxeTable(app);
+              const { registerJVxeCustom } = await import('/@/components/JVxeCustom');
+              await registerJVxeCustom();
+              jvxeRegistered = true;
+            }
+          }
+          return m.default;
+        });
+      },
+      { loading: true }
+    )
+  );
+  // update-end--author:liaozhiyang---date:20260209---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+  //---------------------------------------------------------------------
+  // 注册全局聊天表情包
+  // 代码逻辑说明: 【QQYUN-8241】emoji-mart-vue-fast库异步加载
+  app.component(
+    'Picker',
+    createAsyncComponent(() => {
+      return new Promise((resolve, rejected) => {
+        import('emoji-mart-vue-fast/src')
+          .then((res) => {
+            const { Picker } = res;
+            resolve(Picker);
+          })
+          .catch((err) => {
+            rejected(err);
+          });
+      });
+    })
+  );
+  // update-end--author:liaozhiyang---date:20240308---for：【QQYUN-8241】emoji-mart-vue-fast库异步加载
+  //---------------------------------------------------------------------
+  // 注册全局dayjs
+  dayjs.locale('zh-cn');
+  dayjs.extend(relativeTime);
+  dayjs.extend(customParseFormat);
+  app.config.globalProperties.$dayjs = dayjs
+  app.provide('$dayjs', dayjs)
+  //---------------------------------------------------------------------
+}
diff --git a/src/settings/siteSetting.ts b/src/settings/siteSetting.ts
new file mode 100644
index 0000000..331a4c0
--- /dev/null
+++ b/src/settings/siteSetting.ts
@@ -0,0 +1,8 @@
+// github repo url
+export const GITHUB_URL = 'https://github.com/jeecgboot/JeecgBoot';
+
+// vue-Jeecg-admin-next-doc
+export const DOC_URL = 'https://help.jeecg.com';
+
+// site url
+export const SITE_URL = 'http://www.jeecg.com';
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..9aee017
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,24 @@
+import type { App } from 'vue';
+import type { Pinia } from 'pinia';
+import { createPinia } from 'pinia';
+
+let app: Nullable<App<Element>> = null;
+let store: Nullable<Pinia> = null;
+
+export function setupStore($app: App<Element>) {
+  if (store == null) {
+    store = createPinia();
+  }
+  app = $app;
+  app.use(store);
+}
+
+// 销毁store
+export function destroyStore() {
+  store = null;
+}
+
+// 获取app实例
+export const getAppContext = () => app?._context;
+
+export {app, store};
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
new file mode 100644
index 0000000..ee2f831
--- /dev/null
+++ b/src/store/modules/app.ts
@@ -0,0 +1,165 @@
+import type { MainAppProps } from "#/main";
+import type { ProjectConfig, HeaderSetting, MenuSetting, TransitionSetting, MultiTabsSetting } from '/#/config';
+import type { BeforeMiniState } from '/#/store';
+
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+
+import { ThemeEnum } from '/@/enums/appEnum';
+import { APP_DARK_MODE_KEY_, PROJ_CFG_KEY } from '/@/enums/cacheEnum';
+import { Persistent } from '/@/utils/cache/persistent';
+import { darkMode } from '/@/settings/designSetting';
+import { resetRouter } from '/@/router';
+import { deepMerge } from '/@/utils';
+import { getHideLayoutTypes } from '/@/utils/env';
+import setting from '/@/settings/projectSetting';
+
+interface AppState {
+  darkMode?: ThemeEnum;
+  // Page loading status
+  pageLoading: boolean;
+  // project config
+  projectConfig: ProjectConfig | null;
+  // When the window shrinks, remember some states, and restore these states when the window is restored
+  beforeMiniInfo: BeforeMiniState;
+  // 页面跳转临时参数存储
+  messageHrefParams: any,
+  // 应用参数
+  mainAppProps: MainAppProps,
+}
+let timeId: TimeoutHandle;
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): AppState => ({
+    darkMode: undefined,
+    pageLoading: false,
+    projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
+    beforeMiniInfo: {},
+    messageHrefParams: {},
+    mainAppProps: {},
+  }),
+  getters: {
+    getPageLoading(): boolean {
+      return this.pageLoading;
+    },
+    getDarkMode(): 'light' | 'dark' | string {
+      // liaozhiyang---date:20250411---for：【QQYUN-11956】修复projectSetting中配置主题模式不生效
+      const getSettingTheme = () => {
+        const theme = setting.themeMode;
+        if (theme) {
+          if (theme == ThemeEnum.DARK) {
+            // 为了index.html页面loading时是暗黑
+            localStorage.setItem(APP_DARK_MODE_KEY_, theme);
+          }
+          return theme;
+        }
+        return '';
+      };
+      // liaozhiyang---date:20250411---for：【QQYUN-11956】修复projectSetting中配置主题模式不生效
+      return this.darkMode || localStorage.getItem(APP_DARK_MODE_KEY_) || getSettingTheme() || darkMode;
+    },
+
+    getBeforeMiniInfo(): BeforeMiniState {
+      return this.beforeMiniInfo;
+    },
+
+    getProjectConfig(): ProjectConfig {
+      return this.projectConfig || ({} as ProjectConfig);
+    },
+
+    getHeaderSetting(): HeaderSetting {
+      return this.getProjectConfig.headerSetting;
+    },
+    getMenuSetting(): MenuSetting {
+      return this.getProjectConfig.menuSetting;
+    },
+    getTransitionSetting(): TransitionSetting {
+      return this.getProjectConfig.transitionSetting;
+    },
+    getMultiTabsSetting(): MultiTabsSetting {
+      return this.getProjectConfig.multiTabsSetting;
+    },
+    getMessageHrefParams():any{
+      return this.messageHrefParams;
+    },
+    getMainAppProps(): MainAppProps {
+      return this.mainAppProps;
+    },
+
+    getLayoutHideSider(): boolean {
+      const hideLayoutTypes = getHideLayoutTypes();
+      if (hideLayoutTypes.includes('sider')) {
+        return true;
+      }
+      return !!this.mainAppProps.hideSider;
+    },
+    getLayoutHideHeader(): boolean {
+      const hideLayoutTypes = getHideLayoutTypes();
+      if (hideLayoutTypes.includes('header')) {
+        return true;
+      }
+      return !!this.mainAppProps.hideHeader;
+    },
+    getLayoutHideMultiTabs(): boolean {
+      const hideLayoutTypes = getHideLayoutTypes();
+      if (hideLayoutTypes.includes('multi-tabs')) {
+        return true;
+      }
+      return !!this.mainAppProps.hideMultiTabs;
+    },
+  },
+  actions: {
+    setPageLoading(loading: boolean): void {
+      this.pageLoading = loading;
+    },
+
+    setDarkMode(mode: ThemeEnum): void {
+      this.darkMode = mode;
+      localStorage.setItem(APP_DARK_MODE_KEY_, mode);
+      this.setProjectConfig({ themeMode: mode });
+    },
+
+    setBeforeMiniInfo(state: BeforeMiniState): void {
+      this.beforeMiniInfo = state;
+    },
+
+    setProjectConfig(config: DeepPartial<ProjectConfig>): void {
+      this.projectConfig = deepMerge(this.projectConfig || {}, config);
+      // 代码逻辑说明: 【QQYUN-8922】设置导航栏模式没存本地，刷新就还原了
+      Persistent.setLocal(PROJ_CFG_KEY, this.projectConfig, true);
+    },
+
+    async resetAllState() {
+      resetRouter();
+      Persistent.clearAll();
+    },
+    async setPageLoadingAction(loading: boolean): Promise<void> {
+      if (loading) {
+        clearTimeout(timeId);
+        // Prevent flicker
+        timeId = setTimeout(() => {
+          this.setPageLoading(loading);
+        }, 50);
+      } else {
+        this.setPageLoading(loading);
+        clearTimeout(timeId);
+      }
+    },
+    setMessageHrefParams(params: any): void {
+      this.messageHrefParams = params;
+    },
+
+    // 设置主应用参数
+    setMainAppProps(args: MainAppProps)  {
+      this.mainAppProps.hideHeader = args.hideHeader ?? false;
+      this.mainAppProps.hideSider = args.hideSider ?? false;
+      this.mainAppProps.hideMultiTabs = args.hideMultiTabs ?? false;
+    },
+
+  },
+});
+
+// Need to be used outside the setup
+export function useAppStoreWithOut() {
+  return useAppStore(store);
+}
diff --git a/src/store/modules/defIndex.ts b/src/store/modules/defIndex.ts
new file mode 100644
index 0000000..5e6e505
--- /dev/null
+++ b/src/store/modules/defIndex.ts
@@ -0,0 +1,76 @@
+import {store} from '/@/store';
+import {defineStore} from 'pinia';
+import {defHttp} from "@/utils/http/axios";
+
+interface DefIndexState {
+  // 首页url
+  url: string,
+  // 首页组件
+  component: string
+}
+
+export const useDefIndexStore = defineStore({
+  id: 'defIndex',
+  state: (): DefIndexState => ({
+    url: '',
+    component: '',
+  }),
+  getters: {},
+  actions: {
+    /**
+     * 查询默认主页配置
+     */
+    async query() {
+      const config = await defIndexApi.query();
+      this.url = config.url;
+      this.component = config.component;
+    },
+    /**
+     * 更新默认主页配置
+     * @param url 首页url
+     * @param component 首页组件
+     * @param isRoute 是否是路由
+     */
+    async update(url: string, component: string, isRoute: boolean) {
+      await defIndexApi.update(url, component, isRoute);
+      await this.query()
+    },
+
+    check(url: string) {
+      return url === this.url;
+    }
+  }
+});
+
+// Need to be used outside the setup
+export function useDefIndexStoreWithOut() {
+  return useDefIndexStore(store);
+}
+
+/**
+ * 默认首页配置API
+ */
+export const defIndexApi = {
+  /**
+   * 查询默认首页配置
+   */
+  async query() {
+    const url = '/sys/sysRoleIndex/queryDefIndex'
+    return await defHttp.get({url});
+  },
+  /**
+   * 更新默认首页配置
+   * @param url 首页url
+   * @param component 首页组件
+   * @param isRoute 是否是路由
+   */
+  async update(url: string, component: string, isRoute: boolean) {
+    let apiUrl = '/sys/sysRoleIndex/updateDefIndex'
+    apiUrl += '?url=' + url
+    // 代码逻辑说明: 设置默认首页接口传参修改,增加encodeURIComponent，防止{{ window._CONFIG['domianURL'] }}/**保存不上
+    apiUrl += '&component=' + encodeURIComponent(component)
+    apiUrl += '&isRoute=' + isRoute
+    return await defHttp.put({url: apiUrl});
+  },
+
+}
diff --git a/src/store/modules/errorLog.ts b/src/store/modules/errorLog.ts
new file mode 100644
index 0000000..c95edba
--- /dev/null
+++ b/src/store/modules/errorLog.ts
@@ -0,0 +1,74 @@
+import type { ErrorLogInfo } from '/#/store';
+
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+
+import { formatToDateTime } from '/@/utils/dateUtil';
+import projectSetting from '/@/settings/projectSetting';
+
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+
+export interface ErrorLogState {
+  errorLogInfoList: Nullable<ErrorLogInfo[]>;
+  errorLogListCount: number;
+}
+
+export const useErrorLogStore = defineStore({
+  id: 'app-error-log',
+  state: (): ErrorLogState => ({
+    errorLogInfoList: null,
+    errorLogListCount: 0,
+  }),
+  getters: {
+    getErrorLogInfoList(): ErrorLogInfo[] {
+      return this.errorLogInfoList || [];
+    },
+    getErrorLogListCount(): number {
+      return this.errorLogListCount;
+    },
+  },
+  actions: {
+    addErrorLogInfo(info: ErrorLogInfo) {
+      const item = {
+        ...info,
+        time: formatToDateTime(new Date()),
+      };
+      this.errorLogInfoList = [item, ...(this.errorLogInfoList || [])];
+      this.errorLogListCount += 1;
+    },
+
+    setErrorLogListCount(count: number): void {
+      this.errorLogListCount = count;
+    },
+
+    /**
+     * Triggered after ajax request error
+     * @param error
+     * @returns
+     */
+    addAjaxErrorInfo(error) {
+      const { useErrorHandle } = projectSetting;
+      if (!useErrorHandle) {
+        return;
+      }
+      const errInfo: Partial<ErrorLogInfo> = {
+        message: error.message,
+        type: ErrorTypeEnum.AJAX,
+      };
+      if (error.response) {
+        const { config: { url = '', data: params = '', method = 'get', headers = {} } = {}, data = {} } = error.response;
+        errInfo.url = url;
+        errInfo.name = 'Ajax Error!';
+        errInfo.file = '-';
+        errInfo.stack = JSON.stringify(data);
+        errInfo.detail = JSON.stringify({ params, method, headers });
+      }
+      this.addErrorLogInfo(errInfo as ErrorLogInfo);
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useErrorLogStoreWithOut() {
+  return useErrorLogStore(store);
+}
diff --git a/src/store/modules/locale.ts b/src/store/modules/locale.ts
new file mode 100644
index 0000000..31030c0
--- /dev/null
+++ b/src/store/modules/locale.ts
@@ -0,0 +1,83 @@
+import type { LocaleSetting, LocaleType } from '/#/config';
+
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+
+import { LOCALE_KEY } from '/@/enums/cacheEnum';
+import { createLocalStorage } from '/@/utils/cache';
+import { localeSetting } from '/@/settings/localeSetting';
+
+const ls = createLocalStorage();
+
+const lsLocaleSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
+
+interface LocaleState {
+  localInfo: LocaleSetting;
+  pathTitleMap: object;
+  // myapps主题色（低代码应用列表首页）
+  appIndexTheme: string
+  // myapps - 跳转前路由地址
+  appMainPth: string
+}
+
+export const useLocaleStore = defineStore({
+  id: 'app-locale',
+  state: (): LocaleState => ({
+    localInfo: lsLocaleSetting,
+    pathTitleMap: {},
+    appIndexTheme: '',
+    appMainPth: ''
+  }),
+  getters: {
+    getShowPicker(): boolean {
+      return !!this.localInfo?.showPicker;
+    },
+    getLocale(): LocaleType {
+      return this.localInfo?.locale ?? 'zh_CN';
+    },
+    // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+    getPathTitle: (state) => {
+      return (path) => state.pathTitleMap[path];
+    },
+    getAppIndexTheme(): string {
+      return this.appIndexTheme;
+    },
+    getAppMainPth(): string {
+      return this.appMainPth;
+    },
+  },
+  actions: {
+    /**
+     * Set up multilingual information and cache
+     * @param info multilingual info
+     */
+    setLocaleInfo(info: Partial<LocaleSetting>) {
+      this.localInfo = { ...this.localInfo, ...info };
+      ls.set(LOCALE_KEY, this.localInfo);
+    },
+    /**
+     * Initialize multilingual information and load the existing configuration from the local cache
+     */
+    initLocale() {
+      this.setLocaleInfo({
+        ...localeSetting,
+        ...this.localInfo,
+      });
+    },
+    // 代码逻辑说明: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+    setPathTitle(path, title) {
+      this.pathTitleMap[path] = title;
+    },
+    setAppIndexTheme(theme) {
+      this.appIndexTheme = theme;
+    },
+    setAppMainPth(path) {
+      this.appMainPth = path;
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useLocaleStoreWithOut() {
+  return useLocaleStore(store);
+}
diff --git a/src/store/modules/lock.ts b/src/store/modules/lock.ts
new file mode 100644
index 0000000..90f8b48
--- /dev/null
+++ b/src/store/modules/lock.ts
@@ -0,0 +1,40 @@
+import type { LockInfo } from '/#/store';
+
+import { defineStore } from 'pinia';
+
+import { LOCK_INFO_KEY } from '/@/enums/cacheEnum';
+import { Persistent } from '/@/utils/cache/persistent';
+import { useUserStore } from './user';
+
+interface LockState {
+  lockInfo: Nullable<LockInfo>;
+}
+
+export const useLockStore = defineStore({
+  id: 'app-lock',
+  state: (): LockState => ({
+    lockInfo: Persistent.getLocal(LOCK_INFO_KEY),
+  }),
+  getters: {
+    getLockInfo(): Nullable<LockInfo> {
+      return this.lockInfo;
+    },
+  },
+  actions: {
+    setLockInfo(info: LockInfo) {
+      this.lockInfo = Object.assign({}, this.lockInfo, info);
+      Persistent.setLocal(LOCK_INFO_KEY, this.lockInfo, true);
+    },
+    resetLockInfo() {
+      Persistent.removeLocal(LOCK_INFO_KEY, true);
+      this.lockInfo = null;
+    },
+    // Unlock
+    async unLock(password?: string) {
+      if (this.lockInfo?.pwd === password) {
+        this.resetLockInfo();
+        return true;
+      }
+    },
+  },
+});
diff --git a/src/store/modules/multipleTab.ts b/src/store/modules/multipleTab.ts
new file mode 100644
index 0000000..68af9f3
--- /dev/null
+++ b/src/store/modules/multipleTab.ts
@@ -0,0 +1,472 @@
+import type { RouteLocationNormalized, RouteLocationRaw, Router } from 'vue-router';
+
+import { toRaw, unref } from 'vue';
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+import { PAGE_NOT_FOUND_NAME_404 } from '/@/router/constant';
+
+import { useGo, useRedo } from '/@/hooks/web/usePage';
+import { Persistent } from '/@/utils/cache/persistent';
+
+import { PageEnum } from '/@/enums/pageEnum';
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+import { getRawRoute } from '/@/utils';
+import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';
+
+import projectSetting from '/@/settings/projectSetting';
+import { useUserStore } from '/@/store/modules/user';
+import type { LocationQueryRaw, RouteParamsRaw } from 'vue-router';
+import { getMenus } from '/@/router/menus';
+
+export interface MultipleTabState {
+  cacheTabList: Set<string>;
+  tabList: RouteLocationNormalized[];
+  lastDragEndIndex: number;
+  redirectPageParam: null | redirectPageParamType;
+}
+
+interface redirectPageParamType {
+  redirect_type: string;
+  name?: string;
+  path?: string;
+  query: LocationQueryRaw;
+  params?: RouteParamsRaw;
+}
+
+function handleGotoPage(router: Router, path?) {
+  const go = useGo(router);
+  // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+  go(path || unref(router.currentRoute).path, true);
+}
+const getToTarget = (tabItem: RouteLocationNormalized) => {
+  const { params, path, query } = tabItem;
+  return {
+    params: params || {},
+    path,
+    query: query || {},
+  };
+};
+
+/**
+ * 2024-06-05
+ * liaozhiyang
+ * 关闭的tab中是否包含当前页面
+ */
+const closeTabContainCurrentRoute = (router, pathList) => {
+  const { currentRoute } = router;
+  const getCurrentTab = () => {
+    const route = unref(currentRoute);
+    const tabStore = useMultipleTabStore();
+    return tabStore.getTabList.find((item) => item.path === route.path)!;
+  };
+  const currentTab = getCurrentTab();
+  if (currentTab) {
+    return pathList.includes(currentTab.path);
+  }
+  return false;
+};
+/**
+ * 2025-05-08
+ * liaozhiyang
+ * 【issues/8216】online生成的菜单sql 自动带上组件名称
+ * */
+function getMatchingRoute(menus, path) {
+  for (let i = 0, len = menus.length; i < len; i++) {
+    const item = menus[i];
+    if (item.path === path && !item.redirect && !item.paramPath) {
+      return item;
+    } else if (item.children?.length) {
+      const result = getMatchingRoute(item.children, path);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+const cacheTab = projectSetting.multiTabsSetting.cache;
+
+export const useMultipleTabStore = defineStore({
+  id: 'app-multiple-tab',
+  state: (): MultipleTabState => ({
+    // Tabs that need to be cached
+    cacheTabList: new Set(),
+    // multiple tab list
+    tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [],
+    // Index of the last moved tab
+    lastDragEndIndex: 0,
+    // 重定向时存储的路由参数
+    redirectPageParam: null,
+  }),
+  getters: {
+    getTabList(): RouteLocationNormalized[] {
+      return this.tabList;
+    },
+    getCachedTabList(): string[] {
+      return Array.from(this.cacheTabList);
+    },
+    getLastDragEndIndex(): number {
+      return this.lastDragEndIndex;
+    },
+  },
+  actions: {
+    /**
+     * Update the cache according to the currently opened tabs
+     */
+    async updateCacheTab() {
+      const cacheMap: Set<string> = new Set();
+      const allMenus = await getMenus();
+      for (const tab of this.tabList) {
+        const item = getRawRoute(tab);
+        // Ignore the cache
+        const needCache = !item.meta?.ignoreKeepAlive;
+        if (!needCache) {
+          continue;
+        }
+        // 代码逻辑说明: 【QQYUN-12348】online生成的菜单sql 自动带上组件名称
+        if (
+          ['OnlineAutoList', 'DefaultOnlineList', 'CgformErpList', 'OnlCgformInnerTableList', 'OnlCgformTabList', 'OnlCgReportList', 'GraphreportAutoChart', 'AutoDesformDataList'].includes(item.name as string) &&
+          allMenus?.length
+        ) {
+          const route = getMatchingRoute(allMenus, item.path);
+          if (route?.meta?.keepAlive) {
+            // 如果keepAlive为true，则添加到缓存中
+          } else {
+            continue;
+          }
+        }
+        const name = item.name as string;
+        cacheMap.add(name);
+      }
+      this.cacheTabList = cacheMap;
+    },
+
+    /**
+     * Refresh tabs
+     */
+    async refreshPage(router: Router) {
+      const { currentRoute } = router;
+      const route = unref(currentRoute);
+      const name = route.name;
+
+      const findTab = this.getCachedTabList.find((item) => item === name);
+      if (findTab) {
+        this.cacheTabList.delete(findTab);
+      }
+      const redo = useRedo(router);
+      await redo();
+    },
+    /**
+     * 修改设计模式
+     * changeDesign
+     */
+    async changeDesign(router: Router) {
+      const { currentRoute } = router;
+      const route = unref(currentRoute);
+      const name = route.name;
+
+      const findTab = this.getCachedTabList.find((item) => item === name);
+      if (findTab) {
+        this.cacheTabList.delete(findTab);
+      }
+      const redo = useRedo(router, { isDesign: true });
+      await redo();
+    },
+    clearCacheTabs(): void {
+      this.cacheTabList = new Set();
+    },
+    resetState(): void {
+      this.tabList = [];
+      this.clearCacheTabs();
+    },
+    goToPage(router: Router) {
+      const go = useGo(router);
+      const len = this.tabList.length;
+      const { path } = unref(router.currentRoute);
+
+      let toPath: PageEnum | string = PageEnum.BASE_HOME;
+
+      if (len > 0) {
+        const page = this.tabList[len - 1];
+        const p = page.fullPath || page.path;
+        if (p) {
+          toPath = p;
+        }
+      }
+      // Jump to the current page and report an error
+      path !== toPath && go(toPath as PageEnum, true);
+    },
+
+    async addTab(route: RouteLocationNormalized) {
+      const { path, name, fullPath, params, query, meta } = getRawRoute(route);
+      // 404  The page does not need to add a tab
+      if (
+        path === PageEnum.ERROR_PAGE ||
+        path === PageEnum.BASE_LOGIN ||
+        !name ||
+        [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_NAME_404].includes(name as string)
+      ) {
+        return;
+      }
+
+      let updateIndex = -1;
+      // Existing pages, do not add tabs repeatedly
+      const tabHasExits = this.tabList.some((tab, index) => {
+        updateIndex = index;
+        return (tab.fullPath || tab.path) === (fullPath || path);
+      });
+
+      // If the tab already exists, perform the update operation
+      if (tabHasExits) {
+        const curTab = toRaw(this.tabList)[updateIndex];
+        if (!curTab) {
+          return;
+        }
+        curTab.params = params || curTab.params;
+        curTab.query = query || curTab.query;
+        curTab.fullPath = fullPath || curTab.fullPath;
+        this.tabList.splice(updateIndex, 1, curTab);
+      } else {
+        // 只比较path，忽略query
+        const findIndex = this.tabList.findIndex((tab) => tab.path === path);
+        const isTabExist = findIndex !== -1;
+        if (isTabExist) {
+          this.tabList.splice(findIndex, 1, route);
+          return;
+        }
+        // Add tab
+        // 获取动态路由打开数，超过 0 即代表需要控制打开数
+        const dynamicLevel = meta?.dynamicLevel ?? -1;
+        if (dynamicLevel > 0) {
+          // 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
+          // 首先获取到真实的路由，使用配置方式减少计算开销.
+          // const realName: string = path.match(/(\S*)\//)![1];
+          const realPath = meta?.realPath ?? '';
+          // 获取到已经打开的动态路由数, 判断是否大于某一个值
+          if (this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath).length >= dynamicLevel) {
+            // 关闭第一个
+            const index = this.tabList.findIndex((item) => item.meta.realPath === realPath);
+            index !== -1 && this.tabList.splice(index, 1);
+          }
+        }
+        this.tabList.push(route);
+      }
+      this.updateCacheTab();
+      cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
+    },
+
+    async closeTab(tab: RouteLocationNormalized, router: Router) {
+      const close = (route: RouteLocationNormalized) => {
+        const { fullPath, meta: { affix } = {} } = route;
+        if (affix) {
+          return;
+        }
+        const index = this.tabList.findIndex((item) => item.fullPath === fullPath);
+        index !== -1 && this.tabList.splice(index, 1);
+      };
+
+      const { currentRoute, replace } = router;
+
+      const { path } = unref(currentRoute);
+      if (path !== tab.path) {
+        // Closed is not the activation tab
+        close(tab);
+        this.updateCacheTab();
+        return;
+      }
+
+      // Closed is activated atb
+      let toTarget: RouteLocationRaw = {};
+
+      const index = this.tabList.findIndex((item) => item.path === path);
+
+      // If the current is the leftmost tab
+      if (index === 0) {
+        // There is only one tab, then jump to the homepage, otherwise jump to the right tab
+        if (this.tabList.length === 1) {
+          const userStore = useUserStore();
+          toTarget = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+        } else {
+          //  Jump to the right tab
+          const page = this.tabList[index + 1];
+          toTarget = getToTarget(page);
+        }
+      } else {
+        // Close the current tab
+        const page = this.tabList[index - 1];
+        toTarget = getToTarget(page);
+      }
+      close(currentRoute.value);
+      await replace(toTarget);
+    },
+
+    // Close according to key
+    async closeTabByKey(key: string, router: Router) {
+      const index = this.tabList.findIndex((item) => (item.fullPath || item.path) === key);
+      if (index !== -1) {
+        await this.closeTab(this.tabList[index], router);
+        const { currentRoute, replace } = router;
+        // 检查当前路由是否存在于tabList中
+        const isActivated = this.tabList.findIndex((item) => {
+          return item.fullPath === currentRoute.value.fullPath;
+        });
+        // 如果当前路由不存在于TabList中，尝试切换到其它路由
+        if (isActivated === -1) {
+          let pageIndex;
+          if (index > 0) {
+            pageIndex = index - 1;
+          } else if (index < this.tabList.length - 1) {
+            pageIndex = index + 1;
+          } else {
+            pageIndex = -1;
+          }
+          if (pageIndex >= 0) {
+            const page = this.tabList[index - 1];
+            const toTarget = getToTarget(page);
+            await replace(toTarget);
+          }
+        }
+      }
+    },
+
+    // Sort the tabs
+    async sortTabs(oldIndex: number, newIndex: number) {
+      const currentTab = this.tabList[oldIndex];
+      this.tabList.splice(oldIndex, 1);
+      this.tabList.splice(newIndex, 0, currentTab);
+      this.lastDragEndIndex = this.lastDragEndIndex + 1;
+    },
+
+    // Close the tab on the right and jump
+    async closeLeftTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex((item) => item.path === route.path);
+      let isCloseCurrentTab = false;
+      if (index > 0) {
+        const leftTabs = this.tabList.slice(0, index);
+        const pathList: string[] = [];
+        for (const item of leftTabs) {
+          const affix = item?.meta?.affix ?? false;
+          if (!affix) {
+            pathList.push(item.fullPath);
+          }
+        }
+        // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+        isCloseCurrentTab = closeTabContainCurrentRoute(router, pathList);
+        this.bulkCloseTabs(pathList);
+      }
+      this.updateCacheTab();
+      // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+      if (isCloseCurrentTab) {
+        handleGotoPage(router, route.path);
+      } else {
+        handleGotoPage(router);
+      }
+    },
+
+    // Close the tab on the left and jump
+    async closeRightTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex((item) => item.fullPath === route.fullPath);
+      let isCloseCurrentTab = false;
+      if (index >= 0 && index < this.tabList.length - 1) {
+        const rightTabs = this.tabList.slice(index + 1, this.tabList.length);
+
+        const pathList: string[] = [];
+        for (const item of rightTabs) {
+          const affix = item?.meta?.affix ?? false;
+          if (!affix) {
+            pathList.push(item.fullPath);
+          }
+        }
+        // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+        isCloseCurrentTab = closeTabContainCurrentRoute(router, pathList);
+        this.bulkCloseTabs(pathList);
+      }
+      this.updateCacheTab();
+      // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+      if (isCloseCurrentTab) {
+        handleGotoPage(router, route.path);
+      } else {
+        handleGotoPage(router);
+      }
+    },
+
+    async closeAllTab(router: Router) {
+      this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false);
+      this.clearCacheTabs();
+      this.goToPage(router);
+    },
+
+
+    /**
+     * Close other tabs
+     */
+    async closeOtherTabs(route: RouteLocationNormalized, router: Router) {
+      const closePathList = this.tabList.map((item) => item.fullPath);
+      let isCloseCurrentTab = false;
+      const pathList: string[] = [];
+
+      for (const path of closePathList) {
+        if (path !== route.fullPath) {
+          const closeItem = this.tabList.find((item) => item.path === path);
+          if (!closeItem) {
+            continue;
+          }
+          const affix = closeItem?.meta?.affix ?? false;
+          if (!affix) {
+            pathList.push(closeItem.fullPath);
+          }
+        }
+      }
+      isCloseCurrentTab = closeTabContainCurrentRoute(router, pathList);
+      this.bulkCloseTabs(pathList);
+      this.updateCacheTab();
+      // 代码逻辑说明: 【TV360X-732】非当前页右键关闭左侧、关闭右侧、关闭其它功能正常使用
+      if (isCloseCurrentTab) {
+        handleGotoPage(router, route.path);
+      } else {
+        handleGotoPage(router);
+      }
+    },
+
+    /**
+     * Close tabs in bulk
+     */
+    async bulkCloseTabs(pathList: string[]) {
+      this.tabList = this.tabList.filter((item) => !pathList.includes(item.fullPath));
+    },
+
+    /**
+     * Set tab's title
+     */
+    async setTabTitle(title: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route);
+      if (findTab) {
+        findTab.meta.title = title;
+        await this.updateCacheTab();
+      }
+    },
+    /**
+     * replace tab's path
+     * **/
+    async updateTabPath(fullPath: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route);
+      if (findTab) {
+        findTab.fullPath = fullPath;
+        findTab.path = fullPath;
+        await this.updateCacheTab();
+      }
+    },
+    setRedirectPageParam(data) {
+      this.redirectPageParam = data;
+    },
+    getRedirectPageParam() {
+      return this.redirectPageParam;
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useMultipleTabWithOutStore() {
+  return useMultipleTabStore(store);
+}
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
new file mode 100644
index 0000000..cdac519
--- /dev/null
+++ b/src/store/modules/permission.ts
@@ -0,0 +1,307 @@
+import type { AppRouteRecordRaw, Menu } from '/@/router/types';
+
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useUserStore } from './user';
+import { useAppStoreWithOut } from './app';
+import { toRaw } from 'vue';
+import { transformObjToRoute, flatMultiLevelRoutes, addSlashToRouteComponent } from '/@/router/helper/routeHelper';
+import { transformRouteToMenu } from '/@/router/helper/menuHelper';
+
+import projectSetting from '/@/settings/projectSetting';
+
+import { PermissionModeEnum } from '/@/enums/appEnum';
+
+import { asyncRoutes } from '/@/router/routes';
+import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+import { staticRoutesList } from '../../router/routes/staticRouter';
+
+import { filter } from '/@/utils/helper/treeHelper';
+
+import { getBackMenuAndPerms } from '/@/api/sys/menu';
+
+import { useMessage } from '/@/hooks/web/useMessage';
+import { PageEnum } from '/@/enums/pageEnum';
+
+// 系统权限
+interface AuthItem {
+  // 菜单权限编码，例如：“sys:schedule:list,sys:schedule:info”,多个逗号隔开
+  action: string;
+  // 权限策略1显示2禁用
+  type: string | number;
+  // 权限状态(0无效1有效)
+  status: string | number;
+  // 权限名称
+  describe?: string;
+  isAuth?: boolean;
+}
+
+interface PermissionState {
+  // Permission code list
+  permCodeList: string[] | number[];
+  // Whether the route has been dynamically added
+  isDynamicAddedRoute: boolean;
+  // To trigger a menu update
+  lastBuildMenuTime: number;
+  // Backstage menu list
+  backMenuList: Menu[];
+  frontMenuList: Menu[];
+  // 用户所拥有的权限
+  authList: AuthItem[];
+  // 全部权限配置
+  allAuthList: AuthItem[];
+  // 系统安全模式
+  sysSafeMode: boolean;
+  // online子表按钮权限
+  onlineSubTableAuthMap: object;
+}
+export const usePermissionStore = defineStore({
+  id: 'app-permission',
+  state: (): PermissionState => ({
+    permCodeList: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+    // To trigger a menu update
+    lastBuildMenuTime: 0,
+    // Backstage menu list
+    backMenuList: [],
+    // menu List
+    frontMenuList: [],
+    authList: [],
+    allAuthList: [],
+    sysSafeMode: false,
+    onlineSubTableAuthMap: {},
+  }),
+  getters: {
+    getPermCodeList(): string[] | number[] {
+      return this.permCodeList;
+    },
+    getBackMenuList(): Menu[] {
+      return this.backMenuList;
+    },
+    getFrontMenuList(): Menu[] {
+      return this.frontMenuList;
+    },
+    getLastBuildMenuTime(): number {
+      return this.lastBuildMenuTime;
+    },
+    getIsDynamicAddedRoute(): boolean {
+      return this.isDynamicAddedRoute;
+    },
+
+    // 代码逻辑说明: VUEN-1162 子表按钮没控制
+    getOnlineSubTableAuth: (state) => {
+      return (code) => state.onlineSubTableAuthMap[code];
+    },
+  },
+  actions: {
+    setPermCodeList(codeList: string[]) {
+      this.permCodeList = codeList;
+    },
+
+    setBackMenuList(list: Menu[]) {
+      this.backMenuList = list;
+      list?.length > 0 && this.setLastBuildMenuTime();
+    },
+
+    setFrontMenuList(list: Menu[]) {
+      this.frontMenuList = list;
+    },
+
+    setLastBuildMenuTime() {
+      this.lastBuildMenuTime = new Date().getTime();
+    },
+
+    setDynamicAddedRoute(added: boolean) {
+      this.isDynamicAddedRoute = added;
+    },
+    resetState(): void {
+      this.isDynamicAddedRoute = false;
+      this.permCodeList = [];
+      this.backMenuList = [];
+      this.lastBuildMenuTime = 0;
+    },
+    async changePermissionCode() {
+      const systemPermission = await getBackMenuAndPerms();
+      const codeList = systemPermission.codeList;
+      this.setPermCodeList(codeList);
+      this.setAuthData(systemPermission);
+      
+      //菜单路由
+      const routeList = systemPermission.menu;
+      return routeList;
+    },
+    async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
+      const { t } = useI18n();
+      const userStore = useUserStore();
+      const appStore = useAppStoreWithOut();
+
+      let routes: AppRouteRecordRaw[] = [];
+      const roleList = toRaw(userStore.getRoleList) || [];
+      const { permissionMode = projectSetting.permissionMode } = appStore.getProjectConfig;
+
+      const routeFilter = (route: AppRouteRecordRaw) => {
+        const { meta } = route;
+        const { roles } = meta || {};
+        if (!roles) return true;
+        return roleList.some((role) => roles.includes(role));
+      };
+
+      const routeRemoveIgnoreFilter = (route: AppRouteRecordRaw) => {
+        const { meta } = route;
+        const { ignoreRoute } = meta || {};
+        return !ignoreRoute;
+      };
+
+      /**
+       * @description 根据设置的首页path，修正routes中的affix标记（固定首页）
+       * */
+      const patchHomeAffix = (routes: AppRouteRecordRaw[]) => {
+        if (!routes || routes.length === 0) return;
+        let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+        function patcher(routes: AppRouteRecordRaw[], parentPath = '') {
+          if (parentPath) parentPath = parentPath + '/';
+          routes.forEach((route: AppRouteRecordRaw) => {
+            const { path, children, redirect } = route;
+            const currentPath = path.startsWith('/') ? path : parentPath + path;
+            if (currentPath === homePath) {
+              if (redirect) {
+                homePath = route.redirect! as string;
+              } else {
+                route.meta = Object.assign({}, route.meta, { affix: true });
+                throw new Error('end');
+              }
+            }
+            children && children.length > 0 && patcher(children, currentPath);
+          });
+        }
+        try {
+          patcher(routes);
+        } catch (e) {
+          // 已处理完毕跳出循环
+        }
+        return;
+      };
+
+      switch (permissionMode) {
+        case PermissionModeEnum.ROLE:
+          routes = filter(asyncRoutes, routeFilter);
+          routes = routes.filter(routeFilter);
+          //  将多级路由转换为二级
+          routes = flatMultiLevelRoutes(routes);
+          break;
+
+        case PermissionModeEnum.ROUTE_MAPPING:
+          routes = filter(asyncRoutes, routeFilter);
+          routes = routes.filter(routeFilter);
+          const menuList = transformRouteToMenu(routes, true);
+          routes = filter(routes, routeRemoveIgnoreFilter);
+          routes = routes.filter(routeRemoveIgnoreFilter);
+          menuList.sort((a, b) => {
+            return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0);
+          });
+
+          this.setFrontMenuList(menuList);
+          // 将多级路由转换为二级
+          routes = flatMultiLevelRoutes(routes);
+          break;
+
+        // 后台菜单构建
+        case PermissionModeEnum.BACK:
+          const { createMessage, createWarningModal } = useMessage();
+          console.log(" --- 构建后台路由菜单 --- ")
+          // 菜单加载提示
+          // createMessage.loading({
+          //   content: t('sys.app.menuLoading'),
+          //   duration: 1,
+          // });
+
+          // 从后台获取权限码，
+          // 这个函数可能只需要执行一次，并且实际的项目可以在正确的时间被放置
+          let routeList: AppRouteRecordRaw[] = [];
+          try {
+            routeList = await this.changePermissionCode();
+            //routeList = (await getMenuList()) as AppRouteRecordRaw[];
+            // let hasIndex: boolean = false;
+            // let hasIcon: boolean = false;
+            // for (let menuItem of routeList) {
+            //   // 条件1：判断组件是否是 layouts/default/index
+            //   if (!hasIndex) {
+            //     hasIndex = menuItem.component === 'layouts/default/index';
+            //   }
+            //   // 条件2：判断图标是否带有 冒号
+            //   if (!hasIcon) {
+            //     hasIcon = !!menuItem.meta?.icon?.includes(':');
+            //   }
+            //   // 满足任何一个条件都直接跳出循环
+            //   if (hasIcon || hasIndex) {
+            //     break;
+            //   }
+            // }
+            // // 两个条件都不满足，就弹出提示框
+            // if (!hasIcon && !hasIndex) {
+            //   // 延迟1.5秒之后再出现提示，否则提示框出不来
+            //   setTimeout(
+            //     () =>
+            //       createWarningModal({
+            //         title: '检测提示',
+            //         content:
+            //           '当前菜单表是 <b>Vue2版本</b>，导致菜单加载异常!<br>点击确认，切换到Vue3版菜单！',
+            //         onOk:function () {
+            //           switchVue3Menu();
+            //           location.reload();
+            //         }
+            //       }),
+            //     100
+            //   );
+            // }
+          } catch (error) {
+            console.error(error);
+          }
+          // 组件地址前加斜杠处理  author: lsq date:2021-09-08
+          routeList = addSlashToRouteComponent(routeList);
+          // 动态引入组件
+          routeList = transformObjToRoute(routeList);
+
+          // 构建后台路由菜单
+          const backMenuList = transformRouteToMenu(routeList);
+          this.setBackMenuList(backMenuList);
+
+          // 删除meta.ignoreRoute项
+          routeList = filter(routeList, routeRemoveIgnoreFilter);
+          routeList = routeList.filter(routeRemoveIgnoreFilter);
+
+          routeList = flatMultiLevelRoutes(routeList);
+          // 代码逻辑说明: 【TV360X-522】ai助手路由写死在前端
+          routes = [PAGE_NOT_FOUND_ROUTE, ...routeList, ...staticRoutesList];
+          break;
+      }
+
+      routes.push(ERROR_LOG_ROUTE);
+      patchHomeAffix(routes);
+      return routes;
+    },
+    setAuthData(systemPermission) {
+      this.authList = systemPermission.auth;
+      this.allAuthList = systemPermission.allAuth;
+      this.sysSafeMode = systemPermission.sysSafeMode;
+    },
+    setAuthList(authList: AuthItem[]) {
+      this.authList = authList;
+    },
+    setAllAuthList(authList: AuthItem[]) {
+      this.allAuthList = authList;
+    },
+
+    // 代码逻辑说明: VUEN-1162 子表按钮没控制
+    setOnlineSubTableAuth(code, hideBtnList) {
+      this.onlineSubTableAuthMap[code] = hideBtnList;
+    },
+  },
+});
+
+// 需要在设置之外使用
+export function usePermissionStoreWithOut() {
+  return usePermissionStore(store);
+}
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
new file mode 100644
index 0000000..22bc6f2
--- /dev/null
+++ b/src/store/modules/user.ts
@@ -0,0 +1,370 @@
+import type { UserInfo, LoginInfo } from '/#/store';
+import type { ErrorMessageMode } from '/#/axios';
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { PageEnum } from '/@/enums/pageEnum';
+import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY, LOGIN_INFO_KEY, DB_DICT_DATA_KEY, TENANT_ID, OAUTH2_THIRD_LOGIN_TENANT_ID } from '/@/enums/cacheEnum';
+import { getAuthCache, setAuthCache, removeAuthCache } from '/@/utils/auth';
+import { GetUserInfoModel, LoginParams, ThirdLoginParams } from '/@/api/sys/model/userModel';
+import { doLogout, getUserInfo, loginApi, phoneLoginApi, thirdLogin } from '/@/api/sys/user';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { router } from '/@/router';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
+import { isArray } from '/@/utils/is';
+import { useGlobSetting } from '/@/hooks/setting';
+import { JDragConfigEnum } from '/@/enums/jeecgEnum';
+import { useSso } from '/@/hooks/web/useSso';
+import { isOAuth2AppEnv } from "/@/views/sys/login/useLogin";
+import { getUrlParam } from "@/utils";
+interface dictType {
+  [key: string]: any;
+}
+interface UserState {
+  userInfo: Nullable<UserInfo>;
+  token?: string;
+  roleList: RoleEnum[];
+  dictItems?: dictType | null;
+  sessionTimeout?: boolean;
+  lastUpdateTime: number;
+  tenantid?: string | number;
+  shareTenantId?: Nullable<string | number>;
+  loginInfo?: Nullable<LoginInfo>;
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user',
+  state: (): UserState => ({
+    // 用户信息
+    userInfo: null,
+    // token
+    token: undefined,
+    // 角色列表
+    roleList: [],
+    // 字典
+    dictItems: null,
+    // session过期时间
+    sessionTimeout: false,
+    // Last fetch time
+    lastUpdateTime: 0,
+    //租户id
+    tenantid: '',
+    // 分享租户ID
+    // 用于分享页面所属租户与当前用户登录租户不一致的情况
+    shareTenantId: null,
+    //登录返回信息
+    loginInfo: null,
+  }),
+  getters: {
+    getUserInfo(): UserInfo {
+      if(this.userInfo == null){
+        this.userInfo = getAuthCache<UserInfo>(USER_INFO_KEY)!=null ? getAuthCache<UserInfo>(USER_INFO_KEY) : null;
+      }
+      return this.userInfo || getAuthCache<UserInfo>(USER_INFO_KEY) || {};
+    },
+    getLoginInfo(): LoginInfo {
+      return this.loginInfo || getAuthCache<LoginInfo>(LOGIN_INFO_KEY) || {};
+    },
+    getToken(): string {
+      return this.token || getAuthCache<string>(TOKEN_KEY);
+    },
+    getAllDictItems(): [] {
+      return this.dictItems || getAuthCache(DB_DICT_DATA_KEY);
+    },
+    getRoleList(): RoleEnum[] {
+      return this.roleList.length > 0 ? this.roleList : getAuthCache<RoleEnum[]>(ROLES_KEY);
+    },
+    getSessionTimeout(): boolean {
+      return !!this.sessionTimeout;
+    },
+    getLastUpdateTime(): number {
+      return this.lastUpdateTime;
+    },
+    getTenant(): string | number {
+      return this.tenantid || getAuthCache<string | number>(TENANT_ID);
+    },
+    // 是否有分享租户id
+    hasShareTenantId(): boolean {
+      return this.shareTenantId != null && this.shareTenantId !== '';
+    },
+  },
+  actions: {
+    setToken(info: string | undefined) {
+      this.token = info ? info : ''; // for null or undefined value
+      setAuthCache(TOKEN_KEY, info);
+    },
+    setRoleList(roleList: RoleEnum[]) {
+      this.roleList = roleList;
+      setAuthCache(ROLES_KEY, roleList);
+    },
+    setUserInfo(info: UserInfo | null) {
+      this.userInfo = info;
+      this.lastUpdateTime = new Date().getTime();
+      setAuthCache(USER_INFO_KEY, info);
+    },
+    setLoginInfo(info: LoginInfo | null) {
+      this.loginInfo = info;
+      setAuthCache(LOGIN_INFO_KEY, info);
+    },
+    setAllDictItems(dictItems) {
+      this.dictItems = dictItems;
+      setAuthCache(DB_DICT_DATA_KEY, dictItems);
+    },
+    setAllDictItemsByLocal() {
+      // 代码逻辑说明: 【QQYUN-8572】表格行选择卡顿问题（customRender中字典引起的）
+      if (!this.dictItems) {
+        const allDictItems = getAuthCache(DB_DICT_DATA_KEY);
+        if (allDictItems) {
+          this.dictItems = allDictItems;
+        }
+      }
+    },
+    setTenant(id) {
+      this.tenantid = id;
+      setAuthCache(TENANT_ID, id);
+    },
+    setShareTenantId(id: NonNullable<typeof this.shareTenantId>) {
+      this.shareTenantId = id;
+    },
+    setSessionTimeout(flag: boolean) {
+      this.sessionTimeout = flag;
+    },
+    resetState() {
+      this.userInfo = null;
+      this.dictItems = null;
+      this.token = '';
+      this.roleList = [];
+      this.sessionTimeout = false;
+    },
+    /**
+     * 登录事件
+     */
+    async login(
+      params: LoginParams & {
+        goHome?: boolean;
+        mode?: ErrorMessageMode;
+      }
+    ): Promise<GetUserInfoModel | null> {
+      try {
+        const { goHome = true, mode, ...loginParams } = params;
+        const data = await loginApi(loginParams, mode);
+        const { token, userInfo } = data;
+        // save token
+        this.setToken(token);
+        this.setTenant(userInfo.loginTenantId);
+        return this.afterLoginAction(goHome, data);
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    /**
+     * 扫码登录事件
+     */
+    async qrCodeLogin(token): Promise<GetUserInfoModel | null> {
+      try {
+        // save token
+        this.setToken(token);
+        return this.afterLoginAction(true, {});
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    /**
+     * 登录完成处理
+     * @param goHome
+     */
+    async afterLoginAction(goHome?: boolean, data?: any): Promise<any | null> {
+      if (!this.getToken) return null;
+      //获取用户信息
+      const userInfo = await this.getUserInfoAction();
+      const sessionTimeout = this.sessionTimeout;
+      if (sessionTimeout) {
+        this.setSessionTimeout(false);
+      } else {
+        // // 构建后台菜单路由
+        // const permissionStore = usePermissionStore();
+        // if (!permissionStore.isDynamicAddedRoute) {
+        //   const routes = await permissionStore.buildRoutesAction();
+        //   routes.forEach((route) => {
+        //     router.addRoute(route as unknown as RouteRecordRaw);
+        //   });
+        //   router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+        //   permissionStore.setDynamicAddedRoute(true);
+        // }
+        
+        await this.setLoginInfo({ ...data, isLogin: true });
+        // 代码逻辑说明: 登录成功后缓存拖拽模块的接口前缀
+        localStorage.setItem(JDragConfigEnum.DRAG_BASE_URL, useGlobSetting().domainUrl);
+
+        // 代码逻辑说明: 修复登录成功后，没有正确重定向的问题
+        let redirect = router.currentRoute.value?.query?.redirect as string;
+        // 判断是否有 redirect 重定向地址
+        // 代码逻辑说明: 【QQYUN-5195】登录之后直接刷新页面导致没有进入创建组织页面------------
+        if (redirect && goHome) {
+          // router.options.history.base可替代之前的publicPath
+          // 当前页面打开
+          window.open(`${router.options.history.base}${redirect}`, '_self');
+          return data;
+        }
+
+        // 代码逻辑说明: 【issues/1102】设置单点登录后页面，进入首页提示404，也没有绘制侧边栏 #1102---
+        let ticket = getUrlParam('ticket');
+        if(ticket){
+          goHome && (window.location.replace((userInfo && userInfo.homePath) || PageEnum.BASE_HOME));
+        }else{
+          goHome && (await router.replace((userInfo && userInfo.homePath) || PageEnum.BASE_HOME));
+        }
+      }
+      return data;
+    },
+    /**
+     * 手机号登录
+     * @param params
+     */
+    async phoneLogin(
+      params: LoginParams & {
+        goHome?: boolean;
+        mode?: ErrorMessageMode;
+      }
+    ): Promise<GetUserInfoModel | null> {
+      try {
+        const { goHome = true, mode, ...loginParams } = params;
+        const data = await phoneLoginApi(loginParams, mode);
+        // 代码逻辑说明: 【issues/7488】手机号码登录，在请求头中无法获取租户id---
+        const { token , userInfo } = data;
+        this.setTenant(userInfo!.loginTenantId);
+        // save token
+        this.setToken(token);
+        return this.afterLoginAction(goHome, data);
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    /**
+     * 获取用户信息
+     */
+    async getUserInfoAction(): Promise<UserInfo | null> {
+      if (!this.getToken) {
+        return null;
+      }
+      const { userInfo, sysAllDictItems } = await getUserInfo();
+      if (userInfo) {
+        const { roles = [] } = userInfo;
+        if (isArray(roles)) {
+          const roleList = roles.map((item) => item.value) as RoleEnum[];
+          this.setRoleList(roleList);
+        } else {
+          userInfo.roles = [];
+          this.setRoleList([]);
+        }
+        this.setUserInfo(userInfo);
+      }
+      /**
+       * 添加字典信息到缓存
+       * @updateBy:lsq
+       * @updateDate:2021-09-08
+       */
+      if (sysAllDictItems) {
+        this.setAllDictItems(sysAllDictItems);
+      }
+      return userInfo;
+    },
+    /**
+     * 退出登录
+     */
+    async logout(goLogin = false) {
+      if (this.getToken) {
+        try {
+          await doLogout();
+        } catch {
+          console.log('注销Token失败');
+        }
+      }
+
+      // let username:any = this.userInfo && this.userInfo.username;
+      // if(username){
+      //   removeAuthCache(username)
+      // }
+
+      this.setToken('');
+      setAuthCache(TOKEN_KEY, null);
+      this.setSessionTimeout(false);
+      this.setUserInfo(null);
+      this.setLoginInfo(null);
+      this.setTenant(null);
+      // 代码逻辑说明: 【TV360X-23】退出登录后会提示「Token时效，请重新登录」
+      setTimeout(() => {
+        this.setAllDictItems(null);
+      }, 1e3);
+      // 代码逻辑说明: 退出登录后清除拖拽模块的接口前缀
+      localStorage.removeItem(JDragConfigEnum.DRAG_BASE_URL);
+
+      //如果开启单点登录,则跳转到单点统一登录中心
+      const openSso = useGlobSetting().openSso;
+      if (openSso == 'true') {
+        await useSso().ssoLoginOut();
+      }
+      //退出登录的时候需要用的应用id
+      if(isOAuth2AppEnv()){
+        let tenantId = getAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID);
+        removeAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID);
+        goLogin && await router.push({ name:"Login",query:{ tenantId:tenantId }})
+      }else{
+        // 代码逻辑说明: 修复登录成功后，没有正确重定向的问题
+        goLogin && (await router.push({
+          path: PageEnum.BASE_LOGIN,
+          query: {
+            // 传入当前的路由，登录成功后跳转到当前路由
+            redirect: router.currentRoute.value.fullPath,
+          }
+        }));
+
+      }
+    },
+    /**
+     * 登录事件
+     */
+    async ThirdLogin(
+      params: ThirdLoginParams & {
+        goHome?: boolean;
+        mode?: ErrorMessageMode;
+      }
+    ): Promise<any | null> {
+      try {
+        const { goHome = true, mode, ...ThirdLoginParams } = params;
+        const data = await thirdLogin(ThirdLoginParams, mode);
+        // 代码逻辑说明: 【issues/6652】开启租户数据隔离，接入钉钉后登录默认租户为0了---
+        const { token, userInfo } = data;
+        this.setTenant(userInfo?.loginTenantId);
+        // save token
+        this.setToken(token);
+        return this.afterLoginAction(goHome, data);
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    /**
+     * 退出询问
+     */
+    confirmLoginOut() {
+      const { createConfirm } = useMessage();
+      const { t } = useI18n();
+      createConfirm({
+        iconType: 'warning',
+        title: t('sys.app.logoutTip'),
+        content: t('sys.app.logoutMessage'),
+        onOk: async () => {
+          await this.logout(true);
+        },
+      });
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useUserStoreWithOut() {
+  return useUserStore(store);
+}
diff --git a/src/utils/areaData/pcaUtils.ts b/src/utils/areaData/pcaUtils.ts
new file mode 100644
index 0000000..a95f818
--- /dev/null
+++ b/src/utils/areaData/pcaUtils.ts
@@ -0,0 +1,38 @@
+import {areaList} from '@vant/area-data'
+import {freezeDeep} from "@/utils/common/compUtils";
+
+// 扁平化的省市区数据
+export const pcaa = freezeDeep(usePlatPcaaData())
+
+/**
+ * 获取扁平化的省市区数据
+ */
+function usePlatPcaaData() {
+  const {city_list: city, county_list: county, province_list: province} = areaList;
+  const dataMap = new Map<string, Recordable>()
+  const flatData: Recordable = {'86': province}
+  // 省
+  Object.keys(province).forEach((code) => {
+    flatData[code] = {}
+    dataMap.set(code.slice(0, 2), flatData[code])
+  })
+  // 市区
+  Object.keys(city).forEach((code) => {
+    flatData[code] = {}
+    dataMap.set(code.slice(0, 4), flatData[code])
+    // 填充上一级
+    const getProvince = dataMap.get(code.slice(0, 2))
+    if (getProvince) {
+      getProvince[code] = city[code]
+    }
+  });
+  // 县
+  Object.keys(county).forEach((code) => {
+    // 填充上一级
+    const getCity = dataMap.get(code.slice(0, 4))
+    if (getCity) {
+      getCity[code] = county[code]
+    }
+  });
+  return flatData
+}
\ No newline at end of file
diff --git a/src/utils/auth/index.ts b/src/utils/auth/index.ts
new file mode 100644
index 0000000..95d79b7
--- /dev/null
+++ b/src/utils/auth/index.ts
@@ -0,0 +1,80 @@
+import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
+import projectSetting from '/@/settings/projectSetting';
+import { TOKEN_KEY, LOGIN_INFO_KEY, TENANT_ID } from '/@/enums/cacheEnum';
+
+const { permissionCacheType } = projectSetting;
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+
+/**
+ * 获取token
+ */
+export function getToken() {
+  return getAuthCache<string>(TOKEN_KEY);
+}
+/**
+ * 获取登录信息
+ */
+export function getLoginBackInfo() {
+  return getAuthCache(LOGIN_INFO_KEY);
+}
+/**
+ * 获取租户id
+ */
+export function getTenantId() {
+  return getAuthCache<string>(TENANT_ID);
+}
+
+export function getAuthCache<T>(key: BasicKeys) {
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
+  return fn(key) as T;
+}
+
+export function setAuthCache(key: BasicKeys, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+  return fn(key, value, true);
+}
+
+/**
+ * 设置动态key
+ * @param key
+ * @param value
+ */
+export function setCacheByDynKey(key, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+  return fn(key, value, true);
+}
+
+/**
+ * 获取动态key
+ * @param key
+ */
+export function getCacheByDynKey<T>(key) {
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
+  return fn(key) as T;
+}
+
+/**
+ * 移除动态key
+ * @param key
+ */
+export function removeCacheByDynKey<T>(key) {
+  const fn = isLocal ? Persistent.removeLocal : Persistent.removeSession;
+  return fn(key) as T;
+}
+/**
+ * 移除缓存中的某个属性
+ * @param key
+ * @update:移除缓存中的某个属性
+ * @updateBy:lsq
+ * @updateDate:2021-09-07
+ */
+export function removeAuthCache<T>(key: BasicKeys) {
+  const fn = isLocal ? Persistent.removeLocal : Persistent.removeSession;
+  return fn(key) as T;
+}
+
+export function clearAuthCache(immediate = true) {
+  const fn = isLocal ? Persistent.clearLocal : Persistent.clearSession;
+  return fn(immediate);
+}
diff --git a/src/utils/bem.ts b/src/utils/bem.ts
new file mode 100644
index 0000000..7dcadbc
--- /dev/null
+++ b/src/utils/bem.ts
@@ -0,0 +1,52 @@
+import { prefixCls } from '/@/settings/designSetting';
+
+type Mod = string | { [key: string]: any };
+type Mods = Mod | Mod[];
+
+export type BEM = ReturnType<typeof createBEM>;
+
+function genBem(name: string, mods?: Mods): string {
+  if (!mods) {
+    return '';
+  }
+
+  if (typeof mods === 'string') {
+    return ` ${name}--${mods}`;
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.reduce<string>((ret, item) => ret + genBem(name, item), '');
+  }
+
+  return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), '');
+}
+
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+ */
+export function buildBEM(name: string) {
+  return (el?: Mods, mods?: Mods): Mods => {
+    if (el && typeof el !== 'string') {
+      mods = el;
+      el = '';
+    }
+
+    el = el ? `${name}__${el}` : name;
+
+    return `${el}${genBem(el, mods)}`;
+  };
+}
+
+export function createBEM(name: string) {
+  return [buildBEM(`${prefixCls}-${name}`)];
+}
+
+export function createNamespace(name: string) {
+  const prefixedName = `${prefixCls}-${name}`;
+  return [prefixedName, buildBEM(prefixedName)] as const;
+}
diff --git a/src/utils/browser.js b/src/utils/browser.js
new file mode 100644
index 0000000..9765f94
--- /dev/null
+++ b/src/utils/browser.js
@@ -0,0 +1,37 @@
+//判断是否IE<11浏览器
+export function isIE() {
+  return navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1;
+}
+
+export function isIE11() {
+  return navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1;
+}
+
+//判断是否IE的Edge浏览器
+export function isEdge() {
+  return navigator.userAgent.indexOf('Edge') > -1 && !isIE();
+}
+
+export function getIEVersion() {
+  let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  let isIE = isIE();
+  let isIE11 = isIE11();
+  let isEdge = isEdge();
+
+  if (isIE) {
+    let reIE = new RegExp('MSIE (\\d+\\.\\d+);');
+    reIE.test(userAgent);
+    let fIEVersion = parseFloat(RegExp['$1']);
+    if (fIEVersion === 7 || fIEVersion === 8 || fIEVersion === 9 || fIEVersion === 10) {
+      return fIEVersion;
+    } else {
+      return 6; //IE版本<7
+    }
+  } else if (isEdge) {
+    return 'edge';
+  } else if (isIE11) {
+    return 11;
+  } else {
+    return -1;
+  }
+}
diff --git a/src/utils/cache/index.ts b/src/utils/cache/index.ts
new file mode 100644
index 0000000..2004c66
--- /dev/null
+++ b/src/utils/cache/index.ts
@@ -0,0 +1,32 @@
+import { getStorageShortName } from '/@/utils/env';
+import { createStorage as create, CreateStorageParams } from './storageCache';
+import { enableStorageEncryption } from '/@/settings/encryptionSetting';
+import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
+
+export type Options = Partial<CreateStorageParams>;
+
+const createOptions = (storage: Storage, options: Options = {}): Options => {
+  return {
+    // No encryption in debug mode
+    hasEncrypt: enableStorageEncryption,
+    storage,
+    prefixKey: getStorageShortName(),
+    ...options,
+  };
+};
+
+export const WebStorage = create(createOptions(sessionStorage));
+
+export const createStorage = (storage: Storage = sessionStorage, options: Options = {}) => {
+  return create(createOptions(storage, options));
+};
+
+export const createSessionStorage = (options: Options = {}) => {
+  return createStorage(sessionStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export const createLocalStorage = (options: Options = {}) => {
+  return createStorage(localStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export default WebStorage;
diff --git a/src/utils/cache/memory.ts b/src/utils/cache/memory.ts
new file mode 100644
index 0000000..a4d89f0
--- /dev/null
+++ b/src/utils/cache/memory.ts
@@ -0,0 +1,109 @@
+import { TOKEN_KEY, ROLES_KEY, USER_INFO_KEY, DB_DICT_DATA_KEY, TENANT_ID, LOGIN_INFO_KEY, PROJ_CFG_KEY } from '/@/enums/cacheEnum';
+import { omit } from 'lodash-es';
+
+export interface Cache<V = any> {
+  value?: V;
+  timeoutId?: ReturnType<typeof setTimeout>;
+  time?: number;
+  alive?: number;
+}
+
+const NOT_ALIVE = 0;
+
+export class Memory<T = any, V = any> {
+  private cache: { [key in keyof T]?: Cache<V> } = {};
+  private alive: number;
+
+  constructor(alive = NOT_ALIVE) {
+    // Unit second
+    this.alive = alive * 1000;
+  }
+
+  get getCache() {
+    return this.cache;
+  }
+
+  setCache(cache) {
+    this.cache = cache;
+  }
+
+  // get<K extends keyof T>(key: K) {
+  //   const item = this.getItem(key);
+  //   const time = item?.time;
+  //   if (!isNullOrUnDef(time) && time < new Date().getTime()) {
+  //     this.remove(key);
+  //   }
+  //   return item?.value ?? undefined;
+  // }
+
+  get<K extends keyof T>(key: K) {
+    return this.cache[key];
+  }
+
+  set<K extends keyof T>(key: K, value: V, expires?: number) {
+    let item = this.get(key);
+
+    if (!expires || (expires as number) <= 0) {
+      expires = this.alive;
+    }
+    if (item) {
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+        item.timeoutId = undefined;
+      }
+      item.value = value;
+    } else {
+      item = { value, alive: expires };
+      this.cache[key] = item;
+    }
+
+    if (!expires) {
+      return value;
+    }
+    const now = new Date().getTime();
+    item.time = now + this.alive;
+    item.timeoutId = setTimeout(
+      () => {
+        this.remove(key);
+      },
+      expires > now ? expires - now : expires
+    );
+
+    return value;
+  }
+
+  remove<K extends keyof T>(key: K) {
+    const item = this.get(key);
+    Reflect.deleteProperty(this.cache, key);
+    if (item) {
+      clearTimeout(item.timeoutId!);
+      return item.value;
+    }
+  }
+
+  resetCache(cache: { [K in keyof T]: Cache }) {
+    Object.keys(cache).forEach((key) => {
+      const k = key as any as keyof T;
+      const item = cache[k];
+      if (item && item.time) {
+        const now = new Date().getTime();
+        const expire = item.time;
+        if (expire > now) {
+          this.set(k, item.value, expire);
+        }
+      }
+    });
+  }
+
+  clear() {
+    console.log('------clear------进入clear方法');
+    Object.keys(this.cache).forEach((key) => {
+      const item = this.cache[key];
+      item.timeoutId && clearTimeout(item.timeoutId);
+    });
+    // 代码逻辑说明: 不删除登录用户的租户id，其他缓存信息都清除----
+    this.cache = {
+      ...omit(this.cache, [TOKEN_KEY, USER_INFO_KEY, ROLES_KEY, DB_DICT_DATA_KEY, TENANT_ID, LOGIN_INFO_KEY, PROJ_CFG_KEY]),
+    };
+  }
+}
diff --git a/src/utils/cache/persistent.ts b/src/utils/cache/persistent.ts
new file mode 100644
index 0000000..a89b4f9
--- /dev/null
+++ b/src/utils/cache/persistent.ts
@@ -0,0 +1,148 @@
+import type { LockInfo, UserInfo, LoginInfo } from '/#/store';
+import type { ProjectConfig } from '/#/config';
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
+import { Memory } from './memory';
+import {
+  TOKEN_KEY,
+  USER_INFO_KEY,
+  ROLES_KEY,
+  LOCK_INFO_KEY,
+  PROJ_CFG_KEY,
+  APP_LOCAL_CACHE_KEY,
+  APP_SESSION_CACHE_KEY,
+  MULTIPLE_TABS_KEY,
+  DB_DICT_DATA_KEY,
+  TENANT_ID,
+  LOGIN_INFO_KEY,
+  OAUTH2_THIRD_LOGIN_TENANT_ID,
+} from '/@/enums/cacheEnum';
+import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
+import { toRaw } from 'vue';
+import { pick, omit } from 'lodash-es';
+import { PageEnum } from '/@/enums/pageEnum';
+import { router } from '/@/router';
+
+interface BasicStore {
+  [TOKEN_KEY]: string | number | null | undefined;
+  [USER_INFO_KEY]: UserInfo;
+  [ROLES_KEY]: string[];
+  [LOCK_INFO_KEY]: LockInfo;
+  [PROJ_CFG_KEY]: ProjectConfig;
+  [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
+  [DB_DICT_DATA_KEY]: string;
+  [TENANT_ID]: string;
+  [LOGIN_INFO_KEY]: LoginInfo;
+  [OAUTH2_THIRD_LOGIN_TENANT_ID]: string
+}
+
+type LocalStore = BasicStore;
+
+type SessionStore = BasicStore;
+
+export type BasicKeys = keyof BasicStore;
+type LocalKeys = keyof LocalStore;
+type SessionKeys = keyof SessionStore;
+
+const ls = createLocalStorage();
+const ss = createSessionStorage();
+
+const localMemory = new Memory(DEFAULT_CACHE_TIME);
+const sessionMemory = new Memory(DEFAULT_CACHE_TIME);
+
+function initPersistentMemory() {
+  const localCache = ls.get(APP_LOCAL_CACHE_KEY);
+  const sessionCache = ss.get(APP_SESSION_CACHE_KEY);
+  localCache && localMemory.resetCache(localCache);
+  sessionCache && sessionMemory.resetCache(sessionCache);
+}
+
+export class Persistent {
+  static getLocal<T>(key: LocalKeys) {
+    // 代码逻辑说明: token过期退出重新登录，online菜单还是提示token过期----------
+    const globalCache = ls.get(APP_LOCAL_CACHE_KEY);
+    // 代码逻辑说明: 【issues/7250】自动锁屏无法解锁
+    if (globalCache && router?.currentRoute?.value.path !== PageEnum.BASE_LOGIN) {
+      localMemory.setCache(globalCache);
+    }
+    return localMemory.get(key)?.value as Nullable<T>;
+  }
+
+  static setLocal(key: LocalKeys, value: LocalStore[LocalKeys], immediate = false): void {
+    localMemory.set(key, toRaw(value));
+    immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+  }
+
+  static removeLocal(key: LocalKeys, immediate = false): void {
+    localMemory.remove(key);
+    immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+  }
+
+  static clearLocal(immediate = false): void {
+    localMemory.clear();
+    immediate && ls.clear();
+  }
+
+  static getSession<T>(key: SessionKeys) {
+    return sessionMemory.get(key)?.value as Nullable<T>;
+  }
+
+  static setSession(key: SessionKeys, value: SessionStore[SessionKeys], immediate = false): void {
+    sessionMemory.set(key, toRaw(value));
+    immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+  }
+
+  static removeSession(key: SessionKeys, immediate = false): void {
+    sessionMemory.remove(key);
+    immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+  }
+  static clearSession(immediate = false): void {
+    sessionMemory.clear();
+    immediate && ss.clear();
+  }
+
+  static clearAll(immediate = false) {
+    sessionMemory.clear();
+    localMemory.clear();
+    if (immediate) {
+      ls.clear();
+      ss.clear();
+    }
+  }
+}
+
+window.addEventListener('beforeunload', function () {
+  // TOKEN_KEY 在登录或注销时已经写入到storage了，此处为了解决同时打开多个窗口时token不同步的问题
+  // LOCK_INFO_KEY 在锁屏和解锁时写入，此处也不应修改
+  ls.set(APP_LOCAL_CACHE_KEY, {
+    ...omit(localMemory.getCache, LOCK_INFO_KEY),
+    ...pick(ls.get(APP_LOCAL_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+  });
+  ss.set(APP_SESSION_CACHE_KEY, {
+    ...omit(sessionMemory.getCache, LOCK_INFO_KEY),
+    ...pick(ss.get(APP_SESSION_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+  });
+});
+
+function storageChange(e: any) {
+  const { key, newValue, oldValue } = e;
+
+  if (!key) {
+    Persistent.clearAll();
+    return;
+  }
+
+  if (!!newValue && !!oldValue) {
+    if (APP_LOCAL_CACHE_KEY === key) {
+      Persistent.clearLocal();
+    }
+    if (APP_SESSION_CACHE_KEY === key) {
+      Persistent.clearSession();
+    }
+  }
+}
+
+window.addEventListener('storage', storageChange);
+
+initPersistentMemory();
diff --git a/src/utils/cache/storageCache.ts b/src/utils/cache/storageCache.ts
new file mode 100644
index 0000000..faa7acd
--- /dev/null
+++ b/src/utils/cache/storageCache.ts
@@ -0,0 +1,112 @@
+import { cacheCipher } from '/@/settings/encryptionSetting';
+
+import type { EncryptionParams } from '/@/utils/cipher';
+
+import { AesEncryption } from '/@/utils/cipher';
+
+import { isNullOrUnDef } from '/@/utils/is';
+
+export interface CreateStorageParams extends EncryptionParams {
+  prefixKey: string;
+  storage: Storage;
+  hasEncrypt: boolean;
+  timeout?: Nullable<number>;
+}
+export const createStorage = ({
+  prefixKey = '',
+  storage = sessionStorage,
+  key = cacheCipher.key,
+  iv = cacheCipher.iv,
+  timeout = null,
+  hasEncrypt = true,
+}: Partial<CreateStorageParams> = {}) => {
+  if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
+    throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
+  }
+
+  const encryption = new AesEncryption({ key, iv });
+
+  /**
+   *Cache class
+   *Construction parameters can be passed into sessionStorage, localStorage,
+   * @class Cache
+   * @example
+   */
+  const WebStorage = class WebStorage {
+    private storage: Storage;
+    private prefixKey?: string;
+    private encryption: AesEncryption;
+    private hasEncrypt: boolean;
+    /**
+     *
+     * @param {*} storage
+     */
+    constructor() {
+      this.storage = storage;
+      this.prefixKey = prefixKey;
+      this.encryption = encryption;
+      this.hasEncrypt = hasEncrypt;
+    }
+
+    private getKey(key: string) {
+      return `${this.prefixKey}${key}`.toUpperCase();
+    }
+
+    /**
+     *
+     *  Set cache
+     * @param {string} key
+     * @param {*} value
+     * @expire Expiration time in seconds
+     * @memberof Cache
+     */
+    set(key: string, value: any, expire: number | null = timeout) {
+      const stringData = JSON.stringify({
+        value,
+        time: Date.now(),
+        expire: !isNullOrUnDef(expire) ? new Date().getTime() + expire * 1000 : null,
+      });
+      const stringifyValue = this.hasEncrypt ? this.encryption.encryptByAES(stringData) : stringData;
+      this.storage.setItem(this.getKey(key), stringifyValue);
+    }
+
+    /**
+     *Read cache
+     * @param {string} key
+     * @memberof Cache
+     */
+    get(key: string, def: any = null): any {
+      const val = this.storage.getItem(this.getKey(key));
+      if (!val) return def;
+
+      try {
+        const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
+        const data = JSON.parse(decVal);
+        const { value, expire } = data;
+        if (isNullOrUnDef(expire) || expire >= new Date().getTime()) {
+          return value;
+        }
+        this.remove(key);
+      } catch (e) {
+        return def;
+      }
+    }
+
+    /**
+     * Delete cache based on key
+     * @param {string} key
+     * @memberof Cache
+     */
+    remove(key: string) {
+      this.storage.removeItem(this.getKey(key));
+    }
+
+    /**
+     * Delete all caches of this instance
+     */
+    clear(): void {
+      this.storage.clear();
+    }
+  };
+  return new WebStorage();
+};
diff --git a/src/utils/cipher.ts b/src/utils/cipher.ts
new file mode 100644
index 0000000..8d0bb89
--- /dev/null
+++ b/src/utils/cipher.ts
@@ -0,0 +1,81 @@
+import { encrypt, decrypt } from 'crypto-js/aes';
+import { parse } from 'crypto-js/enc-utf8';
+import pkcs7 from 'crypto-js/pad-pkcs7';
+import ECB from 'crypto-js/mode-ecb';
+import md5 from 'crypto-js/md5';
+import UTF8 from 'crypto-js/enc-utf8';
+import Base64 from 'crypto-js/enc-base64';
+import CryptoJS from 'crypto-js';
+
+export interface EncryptionParams {
+  key: string;
+  iv: string;
+}
+
+export class AesEncryption {
+  private key;
+  private iv;
+
+  constructor(opt: Partial<EncryptionParams> = {}) {
+    const { key, iv } = opt;
+    if (key) {
+      this.key = parse(key);
+    }
+    if (iv) {
+      this.iv = parse(iv);
+    }
+  }
+
+  get getOptions() {
+    return {
+      mode: ECB,
+      padding: pkcs7,
+      iv: this.iv,
+    };
+  }
+
+  encryptByAES(cipherText: string) {
+    return encrypt(cipherText, this.key, this.getOptions).toString();
+  }
+
+  decryptByAES(cipherText: string) {
+    return decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
+  }
+}
+
+export function encryptByBase64(cipherText: string) {
+  return UTF8.parse(cipherText).toString(Base64);
+}
+
+export function decodeByBase64(cipherText: string) {
+  return Base64.parse(cipherText).toString(UTF8);
+}
+
+export function encryptByMd5(password: string) {
+  return md5(password).toString();
+}
+
+// ================== 密码加密相关 ==================
+// 密码加密统一使用 AES CBC 模式，前后端 key 和 iv 必须保持一致
+// AES_KEY 和 AES_IV 需与后端配置完全一致，否则加密/解密会失败
+// ================== 密码加密相关 ===========BEGIN=======
+
+// AES加密key和iv常量
+export const AES_KEY = '1234567890adbcde';
+export const AES_IV = '1234567890hjlkew';
+
+/**
+ * AES CBC 加密，使用全局常量 AES_KEY 和 AES_IV
+ * @param plainText 明文
+ * @returns 加密后的密文
+ */
+export function encryptAESCBC(plainText: string): string {
+  const key = parse(AES_KEY);
+  const iv = parse(AES_IV);
+  return encrypt(plainText, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: pkcs7
+  }).toString();
+}
+// ================== 密码加密相关 =============END=====
diff --git a/src/utils/color.ts b/src/utils/color.ts
new file mode 100644
index 0000000..5a07dfb
--- /dev/null
+++ b/src/utils/color.ts
@@ -0,0 +1,145 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export function isHexColor(color: string) {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
+  return reg.test(color);
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16);
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export function hexToRGB(hex: string) {
+  let sHex = hex.toLowerCase();
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#';
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
+      }
+      sHex = sColorNew;
+    }
+    const sColorChange: number[] = [];
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)));
+    }
+    return 'RGB(' + sColorChange.join(',') + ')';
+  }
+  return sHex;
+}
+
+export function colorIsDark(color: string) {
+  if (!isHexColor(color)) return;
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item));
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192;
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export function darken(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
+  amount = Math.trunc((255 * amount) / 100);
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(color.substring(2, 4), amount)}${subtractLight(
+    color.substring(4, 6),
+    amount
+  )}`;
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
+  amount = Math.trunc((255 * amount) / 100);
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(color.substring(2, 4), amount)}${addLight(color.substring(4, 6), amount)}`;
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount;
+  const c = cc > 255 ? 255 : cc;
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+function luminanace(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+function contrast(rgb1: string[], rgb2: number[]) {
+  return (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) / (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05);
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export function calculateBestTextColor(hexColor: string) {
+  const rgbColor = hexToRGB(hexColor.substring(1));
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
+}
+
+/**
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function subtractLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) - amount;
+  const c = cc < 0 ? 0 : cc;
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
+}
diff --git a/src/utils/common/compUtils.ts b/src/utils/common/compUtils.ts
new file mode 100644
index 0000000..0faab61
--- /dev/null
+++ b/src/utils/common/compUtils.ts
@@ -0,0 +1,781 @@
+import { useGlobSetting } from '/@/hooks/setting';
+import { merge, random } from 'lodash-es';
+import { isArray } from '/@/utils/is';
+import { FormSchema } from '/@/components/Form';
+import { h, reactive, ref } from "vue";
+import { getTenantId, getToken } from "/@/utils/auth";
+import { useUserStoreWithOut } from "/@/store/modules/user";
+import dayjs from 'dayjs';
+import Big from 'big.js';
+
+import { Modal } from "ant-design-vue";
+import { defHttp } from "@/utils/http/axios";
+import { useI18n } from "@/hooks/web/useI18n";
+import {$electron} from "@/electron";
+import {router} from "@/router";
+import {encryptByBase64} from "@/utils/cipher";
+//存放部门路径的数组
+const departNamePath = ref<Record<string, string>>({});
+
+const globSetting = useGlobSetting();
+const baseApiUrl = globSetting.domainUrl;
+/**
+ *  获取文件服务访问路径
+ * @param fileUrl 文件路径
+ * @param prefix(默认http)  文件路径前缀 http/https
+ */
+export const getFileAccessHttpUrl = (fileUrl, prefix = 'http') => {
+  let result = fileUrl;
+  try {
+    if (fileUrl && fileUrl.length > 0 && !fileUrl.startsWith(prefix)) {
+      //判断是否是数组格式
+      let isArray = fileUrl.indexOf('[') != -1;
+      if (!isArray) {
+        let prefix = `${baseApiUrl}/sys/common/static/`;
+        // 判断是否已包含前缀
+        if (!fileUrl.startsWith(prefix)) {
+          result = `${prefix}${fileUrl}`;
+        }
+      }
+    }
+  } catch (err) {}
+  return result;
+};
+/**
+ *  获取桌面端wps的文件服务访问路径
+ * @param fileUrl 文件路径
+ */
+export const getElectronFileUrl = (url) => {
+  let fileUrl: any = url;
+  if (url && $electron.isElectron()) {
+    fileUrl = router.resolve({path: '/onlinePreview', query: {url: encryptByBase64(getFileAccessHttpUrl(url))}}).href;
+  }
+  return fileUrl;
+};
+
+/**
+ * 触发 window.resize
+ */
+export function triggerWindowResizeEvent() {
+  let event: any = document.createEvent('HTMLEvents');
+  event.initEvent('resize', true, true);
+  event.eventType = 'message';
+  window.dispatchEvent(event);
+}
+
+/**
+ * 获取随机数
+ *  @param length 数字位数
+ */
+export const getRandom = (length: number = 1) => {
+  return '-' + parseInt(String(Math.random() * 10000 + 1), length);
+};
+
+/**
+ * 随机生成字符串
+ * @param length 字符串的长度
+ * @param chats 可选字符串区间（只会生成传入的字符串中的字符）
+ * @return string 生成的字符串
+ */
+export function randomString(length: number, chats?: string) {
+  if (!length) length = 1;
+  if (!chats) {
+    // noinspection SpellCheckingInspection
+    chats = '0123456789qwertyuioplkjhgfdsazxcvbnm';
+  }
+  let str = '';
+  for (let i = 0; i < length; i++) {
+    let num = random(0, chats.length - 1);
+    str += chats[num];
+  }
+  return str;
+}
+
+/**
+ * 将普通列表数据转化为tree结构
+ * @param array tree数据
+ * @param opt  配置参数
+ * @param startPid 父节点
+ */
+export const listToTree = (array, opt, startPid) => {
+  const obj = {
+    primaryKey: opt.primaryKey || 'key',
+    parentKey: opt.parentKey || 'parentId',
+    titleKey: opt.titleKey || 'title',
+    startPid: opt.startPid || '',
+    currentDept: opt.currentDept || 0,
+    maxDept: opt.maxDept || 100,
+    childKey: opt.childKey || 'children',
+  };
+  if (startPid) {
+    obj.startPid = startPid;
+  }
+  return toTree(array, obj.startPid, obj.currentDept, obj);
+};
+/**
+ *  递归构建tree
+ * @param list
+ * @param startPid
+ * @param currentDept
+ * @param opt
+ * @returns {Array}
+ */
+export const toTree = (array, startPid, currentDept, opt) => {
+  if (opt.maxDept < currentDept) {
+    return [];
+  }
+  let child = [];
+  if (array && array.length > 0) {
+    child = array
+      .map((item) => {
+        // 筛查符合条件的数据（主键 = startPid）
+        if (typeof item[opt.parentKey] !== 'undefined' && item[opt.parentKey] === startPid) {
+          // 满足条件则递归
+          const nextChild = toTree(array, item[opt.primaryKey], currentDept + 1, opt);
+          // 节点信息保存
+          if (nextChild.length > 0) {
+            item['isLeaf'] = false;
+            item[opt.childKey] = nextChild;
+          } else {
+            item['isLeaf'] = true;
+          }
+          item['title'] = item[opt.titleKey];
+          item['label'] = item[opt.titleKey];
+          item['key'] = item[opt.primaryKey];
+          item['value'] = item[opt.primaryKey];
+          return item;
+        }
+      })
+      .filter((item) => {
+        return item !== undefined;
+      });
+  }
+  return child;
+};
+
+/**
+ * 表格底部合计工具方法
+ * @param tableData 表格数据
+ * @param fieldKeys 要计算合计的列字段
+ */
+export function mapTableTotalSummary(tableData: Recordable[], fieldKeys: string[]) {
+  let totals: any = { _row: '合计', _index: '合计' };
+  fieldKeys.forEach((key) => {
+    totals[key] = tableData.reduce((prev, next) => {
+      // 代码逻辑说明: 【QQYUN-7891】PR 合计工具方法，转换为Nuber类型再计算
+      const value = Number(next[key]);
+      if (!Number.isNaN(value)) {
+        // 代码逻辑说明: 【issues/7830】合计小数计算精度
+        prev = Big(prev).plus(value).toString();
+      }
+      return prev;
+    }, 0);
+    // 代码逻辑说明: 【issues/7830】合计小数计算精度
+    totals[key] = +totals[key];
+  });
+  return totals;
+}
+
+/**
+ * 简单实现防抖方法
+ *
+ * 防抖(debounce)函数在第一次触发给定的函数时，不立即执行函数，而是给出一个期限值(delay)，比如100ms。
+ * 如果100ms内再次执行函数，就重新开始计时，直到计时结束后再真正执行函数。
+ * 这样做的好处是如果短时间内大量触发同一事件，只会执行一次函数。
+ *
+ * @param fn 要防抖的函数
+ * @param delay 防抖的毫秒数
+ * @returns {Function}
+ */
+export function simpleDebounce(fn, delay = 100) {
+  let timer: any | null = null;
+  return function () {
+    let args = arguments;
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      // @ts-ignore
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+/**
+ * 日期格式化
+ * @param date 日期
+ * @param block 格式化字符串
+ */
+export function dateFormat(date, block) {
+  if (!date) {
+    return '';
+  }
+  let format = block || 'yyyy-MM-dd';
+  date = new Date(date);
+  const map = {
+    M: date.getMonth() + 1, // 月份
+    d: date.getDate(), // 日
+    h: date.getHours(), // 小时
+    m: date.getMinutes(), // 分
+    s: date.getSeconds(), // 秒
+    q: Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds(), // 毫秒
+  };
+  format = format.replace(/([yMdhmsqS])+/g, (all, t) => {
+    let v = map[t];
+    if (v !== undefined) {
+      if (all.length > 1) {
+        v = `0${v}`;
+        v = v.substr(v.length - 2);
+      }
+      return v;
+    } else if (t === 'y') {
+      return date
+        .getFullYear()
+        .toString()
+        .substr(4 - all.length);
+    }
+    return all;
+  });
+  return format;
+}
+
+/**
+ * 获取事件冒泡路径，兼容 IE11，Edge，Chrome，Firefox，Safari
+ * 目前使用的地方：JVxeTable Span模式
+ */
+export function getEventPath(event) {
+  let target = event.target;
+  let path = (event.composedPath && event.composedPath()) || event.path;
+
+  if (path != null) {
+    return path.indexOf(window) < 0 ? path.concat(window) : path;
+  }
+
+  if (target === window) {
+    return [window];
+  }
+
+  let getParents = (node, memo) => {
+    const parentNode = node.parentNode;
+
+    if (!parentNode) {
+      return memo;
+    } else {
+      return getParents(parentNode, memo.concat(parentNode));
+    }
+  };
+  return [target].concat(getParents(target, []), window);
+}
+
+/**
+ * 如果值不存在就 push 进数组，反之不处理
+ * @param array 要操作的数据
+ * @param value 要添加的值
+ * @param key 可空，如果比较的是对象，可能存在地址不一样但值实际上是一样的情况，可以传此字段判断对象中唯一的字段，例如 id。不传则直接比较实际值
+ * @returns {boolean} 成功 push 返回 true，不处理返回 false
+ */
+export function pushIfNotExist(array, value, key?) {
+  for (let item of array) {
+    if (key && item[key] === value[key]) {
+      return false;
+    } else if (item === value) {
+      return false;
+    }
+  }
+  array.push(value);
+  return true;
+}
+/**
+ * 过滤对象中为空的属性
+ * @param obj
+ * @returns {*}
+ */
+export function filterObj(obj) {
+  if (!(typeof obj == 'object')) {
+    return;
+  }
+
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
+      delete obj[key];
+    }
+  }
+  return obj;
+}
+
+/**
+ * 下划线转驼峰
+ * @param string
+ */
+export function underLine2CamelCase(string: string) {
+  return string.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+/**
+ * 查找树结构
+ * @param treeList
+ * @param fn 查找方法
+ * @param childrenKey
+ */
+export function findTree(treeList: any[], fn: Fn, childrenKey = 'children') {
+  for (let i = 0; i < treeList.length; i++) {
+    let item = treeList[i];
+    if (fn(item, i, treeList)) {
+      return item;
+    }
+    let children = item[childrenKey];
+    if (isArray(children)) {
+      let findResult = findTree(children, fn, childrenKey);
+      if (findResult) {
+        return findResult;
+      }
+    }
+  }
+  return null;
+}
+
+/** 获取 mapFormSchema 方法 */
+export function bindMapFormSchema<T>(spanMap, spanTypeDef: T) {
+  return function (s: FormSchema, spanType: T = spanTypeDef) {
+    return merge(
+      {
+        disabledLabelWidth: true,
+      } as FormSchema,
+      spanMap[spanType],
+      s
+    );
+  };
+}
+
+/**
+ * 字符串是否为null或null字符串
+ * @param str
+ * @return {boolean}
+ */
+export function stringIsNull(str) {
+  // 两个 == 可以同时判断 null 和 undefined
+  return str == null || str === 'null' || str === 'undefined';
+}
+
+/**
+ * 【组件多了可能存在性能问题】获取弹窗div，将下拉框、日期等组件挂载到modal上，解决弹窗遮盖问题
+ * @param node
+ */
+export function getAutoScrollContainer(node: HTMLElement) {
+  let element: Nullable<HTMLElement> = node
+  while (element != null) {
+    if (element.classList.contains('scrollbar__view')) {
+      // 判断是否有滚动条
+      if (element.clientHeight < element.scrollHeight) {
+        // 有滚动条时，挂载到父级，解决滚动问题
+        return node.parentElement
+      } else {
+        // 无滚动条时，挂载到body上，解决下拉框遮盖问题
+        return document.body
+      }
+    } else {
+      element = element.parentElement
+    }
+  }
+  // 不在弹窗内，走默认逻辑
+  return node.parentElement
+}
+
+/**
+ * 判断子菜单是否全部隐藏
+ * @param menuTreeItem
+ */
+export  function checkChildrenHidden(menuTreeItem){
+  //是否是聚合路由
+  let alwaysShow=menuTreeItem.alwaysShow;
+  if(alwaysShow){
+    return false;
+  }
+  if(!menuTreeItem.children){
+    return false
+  }
+  return menuTreeItem.children?.find((item) => item.hideMenu == false) != null;
+}
+
+/**
+ * 计算文件大小
+ * @param fileSize
+ * @param unit
+ * @return 返回大小及后缀
+ */
+export function calculateFileSize(fileSize, unit?) {
+  let unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  if (unit && unit.length > 0) {
+    unitArr = unit;
+  }
+  let size = fileSize;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < unitArr.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  //保留两位小数，四舍五入
+  size = Math.round(size * 100) / 100;
+  return size + unitArr[unitIndex];
+}
+
+/**
+ * 获取上传header
+ */
+export function getHeaders() {
+  let tenantId = getTenantId();
+  return reactive({
+    'X-Access-Token': getToken(),
+    'X-Tenant-Id': tenantId ? tenantId : '0',
+  });
+}
+
+/** 根据表达式获取相应的用户信息 */
+export function getUserInfoByExpression(expression) {
+  if (!expression) {
+    return expression;
+  }
+  // 当前日期
+  if (expression === 'sys_date' || expression === 'sysDate') {
+    return dayjs().format('YYYY-MM-DD');
+  }
+  // 当前时间
+  if (expression === 'sys_time' || expression === 'sysTime') {
+    return dayjs().format('HH:mm:ss');
+  }
+  const userStore = useUserStoreWithOut();
+  let userInfo = userStore.getUserInfo;
+  if (userInfo) {
+    switch (expression) {
+      case 'sysUserId':
+        return userInfo.id;
+      // 当前登录用户登录账号
+      case 'sysUserCode':
+      case 'sys_user_code':
+        return userInfo.username;
+      // 当前登录用户真实名称
+      case 'sysUserName':
+        return userInfo.realname;
+      // 当前登录用户部门编号
+      case 'sysOrgCode':
+      case 'sys_org_code':
+        return userInfo.orgCode;
+    }
+  }
+  return expression;
+}
+
+/**
+ * 替换表达式（#{xxx}）为用户信息
+ * @param expression
+ */
+export function replaceUserInfoByExpression(expression: string | any[]) {
+  if (!expression) {
+    return expression;
+  }
+  const isString = typeof expression === 'string';
+  const isArray = Array.isArray(expression)
+  if (!isString && !isArray) {
+    return expression;
+  }
+  const reg = /#{(.*?)}/g;
+  const replace = (str) => {
+    if (typeof str !== 'string') {
+      return str;
+    }
+    let result = str.match(reg);
+    if (result && result.length > 0) {
+      result.forEach((item) => {
+        let userInfo = getUserInfoByExpression(item.substring(2, item.length - 1));
+        str = str.replace(item, userInfo);
+      });
+    }
+    return str;
+  };
+  // @ts-ignore
+  return isString ? replace(expression) : expression.map(replace);
+}
+
+/**
+ * 设置租户缓存，当租户退出的时候
+ * 
+ * @param tenantId
+ */
+export async function userExitChangeLoginTenantId(tenantId){
+  const userStore = useUserStoreWithOut();
+  //step 1 获取用户租户
+  const url = '/sys/tenant/getCurrentUserTenant'
+  let currentTenantId = null;
+  const data = await defHttp.get({ url });
+  if(data && data.list){
+    let arr = data.list;
+    if(arr.length>0){
+      //step 2.判断当前id是否存在用户租户中
+      let filterTenantId = arr.filter((item) => item.id == tenantId);
+      //存在说明不是退出的不是当前租户，还用用来的租户即可
+      if(filterTenantId && filterTenantId.length>0){
+        currentTenantId = tenantId;
+      }else{
+        //不存在默认第一个
+        currentTenantId = arr[0].id
+      }
+    }
+  }
+  let loginTenantId = getTenantId();
+  userStore.setTenant(currentTenantId);
+
+  //租户为空，说明没有租户了，需要刷新页面。或者当前租户和退出的租户一致则需要刷新浏览器
+  if(!currentTenantId || tenantId == loginTenantId){
+    window.location.reload();
+  }
+}
+
+/**
+ * 我的租户模块需要开启多租户提示
+ * 
+ * @param title 标题
+ */
+export function tenantSaasMessage(title){
+  let tenantId = getTenantId();
+  if(!tenantId){
+    Modal.confirm({
+      title:title,
+      content: '此菜单需要在多租户模式下使用，否则数据会出现混乱',
+      okText: '确认',
+      okType: 'danger',
+      // @ts-ignore
+      cancelButtonProps: { style: { display: 'none' } },
+    })
+  }
+}
+
+/**
+ * 判断日期和当前时间是否为同一天
+ * @param dateStr
+ */
+export function sameDay(dateStr) {
+  if (!dateStr) {
+    return false;
+  }
+  // 获取当前日期
+  let currentDate = new Date();
+  let currentDay = currentDate.getDate();
+  let currentMonth = currentDate.getMonth();
+  let currentYear = currentDate.getFullYear();
+
+  //创建另一个日期进行比较
+  let otherDate = new Date(dateStr);
+  let otherDay = otherDate.getDate();
+  let otherMonth = otherDate.getMonth();
+  let otherYear = otherDate.getFullYear();
+
+  //比较日期
+  if (currentDay === otherDay && currentMonth === otherMonth && currentYear === otherYear) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+
+/**
+ * 翻译菜单名称
+ * 2024-02-28
+ * liaozhiyang
+ * @param data
+ */
+export function translateTitle(data) {
+  if (data?.length) {
+    const { t } = useI18n();
+    data.forEach((item) => {
+      if (item.slotTitle) {
+        if (item.slotTitle.includes("t('") && t) {
+          item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+        }
+      }
+      if (item.children?.length) {
+        translateTitle(item.children);
+      }
+    });
+  }
+  return data;
+}
+
+/**
+ *
+ * 深度冻结对象
+ * @param obj Object or Array
+ */
+export function freezeDeep(obj: Recordable | Recordable[]) {
+  if (obj != null) {
+    if (Array.isArray(obj)) {
+      obj.forEach(item => freezeDeep(item))
+    } else if (typeof obj === 'object') {
+      Object.values(obj).forEach(value => {
+        freezeDeep(value)
+      })
+    }
+    Object.freeze(obj)
+  }
+  return obj
+}
+
+/**
+ * 获取父级名称
+ * 
+ * @param orgCode 当前部门的code
+ * @param label 当前默认显示的值
+ * @param depId depId
+ * @return 部门名称
+ */
+export async function getDepartPathNameByOrgCode(orgCode, label, depId){
+  if (orgCode) {
+    depId = "";
+  }
+  let result = await defHttp.get({ url: "/sys/sysDepart/getDepartPathNameByOrgCode", params:{ orgCode: orgCode, depId: depId } }, { isTransformResponse: false });
+  if (result.success) {
+    return result.result;
+  }
+  return label;
+}
+
+/**
+ * 获取部门路径名称
+ * @param title
+ * @param key 部门code或者部门id
+ * @param izOrgCode 是否是机构编码
+ */
+export function getDepartPathName(title,key,izOrgCode) {
+  if (departNamePath.value[key]) {
+    return departNamePath.value[key];
+  }
+  if(izOrgCode){
+    getDepartPathNameByOrgCode(key, title, "").then(result => {
+      departNamePath.value[key] = result;
+    });
+  }else{
+    getDepartPathNameByOrgCode("", title, key).then(result => {
+      departNamePath.value[key] = result;
+    });
+  }
+
+}
+
+/**
+ * 获取多个部门路径名称
+ * @param title
+ * @param id
+ */
+export function getMultiDepartPathName(title,id) {
+  if(!id || id.length === 0){
+    return '';
+  }
+  let postIds:any = "";
+  if(id instanceof Array){
+    postIds = id;
+  } else {
+    postIds = id.split(",")
+  }
+  let postNames = "";
+  postIds.forEach((postId)=>{
+    postNames += getDepartPathName(title,postId,false) + ",";
+  });
+  if(postNames.endsWith(",")){
+    postNames = postNames.substring(0,postNames.length - 1);
+  }
+  return postNames;
+}
+
+/**
+ * 获取部门名称 返回h
+ * @param departNamePath 部门路径
+ */
+export function getDepartName(departNamePath) {
+  if(departNamePath){
+    let names = departNamePath.split(",");
+    let textElements:any = [];
+    for (let i = 0; i < names.length; i++) {
+      textElements.push(h("p", { style: { marginBottom: '2px'} }, names[i]));
+    }
+    // 组合完整内容字符串用于title属性
+    const fullContent = names.join('\n');
+    return h("div",{
+      style: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: 'vertical',
+        lineHeight: '1.5em',
+        maxHeight: '4.5em',
+        width: '100%',
+        whiteSpace: 'normal'
+      },
+      // 鼠标悬停显示全部内容
+      title: fullContent
+    },textElements)
+  }
+  return departNamePath;
+}
+
+/**
+ * 获取文件表
+ * @param fileUrl
+ */
+export function getFileIcon(fileUrl) {
+  if(!fileUrl) {
+    return 'ant-design:file-outlined';
+  }
+  const suffix = fileUrl.substring(fileUrl.lastIndexOf('.') + 1).toLowerCase();
+  if(['xls','xlsx','csv'].includes(suffix)) {
+    return 'ant-design:file-excel-filled';
+  }
+  if(['doc','docx'].includes(suffix)) {
+    return 'ant-design:file-word-filled';
+  }
+  if(['pdf'].includes(suffix)) {
+    return 'ant-design:file-pdf-filled';
+  }
+  if(['ppt','pptx'].includes(suffix)) {
+    return 'ant-design:file-ppt-filled';
+  }
+  if(['txt'].includes(suffix)) {
+    return 'ant-design:file-text-filled';
+  }
+  if(['md'].includes(suffix)) {
+    return 'ant-design:file-markdown-filled';
+  }
+  return 'ant-design:file-unknown-filled';
+}
+
+/**
+ * 获取文件图标颜色
+ *
+ * @param fileUrl
+ */
+export function getFileIconColor(fileUrl) {
+  if(!fileUrl) {
+    return '#999';
+  }
+  const suffix = fileUrl.substring(fileUrl.lastIndexOf('.') + 1).toLowerCase();
+  if(['xls','xlsx','csv'].includes(suffix)) {
+    return '#52c41a';
+  }
+  if(['doc','docx'].includes(suffix)) {
+    return '#1890ff';
+  }
+  if(['pdf'].includes(suffix)) {
+    return '#ff4d4f';
+  }
+  if(['ppt','pptx'].includes(suffix)) {
+    return '#fa8c16';
+  }
+  if(['txt'].includes(suffix)) {
+    return '#666';
+  }
+  if(['md'].includes(suffix)) {
+    return '#000';
+  }
+  return '#999';
+}
diff --git a/src/utils/common/renderUtils.ts b/src/utils/common/renderUtils.ts
new file mode 100644
index 0000000..dbd522a
--- /dev/null
+++ b/src/utils/common/renderUtils.ts
@@ -0,0 +1,179 @@
+import { h } from 'vue';
+import { Avatar, Tag, Tooltip, Image } from 'ant-design-vue';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { Tinymce } from '/@/components/Tinymce';
+import Icon from '/@/components/Icon';
+import { getDictItemsByCode } from '/@/utils/dict/index';
+import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
+import { isEmpty } from '/@/utils/is';
+import { useMessage } from '/@/hooks/web/useMessage';
+const { createMessage } = useMessage();
+
+const render = {
+  /**
+   * 渲染列表头像
+   */
+  renderAvatar: ({ record }) => {
+    if (record.avatar) {
+      let avatarList = record.avatar.split(',');
+      return h(
+        'span',
+        avatarList.map((item) => {
+          return h(Avatar, {
+            src: getFileAccessHttpUrl(item),
+            shape: 'square',
+            size: 'default',
+            style: { marginRight: '5px' },
+          });
+        })
+      );
+    } else {
+      return h(
+        Avatar,
+        { shape: 'square', size: 'default' },
+        {
+          icon: () => h(Icon, { icon: 'ant-design:file-image-outlined', size: 30 }),
+        }
+      );
+    }
+  },
+  /**
+   * 根据字典编码 渲染
+   * @param v 值
+   * @param code 字典编码
+   * @param renderTag 是否使用tag渲染
+   */
+  renderDict: (v, code, renderTag = false) => {
+    let text = '';
+    let color = '';
+    let array = getDictItemsByCode(code) || [];
+    let obj = array.filter((item) => {
+      return item.value == v;
+    });
+    if (obj.length > 0) {
+      text = obj[0].text;
+      color = obj[0].color;
+    }
+    //【jeecgboot-vue3/issues/903】render.renderDict使用tag渲染报警告问题 #903
+    return isEmpty(text) || !renderTag ? h('span', text) : h(Tag,{ color }, () => text);
+  },
+  /**
+   * 渲染图片
+   * @param text
+   */
+  renderImage: ({ text }) => {
+    if (!text) {
+      return h(Image, {
+        width: 30,
+        height: 30,
+        src: '',
+        fallback:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==',
+      });
+    }
+    let avatarList = text.split(',');
+    return h(
+      'span',
+      avatarList.map((item) => {
+        return h(Image, {
+          src: getFileAccessHttpUrl(item),
+          width: 30,
+          height: 30,
+          style: { marginRight: '5px' },
+          previewMask: () => {
+            return h(Icon, { icon: 'ant-design:eye-outlined', size: 20 });
+          },
+        });
+      })
+    );
+  },
+  /**
+   * 渲染 Tooltip
+   * @param text
+   * @param len
+   */
+  renderTip: (text, len = 20) => {
+    if (text) {
+      let showText = text + '';
+      if (showText.length > len) {
+        showText = showText.substr(0, len) + '...';
+      }
+      return h(Tooltip, { title: text }, () => showText);
+    }
+    return text;
+  },
+  /**
+   * 渲染a标签
+   * @param text
+   */
+  renderHref: ({ text }) => {
+    if (!text) {
+      return '';
+    }
+    const len = 20;
+    if (text.length > len) {
+      text = text.substr(0, len);
+    }
+    return h('a', { href: text, target: '_blank' }, text);
+  },
+  /**
+   * 根据字典渲染
+   * @param v
+   * @param array
+   */
+  renderDictNative: (v, array, renderTag = false) => {
+    let text = '';
+    let color = '';
+    let obj = array.filter((item) => {
+      return item.value == v;
+    });
+    if (obj.length > 0) {
+      text = obj[0].label;
+      color = obj[0].color;
+    }
+    return isEmpty(text) || !renderTag ? h('span', text) : h(Tag, { color }, () => text);
+  },
+  /**
+   * 渲染富文本
+   */
+  renderTinymce: ({ model, field }) => {
+    return h(Tinymce, {
+      showImageUpload: false,
+      height: 300,
+      value: model[field],
+      onChange: (value: string) => {
+        model[field] = value;
+      },
+    });
+  },
+
+  renderSwitch: (text, arr) => {
+    return text ? filterMultiDictText(arr, text) : '';
+  },
+  renderCategoryTree: (text, code) => {
+    let array = getDictItemsByCode(code);
+    return filterMultiDictText(array, text);
+  },
+  renderTag(text, color) {
+    return isEmpty(text) ? h('span', text) : h(Tag, { color }, () => text);
+  },
+};
+
+/**
+ * 文件下载
+ */
+function downloadFile(url) {
+  if (!url) {
+    createMessage.warning('未知的文件');
+    return;
+  }
+  if (url.indexOf(',') > 0) {
+    url = url.substring(0, url.indexOf(','));
+  }
+  url = getFileAccessHttpUrl(url.split(',')[0]);
+  if (url) {
+    window.open(url);
+  }
+}
+
+export { render, downloadFile };
diff --git a/src/utils/common/vxeUtils.ts b/src/utils/common/vxeUtils.ts
new file mode 100644
index 0000000..3c83f27
--- /dev/null
+++ b/src/utils/common/vxeUtils.ts
@@ -0,0 +1,103 @@
+import { getValueType } from '/@/utils';
+
+export const VALIDATE_FAILED = Symbol();
+/**
+ * 一次性验证主表单和所有的次表单(新版本)
+ * @param form 主表单 form 对象
+ * @param cases 接收一个数组，每项都是一个JEditableTable实例
+ * @returns {Promise<any>}
+ */
+export async function validateFormModelAndTables(validate, formData, cases, props, autoJumpTab?) {
+  if (!(validate && typeof validate === 'function')) {
+    throw `validate 参数需要的是一个方法，而传入的却是${typeof validate}`;
+  }
+  let dataMap = {};
+  let values = await new Promise((resolve, reject) => {
+    // 验证主表表单
+    validate()
+      .then(() => {
+        // 代码逻辑说明: [VUEN-912]一对多用户组件（所有风格，单表和树没问题）保存报错------------
+        for (let data in formData) {
+          //如果该数据是数组
+          if (formData[data] instanceof Array) {
+            let valueType = getValueType(props, data);
+            //如果是字符串类型的需要变成以逗号分割的字符串
+            if (valueType === 'string') {
+              formData[data] = formData[data].join(',');
+            }
+          }
+        }
+        resolve(formData);
+      })
+      // 代码逻辑说明: 【TV360X-1064】非原生提交表单滚动校验没通过的项---
+      .catch(({ errorFields }) => {
+        reject({ error: VALIDATE_FAILED, index: 0, errorFields: errorFields });
+      });
+  });
+  Object.assign(dataMap, { formValue: values });
+  // 验证所有子表的表单
+  let subData = await validateTables(cases, autoJumpTab);
+  // 合并最终数据
+  dataMap = Object.assign(dataMap, { tablesValue: subData });
+  return dataMap;
+}
+/**
+ * 验证并获取一个或多个表格的所有值
+ * @param cases 接收一个数组，每项都是一个JEditableTable实例
+ * @param autoJumpTab 是否自动跳转到报错的tab
+ */
+export function validateTables(cases, autoJumpTab = true) {
+  if (!(cases instanceof Array)) {
+    throw `'validateTables'函数的'cases'参数需要的是一个数组，而传入的却是${typeof cases}`;
+  }
+  return new Promise((resolve, reject) => {
+    let tablesData: any = [];
+    let index = 0;
+    if (!cases || cases.length === 0) {
+      resolve(tablesData);
+    }
+    (function next() {
+      let vm = cases[index];
+      vm.value.validateTable().then((errMap) => {
+        // 校验通过
+        if (!errMap) {
+          tablesData[index] = { tableData: vm.value.getTableData() };
+          // 判断校验是否全部完成，完成返回成功，否则继续进行下一步校验
+          if (++index === cases.length) {
+            resolve(tablesData);
+          } else next();
+        } else {
+          // 尝试获取tabKey，如果在ATab组件内即可获取
+          let paneKey;
+          let tabPane = getVmParentByName(vm.value, 'ATabPane');
+          if (tabPane) {
+            paneKey = tabPane.$.vnode.key;
+            // 自动跳转到该表格
+            if (autoJumpTab) {
+              let tabs = getVmParentByName(tabPane, 'Tabs');
+              tabs && tabs.setActiveKey && tabs.setActiveKey(paneKey);
+            }
+          }
+          // 出现未验证通过的表单，不再进行下一步校验，直接返回失败
+          // 代码逻辑说明: TV360X-478 一对多tab，校验未通过时，tab没有跳转
+          reject({ error: VALIDATE_FAILED, index, paneKey, errMap, subIndex: index });
+        }
+      });
+    })();
+  });
+}
+
+export function getVmParentByName(vm, name) {
+  let parent = vm.$parent;
+  if (parent && parent.$options) {
+    if (parent.$options.name === name) {
+      return parent;
+    } else {
+      let res = getVmParentByName(parent, name);
+      if (res) {
+        return res;
+      }
+    }
+  }
+  return null;
+}
diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts
new file mode 100644
index 0000000..687eb25
--- /dev/null
+++ b/src/utils/dateUtil.ts
@@ -0,0 +1,17 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+import dayjs from 'dayjs';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const DATE_FORMAT = 'YYYY-MM-DD';
+
+export function formatToDateTime(date: dayjs.Dayjs | undefined = undefined, format = DATE_TIME_FORMAT): string {
+  return dayjs(date).format(format);
+}
+
+export function formatToDate(date: dayjs.Dayjs | undefined = undefined, format = DATE_FORMAT): string {
+  return dayjs(date).format(format);
+}
+
+export const dateUtil = dayjs;
diff --git a/src/utils/desform/customExpression.ts b/src/utils/desform/customExpression.ts
new file mode 100644
index 0000000..5359ba6
--- /dev/null
+++ b/src/utils/desform/customExpression.ts
@@ -0,0 +1,30 @@
+/*
+ *
+ * 这里填写用户自定义的表达式
+ * 可用在Online表单的默认值表达式中使用
+ * 需要外部使用的变量或方法一定要 export，否则无法识别
+ * 示例：
+ *   export const name = '张三'; // const 是常量
+ *   export let age = 17; // 看情况 export const 还是 let ，两者都可正常使用
+ *   export function content(arg) { // export 方法，可传参数，使用时要加括号，值一定要return回去，可以返回Promise
+ *     return 'content' + arg;
+ *   }
+ *   export const address = (arg) => content(arg) + ' | 北京市'; // export 箭头函数也可以
+ *
+ */
+
+/** 字段默认值官方示例：获取地址 */
+export function demoFieldDefVal_getAddress(arg) {
+  if (!arg) {
+    arg = '朝阳区';
+  }
+  return `北京市 ${arg}`;
+}
+
+/** 自定义JS函数示例 */
+export function sayHi(name) {
+  if (!name) {
+    name = '张三';
+  }
+  return `您好，我叫： ${name}`;
+}
diff --git a/src/utils/dict/DictColors.js b/src/utils/dict/DictColors.js
new file mode 100644
index 0000000..ae91da4
--- /dev/null
+++ b/src/utils/dict/DictColors.js
@@ -0,0 +1,65 @@
+const whiteColor = '#ffffff'
+const blackColor = '#666666'
+
+export const Colors = [
+  // 背景颜色，文字颜色
+  ['#2196F3', whiteColor],
+  ['#08C9C9', whiteColor],
+  ['#00C345', whiteColor],
+  ['#FAD714', whiteColor],
+  ['#FF9300', whiteColor],
+  ['#F52222', whiteColor],
+  ['#EB2F96', whiteColor],
+  ['#7500EA', whiteColor],
+  ['#2D46C4', whiteColor],
+  ['#484848', whiteColor],
+  // --------------------
+  ['#C9E6FC', blackColor],
+  ['#C3F2F2', blackColor],
+  ['#C2F1D2', blackColor],
+  ['#FEF6C6', blackColor],
+  ['#FFE5C2', blackColor],
+  ['#FDCACA', blackColor],
+  ['#FACDE6', blackColor],
+  ['#DEC2FA', blackColor],
+  ['#CCD2F1', blackColor],
+  ['#D3D3D3', blackColor],
+]
+
+export const NONE_COLOR = ['#e9e9e9', blackColor]
+
+/**
+ * 返回一个颜色迭代器，每次调用返回一个颜色，当颜色用完后，再从头开始
+ * @param {number} initIndex 初始颜色索引
+ * @returns {{getIndex: function, next: function}}
+ */
+export function getColorIterator(initIndex = 0) {
+  let index = initIndex;
+  if (index < 0 || index >= Colors.length) {
+    index = 0;
+  }
+  return {
+    getIndex: () => index,
+    next() {
+      const color = Colors[index];
+      index = (index + 1) % Colors.length;
+      return color;
+    },
+  }
+}
+
+/**
+ * 根据颜色获取当前坐标和颜色
+ */
+export function getItemColor(color) {
+  if(!color){
+    return NONE_COLOR[1];
+  }
+  let colorIndex = Colors.findIndex((value)=>{
+    return value[0] === color;
+  })
+  if(colorIndex === -1){
+    return NONE_COLOR[1];
+  }
+  return Colors[colorIndex][1];
+}
diff --git a/src/utils/dict/JDictSelectUtil.js b/src/utils/dict/JDictSelectUtil.js
new file mode 100644
index 0000000..52ff6a1
--- /dev/null
+++ b/src/utils/dict/JDictSelectUtil.js
@@ -0,0 +1,186 @@
+/**
+ * 字典 util
+ * author: scott
+ * date: 20190109
+ */
+
+import { ajaxGetDictItems, getDictItemsByCode } from './index';
+
+/**
+ * 获取字典数组
+ * 【目前仅表单设计器页面使用该方法】
+ * @param dictCode 字典Code
+ * @param isTransformResponse 是否转换返回结果
+ * @return List<Map>
+ */
+export async function initDictOptions(dictCode, isTransformResponse = true) {
+  if (!dictCode) {
+    return '字典Code不能为空!';
+  }
+  //优先从缓存中读取字典配置
+  if (getDictItemsByCode(dictCode)) {
+    let res = {};
+    res.result = getDictItemsByCode(dictCode);
+    res.success = true;
+    if (isTransformResponse) {
+      return res.result;
+    } else {
+      return res;
+    }
+  }
+  //获取字典数组
+  return await ajaxGetDictItems(dictCode, {}, { isTransformResponse });
+}
+
+/**
+ * 字典值替换文本通用方法
+ * @param dictOptions  字典数组
+ * @param text  字典值
+ * @return String
+ */
+export function filterDictText(dictOptions, text) {
+  // --update-begin----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
+  if (text != null && Array.isArray(dictOptions)) {
+    let result = [];
+    // 允许多个逗号分隔，允许传数组对象
+    let splitText;
+    if (Array.isArray(text)) {
+      splitText = text;
+    } else {
+      splitText = text.toString().trim().split(',');
+    }
+    for (let txt of splitText) {
+      let dictText = txt;
+      for (let dictItem of dictOptions) {
+        // 代码逻辑说明: 【TV360X-469】兼容数据null值防止报错
+        if (dictItem == null) continue;
+        if (dictItem.value == null) continue;
+        if (txt.toString() === dictItem.value.toString()) {
+          dictText = dictItem.text || dictItem.title || dictItem.label;
+          break;
+        }
+      }
+      result.push(dictText);
+    }
+    return result.join(',');
+  }
+  return text;
+  // --update-end----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
+}
+
+/**
+ * 字典值替换文本通用方法(多选)
+ * @param dictOptions  字典数组
+ * @param text  字典值
+ * @return String
+ */
+export function filterMultiDictText(dictOptions, text) {
+  //js “!text” 认为0为空，所以做提前处理
+  if (text === 0 || text === '0') {
+    if (dictOptions) {
+      for (let dictItem of dictOptions) {
+        if (text == dictItem.value) {
+          return dictItem.text;
+        }
+      }
+    }
+  }
+
+  if (!text || text == 'undefined' || text == 'null' || !dictOptions || dictOptions.length == 0) {
+    return '';
+  }
+  let re = '';
+  text = text.toString();
+  let arr = text.split(',');
+  dictOptions.forEach(function (option) {
+    if (option) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === option.value) {
+          re += option.text + ',';
+          break;
+        }
+      }
+    }
+  });
+  if (re == '') {
+    return text;
+  }
+  return re.substring(0, re.length - 1);
+}
+
+/**
+ * 字典值替换文本通用方法(多选)
+ * @param dictOptions  字典数组
+ * @param val  字典值
+ * @return {*[]} 返回字典项原对象
+ */
+export function filterMultiDictObjs(dictOptions, val) {
+  val = val?.toString?.() ?? '';
+  if (!val || !dictOptions || dictOptions.length === 0) {
+    return [];
+  }
+  const objs = [];
+  const vals = val.split(',');
+  for (const item of vals) {
+    const option = dictOptions.find((option) => option && option.value === item);
+    if (option) {
+      objs.push({
+        value: item,
+        text: option.text || option.title || option.label,
+        color: option.color,
+        hasColor: !!option.color,
+      });
+    }
+  }
+  return objs;
+}
+
+/**
+ * 翻译字段值对应的文本
+ * @param children
+ * @returns string
+ */
+export function filterDictTextByCache(dictCode, key) {
+  if (key == null || key.length == 0) {
+    return;
+  }
+  if (!dictCode) {
+    return '字典Code不能为空!';
+  }
+  //优先从缓存中读取字典配置
+  if (getDictItemsByCode(dictCode)) {
+    let item = getDictItemsByCode(dictCode).filter((t) => t['value'] == key);
+    if (item && item.length > 0) {
+      return item[0]['text'];
+    }
+  }
+}
+
+/** 通过code获取字典数组 */
+export async function getDictItems(dictCode, params) {
+  //优先从缓存中读取字典配置
+  if (getDictItemsByCode(dictCode)) {
+    let desformDictItems = getDictItemsByCode(dictCode).map((item) => ({
+      ...item,
+      label: item.text,
+    }));
+    return Promise.resolve(desformDictItems);
+  }
+
+  //缓存中没有，就请求后台
+  return await ajaxGetDictItems(dictCode, params)
+    .then((result) => {
+      if (result.length) {
+        let res = result.map((item) => ({ ...item, label: item.text }));
+        console.log('------- 从DB中获取到了字典-------dictCode : ', dictCode, res);
+        return Promise.resolve(res);
+      } else {
+        console.error('getDictItems error: : ', res);
+        return Promise.resolve([]);
+      }
+    })
+    .catch((res) => {
+      console.error('getDictItems error: ', res);
+      return Promise.resolve([]);
+    });
+}
diff --git a/src/utils/dict/index.ts b/src/utils/dict/index.ts
new file mode 100644
index 0000000..55024fc
--- /dev/null
+++ b/src/utils/dict/index.ts
@@ -0,0 +1,66 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useUserStore } from '/@/store/modules/user';
+import { getAuthCache } from '/@/utils/auth';
+import { DB_DICT_DATA_KEY } from '/@/enums/cacheEnum';
+
+/**
+ * 从缓存中获取字典配置
+ * @param code
+ */
+export const getDictItemsByCode = (code) => {
+  // 代码逻辑说明: 【QQYUN-6417】生产环境字典慢的问题
+  const userStore = useUserStore();
+  const dictItems = userStore.getAllDictItems;
+  if (null != dictItems && typeof dictItems === 'object' && dictItems[code]) {
+    return dictItems[code];
+  }
+  //兼容以前的旧写法
+  if (getAuthCache(DB_DICT_DATA_KEY) && getAuthCache(DB_DICT_DATA_KEY)[code]) {
+    return getAuthCache(DB_DICT_DATA_KEY)[code];
+  }
+
+
+};
+/**
+ * 从缓存中获取Pop字典配置
+ * @param text
+ * @param code
+ */
+export const getPopDictByCode = (text, codeStr) => {
+  const [code, dictCode, dictText] = codeStr.split(',');
+  if (!code || !dictCode || !dictText) {
+    return [];
+  }
+  return defHttp.get(
+    { url: `/online/api/cgreportGetDataPackage`, params: { code, dictText, dictCode, dataList: text } },
+    { isTransformResponse: false }
+  );
+};
+/**
+ * 获取字典数组
+ * @param dictCode 字典Code
+ * @return List<Map>
+ */
+export const initDictOptions = (code) => {
+  //1.优先从缓存中读取字典配置
+  if (getDictItemsByCode(code)) {
+    return new Promise((resolve, reject) => {
+      resolve(getDictItemsByCode(code));
+    });
+  }
+  //2.获取字典数组
+  // 代码逻辑说明: 字典数据请求前将参数编码处理，但是不能直接编码，因为可能之前已经编码过了
+  if (code.indexOf(',') > 0 && code.indexOf(' ') > 0) {
+    // 编码后类似sys_user%20where%20username%20like%20xxx' 是不包含空格的,这里判断如果有空格和逗号说明需要编码处理
+    code = encodeURI(code);
+  }
+  return defHttp.get({ url: `/sys/dict/getDictItems/${code}` });
+};
+/**
+ * 获取字典数组
+ * @param code 字典Code
+ * @param params 查询参数
+ * @param options 查询配置
+ * @return List<Map>
+ */
+export const ajaxGetDictItems = (code, params, options?) => defHttp.get({ url: `/sys/dict/getDictItems/${code}`, params }, options);
diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts
new file mode 100644
index 0000000..42a33cb
--- /dev/null
+++ b/src/utils/domUtils.ts
@@ -0,0 +1,192 @@
+import type { FunctionArgs } from '@vueuse/core';
+import { upperFirst } from 'lodash-es';
+
+export interface ViewportOffsetResult {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  rightIncludeBody: number;
+  bottomIncludeBody: number;
+}
+
+export function getBoundingClientRect(element: Element): DOMRect | number {
+  if (!element || !element.getBoundingClientRect) {
+    return 0;
+  }
+  return element.getBoundingClientRect();
+}
+
+function trim(string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ' ' + el.className + ' ';
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+/**
+ * Get the left and top offset of the current element
+ * left: the distance between the leftmost element and the left side of the document
+ * top: the distance from the top of the element to the top of the document
+ * right: the distance from the far right of the element to the right of the document
+ * bottom: the distance from the bottom of the element to the bottom of the document
+ * rightIncludeBody: the distance between the leftmost element and the right side of the document
+ * bottomIncludeBody: the distance from the bottom of the element to the bottom of the document
+ *
+ * @description:
+ */
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement;
+
+  const docScrollLeft = doc.scrollLeft;
+  const docScrollTop = doc.scrollTop;
+  const docClientLeft = doc.clientLeft;
+  const docClientTop = doc.clientTop;
+
+  const pageXOffset = window.pageXOffset;
+  const pageYOffset = window.pageYOffset;
+
+  const box = getBoundingClientRect(element);
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
+  const offsetLeft = retLeft + pageXOffset;
+  const offsetTop = rectTop + pageYOffset;
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  const clientWidth = window.document.documentElement.clientWidth;
+  const clientHeight = window.document.documentElement.clientHeight;
+  return {
+    left: left,
+    top: top,
+    right: clientWidth - rectWidth - left,
+    bottom: clientHeight - rectHeight - top,
+    rightIncludeBody: clientWidth - left,
+    bottomIncludeBody: clientHeight - top,
+  };
+}
+
+export function hackCss(attr: string, value: string) {
+  const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT'];
+
+  const styleObj: any = {};
+  prefix.forEach((item) => {
+    styleObj[`${item}${upperFirst(attr)}`] = value;
+  });
+  return {
+    ...styleObj,
+    [attr]: value,
+  };
+}
+
+/* istanbul ignore next */
+export function on(element: Element | HTMLElement | Document | Window, event: string, handler: EventListenerOrEventListenerObject): void {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function off(element: Element | HTMLElement | Document | Window, event: string, handler: Fn): void {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function once(el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      fn.apply(this, args);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+}
+
+export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
+  let locked = false;
+  // @ts-ignore
+  return function (...args: any[]) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(() => {
+      // @ts-ignore
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+}
+
+/**
+ * 查找父级元素，直到找到符合条件的元素
+ * @param element 当前元素
+ * @param checkFn 判断条件
+ */
+export function queryParentElement(element: HTMLElement, checkFn: (node: HTMLElement) => boolean): HTMLElement | null {
+  let ele: HTMLElement | null = element;
+  while (ele) {
+    try {
+      if (checkFn(ele)) {
+        return ele;
+      }
+      ele = ele.parentElement;
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+}
diff --git a/src/utils/dynamicPages.ts b/src/utils/dynamicPages.ts
new file mode 100644
index 0000000..88e71d2
--- /dev/null
+++ b/src/utils/dynamicPages.ts
@@ -0,0 +1,10 @@
+// 获取所有动态页面(views目录下的所有vue文件和tsx文件)
+const allFiles = import.meta.glob(
+  [
+    '../views/**/*.{vue,tsx}',// 获取所有vue和tsx文件
+    // 排除特定文件夹
+    '!../views/system/approvalrole/compoments/**',
+  ]
+);
+// 合并所有动态页面
+export const dynamicPages = { ...allFiles };
diff --git a/src/utils/encryption/signMd5Utils.js b/src/utils/encryption/signMd5Utils.js
new file mode 100644
index 0000000..08e0a1c
--- /dev/null
+++ b/src/utils/encryption/signMd5Utils.js
@@ -0,0 +1,146 @@
+import md5 from 'md5';
+//签名密钥串(前后端要一致，正式发布请自行修改)
+const signatureSecret = 'dd05f1c54d63749eda95f9fa6d49v442a';
+
+export default class signMd5Utils {
+  /**
+   * json参数升序
+   * @param jsonObj 发送参数
+   */
+
+  static sortAsc(jsonObj) {
+    let arr = new Array();
+    let num = 0;
+    for (let i in jsonObj) {
+      arr[num] = i;
+      num++;
+    }
+    let sortArr = arr.sort();
+    let sortObj = {};
+    for (let i in sortArr) {
+      sortObj[sortArr[i]] = jsonObj[sortArr[i]];
+    }
+    return sortObj;
+  }
+
+  /**
+   * @param url 请求的url,应该包含请求参数(url的?后面的参数)
+   * @param requestParams 请求参数(@RequestParam(get)的JSON参数)
+   * @param requestBodyParams 请求参数(@RequestBody(post)参数)
+   * @returns {string} 获取签名
+   */
+  static getSign(url, requestParams, requestBodyParams) {
+    let urlParams = this.parseQueryString(url);
+    let jsonObj = this.mergeObject(urlParams, requestParams);
+    // 代码逻辑说明: 【QQYUN-9005】发送短信加签---
+    if(requestBodyParams){
+      jsonObj = this.mergeObject(jsonObj, requestBodyParams)
+    }
+    let requestBody = this.sortAsc(jsonObj);
+    delete requestBody._t;
+    // console.log('sign requestBody:', requestBody);
+    return md5(JSON.stringify(requestBody) + signatureSecret).toUpperCase();
+  }
+
+  /**
+   * @param url 请求的url
+   * @returns {{}} 将url中请求参数组装成json对象(url的?后面的参数)
+   */
+  static parseQueryString(url) {
+    let urlReg = /^[^\?]+\?([\w\W]+)$/,
+      paramReg = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
+      urlArray = urlReg.exec(url),
+      result = {};
+
+    // 获取URL上最后带逗号的参数变量 sys/dict/getDictItems/sys_user,realname,username
+    //【这边条件没有encode】带条件参数例子：/sys/dict/getDictItems/sys_user,realname,id,username!='admin'%20order%20by%20create_time
+    let lastpathVariable = url.substring(url.lastIndexOf('/') + 1);
+    if (lastpathVariable.includes(',')) {
+      if (lastpathVariable.includes('?')) {
+        lastpathVariable = lastpathVariable.substring(0, lastpathVariable.indexOf('?'));
+      }
+      //解决Sign 签名校验失败 #2728
+      //decodeURI对特殊字符没有没有编码和解码的能力，需要使用decodeURIComponent
+      result['x-path-variable'] = decodeURIComponent(lastpathVariable);
+    }
+    if (urlArray && urlArray[1]) {
+      let paramString = urlArray[1],
+        paramResult;
+      while ((paramResult = paramReg.exec(paramString)) != null) {
+        //数字值转为string类型，前后端加密规则保持一致
+        if (this.myIsNaN(paramResult[2])) {
+          paramResult[2] = paramResult[2].toString();
+        }
+        result[paramResult[1]] = paramResult[2];
+      }
+    }
+    return result;
+  }
+
+  /**
+   * @returns {*} 将两个对象合并成一个
+   */
+  static mergeObject(objectOne, objectTwo) {
+    if (objectTwo && Object.keys(objectTwo).length > 0) {
+      for (let key in objectTwo) {
+        if (objectTwo.hasOwnProperty(key) === true) {
+          //数字值转为string类型，前后端加密规则保持一致
+          if (this.myIsNaN(objectTwo[key])) {
+            objectTwo[key] = objectTwo[key].toString();
+          }
+          //布尔类型转成string类型，前后端加密规则保持一致
+          if (typeof objectTwo[key] === 'boolean') {
+            objectTwo[key] = objectTwo[key].toString();
+          }
+          objectOne[key] = objectTwo[key];
+        }
+      }
+    }
+    return objectOne;
+  }
+
+  static urlEncode(param, key, encode) {
+    if (param == null) return '';
+    let paramStr = '';
+    let t = typeof param;
+    if (t == 'string' || t == 'number' || t == 'boolean') {
+      paramStr += '&' + key + '=' + (encode == null || encode ? encodeURIComponent(param) : param);
+    } else {
+      for (let i in param) {
+        let k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
+        paramStr += this.urlEncode(param[i], k, encode);
+      }
+    }
+    return paramStr;
+  }
+
+  /**
+   * 接口签名用 生成header中的时间戳
+   * @returns {number}
+   */
+  static getTimestamp() {
+    return new Date().getTime();
+  }
+
+  // static getDateTimeToString() {
+  //   const date_ = new Date()
+  //   const year = date_.getFullYear()
+  //   let month = date_.getMonth() + 1
+  //   let day = date_.getDate()
+  //   if (month < 10) month = '0' + month
+  //   if (day < 10) day = '0' + day
+  //   let hours = date_.getHours()
+  //   let mins = date_.getMinutes()
+  //   let secs = date_.getSeconds()
+  //   const msecs = date_.getMilliseconds()
+  //   if (hours < 10) hours = '0' + hours
+  //   if (mins < 10) mins = '0' + mins
+  //   if (secs < 10) secs = '0' + secs
+  //   if (msecs < 10) secs = '0' + msecs
+  //   return year + '' + month + '' + day + '' + hours + '' + mins + '' + secs
+  // }
+  // true:数值型的，false：非数值型
+  static myIsNaN(value) {
+    return typeof value === 'number' && !isNaN(value);
+  }
+}
diff --git a/src/utils/env.ts b/src/utils/env.ts
new file mode 100644
index 0000000..272c634
--- /dev/null
+++ b/src/utils/env.ts
@@ -0,0 +1,135 @@
+import type { GlobEnvConfig } from '/#/config';
+
+import { warn } from '/@/utils/log';
+import pkg from '../../package.json';
+import { getConfigFileName } from '../../build/getConfigFileName';
+import { getGlobal } from "@/qiankun/micro";
+
+export function getCommonStoragePrefix() {
+  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
+  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
+}
+
+// Generate cache key according to version
+export function getStorageShortName() {
+  return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
+}
+
+export function getAppEnvConfig() {
+  const ENV_NAME = getConfigFileName(import.meta.env);
+
+  const global = getGlobal();
+
+  const ENV = (import.meta.env.DEV
+    ? // Get the global configuration (the configuration will be extracted independently when packaging)
+      (import.meta.env as unknown as GlobEnvConfig)
+    : global[ENV_NAME as any]) as unknown as GlobEnvConfig;
+
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_USE_MOCK,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_APP_OPEN_SSO,
+    VITE_GLOB_APP_OPEN_QIANKUN,
+    VITE_GLOB_APP_CAS_BASE_URL,
+    VITE_GLOB_DOMAIN_URL,
+    VITE_GLOB_ONLINE_VIEW_URL,
+    // 全局隐藏哪些布局，多个用逗号隔开
+    VITE_GLOB_HIDE_LAYOUT_TYPES,
+    // 当前运行在什么平台
+    VITE_GLOB_RUN_PLATFORM,
+
+    // 【JEECG作为乾坤子应用】
+    VITE_GLOB_QIANKUN_MICRO_APP_NAME,
+    VITE_GLOB_QIANKUN_MICRO_APP_ENTRY,
+    
+    //在线文档编辑版本。可选属性：wps, onlyoffice
+    VITE_GLOB_ONLINE_DOCUMENT_VERSION,
+  } = ENV;
+
+  // if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
+  //   warn(
+  //     `VITE_GLOB_APP_SHORT_NAME 变量只能是字符/下划线，请在环境变量中修改并重新运行.`
+  //   );
+  // }
+
+  return {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_USE_MOCK,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_APP_OPEN_SSO,
+    VITE_GLOB_APP_OPEN_QIANKUN,
+    VITE_GLOB_APP_CAS_BASE_URL,
+    VITE_GLOB_DOMAIN_URL,
+    VITE_GLOB_ONLINE_VIEW_URL,
+    VITE_GLOB_HIDE_LAYOUT_TYPES,
+    VITE_GLOB_RUN_PLATFORM,
+
+    // 【JEECG作为乾坤子应用】
+    VITE_GLOB_QIANKUN_MICRO_APP_NAME,
+    VITE_GLOB_QIANKUN_MICRO_APP_ENTRY,
+
+    //在线文档编辑版本。可选属性：wps, onlyoffice
+    VITE_GLOB_ONLINE_DOCUMENT_VERSION
+  };
+}
+
+/**
+ * @description: Development mode
+ */
+export const devMode = 'development';
+
+/**
+ * @description: Production mode
+ */
+export const prodMode = 'production';
+
+/**
+ * @description: Get environment variables
+ * @returns:
+ * @example:
+ */
+export function getEnv(): string {
+  return import.meta.env.MODE;
+}
+
+/**
+ * @description: Is it a development mode
+ * @returns:
+ * @example:
+ */
+export function isDevMode(): boolean {
+  return import.meta.env.DEV;
+}
+
+/**
+ * @description: Is it a production mode
+ * @returns:
+ * @example:
+ */
+export function isProdMode(): boolean {
+  return import.meta.env.PROD;
+}
+
+export function getHideLayoutTypes(): string[] {
+  const {VITE_GLOB_HIDE_LAYOUT_TYPES} = getAppEnvConfig();
+  if (typeof VITE_GLOB_HIDE_LAYOUT_TYPES !== 'string') {
+    return [];
+  }
+  return VITE_GLOB_HIDE_LAYOUT_TYPES.split(',');
+}
+
+/**
+ * 获取在线文档版本号
+ */
+export function getOnlineDocumentVersion(): string {
+  const { VITE_GLOB_ONLINE_DOCUMENT_VERSION } = getAppEnvConfig();
+  if (typeof VITE_GLOB_ONLINE_DOCUMENT_VERSION !== 'string') {
+    return 'wps';
+  }
+  return VITE_GLOB_ONLINE_DOCUMENT_VERSION;
+}
diff --git a/src/utils/event/index.ts b/src/utils/event/index.ts
new file mode 100644
index 0000000..3a60d7c
--- /dev/null
+++ b/src/utils/event/index.ts
@@ -0,0 +1,42 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+const isServer = typeof window === 'undefined';
+
+/* istanbul ignore next */
+function resizeHandler(entries: any[]) {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach((fn: () => any) => {
+        fn();
+      });
+    }
+  }
+}
+
+/* istanbul ignore next */
+export function addResizeListener(element: any, fn: () => any) {
+  if (isServer) return;
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
+  }
+  element.__resizeListeners__.push(fn);
+}
+
+/* istanbul ignore next */
+export function removeResizeListener(element: any, fn: () => any) {
+  if (!element || !element.__resizeListeners__) return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
+  }
+}
+
+export function triggerWindowResize() {
+  const event = document.createEvent('HTMLEvents');
+  event.initEvent('resize', true, true);
+  (event as any).eventType = 'message';
+  window.dispatchEvent(event);
+}
diff --git a/src/utils/factory/createAsyncComponent.tsx b/src/utils/factory/createAsyncComponent.tsx
new file mode 100644
index 0000000..52ffc4c
--- /dev/null
+++ b/src/utils/factory/createAsyncComponent.tsx
@@ -0,0 +1,62 @@
+import {
+  defineAsyncComponent,
+  // FunctionalComponent, CSSProperties
+} from 'vue';
+import { Spin } from 'ant-design-vue';
+const noop = () => {};
+// const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => {
+//   const style: CSSProperties = {
+//     position: 'absolute',
+//     display: 'flex',
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//   };
+//   return (
+//     <div style={style}>
+//       <Spin spinning={true} size={props.size} />
+//     </div>
+//   );
+// };
+
+interface Options {
+  size?: 'default' | 'small' | 'large';
+  delay?: number;
+  timeout?: number;
+  loading?: boolean;
+  retry?: boolean;
+}
+
+export function createAsyncComponent(loader: Fn, options: Options = {}) {
+  const { size = 'small', delay = 100, timeout = 30000, loading = false, retry = true } = options;
+  return defineAsyncComponent({
+    loader,
+    loadingComponent: loading ? <Spin spinning={true} size={size} /> : undefined,
+    // The error component will be displayed if a timeout is
+    // provided and exceeded. Default: Infinity.
+    // TODO
+    timeout,
+    // errorComponent
+    // Defining if component is suspensible. Default: true.
+    // suspensible: false,
+    delay,
+    /**
+     *
+     * @param {*} error Error message object
+     * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects
+     * @param {*} fail  End of failure
+     * @param {*} attempts Maximum allowed retries number
+     */
+    onError: !retry
+      ? noop
+      : (error, retry, fail, attempts) => {
+          if (error.message.match(/fetch/) && attempts <= 3) {
+            // retry on fetch errors, 3 max attempts
+            retry();
+          } else {
+            // Note that retry/fail are like resolve/reject of a promise:
+            // one of them must be called for the error handling to continue.
+            fail();
+          }
+        },
+  });
+}
diff --git a/src/utils/file/base64Conver.ts b/src/utils/file/base64Conver.ts
new file mode 100644
index 0000000..d77618a
--- /dev/null
+++ b/src/utils/file/base64Conver.ts
@@ -0,0 +1,41 @@
+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  const mime = typeItem.match(/:(.*?);/)![1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>;
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.onload = function () {
+      if (!canvas || !ctx) {
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    };
+    img.src = url;
+  });
+}
diff --git a/src/utils/file/download.ts b/src/utils/file/download.ts
new file mode 100644
index 0000000..168e235
--- /dev/null
+++ b/src/utils/file/download.ts
@@ -0,0 +1,91 @@
+import { openWindow } from '..';
+import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(url: string, filename: string, mime?: string, bom?: BlobPart) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByBase64(buf: string, filename: string, mime?: string, bom?: BlobPart) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
+  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+  if (typeof window.navigator.msSaveBlob !== 'undefined') {
+    window.navigator.msSaveBlob(blob, filename);
+  } else {
+    const blobURL = window.URL.createObjectURL(blob);
+    const tempLink = document.createElement('a');
+    tempLink.style.display = 'none';
+    tempLink.href = blobURL;
+    tempLink.setAttribute('download', filename);
+    if (typeof tempLink.download === 'undefined') {
+      tempLink.setAttribute('target', '_blank');
+    }
+    document.body.appendChild(tempLink);
+    tempLink.click();
+    document.body.removeChild(tempLink);
+    window.URL.revokeObjectURL(blobURL);
+  }
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export function downloadByUrl({ url, target = '_blank', fileName }: { url: string; target?: TargetContext; fileName?: string }): boolean {
+  const isChrome = window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+  const isSafari = window.navigator.userAgent.toLowerCase().indexOf('safari') > -1;
+
+  if (/(iP)/g.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!');
+    return false;
+  }
+  if (isChrome || isSafari) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.target = target;
+
+    if (link.download !== undefined) {
+      link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
+    }
+
+    if (document.createEvent) {
+      const e = document.createEvent('MouseEvents');
+      e.initEvent('click', true, true);
+      link.dispatchEvent(e);
+      return true;
+    }
+  }
+  if (url.indexOf('?') === -1) {
+    url += '?download';
+  }
+
+  openWindow(url, { target });
+  return true;
+}
diff --git a/src/utils/getConfigByMenuType.ts b/src/utils/getConfigByMenuType.ts
new file mode 100644
index 0000000..428bd47
--- /dev/null
+++ b/src/utils/getConfigByMenuType.ts
@@ -0,0 +1,49 @@
+import { MenuTypeEnum, MenuModeEnum } from '/@/enums/menuEnum';
+import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+
+/**
+ * 根据菜单类型和模式获取对应的主题色
+ * @param menuType 菜单类型
+ */
+export function getConfigByMenuType(menuType: MenuTypeEnum): {
+  themeColor: string;
+  headerBgColor: string;
+  sideBgColor: string;
+  split: boolean;
+  mode: MenuModeEnum;
+} {
+  let themeColor;
+  let headerBgColor;
+  let sideBgColor;
+  let split = false;
+  let mode: MenuModeEnum = MenuModeEnum.INLINE;
+  if (menuType === MenuTypeEnum.TOP_MENU) {
+    // 顶部栏导航
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[4];
+    mode = MenuModeEnum.HORIZONTAL;
+  } else if (menuType === MenuTypeEnum.MIX) {
+    // 顶部混合菜单模式
+    themeColor = APP_PRESET_COLOR_LIST[2];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[2];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[3];
+    split = true;
+  } else if (menuType === MenuTypeEnum.MIX_SIDEBAR) {
+    // 侧边折叠导航模式
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[0];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[0];
+  } else if (menuType === MenuTypeEnum.SIDEBAR) {
+    // 侧边栏导航
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[4];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[7];
+  }
+  return {
+    themeColor,
+    headerBgColor,
+    sideBgColor,
+    split,
+    mode,
+  };
+}
diff --git a/src/utils/helper/treeHelper.ts b/src/utils/helper/treeHelper.ts
new file mode 100644
index 0000000..8d01984
--- /dev/null
+++ b/src/utils/helper/treeHelper.ts
@@ -0,0 +1,197 @@
+interface TreeHelperConfig {
+  id: string;
+  children: string;
+  pid: string;
+}
+
+// 默认配置
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid',
+};
+
+// 获取配置。  Object.assign 从一个或多个源对象复制到目标对象
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
+
+// tree from list
+// 列表中的树
+export function listToTree<T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const nodeMap = new Map();
+  const result: T[] = [];
+  const { id, children, pid } = conf;
+
+  for (const node of list) {
+    node[children] = node[children] || [];
+    nodeMap.set(node[id], node);
+  }
+  for (const node of list) {
+    const parent = nodeMap.get(node[pid]);
+    (parent ? parent[children] : result).push(node);
+  }
+  return result;
+}
+
+export function treeToList<T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T {
+  config = getConfig(config);
+  const { children } = config;
+  const result: any = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i][children!]) continue;
+    result.splice(i + 1, 0, ...result[i][children!]);
+  }
+  return result;
+}
+
+export function findNode<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T | null {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  for (const node of list) {
+    if (func(node)) return node;
+    node[children!] && list.push(...node[children!]);
+  }
+  return null;
+}
+
+export function findNodeAll<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T[] {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  const result: T[] = [];
+  for (const node of list) {
+    func(node) && result.push(node);
+    node[children!] && list.push(...node[children!]);
+  }
+  return result;
+}
+
+export function findPath<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T | T[] | null {
+  config = getConfig(config);
+  const path: T[] = [];
+  const list = [...tree];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      if (func(node)) {
+        return path;
+      }
+    }
+  }
+  return null;
+}
+
+export function findPathAll(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}) {
+  config = getConfig(config);
+  const path: any[] = [];
+  const list = [...tree];
+  const result: any[] = [];
+  const visitedSet = new Set(),
+    { children } = config;
+  while (list.length) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      func(node) && result.push([...path]);
+    }
+  }
+  return result;
+}
+
+export function filter<T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  // Partial 将 T 中的所有属性设为可选
+  config: Partial<TreeHelperConfig> = {}
+): T[] {
+  // 获取配置
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        // 递归调用 对含有children项  进行再次调用自身函数 listFilter
+        node[children] = node[children] && listFilter(node[children]);
+        // 执行传入的回调 func 进行过滤
+        return func(node) || (node[children] && node[children].length);
+      });
+  }
+
+  return listFilter(tree);
+}
+
+export function forEach<T = any>(tree: T[], func: (n: T) => any, config: Partial<TreeHelperConfig> = {}): void {
+  config = getConfig(config);
+  const list: any[] = [...tree];
+  const { children } = config;
+  for (let i = 0; i < list.length; i++) {
+    //func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
+    children && list[i][children] && list.splice(i + 1, 0, ...list[i][children]);
+  }
+}
+
+/**
+ * @description: Extract tree specified structure
+ * @description: 提取树指定结构
+ */
+export function treeMap<T = any>(treeData: T[], opt: { children?: string; conversion: Fn }): T[] {
+  return treeData.map((item) => treeMapEach(item, opt));
+}
+
+/**
+ * @description: Extract tree specified structure
+ * @description: 提取树指定结构
+ */
+export function treeMapEach(data: any, { children = 'children', conversion }: { children?: string; conversion: Fn }) {
+  const haveChildren = Array.isArray(data[children]) && data[children].length > 0;
+  const conversionData = conversion(data) || {};
+  if (haveChildren) {
+    return {
+      ...conversionData,
+      [children]: data[children].map((i: number) =>
+        treeMapEach(i, {
+          children,
+          conversion,
+        })
+      ),
+    };
+  } else {
+    return {
+      ...conversionData,
+    };
+  }
+}
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export function eachTree(treeDatas: any[], callBack: Fn, parentNode = {}) {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element;
+    if (element.children) {
+      eachTree(element.children, callBack, newNode);
+    }
+  });
+}
diff --git a/src/utils/helper/tsxHelper.tsx b/src/utils/helper/tsxHelper.tsx
new file mode 100644
index 0000000..46e0001
--- /dev/null
+++ b/src/utils/helper/tsxHelper.tsx
@@ -0,0 +1,35 @@
+import { Slots } from 'vue';
+import { isFunction } from '/@/utils/is';
+
+/**
+ * @description:  Get slot to prevent empty error
+ */
+export function getSlot(slots: Slots, slot = 'default', data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn(data);
+}
+
+/**
+ * extends slots
+ * @param slots
+ * @param excludeKeys
+ */
+export function extendSlots(slots: Slots, excludeKeys: string[] = []) {
+  const slotKeys = Object.keys(slots);
+  const ret: any = {};
+  slotKeys.map((key) => {
+    if (excludeKeys.includes(key)) {
+      return null;
+    }
+    ret[key] = () => getSlot(slots, key);
+  });
+  return ret;
+}
diff --git a/src/utils/helper/validator.ts b/src/utils/helper/validator.ts
new file mode 100644
index 0000000..f17ab66
--- /dev/null
+++ b/src/utils/helper/validator.ts
@@ -0,0 +1,153 @@
+import { dateUtil } from '/@/utils/dateUtil';
+import { duplicateCheck } from '/@/views/system/user/user.api';
+
+export const rules = {
+  rule(type, required) {
+    if (type === 'email') {
+      return this.email(required);
+    }
+    if (type === 'phone') {
+      return this.phone(required);
+    }
+  },
+  email(required) {
+    return [
+      {
+        required: required ? required : false,
+        validator: async (_rule, value) => {
+          if (required == true && !value) {
+            return Promise.reject('请输入邮箱!');
+          }
+          if (
+            value &&
+            !new RegExp(
+              /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+            ).test(value)
+          ) {
+            return Promise.reject('请输入正确邮箱格式!');
+          }
+          return Promise.resolve();
+        },
+        trigger: 'change',
+      },
+    ] as ArrayRule;
+  },
+  phone(required) {
+    return [
+      {
+        required: required,
+        validator: async (_, value) => {
+          if (required && !value) {
+            return Promise.reject('请输入手机号码!');
+          }
+          if (!/^1[3456789]\d{9}$/.test(value)) {
+            return Promise.reject('手机号码格式有误');
+          }
+          return Promise.resolve();
+        },
+        trigger: 'change',
+      },
+    ];
+  },
+  startTime(endTime, required) {
+    return [
+      {
+        required: required ? required : false,
+        validator: (_, value) => {
+          if (required && !value) {
+            return Promise.reject('请选择开始时间');
+          }
+          if (endTime && value && dateUtil(endTime).isBefore(value)) {
+            return Promise.reject('开始时间需小于结束时间');
+          }
+          return Promise.resolve();
+        },
+        trigger: 'change',
+      },
+    ];
+  },
+  endTime(startTime, required) {
+    return [
+      {
+        required: required ? required : false,
+        validator: (_, value) => {
+          if (required && !value) {
+            return Promise.reject('请选择结束时间');
+          }
+          if (startTime && value && dateUtil(value).isBefore(startTime)) {
+            return Promise.reject('结束时间需大于开始时间');
+          }
+          return Promise.resolve();
+        },
+        trigger: 'change',
+      },
+    ];
+  },
+  confirmPassword(values, required) {
+    return [
+      {
+        required: required ? required : false,
+        validator: (_, value) => {
+          if (!value) {
+            return Promise.reject('密码不能为空');
+          }
+          if (value !== values.password) {
+            return Promise.reject('两次输入的密码不一致!');
+          }
+          return Promise.resolve();
+        },
+      },
+    ];
+  },
+  duplicateCheckRule(tableName, fieldName, model, schema, required?) {
+    return [
+      {
+        validator: (_, value) => {
+          if (!value && required) {
+            return Promise.reject(`请输入${schema.label}`);
+          }
+          return new Promise<void>((resolve, reject) => {
+            duplicateCheck({
+              tableName,
+              fieldName,
+              fieldVal: value,
+              dataId: model.id,
+            })
+              .then((res) => {
+                res.success ? resolve() : reject(res.message || '校验失败');
+              })
+              .catch((err) => {
+                reject(err.message || '验证失败');
+              });
+          });
+        },
+      },
+    ] as ArrayRule;
+  },
+};
+
+/**
+ * 唯一校验函数，给原生<a-form>使用，vben的表单校验建议使用上述rules
+ * @param tableName 表名
+ * @param fieldName 字段名
+ * @param fieldVal 字段值
+ * @param dataId 数据ID
+ */
+export async function duplicateValidate(tableName, fieldName, fieldVal, dataId) {
+  try {
+    let params = {
+      tableName,
+      fieldName,
+      fieldVal,
+      dataId: dataId,
+    };
+    const res = await duplicateCheck(params);
+    if (res.success) {
+      return Promise.resolve();
+    } else {
+      return Promise.reject(res.message || '校验失败');
+    }
+  } catch (e) {
+    return Promise.reject('校验失败,可能是断网等问题导致的校验失败');
+  }
+}
diff --git a/src/utils/http/axios/Axios.ts b/src/utils/http/axios/Axios.ts
new file mode 100644
index 0000000..4d7c296
--- /dev/null
+++ b/src/utils/http/axios/Axios.ts
@@ -0,0 +1,270 @@
+import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import type { RequestOptions, Result, UploadFileParams, UploadFileCallBack } from '/#/axios';
+import type { CreateAxiosOptions } from './axiosTransform';
+import axios from 'axios';
+import qs from 'qs';
+import { AxiosCanceler } from './axiosCancel';
+import { isFunction } from '/@/utils/is';
+import { cloneDeep } from 'lodash-es';
+import { ContentTypeEnum } from '/@/enums/httpEnum';
+import { RequestEnum } from '/@/enums/httpEnum';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+export * from './axiosTransform';
+
+/**
+ * @description:  axios module
+ */
+export class VAxios {
+  private axiosInstance: AxiosInstance;
+  private readonly options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.axiosInstance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  /**
+   * @description:  Create axios instance
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.axiosInstance = axios.create(config);
+  }
+
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  getAxios(): AxiosInstance {
+    return this.axiosInstance;
+  }
+
+  /**
+   * @description: Reconfigure axios
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.axiosInstance) {
+      return;
+    }
+    this.createAxios(config);
+  }
+
+  /**
+   * @description: Set general header
+   */
+  setHeader(headers: any): void {
+    if (!this.axiosInstance) {
+      return;
+    }
+    Object.assign(this.axiosInstance.defaults.headers, headers);
+  }
+
+  /**
+   * @description: Interceptor configuration
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) {
+      return;
+    }
+    const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } = transform;
+
+    const axiosCanceler = new AxiosCanceler();
+
+    // 请求侦听器配置处理
+    this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
+      // If cancel repeat request is turned on, then cancel repeat request is prohibited
+      // @ts-ignore
+      const { ignoreCancelToken } = config.requestOptions;
+
+      const ignoreCancel = ignoreCancelToken !== undefined ? ignoreCancelToken : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options);
+      }
+      return config;
+    }, undefined);
+
+    // 请求拦截器错误捕获
+    requestInterceptorsCatch &&
+      isFunction(requestInterceptorsCatch) &&
+      this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch);
+
+    // 响应结果拦截器处理
+    this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
+      res && axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // 响应结果拦截器错误捕获
+    responseInterceptorsCatch &&
+      isFunction(responseInterceptorsCatch) &&
+      this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
+  }
+
+  /**
+   * 文件上传
+   */
+  //--@updateBy-begin----author:liusq---date:20211117------for:增加上传回调参数callback------
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams, callback?: UploadFileCallBack) {
+    //--@updateBy-end----author:liusq---date:20211117------for:增加上传回调参数callback------
+    const formData = new window.FormData();
+    const customFilename = params.name || 'file';
+
+    if (params.filename) {
+      formData.append(customFilename, params.file, params.filename);
+    } else {
+      formData.append(customFilename, params.file);
+    }
+    const glob = useGlobSetting();
+    config.baseURL = glob.uploadUrl;
+    if (params.data) {
+      Object.keys(params.data).forEach((key) => {
+        const value = params.data![key];
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
+
+        formData.append(key, params.data[key]);
+      });
+    }
+
+    return this.axiosInstance
+      .request<T>({
+        ...config,
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-type': ContentTypeEnum.FORM_DATA,
+          ignoreCancelToken: true,
+        },
+      })
+      .then((res: any) => {
+        //--@updateBy-begin----author:liusq---date:20210914------for:上传判断是否包含回调方法------
+        if (callback?.success && isFunction(callback?.success)) {
+          callback?.success(res?.data);
+          //--@updateBy-end----author:liusq---date:20210914------for:上传判断是否包含回调方法------
+        } else if (callback?.isReturnResponse) {
+          //--@updateBy-begin----author:liusq---date:20211117------for:上传判断是否返回res信息------
+          return Promise.resolve(res?.data);
+          //--@updateBy-end----author:liusq---date:20211117------for:上传判断是否返回res信息------
+        } else {
+          if (res.data.success == true && res.data.code == 200) {
+            createMessage.success(res.data.message);
+          } else {
+            createMessage.error(res.data.message);
+          }
+        }
+      });
+  }
+
+  // 支持表单数据
+  supportFormData(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (contentType !== ContentTypeEnum.FORM_URLENCODED || !Reflect.has(config, 'data') || config.method?.toUpperCase() === RequestEnum.GET) {
+      return config;
+    }
+
+    return {
+      ...config,
+      data: qs.stringify(config.data, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'GET' }, options);
+  }
+
+  post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PUT' }, options);
+  }
+
+  delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'DELETE' }, options);
+  }
+
+  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              //zhangyafei---添加回调方法
+              config.success && config.success(res.data);
+              //zhangyafei---添加回调方法
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // 在此处重写来自axios的错误消息
+          }
+          reject(e);
+        });
+    });
+  }
+
+
+  /**
+   * 【用于评论功能】自定义文件上传-请求
+   * @param url
+   * @param formData
+   */
+  uploadMyFile<T = any>(url, formData) {
+    const glob = useGlobSetting();
+    return this.axiosInstance
+      .request<T>({
+        url: url,
+        baseURL: glob.uploadUrl,
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-type': ContentTypeEnum.FORM_DATA,
+          ignoreCancelToken: true,
+        },
+      });
+  }
+}
diff --git a/src/utils/http/axios/axiosCancel.ts b/src/utils/http/axios/axiosCancel.ts
new file mode 100644
index 0000000..081233e
--- /dev/null
+++ b/src/utils/http/axios/axiosCancel.ts
@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig, Canceler } from 'axios';
+import axios from 'axios';
+import { isFunction } from '/@/utils/is';
+
+// Used to store the identification and cancellation function of each request
+let pendingMap = new Map<string, Canceler>();
+
+export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
+
+export class AxiosCanceler {
+  /**
+   * Add request
+   * @param {Object} config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // If there is no current request in pending, add it
+          pendingMap.set(url, cancel);
+        }
+      });
+  }
+
+  /**
+   * @description: Clear all pending
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel();
+    });
+    pendingMap.clear();
+  }
+
+  /**
+   * Removal request
+   * @param {Object} config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config);
+
+    if (pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = pendingMap.get(url);
+      cancel && cancel(url);
+      pendingMap.delete(url);
+    }
+  }
+
+  /**
+   * @description: reset
+   */
+  reset(): void {
+    pendingMap = new Map<string, Canceler>();
+  }
+}
diff --git a/src/utils/http/axios/axiosTransform.ts b/src/utils/http/axios/axiosTransform.ts
new file mode 100644
index 0000000..141ac5a
--- /dev/null
+++ b/src/utils/http/axios/axiosTransform.ts
@@ -0,0 +1,49 @@
+/**
+ * Data processing class, can be configured according to the project
+ */
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from '/#/axios';
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  authenticationScheme?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
+export abstract class AxiosTransform {
+  /**
+   * @description: Process configuration before request
+   * @description: Process configuration before request
+   */
+  beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: Request successfully processed
+   */
+  transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatchHook?: (e: Error, options: RequestOptions) => Promise<any>;
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: (config: AxiosRequestConfig, options: CreateAxiosOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: (error: Error) => void;
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: (error: Error) => void;
+}
diff --git a/src/utils/http/axios/checkStatus.ts b/src/utils/http/axios/checkStatus.ts
new file mode 100644
index 0000000..fc292e3
--- /dev/null
+++ b/src/utils/http/axios/checkStatus.ts
@@ -0,0 +1,76 @@
+import type { ErrorMessageMode } from '/#/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+// import router from '/@/router';
+// import { PageEnum } from '/@/enums/pageEnum';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import projectSetting from '/@/settings/projectSetting';
+import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum';
+
+const { createMessage, createErrorModal } = useMessage();
+const error = createMessage.error!;
+const stp = projectSetting.sessionTimeoutProcessing;
+
+export function checkStatus(status: number, msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
+  const { t } = useI18n();
+  const userStore = useUserStoreWithOut();
+  let errMessage = '';
+
+  switch (status) {
+    case 400:
+      errMessage = `${msg}`;
+      break;
+    // 401: Not logged in
+    // Jump to the login page if not logged in, and carry the path of the current page
+    // Return to the current page after successful login. This step needs to be operated on the login page.
+    case 401:
+      userStore.setToken(undefined);
+      errMessage = msg || t('sys.api.errMsg401');
+      if (stp === SessionTimeoutProcessingEnum.PAGE_COVERAGE) {
+        userStore.setSessionTimeout(true);
+      } else {
+        userStore.logout(true);
+      }
+      break;
+    case 403:
+      errMessage = t('sys.api.errMsg403');
+      break;
+    // 404请求不存在
+    case 404:
+      errMessage = t('sys.api.errMsg404');
+      break;
+    case 405:
+      errMessage = t('sys.api.errMsg405');
+      break;
+    case 408:
+      errMessage = t('sys.api.errMsg408');
+      break;
+    case 500:
+      errMessage = t('sys.api.errMsg500');
+      break;
+    case 501:
+      errMessage = t('sys.api.errMsg501');
+      break;
+    case 502:
+      errMessage = t('sys.api.errMsg502');
+      break;
+    case 503:
+      errMessage = t('sys.api.errMsg503');
+      break;
+    case 504:
+      errMessage = t('sys.api.errMsg504');
+      break;
+    case 505:
+      errMessage = t('sys.api.errMsg505');
+      break;
+    default:
+  }
+
+  if (errMessage) {
+    if (errorMessageMode === 'modal') {
+      createErrorModal({ title: t('sys.api.errorTip'), content: errMessage });
+    } else if (errorMessageMode === 'message') {
+      error({ content: errMessage, key: `global_error_message_status_${status}` });
+    }
+  }
+}
diff --git a/src/utils/http/axios/helper.ts b/src/utils/http/axios/helper.ts
new file mode 100644
index 0000000..790cc3d
--- /dev/null
+++ b/src/utils/http/axios/helper.ts
@@ -0,0 +1,46 @@
+import { isObject, isString } from '/@/utils/is';
+import dayjs from "dayjs";
+// 代码逻辑说明: 【QQYUN-9138】系统用户保存的时间没有秒
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export function joinTimestamp<T extends boolean>(join: boolean, restful: T): T extends true ? string : object;
+
+export function joinTimestamp(join: boolean, restful = false): string | object {
+  if (!join) {
+    return restful ? '' : {};
+  }
+  const now = new Date().getTime();
+  if (restful) {
+    return `?_t=${now}`;
+  }
+  return { _t: now };
+}
+
+/**
+ * @description: Format request parameter time
+ */
+export function formatRequestDate(params: Recordable) {
+  if (Object.prototype.toString.call(params) !== '[object Object]') {
+    return;
+  }
+
+  for (const key in params) {
+    // 判断是否是dayjs实例
+    if (dayjs.isDayjs(params[key])) {
+      params[key] = params[key].format(DATE_TIME_FORMAT);
+    }
+    if (isString(key)) {
+      const value = params[key];
+      if (value) {
+        try {
+          params[key] = isString(value) ? value.trim() : value;
+        } catch (error) {
+          throw new Error(error);
+        }
+      }
+    }
+    if (isObject(params[key])) {
+      formatRequestDate(params[key]);
+    }
+  }
+}
diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts
new file mode 100644
index 0000000..e6e922f
--- /dev/null
+++ b/src/utils/http/axios/index.ts
@@ -0,0 +1,313 @@
+// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
+// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
+
+import type { AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from '/#/axios';
+import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
+import { VAxios } from './Axios';
+import { checkStatus } from './checkStatus';
+import { router } from '/@/router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { RequestEnum, ResultEnum, ContentTypeEnum, ConfigEnum } from '/@/enums/httpEnum';
+import { isString } from '/@/utils/is';
+import { getToken, getTenantId } from '/@/utils/auth';
+import { setObjToUrlParams, deepMerge } from '/@/utils';
+import signMd5Utils from '/@/utils/encryption/signMd5Utils';
+import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { joinTimestamp, formatRequestDate } from './helper';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { cloneDeep } from "lodash-es";
+const globSetting = useGlobSetting();
+const urlPrefix = globSetting.urlPrefix;
+const { createMessage, createErrorModal } = useMessage();
+
+/**
+ * @description: 数据处理，方便区分多种处理方式
+ */
+const transform: AxiosTransform = {
+  /**
+   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
+   */
+  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { t } = useI18n();
+    const { isTransformResponse, isReturnNativeResponse } = options;
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+    // 错误的时候返回
+
+    const { data } = res;
+    if (!data) {
+      // return '[HTTP] Request has no return value';
+      throw new Error(t('sys.api.apiRequestFailed'));
+    }
+    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code, result, message, success } = data;
+    // 这里逻辑可以根据项目进行修改
+    const hasSuccess = data && Reflect.has(data, 'code') && (code === ResultEnum.SUCCESS || code === 200);
+    if (hasSuccess) {
+      if (success && message && options.successMessageMode === 'success') {
+        //信息成功提示
+        createMessage.success(message);
+      }
+      return result;
+    }
+
+    // 在此处根据自己项目的实际情况对不同的code执行不同的操作
+    // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
+    let timeoutMsg = '';
+    switch (code) {
+      case ResultEnum.TIMEOUT:
+        timeoutMsg = t('sys.api.timeoutMessage');
+        const userStore = useUserStoreWithOut();
+        userStore.setToken(undefined);
+        userStore.logout(true);
+        break;
+      default:
+        if (message) {
+          timeoutMsg = message;
+        }
+    }
+
+    // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
+    // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
+    if (options.errorMessageMode === 'modal') {
+      createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg });
+    } else if (options.errorMessageMode === 'message') {
+      createMessage.error(timeoutMsg);
+    }
+
+    throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'));
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
+
+    // http开头的请求url，不加前缀
+    let isStartWithHttp = false;
+    const requestUrl = config.url;
+    if(requestUrl!=null && (requestUrl.startsWith("http:") || requestUrl.startsWith("https:"))){
+      isStartWithHttp = true;
+    }
+    // 代码逻辑说明: 【QQYUN-9685】构建 electron 桌面应用
+    if (!isStartWithHttp && requestUrl != null) {
+      // 由于electron的url是file://开头的，所以需要判断一下
+      isStartWithHttp = requestUrl.startsWith('file://');
+    }
+    if (!isStartWithHttp && joinPrefix) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (!isStartWithHttp && apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+    
+    const params = config.params || {};
+    const data = config.data || false;
+    formatDate && data && !isString(data) && formatRequestDate(data);
+    if (config.method?.toUpperCase() === RequestEnum.GET) {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else {
+      if (!isString(params)) {
+        formatDate && formatRequestDate(params);
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          // 非GET请求如果没有提供data，则将params视为data
+          config.data = params;
+          config.params = undefined;
+        }
+        if (joinParamsToUrl) {
+          config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data));
+        }
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params;
+        config.params = undefined;
+      }
+    }
+
+    // 代码逻辑说明: 【JEECG作为乾坤子应用】作为乾坤子应用启动时，拼接请求路径
+    if (globSetting.isQiankunMicro) {
+      if (config.url && config.url.startsWith('/')) {
+        config.url = globSetting.qiankunMicroAppEntry + config.url
+      }
+    }
+
+    return config;
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config: Recordable, options) => {
+    // 请求之前处理config
+    const token = getToken();
+    let tenantId: string | number = getTenantId();
+    
+    // 将签名和时间戳，添加在请求接口 Header
+    config.headers[ConfigEnum.TIMESTAMP] = signMd5Utils.getTimestamp();
+    config.headers[ConfigEnum.Sign] = signMd5Utils.getSign(config.url, cloneDeep(config.params), cloneDeep(config.data));
+    
+    config.headers[ConfigEnum.VERSION] = 'v3';
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
+      // jwt token
+      config.headers.Authorization = options.authenticationScheme ? `${options.authenticationScheme} ${token}` : token;
+      config.headers[ConfigEnum.TOKEN] = token;
+      
+      // 将签名和时间戳，添加在请求接口 Header
+      //config.headers[ConfigEnum.TIMESTAMP] = signMd5Utils.getTimestamp();
+      //config.headers[ConfigEnum.Sign] = signMd5Utils.getSign(config.url, config.params);
+      if (!tenantId) {
+        tenantId = 0;
+      }
+
+      // 代码逻辑说明: 【QQYUN-5279】修复分享的应用租户和当前登录租户不一致时，提示404的问题
+      const userStore = useUserStoreWithOut();
+      // 判断是否有临时租户id
+      if (userStore.hasShareTenantId && userStore.shareTenantId !== 0) {
+        // 临时租户id存在，使用临时租户id
+        tenantId = userStore.shareTenantId!;
+      }
+
+      config.headers[ConfigEnum.TENANT_ID] = tenantId;
+      //--update-end--author:liusq---date:20211105---for:将多租户id，添加在请求接口 Header
+
+      // ========================================================================================
+      // 代码逻辑说明: 添加低代码应用ID
+      let routeParams = router.currentRoute.value.params;
+      if (routeParams.appId) {
+        config.headers[ConfigEnum.X_LOW_APP_ID] = routeParams.appId;
+        // lowApp自定义筛选条件
+        if (routeParams.lowAppFilter) {
+          config.params = { ...config.params, ...JSON.parse(routeParams.lowAppFilter as string) };
+          delete routeParams.lowAppFilter;
+        }
+      }
+      // ========================================================================================
+
+    }
+    return config;
+  },
+
+  /**
+   * @description: 响应拦截器处理
+   */
+  responseInterceptors: (res: AxiosResponse<any>) => {
+    return res;
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  responseInterceptorsCatch: (error: any) => {
+    const { t } = useI18n();
+    const errorLogStore = useErrorLogStoreWithOut();
+    errorLogStore.addAjaxErrorInfo(error);
+    const { response, code, message, config } = error || {};
+    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
+    //scott 20211022 token失效提示信息
+    //const msg: string = response?.data?.error?.message ?? '';
+    const msg: string = response?.data?.message ?? '';
+    const err: string = error?.toString?.() ?? '';
+    let errMessage = '';
+
+    try {
+      if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
+        errMessage = t('sys.api.apiTimeoutMessage');
+      }
+      if (err?.includes('Network Error')) {
+        errMessage = t('sys.api.networkExceptionMsg');
+      }
+
+      if (errMessage) {
+        if (errorMessageMode === 'modal') {
+          createErrorModal({ title: t('sys.api.errorTip'), content: errMessage });
+        } else if (errorMessageMode === 'message') {
+          createMessage.error(errMessage);
+        }
+        return Promise.reject(error);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+
+    checkStatus(error?.response?.status, msg, errorMessageMode);
+    return Promise.reject(error);
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
+        // authentication schemes，e.g: Bearer
+        // authenticationScheme: 'Bearer',
+        authenticationScheme: '',
+        //接口超时设置
+        timeout: 10 * 1000,
+        // 基础接口地址
+        // baseURL: globSetting.apiUrl,
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 如果是form-data格式
+        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 异常消息提示类型
+          errorMessageMode: 'message',
+          // 成功消息提示类型
+          successMessageMode: 'success',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+        },
+      },
+      opt || {}
+    )
+  );
+}
+export const defHttp = createAxios();
+
+// other api url
+// export const otherHttp = createAxios({
+//   requestOptions: {
+//     apiUrl: 'xxx',
+//   },
+// });
diff --git a/src/utils/iconfont2.ts b/src/utils/iconfont2.ts
new file mode 100644
index 0000000..6056c43
--- /dev/null
+++ b/src/utils/iconfont2.ts
@@ -0,0 +1,4 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+import '/@/assets/icons/js/iconfont2.js';
+
+export const IconFont = createFromIconfontCN({});
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..27835de
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,823 @@
+import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
+import type { App, Plugin } from 'vue';
+import type { FormSchema, FormActionType } from "@/components/Form";
+
+import { unref } from 'vue';
+import { isObject, isFunction, isString } from '/@/utils/is';
+import { dynamicPages } from './dynamicPages';
+import Big from 'big.js';
+import dayjs from "dayjs";
+// 代码逻辑说明: 【VUEN-656】配置外部网址打不开，原因是带了#号，需要替换一下
+export const URL_HASH_TAB = `__AGWE4H__HASH__TAG__PWHRG__`;
+
+export const noop = () => {};
+
+/**
+ * @description:  Set ui mount node
+ */
+export function getPopupContainer(node?: HTMLElement): HTMLElement {
+  return (node?.parentNode as HTMLElement) ?? document.body;
+}
+
+/**
+ * Add the object as a parameter to the URL
+ * @param baseUrl url
+ * @param obj
+ * @returns {string}
+ * eg:
+ *  let obj = {a: '3', b: '4'}
+ *  setObjToUrlParams('www.baidu.com', obj)
+ *  ==>www.baidu.com?a=3&b=4
+ */
+export function setObjToUrlParams(baseUrl: string, obj: any): string {
+  let parameters = '';
+  for (const key in obj) {
+    parameters += key + '=' + encodeURIComponent(obj[key]) + '&';
+  }
+  parameters = parameters.replace(/&$/, '');
+  return /\?$/.test(baseUrl) ? baseUrl + parameters : baseUrl.replace(/\/?$/, '?') + parameters;
+}
+
+export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
+  let key: string;
+  for (key in target) {
+    // 代码逻辑说明: 【QQYUN-7872】online表单label较长优化
+    if (isObject(src[key]) && isObject(target[key])) {
+      src[key] = deepMerge(src[key], target[key]);
+    } else {
+      src[key] = target[key];
+    }
+  }
+  return src;
+}
+
+export function openWindow(url: string, opt?: { target?: TargetContext | string; noopener?: boolean; noreferrer?: boolean }) {
+  const { target = '__blank', noopener = true, noreferrer = true } = opt || {};
+  const feature: string[] = [];
+
+  noopener && feature.push('noopener=yes');
+  noreferrer && feature.push('noreferrer=yes');
+
+  window.open(url, target, feature.join(','));
+}
+
+// dynamic use hook props
+export function getDynamicProps<T, U>(props: T): Partial<U> {
+  const ret: Recordable = {};
+
+  // @ts-ignore
+  Object.keys(props).map((key) => {
+    ret[key] = unref((props as Recordable)[key]);
+  });
+
+  return ret as Partial<U>;
+}
+
+/**
+ * 获取表单字段值数据类型
+ * @param props
+ * @param field
+ * @updateBy:zyf
+ */
+export function getValueType(props, field) {
+  let formSchema = unref(unref(props)?.schemas)
+  let valueType = 'string';
+  if (formSchema) {
+    let schema = formSchema.filter((item) => item.field === field)[0];
+    // 代码逻辑说明: 【issues/8976】useListPage 查询中componentProps是函数时获取不到valueType
+    if (schema && schema.componentProps) {
+      if (isFunction(schema.componentProps)) {
+        try {
+          const result = schema.componentProps({ schema, tableAction: {}, formModel: {}, formActionType: {} });
+          valueType = result?.valueType ?? valueType;
+        } catch (err) {}
+      } else {
+        valueType = schema.componentProps.valueType ? schema.componentProps.valueType : valueType;
+      }
+    }
+  }
+  return valueType;
+}
+
+/**
+ * 获取表单字段值数据类型
+ * @param schema
+ * @param formAction
+ */
+export function getValueTypeBySchema(schema: FormSchema, formAction: FormActionType) {
+  let valueType = 'string';
+  if (schema) {
+    const componentProps = formAction.getSchemaComponentProps(schema);
+    // 代码逻辑说明: 【issues/8738】componentProps是函数时获取不到valueType
+    if (isFunction(componentProps)) {
+      try {
+        const result = componentProps({ schema, tableAction: {}, formModel: {}, formActionType: {} });
+        valueType = result?.valueType ?? valueType;
+      } catch (err) {}
+    } else {
+      valueType = componentProps?.valueType ? componentProps?.valueType : valueType;
+    }
+  }
+  return valueType;
+}
+
+/**
+ * 通过picker属性获取日期数据
+ * @param data
+ * @param picker
+ */
+export function getDateByPicker(data, picker) {
+  if (!data || !picker) {
+    return data;
+  }
+  /**
+   * 需要把年、年月、设置成这段时间内的第一天（[年季度]不需要处理antd回传的就是该季度的第一天，[年周]也不处理）
+   * 例如日期格式是年，传给数据库的时间必须是20240101
+   * 例如日期格式是年月（选择了202502），传给数据库的时间必须是20250201
+   */
+  if (picker === 'year') {
+    return dayjs(data).set('month', 0).set('date', 1).format('YYYY-MM-DD');
+  } else if (picker === 'month') {
+    return dayjs(data).set('date', 1).format('YYYY-MM-DD');
+  } else if (picker === 'week') {
+    return dayjs(data).startOf('week').format('YYYY-MM-DD');
+  }
+  return data;
+}
+
+export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+}
+/**
+ * 深度克隆对象、数组
+ * @param obj 被克隆的对象
+ * @return 克隆后的对象
+ */
+export function cloneObject(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+export const withInstall = <T>(component: T, alias?: string) => {
+  //console.log("---初始化---", component)
+
+  const comp = component as any;
+  comp.install = (app: App) => {
+    // @ts-ignore
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};
+
+/**
+ * 获取url地址参数
+ * @param paraName
+ */
+export function getUrlParam(paraName) {
+  let url = document.location.toString();
+  let arrObj = url.split('?');
+
+  if (arrObj.length > 1) {
+    let arrPara = arrObj[1].split('&');
+    let arr;
+
+    for (let i = 0; i < arrPara.length; i++) {
+      arr = arrPara[i].split('=');
+
+      if (arr != null && arr[0] == paraName) {
+        return arr[1];
+      }
+    }
+    return '';
+  } else {
+    return '';
+  }
+}
+
+/**
+ * 休眠（setTimeout的promise版）
+ * @param ms 要休眠的时间，单位：毫秒
+ * @param fn callback，可空
+ * @return Promise
+ */
+export function sleep(ms: number, fn?: Fn) {
+  return new Promise<void>((resolve) =>
+    setTimeout(() => {
+      fn && fn();
+      resolve();
+    }, ms)
+  );
+}
+
+/**
+ * 不用正则的方式替换所有值
+ * @param text 被替换的字符串
+ * @param checker  替换前的内容
+ * @param replacer 替换后的内容
+ * @returns {String} 替换后的字符串
+ */
+export function replaceAll(text, checker, replacer) {
+  let lastText = text;
+  text = text.replace(checker, replacer);
+  if (lastText !== text) {
+    return replaceAll(text, checker, replacer);
+  }
+  return text;
+}
+
+/**
+ * 获取URL上参数
+ * @param url
+ */
+export function getQueryVariable(url) {
+  if (!url) return;
+
+  var t,
+    n,
+    r,
+    i = url.split('?')[1],
+    s = {};
+  (t = i.split('&')), (r = null), (n = null);
+  for (var o in t) {
+    var u = t[o].indexOf('=');
+    u !== -1 && ((r = t[o].substr(0, u)), (n = t[o].substr(u + 1)), (s[r] = n));
+  }
+  return s;
+}
+/**
+ * 判断是否显示办理按钮
+ * @param bpmStatus
+ * @returns {*}
+ */
+export function showDealBtn(bpmStatus) {
+  if (bpmStatus != '1' && bpmStatus != '3' && bpmStatus != '4') {
+    return true;
+  }
+  return false;
+}
+/**
+ * 数字转大写
+ * @param value
+ * @returns {*}
+ */
+export function numToUpper(value) {
+  if (value != '') {
+    let unit = new Array('仟', '佰', '拾', '', '仟', '佰', '拾', '', '角', '分');
+    const toDx = (n) => {
+      switch (n) {
+        case '0':
+          return '零';
+        case '1':
+          return '壹';
+        case '2':
+          return '贰';
+        case '3':
+          return '叁';
+        case '4':
+          return '肆';
+        case '5':
+          return '伍';
+        case '6':
+          return '陆';
+        case '7':
+          return '柒';
+        case '8':
+          return '捌';
+        case '9':
+          return '玖';
+      }
+    };
+    let lth = value.toString().length;
+    // 代码逻辑说明: 【issues/7493】numToUpper方法返回解决错误
+    value = new Big(value).times(100);
+    value += '';
+    let length = value.length;
+    if (lth <= 8) {
+      let result = '';
+      for (let i = 0; i < length; i++) {
+        if (i == 2) {
+          result = '元' + result;
+        } else if (i == 6) {
+          result = '万' + result;
+        }
+        if (value.charAt(length - i - 1) == 0) {
+          if (i != 0 && i != 1) {
+            if (result.charAt(0) != '零' && result.charAt(0) != '元' && result.charAt(0) != '万') {
+              result = '零' + result;
+            }
+          }
+          continue;
+        }
+        result = toDx(value.charAt(length - i - 1)) + unit[unit.length - i - 1] + result;
+      }
+      result += result.charAt(result.length - 1) == '元' ? '整' : '';
+      return result;
+    } else {
+      return null;
+    }
+  }
+  return null;
+}
+
+// 代码逻辑说明: 解决老的vue2动态导入文件语法 vite不支持的问题
+export function importViewsFile(path): Promise<any> {
+  if (path.startsWith('/')) {
+    path = path.substring(1);
+  }
+  let page = '';
+  if (path.endsWith('.vue')) {
+    page = `../views/${path}`;
+  } else {
+    page = `../views/${path}.vue`;
+  }
+  return new Promise((resolve, reject) => {
+    let flag = true;
+    for (const path in dynamicPages) {
+      if (path == page) {
+        flag = false;
+        dynamicPages[path]().then((mod) => {
+          console.log(path, mod);
+          resolve(mod);
+        });
+      }
+    }
+    if (flag) {
+      reject('该文件不存在:' + page);
+    }
+  });
+}
+
+
+/**
+ * 跳转至积木报表的 预览页面
+ * @param url
+ * @param id
+ * @param token
+ */
+export function goJmReportViewPage(url, id, token) {
+  // URL支持{{ window.xxx }}占位符变量
+  url = url.replace(/{{([^}]+)?}}/g, (_s1, s2) => _eval(s2))
+  if (url.includes('?')) {
+    url += '&'
+  } else {
+    url += '?'
+  }
+  url += `id=${id}`
+  url += `&token=${token}`
+  window.open(url)
+}
+
+/**
+ * 获取随机颜色
+ */
+export function getRandomColor(index?) {
+
+  const colors = [
+    'rgb(100, 181, 246)',
+    'rgb(77, 182, 172)',
+    'rgb(255, 183, 77)',
+    'rgb(229, 115, 115)',
+    'rgb(149, 117, 205)',
+    'rgb(161, 136, 127)',
+    'rgb(144, 164, 174)',
+    'rgb(77, 208, 225)',
+    'rgb(129, 199, 132)',
+    'rgb(255, 138, 101)',
+    'rgb(133, 202, 205)',
+    'rgb(167, 214, 118)',
+    'rgb(254, 225, 89)',
+    'rgb(251, 199, 142)',
+    'rgb(239, 145, 139)',
+    'rgb(169, 181, 255)',
+    'rgb(231, 218, 202)',
+    'rgb(252, 128, 58)',
+    'rgb(254, 161, 172)',
+    'rgb(194, 163, 205)',
+  ];
+  return index && index < 19 ? colors[index] : colors[Math.floor((Math.random()*(colors.length-1)))];
+}
+
+export function getRefPromise(componentRef) {
+  return new Promise((resolve) => {
+    (function next() {
+      const ref = componentRef.value;
+      if (ref) {
+        resolve(ref);
+      } else {
+        setTimeout(() => {
+          next();
+        }, 100);
+      }
+    })();
+  });
+}
+
+/**
+ * 2023-09-04
+ * liaozhiyang
+ * 用new Function替换eval
+ */
+export function _eval(str: string) {
+ return new Function(`return ${str}`)();
+}
+
+/**
+ * 2024-04-30
+ * liaozhiyang
+ * 通过时间或者时间戳获取对应antd的年、月、周、季度。
+ */
+export function getWeekMonthQuarterYear(date) {
+  // 获取 ISO 周数的函数
+  const getISOWeek = (date) => {
+    const jan4 = new Date(date.getFullYear(), 0, 4);
+    const oneDay = 86400000; // 一天的毫秒数
+    return Math.ceil(((date - jan4.getTime()) / oneDay + jan4.getDay() + 1) / 7);
+  };
+  // 将时间戳转换为日期对象
+  const dateObj = new Date(date);
+  // 计算周
+  const week = getISOWeek(dateObj);
+  // 计算月
+  const month = dateObj.getMonth() + 1; // 月份是从0开始的，所以要加1
+  // 计算季度
+  const quarter = Math.floor(dateObj.getMonth() / 3) + 1;
+  // 计算年
+  const year = dateObj.getFullYear();
+  return {
+    year: `${year}`,
+    month: `${year}-${month.toString().padStart(2, '0')}`,
+    week: `${year}-${week}周`,
+    quarter: `${year}-Q${quarter}`,
+  };
+}
+
+/**
+ * 2024-05-17
+ * liaozhiyang
+ * 设置挂载的modal元素有可能会有多个，需要找到对应的。
+ */
+export const setPopContainer = (node, selector) => {
+  if (typeof selector === 'string') {
+    const targetEles = Array.from(document.querySelectorAll(selector));
+    if (targetEles.length > 1) {
+      const retrospect = (node, elems) => {
+        let ele = node.parentNode;
+        while (ele) {
+          const findParentNode = elems.find(item => item === ele);
+          if (findParentNode) {
+            ele = null;
+            return findParentNode;
+          } else {
+            ele = ele.parentNode;
+          }
+        }
+        return null;
+      };
+      const elem = retrospect(node, targetEles);
+      if (elem) {
+        return elem;
+      } else {
+        return document.querySelector(selector);
+      }
+    } else {
+      return document.querySelector(selector);
+    }
+  } else {
+    return selector;
+  }
+};
+
+/**
+ * 2024-06-14
+ * liaozhiyang
+ * 根据控件显示条件
+ * label、value通用，title、val给权限管理用的
+ */
+export function useConditionFilter() {
+
+  // 通用条件
+  const commonConditionOptions = [
+    {label: '为空', value: 'empty', val: 'EMPTY'},
+    {label: '不为空', value: 'not_empty', val: 'NOT_EMPTY'},
+  ]
+
+  // 数值、日期
+  const numberConditionOptions = [
+    { label: '等于', value: 'eq', val: '=' },
+    { label: '在...中', value: 'in', val: 'IN', title: '包含' },
+    { label: '不等于', value: 'ne', val: '!=' },
+    { label: '大于', value: 'gt', val: '>' },
+    { label: '大于等于', value: 'ge', val: '>=' },
+    { label: '小于', value: 'lt', val: '<' },
+    { label: '小于等于', value: 'le', val: '<=' },
+    ...commonConditionOptions,
+  ];
+
+  // 文本、密码、多行文本、富文本、markdown
+  const inputConditionOptions = [
+    { label: '等于', value: 'eq', val: '=' },
+    { label: '模糊', value: 'like', val: 'LIKE' },
+    { label: '以..开始', value: 'right_like', title: '右模糊', val: 'RIGHT_LIKE' },
+    { label: '以..结尾', value: 'left_like', title: '左模糊', val: 'LEFT_LIKE' },
+    { label: '在...中', value: 'in', val: 'IN', title: '包含' },
+    { label: '不等于', value: 'ne', val: '!=' },
+    ...commonConditionOptions,
+  ];
+
+  // 下拉、单选、多选、开关、用户、部门、关联记录、省市区、popup、popupDict、下拉多选、下拉搜索、分类字典、自定义树
+  const selectConditionOptions = [
+    { label: '等于', value: 'eq', val: '=' },
+    { label: '在...中', value: 'in', val: 'IN', title: '包含' },
+    { label: '不等于', value: 'ne', val: '!=' },
+    ...commonConditionOptions,
+  ];
+
+  const def = [
+    { label: '等于', value: 'eq', val: '=' },
+    { label: '模糊', value: 'like', val: 'LIKE' },
+    { label: '以..开始', value: 'right_like', title: '右模糊', val: 'RIGHT_LIKE' },
+    { label: '以..结尾', value: 'left_like', title: '左模糊', val: 'LEFT_LIKE' },
+    { label: '在...中', value: 'in', val: 'IN', title: '包含' },
+    { label: '不等于', value: 'ne', val: '!=' },
+    { label: '大于', value: 'gt', val: '>' },
+    { label: '大于等于', value: 'ge', val: '>=' },
+    { label: '小于', value: 'lt', val: '<' },
+    { label: '小于等于', value: 'le', val: '<=' },
+    ...commonConditionOptions,
+  ];
+
+  const filterCondition = (data) => {
+    if (data.view == 'text' && data.fieldType == 'number') {
+      data.view = 'number';
+    }
+    switch (data.view) {
+      case 'file':
+      case 'image':
+      case 'password':
+        return commonConditionOptions;
+      case 'text':
+      case 'textarea':
+      case 'umeditor':
+      case 'markdown':
+      case 'pca':
+      case 'popup':
+        return inputConditionOptions;
+      case 'list':
+      case 'radio':
+      case 'checkbox':
+      case 'switch':
+      case 'sel_user':
+      case 'sel_depart':
+      case 'link_table':
+      case 'popup_dict':
+      case 'list_multi':
+      case 'sel_search':
+      case 'cat_tree':
+      case 'sel_tree':
+        return selectConditionOptions;
+      case 'date':
+      // number是虚拟的
+      case 'number':
+        return numberConditionOptions;
+      default:
+        return def;
+    }
+  };
+  return { filterCondition };
+}
+// 获取url中的参数
+export const getUrlParams = (url) => {
+  const result = {
+    url: '',
+    params: {},
+  };
+  const list = url.split('?');
+  result.url = list[0];
+  const params = list[1];
+  if (params) {
+    const list = params.split('&');
+    list.forEach((ele) => {
+      const dic = ele.split('=');
+      const label = dic[0];
+      result.params[label] = dic[1];
+    });
+  }
+  return result;
+};
+
+/* 20250325
+ * liaozhiyang
+ * 分割url字符成数组
+ * 【issues/7990】图片参数中包含逗号会错误的识别成多张图
+ * */
+export const split = (str) => {
+  if (isString(str)) {
+    const text = str.trim();
+    if (text.startsWith('http')) {
+      const parts = str.split(',');
+      const urls: any = [];
+      let currentUrl = '';
+      for (const part of parts) {
+        if (part.startsWith('http://') || part.startsWith('https://')) {
+          // 如果遇到新的URL开头，保存当前URL并开始新的URL
+          if (currentUrl) {
+            urls.push(currentUrl);
+          }
+          currentUrl = part;
+        } else {
+          // 否则，是当前URL的一部分（如参数）
+          currentUrl += ',' + part;
+        }
+      }
+      // 添加最后一个URL
+      if (currentUrl) {
+        urls.push(currentUrl);
+      }
+      return urls;
+    } else {
+      return str.split(',');
+    }
+  }
+  return str;
+};
+/**
+  * 处理word文档中的o:p标签
+  * @param html
+ */
+export const removeSpecialTags = (html: string): string => {
+  if (!html) return '';
+  try {
+    const BORDER = '1px solid #8c8c8c';
+
+    // ===================================================================
+    // 第一步：移除 Office 垃圾标签（纯字符串）
+    // ===================================================================
+    // o:p 标签（转义和普通形式）
+    html = html.replace(/&lt;o:p[^&]*?&gt;.*?&lt;\/o:p&gt;/gis, '');
+    html = html.replace(/&lt;o:p[^&]*?\/?&gt;/gis, '');
+    html = html.replace(/&lt;\/o:p&gt;/gis, '');
+    html = html.replace(/<o:p[^>]*>.*?<\/o:p>/gis, '');
+    html = html.replace(/<o:p[^>]*\/?>/gis, '');
+    html = html.replace(/<\/o:p>/gis, '');
+
+    // style 标签（转义和普通形式）
+    html = html.replace(/&lt;style[^&]*?&gt;.*?&lt;\/style&gt;/gis, '');
+    html = html.replace(/&lt;style[^&]*?\/?&gt;/gis, '');
+    html = html.replace(/&lt;\/style&gt;/gis, '');
+    html = html.replace(/<style[^>]*>.*?<\/style>/gis, '');
+
+    // 条件注释和 Office 命名空间标签
+    html = html.replace(/<!--\[if[^>]*>.*?<!\[endif\]-->/gis, '');
+    html = html.replace(/<\/?w:[^>]*>/gis, '');
+    html = html.replace(/<\/?xml[^>]*>/gis, '');
+    html = html.replace(/<\/?v:[^>]*>/gis, '');
+
+    // ===================================================================
+    // 第二步：DOM 清理（仅清理空段落，完全不动表格行结构）
+    //   ★ 关键：放在边框处理之前，防止 DOM 序列化丢失 !important
+    // ===================================================================
+    try {
+      const DOMParserCtor: any =
+          typeof DOMParser !== 'undefined' ? DOMParser : (globalThis as any).DOMParser;
+      if (DOMParserCtor) {
+        const parser = new DOMParserCtor() as DOMParser;
+        const doc = parser.parseFromString(html, 'text/html') as Document;
+
+        // 仅清理单元格内的空 <p> 标签
+        const cells = doc.querySelectorAll('td,th');
+        for (let ci = 0; ci < cells.length; ci++) {
+          const cell = cells[ci] as HTMLElement;
+          if (!cell) continue;
+          const ps = cell.querySelectorAll('p');
+          for (let pi = ps.length - 1; pi >= 0; pi--) {
+            const p = ps[pi] as HTMLParagraphElement;
+            if (!p) continue;
+            const content = (p.innerHTML || '').replace(/&nbsp;|\u00A0/g, '').trim();
+            if (content === '') {
+              p.remove();
+            } else {
+              const frag = doc.createDocumentFragment();
+              while (p.firstChild) frag.appendChild(p.firstChild);
+              if (p.parentNode) p.parentNode.replaceChild(frag, p);
+            }
+          }
+        }
+
+        html = doc.body.innerHTML;
+      }
+    } catch (_) {
+      // DOM 不可用，跳过段落清理（不影响边框修复）
+    }
+
+    // ===================================================================
+    // 第三步：注入全局表格样式 <style>（兜底保障）
+    //   ★ 放在 DOM 序列化之后，确保 <style> 标签不会被 DOM 改写
+    // ===================================================================
+    const globalCSS = `<style>
+table{border-collapse:collapse!important;border-spacing:0!important;width:100%!important;max-width:100%!important;}
+table td,table th{border-top:${BORDER}!important;border-right:${BORDER}!important;border-bottom:${BORDER}!important;border-left:${BORDER}!important;padding:6px 8px!important;vertical-align:middle!important;box-sizing:border-box!important;empty-cells:show!important;}
+table td p,table th p{margin:0!important;padding:0!important;line-height:1.4!important;}
+img{max-width:100%!important;height:auto!important;display:block!important;}
+</style>`;
+
+    if (/<head[^>]*>/i.test(html)) {
+      html = html.replace(/(<head[^>]*>)/i, `$1${globalCSS}`);
+    } else if (/<html[^>]*>/i.test(html)) {
+      html = html.replace(/(<html[^>]*>)/i, `$1<head>${globalCSS}</head>`);
+    } else {
+      html = globalCSS + html;
+    }
+
+    // ===================================================================
+    // 第四步：纯字符串处理内联样式（核心边框修复）
+    //   ★ 最后执行！确保输出 HTML 中的 !important 不会被任何后续处理丢失
+    //
+    //   策略：按分号拆分 style 值，逐条判断属性名，
+    //         过滤掉所有 border* 和 mso-* 声明，
+    //         然后追加统一的边框声明（含 !important）
+    // ===================================================================
+
+    /**
+     * 从 CSS style 字符串中移除所有 border* 和 mso-* 声明，
+     * 保留其余布局相关属性（width, height, padding, text-align 等）
+     */
+    function stripBorderAndMso(styleStr: string): string {
+      return styleStr
+          .split(';')
+          .filter(function (decl) {
+            const trimmed = decl.trim();
+            if (!trimmed) return false;
+            const colonIdx = trimmed.indexOf(':');
+            if (colonIdx === -1) return true; // 保留无效声明（安全起见）
+            const prop = trimmed.substring(0, colonIdx).trim().toLowerCase();
+            // 移除所有 border 开头和 mso- 开头的属性
+            if (prop.startsWith('border') || prop.startsWith('mso-')) return false;
+            return true;
+          })
+          .join(';');
+    }
+
+    // 4a. 移除 <table> 上的 border="0" HTML 属性
+    html = html.replace(/(<table\b[^>]*?)\sborder\s*=\s*['"]?0['"]?/gi, '$1');
+
+    // 4b. 处理 <table> 标签的内联样式
+    html = html.replace(/<table(\s[^>]*)>/gi, function (fullMatch, attrs) {
+      try {
+        const sm = attrs.match(/\sstyle\s*=\s*(["'])([\s\S]*?)\1/i);
+        if (sm) {
+          const q = sm[1];
+          const cleaned = stripBorderAndMso(sm[2]);
+          const newStyle = cleaned
+              + ';border-collapse:collapse!important'
+              + ';border-spacing:0!important'
+              + ';width:100%!important';
+          return '<table' + attrs.replace(sm[0], ` style=${q}${newStyle}${q}`) + '>';
+        }
+        return '<table' + attrs
+            + ' style="border-collapse:collapse!important;border-spacing:0!important;width:100%!important">';
+      } catch (_) { return fullMatch; }
+    });
+
+    // 4c. 处理 <td>/<th> 标签的内联样式
+    const cellBorderCSS =
+        `border-top:${BORDER}!important;` +
+        `border-right:${BORDER}!important;` +
+        `border-bottom:${BORDER}!important;` +
+        `border-left:${BORDER}!important;` +
+        'padding:6px 8px!important;' +
+        'vertical-align:middle!important;' +
+        'box-sizing:border-box!important';
+
+    html = html.replace(/<(td|th)(\s[^>]*)>/gi, function (fullMatch, tag, attrs) {
+      try {
+        const sm = attrs.match(/\sstyle\s*=\s*(["'])([\s\S]*?)\1/i);
+        if (sm) {
+          const q = sm[1];
+          const cleaned = stripBorderAndMso(sm[2]);
+          const newStyle = (cleaned ? cleaned + ';' : '') + cellBorderCSS;
+          return '<' + tag + attrs.replace(sm[0], ` style=${q}${newStyle}${q}`) + '>';
+        }
+        return '<' + tag + attrs + ` style="${cellBorderCSS}">`;
+      } catch (_) { return fullMatch; }
+    });
+
+    return html;
+  } catch (_) {
+    return html;
+  }
+};
+
+
diff --git a/src/utils/is.ts b/src/utils/is.ts
new file mode 100644
index 0000000..612d174
--- /dev/null
+++ b/src/utils/is.ts
@@ -0,0 +1,107 @@
+const toString = Object.prototype.toString;
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+export function isDef<T = unknown>(val?: T): val is T {
+  return typeof val !== 'undefined';
+}
+
+export function isUnDef<T = unknown>(val?: T): val is T {
+  return !isDef(val);
+}
+
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object');
+}
+
+export function isEmpty<T = unknown>(val: T): val is T {
+  if (isArray(val) || isString(val)) {
+    return val.length === 0;
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0;
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0;
+  }
+
+  return false;
+}
+
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date');
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val);
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}
+
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number');
+}
+
+export function isPromise<T = any>(val: any): val is Promise<T> {
+  // 代码逻辑说明: 不能既是 Promise 又是 Object --------
+  return is(val, 'Promise') && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isString(val: unknown): val is string {
+  return is(val, 'String');
+}
+
+export function isJsonObjectString(val: string): val is string {
+  if (!val) {
+    return false;
+  }
+  return val.startsWith('{') && val.endsWith('}');
+}
+
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function';
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean');
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp');
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+export function isWindow(val: any): val is Window {
+  return typeof window !== 'undefined' && is(val, 'Window');
+}
+
+export function isElement(val: unknown): val is Element {
+  return isObject(val) && !!val.tagName;
+}
+
+export function isMap(val: unknown): val is Map<any, any> {
+  return is(val, 'Map');
+}
+
+export const isServer = typeof window === 'undefined';
+
+export const isClient = !isServer;
+
+export function isUrl(path: string): boolean {
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+  return reg.test(path);
+}
diff --git a/src/utils/lib/echarts.ts b/src/utils/lib/echarts.ts
new file mode 100644
index 0000000..9b40020
--- /dev/null
+++ b/src/utils/lib/echarts.ts
@@ -0,0 +1,51 @@
+import * as echarts from 'echarts/core';
+
+import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts';
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+} from 'echarts/components';
+
+// TODO 如果想换成SVG渲染，就导出SVGRenderer，
+//  并且放到 echarts.use 里，注释掉 CanvasRenderer
+import { /*SVGRenderer*/ CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  // TODO 因为要兼容Online图表自适应打印，所以改成 CanvasRenderer，可能会模糊
+  CanvasRenderer,
+  PictorialBarChart,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+]);
+
+export default echarts;
diff --git a/src/utils/log.ts b/src/utils/log.ts
new file mode 100644
index 0000000..8f79800
--- /dev/null
+++ b/src/utils/log.ts
@@ -0,0 +1,9 @@
+const projectName = import.meta.env.VITE_GLOB_APP_TITLE;
+
+export function warn(message: string) {
+  console.warn(`[${projectName} warn]:${message}`);
+}
+
+export function error(message: string) {
+  throw new Error(`[${projectName} error]:${message}`);
+}
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
new file mode 100644
index 0000000..4b15bba
--- /dev/null
+++ b/src/utils/mitt.ts
@@ -0,0 +1,101 @@
+/**
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
+ */
+
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = any> = (event?: T) => void;
+export type WildcardHandler = (type: EventType, event?: any) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList = Array<Handler>;
+export type WildCardEventHandlerList = Array<WildcardHandler>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap = Map<EventType, EventHandlerList | WildCardEventHandlerList>;
+
+export interface Emitter {
+  all: EventHandlerMap;
+
+  on<T = any>(type: EventType, handler: Handler<T>): void;
+  on(type: '*', handler: WildcardHandler): void;
+
+  off<T = any>(type: EventType, handler: Handler<T>): void;
+  off(type: '*', handler: WildcardHandler): void;
+
+  emit<T = any>(type: EventType, event?: T): void;
+  emit(type: '*', event?: any): void;
+  clear(): void;
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt}
+ */
+export default function mitt(all?: EventHandlerMap): Emitter {
+  all = all || new Map();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * Register an event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `"*"` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @memberOf mitt
+     */
+    on<T = any>(type: EventType, handler: Handler<T>) {
+      const handlers = all?.get(type);
+      const added = handlers && handlers.push(handler);
+      if (!added) {
+        all?.set(type, [handler]);
+      }
+    },
+
+    /**
+     * Remove an event handler for the given type.
+     * @param {string|symbol} type Type of event to unregister `handler` from, or `"*"`
+     * @param {Function} handler Handler function to remove
+     * @memberOf mitt
+     */
+    off<T = any>(type: EventType, handler: Handler<T>) {
+      const handlers = all?.get(type);
+      if (handlers) {
+        handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+      }
+    },
+
+    /**
+     * Invoke all handlers for the given type.
+     * If present, `"*"` handlers are invoked after type-matched handlers.
+     *
+     * Note: Manually firing "*" handlers is not supported.
+     *
+     * @param {string|symbol} type The event type to invoke
+     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+     * @memberOf mitt
+     */
+    emit<T = any>(type: EventType, evt: T) {
+      ((all?.get(type) || []) as EventHandlerList).slice().map((handler) => {
+        handler(evt);
+      });
+      ((all?.get('*') || []) as WildCardEventHandlerList).slice().map((handler) => {
+        handler(type, evt);
+      });
+    },
+
+    /**
+     * Clear all
+     */
+    clear() {
+      this.all.clear();
+    },
+  };
+}
diff --git a/src/utils/monorepo/dynamicRouter.ts b/src/utils/monorepo/dynamicRouter.ts
new file mode 100644
index 0000000..11f9ab8
--- /dev/null
+++ b/src/utils/monorepo/dynamicRouter.ts
@@ -0,0 +1,19 @@
+export type DynamicViewsRecord = Record<string, () => Promise<Recordable>>;
+
+/** 已注册模块的动态页面 */
+export const packageViews: DynamicViewsRecord = {};
+
+/**
+ * 注册动态路由页面
+ * @param getViews 获取该模块下所有页面的方法
+ */
+export function registerDynamicRouter(getViews: () => DynamicViewsRecord) {
+  if (typeof getViews === 'function') {
+    let dynamicViews = getViews();
+    Object.keys(dynamicViews).forEach((key) => {
+      // 处理动态页面的key，使其可以让路由识别
+      let newKey = key.replace('./src/views', '../../views');
+      packageViews[newKey] = dynamicViews[key];
+    });
+  }
+}
diff --git a/src/utils/monorepo/registerPackages.ts b/src/utils/monorepo/registerPackages.ts
new file mode 100644
index 0000000..4223c7e
--- /dev/null
+++ b/src/utils/monorepo/registerPackages.ts
@@ -0,0 +1,140 @@
+import type { App } from 'vue';
+import { warn } from '/@/utils/log';
+import { registerDynamicRouter } from '/@/utils/monorepo/dynamicRouter';
+
+// 懒加载模块配置（按需加载，访问相关路由时才加载对应包）
+const lazyPackages = [
+  { name: '@jeecg/aiflow', importer: () => import('@jeecg/aiflow') },
+];
+
+let appInstance: App | null = null;
+
+// noinspection JSUnusedGlobalSymbols
+const installOptions = {
+  baseImport,
+};
+
+export function registerPackages(app: App) {
+  // 仅保存 app 实例，不立即加载模块
+  appInstance = app;
+  // app.component(
+  //   'SuperQuery',
+  //   createAsyncComponent(() => import('@jeecg/online').then(mod => mod.SuperQuery))
+  // );
+  // app.component(
+  //   'JOnlineSearchSelect',
+  //   createAsyncComponent(() => import('@jeecg/online').then(mod => mod.JOnlineSearchSelect))
+  // );
+}
+
+/** 已加载的包缓存 */
+const loadedPackages = new Map<string, any>();
+/** 正在加载的包 Promise 缓存（防止重复加载） */
+const loadingPromises = new Map<string, Promise<any>>();
+
+/**
+ * 按需加载包并注册
+ */
+async function ensurePackageLoaded(pkgConfig: typeof lazyPackages[number]) {
+  const { name, importer } = pkgConfig;
+  if (loadedPackages.has(name)) {
+    return loadedPackages.get(name);
+  }
+  if (!loadingPromises.has(name)) {
+    const promise = importer().then((pkg) => {
+      const mod = pkg.default || pkg;
+      if (appInstance) {
+        appInstance.use(mod, installOptions);
+        registerDynamicRouter(mod.getViews);
+      }
+      loadedPackages.set(name, mod);
+      loadingPromises.delete(name);
+      return mod;
+    });
+    loadingPromises.set(name, promise);
+  }
+  return loadingPromises.get(name);
+}
+
+/**
+ * 根据 component 路径关键字匹配优先加载的包
+ */
+function getMatchedPackage(component: string): typeof lazyPackages[number] | null {
+  const lc = component.toLowerCase();
+  for (const pkgConfig of lazyPackages) {
+    // 从包名中提取关键字，如 @jeecg/online -> online, @jeecg/aiflow -> aiflow
+    const keyword = pkgConfig.name.split('/').pop()!;
+    if (lc.includes(keyword)) {
+      return pkgConfig;
+    }
+  }
+  return null;
+}
+
+/**
+ * 从指定包中查找组件
+ */
+async function findComponentInPackage(pkgConfig: typeof lazyPackages[number], component: string): Promise<(() => Promise<Recordable>) | null> {
+  try {
+    const mod = await ensurePackageLoaded(pkgConfig);
+    const views = mod.getViews();
+    for (const key of Object.keys(views)) {
+      const k = key.replace('./src/views', '');
+      const startFlag = component.startsWith('/');
+      const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
+      const startIndex = startFlag ? 0 : 1;
+      const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
+      if (k.substring(startIndex, lastIndex) === component) {
+        return views[key];
+      }
+    }
+  } catch (e) {
+    // 包不存在或加载失败，跳过
+  }
+  return null;
+}
+
+/**
+ * 按需加载包组件：当路由匹配不到本地组件时调用
+ * 根据 component 路径中的关键字优先匹配对应包，避免无意义的遍历
+ */
+export async function loadPackageComponent(component: string): Promise<(() => Promise<Recordable>) | null> {
+  // 优先根据关键字精准匹配包
+  const matched = getMatchedPackage(component);
+  if (matched) {
+    return findComponentInPackage(matched, component);
+  }
+  // 未匹配到关键字，依次尝试所有包
+  for (const pkgConfig of lazyPackages) {
+    const result = await findComponentInPackage(pkgConfig, component);
+    if (result) return result;
+  }
+  return null;
+}
+
+// 模块里可使用的import
+const importGlobs = [import.meta.glob('../../utils/**/*.{ts,js,tsx}'), import.meta.glob('../../hooks/**/*.{ts,js,tsx}')];
+
+/**
+ * 基础项目导包
+ * 目前支持导入如下
+ * /@/utils/**
+ * /@/hooks/**
+ *
+ * @param path 文件路径，ts无需输入后缀名。如：/@/utils/common/compUtils
+ */
+async function baseImport(path: string) {
+  if (path) {
+    // 将 /@/ 替换成 ../../
+    path = path.replace(/^\/@\//, '../../');
+    for (const glob of importGlobs) {
+      for (const key of Object.keys(glob)) {
+        if (path === key || `${path}.ts` === key || `${path}.tsx` === key) {
+          return glob[key]();
+        }
+      }
+    }
+    warn(`引入失败：${path} 不存在`);
+  }
+  return null;
+}
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
new file mode 100644
index 0000000..16cf9cd
--- /dev/null
+++ b/src/utils/propTypes.ts
@@ -0,0 +1,35 @@
+import { CSSProperties, VNodeChild } from 'vue';
+import { createTypes, VueTypeValidableDef, VueTypesInterface, toValidableType } from 'vue-types';
+
+export type VueNode = VNodeChild | JSX.Element;
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+  // readonly trueBool: VueTypeValidableDef<boolean>;
+};
+const newPropTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined,
+}) as PropTypes;
+
+// 从 vue-types v5.0 开始，extend()方法已经废弃，当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
+class propTypes extends newPropTypes {
+  // a native-like validator that supports the `.validable` method
+  static get style() {
+    return toValidableType('style', {
+      type: [String, Object],
+    });
+  }
+
+  static get VNodeChild() {
+    return toValidableType('VNodeChild', {
+      type: undefined,
+    });
+  }
+}
+export { propTypes };
diff --git a/src/utils/props.ts b/src/utils/props.ts
new file mode 100644
index 0000000..7393d58
--- /dev/null
+++ b/src/utils/props.ts
@@ -0,0 +1,185 @@
+// copy from element-plus
+
+import { warn } from 'vue';
+import { isObject } from '@vue/shared';
+import { fromPairs } from 'lodash-es';
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Mutable } from './types';
+
+const wrapperKey = Symbol();
+export type PropWrapper<T> = { [wrapperKey]: T };
+
+export const propKey = Symbol();
+
+type ResolveProp<T> = ExtractPropTypes<{
+  key: { type: T; required: true };
+}>['key'];
+type ResolvePropType<T> = ResolveProp<T> extends { type: infer V } ? V : ResolveProp<T>;
+type ResolvePropTypeWithReadonly<T> = Readonly<T> extends Readonly<Array<infer A>>
+  ? ResolvePropType<A[]>
+  : ResolvePropType<T>;
+
+type IfUnknown<T, V> = [unknown] extends [T] ? V : T;
+
+export type BuildPropOption<T, D extends BuildPropType<T, V, C>, R, V, C> = {
+  type?: T;
+  values?: readonly V[];
+  required?: R;
+  default?: R extends true
+    ? never
+    : D extends Record<string, unknown> | Array<any>
+    ? () => D
+    : (() => D) | D;
+  validator?: ((val: any) => val is C) | ((val: any) => boolean);
+};
+
+type _BuildPropType<T, V, C> =
+  | (T extends PropWrapper<unknown>
+      ? T[typeof wrapperKey]
+      : [V] extends [never]
+      ? ResolvePropTypeWithReadonly<T>
+      : never)
+  | V
+  | C;
+export type BuildPropType<T, V, C> = _BuildPropType<
+  IfUnknown<T, never>,
+  IfUnknown<V, never>,
+  IfUnknown<C, never>
+>;
+
+type _BuildPropDefault<T, D> = [T] extends [
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  Record<string, unknown> | Array<any> | Function,
+]
+  ? D
+  : D extends () => T
+  ? ReturnType<D>
+  : D;
+
+export type BuildPropDefault<T, D, R> = R extends true
+  ? { readonly default?: undefined }
+  : {
+      readonly default: Exclude<D, undefined> extends never
+        ? undefined
+        : Exclude<_BuildPropDefault<T, D>, undefined>;
+    };
+export type BuildPropReturn<T, D, R, V, C> = {
+  readonly type: PropType<BuildPropType<T, V, C>>;
+  readonly required: IfUnknown<R, false>;
+  readonly validator: ((val: unknown) => boolean) | undefined;
+  [propKey]: true;
+} & BuildPropDefault<BuildPropType<T, V, C>, IfUnknown<D, never>, IfUnknown<R, false>>;
+
+/**
+ * @description Build prop. It can better optimize prop types
+ * @description 生成 prop，能更好地优化类型
+ * @example
+  // limited options
+  // the type will be PropType<'light' | 'dark'>
+  buildProp({
+    type: String,
+    values: ['light', 'dark'],
+  } as const)
+  * @example
+  // limited options and other types
+  // the type will be PropType<'small' | 'medium' | number>
+  buildProp({
+    type: [String, Number],
+    values: ['small', 'medium'],
+    validator: (val: unknown): val is number => typeof val === 'number',
+  } as const)
+  @link see more: https://github.com/element-plus/element-plus/pull/3341
+ */
+export function buildProp<
+  T = never,
+  D extends BuildPropType<T, V, C> = never,
+  R extends boolean = false,
+  V = never,
+  C = never,
+>(option: BuildPropOption<T, D, R, V, C>, key?: string): BuildPropReturn<T, D, R, V, C> {
+  // filter native prop type and nested prop, e.g `null`, `undefined` (from `buildProps`)
+  if (!isObject(option) || !!option[propKey]) return option as any;
+
+  const { values, required, default: defaultValue, type, validator } = option;
+
+  const _validator =
+    values || validator
+      ? (val: unknown) => {
+          let valid = false;
+          let allowedValues: unknown[] = [];
+
+          if (values) {
+            allowedValues = [...values, defaultValue];
+            valid ||= allowedValues.includes(val);
+          }
+          if (validator) valid ||= validator(val);
+
+          if (!valid && allowedValues.length > 0) {
+            const allowValuesText = [...new Set(allowedValues)]
+              .map((value) => JSON.stringify(value))
+              .join(', ');
+            warn(
+              `Invalid prop: validation failed${
+                key ? ` for prop "${key}"` : ''
+              }. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`,
+            );
+          }
+          return valid;
+        }
+      : undefined;
+
+  return {
+    type:
+      typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey)
+        ? type[wrapperKey]
+        : type,
+    required: !!required,
+    default: defaultValue,
+    validator: _validator,
+    [propKey]: true,
+  } as unknown as BuildPropReturn<T, D, R, V, C>;
+}
+
+type NativePropType = [((...args: any) => any) | { new (...args: any): any } | undefined | null];
+
+export const buildProps = <
+  O extends {
+    [K in keyof O]: O[K] extends BuildPropReturn<any, any, any, any, any>
+      ? O[K]
+      : [O[K]] extends NativePropType
+      ? O[K]
+      : O[K] extends BuildPropOption<infer T, infer D, infer R, infer V, infer C>
+      ? D extends BuildPropType<T, V, C>
+        ? BuildPropOption<T, D, R, V, C>
+        : never
+      : never;
+  },
+>(
+  props: O,
+) =>
+  fromPairs(
+    Object.entries(props).map(([key, option]) => [key, buildProp(option as any, key)]),
+  ) as unknown as {
+    [K in keyof O]: O[K] extends { [propKey]: boolean }
+      ? O[K]
+      : [O[K]] extends NativePropType
+      ? O[K]
+      : O[K] extends BuildPropOption<
+          infer T,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          infer _D,
+          infer R,
+          infer V,
+          infer C
+        >
+      ? BuildPropReturn<T, O[K]['default'], R, V, C>
+      : never;
+  };
+
+export const definePropType = <T>(val: any) => ({ [wrapperKey]: val } as PropWrapper<T>);
+
+export const keyOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>;
+export const mutable = <T extends readonly any[] | Record<string, unknown>>(val: T) =>
+  val as Mutable<typeof val>;
+
+export const componentSize = ['large', 'medium', 'small', 'mini'] as const;
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..4453ec4
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,42 @@
+// copy from element-plus
+
+import type { CSSProperties, Plugin } from 'vue';
+
+type OptionalKeys<T extends Record<string, unknown>> = {
+  [K in keyof T]: T extends Record<K, T[K]> ? never : K;
+}[keyof T];
+
+type RequiredKeys<T extends Record<string, unknown>> = Exclude<keyof T, OptionalKeys<T>>;
+
+type MonoArgEmitter<T, Keys extends keyof T> = <K extends Keys>(evt: K, arg?: T[K]) => void;
+
+type BiArgEmitter<T, Keys extends keyof T> = <K extends Keys>(evt: K, arg: T[K]) => void;
+
+export type EventEmitter<T extends Record<string, unknown>> = MonoArgEmitter<T, OptionalKeys<T>> &
+  BiArgEmitter<T, RequiredKeys<T>>;
+
+export type AnyFunction<T> = (...args: any[]) => T;
+
+export type PartialReturnType<T extends (...args: unknown[]) => unknown> = Partial<ReturnType<T>>;
+
+export type SFCWithInstall<T> = T & Plugin;
+
+export type Nullable<T> = T | null;
+
+export type RefElement = Nullable<HTMLElement>;
+
+export type CustomizedHTMLElement<T> = HTMLElement & T;
+
+export type Indexable<T> = {
+  [key: string]: T;
+};
+
+export type Hash<T> = Indexable<T>;
+
+export type TimeoutHandle = ReturnType<typeof global.setTimeout>;
+
+export type ComponentSize = 'large' | 'medium' | 'small' | 'mini';
+
+export type StyleValue = string | CSSProperties | Array<StyleValue>;
+
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] };
diff --git a/src/utils/uuid.ts b/src/utils/uuid.ts
new file mode 100644
index 0000000..548bcf3
--- /dev/null
+++ b/src/utils/uuid.ts
@@ -0,0 +1,28 @@
+const hexList: string[] = [];
+for (let i = 0; i <= 15; i++) {
+  hexList[i] = i.toString(16);
+}
+
+export function buildUUID(): string {
+  let uuid = '';
+  for (let i = 1; i <= 36; i++) {
+    if (i === 9 || i === 14 || i === 19 || i === 24) {
+      uuid += '-';
+    } else if (i === 15) {
+      uuid += 4;
+    } else if (i === 20) {
+      uuid += hexList[(Math.random() * 4) | 8];
+    } else {
+      uuid += hexList[(Math.random() * 16) | 0];
+    }
+  }
+  return uuid.replace(/-/g, '');
+}
+
+let unique = 0;
+export function buildShortUUID(prefix = ''): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}
diff --git a/src/views/dashboard/Analysis/api.ts b/src/views/dashboard/Analysis/api.ts
new file mode 100644
index 0000000..0f40443
--- /dev/null
+++ b/src/views/dashboard/Analysis/api.ts
@@ -0,0 +1,16 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  loginfo = '/sys/loginfo',
+  visitInfo = '/sys/visitInfo',
+}
+/**
+ * 日志统计信息
+ * @param params
+ */
+export const getLoginfo = (params) => defHttp.get({ url: Api.loginfo, params }, { isTransformResponse: false });
+/**
+ * 访问量信息
+ * @param params
+ */
+export const getVisitInfo = (params) => defHttp.get({ url: Api.visitInfo, params }, { isTransformResponse: false });
diff --git a/src/views/dashboard/Analysis/components/BdcTabCard.vue b/src/views/dashboard/Analysis/components/BdcTabCard.vue
new file mode 100644
index 0000000..b310af4
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/BdcTabCard.vue
@@ -0,0 +1,128 @@
+<template>
+  <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
+    <div class="salesCard">
+      <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
+        <template #rightExtra>
+          <div class="extra-wrapper">
+            <div class="extra-item">
+              <a>今日</a>
+              <a>本周</a>
+              <a>本月</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{ width: '256px' }" />
+          </div>
+        </template>
+        <a-tab-pane loading="true" tab="受理监管" key="1">
+          <a-row>
+            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+              <Bar :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
+            </a-col>
+            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+              <QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane tab="交互监管" key="2">
+          <a-row>
+            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+              <BarMulti
+                :seriesColor="interactiveColor"
+                :chartData="barMultiData"
+                :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }"
+                height="40vh"
+              />
+            </a-col>
+            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+              <QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane tab="存储监管" key="3">
+          <a-row>
+            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" style="display: flex">
+              <Gauge :seriesColor="seriesColor" :chartData="{ name: 'C盘', value: 70 }" height="30vh"></Gauge>
+              <Gauge :seriesColor="seriesColor" :chartData="{ name: 'D盘', value: 50 }" height="30vh"></Gauge>
+            </a-col>
+            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+              <QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-card>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import BarMulti from '/@/components/chart/BarMulti.vue';
+  import Gauge from '/@/components/chart/Gauge.vue';
+  import QuickNav from './QuickNav.vue';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  defineProps({
+    loading: {
+      type: Boolean,
+    },
+  });
+  const { getThemeColor } = useRootSetting();
+  const interactiveColor = ref();
+  const rankList = [];
+  for (let i = 0; i < 7; i++) {
+    rankList.push({
+      name: '白鹭岛 ' + (i + 1) + ' 号店',
+      total: 1234.56 - i * 100,
+    });
+  }
+
+  const barData = [];
+  for (let i = 0; i < 12; i += 1) {
+    barData.push({
+      name: `${i + 1}月`,
+      value: Math.floor(Math.random() * 1000) + 200,
+    });
+  }
+  const barMultiData = [];
+  for (let j = 0; j < 2; j++) {
+    for (let i = 0; i < 12; i += 1) {
+      barMultiData.push({
+        type: j == 0 ? 'jeecg' : 'jeebt',
+        name: `${i + 1}月`,
+        value: Math.floor(Math.random() * 1000) + 200,
+      });
+    }
+  }
+
+  const seriesColor = computed(() => {
+    interactiveColor.value = [
+      { type: 'jeecg', color: getThemeColor.value },
+      { type: 'jeebt', color: getRandomColor() },
+    ];
+    return getThemeColor.value;
+  });
+  function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+</script>
+
+<style lang="less" scoped>
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/Analysis/components/ChartGroupCard.vue b/src/views/dashboard/Analysis/components/ChartGroupCard.vue
new file mode 100644
index 0000000..cf51a1e
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/ChartGroupCard.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="md:flex">
+    <template v-for="(item, index) in dataList" :key="item.title">
+      <ChartCard
+        :loading="loading"
+        :title="item.title"
+        :total="getTotal(item.total, index)"
+        class="md:w-1/4 w-full !md:mt-0 !mt-4"
+        :class="[index + 1 < 4 && '!md:mr-4']"
+      >
+        <template #action>
+          <a-tooltip title="指标说明">
+            <Icon :icon="item.icon" :size="20" />
+          </a-tooltip>
+        </template>
+        <div v-if="type === 'chart'">
+          <Trend term="周同比" :percentage="12" v-if="index === 0" />
+          <Trend term="日同比" :percentage="11" v-if="index === 0" :type="false" />
+
+          <SingleLine v-if="index === 1" :option="option" :chartData="chartData" :seriesColor="seriesColor" height="50px"></SingleLine>
+
+          <Bar v-if="index === 2" :option="option" :chartData="chartData" :seriesColor="seriesColor" height="50px"></Bar>
+
+          <Progress v-if="index === 3" :percent="78" :show-info="false"></Progress>
+        </div>
+        <div v-else>
+          <SingleLine :seriesColor="seriesColor" v-if="index === 0" :option="option" :chartData="chartData" height="50px"></SingleLine>
+
+          <SingleLine :seriesColor="seriesColor" v-if="index === 1" :option="option" :chartData="chartData" height="50px"></SingleLine>
+
+          <Bar :seriesColor="seriesColor" v-if="index === 2" :option="option" :chartData="chartData" height="50px"></Bar>
+
+          <Progress v-if="index === 3" :percent="78" :show-info="false"></Progress>
+
+        </div>
+        <template #footer v-if="type === 'chart'">
+          <span v-if="index !== 3"
+            >{{ item.footer }}<span>{{ item.value }}</span></span
+          >
+          <Trend term="周同比" :percentage="12" v-if="index === 3" />
+          <Trend term="日同比" :percentage="11" v-if="index === 3" :type="false" />
+        </template>
+        <template #footer v-else>
+          <span
+            >{{ item.footer }}<span>{{ item.value }}</span></span
+          >
+        </template>
+      </ChartCard>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Icon } from '/@/components/Icon';
+  import { Progress } from 'ant-design-vue';
+  import ChartCard from '/@/components/chart/ChartCard.vue';
+  import Trend from '/@/components/chart/Trend.vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import SingleLine from '/@/components/chart/SingleLine.vue';
+  import { chartCardList, bdcCardList } from '../data';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  const { getThemeColor } = useRootSetting();
+  const props = defineProps({
+    loading: {
+      type: Boolean,
+    },
+    type: {
+      type: String,
+      default: 'chart',
+    },
+  });
+  const option = ref({ xAxis: { show: false, boundaryGap: false }, yAxis: { show: false, boundaryGap: false, max: 220 } });
+
+  const chartData = ref([
+    {
+      name: '1月',
+      value: 50,
+    },
+    {
+      name: '2月',
+      value: 100,
+    },
+    {
+      name: '3月',
+      value: 150,
+    },
+    {
+      name: '4月',
+      value: 40,
+    },
+    {
+      name: '5月',
+      value: 110,
+    },
+    {
+      name: '6月',
+      value: 120,
+    },
+  ]);
+  const seriesColor = computed(() => {
+    return getThemeColor.value;
+  })
+  const dataList = computed(() => (props.type === 'dbc' ? bdcCardList : chartCardList));
+
+  function getTotal(total, index) {
+    return index === 0 ? `￥${total}` : index === 3 ? `${total}%` : total;
+  }
+</script>
diff --git a/src/views/dashboard/Analysis/components/GrowCard.vue b/src/views/dashboard/Analysis/components/GrowCard.vue
new file mode 100644
index 0000000..af3eb60
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/GrowCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="md:flex">
+    <template v-for="(item, index) in growCardList" :key="item.title">
+      <Card
+        size="small"
+        :loading="loading"
+        :title="item.title"
+        class="md:w-1/4 w-full !md:mt-0 !mt-4"
+        :class="[index + 1 < 4 && '!md:mr-4']"
+        :canExpan="false"
+      >
+        <template #extra>
+          <Tag :color="item.color">{{ item.action }}</Tag>
+        </template>
+
+        <div class="py-4 px-4 flex justify-between">
+          <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
+          <Icon :icon="item.icon" :size="40" />
+        </div>
+
+        <div class="p-2 px-4 flex justify-between">
+          <span>总{{ item.title }}</span>
+          <CountTo prefix="$" :startVal="1" :endVal="item.total" />
+        </div>
+      </Card>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { CountTo } from '/@/components/CountTo/index';
+  import { Icon } from '/@/components/Icon';
+  import { Tag, Card } from 'ant-design-vue';
+  import { growCardList } from '../data';
+
+  defineProps({
+    loading: {
+      type: Boolean,
+    },
+  });
+</script>
diff --git a/src/views/dashboard/Analysis/components/QuickNav.vue b/src/views/dashboard/Analysis/components/QuickNav.vue
new file mode 100644
index 0000000..149f426
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/QuickNav.vue
@@ -0,0 +1,56 @@
+<template>
+  <Card title="快捷导航" v-bind="$attrs">
+    <template v-for="item in navItems" :key="item">
+      <CardGrid @click="goPage">
+        <span class="flex flex-col items-center">
+          <Icon :icon="item.icon" :color="item.color" size="20" />
+          <span class="text-md mt-2">{{ item.title }}</span>
+        </span>
+      </CardGrid>
+    </template>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Icon } from '/@/components/Icon';
+
+  const CardGrid = Card.Grid;
+  const $message = useMessage();
+  const navItems = [
+    {
+      title: '业务受理',
+      icon: 'ion:home-outline',
+      color: '#1fdaca',
+    },
+    {
+      title: '业务管理',
+      icon: 'ion:grid-outline',
+      color: '#bf0c2c',
+    },
+    {
+      title: '文件管理',
+      icon: 'ion:layers-outline',
+      color: '#e18525',
+    },
+    {
+      title: '信息查询',
+      icon: 'ion:settings-outline',
+      color: '#3fb27f',
+    }, 
+		{
+				title: '通知公告',
+				icon: 'ion:notifications',
+				color: '#13b0ff',
+		}, 
+		{
+				title: '我的任务',
+				icon: 'ion:person-stalker',
+				color: '#b27315',
+		}
+  ];
+
+  function goPage() {
+    $message.createMessage.success('根据业务自行处理跳转页面!');
+  }
+</script>
diff --git a/src/views/dashboard/Analysis/components/SaleTabCard.vue b/src/views/dashboard/Analysis/components/SaleTabCard.vue
new file mode 100644
index 0000000..ff69bc7
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/SaleTabCard.vue
@@ -0,0 +1,87 @@
+<template>
+  <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
+    <div class="salesCard">
+      <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
+        <template #rightExtra>
+          <div class="extra-wrapper">
+            <div class="extra-item">
+              <a>今日</a>
+              <a>本周</a>
+              <a>本月</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{ width: '256px' }" />
+          </div>
+        </template>
+        <a-tab-pane loading="true" tab="销售额" key="1">
+          <a-row>
+            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+              <Bar :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor"  />
+            </a-col>
+            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+              <RankList title="门店销售排行榜" :list="rankList" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane tab="销售趋势" key="2">
+          <a-row>
+            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+              <Bar :chartData="barData.reverse()" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
+            </a-col>
+            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+              <RankList title="门店销售排行榜" :list="rankList" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-card>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import RankList from '/@/components/chart/RankList.vue';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+    
+
+  defineProps({
+    loading: {
+      type: Boolean,
+    },
+  });
+  const { getThemeColor } = useRootSetting();
+  const rankList = [];
+  for (let i = 0; i < 7; i++) {
+    rankList.push({
+      name: '白鹭岛 ' + (i + 1) + ' 号店',
+      total: 1234.56 - i * 100,
+    });
+  }
+
+  const barData = [];
+  for (let i = 0; i < 12; i += 1) {
+    barData.push({
+      name: `${i + 1}月`,
+      value: Math.floor(Math.random() * 1000) + 200,
+    });
+  }
+  const seriesColor = computed(() => {
+    return getThemeColor.value
+  })
+</script>
+
+<style lang="less" scoped>
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/dashboard/Analysis/components/SalesProductPie.vue b/src/views/dashboard/Analysis/components/SalesProductPie.vue
new file mode 100644
index 0000000..6dc41fb
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/SalesProductPie.vue
@@ -0,0 +1,63 @@
+<template>
+  <Card title="成交占比" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        tooltip: {
+          trigger: 'item',
+        },
+
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '80%',
+            center: ['50%', '50%'],
+            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+            data: [
+              { value: 500, name: '电子产品' },
+              { value: 310, name: '服装' },
+              { value: 274, name: '化妆品' },
+              { value: 400, name: '家居' },
+            ].sort(function (a, b) {
+              return a.value - b.value;
+            }),
+            roseType: 'radius',
+            animationType: 'scale',
+            animationEasing: 'exponentialInOut',
+            animationDelay: function () {
+              return Math.random() * 400;
+            },
+          },
+        ],
+      });
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/dashboard/Analysis/components/SiteAnalysis.vue b/src/views/dashboard/Analysis/components/SiteAnalysis.vue
new file mode 100644
index 0000000..570861a
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/SiteAnalysis.vue
@@ -0,0 +1,33 @@
+<template>
+  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
+    <p v-if="activeKey === 'tab1'">
+      <VisitAnalysis />
+    </p>
+    <p v-if="activeKey === 'tab2'">
+      <VisitAnalysisBar />
+    </p>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import VisitAnalysis from './VisitAnalysis.vue';
+  import VisitAnalysisBar from './VisitAnalysisBar.vue';
+
+  const activeKey = ref('tab1');
+
+  const tabListTitle = [
+    {
+      key: 'tab1',
+      tab: '流量趋势',
+    },
+    {
+      key: 'tab2',
+      tab: '访问量',
+    },
+  ];
+
+  function onTabChange(key) {
+    activeKey.value = key;
+  }
+</script>
diff --git a/src/views/dashboard/Analysis/components/VisitAnalysis.vue b/src/views/dashboard/Analysis/components/VisitAnalysis.vue
new file mode 100644
index 0000000..a694c95
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/VisitAnalysis.vue
@@ -0,0 +1,104 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, Ref, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { basicProps } from './props';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  defineProps({
+    ...basicProps,
+  });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  const { getThemeColor } = useRootSetting();
+  const init = () => {
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: getThemeColor.value,
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: [
+          '6:00',
+          '7:00',
+          '8:00',
+          '9:00',
+          '10:00',
+          '11:00',
+          '12:00',
+          '13:00',
+          '14:00',
+          '15:00',
+          '16:00',
+          '17:00',
+          '18:00',
+          '19:00',
+          '20:00',
+          '21:00',
+          '22:00',
+          '23:00',
+        ],
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 80000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: true,
+          data: [111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222, 11111, 4000, 2000, 500, 333, 222, 111],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+        {
+          smooth: true,
+          data: [33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390, 198, 60, 30, 22, 11],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: getThemeColor.value,
+          },
+        },
+      ],
+    });
+  };
+  watchEffect(() => {
+    init();
+  });
+</script>
diff --git a/src/views/dashboard/Analysis/components/VisitAnalysisBar.vue b/src/views/dashboard/Analysis/components/VisitAnalysisBar.vue
new file mode 100644
index 0000000..4139be3
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/VisitAnalysisBar.vue
@@ -0,0 +1,51 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, Ref, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { basicProps } from './props';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  defineProps({
+    ...basicProps,
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const { getThemeColor } = useRootSetting();
+  const init = () => {
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: getThemeColor.value,
+          },
+        },
+      },
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      xAxis: {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      },
+      yAxis: {
+        type: 'value',
+        max: 8000,
+        splitNumber: 4,
+      },
+      series: [
+        {
+          data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
+          type: 'bar',
+          barMaxWidth: 80,
+          color: getThemeColor.value,
+        },
+      ],
+    });
+  };
+  watchEffect(() => {
+    init();
+  });
+</script>
diff --git a/src/views/dashboard/Analysis/components/VisitRadar.vue b/src/views/dashboard/Analysis/components/VisitRadar.vue
new file mode 100644
index 0000000..bc3eb5f
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/VisitRadar.vue
@@ -0,0 +1,94 @@
+<template>
+  <Card title="转化率" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        legend: {
+          bottom: 0,
+          data: ['访问', '购买'],
+        },
+        tooltip: {},
+        radar: {
+          radius: '60%',
+          splitNumber: 8,
+          indicator: [
+            {
+              name: '电脑',
+            },
+            {
+              name: '充电器',
+            },
+            {
+              name: '耳机',
+            },
+            {
+              name: '手机',
+            },
+            {
+              name: 'Ipad',
+            },
+            {
+              name: '耳机',
+            },
+          ],
+        },
+        series: [
+          {
+            type: 'radar' as 'custom',
+            symbolSize: 0,
+            areaStyle: {
+              shadowBlur: 0,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: [90, 50, 86, 40, 50, 20],
+                name: '访问',
+                itemStyle: {
+                  color: '#b6a2de',
+                },
+              },
+              {
+                value: [70, 75, 70, 76, 20, 85],
+                name: '购买',
+                itemStyle: {
+                  color: '#5ab1ef',
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/dashboard/Analysis/components/VisitSource.vue b/src/views/dashboard/Analysis/components/VisitSource.vue
new file mode 100644
index 0000000..7b8e32a
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/VisitSource.vue
@@ -0,0 +1,80 @@
+<template>
+  <Card title="访问来源" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '1%',
+          left: 'center',
+        },
+        series: [
+          {
+            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '搜索引擎' },
+              { value: 735, name: '直接访问' },
+              { value: 580, name: '邮件营销' },
+              { value: 484, name: '联盟广告' },
+            ],
+            animationType: 'scale',
+            animationEasing: 'exponentialInOut',
+            animationDelay: function () {
+              return Math.random() * 100;
+            },
+          },
+        ],
+      });
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/dashboard/Analysis/components/props.ts b/src/views/dashboard/Analysis/components/props.ts
new file mode 100644
index 0000000..8643650
--- /dev/null
+++ b/src/views/dashboard/Analysis/components/props.ts
@@ -0,0 +1,16 @@
+import { PropType } from 'vue';
+
+export interface BasicProps {
+  width: string;
+  height: string;
+}
+export const basicProps = {
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '280px',
+  },
+};
diff --git a/src/views/dashboard/Analysis/data.ts b/src/views/dashboard/Analysis/data.ts
new file mode 100644
index 0000000..ff5c277
--- /dev/null
+++ b/src/views/dashboard/Analysis/data.ts
@@ -0,0 +1,219 @@
+export interface GrowCardItem {
+  icon: string;
+  title: string;
+  value?: number;
+  total: number;
+  color?: string;
+  action?: string;
+  footer?: string;
+}
+
+export const growCardList: GrowCardItem[] = [
+  {
+    title: '访问数',
+    icon: 'visit-count|svg',
+    value: 2000,
+    total: 120000,
+    color: 'green',
+    action: '月',
+  },
+  {
+    title: '成交额',
+    icon: 'total-sales|svg',
+    value: 20000,
+    total: 500000,
+    color: 'blue',
+    action: '月',
+  },
+  {
+    title: '下载数',
+    icon: 'download-count|svg',
+    value: 8000,
+    total: 120000,
+    color: 'orange',
+    action: '周',
+  },
+  {
+    title: '成交数',
+    icon: 'transaction|svg',
+    value: 5000,
+    total: 50000,
+    color: 'purple',
+    action: '年',
+  },
+];
+
+export const chartCardList: GrowCardItem[] = [
+  {
+    title: '总销售额',
+    icon: 'visit-count|svg',
+    total: 126560,
+    value: 234.56,
+    footer: '日均销售额',
+  },
+  {
+    title: '订单量',
+    icon: 'total-sales|svg',
+    value: 1234,
+    total: 8846,
+    color: 'blue',
+    footer: '日订单量',
+  },
+  {
+    title: '支付笔数',
+    icon: 'download-count|svg',
+    value: 60,
+    total: 6560,
+    color: 'orange',
+    footer: '转化率',
+  },
+  {
+    title: '运营活动效果',
+    icon: 'transaction|svg',
+    total: 78,
+  },
+];
+export const bdcCardList: GrowCardItem[] = [
+  {
+    title: '受理量',
+    icon: 'ant-design:info-circle-outlined',
+    total: 100,
+    value: 60,
+    footer: '今日受理量',
+  },
+  {
+    title: '办结量',
+    icon: 'ant-design:info-circle-outlined',
+    value: 54,
+    total: 87,
+    color: 'blue',
+    footer: '今日办结量',
+  },
+  {
+    title: '用户受理量',
+    icon: 'ant-design:info-circle-outlined',
+    value: 13,
+    total: 15,
+    color: 'orange',
+    footer: '用户今日受理量',
+  },
+  {
+    title: '用户办结量',
+    icon: 'ant-design:info-circle-outlined',
+    total: 9,
+    value: 7,
+    footer: '用户今日办结量',
+  },
+];
+
+export const table = {
+  dataSource: [
+    { reBizCode: '1', type: '转移登记', acceptBy: '张三', acceptDate: '2019-01-22', curNode: '任务分派', flowRate: 60 },
+    { reBizCode: '2', type: '抵押登记', acceptBy: '李四', acceptDate: '2019-01-23', curNode: '领导审核', flowRate: 30 },
+    { reBizCode: '3', type: '转移登记', acceptBy: '王武', acceptDate: '2019-01-25', curNode: '任务处理', flowRate: 20 },
+    { reBizCode: '4', type: '转移登记', acceptBy: '赵楼', acceptDate: '2019-11-22', curNode: '部门审核', flowRate: 80 },
+    { reBizCode: '5', type: '转移登记', acceptBy: '钱就', acceptDate: '2019-12-12', curNode: '任务分派', flowRate: 90 },
+    { reBizCode: '6', type: '转移登记', acceptBy: '孙吧', acceptDate: '2019-03-06', curNode: '任务处理', flowRate: 10 },
+    { reBizCode: '7', type: '抵押登记', acceptBy: '周大', acceptDate: '2019-04-13', curNode: '任务分派', flowRate: 100 },
+    { reBizCode: '8', type: '抵押登记', acceptBy: '吴二', acceptDate: '2019-05-09', curNode: '任务上报', flowRate: 50 },
+    { reBizCode: '9', type: '抵押登记', acceptBy: '郑爽', acceptDate: '2019-07-12', curNode: '任务处理', flowRate: 63 },
+    { reBizCode: '20', type: '抵押登记', acceptBy: '林有', acceptDate: '2019-12-12', curNode: '任务打回', flowRate: 59 },
+    { reBizCode: '11', type: '转移登记', acceptBy: '码云', acceptDate: '2019-09-10', curNode: '任务签收', flowRate: 87 },
+  ],
+  columns: [
+    {
+      title: '业务号',
+      align: 'center',
+      dataIndex: 'reBizCode',
+    },
+    {
+      title: '业务类型',
+      align: 'center',
+      dataIndex: 'type',
+    },
+    {
+      title: '受理人',
+      align: 'center',
+      dataIndex: 'acceptBy',
+    },
+    {
+      title: '受理时间',
+      align: 'center',
+      dataIndex: 'acceptDate',
+    },
+    {
+      title: '当前节点',
+      align: 'center',
+      dataIndex: 'curNode',
+    },
+    {
+      title: '办理时长',
+      align: 'center',
+      dataIndex: 'flowRate',
+    },
+  ],
+  ipagination: {
+    current: 1,
+    pageSize: 5,
+    pageSizeOptions: ['10', '20', '30'],
+    showTotal: (total, range) => {
+      return range[0] + '-' + range[1] + ' 共' + total + '条';
+    },
+    showQuickJumper: true,
+    showSizeChanger: true,
+    total: 0,
+  },
+};
+export const table1 = {
+  dataSource: [
+    { reBizCode: 'A001', type: '转移登记', acceptBy: '张四', acceptDate: '2019-01-22', curNode: '任务分派', flowRate: 12 },
+    { reBizCode: 'A002', type: '抵押登记', acceptBy: '李吧', acceptDate: '2019-01-23', curNode: '任务签收', flowRate: 3 },
+    { reBizCode: 'A003', type: '转移登记', acceptBy: '王三', acceptDate: '2019-01-25', curNode: '任务处理', flowRate: 24 },
+    { reBizCode: 'A004', type: '转移登记', acceptBy: '赵二', acceptDate: '2019-11-22', curNode: '部门审核', flowRate: 10 },
+    { reBizCode: 'A005', type: '转移登记', acceptBy: '钱大', acceptDate: '2019-12-12', curNode: '任务签收', flowRate: 8 },
+    { reBizCode: 'A006', type: '转移登记', acceptBy: '孙就', acceptDate: '2019-03-06', curNode: '任务处理', flowRate: 10 },
+    { reBizCode: 'A007', type: '抵押登记', acceptBy: '周晕', acceptDate: '2019-04-13', curNode: '部门审核', flowRate: 24 },
+    { reBizCode: 'A008', type: '抵押登记', acceptBy: '吴有', acceptDate: '2019-05-09', curNode: '部门审核', flowRate: 30 },
+    { reBizCode: 'A009', type: '抵押登记', acceptBy: '郑武', acceptDate: '2019-07-12', curNode: '任务分派', flowRate: 1 },
+    { reBizCode: 'A0010', type: '抵押登记', acceptBy: '林爽', acceptDate: '2019-12-12', curNode: '部门审核', flowRate: 16 },
+    { reBizCode: 'A0011', type: '转移登记', acceptBy: '码楼', acceptDate: '2019-09-10', curNode: '部门审核', flowRate: 7 },
+  ],
+  columns: [
+    {
+      title: '业务号',
+      align: 'center',
+      dataIndex: 'reBizCode',
+    },
+    {
+      title: '受理人',
+      align: 'center',
+      dataIndex: 'acceptBy',
+    },
+    {
+      title: '发起时间',
+      align: 'center',
+      dataIndex: 'acceptDate',
+    },
+    {
+      title: '当前节点',
+      align: 'center',
+      dataIndex: 'curNode',
+    },
+    {
+      title: '超时时间',
+      align: 'center',
+      dataIndex: 'flowRate',
+    },
+  ],
+  ipagination: {
+    current: 1,
+    pageSize: 5,
+    pageSizeOptions: ['10', '20', '30'],
+    showTotal: (total, range) => {
+      return range[0] + '-' + range[1] + ' 共' + total + '条';
+    },
+    showQuickJumper: true,
+    showSizeChanger: true,
+    total: 0,
+  },
+};
diff --git a/src/views/dashboard/Analysis/homePage/IndexBdc.vue b/src/views/dashboard/Analysis/homePage/IndexBdc.vue
new file mode 100644
index 0000000..0bb8034
--- /dev/null
+++ b/src/views/dashboard/Analysis/homePage/IndexBdc.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="p-4">
+    <ChartGroupCard class="enter-y" :loading="loading" type="bdc" />
+    <BdcTabCard class="!my-4 enter-y" :loading="loading" />
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :class="{ 'anty-list-cust': true }" :bordered="false">
+          <a-tabs v-model:activeKey="indexBottomTab" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
+            <template #rightExtra>
+              <div class="extra-wrapper">
+                <a-radio-group v-model:value="indexRegisterType" @change="changeRegisterType">
+                  <a-radio-button value="转移登记">转移登记</a-radio-button>
+                  <a-radio-button value="抵押登记">抵押登记</a-radio-button>
+                  <a-radio-button value="">所有</a-radio-button>
+                </a-radio-group>
+              </div>
+            </template>
+
+            <a-tab-pane tab="业务流程限时监管" key="1">
+              <a-table
+                :dataSource="dataSource"
+                size="default"
+                rowKey="reBizCode"
+                :columns="table.columns"
+                :pagination="ipagination"
+                @change="tableChange"
+              >
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.dataIndex === 'flowRate'">
+                    <Progress
+                      :strokeColor="getPercentColor(record.flowRate)"
+                      :format="getPercentFormat"
+                      :percent="getFlowRateNumber(record.flowRate)"
+                      style="width: 80px"
+                    />
+                  </template>
+                </template>
+              </a-table>
+            </a-tab-pane>
+
+            <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
+              <a-table
+                :dataSource="dataSource1"
+                size="default"
+                rowKey="reBizCode"
+                :columns="table1.columns"
+                :pagination="ipagination1"
+                @change="tableChange1"
+              >
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.dataIndex === 'flowRate'">
+                    <span style="color: red">{{ record.flowRate }}小时</span>
+                  </template>
+                </template>
+              </a-table>
+            </a-tab-pane>
+          </a-tabs>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { Progress } from 'ant-design-vue';
+  import ChartGroupCard from '../components/ChartGroupCard.vue';
+  import BdcTabCard from '../components/BdcTabCard.vue';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import HeadInfo from '/@/components/chart/HeadInfo.vue';
+  import { table, table1 } from '../data';
+
+  const loading = ref(true);
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+
+  const indexBottomTab = ref('1');
+  const indexRegisterType = ref('转移登记');
+  const dataSource = ref([]);
+  const dataSource1 = ref([]);
+  const ipagination = ref(table.ipagination);
+  const ipagination1 = ref(table1.ipagination);
+
+  function changeRegisterType(e) {
+    indexRegisterType.value = e.target.value;
+    if (unref(indexBottomTab) == '1') {
+      loadDataSource();
+    } else {
+      loadDataSource1();
+    }
+  }
+
+  function tableChange(pagination) {
+    ipagination.value.current = pagination.current;
+    ipagination.value.pageSize = pagination.pageSize;
+    loadDataSource();
+  }
+
+  function tableChange1(pagination) {
+    ipagination1.value.current = pagination.current;
+    ipagination1.value.pageSize = pagination.pageSize;
+    loadDataSource1();
+  }
+
+  function getFlowRateNumber(value) {
+    return +value;
+  }
+
+  function getPercentFormat(value) {
+    if (value == 100) {
+      return '超时';
+    } else {
+      return value + '%';
+    }
+  }
+
+  function getPercentColor(value) {
+    let p = +value;
+    if (p >= 90 && p < 100) {
+      return 'rgb(244, 240, 89)';
+    } else if (p >= 100) {
+      return 'red';
+    } else {
+      return 'rgb(16, 142, 233)';
+    }
+  }
+
+  function loadDataSource() {
+    dataSource.value = table.dataSource.filter((item) => {
+      if (!unref(indexRegisterType)) {
+        return true;
+      }
+      return item.type == unref(indexRegisterType);
+    });
+  }
+
+  function loadDataSource1() {
+    dataSource1.value = table1.dataSource.filter((item) => {
+      if (!unref(indexRegisterType)) {
+        return true;
+      }
+      return item.type == unref(indexRegisterType);
+    });
+  }
+
+  loadDataSource();
+  loadDataSource1();
+</script>
+
+<style lang="less" scoped>
+  .ant-table-wrapper {
+    :deep(.ant-table){
+      td,th {
+        padding: 10px;
+      }
+    }
+  }
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  .item-group {
+    padding: 20px 0 8px 24px;
+    font-size: 0;
+
+    a {
+      color: rgba(0, 0, 0, 0.65);
+      display: inline-block;
+      font-size: 14px;
+      margin-bottom: 13px;
+      width: 25%;
+    }
+  }
+
+  .item-group {
+    .more-btn {
+      margin-bottom: 13px;
+      text-align: center;
+    }
+  }
+
+  .list-content-item {
+    color: rgba(0, 0, 0, 0.45);
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    margin-left: 40px;
+  }
+
+  @media only screen and (min-width: 1600px) {
+    .list-content-item {
+      margin-left: 60px;
+    }
+  }
+
+  @media only screen and (max-width: 1300px) {
+    .list-content-item {
+      margin-left: 20px;
+    }
+
+    .width-hidden4 {
+      display: none;
+    }
+  }
+
+  .list-content-item {
+    span {
+      line-height: 20px;
+    }
+  }
+
+  .list-content-item {
+    p {
+      margin-top: 4px;
+      margin-bottom: 0;
+      line-height: 22px;
+    }
+  }
+
+  .anty-list-cust {
+    .ant-list-item-meta {
+      flex: 0.3 !important;
+    }
+  }
+
+  .anty-list-cust {
+    .ant-list-item-content {
+      flex: 1 !important;
+      justify-content: flex-start !important;
+      margin-left: 20px;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/Analysis/homePage/IndexChart.vue b/src/views/dashboard/Analysis/homePage/IndexChart.vue
new file mode 100644
index 0000000..4f4fe77
--- /dev/null
+++ b/src/views/dashboard/Analysis/homePage/IndexChart.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="p-4">
+    <ChartGroupCard class="enter-y" :loading="loading" type="chart" />
+    <SaleTabCard class="!my-4 enter-y" :loading="loading" />
+    <a-row>
+      <a-col :span="24">
+        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计">
+          <div class="infoArea">
+            <HeadInfo title="今日IP" :iconColor="ipColor" :content="loginfo.todayIp" icon="environment"></HeadInfo>
+            <HeadInfo title="今日访问" :iconColor="visitColor" :content="loginfo.todayVisitCount" icon="team"></HeadInfo>
+            <HeadInfo title="总访问量" :iconColor="seriesColor" :content="loginfo.totalVisitCount" icon="rise"></HeadInfo>
+          </div>
+          <LineMulti :chartData="lineMultiData" height="33vh" type="line" :option="{ legend: { top: 'bottom' } }"></LineMulti>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import ChartGroupCard from '../components/ChartGroupCard.vue';
+  import SaleTabCard from '../components/SaleTabCard.vue';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import HeadInfo from '/@/components/chart/HeadInfo.vue';
+  import { getLoginfo, getVisitInfo } from '../api.ts';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+  const loading = ref(true);
+  const { getThemeColor } = useRootSetting();
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+
+  const loginfo = ref({});
+  const lineMultiData = ref([]);
+
+  function initLogInfo() {
+    getLoginfo(null).then((res) => {
+      if (res.success) {
+        Object.keys(res.result).forEach((key) => {
+          res.result[key] = res.result[key] + '';
+        });
+        loginfo.value = res.result;
+      }
+    });
+    getVisitInfo(null).then((res) => {
+      if (res.success) {
+        lineMultiData.value = [];
+        res.result.forEach((item) => {
+          lineMultiData.value.push({ name: item.type, type: 'ip', value: item.ip, color: ipColor.value });
+          lineMultiData.value.push({ name: item.type, type: 'visit', value: item.visit, color: visitColor.value });
+        });
+      }
+    });
+  }
+
+  const ipColor = ref();
+  const visitColor = ref();
+  const seriesColor = ref();
+  watch(
+    () => getThemeColor.value,
+    () => {
+      seriesColor.value = getThemeColor.value;
+      visitColor.value = '#67B962';
+      ipColor.value = getThemeColor.value;
+      initLogInfo();
+    },
+    { immediate: true }
+  );
+
+  function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+</script>
+
+<style lang="less" scoped>
+   .infoArea {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10%;
+    .head-info.center {
+      padding: 0;
+    }
+    .head-info {
+      min-width: 0;
+    }
+  }
+  .circle-cust {
+    position: relative;
+    top: 28px;
+    left: -100%;
+  }
+
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  /* 首页访问量统计 */
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      color: rgba(0, 0, 0, 0.45);
+      display: inline-block;
+      font-size: 0.95rem;
+      line-height: 42px;
+      margin-bottom: 4px;
+    }
+
+    p {
+      line-height: 42px;
+      margin: 0;
+
+      a {
+        font-weight: 600;
+        font-size: 1rem;
+      }
+    }
+  }
+  .ant-card {
+    ::v-deep(.ant-card-head-title) {
+      font-weight: normal;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/Analysis/homePage/IndexDef.vue b/src/views/dashboard/Analysis/homePage/IndexDef.vue
new file mode 100644
index 0000000..48dec86
--- /dev/null
+++ b/src/views/dashboard/Analysis/homePage/IndexDef.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="p-4">
+    <GrowCard :loading="loading" class="enter-y" />
+    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
+    <div class="md:flex enter-y">
+      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
+      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
+      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import GrowCard from '../components/GrowCard.vue';
+  import SiteAnalysis from '../components/SiteAnalysis.vue';
+  import VisitSource from '../components/VisitSource.vue';
+  import VisitRadar from '../components/VisitRadar.vue';
+  import SalesProductPie from '../components/SalesProductPie.vue';
+
+  const loading = ref(true);
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+</script>
diff --git a/src/views/dashboard/Analysis/homePage/IndexTask.vue b/src/views/dashboard/Analysis/homePage/IndexTask.vue
new file mode 100644
index 0000000..42bc8b7
--- /dev/null
+++ b/src/views/dashboard/Analysis/homePage/IndexTask.vue
@@ -0,0 +1,422 @@
+<template>
+  <div class="index-container-ty">
+    <a-row type="flex" justify="start" :gutter="3">
+      <a-col :sm="24" :lg="12">
+        <a-card>
+          <template #title>
+            <div class="index-md-title">
+              <img src="../../../../assets/images/daiban.png" />
+              我的待办【{{ dataSource1.length }}】
+            </div>
+          </template>
+
+          <template v-if="dataSource1 && dataSource1.length > 0" #extra>
+            <a @click="goPage"
+              >更多
+              <Icon icon="ant-design:double-right-outlined" />
+            </a>
+          </template>
+
+          <a-table
+            :class="'my-index-table tytable1'"
+            ref="table1"
+            size="small"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource1"
+            :pagination="false"
+          >
+            <template #ellipsisText="{ text }">
+              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
+            </template>
+
+            <template #dayWarnning="{ text, record }">
+              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
+            </template>
+
+            <template #action="{ text, record }">
+              <a @click="handleData">办理</a>
+            </template>
+          </a-table>
+        </a-card>
+      </a-col>
+
+      <a-col :sm="24" :lg="12">
+        <a-card>
+          <template #title>
+            <div class="index-md-title">
+              <img src="../../../../assets/images/zaiban.png" />
+              我的在办【{{ dataSource2.length }}】
+            </div>
+          </template>
+
+          <template v-if="dataSource2 && dataSource2.length > 0" #extra>
+            <a @click="goPage"
+              >更多
+              <Icon icon="ant-design:double-right-outlined" />
+            </a>
+          </template>
+
+          <a-table
+            :class="'my-index-table tytable2'"
+            ref="table1"
+            size="small"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource2"
+            :pagination="false"
+          >
+            <template #ellipsisText="{ text }">
+              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
+            </template>
+
+            <template #dayWarnning="{ text, record }">
+              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
+            </template>
+
+            <template #action="{ text, record }">
+              <a @click="handleData">办理</a>
+            </template>
+          </a-table>
+        </a-card>
+      </a-col>
+
+      <a-col :span="24">
+        <div style="height: 5px"></div>
+      </a-col>
+
+      <a-col :sm="24" :lg="12">
+        <a-card>
+          <template #title>
+            <div class="index-md-title">
+              <img src="../../../../assets/images/guaz.png" />
+              我的挂账【{{ dataSource4.length }}】
+            </div>
+          </template>
+
+          <a-table
+            :class="'my-index-table tytable4'"
+            ref="table1"
+            size="small"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource4"
+            :pagination="false"
+          >
+            <template #ellipsisText="{ text }">
+              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
+            </template>
+
+            <template #dayWarnning="{ text, record }">
+              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
+            </template>
+
+            <template #action="{ text, record }">
+              <a @click="handleData">办理</a>
+            </template>
+          </a-table>
+        </a-card>
+      </a-col>
+
+      <a-col :sm="24" :lg="12">
+        <a-card>
+          <template #title>
+            <div class="index-md-title">
+              <img src="../../../../assets/images/duban.png" />
+              我的督办【{{ dataSource3.length }}】
+            </div>
+          </template>
+
+          <a-table
+            :class="'my-index-table tytable3'"
+            ref="table1"
+            size="small"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource3"
+            :pagination="false"
+          >
+            <template #ellipsisText="{ text }">
+              <JEllipsis :value="text" :length="textMaxLength"></JEllipsis>
+            </template>
+
+            <template #dayWarnning="{ text, record }">
+              <BellTwoTone style="font-size: 22px" :twoToneColor="getTipColor(record)" />
+            </template>
+
+            <template #action="{ text, record }">
+              <a @click="handleData">办理</a>
+            </template>
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import noDataPng from '/@/assets/images/nodata.png';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import JEllipsis from '/@/components/Form/src/jeecg/components/JEllipsis.vue';
+  import { BulbTwoTone, BellTwoTone } from '@ant-design/icons-vue';
+
+  const tempSs1 = [
+    {
+      id: '001',
+      orderNo: '电[1]1267102',
+      orderTitle: '药品出问题了',
+      restDay: 1,
+    },
+    {
+      id: '002',
+      orderNo: '电[4]5967102',
+      orderTitle: '吃了xxx医院的药，病情越来越严重',
+      restDay: 0,
+    },
+    {
+      id: '003',
+      orderNo: '电[3]5988987',
+      orderTitle: '今天去超市买鸡蛋，鸡蛋都是坏的',
+      restDay: 7,
+    },
+    {
+      id: '004',
+      orderNo: '电[2]5213491',
+      orderTitle: 'xx宝实体店高价售卖xx',
+      restDay: 5,
+    },
+    {
+      id: '005',
+      orderNo: '电[1]1603491',
+      orderTitle: '以红利相诱，答应退保后扣一年费用',
+      restDay: 0,
+    },
+  ];
+
+  const tempSs2 = [
+    {
+      id: '001',
+      orderTitle: '我要投诉这个大超市',
+      orderNo: '电[1]10299456',
+      restDay: 6,
+    },
+    {
+      id: '002',
+      orderTitle: 'xxx医院乱开药方,售卖假药',
+      orderNo: '电[2]20235691',
+      restDay: 0,
+    },
+    {
+      id: '003',
+      orderTitle: '我想问问这家店是干啥的',
+      orderNo: '电[3]495867322',
+      restDay: 7,
+    },
+    {
+      id: '004',
+      orderTitle: '我要举报朝阳区奥森公园酒店',
+      orderNo: '电[2]1193849',
+      restDay: 3,
+    },
+    {
+      id: '005',
+      orderTitle: '我今天吃饭吃到一个石头子',
+      orderNo: '电[4]56782344',
+      restDay: 9,
+    },
+  ];
+
+  //4-7天
+  const tip_green = 'rgba(0, 255, 0, 1)';
+  //1-3天
+  const tip_yellow = 'rgba(255, 255, 0, 1)';
+  //超期
+  const tip_red = 'rgba(255, 0, 0, 1)';
+
+  const textMaxLength = 8;
+  const $message = useMessage();
+
+  const dataSource1 = ref([]);
+  const dataSource2 = ref([]);
+  const dataSource3 = ref([]);
+  const dataSource4 = ref([]);
+  const columns = [
+    {
+      title: '',
+      dataIndex: '',
+      key: 'rowIndex',
+      width: 50,
+      fixed: 'left',
+      align: 'center',
+      slots: { customRender: 'dayWarnning' },
+    },
+    {
+      title: '剩余天数',
+      align: 'center',
+      dataIndex: 'restDay',
+      width: 80,
+    },
+    {
+      title: '工单标题',
+      align: 'center',
+      dataIndex: 'orderTitle',
+      slots: { customRender: 'ellipsisText' },
+    },
+    {
+      title: '工单编号',
+      align: 'center',
+      dataIndex: 'orderNo',
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      align: 'center',
+      slots: { customRender: 'action' },
+    },
+  ];
+
+  function getTipColor(rd) {
+    let num = rd.restDay;
+    if (num <= 0) {
+      return tip_red;
+    } else if (num >= 1 && num < 4) {
+      return tip_yellow;
+    } else if (num >= 4) {
+      return tip_green;
+    }
+  }
+
+  function mock() {
+    dataSource1.value = tempSs1;
+    dataSource2.value = tempSs2;
+    dataSource3.value = tempSs1;
+    dataSource4.value = tempSs2;
+    ifNullDataSource(dataSource4, '.tytable4');
+  }
+
+  function ifNullDataSource(ds, tb) {
+    if (!ds || ds.length == 0) {
+      var tmp = document.createElement('img');
+      tmp.src = noDataPng;
+      tmp.width = 300;
+      let tbclass = `${tb} .ant-table-placeholder`;
+      document.querySelector(tbclass).innerHTML = '';
+      document.querySelector(tbclass).appendChild(tmp);
+    }
+  }
+
+  function handleData() {
+    $message.createMessage.success('办理完成');
+  }
+
+  function goPage() {
+    $message.createMessage.success('请根据具体业务跳转页面');
+  }
+
+  mock();
+</script>
+
+<style scoped lang="less">
+  .my-index-table {
+    height: 270px;
+
+    table {
+      font-size: 14px !important;
+    }
+  }
+
+  .index-container-ty {
+    margin: 12px 12px 0;
+
+    :deep(.ant-card-body) {
+      padding: 10px 12px 0 12px;
+    }
+
+    :deep(.ant-card-head) {
+      line-height: 24px;
+      min-height: 24px;
+      background: #7196fb !important;
+
+      .ant-card-head-title {
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+
+      .ant-card-extra {
+        padding: 0;
+
+        a {
+          color: #fff;
+        }
+
+        a:hover {
+          color: #152ede;
+        }
+      }
+    }
+
+    :deep(.ant-table-footer) {
+      text-align: right;
+      padding: 6px 12px 6px 6px;
+      background: #fff;
+      border-top: 2px solid #f7f1f1;
+    }
+
+    .index-md-title {
+      position: relative;
+      width: 100%;
+      color: #fff;
+      font-size: 21px;
+      font-family: cursive;
+      padding-left: 25px;
+
+      img {
+        position: absolute;
+        height: 25px;
+        left: 0;
+      }
+    }
+
+    :deep(.ant-table-thead > tr > th),
+    :deep(.ant-table-tbody > tr > td) {
+      border-bottom: 1px solid #90aeff;
+    }
+
+    :deep(
+      .ant-table-small
+      > .ant-table-content
+      > .ant-table-fixed-left
+      > .ant-table-body-outer
+      > .ant-table-body-inner
+      > table
+      > .ant-table-thead
+      > tr
+      > th),
+    :deep(
+      .ant-table-small
+      > .ant-table-content
+      > .ant-table-fixed-right
+      > .ant-table-body-outer
+      > .ant-table-body-inner
+      > table
+      > .ant-table-thead
+      > tr
+      > th) {
+      border-bottom: 1px solid #90aeff;
+    }
+
+    :deep(.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th) {
+      border-bottom: 1px solid #90aeff;
+    }
+
+    :deep(.ant-table-small) {
+      border: 1px solid #90aeff;
+    }
+
+    :deep(.ant-table-placeholder) {
+      padding: 0;
+      height: 215px;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/Analysis/index.vue b/src/views/dashboard/Analysis/index.vue
new file mode 100644
index 0000000..85bd3dd
--- /dev/null
+++ b/src/views/dashboard/Analysis/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <IndexChart v-if="indexStyle === 0"></IndexChart>
+  <IndexDef v-if="indexStyle === 1"></IndexDef>
+  <IndexBdc v-if="indexStyle == 2"></IndexBdc>
+  <IndexTask v-if="indexStyle == 3"></IndexTask>
+  <div style="width: 100%; text-align: right; margin-top: 20px">
+    首页主题：
+    <a-radio-group v-model:value="indexStyle">
+      <a-radio :value="0">默认</a-radio>
+      <a-radio :value="1">销量统计</a-radio>
+      <a-radio :value="2">业务统计</a-radio>
+      <a-radio :value="3">我的任务</a-radio>
+    </a-radio-group>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import IndexDef from './homePage/IndexDef.vue';
+  import IndexChart from './homePage/IndexChart.vue';
+  import IndexBdc from './homePage/IndexBdc.vue';
+  import IndexTask from './homePage/IndexTask.vue';
+
+  const indexStyle = ref(0);
+</script>
diff --git a/src/views/dashboard/ai/components/aide/images/ai.png b/src/views/dashboard/ai/components/aide/images/ai.png
new file mode 100644
index 0000000..59448da
Binary files /dev/null and b/src/views/dashboard/ai/components/aide/images/ai.png differ
diff --git a/src/views/dashboard/ai/components/aide/index.vue b/src/views/dashboard/ai/components/aide/index.vue
new file mode 100644
index 0000000..25ebb29
--- /dev/null
+++ b/src/views/dashboard/ai/components/aide/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div v-if="visible" ref="aideWrapRef" class="aide-wrap" @click="handleGo">
+    <a-popconfirm
+      :open="popconfirmVisible"
+      placement="topRight"
+      title="确定AI助手退出吗？"
+      ok-text="确定"
+      cancel-text="取消"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+    >
+      <img :src="aiImage" alt="ai助手" />
+    </a-popconfirm>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { router } from '/@/router';
+  import { AIDE_FLAG } from '/@/enums/cacheEnum';
+  import { getToken } from '/@/utils/auth';
+  import { getAuthCache, setAuthCache, removeAuthCache } from '/@/utils/auth';
+  import aiImage from './images/ai.png';
+  const visible = ref(1);
+  const aideWrapRef = ref(null);
+  const popconfirmVisible = ref(false);
+
+  onMounted(() => {
+    const aideFlag = getAuthCache(AIDE_FLAG);
+    if (aideFlag && aideFlag == getToken()) {
+      visible.value = false;
+    } else {
+      visible.value = true;
+    }
+    if (visible.value) {
+      aideWrapRef.value.addEventListener('contextmenu', (e) => {
+        popconfirmVisible.value = true;
+        e.preventDefault();
+      });
+    }
+  });
+  const handleCancel = () => {
+    popconfirmVisible.value = false;
+  };
+  const handleConfirm = () => {
+    popconfirmVisible.value = false;
+    visible.value = false;
+    setAuthCache(AIDE_FLAG, getToken());
+  };
+  const handleGo = (params) => {
+    router.push({ path: '/ai' });
+  };
+</script>
+
+<style lang="less" scoped>
+  .aide-wrap {
+    position: fixed;
+    top: 50%;
+    right: 5px;
+    transform: translate(0, -50%);
+    height: 33px;
+    width: 33px;
+    border-radius: 50%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    color: #fff;
+    cursor: pointer;
+    .text {
+      font-size: 12px;
+      transform: scale(0.88);
+    }
+  }
+</style>
diff --git a/src/views/dashboard/ai/index.vue b/src/views/dashboard/ai/index.vue
new file mode 100644
index 0000000..9562efb
--- /dev/null
+++ b/src/views/dashboard/ai/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="wrap">
+    <div class="content">
+      <AiChat></AiChat>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import AiChat from '/@/views/super/airag/aiapp/chat/AiChat.vue';
+  
+</script>
+
+<style lang="less" scoped>
+  .wrap {
+    height: 100%;
+    width: 100%;
+    .content {
+      background: #fff;
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/workbench/components/DynamicInfo.vue b/src/views/dashboard/workbench/components/DynamicInfo.vue
new file mode 100644
index 0000000..4be8f1f
--- /dev/null
+++ b/src/views/dashboard/workbench/components/DynamicInfo.vue
@@ -0,0 +1,31 @@
+<template>
+  <Card title="最新动态" v-bind="$attrs">
+    <template #extra>
+      <a-button type="link" size="small">更多</a-button>
+    </template>
+    <List item-layout="horizontal" :data-source="dynamicInfoItems">
+      <template #renderItem="{ item }">
+        <ListItem>
+          <ListItemMeta>
+            <template #description>
+              {{ item.date }}
+            </template>
+            <!-- eslint-disable-next-line -->
+            <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
+            <template #avatar>
+              <Icon :icon="item.avatar" :size="30" />
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Card, List } from 'ant-design-vue';
+  import { dynamicInfoItems } from './data';
+  import { Icon } from '/@/components/Icon';
+
+  const ListItem = List.Item;
+  const ListItemMeta = List.Item.Meta;
+</script>
diff --git a/src/views/dashboard/workbench/components/ProjectCard.vue b/src/views/dashboard/workbench/components/ProjectCard.vue
new file mode 100644
index 0000000..0957031
--- /dev/null
+++ b/src/views/dashboard/workbench/components/ProjectCard.vue
@@ -0,0 +1,34 @@
+<template>
+  <Card title="项目" v-bind="$attrs">
+    <template #extra>
+      <a-button type="link" size="small">更多</a-button>
+    </template>
+
+    <template v-for="item in items" :key="item">
+      <CardGrid class="!md:w-1/3 !w-full">
+        <span class="flex">
+          <Icon :icon="item.icon" :color="item.color" size="30" />
+          <span class="text-lg ml-4">{{ item.title }}</span>
+        </span>
+        <div class="flex mt-2 h-10 text-secondary"> {{ item.desc }} </div>
+        <div class="flex justify-between text-secondary">
+          <span>{{ item.group }}</span>
+          <span>{{ item.date }}</span>
+        </div>
+      </CardGrid>
+    </template>
+  </Card>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { groupItems } from './data';
+
+  export default defineComponent({
+    components: { Card, CardGrid: Card.Grid, Icon },
+    setup() {
+      return { items: groupItems };
+    },
+  });
+</script>
diff --git a/src/views/dashboard/workbench/components/QuickNav.vue b/src/views/dashboard/workbench/components/QuickNav.vue
new file mode 100644
index 0000000..4e004d1
--- /dev/null
+++ b/src/views/dashboard/workbench/components/QuickNav.vue
@@ -0,0 +1,19 @@
+<template>
+  <Card title="快捷导航" v-bind="$attrs">
+    <template v-for="item in navItems" :key="item">
+      <CardGrid>
+        <span class="flex flex-col items-center">
+          <Icon :icon="item.icon" :color="item.color" size="20" />
+          <span class="text-md mt-2">{{ item.title }}</span>
+        </span>
+      </CardGrid>
+    </template>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+  import { navItems } from './data';
+  import { Icon } from '/@/components/Icon';
+
+  const CardGrid = Card.Grid;
+</script>
diff --git a/src/views/dashboard/workbench/components/SaleRadar.vue b/src/views/dashboard/workbench/components/SaleRadar.vue
new file mode 100644
index 0000000..d623ea3
--- /dev/null
+++ b/src/views/dashboard/workbench/components/SaleRadar.vue
@@ -0,0 +1,94 @@
+<template>
+  <Card title="销售统计" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '400px',
+    },
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        legend: {
+          bottom: 0,
+          data: ['Visits', 'Sales'],
+        },
+        tooltip: {},
+        radar: {
+          radius: '60%',
+          splitNumber: 8,
+          indicator: [
+            {
+              name: '2017',
+            },
+            {
+              name: '2017',
+            },
+            {
+              name: '2018',
+            },
+            {
+              name: '2019',
+            },
+            {
+              name: '2020',
+            },
+            {
+              name: '2021',
+            },
+          ],
+        },
+        series: [
+          {
+            type: 'radar' as 'custom',
+            symbolSize: 0,
+            areaStyle: {
+              shadowBlur: 0,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1,
+            },
+            data: [
+              {
+                value: [90, 50, 86, 40, 50, 20],
+                name: 'Visits',
+                itemStyle: {
+                  color: '#b6a2de',
+                },
+              },
+              {
+                value: [70, 75, 70, 76, 20, 85],
+                name: 'Sales',
+                itemStyle: {
+                  color: '#67e0e3',
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/dashboard/workbench/components/WorkbenchHeader.vue b/src/views/dashboard/workbench/components/WorkbenchHeader.vue
new file mode 100644
index 0000000..9a75adc
--- /dev/null
+++ b/src/views/dashboard/workbench/components/WorkbenchHeader.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="lg:flex">
+    <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
+    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
+      <h1 class="md:text-lg text-md">早安, {{ userinfo.realname }}, 开始您一天的工作吧！</h1>
+      <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
+    </div>
+    <div class="flex flex-1 justify-end md:mt-0 mt-4">
+      <div class="flex flex-col justify-center text-right">
+        <span class="text-secondary"> 待办 </span>
+        <span class="text-2xl">2/10</span>
+      </div>
+
+      <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
+        <span class="text-secondary"> 项目 </span>
+        <span class="text-2xl">8</span>
+      </div>
+      <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
+        <span class="text-secondary"> 团队 </span>
+        <span class="text-2xl">300</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Avatar } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import headerImg from '/@/assets/images/header.jpg';
+
+  const userStore = useUserStore();
+  const userinfo = computed(() => userStore.getUserInfo);
+</script>
diff --git a/src/views/dashboard/workbench/components/data.ts b/src/views/dashboard/workbench/components/data.ts
new file mode 100644
index 0000000..50a5756
--- /dev/null
+++ b/src/views/dashboard/workbench/components/data.ts
@@ -0,0 +1,156 @@
+interface GroupItem {
+  title: string;
+  icon: string;
+  color: string;
+  desc: string;
+  date: string;
+  group: string;
+}
+
+interface NavItem {
+  title: string;
+  icon: string;
+  color: string;
+}
+
+interface DynamicInfoItem {
+  avatar: string;
+  name: string;
+  date: string;
+  desc: string;
+}
+
+export const navItems: NavItem[] = [
+  {
+    title: '首页',
+    icon: 'ion:home-outline',
+    color: '#1fdaca',
+  },
+  {
+    title: '仪表盘',
+    icon: 'ion:grid-outline',
+    color: '#bf0c2c',
+  },
+  {
+    title: '组件',
+    icon: 'ion:layers-outline',
+    color: '#e18525',
+  },
+  {
+    title: '系统管理',
+    icon: 'ion:settings-outline',
+    color: '#3fb27f',
+  },
+  {
+    title: '权限管理',
+    icon: 'ion:key-outline',
+    color: '#4daf1bc9',
+  },
+  {
+    title: '图表',
+    icon: 'ion:bar-chart-outline',
+    color: '#00d8ff',
+  },
+];
+
+export const dynamicInfoItems: DynamicInfoItem[] = [
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '刚刚',
+    desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+  },
+  {
+    avatar: 'dynamic-avatar-2|svg',
+    name: '艾文',
+    date: '1个小时前',
+    desc: `关注了 <a>威廉</a> `,
+  },
+  {
+    avatar: 'dynamic-avatar-3|svg',
+    name: '克里斯',
+    date: '1天前',
+    desc: `发布了 <a>个人动态</a> `,
+  },
+  {
+    avatar: 'dynamic-avatar-4|svg',
+    name: 'Jeecg',
+    date: '2天前',
+    desc: `发表文章 <a>如何编写一个Vite插件</a> `,
+  },
+  {
+    avatar: 'dynamic-avatar-5|svg',
+    name: '皮特',
+    date: '3天前',
+    desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+  },
+  {
+    avatar: 'dynamic-avatar-6|svg',
+    name: '杰克',
+    date: '1周前',
+    desc: `关闭了问题 <a>如何运行项目</a> `,
+  },
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '1周前',
+    desc: `发布了 <a>个人动态</a> `,
+  },
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '2021-04-01 20:00',
+    desc: `推送了代码到 <a>Github</a>`,
+  },
+];
+
+export const groupItems: GroupItem[] = [
+  {
+    title: 'Github',
+    icon: 'carbon:logo-github',
+    color: '',
+    desc: '不要等待机会，而要创造机会。',
+    group: '开源组',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Vue',
+    icon: 'ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '算法组',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Html5',
+    icon: 'ion:logo-html5',
+    color: '#e18525',
+    desc: '没有什么才能比努力更重要。',
+    group: '上班摸鱼',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Angular',
+    icon: 'ion:logo-angular',
+    color: '#bf0c2c',
+    desc: '热情和欲望可以突破一切难关。',
+    group: 'UI',
+    date: '2021-04-01',
+  },
+  {
+    title: 'React',
+    icon: 'bx:bxl-react',
+    color: '#00d8ff',
+    desc: '健康的身体是实目标的基石。',
+    group: '技术牛',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Js',
+    icon: 'ion:logo-javascript',
+    color: '#4daf1bc9',
+    desc: '路是走出来的，而不是空想出来的。',
+    group: '架构组',
+    date: '2021-04-01',
+  },
+];
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
new file mode 100644
index 0000000..cc17cae
--- /dev/null
+++ b/src/views/dashboard/workbench/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <PageWrapper>
+    <template #headerContent> <WorkbenchHeader /> </template>
+    <div class="lg:flex">
+      <div class="lg:w-7/10 w-full !mr-4 enter-y">
+        <ProjectCard :loading="loading" class="enter-y" />
+        <DynamicInfo :loading="loading" class="!my-4 enter-y" />
+      </div>
+      <div class="lg:w-3/10 w-full enter-y">
+        <QuickNav :loading="loading" class="enter-y" />
+
+        <Card class="!my-4 enter-y" :loading="loading">
+          <img class="xl:h-50 h-30 mx-auto" src="../../../assets/svg/illustration.svg" />
+        </Card>
+
+        <SaleRadar :loading="loading" class="enter-y" />
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import WorkbenchHeader from './components/WorkbenchHeader.vue';
+  import ProjectCard from './components/ProjectCard.vue';
+  import QuickNav from './components/QuickNav.vue';
+  import DynamicInfo from './components/DynamicInfo.vue';
+  import SaleRadar from './components/SaleRadar.vue';
+
+  const loading = ref(true);
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+</script>
diff --git a/src/views/monitor/datalog/DataLogCompareModal.vue b/src/views/monitor/datalog/DataLogCompareModal.vue
new file mode 100644
index 0000000..fd4878a
--- /dev/null
+++ b/src/views/monitor/datalog/DataLogCompareModal.vue
@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="register" title="数据版本对比" width="60%" destroyOnClose :showOkBtn="false">
+      <!-- 版本选择区 -->
+      <div class="compare-header">
+        <div class="compare-header__info">
+          <span class="compare-header__label">数据表：</span>
+          <a-tag color="blue">{{ dataTable }}</a-tag>
+          <span class="compare-header__label" style="margin-left: 16px">数据ID：</span>
+          <span class="compare-header__id">{{ dataId }}</span>
+        </div>
+        <div class="compare-header__selector">
+          <span class="compare-header__label">版本对比：</span>
+          <a-select
+            placeholder="选择版本"
+            @change="handleChange1"
+            v-model:value="params.dataId1"
+            style="width: 120px"
+          >
+            <a-select-option v-for="log in dataVersionList" :key="log.value" :value="log.value">
+              V{{ log.text }}
+            </a-select-option>
+          </a-select>
+          <span class="compare-header__vs">VS</span>
+          <a-select
+            placeholder="选择版本"
+            @change="handleChange2"
+            v-model:value="params.dataId2"
+            style="width: 120px"
+          >
+            <a-select-option v-for="log in dataVersionList" :key="log.value" :value="log.value">
+              V{{ log.text }}
+            </a-select-option>
+          </a-select>
+        </div>
+      </div>
+
+      <!-- 差异统计 -->
+      <div class="compare-stats" v-if="dataSource.length > 0">
+        <a-tag color="red">{{ diffCount }} 处差异</a-tag>
+        <a-tag color="green">{{ dataSource.length - diffCount }} 处相同</a-tag>
+        <span class="compare-stats__total">共 {{ dataSource.length }} 个字段</span>
+      </div>
+
+      <!-- 对比表格 -->
+      <div class="compare-table" v-if="isUpdate">
+        <table class="compare-table__inner">
+          <thead>
+            <tr>
+              <th class="col-field">字段名</th>
+              <th class="col-value">
+                <span class="version-tag version-tag--left">V{{ dataVersion1Num }}</span>
+              </th>
+              <th class="col-status"></th>
+              <th class="col-value">
+                <span class="version-tag version-tag--right">V{{ dataVersion2Num }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, idx) in dataSource" :key="idx" :class="{ 'row-diff': row.isDiff, 'row-same': !row.isDiff }">
+              <td class="col-field">
+                <span class="field-name">{{ row.code }}</span>
+              </td>
+              <td class="col-value" :class="{ 'cell-diff': row.isDiff }">
+                <span class="cell-text">{{ formatValue(row.dataVersion1) }}</span>
+              </td>
+              <td class="col-status">
+                <span v-if="row.isDiff" class="diff-icon">≠</span>
+                <span v-else class="same-icon">=</span>
+              </td>
+              <td class="col-value" :class="{ 'cell-diff': row.isDiff }">
+                <span class="cell-text">{{ formatValue(row.dataVersion2) }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, unref, ref, reactive, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { queryCompareList, queryDataVerList } from './datalog.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'DataLogCompareModal',
+    components: {
+      BasicModal,
+    },
+    emits: ['register', 'btnOk'],
+    setup() {
+      const { createMessage } = useMessage();
+      const dataSource = ref<any[]>([]);
+      const dataVersion1Num = ref('');
+      const dataVersion2Num = ref('');
+      const isUpdate = ref(true);
+      const dataId = ref('');
+      const dataTable = ref('');
+      const dataVersionList = ref<any[]>([]);
+      const params = reactive({ dataId1: '', dataId2: '' });
+
+      const diffCount = computed(() => dataSource.value.filter((r) => r.isDiff).length);
+
+      const [register, { setModalProps }] = useModalInner(async (data) => {
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          const checkedRows = data.selectedRows;
+          dataTable.value = checkedRows[0].dataTable;
+          dataId.value = checkedRows[0].dataId;
+          params.dataId1 = checkedRows[0].id;
+          params.dataId2 = checkedRows[1].id;
+          await initDataVersionList();
+          await initTableData();
+        }
+      });
+
+      async function initTableData() {
+        queryCompareList(unref(params)).then((res) => {
+          dataVersion1Num.value = res[0].dataVersion;
+          dataVersion2Num.value = res[1].dataVersion;
+          const json1 = JSON.parse(res[0].dataContent);
+          const json2 = JSON.parse(res[1].dataContent);
+          // 收集所有字段（兼顾两边都有的和只有一边有的）
+          const allKeys = new Set([...Object.keys(json1), ...Object.keys(json2)]);
+          const data: any[] = [];
+          allKeys.forEach((fieldKey) => {
+            const v1 = json1[fieldKey] ?? '';
+            const v2 = json2[fieldKey] ?? '';
+            data.push({
+              code: fieldKey,
+              dataVersion1: v1,
+              dataVersion2: v2,
+              isDiff: String(v1) !== String(v2),
+            });
+          });
+          // 差异项排前面
+          data.sort((a, b) => (a.isDiff === b.isDiff ? 0 : a.isDiff ? -1 : 1));
+          dataSource.value = data;
+        });
+      }
+
+      function handleChange1(value) {
+        if (params.dataId2 == value) {
+          createMessage.warning('相同版本号不能比较');
+          return;
+        }
+        params.dataId1 = value;
+        initTableData();
+      }
+
+      function handleChange2(value) {
+        if (params.dataId1 == value) {
+          createMessage.warning('相同版本号不能比较');
+          return;
+        }
+        params.dataId2 = value;
+        initTableData();
+      }
+
+      async function initDataVersionList() {
+        queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
+          dataVersionList.value = res.map((value) => ({
+            text: value['dataVersion'],
+            value: value['id'],
+          }));
+        });
+      }
+
+      function formatValue(val) {
+        if (val === null || val === undefined || val === '') return '--';
+        return String(val);
+      }
+
+      return {
+        dataSource,
+        isUpdate,
+        dataVersionList,
+        dataVersion1Num,
+        dataVersion2Num,
+        register,
+        handleChange1,
+        handleChange2,
+        params,
+        dataTable,
+        dataId,
+        diffCount,
+        formatValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .compare-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    &__info {
+      display: flex;
+      align-items: center;
+    }
+
+    &__label {
+      font-size: 13px;
+      color: #8c8c8c;
+      white-space: nowrap;
+    }
+
+    &__id {
+      font-size: 12px;
+      color: #595959;
+      font-family: 'Consolas', 'Monaco', monospace;
+      word-break: break-all;
+    }
+
+    &__selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    &__vs {
+      font-weight: 600;
+      color: #faad14;
+      font-size: 14px;
+    }
+  }
+
+  .compare-stats {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &__total {
+      font-size: 12px;
+      color: #8c8c8c;
+      margin-left: 4px;
+    }
+  }
+
+  .compare-table {
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+    overflow: hidden;
+
+    &__inner {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+
+      thead {
+        tr {
+          background: #fafafa;
+        }
+
+        th {
+          padding: 10px 12px;
+          font-weight: 500;
+          color: #595959;
+          border-bottom: 1px solid #f0f0f0;
+          text-align: left;
+        }
+      }
+
+      tbody {
+        tr {
+          transition: background 0.2s;
+
+          &:hover {
+            background: #fafafa;
+          }
+
+          &:not(:last-child) td {
+            border-bottom: 1px solid #f5f5f5;
+          }
+        }
+
+        td {
+          padding: 8px 12px;
+          color: #333;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+
+  .col-field {
+    width: 140px;
+    min-width: 120px;
+  }
+
+  .col-value {
+    width: 40%;
+  }
+
+  .col-status {
+    width: 36px;
+    text-align: center !important;
+  }
+
+  .field-name {
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 12px;
+    color: #1890ff;
+  }
+
+  .cell-text {
+    word-break: break-all;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .row-diff {
+    .field-name {
+      font-weight: 600;
+    }
+  }
+
+  .cell-diff {
+    background: #fff7e6;
+
+    .cell-text {
+      color: #d46b08;
+      font-weight: 500;
+    }
+  }
+
+  .diff-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #fff1f0;
+    color: #ff4d4f;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .same-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #f6ffed;
+    color: #52c41a;
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .version-tag {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+
+    &--left {
+      background: #e6f7ff;
+      color: #1890ff;
+    }
+
+    &--right {
+      background: #f6ffed;
+      color: #52c41a;
+    }
+  }
+</style>
diff --git a/src/views/monitor/datalog/DataLogModal.vue b/src/views/monitor/datalog/DataLogModal.vue
new file mode 100644
index 0000000..743e8e6
--- /dev/null
+++ b/src/views/monitor/datalog/DataLogModal.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <BasicModal v-bind="$attrs" @register="registerModal" title="数据对比窗口" :minHeight="300" width="800px" @ok="handleSubmit">
+      <a-spin :spinning="confirmLoading">
+        <a-form @submit="handleSubmit" :form="form" class="form">
+          <a-row class="form-row" :gutter="24">
+            <a-col :md="12" :sm="8">
+              <a-form-item label="数据库表名" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" name="dataTable">
+                <a-input placeholder="请输入数据库表名" v-model:value="dataTable" disabled />
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="12" :sm="8">
+              <a-form-item label="数据ID" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
+                <a-input placeholder="请输入数据ID" v-model:value="dataId" disabled />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row class="form-row" :gutter="24">
+            <a-col :md="12" :sm="8">
+              <a-form-item label="版本号1" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
+                <a-select placeholder="请选择版本号" @change="handleChange1" v-model:value="dataVersion1">
+                  <a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
+                    {{ log.dataVersion }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :sm="8">
+              <a-form-item label="版本号2" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
+                <a-select placeholder="请选择版本号" @change="handleChange2" v-model:value="dataVersion2">
+                  <a-select-option v-for="(log, logindex) in dataVersionList" :key="logindex.toString()" :value="log.id">
+                    {{ log.dataVersion }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </BasicModal>
+    <DataLogCompareModal @register="registerDataLogCompareModal"></DataLogCompareModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { queryDataVerList } from './datalog.api';
+  import { reactive, ref, unref } from 'vue';
+  import DataLogCompareModal from './DataLogCompareModal.vue';
+  const dataId1 = ref('');
+  const dataId2 = ref('');
+  const dataId = ref('');
+  const dataTable1 = ref('');
+  const dataID3 = ref('');
+  const dataTable = ref('');
+  const confirmLoading = ref(false);
+  const isUpdate = ref(true);
+  const dataVersionList = ref([]);
+  let dataLog = reactive({});
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      let checkedRows = data.selectedRows;
+      dataTable.value = checkedRows[0].dataTable;
+      dataId.value = checkedRows[0].dataId;
+      dataId1.value = checkedRows[0].id;
+      dataId2.value = checkedRows[1].id;
+      initDataVersionList();
+    }
+  });
+
+  const [registerDataLogCompareModal, { openModal }] = useModal();
+
+  function handleChange1(value) {
+    dataId1.value = value;
+  }
+
+  function handleChange2(value) {
+    dataId2.value = value;
+  }
+
+  function handleSubmit() {
+    let result = { dataId1: dataId1.value, dataId2: dataId2.value };
+    openModal(true, {
+      result,
+      isUpdate: true,
+    });
+    closeModal();
+  }
+
+  function initDataVersionList() {
+    queryDataVerList({ dataTable: dataTable.value, dataId: dataId.value }).then((res) => {
+      dataVersionList.value = res.map((value, key, arr) => {
+        arr['label'] = value;
+        return arr;
+      });
+      console.info(dataVersionList.value);
+    });
+  }
+</script>
+
+<style scoped lang="less">
+  .detail-iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+  }
+</style>
diff --git a/src/views/monitor/datalog/datalog.api.ts b/src/views/monitor/datalog/datalog.api.ts
new file mode 100644
index 0000000..a50f12b
--- /dev/null
+++ b/src/views/monitor/datalog/datalog.api.ts
@@ -0,0 +1,31 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/dataLog/list',
+  queryDataVerList = '/sys/dataLog/queryDataVerList',
+  queryCompareList = '/sys/dataLog/queryCompareList',
+}
+
+/**
+ * 查询数据日志列表
+ * @param params
+ */
+export const getDataLogList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 查询数据日志列表
+ * @param params
+ */
+export const queryDataVerList = (params) => {
+  return defHttp.get({ url: Api.queryDataVerList, params });
+};
+
+/**
+ * 查询对比数据
+ * @param params
+ */
+export const queryCompareList = (params) => {
+  return defHttp.get({ url: Api.queryCompareList, params });
+};
diff --git a/src/views/monitor/datalog/datalog.data.ts b/src/views/monitor/datalog/datalog.data.ts
new file mode 100644
index 0000000..85fe0cb
--- /dev/null
+++ b/src/views/monitor/datalog/datalog.data.ts
@@ -0,0 +1,109 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag, Tooltip } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '表名',
+    dataIndex: 'dataTable',
+    width: 120,
+    align: 'left',
+    customRender: ({ text }) => {
+      return h(Tag, { color: 'blue' }, () => text);
+    },
+  },
+  {
+    title: '数据ID',
+    dataIndex: 'dataId',
+    width: 260,
+    align: 'left',
+    ellipsis: true,
+    customRender: ({ text }) => {
+      return h(
+        'span',
+        { style: 'font-family: Consolas, Monaco, monospace; font-size: 12px; color: #595959' },
+        text
+      );
+    },
+  },
+  {
+    title: '版本号',
+    dataIndex: 'dataVersion',
+    width: 70,
+    align: 'center',
+    customRender: ({ text }) => {
+      return h(Tag, { color: 'green' }, () => 'V' + text);
+    },
+  },
+  {
+    title: '数据内容',
+    dataIndex: 'dataContent',
+    ellipsis: true,
+    customRender: ({ text }) => {
+      if (!text) return '--';
+      // 尝试格式化 JSON 显示关键字段
+      try {
+        const obj = JSON.parse(text);
+        const keys = Object.keys(obj);
+        const preview = keys
+          .slice(0, 3)
+          .map((k) => {
+            const v = obj[k];
+            const val = v === null || v === undefined || v === '' ? '--' : String(v);
+            return `${k}: ${val.length > 20 ? val.substring(0, 20) + '...' : val}`;
+          })
+          .join(' | ');
+        const suffix = keys.length > 3 ? ` (+${keys.length - 3} 字段)` : '';
+        return h(
+          Tooltip,
+          { title: JSON.stringify(obj, null, 2), overlayStyle: { maxWidth: '500px', whiteSpace: 'pre-wrap', fontFamily: 'Consolas, monospace', fontSize: '12px' } },
+          () => h('span', { style: 'font-size: 12px; color: #595959' }, preview + suffix)
+        );
+      } catch {
+        return text;
+      }
+    },
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createBy',
+    sorter: true,
+    width: 90,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+    sorter: true,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'dataTable',
+    label: '表名',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入表名',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'dataId',
+    label: '数据ID',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入数据ID',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'createBy',
+    label: '创建人',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入创建人',
+    },
+    colProps: { span: 6 },
+  },
+];
diff --git a/src/views/monitor/datalog/index.vue b/src/views/monitor/datalog/index.vue
new file mode 100644
index 0000000..5089a01
--- /dev/null
+++ b/src/views/monitor/datalog/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:swap-outlined" type="primary" size="small" @click="handleCompare">数据比较</a-button>
+        <span v-if="selectedRowKeys.length === 0" class="compare-tip">请勾选两条相同数据ID的记录</span>
+        <a-tag v-else-if="selectedRowKeys.length === 1" color="warning" style="margin-left: 10px">再选一条相同数据ID的记录</a-tag>
+        <a-tag v-else-if="selectedRowKeys.length === 2 && !isSameDataId" color="error" style="margin-left: 10px">数据ID不一致，无法比较</a-tag>
+        <a-tag v-else-if="selectedRowKeys.length === 2 && isSameDataId" color="success" style="margin-left: 10px">可以比较 V{{ selectedRows[0]?.dataVersion }} vs V{{ selectedRows[1]?.dataVersion }}</a-tag>
+        <a-tag v-else color="error" style="margin-left: 10px">只能选择两条记录</a-tag>
+      </template>
+    </BasicTable>
+    <DataLogCompareModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="monitor-datalog" setup>
+  import { computed } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import DataLogCompareModal from './DataLogCompareModal.vue';
+  import { getDataLogList } from './datalog.api';
+  import { columns, searchFormSchema } from './datalog.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  const [registerModal, { openModal }] = useModal();
+  const { createMessage } = useMessage();
+
+  const { tableContext } = useListPage({
+    designScope: 'datalog-template',
+    tableProps: {
+      title: '数据日志列表',
+      api: getDataLogList,
+      columns: columns,
+      formConfig: {
+        labelWidth: 80,
+        schemas: searchFormSchema,
+      },
+      actionColumn: false,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  const isSameDataId = computed(() => {
+    const rows = selectedRows.value;
+    if (!rows || rows.length !== 2) return false;
+    return rows[0].dataId === rows[1].dataId;
+  });
+
+  function handleCompare() {
+    const rows = selectedRows.value;
+    if (!rows || rows.length !== 2) {
+      createMessage.warning('请选择两条数据进行比较！');
+      return;
+    }
+    if (rows[0].dataId !== rows[1].dataId) {
+      createMessage.warning('请选择相同数据ID的记录进行比较！');
+      return;
+    }
+    openModal(true, {
+      selectedRows: rows,
+      isUpdate: true,
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .compare-tip {
+    margin-left: 10px;
+    font-size: 12px;
+    color: #999;
+  }
+</style>
diff --git a/src/views/monitor/datasource/DataSourceModal.vue b/src/views/monitor/datasource/DataSourceModal.vue
new file mode 100644
index 0000000..e45d9d1
--- /dev/null
+++ b/src/views/monitor/datasource/DataSourceModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm">
+      <template #pwd="{ model, field }">
+        <a-row :gutter="8">
+          <a-col :sm="15" :md="16" :lg="17" :xl="19">
+            <a-input-password v-model:value="model[field]" placeholder="请输入密码" />
+          </a-col>
+          <a-col :sm="9" :md="7" :lg="7" :xl="5">
+            <a-button type="primary" style="width: 100%" @click="handleTest">测试</a-button>
+          </a-col>
+        </a-row>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './datasource.data';
+  import { saveOrUpdateDataSource, getDataSourceById, testConnection } from './datasource.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { getFieldsValue, resetFields, validateFields, setFieldsValue, validate }] = useForm({
+    // labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //获取详情
+      data.record = await getDataSourceById({ id: data.record.id });
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增数据源' : '编辑数据源'));
+
+  async function handleTest() {
+    let keys = ['dbType', 'dbDriver', 'dbUrl', 'dbName', 'dbUsername', 'dbPassword'];
+    // 获取以上字段的值，并清除校验状态
+    let fieldsValues = getFieldsValue(keys);
+    let setFields = {};
+    keys.forEach((key) => (setFields[key] = { value: fieldsValues[key], errors: null }));
+    await validateFields(keys).then((values) => {
+      let loading = createMessage.loading('连接中....', 0);
+      testConnection(values)
+        .then((data) => {
+          if (data.success) {
+            createMessage.success('连接成功');
+          }
+        })
+        .catch((error) => {})
+        .finally(() => loading());
+    });
+  }
+
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDataSource(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/monitor/datasource/datasource.api.ts b/src/views/monitor/datasource/datasource.api.ts
new file mode 100644
index 0000000..3aa0580
--- /dev/null
+++ b/src/views/monitor/datasource/datasource.api.ts
@@ -0,0 +1,83 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/dataSource/list',
+  save = '/sys/dataSource/add',
+  edit = '/sys/dataSource/edit',
+  get = '/sys/dataSource/queryById',
+  delete = '/sys/dataSource/delete',
+  testConnection = '/online/cgreport/api/testConnection',
+  deleteBatch = '/sys/dataSource/deleteBatch',
+  exportXlsUrl = 'sys/dataSource/exportXls',
+  importExcelUrl = 'sys/dataSource/importExcel',
+}
+/**
+ * 导出api
+ */
+export const getExportUrl = Api.exportXlsUrl;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcelUrl;
+
+/**
+ * 查询数据源列表
+ * @param params
+ */
+export const getDataSourceList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新数据源
+ * @param params
+ */
+export const saveOrUpdateDataSource = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 查询数据源详情
+ * @param params
+ */
+export const getDataSourceById = (params) => {
+  return defHttp.get({ url: Api.get, params });
+};
+
+/**
+ * 删除数据源
+ * @param params
+ */
+export const deleteDataSource = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 测试连接
+ * @param params
+ */
+export const testConnection = (params) => {
+  return defHttp.post({ url: Api.testConnection, params });
+};
+
+/**
+ * 批量删除数据源
+ * @param params
+ */
+export const batchDeleteDataSource = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
diff --git a/src/views/monitor/datasource/datasource.data.ts b/src/views/monitor/datasource/datasource.data.ts
new file mode 100644
index 0000000..26d2629
--- /dev/null
+++ b/src/views/monitor/datasource/datasource.data.ts
@@ -0,0 +1,185 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+const dbDriverMap = {
+  // MySQL 数据库
+  '1': { dbDriver: 'com.mysql.jdbc.Driver' },
+  //MySQL5.7+ 数据库
+  '4': { dbDriver: 'com.mysql.cj.jdbc.Driver' },
+  // Oracle
+  '2': { dbDriver: 'oracle.jdbc.OracleDriver' },
+  // SQLServer 数据库
+  '3': { dbDriver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver' },
+  // marialDB 数据库
+  '5': { dbDriver: 'org.mariadb.jdbc.Driver' },
+  // postgresql 数据库
+  '6': { dbDriver: 'org.postgresql.Driver' },
+  // 达梦 数据库
+  '7': { dbDriver: 'dm.jdbc.driver.DmDriver' },
+  // 人大金仓 数据库
+  '8': { dbDriver: 'com.kingbase8.Driver' },
+  // 神通 数据库
+  '9': { dbDriver: 'com.oscar.Driver' },
+  // SQLite 数据库
+  '10': { dbDriver: 'org.sqlite.JDBC' },
+  // DB2 数据库
+  '11': { dbDriver: 'com.ibm.db2.jcc.DB2Driver' },
+  // Hsqldb 数据库
+  '12': { dbDriver: 'org.hsqldb.jdbc.JDBCDriver' },
+  // Derby 数据库
+  '13': { dbDriver: 'org.apache.derby.jdbc.ClientDriver' },
+  // H2 数据库
+  '14': { dbDriver: 'org.h2.Driver' },
+  // 其他数据库
+  '15': { dbDriver: '' },
+};
+const dbUrlMap = {
+  // MySQL 数据库
+  '1': { dbUrl: 'jdbc:mysql://127.0.0.1:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false' },
+  //MySQL5.7+ 数据库
+  '4': {
+    dbUrl:
+      'jdbc:mysql://127.0.0.1:3306/test?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai',
+  },
+  // Oracle
+  '2': { dbUrl: 'jdbc:oracle:thin:@127.0.0.1:1521:ORCL' },
+  // SQLServer 数据库
+  '3': { dbUrl: 'jdbc:sqlserver://127.0.0.1:1433;SelectMethod=cursor;DatabaseName=jeecgboot' },
+  // Mariadb 数据库
+  '5': { dbUrl: 'jdbc:mariadb://127.0.0.1:3306/test?characterEncoding=UTF-8&useSSL=false' },
+  // Postgresql 数据库
+  '6': { dbUrl: 'jdbc:postgresql://127.0.0.1:5432/test' },
+  // 达梦 数据库
+  '7': { dbUrl: 'jdbc:dm://127.0.0.1:5236/?jeecg-boot&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=utf-8' },
+  // 人大金仓 数据库
+  '8': { dbUrl: 'jdbc:kingbase8://127.0.0.1:54321/test' },
+  // 神通 数据库
+  '9': { dbUrl: 'jdbc:oscar://192.168.1.125:2003/test' },
+  // SQLite 数据库
+  '10': { dbUrl: 'jdbc:sqlite://opt/test.db' },
+  // DB2 数据库
+  '11': { dbUrl: 'jdbc:db2://127.0.0.1:50000/test' },
+  // Hsqldb 数据库
+  '12': { dbUrl: 'jdbc:hsqldb:hsql://127.0.0.1/test' },
+  // Derby 数据库
+  '13': { dbUrl: 'jdbc:derby://127.0.0.1:1527/test' },
+  // H2 数据库
+  '14': { dbUrl: 'jdbc:h2:tcp://127.0.0.1:8082/test' },
+  // 其他数据库
+  '15': { dbUrl: '' },
+};
+
+export const columns: BasicColumn[] = [
+  {
+    title: '数据源名称',
+    dataIndex: 'name',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '数据库类型',
+    dataIndex: 'dbType_dictText',
+    width: 200,
+  },
+  {
+    title: '驱动类',
+    dataIndex: 'dbDriver',
+    width: 200,
+  },
+  {
+    title: '数据源地址',
+    dataIndex: 'dbUrl',
+  },
+  {
+    title: '用户名',
+    dataIndex: 'dbUsername',
+    width: 200,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '数据源名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'dbType',
+    label: '数据库类型',
+    component: 'JDictSelectTag',
+    colProps: { span: 8 },
+    componentProps: () => {
+      return {
+        dictCode: 'database_type',
+      };
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'code',
+    label: '数据源编码',
+    component: 'Input',
+    required: true,
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+  },
+  {
+    field: 'name',
+    label: '数据源名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'dbType',
+    label: '数据库类型',
+    component: 'JDictSelectTag',
+    required: true,
+    componentProps: ({ formModel }) => {
+      return {
+        dictCode: 'database_type',
+        onChange: (e: any) => {
+          formModel = Object.assign(formModel, dbDriverMap[e], dbUrlMap[e]);
+        },
+      };
+    },
+  },
+  {
+    field: 'dbDriver',
+    label: '驱动类',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'dbUrl',
+    label: '数据源地址',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'dbUsername',
+    label: '用户名',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'dbPassword',
+    label: '密码',
+    required: true,
+    component: 'InputPassword',
+    slot: 'pwd',
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+  },
+];
diff --git a/src/views/monitor/datasource/index.vue b/src/views/monitor/datasource/index.vue
new file mode 100644
index 0000000..f12f5af
--- /dev/null
+++ b/src/views/monitor/datasource/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-right: 5px">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <DataSourceModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="monitor-datasource" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { getDataSourceList, deleteDataSource, batchDeleteDataSource, getExportUrl, getImportUrl } from './datasource.api';
+  import { columns, searchFormSchema } from './datasource.data';
+  import DataSourceModal from './DataSourceModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
+    designScope: 'quartz-template',
+    tableProps: {
+      title: '任务列表',
+      api: getDataSourceList,
+      columns: columns,
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+        fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
+      },
+    },
+    exportConfig: {
+      name: '数据源列表',
+      url: getExportUrl,
+    },
+    importConifg: {
+      url: getImportUrl,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteDataSource({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteDataSource({ ids: selectedRowKeys.value }, reload);
+  }
+</script>
diff --git a/src/views/monitor/disk/DiskInfo.vue b/src/views/monitor/disk/DiskInfo.vue
new file mode 100644
index 0000000..7154678
--- /dev/null
+++ b/src/views/monitor/disk/DiskInfo.vue
@@ -0,0 +1,37 @@
+<template>
+  <Skeleton v-if="spinning" active />
+  <div v-else>
+    <a-row>
+      <template v-if="diskInfo && diskInfo.length > 0">
+        <a-col :span="6" v-for="(item, index) in diskInfo" :key="'diskInfo' + index">
+          <gauge :data="item"></gauge>
+        </a-col>
+      </template>
+    </a-row>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { Skeleton } from 'ant-design-vue';
+  import { queryDiskInfo } from './disk.api';
+  import gauge from './gauge.vue';
+
+  const diskInfo = ref([]);
+  const spinning = ref(true);
+
+  function loadRedisInfo() {
+    queryDiskInfo()
+      .then((res) => {
+        for (let i = 0; i < res.length; i++) {
+          // 当前算法算的是磁盘的已使用空间
+          res[i].restPPT = 100 - parseInt(String((res[i].rest / res[i].max) * 100));
+        }
+        diskInfo.value = res;
+      })
+      .finally(() => (spinning.value = false));
+  }
+
+  onMounted(() => {
+    loadRedisInfo();
+  });
+</script>
diff --git a/src/views/monitor/disk/disk.api.ts b/src/views/monitor/disk/disk.api.ts
new file mode 100644
index 0000000..ce01231
--- /dev/null
+++ b/src/views/monitor/disk/disk.api.ts
@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  queryDiskInfo = '/sys/actuator/redis/queryDiskInfo',
+}
+
+/**
+ * 详细信息
+ */
+export const queryDiskInfo = () => {
+  return defHttp.get({ url: Api.queryDiskInfo }, { successMessageMode: 'none' });
+};
diff --git a/src/views/monitor/disk/gauge.vue b/src/views/monitor/disk/gauge.vue
new file mode 100644
index 0000000..7711fa7
--- /dev/null
+++ b/src/views/monitor/disk/gauge.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div ref="chartRef" style="width: 100%; height: 400px"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, reactive, Ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { GaugeChart } from 'echarts/charts';
+
+  const props = defineProps({ data: {} });
+  const dataSource = ref([]);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const loading = ref(false);
+  const { createMessage } = useMessage();
+  const option = reactive({
+    series: [
+      {
+        type: 'gauge',
+        progress: {
+          show: true,
+          width: 18,
+        },
+        axisLine: {
+          lineStyle: {
+            width: 18,
+          },
+        },
+        axisTick: {
+          show: true,
+        },
+        splitLine: {
+          length: 15,
+          lineStyle: {
+            width: 2,
+            color: '#999',
+          },
+        },
+        axisLabel: {
+          distance: 25,
+          color: '#999',
+          fontSize: 15,
+        },
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 25,
+          itemStyle: {
+            borderWidth: 10,
+          },
+        },
+        title: {},
+        detail: {
+          valueAnimation: true,
+          fontSize: 50,
+          formatter: '{value}%',
+          offsetCenter: [0, '80%'],
+        },
+        data: [
+          {
+            value: 70,
+            name: '本地磁盘',
+          },
+        ],
+      },
+    ],
+  });
+
+  function initCharts() {
+    option.series[0].data[0].name = props.data.name;
+    option.series[0].data[0].value = props.data.restPPT;
+    setOptions(option);
+  }
+
+  onMounted(() => {
+    console.info(props.data);
+    echarts.use(GaugeChart);
+    initCharts();
+  });
+</script>
diff --git a/src/views/monitor/log/index.vue b/src/views/monitor/log/index.vue
new file mode 100644
index 0000000..7582060
--- /dev/null
+++ b/src/views/monitor/log/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <BasicTable :ellipsis="true" @register="registerTable" :searchInfo="searchInfo" :columns="logColumns" :expand-column-width="16">
+    <template #tableTitle>
+      <div class="table-title-bar">
+        <a-tabs defaultActiveKey="4" @change="tabChange" size="small">
+          <a-tab-pane tab="异常日志" key="4"></a-tab-pane>
+          <a-tab-pane tab="登录日志" key="1"></a-tab-pane>
+          <a-tab-pane tab="操作日志" key="2"></a-tab-pane>
+        </a-tabs>
+        <span class="export-btn" v-if="searchInfo.logType == 2">
+          <a-tooltip>
+            <template #title>导出</template>
+            <a-button  type="text" preIcon="ant-design:download-outlined" shape="circle" @click="onExportXls" />
+          </a-tooltip>
+        </span>
+      </div>
+    </template>
+    <template #expandedRowRender="{ record }">
+      <div v-if="searchInfo.logType == 2">
+        <div style="margin-bottom: 5px">
+          <a-badge status="success" style="vertical-align: middle" />
+          <span style="vertical-align: middle">请求方法:{{ record.method }}</span></div
+        >
+        <div>
+          <a-badge status="processing" style="vertical-align: middle" />
+          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span></div
+        >
+      </div>
+      <div v-if="searchInfo.logType == 4">
+        <div class="error-section">
+          <div class="error-label"><a-badge status="error" /> 异常堆栈:</div>
+          <pre class="error-box">{{ record.requestParam }}</pre>
+        </div>
+      </div>
+    </template>
+  </BasicTable>
+</template>
+<script lang="ts" name="monitor-log" setup>
+  import { ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { getLogList, getExportUrl } from './log.api';
+  import {
+    columns,
+    searchFormSchema,
+    operationLogColumn,
+    operationSearchFormSchema,
+    exceptionColumns
+  } from './log.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  const { createMessage } = useMessage();
+  const checkedKeys = ref<Array<string | number>>([]);
+
+  const logColumns = ref<any>(exceptionColumns);
+  const searchSchema = ref<any>(searchFormSchema);
+  const searchInfo = { logType: '4' };
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls } = useListPage({
+    designScope: 'user-list',
+    tableProps: {
+      title: '日志列表',
+      api: getLogList,
+      expandRowByClick: true,
+      showActionColumn: false,
+      rowSelection: {
+        columnWidth: 20,
+      },
+      formConfig: {
+        schemas: searchSchema,
+        fieldMapToTime: [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']],
+      },
+    },
+    exportConfig: {
+      name:"操作日志",
+      url: getExportUrl,
+      params: searchInfo,
+      timeout: 300000, // 设置超时时间为5分钟(300秒)
+    },
+  });
+
+  const [registerTable, { reload }] = tableContext;
+
+  // 日志类型
+  function tabChange(key) {
+    searchInfo.logType = key;
+    // 代码逻辑说明: [VUEN-943]vue3日志管理列表翻译不对------------
+    if (key == '2') {
+      logColumns.value = operationLogColumn;
+      searchSchema.value = operationSearchFormSchema;
+    }else if(key == '4'){
+      searchSchema.value = searchFormSchema;
+      logColumns.value = exceptionColumns;
+    } else {
+      searchSchema.value = searchFormSchema;
+      logColumns.value = columns;
+    }
+    reload();
+  }
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+</script>
+<style lang="less" scoped>
+  .error-section {
+    .error-label {
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: #ff4d4f;
+    }
+  }
+
+  .error-box {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 400px;
+    overflow-y: auto;
+    color: #595959;
+  }
+
+  .table-title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .export-btn {
+    margin-left: auto;
+  }
+
+  :deep(.jeecg-basic-table-header__toolbar) {
+    width: 100px !important;
+  }
+</style>
diff --git a/src/views/monitor/log/log.api.ts b/src/views/monitor/log/log.api.ts
new file mode 100644
index 0000000..c11bd67
--- /dev/null
+++ b/src/views/monitor/log/log.api.ts
@@ -0,0 +1,21 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/log/list',
+  exportXls = '/sys/log/exportXls',
+}
+
+/**
+ * 查询日志列表
+ * @param params
+ */
+export const getLogList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
diff --git a/src/views/monitor/log/log.data.ts b/src/views/monitor/log/log.data.ts
new file mode 100644
index 0000000..e497377
--- /dev/null
+++ b/src/views/monitor/log/log.data.ts
@@ -0,0 +1,140 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '日志内容',
+    dataIndex: 'logContent',
+    width: 200,
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: '操作人ID',
+    dataIndex: 'userid',
+    width: 80,
+  },
+  {
+    title: '操作人',
+    dataIndex: 'username',
+    width: 80,
+  },
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 60,
+  },
+  {
+    title: '耗时(毫秒)',
+    dataIndex: 'costTime',
+    width: 50,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    sorter: true,
+    width: 80,
+  },
+  {
+    title: '客户端类型',
+    dataIndex: 'clientType_dictText',
+    width: 50,
+  },
+];
+
+/**
+ * 操作日志需要操作类型
+ */
+export const operationLogColumn: BasicColumn[] = [
+  ...columns,
+  {
+    title: '操作类型',
+    dataIndex: 'operateType_dictText',
+    width: 40,
+  },
+];
+
+export const exceptionColumns: BasicColumn[] = [
+  {
+    title: '异常标题',
+    dataIndex: 'logContent',
+    width: 200,
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: '请求地址',
+    dataIndex: 'requestUrl',
+    width: 140,
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: '请求方法',
+    dataIndex: 'method',
+    width: 120,
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: '操作人',
+    dataIndex: 'username',
+    width: 80,
+    customRender: ({ record }) => {
+      const pname = record.username;
+      const pid = record.userid;
+      if (!pname && !pid) {
+        return '';
+      }
+      return pname + ' (' + pid + ')';
+    },
+  },
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    width: 60,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    sorter: true,
+    width: 80,
+  },
+  {
+    title: '客户端类型',
+    dataIndex: 'clientType_dictText',
+    width: 50,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyWord',
+    label: '搜索日志',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'fieldTime',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      valueType: 'Date',
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+];
+
+export const operationSearchFormSchema: FormSchema[] = [
+  ...searchFormSchema,
+  {
+    field: 'operateType',
+    label: '操作类型',
+    component: 'JDictSelectTag',
+    colProps: { span: 4 },
+    componentProps: {
+      dictCode: 'operate_type',
+    },
+  },
+];
diff --git a/src/views/monitor/mynews/DetailModal.vue b/src/views/monitor/mynews/DetailModal.vue
new file mode 100644
index 0000000..fe90853
--- /dev/null
+++ b/src/views/monitor/mynews/DetailModal.vue
@@ -0,0 +1,410 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="查看详情"
+    :width="800"
+    :minHeight="600"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :height="88"
+    :destroyOnClose="true"
+    @visible-change="handleVisibleChange"
+  >
+   <template #title>
+     <span class="basic-title">查看详情</span>
+     <div class="print-btn" @click="onPrinter">
+       <Icon icon="ant-design:printer-filled" />
+       <span class="print-text">打印</span>
+     </div>
+   </template>
+    <a-card class="daily-article">
+      <a-card-meta :title="content.titile">
+        <template #description>
+          <div class="article-desc">
+            <span>发布人：{{ content.sender }}</span>
+            <span>发布时间：{{ content.sendTime }}</span>
+            <span v-if="content.visitsNum">
+              <a-tooltip placement="top" title="访问次数" :autoAdjustOverflow="true">
+                <eye-outlined class="item-icon" /> {{ content.visitsNum }}
+              </a-tooltip>
+            </span>
+          </div>
+        </template>
+      </a-card-meta>
+      <a-divider />
+      <div v-html="removeSpecialTags(content.msgContent)" class="article-content"></div>
+      <div>
+        <a-button v-if="hasHref" @click="jumpToHandlePage">前往办理<ArrowRightOutlined /></a-button>
+      </div>
+    </a-card>
+    <template v-if="noticeFiles && noticeFiles.length > 0">
+      <div class="files-title">相关附件：</div>
+      <template v-for="(file, index) in noticeFiles" :key="index">
+        <div class="files-area">
+          <div class="files-area-text">
+            <span>
+              <paper-clip-outlined />
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                :title="file.fileName"
+                :href="getFileAccessHttpUrl(file.filePath)"
+                class="ant-upload-list-item-name"
+                >{{ file.fileName }}</a
+              >
+            </span>
+          </div>
+          <div class="files-area-operate">
+            <download-outlined class="item-icon" @click="handleDownloadFile(file.filePath)" />
+            <eye-outlined class="item-icon" @click="handleViewFile(file.filePath)" />
+          </div>
+        </div>
+      </template>
+      <a v-if="noticeFiles.length > 1" :href="downLoadFiles + '?id=' + content.id + '&token=' + getToken()" target="_blank" style="margin: 15px 6px; color: #5ac0fa">
+        <download-outlined class="item-icon" style="margin-right: 5px" /><span>批量下载所有附件</span>
+      </a>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ArrowRightOutlined, PaperClipOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons-vue';
+  import { addVisitsNum } from '@/views/system/notice/notice.api';
+  import { useRouter } from 'vue-router';
+  import xss from 'xss';
+  import { options } from './XssWhiteList';
+  import { ref, unref } from 'vue';
+  import { getElectronFileUrl, getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { encryptByBase64 } from '@/utils/cipher';
+  import { getToken } from '@/utils/auth';
+  import {defHttp} from "@/utils/http/axios";
+  import {$electron} from "@/electron";
+  import { removeSpecialTags } from '@/utils/index';
+  const router = useRouter();
+  const glob = useGlobSetting();
+  const isUpdate = ref(true);
+  const content = ref<any>({});
+  const noticeFiles = ref([]);
+  /**
+   * 下载文件路径
+   */
+  const downLoadFiles = `${glob.domainUrl}/sys/annountCement/downLoadFiles`;
+  const emit = defineEmits(['close', 'register']);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    isUpdate.value = !!data?.isUpdate;
+    noticeFiles.value = [];
+    if (unref(isUpdate)) {
+      //data.record.msgContent = '<p>2323</p><input onmouseover=alert(1)>xss test';
+      // 代码逻辑说明: VUEN-1702 【禁止问题】sql注入漏洞
+      if (data.record.msgContent) {
+        // 代码逻辑说明: 【QQYUN-7049】3.6.0版本 通知公告中发布的富文本消息，在我的消息中查看没有样式---
+        data.record.msgContent = xss(data.record.msgContent, options);
+      }
+
+      // 代码逻辑说明: [QQYUN-12521]通知公告消息增加访问量
+      if (!data.record?.busId) {
+        await addVisitsNum({ id: data.record.id });
+      }
+
+      content.value = data.record;
+      if(content.value.sender){
+        const userInfo = await defHttp.get({ url: '/sys/user/queryUserComponentData?isMultiTranslate=true', params: { username: content.value.sender } });
+        content.value.sender = userInfo && userInfo?.records && userInfo?.records.length>0
+            ?userInfo.records.find((item) => item.username === content.value.sender)?.realname : content.value.sender;
+      }
+      console.log('data---------->>>', data);
+      if (data.record?.files && data.record?.files.length > 0) {
+        noticeFiles.value = data.record.files.split(',').map((item) => {
+          return {
+            fileName: item.split('/').pop(),
+            filePath: item,
+          };
+        });
+      }
+      showHrefButton();
+    }
+  });
+
+  const hasHref = ref(false);
+  //查看消息详情可以跳转
+  function showHrefButton() {
+    if (content.value.busId) {
+      hasHref.value = true;
+    }
+  }
+  //跳转至办理页面
+  function jumpToHandlePage() {
+    let temp: any = content.value;
+    if (temp.busId) {
+      //这个busId是 任务ID
+      let jsonStr = temp.msgAbstract;
+      let query = {};
+      try {
+        if (jsonStr) {
+          let temp = JSON.parse(jsonStr);
+          if (temp) {
+            Object.keys(temp).map((k) => {
+              query[k] = temp[k];
+            });
+          }
+        }
+      } catch (e) {
+        console.log('参数解析异常', e);
+      }
+
+      console.log('query', query, jsonStr);
+      console.log('busId', temp.busId);
+
+      if (Object.keys(query).length > 0) {
+        // taskId taskDefKey procInsId
+        router.push({ path: '/task/handle/' + temp.busId, query: query });
+      } else {
+        router.push({ path: '/task/handle/' + temp.busId });
+      }
+    }
+    closeModal();
+  }
+  //打印
+  function onPrinter() {
+    // 获取要打印的内容
+    const printContent = document.querySelector('.daily-article');
+
+    if (!printContent) return;
+
+    // 创建一个iframe来处理打印
+    const printFrame = document.createElement('iframe');
+    printFrame.style.position = 'absolute';
+    printFrame.style.width = '0';
+    printFrame.style.height = '0';
+    printFrame.style.border = 'none';
+    printFrame.style.left = '-9999px';
+
+    printFrame.onload = function () {
+      const frameDoc = printFrame.contentDocument || printFrame.contentWindow?.document;
+      if (!frameDoc) return;
+
+      // 复制内容到iframe
+      const clone = printContent.cloneNode(true);
+      frameDoc.body.appendChild(clone);
+
+      // 添加打印样式
+      const style = frameDoc.createElement('style');
+      style.innerHTML = `
+        body {
+          margin: 0;
+          padding: 15px;
+          font-family: Arial, sans-serif;
+        }
+        img {
+          max-width: 100%;
+          height: auto;
+        }
+        @page {
+          size: auto;
+          margin: 15mm;
+        }
+        @media print {
+          body {
+            padding: 0;
+          }
+        }
+        .ant-card-meta-detail {
+            display: flex !important ;
+            justify-content: center !important;
+            align-items: center !important;
+            flex-direction: column !important;
+        }
+        .ant-card-meta-title {
+            font-size: 22px !important;
+            color: rgba(51, 51, 51, 0.88);
+            font-weight: 600;
+            font-size: 16px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .ant-card .ant-card-meta-description {
+            color: rgba(51, 51, 51, 0.45);
+        }
+      `;
+      frameDoc.head.appendChild(style);
+
+      // 确保图片加载完成
+      const images = frameDoc.getElementsByTagName('img');
+      let imagesToLoad = images.length;
+
+      const printWhenReady = () => {
+        if (imagesToLoad === 0) {
+          setTimeout(() => {
+            printFrame.contentWindow?.focus();
+            printFrame.contentWindow?.print();
+            document.body.removeChild(printFrame);
+          }, 300);
+        }
+      };
+
+      if (imagesToLoad === 0) {
+        printWhenReady();
+      } else {
+        Array.from(images).forEach((img) => {
+          img.onload = () => {
+            imagesToLoad--;
+            printWhenReady();
+          };
+          // 处理可能已经缓存的图片
+          if (img.complete && img.naturalWidth !== 0) {
+            imagesToLoad--;
+            printWhenReady();
+          }
+        });
+      }
+    };
+
+    document.body.appendChild(printFrame);
+  }
+
+  /**
+   * 下载文件
+   * @param filePath
+   */
+  function handleDownloadFile(filePath) {
+    window.open(getFileAccessHttpUrl(filePath), '_blank');
+  }
+  /**
+   * 预览文件
+   * @param filePath
+   */
+  function handleViewFile(filePath) {
+    if (filePath) {
+      console.log('glob.onlineUrl', glob.viewUrl);
+      //update-begin-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，filePath需要先拼接完整URL再编码
+      let url = encodeURIComponent(encryptByBase64(getFileAccessHttpUrl(filePath)));
+      //update-end-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，filePath需要先拼接完整URL再编码
+      let previewUrl = `${glob.viewUrl}?url=` + url;
+      //update-begin-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改 
+      if($electron.isElectron()){
+        previewUrl = getElectronFileUrl(filePath);
+      }
+      //update-end-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改
+      window.open(previewUrl, '_blank');
+    }
+  }
+
+  function handleVisibleChange(visible: boolean) {
+    if (!visible) {
+      emit('close');
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .daily-article {
+    :deep(.ant-card-meta-detail) {
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
+      flex-direction: column !important;
+    }
+    :deep(.ant-card-meta-detail .ant-card-meta-title) {
+      font-size: 22px !important;
+    }
+  }
+
+  .print-btn {
+    position: absolute;
+    right: 100px;
+    top: 20px;
+    cursor: pointer;
+    color: #a3a3a5;
+    z-index: 999;
+    .print-text {
+      margin-left: 5px;
+      font-size: 14px;
+    }
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+  .detail-iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+  }
+  .files-title {
+    font-size: 16px;
+    margin: 10px;
+    font-weight: 600;
+    color: #333;
+  }
+  .files-area {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 6px;
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    .files-area-text {
+      display: flex;
+      .ant-upload-list-item-name {
+        margin: 0 6px;
+        color: #56befa;
+      }
+    }
+    .files-area-operate {
+      display: flex;
+      margin-left: 10px;
+      .item-icon {
+        cursor: pointer;
+        margin: 0 6px;
+        &:hover {
+          color: #56befa;
+        }
+      }
+    }
+  }
+
+  .article-desc {
+    display: flex;
+    align-items: center;
+    span:not(:first-child) {
+      margin-left: 5px;
+    }
+  }
+  /* 确保打印内容中的图片有最大宽度限制 */
+  .article-content img {
+    max-width: 100%;
+    height: auto;
+  }
+  /* 修复 Word 复制内容中表格边框丢失和间隔问题 */
+  .article-content {
+    :deep(table) {
+      border-collapse: collapse !important;
+      border-spacing: 0 !important;
+    }
+    :deep(table td),
+    :deep(table th) {
+      border: 1px solid #d0d0d0;
+      padding: 4px 8px;
+      min-width: 20px;
+      word-break: break-word;
+    }
+  }
+  .basic-title{
+    position: relative;
+    display: flex;
+    padding-left: 7px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: rgba(0,0,0,0.88);
+    cursor: move;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+</style>
diff --git a/src/views/monitor/mynews/DynamicNotice.vue b/src/views/monitor/mynews/DynamicNotice.vue
new file mode 100644
index 0000000..83a0c10
--- /dev/null
+++ b/src/views/monitor/mynews/DynamicNotice.vue
@@ -0,0 +1,35 @@
+<template>
+  <component :is="currentModal" :formData="formData" v-model:visible="modalVisible"></component>
+</template>
+<script setup lang="ts" name="dynamic-notice">
+  import { ref, shallowRef, ComponentOptions, nextTick, defineAsyncComponent } from 'vue';
+  const props = defineProps({
+    path: { type: String, default: '' },
+    formData: { type: Object, default: {} },
+  });
+  const modalVisible = ref<Boolean>(false);
+  const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
+  const formData = ref<any>(props.formData);
+
+  const componentType = {
+  };
+
+  /**
+   * 跟换组件和传值事件
+   */
+  function detail() {
+    setTimeout(() => {
+      if (props.path) {
+        nextTick(() => {
+          currentModal.value = componentType[props.path];
+          formData.value = props.formData;
+          modalVisible.value = true;
+        });
+      }
+    }, 200);
+  }
+
+  defineExpose({
+    detail,
+  });
+</script>
diff --git a/src/views/monitor/mynews/XssWhiteList.ts b/src/views/monitor/mynews/XssWhiteList.ts
new file mode 100644
index 0000000..b4b687a
--- /dev/null
+++ b/src/views/monitor/mynews/XssWhiteList.ts
@@ -0,0 +1,41 @@
+//xss攻击白名单列表
+export const options = {
+  whiteList: {
+    h1: ['style'],
+    h2: ['style'],
+    h3: ['style'],
+    h4: ['style'],
+    h5: ['style'],
+    h6: ['style'],
+    hr: ['style'],
+    span: ['style'],
+    strong: ['style'],
+    b: ['style'],
+    i: ['style'],
+    br: [],
+    p: ['style'],
+    pre: ['style'],
+    code: ['style'],
+    a: ['style', 'target', 'href', 'title', 'rel'],
+    img: ['style', 'src', 'title','width','height'],
+    div: ['style'],
+    table: ['style', 'width', 'border', 'height', 'cellspacing', 'cellpadding'],
+    tr: ['style', 'valign', 'align'],
+    td: ['style', 'width', 'colspan', 'rowspan', 'border', 'valign', 'align'],
+    th: ['style', 'width', 'colspan', 'rowspan', 'border', 'valign', 'align'],
+    tbody: ['style'],
+    ul: ['style'],
+    li: ['style'],
+    ol: ['style'],
+    dl: ['style'],
+    dt: ['style'],
+    em: ['style'],
+    cite: ['style'],
+    section: ['style'],
+    header: ['style'],
+    footer: ['style'],
+    blockquote: ['style'],
+    audio: ['autoplay', 'controls', 'loop', 'preload', 'src'],
+    video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width'],
+  },
+};
diff --git a/src/views/monitor/mynews/index.vue b/src/views/monitor/mynews/index.vue
new file mode 100644
index 0000000..5a15c29
--- /dev/null
+++ b/src/views/monitor/mynews/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" @click="handlerReadAllMsg">全部标注已读</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <DetailModal @register="register" />
+    <keep-alive>
+      <component v-if="currentModal" v-bind="bindParams" :key="currentModal" :is="currentModal" @register="modalRegCache[currentModal].register" />
+    </keep-alive>
+  </div>
+</template>
+<script lang="ts" name="monitor-mynews" setup>
+import {ref, onMounted, unref} from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import DetailModal from './DetailModal.vue';
+  import { getMyNewsList, editCementSend, syncNotic, readAllMsg, getOne, deleteAnnSend, deleteBatchAnnSend } from './mynews.api';
+  import { columns, searchFormSchema } from './mynews.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getToken } from '/@/utils/auth';
+  import { useModal } from '/@/components/Modal';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const glob = useGlobSetting();
+  const { createMessage } = useMessage();
+  const checkedKeys = ref<Array<string | number>>([]);
+  const content = ref({});
+  const searchInfo = { logType: '1' };
+  const [register, { openModal: openDetail }] = useModal();
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getLogList } from '/@/views/monitor/log/log.api';
+  import { useRouter } from 'vue-router';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useMessageHref } from '/@/views/system/message/components/useSysMessage';
+  const appStore = useAppStore();
+  const router = useRouter();
+  const { currentRoute } = useRouter();
+  const { goPage, currentModal, modalRegCache, bindParams } = useMessageHref();
+  // 代码逻辑说明: 【QQYUN-13058】我的消息区分类型且支持根据url参数查询类型
+  const querystring = currentRoute.value.query;
+  const findItem: any = searchFormSchema.find((item: any) => item.field === 'msgCategory');
+  if (findItem) {
+    if (querystring?.msgCategory) {
+      findItem.componentProps.defaultValue = querystring.msgCategory
+    } else if (querystring.noticeType) {
+      findItem.componentProps.defaultValue = querystring.noticeType;
+    } else {
+      findItem.componentProps.defaultValue = null
+    }
+  }
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'mynews-list',
+    tableProps: {
+      title: '我的消息',
+      api: getMyNewsList,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+        // 代码逻辑说明: 【TV360X-545】我的消息列表不能通过时间范围查询---
+        fieldMapToTime: [['sendTime', ['sendTimeBegin', 'sendTimeEnd'], 'YYYY-MM-DD']],
+      },
+      beforeFetch: (params) => {
+        // 代码逻辑说明: 【QQYUN-13058】我的消息区分类型且支持根据url参数查询类型
+        if (params.msgCategory) {
+          if (['1', '2'].includes(params.msgCategory)) {
+            params.msgCategory = params.msgCategory;
+          } else {
+            params.noticeType = params.msgCategory;
+            delete params.msgCategory;
+          }
+        } else {
+          if (querystring?.msgCategory) {
+            params.msgCategory = querystring.msgCategory;
+          } else if (querystring.noticeType) {
+            params.noticeType = querystring.noticeType;
+          }
+        }
+        return params;
+      },
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '查看',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record.id),
+        },
+        ifShow: record.readFlag === 1
+      }
+    ];
+  }
+
+  /**
+   * 查看
+   */
+  function handleDetail(record) {
+    let anntId = record.anntId;
+    editCementSend({ anntId: anntId }).then((res) => {
+      reload();
+      syncNotic({ anntId: anntId });
+    });
+    const openModalFun = ()=>{
+      openDetail(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+    goPage(record, openModalFun);
+
+  }
+  // 日志类型
+  function callback(key) {
+    searchInfo.logType = key;
+    reload();
+  }
+
+  //全部标记已读
+  function handlerReadAllMsg() {
+    readAllMsg({}, reload);
+  }
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  // 代码逻辑说明: 消息跳转，打开详情表单
+  onMounted(()=>{
+    initHrefModal();
+  });
+  function initHrefModal(){
+    let params = appStore.getMessageHrefParams;
+    if(params){
+      let anntId = params.id;
+      if(anntId){
+        editCementSend({ anntId: anntId }).then(() => {
+          reload();
+          syncNotic({ anntId: anntId });
+        });
+      }
+      let detailId = params.detailId;
+      if(detailId){
+        getOne(detailId).then(data=>{
+          console.log('getOne', data)
+          openDetail(true, {
+            record: data,
+            isUpdate: true,
+          });
+          appStore.setMessageHrefParams('')
+        })
+      }
+    }
+  }
+
+  function handleSuccess() {
+    selectedRowKeys.value = [];
+    reload();
+  }
+  
+  /**
+   * 删除我的消息
+   * 
+   * @param id
+   */
+  async function handleDelete(id) {
+    await deleteAnnSend({ id: id }, handleSuccess);
+  }
+
+  /**
+   * 批量删除我的消息
+   */
+  async function batchHandleDelete() {
+    let unRead = unref(selectedRows).filter((item) => item.readFlag == 0);
+    if (unref(unRead).length > 0) {
+      createMessage.warning('未阅读的消息禁止删除！');
+      return;
+    }
+    await deleteBatchAnnSend({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+</script>
diff --git a/src/views/monitor/mynews/mynews.api.ts b/src/views/monitor/mynews/mynews.api.ts
new file mode 100644
index 0000000..57e6ec2
--- /dev/null
+++ b/src/views/monitor/mynews/mynews.api.ts
@@ -0,0 +1,94 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/sysAnnouncementSend/getMyAnnouncementSend',
+  editCementSend = '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
+  readAllMsg = '/sys/sysAnnouncementSend/readAll',
+  syncNotic = '/sys/annountCement/syncNotic',
+  getOne = '/sys/sysAnnouncementSend/getOne',
+  delete = '/sys/sysAnnouncementSend/delete',
+  deleteBatch = '/sys/sysAnnouncementSend/deleteBatch',
+}
+
+/**
+ * 查询消息列表
+ * @param params
+ */
+export const getMyNewsList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 更新用户系统消息阅读状态
+ * @param params
+ */
+export const editCementSend = (params) => {
+  return defHttp.put({ url: Api.editCementSend, params });
+};
+
+/**
+ * 一键已读
+ * @param params
+ */
+export const readAllMsg = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认操作',
+    content: '是否全部标注已读?',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.put({ url: Api.readAllMsg, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 同步消息
+ * @param params
+ */
+export const syncNotic = (params) => {
+  return defHttp.get({ url: Api.syncNotic, params });
+};
+
+/**
+ * 根据消息发送记录ID获取消息内容
+ * @param sendId
+ */
+export const getOne = (sendId) => {
+  return defHttp.get({ url: Api.getOne, params:{sendId} });
+};
+
+/**
+ * 删除用户通告阅读标记的数据
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteAnnSend = (params, handleSuccess) =>{
+  return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(()=>{
+    handleSuccess();
+  })
+}
+
+/**
+ * 批量删除用户通告阅读标记的数据
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteBatchAnnSend = (params, handleSuccess) =>{
+  Modal.confirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, params }, { joinParamsToUrl: true }).then(()=>{
+        handleSuccess();
+      })
+    },
+  });
+}
+
diff --git a/src/views/monitor/mynews/mynews.data.ts b/src/views/monitor/mynews/mynews.data.ts
new file mode 100644
index 0000000..3af216b
--- /dev/null
+++ b/src/views/monitor/mynews/mynews.data.ts
@@ -0,0 +1,102 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '标题',
+    dataIndex: 'titile',
+    width: 100,
+    align: 'left',
+  },
+  {
+    title: '消息类型',
+    dataIndex: 'msgCategory',
+    width: 80,
+    customRender: ({ text }) => {
+      return render.renderDictNative(
+        text,
+        [
+          { label: '通知公告', value: '1', color: 'blue' },
+          { label: '系统消息', value: '2' },
+        ],
+        true
+      );
+    },
+  },
+  {
+    title: '发布人',
+    dataIndex: 'sender',
+    width: 80,
+  },
+  {
+    title: '发布时间',
+    dataIndex: 'sendTime',
+    width: 80,
+  },
+  {
+    title: '优先级',
+    dataIndex: 'priority',
+    width: 80,
+    customRender: ({ text }) => {
+      const color = text == 'L' ? 'blue' : text == 'M' ? 'yellow' : 'red';
+      return render.renderTag(render.renderDict(text, 'priority'), color);
+    },
+  },
+  {
+    title: '阅读状态',
+    dataIndex: 'readFlag',
+    width: 80,
+    customRender: ({ text }) => {
+      return render.renderDictNative(
+        text,
+        [
+          { label: '未读', value: '0', color: 'red' },
+          { label: '已读', value: '1' },
+        ],
+        true
+      );
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'titile',
+    label: '标题',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'sender',
+    label: '发布人',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'sendTime',
+    label: '发布时间',
+    component: 'RangeDate',
+    componentProps: {
+      valueType: 'Date',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'msgCategory',
+    label: '消息类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '通知公告', value: '1' },
+        { label: '系统消息', value: '2' },
+        { label: '日程计划', value: 'plan' },
+        { label: '流程消息', value: 'flow' },
+        { label: '会议', value: 'meeting' },
+        { label: '知识库', value: 'file' },
+        { label: '协同通知', value: 'collab' },
+        { label: '督办通知', value: 'supe' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
diff --git a/src/views/monitor/quartz/QuartzModal.vue b/src/views/monitor/quartz/QuartzModal.vue
new file mode 100644
index 0000000..ab6c6ff
--- /dev/null
+++ b/src/views/monitor/quartz/QuartzModal.vue
@@ -0,0 +1,61 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './quartz.data';
+  import { saveOrUpdateQuartz, getQuartzById } from './quartz.api';
+  import { isJsonObjectString } from '/@/utils/is';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    // labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    // 代码逻辑说明: 【issues/790】弹窗内文本框不居中问题
+    labelWidth: 100,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //获取详情
+      //data.record = await getQuartzById({id: data.record.id});
+      try {
+        data.record.paramterType = isJsonObjectString(data?.record?.parameter) ? 'json' : 'string';
+      } catch (e) {
+        console.log(e);
+      }
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增任务' : '编辑任务'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateQuartz(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/monitor/quartz/index.vue b/src/views/monitor/quartz/index.vue
new file mode 100644
index 0000000..512dae4
--- /dev/null
+++ b/src/views/monitor/quartz/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <QuartzModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="monitor-quartz" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getQuartzList, deleteQuartz, batchDeleteQuartz, executeImmediately, resumeJob, pauseJob, getExportUrl, getImportUrl } from './quartz.api';
+  import { columns, searchFormSchema } from './quartz.data';
+  import QuartzModal from './QuartzModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    designScope: 'quartz-template',
+    tableProps: {
+      title: '任务列表',
+      api: getQuartzList,
+      columns: columns,
+      actionColumn: {
+        width: 180,
+      },
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+        fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
+      },
+    },
+    exportConfig: {
+      name: '定时任务列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '启动',
+        popConfirm: {
+          title: '是否启动选中任务?',
+          confirm: handlerResume.bind(null, record),
+        },
+        ifShow: (_action) => {
+          return record.status == -1;
+        },
+      },
+      {
+        label: '停止',
+        popConfirm: {
+          title: '是否暂停选中任务?',
+          confirm: handlerPause.bind(null, record),
+        },
+        ifShow: (_action) => {
+          return record.status == 0;
+        },
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '立即执行',
+        popConfirm: {
+          title: '是否立即执行任务?',
+          confirm: handlerExecute.bind(null, record),
+        },
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteQuartz({ id: record.id }, reload);
+  }
+
+  /**
+   * 立即执行
+   */
+  async function handlerExecute(record) {
+    await executeImmediately({ id: record.id }, reload);
+  }
+
+  /**
+   * 暂停
+   */
+  async function handlerPause(record) {
+    await pauseJob({ id: record.id }, reload);
+  }
+
+  /**
+   * 启动
+   */
+  async function handlerResume(record) {
+    await resumeJob({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteQuartz({ ids: selectedRowKeys.value }, () => {
+      // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+      reload();
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+    });
+  }
+</script>
diff --git a/src/views/monitor/quartz/quartz.api.ts b/src/views/monitor/quartz/quartz.api.ts
new file mode 100644
index 0000000..1b89b27
--- /dev/null
+++ b/src/views/monitor/quartz/quartz.api.ts
@@ -0,0 +1,107 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/quartzJob/list',
+  save = '/sys/quartzJob/add',
+  edit = '/sys/quartzJob/edit',
+  get = '/sys/quartzJob/queryById',
+  pause = '/sys/quartzJob/pause',
+  resume = '/sys/quartzJob/resume',
+  delete = '/sys/quartzJob/delete',
+  exportXlsUrl = '/sys/quartzJob/exportXls',
+  importExcelUrl = '/sys/quartzJob/importExcel',
+  execute = '/sys/quartzJob/execute',
+  deleteBatch = '/sys/quartzJob/deleteBatch',
+}
+
+/**
+ * 导出api
+ */
+export const getExportUrl = Api.exportXlsUrl;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcelUrl;
+/**
+ * 查询任务列表
+ * @param params
+ */
+export const getQuartzList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新任务
+ * @param params
+ */
+export const saveOrUpdateQuartz = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 查询任务详情
+ * @param params
+ */
+export const getQuartzById = (params) => {
+  return defHttp.get({ url: Api.get, params });
+};
+
+/**
+ * 删除任务
+ * @param params
+ */
+export const deleteQuartz = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 启动
+ * @param params
+ */
+export const resumeJob = (params, handleSuccess) => {
+  return defHttp.get({ url: Api.resume, params }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 暂停
+ * @param params
+ */
+export const pauseJob = (params, handleSuccess) => {
+  return defHttp.get({ url: Api.pause, params }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 立即执行
+ * @param params
+ */
+export const executeImmediately = (params, handleSuccess) => {
+  return defHttp.get({ url: Api.execute, params }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除任务
+ * @param params
+ */
+export const batchDeleteQuartz = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
diff --git a/src/views/monitor/quartz/quartz.data.ts b/src/views/monitor/quartz/quartz.data.ts
new file mode 100644
index 0000000..b54ae7f
--- /dev/null
+++ b/src/views/monitor/quartz/quartz.data.ts
@@ -0,0 +1,124 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+import JCronValidator from '/@/components/Form/src/jeecg/components/JEasyCron/validator';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '任务类名',
+    dataIndex: 'jobClassName',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: 'Cron表达式',
+    dataIndex: 'cronExpression',
+    width: 200,
+  },
+  {
+    title: '参数',
+    dataIndex: 'parameter',
+    width: 200,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender: ({ text }) => {
+      const color = text == '0' ? 'green' : text == '-1' ? 'red' : 'gray';
+      return render.renderTag(render.renderDict(text, 'quartz_status'), color);
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'jobClassName',
+    label: '任务类名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'status',
+    label: '任务状态',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'quartz_status',
+      stringToNumber: true,
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'jobClassName',
+    label: '任务类名',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'cronExpression',
+    label: 'Cron表达式',
+    component: 'JEasyCron',
+    defaultValue: '* * * * * ? *',
+    rules: [{ required: true, message: '请输入Cron表达式' }, { validator: JCronValidator }],
+  },
+  {
+    field: 'paramterType',
+    label: '参数类型',
+    component: 'Select',
+    defaultValue: 'string',
+    componentProps: {
+      options: [
+        { label: '字符串', value: 'string' },
+        { label: 'JSON对象', value: 'json' },
+      ],
+    },
+  },
+  {
+    field: 'parameter',
+    label: '参数',
+    component: 'InputTextArea',
+    ifShow: ({ values }) => {
+      return values.paramterType == 'string';
+    },
+  },
+  {
+    field: 'parameter',
+    label: '参数',
+    component: 'JAddInput',
+    helpMessage: '键值对形式填写',
+    ifShow: ({ values }) => {
+      return values.paramterType == 'json';
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'quartz_status',
+      type: 'radioButton',
+      stringToNumber: true,
+      dropdownStyle: {
+        maxHeight: '6vh',
+      },
+    },
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+  },
+];
diff --git a/src/views/monitor/redis/index.vue b/src/views/monitor/redis/index.vue
new file mode 100644
index 0000000..5740826
--- /dev/null
+++ b/src/views/monitor/redis/index.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="redis-monitor p-4">
+    <!-- 顶部概览卡片 -->
+    <a-row :gutter="16" class="overview-row">
+      <a-col :sm="12" :md="6" v-for="item in overviewCards" :key="item.label">
+        <div class="overview-card" :style="{ borderTopColor: item.color }">
+          <div class="overview-card__value" :style="{ color: item.color }">{{ item.value }}</div>
+          <div class="overview-card__label">{{ item.label }}</div>
+        </div>
+      </a-col>
+    </a-row>
+
+    <!-- Redis 信息实时监控 -->
+    <a-row :gutter="16" class="chart-row">
+      <a-col :sm="24" :xl="12">
+        <a-card :bordered="false" class="chart-card">
+          <div ref="chartRef" style="width: 100%; height: 300px"></div>
+        </a-card>
+      </a-col>
+      <a-col :sm="24" :xl="12">
+        <a-card :bordered="false" class="chart-card">
+          <div ref="chartRef2" style="width: 100%; height: 300px"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- Redis 详细信息表格 -->
+    <a-card :bordered="false" class="table-card" title="Redis 配置详情">
+      <BasicTable @register="registerTable" :api="getInfo" :canResize="false"></BasicTable>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" name="monitor-redis" setup>
+  import { onMounted, ref, reactive, Ref, onUnmounted, computed } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getInfo, getRedisInfo, getMetricsHistory } from './redis.api';
+  import dayjs from 'dayjs';
+  import { columns } from './redis.data';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const chartRef2 = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const { setOptions: setOptions2 } = useECharts(chartRef2 as Ref<HTMLDivElement>);
+  let timer: any = null;
+
+  // 概览数据
+  const currentMemory = ref('--');
+  const currentKeys = ref('--');
+  const currentUptime = ref('--');
+  const currentPort = ref('--');
+
+  const overviewCards = computed(() => [
+    { label: '已用内存', value: currentMemory.value, color: '#1890ff' },
+    { label: 'Key 数量', value: currentKeys.value, color: '#52c41a' },
+    { label: '运行时间', value: currentUptime.value, color: '#faad14' },
+    { label: '监听端口', value: currentPort.value, color: '#722ed1' },
+  ]);
+
+  const memoryOption = reactive({
+    title: {
+      text: 'Redis 内存实时占用（KB）',
+      textStyle: { fontSize: 14, fontWeight: 500, color: '#333' },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      borderColor: '#e8e8e8',
+      borderWidth: 1,
+      textStyle: { color: '#333', fontSize: 12 },
+      formatter(params) {
+        const p = params[0];
+        return `<div style="font-weight:500;margin-bottom:4px">${p.axisValue}</div>
+                <span style="color:#1890ff">● 内存</span>：${p.value} KB`;
+      },
+    },
+    grid: { top: 50, right: 20, bottom: 30, left: 60 },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [],
+      axisLine: { lineStyle: { color: '#d9d9d9' } },
+      axisTick: { show: false },
+      axisLabel: { color: '#8c8c8c', fontSize: 11 },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: '#8c8c8c', fontSize: 11 },
+    },
+    series: [
+      {
+        data: [],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        showSymbol: false,
+        lineStyle: { color: '#1890ff', width: 2 },
+        itemStyle: { color: '#1890ff' },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(24,144,255,0.25)' },
+              { offset: 1, color: 'rgba(24,144,255,0.02)' },
+            ],
+          },
+        },
+      },
+    ],
+  });
+
+  const keyOption = reactive({
+    title: {
+      text: 'Redis Key 实时数量（个）',
+      textStyle: { fontSize: 14, fontWeight: 500, color: '#333' },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      borderColor: '#e8e8e8',
+      borderWidth: 1,
+      textStyle: { color: '#333', fontSize: 12 },
+      formatter(params) {
+        const p = params[0];
+        return `<div style="font-weight:500;margin-bottom:4px">${p.axisValue}</div>
+                <span style="color:#52c41a">● Key 数量</span>：${p.value}`;
+      },
+    },
+    grid: { top: 50, right: 20, bottom: 30, left: 60 },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [],
+      axisLine: { lineStyle: { color: '#d9d9d9' } },
+      axisTick: { show: false },
+      axisLabel: { color: '#8c8c8c', fontSize: 11 },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { color: '#8c8c8c', fontSize: 11 },
+    },
+    series: [
+      {
+        data: [],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        showSymbol: false,
+        lineStyle: { color: '#52c41a', width: 2 },
+        itemStyle: { color: '#52c41a' },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(82,196,26,0.25)' },
+              { offset: 1, color: 'rgba(82,196,26,0.02)' },
+            ],
+          },
+        },
+      },
+    ],
+  });
+
+  const [registerTable] = useTable({
+    columns,
+    showIndexColumn: false,
+    pagination: false,
+    bordered: true,
+    canResize: false,
+    showTableSetting: false,
+  });
+
+  function initCharts() {
+    setOptions(memoryOption);
+    setOptions2(keyOption);
+  }
+
+  /** 开启定时器 */
+  function openTimer() {
+    loadHistoryData();
+    closeTimer();
+    timer = setInterval(() => {
+      loadData();
+    }, 15000);
+  }
+
+  /** 关闭定时器 */
+  function closeTimer() {
+    if (timer) clearInterval(timer);
+  }
+
+  /** 加载历史监控数据 */
+  function loadHistoryData() {
+    getMetricsHistory().then((res) => {
+      const dbSizes = res.dbSize;
+      const memories = res.memory;
+      dbSizes.forEach((dbSize) => {
+        keyOption.xAxis.data.push(dayjs(dbSize.create_time).format('HH:mm:ss'));
+        keyOption.series[0].data.push(dbSize.dbSize);
+      });
+      memories.forEach((memoryData) => {
+        memoryOption.xAxis.data.push(dayjs(memoryData.create_time).format('HH:mm:ss'));
+        memoryOption.series[0].data.push(memoryData.used_memory / 1000);
+      });
+      // 更新概览卡片
+      if (memories.length > 0) {
+        const lastMem = memories[memories.length - 1].used_memory / 1000;
+        currentMemory.value = lastMem.toFixed(0) + ' KB';
+      }
+      if (dbSizes.length > 0) {
+        currentKeys.value = dbSizes[dbSizes.length - 1].dbSize + '';
+      }
+      setOptions(memoryOption, false);
+      setOptions2(keyOption, false);
+    });
+    // 加载详细信息获取端口和运行时间
+    getInfo().then((res) => {
+      const list = res.result || res;
+      if (Array.isArray(list)) {
+        list.forEach((item) => {
+          if (item.key === 'tcp_port') currentPort.value = item.value;
+          if (item.key === 'uptime_in_days') currentUptime.value = item.value + ' 天';
+        });
+      }
+    });
+  }
+
+  function loadData() {
+    getRedisInfo()
+      .then((res) => {
+        const time = dayjs().format('HH:mm:ss');
+        const [{ dbSize: curSize }, memInfo] = res;
+        const curMem = memInfo.used_memory / 1000;
+
+        keyOption.xAxis.data.push(time);
+        keyOption.series[0].data.push(curSize);
+        memoryOption.xAxis.data.push(time);
+        memoryOption.series[0].data.push(curMem);
+
+        // 更新概览
+        currentMemory.value = curMem.toFixed(0) + ' KB';
+        currentKeys.value = curSize + '';
+
+        // 最大长度为80
+        if (keyOption.series[0].data.length > 80) {
+          keyOption.xAxis.data.splice(0, 1);
+          keyOption.series[0].data.splice(0, 1);
+          memoryOption.xAxis.data.splice(0, 1);
+          memoryOption.series[0].data.splice(0, 1);
+        }
+        setOptions(memoryOption, false);
+        setOptions2(keyOption, false);
+      })
+      .catch(() => {});
+  }
+
+  onMounted(() => {
+    initCharts();
+    openTimer();
+  });
+
+  onUnmounted(() => {
+    closeTimer();
+  });
+</script>
+<style lang="less" scoped>
+  .redis-monitor {
+    .overview-row {
+      margin-bottom: 16px;
+    }
+
+    .overview-card {
+      background: #fff;
+      border-radius: 6px;
+      padding: 20px 24px;
+      border-top: 3px solid #1890ff;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+      transition: box-shadow 0.3s;
+
+      &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      &__value {
+        font-size: 28px;
+        font-weight: 600;
+        line-height: 1.2;
+        margin-bottom: 4px;
+      }
+
+      &__label {
+        font-size: 13px;
+        color: #8c8c8c;
+      }
+    }
+
+    .chart-row {
+      margin-bottom: 16px;
+    }
+
+    .chart-card {
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+
+      :deep(.ant-card-body) {
+        padding: 16px;
+      }
+    }
+
+    .table-card {
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+    }
+  }
+</style>
diff --git a/src/views/monitor/redis/redis.api.ts b/src/views/monitor/redis/redis.api.ts
new file mode 100644
index 0000000..5b959cb
--- /dev/null
+++ b/src/views/monitor/redis/redis.api.ts
@@ -0,0 +1,40 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  keysSize = '/sys/actuator/redis/keysSize',
+  memoryInfo = '/sys/actuator/redis/memoryInfo',
+  info = '/sys/actuator/redis/info',
+  metricsHistory = '/sys/actuator/redis/metrics/history',
+}
+
+/**
+ * key个数
+ */
+export const getKeysSize = () => {
+  return defHttp.get({ url: Api.keysSize }, { isTransformResponse: false });
+};
+
+/**
+ * 内存信息
+ */
+export const getMemoryInfo = () => {
+  return defHttp.get({ url: Api.memoryInfo }, { isTransformResponse: false });
+};
+
+/**
+ * 详细信息
+ */
+export const getInfo = () => {
+  return defHttp.get({ url: Api.info });
+};
+
+/**
+ * 历史监控记录
+ */
+export const getMetricsHistory = () => {
+  return defHttp.get({ url: Api.metricsHistory });
+};
+
+export const getRedisInfo = () => {
+  return Promise.all([getKeysSize(), getMemoryInfo()]);
+};
diff --git a/src/views/monitor/redis/redis.data.ts b/src/views/monitor/redis/redis.data.ts
new file mode 100644
index 0000000..6966c4c
--- /dev/null
+++ b/src/views/monitor/redis/redis.data.ts
@@ -0,0 +1,26 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '配置项',
+    dataIndex: 'key',
+    width: 120,
+    align: 'left',
+    customRender: ({ text }) => {
+      return text;
+    },
+  },
+  {
+    title: '说明',
+    dataIndex: 'description',
+    width: 200,
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    width: 80,
+    align: 'right',
+  },
+];
diff --git a/src/views/monitor/route/RouteModal.vue b/src/views/monitor/route/RouteModal.vue
new file mode 100644
index 0000000..9250fab
--- /dev/null
+++ b/src/views/monitor/route/RouteModal.vue
@@ -0,0 +1,422 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="30%" @ok="handleSubmit" destroyOnClose showFooter>
+    <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" :model="router" :rules="validatorRules">
+      <a-form-item label="路由ID" name="routerId">
+        <a-input v-model:value="router.routerId" placeholder="路由唯一ID" />
+      </a-form-item>
+      <a-form-item label="路由名称" name="name">
+        <a-input v-model:value="router.name" placeholder="路由名称" />
+      </a-form-item>
+      <a-form-item label="路由URI" name="uri">
+        <a-input v-model:value="router.uri" placeholder="路由URL" />
+      </a-form-item>
+      <a-form-item label="路由状态" name="status">
+        <a-switch default-checked :checked-value="1" :un-checked-value="0" v-model:checked="router.status" />
+      </a-form-item>
+
+      <a-form-item name="predicates" label="路由条件">
+        <div v-for="(item, index) in router.predicates">
+          <!--当name在noKeyRouter时不需要指定key-->
+          <template v-if="noKeyRouter.includes(item.name)">
+            <a-divider
+              >{{ item.name }}
+              <DeleteOutlined size="22" @click="removePredicate(router, index)" />
+            </a-divider>
+            <div>
+              <template v-for="(tag, tagIndx) in item.args">
+                <a-input
+                  ref="inputRef2"
+                  v-if="tagIndx == currentTagIndex && index == currentNameIndex"
+                  type="text"
+                  size="small"
+                  :style="{ width: '190px' }"
+                  v-model:value="state.inputValue"
+                  @change="handleInputChange"
+                  @blur="handleInputEditConfirm(item, tag, tagIndx)"
+                  @keyup.enter="handleInputEditConfirm(item, tag, tagIndx)"
+                />
+                <a-tag
+                  v-else
+                  :key="tag"
+                  style="margin-bottom: 2px"
+                  :closable="true"
+                  @close="() => removeTag(item, tag)"
+                  @click="editTag(item, tag, tagIndx, index)"
+                >
+                  {{ tag }}
+                </a-tag>
+              </template>
+              <a-input
+                ref="inputRef"
+                v-if="state.inputVisible && index == currentNameIndex"
+                type="text"
+                size="small"
+                :style="{ width: '100px' }"
+                v-model:value="state.inputValue"
+                @change="handleInputChange"
+                @blur="handleInputConfirm(item)"
+                @keyup.enter="handleInputConfirm(item)"
+              />
+              <a-tag v-else style="background: #fff; borderstyle: dashed; margin-bottom: 2px" @click="showInput(item, index)">
+                <PlusOutlined size="22" />
+                新建{{ item.name }}
+              </a-tag>
+            </div>
+          </template>
+          <!--当name不在noKeyRouter时需要指定key-->
+          <template v-if="!noKeyRouter.includes(item.name)">
+            <a-divider
+              >{{ item.name }}
+              <DeleteOutlined size="22" @click="removePredicate(router, index)" />
+            </a-divider>
+            <div>
+              <template v-for="(value, key) in item.args">
+                <a-row>
+                  <a-col :span="5" style="margin-top: 8px">
+                    <span v-if="key == 'header'">Header名称</span>
+                    <span v-if="key == 'regexp'">参数值</span>
+                    <span v-if="key == 'param'">参数名</span>
+                    <span v-if="key == 'name'">参数名</span>
+                  </a-col>
+                  <a-col :span="18">
+                    <a-input
+                      :defaultValue="value"
+                      placeholder="参数值"
+                      style="width: 70%; margin-right: 8px; margin-top: 3px"
+                      @change="(e) => valueChange(e, item.args, key)"
+                    />
+                  </a-col>
+                </a-row>
+              </template>
+            </div>
+          </template>
+        </div>
+        <p class="btn" style="padding-top: 10px">
+          <a-dropdown trigger="click">
+            <template #overlay>
+              <a-menu>
+                <a-menu-item :key="item.name" v-for="item in tagArray" @click="predicatesHandleMenuClick(item)">{{ item.name }}</a-menu-item>
+              </a-menu>
+            </template>
+            <a-button type="dashed" style="margin-left: 8px; width: 100%">
+              添加路由条件
+              <DownOutlined :size="22" />
+            </a-button>
+          </a-dropdown>
+        </p>
+      </a-form-item>
+      <a-form-item name="predicates" label="过滤器">
+        <div v-for="(item, index) in router.filters">
+          <a-divider
+            >{{ item.name }}
+            <DeleteOutlined size="22" @click="removeFilter(router, index)" />
+          </a-divider>
+          <div v-for="(tag, index) in item.args" :key="tag.key">
+            <a-form-item-rest>
+              <a-input v-model:value="tag.key" placeholder="参数键" style="width: 45%; margin-right: 8px" />
+              <a-input v-model:value="tag.value" placeholder="参数值" style="width: 40%; margin-right: 8px; margin-top: 3px" />
+            </a-form-item-rest>
+            <CloseOutlined :size="22" @click="removeFilterParams(item, index)" />
+          </div>
+          <a-button type="dashed" style="margin-left: 28%; width: 37%; margin-top: 5px" size="small" @click="addFilterParams(item)">
+            <DownOutlined :size="22" />
+            添加参数
+          </a-button>
+        </div>
+        <p class="btn" style="padding-top: 10px">
+          <a-dropdown trigger="click">
+            <template #overlay>
+              <a-menu @click="filterHandleMenuClick">
+                <a-menu-item :key="item.key" :name="item.name" v-for="item in filterArray">{{ item.name }}</a-menu-item>
+              </a-menu>
+            </template>
+            <a-button type="dashed" style="margin-left: 8px; width: 100%">
+              添加过滤器
+              <DownOutlined />
+            </a-button>
+          </a-dropdown>
+        </p>
+      </a-form-item>
+    </a-form>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, useAttrs, reactive, nextTick } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { saveOrUpdateRoute } from './route.api';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { CloseOutlined } from '@ant-design/icons-vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const labelCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 5 },
+  });
+  const wrapperCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 16 },
+  });
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const inputRef = ref();
+  const inputRef2 = ref();
+  let state = reactive({
+    inputVisible: false,
+    inputValue: '',
+  });
+  const currentNameIndex = ref(0);
+  const currentTagIndex = ref(-1);
+  const validatorRules = {
+    routerId: [{ required: true, message: 'routerId不能为空', trigger: 'blur' }],
+    name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
+    uri: [{ required: true, message: 'uri不能为空', trigger: 'blur' }],
+  };
+  const noKeyRouter = ['Path', 'Host', 'Method', 'After', 'Before', 'Between', 'RemoteAddr'];
+  const filterArray = [/*{ key: 0, name: '熔断器' },*/ { key: 1, name: '限流过滤器' }];
+  const tagArray = ref([
+    {
+      name: 'Path',
+      args: [],
+    },
+    {
+      name: 'Header',
+      args: {
+        header: '',
+        regexp: '',
+      },
+    },
+    {
+      name: 'Query',
+      args: {
+        param: '',
+        regexp: '',
+      },
+    },
+    {
+      name: 'Method',
+      args: [],
+    },
+    {
+      name: 'Host',
+      args: [],
+    },
+    {
+      name: 'Cookie',
+      args: {
+        name: '',
+        regexp: '',
+      },
+    },
+    {
+      name: 'After',
+      args: [],
+    },
+    {
+      name: 'Before',
+      args: [],
+    },
+    {
+      name: 'Between',
+      args: [],
+    },
+    {
+      name: 'RemoteAddr',
+      args: [],
+    },
+  ]);
+  const formRef = ref();
+  let router = reactive({});
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    isUpdate.value = !!data?.isUpdate;
+    setDrawerProps({ confirmLoading: false });
+    initRouter();
+    if (unref(isUpdate)) {
+      router = Object.assign(router, data.record);
+    }
+  });
+  /**
+   * 标题
+   */
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增路由' : '编辑路由'));
+
+  //删除路由条件配置项
+  function removeTag(item, removedTag) {
+    let tags = item.args.filter((tag) => tag !== removedTag);
+    item.args = tags;
+  }
+
+  //初始化参数
+  function initRouter() {
+    router = Object.assign(router, {
+      id: '',
+      routerId: '',
+      name: '',
+      uri: '',
+      status: 1,
+      predicates: [],
+      filters: [],
+    });
+  }
+
+  //添加路由选项
+  function predicatesHandleMenuClick(e) {
+    router.predicates.push({
+      args: e.args,
+      name: e.name,
+    });
+  }
+
+  /**
+   * 值修改事件
+   * @param e
+   * @param item
+   * @param key
+   */
+  function valueChange(e, item, key) {
+    item[key] = e.target.value;
+  }
+
+  function editTag(item, tag, tagIndex, index) {
+    currentNameIndex.value = index;
+    currentTagIndex.value = tagIndex;
+    state.inputValue = tag;
+    nextTick(() => {
+      inputRef2.value[0].focus();
+    });
+  }
+
+  //显示输入框
+  function showInput(item, index) {
+    state.inputValue = '';
+    state.inputVisible = true;
+    currentNameIndex.value = index;
+    nextTick(() => {
+      inputRef.value[0].focus();
+    });
+  }
+
+  //路由选项输入框改变事件
+  function handleInputChange(e) {
+    console.info('change', e);
+    console.info('change', e.target.value);
+    //state.value = e.target.value;
+    //state.tag=true;
+  }
+
+  //删除路由条件
+  function removePredicate(item, index) {
+    item.predicates.splice(index, 1);
+  }
+
+  //删除过滤器参数
+  function removeFilterParams(item, index) {
+    item.args.splice(index, 1);
+  }
+
+  //删除过滤器
+  function removeFilter(item, index) {
+    item.filters.splice(index, 1);
+  }
+
+  //添加过滤器参数
+  function addFilterParams(item) {
+    item.args.push({
+      key: 'key' + item.args.length + 1,
+      value: '',
+    });
+  }
+
+  //过滤器添加事件
+  function filterHandleMenuClick(e) {
+    if (e.key == 0) {
+      router.filters.push({
+        args: [
+          {
+            key: 'name',
+            value: 'default',
+          },
+          {
+            key: 'fallbackUri',
+            value: 'forward:/fallback',
+          },
+        ],
+        name: 'Hystrix',
+        title: filterArray[0].name,
+      });
+    }
+    console.info('test', router);
+    if (e.key == 1) {
+      router.filters.push({
+        args: [
+          {
+            key: 'key-resolver',
+            value: '#{@ipKeyResolver}',
+          },
+          {
+            key: 'redis-rate-limiter.replenishRate',
+            value: 20,
+          },
+          {
+            key: 'redis-rate-limiter.burstCapacity',
+            value: 20,
+          },
+        ],
+        name: 'RequestRateLimiter',
+        title: filterArray[0].name,
+      });
+    }
+  }
+
+  //输入框确认
+  function handleInputConfirm(item) {
+    let tags = item.args;
+    const inputValue = state.inputValue;
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      item.args = [...tags, state.inputValue];
+    }
+    state.inputVisible = false;
+    state.inputValue = '';
+    currentTagIndex.value = -1;
+    currentNameIndex.value = -1;
+  }
+
+  //输入框确认
+  function handleInputEditConfirm(item, tag, index) {
+    const inputValue = state.inputValue;
+    if (inputValue) {
+      item.args[index] = state.inputValue;
+    }
+    currentTagIndex.value = -1;
+    currentNameIndex.value = -1;
+  }
+
+  //关闭弹窗
+  function handleCancel() {}
+
+  /**
+   * 提交
+   */
+  async function handleSubmit() {
+    await formRef.value.validate().then(() => {
+      try {
+        setDrawerProps({ confirmLoading: true });
+        //重新构造表单提交对象,切记不可修改router对象，数组修改为字符串容易造成界面混乱
+        let params = Object.assign({}, router, {
+          predicates: JSON.stringify(router.predicates),
+          filters: JSON.stringify(router.filters),
+        });
+        //提交表单
+        saveOrUpdateRoute({ router: params }).then(() => {
+          closeDrawer();
+          //刷新列表
+          emit('success');
+        });
+      } finally {
+        setDrawerProps({ confirmLoading: false });
+      }
+    });
+  }
+</script>
diff --git a/src/views/monitor/route/components/RouteRecycleBinModal.vue b/src/views/monitor/route/components/RouteRecycleBinModal.vue
new file mode 100644
index 0000000..3d14218
--- /dev/null
+++ b/src/views/monitor/route/components/RouteRecycleBinModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="路由回收站" :showOkBtn="false" width="1000px" destroyOnClose>
+    <BasicTable @register="registerTable">
+      <template #status="{ record, text }">
+        <a-tag color="pink" v-if="text == 0">禁用</a-tag>
+        <a-tag color="#87d068" v-if="text == 1">正常</a-tag>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns } from '../route.data';
+  import { deleteRouteList, putRecycleBin, deleteRecycleBin } from '../route.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal] = useModalInner(() => {
+    checkedKeys.value = [];
+  });
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    rowKey: 'id',
+    api: deleteRouteList,
+    columns: columns,
+    striped: true,
+    useSearchForm: false,
+    bordered: true,
+    showIndexColumn: false,
+    pagination: false,
+    tableSetting: { fullScreen: true },
+    canResize: false,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  /**
+   * 还原事件
+   */
+  async function handleRevert(record) {
+    await putRecycleBin({ ids: record.id }, reload);
+    emit('success');
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRecycleBin({ ids: record.id }, reload);
+  }
+
+  //获取操作栏事件
+  function getTableAction(record) {
+    return [
+      {
+        label: '取回',
+        icon: 'ant-design:redo-outlined',
+        popConfirm: {
+          title: '是否确认取回',
+          confirm: handleRevert.bind(null, record),
+        },
+      },
+      {
+        label: '彻底删除',
+        icon: 'ant-design:scissor-outlined',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/monitor/route/index.vue b/src/views/monitor/route/index.vue
new file mode 100644
index 0000000..2945cbc
--- /dev/null
+++ b/src/views/monitor/route/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" :indexColumnProps="indexColumnProps">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
+        <a-button type="primary" @click="openRecycleModal(true)" preIcon="ant-design:hdd-outlined"> 回收站</a-button>
+      </template>
+      <template #status="{ record, text }">
+        <a-tag color="pink" v-if="text == 0">禁用</a-tag>
+        <a-tag color="#87d068" v-if="text == 1">正常</a-tag>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <RouteModal @register="registerDrawer" @success="reload" />
+    <!--回收站弹窗-->
+    <RouteRecycleBinModal @register="registerRecycleModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="monitor-route" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { getRouteList, deleteRoute, copyRoute } from './route.api';
+  import { columns } from './route.data';
+  import RouteModal from './RouteModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import RouteRecycleBinModal from './components/RouteRecycleBinModal.vue';
+  const { createMessage } = useMessage();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const checkedKeys = ref<Array<string | number>>([]);
+
+  //回收站model
+  const [registerRecycleModal, { openModal: openRecycleModal }] = useModal();
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'router-template',
+    tableProps: {
+      title: '路由列表',
+      api: getRouteList,
+      useSearchForm: false,
+      columns: columns,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+  /**
+   * 序号列配置
+   */
+  const indexColumnProps = {
+    dataIndex: 'index',
+    width: '15px',
+  };
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '复制',
+        popConfirm: {
+          title: '是否确认复制',
+          confirm: handleCopy.bind(null, record),
+        },
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 复制
+   */
+  async function handleCopy(record) {
+    await copyRoute({ id: record.id }, reload);
+    createMessage.success('复制成功');
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRoute({ id: record.id }, reload);
+  }
+</script>
diff --git a/src/views/monitor/route/route.api.ts b/src/views/monitor/route/route.api.ts
new file mode 100644
index 0000000..3224cb3
--- /dev/null
+++ b/src/views/monitor/route/route.api.ts
@@ -0,0 +1,73 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/gatewayRoute/list',
+  deleteList = '/sys/gatewayRoute/deleteList',
+  save = '/sys/gatewayRoute/add',
+  edit = '/sys/gatewayRoute/updateAll',
+  delete = '/sys/gatewayRoute/delete',
+
+  copyRoute = '/sys/gatewayRoute/copyRoute',
+  batchPutRecycleBin = '/sys/gatewayRoute/putRecycleBin',
+  batchDeleteRecycleBin = '/sys/gatewayRoute/deleteRecycleBin',
+}
+
+/**
+ * 查询路由列表
+ * @param params
+ */
+export const getRouteList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+/**
+ * 查询逻辑删除的路由列表
+ * @param params
+ */
+export const deleteRouteList = (params) => {
+  return defHttp.get({ url: Api.deleteList, params });
+};
+
+/**
+ * 保存或者更新路由
+ * @param params
+ */
+export const saveOrUpdateRoute = (params) => {
+  return defHttp.post({ url: Api.edit, params });
+};
+
+/**
+ * 删除路由
+ * @param params
+ */
+export const deleteRoute = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 回收站还原
+ * @param params
+ */
+export const putRecycleBin = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.batchPutRecycleBin, params }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 回收站删除
+ * @param params
+ */
+export const deleteRecycleBin = (params, handleSuccess) => {
+  return defHttp.delete({ url: `${Api.batchDeleteRecycleBin}?ids=${params.ids}` }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 复制
+ */
+export const copyRoute = (params, handleSuccess) => {
+  return defHttp.get({ url: Api.copyRoute, params }).then(() => {
+    handleSuccess();
+  });
+};
diff --git a/src/views/monitor/route/route.data.ts b/src/views/monitor/route/route.data.ts
new file mode 100644
index 0000000..26ce7fe
--- /dev/null
+++ b/src/views/monitor/route/route.data.ts
@@ -0,0 +1,52 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '路由ID',
+    dataIndex: 'routerId',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '路由名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '路由URI',
+    dataIndex: 'uri',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    slots: { customRender: 'status' },
+    width: 150,
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '路由ID',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'name',
+    label: '路由名称',
+    component: 'InputNumber',
+    required: true,
+  },
+  {
+    field: 'uri',
+    label: '路由URI',
+    component: 'Input',
+  },
+  {
+    field: 'predicates',
+    label: '路由条件',
+    slot: 'predicates',
+    component: 'Input',
+  },
+];
diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue
new file mode 100644
index 0000000..ee5aada
--- /dev/null
+++ b/src/views/monitor/server/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
+        <a-tab-pane key="1" tab="服务器信息"></a-tab-pane>
+        <a-tab-pane key="2" tab="JVM信息" force-render></a-tab-pane>
+         <a-tab-pane key="3" tab="Tomcat信息"></a-tab-pane> 
+<!--        <a-tab-pane key="6" tab="Undertow信息"></a-tab-pane>-->
+        <a-tab-pane key="4" tab="磁盘监控">
+          <DiskInfo v-if="activeKey == 4" style="height: 100%"></DiskInfo>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="内存信息" />
+      </a-tabs>
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" :dataSource="dataSource" v-show="activeKey != 4">
+        <template #tableTitle>
+          <div slot="message"
+            >上次更新时间：{{ lastUpdateTime }}
+            <a-divider type="vertical" />
+            <a @click="handleUpdate">立即更新</a></div
+          >
+        </template>
+        <template #param="{ record, text }">
+          <a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
+        </template>
+        <template #text="{ record }">
+          {{ textInfo[record.param].text }}
+        </template>
+        <template #value="{ record, text }"> {{ text }} {{ textInfo[record.param].unit }} </template>
+      </BasicTable>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" name="monitor-server" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import DiskInfo from '../disk/DiskInfo.vue';
+  import { getServerInfo, getTextInfo, getMoreInfo } from './server.api';
+  import { columns } from './server.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import dayjs from 'dayjs';
+
+  const dataSource = ref([]);
+  const activeKey = ref('1');
+  const moreInfo = ref({});
+  const lastUpdateTime = ref({});
+  let textInfo = ref({});
+  const { createMessage } = useMessage();
+  const checkedKeys = ref<Array<string | number>>([]);
+
+  const searchInfo = { logType: '1' };
+  const [registerTable, { reload }] = useTable({
+    columns,
+    showIndexColumn: false,
+    bordered: true,
+    pagination: false,
+    canResize: false,
+    tableSetting: { fullScreen: true },
+    rowKey: 'id',
+  });
+
+  //tab切换
+  function tabChange(key) {
+    if (key != 4) {
+      getInfoList(key);
+    }
+  }
+
+  //加载信息
+  function getInfoList(infoType) {
+    lastUpdateTime.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
+    getServerInfo(infoType).then((res) => {
+      textInfo.value = getTextInfo(infoType);
+      moreInfo.value = getMoreInfo(infoType);
+      let info = [];
+      if (infoType === '5') {
+        for (let param in res[0].result) {
+          let data = res[0].result[param];
+          let val = convert(data, unref(textInfo)[param].valueType);
+          info.push({ id: param, param, text: 'false value', value: val });
+        }
+      } else {
+        res.forEach((value, id) => {
+          let more = unref(moreInfo)[value.name];
+          if (!(more instanceof Array)) {
+            more = [''];
+          }
+          more.forEach((item, idx) => {
+            let param = value.name + item;
+            let val = convert(value.measurements[idx].value, unref(textInfo)[param].valueType);
+            info.push({ id: param + id, param, text: 'false value', value: val });
+          });
+        });
+      }
+      dataSource.value = info;
+    });
+  }
+
+  function handleUpdate() {
+    getInfoList(activeKey.value);
+  }
+
+  //单位转换
+  function convert(value, type) {
+    if (type === 'Number') {
+      return Number(value * 100).toFixed(2);
+    } else if (type === 'Date') {
+      return dayjs(value * 1000).format('YYYY-MM-DD HH:mm:ss');
+    } else if (type === 'RAM') {
+      return Number(value / 1048576).toFixed(3);
+    }
+    return value;
+  }
+
+  onMounted(() => {
+    getInfoList(activeKey.value);
+  });
+</script>
diff --git a/src/views/monitor/server/server.api.ts b/src/views/monitor/server/server.api.ts
new file mode 100644
index 0000000..8184191
--- /dev/null
+++ b/src/views/monitor/server/server.api.ts
@@ -0,0 +1,392 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  cpuCount = '/actuator/metrics/system.cpu.count',
+  cpuUsage = '/actuator/metrics/system.cpu.usage',
+  processStartTime = '/actuator/metrics/process.start.time',
+  processUptime = '/actuator/metrics/process.uptime',
+  processCpuUsage = '/actuator/metrics/process.cpu.usage',
+
+  jvmMemoryMax = '/actuator/metrics/jvm.memory.max',
+  jvmMemoryCommitted = '/actuator/metrics/jvm.memory.committed',
+  jvmMemoryUsed = '/actuator/metrics/jvm.memory.used',
+  jvmBufferMemoryUsed = '/actuator/metrics/jvm.buffer.memory.used',
+  jvmBufferCount = '/actuator/metrics/jvm.buffer.count',
+  jvmThreadsDaemon = '/actuator/metrics/jvm.threads.daemon',
+  jvmThreadsLive = '/actuator/metrics/jvm.threads.live',
+  jvmThreadsPeak = '/actuator/metrics/jvm.threads.peak',
+  jvmClassesLoaded = '/actuator/metrics/jvm.classes.loaded',
+  jvmClassesUnloaded = '/actuator/metrics/jvm.classes.unloaded',
+  jvmGcMemoryAllocated = '/actuator/metrics/jvm.gc.memory.allocated',
+  jvmGcMemoryPromoted = '/actuator/metrics/jvm.gc.memory.promoted',
+  jvmGcMaxDataSize = '/actuator/metrics/jvm.gc.max.data.size',
+  jvmGcLiveDataSize = '/actuator/metrics/jvm.gc.live.data.size',
+  jvmGcPause = '/actuator/metrics/jvm.gc.pause',
+
+  tomcatSessionsCreated = '/actuator/metrics/tomcat.sessions.created',
+  tomcatSessionsExpired = '/actuator/metrics/tomcat.sessions.expired',
+  tomcatSessionsActiveCurrent = '/actuator/metrics/tomcat.sessions.active.current',
+  tomcatSessionsActiveMax = '/actuator/metrics/tomcat.sessions.active.max',
+  tomcatSessionsRejected = '/actuator/metrics/tomcat.sessions.rejected',
+
+  memoryInfo = '/sys/actuator/memory/info',
+  // undertow 监控
+  undertowSessionsCreated = '/actuator/metrics/undertow.sessions.created',
+  undertowSessionsExpired = '/actuator/metrics/undertow.sessions.expired',
+  undertowSessionsActiveCurrent = '/actuator/metrics/undertow.sessions.active.current',
+  undertowSessionsActiveMax = '/actuator/metrics/undertow.sessions.active.max',
+}
+
+/**
+ * 查询cpu数量
+ */
+export const getCpuCount = () => {
+  return defHttp.get({ url: Api.cpuCount }, { isTransformResponse: false });
+};
+
+/**
+ * 查询系统 CPU 使用率
+ */
+export const getCpuUsage = () => {
+  return defHttp.get({ url: Api.cpuUsage }, { isTransformResponse: false });
+};
+
+/**
+ * 查询应用启动时间点
+ */
+export const getProcessStartTime = () => {
+  return defHttp.get({ url: Api.processStartTime }, { isTransformResponse: false });
+};
+
+/**
+ * 查询应用已运行时间
+ */
+export const getProcessUptime = () => {
+  return defHttp.get({ url: Api.processUptime }, { isTransformResponse: false });
+};
+
+/**
+ * 查询当前应用 CPU 使用率
+ */
+export const getProcessCpuUsage = () => {
+  return defHttp.get({ url: Api.processCpuUsage }, { isTransformResponse: false });
+};
+
+/**
+ * 查询JVM 最大内存
+ */
+export const getJvmMemoryMax = () => {
+  return defHttp.get({ url: Api.jvmMemoryMax }, { isTransformResponse: false });
+};
+
+/**
+ * JVM 可用内存
+ */
+export const getJvmMemoryCommitted = () => {
+  return defHttp.get({ url: Api.jvmMemoryCommitted }, { isTransformResponse: false });
+};
+
+/**
+ * JVM 已用内存
+ */
+export const getJvmMemoryUsed = () => {
+  return defHttp.get({ url: Api.jvmMemoryUsed }, { isTransformResponse: false });
+};
+
+/**
+ * JVM 缓冲区已用内存
+ */
+export const getJvmBufferMemoryUsed = () => {
+  return defHttp.get({ url: Api.jvmBufferMemoryUsed }, { isTransformResponse: false });
+};
+
+/**
+ *JVM 当前缓冲区数量
+ */
+export const getJvmBufferCount = () => {
+  return defHttp.get({ url: Api.jvmBufferCount }, { isTransformResponse: false });
+};
+
+/**
+ **JVM 守护线程数量
+ */
+export const getJvmThreadsDaemon = () => {
+  return defHttp.get({ url: Api.jvmThreadsDaemon }, { isTransformResponse: false });
+};
+
+/**
+ *JVM 当前活跃线程数量
+ */
+export const getJvmThreadsLive = () => {
+  return defHttp.get({ url: Api.jvmThreadsLive }, { isTransformResponse: false });
+};
+
+/**
+ *JVM 峰值线程数量
+ */
+export const getJvmThreadsPeak = () => {
+  return defHttp.get({ url: Api.jvmThreadsPeak }, { isTransformResponse: false });
+};
+
+/**
+ *JVM 已加载 Class 数量
+ */
+export const getJvmClassesLoaded = () => {
+  return defHttp.get({ url: Api.jvmClassesLoaded }, { isTransformResponse: false });
+};
+
+/**
+ *JVM 未加载 Class 数量
+ */
+export const getJvmClassesUnloaded = () => {
+  return defHttp.get({ url: Api.jvmClassesUnloaded }, { isTransformResponse: false });
+};
+
+/**
+ **GC 时, 年轻代分配的内存空间
+ */
+export const getJvmGcMemoryAllocated = () => {
+  return defHttp.get({ url: Api.jvmGcMemoryAllocated }, { isTransformResponse: false });
+};
+
+/**
+ *GC 时, 老年代分配的内存空间
+ */
+export const getJvmGcMemoryPromoted = () => {
+  return defHttp.get({ url: Api.jvmGcMemoryPromoted }, { isTransformResponse: false });
+};
+
+/**
+ *GC 时, 老年代的最大内存空间
+ */
+export const getJvmGcMaxDataSize = () => {
+  return defHttp.get({ url: Api.jvmGcMaxDataSize }, { isTransformResponse: false });
+};
+
+/**
+ *FullGC 时, 老年代的内存空间
+ */
+export const getJvmGcLiveDataSize = () => {
+  return defHttp.get({ url: Api.jvmGcLiveDataSize }, { isTransformResponse: false });
+};
+
+/**
+ *系统启动以来GC 次数
+ */
+export const getJvmGcPause = () => {
+  return defHttp.get({ url: Api.jvmGcPause }, { isTransformResponse: false });
+};
+
+/**
+ *tomcat 已创建 session 数
+ */
+export const getTomcatSessionsCreated = () => {
+  return defHttp.get({ url: Api.tomcatSessionsCreated }, { isTransformResponse: false });
+};
+
+/**
+ *tomcat 已过期 session 数
+ */
+export const getTomcatSessionsExpired = () => {
+  return defHttp.get({ url: Api.tomcatSessionsExpired }, { isTransformResponse: false });
+};
+
+/**
+ *tomcat 当前活跃 session 数
+ */
+export const getTomcatSessionsActiveCurrent = () => {
+  return defHttp.get({ url: Api.tomcatSessionsActiveCurrent }, { isTransformResponse: false });
+};
+
+/**
+ *tomcat 活跃 session 数峰值
+ */
+export const getTomcatSessionsActiveMax = () => {
+  return defHttp.get({ url: Api.tomcatSessionsActiveMax }, { isTransformResponse: false });
+};
+
+/**
+ *超过session 最大配置后，拒绝的 session 个数
+ */
+export const getTomcatSessionsRejected = () => {
+  return defHttp.get({ url: Api.tomcatSessionsRejected }, { isTransformResponse: false });
+};
+
+/**
+ *undertow 已创建 session 数
+ */
+export const getUndertowSessionsCreated = () => {
+  return defHttp.get({ url: Api.undertowSessionsCreated }, { isTransformResponse: false });
+};
+
+/**
+ *undertow 已过期 session 数
+ */
+export const getUndertowSessionsExpired = () => {
+  return defHttp.get({ url: Api.undertowSessionsExpired }, { isTransformResponse: false });
+};
+
+/**
+ *undertow 当前活跃 session 数
+ */
+export const getUndertowSessionsActiveCurrent = () => {
+  return defHttp.get({ url: Api.undertowSessionsActiveCurrent }, { isTransformResponse: false });
+};
+
+/**
+ *undertow 活跃 session 数峰值
+ */
+export const getUndertowSessionsActiveMax = () => {
+  return defHttp.get({ url: Api.undertowSessionsActiveMax }, { isTransformResponse: false });
+};
+
+/**
+ * 内存信息
+ */
+export const getMemoryInfo = () => {
+  return defHttp.get({ url: Api.memoryInfo }, { isTransformResponse: false });
+};
+
+export const getMoreInfo = (infoType) => {
+  if (infoType == '1') {
+    return {};
+  }
+  if (infoType == '2') {
+    return { 'jvm.gc.pause': ['.count', '.totalTime'] };
+  }
+  if (infoType == '3') {
+    return {
+      'tomcat.global.request': ['.count', '.totalTime'],
+      'tomcat.servlet.request': ['.count', '.totalTime'],
+    };
+  }
+  if (infoType == '5') {
+    return {};
+  }
+  if (infoType == '6') {
+    return {};
+  }
+};
+
+export const getTextInfo = (infoType) => {
+  if (infoType == '1') {
+    return {
+      'system.cpu.count': { color: 'green', text: 'CPU 数量', unit: '核' },
+      'system.cpu.usage': { color: 'green', text: '系统 CPU 使用率', unit: '%', valueType: 'Number' },
+      'process.start.time': { color: 'purple', text: '应用启动时间点', unit: '', valueType: 'Date' },
+      'process.uptime': { color: 'purple', text: '应用已运行时间', unit: '秒' },
+      'process.cpu.usage': { color: 'purple', text: '当前应用 CPU 使用率', unit: '%', valueType: 'Number' },
+    };
+  }
+  if (infoType == '2') {
+    return {
+      'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB', valueType: 'RAM' },
+      'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB', valueType: 'RAM' },
+      'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB', valueType: 'RAM' },
+      'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB', valueType: 'RAM' },
+      'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '个' },
+      'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '个' },
+      'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '个' },
+      'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '个' },
+      'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '个' },
+      'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '个' },
+      'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB', valueType: 'RAM' },
+      'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB', valueType: 'RAM' },
+      'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB', valueType: 'RAM' },
+      'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB', valueType: 'RAM' },
+      'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '次' },
+      'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '秒' },
+    };
+  }
+  if (infoType == '3') {
+    return {
+      'tomcat.sessions.created': { color: 'green', text: 'tomcat 已创建 session 数', unit: '个' },
+      'tomcat.sessions.expired': { color: 'green', text: 'tomcat 已过期 session 数', unit: '个' },
+      'tomcat.sessions.active.current': { color: 'green', text: 'tomcat 当前活跃 session 数', unit: '个' },
+      'tomcat.sessions.active.max': { color: 'green', text: 'tomcat 活跃 session 数峰值', unit: '个' },
+      'tomcat.sessions.rejected': { color: 'green', text: '超过session 最大配置后，拒绝的 session 个数', unit: '个' },
+      'tomcat.global.sent': { color: 'purple', text: '发送的字节数', unit: 'bytes' },
+      'tomcat.global.request.max': { color: 'purple', text: 'request 请求最长耗时', unit: '秒' },
+      'tomcat.global.request.count': { color: 'purple', text: '全局 request 请求次数', unit: '次' },
+      'tomcat.global.request.totalTime': { color: 'purple', text: '全局 request 请求总耗时', unit: '秒' },
+      'tomcat.servlet.request.max': { color: 'cyan', text: 'servlet 请求最长耗时', unit: '秒' },
+      'tomcat.servlet.request.count': { color: 'cyan', text: 'servlet 总请求次数', unit: '次' },
+      'tomcat.servlet.request.totalTime': { color: 'cyan', text: 'servlet 请求总耗时', unit: '秒' },
+      'tomcat.threads.current': { color: 'pink', text: 'tomcat 当前线程数（包括守护线程）', unit: '个' },
+      'tomcat.threads.config.max': { color: 'pink', text: 'tomcat 配置的线程最大数', unit: '个' },
+    };
+  }
+  if (infoType == '5') {
+    return {
+      'memory.physical.total': { color: 'green', text: '总物理内存', unit: 'MB', valueType: 'RAM' },
+      'memory.physical.used': { color: 'green', text: '已使用物理内存', unit: 'MB', valueType: 'RAM' },
+      'memory.physical.free': { color: 'green', text: '可用物理内存', unit: 'MB', valueType: 'RAM' },
+      'memory.physical.usage': { color: 'green', text: '物理内存使用率', unit: '%', valueType: 'Number' },
+      'memory.runtime.total': { color: 'purple', text: 'JVM总内存', unit: 'MB', valueType: 'RAM' },
+      'memory.runtime.used': { color: 'purple', text: 'JVM已使用内存', unit: 'MB', valueType: 'RAM' },
+      'memory.runtime.max': { color: 'purple', text: 'JVM最大内存', unit: 'MB', valueType: 'RAM' },
+      'memory.runtime.free': { color: 'purple', text: 'JVM可用内存', unit: 'MB', valueType: 'RAM' },
+      'memory.runtime.usage': { color: 'purple', text: 'JVM内存使用率', unit: '%', valueType: 'Number' },
+    };
+  }
+  if (infoType == '6') {
+    // undertow 监控
+    return {
+      'undertow.sessions.created': { color: 'green', text: 'undertow 已创建 session 数', unit: '个' },
+      'undertow.sessions.expired': { color: 'green', text: 'undertow 已过期 session 数', unit: '个' },
+      'undertow.sessions.active.current': { color: 'green', text: 'undertow 当前活跃 session 数', unit: '个' },
+      'undertow.sessions.active.max': { color: 'green', text: 'undertow 活跃 session 数峰值', unit: '个' },
+      'undertow.sessions.rejected': { color: 'green', text: '超过session 最大配置后，拒绝的 session 个数', unit: '个' },
+    };
+  }
+};
+
+/**
+ * 查询cpu数量
+ * @param params
+ */
+export const getServerInfo = (infoType) => {
+  if (infoType == '1') {
+    return Promise.all([getCpuCount(), getCpuUsage(), getProcessStartTime(), getProcessUptime(), getProcessCpuUsage()]);
+  }
+  if (infoType == '2') {
+    return Promise.all([
+      getJvmMemoryMax(),
+      getJvmMemoryCommitted(),
+      getJvmMemoryUsed(),
+      getJvmBufferCount(),
+      getJvmBufferMemoryUsed(),
+      getJvmThreadsDaemon(),
+      getJvmThreadsLive(),
+      getJvmThreadsPeak(),
+      getJvmClassesLoaded(),
+      getJvmClassesUnloaded(),
+      getJvmGcLiveDataSize(),
+      getJvmGcMaxDataSize(),
+      getJvmGcMemoryAllocated(),
+      getJvmGcMemoryPromoted(),
+      getJvmGcPause(),
+    ]);
+  }
+  if (infoType == '3') {
+    return Promise.all([
+      getTomcatSessionsActiveCurrent(),
+      getTomcatSessionsActiveMax(),
+      getTomcatSessionsCreated(),
+      getTomcatSessionsExpired(),
+      getTomcatSessionsRejected(),
+    ]);
+  }
+  if (infoType == '5') {
+    return Promise.all([getMemoryInfo()]);
+  }
+  // undertow监控
+  if (infoType == '6') {
+    return Promise.all([
+      getUndertowSessionsActiveCurrent(),
+      getUndertowSessionsActiveMax(),
+      getUndertowSessionsCreated(),
+      getUndertowSessionsExpired(),
+    ]);
+  }
+};
diff --git a/src/views/monitor/server/server.data.ts b/src/views/monitor/server/server.data.ts
new file mode 100644
index 0000000..8b9fa54
--- /dev/null
+++ b/src/views/monitor/server/server.data.ts
@@ -0,0 +1,23 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '参数',
+    dataIndex: 'param',
+    width: 80,
+    align: 'left',
+    slots: { customRender: 'param' },
+  },
+  {
+    title: '描述',
+    dataIndex: 'text',
+    slots: { customRender: 'text' },
+    width: 80,
+  },
+  {
+    title: '当前值',
+    dataIndex: 'value',
+    slots: { customRender: 'value' },
+    width: 80,
+  },
+];
diff --git a/src/views/monitor/trace/index.vue b/src/views/monitor/trace/index.vue
new file mode 100644
index 0000000..ce1e601
--- /dev/null
+++ b/src/views/monitor/trace/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" :dataSource="dataSource" @change="handlerTableChange">
+      <template #tableTitle>
+        <div slot="message">
+          共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
+          <a-divider type="vertical" />
+          <a @click="loadDate">立即刷新</a>
+        </div>
+      </template>
+      <template #toolbar>
+        <a-radio-group class="http-status-choose" size="small" v-model:value="query" @change="loadDate">
+          <a-radio-button value="all">全部</a-radio-button>
+          <a-radio-button value="success">成功</a-radio-button>
+          <a-radio-button value="error">错误</a-radio-button>
+        </a-radio-group>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts" name="monitor-trace" setup>
+  import { onMounted, ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { getActuatorList } from './trace.api';
+  import { columns } from './trace.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const dataSource = ref([]);
+  const { createMessage } = useMessage();
+  const query = ref('all');
+  const order = ref('');
+
+  const [registerTable, { reload }] = useTable({
+    columns,
+    showIndexColumn: false,
+    bordered: true,
+    rowKey: 'id',
+  });
+
+  function loadDate() {
+    getActuatorList(query.value,order.value).then((res) => {
+      let filterData = [];
+      for (let d of res.traces) {
+        if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
+          filterData.push(d);
+        }
+      }
+      dataSource.value = filterData;
+    });
+  }
+
+  const handlerTableChange = (args, arg1, sort, action) => {
+    if ('sort' == action.action && sort.field) {
+      order.value = sort.field;
+      if (sort.order) {
+        order.value += sort.order == 'ascend' ? '/asc' : '/desc';
+      } else {
+        order.value = '';
+      }
+    }
+    loadDate();
+  };
+
+  onMounted(() => {
+    loadDate();
+  });
+</script>
+<style scoped>
+  :deep(.jeecg-basic-table-header__toolbar) {
+    width: 150px;
+  }
+</style>
diff --git a/src/views/monitor/trace/trace.api.ts b/src/views/monitor/trace/trace.api.ts
new file mode 100644
index 0000000..cb69b52
--- /dev/null
+++ b/src/views/monitor/trace/trace.api.ts
@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  actuatorList = '/actuator/jeecghttptrace/',
+}
+
+/**
+ * 追踪信息
+ */
+export const getActuatorList = (query: String, order: String) => {
+  return defHttp.get({ url: Api.actuatorList + query + '/' + order }, { isTransformResponse: false });
+};
diff --git a/src/views/monitor/trace/trace.data.ts b/src/views/monitor/trace/trace.data.ts
new file mode 100644
index 0000000..ef195be
--- /dev/null
+++ b/src/views/monitor/trace/trace.data.ts
@@ -0,0 +1,85 @@
+import { BasicColumn } from '/@/components/Table';
+import dayjs from 'dayjs';
+import _get from 'lodash.get';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '请求时间',
+    dataIndex: 'timestamp',
+    width: 50,
+    customRender({ text }) {
+      return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '请求方法',
+    dataIndex: 'request.method',
+    width: 20,
+    customRender({ record, column }) {
+      let value = _get(record, column.dataIndex!);
+      let color = '';
+      if (value === 'GET') {
+        color = '#87d068';
+      }
+      if (value === 'POST') {
+        color = '#2db7f5';
+      }
+      if (value === 'PUT') {
+        color = '#ffba5a';
+      }
+      if (value === 'DELETE') {
+        color = '#ff5500';
+      }
+      return h(Tag, { color }, () => value);
+    },
+  },
+  {
+    title: '请求URL',
+    dataIndex: 'request.uri',
+    width: 200,
+    customRender({ record, column }) {
+      return _get(record, column.dataIndex!);
+    },
+  },
+  {
+    title: '响应状态',
+    dataIndex: 'response.status',
+    width: 50,
+    customRender({ record, column }) {
+      let value = _get(record, column.dataIndex!);
+      let color = '';
+      if (value < 200) {
+        color = 'pink';
+      } else if (value < 201) {
+        color = 'green';
+      } else if (value < 399) {
+        color = 'cyan';
+      } else if (value < 403) {
+        color = 'orange';
+      } else if (value < 501) {
+        color = 'red';
+      }
+      return h(Tag, { color }, () => value);
+    },
+  },
+  {
+    title: '请求耗时',
+    dataIndex: 'timeTaken',
+    width: 50,
+    customRender({ record, column }) {
+      let value = _get(record, column.dataIndex!);
+      let color = 'red';
+      if (value < 500) {
+        color = 'green';
+      } else if (value < 1000) {
+        color = 'cyan';
+      } else if (value < 1500) {
+        color = 'orange';
+      }
+      return h(Tag, { color }, () => `${value} ms`);
+    },
+    sorter: true,
+  },
+];
diff --git a/src/views/openapi/OpenApi.api.ts b/src/views/openapi/OpenApi.api.ts
new file mode 100644
index 0000000..32c5f36
--- /dev/null
+++ b/src/views/openapi/OpenApi.api.ts
@@ -0,0 +1,118 @@
+import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/openapi/list',
+  save='/openapi/add',
+  edit='/openapi/edit',
+  deleteOne = '/openapi/delete',
+  deleteBatch = '/openapi/deleteBatch',
+  genPath = '/openapi/genPath',
+  importExcel = '/openapi/importExcel',
+  exportXls = '/openapi/exportXls',
+  openApiHeaderList = '/openapi/list',
+  openApiParamList = '/openapi/list',
+  openApiJson = '/openapi/json',
+}
+
+/**
+ * 子表单查询接口
+ * @param params
+ */
+export const genPath = Api.genPath
+/**
+ * swagger文档json
+ * @param params
+ */
+export const openApiJson = Api.openApiJson
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 子表单查询接口
+ * @param params
+ */
+export const queryOpenApiHeader = Api.openApiHeaderList
+/**
+ * 子表单查询接口
+ * @param params
+ */
+export const queryOpenApiParam = Api.openApiParamList
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  if (isUpdate) {
+    return defHttp.put({url: Api.edit, params});
+  } else {
+    return defHttp.post({url: Api.save, params});
+  }
+}
+/**
+ * 获取接口地址
+ * @param params
+ */
+export const getGenPath = (params) =>
+  defHttp.get({url: Api.genPath, params},{isTransformResponse:false});
+/**
+ * 子表列表接口
+ * @param params
+ */
+export const openApiHeaderList = (params) =>
+  defHttp.get({url: Api.openApiHeaderList, params},{isTransformResponse:false});
+/**
+ * 子表列表接口
+ * @param params
+ */
+export const openApiParamList = (params) =>
+  defHttp.get({url: Api.openApiParamList, params},{isTransformResponse:false});
+/**
+ * swagger文档json
+ * @param params
+ */
+export const getOpenApiJson = (params) =>
+  defHttp.get({url: Api.openApiJson, params},{isTransformResponse:false});
diff --git a/src/views/openapi/OpenApi.data.ts b/src/views/openapi/OpenApi.data.ts
new file mode 100644
index 0000000..bcb29be
--- /dev/null
+++ b/src/views/openapi/OpenApi.data.ts
@@ -0,0 +1,468 @@
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import { rules} from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+import {JVxeTypes,JVxeColumn} from '/@/components/jeecg/JVxeTable/types'
+import { getWeekMonthQuarterYear } from '/@/utils';
+//列表数据
+export const columns: BasicColumn[] = [
+   {
+    title: '接口名称',
+    align:"center",
+    dataIndex: 'name'
+   },
+   {
+    title: '接口地址',
+    align:"center",
+    dataIndex: 'requestUrl',
+    width: 120,
+   },
+   {
+    title: '请求方式',
+    align:"center",
+    dataIndex: 'requestMethod',
+    width: 100,
+   },
+   {
+    title: '原始接口',
+    align:"center",
+    dataIndex: 'originUrl',
+    ellipsis: true,
+   },
+   {
+    title: 'IP 白名单',
+    align:"center",
+    dataIndex: 'whiteList',
+    ellipsis: true,
+    customRender: ({ text }) => {
+      if (!text) return '不限制';
+      const count = text.split(/[,\n]/).filter(item => item.trim()).length;
+      return count + ' 条规则';
+    }
+   },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: "接口名称",
+    field: "name",
+    component: 'JInput',
+  },
+  {
+    label: "接口地址",
+    field: "requestUrl",
+    component: 'JInput',
+  },
+];
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '接口名称',
+    field: 'name',
+    component: 'Input',
+    dynamicRules: ({model,schema}) => {
+          return [
+                 { required: true, message: '请输入接口名称!'},
+          ];
+     },
+  },
+  {
+    label: '原始接口',
+    field: 'originUrl',
+    component: 'Input',
+    componentProps: {
+      placeholder: '当前系统的原始接口地址，如 /sys/user/list',
+    },
+    helpMessage: '当前系统中被代理的原始接口路径',
+    dynamicRules: () => {
+      return [
+        { required: true, message: '请输入原始接口路径!' },
+        {
+          validator: (_, value) => {
+            if (value && !value.startsWith('/')) {
+              return Promise.reject('原始接口路径必须以 / 开头');
+            }
+            if (value && value.includes('//')) {
+              return Promise.reject('原始接口路径不能包含 //');
+            }
+            if (value && value.includes('..')) {
+              return Promise.reject('原始接口路径不能包含 ..');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    label: '请求方式',
+    field: 'requestMethod',
+    component: 'JSearchSelect',
+    componentProps:{
+      dictOptions: [
+        {
+          text: 'POST',
+          value: 'POST',
+        },
+        {
+          text: 'GET',
+          value: 'GET',
+        },
+        {
+          text: 'HEAD',
+          value: 'HEAD',
+        },
+        {
+          text: 'PUT',
+          value: 'PUT',
+        },
+        {
+          text: 'PATCH',
+          value: 'PATCH',
+        },
+        {
+          text: 'DELETE',
+          value: 'DELETE',
+        },{
+          text: 'OPTIONS',
+          value: 'OPTIONS',
+        },{
+          text: 'TRACE',
+          value: 'TRACE',
+        },
+      ]
+     },
+    dynamicRules: ({model,schema}) => {
+          return [
+                 { required: true, message: '请输入请求方式!'},
+          ];
+     },
+  },
+  {
+    label: '接口地址',
+    field: 'requestUrl',
+    component: 'Input',
+    dynamicDisabled:true
+  },
+  {
+    label: 'IP 白名单',
+    field: 'whiteList',
+    helpMessage: '支持精确IP、CIDR网段（如192.168.1.0/24）、通配符（如10.2.3.*），每行一个或逗号分隔，为空则不限制',
+    component: 'InputTextArea',
+    slot: 'whiteListSlot',
+    componentProps: {
+      rows: 5,
+      placeholder: '示例：\n192.168.1.100\n10.0.0.0/8\n172.16.*.*',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    label: '备注',
+    field: 'comment',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 2,
+      placeholder: '请输入白名单备注说明',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    label: '接口描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 3,
+      placeholder: '请输入接口描述',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    label: '删除标识',
+    field: 'delFlag',
+    component: 'Input',
+    defaultValue:0,
+    show:false
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'Input',
+    defaultValue:"1",
+    show:false
+  },
+	// TODO 主键隐藏字段，目前写死为ID
+	{
+	  label: '',
+	  field: 'id',
+	  component: 'Input',
+	  show: false
+	},
+];
+//子表单数据
+//子表列表数据
+export const openApiHeaderColumns: BasicColumn[] = [
+   // {
+   //  title: 'apiId',
+   //  align:"center",
+   //  dataIndex: 'apiId'
+   // },
+   {
+    title: '请求头Key',
+    align:"center",
+    dataIndex: 'headerKey'
+   },
+   {
+    title: '是否必填',
+    align:"center",
+    dataIndex: 'required_dictText'
+   },
+   {
+    title: '默认值',
+    align:"center",
+    dataIndex: 'defaultValue'
+   },
+   {
+    title: '备注',
+    align:"center",
+    dataIndex: 'note'
+   },
+];
+//子表列表数据
+export const openApiParamColumns: BasicColumn[] = [
+   // {
+   //  title: 'apiId',
+   //  align:"center",
+   //  dataIndex: 'apiId'
+   // },
+   {
+    title: '参数Key',
+    align:"center",
+    dataIndex: 'paramKey'
+   },
+   {
+    title: '是否必填',
+    align:"center",
+    dataIndex: 'required_dictText'
+   },
+   {
+    title: '默认值',
+    align:"center",
+    dataIndex: 'defaultValue'
+   },
+   {
+    title: '备注',
+    align:"center",
+    dataIndex: 'note'
+   },
+];
+//子表表格配置
+export const openApiHeaderJVxeColumns: JVxeColumn[] = [
+    // {
+    //   title: 'apiId',
+    //   key: 'apiId',
+    //   type: JVxeTypes.input,
+    //   width:"200px",
+    //   placeholder: '请输入${title}',
+    //   defaultValue:'',
+    // },
+    {
+      title: '请求头Key',
+      key: 'headerKey',
+      type: JVxeTypes.input,
+      width:"200px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+    {
+      title: '是否必填',
+      key: 'required',
+      type: JVxeTypes.checkbox,
+      options:[],
+      // dictCode:"yn",
+      width:"100px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+      customValue: ['1','0']
+    },
+    {
+      title: '参数类型',
+      key: 'paramType',
+      type: JVxeTypes.select,
+      width: '120px',
+      options: [
+        { title: 'string', value: 'string' },
+        { title: 'integer', value: 'integer' },
+        { title: 'number', value: 'number' },
+        { title: 'boolean', value: 'boolean' },
+        { title: 'array', value: 'array' },
+        { title: 'object', value: 'object' },
+      ],
+      defaultValue: 'string',
+    },
+    {
+      title: '默认值',
+      key: 'defaultValue',
+      type: JVxeTypes.input,
+      width:"200px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+    {
+      title: '示例值',
+      key: 'example',
+      type: JVxeTypes.input,
+      width: '200px',
+      placeholder: '请输入${title}',
+      defaultValue: '',
+    },
+    {
+      title: '备注',
+      key: 'note',
+      type: JVxeTypes.input,
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+  ]
+export const openApiParamJVxeColumns: JVxeColumn[] = [
+    // {
+    //   title: 'apiId',
+    //   key: 'apiId',
+    //   type: JVxeTypes.input,
+    //   width:"200px",
+    //   placeholder: '请输入${title}',
+    //   defaultValue:'',
+    // },
+    {
+      title: '参数Key',
+      key: 'paramKey',
+      type: JVxeTypes.input,
+      width:"200px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+    {
+      title: '是否必填',
+      key: 'required',
+      type: JVxeTypes.checkbox,
+      options:[],
+      // dictCode:"yn",
+      width:"100px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+      customValue: ['1','0']
+    },
+    {
+      title: '参数类型',
+      key: 'paramType',
+      type: JVxeTypes.select,
+      width: '120px',
+      options: [
+        { title: 'string', value: 'string' },
+        { title: 'integer', value: 'integer' },
+        { title: 'number', value: 'number' },
+        { title: 'boolean', value: 'boolean' },
+        { title: 'array', value: 'array' },
+        { title: 'object', value: 'object' },
+      ],
+      defaultValue: 'string',
+    },
+    {
+      title: '默认值',
+      key: 'defaultValue',
+      type: JVxeTypes.input,
+      width:"200px",
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+    {
+      title: '示例值',
+      key: 'example',
+      type: JVxeTypes.input,
+      width: '200px',
+      placeholder: '请输入${title}',
+      defaultValue: '',
+    },
+    {
+      title: '备注',
+      key: 'note',
+      type: JVxeTypes.input,
+      placeholder: '请输入${title}',
+      defaultValue:'',
+    },
+  ]
+
+export const responseFieldJVxeColumns: JVxeColumn[] = [
+  {
+    title: '字段名',
+    key: 'fieldName',
+    type: JVxeTypes.input,
+    width: '200px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+  {
+    title: '类型',
+    key: 'fieldType',
+    type: JVxeTypes.select,
+    width: '120px',
+    options: [
+      { title: 'string', value: 'string' },
+      { title: 'integer', value: 'integer' },
+      { title: 'number', value: 'number' },
+      { title: 'boolean', value: 'boolean' },
+      { title: 'array', value: 'array' },
+      { title: 'object', value: 'object' },
+    ],
+    defaultValue: 'string',
+  },
+  {
+    title: '说明',
+    key: 'fieldDesc',
+    type: JVxeTypes.input,
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+];
+
+// 高级查询数据
+export const superQuerySchema = {
+  name: {title: '接口名称',order: 0,view: 'text', type: 'string',},
+  requestMethod: {title: '请求方式',order: 1,view: 'list', type: 'string',dictCode: '',},
+  requestUrl: {title: '接口地址',order: 2,view: 'text', type: 'string',},
+  whiteList: {title: 'IP 白名单',order: 3,view: 'text', type: 'string',},
+  status: {title: '状态',order: 5,view: 'number', type: 'number',},
+  createBy: {title: '创建人',order: 6,view: 'text', type: 'string',},
+  createTime: {title: '创建时间',order: 7,view: 'datetime', type: 'string',},
+  //子表高级查询
+  openApiHeader: {
+    title: '请求头表',
+    view: 'table',
+    fields: {
+        // apiId: {title: 'apiId',order: 0,view: 'text', type: 'string',},
+        headerKey: {title: '请求头Key',order: 1,view: 'text', type: 'string',},
+        required: {title: '是否必填',order: 2,view: 'number', type: 'number',dictCode: 'yn',},
+        defaultValue: {title: '默认值',order: 3,view: 'text', type: 'string',},
+        note: {title: '备注',order: 4,view: 'text', type: 'string',},
+    }
+  },
+  openApiParam: {
+    title: '请求参数部分',
+    view: 'table',
+    fields: {
+        // apiId: {title: 'apiId',order: 0,view: 'text', type: 'string',},
+        paramKey: {title: '参数Key',order: 1,view: 'text', type: 'string',},
+        required: {title: '是否必填',order: 2,view: 'number', type: 'number',dictCode: 'yn',},
+        defaultValue: {title: '默认值',order: 3,view: 'text', type: 'string',},
+        note: {title: '备注',order: 4,view: 'text', type: 'string',},
+    }
+  },
+};
+
+/**
+* 流程表单调用这个方法获取formSchema
+* @param param
+*/
+export function getBpmFormSchema(_formData): FormSchema[]{
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return formSchema;
+}
diff --git a/src/views/openapi/OpenApiAuth.api.ts b/src/views/openapi/OpenApiAuth.api.ts
new file mode 100644
index 0000000..c2792c9
--- /dev/null
+++ b/src/views/openapi/OpenApiAuth.api.ts
@@ -0,0 +1,122 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/openapi/auth/list',
+  save='/openapi/auth/add',
+  edit='/openapi/auth/edit',
+  apiList= '/openapi/list',
+  genAKSK = '/openapi/auth/genAKSK',
+  permissionList='/openapi/permission/getOpenApi',
+  permissionAdd='/openapi/permission/add',
+  deleteOne = '/openapi/auth/delete',
+  deleteBatch = '/openapi/auth/deleteBatch',
+  importExcel = '/openapi/auth/importExcel',
+  exportXls = '/openapi/auth/exportXls',
+}
+
+/**
+ * 获取API
+ * @param params
+ */
+export const apiList = Api.apiList;
+/**
+ * 权限添加
+ * @param params
+ */
+export const permissionAdd = Api.permissionAdd;
+/**
+ * 生成AKSK
+ * @param params
+ */
+export const genAKSK = Api.genAKSK;
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  if (isUpdate) {
+    return defHttp.put({ url: Api.edit, params }, { isTransformResponse: false });
+  }
+  return defHttp.post({ url: Api.save, params }, { isTransformResponse: false });
+}
+
+/**
+ * 全部权限列表接口
+ * @param params
+ */
+export const getApiList = (params) => defHttp.get({ url: Api.apiList, params }, { isTransformResponse: false });
+
+/**
+ * 获取已授权项目的接口
+ * @param params
+ */
+export const getPermissionList = (params) => defHttp.get({ url: Api.permissionList, params });
+/**
+ * 授权保存方法
+ * @param params
+ * @param isUpdate
+ */
+export const permissionAddFunction = (params) => {
+  return defHttp.post({ url: Api.permissionAdd, params }, { isTransformResponse: false });
+}
+/**
+ * 授权保存方法
+ * @param params
+ * @param isUpdate
+ */
+export const getGenAKSK = (params) => {
+  return defHttp.get({ url: Api.genAKSK, params });
+}
diff --git a/src/views/openapi/OpenApiAuth.data.ts b/src/views/openapi/OpenApiAuth.data.ts
new file mode 100644
index 0000000..e11945a
--- /dev/null
+++ b/src/views/openapi/OpenApiAuth.data.ts
@@ -0,0 +1,84 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '授权对象',
+    align: 'center',
+    dataIndex: 'name',
+  },
+  {
+    title: '访问密钥（AK）',
+    align: 'center',
+    dataIndex: 'ak',
+    ellipsis: true,
+  },
+  {
+    title: '创建人',
+    align: 'center',
+    dataIndex: 'createBy',
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'createTime',
+  },
+];
+
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '授权对象',
+    field: 'name',
+    component: 'JInput',
+  },
+  {
+    label: '访问密钥',
+    field: 'ak',
+    component: 'JInput',
+  },
+];
+
+//授权表单数据
+export const authFormSchema: FormSchema[] = [
+  {
+    label: '授权对象',
+    field: 'name',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '',
+    field: 'ak',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'sk',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'systemUserId',
+    component: 'Input',
+    show: false,
+  },
+];
+
+// 高级查询数据
+export const superQuerySchema = {
+  name: { title: '授权对象', order: 0, view: 'text', type: 'string' },
+  ak: { title: '访问密钥（AK）', order: 1, view: 'text', type: 'string' },
+  sk: { title: '签名密钥（SK）', order: 2, view: 'text', type: 'string' },
+  createBy: { title: '创建人', order: 3, view: 'text', type: 'string' },
+  createTime: { title: '创建时间', order: 4, view: 'datetime', type: 'string' },
+};
diff --git a/src/views/openapi/OpenApiAuthList.vue b/src/views/openapi/OpenApiAuthList.vue
new file mode 100644
index 0000000..85c26c7
--- /dev/null
+++ b/src/views/openapi/OpenApiAuthList.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" v-auth="'openapi:open_api_auth:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+        <a-button type="primary" v-auth="'openapi:open_api_auth:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" v-auth="'openapi:open_api_auth:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button v-auth="'openapi:open_api_auth:deleteBatch'">批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+        <!-- 高级查询 -->
+        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+      <!--字段回显插槽-->
+      <template v-slot:bodyCell="{ column, record, index, text }">
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <OpenApiAuthDrawer @register="registerAuthDrawer" @success="handleSuccess" />
+    <AuthDrawer @register="registerPermDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" name="openapi-openApiAuth" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { columns, searchFormSchema, superQuerySchema } from './OpenApiAuth.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, getGenAKSK, saveOrUpdate } from './OpenApiAuth.api';
+  import OpenApiAuthDrawer from './components/OpenApiAuthDrawer.vue';
+  import AuthDrawer from './components/AuthDrawer.vue';
+
+  const queryParam = reactive<any>({});
+  const { createMessage } = useMessage();
+  const [registerAuthDrawer, { openDrawer: openAuthDrawer }] = useDrawer();
+  const [registerPermDrawer, { openDrawer: openPermDrawer }] = useDrawer();
+
+  //注册table数据
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: '授权管理',
+      api: list,
+      columns,
+      canResize: false,
+      formConfig: {
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
+      },
+      actionColumn: {
+        width: 220,
+        fixed: 'right',
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, queryParam);
+      },
+    },
+    exportConfig: {
+      name: '授权管理',
+      url: getExportUrl,
+      params: queryParam,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  // 高级查询配置
+  const superQueryConfig = reactive(superQuerySchema);
+
+  /**
+   * 高级查询事件
+   */
+  function handleSuperQuery(params) {
+    Object.keys(params).map((k) => {
+      queryParam[k] = params[k];
+    });
+    reload();
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openAuthDrawer(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    openAuthDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 授权事件
+   */
+  function handleAuth(record: Recordable) {
+    openPermDrawer(true, { record });
+  }
+
+  /**
+   * 重置AK/SK
+   */
+  async function handleReset(record: Recordable) {
+    const AKSKObj = await getGenAKSK({});
+    record.ak = AKSKObj[0];
+    record.sk = AKSKObj[1];
+    await saveOrUpdate(record, true);
+    reload();
+  }
+
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openAuthDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  /**
+   * 复制密钥
+   */
+  async function handleCopyKeys(record: Recordable) {
+    const text = `访问密钥（AK）: ${record.ak}\n签名密钥（SK）: ${record.sk}`;
+    try {
+      await navigator.clipboard.writeText(text);
+      createMessage.success('密钥已复制到剪贴板');
+    } catch (_e) {
+      createMessage.error('复制失败，请手动复制');
+    }
+  }
+
+  function getTableAction(record) {
+    return [
+      {
+        label: '复制密钥',
+        onClick: handleCopyKeys.bind(null, record),
+      },
+      {
+        label: '分配接口',
+        onClick: handleAuth.bind(null, record),
+        auth: 'openapi:open_api_auth:edit',
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '修改对象',
+        onClick: handleEdit.bind(null, record),
+        auth: 'openapi:open_api_auth:edit',
+      },
+      {
+        label: '重置密钥',
+        popConfirm: {
+          title: '原密钥将失效，确认重置？',
+          confirm: handleReset.bind(null, record),
+          placement: 'topLeft',
+        },
+        auth: 'openapi:open_api_auth:edit',
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+        auth: 'openapi:open_api_auth:delete',
+      },
+    ];
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),:deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/openapi/OpenApiList.vue b/src/views/openapi/OpenApiList.vue
new file mode 100644
index 0000000..17d0ed4
--- /dev/null
+++ b/src/views/openapi/OpenApiList.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <!--引用表格-->
+   <BasicTable @register="registerTable" :rowSelection="rowSelection"  @expand="handleExpand">
+      <!-- 内嵌table区域 begin -->
+<!--           <template #expandedRowRender="{record}">-->
+<!--             <a-tabs tabPosition="top">-->
+<!--               <a-tab-pane tab="请求头表" key="openApiHeader" forceRender>-->
+<!--                  <openApiHeaderSubTable v-if="expandedRowKeys.includes(record.id)" :id="record.id" />-->
+<!--               </a-tab-pane>-->
+<!--               <a-tab-pane tab="请求参数部分" key="openApiParam" forceRender>-->
+<!--                  <openApiParamSubTable v-if="expandedRowKeys.includes(record.id)" :id="record.id" />-->
+<!--               </a-tab-pane>-->
+<!--             </a-tabs>-->
+<!--           </template>-->
+     <!-- 内嵌table区域 end -->
+     <!--插槽:table标题-->
+      <template #tableTitle>
+          <a-button type="primary" v-auth="'openapi:open_api:add'"  @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+          <a-button  type="primary" v-auth="'openapi:open_api:exportXls'"  preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+          <j-upload-button  type="primary" v-auth="'openapi:open_api:importExcel'"  preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+          <a-dropdown v-if="selectedRowKeys.length > 0">
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item key="1" @click="batchHandleDelete">
+                    <Icon icon="ant-design:delete-outlined"></Icon>
+                    删除
+                  </a-menu-item>
+                </a-menu>
+              </template>
+              <a-button  v-auth="'openapi:open_api:deleteBatch'">批量操作
+                <Icon icon="mdi:chevron-down"></Icon>
+              </a-button>
+        </a-dropdown>
+        <!-- 高级查询 -->
+        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
+      </template>
+       <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
+      </template>
+      <!--字段回显插槽-->
+      <template v-slot:bodyCell="{ column, record, index, text }">
+        <template v-if="column.dataIndex === 'requestUrl'">
+          <a @click="handleCopyUrl(record)" title="点击复制完整接口地址">{{ text }}</a>
+        </template>
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <OpenApiDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" name="openapi-openApi" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OpenApiDrawer from './components/OpenApiDrawer.vue';
+  import { columns, searchFormSchema, superQuerySchema } from './OpenApi.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './OpenApi.api';
+  const queryParam = reactive<any>({});
+  const expandedRowKeys = ref<any[]>([]);
+  const { createMessage } = useMessage();
+  const API_DOMAIN = import.meta.env.VITE_GLOB_DOMAIN_URL;
+  const [registerDrawer, { openDrawer }] = useDrawer();
+   //注册table数据
+  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
+      tableProps:{
+           title: '接口管理',
+           api: list,
+           columns,
+           canResize:false,
+           formConfig: {
+                //labelWidth: 120,
+                schemas: searchFormSchema,
+                autoSubmitOnEnter:true,
+                showAdvancedButton:true,
+                fieldMapToNumber: [
+                ],
+                fieldMapToTime: [
+                ],
+            },
+           actionColumn: {
+               width: 200,
+               fixed:'right'
+           },
+           beforeFetch: (params) => {
+             return Object.assign(params, queryParam);
+           },
+        },
+        exportConfig: {
+            name:"接口管理",
+            url: getExportUrl,
+            params: queryParam,
+        },
+        importConfig: {
+            url: getImportUrl,
+            success: handleSuccess
+        },
+    })
+
+  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
+
+   // 高级查询配置
+   const superQueryConfig = reactive(superQuerySchema);
+
+   /**
+   * 高级查询事件
+   */
+   function handleSuperQuery(params) {
+     Object.keys(params).map((k) => {
+       queryParam[k] = params[k];
+     });
+     reload();
+   }
+
+   /**
+     * 展开事件
+     * */
+   function handleExpand(expanded, record){
+        expandedRowKeys.value=[];
+        if (expanded === true) {
+           expandedRowKeys.value.push(record.id)
+        }
+    }
+   /**
+    * 新增事件
+    */
+  function handleAdd() {
+     openDrawer(true, {
+       isUpdate: false,
+       showFooter: true,
+     });
+  }
+   /**
+    * 编辑事件
+    */
+  function handleEdit(record: Recordable) {
+     openDrawer(true, {
+       record,
+       isUpdate: true,
+       showFooter: true,
+     });
+   }
+   /**
+    * 详情
+   */
+  function handleDetail(record: Recordable) {
+     openDrawer(true, {
+       record,
+       isUpdate: true,
+       showFooter: false,
+     });
+   }
+   /**
+    * 删除事件
+    */
+  async function handleDelete(record) {
+     await deleteOne({id: record.id}, handleSuccess);
+   }
+   /**
+    * 批量删除事件
+    */
+  async function batchHandleDelete() {
+     await batchDelete({ids: selectedRowKeys.value},handleSuccess);
+   }
+   /**
+    * 成功回调
+    */
+  function handleSuccess() {
+      (selectedRowKeys.value = []) && reload();
+   }
+   /**
+      * 操作栏
+      */
+  /**
+   * 复制接口地址
+   */
+  async function handleCopyUrl(record: Recordable) {
+    const url = API_DOMAIN + '/openapi/call/' + record.requestUrl;
+    try {
+      await navigator.clipboard.writeText(url);
+      createMessage.success('接口地址已复制');
+    } catch (_e) {
+      createMessage.error('复制失败，请手动复制');
+    }
+  }
+
+  function getTableAction(record){
+       return [
+         {
+           label: '编辑',
+           onClick: handleEdit.bind(null, record),
+           auth: 'openapi:open_api:edit'
+         },
+       ]
+   }
+
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record){
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      }, {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft'
+        },
+        auth: 'openapi:open_api:delete'
+      }
+    ]
+  }
+
+
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),:deep(.ant-input-number){
+    width: 100%;
+  }
+</style>
diff --git a/src/views/openapi/SwaggerUI.vue b/src/views/openapi/SwaggerUI.vue
new file mode 100644
index 0000000..d99e2de
--- /dev/null
+++ b/src/views/openapi/SwaggerUI.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="swaggerUiRef" style="height: 100%;"></div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+// 尝试直接导入 SwaggerUI 而不是使用 * as
+import SwaggerUI from 'swagger-ui-dist/swagger-ui-bundle'; // 确保使用 ESM 版本
+import 'swagger-ui-dist/swagger-ui.css';
+
+import { getOpenApiJson } from './OpenApi.api';
+
+const swaggerUiRef = ref<HTMLElement | null>(null);
+const API_DOMAIN = import.meta.env.VITE_GLOB_DOMAIN_URL
+onMounted(async () => {
+  try {
+    const response = await getOpenApiJson();
+    const openApiJson = response;
+    if (swaggerUiRef.value) {
+      SwaggerUI({
+        domNode: swaggerUiRef.value,
+        spec: openApiJson,
+      });
+    }
+  } catch (error) {
+    console.error('Failed to fetch OpenAPI JSON:', error);
+  }
+});
+</script>
+
+<style scoped>
+/* 确保容器有高度 */
+.swagger-ui-container {
+  height: 100%;
+}
+</style>
diff --git a/src/views/openapi/components/AuthDrawer.vue b/src/views/openapi/components/AuthDrawer.vue
new file mode 100644
index 0000000..4bbb2a9
--- /dev/null
+++ b/src/views/openapi/components/AuthDrawer.vue
@@ -0,0 +1,185 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    title="接口授权"
+    width="720px"
+    destroyOnClose
+    @ok="handleSubmit"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-row :gutter="[12, 12]">
+        <a-col :span="12" v-for="item in apiList" :key="item.id">
+          <a-card
+            :class="['auth-api-card', { 'auth-api-card--checked': item.checked }]"
+            hoverable
+            :body-style="{ padding: '12px' }"
+            @click="handleSelect(item)"
+          >
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <span class="auth-api-name">{{ item.name }}</span>
+              <a-checkbox v-model:checked="item.checked" @click.stop @change="(e) => handleChange(e, item)" />
+            </div>
+            <div style="margin-top: 6px; color: #888; font-size: 12px">
+              <a-tag :color="getMethodColor(item.requestMethod)">{{ item.requestMethod }}</a-tag>
+              <span style="margin-left: 4px">{{ item.requestUrl }}</span>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <div v-if="apiList.length === 0 && !confirmLoading" style="text-align: center; padding: 40px 0; color: #999">
+        暂无接口数据
+      </div>
+      <div v-if="total > 0" style="margin-top: 16px; text-align: right">
+        <a-pagination
+          :current="pageNo"
+          :page-size="pageSize"
+          :page-size-options="['10', '20', '30']"
+          :total="total"
+          show-quick-jumper
+          show-size-changer
+          size="small"
+          @change="handlePageChange"
+        />
+      </div>
+    </a-spin>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { getApiList, getPermissionList, permissionAddFunction } from '../OpenApiAuth.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emit = defineEmits(['register', 'success']);
+  const { createMessage } = useMessage();
+  const confirmLoading = ref(false);
+  const apiAuthId = ref('');
+  const apiList = ref<any[]>([]);
+  const selectedRowKeys = ref<string[]>([]);
+  const pageNo = ref(1);
+  const pageSize = ref(10);
+  const total = ref(0);
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    selectedRowKeys.value = [];
+    apiList.value = [];
+    pageNo.value = 1;
+    pageSize.value = 10;
+    total.value = 0;
+    apiAuthId.value = data.record?.id || '';
+
+    // Load existing permissions
+    try {
+      const permRes = await getPermissionList({ apiAuthId: apiAuthId.value });
+      if (permRes && permRes.length > 0) {
+        permRes.forEach((item) => {
+          if (item.ifCheckBox == '1') {
+            selectedRowKeys.value.push(item.id);
+          }
+        });
+      }
+    } catch (_e) {
+      // ignore
+    }
+    await reload();
+  });
+
+  async function reload() {
+    confirmLoading.value = true;
+    try {
+      const res = await getApiList({
+        pageNo: pageNo.value,
+        pageSize: pageSize.value,
+        column: 'createTime',
+        order: 'desc',
+      });
+      if (res.success) {
+        const records = res.result.records || [];
+        records.forEach((item) => {
+          item.checked = selectedRowKeys.value.includes(item.id);
+        });
+        apiList.value = records;
+        total.value = res.result.total || 0;
+      } else {
+        apiList.value = [];
+        total.value = 0;
+      }
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+
+  function handleSelect(item) {
+    item.checked = !item.checked;
+    toggleSelection(item.id, item.checked);
+  }
+
+  function handleChange(e, item) {
+    toggleSelection(item.id, e.target.checked);
+  }
+
+  function toggleSelection(id: string, checked: boolean) {
+    const idx = selectedRowKeys.value.indexOf(id);
+    if (checked && idx === -1) {
+      selectedRowKeys.value.push(id);
+    } else if (!checked && idx !== -1) {
+      selectedRowKeys.value.splice(idx, 1);
+    }
+  }
+
+  function handlePageChange(page, current) {
+    pageNo.value = page;
+    pageSize.value = current;
+    reload();
+  }
+
+  function getMethodColor(method: string) {
+    const map = { GET: 'green', POST: 'blue', PUT: 'orange', DELETE: 'red', PATCH: 'purple' };
+    return map[method] || 'default';
+  }
+
+  async function handleSubmit() {
+    confirmLoading.value = true;
+    try {
+      setDrawerProps({ confirmLoading: true });
+      const res = await permissionAddFunction({
+        apiId: selectedRowKeys.value.join(','),
+        apiAuthId: apiAuthId.value,
+      });
+      if (res.success) {
+        createMessage.success(res.message);
+        closeDrawer();
+        emit('success');
+      } else {
+        createMessage.warning(res.message);
+      }
+    } finally {
+      confirmLoading.value = false;
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .auth-api-card {
+    transition: all 0.2s;
+    border: 1px solid #d9d9d9;
+
+    &--checked {
+      border-color: #1890ff;
+      background-color: #e6f7ff;
+    }
+  }
+
+  .auth-api-name {
+    font-weight: 500;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    display: inline-block;
+  }
+</style>
diff --git a/src/views/openapi/components/AuthForm.vue b/src/views/openapi/components/AuthForm.vue
new file mode 100644
index 0000000..fdbaeb1
--- /dev/null
+++ b/src/views/openapi/components/AuthForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-row :span="24" style="margin-bottom: 10px">
+      <a-col :span="12" v-for="item in apiList" @click="handleSelect(item)">
+        <a-card :style="item.checked ? { border: '1px solid #3370ff' } : {}" hoverable class="checkbox-card" :body-style="{ width: '100%', padding: '10px' }">
+          <div class="checkbox-name" style="display: flex; width: 100%; justify-content: space-between">
+            <span>接口名称: {{ item.name }}</span>
+            <a-checkbox v-model:checked="item.checked" @click.stop class="quantum-checker" @change="(e) => handleChange(e, item)"> </a-checkbox>
+          </div>
+          <div class="checkbox-name" style="margin-top: 4px">
+            请求方式: <span>{{item.requestMethod}}</span>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="apiList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+    />
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineExpose, defineProps, nextTick, reactive, ref } from "vue";
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getApiList, getPermissionList, permissionAddFunction } from '../OpenApiAuth.api';
+import { Form, Pagination } from 'ant-design-vue';
+
+const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({}) },
+    formBpm: { type: Boolean, default: true },
+  });
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const confirmLoading = ref<boolean>(false);
+  //认证ID
+  const apiAuthId = ref<string>('');
+  //表单验证
+  const validatorRules = reactive({});
+  //api列表
+  const apiList = ref<any>([]);
+  //选中的值
+  const selectedRowKeys = ref<any>([]);
+  //选中的数据
+  const selectedRows = ref<any>([]);
+  //当前页数
+  const pageNo = ref<number>(1);
+  //每页条数
+  const pageSize = ref<number>(10);
+  //总条数
+  const total = ref<number>(0);
+  //可选择的页数
+  const pageSizeOptions = ref<any>(['10', '20', '30']);
+
+  // 表单禁用
+  const disabled = computed(() => {
+    if (props.formBpm === true) {
+      if (props.formData.disabled === false) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+
+  /**
+   * 加载数据
+   */
+  function reload() {
+    getApiList({ pageNo: pageNo.value, pageSize: pageSize.value, column: 'createTime', order: 'desc'}).then((res)=>{
+      if (res.success) {
+        for (const item of res.result.records) {
+          item.checked = false;
+        }
+        apiList.value = res.result.records;
+        total.value = res.result.total;
+        setChecked();
+      } else {
+        apiList.value = [];
+        total.value = 0;
+      }
+    });
+  }
+  
+  /**
+   * 新增
+   */
+  function add() {
+    edit({});
+  }
+
+  /**
+   * 编辑
+   */
+  async function edit(record) {
+    selectedRowKeys.value = [];
+    selectedRows.value = [];
+    pageNo.value = 1;
+    pageSize.value = 10;
+    apiAuthId.value = record.id;
+    await nextTick(() => {
+      // 获取当前已授权的项目
+      getPermissionList({ apiAuthId: record.id }).then((res) => {
+        if (res.length > 0) {
+          res.forEach((item) => {
+            if(item.ifCheckBox == "1"){
+              selectedRowKeys.value.push(item.id);
+              selectedRows.value.push(item);
+            }
+          });
+          //设置选中
+          setChecked();
+        }
+      });
+      reload();
+    });
+  }
+
+  /**
+   * 提交数据
+   */
+  async function submitForm() {
+    confirmLoading.value = true;
+    //时间格式化
+    let model = {};
+    let apiId = ""
+    selectedRowKeys.value.forEach((item) => {
+      apiId += item +",";
+    })
+    model['apiId'] = apiId;
+    model['apiAuthId'] = apiAuthId.value;
+    await permissionAddFunction(model)
+      .then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          emit('ok');
+          cleanData()
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+  const cleanData = () => {
+    selectedRows.value = []
+    selectedRowKeys.value = []
+  };
+
+  /**
+   * 复选框选中事件
+   * @param item
+   */
+  function handleSelect(item) {
+    let id = item.id;
+    const target = apiList.value.find((item) => item.id === id);
+    if (target) {
+      target.checked = !target.checked;
+    }
+    //存放选中的知识库的id
+    if (!selectedRowKeys.value || selectedRowKeys.value.length == 0) {
+      selectedRowKeys.value.push(id);
+      selectedRows.value.push(item);
+      return;
+    }
+    let findIndex = selectedRowKeys.value.findIndex((item) => item === id);
+    if (findIndex === -1) {
+      selectedRowKeys.value.push(id);
+      selectedRows.value.push(item);
+    } else {
+      selectedRowKeys.value.splice(findIndex, 1);
+      selectedRows.value.splice(findIndex, 1);
+    }
+  }
+
+  /**
+   * 复选框选中事件
+   *
+   * @param e
+   * @param item
+   */
+  function handleChange(e, item: any) {
+    if (e.target.checked) {
+      selectedRowKeys.value.push(item.id);
+      selectedRows.value.push(item);
+    } else {
+      let findIndex = selectedRowKeys.value.findIndex((val) => val === item.id);
+      if (findIndex != -1) {
+        selectedRowKeys.value.splice(findIndex, 1);
+        selectedRows.value.splice(findIndex, 1);
+      }
+    }
+  }
+
+  /**
+   * 分页改变事件
+   * @param page
+   * @param current
+   */
+  function handlePageChange(page, current) {
+    pageNo.value = page;
+    pageSize.value = current;
+    reload();
+  }
+
+  /**
+   * 设置选装状态
+   */
+  function setChecked() {
+    if (apiList.value && apiList.value.length > 0){
+      let value = selectedRowKeys.value.join(',');
+      apiList.value = apiList.value.map((item) => {
+        if (value.indexOf(item.id) !== -1) {
+          item.checked = true;
+        } else {
+          item.checked = false;
+        }
+        return item;
+      });
+    }
+  }
+
+  defineExpose({
+    add,
+    edit,
+    submitForm,
+    cleanData
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .list-footer {
+    position: absolute;
+    bottom: -22px;
+    right: 10px;
+    text-align: center;
+  }
+  .checkbox-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+  .checkbox-img {
+    width: 30px;
+    height: 30px;
+  }
+  .checkbox-name {
+    margin-left: 4px;
+    font-size: 13px;
+  }
+  .use-select {
+    color: #646a73;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+  }
+</style>
diff --git a/src/views/openapi/components/AuthModal.vue b/src/views/openapi/components/AuthModal.vue
new file mode 100644
index 0000000..fefc81f
--- /dev/null
+++ b/src/views/openapi/components/AuthModal.vue
@@ -0,0 +1,100 @@
+<template>
+  <!--  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">-->
+  <div style="position: relative;">
+    <a-modal
+      v-model:open="authDrawerOpen"
+      class="custom-class"
+      root-class-name="root-class-name"
+      :root-style="{ color: 'blue' }"
+      :body-style="{ padding: '20px' }"
+      style="color: red"
+      :title="title"
+      :width="600"
+      @after-open-change="authDrawerOpenChange"
+      @ok="handleOk"
+    >
+      <AuthForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></AuthForm>
+    </a-modal>
+  </div>
+  <!--  </j-modal>-->
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import AuthForm from './AuthForm.vue';
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+  const title = ref<string>('');
+  const width = ref<number>(800);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  const authDrawerOpen = ref(false);
+  const authDrawerOpenChange = (val: any) => {
+    if(!val)
+      registerForm.value.cleanData()
+  };
+
+  /**
+   * 新增
+   */
+  function add() {
+    title.value = '新增';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.add();
+    });
+  }
+
+  /**
+   * 授权
+   * @param record
+   */
+  function edit(record) {
+    title.value = disableSubmit.value ? '详情' : '授权';
+    visible.value = true;
+    authDrawerOpen.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+    authDrawerOpen.value = false;
+  }
+
+  defineExpose({
+    add,
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/openapi/components/OpenApiAuthDrawer.vue b/src/views/openapi/components/OpenApiAuthDrawer.vue
new file mode 100644
index 0000000..8d99582
--- /dev/null
+++ b/src/views/openapi/components/OpenApiAuthDrawer.vue
@@ -0,0 +1,75 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="title"
+    width="600px"
+    destroyOnClose
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { authFormSchema } from '../OpenApiAuth.data';
+  import { saveOrUpdate } from '../OpenApiAuth.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+
+  const emit = defineEmits(['register', 'success']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(false);
+  const formDisabled = ref(false);
+  const showFooter = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
+    labelWidth: 100,
+    schemas: authFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    showFooter.value = !!data?.showFooter;
+    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
+    isUpdate.value = !!data?.isUpdate;
+    formDisabled.value = !data?.showFooter;
+
+    if (unref(isUpdate)) {
+      await setFieldsValue({ ...data.record });
+    } else {
+      // New record: set current user
+      const userData = getAuthCache(USER_INFO_KEY) as any;
+      await setFieldsValue({
+        systemUserId: userData?.id || '',
+      });
+    }
+    setProps({ disabled: !data?.showFooter });
+  });
+
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      const res = await saveOrUpdate(values, isUpdate.value);
+      if (res.success) {
+        createMessage.success(res.message);
+        closeDrawer();
+        emit('success');
+      } else {
+        createMessage.warning(res.message);
+      }
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/openapi/components/OpenApiAuthForm.vue b/src/views/openapi/components/OpenApiAuthForm.vue
new file mode 100644
index 0000000..0291d43
--- /dev/null
+++ b/src/views/openapi/components/OpenApiAuthForm.vue
@@ -0,0 +1,175 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="OpenApiAuthForm">
+          <a-row>
+						<a-col :span="24">
+							<a-form-item label="授权对象" v-bind="validateInfos.name" id="OpenApiAuthForm-name" name="name">
+								<a-input v-model:value="formData.name" placeholder="请输入授权对象"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="访问密钥（AK）" v-bind="validateInfos.ak" id="OpenApiAuthForm-ak" name="ak">
+								<a-input v-model:value="formData.ak" placeholder="自动生成" disabled allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+						<a-col :span="24">
+							<a-form-item label="签名密钥（SK）" v-bind="validateInfos.sk" id="OpenApiAuthForm-sk" name="sk">
+								<a-input v-model:value="formData.sk" placeholder="自动生成" disabled allow-clear ></a-input>
+							</a-form-item>
+						</a-col>
+<!--						<a-col :span="24">-->
+<!--							<a-form-item label="关联系统用户名" v-bind="validateInfos.systemUserId" id="OpenApiAuthForm-systemUserId" name="systemUserId">-->
+<!--								<JSearchSelect dict="sys_user,username,id" v-model:value="formData.systemUserId" placeholder="请输入关联系统用户名"  allow-clear ></JSearchSelect>-->
+<!--							</a-form-item>-->
+<!--						</a-col>-->
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed,  } from 'vue';
+  import { USER_INFO_KEY} from '/@/enums/cacheEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getValueType } from '/@/utils';
+  import { saveOrUpdate,getGenAKSK } from '../OpenApiAuth.api';
+  import { Form } from 'ant-design-vue';
+  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
+  import { getAuthCache } from "@/utils/auth";
+  const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({})},
+    formBpm: { type: Boolean, default: true },
+    title: { type: String, default: "" },
+  });
+  const formRef = ref();
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const formData = reactive<Record<string, any>>({
+    id: '',
+    name: '',   
+    ak: '',   
+    sk: '',   
+    systemUserId: '',   
+  });
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  //表单验证
+  const validatorRules = reactive({
+    name:[{ required: true, message: '请输入授权对象!'},],
+    systemUserId:[{ required: true, message: '请输入关联系统用户名!'},],
+  });
+  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+  // 表单禁用
+  const disabled = computed(()=>{
+    if(props.formBpm === true){
+      if(props.formData.disabled === false){
+        return false;
+      }else{
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+
+  
+  /**
+   * 新增
+   */
+  async function add() {
+    edit({});
+    const AKSKObj = await getGenAKSK({});
+    formData.ak = AKSKObj[0];
+    formData.sk = AKSKObj[1];
+  }
+
+  /**
+   * 编辑
+   */
+  function edit(record) {
+    const userData = getAuthCache(USER_INFO_KEY)
+    if(props.title == "新增"){
+      record.systemUserId = userData.id
+    }
+    nextTick(() => {
+      resetFields();
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(record.hasOwnProperty(key)){
+          tmpData[key] = record[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+  }
+
+  /**
+   * 提交数据
+   */
+  async function submitForm() {
+    try {
+      // 触发表单验证
+      await validate();
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    }
+    confirmLoading.value = true;
+    const isUpdate = ref<boolean>(false);
+    //时间格式化
+    let model = formData;
+    if (model.id) {
+      isUpdate.value = true;
+    }
+    //循环数据
+    for (let data in model) {
+      //如果该数据是数组并且是字符串类型
+      if (model[data] instanceof Array) {
+        let valueType = getValueType(formRef.value.getProps, data);
+        //如果是字符串类型的需要变成以逗号分割的字符串
+        if (valueType === 'string') {
+          model[data] = model[data].join(',');
+        }
+      }
+    }
+    await saveOrUpdate(model, isUpdate.value)
+      .then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          emit('ok');
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(() => {
+        confirmLoading.value = false;
+      });
+  }
+
+
+  defineExpose({
+    add,
+    edit,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+</style>
diff --git a/src/views/openapi/components/OpenApiAuthModal.vue b/src/views/openapi/components/OpenApiAuthModal.vue
new file mode 100644
index 0000000..f81c1d9
--- /dev/null
+++ b/src/views/openapi/components/OpenApiAuthModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <j-modal :title="title" :width="width" :maxHeight="200" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <OpenApiAuthForm ref="registerForm" @ok="submitCallback" :title="title" :formDisabled="disableSubmit" :formBpm="false"></OpenApiAuthForm>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import OpenApiAuthForm from './OpenApiAuthForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<number>(800);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  /**
+   * 新增
+   */
+  function add() {
+    title.value = '新增';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.add();
+    });
+  }
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function edit(record) {
+    title.value = disableSubmit.value ? '详情' : '编辑';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    add,
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/openapi/components/OpenApiDrawer.vue b/src/views/openapi/components/OpenApiDrawer.vue
new file mode 100644
index 0000000..eea4630
--- /dev/null
+++ b/src/views/openapi/components/OpenApiDrawer.vue
@@ -0,0 +1,269 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="title"
+    width="90%"
+    destroyOnClose
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+  >
+    <!-- 上部：基本信息表单 -->
+    <BasicForm @register="registerForm" ref="formRef">
+      <template #whiteListSlot="{ model, field }">
+        <a-textarea
+          v-model:value="model[field]"
+          :rows="5"
+          placeholder="示例：&#10;192.168.1.100&#10;10.0.0.0/8&#10;172.16.*.*"
+          :disabled="formDisabled"
+        />
+        <!-- 标签预览 -->
+        <div v-if="model[field]" style="margin-top: 8px">
+          <a-tag
+            v-for="item in parseWhiteList(model[field])"
+            :key="item"
+            color="green"
+            style="margin-bottom: 4px"
+          >
+            {{ item }}
+          </a-tag>
+        </div>
+        <!-- 整理按钮 -->
+        <div v-if="model[field] && !formDisabled" style="margin-top: 4px; text-align: right">
+          <a-button size="small" @click="formatWhiteList(model, field)">整 理</a-button>
+        </div>
+      </template>
+    </BasicForm>
+
+    <!-- 下部：Tabs -->
+    <a-tabs v-model:activeKey="activeTab" style="margin-top: 16px">
+      <a-tab-pane key="headers" tab="请求头">
+        <JVxeTable
+          keep-source
+          ref="openApiHeader"
+          :loading="openApiHeaderTable.loading"
+          :columns="openApiHeaderTable.columns"
+          :dataSource="openApiHeaderTable.dataSource"
+          :height="240"
+          :disabled="formDisabled"
+          :rowNumber="true"
+          :rowSelection="true"
+          :toolbar="true"
+        />
+      </a-tab-pane>
+
+      <a-tab-pane key="params" tab="请求参数">
+        <JVxeTable
+          keep-source
+          ref="openApiParam"
+          :loading="openApiParamTable.loading"
+          :columns="openApiParamTable.columns"
+          :dataSource="openApiParamTable.dataSource"
+          :height="240"
+          :disabled="formDisabled"
+          :rowNumber="true"
+          :rowSelection="true"
+          :toolbar="true"
+        />
+      </a-tab-pane>
+
+      <a-tab-pane key="body" tab="请求体">
+        <div style="border: 1px solid #d9d9d9; border-radius: 4px; min-height: 300px">
+          <CodeEditor v-model:value="bodyContent" mode="application/json" :readonly="formDisabled" />
+        </div>
+      </a-tab-pane>
+
+      <a-tab-pane key="response" tab="响应配置">
+        <div style="margin-bottom: 16px">
+          <h4 style="margin-bottom: 8px">响应示例</h4>
+          <div style="border: 1px solid #d9d9d9; border-radius: 4px; min-height: 200px">
+            <CodeEditor v-model:value="responseExample" mode="application/json" :readonly="formDisabled" />
+          </div>
+        </div>
+        <div>
+          <h4 style="margin-bottom: 8px">响应字段说明</h4>
+          <JVxeTable
+            keep-source
+            ref="responseField"
+            :loading="responseFieldTable.loading"
+            :columns="responseFieldTable.columns"
+            :dataSource="responseFieldTable.dataSource"
+            :height="240"
+            :disabled="formDisabled"
+            :rowNumber="true"
+            :rowSelection="true"
+            :toolbar="true"
+          />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { CodeEditor } from '/@/components/CodeEditor';
+  import {
+    formSchema,
+    openApiHeaderJVxeColumns,
+    openApiParamJVxeColumns,
+    responseFieldJVxeColumns,
+  } from '../OpenApi.data';
+  import { saveOrUpdate, getGenPath } from '../OpenApi.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emit = defineEmits(['register', 'success']);
+  const $message = useMessage();
+  const isUpdate = ref(true);
+  const formDisabled = ref(false);
+  const showFooter = ref(true);
+  const activeTab = ref('headers');
+  const bodyContent = ref('');
+  const responseExample = ref('');
+
+  const openApiHeader = ref();
+  const openApiParam = ref();
+  const responseField = ref();
+
+  const openApiHeaderTable = reactive({
+    loading: false,
+    dataSource: [] as any[],
+    columns: openApiHeaderJVxeColumns,
+  });
+  const openApiParamTable = reactive({
+    loading: false,
+    dataSource: [] as any[],
+    columns: openApiParamJVxeColumns,
+  });
+  const responseFieldTable = reactive({
+    loading: false,
+    dataSource: [] as any[],
+    columns: responseFieldJVxeColumns,
+  });
+
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 12 },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    showFooter.value = !!data?.showFooter;
+    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
+    isUpdate.value = !!data?.isUpdate;
+    formDisabled.value = !data?.showFooter;
+
+    if (unref(isUpdate)) {
+      await setFieldsValue({
+        ...data.record,
+      });
+      openApiHeaderTable.dataSource = data.record.headersJson ? JSON.parse(data.record.headersJson) : [];
+      openApiParamTable.dataSource = data.record.paramsJson ? JSON.parse(data.record.paramsJson) : [];
+      bodyContent.value = data.record.body || '';
+      responseExample.value = data.record.responseExample || '';
+      responseFieldTable.dataSource = data.record.responseFieldsJson ? JSON.parse(data.record.responseFieldsJson) : [];
+    } else {
+      const requestUrlObj = await getGenPath({});
+      await setFieldsValue({
+        requestUrl: requestUrlObj.result,
+      });
+    }
+    setProps({ disabled: !data?.showFooter });
+  });
+
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
+
+  /** 解析白名单文本为条目数组 */
+  function parseWhiteList(text: string): string[] {
+    if (!text) return [];
+    return text
+      .split(/[,\n]/)
+      .map((s) => s.trim())
+      .filter(Boolean);
+  }
+
+  /** 整理白名单：去空行、去重、每行一个 */
+  function formatWhiteList(model: any, field: string) {
+    const items = parseWhiteList(model[field]);
+    const unique = [...new Set(items)];
+    model[field] = unique.join('\n');
+  }
+
+  async function reset() {
+    await resetFields();
+    activeTab.value = 'headers';
+    openApiHeaderTable.dataSource = [];
+    openApiParamTable.dataSource = [];
+    responseFieldTable.dataSource = [];
+    bodyContent.value = '';
+    responseExample.value = '';
+  }
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+
+      // Collect JVxeTable data
+      const headerData = await openApiHeader.value?.getTableData();
+      const paramData = await openApiParam.value?.getTableData();
+      const responseFieldData = await responseField.value?.getTableData();
+
+      const headersJson = headerData?.tableData?.length ? JSON.stringify(headerData.tableData) : null;
+      const paramsJson = paramData?.tableData?.length ? JSON.stringify(paramData.tableData) : null;
+      const responseFieldsJson = responseFieldData?.tableData?.length ? JSON.stringify(responseFieldData.tableData) : null;
+
+      // Validate body JSON
+      if (bodyContent.value) {
+        try {
+          if (typeof JSON.parse(bodyContent.value) != 'object') {
+            $message.createMessage.error('JSON格式化错误,请检查输入数据');
+            return;
+          }
+        } catch (e) {
+          $message.createMessage.error('JSON格式化错误,请检查输入数据');
+          return;
+        }
+      }
+
+      // Validate response example JSON
+      if (responseExample.value) {
+        try {
+          JSON.parse(responseExample.value);
+        } catch (e) {
+          $message.createMessage.error('响应示例JSON格式错误,请检查输入数据');
+          return;
+        }
+      }
+
+      const submitValues = {
+        ...values,
+        headersJson,
+        paramsJson,
+        body: bodyContent.value || null,
+        responseExample: responseExample.value || null,
+        responseFieldsJson,
+      };
+
+      await saveOrUpdate(submitValues, isUpdate.value);
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/openapi/components/OpenApiModal.vue b/src/views/openapi/components/OpenApiModal.vue
new file mode 100644
index 0000000..0e88e75
--- /dev/null
+++ b/src/views/openapi/components/OpenApiModal.vue
@@ -0,0 +1,177 @@
+<template>
+  <BasicModal :bodyStyle="{ padding: '20px' }" v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" width="80%" @ok="handleSubmit">
+    <a-row :gutter="24">
+      <a-col :span="10">
+        <BasicForm @register="registerForm" ref="formRef" name="OpenApiForm" />
+      </a-col>
+      <a-col :span="14">
+        <a-row :gutter="24">
+          <a-col :span="24" style="margin-top: -0.6em">
+            <JVxeTable
+              keep-source
+              ref="openApiHeader"
+              :loading="openApiHeaderTable.loading"
+              :columns="openApiHeaderTable.columns"
+              :dataSource="openApiHeaderTable.dataSource"
+              :height="240"
+              :disabled="formDisabled"
+              :rowNumber="true"
+              :rowSelection="true"
+              :toolbar="true"
+              size="mini"
+            />
+          </a-col>
+          <a-col :span="24">
+            <JVxeTable
+              keep-source
+              ref="openApiParam"
+              :loading="openApiParamTable.loading"
+              :columns="openApiParamTable.columns"
+              :dataSource="openApiParamTable.dataSource"
+              :height="240"
+              :disabled="formDisabled"
+              :rowNumber="true"
+              :rowSelection="true"
+              :toolbar="true"
+              size="mini"
+            />
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts';
+  import { formSchema, openApiHeaderJVxeColumns, openApiParamJVxeColumns } from '../OpenApi.data';
+  import { saveOrUpdate, queryOpenApiHeader, queryOpenApiParam, getGenPath } from '../OpenApi.api';
+  import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils';
+  import { useMessage } from "@/hooks/web/useMessage";
+
+  // Emits声明
+  const $message = useMessage();
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const formDisabled = ref(false);
+  const refKeys = ref(['openApiHeader', 'openApiParam']);
+  const activeKey = ref('openApiHeader');
+  const openApiHeader = ref();
+  const openApiParam = ref();
+  const tableRefs = { openApiHeader, openApiParam };
+  const openApiHeaderTable = reactive({
+    loading: false,
+    dataSource: [],
+    columns: openApiHeaderJVxeColumns,
+  });
+  const openApiParamTable = reactive({
+    loading: false,
+    dataSource: [],
+    columns: openApiParamJVxeColumns,
+  });
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+    wrapperCol: { span: 24 },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await reset();
+    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    formDisabled.value = !data?.showFooter;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+      // 请求后端接口获取数据
+      //  requestSubTableData(queryOpenApiHeader, {id:data?.record?.id}, openApiHeaderTable)
+      //  requestSubTableData(queryOpenApiParam, {id:data?.record?.id}, openApiParamTable)
+      openApiHeaderTable.dataSource = !!data.record.headersJson?JSON.parse(data.record.headersJson):[];
+      openApiParamTable.dataSource = !!data.record.paramsJson?JSON.parse(data.record.paramsJson):[];
+    } else {
+      //  /openapi/genpath
+      const requestUrlObj = await getGenPath({});
+      await setFieldsValue({
+        requestUrl: requestUrlObj.result
+
+      });
+    }
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+  });
+  //方法配置
+  const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod(
+    requestAddOrEdit,
+    classifyIntoFormData,
+    tableRefs,
+    activeKey,
+    refKeys
+  );
+
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
+
+  async function reset() {
+    await resetFields();
+    activeKey.value = 'openApiHeader';
+    openApiHeaderTable.dataSource = [];
+    openApiParamTable.dataSource = [];
+  }
+  function classifyIntoFormData(allValues) {
+    let main = Object.assign({}, allValues.formValue);
+    return {
+      ...main, // 展开
+      headersJson: allValues.tablesValue[0].tableData,
+      paramsJson: allValues.tablesValue[1].tableData,
+    };
+  }
+  //表单提交事件
+  async function requestAddOrEdit(values) {
+    let headersJson = !!values.headersJson?JSON.stringify(values.headersJson):null;
+    let paramsJson = !!values.headersJson?JSON.stringify(values.paramsJson):null;
+    try {
+      if (!!values.body){
+        try {
+          if (typeof JSON.parse(values.body)!='object'){
+            $message.createMessage.error("JSON格式化错误,请检查输入数据");
+            return;
+          }
+        } catch (e) {
+          $message.createMessage.error("JSON格式化错误,请检查输入数据");
+          return;
+        }
+      }
+      setModalProps({ confirmLoading: true });
+      values.headersJson = headersJson
+      values.paramsJson = paramsJson
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /** 时间和数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/openapi/subTables/OpenApiHeaderSubTable.vue b/src/views/openapi/subTables/OpenApiHeaderSubTable.vue
new file mode 100644
index 0000000..5856754
--- /dev/null
+++ b/src/views/openapi/subTables/OpenApiHeaderSubTable.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+      <!--引用表格-->
+     <BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="openApiHeaderColumns" :dataSource="dataSource" :pagination="false">
+        <!--字段回显插槽-->
+        <template v-slot:bodyCell="{ column, record, index, text }">
+        </template>
+      </BasicTable>
+    </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref,watchEffect} from 'vue';
+  import {BasicTable} from '/@/components/Table';
+  import {openApiHeaderColumns} from '../OpenApi.data';
+  import {openApiHeaderList} from '../OpenApi.api';
+  import { downloadFile } from '/@/utils/common/renderUtils';
+
+  const props = defineProps({
+    id: {
+       type: String,
+       default: '',
+     },
+  })
+
+  const loading = ref(false);
+  const dataSource = ref([]);
+
+  watchEffect(() => {
+      props.id && loadData(props.id);
+   });
+
+   function loadData(id) {
+         dataSource.value = []
+         loading.value = true
+          openApiHeaderList({id}).then((res) => {
+           if (res.success) {
+              dataSource.value = res.result.records
+           }
+         }).finally(() => {
+           loading.value = false
+         })
+    }
+</script>
diff --git a/src/views/openapi/subTables/OpenApiParamSubTable.vue b/src/views/openapi/subTables/OpenApiParamSubTable.vue
new file mode 100644
index 0000000..b7e4ad6
--- /dev/null
+++ b/src/views/openapi/subTables/OpenApiParamSubTable.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+      <!--引用表格-->
+     <BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="openApiParamColumns" :dataSource="dataSource" :pagination="false">
+        <!--字段回显插槽-->
+        <template v-slot:bodyCell="{ column, record, index, text }">
+        </template>
+      </BasicTable>
+    </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref,watchEffect} from 'vue';
+  import {BasicTable} from '/@/components/Table';
+  import {openApiParamColumns} from '../OpenApi.data';
+  import {openApiParamList} from '../OpenApi.api';
+  import { downloadFile } from '/@/utils/common/renderUtils';
+
+  const props = defineProps({
+    id: {
+       type: String,
+       default: '',
+     },
+  })
+
+  const loading = ref(false);
+  const dataSource = ref([]);
+
+  watchEffect(() => {
+      props.id && loadData(props.id);
+   });
+
+   function loadData(id) {
+         dataSource.value = []
+         loading.value = true
+          openApiParamList({id}).then((res) => {
+           if (res.success) {
+              dataSource.value = res.result.records
+           }
+         }).finally(() => {
+           loading.value = false
+         })
+    }
+</script>
diff --git a/src/views/report/chartdemo/chartdemo.data.ts b/src/views/report/chartdemo/chartdemo.data.ts
new file mode 100644
index 0000000..23d3db5
--- /dev/null
+++ b/src/views/report/chartdemo/chartdemo.data.ts
@@ -0,0 +1,52 @@
+const colors = ['#4db6ac', '#ffb74d', '#64b5f6', '#e57373', '#9575cd', '#a1887f', '#90a4ae', '#4dd0e1', '#81c784', '#ff8a65'];
+export const getData = (() => {
+  let dottedBase = +new Date();
+  const barDataSource: any[] = [];
+  const barMultiData: any[] = [];
+  const barLineData: any[] = [];
+  const barLineColors: any[] = [];
+
+  for (let i = 0; i < 20; i++) {
+    let obj = { name: '', value: 0 };
+    const date = new Date((dottedBase += 1000 * 3600 * 24));
+    obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
+    obj.value = Math.random() * 200;
+    barDataSource.push(obj);
+  }
+
+  for (let j = 0; j < 2; j++) {
+    for (let i = 0; i < 20; i++) {
+      let obj = { name: '', value: 0, type: 2010 + j + '' };
+      const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
+      obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
+      obj.value = Math.random() * 200;
+      barMultiData.push(obj);
+    }
+  }
+  const pieData = [
+    { value: 335, name: '客服电话' },
+    { value: 310, name: '奥迪官网' },
+    { value: 234, name: '媒体曝光' },
+    { value: 135, name: '质检总局' },
+    { value: 105, name: '其他' },
+  ];
+  const radarData = [
+    { value: 75, name: '政治', type: '文综', max: 100 },
+    { value: 65, name: '历史', type: '文综', max: 100 },
+    { value: 55, name: '地理', type: '文综', max: 100 },
+    { value: 74, name: '化学', type: '文综', max: 100 },
+    { value: 38, name: '物理', type: '文综', max: 100 },
+    { value: 88, name: '生物', type: '文综', max: 100 },
+  ];
+  for (let j = 0; j < 2; j++) {
+    for (let i = 0; i < 15; i++) {
+      let obj = { name: '', value: 0, type: 2010 + j + '', seriesType: j >= 1 ? 'line' : 'bar' };
+      const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
+      obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
+      obj.value = Math.random() * 200;
+      barLineData.push(obj);
+    }
+    barLineColors.push(colors[j]);
+  }
+  return { barDataSource, barMultiData, pieData, barLineData, barLineColors,radarData };
+})();
diff --git a/src/views/report/chartdemo/index.vue b/src/views/report/chartdemo/index.vue
new file mode 100644
index 0000000..df304ef
--- /dev/null
+++ b/src/views/report/chartdemo/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
+        <a-tab-pane key="1" tab="柱状图">
+          <a-row>
+            <a-col :span="24">
+              <Bar :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></Bar>
+            </a-col>
+            <!-- <a-col :span="7" style="margin-left:50px" >
+                            配置项：
+                            <textarea rows="18" style="width: 500px">{{ barDataSource }}</textarea>
+                        </a-col>-->
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="多列柱状图" force-render>
+          <BarMulti :chartData="barMultiData" :option="multiBarOption" height="50vh"></BarMulti>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="迷你柱状图" style="display: flex; justify-content: center">
+          <Bar :chartData="barDataSource" width="30%" height="50vh"></Bar>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="面积图">
+          <SingleLine :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></SingleLine>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="迷你面积图" style="display: flex; justify-content: center">
+          <SingleLine :chartData="barDataSource" width="30%" height="50vh"></SingleLine>
+        </a-tab-pane>
+        <a-tab-pane key="6" tab="多行折线图">
+          <LineMulti :chartData="barMultiData" height="50vh" :option="multiBarOption" type="line"></LineMulti>
+        </a-tab-pane>
+        <a-tab-pane key="7" tab="饼图">
+          <pie :chartData="pieData" height="40vh" :option="{ title: { text: '基础饼状图', left: 'center' } }" />
+        </a-tab-pane>
+        <a-tab-pane key="8" tab="雷达图">
+          <Radar :chartData="radarData" height="50vh"></Radar>
+        </a-tab-pane>
+        <a-tab-pane key="9" tab="仪表盘">
+          <Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge>
+        </a-tab-pane>
+        <a-tab-pane key="10" tab="折柱图">
+          <BarAndLine :chartData="barLineData" :customColor="barLineColors" height="50vh"></BarAndLine>
+        </a-tab-pane>
+        <a-tab-pane key="11" tab="排名列表">
+          <RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList>
+        </a-tab-pane>
+        <a-tab-pane key="13" tab="趋势">
+          <trend title="Trend" term="Trend：" :percentage="30" />
+        </a-tab-pane>
+        <!--暂无-->
+        <!-- <a-tab-pane key="14" tab="进度条">
+                    <Bar :option="{xAxis:{show:false},yAxis:{show:false}}" :chartData="chartData" width="100px" height="50px"></Bar>
+                </a-tab-pane>-->
+        <!--<a-tab-pane key="15" tab="水波图"></a-tab-pane>-->
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { getData } from './chartdemo.data.ts';
+  import Bar from '/@/components/chart/Bar.vue';
+  import BarMulti from '/@/components/chart/BarMulti.vue';
+  import SingleLine from '/@/components/chart/SingleLine.vue';
+  import LineMulti from '/@/components/chart/LineMulti.vue';
+  import Pie from '/@/components/chart/Pie.vue';
+  import Radar from '/@/components/chart/Radar.vue';
+  import Gauge from '/@/components/chart/Gauge.vue';
+  import RankList from '/@/components/chart/RankList.vue';
+  import Trend from '/@/components/chart/Trend.vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+
+  const activeKey = ref('1');
+  const { barDataSource, barMultiData, pieData, barLineData, radarData,barLineColors } = getData;
+  const multiBarOption = {
+    title: { text: '多列柱状图', left: 'center' },
+  };
+  const rankList = loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店');
+  //tab切换
+  function tabChange(key) {
+    console.log('切换的key:', key);
+  }
+  function loadData(x, y, max, min, before = '', after = '月') {
+    let data = [];
+    for (let i = 0; i < 12; i += 1) {
+      data.push({
+        [x]: `${before}${i + 1}${after}`,
+        [y]: Math.floor(Math.random() * max) + min,
+      });
+    }
+    return data;
+  }
+</script>
diff --git a/src/views/report/statisticst/index.vue b/src/views/report/statisticst/index.vue
new file mode 100644
index 0000000..673a5d6
--- /dev/null
+++ b/src/views/report/statisticst/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="p-4">
+    <a-card :bordered="false" style="height: 100%">
+      <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
+        <a-tab-pane key="bar" tab="柱状图">
+          <a-row>
+            <a-col :span="10">
+              <a-radio-group v-model:value="barType" @change="statisticst">
+                <a-radio-button value="year">按年统计</a-radio-button>
+                <a-radio-button value="month">按月统计</a-radio-button>
+                <a-radio-button value="category">按类别统计</a-radio-button>
+                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
+              </a-radio-group>
+            </a-col>
+          </a-row>
+          <Bar :chartData="dataSource" height="50vh"></Bar>
+        </a-tab-pane>
+        <a-tab-pane key="pie" tab="饼状图" force-render>
+          <a-row :gutter="24">
+            <a-col :span="10">
+              <a-radio-group v-model:value="pieType" @change="statisticst">
+                <a-radio-button value="year">按年统计</a-radio-button>
+                <a-radio-button value="month">按月统计</a-radio-button>
+                <a-radio-button value="category">按类别统计</a-radio-button>
+                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
+              </a-radio-group>
+            </a-col>
+            <Pie :chartData="dataSource" height="40vh"></Pie>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { defHttp } from '/@/utils/http/axios';
+  import { ref, unref, reactive } from 'vue';
+  import Bar from '/@/components/chart/Bar.vue';
+  import Pie from '/@/components/chart/Pie.vue';
+
+  const activeKey = ref('bar');
+  const barType = ref('year');
+  const pieType = ref('year');
+  const dataSource = ref([]);
+  const url = reactive({
+    getYearCountInfo: '/mock/api/report/getYearCountInfo',
+    getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
+    getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
+    getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
+  });
+
+  async function loadDate(url, type, params) {
+    const res = await defHttp.get({ url, params }, { isTransformResponse: false, errorMessageMode: 'none' });
+    if (res.success) {
+      dataSource.value = [];
+      switch (type) {
+        case 'year':
+          getYearCountSource(res.result);
+          break;
+        case 'month':
+          getMonthCountSource(res.result);
+          break;
+        case 'category':
+          getCategoryCountSource(res.result);
+          break;
+        case 'cabinet':
+          getCabinetCountSource(res.result);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  function getYearCountSource(data) {
+    for (let i = 0; i < data.length; i++) {
+      dataSource.value.push({
+        name: `${data[i].year}年`,
+        value: data[i].yearcount,
+      });
+    }
+  }
+  function getMonthCountSource(data) {
+    for (let i = 0; i < data.length; i++) {
+      dataSource.value.push({
+        name: `${data[i].month}`,
+        value: data[i].monthcount,
+      });
+    }
+  }
+  function getCategoryCountSource(data) {
+    for (let i = 0; i < data.length; i++) {
+      dataSource.value.push({
+        name: `${data[i].classifyname}`,
+        value: data[i].cntrnocount,
+      });
+    }
+  }
+  function getCabinetCountSource(data) {
+    for (let i = 0; i < data.length; i++) {
+      dataSource.value.push({
+        name: `${data[i].cabinetname}`,
+        value: data[i].cabinetcocunt,
+      });
+    }
+  }
+  // 选择统计类别
+  function statisticst(e) {
+    if (unref(activeKey) === 'pie') {
+      loadDate(getUrl(unref(pieType)), unref(pieType), {});
+    } else {
+      loadDate(getUrl(unref(barType)), unref(barType), {});
+    }
+  }
+
+  function getUrl(type) {
+    if (type === 'year') {
+      return url.getYearCountInfo;
+    }
+    if (type === 'month') {
+      return url.getMonthCountInfo;
+    }
+    if (type === 'category') {
+      return url.getCntrNoCountInfo;
+    }
+    if (type === 'cabinet') {
+      return url.getCabinetCountInfo;
+    }
+  }
+  //tab切换
+  function tabChange(key) {
+    console.log('切换的key:', key);
+  }
+  loadDate(url.getYearCountInfo, 'year', {});
+</script>
diff --git a/src/views/super/airag/aiapp/AiApp.api.ts b/src/views/super/airag/aiapp/AiApp.api.ts
new file mode 100644
index 0000000..4cd6b80
--- /dev/null
+++ b/src/views/super/airag/aiapp/AiApp.api.ts
@@ -0,0 +1,140 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+export enum Api {
+  //知识库管理
+  list = '/airag/app/list',
+  save = '/airag/app/edit',
+  release = '/airag/app/release',
+  delete = '/airag/app/delete',
+  queryById = '/airag/app/queryById',
+  queryBathById = '/airag/knowledge/query/batch/byId',
+  queryKnowledgeById = '/airag/knowledge/queryById',
+  queryFlowById = '/airag/flow/queryById',
+  queryFlowByIds = '/airag/flow/list',
+  promptGenerate = '/airag/app/prompt/generate',
+  generateMemoryByAppId = '/airag/app/prompt/generateMemoryByAppId',
+}
+
+/**
+ * 查询应用
+ * @param params
+ */
+export const appList = (params) => {
+  return defHttp.get({ url: Api.list, params }, { isTransformResponse: false });
+};
+
+/**
+ * 查询知识库
+ * @param params
+ */
+export const queryKnowledgeBathById = (params) => {
+  return defHttp.get({ url: Api.queryBathById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 查询知识库(单条)
+ * @param params
+ */
+export const queryKnowledgeById = (params) => {
+  return defHttp.get({ url: Api.queryKnowledgeById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 根据应用id查询应用
+ * @param params
+ */
+export const queryById = (params) => {
+  return defHttp.get({ url: Api.queryById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 新增应用
+ * @param params
+ */
+export const saveApp = (params) => {
+  return defHttp.put({ url: Api.save, params });
+};
+
+// 发布应用
+export function releaseApp(appId: string, release = false) {
+  return defHttp.post({
+    url: Api.release,
+    params: {
+      id: appId,
+      release: release,
+    }
+  }, {joinParamsToUrl: true});
+}
+
+/**
+ * 删除应用
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteApp = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除名称为'+params.name+'的应用吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+
+/**
+ * 根据应用id查询流程
+ * @param params
+ */
+export const queryFlowById = (params) => {
+  return defHttp.get({ url: Api.queryFlowById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 根据应用id查询流程
+ * @param params
+ */
+export const queryFlowByIds = (params) => {
+  return defHttp.get({ url: Api.queryFlowByIds, params }, { isTransformResponse: false });
+};
+
+/**
+ * 应用编排
+ * @param params
+ */
+export const promptGenerate = (params) => {
+  return defHttp.post(
+    {
+      url: Api.promptGenerate+'?prompt='+ params.prompt,
+      adapter: 'fetch',
+      responseType: 'stream',
+      timeout: 5 * 60 * 1000,
+    },
+    {
+      isTransformResponse: false,
+    }
+  );
+};
+
+/**
+ * 应用编排
+ * @param params
+ */
+export const generateMemoryByAppId = (params) => {
+  return defHttp.post(
+    {
+      url: Api.generateMemoryByAppId+'?variables='+ params.variables + '&memoryId='+ params.memoryId,
+      adapter: 'fetch',
+      responseType: 'stream',
+      timeout: 60 * 60 * 1000,
+    },
+    {
+      isTransformResponse: false,
+    }
+  );
+};
diff --git a/src/views/super/airag/aiapp/AiApp.data.ts b/src/views/super/airag/aiapp/AiApp.data.ts
new file mode 100644
index 0000000..c4843f4
--- /dev/null
+++ b/src/views/super/airag/aiapp/AiApp.data.ts
@@ -0,0 +1,88 @@
+import { FormSchema } from '@/components/Form';
+
+/**
+ * 表单
+ */
+export const formSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '应用名称',
+    field: 'name',
+    required: true,
+    componentProps: {
+      //是否展示字数
+      showCount: true,
+      maxlength: 64,
+    },
+    component: 'Input',
+  },
+  {
+    label: '应用描述',
+    field: 'descr',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '描述该应用的应用场景及用途',
+      rows: 4,
+      //是否展示字数
+      showCount: true,
+      maxlength: 256,
+    },
+  },
+  {
+    label: '应用图标',
+    field: 'icon',
+    component: 'JImageUpload',
+  },
+  {
+    label: '选择应用类型',
+    field: 'type',
+    component: 'Input',
+    show:({ values })=>{
+      return !values.id;
+    },
+    slot: 'typeSlot',
+  },
+];
+
+/**
+ * 快捷指令表单
+ */
+export const quickCommandFormSchema: FormSchema[] = [
+  {
+    label: 'key',
+    field: 'key',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '按钮名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      showCount: true,
+      maxLength: 10,
+    },
+  },
+  {
+    label: '按钮图标',
+    field: 'icon',
+    component: 'IconPicker',
+  },
+  {
+    label: '指令内容',
+    field: 'descr',
+    required: true,
+    component: 'InputTextArea',
+    componentProps: {
+      autosize: { minRows: 4, maxRows: 4 },
+      showCount: true,
+      maxLength: 100,
+    }
+  },
+];
diff --git a/src/views/super/airag/aiapp/AiAppList.vue b/src/views/super/airag/aiapp/AiAppList.vue
new file mode 100644
index 0000000..a20594b
--- /dev/null
+++ b/src/views/super/airag/aiapp/AiAppList.vue
@@ -0,0 +1,600 @@
+<!--知识库文档列表-->
+<template>
+  <div class="knowledge">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form
+        ref="formRef"
+        @keyup.enter.native="searchQuery"
+        :model="queryParam"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+        style="background-color: #f7f8fc"
+      >
+        <a-row :gutter="24">
+          <a-col :xl="7" :lg="7" :md="8" :sm="24">
+            <a-form-item name="name" label="应用名称">
+              <JInput v-model:value="queryParam.name" placeholder="请输入应用名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="7" :lg="7" :md="8" :sm="24">
+            <a-form-item name="type" label="应用类型">
+              <j-dict-select-tag v-model:value="queryParam.type" dict-code="ai_app_type" placeholder="请选择应用类型" />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-row :span="24" class="knowledge-row">
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
+        <a-card class="add-knowledge-card" @click="handleCreateApp">
+          <div class="flex">
+            <Icon icon="ant-design:plus-outlined" class="add-knowledge-card-icon" size="20"></Icon>
+            <span class="add-knowledge-card-title">创建应用</span>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in knowledgeAppDataList">
+        <a-card class="knowledge-card pointer" @click="handleEditClick(item)">
+          <div class="flex">
+            <img class="header-img" :src="getImage(item.icon)" />
+            <div class="header-text">
+              <span class="header-text-top header-name ellipsis"> {{ item.name }} </span>
+              <span class="header-text-top header-create ellipsis">
+                <a-tag v-if="item.status === 'release'" color="green">已发布</a-tag>
+                <a-tag v-if="item.status === 'disable'">已禁用</a-tag>
+                <span>创建者：{{ item.createBy_dictText || item.createBy }}</span>
+              </span>
+            </div>
+          </div>
+          <div class="header-tag">
+            <a-tag color="#EBF1FF" style="margin-right: 0" v-if="item.type === 'chatSimple'">
+              <span style="color: #3370ff">智能体</span>
+            </a-tag>
+            <a-tag color="#FDF6EC" style="margin-right: 0" v-if="item.type === 'chatFLow'">
+              <span style="color: #e6a343">高级编排</span>
+            </a-tag>
+          </div>
+          <div class="card-description">
+            <span>{{ item.descr || '暂无描述' }}</span>
+          </div>
+          <div class="card-footer">
+            <a-tooltip title="演示">
+              <div class="card-footer-icon" @click.prevent.stop="handleViewClick(item.id)">
+                <Icon class="operation" icon="ant-design:youtube-outlined" size="18" 
+                      color="#1F2329"></Icon>
+              </div>
+            </a-tooltip>
+            <template v-if="item.status !== 'release'">
+              <a-divider type="vertical" style="float: left" />
+              <a-tooltip title="删除">
+                <div class="card-footer-icon" @click.prevent.stop="handleDeleteClick(item)">
+                  <Icon icon="ant-design:delete-outlined" class="operation" size="16" 
+                        color="#1F2329"></Icon>
+                </div>
+              </a-tooltip>
+            </template>
+            <a-divider type="vertical" style="float: left" />
+            <a-tooltip title="发布">
+              <a-dropdown class="card-footer-icon" placement="bottomRight" :trigger="['click']">
+                <div @click.prevent.stop>
+                  <Icon style="position: relative;top: 1px" icon="ant-design:send-outlined" 
+                        size="14" color="#1F2329"></Icon>
+                </div>
+                <template #overlay>
+                  <a-menu>
+                    <template v-if="item.status === 'enable'">
+                      <a-menu-item key="release" @click.prevent.stop="handleSendClick(item,'release')">
+                        <Icon icon="lineicons:rocket-5" size="14"></Icon>
+                        发布
+                      </a-menu-item>
+                      <a-menu-divider/>
+                    </template>
+                    <template v-else-if="item.status === 'release'">
+                      <a-menu-item key="un-release" @click.prevent.stop="handleSendClick(item,'un-release')">
+                        <Icon icon="tabler:rocket-off" size="14"></Icon>
+                        取消发布
+                      </a-menu-item>
+                      <a-menu-divider/>
+                    </template>
+                    <a-menu-item key="web" @click.prevent.stop="handleSendClick(item,'web')">
+                      <Icon icon="ant-design:dribbble-outlined" size="16"></Icon>
+                      嵌入网站
+                    </a-menu-item>
+                    <a-menu-item v-if="isShowMenu" key="menu" @click.prevent.stop="handleSendClick(item,'menu')">
+                      <Icon icon="ant-design:menu-outlined" size="16"></Icon> 配置菜单
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </a-tooltip>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="knowledgeAppDataList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+      :show-total="() => `共${total}条` "
+    />
+    <!-- Ai新增弹窗  -->
+    <AiAppModal @register="registerModal" @success="handleSuccess"></AiAppModal>
+    <!-- Ai设置弹窗 -->
+    <AiAppSettingModal @register="registerSettingModal" @success="reload"></AiAppSettingModal>
+    <!-- 发布弹窗 -->
+    <AiAppSendModal @register="registerAiAppSendModal"/>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, onMounted } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { Avatar, Modal, Pagination } from 'ant-design-vue';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import defaultImg from './img/ailogo.png';
+  import AiAppModal from './components/AiAppModal.vue';
+  import AiAppSettingModal from './components/AiAppSettingModal.vue';
+  import AiAppSendModal from './components/AiAppSendModal.vue';
+  import Icon from '@/components/Icon';
+  import { $electron } from "@/electron";
+  import { appList, deleteApp, releaseApp } from './AiApp.api';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { useRouter } from "vue-router";
+
+  export default {
+    name: 'AiAppList',
+    components: {
+      JDictSelectTag,
+      JInput,
+      AiAppSendModal,
+      Icon,
+      Pagination,
+      Avatar,
+      LoadingOutlined,
+      BasicModal,
+      AiAppModal,
+      AiAppSettingModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      /**
+       * 创建应用的集合
+       */
+      const knowledgeAppDataList = ref<any>([]);
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //注册modal
+      const [registerModal, { openModal }] = useModal();
+      const [registerSettingModal, { openModal: openAppModal }] = useModal();
+      const [registerAiAppSendModal, { openModal: openAiAppSendModal }] = useModal();
+      const { createMessage, createConfirmSync } = useMessage();
+      //查询参数
+      const queryParam = reactive<any>({});
+      //查询区域label宽度
+      const labelCol = reactive({
+        xs: 24,
+        sm: 4,
+        xl: 6,
+        xxl: 6,
+      });
+      //查询区域组件宽度
+      const wrapperCol = reactive({
+        xs: 24,
+        sm: 20,
+      });
+      //表单的ref
+      const formRef = ref();
+
+      reload();
+
+      /**
+       * 加载数据
+       */
+      function reload() {
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          column: 'createTime',
+          order: 'desc',
+        };
+        Object.assign(params, queryParam);
+        appList(params).then((res) => {
+          if (res.success) {
+            knowledgeAppDataList.value = res.result.records;
+            total.value = res.result.total;
+          } else {
+            knowledgeAppDataList.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      /**
+       * 创建应用
+       */
+      function handleCreateApp() {
+        openModal(true, {});
+      }
+
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        reload();
+      }
+
+      /**
+       * 成功
+       */
+      function handleSuccess(id) {
+        reload();
+        //打开编辑弹窗
+        openAppModal(true, {
+          isUpdate: false,
+          id: id,
+        });
+      }
+
+      /**
+       * 获取图片
+       * @param url
+       */
+      function getImage(url) {
+        return url ? getFileAccessHttpUrl(url) : defaultImg;
+      }
+
+      /**
+       * 编辑
+       * @param item
+       */
+      function handleEditClick(item) {
+        console.log('item:::', item);
+        openAppModal(true, {
+          isUpdate: true,
+          ...item,
+        });
+      }
+
+      /**
+       * 演示
+       */
+      function handleViewClick(id: string) {
+        let url = '/ai/app/chat/' + id;
+
+        // update-begin--author:sunjianlei---date:20250411---for：【QQYUN-9685】构建 electron 桌面应用
+        if ($electron.isElectron()) {
+          url = $electron.resolveRoutePath(url);
+          window.open(url, '_blank', 'width=1200,height=800');
+          return
+        }
+        // update-end----author:sunjianlei---date:20250411---for：【QQYUN-9685】构建 electron 桌面应用
+
+        window.open(url, '_blank');
+      }
+
+      /**
+       * 删除
+       */
+      function handleDeleteClick(item) {
+        if(knowledgeAppDataList.value.length == 1 && pageNo.value > 1) {
+          pageNo.value = pageNo.value - 1;
+        }
+        deleteApp({ id: item.id, name: item.name }, reload);
+      }
+
+      /**
+       * 发布点击事件
+       * @param item 数据
+       * @param type 类别
+       */
+      function handleSendClick(item,type) {
+        if (type === 'release' || type === 'un-release') {
+          return onRelease(item);
+        }
+
+        openAiAppSendModal(true,{
+          type: type,
+          data: item
+        })
+      }
+
+      async function onRelease(item) {
+        const toRelease = item.status === 'enable';
+        let flag = await createConfirmSync({
+          title: toRelease ? '发布应用' : '取消发布应用',
+          content: toRelease ? '确定要发布应用吗？发布后将不允许修改应用。' : '确定要取消发布应用吗？',
+          okText: '确定',
+          cancelText: '取消',
+        });
+        if (!flag) {
+          return
+        }
+        doRelease(item, item.status === 'enable');
+      }
+
+      /**
+       * 发布
+       */
+      async function doRelease(item, release: boolean) {
+        let success: boolean = await releaseApp(item.id, release);
+        if (success) {
+          // 发布成功
+          if (release) {
+            item.status = 'release'
+          } else {
+            item.status = 'enable'
+          }
+        }
+      }
+
+      /**
+       * 重置
+       */
+      function searchReset() {
+        pageNo.value = 1;
+        formRef.value.resetFields();
+        queryParam.name = '';
+        //刷新数据
+        reload();
+      }
+
+      /**
+       * 查询
+       */
+      function searchQuery(){
+        pageNo.value = 1; 
+        //刷新数据
+        reload();
+      }
+
+      const router = useRouter();
+      //是否显示菜单配置选项
+      const isShowMenu = ref<boolean>(false);
+      onMounted((()=>{
+        let fullPath = router.currentRoute.value.fullPath;
+        console.log(fullPath)
+        if(fullPath === '/myapps/ai/app'){
+          isShowMenu.value = false;
+        } else {
+          isShowMenu.value = true;
+        }
+      }))
+
+      return {
+        handleCreateApp,
+        knowledgeAppDataList,
+        pageNo,
+        pageSize,
+        total,
+        pageSizeOptions,
+        handlePageChange,
+        cardBodyStyle: { textAlign: 'left', width: '100%' },
+        registerModal,
+        handleSuccess,
+        getImage,
+        handleEditClick,
+        handleViewClick,
+        handleDeleteClick,
+        registerSettingModal,
+        reload,
+        queryParam,
+        labelCol,
+        wrapperCol,
+        handleSendClick,
+        registerAiAppSendModal,
+        searchReset,
+        formRef,
+        isShowMenu,
+        searchQuery,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .knowledge {
+    height: calc(100vh - 115px);
+    background: #f7f8fc;
+    padding: 24px;
+    overflow-y: auto;
+  }
+
+  .add-knowledge-card {
+    margin-bottom: 20px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    cursor: pointer;
+    height: 152px;
+    width: calc(100% - 20px);
+    .add-knowledge-card-icon {
+      padding: 8px;
+      color: #1f2329;
+      background-color: #f5f6f7;
+      margin-right: 12px;
+    }
+    .add-knowledge-card-title {
+      font-size: 16px;
+      color:#1f2329;
+      font-weight: 400;
+      align-self: center;
+    }
+  }
+
+  .knowledge-card {
+    border-radius: 10px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    height: 152px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    .header-img {
+      width: 25px;
+      height: 25px;
+      border-radius: 0.5rem;
+    }
+    .header-text {
+      margin-left: 5px;
+      position: relative;
+      font-size: 14px;
+      display: grid;
+      width: calc(100% - 100px);
+      .header-name {
+        font-weight: bold;
+        color: #354052;
+      }
+      .header-create {
+        font-size: 12px;
+        color: #646a73;
+      }
+    }
+    .header-tag {
+      position: absolute;
+      right: 4px;
+      top: 6px;
+    }
+  }
+
+  .add-knowledge-card,
+  .knowledge-card {
+    transition: box-shadow 0.3s ease;
+  }
+
+  .add-knowledge-card:hover,
+  .knowledge-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+  }
+
+  .knowledge-row {
+    max-height: calc(100% - 100px);
+    margin-top: 20px;
+    overflow-y: auto;
+  }
+
+  .add-knowledge-doc {
+    margin-top: 6px;
+    color: #6f6f83;
+    font-size: 13px;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    span {
+      margin-left: 4px;
+      line-height: 28px;
+    }
+  }
+  .add-knowledge-doc:hover {
+    background: #c8ceda33;
+  }
+  .card-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    height: 4.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+    margin-top: 10px;
+    text-align: left;
+    font-size: 12px;
+    color: #676f83;
+  }
+  .card-footer {
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    min-height: 30px;
+    padding: 0 16px;
+    width: 100%;
+    align-items: center;
+    display: flex;
+  }
+
+  .card-footer-icon {
+    font-size: 14px;
+    height: 24px;
+    padding: 0 7px;
+    border-radius: 4px;
+    text-align: center;
+    align-content: center;
+    float: left;
+    width: 36px;
+  }
+
+  .card-footer-icon:hover {
+    color: #000000;
+    background-color: #e9ecf2;
+    border: none;
+  }
+
+  .operation {
+    position: relative;
+    top: 2px;
+  }
+  .list-footer {
+    text-align: right;
+    margin-top: 5px;
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+  .ellipsis{
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+  }
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    :deep(.ant-form) {
+      background-color: transparent;
+    }
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+  }
+</style>
+<style lang="less">
+  .airag-knowledge-doc .scroll-container {
+    padding: 0 !important;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/AiChat.vue b/src/views/super/airag/aiapp/chat/AiChat.vue
new file mode 100644
index 0000000..c48a838
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/AiChat.vue
@@ -0,0 +1,551 @@
+<template>
+  <div ref="chatContainerRef" class="chat-container" :style="chatContainerStyle">
+    <template v-if="dataSource">
+      <div v-if="isMultiSession" class="leftArea" :class="[expand ? 'expand' : 'shrink']">
+        <div class="content">
+          <slide :source="source" v-if="uuid" :dataSource="dataSource" @save="handleSave" :prologue="prologue" :appData="appData" @click="handleChatClick"></slide>
+        </div>
+        <div class="toggle-btn" @click="handleToggle">
+          <span class="icon">
+            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </span>
+        </div>
+      </div>
+      <div class="rightArea" :class="[expand ? 'expand' : 'shrink']">
+        <chat
+          url="/airag/chat/send"
+          v-if="uuid && chatVisible"
+          :uuid="uuid"
+          :historyData="chatData"
+          type="view"
+          @save="handleSave"
+          :formState="appData"
+          :prologue="prologue"
+          :presetQuestion="presetQuestion"
+          @reload-message-title="reloadMessageTitle"
+          :chatTitle="chatTitle"
+          :quickCommandData="quickCommandData"
+          :showAdvertising = "showAdvertising"
+          :hasExtraFlowInputs="hasExtraFlowInputs"
+          :conversationSettings="getCurrentSettings"
+          @edit-settings="handleEditSettings"
+          ref="chatRef"
+        ></chat>
+      </div>
+      <!-- [issues/8545]新建AI应用的时候只能选择没有自定义参数的AI流程 -->
+      <ConversationSettingsModal
+        ref="settingsModalRef"
+        :flowInputs="flowInputs"
+        :conversationId="uuid"
+        :existingSettings="getCurrentSettings"
+        @ok="handleSettingsOk"
+      />
+    </template>
+    <Loading :loading="loading" tip="加载中，请稍后"></Loading>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import slide from './slide.vue';
+  import chat from './chat.vue';
+  import ConversationSettingsModal from './components/ConversationSettingsModal.vue';
+  import { Spin, message } from 'ant-design-vue';
+  import { ref, watch, nextTick, onUnmounted, onMounted, computed } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { JEECG_CHAT_KEY } from '/@/enums/cacheEnum';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useRouter } from 'vue-router';
+  import { useAppInject } from "@/hooks/web/useAppInject";
+  import Loading from '@/components/Loading/src/Loading.vue';
+
+  const router = useRouter();
+  const userId = useUserStore().getUserInfo?.id;
+  const localKey = JEECG_CHAT_KEY + userId;
+  let timer: any = null;
+  let unwatch01: any = null;
+  const dataSource = ref<any>({});
+  const uuid = ref<string>('');
+  const chatData = ref<any>([]);
+  const expand = ref<any>(true);
+  const chatVisible = ref(true);
+  const chatContainerRef = ref<any>(null);
+  const chatContainerStyle = ref({});
+  //左侧聊天信息
+  const chatTitle = ref<string>('');
+  //左侧聊天点击的坐标
+  const chatActiveKey = ref<number>(0);
+  //预置开场白
+  const presetQuestion = ref<string>('');
+  //加载
+  const loading = ref<any>(true);
+
+  const handleToggle = () => {
+    expand.value = !expand.value;
+  };
+  //应用id
+  const appId = ref<string>('');
+  //应用数据
+  const appData = ref<any>({});
+  //开场白
+  const prologue = ref<string>('');
+  //快捷指令
+  const quickCommandData = ref<any>([]);
+  //是否显示广告位
+  const showAdvertising = ref<boolean>(false);
+  //对话设置弹窗ref
+  const settingsModalRef = ref();
+  //工作流入参列表
+  const flowInputs = ref<any[]>([]);
+  //当前会话的设置
+  const conversationSettings = ref<Record<string, Record<string, any>>>({});
+
+  const priming = () => {
+    dataSource.value = {
+      active: '1002',
+      usingContext: true,
+      history: [{ id: '1002', title: '新建聊天', isEdit: false, disabled: true }],
+    };
+    chatTitle.value = '新建聊天';
+    chatActiveKey.value = 0;
+  };
+
+  const handleSave = () => {
+    // 删除标签或清空内容之后的保存
+    //save(dataSource.value);
+    setTimeout(() => {
+      // 删除标签或清空内容也会触发watch保存，此时不需watch保存需清除
+      //clearTimeout(timer);
+    }, 50);
+  };
+
+  /**
+   * 检查是否有额外的工作流入参
+   * for [issues/8545]新建AI应用的时候只能选择没有自定义参数的AI流程
+    */
+  const hasExtraFlowInputs = computed(() => {
+    if (!appData.value || !appData.value.metadata) {
+      return false;
+    }
+    try {
+      const metadata = typeof appData.value.metadata === 'string' 
+        ? JSON.parse(appData.value.metadata) 
+        : appData.value.metadata;
+      const flowInputsList = metadata.flowInputs || [];
+      
+      // 过滤掉固定参数
+      const fixedParams = ['history', 'content', 'images'];
+      const extraInputs = flowInputsList.filter((input: any) => !fixedParams.includes(input.field));
+      
+      return extraInputs.length > 0;
+    } catch (e) {
+      console.error('解析metadata失败', e);
+      return false;
+    }
+  });
+
+  // 检查是否有必填的额外参数
+  const hasRequiredFlowInputs = computed(() => {
+    if (!appData.value || !appData.value.metadata) {
+      return false;
+    }
+    try {
+      const metadata = typeof appData.value.metadata === 'string' 
+        ? JSON.parse(appData.value.metadata) 
+        : appData.value.metadata;
+      const flowInputsList = metadata.flowInputs || [];
+      
+      // 过滤掉固定参数，且必须是必填的
+      const fixedParams = ['history', 'content', 'images'];
+      const requiredInputs = flowInputsList.filter((input: any) => 
+        !fixedParams.includes(input.field) && input.required
+      );
+      
+      return requiredInputs.length > 0;
+    } catch (e) {
+      console.error('解析metadata失败', e);
+      return false;
+    }
+  });
+
+  // 监听appData变化，更新flowInputs
+  watch(
+    () => appData.value,
+    (val) => {
+      if (!val || !val.metadata) {
+        flowInputs.value = [];
+        return;
+      }
+      try {
+        const metadata = typeof val.metadata === 'string' 
+          ? JSON.parse(val.metadata) 
+          : val.metadata;
+        flowInputs.value = metadata.flowInputs || [];
+      } catch (e) {
+        console.error('解析metadata失败', e);
+        flowInputs.value = [];
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
+  // 获取当前会话的设置
+  const getCurrentSettings = computed(() => {
+    return conversationSettings.value[uuid.value] || {};
+  });
+
+  // 编辑对话设置
+  function handleEditSettings() {
+    if (settingsModalRef.value) {
+      settingsModalRef.value.open();
+    }
+  }
+
+  // 保存对话设置
+  function handleSettingsOk(data: Record<string, any>) {
+    // 保存到本地状态（会在发送消息时传给后端）
+    conversationSettings.value[uuid.value] = data;
+    message.success('对话设置已保存');
+    
+    nextTick(() => {
+      chatVisible.value = true;
+    });
+  }
+
+  // 监听dataSource变化执行操作
+  const execute = () => {
+    unwatch01 = watch(
+      () => dataSource.value.active,
+      (value) => {
+        if (value) {
+          if (value == '1002') {
+            uuid.value = '1002';
+            chatData.value = [];
+            chatTitle.value = "新建聊天";
+            chatVisible.value = false;
+            nextTick(() => {
+              chatVisible.value = true;
+              // 新会话且有必填参数，弹出设置弹窗
+              if (hasRequiredFlowInputs.value && !conversationSettings.value['1002']) {
+                if (settingsModalRef.value) {
+                  settingsModalRef.value.open();
+                }
+              }
+            });
+            return;
+          }
+          //update-begin---author:wangshuai---date:2025-03-14---for:【QQYUN-11421】聊天，删除会话后，聊天切换到新的会话，但是聊天标题没有变---
+          let values = dataSource.value.history.filter((item) => item.id === value);
+          if(values && values.length>0){
+            chatTitle.value = values[0]?.title
+          }
+          //update-end---author:wangshuai---date:2025-03-14---for:【QQYUN-11421】聊天，删除会话后，聊天切换到新的会话，但是聊天标题没有变---
+          //根据选中的id查询聊天内容
+          let params = { conversationId: value };
+          uuid.value = value;
+          defHttp.get({ url: '/airag/chat/messages', params }, { isTransformResponse: false }).then((res) => {
+            if (res.success) {
+              // 处理新的返回格式（包含messages和flowInputs）
+              if (res.result && res.result.messages) {
+                chatData.value = res.result.messages;
+                // 加载已保存的设置
+                if (res.result.flowInputs) {
+                  conversationSettings.value[value] = res.result.flowInputs;
+                }
+              } else if (Array.isArray(res.result)) {
+                // 兼容旧格式
+                chatData.value = res.result;
+              } else {
+                chatData.value = [];
+              }
+            } else {
+              chatData.value = [];
+            }
+            chatVisible.value = false;
+            // 新会话且有必填参数，弹出设置弹窗
+            if (hasRequiredFlowInputs.value && !conversationSettings.value[value]) {
+              if (settingsModalRef.value) {
+                settingsModalRef.value.open();
+              }
+            }else{
+              nextTick(() => {
+                chatVisible.value = true;
+              });
+            }
+          });
+        }else{
+          chatData.value = [];
+          chatTitle.value = "";
+        }
+      },
+      { immediate: true }
+    );
+  };
+
+  //是否为多会话模式
+  const isMultiSession = ref<boolean>(true);
+  //是否为手机
+  const { getIsMobile } = useAppInject();
+  //来源
+  const source = ref<string>('');
+  
+  /**
+   * 初始化聊天信息
+   * @param appId
+   */
+  function initChartData(appId = '') {
+    defHttp
+      .get(
+        {
+          url: '/airag/chat/conversations',
+          params: { appId: appId },
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success && res.result && res.result.length > 0) {
+          dataSource.value.history = res.result;
+          dataSource.value.active = res.result[0].id;
+          chatTitle.value = res.result[0].title;
+          chatActiveKey.value = 0;
+        } else {
+          priming();
+        }
+        !unwatch01 && execute();
+      })
+      .catch(() => {
+        priming();
+      }).finally(()=>{
+        loading.value = false
+    });
+  }
+
+  onMounted(() => {
+    loading.value = true;
+    let params: any = router.currentRoute.value.params;
+    if (params.appId) {
+      appId.value = params.appId;
+      getApplicationData(params.appId);
+      initChartData(params.appId);
+    } else {
+      initChartData();
+      appData.value.metadata = { izDraw: '1', defaultSelect: '0' }  
+      quickCommandData.value = [
+          { name: '请介绍一下JeecgBoot', descr: "请介绍一下JeecgBoot" },
+          { name: 'JEECG有哪些优势？', descr: "JEECG有哪些优势？" },
+          { name: 'JEECG可以做哪些事情？', descr: "JEECG可以做哪些事情？" },];
+    }
+    let query: any = router.currentRoute.value.query;
+    source.value = query.source;
+    if(query.source){
+      showAdvertising.value = query.source === 'chatJs';
+    }else{
+      showAdvertising.value = false;
+    }
+  });
+
+  onUnmounted(() => {
+    chatData.value = [];
+    chatTitle.value = "";
+    prologue.value = ""
+    presetQuestion.value = "";
+    quickCommandData.value = [];
+  })
+  
+  /**
+   * 获取应用id
+   *
+   * @param appId
+   */
+  async function getApplicationData(appId) {
+    await defHttp
+      .get(
+        {
+          url: '/airag/chat/init',
+          params: { id: appId },
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success) {
+          appData.value = res.result;
+          if (res.result && res.result.prologue) {
+            prologue.value = res.result.prologue;
+          }  
+          if (res.result && res.result.quickCommand) {
+            quickCommandData.value = JSON.parse(res.result.quickCommand);
+          } 
+          if (res.result && res.result.presetQuestion) {
+            presetQuestion.value = res.result.presetQuestion;
+          }
+          if (res.result && res.result.metadata) {
+            let metadata = JSON.parse(res.result.metadata);
+            //判斷是否为手机模式
+            if(!getIsMobile.value){
+              //是否为多会话模式
+              if((metadata.multiSession && metadata.multiSession === '1') || !metadata.multiSession) {
+                isMultiSession.value = true;
+              } else {
+                isMultiSession.value = false;
+                expand.value = false;
+              }
+            }
+          }
+          if(getIsMobile.value){
+            isMultiSession.value = false;
+            expand.value = false;
+          }
+        } else {
+          appData.value = {};
+        }
+      });
+  }
+
+  /**
+   * 左侧消息列表点击事件
+   * @param title
+   * @param index
+   */
+  function handleChatClick(title, index) {
+    chatTitle.value = title;
+    chatActiveKey.value = index;
+  }
+
+  /**
+   * 重新加载标题消息
+   * @param text
+   */
+  function reloadMessageTitle(text) {
+    let title = dataSource.value.history[chatActiveKey.value].title;
+    if(title === '新建聊天'){
+      dataSource.value.history[chatActiveKey.value].title = text;
+      dataSource.value.history[chatActiveKey.value]['disabled'] = false;
+    }
+
+  }
+  
+  /**
+   * 初始化聊天：用于icon点击
+   */
+  function initChat(value) {
+    appId.value = value;
+    getApplicationData(value);
+    initChartData(value);
+  }
+  
+  defineExpose({
+    initChat
+  })
+
+  onUnmounted(() => {
+    unwatch01 && unwatch01();
+  });
+
+  watch(
+    () => chatContainerRef.value,
+    () => {
+      if(chatContainerRef.value.offsetHeight){
+        chatContainerStyle.value = { height: `${chatContainerRef.value.offsetHeight} px` };
+      }
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  @width: 260px;
+  .chat-container {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background: white;
+    display: flex;
+    overflow: hidden;
+    z-index: 800;
+    border: 1px solid #eeeeee;
+    :deep(.ant-spin) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .leftArea {
+    width: @width;
+    transition: 0.3s left;
+    position: absolute;
+    left: 0;
+    height: 100%;
+
+    .content {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    &.shrink {
+      left: -@width;
+
+      .toggle-btn {
+        .icon {
+          transform: rotate(0deg);
+        }
+      }
+    }
+
+    .toggle-btn {
+      transition:
+        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      color: rgb(51, 54, 57);
+      border: 1px solid rgb(239, 239, 245);
+      background-color: #fff;
+      box-shadow: 0 2px 4px 0px #e7e9ef;
+      transform: translateX(50%) translateY(-50%);
+      z-index: 1;
+    }
+
+    .icon {
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: rotate(180deg);
+      font-size: 18px;
+      height: 18px;
+
+      svg {
+        height: 1em;
+        width: 1em;
+        vertical-align: top;
+      }
+    }
+  }
+
+  .rightArea {
+    margin-left: @width;
+    transition: 0.3s margin-left;
+
+    &.shrink {
+      margin-left: 0;
+    }
+
+    flex: 1;
+    min-width: 0;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/AiChatIcon.vue b/src/views/super/airag/aiapp/chat/AiChatIcon.vue
new file mode 100644
index 0000000..d71047e
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/AiChatIcon.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="footer">
+    <div v-if="!showChat" class="footer-icon" @click="chatClick">
+      <Icon icon="ant-design:comment-outlined" size="22"></Icon>
+    </div>
+    <div v-if="showChat" class="footer-close-icon" @click="chatClick">
+      <Icon icon="ant-design:close-outlined" size="20"></Icon>
+    </div>
+    <div v-if="showChat" class="ai-chat">
+      <AiChat ref="aiChatRef"></AiChat>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import AiChat from './AiChat.vue';
+  import { useRouter } from 'vue-router';
+
+  //aiChat的ref
+  const aiChatRef = ref();
+  //应用id
+  const appId = ref<string>('');
+
+  //是否显示聊天
+  const showChat = ref<any>(false);
+  const router = useRouter();
+  //判断是否为初始化
+  const isInit = ref<boolean>(false);
+  
+  /**
+   * chat图标点击事件
+   */
+  function chatClick() {
+    showChat.value = !showChat.value;
+    if(showChat.value && !isInit.value){
+      setTimeout(()=>{
+        isInit.value = true;
+        aiChatRef.value.initChat(appId.value);
+      },100)
+    }
+  }
+
+  onMounted(() => {
+    let params: any = router.currentRoute.value.params;
+    appId.value = params?.appId;
+    isInit.value = false;
+  });
+</script>
+
+<style scoped lang="less">
+  .footer {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    left: unset;
+    top: unset;
+
+    .footer-icon {
+      cursor: pointer;
+      background-color: #155eef;
+      color: white;
+      border-radius: 100%;
+      padding: 20px;
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: #cccccc 0 4px 8px 0;
+    }
+    .footer-close-icon {
+      color: #0a3069;
+      height: 48px;
+      position: absolute;
+      right: 10px;
+      top: 20px;
+      cursor: pointer;
+      z-index: 9999;
+    }
+    .ai-chat {
+      border: 1px solid #eeeeee;
+      width: calc(100vh - 20px);
+      height: calc(100vh - 200px);
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/ThinkText.vue b/src/views/super/airag/aiapp/chat/ThinkText.vue
new file mode 100644
index 0000000..e57c937
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/ThinkText.vue
@@ -0,0 +1,326 @@
+<template>
+  <div v-if="text != ''" class="textWrap" :class="[inversion === 'user' ? 'self' : 'chatgpt']" ref="textRef">
+    <div :style="{ width: getIsMobile ? screenWidth : 'auto' }">
+      <div class="markdown-body" :class="{ 'markdown-body-generate': loading }" :style="{ color: error ? '#FF4444 !important' : '' }" v-html="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue';
+  import MarkdownIt from 'markdown-it';
+  import './style/github-markdown.less';
+  import './style/highlight.less';
+  import './style/style.less';
+  import { useAppInject } from '@/hooks/web/useAppInject';
+  import hljs from 'highlight.js';
+  import mila from 'markdown-it-link-attributes';
+  import mdKatex from '@traptitech/markdown-it-katex';
+  import { useGlobSetting } from '@/hooks/setting';
+
+  /**
+   * 屏幕宽度
+   */
+  const screenWidth = ref<string>();
+  const { getIsMobile } = useAppInject();
+
+  const props = defineProps(['dateTime', 'text', 'inversion', 'error', 'loading', 'referenceKnowledge']);
+  const textRef = ref();
+  const mdi = new MarkdownIt({
+    html: true,
+    linkify: true,
+    highlight(code, language) {
+      const validLang = !!(language && hljs.getLanguage(language));
+      if (validLang) {
+        const lang = language ?? '';
+        return highlightBlock(hljs.highlight(code, { language: lang }).value, lang);
+      }
+      return highlightBlock(hljs.highlightAuto(code).value, '');
+    },
+  });
+
+  mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
+  mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
+
+  const text = computed(() => {
+    let value = props.text ?? '';
+    if (props.inversion != 'user') {
+      value = replaceImageWith(value);
+      value = replaceDomainUrl(value);
+      return mdi.render(value);
+    }
+    return value.replace('\n', '<br>');
+  });
+
+  // 是否显示引用知识库
+  const showRefKnow = computed(() => {
+    const { loading, referenceKnowledge } = props;
+    if (loading) {
+      return false;
+    }
+    return Array.isArray(referenceKnowledge) && referenceKnowledge.length > 0;
+  });
+
+  //替换图片宽度
+  const replaceImageWith = (markdownContent) => {
+    // 支持图片设置width的写法 ![](/static/jimuImages/screenshot_1617252560523.png =100)
+    const regex = /!\[([^\]]*)\]\(([^)]+)=([0-9]+)\)/g;
+    return markdownContent.replace(regex, (match, alt, src, width) => {
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      src = src.replace(reg, domainUrl);
+      return `<div><img src='${src}' alt='${alt}' width='${width}' /></div>`;
+    });
+  };
+  const { domainUrl } = useGlobSetting();
+  //替换domainURL
+  const replaceDomainUrl = (markdownContent) => {
+    const regex = /!\[([^\]]*)\]\(.*?#\s*{\s*domainURL\s*}.*?\)/g;
+    return markdownContent.replace(regex, (match) => {
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      return match.replace(reg, domainUrl);
+    });
+  };
+
+  //是否放大图片
+  const amplifyImage = ref<boolean>(false);
+  //图片地址
+  const imageUrl = ref<string>('');
+
+  function highlightBlock(str: string, lang?: string) {
+    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`;
+  }
+  function addCopyEvents() {
+    if (textRef.value) {
+      const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
+      copyBtn.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const code = btn.parentElement?.nextElementSibling?.textContent;
+          if (code) {
+            copyToClip(code).then(() => {
+              btn.textContent = '复制成功';
+              setTimeout(() => {
+                btn.textContent = '复制代码';
+              }, 1e3);
+            });
+          }
+        });
+      });
+    }
+  }
+
+  function removeCopyEvents() {
+    if (textRef.value) {
+      const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
+      copyBtn.forEach((btn) => {
+        btn.removeEventListener('click', () => {});
+      });
+    }
+  }
+
+  /**
+   * 添加图片点击事件
+   */
+  function addImageClickEvent() {
+    if (textRef.value) {
+      const image = textRef.value.querySelectorAll('img');
+      image.forEach((img) => {
+        img.addEventListener('click', () => {
+          imageUrl.value = img.src;
+          amplifyImage.value = true;
+        });
+      });
+    }
+  }
+
+  /**
+   * 移出图片点击事件
+   */
+  function removeImageClickEvent() {
+    if (textRef.value) {
+      const image = textRef.value.querySelectorAll('img');
+      image.forEach((img) => {
+        img.removeEventListener('click', () => {});
+      });
+    }
+  }
+
+  /**
+   * 图片隐藏
+   */
+  function pictureHide() {
+    amplifyImage.value = false;
+    imageUrl.value = '';
+  }
+
+  /**
+   * 设置markdown body整体宽度
+   */
+  function setMarkdownBodyWidth() {
+    //平板
+    console.log('window.innerWidth::', window.innerWidth);
+    if (window.innerWidth > 600 && window.innerWidth < 1024) {
+      screenWidth.value = window.innerWidth - 120 + 'px';
+    } else if (window.innerWidth < 600) {
+      //手机
+      screenWidth.value = window.innerWidth - 60 + 'px';
+    }
+  }
+
+  onMounted(() => {
+    addCopyEvents();
+    addImageClickEvent();
+    setMarkdownBodyWidth();
+    window.addEventListener('resize', setMarkdownBodyWidth);
+  });
+
+  onUpdated(() => {
+    addCopyEvents();
+    addImageClickEvent();
+  });
+
+  onUnmounted(() => {
+    removeCopyEvents();
+    removeImageClickEvent();
+    window.removeEventListener('resize', setMarkdownBodyWidth);
+  });
+
+  function copyToClip(text: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        const input: HTMLTextAreaElement = document.createElement('textarea');
+        input.setAttribute('readonly', 'readonly');
+        input.value = text;
+        document.body.appendChild(input);
+        input.select();
+        if (document.execCommand('copy')) document.execCommand('copy');
+        document.body.removeChild(input);
+        resolve(text);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .textWrap {
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-left: 1px solid #e1e5ea;
+  }
+
+  .error {
+    background: linear-gradient(135deg, #ff4444, #ff914d) !important;
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .self {
+    // background-color: #d2f9d1;
+    background-color: @primary-color;
+    color: #fff;
+    overflow-wrap: break-word;
+    line-height: 1.625;
+    min-width: 20px;
+  }
+
+  .chatgpt {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  // 已停止下方的样式
+  :deep(.markdown-body) {
+    color: #333;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
+    line-height: 1.6;
+    padding: 14px;
+
+    // 段落样式
+    p {
+      color: #333;
+      line-height: 1.6;
+      margin-bottom: 1em;
+      margin-top: 0;
+    }
+
+    // 列表样式
+    ul,
+    ol {
+      margin-left: 1.5em;
+      margin-bottom: 1em;
+      padding-left: 0;
+
+      li {
+        color: #333;
+        line-height: 1.6;
+        margin-bottom: 0.5em;
+        padding-left: 0.5em;
+      }
+    }
+
+    // 关键词/代码高亮样式
+    code {
+      background-color: #f0f0f0;
+      color: #333;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 0.9em;
+    }
+
+    // 行内代码
+    p code,
+    li code,
+    td code {
+      background-color: #f0f0f0;
+      color: #333;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+
+    // 代码块保持原有样式
+    pre {
+      code {
+        background-color: transparent;
+        padding: 0;
+      }
+    }
+
+    // 强调文本
+    strong,
+    b {
+      color: #333;
+      font-weight: 600;
+    }
+
+    // 链接样式
+    a {
+      color: #4183c4;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    //手机和平板下的样式
+    .textWrap {
+      margin-left: -40px;
+      margin-top: 10px;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/chat.vue b/src/views/super/airag/aiapp/chat/chat.vue
new file mode 100644
index 0000000..e3716a0
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/chat.vue
@@ -0,0 +1,1715 @@
+<template>
+  <div class="chatWrap">
+    <div class="content">
+      <div class="header-title" v-if="type === 'view' && headerTitle">
+        <div class="title-content">
+          <span>{{headerTitle}}</span>
+          <a-button 
+            v-if="hasExtraFlowInputs" 
+            type="text" 
+            class="edit-btn" 
+            @click="handleEditSettings"
+            title="参数设置"
+          >
+            <Icon icon="ant-design:setting-outlined" :size="16" />
+          </a-button>
+        </div>
+        <div class="header-actions">
+          <div v-if="showAdvertising" class="header-advertisint">
+            AI客服由
+            <a style="color: #4183c4;margin-left: 2px;margin-right: 2px" href="https://jeecg.com/aigcIndex" target="_blank">
+              JEECG AI
+            </a>
+            提供
+          </div>
+        </div>
+      </div>
+      <div class="main">
+        <div id="scrollRef" ref="scrollRef" class="scrollArea">
+          <template v-if="chatData.length>0">
+            <div class="chatContentArea">
+              <chatMessage
+                v-for="(item, index) of chatData"
+                :key="index"
+                :date-time="item.dateTime || item.datetime"
+                :text="item.content"
+                :inversion="item.inversion || item.role"
+                :error="item.error"
+                :errorMsg="item.errorMsg"
+                :currentToolTag="currentToolTag"
+                :loading="item.loading"
+                :appData="appData"
+                :presetQuestion="item.presetQuestion"
+                :images = "item.images"
+                :files = "item.files"
+                :retrievalText="item.retrievalText"
+                :referenceKnowledge="item.referenceKnowledge"
+                :eventType="item.eventType"
+                :showAvatar="item.showAvatar"
+                :isLast="index === chatData.length -1"
+                @send="handleOutQuestion"
+              ></chatMessage>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="topArea">
+          <presetQuestion @out-question="handleOutQuestion" :quickCommandData="quickCommandData"></presetQuestion>
+        </div>
+        <div class="bottomArea">
+          <a-button type="text" class="delBtn" @click="handleDelSession()">
+            <svg
+              t="1706504908534"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="1584"
+              width="18"
+              height="18"
+            >
+              <path
+                d="M816.872727 158.254545h-181.527272V139.636364c0-39.563636-30.254545-69.818182-69.818182-69.818182h-107.054546c-39.563636 0-69.818182 30.254545-69.818182 69.818182v18.618181H207.127273c-48.872727 0-90.763636 41.890909-90.763637 93.09091s41.890909 90.763636 90.763637 90.763636h609.745454c51.2 0 90.763636-41.890909 90.763637-90.763636 0-51.2-41.890909-93.090909-90.763637-93.09091zM435.2 139.636364c0-13.963636 9.309091-23.272727 23.272727-23.272728h107.054546c13.963636 0 23.272727 9.309091 23.272727 23.272728v18.618181h-153.6V139.636364z m381.672727 155.927272H207.127273c-25.6 0-44.218182-20.945455-44.218182-44.218181 0-25.6 20.945455-44.218182 44.218182-44.218182h609.745454c25.6 0 44.218182 20.945455 44.218182 44.218182 0 23.272727-20.945455 44.218182-44.218182 44.218181zM835.490909 407.272727h-121.018182c-13.963636 0-23.272727 9.309091-23.272727 23.272728s9.309091 23.272727 23.272727 23.272727h97.745455V837.818182c0 39.563636-30.254545 69.818182-69.818182 69.818182h-37.236364V602.763636c0-13.963636-9.309091-23.272727-23.272727-23.272727s-23.272727 9.309091-23.272727 23.272727V907.636364h-118.690909V602.763636c0-13.963636-9.309091-23.272727-23.272728-23.272727s-23.272727 9.309091-23.272727 23.272727V907.636364H372.363636V602.763636c0-13.963636-9.309091-23.272727-23.272727-23.272727s-23.272727 9.309091-23.272727 23.272727V907.636364h-34.909091c-39.563636 0-69.818182-30.254545-69.818182-69.818182V453.818182H558.545455c13.963636 0 23.272727-9.309091 23.272727-23.272727s-9.309091-23.272727-23.272727-23.272728H197.818182c-13.963636 0-23.272727 9.309091-23.272727 23.272728V837.818182c0 65.163636 51.2 116.363636 116.363636 116.363636h451.490909c65.163636 0 116.363636-51.2 116.363636-116.363636V430.545455c0-13.963636-11.636364-23.272727-23.272727-23.272728z"
+                fill="currentColor"
+                p-id="1585"
+              />
+            </svg>
+          </a-button>
+          <a-button v-if="type === 'view'" type="text" class="contextBtn" :class="[usingContext && 'enabled']" @click="handleUsingContext">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              aria-hidden="true"
+              role="img"
+              class="iconify iconify--ri"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.956 9.956 0 0 1-4.708-1.175L2 22l1.176-5.29A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2m0 2a8 8 0 0 0-8 8c0 1.335.326 2.618.94 3.766l.35.654l-.656 2.946l2.948-.654l.653.349A7.955 7.955 0 0 0 12 20a8 8 0 1 0 0-16m1 3v5h4v2h-6V7z"
+              />
+            </svg>
+          </a-button>
+          <div class="chat-textarea" :class="textareaActive?'textarea-active':''">
+            <!--   begin 兼容文件显示   -->
+            <div class="textarea-top" v-if="(uploadUrlList && uploadUrlList.length>0) || (fileList && fileList.length>0)">
+              <!-- 只拥有图片 -->
+              <template v-if="(!fileList || fileList.length===0)">
+                <div v-for="(item,index) in uploadUrlList" class="top-image" :key="index">
+                  <img :src="getImage(item)" @click="handlePreview(item)"/>
+                  <div class="upload-icon" @click="deleteImage(index)">
+                    <Icon icon="ant-design:close-outlined" size="12px"></Icon>
+                  </div>
+                </div>
+              </template>
+              <!-- 拥有文件 -->
+              <template v-else>
+                <div class="file-card-container" style="display: flex; gap: 8px; flex-wrap: wrap;">
+                  <!-- 图片渲染 -->
+                  <div v-for="(url, index) in uploadUrlList" :key="'img-'+index" class="file-card">
+                    <div class="file-card-icon">
+                      <img :src="getImage(url)" class="file-thumb" @click="handlePreview(url)"/>
+                    </div>
+                    <div class="file-card-info">
+                      <div class="file-name" :title="fileInfoList[index]?.name || '图片'">{{ fileInfoList[index]?.name || '图片' }}</div>
+                      <div class="file-size">{{ calculateFileSize(fileInfoList[index]?.size) }}</div>
+                    </div>
+                    <div class="file-card-close" @click="deleteImage(index)">
+                      <Icon icon="ant-design:close-outlined" size="12px"/>
+                    </div>
+                  </div>
+                  <!-- 文件渲染 -->
+                  <template v-for="(item, index) in fileList" :key="'file-'+index">
+                    <div class="file-card" v-if="item.status !== 'error'">
+                      <div class="file-card-icon">
+                        <Icon :icon="getFileIcon(item.name)" :color="getFileIconColor(item.name)" size="32" />
+                      </div>
+                      <div class="file-card-info">
+                        <div class="file-name" :title="item.name">{{ item.name }}</div>
+                        <div class="file-size">{{ calculateFileSize(item.size) }}</div>
+                      </div>
+                      <div class="file-card-close" @click="deleteFile(index)">
+                        <Icon icon="ant-design:close-outlined" size="12px"/>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </template>
+              <!--   end 兼容文件显示   -->
+            </div>
+            <div class="textarea-bottom">
+              <a-textarea
+                  ref="inputRef"
+                  v-model:value="prompt"
+                  :autoSize="{ minRows: 1, maxRows: 6 }"
+                  :placeholder="placeholder"
+                  @press-enter="handleEnter"
+                  @focus="textareaActive = true"
+                  @blur="textareaActive = false"
+                  autofocus
+                  :readonly="loading"
+                  style="border-color: #ffffff !important;box-shadow:none"
+                  @paste="paste"
+              >
+              </a-textarea>
+              <div class="textarea-action-bar">
+                <div class="left-actions">
+                <a-dropdown placement="topLeft" trigger="['click']" overlayClassName="chat-upload-dropdown">
+                  <template #overlay>
+                    <a-menu mode="vertical">
+                      <a-menu-item key="img">
+                        <a-upload
+                            accept=".jpg,.jpeg,.png"
+                            v-if="!loading"
+                            name="file"
+                            v-model:file-list="fileInfoList"
+                            :showUploadList="false"
+                            :headers="headers"
+                            :beforeUpload="beforeUpload"
+                            @change="handleChange"
+                            :multiple="true"
+                            :action="uploadUrl"
+                            :max-count="3"
+                        >
+                          <div style="display: flex; align-items: center">
+                            <Icon icon="ant-design:picture-outlined" style="margin-right:8px;color:#3d4353" />
+                            上传图片
+                          </div>
+                        </a-upload>
+                      </a-menu-item>
+                      <a-menu-item key="file">
+                        <a-upload
+                            accept=".txt, .pdf, .docx, .doc, .pptx, .ppt, .xlsx, .xls, .md"
+                            :maxCount="3"
+                            v-if="!loading"
+                            name="file"
+                            v-model:file-list="fileList"
+                            :showUploadList="false"
+                            :headers="headers"
+                            :beforeUpload="beforeUploadFile"
+                            @change="handleChangeFile"
+                            :multiple="true"
+                            :action="uploadUrl"
+                        >
+                          <div style="display: flex; align-items: center">
+                            <Icon icon="ant-design:file-add-outlined" style="margin-right:8px;color:#3d4353" />
+                            上传文件
+                          </div>
+                        </a-upload>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                  <a-button class="sendBtn" type="text">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.3977 3.9588C15.8361 2.39727 13.3037 2.39727 11.7422 3.9588L5.03365 10.6673C2.60612 13.0952 2.60612 17.0314 5.03365 19.4592C7.46144 21.887 11.3983 21.8875 13.8262 19.4599L20.5348 12.7514C20.8472 12.439 21.3534 12.439 21.6658 12.7514C21.9781 13.0638 21.9782 13.5701 21.6658 13.8825L14.9573 20.591C11.9046 23.6435 6.95518 23.6429 3.90255 20.5903C0.850191 17.5377 0.850191 12.5889 3.90255 9.53624L10.6111 2.82771C12.7975 0.641334 16.3424 0.641334 18.5288 2.82771C20.7149 5.01409 20.7151 8.55906 18.5288 10.7454L11.8699 17.4042C10.5369 18.7372 8.37542 18.7365 7.04241 17.4035C5.70963 16.0705 5.7095 13.9096 7.04241 12.5767L13.7012 5.91785C14.0136 5.60547 14.5199 5.60557 14.8323 5.91785C15.1447 6.23027 15.1447 6.73652 14.8323 7.04894L8.1735 13.7078C7.46543 14.4159 7.46556 15.5642 8.1735 16.2724C8.88167 16.9806 10.03 16.9806 10.7381 16.2724L17.397 9.61358C18.9584 8.05211 18.959 5.52035 17.3977 3.9588Z" fill="currentColor"></path></svg>
+                  </a-button>
+                </a-dropdown>
+                  <a-divider type="vertical" v-if="showThink || showWebSearch || showDraw "/>
+                  <a-tooltip v-if="showThink" :title="enableThink ? '关闭深度思考' : '开启深度思考'">
+                    <a-button
+                        class="sendBtn webSearchBtn"
+                        type="text"
+                        :class="{ 'enabled': enableThink }"
+                        @click="toggleThink">
+                      <svg style="margin-right: 6px" :style="enableThink ? { color: '#06f' } : { color: '#3d4353' }" width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.06428 5.93342C7.6876 5.93342 8.19304 6.43904 8.19319 7.06233C8.19319 7.68573 7.68769 8.19123 7.06428 8.19123C6.44096 8.19113 5.93537 7.68567 5.93537 7.06233C5.93552 6.43911 6.44105 5.93353 7.06428 5.93342Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.68147 0.963693C10.1168 0.447019 11.6266 0.374829 12.5633 1.31135C13.5 2.24805 13.4276 3.75776 12.911 5.19319C12.7126 5.74431 12.4385 6.31796 12.0965 6.89729C12.4969 7.54638 12.8141 8.19018 13.036 8.80647C13.5527 10.2419 13.625 11.7516 12.6883 12.6883C11.7516 13.625 10.2419 13.5527 8.80647 13.036C8.19019 12.8141 7.54638 12.4969 6.89729 12.0965C6.31794 12.4386 5.74432 12.7125 5.19319 12.911C3.75774 13.4276 2.24807 13.5 1.31135 12.5633C0.374829 11.6266 0.447019 10.1168 0.963693 8.68147C1.17182 8.10338 1.46318 7.50063 1.82893 6.8924C1.52179 6.35711 1.27232 5.82825 1.08869 5.31819C0.572038 3.88278 0.499683 2.37306 1.43635 1.43635C2.37304 0.499655 3.88277 0.572044 5.31819 1.08869C5.82825 1.27232 6.35712 1.5218 6.8924 1.82893C7.50063 1.46318 8.10338 1.17181 8.68147 0.963693ZM11.3572 8.01154C10.9083 8.62253 10.3901 9.22873 9.8094 9.8094C9.22874 10.3901 8.62252 10.9083 8.01154 11.3572C8.42567 11.5841 8.82867 11.7688 9.21272 11.9071C10.5455 12.3868 11.4246 12.2547 11.8397 11.8397C12.2547 11.4246 12.3869 10.5456 11.9071 9.21272C11.7688 8.82866 11.5841 8.42568 11.3572 8.01154ZM2.56526 8.02912C2.3734 8.39322 2.21492 8.74796 2.0926 9.08772C1.61288 10.4204 1.74509 11.2995 2.15998 11.7147C2.57502 12.1297 3.45412 12.2618 4.78694 11.7821C5.11053 11.6656 5.44783 11.5164 5.79377 11.3367C5.24897 10.9223 4.70919 10.4533 4.19026 9.9344C3.57575 9.31987 3.03166 8.67633 2.56526 8.02912ZM6.90705 3.2469C6.24062 3.70479 5.56457 4.26321 4.91389 4.91389C4.26322 5.56456 3.70479 6.24063 3.2469 6.90705C3.72671 7.63325 4.32774 8.37685 4.91389 8.96299C5.50003 9.54914 6.24362 10.1502 6.96983 10.6299C7.69601 10.1502 8.43961 9.54914 9.02575 8.96299C9.6119 8.37685 10.2129 7.63325 10.6927 6.90705C10.2129 6.18086 9.6119 5.43725 9.02575 4.8511C8.43961 4.26496 7.69601 3.66391 6.96983 3.18419C6.94896 3.205 6.92803 3.22593 6.90705 3.2469Z" fill="currentColor"></path></svg>
+                      深度思考
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip v-if="showWebSearch" :title="enableSearch ? '关闭联网搜索' : '开启联网搜索'">
+                    <a-button
+                        class="sendBtn webSearchBtn"
+                        type="text"
+                        :class="{ 'enabled': enableSearch }"
+                        @click="toggleWebSearch">
+                      <Icon size="16" icon="ant-design:global-outlined" :style="enableSearch ? { color: '#06f' } : { color: '#3d4353' }"></Icon>
+                      联网搜索
+                    </a-button>
+                  </a-tooltip>
+                  <a-tooltip v-if="showDraw" :title="enableDraw ? '关闭图像生成' : '开启图像生成'">
+                    <a-button
+                        class="sendBtn webSearchBtn"
+                        type="text"
+                        :class="{ 'enabled': enableDraw }"
+                        @click="handleGenerateImage">
+                      <svg style="margin-right: 6px" :style="enableDraw ? { color: '#06f' } : { color: '#3d4353' }" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class=""><path d="M12 2.3584C14.1681 2.35841 16.1541 2.52965 17.7266 2.72754C19.9228 3.00409 21.6336 4.66074 21.9365 6.85352C22.1348 8.28975 22.2998 10.0677 22.2998 12L22.293 12.7168C22.2586 14.3712 22.1101 15.8897 21.9365 17.1465L21.9043 17.3496C21.5268 19.4411 19.8545 21.0045 17.7266 21.2725L17.1182 21.3457C15.655 21.511 13.8972 21.6416 12 21.6416L11.1963 21.6338C9.60724 21.6034 8.13686 21.4874 6.88281 21.3457L6.27441 21.2725C4.14635 21.0046 2.47428 19.4411 2.09668 17.3496L2.06445 17.1465C1.89093 15.8897 1.74239 14.3712 1.70801 12.7168L1.7002 12C1.7002 10.3092 1.82669 8.737 1.99121 7.4082L2.06445 6.85352C2.35801 4.72923 3.9719 3.10743 6.06934 2.75684L6.27441 2.72754C7.84674 2.52969 9.83219 2.35841 12 2.3584ZM11.9775 13.3496C11.4613 13.3496 10.9378 13.4818 10.2207 13.8066C9.48747 14.1388 8.61112 14.6435 7.37793 15.3555L3.76367 17.4424C4.13152 18.6436 5.16153 19.5204 6.47363 19.6855C7.99607 19.8771 9.91342 20.042 12 20.042C14.0865 20.042 16.0039 19.8771 17.5264 19.6855C18.8303 19.5214 19.8566 18.6546 20.2305 17.4648L16.5771 15.3555C15.344 14.6435 14.4676 14.1388 13.7344 13.8066C13.0173 13.4818 12.4938 13.3496 11.9775 13.3496ZM12 3.95801C9.91342 3.95802 7.99607 4.12286 6.47363 4.31445C4.98011 4.50243 3.85117 5.61215 3.64941 7.07324C3.45876 8.45412 3.2998 10.1566 3.2998 12C3.2998 13.3468 3.38385 14.6183 3.50391 15.7441L6.57715 13.9707C7.78367 13.2741 8.73894 12.7218 9.56055 12.3496C10.3981 11.9702 11.1542 11.75 11.9775 11.75C12.8008 11.75 13.557 11.9702 14.3945 12.3496C15.2161 12.7218 16.1714 13.2741 17.3779 13.9707L20.4922 15.7686C20.6134 14.6367 20.7002 13.3565 20.7002 12C20.7002 10.1566 20.5422 8.4541 20.3516 7.07324C20.1498 5.61218 19.0198 4.50249 17.5264 4.31445C16.0039 4.12287 14.0865 3.95802 12 3.95801ZM7.73438 7.0625C8.76128 7.0625 9.59375 7.89497 9.59375 8.92188C9.59375 9.94878 8.76128 10.7812 7.73438 10.7812C6.70747 10.7812 5.875 9.94878 5.875 8.92188C5.875 7.89497 6.70747 7.0625 7.73438 7.0625Z" fill="currentColor"></path></svg>
+                      <span style="font-size: 14px">图像生成</span>
+                    </a-button>
+                  </a-tooltip>
+                </div>
+                <div class="right-actions">
+                <a-button v-if="loading" type="primary" danger @click="handleStopChat" class="stopBtn">
+                  <svg
+                      t="1706148514627"
+                      class="icon"
+                      viewBox="0 0 1024 1024"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      p-id="5214"
+                      width="18"
+                      height="18"
+                  >
+                    <path
+                        d="M512 967.111111c-250.311111 0-455.111111-204.8-455.111111-455.111111s204.8-455.111111 455.111111-455.111111 455.111111 204.8 455.111111 455.111111-204.8 455.111111-455.111111 455.111111z m0-56.888889c221.866667 0 398.222222-176.355556 398.222222-398.222222s-176.355556-398.222222-398.222222-398.222222-398.222222 176.355556-398.222222 398.222222 176.355556 398.222222 398.222222 398.222222z"
+                        fill="currentColor"
+                        p-id="5215"
+                    />
+                    <path d="M341.333333 341.333333h341.333334v341.333334H341.333333z" fill="currentColor" p-id="5216"/>
+                  </svg>
+                </a-button>
+                <a-button
+                    @click="
+              () => {
+                handleSubmit();
+              }
+            "
+                    :disabled="!prompt"
+                    class="sendBtn"
+                    type="text"
+                    v-if="!loading"
+                >
+                  <svg
+                      t="1706147858151"
+                      class="icon"
+                      viewBox="0 0 1024 1024"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      p-id="4237"
+                      width="18"
+                      height="18"
+                  >
+                    <path
+                        d="M865.28 202.5472c-17.1008-15.2576-41.0624-19.6608-62.5664-11.5712L177.7664 427.1104c-23.2448 8.8064-38.5024 29.696-39.6288 54.5792-1.1264 24.8832 11.9808 47.104 34.4064 58.0608l97.5872 47.7184c4.5056 2.2528 8.0896 6.0416 9.9328 10.6496l65.4336 161.1776c7.7824 19.1488 24.4736 32.9728 44.7488 37.0688 20.2752 4.096 41.0624-2.1504 55.6032-16.7936l36.352-36.352c6.4512-6.4512 16.5888-7.8848 24.576-3.3792l156.5696 88.8832c9.4208 5.3248 19.8656 8.0896 30.3104 8.0896 8.192 0 16.4864-1.6384 24.2688-5.0176 17.8176-7.68 30.72-22.8352 35.4304-41.6768l130.7648-527.1552c5.5296-22.016-1.7408-45.2608-18.8416-60.416z m-20.8896 50.7904L713.5232 780.4928c-1.536 6.2464-5.8368 11.3664-11.776 13.9264s-12.5952 2.1504-18.2272-1.024L526.9504 704.512c-9.4208-5.3248-19.8656-7.9872-30.208-7.9872-15.9744 0-31.744 6.144-43.52 17.92l-36.352 36.352c-3.8912 3.8912-8.9088 5.9392-14.2336 6.0416l55.6032-152.1664c0.512-1.3312 1.2288-2.56 2.2528-3.6864l240.3328-246.1696c8.2944-8.4992-2.048-21.9136-12.3904-16.0768L301.6704 559.8208c-4.096-3.584-8.704-6.656-13.6192-9.1136L190.464 502.9888c-11.264-5.5296-11.5712-16.1792-11.4688-19.3536 0.1024-3.1744 1.536-13.824 13.2096-18.2272L817.152 229.2736c10.4448-3.9936 18.0224 1.3312 20.8896 3.8912 2.8672 2.4576 9.0112 9.3184 6.3488 20.1728z"
+                        p-id="4238"
+                        fill="currentColor"
+                    />
+                  </svg>
+                </a-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Ref, watch } from 'vue';
+  import { computed, ref, createVNode, onUnmounted, onMounted, nextTick } from 'vue';
+  import { useScroll } from './js/useScroll';
+  import chatMessage from './chatMessage.vue';
+  import presetQuestion from './presetQuestion.vue';
+  import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { message, Modal, Tabs } from 'ant-design-vue';
+  import './style/github-markdown.less';
+  import './style/highlight.less';
+  import './style/github-markdown.less';
+  import dayjs from 'dayjs';
+  import { defHttp } from '@/utils/http/axios';
+  import { cloneDeep } from "lodash-es";
+  import { calculateFileSize, getFileAccessHttpUrl, getFileIcon, getHeaders, getFileIconColor } from "@/utils/common/compUtils";
+  import { createImgPreview } from "@/components/Preview";
+  import { useAppInject } from "@/hooks/web/useAppInject";
+  import { useGlobSetting } from "@/hooks/setting";
+  import { Icon } from '/@/components/Icon';
+
+  message.config({
+    prefixCls: 'ai-chat-message',
+  });
+
+  const props = defineProps(['uuid', 'prologue', 'formState', 'url', 'type','historyData','chatTitle','presetQuestion','quickCommandData','showAdvertising','hasExtraFlowInputs','conversationSettings','sessionType']);
+  const emit = defineEmits(['save','reload-message-title','edit-settings']);
+  const { scrollRef, scrollToBottom } = useScroll();
+  const prompt = ref<string>('');
+  const loading = ref<boolean>(false);
+  const inputRef = ref<Ref | null>(null);
+  const headerTitle = ref<string>(props.chatTitle);
+
+  //聊天数据
+  const chatData = ref<any>([]);
+  //应用数据
+  const appData = ref<any>({});
+  const usingContext = ref<any>(true);
+  const uuid = ref<string>(props.uuid);
+  const topicId = ref<string>('');
+  //请求id
+  const requestId = ref<string>('');
+  const { getIsMobile } = useAppInject();
+  const conversationList = computed(() => chatData.value.filter((item) => item.inversion != 'user' && !!item.conversationOptions));
+  const placeholder = computed(() => {
+    if(getIsMobile.value){
+      return '来说点什么吧...'
+    } else {
+      return '来说点什么吧...（Shift + Enter = 换行）';
+    }
+  });
+  //token
+  const headers = getHeaders();
+  //文本域点击事件
+  const textareaActive = ref<boolean>(false);
+
+  const globSetting = useGlobSetting();
+  const baseUploadUrl = globSetting.uploadUrl;
+  const uploadUrl = ref<string>(`${baseUploadUrl}/airag/chat/upload`);
+  //是否为断线重连
+  const isReConnect = ref<boolean>(false);
+  //是否存在思考过程
+  const isThinking = ref<boolean>(false);
+  //是否开启网络搜索
+  const enableSearch = ref<boolean>(false);
+  //是否显示网络搜索按钮（默认显示）
+  const showWebSearch = ref<boolean>(true);
+  //模型provider信息
+  const modelProvider = ref<string>('');
+  //是否显示深度思考( 只有deepsee-reason支持 )
+  const showThink = ref<boolean>(false);
+  //是否开启深度思考
+  const enableThink = ref<boolean>(false);
+  //模型名称
+  const modelName = ref<string>('');
+  //是否开启绘画
+  const enableDraw = ref<boolean>(false);
+  //是否显示工具栏
+  const showDraw = ref<boolean>(false);
+  //绘画模型的id
+  const drawModelId = ref<string>('');
+  //其他文件列表
+  const fileUrlList = ref<any>([]);
+  //文件列表（用于显示和管理）
+  const fileList = ref<any>([]);
+
+  // 当前正在调用的工具
+  const currentToolTag = ref<string>('');
+
+  function handleEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  }
+  function handleSubmit() {
+    let userMessage = prompt.value;
+    if (!userMessage || userMessage.trim() === '') return;
+    prompt.value = '';
+    onConversation(userMessage);
+  }
+  const handleOutQuestion = (userMessage) => {
+    onConversation(userMessage);
+  };
+  async function onConversation(userMessage) {
+    if(!props.type && props.type != 'view'){
+      if(appData.value.type && appData.value.type == 'chatSimple' && !appData.value.modelId) {
+        messageTip("请选择AI模型");
+        return;
+      }
+      if(appData.value.type && appData.value.type == 'chatFLow' && !appData.value.flowId) {
+        messageTip("请选择关联流程");
+        return;
+      }
+      if(!appData.value.name) {
+        messageTip("请填写应用名称");
+        return;
+      }
+    }
+    
+    // 检查是否需要设置额外参数
+    if (props.hasExtraFlowInputs) {
+      // 检查是否已设置
+      if (!props.conversationSettings || Object.keys(props.conversationSettings).length === 0) {
+        // 弹出设置弹窗，阻止发送
+        message.warning('请先设置对话参数');
+        emit('edit-settings');
+        return;
+      }
+    }
+    
+    if (loading.value) return;
+    loading.value = true;
+
+    addChat(uuid.value, {
+      dateTime: new Date().toLocaleString(),
+      content: userMessage,
+      images:uploadUrlList.value?uploadUrlList.value:[],
+      files: fileUrlList.value ? fileUrlList.value : [],
+      inversion: 'user',
+      error: false,
+      conversationOptions: null,
+      requestOptions: { prompt: userMessage, options: null },
+      eventType: 'message',
+    });
+    scrollToBottom();
+
+    let options: any = {};
+    const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions;
+    if (lastContext && usingContext.value) {
+      options = { ...lastContext };
+    }
+
+    addChat(uuid.value, {
+      dateTime: new Date().toLocaleString(),
+      content: '思考中...',
+      loading: true,
+      inversion: 'ai',
+      error: false,
+      conversationOptions: null,
+      requestOptions: { prompt: userMessage, options: { ...options } },
+      referenceKnowledge: [],
+      eventType: 'message',
+    });
+
+    scrollToBottom();
+
+    //发送消息
+    sendMessage(userMessage,options);
+  }
+
+  onUnmounted(() => {
+    updateChatSome(uuid.value, chatData.value.length - 1, { loading: false });
+  });
+
+  const addChat = (uuid, data) => {
+    chatData.value.push({ ...data });
+  };
+  const updateChat = async (uuid, index, data) => {
+    let lastChatData = chatData.value[index];
+    if(lastChatData.showAvatar){
+      data.showAvatar = lastChatData.showAvatar;
+    }
+    chatData.value.splice(index, 1, data);
+    await scrollToBottom();
+  };
+  /**
+   * 顶置开场白
+   * @param txt
+   */
+  const topChat = (txt) => {
+    let data = {
+      content: txt,
+      key: 'prologue',
+      loading: false,
+      dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
+      inversion: 'ai',
+      presetQuestion: props.presetQuestion ? JSON.parse(props.presetQuestion) : "",
+    };
+    if (chatData.value && chatData.value.length > 0) {
+      let key = chatData.value[0].key;
+      if (key === 'prologue') {
+        chatData.value[0] = { ...data };
+        return;
+      }
+    }
+    chatData.value.unshift({ ...data });
+  };
+  const updateChatSome = (uuid, index, data) => {
+    chatData.value[index] = { ...chatData.value[index], ...data };
+  };
+  const updateChatFail = (uuid, data) => {
+    const index = chatData.value.length - 1
+    const oldChat = chatData.value[index];
+    updateChat(uuid.value, chatData.value.length - 1, {
+      ...oldChat,
+      // dateTime: new Date().toLocaleString(),
+      // content: data,
+      inversion: 'ai',
+      error: true,
+      errorMsg: data,
+      loading: true,
+      conversationOptions: null,
+      requestOptions: null,
+      eventType: "message",
+    });
+    scrollToBottom();
+  };
+
+  /**
+   * 清空会话
+   * @param id
+   */
+  function handleDelSession (){
+    Modal.confirm({
+      title: '清空会话',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: '是否清空会话?',
+      closable: true,
+      okText: '确定',
+      cancelText: '取消',
+      wrapClassName:'ai-chat-modal',
+      async onOk() {
+        try {
+          //update-begin---author:wangshuai---date:2025-12-12---for:【QQYUN-14127】【AI】AI应用门户---
+          let url = '/airag/chat/messages/clear/' + uuid.value;
+          if(props.sessionType){
+            url += "/" + props.sessionType;
+          }
+          defHttp.get({
+            url: url,
+          //update-end---author:wangshuai---date:2025-12-12---for:【QQYUN-14127】【AI】AI应用门户---
+          },{ isTransformResponse: false }).then((res) => {
+            if(res.success){
+              chatData.value = [];
+              topicId.value = "";
+              if(props.prologue){
+                topChat(props.prologue);
+              }
+            }
+          })
+        } catch {
+          return console.log('Oops errors!');
+        }
+      },
+    });
+  };
+
+  // 停止响应
+  const handleStop = () => {
+    console.log('ai 聊天：：：---停止响应, 当前loading:', loading.value, ', 调用栈:', new Error().stack?.split('\n').slice(1,4).join(' <- '));
+    if (loading.value) {
+      loading.value = false;
+    }
+    updateChatSome(uuid, chatData.value.length - 1, { loading: false });
+  };
+
+  handleStop();
+
+  const knowList = ref<Recordable[]>([])
+
+  /**
+   * 停止消息
+   */
+  function handleStopChat() {
+    //update-begin---author:wangshuai---date:2025-06-03---for:【issues/8338】AI应用聊天回复stop无效，仍会继续输出回复---
+    const currentRequestId = requestId.value
+    if(currentRequestId){
+      try{
+        //调用后端接口停止响应
+        defHttp.get({
+          url: '/airag/chat/stop/' + currentRequestId,
+        },{ isTransformResponse: false });
+      } finally {
+        handleStop();
+        localStorage.removeItem('chat_requestId_' + uuid.value);
+      }
+      //update-end---author:wangshuai---date:2025-06-03---for:【issues/8338】AI应用聊天回复stop无效，仍会继续输出回复---
+    } else {
+      localStorage.removeItem('chat_requestId_' + uuid.value);
+    }
+  }
+
+  /**
+   * 读取文本
+   * @param message
+   * @param options
+   */
+  async function sendMessage(message, options) {
+    let param = {};
+    if (!props.type && props.type != 'view') {
+      param = {
+        content: message,
+        images: uploadUrlList.value?uploadUrlList.value:[],
+        files: fileUrlList.value ? fileUrlList.value : [],
+        topicId: topicId.value,
+        app: appData.value,
+        responseMode: 'streaming',
+        // 添加对话设置参数（调试模式也需要）
+        flowInputs: props.conversationSettings || {},
+        // 添加网络搜索参数
+        enableSearch: enableSearch.value,
+        // 添加深度思考参数
+        enableThink: enableThink.value,
+        // 添加绘画参数
+        enableDraw: enableDraw.value,
+        drawModelId: enableDraw.value ? drawModelId.value : '',
+        // 添加消息类型 portal 门户
+        sessionType: props.sessionType || ''
+      };
+    }else{
+      param = {
+        content: message,
+        topicId: usingContext.value?topicId.value:'',
+        images: uploadUrlList.value?uploadUrlList.value:[],
+        files: fileUrlList.value ? fileUrlList.value : [],
+        appId: appData.value.id,
+        responseMode: 'streaming',
+        conversationId: uuid.value === "1002"?'':uuid.value,
+        // 添加对话设置参数
+        flowInputs: props.conversationSettings || {},
+        // 添加网络搜索参数
+        enableSearch: enableSearch.value,
+        // 添加深度思考参数
+        enableThink: enableThink.value,
+        // 添加绘画参数
+        enableDraw: enableDraw.value,
+        drawModelId: enableDraw.value ? drawModelId.value : '',
+        // 添加消息类型 portal 门户
+        sessionType: props.sessionType || ''
+      };
+
+      if(headerTitle.value == '新建聊天'){
+        headerTitle.value = message.length>10?truncateString(message,10):message
+      }
+
+      emit("reload-message-title",message.length>10?truncateString(message,10):message)
+    }
+
+    uploadUrlList.value = [];
+    fileInfoList.value = [];
+    fileUrlList.value = [];
+    fileList.value = [];
+    knowList.value = [];
+    options.message = message;
+    const readableStream = await defHttp.post(
+      {
+        url: props.url,
+        params: param,
+        adapter: 'fetch',
+        responseType: 'stream',
+        timeout: 60 * 60 * 1000,
+      },
+      {
+        isTransformResponse: false,
+      }
+    ).catch((e)=>{
+      //update-begin---author:wangshuai---date:2025-04-28---for:【QQYUN-12297】【AI】聊天，超时以后提示---
+      if(e.code === 'ETIMEDOUT'){
+        updateChatFail(uuid, "当前用户较多，排队中，请稍候再次重试！");
+        handleStop();
+        return;
+      }else{
+        updateChatFail(uuid, "服务器错误，请稍后重试！");
+        handleStop();
+        return;
+      }
+      console.error(e)
+      //update-end---author:wangshuai---date:2025-04-28---for:【QQYUN-12297】【AI】聊天，超时以后提示---
+    });
+    await renderChatByResult(readableStream,options);
+  }
+  // 是否使用上下文
+  const handleUsingContext = () => {
+    usingContext.value = !usingContext.value;
+    if (usingContext.value) {
+      message.success("当前模式下, 发送消息会携带之前的聊天记录");
+    } else {
+      message.warning("当前模式下, 发送消息不会携带之前的聊天记录");
+    }
+  };
+
+  /**
+   * 提示
+   * @param value
+   */
+  function messageTip(value) {
+    message.warning(value);
+  }
+
+  /**
+   * 渲染文本
+   * @param item
+   * @param conversationId
+   * @param text
+   * @param options
+   */
+  async function renderText(item,conversationId,text,options) {
+    let returnText = "";
+    if (item.event == 'MESSAGE' || item.event == 'THINKING' || item.event == 'THINKING_END') {
+      let message = item.data?.message ?? "";
+      let messageText = "";
+      //update-begin---author:wangshuai---date:2025-04-24---for:应该先判断是否包含card---
+      if(message && message.indexOf("::card::") !== -1){
+        messageText = message;
+      } else if(message && message.indexOf("::cardConfig::") !== -1) {
+        messageText = message;
+      } else {
+        text = text + message;
+        messageText = text;
+        returnText = text;
+      }
+      //update-end---author:wangshuai---date:2025-04-24---for:应该先判断是否包含card---
+      // 从消息中获取 requestId
+      if (item.requestId) {
+        requestId.value = item.requestId;
+      }
+      if(item.event == 'THINKING'){
+        isThinking.value = true;
+      }
+      if(item.event == 'MESSAGE' && isThinking.value){
+        text = item.data.message;
+        returnText = item.data.message;
+        //发送用户消息
+        addChat(uuid.value, {
+          dateTime: new Date().toLocaleString(),
+          content: item.data.message,
+          images:uploadUrlList.value?uploadUrlList.value:[],
+          files: fileUrlList.value ? fileUrlList.value : [],
+          inversion: 'ai',
+          error: false,
+          conversationOptions: null,
+          requestOptions: { prompt: message, options: null },
+          eventType: 'message',
+          showAvatar: 'no'
+        });
+        isThinking.value = false;
+        return { returnText, conversationId };
+      }
+      //更新聊天信息
+      updateChat(uuid.value, chatData.value.length - 1, {
+        dateTime: new Date().toLocaleString(),
+        content: messageText,
+        inversion: 'ai',
+        error: false,
+        loading: item.event == 'THINKING_END' ? false: true,
+        conversationOptions: { conversationId: conversationId, parentMessageId: topicId.value },
+        requestOptions: { prompt: message, options: { ...options } },
+        referenceKnowledge: knowList.value,
+        eventType: item.event.toLowerCase(),
+      });
+    }
+    if(item.event == 'INIT_REQUEST_ID'){
+      if (item.requestId && props.url != "/airag/app/debug") {
+        requestId.value = item.requestId;
+        localStorage.setItem('chat_requestId_' + uuid.value, JSON.stringify({ requestId: item.requestId, message: options.message }));
+      }
+    }
+    if (item.event == 'MESSAGE_END') {
+      topicId.value = item.topicId;
+      conversationId = item.conversationId;
+      uuid.value = item.conversationId;
+      localStorage.removeItem('chat_requestId_' + uuid.value);
+      handleStop();
+    }
+    if (item.event == 'FLOW_FINISHED') {
+      //update-begin---author:wangshuai---date:2025-03-07---for:【QQYUN-11457】聊天调用流程，执行失败了但是没提示---
+      if(item.data && !item.data.success){
+        updateChatFail(uuid, item.data.message?item.data.message:'请求出错，请稍后重试！');
+        localStorage.removeItem('chat_requestId_' + uuid.value);
+        handleStop();
+        return "";
+      }
+      //update-end---author:wangshuai---date:2025-03-07---for:【QQYUN-11457】聊天调用流程，执行失败了但是没提示---
+      topicId.value = item.topicId;
+      conversationId = item.conversationId;
+      uuid.value = item.conversationId;
+      requestId.value = item.requestId;
+      localStorage.removeItem('chat_requestId_' + uuid.value);
+      handleStop();
+    }
+    if (item.event == 'ERROR') {
+      updateChatFail(uuid, item.data.message?item.data.message:'请求出错，请稍后重试！');
+      localStorage.removeItem('chat_requestId_' + uuid.value);
+      handleStop();
+      return "";
+    }
+
+    // 工具调用开始
+    if (item.event == 'TOOL_EXEC_BEFORE') {
+      currentToolTag.value = item.data?.message ?? '';
+    }
+
+    // 工具调用结束
+    if (item.event == 'TOOL_EXEC_DONE') {
+      currentToolTag.value = '';
+    }
+
+    //update-begin---author:wangshuai---date:2025-03-21---for:【QQYUN-11495】【AI】实时展示当前思考进度---
+    if(item.event === "NODE_STARTED"){
+      if(!item.data || item.data.type !== 'end'){
+        let aiText = "";
+        if(item.data.type === 'llm' || item.data.type === 'reply'){
+          aiText = "正在构建响应内容";
+        }
+        if(item.data.type === 'knowledge'){
+          aiText = "正在对知识库进行深度检索";
+        }
+        if(item.data.type === 'classifier'){
+          aiText = "正在分类";
+        }
+        if(item.data.type === 'code'){
+          aiText = "正在实施代码运行操作";
+        }
+        if(item.data.type === 'subflow'){
+          aiText = "正在运行子流程";
+        }
+        if(item.data.type === 'enhanceJava'){
+          aiText = "正在执行java增强";
+        }
+        if(item.data.type === 'http'){
+          aiText = "正在发送http请求";
+        }
+        if(!text){
+          //更新聊天信息
+          updateChat(uuid.value, chatData.value.length - 1, {
+            dateTime: new Date().toLocaleString(),
+            retrievalText: aiText,
+            text:"",
+            inversion: 'ai',
+            error: false,
+            loading: true,
+            conversationOptions: null,
+            requestOptions: { prompt: message, options: { ...options } },
+            referenceKnowledge: knowList.value,
+            eventType: 'message',
+          });
+        }
+      }
+    }
+    //update-end---author:wangshuai---date:2025-03-21---for:【QQYUN-11495】【AI】实时展示当前思考进度---
+    else if (item.event === 'NODE_FINISHED') {
+      if(!item.data || item.data.type !== 'end'){
+        if(item.data.type === 'knowledge'){
+          const id = item.data.id;
+          const data = item.data.outputs[id + ".documents"]
+          knowList.value = data
+          //更新聊天信息
+          updateChatSome(uuid.value, chatData.value.length - 1, {referenceKnowledge: knowList.value})
+        }
+      }
+    }
+    if(!returnText && item.event !== 'NODE_FINISHED'){
+      returnText = text;
+    }
+    return { returnText, conversationId };
+  }
+
+  //上传文件列表集合
+  const uploadUrlList = ref<any>([]);
+  //文件集合
+  const fileInfoList = ref<any>([]);
+
+  /**
+   * 文件上传回调事件
+   * @param info
+   */
+  function handleChange(info) {
+    let { fileList, file } = info;
+    fileInfoList.value = fileList;
+    if (file.status === 'error' || (file.response && file.response.code == 500)) {
+      message.error(file.response?.message || `${file.name} 上传失败,请查看服务端日志`);
+      return;
+    }
+    if (file.status === 'done') {
+      uploadUrlList.value.push(file.response.message);
+    }
+  }
+
+  /**
+   * 获取图片地址
+   *
+   * @param url
+   */
+  function getImage(url) {
+    return getFileAccessHttpUrl(url);
+  }
+
+  /**
+   * 上传前事件
+   */
+  function beforeUpload(file) {
+    var fileType = file.type;
+    if (fileType === 'image') {
+      if (fileType.indexOf('image') < 0) {
+        message.warning('请上传图片');
+        return false;
+      }
+    }
+    if(uploadUrlList.value && uploadUrlList.value.length > 2){
+      message.warning("最多只能上传三张！");
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 删除图片
+   */
+  function deleteImage(index) {
+    uploadUrlList.value.splice(index,1);
+    fileInfoList.value.splice(index,1);
+  }
+
+  /**
+   * 图片预览
+   * @param url
+   */
+  function handlePreview(url){
+    const onImgLoad = ({ index, url, dom }) => {
+      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
+    };
+    let imageList = [getImage(url)];
+    createImgPreview({ imageList: imageList, defaultWidth: 700, rememberState: true, onImgLoad });
+  }
+
+  /**
+   * 截取字符串
+   * @param str
+   * @param maxLength
+   */
+  function truncateString(str, maxLength) {
+    if (str.length <= maxLength){
+      return str;
+    }
+    let chineseCount = 0;
+    let englishCount = 0;
+    let digitCount = 0;
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+      if (/[\u4e00-\u9fa5]/.test(char)) { // 判断是否为汉字
+        chineseCount++;
+      } else if (/[a-zA-Z]/.test(char)) { // 判断是否为英文字母
+        englishCount++;
+      } else if (/\d/.test(char)) { // 判断是否为数字
+        digitCount++;
+      }
+      if (chineseCount + englishCount / 2 + digitCount / 2 > maxLength) {
+        break;
+      }
+      result += char;
+    }
+
+    return result;
+  }
+
+  /**
+   * 粘贴事件
+   * @param event
+   */
+  function paste(event) {
+    if(uploadUrlList.value && uploadUrlList.value.length > 2){
+      message.warning("最多只能上传三张！");
+      return;
+    }
+    const items = (event.clipboardData || window.clipboardData).items;
+    if (!items || items.length === 0){
+      //说明浏览器不支持复制图片
+      message.error('当前浏览器不支持本地打开图片！');
+      return;
+    }
+    let image = null;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        image = items[i].getAsFile();
+        handleUploadImage(image);
+        break;
+      }
+    }
+  }
+
+  /**
+   * 粘贴图片
+   * @param image
+   */
+  async function handleUploadImage(image) {
+    const isReturn = (fileInfo) => {
+      try {
+        if (fileInfo.code === 0) {
+          let { message } = fileInfo;
+          uploadUrlList.value.push(message);
+          fileInfoList.value.push(image);
+        } else if (fileInfo.code === 500 || fileInfo.code === 510) {
+          message.error(fileInfo.message || `${image.name} 导入失败`);
+        }
+      } catch (error) {
+        console.log('导入的数据异常', error);
+        message.error(`${image.name} 导入失败`);
+      }
+    };
+    await defHttp.uploadFile({ url: "/airag/chat/upload" }, { file: image }, { success: isReturn });
+  }
+
+  /**
+   * 渲染返回来的结果
+   * @param readableStream
+   * @param options
+   */
+  async function renderChatByResult(readableStream, options) {
+    const reader = readableStream.getReader();
+    const decoder = new TextDecoder('UTF-8');
+    let conversationId = '';
+    let buffer = '';
+    let text = ''; // 按 SSE 协议分割消息
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      //update-begin---author:wangshuai---date:2025-03-12---for:【QQYUN-11555】聊天时要流式显示消息---
+      let result = decoder.decode(value, { stream: true });
+      buffer += result;
+      // 按SSE协议用 \n\n 分割完整事件，最后一个元素可能不完整需保留在buffer中
+      const parts = buffer.split('\n\n');
+      buffer = parts.pop() || '';
+      for (let part of parts) {
+        if (!part || !part.trim()) {
+          continue;
+        }
+        let content = part.startsWith('data:') ? part.replace('data:', '').trim() : part.trim();
+        if (!content) {
+          continue;
+        }
+        //update-begin---author:wangshuai---date:2025-03-13---for:【QQYUN-11572】发布到线上不能实时动态，内容不能加载出来，得刷新才能看到全部回答---
+        try {
+          if(content.indexOf(":::card:::") !== -1){
+            content = content.replace(/\s+/g, '');
+          }
+          let parse = JSON.parse(content);
+          await renderText(parse, conversationId, text, options).then((res) => {
+            text = res.returnText;
+            conversationId = res.conversationId;
+          });
+        } catch (error) {
+          console.log('JSON解析失败, content长度:', content.length, ', error:', error);
+        }
+        //update-end---author:wangshuai---date:2025-03-13---for:【QQYUN-11572】发布到线上不能实时动态，内容不能加载出来，得刷新才能看到全部回答---
+      }
+      //update-end---author:wangshuai---date:2025-03-12---for:【QQYUN-11555】聊天时要流式显示消息---
+    }
+    //update-begin---author:wangshuai---date:2025-11-05---for: 如果是断线重连并且文本为空，需要移出前面两条会话---
+    if(!text && isReConnect && chatData.value.length >1){
+      //如果是断线重连的情况下，流结果为空时，移除占位的AI消息，避免空结果也新增聊天记录
+      const lastMsg = chatData.value[chatData.value.length - 1];
+      if (lastMsg && lastMsg.inversion === 'ai' && lastMsg.content === '请稍后') {
+        chatData.value.splice(chatData.value.length - 1, 1);
+        chatData.value.splice(chatData.value.length - 1, 1);
+      }
+    //update-end---author:wangshuai---date:2025-11-05---for: 如果是断线重连并且文本为空，需要移出前面两条会话---
+      localStorage.removeItem('chat_requestId_' + uuid.value);
+      loading.value = false;
+    }
+  }
+
+  /**
+   * ai重连
+   */
+  async function aiReConnection() {
+    //查询requestId
+    let chat = localStorage.getItem("chat_requestId_" + uuid.value);
+    if(chat) {
+      let array = JSON.parse(chat);
+      let message = array.message;
+      let requestId = array.requestId;
+      const result = await defHttp.get({ url: '/airag/chat/receive/' + requestId ,
+        adapter: 'fetch',
+        responseType: 'stream',
+        timeout: 60 * 60 * 1000
+      }, { isTransformResponse: false }).catch(async (err)=>{
+        loading.value = false;
+        localStorage.removeItem('chat_requestId_' + uuid.value);
+      });
+      if(result && message){
+        loading.value = true;
+        isReConnect.value = true;
+        //发送用户消息
+        addChat(uuid.value, {
+          dateTime: new Date().toLocaleString(),
+          content: message,
+          images:uploadUrlList.value?uploadUrlList.value:[],
+          inversion: 'user',
+          error: false,
+          conversationOptions: null,
+          requestOptions: { prompt: message, options: null },
+          eventType: 'message',
+        });
+        let options: any = {};
+        const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions;
+        if (lastContext && usingContext.value) {
+          options = { ...lastContext };
+        }
+        //添加ai消息
+        addChat(uuid.value, {
+          dateTime: new Date().toLocaleString(),
+          content: '请稍后',
+          loading: false,
+          inversion: 'ai',
+          error: false,
+          conversationOptions: null,
+          requestOptions: { prompt: message, options: { ...options } },
+          referenceKnowledge: [],
+          eventType: 'message',
+        });
+        options.message = message;
+        scrollToBottom();
+        //流式输出
+        await renderChatByResult(result,options);
+      } else {
+        loading.value = false;
+        localStorage.removeItem('chat_requestId_' + uuid.value);
+        isReConnect.value = false;
+      }
+    } else {
+      isReConnect.value = false;
+    }
+  }
+
+  //监听开场白
+  watch(
+    () => props.prologue,
+    (val) => {
+      try {
+        if (val) {
+          topChat(val);
+        }
+      } catch (e) {}
+    }
+  );
+
+  //监听开场白预制问题
+  watch(
+    () => props.presetQuestion,
+    (val) => {
+      topChat(props.prologue);
+    }
+  );
+
+  //监听应用信息
+  watch(
+    () => props.formState,
+    (val) => {
+      try {
+        if (val) {
+          appData.value = val;
+          // 检查模型是否支持网络搜索
+          checkModelProvider();
+        }
+      } catch (e) {}
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 编辑对话设置
+  function handleEditSettings() {
+    emit('edit-settings');
+  }
+
+  // 切换网络搜索
+  function toggleWebSearch() {
+    enableSearch.value = !enableSearch.value;
+    if (enableSearch.value) {
+      message.success("已开启联网搜索");
+    } else {
+      message.info("已关闭联网搜索");
+    }
+  }
+
+  /**
+   * 切换网络思考
+   */
+  function toggleThink() {
+    enableThink.value = !enableThink.value;
+    if (enableThink.value) {
+      message.success("已开启深度思考");
+    } else {
+      message.info("已关闭深度思考");
+    }
+  }
+
+  // 检查模型是否支持网络搜索（从appData.metadata.modelInfo中获取）
+  function checkModelProvider() {
+    if (appData.value && appData.value.metadata) {
+      try {
+        const metadata = typeof appData.value.metadata === 'string' 
+          ? JSON.parse(appData.value.metadata) 
+          : appData.value.metadata;
+
+        //是否显示绘图工具
+        showDraw.value = metadata.izDraw === '1';
+        //是否选中生成图片（defaultSelect 为 0 时默认不选中）
+        const defaultSelect = metadata.defaultSelect || metadata.izDraw;
+        enableDraw.value = defaultSelect === '1';
+        
+        drawModelId.value = metadata.drawModelId;
+
+        if (metadata && metadata.modelInfo) {
+          modelProvider.value = metadata.modelInfo.provider || '';
+          modelName.value = metadata.modelInfo.modelName || '';
+          showThink.value = modelName.value === 'deepseek-reasoner';
+        } else {
+          showThink.value = false;
+        }
+      } catch (e) {
+        console.error('解析模型信息失败', e);
+        showThink.value = false;
+        enableDraw.value = false;
+      }
+    } else {
+      showThink.value = false;
+      showDraw.value = false;
+      enableDraw.value = false;
+    }
+  }
+
+  /**
+   * 生成图片
+   */
+  function handleGenerateImage() {
+    enableDraw.value = !enableDraw.value;
+    if (enableDraw.value) {
+      message.success("已开启生成图片");
+    } else {
+      message.info("已关闭生成图片");
+    }
+  }
+
+  //================================================== begin 【QQYUN-14261】AI助手，支持多模态能力- 文档 ====================================
+  /**
+   * 通用文件上传前校验
+   * 
+   * @param file
+   */
+  function beforeUploadFile(file) {
+    const fileName = file.name;
+    const fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
+    const allowFileTypes = ['txt', 'pdf', 'docx', 'doc', 'pptx', 'ppt', 'xlsx', 'xls', 'md'];
+    if (allowFileTypes.indexOf(fileType) === -1) {
+      message.warning('不支持该文件类型上传，请上传 txt, pdf, docx, doc, pptx, ppt, xlsx, xls, md 格式文件');
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 文件上传（非图片）
+   * @param info
+   */
+  function handleChangeFile(info) {
+    let { file, fileList: newFileList } = info;
+    fileList.value = newFileList;
+    if (file.status === 'error' || (file.response && file.response.code == 500)) {
+      message.error(file.response?.message || `${file.name} 上传失败,请查看服务端日志`);
+      return;
+    }
+    fileUrlList.value = fileList.value
+        .filter(item => item.status === 'done' && item.response)
+        .map(item => item.response.message);
+  }
+
+  /**
+   * 删除文件
+   */
+  function deleteFile(index) {
+    fileList.value.splice(index, 1);
+    fileUrlList.value = fileList.value
+        .filter(item => item.status === 'done' && item.response)
+        .map(item => item.response.message);
+  }
+  
+  //================================================== end 【QQYUN-14261】AI助手，支持多模态能力- 文档 ====================================
+  
+  //监听历史信息
+  watch(
+    () => props.historyData,
+    (val) => {
+      try {
+        //update-begin---author:wangshuai---date:2025-03-06---for:【QQYUN-11384】浏览器打开应用开场白丢了---
+        if (val && val.length > 0) {
+          chatData.value = cloneDeep(val);
+          if(chatData.value[0]){
+            topicId.value = chatData.value[0].topicId
+          }
+        }else{
+          chatData.value = [];
+          headerTitle.value = props.chatTitle;
+        }
+        //update-begin---author:wangshuai---date:2025-11-18---for:【QQYUN-14049】【AI】没有开场白，就不展示预设问题了---
+        if((props.prologue || props.presetQuestion) && props.chatTitle){
+        //update-end---author:wangshuai---date:2025-11-18---for:【QQYUN-14049】【AI】没有开场白，就不展示预设问题了---
+          topChat(props.prologue)
+        }
+        //ai回复重连
+        aiReConnection();
+      } catch (e) {
+        console.log(e)
+      }
+      //update-end---author:wangshuai---date:2025-03-06---for:【QQYUN-11384】浏览器打开应用开场白丢了---
+    },
+    { deep: true, immediate: true }
+  );
+
+  onMounted(() => {
+    scrollToBottom();
+    uploadUrlList.value = [];
+    fileInfoList.value = [];
+    fileUrlList.value = [];
+    fileList.value = [];
+    // 检查模型是否支持网络搜索
+    checkModelProvider();
+  });
+</script>
+
+<style lang="less" scoped>
+  .chatWrap {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    .content {
+      height: 100%;
+      width: 100%;
+      background: #fff;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .main {
+    flex: 1;
+    min-height: 0;
+    .scrollArea {
+      overflow-y: auto;
+      height: 100%;
+    }
+    .chatContentArea {
+      padding: 10px;
+    }
+  }
+  .emptyArea {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #d4d4d4;
+  }
+  .stopArea {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+  }
+  .footer {
+    display: flex;
+    flex-direction: column;
+    padding: 6px 16px;
+    .topArea {
+      padding-left: 6%;
+      margin-bottom: 6px;
+    }
+    .bottomArea {
+      display: flex;
+      align-items: center;
+
+      .ant-input {
+        margin: 0 8px;
+      }
+      .ant-input,
+      .ant-btn {
+        height: 36px;
+      }
+      textarea.ant-input {
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+      .contextBtn,
+      .delBtn {
+        padding: 0;
+        width: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .delBtn {
+        margin-right: 8px;
+      }
+      .contextBtn {
+        color: #a8071a;
+        &.enabled {
+          color: @primary-color;
+        }
+        font-size: 18px;
+      }
+      .sendBtn {
+        font-size: 14px;
+        width: 100%;
+        display: flex;
+        padding: 4px 6px;
+        align-items: center;
+        &.enabled {
+          color: #0a66ff !important;
+        }
+      }
+      .webSearchBtn {
+        border-radius: 8px;
+        padding: 4px 8px;
+        height: 30px;
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: #3d4353;
+        transition: all .2s ease;
+        :deep(.anticon){
+          margin-right: 6px;
+          color: #3d4353;
+        }
+        &:hover{
+          border-color: #d2d7e5;
+          background-color: #f7f9fc;
+        }
+        &.enabled {
+          background-color: rgba(10,102,255,0.08);
+          border-color: #0a66ff;
+          color: #0a66ff;
+          box-shadow: none;
+          font-weight: 500;
+          :deep(.anticon) {
+            color: #0a66ff !important;
+          }
+        }
+      }
+      .stopBtn {
+        width: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 8px;
+      }
+    }
+  }
+  :deep(.chatgpt .markdown-body) {
+    background-color: #f4f6f8;
+  }
+  :deep(.ant-message) {
+    top: 50% !important;
+  }
+  .header-title{
+    color: #101828;
+    font-size: 16px;
+    font-weight: 400;
+    padding-bottom: 8px;
+    margin-left: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 30px;
+    
+    .title-content{
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      overflow: hidden;
+      
+      > span{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    
+    .header-actions{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+    
+    .edit-btn{
+      padding: 2px 4px;
+      color: #999;
+      flex-shrink: 0;
+      height: 24px;
+      
+      &:hover{
+        color: @primary-color;
+      }
+      
+      :deep(.anticon){
+        font-size: 16px;
+      }
+    }
+    
+    .header-advertisint{
+      display:flex;
+      margin-right: 20px;
+      font-size: 12px;
+    }
+  }
+  .chat-textarea{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-radius: 15px;
+    border-style: solid;
+    border-width: 1px;
+    flex-direction: column;
+    transition: width 0.3s;
+    border-color: #d2d7e5;
+    .textarea-top{
+      border-bottom: 1px solid #f0f0f5;
+      padding: 12px 28px;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      .top-image{
+        display: flex;
+        img{
+          border-radius: 8px;
+          cursor: pointer;
+          height: 60px;
+          position: relative;
+          width: 60px;
+        }
+      }
+      /*begin 文件的样式*/
+      .file-card {
+        display: flex;
+        align-items: center;
+        background: #f4f6f8;
+        border-radius: 8px;
+        padding: 8px 12px;
+        width: 200px;
+        position: relative;
+        
+        .file-card-icon {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 8px;
+          .file-thumb {
+            width: 32px;
+            height: 32px;
+            border-radius: 4px;
+            object-fit: cover;
+          }
+        }
+        
+        .file-card-info {
+          flex: 1;
+          overflow: hidden;
+          .file-name {
+            font-size: 14px;
+            color: #333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .file-size {
+            font-size: 12px;
+            color: #999;
+          }
+        }
+        
+        .file-card-close {
+          position: absolute;
+          top: -6px;
+          right: -6px;
+          width: 16px;
+          height: 16px;
+          background: #ccc;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          color: #fff;
+          font-size: 10px;
+          opacity: 0;
+          transition: opacity 0.2s;
+          
+          &:hover {
+            background: #ff4d4f;
+          }
+        }
+        
+        &:hover .file-card-close {
+          opacity: 1;
+        }
+        /*end 文件的样式*/
+      }
+    }
+    .textarea-bottom{
+      display: flex;
+      flex-direction: column;
+      flex: 1 1;
+      min-height: 48px;
+      position: relative;
+      padding: 2px 10px;
+      width: 100%;
+      /*begin 底部样式*/
+      .textarea-action-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-top: 8px;
+
+        .left-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+        .right-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+        .sendBtn {
+          width: auto;
+          padding: 4px 6px;
+          height: 30px;
+        }
+      }
+      /*end 底部样式*/
+    }
+  }
+  .chat-textarea:hover{
+    border-color: #9dc1fb;
+  }
+  .textarea-active{
+    border-color: #98bdfa !important;
+  }
+  :deep(.ant-divider-vertical){
+    margin: 0 2px;
+  }
+  .upload-icon{
+    cursor: pointer;
+    position: absolute;
+    background-color: #1D1C23;
+    color: white;
+    border-radius: 50%;
+    padding: 4px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 4px #e6e6e6;
+    margin-left: 44px;
+    margin-top: -4px;
+  }
+  .top-image:hover{
+    .upload-icon{
+      display: flex;
+    }
+  }
+  
+  @media (max-width: 600px) {
+    //手机下的样式 平板不需要调整
+    .footer{
+      padding: 0;
+      .bottomArea{
+        .delBtn{
+          margin-right: 0;
+        }
+      }
+    }
+    .chatWrap{
+      padding: 10px 10px 10px 0;
+    }
+    .main .chatContentArea{
+      padding: 10px 0 0 10px;
+    }
+  }
+</style>
+<style lang="less">
+ .ai-chat-modal{
+   z-index: 9999 !important;
+ }
+ .ai-chat-message{
+   z-index: 9999 !important;
+ }
+
+ .chat-upload-dropdown .ant-dropdown-menu{
+   border-radius: 10px;
+   padding: 6px 4px;
+ }
+ .chat-upload-dropdown .ant-dropdown-menu-item:hover{
+   background-color: #f0f6ff;
+ }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/chatMessage.vue b/src/views/super/airag/aiapp/chat/chatMessage.vue
new file mode 100644
index 0000000..c423442
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/chatMessage.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="chat" :class="[inversion === 'user' ? 'self' : 'chatgpt']" v-if="getText || props.error || (props.presetQuestion && props.presetQuestion.length>0)">
+    <div class="avatar" v-if="showAvatar !== 'no'">
+      <img v-if="inversion === 'user'" :src="avatar()" />
+      <img v-else :src="getAiImg()" />
+    </div>
+    <div class="content">
+      <p class="date" v-if="showAvatar !== 'no'">
+        <span v-if="inversion === 'ai'" style="margin-right: 10px">{{appData.name || 'AI助手'}}</span>
+        <span>{{ dateTime }}</span>
+      </p>
+      <div v-if="inversion === 'user' && images && images.length>0" class="images">
+          <div v-for="(item,index) in images" :key="index" class="image" @click="handlePreview(item)">
+            <img :src="getImageUrl(item)"/>
+          </div>
+      </div>     
+      <div v-if="inversion === 'user' && files && files.length>0" class="file-list">
+          <div v-for="(item,index) in files" :key="index" class="file-item" @click="handleFilePreview(item?.filePath || item)">
+            <div class="file-icon">
+              <Icon :icon="getFileIcon(item?.filePath || item)" :color="getFileIconColor(item?.filePath || item)" size="24" />
+            </div>
+            <div class="file-name" :title="item.name">{{ getFileName(item?.filePath || item)}}</div>
+          </div>
+      </div>
+      <div v-if="inversion === 'ai' && retrievalText && loading" class="retrieval">
+        {{retrievalText}}
+      </div>
+      <div v-if="inversion === 'ai' && isCard" class="card">
+        <a-row>
+          <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex:1" v-for="item in getCardList()">
+            <a-card class="ai-card" @click="aiCardHandleClick(item.linkUrl)">
+               <div class="ai-card-title">{{item.productName}}</div>
+               <div class="ai-card-img">
+                 <img :src="item.productImage">
+               </div>
+               <span class="ai-card-desc">{{item.descr}}</span>
+            </a-card>
+          </a-col>
+        </a-row>
+      </div>
+      <div v-if="inversion === 'ai' && isCardConfig" class="card">
+        <a-row>
+          <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex:1;margin-right: 10px;" v-for="item in getCardConfigList()">
+            <CardTemplate :template-id="cardConfig?.templateId" :card-data="item" :card-config="cardConfig" @click="handleJumpClick(item)"></CardTemplate>
+          </a-col>
+        </a-row>
+      </div>
+      <div class="thinkArea" style="margin-bottom: 10px" v-if="!isCard && !isCardConfig && (eventType === 'thinking' || eventType === 'thinking_end')">
+        <a-collapse v-model:activeKey="activeKey" ghost>
+          <a-collapse-panel :key="uuid" :header="loading?'正在思考中':'思考结束'">
+            <ThinkText :text="text" :inversion="inversion" :error="error" :loading="loading"></ThinkText>
+          </a-collapse-panel>
+        </a-collapse>
+      </div>
+      <div class="msgArea" v-else-if="!isCard && !isCardConfig" :class="showAvatar == 'no' ? 'hidden-avatar' : ''">
+        <chatText :text="text" :inversion="inversion" :error="error" :errorMsg="errorMsg" :currentToolTag="currentToolTag" :loading="loading" :referenceKnowledge="referenceKnowledge" :isLast="isLast"></chatText>
+      </div>
+      <div v-if="presetQuestion" v-for="item in presetQuestion" class="question" @click="presetQuestionClick(item.descr)">
+        <span>{{item.descr}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import chatText from './chatText.vue';
+  import ThinkText from './ThinkText.vue';
+  import defaultAvatar from "@/assets/images/ai/avatar.jpg";
+  import { useUserStore } from '/@/store/modules/user';
+  import defaultImg from '../img/ailogo.png';
+  import { ref } from 'vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { getFileAccessHttpUrl, getFileIcon, getFileIconColor } from '/@/utils/common/compUtils';
+  import { createImgPreview } from "@/components/Preview";
+  import { computed } from "vue";
+  import CardTemplate from '/@/views/super/airag/aiapp/chat/components/CardTemplate.vue';
+  import { useGlobSetting } from "@/hooks/setting";
+  import {encryptByBase64} from "@/utils/cipher";
+
+  const { domainUrl, viewUrl } = useGlobSetting();
+  const props = defineProps(['dateTime', 'text', 'inversion', 'error', 'loading','errorMsg', 'currentToolTag', 'appData','presetQuestion','images','retrievalText', 'referenceKnowledge', 'eventType', 'showAvatar',"files", 'isLast']);
+
+  const uuid = ref<any>(buildUUID());
+  const activeKey = ref<any>(uuid.value);
+  const getText = computed(()=>{
+    let text = props.text || props.retrievalText;
+    if(text){
+      text = text.trim();
+    }
+    return text;
+  })
+
+  const isCard = computed(() => {
+    let text = props.text;
+    if (text && text.indexOf('::card::') != -1) {
+      return true;
+    }
+    return false;
+  });  
+  
+  const isCardConfig = computed(() => {
+    let text = props.text;
+    if (text && text.indexOf('::cardConfig::') != -1) {
+      return true;
+    }
+    return false;
+  });
+  //卡片配置
+  const cardConfig = ref<any>();
+
+  const { userInfo } = useUserStore();
+  const avatar = () => {
+    return getFileAccessHttpUrl(userInfo?.avatar) || defaultAvatar;
+  };
+  const emit = defineEmits(['send']);
+  const getAiImg = () => {
+    return getFileAccessHttpUrl(props.appData?.icon) || defaultImg;
+  };
+
+  /**
+   * 预设问题点击事件
+   *
+   */
+  function presetQuestionClick(descr) {
+    emit("send",descr)
+  }
+
+  /**
+   * 获取图片
+   *
+   * @param item
+   */
+  function getImageUrl(item) {
+    let url = item;
+    if(item.hasOwnProperty('url')){
+      url = item.url;
+    }
+    if(item.hasOwnProperty('base64Data') && item.base64Data){
+      let mimeType = item.mimeType ? item.mimeType:'image/png';
+      return "data:"+ mimeType +";base64,"+ item.base64Data;
+    }
+    return getFileAccessHttpUrl(url);
+  }
+
+  /**
+   * 图片预览
+   * @param url
+   */
+  function handlePreview(url){
+    const onImgLoad = ({ index, url, dom }) => {
+      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
+    };
+    let imageList = [getImageUrl(url)];
+    createImgPreview({ imageList: imageList, defaultWidth: 700, rememberState: true, onImgLoad });
+  }
+
+  /**
+   * 获取卡片列表
+   */
+  function getCardList() {
+    let text = props.text;
+    let card = text.replace('::card::', '').replace(/\s+/g, '');
+    try {
+      return JSON.parse(card);
+    } catch (e) {
+      console.log(e)
+      return '';
+    }
+  }
+
+  /**
+   * ai卡片点击事件
+   * @param url
+   */
+  function aiCardHandleClick(url){
+    window.open(url,'_blank');
+  }
+
+
+  /**
+   * 从config获取取卡片列表
+   */
+  function getCardConfigList() {
+    let text = props.text;
+    let card = text.replace('::cardConfig::', 'cardConfig').replace(/\s+/g, '');
+    try {
+      let parse = JSON.parse(card);
+      cardConfig.value = JSON.parse(parse?.cardConfig);
+      return JSON.parse(parse?.content);
+    } catch (e){
+      console.log(e)
+      return '';
+    }
+  }
+
+  /**
+   * 卡片点击跳转
+   */
+  function handleJumpClick(item) {
+    if(cardConfig.value?.enableJump){
+      let src = item[cardConfig.value?.jumpUrl];
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      src = src.replace(reg,domainUrl);
+      window.open(src,"_blank")
+    }
+  }
+
+  /**
+   * 获取文件名字
+   * 
+   * @param fileUrl
+   */
+  function getFileName(fileUrl){
+    if(!fileUrl) {
+      return '未命名的文件';
+    }
+    let fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1).toLowerCase();
+    fileName = fileName.substring(0,fileName.lastIndexOf("."));
+    return fileName;
+  }
+
+  /**
+   * 文件预览
+   * 
+   * @param fileUrl
+   */
+  function handleFilePreview(fileUrl) {
+    let filePath = encodeURIComponent(encryptByBase64(getFileAccessHttpUrl(fileUrl)));
+    let url = `${viewUrl}?url=` + filePath;
+    window.open(url, "_blank")
+  }
+</script>
+
+<style lang="less" scoped>
+  .chat {
+    display: flex;
+    margin-bottom: 1.5rem;
+    &.self {
+      flex-direction: row-reverse;
+      .avatar {
+        margin-right: 0;
+        margin-left: 10px;
+      }
+      .msgArea {
+        flex-direction: row-reverse;
+        margin-bottom: 6px;
+      }
+      .thinkArea{
+        margin: 0;
+        padding: 5px 0 5px 22px;
+        position: relative;
+      }
+      .date {
+        text-align: right;
+      }
+    }
+  }
+  :deep(.ant-collapse-header){
+    padding: 0 !important;
+  }
+  .hidden-avatar{
+    left: 44px;
+    position: relative;
+    top: -18px;
+  }
+  .avatar {
+    flex: none;
+    margin-right: 10px;
+    img {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    svg {
+      font-size: 28px;
+    }
+  }
+  .chat.chatgpt .avatar img{
+    border-radius: 4px;
+  }
+  .content {
+    width: 90%;
+    .date {
+      color: #b4bbc4;
+      font-size: 0.75rem;
+      margin-bottom: 10px;
+    }
+    .msgArea {
+      display: flex;
+    }
+  }
+
+  .question{
+    margin-top: 10px;
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    background-color: #ffffff;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    cursor: pointer;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+  }
+
+  .images{
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    display: flex;
+    gap: 10px;
+    justify-content: end;
+    .image{
+      width: 120px;
+      height: 80px;
+      cursor: pointer;
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  /*begin文件列表的样式*/
+  .file-list {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-end;
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    background: #f4f6f8;
+    border-radius: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    width: fit-content;
+    max-width: 100%;
+
+    .file-icon {
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+    }
+
+    .file-name {
+      font-size: 14px;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+    }
+  }
+  /*end文件列表的样式*/
+
+  .retrieval,
+  .card {
+    background-color: #f4f6f8;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .retrieval:after{
+    animation: blink 1s steps(5, start) infinite;
+    color: #000;
+    content: '_';
+    font-weight: 700;
+    margin-left: 3px;
+    vertical-align: baseline;
+  }
+  .card{
+    width: 100%;
+    background-color: unset;
+  }
+  .ai-card{
+     width: 98%;
+     height: 100%;
+     cursor: pointer;
+    .ai-card-title{
+      width: 100%;
+      line-height: 20px;
+      letter-spacing: 0;
+      white-space: pre-line;
+      overflow: hidden;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      font-weight: 600;
+      font-size: 18px;
+      text-align: left;
+      color: #191919;
+      -webkit-line-clamp: 1;
+    }
+    .ai-card-img{
+      margin-top: 10px;
+      background-color: transparent;
+      border-radius: 8px;
+      display: flex;
+      width: 100%;
+      height: max-content;
+    }
+    .ai-card-desc{
+      margin-top: 10px;
+      width: 100%;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: 0;
+      white-space: pre-line;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      text-align: left;
+      color: #666f;
+      -webkit-line-clamp: 3;
+    }
+  }
+  @media (max-width: 600px) {
+    .content{
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/chatText.vue b/src/views/super/airag/aiapp/chat/chatText.vue
new file mode 100644
index 0000000..9510d4f
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/chatText.vue
@@ -0,0 +1,466 @@
+<template>
+  <div v-if="parsedText != '' || error" class="textWrap" :class="[inversion === 'user' ? 'self' : (isOnlyImage ? 'chatgpt-image' : 'chatgpt')]" ref="textRef">
+    <div v-if="inversion != 'user'" :style="{ width: getIsMobile? screenWidth : 'auto' }">
+      <div ref="markdownBodyRef" class="markdown-body" :class="{ 'markdown-body-generate': loading }" v-html="parsedText" />
+      <template v-if="showRefKnow">
+        <a-divider orientation="left">引用</a-divider>
+        <template v-for="(item, idx) in referenceKnowledge" :key="idx">
+          <a-tooltip :title="item.content?.substring(0, 800)">
+            <a-tag style="min-width: 80px;background: #F7F8FA;padding-inline: 0 7px">
+              <a-space style="min-height: 30px;padding-left: 4px;padding-right: 4px;background-color: #F0F1F6;color: #788194">
+                <div>{{ 'chunk-' + item.chunk}}</div>
+              </a-space>
+              <a-space style="min-height: 30px;padding-left: 4px;">
+                <img :src="knowledgePng" width="14" height="14" style="position: relative; top: -2px"/>
+                <div style="max-width: 240px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
+                  {{ item.docName }}
+                </div>
+              </a-space>
+            </a-tag>
+          </a-tooltip>
+        </template>
+      </template>
+      <div v-if="error" class="error-message">
+        <p>{{ errorMsg }}</p>
+      </div>
+    </div>
+    <div v-else class="msg" v-html="parsedText" />
+  </div>
+  <ImageViewer v-if="amplifyImage" :imageUrl="imageUrl" @hide="pictureHide"></ImageViewer>
+  <!-- 聊天中渲染JeecgTag -->
+  <template v-if="jeecgTagList.length">
+    <template v-for="item of jeecgTagList" :key="item.key">
+      <teleport :to="item.to">
+        <Component :is="item.tag.component" :data="item.data" :loading="loading" />
+      </teleport>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+  import type { JeecgTag } from './jeecg-tags/types';
+  import { computed, nextTick, onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
+  import { throttle } from 'lodash-es';
+  import md5 from 'crypto-js/md5';
+  import MarkdownIt from 'markdown-it';
+  import mdKatex from '@traptitech/markdown-it-katex';
+  import mila from 'markdown-it-link-attributes';
+  import hljs from 'highlight.js';
+  import './style/github-markdown.less';
+  import './style/highlight.less';
+  import './style/style.less';
+  import ImageViewer from '@/views/super/airag/aiapp/chat/components/ImageViewer.vue';
+  import { useAppInject } from "@/hooks/web/useAppInject";
+  import { useGlobSetting } from "@/hooks/setting";
+  import { mdPluginJeecgTag, JEECG_TAG_CLASS, jeecgTagMap } from './jeecg-tags'
+  import knowledgePng from '../../aiknowledge/icon/knowledge.png'
+
+  /**
+   * 屏幕宽度
+   */
+  const screenWidth = ref<string>();
+  const { domainUrl } = useGlobSetting();
+  const { getIsMobile } = useAppInject();
+
+  const props = defineProps(['dateTime', 'text', 'inversion', 'error', 'errorMsg', 'currentToolTag', 'loading', 'referenceKnowledge', 'isLast']);
+  const textRef = ref();
+  const markdownBodyRef = ref<HTMLDivElement>();
+
+  //图片地址
+  const imageUrl = ref<string>('');
+  //是否放大图片
+  const amplifyImage = ref<boolean>(false);
+
+  const parsedText = ref<string>('');
+
+  // 解析出来的 jeecgTag 列表
+  const jeecgTagList = ref<{
+    key: string;
+    to: HTMLDivElement;
+    tag: JeecgTag;
+    data: string;
+  }[]>([]);
+
+  const mdi = new MarkdownIt({
+    html: true,
+    linkify: true,
+    highlight(code, language) {
+      const validLang = !!(language && hljs.getLanguage(language));
+      if (validLang) {
+        const lang = language ?? '';
+        return highlightBlock(hljs.highlight(code, { language: lang }).value, lang);
+      }
+      return highlightBlock(hljs.highlightAuto(code).value, '');
+    },
+  });
+
+  // 自定义 mdi 插件
+  mdi.use(mdPluginJeecgTag);
+  // 官方 mdi 插件
+  mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
+  mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
+
+  /**
+   * 处理聊天文本并在一定时间内节流更新
+   */
+  const updateTextContent = throttle(() => {
+    let value = props.text ?? '';
+    if (props.inversion !== 'user') {
+      // 先替换图片宽度与域名占位符后再渲染 markdown
+      value = replaceImageWith(value);
+      value = replaceDomainUrl(value);
+      parsedText.value = mdi.render(value);
+      // 解析 jeecgTag 标签
+      parseJeecgTag();
+      return;
+    }
+    // 用户消息保留换行展示
+    parsedText.value = value.replace("\n", "<br>");
+  }, 100);
+
+  // 是否显示引用知识库
+  const showRefKnow = computed(() => {
+    const {loading, referenceKnowledge} = props
+    if (loading) {
+      return false;
+    }
+    return Array.isArray(referenceKnowledge) && referenceKnowledge.length > 0;
+  })
+
+  // 判断是否只有图片
+  const isOnlyImage = computed(() => {
+    if (showRefKnow.value){
+      return false;
+    }
+    
+    const content = props.text || '';
+    if (!content){
+      return false;
+    }
+    
+    //匹配![图片1](url1) 
+    const imageRegex = /!\[.*?\]\(.*?\)/g;
+    if (!imageRegex.test(content)) {
+      return false;
+    }
+    
+    //替换之后是否存在文本
+    const remaining = content.replace(imageRegex, '').trim();
+    return remaining.length === 0;
+  });
+
+  // 监听文本变化，触发界面更新
+  watch(() => props.text, () => updateTextContent(), {immediate: true});
+
+  // 监听 当前调用的工具 变化，追加渲染内容
+  watch(() => props.currentToolTag, () => {
+    const {isLast, inversion, currentToolTag, loading} = props;
+    if (isLast && inversion != 'user' && currentToolTag && loading) {
+      parsedText.value += mdi.render(currentToolTag);
+      // 解析 jeecgTag 标签
+      parseJeecgTag();
+    }
+  }, {immediate: true});
+
+  //替换图片宽度
+  function replaceImageWith(markdownContent) {
+    //update-begin---author:wangshuai---date:2026-01-08---for: 兼容返回多张图片集图片默认宽度调整---
+    // 1. 支持图片设置width的写法 ![](/static/jimuImages/screenshot_1617252560523.png =100)
+    // 必须有空格，避免匹配到url参数中的=
+    const regex = /!\[([^\]]*)\]\(([^)]+)\s=([0-9]+)\)/g;
+    markdownContent = markdownContent.replace(regex, (match, alt, src, width) => {
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      src = src.replace(reg,domainUrl);
+      return `<div class="chat-image-custom"><img src='${src}' alt='${alt}' width='${width}' /></div>`;
+    });
+
+    // 2. 处理普通图片，实现多图并列显示（如生成图片场景）
+    // 统计剩余的markdown图片数量
+    const regexStandard = /!\[([^\]]*)\]\(([^)]+)\)/g;
+    const matches = markdownContent.match(regexStandard);
+    const count = matches ? matches.length : 0;
+    
+    if (count > 0) {
+      markdownContent = markdownContent.replace(regexStandard, (match, alt, src) => {
+        let reg = /#\s*{\s*domainURL\s*}/g;
+        src = src.replace(reg, domainUrl);
+        // 如果有多张图片，使用Grid布局（一行4个）
+        if (count > 1) {
+             return `<div class="chat-image-grid-item"><img src='${src}' alt='${alt}' /></div>`;
+        }
+        // 单张图片保持默认（或包裹以便控制）
+        return `<div class="chat-image-single"><img src='${src}' alt='${alt}' /></div>`;
+      });
+    }
+    return markdownContent;
+    //update-end---author:wangshuai---date:2026-01-08---for: 兼容返回多张图片集图片默认宽度调整---
+  };
+
+  //替换domainURL
+  function replaceDomainUrl(markdownContent) {
+    const regex = /!\[([^\]]*)\]\(.*?#\s*{\s*domainURL\s*}.*?\)/g;
+    return markdownContent.replace(regex, (match) => {
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      return match.replace(reg,domainUrl);
+    })
+  }
+
+  function highlightBlock(str: string, lang?: string) {
+    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`;
+  }
+  function addCopyEvents() {
+    if (textRef.value) {
+      const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
+      copyBtn.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const code = btn.parentElement?.nextElementSibling?.textContent;
+          if (code) {
+            copyToClip(code).then(() => {
+              btn.textContent = '复制成功';
+              setTimeout(() => {
+                btn.textContent = '复制代码';
+              }, 1e3);
+            });
+          }
+        });
+      });
+    }
+  }
+
+  function removeCopyEvents() {
+    if (textRef.value) {
+      const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy');
+      copyBtn.forEach((btn) => {
+        btn.removeEventListener('click', () => {});
+      });
+    }
+  }
+
+
+  /**
+   * 添加图片点击事件
+   */
+  function addImageClickEvent() {
+    if (textRef.value) {
+      const image = textRef.value.querySelectorAll('img');
+      image.forEach((img) => {
+        img.addEventListener('click', () => {
+          imageUrl.value = img.src;
+          amplifyImage.value = true;
+        })
+      });
+    }
+  }
+
+
+  /**
+   * 移出图片点击事件
+   */
+  function removeImageClickEvent(){
+    if (textRef.value) {
+      const image = textRef.value.querySelectorAll('img');
+      image.forEach((img) => {
+        img.removeEventListener('click', () => { })
+      });
+    }
+  }
+
+  /**
+   * 图片隐藏
+   */
+  function pictureHide(){
+    amplifyImage.value = false;
+    imageUrl.value = ""
+  }
+
+
+  /**
+   * 设置markdown body整体宽度
+   */
+  function setMarkdownBodyWidth() {
+    //平板
+    console.log("window.innerWidth::",window.innerWidth)
+    if(window.innerWidth>600 && window.innerWidth<1024){
+      screenWidth.value = window.innerWidth - 120 + 'px';
+    }else if(window.innerWidth < 600){
+      //手机
+      screenWidth.value = window.innerWidth - 60 + 'px';
+    }
+  }
+
+  // 解析JeecgTag标签
+  async function parseJeecgTag() {
+    await nextTick();
+    if (!markdownBodyRef.value) {
+      return;
+    }
+
+    jeecgTagList.value = [];
+    const elements = markdownBodyRef.value.querySelectorAll('.' + JEECG_TAG_CLASS);
+    elements.forEach((el) => {
+      const tagName = el.nodeName.toLowerCase();
+      const tag = jeecgTagMap.get(tagName);
+      if (!tag) {
+        console.warn(`未识别的 jeecg 标签:`, tagName, el);
+        return;
+      }
+      const renderEl = el.querySelector('render') as HTMLDivElement;
+      if (!renderEl) {
+        if (props.loading) {
+          // 渲染中
+          el.innerHTML = `<div style="color: #888; margin-top: 12px;">图表渲染中，请稍候...</div>`;
+          return;
+        }
+        el.innerHTML = `<div style="color: red;">模型返回的图表渲染格式不正确，请优化提示词或重新尝试。</div>`;
+        return;
+      }
+
+      const dataEl = el.querySelector('data');
+      const dataStr = dataEl?.textContent || '';
+      renderJeecgTag(tag, dataStr, renderEl);
+    });
+  }
+
+  /**
+   * 提交渲染 jeecg 标签
+   */
+  function renderJeecgTag(tag: JeecgTag, data: string, renderEl: HTMLDivElement) {
+    jeecgTagList.value.push({
+      key: md5(tag.name + '_' + data).toString(),
+      to: renderEl,
+      tag: tag,
+      data: data,
+    });
+  }
+
+  onMounted(() => {
+    addCopyEvents();
+    addImageClickEvent();
+    setMarkdownBodyWidth();
+    window.addEventListener('resize', setMarkdownBodyWidth);
+  });
+
+  onUpdated(() => {
+    addCopyEvents();
+    addImageClickEvent();
+  });
+
+  onUnmounted(() => {
+    removeCopyEvents();
+    removeImageClickEvent();
+    window.removeEventListener('resize', setMarkdownBodyWidth);
+  });
+
+  function copyToClip(text: string) {
+    return new Promise((resolve, reject) => {
+      try {
+        const input: HTMLTextAreaElement = document.createElement('textarea');
+        input.setAttribute('readonly', 'readonly');
+        input.value = text;
+        document.body.appendChild(input);
+        input.select();
+        if (document.execCommand('copy')) document.execCommand('copy');
+        document.body.removeChild(input);
+        resolve(text);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .textWrap {
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .error {
+    background: linear-gradient(135deg, #FF4444, #FF914D) !important;
+    border-radius: 0.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .error-message {
+    color: #FF4444 !important
+  }
+
+  .self {
+    // background-color: #d2f9d1;
+    background-color: @primary-color;
+    color: #fff;
+    overflow-wrap: break-word;
+    line-height: 1.625;
+    min-width: 20px;
+  }
+  .chatgpt {
+    background-color: #f4f6f8;
+
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .chatgpt-image {
+    .markdown-body{
+      background-color: transparent !important;
+    }
+  }
+  @media (max-width: 1024px) {
+    //手机和平板下的样式
+    .textWrap{
+      margin-left: -40px;
+      margin-top: 10px;
+    }
+  }
+
+  // 生成图片的样式
+  :deep(.chat-image-grid-item) {
+    display: inline-block;
+    width: 24%;
+    padding: 4px;
+    box-sizing: border-box;
+    vertical-align: top;
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 4px;
+      cursor: pointer;
+      object-fit: cover;
+      aspect-ratio: 1/1;
+    }
+  }
+  :deep(.chat-image-single) {
+    img {
+      max-width: 50%;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .markdown-body {
+    :deep(.jeecg-tag) {
+      display: block;
+      margin: 8px 0;
+
+      data {
+        display: none;
+      }
+
+      render {
+        display: block;
+        width: 100%;
+        height: auto;
+        min-width: 300px;
+      }
+    }
+  }
+
+</style>
diff --git a/src/views/super/airag/aiapp/chat/components/CardTemplate.vue b/src/views/super/airag/aiapp/chat/components/CardTemplate.vue
new file mode 100644
index 0000000..2416e5c
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/components/CardTemplate.vue
@@ -0,0 +1,308 @@
+<!-- card 官方模板 -->
+<template>
+  <div class="card-select-panel" @click="handleClick">
+    <!-- 卡片内容 -->
+    <div class="card-item">
+      <div class="card-title">{{ getTitle }}</div>
+      <!-- 缩略图左侧变体 -->
+      <div v-if="getTemplateId === 'template-1'" class="card-top">
+        <div class="thumb" v-if="!getImage">
+          <div class="thumb-dot"></div>
+          <div class="thumb-mountain"></div>
+        </div>
+        <div v-else class="thumb-image">
+          <img :src="getImage" />
+        </div>
+        <div class="desc clamp">
+          {{ getContent }}
+        </div>
+      </div>
+
+      <!-- 缩略图右侧变体 -->
+      <div v-else-if="getTemplateId === 'template-2'" class="card-top">
+        <div class="desc clamp">
+          {{ getContent }}
+        </div>
+        <div class="thumb" v-if="!getImage">
+          <div class="thumb-dot"></div>
+          <div class="thumb-mountain"></div>
+        </div>
+        <div v-else class="thumb-image">
+          <img :src="getImage" />
+        </div>
+      </div>
+
+      <!-- 横幅图片变体 -->
+      <div v-else-if="getTemplateId === 'template-3'">
+        <div class="banner" v-if="!getImage">
+          <div class="banner-dot"></div>
+          <div class="banner-mountain"></div>
+        </div>
+        <div v-else class="banner-image">
+          <img :src="getImage" />
+        </div>
+        <div class="desc">
+          {{ getContent }}
+        </div>
+      </div>
+
+      <!-- 纯文本变体 -->
+      <div v-else-if="getTemplateId === 'template-4'" class="desc">
+        {{ getContent }}
+      </div>
+      <div v-if="showDeleteIcon" class="delete">
+        <Icon icon="ant-design:close-outlined" @click.parent.stop="handleDelete"></Icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits, computed } from 'vue';
+  import {useGlobSetting} from "@/hooks/setting";
+  const props = defineProps({
+    templateId: { type: String, default: '' },
+    showDeleteIcon: { type: Boolean, default: false },
+    cardData: { type: Object, default: null },
+    cardConfig: { type: Object, default: null },
+  });
+  const emit = defineEmits(['register', 'click', 'delete']);
+  const { domainUrl } = useGlobSetting();
+  const content = ref<string>('内容描述是一种重要的沟通和表达，它在描述事物时发挥着至关重要的作用');
+
+  //获取模板id
+  const getTemplateId = computed(() => props.templateId);
+
+  //获取内容
+  const getContent = computed(() => {
+    if (props.cardData && props.cardConfig) {
+      return props.cardData[props.cardConfig?.content];
+    }
+    return content;
+  });
+
+  //获取文本
+  const getTitle = computed(() => {
+    if (props.cardData && props.cardConfig) {
+      return props.cardData[props.cardConfig?.title];
+    }
+    return '标题';
+  });
+
+  //获取图片
+  const getImage = computed(() => {
+    if (props.cardData && props.cardConfig) {
+      let src = props.cardData[props.cardConfig?.image];
+      let reg = /#\s*{\s*domainURL\s*}/g;
+      src = src.replace(reg,domainUrl);
+      return src;
+    }
+    return '';
+  });
+
+  /**
+   * 卡片点击事件
+   */
+  function handleClick() {
+    emit('click');
+  }
+
+  /**
+   * 卡片删除事件
+   */
+  function handleDelete() {
+    emit('delete');
+  }
+</script>
+
+<style scoped lang="less">
+  .card-select-panel {
+    padding: 8px 0;
+    cursor: pointer;
+  }
+  /* 标题 */
+  .card-title {
+    width: 100%;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 10px;
+    line-height: 20px;
+    letter-spacing: 0;
+    white-space: pre-line;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    font-size: 18px;
+    text-align: left;
+    -webkit-line-clamp: 1;
+  }
+
+  /* 描述文本 */
+  .desc {
+    color: #667085;
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  /* 多行省略，用于第一张卡片（示例） */
+  .clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* 顶部缩略图行（缩略图 + 描述） */
+  .card-top {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+  /* 卡片容器 */
+  .card-item {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: 14px;
+    background: #f8fafc;
+    border: 1px solid #e9edf3;
+    padding: 14px 10px;
+    transition: all 0.2s ease;
+  }
+
+  /* 轻微内阴影与悬浮效果 */
+  .card-item::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    pointer-events: none;
+  }
+  .card-item:hover {
+    border-color: #dbe3ea;
+    background: #f9fbfd;
+    .delete {
+      display: block;
+    }
+  }
+  /* 描述文本 */
+  .desc {
+    color: #667085;
+    margin-top: 10px;
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    white-space: pre-line;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    text-align: left;
+    -webkit-line-clamp: 3;
+  }
+  /* 缩略图占位（与示例一致：左上小图） */
+  .thumb {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: linear-gradient(180deg, #edf2fa 0%, #e9eef7 100%);
+    position: relative;
+    flex: 0 0 44px;
+  }
+  .thumb-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #cbd5e1;
+    position: absolute;
+    top: 9px;
+    left: 9px;
+  }
+  .thumb-mountain {
+    width: 20px;
+    height: 12px;
+    background: #dbe2ee;
+    border-radius: 3px;
+    position: absolute;
+    bottom: 9px;
+    left: 12px;
+  }
+
+  /* 横幅图片占位（第三张卡片的大图） */
+  .banner {
+    width: 100%;
+    height: 96px;
+    border-radius: 12px;
+    background: linear-gradient(180deg, #eef3fb 0%, #e7edf6 100%);
+    position: relative;
+    margin-bottom: 10px;
+  }
+  .banner-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #cbd5e1;
+    position: absolute;
+    top: 22px;
+    left: 26px;
+  }
+  .banner-mountain {
+    width: 120px;
+    height: 20px;
+    background: #dbe2ee;
+    border-radius: 4px;
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* 变体微调：确保整体间距与示例一致 */
+  .variant-text .desc {
+    margin-top: 2px;
+  }
+  .variant-thumb .desc {
+    margin-top: 2px;
+  }
+  .variant-banner .desc {
+    margin-top: 8px;
+  }
+  .delete {
+    width: 20px;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    display: none;
+    cursor: pointer;
+  }
+
+  .thumb-image {
+    background-color: transparent;
+    display: flex;
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    position: relative;
+    flex: 0 0 44px;
+    img {
+      width: 44px;
+      height: 44px;
+    }
+  }
+  .banner-image {
+    background-color: transparent;
+    width: 100%;
+    height: 96px;
+    border-radius: 12px;
+    position: relative;
+    margin-bottom: 10px;
+    img {
+      width: 100%;
+      height: 96px;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/components/ConversationSettingsModal.vue b/src/views/super/airag/aiapp/chat/components/ConversationSettingsModal.vue
new file mode 100644
index 0000000..cc3aba6
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/components/ConversationSettingsModal.vue
@@ -0,0 +1,382 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    title="对话设置"
+    :width="600"
+    :maskClosable="false"
+    :keyboard="false"
+    @ok="handleOk"
+    okText="开始对话"
+    :cancelButtonProps="{ style: { display: 'none' } }"
+    :okButtonProps="{ disabled: !canSubmit }"
+  >
+    <div class="settings-content">
+      <a-form :model="formData" layout="vertical">
+        <a-form-item
+          v-for="input in flowInputs"
+          :key="input.field"
+          :label="input.name"
+          :required="input.required"
+        >
+          <!-- 文本类型 - 使用单行输入 -->
+          <a-input
+            v-if="input.type === 'string'"
+            v-model:value="formData[input.field]"
+            :placeholder="`请输入${input.name}`"
+            :maxlength="input.maxLength"
+            show-count
+          />
+          <!-- 数字类型 -->
+          <a-input-number
+            v-else-if="input.type === 'number'"
+            v-model:value="formData[input.field]"
+            :placeholder="`请输入${input.name}`"
+            style="width: 100%"
+            :min="input.min"
+            :max="input.max"
+          />
+          
+            <!-- 图片类型 - 使用类似chat.vue的上传样式，固定支持3张图片 -->
+          <div v-else-if="input.type === 'picture'" class="image-upload-container">
+            <div class="image-list-wrapper">
+              <!-- 已上传的图片 -->
+              <div v-for="(img, idx) in imageFileList[input.field]" :key="idx" class="image-preview-item">
+                <img :src="getImageUrl(img)" @click="handlePreview(img)" />
+                <div class="image-remove-icon" @click="handleRemove(idx, input.field)">
+                  <Icon icon="ant-design:close-outlined" :size="12" />
+                </div>
+              </div>
+              <!-- 上传按钮 -->
+              <a-upload
+                v-if="(imageFileList[input.field]?.length || 0) < 3"
+                accept=".jpg,.jpeg,.png"
+                name="file"
+                :showUploadList="false"
+                :headers="headers"
+                :beforeUpload="(file) => beforeUpload(file, input.field)"
+                @change="(info) => handleChange(info, input.field)"
+                :multiple="true"
+                :action="uploadUrl"
+                :max-count="3"
+              >
+                <div class="upload-trigger">
+                  <Icon icon="ant-design:plus-outlined" :size="20" />
+                  <div class="upload-text">上传图片</div>
+                </div>
+              </a-upload>
+            </div>
+          </div>
+          <!-- 字符串数组类型（如history） -->
+          <a-select
+            v-else-if="input.type === 'string[]'"
+            v-model:value="formData[input.field]"
+            mode="tags"
+            :placeholder="`请输入${input.name}`"
+            style="width: 100%"
+          />
+          <!-- 其他类型使用文本输入 -->
+          <a-input
+            v-else
+            v-model:value="formData[input.field]"
+            :placeholder="`请输入${input.name}`"
+          />
+        </a-form-item>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { getFileAccessHttpUrl, getHeaders } from '@/utils/common/compUtils';
+  import { useGlobSetting } from '@/hooks/setting';
+
+  const props = defineProps<{
+    flowInputs: any[];
+    conversationId: string;
+    existingSettings?: Record<string, any>;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'ok', data: Record<string, any>): void;
+    (e: 'cancel'): void;
+  }>();
+
+  const visible = ref(false);
+  const formData = ref<Record<string, any>>({});
+  const imageFileList = ref<Record<string, any[]>>({});
+
+  const globSetting = useGlobSetting();
+  const baseUploadUrl = globSetting.uploadUrl;
+  const uploadUrl = `${baseUploadUrl}/airag/chat/upload`;
+  const headers = getHeaders();
+
+  // 过滤掉固定参数（history, content, images）
+  const flowInputs = computed(() => {
+    const fixedParams = ['history', 'content', 'images'];
+    return props.flowInputs?.filter((input) => !fixedParams.includes(input.field)) || [];
+  });
+
+  // 检查是否可以提交（必填项都已填写）
+  const canSubmit = computed(() => {
+    if (flowInputs.value.length === 0) return true;
+    return flowInputs.value.every((input) => {
+      if (!input.required) return true;
+      const value = formData.value[input.field];
+      if (input.type === 'picture') {
+        return imageFileList.value[input.field] && imageFileList.value[input.field].length > 0;
+      }
+      return value !== undefined && value !== null && value !== '';
+    });
+  });
+
+  // 上传前处理
+  const beforeUpload = (file: any, field: string) => {
+    const isImage = file.type?.startsWith('image/');
+    if (!isImage) {
+      message.error('只能上传图片文件！');
+      return false;
+    }
+    
+    const currentCount = imageFileList.value[field]?.length || 0;
+    
+    if (currentCount >= 3) {
+      message.warning('最多只能上传3张图片！');
+      return false;
+    }
+    
+    return true;
+  };
+
+  // 上传状态变化处理
+  const handleChange = (info: any, field: string) => {
+    const { file } = info;
+    
+    if (file.status === 'error' || (file.response && file.response.code === 500)) {
+      message.error(file.response?.message || `${file.name} 上传失败`);
+      return;
+    }
+    
+    if (file.status === 'done' && file.response) {
+      const imageUrl = file.response.message;
+      if (!imageFileList.value[field]) {
+        imageFileList.value[field] = [];
+      }
+      
+      // 检查是否已达到上限
+      if (imageFileList.value[field].length >= 3) {
+        message.warning('最多只能上传3张图片！');
+        return;
+      }
+      
+      imageFileList.value[field].push(imageUrl);
+      
+      // 图片类型始终作为数组存储，触发响应式更新
+      imageFileList.value = { ...imageFileList.value };
+      formData.value[field] = [...imageFileList.value[field]];
+      
+      console.log(`[图片上传] 当前图片数量: ${imageFileList.value[field].length}`, imageFileList.value[field]);
+    }
+  };
+
+  // 获取图片URL
+  const getImageUrl = (img: any) => {
+    if (typeof img === 'string') {
+      return getFileAccessHttpUrl(img);
+    }
+    return getFileAccessHttpUrl(img.url || img);
+  };
+
+  // 图片预览
+  const handlePreview = (img: any) => {
+    const url = typeof img === 'string' ? img : (img.url || img);
+    const imageUrl = getFileAccessHttpUrl(url);
+    // 可以使用 ant-design-vue 的 Image 预览功能
+    window.open(imageUrl, '_blank');
+  };
+
+  // 移除图片
+  const handleRemove = (index: number, field: string) => {
+    if (imageFileList.value[field]) {
+      imageFileList.value[field].splice(index, 1);
+      
+      // 触发响应式更新
+      imageFileList.value = { ...imageFileList.value };
+      
+      // 图片类型始终作为数组存储，删除后更新
+      formData.value[field] = imageFileList.value[field].length > 0 
+        ? [...imageFileList.value[field]] 
+        : [];
+      
+      console.log(`[图片删除] 当前图片数量: ${imageFileList.value[field].length}`, imageFileList.value[field]);
+    }
+  };
+
+  // 打开弹窗
+  const open = () => {
+    visible.value = true;
+    // 初始化表单数据
+    formData.value = {};
+    imageFileList.value = {};
+    
+    // 如果有已存在的设置，填充表单
+    if (props.existingSettings && Object.keys(props.existingSettings).length > 0) {
+      Object.keys(props.existingSettings).forEach((key) => {
+        const input = props.flowInputs.find((i) => i.field === key);
+        if (input) {
+          if (input.type === 'picture') {
+            // 确保是数组格式
+            const urls = Array.isArray(props.existingSettings![key]) 
+              ? props.existingSettings![key] 
+              : (props.existingSettings![key] ? [props.existingSettings![key]] : []);
+            imageFileList.value[key] = urls.filter(url => url); // 过滤空值
+            formData.value[key] = [...imageFileList.value[key]]; // 始终作为数组
+          } else {
+            formData.value[key] = props.existingSettings![key];
+          }
+        }
+      });
+    }
+  };
+
+  // 确定
+  const handleOk = async () => {
+    if (!canSubmit.value) {
+      message.warning('请填写所有必填项');
+      return;
+    }
+    
+    // 构建最终数据
+    const result: Record<string, any> = {};
+    flowInputs.value.forEach((input) => {
+      const value = formData.value[input.field];
+      if (value !== undefined && value !== null && value !== '') {
+        result[input.field] = value;
+      }
+    });
+    
+    // 先保存，再触发事件
+    // 直接通过emit返回设置数据，不需要单独保存
+    // 设置会在发送消息时自动保存到后端
+    emit('ok', result);
+    visible.value = false;
+  };
+
+  // 暴露方法
+  defineExpose({
+    open,
+  });
+</script>
+
+<style scoped lang="less">
+  .settings-content {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 10px 5px;
+    
+    :deep(.ant-form-item) {
+      margin-bottom: 16px;
+    }
+    
+    :deep(.ant-form-item-label) {
+      padding: 0 5px;
+    }
+    
+    :deep(.ant-input),
+    :deep(.ant-input-number),
+    :deep(.ant-select) {
+      margin: 0 5px;
+      width: calc(100% - 10px) !important;
+    }
+    
+    :deep(.ant-upload) {
+      margin: 0 5px;
+    }
+  }
+  
+  .image-upload-container {
+    margin: 0 5px;
+    
+    .image-list-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+    }
+    
+    .image-preview-item {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #d9d9d9;
+      flex-shrink: 0;
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+      
+      .image-remove-icon {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.2s;
+        
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.8);
+        }
+      }
+      
+      &:hover .image-remove-icon {
+        opacity: 1;
+      }
+    }
+    
+    .upload-trigger {
+      width: 80px;
+      height: 80px;
+      border: 1px dashed #d9d9d9;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      background-color: #fafafa;
+      flex-shrink: 0;
+      
+      &:hover {
+        border-color: #1890ff;
+        color: #1890ff;
+      }
+      
+      .upload-text {
+        margin-top: 4px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+      
+      &:hover .upload-text {
+        color: #1890ff;
+      }
+    }
+  }
+</style>
+
diff --git a/src/views/super/airag/aiapp/chat/components/ImageViewer.vue b/src/views/super/airag/aiapp/chat/components/ImageViewer.vue
new file mode 100644
index 0000000..b089f34
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/components/ImageViewer.vue
@@ -0,0 +1,71 @@
+<!--image放大封装-->
+<template>
+  <div class="amplify-image">
+    <div class="img-preview-content" @click="hideImageClick" @mousewheel="handlePicMousewheel">
+      <img :src="imageUrl" ref="imageRef" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  //图片地址
+  import {onMounted, ref, unref} from 'vue';
+  const props = defineProps(['imageUrl']);
+  const emit = defineEmits(['register', 'hide']);
+  //图片的ref
+  const imageRef = ref();
+  //缩放级别
+  const scale = ref<number>(1);
+
+  /**
+   * 隐藏图片
+   */
+  function hideImageClick() {
+    scale.value = 1;
+    emit('hide')
+  }
+
+  /**
+   * 鼠标滑轮滚动
+   * @param event
+   */
+  function handlePicMousewheel(event) {
+    event.preventDefault();
+    // 判断是放大还是缩小
+    const delta = event.deltaY > 0 ? -1 : 1;
+    const scaleStep = 0.1;
+    // 更新缩放级别
+    scale.value = scale.value + delta * scaleStep
+    imageRef.value.style.transform = `scale(${unref(scale)})`;
+  }
+</script>
+
+<style scoped lang="less">
+.amplify-image{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+  .img-preview-content{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    justify-content: center;
+    align-items: center;
+    touch-action: none;
+    -webkit-user-drag: none;
+    img{
+      transition: transform 0.3s;
+      background-position: center center;
+      background-repeat: no-repeat;
+      -webkit-background-size: cover;
+      -moz-background-size: cover;
+      background-size: cover;
+    }
+  }
+}
+</style>
diff --git a/src/views/super/airag/aiapp/chat/hooks/useChat.ts b/src/views/super/airag/aiapp/chat/hooks/useChat.ts
new file mode 100644
index 0000000..d6a2369
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/hooks/useChat.ts
@@ -0,0 +1,28 @@
+import { useChatStore } from '@/store';
+
+export function useChat() {
+  const chatStore = useChatStore();
+
+  const getChatByUuidAndIndex = (uuid: number, index: number) => {
+    return chatStore.getChatByUuidAndIndex(uuid, index);
+  };
+
+  const addChat = (uuid: number, chat: Chat.Chat) => {
+    chatStore.addChatByUuid(uuid, chat);
+  };
+
+  const updateChat = (uuid: number, index: number, chat: Chat.Chat) => {
+    chatStore.updateChatByUuid(uuid, index, chat);
+  };
+
+  const updateChatSome = (uuid: number, index: number, chat: Partial<Chat.Chat>) => {
+    chatStore.updateChatSomeByUuid(uuid, index, chat);
+  };
+
+  return {
+    addChat,
+    updateChat,
+    updateChatSome,
+    getChatByUuidAndIndex,
+  };
+}
diff --git a/src/views/super/airag/aiapp/chat/hooks/useScroll.ts b/src/views/super/airag/aiapp/chat/hooks/useScroll.ts
new file mode 100644
index 0000000..c71b6bb
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/hooks/useScroll.ts
@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import { nextTick, ref } from 'vue';
+
+type ScrollElement = HTMLDivElement | null;
+
+interface ScrollReturn {
+  scrollRef: Ref<ScrollElement>;
+  scrollToBottom: () => Promise<void>;
+  scrollToTop: () => Promise<void>;
+  scrollToBottomIfAtBottom: () => Promise<void>;
+}
+
+export function useScroll(): ScrollReturn {
+  const scrollRef = ref<ScrollElement>(null);
+
+  const scrollToBottom = async () => {
+    await nextTick();
+    if (scrollRef.value) scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
+  };
+
+  const scrollToTop = async () => {
+    await nextTick();
+    if (scrollRef.value) scrollRef.value.scrollTop = 0;
+  };
+
+  const scrollToBottomIfAtBottom = async () => {
+    await nextTick();
+    if (scrollRef.value) {
+      const threshold = 100; // Threshold, indicating the distance threshold to the bottom of the scroll bar.
+      const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight;
+      if (distanceToBottom <= threshold) scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
+    }
+  };
+
+  return {
+    scrollRef,
+    scrollToBottom,
+    scrollToTop,
+    scrollToBottomIfAtBottom,
+  };
+}
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/index.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/index.ts
new file mode 100644
index 0000000..1090f50
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/index.ts
@@ -0,0 +1,71 @@
+import type { JeecgTag } from './types';
+import { shallowRef } from 'vue';
+
+import ToolExecTag from './tool-exec';
+import JeecgChart from "./jeecg-chart";
+
+export const jeecgTagMap: Map<string, JeecgTag> = new Map();
+// 所有 jeecg 标签名称列表
+export const tagNames: string[] = [];
+
+// 注册 工具调用 标签
+useJeecgTag(ToolExecTag);
+// 注册 图表渲染 标签
+useJeecgTag(JeecgChart);
+
+// jeecg 标签统一的 class 名称
+export const JEECG_TAG_CLASS = 'jeecg-tag';
+
+/**
+ * 忽略 jeecg 自定义标签的解析
+ * @param md
+ */
+export function mdPluginJeecgTag(md: any) {
+  // 保存原始的 html_block  渲染规则
+  const htmlBlockOrigin =
+    md.renderer.rules.html_block ||
+    function (tokens, idx) {
+      return tokens[idx].content;
+    };
+
+  // 覆盖 html_block  渲染规则
+  md.renderer.rules.html_block = function (tokens, idx) {
+    const token = tokens[idx];
+    const content = token.content;
+
+    let isJeecgTag = false;
+    let tagName = '';
+
+    for (const name of tagNames) {
+      // 检查内容是否包含自定义标签的起始或结束标签
+      const startTag = new RegExp(`<${name}(\\s|>)`, 'i');
+      const endTag = new RegExp(`</${name}>`, 'i');
+      if (startTag.test(content) || endTag.test(content)) {
+        isJeecgTag = true;
+        tagName = name;
+        break;
+      }
+    }
+
+    // jeecg 自定义标签
+    if (isJeecgTag) {
+      const box = document.createElement('div');
+      box.innerHTML = content;
+      const tag = box.firstElementChild!;
+      tag.classList.add(JEECG_TAG_CLASS);
+      return tag.outerHTML;
+    }
+
+    // 其他 HTML 标签按默认方式渲染
+    return htmlBlockOrigin(tokens, idx);
+  };
+}
+
+export function useJeecgTag(tag: JeecgTag) {
+  if (jeecgTagMap.has(tag.name)) {
+    return;
+  }
+  tag.component = shallowRef(tag.component);
+  jeecgTagMap.set(tag.name, tag);
+  tagNames.push(tag.name);
+}
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.api.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.api.ts
new file mode 100644
index 0000000..cf6c0ea
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.api.ts
@@ -0,0 +1,43 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  sqlPageExecute = '/airag/mcp/database/sqlPageExecute',
+  sqlExportXls = '/airag/mcp/database/sqlExportXls',
+}
+
+/**
+ * 分页执行 SQL 查询
+ */
+export function sqlPageExecute(params: { sql: string; dbSource?: string; pageNo: number; pageSize: number }) {
+  return defHttp.post<Recordable>(
+    {
+      url: Api.sqlPageExecute,
+      params: {
+        sql: params.sql,
+        dbSourceKey: params.dbSource || '',
+        pageNo: params.pageNo,
+        pageSize: params.pageSize,
+      },
+    },
+    { isTransformResponse: false }
+  );
+}
+
+/**
+ * 导出图表原始数据为 Excel
+ */
+export function sqlExportXls(params: { sql: string; dbSource?: string; columns?: Recordable }) {
+  return defHttp.post(
+    {
+      url: Api.sqlExportXls,
+      params: {
+        sql: params.sql,
+        dbSourceKey: params.dbSource || '',
+        columns: params.columns || {},
+      },
+      responseType: 'blob',
+      timeout: 5 * 60 * 1000,
+    },
+    { isTransformResponse: false, isReturnNativeResponse: true }
+  );
+}
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.vue b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.vue
new file mode 100644
index 0000000..f843079
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/ChartRender.vue
@@ -0,0 +1,642 @@
+<template>
+  <div class="ai-chat-chart">
+    <div v-if="isError" class="ai-chat-chart__error">{{ errorMessage }}</div>
+    <div v-else-if="!resolvedType || !hasData" class="ai-chat-chart__error">
+      <div v-if="loading"
+           style="color: #999; padding: 12px 8px; border: 1px dashed #eee; margin: 8px 0; border-radius: 4px;">
+        <span>图表渲染中...</span>
+      </div>
+      <span v-else>模型返回的图表渲染格式不正确，请优化提示词或重新尝试。</span>
+    </div>
+    <div v-else class="ai-chat-chart__body">
+      <Tabs v-model:activeKey="activeTab" size="small" class="ai-chat-chart__tabs">
+        <!-- 主图表 Tab -->
+        <TabPane :key="resolvedType" :tab="getChartLabel(resolvedType)">
+          <ChartBody :chartType="resolvedType" />
+        </TabPane>
+        <!-- 可替代图表 Tabs -->
+        <TabPane v-for="alt in validAltTypes" :key="alt" :tab="getChartLabel(alt)">
+          <ChartBody :chartType="alt" />
+        </TabPane>
+        <!-- 数据 Tab -->
+        <TabPane v-if="hasSql" key="__data__" tab="数据">
+          <div class="ai-chat-chart__data-toolbar">
+            <a-button size="small" :loading="exportLoading" @click="handleExport">
+              <template #icon><DownloadOutlined /></template>
+              导出
+            </a-button>
+          </div>
+          <BasicTable
+            v-bind="tableBindings"
+            :loading="tableLoading"
+            size="small"
+            class="ai-chat-chart__table"
+          />
+        </TabPane>
+      </Tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartType } from './types';
+import type { BasicColumn } from '/@/components/Table';
+import { computed, defineComponent, h, ref, watch, watchEffect } from 'vue';
+import { Tabs, TabPane, message } from 'ant-design-vue';
+import { DownloadOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable } from '/@/components/Table';
+import LineMulti from '/@/components/chart/LineMulti.vue';
+import BarMulti from '/@/components/chart/BarMulti.vue';
+import Pie from '/@/components/chart/Pie.vue';
+import Radar from '/@/components/chart/Radar.vue';
+import Gauge from '/@/components/chart/Gauge.vue';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import SingleLine from '/@/components/chart/SingleLine.vue';
+import { sqlPageExecute, sqlExportXls } from './ChartRender.api';
+
+const props = defineProps({
+  /**
+   * 图表配置字符串，示例：
+   * {"type":"bar","altTypes":["line","pie"],"data":[...],"sql":"SELECT ...","dbSource":"","columns":{"field1":"标题1"}}
+   */
+  data: {
+    type: String,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** 图表类型中文名映射 */
+const chartTypeLabels: Record<string, string> = {
+  bar: '柱状图',
+  line: '折线图',
+  pie: '饼图',
+  radar: '雷达图',
+  gauge: '仪表盘',
+  barline: '折柱图',
+  multibar: '多列柱状图',
+  multiline: '多行折线图',
+  area: '面积图',
+};
+
+/** 获取图表类型的中文标签 */
+function getChartLabel(type: string): string {
+  return chartTypeLabels[type] || type;
+}
+
+/** 当前激活的 Tab */
+const activeTab = ref<string>('');
+/** 表格加载状态 */
+const tableLoading = ref(false);
+/** 导出加载状态 */
+const exportLoading = ref(false);
+/** 表格数据 */
+const tableData = ref<Recordable[]>([]);
+/** 表格列定义 */
+const tableColumns = ref<BasicColumn[]>([]);
+/** 数据总条数 */
+const tableTotal = ref(0);
+/** 是否已首次加载过数据 */
+const dataLoaded = ref(false);
+
+/**
+ * 解析失败或类型错误的提示文本。
+ */
+const errorMessage = ref<string>('');
+/**
+ * 是否存在阻止渲染的错误。
+ */
+const isError = ref<boolean>(false);
+
+/**
+ * 将字符串解析为配置对象，失败时记录错误信息。
+ */
+const parsedConfig = computed<Recordable>(() => {
+  try {
+    errorMessage.value = '';
+    isError.value = false;
+    return JSON.parse(props.data || '{}');
+  } catch (error) {
+    errorMessage.value = '图表数据解析错误，无法渲染图表。';
+    isError.value = true;
+    return {};
+  }
+});
+
+/**
+ * 支持的图表类型集合。
+ */
+const supportedTypes: ChartType[] = ['bar', 'line', 'pie', 'radar', 'gauge', 'barline', 'multibar', 'multiline', 'area'];
+
+/**
+ * 解析得到的图表类型，统一小写后做合法性校验。
+ */
+const resolvedType = computed<ChartType>(() => {
+  const rawType = String((parsedConfig.value as any).type || '').toLowerCase();
+  const normalizedType = (rawType || '').replace(/[-_\s]/g, '');
+  const typeAliasMap: Record<string, ChartType> = {
+    bar: 'bar',
+    line: 'line',
+    pie: 'pie',
+    radar: 'radar',
+    gauge: 'gauge',
+    barline: 'barline',
+    barandline: 'barline',
+    linebar: 'barline',
+    multiline: 'multiline',
+    multibar: 'multibar',
+    area: 'area',
+    arealine: 'area',
+  };
+  const mapped = typeAliasMap[normalizedType] || '';
+  if (mapped && supportedTypes.includes(mapped)) {
+    return mapped as ChartType;
+  }
+  return '';
+});
+
+/** 解析可替代图表类型列表（过滤掉无效类型和主类型重复） */
+const validAltTypes = computed<ChartType[]>(() => {
+  const altTypes = (parsedConfig.value as any).altTypes;
+  if (!Array.isArray(altTypes)) {
+    return [];
+  }
+  const primary = resolvedType.value;
+  return altTypes
+    .map((t: string) => String(t).toLowerCase() as ChartType)
+    .filter((t: ChartType) => t !== primary && supportedTypes.includes(t));
+});
+
+/** 初始化 activeTab 为主图表类型 */
+watchEffect(() => {
+  if (resolvedType.value && !activeTab.value) {
+    activeTab.value = resolvedType.value;
+  }
+});
+
+/**
+ * 当类型不被支持时，给出错误提示。
+ */
+watchEffect(() => {
+  if (isError.value) {
+    return;
+  }
+  if (resolvedType.value === '') {
+    const typeValue = (parsedConfig.value as any).type;
+    if (typeValue) {
+      errorMessage.value = '当前仅支持 bar、line、pie、radar、gauge、barline、multibar、multiline、area 类型图表。';
+      isError.value = true;
+    }
+  } else {
+    errorMessage.value = '';
+    isError.value = false;
+  }
+});
+
+/**
+ * 原始数据列表。
+ */
+const rawData = computed<unknown>(() => (parsedConfig.value as any).data);
+
+/**
+ * 判断是否存在可用的数据数组。
+ */
+const hasData = computed<boolean>(() => {
+  if (resolvedType.value === 'gauge') {
+    return Boolean(rawData.value);
+  }
+  return Array.isArray(rawData.value) && rawData.value.length > 0;
+});
+
+/** 是否包含可查询的 SQL */
+const hasSql = computed<boolean>(() => {
+  const sql = (parsedConfig.value as any).sql;
+  return typeof sql === 'string' && sql.trim().length > 0;
+});
+
+/** 从配置中提取 SQL */
+const chartSql = computed<string>(() => {
+  return ((parsedConfig.value as any).sql || '').trim();
+});
+
+/** 从配置中提取数据源 */
+const chartDbSource = computed<string>(() => {
+  return ((parsedConfig.value as any).dbSource || '').trim();
+});
+
+/** 从配置中提取列标题映射 */
+const chartColumns = computed<Recordable>(() => {
+  return (parsedConfig.value as any).columns || {};
+});
+
+/**
+ * 使用 BasicTable 组件
+ */
+const [registerTable, { setPagination }] = useTable({
+  columns: tableColumns,
+  dataSource: tableData,
+  pagination: {
+    pageSize: 10,
+    current: 1,
+    total: 0,
+  },
+  showIndexColumn: false,
+  canResize: false,
+  bordered: true,
+  onChange: handleTableChange,
+});
+
+/** 表格绑定属性 */
+const tableBindings = computed(() => ({
+  onRegister: registerTable,
+}));
+
+/**
+ * 加载表格数据
+ */
+async function loadTableData(pageNo = 1, pageSize = 10) {
+  if (!chartSql.value) {
+    return;
+  }
+  tableLoading.value = true;
+  try {
+    const res = await sqlPageExecute({
+      sql: chartSql.value,
+      dbSource: chartDbSource.value,
+      pageNo,
+      pageSize,
+    });
+    if (res.success && res.result) {
+      const { records = [], total = 0 } = res.result;
+      tableData.value = records;
+      tableTotal.value = total;
+      // 根据返回数据动态生成列（使用 columns 映射中文标题）
+      if (records.length > 0) {
+        tableColumns.value = buildColumns(records[0]);
+      }
+      setPagination({
+        current: pageNo,
+        pageSize,
+        total,
+      });
+    } else {
+      tableData.value = [];
+      tableTotal.value = 0;
+    }
+  } catch (e) {
+    console.error('加载图表原始数据失败', e);
+    tableData.value = [];
+    tableTotal.value = 0;
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+/**
+ * 根据数据行的 key 动态生成 BasicTable 列定义，优先使用 columns 映射的中文标题
+ */
+function buildColumns(row: Recordable): BasicColumn[] {
+  const columnMap = chartColumns.value;
+  return Object.keys(row).map((key) => ({
+    title: columnMap[key] || key,
+    dataIndex: key,
+    width: 150,
+    ellipsis: true,
+  }));
+}
+
+/**
+ * 表格分页变更处理
+ */
+function handleTableChange(pagination: any) {
+  loadTableData(pagination.current, pagination.pageSize);
+}
+
+/**
+ * 导出全部数据
+ */
+async function handleExport() {
+  if (!chartSql.value) {
+    return;
+  }
+  exportLoading.value = true;
+  try {
+    const response = await sqlExportXls({
+      sql: chartSql.value,
+      dbSource: chartDbSource.value,
+      columns: chartColumns.value,
+    });
+    if (!response || !response.data) {
+      message.warning('导出失败');
+      return;
+    }
+    const data = response.data;
+    // 检查是否为错误响应（JSON 格式）
+    if (data.type && data.type.indexOf('json') !== -1) {
+      const text = await data.text();
+      try {
+        const json = JSON.parse(text);
+        if (!json.success) {
+          message.warning('导出失败：' + (json.message || '未知错误'));
+          return;
+        }
+      } catch (_e) {
+        // 非 JSON，继续下载
+      }
+    }
+    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }));
+    const link = document.createElement('a');
+    link.style.display = 'none';
+    link.href = url;
+    link.setAttribute('download', '数据导出.xls');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (e) {
+    console.error('导出失败', e);
+    message.error('导出失败');
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/**
+ * 切换到数据 Tab 时首次加载
+ */
+watch(activeTab, (val) => {
+  if (val === '__data__' && !dataLoaded.value && hasSql.value) {
+    dataLoaded.value = true;
+    loadTableData();
+  }
+});
+
+// ======================== 图表数据转换 ========================
+
+/**
+ * 将原始数据标准化为多序列图表所需的结构。
+ */
+const multiSeriesData = computed<Recordable[]>(() => {
+  if (!Array.isArray(rawData.value)) {
+    return [];
+  }
+  return rawData.value.map((item: Recordable) => buildMultiSeriesItem(item));
+});
+
+/**
+ * 面积折线与多行折线共享的数据结构，透传 seriesType 控制折线类型。
+ */
+const areaSeriesData = computed<Recordable[]>(() => {
+  if (!Array.isArray(rawData.value)) {
+    return [];
+  }
+  return rawData.value.map((item: Recordable) => {
+    return {
+      ...buildMultiSeriesItem(item),
+      seriesType: item && item.seriesType ? String(item.seriesType) : 'line',
+      areaStyle: {},
+    };
+  });
+});
+
+/**
+ * 将原始数据标准化为饼图所需的结构。
+ */
+const pieSeriesData = computed<Recordable[]>(() => {
+  if (!Array.isArray(rawData.value)) {
+    return [];
+  }
+  return rawData.value.map((item: Recordable) => {
+    return {
+      name: resolveName(item),
+      value: resolveNumber(item),
+    };
+  });
+});
+
+/**
+ * 构建多序列图表需要的标准化数据项。
+ */
+function buildMultiSeriesItem(item: Recordable): Recordable {
+  const seriesName = resolveSeriesName(item);
+  const name = resolveName(item);
+  const value = resolveNumber(item);
+  return {type: seriesName, name, value};
+}
+
+/**
+ * 解析系列名称，优先使用 series，其次使用 type，最后回退为"数据"。
+ */
+function resolveSeriesName(item: Recordable): string {
+  if (item && item.series !== undefined) {
+    return String(item.series);
+  }
+  if (item && item.type !== undefined) {
+    return String(item.type);
+  }
+  return '数据';
+}
+
+/**
+ * 解析横轴名称，支持 x 与 name 字段。
+ */
+function resolveName(item: Recordable): string {
+  if (item && item.x !== undefined) {
+    return String(item.x);
+  }
+  if (item && item.name !== undefined) {
+    return String(item.name);
+  }
+  return '';
+}
+
+/**
+ * 解析数值字段，支持 y 与 value，非数字时回退为 0。
+ */
+function resolveNumber(item: Recordable): number {
+  const rawValue = item ? item.y ?? item.value : null;
+  const num = Number(rawValue);
+  if (Number.isFinite(num)) {
+    return num;
+  }
+  return 0;
+}
+
+/**
+ * 解析序列类型，折柱图需要区分 bar / line。
+ */
+function resolveSeriesType(item: Recordable): string {
+  if (item && item.seriesType !== undefined) {
+    return String(item.seriesType);
+  }
+  return 'bar';
+}
+
+/**
+ * 仪表盘数据，允许数组或对象输入，确保返回 name、value。
+ */
+const gaugeData = computed(() => {
+  const dataSource = rawData.value as any;
+  if (Array.isArray(dataSource) && dataSource.length > 0) {
+    const item = dataSource[0];
+    return { name: resolveName(item) || '仪表盘', value: resolveNumber(item) };
+  }
+  if (dataSource && typeof dataSource === 'object') {
+    return { name: resolveName(dataSource) || '仪表盘', value: resolveNumber(dataSource as Recordable) };
+  }
+  return { name: '仪表盘', value: 0 };
+});
+
+/**
+ * 雷达图数据，支持 max 字段定义指标上限。
+ */
+const radarSeriesData = computed<Recordable[]>(() => {
+  if (!Array.isArray(rawData.value)) {
+    return [];
+  }
+  return rawData.value.map((item: Recordable) => {
+    return {
+      type: resolveSeriesName(item),
+      name: resolveName(item),
+      value: resolveNumber(item),
+      max: item && item.max !== undefined ? Number(item.max) : undefined,
+    };
+  });
+});
+
+/**
+ * 折柱图数据，附带 seriesType 用于区分柱/线。
+ */
+const barLineSeriesData = computed<Recordable[]>(() => {
+  if (!Array.isArray(rawData.value)) {
+    return [];
+  }
+  return rawData.value.map((item: Recordable) => {
+    return {
+      ...buildMultiSeriesItem(item),
+      seriesType: resolveSeriesType(item),
+    };
+  });
+});
+
+// ======================== 根据类型获取图表 props ========================
+
+/**
+ * 根据图表类型返回对应的渲染属性
+ */
+function getChartPropsForType(type: ChartType): Recordable {
+  switch (type) {
+    case 'line':
+      return { type: 'line', height: '360px', width: '100%', chartData: multiSeriesData.value };
+    case 'bar':
+      return { height: '360px', width: '100%', chartData: multiSeriesData.value };
+    case 'pie':
+      return { height: '360px', width: '100%', chartData: pieSeriesData.value };
+    case 'multibar':
+      return { height: '360px', width: '100%', chartData: multiSeriesData.value, option: parsedConfig.value.option || {} };
+    case 'multiline':
+      return { type: 'line', height: '360px', width: '100%', chartData: multiSeriesData.value, option: parsedConfig.value.option || {} };
+    case 'barline':
+      return { height: '360px', width: '100%', chartData: barLineSeriesData.value, customColor: (parsedConfig.value as any).colors || [], option: parsedConfig.value.option || {} };
+    case 'area':
+      return { type: 'line', height: '360px', width: '100%', chartData: areaSeriesData.value, option: { ...(parsedConfig.value.option || {}), areaStyle: {} } };
+    case 'radar':
+      return { height: '420px', width: '100%', chartData: radarSeriesData.value, option: parsedConfig.value.option || {} };
+    case 'gauge':
+      return { height: '360px', width: '100%', chartData: gaugeData.value, option: parsedConfig.value.option || {}, seriesColor: (parsedConfig.value as any).seriesColor || undefined };
+    default:
+      return {};
+  }
+}
+
+/**
+ * 根据图表类型返回对应的组件
+ */
+function getChartComponentForType(type: ChartType) {
+  switch (type) {
+    case 'line':
+      return LineMulti;
+    case 'bar':
+      return BarMulti;
+    case 'pie':
+      return Pie;
+    case 'multibar':
+      return BarMulti;
+    case 'multiline':
+      return LineMulti;
+    case 'barline':
+      return BarAndLine;
+    case 'area':
+      return SingleLine;
+    case 'radar':
+      return Radar;
+    case 'gauge':
+      return Gauge;
+    default:
+      return null;
+  }
+}
+
+/**
+ * 内部图表渲染组件，根据 chartType 动态渲染对应图表
+ */
+const ChartBody = defineComponent({
+  props: {
+    chartType: {
+      type: String as () => ChartType,
+      required: true,
+    },
+  },
+  setup(bodyProps) {
+    return () => {
+      const comp = getChartComponentForType(bodyProps.chartType as ChartType);
+      if (!comp) {
+        return null;
+      }
+      const chartProps = getChartPropsForType(bodyProps.chartType as ChartType);
+      return h(comp, chartProps);
+    };
+  },
+});
+</script>
+
+<style scoped lang="less">
+
+.ai-chat-chart {
+  width: 100%;
+  min-width: 420px;
+  padding: 12px 0;
+}
+
+.ai-chat-chart__body {
+  width: 100%;
+}
+
+.ai-chat-chart__error {
+  color: #ff4d4f;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.ai-chat-chart__tabs {
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 8px;
+  }
+}
+
+.ai-chat-chart__data-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+}
+
+.ai-chat-chart__table {
+  :deep(.ant-table-wrapper) {
+    padding: 0;
+  }
+}
+
+</style>
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/index.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/index.ts
new file mode 100644
index 0000000..297fc19
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/index.ts
@@ -0,0 +1,10 @@
+import { JeecgTag } from '../types';
+
+import ChartRender from './ChartRender.vue';
+
+const Tag: JeecgTag = {
+  name: 'jeecg-chart',
+  component: ChartRender,
+};
+
+export default Tag;
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/types.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/types.ts
new file mode 100644
index 0000000..ec35e6f
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/jeecg-chart/types.ts
@@ -0,0 +1,4 @@
+/**
+ * 支持的图表类型
+ */
+export type ChartType = 'bar' | 'line' | 'pie' | 'radar' | 'gauge' | 'barline' | 'multibar' | 'multiline' | 'area' | '';
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/JeecgToolExec.vue b/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/JeecgToolExec.vue
new file mode 100644
index 0000000..5e8f24d
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/JeecgToolExec.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="tool-exec-wrapper">
+    <div v-if="!toolRecord" class="tool-exec-empty">暂无工具调用结果</div>
+    <div v-else-if="toolRecord.loading" class="tool-exec-loading">
+      <LoadingOutlined spin/>
+      <span style="margin-left: 8px;">正在运行 {{ titleText }}</span>
+    </div>
+    <div v-else class="tool-exec-list">
+      <div class="tool-exec-card">
+        <div class="card-header" @click="toggleCard()">
+          <div class="header-left">
+            <span class="status-icon" :class="`status-${resolvedStatus}`"></span>
+            <div class="title-block">
+              <div class="title-text">
+                <span class="status-text">{{ statusLabel }}</span>
+                <span>{{ titleText }}</span>
+              </div>
+              <div class="subtitle-text" v-if="toolRecord.subtitle">
+                <span>{{ toolRecord.subtitle }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="header-right">
+            <!-- <span class="collapse-text">{{ expanded ? '收起' : '展开' }}</span>-->
+            <span class="collapse-icon" :class="{ opened: expanded }">
+              <DownOutlined/>
+            </span>
+          </div>
+        </div>
+        <div v-if="expanded" class="card-body">
+          <div class="section">
+            <div class="section-title">输入</div>
+            <pre class="section-content">{{ formattedInput }}</pre>
+          </div>
+          <div class="section">
+            <div class="section-title">输出</div>
+            <pre class="section-content">{{ formattedOutput }}</pre>
+          </div>
+          <div v-if="toolRecord.errorMessage" class="section">
+            <div class="section-title">错误信息</div>
+            <pre class="section-content">{{ formattedError }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { DownOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+
+/**
+ * 工具调用结果记录类型
+ */
+type ToolExecStatus = 'success' | 'running' | 'error';
+
+/**
+ * 工具调用展示记录
+ */
+interface ToolExecRecord {
+  id: string;
+  name: string;
+  mcpName?: string;
+  input: string;
+  output: string;
+  loading: boolean;
+  hasError: boolean;
+
+  subtitle?: string;
+  errorMessage?: string;
+}
+
+const props = defineProps({
+  data: {
+    type: String,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * 解析 props.data 为单条记录
+ */
+const parsedRecord = computed<ToolExecRecord | null>(() => {
+  try {
+    const value = JSON.parse(props.data);
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return value as ToolExecRecord;
+    }
+    return null;
+  } catch (error) {
+    return null;
+  }
+});
+
+/**
+ * 归一化后的单条记录，补齐常用字段
+ */
+const toolRecord = computed<ToolExecRecord | null>(() => {
+  const item = parsedRecord.value;
+  if (!item) {
+    return null;
+  }
+  return {
+    ...item,
+    status: status,
+    toolName: item.name,
+    input: item.input ?? (item as any).request ?? (item as any).payload ?? (item as any).args,
+    output: item.output ?? (item as any).response ?? (item as any).result,
+    errorMessage: '',
+  } as ToolExecRecord;
+});
+
+/**
+ * 单卡片展开状态
+ */
+const expanded = ref<boolean>(false);
+
+/**
+ * 状态文本映射
+ */
+const statusLabelMap: Record<ToolExecStatus, string> = {
+  success: '已运行',
+  running: '执行中',
+  error: '执行失败',
+};
+
+/**
+ * 已解析状态
+ */
+const resolvedStatus = computed<ToolExecStatus>(() => {
+  const record = toolRecord.value;
+  if (record) {
+    if (record.loading === true) {
+      return 'running';
+    }
+    if (record.hasError === true) {
+      return 'error';
+    }
+  }
+  return 'success';
+});
+
+/**
+ * 状态标签文案
+ */
+const statusLabel = computed<string>(() => {
+  const current = resolvedStatus.value;
+  return statusLabelMap[current];
+});
+
+/**
+ * 卡片标题
+ */
+const titleText = computed<string>(() => {
+  if (toolRecord.value) {
+    const parts: string[] = [];
+    if (toolRecord.value.name) {
+      parts.push(toolRecord.value.name as string);
+    }
+    if (toolRecord.value.mcpName) {
+      parts.push(toolRecord.value.mcpName as string);
+    }
+    if (parts.length > 0) {
+      return parts.join(' - ');
+    }
+  }
+  return '工具调用';
+});
+
+/**
+ * 输入、输出、错误信息格式化
+ */
+const formattedInput = computed<string>(() => {
+  return formatData(toolRecord.value ? toolRecord.value.input : '');
+});
+
+const formattedOutput = computed<string>(() => {
+  return formatData(toolRecord.value ? toolRecord.value.output : '');
+});
+
+const formattedError = computed<string>(() => {
+  return formatData(toolRecord.value ? toolRecord.value.errorMessage : '');
+});
+
+/**
+ * 切换卡片展开状态
+ */
+function toggleCard(): void {
+  const next = !expanded.value;
+  expanded.value = next;
+}
+
+/**
+ * 序列化输入或输出数据，保证预格式化可读
+ * @param value 输入或输出值
+ */
+function formatData(value: unknown): string {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) {
+      return '';
+    }
+    try {
+      const parsed = JSON.parse(trimmed);
+      return JSON.stringify(parsed, null, 2);
+    } catch (error) {
+      return value;
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (error) {
+    return String(value);
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+.tool-exec-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  max-width: 520px;
+}
+
+.tool-exec-loading,
+.tool-exec-empty {
+  padding: 12px 16px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.tool-exec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tool-exec-card {
+  border: 1px solid #e5e6eb;
+  border-radius: 10px;
+  background-color: #fff;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.card-header:hover {
+  background-color: #f7f8fa;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid #c8c9cc;
+  background-color: #fff;
+}
+
+.status-success {
+  border-color: #52c41a;
+  background-color: #f6ffed;
+}
+
+.status-running {
+  border-color: #1677ff;
+  background-color: #e6f4ff;
+}
+
+.status-error {
+  border-color: #ff4d4f;
+  background-color: #fff1f0;
+}
+
+.title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-text {
+  font-weight: 600;
+
+  .status-text {
+    margin-right: 6px;
+    font-weight: normal;
+  }
+}
+
+.subtitle-text {
+  font-size: 12px;
+  color: #666;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #555;
+  font-size: 13px;
+}
+
+.status-text {
+  font-weight: 500;
+}
+
+.collapse-text {
+  font-size: 12px;
+}
+
+.collapse-icon {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+
+  &.opened {
+    transform: rotate(180deg);
+  }
+}
+
+.card-body {
+  padding: 0 14px 14px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.section-content {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  border: 1px solid #e5e6eb;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 340px;
+  overflow: auto;
+}
+
+.section-content:empty {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .header-right {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/index.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/index.ts
new file mode 100644
index 0000000..e07907e
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/tool-exec/index.ts
@@ -0,0 +1,10 @@
+import { JeecgTag } from '../types';
+
+import JeecgToolExec from './JeecgToolExec.vue';
+
+const Tag: JeecgTag = {
+  name: 'jeecg-tool-exec',
+  component: JeecgToolExec,
+};
+
+export default Tag;
diff --git a/src/views/super/airag/aiapp/chat/jeecg-tags/types.ts b/src/views/super/airag/aiapp/chat/jeecg-tags/types.ts
new file mode 100644
index 0000000..0b6e96a
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/jeecg-tags/types.ts
@@ -0,0 +1,9 @@
+import { Component } from 'vue';
+
+/**
+ * JeecgTag类型
+ */
+export type JeecgTag = {
+  name: string;
+  component: Component;
+};
diff --git a/src/views/super/airag/aiapp/chat/js/chat.js b/src/views/super/airag/aiapp/chat/js/chat.js
new file mode 100644
index 0000000..d9fa1de
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/js/chat.js
@@ -0,0 +1,188 @@
+// iframe-widget.js
+(function () {
+  let widgetInstance = null;
+  const defaultConfig = {
+    // 支持'top-left'左上, 'top-right'右上, 'bottom-left'左下, 'bottom-right'右下
+    iconPosition: 'bottom-right',
+    //图标的大小
+    iconSize: '45px',
+    //图标的颜色
+    iconColor: '#155eef',
+    //必填不允许修改
+    appId: '',
+    //聊天弹窗的宽度
+    chatWidth: '800px',
+    //聊天弹窗的高度
+    chatHeight: '700px',
+  };
+
+  /**
+   * 创建ai图标
+   * @param config
+   */
+  function createAiChat(config) {
+    // 单例模式，确保只存在一个实例
+    if (widgetInstance) {
+      return;
+    }
+
+    // 合并配置
+    const finalConfig = { ...defaultConfig, ...config };
+
+    if (!finalConfig.appId) {
+      console.error('appId为空！');
+      return;
+    }
+    let body = document.body;
+    body.style.margin = "0";
+    // 创建容器
+    const container = document.createElement('div');
+    container.style.cssText = `
+            position: fixed;
+            z-index: 998;
+            ${getPositionStyles(finalConfig.iconPosition)}
+            cursor: pointer;
+        `;
+    // 创建图标
+    const icon = document.createElement('div');
+    icon.style.cssText = `
+            width: ${finalConfig.iconSize};
+            height: ${finalConfig.iconSize};
+            background-color: ${finalConfig.iconColor};
+            border-radius: 50%;
+            box-shadow: #cccccc 0 4px 8px 0;
+            padding: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-sizing: border-box;
+        `;
+    icon.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 1024 1024" class="iconify iconify--ant-design"><path fill="currentColor" d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40m-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40"></path><path fill="currentColor" d="M894 345c-48.1-66-115.3-110.1-189-130v.1c-17.1-19-36.4-36.5-58-52.1c-163.7-119-393.5-82.7-513 81c-96.3 133-92.2 311.9 6 439l.8 132.6c0 3.2.5 6.4 1.5 9.4c5.3 16.9 23.3 26.2 40.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-.5.4c89.1 64.9 205.9 84.4 313 49l127.1 41.4c3.2 1 6.5 1.6 9.9 1.6c17.7 0 32-14.3 32-32V753c88.1-119.6 90.4-284.9 1-408M323 735l-12-5l-99 31l-1-104l-8-9c-84.6-103.2-90.2-251.9-11-361c96.4-132.2 281.2-161.4 413-66c132.2 96.1 161.5 280.6 66 412c-80.1 109.9-223.5 150.5-348 102m505-17l-8 10l1 104l-98-33l-12 5c-56 20.8-115.7 22.5-171 7l-.2-.1C613.7 788.2 680.7 742.2 729 676c76.4-105.3 88.8-237.6 44.4-350.4l.6.4c23 16.5 44.1 37.1 62 62c72.6 99.6 68.5 235.2-8 330"></path><path fill="currentColor" d="M433 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40"></path></svg>';
+
+    // 创建iframe容器
+    const iframeContainer = document.createElement('div');
+    let right = finalConfig.chatWidth === '100%' ? '0' : '10px';
+    let bottom = finalConfig.chatHeight === '100%' ? '0' : '10px';
+    let chatWidth = finalConfig.chatWidth;
+    let chatHeight = finalConfig.chatHeight;
+    if(isMobileDevice()){
+      chatWidth = "100%";
+      chatHeight = "100%";
+      right = '0';
+      bottom = '0';
+    }
+    iframeContainer.style.cssText = `
+            position: fixed;
+            right: ${right};
+            bottom: ${bottom};
+            width: ${chatWidth} !important;
+            height: ${chatHeight} !important;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 0 20px #cccccc;
+            display: none;
+            z-index: 10000;
+        `;
+
+    // 创建iframe
+    const iframe = document.createElement('iframe');
+    iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 8px;
+        `;
+
+    iframe.id = 'ai-app-chat-document';
+    //update-begin---author:wangshuai---date:2025-04-25---for:【QQYUN-12159】【AI 广告位】让需要自建AI知识库的用户知道如何通过敲敲云搭建自己的AI知识库---
+    iframe.src = getIframeSrc(finalConfig) + '/ai/app/chat/' + finalConfig.appId + "?source=chatJs";
+    //update-end---author:wangshuai---date:2025-04-25---for:【QQYUN-12159】【AI 广告位】让需要自建AI知识库的用户知道如何通过敲敲云搭建自己的AI知识库---
+    let iconRight = finalConfig.chatWidth === '100%'?'0':'-6px';
+    let iconTop = finalConfig.chatWidth === '100%'?'0':'-9px';
+    if(isMobileDevice()){
+      iconRight = '2px';
+      iconTop = '2px';
+    }
+    // 创建关闭按钮
+    const closeBtn = document.createElement('div');
+    closeBtn.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 1024 1024" class="iconify iconify--ant-design"><path fill="currentColor" fill-rule="evenodd" d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.1.1 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.12.12 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.1.1 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926L224.297 857.629c-.04.041-.06.052-.083.059a.12.12 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.1.1 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512L166.371 224.297c-.041-.04-.052-.06-.059-.083a.12.12 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.1.1 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.12.12 0 0 1 .07 0Z"></path></svg>';
+    closeBtn.style.cssText = `
+            position: absolute;
+            margin-top: ${iconTop};
+            right: ${iconRight};
+            cursor: pointer;
+            background: white;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 5px #cccccc;
+        `;
+
+    // 组装元素
+    iframeContainer.appendChild(closeBtn);
+    iframeContainer.appendChild(iframe);
+    document.body.appendChild(iframeContainer);
+    container.appendChild(icon);
+    document.body.appendChild(container);
+
+    // 事件监听
+    icon.addEventListener('click', () => {
+      iframeContainer.style.display = 'block';
+    });
+
+    closeBtn.addEventListener('click', () => {
+      iframeContainer.style.display = 'none';
+    });
+
+    // 保存实例引用
+    widgetInstance = {
+      remove: () => {
+        container.remove();
+        iframeContainer.remove();
+      },
+    };
+  }
+
+  /**
+   * 获取位置信息
+   *
+   * @param position
+   * @returns {*|string}
+   */
+  function getPositionStyles(position) {
+    const positions = {
+      'top-left': 'top: 20px; left: 20px;',
+      'top-right': 'top: 20px; right: 20px;',
+      'bottom-left': 'bottom: 20px; left: 20px;',
+      'bottom-right': 'bottom: 20px; right: 20px;',
+    };
+    return positions[position] || positions['bottom-right'];
+  }
+
+  /**
+   * 获取src地址
+   */
+  function getIframeSrc(finalConfig) {
+    const specificScript = document.getElementById("e7e007dd52f67fe36365eff636bbffbd");
+    if (specificScript) {
+      return specificScript.src.substring(0, specificScript.src.indexOf('/', specificScript.src.indexOf('://') + 3));
+    }
+  }
+
+  /**
+   * 判断是否为手机
+   * @returns {boolean}
+   */
+  function isMobileDevice() {
+    return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }
+
+  // 暴露全局方法
+  window.createAiChat = createAiChat;
+})();
diff --git a/src/views/super/airag/aiapp/chat/js/useScroll.ts b/src/views/super/airag/aiapp/chat/js/useScroll.ts
new file mode 100644
index 0000000..c71b6bb
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/js/useScroll.ts
@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import { nextTick, ref } from 'vue';
+
+type ScrollElement = HTMLDivElement | null;
+
+interface ScrollReturn {
+  scrollRef: Ref<ScrollElement>;
+  scrollToBottom: () => Promise<void>;
+  scrollToTop: () => Promise<void>;
+  scrollToBottomIfAtBottom: () => Promise<void>;
+}
+
+export function useScroll(): ScrollReturn {
+  const scrollRef = ref<ScrollElement>(null);
+
+  const scrollToBottom = async () => {
+    await nextTick();
+    if (scrollRef.value) scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
+  };
+
+  const scrollToTop = async () => {
+    await nextTick();
+    if (scrollRef.value) scrollRef.value.scrollTop = 0;
+  };
+
+  const scrollToBottomIfAtBottom = async () => {
+    await nextTick();
+    if (scrollRef.value) {
+      const threshold = 100; // Threshold, indicating the distance threshold to the bottom of the scroll bar.
+      const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight;
+      if (distanceToBottom <= threshold) scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
+    }
+  };
+
+  return {
+    scrollRef,
+    scrollToBottom,
+    scrollToTop,
+    scrollToBottomIfAtBottom,
+  };
+}
diff --git a/src/views/super/airag/aiapp/chat/portal/AppPortal.vue b/src/views/super/airag/aiapp/chat/portal/AppPortal.vue
new file mode 100644
index 0000000..1caa2e1
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/portal/AppPortal.vue
@@ -0,0 +1,297 @@
+<!-- 应用门户 -->
+<template>
+  <div ref="portalRef" class="portal-container" :style="portalContainerStyle">
+    <div class="leftArea" :class="[expand ? 'expand' : 'shrink']">
+      <div class="content">
+        <LeftPortalSession ref="leftPortalRef" @app-click="handleAppClick" @task-click="handleTaskClick"></LeftPortalSession>
+      </div>
+      <div class="toggle-btn" @click="handleToggle">
+        <span class="icon">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="rightArea" :class="[expand ? 'expand' : 'shrink']">
+      <chat
+        :key="uuid"
+        url="/airag/chat/send"
+        v-if="uuid"
+        :uuid="uuid"
+        :historyData="historyData"
+        type="view"
+        :formState="appData"
+        :prologue="appData?.prologue"
+        :presetQuestion="appData?.presetQuestion"
+        @reload-message-title="reloadMessageTitle"
+        :chatTitle="chatTitle"
+        :conversationSettings="getCurrentSettings"
+        @edit-settings="handleEditSettings"
+        sessionType="portal"
+        ref="chatRef"
+      ></chat>
+      <div v-if="showWelcome" class="emptyArea">
+        <div class="welcome-text">{{ welcomeText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import LeftPortalSession from './LeftPortalSession.vue';
+  import chat from '/@/views/super/airag/aiapp/chat/chat.vue';
+  import { defHttp } from '@/utils/http/axios';
+  import { useUserStore } from '@/store/modules/user';
+
+  const portalContainerStyle = ref<any>(null);
+  //应用门户的ref
+  const portalRef = ref();
+  //左侧列表是否展开
+  const expand = ref<any>(true);
+  //左侧列表展开关闭事件
+  const handleToggle = () => {
+    expand.value = !expand.value;
+  };
+  //随机id
+  const uuid = ref<string>('');
+  //历史记录
+  const historyData = ref<any>();
+  //应用数据
+  const appData = ref<any>();
+  //聊天标题
+  const chatTitle = ref<any>();
+  //当前会话的设置
+  const conversationSettings = ref<Record<string, Record<string, any>>>({});
+  // 获取当前会话的设置
+  const getCurrentSettings = computed(() => {
+    return conversationSettings.value[uuid.value] || {};
+  });
+  //对话设置弹窗ref
+  const settingsModalRef = ref();
+  //左侧会话的ref
+  const leftPortalRef = ref();
+  // 欢迎语（取当前登录用户姓名或用户名）
+  const userStore = useUserStore();
+  const welcomeName = computed(() => userStore.getUserInfo?.realname || userStore.getUserInfo?.username || '');
+  const welcomeText = computed(() => (welcomeName.value ? `你好，${welcomeName.value}。准备好开始了吗？` : '你好，准备好开始了吗？'));
+  const showWelcome = ref<boolean>(false);
+
+  // 指定长度和基数
+  const getUuid = (len = 10, radix = 16) => {
+    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    var uuid: any = [],
+      i;
+    radix = radix || chars.length;
+
+    if (len) {
+      for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+    } else {
+      var r;
+      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+      uuid[14] = '4';
+      for (i = 0; i < 36; i++) {
+        if (!uuid[i]) {
+          r = 0 | (Math.random() * 16);
+          uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+        }
+      }
+    }
+    return uuid.join('');
+  };
+
+  /**
+   * 重新加载标题
+   * @param title
+   */
+  function reloadMessageTitle(title) {
+    showWelcome.value = false;
+    leftPortalRef.value.addSession(title, uuid.value);
+  }
+
+  // 编辑对话设置
+  function handleEditSettings() {
+    if (settingsModalRef.value) {
+      settingsModalRef.value.open();
+    }
+  }
+
+  /**
+   * 应用数据点击返回事件
+   *
+   * @param value
+   */
+  function handleAppClick(value) {
+    //每次点击都是一个新的会话
+    uuid.value = getUuid(32);
+    appData.value = value;
+    chatTitle.value = appData.value.name;
+    showWelcome.value = true;
+  }
+
+  /**
+   * 回话点击事件
+   *
+   * @param id
+   */
+  function handleTaskClick(id, title) {
+    showWelcome.value = false;
+    uuid.value = id;
+    chatTitle.value = title;
+    //根据选中的id查询聊天内容
+    let params = { conversationId: id, sessionType: 'portal' };
+    //根据id获取历史记录
+    defHttp.get({ url: '/airag/chat/messages', params }, { isTransformResponse: false }).then((res) => {
+      if (res.success) {
+        // 处理新的返回格式（包含messages和flowInputs）
+        if (res.result && res.result.messages) {
+          historyData.value = res.result.messages;
+          if (res.result?.appData) {
+            appData.value = res.result.appData;
+          } else {
+            appData.value = null;
+          }
+          // 加载已保存的设置
+          if (res.result.flowInputs) {
+            conversationSettings.value[id] = res.result.flowInputs;
+          }
+        } else if (Array.isArray(res.result)) {
+          // 兼容旧格式
+          historyData.value = res.result;
+        } else {
+          historyData.value = [];
+        }
+      } else {
+        historyData.value = [];
+      }
+    });
+  }
+
+  // 当 uuid 变化时，清空右侧聊天的会话数据并初始化当前设置，确保开启全新会话
+  watch(
+    () => uuid.value,
+    (newVal) => {
+      if (!newVal) return;
+      // 清空标题与历史记录、防止沿用上一会话数据
+      historyData.value = [];
+      // 初始化当前会话设置容器
+      conversationSettings.value[newVal] = conversationSettings.value[newVal] || {};
+    }
+  );
+
+  watch(
+    () => portalRef.value,
+    () => {
+      if (portalRef.value.offsetHeight) {
+        portalRef.value = { height: `${portalRef.value.offsetHeight} px` };
+      }
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @width: 260px;
+  .portal-container {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background: white;
+    display: flex;
+    overflow: hidden;
+    z-index: 800;
+    border: 1px solid #eeeeee;
+  }
+  .leftArea {
+    width: @width;
+    transition: 0.3s left;
+    position: absolute;
+    left: 0;
+    height: 100%;
+
+    .content {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    &.shrink {
+      left: -@width;
+
+      .toggle-btn {
+        .icon {
+          transform: rotate(0deg);
+        }
+      }
+    }
+
+    .toggle-btn {
+      transition:
+        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      color: rgb(51, 54, 57);
+      border: 1px solid rgb(239, 239, 245);
+      background-color: #fff;
+      box-shadow: 0 2px 4px 0px #e7e9ef;
+      transform: translateX(50%) translateY(-50%);
+      z-index: 1;
+    }
+
+    .icon {
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transform: rotate(180deg);
+      font-size: 18px;
+      height: 18px;
+
+      svg {
+        height: 1em;
+        width: 1em;
+        vertical-align: top;
+      }
+    }
+  }
+
+  .rightArea {
+    margin-left: @width;
+    transition: 0.3s margin-left;
+
+    &.shrink {
+      margin-left: 0;
+    }
+
+    flex: 1;
+    min-width: 0;
+  }
+
+  .emptyArea {
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #d4d4d4;
+  }
+  .emptyArea .welcome-text {
+    font-size: 32px;
+    color: #3d4353;
+    font-weight: 600;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/portal/LeftPortalSession.vue b/src/views/super/airag/aiapp/chat/portal/LeftPortalSession.vue
new file mode 100644
index 0000000..abb5077
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/portal/LeftPortalSession.vue
@@ -0,0 +1,485 @@
+<!-- 左侧应用门户会话设置 -->
+<template>
+  <div class="space-page">
+    <div class="header">
+      <img class="header-image" :src="loginLogo" />
+      <div class="header-name"> JEECG </div>
+    </div>
+    <div class="new-session" @click="handleNewSession">
+      <div class="left-box">
+        <div class="app-icon">
+          <Icon icon="ant-design:edit-outlined" size="14"></Icon>
+        </div>
+        <div class="app-name">新对话</div>
+      </div>
+    </div>
+    <div class="session-scroll">
+      <div class="section">
+        <template v-for="app in apps">
+          <div class="app-item" :class="activeKey === app.id ? 'active' : ''" @click="handleAppClick(app)">
+            <div class="app-icon">
+              <img :src="getAiImg(app)" />
+            </div>
+            <div class="app-name" :title="app.name">{{ app.name }}</div>
+          </div>
+        </template>
+      </div>
+
+      <div class="section">
+        <div class="section-title">历史对话</div>
+        <div v-if="tasks.length" class="task-list">
+          <div v-for="task in tasks" :key="task.id" class="task-item" :class="activeKey === task.id ? 'active' : ''" @click="handleTaskClick(task)">
+            <div class="task-title" :title="task.title" v-if="!task.isEdit">{{ task.title }}</div>
+            <a-input
+              class="title"
+              ref="inputRef"
+              v-if="task.isEdit"
+              :defaultValue="task.title"
+              placeholder="请输入标题"
+              @change="handleInputChange"
+              @keyup.enter="inputBlur(task)"
+            />
+            <div class="icon-edit">
+              <a-space>
+                <span class="icon edit" @click.prevent.stop="handleEdit(task)" v-if="!task.isEdit">
+                  <svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M6.414 15.89L16.556 5.748l-1.414-1.414L5 14.476v1.414zm.829 2H3v-4.243L14.435 2.212a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414zM3 19.89h18v2H3z"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="icon del">
+                  <a-popconfirm
+                    :overlayStyle="{ 'z-index': 9999 }"
+                    title="确定删除此记录？"
+                    placement="bottom"
+                    ok-text="确定"
+                    cancel-text="取消"
+                    @confirm.prevent.stop="handleDel(task)"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
+                      <path
+                        fill="currentColor"
+                        d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm1 2H6v12h12zm-9 3h2v6H9zm4 0h2v6h-2zM9 4v2h6V4z"
+                      ></path>
+                    </svg>
+                  </a-popconfirm>
+                </span>
+              </a-space>
+            </div>
+          </div>
+        </div>
+        <a-empty v-else description="暂无历史对话" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import defaultImg from '@/views/super/airag/aiapp/img/ailogo.png';
+  import { defHttp } from '@/utils/http/axios';
+  import loginLogo from '/@/assets/images/logo.png';
+
+  const emit = defineEmits(['register', 'app-click', 'task-click', 'new-session-click']);
+
+  const defaultApp = ref({
+    id: '1999373661846880258',
+    name: '聊天助手',
+  });
+  //应用列表
+  const apps = ref([
+    {
+      id: '1998717610730352641',
+      name: '帮我写作',
+      icon: 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/helpWriting_1765520898059.png',
+      prologue: '请输入\n出发地：\n目的地：\n人数：',
+    },
+    {
+      id: '1996471445272088578',
+      name: '图像识别',
+      icon: 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/temp/1dataOCR_1743065089791.png',
+      prologue: '上传一张图片，我来为你识别图片的内容',
+    },
+    {
+      id: '1902262577996546050',
+      name: '看图说话',
+      icon: 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/temp/工具-图片解析_1743065064801.png',
+      prologue: '上传一张图片，我来为你讲述图片中的故事',
+    },    
+    {
+      id: '2008448202536456193',
+      name: 'Chat2BI',
+      icon: 'https://minio.jeecg.com/otatest/chatShow_1769395642452.png',
+      prologue: '你好，我是Chat2BI 图表生成智能体。',
+      flowId: '2008379264947519489',
+      type: 'chatFLow',
+      presetQuestion: '[{"key":1,"descr":"请统计系统用户的性别分布比例，并以饼状图和列表表格展示。","update":true}]'
+    },    
+    {
+      id: '2008090512835629057',
+      name: 'AI绘画',
+      icon: 'https://minio.jeecg.com/otatest/AiWrite_1769395779558.png',
+      prologue: '你好，我是 AI绘图智能体。',
+      presetQuestion: '[{"key":1,"descr":"请生成一张具有日本风格的动漫成年女孩。","update":true}, {"key":2,"descr":"请生成一幅中国神话故事中，手持武器的哪吒形象。","update":true}]',
+      metadata:"{\"izDraw\":\"1\"}"
+    },  
+    {
+      id: '1993651187913981953',
+      name: '商品导购',
+      icon: 'https://minio.jeecg.com/otatest/shoppingGuide_1769754188966.png',
+      prologue: '向要了解哪一款产品，我可以给你介绍。',
+      presetQuestion: '[{"key":1,"sort":1,"descr":"HIP 0603T Series","update":false},{"key":2,"sort":2,"descr":"CHIP 1206HC Series","update":false},{"key":3,"sort":3,"descr":"BRICK 1032ST Series","update":true}]',
+    },
+  ]);
+
+  //应用数据
+  const appData = ref<any>({});
+
+  //会话
+  const tasks = ref<any>([]);
+
+  /**
+   * 点击的key
+   */
+  const activeKey = ref<string>('');
+
+  /**
+   * 获取图片
+   */
+  const getAiImg = (app) => {
+    return getFileAccessHttpUrl(app?.icon) || defaultImg;
+  };
+  let inputValue: string = '';
+  const handleInputChange = (e) => {
+    inputValue = e.target.value.trim();
+  };
+
+  // 编辑
+  const handleEdit = (item) => {
+    item.isEdit = true;
+    inputValue = item.title;
+  };
+
+  /**
+   * 应用点击事件
+   *
+   * @param app
+   */
+  function handleAppClick(app) {
+    activeKey.value = app.id;
+    appData.value = app;
+    emit('app-click', app);
+  }
+
+  /**
+   * 添加会话
+   */
+  function addSession(title, id) {
+    activeKey.value = id;
+    if (tasks.value?.length > 0) {
+      let findIndex = tasks.value.findIndex((item) => item.id === id);
+      if (findIndex >= 0) {
+        return;
+      }
+    }
+    tasks.value.unshift({ id: id, title: title });
+  }
+
+  /**
+   * 获取会话
+   */
+  async function getSessionList() {
+    const res = await defHttp.get(
+      {
+        url: '/airag/chat/getConversationsByType',
+        params: { sessionType: 'portal' },
+      },
+      { isTransformResponse: false }
+    );
+    if (res && res.success) {
+      tasks.value = res.result;
+    } else {
+      tasks.value = [];
+    }
+    return tasks.value;
+  }
+
+  /**
+   * 会话点击事件
+   *
+   * @param task
+   */
+  function handleTaskClick(task) {
+    if (task.id === activeKey.value) {
+      return;
+    }
+    activeKey.value = task.id;
+    emit('task-click', task.id, task.title);
+  }
+
+  // 失去焦点
+  function inputBlur(item) {
+    item.isEdit = false;
+    item.title = inputValue;
+    defHttp.put(
+      {
+        url: '/airag/chat/conversation/update/title',
+        params: { id: item.id, title: inputValue, sessionType: 'portal' },
+      },
+      { joinParamsToUrl: true }
+    );
+  }
+
+  /**
+   * 删除
+   * @param data
+   */
+  function handleDel(data) {
+    defHttp
+      .delete(
+        {
+          url: '/airag/chat/conversation/' + data.id + '/portal',
+        },
+        { isTransformResponse: false }
+      )
+      .then(() => {
+        getSessionList();
+      });
+  }
+
+  /**
+   * 新对话
+   */
+  function handleNewSession() {
+    activeKey.value = '';
+    emit('app-click', defaultApp.value);
+  }
+
+  onMounted(async () => {
+    activeKey.value = '';
+    const list = await getSessionList();
+    if (list && list.length > 0) {
+      const first = list[0];
+      activeKey.value = first.id;
+      emit('task-click', first.id, first.title);
+    } else {
+      emit('app-click', defaultApp.value);
+    }
+  });
+
+  defineExpose({
+    addSession,
+  });
+</script>
+
+<style scoped lang="less">
+  .space-page {
+    padding: 12px 16px;
+    height: 100%;
+    background: #fbfcff; // 左侧浅色背景，区分右侧
+    border-right: 1px solid #eef2f6; // 与右侧的分隔线
+    display: flex; // 纵向布局，顶部固定，下面滚动
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .space-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  .space-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .section {
+    margin-top: 12px;
+  }
+
+  .section-title {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .app-item {
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 2px;
+  }
+
+  .app-item:hover {
+    background: rgba(0, 0, 0, 0.04);
+    border-radius: 10px;
+  }
+
+  .app-icon {
+    width: 14px;
+    height: 14px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .app-name {
+    margin-left: 10px;
+    font-size: 14px;
+    color: #1f2329;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .new-session {
+    margin-top: 10px;
+    align-items: center;
+    border-radius: 12px;
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+    height: 36px;
+    margin-right: 1px;
+    overflow: visible;
+    padding: 6px 10px !important;
+    position: relative;
+    transition: all 0.15s ease-in-out;
+    cursor: pointer;
+    margin-bottom: 2px;
+    border: 1px solid #e0ecff;
+    background: #f5f8ff;
+  }
+
+  .new-session:hover {
+    background: #eaf2ff;
+    border-color: #d4e5ff;
+  }
+
+  .new-session.active {
+    background: #eaf2ff;
+    border-color: #cfe0ff;
+  }
+
+  .new-session .left-box {
+    display: flex;
+    align-items: center;
+  }
+
+  .new-session .app-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eaf2ff;
+    color: #3761eb;
+  }
+
+  .new-session .app-name {
+    margin-left: 10px;
+    font-size: 14px;
+    color: #3761eb;
+    font-weight: 600;
+  }
+
+  .task-list {
+    position: relative;
+  }
+
+  .task-item {
+    align-items: center;
+    border-radius: 12px;
+    display: flex;
+    flex-shrink: 0;
+    height: 36px;
+    margin-right: 1px;
+    overflow: visible;
+    padding: 6px 10px !important;
+    position: relative;
+    transition: all 0.15s ease-in-out;
+    cursor: pointer;
+    margin-bottom: 2px;
+    justify-content: space-between;
+  }
+
+  .task-item:hover {
+    background: rgba(0, 0, 0, 0.04);
+    border-radius: 12px;
+
+    .edit,
+    .del {
+      display: block;
+    }
+  }
+
+  .task-title {
+    font-size: 14px;
+    color: #1f2329;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .active {
+    background: rgba(0, 0, 0, 0.04);
+    border-radius: 12px;
+    .edit {
+      display: block;
+    }
+  }
+
+  .edit,
+  .del {
+    display: none;
+  }
+
+  .icon-edit {
+    display: flex;
+  }
+  .session-scroll {
+    flex: 1; // 占满剩余空间
+    min-height: 0; // 允许子元素在容器内正确滚动
+    overflow-y: auto; // 仅列表区域滚动
+    margin-bottom: 20px;
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+      width: 7px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #d9dfe7;
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+
+  .header {
+    margin-left: 0;
+    display: flex;
+    height: 40px;
+    padding: 0;
+    background-color: #fff;
+    .header-image {
+      width: 36px;
+      height: 36px;
+    }
+    .header-name {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 16px;
+      align-self: center;
+      margin-left: 8px;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/presetQuestion.vue b/src/views/super/airag/aiapp/chat/presetQuestion.vue
new file mode 100644
index 0000000..d6aedda
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/presetQuestion.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="presetQuestion-wrap">
+<!--    <svg
+      v-if="btnShow"
+      class="leftBtn"
+      :class="leftBtnStatus"
+      t="1710296339017"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="5070"
+      @click="onScroll('prev')"
+    >
+      <path
+        d="M970.496 543.829333l30.165333-30.165333-415.829333-415.914667a42.837333 42.837333 0 0 0-60.288 0 42.538667 42.538667 0 0 0 0 60.330667l355.413333 355.498667-355.413333 355.285333a42.496 42.496 0 0 0 0 60.288c16.64 16.64 43.861333 16.469333 60.288 0.042667l383.914667-383.701334 1.749333-1.664z"
+        fill="currentColor"
+        p-id="5071"
+      ></path>
+    </svg>-->
+    <div class="content">
+      <ul ref="ulElemRef">
+        <li v-for="(item, index) in data" :key="index" class="item" @click="handleQuestion(item.descr)">
+          <div class="question-descr">
+            <Icon v-if="item.icon" :icon="item.icon" size="20"></Icon>
+            <svg v-else width="14px" height="14px" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"></path></svg>
+            <span>{{ item.name }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+<!--    <svg
+      v-if="btnShow"
+      class="rightBtn"
+      :class="rightBtnStatus"
+      t="1710296339017"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="5070"
+      @click="onScroll('next')"
+    >
+      <path
+        d="M970.496 543.829333l30.165333-30.165333-415.829333-415.914667a42.837333 42.837333 0 0 0-60.288 0 42.538667 42.538667 0 0 0 0 60.330667l355.413333 355.498667-355.413333 355.285333a42.496 42.496 0 0 0 0 60.288c16.64 16.64 43.861333 16.469333 60.288 0.042667l383.914667-383.701334 1.749333-1.664z"
+        fill="currentColor"
+        p-id="5071"
+      ></path>
+    </svg>-->
+  </div>
+</template>
+
+<script name="presetQuestion" setup lang="ts">
+import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
+  const emit = defineEmits(['outQuestion']);
+  const props = defineProps({
+    quickCommandData:{ type: Object },
+  });
+  const data = ref(props.quickCommandData);
+  const leftBtnStatus = ref('');
+  const rightBtnStatus = ref('');
+  const rightBtn = ref('');
+  const ulElemRef = ref(null);
+  const btnShow = ref(false);
+  let timer = null;
+  const handleScroll = (e) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const scrollLeft = e.target.scrollLeft;
+      const offsetWidth = e.target.offsetWidth;
+      const scrollWidth = e.target.scrollWidth;
+      if (scrollWidth > offsetWidth) {
+        btnShow.value = true;
+      } else {
+        btnShow.value = false;
+      }
+      if (scrollLeft <= 0) {
+        leftBtnStatus.value = 'disabled';
+      } else if (scrollWidth - offsetWidth == scrollLeft) {
+        rightBtnStatus.value = 'disabled';
+      } else {
+        leftBtnStatus.value = '';
+        rightBtnStatus.value = '';
+      }
+    }, 100);
+  };
+  const onScroll = (flag) => {
+    const offsetWidth = ulElemRef.value.offsetWidth;
+    if (flag == 'prev') {
+      ulElemRef.value.scrollLeft = ulElemRef.value.scrollLeft - offsetWidth;
+    } else if (flag == 'next') {
+      ulElemRef.value.scrollLeft = ulElemRef.value.scrollLeft + offsetWidth;
+    }
+  };
+  const handleQuestion = (item) => {
+    emit('outQuestion', item);
+  };
+  
+  watch(()=>props.quickCommandData, (val) => {
+    data.value = props.quickCommandData;
+  })
+  
+  onMounted(() => {
+    ulElemRef.value.addEventListener('scroll', handleScroll, false);
+    handleScroll({ target: ulElemRef.value });
+  });
+  onBeforeUnmount(() => {
+    ulElemRef.value.removeEventListener('scroll', handleScroll);
+  });
+</script>
+
+<style lang="less" scoped>
+  .presetQuestion-wrap {
+    display: flex;
+    align-items: center;
+    svg {
+      width: 14px;
+      height: 14px;
+      flex: none;
+      cursor: pointer;
+      color: #c6c2c2;
+      &.leftBtn {
+        transform: rotate(180deg);
+      }
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+        cursor: default;
+      }
+    }
+    .content {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+    ul {
+      display: flex;
+      margin-bottom: 0;
+      width: 100%;
+      overflow-y: hidden;
+      overflow-x: auto;
+      /* 隐藏所有滚动条 */
+      &::-webkit-scrollbar {
+        display: none;
+        height: 0;
+        width: 0;
+      }
+    }
+    ul:hover {
+      &::-webkit-scrollbar {
+        display: block;
+        height: 10px;
+        width: 10px;
+      }
+    }
+    .item {
+      border: 1px solid #e6e6e6;
+      border-radius: 16px;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 2px 10px;
+      width: max-content;
+      margin-right: 6px;
+      white-space: nowrap;
+      transition: all 300ms ease;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+      }
+    }
+    .question-descr{
+      display: flex;
+      align-items: center;
+      span{
+        margin-left: 4px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/route/register.ts b/src/views/super/airag/aiapp/chat/route/register.ts
new file mode 100644
index 0000000..4b9581f
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/route/register.ts
@@ -0,0 +1,74 @@
+import type { App } from 'vue';
+import { router } from "/@/router";
+import type { RouteRecordRaw } from "vue-router";
+import { LAYOUT } from "@/router/constant";
+
+const ChatRoutes: RouteRecordRaw[] = [
+  {
+    path: "/ai/app/chat/:appId",
+    name: "ai-chat-@appId-@modeType",
+    component: () => import("/@/views/super/airag/aiapp/chat/AiChat.vue"),
+    meta: {
+      title: 'AI聊天',
+      ignoreAuth: true,
+    },
+  },  
+  {
+    path: "/ai/app/chatIcon/:appId",
+    name: "ai-chatIcon-@appId",
+    component: () => import("/@/views/super/airag/aiapp/chat/AiChatIcon.vue"),
+    meta: {
+      title: 'AI聊天',
+      ignoreAuth: true,
+    },
+  },
+  {
+    path: '/ai/chat',
+    name: 'aiChat',
+    component: LAYOUT,
+    meta: {
+      title: 'ai聊天',
+    },
+    children: [
+      {
+        path: "/ai/chat/:appId",
+        name: "ai-chat-@appId",
+        component: () => import("/@/views/super/airag/aiapp/chat/AiChat.vue"),
+        meta: {
+          title:'AI助手',
+          ignoreAuth: false,
+        },
+      },
+      {
+        path: "/ai/chat",
+        name: "ai-chat",
+        component: () => import("/@/views/super/airag/aiapp/chat/AiChat.vue"),
+        meta: {
+          title:'AI助手',
+          ignoreAuth: false,
+        },
+      }
+    ],
+  },
+  {
+    path: '/ai/chat/portal',
+    name: 'ai-chat-portal',
+    component: () => import('/@/views/super/airag/aiapp/chat/portal/AppPortal.vue'),
+    meta: {
+      title: 'AI聊天',
+      ignoreAuth: false,
+    },
+  },
+]
+
+/** 注册路由 */
+export async function register(app: App) {
+  await registerMyAppRouter(app);
+  console.log('[聊天路由] 注册完成！');
+}
+
+async function registerMyAppRouter(_: App) {
+  for(let appRoute of ChatRoutes){
+    await router.addRoute(appRoute);
+  }
+}
diff --git a/src/views/super/airag/aiapp/chat/slide.vue b/src/views/super/airag/aiapp/chat/slide.vue
new file mode 100644
index 0000000..958b595
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/slide.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="slide-wrap">
+    <div class="header">
+      <img class="header-image" :src="getImage()" />
+      <div class="header-name">{{ appData.name || 'AI助手' }}</div>
+    </div>
+    <div class="createArea">
+      <a-button type="dashed" @click="handleCreate">新建聊天</a-button>
+    </div>
+    <div class="historyArea">
+      <ul>
+        <li
+          v-for="(item, index) in dataSource.history"
+          :key="item.id"
+          class="list"
+          :class="[item.id == dataSource.active ? 'active' : 'normal', dataSource.history.length == 1 ? 'last' : '']"
+          @click="handleToggleChat(item, index)"
+        >
+          <i class="icon message">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              aria-hidden="true"
+              role="img"
+              class="iconify iconify--ri"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M2 8.994A5.99 5.99 0 0 1 8 3h8c3.313 0 6 2.695 6 5.994V21H8c-3.313 0-6-2.695-6-5.994zM20 19V8.994A4.004 4.004 0 0 0 16 5H8a3.99 3.99 0 0 0-4 3.994v6.012A4.004 4.004 0 0 0 8 19zm-6-8h2v2h-2zm-6 0h2v2H8z"
+              ></path>
+            </svg>
+          </i>
+          <a-input
+            class="title"
+            ref="inputRef"
+            v-if="item.isEdit"
+            :defaultValue="item.title"
+            placeholder="请输入标题"
+            @change="handleInputChange"
+            @keyup.enter="inputBlur(item)"
+          />
+          <span class="title" v-else>{{ item.title }}</span>
+          <span class="icon edit" @click.stop="handleEdit(item)" v-if="!item.isEdit && !item.disabled">
+            <svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M6.414 15.89L16.556 5.748l-1.414-1.414L5 14.476v1.414zm.829 2H3v-4.243L14.435 2.212a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414zM3 19.89h18v2H3z"
+              ></path>
+            </svg>
+          </span>
+          <span class="icon del">
+            <a-popconfirm
+              :overlayStyle="{ 'z-index': 9999 }"
+              title="确定删除此记录？"
+              placement="bottom"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm.stop="handleDel(item)"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" role="img" class="iconify iconify--ri" width="1em" height="1em" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm1 2H6v12h12zm-9 3h2v6H9zm4 0h2v6h-2zM9 4v2h6V4z"
+                ></path>
+              </svg>
+            </a-popconfirm>
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="left-footer" v-if="source!='chatJs'">
+      AI客服由
+      <a style="color: #4183c4;margin-left: 2px;margin-right: 2px" href="https://www.qiaoqiaoyun.com/aiCustomerService" target="_blank">
+        JEECG AI
+      </a>
+      提供
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { defHttp } from '@/utils/http/axios';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import defaultImg from '../img/ailogo.png';
+  const props = defineProps(['dataSource', 'appData','source']);
+  const emit = defineEmits(['save', 'click', 'reloadRight', 'prologue']);
+  const inputRef = ref(null);
+  const router = useRouter();
+  let inputValue = '';
+  //新建聊天
+  const handleCreate = () => {
+    const uuid = getUuid();
+    props.dataSource.history.unshift({ title: '新建聊天', id: uuid, isEdit: false, disabled: true });
+    // 新建第一个(需要高亮选中)
+    props.dataSource.active = uuid;
+    emit('click', "新建聊天", 0);
+  };
+  // 切换聊天
+  const handleToggleChat = (item, index) => {
+    if (item.id != props.dataSource.active) {
+      props.dataSource.active = item.id;
+      emit('click', item.title, index);
+    }
+  };
+  const handleInputChange = (e) => {
+    inputValue = e.target.value.trim();
+  };
+  // 失去焦点
+  const inputBlur = (item) => {
+    item.isEdit = false;
+    item.title = inputValue;
+    defHttp
+      .put(
+        {
+          url: '/airag/chat/conversation/update/title',
+          params: { id: item.id, title: inputValue },
+        },
+        { joinParamsToUrl: true }
+      )
+      .then((res) => {});
+  };
+  // 编辑
+  const handleEdit = (item) => {
+    console.log(item);
+    item.isEdit = true;
+    inputValue = item.title;
+  };
+  // 保存
+  const handleSave = (item) => {
+    item.isEdit = false;
+    item.title = inputValue;
+  };
+
+  /**
+   * 删除
+   * @param data
+   */
+  function handleDel(data) {
+    const findIndex = props.dataSource.history.findIndex((item) => item.id == data.id);
+    if (findIndex != -1) {
+      props.dataSource.history.splice(findIndex, 1);
+      // 删除的是当前active的，active往前移，前面没了往后移。
+      if (props.dataSource.history.length) {
+        if (props.dataSource.active == data.id) {
+          if (findIndex > 0) {
+            props.dataSource.active = props.dataSource.history[findIndex - 1].id;
+          } else {
+            props.dataSource.active = props.dataSource.history[0].id;
+          }
+        }
+        emit('click', props.dataSource.history[0].title, findIndex);
+      } else {
+        //  删没了（删除了最后一个）
+        handleCreate();
+      }
+    }
+    //update-begin---author:wangshuai---date:2025-03-12---for:【QQYUN-11560】新建聊天内容为空，无法删除---
+    if(data.disabled){
+      return;
+    }
+    //update-end---author:wangshuai---date:2025-03-12---for:【QQYUN-11560】新建聊天内容为空，无法删除---
+    defHttp.delete({
+      url: '/airag/chat/conversation/' + data.id,
+    },{ isTransformResponse: false });
+  }
+
+  /**
+   * 获取图片
+   */
+  function getImage() {
+    return props.appData.icon ? getFileAccessHttpUrl(props.appData.icon) : defaultImg;
+  }
+
+  watch(
+    () => inputRef.value,
+    (newVal: any) => {
+      if (newVal?.length) {
+        newVal[0].focus();
+      }
+    },
+    { deep: true }
+  );
+
+  // 指定长度和基数
+  const getUuid = (len = 10, radix = 16) => {
+    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    var uuid: any = [],
+      i;
+    radix = radix || chars.length;
+
+    if (len) {
+      for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+    } else {
+      var r;
+      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+      uuid[14] = '4';
+      for (i = 0; i < 36; i++) {
+        if (!uuid[i]) {
+          r = 0 | (Math.random() * 16);
+          uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+        }
+      }
+    }
+    return uuid.join('');
+  };
+</script>
+
+<style scoped lang="less">
+  .slide-wrap {
+    border-right: 1px solid #e5e7eb;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .historyArea {
+      padding: 20px;
+      padding-top: 0;
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      margin-bottom: 20px;
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+    }
+    .historyArea ul li:hover {
+      .del {
+        display: block;
+      }
+    }
+    .createArea {
+      padding: 20px;
+      padding-bottom: 0;
+    }
+    .ant-btn {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+  ul {
+    margin-bottom: 0;
+  }
+  .list {
+    width: 100%;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    border-radius: 0.375rem;
+    border-width: 1px;
+    cursor: pointer;
+    margin-bottom: 10px;
+    color: #333;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    &:hover,
+    &.active {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+    .edit,
+    .save,
+    .del {
+      display: none;
+    }
+    &.active {
+      .edit,
+      .save,
+      .del {
+        display: block;
+      }
+      &.last {
+        .del {
+          display: none;
+        }
+      }
+    }
+    .message {
+      margin-right: 8px;
+    }
+    .edit {
+      margin-right: 8px;
+    }
+    .title {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      position: relative;
+      top: 2px;
+      &.ant-input {
+        margin-right: 20px;
+      }
+    }
+    svg {
+      vertical-align: middle;
+    }
+  }
+  :deep(.ant-popover) {
+    z-index: 9999 !important;
+  }
+  :deep(.ant-popconfirm) {
+    z-index: 9999 !important;
+  }
+  .header {
+    display: flex;
+    padding: 20px 4px 0 4px;
+    margin-left: 16px;
+    .header-image {
+      height: 35px;
+      width: 35px;
+      border-radius: 4px;
+      margin-right: 10px;
+    }
+    .header-name {
+      align-self: center;
+      color: #1d2939;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+  .left-footer{
+    display:flex;
+    margin-right: 20px;
+    font-size: 12px;
+    position: absolute;
+    bottom: 4px;
+    left: 50px;
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/chat/style/github-markdown.less b/src/views/super/airag/aiapp/chat/style/github-markdown.less
new file mode 100644
index 0000000..c6091ab
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/style/github-markdown.less
@@ -0,0 +1,1123 @@
+html.dark {
+  .markdown-body {
+    color-scheme: dark;
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #c9d1d9;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #6e7681;
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: #bfc4cc;
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-attention-subtle: #ece6d9;
+    --color-danger-fg: #f85149;
+  }
+}
+
+html {
+  .markdown-body {
+    color-scheme: light;
+    --color-prettylights-syntax-comment: #6e7781;
+    --color-prettylights-syntax-constant: #0550ae;
+    --color-prettylights-syntax-entity: #8250df;
+    --color-prettylights-syntax-storage-modifier-import: #24292f;
+    --color-prettylights-syntax-entity-tag: #116329;
+    --color-prettylights-syntax-keyword: #cf222e;
+    --color-prettylights-syntax-string: #0a3069;
+    --color-prettylights-syntax-variable: #953800;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+    --color-prettylights-syntax-carriage-return-bg: #cf222e;
+    --color-prettylights-syntax-string-regexp: #116329;
+    --color-prettylights-syntax-markup-list: #3b2300;
+    --color-prettylights-syntax-markup-heading: #0550ae;
+    --color-prettylights-syntax-markup-italic: #24292f;
+    --color-prettylights-syntax-markup-bold: #24292f;
+    --color-prettylights-syntax-markup-deleted-text: #82071e;
+    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+    --color-prettylights-syntax-markup-inserted-text: #116329;
+    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+    --color-prettylights-syntax-markup-changed-text: #953800;
+    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+    --color-prettylights-syntax-meta-diff-range: #8250df;
+    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+    --color-fg-default: #24292f;
+    --color-fg-muted: #57606a;
+    --color-fg-subtle: #6e7781;
+    --color-canvas-default: #ffffff;
+    --color-canvas-subtle: #f6f8fa;
+    --color-border-default: #d0d7de;
+    --color-border-muted: hsla(210, 18%, 87%, 1);
+    --color-neutral-muted: #e7ebf2;
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-attention-subtle: #fff8c5;
+    --color-danger-fg: #cf222e;
+  }
+}
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+}
+
+.markdown-body details,
+.markdown-body figcaption,
+.markdown-body figure {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body [hidden] {
+  display: none !important;
+}
+
+.markdown-body a {
+  background-color: transparent;
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+
+.markdown-body abbr[title] {
+  border-bottom: none;
+  text-decoration: underline dotted;
+}
+
+.markdown-body b,
+.markdown-body strong {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body dfn {
+  font-style: italic;
+}
+
+.markdown-body h1 {
+  margin: 0.67em 0;
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+.markdown-body mark {
+  background-color: var(--color-attention-subtle);
+  color: var(--color-fg-default);
+}
+
+.markdown-body small {
+  font-size: 90%;
+}
+
+.markdown-body sub,
+.markdown-body sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.markdown-body sub {
+  bottom: -0.25em;
+}
+
+.markdown-body sup {
+  top: -0.5em;
+}
+
+.markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: var(--color-canvas-default);
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre,
+.markdown-body samp {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+.markdown-body figure {
+  margin: 1em 40px;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid var(--color-border-muted);
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--color-border-default);
+  border: 0;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body [type='button'],
+.markdown-body [type='reset'],
+.markdown-body [type='submit'] {
+  -webkit-appearance: button;
+}
+
+.markdown-body [type='checkbox'],
+.markdown-body [type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body [type='number']::-webkit-inner-spin-button,
+.markdown-body [type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.markdown-body [type='search']::-webkit-search-cancel-button,
+.markdown-body [type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.markdown-body ::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+.markdown-body ::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body ::placeholder {
+  color: var(--color-fg-subtle);
+  opacity: 1;
+}
+
+.markdown-body hr::before {
+  display: table;
+  content: '';
+}
+
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body details:not([open]) > *:not(summary) {
+  display: none !important;
+}
+
+.markdown-body a:focus,
+.markdown-body [role='button']:focus,
+.markdown-body input[type='radio']:focus,
+.markdown-body input[type='checkbox']:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.markdown-body a:focus:not(:focus-visible),
+.markdown-body [role='button']:focus:not(:focus-visible),
+.markdown-body input[type='radio']:focus:not(:focus-visible),
+.markdown-body input[type='checkbox']:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.markdown-body a:focus-visible,
+.markdown-body [role='button']:focus-visible,
+.markdown-body input[type='radio']:focus-visible,
+.markdown-body input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.markdown-body a:not([class]):focus,
+.markdown-body a:not([class]):focus-visible,
+.markdown-body input[type='radio']:focus,
+.markdown-body input[type='radio']:focus-visible,
+.markdown-body input[type='checkbox']:focus,
+.markdown-body input[type='checkbox']:focus-visible {
+  outline-offset: 0;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font:
+    11px ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  line-height: 10px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-subtle);
+  border: solid 1px var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1.25;
+}
+
+.markdown-body h2 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+.markdown-body h3 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.85em;
+  color: var(--color-fg-muted);
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--color-fg-muted);
+  border-left: 0.25em solid var(--color-border-default);
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body tt,
+.markdown-body code,
+.markdown-body samp {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  font-size: 12px;
+  word-wrap: normal;
+}
+
+.markdown-body .octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+.markdown-body input::-webkit-outer-spin-button,
+.markdown-body input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.markdown-body::before {
+  display: table;
+  content: '';
+}
+
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .absent {
+  color: var(--color-danger-fg);
+}
+
+.markdown-body .anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  padding: 0 0.2em;
+  font-size: inherit;
+}
+
+.markdown-body summary h1,
+.markdown-body summary h2,
+.markdown-body summary h3,
+.markdown-body summary h4,
+.markdown-body summary h5,
+.markdown-body summary h6 {
+  display: inline-block;
+}
+
+.markdown-body summary h1 .anchor,
+.markdown-body summary h2 .anchor,
+.markdown-body summary h3 .anchor,
+.markdown-body summary h4 .anchor,
+.markdown-body summary h5 .anchor,
+.markdown-body summary h6 .anchor {
+  margin-left: -40px;
+}
+
+.markdown-body summary h1,
+.markdown-body summary h2 {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+
+.markdown-body ol[type='a'] {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body ol[type='A'] {
+  list-style-type: upper-alpha;
+}
+
+.markdown-body ol[type='i'] {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol[type='I'] {
+  list-style-type: upper-roman;
+}
+
+.markdown-body ol[type='1'] {
+  list-style-type: decimal;
+}
+
+.markdown-body div > ol:not([type]) {
+  list-style-type: decimal;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li > p {
+  margin-top: 16px;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--color-border-default);
+}
+
+.markdown-body table tr {
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--color-canvas-subtle);
+}
+
+.markdown-body table img {
+  background-color: transparent;
+}
+
+.markdown-body img[align='right'] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align='left'] {
+  padding-right: 20px;
+}
+
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+
+.markdown-body span.frame > span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+}
+
+.markdown-body span.frame span img {
+  display: block;
+  float: left;
+}
+
+.markdown-body span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: var(--color-fg-default);
+}
+
+.markdown-body span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-center > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.markdown-body span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.markdown-body span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markdown-body span.align-right > span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+
+.markdown-body span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+
+.markdown-body span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+
+.markdown-body span.float-right > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markdown-body code,
+.markdown-body tt {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+}
+
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+
+.markdown-body del code {
+  text-decoration: inherit;
+}
+
+.markdown-body samp {
+  font-size: 85%;
+}
+
+.markdown-body pre code {
+  font-size: 100%;
+}
+
+.markdown-body pre > code {
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--color-canvas-subtle);
+  border-radius: 6px;
+}
+
+.markdown-body pre code,
+.markdown-body pre tt {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  padding: 5px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.markdown-body .csv-data .blob-num {
+  padding: 10px 8px 9px;
+  text-align: right;
+  background: var(--color-canvas-default);
+  border: 0;
+}
+
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+
+.markdown-body .csv-data th {
+  font-weight: var(--base-text-weight-semibold, 600);
+  background: var(--color-canvas-subtle);
+  border-top: 0;
+}
+
+.markdown-body [data-footnote-ref]::before {
+  content: '[';
+}
+
+.markdown-body [data-footnote-ref]::after {
+  content: ']';
+}
+
+.markdown-body .footnotes {
+  font-size: 12px;
+  color: var(--color-fg-muted);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.markdown-body .footnotes ol {
+  padding-left: 16px;
+}
+
+.markdown-body .footnotes ol ul {
+  display: inline-block;
+  padding-left: 16px;
+  margin-top: 16px;
+}
+
+.markdown-body .footnotes li {
+  position: relative;
+}
+
+.markdown-body .footnotes li:target::before {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  bottom: -8px;
+  left: -24px;
+  pointer-events: none;
+  content: '';
+  border: 2px solid var(--color-accent-emphasis);
+  border-radius: 6px;
+}
+
+.markdown-body .footnotes li:target {
+  color: var(--color-fg-default);
+}
+
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+
+.markdown-body .pl-c {
+  color: var(--color-prettylights-syntax-comment);
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: var(--color-prettylights-syntax-entity);
+}
+
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+
+.markdown-body .pl-ent {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+
+.markdown-body .pl-k {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+  color: var(--color-prettylights-syntax-string);
+}
+
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+  color: var(--color-prettylights-syntax-variable);
+}
+
+.markdown-body .pl-bu {
+  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+}
+
+.markdown-body .pl-ii {
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+}
+
+.markdown-body .pl-c2 {
+  color: var(--color-prettylights-syntax-carriage-return-text);
+  background-color: var(--color-prettylights-syntax-carriage-return-bg);
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+
+.markdown-body .pl-ml {
+  color: var(--color-prettylights-syntax-markup-list);
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-heading);
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: var(--color-prettylights-syntax-markup-italic);
+}
+
+.markdown-body .pl-mb {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+
+.markdown-body .pl-md {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+
+.markdown-body .pl-mi1 {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+
+.markdown-body .pl-mc {
+  color: var(--color-prettylights-syntax-markup-changed-text);
+  background-color: var(--color-prettylights-syntax-markup-changed-bg);
+}
+
+.markdown-body .pl-mi2 {
+  color: var(--color-prettylights-syntax-markup-ignored-text);
+  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+}
+
+.markdown-body .pl-mdr {
+  font-weight: bold;
+  color: var(--color-prettylights-syntax-meta-diff-range);
+}
+
+.markdown-body .pl-ba {
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+}
+
+.markdown-body .pl-sg {
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: var(--color-prettylights-syntax-constant-other-reference-link);
+}
+
+.markdown-body g-emoji {
+  display: inline-block;
+  min-width: 1ch;
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 1em;
+  font-style: normal !important;
+  font-weight: var(--base-text-weight-normal, 400);
+  line-height: 1;
+  vertical-align: -0.075em;
+}
+
+.markdown-body g-emoji img {
+  width: 1em;
+  height: 1em;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item label {
+  font-weight: var(--base-text-weight-normal, 400);
+}
+
+.markdown-body .task-list-item.enabled label {
+  cursor: pointer;
+}
+
+.markdown-body .task-list-item + .task-list-item {
+  margin-top: 4px;
+}
+
+.markdown-body .task-list-item .handle {
+  display: none;
+}
+
+.markdown-body .task-list-item-checkbox {
+  margin: 0 0.2em 0.25em -1.4em;
+  vertical-align: middle;
+}
+
+.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em 0.25em 0.2em;
+}
+
+.markdown-body .contains-task-list {
+  position: relative;
+}
+
+.markdown-body .contains-task-list:hover .task-list-item-convert-container,
+.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
+  display: block;
+  width: auto;
+  height: 24px;
+  overflow: visible;
+  clip: auto;
+}
+
+.markdown-body ::-webkit-calendar-picker-indicator {
+  filter: invert(50%);
+}
diff --git a/src/views/super/airag/aiapp/chat/style/highlight.less b/src/views/super/airag/aiapp/chat/style/highlight.less
new file mode 100644
index 0000000..2dd51cc
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/style/highlight.less
@@ -0,0 +1,206 @@
+html.dark {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+
+  code.hljs {
+    padding: 3px 5px;
+  }
+
+  .hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+
+  .hljs-keyword,
+  .hljs-operator,
+  .hljs-pattern-match {
+    color: #f92672;
+  }
+
+  .hljs-function,
+  .hljs-pattern-match .hljs-constructor {
+    color: #61aeee;
+  }
+
+  .hljs-function .hljs-params {
+    color: #a6e22e;
+  }
+
+  .hljs-function .hljs-params .hljs-typing {
+    color: #fd971f;
+  }
+
+  .hljs-module-access .hljs-module {
+    color: #7e57c2;
+  }
+
+  .hljs-constructor {
+    color: #e2b93d;
+  }
+
+  .hljs-constructor .hljs-string {
+    color: #9ccc65;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #b18eb1;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #98c379;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #e6c07b;
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #d19a66;
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
+html {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+
+  code.hljs {
+    padding: 3px 5px;
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+  }
+
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: #a626a4;
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e45649;
+  }
+
+  .hljs-literal {
+    color: #0184bb;
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #50a14f;
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #986801;
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #4078f2;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #c18401;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
diff --git a/src/views/super/airag/aiapp/chat/style/style.less b/src/views/super/airag/aiapp/chat/style/style.less
new file mode 100644
index 0000000..758453f
--- /dev/null
+++ b/src/views/super/airag/aiapp/chat/style/style.less
@@ -0,0 +1,132 @@
+.markdown-body {
+  background-color: transparent;
+  font-size: 14px;
+
+  p {
+    white-space: pre-wrap;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  pre code,
+  pre tt {
+    line-height: 1.65;
+  }
+
+  .highlight pre,
+  pre {
+    background-color: #fff;
+  }
+
+  code.hljs {
+    padding: 0;
+  }
+
+  .code-block {
+    &-wrapper {
+      position: relative;
+      padding-top: 24px;
+    }
+
+    &-header {
+      position: absolute;
+      top: 5px;
+      right: 0;
+      width: 100%;
+      padding: 0 1rem;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      color: #b3b3b3;
+
+      &__copy {
+        cursor: pointer;
+        margin-left: 0.5rem;
+        user-select: none;
+
+        &:hover {
+          color: #65a665;
+        }
+      }
+    }
+  }
+
+  &.markdown-body-generate > dd:last-child:after,
+  &.markdown-body-generate > dl:last-child:after,
+  &.markdown-body-generate > dt:last-child:after,
+  &.markdown-body-generate > h1:last-child:after,
+  &.markdown-body-generate > h2:last-child:after,
+  &.markdown-body-generate > h3:last-child:after,
+  &.markdown-body-generate > h4:last-child:after,
+  &.markdown-body-generate > h5:last-child:after,
+  &.markdown-body-generate > h6:last-child:after,
+  &.markdown-body-generate > li:last-child:after,
+  &.markdown-body-generate > ol:last-child li:last-child:after,
+  &.markdown-body-generate > p:last-child:after,
+  &.markdown-body-generate > pre:last-child code:after,
+  &.markdown-body-generate > td:last-child:after,
+  &.markdown-body-generate > ul:last-child li:last-child:after {
+    animation: blink 1s steps(5, start) infinite;
+    color: #000;
+    content: '_';
+    font-weight: 700;
+    margin-left: 3px;
+    vertical-align: baseline;
+  }
+
+  @keyframes blink {
+    to {
+      visibility: hidden;
+    }
+  }
+}
+
+html.dark {
+  .markdown-body {
+    &.markdown-body-generate > dd:last-child:after,
+    &.markdown-body-generate > dl:last-child:after,
+    &.markdown-body-generate > dt:last-child:after,
+    &.markdown-body-generate > h1:last-child:after,
+    &.markdown-body-generate > h2:last-child:after,
+    &.markdown-body-generate > h3:last-child:after,
+    &.markdown-body-generate > h4:last-child:after,
+    &.markdown-body-generate > h5:last-child:after,
+    &.markdown-body-generate > h6:last-child:after,
+    &.markdown-body-generate > li:last-child:after,
+    &.markdown-body-generate > ol:last-child li:last-child:after,
+    &.markdown-body-generate > p:last-child:after,
+    &.markdown-body-generate > pre:last-child code:after,
+    &.markdown-body-generate > td:last-child:after,
+    &.markdown-body-generate > ul:last-child li:last-child:after {
+      color: #65a665;
+    }
+  }
+
+  .message-reply {
+    .whitespace-pre-wrap {
+      white-space: pre-wrap;
+      color: var(--n-text-color);
+    }
+  }
+
+  .highlight pre,
+  pre {
+    background-color: #282c34;
+  }
+}
+
+@media screen and (max-width: 533px) {
+  .markdown-body .code-block-wrapper {
+    padding: unset;
+
+    code {
+      padding: 24px 16px 16px 16px;
+    }
+  }
+}
diff --git a/src/views/super/airag/aiapp/components/AiApp.json b/src/views/super/airag/aiapp/components/AiApp.json
new file mode 100644
index 0000000..e5b3793
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiApp.json
@@ -0,0 +1,5 @@
+{
+  "prompt": "# 角色\n你是一个犀利的电影解说员，可以使用尖锐幽默的语言，向用户讲解电影剧情、介绍最新上映的电影，还可以用普通人都可以理解的语言讲解电影相关知识。\n\n## 技能\n### 技能 1: 推荐最新上映的电影\n1. 当用户请你推荐最新电影时，需要先了解用户喜欢哪种类型片。如果你已经知道了，请跳过这一步，在询问时可以用“请问您喜欢什么类型的电影呢亲”。\n2. 如果你并不知道用户所说的电影，可以使用 工具搜索电影，了解电影类型。\n3. 根据用户的电影偏好，推荐几部正在上映和即将上映的电影，在推荐开头可以说“好的亲，以下是为您推荐的电影”。\n===回复示例===\n   -  \uD83C\uDFAC 电影名: <电影名>\n   -  \uD83D\uDD50 上映时间: <电影在中国大陆的上映的日期>\n   -  \uD83D\uDCA1 电影简介: <100字总结这部电影的剧情摘要>\n===示例结束===\n\n### 技能 2: 介绍电影\n1. 当用户说介绍某一部电影，请使用工具 搜索电影介绍的链接，在收到需求时可以回应“好嘞亲，马上为您查找相关电影介绍”。\n2. 如果此时获取的信息不够全面，可以继续使用 工具 打开搜索结果中的相关链接，以了解电影详情。\n3. 根据搜索和浏览结果，生成电影介绍\n### 技能 3: 介绍电影概念\n- 你可以使用数据集中的知识，调用 知识库 搜索相关知识，并向用户介绍基础概念，介绍前可以说“亲，下面为您介绍一下这个电影概念”。\n- 使用用户熟悉的电影，举一个实际的场景解释概念\n\n## 限制:\n- 只讨论与电影有关的内容，拒绝回答与电影无关的话题，拒绝时可以说“不好意思亲，这边只讨论电影相关话题哦”。\n- 所输出的内容必须按照给定的格式进行组织，不能偏离框架要求，在表述中合理运用常用语。\n- 总结部分不能超过 100 字。\n- 只会输出知识库中已有内容, 不在知识库中的书籍, 通过 工具去了解。\n- 请使用 Markdown 的 ^^ 形式说明引用来源。”",
+  "prologue": "嘿，亲！我对电影那可是门儿清，能给你带来超棒的电影体验。",
+  "presetQuestion": [{"key": 1,"descr": "有啥好看的动作片推荐不？"},{"key": 2,"descr":"介绍下《流浪地球 3》呗。"},{"key": 3,"descr":"啥是电影蒙太奇呀？"}]
+}
\ No newline at end of file
diff --git a/src/views/super/airag/aiapp/components/AiAppAddFlowModal.vue b/src/views/super/airag/aiapp/components/AiAppAddFlowModal.vue
new file mode 100644
index 0000000..a514a14
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppAddFlowModal.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <div class="flex header">
+        <JInput
+          @pressEnter="loadFlowData"
+          class="header-search"
+          size="small"
+          v-model:value="searchText"
+          placeholder="请输入流程名称，回车搜索"
+        />
+      </div>
+      <a-row :span="24">
+        <a-col :span="12" v-for="item in flowList" @click="handleSelect(item)">
+          <!-- begin 流程选择支持单选和多选 -->
+          <a-card :style="getCardStyle(item)" hoverable class="checkbox-card" :body-style="{ width: '100%' }">
+            <div style="display: flex; width: 100%;align-items:center; justify-content: space-between">
+              <div style="display: flex; align-items:center; flex: 1; overflow: hidden; margin-right: 10px;">
+                <img :src="getImage(item.icon)" class="flow-icon"/>
+                <div style="display: grid;margin-left: 5px;align-items: center">
+                  <span class="checkbox-name ellipsis">{{ item.name }}</span>
+                  <div class="flex text-status" v-if="item.metadata && item.metadata.length>0">
+                    <span class="tag-input">输入</span>
+                    <div v-for="(metaItem, index) in item.metadata">
+                      <a-tag color="#f2f3f8" class="tags-meadata">
+                        <span v-if="index<3" class="tag-text">{{ metaItem.field }}</span>
+                      </a-tag>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <a-checkbox v-if="multiple" v-model:checked="item.checked" @click.stop @change="(e)=>handleChange(e,item)"></a-checkbox>
+              <!-- end 流程选择支持单选和多选 -->
+            </div>
+            <div class="text-desc mt-10">
+              {{ item.descr || '暂无描述' }}
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <div v-if="showFooterSelection" class="use-select">
+        <template v-if="!multiple">
+          已选择 <span class="ellipsis" style="max-width: 100px">{{flowData.name}}</span>
+        </template>
+        <template v-else>
+          已选择 {{ flowId.length }} 个流程
+        </template>
+        <span style="margin-left: 8px; color: #3d79fb; cursor: pointer" @click="handleClearClick">清空</span>
+      </div>
+      <Pagination
+        v-if="flowList.length > 0"
+        :current="pageNo"
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        :total="total"
+        :showQuickJumper="true"
+        :showSizeChanger="true"
+        @change="handlePageChange"
+        class="list-footer"
+        size="small"
+      />
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref, computed } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { Pagination } from 'ant-design-vue';
+  import {JInput} from "@/components/Form";
+  import { list } from '@/views/super/airag/aiknowledge/AiKnowledgeBase.api';
+  import knowledge from '/@/views/super/airag/aiknowledge/icon/knowledge.png';
+  import { cloneDeep } from 'lodash-es';
+  // import {pageApi} from "@/views/super/airag/aiflow/pages/api";
+  import { defHttp } from "@/utils/http/axios";
+  import { getFileAccessHttpUrl } from "@/utils/common/compUtils";
+  import defaultFlowImg from "@/assets/images/ai/aiflow.png";
+
+  export default {
+    name: 'AiAppAddFlowModal',
+    components: {
+      Pagination,
+      BasicModal,
+      JInput,
+    },
+    emits: ['success', 'register'],
+    props: {
+      multiple:{ type: Boolean, default: false },
+      // 排除的流程ID，多个逗号分隔
+      excludedIds: { type: String, default: '' },
+    },
+    setup(props, { emit }) {
+      const title = ref<string>('选择流程');
+      //应用类型
+      const flowId = ref<any>([]);
+      //流程数据
+      const flowList = ref<any>([]);
+      //选中的数据
+      const flowData = ref<any>({})
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //搜索文本
+      const searchText = ref<string>('');
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        //update-begin---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+        if (props.multiple) {
+          flowId.value = data.flowId ? (Array.isArray(data.flowId) ? cloneDeep(data.flowId) : data.flowId.split(',')) : [];
+          flowData.value = data.flowData ? cloneDeep(data.flowData) : [];
+        } else {
+          flowId.value = data.flowId ? cloneDeep(data.flowId) : '';
+          flowData.value = data.flowData ? cloneDeep(data.flowData) : {};
+        }
+        setModalProps({ minHeight: 500, bodyStyle: { padding: '10px', height: 'calc(100% - 20px)', overflowY: 'auto' } });
+        //update-end---author:wangshuai---date:2025-12-24---for:流程选择支持单选和多选---
+        loadFlowData();
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        emit('success',{ flowId: flowId.value, flowData: flowData.value });
+        handleCancel();
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      //复选框选中事件
+      const handleSelect = (item) => {
+        //update-begin---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+        if(!props.multiple) {
+          if (flowId.value === item.id) {
+            flowId.value = "";
+            flowData.value = null;
+            return;
+          }
+          flowId.value = item.id;
+          flowData.value = item;
+        } else {
+          item.checked = !item.checked;
+          updateMultipleSelection(item);
+        }
+        //update-end---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+      };
+
+      /**
+       * 加载AI流程
+       */
+      function loadFlowData() {
+        let params: Recordable = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          column: 'createTime',
+          order: 'desc',
+          name: searchText.value,
+          status: 'enable,release'
+        };
+
+        // 排除的流程ID，多个逗号分隔
+        if (props.excludedIds) {
+          params.excludedIds = props.excludedIds;
+        }
+
+        getAiFlowList(params).then((res) =>{
+          if(res){
+            for (const data of res.records) {
+              data.metadata = getMetadata(data.metadata);
+              //update-begin---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+              if (props.multiple && Array.isArray(flowId.value) && flowId.value.includes(data.id)) {
+                data.checked = true;
+              }
+              //update-end---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+            }
+            flowList.value = res.records;
+            total.value = res.total;
+          } else {
+            flowList.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      async function getAiFlowList(params?: any) {
+        return defHttp.get({url: '/airag/flow/list', params});
+      }
+      
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        loadFlowData();
+      }
+
+      /**
+       * 清空选中状态
+       */
+      function handleClearClick() {
+        //update-begin---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+        if (!props.multiple) {
+          flowId.value = "";
+          flowData.value = null;
+        } else {
+          flowId.value = [];
+          flowData.value = [];
+          if (flowList.value && Array.isArray(flowList.value)) {
+            flowList.value.forEach(item => item.checked = false);
+          }
+        }
+        //update-end---author:wangshuai---date:2025-12-24---for: 流程选择支持单选和多选 ---
+      }
+
+      /**
+       * 获取图标
+       */
+      function getImage(icon) {
+        return icon ? getFileAccessHttpUrl(icon) : defaultFlowImg;
+      }
+      
+      /**
+       * 获取输入输出参入
+       *
+       * @param metadata
+       */
+      function getMetadata(metadata) {
+        if (!metadata) {
+          return [];
+        }
+        let parse = JSON.parse(metadata);
+        let inputsArr = parse['inputs'];
+        return [...inputsArr];
+      }
+
+      /*===========begin 流程选择支持多选 ===========*/
+      function handleChange(e, item) {
+        updateMultipleSelection(item);
+      }
+
+      function updateMultipleSelection(item) {
+        if (item.checked) {
+          if (!flowId.value.includes(item.id)) {
+            flowId.value.push(item.id);
+            flowData.value.push(item);
+          }
+        } else {
+          const index = flowId.value.indexOf(item.id);
+          if (index > -1) {
+            flowId.value.splice(index, 1);
+            flowData.value.splice(index, 1);
+          }
+        }
+      }
+      
+      const showFooterSelection = computed(() => {
+        if (props.multiple) {
+          return flowId.value && flowId.value.length > 0;
+        }
+        return !!flowId.value;
+      });
+
+      function getCardStyle(item) {
+        if (props.multiple) {
+          return item.checked ? { border: '1px solid #3370ff' } : {};
+        }
+        return item.id === flowId.value ? { border: '1px solid #3370ff' } : {};
+      }
+      /*===========end 流程选择支持多选 ===========*/
+      
+      return {
+        registerModal,
+        title,
+        handleOk,
+        handleCancel,
+        flowList,
+        flowId,
+        handleSelect,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        knowledge,
+        searchText,
+        loadFlowData,
+        handleClearClick,
+        flowData,
+        getImage,
+        handleChange,
+        getCardStyle,
+        showFooterSelection,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .header {
+    color: #646a73;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .header-search {
+      width: 200px;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+  .list-footer {
+    position: absolute;
+    bottom: 0;
+    left: 210px;
+  }
+  .checkbox-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+  .checkbox-name {
+    font-size: 14px;
+    font-weight: bold;
+    color: #354052;
+    width: 100%;
+    overflow: hidden;
+    align-content: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: grid;
+  }
+  .use-select {
+    color: #646a73;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    display: flex;
+  }
+  .ellipsis {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .flow-icon{
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+  :deep(.ant-card .ant-card-body){
+    padding:16px !important;
+  }
+  .header-create-by{
+    font-size: 12px;
+    color: #646a73;
+  }
+  .text-desc {
+    width: 100%;
+    font-weight: 400;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+    font-size: 12px;
+    color: #676F83;
+  }
+  .mt-10{
+    margin-top: 10px;
+  }
+  .flex{
+    display: flex;
+  }
+  .text-status{
+    font-size: 12px;
+    color: #676F83;
+  }
+  .tag-text {
+    display: flow;
+    max-width: 48px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 20px;
+    font-size: 12px;
+    color: #3a3f4f;
+  }
+  .tag-input{
+    align-self: center;
+    color: #707a97;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin-right: 6px;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .tags-meadata{
+    padding-inline: 2px;
+    border-radius: 4px;
+    display: flex;
+    font-weight: 500;
+    max-width: 100%;
+  }
+
+  :deep(.jeecg-modal-wrapper){
+    height: calc(100% - 20px);
+  }
+
+  .scroll-container {
+    height: 480px;
+    overflow-y: auto;
+    padding-bottom: 20px;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppAddKnowledgeModal.vue b/src/views/super/airag/aiapp/components/AiAppAddKnowledgeModal.vue
new file mode 100644
index 0000000..9105a8a
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppAddKnowledgeModal.vue
@@ -0,0 +1,327 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <div class="flex header">
+        <a-input
+          @pressEnter="loadKnowledgeData"
+          class="header-search"
+          size="small"
+          v-model:value="searchText"
+          placeholder="请输入知识库名称，回车搜索"
+        ></a-input>
+      </div>
+      <a-row :span="24">
+        <a-col :span="12" v-for="item in appKnowledgeOption" @click="handleSelect(item)">
+          <a-card :style="getCardStyle(item)" hoverable class="checkbox-card" :body-style="{ width: '100%' }">
+            <div style="display: flex; width: 100%; justify-content: space-between">
+              <div>
+                <img class="checkbox-img" :src="knowledge" />
+                <span class="checkbox-name">{{ item.name }}</span>
+              </div>
+              <a-checkbox v-if="multiple" v-model:checked="item.checked" @click.stop class="quantum-checker" @change="(e)=>handleChange(e,item)"> </a-checkbox>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <div v-if="knowledgeIds && knowledgeIds.length > 0" class="use-select">
+        <template v-if="!multiple">
+          已选择 <span class="ellipsis" style="max-width: 150px">{{knowledgeData.name}}</span>
+        </template>
+        <template v-else>
+          已选择 {{ knowledgeIds.length }} 知识库
+        </template>
+        <span style="margin-left: 8px; color: #3d79fb; cursor: pointer" @click="handleClearClick">清空</span>
+      </div>
+      <Pagination
+        v-if="appKnowledgeOption.length > 0"
+        :current="pageNo"
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        :total="total"
+        :showQuickJumper="true"
+        :showSizeChanger="true"
+        @change="handlePageChange"
+        class="list-footer"
+        size="small"
+      />
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { Pagination } from 'ant-design-vue';
+  import { list } from '@/views/super/airag/aiknowledge/AiKnowledgeBase.api';
+  import knowledge from '/@/views/super/airag/aiknowledge/icon/knowledge.png';
+  import { cloneDeep } from 'lodash-es';
+
+  export default {
+    name: 'AiAppAddKnowledgeModal',
+    components: {
+      Pagination,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    props: {
+      multiple:{ type: Boolean, default: true },
+      type: { type: String, default: 'knowledge' }
+    },
+    setup(props, { emit }) {
+      const title = ref<string>('添加关联知识库');
+
+      //app知识库
+      const appKnowledgeOption = ref<any>([]);
+      //应用类型
+      const knowledgeIds = ref<any>([]);
+      //应用数据
+      const knowledgeData = ref<any>([]);
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //搜索文本
+      const searchText = ref<string>('');
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        //update-begin---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        if (props.multiple) {
+          knowledgeIds.value = data.knowledgeIds ? cloneDeep(data.knowledgeIds.split(',')) : [];
+          knowledgeData.value = data.knowledgeDataList ? cloneDeep(data.knowledgeDataList) : [];
+        } else {
+          knowledgeIds.value = data.knowledgeIds ? cloneDeep(data.knowledgeIds) : '';
+          knowledgeData.value = data.knowledgeData ? cloneDeep(data.knowledgeData) : {};
+        }
+        //update-end---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        setModalProps({ minHeight: 500, bodyStyle: { padding: '10px' } });
+        loadKnowledgeData();
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        console.log("知识库确定选中的值",knowledgeData.value);
+        //update-begin---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        if (props.multiple) {
+          emit('success', knowledgeIds.value, knowledgeData.value);
+        } else {
+          emit('success', knowledgeIds.value, knowledgeData.value);
+        }
+        //update-end---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        handleCancel();
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      //复选框选中事件
+      function handleSelect(item){
+        //update-begin---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        if(!props.multiple) {
+          if (knowledgeIds.value === item.id) {
+            knowledgeIds.value = "";
+            knowledgeData.value = null;
+            return;
+          }
+          knowledgeIds.value = item.id;
+          knowledgeData.value = item;
+        } else {
+          let id = item.id;
+          const target = appKnowledgeOption.value.find((item) => item.id === id);
+          if (target) {
+            target.checked = !target.checked;
+          }
+          //存放选中的知识库的id
+          if (!knowledgeIds.value || knowledgeIds.value.length == 0) {
+            knowledgeIds.value.push(id);
+            knowledgeData.value.push(item);
+            console.log("知识库勾选或取消勾选复选框的值",knowledgeData.value);
+            return;
+          }
+          let findIndex = knowledgeIds.value.findIndex((item) => item === id);
+          if (findIndex === -1) {
+            knowledgeIds.value.push(id);
+            knowledgeData.value.push(item);
+          } else {
+            knowledgeIds.value.splice(findIndex, 1);
+            knowledgeData.value.splice(findIndex, 1);
+          }
+          console.log("知识库勾选或取消勾选复选框的值",knowledgeData.value);
+        }
+        //update-end---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+      }
+
+      /**
+       * 加载知识库
+       */
+      function loadKnowledgeData() {
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          name: searchText.value,
+          type: props.type,
+        };
+        list(params).then((res) => {
+          if (res.success) {
+            if (props.multiple && knowledgeIds.value.length > 0) {
+              for (const item of res.result.records) {
+                if (knowledgeIds.value.includes(item.id)) {
+                  item.checked = true;
+                }
+              }
+              appKnowledgeOption.value = res.result.records;
+            } else {
+              appKnowledgeOption.value = res.result.records;
+            }
+            total.value = res.result.total;
+          } else {
+            appKnowledgeOption.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        loadKnowledgeData();
+      }
+
+      /**
+       * 清空选中状态
+       */
+      function handleClearClick() {
+        //update-begin---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+        if (!props.multiple) {
+          knowledgeIds.value = "";
+          knowledgeData.value = null;
+        } else {
+          knowledgeIds.value = [];
+          knowledgeData.value = [];
+          appKnowledgeOption.value.forEach((item) => {
+            item.checked = false;
+          });
+        }
+        //update-end---author:wangshuai---date:2025-12-25---for:知识库选择支持单选和多选---
+      }
+
+      /**
+       * 复选框选中事件
+       *
+       * @param e
+       * @param item
+       */
+      function handleChange(e, item) {
+        if (e.target.checked) {
+          knowledgeIds.value.push(item.id);
+          knowledgeData.value.push(item);
+        } else {
+          let findIndex = knowledgeIds.value.findIndex((val) => val === item.id);
+          if (findIndex != -1) {
+            knowledgeIds.value.splice(findIndex, 1);
+            knowledgeData.value.splice(findIndex, 1);
+          }
+        }
+      }
+
+      /**
+       * 获取卡片样式
+       * 
+       * @param item
+       */
+      function getCardStyle(item) {
+        if (props.multiple) {
+          return item.checked ? { border: '1px solid #3370ff' } : {};
+        }
+        return item.id === knowledgeIds.value ? { border: '1px solid #3370ff' } : {};
+      }
+
+      return {
+        registerModal,
+        title,
+        handleOk,
+        handleCancel,
+        appKnowledgeOption,
+        knowledgeIds,
+        handleSelect,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        knowledge,
+        searchText,
+        loadKnowledgeData,
+        handleClearClick,
+        handleChange,
+        getCardStyle,
+        knowledgeData,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .header {
+    color: #646a73;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .header-search {
+      width: 200px;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+  .list-footer {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+  }
+  .checkbox-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+  .checkbox-img {
+    width: 30px;
+    height: 30px;
+  }
+  .checkbox-name {
+    margin-left: 4px;
+  }
+  .use-select {
+    color: #646a73;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppAddMcpModal.vue b/src/views/super/airag/aiapp/components/AiAppAddMcpModal.vue
new file mode 100644
index 0000000..346bdb0
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppAddMcpModal.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <div class="flex header">
+        <a-input
+          @keyup.enter="loadMcpData"
+          class="header-search"
+          size="small"
+          v-model:value="searchText"
+          placeholder="请输入MCP名称，回车搜索"
+        ></a-input>
+      </div>
+      <a-row :span="24">
+        <a-col :span="12" v-for="item in mcpOption" :key="item.id" @click="handleSelect(item)">
+          <a-card :body-style="{padding: '10px 12px'}" hoverable :class="['mcp-card', { 'is-active': item.checked }]">
+            <div class="mcp-card-header">
+              <div class="mcp-card-left">
+                <img class="mcp-card-icon" :src="getIcon(item.icon)" />
+                <div class="mcp-card-info">
+                  <div class="mcp-card-name" :title="item.name">{{ item.name }}</div>
+                  <div class="mcp-card-meta">
+                    <div class="pill type-pill" :title="'类型: '+(item.category === 'plugin' ? '插件' : 'MCP')">
+                      <Icon :icon="getCategoryIcon(item.category)" class="pill-icon" />
+                      <span class="pill-text">{{ item.category === 'plugin' ? '插件' : 'MCP' }}</span>
+                    </div>
+                    <div class="pill tool-pill" :title="getToolCount(item.metadata)+' 个工具'">
+                      <Icon icon="ant-design:tool-outlined" class="pill-icon" />
+                      <span class="pill-text">{{ getToolCount(item.metadata) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <a-checkbox v-model:checked="item.checked" @click.stop class="mcp-card-checker" @change="(e)=>handleChange(e,item)"> </a-checkbox>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <div v-if="pluginIds.length > 0" class="use-select">
+        已选择 {{ pluginIds.length }} 个MCP
+        <span style="margin-left: 8px; color: #3d79fb; cursor: pointer" @click="handleClearClick">清空</span>
+      </div>
+      <Pagination
+        v-if="mcpOption.length > 0"
+        :current="pageNo"
+        :page-size="pageSize"
+        :page-size-options="pageSizeOptions"
+        :total="total"
+        :showQuickJumper="true"
+        :showSizeChanger="true"
+        @change="handlePageChange"
+        class="list-footer"
+        size="small"
+      />
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
+  import { Pagination } from 'ant-design-vue';
+  import { list as mcpList } from '@/views/super/airag/aimcp/AiragMcp.api';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import defaultLogo from '@/views/super/airag/aimcp/imgs/mcpLogo.png';
+  import { Icon } from '/@/components/Icon';
+
+  export default {
+    name: 'AiAppAddMcpModal',
+    components: {
+      Pagination,
+      BasicModal,
+      Icon,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const title = ref<string>('添加关联MCP');
+
+      const mcpOption = ref<any>([]);
+      const pluginIds = ref<any>([]); // 仅存放id
+      const pluginDataList = ref<any>([]); // 选中对象
+
+      const pageNo = ref<number>(1);
+      const pageSize = ref<number>(10);
+      const total = ref<number>(0);
+      const searchText = ref<string>('');
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        pluginIds.value = data.pluginIds ? [...data.pluginIds] : [];
+        pluginDataList.value = data.pluginDataList ? [...data.pluginDataList] : [];
+        setModalProps({ minHeight: 500, bodyStyle: { padding: '10px' } });
+        loadMcpData();
+      });
+
+      function getIcon(icon){
+        return icon ? getFileAccessHttpUrl(icon) : defaultLogo;
+      }
+
+      async function handleOk() {
+        // 拼接插件结构，使用item的category字段
+        const plugins = pluginDataList.value.map((item:any)=>({ 
+          pluginId: item.id, 
+          pluginName: item.name, 
+          category: item.category || 'mcp'
+        }));
+        emit('success', pluginIds.value, pluginDataList.value, plugins);
+        handleCancel();
+      }
+
+      function handleCancel() {
+        closeModal();
+      }
+
+      function handleSelect(item:any){
+        const id = item.id;
+        const target = mcpOption.value.find((it:any)=> it.id === id);
+        if(target){
+          target.checked = !target.checked;
+        }
+        if(!pluginIds.value || pluginIds.value.length===0){
+          pluginIds.value.push(id);
+          pluginDataList.value.push(item);
+          return;
+        }
+        const findIndex = pluginIds.value.findIndex((val:any)=> val === id);
+        if(findIndex === -1){
+          pluginIds.value.push(id);
+          pluginDataList.value.push(item);
+        }else{
+          pluginIds.value.splice(findIndex,1);
+          pluginDataList.value.splice(findIndex,1);
+        }
+      }
+
+      function loadMcpData(){
+        const params = { pageNo: pageNo.value, pageSize: pageSize.value, status: 'enable', synced: 1, name: searchText.value };
+        mcpList(params).then((res:any)=>{
+          if (res.records) {
+            const records = res.records || [];
+            if(pluginIds.value.length>0){
+              for(const rec of records){
+                if(pluginIds.value.includes(rec.id)){
+                  rec.checked = true;
+                }
+              }
+            }
+            mcpOption.value = records;
+            total.value = res.total;
+          }else{
+            mcpOption.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      function handlePageChange(page:number, current:number){
+        pageNo.value = page;
+        pageSize.value = current;
+        loadMcpData();
+      }
+
+      function handleClearClick(){
+        pluginIds.value = [];
+        pluginDataList.value = [];
+        mcpOption.value.forEach((item:any)=> item.checked = false);
+      }
+
+      function handleChange(e:any, item:any){
+        if(e.target.checked){
+          pluginIds.value.push(item.id);
+          pluginDataList.value.push(item);
+        }else{
+          const findIndex = pluginIds.value.findIndex((val:any)=> val === item.id);
+          if(findIndex>-1){
+            pluginIds.value.splice(findIndex,1);
+            pluginDataList.value.splice(findIndex,1);
+          }
+        }
+      }
+
+      // 工具数量：从 metadata 中读取 tool_count
+      function getToolCount(metadata: any): number {
+        if (!metadata) return 0;
+        let metaObj: any = metadata;
+        if (typeof metadata === 'string') {
+          try {
+            metaObj = JSON.parse(metadata);
+          } catch (e) {
+            return 0;
+          }
+        }
+        const count = metaObj.tool_count || metaObj.toolCount || 0;
+        return typeof count === 'number' ? count : parseInt(count, 10) || 0;
+      }
+
+      // 类型图标映射
+      function getTypeIcon(type?: string) {
+        switch (type) {
+          case 'sse':
+            return 'ant-design:thunderbolt-outlined';
+          case 'stdio':
+            return 'ant-design:code-outlined';
+          default:
+            return 'ant-design:appstore-outlined';
+        }
+      }
+
+      // category图标映射
+      function getCategoryIcon(category?: string) {
+        if (category === 'plugin') {
+          return 'ant-design:api-outlined';
+        }
+        return 'ant-design:tool-twotone';
+      }
+
+      return {
+        registerModal,
+        title,
+        handleOk,
+        handleCancel,
+        mcpOption,
+        pluginIds,
+        pluginDataList,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        searchText,
+        loadMcpData,
+        handleClearClick,
+        handleChange,
+        handleSelect,
+        getIcon,
+        getToolCount,
+        getTypeIcon,
+        getCategoryIcon,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .header {
+    color: #646a73;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .header-search {
+      width: 200px;
+    }
+  }
+  .mcp-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+    border: 1px solid #e5e6eb;
+    border-radius: 8px;
+    background: #fff;
+    transition: box-shadow 0.25s, border-color 0.25s;
+    cursor: pointer;
+    &.is-active {
+      border-color: #3370ff;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+    }
+    &:hover {
+      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+    }
+  }
+  .mcp-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .mcp-card-left {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+    flex: 1;
+  }
+  .mcp-card-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    object-fit: cover;
+    background: #f5f6f7;
+    flex-shrink: 0;
+  }
+  .mcp-card-info {
+    margin-left: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+  .mcp-card-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1d2129;
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 6px;
+  }
+  .mcp-card-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .mcp-card-checker {
+    margin-left: 12px;
+    flex-shrink: 0;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px 2px 6px;
+    border-radius: 12px;
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 500;
+    backdrop-filter: saturate(180%) blur(4px);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
+    .pill-icon { 
+      margin-right: 3px; 
+      font-size: 12px;
+    }
+  }
+  .type-pill { 
+    background: linear-gradient(135deg,#e6f4ff,#f0f9ff); 
+    color:#0958d9; 
+  }
+  .tool-pill { 
+    background: linear-gradient(135deg,#f5f6f7,#f0f1f2); 
+    color:#555; 
+  }
+  .use-select {
+    color: #646a73;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+  }
+  .list-footer {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppGeneratedPromptModal.vue b/src/views/super/airag/aiapp/components/AiAppGeneratedPromptModal.vue
new file mode 100644
index 0000000..09da4ca
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppGeneratedPromptModal.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="1000px" @ok="handleOk" @cancel="handleCancel" okText="替换" wrapClassName='ai-rag-generate-prompt-modal'>
+      <div class="prompt">
+        <div class="prompt-left">
+          <div class="prompt-left-title">提示词生成器</div>
+          <div class="prompt-left-desc">提示词生成器使用配置的模型来优化提示词，以获得更高的质量和更好的结构。请写出清晰详细的说明。</div>
+          <a-divider></a-divider>
+          <div class="prompt-left-try">
+            <div class="prompt-left-try-title">试一试</div>
+          </div>
+          <div class="instructions">
+            <div class="instructions-content" v-for="item in instructionsList" @click="instructionsClick(item.value)">
+              <Icon :icon="item.icon" size="14" color="#676f83"></Icon>
+              <div class="instructions-name">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="prompt-left-textarea">
+            <div class="command">
+              <span style="margin-right: 5px">指令</span>
+              <a-tooltip title="提示词库">
+                <span @click="openPromptApps" style="color:#1890ff;cursor: pointer">
+                  <Icon icon="ant-design:bulb-outlined" color="#1890ff"></Icon>词库选择
+                </span>
+              </a-tooltip>
+            </div>
+            <a-textarea v-model:value="prompt" :autoSize="{ minRows: 8, maxRows: 8 }"></a-textarea>
+          </div>
+          <a-button @click="generatedPrompt" class="prompt-left-btn" type="primary" :loading="loading">
+            <span style="align-items: center; display: flex" v-if="!loading">
+              <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"
+                ></path>
+              </svg>
+              <span style="margin-left: 4px">生成</span>
+            </span>
+          </a-button>
+        </div>
+        <div class="prompt-right">
+          <div v-if="!loading && !content">
+            <svg width="6em" height="6em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"
+              ></path>
+            </svg>
+            <div>在左侧描述您的用例，</div>
+            <div>编排预览将在此处显示。</div>
+          </div>
+          <div v-if="loading">
+            <a-spin :spinning="loading" tip="为您编排应用程序中…"></a-spin>
+          </div>
+          <div v-if="content">
+            <a-textarea v-model:value="content" :autoSize="{ minRows: 18, maxRows: 18 }"></a-textarea>
+          </div>
+        </div>
+      </div>
+    </BasicModal>
+  </div>
+  <!-- Ai提示词选择弹窗   -->
+  <AiAppPromptMarketModal @register="registerAiPromptSelectModal" @ok="handleAiAppPromptOk"></AiAppPromptMarketModal>
+</template>
+
+<script lang="ts">
+  import { ref, unref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import {useModal, useModalInner} from '@/components/Modal';
+  import { promptGenerate } from '@/views/super/airag/aiapp/AiApp.api';
+  import AiAppPromptMarketModal from "@/views/super/airag/aiapp/components/AiAppPromptMarketModal.vue";
+
+  export default {
+    name: 'AiAppGeneratedPrompt',
+    components: {
+      AiAppPromptMarketModal,
+      BasicModal,
+    },
+    emits: ['ok', 'register'],
+    setup(props, { emit }) {
+      //提示词
+      const prompt = ref<string>('');
+      //加载
+      const loading = ref<boolean>(false);
+      //显示文本
+      const content = ref<string>('');
+      //指令提示词
+      const instructionsList = ref<any>([
+        { name: 'python代码助手', value: 'python', icon: 'ant-design:code-outlined' },
+        { name: '翻译器', value: 'translator', icon: 'ant-design:translation-outlined' },
+        { name: '会议助手', value: 'meeting', icon: 'ant-design:team-outlined' },
+        { name: '润色文章', value: 'article', icon: 'ant-design:profile-outlined' },
+        { name: 'sql生成器', value: 'sql', icon: 'ant-design:console-sql-outlined' },
+        { name: '旅行规划师', value: 'travel', icon: 'ant-design:car-outlined' },
+        { name: 'linux专家', value: 'linux', icon: 'ant-design:fund-projection-screen-outlined' },
+        { name: '内容提炼器', value: 'content', icon: 'ant-design:read-outlined' },
+      ]);
+      //指令
+      const tip = ref<any>({
+        python: '你是一个python专家，可以帮助用户编写和纠错代码。',
+        translator: '一个可以将多种语言翻译为中文的翻译器。',
+        meeting: '将会议内容提炼总结，包括讨论主题、关键要点和待办事项。',
+        article: '用高超的编辑技巧改进我的文章。',
+        sql: '根据用户的描述，生成sql语句，要支持引导用户提供表结构',
+        travel: '你是一个旅行规划师，擅长帮助用户轻松规划他们的旅行',
+        linux: '你是一个linux专家，擅长解决各种linux相关的问题。',
+        content: '你是一个阅读理解大师，可以阅读用户提供的文章，并提炼主要内容输出给用户。',
+      });
+      //注册提示词modal
+      const [registerAiPromptSelectModal, { openModal: aiPromptSelectModalOpen }] = useModal();
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        content.value = '';
+        loading.value = false;
+        prompt.value = '';
+        setModalProps({ height: 500 });
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        emit('ok', content.value);
+        handleCancel();
+      }
+
+      //update-begin---author:wangshuai---date:2025-04-01---for:【QQYUN-11796】【AI】提示词生成器，改成异步---
+      /**
+       * 生成
+       */
+      async function generatedPrompt() {
+        content.value = '';
+        loading.value = true;
+        let readableStream = await promptGenerate({ prompt: encodeURIComponent(prompt.value) }).catch(() => {
+            loading.value = false;
+        });
+        const reader = readableStream.getReader();
+        const decoder = new TextDecoder('UTF-8');
+        let buffer = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+          let result = decoder.decode(value, { stream: true });
+          const lines = result.split('\n\n');
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+                const content = line.replace('data:', '').trim();
+                if(!content){
+                  continue;
+                }
+                if(!content.endsWith('}')){
+                  buffer = buffer + line;
+                  continue;
+                }
+                buffer = "";
+                renderText(content)
+              } else {
+                if(!line) {
+                  continue;
+                }
+                if(!line.endsWith('}')) {
+                  buffer = buffer + line;
+                  continue;
+                }
+                buffer = "";
+                renderText(line)
+              }
+            }
+          }
+      }
+
+      /**
+       * 渲染文本
+       * 
+       * @param item
+       */
+      function renderText(item) {
+        try {
+          let parse = JSON.parse(item);
+          if (parse.event == 'MESSAGE') {
+            content.value += parse.data.message;
+            if(loading.value){
+              loading.value = false;
+            }
+          }
+          if (parse.event == 'MESSAGE_END') {
+            loading.value = false;
+          }
+          if (parse.event == 'ERROR') {
+            content.value = parse.data.message?parse.data.message:'生成失败，请稍后重试！'
+            loading.value = false;
+          }
+        } catch (error) {
+          console.log('Error parsing update:', error);
+        }
+      }
+      //update-end---author:wangshuai---date:2025-04-01---for:【QQYUN-11796】【AI】提示词生成器，改成异步---
+
+      /**
+       * 指令点击事件
+       */
+      function instructionsClick(value) {
+        prompt.value = tip.value[value];
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      /**
+       * 打开提示词库弹窗
+       */
+      function openPromptApps() {
+        aiPromptSelectModalOpen(true,{});
+      }
+      /**
+       * 提示词回调
+       *
+       * @param value
+       */
+      function handleAiAppPromptOk(value) {
+        content.value = value;
+      }
+      return {
+        registerModal,
+        handleOk,
+        handleCancel,
+        prompt,
+        generatedPrompt,
+        instructionsList,
+        loading,
+        instructionsClick,
+        content,
+        openPromptApps,
+        registerAiPromptSelectModal,
+        handleAiAppPromptOk,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .prompt {
+    width: 100%;
+    display: flex;
+  }
+  .prompt-left {
+    width: 50%;
+    padding: 20px;
+    border-right: 1px solid #10182814;
+    .prompt-left-title {
+      background: linear-gradient(92deg, #2250f2 -29.55%, #0ebcf3 75.22%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      line-height: 28px;
+      font-weight: 700;
+      font-size: 18px;
+    }
+    .prompt-left-desc {
+      color: #676f83;
+      font-weight: 400;
+      font-size: 13px;
+      margin-top: 4px;
+    }
+    .prompt-left-try {
+      display: flex;
+      align-items: center;
+      .prompt-left-try-title {
+        color: #676f83;
+        line-height: 18px;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 12px;
+        margin-right: 10px;
+      }
+    }
+    .prompt-left-textarea {
+      margin-top: 25px;
+      .command {
+        display: flex;
+        align-items: center;
+        color: #101828;
+        line-height: 15px;
+        font-weight: 500;
+        font-size: 12px;
+        margin-bottom: 15px;
+      }
+    }
+    .prompt-left-btn {
+      width: 80px;
+      margin-top: 10px;
+      float: right;
+    }
+  }
+  .prompt-right {
+    padding: 20px;
+    width: 50%;
+    text-align: center;
+    align-content: center;
+    svg {
+      color: #676f83;
+    }
+  }
+  .instructions {
+    display: flex;
+    flex-wrap: wrap;
+    .instructions-content {
+      padding-left: 5px;
+      padding-right: 5px;
+      border-radius: 5px;
+      align-items: center;
+      cursor: pointer;
+      height: 20px;
+      display: flex;
+      margin-top: 8px;
+      margin-left: 5px;
+    }
+    .instructions-name {
+      color: #354052;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 2px;
+      margin-left: 4px;
+    }
+  }
+  :deep(.ant-divider-horizontal) {
+    margin: 12px 0;
+  }
+</style>
+<style lang="less">
+  .ai-rag-generate-prompt-modal {
+    .jeecg-modal-content > .scroll-container {
+      padding: 0;
+
+      & > .scrollbar__wrap {
+        overflow: hidden;
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppModal.vue b/src/views/super/airag/aiapp/components/AiAppModal.vue
new file mode 100644
index 0000000..d4bc2a9
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppModal.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="800px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <template #title>
+         <span style="display: flex">
+          {{title}}
+          <a-tooltip title="AI应用文档">
+            <a style="color: unset" href="https://help.jeecg.com/aigc/guide/app" target="_blank">
+              <Icon style="position:relative;left:2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+            </a>
+          </a-tooltip>
+        </span>
+      </template>
+      <BasicForm @register="registerForm">
+        <template #typeSlot="{ model, field }">
+          <a-radio-group v-model:value="model[field]" style="display: flex">
+            <a-card
+              v-for="item in appTypeOption"
+              style="margin-right: 10px; cursor: pointer; width: 100%"
+              @click="model[field] = item.value"
+              :style="model[field] === item.value ? { borderColor: '#3370ff' } : {}"
+            >
+              <a-radio :value="item.value">
+                <div class="type-title">{{ item.title }}</div>
+                <div class="type-desc">{{ item.desc }}</div>
+              </a-radio>
+            </a-card>
+          </a-radio-group>
+        </template>
+      </BasicForm>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref, computed } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { formSchema } from '../AiApp.data';
+  import { initDictOptions } from '@/utils/dict';
+  import { saveApp } from '@/views/super/airag/aiapp/AiApp.api';
+
+  export default {
+    name: 'AiAppModal',
+    components: {
+      BasicForm,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      //保存或修改
+      const isUpdate = ref<boolean>(false);
+
+      const title = computed<string>(() => isUpdate.value ? '修改应用' : '创建应用');
+
+      //app类型
+      const appTypeOption = ref<any>([]);
+
+      //表单配置
+      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        layout: 'vertical',
+        wrapperCol: { span: 24 },
+      });
+
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        await resetFields();
+        //update-begin---author:wangshuai---date:2025-03-11---for: 【QQYUN-11324】8.修改弹窗head---
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          //表单赋值
+          await setFieldsValue({
+            ...data.record,
+          });
+        } else {
+          await setFieldsValue({
+            type: 'chatSimple',
+          })
+        }
+        //update-end---author:wangshuai---date:2025-03-11---for:【QQYUN-11324】8.修改弹窗head---
+        setModalProps({ minHeight: 500, bodyStyle: { padding: '10px' } });
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        try {
+          let values = await validate();
+          setModalProps({ confirmLoading: true });
+          let result = await saveApp(values);
+          if (result) {
+            //关闭弹窗
+            closeModal();
+            //update-begin---author:wangshuai---date:2025-03-11---for: 【QQYUN-11324】8.修改弹窗head---
+            if(isUpdate.value){
+              //刷新列表
+              emit('success', values);
+            }else{
+              //刷新列表
+              emit('success', result);
+            }
+            //update-end---author:wangshuai---date:2025-03-11---for: 【QQYUN-11324】8.修改弹窗head---
+          }
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      //初始化AI应用类型
+      initAppTypeOption();
+
+      function initAppTypeOption() {
+        initDictOptions('ai_app_type').then((data) => {
+          if (data && data.length > 0) {
+            for (const datum of data) {
+              if (datum.value === 'chatSimple') {
+                datum['desc'] = '适合新手创建小助手';
+              } else if (datum.value === 'chatFLow') {
+                datum['desc'] = '适合高级用户自定义小助手的工作流';
+              }
+            }
+          }
+          appTypeOption.value = data;
+        });
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      return {
+        registerModal,
+        registerForm,
+        title,
+        handleOk,
+        handleCancel,
+        appTypeOption,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppParamsSettingModal.vue b/src/views/super/airag/aiapp/components/AiAppParamsSettingModal.vue
new file mode 100644
index 0000000..6a0bd1d
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppParamsSettingModal.vue
@@ -0,0 +1,101 @@
+<!--手动录入text-->
+<template>
+  <BasicModal title="参数设置" destroyOnClose @register="registerModal" :canFullscreen="false" width="560px" @ok="handleOk" @cancel="handleCancel">
+    <AiModelSeniorForm ref="aiModelSeniorFormRef" :type="type"></AiModelSeniorForm>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import BasicModal from '@/components/Modal/src/BasicModal.vue';
+import { useModalInner } from '@/components/Modal';
+
+import BasicForm from '@/components/Form/src/BasicForm.vue';
+import { MarkdownViewer } from '@/components/Markdown';
+import AiModelSeniorForm from '/@/views/super/airag/aimodel/components/AiModelSeniorForm.vue';
+
+export default {
+  name: 'AiAppParamsSettingModal',
+  components: {
+    MarkdownViewer,
+    BasicForm,
+    BasicModal,
+    AiModelSeniorForm,
+  },
+  emits: ['ok', 'register'],
+  setup(props, { emit }) {
+    let aiModelSeniorFormRef = ref()
+    //类型
+    const type = ref<string>('');
+    //注册modal
+    const [registerModal, { closeModal }] = useModalInner(async (data) => {
+      type.value = data.type;
+      if(data.type === 'model'){
+        if(!data.metadata.hasOwnProperty("temperature") ){
+          data.metadata['temperature'] = 0.7;
+        }
+        if(!data.metadata.hasOwnProperty("timeout") ){
+          data.metadata['timeout'] = 60;
+        }
+      }else{
+        if(!data.metadata.hasOwnProperty("topNumber") ){
+          data.metadata['topNumber'] = 4;
+        } 
+        if(!data.metadata.hasOwnProperty("similarity") ){
+          data.metadata['similarity'] = 0.76;
+        }
+        if(!data.metadata.hasOwnProperty("timeout") ){
+          data.metadata['timeout'] = 60;
+        }
+      }
+      setTimeout(()=>{
+        aiModelSeniorFormRef.value.setModalParams(data.metadata);
+      })
+    });
+
+    /**
+     * 弹窗点击事件
+     */
+    function handleOk() {
+      let emitChange = aiModelSeniorFormRef.value.emitChange();
+      emit('ok',emitChange);
+      handleCancel();
+    }
+
+    /**
+     * 弹窗关闭事件
+     */
+    function handleCancel() {
+      closeModal();
+    }
+    
+    return {
+      registerModal,
+      handleOk,
+      handleCancel,
+      type,
+      aiModelSeniorFormRef,
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.pointer {
+  cursor: pointer;
+}
+.header {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+.content {
+  margin-top: 20px;
+  max-height: 600px;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+.title-tag {
+  color: #477dee;
+}
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppPromptMarketModal.vue b/src/views/super/airag/aiapp/components/AiAppPromptMarketModal.vue
new file mode 100644
index 0000000..d3255c8
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppPromptMarketModal.vue
@@ -0,0 +1,367 @@
+<template>
+  <BasicModal
+    destroyOnClose
+    @register="registerModal"
+    :canFullscreen="false"
+    width="1000px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="使用"
+    wrapClassName="ai-rag-generate-prompt-modal"
+    :confirmLoading="loading"
+  >
+    <div class="prompt-market-content">
+      <!-- 搜索区域 -->
+      <div class="search-section">
+        <a-input-search
+          v-model:value="searchText"
+          placeholder="搜索提示词名称或描述"
+          style="width: 300px"
+          @search="handleSearch"
+          @pressEnter="handleSearch"
+        />
+      </div>
+
+      <!-- 提示词列表 -->
+      <div class="prompt-list-section">
+        <a-spin :spinning="loading">
+          <template v-if="promptList.length > 0">
+            <a-row :gutter="[24, 24]">
+              <a-col v-for="item in promptList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="8">
+                <div class="prompt-card" @click="handleSelectPrompt(item)">
+                  <a-card :class="['prompt-item-card', { selected: selectedPrompt?.id === item.id }]" :hoverable="true" size="small">
+                    <template #title>
+                      <div class="card-title">
+                        <span class="title-text">{{ item.name }}</span>
+                      </div>
+                    </template>
+                    <div class="card-content">
+                      <p class="description" :title="item.description || item.desc">{{ item.description || item.desc }}</p>
+                      <div class="card-footer" >
+                        <span class="create-time">
+                          {{ formatTime(item.createTime) }}
+                        </span>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+            </a-row>
+          </template>
+
+          <!-- 空状态 -->
+          <empty v-else description="暂无提示词数据" class="empty-state" />
+        </a-spin>
+      </div>
+
+      <!-- 分页区域 -->
+      <div class="pagination-section">
+        <Pagination
+          v-model:current="pagination.current"
+          v-model:pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :show-size-changer="true"
+          :page-size-options="['10', '20', '30', '50']"
+          :show-quick-jumper="true"
+          @change="handlePageChange"
+          @showSizeChange="handleSizeChange"
+        />
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive } from 'vue';
+  import { Empty } from 'ant-design-vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
+  import { list } from '@/views/super/airag/aiprompts/AiragPrompts.api';
+  import { formatToDateTime } from '@/utils/dateUtil';
+  import { Pagination } from 'ant-design-vue';
+  export default {
+    name: 'AiAppPromptMarketModal',
+    components: {
+      BasicModal,
+      Pagination,
+      Empty,
+    },
+    emits: ['ok', 'register', 'select'],
+    setup(props, { emit }) {
+      // 提示词列表
+      const promptList = ref<any[]>([]);
+      // 加载状态
+      const loading = ref<boolean>(false);
+      // 搜索文本
+      const searchText = ref<string>('');
+      // 选中的提示词
+      const selectedPrompt = ref<any>(null);
+
+      // 分页配置
+      const pagination = reactive({
+        current: 1,
+        pageSize: 12,
+        total: 0,
+      });
+
+      // 注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {
+        loading.value = false;
+        resetField();
+        await getPromptList();
+        setModalProps({
+          title: '选择提示词',
+          height: 600,
+          bodyStyle: { padding: '24px' },
+        });
+      });
+
+      /**
+       *
+       */
+      function resetField() {
+        promptList.value = [];
+        selectedPrompt.value = null;
+        searchText.value = '';
+        pagination.current = 1;
+      }
+
+      /**
+       * 获取提示词列表
+       */
+      async function getPromptList() {
+        loading.value = true;
+        try {
+          const params = {
+            pageNo: pagination.current,
+            pageSize: pagination.pageSize,
+            name: searchText.value ? `*${searchText.value}*` : '',
+          };
+
+          const res = await list(params);
+          console.log('获取提示词列表成功:', res);
+          if (res?.records) {
+            promptList.value = res?.records || [];
+            pagination.total = res?.total || 0;
+          } else {
+            promptList.value = [];
+            pagination.total = 0;
+          }
+        } catch (error) {
+          console.error('获取提示词列表失败:', error);
+          promptList.value = [];
+          pagination.total = 0;
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      /**
+       * 处理搜索
+       */
+      function handleSearch() {
+        pagination.current = 1;
+        getPromptList();
+      }
+
+      /**
+       * 处理页码变化
+       */
+      function handlePageChange(page: number, pageSize: number) {
+        pagination.current = page;
+        pagination.pageSize = pageSize;
+        getPromptList();
+      }
+
+      /**
+       * 处理页面大小变化
+       */
+      function handleSizeChange(current: number, size: number) {
+        pagination.current = current;
+        pagination.pageSize = size;
+        getPromptList();
+      }
+
+      /**
+       * 选择提示词
+       */
+      function handleSelectPrompt(item: any) {
+        selectedPrompt.value = item;
+      }
+      /**
+       * 格式化时间
+       */
+      function formatTime(time) {
+        console.log('formatTime:', formatToDateTime(time));
+        return formatToDateTime(time);
+      }
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        if (selectedPrompt.value) {
+          // select 传递完整对象，供调用方按需取用 id/name/content
+          emit('select', selectedPrompt.value);
+          emit('ok', selectedPrompt.value.content);
+        } else {
+          emit('ok');
+        }
+        handleCancel();
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      return {
+        registerModal,
+        handleOk,
+        handleCancel,
+        promptList,
+        loading,
+        searchText,
+        selectedPrompt,
+        pagination,
+        handleSearch,
+        handlePageChange,
+        handleSizeChange,
+        handleSelectPrompt,
+        formatTime,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+.prompt-market-content {
+  min-height: 400px;
+  padding: 16px;
+
+  .search-section {
+    margin-bottom: 24px;
+    display: flex;
+    justify-content: flex-start;
+
+    .ant-input-search {
+      max-width: 400px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      border-radius: 6px;
+    }
+  }
+
+  .prompt-list-section {
+    .prompt-card {
+      transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease;
+
+      &:hover {
+        transform: translateY(-4px);
+      }
+
+      .prompt-item-card {
+        border-radius: 8px;
+        overflow: hidden;
+        height: 150px; // 增加卡片高度
+        transition: all 0.3s ease;
+        border: 1px solid #e8e8e8;
+
+        .ant-card-head {
+          border-bottom: 1px solid #f0f0f0;
+          padding: 12px 16px;
+        }
+
+        .ant-card-body {
+          padding: 12px 16px;
+          height: calc(100% - 48px); // 调整内容区域高度
+          display: flex;
+          flex-direction: column;
+        }
+
+        &.selected {
+          border-color: #1890ff;
+          background-color: #e6f7ff; // 添加选中背景色
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+
+          .card-title .title-text {
+            color: #1890ff;
+          }
+        }
+
+        .card-title {
+          display: flex;
+          align-items: center;
+
+          .title-text {
+            font-weight: 600;
+            font-size: 16px;
+            color: #333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .card-content {
+          flex: 1; // 使用flex让内容区域自适应
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between; // 让内容和时间信息在垂直方向上分布
+
+          .description {
+            color: #666;
+            font-size: 13px;
+            line-height: 1.5;
+            margin: 8px 0;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            flex: 1; // 让描述区域自适应
+          }
+
+          .card-footer {
+            margin-top: 8px; // 调整间距
+            padding-top: 8px;
+            border-top: 1px solid #f5f5f5;
+            display: flex;
+            justify-content: flex-end;
+
+            .create-time {
+              font-size: 12px;
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination-section {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .empty-state {
+    margin-top: 40px;
+  }
+}
+
+// 模态框整体样式
+.ai-rag-generate-prompt-modal {
+  .ant-modal-body {
+    padding: 0 !important;
+  }
+
+  .ant-modal-header {
+    border-radius: 8px 8px 0 0;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppQuickCommandModal.vue b/src/views/super/airag/aiapp/components/AiAppQuickCommandModal.vue
new file mode 100644
index 0000000..e48338f
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppQuickCommandModal.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="800px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <BasicForm @register="registerForm"></BasicForm>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, unref } from 'vue';
+import BasicModal from '@/components/Modal/src/BasicModal.vue';
+import { useModalInner } from '@/components/Modal';
+
+import BasicForm from '@/components/Form/src/BasicForm.vue';
+import { useForm } from '@/components/Form';
+import { quickCommandFormSchema} from '../AiApp.data';
+
+export default {
+  name: 'AiAppQuickCommandModal',
+  components: {
+    BasicForm,
+    BasicModal,
+  },
+  emits: ['ok', 'update-ok', 'register'],
+  setup(props, { emit }) {
+    const title = ref<string>('添加指令');
+
+    //保存或修改
+    const isUpdate = ref<boolean>(false);
+
+    //表单配置
+    const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
+      schemas: quickCommandFormSchema,
+      showActionButtonGroup: false,
+      layout: 'vertical',
+      wrapperCol: { span: 24 },
+    });
+
+    //注册modal
+    const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+      await resetFields();
+      isUpdate.value = !!data?.isUpdate;
+      if (unref(isUpdate)) {
+        //表单赋值
+        await setFieldsValue({
+          ...data.record,
+        });
+      }
+      setModalProps({ minHeight: 200, bodyStyle: { padding: '10px' } });
+    });
+
+    /**
+     * 保存
+     */
+    async function handleOk() {
+      try {
+        let values = await validate();
+        setModalProps({ confirmLoading: true });
+        if(isUpdate.value){
+          emit('update-ok',values);
+        }else{
+          emit('ok', values);
+        }
+        handleCancel();
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+
+    /**
+     * 取消
+     */
+    function handleCancel() {
+      closeModal();
+    }
+
+    return {
+      registerModal,
+      registerForm,
+      title,
+      handleOk,
+      handleCancel
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.pointer {
+  cursor: pointer;
+}
+.type-title {
+  color: #1d2025;
+  margin-bottom: 4px;
+}
+.type-desc {
+  color: #8f959e;
+  font-weight: 400;
+}
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppSendModal.vue b/src/views/super/airag/aiapp/components/AiAppSendModal.vue
new file mode 100644
index 0000000..a16a248
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppSendModal.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" :width="width" :title="title" :footer="null">
+      <!--  嵌入表单    -->
+      <div v-if="type === 'menu'">
+        <a-form layout="vertical" :model="appData">
+          <a-form-item label="菜单名称">
+            <a-input v-model:value="appData.name" readonly/>
+          </a-form-item>  
+          <a-form-item label="菜单地址">
+            <a-input v-model:value="appData.menu" readonly/>
+          </a-form-item>
+          <a-form-item style="text-align:right">
+            <a-button @click.prevent="copyMenu">复制菜单</a-button>
+            <a-button  type="primary" style="margin-left: 10px" @click="copySql">复制SQL</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+      <!--   嵌入网站   -->
+      <div v-else-if="type === 'web'" class="web">
+    
+        <div style="display: flex;margin: 0 auto">
+          <div :class="activeKey===1?'active':''" class="web-img" @click="handleImageClick(1)">
+            <img  src="../img/webEmbedded.png" />
+          </div>
+          <div style="margin-left: 10px" :class="activeKey===2?'active':''" class="web-img" @click="handleImageClick(2)">
+            <img  src="../img/iconWebEmbedded.png" />
+          </div>
+        </div>    
+        <div class="web-title" v-if="activeKey === 1">
+          将以下 iframe 嵌入到你的网站中的目标位置
+        </div>  
+        <div class="web-title" v-else>
+          将以下 script 添加到网页的body区域中
+        </div>
+        <div class="web-code" v-if="activeKey === 1">
+          <div class="web-code-title">
+            <div class="web-code-desc">
+              html
+            </div>
+            <Icon class="pointer" icon="ant-design:copy-outlined" @click="copyIframe(1)"></Icon>
+          </div>
+          <div class="web-code-iframe">
+              <pre> {{getIframeText(1)}} </pre>
+          </div>
+        </div>
+        
+        <div class="web-code" v-if="activeKey === 2">
+          <div class="web-code-title">
+            <div class="web-code-desc">
+              html
+            </div>
+            <Icon class="pointer" icon="ant-design:copy-outlined" @click="copyIframe(2)"></Icon>
+          </div>
+          <div class="web-code-iframe">
+            <pre> {{getIframeText(2)}} </pre>
+          </div>
+        </div>
+      </div>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { buildUUID } from '@/utils/uuid';
+  import { copyTextToClipboard } from '@/hooks/web/useCopyToClipboard';
+  import { isDevMode } from '/@/utils/env';
+
+  export default {
+    name: 'AiAppSendModal',
+    components: {
+      BasicForm,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      //标题
+      const title = ref<string>('嵌入网站');
+      const $message = useMessage();
+      //类型
+      const type = ref<string>('web');
+      //应用信息
+      const appData = ref<any>({});
+      //弹窗宽度
+      const width = ref<string>("800px");
+      //选中的key
+      const activeKey = ref<number>(1);
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        type.value = data.type;
+        appData.value = data.data;
+        appData.value.menu = "/ai/chat/"+ data.data.id
+        activeKey.value = 1;
+        let minHeight = 220;
+        if(data.type === 'web'){
+          title.value = '嵌入网站';
+          width.value = '640px';
+          minHeight = 500
+        }else{
+          title.value = '配置菜单';
+          width.value = '500px';
+        }
+        setModalProps({ height: minHeight, bodyStyle: { padding: '10px' } });
+      });
+
+      /**
+       * 复制菜单
+       */
+      function copyMenu() {
+        copyText(appData.value.menu);
+      }
+      
+      /**
+       * 复制sql
+       */
+      function copySql() {
+        const insertMenuSql = `INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external)
+                               VALUES ('${buildUUID()}', NULL, '${appData.value.name}', '${appData.value.menu}', '1', NULL, NULL, 0, NULL, '1', 0.00, 0, NULL, 0, 1, 0, 0, 0, NULL, '1', 0, 0, 'admin', null, NULL, NULL, 0)`;
+        copyText(insertMenuSql);
+      }
+
+      /**
+       * 获取当前文本
+       */
+      function getIframeText(value) {
+        let locationUrl = document.location.protocol +"//" + window.location.host;
+        //update-begin---author:wangshuai---date:2025-03-20---for:【QQYUN-11649】【AI】应用嵌入，支持一个小图标点击出聊天---
+        if(value === 1){
+          return '<iframe\n' +
+              '   src="'+locationUrl+'/ai/app/chat/'+appData.value.id+'"\n' +
+              '   style="width: 100%; height: 100%;">\n' +
+              '</iframe>';
+        }else{
+            //update-begin---author:wangshuai---date:2025-03-28---for:【QQYUN-11649】应用嵌入，支持一个小图标点击出聊天---
+            let path = "/src/views/super/airag/aiapp/chat/js/chat.js"
+            if(!isDevMode()){
+              path = "/chat/chat.js";
+            }
+            let text ='<script src=' + locationUrl + path +' id="e7e007dd52f67fe36365eff636bbffbd">'+'<'+'/script>';
+            text += '\n <'+'script>\n';
+            text += '    createAiChat({\n' +
+                    '       appId:"'+ appData.value.id +'",\n';
+            text += '       // 支持top-left左上, top-right右上, bottom-left左下, bottom-right右下\n';
+            text += '       iconPosition:"bottom-right"\n';
+            text += '    })\n';
+            text += ' <'+'/script>';
+            return text;
+            //update-end---author:wangshuai---date:2025-03-28---for:【QQYUN-11649】应用嵌入，支持一个小图标点击出聊天---
+        }
+        //update-end---author:wangshuai---date:2025-03-20---for:【QQYUN-11649】【AI】应用嵌入，支持一个小图标点击出聊天---
+      }
+
+      /**
+       * 复制iframe
+       */
+      function copyIframe(value) {
+        copyText(getIframeText(value));
+      }
+
+      // 复制文本到剪贴板
+      function copyText(text: string) {
+        const success = copyTextToClipboard(text);
+        if (success) {
+          $message.createMessage.success('复制成功！');
+        } else {
+          $message.createMessage.error('复制失败！');
+        }
+        return success;
+      }
+
+      /**
+       * 图片点击事件
+       * 
+       * @param value
+       */
+      function handleImageClick(value) {
+        activeKey.value = value;
+      }
+      
+      return {
+        registerModal,
+        title,
+        type,
+        appData,
+        copySql,
+        copyMenu,
+        width,
+        copyIframe,
+        getIframeText,
+        activeKey,
+        handleImageClick,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+  
+  .web{
+   padding: 0 10px;
+  }
+  .web-title{
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 16px;
+  }
+  .web-img{
+    border-width: 1.5px;
+    width: 240px;
+    margin-top: 20px;
+    border-radius: 6px;
+    img{
+      border-radius: 6px;
+      width: 240px;
+      height: 150px;
+    }
+    margin-bottom: 10px;
+  }
+  .active{
+    border-color: rgb(41 112 255);
+  }
+  .web-code{
+    border-width: 1.5px;
+    margin-top: 20px;
+    background-color: #f9fafb;
+    border-color: #10182814;
+    width: 100%;
+    border-radius: 5px;
+    .web-code-title{
+      width: 100%;
+      padding:10px;
+      background-color: #f2f4f7;
+      display: inline-flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .web-code-desc{
+      color: #354052;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 16px;
+    }
+    .web-code-iframe{
+      padding: 15px;
+      line-height: 1.5;
+      font-size: 13px;
+      display: grid;
+      gap: 4px;
+      color: #354052;
+    }
+  }
+  .pointer{
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiAppSettingModal.vue b/src/views/super/airag/aiapp/components/AiAppSettingModal.vue
new file mode 100644
index 0000000..ff5d860
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiAppSettingModal.vue
@@ -0,0 +1,2021 @@
+<template>
+  <div class="p-2">
+    <BasicModal wrapClassName="ai-app-edit-modal" destroyOnClose @register="registerModal" :canFullscreen="false" defaultFullscreen width="800px" :footer="null" @visible-change="visibleChange">
+      <template #title>
+        <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
+          <div style="display: flex">
+            <img :src="getImage()" class="header-img"/>
+            <div class="header-name">{{formState.name}}</div>
+            <a-tooltip v-if="!isRelease" title="编辑">
+              <Icon icon="ant-design:edit-outlined" style="margin-left: 4px;cursor: pointer" color="#354052" size="20" @click="handleEdit"></Icon>
+            </a-tooltip>
+          </div>
+          <div>
+            应用编排
+            <a-tooltip title="AI应用文档">
+              <a style="color: unset" href="https://help.jeecg.com/aigc/guide/app" target="_blank">
+                <Icon style="position:relative;left:2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+              </a>
+            </a-tooltip>
+          </div>
+          <div style="display: flex">
+            <a-button v-if="!isRelease" @click="handleOk" style="margin-right: 30px" type="primary">保存</a-button>
+          </div>
+        </div>
+      </template>
+      <div style="height: 100%; width: 100%">
+        <a-row :span="24">
+          <a-col :span="10">
+            <div class="orchestration">编排</div>
+          </a-col>
+          <a-col :span="14">
+            <div class="view">预览</div>
+          </a-col>
+        </a-row>
+        <a-row :span="24">
+          <a-col :span="10" class="setting-left">
+            <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+              <a-row>
+                <a-col :span="24" v-if="formState.type==='chatFLow'" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.flowId">
+                      <template #label>
+                        <div style="display: flex;justify-content: space-between;width: 100%;">
+                          <span>关联流程</span>
+                          <span v-if="!isRelease" @click="handleAddFlowClick('chatFLow')" class="knowledge-txt">
+                             <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                          </span>
+                        </div>
+                      </template>
+                      <a-card v-if="flowData" hoverable class="knowledge-card" :body-style="{ width: '100%' }">
+                        <div style="display: flex; width: 100%; justify-content: space-between;">
+                          <div style="width: 100%;display: flex;">
+                            <img :src="getFlowImage(flowData.icon)" class="flow-icon"/>
+                            <div style="display: grid;margin-left: 5px;align-items: center;width: calc(100% - 20px)">
+                              <span class="flow-name ellipsis align-items: center;">{{ flowData.name }}</span>
+                              <div class="flex text-status" v-if="flowData.metadata && flowData.metadata.length>0">
+                                <span class="tag-input">输入</span>
+                                <div v-for="(metaItem, index) in flowData.metadata">
+                                  <a-tag color="#f2f3f8" class="tags-meadata">
+                                    <span v-if="index<5" class="tag-text">{{ metaItem.field }}</span>
+                                  </a-tag>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <Icon v-if="!isRelease" @click="handleDeleteFlow('chatFLow')" icon="ant-design:close-outlined" size="20" class="knowledge-icon"></Icon>
+                        </div>
+                      </a-card>
+                      <div v-else class="data-empty-text">
+                        工作流支持通过可视化的方式，对大语言模型、脚本、增强等功能进行组合，从而实现复杂、稳定的业务流程编排，例如旅行规划、报告分析。
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" v-if="formState.type==='chatSimple'">
+                  <div class="prompt-back ">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.prompt" style="margin-bottom:0;">
+                      <template #label>
+                        <div class="prompt-title-padding item-title space-between">
+                          <span>提示词</span>
+                          <div style="align-items: center;display:flex;justify-content: center" v-if="!isRelease">
+                            <a-button size="middle" ghost>
+                              <span style="align-items: center;display:flex"  @click="openPromptApps">
+                                <Icon icon="ant-design:database-outlined"></Icon>提示词库
+                              </span>
+                            </a-button>
+                            <a-button  size="middle" ghost>
+                              <span style="align-items: center;display:flex"  @click="generatedPrompt">
+                                <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"/></svg>
+                                <span style="margin-left: 4px">生成</span>
+                              </span>
+                            </a-button>
+                          </div>
+                        </div>
+                      </template>
+                      <a-textarea :disabled="isRelease" :rows="8" v-model:value="formState.prompt" placeholder="请输入提示词"/>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk-edit">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.prologue" style="margin-bottom:0;">
+                      <template #label>
+                        <div class="prompt-title-padding item-title">开场白</div>
+                      </template>
+                      <div class="prologue-chunk-edit">
+                        <j-markdown-editor :height="166" v-model:value="formState.prologue" :disabled="isRelease" @change="prologueTextAreaBlur" :preview="{ mode: 'view', action: [] }"></j-markdown-editor>
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk-edit">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.presetQuestion" style="margin-bottom:0;">
+                      <template #label>
+                        <div class="prompt-title-padding item-title space-between">
+                          <div class="item-title">预设问题</div>
+                          <a-tooltip v-if="!isRelease" title="添加预设问题">
+                            <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 16px;cursor: pointer" @click="presetQuestionAddClick"></Icon>
+                          </a-tooltip>
+                        </div>
+                      </template>
+                      <div style="padding: 0 10px" v-if="presetQuestionList.length>0">
+                        <draggable :disabled="disabledDrag" item-key="key" v-model="presetQuestionList" @end="presetQuestionEnd">
+                          <template #item="{ element:item }">
+                            <div style="display: flex;width: 100%;margin-top: 10px">
+                              <Icon v-if="!isRelease" icon="ant-design:holder-outlined" size="20"></Icon>
+                              <a-input :disabled="isRelease" placeholder="输入预设问题" v-model:value="item.descr" style="margin-left: 10px;" @blur="onBlur(item)" @focus="onFocus(item)" @change="questionChange"></a-input>
+                              <Icon v-if="!isRelease" style="cursor: pointer;margin-left: 10px" icon="ant-design:delete-outlined" @click="deleteQuestionClick(item.key)"></Icon>
+                            </div>
+                          </template>
+                        </draggable>
+                      </div>
+                      <div v-else class="data-empty-text">
+                        预设问题问题是新对话的初始引导，用户可以快速发起预设对话
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk-edit">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.presetQuestion" style="margin-bottom:0;">
+                      <template #label>
+                        <div class="prompt-title-padding item-title space-between">
+                          <div class="item-title">快捷指令</div>
+                          <a-tooltip v-if="!isRelease" title="添加快捷指令">
+                            <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 16px;cursor: pointer" @click="quickCommandAddClick"></Icon>
+                          </a-tooltip>
+                        </div>
+                      </template>
+                      <div style="padding: 0 10px" v-if="quickCommandList.length>0">
+                        <draggable item-key="key" v-model="quickCommandList" @end="quickCommandEnd">
+                          <template #item="{ element:item }">
+                            <div class="quick-command">
+                              <div style="display: flex;align-items: center">
+                                <Icon v-if="item.icon" :icon="item.icon" size="20"></Icon>
+                                <svg v-else width="14px" height="14px" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"/></svg>
+                                <div style="max-width: 400px;margin-left: 4px" class="ellipsis">{{item.name}}</div>
+                              </div>
+                              <div v-if="!isRelease" style="align-items: center" class="quick-command-icon">
+                                <a-tooltip title="编辑">
+                                  <Icon style="cursor: pointer;margin-left: 10px" icon="ant-design:edit-outlined" @click="editCommandClick(item)"></Icon>
+                                </a-tooltip>
+                                <a-tooltip title="删除">
+                                  <Icon style="cursor: pointer;margin-left: 10px" icon="ant-design:delete-outlined" @click="deleteCommandClick(item.key)"></Icon>
+                                </a-tooltip>
+                              </div>
+                            </div>
+                          </template>
+                        </draggable>
+                      </div>
+                      <div v-else class="data-empty-text">
+                        快捷指令是对话输入框上方的按钮，配置完成后，用户可以快速发起预设对话
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" v-if="formState.type==='chatSimple'" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.modelId">
+                      <template #label>
+                       <div style="display: flex;justify-content: space-between;width: 100%;margin-right: 2px">
+                         <div class="item-title">AI模型</div>
+                         <div v-if="!isRelease" @click="handleParamSettingClick('model')" class="knowledge-txt">
+                            <Icon icon="ant-design:setting-outlined" size="13" style="margin-right: 2px"></Icon>参数配置
+                         </div>
+                       </div>
+                      </template>
+                      <JDictSelectTag
+                          v-model:value="formState.modelId"
+                          :disabled="isRelease"
+                          placeholder="请选择AI模型"
+                          dict-code="airag_model where model_type = 'LLM' and activate_flag = 1,name,id"
+                          style="width: 100%;"
+                          @change="handleModelIdChange"
+                      ></JDictSelectTag>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" v-if="formState.type==='chatSimple'" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item
+                        class="knowledgeId"
+                        style="width: 100%"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        v-bind="validateInfos.knowledgeIds"
+                    >
+                      <template #label>
+                        <div style="display: flex; justify-content: space-between; width: 100%;margin-left: 2px;">
+                          <div class="item-title">知识库</div>
+                          <div v-if="!isRelease">
+                            <span @click="handleParamSettingClick('knowledge')" class="knowledge-txt">
+                              <Icon icon="ant-design:setting-outlined" size="13" style="margin-right: 2px"></Icon>参数配置
+                            </span>
+                            <span @click="handleAddKnowledgeIdClick('knowledge')" class="knowledge-txt">
+                              <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                      <a-row :span="24">
+                        <a-col :span="12" v-for="item in knowledgeDataList" v-if="knowledgeDataList && knowledgeDataList.length>0">
+                          <a-card hoverable class="knowledge-card" :body-style="{ width: '100%' }">
+                            <div style="display: flex; width: 100%; justify-content: space-between">
+                              <div>
+                                <img class="knowledge-img" :src="knowledge" />
+                                <span class="knowledge-name" style="color: #e03e2d;text-decoration: line-through" v-if="item.isDelete">{{ item.name }}</span>
+                                <span class="knowledge-name" v-else>{{ item.name }}</span>
+                              </div>
+                              <Icon v-if="!isRelease" @click="handleDeleteKnowledge(item.id,'knowledge')" icon="ant-design:close-outlined" size="20" class="knowledge-icon"></Icon>
+                            </div>
+                          </a-card>
+                        </a-col>
+                        <div v-else class="data-empty-text">
+                          添加知识库后，用户发送消息时，智能体能够引用文本知识中的内容回答用户问题。
+                        </div>
+                      </a-row>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <!-- 关联工作流多个 -->
+                <a-col :span="24" v-if="formState.type==='chatSimple'" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                      <template #label>
+                        <div style="display: flex;justify-content: space-between;width: 100%;">
+                          <span>关联流程</span>
+                          <span v-if="!isRelease" @click="handleAddFlowClick('chatSimple')" class="knowledge-txt">
+                             <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                          </span>
+                        </div>
+                      </template>
+                      <a-row :span="24">
+                        <a-col :span="12" v-for="flowData in flowDataList" v-if="flowDataList && flowDataList.length>0">
+                          <a-card hoverable class="knowledge-card" :body-style="{ width: '100%' }">
+                            <div style="display: flex; width: 100%; justify-content: space-between;">
+                              <div style="width: 100%;display: flex;">
+                                <img :src="getFlowImage(flowData.icon)" class="flow-icon"/>
+                                <div style="display: grid;margin-left: 5px;align-items: center;width: calc(100% - 20px)">
+                                  <span class="flow-name" style="color: #e03e2d;text-decoration: line-through" v-if="flowData.type">{{ flowData.name }}</span>
+                                  <span v-else class="flow-name ellipsis align-items: center;">{{ flowData.name }}</span>
+                                  <div class="flex text-status" v-if="flowData.metadata && flowData.metadata.length>0">
+                                    <span class="tag-input">输入</span>
+                                    <div v-for="(metaItem, index) in flowData.metadata">
+                                      <a-tag color="#f2f3f8" class="tags-meadata">
+                                        <span v-if="index<5" class="tag-text">{{ metaItem.field }}</span>
+                                      </a-tag>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <Icon v-if="!isRelease" @click="handleDeleteFlow('chatSimple',flowData.id)" icon="ant-design:close-outlined" size="20" class="knowledge-icon"></Icon>
+                            </div>
+                          </a-card>
+                        </a-col>
+                        <div v-else class="data-empty-text">
+                          工作流支持通过可视化的方式，对大语言模型、脚本、增强等功能进行组合，从而实现复杂、稳定的业务流程编排，例如旅行规划、报告分析。
+                        </div>
+                      </a-row>
+               
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <!-- 插件关联区块 -->
+                <a-col :span="24" v-if="formState.type==='chatSimple'" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                      <template #label>
+                        <div style="display: flex; justify-content: space-between; width: 100%;margin-left: 2px;">
+                          <div class="item-title">关联MCP&插件</div>
+                          <div v-if="!isRelease">
+                            <span @click="handleAddMcpClick" class="knowledge-txt">
+                              <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                      <a-row :span="24">
+                        <a-col :span="12" v-for="item in pluginDataList" :key="item.id" v-if="pluginDataList && pluginDataList.length>0">
+                          <a-card hoverable class="knowledge-card" :body-style="{ width: '100%' }">
+                            <div style="display: flex; width: 100%; justify-content: space-between">
+                              <div>
+                                <img class="knowledge-img" src="/@/views/super/airag/aimcp/imgs/mcpLogo.png" />
+                                <span class="knowledge-name">{{ item.name }}</span>
+                              </div>
+                              <Icon v-if="!isRelease" @click="handleDeleteMcp(item.id)" icon="ant-design:close-outlined" size="20" class="knowledge-icon"></Icon>
+                            </div>
+                          </a-card>
+                        </a-col>
+                        <div v-else class="data-empty-text">
+                          <div style="margin-bottom: 8px;">添加插件后，智能体可调用外部工具能力丰富对话。</div>
+                          <div class="mcp-warning-tip">
+                            <Icon icon="ant-design:exclamation-circle-outlined" style="margin-right: 4px;" />
+                            <span>注意：部分大模型暂不支持工具调用功能，请确认所选模型兼容性</span>
+                          </div>
+                        </div>
+                      </a-row>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10" v-if="formState.type==='chatSimple'">
+                  <a-collapse v-model:activeKey="memoryActiveKey" :bordered="false" style="background-color: transparent">
+                    <a-collapse-panel key="1">
+                      <template #header>
+                        <div style="font-weight: 600;color: rgba(32,41,69,0.62);font-size: 14px;justify-content: space-between;display: flex; width: 100%">
+                          <span>记忆</span>
+                          <a-switch @click.prevent.stop="" :disabled="isRelease" v-model:checked="izOpenMemoryChecked" checked-children="开" un-checked-children="关" @change="handleMemoryChange"></a-switch>
+                        </div>
+                      </template>
+                      <div v-if="izOpenMemoryChecked">
+                        <div class="prologue-chunk">
+                          <div style="display: flex; justify-content: space-between; width: 100%;margin-left: 2px;">
+                            <div class="item-title">变量</div>
+                            <div v-if="!isRelease">
+                              <span @click="handleAddVariable" class="knowledge-txt">
+                                <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                              </span>
+                            </div>
+                          </div>
+                          <div v-if="formState.variables">
+                            <div style="display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px;margin-bottom: 8px">
+                              <a-tag v-for="(item, index) in variablesList"
+                                     :key="index"
+                                     color="#2e2e3814"
+                                     style="color: #6b6b75;border-radius: 4px; border: none; padding: 0 5px;">
+                                {{ item.name }}
+                              </a-tag>
+                            </div>
+                          </div>
+                          <div v-else class="data-empty-text">
+                            用于保存用户个人信息，让智能体记住用户的特征，使回复更加个性化。
+                          </div>
+                        </div>
+                        <div class="prologue-chunk" style="margin-top: 10px;">
+                          <div style="display: flex; justify-content: space-between; width: 100%;margin-left: 2px;">
+                            <div class="item-title">长期记忆</div>
+                            <div v-if="!isRelease">
+                              <span @click="handleAddKnowledgeIdClick('memory')" class="knowledge-txt">
+                                <Icon icon="ant-design:plus-outlined" size="13" style="margin-right: 2px"></Icon>添加
+                              </span>
+                            </div>
+                          </div>
+                          <div v-if="memoryData" class="prologue-chunk">
+                            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.memoryId">
+                              <a-card hoverable class="knowledge-card" :body-style="{ width: '100%' }">
+                                <div style="display: flex; width: 100%; justify-content: space-between">
+                                  <div>
+                                    <img class="knowledge-img" :src="knowledge" />
+                                    <span class="knowledge-name" style="color: #e03e2d;text-decoration: line-through" v-if="memoryData.isDelete">{{ memoryData.name }}</span>
+                                    <span class="knowledge-name" v-else>{{ memoryData.name }}</span>
+                                  </div>
+                                  <Icon v-if="!isRelease" @click="handleDeleteKnowledge(memoryData.id,'memgory')" icon="ant-design:close-outlined" size="20" class="knowledge-icon"></Icon>
+                                </div>
+                              </a-card>
+                            </a-form-item>
+                          </div>
+                          <div v-else class="data-empty-text">
+                            开启后可总结聊天对话的内容，并用于更好的响应用户的消息。
+                          </div>
+                        </div>
+                        <div class="prologue-chunk" style="margin-top: 20px;">
+                          <div class="prompt-title-padding item-title space-between">
+                            <span>记忆与变量提示词</span>
+                            <div style="align-items: center;display:flex;justify-content: center" v-if="!isRelease">
+                              <a-button size="middle" ghost>
+                                 <span style="align-items: center;display:flex" @click="generateVariablePrompt">
+                                   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"/></svg>
+                                   <span style="margin-left: 4px">生成</span>
+                                 </span>
+                              </a-button>
+                            </div>
+                          </div>
+                          <a-spin :spinning="memoryLoading" tip="为您编排应用程序中…">
+                            <a-textarea :disabled="memoryLoading" :rows="6" v-model:value="formState.memoryPrompt" placeholder="点击生成按钮生成记忆与变量提示词"/>
+                          </a-spin>
+                        </div>
+                      </div>
+                    </a-collapse-panel>
+                  </a-collapse>
+                </a-col>
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.msgNum">
+                      <template #label>
+                        <div style="margin-left: 2px">历史聊天记录</div>
+                      </template>
+                      <a-input-number :disabled="isRelease" v-model:value="formState.msgNum"></a-input-number>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk">
+                    <div style="margin-left: 2px">个性化设置</div>
+                    <a-row>
+                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.multiSession">
+                        <div style="display: flex;margin-top: 10px">
+                          <div style="margin-left: 2px">多会话模式：</div>
+                          <a-switch :disabled="isRelease" v-model:checked="multiSessionChecked" checked-children="开" un-checked-children="关" @change="handleMultiSessionChange"></a-switch>
+                        </div>
+                      </a-form-item>
+                    </a-row>
+                    <a-row>
+                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                        <div style="display: flex;margin-top: 10px">
+                          <div style="margin-left: 2px">开启绘画能力：</div>
+                          <a-switch :disabled="isRelease" v-model:checked="izDrawChecked" checked-children="开" un-checked-children="关" @change="handleDrawChange"></a-switch>
+                        </div>
+                      </a-form-item>
+                    </a-row>
+                    <a-row>
+                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                        <div style="display: flex;margin-top: 10px">
+                          <div style="margin-left: 2px">显示工具调用过程：</div>
+                          <a-switch
+                            v-model:checked="showToolProcessChecked"
+                            :disabled="isRelease"
+                            checked-children="开"
+                            un-checked-children="关"
+                            @change="handleShowToolProcessChange"
+                          />
+                        </div>
+                      </a-form-item>
+                    </a-row>
+                    <a-row v-if="izDrawChecked" class="mt-10">
+                      <a-col :span="24">
+                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.drawModelId">
+                          <span style="margin-left: 2px; margin-bottom: 5px">绘画模型：</span>
+                          <JDictSelectTag
+                              v-model:value="formState.drawModelId"
+                              :disabled="isRelease"
+                              placeholder="请选择会话模型"
+                              dict-code="airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id"
+                              @change="handleDrawModelChange"
+                          ></JDictSelectTag>
+                        </a-form-item>
+                      </a-col>
+                    </a-row>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-form>
+          </a-col>
+          <a-col :span="14" class="setting-right">
+            <chat 
+              :uuid="uuid" 
+              :prologue="prologue" 
+              :appId="appId" 
+              :formState="formState" 
+              url="/airag/app/debug" 
+              :presetQuestion="presetQuestion" 
+              :quickCommandData="quickCommandList"
+              :hasExtraFlowInputs="hasExtraFlowInputs"
+              :conversationSettings="conversationSettings"
+              @edit-settings="handleEditSettings"
+            ></chat>
+          </a-col>
+        </a-row>
+      </div>
+    </BasicModal>
+
+    <!--  Ai知识库选择弹窗   -->
+    <AiAppAddKnowledgeModal :multiple="knowledgeMultiple" :type="knowledgeMultiple?'knowledge':'memory'" @register="registerKnowledgeModal" @success="handleSuccess"></AiAppAddKnowledgeModal>
+    <!--  插件选择弹窗   -->
+    <AiAppAddMcpModal @register="registerMcpModal" @success="handleMcpSuccess"></AiAppAddMcpModal>
+    <!--  Ai添加流程弹窗  -->
+    <AiAppAddFlowModal @register="registerFlowModal" @success="handleAddFlowSuccess" :multiple="multiple"></AiAppAddFlowModal>
+    <!-- Ai配置弹窗   -->
+    <AiAppParamsSettingModal @register="registerParamsSettingModal" @ok="handleParamsSettingOk"></AiAppParamsSettingModal>
+    <!--  Ai应用新增编辑弹窗  -->
+    <AiAppModal @register="registerAiAppModal" @success="handelEditSuccess"></AiAppModal>
+    <!-- Ai生成器   -->
+    <AiAppGeneratedPromptModal @register="registerAiAppPromptModal" @ok="handleAiAppPromptOk"></AiAppGeneratedPromptModal>
+    <!-- Ai提示词选择弹窗   -->
+    <AiAppPromptMarketModal @register="registerAiPromptSelectModal" @ok="handleAiAppPromptOk"></AiAppPromptMarketModal>
+    <!--  Ai快捷指令  -->
+    <AiAppQuickCommandModal @register="registerAiAppCommandModal" @ok="handleAiAppCommandOk" @update-ok="handleAiAppCommandUpdateOk"></AiAppQuickCommandModal>
+    <!-- 对话设置弹窗 -->
+    <ConversationSettingsModal
+      ref="settingsModalRef"
+      :flowInputs="flowInputs"
+      conversationId="debug"
+      :existingSettings="conversationSettings"
+      @ok="handleSettingsOk"
+    />
+    <!--  用户变量  -->
+    <AiUserVariablesModal @register="registerVariablesModal" @ok="handleVariablesOk"></AiUserVariablesModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, nextTick, computed, watch } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { Form, TimePicker, Collapse, CollapsePanel } from 'ant-design-vue';
+  import { initDictOptions } from '@/utils/dict';
+  import { queryKnowledgeBathById, saveApp, queryById, queryFlowById, queryFlowByIds, queryKnowledgeById, generateMemoryByAppId } from '../AiApp.api';
+  import { defHttp } from '@/utils/http/axios';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import AiAppAddKnowledgeModal from './AiAppAddKnowledgeModal.vue';
+  import AiAppAddMcpModal from './AiAppAddMcpModal.vue';
+  import AiAppParamsSettingModal from './AiAppParamsSettingModal.vue';
+  import AiAppGeneratedPromptModal from './AiAppGeneratedPromptModal.vue';
+  import AiAppPromptMarketModal from './AiAppPromptMarketModal.vue';
+  import AiAppQuickCommandModal from './AiAppQuickCommandModal.vue';
+  import AiAppAddFlowModal from './AiAppAddFlowModal.vue';
+  import AiAppModal from './AiAppModal.vue';
+  import chat from '../chat/chat.vue';
+  import ConversationSettingsModal from '../chat/components/ConversationSettingsModal.vue';
+  import knowledge from '/@/views/super/airag/aiknowledge/icon/knowledge.png';
+  import { cloneDeep } from 'lodash-es';
+  import JImageUpload from '@/components/Form/src/jeecg/components/JImageUpload.vue';
+  import defaultImg from '../img/ailogo.png';
+  import { getFileAccessHttpUrl, randomString } from "@/utils/common/compUtils";
+  import JSearchSelect from "@/components/Form/src/jeecg/components/JSearchSelect.vue";
+  import JMarkdownEditor from "@/components/Form/src/jeecg/components/JMarkdownEditor.vue";
+  import AiAppJson from './AiApp.json'
+  import draggable from 'vuedraggable';
+  import { useMessage } from "@/hooks/web/useMessage";
+  import defaultFlowImg from "@/assets/images/ai/aiflow.png";
+  import AiUserVariablesModal from "./AiUserVariablesModal.vue";
+  
+  export default {
+    name: 'AiAppSettingModal',
+    components: {
+      draggable,
+      JMarkdownEditor,
+      JSearchSelect,
+      JImageUpload,
+      JDictSelectTag,
+      BasicModal,
+      AiAppAddKnowledgeModal,
+      AiAppAddMcpModal,
+      AiAppParamsSettingModal,
+      AiAppAddFlowModal,
+      AiAppModal,
+      chat,
+      ConversationSettingsModal,
+      AiAppGeneratedPromptModal,
+      AiAppQuickCommandModal,
+      AiAppPromptMarketModal,
+      AiUserVariablesModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const title = ref<string>('设置');
+
+      //保存或修改
+      const isUpdate = ref<boolean>(false);
+      //uuid
+      const uuid = ref(randomString(16));
+      //app类型
+      const appTypeOption = ref<any>([]);
+      //应用类型
+      const type = ref<string>('chatSimple');
+      //form表单数据
+      const formState = reactive<any>({
+        name: '',
+        descr: '',
+        msgNum: 1,
+        prompt: '',
+        prologue: null,
+        knowledgeIds: '',
+        id: '',
+        type: '',
+        modelId: '',
+        icon: '',
+        presetQuestion:'',
+        memoryId: '',
+        variables: '',
+        izOpenMemory: 1,
+        memoryPrompt: '',
+        drawModelId: '',
+      });
+
+      //表单验证
+      const validatorRules = ref<any>({
+        name: [{ required: true, message: '请输入应用名称!' }],
+        modelId: [{ required: true, message: '请选择AI模型!' }],
+        flowId:[{ required: true, message: '请选择AI流程!' }],
+        drawModelId: [{  required: true, message: '请选择绘画模型!' }]
+      });
+      //注册form
+      const useForm = Form.useForm;
+      const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false });
+      const labelCol = ref<any>({ span: 24 });
+      const wrapperCol = ref<any>({ span: 24 });
+      //关联知识库的id
+      const knowledgeIds = ref<any>('');
+      //知识库集合
+      const knowledgeDataList = ref<any>([]);
+      //记忆库的数据
+      const memoryData = ref<any>(null);
+      const knowledgeMultiple = ref<boolean>(true);
+      // 插件id集合（只存id）
+      const pluginIds = ref<any>([]);
+      // 插件对象集合（包含name等）
+      const pluginDataList = ref<any>([]);
+      // 插件结构（保存时写入 formState.plugins）
+      const plugins = ref<any>([]);
+      //开场白的数据
+      const prologue = ref<any>('');
+      //应用id
+      const appId = ref<any>('');
+      //参数配置
+      const metadata = ref<any>({});
+      const presetQuestion = ref<string>('');
+      //预设问题集合
+      const presetQuestionList = ref<any>([{ key:1, sort: 1, descr: '' }]);
+      //快捷指令集合
+      const quickCommandList = ref<any>([]);
+      //快捷指令
+      const quickCommand = ref<any>('');
+      const { createMessage } = useMessage();
+      //多会话模式选中状态
+      const multiSessionChecked = ref<boolean>(true);
+      //开启会话能力
+      const izDrawChecked = ref<boolean>(false);
+      //显示工具调用过程
+      const showToolProcessChecked = ref<boolean>(true);
+      // 是否已发布
+      const isRelease = ref<boolean>(false);
+      //对话设置弹窗ref
+      const settingsModalRef = ref();
+      //工作流入参列表
+      const flowInputs = ref<any[]>([]);
+      //对话设置（用于调试模式）
+      const conversationSettings = ref<Record<string, any>>({});
+      //流程数据集合
+      const flowDataList = ref<any>([]);
+      //多个流程id
+      const flowIds = ref<string>('');
+      //是否多选
+      const multiple = ref<boolean>(false);
+      //变量数据
+      const variablesList = ref<any>([]);
+      //是否开启记忆
+      const izOpenMemoryChecked = ref<any>(false);
+      //记忆折叠面板
+      const memoryActiveKey = ref<any>();
+      //记忆提示词是否加载
+      const memoryLoading = ref<any>(false);
+      
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        appId.value = data.id;
+        isUpdate.value = !!data?.isUpdate;
+        isRelease.value = data?.status === 'release';
+        clearParam();
+        if (isUpdate.value) {
+          setTimeout(() => {
+            setFormState(data);
+          }, 300);
+        } else {
+          //新增成功之后需要有id
+          queryById({ id: data.id }).then((res) => {
+            if (res.success) {
+              resetFields();
+              //赋值
+              Object.assign(formState, res.result);
+              formState.prompt = cloneDeep(AiAppJson.prompt);
+              formState.prologue = cloneDeep(AiAppJson.prologue);
+              formState.presetQuestion = JSON.stringify(cloneDeep(AiAppJson.presetQuestion));
+              formState.msgNum = 1;
+              prologue.value = cloneDeep(AiAppJson.prologue);
+              presetQuestion.value = formState.presetQuestion;
+              presetQuestionList.value = cloneDeep(AiAppJson.presetQuestion);
+              addRules(res.result.type)
+            }
+          });
+        }
+        setModalProps({ bodyStyle: { padding: '10px' } });
+      });
+
+      //注册modal
+      const [registerKnowledgeModal, { openModal }] = useModal();
+      const [registerMcpModal, { openModal: openMcpModal }] = useModal();
+      const [registerFlowModal, { openModal: registerFlowOpen }] = useModal();
+      const [registerParamsSettingModal, { openModal: paramsSettingOpen }] = useModal();
+      const [registerAiAppModal, { openModal: aiAppModalOpen }] = useModal();
+      const [registerAiAppPromptModal, { openModal: aiAppPromptModalOpen }] = useModal();
+      const [registerAiAppCommandModal, { openModal: aiAppCommandModalOpen }] = useModal();
+      const [registerAiPromptSelectModal, { openModal: aiPromptSelectModalOpen }] = useModal();
+      const [registerVariablesModal, { openModal: aiVariablesModalOpen }] = useModal();
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        try {
+          let values = await validate();
+          setModalProps({ confirmLoading: true });
+          formState.knowledgeIds = knowledgeIds.value;
+          if(flowIds.value){
+            formState.flowId = flowIds.value;
+          }
+          await saveApp(formState);
+          emit('success')
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      //初始化AI应用类型
+      initAppTypeOption();
+
+      function initAppTypeOption() {
+        initDictOptions('ai_app_type').then((data) => {
+          if (data && data.length > 0) {
+            for (const datum of data) {
+              if (datum.value === 'chatSimple') {
+                datum['desc'] = '适合新手创建小助手';
+              } else if (datum.value === 'chatFLow') {
+                datum['desc'] = '适合高级用户自定义小助手的工作流';
+              }
+            }
+          }
+          appTypeOption.value = data;
+        });
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      /**
+       * 应用类型点击事件
+       */
+      function handleTypeClick(val) {
+        type.value = val;
+      }
+
+      /**
+       * 添加关联知识库
+       * 
+       * @param type
+       */
+      function handleAddKnowledgeIdClick(type) {
+        //update-begin---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+        knowledgeMultiple.value = type === 'knowledge'
+        if(type === 'knowledge'){
+          openModal(true, {
+            knowledgeIds: knowledgeIds.value,
+            knowledgeDataList: knowledgeDataList.value,
+          });
+        } else {
+          openModal(true, {
+            knowledgeIds: formState.memoryId,
+            knowledgeData: memoryData.value,
+          });
+        }
+        //update-end---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+      }
+
+      /**
+       * 添加关联MCP
+       */
+      function handleAddMcpClick(){
+        openMcpModal(true,{
+          pluginIds: pluginIds.value,
+          pluginDataList: pluginDataList.value
+        })
+      }
+
+      /**
+       * 选中回调事件
+       * @param knowledgeId
+       * @param knowledgeData
+       */
+      function handleSuccess(knowledgeId, knowledgeData) {
+        //update-begin---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+        if(knowledgeMultiple.value){
+          knowledgeIds.value = cloneDeep(knowledgeId.join(','));
+          knowledgeDataList.value = cloneDeep(knowledgeData);
+          formState.knowledgeIds = knowledgeIds.value;
+        } else {
+          formState.memoryId = knowledgeId;
+          memoryData.value = knowledgeData;
+        }
+        //update-end---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+      }
+
+      /**
+       * MCP选中成功回调
+       * @param ids
+       * @param dataList
+       * @param pluginStruct
+       */
+      function handleMcpSuccess(ids, dataList, pluginStruct){
+        pluginIds.value = cloneDeep(ids);
+        pluginDataList.value = cloneDeep(dataList);
+        plugins.value = cloneDeep(pluginStruct);
+        formState.plugins = JSON.stringify(plugins.value);
+      }
+
+      /**
+       * 删除知识库
+       */
+      function handleDeleteKnowledge(id, type) {
+        //update-begin---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+        //update-begin---author:wangshuai---date:2026-01-14---for:【QQYUN-14562】【ai应用】记忆添加后，×不掉---
+        if(type === 'knowledge'){
+        //update-end---author:wangshuai---date:2026-01-14---for:【QQYUN-14562】【ai应用】记忆添加后，×不掉---
+          let array = knowledgeIds.value.split(',');
+          let findIndex = array.findIndex((item) => item === id);
+          if (findIndex != -1) {
+            array.splice(findIndex, 1);
+            knowledgeIds.value = array ? array.join(',') : '';
+            knowledgeDataList.value.splice(findIndex, 1);
+            formState.knowledgeIds = knowledgeIds.value;
+          }
+        } else {
+          formState.memoryId = "";
+          memoryData.value = null;
+        //update-end---author:wangshuai---date:2025-12-29---for:【QQYUN-14265】【AI】支持记忆---
+        }
+      }
+
+      /**
+       * 删除MCP
+       */
+      function handleDeleteMcp(id){
+        const findIndex = pluginIds.value.findIndex((item:any)=> item === id);
+        if(findIndex>-1){
+          pluginIds.value.splice(findIndex,1);
+          pluginDataList.value.splice(findIndex,1);
+          plugins.value = pluginDataList.value.map((it:any)=> ({ pluginId: it.id, pluginName: it.name, category: 'mcp'}));
+          formState.plugins = JSON.stringify(plugins.value);
+        }
+      }
+
+      /**
+       * 根据知识库id查询知识库内容
+       * @param ids
+       */
+      function getKnowledgeDataList(ids) {
+        queryKnowledgeBathById({ ids: ids }).then((res) => {
+          //update-begin---author:wangshuai---date:2025-04-24---for:【QQYUN-12133】【AI】应用关联的知识库呗删除后，再次进入应用看不到已删除的知识库，并且无法清理掉知识库。---
+          if (res.success && res.result) {
+            let result = res.result;
+            let idArray = ids.split(",");
+            let arr:any = [];
+            for (const id of idArray) {
+              let filter = result.filter((item) => item.id === id);
+              if(filter && filter.length > 0) {
+                arr.push({ id: id, name: filter[0].name});
+              } else {
+                arr.push({ name: '该知识库已被删除', id: id,isDelete: true })
+              }
+            }
+            knowledgeDataList.value = arr;
+            knowledgeIds.value = ids;
+          } else {
+            let arr:any = [];
+            for (const id of ids) {
+              arr.push({ name: '该知识库已被删除', id: id, isDelete: true })
+            }
+            knowledgeDataList.value = arr;
+            knowledgeIds.value = ids;
+          }
+          //update-end---author:wangshuai---date:2025-04-24---for:【QQYUN-12133】【AI】应用关联的知识库呗删除后，再次进入应用看不到已删除的知识库，并且无法清理掉知识库。---
+        });
+      }
+
+      /**
+       * 开场白值改变事件
+       */
+      function prologueTextAreaBlur(value) {
+        prologue.value = value;
+      }
+
+      /**
+       * 关闭弹窗触发列表刷新
+       *
+       * @param value
+       */
+      function visibleChange(value) {
+        if(!value){
+          emit('success');
+        }
+      }
+
+      /**
+       * 添加检验
+       *
+       * @param type
+       */
+      function addRules(type){
+        if(type === 'chatSimple') {
+          validatorRules.value = {
+            name: [{ required: true, message: '请输入应用名称!' }],
+            modelId: [{ required: true, message: '请选择AI模型!' }],
+          }
+        }else if(type === 'chatFLow') {
+          validatorRules.value = {
+            name: [{ required: true, message: '请输入应用名称!' }],
+            flowId:[{ required: true, message: '请选择AI流程!' }]
+          }
+        }
+      }
+
+      /**
+       * 参数配置点击事件
+       * @param value
+       */
+      function handleParamSettingClick(value) {
+        paramsSettingOpen(true,{ type: value, metadata : metadata.value })
+      }
+
+      /**
+       * 参数配置确定回调事件
+       *
+       * @param value
+       */
+      function handleParamsSettingOk(value){
+        Object.assign(metadata.value,value)
+        if(value) {
+          formState.metadata = JSON.stringify(metadata.value);
+        }
+      }
+
+      //流程id
+      const flowId = ref<string>('');
+      //流程数据
+      const flowData = ref<any>(null);
+
+      /**
+       * 根据流程id查询流程
+       */
+      function getFlowDataById(id) {
+        queryFlowById({ id: id}).then((res) =>{
+          if(res.success){
+            flowData.value = res.result;
+            flowId.value = res.result.id;
+            if(res.result.metadata){
+              let metadata = JSON.parse(res.result.metadata);
+              if(metadata.inputs){
+                flowData.value.metadata = metadata.inputs;
+              }
+            }
+          }
+        })
+      }
+
+      /**
+       * 添加流程
+       * @param type 是否多选
+       */
+      function handleAddFlowClick(type) {
+        //update-begin---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+        multiple.value = type === 'chatSimple';
+        if(type === 'chatSimple'){
+          registerFlowOpen(true,{ flowId: flowIds.value, flowData: flowDataList.value })
+        } else {
+          registerFlowOpen(true,{ flowId: flowId.value, flowData: flowData.value })
+        }
+        //update-end---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+      }
+
+      /**
+       * 添加流程确定事件
+       * @param values
+       */
+      function handleAddFlowSuccess(values) {
+        //update-begin---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+        if(multiple.value){
+          flowIds.value = values.flowId?.join(",");
+          flowDataList.value = values.flowData;
+        } else {
+          flowId.value = values.flowId;
+          formState.flowId = values.flowId;
+          flowData.value = values.flowData;
+        }
+        //update-end---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+      }
+
+      /**
+       * 删除流程
+       */
+      function handleDeleteFlow(type, id = '') {
+        //update-begin---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+        if(type === 'chatFLow'){
+          flowId.value = "";
+          formState.flowId = "";
+          flowData.value = null;
+        } else {
+          let array = flowIds.value.split(',');
+          let findIndex = array.findIndex((item) => item === id);
+          if (findIndex != -1) {
+            array.splice(findIndex, 1);
+            flowIds.value = array ? array.join(',') : '';
+            flowDataList.value.splice(findIndex, 1);
+          }
+        }
+        //update-end---author:wangshuai---date:2025-12-24---for:【QQYUN-14267】创建应用的时候，选择工作流，让应用可以像调用MCP一样去调用流程: 单选和多选做区分---
+      }
+
+      /**
+       * 获取图标
+       */
+      function getImage() {
+        return formState.icon ? getFileAccessHttpUrl(formState.icon): defaultImg;
+      }
+
+      /**
+       * 获取流程图标
+       */
+      function getFlowImage(icon) {
+        return icon ? getFileAccessHttpUrl(icon) : defaultFlowImg;
+      }
+
+      /**
+       * 编辑应用弹窗
+       */
+      function handleEdit() {
+        aiAppModalOpen(true,{
+          isUpdate: true,
+          record: formState
+        })
+      }
+
+      /**
+       * 应用编辑回调事件
+       *
+       * @param values
+       */
+      function handelEditSuccess(values) {
+        formState.icon = values.icon ? values.icon:'';
+        formState.name = values.name ? values.name:'';
+      }
+
+      //=========== begin预设问题 ===========================
+
+      // 编辑状态不允许拖动
+      const disabledDrag = computed(()=>{
+        let list = presetQuestionList.value;
+        if(list && list.length>0){
+          let arr = list.filter(item=>item.update==true)
+          if(arr.length>0){
+            return true
+          }
+        }
+        return false;
+      });
+
+      /**
+       * 预设问题拖拽
+       */
+      function presetQuestionEnd(){
+        presetQuestion.value = JSON.stringify(presetQuestionList.value);
+        formState.presetQuestion = presetQuestion.value;
+      }
+
+      /**
+       * 预设问题添加
+       *
+       * @param e
+       */
+      function presetQuestionAddClick(e){
+        let find = presetQuestionList.value.find((item)=> item.descr == '');
+        if(find){
+          return;
+        }
+        const length = presetQuestionList.value.length;
+        presetQuestionList.value.push({key: length + 1, sort: length + 1, descr: ''})
+      }
+
+      /**
+       * 预设问题删除
+       *
+       * @param key
+       */
+      function deleteQuestionClick(key){
+        presetQuestionList.value = presetQuestionList.value.filter((item) => item.key !== key);
+        presetQuestion.value = JSON.stringify(presetQuestionList.value);
+        formState.presetQuestion = presetQuestion.value;
+      }
+
+      /**
+       * input聚焦事件
+       * @param item
+       */
+      function onFocus(item){
+        item.update = true;
+      }
+
+      /**
+       * input 失焦事件
+       * @param item
+       */
+      function onBlur(item){
+        item.update = false;
+      }
+
+      /**
+       * 预设问题值改变事件
+       *
+       */
+      function questionChange() {
+        if(presetQuestionList.value && presetQuestionList.value.length>0){
+          presetQuestion.value = JSON.stringify(presetQuestionList.value);
+          formState.presetQuestion = presetQuestion.value;
+        }else{
+          presetQuestion.value = "";
+          formState.presetQuestion = "";
+        }
+      }
+
+      //=========== end预设问题 ===========================
+
+      /**
+       * 根据多个流程id查询流程
+       */
+      function getFlowDataByIds(ids) {
+        queryFlowByIds({ id: ids, pageNo:1, pageSize: 100 }).then((res) =>{
+          if(res.success && res.result){
+            let records = res.result.records || [];
+            let idArray = ids.split(",");
+            let arr:any = [];
+            let idsList:any = [];
+
+            for (const id of idArray) {
+              let item = records.find(r => r.id === id);
+              if (item) {
+                if(item.metadata){
+                  try {
+                    let metadata = JSON.parse(item.metadata);
+                    if(metadata.inputs){
+                      item.metadata = metadata.inputs;
+                    }
+                  } catch (e) {
+                    console.error("metadata parse error", e);
+                  }
+                }
+                arr.push(item);
+              } else {
+                arr.push({ name: '该流程已被删除', id: id, type: 'delete' });
+              }
+              idsList.push(id);
+            }
+            flowDataList.value = arr;
+            flowIds.value = idsList.join(",");
+          } else {
+            let arr:any = [];
+            let idArray = ids.split(",");
+            for (const id of idArray) {
+              arr.push({ name: '该流程已被删除', id: id, type: 'delete'})
+            }
+            flowDataList.value = arr;
+            flowIds.value = ids;
+          }
+        })
+      }
+
+      /**
+       * 清除参数
+       */
+      function clearParam() {
+        knowledgeIds.value = '';
+        knowledgeDataList.value = [];
+        memoryData.value = null;
+        pluginIds.value = [];
+        pluginDataList.value = [];
+        plugins.value = [];
+        prologue.value = '';
+        flowId.value = '';
+        flowData.value = null;
+        flowDataList.value = [];
+        flowIds.value = '';
+        presetQuestion.value = '';
+        presetQuestionList.value = [{ key:1, sort: 1, descr: '' }];
+        quickCommandList.value = [];
+        quickCommand.value = '';
+        multiSessionChecked.value = true;
+        variablesList.value = [];
+        izOpenMemoryChecked.value = false;
+        memoryLoading.value = false;
+        memoryActiveKey.value = [];
+      }
+
+      /**
+       * 设置form属性
+       * @param data
+       */
+      function setFormState(data: any) {
+        resetFields();
+        addRules(data.type)
+        if (data.prologue) {
+          prologue.value = data.prologue ? data.prologue : '';
+        }
+        data.msgNum = data.msgNum ? data.msgNum : 1;
+        if(data.metadata){
+          metadata.value = JSON.parse(data.metadata);
+          if(metadata.value?.multiSession){
+            multiSessionChecked.value = metadata.value.multiSession === '1';
+          }else{
+            multiSessionChecked.value = true;
+          }
+          if(metadata.value?.izDraw){
+            izDrawChecked.value = metadata.value.izDraw === '1';
+          }else{
+            izDrawChecked.value = false;
+          }
+          if(metadata.value?.showToolProcess != null){
+            showToolProcessChecked.value = metadata.value.showToolProcess === '1';
+          }else{
+            showToolProcessChecked.value = true;
+          }
+          if(metadata.value?.drawModelId){
+            formState.drawModelId = metadata.value.drawModelId;
+          }
+        }
+        if(data.presetQuestion){
+          presetQuestion.value = data.presetQuestion;
+          presetQuestionList.value = JSON.parse(data.presetQuestion);
+        }
+        if(data.quickCommand){
+          //update-begin---author:wangshuai---date:2025-04-08---for:【QQYUN-11939】ai应用 快捷指令 修改保存以后，再次打开还是原来的---
+          let parse = JSON.parse(data.quickCommand);
+          for (let i = 0; i < parse.length; i++) {
+            parse[i].key = (i+1).toString();
+          }
+          quickCommandList.value = parse;
+          //update-end---author:wangshuai---date:2025-04-08---for:【QQYUN-11939】ai应用 快捷指令 修改保存以后，再次打开还是原来的---
+        }
+        if(data.plugins){
+          try {
+            const parsePlugins = JSON.parse(data.plugins);
+            pluginIds.value = parsePlugins.map((p:any)=> p.pluginId);
+            pluginDataList.value = parsePlugins.map((p:any)=> ({ id: p.pluginId, name: p.pluginName }));
+            plugins.value = parsePlugins;
+          } catch (e) {
+            pluginIds.value = [];
+            pluginDataList.value = [];
+            plugins.value = [];
+          }
+        }
+        //赋值
+        Object.assign(formState, data);
+        //根据知识库id查询知识库内容
+        if (data.type === 'chatSimple' && data.knowledgeIds) {
+          getKnowledgeDataList(data.knowledgeIds);
+        }
+        //根据知识库id查询流程信息
+        if (data.type === 'chatFLow' && data.flowId) {
+          getFlowDataById(data.flowId);
+        }
+        //根据流程的id查询流程信息
+        if (data.type === 'chatSimple' && data.flowId) {
+          getFlowDataByIds(data.flowId);
+        }
+        // 如果已有modelId，查询模型信息并更新到metadata中
+        if (data.type === 'chatSimple' && data.modelId) {
+          handleModelIdChange(data.modelId);
+        }
+        // 存在记忆库的id,查询记忆库并显示
+        if(data.type === 'chatSimple' && data.memoryId){
+          getMemoryDataById(data.memoryId);
+        }
+        //变量
+        if(formState.variables){
+          variablesList.value = JSON.parse(formState.variables);
+        }
+        //是否开启记忆
+        if(formState.izOpenMemory){
+          console.log("formState.izOpenMemory:::",formState.izOpenMemory)
+          izOpenMemoryChecked.value = formState.izOpenMemory === 1;
+        } else {
+          izOpenMemoryChecked.value = false;
+        }
+        if(izOpenMemoryChecked.value){
+          memoryActiveKey.value = [1];
+        }
+      }
+
+      //============= begin 提示词 ================================
+      /**
+       * 生成提示词
+       */
+      function generatedPrompt() {
+        aiAppPromptModalOpen(true,{})
+      }
+
+      /**
+       * 提示词回调
+       *
+       * @param value
+       */
+      function handleAiAppPromptOk(value) {
+        formState.prompt = value;
+      }
+      //============= end 提示词 ================================
+
+      //=============== begin 快捷指令 ============================
+      function quickCommandEnd() {
+        quickCommand.value = JSON.stringify(quickCommandList.value);
+        formState.quickCommand = quickCommand.value;
+      }
+
+      /**
+       * 快捷指令新增点击事件
+       */
+      function quickCommandAddClick(){
+        if(quickCommandList.value && quickCommandList.value.length > 4){
+          createMessage.warning("最多只能添加5个！");
+          return;
+        }
+        aiAppCommandModalOpen(true,{})
+      }
+
+      /**
+       * 快捷指令编辑点击事件
+       * @param item
+       */
+      function editCommandClick(item){
+        aiAppCommandModalOpen(true,{
+          isUpdate: true,
+          record: item
+        })
+      }
+
+      /**
+       * 快捷指令添加回调事件
+       * @param value
+       */
+      function handleAiAppCommandOk(value){
+        //update-begin---author:wangshuai---date:2025-04-08---for:【QQYUN-11939】ai应用 快捷指令 修改保存以后，再次打开还是原来的---
+        value.key = (quickCommandList.value.length + 1).toString();
+        //update-end---author:wangshuai---date:2025-04-08---for:【QQYUN-11939】ai应用 快捷指令 修改保存以后，再次打开还是原来的---
+        quickCommandList.value.unshift({...value });
+        quickCommand.value = JSON.stringify(quickCommandList.value);
+        formState.quickCommand = quickCommand.value;
+      }
+
+      /**
+       * 快捷指令更新回调事件
+       * @param value
+       */
+      function handleAiAppCommandUpdateOk(value) {
+        let findIndex = quickCommandList.value.findIndex(item => item.key === value.key);
+        if(findIndex>-1){
+          quickCommandList.value[findIndex] = value;
+          quickCommand.value = JSON.stringify(quickCommandList.value);
+          formState.quickCommand = quickCommand.value;
+        }
+      }
+
+      /**
+       * 删除快捷指令
+       * @param value
+       */
+      function deleteCommandClick(value) {
+        let findIndex = quickCommandList.value.findIndex(item => item.key === value);
+        if(findIndex>-1){
+          quickCommandList.value.splice(findIndex, 1);
+          quickCommand.value = JSON.stringify(quickCommandList.value);
+          formState.quickCommand = quickCommand.value;
+        }
+      }
+      //=============== end 快捷指令 ============================
+
+      /**
+       * 复选框相中时的回调
+       */
+      function handleMultiSessionChange(checked){
+        if(checked){
+          metadata.value.multiSession = "1";
+        }else{
+          metadata.value.multiSession = "0";
+        }
+        formState.metadata = JSON.stringify(metadata.value);
+      }
+
+      // 检查是否有额外的工作流入参
+      const hasExtraFlowInputs = computed(() => {
+        if (!flowData.value || !flowData.value.metadata) {
+          return false;
+        }
+        try {
+          const flowInputsList = flowData.value.metadata || [];
+          
+          // 过滤掉固定参数
+          const fixedParams = ['history', 'content', 'images'];
+          const extraInputs = flowInputsList.filter((input: any) => !fixedParams.includes(input.field));
+          
+          return extraInputs.length > 0;
+        } catch (e) {
+          console.error('解析flowData.metadata失败', e);
+          return false;
+        }
+      });
+
+      // 监听flowData变化，更新flowInputs
+      watch(
+        () => flowData.value,
+        (val) => {
+          if (!val || !val.metadata) {
+            flowInputs.value = [];
+            return;
+          }
+          try {
+            const flowInputsList = val.metadata || [];
+            flowInputs.value = flowInputsList;
+          } catch (e) {
+            console.error('解析flowData.metadata失败', e);
+            flowInputs.value = [];
+          }
+        },
+        { immediate: true, deep: true }
+      );
+
+      /**
+       * 打开对话设置弹窗
+       */
+      function handleEditSettings() {
+        if (settingsModalRef.value) {
+          settingsModalRef.value.open();
+        }
+      }
+
+      /**
+       * 对话设置确定回调
+       */
+      function handleSettingsOk(settings: Record<string, any>) {
+        conversationSettings.value = settings;
+        console.log('调试模式对话设置已更新:', settings);
+      }
+
+      /**
+       * 模型ID变化处理
+       * 查询模型信息并更新到metadata中，供chat组件使用
+       */
+      async function handleModelIdChange(modelId: string) {
+        if (!modelId) {
+          // 如果清空模型，清除模型信息
+          if (metadata.value.modelInfo) {
+            delete metadata.value.modelInfo;
+            formState.metadata = JSON.stringify(metadata.value);
+          }
+          return;
+        }
+        try {
+          const res = await defHttp.get({
+            url: '/airag/airagModel/queryById',
+            params: { id: modelId }
+          }, { isTransformResponse: false });
+          if (res.success && res.result) {
+            const model = res.result;
+            // 将模型信息添加到metadata中
+            if (!metadata.value) {
+              metadata.value = {};
+            }
+            metadata.value.modelInfo = {
+              provider: model.provider || '',
+              modelType: model.modelType || '',
+              modelName: model.modelName || ''
+            };
+            formState.metadata = JSON.stringify(metadata.value);
+          }
+        } catch (e) {
+          console.error('获取模型信息失败', e);
+        }
+      }
+      
+      function openPromptApps() {
+        aiPromptSelectModalOpen(true,{});
+      }
+      /**
+       * 获取记忆库的数据
+       */
+      function getMemoryDataById(id) {
+        queryKnowledgeById({id: id}).then((res) =>{
+          if(res.success && res.result){
+            memoryData.value = res.result;
+          } else {
+            memoryData.value = { name: '该知识库已被删除', id: id, isDelete: true };
+          }
+        })
+      }
+      //================================================ begin 变量和记忆提示词功能 =========================================================
+      /**
+       * 添加变量
+       */
+      function handleAddVariable() {
+        aiVariablesModalOpen(true,{
+          variables: formState.variables
+        })
+      }
+
+      /**
+       * 变量返回事件
+       * 
+       * @param values
+       */
+      function handleVariablesOk(values) {
+        if(values){
+          variablesList.value = values;
+          formState.variables = JSON.stringify(values);
+        }else{
+          formState.variables = "";
+          variablesList.value = [];
+        }
+      }
+
+      /**
+       * 是否开启会话模式返回值
+       * @param checked
+       */
+      function handleMemoryChange(checked) {
+        if(checked){
+          formState.izOpenMemory = 1;
+        } else {
+          formState.izOpenMemory = 0;
+        }
+      }
+
+      /**
+       * 记忆和变量提示词
+       */
+      async function generateVariablePrompt() {
+        formState.memoryPrompt = '';
+        memoryLoading.value = true;
+        let readableStream = await generateMemoryByAppId({ variables: formState.variables, memoryId: formState.memoryId }).catch(() => {
+          memoryLoading.value = false;
+        });
+        const reader = readableStream.getReader();
+        const decoder = new TextDecoder('UTF-8');
+        let buffer = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+          let result = decoder.decode(value, { stream: true });
+          const lines = result.split('\n\n');
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              const content = line.replace('data:', '').trim();
+              if(!content){
+                continue;
+              }
+              if(!content.endsWith('}')){
+                buffer = buffer + line;
+                continue;
+              }
+              buffer = "";
+              renderText(content)
+            } else {
+              if(!line) {
+                continue;
+              }
+              if(!line.endsWith('}')) {
+                buffer = buffer + line;
+                continue;
+              }
+              buffer = "";
+              renderText(line)
+            }
+          }
+        }
+      }
+
+      /**
+       * 渲染文本
+       *
+       * @param item
+       */
+      function renderText(item) {
+        try {
+          let parse = JSON.parse(item);
+          if (parse.event == 'MESSAGE') {
+            formState.memoryPrompt += parse.data.message;
+            if(memoryLoading.value){
+              memoryLoading.value = false;
+            }
+          }
+          if (parse.event == 'MESSAGE_END') {
+            memoryLoading.value = false;
+          }
+          if (parse.event == 'ERROR') {
+            formState.memoryPrompt = parse.data.message ? parse.data.message: '生成失败，请稍后重试！'
+            memoryLoading.value = false;
+          }
+        } catch (error) {
+          console.log('Error parsing update:', error);
+        }
+      }
+      //================================================ end 变量和记忆提示词功能 =========================================================
+
+      //================================================ begin 开启绘画 =========================================================
+      /**
+       * 开启会话能力回调
+       */
+      function handleDrawChange(checked){
+        if(checked){
+          metadata.value.izDraw = "1";
+        }else{
+          metadata.value.izDraw = "0";
+        }
+        formState.metadata = JSON.stringify(metadata.value);
+      }
+
+      /**
+       * 会话模型改变回调
+       */
+      function handleDrawModelChange(val){
+        metadata.value.drawModelId = val;
+        formState.metadata = JSON.stringify(metadata.value);
+      }
+      //================================================ end 开启绘画 ========================================================
+
+      //================================================ begin 显示工具调用过程 =========================================================
+      /**
+       * 显示工具调用过程开关回调
+       */
+      function handleShowToolProcessChange(checked){
+        if(checked){
+          metadata.value.showToolProcess = "1";
+        }else{
+          metadata.value.showToolProcess = "0";
+        }
+        formState.metadata = JSON.stringify(metadata.value);
+      }
+      //================================================ end 显示工具调用过程 ========================================================
+
+      return {
+        registerModal,
+        title,
+        isRelease,
+        handleOk,
+        handleCancel,
+        appTypeOption,
+        type,
+        handleTypeClick,
+        formState,
+        validatorRules,
+        labelCol,
+        wrapperCol,
+        validateInfos,
+        handleAddKnowledgeIdClick,
+        handleAddMcpClick,
+        registerKnowledgeModal,
+        registerMcpModal,
+        knowledgeDataList,
+        pluginDataList,
+        plugins,
+        knowledge,
+        handleSuccess,
+        handleMcpSuccess,
+        handleDeleteKnowledge,
+        handleDeleteMcp,
+        uuid,
+        prologueTextAreaBlur,
+        prologue,
+        appId,
+        visibleChange,
+        handleParamSettingClick,
+        registerParamsSettingModal,
+        handleParamsSettingOk,
+        registerFlowModal,
+        handleAddFlowSuccess,
+        handleAddFlowClick,
+        flowData,
+        handleDeleteFlow,
+        getImage,
+        handleEdit,
+        registerAiAppModal,
+        handelEditSuccess,
+        presetQuestionEnd,
+        presetQuestionList,
+        presetQuestionAddClick,
+        deleteQuestionClick,
+        onBlur,
+        onFocus,
+        disabledDrag,
+        questionChange,
+        presetQuestion,
+        generatedPrompt,
+        registerAiAppPromptModal,
+        handleAiAppPromptOk,
+        quickCommandList,
+        quickCommandEnd,
+        registerAiAppCommandModal,
+        quickCommandAddClick,
+        handleAiAppCommandOk,
+        editCommandClick,
+        handleAiAppCommandUpdateOk,
+        deleteCommandClick,
+        quickCommand,
+        getFlowImage,
+        metadata,
+        multiSessionChecked,
+        handleMultiSessionChange,
+        pluginIds,
+        settingsModalRef,
+        flowInputs,
+        conversationSettings,
+        hasExtraFlowInputs,
+        handleEditSettings,
+        handleSettingsOk,
+        handleModelIdChange,
+        flowDataList,
+        multiple,
+        memoryData,
+        knowledgeMultiple,
+        registerAiPromptSelectModal,
+        openPromptApps,
+        handleAddVariable,
+        handleVariablesOk,
+        registerVariablesModal,
+        variablesList,
+        generateVariablePrompt,
+        izOpenMemoryChecked,
+        memoryLoading,
+        handleMemoryChange,
+        memoryActiveKey,
+        izDrawChecked,
+        handleDrawChange,
+        handleDrawModelChange,
+        showToolProcessChecked,
+        handleShowToolProcessChange,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+
+  .orchestration,.view{
+    color: #0a3069;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+
+  .setting-left {
+    padding: 20px;
+    overflow-y: auto;
+    height: (100vh - 15px);
+  }
+
+  .setting-right {
+    overflow-y: auto;
+    height: (100vh - 15px);
+    border-left: 1px solid #dee0e3;
+  }
+
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-form-item .ant-form-item-label > label) {
+    width: 100%;
+  }
+
+  .knowledge-img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .flow-name{
+    font-size: 14px;
+    font-weight: bold;
+    color: #354052;
+    width: calc(100% - 20px);
+    overflow: hidden;
+    align-content: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: grid;
+  }
+  .knowledge-name {
+    margin-left: 4px;
+  }
+
+  .knowledge-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+
+  .knowledge-icon {
+    display: none !important;
+    position: relative;
+    top: 6px;
+  }
+
+  .knowledge-card:hover {
+    .knowledge-icon {
+      display: block !important;
+    }
+  }
+  .header-img{
+    width: 35px;
+    height: 35px;
+    border-radius: 10px;
+  }
+  .flex{
+    display: flex;
+  }
+  .header-name{
+    color:#354052;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 300px;
+    margin-left: 10px;
+    align-content: center;
+  }
+  .prompt-back{
+    background-color: #eef4ff;
+    border-radius: 12px;
+    padding: 2px;
+    border: 1px solid #77B2F8;
+    box-sizing: border-box;
+    margin-left: 5px;
+    textarea{
+      min-height: 250px;
+      max-height: 400px;
+      border: none !important;
+    }
+  }
+  .prompt-title-padding{
+    margin-left: 14px;
+    height: 50px;
+    align-content: center;
+  }
+  .prologue-chunk{
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 10px 2px 10px;
+    box-sizing: border-box;
+  }
+
+  .prologue-chunk-edit{
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 0 2px 0;
+    box-sizing: border-box;
+  }
+  .mt-10{
+    margin-top: 10px;
+  }
+  :deep(.ant-form-item-label){
+    padding: 0 !important;
+  }
+
+  :deep(.ant-form-item-required){
+    margin-left: 4px !important;
+  }
+  .knowledge-txt{
+    color: #354052;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 12px
+  }
+  .item-title{
+    color: #111928;
+    font-weight: 400;
+  }
+  :deep(.ant-form-item){
+    margin-bottom: 5px;
+  }
+  :deep(.vditor){
+    border: none;
+  }
+  :deep(.vditor-sv){
+    font-size: 14px;
+  }
+  :deep(.vditor-sv:focus){
+    background-color: #ffffff;
+  }
+  .space-between{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    button{
+      padding: 0 6px;
+      height: 25px;
+      color: #155AEF !important;
+      margin-right: 10px;
+      border: none;
+    }
+  }
+  .ellipsis{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .quick-command{
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    justify-content: space-between;
+    background-color: #ffffff;
+    padding: 4px 8px 4px;
+    align-items: center;
+    align-content: center;
+    align-self: center;
+    border-radius: 8px;
+    height: 40px;
+    .quick-command-icon{
+      display: none;
+    }
+  }
+  .quick-command:hover{
+    background-color: #EFF0F8;
+    .quick-command-icon{
+      display: flex;
+    }
+  }
+  .data-empty-text{
+    color: #757c8f;
+    margin-left: 10px;
+  }
+  .mcp-warning-tip {
+    display: flex;
+    align-items: center;
+    color: #fa8c16;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+  }
+  .flow-icon{
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+  .text-status{
+    font-size: 12px;
+    color: #676F83;
+  }
+  .tag-text {
+    display: flow;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 20px;
+    font-size: 12px;
+    color: #3a3f4f;
+  }
+  .tag-input{
+    align-self: center;
+    color: #737c97;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin-right: 6px;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .tags-meadata{
+    padding-inline: 2px;
+    border-radius: 4px;
+    display: flex;
+    font-weight: 500;
+    max-width: 100%;
+  }
+  .text-desc {
+    width: 100%;
+    font-weight: 400;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+    font-size: 12px;
+    color: #676F83;
+  }
+</style>
+<style lang="less">
+  .ai-app-edit-modal{
+    .ant-modal .ant-modal-header{
+      padding: 13px 32px !important;
+    }
+    .jeecg-basic-modal-close > span{
+      margin-left: 0;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/components/AiUserVariablesModal.vue b/src/views/super/airag/aiapp/components/AiUserVariablesModal.vue
new file mode 100644
index 0000000..8409298
--- /dev/null
+++ b/src/views/super/airag/aiapp/components/AiUserVariablesModal.vue
@@ -0,0 +1,185 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户变量" :width="1000" @ok="handleSubmit" destroyOnClose>
+    <div class="p-4">
+      <div class="mb-4 text-gray-500"> 用于存储每个用户使用项目过程中，需要持久化存储和读取的数据，如用户的语言偏好、个性化设置等。 </div>
+
+      <JVxeTable
+        ref="tableRef"
+        toolbar
+        dragSort
+        :maxHeight="500"
+        :columns="columns"
+        :dataSource="dataSource"
+        :toolbarConfig="{ btns: ['remove', 'clearSelection'] }"
+      >
+        <template #toolbarSuffix>
+          <a-button type="primary" @click="handleAdd">
+            <Icon icon="ant-design:plus-outlined" />
+            新增
+          </a-button>
+        </template>
+
+        <template #action="props">
+          <div class="action-group">
+            <a-switch v-model:checked="props.row.enable" checked-children="开" un-checked-children="关" size="small" class="ml-2" />
+
+            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(props)">
+              <Icon icon="ant-design:delete-outlined" class="cursor-pointer hover:text-red-500 ml-2" size="18" color="red" />
+            </a-popconfirm>
+          </div>
+        </template>
+      </JVxeTable>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { Icon } from '/src/components/Icon';
+  import { Button, Checkbox, Switch, Popconfirm } from 'ant-design-vue';
+  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/src/components/jeecg/JVxeTable/types';
+  import { useMessage } from '/src/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'AiUserVariablesModal',
+    components: {
+      BasicModal,
+      Icon,
+      AButton: Button,
+      ACheckbox: Checkbox,
+      ASwitch: Switch,
+      APopconfirm: Popconfirm,
+    },
+    emits: ['register', 'ok'],
+    setup(props, { emit }) {
+      const { createMessage } = useMessage();
+      const tableRef = ref<JVxeTableInstance>();
+
+      // 定义列配置
+      const columns = ref<JVxeColumn[]>([
+        {
+          title: '名称',
+          key: 'name',
+          type: JVxeTypes.input,
+          width: 200,
+          placeholder: '请输入变量名',
+          validateRules: [
+            { required: true, message: '名称不能为空' },
+            { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '仅支持字母、数字和下划线，且以字母开头' },
+          ],
+        },
+        {
+          title: '描述',
+          key: 'description',
+          type: JVxeTypes.input,
+          width: 300,
+          placeholder: '字段描述',
+        },
+        {
+          title: '默认值',
+          key: 'defaultValue',
+          type: JVxeTypes.input,
+          width: 200,
+          placeholder: '默认值',
+        },
+        {
+          title: '操作',
+          key: 'action',
+          type: JVxeTypes.slot,
+          slotName: 'action',
+          width: 220,
+          align: 'center',
+        },
+      ]);
+
+      const dataSource = ref<any[]>([]);
+
+      const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
+        // 如果传入了已有数据，进行初始化
+        if (data && data.variables) {
+          dataSource.value = JSON.parse(data.variables);
+        } else {
+          dataSource.value = [];
+        }
+      });
+
+      // 新增行
+      const handleAdd = () => {
+        if (dataSource.value.length > 9) {
+          createMessage.warn('最多支持10个变量！');
+          return;
+        }
+        tableRef.value?.addRows({
+          name: '',
+          description: '',
+          defaultValue: '',
+          enable: true,
+        });
+      };
+
+      // 删除行
+      const handleDelete = (props) => {
+        tableRef.value?.removeRows(props.row);
+      };
+
+      const handleSubmit = async () => {
+        // 校验表格
+        const errMap = await tableRef.value?.validateTable();
+        if (errMap) {
+          createMessage.error('请检查表单填写是否正确');
+          return;
+        }
+
+        // 获取全量数据
+        const tableData = tableRef.value?.getTableData();
+        console.log('保存用户变量:', tableData);
+
+        closeModal();
+        emit('ok', tableData);
+      };
+
+      return {
+        registerModal,
+        tableRef,
+        columns,
+        dataSource,
+        handleAdd,
+        handleDelete,
+        handleSubmit,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .p-4 {
+    padding: 1rem;
+  }
+
+  .mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .text-gray-500 {
+    color: #6b7280;
+  }
+
+  .ml-2 {
+    margin-left: 0.5rem;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .hover\:text-red-500:hover {
+    color: #ef4444;
+  }
+
+  .action-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/super/airag/aiapp/img/ailogo.png b/src/views/super/airag/aiapp/img/ailogo.png
new file mode 100644
index 0000000..f63c9d3
Binary files /dev/null and b/src/views/super/airag/aiapp/img/ailogo.png differ
diff --git a/src/views/super/airag/aiapp/img/iconWebEmbedded.png b/src/views/super/airag/aiapp/img/iconWebEmbedded.png
new file mode 100644
index 0000000..187c602
Binary files /dev/null and b/src/views/super/airag/aiapp/img/iconWebEmbedded.png differ
diff --git a/src/views/super/airag/aiapp/img/webEmbedded.png b/src/views/super/airag/aiapp/img/webEmbedded.png
new file mode 100644
index 0000000..53038f0
Binary files /dev/null and b/src/views/super/airag/aiapp/img/webEmbedded.png differ
diff --git a/src/views/super/airag/aicloth/AiClothChange.data.ts b/src/views/super/airag/aicloth/AiClothChange.data.ts
new file mode 100644
index 0000000..3451af2
--- /dev/null
+++ b/src/views/super/airag/aicloth/AiClothChange.data.ts
@@ -0,0 +1,91 @@
+import { FormSchema } from '@/components/Form';
+
+/**
+ * AI换衣 - 生成图片表单
+ */
+export const clothImageFormSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: ['1、需要选择已激活的图像模型', '2、当前推荐通义万象模型 (wan2.5-i2i-preview)', '3、建议上传清晰的模特图和服装图以获得最佳效果'],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id",
+      placeholder: '请选择图像模型',
+    },
+  },
+  {
+    field: 'modelImage',
+    label: '模特图片',
+    component: 'JImageUpload',
+    required: true,
+    componentProps: {
+      fileMax: 1,
+      text: '上传模特',
+    },
+    helpMessage: ['上传模特图片，建议使用全身照，正面清晰'],
+  },
+
+  {
+    field: 'clothUpload',
+    label: '服装',
+    slot: 'clothUpload',
+    component: 'Input',
+    required: false,
+  },
+  {
+    field: 'userPrompt',
+    label: '提示词',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      placeholder: '在此输入你的提示词，或使用示例快速填充',
+    },
+    required: true,
+  },
+];
+
+/**
+ * AI换衣 - 生成视频表单
+ */
+export const clothVideoFormSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: ['1、需要选择已激活的视频模型', '2、建议选择支持图生视频的模型'],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'VIDEO' and activate_flag = 1,name,id",
+      placeholder: '请选择视频模型',
+    },
+  },
+  {
+    field: 'modelImage',
+    label: '模特图片',
+    component: 'JImageUpload',
+    componentProps: {
+      fileMax: 1,
+      text: '上传模特',
+    },
+    helpMessage: ['上传模特图片，建议使用全身照，正面清晰'],
+  },
+  {
+    field: 'clothUpload',
+    label: '',
+    slot: 'clothUpload',
+    component: 'Input',
+    required: false,
+  },
+  {
+    field: 'userPrompt',
+    label: '自定义提示词',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      placeholder: '在此输入你的提示词，或使用下方示例快速填充',
+    },
+    required: false,
+  },
+];
diff --git a/src/views/super/airag/aicloth/AiClothChange.less b/src/views/super/airag/aicloth/AiClothChange.less
new file mode 100644
index 0000000..7a0f8ca
--- /dev/null
+++ b/src/views/super/airag/aicloth/AiClothChange.less
@@ -0,0 +1,372 @@
+.ai-cloth-change-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 12px 16px 16px;
+  background-color: #f0f2f5;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  // 示例按钮行（单行显示，pill 样式）
+  .examples-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 8px 0 12px 0;
+    overflow-x: auto; /* 小屏幕时可以横向滚动 */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .example-btn {
+    border-radius: 20px !important;
+    border: 1px solid #2b8fff !important;
+    color: #2b8fff !important;
+    background: #fff !important;
+    padding: 6px 14px !important;
+    height: 36px !important;
+    line-height: 22px !important;
+    box-shadow: none !important;
+    white-space: nowrap;
+  }
+
+  .example-btn:hover {
+    background: rgba(43, 143, 255, 0.06) !important;
+    border-color: #1a6fe6 !important;
+    color: #1a6fe6 !important;
+  }
+
+  //顶部标题区
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    background: #fff;
+    padding: 16px 16px;
+
+    .page-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2329;
+      margin: 0;
+      letter-spacing: 0.5px;
+    }
+
+    .header-desc {
+      font-size: 13px;
+      color: #8f959e;
+      margin: 0;
+      flex: 1;
+      text-align: right;
+    }
+  }
+
+  .cloth-change-wrapper {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  //左侧配置面板
+  .config-panel {
+    width: 420px;
+    min-width: 360px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .config-tabs {
+      padding: 16px 20px 0;
+
+      :deep(.ant-tabs-nav::before) {
+        border-bottom: none;
+      }
+      :deep(.ant-tabs-tab) {
+        padding: 8px 0;
+        margin: 0 24px 0 0;
+        font-size: 15px;
+        &.ant-tabs-tab-active .ant-tabs-tab-btn {
+          color: #00b96b;
+          font-weight: 600;
+        }
+      }
+      :deep(.ant-tabs-ink-bar) {
+        background: #00b96b;
+      }
+    }
+
+    .form-scroll {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 20px 8px;
+    }
+
+    .action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 20px 16px;
+      border-top: 1px solid #f0f0f0;
+
+      .gen-btn {
+        height: 40px;
+        padding: 0 40px;
+        font-size: 15px;
+        background: #00b96b;
+        border-color: #00b96b;
+        border-radius: 20px;
+        &:hover {
+          background: #00d97e;
+          border-color: #00d97e;
+        }
+      }
+    }
+
+    //单件服装上传
+    .cloth-upload-area {
+      width: 100%;
+      height: 200px;
+      border: 1.5px dashed #d9d9d9;
+      border-radius: 8px;
+      cursor: pointer;
+      overflow: hidden;
+      transition: border-color 0.2s;
+      margin-bottom: 16px;
+
+      &:hover {
+        border-color: #1890ff;
+      }
+
+      .upload-placeholder {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        background: #fafafa;
+
+        .upload-text {
+          font-size: 13px;
+          color: #aaa;
+        }
+      }
+
+      .uploaded-img-box {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .uploaded-img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+        }
+
+        .img-mask {
+          position: absolute;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.4);
+          display: none;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+
+        &:hover .img-mask {
+          display: flex;
+        }
+      }
+    }
+
+    //多件服装上传
+    .multi-cloth-container {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 16px;
+
+      .cloth-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .cloth-label {
+          font-size: 12px;
+          font-weight: 600;
+          color: #1f2329;
+        }
+
+        .upload-placeholder {
+          flex: 1;
+          border: 1.5px dashed #d9d9d9;
+          border-radius: 8px;
+          cursor: pointer;
+          overflow: hidden;
+          transition: border-color 0.2s;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          background: #fafafa;
+
+          &:hover {
+            border-color: #1890ff;
+          }
+
+          .upload-text {
+            font-size: 12px;
+            color: #aaa;
+          }
+        }
+
+        .uploaded-img-box {
+          position: relative;
+          flex: 1;
+          border-radius: 8px;
+          overflow: hidden;
+
+          .uploaded-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+          }
+
+          .img-mask {
+            position: absolute;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.4);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          }
+
+          &:hover .img-mask {
+            display: flex;
+          }
+        }
+      }
+    }
+
+    //视频提示
+    .ai-notice {
+      margin-top: 10px;
+
+      :deep(.ant-alert) {
+        font-size: 12px;
+        padding: 8px 12px;
+        border-radius: 6px;
+      }
+
+      :deep(.ant-alert-message) {
+        font-size: 12px;
+      }
+    }
+
+    //区块
+    .section-block {
+      margin-top: 16px;
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .section-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: #1f2329;
+        }
+      }
+    }
+  }
+
+  // 状态
+  .empty-state {
+    text-align: center;
+    color: #8f959e;
+    p {
+      margin-top: 16px;
+    }
+  }
+
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  // 结果展示
+  .result-image-wrapper,
+  .result-video-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .result-image,
+    .result-video {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      object-fit: contain;
+    }
+
+    .hover-actions {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      border-radius: 8px;
+      backdrop-filter: blur(2px);
+    }
+
+    &:hover .hover-actions {
+      display: flex;
+    }
+  }
+
+  //右侧预览面板
+  .preview-panel {
+    flex: 1;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .preview-content {
+      flex: 1;
+      background: #f7f8fc;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      margin: 16px;
+    }
+  }
+}
diff --git a/src/views/super/airag/aicloth/AiClothChange.vue b/src/views/super/airag/aicloth/AiClothChange.vue
new file mode 100644
index 0000000..d4cc0a0
--- /dev/null
+++ b/src/views/super/airag/aicloth/AiClothChange.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="ai-cloth-change-page">
+    <!-- 顶部标题区 -->
+    <div class="page-header">
+      <h1 class="page-title">AI 换衣</h1>
+      <div class="header-desc">将模特图片和服装图片上传，AI自动生成换衣效果</div>
+    </div>
+
+    <div class="cloth-change-wrapper">
+      <!-- 左侧配置面板 -->
+      <div class="config-panel">
+        <!-- 顶部 Tab：生成图片 / 生成视频 -->
+        <div class="config-tabs">
+          <a-tabs v-model:activeKey="genType" :tabBarStyle="{ margin: 0 }">
+            <a-tab-pane key="image" tab="生成图片" />
+            <a-tab-pane key="video" tab="生成视频" />
+          </a-tabs>
+        </div>
+
+        <div class="form-scroll">
+          <div class="examples-row" role="toolbar" aria-label="示例">
+            <a-button class="example-btn" type="default" @click.prevent="useExample1">示例：换整体服装</a-button>
+            <a-button class="example-btn" type="default" @click.prevent="useExample2">示例：上衣/裤子</a-button>
+          </div>
+          <!-- 模型选择 -->
+          <BasicForm @register="registerForm">
+            <!-- 上传区域（单一上传组件支持多张图片） -->
+            <template #clothUpload>
+              <div class="section-block">
+                <JImageUpload v-model:value="clothUploads" :fileMax="2" text="上传服装" />
+              </div>
+            </template>
+          </BasicForm>
+
+          <!-- 视频提示 -->
+          <div v-if="genType === 'video'" class="ai-notice">
+            <a-alert message="视频生成可能需要较长时间，请耐心等待~" type="info" show-icon :closable="false" />
+          </div>
+        </div>
+
+        <!-- 底部生成按钮 -->
+        <div class="action-bar">
+          <a-button type="primary" size="large" block class="gen-btn" :loading="loading" @click="handleGenerate"> 生成 </a-button>
+        </div>
+      </div>
+
+      <!-- 右侧结果展示 -->
+      <div class="preview-panel">
+        <div class="preview-content">
+          <div v-if="!generatedResult && !loading" class="empty-state">
+            <Icon icon="ant-design:picture-outlined" size="64" color="#ccc" />
+            <p>在左侧配置后点击「生成」</p>
+          </div>
+
+          <div v-if="loading" class="loading-state">
+            <a-spin size="large" :tip="`正在${genType === 'image' ? '生成图片' : '生成视频'}，请稍候...`" />
+          </div>
+
+          <!-- 图片结果 -->
+          <div v-if="genType === 'image' && generatedResult && !loading" class="result-image-wrapper group">
+            <img :src="generatedResult" class="result-image" alt="换衣结果" />
+            <div class="hover-actions">
+              <a-button type="primary" ghost @click="previewVisible = true"> <Icon icon="ant-design:eye-outlined" /> 预览 </a-button>
+              <a-button type="primary" ghost @click="handleDownload"> <Icon icon="ant-design:download-outlined" /> 下载 </a-button>
+            </div>
+          </div>
+
+          <!-- 视频结果 -->
+          <div v-if="genType === 'video' && generatedResult && !loading" class="result-video-wrapper group">
+            <video ref="videoRef" :src="generatedResult" controls class="result-video" />
+            <div class="hover-actions">
+              <a-button type="primary" ghost @click="handleDownload"> <Icon icon="ant-design:download-outlined" /> 下载 </a-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ImageViewer v-if="previewVisible" :imageUrl="generatedResult" @hide="previewVisible = false" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import { BasicForm, useForm, JImageUpload } from '@/components/Form';
+  import { clothImageFormSchema, clothVideoFormSchema } from './AiClothChange.data';
+  import ImageViewer from '../aiapp/chat/components/ImageViewer.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Icon } from '@/components/Icon';
+  import { defHttp } from '@/utils/http/axios';
+  import { useGlobSetting } from '@/hooks/setting';
+
+  const TASK_ID_KEY = 'ai_cloth_task_id';
+
+  const { createMessage } = useMessage();
+  const { domainUrl } = useGlobSetting();
+
+  //  状态
+  // 生成类型
+  const genType = ref<'image' | 'video'>('image');
+
+  // 上传的服装图片（JImageUpload 返回逗号拼接的路径字符串）
+  const clothUploads = ref<string>('');
+  const loading = ref(false);
+  const generatedResult = ref('');
+  const previewVisible = ref(false);
+  const videoRef = ref<HTMLVideoElement | null>(null);
+  let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // 表单
+  const [registerForm, { validate, resetSchema, getFieldsValue, setFieldsValue }] = useForm({
+    schemas: clothImageFormSchema,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  // 不再区分单件/多件，提示词可由用户自定义
+
+  watch(genType, (val) => {
+    generatedResult.value = '';
+    resetSchema(val === 'image' ? clothImageFormSchema : clothVideoFormSchema);
+  });
+
+  /**
+   * 构建提示词
+   * @param values
+   */
+  function buildPrompt(values: any): string {
+    // 若用户自定义了提示词则以用户输入为主（仍会在开头列出图的顺序说明）
+    const userPrompt: string = (values.userPrompt || '').toString().trim();
+    // 如果用户输入了提示词，则把用户提示放在后面，不生成自动 prompt 内容
+    if (userPrompt) {
+      return `用户提示:\n${userPrompt}`;
+    }
+  }
+  
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  /** 轮询查询任务结果 */
+  function startPolling(taskId: string) {
+    const poll = () => {
+      defHttp
+        .get({ url: `/airag/chat/getAiPosterResult/${taskId}` }, { isTransformResponse: false })
+        .then((res) => {
+          if (res.success) {
+            if (res.result === 'pending' || res.result === null) {
+              pollTimer = setTimeout(poll, 3000);
+            } else {
+              const reg = /#\s*{\s*domainURL\s*}/g;
+              generatedResult.value = (res.result as string).replace(reg, domainUrl + '/sys/common/static');
+              loading.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              createMessage.success(genType.value === 'image' ? '图片生成成功！' : '视频生成成功！');
+            }
+          } else {
+            loading.value = false;
+            localStorage.removeItem(TASK_ID_KEY);
+            createMessage.warning(res.message || '生成失败！');
+          }
+        })
+        .catch(() => {
+          pollTimer = setTimeout(poll, 3000);
+        });
+    };
+    poll();
+  }
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+
+  /**
+   * 生成
+   */
+  async function handleGenerate() {
+    // 校验服装图（从 clothUploads 解析）
+    const validCloth = (clothUploads.value || '').split(',').filter(Boolean);
+    if (validCloth.length === 0) {
+      createMessage.warning('请上传服装图片');
+      return;
+    }
+
+    try {
+      const values = await validate();
+      loading.value = true;
+      generatedResult.value = '';
+
+      // 组装图片 URL（模特 + 服装），按顺序：模特图为图一，后面依次为服装图片（图二/图三）
+      const imgUrls: string[] = [];
+      if (values.modelImage) {
+        const modelFirst = (values.modelImage || '').toString().split(',')[0];
+        if (modelFirst) imgUrls.push(modelFirst);
+      }
+      imgUrls.push(...validCloth);
+
+      if (genType.value === 'image') {
+        values.imageSize = '720*1280';
+      } else {
+        createMessage.info('敬请期待');
+        loading.value = false;
+        return;
+      }
+      const prompt = buildPrompt(values);
+
+      const params: Record<string, any> = {
+        drawModelId: values.drawModelId,
+        //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+        content: prompt,
+        imageUrl: imgUrls.join(','),
+        //update-end---author:wangshuai ---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+        type: genType.value === 'image' ? 'cloth_image' : 'cloth_video',
+        imageSize: values.imageSize,
+      };
+
+      //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+      const res = await defHttp.post(
+        { url: '/airag/chat/genAiPosterAsync', params },
+        { isTransformResponse: false },
+      );
+      if (res.success && res.result) {
+        const taskId = res.result as string;
+        localStorage.setItem(TASK_ID_KEY, taskId);
+        startPolling(taskId);
+      } else {
+        loading.value = false;
+        createMessage.warning('提交任务失败！');
+      }
+      //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+    } catch {
+      loading.value = false;
+    }
+  }
+
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  onMounted(() => {
+    const savedTaskId = localStorage.getItem(TASK_ID_KEY);
+    if (savedTaskId) {
+      loading.value = true;
+      generatedResult.value = '';
+      startPolling(savedTaskId);
+    }
+  });
+
+  onUnmounted(() => {
+    if (pollTimer) {
+      clearTimeout(pollTimer);
+      pollTimer = null;
+    }
+  });
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+
+  /**
+   * 下载
+   */
+  function handleDownload() {
+    if (!generatedResult.value) {
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = generatedResult.value;
+    a.download = `ai-cloth-change-${Date.now()}.${genType.value === 'image' ? 'jpg' : 'mp4'}`;
+    a.target = '_blank';
+    a.click();
+  }
+
+  // 示例提示词操作
+  function useExample1() {
+    const example =
+      '图像映射: 图一=模特; 图二=服装素材。任务: 将图二整体替换到图一身上，保持模特面部与姿态不变，服装贴合自然，光影一致;服装贴合自然，光影一致，风格写实高清。请输出高质量合成图';
+    const modelImage = 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/model_1772695749704.jpg';
+    clothUploads.value = 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/dress_1772700962866.jpg';
+    setFieldsValue({ userPrompt: example, modelImage: modelImage });
+  }
+
+  function useExample2() {
+    const example =
+      '图像映射: 图一=模特; 图二=上衣素材; 图三=下装素材(可选)。任务: 仅将图二的上衣替换到图一上半身(胸部/肩部/袖口)，严格不修改面部或下半身; 对齐按肩线/胸围并融合光照; 风格写实高清。请输出高质量合成图';
+    const modelImage = 'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/model_1772695749704.jpg';
+    clothUploads.value =
+      'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/jacket_1772701290346.jpg,https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/pants_1772701320192.jpg';
+    setFieldsValue({ userPrompt: example, modelImage: modelImage });
+  }
+</script>
+
+<style lang="less" scoped>
+  @import 'AiClothChange.less';
+</style>
diff --git a/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.ts b/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.ts
new file mode 100644
index 0000000..3a7e7a0
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.ts
@@ -0,0 +1,137 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  //知识库管理
+  list = '/airag/knowledge/list',
+  save = '/airag/knowledge/add',
+  delete = '/airag/knowledge/delete',
+  queryById = '/airag/knowledge/queryById',
+  edit = '/airag/knowledge/edit',
+  rebuild = '/airag/knowledge/rebuild',
+  //知识库文档
+  knowledgeDocList = '/airag/knowledge/doc/list',
+  knowledgeEditDoc = '/airag/knowledge/doc/edit',
+  knowledgeDeleteBatchDoc = '/airag/knowledge/doc/deleteBatch',
+  knowledgeDeleteAllDoc = '/airag/knowledge/doc/deleteAll',
+  knowledgeRebuildDoc = '/airag/knowledge/doc/rebuild',
+  knowledgeEmbeddingHitTest = '/airag/knowledge/embedding/hitTest',
+}
+
+/**
+ * 查询知识库
+ * @param params
+ */
+export const list = (params) => {
+  return defHttp.get({ url: Api.list, params }, { isTransformResponse: false });
+};
+
+/**
+ * 根据id查询知识库
+ * @param params
+ */
+export const queryById = (params) => {
+  return defHttp.get({ url: Api.queryById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 新增知识库
+ * @param params
+ */
+export const saveKnowledge = (params) => {
+  return defHttp.post({ url: Api.save, params });
+};
+
+/**
+ * 编辑知识库
+ *
+ * @param params
+ */
+export const editKnowledge = (params) => {
+  return defHttp.put({ url: Api.edit, params });
+};
+
+/**
+ * 删除知识库
+ */
+export const deleteModel = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除名称为'+params.name+'的知识库吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 查询知识库详情
+ * @param params
+ */
+export const knowledgeDocList = (params) => {
+  return defHttp.get({ url: Api.knowledgeDocList, params }, { isTransformResponse: false });
+};
+
+/**
+ * 知识库向量化
+ *
+ * @param params
+ */
+export const rebuild = (params) => {
+  return defHttp.put({ url: Api.rebuild, params,timeout: 2 * 60 * 1000 }, { joinParamsToUrl: true, isTransformResponse: false });
+};
+
+/**
+ * 新增知识库
+ * @param params
+ */
+export const knowledgeSaveDoc = (params) => {
+  return defHttp.post({ url: Api.knowledgeEditDoc, params });
+};
+
+/**
+ * 文档向量化
+ * @param params
+ */
+export const knowledgeRebuildDoc = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.knowledgeRebuildDoc, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除文档
+ *
+ * @param params
+ * @param handleSuccess
+ */
+export const knowledgeDeleteBatchDoc = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.knowledgeDeleteBatchDoc, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除文档
+ *
+ * @param params
+ * @param handleSuccess
+ */
+export const knowledgeDeleteAllDoc = (knowId: string, handleSuccess) => {
+  return defHttp.delete({ url: Api.knowledgeDeleteAllDoc, params: {knowId} }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 命中测试
+ * @param params
+ */
+export const knowledgeEmbeddingHitTest = (params) => {
+  let url = Api.knowledgeEmbeddingHitTest + '/' + params.knowId;
+  return defHttp.get({ url: url, params }, { isTransformResponse: false });
+};
diff --git a/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.util.tsx b/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.util.tsx
new file mode 100644
index 0000000..29aabb7
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/AiKnowledgeBase.api.util.tsx
@@ -0,0 +1,24 @@
+import {knowledgeDeleteAllDoc} from "./AiKnowledgeBase.api";
+import {useMessage} from "@/hooks/web/useMessage";
+
+const {createConfirmSync} = useMessage();
+
+// 清空文档
+export async function doDeleteAllDoc(knowledgeId: string, reload: () => void) {
+  const flag = await createConfirmSync({
+    title: '清空文档',
+    content: () => (
+      <p>
+        <span>确定要清空所有文档吗？</span>
+        <br/>
+        <span style="color: #ee0000;">
+          此操作会删除所有已录入的文档，并且不能恢复，请谨慎操作
+        </span>
+      </p>
+    ),
+  });
+  if (!flag) {
+    return;
+  }
+  knowledgeDeleteAllDoc(knowledgeId, reload)
+}
diff --git a/src/views/super/airag/aiknowledge/AiKnowledgeBase.data.ts b/src/views/super/airag/aiknowledge/AiKnowledgeBase.data.ts
new file mode 100644
index 0000000..0000347
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/AiKnowledgeBase.data.ts
@@ -0,0 +1,330 @@
+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+/**
+ * 表单
+ */
+export const formSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '知识库名称',
+    field: 'name',
+    required: true,
+    componentProps: {
+      placeholder: '请输入知识库名称',
+      //是否展示字数
+      showCount: true,
+      maxlength: 64,
+    },
+    component: 'Input',
+  },
+  {
+    label: '知识库描述',
+    field: 'descr',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '描述知识库的内容，详尽的描述将帮助AI能深入理解该知识库的内容，能更准确的检索到内容，提高该知识库的命中率。',
+      //是否展示字数
+      showCount: true,
+      maxlength: 256,
+    },
+  },
+  {
+    label: '向量模型',
+    field: 'embedId',
+    required: true,
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: "airag_model where model_type = 'EMBED' and activate_flag = 1,name,id",
+    },
+  },
+  {
+    label: '状态',
+    field: 'status',
+    required: true,
+    component: 'JDictSelectTag',
+    componentProps: {
+      options: [
+        { label: '启用', value: 'enable' },
+        { label: '禁用', value: 'disable' },
+      ],
+      type: 'radioButton',
+    },
+    defaultValue: 'enable',
+  },
+  {
+    label: '类型',
+    field: 'type',
+    required: true,
+    component: 'JDictSelectTag',
+    componentProps: {
+      options: [
+        { label: '知识库', value: 'knowledge' },
+        { label: '记忆库', value: 'memory' },
+      ],
+      type: 'radioButton',
+    },
+    defaultValue: 'knowledge',
+  },
+  {
+    label: '分段策略',
+    field: 'enableSegment',
+    component: 'Switch',
+    defaultValue: false,
+    ifShow: ({ values }) => values.type !== 'memory',
+    componentProps: {
+      checkedChildren: '开启',
+      unCheckedChildren: '关闭',
+    },
+    helpMessage: '开启后，知识库里面的文档默认使用该分段策略；文档也可单独配置自己的分段策略',
+  },
+  {
+    label: '分段模式',
+    field: 'segmentStrategy',
+    component: 'RadioGroup',
+    defaultValue: 'auto',
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true,
+    componentProps: {
+      options: [
+        { label: '自动分段与清洗', value: 'auto' },
+        { label: '自定义', value: 'custom' },
+      ],
+    },
+  },
+  {
+    label: '分段标识符',
+    field: 'separator',
+    component: 'Select',
+    defaultValue: '\\n',
+    required: true,
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true && values.segmentStrategy === 'custom',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      options: [
+        { label: '换行', value: '\\n' },
+        { label: '2个换行', value: '\\n\\n' },
+        { label: '中文句号', value: '。' },
+        { label: '中文叹号', value: '！' },
+        { label: '中文问号', value: '？' },
+        { label: '英文句号', value: '.' },
+        { label: '英文叹号', value: '!' },
+        { label: '英文问号', value: '?' },
+        { label: '自定义', value: 'custom' },
+      ],
+    },
+  },
+  {
+    label: '自定义分隔符',
+    field: 'customSeparator',
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true && values.separator === 'custom' && values.segmentStrategy !== 'auto',
+  },
+  {
+    label: '分段最大长度',
+    field: 'maxSegment',
+    component: 'InputNumber',
+    defaultValue: 800,
+    required: true,
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true,
+    componentProps: {
+      min: 100,
+      max: 5000,
+    },
+  },
+  {
+    label: '分段重叠度%',
+    field: 'overlap',
+    component: 'InputNumber',
+    defaultValue: 10,
+    required: true,
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true,
+    componentProps: {
+      min: 0,
+      max: 90,
+    },
+  },
+  {
+    label: '文本预处理规则',
+    field: 'textRules',
+    component: 'CheckboxGroup',
+    defaultValue: [],
+    ifShow: ({ values }) => values.type !== 'memory' && values.enableSegment === true && values.segmentStrategy === 'custom',
+    componentProps: {
+      options: [
+        { label: '替换掉连续的空格、换行符和制表符', value: 'cleanSpaces' },
+        { label: '删除所有 URL 和电子邮箱地址', value: 'removeUrlsEmails' },
+      ],
+    },
+  },
+];
+
+//文档文本表单
+export const docTextSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '知识库id',
+    field: 'knowledgeId',
+    show: false,
+    component: 'Input',
+  },
+  {
+    label: '标题',
+    field: 'title',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '类型',
+    field: 'type',
+    required: true,
+    component: 'Input',
+    show: false
+  },
+  {
+    label: '内容',
+    field: 'content',
+    rules: [{ required: true, message: '请输入内容' }],
+    component: 'JMarkdownEditor',
+    componentProps: {
+      placeholder: "请输入内容",
+      preview:{ mode: 'view', action: [] }
+    },
+    ifShow:({ values})=>{
+      if(values.type === 'text'){
+        return true;
+      }
+      return false;
+    }
+  },
+  {
+    label: '文件',
+    field: 'filePath',
+    rules: [{ required: true, message: '请上传文件' }],
+    component: 'JUpload',
+    helpMessage:'支持txt、markdown、pdf、docx、xlsx、pptx',
+    componentProps:{
+      fileType: 'file',
+      maxCount: 1,
+      multiple: false,
+      text: '上传文档'
+    },
+    ifShow:({ values })=>{
+      if(values.type === 'file'){
+        return true;
+      }
+      return false;
+    }
+  },
+  {
+    label: '网页地址',
+    field: 'website',
+    rules: [
+      { required: true, message: '请输入网页URL' },
+      { pattern: /^https?:\/\//, message: '请输入正确的网页地址，以http://或https://开头' },
+    ],
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入网页URL，例如：https://help.jeecg.com/',
+    },
+    ifShow:({ values })=>{
+      if(values.type === 'web'){
+        return true;
+      }
+      return false;
+    }
+  },
+];
+
+/**
+ * 分段策略表单
+ */
+export const docSegmentSchema: FormSchema[] = [
+  {
+    label: '分段策略',
+    field: 'segmentStrategy',
+    component: 'RadioGroup',
+    defaultValue: 'auto',
+    componentProps: {
+      options: [
+        { label: '自动分段与清洗', value: 'auto' },
+        { label: '自定义', value: 'custom' },
+      ],
+    },
+  },
+  {
+    label: '分段标识符',
+    field: 'separator',
+    component: 'Select',
+    defaultValue: '\\n',
+    required: true,
+    ifShow: ({ values }) => values.segmentStrategy === 'custom',
+    componentProps: {
+      getPopupContainer: () => document.body,
+      options: [
+        { label: '换行', value: '\\n' },
+        { label: '2个换行', value: '\\n\\n' },
+        { label: '中文句号', value: '。' },
+        { label: '中文叹号', value: '！' },
+        { label: '中文问号', value: '？' },
+        { label: '英文句号', value: '.' },
+        { label: '英文叹号', value: '!' },
+        { label: '英文问号', value: '?' },
+        { label: '自定义', value: 'custom' },
+      ],
+    },
+  },
+  {
+    label: '',
+    field: 'customSeparator',
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => values.separator === 'custom' && values.segmentStrategy !== 'auto',
+  },
+  {
+    label: '分段最大长度',
+    field: 'maxSegment',
+    component: 'InputNumber',
+    defaultValue: 800,
+    required: true,
+    componentProps: {
+      min: 100,
+      max: 5000,
+    },
+  },
+  {
+    label: '分段重叠度%',
+    field: 'overlap',
+    component: 'InputNumber',
+    defaultValue: 10,
+    componentProps: {
+      min: 0,
+      max: 90,
+    },
+    required: true,
+  },
+  {
+    label: '文本预处理规则',
+    field: 'textRules',
+    component: 'CheckboxGroup',
+    defaultValue: [],
+    ifShow: ({ values }) => values.segmentStrategy === 'custom',
+    componentProps: {
+      options: [
+        { label: '替换掉连续的空格、换行符和制表符', value: 'cleanSpaces' },
+        { label: '删除所有 URL 和电子邮箱地址', value: 'removeUrlsEmails' },
+      ],
+    },
+  },
+];
+
diff --git a/src/views/super/airag/aiknowledge/AiKnowledgeBaseList.vue b/src/views/super/airag/aiknowledge/AiKnowledgeBaseList.vue
new file mode 100644
index 0000000..538c77b
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/AiKnowledgeBaseList.vue
@@ -0,0 +1,514 @@
+<!--知识库添加页面-->
+<template>
+  <div class="knowledge">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form
+        ref="formRef"
+        @keyup.enter.native="searchQuery"
+        :model="queryParam"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+        style="background-color: #f7f8fc"
+      >
+        <a-row :gutter="24">
+          <a-col :xl="7" :lg="7" :md="8" :sm="24">
+            <a-form-item name="name" label="知识库名称">
+              <JInput v-model:value="queryParam.name" placeholder="请输入知识库名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <a-row :span="24" class="knowledge-row">
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
+        <a-card class="add-knowledge-card" @click="handleAddKnowled">
+          <div class="flex">
+            <Icon icon="ant-design:plus-outlined" class="add-knowledge-card-icon" size="20"></Icon>
+            <span class="add-knowledge-card-title">创建知识库</span>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col v-if="knowledgeList && knowledgeList.length>0" :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in knowledgeList">
+        <a-card class="knowledge-card pointer" @click="handleDocClick(item)">
+          <div class="knowledge-header">
+            <div class="flex">
+              <img class="header-img" src="./icon/knowledge.png" />
+              <div class="header-text">
+                <span class="header-text-top header-name ellipsis" :title="item.name"> {{ item.name }} </span>
+                <span class="header-text-top"> 创建者：{{ item.createBy_dictText || item.createBy }} </span>
+              </div>
+            </div>
+          </div>
+          <div class="mt-10 text-desc">
+            <span>{{ item.descr || '暂无描述' }}</span>
+          </div>
+          <div class="knowledge-footer flex" style="justify-content: space-between">
+            <div style="width: calc(100% - 60px)" class="ellipsis">
+              <Icon class="knowledge-footer-icon" icon="ant-design:deployment-unit-outlined" size="14"></Icon>
+              <span :title="item.embedId_dictText">{{ item.embedId_dictText }}</span>
+            </div>
+            <div>
+              <a-tag v-if="item.type == 'memory'" color="orange" class="tag-style">记忆库</a-tag>
+              <a-tag v-else color="blue" class="tag-style">知识库</a-tag>
+            </div>
+          </div>
+          <div class="knowledge-btn">
+            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="(node) => node.parentNode">
+              <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>
+                <Icon icon="ant-design:ellipsis-outlined" size="16"></Icon>
+              </div>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item key="vectorization" @click.prevent.stop="handleVectorization(item.id)">
+                    <Icon icon="ant-design:retweet-outlined" size="16"></Icon>
+                    向量化
+                  </a-menu-item>
+                  <a-menu-item key="text" @click.prevent.stop="handleEditClick(item)">
+                    <Icon class="pointer" icon="ant-design:edit-outlined" size="16"></Icon>
+                    编辑
+                  </a-menu-item>
+                  <a-menu-item key="file" @click.prevent.stop="handleDelete(item)">
+                    <Icon class="pointer" icon="ant-design:delete-outlined" size="16"></Icon>
+                    删除
+                  </a-menu-item>
+                  <a-menu-item key="clear" @click.prevent.stop="onDeleteAllDoc(item)">
+                    <Icon icon="ant-design:delete-outlined" size="16"></Icon>
+                    清空文档
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="knowledgeList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+      :show-total="() => `共${total}条` "
+    />
+    <!--添加知识库弹窗-->
+    <KnowledgeBaseModal @register="registerModal" @success="reload"></KnowledgeBaseModal>
+    <!-- 知识库文档弹窗 -->
+    <AiragKnowledgeDocListModal @register="docListRegister"></AiragKnowledgeDocListModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { reactive, ref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { deleteModel, list, rebuild } from './AiKnowledgeBase.api';
+  import { doDeleteAllDoc } from "./AiKnowledgeBase.api.util";
+  import { Pagination } from 'ant-design-vue';
+  import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
+  import KnowledgeBaseModal from './components/AiKnowledgeBaseModal.vue';
+  import JSelectUser from '@/components/Form/src/jeecg/components/JSelectUser.vue';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import AiragKnowledgeDocListModal from './components/AiragKnowledgeDocListModal.vue';
+  import Icon from '@/components/Icon';
+  import { useMessage } from "@/hooks/web/useMessage";
+
+  export default {
+    name: 'KnowledgeBaseList',
+    components: {
+      Icon,
+      AiragKnowledgeDocListModal,
+      KnowledgeBaseModal,
+      JDictSelectTag,
+      JSelectUser,
+      JInput,
+      Pagination,
+    },
+    setup() {
+      //模型列表
+      const knowledgeList = ref([]);
+
+      //注册modal
+      const [registerModal, { openModal }] = useModal();
+      const [docListRegister, { openModal: openDocModal }] = useModal();
+
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //查询参数
+      const queryParam = reactive<any>({});
+      //查询区域label宽度
+      const labelCol = reactive({
+        xs: 24,
+        sm: 4,
+        xl: 6,
+        xxl: 6,
+      });
+      //查询区域组件宽度
+      const wrapperCol = reactive({
+        xs: 24,
+        sm: 20,
+      });
+      //查询区域表单的ref
+      const formRef = ref();
+      const { createMessage } = useMessage();
+
+      //页面初始化执行列表查询
+      reload();
+
+      /**
+       * 新增
+       */
+      async function handleAddKnowled() {
+        openModal(true, {});
+      }
+
+      /**
+       * 编辑
+       *
+       * @param item
+       */
+      function handleEditClick(item) {
+        console.log(item);
+        openModal(true, {
+          id: item.id,
+          isUpdate: true,
+        });
+      }
+
+      /**
+       * 重新加载数据
+       */
+      function reload() {
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          column: 'createTime',
+          order: 'desc'
+        };
+        Object.assign(params, queryParam);
+      
+        list(params).then((res) => {
+          if (res.success) {
+            knowledgeList.value = res.result.records;
+            total.value = res.result.total;
+          } else {
+            knowledgeList.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        reload();
+      }
+
+      /**
+       * 删除模型
+       * @param item
+       */
+      async function handleDelete(item) {
+        if(knowledgeList.value.length == 1 && pageNo.value > 1) {
+          pageNo.value = pageNo.value - 1;
+        }
+        await deleteModel({ id: item.id, name: item.name }, reload);
+      }
+
+      /**
+       * 清空文档
+       * @param item
+       */
+      async function onDeleteAllDoc(item) {
+        pageNo.value = 1;
+        return doDeleteAllDoc(item.id, reload);
+      }
+
+      /**
+       * 查询
+       */
+      function searchQuery() {
+        pageNo.value = 1;
+        reload();
+      }
+
+      /**
+       * 重置
+       */
+      function searchReset() {
+        formRef.value.resetFields();
+        queryParam.createBy = '';
+        pageNo.value = 1;
+        //刷新数据
+        reload();
+      }
+
+      /**
+       * 参数配置点击事件
+       *
+       * @param id
+       * @param type
+       */
+      //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+      function handleDocClick(item) {
+        openDocModal(true, { id: item.id, type: item.type, knowledgeMetadata: item.metadata });
+      //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+      }
+
+      /**
+       * 知识库向量化
+       * @param id
+       */
+      async function handleVectorization(id) {
+        rebuild({ knowIds: id }).then((res) =>{
+          if(res.success){
+            createMessage.success("操作成功，开始异步重建知识库，请稍后查看！");
+            reload();
+          }else{
+            createMessage.warning("向量化失败！");
+          }
+        }).catch(err=>{
+          createMessage.warning("向量化失败！");
+        });
+      }
+
+      return {
+        handleAddKnowled,
+        handleEditClick,
+        registerModal,
+        knowledgeList,
+        reload,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        handleDelete,
+        onDeleteAllDoc,
+        searchQuery,
+        searchReset,
+        queryParam,
+        labelCol,
+        wrapperCol,
+        formRef,
+        handleDocClick,
+        docListRegister,
+        handleVectorization,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .knowledge {
+    height: calc(100vh - 115px);
+    background: #f7f8fc;
+    padding: 24px;
+    overflow-y: auto;
+
+    .knowledge-row {
+      max-height: calc(100% - 100px);
+      margin-top: 20px;
+      overflow-y: auto;
+      .knowledge-header {
+        position: relative;
+        font-size: 14px;
+        height: 40px;
+        .header-img {
+          width: 34px;
+          height: 34px;
+          margin-right: 6px;
+        }
+        .header-text {
+          width: calc(100% - 80px);
+          overflow: hidden;
+          position: relative;
+          display: grid;
+          .header-name {
+            font-size: 14px !important;
+            font-weight: bold;
+            color: #354052 !important;
+          }
+          .header-text-top {
+            height: 22px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  .text-desc {
+    width: 100%;
+    font-weight: 400;
+    display: inline-block;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    height: 40px;
+    overflow: hidden;
+    font-size: 12px;
+    color: #676f83;
+  }
+  
+  .knowledge-footer{
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top: 16px;
+    .knowledge-footer-icon{
+      position: relative;
+      top: 2px
+    }
+    span{
+      margin-left: 2px;
+    }
+  }
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+
+  .mt-10 {
+    margin-top: 10px;
+  }
+
+  .ml-4 {
+    margin-left: 4px;
+  }
+
+  .knowledge-btn {
+    position: absolute;
+    right: 4px;
+    top: 6px;
+    height: auto;
+    display: none;
+  }
+  .add-knowledge-card {
+    margin-bottom: 20px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    cursor: pointer;
+    height: 152px;
+    width: calc(100% - 20px);
+    .add-knowledge-card-icon {
+      padding: 8px;
+      color: #1f2329;
+      background-color: #f5f6f7;
+      margin-right: 12px;
+    }
+    .add-knowledge-card-title {
+      font-size: 16px;
+      color:#1f2329;
+      font-weight: 400;
+      align-self: center;
+    }
+  }
+
+  .add-knowledge-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+  }
+
+  .knowledge-card {
+    margin-right: 20px;
+    margin-bottom: 20px;
+    height: 152px;
+    border-radius: 10px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+  }
+  .knowledge-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+    .knowledge-btn {
+      display: block;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .list-footer {
+    text-align: right;
+    margin-top: 5px;
+  }
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    :deep(.ant-form) {
+      background-color: transparent;
+    }
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+  }
+  
+  .model-icon{
+    background-color: unset;
+    border: none;
+    margin-right: 2px;
+  }
+  .model-icon:hover{
+    color: #000000;
+    background-color: #e9ecf2;
+    border: none;
+  }
+  .ant-dropdown-link{
+    font-size: 14px;
+    height: 24px;
+    padding: 0 7px;
+    border-radius: 4px;
+    align-content: center;
+    text-align: center;
+  }
+  
+  .ellipsis{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .tag-style{
+    margin-right: 5px;
+    height: 20px;
+    line-height: 18px;
+  }
+</style>
diff --git a/src/views/super/airag/aiknowledge/components/AiKnowledgeBaseModal.vue b/src/views/super/airag/aiknowledge/components/AiKnowledgeBaseModal.vue
new file mode 100644
index 0000000..81b85b1
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/components/AiKnowledgeBaseModal.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <template #title>
+         <span style="display: flex">
+          {{title}}
+          <a-tooltip title="AI知识库文档">
+            <a style="color: unset" href="https://help.jeecg.com/aigc/guide/knowledge" target="_blank">
+              <Icon style="position:relative;left:2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+            </a>
+          </a-tooltip>
+        </span>
+      </template>
+      <BasicForm @register="registerForm"></BasicForm>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { formSchema } from '../AiKnowledgeBase.data';
+  import { saveKnowledge, editKnowledge, queryById } from '../AiKnowledgeBase.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default {
+    name: 'KnowledgeBaseModal',
+    components: {
+      BasicForm,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const title = ref<string>('创建知识库');
+
+      //保存或修改
+      const isUpdate = ref<boolean>(false);
+
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        layout: 'vertical',
+        wrapperCol: { span: 24 },
+        labelCol: { span: 24 },
+      });
+
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        //重置表单
+        await resetFields();
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        title.value = isUpdate.value ? '编辑知识库' : '创建知识库';
+        if (unref(isUpdate)) {
+          let values = await queryById({ id: data.id });
+          //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          let record = { ...values.result };
+          // 解析 metadata 中的分段策略
+          if (record.metadata) {
+            try {
+              const meta = JSON.parse(record.metadata);
+              const hasSegment = !!(meta.enableSegment || meta.segmentStrategy || meta.maxSegment);
+              record.enableSegment = hasSegment;
+              if (hasSegment) {
+                record.segmentStrategy = meta.segmentStrategy || 'auto';
+                record.maxSegment = meta.maxSegment;
+                record.overlap = meta.overlap;
+                record.separator = meta.separator;
+                record.customSeparator = meta.customSeparator;
+                record.textRules = meta.textRules;
+              }
+            } catch (_e) {}
+          }
+          //表单赋值
+          await setFieldsValue(record);
+          //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+        }
+        setModalProps({ minHeight: 500, bodyStyle: { padding: '10px' } });
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        try {
+          setModalProps({ confirmLoading: true });
+          let values = await validate();
+          //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          // 将分段策略字段打包到 metadata
+          const { enableSegment, segmentStrategy, separator, customSeparator, maxSegment, overlap, textRules, ...rest } = values;
+          let params: any = { ...rest };
+          if (enableSegment) {
+            const meta: any = {
+              enableSegment: true,
+              segmentStrategy: segmentStrategy || 'auto',
+              maxSegment,
+              overlap,
+            };
+            if (segmentStrategy === 'custom') {
+              meta.separator = separator;
+              meta.customSeparator = customSeparator;
+              meta.textRules = textRules;
+            }
+            params.metadata = JSON.stringify(meta);
+          } else {
+            params.metadata = null;
+          }
+
+          if (!unref(isUpdate)) {
+            await saveKnowledge(params);
+          } else {
+            await editKnowledge(params);
+        //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          }
+          //关闭弹窗
+          closeModal();
+          //刷新列表
+          emit('success');
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      return {
+        registerModal,
+        registerForm,
+        title,
+        handleOk,
+        handleCancel,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/airag/aiknowledge/components/AiTextDescModal.vue b/src/views/super/airag/aiknowledge/components/AiTextDescModal.vue
new file mode 100644
index 0000000..dc3ca5f
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/components/AiTextDescModal.vue
@@ -0,0 +1,93 @@
+<!--手动录入text-->
+<template>
+  <BasicModal title="段落详情" destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" :footer="null">
+    <div class="p-2">
+      <div class="header">
+        <a-tag color="#a9c8ff">
+          <span>{{hitTextDescData.source}}</span>
+        </a-tag>
+      </div>
+      <div class="content">
+        <MarkdownViewer :value="hitTextDescData.content" />
+      </div>
+    </div>
+
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { MarkdownViewer } from '@/components/Markdown';
+  import { useGlobSetting } from "@/hooks/setting";
+
+  export default {
+    name: 'AiTextDescModal',
+    components: {
+      MarkdownViewer,
+      BasicForm,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      let hitTextDescData = ref<any>({})
+      
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        hitTextDescData.value.source = 'score' + ' ' + data.score.toFixed(2);
+        //替换图片宽度
+        data.content = replaceImageWith(data.content);
+        //替换图片domainUrl
+        data.content = replaceDomainUrl(data.content);
+        hitTextDescData.value.content = data.content;
+        setModalProps({ header: '300px' })
+      });
+      const { domainUrl } = useGlobSetting();
+      const replaceImageWith = markdownContent => {
+        // 支持图片设置width的写法 ![](/static/jimuImages/screenshot_1617252560523.png =100)
+        const regex = /!\[([^\]]*)\]\(([^)]+)=([0-9]+)\)/g;
+        return markdownContent.replace(regex, (match, alt, src, width) => {
+          let reg = /#\s*{\s*domainURL\s*}/g;
+          src = src.replace(reg,domainUrl);
+          return `<img src='${src}' alt='${alt}' width='${width}' />`;
+        });
+      };
+      
+      //替换domainURL
+      const replaceDomainUrl = markdownContent => {
+            const regex = /!\[([^\]]*)\]\(.*?#\s*{\s*domainURL\s*}.*?\)/g;
+            return markdownContent.replace(regex, (match) => {
+              let reg = /#\s*{\s*domainURL\s*}/g;
+              return match.replace(reg,domainUrl);
+            })
+      }
+      return {
+        registerModal,
+        hitTextDescData
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+  .header {
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+  .content {
+    margin-top: 20px;
+    max-height: 600px;
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+  .title-tag {
+    color: #477dee;
+  }
+</style>
diff --git a/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocListModal.vue b/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocListModal.vue
new file mode 100644
index 0000000..7701639
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocListModal.vue
@@ -0,0 +1,1085 @@
+<!--知识库文档列表-->
+<template>
+  <div class="p-2">
+    <BasicModal
+      wrapClassName="airag-knowledge-doc"
+      destroyOnClose
+      @register="registerModal"
+      :canFullscreen="false"
+      defaultFullscreen
+      :title="title"
+      :footer="null"
+    >
+      <a-layout style="height: 100%">
+        <a-layout-sider :style="siderStyle">
+          <a-menu v-model:selectedKeys="selectedKeys" mode="vertical" style="border: none" :items="menuItems" @click="handleMenuClick" />
+        </a-layout-sider>
+        <a-layout-content :style="contentStyle">
+          <div v-if="selectedKey === 'document'">
+            <div class="search-header" style="text-align: left;">
+              <a-space align="center" wrap>
+                <a-input
+                    class="search-input"
+                    v-model:value="searchText"
+                    placeholder="请输入文档名称，回车搜索"
+                    @pressEnter="searchTextEnter"
+                />
+                <template v-if="selectedRows.length > 0">
+                  <div>
+                    <span>已进入多选模式，当前选中</span>
+                    <a style="margin: 0 4px;"> {{ selectedRows.length }} </a>
+                    <span>条文档</span>
+                  </div>
+                  <div>
+                    <a @click="onClearSelected">清空选择</a>
+                    <a-divider type="vertical"/>
+                    <a @click="onDeleteBatch">批量删除</a>
+                  </div>
+                </template>
+              </a-space>
+            </div>
+            <a-row :span="24" class="knowledge-row">
+              <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-if="!type || type==='knowledge'">
+                <a-card class="add-knowledge-card" :bodyStyle="cardBodyStyle">
+                  <span style="line-height: 18px;font-weight: 500;color:#676f83;font-size: 12px">
+                    创建文档
+                    <a-tooltip title="知识库文档">
+                      <a style="color: unset" href="https://help.jeecg.com/aigc/guide/knowledge#4-%E7%9F%A5%E8%AF%86%E5%BA%93%E6%96%87%E6%A1%A3" target="_blank">
+                        <Icon style="position:relative;top:1px" icon="ant-design:question-circle-outlined" size="14"></Icon>
+                      </a>
+                    </a-tooltip>
+                  </span>
+                  <div class="add-knowledge-doc" @click="handleCreateText">
+                    <Icon icon="ant-design:form-outlined" size="13"></Icon><span>手动录入</span>
+                  </div>
+                  <div class="add-knowledge-doc" @click="handleCreateUpload">
+                    <Icon icon="ant-design:cloud-upload-outlined" size="13"></Icon><span>文件上传</span>
+                  </div>
+                  <div class="add-knowledge-doc" @click="handleCreateWeb">
+                    <Icon icon="ant-design:global-outlined" size="13"></Icon><span>网页录入</span>
+                  </div>
+                  <div class="add-knowledge-doc">
+                    <a-upload
+                        accept=".zip"
+                        name="file"
+                        :data="{ knowId: knowledgeId }"
+                        :showUploadList="false"
+                        :headers="headers"
+                        :beforeUpload="beforeUpload"
+                        :action="uploadUrl"
+                        @change="handleUploadChange"
+                        style="width: 100%;"
+                    >
+                        <div style="display: flex;width: 100%">
+                          <Icon style="margin-left: 0;color:#676f83" icon="ant-design:project-outlined" size="13"></Icon>
+                          <span style="color:#676f83;font-size: 12px">文档库上传</span>
+                        </div>
+                    </a-upload>
+                  </div>
+                  <a-dropdown placement="bottomRight" :trigger="['click']">
+                    <div class="ant-dropdown-link pointer operation" @click.prevent.stop>
+                      <Icon icon="ant-design:ellipsis-outlined" size="16"></Icon>
+                    </div>
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item key="delete" @click="onDeleteAll">
+                          <Icon icon="ant-design:delete-outlined" size="16"></Icon>
+                          清空文档
+                        </a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                </a-card>
+              </a-col>
+              <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in knowledgeDocDataList">
+                <a-card :class="['knowledge-card','pointer', {
+                  checked: item.__checked,
+                }]" @click="handleEdit(item)">
+                  <div class="knowledge-checkbox">
+                    <a-checkbox v-model:checked="item.__checked" @click.stop=""/>
+                  </div>
+                  <div class="knowledge-header">
+                    <div class="header-text flex">
+                      <Icon v-if="item.type==='text'" icon="ant-design:file-text-outlined" size="32" color="#00a7d0"></Icon>
+                      <Icon v-if="item.type==='web'" icon="ant-design:global-outlined" size="32" color="#1890ff"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'pdf'" icon="ant-design:file-pdf-outlined" size="32" color="rgb(211, 47, 47)"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'docx'" icon="ant-design:file-word-outlined" size="32" color="rgb(68, 138, 255)"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'pptx'" icon="ant-design:file-ppt-outlined" size="32" color="rgb(245, 124, 0)"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'xlsx'" icon="ant-design:file-excel-outlined" size="32" color="rgb(98, 187, 55)"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'txt'" icon="ant-design:file-text-outlined" size="32" color="#00a7d0"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === 'md'" icon="ant-design:file-markdown-outlined" size="32" color="#292929"></Icon>
+                      <Icon v-if="item.type==='file' && getFileSuffix(item.metadata) === ''" icon="ant-design:file-unknown-outlined" size="32" color="#f5f5dc"></Icon>
+                      <span class="ellipsis header-title">{{ item.title }}</span>
+                    </div>
+                  </div>
+                  <div class="card-description">
+                    <span>{{ item.content }}</span>
+                  </div>
+                  <div class="flex" style="justify-content: space-between">
+                    <div class="card-text">
+                      状态：
+                      <div v-if="item.status==='complete'" class="card-text-status">
+                        <Icon icon="ant-design:check-circle-outlined" size="16" color="#56D1A7"></Icon>
+                        <span class="ml-2">已完成</span>
+                      </div>
+                      <div v-else-if="item.status==='building'" class="card-text-status">
+                        <a-spin v-if="item.loading" :spinning="item.loading" :indicator="indicator"></a-spin>
+                        <span class="ml-2">构建中</span>
+                      </div>
+                      <div v-else-if="item.status==='draft'" class="card-text-status">
+                        <img src="../icon/draft.png" style="width: 16px;height: 16px" />
+                        <span class="ml-2">草稿</span>
+                      </div>
+                      <a-tooltip v-else-if="item.status==='failed'" :title="getDocFailedReason(item)">
+                        <div class="card-text-status">
+                          <Icon icon="ant-design:close-circle-outlined" size="16" color="#FF4D4F"></Icon>
+                          <span class="ml-2">失败</span>
+                        </div>
+                      </a-tooltip>
+                    </div>
+                    <a-dropdown placement="bottomRight" :trigger="['click']">
+                      <div class="ant-dropdown-link pointer operation" @click.prevent.stop>
+                        <Icon icon="ant-design:ellipsis-outlined" size="16"></Icon>
+                      </div>
+                      <template #overlay>
+                        <a-menu>
+                          <a-menu-item key="vectorization" @click="handleVectorization(item.id)">
+                            <Icon icon="ant-design:retweet-outlined" size="16"></Icon>
+                            向量化
+                          </a-menu-item>
+                          <a-menu-item key="edit" @click="handleEdit(item)">
+                            <Icon icon="ant-design:edit-outlined" size="16"></Icon>
+                            编辑
+                          </a-menu-item>
+                          <a-menu-item key="delete" @click="handleDelete(item.id)">
+                            <Icon icon="ant-design:delete-outlined" size="16"></Icon>
+                            删除
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                  </div>
+                </a-card>
+              </a-col>
+            </a-row>
+            <Pagination
+              v-if="knowledgeDocDataList.length > 0"
+              :current="pageNo"
+              :page-size="pageSize"
+              :page-size-options="pageSizeOptions"
+              :total="total"
+              :showQuickJumper="true"
+              :showSizeChanger="true"
+              @change="handlePageChange"
+              class="list-footer"
+              size="small"
+              :show-total="() => `共${total}条` "
+            />
+          </div>
+
+          <div v-if="selectedKey === 'hitTest'" style="padding: 16px">
+            <a-spin :spinning="spinning">
+              <div class="hit-test">
+                <h4>命中测试</h4>
+                <span>针对用户提问调试段落匹配情况，保障回答效果。</span>
+              </div>
+              <div class="content">
+                <div class="content-title">
+                  <Avatar v-if="hitShowSearchText" :size="35" :src="avatar" />
+                  <span>{{ hitShowSearchText }}</span>
+                </div>
+                <div class="content-card">
+                  <a-row :span="24" class="knowledge-row" v-if="hitTextList.length>0">
+                    <a-col :xxl="6" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in hitTextList">
+                      <a-card class="hit-card pointer" style="border-color: #ffffff" @click="hitTextDescClick(item)">
+                        <div class="card-title">
+                          <div style="display: flex;">
+                            <Icon icon="ant-design:appstore-outlined" size="14"></Icon>
+                            <span style="margin-left: 4px">Chunk-{{item.chunk}}</span>
+                            <span style="margin-left: 10px">{{ item.content.length }} 字符</span>
+                          </div>
+                          <a-tag class="card-title-tag" color="#a9c8ff">
+                            <span>{{ getTagTxt(item.score) }}</span>
+                          </a-tag>
+                        </div>
+                        <div class="card-description">
+                          {{ item.content }}
+                        </div>
+                        <div class="card-footer">
+                          {{item.docName}}
+                        </div>
+                      </a-card>
+                    </a-col>
+                  </a-row>
+                  <div v-else-if="notHit">
+                    <a-empty :image-style="{ margin: '0 auto', height: '160px', verticalAlign: 'middle', borderStyle: 'none' }">
+                      <template #description>
+                        <div style="margin-top: 26px; font-size: 20px; color: #000; text-align: center !important">
+                          没有命中的分段
+                        </div>
+                      </template>
+                    </a-empty>
+                  </div>
+                </div>
+              </div>
+              <div class="param">
+                <span style="font-weight: bold; font-size: 16px">参数配置</span>
+                <ul>
+                  <li>
+                    <span>条数：</span>
+                    <a-input-number :min="1" v-model:value="topNumber"></a-input-number>
+                  </li>
+                  <li>
+                    <span>Score阈值：</span>
+                    <a-input-number :min="0" :step="0.01" :max="1" v-model:value="similarity"></a-input-number>
+                  </li>
+                </ul>
+              </div>
+              <div class="hit-test-footer">
+                <a-input v-model:value="hitText" size="large" placeholder="请输入" style="width: 100%" @pressEnter="hitTestClick">
+                  <template #suffix>
+                    <Icon icon="ant-design:send-outlined" style="transform: rotate(-33deg); cursor: pointer" size="22" @click="hitTestClick"></Icon>
+                  </template>
+                </a-input>
+              </div>
+            </a-spin>
+          </div>
+        </a-layout-content>
+      </a-layout>
+      <Loading tip="上传中，请稍后" :loading="uploadLoading"></Loading>
+    </BasicModal>
+
+    <!--  手工录入文本  -->
+    <AiragKnowledgeDocTextModal @register="docTextRegister" @success="handleSuccess"></AiragKnowledgeDocTextModal>
+    <!--  文本明细  -->
+    <AiTextDescModal @register="docTextDescRegister"></AiTextDescModal>
+  </div>
+</template>
+
+<script lang="tsx">
+  import { onBeforeMount, computed, ref, unref, h } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { knowledgeDocList, knowledgeDeleteBatchDoc, knowledgeDeleteAllDoc, knowledgeRebuildDoc, knowledgeEmbeddingHitTest } from '../AiKnowledgeBase.api';
+  import { doDeleteAllDoc } from '../AiKnowledgeBase.api.util';
+  import { ActionItem, BasicTable, TableAction } from '@/components/Table';
+  import { useListPage } from '@/hooks/system/useListPage';
+  import AiragKnowledgeDocTextModal from './AiragKnowledgeDocTextModal.vue';
+  import AiTextDescModal from './AiTextDescModal.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import {Avatar, message, Modal, Pagination} from 'ant-design-vue';
+  import { useUserStore } from '@/store/modules/user';
+  import { getFileAccessHttpUrl, getHeaders } from '@/utils/common/compUtils';
+  import defaultImg from '/@/assets/images/header.jpg';
+  import Icon from "@/components/Icon";
+  import { useGlobSetting } from '/@/hooks/setting';
+  import Loading from '@/components/Loading/src/Loading.vue';
+
+  export default {
+    name: 'AiragKnowledgeDocListModal',
+    components: {
+      Icon,
+      Pagination,
+      Avatar,
+      LoadingOutlined,
+      TableAction,
+      BasicTable,
+      BasicModal,
+      AiragKnowledgeDocTextModal,
+      AiTextDescModal,
+      Loading,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      //标题
+      const title = ref<string>('知识库详情');
+
+      //保存或修改
+      const knowledgeId = ref<string>('');
+
+      //菜单初始化选中的值
+      const selectedKeys = ref(['document']);
+      //菜单点击选中的key，用于显示和隐藏table
+      const selectedKey = ref<string>('document');
+      //定向搜索的文本
+      const hitText = ref<string>('');
+      //定向显示的文本
+      const hitShowSearchText = ref<string>('');
+      //加载效果
+      const spinning = ref<boolean>(false);
+      //最小分数 0-1
+      const similarity = ref<number>(0.65);
+      //条数
+      const topNumber = ref<number>(5);
+      //定向返回结果集
+      const hitTextList = ref<any>([]);
+      //用户头像
+      const avatar = ref<any>('');
+      const userStore = useUserStore();
+      //文档列表
+      const knowledgeDocDataList = ref<any>([]);
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //查询参数
+      const searchText = ref<string>('');
+      //是否没有命中
+      const notHit = ref<boolean>(false);
+      //定时任务刷新列表
+      const timer = ref<any>(null);
+      //token
+      const headers = getHeaders();
+      const globSetting = useGlobSetting();
+      //上传路径
+      const uploadUrl = ref<string>(globSetting.domainUrl+"/airag/knowledge/doc/import/zip");
+      //上传加载
+      const uploadLoading = ref<boolean>(false);
+
+      //菜单项
+      const menuItems = ref<any>([
+        {
+          key: 'document',
+          icon: '',
+          label: '文档',
+          title: '文档',
+        },
+        {
+          key: 'hitTest',
+          icon: '',
+          label: '命中测试',
+          title: '命中测试',
+        },
+      ]);
+
+      // 当前选中的行
+      const selectedRows = computed(() => knowledgeDocDataList.value.filter(item => item.__checked))
+
+      //注册modal
+      const [docTextRegister, { openModal: docTextOpenModal }] = useModal();
+      const [docTextDescRegister, { openModal: docTextDescOpenModal }] = useModal();
+      const type = ref<string>('');
+      // 知识库的分段策略 metadata
+      const knowledgeMetadata = ref<string>('');
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        knowledgeId.value = data.id;
+        selectedKeys.value = ['document'];
+        selectedKey.value = 'document';
+        spinning.value = false;
+        notHit.value = false;
+        type.value = data.type;
+        knowledgeMetadata.value = data.knowledgeMetadata || '';
+        await reload();
+        setModalProps({ confirmLoading: false });
+      });
+
+      const contentStyle = {
+        textAlign: 'center',
+        height: '100%',
+        width: '80%',
+        background: '#ffffff',
+      };
+
+      const siderStyle = {
+        textAlign: 'center',
+        width: '20%',
+        background: '#ffffff',
+        borderRight: '1px solid #cecece',
+      };
+
+      /**
+       * 加载指示符
+       */
+      const indicator =  h(LoadingOutlined, {
+        style: {
+          fontSize: '16px',
+          marginRight: '2px'
+        },
+        spin: true,
+      });
+
+      const { createMessage, createConfirmSync } = useMessage();
+
+      /**
+       * 手工录入文本
+       */
+      function handleCreateText() {
+        //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+        docTextOpenModal(true, { knowledgeId: knowledgeId.value, type: "text", knowledgeMetadata: knowledgeMetadata.value, knowledgeType: type.value });
+        //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+      }
+
+      /**
+       * 文件上传
+       */
+      function handleCreateUpload() {
+        //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+        docTextOpenModal(true, { knowledgeId: knowledgeId.value, type: "file", knowledgeMetadata: knowledgeMetadata.value, knowledgeType: type.value });
+        //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+      }
+
+      /**
+       * web网络地址
+       */
+      function handleCreateWeb() {
+        //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+        docTextOpenModal(true, { knowledgeId: knowledgeId.value, type: "web", knowledgeMetadata: knowledgeMetadata.value, knowledgeType: type.value });
+        //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+      }
+
+      /**
+       * 编辑
+       */
+      function handleEdit(record) {
+        // 判断如果有选中的行，则说明是批量操作模式
+        if (selectedRows.value.length > 0) {
+          record.__checked = !record.__checked;
+          return
+        }
+
+
+        if (record.type === 'text' || record.type === 'file' || record.type === 'web') {
+          docTextOpenModal(true, {
+            record,
+            isUpdate: true,
+            knowledgeMetadata: knowledgeMetadata.value,
+            knowledgeType: type.value,
+          });
+        }
+      }
+
+      /**
+       * 删除
+       * @param id
+       */
+      function handleDelete(id) {
+        Modal.confirm({
+          title: '提示',
+          content: '确认要删除该文档吗?',
+          okText: '确认',
+          cancelText: '取消',
+          onOk: () => {
+            if(knowledgeDocDataList.value.length == 1 && pageNo.value > 1) {
+              pageNo.value = pageNo.value - 1;
+            }
+            knowledgeDeleteBatchDoc({ ids: id }, reload);
+          }
+        })
+      }
+
+      function getDocFailedReason(doc) {
+        let metadata = doc?.metadata;
+        if (!metadata) {
+          return '构建失败，原因未知';
+        }
+        try {
+          metadata = JSON.parse(metadata);
+          return metadata?.failedReason || '构建失败，原因未知';
+        } catch (e) {
+          console.log('getDocFailedReason', e);
+          return '构建失败，原因未知';
+        }
+      }
+
+      /**
+       * 向量化
+       *
+       * @param id
+       */
+      async function handleVectorization(id) {
+        await knowledgeRebuildDoc({ docIds: id }, handleSuccess);
+      }
+
+      /**
+       * 文档新增和编辑成功回调
+       */
+      function handleSuccess() {
+        clearInterval(timer.value);
+        timer.value = null;
+        reload();
+        triggeringTimer();
+      }
+
+      /**
+       * 触发定时任务
+       */
+      function triggeringTimer() {
+        timer.value = setInterval(() => {
+          reload();
+        },5000)
+      }
+
+      /**
+       * 菜单点击事件
+       * @param value
+       */
+      function handleMenuClick(value) {
+        if (value.key === 'document') {
+          setTimeout(() => {
+            pageNo.value = 1;
+            pageSize.value = 10;
+            searchText.value = "";
+
+            reload();
+          });
+        } else {
+          hitTextList.value = [];
+          hitShowSearchText.value = '';
+          hitText.value = '';
+          avatar.value = '';
+          similarity.value = 0.65;
+          topNumber.value = 5;
+        }
+        selectedKey.value = value.key;
+      }
+
+      /**
+       * 命中测试
+       */
+      function hitTestClick() {
+        if (hitText.value) {
+          spinning.value = true;
+          knowledgeEmbeddingHitTest({
+            queryText: hitText.value,
+            knowId: knowledgeId.value,
+            topNumber: topNumber.value,
+            similarity: similarity.value,
+          }).then((res) => {
+            if (res.success) {
+              if (res.result) {
+                hitTextList.value = res.result;
+              } else {
+                hitTextList.value = [];
+              }
+            }
+            hitShowSearchText.value = hitText.value;
+            avatar.value = userStore.getUserInfo.avatar ? getFileAccessHttpUrl(userStore.getUserInfo.avatar) : defaultImg;
+            hitText.value = '';
+            notHit.value = hitTextList.value.length == 0;
+            spinning.value = false;
+          }).catch(()=>{
+            spinning.value = false;
+          });
+        }
+      }
+
+      /**
+       * 获取文本
+       * @param value
+       */
+      function getTagTxt(value) {
+        return 'score' + ' ' + value.toFixed(2);
+      }
+
+      /**
+       * 命中测试卡点击事件
+       * @param values
+       */
+      function hitTextDescClick(values) {
+        docTextDescOpenModal(true, { ...values });
+      }
+
+      /**
+       * 加载表格
+       */
+      async function reload() {
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          knowledgeId: knowledgeId.value,
+          title: '*' + searchText.value + '*',
+          column: 'createTime',
+          order: 'desc'
+        };
+        await knowledgeDocList(params).then((res) => {
+          if (res.success) {
+            //update-begin---author:wangshuai---date:2025-03-21---for:【QQYUN-11636】向量化功能改成异步---
+            if(res.result.records){
+              let clearTimer = true;
+              for (const item of res.result.records) {
+                if(item.status && item.status === 'building' ){
+                  clearTimer = false;
+                  item.loading = true;
+                }else{
+                  item.loading = false;
+                }
+              }
+              if(clearTimer){
+                clearInterval(timer.value);
+              }
+            }
+            //update-end---author:wangshuai---date:2025-03-21---for:【QQYUN-11636】向量化功能改成异步---
+            knowledgeDocDataList.value = res.result.records.map((item)=>{
+              item.__checked = false;
+              return item;
+            });
+            total.value = res.result.total;
+          } else {
+            knowledgeDocDataList.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        reload();
+      }
+
+      /**
+       * 获取文件后缀
+       */
+      function getFileSuffix(metadata) {
+        if(metadata){
+          let filePath = JSON.parse(metadata).filePath;
+          const index = filePath.lastIndexOf('.');
+          return index > 0 ? filePath.substring(index + 1).toLowerCase() : '';
+        }
+        return '';
+      }
+
+      /**
+       * 上传前事件
+       */
+      function beforeUpload(file) {
+        let fileType = file.type;
+        if (fileType !== 'application/zip' && fileType !== 'application/x-zip-compressed') {
+            createMessage.warning('请上传zip文件');
+            return false;
+        }
+        uploadLoading.value = true;
+        return true;
+      }
+
+      /**
+       * 文件上传回调事件
+       * @param info
+       */
+      function handleUploadChange(info) {
+        let { file } = info;
+        if (file.status === 'error' || (file.response && file.response.code == 500)) {
+          createMessage.error(file.response?.message ||`${file.name} 上传失败,请查看服务端日志`);
+          uploadLoading.value = false;
+          return;
+        }
+        if (file.status === 'done') {
+
+          if(!file.response.success){
+            createMessage.warning(file.response.message);
+            uploadLoading.value = false;
+            return;
+          }
+          uploadLoading.value = false;
+          createMessage.success(file.response.message);
+          handleSuccess();
+        }
+      }
+
+      function onClearSelected() {
+        knowledgeDocDataList.value.forEach(item => {
+          item.__checked = false;
+        });
+      }
+
+      // 清空文档
+      async function onDeleteAll() {
+        pageNo.value = 1;
+        doDeleteAllDoc(knowledgeId.value, reload);
+      }
+
+      // 批量删除
+      async function onDeleteBatch() {
+        const flag = await createConfirmSync({ title: '批量删除', content: `确定要删除这 ${selectedRows.value.length} 条数据吗？` });
+        if (!flag) {
+          return;
+        }
+        const ids = selectedRows.value.map(item => item.id)
+        let number = knowledgeDocDataList.value.length - ids.length;
+        if(number == 0 && pageNo.value > 1) {
+          pageNo.value = pageNo.value - 1;
+        }
+        knowledgeDeleteBatchDoc({ ids }, reload);
+      }
+
+      /**
+       * 回车搜索
+       */
+      function searchTextEnter(){
+        pageNo.value = 1;
+        reload();
+      }
+
+      onBeforeMount(()=>{
+        clearInterval(timer.value);
+        timer.value = null;
+      })
+
+      return {
+        registerModal,
+        title,
+        docTextRegister,
+        handleCreateText,
+        beforeUpload,
+        handleCreateUpload,
+        handleCreateWeb,
+        handleSuccess,
+        contentStyle,
+        siderStyle,
+        selectedKeys,
+        menuItems,
+        handleMenuClick,
+        selectedKey,
+        hitTestClick,
+        hitText,
+        spinning,
+        similarity,
+        topNumber,
+        hitShowSearchText,
+        avatar,
+        hitTextList,
+        getTagTxt,
+        docTextDescRegister,
+        hitTextDescClick,
+        knowledgeDocDataList,
+        handleEdit,
+        handleDelete,
+        getDocFailedReason,
+        handleVectorization,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        searchText,
+        reload,
+        cardBodyStyle:{ textAlign: 'left', width: '100%' },
+        getFileSuffix,
+        notHit,
+        indicator,
+        headers,
+        uploadUrl,
+        handleUploadChange,
+        knowledgeId,
+        uploadLoading,
+        selectedRows,
+        onClearSelected,
+        onDeleteAll,
+        onDeleteBatch,
+        searchTextEnter,
+        type,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+
+  .hit-test {
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    text-align: left;
+    display: flex;
+    margin-bottom: 10px;
+
+    h4 {
+      font-weight: bold;
+      font-size: 16px;
+      align-self: center;
+      margin-bottom: 0;
+      color: #1f2329;
+    }
+
+    span {
+      margin-left: 10px;
+      color: #8f959e;
+      font-weight: 400;
+      align-self: center;
+      margin-top: 2px;
+    }
+  }
+
+  .hit-test-footer {
+    margin-top: 10px;
+    display: flex;
+  }
+  .param {
+    text-align: left;
+    margin-top: 10px;
+    ul {
+      margin-top: 10px;
+      display: flex;
+      li {
+        align-items: center;
+        margin-right: 10px;
+        display: flex;
+      }
+    }
+    border-bottom: 1px solid #cec6c6;
+  }
+  .content {
+    height: calc(100vh - 300px);
+    padding: 8px;
+    border-radius: 10px;
+    background-color: #f9fbfd;
+    overflow-y: auto;
+    .content-title {
+      font-size: 16px;
+      font-weight: 600;
+      text-align: left;
+      margin-left: 10px;
+      display: flex;
+      span {
+        margin-left: 4px;
+        font-size: 20px;
+        align-self: center;
+      }
+    }
+    .content-card {
+      margin-top: 20px;
+      margin-left: 10px;
+      .hit-card {
+        height: 160px;
+        margin-bottom: 10px;
+        margin-right: 10px;
+        border-radius: 10px;
+        background: #fcfcfd;
+        border: 1px solid #f0f0f0;
+        box-shadow: 0 2px 4px #e6e6e6;
+        transition: all 0.3s ease;
+        .card-title {
+          justify-content: space-between;
+          color: #887a8b;
+          font-size: 14px;
+          display: flex;
+        }
+      }
+    }
+  }
+  .hit-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8 !important;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+
+  .card-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    height: 6em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+    margin-top: 16px;
+    text-align: left;
+    font-size: 12px;
+    color: #676F83;
+  }
+
+  .card-title-tag {
+    color: #477dee;
+  }
+
+  .knowledge-row {
+    padding: 16px;
+    overflow-y: auto;
+  }
+
+  .add-knowledge-card {
+    border-radius: 10px;
+    margin-bottom: 20px;
+    display: inline-flex;
+    font-size: 16px;
+    height: 196px;
+    width: calc(100% - 20px);
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    .add-knowledge-card-icon {
+      padding: 8px;
+      margin-right: 12px;
+    }
+  }
+
+  .knowledge-card {
+    border-radius: 10px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    height: 196px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+
+    .knowledge-checkbox {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 1;
+      align-items: center;
+      justify-content: center;
+      display: none;
+    }
+
+    &:hover, &.checked {
+      .knowledge-checkbox {
+        display: flex;
+      }
+    }
+
+    &.checked {
+      border: 1px solid @primary-color;
+    }
+
+    .knowledge-header {
+      position: relative;
+      font-size: 14px;
+      height: 20px;
+      text-align: left;
+      .header-img {
+        width: 40px;
+        height: 40px;
+        margin-right: 12px;
+      }
+      .header-title{
+        font-weight: bold;
+        color: #354052;
+        margin-left: 4px;
+        align-self: center;
+      }
+
+      .header-text {
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .add-knowledge-card,.knowledge-card{
+    transition: box-shadow 0.3s ease;
+  }
+
+  .add-knowledge-card:hover,.knowledge-card:hover{
+    box-shadow: 0 6px 12px #d0d3d8;
+  }
+
+  .ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+    width: calc(100% - 30px);
+  }
+
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+
+  .card-text{
+    font-size: 12px;
+    display: flex;
+    margin-top: 10px;
+    align-items: center;
+  }
+
+  .search-header {
+    margin-top: 10px;
+    margin-left: 26px;
+
+    .search-input {
+      width: 240px;
+      display: block;
+    }
+  }
+
+  .operation{
+    border: none;
+    margin-top: 10px;
+    align-items: end;
+    display: none !important;
+    bottom: 8px;
+    right: 4px;
+    position: absolute;
+  }
+
+  .add-knowledge-card:hover, .knowledge-card:hover{
+    .operation{
+      display: block !important;
+    }
+  }
+
+  .add-knowledge-doc{
+    margin-top: 6px;
+    color:#6F6F83;
+    font-size: 13px;
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    span{
+      margin-left: 4px;
+      line-height: 28px;
+    }
+  }
+  .add-knowledge-doc:hover{
+    background: #c8ceda33;
+  }
+  .operation{
+    background-color: unset;
+    border: none;
+    margin-right: 2px;
+  }
+  .operation:hover{
+    color: #000000;
+    background-color: #e9ecf2;
+    border: none;
+  }
+  .ant-dropdown-link{
+    font-size: 14px;
+    height: 24px;
+    padding: 0 7px;
+    border-radius: 4px;
+    align-content: center;
+    text-align: center;
+  }
+  .card-footer{
+    margin-top: 4px;
+    font-weight: 400;
+    color: #1f2329;
+    text-align: left;
+    font-size: 12px;
+  }
+  .card-text-status{
+    display: flex;
+    align-items: center;
+  }
+  .ml-2{
+    margin-left: 2px;
+  }
+  .add-knowledge-doc {
+    :deep(.ant-upload) {
+      width: 100%;
+    }
+  }
+</style>
+<style lang="less">
+  .airag-knowledge-doc .scroll-container {
+    padding: 0 !important;
+  }
+</style>
diff --git a/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocTextModal.vue b/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocTextModal.vue
new file mode 100644
index 0000000..31fdc91
--- /dev/null
+++ b/src/views/super/airag/aiknowledge/components/AiragKnowledgeDocTextModal.vue
@@ -0,0 +1,302 @@
+<!--手动录入text-->
+<template>
+  <div class="p-2">
+    <BasicModal destroyOnClose @register="registerModal" width="600px" :title="title" @ok="handleOk" @cancel="handleCancel">
+      <div v-show="currentStep === 0">
+        <BasicForm @register="registerForm"></BasicForm>
+        <div v-if="showWebContent" class="web-content-preview">
+          <div class="web-content-label">解析内容（只读）</div>
+          <div class="web-content-body">
+            <pre>{{ webContentText }}</pre>
+          </div>
+        </div>
+      </div>
+      <div v-show="currentStep === 1">
+        <!-- 知识库有默认分段策略时，显示选择来源 -->
+        <div v-if="knowledgeDefaultSegment" style="margin-bottom: 16px">
+          <div style="margin-bottom: 8px; font-weight: 500; color: rgba(0,0,0,0.85)">分段策略来源</div>
+          <a-radio-group v-model:value="useKnowledgeDefault" button-style="solid">
+            <a-radio-button value="default">使用知识库默认</a-radio-button>
+            <a-radio-button value="custom">自定义</a-radio-button>
+          </a-radio-group>
+          <div style="margin-top: 6px; font-size: 12px; color: rgba(0,0,0,0.45)">
+            <span v-if="useKnowledgeDefault === 'default'">直接保存，文档将使用知识库配置的分段策略</span>
+            <span v-else>忽略知识库默认策略，为该文档单独配置分段参数</span>
+          </div>
+          <!-- 只读展示知识库默认策略 -->
+          <div v-if="useKnowledgeDefault === 'default'" class="default-segment-info">
+            <a-descriptions :column="2" size="small" bordered style="margin-top: 12px">
+              <a-descriptions-item label="分段模式">{{ knowledgeDefaultSegment.segmentStrategy === 'custom' ? '自定义' : '自动分段与清洗' }}</a-descriptions-item>
+              <a-descriptions-item label="最大长度">{{ knowledgeDefaultSegment.maxSegment }}</a-descriptions-item>
+              <a-descriptions-item label="重叠度%">{{ knowledgeDefaultSegment.overlap }}</a-descriptions-item>
+              <a-descriptions-item v-if="knowledgeDefaultSegment.segmentStrategy === 'custom'" label="分段标识符">{{ knowledgeDefaultSegment.separator === 'custom' ? knowledgeDefaultSegment.customSeparator : knowledgeDefaultSegment.separator }}</a-descriptions-item>
+            </a-descriptions>
+          </div>
+        </div>
+        <BasicForm v-show="!knowledgeDefaultSegment || useKnowledgeDefault === 'custom'" @register="registerSegmentForm"></BasicForm>
+      </div>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, unref, computed } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { docSegmentSchema, docTextSchema } from '../AiKnowledgeBase.data';
+  import { knowledgeSaveDoc } from '../AiKnowledgeBase.api';
+
+  export default {
+    name: 'AiragKnowledgeDocModal',
+    components: {
+      BasicForm,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const title = ref<string>('创建知识库');
+      const currentStep = ref(0);
+      const step1Values = ref({});
+      //自定义分词的数据
+      const segmentMetadataRef = ref<any>({});
+      // 知识库默认分段策略（有值表示知识库配置了默认分段）
+      const knowledgeDefaultSegment = ref<any>(null);
+      // 分段策略来源：'default' 使用知识库默认，'custom' 自定义
+      const useKnowledgeDefault = ref<'default' | 'custom'>('default');
+      // 知识库类型：'knowledge' | 'memory'
+      const knowledgeType = ref<string>('knowledge');
+
+      //保存或修改
+      const isUpdate = ref<boolean>(false);
+      //知识库id
+      const knowledgeId = ref<string>();
+      //网页解析内容（只读展示）
+      const webContentText = ref<string>('');
+      const docType = ref<string>('');
+      const showWebContent = computed(() => docType.value === 'web' && isUpdate.value && webContentText.value);
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+        schemas: docTextSchema,
+        showActionButtonGroup: false,
+        layout: 'vertical',
+        wrapperCol: { span: 24 },
+      });
+
+      const [registerSegmentForm, { resetFields: resetSegmentFields, validate: validateSegment, setFieldsValue: setSegmentFieldsValue }] = useForm({
+        schemas: docSegmentSchema,
+        showActionButtonGroup: false,
+        layout: 'vertical',
+        wrapperCol: { span: 24 },
+        labelCol: { span: 24 },
+      });
+
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        //重置表单
+        await resetFields();
+        await resetSegmentFields();
+        currentStep.value = 0;
+        webContentText.value = '';
+        docType.value = '';
+        knowledgeType.value = data?.knowledgeType || 'knowledge';
+        setModalProps({ confirmLoading: false, okText: knowledgeType.value === 'memory' ? '保存' : '下一步' });
+        isUpdate.value = !!data?.isUpdate;
+        title.value = isUpdate.value ? '编辑文档' : '创建文档';
+
+        //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+        // 解析知识库默认分段策略
+        knowledgeDefaultSegment.value = null;
+        useKnowledgeDefault.value = 'default';
+        if (data?.knowledgeMetadata) {
+          try {
+            const kmeta = JSON.parse(data.knowledgeMetadata);
+            if (kmeta.enableSegment) {
+              knowledgeDefaultSegment.value = kmeta;
+            }
+          } catch (_e) {}
+        }
+        //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+
+        if (unref(isUpdate)) {
+          docType.value = data.record.type || '';
+          if(data.record.type === 'file' && data.record.metadata){
+            data.record.filePath = JSON.parse(data.record.metadata).filePath;
+          }
+          if(data.record.type === 'web' && data.record.metadata){
+            data.record.website = JSON.parse(data.record.metadata).website;
+          }
+          if(data.record.type === 'web' && data.record.content){
+            webContentText.value = data.record.content;
+          }
+          //表单赋值
+          await setFieldsValue({
+            ...data.record,
+          });
+
+          // 解析metadata并准备给第二步表单
+          if (data.record.metadata) {
+            const meta = JSON.parse(data.record.metadata);
+            //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+            // 如果文档保存时使用了知识库默认策略，回显时恢复选项
+            // 兼容老数据：若知识库已不存在默认分段策略，则降级为自定义（展示默认值）
+            if (meta.useKnowledgeDefault && knowledgeDefaultSegment.value) {
+              useKnowledgeDefault.value = 'default';
+            } else {
+              useKnowledgeDefault.value = 'custom';
+              // update-begin--author:wangshuai--date:2026-04-09--for:【issue/9418】AI知识库上传文件太大向量化失败
+              let strategy = meta.segmentStrategy || (meta.separator ? 'custom' : 'auto');
+              // update-end--author:wangshuai--date:2026-04-09--for:【issue/9418】AI知识库上传文件太大向量化失败
+              segmentMetadataRef.value = {
+                segmentStrategy: strategy,
+                maxSegment: meta.maxSegment,
+                overlap: meta.overlap,
+                textRules: meta.textRules,
+                separator: meta.separator,
+                preprocessingRules: meta.preprocessingRules,
+                customSeparator: strategy === 'custom' ? meta.customSeparator : '',
+              };
+            }
+            //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          } else {
+            useKnowledgeDefault.value = knowledgeDefaultSegment.value ? 'default' : 'custom';
+            segmentMetadataRef.value = { segmentStrategy: 'auto', separator: '\\n', maxSegment: 800, overlap: 10 };
+          }
+        } else {
+          knowledgeId.value = data.knowledgeId;
+          docType.value = data.type || '';
+          // 新建时：有知识库默认策略则默认选中"使用知识库默认"
+          useKnowledgeDefault.value = knowledgeDefaultSegment.value ? 'default' : 'custom';
+          segmentMetadataRef.value = { segmentStrategy: 'auto', separator: '\\n', maxSegment: 800, overlap: 10 };
+          await setFieldsValue({ type: data.type });
+        }
+        setModalProps({ bodyStyle: { padding: '10px' } });
+      });
+
+      /**
+       * 保存
+       */
+      async function handleOk() {
+        try {
+          if (currentStep.value === 0 && knowledgeType.value !== 'memory') {
+            step1Values.value = await validate();
+            currentStep.value = 1;
+            setModalProps({ okText: '保存', minHeight: 400 });
+            if (segmentMetadataRef.value) {
+              await setSegmentFieldsValue({ ...segmentMetadataRef.value });
+            }
+            return;
+          }
+
+          if (currentStep.value === 0 && knowledgeType.value === 'memory') {
+            step1Values.value = await validate();
+          }
+
+          setModalProps({ confirmLoading: true });
+          let values: any = { ...step1Values.value };
+
+          let metadata: any = {};
+
+          //update-begin---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          if (knowledgeType.value === 'memory') {
+            // 记忆库不需要分段策略，metadata 留空
+          } else if (useKnowledgeDefault.value === 'default' && knowledgeDefaultSegment.value) {
+            // 使用知识库默认分段策略，标记即可，后端读取知识库 metadata
+            metadata = { useKnowledgeDefault: true };
+          } else {
+            // update-begin--author:wangshuai--date:2026-04-09--for:【issue/9418】AI知识库上传文件太大向量化失败
+            const segmentFormValues = await validateSegment();
+            metadata = {
+              segmentStrategy: segmentFormValues.segmentStrategy,
+              maxSegment: segmentFormValues.maxSegment,
+              overlap: segmentFormValues.overlap,
+            };
+            if (segmentFormValues.segmentStrategy === 'custom') {
+              metadata = {
+                ...metadata,
+                separator: segmentFormValues.separator,
+                customSeparator: segmentFormValues.customSeparator,
+                textRules: segmentFormValues.textRules,
+              };
+            }
+            // update-end--author:wangshuai--date:2026-04-09--for:【issue/9418】AI知识库上传文件太大向量化失败
+          }
+          //update-end---wangshuai---date:20260414  for：【QQYUN-14932】创建知识库时，可以创建一个分段策略，知识库里面的文档默认使用知识库的分段策略------------
+          if (!unref(isUpdate)) {
+            values.knowledgeId = knowledgeId.value;
+          }
+          if(values.filePath){
+            metadata.filePath = values.filePath;
+            delete values.filePath;
+          }
+          if(values.website){
+            metadata.website = values.website;
+            delete values.website;
+          }
+          values.metadata = JSON.stringify(metadata);
+          await knowledgeSaveDoc(values);
+          //关闭弹窗
+          closeModal();
+          //刷新列表
+          emit('success');
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      /**
+       * 取消
+       */
+      function handleCancel() {
+        closeModal();
+      }
+
+      return {
+        registerModal,
+        registerForm,
+        registerSegmentForm,
+        currentStep,
+        title,
+        handleOk,
+        handleCancel,
+        showWebContent,
+        webContentText,
+        knowledgeDefaultSegment,
+        useKnowledgeDefault,
+        knowledgeType,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+  .web-content-preview {
+    margin-top: 8px;
+    .web-content-label {
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    .web-content-body {
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      padding: 12px;
+      background: #f5f5f5;
+      pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        font-size: 13px;
+        line-height: 1.6;
+        color: #333;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiknowledge/icon/draft.png b/src/views/super/airag/aiknowledge/icon/draft.png
new file mode 100644
index 0000000..028e583
Binary files /dev/null and b/src/views/super/airag/aiknowledge/icon/draft.png differ
diff --git a/src/views/super/airag/aiknowledge/icon/knowledge.png b/src/views/super/airag/aiknowledge/icon/knowledge.png
new file mode 100644
index 0000000..b622775
Binary files /dev/null and b/src/views/super/airag/aiknowledge/icon/knowledge.png differ
diff --git a/src/views/super/airag/aimcp/AiragMcp.api.ts b/src/views/super/airag/aimcp/AiragMcp.api.ts
new file mode 100644
index 0000000..25c33fc
--- /dev/null
+++ b/src/views/super/airag/aimcp/AiragMcp.api.ts
@@ -0,0 +1,87 @@
+import { defHttp } from '/@/utils/http/axios';
+// import { useMessage } from "/@/hooks/web/useMessage"; // 需要确认弹窗再启用
+
+enum Api {
+  list = '/airag/airagMcp/list',
+  save='/airag/airagMcp/save',
+  deleteOne = '/airag/airagMcp/delete',
+  importExcel = '/airag/airagMcp/importExcel',
+  exportXls = '/airag/airagMcp/exportXls',
+  sync = '/airag/airagMcp/sync',
+  toggleStatus = '/airag/airagMcp/status',
+  saveAndSync = '/airag/airagMcp/saveAndSync',
+  queryById = '/airag/airagMcp/queryById',
+  saveTools = '/airag/airagMcp/saveTools',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+
+
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdate = (params) => {
+  return defHttp.post({url: Api.save, data: params}, { isTransformResponse: false });
+}
+
+/**
+ * 保存并同步
+ * @param params
+ * @param isUpdate
+ */
+export const saveAndSync = (params) => {
+  return defHttp.post({url: Api.saveAndSync, data: params}, { isTransformResponse: false });
+}
+
+/**
+ * 同步接口
+ * @param id
+ */
+export const syncMcp = (id) => defHttp.post({ url: Api.sync+"/"+id });
+
+/**
+ * 修改状态
+ * @param id
+ */
+export const toggleStatus = (id,status) => defHttp.post({ url: Api.toggleStatus+"/"+id + "/"+ status });
+
+/**
+ * 详情查询
+ * @param id
+ */
+export const queryById = (id) => defHttp.get({ url: Api.queryById ,params: { id:id }}, { isTransformResponse: false });
+
+/**
+ * 保存插件工具（仅更新tools字段）
+ * @param id 插件ID
+ * @param tools 工具列表JSON字符串
+ */
+export const saveTools = (id, tools) => defHttp.post({ url: Api.saveTools, data: { id, tools } }, { isTransformResponse: false });
diff --git a/src/views/super/airag/aimcp/AiragMcp.data.ts b/src/views/super/airag/aimcp/AiragMcp.data.ts
new file mode 100644
index 0000000..a733690
--- /dev/null
+++ b/src/views/super/airag/aimcp/AiragMcp.data.ts
@@ -0,0 +1,78 @@
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import { rules} from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+import { getWeekMonthQuarterYear } from '/@/utils';
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '图标',
+    align: "center",
+    dataIndex: 'icon'
+  },
+  {
+    title: '名称',
+    align: "center",
+    dataIndex: 'name'
+  },
+  {
+    title: '描述',
+    align: "center",
+    dataIndex: 'descr'
+  },
+  {
+    title: 'mcp类型（sse：sse类型；stdio：标准类型）',
+    align: "center",
+    dataIndex: 'type'
+  },
+  {
+    title: '服务端点（SSE类型为URL，stdio类型为命令）',
+    align: "center",
+    dataIndex: 'endpoint'
+  },
+  {
+    title: '请求头（sse类型）、环境变量（stdio类型）',
+    align: "center",
+    dataIndex: 'headers'
+  },
+  {
+    title: '工具列表',
+    align: "center",
+    dataIndex: 'tools'
+  },
+  {
+    title: '状态（enable=启用、disable=禁用）',
+    align: "center",
+    dataIndex: 'status'
+  },
+  {
+    title: '是否同步',
+    align: "center",
+    dataIndex: 'synced'
+  },
+  {
+    title: '元数据',
+    align: "center",
+    dataIndex: 'metadata'
+  },
+  {
+    title: '租户id',
+    align: "center",
+    dataIndex: 'tenantId'
+  },
+];
+
+// 高级查询数据
+export const superQuerySchema = {
+  icon: {title: '应用图标',order: 0,view: 'text', type: 'string',},
+  name: {title: '名称',order: 1,view: 'text', type: 'string',},
+  descr: {title: '描述',order: 2,view: 'text', type: 'string',},
+  type: {title: 'mcp类型（sse：sse类型；stdio：标准类型）',order: 3,view: 'text', type: 'string',},
+  endpoint: {title: '服务端点（SSE类型为URL，stdio类型为命令）',order: 4,view: 'textarea', type: 'string',},
+  headers: {title: '请求头（sse类型）、环境变量（stdio类型）',order: 5,view: 'textarea', type: 'string',},
+  tools: {title: '工具列表',order: 6,view: 'textarea', type: 'string',},
+  status: {title: '状态（enable=启用、disable=禁用）',order: 7,view: 'text', type: 'string',},
+  synced: {title: '是否同步',order: 8,view: 'number', type: 'number',},
+  metadata: {title: '元数据',order: 9,view: 'textarea', type: 'string',},
+  tenantId: {title: '租户id',order: 10,view: 'text', type: 'string',},
+};
diff --git a/src/views/super/airag/aimcp/AiragMcpList.vue b/src/views/super/airag/aimcp/AiragMcpList.vue
new file mode 100644
index 0000000..0232acd
--- /dev/null
+++ b/src/views/super/airag/aimcp/AiragMcpList.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="mcp">
+    <!-- 查询区域 -->
+    <div class="jeecg-basic-table-form-container">
+      <a-form
+        ref="formRef"
+        @keyup.enter="searchQuery"
+        :model="queryParam"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+        style="background-color: #f7f8fc !important;"
+      >
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="name" label="名称">
+              <JInput v-model:value="queryParam.name" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="category" label="类型">
+              <a-select v-model:value="queryParam.category" placeholder="全部" allowClear>
+                <a-select-option value="plugin">插件</a-select-option>
+                <a-select-option value="mcp">MCP</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 卡片区域 -->
+    <a-row :span="24" class="mcp-row">
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
+        <a-card class="add-mcp-card" @click="handleAdd" >
+          <div class="flex">
+            <Icon icon="ant-design:plus-outlined" class="add-mcp-card-icon" size="20" />
+            <span class="add-mcp-card-title">新增MCP</span>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col v-for="item in mcpList" :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" :key="item.id" v-if="mcpList && mcpList.length > 0">
+        <a-card class="mcp-card" @click="handleDetailClick(item)">
+          <div class="mcp-header">
+            <div class="flex">
+              <img :src="getIcon(item.icon)" class="header-img" />
+              <div class="header-text" :title="item.name">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="mt-6">
+            <ul>
+              <li class="flex mr-14">
+                <span class="described" :title="item.descr">{{ item.descr || '-' }}</span>
+              </li>
+            </ul>
+          </div>
+          <div class="mcp-btn">
+            <a-button class="mcp-icon" size="small" @click.prevent.stop="handleEditClick(item)" v-auth="'llm:airag_mcp:edit'">
+              <Icon icon="ant-design:edit-outlined" />
+            </a-button>
+            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="(node) => node.parentNode">
+              <div class="ant-dropdown-link pointer mcp-icon" @click.prevent.stop>
+                <Icon icon="ant-design:ellipsis-outlined" />
+              </div>
+              <template #overlay>
+                <a-menu>
+                  <!-- MCP类型：显示同步按钮 -->
+                  <a-menu-item
+                    v-if="item.category === 'mcp'"
+                    key="sync"
+                    @click.prevent.stop="handleSync(item)"
+                    v-auth="'llm:airag_mcp:sync'"
+                  >
+                    <Icon icon="ant-design:cloud-sync-outlined" size="16" /> 同步
+                  </a-menu-item>
+                  <!-- 插件类型：显示工具管理按钮 -->
+                  <a-menu-item
+                    v-if="item.category === 'plugin'"
+                    key="toolManage"
+                    @click.prevent.stop="handleToolManage(item)"
+                    v-auth="'llm:airag_mcp:edit'"
+                  >
+                    <Icon icon="ant-design:tool-outlined" size="16" /> 工具管理
+                  </a-menu-item>
+                  <!-- 编辑：始终显示，不受禁用启用影响 -->
+                  <a-menu-item
+                    key="edit"
+                    @click.prevent.stop="handleEditClick(item)"
+                    v-auth="'llm:airag_mcp:edit'"
+                  >
+                    <Icon icon="ant-design:edit-outlined" size="16" /> 编辑
+                  </a-menu-item>
+                  <a-menu-item
+                    v-if="item.synced"
+                    key="toggle"
+                    @click.prevent.stop="handleToggleStatus(item)"
+                    v-auth="'llm:airag_mcp:edit'"
+                  >
+                    <Icon :icon="item.status === 'enable' ? 'ant-design:stop-outlined' : 'ant-design:check-circle-outlined'" size="16" />
+                    {{ item.status === 'enable' ? '禁用' : '启用' }}
+                  </a-menu-item>
+                  <a-menu-item
+                    v-if="item.status === 'disable' || !item.synced"
+                    key="delete"
+                    @click.prevent.stop="handleDeleteClick(item)"
+                    v-auth="'llm:airag_mcp:delete'"
+                  >
+                    <Icon icon="ant-design:delete-outlined" size="16" /> 删除
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+          <div class="card-footer" v-if="true">
+            <div class="pill type-pill" :title="'类型: '+(item.category === 'plugin' ? '插件' : 'MCP')">
+              <Icon :icon="getCategoryIcon(item.category)" class="pill-icon" />
+              <span class="pill-text">{{ item.category === 'plugin' ? '插件' : 'MCP' }}</span>
+            </div>
+            <div class="pill status-pill" :class="item.synced ? (item.status==='enable'?'status-enable-pill':'status-disable-pill'):'status-unsynced-pill'" :title="item.synced ? (item.status==='enable'?'已启用':'未启用'):'未同步'">
+              <Icon :icon="getStatusIcon(item)" class="pill-icon" />
+              <span class="pill-text">{{ item.synced ? (item.status==='enable'?'启用':'禁用') : '未同步' }}</span>
+            </div>
+            <div class="pill tool-pill" :title="getToolCount(item.metadata)+' 个工具'">
+              <Icon icon="ant-design:tool-outlined" class="pill-icon" />
+              <span class="pill-text">{{ getToolCount(item.metadata) }} 个工具</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="mcpList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+      :show-total="() => `共${total}条` "
+    />
+  </div>
+  <!-- 弹窗区域 -->
+  <AiragMcpAddModal @register="registerModal" @success="reload" />
+  <AiragMcpDetailModal @register="registerDetailModal" @edit="handleDetailEdit" @success="reload" />
+</template>
+<script lang="ts" name="llm-airagMcp" setup>
+import { reactive, ref } from 'vue';
+import { Pagination } from 'ant-design-vue';
+import AiragMcpAddModal from './components/AiragMcpAddModal.vue';
+import AiragMcpDetailModal from './components/AiragMcpDetailModal.vue';
+import { list, deleteOne, syncMcp, toggleStatus} from './AiragMcp.api';
+import { useModal } from '/@/components/Modal';
+import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
+import defaultLogo from './imgs/mcpLogo.png'
+
+// 列表数据
+const mcpList = ref<any[]>([]);
+// 分页
+const pageNo = ref<number>(1);
+const pageSize = ref<number>(10);
+const total = ref<number>(0);
+const pageSizeOptions = ref<any>(['10', '20', '30']);
+
+// 查询参数
+const queryParam = reactive<any>({});
+const formRef = ref();
+
+// 查询区域label宽度
+const labelCol = reactive({
+  xs: 24,
+  sm: 4,
+  xl: 6,
+  xxl: 6,
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 20,
+});
+
+// 弹窗（新增/编辑）
+const [registerModal, { openModal }] = useModal();
+// 详情弹窗
+const [registerDetailModal, { openModal: openDetailModal }] = useModal();
+
+// 初始化
+reload();
+
+function reload() {
+  const params: any = {
+    pageNo: pageNo.value,
+    pageSize: pageSize.value,
+    column: 'createTime',
+    order: 'desc',
+    ...queryParam,
+  };
+  list(params).then((res) => {
+    if (res.records) {
+      mcpList.value = res.records;
+      total.value = res.total;
+    } else {
+      mcpList.value = [];
+      total.value = 0;
+    }
+  });
+}
+
+function handlePageChange(page, current) {
+  pageNo.value = page;
+  pageSize.value = current;
+  reload();
+}
+
+function handleAdd() {
+  openModal(true, {});
+}
+
+function handleEditClick(item) {
+  // 参考模型列表，仅传 id；如需后端查询可在弹窗内部扩展
+  openModal(true, { id: item.id, ...item });
+}
+
+function handleDetailClick(item){
+  // 仅传 id，详情弹窗内部调用 queryById 获取最新数据
+  openDetailModal(true, { id: item.id });
+}
+
+function handleDetailEdit(record){
+  // 从详情弹窗内部触发编辑
+  openModal(true, { id: record.id, ...record });
+}
+
+async function handleDeleteClick(item) {
+  if (mcpList.value.length === 1 && pageNo.value > 1) {
+    pageNo.value = pageNo.value - 1;
+  }
+  await deleteOne({ id: item.id }, reload);
+}
+
+async function handleSync(item) {
+  await syncMcp(item.id).finally(() => reload());
+}
+
+async function handleToggleStatus(item) {
+  const newStatus = item.status === 'enable' ? 'disable' : 'enable';
+  await toggleStatus(item.id , newStatus).finally(() => reload());
+}
+
+function searchQuery() {
+  pageNo.value = 1;
+  reload();
+}
+
+function searchReset() {
+  formRef.value?.resetFields();
+  Object.keys(queryParam).forEach((k) => (queryParam[k] = ''));
+  searchQuery();
+}
+
+// 图标处理（如果 icon 是完整URL则使用，否则可以扩展映射）
+function getIcon(icon?: string) {
+  if (!icon) return defaultLogo;
+  return icon.startsWith('http') ? icon : icon; // 可扩展为本地静态资源路径
+}
+
+// 工具数量：从 metadata 中读取 tool_count，可处理对象或 JSON 字符串
+function getToolCount(metadata: any): number {
+  if (!metadata) return 0;
+  let metaObj: any = metadata;
+  if (typeof metadata === 'string') {
+    try {
+      metaObj = JSON.parse(metadata);
+    } catch (e) {
+      return 0;
+    }
+  }
+  const count = metaObj.tool_count || metaObj.toolCount || 0;
+  return typeof count === 'number' ? count : parseInt(count, 10) || 0;
+}
+
+// 类型图标映射
+function getTypeIcon(type?: string) {
+  switch (type) {
+    case 'sse':
+      return 'ant-design:thunderbolt-outlined';
+    case 'stdio':
+      return 'ant-design:code-outlined';
+    default:
+      return 'ant-design:appstore-outlined';
+  }
+}
+
+// category图标映射
+function getCategoryIcon(category?: string) {
+  if (category === 'plugin') {
+    return 'ant-design:api-outlined';
+  }
+  return 'ant-design:tool-twotone';
+}
+
+// 工具管理 - 打开详情页面
+function handleToolManage(item: any) {
+  openDetailModal(true, { id: item.id });
+}
+
+// 状态/同步图标
+function getStatusIcon(item: any) {
+  if (!item.synced) return 'ant-design:cloud-sync-outlined';
+  return item.status === 'enable' ? 'ant-design:check-circle-outlined' : 'ant-design:stop-outlined';
+}
+
+// <script setup> 下自动暴露到模板, 无需 export
+</script>
+
+<style lang="less" scoped>
+  .mcp {
+    height: calc(100vh - 115px);
+    background: #f7f8fc;
+    padding: 24px;
+    overflow-y: auto;
+    .mcp-row {
+      /* 允许阴影完整显示 */
+      margin-top: 20px;
+      padding-bottom: 12px;
+      overflow: visible;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        gap: 20px;
+        :deep(.ant-col) { flex: 0 0 270px; max-width: 270px; }
+        .mcp-card, .add-mcp-card { width: 270px; }
+      .mcp-header {
+        position: relative;
+        font-size: 14px;
+        .header-img {
+          width: 32px;
+          height: 32px;
+          margin-right: 12px;
+        }
+        .header-text {
+          font-size: 16px;
+          font-weight: bold;
+          color: #354052;
+          width: calc(100% - 80px);
+          overflow: hidden;
+          align-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .label {
+    font-weight: 400;
+    font-size: 12px;
+    align-self: center;
+    color: #8a8f98;
+    overflow-wrap: break-word;
+  }
+  .no-activate {
+    font-size: 10px;
+    color: #ff4d4f;
+    border: 1px solid #ff4d4f;
+    border-radius: 10px;
+    padding: 0 6px;
+    height: 14px;
+    line-height: 12px;
+    margin-left: 6px;
+    align-self: center;
+  }
+  .described {
+    font-weight: 400;
+    margin-left: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  /* Fallback for supporting browsers */
+  line-clamp: 3;
+    overflow: hidden;
+    font-size: 12px;
+    max-width: 100%;
+    line-height: 18px;
+    color: #848b99;
+  }
+  .status-enable {
+    color: #52c41a;
+  }
+  .status-disable {
+    color: #ff4d4f;
+  }
+  .status-unsynced {
+    color: #fa8c16;
+  }
+  .flex {
+    display: flex;
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+  .mr-14 {
+    margin-right: 14px;
+  }
+  .mt-6 {
+    margin-top: 6px;
+  }
+  .ml-4 {
+    margin-left: 4px;
+  }
+  .mcp-btn {
+    position: absolute;
+    right: 4px;
+    top: 6px;
+    height: auto;
+    display: none;
+  }
+  .mcp-card {
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    height: 152px;
+    cursor: pointer;
+    position: relative;
+  }
+  .mcp-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+    .mcp-btn {
+      display: flex;
+    }
+  }
+  .tool-count {
+    position: absolute;
+    left: 16px;
+    bottom: 12px;
+    font-size: 12px;
+    color: #4e5969;
+    display: flex;
+    align-items: center;
+    background: rgba(245,246,247,0.9);
+    padding: 2px 8px;
+    border-radius: 12px;
+    line-height: 18px;
+  }
+  .card-footer {
+    position: absolute;
+    left: 16px;
+    bottom: 12px;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 8px;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 10px 2px 8px;
+    border-radius: 14px;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+    backdrop-filter: saturate(180%) blur(4px);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
+    .pill-icon { margin-right: 4px; }
+  }
+  .type-pill { background: linear-gradient(135deg,#e6f4ff,#f0f9ff); color:#0958d9; }
+  .status-enable-pill { background: linear-gradient(135deg,#e8f9e9,#f0fff0); color:#2f952f; }
+  .status-disable-pill { background: linear-gradient(135deg,#fff1f0,#ffecec); color:#c43826; }
+  .status-unsynced-pill { background: linear-gradient(135deg,#fff7e6,#fff3d9); color:#d46b08; }
+  .tool-pill { background: linear-gradient(135deg,#f5f6f7,#f0f1f2); color:#555; }
+  .pointer {
+    cursor: pointer;
+  }
+  .list-footer {
+    text-align: right;
+    margin-top: 5px;
+  }
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    :deep(.ant-form) {
+      background-color: transparent;
+    }
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+  }
+  .add-mcp-card {
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    cursor: pointer;
+    height: 152px;
+    width: 270px;
+    .add-mcp-card-icon {
+      padding: 8px;
+      color: #1f2329;
+      background-color: #f5f6f7;
+      margin-right: 12px;
+    }
+    .add-mcp-card-title {
+      font-size: 16px;
+      color: #1f2329;
+      font-weight: 400;
+      align-self: center;
+    }
+  }
+  .add-mcp-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+  }
+  .mcp-icon {
+    background-color: unset;
+    border: none;
+    margin-right: 2px;
+  }
+  .mcp-icon:hover {
+    color: #000000;
+    background-color: #e9ecf2;
+    border: none;
+  }
+  .ant-dropdown-link {
+    font-size: 14px;
+    height: 24px;
+    padding: 0 7px;
+    border-radius: 4px;
+    align-content: center;
+    text-align: center;
+  }
+</style>
diff --git a/src/views/super/airag/aimcp/components/AiragMcpAddModal.vue b/src/views/super/airag/aimcp/components/AiragMcpAddModal.vue
new file mode 100644
index 0000000..ccaef5e
--- /dev/null
+++ b/src/views/super/airag/aimcp/components/AiragMcpAddModal.vue
@@ -0,0 +1,562 @@
+<template>
+  <BasicModal
+    destroyOnClose
+    @register="registerModal"
+    :canFullscreen="false"
+    width="640px"
+    :title="isEdit ? '编辑MCP' : '新增MCP'"
+    wrapClassName="airag-mcp-modal"
+  >
+    <div class="modal">
+      <div class="mcp-content">
+        <BasicForm @register="registerForm">
+          <!-- category类型选择：单选 -->
+          <template #category="{ model, field }">
+            <a-radio-group v-model:value="model[field]" @change="onCategoryChange" :disabled="isEdit">
+              <a-radio value="mcp">MCP</a-radio>
+              <a-radio value="plugin">插件</a-radio>
+            </a-radio-group>
+          </template>
+          <!-- MCP类型选择 -->
+          <template #type="{ model, field }">
+            <a-select v-model:value="model[field]" @change="onTypeChange" :disabled="isEdit">
+              <a-select-option value="sse">SSE</a-select-option>
+              <a-select-option value="stdio">STDIO</a-select-option>
+              <a-select-option value="http">HTTP</a-select-option>
+            </a-select>
+          </template>
+          <!-- endpoint 根据类型切换 placeholder -->
+          <template #endpoint="{ model, field }">
+            <a-input
+              v-model:value="model[field]"
+              :placeholder="endpointPlaceholder"
+              autocomplete="new-password"
+            />
+          </template>
+          <!-- headers 根据类型切换标签名称与 placeholder -->
+          <template #headers>
+            <!-- 解决浏览抛warning 70+ -->
+            <a-form-item-rest>
+              <div class="headers-table-wrapper">
+                <a-button type="primary" size="small" @click="addHeaderRow" style="margin-bottom: 8px;">
+                  添加
+                </a-button>
+                <div class="headers-table-container">
+                  <a-table
+                    :dataSource="headersData"
+                    :columns="headersColumns"
+                    :pagination="false"
+                    size="small"
+                    bordered
+                  >
+                    <template #bodyCell="{ column, record, index }">
+                      <template v-if="column.key === 'key'">
+                        <a-input v-model:value="record.key" placeholder="请输入键" size="small" />
+                      </template>
+                      <template v-if="column.key === 'value'">
+                        <a-input v-model:value="record.value" placeholder="请输入值" size="small" />
+                      </template>
+                      <template v-if="column.key === 'action'">
+                        <a-button type="link" danger size="small" @click="deleteHeaderRow(index)">删除</a-button>
+                      </template>
+                    </template>
+                  </a-table>
+                </div>
+              </div>
+            </a-form-item-rest>
+          </template>
+          <!-- 授权方式配置（仅插件类型） -->
+          <template #authType="{ model, field }">
+            <a-select v-model:value="model[field]" @change="onAuthTypeChange">
+              <a-select-option value="none">不需要授权</a-select-option>
+              <a-select-option value="token">Token / API Key</a-select-option>
+            </a-select>
+          </template>
+          <!-- Token参数名（仅插件类型且选择Token授权时） -->
+          <template #tokenParamName="{ model, field }">
+            <a-input v-model:value="model[field]" placeholder="请输入Token参数名" />
+          </template>
+          <!-- Token参数值（仅插件类型且选择Token授权时） -->
+          <template #tokenParamValue="{ model, field }">
+            <a-input  autocomplete="new-password" v-model:value="model[field]" type="password" placeholder="请输入Token值" />
+          </template>
+        </BasicForm>
+      </div>
+    </div>
+    <template #footer>
+      <a-button @click="close">关闭</a-button>
+      <a-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</a-button>
+      <a-button v-if="categoryValue === 'mcp'" type="primary" @click="handleSubmitAndSync" :loading="submitLoading">保存并同步</a-button>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { ref, computed, nextTick } from 'vue';
+import { useModalInner } from '/@/components/Modal';
+import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+import BasicForm from '/@/components/Form/src/BasicForm.vue';
+import { useForm } from '/@/components/Form';
+import { saveOrUpdate, saveAndSync } from '../AiragMcp.api';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isEdit = ref(false);
+const submitLoading = ref(false);
+const recordId = ref<string | undefined>(undefined);
+
+// category类型（plugin/mcp）
+const categoryValue = ref('mcp');
+// MCP类型（sse/stdio）
+const typeValue = ref('sse');
+// 授权方式
+const authType = ref('none'); // none: 不需要授权, token: Token / API Key
+// Token配置
+const tokenParamName = ref('X-Access-Token');
+const tokenParamValue = ref('');
+
+const endpointPlaceholder = computed(() => {
+  if (categoryValue.value === 'plugin') {
+    return '请输入BaseURL，例如：https://api.example.com（可选，不填使用当前系统地址）';
+  }
+  return typeValue.value === 'sse' || typeValue.value === 'http' ? '请输入服务端点URL，例如：https://example.com/stream' : '请输入启动命令，例如：./start-mcp-service';
+});
+
+// 表格数据
+const headersData = ref<Array<{ key: string; value: string }>>([]);
+
+// 表格列配置
+const headersColumns = [
+  { title: '键', dataIndex: 'key', key: 'key', width: '40%' },
+  { title: '值', dataIndex: 'value', key: 'value', width: '45%' },
+  { title: '操作', key: 'action', width: '15%' },
+];
+
+// 添加行
+function addHeaderRow() {
+  headersData.value.push({ key: '', value: '' });
+}
+
+// 删除行
+function deleteHeaderRow(index: number) {
+  // 如果只剩一行
+  if (headersData.value.length <= 1) {
+    const lastRow = headersData.value[0];
+    // 判断最后一行是否为空
+    if (!lastRow.key && !lastRow.value) {
+      // 如果键和值都是空的，不处理
+      return;
+    } else {
+      // 如果不是空的，清空这一行的键和值
+      lastRow.key = '';
+      lastRow.value = '';
+      createMessage.success('已清空数据');
+      return;
+    }
+  }
+  headersData.value.splice(index, 1);
+}
+
+// 将表格数据转换为JSON字符串格式
+function headersDataToString(): string {
+  const filtered = headersData.value.filter(item => item.key && item.value);
+  if (filtered.length === 0) {
+    return '';
+  }
+  const obj = filtered.reduce((acc, item) => {
+    acc[item.key] = item.value;
+    return acc;
+  }, {} as Record<string, string>);
+  return JSON.stringify(obj);
+}
+
+// 将JSON字符串格式转换为表格数据
+function stringToHeadersData(str: string | undefined) {
+  if (!str) {
+    // 默认添加一行空数据
+    headersData.value = [{ key: '', value: '' }];
+    return;
+  }
+  try {
+    const obj = JSON.parse(str);
+    const entries = Object.entries(obj);
+    if (entries.length === 0) {
+      // 如果解析后没有数据，默认添加一行空数据
+      headersData.value = [{ key: '', value: '' }];
+    } else {
+      headersData.value = entries.map(([key, value]) => ({
+        key,
+        value: String(value)
+      }));
+    }
+  } catch (e) {
+    // JSON解析失败，默认添加一行空数据
+    console.error('解析headers JSON失败:', e);
+    headersData.value = [{ key: '', value: '' }];
+  }
+}
+
+function onAuthTypeChange(val: string) {
+  authType.value = val;
+  updateSchema([
+    { field: 'tokenParamName', required: val === 'token', show: val === 'token' },
+    { field: 'tokenParamValue', required: false, show: val === 'token' },
+  ]);
+}
+
+function onCategoryChange(val) {
+  categoryValue.value = val.target.value;
+  if (categoryValue.value === 'plugin') {
+    // 插件类型：显示BaseURL、请求头、授权方式，隐藏MCP类型选择
+    updateSchema([
+      { field: 'category', label: '类型' },
+      { field: 'endpoint', label: 'BaseURL', required: false },
+      { field: 'type', show: false },
+      { field: 'headers', label: '请求头', show: true },
+      { field: 'authType', label: '授权方式', required: true, show: true },
+      { field: 'tokenParamName', label: 'Token参数名', required: authType.value === 'token', show: authType.value === 'token' },
+      { field: 'tokenParamValue', label: 'Token参数值', required: false , show: authType.value === 'token' },
+    ]);
+    // 设置插件类型的默认值
+    setFieldsValue({
+      type: 'api',
+      authType: authType.value || 'none',
+      tokenParamName: tokenParamName.value || 'X-Access-Token',
+    });
+  } else {
+    // MCP类型：显示原有字段
+    updateSchema([
+      { field: 'category', label: '类型' },
+      { field: 'endpoint', label: typeValue.value === 'stdio' ? '命令' : 'URL', required: true },
+      { field: 'type', label: 'MCP类型', show: true },
+      { field: 'headers', label: '请求头', show:() =>typeValue.value !=='stdio'},
+      { field: 'authType', show: false },
+      { field: 'tokenParamName', show: false },
+      { field: 'tokenParamValue', show: false },
+    ]);
+    // 设置MCP类型的默认值
+    setFieldsValue({
+      type: typeValue.value || 'sse',
+      authType: undefined,
+      tokenParamName: undefined,
+      tokenParamValue: undefined,
+    });
+  }
+}
+
+
+// 表单配置
+const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({
+  showActionButtonGroup: false,
+  layout: 'vertical',
+  baseColProps: { span: 24 },
+  schemas: [
+    { field: 'name', component: 'Input', label: '名称', required: true, componentProps: { placeholder: '请输入名称' } },
+    { field: 'icon', label: '图标', component: 'JImageUpload' },
+    { field: 'category', component: 'RadioGroup', label: '类型', required: true, slot: 'category', defaultValue: 'mcp' },
+    { field: 'type', component: 'Select', label: 'MCP类型', required: true, slot: 'type', defaultValue: 'sse' },
+    { field: 'endpoint', component: 'Input', label: 'URL', required: true, slot: 'endpoint' },
+    { field: 'headers', component: 'InputTextArea', label: '请求头', slot: 'headers', show: false },
+    { field: 'authType', component: 'Select', label: '授权方式', required: true, slot: 'authType', defaultValue: 'none', show: false },
+    { field: 'tokenParamName', component: 'Input', label: 'Token参数名', required: false, slot: 'tokenParamName', defaultValue: 'X-Access-Token', show: false },
+    { field: 'tokenParamValue', component: 'Input', label: 'Token参数值', required: false, slot: 'tokenParamValue', show: false },
+    { field: 'descr', component: 'InputTextArea', label: '描述', componentProps: { rows: 3, placeholder: '请输入描述' } },
+  ]
+});
+
+const [registerModal, { closeModal }] = useModalInner(async (data) => {
+  await resetFields();
+  submitLoading.value = false;
+  recordId.value = data?.id;
+  if (data && Object.keys(data).length > 0) {
+    // 区分新增/编辑
+    if (data.id) {
+      isEdit.value = true;
+    } else {
+      isEdit.value = false;
+    }
+    // 获取category，默认为mcp
+    const category = data.category || 'mcp';
+    categoryValue.value = category;
+    const t = data.type || 'sse';
+    typeValue.value = t;
+    
+    // 解析授权配置（从headers或metadata中解析）
+    let parsedAuthType = 'none';
+    let parsedTokenParamName = 'X-Access-Token';
+    let parsedTokenParamValue = '';
+    
+    if (category === 'plugin') {
+      // 尝试从metadata中解析授权配置
+      if (data.metadata) {
+        try {
+          const metadata = typeof data.metadata === 'string' ? JSON.parse(data.metadata) : data.metadata;
+          parsedAuthType = metadata.authType || 'none';
+          parsedTokenParamName = metadata.tokenParamName || 'X-Access-Token';
+          parsedTokenParamValue = metadata.tokenParamValue || '';
+        } catch (e) {
+          // 解析失败，使用默认值
+        }
+      }
+      
+      // 从headers中提取token（如果存在）
+      let headersObj: any = {};
+      if (data.headers) {
+        try {
+          headersObj = typeof data.headers === 'string' ? JSON.parse(data.headers) : data.headers;
+          // 如果metadata中有token配置，尝试从headers中提取对应的值
+          if (parsedAuthType === 'token' && parsedTokenParamName && headersObj[parsedTokenParamName]) {
+            parsedTokenParamValue = headersObj[parsedTokenParamName];
+            // 从headers中移除token，避免在表格中显示
+            delete headersObj[parsedTokenParamName];
+          }
+        } catch (e) {
+          // 解析失败
+        }
+      }
+      
+      authType.value = parsedAuthType;
+      tokenParamName.value = parsedTokenParamName;
+      tokenParamValue.value = parsedTokenParamValue;
+      
+      updateSchema([
+        { field: 'category', label: '类型', componentProps: { disabled: true } },
+        { field: 'endpoint', label: 'BaseURL', required: false },
+        { field: 'type', show: false },
+        { field: 'headers', label: '请求头', show: true },
+        { field: 'authType', label: '授权方式', required: true, show: true },
+        { field: 'tokenParamName', label: 'Token参数名', required: parsedAuthType === 'token', show: parsedAuthType === 'token' },
+        { field: 'tokenParamValue', label: 'Token参数值', required: false, show: parsedAuthType === 'token' },
+      ]);
+      // 将处理后的headers（已移除token）转换为表格数据
+      stringToHeadersData(Object.keys(headersObj).length > 0 ? JSON.stringify(headersObj) : '');
+      
+      // 需要在下一个tick设置值，确保updateSchema完成
+      nextTick(() => {
+        setFieldsValue({
+          icon: data.icon,
+          name: data.name,
+          descr: data.descr,
+          category: category,
+          type: t,
+          endpoint: data.endpoint,
+          authType: parsedAuthType,
+          tokenParamName: parsedTokenParamName,
+          tokenParamValue: parsedTokenParamValue,
+        });
+      });
+    } else {
+      updateSchema([
+        { field: 'category', label: '类型', componentProps: { disabled: true } },
+        { field: 'endpoint', label: t === 'stdio' ? '命令' : 'URL', required: true },
+        { field: 'type', label: 'MCP类型', show: true },
+        { field: 'headers', label: '请求头', show:() => t !== 'stdio' },
+        { field: 'authType', show: false },
+        { field: 'tokenParamName', show: false },
+        { field: 'tokenParamValue', show: false },
+      ]);
+      // 将 headers 字符串转换为表格数据
+      stringToHeadersData(data.headers);
+      
+      // 需要在下一个tick设置值，确保updateSchema完成
+      nextTick(() => {
+        setFieldsValue({
+          icon: data.icon,
+          name: data.name,
+          descr: data.descr,
+          category: category,
+          type: t,
+          endpoint: data.endpoint,
+        });
+      });
+    }
+  } else {
+    isEdit.value = false;
+    categoryValue.value = 'mcp';
+    typeValue.value = 'sse';
+    authType.value = 'none';
+    tokenParamName.value = 'X-Access-Token';
+    tokenParamValue.value = '';
+    // 默认添加一行空数据
+    headersData.value = [{ key: '', value: '' }];
+    updateSchema([
+      { field: 'category', label: '类型' },
+      { field: 'endpoint', label: 'URL' },
+      { field: 'headers', label: '请求头', show: true },
+      { field: 'authType', show: false },
+      { field: 'tokenParamName', show: false },
+      { field: 'tokenParamValue', show: false },
+    ]);
+    // 设置默认选中值
+    setFieldsValue({ category: 'mcp', type: 'sse', authType: 'none', tokenParamName: 'X-Access-Token', tokenParamValue: '' });
+  }
+});
+
+/**
+ * 类型改变事件
+ * @param val
+ */
+function onTypeChange(val: string){
+  typeValue.value = val;
+  updateSchema([
+    { field: 'endpoint', label: val === 'stdio' ? '命令' : 'URL' },
+    { field: 'headers', label: '请求头', show:() => val !== 'stdio' },
+  ]);
+}
+
+async function handleSubmit(){
+  try {
+    submitLoading.value = true;
+    const values = await validate();
+    if(recordId.value){
+      values.id = recordId.value;
+    }
+    
+    if (values.category === 'plugin') {
+      // 插件类型：验证授权配置
+      if (values.authType === 'token') {
+        if (!values.tokenParamName) {
+          createMessage.error('Token授权方式需要填写Token参数名和参数值');
+          return;
+        }
+      }
+      
+      // 插件类型：处理headers和授权配置
+      // 合并headers和token配置
+      let headersObj = {};
+      const headersStr = headersDataToString();
+      if (headersStr) {
+        try {
+          headersObj = JSON.parse(headersStr);
+        } catch (e) {
+          headersObj = {};
+        }
+      }
+      
+      // 如果选择了Token授权，添加token到headers
+      if (values.authType === 'token' && values.tokenParamName && values.tokenParamValue) {
+        headersObj[values.tokenParamName] = values.tokenParamValue;
+      }
+      
+      values.headers = Object.keys(headersObj).length > 0 ? JSON.stringify(headersObj) : '';
+      
+      // 将授权配置保存到metadata
+      const metadata: any = {};
+      if (values.metadata) {
+        try {
+          Object.assign(metadata, typeof values.metadata === 'string' ? JSON.parse(values.metadata) : values.metadata);
+        } catch (e) {
+          // 解析失败，使用空对象
+        }
+      }
+      metadata.authType = values.authType || 'none';
+      if (values.authType === 'token') {
+        metadata.tokenParamName = values.tokenParamName || 'X-Access-Token';
+        metadata.tokenParamValue = values.tokenParamValue || '';
+      }
+      values.metadata = JSON.stringify(metadata);
+      
+      values.type = 'api';
+    } else {
+      // MCP类型：将表格数据转换为字符串
+      values.headers = headersDataToString();
+      // 清除授权相关字段
+      delete values.authType;
+      delete values.tokenParamName;
+      delete values.tokenParamValue;
+    }
+    
+    const res = await saveOrUpdate(values);
+    if(res.success){
+      createMessage.success(res.message || '保存成功');
+      emit('success');
+      closeModal();
+    }else{
+      createMessage.error(res.message || '保存失败');
+    }
+  }finally{
+    submitLoading.value = false;
+  }
+}
+
+async function handleSubmitAndSync(){
+  try {
+    submitLoading.value = true;
+    const values = await validate();
+    if(recordId.value){
+      values.id = recordId.value;
+    }
+    // 将表格数据转换为字符串
+    values.headers = headersDataToString();
+    const res = await saveAndSync(values);
+    if(res.success){
+      createMessage.success(res.message || '保存并同步成功');
+      emit('success');
+      closeModal();
+    }else{
+      createMessage.error(res.message || '保存并同步失败');
+    }
+  }finally{
+    submitLoading.value = false;
+  }
+}
+
+function close(){
+  closeModal();
+}
+</script>
+<style scoped lang="less">
+.modal {
+  padding: 5px 16px 8px 16px;
+  .header {
+    padding: 0 0 12px 0;
+    display: flex;
+    justify-content: space-between;
+    .header-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+  .mcp-content {
+    :deep(.ant-form-item) { margin-bottom: 8px; }
+    :deep(.ant-input),
+    :deep(.ant-input-number),
+    :deep(.ant-select),
+    :deep(.ant-select-selector),
+    :deep(.ant-textarea),
+    :deep(textarea.ant-input) { width: 100% !important; }
+    :deep(.ant-select-selector){ padding: 0 8px; }
+    
+    .headers-table-wrapper {
+      .headers-table-container {
+        max-height: 200px;
+        overflow-y: auto;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        
+        :deep(.ant-table) {
+          .ant-table-thead > tr > th {
+            background: #fafafa;
+            padding: 8px;
+          }
+          .ant-table-tbody > tr > td {
+            padding: 4px 8px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.airag-mcp-modal {
+  .jeecg-basic-modal-close > span { margin-left: 0 !important; }
+  .ant-modal {
+    max-height: 85vh;
+    .ant-modal-body {
+      max-height: calc(85vh - 110px);
+      overflow-y: auto;
+    }
+  }
+}
+</style>
diff --git a/src/views/super/airag/aimcp/components/AiragMcpDetailModal.vue b/src/views/super/airag/aimcp/components/AiragMcpDetailModal.vue
new file mode 100644
index 0000000..023b55e
--- /dev/null
+++ b/src/views/super/airag/aimcp/components/AiragMcpDetailModal.vue
@@ -0,0 +1,614 @@
+<template>
+  <BasicModal
+    destroyOnClose
+    @register="registerModal"
+    :canFullscreen="false"
+    width="720px"
+    wrapClassName="airag-mcp-detail-modal"
+  >
+    <template #title>
+      <div class="detail-modal-title">
+        <span>详情</span>
+        <a-button 
+          class="detail-edit-btn" 
+          type="text" 
+          @click="emitEdit"
+          :title="'编辑'"
+        >
+          <Icon icon="ant-design:edit-outlined" :size="18" />
+        </a-button>
+      </div>
+    </template>
+  <div class="detail-modal" v-loading="loading">
+      <div class="detail-header">
+        <img :src="displayIcon" class="detail-icon" />
+        <div class="detail-titles">
+          <div class="detail-name" :title="record?.name">{{ record?.name || '-' }}</div>
+          <div class="detail-type-status">
+            <a-tag color="blue">{{ record?.category === 'plugin' ? '插件' : (record?.type || '未知类型') }}</a-tag>
+            <a-tag v-if="record?.synced" :color="record?.status === 'enable' ? 'green' : 'red'">
+              {{ record?.status === 'enable' ? '已启用' : '未启用' }}
+            </a-tag>
+            <a-tag v-else color="orange">未同步</a-tag>
+          </div>
+        </div>
+      </div>
+      <div class="detail-descr" :title="record?.descr">{{ record?.descr || '暂无描述' }}</div>
+      <div class="tools-wrapper">
+        <div class="tools-header">
+          <div class="tools-title">工具列表</div>
+          <a-button v-if="record?.category === 'plugin'" type="primary" size="small" @click="handleAddTool">添加工具</a-button>
+        </div>
+        <div class="tools-grid" v-if="(pluginTools && pluginTools.length) || (tools && tools.length)">
+          <!-- 插件类型工具 -->
+          <template v-if="record?.category === 'plugin'">
+            <div
+              v-for="tool in pluginTools"
+              :key="tool.name"
+              class="tool-item"
+              @click="handleEditTool(tool)"
+            >
+              <div class="tool-header-item" @click.stop>
+                <div class="tool-name" :title="tool.name">{{ tool.name }}</div>
+                <div class="tool-actions">
+                  <a-switch 
+                    v-model:checked="tool.enabled" 
+                    size="small" 
+                    @change="handleToolEnabledChange(tool)"
+                    @click.stop
+                  />
+                  <a-button 
+                    type="text" 
+                    size="small" 
+                    @click.stop="handleEditTool(tool)"
+                    :title="'编辑工具'"
+                  >
+                    <Icon icon="ant-design:edit-outlined" :size="16" />
+                  </a-button>
+                  <a-button 
+                    type="text" 
+                    danger
+                    size="small" 
+                    @click.stop="handleDeleteTool(tool)"
+                    :title="'删除工具'"
+                  >
+                    <Icon icon="ant-design:delete-outlined" :size="16" />
+                  </a-button>
+                </div>
+              </div>
+              <div class="tool-descr" :title="tool.description">{{ tool.description || '无描述' }}</div>
+              <div v-if="tool.method || tool.path" class="tool-meta">
+                <a-tag v-if="tool.method" size="small" :color="getMethodColor(tool.method)">{{ tool.method }}</a-tag>
+                <span v-if="tool.path" class="tool-path">{{ tool.path }}</span>
+              </div>
+            </div>
+          </template>
+          <!-- MCP类型工具 -->
+          <template v-else>
+            <div
+              v-for="tool in tools"
+              :key="tool.name"
+              class="tool-item"
+            >
+              <div class="tool-header-item" @click.stop>
+                <div class="tool-name" :title="tool.name">{{ tool.name }}</div>
+              </div>
+              <div class="tool-descr" :title="tool.descr">{{ tool.descr || '无描述' }}</div>
+            </div>
+          </template>
+        </div>
+        <a-empty v-else description="暂无工具" />
+      </div>
+    </div>
+    <template #footer>
+      <a-button @click="closeModal()">关闭</a-button>
+    </template>
+  </BasicModal>
+  <!-- 工具编辑弹窗 -->
+  <PluginToolEditModal @register="registerToolEditModal" @success="handleToolEditSuccess" />
+</template>
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useModalInner, useModal } from '/@/components/Modal';
+import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Modal } from 'ant-design-vue';
+import { queryById } from '../AiragMcp.api';
+import defaultLogo from '../imgs/mcpLogo.png';
+import PluginToolEditModal from './PluginToolEditModal.vue';
+
+const { createMessage } = useMessage();
+
+interface McpToolItem {
+  name: string;
+  descr?: string;
+  enabled?: boolean;
+}
+
+interface PluginToolItem {
+  name: string;
+  description?: string;
+  path?: string;
+  method?: string;
+  parameters?: any[];
+  responses?: any[];
+  enabled?: boolean;
+}
+
+interface McpRecord {
+  id?: string;
+  name?: string;
+  descr?: string;
+  icon?: string;
+  type?: string;
+  category?: string;
+  status?: string;
+  synced?: boolean;
+  tools?: McpToolItem[] | string;
+  endpoint?: string;
+  headers?: string;
+  metadata?: string | any;
+}
+
+const emit = defineEmits(['register','edit', 'success']);
+const record = ref<McpRecord | null>(null);
+const tools = ref<McpToolItem[]>([]);
+const pluginTools = ref<PluginToolItem[]>([]);
+const loading = ref<boolean>(false);
+
+// 工具编辑弹窗
+const [registerToolEditModal, { openModal: openToolEditModal }] = useModal();
+
+const displayIcon = computed(() => {
+  const icon = record.value?.icon;
+  if (!icon) return defaultLogo;
+  return icon.startsWith('http') ? icon : icon;
+});
+
+const [registerModal, { closeModal }] = useModalInner(async (data: McpRecord) => {
+  if(!data?.id){
+    record.value = { ...data };
+    // 根据category初始化工具列表
+    if (data.category === 'plugin') {
+      try {
+        const toolsData = typeof data.tools === 'string' ? JSON.parse(data.tools) : data.tools;
+        pluginTools.value = Array.isArray(toolsData) ? toolsData : [];
+      } catch (e) {
+        pluginTools.value = [];
+      }
+      tools.value = [];
+    } else {
+      tools.value = Array.isArray(data.tools) ? data.tools : [];
+      pluginTools.value = [];
+    }
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await queryById(data.id);
+    // 后端返回结构直接使用 res.result 或 res depending on transform; 假设统一为 res.result
+    const detail = res.result || res; // 兼容不同返回包装
+    record.value = {
+      id: detail.id,
+      name: detail.name,
+      descr: detail.descr,
+      icon: detail.icon,
+      type: detail.type,
+      category: detail.category,
+      status: detail.status,
+      synced: !!detail.synced,
+      endpoint: detail.endpoint,
+      headers: detail.headers,
+      metadata: detail.metadata,
+    };
+    
+    // 根据category解析工具
+    if (detail.category === 'plugin') {
+      // 插件类型：解析tools字段为插件工具列表
+      let parsedPluginTools: PluginToolItem[] = [];
+      const rawTools = detail.tools;
+      if (rawTools) {
+        try {
+          if (typeof rawTools === 'string') {
+            parsedPluginTools = JSON.parse(rawTools);
+          } else if (Array.isArray(rawTools)) {
+            parsedPluginTools = rawTools;
+          }
+        } catch (e) {
+          parsedPluginTools = [];
+        }
+      }
+      // 确保每个工具都有enabled字段，默认为true
+      pluginTools.value = parsedPluginTools.map((t: any) => ({
+        ...t,
+        enabled: t.enabled !== undefined ? t.enabled : true
+      }));
+      tools.value = [];
+    } else {
+      // MCP类型：解析tools字段为MCP工具列表
+      let parsedTools: McpToolItem[] = [];
+      const rawTools = detail.tools;
+      if (rawTools) {
+        try {
+          if (typeof rawTools === 'string') {
+            const arr = JSON.parse(rawTools);
+            parsedTools = arr.map((t: any) => ({ 
+              name: t.name, 
+              descr: t.description,
+              enabled: t.enabled !== undefined ? t.enabled : true
+            }));
+          } else if (Array.isArray(rawTools)) {
+            parsedTools = rawTools.map((t: any) => ({ 
+              name: t.name, 
+              descr: t.description,
+              enabled: t.enabled !== undefined ? t.enabled : true
+            }));
+          }
+        } catch (e) {
+          parsedTools = [];
+        }
+      }
+      tools.value = parsedTools;
+      pluginTools.value = [];
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+
+
+function handleAddTool() {
+  openToolEditModal(true, {
+    pluginId: record.value?.id,
+    plugin: record.value,
+    tool: null, // 新增
+  });
+}
+
+function handleEditTool(tool: PluginToolItem) {
+  openToolEditModal(true, {
+    pluginId: record.value?.id,
+    plugin: record.value,
+    tool: tool,
+  });
+}
+
+function getMethodColor(method: string): string {
+  const colorMap: Record<string, string> = {
+    'GET': 'blue',
+    'POST': 'green',
+    'PUT': 'orange',
+    'DELETE': 'red',
+    'PATCH': 'purple',
+  };
+  return colorMap[method] || 'default';
+}
+
+async function handleToolEnabledChange(tool: PluginToolItem) {
+  // 更新工具启用状态
+  if (!record.value?.id) return;
+  
+  try {
+    const res = await queryById(record.value.id);
+    const detail = res.result || res;
+    let tools: any[] = [];
+    if (detail.tools) {
+      try {
+        tools = typeof detail.tools === 'string' ? JSON.parse(detail.tools) : detail.tools;
+      } catch (e) {
+        tools = [];
+      }
+    }
+    const index = tools.findIndex((t: any) => t.name === tool.name);
+    if (index >= 0) {
+      tools[index].enabled = tool.enabled;
+      const { saveTools } = await import('../AiragMcp.api');
+      await saveTools(record.value.id, JSON.stringify(tools));
+    }
+  } catch (e) {
+    console.error('更新工具启用状态失败:', e);
+    // 恢复状态
+    tool.enabled = !tool.enabled;
+  }
+}
+
+function handleDeleteTool(tool: PluginToolItem) {
+  // 删除工具前进行二次确认
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除工具"${tool.name}"吗？此操作不可恢复。`,
+    okText: '确定',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk: async () => {
+      if (!record.value?.id) {
+        createMessage.error('插件ID不存在');
+        return;
+      }
+      
+      try {
+        // 获取最新的工具列表
+        const res = await queryById(record.value.id);
+        const detail = res.result || res;
+        let tools: any[] = [];
+        if (detail.tools) {
+          try {
+            tools = typeof detail.tools === 'string' ? JSON.parse(detail.tools) : detail.tools;
+          } catch (e) {
+            tools = [];
+          }
+        }
+        
+        // 从工具列表中移除该工具
+        const filteredTools = tools.filter((t: any) => t.name !== tool.name);
+        
+        if (filteredTools.length === tools.length) {
+          createMessage.warning('未找到要删除的工具');
+          return;
+        }
+        
+        // 保存更新后的工具列表
+        const { saveTools } = await import('../AiragMcp.api');
+        const saveRes = await saveTools(record.value.id, JSON.stringify(filteredTools));
+        
+        if (saveRes.success) {
+          createMessage.success('删除成功');
+          // 更新前端显示
+          pluginTools.value = pluginTools.value.filter((t: any) => t.name !== tool.name);
+          // 触发成功事件，通知父组件刷新
+          emit('success');
+        } else {
+          createMessage.error(saveRes.message || '删除失败');
+        }
+      } catch (e) {
+        console.error('删除工具失败:', e);
+        createMessage.error('删除工具失败');
+      }
+    },
+  });
+}
+
+function emitEdit() {
+  // 触发编辑事件，传递record给父组件
+  if (record.value) {
+    emit('edit', record.value);
+    closeModal();
+  }
+}
+
+function handleToolEditSuccess() {
+  // 重新加载详情数据
+  if (record.value?.id) {
+    loading.value = true;
+    queryById(record.value.id).then((res: any) => {
+      const detail = res.result || res;
+      
+      // 更新record信息
+      record.value = {
+        id: detail.id,
+        name: detail.name,
+        descr: detail.descr,
+        icon: detail.icon,
+        type: detail.type,
+        category: detail.category,
+        status: detail.status,
+        synced: !!detail.synced,
+        endpoint: detail.endpoint,
+        headers: detail.headers,
+        metadata: detail.metadata,
+      };
+      
+      // 根据category解析工具
+      if (detail.category === 'plugin') {
+        // 插件类型：解析tools字段为插件工具列表
+        let parsedPluginTools: PluginToolItem[] = [];
+        const rawTools = detail.tools;
+        if (rawTools) {
+          try {
+            if (typeof rawTools === 'string') {
+              parsedPluginTools = JSON.parse(rawTools);
+            } else if (Array.isArray(rawTools)) {
+              parsedPluginTools = rawTools;
+            }
+          } catch (e) {
+            parsedPluginTools = [];
+          }
+        }
+        pluginTools.value = parsedPluginTools.map((t: any) => ({
+          ...t,
+          enabled: t.enabled !== undefined ? t.enabled : true
+        }));
+        tools.value = [];
+      } else {
+        // MCP类型：解析tools字段为MCP工具列表
+        let parsedTools: McpToolItem[] = [];
+        const rawTools = detail.tools;
+        if (rawTools) {
+          try {
+            if (typeof rawTools === 'string') {
+              const arr = JSON.parse(rawTools);
+              parsedTools = arr.map((t: any) => ({ name: t.name, descr: t.description }));
+            } else if (Array.isArray(rawTools)) {
+              parsedTools = rawTools.map((t: any) => ({ name: t.name, descr: t.description }));
+            }
+          } catch (e) {
+            parsedTools = [];
+          }
+        }
+        tools.value = parsedTools;
+        pluginTools.value = [];
+      }
+      loading.value = false;
+      // 触发success事件，通知列表页刷新
+      emit('success');
+    }).catch(() => {
+      loading.value = false;
+    });
+  }
+}
+</script>
+<style scoped lang="less">
+.detail-modal {
+  padding: 12px 16px 8px 16px;
+  max-height: 520px;
+  overflow-y: auto;
+  .detail-header {
+    display: flex;
+    align-items: center;
+    .detail-icon {
+      width: 56px;
+      height: 56px;
+      border-radius: 8px;
+      margin-right: 16px;
+      background: #f5f6f7;
+      object-fit: cover;
+    }
+    .detail-titles {
+      flex: 1;
+      min-width: 0;
+      .detail-name {
+        font-size: 20px;
+        font-weight: 600;
+        color: #1f2329;
+        line-height: 28px;
+        max-width: 480px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .detail-type-status { margin-top: 4px; }
+    }
+  }
+  .detail-descr {
+    margin-top: 12px;
+    font-size: 13px;
+    line-height: 20px;
+    color: #4e5969;
+    background: #f5f6f7;
+    padding: 8px 12px;
+    border-radius: 6px;
+    max-height: 80px;
+    overflow-y: auto;
+  }
+  .tools-wrapper {
+    margin-top: 16px;
+    .tools-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .tools-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .tools-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      max-height: 280px;
+      overflow-y: auto;
+      padding-right: 4px;
+    }
+    .tool-item {
+      border: 1px solid #e5e6eb;
+      border-radius: 8px;
+      background: #fff;
+      padding: 10px 12px;
+      min-height: 88px;
+      display: flex;
+      flex-direction: column;
+      transition: box-shadow 0.25s;
+      cursor: default;
+      &:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
+      &.tool-item-plugin {
+        cursor: pointer;
+      }
+      .tool-header-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 6px;
+        .tool-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          .ant-btn-text {
+            padding: 0;
+            height: 24px;
+            width: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            &:hover {
+              background-color: rgba(255, 77, 79, 0.1);
+            }
+          }
+        }
+      }
+      .tool-name {
+        font-size: 14px;
+        font-weight: 600;
+        color: #1d2129;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+      }
+      .tool-descr {
+        font-size: 12px;
+        color: #4e5969;
+        line-height: 18px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 8px;
+      }
+      .tool-meta {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: auto;
+        .tool-path {
+          font-size: 12px;
+          color: #86909c;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+
+.detail-modal-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 40px;
+  
+  .detail-edit-btn {
+    padding: 4px 8px;
+    &:hover {
+      color: #1890ff;
+      background-color: rgba(24, 144, 255, 0.1);
+    }
+  }
+}
+</style>
+<style lang="less">
+.airag-mcp-detail-modal { 
+  .jeecg-basic-modal-close > span { margin-left: 0 !important; }
+  
+  :deep(.ant-modal-header) {
+    padding: 16px 24px;
+  }
+  
+  :deep(.ant-modal-title) {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aimcp/components/PluginToolEditModal.vue b/src/views/super/airag/aimcp/components/PluginToolEditModal.vue
new file mode 100644
index 0000000..1c6ef55
--- /dev/null
+++ b/src/views/super/airag/aimcp/components/PluginToolEditModal.vue
@@ -0,0 +1,483 @@
+<template>
+  <BasicModal
+    destroyOnClose
+    @register="registerModal"
+    :canFullscreen="false"
+    width="1400px"
+    :title="isEdit ? '编辑工具' : '新增工具'"
+    wrapClassName="plugin-tool-edit-modal"
+  >
+    <div class="modal">
+      <div class="tool-edit-content">
+        <!-- 基本信息 -->
+        <div class="section">
+          <h3 class="section-title">基本信息</h3>
+          <a-form :model="toolForm" layout="vertical">
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <a-form-item label="工具名称" required>
+                  <a-input v-model:value="toolForm.name" placeholder="请输入工具名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="请求方式" required>
+                  <a-select v-model:value="toolForm.method" placeholder="请选择请求方式">
+                    <a-select-option value="GET">GET</a-select-option>
+                    <a-select-option value="POST">POST</a-select-option>
+                    <a-select-option value="PUT">PUT</a-select-option>
+                    <a-select-option value="DELETE">DELETE</a-select-option>
+                    <a-select-option value="PATCH">PATCH</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="24">
+              <a-col :span="24">
+                <a-form-item label="访问路径" required>
+                  <a-input v-model:value="toolForm.path" placeholder="请输入访问路径，如：/api/user/{userId}" @blur="normalizePath" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="24">
+              <a-col :span="24">
+                <a-form-item label="描述" required>
+                  <a-textarea v-model:value="toolForm.description" :rows="3" placeholder="请输入工具描述" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+
+        <!-- 请求参数 -->
+        <div class="section">
+          <div class="section-header">
+            <h3 class="section-title">请求参数</h3>
+            <a-button type="primary" size="small" @click="handleAddRequestParam">添加参数</a-button>
+          </div>
+          <a-table
+            :dataSource="requestParams"
+            :columns="requestParamsColumns"
+            :pagination="false"
+            bordered
+            size="small"
+            rowKey="tempId"
+          >
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.key === 'name'">
+                <a-input
+                  v-model:value="record.name"
+                  placeholder="参数名称（字母数字下划线）"
+                  @blur="validateParamName(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'description'">
+                <a-input v-model:value="record.description" placeholder="参数描述" />
+              </template>
+              <template v-else-if="column.key === 'type'">
+                <a-select v-model:value="record.type" style="width: 100%">
+                  <a-select-option value="String">String</a-select-option>
+                  <a-select-option value="Number">Number</a-select-option>
+                  <a-select-option value="Integer">Integer</a-select-option>
+                  <a-select-option value="Boolean">Boolean</a-select-option>
+                </a-select>
+              </template>
+              <template v-else-if="column.key === 'location'">
+                <a-select v-model:value="record.location" style="width: 100%" @change="onLocationChange(record)">
+                  <a-select-option value="Body">Raw(json)</a-select-option>
+                  <a-select-option value="Form-Data">Form-Data</a-select-option>
+                  <a-select-option value="Query">Query</a-select-option>
+                  <a-select-option value="Header">Header</a-select-option>
+                  <a-select-option value="Path">Path</a-select-option>
+                </a-select>
+              </template>
+              <template v-else-if="column.key === 'required'">
+                <a-checkbox v-model:checked="record.required" />
+              </template>
+              <template v-else-if="column.key === 'defaultValue'">
+                <a-input v-model:value="record.defaultValue" placeholder="默认值" />
+              </template>
+              <template v-else-if="column.key === 'action'">
+                <a-button type="link" danger size="small" @click="handleDeleteRequestParam(index)">删除</a-button>
+              </template>
+            </template>
+          </a-table>
+        </div>
+
+        <!-- 输出参数 -->
+        <div class="section">
+          <div class="section-header">
+            <h3 class="section-title">输出参数</h3>
+            <a-button type="primary" size="small" @click="handleAddResponseParam">添加参数</a-button>
+          </div>
+          <a-table
+            :dataSource="responseParams"
+            :columns="responseParamsColumns"
+            :pagination="false"
+            bordered
+            size="small"
+            rowKey="tempId"
+          >
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.key === 'name'">
+                <a-input
+                  v-model:value="record.name"
+                  placeholder="参数名称（支持点号和数组语法，如data.name、data[].name）"
+                  @blur="validateResponseParamName(record)"
+                />
+              </template>
+              <template v-else-if="column.key === 'description'">
+                <a-input v-model:value="record.description" placeholder="参数描述" />
+              </template>
+              <template v-else-if="column.key === 'type'">
+                <a-select v-model:value="record.type" style="width: 100%" @change="onResponseTypeChange(record)">
+                  <a-select-option value="String">String</a-select-option>
+                  <a-select-option value="Number">Number</a-select-option>
+                  <a-select-option value="Integer">Integer</a-select-option>
+                  <a-select-option value="Boolean">Boolean</a-select-option>
+                  <a-select-option value="Object">Object</a-select-option>
+                  <a-select-option value="Array">Array</a-select-option>
+                </a-select>
+              </template>
+              <template v-else-if="column.key === 'action'">
+                <a-button type="link" danger size="small" @click="handleDeleteResponseParam(index)">删除</a-button>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <a-button @click="close">关闭</a-button>
+      <a-button type="primary" @click="handleSave" :loading="submitLoading">保存</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import { useModalInner } from '/@/components/Modal';
+import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { queryById, saveTools } from '../AiragMcp.api';
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const submitLoading = ref(false);
+const pluginId = ref<string | undefined>(undefined);
+const isEdit = ref(false);
+const toolIndex = ref<number>(-1); // 编辑时工具在数组中的索引
+
+// 工具表单
+const toolForm = reactive({
+  name: '',
+  description: '',
+  path: '',
+  method: 'GET',
+});
+
+// 请求参数列表
+const requestParams = ref<any[]>([]);
+// 输出参数列表
+const responseParams = ref<any[]>([]);
+
+// 请求参数表格列
+const requestParamsColumns = [
+  { title: '参数名称', key: 'name', width: 150 },
+  { title: '参数描述', key: 'description', width: 200 },
+  { title: '参数类型', key: 'type', width: 120 },
+  { title: '传入方式', key: 'location', width: 150 },
+  { title: '是否必须', key: 'required', width: 100 },
+  { title: '默认值', key: 'defaultValue', width: 150 },
+  { title: '操作', key: 'action', width: 100 },
+];
+
+// 输出参数表格列
+const responseParamsColumns = [
+  { title: '参数名称', key: 'name', width: 200 },
+  { title: '参数描述', key: 'description', width: 200 },
+  { title: '参数类型', key: 'type', width: 150 },
+  { title: '操作', key: 'action', width: 100 },
+];
+
+let tempIdCounter = 0;
+
+const [registerModal, { closeModal }] = useModalInner(async (data) => {
+  pluginId.value = data?.pluginId;
+  isEdit.value = !!data?.tool;
+  
+  // 重置表单
+  toolForm.name = '';
+  toolForm.description = '';
+  toolForm.path = '';
+  toolForm.method = 'GET';
+  requestParams.value = [];
+  responseParams.value = [];
+  toolIndex.value = -1;
+  
+  if (data?.tool) {
+    // 编辑模式：填充数据
+    toolForm.name = data.tool.name || '';
+    toolForm.description = data.tool.description || '';
+    toolForm.path = data.tool.path || '';
+    toolForm.method = data.tool.method || 'GET';
+    
+    requestParams.value = (data.tool.parameters || []).map((p: any) => ({
+      ...p,
+      tempId: `req_${tempIdCounter++}`,
+      required: p.required !== undefined ? p.required : false,
+    }));
+    
+    responseParams.value = (data.tool.responses || []).map((r: any) => ({
+      ...r,
+      tempId: `resp_${tempIdCounter++}`,
+    }));
+    
+    // 查找工具在列表中的索引
+    if (pluginId.value) {
+      const res = await queryById(pluginId.value);
+      const detail = res.result || res;
+      if (detail.tools) {
+        try {
+          const tools = typeof detail.tools === 'string' ? JSON.parse(detail.tools) : detail.tools;
+          toolIndex.value = tools.findIndex((t: any) => t.name === data.tool.name);
+        } catch (e) {
+          toolIndex.value = -1;
+        }
+      }
+    }
+  }
+});
+
+function validateParamName(record: any) {
+  // 验证参数名称：只允许字母数字下划线
+  if (record.name && !/^[a-zA-Z0-9_]+$/.test(record.name)) {
+    createMessage.warning('参数名称只能包含字母、数字和下划线');
+    record.name = record.name.replace(/[^a-zA-Z0-9_]/g, '');
+  }
+}
+
+function validateResponseParamName(record: any) {
+  // 验证输出参数名称：支持字母、数字、下划线、点、中括号
+  // 只有Object和Array类型可以使用点号和中括号
+  if (!record.name) return;
+  
+  const type = record.type;
+  const name = record.name;
+  
+  if (type === 'Object' || type === 'Array') {
+    // Object和Array类型：支持字母、数字、下划线、点、中括号
+    // 例如：data.name, data[String], data[].name
+    if (!/^[a-zA-Z0-9_.\[\]]+$/.test(name)) {
+      createMessage.warning('参数名称只能包含字母、数字、下划线、点和中括号');
+      record.name = name.replace(/[^a-zA-Z0-9_.\[\]]/g, '');
+    }
+  } else {
+    // 其他类型：只允许字母数字下划线
+    if (!/^[a-zA-Z0-9_]+$/.test(name)) {
+      createMessage.warning('非Object/Array类型参数名称只能包含字母、数字和下划线');
+      record.name = name.replace(/[^a-zA-Z0-9_]/g, '');
+    }
+  }
+}
+
+function onResponseTypeChange(record: any) {
+  // 当类型改变时，如果类型不是Object或Array，清除点号和中括号
+  if (record.type !== 'Object' && record.type !== 'Array') {
+    if (record.name && /[.\[\]]/.test(record.name)) {
+      createMessage.warning('非Object/Array类型不支持使用点号和中括号');
+      record.name = record.name.replace(/[.\[\]]/g, '');
+    }
+  }
+}
+
+function onLocationChange(record: any) {
+  // Body和Form-Data可以同时存在，不再警告
+  // 同时存在时，后端默认使用Body
+}
+
+function handleAddRequestParam() {
+  requestParams.value.push({
+    tempId: `req_${tempIdCounter++}`,
+    name: '',
+    description: '',
+    type: 'String',
+    location: 'Body',
+    required: false,
+    defaultValue: '',
+  });
+}
+
+function handleDeleteRequestParam(index: number) {
+  requestParams.value.splice(index, 1);
+}
+
+function handleAddResponseParam() {
+  responseParams.value.push({
+    tempId: `resp_${tempIdCounter++}`,
+    name: '',
+    description: '',
+    type: 'String',
+  });
+}
+
+function handleDeleteResponseParam(index: number) {
+  responseParams.value.splice(index, 1);
+}
+
+async function handleSave() {
+  try {
+    submitLoading.value = true;
+    
+    // 验证基本字段
+    if (!toolForm.name || !toolForm.description || !toolForm.path || !toolForm.method) {
+      createMessage.warning('请填写完整的工具基本信息');
+      return;
+    }
+
+    // 校验 name 正则 ^[a-zA-Z0-9_-]+$
+    if (!/^[a-zA-Z0-9_-]+$/.test(toolForm.name)) {
+      createMessage.warning('工具名称只能包含字母、数字、下划线和中划线');
+      return;
+    }
+
+    // Body和Form-Data可以同时存在，后端会默认使用Body
+    
+    if (!pluginId.value) {
+      createMessage.error('插件ID不存在');
+      return;
+    }
+    
+    // 加载插件数据
+    const res = await queryById(pluginId.value);
+    const detail = res.result || res;
+    
+    // 解析现有工具列表
+    let tools: any[] = [];
+    if (detail.tools) {
+      try {
+        const parsedTools = typeof detail.tools === 'string' ? JSON.parse(detail.tools) : detail.tools;
+        // 确保是数组
+        if (Array.isArray(parsedTools)) {
+          tools = [...parsedTools]; // 复制数组，避免引用问题
+        } else {
+          tools = [];
+        }
+      } catch (e) {
+        console.error('解析工具列表失败:', e);
+        tools = [];
+      }
+    }
+    
+    // 确保tools是数组
+    if (!Array.isArray(tools)) {
+      tools = [];
+    }
+    
+    // 构建当前工具数据（移除tempId）
+    const parameters = requestParams.value.map(p => {
+      const { tempId: _tempId, ...param } = p;
+      return param;
+    });
+    const responses = responseParams.value.map(r => {
+      const { tempId: _tempId, ...resp } = r;
+      return resp;
+    });
+    
+    const toolData = {
+      name: toolForm.name,
+      description: toolForm.description,
+      path: toolForm.path,
+      method: toolForm.method,
+      enabled: true, // 默认启用
+      parameters,
+      responses,
+    };
+    
+    // 根据编辑状态处理工具
+    if (isEdit.value && toolIndex.value >= 0 && toolIndex.value < tools.length) {
+      // 编辑模式：更新现有工具
+      tools[toolIndex.value] = toolData;
+    } else {
+      // 新增模式：添加新工具
+      // 检查工具名称是否已存在
+      const nameExists = tools.some((t: any) => t.name === toolForm.name);
+      if (nameExists) {
+        createMessage.error('工具名称已存在，请使用不同的名称');
+        return;
+      }
+      tools.push(toolData);
+    }
+    
+    // 构建工具列表JSON字符串
+    const toolsJson = JSON.stringify(tools);
+    
+    // 调用保存工具接口
+    const saveRes = await saveTools(pluginId.value, toolsJson);
+    if (saveRes.success) {
+      createMessage.success('保存成功');
+      emit('success');
+      closeModal();
+    } else {
+      createMessage.error(saveRes.message || '保存失败');
+    }
+  } finally {
+    submitLoading.value = false;
+  }
+}
+
+function close() {
+  closeModal();
+}
+
+// 规范化路径：确保以/开头
+function normalizePath() {
+  if (toolForm.path && !toolForm.path.startsWith('/')) {
+    toolForm.path = '/' + toolForm.path;
+  }
+}
+</script>
+
+<style scoped lang="less">
+.modal {
+  padding: 16px;
+  .tool-edit-content {
+    .section {
+      margin-bottom: 24px;
+      .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+      .section-title {
+        margin: 0;
+        font-size: 16px;
+        font-weight: bold;
+      }
+      :deep(.ant-table) {
+        .ant-table-thead > tr > th {
+          background: #fafafa;
+          padding: 8px;
+        }
+        .ant-table-tbody > tr > td {
+          padding: 8px;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.plugin-tool-edit-modal {
+  .jeecg-basic-modal-close > span { margin-left: 0 !important; }
+  .ant-modal {
+    max-height: 90vh;
+    .ant-modal-body {
+      max-height: calc(90vh - 110px);
+      overflow-y: auto;
+    }
+  }
+}
+</style>
+
diff --git a/src/views/super/airag/aimcp/imgs/mcpLogo.png b/src/views/super/airag/aimcp/imgs/mcpLogo.png
new file mode 100644
index 0000000..e8e35aa
Binary files /dev/null and b/src/views/super/airag/aimcp/imgs/mcpLogo.png differ
diff --git a/src/views/super/airag/aimodel/AiModelList.vue b/src/views/super/airag/aimodel/AiModelList.vue
new file mode 100644
index 0000000..0c48de6
--- /dev/null
+++ b/src/views/super/airag/aimodel/AiModelList.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="model">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol" style="background-color: #f7f8fc !important;">
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="name" label="模板名称">
+              <JInput v-model:value="queryParam.name" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="modelType" label="模板类型">
+              <JDictSelectTag v-model:value="queryParam.modelType" dict-code="model_type" />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-row :span="24" class="model-row">
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
+        <a-card class="add-knowledge-card" @click="handleAdd">
+          <div class="flex">
+            <Icon icon="ant-design:plus-outlined" class="add-knowledge-card-icon" size="20"></Icon>
+            <span class="add-knowledge-card-title">添加模型</span>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :xxl="4" :xl="6" :lg="6" :md="6" :sm="12" :xs="24" v-for="item in modalList" v-if="modalList && modalList.length>0">
+        <a-card class="model-card" @click="handleEditClick(item)">
+          <div class="model-header">
+            <div class="flex">
+              <img :src="getImage(item.provider)" :class="['header-img', item.provider === 'VLLM' ? 'header-img-lg' : '']" />
+              <div class="header-text">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="mt-6">
+            <ul>
+              <li class="flex mr-14" style="align-items: center;">
+                <span class="label" style="flex-shrink: 0;">模型类型</span>
+                <span class="described" style="flex: 1; min-width: 0;">{{ item.modelType_dictText }}</span>
+                <a-tooltip v-if="!item.activateFlag" title="未激活模型暂无法被系统其他功能调用，激活后可正常使用。">
+                  <span class="no-activate">未激活</span>
+                </a-tooltip>
+              </li>
+              <li class="flex mr-14 mt-6" style="align-items: center;">
+                <span class="label" style="flex-shrink: 0;">基础模型</span>
+                <span class="described" style="flex: 1; min-width: 0;">{{ item.modelName }}</span>
+              </li>
+              <li class="flex mr-14 mt-6" style="align-items: center;">
+                <span class="label" style="flex-shrink: 0;">创建者</span>
+                <span class="described" style="flex: 1; min-width: 0;">{{ item.createBy_dictText || item.createBy }}</span>
+              </li>
+            </ul>
+          </div>
+          <div class="model-btn">
+            <a-button class="model-icon" size="small" @click.prevent.stop="handleEditClick(item)">
+              <Icon icon="ant-design:edit-outlined"></Icon>
+            </a-button>
+            <a-dropdown placement="bottomRight" :trigger="['click']" :getPopupContainer="(node) => node.parentNode">
+              <div class="ant-dropdown-link pointer model-icon" @click.prevent.stop>
+                <Icon icon="ant-design:ellipsis-outlined"></Icon>
+              </div>
+              <template #overlay>
+                <a-menu>
+                  <!--<a-menu-item key="param" @click="handleParamClick(item.id)">
+                    <Icon icon="ant-design:setting-outlined" size="16"></Icon>
+                    <span class="ml-4">模型参数配置</span>
+                  </a-menu-item>-->
+                  <a-menu-item v-if="item.activateFlag" key="deactivate" @click.prevent.stop="handleDeactivateClick(item)">
+                    <Icon icon="ant-design:stop-outlined" size="16"></Icon> 取消激活
+                  </a-menu-item>
+                  <a-menu-item key="delete" @click.prevent.stop="handleDeleteClick(item)">
+                    <Icon icon="ant-design:delete-outlined" size="16"></Icon> 删除
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <Pagination
+      v-if="modalList.length > 0"
+      :current="pageNo"
+      :page-size="pageSize"
+      :page-size-options="pageSizeOptions"
+      :total="total"
+      :showQuickJumper="true"
+      :showSizeChanger="true"
+      @change="handlePageChange"
+      class="list-footer"
+      size="small"
+      :show-total="() => `共${total}条` "
+    />
+  </div>
+
+  <!--添加模型弹窗-->
+  <AiModelModal @register="registerModal" @success="reload"></AiModelModal>
+</template>
+
+<script lang="ts">
+  import { reactive, ref } from 'vue';
+  import AiModelModal from './components/AiModelModal.vue';
+  import { useModal } from '@/components/Modal';
+  import { deleteModel, list, editModel } from './model.api';
+  import { imageList } from './model.data';
+  import { Pagination } from 'ant-design-vue';
+  import JInput from '@/components/Form/src/jeecg/components/JInput.vue';
+  import JSelectUser from '@/components/Form/src/jeecg/components/JSelectUser.vue';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+
+  export default {
+    name: 'ModelList',
+    components: {
+      JDictSelectTag,
+      JSelectUser,
+      JInput,
+      AiModelModal,
+      Pagination,
+    },
+    setup() {
+      //模型列表
+      const modalList = ref([]);
+
+      const [registerModal, { openModal }] = useModal();
+
+      //当前页数
+      const pageNo = ref<number>(1);
+      //每页条数
+      const pageSize = ref<number>(10);
+      //总条数
+      const total = ref<number>(0);
+      //可选择的页数
+      const pageSizeOptions = ref<any>(['10', '20', '30']);
+      //查询参数
+      const queryParam = reactive<any>({});
+      //查询区域label宽度
+      const labelCol = reactive({
+        xs: 24,
+        sm: 4,
+        xl: 6,
+        xxl: 6,
+      });
+      //查询区域组件宽度
+      const wrapperCol = reactive({
+        xs: 24,
+        sm: 20,
+      });
+      //查询区域表单的ref
+      const formRef = ref();
+
+      //页面初始化执行列表查询
+      reload();
+
+      /**
+       * 新增
+       */
+      async function handleAdd() {
+        openModal(true, {});
+      }
+
+      /**
+       * 编辑
+       *
+       * @param item
+       */
+      function handleEditClick(item) {
+        openModal(true, {
+          id: item.id,
+        });
+      }
+
+      /**
+       * 重新加载数据
+       */
+      function reload() {
+        let params = {
+          pageNo: pageNo.value,
+          pageSize: pageSize.value,
+          column: 'createTime',
+          order: 'desc'
+        };
+        Object.assign(params, queryParam);
+        list(params).then((res) => {
+          if (res.success) {
+            modalList.value = res.result.records;
+            total.value = res.result.total;
+          } else {
+            modalList.value = [];
+            total.value = 0;
+          }
+        });
+      }
+
+      /**
+       * 分页改变事件
+       * @param page
+       * @param current
+       */
+      function handlePageChange(page, current) {
+        pageNo.value = page;
+        pageSize.value = current;
+        reload();
+      }
+
+      /**
+       * 获取图片
+       * @param name
+       */
+      const getImage = (name) => {
+        return imageList.value[name];
+      };
+
+      /**
+       * 删除模型
+       * @param item
+       */
+      async function handleDeleteClick(item) {
+        if(modalList.value.length == 1 && pageNo.value > 1) {
+          pageNo.value = pageNo.value - 1;
+        }
+        await deleteModel({ id: item.id, name: item.name }, reload);
+      }
+
+      /**
+       * 取消激活模型
+       * @param item
+       */
+      async function handleDeactivateClick(item) {
+        await editModel({ id: item.id, activateFlag: 0 });
+        reload();
+      }
+
+      /**
+       * 查询
+       */
+      function searchQuery() {
+        pageNo.value = 1;
+        reload();
+      }
+
+      /**
+       * 重置
+       */
+      function searchReset() {
+        formRef.value.resetFields();
+        queryParam.createBy = '';
+        //刷新数据
+        reload();
+      }
+
+      /**
+       * 参数配置点击事件
+       *
+       * @param id
+       */
+      function handleParamClick(id) {}
+
+      return {
+        handleAdd,
+        handleEditClick,
+        registerModal,
+        modalList,
+        reload,
+        pageNo,
+        pageSize,
+        pageSizeOptions,
+        total,
+        handlePageChange,
+        getImage,
+        handleDeleteClick,
+        handleDeactivateClick,
+        searchQuery,
+        searchReset,
+        queryParam,
+        labelCol,
+        wrapperCol,
+        formRef,
+        handleParamClick,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .model {
+    height: calc(100vh - 115px);
+    background: #f7f8fc;
+    padding: 24px;
+    overflow-y: auto;
+    .model-row {
+      max-height: calc(100% - 100px);
+      margin-top: 20px;
+      overflow-y: auto;
+      .model-header {
+        position: relative;
+        font-size: 14px;
+        .header-img {
+          width: 32px;
+          height: 32px;
+          margin-right: 12px;
+          object-fit: contain;
+        }
+        .header-img-lg {
+          width: 48px;
+          height: 48px;
+        }
+        .header-text {
+          font-size: 16px;
+          font-weight: bold;
+          color: #354052;
+          width: calc(100% - 80px);
+          overflow: hidden;
+          align-content: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .label {
+    font-weight: 400;
+    font-size: 12px;
+    align-self: center;
+    color: #8a8f98;
+    overflow-wrap: break-word;
+  }
+  .no-activate{
+    font-size: 10px;
+    color: #ff4d4f;
+    border: 1px solid #ff4d4f;
+    border-radius: 10px;
+    padding: 0 6px;
+    height: 14px;
+    line-height: 12px;
+    margin-left: 6px;
+    align-self: center;
+  }
+  .described {
+    font-weight: 400;
+    margin-left: 14px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 12px;
+    flex: 1;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+
+  .mr-14 {
+    margin-right: 14px;
+  }
+  .mt-6 {
+    margin-top: 6px;
+  }
+
+  .ml-4 {
+    margin-left: 4px;
+  }
+
+  .model-btn {
+    position: absolute;
+    right: 4px;
+    top: 6px;
+    height: auto;
+    display: none;
+  }
+  .model-card {
+    margin-right: 20px;
+    margin-bottom: 20px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    height: 152px;
+    cursor: pointer;
+  }
+  .model-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+    .model-btn {
+      display: flex;
+    }
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .list-footer {
+    text-align: right;
+    margin-top: 5px;
+  }
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    :deep(.ant-form) {
+      background-color: transparent;
+    }
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+  }
+
+  .add-knowledge-card {
+    margin-bottom: 20px;
+    background: #fcfcfd;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 2px 4px #e6e6e6;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    cursor: pointer;
+    height: 152px;
+    width: calc(100% - 20px);
+    .add-knowledge-card-icon {
+      padding: 8px;
+      color: #1f2329;
+      background-color: #f5f6f7;
+      margin-right: 12px;
+    }
+    .add-knowledge-card-title {
+      font-size: 16px;
+      color:#1f2329;
+      font-weight: 400;
+      align-self: center;
+    }
+  }
+
+  .add-knowledge-card:hover {
+    box-shadow: 0 6px 12px #d0d3d8;
+  }
+  .model-icon{
+    background-color: unset;
+    border: none;
+    margin-right: 2px;
+  }
+  .model-icon:hover{
+    color: #000000;
+    background-color: #e9ecf2;
+    border: none;
+  }
+  .ant-dropdown-link{
+    font-size: 14px;
+    height: 24px;
+    padding: 0 7px;
+    border-radius: 4px;
+    align-content: center;
+    text-align: center;
+  }
+</style>
diff --git a/src/views/super/airag/aimodel/components/AiModelModal.vue b/src/views/super/airag/aimodel/components/AiModelModal.vue
new file mode 100644
index 0000000..a3f16db
--- /dev/null
+++ b/src/views/super/airag/aimodel/components/AiModelModal.vue
@@ -0,0 +1,625 @@
+<template>
+  <BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" wrapClassName="ai-model-modal">
+    <div class="modal">
+      <div class="header">
+        <span class="header-title">
+          <span v-if="dataIndex ==='list' || dataIndex ==='add'" :class="dataIndex === 'list' ? '' : 'add-header-title pointer'" @click="goToList">
+            选择供应商
+            <a-tooltip title="供应商文档" v-if="dataIndex ==='list'">
+              <a style="color: #333333" href="https://help.jeecg.com/aigc/guide/model/#2-%E4%BE%9B%E5%BA%94%E5%95%86%E9%80%89%E6%8B%A9" target="_blank">
+                <Icon style="position:relative;left: -2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+              </a>
+            </a-tooltip>
+          </span>
+          <span v-if="dataIndex === 'add'" class="add-header-title"> > </span>
+          <span v-if="dataIndex === 'add'" style="color: #1f2329">添加 {{ providerName }}</span>
+        </span>
+
+        <a-select v-if="dataIndex === 'list'" :bordered="false" class="header-select" size="small" v-model:value="modelType" @change="handleChange">
+          <a-select-option v-for="item in modelTypeOption" :value="item.value">{{ item.text }}</a-select-option>
+        </a-select>
+      </div>
+      <div class="model-content" v-if="dataIndex === 'list'">
+        <a-row :span="24">
+          <a-col :xxl="12" :xl="12" :lg="12" :md="12" :sm="12" :xs="24" v-for="item in modelTypeList">
+            <a-card class="model-card" @click="handleClick(item)">
+              <div class="model-header">
+                <div class="flex">
+                  <img :src="getImage(item.value)" :class="['header-img', item.value === 'VLLM' ? 'header-img-lg' : '']" />
+                  <div class="header-text">{{ item.title }}</div>
+                </div>
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </div>
+      <a-tabs v-model:activeKey="activeKey" v-if="dataIndex === 'add' || dataIndex === 'edit'">
+        <a-tab-pane :key="1">
+          <template #tab>
+            <span style="display: flex">
+            基础信息
+            <a-tooltip title="基础信息文档">
+              <a @click.stop style="color: unset" href="https://help.jeecg.com/aigc/guide/model/#31-%E5%A1%AB%E5%86%99%E5%9F%BA%E7%A1%80%E4%BF%A1%E6%81%AF" target="_blank">
+                <Icon style="position:relative;left:2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+              </a>
+            </a-tooltip>
+          </span>
+          </template>
+          <div class="model-content">
+            <BasicForm @register="registerForm">
+              <template #modelType="{ model, field }">
+                <a-select v-model:value="model[field]" @change="handleModelTypeChange" :disabled="modelTypeDisabled">
+                  <a-select-option v-for="item in modelTypeAddOption" :value="item">
+                    <span v-if="item === 'LLM'">语言模型</span>
+                    <span v-else-if="item === 'EMBED'">向量模型</span>
+                    <span v-else-if="item === 'IMAGE'">图像模型</span>
+                  </a-select-option>
+                </a-select>
+              </template>
+
+              <template #extraParams="{ model, field }">
+                <a-input v-model:value="model[field]" readonly placeholder="点击右侧按钮编辑JSON参数">
+                  <template #suffix>
+                    <FullscreenOutlined style="cursor: pointer;" @click="openExtraParamsModal" />
+                  </template>
+                </a-input>
+                <div style="margin-top: 4px; color: #999; font-size: 12px; line-height: 1.5;">
+                  目前只支持图片传递，固定格式为 "image_url":"图片地址"（适用于qwen-vl-ocr等视觉模型）<br/>
+                  在qwen3.5-plus最新视觉模型中需要额外传递 "incremental_output": true
+                </div>
+                <a-modal v-model:open="extraParamsVisible" title="编辑额外参数" width="600px" @ok="saveExtraParams" destroyOnClose>
+                  <JCodeEditor v-model:value="extraParamsTemp"  language="javascript" fullScreen height="500px" />
+                </a-modal>
+              </template>
+
+              <template #modelName="{ model, field }">
+                <AutoComplete v-model:value="model[field]" :options="modelNameAddOption" :filter-option="filterOption">
+                  <template #option="{ value, label, descr, type }">
+                    <a-tooltip placement="right" color="#ffffff" :overlayInnerStyle="{ color:'#646a73' }">
+                      <template #title>
+                        <div v-html="getTitle(descr)"></div>
+                      </template>
+                      <div style="display: flex;justify-content: space-between;">
+                        <span>{{label}}</span>
+                        <div>
+                          <a-tag v-if="type && type.split(',').includes('text')" color="#E8D7C3">文本</a-tag>
+                          <a-tag v-if="type && type.split(',').includes('imageGen')" color="#FFEBD3">图像生成</a-tag>
+                          <a-tag v-if="type && type.split(',').includes('image')" color="#C3D9DC">图像分析</a-tag>
+                          <a-tag v-if="type && type.split(',').includes('vector')" color="#D4E0D8">向量</a-tag>
+                          <a-tag v-if="type && type.split(',').includes('embeddings')" color="#FFEBD3">文本嵌入</a-tag>
+                        </div>
+                      </div>
+                    </a-tooltip>
+                  </template>
+                </AutoComplete>
+              </template>
+            </BasicForm>
+            <a-alert v-if="!modelActivate" message="模型未激活，请通过下方「保存并激活」按钮激活当前模型" type="warning" show-icon />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane :key="2"  v-if="modelParamsShow">
+          <template #tab>
+            <span style="display: flex">
+            高级配置
+            <a-tooltip title="高级配置文档">
+              <a @click.stop style="color: unset" href="https://help.jeecg.com/aigc/guide/model/#32-%E9%85%8D%E7%BD%AE%E9%AB%98%E7%BA%A7%E5%8F%82%E6%95%B0" target="_blank">
+                <Icon style="position:relative;left:2px;top:1px" icon="ant-design:question-circle-outlined"></Icon>
+              </a>
+            </a-tooltip>
+          </span>
+          </template>
+          <AiModelSeniorForm ref="modelParamsRef" :modelParams="modelParams"></AiModelSeniorForm>
+        </a-tab-pane>
+      </a-tabs>
+
+    </div>
+    <template v-if="dataIndex === 'add' || dataIndex === 'edit'" #footer>
+      <a-button @click="cancel">关闭</a-button>
+      <a-button @click="test" v-if="modelActivate" :loading="testLoading" type="default">测试连接</a-button>
+      <a-button @click="save" type="primary" ghost="true">保存</a-button>
+      <a-button @click="test(false)" v-if="!modelActivate" :loading="testLoading" type="primary" >保存并激活</a-button>
+    </template>
+    <template v-else #footer> </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { initDictOptions } from '@/utils/dict';
+  import model from './model.json';
+  import { AutoComplete } from 'ant-design-vue';
+
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { formSchema, imageList } from '../model.data';
+  import { editModel, queryById, saveModel, testConn } from '../model.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const {createMessage: $message, createConfirm} = useMessage();
+  import { FullscreenOutlined } from '@ant-design/icons-vue';
+  import AiModelSeniorForm from './AiModelSeniorForm.vue';
+  import JCodeEditor from '/@/components/Form/src/jeecg/components/JCodeEditor.vue';
+  import { cloneDeep } from "lodash-es";
+  export default {
+    name: 'AddModelModal',
+    components: {
+      BasicForm,
+      BasicModal,
+      AiModelSeniorForm,
+      AutoComplete,
+      JCodeEditor,
+      FullscreenOutlined,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      //ai类型数据
+      const modelTypeData = ref<any>([]);
+      //模型类型下拉框
+      const modelTypeOption = ref<any>([]);
+      //模型类型禁用状态
+      const modelTypeDisabled = ref<boolean>(false);
+      //模型类型
+      const modelType = ref<string>('all');
+      //模型供应商
+      const modelTypeList = ref<any>([]);
+      //list:供应商选择页面，add 添加编辑
+      const dataIndex = ref<string>('list');
+      //供应商名称
+      const providerName = ref<string>('');
+      //添加模型类型的option
+      const modelTypeAddOption = ref<any>([]);
+      //添加模型名称的option
+      const modelNameAddOption = ref<any>([]);
+      //模型数据
+      const modelData = ref<any>({});
+      //tab切换对应的key
+      const activeKey = ref<number>(1);
+      //模型参数
+      const modelParams = ref<any>({});
+      //是否显示模型参数
+      const modelParamsShow = ref<boolean>(false);
+      //模型参数ref
+      const modelParamsRef = ref();
+      //测试按钮loading状态
+      const testLoading = ref<boolean>(false);
+      //模型是否已激活
+      const modelActivate = ref<boolean>(false);
+      //特殊参数
+      const extraParamsVisible = ref<boolean>(false);
+      const extraParamsTemp = ref<string>('');
+
+      /**
+       * 打开特殊参数编辑弹窗
+       */
+      function openExtraParamsModal() {
+        const formVal = getFieldsValue();
+        let val = formVal.extraParams || '';
+        if (val) {
+          try {
+            val = JSON.stringify(JSON.parse(val), null, 2);
+          } catch (e) {}
+        }
+        extraParamsTemp.value = val;
+        extraParamsVisible.value = true;
+      }
+
+      /**
+       * 保存特殊参数
+       */
+      function saveExtraParams() {
+        const val = extraParamsTemp.value;
+        if (val) {
+          try {
+            JSON.parse(val);
+          } catch (e) {
+            $message.error('JSON格式不正确，请检查');
+            return;
+          }
+        }
+        setFieldsValue({ extraParams: val });
+        extraParamsVisible.value = false;
+      }
+
+      const getImage = (name) => {
+        return imageList.value[name];
+      };
+      //自动填充文本搜索事件
+      const filterOption = (input: string, option: any)=>{
+        return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
+      }
+
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate, clearValidate }] = useForm({
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        layout: 'vertical',
+        wrapperCol: { span: 24 },
+        labelCol: { span: 24 },
+      });
+
+      //注册modal
+      const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+        activeKey.value = 1;
+        modelParamsShow.value = false;
+        if(dataIndex.value !== 'list') {
+          //重置表单
+          await resetFields();
+        }
+        setModalProps({ minHeight: 500 });
+        if (data.id) {
+          dataIndex.value = 'edit';
+          let values = await queryById({ id: data.id });
+          if (values) {
+            if(values.result.credential){
+              let credential = JSON.parse(values.result.credential);
+              if(credential.secretKey){
+                values.result.secretKey = credential.secretKey;
+              }
+              if(credential.apiKey){
+                values.result.apiKey = credential.apiKey;
+              }
+              if (credential.httpVersionOne) {
+                values.result.httpVersionOne = credential.httpVersionOne;
+              }
+            }
+            let provider = values.result.provider;
+            let data = model.data.filter((item) => {
+              return item.value.includes(provider);
+            });
+            if (data && data.length > 0) {
+              modelTypeAddOption.value = data[0].type;
+              modelNameAddOption.value = data[0][values.result.modelType];
+            }
+            if(values.result.modelType && values.result.modelType === 'LLM'){
+              modelParamsShow.value = true;
+            }
+            if (values.result.activateFlag) {
+              modelActivate.value = true;
+            }else{
+              modelActivate.value = false;
+            }
+            if(values.result.modelParams){
+              let allParams = JSON.parse(values.result.modelParams);
+              if (allParams.extraParams) {
+                values.result.extraParams = JSON.stringify(allParams.extraParams, null, 2);
+                delete allParams.extraParams;
+              }
+              modelParams.value = allParams;
+            }
+            modelTypeDisabled.value = true;
+            //表单赋值
+            await setFieldsValue({
+              ...values.result,
+            });
+            //初始化模型提供者
+            initModelProvider();
+          }
+        } else {
+          modelTypeDisabled.value = false;
+          //初始化模型提供者
+          initModelProvider();
+          dataIndex.value = 'list';
+          modelNameAddOption.value = [];
+          modelActivate.value = false;
+        }
+      });
+
+      //初始化模型类型
+      initModelTypeOption();
+      
+      /**
+       * 初始化 模型类型字典
+       */
+      function initModelTypeOption() {
+        initDictOptions('model_type').then((data) => {
+          modelTypeOption.value = cloneDeep(data);
+          //update-begin---author:wangshuai---date:2025-03-04---for: 解决页面tab刷新一次就多一个全部类型的选项---
+          if(data[0].value != 'all'){
+            modelTypeOption.value.unshift({
+              text: '全部类型',
+              value: 'all',
+            });
+          }
+          //update-end---author:wangshuai---date:2025-03-04---for: 解决页面tab刷新一次就多一个全部类型的选项---
+        });
+      }
+
+      /**
+       * 下拉框值选中事件
+       * @param value
+       */
+      function handleChange(value) {
+        if ('all' == value) {
+          modelTypeList.value = model.data;
+          return;
+        }
+        let data = model.data.filter((item) => {
+          return item.type.includes(value);
+        });
+        modelTypeList.value = data;
+      }
+
+      /**
+       * 初始化模型提供者
+       */
+      function initModelProvider() {
+        modelTypeList.value = model.data;
+      }
+
+      /**
+       * 供应商点击事件
+       *
+       * @param item
+       */
+      function handleClick(item) {
+        dataIndex.value = 'add';
+        modelData.value = item;
+        providerName.value = item.title;
+        modelTypeAddOption.value = item.type;
+        setTimeout(()=>{
+          setFieldsValue({ 'provider': item.value, 'baseUrl': item.baseUrl })
+        },100)
+      }
+
+      /**
+       * 保存
+       */
+      async function save() {
+        try {
+          setModalProps({ confirmLoading: true });
+          let values = await validate();
+          let credential = {
+            apiKey: values.apiKey,
+            secretKey: values.secretKey,
+            httpVersionOne: values.httpVersionOne,
+          }
+          let params = {};
+          if(modelParamsRef.value){
+            let seniorParams = modelParamsRef.value.emitChange();
+            if(seniorParams){
+              params = { ...seniorParams };
+            }
+          }
+          if (values.extraParams) {
+            try {
+              params.extraParams = JSON.parse(values.extraParams);
+            } catch(e) {}
+          }
+          if (Object.keys(params).length > 0) {
+            values.modelParams = JSON.stringify(params);
+          }
+          delete values.extraParams;
+          if(modelActivate.value){
+            values.activateFlag = 1
+          }else{
+            values.activateFlag = 0;
+          }
+          values.credential = JSON.stringify(credential);
+          //新增
+          if (!values.id) {
+            values.provider = modelData.value.value;
+            await saveModel(values);
+            closeModal();
+            emit('success');
+          } else {
+            await editModel(values);
+            closeModal();
+            emit('success');
+          }
+        }catch(e){
+          if(e.hasOwnProperty('errorFields')){
+            activeKey.value = 1;
+          }
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      /**
+       * 取消
+       */
+      function cancel() {
+        dataIndex.value = 'list';
+        closeModal();
+        emit('success');
+      }
+
+      /**
+       * 测试连接
+       */
+      async function test(onlyTest = false) {
+        try {
+          testLoading.value = true;
+          let values = await validate();
+          let credential = {
+            apiKey: values.apiKey,
+            secretKey: values.secretKey,
+            httpVersionOne: values.httpVersionOne,
+          };
+          let params = {};
+          if (modelParamsRef.value) {
+            //update-begin---author:wangshuai---date:2026-03-20---for:【issues/8】保存激活qwen-vl-ocr模型报错---
+            let seniorParams = modelParamsRef.value.emitChange();
+            if (seniorParams) {
+              params = { ...seniorParams };
+            //update-end---author:wangshuai---date:2026-03-20---for:【issues/8】保存激活qwen-vl-ocr模型报错---
+            }
+          }
+          if (values.extraParams) {
+            try {
+              params.extraParams = JSON.parse(values.extraParams);
+            } catch(e) {}
+          }
+          if (Object.keys(params).length > 0) {
+            values.modelParams = JSON.stringify(params);
+          }
+          delete values.extraParams;
+          values.credential = JSON.stringify(credential);
+          if (!values.provider) {
+            values.provider = modelData.value.value;
+          }
+          //测试
+          await testConn(values).then(async (result) => {
+            if(onlyTest){
+              $message.success('测试连接成功');
+              return true;
+            }
+            modelActivate.value = true;
+            await save();
+          });
+        } catch (e) {
+          if (e.hasOwnProperty('errorFields')) {
+            activeKey.value = 1;
+          }
+        } finally {
+          testLoading.value = false;
+        }
+      }
+
+      /**
+       * 模型类型选择事件
+       * @param value
+       */
+      async function handleModelTypeChange(value) {
+        await setFieldsValue({ modelName: '' });
+        await clearValidate('modelName');
+        await setFieldsValue({
+          modelName: modelData.value[value+'DefaultValue']
+        })
+        modelNameAddOption.value = modelData.value[value];
+        if(value === 'LLM'){
+          modelParamsShow.value = true;
+        }else{
+          modelParamsShow.value = false;
+        }
+        if(value === "IMAGE" && modelData.value.baseImageUrl){
+          setFieldsValue({ 'baseUrl': modelData.value.baseImageUrl })
+        } else if(modelData.value.baseUrl) {
+          setFieldsValue({ 'baseUrl': modelData.value.baseUrl })
+        }
+      }
+
+      /**
+       * 选择供应商
+       */
+      function goToList() {
+        if (dataIndex.value === 'add') {
+          dataIndex.value = 'list';
+        }
+      }
+
+      /**
+       * 获取标题
+       * @param title
+       */
+      function getTitle(title) {
+        if(!title){
+          return "暂无描述内容";
+        }
+        return title.replaceAll("\n","<br>")
+      }
+      
+      return {
+        registerModal,
+        modelTypeData,
+        modelTypeOption,
+        modelType,
+        handleChange,
+        modelTypeList,
+        getImage,
+        handleClick,
+        dataIndex,
+        providerName,
+        save,
+        cancel,
+        registerForm,
+        handleModelTypeChange,
+        modelTypeAddOption,
+        modelNameAddOption,
+        goToList,
+        modelTypeDisabled,
+        activeKey,
+        modelParams,
+        modelParamsShow,
+        modelActivate,
+        modelParamsRef,
+        filterOption,
+        getTitle,
+        test,
+        testLoading,
+        extraParamsVisible,
+        extraParamsTemp,
+        openExtraParamsModal,
+        saveExtraParams,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .modal {
+    padding: 12px 20px 20px 20px;
+    .header {
+      padding: 0 24px 24px 0;
+      display: flex;
+      justify-content: space-between;
+      .header-title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .header-select {
+        margin-right: 10px;
+      }
+      .add-header-title {
+        color: #646a73;
+      }
+    }
+    .model-content {
+      .model-header {
+        position: relative;
+        font-size: 14px;
+        .header-img {
+          width: 32px;
+          height: 32px;
+          margin-right: 12px;
+          object-fit: contain;
+        }
+        .header-img-lg {
+          width: 48px;
+          height: 48px;
+        }
+        .header-text {
+          width: calc(100% - 80px);
+          overflow: hidden;
+          align-content: center;
+        }
+      }
+    }
+    .model-card {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 12px;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+  
+  :deep(.jeecg-basic-modal-close){
+    span{
+      margin-left: 0 !important;
+    }
+  }
+</style>
+<style lang="less">
+.ai-model-modal{
+  .jeecg-basic-modal-close > span{
+    margin-left: 0 !important;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aimodel/components/AiModelSeniorForm.vue b/src/views/super/airag/aimodel/components/AiModelSeniorForm.vue
new file mode 100644
index 0000000..5a05aac
--- /dev/null
+++ b/src/views/super/airag/aimodel/components/AiModelSeniorForm.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="model-params-popover">
+    <div class="params" v-if="type === 'model'">
+      <span style="font-size:14px">参数</span>
+      <a-select value="加载预设" style="width: 96px" size="small" @change="onLoadPreset">
+        <a-select-option v-for="(preset, idx) of presets" :value="idx" :key="idx">
+          <a-space>
+            <Icon :icon="preset.icon" />
+            <span>{{ preset.name }}</span>
+          </a-space>
+        </a-select-option>
+      </a-select>
+    </div>
+    <!-- 模型温度 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>模型温度</span>
+        <a-tooltip :title="tips.temperature">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="temperatureEnable" size="small"/>
+        <a-slider v-bind="temperatureProps" v-model:value="model.temperature" :disabled="model['temperature'] === null"/>
+        <a-input-number v-bind="temperatureProps" v-model:value="model.temperature" :disabled="model['temperature'] === null"/>
+      </a-space>
+    </div>
+    <!-- 词汇属性 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>词汇属性</span>
+        <a-tooltip :title="tips.topP">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="topPEnable" size="small"/>
+        <a-slider v-bind="topPProps" v-model:value="model.topP" :disabled="model['topP'] === null"/>
+        <a-input-number v-bind="topPProps" v-model:value="model.topP" :disabled="model['topP'] === null"/>
+      </a-space>
+    </div>
+    <!-- 话题属性 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>话题属性</span>
+        <a-tooltip :title="tips.presencePenalty">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="presencePenaltyEnable" size="small" />
+        <a-slider v-bind="presencePenaltyProps" v-model:value="model.presencePenalty" :disabled="model['presencePenalty'] === null"/>
+        <a-input-number v-bind="presencePenaltyProps" v-model:value="model.presencePenalty" :disabled="model['presencePenalty'] === null"/>
+      </a-space>
+    </div>
+    <!-- 重复属性 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>重复属性</span>
+        <a-tooltip :title="tips.frequencyPenalty">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="frequencyPenaltyEnable" size="small" />
+        <a-slider v-bind="frequencyPenaltyProps" v-model:value="model.frequencyPenalty" :disabled="model['frequencyPenalty'] === null"/>
+        <a-input-number v-bind="frequencyPenaltyProps" v-model:value="model.frequencyPenalty" :disabled="model['frequencyPenalty'] === null"/>
+      </a-space>
+    </div>
+    <!-- 最大回复 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>最大回复</span>
+        <a-tooltip :title="tips.maxTokens">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="maxTokensEnable" size="small" />
+        <a-slider v-bind="maxTokensProps" v-model:value="model.maxTokens" :disabled="model['maxTokens'] === null"/>
+        <a-input-number v-bind="maxTokensProps" v-model:value="model.maxTokens" :disabled="model['maxTokens'] === null"/>
+      </a-space>
+    </div>
+    <!-- timeout 超时 -->
+    <div class="setting-item" v-if="type === 'model'">
+      <div class="label">
+        <span>超时时间</span>
+        <a-tooltip :title="tips.timeout">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="timeoutEnable" size="small" />
+        <a-slider v-bind="timeoutProps" v-model:value="model.timeout" :disabled="model['timeout'] === null"/>
+        <a-input-number v-bind="timeoutProps" v-model:value="model.timeout" :disabled="model['timeout'] === null"/>
+      </a-space>
+    </div>
+    <!-- top k -->
+    <div class="setting-item" v-if="type === 'knowledge'">
+      <div class="label">
+        <span>Top K</span>
+        <a-tooltip :title="tips.topNumber">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="topNumberEnable" size="small" />
+        <a-slider v-bind="topNumberProps" v-model:value="model.topNumber" :disabled="model['topNumber'] === null"/>
+        <a-input-number v-bind="topNumberProps" v-model:value="model.topNumber" :disabled="model['topNumber'] === null"/>
+      </a-space>
+    </div>
+    <!-- Score 阈值 -->
+    <div class="setting-item" v-if="type === 'knowledge'">
+      <div class="label">
+        <span>Score 阈值</span>
+        <a-tooltip :title="tips.similarity">
+          <Icon icon="ant-design:question-circle" />
+        </a-tooltip>
+      </div>
+      <a-space>
+        <a-switch v-model:checked="similarityEnable" size="small" />
+        <a-slider v-bind="similarityProps" v-model:value="model.similarity" :disabled="model['similarity'] === null"/>
+        <a-input-number v-bind="similarityProps" v-model:value="model.similarity" :disabled="model['similarity'] === null"/>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, computed } from 'vue';
+  import { cloneDeep, omit } from 'lodash-es';
+
+  export default {
+    name: 'AiModelSeniorForm',
+    components: {},
+    props: {
+      modelParams: {
+        type: Object,
+        default: {}
+      },
+      type: {
+        type: String,
+        default: 'model'
+      }
+    },
+    emits: ['success', 'register', 'updateModel'],
+    setup(props, { emit }) {
+      // 预设参数
+      const presets = [
+        {
+          name: '创意',
+          icon: 'fxemoji:star',
+          params: {
+            temperature: 0.8,
+            topP: 0.9,
+            presencePenalty: 0.1,
+            frequencyPenalty: 0.1,
+            maxTokens: null,
+            timeout: 60,
+          },
+        },
+        {
+          name: '平衡',
+          icon: 'noto:balance-scale',
+          params: {
+            temperature: 0.5,
+            topP: 0.8,
+            presencePenalty: 0.2,
+            frequencyPenalty: 0.3,
+            maxTokens: null,
+            timeout: 60,
+          },
+        },
+        {
+          name: '精确',
+          icon: 'twemoji:direct-hit',
+          params: {
+            temperature: 0.2,
+            topP: 0.7,
+            presencePenalty: 0.5,
+            frequencyPenalty: 0.5,
+            maxTokens: null,
+            timeout: 60,
+          },
+        },
+      ];
+
+      // 参数介绍
+      const tips = {
+        temperature: '值越大，回复内容越赋有多样性创造性、随机性；设为0根据事实回答，希望得到精准答案应该降低该参数；日常聊天建议0.5-0.8。',
+        topP: '值越小，Ai生成的内容越单调也越容易理解；值越大，Ai回复的词汇围越大，越多样化。',
+        presencePenalty: '值越大，越能够让Ai更好地控制新话题的引入，建议微调或不变。',
+        frequencyPenalty: '值越大，越能够让Ai更好地避免重复之前说过的话，建议微调或不变。',
+        maxTokens:
+          '设置Ai最大回复内容大小，会影响返回结果的长度。普通聊天建议500-800；短文生成建议800-2000；代码生成建议2000-3600；长文生成建议4000左右（或选择长回复模型)',
+        topNumber: '用于筛选与用户问题相似度最高的文本片段。系统同时会根据选用模型上下文窗口大小动态调整分段数量。',
+        similarity: '用于设置文本片段筛选的相似度阅值。',
+        timeout: '等待AI响应的最长时间，单位为秒。'
+      };
+
+      // 参数：温度
+      const temperatureProps = ref<any>({
+        min: 0.1,
+        max: 1,
+        step: 0.1,
+      });
+
+      // 参数：词汇属性
+      const topPProps = ref<any>({
+        min: 0.1,
+        max: 1,
+        step: 0.1,
+      });
+      // 参数：话题属性
+      const presencePenaltyProps = ref<any>({
+        min: -2,
+        max: 2,
+        step: 0.1,
+      });
+      // 参数：重复属性
+      const frequencyPenaltyProps = ref<any>({
+        min: -2,
+        max: 2,
+        step: 0.1,
+      });
+      // 参数：最大回复
+      const maxTokensProps = ref<any>({
+        min: 1,
+        max: 16000,
+        step: 1,
+      });    
+      
+      // 参数：topk
+      const topNumberProps = ref<any>({
+        min: 1,
+        max: 10,
+        step: 1,
+      });     
+      
+      // 参数：Score 阈值
+      const similarityProps = ref<any>({
+        min: 0.1,
+        max: 1,
+        step: 0.1,
+      });
+      
+      //参数：超时时间
+      const timeoutProps = ref<any>({
+        min: 1,
+        step: 1,
+        max: 3600,
+      })
+      
+      
+      //参数对象
+      const model = ref<any>(props.modelParams || {})
+      
+      //模型温度是否勾选
+      const temperatureEnable = computed({
+        get:()=> model.value.temperature != null,
+        set:(value) => model.value.temperature = !value? null: 0.7
+      });    
+      
+      //词汇属性是否勾选
+      const topPEnable = computed({
+        get:()=> model.value.topP != null,
+        set:(value) => model.value.topP = !value? null: 0
+      });
+      
+      //词汇属性是否勾选
+      const presencePenaltyEnable = computed({
+        get:()=> model.value.presencePenalty != null,
+        set:(value) => model.value.presencePenalty = !value? null: 0
+      });  
+      
+      //重复属性是否勾选
+      const frequencyPenaltyEnable = computed({
+        get:()=> model.value.frequencyPenalty != null,
+        set:(value) => model.value.frequencyPenalty = !value? null: 0
+      });   
+      
+      //最大回复
+      const maxTokensEnable = computed({
+        get:()=> model.value.maxTokens != null,
+        set:(value) => model.value.maxTokens = !value? null: 520
+      });
+        
+      //top k
+      const topNumberEnable = computed({
+        get:()=> model.value.topNumber != null,
+        set:(value) => model.value.topNumber = !value? null: 4
+      });   
+      
+      //Score 阈值
+      const similarityEnable = computed({
+        get:()=> model.value.similarity != null,
+        set:(value) => model.value.similarity = !value? null: 0.74
+      });    
+      
+      //timeout超时时间
+      const timeoutEnable = computed({
+        get:()=> model.value.timeout != null,
+        set:(value) => model.value.timeout = !value? null: 60
+      });
+      
+      // 加载预设
+      function onLoadPreset(idx: number) {
+        const preset = presets[idx];
+        if (!preset) {
+          return;
+        }
+        model.value = preset.params;
+      }
+
+      /**
+       * 更新参数
+       *
+       * @param model
+       */
+      function emitChange() {
+        return model.value;
+      }
+
+      /**
+       * 设置modal值
+       * @param values
+       */
+      function setModalParams(values){
+        model.value = values
+      }
+      
+      return {
+        presets,
+        onLoadPreset,
+        tips,
+        temperatureProps,
+        topPProps,
+        presencePenaltyProps,
+        model,
+        frequencyPenaltyProps,
+        temperatureEnable,
+        maxTokensProps,
+        emitChange,
+        topPEnable,
+        presencePenaltyEnable,
+        frequencyPenaltyEnable,
+        maxTokensEnable,
+        topNumberEnable,
+        topNumberProps,
+        similarityEnable,
+        similarityProps,
+        setModalParams,
+        timeoutEnable,
+        timeoutProps,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .model-params-popover {
+    font-size: 14px;
+    width: 100%;
+     .params{
+       display: flex;
+       justify-content: space-between;
+     } 
+    .setting-item{
+      margin-top: 10px;
+    }
+    .setting-item .label {
+      > span {
+        vertical-align: middle;
+
+        &.app-iconify {
+          cursor: help;
+          color: #888888;
+        }
+      }
+    }
+
+    .ant-space {
+      .ant-slider {
+        width: 380px;
+      }
+
+      .ant-input-number {
+        width: 110px;
+        min-width: 80px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aimodel/components/model.json b/src/views/super/airag/aimodel/components/model.json
new file mode 100644
index 0000000..b2bfae9
--- /dev/null
+++ b/src/views/super/airag/aimodel/components/model.json
@@ -0,0 +1,231 @@
+{
+  "data": [
+    {
+      "title": "Anthropic",
+      "value": "ANTHROPIC",
+      "LLM": [
+        {"label": "claude-sonnet-4-20250514", "value": "claude-sonnet-4-20250514","descr": "【Claude 4系列】Claude Sonnet 4具有卓越推理能力的高性能模型。\n\n支持文本和图像输入，文本输出，拥有200k上下文窗口（1M上下文测试版可用）。","type": "text,image"},
+        {"label": "claude-opus-4-20250514", "value": "claude-opus-4-20250514","descr": "【Claude 4系列】Claude Opus 4是最强大、最有能力的模型。\n\n支持文本和图像输入，文本输出，拥有200k上下文窗口，卓越的推理能力。","type": "text,image"},
+        {"label": "claude-3-7-sonnet-20250219", "value": "claude-3-7-sonnet-20250219","descr": "【Claude 3.7系列】Claude Sonnet 3.7中型模型，具备卓越的推理能力和效率。\n\n适合企业工作负载和大规模AI部署。","type": "text,image"},
+        {"label": "claude-3-5-sonnet-20241022", "value": "claude-3-5-sonnet-20241022","descr": "Claude 3.5 Sonnet是Anthropic最强大的AI模型。\n\n在编程、多步骤工作流、图表解释等复杂任务中表现出色。支持200k上下文长度，支持8k最大输出。","type": "text,image"},
+        {"label": "claude-3-5-haiku-20241022", "value": "claude-3-5-haiku-20241022","descr": "【快速模型】Claude 3.5 Haiku是Anthropic最快的AI模型。\n\n响应速度快，成本较低，适合高频交互场景。支持200k上下文长度，支持8k最大输出。","type": "text,image"},
+        {"label": "claude-3-opus-20240229", "value": "claude-3-opus-20240229","descr": "Claude 3 Opus是Claude 3系列中性能最强的模型。\n\n在高度复杂的任务上表现出色，如编写高质量代码、数学推理等。支持200k上下文长度，支持4k最大输出。","type": "text,image"},
+        {"label": "claude-3-sonnet-20240229", "value": "claude-3-sonnet-20240229","descr": "Claude 3 Sonnet在智能和速度之间取得了良好平衡。\n\n适合企业工作负载和大规模AI部署。支持200k上下文长度，支持4k最大输出。","type": "text,image"},
+        {"label": "claude-3-haiku-20240307", "value": "claude-3-haiku-20240307","descr": "Claude 3 Haiku是Claude 3系列中最快的模型。\n\n提供接近即时的响应，适合无缝AI体验。支持200k上下文长度，支持4k最大输出。","type": "text,image"}
+      ],
+      "type": ["LLM"],
+      "baseUrl": "https://api.anthropic.com/v1",
+      "LLMDefaultValue": "claude-3-5-sonnet-20241022"
+    },
+    {
+      "title": "DeepSeek",
+      "value": "DEEPSEEK",
+      "LLM": [
+        {"label": "deepseek-v4-pro", "value": "deepseek-v4-pro","descr": "【官方模型】深度求索 新推出的推理模型R1满血版\n火便全球。\n支持64k上下文，其中支持8k最大回复。","type": "text"},
+        {"label": "deepseek-v4-flash", "value": "deepseek-v4-flash","descr": "【官方模型】深度求索 新推出的推理模型R1满血版\n火便全球。\n支持64k上下文，其中支持8k最大回复。","type": "text"},
+        {"label": "deepseek-reasoner", "value": "deepseek-reasoner","descr": " 2026/07/24下线，【官方模型】深度求索 新推出的推理模型R1满血版\n火便全球。\n支持64k上下文，其中支持8k最大回复。","type": "text"},
+        {"label":"deepseek-chat", "value": "deepseek-chat","descr": "2026/07/24下线，最强开源 MoE 模型 DeepSeek-V3，全球首个在代码、数学能力上与GPT-4-Turbo争锋的模型，在代码、数学的多个榜单上位居全球第二；","type": "text"}
+      ],
+      "type": ["LLM"],
+      "baseUrl": "https://api.deepseek.com/v1",
+      "LLMDefaultValue": "deepseek-v4-pro"
+    },
+    {
+      "title": "Ollama",
+      "value": "OLLAMA",
+      "LLM": [
+        {"label": "llama2", "value": "llama2"},
+        {"label": "llama2:13b", "value": "llama2:13b"},
+        {"label": "llama2:70b", "value": "llama2:70b"},
+        {"label": "llama2-chinese:13b", "value": "llama2-chinese:13b"},
+        {"label": "llama3:8b", "value": "llama3:8b"},
+        {"label": "llama3:70b", "value": "llama3:70b"},
+        {"label": "qwen:0.5b", "value": "qwen:0.5b"},
+        {"label": "qwen:1.8b", "value": "qwen:1.8b"},
+        {"label": "qwen:4b", "value": "qwen:4b"},
+        {"label": "qwen:7b", "value": "qwen:7b"},
+        {"label": "qwen:14b", "value": "qwen:14b"},
+        {"label": "qwen:32b", "value": "qwen:32b"},
+        {"label": "qwen:72b", "value": "qwen:72b"},
+        {"label": "qwen:110b", "value": "qwen:110b"},
+        {"label": "qwen2:72b-instruct", "value": "qwen2:72b-instruct"},
+        {"label": "qwen2:57b-a14b-instruct", "value": "qwen2:57b-a14b-instruct"},
+        {"label": "qwen2:7b-instruct", "value": "qwen2:7b-instruct"},
+        {"label": "qwen2.5:72b-instruct", "value": "qwen2.5:72b-instruct"},
+        {"label": "qwen2.5:32b-instruct", "value": "qwen2.5:32b-instruct"},
+        {"label": "qwen2.5:14b-instruct", "value": "qwen2.5:14b-instruct"},
+        {"label": "qwen2.5:7b-instruct", "value": "qwen2.5:7b-instruct"},
+        {"label": "qwen2.5:1.5b-instruct", "value": "qwen2.5:1.5b-instruct"},
+        {"label": "qwen2.5:0.5b-instruct", "value": "qwen2.5:0.5b-instruct"},
+        {"label": "qwen2.5:3b-instruct", "value": "qwen2.5:3b-instruct"},
+        {"label": "phi3", "value": "phi3"}
+      ],
+      "EMBED": [
+        {"label": "nomic-embed-text", "value": "nomic-embed-text"}
+      ],
+      "type": ["LLM", "EMBED"],
+      "baseUrl": "http://localhost:11434",
+      "LLMDefaultValue": "llama2",
+      "EMBEDDefaultValue": "nomic-embed-text"
+    },
+    {
+      "title": "OpenAI",
+      "value": "OPENAI",
+      "LLM": [
+        {"label": "gpt-3.5-turbo", "value": "gpt-3.5-turbo","descr": "纯官方高速GPT3.5系列，目前指向gpt-35-turbo-0125模型，最大回复小于4k。\n综合能力强，过去使用最广泛的文本模型。", "type": "text"
+        },
+        {"label": "gpt-4", "value": "gpt-4","descr": "纯官方GPT4系列。知识库截止于2021年，价格适中，具有中等参数，比gpt-4turbo系列略强。","type": "text"},
+        {"label": "gpt-4o", "value": "gpt-4o","descr": "GPT-4o，是openai的新旗舰型号，支持文本和图片分析。\n\n是迈向更自然的人机交互的一步——它接受文本和图像的任意组合作为输入，并生成文本和图像输出的任意组合。","type": "text,image"},
+        {"label": "gpt-4o-mini", "value": "gpt-4o-mini","descr": "GPT-4o mini是目前性价比最高的小参数模型，性能介于GPT3.5~GPT4o之间。\n\n成本相比GPT-3.5 Turbo便宜60%以上，支持50种不同语言，用于替代GPT-3.5版本的模型。\n\n4o-mini的图像分析价格和4o差不多，如果有图像分析需求还是4o更好一些。\n\n当前指向 gpt-4o-mini-2024-07-18","type": "text,image"},
+        {"label": "gpt-4-turbo", "value": "gpt-4-turbo","descr": "纯官方GPT4系列，支持文本和图片分析，最大回复4k，openai于2024-4-9新增的模型，知识库更新于2023年12月。提高了写作、数学、逻辑推理和编码能力。当前指向gpt-4-turbo-2024-04-09","type": "text,image"},
+        {"label": "gpt-4-turbo-preview", "value": "gpt-4-turbo-preview","descr": "纯官方GPT4系列，最大回复4k，知识库更新于2023年4月。当前指向gpt-4-0125-preview","type": "text"},
+        {"label": "gpt-3.5-turbo-0125", "value": "gpt-3.5-turbo-0125","descr": "openai于2024年1月25号更新的gpt-3.5模型，最大回复4k。\n\n综合能力强，过去使用最广泛的文本模型。","type": "text"},
+        {"label": "gpt-3.5-turbo-1106", "value": "gpt-3.5-turbo-1106","descr": "openai于2023年11月6号更新的gpt-3.5模型，最大回复4k。属于即将被淘汰的模型。\n\n建议使用gpt-3.5-turbo或gpt-4o-mini","type": "text"},
+        {"label": "gpt-3.5-turbo-0613", "value": "gpt-3.5-turbo-0613","descr": "通过微调后可以更准确地按照用户的指示进行操作，生成更简洁和针对性的输出。它不仅可以用于文本生成，还可以通过函数调用功能与其他系统和API进行集成，实现更复杂的任务自动化","type": "text"},
+        {"label": "gpt-4o-2024-05-13", "value": "gpt-4o-2024-05-13","descr": "GPT-4o，是openai的新旗舰型号，支持文本和图片分析。\n\n是迈向更自然的人机交互的一步——它接受文本和图像的任意组合作为输入，并生成文本和图像输出的任意组合。\n\n该模型为初代的4o模型","type": "text,image"},
+        {"label": "gpt-4-turbo-2024-04-09", "value": "gpt-4-turbo-2024-04-09","descr": "纯官方GPT4系列，支持文本和图片分析，最大回复4k，openai于2024-4-9新增的模型，提高了写作、数学、逻辑推理和编码能力。知识库更新于2023年12月。","type": "text,image"},
+        {"label": "gpt-4-0125-preview", "value": "gpt-4-0125-preview","descr": "纯官方GPT4系列，最大回复4k，知识库更新于2023年4月。当前与gpt-4-turbo-preview属于同一模型","type": "text"},
+        {"label": "gpt-4-1106-preview", "value": "gpt-4-1106-preview","descr": "纯官方GPT4系列，最大回复4k，知识库更新于2023年4月。正在逐渐被新的模型gpt-4-turbo和gpt-4-turbo-preview取代。","type": "text"}
+      ],
+      "EMBED": [
+        {"label": "text-embedding-ada-002", "value": "text-embedding-ada-002","descr": "用于生成文本嵌入的模型。文本嵌入是将文本转换为数值形式（通常是向量），以便可以用于机器学习模型。","type": "vector,embeddings"},
+        {"label": "text-embedding-3-small", "value": "text-embedding-3-small","descr": "用于生成文本的嵌入表示，网络结构较小，计算资源需求较低。虽然可能不如\"large\"版本那样精准，但它更适合于资源受限的环境或需要更快速处理的任务。","type": "vector,embeddings"},
+        {"label": "text-embedding-3-large", "value": "text-embedding-3-large","descr": "用于生成文本的嵌入表示，即将文本转换为高维空间中的点，这些点的距离可以表示文本之间的相似度。有较大的网络结构，能够捕捉更丰富的语言特征，适用于需要高质量文本相似度或分类任务的场景。","type": "vector,embeddings"}
+      ],
+      "IMAGE": [
+        {"label": "gpt-image-1.5", "value": "gpt-image-1.5","descr": "openAI强大的图片生成模型，支持图像生成与编辑功能，生图图片支持中文文字。相比上一版本，拥有更好的指令跟踪和对提示词的遵循。","type": "imageGen"},
+        {"label": "gpt-image-1", "value": "gpt-image-1","descr": "是一个图片生成模型，支持图像生成与编辑功能，生图图片支持中文文字。","type": "imageGen"},
+        {"label": "dall-e-2", "value": "dall-e-2","descr": "是OpenAI推出的文本生成图像系统","type": "imageGen"},
+        {"label": "dall-e-3", "value": "dall-e-3","descr": "是OpenAI开发的第三代文本到图像生成模型,提升了图像细节处理和艺术风格迁移能力","type": "imageGen"}
+      ],
+      "type": ["LLM", "EMBED","IMAGE"],
+      "baseUrl": "https://api.openai.com/v1/",
+      "LLMDefaultValue": "gpt-4o-mini",
+      "EMBEDDefaultValue": "text-embedding-ada-002",
+      "IMAGEDefaultValue": "gpt-image-1.5"
+    },
+    {
+      "title": "通义千问",
+      "value": "QWEN",
+      "LLM": [
+        {"label": "qwen-turbo", "value": "qwen-turbo","descr": "通义千问超大规模语言模型，支持中文、英文等不同语言输入。适合文本创作、文本处理、编程辅助、翻译服务、对话模拟。","type": "text"},
+        {"label": "qwen-plus", "value": "qwen-plus","descr": "通义千问超大规模语言模型，支持中文、英文等不同语言输入。适合文本创作、文本处理、编程辅助、翻译服务、对话模拟。","type": "text"},
+        {"label": "qwen-max", "value": "qwen-max","descr": "暂无描述内容！","type": "text"}
+      ],
+      "EMBED": [
+        {"label": "text-embedding-v2", "value": "text-embedding-v2","descr": "是一种将文本数据转换为向量的技术，通过深度学习模型将文本的语义信息嵌入到高维向量空间中。这些向量不仅能表达文本内容，还能捕捉文本之间的相似性和关系，从而让计算机高效地进行文本检索、分类、聚类等任务。","type": "vector"}
+      ],
+      "IMAGE": [
+        { "label": "wan2.2-t2i-plus", "value": "wan2.2-t2i-plus","descr": "全新升级的通义万相2.2文生图，更快的生成速度。在生成图像创意性、稳定性、写实质感方面全面升级，指令遵循更强，原生支持多种风格。支持最大200万像素生成，支持智能提示词改写等。","type": "imageGen"},
+        { "label": "wan2.2-t2i-flash", "value": "wan2.2-t2i-flash","descr": "全新升级的通义万相2.2文生图，更快的生成速度。在生成图像创意性、稳定性、写实质感方面全面升级，指令遵循更强，原生支持多种风格。支持最大200万像素生成，支持智能提示词改写等。","type": "imageGen"},
+        { "label": "wan2.5-i2i-preview", "value": "wan2.5-i2i-preview","descr": "是万相2.5系列中的图像编辑模型，专注于通用图像编辑任务，支持单图编辑和多图融合功能","type": "imageGen"},
+        { "label": "wanx2.1-imageedit", "value": "wanx2.1-imageedit","descr": "是阿里云百炼平台提供的通用图像编辑模型，适用于多种图像处理任务，如风格迁移、内容编辑、尺寸优化等","type": "imageGen"},
+        { "label": "wanx-v1", "value": "wanx-v1","descr": "是通义万相系列中的文本生成图像模型，支持中英文双语输入和多种图像风格生成","type": "imageGen"}
+      ],
+      "type": ["LLM", "EMBED","IMAGE"],
+      "baseUrl": "https://dashscope.aliyuncs.com/api/v1/services/",
+      "baseImageUrl": "https://dashscope.aliyuncs.com/api/v1/",
+      "LLMDefaultValue": "qwen-plus",
+      "EMBEDDefaultValue": "text-embedding-v2",
+      "IMAGEDefaultValue": "wan2.2-t2i-plus"
+    },
+    {
+      "title": "千帆大模型",
+      "value": "QIANFAN",
+      "LLM": [
+        {"label": "ERNIE-Bot", "value": "ERNIE-Bot","descr": "是百度推出的一款知识增强大语言模型，主要用于与人对话互动、回答问题、协助创作，帮助人们高效便捷地获取信息、知识和灵感","type": "text"},
+        {"label": "ERNIE-Bot 4.0", "value": "ERNIE-Bot 4.0","descr": "百度自行研发的文心产业级知识增强大语言模型4.0版本\n\n实现了基础模型的全面升级，在理解、生成、逻辑和记忆能力上相对ERNIE 3.5都有着显著提升，支持5K输入+2K输出。","type": "text"},
+        {"label": "ERNIE-Bot-8K", "value": "ERNIE-Bot-8K","descr": "主要用于数据分析场景，特别是在企业数据分析中表现出色。ERNIE-Bot-8K是百度文心大模型的一个版本，具有模型效果优、生成能力强、应用门槛低等独特优势。","type": "text"},
+        {"label": "ERNIE-Bot-turbo", "value": "ERNIE-Bot-turbo","descr": "是一个大语言模型，主要用于对话问答、内容创作生成等任务。它是百度自行研发的大语言模型，覆盖了海量中文数据，具有更强的对话问答和内容创作生成能力","type": "text"},
+        {"label": "ERNIE-Speed-128K", "value": "ERNIE-Speed-128K","descr": "是一款基于Transformer结构的轻量级语言模型，旨在满足实时数据处理的需求。它具有高效、低延迟和高准确性的特点，广泛应用于自然语言处理、信息检索和文本分类等领域","type": "text"},
+        {"label": "EB-turbo-AppBuilder", "value": "EB-turbo-AppBuilder","descr": "主要用于企业级应用场景，如智能客服、内容创作和知识问答等任务。它是基于文心高性能大语言模型ERNIE-Bot-turbo构建的，针对企业特定需求进行了深度的场景效果优化和输出格式定制，因此在满足企业特定需求方面具有更高的灵活性和实用性","type": "text"},
+        {"label": "Yi-34B-Chat", "value": "Yi-34B-Chat","descr": "Yi-34B-Chat是一款基于Transformer架构的生成式预训练语言模型，它拥有340亿个参数，使其在处理自然语言任务时表现出了强大的能力。","type": "text"},
+        {"label": "BLOOMZ-7B", "value": "BLOOMZ-7B","descr": "是一个用于生成文本序列的自回归模型，它可以进行多语言处理，支持46种语言和13种编程语言。BLOOMZ-7B是BLOOM模型的一个调优版本，具有更出色的泛化和零样本学习能力，适用于多种任务和场景","type": "text"},
+        {"label": "Qianfan-BLOOMZ-7B-compressed", "value": "Qianfan-BLOOMZ-7B-compressed","descr": "是千帆团队在BLOOMZ-7B基础上的压缩版本，融合量化、稀疏化等技术，显存占用降低30%以上。","type": "text"},
+        {"label": "Mixtral-8x7B-Instruct", "value": "Mixtral-8x7B-Instruct","descr": "由Mistral AI发布的首个高质量稀疏专家混合模型 (MOE)，模型由8个70亿参数专家模型组成，在多个基准测试中表现优于Llama-2-70B及GPT3.5，能够处理32K上下文，在代码生成任务中表现尤为优异。","type": "text"},
+        {"label": "Llama-2-7b-chat", "value": "Llama-2-7b-chat","descr": "由Meta AI研发并开源，在编码、推理及知识应用等场景表现优秀，Llama-2-7b-chat是高性能原生开源版本，适用于对话场景。","type": "text"},
+        {"label": "Llama-2-13b-chat", "value": "Llama-2-13b-chat","descr": "由Meta AI研发并开源，在编码、推理及知识应用等场景表现优秀，Llama-2-13b-chat是性能与效果均衡的原生开源版本，适用于对话场景。","type": "text"},
+        {"label": "Llama-2-70b-chat", "value": "Llama-2-70b-chat","descr": "由Meta AI研发并开源，在编码、推理及知识应用等场景表现优秀，Llama-2-70b-chat是高精度效果的原生开源版本。","type": "text"},
+        {"label": "Qianfan-Chinese-Llama-2-7B", "value": "Qianfan-Chinese-Llama-2-7B","descr": "是千帆团队在Llama-2-7b基础上的中文增强版本，在CMMLU、C-EVAL等中文数据集上表现优异。","type": "text"},
+        {"label": "ChatGLM2-6B-32K", "value": "ChatGLM2-6B-32K","descr": "是在ChatGLM2-6B的基础上进一步强化了对于长文本的理解能力，能够更好的处理最多32K长度的上下文。","type": "text"},
+        {"label": "AquilaChat-7B", "value": "AquilaChat-7B","descr": "是由智源研究院研发，基于Aquila-7B训练的对话模型，支持流畅的文本对话及多种语言类生成任务，通过定义可扩展的特殊指令规范，实现 AquilaChat对其它模型和工具的调用，且易于扩展。","type": "text"}
+      ],
+      "EMBED": [
+        {"label": "Embedding-V1", "value": "Embedding-V1","descr": "主要用于将离散对象（如文本、图像等）映射为连续的数值向量，以便于计算机处理和机器学习模型的训练和使用","type": "vector,embeddings"},
+        {"label": "tao-8k", "value": "tao-8k","descr": "是由Huggingface开发者amu研发并开源的长文本向量表示模型,支持8k上下文长度,模型效果在C-MTEB上居前列,是当前最优的中文长文本embeddings模型之一","type": "vector"},
+        {"label": "bge-large-zh", "value": "bge-large-zh","descr": "是由智源研究院研发的中文版文本表示模型，可将任意文本映射为低维稠密向量，以用于检索、分类、聚类或语义匹配等任务，并可支持为大模型调用外部知识。","type": "vector"},
+        {"label": "bge-large-en", "value": "bge-large-en","descr": "是由智源研究院研发的英文版文本表示模型，可将任意文本映射为低维稠密向量，以用于检索、分类、聚类或语义匹配等任务，并可支持为大模型调用外部知识。","type": "vector"}
+      ],
+      "type": ["LLM", "EMBED"],
+      "baseUrl": "https://aip.baidubce.com",
+      "LLMDefaultValue": "Yi-34B-Chat",
+      "EMBEDDefaultValue": "Embedding-V1"
+    },
+    {
+      "title": "智谱AI",
+      "value": "ZHIPU",
+      "LLM": [
+        {"label": "glm-4", "value": "glm-4","descr": "是一个多模态大语言模型，主要用于处理复杂的指令和任务，支持长文本处理、多模态理解和文生图等功能","type": "text,image"},
+        {"label": "glm-4v", "value": "glm-4v","descr": "智谱：多模态模型\n\n更懂中文的视觉理解、文生图等多模态模型能力。准确理解各任务场景语言描述及指令，更精确的完成多模态理解类任务，或生成高质量的图片、视频等多模态内容。","type": "text,image"},
+        {"label": "glm-4-flash", "value": "glm-4-flash","descr": "该模型官方免费，主要用于处理多种自然语言处理任务，包括智能对话助手、辅助论文翻译、ppt及会议内容生产、网页智能搜索、数据生成和抽取、网页解析、智能规划和决策、辅助科研等场景","type": "text"},
+        {"label": "glm-3-turbo", "value": "glm-3-turbo","descr": "是一种基于transformer结构的语言模型，由智谱AI推出。其主要特点包括使用三层transformer结构、采用Turbo机制以实时生成文本、处理长文本输入并具有强大的语言理解能力","type": "text"}
+      ],
+      "EMBED": [
+        {"label": "Embedding-3", "value": "Embedding-3","descr": "主要用于文本搜索、聚类、推荐等任务。它通过将文本映射到低维向量空间，使得文本之间的语义关系可以通过向量之间的距离或相似度来衡量，从而支持各种基于向量的应用。","type": "vector"},
+        {"label": "Embedding-2", "value": "Embedding-2","descr": "用于将高维离散数据映射到低维连续数值向量中，以便机器学习模型能够更好地处理和理解这些数据","type": "vector"}
+      ],
+      "IMAGE": [
+        {"label": "CogView-4", "value": "CogView-4","descr": "智谱首个支持生成汉字的开源文生图模型，在语义理解、图像生成质量、中英文字生成能力等方面全面提升，支持任意长度的中英双语输入，能够生成在给定范围内的任意分辨率图像。","type": "imageGen"},
+        {"label": "Cogview-3-Flash", "value": "Cogview-3-Flash","descr": "是智谱推出的免费图像生成模型，能够根据用户指令生成符合要求且美学评分更高的图像。CogView-3-Flash 主要应用于艺术创作、设计参考、游戏开发、虚拟现实等领域，帮助用户快速实现从文本到图像的转换需求。","type": "imageGen"}
+      ],
+      "type": ["LLM", "EMBED", "IMAGE"],
+      "baseUrl": "https://open.bigmodel.cn",
+      "LLMDefaultValue": "glm-4-flash",
+      "EMBEDDefaultValue": "Embedding-2",
+      "IMAGEDefaultValue": "CogView-4"
+    },
+    {
+      "title": "Google Gemini",
+      "value": "GOOGLE",
+      "LLM": [
+        {"label": "gemini-2.5-pro", "value": "gemini-2.5-pro","descr": "【Gemini 2.5系列】Google最新旗舰思维模型，具备强大的推理能力。\n\n支持文本和图像输入，文本输出，拥有1M上下文窗口，在编码、数学和科学推理方面表现卓越。","type": "text,image"},
+        {"label": "gemini-2.5-flash", "value": "gemini-2.5-flash","descr": "【Gemini 2.5系列】Google最新的高效思维模型，速度与性能的最佳平衡。\n\n支持文本和图像输入，文本输出，拥有1M上下文窗口，适合高频交互和大规模部署。","type": "text,image"}
+      ],
+      "IMAGE": [
+        {"label": "gemini-3-pro-image-preview", "value": "gemini-3-pro-image-preview","descr": "Google最新Gemini 3 Pro图像生成预览模型，具备卓越的图像生成质量。\n\n支持文本到图像生成，在细节表现、风格多样性和文字渲染方面表现出色。","type": "imageGen"},
+        {"label": "gemini-2.5-flash-image", "value": "gemini-2.5-flash-image","descr": "基于Gemini 2.5 Flash的图像生成模型，支持文本到图像生成。\n\n速度快、成本低，适合高频图像生成场景，支持多种风格。","type": "imageGen"}
+      ],
+      "type": ["LLM", "IMAGE"],
+      "baseUrl": "https://generativelanguage.googleapis.com/v1beta",
+      "LLMDefaultValue": "gemini-2.5-flash",
+      "IMAGEDefaultValue": "gemini-2.5-flash-image"
+    },
+    {
+      "title": "vLLM",
+      "value": "VLLM",
+      "LLM": [],
+      "EMBED": [],
+      "IMAGE": [],
+      "type": ["LLM", "EMBED", "IMAGE"],
+      "baseUrl": "http://localhost:8000/v1"
+    },
+    {
+      "title": "LM stdio",
+      "value": "LMSTDIO",
+      "LLM": [],
+      "EMBED": [],
+      "IMAGE": [],
+      "type": ["LLM", "EMBED", "IMAGE"],
+      "baseUrl": "http://localhost:1234/v1"
+    },
+    {
+      "title": "Xinference",
+      "value": "XINFERENCE",
+      "LLM": [],
+      "EMBED": [],
+      "IMAGE": [],
+      "type": ["LLM", "EMBED", "IMAGE"],
+      "baseUrl": "http://localhost:9997/v1"
+    }
+  ]
+}
diff --git a/src/views/super/airag/aimodel/icon/OpenAi.png b/src/views/super/airag/aimodel/icon/OpenAi.png
new file mode 100644
index 0000000..83a7e5f
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/OpenAi.png differ
diff --git a/src/views/super/airag/aimodel/icon/anthropic.png b/src/views/super/airag/aimodel/icon/anthropic.png
new file mode 100644
index 0000000..64b6a21
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/anthropic.png differ
diff --git a/src/views/super/airag/aimodel/icon/deepspeek.png b/src/views/super/airag/aimodel/icon/deepspeek.png
new file mode 100644
index 0000000..6dd9e8e
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/deepspeek.png differ
diff --git a/src/views/super/airag/aimodel/icon/gemini.png b/src/views/super/airag/aimodel/icon/gemini.png
new file mode 100644
index 0000000..043168c
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/gemini.png differ
diff --git a/src/views/super/airag/aimodel/icon/imstdio.png b/src/views/super/airag/aimodel/icon/imstdio.png
new file mode 100644
index 0000000..ccf19a1
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/imstdio.png differ
diff --git a/src/views/super/airag/aimodel/icon/ollama.png b/src/views/super/airag/aimodel/icon/ollama.png
new file mode 100644
index 0000000..8cd2cf1
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/ollama.png differ
diff --git a/src/views/super/airag/aimodel/icon/qianfan.png b/src/views/super/airag/aimodel/icon/qianfan.png
new file mode 100644
index 0000000..ace23e8
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/qianfan.png differ
diff --git a/src/views/super/airag/aimodel/icon/qianwen.png b/src/views/super/airag/aimodel/icon/qianwen.png
new file mode 100644
index 0000000..477b1b6
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/qianwen.png differ
diff --git a/src/views/super/airag/aimodel/icon/vllm.png b/src/views/super/airag/aimodel/icon/vllm.png
new file mode 100644
index 0000000..1ead997
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/vllm.png differ
diff --git a/src/views/super/airag/aimodel/icon/xinference.svg b/src/views/super/airag/aimodel/icon/xinference.svg
new file mode 100644
index 0000000..86cdc20
--- /dev/null
+++ b/src/views/super/airag/aimodel/icon/xinference.svg
@@ -0,0 +1,25 @@
+<svg width="173.831879" height="177.308517" viewBox="0 0 173.832 177.309" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<linearGradient x1="59.102806" y1="179.252701" x2="146.098419" y2="0.728947" id="paint_linear_0_7_0" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#E9A85E"/>
+			<stop offset="1.000000" stop-color="#F52B76"/>
+		</linearGradient>
+		<linearGradient x1="18.536041" y1="179.005981" x2="135.938522" y2="129.504761" id="paint_linear_0_8_0" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#E9A85E"/>
+			<stop offset="1.000000" stop-color="#F52B76"/>
+		</linearGradient>
+		<linearGradient x1="0.000004" y1="49.024223" x2="157.555862" y2="121.868401" id="paint_linear_0_9_0" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#6A0CF5"/>
+			<stop offset="1.000000" stop-color="#AB66F3"/>
+		</linearGradient>
+	</defs>
+	<path id="path" d="M59.1 90.81C64.17 96.44 69.93 101.41 76.23 105.61C81.64 109.24 87.41 112.29 93.45 114.72C104.41 104.34 113.49 92.13 120.29 78.63L159.92 0L90.81 54.46C78.08 64.5 67.32 76.82 59.1 90.81Z" fill="url(#paint_linear_0_7_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+	<path id="path" d="M76.23 105.61C81.64 109.24 87.41 112.29 93.45 114.72C104.41 104.34 113.49 92.13 120.29 78.63L159.92 0L90.81 54.46C78.08 64.5 67.32 76.82 59.1 90.81C64.17 96.44 69.93 101.41 76.23 105.61Z" stroke="#000000" stroke-opacity="0" stroke-width="1.000000"/>
+	<path id="path" d="M53.15 139.95C48.14 136.62 43.42 133.1 38.95 129.5L14.77 177.3L58.23 143.24C56.53 142.15 54.82 141.07 53.15 139.95Z" fill="url(#paint_linear_0_8_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+	<path id="path" d="M38.95 129.5L14.77 177.3L58.23 143.24C56.53 142.15 54.82 141.07 53.15 139.95C48.14 136.62 43.42 133.1 38.95 129.5Z" stroke="#000000" stroke-opacity="0" stroke-width="1.000000"/>
+	<path id="path" d="M141.86 63.63C154.87 80.88 158.67 100.04 149.85 113.23C136.97 132.49 102.06 131.75 71.87 111.58C41.68 91.41 27.65 59.45 40.53 40.19C49.34 27 68.5 23.19 89.42 28.59C53.25 13.23 18.83 14.75 5.48 34.67C-11.27 59.75 11.61 104.48 56.58 134.48C101.54 164.48 151.59 168.55 168.34 143.49C181.68 123.53 169.88 91.16 141.86 63.63Z" fill="url(#paint_linear_0_9_0)" fill-opacity="1.000000" fill-rule="nonzero"/>
+	<path id="path" d="M149.85 113.23C136.97 132.49 102.06 131.75 71.87 111.58C41.68 91.41 27.65 59.45 40.53 40.19C49.34 27 68.5 23.19 89.42 28.59C53.25 13.23 18.83 14.75 5.48 34.67C-11.27 59.75 11.61 104.48 56.58 134.48C101.54 164.48 151.59 168.55 168.34 143.49C181.68 123.53 169.88 91.16 141.86 63.63C154.87 80.88 158.67 100.04 149.85 113.23Z" stroke="#000000" stroke-opacity="0" stroke-width="1.000000"/>
+</svg>
diff --git a/src/views/super/airag/aimodel/icon/zhipuai.png b/src/views/super/airag/aimodel/icon/zhipuai.png
new file mode 100644
index 0000000..4e1000c
Binary files /dev/null and b/src/views/super/airag/aimodel/icon/zhipuai.png differ
diff --git a/src/views/super/airag/aimodel/model.api.ts b/src/views/super/airag/aimodel/model.api.ts
new file mode 100644
index 0000000..f1dc2c2
--- /dev/null
+++ b/src/views/super/airag/aimodel/model.api.ts
@@ -0,0 +1,71 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/airag/airagModel/list',
+  save = '/airag/airagModel/add',
+  testConn = '/airag/airagModel/test',
+  delete = '/airag/airagModel/delete',
+  queryById = '/airag/airagModel/queryById',
+  edit = '/airag/airagModel/edit',
+}
+
+/**
+ * 查询AI模型
+ * @param params
+ */
+export const list = (params) => {
+  return defHttp.get({ url: Api.list, params }, { isTransformResponse: false });
+};
+
+/**
+ * 根据id查询AI模型
+ * @param params
+ */
+export const queryById = (params) => {
+  return defHttp.get({ url: Api.queryById, params }, { isTransformResponse: false });
+};
+
+/**
+ * 新增AI模型
+ *
+ * @param params
+ */
+export const saveModel = (params) => {
+  return defHttp.post({ url: Api.save, params });
+};
+
+/**
+ * 编辑AI模型
+ *
+ * @param params
+ */
+export const editModel = (params) => {
+  return defHttp.put({ url: Api.edit, params });
+};
+
+/**
+ * 测试链接
+ *
+ * @param params
+ */
+export const testConn = (params) => {
+  return defHttp.post({ url: Api.testConn, params, timeout: 2*60*1000 });
+};
+
+/**
+ * 删除数据权限
+ */
+export const deleteModel = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除名称为' + params.name + '的模型吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
diff --git a/src/views/super/airag/aimodel/model.data.ts b/src/views/super/airag/aimodel/model.data.ts
new file mode 100644
index 0000000..cb64692
--- /dev/null
+++ b/src/views/super/airag/aimodel/model.data.ts
@@ -0,0 +1,128 @@
+import { FormSchema } from '@/components/Form';
+
+import anthropic from './icon/anthropic.png';
+import deepspeek from './icon/deepspeek.png';
+import ollama from './icon/ollama.png';
+import OpenAi from './icon/OpenAi.png';
+import qianfan from './icon/qianfan.png';
+import qianwen from './icon/qianwen.png';
+import zhipuai from './icon/zhipuai.png';
+import xinference from './icon/xinference.svg';
+import vllm from './icon/vllm.png';
+import imstdio from './icon/imstdio.png';
+import gemini from './icon/gemini.png';
+import { ref } from 'vue';
+
+/**
+ * 表单
+ */
+export const formSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '模型名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '模型类型',
+    field: 'modelType',
+    slot: 'modelType',
+    required: true,
+    component: 'Select',
+  },
+  {
+    label: '基础模型',
+    field: 'modelName',
+    required: true,
+    slot: 'modelName',
+    component: 'Select',
+  },
+  {
+    label: 'API域名',
+    field: 'baseUrl',
+    required: true,
+    component: 'Input'
+  },
+  {
+    label: 'API Key',
+    field: 'apiKey',
+    required: ({ values }) => values.provider !== 'XINFERENCE',
+    component: 'InputPassword',
+    componentProps: {
+      autocomplete: 'new-password',
+    },
+    ifShow: ({ values }) => {
+      if(values.provider==="OLLAMA"){
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    label: 'Secret Key',
+    field: 'secretKey',
+    required: true,
+    component: 'InputPassword',
+    ifShow: ({ values }) => {
+      if(values.provider==='DEEPSEEK' || values.provider==="OLLAMA" || values.provider==="OPENAI"
+        || values.provider==="ZHIPU" || values.provider==="QWEN" || values.provider==="ANTHROPIC" 
+        || values.provider==="XINFERENCE" || values.provider==="VLLM" ||  values.provider === 'LMSTDIO'
+        || values.provider === "GOOGLE"){
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    label: 'HTTP1.1协议',
+    field: 'httpVersionOne',
+    component: 'Switch',
+    defaultValue: 1,
+    helpMessage: '是否使用HTTP1.1协议，在长时间无响应的情况下，可以尝试关闭此开关',
+    componentProps: {
+      checkedValue: 1,
+      unCheckedValue: 0,
+    },
+    ifShow: ({ values }) => {
+      return values.provider === 'VLLM' || values.provider === 'LMSTDIO' || values.provider === 'XINFERENCE';
+    },
+  },
+  {
+    label: '额外参数',
+    field: 'extraParams',
+    slot: 'extraParams',
+    component: 'Input',
+    ifShow: ({ values }) => values.modelType === 'LLM',
+  },
+  {
+    label: '供应者',
+    field: 'provider',
+    component: 'Input',
+    show: false,
+  },
+];
+
+/**
+ * 图片路径映射
+ *
+ * @param name
+ */
+export const imageList = ref<any>({
+  ANTHROPIC: anthropic,
+  DEEPSEEK: deepspeek,
+  OLLAMA: ollama,
+  OPENAI: OpenAi,
+  QIANFAN: qianfan,
+  QWEN: qianwen,
+  ZHIPU: zhipuai,
+  XINFERENCE: xinference,
+  VLLM: vllm,
+  LMSTDIO: imstdio,
+  GOOGLE: gemini,
+});
diff --git a/src/views/super/airag/aiposter/AiPainting.vue b/src/views/super/airag/aiposter/AiPainting.vue
new file mode 100644
index 0000000..930ad8a
--- /dev/null
+++ b/src/views/super/airag/aiposter/AiPainting.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="content-wrapper">
+    <!-- 中间参数配置 -->
+    <div class="config-panel">
+      <div class="config-tabs">
+        <a-tabs v-model:activeKey="configTab" :tabBarStyle="{ margin: 0 }">
+          <a-tab-pane key="draw" tab="绘图" />
+          <a-tab-pane key="face" tab="换脸" />
+          <a-tab-pane key="mix" tab="混图" />
+        </a-tabs>
+      </div>
+
+      <!-- 示例按钮区域 -->
+      <div class="example-buttons" v-if="configTab === 'mix'">
+        <a-tooltip title="工作证制作">
+          <a-button class="example-btn" size="small" @click="applyExample('work_card')">示例一</a-button>
+        </a-tooltip>
+        <a-tooltip title="换衣">
+          <a-button class="example-btn" size="small" @click="applyExample('change_clothes')">示例二</a-button>
+        </a-tooltip>
+      </div>
+
+      <div class="form-container">
+        <BasicForm @register="registerForm" />
+
+        <div class="instructions" v-if="configTab === 'face'">
+          <div class="title">说明:</div>
+          <p>1 图片都必须包含脸，否则出不来图</p>
+          <p>2 "明星图"可以先用mj绘画制作出来</p>
+          <p>3 "明星图"其实动漫图也行</p>
+          <p>4 "你的头像"建议用一寸个人照</p>
+        </div>
+
+        <div class="instructions" v-if="configTab === 'mix'">
+          <div class="title">说明:</div>
+          <p>1 合成至少2张图片</p>
+          <p>2 最多可传3张图</p>
+        </div>
+      </div>
+      <div class="action-container">
+        <a-button type="primary" size="large" block @click="handleGenerate" :loading="loading">
+          <Icon icon="ant-design:thunderbolt-outlined" />
+          立即生成
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 右侧图片生成结果 -->
+    <div class="preview-panel">
+      <div class="panel-title">生成结果</div>
+      <div class="preview-content">
+        <div v-if="!generatedImage && !loading" class="empty-state">
+          <Icon icon="ant-design:picture-outlined" size="64" color="#ccc" />
+          <p>在左侧配置参数并点击生成</p>
+        </div>
+
+        <div v-if="loading && !generatedImage" class="loading-state">
+          <a-spin size="large" tip="正在绘制图片，请稍候..." />
+        </div>
+
+        <div v-if="generatedImage" class="result-image-wrapper group">
+          <img :src="generatedImage" class="result-image" alt="Generated Image" />
+          <div class="image-actions">
+            <a-button type="primary" ghost @click="handlePreview">
+              <Icon icon="ant-design:eye-outlined" />
+              预览
+            </a-button>
+            <a-button type="primary" ghost @click="handleDownload">
+              <Icon icon="ant-design:download-outlined" />
+              下载
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ImageViewer v-if="previewVisible" :imageUrl="generatedImage" @hide="previewVisible = false" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { drawFormSchema, faceSwapFormSchema, mixFormSchema } from './AiPoster.data';
+  import ImageViewer from '../aiapp/chat/components/ImageViewer.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Icon } from '@/components/Icon';
+  import { defHttp } from '@/utils/http/axios';
+  import { useGlobSetting } from '@/hooks/setting';
+
+  const { createMessage } = useMessage();
+  const loading = ref(false);
+  //update-begin---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】AI绘画改为异步轮询，支持切换菜单后继续查询
+  const PAINTING_TASK_ID_KEY = 'ai_painting_task_id';
+  let pollTimer: ReturnType<typeof setTimeout> | null = null;
+  //update-end---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】AI绘画改为异步轮询，支持切换菜单后继续查询
+  const generatedImage = ref('');
+  const previewVisible = ref(false);
+  const configTab = ref('draw');
+
+  const { domainUrl } = useGlobSetting();
+  const [registerForm, { validate, resetSchema, setFieldsValue }] = useForm({
+    schemas: drawFormSchema,
+    labelWidth: 100,
+    actionColOptions: { span: 24 },
+    showActionButtonGroup: false,
+  });
+
+  watch(configTab, (val) => {
+    if (val === 'draw') {
+      resetSchema(drawFormSchema);
+    } else if (val === 'face') {
+      resetSchema(faceSwapFormSchema);
+    } else if (val === 'mix') {
+      resetSchema(mixFormSchema);
+    } else {
+      // Default to draw or empty for mix for now
+      resetSchema(drawFormSchema);
+    }
+  });
+
+  //update-begin---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】AI绘画改为异步轮询，支持切换菜单后继续查询
+  /** 轮询查询任务结果 */
+  function startPolling(taskId: string) {
+    const poll = () => {
+      defHttp
+        .get({ url: `/airag/chat/getAiPosterResult/${taskId}` }, { isTransformResponse: false })
+        .then((res) => {
+          if (res.success) {
+            if (res.result === 'pending' || res.result === null) {
+              pollTimer = setTimeout(poll, 3000);
+            } else {
+              let imageUrl = res.result as string;
+              const reg = /#\s*{\s*domainURL\s*}/g;
+              imageUrl = imageUrl.replace(reg, domainUrl + '/sys/common/static');
+              generatedImage.value = imageUrl;
+              loading.value = false;
+              localStorage.removeItem(PAINTING_TASK_ID_KEY);
+              createMessage.success('图片生成成功！');
+            }
+          } else {
+            loading.value = false;
+            localStorage.removeItem(PAINTING_TASK_ID_KEY);
+            createMessage.warning(res.message || '图片生成失败！');
+          }
+        })
+        .catch(() => {
+          pollTimer = setTimeout(poll, 3000);
+        });
+    };
+    poll();
+  }
+
+  onMounted(() => {
+    const savedTaskId = localStorage.getItem(PAINTING_TASK_ID_KEY);
+    if (savedTaskId) {
+      loading.value = true;
+      generatedImage.value = '';
+      startPolling(savedTaskId);
+    }
+  });
+
+  onUnmounted(() => {
+    if (pollTimer) {
+      clearTimeout(pollTimer);
+      pollTimer = null;
+    }
+  });
+  //update-end---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】AI绘画改为异步轮询，支持切换菜单后继续查询
+
+  async function handleGenerate() {
+    try {
+      const values = await validate();
+      loading.value = true;
+      generatedImage.value = '';
+      values.type = configTab.value;
+
+      if (configTab.value === 'face') {
+        if (values.sourceImage && values.targetImage) {
+          values.imageUrl = values.sourceImage + ',' + values.targetImage;
+          delete values.sourceImage;
+          delete values.targetImage;
+        }
+        values.content = '将图1的面部特征替换到图2的面部区域，保留图1五官细节，保持图2身体姿态，面部融合自然，高分辨率，写实风格';
+      }
+
+      //update-begin---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】改为异步提交，获取taskId后开始轮询
+      const res = await defHttp.post(
+        { url: '/airag/chat/genAiPosterAsync', params: values },
+        { isTransformResponse: false },
+      );
+      if (res.success && res.result) {
+        const taskId = res.result as string;
+        localStorage.setItem(PAINTING_TASK_ID_KEY, taskId);
+        startPolling(taskId);
+      } else {
+        loading.value = false;
+        createMessage.warning('提交任务失败！');
+      }
+      //update-end---author:wangshuai---date:2026-04-15---for:【QQYUN-14944】改为异步提交，获取taskId后开始轮询
+    } catch (error) {
+      console.error('Validation failed:', error);
+      loading.value = false;
+    }
+  }
+
+  function handlePreview() {
+    previewVisible.value = true;
+  }
+
+  function applyExample(type: string) {
+    if (type === 'work_card') {
+      setFieldsValue({
+        imageUrl:
+          'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/afdad9ea-077f-44a4-9d85-c26cde7aceed_1770703400282.png,https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/4e4d1886-fb3b-4c01-abf6-25e546a1253e_1770703403479.png',
+        content:
+          '以[图1]名片设计稿的构图与磨砂玻璃质感为模板，为[图2]人物生成竖版工作卡。圆角半透明卡面，柔和高光与浅投影；人物胸像置于中上区域；左下排版姓名/职位/公司/电话，极简无衬线字体，留白均衡。右上角放置[图1]人物的可爱3D卡通形象，打破边界半浮出卡片并投下轻影，形成层次与视觉焦点。整体明亮自然光、真实材质细节，不添加多余图案与元素。人物需要清晰，不要模糊。',
+      });
+    } else if (type === 'change_clothes') {
+      setFieldsValue({
+        imageUrl:
+          'https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/4e4d1886-fb3b-4c01-abf6-25e546a1253e_1770703403479.png,https://jeecgdev.oss-cn-beijing.aliyuncs.com/upload/test/63706787-4072-4cba-ad88-385e0584b020_1770703456766.png',
+        content: '将【图一】的衣服换到【图二】中。',
+      });
+    }
+  }
+
+  /**
+   * 图片导出
+   */
+  function handleDownload() {
+    if (!generatedImage.value) {
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = generatedImage.value;
+    a.download = `ai-painting-${Date.now()}.jpg`;
+    a.target = '_blank';
+    a.click();
+  }
+</script>
+
+<style lang="less" scoped>
+  .content-wrapper {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    overflow: hidden;
+    height: 100%; /* Ensure it takes full height of parent */
+  }
+
+  .config-panel {
+    width: 550px;
+    min-width: 350px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+    position: relative;
+
+    .config-tabs {
+      margin-bottom: 20px;
+
+      :deep(.ant-tabs-nav::before) {
+        border-bottom: none;
+      }
+
+      :deep(.ant-tabs-tab) {
+        padding: 8px 0;
+        margin: 0 32px 0 0;
+        font-size: 16px;
+
+        &.ant-tabs-tab-active .ant-tabs-tab-btn {
+          color: #00b96b;
+          font-weight: 500;
+        }
+      }
+
+      :deep(.ant-tabs-ink-bar) {
+        background: #00b96b;
+      }
+    }
+
+    .example-buttons {
+      position: absolute;
+      top: 28px;
+      right: 20px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      z-index: 10;
+
+      .example-btn {
+        color: #666;
+        border-color: #d9d9d9;
+
+        &:hover {
+          color: #00b96b;
+          border-color: #00b96b;
+        }
+      }
+    }
+
+    .form-container {
+      flex: 1;
+      overflow-y: auto;
+
+      .instructions {
+        margin-top: 20px;
+        padding: 0 10px;
+        color: #666;
+        font-size: 14px;
+        line-height: 1.8;
+
+        .title {
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 8px;
+        }
+
+        p {
+          margin: 0;
+        }
+      }
+    }
+
+    .action-container {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+
+  .preview-panel {
+    flex: 1;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .preview-content {
+      flex: 1;
+      background: #f7f8fc;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+    }
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    margin-bottom: 20px;
+    padding-left: 8px;
+    border-left: 4px solid #1890ff;
+    line-height: 1;
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #8f959e;
+
+    p {
+      margin-top: 16px;
+    }
+  }
+
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .result-image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .result-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      object-fit: contain;
+    }
+
+    .image-actions {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      border-radius: 8px;
+      backdrop-filter: blur(2px);
+    }
+
+    &:hover .image-actions {
+      display: flex;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiposter/AiPoster.data.ts b/src/views/super/airag/aiposter/AiPoster.data.ts
new file mode 100644
index 0000000..d47b180
--- /dev/null
+++ b/src/views/super/airag/aiposter/AiPoster.data.ts
@@ -0,0 +1,311 @@
+import { FormSchema } from '@/components/Form';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: [
+      '1、需要选择在模型中已有的图像模型',
+      '2、智普语言模型不支持尺寸设置',
+      "3、openAi旧版模型如(dall-e-2)需要选择尺寸，新版模型直接输入'竖版: 9:16即可'",
+      '4、当前只有千问万象模型(wanx2.1-imageedit,wan2.5-i2i-preview)支持图生图',
+      '5、wan2.5-i2i-preview支持多张图片',
+      '6、当前文生图openAi效果最佳',
+    ],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id",
+    },
+  },
+  {
+    field: 'content',
+    label: '提示词',
+    component: 'InputTextArea',
+    required: true,
+    componentProps: {
+      rows: 10,
+      placeholder: '请输入提示词，例如：一只可爱的猫咪，赛博朋克风格',
+    },
+  },
+  {
+    field: 'imageUrl',
+    label: '参考图',
+    component: 'JImageUpload',
+    componentProps: {
+      fileMax: 2,
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '图片尺寸',
+    component: 'Select',
+    defaultValue: '720*1280',
+    componentProps: {
+      options: [
+        { label: '1:1 (1024x1024)', value: '1024*1024' },
+        { label: '16:9 (1280x720)', value: '1280*720' },
+        { label: '9:16 (720x1280)', value: '720*1280' },
+        { label: '4:3 (1024x768)', value: '1024*768' },
+        { label: '3:4 (768x1024)', value: '768*1024' },
+      ],
+    },
+  },
+];
+
+/**
+ * 混图表单
+ */
+export const mixFormSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: [
+      '1、需要选择在模型中已有的图像模型',
+      '2、当前支持通义万象模型wan2.5-i2i-preview',
+    ],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id",
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '尺寸',
+    component: 'Select',
+    defaultValue: '720*1280',
+    componentProps: {
+      options: [
+          { label: '1:1 (1024x1024)', value: '1024*1024' },
+          { label: '16:9 (1280x720)', value: '1280*720' },
+          { label: '9:16 (720x1280)', value: '720*1280' },
+          { label: '4:3 (1024x768)', value: '1024*768' },
+          { label: '3:4 (768x1024)', value: '768*1024' },
+      ],
+    },
+  },
+  {
+    field: 'imageUrl',
+    label: '上传图像',
+    component: 'JImageUpload',
+    required: true,
+    componentProps: {
+      fileMax: 3,
+      text: '上传图像',
+    },
+    rules: [
+      {
+        required: true,
+        validator: async (_, value) => {
+          if (!value) {
+            return Promise.reject('请上传图像');
+          }
+          const images = value.split(',');
+          if (images.length < 2) {
+            return Promise.reject('合成至少2张图片');
+          }
+          return Promise.resolve();
+        },
+      },
+    ],
+  },
+  {
+    field: 'content',
+    label: '提示词',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      placeholder: '如将图一的话花瓶放到图二中',
+    },
+  },
+];
+
+/**
+ * 绘画的表单
+ */
+export const drawFormSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: [
+      '1、需要选择在模型中已有的图像模型',
+      '2、智普语言模型不支持尺寸设置',
+      "3、openAi旧版模型如(dall-e-2)需要选择尺寸，新版模型直接输入'竖版: 9:16即可'",
+      '4、当前只有千问万象模型(wanx2.1-imageedit,wan2.5-i2i-preview)支持图生图',
+      '5、wan2.5-i2i-preview支持多张图片',
+      '6、当前文生图openAi效果最佳',
+    ],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id",
+    },
+  },
+  {
+    field: 'content',
+    label: '提示词',
+    component: 'InputTextArea',
+    required: true,
+    componentProps: {
+      rows: 5,
+      placeholder: '请输入提示词，例如：一只可爱的猫咪',
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '图片尺寸',
+    component: 'Select',
+    defaultValue: '720*1280',
+    componentProps: {
+      options: [
+        { label: '1:1 (1024x1024)', value: '1024*1024' },
+        { label: '16:9 (1280x720)', value: '1280*720' },
+        { label: '9:16 (720x1280)', value: '720*1280' },
+        { label: '4:3 (1024x768)', value: '1024*768' },
+        { label: '3:4 (768x1024)', value: '768*1024' },
+      ],
+    },
+  },
+  {
+    field: 'style',
+    label: '风格',
+    component: 'Select',
+    defaultValue: 'modernOrganic',
+    componentProps: {
+      options: [
+        { label: '赛博朋克', value: 'cyberpunk' },
+        { label: '星际', value: 'star' },
+        { label: '动漫', value: 'anime' },
+        { label: '日本漫画', value: 'japaneseComicsManga' },
+        { label: '水墨画风格', value: 'inkWashPaintingStyle' },
+        { label: '原创', value: 'original' },
+        { label: '风景画', value: 'landscape' },
+        { label: '插画', value: 'illustration' },
+        { label: '漫画', value: 'manga' },
+        { label: '现代自然', value: 'modernOrganic' },
+        { label: '创世纪', value: 'genesis' },
+        { label: '海报风格', value: 'posterstyle' },
+        { label: '超现实主义', value: 'surrealism' },
+        { label: '素描', value: 'sketch' },
+        { label: '写实', value: 'realism' },
+        { label: '水彩画', value: 'watercolorPainting' },
+        { label: '立体主义', value: 'cubism' },
+        { label: '黑白', value: 'blackAndWhite' },
+        { label: '胶片摄影风格', value: 'fmPhotography' },
+        { label: '电影化', value: 'cinematic' },
+        { label: '清晰的面部特征', value: 'clearFacialFeatures' },
+      ],
+    },
+  },
+  {
+    field: 'visualAngle',
+    label: '视角',
+    component: 'Select',
+    defaultValue: 'frontView',
+    componentProps: {
+      options: [
+        { label: '宽视角', value: 'wideView' },
+        { label: '鸟瞰视角', value: 'birdView' },
+        { label: '顶视角', value: 'topView' },
+        { label: '仰视角', value: 'upview' },
+        { label: '正面视角', value: 'frontView' },
+        { label: '头部特写', value: 'headshot' },
+        { label: '超广角视角', value: 'ultrawideshot' },
+        { label: '中景', value: 'mediumShot' },
+        { label: '远景', value: 'longShot' },
+        { label: '景深', value: 'depthOfField' },
+      ],
+    },
+  },
+  {
+    field: 'characterShot',
+    label: '人物镜头',
+    component: 'Select',
+    defaultValue: 'fullLengthShot',
+    componentProps: {
+      options: [
+        { label: '脸部特写', value: 'faceShot' },
+        { label: '大特写', value: 'bigCloseUp' },
+        { label: '特写', value: 'closeUp' },
+        { label: '腰部以上', value: 'waistShot' },
+        { label: '膝盖以上', value: 'kneeShot' },
+        { label: '全身照', value: 'fullLengthShot' },
+        { label: '极远景', value: 'extraLongShot' },
+      ],
+    },
+  },
+  {
+    field: 'lighting',
+    label: '灯光',
+    component: 'Select',
+    defaultValue: 'naturalLight',
+    componentProps: {
+      options: [
+        { label: '冷光', value: 'coldLight' },
+        { label: '暖光', value: 'warmLight' },
+        { label: '硬光', value: 'hardLighting' },
+        { label: '戏剧性光线', value: 'dramaticLight' },
+        { label: '反射光', value: 'reflectionLight' },
+        { label: '薄雾', value: 'mistyFoggy' },
+        { label: '自然光', value: 'naturalLight' },
+        { label: '阳光', value: 'sunLight' },
+        { label: '情绪化', value: 'moody' },
+      ],
+    },
+  },
+];
+
+/**
+ * 换脸表单
+ */
+export const faceSwapFormSchema: FormSchema[] = [
+  {
+    field: 'drawModelId',
+    label: '模型',
+    component: 'JDictSelectTag',
+    required: true,
+    helpMessage: [
+      '1、需要选择在模型中已有的图像模型',
+      '2、当前只支持通义万象模型(wan2.5-i2i-preview)'
+    ],
+    componentProps: {
+      dictCode: "airag_model where model_type = 'IMAGE' and activate_flag = 1,name,id",
+    },
+  },
+  {
+    field: 'sourceImage',
+    label: '你的头像',
+    component: 'JImageUpload',
+    required: true,
+    componentProps: {
+      fileMax: 1,
+      text: '上传头像',
+    },
+  },
+  {
+    field: 'targetImage',
+    label: '明星图',
+    component: 'JImageUpload',
+    required: true,
+    componentProps: {
+      fileMax: 1,
+      text: '上传明星图',
+    },
+  },
+  {
+    field: 'imageSize',
+    label: '图片尺寸',
+    component: 'Select',
+    defaultValue: '720*1280',
+    componentProps: {
+      options: [
+        { label: '1:1 (1024x1024)', value: '1024*1024' },
+        { label: '16:9 (1280x720)', value: '1280*720' },
+        { label: '9:16 (720x1280)', value: '720*1280' },
+        { label: '4:3 (1024x768)', value: '1024*768' },
+        { label: '3:4 (768x1024)', value: '768*1024' },
+      ],
+    },
+  },
+];
diff --git a/src/views/super/airag/aiposter/AiPoster.vue b/src/views/super/airag/aiposter/AiPoster.vue
new file mode 100644
index 0000000..73f2f6d
--- /dev/null
+++ b/src/views/super/airag/aiposter/AiPoster.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="ai-poster-page">
+    <div class="page-header">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="poster" tab="AI 海报" />
+        <a-tab-pane key="painting" tab="AI 绘画" />
+      </a-tabs>
+    </div>
+
+    <div class="content-wrapper" v-show="activeKey === 'poster'">
+      <!-- 左侧模板选择 -->
+      <div class="template-panel">
+        <div class="panel-title">模板选择</div>
+        <div class="template-list">
+          <div
+            v-for="item in templates"
+            :key="item.id"
+            class="template-item"
+            :class="{ active: activeTemplateId === item.id }"
+            @click="handleSelectTemplate(item)"
+          >
+            <div class="template-cover">
+              <img :src="item.url" style="width: 100%" />
+            </div>
+            <div class="template-name">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 中间参数配置 -->
+      <div class="config-panel">
+        <div class="panel-title">参数配置</div>
+        <div class="form-container">
+          <BasicForm @register="registerForm" />
+        </div>
+        <div class="action-container">
+          <a-button type="primary" size="large" block @click="handleGenerate" :loading="loading">
+            <Icon icon="ant-design:thunderbolt-outlined" />
+            立即生成
+          </a-button>
+        </div>
+      </div>
+
+      <!-- 右侧图片生成结果 -->
+      <div class="preview-panel">
+        <div class="panel-title">生成结果</div>
+        <div class="preview-content">
+          <div v-if="!generatedImage && !loading" class="empty-state">
+            <Icon icon="ant-design:picture-outlined" size="64" color="#ccc" />
+            <p>在左侧配置参数并点击生成</p>
+          </div>
+
+          <div v-if="loading && !generatedImage" class="loading-state">
+            <a-spin size="large" tip="正在绘制海报，请稍候..." />
+          </div>
+
+          <div v-if="generatedImage" class="result-image-wrapper group">
+            <img :src="generatedImage" class="result-image" alt="Generated Poster" />
+            <div class="image-actions">
+              <a-button type="primary" ghost @click="handlePreview">
+                <Icon icon="ant-design:eye-outlined" />
+                预览
+              </a-button>
+              <a-button type="primary" ghost @click="handleDownload">
+                <Icon icon="ant-design:download-outlined" />
+                下载
+              </a-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AiPainting v-if="activeKey === 'painting'" />
+
+    <ImageViewer v-if="previewVisible" :imageUrl="generatedImage" @hide="previewVisible = false" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './AiPoster.data';
+  import ImageViewer from '../aiapp/chat/components/ImageViewer.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Icon } from '@/components/Icon';
+  import { defHttp } from '@/utils/http/axios';
+  import { useGlobSetting } from '@/hooks/setting';
+  import AiPainting from './AiPainting.vue';
+
+  const TASK_ID_KEY = 'ai_poster_task_id';
+  const ACTIVE_TAB_KEY = 'ai_poster_active_tab';
+  const activeKey = ref(localStorage.getItem(ACTIVE_TAB_KEY) || 'poster');
+  watch(activeKey, (val) => localStorage.setItem(ACTIVE_TAB_KEY, val));
+
+  const { createMessage } = useMessage();
+  const loading = ref(false);
+  const generatedImage = ref('');
+  const previewVisible = ref(false);
+
+  const activeTemplateId = ref<number | null>(null);
+  let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const templates = [
+    {
+      id: 1,
+      name: '淡雅政务风',
+      prompt:
+        '淡雅政务风横版海报，主色调浅蓝 + 米白 + 淡灰，扁平化矢量风格，叠加细腻宣纸纹理；画面核心元素：简约政务办公楼轮廓（线条简洁）、金色钢笔、展开的公文册、淡蓝色祥云纹样、橄榄枝装饰；背景是米白渐变 + 浅蓝竖条肌理，点缀细金色边框；文字设计：居中用黑体写‘政务为民・高效规范’，下方配‘用心服务・务实笃行’浅蓝小字；整体氛围淡雅庄重、专业简洁，层次分明，光影柔和，高清细节，竖版 9:16 构图',
+      size: '720*1280',
+      url: 'https://upload.jeecg.com/jeecg/AI/simple.png',
+    },
+    {
+      id: 2,
+      name: '节日海报',
+      prompt:
+        '国潮中国风春节竖版海报，主色调红金 + 暖橙渐变，国潮插画风格，矢量扁平 + 柔和渐变质感，叠加细腻宣纸纹理；画面层次：前景是红色剪纸风梅花、金色福字贴纸、饱满水饺、红色灯笼串，中景是红墙金瓦的传统民居屋檐、飘带式祥云，远景是淡金色烟花绽放 + 暖红色光晕背景；点缀金色铜钱纹、折纸兔子、如意纹样；画面中央偏上用金色书法字体写‘新春大吉’，下方配\'万事如意\'四字楷书；整体氛围喜庆祥和、团圆温馨，层次分明主次清晰，光影柔和不刺眼，高清细节，竖版 9:16 构图',
+      url: 'https://upload.jeecg.com/jeecg/AI/image89444392111.png',
+      size: '720*1280',
+    },
+    {
+      id: 3,
+      name: '科技宣传',
+      prompt:
+        '未来科技感宣传海报，主色调蓝紫渐变 + 银白金属色，冷光霓虹光效，赛博朋克线条质感；画面核心元素：全息投影的地球数据模型、流动的蓝色数据流、发光的电路板纹理、悬浮的芯片与机械齿轮、未来感建筑轮廓；点缀粒子光效、透明全息界面、霓虹光带；文字设计：居中用未来感无衬线字体写‘科技赋能・智启新程’，下方配‘创新驱动・引领未来’小字，字体带轻微发光描边；整体氛围简洁高级、充满未来感，层次分明，光影锐利，高清细节，横版 16:9 构图',
+      size: '720*1280',
+      url: 'https://upload.jeecg.com/jeecg/AI/technology.png',
+    },
+    {
+      id: 4,
+      name: '优雅复古',
+      prompt:
+        '民国风优雅复古竖版海报，主色调米黄 + 豆沙红 + 墨黑，低饱和度胶片质感，叠加老报纸纹理与轻微颗粒感；画面核心元素：穿月白旗袍的女性侧影（盘发配珍珠发簪）、油纸伞、复古留声机、雕花木质窗棂、缠绕珍珠的藤蔓花纹；背景是模糊的老上海石库门建筑轮廓，点缀淡粉色玉兰花、复古字体排版的诗句（‘岁月静好，温婉如初’）；文字设计：上方用民国手写体写‘雅致时光’，下方配衬线字体‘复刻民国风雅’，字体带轻微做旧效果；整体氛围温婉知性、静谧典雅，光影柔和（侧光勾勒人物轮廓），层次分明，高清细节，竖版 9:16 构图',
+      size: '720*1280',
+      url: 'https://upload.jeecg.com/jeecg/AI/retro.png',
+    },
+    {
+      id: 5,
+      name: '赛博朋克',
+      prompt:
+        '国潮赛博朋克横版海报，主色调中国红 + 深空黑 + 鎏金霓虹，传统纹样与科技元素碰撞，叠加红金渐变光效 + 竹简纹理；画面核心元素：龙形霓虹光带（龙身缠绕电路板）、红墙金瓦的赛博风古建筑（屋檐挂霓虹灯笼）、穿汉服改良款的赛博人物（配发光发簪 / 机械袖）、全息投影的汉字霓虹灯牌（‘江湖’‘未来’）；点缀祥云数据流、金属质感的传统回纹、悬浮的鎏金元宝状机械装置；文字设计：上方用金色书法字体写‘赛博江湖’，下方配‘TECH & TRADITION’英文，字体带红金霓虹发光效果；整体氛围大气炫酷、传统与未来交融，光影强烈且富有冲击力，层次分明，高清细节，横版 16:9 构图',
+      size: '720*1280',
+      url: 'https://upload.jeecg.com/jeecg/AI/cyberpunk.png',
+    },
+  ];
+  const { domainUrl } = useGlobSetting();
+  const [registerForm, { validate, setFieldsValue }] = useForm({
+    schemas: formSchema,
+    labelWidth: 100,
+    actionColOptions: { span: 24 },
+    showActionButtonGroup: false,
+  });
+
+  /**
+   * 选中模板事件
+   * @param template
+   */
+  function handleSelectTemplate(template: any) {
+    activeTemplateId.value = template.id;
+    setFieldsValue({
+      content: template.prompt,
+      imageUrl: template.url,
+      imageSize: template.size,
+    });
+    createMessage.success(`已应用模板：${template.name}`);
+  }
+
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  /** 轮询查询任务结果 */
+  function startPolling(taskId: string) {
+    const poll = () => {
+      defHttp
+        .get({ url: `/airag/chat/getAiPosterResult/${taskId}` }, { isTransformResponse: false })
+        .then((res) => {
+          if (res.success) {
+            if (res.result === 'pending' || res.result === null) {
+              // 继续轮询
+              pollTimer = setTimeout(poll, 3000);
+            } else {
+              // 成功
+              let imageUrl = res.result as string;
+              const reg = /#\s*{\s*domainURL\s*}/g;
+              imageUrl = imageUrl.replace(reg, domainUrl + '/sys/common/static');
+              generatedImage.value = imageUrl;
+              loading.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              createMessage.success('海报生成成功！');
+            }
+          } else {
+            // 失败
+            loading.value = false;
+            localStorage.removeItem(TASK_ID_KEY);
+            createMessage.warning(res.message || '海报生成失败！');
+          }
+        })
+        .catch(() => {
+          pollTimer = setTimeout(poll, 3000);
+        });
+    };
+    poll();
+  }
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  
+  async function handleGenerate() {
+    try {
+      const values = await validate();
+      loading.value = true;
+      generatedImage.value = '';
+      //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+      values.type = 'poster';
+      const res = await defHttp.post(
+        { url: '/airag/chat/genAiPosterAsync', params: values },
+        { isTransformResponse: false },
+      );
+      if (res.success && res.result) {
+        const taskId = res.result as string;
+        localStorage.setItem(TASK_ID_KEY, taskId);
+        startPolling(taskId);
+      } else {
+        loading.value = false;
+        createMessage.warning('提交任务失败！');
+      }
+      //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+    } catch (error) {
+      loading.value = false;
+      console.error('Validation failed:', error);
+    }
+  }
+
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  onMounted(() => {
+    // 切换回菜单时，若有未完成的任务则恢复轮询
+    const savedTaskId = localStorage.getItem(TASK_ID_KEY);
+    if (savedTaskId) {
+      loading.value = true;
+      generatedImage.value = '';
+      startPolling(savedTaskId);
+    }
+  });
+
+  onUnmounted(() => {
+    if (pollTimer) {
+      clearTimeout(pollTimer);
+      pollTimer = null;
+    }
+  });
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+
+  function handlePreview() {
+    previewVisible.value = true;
+  }
+
+  /**
+   * 图片导出
+   */
+  function handleDownload() {
+    if (!generatedImage.value) {
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = generatedImage.value;
+    a.download = `ai-poster-${Date.now()}.jpg`;
+    a.target = '_blank';
+    a.click();
+  }
+</script>
+
+<style lang="less" scoped>
+  .ai-poster-page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    background-color: #f0f2f5;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .page-header {
+      margin-bottom: 16px;
+      background: #fff;
+      padding: 16px 24px;
+      border-radius: 8px;
+
+      .title {
+        font-size: 20px;
+        font-weight: 600;
+        color: #1f2329;
+        margin-right: 12px;
+      }
+
+      .subtitle {
+        color: #8f959e;
+        font-size: 14px;
+      }
+    }
+
+    .content-wrapper {
+      flex: 1;
+      display: flex;
+      gap: 16px;
+      overflow: hidden;
+    }
+
+    .template-panel {
+      width: 200px;
+      min-width: 180px;
+      background: #fff;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      overflow-y: auto;
+
+      .template-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .template-item {
+        border: 1px solid #f0f0f0;
+        border-radius: 6px;
+        padding: 8px;
+        cursor: pointer;
+        transition: all 0.3s;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+
+        &:hover {
+          border-color: #1890ff;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+
+        &.active {
+          border-color: #1890ff;
+          background-color: #e6f7ff;
+        }
+
+        .template-cover {
+          width: 100%;
+          aspect-ratio: 9 / 16;
+          height: auto;
+          background-color: #f5f5f5;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #8c8c8c;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 4px;
+            display: block;
+          }
+        }
+
+        .template-name {
+          font-size: 14px;
+          color: #1f2329;
+          text-align: center;
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .config-panel {
+      width: 550px;
+      min-width: 350px;
+      background: #fff;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      overflow: hidden;
+
+      .form-container {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      .action-container {
+        margin-top: 20px;
+        padding-top: 20px;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+
+    .preview-panel {
+      flex: 1;
+      background: #fff;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      overflow: hidden;
+
+      .preview-content {
+        flex: 1;
+        background: #f7f8fc;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+      }
+    }
+
+    .panel-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1f2329;
+      margin-bottom: 20px;
+      padding-left: 8px;
+      border-left: 4px solid #1890ff;
+      line-height: 1;
+    }
+
+    .empty-state {
+      text-align: center;
+      color: #8f959e;
+
+      p {
+        margin-top: 16px;
+      }
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .result-image-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .result-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        object-fit: contain;
+      }
+
+      .image-actions {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        border-radius: 8px;
+        backdrop-filter: blur(2px);
+      }
+
+      &:hover .image-actions {
+        display: flex;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/AiragExtData.api.ts b/src/views/super/airag/aiprompts/AiragExtData.api.ts
new file mode 100644
index 0000000..50cd406
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragExtData.api.ts
@@ -0,0 +1,94 @@
+import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/airag/extData/list',
+  queryById = '/airag/extData/queryById',
+  save='/airag/extData/add',
+  edit='/airag/extData/edit',
+  deleteOne = '/airag/extData/delete',
+  deleteBatch = '/airag/extData/deleteBatch',
+  importExcel = '/airag/extData/importExcel',
+  exportXls = '/airag/extData/exportXls',
+  debugEvaluator = '/airag/extData/evaluator/debug',
+
+  queryTrackById = '/airag/extData/queryTrackById',
+  getTrackList = '/airag/extData/getTrackList',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+/**
+ * 调用轨迹接口
+ * @param params
+ */
+export const getTrackList = (params) =>
+  defHttp.get({url: Api.getTrackList, params});
+/**
+ * 根据数据集id查询数据
+ * @param params
+ */
+export const queryById = (params) =>
+  defHttp.get({url: Api.queryById, params},{isTransformResponse: false});
+/**
+ * 根据数据集id查询数据
+ * @param params
+ */
+export const queryTrackById = (params) =>
+  defHttp.get({url: Api.queryTrackById, params},{isTransformResponse: false});
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate,showSuccessMsg=true) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({url: url, params},{successMessageMode:showSuccessMsg?'success':'none'});
+}
+/**
+ * 調試
+ * @param params
+ */
+export const debugEvaluator = (params) => {
+  return defHttp.post({url: Api.debugEvaluator, params},{ isTransformResponse: false });
+}
diff --git a/src/views/super/airag/aiprompts/AiragExtData.data.ts b/src/views/super/airag/aiprompts/AiragExtData.data.ts
new file mode 100644
index 0000000..85a7221
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragExtData.data.ts
@@ -0,0 +1,61 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    align: 'center',
+    dataIndex: 'name',
+  },
+  {
+    title: '描述信息',
+    align: 'center',
+    dataIndex: 'descr',
+  },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '名称',
+    field: 'name',
+    component: 'Input',
+    colProps: {
+      span: 6,
+    },
+  },
+];
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '业务类型标识',
+    field: 'bizType',
+    component: 'Input',
+    defaultValue: 'evaluator',
+    show: false,
+  },
+  {
+    label: '名称',
+    field: 'name',
+    component: 'Input',
+  },
+  {
+    label: '描述信息',
+    field: 'descr',
+    component: 'InputTextArea',
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+];
+
+/**
+ * 流程表单调用这个方法获取formSchema
+ * @param param
+ */
+export function getBpmFormSchema(_formData): FormSchema[] {
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return formSchema;
+}
diff --git a/src/views/super/airag/aiprompts/AiragExtDataExperiment.vue b/src/views/super/airag/aiprompts/AiragExtDataExperiment.vue
new file mode 100644
index 0000000..c96cfe9
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragExtDataExperiment.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-card class="ai-prompts-info">
+    <AiragExtDataList ref="processRef" v-if="activeKey==='evaluator'"></AiragExtDataList>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+/**
+ * 评估器 evaluator
+ * 评测集 evaluationSet
+ * 实验 experiment
+ */
+import { ref, onMounted } from 'vue';
+import AiragExtDataList from './AiragExtDataList.vue'
+
+/**
+ * 评估器 evaluator
+ * 评测集 evaluationSet
+ * 实验 experiment
+ */
+const activeKey = ref('evaluator');
+/**
+ * 切换tab
+ */
+function handleChangePanel(key) {
+  activeKey.value = key;
+}
+
+onMounted(()=>{
+  activeKey.value = 'evaluator';
+});
+</script>
+
+<style scoped lang="less">
+.ai-prompts-info {
+  margin: 10px;
+  :deep(.ant-card-body) {
+    padding: 12px 8px;
+  }
+  :deep(.ant-tabs-tabpane) {
+    padding-left: 12px !important;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aiprompts/AiragExtDataList.vue b/src/views/super/airag/aiprompts/AiragExtDataList.vue
new file mode 100644
index 0000000..026acb6
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragExtDataList.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <AiragExtDataModal @register="registerModal" @success="handleSuccess"></AiragExtDataModal>
+    <!-- 评测集 -->
+    <AiragDataSetModal @register="registerDataSetModal" @success="handleSuccess"></AiragDataSetModal>
+    <!-- 评估器配置 -->
+    <AiEvaluatorSettingModal @register="registerEvaluatorModal" @success="handleSuccess"></AiEvaluatorSettingModal>
+    <!-- 调试配置 -->
+    <AiEvaluatorDebugModal @register="registerDebugModal" @success="handleSuccess"></AiEvaluatorDebugModal>
+    <!-- 调用记录 -->
+    <AiragInvokeRecordsDrawer @register="registerRecordsModal" @success="handleSuccess"></AiragInvokeRecordsDrawer>
+  </div>
+</template>
+
+<script lang="ts" name="prompts-airagExtData" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import AiragExtDataModal from './components/AiragExtDataModal.vue';
+  import AiragDataSetModal from './components/AiragDataSetModal.vue';
+  import AiEvaluatorSettingModal from './components/AiEvaluatorSettingModal.vue';
+  import AiEvaluatorDebugModal from './components/AiEvaluatorDebugModal.vue';
+  import AiragInvokeRecordsDrawer from './components/AiragInvokeRecordsDrawer.vue';
+  import { columns, searchFormSchema } from './AiragExtData.data';
+  import { list, deleteOne } from './AiragExtData.api';
+  //注册model
+  const [registerModal, { openModal }] = useModal();
+  //注册评测集model
+  const [registerDataSetModal, { openModal:openDataSetModal }] = useModal();
+  //注册评估器model
+  const [registerEvaluatorModal, { openModal:openEvaluatorModal }] = useModal();
+  //注册评估器model
+  const [registerDebugModal, { openModal:openDebugModal }] = useModal();
+  //注册调用记录model
+  const [registerRecordsModal, { openDrawer:openRecordsDrawer }] = useDrawer();
+  const { tableContext } = useListPage({
+    tableProps: {
+      title: 'airag_ext_data',
+      api: list,
+      columns,
+      canResize: true,
+      formConfig: {
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
+      },
+      actionColumn: {
+        width: 120,
+        fixed: 'right',
+      },
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    openEvaluatorModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDateSet(record: Recordable) {
+    openDataSetModal(true, {
+      record,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+  /**
+   * 调试事件
+   */
+  async function handleDebug(record) {
+    openDebugModal(true, {
+      record,
+    });
+  }
+  /**
+   * 调试事件
+   */
+  async function handleRecords(record) {
+    openRecordsDrawer(true, {
+      record,
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '配置',
+        onClick: handleEdit.bind(null, record),
+      }
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '评测集',
+        onClick: handleDateSet.bind(null, record),
+      },
+      {
+        label: '调试',
+        onClick: handleDebug.bind(null, record),
+      },
+      {
+        label: '调用记录',
+        onClick: handleRecords.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+      },
+    ];
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/AiragPrompts.api.ts b/src/views/super/airag/aiprompts/AiragPrompts.api.ts
new file mode 100644
index 0000000..53fe4f2
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragPrompts.api.ts
@@ -0,0 +1,81 @@
+import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/airag/prompts/list',
+  queryById = '/airag/prompts/queryById',
+  save='/airag/prompts/add',
+  edit='/airag/prompts/edit',
+  deleteOne = '/airag/prompts/delete',
+  deleteBatch = '/airag/prompts/deleteBatch',
+  importExcel = '/airag/prompts/importExcel',
+  exportXls = '/airag/prompts/exportXls',
+
+  promptExperiment = '/airag/prompts/experiment',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+
+/**
+ * 根据ID查询提示词详情
+ * @param id 提示词ID
+ */
+export const queryById = (id: string) =>
+  defHttp.get({url: Api.queryById, params: {id}});
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({url: url, params});
+}
+/**
+ * 实验
+ * @param params
+ */
+export const promptExperiment = (params) => {
+  return defHttp.post({url: Api.promptExperiment, params},{ isTransformResponse: false });
+}
diff --git a/src/views/super/airag/aiprompts/AiragPrompts.data.ts b/src/views/super/airag/aiprompts/AiragPrompts.data.ts
new file mode 100644
index 0000000..7c74b22
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragPrompts.data.ts
@@ -0,0 +1,143 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import {duplicateCheckDelay} from "@/views/system/user/user.api";
+import {pinyin} from "pinyin-pro";
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    align: 'center',
+    dataIndex: 'name',
+  },
+  {
+    title: '功能描述',
+    align: 'center',
+    dataIndex: 'description',
+  },
+  // {
+  //   title: '状态',
+  //   align: 'center',
+  //   dataIndex: 'status',
+  // },
+  {
+    title: '最近提交人',
+    align: 'center',
+    dataIndex: 'updateBy',
+  },
+  {
+    title: '最近提交时间',
+    align: 'center',
+    dataIndex: 'updateTime',
+  },
+  {
+    title: '创建人',
+    align: 'center',
+    dataIndex: 'createBy',
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'createTime',
+  }
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+    {
+      label: '名称',
+      field: 'name',
+      component: 'Input',
+    },
+];
+// 名称最大长度
+export const NAME_MAX_LENGTH = 40;
+// 编码最大长度
+export const CODE_MAX_LENGTH = 50;
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '名称',
+    field: 'name',
+    component: 'Input',
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '例如：SQL转换',
+        maxlength: 40,
+        showCount: true,
+        onChange: (e: ChangeEvent) => {
+          if(formModel.id){
+            return
+          }
+          let code = pinyin(e.target.value, {
+            toneType: 'none',
+            type: 'array',
+            nonZh: 'consecutive',
+          }).join('_');
+          code = code.replace(/[^a-zA-Z0-9_\-]/g, '');
+          formModel.promptKey = code;
+        },
+      };
+    },
+    dynamicRules() {
+      return [
+        {required: true, message: '请输入提示词名称'},
+        {
+          max: NAME_MAX_LENGTH,
+          message: `名称长度不能超过${NAME_MAX_LENGTH}个字符`,
+        },
+      ];
+    }
+  },
+  {
+    label: '提示词编码',
+    field: 'promptKey',
+    component: 'Input',
+    dynamicRules({ model }) {
+      return [
+        { required: true, message: '提示词编码' },
+        {
+          async validator(_, value) {
+            if (value?.length > CODE_MAX_LENGTH) {
+              throw `编码长度不能超过${CODE_MAX_LENGTH}个字符`;
+            }
+            const pattern = /^[a-z|A-Z][a-z|A-Z\d_-]*$/;
+            if (!pattern.test(value)) {
+              throw '编码必须以字母开头，可包含数字、下划线、横杠';
+            } else if (/[A-Z]/.test(value)) {
+              throw '不支持大写字母';
+            } else {
+              const res = await duplicateCheckDelay({
+                tableName: 'airag_prompts',
+                fieldName: 'prompt_key',
+                fieldVal: value,
+                dataId: model.id,
+              }) as any;
+              if (!res.success) {
+                throw '表单编码已存在！';
+              }
+            }
+          },
+        },
+      ];
+    }
+  },
+  {
+    label: '提示词功能描述',
+    field: 'description',
+    component: 'InputTextArea',
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+];
+
+/**
+ * 流程表单调用这个方法获取formSchema
+ * @param param
+ */
+export function getBpmFormSchema(_formData): FormSchema[] {
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return formSchema;
+}
diff --git a/src/views/super/airag/aiprompts/AiragPromptsList.vue b/src/views/super/airag/aiprompts/AiragPromptsList.vue
new file mode 100644
index 0000000..a79518a
--- /dev/null
+++ b/src/views/super/airag/aiprompts/AiragPromptsList.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">新增</a-button>
+
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button v-auth="'prompts:airag_prompts:deleteBatch'"
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <AiragPromptsModal @register="registerModal" @success="handleSuccess"></AiragPromptsModal>
+    <!-- 表单区域 -->
+    <AiPromptSettingModal @register="registerSettingModal" @success="handleSuccess"></AiPromptSettingModal>
+  </div>
+</template>
+
+<script lang="ts" name="prompts-airagPrompts" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import AiragPromptsModal from './components/AiragPromptsModal.vue';
+  import AiPromptSettingModal from './components/AiPromptSettingModal.vue';
+  import { columns, searchFormSchema } from './AiragPrompts.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AiragPrompts.api';
+  //注册model
+  const [registerModal, { openModal }] = useModal();
+  //注册model
+  const [registerSettingModal, { openModal: openSettingModal }] = useModal();
+  //注册table数据
+  const { tableContext } = useListPage({
+    tableProps: {
+      title: 'airag_prompts',
+      api: list,
+      columns,
+      canResize: true,
+      formConfig: {
+        //labelWidth: 120,
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
+      },
+      actionColumn: {
+        width: 120,
+        fixed: 'right',
+      },
+    },
+    exportConfig: {
+      name: 'airag_prompts',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    openSettingModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '配置',
+        onClick: handleEdit.bind(null, record),
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+      },
+    ];
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiEvaluatorDebugModal.vue b/src/views/super/airag/aiprompts/components/AiEvaluatorDebugModal.vue
new file mode 100644
index 0000000..f18d5fd
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiEvaluatorDebugModal.vue
@@ -0,0 +1,894 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :canFullscreen="true"
+    defaultFullscreen
+    destroyOnClose
+    title="评测调试"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+    wrapClassName="evaluator-debug-modal"
+  >
+    <!-- 步骤条 -->
+    <a-steps :current="currentStep" class="steps-container">
+      <a-step title="选择提示词">
+        <template #icon>
+          <Icon icon="ant-design:file-search-outlined" />
+        </template>
+      </a-step>
+      <a-step title="调试配置">
+        <template #icon>
+          <Icon icon="ant-design:setting-outlined" />
+        </template>
+      </a-step>
+    </a-steps>
+
+    <!-- 第一步：选择提示词和字段映射 -->
+    <div v-show="currentStep === 0" class="step-content step-one">
+      <div class="form-section">
+        <div class="form-item">
+          <label class="form-label">选择提示词：</label>
+          <a-select v-model:value="selectedPromptKey" placeholder="请选择提示词" class="prompt-select" @change="onPromptChange">
+            <a-select-option v-for="prompt in promptOptions" :key="prompt.key" :value="prompt.key">
+              <span class="prompt-option">
+                <Icon icon="ant-design:file-text-outlined" />
+                {{ prompt.name }}
+              </span>
+            </a-select-option>
+          </a-select>
+        </div>
+
+        <div class="mapping-section" v-if="selectedPromptKey">
+          <div class="section-header">
+            <h3>
+              <Icon icon="ant-design:link-outlined" />
+              字段映射关系
+            </h3>
+          </div>
+          <div class="mapping-list">
+            <div class="mapping-item">
+              <div class="field-label">
+                <Icon icon="ant-design:tag-outlined" />
+                用户输入[user_query]
+              </div>
+              <div class="equal-sign">=</div>
+              <a-select allow-clear v-model:value="fieldMappings['user_query']" placeholder="请选择数据集字段" class="field-select">
+                <a-select-option v-for="column in datasetColumns" :key="column.key" :value="column.key">
+                  <span class="column-option">
+                    <span style="color:blue">评测集</span>
+                    <span> [{{ column.title }}]</span>
+                    <span style="margin-left: 5px">
+                      <a-tooltip :title="column.description"><Icon icon="ant-design:info-circle-outlined" size="14" /></a-tooltip>
+                    </span>
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+            <div class="mapping-item" v-for="(item, index) in promptParams" :key="index">
+              <div class="field-label">
+                <Icon icon="ant-design:tag-outlined" />
+                变量[{{ item.name }}]
+              </div>
+              <div class="equal-sign">=</div>
+              <a-select allow-clear v-model:value="fieldMappings[item.name]" placeholder="请选择数据集字段" class="field-select">
+                <a-select-option v-for="column in datasetColumns" :key="column.key" :value="column.key">
+                  <span class="column-option">
+                    <span style="color:blue">评测集</span>
+                    <span> [{{ column.title }}]</span>
+                    <span style="margin-left: 5px">
+                      <a-tooltip :title="column.description"><Icon icon="ant-design:info-circle-outlined" size="14" /></a-tooltip>
+                    </span>
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-footer">
+        <a-button @click="closeModal" class="footer-btn cancel-btn">
+          <Icon icon="ant-design:close-circle-outlined" />
+          取消
+        </a-button>
+        <a-button type="primary" @click="nextStep" :disabled="!selectedPromptKey || !fieldMappings['user_query']" class="footer-btn next-btn">
+          <Icon icon="ant-design:right-circle-outlined" />
+          下一步
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 第二步：调试配置和结果显示 -->
+    <div v-show="currentStep === 1" class="step-content step-two">
+      <div class="form-section">
+        <div class="mapping-section">
+          <div class="section-header">
+            <h3>
+              <Icon icon="ant-design:link-outlined" />
+              字段映射
+            </h3>
+          </div>
+          <div class="mapping-list">
+            <div class="mapping-item" v-for="(item, index) in evaluatorFields" :key="index">
+              <div class="field-label">
+                <Icon icon="ant-design:tag-outlined" />
+                评估器 [{{ item.field }}]
+              </div>
+              <div class="equal-sign">=</div>
+              <a-select allow-clear v-model:value="fieldMappings[item.field]" placeholder="请选择数据集字段" class="field-select">
+                <a-select-option v-for="column in evaluatorColumns" :key="column.name" :value="column.name">
+                  <span class="column-option">
+<!--                    <a-divider style="margin:4px 0;" v-if="column.label" />-->
+                    <span :style="{color:column.label ? 'green' : 'blue'}"> [{{ column.label || '评测集' }}] </span>
+                    <span>{{ column.name }}</span>
+                    <span style="margin-left: 5px">
+                      <a-tooltip :title="column.description">
+                        <Icon icon="ant-design:info-circle-outlined" size="14"/>
+                      </a-tooltip>
+                    </span>
+                  </span>
+                </a-select-option>
+              </a-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="debug-result" v-if="debugResult.length > 0 || confirmLoading">
+          <div class="section-header">
+            <h3>
+              <Icon icon="ant-design:bar-chart-outlined" />
+              调试结果
+            </h3>
+          </div>
+          <div class="debug-result-container">
+            <!-- 条件渲染，当有调试结果时显示表格 -->
+            <div class="result-table-container" v-if="debugResult.length > 0">
+              <!-- 添加外部容器和标题 -->
+              <div class="table-header">
+                <div class="table-title" v-if="!confirmLoading">调试结果</div>
+                <div class="table-title"  v-if="confirmLoading"><span>实验初始化中，请稍后点击<a href="javascript:void(0)" @click="handleReload">刷新</a></span></div>
+                <div class="table-subtitle">实际输出与参考输出对比</div>
+              </div>
+
+              <!-- 表格区域 -->
+              <a-table
+                :columns="resultColumns"
+                :dataSource="debugResult"
+                :pagination="false"
+                :scroll="{ x: 'max-content' }"
+                class="result-table"
+                :rowClassName="setRowClassName"
+              >
+                <!-- 自定义单元格渲染 -->
+                <template #bodyCell="{ column, record, text }">
+                  <!-- 状态列特殊样式 -->
+                  <template v-if="column.dataIndex === 'status'">
+                    <span :class="['status-badge', getStatusClass(record)]">
+                      {{ text }}
+                    </span>
+                  </template>
+                </template>
+              </a-table>
+            </div>
+
+            <!-- 无数据时显示加载或提示 -->
+            <div v-else class="no-data-container">
+              <div class="loading-text" v-if="confirmLoading">
+                <loading-outlined style="font-size: 24px; margin-right: 8px" @click="handleReload" />
+                <span>实验初始化中，请稍后点击<a href="javascript:void(0)" @click="handleReload">刷新</a></span>
+              </div>
+              <div class="empty-text" v-else> 暂无调试结果 </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-footer">
+        <a-button @click="prevStep" class="footer-btn prev-btn">
+          <Icon icon="ant-design:left-circle-outlined" />
+          上一步
+        </a-button>
+        <a-button v-if="debugResult.length == 0"  :disabled="canConfirmDebug" :loading="confirmLoading" type="primary" @click="confirmDebug" class="footer-btn confirm-btn">
+          <Icon v-if="!confirmLoading" icon="ant-design:play-circle-outlined" />
+          {{ confirmLoading ? '正在调试...' : '确认调试配置' }}
+        </a-button>
+        <a-button v-if="debugResult.length > 0" @click="closeModal" class="footer-btn close-btn">
+          <Icon icon="ant-design:check-circle-outlined" />
+          完成
+        </a-button>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive,computed  } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  import { list, promptExperiment } from '../AiragPrompts.api';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { queryTrackById } from '@/views/super/airag/aiprompts/AiragExtData.api';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  // 确认调试配置加载状态
+  const confirmLoading = ref(false);
+  // 提示信息
+  const { createMessage } = useMessage();
+  //核心数据
+  const record = ref<any>({});
+  // 步骤控制
+  const currentStep = ref(0);
+  // 选择调试的提示词
+  const selectedPromptKey = ref<string>('');
+  const selectedPrompt = ref<any>({});
+  // 评估器字段配置
+  const evaluatorFields = ref<any>([]);
+  // 评估器下拉列配置
+  const evaluatorColumns = ref<any>([]);
+  //字段映射
+  const fieldMappings = reactive<Record<string, string>>({});
+  //页码配置
+  const page = ref({
+    pageNo: 1,
+    pageSize: 10,
+  });
+  // 提示词选项数据
+  const promptOptions = ref<any[]>([]);
+  // 数据集列
+  const datasetColumns = ref<any[]>([]);
+  // 提示词参数
+  const promptParams = ref<any[]>([]);
+  // 调试结果
+  const debugResult = ref<any[]>([]);
+  // 结果表格列
+  const resultColumns = ref<any[]>([
+    { title: '问题', dataIndex: 'userQuery', key: 'userQuery',fixed: 'left' },
+    { title: '提示词输出答案', dataIndex: 'promptAnswer', key: 'promptAnswer',fixed: 'left' },
+    { title: '评分', dataIndex: 'answerScore', key: 'answerScore',fixed: 'left' },
+  ]);
+
+  // 确认调试配置
+  const canConfirmDebug = computed(() => {
+    let canConfirm = true;
+    evaluatorFields.value.forEach((field) => {
+      if(!fieldMappings[field.name]){
+        canConfirm = false;
+      }
+    });
+    return canConfirm;
+  });
+  // 表单赋值
+  const [registerModal, { closeModal }] = useModalInner(async (data) => {
+    //调试数据
+    record.value = data.record;
+    //重置数据
+    resetForm();
+    //查询提示词
+    await getPromptList();
+    //查询测评列配置
+    getDatasetColumns();
+    //查询评估器字段配置
+    getEvaluatorFields();
+    console.log('evaluatorColumns.value', evaluatorColumns.value);
+  });
+
+  /**
+   * 获取数据集列字段
+   */
+  function getDatasetColumns() {
+    let datasetValue = record.value?.datasetValue;
+    if (datasetValue) {
+      let columns = JSON.parse(datasetValue).columns;
+      columns.forEach((item) => {
+        if(item.name !== 'action') {
+          datasetColumns.value.push({ ...item, key: item.name, title: item.name });
+          evaluatorColumns.value.push({ ...item });
+          if(!resultColumns.value.some(a=> a.dataIndex === item.name)){
+            resultColumns.value.push({ title: item.name, dataIndex: item.name, key: item.name });
+          }
+        }
+      });
+    } else {
+      createMessage.warning('未配置评测集信息！');
+    }
+  }
+  /**
+   * 获取数据集列字段
+   */
+  function getEvaluatorFields() {
+    let dataValue = record.value?.dataValue;
+    if (dataValue) {
+      evaluatorFields.value = dataValue.match(/{{\s*([^}\s]+)\s*}}/g).map((match) => ({ field: match.replace(/{{\s*|\s*}}/g, '') }));
+    } else {
+      createMessage.warning('未配置评测集信息！');
+    }
+    //列配置
+    evaluatorColumns.value.push({ name: 'actual_output', label: '评测对象', description: '实际输出', dateType: 'String' });
+  }
+
+  /**
+   * 获取提示词
+   */
+  async function getPromptList() {
+    const res = await list({ ...page });
+    if (res?.records) {
+      res?.records.forEach((item) => {
+        promptOptions.value.push({ name: item.name, key: item.promptKey, value: item.promptKey, ...item });
+      });
+    }
+  }
+  // 重置表单
+  function resetForm() {
+    currentStep.value = 0;
+    selectedPromptKey.value = '';
+    promptOptions.value = [];
+    datasetColumns.value = [];
+    promptParams.value = [];
+    evaluatorColumns.value = [];
+    Object.keys(fieldMappings).forEach((key) => {
+      delete fieldMappings[key];
+    });
+    debugResult.value = [];
+  }
+
+  // 提示词改变事件
+  function onPromptChange(value: string) {
+    //选中的提示词信息
+    selectedPrompt.value = promptOptions.value.find((item) => item.value == value);
+    // 清空之前的映射
+    Object.keys(fieldMappings).forEach((key) => {
+      delete fieldMappings[key];
+    });
+    let modelParam = selectedPrompt.value?.modelParam;
+    if(modelParam){
+      modelParam = typeof modelParam === 'string' ? JSON.parse(modelParam) : modelParam;
+      if(modelParam?.promptVariables && modelParam?.promptVariables.length > 0){
+        modelParam.promptVariables.forEach((item) => {
+          promptParams.value.push({ name: item.name, label: item.name, description: item.description, dateType: 'String' });
+        });
+      }
+    }
+  }
+
+  // 下一步
+  function nextStep() {
+    if (selectedPromptKey.value) {
+      currentStep.value = 1;
+    }
+  }
+
+  // 上一步
+  function prevStep() {
+    confirmLoading.value = false;
+    debugResult.value = [];
+    currentStep.value = 0;
+  }
+
+  // 确认调试配置
+  async function confirmDebug() {
+    // 模拟调试过程
+    let params = {
+      mappings: fieldMappings,
+      promptKey: selectedPromptKey.value,
+      extDataId: record.value.id,
+    };
+    console.log('开始调试...', params);
+    confirmLoading.value = true;
+    let res = await promptExperiment(params);
+    console.log('结束调试res...', res);
+    emit('success');
+  }
+
+  // 刷新评测集
+  async function handleReload() {
+    debugResult.value = []
+    let res = await queryTrackById({ id: record.value.id });
+    console.log('刷新评测集res...', res);
+    if (!res.success) {
+      createMessage.error(res.message);
+      return;
+    } else {
+      if (res.result && res.result.length > 0) {
+        console.log('刷新评测集res.result...', res.result);
+        confirmLoading.value = false;
+        // 1. 先找出最大version值
+        const maxVersion = Math.max(...res.result.map(item => item.version));
+
+        // 2. 过滤出所有具有最大version的项
+        const maxVersionItems = res.result.filter(item => item.version === maxVersion);
+       
+        console.log('刷新评测集maxVersionItems...', maxVersionItems);
+        if (maxVersionItems.length > 0) {
+          maxVersionItems.forEach((item) => {
+            debugResult.value.push(JSON.parse(item.dataValue));
+          });
+        }
+      }else{
+        createMessage.warning('数据处理中，请稍后刷新！');
+      }
+    }
+  }
+
+  // 状态样式类
+  const getStatusClass = (record) => {
+    if (record.status === '成功') return 'status-success';
+    if (record.status === '失败') return 'status-failed';
+    if (record.status === '警告') return 'status-warning';
+    return '';
+  };
+
+  // 行样式
+  const setRowClassName = (record, index) => {
+    return index % 2 === 0 ? 'even-row' : 'odd-row';
+  };
+</script>
+
+<style lang="less" scoped>
+  @primary-color: #1890ff;
+  @success-color: #52c41a;
+  @warning-color: #faad14;
+  @error-color: #ff4d4f;
+  @border-color: #e8e8e8;
+  @background-color: #f5f7fa;
+  @text-color: #262626;
+  @text-secondary: #8c8c8c;
+
+  .steps-container {
+    margin: 15px 0;
+    padding: 30px;
+    border-radius: 8px;
+    background: linear-gradient(90deg, #f0f8ff, #e6f7ff);
+    overflow: auto;
+    max-height: calc(100vh - 200px);
+    :deep(.ant-steps-item-icon) {
+      background: white;
+      border-color: @primary-color;
+      width: 35px;
+      .ant-steps-icon {
+        color: @primary-color;
+      }
+    }
+
+    :deep(.ant-steps-item-finish) {
+      .ant-steps-item-icon {
+        background: @primary-color;
+        width: 35px;
+        .ant-steps-icon {
+          color: white;
+        }
+      }
+
+      .ant-steps-item-title {
+        color: @primary-color;
+      }
+    }
+
+    :deep(.ant-steps-item-title) {
+      font-weight: 500;
+    }
+  }
+
+  .step-content {
+    padding: 20px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+
+    &.step-one {
+      .prompt-select {
+        width: 100%;
+        font-size: 14px;
+      }
+    }
+
+    &.step-two {
+      .mapping-summary {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 16px;
+        margin-top: 16px;
+      }
+
+      .summary-item {
+        display: flex;
+        padding: 12px 16px;
+        background-color: @background-color;
+        border-radius: 6px;
+        border: 1px solid @border-color;
+
+        .field-key {
+          font-weight: 500;
+          color: @text-color;
+          margin-right: 12px;
+          min-width: 80px;
+
+          &::after {
+            content: ':';
+          }
+        }
+
+        .field-value {
+          color: @text-secondary;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .section-header {
+    h3 {
+      margin: 0 0 20px 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: @text-color;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      svg {
+        color: @primary-color;
+      }
+    }
+  }
+
+  .form-section {
+    margin-bottom: 24px;
+  }
+
+  .form-item {
+    margin-bottom: 24px;
+
+    .form-label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 500;
+      font-size: 15px;
+      color: @text-color;
+    }
+
+    .prompt-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  .mapping-section {
+    margin-top: 30px;
+    padding: 20px;
+    background-color: @background-color;
+    border-radius: 8px;
+    border: 1px solid @border-color;
+
+    .mapping-list {
+      .mapping-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 16px;
+        background: white;
+        border-radius: 6px;
+        border: 1px solid @border-color;
+        transition: all 0.3s;
+
+        &:hover {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          border-color: @primary-color;
+        }
+
+        .field-label {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-weight: 500;
+          color: @text-color;
+          min-width: 140px;
+          padding-right: 16px;
+        }
+
+        .equal-sign {
+          font-weight: bold;
+          color: @text-secondary;
+          margin: 0 12px;
+        }
+
+        .field-select {
+          flex: 1;
+
+          .column-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .debug-result {
+    margin-top: 36px;
+    padding: 20px;
+    background-color: @background-color;
+    border-radius: 8px;
+    border: 1px solid @border-color;
+
+    .result-table-container {
+      margin-top: 16px;
+      border-radius: 6px;
+      overflow: hidden;
+      border: 1px solid @border-color;
+
+      :deep(.result-table) {
+        .ant-table-thead > tr > th {
+          background-color: #fafafa;
+          font-weight: 600;
+          color: @text-color;
+        }
+
+        .ant-table-tbody > tr:hover {
+          background-color: #f0f8ff;
+        }
+      }
+    }
+  }
+
+  .form-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    padding-top: 24px;
+    margin-top: 24px;
+    border-top: 1px solid @border-color;
+
+    .footer-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 20px;
+      font-size: 14px;
+      border-radius: 6px;
+      transition: all 0.3s;
+
+      &.cancel-btn {
+        &:hover {
+          color: @error-color;
+          border-color: @error-color;
+        }
+      }
+
+      &.next-btn,
+      &.confirm-btn {
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
+        }
+      }
+
+      &.prev-btn {
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+      }
+
+      &.close-btn {
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 8px rgba(82, 196, 26, 0.2);
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .step-content {
+      padding: 16px;
+    }
+
+    .mapping-section {
+      padding: 16px;
+
+      .mapping-list {
+        .mapping-item {
+          flex-direction: column;
+          align-items: flex-start;
+
+          .field-label {
+            margin-bottom: 10px;
+            padding-right: 0;
+          }
+
+          .equal-sign {
+            display: none;
+          }
+
+          .field-select {
+            width: 100%;
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+
+    .step-two .mapping-summary {
+      grid-template-columns: 1fr;
+    }
+
+    .form-footer {
+      flex-direction: column;
+
+      .footer-btn {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+  }
+
+  .debug-result-container {
+    margin: 16px 0;
+  }
+
+  .table-header {
+    padding: 12px 16px;
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1890ff;
+  }
+
+  .table-subtitle {
+    font-size: 12px;
+    color: #999;
+    margin-top: 4px;
+  }
+
+  .result-table {
+    border: 1px solid #e8e8e8;
+  }
+
+  :deep(.ant-table-thead > tr > th) {
+    background-color: #f5f5f5;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #1890ff;
+  }
+
+  :deep(.ant-table-tbody > tr.even-row) {
+    background-color: #fafafa;
+  }
+
+  :deep(.ant-table-tbody > tr.odd-row) {
+    background-color: #fff;
+  }
+
+  :deep(.ant-table-tbody > tr:hover) {
+    background-color: #e6f7ff !important;
+  }
+
+  .status-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  .status-success {
+    background-color: #f6ffed;
+    color: #52c41a;
+    border: 1px solid #b7eb8f;
+  }
+
+  .status-failed {
+    background-color: #fff2f0;
+    color: #ff4d4f;
+    border: 1px solid #ffccc7;
+  }
+
+  .status-warning {
+    background-color: #fffbe6;
+    color: #faad14;
+    border: 1px solid #ffe58f;
+  }
+
+  .latency-text {
+    font-weight: 500;
+  }
+
+  .latency-low {
+    color: #52c41a;
+  }
+
+  .latency-medium {
+    color: #faad14;
+  }
+
+  .latency-high {
+    color: #ff4d4f;
+  }
+
+  .input-cell,
+  .output-cell {
+    padding: 4px 0;
+  }
+
+  .cell-label {
+    font-size: 11px;
+    color: #999;
+    margin-bottom: 2px;
+  }
+
+  .cell-value {
+    font-size: 13px;
+    color: #333;
+    word-break: break-word;
+  }
+
+  .output-cell.reference .cell-value {
+    color: #1890ff;
+  }
+
+  .output-cell.actual .cell-value {
+    color: #52c41a;
+  }
+
+  .table-footer {
+    display: flex;
+    justify-content: flex-start;
+    gap: 24px;
+    padding: 12px 16px;
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .footer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .footer-label {
+    font-size: 12px;
+    color: #666;
+  }
+
+  .footer-value {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1890ff;
+  }
+
+  .no-data-container {
+    padding: 40px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    background-color: #fafafa;
+  }
+
+  .loading-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #666;
+  }
+
+  .empty-text {
+    color: #999;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiEvaluatorSettingModal.vue b/src/views/super/airag/aiprompts/components/AiEvaluatorSettingModal.vue
new file mode 100644
index 0000000..02cd660
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiEvaluatorSettingModal.vue
@@ -0,0 +1,917 @@
+<template>
+  <div class="p-2">
+    <BasicModal
+      wrapClassName="ai-prompt-edit-modal"
+      destroyOnClose
+      @register="registerModal"
+      :canFullscreen="false"
+      defaultFullscreen
+      width="800px"
+      :footer="null"
+      @visible-change="visibleChange"
+      @cancel="handleCancel"
+    >
+      <template #title>
+        <div style="display: flex; width: 100%; justify-content: space-between; align-items: center">
+          <div style="display: flex">
+            <img :src="getImage()" class="header-img" />
+            <div class="header-name">{{ formState.name }}</div>
+            <a-tooltip title="提示词评估器">
+              <Icon icon="ant-design:edit-outlined" style="margin-left: 4px; cursor: pointer" color="#354052" size="20" @click="handleEdit"></Icon>
+            </a-tooltip>
+          </div>
+<!--          <div>-->
+<!--            应用编排-->
+<!--            <a-tooltip title="AI应用文档">-->
+<!--              <a style="color: unset" href="https://help.jeecg.com/aigc/guide/app" target="_blank">-->
+<!--                <Icon style="position: relative; left: 2px; top: 1px" icon="ant-design:question-circle-outlined"></Icon>-->
+<!--              </a>-->
+<!--            </a-tooltip>-->
+<!--          </div>-->
+          <div style="display: flex">
+            <a-button @click="handleOk" style="margin-right: 30px" type="primary">保存</a-button>
+          </div>
+        </div>
+      </template>
+      <div style="height: 100%; width: 100%">
+        <a-row :span="24">
+          <a-col :span="showTest?12:24">
+            <div class="orchestration">提示词评估器</div>
+          </a-col>
+          <a-col :span="12" v-if="showTest">
+            <div class="view">构造测试数据</div>
+          </a-col>
+        </a-row>
+        <a-row :span="24">
+          <a-col :span="showTest?12:24" class="setting-left">
+            <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+              <a-row>
+                <a-col :span="24">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.modelId">
+                      <template #label>
+                        <div style="display: flex; justify-content: space-between; width: 100%; margin-right: 2px">
+                          <div class="item-title">AI模型</div>
+                          <div @click="handleParamSettingClick('model')" class="knowledge-txt">
+                            <Icon icon="ant-design:setting-outlined" size="13" style="margin-right: 2px"></Icon>参数配置
+                          </div>
+                        </div>
+                      </template>
+                      <JDictSelectTag
+                        v-model:value="formState.modelId"
+                        placeholder="请选择AI模型"
+                        dict-code="airag_model where model_type = 'LLM' and activate_flag = 1,name,id"
+                        style="width: 100%"
+                        @change="handleModelIdChange"
+                      ></JDictSelectTag>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <!-- 提示词 -->
+                <a-col :span="24" class="mt-10">
+                  <div class="prompt-back">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.dataValue" style="margin-bottom: 0">
+                      <template #label>
+                        <div class="prompt-title-padding item-title space-between">
+                          <span>评估器</span>
+                          <a-button size="middle" ghost>
+                            <span style="align-items: center; display: flex" @click="generatedPrompt">
+                              <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                  d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"
+                                />
+                              </svg>
+                              <span style="margin-left: 4px">生成</span>
+                            </span>
+                          </a-button>
+                        </div>
+                      </template>
+                      <a-textarea :rows="16" v-model:value="formState.dataValue" placeholder="请输入评估提示" />
+                      <!-- 评估器内容格式 -->
+                      <div class="variable-container">
+                        <div class="variable-container-header">
+                          <Icon icon="ant-design:file-text-outlined" class="output-format-icon" />
+                          <span class="variable-format-title">评估器内容变量要求（点击变量插入到评估器内容）</span>
+                        </div>
+                        <div class="variable-container-content">
+                          <div class="variable-tag-wrapper">
+                            <a-tooltip title="评估的输入内容变量（必填）">
+                              <a-tag color="blue" class="variable-tag required-tag" @click="handleTagClick('input')">input</a-tag>
+                            </a-tooltip>
+                            <a-tooltip title="评估的输出内容变量（必填）">
+                              <a-tag color="blue" class="variable-tag required-tag" @click="handleTagClick('output')">output</a-tag>
+                            </a-tooltip>
+                            <a-tooltip title="评估的参考内容变量">
+                              <a-tag color="default" class="variable-tag optional-tag" @click="handleTagClick('reference')">reference</a-tag>
+                            </a-tooltip>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- 输出格式 -->
+                      <div class="output-format-card">
+                        <div class="output-format-header">
+                          <Icon icon="ant-design:file-text-outlined" class="output-format-icon" />
+                          <span class="output-format-title">输出格式要求</span>
+                        </div>
+                        <div class="output-format-content">
+                          <div class="output-item">
+<!--                            <div class="output-item-label">-->
+<!--                              <span class="output-item-title">得分：</span>-->
+<!--                            </div>-->
+                            <div class="output-item-desc">
+                              得分：最终的得分，必须输出，必须输出一个数字，表示满足Prompt中评分标准的程度。得分范围从
+                              <span class="score-range">0.0</span> 到 <span class="score-range">1.0</span>，<span class="score-range">1.0</span>
+                              表示完全满足评分标准，<span class="score-range">0.0</span> 表示完全不满足评分标准。
+                            </div>
+                          </div>
+                          <div class="output-item">
+                            <div class="output-item-label">
+<!--                              <span class="output-item-bullet">•</span>-->
+<!--                              <span class="output-item-title">原因：</span>-->
+                            </div>
+                            <div class="output-item-desc">
+                              原因：对得分的可读解释。最后，必须用一句话结束理由，该句话为：因此，应该给出的分数是你的评分。
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-form>
+            <a-button v-if="showTest" class="mt-10 ml" style="float: right" @click="showTest = false">取消</a-button>
+<!--            <a-button class="mt-10" style="float: right" @click="showTest = true" type="primary">调试</a-button>-->
+          </a-col>
+          <a-col :span="12" class="setting-right" v-if="showTest">
+            <EvaluatorDebug ref="debugRef" :content="formState.dataValue" @run="debugRun"></EvaluatorDebug>
+          </a-col>
+        </a-row>
+      </div>
+    </BasicModal>
+
+    <!-- Ai配置弹窗   -->
+    <AiAppParamsSettingModal @register="registerParamsSettingModal" @ok="handleParamsSettingOk"></AiAppParamsSettingModal>
+    <!-- Ai生成器   -->
+    <AiAppGeneratedPromptModal @register="registerAiAppPromptModal" @ok="handleAiAppPromptOk"></AiAppGeneratedPromptModal>
+    <!-- Ai评估器弹窗   -->
+    <AiragExtDataModal @register="registerEvaluatorModal" @success="handleSuccess"></AiragExtDataModal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import {Form, message} from 'ant-design-vue';
+  import { defHttp } from '@/utils/http/axios';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import AiAppParamsSettingModal from '@/views/super/airag/aiapp/components/AiAppParamsSettingModal.vue';
+  import AiAppGeneratedPromptModal from '@/views/super/airag/aiapp/components/AiAppGeneratedPromptModal.vue';
+  import AiragExtDataModal from './AiragExtDataModal.vue';
+  import EvaluatorDebug from './EvaluatorDebug.vue';
+  import defaultImg from '@/views/super/airag/aiapp/img/ailogo.png';
+  import { getFileAccessHttpUrl, randomString } from '@/utils/common/compUtils';
+  import { cloneDeep } from 'lodash-es';
+  import {debugEvaluator, saveOrUpdate} from '@/views/super/airag/aiprompts/AiragExtData.api';
+
+  //保存或修改
+  const isUpdate = ref<boolean>(false);
+  //uuid
+  const uuid = ref(randomString(16));
+  //showTest 显示调试器
+  const showTest = ref(true);
+  //debugRef 调试器引用
+  const debugRef = ref(null);
+  //form表单数据
+  const formState = reactive<any>({
+    id: '',
+    name: '',
+    dataValue: '',
+    descr: '',
+    modelId: '',
+    metadata: '',
+  });
+  //表单验证
+  const validatorRules = ref<any>({
+    dataValue: [{ required: true, message: '请输入提示词!' }],
+    modelId: [{ required: true, message: '请选择AI模型!' }],
+  });
+  //注册form
+  const useForm = Form.useForm;
+  const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false });
+  const labelCol = ref<any>({ span: 24 });
+  const wrapperCol = ref<any>({ span: 24 });
+  //参数配置
+  const metadata = ref<any>({});
+  // emit
+  const emit = defineEmits(['success', 'register']);
+  //注册modal
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    isUpdate.value = !!data?.isUpdate;
+    clearFormState();
+    resetFields();
+    if (isUpdate.value) {
+      setFormState(data.record);
+    }
+    setModalProps({ bodyStyle: { padding: '10px' } });
+  });
+
+  //注册modal
+  const [registerParamsSettingModal, { openModal: paramsSettingOpen }] = useModal();
+  const [registerAiAppPromptModal, { openModal: aiAppPromptModalOpen }] = useModal();
+  const [registerEvaluatorModal, { openModal: evaluatorModalOpen }] = useModal();
+
+  //编辑
+  function handleEdit() {
+    evaluatorModalOpen(true, { isUpdate: true, showFooter: true, record: {
+        id: formState.id,
+        name: formState.name,
+        descr: formState.descr,
+      } });
+  }
+  /**
+   * 保存
+   */
+  async function handleOk() {
+    try {
+      let values = await validate();
+      metadata.value.modelId = values.modelId;
+      values.metadata = JSON.stringify(cloneDeep(metadata.value));
+      values = Object.assign(formState, values);
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      setModalProps({ confirmLoading: true });
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 取消
+   */
+  function handleCancel() {
+    closeModal();
+  }
+
+  /**
+   * 标签点击事件
+   * @param type
+   */
+  function handleTagClick(type) {
+    let label = type=='input'?'## 输入参数':type=='output'?'## 输出参数':'## 参考参数';
+    if(!formState.dataValue){
+      formState.dataValue = `${label}：{{${type}}}`;
+    }else{
+      formState.dataValue += `\r\n\r\n${label}：{{${type}}}`;
+      // 获取textarea元素并滚动到底部
+      setTimeout(() => {
+        const textarea = document.querySelector('textarea.ant-input') as HTMLTextAreaElement;
+        if (textarea) {
+          textarea.scrollTop = textarea.scrollHeight;
+        }
+      }, 0);
+    }
+  }
+  /**
+   * 关闭弹窗触发列表刷新
+   *
+   * @param value
+   */
+  function visibleChange(value) {
+    if (!value) {
+      emit('success');
+    }
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess(data) {
+    setFormState(data);
+    emit('success');
+  }
+
+  /**
+   * 参数配置点击事件
+   * @param value
+   */
+  function handleParamSettingClick(value) {
+    paramsSettingOpen(true, { type: value, metadata: metadata.value });
+  }
+
+  /**
+   * 参数配置确定回调事件
+   *
+   * @param value
+   */
+  function handleParamsSettingOk(value) {
+    Object.assign(metadata.value, value);
+  }
+
+  /**
+   * 获取图标
+   */
+  function getImage() {
+    return formState.icon ? getFileAccessHttpUrl(formState.icon) : defaultImg;
+  }
+
+  /**
+   * 清除参数
+   */
+  function clearFormState() {
+    formState.id = '';
+    formState.name = '';
+    formState.dataValue = '';
+    formState.descr = '';
+    formState.modelId = '';
+    formState.metadata = '';
+  }
+
+  /**
+   * 设置form属性
+   * @param data
+   */
+  function setFormState(data: any) {
+    //赋值
+    Object.assign(formState, data);
+
+    // 如果已有metadata，查询模型信息并更新到metadata中
+    if (data?.metadata) {
+      metadata.value = data.metadata ? JSON.parse(data.metadata) : {};
+      formState.modelId = data.metadata ? JSON.parse(data.metadata).modelId || '' : '';
+    }
+  }
+
+  //============= begin 提示词 ================================
+  /**
+   * 生成提示词
+   */
+  function generatedPrompt() {
+    aiAppPromptModalOpen(true, {});
+  }
+
+  /**
+   * 提示词回调
+   *
+   * @param value
+   */
+  function handleAiAppPromptOk(value) {
+    formState.dataValue = value;
+  }
+  //============= end 提示词 ================================
+  
+  /**
+   * 调试运行
+   */
+  async function debugRun(variables: any[]) {
+    //提示词
+    let sysMessage = formState.dataValue;
+    let userMessage = "输入的内容：";
+    //替换变量
+    variables.forEach((item) => {
+      userMessage += `${item.name}:${item.value}`;
+    });
+    //定义返回结果
+    sysMessage += '定义返回格式：\n\n 得分：最终的得分，必须输出，必须输出一个数字，表示满足Prompt中评分标准的程度。得分范围从 0.0 到 1.0，1.0 表示完全满足评分标准，0.0 表示完全不满足评分标准。\n' +
+        '原因：（对得分的可读解释）。最后，必须用一句话结束理由，该句话为：因此，应该给出的分数是(你前面得出的评分)。';
+    console.log('userMessage', userMessage);
+    if(!formState.modelId) {
+      message.warning("请选择AI模型");
+      return;
+    }
+    // 调用调试器运行
+    let loading = debugRef.value?.loading;
+    if (loading) return;
+    debugRef.value.loading = true;
+    let params = { prompts: sysMessage,content:userMessage,modelId:formState.modelId,modelParam:JSON.stringify(formState.metadata) }
+    let res = await debugEvaluator(params).catch(() => debugRef.value.loading = false);
+    debugRef.value.loading = false;
+    if(res.success){
+      debugRef.value.result = res.result
+    }else{
+      message.error(res.message);
+    }
+    console.log("debugEvaluator",res)
+  }
+
+
+  /**
+   * 模型ID变化处理
+   * 查询模型信息并更新到metadata中，供chat组件使用
+   */
+  async function handleModelIdChange(modelId: string) {
+    if (!modelId) {
+      // 如果清空模型，清除模型信息
+      if (metadata.value.modelInfo) {
+        delete metadata.value.modelInfo;
+      }
+      return;
+    }
+    try {
+      const res = await defHttp.get(
+        {
+          url: '/airag/airagModel/queryById',
+          params: { id: modelId },
+        },
+        { isTransformResponse: false }
+      );
+      if (res.success && res.result) {
+        const model = res.result;
+        // 将模型信息添加到metadata中
+        if (!metadata.value) {
+          metadata.value = {};
+        }
+        metadata.value['modelInfo'] = {
+          provider: model.provider || '',
+          modelType: model.modelType || '',
+          modelName: model.modelName || '',
+        };
+      }
+    } catch (e) {
+      console.error('获取模型信息失败', e);
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+
+  .orchestration,
+  .view {
+    color: #0a3069;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+    width: 100%;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+
+  .setting-left {
+    padding: 20px;
+    overflow-y: auto;
+    height: (100vh - 15px);
+  }
+
+  .setting-right {
+    overflow-y: auto;
+    height: (100vh - 15px);
+    border-left: 1px solid #dee0e3;
+    padding: 12px;
+  }
+
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-form-item .ant-form-item-label > label) {
+    width: 100%;
+  }
+
+  .knowledge-img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .flow-name {
+    font-size: 14px;
+    font-weight: bold;
+    color: #354052;
+    width: calc(100% - 20px);
+    overflow: hidden;
+    align-content: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: grid;
+  }
+  .knowledge-name {
+    margin-left: 4px;
+  }
+
+  .knowledge-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+
+  .knowledge-icon {
+    display: none !important;
+    position: relative;
+    top: 6px;
+  }
+
+  .knowledge-card:hover {
+    .knowledge-icon {
+      display: block !important;
+    }
+  }
+  .header-img {
+    width: 35px;
+    height: 35px;
+    border-radius: 10px;
+  }
+  .flex {
+    display: flex;
+  }
+  .header-name {
+    color: #354052;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 300px;
+    margin-left: 10px;
+    align-content: center;
+  }
+  .prompt-back {
+    background-color: #eef4ff;
+    border-radius: 12px;
+    padding: 2px;
+    border: 1px solid #77b2f8;
+    box-sizing: border-box;
+    margin-left: 5px;
+    textarea {
+      min-height: 250px;
+      max-height: 400px;
+      border: none !important;
+    }
+  }
+  .prompt-title-padding {
+    margin-left: 14px;
+    height: 50px;
+    align-content: center;
+  }
+  .prologue-chunk {
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 10px 2px 10px;
+    box-sizing: border-box;
+  }
+
+  .prologue-chunk-edit {
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 0 2px 0;
+    box-sizing: border-box;
+  }
+  .mt-10 {
+    margin-top: 10px;
+  }
+  :deep(.ant-form-item-label) {
+    padding: 0 !important;
+  }
+
+  :deep(.ant-form-item-required) {
+    margin-left: 4px !important;
+  }
+  .knowledge-txt {
+    color: #354052;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 12px;
+  }
+  .item-title {
+    color: #111928;
+    font-weight: 400;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 5px;
+  }
+  :deep(.vditor) {
+    border: none;
+  }
+  :deep(.vditor-sv) {
+    font-size: 14px;
+  }
+  :deep(.vditor-sv:focus) {
+    background-color: #ffffff;
+  }
+  .space-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    button {
+      padding: 0 6px;
+      height: 25px;
+      color: #155aef !important;
+      margin-right: 10px;
+      border: none;
+    }
+  }
+  .ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .quick-command {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    justify-content: space-between;
+    background-color: #ffffff;
+    padding: 4px 8px 4px;
+    align-items: center;
+    align-content: center;
+    align-self: center;
+    border-radius: 8px;
+    height: 40px;
+    .quick-command-icon {
+      display: none;
+    }
+  }
+  .quick-command:hover {
+    background-color: #eff0f8;
+    .quick-command-icon {
+      display: flex;
+    }
+  }
+  .data-empty-text {
+    color: #757c8f;
+    margin-left: 10px;
+  }
+  .mcp-warning-tip {
+    display: flex;
+    align-items: center;
+    color: #fa8c16;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+  }
+  .flow-icon {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+  .text-status {
+    font-size: 12px;
+    color: #676f83;
+  }
+  .tag-text {
+    display: flow;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 20px;
+    font-size: 12px;
+    color: #3a3f4f;
+  }
+  .tag-input {
+    align-self: center;
+    color: #737c97;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin-right: 6px;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .tags-meadata {
+    padding-inline: 2px;
+    border-radius: 4px;
+    display: flex;
+    font-weight: 500;
+    max-width: 100%;
+  }
+  .text-desc {
+    width: 100%;
+    font-weight: 400;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+    font-size: 12px;
+    color: #676f83;
+  }
+
+  /* 输出格式卡片样式 */
+  .output-format-card {
+    background: #f8f9ff;
+    border: 1px solid #e1e5ff;
+    border-radius: 8px;
+    padding: 16px;
+    margin-top: 10px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+
+  .output-format-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #e8ecff;
+    padding-bottom: 8px;
+  }
+
+  .output-format-icon {
+    color: #155aef;
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  .output-format-title {
+    font-weight: 600;
+    color: #155aef;
+    font-size: 14px;
+  }
+
+  .output-format-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .output-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .output-item-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .output-item-bullet {
+    color: #155aef;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  .output-item-title {
+    font-weight: 600;
+    color: #354052;
+    font-size: 13px;
+  }
+
+  .output-item-desc {
+    color: #5a6376;
+    font-size: 13px;
+    line-height: 1.5;
+    margin-left: 20px;
+  }
+
+  .score-range {
+    color: #e74c3c;
+    font-weight: 600;
+    background: #fff5f5;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+  }
+  .output-format-card {
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    padding: 16px;
+    margin-top: 16px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+    }
+
+    .output-format-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e8e8e8;
+
+      .output-format-icon {
+        font-size: 16px;
+        color: #1890ff;
+        margin-right: 8px;
+      }
+
+      .output-format-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+      }
+    }
+
+    .output-format-content {
+      .output-item {
+        margin-bottom: 12px;
+        padding: 8px 12px;
+        background: #fff;
+        border-radius: 4px;
+        border-left: 3px solid #1890ff;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .output-item-desc {
+          font-size: 13px;
+          color: #595959;
+          line-height: 1.6;
+
+          .score-range {
+            color: #ff7a45;
+            font-weight: 600;
+            background: rgba(255, 122, 69, 0.1);
+            padding: 2px 6px;
+            border-radius: 4px;
+            margin: 0 2px;
+          }
+        }
+      }
+    }
+  }
+  .variable-container {
+    background: #fafafa;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    padding: 16px;
+    margin-top: 16px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+    }
+
+    .variable-container-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e8e8e8;
+
+      .output-format-icon {
+        font-size: 16px;
+        color: #1890ff;
+        margin-right: 8px;
+      }
+
+      .variable-format-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #262626;
+      }
+    }
+
+    .variable-container-content {
+      .variable-tag-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .variable-tag {
+          cursor: pointer;
+          border-radius: 4px;
+          font-size: 12px;
+          padding: 4px 8px;
+          margin: 0;
+          transition: all 0.3s ease;
+
+          &.required-tag {
+            background-color: #e6f7ff;
+            border: 1px solid #91d5ff;
+            color: #1890ff;
+          }
+
+          &.optional-tag {
+            background-color: #f5f5f5;
+            border: 1px solid #d9d9d9;
+            color: #8c8c8c;
+          }
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+    }
+  }
+</style>
+<style lang="less">
+  .ai-prompt-edit-modal {
+    .ant-modal .ant-modal-header {
+      padding: 13px 32px !important;
+    }
+    .jeecg-basic-modal-close > span {
+      margin-left: 0;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiPromptSettingModal.vue b/src/views/super/airag/aiprompts/components/AiPromptSettingModal.vue
new file mode 100644
index 0000000..94aba87
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiPromptSettingModal.vue
@@ -0,0 +1,955 @@
+<template>
+  <div class="p-2">
+    <BasicModal
+      wrapClassName="ai-prompt-edit-modal"
+      destroyOnClose
+      @register="registerModal"
+      :canFullscreen="false"
+      defaultFullscreen
+      width="800px"
+      :footer="null"
+      @visible-change="visibleChange"
+      @cancel="handleCancel"
+    >
+      <template #title>
+        <div style="display: flex; width: 100%; justify-content: space-between; align-items: center">
+          <div style="display: flex">
+            <img :src="getImage()" class="header-img" />
+            <div class="header-name">{{ formState.name }}</div>
+            <a-tooltip title="编辑">
+              <Icon icon="ant-design:edit-outlined" style="margin-left: 4px; cursor: pointer" color="#354052" size="20" @click="handleEdit"></Icon>
+            </a-tooltip>
+          </div>
+          <div>
+            提示词编排
+            <a-tooltip title="AI应用文档">
+              <a style="color: unset" href="https://help.jeecg.com/aigc/guide/app" target="_blank">
+                <Icon style="position: relative; left: 2px; top: 1px" icon="ant-design:question-circle-outlined"></Icon>
+              </a>
+            </a-tooltip>
+          </div>
+          <div style="display: flex">
+            <a-button @click="handleOk" style="margin-right: 30px" type="primary">保存</a-button>
+          </div>
+        </div>
+      </template>
+      <div style="height: 100%; width: 100%">
+        <a-row :span="24">
+          <a-col :span="10">
+            <div class="orchestration">提示词</div>
+          </a-col>
+          <a-col :span="14">
+            <div class="view">预览</div>
+          </a-col>
+        </a-row>
+        <a-row :span="24">
+          <a-col :span="10" class="setting-left">
+            <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+              <a-row>
+                <a-col :span="24">
+                  <div class="prompt-back">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.content" style="margin-bottom: 0">
+                      <template #label>
+                        <div class="prompt-title-padding item-title space-between">
+                          <span>提示词</span>
+                          <a-button size="middle" ghost>
+                            <span style="align-items: center; display: flex" @click="generatedPrompt">
+                              <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                  d="M18.9839 1.85931C19.1612 1.38023 19.8388 1.38023 20.0161 1.85931L20.5021 3.17278C20.5578 3.3234 20.6766 3.44216 20.8272 3.49789L22.1407 3.98392C22.6198 4.1612 22.6198 4.8388 22.1407 5.01608L20.8272 5.50211C20.6766 5.55784 20.5578 5.6766 20.5021 5.82722L20.0161 7.14069C19.8388 7.61977 19.1612 7.61977 18.9839 7.14069L18.4979 5.82722C18.4422 5.6766 18.3234 5.55784 18.1728 5.50211L16.8593 5.01608C16.3802 4.8388 16.3802 4.1612 16.8593 3.98392L18.1728 3.49789C18.3234 3.44216 18.4422 3.3234 18.4979 3.17278L18.9839 1.85931zM13.5482 4.07793C13.0164 2.64069 10.9836 2.64069 10.4518 4.07793L8.99368 8.01834C8.82648 8.47021 8.47021 8.82648 8.01834 8.99368L4.07793 10.4518C2.64069 10.9836 2.64069 13.0164 4.07793 13.5482L8.01834 15.0063C8.47021 15.1735 8.82648 15.5298 8.99368 15.9817L10.4518 19.9221C10.9836 21.3593 13.0164 21.3593 13.5482 19.9221L15.0063 15.9817C15.1735 15.5298 15.5298 15.1735 15.9817 15.0063L19.9221 13.5482C21.3593 13.0164 21.3593 10.9836 19.9221 10.4518L15.9817 8.99368C15.5298 8.82648 15.1735 8.47021 15.0063 8.01834L13.5482 4.07793zM5.01608 16.8593C4.8388 16.3802 4.1612 16.3802 3.98392 16.8593L3.49789 18.1728C3.44216 18.3234 3.3234 18.4422 3.17278 18.4979L1.85931 18.9839C1.38023 19.1612 1.38023 19.8388 1.85931 20.0161L3.17278 20.5021C3.3234 20.5578 3.44216 20.6766 3.49789 20.8272L3.98392 22.1407C4.1612 22.6198 4.8388 22.6198 5.01608 22.1407L5.50211 20.8272C5.55784 20.6766 5.6766 20.5578 5.82722 20.5021L7.14069 20.0161C7.61977 19.8388 7.61977 19.1612 7.14069 18.9839L5.82722 18.4979C5.6766 18.4422 5.55784 18.3234 5.50211 18.1728L5.01608 16.8593z"
+                                />
+                              </svg>
+                              <span style="margin-left: 4px">生成</span>
+                            </span>
+                          </a-button>
+                        </div>
+                      </template>
+                      <a-textarea :rows="8" v-model:value="formState.content" placeholder="请输入提示词" @change="handleContentChange" />
+                    </a-form-item>
+                  </div>
+                </a-col>
+
+                <a-col :span="24" class="mt-10">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.modelId">
+                      <template #label>
+                        <div style="display: flex; justify-content: space-between; width: 100%; margin-right: 2px">
+                          <div class="item-title">AI模型</div>
+                          <div @click="handleParamSettingClick('model')" class="knowledge-txt">
+                            <Icon icon="ant-design:setting-outlined" size="13" style="margin-right: 2px"></Icon>参数配置
+                          </div>
+                        </div>
+                      </template>
+                      <JDictSelectTag
+                        v-model:value="formState.modelId"
+                        placeholder="请选择AI模型"
+                        dict-code="airag_model where model_type = 'LLM' and activate_flag = 1,name,id"
+                        style="width: 100%"
+                        @change="handleModelIdChange"
+                      ></JDictSelectTag>
+                    </a-form-item>
+                  </div>
+                </a-col>
+                <a-col :span="24" class="mt-10" v-if="metadata.promptVariables && metadata.promptVariables.length > 0">
+                  <div class="prologue-chunk">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                      <template #label>
+                        <div style="display: flex; justify-content: space-between; width: 100%; margin-right: 2px">
+                          <div class="item-title">Prompt 变量</div>
+                        </div>
+                      </template>
+                      <!-- 变量列表容器 -->
+                      <div class="prompt-variable-container">
+                        <!-- 无变量时的空状态 -->
+                        <div v-if="!metadata.promptVariables || metadata.promptVariables.length === 0" class="empty-variables">
+                          <Icon icon="ant-design:inbox-outlined" style="font-size: 32px; color: #d9d9d9" />
+                          <p>暂无变量</p>
+                          <span class="empty-hint">请在提示词中使用 {{ 变量名 }} 格式添加变量</span>
+                        </div>
+
+                        <!-- 变量列表 -->
+                        <div v-else class="prompt-variables-list">
+                          <div
+                            class="prompt-variable-item"
+                            v-for="(item, index) in metadata.promptVariables"
+                            :key="index"
+                            :class="{ 'variable-focused': focusedVariable === index }"
+                          >
+                            <!-- 变量名标签 -->
+                            <div class="variable-tag">
+                              <Icon icon="ant-design:tag-outlined" />
+                              <span class="variable-name">{{ item.name }}</span>
+                            </div>
+
+                            <!-- 变量值输入框 -->
+                            <div class="variable-input-wrapper">
+                              <!-- 附件输入框 -->
+                              <JImageUpload :maxCount="1" v-if="item.type === 'FILE'" v-model:value="item.value"></JImageUpload>
+                              <!-- 文本输入框 -->
+                              <a-input
+                                  v-else
+                                  v-model:value="item.value"
+                                  placeholder="请输入变量值"
+                                  @focus="focusedVariable = index"
+                                  @blur="focusedVariable = null"
+                                  class="variable-input"
+                              >
+                                <template #suffix>
+                                  <Icon v-if="item.value" icon="ant-design:check-circle-outlined" style="color: #52c41a" />
+                                </template>
+                              </a-input>
+                            </div>
+                           
+                            <!-- 类型选择框 -->
+                            <div class="variable-input-wrapper">
+                              <a-select
+                                  v-model:value="item.type"
+                                  placeholder="请选择类型"
+                                  :options="[
+                                    { value: 'TEXT', label: '文本' },
+                                    { value: 'FILE', label: '附件' }
+                                  ]"
+                                  class="variable-input"
+                              >
+                              </a-select>
+                            </div>
+
+                            <!-- 变量操作按钮 -->
+                            <div class="variable-actions">
+                              <a-tooltip title="清空值">
+                                <a-button type="text" size="small" @click="item.value = ''" class="action-btn">
+                                  <Icon icon="ant-design:clear-outlined" />
+                                </a-button>
+                              </a-tooltip>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </a-form-item>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-form>
+          </a-col>
+          <a-col :span="14" class="setting-right">
+            <chat :uuid="uuid" :formState="chatData" url="/airag/app/debug"></chat>
+          </a-col>
+        </a-row>
+      </div>
+    </BasicModal>
+
+    <!-- Ai配置弹窗   -->
+    <AiAppParamsSettingModal @register="registerParamsSettingModal" @ok="handleParamsSettingOk"></AiAppParamsSettingModal>
+    <!-- Ai生成器   -->
+    <AiAppGeneratedPromptModal @register="registerAiAppPromptModal" @ok="handleAiAppPromptOk"></AiAppGeneratedPromptModal>
+    <!-- Ai提示词弹窗   -->
+    <AiragPromptsModal @register="registerPromptModal" @success="handleSuccess"></AiragPromptsModal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, watch } from 'vue';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModal, useModalInner } from '@/components/Modal';
+  import { Form } from 'ant-design-vue';
+  import { defHttp } from '@/utils/http/axios';
+  import JDictSelectTag from '@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import AiAppParamsSettingModal from '@/views/super/airag/aiapp/components/AiAppParamsSettingModal.vue';
+  import AiAppGeneratedPromptModal from '@/views/super/airag/aiapp/components/AiAppGeneratedPromptModal.vue';
+  import AiragPromptsModal from './AiragPromptsModal.vue';
+  import chat from '@/views/super/airag/aiapp/chat/chat.vue';
+  import defaultImg from '@/views/super/airag/aiapp/img/ailogo.png';
+  import { getFileAccessHttpUrl, randomString } from '@/utils/common/compUtils';
+  import { cloneDeep } from 'lodash-es';
+  import { saveOrUpdate } from '@/views/super/airag/aiprompts/AiragPrompts.api';
+  import { JImageUpload } from "@/components/Form";
+
+  //保存或修改
+  const isUpdate = ref<boolean>(false);
+  //uuid
+  const uuid = ref(randomString(16));
+  //form表单数据
+  const formState = reactive<any>({
+    id: '',
+    name: '',
+    promptKey: '',
+    content: '',
+    description: '',
+    modelId: '',
+    modelParam: '',
+  });
+  //表单验证
+  const validatorRules = ref<any>({
+    content: [{ required: true, message: '请输入提示词!' }],
+    modelId: [{ required: true, message: '请选择AI模型!' }],
+  });
+  //注册form
+  const useForm = Form.useForm;
+  const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false });
+  const labelCol = ref<any>({ span: 24 });
+  const wrapperCol = ref<any>({ span: 24 });
+  //参数配置
+  const metadata = ref<any>({});
+  //定义 emit 事件
+  const emit = defineEmits(['success', 'register']);
+  // 添加聚焦变量索引
+  const focusedVariable = ref<number | null>(null);
+  // 提示词
+  const prompt = ref<any>();
+
+  //注册modal
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    isUpdate.value = !!data?.isUpdate;
+    clearFormState();
+    resetFields();
+    if (isUpdate.value) {
+      setFormState(data.record);
+    }
+    setModalProps({ bodyStyle: { padding: '10px' } });
+  });
+
+  //注册modal
+  const [registerParamsSettingModal, { openModal: paramsSettingOpen }] = useModal();
+  const [registerAiAppPromptModal, { openModal: aiAppPromptModalOpen }] = useModal();
+  const [registerPromptModal, { openModal: promptModalOpen }] = useModal();
+
+  const chatData = computed(() => {
+    return {
+      id: formState.id,
+      name: formState.name,
+      prompt: prompt.value,
+      modelId: formState.modelId,
+      metadata: metadata.value?.modelInfo ? JSON.stringify(metadata.value.modelInfo) : '',
+    };
+  });
+
+  watch(
+    () => metadata.value,
+    () => {
+      changePrompt();
+    },
+    {
+      deep: true,
+    }
+  );
+  /**
+   * 改变提示词
+   */
+  function changePrompt() {
+    prompt.value = formState.content;
+    if (metadata.value && metadata.value['promptVariables']) {
+      metadata.value['promptVariables'].forEach((variable) => {
+        if (variable.type === 'FILE') {
+          variable.value = getFileAccessHttpUrl(variable.value);
+        }
+        prompt.value = prompt.value.replace(new RegExp(`{{${variable.name}}}`, 'g'), variable.value);
+      });
+    }
+  }
+
+  /**
+   * 提示词内容改变事件
+   */
+  function handleContentChange() {
+    if (formState.content) {
+      console.log("formState.content",formState.content)
+      let variables = extractVariables(formState.content);
+      console.log("variables",variables)
+      if(variables.length > 0){
+        const promptVariables = metadata.value['promptVariables'];
+        metadata.value['promptVariables'] = variables.map((variable) => ({
+          name: variable,
+          value: promptVariables.find((item) => item.name === variable)?.value || '',
+          type: promptVariables.find((item) => item.name === variable)?.type || 'TEXT'
+        }));
+      }else{
+        metadata.value['promptVariables'] = '';
+      }
+    } else {
+      metadata.value['promptVariables'] = '';
+    }
+  }
+
+  /**
+   * 从提示词中提取变量名
+   * @param str
+   */
+  function extractVariables(str) {
+    // 匹配 {{ 和 }} 之间的内容，非贪婪匹配
+    const regex = /\{\{(.*?)\}\}/g;
+    const matches = new Set(); // 使用 Set 自动去重
+    let match;
+
+    while ((match = regex.exec(str)) !== null) {
+      matches.add(match[1].trim()); // 去除可能的首尾空格并添加到 Set
+    }
+
+    return Array.from(matches);;
+  }
+
+  //编辑
+  function handleEdit() {
+    promptModalOpen(true, {
+      isUpdate: true,
+      showFooter: true,
+      record: {
+        id: formState.id,
+        name: formState.name,
+        promptKey: formState.promptKey,
+        description: formState.description,
+      },
+    });
+  }
+  /**
+   * 保存
+   */
+  async function handleOk() {
+    try {
+      let values = await validate();
+      values.modelParam = JSON.stringify(cloneDeep(metadata.value));
+      values = Object.assign(formState, values);
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      setModalProps({ confirmLoading: true });
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 取消
+   */
+  function handleCancel() {
+    closeModal();
+  }
+
+  /**
+   * 关闭弹窗触发列表刷新
+   *
+   * @param value
+   */
+  function visibleChange(value) {
+    if (!value) {
+      emit('success');
+    }
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess(data) {
+    setFormState(data);
+    emit('success');
+  }
+
+  /**
+   * 参数配置点击事件
+   * @param value
+   */
+  function handleParamSettingClick(value) {
+    paramsSettingOpen(true, { type: value, metadata: metadata.value });
+  }
+
+  /**
+   * 参数配置确定回调事件
+   *
+   * @param value
+   */
+  function handleParamsSettingOk(value) {
+    Object.assign(metadata.value, value);
+  }
+
+  /**
+   * 获取图标
+   */
+  function getImage() {
+    return formState.icon ? getFileAccessHttpUrl(formState.icon) : defaultImg;
+  }
+
+  /**
+   * 清除参数
+   */
+  function clearFormState() {
+    formState.id = '';
+    formState.name = '';
+    formState.content = '';
+    formState.description = '';
+    formState.modelId = '';
+    formState.modelParam = '';
+    metadata.value = {};
+    prompt.value = '';
+  }
+
+  /**
+   * 设置form属性
+   * @param data
+   */
+  function setFormState(data: any) {
+    //赋值
+    Object.assign(formState, data);
+
+    // 如果已有modelId，查询模型信息并更新到metadata中
+    if (data.modelId) {
+      metadata.value = data.modelParam ? JSON.parse(data.modelParam) : {};
+    }
+    console.log('设置form属性formState', formState);
+  }
+
+  //============= begin 提示词 ================================
+  /**
+   * 生成提示词
+   */
+  function generatedPrompt() {
+    aiAppPromptModalOpen(true, {});
+  }
+
+  /**
+   * 提示词回调
+   *
+   * @param value
+   */
+  function handleAiAppPromptOk(value) {
+    console.log('handleAiAppPromptOk value', value);
+    formState.content = value;
+  }
+  //============= end 提示词 ================================
+
+  /**
+   * 模型ID变化处理
+   * 查询模型信息并更新到metadata中，供chat组件使用
+   */
+  async function handleModelIdChange(modelId: string) {
+    if (!modelId) {
+      // 如果清空模型，清除模型信息
+      if (metadata.value.modelInfo) {
+        delete metadata.value.modelInfo;
+      }
+      return;
+    }
+    try {
+      const res = await defHttp.get(
+        {
+          url: '/airag/airagModel/queryById',
+          params: { id: modelId },
+        },
+        { isTransformResponse: false }
+      );
+      if (res.success && res.result) {
+        const model = res.result;
+        // 将模型信息添加到metadata中
+        if (!metadata.value) {
+          metadata.value = {};
+        }
+        metadata.value['modelInfo'] = {
+          provider: model.provider || '',
+          modelType: model.modelType || '',
+          modelName: model.modelName || '',
+        };
+      }
+    } catch (e) {
+      console.error('获取模型信息失败', e);
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .pointer {
+    cursor: pointer;
+  }
+
+  .orchestration,
+  .view {
+    color: #0a3069;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+  .type-title {
+    color: #1d2025;
+    margin-bottom: 4px;
+  }
+
+  .type-desc {
+    color: #8f959e;
+    font-weight: 400;
+  }
+
+  .setting-left {
+    padding: 20px;
+    overflow-y: auto;
+    height: (100vh - 15px);
+  }
+
+  .setting-right {
+    overflow-y: auto;
+    height: (100vh - 15px);
+    border-left: 1px solid #dee0e3;
+  }
+
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-form-item .ant-form-item-label > label) {
+    width: 100%;
+  }
+
+  .knowledge-img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .flow-name {
+    font-size: 14px;
+    font-weight: bold;
+    color: #354052;
+    width: calc(100% - 20px);
+    overflow: hidden;
+    align-content: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: grid;
+  }
+  .knowledge-name {
+    margin-left: 4px;
+  }
+
+  .knowledge-card {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+
+  .knowledge-icon {
+    display: none !important;
+    position: relative;
+    top: 6px;
+  }
+
+  .knowledge-card:hover {
+    .knowledge-icon {
+      display: block !important;
+    }
+  }
+  .header-img {
+    width: 35px;
+    height: 35px;
+    border-radius: 10px;
+  }
+  .flex {
+    display: flex;
+  }
+  .header-name {
+    color: #354052;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 300px;
+    margin-left: 10px;
+    align-content: center;
+  }
+  .prompt-back {
+    background-color: #eef4ff;
+    border-radius: 12px;
+    padding: 2px;
+    border: 1px solid #77b2f8;
+    box-sizing: border-box;
+    margin-left: 5px;
+    textarea {
+      min-height: 250px;
+      max-height: 400px;
+      border: none !important;
+    }
+  }
+  .prompt-title-padding {
+    margin-left: 14px;
+    height: 50px;
+    align-content: center;
+  }
+  .prologue-chunk {
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 10px 2px 10px;
+    box-sizing: border-box;
+  }
+
+  .prologue-chunk-edit {
+    background-color: #f2f4f7;
+    border-radius: 12px;
+    padding: 2px 0 2px 0;
+    box-sizing: border-box;
+  }
+  .mt-10 {
+    margin-top: 10px;
+  }
+  :deep(.ant-form-item-label) {
+    padding: 0 !important;
+  }
+
+  :deep(.ant-form-item-required) {
+    margin-left: 4px !important;
+  }
+  .knowledge-txt {
+    color: #354052;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 12px;
+  }
+  .item-title {
+    color: #111928;
+    font-weight: 400;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 5px;
+  }
+  :deep(.vditor) {
+    border: none;
+  }
+  :deep(.vditor-sv) {
+    font-size: 14px;
+  }
+  :deep(.vditor-sv:focus) {
+    background-color: #ffffff;
+  }
+  .space-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    button {
+      padding: 0 6px;
+      height: 25px;
+      color: #155aef !important;
+      margin-right: 10px;
+      border: none;
+    }
+  }
+  .ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .quick-command {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    justify-content: space-between;
+    background-color: #ffffff;
+    padding: 4px 8px 4px;
+    align-items: center;
+    align-content: center;
+    align-self: center;
+    border-radius: 8px;
+    height: 40px;
+    .quick-command-icon {
+      display: none;
+    }
+  }
+  .quick-command:hover {
+    background-color: #eff0f8;
+    .quick-command-icon {
+      display: flex;
+    }
+  }
+  .data-empty-text {
+    color: #757c8f;
+    margin-left: 10px;
+  }
+  .mcp-warning-tip {
+    display: flex;
+    align-items: center;
+    color: #fa8c16;
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 500;
+  }
+  .flow-icon {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+  :deep(.ant-card .ant-card-body) {
+    padding: 16px;
+  }
+  .text-status {
+    font-size: 12px;
+    color: #676f83;
+  }
+  .tag-text {
+    display: flow;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 20px;
+    font-size: 12px;
+    color: #3a3f4f;
+  }
+  .tag-input {
+    align-self: center;
+    color: #737c97;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin-right: 6px;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .tags-meadata {
+    padding-inline: 2px;
+    border-radius: 4px;
+    display: flex;
+    font-weight: 500;
+    max-width: 100%;
+  }
+  .text-desc {
+    width: 100%;
+    font-weight: 400;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: nowrap;
+    font-size: 12px;
+    color: #676f83;
+  }
+  // 变量信息样式
+  .variable-info {
+    display: flex;
+    align-items: center;
+    color: #676f83;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  // 变量容器样式
+  .prompt-variable-container {
+    margin-top: 12px;
+    min-height: 80px;
+  }
+
+  // 空状态样式
+  .empty-variables {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 30px 20px;
+    background: #fafafa;
+    border-radius: 8px;
+    border: 1px dashed #d9d9d9;
+
+    p {
+      margin: 12px 0 8px;
+      font-size: 16px;
+      color: #676f83;
+    }
+
+    .empty-hint {
+      font-size: 13px;
+      color: #8c8c8c;
+    }
+  }
+
+  // 变量列表样式
+  .prompt-variables-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  // 变量项样式
+  .prompt-variable-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #e8e8e8;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+
+    // 悬停效果
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: #1890ff;
+      transform: translateY(-2px);
+    }
+
+    // 聚焦效果
+    &.variable-focused {
+      border-color: #1890ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+    }
+
+    // 左侧装饰条
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background: #1890ff;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &:hover::before,
+    &.variable-focused::before {
+      opacity: 1;
+    }
+  }
+
+  // 变量标签样式
+  .variable-tag {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 120px;
+    padding: 6px 12px;
+    background: #f0f8ff;
+    border-radius: 6px;
+    border: 1px solid #b7e3ff;
+    margin-right: 16px;
+
+    .variable-name {
+      font-weight: 600;
+      color: #1890ff;
+      font-size: 14px;
+    }
+  }
+
+  // 变量输入框包装器
+  .variable-input-wrapper {
+    flex: 1;
+    margin-right: 12px;
+
+    .variable-input {
+      border-radius: 6px;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: #40a9ff;
+      }
+
+      &:focus,
+      &:focus-within {
+        border-color: #1890ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+      }
+    }
+  }
+
+  // 变量操作按钮
+  .variable-actions {
+    display: flex;
+    gap: 4px;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+
+    .action-btn {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      color: #676f83;
+      transition: all 0.2s;
+
+      &:hover {
+        background: #f0f8ff;
+        color: #1890ff;
+        transform: scale(1.05);
+      }
+    }
+  }
+
+  // 变量项悬停时显示操作按钮
+  .prompt-variable-item:hover .variable-actions {
+    opacity: 1;
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .prompt-variable-item {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 12px;
+
+      .variable-tag {
+        margin-right: 0;
+        margin-bottom: 10px;
+        width: 100%;
+      }
+
+      .variable-input-wrapper {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
+
+      .variable-actions {
+        width: 100%;
+        justify-content: flex-end;
+        opacity: 1;
+      }
+    }
+  }
+</style>
+<style lang="less">
+  .ai-prompt-edit-modal {
+    .ant-modal .ant-modal-header {
+      padding: 13px 32px !important;
+    }
+    .jeecg-basic-modal-close > span {
+      margin-left: 0;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragDataSetColumnModal.vue b/src/views/super/airag/aiprompts/components/AiragDataSetColumnModal.vue
new file mode 100644
index 0000000..9fdc273
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragDataSetColumnModal.vue
@@ -0,0 +1,364 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :canFullscreen="true"
+    destroyOnClose
+    title="列配置"
+    okText="保存"
+    :width="1000"
+    @ok="handleSubmit"
+  >
+    <div class="dynamic-column-config">
+      <a-card size="small">
+        <!-- 列配置列表 -->
+        <div class="column-list">
+          <div v-for="(element, index) in columns" :key="element.id" class="column-item">
+            <!-- 操作区域 - 放在右上角 -->
+            <div class="action-area">
+              <a-button type="text" @click="handleCopyColumn(element)" title="复制">
+                <copy-outlined />
+              </a-button>
+              <a-button type="text" danger @click="handleRemoveColumn(index)" :disabled="columns.length < 2" title="删除">
+                <DeleteOutlined />
+              </a-button>
+            </div>
+
+            <!-- 列配置表单 -->
+            <div class="column-form">
+              <div class="form-row">
+                <div class="form-item">
+                  <label class="form-label">名称</label>
+                  <a-input
+                    v-model:value="element.name"
+                    placeholder="请输入列名称"
+                    :class="{ 'has-error': !element.name }"
+                    @blur="validateColumn(element)"
+                  />
+                </div>
+
+                <div class="form-item">
+                  <label class="form-label">数据类型</label>
+                  <a-select v-model:value="element.dataType" placeholder="请选择数据类型" style="width: 100%">
+                    <a-select-option value="String">字符串</a-select-option>
+                    <a-select-option value="FILE">附件</a-select-option>
+                  </a-select>
+                </div>
+
+                <div class="form-item">
+                  <label class="form-label">必填</label>
+                  <a-radio-group v-model:value="element.required">
+                    <a-radio :value="true">是</a-radio>
+                    <a-radio :value="false">否</a-radio>
+                  </a-radio-group>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <div class="form-item full-width">
+                  <label class="form-label">描述</label>
+                  <a-textarea v-model:value="element.description" placeholder="请输入列描述" :rows="2" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <a-button type="dashed" style="width: 100%" @click="handleAddColumn"> <PlusOutlined />添加列 </a-button>
+        </div>
+        <!-- 底部操作按钮 -->
+        <!--        <div class="footer-actions">-->
+        <!--          <a-button type="primary" @click="handleSubmit" :loading="loading"> 创建 </a-button>-->
+        <!--          <a-button @click="handleReset" style="margin-left: 8px"> 重置 </a-button>-->
+        <!--        </div>-->
+      </a-card>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { message } from 'ant-design-vue';
+  import { PlusOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons-vue';
+  import { saveOrUpdate } from '../AiragExtData.api';
+  import {JImageUpload} from "@/components/Form";
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  // 列配置接口
+  interface ColumnConfig {
+    id: string;
+    name: string;
+    description: string;
+    dataType: string;
+    required: boolean;
+  }
+
+  // 响应式数据
+  const loading = ref(false);
+  const columns = ref<ColumnConfig[]>([
+    {
+      id: generateId(),
+      name: '',
+      description: '',
+      dataType: 'String',
+      required: false,
+    },
+  ]);
+  const defaultColumns = [
+    {
+      id: generateId(),
+      name: 'input',
+      description: '作为输入投递给评测对象',
+      dataType: 'String',
+      required: false,
+    },
+    {
+      id: generateId(),
+      name: 'reference_output',
+      description: '预期理想输出，可作为评估时的参考标准',
+      dataType: 'String',
+      required: false,
+    },
+  ];
+  //数据ID
+  const dataId = ref('');
+  const datasetValue = ref<any>({});
+  // 生成唯一ID
+  function generateId(): string {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  }
+  //表单赋值
+  const [registerModal, { closeModal }] = useModalInner(async (data) => {
+    console.log('data:', data);
+    dataId.value = data.id;
+    if(data.datasetValue){
+      datasetValue.value = data.datasetValue
+      if(data.datasetValue?.columns && data.datasetValue.columns.length){
+        columns.value = data.datasetValue.columns;
+      }else{
+        columns.value = defaultColumns;
+      }
+    }
+  });
+  // 添加列
+  const handleAddColumn = () => {
+    columns.value.push({
+      id: generateId(),
+      name: '',
+      description: '',
+      dataType: 'String',
+      required: false,
+    });
+  };
+
+  // 删除列
+  const handleRemoveColumn = (index: number) => {
+    if (columns.value.length > 1) {
+      columns.value.splice(index, 1);
+    }
+  };
+  // 复制列
+  const handleCopyColumn = (element) => {
+    columns.value.push({
+      ...element,
+      id: generateId(),
+    });
+  };
+
+  // 验证列配置
+  const validateColumn = (column: ColumnConfig) => {
+    return column.name && column.name.trim() !== '';
+  };
+
+  // 提交配置
+  const handleSubmit = async () => {
+    // 验证数据
+    const invalidColumns = columns.value.filter((col) => !validateColumn(col));
+
+    if (invalidColumns.length > 0) {
+      message.error('请填写所有必填项（名称）');
+      return;
+    }
+
+    loading.value = true;
+
+    try {
+      datasetValue.value.columns = columns.value
+      // 构造提交数据
+      const submitData = {
+        datasetValue: JSON.stringify( datasetValue.value),
+        id: dataId.value,
+      };
+
+      console.log('提交数据:', submitData);
+
+      await saveOrUpdate(submitData, true,false);
+
+      message.success('配置创建成功！');
+      // 关闭弹窗并触发成功事件
+      closeModal();
+      emit('success');
+    } catch (error) {
+      console.error('提交失败:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 重置配置
+  const handleReset = () => {
+    columns.value = [...defaultColumns];
+  };
+</script>
+
+<style lang="less" scoped>
+  .dynamic-column-config {
+    max-width: 1200px;
+    margin: 0 auto;
+    max-height: 70vh; /* 设置最大高度为视口高度的70% */
+    overflow-y: auto; /* 超出时显示垂直滚动条 */
+
+    :deep(.ant-card-head) {
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 12px;
+    }
+
+    :deep(.ant-card-extra) {
+      padding: 0;
+    }
+  }
+
+  .column-list {
+    margin-bottom: 24px;
+  }
+
+  .column-item {
+    position: relative; /* 为绝对定位的操作区域提供参考 */
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f6fbff;
+    }
+
+    /* 操作区域样式 */
+    .action-area {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+
+      :deep(.ant-btn) {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        padding: 0;
+
+        .anticon {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .column-form {
+    flex: 1;
+    width: 100%; /* 确保表单占满宽度 */
+  }
+
+  .form-row {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-item {
+    flex: 1;
+
+    &.full-width {
+      flex: 3;
+    }
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+
+    &::after {
+      content: '：';
+    }
+  }
+
+  .error-text {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .has-error {
+    :deep(.ant-input) {
+      border-color: #ff4d4f;
+    }
+  }
+
+  .form-actions {
+    display: none; /* 隐藏原来的删除按钮区域 */
+  }
+
+  .fixed-columns {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px dashed #d9d9d9;
+
+    .tip-text {
+      margin-bottom: 16px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+
+  .fixed-column-item {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    :deep(.ant-input-group-addon) {
+      background: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+
+  .footer-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+    padding-top: 8px;
+    border-top: 1px solid #f0f0f0;
+    position: sticky;
+    bottom: 0;
+    background: #fff;
+    padding-bottom: 8px;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragDataSetDataDrawer.vue b/src/views/super/airag/aiprompts/components/AiragDataSetDataDrawer.vue
new file mode 100644
index 0000000..3abf511
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragDataSetDataDrawer.vue
@@ -0,0 +1,312 @@
+<template>
+  <BasicDrawer v-bind="getProps">
+    <div class="dynamic-column-config">
+      <!-- 列配置列表 -->
+      <div class="column-list">
+        <!-- 移除了 draggable 组件，直接使用 div 渲染列表 -->
+        <div v-for="(element, index) in dataSet" :key="index" class="column-item">
+          <!-- 操作区域 - 放在右上角 -->
+          <div class="action-area">
+            <a-button type="text" danger @click="handleRemoveData(index)" title="删除">
+              <DeleteOutlined />
+            </a-button>
+          </div>
+          <!-- 列配置表单 -->
+          <div class="column-form">
+            <div class="form-row">
+              <div class="form-item" v-for="item in columns" :key="item.name">
+                <label class="form-label">{{ item.name }}</label>
+                <!-- 附件输入框 -->
+                <JImageUpload :maxCount="1" v-if="item.dataType === 'FILE'" v-model:value="element[item.name]"></JImageUpload>
+                <a-input
+                    v-else
+                    v-model:value="element[item.name]"
+                    :placeholder="'请输入' + item.name"
+                    :class="{ 'has-error': !element[item.name] }"
+                    @blur="validateColumn(element[item.name])"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a-button v-if="!isUpdate" type="dashed" style="width: 100%" @click="handleAddData"> <PlusOutlined />添加数据 </a-button>
+    </div>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import type { DrawerProps } from '/@/components/Drawer';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { computed, unref, ref } from 'vue';
+  import { useAttrs } from '@/hooks/core/useAttrs';
+  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrUpdate } from '@/views/super/airag/aiprompts/AiragExtData.api';
+  import { message } from 'ant-design-vue';
+  import {JImageUpload} from "@/components/Form";
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const attrs = useAttrs();
+  // 消息提示
+  const { createMessage } = useMessage();
+  // 注册抽屉
+  const [registerDrawer, { closeDrawer }] = useDrawerInner(open);
+  // 抽屉最终props
+  const getProps = computed(() => {
+    let drawerProps: Partial<DrawerProps> = {
+      width: 1000,
+      title: '数据配置',
+      showFooter: true,
+      destroyOnClose: true,
+    };
+    let finalProps: Recordable = {
+      ...unref(attrs),
+      ...drawerProps,
+      okText: '保存',
+      onOk: handleSubmit,
+      onCancel: closeDrawer,
+      onRegister: registerDrawer,
+    };
+    return finalProps;
+  });
+  /** 更新状态 */
+  const isUpdate = ref<boolean>(false);
+  /** dataId */
+  const dataId = ref<any>('');
+  /** 数据列表 */
+  const allData = ref<any>([]);
+  /** 数据列表 */
+  const dataSet = ref<any>([]);
+  // 列配置
+  const columns = ref<any>([]);
+  // 验证数据非空
+  const validateColumn = (value) => {
+    return value && value.trim() !== '';
+  };
+  // 生成唯一ID
+  function generateId(): string {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  }
+  //添加数据
+  function handleAddData() {
+    dataSet.value.push({
+      id: generateId(),
+    });
+  }
+  //保存数据
+  async function handleSubmit() {
+    // 验证数据
+    const invalidData = dataSet.value.filter((item) => {
+      return columns.value.some((col) => col.required && !validateColumn(item[col.name]));
+    });
+    if (invalidData.length > 0) {
+      createMessage.error('请填写所有必填项（名称）');
+      return;
+    }
+
+    try {
+      // 构造提交数据
+      let dataSource:any = [];
+      if (isUpdate.value) {
+        dataSource = allData.value.map(item =>
+            item.id === dataSet.value[0].id ? dataSet.value[0] : item
+        );
+      } else {
+        dataSource = allData.value.concat(dataSet.value);
+      }
+      const submitData = {
+        datasetValue: JSON.stringify({
+          columns: columns.value,
+          dataSource: dataSource,
+        }),
+        id: dataId.value,
+      };
+
+      console.log('提交数据:', submitData);
+
+      await saveOrUpdate(submitData, true, false);
+
+      message.success('数据保存成功！');
+      // 关闭弹窗并触发成功事件
+      closeDrawer();
+      emit('success');
+    } catch (error) {
+      console.error('提交失败:', error);
+    } finally {
+      //loading.value = false;
+    }
+  }
+  // 删除列
+  const handleRemoveData = (index: number) => {
+    dataSet.value.splice(index, 1);
+  };
+  /** 抽屉开启 */
+  function open(data) {
+    isUpdate.value = data.isUpdate;
+    dataId.value = data?.id || '';
+    allData.value = data?.dataSource || [];
+    columns.value = data?.columns || [];
+    console.log("columns.value",columns.value)
+    if (isUpdate.value) {
+      console.log("data?.record",data?.record)
+      dataSet.value = data?.record?[data?.record] : [];
+    } else {
+      dataSet.value = [];
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .dynamic-column-config {
+    max-width: 1200px;
+    margin: 0 auto;
+    max-height: calc(100vh - 100px); /* 设置最大高度为视口高度的70% */
+    overflow-y: auto; /* 超出时显示垂直滚动条 */
+
+    :deep(.ant-card-head) {
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 12px;
+    }
+
+    :deep(.ant-card-extra) {
+      padding: 0;
+    }
+  }
+
+  .column-list {
+    margin-bottom: 24px;
+  }
+
+  .column-item {
+    position: relative; /* 为绝对定位的操作区域提供参考 */
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f6fbff;
+    }
+
+    /* 操作区域样式 */
+    .action-area {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+
+      :deep(.ant-btn) {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        padding: 0;
+
+        .anticon {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .column-form {
+    flex: 1;
+    width: 100%; /* 确保表单占满宽度 */
+  }
+
+  .form-row {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-item {
+    flex: 1;
+
+    &.full-width {
+      flex: 3;
+    }
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+
+    &::after {
+      content: '：';
+    }
+  }
+
+  .error-text {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .has-error {
+    :deep(.ant-input) {
+      border-color: #ff4d4f;
+    }
+  }
+
+  .form-actions {
+    display: none; /* 隐藏原来的删除按钮区域 */
+  }
+
+  .fixed-columns {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px dashed #d9d9d9;
+
+    .tip-text {
+      margin-bottom: 16px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+
+  .fixed-column-item {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    :deep(.ant-input-group-addon) {
+      background: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+
+  .footer-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+    padding-top: 8px;
+    border-top: 1px solid #f0f0f0;
+    position: sticky;
+    bottom: 0;
+    background: #fff;
+    padding-bottom: 8px;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragDataSetModal.vue b/src/views/super/airag/aiprompts/components/AiragDataSetModal.vue
new file mode 100644
index 0000000..1242ee0
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragDataSetModal.vue
@@ -0,0 +1,270 @@
+<template>
+  <BasicModal v-bind="$attrs" :zIndex="999" @register="registerModal" :canFullscreen="true" :footer="null" defaultFullscreen destroyOnClose title="评测集">
+    <div class="modal-content">
+      <div class="top-section">
+        <div class="header-actions">
+          <a-button type="primary" v-if="columns && columns.length > 0" @click="handleAddData">
+            <Icon icon="ant-design:plus-outlined" />
+            新增数据
+          </a-button>
+          <a-button @click="columnConfig" class="config-btn">
+            <Icon icon="ant-design:setting-outlined" />
+            列配置
+          </a-button>
+        </div>
+      </div>
+      <div class="table-container">
+        <a-table
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="pagination"
+            rowKey="id"
+            class="data-table"
+            :scroll="{ x: 'max-content' }"
+        >
+          <template #action="{ record }">
+            <div class="action-buttons">
+              <a-button size="small" @click="handleEditDataset(record)" class="action-btn edit-btn">
+                <Icon icon="ant-design:edit-outlined" />
+              </a-button>
+              <a-button size="small" @click="handleDelete(record)" class="action-btn delete-btn">
+                <Icon icon="ant-design:delete-outlined" />
+              </a-button>
+            </div>
+          </template>
+        </a-table>
+      </div>
+    </div>
+  </BasicModal>
+  <!--自定义列配置  -->
+  <AiragDataSetColumnModal @register="registerDataSetColumnModal" @success="reload" />
+  <!--自定义数据配置  -->
+  <AiragDataSetDataDrawer @register="registerDataSetDataDrawer" @success="reload" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+import AiragDataSetColumnModal from './AiragDataSetColumnModal.vue';
+import AiragDataSetDataDrawer from './AiragDataSetDataDrawer.vue';
+import {queryById, saveOrUpdate} from '../AiragExtData.api';
+import { useDrawer } from '@/components/Drawer';
+import { cloneDeep } from 'lodash-es';
+import {useMessage} from "@/hooks/web/useMessage";
+// Emits声明
+const emit = defineEmits(['register', 'success']);
+const { createMessage } = useMessage();
+const dataId = ref<string>('');
+const columns = ref<any>([]);
+const dataSource = ref<any>([]);
+const datasetValue = ref<any>({});
+const pagination = ref({
+  total: 0,
+  current: 1,
+  pageSize: 10,
+});
+//表单赋值
+const [registerModal] = useModalInner(async (data) => {
+  dataId.value = data.record?.id;
+  initData(data.record)
+});
+//注册列配置
+const [registerDataSetColumnModal, { openModal: openColumnModal }] = useModal();
+//注册数据抽屉
+const [registerDataSetDataDrawer, { openDrawer }] = useDrawer();
+
+/**
+ * 刷新数据
+ */
+function reload() {
+  queryById({ id: dataId.value }).then((res) => {
+    if (res.success && res.result) {
+      initData(res.result)
+    }
+  });
+  emit('success');
+}
+/**
+ * 初始化数据
+ */
+function initData(result) {
+  dataSource.value = []
+  columns.value = []
+  datasetValue.value = result?.datasetValue ? JSON.parse(result?.datasetValue) : {};
+  if (datasetValue.value?.columns) {
+    datasetValue.value?.columns.forEach((item) => {
+      columns.value.push({
+        title: item.name,
+        dataIndex: item.name,
+        key: item.name,
+        fixed: 'center',
+      });
+    });
+  }
+  dataSource.value = datasetValue.value?.dataSource || [];
+  //是否已经包含操作列
+  const hasAction = columns.value.some(item=>item.key == 'action');
+  if(!hasAction){
+    columns.value.push({
+      title: "操作",
+      dataIndex: 'action',
+      key: 'action',
+      fixed: 'right',
+      width: 120,
+      slots: { customRender: 'action' },
+    });
+  }
+}
+/**
+ * 打开列配置
+ */
+function columnConfig() {
+  openColumnModal(true, {
+    id: dataId.value,
+    datasetValue: cloneDeep(datasetValue.value),
+  });
+}
+
+/**
+ * 新增数据点击事件
+ */
+function handleAddData() {
+  if(!datasetValue.value?.columns || datasetValue.value?.columns.length == 0){
+    createMessage.warning('请先配置列信息');
+    return;
+  }
+  openDrawer(true, {
+    id: dataId.value,
+    dataSource:cloneDeep(datasetValue.value.dataSource),
+    columns:cloneDeep(datasetValue.value.columns),
+    isUpdate:false
+  });
+}
+
+/**
+ * 编辑数据点击事件
+ * @param record
+ */
+function handleEditDataset(record) {
+  openDrawer(true, {
+    id: dataId.value,
+    dataSource: cloneDeep(dataSource.value),
+    columns: cloneDeep(datasetValue.value?.columns),
+    record: cloneDeep(record),
+    isUpdate:true
+  });
+}
+
+/**
+ * 删除数据点击事件
+ */
+function handleDelete(record) {
+  //删除数据
+  dataSource.value = dataSource.value.filter((item) => item.id !== record.id);
+  refreshDataset()
+}
+
+/**
+ *  表单提交事件
+ */
+async function refreshDataset() {
+  //提交表单
+  const submitData = {
+    datasetValue: JSON.stringify({
+      columns: datasetValue.value.columns,
+      dataSource: dataSource.value,
+    }),
+    id: dataId.value,
+  };
+
+  console.log('提交数据:', submitData);
+  await saveOrUpdate(submitData, true, false);
+  reload()
+}
+</script>
+
+<style lang="less" scoped>
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.top-section {
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.config-btn {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+
+.table-container {
+  flex: 1;
+  overflow: auto;
+}
+
+.data-table {
+  :deep(.ant-table-thead > tr > th) {
+    background-color: #fafafa;
+    font-weight: 600;
+  }
+
+  :deep(.ant-table-tbody > tr:hover) {
+    background-color: #f5f5f5;
+  }
+
+  :deep(.ant-table-pagination) {
+    margin: 16px 0;
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+}
+
+.edit-btn {
+  color: #1890ff;
+  border-color: #1890ff;
+
+  &:hover {
+    color: #40a9ff;
+    border-color: #40a9ff;
+  }
+}
+
+.delete-btn {
+  color: #ff4d4f;
+  border-color: #ff4d4f;
+
+  &:hover {
+    color: #ff7875;
+    border-color: #ff7875;
+  }
+}
+
+/** 时间和数字输入框样式 */
+:deep(.ant-input-number) {
+  width: 100%;
+}
+
+:deep(.ant-calendar-picker) {
+  width: 100%;
+}
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragExtDataModal.vue b/src/views/super/airag/aiprompts/components/AiragExtDataModal.vue
new file mode 100644
index 0000000..9468530
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragExtDataModal.vue
@@ -0,0 +1,75 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :maxHeight="500" :width="800" @ok="handleSubmit">
+    <BasicForm @register="registerForm" name="AiragExtDataForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../AiragExtData.data';
+  import { saveOrUpdate } from '../AiragExtData.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getDateByPicker } from '/@/utils';
+  const { createMessage } = useMessage();
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const isDetail = ref(false);
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, scrollToField }] = useForm({
+    labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+    baseRowStyle: { padding: '0 20px' },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.showFooter;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } catch (e) {
+      console.log("e", e)
+      return Promise.reject(e);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /** 时间和数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragInvokeRecordsDrawer.vue b/src/views/super/airag/aiprompts/components/AiragInvokeRecordsDrawer.vue
new file mode 100644
index 0000000..f45ebfc
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragInvokeRecordsDrawer.vue
@@ -0,0 +1,275 @@
+<template>
+  <BasicDrawer v-bind="getProps">
+    <BasicTable @register="registerTable">
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" /> </template
+    ></BasicTable>
+  </BasicDrawer>
+  <AiragTrackDetailModal @register="registerTrackDetailModal" />
+</template>
+
+<script lang="ts" setup>
+  import type { DrawerProps } from '/@/components/Drawer';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { computed, unref, ref } from 'vue';
+  import { useAttrs } from '@/hooks/core/useAttrs';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import { getTrackList, deleteOne } from '@/views/super/airag/aiprompts/AiragExtData.api';
+  import {useListPage} from "@/hooks/system/useListPage";
+  import AiragTrackDetailModal from './AiragTrackDetailModal.vue';
+  // Emits声明
+  const attrs = useAttrs();
+  const [registerTrackDetailModal, { openModal }] = useModal();
+  //列配置
+  const trackColumns = ref([
+    { title: '问题', dataIndex: 'userQuery', key: 'userQuery' },
+    { title: '提示词答案', dataIndex: 'promptAnswer', key: 'promptAnswer' },
+    { title: '评估分数', dataIndex: 'answerScore', key: 'answerScore' },
+    { title: '版本号', dataIndex: 'version', key: 'version' },
+  ]);
+  // 注册抽屉
+  const [registerDrawer, { closeDrawer }] = useDrawerInner(open);
+  // 表格定义
+  const { tableContext } = useListPage({
+    designScope: 'agent-config',
+    tableProps: {
+      title: '调用记录',
+      api: getTrackList,
+      columns: trackColumns.value,
+      canResize: false,
+      rowSelection: {
+        columnWidth: 20,
+      },
+      immediate: false,
+      beforeFetch: async (params) => {
+        return Object.assign(params, { metadata: dataId.value });
+      },
+      afterFetch: async (res) => {
+        if (res.length > 0) {
+          res.forEach((item) => {
+            if (item.dataValue) {
+              let dataValue = JSON.parse(item.dataValue);
+              item.answerScore = dataValue.answerScore;
+              item.userQuery = dataValue.userQuery;
+              item.promptAnswer = dataValue.promptAnswer;
+            }
+          });
+        }
+        return res;
+      },
+    },
+  });
+  const [registerTable, { reload }] = tableContext;
+  // 抽屉最终props
+  const getProps = computed(() => {
+    let drawerProps: Partial<DrawerProps> = {
+      width: 1000,
+      title: '调用记录',
+      destroyOnClose: true,
+    };
+    let finalProps: Recordable = {
+      ...unref(attrs),
+      ...drawerProps,
+      onCancel: closeDrawer,
+      onRegister: registerDrawer,
+    };
+    return finalProps;
+  });
+  /** dataId */
+  const dataId = ref<any>('');
+  /** 抽屉开启 */
+  function open(data) {
+    dataId.value = data.record?.id || '';
+    reload();
+  }
+  /**
+   * 删除
+   */
+  function handleDelete(record) {
+    console.log(record, 'record');
+    deleteOne({ id: record.id},reload)
+  }
+
+  /**
+   * 详情
+   * @param record
+   */
+  function handleDetail(record) {
+    openModal(true, { dataValue: record.dataValue });
+  }
+  /*
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped lang="less">
+  .dynamic-column-config {
+    max-width: 1200px;
+    margin: 0 auto;
+    max-height: calc(100vh - 100px); /* 设置最大高度为视口高度的70% */
+    overflow-y: auto; /* 超出时显示垂直滚动条 */
+
+    :deep(.ant-card-head) {
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 12px;
+    }
+
+    :deep(.ant-card-extra) {
+      padding: 0;
+    }
+  }
+
+  .column-list {
+    margin-bottom: 24px;
+  }
+
+  .column-item {
+    position: relative; /* 为绝对定位的操作区域提供参考 */
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #1890ff;
+      background: #f6fbff;
+    }
+
+    /* 操作区域样式 */
+    .action-area {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+
+      :deep(.ant-btn) {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        padding: 0;
+
+        .anticon {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .column-form {
+    flex: 1;
+    width: 100%; /* 确保表单占满宽度 */
+  }
+
+  .form-row {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-item {
+    flex: 1;
+
+    &.full-width {
+      flex: 3;
+    }
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+
+    &::after {
+      content: '：';
+    }
+  }
+
+  .error-text {
+    color: #ff4d4f;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .has-error {
+    :deep(.ant-input) {
+      border-color: #ff4d4f;
+    }
+  }
+
+  .form-actions {
+    display: none; /* 隐藏原来的删除按钮区域 */
+  }
+
+  .fixed-columns {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px dashed #d9d9d9;
+
+    .tip-text {
+      margin-bottom: 16px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+
+  .fixed-column-item {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    :deep(.ant-input-group-addon) {
+      background: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+
+  .footer-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+    padding-top: 8px;
+    border-top: 1px solid #f0f0f0;
+    position: sticky;
+    bottom: 0;
+    background: #fff;
+    padding-bottom: 8px;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragPromptsModal.vue b/src/views/super/airag/aiprompts/components/AiragPromptsModal.vue
new file mode 100644
index 0000000..1e08d7c
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragPromptsModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :maxHeight="500" :width="800" @ok="handleSubmit">
+    <BasicForm @register="registerForm" name="AiragPromptsForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../AiragPrompts.data';
+  import { saveOrUpdate } from '../AiragPrompts.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getDateByPicker } from '/@/utils';
+  const { createMessage } = useMessage();
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const isDetail = ref(false);
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, scrollToField }] = useForm({
+    labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+    baseRowStyle: { padding: '0 20px' },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.showFooter;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+  });
+  //日期个性化选择
+  const fieldPickers = reactive({});
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      // 预处理日期数据
+      changeDateValue(values);
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success',values);
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 处理日期值
+   * @param formData 表单数据
+   */
+  const changeDateValue = (formData) => {
+    if (formData && fieldPickers) {
+      for (let key in fieldPickers) {
+        if (formData[key]) {
+          formData[key] = getDateByPicker(formData[key], fieldPickers[key]);
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 时间和数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/airag/aiprompts/components/AiragTrackDetailModal.vue b/src/views/super/airag/aiprompts/components/AiragTrackDetailModal.vue
new file mode 100644
index 0000000..aebfacb
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/AiragTrackDetailModal.vue
@@ -0,0 +1,276 @@
+<template>
+  <BasicModal
+      v-bind="$attrs"
+      @register="registerModal"
+      :canFullscreen="true"
+      :footer="null"
+      destroyOnClose
+      title="详情"
+      wrapClassName="track-detail-modal"
+  >
+    <div class="track-detail-container">
+      <!-- 顶部工具栏 -->
+      <div class="toolbar">
+        <a-button
+            type="primary"
+            size="small"
+            @click="toggleFormat"
+            class="format-btn"
+        >
+          <Icon :icon="isFormatted ? 'ant-design:compress-outlined' : 'ant-design:expand-outlined'" />
+          {{ isFormatted ? '收起' : '展开' }}
+        </a-button>
+      </div>
+
+      <!-- JSON内容显示区域 -->
+      <div class="json-content-wrapper">
+        <div v-if="!trackContent" class="empty-state">
+          <Icon icon="ant-design:inbox-outlined" style="font-size: 48px; color: #d9d9d9;" />
+          <p>暂无轨迹数据</p>
+        </div>
+
+        <div v-else class="json-display">
+          <pre v-if="isFormatted" >{{ formattedJson }}</pre>
+          <pre v-else class="raw-json">{{ trackContent }}</pre>
+        </div>
+      </div>
+
+      <!-- 底部信息栏 -->
+      <div v-if="trackContent" class="info-bar">
+        <span class="info-item">
+          <Icon icon="ant-design:info-circle-outlined" />
+          {{ isFormatted ? '已格式化' : '原始数据' }}
+        </span>
+<!--        <span class="info-item">-->
+<!--          <Icon icon="ant-design:file-text-outlined" />-->
+<!--          字符数: {{ trackContent.length }}-->
+<!--        </span>-->
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import Icon from '/@/components/Icon/src/Icon.vue';
+
+// 轨迹详情
+const trackContent = ref('');
+const isFormatted = ref(true);
+
+// 计算属性：格式化JSON
+const formattedJson = computed(() => {
+  try {
+    // 尝试解析为JSON并格式化
+    const jsonData = JSON.parse(trackContent.value);
+    return JSON.stringify(jsonData, null, 2);
+  } catch (e) {
+    // 如果不是有效的JSON，返回原始内容
+    return trackContent.value;
+  }
+});
+
+// 切换格式化状态
+const toggleFormat = () => {
+  isFormatted.value = !isFormatted.value;
+};
+
+// 复制JSON内容
+const copyJson = async () => {
+  try {
+    const content = isFormatted.value ? formattedJson.value : trackContent.value;
+    await navigator.clipboard.writeText(content);
+    // 这里可以添加一个轻提示
+    console.log('JSON内容已复制到剪贴板');
+  } catch (err) {
+    console.error('复制失败:', err);
+  }
+};
+
+// 表单赋值
+const [registerModal] = useModalInner(async (data) => {
+  trackContent.value = data?.dataValue || '';
+  // 默认显示格式化内容
+  isFormatted.value = true;
+});
+</script>
+
+<style lang="less" scoped>
+@primary-color: #1890ff;
+@border-color: #e8e8e8;
+@background-color: #f5f7fa;
+@text-color: #262626;
+@text-secondary: #8c8c8c;
+
+.track-detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 400px;
+}
+
+// 顶部工具栏
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: @background-color;
+  border-radius: 8px;
+  border: 1px solid @border-color;
+
+  .format-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
+    }
+  }
+}
+
+// JSON内容显示区域
+.json-content-wrapper {
+  flex: 1;
+  overflow: auto;
+  background: white;
+  border: 1px solid @border-color;
+  border-radius: 8px;
+  padding: 16px;
+  position: relative;
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: @text-secondary;
+
+    p {
+      margin-top: 16px;
+      font-size: 16px;
+    }
+  }
+
+  .json-display {
+    pre {
+      margin: 0;
+      padding: 0;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 14px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 500px;
+      overflow: auto;
+    }
+
+    .formatted-json {
+      color: @text-color;
+
+      // JSON语法高亮样式
+      &::before {
+        content: '{';
+        color: #d73a49;
+      }
+
+      &::after {
+        content: '}';
+        color: #d73a49;
+      }
+    }
+
+    .raw-json {
+      color: @text-secondary;
+      background: #fafafa;
+      padding: 12px;
+      border-radius: 4px;
+      border-left: 4px solid @primary-color;
+    }
+  }
+}
+
+// 底部信息栏
+.info-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  padding: 12px 16px;
+  background: @background-color;
+  border-radius: 8px;
+  border: 1px solid @border-color;
+  font-size: 14px;
+  color: @text-secondary;
+
+  .info-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    svg {
+      font-size: 16px;
+    }
+  }
+}
+
+// 滚动条样式
+.json-content-wrapper::-webkit-scrollbar,
+.json-display pre::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.json-content-wrapper::-webkit-scrollbar-track,
+.json-display pre::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.json-content-wrapper::-webkit-scrollbar-thumb,
+.json-display pre::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+
+  &:hover {
+    background: #a8a8a8;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .toolbar {
+    padding: 10px 12px;
+  }
+
+  .json-content-wrapper {
+    padding: 12px;
+
+    .json-display pre {
+      font-size: 12px;
+    }
+  }
+
+  .info-bar {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+}
+</style>
+
+<style lang="less">
+// 模态框样式调整
+.track-detail-modal {
+  .ant-modal-body {
+    padding: 24px;
+    min-height: 500px;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aiprompts/components/EvaluatorDebug.vue b/src/views/super/airag/aiprompts/components/EvaluatorDebug.vue
new file mode 100644
index 0000000..1db980c
--- /dev/null
+++ b/src/views/super/airag/aiprompts/components/EvaluatorDebug.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="ai-assessment-container">
+    <!-- 标题和操作栏 -->
+    <div class="assessment-header">
+      <div class="header-left">
+        <h5 class="title">AI内容评估</h5>
+      </div>
+      <div class="header-right" v-if="variable && variable.length > 0">
+        <a-button type="primary" ghost class="clear-btn" @click="handleClear">
+          <template #icon><DeleteOutlined /></template>
+          清空
+        </a-button>
+        <a-button type="primary" :loading="loading" class="run-btn" @click="handleRun">
+          <template #icon><PlayCircleOutlined /></template>
+          运行
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 评估内容区域 -->
+    <div class="assessment-content" v-if="variable && variable.length > 0">
+      <div class="input-section" v-for="item in variable" :key="item.name">
+        <div class="section-header output-header">
+          <span class="section-title">{{item.name}}</span>
+        </div>
+        <div class="section-content output-content">
+          <a-input v-model:value="item.value" placeholder="请输入" />
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-container">
+      <Empty
+          :image="Empty.PRESENTED_IMAGE_SIMPLE"
+          description="暂无变量"
+          class="custom-empty"
+      />
+    </div>
+    <!-- 结果内容区域 -->
+    <div class="debug-result-container" v-if="result">
+      <!-- 调试成功提示 -->
+      <div class="debug-success">
+        <div class="success-header">
+          <div class="success-icon">✓</div>
+          <span class="success-text">调试成功</span>
+        </div>
+
+        <!-- 分数显示 -->
+<!--        <div class="score-section">-->
+<!--          <span class="score-label">0 分</span>-->
+<!--          <div class="score-note">-->
+<!--            <span class="note-text">得分仅预览效果，非实际结果。</span>-->
+<!--          </div>-->
+<!--        </div>-->
+
+        <!-- 原因分析 -->
+        <div class="reason-section">
+<!--          <div class="reason-label">原因:</div>-->
+          <div class="reason-content">
+            <span>{{result}}</span>
+          </div>
+        </div>
+
+        <!-- 免责声明 -->
+        <div class="disclaimer">
+          <span class="disclaimer-text">内容由AI生成，无法确保真实准确，仅供参考。</span>
+        </div>
+      </div>
+
+      <!-- 调试失败示例（可选显示） -->
+      <div v-if="showFailureExample" class="debug-failure">
+        <div class="failure-header">
+          <div class="failure-icon">✗</div>
+          <span class="failure-text">调试失败</span>
+        </div>
+
+        <div class="error-message">
+          <span>代码中存在语法错误，请检查后重新调试。</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 底部说明 -->
+<!--    <div class="assessment-footer">-->
+<!--      <div class="footer-content">-->
+<!--        <InfoCircleOutlined class="footer-icon" />-->
+<!--        <span>内容由AI生成，无法确保真实准确，仅供参考。</span>-->
+<!--      </div>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted,watch } from 'vue'
+import { Empty } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  PlayCircleOutlined,
+} from '@ant-design/icons-vue'
+
+// 组件属性
+const props = defineProps({
+  // 原始内容
+  content: {
+    type: String,
+    default: ``
+  },
+})
+// 控制是否显示失败示例
+const showFailureExample = ref(false)
+// 运行状态
+const loading = ref(false)
+// 响应式数据
+const variable = ref([])
+// 结果
+const result = ref("")
+// 从内容中提取参数
+const extractContent = () => {
+  if(props.content){
+    const vars = props.content.match(/{{\s*([^}\s]+)\s*}}/g);
+    if(vars && vars.length > 0){
+      variable.value = vars.map((match) => ({value:"",name:match.replace(/{{\s*|\s*}}/g, '')}))
+    }
+  }else{
+    variable.value = []
+  }
+}
+
+// 清空操作
+const handleClear = () => {
+  variable.value.forEach((item) => item.value = '')
+}
+
+// 运行操作
+const handleRun = () => {
+  // 触发运行事件
+  emit('run', variable.value)
+}
+
+// 定义事件
+const emit = defineEmits(['clear', 'run'])
+
+// 生命周期
+onMounted(() => {
+  extractContent()
+})
+
+// 监听内容变化
+watch(() => props.content, extractContent)
+
+defineExpose({
+  loading,
+  result
+})
+</script>
+
+<style scoped>
+.ai-assessment-container {
+  width: 100%;
+  background: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  overflow: hidden;
+}
+
+/* 头部样式 */
+.assessment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  border-radius: 8px 8px 0 0;
+}
+
+.header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.header-right {
+  display: flex;
+  gap: 12px;
+}
+
+.clear-btn {
+  color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+.clear-btn:hover {
+  color: #ff7875;
+  border-color: #ff7875;
+}
+
+.run-btn {
+  background: #1890ff;
+  border-color: #1890ff;
+}
+
+.run-btn:hover {
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+
+/* 内容区域样式 */
+.assessment-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* 通用区块样式 */
+.input-section,
+.output-section {
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 输出区域 */
+.output-header {
+  background: #e6f7ff;
+  border-bottom: 1px solid #91d5ff;
+}
+
+.output-icon {
+  color: #1890ff;
+}
+
+.output-content {
+  padding: 16px;
+  background: #e6f7ff;
+  color: #096dd9;
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 80px;
+}
+
+
+/* 底部样式 */
+.assessment-footer {
+  padding: 12px 20px;
+  background: #fff;
+  border-top: 1px solid #e8e8e8;
+  border-radius: 0 0 8px 8px;
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.footer-icon {
+  font-size: 12px;
+}
+.debug-result-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  max-width: 600px;
+  margin: 20px auto;
+}
+
+/* 成功样式 */
+.debug-success {
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  padding: 16px;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.success-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.success-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #2ea44f;
+  color: white;
+  font-weight: bold;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.success-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #24292e;
+}
+
+/* 分数部分 */
+.score-section {
+  margin-bottom: 16px;
+}
+
+.score-label {
+  display: inline-block;
+  font-size: 14px;
+  color: #24292e;
+  margin-bottom: 4px;
+}
+
+.score-note {
+  font-size: 12px;
+  color: #57606a;
+}
+
+.note-text {
+  display: inline-block;
+  padding: 4px 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+
+/* 原因部分 */
+.reason-section {
+  margin-bottom: 16px;
+}
+
+.reason-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292e;
+  margin-bottom: 4px;
+}
+
+.reason-content {
+  font-size: 14px;
+  color: #24292e;
+  padding: 8px 12px;
+  background-color: white;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+}
+
+/* 免责声明 */
+.disclaimer {
+  padding: 8px;
+  background-color: #fff8e6;
+  border: 1px solid #ffd33d;
+  border-radius: 4px;
+}
+
+.disclaimer-text {
+  font-size: 12px;
+  color: #57606a;
+  font-style: italic;
+}
+
+/* 失败样式 */
+.debug-failure {
+  margin-top: 20px;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  padding: 16px;
+  background-color: #fcf2f2;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.failure-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.failure-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #cf222e;
+  color: white;
+  font-weight: bold;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.failure-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #cf222e;
+}
+
+.error-message {
+  font-size: 14px;
+  color: #24292e;
+  padding: 8px 12px;
+  background-color: white;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+}
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .assessment-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .header-right {
+    justify-content: flex-end;
+  }
+}
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  padding: 40px 0;
+}
+
+.custom-empty {
+  :deep(.ant-empty-image) {
+    height: 80px;
+    margin-bottom: 16px;
+  }
+
+  :deep(.ant-empty-description) {
+    font-size: 14px;
+    color: #8c8c8c;
+  }
+}
+</style>
diff --git a/src/views/super/airag/aivideo/AiVideo.api.ts b/src/views/super/airag/aivideo/AiVideo.api.ts
new file mode 100644
index 0000000..3aa3d39
--- /dev/null
+++ b/src/views/super/airag/aivideo/AiVideo.api.ts
@@ -0,0 +1,37 @@
+// AI Video API 接口配置
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  submit = '/airag/video/submit',
+  query = '/airag/video/query',
+  listByUser = '/airag/video/listByUser',
+  deleteRecord = '/airag/video/deleteVideoRecord',
+}
+
+/**
+ * 提交视频生成任务
+ */
+export const submitVideoTask = (params: any) => {
+  return defHttp.post({ url: Api.submit, params }, { isTransformResponse: false });
+};
+
+/**
+ * 查询视频生成任务状态
+ */
+export const queryVideoTask = (taskId: string) => {
+  return defHttp.get({ url: `${Api.query}/${taskId}` }, { isTransformResponse: false });
+};
+
+/**
+ * 根据用户id查询视频列表
+ */
+export const getVideoListByUser = (params: { userId: string }) => {
+  return defHttp.get({ url: Api.listByUser, params }, { isTransformResponse: false });
+};
+
+/**
+ * 删除视频记录
+ */
+export const deleteVideoRecord = (params) => {
+  return defHttp.delete({ url: Api.deleteRecord, params }, { isTransformResponse: false, joinParamsToUrl: true });
+};
diff --git a/src/views/super/airag/aivideo/AiVideo.data.ts b/src/views/super/airag/aivideo/AiVideo.data.ts
new file mode 100644
index 0000000..b1329ce
--- /dev/null
+++ b/src/views/super/airag/aivideo/AiVideo.data.ts
@@ -0,0 +1,76 @@
+import { FormSchema } from '@/components/Form';
+import { h } from 'vue';
+import { Button } from 'ant-design-vue';
+
+/**
+ * 视频生成表单配置
+ */
+export const videoFormSchemas: FormSchema[] = [
+  // {
+  //   label: '模型',
+  //   field: 'model',
+  //   component: 'JDictSelectTag',
+  //   required: true,
+  //   defaultValue: 'video-generation-1',
+  //   componentProps: {
+  //     dictCode: "airag_model where model_type = 'VIDEO' and activate_flag = 1,name,id",
+  //     placeholder: '请选择视频生成模型',
+  //   },
+  // },
+  {
+    label: '视频尺寸',
+    field: 'size',
+    component: 'Select',
+    defaultValue: '1920x1080',
+    componentProps: {
+      options: [
+        { label: '1280x720 (720P)', value: '1280x720' },
+        { label: '720x1280', value: '720x1280' },
+        { label: '1024x1024', value: '1024x1024' },
+        { label: '1920x1080 (1080P)', value: '1920x1080' },
+        { label: '1080x1920', value: '1080x1920' },
+        { label: '2048x1080 (2K)', value: '2048x1080' },
+        { label: '3840x2160 (4K)', value: '3840x2160' },
+      ],
+      placeholder: '请选择视频尺寸',
+    },
+  },
+  {
+    label: '视频帧率',
+    field: 'fps',
+    component: 'Select',
+    defaultValue: 30,
+    componentProps: {
+      options: [
+        { label: '30 FPS', value: 30 },
+        { label: '60 FPS', value: 60 },
+      ],
+      placeholder: '请选择视频帧率',
+    },
+  },
+  {
+    label: '视频时长',
+    field: 'duration',
+    component: 'Select',
+    defaultValue: 5,
+    componentProps: {
+      options: [
+        { label: '5秒', value: 5 },
+        { label: '10秒', value: 10 },
+      ],
+      placeholder: '请选择视频时长',
+    },
+  },
+  {
+    label: '是否ai合成音效',
+    field: 'izAiAudio',
+    component: 'Select',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '否', value: 0 },
+        { label: '是', value: 1 },
+      ],
+    },  
+  }
+];
diff --git a/src/views/super/airag/aivideo/AiVideo.less b/src/views/super/airag/aivideo/AiVideo.less
new file mode 100644
index 0000000..003b59d
--- /dev/null
+++ b/src/views/super/airag/aivideo/AiVideo.less
@@ -0,0 +1,375 @@
+// AI Video 页面样式
+.ai-video-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: #f0f2f5;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .page-header {
+    margin-bottom: 16px;
+    background: #fff;
+    padding: 16px 24px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2329;
+    }
+
+    .subtitle {
+      color: #8f959e;
+      font-size: 14px;
+    }
+  }
+
+  .content-wrapper {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    overflow: hidden;
+  }
+
+  .control-panel {
+    width: 380px;
+    min-width: 320px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .form-container {
+      flex: 1;
+      overflow-y: auto;
+      padding-right: 4px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+
+      .form-item-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 16px;
+
+        .form-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #1f2329;
+        }
+
+        :deep(.ant-input-textarea) {
+          font-size: 13px;
+        }
+      }
+
+      .preset-group {
+        margin-bottom: 2px;
+        .preset-label {
+          font-size: 13px;
+          color: #8f959e;
+          margin-bottom: 8px;
+          display: block;
+        }
+
+        .preset-items {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
+
+        .preset-item {
+          padding: 6px 14px;
+          cursor: pointer;
+          border-radius: 6px;
+          border: 1px solid #1890ff;
+          background: #fff;
+          color: #1890ff;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 500;
+          transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+          user-select: none;
+
+          &:hover {
+            background: #1890ff;
+            color: #fff;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+          }
+
+          &:active {
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    .action-btn-group {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    margin-bottom: 16px;
+    padding-left: 8px;
+    border-left: 4px solid #1890ff;
+    line-height: 1;
+  }
+
+  .preview-panel {
+    flex: 1;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .preview-content {
+      flex: 1;
+      background: #f7f8fc;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      padding: 24px;
+    }
+
+    .video-info-section {
+      padding: 12px 0;
+      border-top: 1px solid #f0f0f0;
+      margin-top: 12px;
+
+      .current-video-info {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+
+        .info-label {
+          font-size: 13px;
+          color: #8f959e;
+          flex-shrink: 0;
+          font-weight: 500;
+        }
+
+        .info-text {
+          font-size: 13px;
+          color: #1f2329;
+          flex: 1;
+          word-break: break-word;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+
+  .history-panel {
+    width: 400px;
+    min-width: 280px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .history-list-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+    }
+
+    .empty-history {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #b2b8c6;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .history-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .history-item {
+        padding: 12px;
+        border: 1px solid #f0f0f0;
+        border-radius: 6px;
+        background: #fafbfc;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #f5f9ff;
+          border-color: #d9e8f7;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        }
+
+        .item-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 8px;
+          gap: 8px;
+
+          .item-title {
+            flex: 1;
+            font-size: 12px;
+            color: #1f2329;
+            font-weight: 500;
+            word-break: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 1.4;
+          }
+
+          .item-time {
+            font-size: 10px;
+            color: #b2b8c6;
+            white-space: nowrap;
+            flex-shrink: 0;
+          }
+        }
+
+        .item-actions {
+          display: flex;
+          gap: 4px;
+          justify-content: flex-end;
+
+          :deep(.ant-btn) {
+            padding: 0 4px;
+            height: auto;
+            min-width: auto;
+            font-size: 12px;
+
+            &.ant-btn-text {
+              color: #1890ff;
+
+              &:hover {
+                color: #40a9ff;
+              }
+            }
+
+            &.ant-btn-dangerous.ant-btn-text {
+              color: #ff4d4f;
+
+              &:hover {
+                color: #ff7875;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #8f959e;
+
+    p {
+      margin-top: 12px;
+      margin-bottom: 0;
+    }
+
+    .tip {
+      font-size: 12px;
+      color: #b2b8c6;
+    }
+  }
+
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    .loading-text {
+      text-align: center;
+      color: #595959;
+
+      p {
+        margin: 4px 0;
+      }
+
+      .elapsed-time {
+        font-size: 20px;
+        font-weight: 600;
+        color: #1890ff;
+      }
+
+      .status-text {
+        font-size: 13px;
+        color: #8c8c8c;
+      }
+    }
+  }
+
+  .video-player-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .video-control {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      border-radius: 4px;
+    }
+  }
+}
diff --git a/src/views/super/airag/aivideo/AiVideo.vue b/src/views/super/airag/aivideo/AiVideo.vue
new file mode 100644
index 0000000..cc9c436
--- /dev/null
+++ b/src/views/super/airag/aivideo/AiVideo.vue
@@ -0,0 +1,415 @@
+<template>
+  <div class="ai-video-page">
+    <!-- 头部区域 -->
+    <div class="page-header">
+      <div class="title">AI视频</div>
+      <div class="subtitle">将文本快速转换为生动的视频内容</div>
+    </div>
+
+    <div class="content-wrapper">
+      <!-- 左侧：视频控制 + 文案 + 常用场景 + 生成按钮 -->
+      <div class="control-panel">
+        <div class="panel-title">视频配置</div>
+        <div class="form-container">
+          <BasicForm @register="registerForm" :schemas="leftFormSchemas" />
+
+          <!-- 文案输入框 -->
+          <div class="form-item-group">
+            <label class="form-label">文案</label>
+            <a-textarea v-model:value="formText" :rows="4" :maxlength="500" show-count placeholder="请输入要生成视频的文案内容" />
+          </div>
+
+          <!-- 常用场景 -->
+          <div class="preset-group">
+            <div class="preset-label">常用场景</div>
+            <div class="preset-items">
+              <div v-for="(item, index) in presetTexts" :key="index" class="preset-item" @click.prevent="handleApplyPreset(item.content)">
+                {{ item.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 开始生成按钮 -->
+        <div class="action-btn-group">
+          <a-button type="primary" size="large" block :loading="generating" @click="handleGenerate">
+            <Icon icon="ant-design:video-camera-outlined" />
+            开始生成
+          </a-button>
+        </div>
+      </div>
+
+      <!-- 中间：视频预览 -->
+      <div class="preview-panel">
+        <div class="panel-title">预览区域</div>
+        <div class="preview-content">
+          <div v-if="!currentVideoUrl && !generating" class="empty-state">
+            <Icon icon="ant-design:video-camera-outlined" size="72" color="#c0c4cc" />
+            <p>填写左侧文案并点击「开始生成」</p>
+            <p class="tip">支持调整视频长度、风格和效果，生成更加个性化的视频内容</p>
+          </div>
+
+          <div v-if="generating" class="loading-state">
+            <a-spin size="large" />
+            <div class="loading-text">
+              <p>正在生成视频，请耐心等待...</p>
+              <p class="elapsed-time">已等待 {{ elapsedTimeText }}</p>
+              <p class="status-text">{{ statusText }}</p>
+            </div>
+          </div>
+
+          <div v-if="currentVideoUrl && !generating" class="video-player-wrapper">
+            <video ref="videoRef" :src="currentVideoUrl" controls class="video-control" />
+          </div>
+        </div>
+        <!-- 当前播放视频信息 -->
+        <div v-if="currentVideoUrl" class="video-info-section">
+          <div class="current-video-info">
+            <span class="info-label">当前视频：</span>
+            <span class="info-text">{{ currentText }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧生成历史 - 列表风格 -->
+      <div class="history-panel">
+        <div class="panel-title">生成历史</div>
+        <div class="history-list-wrapper">
+          <div v-if="historyList.length === 0" class="empty-history">
+            <p>暂无生成历史</p>
+          </div>
+          <div v-else class="history-list">
+            <div v-for="(item, index) in historyList" :key="item.id" class="history-item">
+              <div class="item-header">
+                <span class="item-title" :title="item.content">{{ item.content }}</span>
+                <span class="item-time">{{ formatTime(item) }}</span>
+              </div>
+              <div class="item-actions">
+                <a-button type="text" size="small" @click="handlePlay(item)">
+                  <Icon icon="ant-design:play-circle-outlined" />
+                  播放
+                </a-button>
+                <a-button type="text" size="small" @click="handleUseText(item)">
+                  <Icon icon="ant-design:copy-outlined" />
+                  复用文案
+                </a-button>
+                <a-button type="text" size="small" @click="handleDownload(item)">
+                  <Icon icon="ant-design:download-outlined" />
+                  下载
+                </a-button>
+                <a-button type="text" size="small" danger @click="handleDelete(item.id)">
+                  <Icon icon="ant-design:delete-outlined" />
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Icon } from '@/components/Icon';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { videoFormSchemas } from './AiVideo.data';
+  import { submitVideoTask, queryVideoTask, getVideoListByUser, deleteVideoRecord } from './AiVideo.api';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import { useUserStore } from '@/store/modules/user';
+
+  const TASK_ID_KEY = 'ai_video_task_id';
+
+  const { createMessage } = useMessage();
+  const userStore = useUserStore();
+
+  // 左侧表单：不包含文案
+  const leftFormSchemas = videoFormSchemas.filter((item) => !['text'].includes(item.field));
+
+  const [registerForm, { validate }] = useForm({
+    schemas: leftFormSchemas,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  const generating = ref(false);
+  const videoRef = ref<HTMLVideoElement | null>(null);
+  const currentVideoUrl = ref<string>('');
+  const currentText = ref<string>('');
+  const formText = ref<string>('');
+  const historyList = ref<any[]>([]);
+  const isPresetApplying = ref(false);
+  const elapsedSeconds = ref(0);
+  const statusText = ref('任务已提交，排队中...');
+
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+  let elapsedTimer: ReturnType<typeof setInterval> | null = null;
+
+  const elapsedTimeText = computed(() => {
+    const minutes = Math.floor(elapsedSeconds.value / 60);
+    const seconds = elapsedSeconds.value % 60;
+    if (minutes > 0) {
+      return `${minutes}分${seconds}秒`;
+    }
+    return `${seconds}秒`;
+  });
+
+  const presetTexts = [
+    { title: '沙滩金毛犬', content: '一只金毛犬在金色的沙滩上奔跑，海浪轻轻拍打着岸边，阳光明媚，慢动作镜头' },
+    { title: '航拍山脉全景', content: '航拍壮丽的山脉全景，云雾缭绕在山峰之间，镜头缓缓推进。' },
+    { title: '咖啡微距特写', content: '一杯咖啡被缓缓倒入透明玻璃杯中，咖啡与牛奶融合形成美丽的纹理，微距特写。' },
+    { title: '极光延时摄影', content: '星空下的极光在天空中舞动，色彩绚烂，延时摄影效果。' },
+    {
+      title: '女讲师教学',
+      content:
+        '女讲师，站在 PPT 前手持教鞭指向内容，表情认真亲和，讲解自然流畅，手势得体大方，光线明亮清晰，背景干净整洁，1080P 高清，画面稳定流畅，适合知识讲解、课程教学，风格专业、清晰、有说服力',
+    },
+    {
+      title: '口红带货主播',
+      content:
+        '画面主体： 一位美丽的年轻中国女主播，特写镜头，面对镜头微笑。\n' +
+        '外貌着装： 她穿着浅色职业装，妆容精致无瑕。\n' +
+        '核心动作： 她一只手握着一支高端口红，另一只手优雅地打开盖子，露出丝滑的膏体。她温柔地将口红涂抹在自己的嘴唇上，动作轻柔，目光专注且含笑。\n' +
+        '背景环境： 身后是明亮整洁的直播工作室，有环形灯补光，背景呈柔和的虚化效果。\n' +
+        '画面质感： 高色彩饱和度，电影级布光，4k分辨率，60fps。\n' +
+        '特殊效果： 使用慢镜头捕捉口红涂抹瞬间的丝滑质感。\n'+
+        '语言风格：中文，适合电商直播带货场景，风格专业、清晰、有说服力',
+    },
+  ];
+
+  /**
+   * 根据当前用户id加载视频列表
+   */
+  async function loadVideoList() {
+    try {
+      const userId = userStore.getUserInfo?.id;
+      if (!userId) return;
+      const res = await getVideoListByUser({ userId });
+      if (res && res.result) {
+        const list = Array.isArray(res.result) ? res.result : res.result?.records || [];
+        historyList.value = list.map((item) => ({
+          ...item,
+          videoFullUrl: item.videoUrl ? getFileAccessHttpUrl(item.videoUrl) : '',
+        }));
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  // 页面加载时获取历史列表
+  loadVideoList();
+
+  /**
+   * 应用预设文案
+   */
+  function handleApplyPreset(text: string) {
+    if (isPresetApplying.value) return;
+    isPresetApplying.value = true;
+    formText.value = text;
+    setTimeout(() => {
+      isPresetApplying.value = false;
+    }, 300);
+  }
+
+  /**
+   * 清除所有定时器
+   */
+  function clearTimers() {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+    if (elapsedTimer) {
+      clearInterval(elapsedTimer);
+      elapsedTimer = null;
+    }
+  }
+
+  /**
+   * 开始生成（异步轮询模式）
+   */
+  async function handleGenerate() {
+    try {
+      const values = await validate();
+
+      if (!formText.value.trim()) {
+        createMessage.warn('请输入文案内容');
+        return;
+      }
+
+      // 重置状态
+      generating.value = true;
+      currentVideoUrl.value = '';
+      elapsedSeconds.value = 0;
+      statusText.value = '任务已提交，排队中...';
+      values.prompt = formText.value.trim();
+
+      // 启动计时器
+      elapsedTimer = setInterval(() => {
+        elapsedSeconds.value++;
+      }, 1000);
+
+      // 提交任务
+      const submitResult = await submitVideoTask(values);
+      if (!submitResult || !submitResult.success || !submitResult.result?.taskId) {
+        createMessage.error(submitResult?.message || '提交任务失败');
+        generating.value = false;
+        clearTimers();
+        return;
+      }
+
+      const taskId = submitResult.result.taskId;
+      localStorage.setItem(TASK_ID_KEY, taskId);
+      statusText.value = '视频生成中...';
+
+      // 开始轮询
+      pollTimer = setInterval(async () => {
+        try {
+          const queryResult = await queryVideoTask(taskId);
+          if (queryResult?.success && queryResult.result) {
+            const { status, videoUrl, message } = queryResult.result;
+            if (status === 'SUCCESS') {
+              clearTimers();
+              generating.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              currentVideoUrl.value = getFileAccessHttpUrl(videoUrl) || '';
+              currentText.value = formText.value;
+              createMessage.success('视频生成成功！');
+              await loadVideoList();
+            } else if (status === 'FAIL') {
+              clearTimers();
+              generating.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              createMessage.error(message || '视频生成失败');
+            }
+            // PROCESSING 状态继续轮询
+          }
+        } catch (e: any) {
+          clearTimers();
+          generating.value = false;
+          createMessage.error('查询任务状态失败: ' + (e.message || '未知错误'));
+        }
+      }, 5000);
+    } catch (error: any) {
+      clearTimers();
+      generating.value = false;
+      if (error?.errorFields) {
+        return;
+      }
+      createMessage.error(error.message || '提交任务失败');
+    }
+  }
+
+  /**
+   * 从历史记录中播放
+   */
+  function handlePlay(record: any) {
+    currentVideoUrl.value = record.videoFullUrl || getFileAccessHttpUrl(record.videoUrl) || '';
+    currentText.value = record.content;
+    setTimeout(() => {
+      (videoRef.value as any)?.play?.();
+    }, 0);
+  }
+
+  /**
+   * 将历史记录的文案回填到文案输入框
+   */
+  function handleUseText(record: any) {
+    formText.value = record.content;
+    createMessage.success('已将文案填入输入框');
+  }
+
+  /**
+   * 下载视频文件
+   */
+  function handleDownload(record: any) {
+    const url = record.videoFullUrl || getFileAccessHttpUrl(record.videoUrl);
+    if (!url) {
+      createMessage.error('下载地址不存在');
+      return;
+    }
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = record.fileName || `video-${Date.now()}.mp4`;
+    link.target = '_blank';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  /**
+   * 删除历史记录
+   */
+  async function handleDelete(id: string) {
+    const userId = userStore.getUserInfo?.id;
+    if (!userId) return;
+    try {
+      const res = await deleteVideoRecord({ userId: userId, recordId: id });
+      if (res.success) {
+        createMessage.success('已删除');
+        await loadVideoList();
+      } else {
+        createMessage.error(res.message || '删除失败');
+      }
+    } catch (e) {
+      createMessage.error('删除失败');
+    }
+  }
+
+  /**
+   * 格式化时间展示
+   */
+  function formatTime(item: any) {
+    return item?.createTime || '';
+  }
+
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  onMounted(() => {
+    const savedTaskId = localStorage.getItem(TASK_ID_KEY);
+    if (savedTaskId) {
+      generating.value = true;
+      currentVideoUrl.value = '';
+      elapsedSeconds.value = 0;
+      statusText.value = '任务恢复中，继续等待...';
+      elapsedTimer = setInterval(() => {
+        elapsedSeconds.value++;
+      }, 1000);
+      pollTimer = setInterval(async () => {
+        try {
+          const queryResult = await queryVideoTask(savedTaskId);
+          if (queryResult?.success && queryResult.result) {
+            const { status, videoUrl, message } = queryResult.result;
+            if (status === 'SUCCESS') {
+              clearTimers();
+              generating.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              currentVideoUrl.value = getFileAccessHttpUrl(videoUrl) || '';
+              createMessage.success('视频生成成功！');
+              await loadVideoList();
+            } else if (status === 'FAIL') {
+              clearTimers();
+              generating.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              createMessage.error(message || '视频生成失败');
+            }
+          }
+        } catch (e: any) {
+          clearTimers();
+          generating.value = false;
+          createMessage.error('查询任务状态失败: ' + (e.message || '未知错误'));
+        }
+      }, 5000);
+    }
+  });
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  onUnmounted(() => {
+    clearTimers();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import './AiVideo.less';
+</style>
diff --git a/src/views/super/airag/aivideo2/AiVideo.api.ts b/src/views/super/airag/aivideo2/AiVideo.api.ts
new file mode 100644
index 0000000..2f6fb37
--- /dev/null
+++ b/src/views/super/airag/aivideo2/AiVideo.api.ts
@@ -0,0 +1,22 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  submit = '/airag/video/submit',
+  query = '/airag/video/query',
+  prompts = '/airag/video/prompts',
+}
+
+/**
+ * 提交视频生成任务
+ */
+export const submitVideoTask = (params: { prompt: string; category?: string }) => defHttp.post({ url: Api.submit, params });
+
+/**
+ * 查询视频生成任务状态
+ */
+export const queryVideoTask = (taskId: string) => defHttp.get({ url: `${Api.query}/${taskId}` });
+
+/**
+ * 获取预设提示词
+ */
+export const getPresetPrompts = () => defHttp.get({ url: Api.prompts });
diff --git a/src/views/super/airag/aivideo2/AiVideo.data.ts b/src/views/super/airag/aivideo2/AiVideo.data.ts
new file mode 100644
index 0000000..d8c891f
--- /dev/null
+++ b/src/views/super/airag/aivideo2/AiVideo.data.ts
@@ -0,0 +1,50 @@
+import type { FormSchema } from '@/components/Form';
+
+/**
+ * 视频生成表单Schema
+ */
+export const videoFormSchema: FormSchema[] = [
+  {
+    field: 'prompt',
+    label: '视频描述',
+    component: 'InputTextArea',
+    required: true,
+    componentProps: {
+      placeholder: '请描述你想生成的视频内容，例如：一只金毛犬在沙滩上奔跑，海浪拍打岸边，阳光明媚',
+      rows: 5,
+      maxlength: 500,
+      showCount: true,
+    },
+  },
+];
+
+/**
+ * 场景分类
+ */
+export const categoryList = ['通用演示', '产品营销', '教育培训', '创意设计'];
+
+/**
+ * 备用预设提示词（当后端API不可用时使用）
+ */
+export const fallbackPrompts: Record<string, string[]> = {
+  通用演示: [
+    '一只金毛犬在金色的沙滩上奔跑，海浪轻轻拍打着岸边，阳光明媚，慢动作镜头',
+    '航拍壮丽的山脉全景，云雾缭绕在山峰之间，镜头缓缓推进',
+    '樱花树下，花瓣随风飘落，一条小溪静静流淌，春日午后的宁静氛围',
+  ],
+  产品营销: [
+    '一杯咖啡被缓缓倒入透明玻璃杯中，咖啡与牛奶融合形成美丽的纹理，微距特写',
+    '一款高端智能手表在旋转展示台上缓缓旋转，灯光打在表面上反射出金属光泽，黑色背景',
+    '一双运动鞋踩入水洼溅起水花，慢动作特写，动感活力的画面',
+  ],
+  教育培训: [
+    '地球从太空视角缓缓旋转，可以看到大气层和云层的细节，星空背景',
+    '一本书的书页被风吹动快速翻动，文字和插图若隐若现，知识流动的意象',
+    '显微镜下的细胞分裂过程，色彩鲜明的科学可视化风格',
+  ],
+  创意设计: [
+    '一座未来主义的城市在日落时分，霓虹灯光倒映在雨水的路面上，赛博朋克风格',
+    '水墨在水中缓缓扩散，形成抽象的山水画意境，中国风艺术效果',
+    '星空下的极光在天空中舞动，色彩绚烂，延时摄影效果',
+  ],
+};
diff --git a/src/views/super/airag/aivideo2/AiVideo.vue b/src/views/super/airag/aivideo2/AiVideo.vue
new file mode 100644
index 0000000..ae6b323
--- /dev/null
+++ b/src/views/super/airag/aivideo2/AiVideo.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="content-wrapper">
+    <!-- 左侧配置面板 -->
+    <div class="config-panel">
+      <div class="config-tabs">
+        <a-tabs v-model:activeKey="activeCategory" :tabBarStyle="{ margin: 0 }">
+          <a-tab-pane v-for="cat in categoryList" :key="cat" :tab="cat" />
+        </a-tabs>
+      </div>
+
+      <!-- 预设提示词 -->
+      <div class="preset-prompts">
+        <div class="preset-label">快捷提示词</div>
+        <div class="preset-list">
+          <a-button
+            v-for="(prompt, index) in currentPrompts"
+            :key="index"
+            class="preset-btn"
+            size="small"
+            @click="applyPrompt(prompt)"
+          >
+            {{ prompt.length > 20 ? prompt.substring(0, 20) + '...' : prompt }}
+          </a-button>
+        </div>
+      </div>
+
+      <div class="form-container">
+        <BasicForm @register="registerForm" />
+      </div>
+
+      <div class="action-container">
+        <a-button type="primary" size="large" block @click="handleGenerate" :loading="generating" :disabled="generating">
+          <Icon icon="ant-design:video-camera-outlined" />
+          {{ generating ? '生成中...' : '开始生成' }}
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 右侧预览面板 -->
+    <div class="preview-panel">
+      <div class="panel-title">生成结果</div>
+      <div class="preview-content">
+        <!-- 空状态 -->
+        <div v-if="!videoUrl && !generating" class="empty-state">
+          <Icon icon="ant-design:video-camera-outlined" size="64" color="#ccc" />
+          <p>在左侧输入视频描述，点击开始生成</p>
+        </div>
+
+        <!-- 生成中 -->
+        <div v-if="generating" class="loading-state">
+          <a-spin size="large" />
+          <div class="loading-text">
+            <p>正在生成视频，请耐心等待...</p>
+            <p class="elapsed-time">已等待 {{ elapsedTimeText }}</p>
+            <p class="status-text">{{ statusText }}</p>
+          </div>
+        </div>
+
+        <!-- 生成完成 -->
+        <div v-if="videoUrl && !generating" class="result-video-wrapper">
+          <video :src="videoUrl" controls class="result-video" />
+          <div class="video-actions">
+            <a-button type="primary" @click="handleDownload">
+              <Icon icon="ant-design:download-outlined" />
+              下载视频
+            </a-button>
+            <a-button @click="handleReset">
+              <Icon icon="ant-design:redo-outlined" />
+              重新生成
+            </a-button>
+          </div>
+        </div>
+
+        <!-- 生成失败 -->
+        <div v-if="errorMessage && !generating" class="error-state">
+          <Icon icon="ant-design:close-circle-outlined" size="64" color="#ff4d4f" />
+          <p class="error-text">{{ errorMessage }}</p>
+          <a-button type="primary" @click="handleReset">重试</a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, onUnmounted } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Icon } from '@/components/Icon';
+  import { submitVideoTask, queryVideoTask, getPresetPrompts } from './AiVideo.api';
+  import { videoFormSchema, categoryList, fallbackPrompts } from './AiVideo.data';
+
+  const { createMessage } = useMessage();
+
+  const activeCategory = ref('通用演示');
+  const generating = ref(false);
+  const videoUrl = ref('');
+  const errorMessage = ref('');
+  const elapsedSeconds = ref(0);
+  const statusText = ref('任务已提交，排队中...');
+
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+  let elapsedTimer: ReturnType<typeof setInterval> | null = null;
+
+  // 预设提示词（优先从后端加载）
+  const promptsMap = ref<Record<string, string[]>>({ ...fallbackPrompts });
+
+  // 加载后端预设提示词
+  getPresetPrompts()
+    .then((data) => {
+      if (data && Object.keys(data).length > 0) {
+        promptsMap.value = data;
+      }
+    })
+    .catch(() => {
+      // 使用备用提示词
+    });
+
+  const currentPrompts = computed(() => {
+    return promptsMap.value[activeCategory.value] || [];
+  });
+
+  const elapsedTimeText = computed(() => {
+    const minutes = Math.floor(elapsedSeconds.value / 60);
+    const seconds = elapsedSeconds.value % 60;
+    if (minutes > 0) {
+      return `${minutes}分${seconds}秒`;
+    }
+    return `${seconds}秒`;
+  });
+
+  const [registerForm, { validate, setFieldsValue }] = useForm({
+    schemas: videoFormSchema,
+    labelWidth: 100,
+    actionColOptions: { span: 24 },
+    showActionButtonGroup: false,
+  });
+
+  function applyPrompt(prompt: string) {
+    setFieldsValue({ prompt });
+  }
+
+  async function handleGenerate() {
+    try {
+      const values = await validate();
+      if (!values.prompt || !values.prompt.trim()) {
+        createMessage.warning('请输入视频描述');
+        return;
+      }
+
+      // 重置状态
+      generating.value = true;
+      videoUrl.value = '';
+      errorMessage.value = '';
+      elapsedSeconds.value = 0;
+      statusText.value = '任务已提交，排队中...';
+
+      // 启动计时器
+      elapsedTimer = setInterval(() => {
+        elapsedSeconds.value++;
+      }, 1000);
+
+      // 提交任务
+      const submitResult = await submitVideoTask({
+        prompt: values.prompt.trim(),
+        category: activeCategory.value,
+      });
+
+      if (!submitResult || !submitResult.taskId) {
+        throw new Error(submitResult?.message || '提交任务失败');
+      }
+
+      statusText.value = '视频生成中...';
+
+      // 开始轮询
+      pollTimer = setInterval(async () => {
+        try {
+          const queryResult = await queryVideoTask(submitResult.taskId);
+          if (queryResult.status === 'SUCCESS') {
+            clearTimers();
+            generating.value = false;
+            videoUrl.value = queryResult.videoUrl;
+            createMessage.success('视频生成成功！');
+          } else if (queryResult.status === 'FAIL') {
+            clearTimers();
+            generating.value = false;
+            errorMessage.value = queryResult.message || '视频生成失败';
+          }
+          // PROCESSING状态继续轮询
+        } catch (e: any) {
+          clearTimers();
+          generating.value = false;
+          errorMessage.value = '查询任务状态失败: ' + (e.message || '未知错误');
+        }
+      }, 5000);
+    } catch (error: any) {
+      clearTimers();
+      generating.value = false;
+      if (error?.errorFields) {
+        // 表单验证失败，不显示额外错误
+        return;
+      }
+      errorMessage.value = error.message || '提交任务失败';
+    }
+  }
+
+  function clearTimers() {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+    if (elapsedTimer) {
+      clearInterval(elapsedTimer);
+      elapsedTimer = null;
+    }
+  }
+
+  function handleReset() {
+    videoUrl.value = '';
+    errorMessage.value = '';
+    elapsedSeconds.value = 0;
+  }
+
+  function handleDownload() {
+    if (!videoUrl.value) return;
+    const a = document.createElement('a');
+    a.href = videoUrl.value;
+    a.download = `ai-video-${Date.now()}.mp4`;
+    a.target = '_blank';
+    a.click();
+  }
+
+  onUnmounted(() => {
+    clearTimers();
+  });
+</script>
+
+<style lang="less" scoped>
+  .content-wrapper {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .config-panel {
+    width: 550px;
+    min-width: 350px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .config-tabs {
+      margin-bottom: 16px;
+
+      :deep(.ant-tabs-nav::before) {
+        border-bottom: none;
+      }
+
+      :deep(.ant-tabs-tab) {
+        padding: 8px 0;
+        margin: 0 24px 0 0;
+        font-size: 15px;
+
+        &.ant-tabs-tab-active .ant-tabs-tab-btn {
+          color: #1890ff;
+          font-weight: 500;
+        }
+      }
+
+      :deep(.ant-tabs-ink-bar) {
+        background: #1890ff;
+      }
+    }
+
+    .preset-prompts {
+      margin-bottom: 16px;
+
+      .preset-label {
+        font-size: 13px;
+        color: #8c8c8c;
+        margin-bottom: 8px;
+      }
+
+      .preset-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .preset-btn {
+          color: #595959;
+          border-color: #d9d9d9;
+          font-size: 12px;
+
+          &:hover {
+            color: #1890ff;
+            border-color: #1890ff;
+          }
+        }
+      }
+    }
+
+    .form-container {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .action-container {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+
+  .preview-panel {
+    flex: 1;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .preview-content {
+      flex: 1;
+      background: #f7f8fc;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    margin-bottom: 20px;
+    padding-left: 8px;
+    border-left: 4px solid #1890ff;
+    line-height: 1;
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #8f959e;
+
+    p {
+      margin-top: 16px;
+    }
+  }
+
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+
+    .loading-text {
+      text-align: center;
+      color: #595959;
+
+      p {
+        margin: 4px 0;
+      }
+
+      .elapsed-time {
+        font-size: 20px;
+        font-weight: 600;
+        color: #1890ff;
+      }
+
+      .status-text {
+        font-size: 13px;
+        color: #8c8c8c;
+      }
+    }
+  }
+
+  .result-video-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+
+    .result-video {
+      flex: 1;
+      width: 100%;
+      max-height: calc(100% - 60px);
+      border-radius: 8px;
+      background: #000;
+      object-fit: contain;
+    }
+
+    .video-actions {
+      margin-top: 16px;
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .error-state {
+    text-align: center;
+
+    .error-text {
+      margin: 16px 0;
+      color: #ff4d4f;
+      font-size: 14px;
+    }
+  }
+</style>
diff --git a/src/views/super/airag/aivoice/AiVoice.api.ts b/src/views/super/airag/aivoice/AiVoice.api.ts
new file mode 100644
index 0000000..a468b4a
--- /dev/null
+++ b/src/views/super/airag/aivoice/AiVoice.api.ts
@@ -0,0 +1,34 @@
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  generate = '/airag/voice/generate',
+  generateAsync = '/airag/voice/generateAsync',
+  queryTask = '/airag/voice/queryTask',
+  listByUser = '/airag/voice/listByUser',
+  deleteVoiceRecord = '/airag/voice/deleteVoiceRecord',
+}
+
+/**
+ * 提交语音生成任务（同步，保留兼容）
+ */
+export const submitVoiceTask = (params) => defHttp.post({ url: Api.generate, params }, { isTransformResponse: false });
+
+/**
+ * 异步提交语音生成任务，立即返回 taskId
+ */
+export const generateVoiceAsync = (params) => defHttp.post({ url: Api.generateAsync, params }, { isTransformResponse: false });
+
+/**
+ * 查询异步语音任务结果
+ */
+export const queryVoiceTask = (taskId: string) => defHttp.get({ url: `${Api.queryTask}/${taskId}` }, { isTransformResponse: false });
+
+/**
+ * 根据用户id查询语音列表
+ */
+export const getVoiceListByUser = (params: { userId: string }) => defHttp.get({ url: Api.listByUser, params },{ isTransformResponse: false });
+
+/**
+ * 删除语音记录
+ */
+export const deleteVoiceRecord = (params) => defHttp.delete({ url: Api.deleteVoiceRecord, params }, { isTransformResponse: false, joinParamsToUrl: true });
\ No newline at end of file
diff --git a/src/views/super/airag/aivoice/AiVoice.data.ts b/src/views/super/airag/aivoice/AiVoice.data.ts
new file mode 100644
index 0000000..3484584
--- /dev/null
+++ b/src/views/super/airag/aivoice/AiVoice.data.ts
@@ -0,0 +1,117 @@
+import { FormSchema } from '@/components/Form';
+
+// 左侧语音控制表单
+export const voiceFormSchemas: FormSchema[] = [
+  /*  {
+    label: '模型',
+    field: 'model',
+    component: 'JDictSelectTag',
+    required: true,
+    defaultValue: 'voice-generation-1',
+    componentProps: {
+      placeholder: '请选择语音模型',
+      dictCode: "airag_model where model_type = 'VOICE' and activate_flag = 1,name,id",
+    },
+  },*/
+  {
+    label: '倍速',
+    field: 'speed',
+    component: 'Slider',
+    defaultValue: 1,
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      min: 0.25,
+      max: 4,
+      step: 0.1,
+      marks: {
+        0.5: '0.5x',
+        1: '1x',
+        1.5: '1.5x',
+        2: '2x',
+        3: '3x',
+        4: '4x',
+      },
+      tooltip: {
+        formatter: (value: number) => `${value.toFixed(1)}x`,
+      },
+    },
+  },
+  {
+    label: '音量增益(dB)',
+    field: 'volume',
+    component: 'Slider',
+    defaultValue: 0,
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      min: -10,
+      max: 10,
+      step: 1,
+      marks: {
+        '-10': '-10',
+        0: '0',
+        10: '10',
+      },
+    },
+  },
+  {
+    label: '声色',
+    field: 'voice',
+    component: 'Select',
+    required: true,
+    defaultValue: 'tongtong',
+    componentProps: {
+      options: [
+        { label: '彤彤', value: 'tongtong' },
+        { label: '锤锤', value: 'chuichui' },
+        { label: '小陈', value: 'xiaochen' },
+        { label: 'Jam', value: 'jam' },
+        { label: 'Kazi', value: 'kazi' },
+        { label: 'Douji', value: 'douji' },
+        { label: 'Luodo', value: 'luodo' },
+      ],
+      placeholder: '请选择声色',
+    },
+  },
+  {
+    label: '文案',
+    field: 'text',
+    component: 'InputTextArea',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    componentProps: {
+      rows: 6,
+      placeholder: '请输入要合成的文案内容',
+      maxlength: 500,
+      showCount: true,
+    },
+  },
+];
+
+/**
+ * 历史记录表格列配置
+ */
+export const historyColumns = [
+  {
+    title: '文案',
+    dataIndex: 'text',
+    width: 100,
+    ellipsis: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 100,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+  },
+];
diff --git a/src/views/super/airag/aivoice/AiVoice.less b/src/views/super/airag/aivoice/AiVoice.less
new file mode 100644
index 0000000..7bdc7d2
--- /dev/null
+++ b/src/views/super/airag/aivoice/AiVoice.less
@@ -0,0 +1,382 @@
+// AI Voice 样式文件
+.ai-voice-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background-color: #f0f2f5;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .page-header {
+    margin-bottom: 16px;
+    background: #fff;
+    padding: 16px 24px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2329;
+    }
+
+    .subtitle {
+      color: #8f959e;
+      font-size: 14px;
+    }
+  }
+
+  .content-wrapper {
+    flex: 1;
+    display: flex;
+    gap: 16px;
+    overflow: hidden;
+  }
+
+  .control-panel {
+    width: 300px;
+    min-width: 260px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .form-container {
+      flex: 1;
+      overflow-y: auto;
+      padding-right: 4px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  // 中间区域：试听 + 文案 + 常用场景 + 生成按钮
+  .middle-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow: hidden;
+
+    .preview-panel {
+      flex: 0 0 auto;
+      height: 300px;
+      background: #fff;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      overflow: hidden;
+
+      .panel-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1f2329;
+        margin-bottom: 16px;
+        padding-left: 8px;
+        border-left: 4px solid #1890ff;
+        line-height: 1;
+      }
+
+      .preview-content {
+        flex: 1;
+        background: #f7f8fc;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        padding: 24px;
+      }
+
+      .audio-info-section {
+        padding: 12px 0;
+        border-top: 1px solid #f0f0f0;
+        margin-top: 12px;
+
+        .current-audio-info {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+
+          .info-label {
+            font-size: 13px;
+            color: #8f959e;
+            flex-shrink: 0;
+            font-weight: 500;
+          }
+
+          .info-text {
+            font-size: 13px;
+            color: #1f2329;
+            flex: 1;
+            word-break: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 1.4;
+          }
+        }
+      }
+    }
+
+    .input-section {
+      flex: 1;
+      background: #fff;
+      border-radius: 8px;
+      padding: 20px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+
+      .form-item-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .form-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #1f2329;
+        }
+
+        :deep(.ant-input-textarea) {
+          font-size: 13px;
+        }
+      }
+
+      .preset-group {
+        .preset-label {
+          font-size: 13px;
+          color: #8f959e;
+          margin-bottom: 8px;
+          display: block;
+        }
+
+        .preset-items {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
+
+        .preset-item {
+          flex-shrink: 0;
+          padding: 6px 14px;
+          cursor: pointer;
+          border-radius: 6px;
+          border: 1px solid #1890ff;
+          background: #fff;
+          color: #1890ff;
+          white-space: nowrap;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 500;
+          transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+          user-select: none;
+
+          &:hover {
+            background: #1890ff;
+            color: #fff;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+          }
+
+          &:active {
+            transform: translateY(0);
+          }
+        }
+      }
+
+      .action-btn-group {
+        margin-top: auto;
+        padding-top: 12px;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+  }
+
+  .history-panel {
+    width: 400px;
+    min-width: 280px;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    overflow: hidden;
+
+    .history-list-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+    }
+
+    .empty-history {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #b2b8c6;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .history-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .history-item {
+        padding: 12px;
+        border: 1px solid #f0f0f0;
+        border-radius: 6px;
+        background: #fafbfc;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #f5f9ff;
+          border-color: #d9e8f7;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        }
+
+        .item-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 8px;
+          gap: 8px;
+
+          .item-title {
+            flex: 1;
+            font-size: 12px;
+            color: #1f2329;
+            font-weight: 500;
+            word-break: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 1.4;
+          }
+
+          .item-time {
+            font-size: 10px;
+            color: #b2b8c6;
+            white-space: nowrap;
+            flex-shrink: 0;
+          }
+        }
+
+        .item-actions {
+          display: flex;
+          gap: 4px;
+          justify-content: flex-end;
+
+          :deep(.ant-btn) {
+            padding: 0 4px;
+            height: auto;
+            min-width: auto;
+            font-size: 12px;
+
+            &.ant-btn-text {
+              color: #1890ff;
+
+              &:hover {
+                color: #40a9ff;
+              }
+            }
+
+            &.ant-btn-dangerous.ant-btn-text {
+              color: #ff4d4f;
+
+              &:hover {
+                color: #ff7875;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2329;
+    margin-bottom: 20px;
+    padding-left: 8px;
+    border-left: 4px solid #1890ff;
+    line-height: 1;
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #8f959e;
+
+    p {
+      margin-top: 12px;
+      margin-bottom: 0;
+    }
+
+    .tip {
+      font-size: 12px;
+      color: #b2b8c6;
+    }
+  }
+
+  .audio-player-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/views/super/airag/aivoice/AiVoice.vue b/src/views/super/airag/aivoice/AiVoice.vue
new file mode 100644
index 0000000..db0158c
--- /dev/null
+++ b/src/views/super/airag/aivoice/AiVoice.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="ai-voice-page">
+    <!-- 头部区域 -->
+    <div class="page-header">
+      <div class="title">AI语音</div>
+      <div class="subtitle">将文本快速转换为自然流畅的语音</div>
+    </div>
+
+    <div class="content-wrapper">
+      <!-- 左侧语音控制 -->
+      <div class="control-panel">
+        <div class="panel-title">语音控制</div>
+        <div class="form-container">
+          <BasicForm @register="registerForm" :schemas="leftFormSchemas" />
+        </div>
+      </div>
+
+      <!-- 中间区域：试听 + 文案 + 常用场景 + 生成按钮 -->
+      <div class="middle-wrapper">
+        <!-- 试听区域 -->
+        <div class="preview-panel">
+          <div class="panel-title">试听区域</div>
+          <div class="preview-content">
+            <div v-if="!currentAudioUrl" class="empty-state">
+              <Icon icon="ant-design:customer-service-outlined" size="72" color="#c0c4cc" />
+              <p>填写下方文案并点击「开始合成」</p>
+              <p class="tip">支持调整倍速、音量增益和声色，生成更加个性化的语音效果</p>
+            </div>
+
+            <div v-else class="audio-player-wrapper">
+              <audio ref="audioRef" :src="currentAudioUrl" controls class="audio-control" />
+            </div>
+          </div>
+          <!-- 当前播放音频信息 -->
+          <div v-if="currentAudioUrl" class="audio-info-section">
+            <div class="current-audio-info">
+              <span class="info-label">当前语音：</span>
+              <span class="info-text">{{ currentText }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 文案输入和常用场景 -->
+        <div class="input-section">
+          <!-- 文案输入框 -->
+          <div class="form-item-group">
+            <label class="form-label">文案</label>
+            <a-textarea v-model:value="formText" :rows="4" :maxlength="500" show-count placeholder="请输入要合成的文案内容" />
+          </div>
+
+          <!-- 常用场景 -->
+          <div class="preset-group">
+            <div class="preset-label">常用场景</div>
+            <div class="preset-items">
+              <div v-for="item in presetTexts" :key="item" class="preset-item" @click.prevent="handleApplyPreset(item)">
+                {{ item }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 开始合成按钮 -->
+          <div class="action-btn-group">
+            <a-button type="primary" size="large" block :loading="generating" @click="handleSynthesize">
+              <Icon icon="ant-design:sound-outlined" />
+              开始合成
+            </a-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧生成历史 - 列表风格 -->
+      <div class="history-panel">
+        <div class="panel-title">生成历史</div>
+        <div class="history-list-wrapper">
+          <div v-if="historyList.length === 0" class="empty-history">
+            <p>暂无生成历史</p>
+          </div>
+          <div v-else class="history-list">
+            <div v-for="item in historyList" :key="item.id" class="history-item">
+              <div class="item-header">
+                <span class="item-title" :title="item.content">{{ item.content }}</span>
+                <span class="item-time">{{ item.createTime }}</span>
+              </div>
+              <div class="item-actions">
+                <a-button type="text" size="small" @click="handlePlay(item)">
+                  <Icon icon="ant-design:sound-outlined" />
+                  播放
+                </a-button>
+                <a-button type="text" size="small" @click="handleUseText(item)">
+                  <Icon icon="ant-design:copy-outlined" />
+                  复用文案
+                </a-button>
+                <a-button type="text" size="small" @click="handleDownload(item)">
+                  <Icon icon="ant-design:download-outlined" />
+                  下载
+                </a-button>
+                <a-button type="text" size="small" danger @click="handleDelete(item.id)">
+                  <Icon icon="ant-design:delete-outlined" />
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Icon } from '@/components/Icon';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { voiceFormSchemas } from './AiVoice.data';
+  import { generateVoiceAsync, queryVoiceTask, getVoiceListByUser, deleteVoiceRecord } from '@/views/super/airag/aivoice/AiVoice.api';
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+  import { useUserStore } from '@/store/modules/user';
+
+  const TASK_ID_KEY = 'ai_voice_task_id';
+
+  const { createMessage } = useMessage();
+  const userStore = useUserStore();
+
+  // 左侧表单：只包含模型、倍速、音量、声色，不包含文案
+  const leftFormSchemas = voiceFormSchemas.filter((item) => !['text'].includes(item.field));
+
+  const [registerForm, { validate }] = useForm({
+    schemas: leftFormSchemas,
+    showActionButtonGroup: false,
+    wrapperCol: { span: 24 },
+    labelCol: { span: 24 },
+  });
+
+  const generating = ref(false);
+  const audioRef = ref<HTMLAudioElement | null>(null);
+  const currentAudioUrl = ref<string>('');
+  const currentText = ref<string>('');
+  const formText = ref<string>(''); // 文案输入框的独立状态
+  const historyList = ref<any[]>([]);
+  const isPresetApplying = ref(false); // 防抖标志
+  let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+  /**
+   * 根据当前用户id加载语音列表
+   */
+  async function loadVoiceList() {
+    try {
+      const userId = userStore.getUserInfo?.id;
+      if (!userId) {
+        return;
+      }
+      await getVoiceListByUser({ userId }).then((res) =>{
+        if(res && res.result){
+          for (const rs of res.result) {
+              if (rs.voiceUrl) {
+                rs.audioUrl = getFileAccessHttpUrl(rs.voiceUrl) || '';
+              }
+          }
+          historyList.value = res.result || [];
+        }
+      });
+    } catch (e) {
+     
+    }
+  }
+
+  // 页面加载时获取历史列表
+  loadVoiceList();
+
+  const presetTexts = [
+    '欢迎来到我们的平台，祝您使用愉快！',
+    '今天的天气非常好，适合出门散步。',
+    '尊敬的客户，您的订单已发货，请注意查收。',
+    'Welcome to our platform, we hope you enjoy the experience!',
+  ];
+
+  /**
+   * 应用预设文案
+   */
+  function handleApplyPreset(text: string) {
+    if (isPresetApplying.value) return;
+
+    isPresetApplying.value = true;
+    formText.value = text;
+
+    // 300ms 后取消防抖标志
+    setTimeout(() => {
+      isPresetApplying.value = false;
+    }, 300);
+  }
+
+  /**
+   * 开始合成（异步轮询模式）
+   */
+  async function handleSynthesize() {
+    try {
+      const values = await validate();
+
+      if (!formText.value.trim()) {
+        createMessage.warn('请输入文案内容');
+        return;
+      }
+
+      generating.value = true;
+      currentAudioUrl.value = '';
+      values.content = formText.value.trim();
+
+     //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+      const res = await generateVoiceAsync(values);
+      if (res.success && res.result) {
+        const taskId = res.result as string;
+        localStorage.setItem(TASK_ID_KEY, taskId);
+        startPolling(taskId);
+      } else {
+        generating.value = false;
+        createMessage.error(res.message || '提交任务失败');
+      }
+    } catch (e) {
+      generating.value = false;
+    }
+  }
+
+  /** 轮询查询语音任务结果 */
+  function startPolling(taskId: string) {
+    const poll = () => {
+      queryVoiceTask(taskId)
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+        .then((res) => {
+          if (res.success) {
+            //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+            if (res.result === 'pending' || res.result === null) {
+              pollTimer = setTimeout(poll, 3000);
+            } else {
+              generating.value = false;
+              localStorage.removeItem(TASK_ID_KEY);
+              currentAudioUrl.value = getFileAccessHttpUrl(res.result.voiceUrl) || '';
+              currentText.value = formText.value;
+              createMessage.success('语音合成完成');
+              loadVoiceList();
+            }
+          } else {
+            generating.value = false;
+            localStorage.removeItem(TASK_ID_KEY);
+            createMessage.error(res.message || '语音合成失败');
+          }
+        })
+        .catch(() => {
+          pollTimer = setTimeout(poll, 3000);
+        });
+    };
+    poll();
+    //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  }
+
+  //update-begin---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+  onMounted(() => {
+    const savedTaskId = localStorage.getItem(TASK_ID_KEY);
+    if (savedTaskId) {
+      generating.value = true;
+      currentAudioUrl.value = '';
+      startPolling(savedTaskId);
+    }
+  });
+
+  onUnmounted(() => {
+    if (pollTimer) {
+      clearTimeout(pollTimer);
+      pollTimer = null;
+    }
+  });
+  //update-end---wangshuai---date:20260415  for：[QQYUN-14944]AI 改成异步的，支持切换菜单------------
+
+  /**
+   * 从历史记录中播放
+   */
+  function handlePlay(record: any) {
+    currentAudioUrl.value = getFileAccessHttpUrl(record.voiceUrl) || '';
+    currentText.value = record.content;
+    setTimeout(() => {
+      (audioRef.value as any)?.play?.();
+    }, 0);
+  }
+
+  /**
+   * 将历史记录的文案回填到文案输入框
+   */
+  function handleUseText(record: any) {
+    formText.value = record.content;
+    createMessage.success('已将文案填入输入框');
+  }
+
+  /**
+   * 下载语音文件
+   */
+  function handleDownload(record: any) {
+    const url = getFileAccessHttpUrl(record.voiceUrl);
+    if (!url) {
+      createMessage.error('下载地址不存在');
+      return;
+    }
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = record.fileName || 'voice.wav';
+    link.target = '_blank';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  /**
+   * 删除历史记录
+   */
+  async function handleDelete(id: string) {
+    const userId = userStore.getUserInfo?.id;
+    if (!userId) return;
+    try {
+      const res = await deleteVoiceRecord({ userId: userId, recordId: id });
+      if (res.success) {
+        createMessage.success('已删除');
+        loadVoiceList();
+      } else {
+        createMessage.error(res.message || '删除失败');
+      }
+    } catch (e) {
+      createMessage.error('删除失败');
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import './AiVoice.less';
+</style>
diff --git a/src/views/super/airag/aiwriter/AiWriter.vue b/src/views/super/airag/aiwriter/AiWriter.vue
new file mode 100644
index 0000000..e15f014
--- /dev/null
+++ b/src/views/super/airag/aiwriter/AiWriter.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="writer-wrap">
+    <div class="sidebar">
+      <AiWriterLeft @generate="onGenerate" />
+    </div>
+    <div class="preview" ref="previewRef">
+      <div class="preview-header">
+        <div class="preview-header-left">
+          <span class="preview-title-text">{{ isEditing ? '编辑' : '预览' }}</span>
+          <a-select
+            v-if="historyData && historyData.length"
+            v-model:value="activeVersion"
+            size="small"
+            class="version-select"
+            @change="handleVersionChange"
+          >
+            <a-select-option :value="CURRENT_VERSION_KEY">当前内容</a-select-option>
+            <a-select-option v-for="item in historyData" :key="item.version" :value="item.version">
+              {{ item.version }}
+            </a-select-option>
+          </a-select>
+          <a-button
+            v-if="historyData && historyData.length && activeVersion !== CURRENT_VERSION_KEY"
+            type="link"
+            size="small"
+            class="preview-action-btn version-delete-btn"
+            @click="handleDeleteVersion"
+          >
+            <DeleteOutlined />
+            删除
+          </a-button>
+        </div>
+        <div class="preview-actions">
+          <a-button v-if="!generating" type="link" size="small" class="preview-action-btn custom-save-btn" @click="toggleEdit">
+            <FormOutlined v-if="!isEditing" />
+            <CheckOutlined v-else />
+            {{ isEditing ? '完成' : '编辑' }}
+          </a-button>
+          <a-button
+            v-if="!generating"
+            type="link"
+            size="small"
+            class="preview-action-btn custom-save-btn"
+            :loading="polishLoading"
+            @click="handlePolish"
+          >
+            <ThunderboltOutlined class="preview-actions-icon" style="position: relative; top: 1px" />
+            润色
+          </a-button>
+          <a-tooltip title="保存草稿">
+            <a-button v-if="!generating" type="link" size="small" class="preview-action-btn custom-save-btn" :loading="saving" @click="handleSave">
+              <SaveOutlined class="preview-actions-icon" />
+              保存
+            </a-button>
+          </a-tooltip>
+          <a-tooltip title="复制内容">
+            <a-button type="link" size="small" class="preview-action-btn custom-save-btn" @click="handleCopy">
+              <CopyOutlined class="preview-actions-icon" />
+              复制
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
+      <div v-if="!isEditing" v-html="previewMd" class="markdown-container" @click="!generating" />
+      <div v-else class="markdown-editor-container">
+        <JMarkdownEditor v-model:value="writeText" height="100vh" :preview="{ mode: 'view', action: [] }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, nextTick, onMounted } from 'vue';
+  import AiWriterLeft from './AiWriterLeft.vue';
+  import { defHttp } from '@/utils/http/axios';
+  import { CopyOutlined, ThunderboltOutlined, FormOutlined, CheckOutlined, SaveOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { Modal } from 'ant-design-vue';
+  import MarkdownIt from 'markdown-it';
+  import mdKatex from '@traptitech/markdown-it-katex';
+  import mila from 'markdown-it-link-attributes';
+  import hljs from 'highlight.js';
+  import JMarkdownEditor from '/@/components/Form/src/jeecg/components/JMarkdownEditor.vue';
+  import '/@/views/super/airag/aiapp/chat/style/github-markdown.less';
+  import '/@/views/super/airag/aiapp/chat/style/highlight.less';
+  import '/@/views/super/airag/aiapp/chat/style/style.less';
+
+  const { createMessage } = useMessage();
+  const writeText = ref<string>('');
+  const previewRef = ref<HTMLElement | null>(null);
+  //生成的loading
+  const generating = ref<boolean>(false);
+  //是否编辑
+  const isEditing = ref<boolean>(false);
+  //润色的loading
+  const polishLoading = ref<boolean>(false);
+  //保存loading
+  const saving = ref<boolean>(false);
+  //左侧的内容
+  const leftData = ref<any>();
+  //历史数据
+  const historyData = ref<any>([]);
+  //ai提示文本
+  const aiText = ref<string>('');
+  //当期版本的key
+  const CURRENT_VERSION_KEY = 'CURRENT';
+  //当前选中的本本
+  const activeVersion = ref<string>(CURRENT_VERSION_KEY);
+  //原始内容
+  const originalContent = ref<string | null>(null);
+  //第一个回复节点之后的内容
+  const afterNodeFinished = ref<boolean>(false);
+  const mdi = new MarkdownIt({
+    html: true,
+    linkify: true,
+    highlight(code, language) {
+      const validLang = !!(language && hljs.getLanguage(language));
+      if (validLang) {
+        const lang = language ?? '';
+        return highlightBlock(hljs.highlight(code, { language: lang }).value, lang);
+      }
+      return highlightBlock(hljs.highlightAuto(code).value, '');
+    },
+  });
+  mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
+  mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
+
+  //返回文本（生成中在末尾追加打点）
+  const previewMd = computed(() => {
+    let content = writeText.value || aiText.value;
+    if (generating.value) {
+      content +=
+        ' <span class="typing-dot"></span><span class="typing-dot" style="animation-delay: 0.2s"></span><span class="typing-dot" style="animation-delay: 0.4s"></span>';
+    }
+    return mdi.render(content);
+  });
+
+  /**
+   * 编辑
+   */
+  function toggleEdit() {
+    if (generating.value) {
+      return;
+    }
+    isEditing.value = !isEditing.value;
+  }
+
+  /**
+   * 复制
+   */
+  function handleCopy() {
+    if (!writeText.value) {
+      createMessage.warning('暂无内容可复制');
+      return;
+    }
+    const success = copyTextToClipboard(writeText.value);
+    if (success) {
+      createMessage.success('复制成功');
+    } else {
+      createMessage.error('复制失败');
+    }
+  }
+
+  function scrollToBottom() {
+    const el = previewRef.value;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }
+
+  /**
+   * 生成
+   *
+   * @param data
+   * @param type
+   */
+  async function onGenerate(data, type = '') {
+    isEditing.value = false;
+    data.responseMode = 'streaming';
+    writeText.value = '';
+    generating.value = true;
+    activeVersion.value = CURRENT_VERSION_KEY;
+    if (!type) {
+      leftData.value = data;
+    }
+
+    try {
+      let readableStream = await defHttp
+        .post(
+          {
+            url: '/airag/chat/genAiWriter',
+            params: { ...data },
+            timeout: 5 * 60 * 1000,
+            adapter: 'fetch',
+            responseType: 'stream',
+          },
+          {
+            isTransformResponse: false,
+          }
+        )
+        .catch((res) => {
+          createMessage.warn(res.message ? res.message : '请求出错，请稍后重试！');
+        });
+
+      const reader = readableStream.getReader();
+      const decoder = new TextDecoder('UTF-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        let chunk = decoder.decode(value, { stream: true });
+        buffer += chunk;
+
+        // 处理可能被截断的消息
+        const lines = buffer.split('\n\n');
+        // 保留最后一个片段（可能不完整）
+        buffer = lines.pop() || '';
+        for (const line of lines) {
+          if (line.startsWith('data:')) {
+            const content = line.replace('data:', '').trim();
+            if(!content){
+              continue;
+            }
+            if(!content.endsWith('}')){
+              buffer = buffer + line;
+              continue;
+            }
+            buffer = "";
+            renderText(content)
+          } else {
+            if(!line) {
+              continue;
+            }
+            if(!line.endsWith('}')) {
+              buffer = buffer + line;
+              continue;
+            }
+            buffer = "";
+            renderText(line)
+          }
+        }
+      }
+    } catch (e) {
+      console.error('Generation error:', e);
+      writeText.value += '\n\n[生成出错]';
+    } finally {
+      // 若服务端结束未触发 MESSAGE_END，兜底关闭生成状态
+      generating.value = false;
+    }
+  }
+
+  /**
+   * 渲染文本
+   *
+   * @param item
+   */
+  function renderText(item) {
+    try {
+      let parse = JSON.parse(item);
+      if(parse.event == 'NODE_FINISHED'){
+        afterNodeFinished.value = true;
+        return;
+      }
+      if (parse.event == 'MESSAGE') {
+        aiText.value = '';
+        if (afterNodeFinished.value) {
+          writeText.value = parse.data.message;
+          afterNodeFinished.value = false;
+        } else {
+          writeText.value += parse.data.message;
+        }
+        generating.value = true;
+        polishLoading.value = true;
+        nextTick(scrollToBottom);
+      }
+      if (parse.event == 'MESSAGE_END') {
+        generating.value = false;
+        if (activeVersion.value === CURRENT_VERSION_KEY) {
+          originalContent.value = writeText.value;
+        }
+        nextTick(scrollToBottom);
+      }
+      if (parse.event == 'ERROR') {
+        writeText.value = parse.data.message ? parse.data.message : '生成失败，请稍后重试！';
+        generating.value = false;
+        polishLoading.value = false;
+        nextTick(scrollToBottom);
+      }
+      
+      //开始加点
+      if (parse.event === 'NODE_STARTED') {
+        if (!parse.data || parse.data.type !== 'end') {
+          if (parse.data.type === 'llm' || parse.data.type === 'reply') {
+            aiText.value = '正在构建响应内容';
+          }
+        }
+      }
+      //流程结束节点
+      if (parse.event == 'FLOW_FINISHED') {
+        if (parse.data && !parse.data.success) {
+          writeText.value = parse.data.message ? parse.data.message : '生成失败，请稍后重试！';
+        }
+        generating.value = false;
+        polishLoading.value = false;
+      }
+    } catch (error) {
+      console.log('Error parsing update:', error);
+    }
+  }
+
+  /**
+   * 代码块
+   * @param str
+   * @param lang
+   */
+  function highlightBlock(str: string, lang?: string) {
+    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`;
+  }
+
+
+  /**
+   * 润色
+   */
+  async function handlePolish() {
+    if (!writeText.value) {
+      createMessage.warning('暂无内容可润色');
+      return;
+    }
+    if (generating.value || polishLoading.value) {
+      return;
+    }
+    polishLoading.value = true;
+    const data: any = {
+      prompt: writeText.value,
+      originalContent: '',
+      length: leftData.value.length,
+      format: leftData.value.format,
+      tone: leftData.value.tone,
+      language: leftData.value.language,
+      activeMode: 'polish',
+    };
+    try {
+      await onGenerate(data, 'polish');
+    } finally {
+      polishLoading.value = false;
+    }
+  }
+
+  /**
+   * 保存
+   */
+  async function handleSave() {
+    if (!writeText.value) {
+      createMessage.warning('暂无内容可保存');
+      return;
+    }
+    if (saving.value) {
+      return;
+    }
+    try {
+      saving.value = true;
+      await defHttp.post({ url: '/airag/app/save/article/write', params: { content: writeText.value } });
+      if (activeVersion.value === CURRENT_VERSION_KEY) {
+        originalContent.value = writeText.value;
+      }
+      initHistoryData();
+    } catch (e) {
+      createMessage.error('保存失败，请稍后重试');
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  /**
+   * 初始化历史信息
+   */
+  function initHistoryData() {
+    historyData.value = [];
+    defHttp.get({ url: "/airag/app/list/article/write" }, { isTransformResponse: false }).then((res)=>{
+      if(res.success){
+        historyData.value = res.result;
+      }
+    })
+  }
+
+  /**
+   * 版本删除
+   */
+  async function handleDeleteVersion() {
+    if (activeVersion.value === CURRENT_VERSION_KEY) {
+      return;
+    }
+    const target = historyData.value.find((item) => item.version === activeVersion.value);
+    if (!target) {
+      return;
+    }
+    Modal.confirm({
+      title: '删除版本',
+      content: '是否确认删除该版本？',
+      okText: '确定',
+      cancelText: '取消',
+      async onOk() {
+        try {
+          await defHttp.delete(
+            { url: '/airag/app/delete/article/write', params: { version: target.version } },
+            { joinParamsToUrl: true }
+          );
+          historyData.value = historyData.value.filter((item) => item.version !== target.version);
+          activeVersion.value = CURRENT_VERSION_KEY;
+          writeText.value = originalContent.value ?? '';
+        } catch (e) {
+          createMessage.error('删除失败，请稍后重试');
+        }
+      },
+    });
+  }
+
+  /**
+   * 版本切换事件
+   * @param value
+   */
+  function handleVersionChange(value: string) {
+    if (value === CURRENT_VERSION_KEY) {
+      activeVersion.value = value;
+      writeText.value = originalContent.value ?? '';
+      return;
+    }
+    const target = historyData.value.find((item) => item.version === value);
+    if (!target) {
+      return;
+    }
+    activeVersion.value = value;
+    writeText.value = target.content;
+  }
+  
+  onMounted(() => {
+    //初始化的时候加载历史版本
+    initHistoryData();
+  });
+</script>
+
+<style scoped lang="less">
+  .writer-wrap {
+    display: flex;
+    height: 100%;
+    padding: 16px;
+    gap: 16px;
+    background: #fff;
+  }
+
+  .sidebar {
+    width: 340px;
+    flex-shrink: 0;
+    border: 1px solid #eef0f5;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+    background: #fff;
+    overflow: visible;
+    position: sticky;
+    top: 16px;
+  }
+  /*begin  头部样式 */
+  .preview {
+    flex: 1;
+    border: 1px solid #eef0f5;
+    border-radius: 12px;
+    padding: 16px 20px;
+    overflow: auto;
+    background: #fafbff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+  }
+
+  .preview-header {
+    font-size: 14px;
+    color: #344767;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #eef0f5;
+    padding-bottom: 10px;
+  }
+  .preview-header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .preview-title-text {
+    font-weight: 500;
+    letter-spacing: 0.5px;
+  }
+
+  .preview-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .version-select {
+    min-width: 120px;
+  }
+  
+  .preview-action-btn {
+    padding: 0 14px;
+    font-size: 12px;
+    border-radius: 4px;
+    height: 26px;
+    line-height: 24px;
+  }
+
+  .custom-green-btn {
+    background-color: @primary-color;
+    border-color: @primary-color;
+    color: #ffffff;
+
+    &:hover,
+    &:focus {
+      background-color: @primary-color;
+      border-color: @primary-color;
+      color: #ffffff;
+    }
+  }
+
+  .preview-actions-icon {
+    font-size: 12px;
+    color: white;
+  }
+
+  .custom-save-btn, .version-delete-btn {
+    background-color: #ffffff;
+    border-color: @primary-color;
+    color: @primary-color;
+
+    &:hover,
+    &:focus {
+      background-color: fade(@primary-color, 10%);
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+
+    .preview-actions-icon {
+      color: @primary-color;
+    }
+  }
+  /*end  头部样式 */
+
+  /*begin 编辑器的样式*/
+  .markdown-container {
+    min-height: 300px;
+    padding: 8px 4px 16px 4px;
+    border-radius: 8px;
+    background-color: #fff;
+    cursor: text;
+    :deep(img) {
+      width: 40% !important;
+      max-width: 280px;
+      height: auto;
+      border-radius: 6px;
+      display: block;
+    }
+  }
+
+  .markdown-editor-container {
+    min-height: 300px;
+  }
+
+  :deep(.typing-dot) {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-left: 3px;
+    border-radius: 50%;
+    background-color: #999;
+    vertical-align: baseline;
+    animation: typing-dot 1.2s infinite ease-in-out;
+  }
+
+  @keyframes typing-dot {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.6);
+      opacity: 0.6;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  /*end 编辑器的样式*/
+</style>
diff --git a/src/views/super/airag/aiwriter/AiWriterLeft.vue b/src/views/super/airag/aiwriter/AiWriterLeft.vue
new file mode 100644
index 0000000..1d1f63e
--- /dev/null
+++ b/src/views/super/airag/aiwriter/AiWriterLeft.vue
@@ -0,0 +1,357 @@
+<template>
+  <div class="writer-sidebar">
+    <div class="mode-tabs">
+      <div class="tab-item" :class="{ active: activeMode === 'compose' }" @click="activeModeClick('compose')"> 撰写 </div>
+      <div class="tab-item" :class="{ active: activeMode === 'reply' }" @click="activeModeClick('reply')"> 回复 </div>
+    </div>
+
+    <div class="form-content">
+      <a-form layout="vertical">
+        <template v-if="activeMode === 'reply'">
+          <a-form-item>
+            <template #label>
+              <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
+                <span>原文</span>
+                <span class="example-link" @click="fillExample">示例</span>
+              </div>
+            </template>
+            <a-textarea
+              v-model:value="formData.originalContent"
+              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :maxlength="500"
+              show-count
+              placeholder="请输入原文"
+            />
+          </a-form-item>
+          <a-form-item label="回复内容">
+            <a-textarea
+              v-model:value="formData.prompt"
+              :auto-size="{ minRows: 4, maxRows: 6 }"
+              :maxlength="500"
+              show-count
+              placeholder="请输入回复内容"
+            />
+          </a-form-item>
+        </template>
+        <template v-else>
+          <a-form-item>
+            <template #label>
+              <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
+                <span>写作内容</span>
+                <span class="example-link" @click="fillComposeExample">示例</span>
+              </div>
+            </template>
+            <a-textarea
+              v-model:value="formData.prompt"
+              :auto-size="{ minRows: 6, maxRows: 12 }"
+              :maxlength="500"
+              show-count
+              placeholder="请输入写作内容"
+            />
+          </a-form-item>
+        </template>
+
+        <a-form-item label="长度">
+          <div class="tag-group">
+            <span
+              v-for="item in options.length"
+              :key="item.value"
+              class="custom-tag"
+              :class="{ active: formData.length === item.value }"
+              @click="formData.length = item.value"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </a-form-item>
+
+        <a-form-item label="格式">
+          <div class="tag-group">
+            <span
+              v-for="item in options.format"
+              :key="item.value"
+              class="custom-tag"
+              :class="{ active: formData.format === item.value }"
+              @click="formData.format = item.value"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </a-form-item>
+
+        <a-form-item label="语气">
+          <div class="tag-group">
+            <span
+              v-for="item in options.tone"
+              :key="item.value"
+              class="custom-tag"
+              :class="{ active: formData.tone === item.value }"
+              @click="formData.tone = item.value"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </a-form-item>
+
+        <a-form-item label="语言">
+          <div class="tag-group">
+            <span
+              v-for="item in options.language"
+              :key="item.value"
+              class="custom-tag"
+              :class="{ active: formData.language === item.value }"
+              @click="formData.language = item.value"
+            >
+              {{ item.label }}
+            </span>
+          </div>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <div class="action-footer">
+      <a-button @click="handleReset" style="margin-right: 10px">重置</a-button>
+      <a-button type="primary" @click="handleGenerate">生成</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['generate', 'reset', 'update:modelValue']);
+  const { createMessage } = useMessage();
+  const activeMode = ref('compose');
+
+  const formData = reactive({
+    prompt: '',
+    originalContent: '',
+    length: '自动',
+    format: '自动',
+    tone: '自动',
+    language: '自动',
+    activeMode: 'compose',
+  });
+
+  const options = {
+    //长度
+    length: [
+      { label: '自动', value: '自动' },
+      { label: '短', value: '短' },
+      { label: '中等', value: '中等' },
+      { label: '长', value: '长' },
+    ],
+    //格式化
+    format: [
+      { label: '自动', value: '自动' },
+      { label: '电子邮件', value: '电子邮件' },
+      { label: '消息', value: '消息' },
+      { label: '评论', value: '评论' },
+      { label: '段落', value: '段落' },
+      { label: '文章', value: '文章' },
+      { label: '博客文章', value: '博客文章' },
+      { label: '想法', value: '想法' },
+      { label: '大纲', value: '大纲' },
+    ],
+    //语气
+    tone: [
+      { label: '自动', value: '自动' },
+      { label: '友善', value: '友善' },
+      { label: '随意', value: '随意' },
+      { label: '专业', value: '专业' },
+      { label: '诙谐', value: '诙谐' },
+      { label: '有趣', value: '有趣' },
+      { label: '正式', value: '正式' },
+    ],
+    //语言
+    language: [
+      { label: '自动', value: '自动' },
+      { label: '中文', value: '中文' },
+      { label: '英文', value: '英文' },
+      { label: '韩语', value: '韩语' },
+      { label: '日语', value: '日语' },
+    ],
+  };
+
+  /**
+   * 撰写和回复切换事件
+   * @param type
+   */
+  function activeModeClick(type) {
+    activeMode.value = type;
+    formData.originalContent = '';
+    formData.prompt = '';
+  }
+
+  /**
+   * 重置
+   */
+  function handleReset() {
+    formData.originalContent = '';
+    formData.prompt = '';
+    formData.length = '自动';
+    formData.format = '自动';
+    formData.tone = '自动';
+    formData.language = '自动';
+    formData.activeMode = 'compose';
+    emit('reset');
+  }
+
+  /**
+   * 生成
+   */
+  function handleGenerate() {
+    if (activeMode.value === 'compose' && !formData.prompt) {
+      createMessage.warn('请填写写作内容!');
+      return;
+    }
+    if (activeMode.value === 'reply' && !formData.prompt) {
+      createMessage.warn('请填写原文!');
+      return;
+    }
+    if (activeMode.value === 'reply' && !formData.originalContent) {
+      createMessage.warn('请填写回复!');
+      return;
+    }
+    formData.activeMode = activeMode.value;
+    emit('generate', { ...formData, mode: activeMode.value });
+  }
+
+  /**
+   * 回复示例
+   */
+  function fillExample() {
+    formData.originalContent = '关于下周一项目进度会议的安排通知。';
+    formData.prompt = '我已收到，下周一会准时前往';
+  }
+
+  /**
+   * 创作示例
+   */
+  function fillComposeExample() {
+    formData.prompt = '介绍一下 Vue3 的整体架构';
+    formData.originalContent = '';
+  }
+</script>
+
+<style scoped lang="less">
+  .writer-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+
+    .mode-tabs {
+      display: flex;
+      background: #f1f3f6;
+      border-radius: 8px;
+      padding: 4px;
+      margin-bottom: 16px;
+      flex-shrink: 0;
+      position: sticky;
+      top: 0;
+      z-index: 5;
+
+      .tab-item {
+        flex: 1;
+        text-align: center;
+        padding: 6px 0;
+        font-size: 14px;
+        color: #666;
+        cursor: pointer;
+        border-radius: 6px;
+        transition: all 0.3s;
+
+        &.active {
+          background: #fff;
+          color: #1677ff;
+          font-weight: 500;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+
+    .form-content {
+      flex: 1;
+      overflow-y: auto;
+      padding-right: 8px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 2px;
+      }
+    }
+
+    .action-footer {
+      padding-top: 16px;
+      display: flex;
+      justify-content: center;
+      border-top: 1px solid #f0f0f0;
+      flex-shrink: 0;
+      position: sticky;
+      bottom: 0;
+      background: #fff;
+      z-index: 5;
+    }
+
+    .tag-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .custom-tag {
+      padding: 2px 10px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #666;
+      cursor: pointer;
+      transition: all 0.3s;
+      background: #fff;
+
+      &:hover {
+        color: #1677ff;
+        border-color: #1677ff;
+      }
+
+      &.active {
+        color: #1677ff;
+        border-color: #1677ff;
+        background: #e6f7ff;
+      }
+    }
+
+    .example-link {
+      color: #1677ff;
+      cursor: pointer;
+      font-size: 12px;
+      float: right;
+    }
+
+    :deep(.ant-form-item-label) {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      > label {
+        flex: 1;
+      }
+
+      .ant-form-item-extra {
+        min-height: unset;
+      }
+    }
+
+    // Custom fix to put extra in label line if possible, but Ant Design puts extra below.
+    // So I used a slot in label or handled it via absolute positioning if needed.
+    // But standard ant form label slot might be better.
+    // Above I used #extra slot which goes below.
+    // I put example-link in #extra slot of form-item in template.
+    // Actually, I should probably put it in the label slot if I want it on the same line.
+  }
+</style>
diff --git a/src/views/super/airag/ocr/AiOcr.api.ts b/src/views/super/airag/ocr/AiOcr.api.ts
new file mode 100644
index 0000000..4f4d2ec
--- /dev/null
+++ b/src/views/super/airag/ocr/AiOcr.api.ts
@@ -0,0 +1,46 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+export enum Api {
+  list = '/airag/ocr/list',
+  add = '/airag/ocr/add',
+  edit = '/airag/ocr/edit',
+  deleteById = '/airag/ocr/deleteById',
+  flowRun = '/airag/flow/run',
+}
+
+/**
+ * 查询ocr列表
+ *
+ * @param params
+ */
+export const list = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 添加Orc
+ * @param params
+ * @param handleSuccess
+ */
+export const addOcr = (params) => {
+  return defHttp.post({ url: Api.add, params });
+};
+
+/**
+ * 编辑Orc
+ * @param params
+ * @param handleSuccess
+ */
+export const editOcr = (params) => {
+  return defHttp.put({ url: Api.edit, params });
+};
+
+/**
+ * 根据id删除 Orc
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOcrById = (params) => {
+  return defHttp.delete({ url: Api.deleteById, params });
+};
diff --git a/src/views/super/airag/ocr/AiOcr.data.ts b/src/views/super/airag/ocr/AiOcr.data.ts
new file mode 100644
index 0000000..ffa5642
--- /dev/null
+++ b/src/views/super/airag/ocr/AiOcr.data.ts
@@ -0,0 +1,85 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+//ocr表格
+export const columns: BasicColumn[] = [
+  {
+    title: '编号',
+    dataIndex: 'id',
+    ifShow: false,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    ellipsis: true,
+    width: 300,
+  },
+  {
+    title: '提示词',
+    dataIndex: 'prompt',
+    ellipsis: true,
+    width: 300,
+  },
+];
+
+//ocr表单
+export const schemas: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '标题',
+    field: 'title',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '提示词',
+    field: 'prompt',
+    component: 'InputTextArea',
+    componentProps: {
+      row: 4,
+      autosize: { minRows: 4, maxRows: 6 },
+    },
+    required: true,
+  },
+];
+
+//ocr解析表单
+export const analysisSchemas: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '图片',
+    field: 'url',
+    component: 'JImageUpload',
+    required: true,
+  },
+  {
+    label: '提示词',
+    field: 'prompt',
+    component: 'InputTextArea',
+    componentProps: {
+      row: 2,
+      autosize: { minRows: 2, maxRows: 2 },
+      placeholder:"请填写提示词，如提取图片中的文字"
+    }
+  },
+  {
+    label: '解析结果',
+    field: 'analysisResult',
+    component: 'InputTextArea',
+    componentProps: {
+      row: 10,
+      autosize: { minRows: 10, maxRows: 10 },
+      readonly: true,
+      placeholder:"解析结果将在这里显示"
+    },
+  },
+];
diff --git a/src/views/super/airag/ocr/AiOcrList.vue b/src/views/super/airag/ocr/AiOcrList.vue
new file mode 100644
index 0000000..9657442
--- /dev/null
+++ b/src/views/super/airag/ocr/AiOcrList.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="ocr-page p-2">
+    <AiOcrAnalysisModal />
+<!--    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      &lt;!&ndash;插槽:table标题&ndash;&gt;
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate">新增</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>-->
+<!--    <AiOcrModal @register="registerModal" @success="reload()"></AiOcrModal>-->
+  </div>
+</template>
+<script lang="ts" name="site-list" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { list, deleteOcrById } from './AiOcr.api';
+  import { columns } from './AiOcr.data';
+  import AiOcrModal from './components/AiOcrModal.vue';
+  import AiOcrAnalysisModal from './components/AiOcrAnalysisModal.vue';
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerAnalysisModal, { openModal: openAnalysisModal }] = useModal();
+  
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      api: list,
+      columns,
+      useSearchForm: false,
+      pagination: false,
+      actionColumn: {
+        width: 120,
+      },
+      canResize: false,
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openModal(true, {});
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(id) {
+    await deleteOcrById({ id: id });
+    reload();
+  }
+
+  /**
+   * 解析
+   * @param record
+   */
+  function handleAnalysis(record){
+    openAnalysisModal(true,{
+      isUpdate: true,
+      record
+    })
+  }
+  
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '解析',
+        onClick: handleAnalysis.bind(null, record),
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          placement: 'left',
+          confirm: handleDelete.bind(null, record.id),
+        },
+      },
+    ];
+  }
+</script>
+<style lang="less" scoped>
+  .ocr-page{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+</style>
diff --git a/src/views/super/airag/ocr/components/AiOcrAnalysisModal.vue b/src/views/super/airag/ocr/components/AiOcrAnalysisModal.vue
new file mode 100644
index 0000000..5a92f57
--- /dev/null
+++ b/src/views/super/airag/ocr/components/AiOcrAnalysisModal.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="analysis-panel">
+    <div class="panel-header">
+      <div class="title">
+        <span class="icon-dot"></span>
+        <span class="main">智能 OCR 解析</span>
+        <span class="sub">上传图片，快速识别并结构化输出</span>
+      </div>
+      <a-button type="primary" size="large" class="parse-btn" :loading="loading" @click="analysisHandleClick">解析</a-button>
+    </div>
+    <div class="form-body">
+      <a-spin tip="解析中，请稍后" :spinning="loading">
+        <BasicForm @register="registerForm" />
+      </a-spin>
+    </div>
+  </div>
+</template>
+<script lang="ts" name="AiOcrAnalysis" setup>
+  import { ref, watch, PropType } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { analysisSchemas } from '../AiOcr.data';
+  import { Api } from '../AiOcr.api';
+  import { defHttp } from '@/utils/http/axios';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const loading = ref<boolean>(false);
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: analysisSchemas,
+    showActionButtonGroup: false,
+    layout: 'vertical',
+    wrapperCol: { span: 24 },
+  });
+
+  async function analysisHandleClick() {
+    const values = await validate();
+    loading.value = true;
+    await defHttp
+      .post(
+        {
+          url: Api.flowRun,
+          params: {
+            flowId: '1904779811574784002',
+            inputParams: {
+              content: values.prompt ? values.prompt: '解析图片中的文字',
+              images: values.url,
+            },
+            responseMode: 'blocking',
+          },
+          timeout: 5 * 60 * 1000,
+        },
+        {
+          isTransformResponse: false,
+        }
+      )
+      .then((res) => {
+        if (res.success) {
+          //update-begin---author:wangshuai---date:2026-01-14---for: OCR数据返回信息报错，增加try catch---
+          let text = res.result.data.replace(/\s+/g, '').replace('```json','').replace('```','');
+          let lastText = "";
+          try {
+            let parse = JSON.parse(text);
+            lastText = parse.text;
+          } catch (e) {
+            lastText = text;
+          }
+          //update-end---author:wangshuai---date:2026-01-14---for:  OCR数据返回信息报错，增加try catch---
+          setFieldsValue({ analysisResult: lastText });
+        } else {
+          createMessage.warning(res.message);
+        }
+        loading.value = false;
+      }).catch((res)=>{
+          createMessage.warning(res.message);
+          loading.value = false;
+      });
+  }
+</script>
+
+<style lang="less" scoped>
+  .analysis-panel {
+    background: #fff;
+    padding: 20px;
+    border-radius: 16px;
+    border: 1px solid #e6f4ff;
+    box-shadow: 0 12px 30px rgba(22, 119, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.06);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+  }
+  .form-body {
+    flex: 1;
+    overflow: auto;
+  }
+  .title {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 10px;
+  }
+  .icon-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
+    box-shadow: 0 0 0 6px rgba(22, 119, 255, 0.08);
+  }
+  .main {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2328;
+  }
+  .sub {
+    font-size: 13px;
+    color: #86909c;
+  }
+  .parse-btn {
+    border-radius: 8px;
+    box-shadow: 0 6px 16px rgba(22, 119, 255, 0.25);
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 16px;
+  }
+  :deep(.ant-form-item-label > label) {
+    color: #3a3a3a;
+    font-weight: 500;
+  }
+
+
+  :deep(.ant-input-textarea-show-count > .ant-input-textarea) {
+    background: #fafafa;
+    border-radius: 10px;
+    border: 1px solid #e5e6eb;
+    transition: all .2s ease;
+  }
+  :deep(.ant-input:focus),
+  :deep(textarea.ant-input:focus),
+  :deep(.ant-input-focused) {
+    border-color: #1677ff !important;
+    box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
+    background: #fff;
+  }
+  :deep(.ant-upload) {
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/views/super/airag/ocr/components/AiOcrModal.vue b/src/views/super/airag/ocr/components/AiOcrModal.vue
new file mode 100644
index 0000000..cbb70da
--- /dev/null
+++ b/src/views/super/airag/ocr/components/AiOcrModal.vue
@@ -0,0 +1,62 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" name="AiOcrModal" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { schemas } from '../AiOcr.data';
+  import {addOcr, editOcr} from "../AiOcr.api";
+  const title = ref<string>('新增');
+  const isUpdate = ref<boolean>();
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: schemas,
+    showActionButtonGroup: false,
+    layout: 'vertical',
+    wrapperCol: { span: 24 },
+  });
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: true, bodyStyle:{ padding:'24px'} });
+    isUpdate.value = !!data?.isUpdate;
+    title.value = !unref(isUpdate) ? '新增' : '编辑'
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    if(unref(isUpdate)){
+      //表单赋值
+      await setFieldsValue({ ...data.record });
+    }
+  });
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      if(unref(isUpdate)){
+        await editOcr(values);
+      } else{
+        await addOcr(values);
+      }
+      setModalProps({ confirmLoading: true });
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+:deep(.ant-modal-body){
+  padding: 24px !important;
+}
+</style>
diff --git a/src/views/super/airag/wordtpl/EoaWordTemplate.api.ts b/src/views/super/airag/wordtpl/EoaWordTemplate.api.ts
new file mode 100644
index 0000000..7e8c660
--- /dev/null
+++ b/src/views/super/airag/wordtpl/EoaWordTemplate.api.ts
@@ -0,0 +1,127 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { downloadFile } from '/@/api/common/api';
+import { message } from 'ant-design-vue';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/airag/word/list',
+  save = '/airag/word/add',
+  edit = '/airag/word/edit',
+  deleteOne = '/airag/word/delete',
+  deleteBatch = '/airag/word/deleteBatch',
+  downloadTpl = '/airag/word/download',
+  parseFile = '/airag/word/parse/file',
+  generateWord = '/airag/word/generate/word',
+  generateResume = '/airag/flow/run',
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 下载模版
+ * @param params
+ */
+export const downloadTpl = (params) => {
+  return downloadFile(Api.downloadTpl, params.name + '.docx', { id: params.id });
+};
+
+/**
+ * 生成word
+ * @param params
+ */
+export const generateWord = (fileName, params) => {
+  return defHttp
+    .post(
+      {
+        url: Api.generateWord,
+        params: params,
+        responseType: 'blob',
+      },
+      { isTransformResponse: false }
+    )
+    .then((data) => {
+      if (!data || data.size === 0) {
+        message.warning('文件下载失败');
+        return;
+      }
+      if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        window.navigator.msSaveBlob(new Blob([data]), fileName);
+      } else {
+        const url = window.URL.createObjectURL(new Blob([data]));
+        const link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = url;
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); //下载完成移除元素
+        window.URL.revokeObjectURL(url); //释放掉blob对象
+      }
+    });
+};
+
+/**
+ * 生成简历
+ * @param params
+ */
+export const generateResume = (params, handleSuccess) => {
+  return defHttp
+    .post(
+      {
+        url: Api.generateResume,
+        params: params,
+        timeout: 120000,
+        timeoutErrorMessage: '同步数据库超时，已自动刷新',
+      },
+      { isTransformResponse: false }
+    )
+    .then((value) => {
+      handleSuccess(value);
+    });
+};
+
+/**
+ * 解析word文档地址
+ * @param params
+ */
+export const parseFileUrl = Api.parseFile;
diff --git a/src/views/super/airag/wordtpl/EoaWordTemplate.data.ts b/src/views/super/airag/wordtpl/EoaWordTemplate.data.ts
new file mode 100644
index 0000000..f9df251
--- /dev/null
+++ b/src/views/super/airag/wordtpl/EoaWordTemplate.data.ts
@@ -0,0 +1,176 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '模版名称',
+    align: 'center',
+    dataIndex: 'name',
+  },
+  {
+    title: '模版编码',
+    align: 'center',
+    dataIndex: 'code',
+  },
+  // {
+  //   title: '页眉',
+  //   align: 'center',
+  //   dataIndex: 'header',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '页脚',
+  //   align: 'center',
+  //   dataIndex: 'footer',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '主体内容',
+  //   align: 'center',
+  //   dataIndex: 'main',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '页边距',
+  //   align: 'center',
+  //   dataIndex: 'margins',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '宽度',
+  //   align: 'center',
+  //   dataIndex: 'width',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '高度',
+  //   align: 'center',
+  //   dataIndex: 'height',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '纸张方向',
+  //   align: 'center',
+  //   dataIndex: 'paperDirection',
+  //   ifShow: false,
+  // },
+  // {
+  //   title: '水印',
+  //   align: 'center',
+  //   dataIndex: 'watermark',
+  //   ifShow: false,
+  // },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '模版名称',
+    field: 'name',
+    component: 'Input',
+  },
+  {
+    label: '模版编码',
+    field: 'code',
+    component: 'Input',
+  },
+];
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '模版名称',
+    field: 'name',
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => {
+      return [{ required: true, message: '请输入模版名称!' }];
+    },
+  },
+  {
+    label: '模版编码',
+    field: 'code',
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => {
+      return [
+        { required: true, message: '请输入模版编码!' },
+        { pattern: /^[A-Za-z_]+$/, message: '只能输入英文和下划线!' },
+      ];
+    },
+  },
+  {
+    label: '页眉',
+    field: 'header',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '页脚',
+    field: 'footer',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '主体内容',
+    field: 'main',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '页边距',
+    field: 'margins',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '宽度',
+    field: 'width',
+    component: 'InputNumber',
+    show: false,
+  },
+  {
+    label: '高度',
+    field: 'height',
+    component: 'InputNumber',
+    show: false,
+  },
+  {
+    label: '纸张方向',
+    field: 'paperDirection',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '水印',
+    field: 'watermark',
+    component: 'Input',
+    show: false,
+  },
+  // TODO 主键隐藏字段，目前写死为ID
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+];
+
+// 高级查询数据
+export const superQuerySchema = {
+  name: { title: '模版名称', order: 0, view: 'text', type: 'string' },
+  code: { title: '模版编码', order: 1, view: 'text', type: 'string' },
+  header: { title: '页眉', order: 2, view: 'text', type: 'string' },
+  footer: { title: '页脚', order: 3, view: 'text', type: 'string' },
+  main: { title: '主体内容', order: 4, view: 'text', type: 'string' },
+  margins: { title: '页边距', order: 5, view: 'text', type: 'string' },
+  width: { title: '宽度', order: 6, view: 'number', type: 'number' },
+  height: { title: '高度', order: 7, view: 'number', type: 'number' },
+  paperDirection: { title: '纸张方向', order: 8, view: 'text', type: 'string' },
+  watermark: { title: '水印', order: 9, view: 'text', type: 'string' },
+};
+
+/**
+ * 流程表单调用这个方法获取formSchema
+ * @param param
+ */
+export function getBpmFormSchema(_formData): FormSchema[] {
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return formSchema;
+}
diff --git a/src/views/super/airag/wordtpl/EoaWordTemplateList.vue b/src/views/super/airag/wordtpl/EoaWordTemplateList.vue
new file mode 100644
index 0000000..14a966f
--- /dev/null
+++ b/src/views/super/airag/wordtpl/EoaWordTemplateList.vue
@@ -0,0 +1,408 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" v-auth="'wordtpl:template:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
+
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button v-auth="'wordtpl:template:deleteBatch'"
+            >批量操作
+            <Icon icon="mdi:chevron-down" />
+          </a-button>
+        </a-dropdown>
+        <!-- 高级查询 -->
+        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
+        <a-button type="default" v-auth="'wordtpl:template:add'" @click="handleGenResume" preIcon="ant-design:plus-outlined"> 生成简历 </a-button>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+      <!--字段回显插槽-->
+      <template #bodyCell="{ column, record, index, text }"></template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <EoaWordTemplateModal @register="registerModal" @success="handleSuccess" />
+
+    <BasicModal
+      v-bind="$attrs"
+      :footer="null"
+      :showOkBtn="false"
+      :canFullscreen="false"
+      wrapClassName="jee-doc-design-modal no-bottom-scroll"
+      :style="{ top: '0', padding: '0' }"
+      :defaultFullscreen="true"
+      @register="designModal"
+      destroyOnClose
+    >
+      <DocDesign :content="wordDesignContent" :upload-file-url="parseFileUrl" @save="handleDesignSave" @download="handleDesignDownload" />
+    </BasicModal>
+
+    <BasicModal
+      v-bind="$attrs"
+      :canFullscreen="false"
+      @register="generateModal"
+      title="测试模版生成"
+      :width="528"
+      destroyOnClose
+      @ok="handleGenOk"
+    >
+      <a-form :model="genWordData" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
+        <a-form-item class="field-clos" :label="field" :name="field" v-for="field in tplFieldList">
+          <a-input v-model:value="genWordData[field]" style="width:90%" :placeholder="'请输入'+field"></a-input>
+        </a-form-item>
+      </a-form>
+    </BasicModal>
+
+    <BasicModal :loading="resumeLoading" v-bind="$attrs" :canFullscreen="false" @register="resumeModal" title="生成简历" :width="628" destroyOnClose @ok="handleGenResumeOk">
+      <a-form :model="genResumeData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+        <a-form-item class="field-clos" label="基础信息" name="content">
+          <a-input v-model:value="genResumeData.content" style="width: 90%" placeholder="请输入基础信息" />
+        </a-form-item>
+        <a-form-item class="field-clos" label="个人介绍" name="profile">
+          <a-textarea rows="8" v-model:value="genResumeData.profile" style="width: 90%" placeholder="请输入个人介绍" />
+        </a-form-item>
+      </a-form>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts" name="wordtpl-eoaWordTemplate" setup>
+  import { ref, reactive, computed, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { BasicModal, useModal } from '/src/components/Modal';
+  import { useListPage } from '/src/hooks/system/useListPage';
+  import EoaWordTemplateModal from './components/EoaWordTemplateModal.vue';
+  import { columns, searchFormSchema, superQuerySchema } from './EoaWordTemplate.data';
+  import { list, deleteOne, batchDelete, saveOrUpdate, downloadTpl, parseFileUrl, generateWord, generateResume } from './EoaWordTemplate.api';
+  import { useUserStore } from '/src/store/modules/user';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { getDateByPicker } from '/src/utils';
+  import DocDesign from '/src/components/wordtpl/DocDesign.vue';
+  import { BasicForm } from '@/components/Form';
+  //日期个性化选择
+  const fieldPickers = reactive({});
+  const queryParam = reactive<any>({});
+  const checkedKeys = ref<Array<string | number>>([]);
+  const userStore = useUserStore();
+  const { createMessage } = useMessage();
+  //注册model
+  const [registerModal, { openModal }] = useModal();
+  const [designModal, { openModal: openDesignModal, closeModal: closeDesignModal }] = useModal();
+  const [generateModal, { openModal: openGenModal, closeModal: closeGenModal }] = useModal();
+  const [resumeModal, { openModal: openResumeModal, closeModal: closeResumeModal }] = useModal();
+  //注册table数据
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      title: 'word模版管理',
+      api: list,
+      columns,
+      canResize: true,
+      formConfig: {
+        //labelWidth: 120,
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
+      },
+      actionColumn: {
+        width: 200,
+      },
+      beforeFetch: (params) => {
+        if (params && fieldPickers) {
+          for (let key in fieldPickers) {
+            if (params[key]) {
+              params[key] = getDateByPicker(params[key], fieldPickers[key]);
+            }
+          }
+        }
+        return Object.assign(params, queryParam);
+      },
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  const wordDesignContent = reactive({});
+
+  const currentTpl = reactive({});
+  const genWordData = reactive({});
+  const tplFieldList = reactive([]);
+  const genResumeData = reactive({
+    content: '张三；电话：186xxxxxxxx；邮箱：zhangsan@ex.com',
+    profile: '拥有13年开发经验，8年项目管理经验，6年系统架构经验，曾在多个平台级产品中担任核心负责人，具备从0到1搭建平台、从1到100推动演进的能力。',
+  });
+  const resumeLoading = ref(false);
+
+  // 高级查询配置
+  const superQueryConfig = reactive(superQuerySchema);
+
+  /**
+   * 高级查询事件
+   */
+  function handleSuperQuery(params) {
+    Object.keys(params).map((k) => {
+      queryParam[k] = params[k];
+    });
+    reload();
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 生成简历事件
+   */
+  function handleGenResume() {
+    openResumeModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+
+  function handleDesign(record: Recordable) {
+    Object.keys(record).map((k) => {
+      wordDesignContent[k] = record[k];
+    });
+    openDesignModal(true, {
+      record,
+    });
+  }
+
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+
+  function handleGenWord(record: Recordable) {
+    extractTplFields(record);
+    if(tplFieldList.length > 0){
+      // 如果有字段需要填写，则打开生成模版的弹窗
+      currentTpl.id = record.id;
+      currentTpl.name = record.name;
+      Object.keys(genWordData).forEach((key) => delete genWordData[key]);
+      openGenModal(true, {
+        record,
+      });
+      return;
+    } else {
+      // 如果没有字段需要填写，则直接生成word
+      const params = {
+        templateId: record.id,
+        data: {},
+      };
+      generateWord(record.name + '.docx', params);
+    }
+  }
+
+  function handleGenOk() {
+    const params = {
+      templateId: currentTpl.id,
+      data: genWordData,
+    };
+    generateWord(currentTpl.name + '.docx', params);
+    closeGenModal();
+  }
+
+  function handleGenResumeOk() {
+    let params = {
+      flowId: '1952634605517447170',
+      inputParams: genResumeData,
+      responseMode: 'blocking',
+    };
+    resumeLoading.value = true;
+    generateResume(params, (resp) => {
+      if(resp && resp.success){
+        closeResumeModal();
+        resumeLoading.value = false;
+        reload();
+      }else{
+        createMessage.error('生成简历失败: ' + resp.message);
+        resumeLoading.value = false;
+      }
+    });
+  }
+
+  function extractTplFields(record) {
+    const fields = new Set<string>();
+    if (record.main) {
+      let mainContent = [];
+      // 如果record.main是string
+      if (typeof record.main === 'string') {
+        mainContent = JSON.parse(record.main);
+      } else {
+        mainContent = record.main;
+      }
+      // 先拼接所有 value
+      let contentStr = '';
+      mainContent.forEach((item) => {
+        if (typeof item.value === 'string' && (!item.type || item.type === '')) {
+          contentStr += item.value;
+        }
+      });
+      // 统一正则提取
+      const matches = contentStr.match(/{{(.*?)}}/g);
+      if (matches) {
+        matches.forEach((m) => {
+          const field = m.replace(/[{}]/g, '');
+          fields.add(field);
+        });
+      }
+    }
+    tplFieldList.splice(0, tplFieldList.length, ...Array.from(fields));
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        auth: 'wordtpl:template:edit',
+      },
+      {
+        label: '设计',
+        onClick: handleDesign.bind(null, record),
+        auth: 'wordtpl:template:design',
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '生成word',
+        onClick: handleGenWord.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+        auth: 'wordtpl:template:delete',
+      },
+    ];
+  }
+
+  /**
+   * 设计器保存事件
+   * @param content
+   */
+  function handleDesignSave(content) {
+    console.log('表单数据', content);
+    saveOrUpdate(content, true)
+      .then((data) => {
+        // closeDesignModal();
+        reload();
+      })
+      .catch((err) => {
+        createMessage.error('保存失败: ' + err.message);
+      });
+  }
+
+  /**
+   * 设计器下载事件
+   * @param content
+   */
+  function handleDesignDownload(content) {
+    downloadTpl(content);
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  .jee-doc-design-modal {
+    &.no-bottom-scroll {
+      .scrollbar__bar {
+        &.is-horizontal {
+          display: none;
+        }
+      }
+    }
+    .ant-modal-header {
+      padding: 0 !important;
+    }
+    .ant-modal-body > .scrollbar {
+      padding-top: 0;
+    }
+    .jeecg-modal-content > .scroll-container {
+      padding: 0 !important;
+    }
+  }
+</style>
+<style lang="less">
+  .jee-doc-design-modal .scroll-container {
+    height: 100vh !important;
+  }
+</style>
diff --git a/src/views/super/airag/wordtpl/components/EoaWordTemplateForm.vue b/src/views/super/airag/wordtpl/components/EoaWordTemplateForm.vue
new file mode 100644
index 0000000..4bc43f7
--- /dev/null
+++ b/src/views/super/airag/wordtpl/components/EoaWordTemplateForm.vue
@@ -0,0 +1,70 @@
+<template>
+  <div style="min-height: 400px">
+    <BasicForm @register="registerForm"></BasicForm>
+    <div style="width: 100%; text-align: center" v-if="!formDisabled">
+      <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { computed, defineComponent } from 'vue';
+  import { defHttp } from '/src/utils/http/axios';
+  import { propTypes } from '/src/utils/propTypes';
+  import { getBpmFormSchema } from '../EoaWordTemplate.data';
+  import { saveOrUpdate } from '../EoaWordTemplate.api';
+
+  export default defineComponent({
+    name: 'EoaWordTemplateForm',
+    components: {
+      BasicForm,
+    },
+    props: {
+      formData: propTypes.object.def({}),
+      formBpm: propTypes.bool.def(true),
+    },
+    setup(props) {
+      const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({
+        labelWidth: 150,
+        schemas: getBpmFormSchema(props.formData),
+        showActionButtonGroup: false,
+        baseColProps: { span: 24 },
+      });
+
+      const formDisabled = computed(() => {
+        if (props.formData.disabled === false) {
+          return false;
+        }
+        return true;
+      });
+
+      let formData = {};
+      const queryByIdUrl = '/wordtpl/eoaWordTemplate/queryById';
+      async function initFormData() {
+        let params = { id: props.formData.dataId };
+        const data = await defHttp.get({ url: queryByIdUrl, params });
+        formData = { ...data };
+        //设置表单的值
+        await setFieldsValue(formData);
+        //默认是禁用
+        await setProps({ disabled: formDisabled.value });
+      }
+
+      async function submitForm() {
+        let data = getFieldsValue();
+        let params = Object.assign({}, formData, data);
+        console.log('表单数据', params);
+        await saveOrUpdate(params, true);
+      }
+
+      initFormData();
+
+      return {
+        registerForm,
+        formDisabled,
+        submitForm,
+      };
+    },
+  });
+</script>
diff --git a/src/views/super/airag/wordtpl/components/EoaWordTemplateModal.vue b/src/views/super/airag/wordtpl/components/EoaWordTemplateModal.vue
new file mode 100644
index 0000000..5fa196e
--- /dev/null
+++ b/src/views/super/airag/wordtpl/components/EoaWordTemplateModal.vue
@@ -0,0 +1,103 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
+    <BasicForm @register="registerForm" name="EoaWordTemplateForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { formSchema } from '../EoaWordTemplate.data';
+  import { saveOrUpdate } from '../EoaWordTemplate.api';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { getDateByPicker } from '/src/utils';
+  const { createMessage } = useMessage();
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const isDetail = ref(false);
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, scrollToField, updateSchema }] = useForm({
+    labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.showFooter;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    updateSchema([
+      {
+        field: 'code',
+        ifShow: !unref(isUpdate),
+      },
+    ]);
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+  });
+  //日期个性化选择
+  const fieldPickers = reactive({});
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      // 预处理日期数据
+      changeDateValue(values);
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 处理日期值
+   * @param formData 表单数据
+   */
+  const changeDateValue = (formData) => {
+    if (formData && fieldPickers) {
+      for (let key in fieldPickers) {
+        if (formData[key]) {
+          formData[key] = getDateByPicker(formData[key], fieldPickers[key]);
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 时间和数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/super/online/cgform/CgformCopyList.vue b/src/views/super/online/cgform/CgformCopyList.vue
new file mode 100644
index 0000000..bab1feb
--- /dev/null
+++ b/src/views/super/online/cgform/CgformCopyList.vue
@@ -0,0 +1,125 @@
+<template>
+  <div :class="prefixCls">
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button @click="onShowCustomButton" type="primary" preIcon="ant-design:highlight">自定义按钮</a-button>
+        <a-button @click="onShowEnhanceJs" type="primary" preIcon="ant-design:strikethrough">JS增强</a-button>
+        <a-button @click="onShowEnhanceSql" type="primary" preIcon="ant-design:filter">SQL增强</a-button>
+        <a-button @click="onShowEnhanceJava" type="primary" preIcon="ant-design:tool">Java增强</a-button>
+      </template>
+
+      <template #dbSync="{ text }">
+        <span v-if="text === 'Y'" style="color: limegreen">已同步</span>
+        <span v-if="text === 'N'" style="color: red">未同步</span>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+  <CgformModal @register="registerCgformModal" :actionButton="false" @success="reload" />
+  <EnhanceJsModal @register="registerEnhanceJsModal" />
+  <EnhanceJavaModal @register="registerEnhanceJavaModal" />
+  <EnhanceSqlModal @register="registerEnhanceSqlModal" />
+  <DbToOnlineModal @register="registerDbToOnlineModal" @success="reload" />
+  <CustomButtonList @register="registerCustomButtonModal" />
+  <AuthManagerDrawer @register="registerAuthManagerDrawer" />
+  <AuthSetterModal @register="registerAuthSetterModal" />
+  <CgformAddressModal @register="registerAddressModal" />
+</template>
+
+<script lang="ts">
+  import { watch, provide, defineComponent } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import CgformModal from './components/CgformModal.vue';
+  import DbToOnlineModal from './components/DbToOnlineModal.vue';
+  import CustomButtonList from './components/button/CustomButtonList.vue';
+  import EnhanceJsModal from './components/enhance/EnhanceJsModal.vue';
+  import EnhanceJavaModal from './components/enhance/EnhanceJavaModal.vue';
+  import EnhanceSqlModal from './components/enhance/EnhanceSqlModal.vue';
+  import AuthManagerDrawer from './components/auth/AuthManagerDrawer.vue';
+  import AuthSetterModal from './components/auth/AuthSetterModal.vue';
+  import CgformAddressModal from "./components/CgformAddressModal.vue";
+  import { useCgformList } from './hooks/useCgformList';
+  import { CgformPageType } from './types';
+
+  // noinspection JSUnusedGlobalSymbols
+  export default defineComponent({
+    name: 'CgformCopyList',
+    components: {
+      BasicTable,
+      TableAction,
+      CgformModal,
+      DbToOnlineModal,
+      CustomButtonList,
+      EnhanceJsModal,
+      EnhanceJavaModal,
+      EnhanceSqlModal,
+      AuthManagerDrawer,
+      AuthSetterModal,
+      CgformAddressModal,
+    },
+    setup() {
+      const pageType = CgformPageType.copy;
+      provide('cgformPageType', pageType);
+      const {
+        router,
+        pageContext,
+        getTableAction,
+        getDropDownAction,
+        onShowCustomButton,
+        onShowEnhanceJs,
+        onShowEnhanceSql,
+        onShowEnhanceJava,
+        registerCustomButtonModal,
+        registerEnhanceJsModal,
+        registerEnhanceSqlModal,
+        registerEnhanceJavaModal,
+        registerAuthManagerDrawer,
+        registerAuthSetterModal,
+        registerCgformModal,
+        registerDbToOnlineModal,
+        registerAddressModal,
+      } = useCgformList({
+        pageType,
+        designScope: 'online-cgform-list',
+        columns: [
+          { title: '视图表名', dataIndex: 'tableName' },
+          { title: '视图表描述', dataIndex: 'tableTxt' },
+          { title: '原表版本', dataIndex: 'copyVersion' },
+          { title: '视图版本', dataIndex: 'tableVersion' },
+        ],
+        formSchemas: [{ label: '表名', field: 'tableName', component: 'JInput' }],
+      });
+      const { prefixCls, tableContext } = pageContext;
+      const [registerTable, { reload }, { rowSelection }] = tableContext;
+      watch(router.currentRoute, () => reload());
+      return {
+        prefixCls,
+        reload,
+        rowSelection,
+        getTableAction,
+        getDropDownAction,
+        onShowCustomButton,
+        onShowEnhanceJs,
+        onShowEnhanceSql,
+        onShowEnhanceJava,
+        registerCustomButtonModal,
+        registerEnhanceJsModal,
+        registerEnhanceSqlModal,
+        registerEnhanceJavaModal,
+        registerAuthManagerDrawer,
+        registerAuthSetterModal,
+        registerTable,
+        registerCgformModal,
+        registerDbToOnlineModal,
+        registerAddressModal,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/JOnlineSearchSelect.vue b/src/views/super/online/cgform/auto/comp/JOnlineSearchSelect.vue
new file mode 100644
index 0000000..73b8471
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/JOnlineSearchSelect.vue
@@ -0,0 +1,168 @@
+<!-- online查询条件中的下拉搜索 -->
+<template>
+  <a-select
+    :value="selected"
+    :placeholder="placeholder"
+    show-search
+    :default-active-first-option="false"
+    :show-arrow="true"
+    :filter-option="false"
+    :not-found-content="null"
+    @search="handleSearch"
+    @change="handleChange"
+    @popupScroll="handlePopupScroll"
+    allowClear
+  >
+    <a-select-option v-for="d in selectOptions" :key="d.value">
+      {{ d.text }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+  import { useDebounceFn } from '@vueuse/core';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage: $message } = useMessage();
+  import { watch, ref } from 'vue';
+
+  export default {
+    name: 'JOnlineSearchSelect',
+    props: {
+      placeholder: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      value: {
+        type: String,
+        required: false,
+      },
+      // online CgReport item id
+      fieldId: {
+        type: String,
+        required: true,
+      },
+    },
+    emits: ['update:value'],
+    setup(props, { emit }) {
+      let selected = ref('');
+      let selectOptions = ref([]);
+      let isHasData = true;
+      let scrollLoading = false;
+      let searchKeyword = '';
+      const pageNo = ref(1);
+
+      watch(
+        () => props.value,
+        (newVal) => {
+          if (!newVal) {
+            selected.value = undefined;
+          } else {
+            selected.value = newVal;
+          }
+        },
+        { immediate: true }
+      );
+
+      watch(
+        () => props.fieldId,
+        () => {
+          resetOptions();
+        },
+        { immediate: true }
+      );
+      /**
+       * 2024-07-17
+       * liaozhiyang
+       * 【TV360X-1813】online报表查询支持滚动加载
+       * */
+      const handleSearch = useDebounceFn((keyword) => {
+        searchKeyword = keyword;
+        pageNo.value = 1;
+        isHasData = true;
+        searchByKeyword(keyword);
+      }, 800);
+
+      /**
+       * 2024-07-17
+       * liaozhiyang
+       * 【TV360X-1813】online报表查询支持滚动加载
+       * */
+      async function searchByKeyword(keyword = '') {
+        let params = {
+          keyword: keyword,
+          fieldId: props.fieldId,
+          pageSize: 10,
+          pageNo: pageNo.value,
+        };
+        let url = `/online/cgreport/api/getReportDictList`;
+        await defHttp
+          .get({ url: url, params }, { isTransformResponse: false })
+          .then((res) => {
+            if (res.success) {
+              if (res.result && res.result.length > 0) {
+                if (pageNo.value == 1) {
+                  selectOptions.value = [...res.result];
+                } else {
+                  selectOptions.value.push(...res.result);
+                }
+                pageNo.value++;
+              } else {
+                if (pageNo.value == 1) {
+                  selectOptions.value = [];
+                }
+                isHasData = false;
+              }
+            } else {
+              $message.warning(res.message);
+            }
+          })
+          .catch(() => {
+            pageNo.value != 1 && pageNo.value--;
+          });
+      }
+
+      function handleChange(value) {
+        emit('update:value', value);
+        //点击clear按钮,重置下拉项
+        if (!value || value == '') {
+          resetOptions();
+        }
+      }
+      function resetOptions() {
+        selectOptions.value = [];
+        // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-1813】online报表查询支持滚动加载
+        pageNo.value = 1;
+        isHasData = true;
+        searchKeyword = '';
+        // update-end--author:liaozhiyang---date:20240717---for：【TV360X-1813】online报表查询支持滚动加载
+        searchByKeyword();
+      }
+      /**
+       * 2024-07-17
+       * liaozhiyang
+       * 【TV360X-1813】online报表查询支持滚动加载
+       * */
+      const handlePopupScroll = async (e) => {
+        const { target } = e;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        if (!scrollLoading && isHasData && scrollTop + clientHeight >= scrollHeight - 10) {
+          scrollLoading = true;
+          searchByKeyword(searchKeyword).finally(() => {
+            scrollLoading = false;
+          });
+        }
+      };
+      return {
+        selectOptions,
+        handleSearch,
+        handleChange,
+        selected,
+        handlePopupScroll,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineForm.vue b/src/views/super/online/cgform/auto/comp/OnlineForm.vue
new file mode 100644
index 0000000..541aa59
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineForm.vue
@@ -0,0 +1,1806 @@
+<template>
+  <div ref="printRef" :id="tableName + '_form'" class="onlineFormWrap" :class="[`formTemplate_${formTemplate}`]">
+    <!-- update-begin--author:liaozhiyang---date:20240401---for：【QQYUN-8721】编辑页面不显示打印（配置了积木报表） -->
+    <!-- 积木报表的打印按钮，只有配置了 reportUrl 才显示 -->
+    <!-- <div v-if="!!dbData.id && !!onlineExtConfigJson.reportPrintShow" style="text-align: right;position: absolute;top: 6px;right: 20px;z-index: 999">
+      <PrinterOutlined title="打印" @click="onOpenReportPrint" style="font-size: 16px"/>
+    </div> -->
+     <!-- update-end--author:liaozhiyang---date:20240401---for：【QQYUN-8721】编辑页面不显示打印（配置了积木报表） -->
+
+    <BasicForm ref="onlineFormRef" @register="registerForm" :name="'online-form_' + tableName"/>
+
+    <!-- 子表 -->
+    <a-tabs v-model:activeKey="subActiveKey" v-if="themeTemplate !== ERP && hasSubTable">
+      <a-tab-pane v-for="(sub, index) in subTabInfo" :tab="sub.describe" :key="index + ''" :forceRender="true">
+        <div ref="subFormWrapRef" :style="{ 'overflow-y': 'auto', 'overflow-x': 'hidden', 'max-height': subFormHeight + 'px' }" v-if="sub.relationType == 1">
+          <!-- 子表-一对一 -->
+          <online-sub-form
+            :ref="refMap[sub.key]"
+            :table="sub.key"
+            :id="sub.id"
+            :disabled="onlineFormDisabled"
+            :form-template="formTemplate"
+            :main-id="getSubTableForeignKeyValue(sub.foreignKey)"
+            :properties="sub.properties"
+            :required-fields="sub.requiredFields"
+            :is-update="isUpdate"
+            @formChange="(arg) => handleSubFormChange(arg, sub.key)"
+          />
+        </div>
+        <div v-else>
+          <!-- 子表-一对多 -->
+          <JVxeTable
+            :ref="refMap[sub.key]"
+            toolbar
+            keep-source
+            :row-number="rowNumber"
+            row-selection
+            :height="
+              // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+              subTableHeight
+            "
+            :disabled="onlineFormDisabled"
+            :columns="sub.columns"
+            :dataSource="subDataSource[sub.key]"
+            :addBtnCfg="getSubAddBtnCfg"
+            :removeBtnCfg="getSubRemoveBtnCfg"
+            @valueChange="(event) => handleValueChange(event, sub.key)"
+            @removed="(event) => handleRemoved(event, sub.key)"
+            :authPre="getSubTableAuthPre(sub.key)"
+            @added="handleAdded(sub, $event)"
+            @executeFillRule="handleSubTableDefaultValue(sub, $event)">
+
+            <template #toolbarSuffix>
+              <!-- 子表内弹出新增按钮 -->
+              <a-button
+                  v-if="!onlineFormDisabled && getSubOpenAddBtnCfg.enabled && getBtnAuth('add', sub.key)"
+                  type="primary"
+                  :preIcon="getSubOpenAddBtnCfg.buttonIcon"
+                  @click="openSubFormModalForAdd(sub)"
+              >
+                <span>{{getSubOpenAddBtnCfg.buttonName}}</span>
+              </a-button>
+              <!-- 子表内弹出编辑按钮 -->
+              <a-button
+                  v-if="!onlineFormDisabled && getSubOpenEditBtnCfg.enabled && getBtnAuth('update', sub.key)"
+                  type="primary"
+                  :preIcon="getSubOpenEditBtnCfg.buttonIcon"
+                  @click="openSubFormModalForEdit(sub)"
+              >
+                <span>{{getSubOpenEditBtnCfg.buttonName}}</span>
+              </a-button>
+            </template>
+
+          </JVxeTable>
+
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <Loading :loading="loading" :absolute="false" />
+    <!-- 表单中可以通过slot自定义提交按钮，流程表单中用到 -->
+    <slot name="bottom"></slot>
+
+    <!-- 弹窗到另外一张表单用-可编辑表单 -->
+    <online-pop-modal formTableType="3" :request="popModalRequest" :id="popTableId" @register="registerPopModal" @success="getPopFormData" :taskId="taskId" :tableName="popTableName" topTip isVxeTableData></online-pop-modal>
+  </div>
+</template>
+
+<script>
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed, defineComponent, ref, unref, watch, nextTick, toRaw, reactive, inject, onMounted } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import {
+    SUBMIT_FLOW_ID,
+    SUBMIT_FLOW_KEY,
+    VALIDATE_FAILED,
+    ONL_FORM_TABLE_NAME,
+    ENHANCEJS
+  } from '../../types/onlineRender';
+  import { defHttp } from '/@/utils/http/axios';
+  import { pick, omit, cloneDeep, debounce } from 'lodash-es';
+  import { sleep } from '/@/utils';
+  import { useFormItems, getRefPromise, useOnlineFormContext } from '../../hooks/auto/useAutoForm';
+  import { Loading } from '/@/components/Loading';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import OnlineSubForm from './OnlineSubForm.vue';
+  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+  import {handleFillRuleWatchKeysMap, loadFormFieldsDefVal} from '../../util/FieldDefVal';
+  import { getToken } from '/@/utils/auth';
+  import { goJmReportViewPage } from '/@/utils'
+  import { PrinterOutlined } from '@ant-design/icons-vue';
+  import {useOnlineFormEvent, useOnlineEventContext} from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from './OnlinePopModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useCustomHook, GET_FUN_BODY_REG } from "../../hooks/auto/useCustomHook";
+  import { ERP } from "../../util/constant";
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { isArray } from '/@/utils/is';
+  import dayjs from 'dayjs';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  const urlObject = {
+    optPre: '/online/cgform/api/form/',
+    urlButtonAction: '/online/cgform/api/doButton',
+  };
+  export default {
+    name: 'OnlineForm',
+    components: {
+      BasicForm,
+      Loading,
+      OnlineSubForm,
+      PrinterOutlined,
+      OnlinePopModal
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isTree: {
+        type: Boolean,
+        default: false,
+      },
+      pidField: {
+        type: String,
+        default: '',
+      },
+      submitTip:{
+        type: Boolean,
+        default: true
+      },
+      izCopy:{
+        type: Boolean,
+        default: false
+      },
+      modalClass:{
+        type: String,
+        default: '',
+      },
+      themeTemplate: {
+        type: String,
+        default: '',
+      },
+      // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+      // erp风格会传来所有子表数据
+      subTableSource: {
+        default: () => ({}),
+      },
+      // update-end-author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+      // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+      // 流程会传taskId
+      taskId: {
+        type: String,
+      },
+      // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+      cgBIBtnMap: Object,
+      buttonSwitch: Object,
+    },
+    emits: ['success', 'rendered', 'close','validate'],
+    setup(props, { emit }) {
+      console.log('onlineForm-setup》》');
+      const { createMessage: $message } = useMessage();
+
+      // 打印表单ref
+      const printRef = ref(null);
+      // 表单ref
+      const onlineFormRef = ref(null);
+      const single = ref(true);
+      // 加载状态
+      const loading = ref(false);
+      // 显示提示
+      const showTip = ref(true);
+      const tableType = ref(1);
+      // 自定义弹窗的编辑提交地址
+      const customEditSubmitUrl = ref('');
+
+      // 表单提交且提交流程
+      const submitFlowFlag = ref(false);
+      const isUpdate = ref(false);
+      const { getIsMobile } = useAppInject();
+      const isSetFormLabelLength = ref(false);
+      // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      // erp子表获取外键
+      const foreignkey = inject("foreignkey", {value:{}});
+      // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      const rowNumber = ref(getIsMobile.value ? false : true);
+      const subFormWrapRef = ref(null);
+      let formItemData = null;
+      /**
+       * online表单扩展配置
+       */
+      const onlineExtConfigJson = reactive({
+        reportPrintShow: 0,
+        reportPrintUrl: '',
+        joinQuery: 0,
+        modelFullscreen: 0,
+        modalMinWidth: '',
+        commentStatus: 0
+      });
+
+      const {
+        onlineFormContext,
+        resetContext,
+
+        getSubAddBtnCfg,
+        getSubRemoveBtnCfg,
+        getSubOpenAddBtnCfg,
+        getSubOpenEditBtnCfg,
+      } = useOnlineFormContext(props);
+
+      const {
+        formSchemas,
+        defaultValueFields,
+        changeDataIfArray2String,
+        tableName,
+        dbData,
+        checkOnlyFieldValue,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+        subDataSource,
+        baseColProps,
+        createFormSchemas,
+        linkDownList,
+        fieldDisplayStatus,
+        labelCol,
+        wrapperCol,
+        labelWidth
+      } = useFormItems(props, onlineFormRef);
+      let { EnhanceJS, initCgEnhanceJs } = useEnhance(onlineFormContext, false);
+      // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-8405】移动端可视区展示三个字段
+      watch(
+        [subTabInfo, getIsMobile],
+        () => {
+          if (getIsMobile.value && subTabInfo.value.length) {
+            subTabInfo.value.forEach((item) => {
+              if (item.relationType != 1) {
+                item.columns.forEach((cItem) => {
+                  cItem.width = 100;
+                });
+              }
+            });
+          }
+        },
+        { immediate: true }
+      );
+      // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-8405】移动端可视区展示三个字段
+      // 新的js增强
+      const { executeJsEnhanced } = useCustomHook({}, onlineFormContext);
+
+      //表单配置
+      const [registerForm, { setProps, validate, resetFields, clearValidate, setFieldsValue, updateSchema, getFieldsValue, scrollToField }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        baseColProps: baseColProps,
+        // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        labelWidth,
+        // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        labelCol,
+        wrapperCol
+        // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      });
+
+      // 表单禁用
+      const onlineFormDisabled = ref(false);
+      function handleFormDisabled() {
+        let flag = props.disabled;
+        onlineFormDisabled.value = flag;
+        setProps({ disabled: flag });
+      }
+
+      /**
+       * status: 是否是修改页面
+       * record: 列表页面的行数据
+       * param： 树形列表添加子节点 传入的父级节点id
+       * */
+      async function show(status, record, param) {
+        console.log('新增编辑进入表单》》form', record);
+        //update-begin-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+        //如果是树 需要重新设置pid的formSchema 让他刷新树控件的数据
+        await updatePidFieldDict();
+        //update-end-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+        //重置自定义弹窗的表单提交地址
+        customEditSubmitUrl.value = '';
+        await resetFields();
+        // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9345】点击编辑再点击新增一下组件会直接触发验证
+        setTimeout(() => {
+          clearValidate();
+        }, 0);
+        // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9345】点击编辑再点击新增一下组件会直接触发验证
+        dbData.value = '';
+        let flag = unref(status);
+        isUpdate.value = flag;
+        // update-begin--author:liaozhiyang---date:20240301---for：【QQYUN-8401】新增弹窗一对一子表清空上次的数据
+        restSubForm();
+        // update-end--author:liaozhiyang---date:20240301---for：【QQYUN-8401】新增弹窗一对一子表清空上次的数据
+        if (flag) {
+          // 编辑页面
+          await edit(record);
+        } else {
+          // 新增页面
+          editSubVxeTableData();
+        }
+        nextTick(() => {
+          if (!flag && param) {
+            //如果是新增页面 且 param传入有值 需要设置表单
+            setFieldsValue(param);
+            props.izCopy && setSubTableFieldsValue(param);
+          }
+          handleDefaultValue();
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+          //处理表单的禁用效果
+          handleFormDisabled();
+          // update-begin--author:liaozhiyang---date:20240527---for【TV360X-114】一对一子表编辑时滚动条回到顶部
+          if (subFormWrapRef.value?.length) {
+            subFormWrapRef.value[0].scrollTop = 0;
+          }
+          // update-end--author:liaozhiyang---date:20240527---for【TV360X-114】一对一子表编辑时滚动条回到顶部
+        });
+      }
+      //update-begin-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+      /**
+       * 如果是树 需要重新设置pid的formSchema--dict信息 让他刷新树控件的数据
+       */
+      async function updatePidFieldDict() {
+        if (props.isTree === true) {
+          let pidFieldName = props.pidField;
+          let arr = formSchemas.value;
+          if (arr && arr.length > 0) {
+            //先拿到pid的 componentProps配置
+            let temp = arr.filter((item) => item.field === pidFieldName);
+            if (temp.length > 0) {
+              await updateSchema({
+                field: pidFieldName,
+                componentProps: {
+                  reload: new Date().getTime(),
+                  // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+                  hiddenNodeKey: '',
+                  // update-end--author:liaozhiyang---date:20240529---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+                },
+              });
+            }
+          } else {
+            console.log('没有拿到表单配置信息，可能是第一次打开新增页面');
+          }
+        }
+      }
+      //update-end-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+
+      const watchDefValParamMap = {
+        keys: [],
+        map: new Map(),
+        calcFn: new Map()
+      };
+
+      /**
+       * 当前表单默认值逻辑-进入新增页面触发
+       */
+      function handleDefaultValue() {
+        let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+        if (unref(isUpdate) === false) {
+          loadFormFieldsDefVal(fieldProperties, (values) => {
+            setFieldsValue(values);
+          });
+        }
+        // 处理填值规则默认值中的动态参数
+        const watchKeyMap = handleFillRuleWatchKeysMap(fieldProperties)
+        watchDefValParamMap.keys = [...watchKeyMap.keys()]
+        watchDefValParamMap.map = watchKeyMap
+        watchDefValParamMap.calcFn.clear()
+      }
+
+      /**
+       * 当前表单默认值逻辑-值变化时重新计算
+       */
+      function recalcDefaultValue(field, value) {
+        // 判断当前更改的字段是否在监听keys中
+        if (watchDefValParamMap.keys.includes(field)) {
+          let fn = watchDefValParamMap.calcFn.get(field)
+          if (typeof fn !== 'function') {
+            // 防抖100ms
+            fn = debounce(() => {
+              let fieldProp = toRaw(defaultValueFields[tableName.value]);
+              if (Array.isArray(fieldProp) && fieldProp.length > 0) {
+                const fieldKeys = watchDefValParamMap.map.get(field)
+                fieldProp = fieldProp.filter(item => {
+                  return fieldKeys.includes(item.field)
+                })
+              } else {
+                fieldProp = []
+              }
+              if (fieldProp.length > 0) {
+                let formData = getFieldsValue();
+                loadFormFieldsDefVal(fieldProp, (values) => setFieldsValue(values), formData);
+              }
+            }, 150)
+            watchDefValParamMap.calcFn.set(field, fn)
+          }
+          fn(value)
+        }
+      }
+
+      /**
+       * 子表默认值-子表新增行的时候触发此逻辑
+       */
+      function handleSubTableDefaultValue(sub, $event) {
+        //console.log('填值规则', sub, $event)
+        let subFieldProperties = toRaw(defaultValueFields[sub.key]);
+        loadFormFieldsDefVal(subFieldProperties, (values) => {
+          const { row, target } = $event;
+          let v = [{ rowKey: row.id, values: { ...values } }];
+          target.setValues(v);
+        });
+      }
+
+      async function edit(record) {
+        let formData = await getFormData(record.id);
+        //update-begin-author:taoyan date:2022-5-31 for: VUEN-1194 【online】字段填写完成后，设置权限不显示，再次编辑数据，则把原来的值替换成了空
+        dbData.value = Object.assign({}, record, formData);
+        //update-end-author:taoyan date:2022-5-31 for: VUEN-1194 【online】字段填写完成后，设置权限不显示，再次编辑数据，则把原来的值替换成了空
+        //表单赋值
+        let arr = realFormFieldNames.value;
+        //update-begin-author:taoyan date:2022-7-11 for:  2、online 查看详情还提示必填
+        let values = pick(formData, ...arr);
+        if(props.disabled){
+          //详情页面 将空的数据丢弃
+          Object.keys(values).map(k=>{
+            if(!values[k] && values[k]!==0 && values[k]!=='0'){
+              delete values[k]
+            }
+          })
+        }
+        await setFieldsValue(values);
+        // update-begin--author:liaozhiyang---date:20240523---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+        treeTablefilterNode(record.id);
+        // update-end--author:liaozhiyang---date:20240523---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+        //update-end-author:taoyan date:2022-7-11 for:  2、online 查看详情还提示必填
+        editSubVxeTableData(formData);
+      }
+
+      function editSubVxeTableData(record) {
+        if (!record) {
+          // 新增页面需要清空子表数据
+          record = {};
+        }
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            obj[key] = record[key] || [];
+          }
+          subDataSource.value = obj;
+        }
+      }
+      /**
+       * 2024-05-23
+       * liaozhiyang
+       * 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+       * @param id (当前节点)
+       */
+      function treeTablefilterNode(id) {
+        if (props.isTree === true) {
+          const { schema } = formItemData;
+          const properties = schema.properties ?? {};
+          const arr = Object.entries(properties);
+          if (arr.length) {
+            const selectTreeData = arr.find(([key, value]) => value.view === 'sel_tree' && value.pidComponent != null);
+            if (selectTreeData) {
+              const field = selectTreeData[0];
+              const compData = formSchemas.value.find((item) => item.field == field);
+              if (compData) {
+                updateSchema({
+                  field,
+                  componentProps: {
+                    hiddenNodeKey: id,
+                  },
+                });
+              }
+            }
+          }
+        }
+      }
+      /**
+       * 2024-03-01
+       * liaozhiyang
+       * 重置一对一子表form数据
+       */
+      function restSubForm(){
+        subTabInfo.value?.forEach(item=>{
+          if(item.relationType == 1){
+            // update-begin--author:liaozhiyang---date:20240321---for：【QQYUN-8563】erp风格配置的默认值表达式 未显示
+            if (refMap[item.key].value) {
+              refMap[item.key].value[0].resetFields();
+            }
+            // update-end--author:liaozhiyang---date:20240321---for：【QQYUN-5803】erp风格配置的默认值表达式 未显示
+          }
+        });
+      }
+      /**
+       * 设置子表的数据
+       */
+      function setSubTableFieldsValue(param){
+        //处理一对一子表数据
+        subTabInfo.value?.forEach(item=>{
+          if(item.relationType == 1){
+            if (refMap[item.key].value && param[item.key]) {
+              const oneDefaultValue = param[item.key] && param[item.key].length>0?param[item.key][0] : {};
+              setTimeout(()=>{
+                refMap[item.key].value[0].setValues(omit(oneDefaultValue, ['id']));
+              },20)
+            }
+          }
+        });
+        //处理一对多子表数据
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            let arr = [];
+            if(param[key]){
+              param[key].forEach(item=>{
+                arr.push(omit(item, ['id']));
+              });
+            }
+            obj[key] = arr;
+          }
+          subDataSource.value = obj;
+        }
+      }
+
+      let realFormFieldNames = computed(() => {
+        let arr = formSchemas.value;
+        let names = [];
+        for (let a of arr) {
+          names.push(a.field);
+        }
+        return names;
+      });
+
+      function getFormData(dataId) {
+        let url = `${urlObject.optPre}${props.id}/${dataId}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject();
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+
+      // 渲染表单
+      async function createRootProperties(data) {
+        tableType.value = data.head.tableType;
+        tableName.value = data.head.tableName;
+        single.value = data.head.tableType == 1;
+        handleExtConfigJson(data.head.extConfigJson);
+
+        createFormSchemas(data.schema.properties, data.schema.required, checkOnlyFieldValue, onlineExtConfigJson);
+        EnhanceJS = initCgEnhanceJs(data.enhanceJs);
+        emit('rendered', onlineExtConfigJson);
+
+        //监听表单改变事件
+        let formRefObject = await getRefPromise(onlineFormRef);
+        formRefObject.$formValueChange = (field, value, changeFormData) => {
+          onValuesChange(field, value);
+          if(changeFormData){
+            //如果存在其他表单控件的数据，直接设置该值
+            setFieldsValue(changeFormData)
+          }
+          onChangeEvent(field, value, changeFormData)
+          recalcDefaultValue(field, value)
+        };
+        // QQYUN-5315【online表单】online表单也需要支持hook增强
+        if(EnhanceJS && EnhanceJS["setup"]){
+          executeEnhanceFormJsHook(EnhanceJS["setup"])
+        }
+
+        formItemData = data;
+      }
+
+      //  触发表单change事件 区别于老的onlchange
+      function onChangeEvent(field, value, changeFormData) {
+        onlineFormContext.changEvent(field, value, changeFormData)
+      }
+
+      // 添加表单change事件
+      function onlineFormValueChange(callback) {
+        onlineFormContext.addObject2Context("changEvent", callback)
+      }
+
+      /**
+       * 处理扩展配置
+       */
+      function handleExtConfigJson(jsonStr) {
+        //update-begin-author:taoyan date:2023-2-6 for: QQYUN-4082 默认打开online表单，默认全屏
+        let extConfigJson = { reportPrintShow: 0, reportPrintUrl: '', joinQuery: 0, modelFullscreen: 0, modalMinWidth: '', commentStatus: 0, formLabelLength: null };
+        //update-end-author:taoyan date:2023-2-6 for: QQYUN-4082 默认打开online表单，默认全屏
+        if (jsonStr) {
+          extConfigJson = JSON.parse(jsonStr);
+          // update-begin--author:liaozhiyang---date:20240326---for：【QQYUN-8644】移动端效果关闭聊天窗口
+          if (getIsMobile.value) {
+            extConfigJson.commentStatus = 0;
+          }
+          // update-begin--author:liaozhiyang---date:20240326---for：【QQYUN-8644】移动端效果关闭聊天窗口
+        }
+        isSetFormLabelLength.value = !!extConfigJson.formLabelLength;
+        Object.keys(extConfigJson).map((k) => {
+          onlineExtConfigJson[k] = extConfigJson[k];
+        });
+      }
+
+      // 提交表单和流程
+      function submitFormAndFlow() {
+        submitFlowFlag.value = true;
+        handleSubmit();
+      }
+
+      function handleSubmit(tip = true) {
+        showTip.value = tip;
+        if (single.value === true) {
+          handleSingleSubmit();
+        } else {
+          handleOne2ManySubmit();
+        }
+      }
+      //校验必填
+      async function handleValidate() {
+        if (single.value === true) {
+          try {
+             await validate();
+          }catch (e) {
+            if (Array.isArray(e?.errorFields) && e.errorFields[0]) {
+              emit('validate',{passed:false})
+            }
+          }
+        } else {
+          await validateAll()
+        }
+      }
+
+      function handleOne2ManySubmit() {
+        validateAll().then((formData) => {
+          handleApplyRequest(formData);
+        });
+      }
+
+      // 触发所有表单验证
+      function validateAll() {
+        let temp = {};
+        return new Promise((resolve, reject) => {
+          // 验证主表表单
+          validate().then(
+            (values) => resolve(values),
+            ({ errorFields, values }) => {
+              reject({
+                // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+                errorFields,
+                values,
+                // update-end--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+                code: VALIDATE_FAILED,
+                key: tableName.value,
+                // 滚动到未通过校验的字段上
+                scrollToField: () => errorFields[0] && scrollToField(errorFields[0].name, { behavior: 'smooth', block: 'center' }),
+              });
+            }
+          );
+        })
+          .then((result) => {
+            Object.assign(temp, changeDataIfArray2String(result));
+            // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+            // erp弹窗下面就没子表
+            if (props.themeTemplate === ERP) {
+              return Promise.resolve({});
+            } else {
+              return validateSubTableFields();
+            }
+            // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+          })
+          .then((allTableData) => {
+            Object.assign(temp, allTableData);
+            return Promise.resolve(temp);
+          })
+          .catch((e) => {
+            if (e === VALIDATE_FAILED || e?.code === VALIDATE_FAILED) {
+              // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+              analysisErrorInfo(e.errorFields, e.values, single.value, e.key).then((val) => {
+                if (!val) {
+                  $message.warning('校验未通过');
+                }
+              });
+              // update-end--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+              if (e.key) {
+                changeTab(e.key);
+                if (e.scrollToField) {
+                  setTimeout(() => e.scrollToField(), 150)
+                }
+              }
+              emit('validate',{passed:false})
+            } else {
+              console.error(e);
+            }
+            return Promise.reject(null);
+          });
+      }
+
+      /**
+       * 切换tab到出现校验错误的页面
+       * */
+      function changeTab(key) {
+        let arr = subTabInfo.value;
+        for (let i = 0; i < arr.length; i++) {
+          if (key == arr[i].key) {
+            // update-begin-author:sunjianlei date:2022-7-7 for:【VUEN-1425】【vue3】对多子表中校验不通过不提示
+            let activeKey = i + '';
+            if (subActiveKey.value === activeKey) {
+              break;
+            }
+            subActiveKey.value = activeKey;
+            // 如果切换的目标tab是一对多子表，则需要再次校验一下
+            if (arr[i].relationType === 0) {
+              let instance = getSubTableInstance(key);
+              sleep(300, () => instance?.validateTable());
+            }
+            // update-end-author:sunjianlei date:2022-7-7 for:【VUEN-1425】【vue3】对多子表中校验不通过不提示
+            break;
+          }
+        }
+      }
+
+      // 验证子表
+      function validateSubTableFields() {
+        return new Promise(async (resolve, reject) => {
+          let subData = {};
+          try {
+            let arr = subTabInfo.value;
+            for (let i = 0; i < arr.length; i++) {
+              let key = arr[i].key;
+              let instance = getSubTableInstance(key);
+              if (arr[i].relationType == 1) {
+                try {
+                  let subFormData = await instance.getAll();
+                  subData[key] = [];
+                  subData[key].push(subFormData);
+                } catch (e) {
+                  return reject({code: VALIDATE_FAILED, key, ...e});
+                }
+              } else {
+                let errMap = await instance.fullValidateTable();
+                if (errMap) {
+                  return reject({code: VALIDATE_FAILED, key});
+                }
+                subData[key] = instance.getTableData();
+              }
+            }
+          } catch (e) {
+            reject(e);
+          }
+          resolve(subData);
+        });
+      }
+
+      /**
+       * 表单提交-单表
+       */
+      async function handleSingleSubmit() {
+        try {
+          let values = await validate();
+          values = Object.assign({}, dbData.value, values);
+          values = changeDataIfArray2String(values);
+          loading.value = true;
+          handleApplyRequest(values);
+        } catch (e) {
+          if (Array.isArray(e?.errorFields) && e.errorFields[0]) {
+            // 滚动到未通过校验的字段上
+            scrollToField(e.errorFields[0].name, { behavior: 'smooth', block: 'center' });
+            // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+            analysisErrorInfo(e.errorFields, e.values, single.value);
+            // update-end--author:liaozhiyang---date:20240617---for：【TV360X-496】使用数值类型，金额校验，控件默认值得出的是小数导致校验过不去给提示
+            emit('validate',{passed:false})
+          }
+        } finally {
+          loading.value = false;
+          emit('close');
+        }
+      }
+      /**
+       * 2024-06-17
+       * liaozhiyang
+       * 解析错误信息看是否有组件是input-number，默认值有小数引起的校验错误
+       */
+      async function analysisErrorInfo(errorFields, values, single, curTableName = null) {
+        let result = false;
+        if (errorFields?.length) {
+          const schema = formItemData.schema ?? {};
+          const { properties = {} } = schema;
+          const errorField = errorFields[0].name[0];
+          let curField;
+          if (single || curTableName === tableName.value) {
+            // 单表或者主表
+            curField = properties[errorField];
+          } else {
+            // 一对一or一对多(一对多可以排除，因为一对多就是显示的原始值)
+            const subSchema = properties[curTableName];
+            const { properties: subProperties = {} } = subSchema;
+            curField = subProperties[errorField];
+          }
+          if (curField.type === 'number' && curField.view === 'number' && curField.defVal) {
+            await loadFormFieldsDefVal(
+              [
+                {
+                  field: errorField,
+                  type: curField.type,
+                  value: curField.defVal,
+                  view: curField.view,
+                },
+              ],
+              (res) => {
+                if (res[errorField] === values[errorField]) {
+                  $message.warning(`${curField.title}的默认值是：${values[errorField]}，导致校验通不过，需要正确配置默认值！`);
+                  result = true;
+                }
+              }
+            );
+          }
+        }
+        return result;
+      }
+
+      //提交数据前 先走一下自定义的JS校验
+      function handleApplyRequest(formData) {
+        // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+        // erp主表编辑时需要把子表数据带上保存
+        if (props.themeTemplate === ERP && isUpdate.value && Object.keys(props.subTableSource).length) {
+          formData = { ...formData, ...props.subTableSource };
+        }
+        // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+        customBeforeSubmit(context, formData)
+          .then(() => {
+            doApplyRequest(formData);
+          })
+          .catch((msg) => {
+            $message.warning(msg);
+          });
+      }
+      /**
+       * 2024-04-30
+       * liaozhiyang
+       * 把日期(年月日)组件选择了年和年月的格式，数据提交前重置到该格式的第一天。
+       */
+      const changeDateValue = (formData) => {
+        const { schema } = formItemData;
+        const { properties } = schema;
+        const recursion = (formData, properties) => {
+          Object.entries(formData).forEach(([key, value]) => {
+            const item = properties[key];
+            if (item) {
+              if (item.view === 'tab' && isArray(value)) {
+                // 子表(一对一)
+                if (item.properties) {
+                  value.forEach((vItem) => {
+                    recursion(vItem, item.properties);
+                  });
+                }
+                // 子表（一对多）
+                if (item.columns?.length) {
+                  const findArr = cloneDeep(item.columns.filter((cItem) => cItem.type === 'date' && cItem.fieldExtendJson));
+                  if (findArr.length) {
+                    // 把结构处理成跟一对一一样；
+                    const buildProperties = {};
+                    findArr.forEach((fItem) => {
+                      buildProperties[fItem.key] = {
+                        view: 'date',
+                        fieldExtendJson: fItem.fieldExtendJson,
+                      };
+                    });
+                    value.forEach((vItem) => {
+                      recursion(vItem, buildProperties);
+                    });
+                  }
+                };
+              } else if (item.view === 'date' && typeof value === 'string' && value !== '') {
+                // 日期组件
+                let fieldExtendJson = item.fieldExtendJson;
+                if (fieldExtendJson) {
+                  fieldExtendJson = JSON.parse(fieldExtendJson);
+                  if (fieldExtendJson.picker && fieldExtendJson.picker !== 'default') {
+                    /**
+                     * 需要把年、年月、设置成这段时间内的第一天（[年季度]不需要处理antd回传的就是该季度的第一天，[年周]也不处理）
+                     * 例如日期格式是年，传给数据库的时间必须是20240101
+                     * 例如日期格式是年月（选择了202502），传给数据库的时间必须是20250201
+                     */
+                    if (fieldExtendJson.picker === 'year') {
+                      formData[key] = dayjs(value).set('month', 0).set('date', 1).format('YYYY-MM-DD');
+                    } else if (fieldExtendJson.picker === 'month') {
+                      formData[key] = dayjs(value).set('date', 1).format('YYYY-MM-DD');
+                    } else if (fieldExtendJson.picker === 'week') {
+                      // 【TV360X-28】周也得重置到第一天，否则查询不出结果
+                      formData[key] = dayjs(value).startOf('week').format('YYYY-MM-DD');
+                    }
+                  }
+                }
+              }
+            }
+          });
+        };
+        recursion(formData, properties);
+      };
+      /**
+       * 发起请求
+       * @param formData
+       */
+      function doApplyRequest(formData) {
+        // 数组没有元素直接置空
+        Object.keys(formData).map((key) => {
+          if (Array.isArray(formData[key])) {
+            if (formData[key].length == 0) {
+              formData[key] = '';
+            }
+          }
+        });
+        // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        changeDateValue(formData);
+        // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        console.log('提交表单数据》》》form:', formData);
+        let customUrl = customEditSubmitUrl.value;
+        let url = `${urlObject.optPre}${props.id}?tabletype=${tableType.value}`;
+        if (customUrl) {
+          url = `${customUrl}?tabletype=${tableType.value}`;
+        }
+        // 如果需要提交流程 需要额外设置一个参数
+        if (submitFlowFlag.value === true) {
+          formData[SUBMIT_FLOW_KEY] = 1;
+        }
+        // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+        // 如果外键有则需要加上
+        if (foreignkey.value.field && foreignkey.value.value) {
+          formData[foreignkey.value.field] = foreignkey.value.value;
+        }
+        // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+        let method = isUpdate.value === true ? 'put' : 'post';
+        defHttp
+          .request({ url, method, params: formData }, { isTransformResponse: false })
+          .then((res) => {
+            //console.log('表单提交完成', res)
+            if (res.success) {
+              if (res.result) {
+                formData[SUBMIT_FLOW_ID] = res.result;
+              }
+              //刷新列表
+              emit('success', formData);
+              // 工单申请提交的表单也会走这个逻辑，保存成功不需要提示信息
+              if(props.submitTip === true && showTip.value === true){
+                $message.success(res.message)
+              }
+            } else {
+              $message.warning(res.message);
+            }
+          })
+          .finally(() => {
+            loading.value = false;
+            emit('close');
+          });
+      }
+
+      function triggleChangeValues(values, id, target) {
+        if (id && target) {
+          if (target.vxeProps) {
+            //一对多子表
+            target.setValues([
+              {
+                rowKey: id,
+                values: values,
+              },
+            ]);
+          } else {
+            //一对一子表
+            target.setValues(values);
+          }
+        } else {
+          //主表
+          setFieldsValue(values);
+        }
+      }
+      function triggleChangeValue(field, value) {
+        let obj = {};
+        obj[field] = value;
+        setFieldsValue(obj);
+      }
+
+      // 一对多子表Tab的Key，用于校验未通过时自动跳转
+      const subActiveKey = ref('0');
+      // update-begin-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subFormHeight = ref(getIsMobile.value ? 'auto' : 500);
+      // update-end-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      // 子表表格高度
+      // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+      const subTableHeight = ref(340);
+
+      function getSubTableForeignKeyValue(key) {
+        if (isUpdate.value === true) {
+          let formData = dbData.value;
+          return getValueIgnoreCase(formData, key);
+        }
+        return '';
+      }
+
+      /**
+       * VUEN-1056 30、生成的一对多，编辑的时候，子表数据挂不上
+       */
+      function getValueIgnoreCase(data, key) {
+        if (data) {
+          let temp = data[key];
+          if (!temp && temp !== 0) {
+            temp = data[key.toLowerCase()];
+            if (!temp && temp !== 0) {
+              temp = data[key.toUpperCase()];
+            }
+          }
+          return temp;
+        }
+        return '';
+      }
+
+      //处理一对一子表的表单改变事件
+      function handleSubFormChange(valueObj, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange']();
+          let columnKey = Object.keys(valueObj)[0];
+          if (tableChangeObj[columnKey]) {
+            let subRef = getSubTableInstance(tableKey)
+            let formEvent = subRef.getFormEvent();
+            let event = {
+              column: { key: columnKey },
+              value: valueObj[columnKey],
+              ...formEvent,
+            };
+            tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+          }
+        }
+      }
+
+      //处理一对多子表的改变事件
+      function handleValueChange(event, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange'](onlineFormContext);
+          //update-begin-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时，子表弹框修改了数据，主表字段未修改
+          if(event.column === 'all'){
+            let keys = Object.keys(tableChangeObj);
+            if(keys.length>0){
+              for(let key of keys){
+                tableChangeObj[key].call(onlineFormContext, onlineFormContext, event);
+              }
+            }
+          }else{
+            let columnKey = event.column.key || event.col.key
+            if (tableChangeObj[columnKey]) {
+              //event.row.id 加这个条件是： popform添加数据到vxetable的时候 不需要触发改变事件
+              if(event.row && event.row.id){
+                tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+              }
+            }
+          }
+          //update-end-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时，子表弹框修改了数据，主表字段未修改
+        }
+      }
+
+      /**
+       * 2024-07-30
+       * liaozhiyang
+       * 【TV360X-1958】一对多子表删除时js增强 子表名_onlChange 事件没触发
+       *  处理一对多子表的删除事件
+       * */
+      function handleRemoved(event, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange'](onlineFormContext);
+          let keys = Object.keys(tableChangeObj);
+          if (keys.length > 0) {
+            for (let key of keys) {
+              tableChangeObj[key]?.call(onlineFormContext, onlineFormContext, {...event, row: event.deleteRows});
+            }
+          }
+        }
+      }
+
+      // 当行编辑新增完成后触发的事件
+      function handleAdded(sub, event) {
+        console.log('handleAdded', sub, event)
+        //update-begin-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+       // event.target.emit('executeFillRule', event);
+        if(!event.isModalData){
+          handleSubTableDefaultValue(sub, event)
+        }
+        //update-end-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+      }
+
+      function getSubTableAuthPre(table) {
+        return 'online_' + table + ':';
+      }
+
+      //监听表单改变事件
+      async function onValuesChange(columnKey, value) {
+        //console.log('columnKey-value', `${columnKey}-${value}`)
+        if (!EnhanceJS || !EnhanceJS['onlChange']) {
+          return false;
+        }
+        if (!columnKey) {
+          return false;
+        }
+        //let tableChangeObj = EnhanceJS["onlChange"].call(onlineFormContext);
+        let tableChangeObj = EnhanceJS['onlChange']();
+        if (tableChangeObj[columnKey]) {
+          // update-begin--author:liaozhiyang---date:20250106---for：【issues/7642】js增强onlchange事件event.row.字段获取的是变化前的值
+          setTimeout(async () => {
+            let formData = await getFieldsValue();
+            let event = {
+              row: formData,
+              column: { key: columnKey },
+              value: value,
+            };
+            tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+          }, 0);
+          // update-end--author:liaozhiyang---date:20250106---for：【issues/7642】js增强onlchange事件event.row.字段获取的是变化前的值
+        }
+      }
+
+      /**
+       * 执行online表单的 hook
+       * QQYUN-5315【online表单】online表单也需要支持hook增强
+       */
+      function executeEnhanceFormJsHook(funStr) {
+        let str = funStr.toLocaleString();
+        let arr = str.match(GET_FUN_BODY_REG);
+        if (arr.length > 1) {
+          let temp = arr[1];
+          executeJsEnhanced(temp);
+        }
+      }
+
+      // 自定义按钮 增强触发事件
+      function handleCgButtonClick(optType, buttonCode) {
+        if ('js' == optType) {
+          let hookFunName = buttonCode+"_hook";
+          if (EnhanceJS && EnhanceJS[buttonCode]) {
+            EnhanceJS[buttonCode].call(onlineFormContext, onlineFormContext);
+          }else if(EnhanceJS && EnhanceJS[hookFunName]){
+            executeEnhanceFormJsHook(EnhanceJS[hookFunName])
+          }
+        } else if ('action' == optType) {
+          let formData = dbData.value;
+          let params = {
+            formId: props.id,
+            buttonCode: buttonCode,
+            dataId: formData.id,
+            uiFormData: Object.assign({}, formData),
+          };
+          //console.log("自定义按钮请求后台参数：",params)
+          defHttp
+            .post(
+              {
+                url: `${urlObject.urlButtonAction}`,
+                params,
+              },
+              { isTransformResponse: false }
+            )
+            .then((res) => {
+              if (res.success) {
+                $message.success('处理完成!');
+              } else {
+                $message.warning('处理失败!');
+              }
+            });
+        }
+      }
+
+      // --------------------增强-------------------------
+
+      /**
+       * 清除子表数据
+       * @param tbname
+       */
+      function clearSubRows(tbname) {
+        let instance = getSubTableInstance(tbname)
+        let rows = [...instance.getNewDataWithId(), ...subDataSource.value[tbname]];
+        if (!rows || rows.length == 0) {
+          return false;
+        }
+        let ids = [];
+        for (let i of rows) {
+          ids.push(i.id);
+        }
+        instance.removeRowsById(ids);
+      }
+
+      /**
+       * 添加子表数据
+       * @param tbname
+       * @param rows 可以是数组也可以是对象
+       * @returns {boolean}
+       */
+      function addSubRows(tbname, rows) {
+        if (!rows) {
+          return false;
+        }
+        let instance = getSubTableInstance(tbname)
+        if (typeof rows == 'object') {
+          instance.addRows(rows, true);
+        } else {
+          this.$message.error('添加子表数据,参数不识别!');
+        }
+      }
+
+      /**
+       * 先删除后添加
+       * @param tbname
+       * @param rows
+       */
+      function clearThenAddRows(tbname, rows) {
+        clearSubRows(tbname);
+        addSubRows(tbname, rows);
+      }
+
+      /**
+       * 修改下拉框的下拉选项
+       * @param field
+       * @param options
+       */
+      function changeOptions(field, options) {
+        if (!options && options.length <= 0) {
+          options = [];
+        }
+        options.map((item) => {
+          if (!item.hasOwnProperty('label')) {
+            item['label'] = item.text;
+          }
+        });
+        updateSchema({
+          field,
+          componentProps: {
+            options,
+          },
+        });
+      }
+      /**
+       * 2024-03-21
+       * liaozhiyang
+       * js增强，改变下拉搜索options
+       */
+      function changeRemoteOptions({ field, dict, label, type, subTableName }) {
+        const _dict = dict
+          .split(',')
+          .map((item) => encodeURIComponent(item))
+          .join(',');
+        if (type == 'subTable') {
+          // 一对多
+          const findSubTableInfo = subTabInfo.value.find((sub) => sub.key === subTableName);
+          if (findSubTableInfo) {
+            const findIndex = findSubTableInfo.columns.findIndex((item) => item.key === field);
+            if (findIndex !== -1) {
+              defHttp.get({
+                url: `/sys/dict/loadDict/${_dict}`,
+                params: { keyword: '',pageSize:1000 },
+              }) .then((res) => {
+                const data = dict.split(',');
+                const result = { customOptions:true ,dictTable: data[0], dictCode: data[2], dictText: data[1],options:res };
+                label && (result.title = label);
+                findSubTableInfo.columns[findIndex] = { ...findSubTableInfo.columns[findIndex], ...result };
+                window.findSubTableInfo=findSubTableInfo;
+              });
+            }
+          }
+        } else if (type == 'subForm') {
+          // 一对一
+          if (refMap[subTableName]?.value?.[0]) {
+            const result = {
+              field,
+              componentProps: {
+                dict: _dict,
+              },
+            };
+            label && (result.label = label);
+            refMap[subTableName].value[0].updateSchema(result);
+          }
+        } else {
+          // 单表
+          const result = {
+            field,
+            componentProps: {
+              dict: _dict,
+            },
+          };
+          label && (result.label = label);
+          updateSchema(result);
+        }
+      }
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+      /**
+       * 2024-03-13
+       * liaozhiyang
+       * 改变一对多子表某个字段的options选项（彼时是为了提供给js增强使用）
+       */
+      function changeSubTableOptions(subTableName, field, options) {
+        const findSubTableInfo = subTabInfo.value.find((sub) => sub.key === subTableName);
+        if (findSubTableInfo) {
+          if (!options && options.length <= 0) {
+            options = [];
+          }
+          options.map((item) => {
+            if (!item.hasOwnProperty('label')) {
+              item['label'] = item.text;
+            }
+          });
+          const findIndex = findSubTableInfo.columns.findIndex((item) => item.key === field);
+          if (findIndex !== -1) {
+            findSubTableInfo.columns[findIndex] = { ...findSubTableInfo.columns[findIndex], ...{ options: options, dictCode: '' } };
+          }
+        }
+      }
+
+      /**
+       * 2024-03-13
+       * liaozhiyang
+       * 改变一对一子表某个字段的options选项（彼时是为了提供给js增强使用）
+       */
+      function changeSubFormbleOptions(subTableName, field, options) {
+        if (refMap[subTableName]?.value?.[0]) {
+          if (!options && options.length <= 0) {
+            options = [];
+          }
+          options.map((item) => {
+            if (!item.hasOwnProperty('label')) {
+              item['label'] = item.text;
+            }
+          });
+          refMap[subTableName].value[0].updateSchema({
+            field,
+            componentProps: {
+              dictCode: '',
+              options,
+            },
+          });
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+      /**
+       * 表单提交前事件
+       * @param that
+       * @param formData
+       * @returns {Promise<void>|*}
+       */
+      function customBeforeSubmit(that, formData) {
+        if (EnhanceJS && EnhanceJS['beforeSubmit']) {
+          return EnhanceJS['beforeSubmit'](that, formData);
+        } else {
+          return Promise.resolve();
+        }
+      }
+
+      /**
+       * 处理自定义弹框 字段的显示隐藏
+       * @param show
+       * @param hide
+       */
+      function handleCustomFormSh(show, hide) {
+        let plain = toRaw(fieldDisplayStatus);
+        // update-begin--author:liaozhiyang---date:20241101---for：【issues/7387】js增强使用openCustomModal超过两个时show显示错误
+        Object.keys(plain).map((k) => {
+          if (k.endsWith('_load') || k.endsWith('_disabled')) {
+            // 不处理（不是字段）；
+          } else {
+            fieldDisplayStatus[k] = true;
+          }
+        });
+        // update-end--author:liaozhiyang---date:20241101---for：【issues/7387】js增强使用openCustomModal超过两个时show显示错误
+        if (show && show.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (!k.endsWith('_load') && show.indexOf(k) < 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        } else if (hide && hide.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (hide.indexOf(k) >= 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        }
+      }
+
+      async function handleCustomFormEdit(record, editSubmitUrl) {
+        console.log('自定义弹窗打开online表单2》》form', record);
+        customEditSubmitUrl.value = editSubmitUrl;
+        await resetFields();
+        dbData.value = '';
+        isUpdate.value = true;
+        // 编辑数据
+        await edit(record);
+        await nextTick(() => {
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+        });
+      }
+
+      /**
+       * VUEN-1036
+       * 获取子表的实例对象 可以直接调用子表的方法
+       */
+      function getSubTableInstance(tableName) {
+        let instance = refMap[tableName].value;
+        if (instance instanceof Array) {
+          instance = instance[0];
+        }
+        if(!instance){
+          $message.warning('子表ref找不到:'+tableName);
+          return;
+        }
+        return instance;
+      }
+
+      //跳转至积木报表页面
+      function onOpenReportPrint(){
+        let url = onlineExtConfigJson.reportPrintUrl;
+        let id = dbData.value.id;
+        let token = getToken();
+        goJmReportViewPage(url, id, token)
+      }
+      //打印表单组件
+      function onCompPrint(){
+        //组件打印
+        setTimeout(() => {
+          if (!printRef.value) return;
+
+          const iframe = document.createElement('iframe');
+          iframe.style.display = 'none';
+          document.body.appendChild(iframe);
+
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+          if (!iframeDoc) return;
+
+          // 复制样式和内容
+          iframeDoc.open();
+          iframeDoc.write(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>打印表单</title>
+              ${Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
+              .map((tag) => tag.outerHTML)
+              .join('')}
+            </head>
+            <body>
+              ${printRef.value.outerHTML}
+            </body>
+          </html>
+        `);
+          // 添加打印样式
+          const scrollHeight = printRef.value.scrollHeight;
+          const style = iframeDoc.createElement('style');
+          style.innerHTML = `
+            body {
+              margin: 0;
+              padding: 15px;
+              font-family: Arial, sans-serif;
+            }
+            img {
+              max-width: 100%;
+              height: auto;
+            }
+            @page {
+              size: auto;
+              margin: 15mm;
+            }
+            @media print {
+              body {
+                padding: 0;
+                height: ${scrollHeight}px;
+              }
+            }
+          `;
+          iframeDoc.head.appendChild(style);
+          iframeDoc.close();
+
+          // 打印后移除 iframe
+          iframe.contentWindow?.addEventListener('afterprint', () => {
+            document.body.removeChild(iframe);
+          });
+
+          // 触发打印
+          setTimeout(() => {
+            iframe.contentWindow?.print();
+          }, 200);
+        }, 10);
+      }
+
+      //-----------------------------------一对多子表弹窗操作数据-begin-------------------------------------------------------------
+      const [registerPopModal, { openModal: openPopModal }] = useModal();
+      // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+      // 表ID
+      const popTableId = ref('');
+      // 表名
+      const popTableName = ref('');
+      // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+      // 是否发起请求
+      const popModalRequest = ref(true);
+
+      /**
+       * 新增
+       * @param sub
+       */
+      function openSubFormModalForAdd(sub){
+        console.log('openSubFormModalForAdd', sub)
+        // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        popTableId.value = sub.id;
+        popTableName.value = sub.key;
+        // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        popModalRequest.value = false;
+        openPopModal(true,{isUpdate: false, tableType: '3'})
+      }
+
+      /**
+       * 编辑
+       * @param sub
+       */
+      function openSubFormModalForEdit(sub){
+        let ref = getSubTableInstance(sub.key)
+        let arr = ref.getSelectedData();
+        if(arr.length!=1){
+          $message.warning('请选择一条数据');
+          return;
+        }
+        // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        popTableId.value = sub.id;
+        //update-begin-author:liusq---date:2024-08-28--for: [TV360X-2262]online表单对接流程权限，设置字段不可编辑，但是这俩按钮可以修改
+        popTableName.value = sub.key;
+        //update-end-author:liusq---date:2024-08-28--for: [TV360X-2262]online表单对接流程权限，设置字段不可编辑，但是这俩按钮可以修改
+        // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        popModalRequest.value = false;
+        openPopModal(true,{isUpdate:true, record: arr[0]})
+      }
+
+      /**
+       * 将数据回填到当前vxe table
+       * @param data
+       */
+      function getPopFormData(data){
+        const tableName = data[ONL_FORM_TABLE_NAME];
+     //   console.log('getFormData', data)
+        let record = omit(data, [ONL_FORM_TABLE_NAME]);
+        if(record.id){
+          let values = omit({...record}, 'id');
+          let arr = [{ rowKey: record.id, values }];
+          let instance = getSubTableInstance(tableName)
+          instance.setValues(arr);
+        }else{
+          let instance = getSubTableInstance(tableName)
+          instance.addRows(record, {isOnlineJS: false, setActive:false, emitChange: true, isModalData: true});
+        }
+      }
+      //-----------------------------------一对多子表弹窗操作数据-end-------------------------------------------------------------
+
+      //update-begin-author:taoyan date:2022-10-17 for: VUEN-2480【严重bug】online vue3测试的问题 6、勾中弹窗编辑后，再次打开，发现不能取消勾中
+      function onCloseModal(){
+        // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+        if (props.themeTemplate === ERP) return;
+        // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+        let arr  = subTabInfo.value;
+        if(arr && arr.length>0){
+          for(let item of arr){
+            if(item.relationType==1){
+              //1对1忽略
+            }else{
+              let inst = getSubTableInstance(item.key);
+              if(inst){
+                inst.clearSelection();
+              }
+            }
+          }
+        }
+      }
+      //update-end-author:taoyan date:2022-10-17 for: VUEN-2480【严重bug】online vue3测试的问题 6、勾中弹窗编辑后，再次打开，发现不能取消勾中
+
+      /** 供 js 增强调用：重新执行主表的填值规则  */
+      function executeMainFillRule() {
+        let formData = getFieldsValue();
+        let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+        loadFormFieldsDefVal(fieldProperties, (values) => {
+          setFieldsValue(values);
+        }, formData);
+      }
+
+      /** 供 js 增强调用：重新执行子表的填值规则  */
+      function executeSubFillRule(subKey, $event){
+        let subList = subTabInfo.value;
+        if(subList && subList.length>0){
+          let arr = subList.filter(sub=>sub.key === subKey);
+          if(arr.length==0){
+            console.error('没找到与之匹配的子表', subKey)
+            return;
+          }
+          if(arr[0].relationType == 1){
+            //一对一
+            let subInstance = getSubTableInstance(subKey);
+            subInstance.executeFillRule();
+          }else{
+            // 一对多
+            let subFieldProperties = toRaw(defaultValueFields[subKey]);
+            let row = toRaw($event.row)
+            loadFormFieldsDefVal(subFieldProperties,(values) => {
+              const { row, target } = $event;
+              let v = [{ rowKey: row.id, values: { ...values } }];
+              target.setValues(v);
+            }, row);
+          }
+        }
+
+
+      }
+
+      let context = {
+        tableName,
+        loading,
+        subActiveKey,
+        onlineFormRef,
+        getFieldsValue,
+        setFieldsValue,
+        submitFlowFlag,
+        subFormHeight,
+        subTableHeight,
+        refMap,
+        triggleChangeValues,
+        triggleChangeValue,
+        sh: fieldDisplayStatus,
+        clearSubRows,
+        addSubRows,
+        clearThenAddRows,
+        changeOptions,
+        isUpdate,
+        getSubTableInstance,
+        updateSchema,
+        executeMainFillRule,
+        executeSubFillRule,
+        // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+        changeSubTableOptions,
+        changeSubFormbleOptions,
+        // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+        changeRemoteOptions,
+        changEvent: ()=>{},
+        onlineFormValueChange,
+        // update-begin--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+        submitFormAndFlow,
+        // update-end--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+      };
+      resetContext(context);
+      // -update-begin--author:liaozhiyang---date:20240614---for：【TV360X-1017】一对多新增、编辑钮根据权限控制
+      const getBtnAuth = (code, tableName) => {
+        const prefix = getSubTableAuthPre(tableName);
+        const permissionStore = usePermissionStore();
+        let onlineButtonAuths = permissionStore.getOnlineSubTableAuth(prefix);
+        if (onlineButtonAuths?.length) {
+          const result = onlineButtonAuths.find((item) => item === code);
+          return result ? false : true;
+        }
+        return true;
+      };
+      // -update-end--author:liaozhiyang---date:20240614---for：【TV360X-1017】一对多新增、编辑钮根据权限控制
+
+      return {
+        //主表
+        tableName,
+        onlineFormRef,
+        registerForm,
+        loading,
+
+        //子表
+        subActiveKey,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+
+        //一对一子表
+        subFormHeight,
+        getSubTableForeignKeyValue,
+        isUpdate,
+        handleSubFormChange,
+
+        //一对多子表
+        subTableHeight,
+        onlineFormDisabled,
+        subDataSource,
+        getSubTableAuthPre,
+        handleAdded,
+        handleSubTableDefaultValue,
+        handleValueChange,
+        openSubFormModalForAdd,
+        openSubFormModalForEdit,
+        getBtnAuth,
+        handleRemoved,
+        //父组件调用
+        show,
+        createRootProperties,
+        handleSubmit,
+        handleValidate,
+        sh: fieldDisplayStatus,
+        handleCgButtonClick,
+        handleCustomFormSh,
+        handleCustomFormEdit,
+        //跳转
+        dbData,
+        onOpenReportPrint,
+        onlineExtConfigJson,
+        onCompPrint,
+        printRef,
+        //一对多子表弹窗操作数据
+        registerPopModal,
+        popTableId,
+        popTableName,
+        getPopFormData,
+        popModalRequest,
+        onCloseModal,
+        ERP,
+        rowNumber,
+        isSetFormLabelLength,
+        subFormWrapRef,
+
+        getSubAddBtnCfg,
+        getSubRemoveBtnCfg,
+        getSubOpenAddBtnCfg,
+        getSubOpenEditBtnCfg,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .onlineFormWrap {
+    // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    padding: 20px 1.5% 0;
+    // update-begin--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    &.formTemplate_1 {
+      > form {
+        padding-left: 5%;
+        padding-right: 5%;
+      }
+    }
+    &.formTemplate_2 {
+      > form {
+        padding-left: 1%;
+        padding-right: 1%;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    :deep(.ant-form) {
+      > .ant-row {
+        > .ant-col {
+          padding: 0 6px;
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    :deep(.vxe-buttons--wrapper) {
+      > div {
+        display: flex;
+      }
+    }
+    // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9353】markdown全屏之后，弹窗的关闭和全屏按钮在markdown上面
+    :deep(.vditor--fullscreen) {
+      z-index: 1011 !important;
+    }
+    // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9353】markdown全屏之后，弹窗的关闭和全屏按钮在markdown上面
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineFormDetail.vue b/src/views/super/online/cgform/auto/comp/OnlineFormDetail.vue
new file mode 100644
index 0000000..ca6e15c
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineFormDetail.vue
@@ -0,0 +1,353 @@
+<template>
+  <div :id="tableName + '_form'">
+
+    <!-- 积木报表的打印按钮，只有配置了 reportUrl 才显示 -->
+    <div v-if="!!formData.id && !!onlineExtConfigJson.reportPrintShow" style="text-align: right;position: absolute;top: 15px;right: 20px;z-index: 999">
+      <PrinterOutlined title="打印" @click="onOpenReportPrint" style="font-size: 16px"/>
+    </div>
+    
+    <detail-form :schemas="detailFormSchemas" :data="formData" :span="formSpan"></detail-form>
+
+    <!-- 子表 -->
+    <a-tabs v-if="themeTemplate !== ERP && hasSubTable && showSub" @change="onTabChange">
+      <a-tab-pane v-for="(sub, index) in subTabInfo" :tab="sub.describe" :key="index + ''" :forceRender="true">
+        <div :style="{ 'overflow-y': 'auto', 'overflow-x': 'hidden', 'max-height': subFormHeight + 'px' }" v-if="sub.relationType == 1">
+          <!-- 子表-一对一 -->
+          <online-sub-form-detail :key="subReloadKey" :table="sub.key" :form-template="formTemplate" :main-id="getSubTableForeignKeyValue(sub.foreignKey)" :properties="sub.properties"> </online-sub-form-detail>
+        </div>
+        <div v-else>
+          <!-- 子表-一对多 -->
+          <JVxeTable
+            v-if="showStatus[sub.key]"
+            :ref="refMap[sub.key]"
+            keep-source
+            :row-number="rowNumber"
+            row-selection
+            :height="subTableHeight"
+            :disabled="true"
+            :columns="sub.columns"
+            :dataSource="subDataSource[sub.key]"
+            :authPre="getSubTableAuthPre(sub.key)"
+          />
+          <a-spin v-else :spinning="true"/>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <Loading :loading="loading" :absolute="false" />
+    <slot name="bottom"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, reactive, watch } from 'vue';
+  import { Loading } from '/@/components/Loading';
+  import { getToken } from '/@/utils/auth';
+  import { goJmReportViewPage } from '/@/utils';
+  import { PrinterOutlined } from '@ant-design/icons-vue';
+  import DetailForm from '../../extend/form/DetailForm.vue';
+  import OnlineSubFormDetail from './OnlineSubFormDetail.vue';
+  import { getDetailFormSchemas } from '../../hooks/auto/useAutoForm';
+  import { defHttp } from '/@/utils/http/axios';
+  import { ERP } from "../../util/constant";
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useOnlineFormDetailContext } from '../../hooks/auto/useAutoFormDetail';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  export default {
+    name: 'OnlineFormDetail',
+    components: {
+      DetailForm,
+      Loading,
+      PrinterOutlined,
+      OnlineSubFormDetail,
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isTree: {
+        type: Boolean,
+        default: false,
+      },
+      pidField: {
+        type: String,
+        default: '',
+      },
+      submitTip: {
+        type: Boolean,
+        default: true,
+      },
+      showSub:{
+        type: Boolean,
+        default: true,
+      },
+      themeTemplate: {
+        type: String,
+        default: '',
+      }
+    },
+    emits: ['success', 'rendered'],
+    setup(props, { emit }) {
+      console.log('onlineForm-setup》》');
+      const { createMessage: $message } = useMessage();
+      const { getIsMobile } = useAppInject();
+      const tableName = ref('');
+      const single = ref(true);
+      // 加载状态
+      const loading = ref(false);
+      const tableType = ref(1);
+
+      const formData = ref<any>({});
+      // update-begin-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subFormHeight = ref(getIsMobile.value ? 'auto' : 300);
+      // update-end-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subReloadKey = ref(0);
+      // 子表表格高度
+      // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+      const subTableHeight = ref(340);
+      
+      const rowNumber = ref(getIsMobile.value ? false : true);
+
+      let detailData = {};
+      // 字段展示状态
+      const fieldDisplayStatus = reactive<any>({});
+
+      /**
+       * online表单扩展配置
+       */
+      const onlineExtConfigJson = reactive({
+        reportPrintShow: 0,
+        reportPrintUrl: '',
+        joinQuery: 0,
+        modelFullscreen: 0,
+        modalMinWidth: '',
+      });
+
+      const { detailFormSchemas, hasSubTable, subTabInfo, refMap, showStatus, subDataSource, createFormSchemas, formSpan } = getDetailFormSchemas(props);
+
+      /**
+       * 处理扩展配置
+       */
+      function handleExtConfigJson(jsonStr) {
+        let extConfigJson = { reportPrintShow: 0, reportPrintUrl: '', joinQuery: 0, modelFullscreen: 1, modalMinWidth: '' };
+        if (jsonStr) {
+          extConfigJson = JSON.parse(jsonStr);
+        }
+        Object.keys(extConfigJson).map((k) => {
+          onlineExtConfigJson[k] = extConfigJson[k];
+        });
+      }
+      // update-begin--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+      const { onlineFormDetailContext, resetContext } = useOnlineFormDetailContext();
+      let { EnhanceJS, initCgEnhanceJs } = useEnhance(onlineFormDetailContext, false);
+      // update-end--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+
+      // 渲染表单
+      async function createRootProperties(data) {
+        tableType.value = data.head.tableType;
+        tableName.value = data.head.tableName;
+        single.value = data.head.tableType == 1;
+        handleExtConfigJson(data.head.extConfigJson);
+        createFormSchemas(data.schema.properties);
+        // update-begin--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+        EnhanceJS = initCgEnhanceJs(data.enhanceJs);
+        // update-end--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+        emit('rendered', onlineExtConfigJson);
+      }
+
+      /**
+       * status: 是否是修改页面
+       * record: 列表页面的行数据
+       * param： 树形列表添加子节点 传入的父级节点id
+       * */
+      async function show(_status, record) {
+        console.log('进入表单详情》》form', record);
+        // -update-begin--author:liaozhiyang---date:20251209---for：【QQYUN-13970】一对一子表编辑之后查看详情不会更新
+        subReloadKey.value++;
+        // -update-end--author:liaozhiyang---date:20251209---for：【QQYUN-13970】一对一子表编辑之后查看详情不会更新
+        await edit(record);
+        changeShowStatus(true);
+      }
+
+      function getFormData(dataId) {
+        let url = `/online/cgform/api/detail/${props.id}/${dataId}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject();
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+      
+      //update-begin-author:taoyan date:2023-2-13 for: QQYUN-4226【vue3】online 一对多子表 详情界面，序号错位了 点一下子表表格就正常了
+      function changeShowStatus(flag){
+        Object.keys(showStatus).map(k=>{
+          showStatus[k] = flag;
+        })
+      }
+      
+      function onTabChange(){
+        changeShowStatus(false);
+        setTimeout(()=>{
+          changeShowStatus(true);
+        }, 300);
+      }
+      //update-end-author:taoyan date:2023-2-13 for: QQYUN-4226【vue3】online 一对多子表 详情界面，序号错位了 点一下子表表格就正常了
+
+      async function edit(record) {
+        let temp: any = await getFormData(record.id);
+        // update-begin--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+        detailData = temp;
+        // 每次打开有js增强设置隐藏的，都要先置成初始化。
+        detailFormSchemas.value.filter((item) => item.hidden).forEach((item) => (item.hidden = false));
+        Object.keys(fieldDisplayStatus).forEach(function (key) {
+          delete fieldDisplayStatus[key];
+        });
+        handleEnhanceJS({ buttonCode: 'loaded' });
+        // 表单赋值
+        formData.value = { ...detailData };
+        editSubVxeTableData(detailData);
+        // update-end--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+      }
+
+      function editSubVxeTableData(record) {
+        if (!record) {
+          // 新增页面需要清空子表数据
+          record = {};
+        }
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            obj[key] = record[key] || [];
+          }
+          subDataSource.value = obj;
+        }
+      }
+
+      function getSubTableAuthPre(table) {
+        return 'online_' + table + ':';
+      }
+
+      //跳转至积木报表页面
+      function onOpenReportPrint() {
+        let url = onlineExtConfigJson.reportPrintUrl;
+        let temp: any = formData.value;
+        if (temp) {
+          let id = temp.id;
+          let token = getToken();
+          goJmReportViewPage(url, id, token);
+        }
+      }
+
+      function getSubTableForeignKeyValue(key) {
+        let temp = formData.value;
+        console.log('getValueIgnoreCase(temp, key)', temp, key, getValueIgnoreCase(temp, key));
+        return getValueIgnoreCase(temp, key);
+      }
+
+      /**
+       * VUEN-1056 30、生成的一对多，编辑的时候，子表数据挂不上
+       */
+      function getValueIgnoreCase(data, key) {
+        if (data) {
+          let temp = data[key];
+          if (!temp && temp !== 0) {
+            temp = data[key.toLowerCase()];
+            if (!temp && temp !== 0) {
+              temp = data[key.toUpperCase()];
+            }
+          }
+          return temp;
+        }
+        return '';
+      }
+      // update-begin--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+      function handleEnhanceJS({ buttonCode }) {
+        if (EnhanceJS && EnhanceJS[buttonCode]) {
+          EnhanceJS[buttonCode].call(onlineFormDetailContext, onlineFormDetailContext);
+        }
+      }
+      watch(fieldDisplayStatus, (newValue) => {
+        Object.entries(newValue).forEach(([key, value]) => {
+          if (value == false) {
+            const findItem = detailFormSchemas.value.find((item) => item.field === key);
+            if (findItem) {
+              findItem.hidden = true;
+            }
+          }
+        });
+      });
+      const context = {
+        setFieldsValue: (values) => {
+          Object.entries(values).forEach(([key, value]) => {
+            detailData[key] = value;
+          });
+        },
+        getFieldsValue: () => {
+          return { ...detailData };
+        },
+        sh: fieldDisplayStatus,
+        isUpdate: ref(false),
+        isDetail: ref(true),
+      };
+      resetContext(context);
+      // update-end--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+
+      return {
+        detailFormSchemas,
+        formData,
+        formSpan,
+
+        //主表
+        tableName,
+        loading,
+
+        //子表
+        hasSubTable,
+        subTabInfo,
+        subFormHeight,
+        subTableHeight,
+        refMap,
+        onTabChange,
+        subReloadKey,
+
+        //一对多子表
+        subDataSource,
+        getSubTableAuthPre,
+
+        //父组件调用
+        show,
+        createRootProperties,
+
+        // 扩展配置
+        onOpenReportPrint,
+        onlineExtConfigJson,
+        getSubTableForeignKeyValue,
+        showStatus,
+        ERP,
+        rowNumber,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlinePopForm.vue b/src/views/super/online/cgform/auto/comp/OnlinePopForm.vue
new file mode 100644
index 0000000..147a9e9
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlinePopForm.vue
@@ -0,0 +1,911 @@
+<template>
+  <div :id="tableName + '_form'" class="onlinePopFormWrap" :class="[`formTemplate_${formTemplate}`]">
+    <BasicForm ref="onlineFormRef" @register="registerForm" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed, ref, unref, nextTick, toRaw, reactive } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { SUBMIT_FLOW_KEY, VALIDATE_FAILED } from '../../types/onlineRender';
+  import { defHttp } from '/@/utils/http/axios';
+  import { pick } from 'lodash-es';
+  import { useFormItems, getRefPromise, useOnlineFormContext } from '../../hooks/auto/useAutoForm';
+  import { Loading } from '/@/components/Loading';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import OnlineSubForm from './OnlineSubForm.vue';
+  import { loadFormFieldsDefVal } from '../../util/FieldDefVal';
+  import { getToken } from '/@/utils/auth';
+  import { goJmReportViewPage } from '/@/utils'
+  import { PrinterOutlined, DiffOutlined, FormOutlined } from '@ant-design/icons-vue';
+  import { useModal } from '/@/components/Modal';
+  import { Method } from 'axios';
+  import { isObject } from '/@/utils/is';
+
+  const urlObject = {
+    optPre: '/online/cgform/api/form/',
+    urlButtonAction: '/online/cgform/api/doButton',
+  };
+  export default {
+    name: 'OnlinePopForm',
+    components: {
+      BasicForm,
+      Loading,
+      OnlineSubForm,
+      PrinterOutlined,
+      DiffOutlined,
+      FormOutlined
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isTree: {
+        type: Boolean,
+        default: false,
+      },
+      pidField: {
+        type: String,
+        default: '',
+      },
+      submitTip:{
+        type: Boolean,
+        default: true
+      },
+      modalClass:{
+        type: String,
+        default: '',
+      },
+      //是否发送请求-即表单的保存/编辑请求，false则只将表单数据抛出去
+      request: {
+        type: Boolean,
+        default: true
+      },
+      // 是否是vxeTable上方按钮点击打开的表单数据
+      isVxeTableData: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ['success', 'rendered', 'dataChange'],
+    setup(props, { emit }) {
+      console.log('onlineForm-setup》》');
+      const { createMessage: $message } = useMessage();
+
+      const [registerVxeFormModal, { openModal:openVxeFormModal }] = useModal();
+      const vxeTableId = ref('');
+      // 表单ref
+      const onlineFormRef = ref(null);
+      const single = ref(true);
+      // 加载状态
+      const loading = ref(false);
+      const tableType = ref(1);
+      // 表单提交且提交流程
+      const submitFlowFlag = ref(false);
+      const isUpdate = ref(false);
+
+      /**
+       * online表单扩展配置
+       */
+      const onlineExtConfigJson = reactive({
+        reportPrintShow: 0,
+        reportPrintUrl: '',
+        joinQuery: 0,
+        modelFullscreen: 0,
+        modalMinWidth: '',
+      });
+
+      const { onlineFormContext, resetContext } = useOnlineFormContext();
+      const {
+        formSchemas,
+        defaultValueFields,
+        changeDataIfArray2String,
+        tableName,
+        dbData,
+        checkOnlyFieldValue,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+        subDataSource,
+        baseColProps,
+        createFormSchemas,
+        fieldDisplayStatus,
+        labelCol,
+        wrapperCol,
+        labelWidth
+      } = useFormItems(props, onlineFormRef);
+      let { EnhanceJS, initCgEnhanceJs } = useEnhance(onlineFormContext, false);
+
+      //表单配置
+      const [registerForm, { setProps, validate, resetFields, setFieldsValue, updateSchema, getFieldsValue, scrollToField }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        baseColProps: baseColProps,
+        // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        labelWidth,
+        // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        labelCol,
+        wrapperCol
+        // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      });
+
+      // 表单禁用
+      const onlineFormDisabled = ref(false);
+      function handleFormDisabled() {
+        let flag = props.disabled;
+        onlineFormDisabled.value = flag;
+        setProps({ disabled: flag });
+      }
+
+      /**
+       * status: 是否是修改页面
+       * record: 列表页面的行数据
+       * param： 树形列表添加子节点 传入的父级节点id
+       * */
+      async function show(status, record, param) {
+        console.log('onlinepopform新增编辑进入表单》》form', record);
+        await resetFields();
+        dbData.value = '';
+        let flag = unref(status);
+        isUpdate.value = flag;
+        if (flag) {
+          // 编辑页面
+          await edit(record);
+        }
+        await nextTick(() => {
+          if (!flag && param) {
+            //如果是新增页面 且 param传入有值 需要设置表单
+            setFieldsValue(param);
+          }
+          handleDefaultValue();
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+          //处理表单的禁用效果
+          handleFormDisabled();
+        });
+      }
+     
+
+      /**
+       * 当前表单默认值逻辑-进入新增页面触发
+       */
+      function handleDefaultValue() {
+        if (unref(isUpdate) === false) {
+          let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+          loadFormFieldsDefVal(fieldProperties, (values) => {
+            setFieldsValue(values);
+          });
+        }
+      }
+
+      async function edit(record) {
+        // 查询数据库
+        let formData:any = await getFormData(record.id);
+        if(!formData || Object.keys(formData).length==0){
+          //没有查询出数据
+          formData = {...toRaw(record)}
+        }
+        dbData.value = Object.assign({}, formData);
+        //表单赋值
+        let arr = realFormFieldNames.value;
+        let values = pick(formData, ...arr);
+        // 如果是vxetable上方按钮打开的表单，那么表单值以record为主，而不是数据库查询的数据,否则第一次修改后第二次打开表单，表单值和数据库一致但是和当前页面不一致
+        if(props.isVxeTableData === true){
+          values = Object.assign({},values, record)
+        }
+        await setFieldsValue(values);
+        // editSubVxeTableData(formData);
+      }
+
+      function editSubVxeTableData(record) {
+        if (!record) {
+          // 新增页面需要清空子表数据
+          record = {};
+        }
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            obj[key] = record[key] || [];
+          }
+          subDataSource.value = obj;
+        }
+      }
+
+      let realFormFieldNames = computed(() => {
+        let arr = formSchemas.value;
+        let names = [];
+        for (let a of arr) {
+          names.push(a.field);
+        }
+        return names;
+      });
+
+      function getFormData(dataId) {
+        let url = `${urlObject.optPre}${props.id}/${dataId}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject();
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+
+      // 渲染表单
+      async function createRootProperties(data) {
+        tableType.value = data.head.tableType;
+        tableName.value = data.head.tableName;
+        single.value = data.head.tableType == 1;
+        handleExtConfigJson(data.head.extConfigJson);
+
+        createFormSchemas(data.schema.properties, data.schema.required, checkOnlyFieldValue, onlineExtConfigJson);
+        EnhanceJS = initCgEnhanceJs(data.enhanceJs);
+        emit('rendered', onlineExtConfigJson);
+
+        //监听表单改变事件
+        let formRefObject:any = await getRefPromise(onlineFormRef);
+        formRefObject.$formValueChange = (field, value, changeFormData) => {
+          onValuesChange(field, value);
+          if(changeFormData){
+            //如果存在其他表单控件的数据，直接设置该值
+            setFieldsValue(changeFormData)
+          }
+        };
+      }
+
+      /**
+       * 处理扩展配置
+       */
+      function handleExtConfigJson(jsonStr) {
+        let extConfigJson = { reportPrintShow: 0, reportPrintUrl: '', joinQuery: 0, modelFullscreen: 1, modalMinWidth: '', formLabelLength: null };
+        if (jsonStr) {
+          extConfigJson = JSON.parse(jsonStr);
+        }
+        Object.keys(extConfigJson).map((k) => {
+          onlineExtConfigJson[k] = extConfigJson[k];
+        });
+      }
+      
+
+      function handleSubmit() {
+        if (single.value === true) {
+          handleSingleSubmit();
+        } else {
+          handleOne2ManySubmit();
+        }
+      }
+
+      function handleOne2ManySubmit() {
+        validateAll().then((formData) => {
+          handleApplyRequest(formData);
+        });
+      }
+
+      // 触发所有表单验证
+      function validateAll() {
+        let temp = {};
+        return new Promise((resolve, reject) => {
+          // 验证主表表单
+          validate().then(
+            (values) => resolve(values),
+            ({ errorFields }) => {
+              reject({
+                code: VALIDATE_FAILED,
+                key: tableName.value,
+                // 滚动到未通过校验的字段上
+                scrollToField: () => errorFields[0] && scrollToField(errorFields[0].name, { behavior: 'smooth', block: 'center' }),
+              });
+            }
+          );
+        })
+          .then((result) => {
+            Object.assign(temp, changeDataIfArray2String(result));
+            return validateSubTableFields();
+          })
+          .then((allTableData) => {
+            Object.assign(temp, allTableData);
+            return Promise.resolve(temp);
+          })
+          .catch((e) => {
+            if (e === VALIDATE_FAILED || e?.code === VALIDATE_FAILED) {
+              $message.warning('校验未通过');
+              if (e.key) {
+                changeTab(e.key);
+                if (e.scrollToField) {
+                  setTimeout(() => e.scrollToField(), 150)
+                }
+              }
+            } else {
+              console.error(e);
+            }
+            return Promise.reject(null);
+          });
+      }
+
+      /**
+       * 切换tab到出现校验错误的页面
+       * */
+      function changeTab(key) {
+        let arr = subTabInfo.value;
+        for (let i = 0; i < arr.length; i++) {
+          if (key == arr[i].key) {
+            subActiveKey.value = i + '';
+            break;
+          }
+        }
+      }
+
+      // 验证子表
+      function validateSubTableFields() {
+        return new Promise(async (resolve, reject) => {
+          let subData = {};
+          try {
+            let arr = subTabInfo.value;
+            for (let i = 0; i < arr.length; i++) {
+              let key = arr[i].key;
+              let instance = refMap[key].value;
+              // 兼容写法:如果取到的是一个数组类型，则取第一个元素
+              if (instance instanceof Array) {
+                instance = instance[0];
+              }
+              if (arr[i].relationType == 1) {
+                try {
+                  let subFormData = await instance.getAll();
+                  subData[key] = [];
+                  subData[key].push(subFormData);
+                } catch (e) {
+                  return reject({code: VALIDATE_FAILED, key, ...e});
+                }
+              } else {
+                let errMap = await instance.fullValidateTable();
+                if (errMap) {
+                  return reject({code: VALIDATE_FAILED, key});
+                }
+                subData[key] = instance.getTableData();
+              }
+            }
+          } catch (e) {
+            reject(e);
+          }
+          resolve(subData);
+        });
+      }
+
+      /**
+       * 表单提交-单表
+       */
+      async function handleSingleSubmit() {
+        try {
+          let values = await validate();
+          values = Object.assign({}, dbData.value, values);
+          values = changeDataIfArray2String(values);
+          loading.value = true;
+          handleApplyRequest(values);
+        } catch (error) {
+          // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-420】关联记录校验不通过的项在可视区外时点击保存没任何效果
+          if (isObject(error)) {
+            const errorFields = error.errorFields;
+            if (errorFields?.length && errorFields[0].errors) {
+              $message.warning(errorFields[0].errors[0]);
+              scrollToField(errorFields[0].name, { behavior: 'smooth', block: 'center' });
+            }
+          }
+          console.log(error);
+          // update-end--author:liaozhiyang---date:20240524---for：【TV360X-420】关联记录校验不通过的项在可视区外时点击保存没任何效果
+        } finally {
+          loading.value = false;
+        } 
+      }
+
+      //提交数据前 先走一下自定义的JS校验
+      function handleApplyRequest(formData) {
+        customBeforeSubmit(context, formData)
+          .then(() => {
+            doApplyRequest(formData);
+          })
+          .catch((msg) => {
+            $message.warning(msg);
+          });
+      }
+
+
+      function triggleChangeValues(values, id, target) {
+        if (id && target) {
+          if (target.setValues) {
+            //一对一子表
+            target.setValues(values);
+          } else {
+            //一对多子表
+            target.setValues([
+              {
+                rowKey: id,
+                values: values,
+              },
+            ]);
+          }
+        } else {
+          //主表
+          setFieldsValue(values);
+        }
+      }
+      function triggleChangeValue(field, value) {
+        let obj = {};
+        obj[field] = value;
+        setFieldsValue(obj);
+      }
+
+      // 一对多子表Tab的Key，用于校验未通过时自动跳转
+      const subActiveKey = ref('0');
+      const subFormHeight = ref(300);
+      // 子表表格高度
+      // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+      const subTableHeight = ref(340);
+
+      function getSubTableForeignKeyValue(key) {
+        if (isUpdate.value === true) {
+          let formData = dbData.value;
+          return getValueIgnoreCase(formData, key);
+        }
+        return '';
+      }
+
+      /**
+       * VUEN-1056 30、生成的一对多，编辑的时候，子表数据挂不上
+       */
+      function getValueIgnoreCase(data, key) {
+        if (data) {
+          let temp = data[key];
+          if (!temp && temp !== 0) {
+            temp = data[key.toLowerCase()];
+            if (!temp && temp !== 0) {
+              temp = data[key.toUpperCase()];
+            }
+          }
+          return temp;
+        }
+        return '';
+      }
+
+      //处理一对一子表的表单改变事件
+      function handleSubFormChange(valueObj, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange']();
+          let columnKey = Object.keys(valueObj)[0];
+          if (tableChangeObj[columnKey]) {
+            let subRef = refMap[tableKey].value;
+            if (subRef instanceof Array) {
+              subRef = subRef[0];
+            }
+            let formEvent = subRef.getFormEvent();
+            let event = {
+              column: { key: columnKey },
+              value: valueObj[columnKey],
+              ...formEvent,
+            };
+            tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+          }
+        }
+      }
+
+      //处理一对多子表的改变事件
+      function handleValueChange(event, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange'](onlineFormContext);
+          if (tableChangeObj[event.column.key]) {
+            tableChangeObj[event.column.key].call(onlineFormContext, onlineFormContext, event);
+          }
+        }
+      }
+
+      // 当行编辑新增完成后触发的事件
+      function handleAdded(sub, event) {
+        console.log('handleAdded', sub, event)
+        //update-begin-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+       // event.target.emit('executeFillRule', event);
+        //update-end-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+      }
+
+      function getSubTableAuthPre(table) {
+        return 'online_' + table + ':';
+      }
+
+      //监听表单改变事件
+      async function onValuesChange(columnKey, value) {
+        //console.log('columnKey-value', `${columnKey}-${value}`)
+        // 将老数据和新数据比较 如果不同 往外抛出改变事件
+        let oldFormData = dbData.value;
+        if(oldFormData[columnKey]!=value){
+          emit('dataChange', columnKey);
+        }
+        
+        if (!EnhanceJS || !EnhanceJS['onlChange']) {
+          return false;
+        }
+        if (!columnKey) {
+          return false;
+        }
+        //let tableChangeObj = EnhanceJS["onlChange"].call(onlineFormContext);
+        let tableChangeObj = EnhanceJS['onlChange']();
+        if (tableChangeObj[columnKey]) {
+          let formData = await getFieldsValue();
+          let event = {
+            row: formData,
+            column: { key: columnKey },
+            value: value,
+          };
+          tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+        }
+      }
+
+      // 自定义按钮 增强触发事件
+      function handleCgButtonClick(optType, buttonCode) {
+        if ('js' == optType) {
+          if (EnhanceJS && EnhanceJS[buttonCode]) {
+            EnhanceJS[buttonCode].call(onlineFormContext, onlineFormContext);
+          }
+        } else if ('action' == optType) {
+          let formData = dbData.value;
+          let params = {
+            formId: props.id,
+            buttonCode: buttonCode,
+            dataId: formData.id,
+            uiFormData: Object.assign({}, formData),
+          };
+          //console.log("自定义按钮请求后台参数：",params)
+          defHttp
+            .post(
+              {
+                url: `${urlObject.urlButtonAction}`,
+                params,
+              },
+              { isTransformResponse: false }
+            )
+            .then((res) => {
+              if (res.success) {
+                $message.success('处理完成!');
+              } else {
+                $message.warning('处理失败!');
+              }
+            });
+        }
+      }
+
+      // --------------------增强-------------------------
+
+      /**
+       * 清除子表数据
+       * @param tbname
+       */
+      function clearSubRows(tbname) {
+        let instance = refMap[tbname].value;
+        let rows = [...instance.getNewDataWithId(), ...subDataSource.value[tbname]];
+        if (!rows || rows.length == 0) {
+          return false;
+        }
+        let ids = [];
+        for (let i of rows) {
+          ids.push(i.id);
+        }
+        instance.removeRowsById(ids);
+      }
+
+      /**
+       * 添加子表数据
+       * @param tbname
+       * @param rows 可以是数组也可以是对象
+       * @returns {boolean}
+       */
+      function addSubRows(tbname, rows) {
+        if (!rows) {
+          return false;
+        }
+        let instance = refMap[tbname].value;
+        if (typeof rows == 'object') {
+          instance.addRows(rows, true);
+        } else {
+          $message.error('添加子表数据,参数不识别!');
+        }
+      }
+
+      /**
+       * 先删除后添加
+       * @param tbname
+       * @param rows
+       */
+      function clearThenAddRows(tbname, rows) {
+        clearSubRows(tbname);
+        addSubRows(tbname, rows);
+      }
+
+      /**
+       * 修改下拉框的下拉选项
+       * @param field
+       * @param options
+       */
+      function changeOptions(field, options) {
+        if (!options && options.length <= 0) {
+          options = [];
+        }
+        options.map((item) => {
+          if (!item.hasOwnProperty('label')) {
+            item['label'] = item.text;
+          }
+        });
+        updateSchema({
+          field,
+          componentProps: {
+            options,
+          },
+        });
+      }
+
+      /**
+       * 表单提交前事件
+       * @param that
+       * @param formData
+       * @returns {Promise<void>|*}
+       */
+      function customBeforeSubmit(that, formData) {
+        if (EnhanceJS && EnhanceJS['beforeSubmit']) {
+          return EnhanceJS['beforeSubmit'](that, formData);
+        } else {
+          return Promise.resolve();
+        }
+      }
+
+      /**
+       * 处理自定义弹框 字段的显示隐藏
+       * @param show
+       * @param hide
+       */
+      function handleCustomFormSh(show, hide) {
+        let plain = toRaw(fieldDisplayStatus);
+        if (show && show.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (!k.endsWith('_load') && show.indexOf(k) < 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        } else if (hide && hide.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (hide.indexOf(k) >= 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        }
+      }
+
+      async function handleCustomFormEdit(record) {
+        console.log('自定义弹窗打开online表单》》form', record);
+        await resetFields();
+        dbData.value = '';
+        isUpdate.value = true;
+        // 编辑数据
+        await edit(record);
+        await nextTick(() => {
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+        });
+      }
+
+      /**
+       * VUEN-1036
+       * 获取子表的实例对象 可以直接调用子表的方法
+       */
+      function getSubTableInstance(tableName) {
+        let instance = refMap[tableName].value;
+        if (instance instanceof Array) {
+          instance = instance[0];
+        }
+        return instance;
+      }
+      
+      //跳转至积木报表页面
+      function onOpenReportPrint(){
+        let url = onlineExtConfigJson.reportPrintUrl;
+        let id = dbData.value.id;
+        let token = getToken();
+        goJmReportViewPage(url, id, token)
+      }
+      
+      //----
+      function openSubFormModalForAdd(sub){
+        console.log(sub)
+        vxeTableId.value = sub.id;
+        openVxeFormModal(true, )
+      }
+
+      function openSubFormModalForEdit(sub){
+        console.log(sub)
+      }
+
+      /**
+       * 保存数据
+       * @param formData
+       */
+      function doApplyRequest(formData) {
+        // 数组没有元素直接置空
+        Object.keys(formData).map((key) => {
+          if (Array.isArray(formData[key])) {
+            if (formData[key].length == 0) {
+              formData[key] = '';
+            }
+          }
+        });
+        console.log('提交pop表单数据》》》form:', formData);
+        if(props.request == false){
+          emit('success', formData);
+        }else{
+          let url = `${urlObject.optPre}${props.id}?tabletype=${tableType.value}`;
+
+          console.log('提交pop表单url》》》url:', url);
+          // 如果需要提交流程 需要额外设置一个参数
+          if (submitFlowFlag.value === true) {
+            formData[SUBMIT_FLOW_KEY] = 1;
+          }
+          let method:Method = isUpdate.value === true ? 'put' : 'post';
+          defHttp.request({ url, method, params: formData }, { isTransformResponse: false })
+            .then((res) => {
+              //console.log('表单提交完成', res)
+              if (res.success) {
+                if (res.result) {
+                  //formData[SUBMIT_FLOW_ID] = res.result;
+                  if(!formData.id){
+                    formData['id'] = res.result;
+                  }
+                }
+                //刷新列表
+                emit('success', formData);
+                dbData.value = formData;
+                isUpdate.value = true;
+                $message.success('操作成功!')
+                // 工单申请提交的表单也会走这个逻辑，保存成功不需要提示信息
+              } else {
+                $message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              loading.value = false;
+            });
+        }
+      }
+
+
+      /**
+       * 数据恢复到 dbdata
+       */
+      async function recoverFormData(){
+        let record = dbData.value;
+        let arr = realFormFieldNames.value;
+        let values = pick(record, ...arr);
+        if(record){
+          await setFieldsValue(values);
+        }else{
+          let temp:any = {}
+          for(let key of arr){
+            temp[key] = ''
+          }
+          await setFieldsValue(temp);
+        }
+      }
+
+      let context = {
+        tableName,
+        loading,
+        subActiveKey,
+        onlineFormRef,
+        getFieldsValue,
+        setFieldsValue,
+        submitFlowFlag,
+        subFormHeight,
+        subTableHeight,
+        refMap,
+        triggleChangeValues,
+        triggleChangeValue,
+        sh: fieldDisplayStatus,
+        clearSubRows,
+        addSubRows,
+        clearThenAddRows,
+        changeOptions,
+        isUpdate,
+        getSubTableInstance,
+      };
+      resetContext(context);
+
+      return {
+        //主表
+        tableName,
+        onlineFormRef,
+        registerForm,
+        loading,
+
+        //子表
+        subActiveKey,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+
+        //一对一子表
+        subFormHeight,
+        getSubTableForeignKeyValue,
+        isUpdate,
+        handleSubFormChange,
+
+        //一对多子表
+        subTableHeight,
+        onlineFormDisabled,
+        subDataSource,
+        getSubTableAuthPre,
+        handleAdded,
+        handleValueChange,
+        openSubFormModalForAdd,
+        openSubFormModalForEdit,
+        registerVxeFormModal,
+        vxeTableId,
+
+        //父组件调用
+        show,
+        createRootProperties,
+        handleSubmit,
+        sh: fieldDisplayStatus,
+        handleCgButtonClick,
+        handleCustomFormSh,
+        handleCustomFormEdit,
+        //跳转
+        dbData,
+        onOpenReportPrint,
+        onlineExtConfigJson,
+        recoverFormData
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .onlinePopFormWrap {
+    // update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    padding: 20px 1.5% 0 1.5%;
+    // update-begin--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    &.formTemplate_1 {
+      > form {
+        padding-left: 5%;
+        padding-right: 5%;
+      }
+    }
+    &.formTemplate_2 {
+      > form {
+        padding-left: 1%;
+        padding-right: 1%;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    :deep(.ant-form) {
+      > .ant-row {
+        > .ant-col {
+          padding: 0 6px;
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240429---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlinePopListModal.vue b/src/views/super/online/cgform/auto/comp/OnlinePopListModal.vue
new file mode 100644
index 0000000..bcab85c
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlinePopListModal.vue
@@ -0,0 +1,342 @@
+<template>
+    <BasicModal @register="registerModal" :width="popModalFixedWidth" :dialogStyle="{top: '70px'}" :bodyStyle="popBodyStyle" :title="modalTitle" wrapClassName="jeecg-online-pop-list-modal">
+        <template #footer>
+            <div style="display: inline-block;width: calc(100% - 140px);text-align: left;">
+                <a-button v-if="addAuth" style="border-radius: 50px" type="primary" @click="handleAdd"><PlusOutlined/>新增记录</a-button>
+            </div>
+            <a-button key="back" @click="handleCancel">关闭</a-button>
+            <a-button :disabled="submitDisabled" key="submit" type="primary" @click="handleSubmit" :loading="submitLoading">确定</a-button>
+        </template>
+        
+        
+        <BasicTable @register="registerTable" :rowSelection="rowSelection">
+            
+            <!-- update-begin-author:taoyan date:2023-7-11 for: issues/4992 online表单开发 字段控件类型是关联记录 新增的时候选择列表可以添加查询么 -->
+            <template #tableTitle>
+                <a-input-search v-model:value="searchText" @search="onSearch"  placeholder="请输入关键词，按回车搜索"  style="width: 240px" />
+            </template>
+            <!-- update-end-author:taoyan date:2023-7-11 for: issues/4992 online表单开发 字段控件类型是关联记录 新增的时候选择列表可以添加查询么 -->
+            
+            <!--操作栏-->
+            <template #action="{ record }">
+                <TableAction :actions="getTableAction(record)">
+                </TableAction>
+            </template>
+
+            <template #fileSlot="{ text }">
+                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+                <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text)"> 下载 </a-button>
+            </template>
+
+            <template #imgSlot="{ text }">
+                <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+                <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+            </template>
+
+            <template #htmlSlot="{ text }">
+                <div v-html="text"></div>
+            </template>
+
+            <template #pcaSlot="{ text, column }">
+                <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+            </template>
+
+            <template #dateSlot="{ text, column }">
+                <span>{{ getFormatDate(text, column) }}</span>
+            </template>
+            
+        </BasicTable>
+    </BasicModal>
+
+    <!-- 弹窗到另外一张表单用-可编辑表单 -->
+    <online-pop-modal :id="id" @register="registerPopModal" @success="handleDataSave" topTip></online-pop-modal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref, toRaw, computed } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { useModal } from '/@/components/Modal';
+  import OnlinePopModal from './OnlinePopModal.vue';
+  import { useFixedHeightModal } from '../../hooks/auto/useAutoModal';
+  
+  export default defineComponent({
+    name: 'OnlinePopListModal',
+    props: {
+      /**可以是表名 可以是ID*/
+      id: {
+        type: String,
+        default: '',
+      },
+      multi:{
+        type: Boolean,
+        default: false
+      },
+      addAuth:{
+        type: Boolean,
+        default: true
+      }
+    },
+    components: {
+      BasicModal,
+      BasicTable,
+      TableAction,
+      PlusOutlined,
+      OnlinePopModal
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+      // 弹窗高度控制
+      const { popModalFixedWidth, resetBodyStyle, popBodyStyle } = useFixedHeightModal();
+      const searchText = ref('');
+      const modalWidth = ref(800);
+      //useModalInner
+      const [registerModal, {closeModal}] = useModalInner((data) => {
+        searchText.value = '';
+        // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+        selectedRowKeys.value = data.selectedRowKeys;
+        selectedRows.value = data.selectedRows;
+        // update-end--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+        setPagination({current:1})
+        reload();
+        resetBodyStyle();
+      });
+
+      // 用于 online表单中 弹出别的表单
+      const [registerPopModal, { openModal: openPopModal }] = useModal();
+      
+      function handleCancel() {
+        closeModal();
+      }
+      const submitDisabled = computed(()=>{
+        const arr = selectedRowKeys.value;
+        if(arr && arr.length>0){
+          return false;
+        }
+        return true;
+      })
+      const submitLoading = ref(false);
+      function handleSubmit(){
+        submitLoading.value = true;
+        let arr = toRaw(selectedRows.value);
+        if(arr && arr.length>0){
+          emit('success', arr)
+          closeModal();
+        }
+        setTimeout(()=>{
+          submitLoading.value = false
+        }, 200);
+      }
+      
+      //---------------------列表------------------------
+      function queryTableData(params){
+        const url = '/online/cgform/api/getData/'+props.id;
+        return defHttp.get({ url, params });
+      }
+      
+      function list(params){
+        params['column'] = 'id';
+        return new Promise(async (resolve, _reject) => {
+          const aa = await queryTableData(params)
+          resolve(aa);
+        })
+      }
+
+      const onlineTableContext = {
+        isPopList: true,
+        reloadTable(){
+          console.log('reloadTable')
+        },
+        isTree(){
+          return false;
+        }
+      };
+      const extConfigJson = ref<any>({});
+
+      // 处理 BasicTable 的配置
+      const {
+        columns,
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+        handleColumnResult,
+        hrefComponent,
+        viewOnlineCellImage,
+      } = useTableColumns(onlineTableContext, extConfigJson);
+
+
+      /**
+       * 查询table列信息 及其他配置
+       */
+      function getColumnList() {
+        const url = '/online/cgform/api/getColumns/'+props.id;
+        return new Promise((resolve, reject) => {
+          defHttp.get({url}, { isTransformResponse: false }).then((res) => {
+            if (res.success) {
+              resolve(res.result);
+            } else {
+              $message.warning(res.message);
+              reject();
+            }
+          })
+        });
+      }
+
+      const modalTitle = ref('')
+      watch(()=>props.id, async ()=>{
+        let columnResult:any = await getColumnList();
+        handleColumnResult(columnResult);
+        modalTitle.value = columnResult.description;
+      }, {immediate: true})
+
+      const { tableContext } = useListPage({
+        designScope: 'process-design',
+        pagination: true,
+        tableProps: {
+          title: '',
+          api: list,
+          clickToRowSelect: true,
+          columns: columns,
+          showTableSetting: false,
+          immediate:false,
+          //showIndexColumn: true,
+          canResize: false,
+          showActionColumn: false,
+          actionColumn: {
+            dataIndex: 'action',
+            slots: { customRender: 'action' },
+          },
+          useSearchForm: false,
+          beforeFetch: (params) => {
+            return addQueryParams(params);
+          },
+        },
+      });
+      const [registerTable, { reload, setPagination }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+      watch(()=>props.multi, (val)=>{
+        if(val==true){
+          rowSelection.type = 'checkbox'
+        }else{
+          rowSelection.type = 'radio'
+        }
+      }, {immediate: true});
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: handleUpdate.bind(null, record),
+          }
+        ];
+      }
+  
+      function handleUpdate(record){
+        console.log('handleUpdate', record)
+      }
+     
+      function onSearch(){
+        reload();
+      }
+      const eqConditonTypes = ['int', 'double', 'Date', 'Datetime', 'BigDecimal']
+      function addQueryParams(params){
+        let text = searchText.value;
+        if(!text){
+          params['superQueryMatchType'] = 'or';
+          params['superQueryParams'] = ''
+          return params;
+        }
+        let arr = columns.value;
+        let conditions:any[] = []
+        if(arr && arr.length>0){
+          for(let item of arr){
+            if(item.dbType){
+              if(item.dbType == 'string'){
+                conditions.push({field: item.dataIndex,type:item.dbType.toLowerCase(), rule: 'like', val: text})
+              }else if(item.dbType == 'Date'){
+                if(text.length=='2020-10-10'.length){
+                  conditions.push({field: item.dataIndex,type:item.dbType.toLowerCase(), rule: 'eq', val: text})
+                }
+              }else if(item.dbType == 'Datetime'){
+                if(text.length=='2020-10-10 10:10:10'.length){
+                  conditions.push({field: item.dataIndex,type:item.dbType.toLowerCase(), rule: 'eq', val: text})
+                }
+              }else if(eqConditonTypes.indexOf(item.dbType)){
+                conditions.push({field: item.dataIndex, type:item.dbType.toLowerCase(), rule: 'eq', val: text})
+              }else{
+                //text blob不做处理
+              }
+            }
+          }
+        }
+        params['superQueryMatchType'] = 'or';
+        params['superQueryParams'] = encodeURI(JSON.stringify(conditions));
+        return params;
+      }
+  
+      function handleAdd(){
+        openPopModal(true, {})
+      }
+      
+      // modal数据新增完成 直接关闭list，将新增的数据带回表单
+      function handleDataSave(data){
+        console.log('handleDateSave' ,data)
+        // update-begin--author:liaozhiyang---date:20250429---for：【issues/8163】关联记录新增丢失
+        let arr = [data, ...selectedRows.value];
+        // update-end--author:liaozhiyang---date:20250429---for：【issues/8163】关联记录新增丢失
+        emit('success', arr);
+        closeModal();
+        //reload();
+      }
+      
+      return {
+        registerModal,
+        modalWidth,
+        handleCancel,
+        submitDisabled,
+        submitLoading,
+        handleSubmit,
+
+        registerTable,
+        getTableAction,
+        searchText,
+        onSearch,
+
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+        hrefComponent,
+        viewOnlineCellImage,
+        rowSelection,
+        modalTitle,
+
+        registerPopModal,
+        handleAdd,
+        reload,
+
+        popModalFixedWidth,
+        popBodyStyle,
+        handleDataSave
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+.online-cell-image {
+  max-height: 30px;
+  max-width: 50px;
+  object-fit: contain;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlinePopModal.vue b/src/views/super/online/cgform/auto/comp/OnlinePopModal.vue
new file mode 100644
index 0000000..4f22246
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlinePopModal.vue
@@ -0,0 +1,222 @@
+<template>
+    <BasicModal :width="popModalFixedWidth" :dialogStyle="{top: '70px'}" :bodyStyle="popBodyStyle" v-bind="$attrs" :footer="modalFooter" cancelText="关闭" @register="registerModal" wrapClassName="jeecg-online-pop-modal" @ok="handleSubmit">
+        <template #title>
+            {{title}}
+            <j-modal-tip v-if="showTopTip" :visible="topTipVisible" @save="handleSaveData" @cancel="handleRecover"></j-modal-tip>
+        </template>
+        
+        <online-pop-form
+            ref="onlineFormCompRef"
+            :id="id"
+            :disabled="disableSubmit"
+            :form-template="formTemplate"
+            :isTree="isTreeForm"
+            :pidField="pidFieldName"
+            :request="request"
+            :isVxeTableData="isVxeTableData"
+            @rendered="renderSuccess"
+            @success="handleSuccess"
+            @data-change="handleDataChange"
+            modal-class="jeecg-online-pop-modal"
+        >
+        </online-pop-form>
+    </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, watchEffect, ref, computed, h } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import OnlinePopForm from './OnlinePopForm.vue';
+  import { useAutoModal } from '../../hooks/auto/useAutoModal';
+  import JModalTip from '../../extend/linkTable/JModalTip.vue'
+  import { Button } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'OnlinePopModal',
+    props: {
+      /**可以是表名 可以是ID*/
+      id: {
+        type: String,
+        default: '',
+      },
+      /*展示字段名*/
+      showFields:{
+        type: Array,
+        default: ()=>[],
+      },
+      /*隐藏字段名*/
+      hideFields:{
+        type: Array,
+        default: ()=>[],
+      },
+      topTip:{
+        type: Boolean,
+        default: false,
+      },
+      request:{
+        type: Boolean,
+        default: true,
+      },
+      saveClose:{
+        type: Boolean,
+        default: false
+      },
+      // 是否是vxeTable上方按钮点击打开的表单数据
+      isVxeTableData:{
+        type: Boolean,
+        default: false
+      },
+      formTableType:{
+        type: String,
+        default: '',
+      },
+      // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+      // 有taskId即是流程
+      taskId: {
+        type: String,
+      },
+      tableName: {
+        type: String,
+      },
+      // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+    },
+    components: {
+      BasicModal,
+      OnlinePopForm,
+      JModalTip,
+      Button
+    },
+    emits: ['success', 'register', 'formConfig'],
+    setup(props, { emit }) {
+      console.log('进入表单弹框》》》》modal');
+      
+      const {
+        title,
+        registerModal,
+        cgButtonList,
+        handleCgButtonClick,
+        disableSubmit,
+        handleSubmit,
+        submitLoading,
+        handleCancel,
+        handleFormConfig,
+        onlineFormCompRef,
+        formTemplate,
+        isTreeForm,
+        pidFieldName,
+        renderSuccess,
+        formRendered,
+        handleSuccess,
+        topTipVisible,
+        successThenClose,
+        isUpdate,
+        popBodyStyle,
+        popModalFixedWidth,
+        getFormStatus
+      } = useAutoModal(false, { emit });
+
+      // 监听id变化 表单重新渲染
+      watch(() => props.id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!props.id) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        
+        //update-begin-author:taoyan date:2023-4-10 for: issues/4655 online在线表单（一对多），对子表记录进行新增或编辑时，无法获取到表单信息 #4655
+        let params = {}
+        if(props.formTableType){
+          params['tabletype'] = props.formTableType
+        }
+        // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        if (props.taskId) {
+          await handleFormConfig(props.id, params,null,props.taskId, props.tableName );
+        } else {
+          await handleFormConfig(props.id, params);
+        }
+        // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+        //update-end-author:taoyan date:2023-4-10 for: issues/4655 online在线表单（一对多），对子表记录进行新增或编辑时，无法获取到表单信息 #4655
+        
+      }
+      
+      // 上方保存按钮触发
+      function handleSaveData() {
+        //如果props的saveClose没有设置为true则弹窗不会关闭
+        if(props.saveClose === false){
+          successThenClose.value = false;
+        }
+        handleSubmit();
+      }
+      
+      // 上方取消按钮触发
+      function handleRecover(){
+        topTipVisible.value = false;
+        onlineFormCompRef.value.recoverFormData()
+      }
+      
+      // 表单数据改变触发modal事件
+      function handleDataChange(){
+        topTipVisible.value = true;
+      }
+      
+      // 只有编辑页面才需要显示顶部保存按钮
+      const showTopTip = computed(()=>{
+        // update-begin--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        if (disableSubmit.value) {
+          return false;
+        }
+        // update-end--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        if(!isUpdate.value){
+          return false;
+        }
+        return props.topTip
+      });
+
+      // 编辑页面没有底部按钮
+      const modalFooter = computed(()=>{
+        if(isUpdate.value==true){
+          return null;
+        }else{
+          let flag = submitLoading.value;
+          const defaultFooter:any[] = [
+            h(Button, { type: 'primary', loading: flag, onClick: handleSubmit },()=>'确定'),
+            h(Button, { onClick:handleCancel },()=>'关闭')
+          ];
+          return defaultFooter
+        }
+      });
+      
+      const that = {
+        title,
+        topTipVisible,
+        handleSaveData,
+        handleRecover,
+        onlineFormCompRef,
+        renderSuccess,
+        registerModal,
+        handleSubmit,
+        handleSuccess,
+        handleCancel,
+        formTemplate,
+        disableSubmit,
+        cgButtonList,
+        handleCgButtonClick,
+        isTreeForm,
+        pidFieldName,
+        submitLoading,
+        handleDataChange,
+        isUpdate,
+        showTopTip,
+        modalFooter,
+        popBodyStyle,
+        popModalFixedWidth,
+        getFormStatus
+      };
+
+      return that;
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineQueryForm.vue b/src/views/super/online/cgform/auto/comp/OnlineQueryForm.vue
new file mode 100644
index 0000000..005ff21
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineQueryForm.vue
@@ -0,0 +1,863 @@
+<template>
+  <div class="jeecg-basic-table-form-container online-query-form p-0" v-if="formSchemas && formSchemas.length > 0">
+    <BasicForm ref="onlineQueryFormRef" @register="registerForm">
+      <!-- 范围查询：日期 -->
+      <template #groupDate="{ model, field, schema }">
+        <!-- update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+        <!-- <a-date-picker
+          :showTime="false"
+          valueFormat="YYYY-MM-DD"
+          placeholder="开始日期"
+          v-model:value="model[field + '_begin']"
+          style="width: calc(50% - 15px);min-width: 100px;"
+          v-bind="schema.componentProps"
+        ></a-date-picker>
+        <span class="group-query-string">~</span>
+        <a-form-item-rest>
+          <a-date-picker
+            :showTime="false"
+            valueFormat="YYYY-MM-DD"
+            placeholder="结束日期"
+            v-model:value="model[field + '_end']"
+            style="width: calc(50% - 15px);min-width: 100px;"
+            v-bind="schema.componentProps"
+          ></a-date-picker>
+        </a-form-item-rest> -->
+        <a-range-picker :style="{ width: '100%' }" v-model:value="model[field]" v-bind="schema.componentProps" :placeholder="getGroupDatePlaceholder(schema.componentProps)" valueFormat="YYYY-MM-DD"/>
+        <!-- update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+      </template>
+
+      <!-- 范围查询：时间 -->
+      <template #groupDatetime="{ model, field }">
+        <!-- update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+        <!-- <a-date-picker
+          :showTime="true" 
+          valueFormat="YYYY-MM-DD HH:mm:ss"
+          placeholder="开始时间"
+          v-model:value="model[field + '_begin']"
+          style="min-width: 100px;width: calc(50% - 15px);"
+        ></a-date-picker>
+        <span class="group-query-string">~</span>
+        <a-form-item-rest>
+          <a-date-picker
+            :showTime="true"
+            valueFormat="YYYY-MM-DD HH:mm:ss"
+            placeholder="结束时间"
+            v-model:value="model[field + '_end']"
+            style="min-width: 100px;width: calc(50% - 15px);"
+          ></a-date-picker>
+        </a-form-item-rest> -->
+        <a-range-picker :style="{ width: '100%' }" v-model:value="model[field]" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+        <!-- update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+      </template>
+
+      <!-- update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能 -->
+      <!-- 范围查询：时间 -->
+      <template #groupTime="{ model, field }">
+        <!-- update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+        <!-- <a-time-picker
+          placeholder="开始时间"
+          value-format="HH:mm:ss"
+          v-model:value="model[field + '_begin']"
+          style="min-width: 100px;width: calc(50% - 15px);"
+        ></a-time-picker>
+        <span class="group-query-string">~</span>
+        <a-form-item-rest>
+          <a-time-picker
+            placeholder="结束时间"
+            value-format="HH:mm:ss"
+            v-model:value="model[field + '_end']"
+            style="min-width: 100px;width: calc(50% - 15px);"
+          ></a-time-picker>
+        </a-form-item-rest> -->
+        <a-time-range-picker :style="{ width: '100%' }" v-model:value="model[field]" value-format="HH:mm:ss" />
+        <!-- update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+      </template>
+      <!-- update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能 -->
+
+      <!-- 范围查询：数值 -->
+      <template #groupNumber="{ model, field, schema }">
+        <!-- update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+        <!-- <a-input-number placeholder="开始值" v-model:value="model[field + '_begin']" style="width: calc(50% - 15px)"></a-input-number>
+        <span class="group-query-string">~</span>
+        <a-form-item-rest>
+          <a-input-number placeholder="结束值" v-model:value="model[field + '_end']" style="width: calc(50% - 15px)"></a-input-number>
+        </a-form-item-rest> -->
+        <JRangeNumber v-model:value="model[field]" v-bind="schema.componentProps" />
+        <!-- update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换 -->
+      </template>
+
+      <!-- 查询/重置按钮-->
+      <template #formFooter>
+        <a-col :md="6" :sm="8">
+          <span style="float: left; overflow: hidden; margin-left: 10px" class="table-page-search-submitButtons">
+            <a-button
+                v-if="queryBtnCfg.enabled"
+                type="primary"
+                :preIcon="queryBtnCfg.buttonIcon"
+                @click="doSearch"
+            >
+              <span>{{ queryBtnCfg.buttonName }}</span>
+            </a-button>
+            <a-button
+                v-if="resetBtnCfg.enabled"
+                type="primary"
+                :preIcon="resetBtnCfg.buttonIcon"
+                style="margin-left: 8px"
+                @click="resetSearch"
+            >
+              <span>{{ resetBtnCfg.buttonName }}</span>
+            </a-button>
+            <a v-if="toggleButtonShow" @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
+              {{ toggleSearchStatus ? '收起' : '展开' }}
+              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+            </a>
+          </span>
+        </a-col>
+      </template>
+    </BasicForm>
+  </div>
+</template>
+
+<script>
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { watch, ref, reactive, toRaw, isProxy } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import FormSchemaFactory from './factory/FormSchemaFactory';
+  import IFormSchema from './factory/IFormSchema';
+  import { handleLinkDown, getFieldIndex, getRefPromise, LINK_DOWN } from '../../hooks/auto/useAutoForm';
+  import { ONL_QUERY_LABEL_COL, ONL_QUERY_WRAPPER_COL, FORM_VIEW_TO_QUERY_VIEW } from '../../types/onlineRender';
+  import { loadOneFieldDefVal } from '../../util/FieldDefVal';
+  import { useExtendComponent } from '../../hooks/auto/useExtendComponent';
+  import { LABELLENGTH } from '../../util/constant';
+  import dayjs from 'dayjs';
+  import JRangeNumber from '/@/components/Form/src/jeecg/components/JRangeNumber.vue'
+  import { useDebounceFn } from "@vueuse/core";
+  
+  export default {
+    name: 'OnlineQueryForm',
+    components: {
+      BasicForm,
+      JRangeNumber,
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      queryBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '查询',
+            buttonIcon: 'ant-design:search',
+          }
+        }
+      },
+      resetBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '重置',
+            buttonIcon: 'ant-design:reload',
+          }
+        }
+      },
+    },
+    emits: ['search', 'loaded'],
+    setup(props, { emit }) {
+      // 获取查询条件请求地址
+      const LOAD_URL = '/online/cgform/api/getQueryInfoVue3/';
+      // 表单ref
+      const onlineQueryFormRef = ref(null);
+      // 表单渲染用到的配置
+      const formSchemas = ref([]);
+      // 表单栅格 VUEN-2493【优化】online默认查询条件太宽了，参考online报表
+      const baseColProps = ref({ xs:24, sm: 24, md: 12, lg:6, xl:6 });
+      // 切换字段显示隐藏按钮是否显示
+      const toggleButtonShow = ref(false);
+      // 是否显示所有查询字段
+      const toggleSearchStatus = ref(false);
+      // 查询条件
+      const queryParams = ref({});
+      // 需要隐藏的字段
+      const hideList = ref([]);
+      const { createMessage: $message } = useMessage();
+      const { linkTableCard2Select } = useExtendComponent();
+      const formLabelWidth = ref(80);
+      /**
+       *  默认值分三种,param > cache > config
+       *  1.表单配置-config
+       *  2.路由缓存-cache
+       *  3.地址栏参数-param
+       *  当表单id发生改变，config改变，列表页传入cache，param;监听status change然后重置表单的值
+       */
+      const defaultValues = reactive({
+        config: {},
+        cache: {},
+        param: {},
+        status: false,
+      });
+
+      const debouncedCustomSetFieldsValue = useDebounceFn(customSetFieldsValue, 500);
+      
+      /**
+       * 监听cacheFormValues
+       */
+      watch(
+        () => defaultValues.status,
+        async (val) => {
+          console.log('-------------defaultValues发生改变,需要重置表单---------------');
+          const { config, cache, param } = toRaw(defaultValues);
+          let rawValues = Object.assign({}, config, cache, param);
+          //update-begin---author:wangshuai---date:2025-10-11---for:【issues/8790】online 表单重大 bug，影响配置了查询 的所有表单---
+          await debouncedCustomSetFieldsValue(rawValues);
+          //update-end---author:wangshuai---date:2025-10-11---for:【issues/8790】online 表单重大 bug，影响配置了查询 的所有表单---
+        },
+        { immediate: true, deep: true }
+      );
+
+      /**
+       * 设置默认值
+       * @param values
+       */
+      async function initDefaultValues(cache, param) {
+        defaultValues.cache = { ...cache };
+        defaultValues.param = { ...param };
+        defaultValues.status = !defaultValues.status;
+      }
+
+      const clearObj = (obj) => {
+        Object.keys(obj).map((key) => {
+          delete obj[key];
+        });
+      };
+
+      // 监听
+      watch(
+        () => props.id,
+        (val) => {
+          if (val) {
+            resetForm();
+          } else {
+            formSchemas.value = [];
+          }
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 获取表单配置
+       */
+      async function initSchemas(formProperties) {
+        let arr = [];
+        let configValue = {};
+        let keys = Object.keys(formProperties);
+        let setLabelLength = -1;
+        for (let key of keys) {
+          const item = formProperties[key];
+          
+          //update-begin-author:taoyan date:2023-7-19 for:QQYUN-5783 配置的数据字典参数，问题是在查询的部门选择组件那儿，表单定义不能更改传给后端org_code。看后端代码，给组件value传的也是id，这儿需要调整。
+          if(key === 'sys_org_code'){
+            if(!item.fieldExtendJson){
+              item.fieldExtendJson = '{"store":"orgCode"}'
+            }
+          }
+          //update-end-author:taoyan date:2023-7-19 for:QQYUN-5783 配置的数据字典参数，问题是在查询的部门选择组件那儿，表单定义不能更改传给后端org_code。看后端代码，给组件value传的也是id，这儿需要调整。
+          
+          let view = item.view;
+          // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+          item.originView = item.view;
+          // update-end--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+          if (FORM_VIEW_TO_QUERY_VIEW[view]) {
+            item.view = FORM_VIEW_TO_QUERY_VIEW[view];
+          }
+          await loadOneFieldDefVal(key, item, configValue);
+          if (item.mode == 'group' && ('date' == view || 'datetime' == view || 'number' == view || 'time' == view )) {
+            // 范围查询-日期，时间，数值
+            let temp = FormSchemaFactory.createSlotFormSchema(key, item);
+            arr.push(temp);
+          } else {
+            if (item.view === LINK_DOWN) {
+              let array = handleLinkDown(item, key);
+              for (let linkDownItem of array) {
+                let temp = FormSchemaFactory.createFormSchema(linkDownItem.key, linkDownItem);
+                let tempIndex = getFieldIndex(arr, linkDownItem.key);
+                if (tempIndex == -1) {
+                  arr.push(temp);
+                } else {
+                  arr[tempIndex] = temp;
+                }
+              }
+            } else {
+              let tempIndex = getFieldIndex(arr, key);
+              if (tempIndex == -1) {
+                let temp = FormSchemaFactory.createFormSchema(key, item);
+                arr.push(temp);
+              }
+            }
+          }
+          // update-begin--author:liaozhiyang---date:20231205---for：【QQYUN-7140】online label默认显示6个
+          let fieldExtendJson = item.fieldExtendJson;
+          if (fieldExtendJson) {
+            fieldExtendJson = JSON.parse(fieldExtendJson);
+            if (fieldExtendJson.labelLength) {
+              console.log(key, fieldExtendJson.labelLength);
+              if (setLabelLength > -1) {
+                // 取配置中设置的最大值，所有label的长度应一致，否则多行会对不齐
+                setLabelLength = fieldExtendJson.labelLength > setLabelLength ? fieldExtendJson.labelLength : setLabelLength;
+              } else {
+                setLabelLength = fieldExtendJson.labelLength;
+              }
+            }
+          }
+          // update-end--author:liaozhiyang---date:20231205---for：【QQYUN-7140】online label默认显示6个
+        }
+        // update-begin--author:liaozhiyang---date:20231205---for：【QQYUN-7140】online label默认显示6个
+        // 配置中没有设置,读取默认的长度
+        if (setLabelLength == -1) {
+          setLabelLength = LABELLENGTH;
+        } else {
+          // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-98】label展示的文字必须和labelLength配置一致
+          arr.forEach(item=>{
+            item.labelLength = setLabelLength;
+          })
+          // update-end--author:liaozhiyang---date:20240517---for：【TV360X-98】label展示的文字必须和labelLength配置一致
+        }
+        // update-end--author:liaozhiyang---date:20231205---for：【QQYUN-7140】online label默认显示6个
+        arr.sort(function (a, b) {
+          return a.order - b.order;
+        });
+        let schemaArray = [];
+        if (arr.length > 2) {
+          toggleButtonShow.value = true;
+        }
+        let hideFieldName = [];
+        for (let i = 0; i < arr.length; i++) {
+          let item = arr[i];
+          item.setFormRef(onlineQueryFormRef);
+          item.noChange();
+          item.asSearchForm();
+          if (i > 1) {
+            hideFieldName.push(item.field);
+            item.isHidden();
+          }
+          //update-begin-author:taoyan date:2022-10-24 for: VUEN-2493【优化】online默认查询条件太宽了，参考online报表
+          let tempSchema = item.getFormItemSchema();
+          if(item.slot == 'groupDatetime'){
+            // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+            //如果是时间类型 重新设定colprops (小于3个时才重置，否则多行会导致对不齐)
+            arr.length <= 3 && (tempSchema['colProps'] = { xs:24, sm: 24, md: 12, lg:8, xl:8 })
+            // update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+          }
+          // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-250】查询区域把Switch开关组件改成select组件
+          if (tempSchema.component === 'JSwitch') {
+            const componentProps = tempSchema.componentProps ?? {};
+            tempSchema.componentProps = { ...componentProps, query: true };
+          }
+          // update-end--author:liaozhiyang---date:20240522---for：【TV360X-250】查询区域把Switch开关组件改成select组件
+          linkTableCard2Select(tempSchema);
+          // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+          if (tempSchema.component === 'LinkTableSelect') {
+            let componentProps = tempSchema.componentProps ?? {};
+            tempSchema.componentProps = { ...componentProps, editBtnShow: false };
+          }
+          // update-end--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+          // update-begin--author:liaozhiyang---date:20240614---for：【TV360X-1231】查询区域有的下拉组件显示不全
+          const compProps = tempSchema.componentProps ?? {};
+          if (!compProps.getPopupContainer) {
+            tempSchema.componentProps = { ...compProps, getPopupContainer: () => document.body };
+          }
+          // update-end--author:liaozhiyang---date:20240614---for：【TV360X-1231】查询区域有的下拉组件显示不全
+          // update-begin--author:liaozhiyang---date:20240725---for：【TV360X-1857】online查询增加模糊查询
+           const fieldData = formProperties[tempSchema.field] ?? {};
+          // 【TV360X-1966】页面属性控件配置了文本框且字段类型是string，个性化查询配置了用户组件，用户组件不生效
+          if (fieldData.mode == 'like' && fieldData.view === 'text' && fieldData.originView === 'text') {
+            tempSchema.component = 'JInput';
+          }
+          // update-end--author:liaozhiyang---date:20240725---for：【TV360X-1857】online查询增加模糊查询
+          schemaArray.push(tempSchema);
+          //update-end-author:taoyan date:2022-10-24 for: VUEN-2493【优化】online默认查询条件太宽了，参考online报表
+        }
+        hideList.value = hideFieldName;
+        formSchemas.value = schemaArray;
+        //设置表单默认值
+        defaultValues.config = { ...configValue };
+        defaultValues.status = !defaultValues.status;
+        // update-begin--author:liaozhiyang---date:20231204---for：【QQYUN-7140】online label默认显示6个
+        setTimeout(() => {
+          // 14是文字size，24是间隙
+          const w = setLabelLength * 14 + setLabelLength + 24;
+          formLabelWidth.value = w;
+        }, 0);
+        // update-end--author:liaozhiyang---date:20231204---for：【QQYUN-7140】online label默认显示6个
+      }
+      /**
+       * 2024-05-31
+       * liaozhiyang
+       * 【TV360X-415】个性化查询支持年、月、周、季度.
+       * 解析特定view(组件)字段的值，把view字段值为date_year、date_month、date_week、date_quarter
+       * 改成date，并组装fieldExtendJson
+       */
+      const analysisComponent = (res) => {
+        const properties = res.properties;
+        if (properties) {
+          Object.entries(properties).forEach(([key, value]) => {
+            const data = value;
+            if (['date_year', 'date_month', 'date_week', 'date_quarter'].includes(data.view)) {
+              const fieldExtendJson = data.fieldExtendJson ? JSON.parse(data.fieldExtendJson) : {};
+              fieldExtendJson.picker = data.view.split('_')[1];
+              data.fieldExtendJson = JSON.stringify(fieldExtendJson);
+              data.view = 'date';
+            }
+          });
+        }
+      };
+      async function resetForm() {
+        let json = await loadQueryInfo();
+        // update-begin--author:liaozhiyang---date:20240531---for：【TV360X-415】个性化查询支持年、月、周、季度
+        analysisComponent(json);
+        // update-end--author:liaozhiyang---date:20240318---for：【TV360X-415】个性化查询支持年、月、周、季度
+        // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-516】高级查询过滤掉不支持查询的组件
+        // filterComponent(json);
+        // update-end--author:liaozhiyang---date:20240524---for：【TV360X-516】高级查询过滤掉不支持查询的组件
+        // 获取所有字段配置 通过事件回传给高级查询组件
+        let allFields = getAllFields(json);
+        emit('loaded', json);
+        // 获取查询条件表单页面配置
+        let { formProperties, hasField } = getQueryFormProperties(allFields, json);
+        if (hasField == false) {
+          formSchemas.value = [];
+          return;
+        }
+        // 获取表单配置formSchemas
+        await initSchemas(formProperties);
+      }
+      /**
+       * 2024-05-24
+       * liaozhiyang
+       * 过滤掉不支持查询的组件（图片、文件、密码、关联记录、联动）
+       */
+      const filterComponent = (data) => {
+        const { properties = {} } = data;
+        Object.entries(properties).forEach(([field, value]) => {
+          if (value.view === 'table') {
+            filterComponent(value);
+          }
+          if (['image', 'password', 'file', 'link_table', 'link_down'].includes(value.view)) {
+            delete properties[field];
+          }
+        });
+      };
+      /**
+       * 设置表单的值
+       */
+      async function customSetFieldsValue(rawValues) {
+        await getRefPromise(onlineQueryFormRef);
+        console.log('rawValues', rawValues);
+        // update-begin--author:liaozhiyang---date:20240618---for：online普通查询默认值范围查询不好使
+        const values = transformGroupDefValus(rawValues);
+        await setFieldsValue(values);
+        // update-end--author:liaozhiyang---date:20240618---for：online普通查询默认值范围查询不好使
+        if (Object.keys(values).length > 0) {
+          doSearch();
+        }
+      }
+
+      /**
+       * 转化
+       */
+      function getQueryFormProperties(allFields, json) {
+        const { searchFieldList, joinQuery, table } = json;
+        let hasField = false;
+        let formProperties = {};
+        if (allFields) {
+          Object.keys(allFields).map((field) => {
+            if (searchFieldList.indexOf(field) >= 0) {
+              //只找需要查询的字段
+              if (joinQuery == true) {
+                //判断是不是联合查询
+                if (field.indexOf('@') < 0) {
+                  //没有@说明是主表字段, 手动拼接上@
+                  formProperties[table + '@' + field] = allFields[field];
+                  hasField = true;
+                } else {
+                  //有@说明是子表字段，直接获取
+                  formProperties[field] = allFields[field];
+                  hasField = true;
+                }
+              } else {
+                // 不是联合查询 只查主表字段
+                if (field.indexOf('@') < 0) {
+                  formProperties[field] = allFields[field];
+                  hasField = true;
+                }
+              }
+            }
+          });
+        }
+        return {
+          formProperties,
+          hasField,
+        };
+      }
+
+      /**
+       * 获取查询条件表单配置
+       * json结构：
+       * 主表字段1：{配置1}
+       * 主表字段2：{配置2}
+       * 子表名@子表字段1：{子表字段配置1}
+       * 子表名@子表字段2：{子表字段配置2}
+       */
+      function getAllFields(json) {
+        // 获取所有配置 查询字段 是否联合查询
+        const { properties, searchFieldList, joinQuery, table } = json;
+        let allFields = {};
+        let order = 1;
+        let hasField = false;
+        Object.keys(properties).map((field) => {
+          let item = properties[field];
+          if (item.view == 'table') {
+            // 子表字段
+            // 联合查询开启才需要子表字段作为查询条件
+            let subProps = item['properties'];
+            let subTableOrder = order * 100;
+            Object.keys(subProps).map((subField) => {
+              let subItem = subProps[subField];
+              // 保证排序统一
+              subItem['order'] = subTableOrder + Number(subItem['order']);
+              let subFieldKey = field + '@' + subField;
+              allFields[subFieldKey] = subItem;
+            });
+            order++;
+          } else {
+            // 主表字段
+            item['order'] = Number(item['order']);
+            allFields[field] = item;
+          }
+        });
+        return allFields;
+      }
+
+      /**
+       * 查询返回数据格式, 需要经过getQueryFormProperties转成表单配置
+       * json结构：
+       *    table(表名)
+       *    title(表描述)
+       *    properties(表字段)
+       *        field1
+       *        field2
+       *        fieldxxx
+       *        sub-table1(子表名1)
+       *            title(子表描述1)
+       *            properties(子表字段)
+       *        sub-table2(子表名2)
+       *            title(子表描述2)
+       *            properties(子表字段)
+       */
+      function loadQueryInfo() {
+        let url = `${LOAD_URL}${props.id}`;
+        return new Promise((resolve) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              // console.log("-online列表查询条件获取配置", res);
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                resolve(false);
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              $message.warning('获取查询条件失败!');
+              resolve(false);
+            });
+        });
+      }
+      
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, updateSchema, getFieldsValue }] = useForm({
+        name: 'online-query-form',
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        baseColProps: baseColProps,
+        autoSubmitOnEnter: true,
+        labelWidth: formLabelWidth,
+        wrapperCol: null,
+        submitFunc() {
+          //update-begin---author:wangshuai---date:2025-10-11---for:【issues/8790】online 表单重大 bug，影响配置了查询 的所有表单---
+          //doSearch();
+          //update-end---author:wangshuai---date:2025-10-11---for:【issues/8790】online 表单重大 bug，影响配置了查询 的所有表单---
+        },
+        /* labelCol: ONL_QUERY_LABEL_COL,
+        wrapperCol: ONL_QUERY_WRAPPER_COL*/
+      });
+
+      /**
+       * 执行查询
+       */
+      function doSearch() {
+        let formValues = getFieldsValue();
+         // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-28】年，年月，周查询出结果不准
+        transformDateValus(formValues);
+         // update-end--author:liaozhiyang---date:20240517---for：【TV360X-28】年，年月，周查询出结果不准
+        // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+        transformGroupValus(formValues);
+        // update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+        // 还需要把地址栏参数添加进去
+        let data = Object.assign({}, toRaw(defaultValues.param), changeDataIfArray2String(formValues));
+        emit('search', data, true);
+      }
+      /**
+       * 2024-06-18
+       * liaozhiyang
+       * online普通查询默认值范围查询不好使
+       * */
+      const transformGroupDefValus = (obj) => {
+        const values = { ...obj };
+        const groupSchemas = formSchemas.value.filter((item) => ['groupTime', 'groupDatetime', 'groupNumber', 'groupDate'].includes(item.slot));
+        if (groupSchemas.length) {
+          Object.keys(values).forEach((filed) => {
+            let key;
+            const findItem = groupSchemas.find((item) => {
+              if (item.field === filed) {
+                key = filed;
+                return true;
+              }
+              return false;
+            });
+            if (findItem) {
+              const value = values[key];
+              if (typeof value === 'string') {
+                const arr = value.split(',');
+                values[key] = [...arr];
+              }
+            }
+          });
+        }
+        return values;
+      };
+
+      /**
+       * 2024-05-20
+       * liaozhiyang
+       * 【TV360X-213】把groupDatetime,groupTime,groupDate,groupNumber等范围字段分割成两个字段
+       */
+      const transformGroupValus = (values) => {
+        if (values) {
+          const groupSchemas = formSchemas.value.filter((item) => ['groupTime', 'groupDatetime', 'groupDate', 'groupNumber'].includes(item.slot));
+          if (groupSchemas.length) {
+            Object.keys(values).forEach((filed) => {
+              let key;
+              const findItem = groupSchemas.find((item) => {
+                if (item.field === filed) {
+                  key = filed;
+                  return true;
+                }
+                return false;
+              });
+              if (findItem) {
+                const value = values[key];
+                if (typeof value === 'string') {
+                  const arr = value.split(',');
+                  values[`${key}_begin`] = arr[0];
+                  values[`${key}_end`] = arr[1];
+                  delete values[key];
+                }
+              }
+            });
+          }
+        }
+      };
+      /**
+      * 2024-05-20
+      * liaozhiyang
+      * 把年，年月，周等时间重置到当前格式的第一天，因为存的时候也是第一天 (【TV360X-180】兼容时间范围)
+      */
+      const transformDateValus = (values) => {
+        const dateSchemas = formSchemas.value.filter((item) => item.componentProps?.picker && item.componentProps.picker != 'default');
+        if (dateSchemas.length) {
+          Object.keys(values).forEach((filed) => {
+            let key;
+            const findItem = dateSchemas.find((item) => {
+              if (item.field === filed || `${item.field}_begin` === filed || `${item.field}_end` === filed) {
+                key = filed;
+                return true;
+              }
+              return false;
+            });
+            if (findItem) {
+              const value = values[key];
+              if (value) {
+                // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+                const auto = (value, key, isEnd) => {
+                  const picker = findItem.componentProps.picker;
+                  if (picker === 'year') {
+                    if (isEnd) {
+                      values[key] = dayjs(value).endOf('year').format('YYYY-MM-DD');
+                    } else {
+                      values[key] = dayjs(value).startOf('year').format('YYYY-MM-DD');
+                    }
+                  } else if (picker === 'month') {
+                    if (isEnd) {
+                      values[key] = dayjs(value).endOf('month').format('YYYY-MM-DD');
+                    } else {
+                      values[key] = dayjs(value).startOf('month').format('YYYY-MM-DD');
+                    }
+                  } else if (picker === 'week') {
+                    if (isEnd) {
+                      values[key] = dayjs(value).endOf('week').format('YYYY-MM-DD');
+                    } else {
+                      values[key] = dayjs(value).startOf('week').format('YYYY-MM-DD');
+                    }
+                  } else if (picker === 'quarter') {
+                    if (isEnd) {
+                      values[key] = dayjs(value).endOf('quarter').format('YYYY-MM-DD');
+                    } else {
+                      values[key] = dayjs(value).startOf('quarter').format('YYYY-MM-DD');
+                    }
+                  }
+                };
+                if (findItem?.slot === 'groupDate') {
+                  const arr = value.split(',');
+                  auto(arr[0], `${key}_begin`, false);
+                  auto(arr[1], `${key}_end`, true);
+                  delete values[key];
+                } else {
+                  auto(value, key, false);
+                }
+                // update-end--author:liaozhiyang---date:20240530---for：【TV360X-213】普通查询日期数值组件更换
+              }
+            }
+          });
+        }
+      }
+
+      /**
+       * 重置是将 查询控件的值 重置到默认值
+       * 2024-05-23
+       * liaozhiyang
+       * 【TV360X-124】提供clearSearch方法回到初始状态
+       */
+      async function clearSearch() {
+        await resetFields();
+        const { config, param } = toRaw(defaultValues);
+        let rawValues = Object.assign({}, config, param);
+        if (Object.keys(rawValues).length > 0) {
+          await setFieldsValue(rawValues);
+        }
+        return rawValues;
+      }
+
+      async function resetSearch() {
+        const rawValues = await clearSearch();
+        emit('search', rawValues, false);
+      }
+
+      /**
+       * 有些数据是数组格式的 强转成字符串
+       */
+      function changeDataIfArray2String(data) {
+        Object.keys(data).map((k) => {
+          if (data[k]) {
+            if (data[k] instanceof Array) {
+              data[k] = data[k].join(',');
+            }
+          }
+        });
+        return data;
+      }
+
+      watch(
+        () => toggleSearchStatus.value,
+        (status) => {
+          let names = hideList.value;
+          if (names && names.length > 0) {
+            let arr = [];
+            for (let name of names) {
+              arr.push({
+                field: name,
+                show: status,
+              });
+            }
+            updateSchema(arr);
+          }
+        },
+        { immediate: false }
+      );
+      /**
+       * 2024-05-30
+       * liaozhiyang
+       * 【TV360X-392】日期placeholder修改
+       * */
+      const getGroupDatePlaceholder = (data) => {
+        let result = ['开始日期', '结束日期'];
+        console.log(data);
+        if (data?.picker) {
+          switch (data?.picker) {
+            case 'year':
+              result = ['开始年份', '结束年份'];
+              break;
+            case 'month':
+              result = ['开始月份', '结束月份'];
+              break;
+            case 'week':
+              result = ['开始周', '结束周'];
+              break;
+            case 'quarter':
+              result = ['开始季度', '结束季度'];
+              break;
+            default:
+              result = ['开始日期', '结束日期'];
+          }
+        }
+        return result;
+      };
+      return {  
+        onlineQueryFormRef,
+        registerForm,
+        initDefaultValues,
+        toggleButtonShow,
+        toggleSearchStatus,
+        doSearch,
+        resetSearch,
+        queryParams,
+        formSchemas,
+        clearSearch,
+        getGroupDatePlaceholder,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .group-query-string {
+    width: 20px;
+    display: inline-block;
+    text-align: center;
+  }
+  // 查询条件的边距要和列表对齐，所以查询条件的边距要设为0
+  .jeecg-basic-table-form-container.p-0 {
+    padding: 0;
+  }
+  // update-begin--author:liaozhiyang---date:20240514---for：【QQYUN-9241】form表单上下间距大点
+  .jeecg-basic-table-form-container {
+    :deep(.ant-form-item) {
+      &:not(.ant-form-item-with-help) {
+        margin-bottom: 16px;
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240514---for：【QQYUN-9241】form表单上下间距大点
+  .online-query-form {
+    :deep(.ant-form) {
+      max-height: 40vh;
+      overflow-y: auto;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineSearchFormItem.vue b/src/views/super/online/cgform/auto/comp/OnlineSearchFormItem.vue
new file mode 100644
index 0000000..d3ad612
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineSearchFormItem.vue
@@ -0,0 +1,415 @@
+<!-- 此文件已没有使用的地方 -->
+<template>
+  <a-form-item :labelCol="labelCol" :class="'jeecg-online-search'">
+    <template #label>
+      <span :title="item.label" class="label-text">{{ item.label }}</span>
+    </template>
+
+    <!-- 1.日期 -->
+    <template v-if="item.view == 'date'">
+      <template v-if="single_mode === item.mode">
+        <a-date-picker
+          style="width: 100%"
+          :showTime="false"
+          valueFormat="YYYY-MM-DD"
+          :placeholder="'请选择' + item.label"
+          v-model:value="innerValue"
+        ></a-date-picker>
+      </template>
+      <template v-else>
+        <a-date-picker
+          :showTime="false"
+          valueFormat="YYYY-MM-DD"
+          placeholder="开始日期"
+          v-model:value="beginValue"
+          style="width: calc(50% - 15px)"
+        ></a-date-picker>
+        <span class="group-query-strig">~</span>
+        <a-date-picker
+          :showTime="false"
+          valueFormat="YYYY-MM-DD"
+          placeholder="结束日期"
+          v-model:value="endValue"
+          style="width: calc(50% - 15px)"
+        ></a-date-picker>
+      </template>
+    </template>
+
+    <!-- 2.时间 -->
+    <template v-else-if="item.view == 'datetime'">
+      <template v-if="single_mode === item.mode">
+        <a-date-picker
+          style="width: 100%"
+          :showTime="true"
+          valueFormat="YYYY-MM-DD hh:mm:ss"
+          :placeholder="'请选择' + item.label"
+          v-model:value="innerValue"
+        ></a-date-picker>
+      </template>
+      <template v-else>
+        <a-date-picker
+          :showTime="true"
+          valueFormat="YYYY-MM-DD hh:mm:ss"
+          placeholder="开始时间"
+          v-model:value="beginValue"
+          style="width: calc(50% - 15px)"
+        ></a-date-picker>
+        <span class="group-query-strig">~</span>
+        <a-date-picker
+          :showTime="true"
+          valueFormat="YYYY-MM-DD hh:mm:ss"
+          placeholder="结束时间"
+          v-model:value="endValue"
+          style="width: calc(50% - 15px)"
+        ></a-date-picker>
+      </template>
+    </template>
+
+    <!-- 3 TODO 时分秒 -->
+
+    <!-- 4.简单下拉框 -->
+    <template v-else-if="isEasySelect()">
+      <JDictSelectTag v-if="item.config === '1'" :placeholder="'请选择' + item.label" v-model:value="innerValue" :dictCode="getDictCode()" />
+      <a-select v-else :placeholder="'请选择' + item.label" v-model:value="innerValue">
+        <template v-for="(obj, index) in dictOptions[getDictOptionKey(item)]" :key="index">
+          <a-select-option :value="obj.value"> {{ obj.text }}</a-select-option>
+        </template>
+      </a-select>
+    </template>
+
+    <!-- 5.下拉树 -->
+    <template v-else-if="item.view === 'sel_tree'">
+      <JTreeSelect
+        :placeholder="'请选择' + item.label"
+        v-model:value="innerValue"
+        :dict="item.dict"
+        :pidField="item.pidField"
+        :pidValue="item.pidValue"
+        :hasChildField="item.hasChildField"
+        load-triggle-change
+      >
+      </JTreeSelect>
+    </template>
+
+    <!-- 6.分类树  -->
+    <template v-else-if="item.view === 'cat_tree'">
+      <JCategorySelect
+        @change="handleCategoryTreeChange"
+        :loadTriggleChange="true"
+        :pcode="item.pcode"
+        v-model:value="innerValue"
+        :placeholder="'请选择' + item.label"
+      />
+    </template>
+
+    <!-- 7.下拉搜索 -->
+    <template v-else-if="item.view === 'sel_search'">
+      <JDictSelectTag v-if="item.config === '1'" v-model:value="innerValue" :placeholder="'请选择' + item.label" :dict="getDictCode()" />
+      <JOnlineSearchSelect v-else v-model:value="innerValue" :placeholder="'请选择' + item.label" :sql="getSqlByDictCode()" />
+    </template>
+
+    <!-- 8.用户 -->
+    <JSelectUser
+      v-else-if="item.view == 'sel_user'"
+      v-bind="userSelectProp"
+      v-model:value="innerValue"
+      :placeholder="'请选择' + item.label"
+    ></JSelectUser>
+
+    <!-- 9.部门 -->
+    <JSelectDept
+      v-else-if="item.view == 'sel_depart'"
+      :showButton="false"
+      v-bind="depSelectProp"
+      v-model:value="innerValue"
+      :placeholder="'请选择' + item.label"
+    />
+
+    <!-- 10.popup -->
+    <JPopup
+      v-else-if="item.view == 'popup'"
+      :placeholder="'请选择' + item.label"
+      v-model:value="innerValue"
+      :code="item.dictTable"
+      :setFieldsValue="setFieldsValue"
+      :field-config="getPopupFieldConfig(item)"
+      :multi="true"
+    >
+    </JPopup>
+
+    <!-- 11.省市区 -->
+    <JAreaSelect v-else-if="item.view == 'pca'" :placeholder="'请选择' + item.label" v-model:value="innerValue" />
+
+    <!-- 12.下拉多选 -->
+    <template v-else-if="item.view == 'checkbox' || item.view == 'list_multi'" :label="item.label">
+      <JSelectMultiple :dictCode="getDictCode()" :placeholder="'请选择' + item.label" v-model:value="innerValue"></JSelectMultiple>
+
+      <!--<JDictSelectTag mode="multiple" @change="handleSelectChange"  :dictCode="getDictCode()"/>-->
+    </template>
+
+    <!-- 13.普通输入框 -->
+    <template v-else>
+      <template v-if="single_mode === item.mode">
+        <a-input :placeholder="'请选择' + item.label" v-model:value="innerValue"></a-input>
+      </template>
+      <template v-else>
+        <a-input placeholder="开始值" v-model:value="beginValue" style="width: calc(50% - 15px)"></a-input>
+        <span class="group-query-strig">~</span>
+        <a-input placeholder="结束值" v-model:value="endValue" style="width: calc(50% - 15px)"></a-input>
+      </template>
+    </template>
+  </a-form-item>
+</template>
+
+<script lang="ts">
+  import { defineComponent, nextTick, ref, unref, watch, toRaw } from 'vue';
+  import {
+    JDictSelectTag,
+    JTreeSelect,
+    JSearchSelect,
+    JCategorySelect,
+    JSelectUserByDept,
+    JSelectDept,
+    JPopup,
+    JAreaLinkage,
+    JSelectUser,
+    JSelectMultiple,
+    JAreaSelect,
+    FormActionType,
+  } from '/@/components/Form';
+  import JOnlineSearchSelect from '../../auto/comp/JOnlineSearchSelect.vue';
+
+  export default defineComponent({
+    name: 'OnlineSearchFormItem',
+    components: {
+      JOnlineSearchSelect,
+      JDictSelectTag,
+      JTreeSelect,
+      JCategorySelect,
+      JSelectUser,
+      JSelectUserByDept,
+      JSelectDept,
+      JPopup,
+      JAreaLinkage,
+      JAreaSelect,
+      JSelectMultiple,
+    },
+    props: {
+      value: {
+        type: String,
+        default: '',
+      },
+      item: {
+        type: Object,
+        default: () => {},
+        required: true,
+      },
+      dictOptions: {
+        type: Object,
+        default: () => {},
+        required: false,
+      },
+      onlineForm: {
+        type: Object,
+        default: () => {},
+        required: false,
+      },
+    },
+    emits: ['update:value', 'change'],
+    setup(props, { emit }) {
+      // 定义查询条件 文本label的最大宽度 比起单纯的控制字体个数更好
+      const labelTextMaxWidth = '120px';
+      const labelCol = {
+        style: {
+          'max-width': labelTextMaxWidth,
+        },
+      };
+      const single_mode = 'single';
+      let innerValue = ref<string | undefined | []>('');
+      let beginValue = ref('');
+      let endValue = ref('');
+
+      watch(
+        () => props.value,
+        () => {
+          if (isEasySelect()) {
+            // 下拉框这里设置空数组 不知道为什么会有警告
+            innerValue.value = !!props.value ? props.value : undefined;
+          } else {
+            innerValue.value = props.value;
+          }
+          if (!props.value) {
+            beginValue.value = '';
+            endValue.value = '';
+          }
+        },
+        { deep: true, immediate: true }
+      );
+
+      watch(
+        innerValue,
+        (newVal) => {
+          console.log('innerValue-change', newVal);
+          emit('update:value', newVal);
+        },
+        { immediate: true }
+      );
+
+      watch(beginValue, (newVal) => {
+        emit('change', props.item.field + '_begin', newVal);
+        emit('update:value', '1');
+      });
+
+      watch(endValue, (newVal) => {
+        emit('change', props.item.field + '_end', newVal);
+        emit('update:value', '1');
+      });
+
+      function getDictOptionKey(item) {
+        console.log('ddictOptions', props.dictOptions);
+        if (item.dbField) {
+          return item.dbField;
+        } else {
+          return item.field;
+        }
+      }
+
+      function isEasySelect() {
+        let item = props.item;
+        if (!item) {
+          return false;
+        }
+        return item.view == 'list' || item.view == 'radio' || item.view == 'switch';
+      }
+
+      function getDictCode() {
+        let item = props.item;
+        if (item.dictTable && item.dictTable.length > 0) {
+          return item.dictTable + ',' + item.dictText + ',' + item.dictCode;
+        } else {
+          return item.dictCode;
+        }
+      }
+
+      function getSqlByDictCode() {
+        let item = props.item;
+        let { dictTable, dictCode, dictText } = item;
+        let temp = dictTable.toLowerCase();
+        let arr = temp.split('where');
+        let condition = '';
+        if (arr.length > 1) {
+          condition = ' where' + arr[1];
+        }
+        let sql = 'select ' + dictCode + " as 'value', " + dictText + " as 'text' from " + arr[0] + condition;
+        console.log('sql', sql);
+        return sql;
+      }
+
+      function getPopupFieldConfig(item) {
+        let { dictText: destFields, dictCode: orgFields } = item;
+        if (!destFields || destFields.length == 0) {
+          return [];
+        }
+        let arr1 = destFields.split(',');
+        let arr2 = orgFields.split(',');
+        let config: any[] = [];
+        for (let i = 0; i < arr1.length; i++) {
+          config.push({
+            target: arr1[i],
+            source: arr2[i],
+          });
+        }
+        return config;
+      }
+
+      function setFieldsValue<T>(values: T) {
+        let { dictText: destFields } = props.item;
+        let arr1 = destFields.split(',');
+        let field = arr1[0];
+        emit('change', field, values[field]);
+      }
+
+      function handleCategoryTreeChange(value) {
+        emit('update:value', value);
+      }
+
+      function getComponentProps(item, labelKey, rowKey) {
+        let props = {
+          labelKey,
+          rowKey,
+        };
+        let fieldExtendJson = item.fieldExtendJson;
+        if (fieldExtendJson) {
+          if (typeof fieldExtendJson == 'string') {
+            let json = JSON.parse(fieldExtendJson);
+            let extend = { ...json };
+            if (extend.text) {
+              props['labelKey'] = extend.text;
+            }
+            if (extend.store) {
+              props['rowKey'] = extend.store;
+            }
+          }
+        }
+        return props;
+      }
+
+      let userSelectProp = getComponentProps(props.item, 'realname', 'username');
+      console.log('userSelectProp', userSelectProp);
+      let depSelectProp = getComponentProps(props.item, 'departName', 'id');
+
+      function handleSelectChange(array) {
+        if (array && array.length > 0) {
+          emit('update:value', array.join(','));
+        } else {
+          emit('update:value', '');
+        }
+      }
+
+      return {
+        getPopupFieldConfig,
+        userSelectProp,
+        depSelectProp,
+        handleSelectChange,
+        setFieldsValue,
+        innerValue,
+        beginValue,
+        endValue,
+        isEasySelect,
+        getDictOptionKey,
+        getDictCode,
+        labelTextMaxWidth,
+        labelCol,
+        single_mode,
+        getSqlByDictCode,
+        handleCategoryTreeChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .group-query-strig {
+    width: 30px;
+    text-align: center;
+    display: inline-block;
+  }
+  /* 查询条件左对齐样式设置 */
+  .jeecg-online-search :deep(.ant-form-item-label) {
+    flex: 0 0 auto !important;
+    width: auto;
+  }
+  .jeecg-online-search :deep(.ant-form-item-control) {
+    max-width: 100%;
+    padding-right: 16px;
+  }
+
+  /* label显示宽度 超出显示... */
+  .jeecg-online-search :deep(.label-text) {
+    max-width: v-bind(labelTextMaxWidth);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineSelectCascade.vue b/src/views/super/online/cgform/auto/comp/OnlineSelectCascade.vue
new file mode 100644
index 0000000..2ade939
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineSelectCascade.vue
@@ -0,0 +1,234 @@
+<template>
+  <!-- 级联下拉框 form组件 暂且只在online使用 不对外提供api -->
+  <a-select show-search :filter-option="filterOption" :placeholder="placeholder" :value="selectedValue" @change="handleChange" allowClear style="width: 100%">
+    <a-select-option v-for="(item, index) in dictOptions" :key="index" :value="item.store">
+      <span style="display: inline-block; width: 100%" :title="item.label">{{ item.label }}</span>
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  /**获取下拉选项*/
+  const SELECT_OPTIONS_URL = '/online/cgform/api/querySelectOptions';
+
+  export default defineComponent({
+    name: 'OnlineSelectCascade',
+    props: {
+      table: { type: String, default: '' },
+      txt: { type: String, default: '' },
+      store: { type: String, default: '' },
+      idField: { type: String, default: '' },
+      pidField: { type: String, default: '' },
+      pidValue: { type: String, default: '-1' },
+      origin: { type: Boolean, default: false },
+      condition: { type: String, default: '' },
+      value: { type: String, default: '' },
+      isNumber: { type: Boolean, default: false },
+      placeholder: { type: String, default: '请选择' },
+    },
+    emits: ['change', 'next'],
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+      // 选中值
+      const selectedValue = ref<any>('');
+      // 选项数组
+      const dictOptions = ref<any[]>([]);
+      const optionsLoad = ref(true);
+      // 选项改变事件
+      function handleChange(value) {
+        console.log('handleChange', value);
+        // 这个value是 存储的值 实际还需要获取id值
+        let temp = value || '';
+        emit('change', temp);
+        valueChangeThenEmitNext(temp);
+      }
+
+      // 第一个节点 选项加载走condition
+      watch(
+        () => props.condition,
+        (val) => {
+          optionsLoad.value = true;
+          if (val) {
+            loadOptions();
+          }
+        },
+        { immediate: true }
+      );
+
+      // 被联动节点 选项加载走pidValue
+      watch(
+        () => props.pidValue,
+        (val) => {
+          if (val === '-1') {
+            dictOptions.value = [];
+          } else {
+            loadOptions();
+          }
+        }
+      );
+
+      // 值回显
+      watch(
+        () => props.value,
+        (newVal, oldVal) => {
+          console.log('值改变事件', newVal, oldVal);
+          if (!newVal) {
+            // value不存在的时候--
+            selectedValue.value = [];
+            if (oldVal) {
+              // 如果oldVal存在， 需要往上抛事件
+              emit('change', '');
+              emit('next', '-1');
+            }
+          } else {
+            // value存在的时候
+            selectedValue.value = newVal;
+          }
+          if (newVal && !oldVal) {
+            // 有新值没有旧值 表单第一次加载赋值 需要往外抛一个事件 触发下级options的加载
+            handleFirstValueSetting(newVal);
+          }
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 第一次加载赋值
+       */
+      async function handleFirstValueSetting(value) {
+        if (props.idField === props.store) {
+          // 如果id字段就是存储字段 那么可以不用调用请求
+          emit('next', value);
+        } else {
+          if (props.origin === true) {
+            // 如果是联动组件的第一个组件，等待options加载完后从options中取值
+            await getSelfOptions();
+            valueChangeThenEmitNext(value);
+          } else {
+            // 如果是联动组件的后续组件，根据选中的value加载一遍数据
+            let arr = await loadValueText();
+            valueChangeThenEmitNext(value, arr);
+          }
+        }
+      }
+
+      function loadOptions() {
+        let params = getQueryParams();
+        if (props.origin === true) {
+          params['condition'] = props.condition;
+        } else {
+          params['pidValue'] = props.pidValue;
+        }
+        console.log('请求参数', params);
+        dictOptions.value = [];
+        defHttp.get({ url: SELECT_OPTIONS_URL, params }, { isTransformResponse: false }).then((res) => {
+          if (res.success) {
+            dictOptions.value = [...res.result];
+            console.log('请求结果', res.result, dictOptions);
+          } else {
+            $message.warning('联动组件数据加载失败,请检查配置!');
+          }
+        });
+      }
+
+      function getQueryParams() {
+        let params = {
+          table: props.table,
+          txt: props.txt,
+          key: props.store,
+          idField: props.idField,
+          pidField: props.pidField,
+        };
+        return params;
+      }
+
+      function loadValueText() {
+        return new Promise((resolve) => {
+          if (!props.value) {
+            selectedValue.value = [];
+            resolve([]);
+          } else {
+            let params = getQueryParams();
+            if (props.isNumber === true) {
+              params['condition'] = `${props.store} = ${props.value}`;
+            } else {
+              params['condition'] = `${props.store} = '${props.value}'`;
+            }
+            defHttp.get({ url: SELECT_OPTIONS_URL, params }, { isTransformResponse: false }).then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                $message.warning('联动组件数据加载失败,请检查配置!');
+                resolve([]);
+              }
+            });
+          }
+        });
+      }
+
+      /**
+       * 获取下拉选项
+       */
+      function getSelfOptions() {
+        return new Promise((resolve) => {
+          let index = 0;
+          (function next(index) {
+            if (index > 10) {
+              resolve([]);
+            }
+            let arr = dictOptions.value;
+            if (arr && arr.length > 0) {
+              resolve(arr);
+            } else {
+              setTimeout(() => {
+                next(index++);
+              }, 300);
+            }
+          })(index);
+        });
+      }
+
+      /**
+       * 值改变后 需要往外抛事件 触发下级节点的选项改变
+       */
+      function valueChangeThenEmitNext(value, arr: any = []) {
+        if (value && value.length > 0) {
+          if (!arr || arr.length == 0) {
+            arr = dictOptions.value;
+          }
+          let selected = arr.filter((item) => item.store === value);
+          if (selected && selected.length > 0) {
+            let id = selected[0].id;
+            emit('next', id);
+          }
+        }
+      }
+
+      /**
+       * 下拉框筛选
+       * @param input
+       * @param option
+       */
+      const filterOption = (input: string, option: any) => {
+        let labelIf = option.children()[0]?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        if (labelIf) {
+          return true;
+        }
+        return false;
+      };
+      
+      return {
+        selectedValue,
+        dictOptions,
+        handleChange,
+        filterOption,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineSubForm.vue b/src/views/super/online/cgform/auto/comp/OnlineSubForm.vue
new file mode 100644
index 0000000..c4bf0d2
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineSubForm.vue
@@ -0,0 +1,301 @@
+<template>
+  <BasicForm ref="onlineFormRef" @register="registerForm" />
+</template>
+
+<script>
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed, defineComponent, ref, unref, watch, nextTick, toRaw } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { SUBMIT_FLOW_ID, SUBMIT_FLOW_KEY, VALIDATE_FAILED } from '../../types/onlineRender';
+  import { defHttp } from '/@/utils/http/axios';
+  import { pick } from 'lodash-es';
+  import { useFormItems, getRefPromise } from '../../hooks/auto/useAutoForm';
+  import { Loading } from '/@/components/Loading';
+  import { loadFormFieldsDefVal } from '../../util/FieldDefVal';
+
+  const urlObject = {
+    optPre: '/online/cgform/api/form/',
+    urlButtonAction: '/online/cgform/api/doButton',
+  };
+  const baseUrl = '/online/cgform/api/subform';
+  export default {
+    name: 'OnlineSubForm',
+    components: {
+      BasicForm,
+      Loading,
+    },
+    props: {
+      properties: {
+        type: Object,
+        required: true,
+      },
+      mainId: {
+        type: String,
+        default: '',
+      },
+      table: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      requiredFields: {
+        type: Array,
+        default: [],
+      },
+      isUpdate: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      id: {
+        type: String,
+        default: '',
+      },
+    },
+    emits: ['formChange'],
+    setup(props, { emit }) {
+      console.log('进入online子表表单页面》》》》' + props.table);
+
+      // 表单ref
+      const onlineFormRef = ref(null);
+      // 表单是否渲染完成
+      const formRendered = ref(false);
+      const { createMessage: $message } = useMessage();
+      const {
+        formSchemas,
+        defaultValueFields,
+        changeDataIfArray2String,
+        tableName,
+        dbData,
+        checkOnlyFieldValue,
+        fieldDisplayStatus,
+        createFormSchemas,
+        baseColProps,
+        labelCol,
+        wrapperCol,
+        labelWidth,
+      } = useFormItems(props, onlineFormRef);
+      //表单配置
+      const [registerForm, { setProps, validate, resetFields, setFieldsValue, getFieldsValue, updateSchema, scrollToField }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        baseColProps: baseColProps,
+        // update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        labelWidth,
+        // update-end--author:liaozhiyang---date:20240429---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        labelCol,
+        wrapperCol
+        // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      });
+      const getFormItem = () => {
+        return new Promise((resolve, reject) => {
+          defHttp.get({ url: `online/cgform/api/getFormItem/${props.id}` }, { isTransformResponse: false }).then((res) => {
+            resolve(res.result);
+          });
+        });
+      }
+      let extConfigJson;
+      watch(
+        () => props.table,
+        () => {
+          tableName.value = props.table;
+        },
+        { immediate: true }
+      );
+
+      //监听配置改变事件
+      watch(
+        () => props.properties,
+        async (valueObj) => {
+          //重新渲染表单
+          console.log('主表properties改变', props.properties);
+          formRendered.value = false;
+          addFormChangeEvent();
+          // update-begin--author:liaozhiyang---date:20260318---for:【issues/9414】一对一子表设置label长度不生效
+          if (!extConfigJson) {
+              try {
+              const data = await getFormItem();
+              extConfigJson = JSON.parse(data.head.extConfigJson);
+              extConfigJson = {
+                formLabelLength: extConfigJson.formLabelLength,
+                formLabelLengthShow: extConfigJson.formLabelLengthShow,
+              };
+            } catch (error) {
+              console.log(error);
+            }
+          }
+          // update-end--author:liaozhiyang---date:20260318---for:【issues/9414】一对一子表设置label长度不生效
+          createFormSchemas(props.properties, props.requiredFields, checkOnlyFieldValue, extConfigJson);
+          formRendered.value = true;
+        },
+        { deep: true, immediate: true }
+      );
+
+      //监听主表数据ID
+      watch(
+        () => props.mainId,
+        (valueObj) => {
+          //重新加载子表数据
+          console.log('主表ID改变', props.mainId);
+          // 此处延迟100毫秒是为了让properties的监听先执行
+          setTimeout(() => {
+            resetSubForm();
+          }, 100);
+        },
+        { immediate: true }
+      );
+
+      watch(
+        () => props.disabled,
+        (val) => {
+          setProps({ disabled: val });
+        }
+      );
+
+      /**
+       * 监听表单改变事件
+       */
+      async function addFormChangeEvent() {
+        let formRefObject = await getRefPromise(onlineFormRef);
+        formRefObject.$formValueChange = (field, value, changeFormData) => {
+          let emitArgument = { [field]: value };
+          // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+          // 一对一子表 关联记录和他表字段
+          if(changeFormData){
+            setFieldsValue(changeFormData);
+          }
+          // update-end--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+          emit('formChange', emitArgument);
+        };
+      }
+
+      /**
+       * 当前表单默认值逻辑-进入新增页面触发
+       */
+      function handleDefaultValue() {
+        if (unref(props.isUpdate) === false) {
+          let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+          loadFormFieldsDefVal(fieldProperties, (values) => {
+            setFieldsValue(values);
+          });
+        }
+      }
+
+      /**
+       * 当主表数据ID发生改变，子表重现获取数据
+       * @returns {Promise<void>}
+       */
+      async function resetSubForm() {
+        //TODO 填值规则
+        // update-begin--author:sunjianlei --- date:20191111 --- for: 每次加载数据的时候都重新执行一遍填值规则 -----------
+        //this.$emit('executeFillRule', {form:this.form, target: this})
+        // update-end--author:sunjianlei --- date:20191111 --- for: 每次加载数据的时候都重新执行一遍填值规则 -----------
+        await getRefPromise(formRendered);
+        await resetFields();
+        handleDefaultValue();
+        const { table, mainId } = props;
+        if (!table || !mainId) {
+          return;
+        }
+        let values = await loadData(table, mainId);
+        dbData.value = values;
+        // VUEN-1033
+        await setFieldsValue(values);
+      }
+
+      function loadData(table, mainId) {
+        let url = `${baseUrl}/${table}/${mainId}`;
+        return new Promise((resolve, reject) => {
+          defHttp.get({ url }, { isTransformResponse: false }).then((res) => {
+            console.log(res);
+            if (res.success) {
+              resolve(res.result);
+            } else {
+              console.log(res.message);
+              reject();
+            }
+          });
+        }).finally(() => {
+          //resetFields()
+          dbData.value = '';
+        });
+      }
+
+      function getAll() {
+        return new Promise((resolve, reject) => {
+          validate()
+            .then(() => {
+              let formData = getFieldsValue();
+              formData = changeDataIfArray2String(formData);
+              resolve(formData);
+            })
+            .catch((e) => {
+              if (e.errorFields) {
+                e.scrollToField = () => e.errorFields[0] && scrollToField(e.errorFields[0].name, { behavior: 'smooth', block: 'center' });
+              }
+              reject(e);
+            });
+        });
+      }
+
+      //获取表单事件对象 监听表单改变用到
+      function getFormEvent() {
+        let row = getFieldsValue();
+        if (!row.id) {
+          row.id = 'sub-change-temp-id';
+        }
+        return {
+          row,
+          target: context,
+        };
+      }
+
+      //设置表单的值
+      function setValues(values) {
+        setFieldsValue(values);
+      }
+
+      function executeFillRule() {
+        let formData = getFieldsValue();
+        let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+        loadFormFieldsDefVal(fieldProperties, (values) => {
+          setFieldsValue(values);
+        }, formData);
+      }
+
+      const context = {
+        onlineFormRef,
+        baseColProps,
+        formSchemas,
+        registerForm,
+        setFieldsValue,
+        getFieldsValue,
+        getFormEvent,
+        setValues,
+        getAll,
+        executeFillRule,
+        sh: fieldDisplayStatus,
+        resetFields,
+        updateSchema,
+      };
+      return context;
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  // update-begin--author:liaozhiyang---date:20240527---for：【TV360X-263】tab风格一对一子表上传组件有数据没渲染出来
+  :deep(.ant-upload-list-item-container) {
+    &.ant-motion-collapse {
+      height: auto !important;
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240527---for：【TV360X-263】tab风格一对一子表上传组件有数据没渲染出来
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/OnlineSubFormDetail.vue b/src/views/super/online/cgform/auto/comp/OnlineSubFormDetail.vue
new file mode 100644
index 0000000..6dad39d
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/OnlineSubFormDetail.vue
@@ -0,0 +1,167 @@
+<template>
+  <detail-form :schemas="detailFormSchemas" :data="subFormData" :span="formSpan"></detail-form>
+</template>
+
+<script lang="ts">
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, watch } from 'vue';
+  import { BasicForm } from '/@/components/Form/index';
+  import { defHttp } from '/@/utils/http/axios';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import { Loading } from '/@/components/Loading';
+  import DetailForm from '../../extend/form/DetailForm.vue';
+  import { getDetailFormSchemas } from '../../hooks/auto/useAutoForm';
+
+  const baseUrl = '/online/cgform/api/subform';
+  export default {
+    name: 'OnlineSubFormDetail',
+    components: {
+      BasicForm,
+      Loading,
+      DetailForm,
+    },
+    props: {
+      properties: {
+        type: Object,
+        required: true,
+      },
+      mainId: {
+        type: String,
+        default: '',
+      },
+      table: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+    },
+    emits: ['formChange'],
+    setup(props) {
+      // 表单是否渲染完成
+      const formRendered = ref(false);
+      const { createMessage: $message } = useMessage();
+      const tableName = ref('');
+      const subFormData = ref<any>({});
+      const { detailFormSchemas, createFormSchemas, formSpan } = getDetailFormSchemas(props);
+
+      watch(
+        () => props.table,
+        () => {
+          tableName.value = props.table;
+        },
+        { immediate: true }
+      );
+
+      //监听配置改变事件
+      watch(
+        () => props.properties,
+        () => {
+          //重新渲染表单
+          console.log('主表properties改变', props.properties);
+          formRendered.value = false;
+          createFormSchemas(props.properties);
+          formRendered.value = true;
+        },
+        { deep: true, immediate: true }
+      );
+
+      //监听主表数据ID
+      watch(
+        () => props.mainId,
+        () => {
+          //重新加载子表数据
+          console.log('主表ID改变', props.mainId);
+          // 此处延迟100毫秒是为了让properties的监听先执行
+          setTimeout(() => {
+            resetSubForm();
+          }, 100);
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 当主表数据ID发生改变，子表重现获取数据
+       * @returns {Promise<void>}
+       */
+      async function resetSubForm() {
+        await getRefPromise(formRendered);
+        subFormData.value = {};
+        const { table, mainId } = props;
+        if (!table || !mainId) {
+          return;
+        }
+        // update-begin--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+        let data: any = (await loadData(table, mainId)) || {};
+        await fillLinkTableFields(data);
+        subFormData.value = data;
+        // update-end--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+      }
+      // update-begin--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+      /**
+       * 详情页一对一子表中，根据关联记录字段(link_table)的值查询关联数据，自动填充他表字段(link_table_field)的值
+       */
+      async function fillLinkTableFields(data) {
+        const schemas = detailFormSchemas.value;
+        for (const schema of schemas) {
+          if (schema.view === 'link_table' && (schema as any).linkFields?.length > 0) {
+            const fieldValue = data[schema.field];
+            if (fieldValue) {
+              const valueField = (schema as any).dictCode || 'id';
+              const vals = String(fieldValue).split(',');
+              const params = {
+                pageSize: vals.length,
+                pageNo: 1,
+                superQueryMatchType: 'and',
+                superQueryParams: encodeURI(JSON.stringify([{ field: valueField, rule: 'in', val: fieldValue }])),
+              };
+              try {
+                const result = await defHttp.get({ url: '/online/cgform/api/getData/' + (schema as any).dictTable, params });
+                const records = result?.records || [];
+                for (const linkField of (schema as any).linkFields) {
+                  const [formField, tableField] = linkField.split(',');
+                  if (records.length > 0) {
+                    data[formField] = records.map((r: any) => r[tableField] ?? '').join(',');
+                  } else {
+                    data[formField] = '';
+                  }
+                }
+              } catch (e) {
+                console.warn('填充他表字段失败:', e);
+              }
+            }
+          }
+        }
+      }
+      // update-end--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+      
+
+      async function loadData(table, mainId) {
+        let url = `${baseUrl}/${table}/${mainId}`;
+        return new Promise((resolve, reject) => {
+          defHttp.get({ url }, { isTransformResponse: false }).then((res) => {
+            console.log(res);
+            if (res.success) {
+              resolve(res.result);
+            } else {
+              reject(res.message);
+            }
+          });
+        }).catch((e) => {
+          console.warn('子表获取数据失败:', e);
+          return Promise.resolve({});
+        });
+      }
+
+      return {
+        detailFormSchemas,
+        subFormData,
+        formSpan,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/comp/factory/FormSchemaFactory.ts b/src/views/super/online/cgform/auto/comp/factory/FormSchemaFactory.ts
new file mode 100644
index 0000000..c8613b8
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/FormSchemaFactory.ts
@@ -0,0 +1,177 @@
+import InputWidget from './impl/InputWidget';
+import { FormSchema } from '/@/components/Form';
+import DateWidget from './impl/DateWidget';
+import SelectWidget from './impl/SelectWidget';
+import PasswordWidget from './impl/PasswordWidget';
+import FileWidget from './impl/FileWidget';
+import ImageWidget from './impl/ImageWidget';
+import TextAreaWidget from './impl/TextAreaWidget';
+import SelectMultiWidget from './impl/SelectMultiWidget';
+import SelectSearchWidget from './impl/SelectSearchWidget';
+import PopupWidget from './impl/PopupWidget';
+// update-begin--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+import PopupDictWidget from './impl/PopupDictWidget';
+// update-end--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+import TreeCategoryWidget from './impl/TreeCategoryWidget';
+import SelectDepartWidget from './impl/SelectDepartWidget';
+import SelectUserWidget from './impl/SelectUserWidget';
+import EditorWidget from './impl/EditorWidget';
+import MarkdownWidget from './impl/MarkdownWidget';
+import PcaWidget from './impl/PcaWidget';
+import AreaLinkage from './impl/AreaLinkage';
+import TreeSelectWidget from './impl/TreeSelectWidget';
+import RadioWidget from './impl/RadioWidget';
+import CheckboxWidget from './impl/CheckboxWidget';
+import SwitchWidget from './impl/SwitchWidget';
+import TimeWidget from './impl/TimeWidget';
+import LinkDownWidget from './impl/LinkDownWidget';
+import SlotWidget from './impl/SlotWidget';
+import NumberWidget from './impl/NumberWidget';
+import LinkTableWidget from './impl/LinkTableWidget'
+import LinkTableFieldWidget from './impl/LinkTableFieldWidget'
+import LinkTableForQueryWidget from './impl/LinkTableForQueryWidget'
+import CascaderPcaForQueryWidget from './impl/CascaderPcaForQueryWidget'
+import SelectUser2Widget from './impl/SelectUser2Widget'
+import RangeWidget from "./impl/RangeWidget";
+
+export default class FormSchemaFactory {
+  static createFormSchema(key, data, queryItem) {
+    let view = data.view;
+    switch (view) {
+      case 'password':
+        //2.密码输入框
+        return new PasswordWidget(key, data);
+      case 'list':
+        //3.下拉框
+        return new SelectWidget(key, data);
+      case 'radio':
+        // 4. 单选
+        return new RadioWidget(key, data);
+      case 'checkbox':
+        // 5.多选
+        return new CheckboxWidget(key, data);
+      case 'date':
+      case 'datetime':
+        // 6.日期
+        // 7.日期时间
+        return new DateWidget(key, data, queryItem);
+      case 'time':
+        // 8 时间
+        return new TimeWidget(key, data);
+      case 'file':
+        // 9.文件
+        return new FileWidget(key, data);
+      case 'image':
+        // 10.图片
+        return new ImageWidget(key, data);
+      case 'textarea':
+        // 11.多行文本
+        return new TextAreaWidget(key, data);
+      case 'list_multi':
+        // 12.下拉多选框
+        return new SelectMultiWidget(key, data);
+      case 'sel_search':
+        // 13.下拉搜索框
+        return new SelectSearchWidget(key, data);
+      case 'popup':
+        // 14. popup
+        return new PopupWidget(key, data);
+      case 'cat_tree':
+        // 15.分类字典树
+        return new TreeCategoryWidget(key, data);
+      case 'sel_depart':
+        // 16.部门选择
+        return new SelectDepartWidget(key, data);
+      case 'sel_user':
+        // 17.用户选择
+        return new SelectUserWidget(key, data);
+      case 'umeditor':
+        // 18.富文本
+        return new EditorWidget(key, data);
+      case 'markdown':
+        // 19.MarkDown
+        return new MarkdownWidget(key, data);
+      case 'pca':
+        // 20.省市区
+        // update-begin--author:liaozhiyang---date:20240607---for：【TV360X-501】省市区换新组件
+        //  return new PcaWidget(key, data);
+        return new AreaLinkage(key, data);
+      // update-end--author:liaozhiyang---date:20240607---for：【TV360X-501】省市区换新组件
+      case 'link_down':
+        // 21.联动组件
+        return new LinkDownWidget(key, data);
+      case 'sel_tree':
+        // 22.自定义树控件
+        return new TreeSelectWidget(key, data);
+      case 'switch':
+        // 23.开关组件
+        return new SwitchWidget(key, data);
+      case 'link_table':
+        // 24.关联记录
+        return new LinkTableWidget(key, data);
+      case 'link_table_field':
+        // 25.他表字段
+        return new LinkTableFieldWidget(key, data);
+      // update-begin--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+      case 'popup_dict':
+        // 14. popup字典
+        return new PopupDictWidget(key, data);
+      // update-end--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+      case 'slot':
+        // slot
+        return new SlotWidget(key, data);
+      case 'LinkTableForQuery':
+        return new LinkTableForQueryWidget(key, data);
+      case 'CascaderPcaForQuery':
+        return new CascaderPcaForQueryWidget(key, data, queryItem);
+      case 'select_user2':
+        return new SelectUser2Widget(key, data);
+      case 'rangeDate':
+      case 'rangeTime':
+      case 'rangeNumber':
+        return new RangeWidget(key, data);
+      case 'hidden':
+        // 隐藏的控件  如分类树的文本
+        return new InputWidget(key, data).isHidden();
+      default:
+        if (data.type == 'number') {
+          return new NumberWidget(key, data);
+        } else {
+          //1.普通输入框
+          return new InputWidget(key, data);
+        }
+    }
+  }
+
+  static createSlotFormSchema(key, data) {
+    let slotFs = new SlotWidget(key, data);
+    let view = data.view;
+    if ('date' == view) {
+      slotFs.groupDate();
+    } else if ('datetime' == view) {
+      slotFs.groupDatetime();
+    } else if ('time' == view) {
+      // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能
+      slotFs.groupTime();
+      // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能
+    } else {
+      let type = data.type;
+      if (type == 'number' || type == 'integer') {
+        slotFs.groupNumber();
+      }
+    }
+    return slotFs;
+  }
+
+  /**
+   * 表单ID 默认是隐藏的
+   */
+  static createIdField(): FormSchema {
+    return {
+      label: '',
+      field: 'id',
+      component: 'Input',
+      show: false,
+    };
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/IFormSchema.ts b/src/views/super/online/cgform/auto/comp/factory/IFormSchema.ts
new file mode 100644
index 0000000..44bdb54
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/IFormSchema.ts
@@ -0,0 +1,469 @@
+import {computed, watch} from 'vue'
+import { FormSchema, Rule } from '/@/components/Form';
+import { FieldExtends, POP_CONTAINER } from '../../../types/onlineRender';
+import { LABELLENGTH } from '../../../util/constant';
+import {replaceUserInfoByExpression} from "@/utils/common/compUtils";
+/**
+ * 1.部门选择/用户选择 无：单选配置
+ * 控件类
+ */
+export default abstract class IFormSchema {
+  _data;
+  field: string;
+  label: string;
+  labelLength: number;
+  formRef: any;
+  hidden: boolean;
+  order: number;
+  required: boolean;
+  onlyValidator: any;
+  hasChange: boolean;
+  pre: string;
+  setFieldsValue: any;
+  schemaProp: any;
+  searchForm: boolean;
+  disabled: boolean;
+  popContainer: string;
+  inPopover: boolean;
+
+  constructor(key, data) {
+    // 考虑不需要存data
+    this._data = data;
+    this.field = key;
+    this.label = data.title;
+    this.hidden = false;
+    this.order = data.order || 999;
+    this.required = false;
+    this.onlyValidator = '';
+    this.setFieldsValue = '';
+    this.hasChange = true;
+    if (key.indexOf('@') > 0) {
+      this.pre = key.substring(0, key.indexOf('@') + 1);
+    } else {
+      this.pre = '';
+    }
+    this.schemaProp = {};
+    this.searchForm = false;
+    this.disabled = false;
+    this.popContainer = '';
+    this.handleWidgetAttr(data);
+    this.inPopover = false;
+    this.labelLength = LABELLENGTH;
+    this.initLabelLength();
+  }
+
+  /**
+   * 获取最终的表单配置项，外面获取调用此方法
+   */
+  getFormItemSchema(): FormSchema {
+    let schema = this.getItem();
+    this.addDefaultChangeEvent(schema);
+    return schema;
+  }
+
+  /**
+   * 获取表单配置，子类重写此方法
+   */
+  getItem(): FormSchema {
+    let fs: FormSchema = {
+      field: this.field,
+      label: this.label,
+      labelLength: this.labelLength,
+      component: 'Input',
+      itemProps:{
+        labelCol:{
+          class: 'online-form-label'
+        }
+      }
+    };
+    let rules = this.getRule();
+    if (rules.length > 0 && this.onlyValidator) {
+      fs['rules'] = rules;
+    }
+    if (this.hidden === true) {
+      fs['show'] = false;
+    }
+    return fs;
+  }
+
+  /**
+   * 设置表单ref
+   * popup、分类树需要关联设置其他表单值的时候用到
+   * @param ref
+   */
+  setFormRef(ref) {
+    this.formRef = ref;
+  }
+
+  /**
+   * 设置表单元素隐藏
+   */
+  isHidden() {
+    this.hidden = true;
+    return this;
+  }
+
+  /**
+   * 设置是否必填项
+   * @param array
+   */
+  isRequired(array) {
+    // 子表必填   TODO
+    if (array && array.length > 0) {
+      if (array.indexOf(this.field) >= 0) {
+        this.required = true;
+      }
+    }
+    return this;
+  }
+
+  /**
+   * 初始化 label长度
+   */
+  initLabelLength(){
+    let obj = this.getExtendData()
+    if(obj && obj.labelLength){
+      this.labelLength = obj.labelLength;
+    }
+  }
+
+  /**
+   * 获取扩展参数
+   */
+  getExtendData() {
+    let extend: FieldExtends = {};
+    let { fieldExtendJson } = this._data;
+    if (fieldExtendJson) {
+      if (typeof fieldExtendJson == 'string') {
+        try {
+          let json = JSON.parse(fieldExtendJson);
+          extend = { ...json };
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    return extend;
+  }
+
+  /***
+   * 获取和此字段相关的其他字段 需要设置其为隐藏
+   */
+  getRelatedHideFields(): string[] {
+    return [];
+  }
+
+  /**
+   * placeholder
+   */
+  getPlaceholder(view) {
+    let text = '请输入';
+    // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-218】针对组件分别提示对应的校验语
+    if (
+      [
+        'list',
+        'radio',
+        'checkbox',
+        'date',
+        'datetime',
+        'time',
+        'list_multi',
+        'sel_search',
+        'popup',
+        'cat_tree',
+        'sel_depart',
+        'sel_user',
+        'pca',
+        'link_down',
+        'sel_tree',
+        'switch',
+        'link_table',
+        'link_table_field',
+        'popup_dict',
+        'LinkTableForQuery',
+        'CascaderPcaForQuery',
+        'select_user2',
+        'rangeDate',
+        'rangeTime',
+        'rangeNumber',
+      ].includes(view)
+    ) {
+      text = '请选择';
+    } else if (['file', 'image'].includes(view)) {
+      text = '请上传';
+    }
+    // update-end--author:liaozhiyang---date:20240521---for：【TV360X-218】针对组件分别提示对应的校验语
+    return text + this.label;
+  }
+
+  /**
+   * 唯一校验
+   */
+  setOnlyValidateFun(validateFun) {
+    if (validateFun) {
+      this.onlyValidator = async (rule, value) => {
+        let error = await validateFun(rule, value);
+        if (!error) {
+          return Promise.resolve();
+        } else {
+          return Promise.reject(error);
+        }
+      };
+    }
+  }
+
+  /**
+   * 获取校验规则
+   */
+  getRule(): any[] {
+    let rules: Rule[] = [];
+    const { view, errorInfo, pattern, type, fieldExtendJson } = this._data;
+    if (this.required === true) {
+      let msg = this.getPlaceholder(view);
+      // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-80】扩展参数配置中的校验提示不生效
+      if (fieldExtendJson) {
+        const json = JSON.parse(fieldExtendJson);
+        if (json.validateError) {
+          msg = json.validateError;
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240520---for：【TV360X-80】扩展参数配置中的校验提示不生效
+      if (errorInfo) {
+        msg = errorInfo;
+      }
+      if (view == 'sel_depart' || view == 'sel_user') {
+        //如果是部门和用户组件 使用 required：true
+        this.schemaProp['required'] = true;
+        // update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-9109】online使用部门和用户组件必填时label前面没有必填的*号
+        rules.push({ required: true, message: msg });
+        // update-end--author:liaozhiyang---date:20240429---for：【QQYUN-9109】online使用部门和用户组件必填时label前面没有必填的*号
+      } else {
+        rules.push({ required: true, message: msg });
+      }
+    }
+    if ('sel_user' == view) {
+      if (pattern === 'only' && this.onlyValidator) {
+        rules.push({ validator: this.onlyValidator });
+      }
+    }
+    if ('list' === view || 'radio' === view || 'markdown' === view || 'pca' === view || view.indexOf('sel') >= 0 || 'time' === view) {
+      return rules;
+    }
+    if (view.indexOf('upload') >= 0 || view.indexOf('file') >= 0 || view.indexOf('image') >= 0) {
+      return rules;
+    }
+    if (pattern) {
+      if (pattern === 'only') {
+        if (this.onlyValidator) {
+          rules.push({ validator: this.onlyValidator });
+        }
+      } else if (pattern === 'z') {
+        if (type == 'number' || type == 'integer') {
+          // this.onlyInteger=true TODO
+        } else {
+          rules.push({ pattern: /^-?\d+$/, message: '请输入整数' });
+        }
+      } else {
+        let msg = errorInfo || '正则校验失败';
+        let reg
+        try {
+          reg = new RegExp(pattern);
+          if (!reg) {
+            reg = pattern;
+          }
+        } catch {
+          reg = pattern;
+        }
+        rules.push({ pattern: reg, message: msg });
+      }
+    }
+    return rules;
+  }
+
+  /**
+   * 添加默认的change事件
+   * @param schema
+   */
+  addDefaultChangeEvent(schema) {
+    if (this.hasChange) {
+      if (!schema.componentProps) {
+        schema.componentProps = {};
+      }
+      //update-begin-author:taoyan date:2022-5-24 for: VUEN-1095 只读未控制住
+      if (this.disabled == true) {
+        schema.componentProps.disabled = true;
+      }
+      //update-end-author:taoyan date:2022-5-24 for: VUEN-1095 只读未控制住
+      if (!schema.componentProps.hasOwnProperty('onChange')) {
+        schema.componentProps['onChange'] = (value, formData) => {
+          if (value instanceof Event) {
+            // 输入框 value是event对象
+            value = (value.target as any).value;
+          }
+          // 部门组件抛出事件的value是数组
+          if (value instanceof Array) {
+            value = value.join(',');
+          }
+          // VUEN-1467【vue3 工作流】流程处理 一对多表单 子表tab切换后，关闭不了 导致整个浏览器无法操作 多操作几次，不一定每次必现---
+          if(!this.formRef || !this.formRef.value || !this.formRef.value.$formValueChange){
+            console.log('当前表单无法触发change事件,field：'+this.field)
+          }else{
+            this.formRef.value.$formValueChange(this.field, value, formData)
+          }
+        };
+        // update-begin--author:liaozhiyang---date:20251011---for：【issues/8791】js增强popup弹框的onlChange()没生效
+        if (schema.component === 'JPopup') {
+          schema.componentProps['onPopUpChange'] = schema.componentProps['onChange']
+        }
+        // update-end--author:liaozhiyang---date:20251011---for：【issues/8791】js增强popup弹框的onlChange()没生效
+      }
+    }
+    // 顺带处理其他的 schemaProp
+    Object.keys(this.schemaProp).map((k) => {
+      schema[k] = this.schemaProp[k];
+    });
+  }
+
+  noChange() {
+    this.hasChange = false;
+  }
+
+  updateField(field) {
+    this.field = field;
+  }
+
+  /**
+   * 高级查询 没有表单ref对象 手动设置setFieldValue方法用于 popup设置表单值
+   */
+  setFunctionForFieldValue(func) {
+    if (func) {
+      this.setFieldsValue = func;
+    }
+  }
+
+  asSearchForm() {
+    this.searchForm = true;
+  }
+
+  /**获取modal作为类下拉组件pop的父容器*/
+  getModalAsContainer() {
+    let ele = this.getPopContainer();
+    // update-begin--author:liaozhiyang---date:20231205---for：【QQYUN-7150】online缓存路由打开多页导致下拉类型的组件打不开
+    if (ele != 'body') {
+      const elems = document.querySelectorAll(ele);
+      if (elems && elems.length > 1) {
+        const data: HTMLElement[] = [];
+        elems.forEach((item: HTMLElement) => {
+          if (!(item.offsetWidth == 0 && item.offsetHeight == 0)) {
+            data.push(item);
+          }
+        });
+        if (data.length === 1) {
+          return data[0];
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20231205---for：【QQYUN-7150】online缓存路由打开多页导致下拉类型的组件打不开
+    return document.querySelector(ele);
+  }
+
+  /**区分modal表单和查询表单*/
+  getPopContainer() {
+    if (this.searchForm === true) {
+      return 'body';
+    } else if(this.inPopover === true){
+      return `.${this.popContainer}`;
+    }else if(this.popContainer){
+      return `.${this.popContainer} .ant-modal-content`
+    }else {
+      return POP_CONTAINER;
+    }
+  }
+
+  handleWidgetAttr(data) {
+    if (data.ui) {
+      if (data.ui.widgetattrs) {
+        if (data.ui.widgetattrs.disabled == true) {
+          this.disabled = true;
+        }
+      }
+    }
+  }
+
+  /**
+   * 设置 popContainer
+   */
+  setCustomPopContainer(modalClass){
+    this.popContainer = modalClass;
+  }
+
+  //update-begin-author:taoyan date:2022-8-5 for: 他表字段/关联记录用
+  // 获取他表字段的 配置信息
+  getLinkFieldInfo():any{
+    return '';
+  }
+
+  // 1.将他表字段的配置信息设置到关联记录字段上
+  setOtherInfo(_arg){
+  }
+  //update-end-author:taoyan date:2022-8-5 for: 他表字段/关联记录用
+  
+  // 表单设计器高级查询用
+  isInPopover(){
+    this.inPopover = true;
+  }
+
+  handleDictTableParams() {
+    if (!this.formRef.value) {
+      return
+    }
+    const dictTable = this._data.dictTable as string
+    if (!dictTable) {
+      return
+    }
+    const matches = dictTable.match(/\${([^}]+)}/g)
+    if (!matches || matches.length == 0) {
+      return
+    }
+    // 去除 ${}
+    const keys = matches.map((item: string) => item.replace('${', '').replace('}', ''))
+    const values = computed(() => {
+      const formModel = this.formRef.value.formModel
+      return keys.map((key) => formModel[key]).join('');
+    })
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    watch(values, () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+      timer = setTimeout(() => {
+        const formModel = this.formRef.value.formModel
+        // 替换动态参数，如果有 ${xxx} 则替换为实际值
+        let tempDictTable = dictTable.replace(/\${([^}]+)}/g, (_$0, $1) => {
+          if (formModel[$1] == null) {
+            return ''
+          }
+          return formModel[$1]
+        });
+        this.updateDictTable(tempDictTable)
+      }, 150)
+    }, {immediate: true})
+  }
+
+  updateDictTable(_dictTable: string) {
+    console.log('请在子类实现 updateDictTable 方法')
+  }
+
+  /**
+   * 获取表字典的编码，可替换系统变量
+   * @param dictTable
+   * @param dictText
+   * @param dictCode
+   */
+  genDictTableCode(dictTable: string, dictText: string, dictCode: string) {
+    // 替换系统变量
+    dictTable = replaceUserInfoByExpression(dictTable)
+    return encodeURI(`${dictTable},${dictText},${dictCode}`);
+  }
+
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/AreaLinkage.ts b/src/views/super/online/cgform/auto/comp/factory/impl/AreaLinkage.ts
new file mode 100644
index 0000000..9aa09d5
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/AreaLinkage.ts
@@ -0,0 +1,26 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 省市区
+ */
+export default class PcaWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+    const extendData: any = this.getExtendData();
+    const componentProps: any = {}
+    if (extendData.displayLevel) {
+      componentProps.displayLevel = extendData.displayLevel;
+      componentProps.saveCode = extendData.displayLevel === 'all' ? 'region' : componentProps.displayLevel;
+    }
+    // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+    return Object.assign({}, item, {
+      component: 'JAreaLinkage',
+      componentProps: {
+        saveCode: 'region',
+        ...componentProps,
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/CascaderPcaForQueryWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/CascaderPcaForQueryWidget.ts
new file mode 100644
index 0000000..1249e57
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/CascaderPcaForQueryWidget.ts
@@ -0,0 +1,38 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 表单设计器-省市区查询
+ */
+export default class CascaderPcaForQueryWidget extends IFormSchema {
+
+  schema: Recordable;
+  // 省市县联动级别
+  areaLevel: number;
+  // 是否允许更改级别
+  allowChangeLevel: boolean;
+
+  constructor(key: string, data: Recordable, queryItem: Recordable) {
+    super(key, data);
+    this.schema = data
+    this.areaLevel = data['areaLevel'] ?? 3;
+    // 只有等于和不等于才能更改级别
+    this.allowChangeLevel = ['eq', 'ne'].includes(queryItem?.rule)
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'CascaderPcaInFilter',
+      componentProps:{
+        areaLevel: this.areaLevel,
+        allowChangeLevel: this.allowChangeLevel,
+        placeholder: '请选择…',
+        style: {
+          width: '100%',
+        }
+      }
+    });
+  }
+
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/CheckboxWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/CheckboxWidget.ts
new file mode 100644
index 0000000..15bd047
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/CheckboxWidget.ts
@@ -0,0 +1,60 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * checkbox
+ */
+export default class CheckboxWidget extends IFormSchema {
+  /*title-value*/
+  options: any[];
+  constructor(key, data) {
+    super(key, data);
+    this.options = this.getOptions(data['enum']);
+  }
+
+  setFormRef(ref) {
+    super.setFormRef(ref);
+    this.handleDictTableParams();
+  }
+
+  updateDictTable(dictTable: string) {
+    this.formRef.value.updateSchema(({
+      field: this.field,
+      componentProps: {
+        options:[],
+        dictCode: this.genDictTableCode(dictTable, this._data.dictText, this._data.dictCode),
+      }
+    }))
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'JCheckbox',
+      componentProps: {
+        options: this.options,
+        triggerChange: true,
+        // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+        useDicColor: true,
+        // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+      },
+    });
+  }
+
+  getOptions(array) {
+    if (!array || array.length == 0) {
+      return [];
+    }
+    let arr: any[] = [];
+    for (let item of array) {
+      arr.push({
+        value: item.value,
+        label: item.title,
+        // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+        color: item.color,
+        // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+      });
+    }
+    return arr;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/DateWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/DateWidget.ts
new file mode 100644
index 0000000..dbd0c5b
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/DateWidget.ts
@@ -0,0 +1,59 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+enum DateFormat {
+  datetime = 'YYYY-MM-DD HH:mm:ss',
+  date = 'YYYY-MM-DD',
+}
+
+/**
+ * 日期、时间
+ */
+export default class DateWidget extends IFormSchema {
+  format: string;
+  showTime: boolean;
+  picker: string | undefined;
+
+  allowSelectRange: boolean;
+
+  constructor(key, data, queryItem) {
+    super(key, data);
+    this.format = DateFormat[data.view];
+    this.showTime = data.view == 'date' ? false : true;
+    // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+    let fieldExtendJson = data.fieldExtendJson;
+    if (data.view == 'date' && fieldExtendJson) {
+      fieldExtendJson = JSON.parse(fieldExtendJson);
+      if (fieldExtendJson.picker && fieldExtendJson.picker != 'default') {
+        this.picker = fieldExtendJson.picker;
+      } else {
+        this.picker = undefined;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+    // 只有等于和不等于才能选择预设范围（今天、昨天、本周等）
+    this.allowSelectRange = ['eq', 'ne'].includes(queryItem?.rule)
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'DatePickerInFilter',
+      componentProps: {
+        placeholder: `请选择${this.label}`,
+        showTime: this.showTime,
+        valueFormat: this.format,
+        allowSelectRange: this.allowSelectRange,
+        // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        picker: this.picker,
+        // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        style: {
+          width: '100%',
+        },
+        getPopupContainer: (_node) => {
+          return this.getModalAsContainer();
+        },
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/EditorWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/EditorWidget.ts
new file mode 100644
index 0000000..a1b634f
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/EditorWidget.ts
@@ -0,0 +1,25 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 富文本
+ */
+export default class EditorWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'JEditor',
+      componentProps: {
+        //update-begin-author:taoyan date:2022-6-1 for: VUEN-1159 第一次加载时，点击第一个输入框，光标会跑到富文本输入框
+        options: {
+          auto_focus: false,
+        },
+        //update-end-author:taoyan date:2022-6-1 for: VUEN-1159 第一次加载时，点击第一个输入框，光标会跑到富文本输入框
+        // fileMax:1,
+        // showImageUpload:false,
+        // width:"966px",
+        // height:"200px"
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/FileWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/FileWidget.ts
new file mode 100644
index 0000000..e0914b1
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/FileWidget.ts
@@ -0,0 +1,26 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 文件
+ */
+export default class FileWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JUpload',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let json = this.getExtendData();
+    if (json && json.uploadnum) {
+      return {
+        maxCount: Number(json.uploadnum),
+      };
+    }
+    return {};
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/ImageWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/ImageWidget.ts
new file mode 100644
index 0000000..d045f06
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/ImageWidget.ts
@@ -0,0 +1,28 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
+
+/**
+ * 图片
+ */
+export default class ImageWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JUpload',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let props = {
+      fileType: UploadTypeEnum.image,
+    };
+    let json = this.getExtendData();
+    if (json && json.uploadnum) {
+      props['maxCount'] = Number(json.uploadnum);
+    }
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/InputWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/InputWidget.ts
new file mode 100644
index 0000000..211a203
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/InputWidget.ts
@@ -0,0 +1,15 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 输入框
+ */
+export default class InputWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    if (this.hidden === true) {
+      item['show'] = false;
+    }
+    return item;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/LinkDownWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/LinkDownWidget.ts
new file mode 100644
index 0000000..3c0f102
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/LinkDownWidget.ts
@@ -0,0 +1,108 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 下拉联动- 原理是：
+ * 使用JDictSelectTag组件(2022-03-09测试可行版 后续如有改动请注意)
+ * 监听表单的change事件，清空下级表单值，并改变props
+ * 问题在于1.没有code的时候 不需要设置选项
+ * 优势在于： 可以不考虑组件位置（但是需要改后台接口）
+ */
+export default class LinkDownWidget extends IFormSchema {
+  /*title-value*/
+  options: any[];
+  next: string;
+  type: string;
+  table: string;
+  txt: string;
+  store: string;
+  pidField: string;
+  idField: string;
+  origin: boolean;
+  condition: string;
+
+  constructor(key, data) {
+    super(key, data);
+    const { dictTable, dictText, dictCode, pidField, idField, origin, condition } = data;
+    this.table = dictTable;
+    this.txt = dictText;
+    this.store = dictCode;
+    this.idField = idField;
+    this.pidField = pidField;
+    this.origin = origin;
+    this.condition = condition;
+    // 都是空数组
+    this.options = [];
+    this.next = data.next || '';
+    this.type = data.type;
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'OnlineSelectCascade',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let baseProp = {
+      table: this.table,
+      txt: this.txt,
+      store: this.store,
+      pidField: this.pidField,
+      idField: this.idField,
+      origin: this.origin,
+      pidValue: '-1',
+      style: {
+        width: '100%',
+      },
+      onChange: (value) => {
+        console.log('级联组件-onChange', value);
+        this.valueChange(value);
+      },
+      onNext: (pidValue) => {
+        console.log('级联组件-onNext', pidValue);
+        this.nextOptionsChange(pidValue);
+      },
+    };
+    if (this._data.origin === true) {
+      baseProp['condition'] = this.condition;
+    }
+    return baseProp;
+  }
+
+  async nextOptionsChange(pidValue) {
+    if (!this.formRef) {
+      console.error('表单引用找不到');
+      return;
+    }
+    if (!this.next) {
+      return;
+    }
+    let ref = this.formRef.value;
+    await ref.updateSchema({
+      field: this.next,
+      componentProps: {
+        pidValue,
+      },
+    });
+  }
+
+  async valueChange(value) {
+    if (!this.formRef) {
+      console.error('表单引用找不到');
+      return;
+    }
+    // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-1856】联动组件最后一个js增强onchang方法不生效
+    let ref = this.formRef.value;
+    // 触发form层级的change事件
+    ref.$formValueChange(this.field, value);
+    if (this.next) {
+      // 重置value
+      await ref.setFieldsValue({ [this.next]: '' });
+    }
+    // update-end--author:liaozhiyang---date:20240717---for：【TV360X-1856】联动组件最后一个js增强onchang方法不生效
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableFieldWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableFieldWidget.ts
new file mode 100644
index 0000000..dfbb44d
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableFieldWidget.ts
@@ -0,0 +1,42 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 他表字段
+ */
+export default class LinkTableFieldWidget extends IFormSchema {
+
+  dictTable: string;
+  dictText: string;
+
+  constructor(key, data) {
+    super(key, data);
+    this.dictTable = data['dictTable'];
+    this.dictText = data['dictText'];
+  }
+  
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      componentProps: {
+        readOnly: true,
+        allowClear: false,
+        disabled: true,
+        style:{
+          background: 'none',
+          color:'rgba(0, 0, 0, 0.85)',
+          border:'none'
+        }
+      }
+    });
+    return item;
+  }
+
+  /**
+   * 获取他表字段的关联信息
+   */
+  getLinkFieldInfo(){
+    let arr = [this.dictTable, `${this.field},${this.dictText}`];
+    return arr;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableForQueryWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableForQueryWidget.ts
new file mode 100644
index 0000000..5248fea
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableForQueryWidget.ts
@@ -0,0 +1,35 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 表单设计器-关联记录查询 使用下拉搜索
+ */
+export default class LinkTableForQueryWidget extends IFormSchema {
+
+  code: string;
+  titleField: string;
+  multi: boolean;
+  
+  constructor(key, data) {
+    super(key, data);
+    this.code = data['code'];
+    this.titleField = data['titleField'];
+    this.multi = data['multi']||false;
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'LinkTableForQuery',
+      componentProps:{
+        code: this.code,
+        multi: this.multi,
+        field: this.titleField,
+        style: {
+          width: '100%',
+        }
+      }
+    });
+  }
+
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableWidget.ts
new file mode 100644
index 0000000..a772967
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/LinkTableWidget.ts
@@ -0,0 +1,72 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 关联记录
+ */
+export default class LinkTableWidget extends IFormSchema {
+  dictTable: string;
+  dictText: string;
+  dictCode: string;
+  view: string;
+  componentString: string;
+  linkFields: Array<string>;
+  
+  constructor(key, data) {
+    super(key, data);
+    this.dictTable = data.dictTable;
+    this.dictText = data.dictText;
+    this.dictCode = data.dictCode;
+    this.view = data.view;
+    this.componentString = ''
+    this.linkFields = []
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    const componentProps = this.getComponentProps()
+    return Object.assign({}, item, {
+      component: this.componentString,
+      componentProps: componentProps
+    });
+  }
+
+  getComponentProps() {
+    let props = {
+      textField: this.dictText,
+      tableName: this.dictTable,
+      valueField: this.dictCode,
+    };
+    let extend = this.getExtendData();
+    // 是否多选
+    if (extend.multiSelect) {
+      props['multi'] = true;
+    }else{
+      props['multi'] = false;
+    }
+    //封面图
+    if (extend.imageField) {
+      props['imageField'] = extend.imageField;
+    }else{
+      props['imageField'] = ''
+    }
+    //显示类型
+    if (extend.showType=='select') {
+      this.componentString = 'LinkTableSelect'
+      let popContainer = this.getPopContainer();
+      props['popContainer'] = popContainer
+    }else{
+      this.componentString = 'LinkTableCard'
+    }
+    if(this.linkFields.length>0){
+      props['linkFields'] = this.linkFields;
+    }
+    return props;
+  }
+
+  // 他表字段用于翻译
+  setOtherInfo(arr){
+    // ["表单字段,表字典字段","表单字段,表字典字段"]
+      this.linkFields = arr;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/MarkdownWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/MarkdownWidget.ts
new file mode 100644
index 0000000..47ae5dd
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/MarkdownWidget.ts
@@ -0,0 +1,17 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * markdown
+ */
+export default class MarkdownWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'JMarkdownEditor',
+      componentProps: {
+        // height: 300,
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/NumberWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/NumberWidget.ts
new file mode 100644
index 0000000..a572327
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/NumberWidget.ts
@@ -0,0 +1,49 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 输入框-数字
+ */
+export default class NumberWidget extends IFormSchema {
+  dbPointLength: number;
+
+  constructor(key, data) {
+    super(key, data);
+    this.dbPointLength = data.dbPointLength;
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    const safeIntRule = {
+      validator: (_rule, value) => {
+        if (value !== null && value !== undefined && value !== '') {
+          if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+            return Promise.reject(`数值超出安全范围（${Number.MIN_SAFE_INTEGER}~${Number.MAX_SAFE_INTEGER}），精度将丢失，请重新输入`);
+          }
+        }
+        return Promise.resolve();
+      },
+    };
+    const existingRules = item.rules || [];
+    return Object.assign({}, item, {
+      component: 'InputNumber',
+      componentProps,
+      // update-begin--author:liaozhiyang---date:20260413---for:【QQYUN-9790】online中数字类型超出js语言数值范围加提示
+      rules: [...existingRules, safeIntRule],
+      // update-end--author:liaozhiyang---date:20260413---for:【QQYUN-9790】online中数字类型超出js语言数值范围加提示
+    });
+  }
+
+  getComponentProps() {
+    const props = {
+      style: {
+        width: '100%',
+      },
+    };
+    if (this.dbPointLength >= 0) {
+      props['precision'] = this.dbPointLength;
+    }
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/PasswordWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/PasswordWidget.ts
new file mode 100644
index 0000000..a3e4a5a
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/PasswordWidget.ts
@@ -0,0 +1,14 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 输入框- 密码
+ */
+export default class PasswordWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'InputPassword',
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/PcaWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/PcaWidget.ts
new file mode 100644
index 0000000..403292f
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/PcaWidget.ts
@@ -0,0 +1,14 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 省市区
+ */
+export default class PcaWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'JAreaSelect',
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/PopupDictWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/PopupDictWidget.ts
new file mode 100644
index 0000000..2161fc2
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/PopupDictWidget.ts
@@ -0,0 +1,43 @@
+import {unref} from 'vue'
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * popupDict
+ */
+export default class PopupDictWidget extends IFormSchema {
+  dictCode: string;
+  multi: boolean;
+  constructor(key, data) {
+    super(key, data);
+    this.dictCode = `${data['code']},${data['destFields']},${data['orgFields']}`;
+    this.multi = data['popupMulti'];
+  }
+
+  getItem(): FormSchema {
+    const item = super.getItem();
+    const componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JPopupDict',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    const props = {
+      dictCode: this.dictCode,
+      multi: this.multi,
+    };
+    // 解决表单设计器高级查询 popup组件弹窗导致高级查询pop关闭
+    if (this.inPopover) {
+      props['getContainer'] = () => {
+        return this.getModalAsContainer();
+      };
+    }
+
+    // 获取表单数据
+    props['getFormValues'] = () => unref(this.formRef).getFieldsValue();
+
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/PopupWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/PopupWidget.ts
new file mode 100644
index 0000000..9224897
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/PopupWidget.ts
@@ -0,0 +1,72 @@
+import {unref} from 'vue'
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * popup
+ */
+export default class PopupWidget extends IFormSchema {
+  code: string;
+  multi: boolean;
+  fieldConfig: any[];
+
+  constructor(key, data) {
+    super(key, data);
+    this.code = data['code'];
+    this.multi = data['popupMulti'];
+    this.fieldConfig = this.getFieldConfig(data);
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JPopup',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let props = {
+      code: this.code,
+      multi: this.multi,
+      fieldConfig: this.fieldConfig,
+    };
+    if (this.formRef) {
+      props['formElRef'] = this.formRef;
+    } else {
+      props['setFieldsValue'] = this.setFieldsValue;
+    }
+    // 解决表单设计器高级查询 popup组件弹窗导致高级查询pop关闭
+    if(this.inPopover === true){
+      props['getContainer'] = ()=>{
+        return this.getModalAsContainer();
+      }
+    }
+
+    // 获取表单数据
+    props['getFormValues'] = () => unref(this.formRef).getFieldsValue();
+
+    return props;
+  }
+
+  getFieldConfig(data) {
+    let { destFields, orgFields, dictText } = data;
+    if (!destFields || destFields.length == 0) {
+      return [];
+    }
+    let arr1 = destFields.split(',');
+    let arr2 = orgFields.split(',');
+    let arr3 = dictText ? dictText.split(',') : null;
+    let config: any[] = [];
+    const pre = this.pre;
+    for (let i = 0; i < arr1.length; i++) {
+      config.push({
+        target: pre + arr1[i],
+        source: arr2[i],
+        label: arr3 ? arr3[i] : void 0,
+      });
+    }
+    return config;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/RadioWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/RadioWidget.ts
new file mode 100644
index 0000000..7b5d7a0
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/RadioWidget.ts
@@ -0,0 +1,66 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * radio
+ * 没有现成的 只能借用JDictSelectTag
+ */
+export default class RadioWidget extends IFormSchema {
+  dictTable: string;
+  dictText: string;
+  dictCode: string;
+
+  constructor(key, data) {
+    super(key, data);
+    // 可以从这个里面取 但是换成临时加载的
+    //this.options = this.getOptions(data['enum'])
+    this.dictTable = data['dictTable'];
+    this.dictText = data['dictText'];
+    this.dictCode = data['dictCode'];
+  }
+
+  setFormRef(ref) {
+    super.setFormRef(ref);
+    this.handleDictTableParams();
+  }
+
+  updateDictTable(dictTable: string) {
+    this.formRef.value.updateSchema(({
+      field: this.field,
+      componentProps: {
+        dictCode: this.genDictTableCode(dictTable, this.dictText, this.dictCode),
+      }
+    }))
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JDictSelectTag',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    if (!this.dictTable && !this.dictCode) {
+      // 字典表 和 字典 都没填数据
+      return {};
+    } else {
+      if (!this.dictTable) {
+        return {
+          // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+          useDicColor: true,
+          // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+          dictCode: this.dictCode,
+          type: 'radio',
+        };
+      } else {
+        return {
+          dictCode: this.genDictTableCode(this.dictTable, this.dictText, this.dictCode),
+          type: 'radio',
+        };
+      }
+    }
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/RangeWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/RangeWidget.ts
new file mode 100644
index 0000000..ebc3179
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/RangeWidget.ts
@@ -0,0 +1,43 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 日期、时间、数值-范围
+ */
+export default class RangeWidget extends IFormSchema {
+  
+  componentType: string;
+  datetime: boolean;
+  format: string;
+
+  constructor(key, data) {
+    super(key, data);
+    let view = data.view;
+    this.format = data.format;
+    this.datetime = false;
+    if('rangeNumber'===view){
+      this.componentType = 'JRangeNumber'
+    }else if('rangeTime'===view){
+      this.componentType = 'RangeTime'
+    }else{
+      this.componentType = 'RangeDate'
+      if(data.datetime===true){
+        this.datetime = true;
+      }
+    }
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: this.componentType,
+      componentProps: {
+        datetime: this.datetime,
+        format: this.format,
+        getPopupContainer: (_node) => {
+          return this.getModalAsContainer();
+        },
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectDepartWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectDepartWidget.ts
new file mode 100644
index 0000000..faedd55
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectDepartWidget.ts
@@ -0,0 +1,49 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 部门选择
+ */
+export default class SelectDepartWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JSelectDept',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let extend = this.getExtendData();
+    let props = {
+      // update-begin--author:liaozhiyang---date:20260414---for:【QQYUN-9801】修复online点击展开全部，树节点没全部展开
+      sync: false,
+      // update-end--author:liaozhiyang---date:20260414---for:【QQYUN-9801】修复online点击展开全部，树节点没全部展开
+      checkStrictly: true,
+      showButton: false,
+    };
+    if (extend.text) {
+      props['labelKey'] = extend.text;
+    }
+    if (extend.store) {
+      props['rowKey'] = extend.store;
+    }
+    if (extend.multiSelect === false) {
+      props['multiple'] = false;
+    }
+    
+    if (extend.multiSelect === true) {
+      props['multiple'] = true;
+    }
+    props['maxTagCount'] = 3;
+
+     // 解决表单设计器高级查询 popup组件弹窗导致高级查询pop关闭
+    if(this.inPopover === true){
+      props['getContainer'] = ()=>{
+        return this.getModalAsContainer();
+      }
+    }
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectMultiWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectMultiWidget.ts
new file mode 100644
index 0000000..ab39279
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectMultiWidget.ts
@@ -0,0 +1,67 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 下拉多选框
+ */
+export default class SelectMultiWidget extends IFormSchema {
+  dictTable: string;
+  dictText: string;
+  dictCode: string;
+
+  constructor(key, data) {
+    super(key, data);
+    // 可以从这个里面取 但是换成临时加载的
+    //this.options = this.getOptions(data['enum'])
+    this.dictTable = data['dictTable'];
+    this.dictText = data['dictText'];
+    this.dictCode = data['dictCode'];
+  }
+
+  setFormRef(ref) {
+    super.setFormRef(ref);
+    this.handleDictTableParams();
+  }
+
+  updateDictTable(dictTable: string) {
+    this.formRef.value.updateSchema(({
+      field: this.field,
+      componentProps: {
+        dictCode: this.genDictTableCode(dictTable, this.dictText, this.dictCode)
+      }
+    }))
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JSelectMultiple',
+      componentProps: componentProps,
+    });
+  }
+
+  getComponentProps() {
+    if (!this.dictTable && !this.dictCode) {
+      // 字典表 和 字典 都没填数据
+      return {};
+    } else {
+      let props = {};
+      if (!this.dictTable) {
+        props['dictCode'] = this.dictCode;
+        // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+        props['useDicColor'] = true;
+        // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+      } else {
+        props['dictCode'] = this.genDictTableCode(this.dictTable, this.dictText, this.dictCode);
+        // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+        // 默认滚动加载字典表数据
+        props['scrollLoad'] = true;
+        // update-end--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+      }
+      props['triggerChange'] = true;
+      props['popContainer'] = this.getPopContainer();
+      return props;
+    }
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectSearchWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectSearchWidget.ts
new file mode 100644
index 0000000..78691bc
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectSearchWidget.ts
@@ -0,0 +1,53 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 下拉搜索
+ */
+export default class SelectSearchWidget extends IFormSchema {
+  dict: string;
+  type: number;
+  constructor(key, data) {
+    super(key, data);
+    if (data.dictTable && data.dictText && data.dictCode) {
+      // 字典表
+      this.dict = this.genDictTableCode(data.dictTable, data.dictText, data.dictCode);
+      this.type = 1;
+    } else {
+      // 数据字典
+      this.dict = encodeURI(`${data.dictCode}`);
+      this.type = 0;
+    }
+  }
+
+  setFormRef(ref) {
+    super.setFormRef(ref);
+    this.handleDictTableParams();
+  }
+
+  updateDictTable(dictTable: string) {
+    this.formRef.value.updateSchema(({
+      field: this.field,
+      componentProps: {
+        dict: this.genDictTableCode(dictTable, this._data.dictText, this._data.dictCode),
+      }
+    }))
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let popContainer = this.getPopContainer();
+    return Object.assign({}, item, {
+      component: 'JSearchSelect',
+      componentProps: {
+        dict: this.dict,
+        pageSize: 10,
+        // update-begin--author:liaozhiyang---date:20240628---for：【issues/6336】online下拉搜索框设置数据字典编辑弹窗报错
+        async: this.type ? true : false,
+        // update-end--author:liaozhiyang---date:20240628---for：【issues/6336】online下拉搜索框设置数据字典编辑弹窗报错
+        useDicColor: true,
+        popContainer: popContainer,
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectUser2Widget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectUser2Widget.ts
new file mode 100644
index 0000000..66a96b6
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectUser2Widget.ts
@@ -0,0 +1,44 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 用户选择
+ */
+export default class SelectUser2Widget extends IFormSchema {
+
+  multi: boolean;
+  store: string;
+  query: boolean;
+
+  constructor(key, data) {
+    super(key, data);
+    this.multi = data.multi === true ? true : false;
+    this.store = data.store||'';
+    // 是否是查询条件，查询条件显示为输入框样式
+    this.query = data.query||false;
+  }
+  
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'UserSelect',
+      componentProps
+    });
+  }
+
+  getComponentProps() {
+    let props = {
+      multi: this.multi,
+      store: this.store,
+      query: this.query,
+    }
+    // 解决表单设计器高级查询 popup组件弹窗导致高级查询pop关闭
+    if(this.inPopover === true){
+      props['getContainer'] = ()=>{
+        return this.getModalAsContainer();
+      }
+    }
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectUserWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectUserWidget.ts
new file mode 100644
index 0000000..0d02b7d
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectUserWidget.ts
@@ -0,0 +1,54 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 用户选择
+ */
+export default class SelectUserWidget extends IFormSchema {
+
+  showButton: boolean;
+
+  constructor(key, data) {
+    super(key, data);
+    this.showButton = data.showButton === false ? false : true;
+  }
+  
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JSelectUser',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let extend = this.getExtendData();
+    let props = {
+      showSelected: false,
+      allowClear: true,
+      isRadioSelection: false,
+      showButton: this.showButton
+    };
+    if (extend.text) {
+      props['labelKey'] = extend.text;
+    }
+    if (extend.store) {
+      props['rowKey'] = extend.store;
+    }
+    if (extend.multiSelect === false) {
+      //props['multiple'] = false
+      props['isRadioSelection'] = true;
+    }
+    props['maxTagCount'] = 3;
+
+    // 解决表单设计器高级查询 popup组件弹窗导致高级查询pop关闭
+    if(this.inPopover === true){
+      props['getContainer'] = ()=>{
+        return this.getModalAsContainer();
+      }
+    }
+
+    return props;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SelectWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SelectWidget.ts
new file mode 100644
index 0000000..f9cbe14
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SelectWidget.ts
@@ -0,0 +1,150 @@
+import { FormSchema } from '/@/components/Form';
+import { h } from 'vue';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 下拉框
+ * //待处理： 表字典取数据可以考虑传参前端再请求
+ */
+export default class SelectWidget extends IFormSchema {
+  schema: Recordable;
+  /*title-value*/
+  options: any[];
+  dictTable: string;
+  dictText: string;
+  dictCode: string;
+  multi: boolean;
+
+  constructor(key, data) {
+    super(key, data);
+    this.schema = data;
+    // 静态数据选项（enum）转换为 JSelectSingle 所需格式
+    this.options = data['enum'] ? this.getOptions(data['enum'], '') : [];
+    this.dictTable = data['dictTable'];
+    this.dictText = data['dictText'];
+    this.dictCode = data['dictCode'];
+    this.multi = data['multi'] || false;
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let component = this.getFormComponent()
+    let componentProps = this.getComponentProps()
+    return Object.assign({}, item, {
+      component,
+      componentProps,
+      renderComponentContent: this.getSlots(componentProps),
+    });
+  }
+
+  getFormComponent(){
+    // update-begin--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+    // if(this.options.length>0){
+    //   return  'Select'
+    // }else{
+    //   return 'JDictSelectTag'
+    // }
+    return 'JSelectSingle'
+    // update-end--author:liaozhiyang---date:20260204---for:【issues/9307】online下拉加载表字典需滚动加载
+  }
+
+  setFormRef(ref) {
+    super.setFormRef(ref);
+    this.handleDictTableParams();
+  }
+
+  updateDictTable(dictTable: string) {
+    this.formRef.value.updateSchema(({
+      field: this.field,
+      componentProps: {
+        dictCode: this.genDictTableCode(dictTable, this.dictText, this.dictCode),
+      }
+    }))
+  }
+
+  getComponentProps() {
+    let mode = this.multi===true?'multiple':'combobox'
+    let props: any = {
+      allowClear: true,
+      mode,
+      style: {
+        width: '100%',
+      },
+      getPopupContainer: (_node) => {
+        return this.getModalAsContainer();
+      },
+       // update-begin--author:liaozhiyang---date:20260203---for:【issues/9307】online下拉加载表字典需滚动加载
+      // 下拉框展开/关闭的回调
+      // onDropdownVisibleChange: (visible: boolean)=> {
+      //   if (visible && typeof this.schema.updateOptions === 'function') {
+      //     this.schema.updateOptions()
+      //   }
+      // },
+      // update-end--author:liaozhiyang---date:20260203---for:【issues/9307】online下拉加载表字典需滚动加载
+    }
+    // update-begin--author:liaozhiyang---date:20260203---for:【issues/9307】online下拉加载表字典需滚动加载
+    if (!this.dictTable) {
+      props['dictCode'] = this.dictCode;
+      // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+      props['useDicColor'] = true;
+      // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7799】字典组件（原生组件除外）加上颜色配置
+      // 静态数据（无 dictCode）时，将 enum 选项直接传给组件
+      if (!this.dictCode && this.options.length > 0) {
+        props['options'] = this.options;
+      }
+    } else {
+      props['dictCode'] = this.genDictTableCode(this.dictTable, this.dictText, this.dictCode);
+      props['scrollLoad'] = true;
+      delete props.onDropdownVisibleChange;
+    }
+    // update-end--author:liaozhiyang---date:20260203---for:【issues/9307】online下拉加载表字典需滚动加载
+    return props
+  }
+
+  getSlots(componentProps: Recordable) {
+    const {useDicColor} = componentProps;
+    return function () {
+      return {
+        option(option: Recordable) {
+          const style: Recordable = {};
+          if (useDicColor && option.color) {
+            style.color = '#fff';
+            style.height = '20px';
+            style.lineHeight = '20px';
+            style.padding = '0 6px';
+            style.fontSize = '12px';
+            style.borderRadius = '8px';
+            style.backgroundColor = option.color;
+            style.display = 'inline-block';
+          }
+          return h('span', {
+            style,
+          }, option.text || option.label);
+        },
+      };
+    }
+  }
+
+  getOptions(array, type) {
+    if (!array || array.length == 0) {
+      return [];
+    }
+    let isNum = 'number' == type;
+    let arr: any[] = [];
+    for (let item of array) {
+      // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9359】加强判断，防止数据有null报错
+      if (item == null) break;
+      // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9359】加强判断，防止数据有null报错
+      let value = item.value;
+      if(isNum){
+        value = parseInt(value)
+      }
+      arr.push({
+        ...item,
+        value,
+        label: item.title,
+      });
+    }
+    return arr;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SlotWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SlotWidget.ts
new file mode 100644
index 0000000..0863604
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SlotWidget.ts
@@ -0,0 +1,68 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * slot
+ */
+export default class SlotWidget extends IFormSchema {
+  slot: string;
+  picker: string | undefined;
+  precision: number | undefined;
+
+  constructor(key, data) {
+    super(key, data);
+    this.slot = '';
+    // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-180】范围查询年，年月，周，季度
+    let fieldExtendJson = data.fieldExtendJson;
+    if (data.view == 'date' && fieldExtendJson) {
+      fieldExtendJson = JSON.parse(fieldExtendJson);
+      if (fieldExtendJson.picker && fieldExtendJson.picker != 'default') {
+        this.picker = fieldExtendJson.picker;
+      } else {
+        this.picker = undefined;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240520---for：【TV360X-180】范围查询年，年月，周，季度
+    // update-begin--author:liaozhiyang---date:20240606---for：【TV360X-214】范围查询控件没有根据配置格式化
+    this.precision = data.dbPointLength;
+    // update-end--author:liaozhiyang---date:20240606---for：【TV360X-214】范围查询控件没有根据配置格式化
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let slot = this.slot;
+    const componentProps: any = {};
+    this.picker && (componentProps.picker = this.picker);
+    // update-begin--author:liaozhiyang---date:20240606---for：【TV360X-214】范围查询控件没有根据配置格式化
+    this.precision && (componentProps.precision = this.precision);
+    // update-end--author:liaozhiyang---date:20240606---for：【TV360X-214】范围查询控件没有根据配置格式化
+    // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-180】范围查询年，年月，周，季度
+    return Object.assign({}, item, {
+      slot,
+      componentProps,
+    });
+    // update-end--author:liaozhiyang---date:20240520---for：【TV360X-180】范围查询年，年月，周，季度
+  }
+
+  groupDate() {
+    this.slot = 'groupDate';
+    return this;
+  }
+
+  groupDatetime() {
+    this.slot = 'groupDatetime';
+    return this;
+  }
+
+  groupTime() {
+    // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能
+    this.slot = 'groupTime';
+    return this;
+    // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9348】增加online查询区域时间范围查询功能
+  }
+
+  groupNumber() {
+    this.slot = 'groupNumber';
+    return this;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/SwitchWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/SwitchWidget.ts
new file mode 100644
index 0000000..92204b7
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/SwitchWidget.ts
@@ -0,0 +1,43 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+import { isArray, isObject } from '/@/utils/is';
+
+/**
+ * 开关
+ */
+export default class SwitchWidget extends IFormSchema {
+  constructor(key, data) {
+    super(key, data);
+    // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-54】开关只读未生效
+    // this.hasChange = false;
+    // update-end--author:liaozhiyang---date:20240517---for：【TV360X-54】开关只读未生效
+  }
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      component: 'JSwitch',
+      componentProps,
+    });
+  }
+
+  getComponentProps() {
+    let { fieldExtendJson } = this._data;
+    let options = ['Y', 'N'];
+    if (fieldExtendJson) {
+      if (typeof fieldExtendJson == 'string') {
+        // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+        const json = JSON.parse(fieldExtendJson);
+        if (isArray(json) && json.length == 2) {
+          options = json;
+        } else if (isObject(json) && isArray(json.switchOptions)) {
+          options = json.switchOptions;
+        }
+        // update-end--author:liaozhiyang---date:20240522---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+      }
+    }
+    return {
+      options,
+    };
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/TextAreaWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/TextAreaWidget.ts
new file mode 100644
index 0000000..a280565
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/TextAreaWidget.ts
@@ -0,0 +1,19 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 输入框-textarea
+ */
+export default class TextAreaWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'InputTextArea',
+      componentProps:{
+        autoSize : {
+          minRows: 4, maxRows: 10
+        }
+      }
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/TimeWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/TimeWidget.ts
new file mode 100644
index 0000000..66a5ad7
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/TimeWidget.ts
@@ -0,0 +1,24 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 日期、时间
+ */
+export default class TimeWidget extends IFormSchema {
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'TimePicker',
+      componentProps: {
+        placeholder: `请选择${this.label}`,
+        valueFormat: 'HH:mm:ss',
+        getPopupContainer: (_node) => {
+          return this.getModalAsContainer();
+        },
+        style: {
+          width: '100%',
+        },
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/TreeCategoryWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/TreeCategoryWidget.ts
new file mode 100644
index 0000000..e159ecd
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/TreeCategoryWidget.ts
@@ -0,0 +1,73 @@
+import { FormSchema } from '/@/components/Form';
+import IFormSchema from '../IFormSchema';
+
+/**
+ * 分类字典
+ */
+export default class TreeCategoryWidget extends IFormSchema {
+  pid: string;
+  multi: boolean;
+  textField: string;
+  pcode: string;
+
+  constructor(key, data) {
+    super(key, data);
+    this.multi = false;
+    this.pid = data['pidValue'];
+    this.pcode = data['pcode'];
+    this.textField = data['textField'];
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    let componentProps = this.getComponentProps();
+    return Object.assign({}, item, {
+      componentProps,
+      component: 'JCategorySelect',
+    });
+  }
+
+  /**
+   * 1. 不带返回值的
+   * 2. 带文本返回的
+   */
+  getComponentProps() {
+    // VUEN-1049 分类字典保存后，列表不展示 单表 树表 --> 配错编码后，表单界面还显示分类字典选项，可直接不显示字典选项
+    let param = {
+      placeholder: '请选择' + this.label
+    }
+    if(this.pcode){
+      param['pcode'] = this.pcode;
+    }else{
+      let pidValue = this.pid || 'EMPTY_PID';
+      param['pid'] = pidValue;
+    }
+    if (!this.textField) {
+      return {
+        multiple: this.multi,
+        ...param
+      };
+    } else {
+      return {
+        loadTriggleChange: true,
+        multiple: this.multi,
+        ...param,
+        back: this.textField,
+        onChange: (val, backVal) => {
+          if (this.formRef) {
+            this.formRef.value.setFieldsValue(backVal);
+            this.formRef.value.$formValueChange(this.field, val)
+          }
+        },
+      };
+    }
+  }
+
+  getRelatedHideFields(): string[] {
+    let arr: string[] = [];
+    if (this.textField) {
+      arr.push(this.textField);
+    }
+    return arr;
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/factory/impl/TreeSelectWidget.ts b/src/views/super/online/cgform/auto/comp/factory/impl/TreeSelectWidget.ts
new file mode 100644
index 0000000..2a97a0d
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/factory/impl/TreeSelectWidget.ts
@@ -0,0 +1,41 @@
+import IFormSchema from '../IFormSchema';
+import { FormSchema } from '/@/components/Form';
+
+/**
+ * 自定义树
+ */
+export default class TreeSelectWidget extends IFormSchema {
+  /*表名、显示字段、存储字段*/
+  dict: string;
+  /*父级ID的字段名*/
+  pidField: string;
+  /*父级ID的字段值*/
+  pidValue: string;
+  /*是否有子节点*/
+  hasChildField: string;
+
+  constructor(key, data) {
+    super(key, data);
+    this.dict = data['dict'];
+    this.pidField = data['pidField'];
+    this.pidValue = data['pidValue'];
+    // update-begin--author:liaozhiyang---date:20240509---for：【issues/6197】解决自定义树组件是否含有子节点功能不生效
+    this.hasChildField = data['hasChildField'];
+    // update-end--author:liaozhiyang---date:20240509---for：【issues/6197】解决自定义树组件是否含有子节点功能不生效
+  }
+
+  getItem(): FormSchema {
+    let item = super.getItem();
+    return Object.assign({}, item, {
+      component: 'JTreeSelect',
+      componentProps: {
+        dict: this.dict,
+        pidField: this.pidField,
+        pidValue: this.pidValue,
+        // update-begin--author:liaozhiyang---date:20240509---for：【issues/6197】解决自定义树组件是否含有子节点功能不生效
+        hasChildField: this.hasChildField,
+        // update-end--author:liaozhiyang---date:20240509---for：【issues/6197】解决自定义树组件是否含有子节点功能不生效
+      },
+    });
+  }
+}
diff --git a/src/views/super/online/cgform/auto/comp/index.ts b/src/views/super/online/cgform/auto/comp/index.ts
new file mode 100644
index 0000000..f0a93d5
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import {defineAsyncComponent} from 'vue'
+const SuperQuery = defineAsyncComponent(() => import('./superquery/SuperQuery.vue'))
+const JOnlineSearchSelect = defineAsyncComponent(() => import('./JOnlineSearchSelect.vue'))
+
+export const registerOnlineComp = {
+  install(app: App) {
+    app.component('JOnlineSearchSelect', JOnlineSearchSelect);
+    app.component('SuperQuery', SuperQuery);
+
+    console.log("---初始化---， 全局注册Online部分组件--------------")
+  },
+};
diff --git a/src/views/super/online/cgform/auto/comp/superquery/SuperQuery.vue b/src/views/super/online/cgform/auto/comp/superquery/SuperQuery.vue
new file mode 100644
index 0000000..14fdea2
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/superquery/SuperQuery.vue
@@ -0,0 +1,716 @@
+<template>
+    <!-- 按钮区域 -->
+    <div class="j-super-query-button">
+        <a-tooltip v-if="superQueryFlag" :mouseLeaveDelay="0.2">
+            <template #title>
+                <span>执行查询中...</span>
+                <divider type="vertical" style="background-color: #fff"/>
+                <a @click="handleStop">取消查询</a>
+            </template>
+            <a-button-group>
+                <a-button type="primary" @click="handleOpen">
+                    <AppstoreTwoTone :spin="true"/>
+                    <span>{{queryBtnCfg.buttonName}}</span>
+                </a-button>
+            </a-button-group>
+        </a-tooltip>
+        <a-button v-else type="primary" :preIcon="queryBtnCfg.buttonIcon" @click="handleOpen">
+            <span>{{queryBtnCfg.buttonName}}</span>
+        </a-button>
+    </div>
+
+    <!-- 高级查询弹框 -->
+    <teleport to="body">
+        <BasicModal :title="queryBtnCfg.buttonName + '构造器'" wrap-class-name="j-super-query-modal" :canFullscreen="true" :width="850" @register="registerFormModal" @ok="handleSubmit" @fullScreen="handleFullScreen">
+            <template #footer>
+                <div style="float: left">
+                    <a-button :loading="loading" @click="handleReset">清空</a-button>
+                    <a-button :loading="loading" @click="handleSave">保存查询</a-button>
+                </div>
+
+                <a-button key="submit" type="primary" @click="handleSubmit">执行查询</a-button>
+                <a-button key="back" @click="handleCancel">关闭</a-button>
+            </template>
+
+            <a-empty v-if="dynamicRowValues.values.length == 0">
+                <div slot="description">
+                    <span>没有任何查询条件</span>
+                    <a-divider type="vertical"/>
+                    <a @click="addOne(-1)">点击新增</a>
+                </div>
+            </a-empty>
+
+            <a-row :class="'j-super-query-modal-content'">
+                <a-col :sm="24" :md="24">
+                    <a-row v-show="dynamicRowValues.values.length > 0">
+                        <a-col :md="12" :xs="24">
+                            <a-form-item label="匹配模式" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
+                                <a-select v-model:value="matchType" :getPopupContainer="node=>node?.parentNode" style="width: 100%;">
+                                    <a-select-option value="and">AND（所有条件匹配）</a-select-option>
+                                    <a-select-option value="or">OR（任意一个匹配）</a-select-option>
+                                </a-select>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+
+                    <a-form v-show="dynamicRowValues.values.length > 0" ref="formRef" :class="'jee-super-query-form'" :model="dynamicRowValues" @finish="onFinish" :style="queryFormStyle">
+                        <a-space v-for="(item, index) in dynamicRowValues.values" :key="item.key" style="display: flex; margin-bottom: 8px" :align="item.curLineAlign ? item.align : 'baseline'">
+
+                            <a-form-item class="field-clos" :name="['values', index, 'field']" >
+                                <a-tree-select
+                                        :popupClassName="getTreePopupClass"
+                                        style="width:100%"
+                                        placeholder="请选择字段"
+                                        v-model:value="item.field"
+                                        show-search
+                                        tree-node-filter-prop="title"
+                                        allow-clear
+                                        tree-default-expand-all
+                                        :dropdown-style="{ maxHeight: `${fieldTreeSelectHeight}px`, overflow: 'auto' }"
+                                        :listHeight="fieldTreeSelectHeight - 20"
+                                        @change="handleChangeField(item)"
+                                        :tree-data="fieldTreeData">
+                                </a-tree-select>
+                            </a-form-item>
+                            <a-form-item class="rule-clos" :name="['values', index, 'rule']">
+                                <a-select style="width:100%" placeholder="请选择匹配规则" v-model:value="item.rule">
+                                    <a-select-option :value="qItem.value" v-for="qItem in getQueryCondition(item)" :key="qItem.value">{{qItem.label}}</a-select-option>
+                                    <!-- 当前表单设计器内专用 -->
+                                   <!-- <a-select-option value="empty">为空</a-select-option>
+                                    <a-select-option value="not_empty">不为空</a-select-option>-->
+                                    <!-- 当前表单设计器内专用 -->
+                                </a-select>
+                            </a-form-item>
+                            <a-form-item class="component-clos" :name="['values', index, 'val']">
+                                <online-super-query-val-component style="width:100%" :schema="getSchema(item, index)" :formModel="item" :setFormModel="(key, value)=>{setFormModel(key, value, item)}" @submit="handleSubmit" />
+                            </a-form-item>
+
+                            <a-form-item>
+                                <a-button @click="addOne(index)" style="margin-right: 6px">
+                                    <PlusOutlined #icon/>
+                                </a-button>
+                                <a-button @click="removeOne(item)">
+                                    <MinusCircleOutlined #icon/>
+                                </a-button>
+                            </a-form-item>
+                        </a-space>
+                    </a-form>
+                </a-col>
+            </a-row>
+          <!-- 查询记录 -->
+          <a-card :class="['j-super-query-history-card', {'collapsed': historyCollapsed}]" :bordered="false">
+            <template #title><div>保存的查询</div></template>
+            <a-empty
+                v-if="saveTreeData.length === 0"
+                class="j-super-query-history-empty"
+                :image="simpleImage"
+                description="没有保存的查询"
+            />
+            <a-tree
+                v-else
+                class="j-super-query-history-tree"
+                :treeData="saveTreeData"
+                :selectedKeys="[]"
+                :show-icon="true"
+                @select="handleTreeSelect">
+              <template #title="{title}">
+                <div>
+                  <span :title="title">{{(title.length>10)?(title.substring(0, 10)+'...'):title }}</span>
+                  <a-popconfirm title="确定删除吗？" @confirm="handleRemoveSaveInfo(title)">
+                    <span class="icon-cancle" @click="(e)=>e.stopPropagation()"><close-circle-outlined /></span>
+                  </a-popconfirm>
+                </div>
+              </template>
+              <!-- antd-2是这么写的 升级到3会也许会改变写法 -->
+              <template #custom>
+                <file-text-outlined/>
+              </template>
+            </a-tree>
+            <div class="collapse-box" @click="historyCollapsed=!historyCollapsed">
+              <Icon v-if="historyCollapsed" icon="ant-design:caret-left"/>
+              <Icon v-else icon="ant-design:caret-right"/>
+            </div>
+          </a-card>
+        </BasicModal>
+    </teleport>
+
+    <!-- 保存信息弹框 -->
+    <a-modal title="请输入保存的名称" :open="saveInfo.visible" @cancel="saveInfo.visible=false" @ok="doSaveQueryInfo" :confirmLoading="saveModalLoading">
+        <div style="height:80px;line-height:75px;width:100%;text-align: center">
+            <a-input v-model:value="saveInfo.title" style="width:90%" placeholder="请输入保存的名称"></a-input>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts">
+
+  import {ref, watch, computed} from 'vue'
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { useSuperQuery } from './useSuperQuery';
+  import OnlineSuperQueryValComponent from './SuperQueryValComponent.vue';
+  import { MinusCircleOutlined, PlusOutlined, FileTextOutlined, CloseCircleOutlined, AppstoreTwoTone } from '@ant-design/icons-vue';
+  import { Divider, Empty, Popconfirm } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import dayjs from 'dayjs';
+  import { cloneDeep } from 'lodash-es';
+  import { useConditionFilter } from '/@/utils/index';
+  import { useDesign } from '/@/hooks/web/useDesign';
+//const { BasicModal, useModal } = defineAsyncComponent(()=>import('/@/components/Modal'));
+  export default{
+    name: "OnlineSuperQuery",
+    props: {
+      config:{
+        type: Object,
+        default: []
+      },
+      status:{
+        type: Boolean,
+        default: false
+      },
+      online: {
+        type: Boolean,
+        default: false
+      },
+      // update-begin--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+      isCustomSave: {
+        type: Boolean,
+        default: false,
+      },
+      saveSearchData: {
+        type: Array,
+        default: () => [],
+      },
+      save: {
+        type: Function,
+      },
+      // update-end--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+      queryBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            buttonName: '高级查询',
+            buttonIcon: 'ant-design:filter-outlined',
+          }
+        }
+      },
+    },
+    components: {
+      BasicModal,
+      MinusCircleOutlined,
+      PlusOutlined,
+      OnlineSuperQueryValComponent,
+      FileTextOutlined,
+      CloseCircleOutlined,
+      AppstoreTwoTone,
+      Divider,
+      Popconfirm,
+    },
+    emits:['search'],
+    setup(props, {emit}) {
+
+      console.log("-------初始化  OnlineSuperQuery注册--------------")
+      
+      const [registerFormModal, formModal] = useModal()
+      const { createMessage: $message } = useMessage();
+      const queryFormStyle = ref({});
+      const fieldTreeSelectHeight = ref(180);
+      const { prefixCls } = useDesign('super-query');
+      const treePopupClass = `${prefixCls}-tree-popup`;
+      // 保存的查询是否折叠
+      const historyCollapsed = ref(true)
+      let currentQueryInfo = null;
+      // -update-begin--author:liaozhiyang---date:20240614---for：【TV360X-76】高级查询条件根据控件类型区分
+      const { filterCondition } = useConditionFilter();
+      const getQueryCondition = (data) => {
+        const auto = (arr, field) => {
+          const findItem = arr.find((item) => item.value === field) ?? {};
+          return filterCondition({ view: findItem.originView || findItem.view, fieldType: findItem.fieldType });
+        };
+        if (data.field?.indexOf('@') == -1 || !data.field) {
+          return auto(fieldTreeData.value, data.field);
+        } else {
+          const tableName = data.field.split('@')[0];
+          const findTableItem = fieldTreeData.value.find((item) => item.value === tableName);
+          if (findTableItem?.children?.length) {
+            return auto(findTableItem.children, data.field);
+          }
+        }
+      };
+      // -update-end--author:liaozhiyang---date:20240614---for：【TV360X-76】高级查询条件根据控件类型区分
+      /**
+       * 关闭按钮事件
+       */
+      function handleCancel() {
+        formModal.closeModal();
+      }
+
+      /**
+       * 确认按钮事件
+       */
+      function handleSubmit() {
+        if(props.online === true){
+          let dataArray = getQueryInfo(true)
+          if(dataArray && dataArray.length>0){
+            // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-86】年，年月，周查询出结果不准
+            transformDateValus(dataArray);
+            // update-end--author:liaozhiyang---date:20240517---for：【TV360X-86】年，年月，周查询出结果不准
+            emit('search', dataArray, matchType.value)
+            // update-begin--author:liaozhiyang---date:220230802---for：【QQYUN-5995】高级查询效果后关闭弹窗
+            handleCancel()
+            // update-end--author:liaozhiyang---date:220230802---for：【QQYUN-5995】高级查询效果后关闭弹窗
+            currentQueryInfo = dataArray;
+          }else{
+            $message.warning('空条件无法查询！')
+          }
+        }else{
+          //console.log('handleSubmit', dynamicRowValues.values)
+          let dataArray = getQueryInfo(true)
+          if(dataArray && dataArray.length>0){
+            //update-begin---author:wangshuai---date:2025-07-18---for:【issues/8548】代码生成的高级查询里日期-月控件不能正常展示---
+            transformDateValus(dataArray);
+            //update-end---author:wangshuai---date:2025-07-18---for:【issues/8548】代码生成的高级查询里日期-月控件不能正常展示---
+            let result = getSuperQueryParams(dataArray);
+            //console.log('查询数据1', dataArray)
+            //console.log('查询数据2', result)
+            emit('search', result)
+            // update-begin--author:wangshuai---date:20251112---for：【issues/9060】superQuery高级组件，点击"查询后"不能自动关闭弹窗
+            handleCancel()
+            // update-end--author:wangshuai---date:20251112---for：【issues/9060】superQuery高级组件，点击"查询后"不能自动关闭弹窗
+          }else{
+            $message.warning('空条件无法查询！')
+          }
+        }
+        historyCollapsed.value = true;
+      }
+
+      /**
+       * 2024-05-17
+       * liaozhiyang
+       * 把年，年月，周等时间重置到当前格式的第一天，因为存的时候也是第一天
+       */
+      const transformDateValus = (date) => {
+        date.forEach((item) => {
+          const value = item['val'];
+          if (item.type === 'date' && typeof value === 'string' && value != '') {
+            const obj = fieldProperties.value[item.field];
+            if (obj) {
+              let fieldExtendJson = obj.fieldExtendJson;
+              if (fieldExtendJson) {
+                fieldExtendJson = JSON.parse(fieldExtendJson);
+                if (fieldExtendJson.picker && fieldExtendJson.picker !== 'default') {
+                  const picker = fieldExtendJson.picker;
+                  if (picker === 'year') {
+                    item['val'] = dayjs(value).set('month', 0).set('date', 1).format('YYYY-MM-DD');
+                  } else if (picker === 'month') {
+                    item['val'] = dayjs(value).set('date', 1).format('YYYY-MM-DD');
+                  } else if (picker === 'week') {
+                    item['val'] = dayjs(value).startOf('week').format('YYYY-MM-DD');
+                  }
+                }
+              }
+            }
+          }
+        });
+      };
+      
+      function getSuperQueryParams(dataArray){
+        let arr:any = []
+        for(let item of dataArray){
+          let field = item.field;
+          let val = item.val
+          if(val instanceof Array){
+            val = val.join(",")
+          }
+          arr.push({
+            ...item,
+            field,
+            val
+          })
+        }
+        if(arr.length>0){
+          superQueryFlag.value = true;
+        }else{
+          superQueryFlag.value = false;
+        }
+        let result = {
+          superQueryMatchType: matchType.value,
+          superQueryParams: encodeURI(JSON.stringify(arr))
+        }
+        return result;
+      }
+      
+      function handleStop(){
+        let result = getSuperQueryParams([]);
+        emit('search', result)
+      } 
+      /**
+       * 重置按钮事件
+       */
+      function handleReset(){
+        dynamicRowValues.values = []
+        addOne(false);
+        let result = getSuperQueryParams([])
+        currentQueryInfo = null;
+        historyCollapsed.value = true;
+        emit('search', result)
+      }
+      // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-524】高级查询增加放大功能
+      const handleFullScreen = (val) => {
+        // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-810】高级查询放大之后树下拉框高一些多展示些字段
+        if (val) {
+          const contentHeight = document.documentElement.clientHeight - 165;
+          queryFormStyle.value = { maxHeight: `${contentHeight}px` };
+          fieldTreeSelectHeight.value = contentHeight * 0.62;
+        } else {
+          queryFormStyle.value = {};
+          fieldTreeSelectHeight.value = 180;
+        }
+        // update-end--author:liaozhiyang---date:20240603---for：【TV360X-810】高级查询放大之后树下拉框高一些多展示些字段
+      };
+      // update-end--author:liaozhiyang---date:20240524---for：【TV360X-524】高级查询增加放大功能
+      const {
+        formRef,
+        init,
+        dynamicRowValues,
+        matchType,
+        registerModal,
+
+        handleSave,
+        doSaveQueryInfo,
+        saveInfo,
+        saveTreeData,
+        handleTreeSelect,
+        handleRemoveSaveInfo,
+        fieldTreeData,
+        addOne,
+        removeOne,
+        setFormModel,
+        getSchema,
+        loading,
+        getQueryInfo,
+        initDefaultValues,
+        saveModalLoading,
+        fieldProperties,
+      } = useSuperQuery(props)
+
+      /*--------------------按钮区域-beign------------------*/
+      const superQueryFlag = ref(false)
+      watch(()=>props.status, (val)=>{
+        superQueryFlag.value = val;
+      }, {immediate: true});
+      
+      function handleOpen(){
+        // update-begin--author:liaozhiyang---date:20240604---for：【TV360X-204】修改内容没点确定，再次打开应该是恢复之前的内容
+        if (superQueryFlag.value && currentQueryInfo) {
+          dynamicRowValues.values = cloneDeep(currentQueryInfo);
+        }
+        // update-end--author:liaozhiyang---date:20240604---for：【TV360X-204】修改内容没点确定，再次打开应该是恢复之前的内容
+        formModal.openModal();
+        historyCollapsed.value = true;
+        addOne(true)
+      }
+      /*--------------------按钮区域-end------------------*/
+
+
+      function getPopupContainer(){
+        return document.getElementsByClassName('jee-super-query-form')[0]
+      }
+      function onFinish(a){
+        console.log('onfinish', a)
+      }
+      /**
+       * 2024-06-04
+       * liaozhiyang
+       * 【TV360X-461】字段类型是string，则默认模糊查询
+       * */
+      function handleChangeField(data) {
+        data['val'] = '';
+        const auto = (arr, field) => {
+          const findItem = arr.find((item) => item.value === field);
+          if (findItem?.fieldType === 'string' && ['text'].includes(findItem?.originView || findItem?.view)) {
+            data['rule'] = 'like';
+          } else if (['file', 'image', 'password'].includes(findItem?.originView || findItem?.view)) {
+            data['rule'] = 'empty';
+          } else {
+            data['rule'] = 'eq';
+          }
+        };
+        if (data.field?.indexOf('@') == -1) {
+          auto(fieldTreeData.value, data.field);
+        } else {
+          const tableName = data.field.split('@')[0];
+          const findTableItem = fieldTreeData.value.find((item) => item.value === tableName);
+          if (findTableItem?.children?.length) {
+            auto(findTableItem.children, data.field);
+          }
+        }
+      }
+
+      
+      watch(()=>props.config, (val)=>{
+        if(val){
+          // console.log('123', val)
+          // console.log('123', val)
+          // console.log('123', val)
+          // Object.keys(val).map(k=>{
+          //   console.log(k, val[k])
+          // })
+          // console.log('123', val)
+          // console.log('123', val)
+          // console.log('123', val)
+          init(val);
+        }
+      }, {immediate: true});
+      // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-342】字段下拉样式调整
+      const getTreePopupClass = computed(() => {
+        const findItem = fieldTreeData.value.find((item) => item.children);
+        return findItem ? `${treePopupClass} containTable` : `${treePopupClass} noTable`;
+      });
+      // update-end--author:liaozhiyang---date:20240603---for：【TV360X-342】字段下拉样式调整
+
+      return {
+        formRef,
+        registerFormModal,
+        init,
+        handleChangeField,
+        dynamicRowValues,
+        matchType,
+        historyCollapsed,
+        registerModal,
+        handleSubmit,
+        handleCancel,
+        handleSave,
+        handleReset,
+        doSaveQueryInfo,
+        saveInfo,
+        saveTreeData,
+        handleTreeSelect,
+        handleRemoveSaveInfo,
+        fieldTreeData,
+        addOne,
+        removeOne,
+        setFormModel,
+        getSchema,
+        loading,
+        onFinish,
+        getPopupContainer,
+        superQueryFlag,
+        handleOpen,
+        initDefaultValues,
+        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+        saveModalLoading,
+        queryFormStyle,
+        handleFullScreen,
+        fieldTreeSelectHeight,
+        getTreePopupClass,
+        handleStop,
+        getQueryCondition,
+      }
+    }
+
+  }
+</script>
+
+<style lang="less">
+  .j-super-query-modal {
+    .scrollbar__wrap {
+      margin-bottom: 0 !important;
+    }
+  }
+</style>
+<style scoped lang="less">
+   
+    :deep(.jee-super-query-form) {
+        max-height: 400px;
+        overflow-y: auto;
+        min-height: 300px;
+        .ant-form-item{
+            margin-bottom: 9px;
+        }
+    }
+    
+    :deep(.j-super-query-history-tree) {
+        .ant-tree-switcher{
+            width: 0px;
+        }
+        .ant-tree-node-content-wrapper{
+            width:100%;
+            &:hover{
+                background-color: #e6f7ff !important;
+                border-radius: 0;
+            }
+        }
+        .ant-tree-treenode-switcher-close{
+            .ant-tree-title{
+                display: inline-block;
+                width: calc(100% - 30px);
+                >div{
+                    display: flex;
+                    justify-content: space-between;
+                    .icon-cancle{
+                        display: none;
+                        color: #666666;
+                        &:hover{
+                            color: black;
+                        }
+                    }
+                }
+            }
+            &:hover {
+                .icon-cancle{
+                    display: inline-block !important;
+                }
+            }
+        }
+         .ant-card-body{
+            padding: 0;
+        }
+        // 保存查询样式宽度调整
+        .ant-tree-treenode { width: 100%;}
+    }
+
+    .j-super-query-history-card {
+      position: absolute;
+      top: 0;
+      right: -0;
+      bottom: 0;
+      z-index: 2;
+      //【QQYUN-7526】两行移入时会挤成三行
+      width: 180px;
+      min-height: 200px;
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+      
+      
+      &.collapsed {
+        //【QQYUN-7526】两行移入时会挤成三行
+        right: -180px;
+      }
+
+      .collapse-box {
+        position: absolute;
+        top: calc(50% - 15px);
+        left: -20px;
+        width: 20px;
+        height: 30px;
+        background-color: #fff;
+        border: 1px solid #e8e8e8;
+        border-left: none;
+        border-right-color: #ffffff;
+        border-radius: 15px 0 0 15px;
+        cursor: pointer;
+        transition: all 0.3s;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+        .app-iconify {
+          font-size: 16px;
+          position: relative;
+          right: -3px;
+          color: #666;
+        }
+      }
+
+      &.collapsed .app-iconify{
+        right: 0;
+      }
+        
+      :deep(.ant-card-body),
+      :deep(.ant-card-head){
+        padding: 8px;
+        min-height: 43px;
+        .ant-card-head-title {
+          padding: 0;
+        }
+      }
+    }
+
+    /*VUEN-1087 【移动端】高级查询显示不全 */
+    @media only screen and(max-width: 1050px) {
+        :deep(.jee-super-query-form){
+            .ant-space{
+                flex-direction:column;
+                gap: 0 !important;
+                margin-bottom: 16px !important;
+            }
+            .ant-space-item{
+                width: 100%;
+            }
+            .ant-form-item{
+                width: 100% !important;
+            }
+        }
+    }
+    // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-524】高级查询增加放大功能
+    .ant-form {
+      & > .ant-space {
+        width: 100%;
+        :deep(& > .ant-space-item) {
+          &:nth-child(1) {
+            width: 20%;
+          }
+          &:nth-child(2) {
+            width: 15%;
+          }
+          &:nth-child(3) {
+            width: 40%;
+          }
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240524---for：【TV360X-524】高级查询增加放大功能
+
+    .containTable {
+      :deep(.ant-select-tree-treenode) {
+        > .ant-select-tree-switcher { display: none;}
+      }
+    }
+</style>
+<style lang="less">
+  @tree-popup: ~'@{namespace}-super-query-tree-popup';
+  .@{tree-popup} {
+    // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-342】字段下拉样式调整
+    &.noTable {
+      .ant-select-tree-treenode {
+        > .ant-select-tree-switcher {
+          display: none;
+        }
+        .ant-select-tree-node-content-wrapper {
+          display: block;
+          max-width: 100%;
+        }
+        .ant-select-tree-title {
+          width: 100%;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240603---for：【TV360X-342】字段下拉样式调整
+    // update-end--author:liaozhiyang---date:20240612---for：【TV360X-1005】有子表时结构化主表且超长省略
+    &.containTable {
+      .ant-select-tree-indent-unit {
+        display: none;
+      }
+      .ant-select-tree-node-content-wrapper {
+        display: block;
+        max-width: calc(100% - 24px);
+      }
+      .ant-select-tree-title {
+        width: 100%;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240612---for：【TV360X-1005】有子表时结构化主表且超长省略
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/comp/superquery/SuperQueryValComponent.vue b/src/views/super/online/cgform/auto/comp/superquery/SuperQueryValComponent.vue
new file mode 100644
index 0000000..59073a2
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/superquery/SuperQueryValComponent.vue
@@ -0,0 +1,108 @@
+<script lang="tsx">
+  import { computed, defineComponent, PropType, unref } from 'vue';
+  import { FormSchema } from '/@/components/Form';
+  import { upperFirst } from 'lodash-es';
+  import { componentMap } from '/@/components/Form/src/componentMap';
+  import { createPlaceholderMessage } from '/@/components/Form/src/helper';
+  import { isFunction } from '/@/utils/is';
+
+  export default defineComponent({
+    name: 'SuperQueryValComponent',
+    inheritAttrs: false,
+    props: {
+      schema: {
+        type: Object as PropType<FormSchema>,
+        default: () => ({}),
+      },
+      formModel: {
+        type: Object as PropType<Recordable>,
+        default: () => ({}),
+      },
+      setFormModel: {
+        type: Function as PropType<(key: string, value: any) => void>,
+        default: null,
+      }
+    },
+    emits: ['submit'],
+    setup(props, { emit }) {
+      const getComponentsProps = computed(() => {
+        const {schema, formModel} = props;
+        let {componentProps = {}} = schema;
+        if (isFunction(componentProps)) {
+          componentProps = componentProps({schema, formModel}) ?? {};
+        }
+        return componentProps as Recordable;
+      });
+
+      const getValues = computed(() => {
+        const {formModel, schema} = props;
+        let obj = {
+          field: schema.field,
+          model: formModel,
+          values: {
+            ...formModel,
+          } as Recordable,
+          schema: schema,
+        };
+        return obj
+      });
+      
+      function renderComponent() {
+        const {
+          component,
+          changeEvent = 'change',
+          valueField,
+        } = props.schema;
+        const field = 'val';
+        const isCheck = component && ['Switch', 'Checkbox'].includes(component);
+        const eventKey = `on${upperFirst(changeEvent)}`;
+        const on = {
+          [eventKey]: (...args: Nullable<Recordable>[]) => {
+            const [e] = args;
+            if (propsData[eventKey]) {
+              propsData[eventKey](...args);
+            }
+            const target = e ? e.target : null;
+            const value = target ? (isCheck ? target.checked : target.value) : e;
+            props.setFormModel(field, value);
+          },
+        };
+        const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
+
+        const propsData: Recordable = {
+          allowClear: true,
+          getPopupContainer: (trigger: Element) => trigger?.parentNode,
+          ...unref(getComponentsProps)
+        };
+
+        const isCreatePlaceholder = !propsData.disabled;
+        
+        // RangePicker place是一个数组
+        if (isCreatePlaceholder && component !== 'RangePicker' && component) {
+          //自动设置placeholder
+          propsData.placeholder =
+            unref(getComponentsProps)?.placeholder ||
+            createPlaceholderMessage(component) + props.schema.label;
+        }
+        propsData.codeField = field;
+        propsData.formValues = unref(getValues);
+        const bindValue: Recordable = {
+          [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[field],
+        };
+        const compAttr: Recordable = {
+          ...propsData,
+          ...on,
+          ...bindValue,
+          allowClear: true,
+          onPressEnter() {
+            emit('submit');
+          },
+        };
+        return <Comp {...compAttr} />;
+      }
+      return ()=>{
+        return (<div style="width:100%">{renderComponent()}</div>)
+      }
+    }
+  })
+</script>
\ No newline at end of file
diff --git a/src/views/super/online/cgform/auto/comp/superquery/useSuperQuery.ts b/src/views/super/online/cgform/auto/comp/superquery/useSuperQuery.ts
new file mode 100644
index 0000000..4b71020
--- /dev/null
+++ b/src/views/super/online/cgform/auto/comp/superquery/useSuperQuery.ts
@@ -0,0 +1,703 @@
+import { useModalInner } from '/@/components/Modal';
+import { randomString } from '/@/utils/common/compUtils';
+import { reactive, ref, toRaw, watch } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Modal } from 'ant-design-vue';
+import { createLocalStorage } from '/@/utils/cache';
+import { useRoute } from 'vue-router';
+import FormSchemaFactory from '../factory/FormSchemaFactory';
+import {useExtendComponent} from '../../../hooks/auto/useExtendComponent'
+import { cloneDeep } from 'lodash-es';
+/**
+ * 表单类型转换成查询类型
+ * 普通查询和高级查询组件区别 ：高级查询不支持联动组件
+ */
+const FORM_VIEW_TO_QUERY_VIEW = {
+  "password": "text",
+  "file": "text",
+  "image": "text",
+  "textarea": "text",
+  "umeditor": "text",
+  "markdown": "text",
+  "checkbox": "list_multi",
+  "radio": "list",
+}
+
+// 查询条件存储编码前缀
+const SAVE_CODE_PRE = 'JSuperQuerySaved_';
+
+/**
+ * 查询项
+ * */
+interface SuperQueryItem {
+  field: string|undefined;
+  rule: string|undefined;
+  val: string|number;
+  key: string;
+  // 解决inputNumber组件对不齐样式问题
+  curLineAlign: string | undefined;
+  fileType: string;
+  // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+  view: string;
+  // 最先原始的组件类型；view字段可能会被改变
+  originView?: string;
+  // update-end--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+}
+/**
+ * 查询项-第一个控件树model
+ * */
+interface TreeModel {
+  title: string,
+  value: string,
+  isLeaf?: boolean,
+  disabled?: boolean,
+  children?: TreeModel[],
+  order?: number,
+  fieldType?: string;
+  // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+  view: string;
+  originView?: string;
+  // update-end--author:liaozhiyang---date:20240611---for：【TV360X-461】字段类型是string，控件是text，则默认模糊查询
+}
+
+/**
+ * 查询信息保存结构
+ * */
+interface SaveModel{
+  title: string,
+  content: string,
+  type: string,
+}
+
+export function useSuperQuery(props){
+  // 添加表单组件
+  const {linkTableCard2Select} = useExtendComponent();
+  
+  const { createMessage: $message } = useMessage();
+  /** 表单ref*/
+  const formRef = ref<any>();
+  
+  /** 数据*/
+  const dynamicRowValues = reactive<{ values: SuperQueryItem[] }>({
+    values: [],
+  });
+  /** and/or */
+  const matchType = ref('and');
+
+  // 保存查询弹窗确定按钮loading状态
+  const saveModalLoading = ref(false);
+  // 弹框显示
+  const [registerModal, {setModalProps}] = useModalInner(() => {
+    setModalProps({confirmLoading: false});
+  })
+  
+  // 高级查询类型不支持联动组件，需要额外设置联动组件的view为text
+  const view2QueryViewMap = Object.assign({}, {"link_down":"text"}, FORM_VIEW_TO_QUERY_VIEW)
+  
+  /**
+   * 确认按钮事件
+   */
+  function handleSubmit() {
+    console.log('handleSubmit', dynamicRowValues.values)
+  }
+
+  /**
+   * 关闭按钮事件
+   */
+  function handleCancel() {
+    //closeModal();
+  }
+  
+  /**
+   * val组件赋值
+   */
+  function setFormModel(key: string, value: any, item: any) {
+    console.log('setFormModel', key, value)
+   // formModel[key] = value;
+    item['val'] = value;
+  }
+
+  // 字段-Properties
+  const fieldProperties = ref<any>({})
+  // 字段-左侧查询项-树控件数据
+  const fieldTreeData = ref<any>([])
+  // update-begin--author:liaozhiyang---date:20240607---for：【TV360X-503】过滤图片，文件、密码组件
+  const filterComponent = (data) => {
+    const { properties = {} } = data;
+    Object.entries(properties).forEach(([field, value]) => {
+      if (value.view === 'table') {
+        filterComponent(value);
+      }
+      if (['link_down'].includes(value.originView || value.view)) {
+        delete properties[field];
+      }
+    });
+  };
+  // update-end--author:liaozhiyang---date:20240607---for：【TV360X-503】过滤图片，文件、密码组件
+  /**
+   * 初始化数据-最开始的方法
+   * 1.获取 表名@字段名-->配置 这样的一个map
+   * 2.获取树形结构的数据 显示:文本； 存储:表名@字段名
+   * 当树改变时，及时获取配置更新表单
+   * @param json
+   */
+  function init(json) {
+    console.log('=============')
+    console.log('=============', json)
+    console.log('=============')
+    // update-begin--author:liaozhiyang---date:20240607---for：【TV360X-503】过滤图片，文件、密码组件
+    filterComponent(json);
+    // update-end--author:liaozhiyang---date:20240607---for：【TV360X-503】过滤图片，文件、密码组件
+    let { allFields, treeData } = getAllFields(json);
+    fieldProperties.value = allFields;
+    // update-end--author:liaozhiyang---date:20240612---for：【TV360X-1005】有子表时结构化主表且超长省略
+    const properties = json.properties ?? {};
+    const subTable: string[] = [];
+    const tableName = json.table;
+    Object.entries(properties).forEach(([key, value]: [string, any]) => {
+      if (value.view === 'table') {
+        subTable.push(key);
+      }
+    });
+    if (subTable.length) {
+      let arr: TreeModel[] = [];
+      arr = treeData.filter((item) => !subTable.includes(item.value));
+      for (let i = 0, len = treeData.length; i < len; i++) {
+        const item = treeData[i];
+        if (!subTable.includes(item.value)) {
+          treeData.splice(i, 1);
+          i--;
+          len--;
+        }
+      }
+      treeData.unshift({ title: '主表', value: tableName, disabled: true, order: 200, children: arr, view: 'table' });
+    }
+    // update-end--author:liaozhiyang---date:20240612---for：【TV360X-1005】有子表时结构化主表且超长省略
+    fieldTreeData.value = treeData;
+  }
+
+  /**
+   * 左侧查询项 添加一行
+   * @param index
+   */
+  function addOne(index) {
+    let item = {
+      field: undefined,
+      rule: 'eq',
+      val:'',
+      key: randomString(16)
+    }
+    if(index===false){
+      // 重置后需要调用
+      dynamicRowValues.values = []
+      dynamicRowValues.values.push(item)
+    }else if(index===true){
+      // 打开弹框是需要调用
+      if(dynamicRowValues.values.length==0){
+        dynamicRowValues.values.push(item)
+      }
+    }else{
+      // 其余就是 正常的点击加号增加行
+      dynamicRowValues.values.splice(++index, 0, item)
+    }
+  }
+
+  /**
+   * 左侧查询项 删除一行
+   */
+  function removeOne(item: SuperQueryItem) {
+    let arr = toRaw(dynamicRowValues.values);
+    let index = -1;
+    for(let i=0;i<arr.length;i++){
+      if(item.key == arr[i].key){
+        index = i;
+        break;
+      }
+    }
+    if(index != -1){
+      dynamicRowValues.values.splice(index, 1);
+    }
+  }
+
+  // 默认的输入框
+  const defaultInput = {
+    field: "val",
+    label: "测试",
+    component:"Input"
+  }
+
+  /**
+   * 左侧查询项 val组件 schema获取, 替代左侧字段树的change事件
+   * @param item
+   * @param index
+   */
+  function getSchema(item, index) {
+    let map = fieldProperties.value
+    let prop = map[item.field]
+    if(!prop){
+      return defaultInput
+    }
+    if(view2QueryViewMap[prop.view]){
+      // 如果出现查询条件联动组件出来的场景，请跟踪此处
+      prop.view = view2QueryViewMap[prop.view]
+    }
+    let temp = FormSchemaFactory.createFormSchema(item.field, prop)
+   // temp.setFormRef(formRef)
+    temp.noChange()
+    // 查询条件中的 下拉框popContainer为parentNode
+    temp.asSearchForm();
+    temp.updateField(item.field+index)
+    const setFieldValue = (values)=>{
+      item['val'] = values[item.field]
+    }
+    temp.setFunctionForFieldValue(setFieldValue)
+    let schema = temp.getFormItemSchema()
+    //schema['valueField'] = 'val'
+    // 特殊规则，需要禁用组件
+    // 为空、不为空
+    if (['empty', 'not_empty'].includes(item.rule)) {
+      schema.componentProps = { ...schema.componentProps, disabled: true };
+    }
+    linkTableCard2Select(schema);
+    // update-begin--author:liaozhiyang---date:20240607---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+    if (schema.component === 'LinkTableSelect') {
+      let componentProps = schema.componentProps ?? {};
+      schema.componentProps = { ...componentProps, editBtnShow: false };
+    }
+    // update-end--author:liaozhiyang---date:20240607---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+    // update-begin--author:liaozhiyang---date:20231219---for：【QQYUN-7640】高级查询数字组件会偏移
+    if (schema && schema.component === 'InputNumber') {
+      item.curLineAlign = 'start';
+    }
+    // update-end--author:liaozhiyang---date:20231219---for：【QQYUN-7640】高级查询数字组件会偏移
+    // update-begin--author:liaozhiyang---date:20240223---for：【QQYUN-8229】高级选择自定义树下拉显示不全
+    if (schema?.component === 'JTreeSelect') {
+      let componentProps: any = schema.componentProps;
+      if (componentProps) {
+        componentProps.getPopupContainer = () => document.body
+      } else {
+        schema.componentProps = { getPopupContainer: () => document.body }
+      };
+    }
+    // update-end--author:liaozhiyang---date:20240223---for：【QQYUN-8229】高级选择自定义树下拉显示不全
+    // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-499】高级查询开关组件换成下拉，用户组件不显示按钮
+    if (schema?.component === 'JSwitch') {
+      const componentProps = schema.componentProps ?? {};
+      schema.componentProps = { ...componentProps, query: true };
+    }
+    if (schema?.component === 'JSelectUser') {
+      const componentProps = schema.componentProps ?? {};
+      schema.componentProps = { ...componentProps, showButton: false };
+    }
+    // update-end--author:liaozhiyang---date:20240529---for：【TV360X-499】高级查询开关换成下拉，用户组件不显示按钮
+    return schema
+  }
+
+  /*-----------------------右侧保存信息相关-begin---------------------------*/
+
+  /**
+   * 右侧树 的 数据
+   */
+  const saveTreeData = ref<any>('')
+  // 本地缓存
+  const $ls = createLocalStorage();
+  //需要保存的信息（一条）
+  const saveInfo = reactive({
+    visible: false,
+    title: '',
+    content: '',
+    saveCode: ''
+  });
+  //按钮loading
+  const loading = ref(false)
+
+  // 当前页面路由
+  const route = useRoute();
+  // update-begin--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+  if (props.isCustomSave) {
+    watch(props.saveSearchData, () => {
+      currentPageSavedArray.value = props.saveSearchData;
+    });
+  } else {
+    // 监听路由信息，路由发生改变，则重新获取保存的查询信息-->currentPageSavedArray
+    watch(()=>route.fullPath, (val)=>{
+      console.log('fullpath', val);
+        initSaveQueryInfoCode();
+    });
+  }
+  // update-end--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+  
+  // 当前页面存储的 查询信息
+  const currentPageSavedArray = ref<SaveModel[]>([]);
+  // 监听当前页面是否有新的数据保存了，然后更新右侧数据->saveTreeData
+  watch(()=>currentPageSavedArray.value, (val)=>{
+    let temp:any[] = []
+    if(val && val.length>0){
+      val.map(item=>{
+        let key = randomString(16)
+        temp.push({
+          title: item.title,
+          slots: { icon: 'custom' },
+          value: key
+        })
+      })
+    }
+    saveTreeData.value = temp
+  }, {immediate:true, deep: true})
+
+
+  // 重新获取保存的查询信息
+  function initSaveQueryInfoCode(){
+    // update-begin--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+    if (props.isCustomSave) {
+      currentPageSavedArray.value = cloneDeep(props.saveSearchData);
+    } else {
+      let code = SAVE_CODE_PRE + route.fullPath;
+      saveInfo.saveCode = code;
+      let list = $ls.get(code);
+      if(list && list instanceof Array){
+        currentPageSavedArray.value = list
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+  }
+
+  // 执行一次 获取保存的查询信息
+  initSaveQueryInfoCode();
+  
+  /**
+   * 保存按钮事件
+   */
+  function handleSave(){
+    // 获取实际数据转成字符串
+    let fieldArray = getQueryInfo();
+    if(!fieldArray){
+      $message.warning('空条件不能保存')
+      return;
+    }
+    let content = JSON.stringify(fieldArray)
+    openSaveInfoModal(content)
+  }
+
+  // 输入保存标题 弹框显示
+  function openSaveInfoModal(content){
+    saveInfo.visible = true;
+    saveInfo.title = '';
+    saveInfo.content = content
+  }
+
+  /**
+   * 确认保存查询信息
+   */
+  function doSaveQueryInfo(){
+    let { title, content, saveCode } = saveInfo;
+    let index = getTitleIndex(title);
+    const saveSearchCondition = (type) => {
+      // update-begin--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+      const curPageSave: any = cloneDeep(currentPageSavedArray.value);
+      saveModalLoading.value = true;
+      if (type) {
+        // 覆盖已有
+        curPageSave.splice(index, 1, {
+          content,
+          title,
+          type: matchType.value,
+        });
+      } else {
+        curPageSave.push({
+          content,
+          title,
+          type: matchType.value,
+        });
+      }
+      const run = () => {
+        saveInfo.visible = false;
+        $message.success('保存成功');
+        currentPageSavedArray.value = curPageSave;
+        saveModalLoading.value = false;
+      };
+      if (props.isCustomSave) {
+        props
+          .save(curPageSave, 0)
+          .then(() => {
+            run();
+          })
+          .catch((err) => {
+            saveModalLoading.value = false;
+          });
+      } else {
+        // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8357】高级查询保存的查询条件缓存改成一个月
+        const expire = 60 * 60 * 24 * 30;
+        // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8357】高级查询保存的查询条件缓存改成一个月
+        $ls.set(saveCode, curPageSave, expire);
+        run();
+      }
+      // update-end--author:liaozhiyang---date:20240514---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+    };
+    if (index >= 0) {
+      // 已存在是否覆盖
+      Modal.confirm({
+        title: '提示',
+        content: `${title} 已存在，是否覆盖？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          saveSearchCondition(1);
+        },
+      });
+    } else {
+      saveSearchCondition(0);
+    }
+  }
+
+  // 根据填入的 title找本地存储的信息，如果有需要询问是否覆盖
+  function getTitleIndex(title){
+    let savedArray = currentPageSavedArray.value
+    let index = -1;
+    for(let i=0;i<savedArray.length;i++){
+      if(savedArray[i].title == title){
+        index = i;
+        break;
+      }
+    }
+    return index;
+  }
+  
+  /**
+   * 获取左侧所有查询条件，如果没有/或者条件无效则返回false
+   */
+  function getQueryInfo(isEmit = false){
+    let arr = dynamicRowValues.values;
+    if(!arr || arr.length==0){
+      return false;
+    }
+    let fieldArray:any = [];
+    let fieldProps = fieldProperties.value;
+    for(let item of arr){
+      let allowEmpty = ['empty', 'not_empty'].includes(item.rule!)
+      if(item.field && (allowEmpty || item.val || item.val===0) && item.rule){
+        let prop = fieldProps[item.field]
+        // 自定义格式化数据
+        let formatValue = prop?.formatValue ?? (v => v)
+        let tempVal:any = toRaw(item.val)
+        if(tempVal instanceof Array){
+          tempVal = tempVal.map(v => formatValue(v)).join(',')
+        } else {
+          tempVal = formatValue(tempVal)
+        }
+        let fieldName = getRealFieldName(item)
+        let obj = {
+          field: fieldName,
+          rule: item.rule,
+          val: tempVal,
+          fileType: item.fileType ,
+        };
+        if(isEmit===true){
+          //如果当前数据用于emit事件，需要设置dbtype和type
+          let prop = fieldProps[item.field]
+          if(prop){
+            obj['type'] = prop.view
+            obj['dbType'] = prop.type
+          }
+        }
+        fieldArray.push(obj)
+      }
+    }
+    if(fieldArray.length==0){
+      return false;
+    }
+    return fieldArray
+  }
+
+  //update-begin-author:taoyan date:2022-5-31 for: VUEN-1148 主子联动下，高级查询查子表数据，无效
+  /**
+   * 高级查询参数 字段名
+   * 获取后台需要的 字段名格式：表名,字段名
+   * @param item
+   */
+  function getRealFieldName(item){
+    let fieldName = item.field
+    if(fieldName.indexOf('@')>0){
+      fieldName = fieldName.replace('@', ',')
+    }
+    return fieldName;
+  }
+  //update-end-author:taoyan date:2022-5-31 for: VUEN-1148 主子联动下，高级查询查子表数据，无效
+
+  /**
+   * 右侧数据 点击事件，重新将数据显示到左侧
+   * @param key
+   * @param node
+   */
+  function handleTreeSelect(key, {node}){
+    console.log(key, node)
+    let title = node.dataRef.title
+    let arr = currentPageSavedArray.value.filter(item=>item.title==title)
+    if(arr && arr.length>0){
+      // 拿到数据渲染
+      let { content, type } = arr[0]
+      let data = JSON.parse(content)
+      let rowsValues: SuperQueryItem[] = []
+      for(let item of data){
+        // update-begin--author:liaozhiyang---date:20240108---for：【issues/962】高级查询保存的查询是子表，下次查询不出结果
+        item.field = item.field.replace(',','@');
+        // update-end--author:liaozhiyang---date:20240108---for：【issues/962】高级查询保存的查询是子表，下次查询不出结果
+        rowsValues.push(Object.assign({}, {key: randomString(16)}, item))
+      }
+      dynamicRowValues.values = rowsValues
+      matchType.value = type
+    }
+  }
+
+  /**
+   * 右侧数据 删除事件
+   */
+  function handleRemoveSaveInfo(title){
+    console.log(title)
+    let index = getTitleIndex(title)
+    if(index>=0){
+      // update-begin--author:liaozhiyang---date:20240513---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+      if (props.isCustomSave) {
+        const curPageSave = cloneDeep(currentPageSavedArray.value);
+        curPageSave.splice(index, 1);
+        props
+          .save(curPageSave, 1)
+          .then(() => {
+            currentPageSavedArray.value = curPageSave;
+          })
+          .catch((err) => {
+            console.log(`删除是吧~，${err}`);
+          });
+      } else {
+        currentPageSavedArray.value.splice(index, 1);
+        $ls.set(saveInfo.saveCode, currentPageSavedArray.value);
+      }
+      // update-end--author:liaozhiyang---date:20240513---for：【issues/6205】高级查询组件增加保存条件自定义存储方式
+    }
+  }
+
+  /*-----------------------右侧保存信息相关-end---------------------------*/
+
+  // 获取所有字段配置信息
+  function getAllFields(properties){
+    // 获取所有配置 查询字段 是否联合查询
+   // const {properties, table, title } = json;
+    let allFields = {}
+    let order = 1;
+    let treeData:TreeModel[] = []
+ /*   let mainNode:TreeModel = {
+      title,
+      value: table,
+      disabled: true,
+      children: []
+    };*/
+    //treeData.push(mainNode)
+    if(properties.properties){
+      properties = properties.properties
+    }
+    Object.keys(properties).map(field=>{
+      let item = properties[field]
+      if(item.view == 'table'){
+        // 子表字段
+        // 联合查询开启才需要子表字段作为查询条件
+        let subProps = item['properties'] || item['fields']
+        let subTableOrder = order * 100;
+        let subNode:TreeModel = {
+          title: item.title,
+          value: field,
+          disabled: true,
+          children: [],
+          order: subTableOrder,
+          // update-begin--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+          fieldType: item.type,
+          // update-end--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+        }
+        Object.keys(subProps).map(subField=>{
+          let subItem = subProps[subField];
+          // 保证排序统一
+          subItem['order'] = subTableOrder + subItem['order']
+          let subFieldKey = field+'@'+subField
+          allFields[subFieldKey] = subItem
+          subNode.children!.push({
+            title: subItem.title,
+            value: subFieldKey,
+            isLeaf: true,
+            order: subItem['order'],
+            // update-begin--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+            fieldType: subItem.type,
+            view: subItem.view,
+            originView: subItem.view,
+            // update-end--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+          })
+        });
+        orderField(subNode);
+        treeData.push(subNode);
+        order++;
+      }else{
+        // 主表字段
+        //let fieldKey = table+'@'+field
+        let fieldKey = field
+        allFields[fieldKey] = item
+        treeData.push({
+          title: item.title,
+          value: fieldKey,
+          isLeaf: true,
+          order: item.order,
+          // update-begin--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+          fieldType: item.type,
+          view: item.view,
+          originView: item.view,
+          // update-end--author:liaozhiyang---date:20240306---for：【TV360X-461】字段类型是string，则默认模糊查询
+        });
+      }
+    });
+    orderField(treeData);
+    return {allFields, treeData}
+  }
+  
+  //根据字段的order重新排序
+  function orderField(data){
+    let arr = data.children || data;
+    arr.sort(function (a, b) {
+      return a.order - b.order
+    });
+  }
+
+  function initDefaultValues(values) {
+    const { params, matchType } = values
+    if(params){
+      let rowsValues: SuperQueryItem[] = []
+      for(let item of params){
+        rowsValues.push(Object.assign({}, {key: randomString(16)}, item))
+      }
+      dynamicRowValues.values = rowsValues
+      matchType.value = matchType
+    }
+  }
+  
+  return {
+    formRef,
+    init,
+    dynamicRowValues,
+    matchType,
+    registerModal,
+    handleSubmit,
+    handleCancel,
+    handleSave,
+    doSaveQueryInfo,
+    saveInfo,
+    saveTreeData,
+    handleRemoveSaveInfo,
+    handleTreeSelect,
+    fieldTreeData,
+    addOne,
+    removeOne,
+    setFormModel,
+    getSchema,
+    loading,
+    getQueryInfo,
+    initDefaultValues,
+    saveModalLoading,
+    fieldProperties,
+  }
+}
diff --git a/src/views/super/online/cgform/auto/default/OnlineAutoList.vue b/src/views/super/online/cgform/auto/default/OnlineAutoList.vue
new file mode 100644
index 0000000..1dec481
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineAutoList.vue
@@ -0,0 +1,532 @@
+<template>
+  <div :class="['p-2', `online-list-${ID}`]">
+
+    <!-- 加载中骨架屏 -->
+    <a-skeleton v-if="tableReloading" active />
+
+    <!-- 查询条件 -->
+    <online-query-form
+        v-show="!tableReloading"
+        ref="onlineQueryFormOuter"
+        :id="ID"
+        :queryBtnCfg="getQueryButtonCfg"
+        :resetBtnCfg="getResetButtonCfg"
+        @search="queryWithCondition"
+        @loaded="onQueryFormLoaded"
+    />
+
+    <!-- 列表 -->
+    <BasicTable
+      v-if="!tableReloading"
+      ref="onlineTable"
+      rowKey="jeecg_row_key"
+      :canResize="true"
+      :bordered="true"
+      :showIndexColumn="false"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      :rowSelection="rowSelection"
+      :actionColumn="actionColumn"
+      :showTableSetting="true"
+      :clickToRowSelect="false"
+      :scroll="tableScroll"
+      @table-redo="reload"
+      :class="{ 'j-table-force-nowrap': enableScrollBar }"
+      @change="handleChangeInTable"
+    >
+      <template #tableTitle>
+        <a-button
+            v-if="buttonSwitch.add && cgBIBtnMap['add'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['add'].buttonIcon"
+            @click="handleAdd"
+        >
+          <span>{{cgBIBtnMap['add'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.import && cgBIBtnMap['import'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['import'].buttonIcon"
+            @click="onImportExcel"
+        >
+          <span>{{cgBIBtnMap['import'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.export && cgBIBtnMap['export'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['export'].buttonIcon"
+            :loading="exportLoading"
+            @click="onExportExcelOverride"
+        >
+          <span>{{cgBIBtnMap['export'].buttonName}}</span>
+        </a-button>
+        <!-- update-begin--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据 -->
+        <a-tooltip
+          v-if="!isConfigCurRoute && (tableType == 1 || tableType == 2) && buttonSwitch.aigc_mock_data && cgBIBtnMap['aigc_mock_data']?.enabled && dataSource.length == 0 && !loading"
+          :open="false"
+          placement="bottom"
+        >
+          <template #title>
+            <span>当有数据时或生成测试数据后该按钮会隐藏</span>
+          </template>
+          <a-button preIcon="mdi:robot-love-outline" :loading="testDataLoading" @click="handleAddTestData(currentTableName, reload)">
+            {{ cgBIBtnMap['aigc_mock_data'].buttonName }}
+          </a-button>
+        </a-tooltip>
+        <!-- update-end--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据 -->
+        <!-- 自定义按钮 -->
+        <template v-if="cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+          <a-button
+            v-if="item.optType == 'js'"
+            :key="'cgbtn' + index"
+            @click="cgButtonJsHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+          <a-button
+            v-else-if="item.optType == 'action'"
+            :key="'cgbtn' + index"
+            @click="cgButtonActionHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+        </template>
+
+        <a-button
+            v-show="selectedKeys.length > 0"
+            v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+            :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+            @click="handleBatchDelete"
+        >
+          <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+        </a-button>
+
+        <online-super-query
+            v-if="buttonSwitch.super_query && cgBIBtnMap['super_query'].enabled"
+            ref="superQueryButtonRef"
+            online
+            :status="superQueryStatus"
+            :queryBtnCfg="cgBIBtnMap['super_query']"
+            @search="handleSuperQuery"
+        />
+      </template>
+
+      <template #fileSlot="{ text, record, column }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+          下载
+        </a-button>
+      </template>
+
+      <template #imgSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+        <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+      </template>
+
+      <template #htmlSlot="{ text, column, record }">
+        <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+        <template v-if="column.fieldHref">
+          <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+        </template>
+        <div v-else v-html="text"></div>
+        <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      </template>
+
+      <template #pcaSlot="{ text, column }">
+        <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+      </template>
+
+      <template #dateSlot="{ text, column }">
+        <span>{{ getFormatDate(text, column) }}</span>
+      </template>
+
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownActions(record)" />
+      </template>
+    </BasicTable>
+
+    <!-- 表单新增、修改弹框 -->
+    <OnlineAutoModal
+        @register="registerModal"
+        :id="ID"
+        :cgBIBtnMap="cgBIBtnMap"
+        :buttonSwitch="buttonSwitch"
+        :confirmBtnCfg="getFormConfirmButtonCfg"
+        @success="reload"
+        @formConfig="handleFormConfig"
+    />
+
+    <!-- 详情弹框 -->
+    <online-detail-modal :id="ID" @register="registerDetailModal"/>
+
+    <!-- 导入 -->
+    <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+    <!-- 跳转Href的动态组件方式 -->
+    <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+      <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+    </a-modal>
+
+    <!-- 自定义弹窗 -->
+    <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+    <!-- 弹窗给href到另外一张表单用-详情表单 -->
+    <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false"/>
+
+    <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+    <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+    <!-- 流程图查看modal -->
+    <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+    <!-- 页面loading[主要为了js增强使用] -->
+    <Loading :loading="pageLoading" :absolute="true" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue'
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from './OnlineAutoModal.vue';
+  import OnlineCustomModal from './OnlineCustomModal.vue';
+  import OnlineDetailModal from './OnlineDetailModal.vue'
+  import { watch } from 'vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import OnlineSuperQuery from '../comp/superquery/SuperQuery.vue';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import { NORMAL } from "../../util/constant";
+  import { Loading } from '/@/components/Loading';
+
+  export default {
+    name: 'OnlineAutoList',
+    components: {
+      BasicTable,
+      TableAction,
+      OnlineAutoModal,
+      JImportModal,
+      OnlineQueryForm,
+      OnlineSuperQuery,
+      OnlineCustomModal,
+      OnlineDetailModal,
+      OnlinePopModal,
+      Loading,
+    },
+    setup() {
+      const { createMessage: $message } = useMessage();
+      const currentTableName = ref('');
+      const tableType = ref('');
+      // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+      const {
+        ID,
+        onlineTableContext,
+        onlineQueryFormOuter,
+        loading,
+        reload,
+        dataSource,
+        pagination,
+        handleSpecialConfig,
+        getColumnList,
+        handleChangeInTable,
+        loadData,
+        superQueryButtonRef,
+        superQueryStatus,
+        handleSuperQuery,
+        onlineExtConfigJson,
+        handleFormConfig,
+        registerCustomModal,
+        tableReloading,
+        isConfigCurRoute,
+        pageLoading,
+      } = useOnlineTableContext();
+
+      // 判断 若ID不存在就终止后续逻辑
+      if (!ID.value) {
+        $message.warning('地址错误, 配置ID不存在!');
+        // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+        throw new Error('地址错误, 配置ID不存在!');
+        // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+      }
+      // 处理增强
+      let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+      // 处理列表button
+      const {
+        buttonSwitch,
+        cgLinkButtonList,
+        cgBIBtnMap,
+        getQueryButtonCfg,
+        getResetButtonCfg,
+        getFormConfirmButtonCfg,
+        cgTopButtonList,
+        importUrl,
+        registerModal,
+        handleAdd,
+        handleEdit,
+        handleBatchDelete,
+        handleAddTestData,
+        testDataLoading,
+        testDataBtnShow,
+        registerImportModal,
+        onImportExcel,
+        onExportExcel,
+        cgButtonJsHandler,
+        cgButtonActionHandler,
+        cgButtonLinkHandler,
+        handleSubmitFlow,
+        getDropDownActions,
+        getActions,
+        initButtonList,
+        initButtonSwitch,
+        registerDetailModal,
+        registerBpmModal
+      } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+      const exportLoading = ref(false)
+
+      // 重写导出方法，防止频繁点击
+      async function onExportExcelOverride() {
+        try {
+          exportLoading.value = true
+          await onExportExcel()
+        } finally {
+          // 防止频繁点击，延迟1.5s关闭loading
+          setTimeout(() => exportLoading.value = false, 1500)
+        }
+      }
+
+      // 处理 BasicTable 的配置
+      const {
+        columns,
+        actionColumn,
+        selectedKeys,
+        rowSelection,
+        enableScrollBar,
+        tableScroll,
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+        handleColumnResult,
+        hrefComponent,
+        viewOnlineCellImage,
+        hrefMainTableId,
+        registerOnlineHrefModal,
+        registerPopModal,
+        openPopModal,
+        onlinePopModalRef,
+        popTableId,
+        handleClickFieldHref,
+      } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+      // 监听表单配置ID
+      watch(
+        ID,
+        () => {
+          console.log('watched id is change...');
+          initAutoList();
+        },
+        { immediate: true }
+      );
+
+      /**重新加载online配置*/
+      async function initAutoList() {
+        loading.value = true;
+        // 1.列配置信息
+        let columnResult: any = await getColumnList(NORMAL);
+        handleTableConfig(columnResult);
+        // update-begin--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据
+        currentTableName.value = columnResult.currentTableName;
+        tableType.value = columnResult.tableType;
+        // update-end--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据
+        // 2.加载数据
+        await loadData();
+        loading.value = false;
+        // 3.执行js增强 setup
+        onlineTableContext.execButtonEnhance('setup');
+      }
+
+      // 将查询结果转成 table渲染需要的配置
+      function handleTableConfig(result) {
+        // js增强初始化
+        let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+        onlineTableContext['EnhanceJS'] = EnhanceJS;
+        // 自定义按钮设置
+        initButtonList(result.cgButtonList);
+        // 页面按钮显示隐藏状态设置
+        initButtonSwitch(result.hideColumns);
+        // 列配置
+        handleColumnResult(result);
+        // 表配置
+        handleSpecialConfig(result);
+      }
+
+      /**
+       * 查询控件 事件-执行查询
+       * @param data
+       */
+      function queryWithCondition(data) {
+        onlineTableContext['queryParam'] = data;
+        reload({mode:'search'});
+      }
+
+      /**
+       * 查询组件加载完成事件，获取高级查询需要的字段信息
+       */
+      async function onQueryFormLoaded(json) {
+        console.log('onQueryFormLoaded', json)
+        await getRefPromise(superQueryButtonRef)
+        superQueryButtonRef.value.init(json);
+      }
+
+      /**
+       * list页面打开 其他表单弹窗
+       * @param params
+       */
+      function openOnlinePopModal(params){
+        console.log('openOnlinePopModal', params)
+        popTableId.value = params.id;
+        let data = {
+          title: params.describe
+        }
+        if(params.record && params.record.id){
+          data['record'] = params.record
+          data['isUpdate'] = true;
+        }
+        openPopModal(true, data);
+      }
+      //绑定弹窗事件
+      useOnlineListPopEvent(openOnlinePopModal);
+      
+      const that = {
+        ID,
+        // 查询区域
+        onlineQueryFormOuter,
+        queryWithCondition,
+        onQueryFormLoaded,
+        reload,
+
+        //高级查询
+        superQueryButtonRef,
+        superQueryStatus,
+        handleSuperQuery,
+
+        // table区域
+        loading,
+        columns,
+        dataSource,
+        pagination,
+        actionColumn,
+        rowSelection,
+        selectedKeys,
+        tableScroll,
+        enableScrollBar,
+        handleChangeInTable,
+
+        //按钮
+        buttonSwitch,
+        handleAdd,
+        handleEdit,
+        onImportExcel,
+        onExportExcel,
+        exportLoading,
+        onExportExcelOverride,
+        cgBIBtnMap,
+        getQueryButtonCfg,
+        getResetButtonCfg,
+        getFormConfirmButtonCfg,
+        cgTopButtonList,
+        cgLinkButtonList,
+        cgButtonJsHandler,
+        cgButtonActionHandler,
+        cgButtonLinkHandler,
+        handleBatchDelete,
+        handleAddTestData,
+        testDataLoading,
+        testDataBtnShow,
+        currentTableName,
+        loadData,
+        tableType,
+        isConfigCurRoute,
+
+        // table-slot
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+
+        // 操作列
+        getActions,
+        getDropDownActions,
+
+        // 弹窗
+        registerModal,
+        registerCustomModal,
+        registerImportModal,
+        registerDetailModal,
+        importUrl,
+        handleFormConfig,
+        onlinePopModalRef,
+
+        //其他
+        tableReloading,
+        handleSubmitFlow,
+        hrefComponent,
+        viewOnlineCellImage,
+        hrefMainTableId,
+        onlineExtConfigJson,
+        registerOnlineHrefModal,
+        registerPopModal,
+        popTableId,
+        registerBpmModal,
+        handleClickFieldHref,
+        pageLoading,
+      };
+      return that;
+    },
+
+    // 1引入了loadsh   console.log(that.simpleDateFormat(new Date().getTime(),'yyyy-MM-dd'));
+    // 2. value的问题
+    // 3. 变量位置改变后需要 重写api
+    // 1添加按钮的时候 预留出样式对象 然后js增强中设置样式对象
+    // 2直接设置css字符串 然后通过js document 往head里面增加css片段 全局生效
+  };
+</script>
+
+<style lang="less">
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineAutoModal.vue b/src/views/super/online/cgform/auto/default/OnlineAutoModal.vue
new file mode 100644
index 0000000..6fb4b50
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineAutoModal.vue
@@ -0,0 +1,198 @@
+<template>
+  <BasicModal :title="title" @cancel="onCloseEvent" :enableComment="enableComment" :width="modalWidth" v-bind="$attrs" :maxHeight="600" @register="registerModal" wrapClassName="jeecg-online-modal" @ok="handleSubmit" @commentOpen="handleCommentOpen">
+    <template #footer>
+      <a-row>
+        <a-col :span='24 - commentSpan'>
+          <a-button
+            v-for="btn in cgButtonList"
+            :key="btn.id"
+            type="primary"
+            @click="handleCgButtonClick(btn.optType, btn.buttonCode)"
+            :preIcon="btn.buttonIcon ? 'ant-design:' + btn.buttonIcon : ''"
+          >
+            {{ btn.buttonName }}
+          </a-button>
+
+          <a-button
+              v-if="!disableSubmit && confirmBtnCfg.enabled"
+              key="submit"
+              type="primary"
+              :preIcon="confirmBtnCfg.buttonIcon"
+              :loading="submitLoading"
+              @click="handleSubmit"
+          >
+            <span>{{ confirmBtnCfg.buttonName }}</span>
+          </a-button>
+          <a-button v-if="cancelBtnCfg.enabled" key="back" @click="handleCancel">
+            <span>{{ cancelBtnCfg.buttonName }}</span>
+          </a-button>
+        </a-col>
+      </a-row>
+    </template>
+    <online-form
+      v-bind="$attrs"
+      ref="onlineFormCompRef"
+      :id="id"
+      :disabled="disableSubmit"
+      :form-template="formTemplate"
+      :isTree="isTreeForm"
+      :pidField="pidFieldName"
+      :themeTemplate="themeTemplate"
+      :cgBIBtnMap="cgBIBtnMap"
+      :buttonSwitch="buttonSwitch"
+      @rendered="renderSuccess"
+      @success="handleSuccess"
+    >
+    </online-form>
+
+    <template #comment>
+      <comment-panel ref="commentPanelRef" :tableId="tableId" :tableName="tableName" :dataId="formDataId"></comment-panel>
+    </template>
+ 
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import OnlineForm from '../comp/OnlineForm.vue';
+  import { useAutoModal } from '../../hooks/auto/useAutoModal';
+  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue'
+  import { ERPSUBTABLE } from '../../util/constant';
+  export default defineComponent({
+    name: 'OnlineAutoModal',
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      // 为了区分来源，编码时主要是erp子表有特殊处理
+      source: {
+        type: String,
+        default: '',
+      },
+      buttonSwitch: Object,
+      cgBIBtnMap: Object,
+      confirmBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '确定',
+            buttonIcon: '',
+          }
+        }
+      },
+      cancelBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '关闭',
+            buttonIcon: '',
+          }
+        }
+      },
+    },
+    components: {
+      BasicModal,
+      OnlineForm,
+      CommentPanel
+    },
+    emits: ['success', 'register', 'formConfig'],
+    setup(props, { emit }) {
+      console.log('进入表单弹框》》》》modal');
+      const commentPanelRef = ref();
+      const commentSpan = ref(0);
+      function reloadComment(){
+        if(commentPanelRef.value)
+        commentPanelRef.value.reload();
+      }
+      const {
+        title,
+        modalWidth,
+        registerModal,
+        closeModal,
+        cgButtonList,
+        handleCgButtonClick,
+        disableSubmit,
+        handleSubmit,
+        submitLoading,
+        handleCancel,
+        handleFormConfig,
+        onlineFormCompRef,
+        formTemplate,
+        isTreeForm,
+        pidFieldName,
+        renderSuccess,
+        formRendered,
+        tableName,
+        tableId,
+        formDataId,
+        enableComment,
+        onCloseEvent,
+        themeTemplate,
+      } = useAutoModal(false, { emit }, reloadComment);
+
+      function handleSuccess(formData) {
+        emit('success', formData);
+        closeModal();
+        // 提交完成 触发关闭事件
+        onCloseEvent();
+      }
+
+      // 监听id变化 表单重新渲染
+      watch(() => props.id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!props.id) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        // update-begin--author:liaozhiyang---date:20240426---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权查看从表新增和详情的数据
+        const params: any = {};
+        if (props.source === ERPSUBTABLE) {
+          params.tabletype = 3;
+        }
+        await handleFormConfig(props.id, params);
+        // update-end--author:liaozhiyang---date:20240426---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权查看从表新增和详情的数据
+      }
+      // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-485】开启评论之后弹窗按钮居右隔一个评论的距离
+      const handleCommentOpen =  (visible, span) => { 
+        console.log('评论是否展开：', visible);
+        commentSpan.value = span;
+      }
+      // update-end--author:liaozhiyang---date:20240528---for：【TV360X-485】开启评论之后弹窗按钮居右隔一个评论的距离
+      const that = {
+        title,
+        onlineFormCompRef,
+        renderSuccess,
+        registerModal,
+        handleSubmit,
+        handleSuccess,
+        handleCancel,
+        modalWidth,
+        formTemplate,
+        disableSubmit,
+        cgButtonList,
+        handleCgButtonClick,
+        isTreeForm,
+        pidFieldName,
+        submitLoading,
+        tableName,
+        tableId,
+        formDataId,
+        enableComment,
+        commentPanelRef,
+        onCloseEvent,
+        themeTemplate,
+        handleCommentOpen,
+        commentSpan,
+      };
+
+      return that;
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineCustomModal.vue b/src/views/super/online/cgform/auto/default/OnlineCustomModal.vue
new file mode 100644
index 0000000..6ef4341
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineCustomModal.vue
@@ -0,0 +1,286 @@
+<template>
+  <BasicModal
+    v-bind="modalProps"
+    :style="modalStyle"
+    @register="registerModal"
+    wrapClassName="jeecg-online-modal2"
+    @ok="handleSubmit"
+  >
+    <template #footer>
+      <a-button key="submit" type="primary" @click="handleSubmit"> {{modalProps.okText ?? '确定'}}</a-button>
+      <a-button key="back" @click="handleCancel">{{ modalProps.cancelText ?? '关闭' }}</a-button>
+    </template>
+
+    <a-spin :spinning="confirmLoading">
+      <!-- online表单 -->
+      <online-form
+        v-if="isOnlineForm"
+        ref="onlineFormCompRef"
+        :id="id"
+        :form-template="formTemplate"
+        @rendered="renderSuccess"
+        @success="handleSuccess"
+        modalClass="jeecg-online-modal2"
+      >
+      </online-form>
+
+      <!-- 自定义表单 -->
+      <component
+        v-else
+        ref="customFormRef"
+        :url="customFormComponent.url"
+        :is="customFormComponent.is"
+        :row="customFormComponent.row"
+        @close="handleSuccess"
+      >
+      </component>
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, watch, nextTick, defineAsyncComponent, markRaw } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import { defHttp } from '/@/utils/http/axios';
+  import OnlineForm from '../comp/OnlineForm.vue';
+  import { importViewsFile } from '/@/utils';
+  import { omit } from 'lodash-es';
+
+  /**
+   * open函数的参数
+   */
+  interface ModalConfig {
+    row: any;
+    hide?: string[];
+    show?: string[];
+    requestUrl?: string;
+    tableType?: string;
+    foreignKeys?: string;
+    formComponent?: string;
+    code?: string;
+  }
+
+  /**
+   * 默认配置
+   */
+  const DEF_CONFIG: ModalConfig = {
+    code: '',
+    row: {},
+    hide: [],
+    show: [],
+    requestUrl: '',
+    tableType: '',
+    foreignKeys: '',
+    formComponent: '',
+  };
+  /**
+   * 自定义弹窗
+   */
+  export default defineComponent({
+    name: 'OnlineCustomModal',
+    components: {
+      OnlineForm,
+      BasicModal,
+    },
+    setup(_props, { emit, attrs }) {
+      const onlineFormCompRef = ref();
+      const modalProps = ref({});
+      // online表单的配置id
+      const id = ref('');
+
+      let onlineHideFields = [];
+      let onlineShowFields = [];
+      let onlineFormEditUrl = '';
+      // 当前编辑的数据
+      let currentRowData = {};
+      const url = {
+        loadFormItems: '/online/cgform/api/getFormItem/',
+        optPre: '/online/cgform/api/form/',
+      };
+      const modalStyle = { position: 'relative' };
+
+      const confirmLoading = ref(false);
+      // 表单是否渲染完成
+      const formRendered = ref(false);
+      // 渲染完成改变状态
+      function renderSuccess() {
+        formRendered.value = true;
+      }
+
+      //是否是online表单
+      const isOnlineForm = ref(true);
+
+      // 弹框显示 触发onlineFormCompRef---show
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (params) => {
+        setModalProps({ confirmLoading: false });
+        resetParams(params);
+        await nextTick(async () => {
+          if (!params.formComponent) {
+            //没有申明组件 走online表单
+            await showOnlineForm();
+          } else {
+            showCustomForm(params.formComponent);
+          }
+        });
+      });
+
+      /**
+       * 打开弹窗
+       * @param params
+       */
+      function resetParams(params) {
+        // code row formComponent hide show
+        let options = Object.assign({}, DEF_CONFIG, params);
+        id.value = options.code;
+        // update-begin--author:liaozhiyang---date:20250818---for：【issues/8672】js增强弹窗支持basicModal的props
+        modalProps.value = {
+          title: '自定义弹框',
+          width: 600,
+          ...attrs,
+          ...omit(params, ['row', 'formComponent', 'hide', 'show', 'requestUrl']),
+        };
+        // update-end--author:liaozhiyang---date:20250818---for：【issues/8672】js增强弹窗支持basicModal的props
+        onlineHideFields = options.hide || [];
+        onlineShowFields = options.show || [];
+        onlineFormEditUrl = getOnlineFormEditUrl(options.requestUrl);
+        currentRowData = options.row;
+      }
+
+      /**
+       * 获取表单数据编辑地址-对两个表单都有效
+       */
+      function getOnlineFormEditUrl(requestUrl) {
+        if (requestUrl) {
+          return requestUrl;
+        } else {
+          return url.optPre + id.value;
+        }
+      }
+
+      const submitLoading = ref(false);
+      function handleSubmit() {
+        submitLoading.value = true;
+        if (isOnlineForm.value === true) {
+          onlineFormCompRef.value.handleSubmit();
+        } else {
+          customFormRef.value.handleSubmit();
+        }
+        setTimeout(() => {
+          submitLoading.value = true;
+        }, 3500);
+      }
+
+      function handleCancel() {
+        closeModal();
+      }
+
+      function handleSuccess(formData) {
+        emit('success', formData);
+        closeModal();
+      }
+
+      /*-------------------------------------online表单-----------------------------------------------*/
+
+      /**
+       * 显示online表单
+       */
+      async function showOnlineForm() {
+        isOnlineForm.value = true;
+        await getRefPromise(formRendered);
+        //处理字段显示隐藏
+        onlineFormCompRef.value.handleCustomFormSh(onlineShowFields, onlineHideFields);
+        //回显表单数据
+        onlineFormCompRef.value.handleCustomFormEdit(currentRowData, onlineFormEditUrl);
+      }
+
+      // 模板风格-默认1列
+      const formTemplate = ref(1);
+      // 监听id变化 表单重新渲染
+      watch(id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!id.value) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        let result: any = await loadFormItems();
+        // modal页面只处理按钮、JS增强、弹框宽度
+        let dataFormTemplate = result.head.formTemplate;
+        formTemplate.value = dataFormTemplate ? Number(dataFormTemplate) : 1;
+        nextTick(async () => {
+          let myForm = (await getRefPromise(onlineFormCompRef)) as any;
+          myForm.createRootProperties(result);
+        });
+      }
+
+      function loadFormItems() {
+        let url = `/online/cgform/api/getFormItem/${id.value}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              console.log('表单结果》》modal:', res);
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+      /*-------------------------------------online表单-----------------------------------------------*/
+
+      /*-------------------------------------自定义表单-----------------------------------------------*/
+      const customFormRef = ref();
+
+      const customFormComponent = reactive({
+        url: '',
+        is: '',
+        row: {},
+      });
+
+      /**
+       * 显示自定义表单
+       */
+      function showCustomForm(formComponent) {
+        isOnlineForm.value = false;
+        customFormComponent.url = onlineFormEditUrl;
+        customFormComponent.row = currentRowData;
+        customFormComponent.is = markRaw(defineAsyncComponent(() => importViewsFile(formComponent)));
+      }
+      /*-------------------------------------自定义表单-----------------------------------------------*/
+
+      return {
+        //modal
+        registerModal,
+        modalProps,
+        modalStyle,
+        handleSubmit,
+        handleCancel,
+
+        // online表单
+        id,
+        onlineFormCompRef,
+        formTemplate,
+        renderSuccess,
+
+        //自定义表单
+        customFormRef,
+        customFormComponent,
+
+        //通用
+        open,
+        isOnlineForm,
+        confirmLoading,
+        submitLoading,
+        handleSuccess,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineDetailModal.vue b/src/views/super/online/cgform/auto/default/OnlineDetailModal.vue
new file mode 100644
index 0000000..382f25f
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineDetailModal.vue
@@ -0,0 +1,135 @@
+<template>
+  <BasicModal :title="title" :width="modalWidth" :maxHeight="600" :enableComment="enableComment" :defaultFullscreen="false" v-bind="$attrs" @register="registerModal" wrapClassName="jeecg-online-detail-modal">
+    <template #footer>
+      <a-button v-if="cancelBtnCfg.enabled" key="back" @click="handleCancel">
+        <span>{{ cancelBtnCfg.buttonName }}</span>
+      </a-button>
+      <slot name="footerBtn"></slot>
+    </template>
+    <online-form-detail ref="onlineFormCompRef" :id="id" :form-template="formTemplate" :show-sub="showSub" :themeTemplate="themeTemplate" @rendered="renderSuccess" />
+
+    <template #comment>
+      <comment-panel ref="commentPanelRef" :tableName="tableName" :dataId="formDataId"></comment-panel>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import OnlineFormDetail from '../comp/OnlineFormDetail.vue';
+  import { useAutoModal } from '../../hooks/auto/useAutoModal';
+  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue'
+  import { ERPSUBTABLE, INNER_TABLE } from '../../util/constant';
+
+  export default defineComponent({
+    name: 'OnlineDetailModal',
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      // 为了区分来源，编码时主要是erp子表有特殊处理
+      source: {
+        type: String,
+        default: '',
+      },
+      cancelBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '关闭',
+            buttonIcon: '',
+          }
+        }
+      },
+    },
+    components: {
+      BasicModal,
+      OnlineFormDetail,
+      CommentPanel
+    },
+    emits: ['success', 'register','formConfig'],
+    setup(props, {emit}) {
+      console.log('进入表单弹框》》》》modal');
+
+      const commentPanelRef = ref();
+      function reloadComment(){
+        if(commentPanelRef.value)
+          commentPanelRef.value.reload();
+      }
+      
+      const {
+        title,
+        modalWidth,
+        registerModal,
+        cgButtonList,
+        handleCgButtonClick,
+        disableSubmit,
+        handleSubmit,
+        submitLoading,
+        handleCancel,
+        handleFormConfig,
+        onlineFormCompRef,
+        formTemplate,
+        isTreeForm,
+        pidFieldName,
+        renderSuccess,
+        formRendered,
+        showSub,
+        tableName,
+        formDataId,
+        enableComment,
+        themeTemplate,
+      } = useAutoModal(false, { emit }, reloadComment);
+
+      // 监听id变化 表单重新渲染
+      watch(() => props.id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!props.id) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        // update-begin--author:liaozhiyang---date:20240426---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权查看从表新增和详情的数据
+        let params: any = {};
+        //update-begin---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+        if (props.source === ERPSUBTABLE || props.source === INNER_TABLE) {
+        //update-end---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+          params.tabletype = 3;
+        }
+        await handleFormConfig(props.id, params);
+        // update-end--author:liaozhiyang---date:20240426---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权查看从表新增和详情的数据
+      }
+
+      const that = {
+        title,
+        onlineFormCompRef,
+        renderSuccess,
+        registerModal,
+        handleSubmit,
+        handleCancel,
+        modalWidth,
+        formTemplate,
+        disableSubmit,
+        cgButtonList,
+        handleCgButtonClick,
+        isTreeForm,
+        pidFieldName,
+        submitLoading,
+        showSub,
+        tableName,
+        formDataId,
+        enableComment,
+        commentPanelRef,
+        themeTemplate
+      };
+
+      return that;
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineFormUrlAdd.vue b/src/views/super/online/cgform/auto/default/OnlineFormUrlAdd.vue
new file mode 100644
index 0000000..82107c7
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineFormUrlAdd.vue
@@ -0,0 +1,153 @@
+<template>
+  <div :class="['p-2']" class="online-wrap">
+    <Card :bordered="false">
+      <spin :spinning="loading">
+        <div :class="['wrap', `online-add-${ID}`]" ref="wrapRef">
+          <OnlineForm v-if="false"></OnlineForm>
+          <!-- 新增(编辑)弹框 -->
+          <OnlineAutoModal
+            v-if="token"
+            :id="ID"
+            :maskClosable="false"
+            @register="registerModal"
+            :getContainer="getContainer"
+            @formConfig="handleFormConfig"
+            @success="success"
+            :height="contentHeight"
+          />
+        </div>
+      </spin>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, unref } from 'vue';
+  import { Card, Spin } from 'ant-design-vue';
+  // OnlineForm 这个必须引用，setup模式必须在template里面使用。否则url进入会报错
+  import OnlineForm from '../comp/OnlineForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from './OnlineAutoModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { useRouter } from 'vue-router';
+  import { useFormUrl } from '../../hooks/auto/useFormUrl';
+  const { ID, onlineTableContext, onlineExtConfigJson, handleFormConfig } = useOnlineTableContext();
+  const { createMessage: $message } = useMessage();
+  const wrapRef = ref(null);
+  const contentHeight = ref(400);
+  const loading = ref(true);
+  const router = useRouter();
+
+  const { token } = useFormUrl();
+  if (!unref(token)) {
+    throw new Error('token不存在~');
+  }
+  if (!ID.value) {
+    $message.warning('地址错误, 配置ID不存在!');
+    throw new Error('地址错误, 配置ID不存在!');
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  watch(
+    () => wrapRef.value,
+    (elem: HTMLElement) => {
+      // 获取页面实际高度
+      contentHeight.value = elem.offsetHeight - 60;
+    }
+  );
+  // 处理列表button
+  const { registerModal, handleAdd } = useListButton(onlineTableContext, onlineExtConfigJson);
+  const getContainer = (node) => {
+    return document.querySelector(`.online-add-${ID.value}`);
+  };
+  const success = () => {
+    setTimeout(() => {
+      handleAdd(false);
+      setTimeout(() => {
+        router.push({ path: '/online/formUrlSuccess' });
+      }, 1e3);
+    }, 0);
+  };
+  setTimeout(() => {
+    handleAdd(false);
+    loading.value = false;
+  }, 1e3);
+</script>
+
+<style lang="less" scoped>
+  .online-wrap {
+    height: 100%;
+    // position: relative;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    padding: 0;
+    :deep(.ant-card) {
+      padding: 0;
+      height: 100%;
+      border: none;
+      .ant-card-body {
+        height: 100%;
+        padding: 40px 16px;
+      }
+      .ant-modal-footer {
+        & > :last-child {
+          display: none;
+        }
+      }
+    }
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 100%;
+      .ant-spin-container {
+        height: 100%;
+      }
+    }
+  }
+  .wrap {
+    height: 100%;
+    > div {
+      height: 100%;
+    }
+    :deep(.ant-modal-root) {
+      height: 100%;
+      .ant-modal-mask {
+        height: 0;
+      }
+      .ant-modal-wrap {
+        position: static;
+        height: 100%;
+      }
+      .ant-modal {
+        position: static;
+        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1) !important;
+        opacity: 1;
+        animation-name: none !important;
+      }
+      .ant-modal-content {
+        position: static;
+        box-shadow: none;
+        .scroll-container {
+          padding: 0;
+          .scrollbar__view > div {
+            overflow: auto;
+          }
+        }
+      }
+      .ant-modal-header {
+        display: none;
+      }
+      .ant-modal-close {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineFormUrlDetail.vue b/src/views/super/online/cgform/auto/default/OnlineFormUrlDetail.vue
new file mode 100644
index 0000000..d3f37da
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineFormUrlDetail.vue
@@ -0,0 +1,139 @@
+<template>
+  <div :class="['p-2']" class="online-wrap">
+    <Card :bordered="false">
+      <spin :spinning="loading">
+        <div :class="['wrap', `online-detail-${ID}`]" ref="wrapRef">
+          <OnlineForm v-if="false"></OnlineForm>
+          <!-- 详情弹框 -->
+          <OnlineDetailModal
+            v-if="token"
+            :id="ID"
+            :maskClosable="false"
+            @register="registerDetailModal"
+            @success="success"
+            :getContainer="getContainer"
+            :height="contentHeight"
+          />
+        </div>
+      </spin>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, unref } from 'vue';
+  import { Card, Spin } from 'ant-design-vue';
+  // OnlineForm 这个必须引用，setup模式必须在template里面使用。否则url进入会报错
+  import OnlineForm from '../comp/OnlineForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
+  import OnlineDetailModal from './OnlineDetailModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { useFormUrl } from '../../hooks/auto/useFormUrl';
+  const route = useRoute();
+  const { ID, onlineTableContext, onlineExtConfigJson } = useOnlineTableContext();
+  const { createMessage: $message } = useMessage();
+  const wrapRef = ref(null);
+  const contentHeight = ref(400);
+  const loading = ref(true);
+
+  const { token } = useFormUrl();
+  if (!unref(token)) {
+    throw new Error('token不存在~');
+  }
+  if (!ID.value || !route.params.dataId) {
+    $message.warning('地址错误, 配置ID不存在!');
+    throw new Error('地址错误, 配置ID不存在!');
+  }
+  watch(
+    () => wrapRef.value,
+    (elem: HTMLElement) => {
+      // 获取页面实际高度
+      contentHeight.value = elem.offsetHeight;
+    }
+  );
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const { registerDetailModal, openDetailModal } = useListButton(onlineTableContext, onlineExtConfigJson);
+  const getContainer = (node) => {
+    return document.querySelector(`.online-detail-${ID.value}`);
+  };
+  setTimeout(() => {
+    openDetailModal(true, {
+      isUpdate: true,
+      disableSubmit: true,
+      record: {
+        id: route.params.dataId,
+      },
+    });
+    loading.value = false;
+  }, 1e3);
+</script>
+
+<style lang="less" scoped>
+  .online-wrap {
+    height: 100%;
+    position: relative;
+    :deep(.ant-card) {
+      padding: 0;
+      height: 100%;
+      border: none;
+      .ant-card-body {
+        height: 100%;
+        padding: 5px;
+      }
+    }
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 100%;
+      .ant-spin-container {
+        height: 100%;
+      }
+    }
+  }
+  .wrap {
+    height: 100%;
+    > div {
+      height: 100%;
+    }
+    :deep(.ant-modal-root) {
+      height: 100%;
+      .ant-modal-mask {
+        height: 0;
+      }
+      .ant-modal-wrap {
+        position: static;
+        height: 100%;
+      }
+      .ant-modal {
+        position: static;
+        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1) !important;
+        opacity: 1;
+        animation-name: none !important;
+      }
+      .ant-modal-content {
+        position: static;
+        box-shadow: none;
+        .scroll-container {
+          padding: 0;
+          .scrollbar__view > div {
+            overflow: auto;
+          }
+        }
+      }
+      .ant-modal-header,
+      .ant-modal-footer {
+        display: none;
+      }
+      .ant-modal-close {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineFormUrlEdit.vue b/src/views/super/online/cgform/auto/default/OnlineFormUrlEdit.vue
new file mode 100644
index 0000000..4f72444
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineFormUrlEdit.vue
@@ -0,0 +1,152 @@
+<template>
+  <div :class="['p-2']" class="online-wrap">
+    <Card :bordered="false">
+      <spin :spinning="loading">
+        <div :class="['wrap', `online-edit-${ID}`]" ref="wrapRef">
+          <OnlineForm v-if="false"></OnlineForm>
+          <!-- 新增(编辑)弹框 -->
+          <OnlineAutoModal
+            v-if="token"
+            :id="ID"
+            :maskClosable="false"
+            @register="registerModal"
+            :getContainer="getContainer"
+            @formConfig="handleFormConfig"
+            @success="success"
+            :height="contentHeight"
+          />
+        </div>
+      </spin>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, unref, watch } from 'vue';
+  import { Card, Spin } from 'ant-design-vue';
+  // OnlineForm 这个必须引用，setup模式必须在template里面使用。否则url进入会报错
+  import OnlineForm from '../comp/OnlineForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute, useRouter } from 'vue-router';
+  import OnlineAutoModal from './OnlineAutoModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { useFormUrl } from '../../hooks/auto/useFormUrl';
+  const { ID, onlineTableContext, onlineExtConfigJson, handleFormConfig } = useOnlineTableContext();
+  const { createMessage: $message } = useMessage();
+  const route = useRoute();
+  const wrapRef = ref(null);
+  const contentHeight = ref(400);
+  const loading = ref(true);
+  const router = useRouter();
+
+  const { token } = useFormUrl();
+  if (!unref(token)) {
+    throw new Error('token不存在~');
+  }
+  if (!ID.value || !route.params.dataId) {
+    $message.warning('地址错误, 配置ID不存在!');
+    throw new Error('地址错误, 配置ID不存在!');
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  watch(
+    () => wrapRef.value,
+    (elem: HTMLElement) => {
+      // 获取页面实际高度
+      contentHeight.value = elem.offsetHeight - 60;
+    }
+  );
+  // 处理列表button
+  const { registerModal, handleEdit } = useListButton(onlineTableContext, onlineExtConfigJson);
+  const getContainer = (node) => {
+    return document.querySelector(`.online-edit-${ID.value}`);
+  };
+  const success = () => {
+    setTimeout(() => {
+      handleEdit({ id: route.params.dataId });
+      router.push({ path: '/online/formUrlSuccess' });
+    }, 0);
+  };
+  setTimeout(() => {
+    token && handleEdit({ id: route.params.dataId });
+    loading.value = false;
+  }, 1e3);
+</script>
+
+<style lang="less" scoped>
+  .online-wrap {
+    height: 100%;
+    // position: relative;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    padding: 0;
+    :deep(.ant-card) {
+      padding: 0;
+      height: 100%;
+      border: none;
+      .ant-card-body {
+        height: 100%;
+        padding: 40px 16px;
+      }
+      .ant-modal-footer {
+        & > :last-child {
+          display: none;
+        }
+      }
+    }
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 100%;
+      .ant-spin-container {
+        height: 100%;
+      }
+    }
+  }
+  .wrap {
+    height: 100%;
+    > div {
+      height: 100%;
+    }
+    :deep(.ant-modal-root) {
+      height: 100%;
+      .ant-modal-mask {
+        height: 0;
+      }
+      .ant-modal-wrap {
+        position: static;
+        height: 100%;
+      }
+      .ant-modal {
+        position: static;
+        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1) !important;
+        opacity: 1;
+        animation-name: none !important;
+      }
+      .ant-modal-content {
+        position: static;
+        box-shadow: none;
+        .scroll-container {
+          padding: 0;
+          .scrollbar__view > div {
+            overflow: auto;
+          }
+        }
+      }
+      .ant-modal-header {
+        display: none;
+      }
+      .ant-modal-close {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/default/OnlineFormUrlSuccess.vue b/src/views/super/online/cgform/auto/default/OnlineFormUrlSuccess.vue
new file mode 100644
index 0000000..05765ab
--- /dev/null
+++ b/src/views/super/online/cgform/auto/default/OnlineFormUrlSuccess.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :class="['p-2']" class="online-wrap">
+    <div class="contentArea">
+      <svg t="1709697840296" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1485">
+        <path
+          d="M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0"
+          fill="currentColor"
+          p-id="1486"
+        ></path>
+      </svg>
+      <h1>提交成功</h1>
+    </div>
+    <div class="btnArea">
+      <a-button @click="getBack()">返回</a-button>
+      <a-button @click="getBack()">关闭</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  const getBack = () => {
+    router.go(-1);
+  };
+</script>
+
+<style lang="less" scoped>
+  .online-wrap {
+    height: 100%;
+    // position: relative;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .contentArea {
+      text-align: center;
+      padding-top: 10%;
+      margin-bottom: 24px;
+      svg {
+        width: 80px;
+        color: #40c409;
+        margin-bottom: 24px;
+      }
+      h1 {
+        font-size: 24px;
+        line-height: 1;
+      }
+    }
+    .btnArea {
+      width: 150px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/erp/OnlCgformErpList.vue b/src/views/super/online/cgform/auto/erp/OnlCgformErpList.vue
new file mode 100644
index 0000000..1333133
--- /dev/null
+++ b/src/views/super/online/cgform/auto/erp/OnlCgformErpList.vue
@@ -0,0 +1,537 @@
+<template>
+  <div ref="cgformErpListRef" class="p-2 cgformErpList">
+    <div class="content">
+
+      <!-- 加载中骨架屏 -->
+      <a-skeleton v-if="tableReloading" active />
+
+      <!-- 查询条件 -->
+      <online-query-form
+          v-show="!tableReloading"
+          ref="onlineQueryFormOuter"
+          :id="ID"
+          :queryBtnCfg="getQueryButtonCfg"
+          :resetBtnCfg="getResetButtonCfg"
+          @search="queryWithCondition"
+          @loaded="onQueryFormLoaded"
+      />
+
+      <!-- 列表 -->
+      <BasicTable
+        v-if="!tableReloading"
+        ref="onlineTable"
+        rowKey="jeecg_row_key"
+        :canResize="true"
+        :bordered="true"
+        :showIndexColumn="false"
+        :loading="loading"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :rowSelection="rowSelection"
+        :actionColumn="actionColumn"
+        :showTableSetting="true"
+        :clickToRowSelect="true"
+        :scroll="scroll"
+        @table-redo="reload"
+        :tableSetting="tableSetting"
+        :class="{ 'j-table-force-nowrap': enableScrollBar }"
+        @change="handleChangeInTable"
+      >
+        <template #tableTitle>
+          <a-button
+              v-if="buttonSwitch.add && cgBIBtnMap['add'].enabled"
+              type="primary"
+              :preIcon="cgBIBtnMap['add'].buttonIcon"
+              @click="handleAdd"
+          >
+            <span>{{ cgBIBtnMap['add'].buttonName }}</span>
+          </a-button>
+          <a-button
+              v-if="buttonSwitch.import && cgBIBtnMap['import'].enabled"
+              type="primary"
+              :preIcon="cgBIBtnMap['import'].buttonIcon"
+              @click="onImportExcel"
+          >
+            <span>{{ cgBIBtnMap['import'].buttonName }}</span>
+          </a-button>
+          <a-button
+              v-if="buttonSwitch.export && cgBIBtnMap['export'].enabled"
+              type="primary"
+              :preIcon="cgBIBtnMap['export'].buttonIcon"
+              :loading="exportLoading"
+              @click="onExportExcelOverride"
+          >
+            <span>{{ cgBIBtnMap['export'].buttonName }}</span>
+          </a-button>
+
+          <!-- 自定义按钮 -->
+          <template v-if="cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+            <a-button
+              v-if="item.optType == 'js'"
+              :key="'cgbtn' + index"
+              @click="cgButtonJsHandler(item.buttonCode)"
+              type="primary"
+              :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+            >
+              {{ item.buttonName }}
+            </a-button>
+            <a-button
+              v-else-if="item.optType == 'action'"
+              :key="'cgbtn' + index"
+              @click="cgButtonActionHandler(item.buttonCode)"
+              type="primary"
+              :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+            >
+              {{ item.buttonName }}
+            </a-button>
+          </template>
+
+          <a-button
+              v-show="selectedKeys.length > 0"
+              v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+              :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+              @click="handleBatchDelete"
+          >
+            <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+          </a-button>
+
+          <online-super-query
+            v-if="buttonSwitch.super_query && cgBIBtnMap['super_query'].enabled"
+            ref="superQueryButtonRef"
+            online
+            :status="superQueryStatus"
+            :queryBtnCfg="cgBIBtnMap['super_query']"
+            @search="handleSuperSearch"
+          />
+        </template>
+
+        <template #fileSlot="{ text, record, column }">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+          <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+            下载
+          </a-button>
+        </template>
+
+        <template #imgSlot="{ text }">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+          <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+        </template>
+
+        <template #htmlSlot="{ text, column, record }">
+          <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+          <template v-if="column.fieldHref">
+            <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+          </template>
+          <div v-else v-html="text"></div>
+          <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+        </template>
+
+        <template #pcaSlot="{ text, column }">
+          <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+        </template>
+
+        <template #dateSlot="{ text, column }">
+          <span>{{ getFormatDate(text, column) }}</span>
+        </template>
+
+        <template #action="{ record }">
+          <TableAction :actions="getActions(record)" :dropDownActions="getDropDownActions(record)" />
+        </template>
+      </BasicTable>
+      <!--子表表格tab-->
+      <a-tabs v-if="subTableData?.length" animated v-model:activeKey="tabActiveKey" style="margin: 10px">
+        <a-tab-pane v-for="(item, index) in subTableData" :tab="item.description" :key="index" forceRender>
+          <OnlCgformErpSubTable :data="item" :mainTableSelectedRowRcord="selectedRowRcord" @getSource="getSource" />
+        </a-tab-pane>
+      </a-tabs>
+
+      <!-- 表单新增、修改弹框 -->
+      <OnlineAutoModal
+          @register="registerModal"
+          :id="ID"
+          :subTableSource="erpAllSubTableSource"
+          :cgBIBtnMap="cgBIBtnMap"
+          :buttonSwitch="buttonSwitch"
+          :confirmBtnCfg="getFormConfirmButtonCfg"
+          @success="reload"
+          @formConfig="handleFormConfig"
+      />
+
+      <!-- 详情弹框 -->
+      <online-detail-modal :id="ID" @register="registerDetailModal" />
+
+      <!-- 导入 -->
+      <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+      <!-- 跳转Href的动态组件方式 -->
+      <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+        <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+      </a-modal>
+
+      <!-- 自定义弹窗 -->
+      <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+      <!-- 弹窗给href到另外一张表单用-详情表单 -->
+      <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false" />
+
+      <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+      <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+      <!-- 流程图查看modal -->
+      <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+      <!-- 页面loading[主要为了js增强使用] -->
+      <Loading :loading="pageLoading" :absolute="true" />
+    </div>
+  </div>
+</template>
+
+<script setup name="CgformErpList">
+  import { ref, nextTick, computed, watchEffect } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from '../default/OnlineAutoModal.vue';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import OnlineDetailModal from '../default/OnlineDetailModal.vue';
+  import { watch } from 'vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import OnlineSuperQuery from '../comp/superquery/SuperQuery.vue';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import OnlCgformErpSubTable from './OnlCgformErpSubTable.vue';
+  import { ERP } from "../../util/constant";
+  import { cloneDeep } from 'lodash-es';
+  import { Loading } from '/@/components/Loading';
+  import { isObject } from '/@/utils/is';
+  
+  const subTableData = ref([]);
+  const tabActiveKey = ref(0);
+  const selectedRowRcord = ref(null);
+  const tableSetting = ref({});
+  const { createMessage: $message } = useMessage();
+  const cgformErpListRef = ref(null);
+  const onlineTable = ref(null);
+  // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+  const erpAllSubTableSource = ref({});
+  const getSource = (tableName, data) => {
+    erpAllSubTableSource.value[tableName] = data;
+  };
+  // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+  // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+  const {
+    ID,
+    onlineTableContext,
+    onlineQueryFormOuter,
+    loading,
+    reload,
+    dataSource,
+    pagination,
+    handleSpecialConfig,
+    getColumnList,
+    handleChangeInTable,
+    loadData,
+    superQueryButtonRef,
+    superQueryStatus,
+    handleSuperQuery,
+    onlineExtConfigJson,
+    handleFormConfig,
+    registerCustomModal,
+    tableReloading,
+    pageLoading,
+  } = useOnlineTableContext({ themeTemplate: ERP });
+
+  const scroll = computed(() => {
+    const reuslt = { y: 300 };
+    if (isObject(tableScroll.value)) {
+      return { ...tableScroll.value, ...reuslt };
+    }
+    return reuslt;
+  });
+
+  // 监听数据源变化
+  watch(dataSource, (value) => {
+    if (selectedKeys.value.length > 0) {
+      // 【TV360X-2701】选中的数据在当前页数据中不存在就清空选中
+      selectedKeys.value = selectedKeys.value.filter((key) => value.some((item) => item['jeecg_row_key'] === key));
+    }
+    // update-begin--author:liaozhiyang---date:20250722---for：【issues/8575】erp默认选中第一个及没选中主表时子表不查询
+    if (pagination.value.current == 1 && selectedKeys.value.length === 0) {
+      setTimeout(() => {
+        const tableTbodyElem = document.querySelector('.ant-table-wrapper .ant-table-tbody');
+        tableTbodyElem?.querySelector('.ant-table-row')?.click();
+      }, 100);
+    }
+    // update-end--author:liaozhiyang---date:20250722---for：【issues/8575】erp默认选中第一个及没选中主表时子表不查询
+  });
+
+  // 判断 若ID不存在就终止后续逻辑
+  if (!ID.value) {
+    $message.warning('地址错误, 配置ID不存在!');
+    // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+    throw new Error('地址错误, 配置ID不存在!');
+    // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const {
+    buttonSwitch,
+    cgLinkButtonList,
+    cgBIBtnMap,
+    getQueryButtonCfg,
+    getResetButtonCfg,
+    getFormConfirmButtonCfg,
+    cgTopButtonList,
+    importUrl,
+    registerModal,
+    handleAdd,
+    handleEdit,
+    handleBatchDelete,
+    registerImportModal,
+    onImportExcel,
+    onExportExcel,
+    cgButtonJsHandler,
+    cgButtonActionHandler,
+    cgButtonLinkHandler,
+    handleSubmitFlow,
+    getDropDownActions,
+    getActions,
+    initButtonList,
+    initButtonSwitch,
+    registerDetailModal,
+    registerBpmModal,
+  } = useListButton(onlineTableContext, onlineExtConfigJson, {
+    singleDelCallback: (id) => {
+      // 删除的正好是选中的数据需清除选中的key
+      if (Array.isArray(onlineTableContext['selectedRowKeys']) && onlineTableContext['selectedRowKeys'].includes(id)) {
+        onlineTableContext['clearSelectedRow']();
+      }
+    },
+    editClickCallback: (id, e) => {
+      // 当前数据被选中了就得阻止冒泡，防止反选
+      if (Array.isArray(onlineTableContext['selectedRowKeys']) && onlineTableContext['selectedRowKeys'].includes(id)) {
+        e.stopPropagation();
+      }
+    },
+  });
+  const exportLoading = ref(false);
+
+  // 重写导出方法，防止频繁点击
+  async function onExportExcelOverride() {
+    try {
+      exportLoading.value = true;
+      await onExportExcel();
+    } finally {
+      // 防止频繁点击，延迟1.5s关闭loading
+      setTimeout(() => (exportLoading.value = false), 1500);
+    }
+  }
+
+  // 处理 BasicTable 的配置
+  const {
+    columns,
+    actionColumn,
+    selectedKeys,
+    rowSelection,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+  watch(
+    selectedKeys,
+    (value) => {
+      if (selectedKeys.value?.length) {
+        selectedRowRcord.value = dataSource.value.find((item) => item['id'] === selectedKeys.value[0]);
+      }else{
+        selectedRowRcord.value = null;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  // 监听表单配置ID
+  watch(
+    ID,
+    () => {
+      console.log('watched id is change...');
+      initAutoList();
+    },
+    { immediate: true }
+  );
+
+  /**重新加载online配置*/
+  async function initAutoList() {
+    loading.value = true;
+    // 1.列配置信息
+    let columnResult = await getColumnList(ERP);
+    handleTableConfig(columnResult.main);
+    subTableData.value = columnResult.subList;
+    // 2.加载数据
+    await loadData();
+    loading.value = false;
+    // 3.执行js增强 setup
+    onlineTableContext.execButtonEnhance('setup');
+  }
+
+  // 将查询结果转成 table渲染需要的配置
+  function handleTableConfig(result) {
+    // js增强初始化
+    let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+    onlineTableContext['EnhanceJS'] = EnhanceJS;
+    // 自定义按钮设置
+    initButtonList(result.cgButtonList);
+    // 页面按钮显示隐藏状态设置
+    initButtonSwitch(result.hideColumns);
+    // 列配置
+    handleColumnResult(result, 'radio');
+    // 表配置
+    handleSpecialConfig(result);
+    // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-1004】erp风格列设置之后再次刷新展示内容不对
+    tableSetting.value = {
+      cacheKey: `online_erp_mainTable_${result.currentTableName}`,
+    };
+    // update-end--author:liaozhiyang---date:20240611---for：【TV360X-1004】erp风格列设置之后再次刷新展示内容不对
+  }
+
+  /**
+   * 查询控件 事件-执行查询
+   * @param data
+   */
+  function queryWithCondition(data) {
+    onlineTableContext['queryParam'] = data;
+    reload({mode:'search'});
+  }
+
+  /**
+   * 查询组件加载完成事件，获取高级查询需要的字段信息
+   */
+  async function onQueryFormLoaded(json = {}) {
+    console.log('onQueryFormLoaded', json);
+    await getRefPromise(superQueryButtonRef);
+    // update-begin--author:liaozhiyang---date:20230904---for：【QQYUN-6425】erp风格 高级查询 未查询出数据时 子表数据未清空
+    const cJson = cloneDeep(json),
+      { properties = {} } = cJson;
+    Object.entries(properties).forEach(([key, item]) => {
+      if (item.view == 'table') {
+        delete properties[key];
+      }
+    });
+    superQueryButtonRef.value.init(cJson);
+    // update-end--author:liaozhiyang---date:20230904---for：【QQYUN-6425】erp风格 高级查询 未查询出数据时 子表数据未清空
+  }
+
+  /**
+   * list页面打开 其他表单弹窗
+   * @param params
+   */
+  function openOnlinePopModal(params) {
+    console.log('openOnlinePopModal', params);
+    popTableId.value = params.id;
+    let data = {
+      title: params.describe,
+    };
+    if (params.record && params.record.id) {
+      data['record'] = params.record;
+      data['isUpdate'] = true;
+    }
+    openPopModal(true, data);
+  }
+  //绑定弹窗事件
+  useOnlineListPopEvent(openOnlinePopModal);
+  console.log('111111111-------onlineTableContext====111111111111111111', onlineTableContext);
+
+  const handleSuperSearch = (params, matchType) => {
+    handleSuperQuery(params, matchType);
+    selectedKeys.value = [];
+  };
+  // 解决erp主表5条时在笔记本上会出现滚动条问题
+  watchEffect(() => {
+    const size = onlineTable?.value?.getBindValuesRef().value?.size
+    setTimeout(() => {
+      const tableTbodyElem = cgformErpListRef.value.querySelector('.ant-table-wrapper .ant-table-body');
+      if (tableTbodyElem) {
+        tableTbodyElem.style.height = 'auto';
+        if (dataSource.value.length > 0) {
+          if (tableTbodyElem.offsetHeight < 300) {
+            tableTbodyElem.style.height = `${tableTbodyElem.offsetHeight + 1}px`;
+            console.log(size);
+          }
+        }
+      }
+    }, 0);
+  }, {
+    flush: 'post'
+  });
+  // 1引入了loadsh   console.log(that.simpleDateFormat(new Date().getTime(),'yyyy-MM-dd'));
+  // 2. value的问题
+  // 3. 变量位置改变后需要 重写api
+  // 1添加按钮的时候 预留出样式对象 然后js增强中设置样式对象
+  // 2直接设置css字符串 然后通过js document 往head里面增加css片段 全局生效
+</script>
+
+<style lang="less">
+ // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+  html[data-theme='light'] {
+    .cgformErpList {
+      height: 100%;
+      .content {
+        background-color: #fff;
+        height: 100%;
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8493】修正暗黑模式online表单Erp和编辑页面显示不正确
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
+<style lang="less" scoped>
+  // 为了解决笔记本上计算出浮点数导致5条也出现滚动条
+  :deep(.ant-table-body) {
+    line-height: 22px;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/erp/OnlCgformErpSubTable.vue b/src/views/super/online/cgform/auto/erp/OnlCgformErpSubTable.vue
new file mode 100644
index 0000000..fdfb5ff
--- /dev/null
+++ b/src/views/super/online/cgform/auto/erp/OnlCgformErpSubTable.vue
@@ -0,0 +1,403 @@
+<template>
+
+  <!-- 加载中骨架屏 -->
+  <a-skeleton v-if="tableReloading" active />
+
+  <!-- 查询条件 -->
+  <online-query-form
+      v-if="mainTableSelectedRowRcord"
+      v-show="!tableReloading"
+      ref="onlineQueryFormOuter"
+      :id="ID"
+      :queryBtnCfg="getQueryButtonCfg"
+      :resetBtnCfg="getResetButtonCfg"
+      @search="queryWithCondition"
+  />
+
+  <!-- 列表 -->
+  <BasicTable
+    v-if="!tableReloading"
+    ref="onlineTable"
+    rowKey="jeecg_row_key"
+    :canResize="false"
+    :bordered="true"
+    :showIndexColumn="false"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :pagination="pagination"
+    :rowSelection="rowSelection"
+    :actionColumn="actionColumn"
+    :showTableSetting="true"
+    :clickToRowSelect="false"
+    :scroll="tableScroll"
+    @table-redo="reload"
+    :class="{ 'j-table-force-nowrap': enableScrollBar }"
+    :tableSetting="tableSetting"
+    @change="handleChangeInTable"
+    :minHeight="300"
+  >
+    <template #tableTitle>
+      <a-button
+          v-if="btnShow && buttonSwitch.add && cgBIBtnMap['add'].enabled"
+          type="primary"
+          :preIcon="cgBIBtnMap['add'].buttonIcon"
+          @click="handleAddRcord"
+      >
+        <span>{{cgBIBtnMap['add'].buttonName}}</span>
+      </a-button>
+      <a-button
+          v-if="btnShow && buttonSwitch.import && cgBIBtnMap['import'].enabled"
+          type="primary"
+          :preIcon="cgBIBtnMap['import'].buttonIcon"
+          @click="onImportExcel"
+      >
+        <span>{{cgBIBtnMap['import'].buttonName}}</span>
+      </a-button>
+      <a-button
+          v-if="btnShow && buttonSwitch.export && cgBIBtnMap['export'].enabled"
+          type="primary"
+          :preIcon="cgBIBtnMap['export'].buttonIcon"
+          :loading="exportLoading"
+          @click="onExportExcelOverride"
+      >
+        <span>{{cgBIBtnMap['export'].buttonName}}</span>
+      </a-button>
+
+      <!-- 自定义按钮 -->
+      <template v-if="btnShow && cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+        <a-button
+          v-if="item.optType == 'js'"
+          :key="'cgbtn' + index"
+          @click="cgButtonJsHandler(item.buttonCode)"
+          type="primary"
+          :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+        >
+          {{ item.buttonName }}
+        </a-button>
+        <a-button
+          v-else-if="item.optType == 'action'"
+          :key="'cgbtn' + index"
+          @click="cgButtonActionHandler(item.buttonCode)"
+          type="primary"
+          :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+        >
+          {{ item.buttonName }}
+        </a-button>
+      </template>
+
+      <a-button
+          v-show="selectedKeys.length > 0"
+          v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+          :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+          @click="handleBatchDelete"
+      >
+        <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+      </a-button>
+    </template>
+
+    <template #fileSlot="{ text, record, column }">
+      <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+      <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+        下载
+      </a-button>
+    </template>
+
+    <template #imgSlot="{ text }">
+      <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+      <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+    </template>
+
+    <template #htmlSlot="{ text, column, record }">
+      <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      <template v-if="column.fieldHref">
+        <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+      </template>
+      <div v-else v-html="text"></div>
+      <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+    </template>
+
+    <template #pcaSlot="{ text, column }">
+      <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+    </template>
+
+    <template #dateSlot="{ text, column }">
+      <span>{{ getFormatDate(text, column) }}</span>
+    </template>
+
+    <template #action="{ record }">
+      <TableAction :actions="getActions(record)" :dropDownActions="getDropDownActions(record)" />
+    </template>
+  </BasicTable>
+
+  <!-- 表单新增、修改弹框 -->
+  <OnlineAutoModal
+      @register="registerModal"
+      :id="ID"
+      :source="ERPSUBTABLE"
+      :cgBIBtnMap="cgBIBtnMap"
+      :buttonSwitch="buttonSwitch"
+      :confirmBtnCfg="getFormConfirmButtonCfg"
+      @success="reload"
+      @formConfig="handleFormConfig"
+  />
+
+  <!-- 详情弹框 -->
+  <online-detail-modal :source="ERPSUBTABLE" :id="ID" @register="registerDetailModal" />
+
+  <!-- 导入 -->
+  <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+  <!-- 跳转Href的动态组件方式 -->
+  <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+    <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+  </a-modal>
+
+  <!-- 自定义弹窗 -->
+  <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+  <!-- 弹窗给href到另外一张表单用-详情表单 -->
+  <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false" />
+
+  <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+  <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+  <!-- 流程图查看modal -->
+  <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+</template>
+
+<script setup>
+  import { ref, computed, provide } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from '../default/OnlineAutoModal.vue';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import OnlineDetailModal from '../default/OnlineDetailModal.vue';
+  import { watch } from 'vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import { ERP, ERPSUBTABLE } from '../../util/constant';
+  import { cloneDeep } from 'lodash-es';
+  const props = defineProps(['data', 'mainTableSelectedRowRcord']);
+  const emit = defineEmits(['getSource']);
+  const btnShow = ref(false);
+  // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-1004】erp风格列设置之后再次刷新展示内容不对
+  const tableSetting = {
+    cacheKey: `online_erp_subTable_${props.data.currentTableName}`,
+  };
+  // update-end--author:liaozhiyang---date:20240611---for：【TV360X-1004】erp风格列设置之后再次刷新展示内容不对
+  const { createMessage: $message } = useMessage();
+  // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+  const {
+    ID,
+    onlineTableContext,
+    onlineQueryFormOuter,
+    loading,
+    reload,
+    dataSource,
+    pagination,
+    handleSpecialConfig,
+    getColumnList,
+    handleChangeInTable,
+    loadData,
+    onlineExtConfigJson,
+    handleFormConfig,
+    registerCustomModal,
+    tableReloading,
+  } = useOnlineTableContext({ code: props.data.code, themeTemplate: ERP });
+  onlineTableContext['isErpSubTable'] = true;
+
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const {
+    buttonSwitch,
+    cgLinkButtonList,
+    cgBIBtnMap,
+    getQueryButtonCfg,
+    getResetButtonCfg,
+    getFormConfirmButtonCfg,
+    cgTopButtonList,
+    importUrl,
+    registerModal,
+    handleAdd,
+    handleEdit,
+    handleBatchDelete,
+    registerImportModal,
+    onImportExcel,
+    onExportExcel,
+    cgButtonJsHandler,
+    cgButtonActionHandler,
+    cgButtonLinkHandler,
+    handleSubmitFlow,
+    getDropDownActions,
+    getActions,
+    initButtonList,
+    initButtonSwitch,
+    registerDetailModal,
+    registerBpmModal,
+  } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+  const exportLoading = ref(false);
+
+  // 重写导出方法，防止频繁点击
+  async function onExportExcelOverride() {
+    try {
+      exportLoading.value = true;
+      await onExportExcel();
+    } finally {
+      // 防止频繁点击，延迟1.5s关闭loading
+      setTimeout(() => (exportLoading.value = false), 1500);
+    }
+  }
+
+  // 处理 BasicTable 的配置
+  const {
+    columns,
+    actionColumn,
+    selectedKeys,
+    rowSelection,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+  initAutoList(cloneDeep(props.data));
+
+  const foreignkeyRef = ref(null);
+  const foreignKeys = props.data.foreignKeys;
+  let $key;
+  if (foreignKeys?.length) {
+    // 外键只有一个，但是给的是数组形式，只取第一个即可.
+    const item = foreignKeys[0];
+    const field = item.field;
+    $key = item.key;
+    onlineTableContext['foreignKeyField'] = field;
+  } else {
+    onlineTableContext['foreignKeyField'] = null;
+    onlineTableContext['foreignKeyValue'] = null;
+  }
+  provide('foreignkey', foreignkeyRef);
+  watch(
+    () => props.mainTableSelectedRowRcord,
+    (newVal) => {
+      // 切换重置状态
+      pagination.value.current = 1;
+      selectedKeys.value = [];
+      // update-begin--author:liaozhiyang---date:20240523---for：【TV360X-124】erp风格，切换主表数据时，子表查询条件未清空
+      onlineQueryFormOuter.value?.clearSearch();
+      // update-end--author:liaozhiyang---date:20240523---for：【TV360X-124】erp风格，切换主表数据时，子表查询条件未清空
+      if (newVal) {
+        if (onlineTableContext['foreignKeyField']) {
+          const value = newVal[$key];
+          onlineTableContext['foreignKeyValue'] = value;
+          foreignkeyRef.value = { field: onlineTableContext['foreignKeyField'], value };
+        }
+        btnShow.value = true;
+        loading.value = true;
+        loadData().finally(() => {
+          loading.value = false;
+        });
+      } else {
+        btnShow.value = false;
+        dataSource.value = [];
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+  // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+  watch(
+    () => dataSource.value,
+    () => {
+      emit('getSource', props.data.currentTableName, dataSource.value);
+    },
+    { immediate: true }
+  );
+  // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+  /**重新加载online配置*/
+  async function initAutoList(data) {
+    // 1.列配置信息
+    handleTableConfig(data);
+    loading.value = false;
+    // 2.加载数据
+    // await loadData();
+    // loading.value = false;
+    // 3.执行js增强 setup
+    onlineTableContext.execButtonEnhance('setup');
+  }
+
+  // 将查询结果转成 table渲染需要的配置
+  function handleTableConfig(result) {
+    // js增强初始化
+    let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+    onlineTableContext['EnhanceJS'] = EnhanceJS;
+    // 自定义按钮设置
+    initButtonList(result.cgButtonList);
+    // 页面按钮显示隐藏状态设置
+    initButtonSwitch(result.hideColumns);
+    // 列配置
+    handleColumnResult(result);
+    // 表配置
+    handleSpecialConfig(result);
+  }
+  
+  /**
+   * 查询控件 事件-执行查询
+   * @param data
+   */
+  function queryWithCondition(data) {
+    onlineTableContext['queryParam'] = data;
+    reload({mode:'search'});
+  }
+
+  /**
+   * list页面打开 其他表单弹窗
+   * @param params
+   */
+  function openOnlinePopModal(params) {
+    console.log('openOnlinePopModal', params);
+    popTableId.value = params.id;
+    let data = {
+      title: params.describe,
+    };
+    if (params.record && params.record.id) {
+      data['record'] = params.record;
+      data['isUpdate'] = true;
+    }
+    openPopModal(true, data);
+  }
+  //绑定弹窗事件
+  useOnlineListPopEvent(openOnlinePopModal);
+  const handleAddRcord = () => {
+    if(props.data.relationType ==1 && dataSource.value.length) {
+      $message.warning('一对一的表只能新增一条数据');
+    } else {
+      handleAdd();
+    }
+   
+  }
+</script>
+
+
diff --git a/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerSubTable.vue b/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerSubTable.vue
new file mode 100644
index 0000000..18934cc
--- /dev/null
+++ b/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerSubTable.vue
@@ -0,0 +1,246 @@
+<template>
+  <!-- 列表 -->
+  <BasicTable
+    v-if="!tableReloading"
+    ref="onlineTable"
+    rowKey="jeecg_row_key"
+    :canResize="true"
+    :bordered="true"
+    :showIndexColumn="false"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :pagination="false"
+    :showActionColumn="false"
+    :showTableSetting="false"
+    :clickToRowSelect="false"
+    :scroll="tableScroll"
+    @table-redo="reload"
+    :class="{ 'j-table-force-nowrap': enableScrollBar }"
+    @change="handleChangeInTable"
+  >
+    <template #fileSlot="{ text, record, column }">
+      <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+      <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+        下载
+      </a-button>
+    </template>
+
+    <template #imgSlot="{ text }">
+      <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+      <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+    </template>
+
+    <template #htmlSlot="{ text, column, record }">
+      <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      <template v-if="column.fieldHref">
+        <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+      </template>
+      <div v-else v-html="text"></div>
+      <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+    </template>
+
+    <template #pcaSlot="{ text, column }">
+      <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+    </template>
+
+    <template #dateSlot="{ text, column }">
+      <span>{{ getFormatDate(text, column) }}</span>
+    </template>
+  </BasicTable>
+
+
+  <!-- 详情弹框 -->
+  <online-detail-modal :id="ID" @register="registerDetailModal" :source="INNER_TABLE"/>
+
+  <!-- 导入 -->
+  <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+  <!-- 跳转Href的动态组件方式 -->
+  <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+    <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+  </a-modal>
+
+  <!-- 自定义弹窗 -->
+  <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+  <!-- 弹窗给href到另外一张表单用-详情表单 -->
+  <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false" :source="INNER_TABLE" />
+
+  <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+  <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+  <!-- 流程图查看modal -->
+  <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+</template>
+
+<script setup name="OnlCgformInnerSubTable">
+  import { ref, watch } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import OnlineDetailModal from '../default/OnlineDetailModal.vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import { INNER_TABLE } from '../../util/constant';
+  import { ACTION_COLUMN_FLAG } from '/@/components/Table/src/const';
+
+  /**
+    1.内嵌子表单没有分页
+    2.内嵌子表单没有查询区域
+    3.内嵌子表单没有导出导入等按钮
+    4.查询始终都是主表数据id（外键不起作用）
+    5.内嵌子表单没有新增和编辑，没有操作列
+  */
+  const props = defineProps(['subTableId', 'subTableName', 'mTableSelectedRcordId']);
+  const { createMessage: $message } = useMessage();
+  // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+  const {
+    ID,
+    onlineTableContext,
+    loading,
+    reload,
+    dataSource,
+    handleSpecialConfig,
+    getColumnList,
+    handleChangeInTable,
+    loadData,
+    onlineExtConfigJson,
+    registerCustomModal,
+    tableReloading,
+  } = useOnlineTableContext({ code: props.subTableId });
+  onlineTableContext['isInnerSubTable'] = true;
+  onlineTableContext['innerSubTableName'] = props.subTableName;
+  onlineTableContext['innerSubTableId'] = ID.value;
+  onlineTableContext['mTableSelectedRcordId'] = props.mTableSelectedRcordId;
+
+  // 判断 若ID不存在就终止后续逻辑
+  if (!ID.value) {
+    $message.warning('地址错误, 配置ID不存在!');
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const {
+    importUrl,
+    registerImportModal,
+    initButtonList,
+    initButtonSwitch,
+    registerDetailModal,
+    registerBpmModal,
+  } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+  
+  // 处理 BasicTable 的配置
+  const {
+    columns,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+  // 监听表单配置ID
+  watch(
+    ID,
+    () => {
+      console.log('watched id is change...');
+      initAutoList();
+    },
+    { immediate: true }
+  );
+  /**重新加载online配置*/
+  async function initAutoList() {
+    loading.value = true;
+    // 1.列配置信息
+    let columnResult = await getColumnList(INNER_TABLE);
+    handleTableConfig(columnResult);
+    // update-begin--author:liaozhiyang---date:20240514---for：【QQYUN-9340】内嵌子表数据都查出来了
+    if (columnResult.foreignKeys?.length) {
+      onlineTableContext['innerSubTableFk'] = columnResult.foreignKeys[0].field;
+    }
+    // update-end--author:liaozhiyang---date:20240514---for：【QQYUN-9340】内嵌子表数据都查出来了
+    // 2.加载数据
+    await loadData();
+    loading.value = false;
+    // 3.执行js增强 setup
+    onlineTableContext.execButtonEnhance('setup');
+  }
+
+  // 将查询结果转成 table渲染需要的配置
+  function handleTableConfig(result) {
+    // js增强初始化
+    let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+    onlineTableContext['EnhanceJS'] = EnhanceJS;
+    // 自定义按钮设置
+    initButtonList(result.cgButtonList);
+    // 页面按钮显示隐藏状态设置
+    initButtonSwitch(result.hideColumns);
+    // 列配置
+    handleColumnResult(result);
+    // 表配置
+    handleSpecialConfig(result);
+  }
+
+  /**
+   * list页面打开 其他表单弹窗
+   * @param params
+   */
+  function openOnlinePopModal(params) {
+    console.log('openOnlinePopModal', params);
+    popTableId.value = params.id;
+    let data = {
+      title: params.describe,
+    };
+    if (params.record && params.record.id) {
+      data['record'] = params.record;
+      data['isUpdate'] = true;
+    }
+    openPopModal(true, data);
+  }
+  //绑定弹窗事件
+  useOnlineListPopEvent(openOnlinePopModal);
+</script>
+
+<style lang="less">
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerTableList.vue b/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerTableList.vue
new file mode 100644
index 0000000..b41dfa7
--- /dev/null
+++ b/src/views/super/online/cgform/auto/innerTable/OnlCgformInnerTableList.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="p-2">
+
+    <!-- 加载中骨架屏 -->
+    <a-skeleton v-if="tableReloading" active />
+
+    <!-- 查询条件 -->
+    <online-query-form
+        v-show="!tableReloading"
+        ref="onlineQueryFormOuter"
+        :id="ID"
+        :queryBtnCfg="getQueryButtonCfg"
+        :resetBtnCfg="getResetButtonCfg"
+        @search="queryWithCondition"
+        @loaded="onQueryFormLoaded"
+    />
+
+    <!-- 列表 -->
+    <BasicTable
+      v-if="!tableReloading"
+      ref="onlineTable"
+      rowKey="jeecg_row_key"
+      :canResize="true"
+      :bordered="true"
+      :showIndexColumn="false"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      :rowSelection="rowSelection"
+      :actionColumn="actionColumn"
+      :showTableSetting="true"
+      :clickToRowSelect="false"
+      :scroll="tableScroll"
+      @table-redo="reload"
+      :class="{ 'j-table-force-nowrap': enableScrollBar }"
+      @change="handleChangeInTable"
+      :expandedRowKeys="expandedRowKeys"
+      @expand="handleExpand"
+    >
+      <template #tableTitle>
+        <a-button
+            v-if="buttonSwitch.add && cgBIBtnMap['add'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['add'].buttonIcon"
+            @click="handleAdd"
+        >
+          <span>{{cgBIBtnMap['add'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.import && cgBIBtnMap['import'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['import'].buttonIcon"
+            @click="onImportExcel"
+        >
+          <span>{{cgBIBtnMap['import'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.export && cgBIBtnMap['export'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['export'].buttonIcon"
+            :loading="exportLoading"
+            @click="onExportExcelOverride"
+        >
+          <span>{{cgBIBtnMap['export'].buttonName}}</span>
+        </a-button>
+
+        <!-- 自定义按钮 -->
+        <template v-if="cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+          <a-button
+            v-if="item.optType == 'js'"
+            :key="'cgbtn' + index"
+            @click="cgButtonJsHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+          <a-button
+            v-else-if="item.optType == 'action'"
+            :key="'cgbtn' + index"
+            @click="cgButtonActionHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+        </template>
+
+        <a-button
+            v-show="selectedKeys.length > 0"
+            v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+            :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+            @click="handleBatchDelete"
+        >
+          <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+        </a-button>
+
+        <online-super-query
+            v-if="buttonSwitch.super_query && cgBIBtnMap['super_query'].enabled"
+            ref="superQueryButtonRef"
+            online
+            :status="superQueryStatus"
+            :queryBtnCfg="cgBIBtnMap['super_query']"
+            @search="handleSuperQuery"
+        />
+      </template>
+
+      <!-- 子表 -->
+      <template #expandedRowRender="{ record }">
+        <a-tabs v-model:activeKey="innerSubTable.tabIndex" v-if="expandedRowKeys[0] && record.id == expandedRowKeys[0]">
+          <a-tab-pane v-if="expandedRowKeys.length" v-for="(item, index) in innerSubTable.tabNav" :tab="item.tableTxt" :key="index + ''">
+            <OnlCgformInnerSubTable
+              v-if="innerSubTable.tabIndex == index"
+              :subTableId="item.id"
+              :mTableSelectedRcordId="expandedRowKeys[0]"
+              :subTableName="item.tableName"
+            ></OnlCgformInnerSubTable>
+          </a-tab-pane>
+        </a-tabs>
+      </template>
+
+      <template #fileSlot="{ text, record, column }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+          下载
+        </a-button>
+      </template>
+
+      <template #imgSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+        <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+      </template>
+
+      <template #htmlSlot="{ text, column, record }">
+        <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+        <template v-if="column.fieldHref">
+          <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+        </template>
+        <div v-else v-html="text"></div>
+        <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      </template>
+
+      <template #pcaSlot="{ text, column }">
+        <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+      </template>
+
+      <template #dateSlot="{ text, column }">
+        <span>{{ getFormatDate(text, column) }}</span>
+      </template>
+
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownActions(record)" />
+      </template>
+    </BasicTable>
+
+    <!-- 表单新增、修改弹框 -->
+    <OnlineAutoModal
+        @register="registerModal"
+        :id="ID"
+        :cgBIBtnMap="cgBIBtnMap"
+        :buttonSwitch="buttonSwitch"
+        :confirmBtnCfg="getFormConfirmButtonCfg"
+        @success="hanldeSuccess"
+        @formConfig="getSubColunm"
+    />
+
+    <!-- 详情弹框 -->
+    <online-detail-modal :id="ID" @register="registerDetailModal" />
+
+    <!-- 导入 -->
+    <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+    <!-- 跳转Href的动态组件方式 -->
+    <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+      <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+    </a-modal>
+
+    <!-- 自定义弹窗 -->
+    <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+    <!-- 弹窗给href到另外一张表单用-详情表单 -->
+    <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false" />
+
+    <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+    <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+    <!-- 流程图查看modal -->
+    <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+    <!-- 页面loading[主要为了js增强使用] -->
+    <Loading :loading="pageLoading" :absolute="true" />
+  </div>
+</template>
+
+<script setup name="OnlCgformInnerTableList">
+  import { ref, reactive, watch, nextTick } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from '../default/OnlineAutoModal.vue';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import OnlineDetailModal from '../default/OnlineDetailModal.vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import OnlineSuperQuery from '../comp/superquery/SuperQuery.vue';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import OnlCgformInnerSubTable from './OnlCgformInnerSubTable.vue';
+  import { INNER_TABLE } from '../../util/constant';
+  import { Loading } from '/@/components/Loading';
+
+  const innerSubTable = reactive({
+    tabNav: [],
+    tabIndex: '0',
+  });
+  const expandedRowKeys = ref([]);
+  const mainTableSelectedRowRcord = ref(null);
+  const { createMessage: $message } = useMessage();
+  // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+  const {
+    ID,
+    onlineTableContext,
+    onlineQueryFormOuter,
+    loading,
+    reload,
+    dataSource,
+    pagination,
+    handleSpecialConfig,
+    getColumnList,
+    handleChangeInTable,
+    loadData,
+    superQueryButtonRef,
+    superQueryStatus,
+    handleSuperQuery,
+    onlineExtConfigJson,
+    handleFormConfig,
+    registerCustomModal,
+    tableReloading,
+    pageLoading,
+  } = useOnlineTableContext();
+
+  // 判断 若ID不存在就终止后续逻辑
+  if (!ID.value) {
+    $message.warning('地址错误, 配置ID不存在!');
+    // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+    throw new Error('地址错误, 配置ID不存在!');
+    // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const {
+    buttonSwitch,
+    cgBIBtnMap,
+    getQueryButtonCfg,
+    getResetButtonCfg,
+    getFormConfirmButtonCfg,
+    cgTopButtonList,
+    importUrl,
+    registerModal,
+    handleAdd,
+    handleBatchDelete,
+    registerImportModal,
+    onImportExcel,
+    onExportExcel,
+    cgButtonJsHandler,
+    cgButtonActionHandler,
+    getDropDownActions,
+    getActions,
+    initButtonList,
+    initButtonSwitch,
+    registerDetailModal,
+    registerBpmModal,
+  } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+  const exportLoading = ref(false);
+
+  // 重写导出方法，防止频繁点击
+  async function onExportExcelOverride() {
+    try {
+      exportLoading.value = true;
+      await onExportExcel();
+    } finally {
+      // 防止频繁点击，延迟1.5s关闭loading
+      setTimeout(() => (exportLoading.value = false), 1500);
+    }
+  }
+
+  // 处理 BasicTable 的配置
+  const {
+    columns,
+    actionColumn,
+    selectedKeys,
+    rowSelection,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+  // 监听表单配置ID
+  watch(
+    ID,
+    () => {
+      console.log('watched id is change...');
+      initAutoList();
+    },
+    { immediate: true }
+  );
+
+  /**重新加载online配置*/
+  async function initAutoList() {
+    loading.value = true;
+    // 1.列配置信息
+    let columnResult = await getColumnList(INNER_TABLE);
+    handleTableConfig(columnResult);
+    // 2.加载数据
+    await loadData();
+    loading.value = false;
+    // 3.执行js增强 setup
+    onlineTableContext.execButtonEnhance('setup');
+  }
+
+  // 将查询结果转成 table渲染需要的配置
+  function handleTableConfig(result) {
+    // js增强初始化
+    let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+    onlineTableContext['EnhanceJS'] = EnhanceJS;
+    // 自定义按钮设置
+    initButtonList(result.cgButtonList);
+    // 页面按钮显示隐藏状态设置
+    initButtonSwitch(result.hideColumns);
+    // 列配置
+    handleColumnResult(result);
+    // 表配置
+    handleSpecialConfig(result);
+  }
+
+  /**
+   * 查询控件 事件-执行查询
+   * @param data
+   */
+  function queryWithCondition(data) {
+    onlineTableContext['queryParam'] = data;
+    reload({mode:'search'});
+  }
+
+  /**
+   * 查询组件加载完成事件，获取高级查询需要的字段信息
+   */
+  async function onQueryFormLoaded(json) {
+    console.log('onQueryFormLoaded', json);
+    await getRefPromise(superQueryButtonRef);
+    superQueryButtonRef.value.init(json);
+  }
+
+  /**
+   * list页面打开 其他表单弹窗
+   * @param params
+   */
+  function openOnlinePopModal(params) {
+    console.log('openOnlinePopModal', params);
+    popTableId.value = params.id;
+    let data = {
+      title: params.describe,
+    };
+    if (params.record && params.record.id) {
+      data['record'] = params.record;
+      data['isUpdate'] = true;
+    }
+    openPopModal(true, data);
+  }
+  //绑定弹窗事件
+  useOnlineListPopEvent(openOnlinePopModal);
+
+  const getSubColunm = (data) => {
+    handleFormConfig(data);
+    const { schema } = data;
+    const { properties } = schema;
+    const subMenu = [];
+    Object.entries(properties).forEach(([key, value]) => {
+      if (value.view == 'tab') {
+        subMenu.push({ tableName: key, tableTxt: value.describe, id: value.id, order: value.order });
+      }
+    });
+    subMenu.sort((a, b) => a.order - b.order);
+    innerSubTable.tabNav = subMenu;
+  };
+
+  const handleExpand = (expanded, record) => {
+    expandedRowKeys.value = [];
+    if (expanded) {
+      expandedRowKeys.value = [record.id];
+      mainTableSelectedRowRcord.value = record;
+    }
+  };
+  const hanldeSuccess = (e) => {
+    reload(e);
+    reloadCurSubTable();
+  }
+  /**
+   * liaozhiyang
+   * 2023-12-26
+   * 刷新子表
+   */
+  const reloadCurSubTable = () => {
+    if (expandedRowKeys.value.length) {
+      const tabIndex = innerSubTable.tabIndex;
+      innerSubTable.tabIndex = '-1';
+      nextTick(() => {
+        innerSubTable.tabIndex = tabIndex;
+      });
+    }
+  };
+</script>
+
+<style lang="less">
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tab/OnlCgformTabList.vue b/src/views/super/online/cgform/auto/tab/OnlCgformTabList.vue
new file mode 100644
index 0000000..f445863
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tab/OnlCgformTabList.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="p-2">
+
+    <!-- 加载中骨架屏 -->
+    <a-skeleton v-if="tableReloading" active />
+
+    <!-- 查询条件 -->
+    <online-query-form
+        v-show="!tableReloading"
+        ref="onlineQueryFormOuter"
+        :id="ID"
+        :queryBtnCfg="getQueryButtonCfg"
+        :resetBtnCfg="getResetButtonCfg"
+        @search="queryWithCondition"
+        @loaded="onQueryFormLoaded"
+    />
+
+    <!-- 列表 -->
+    <BasicTable
+      v-if="!tableReloading"
+      ref="onlineTable"
+      rowKey="jeecg_row_key"
+      :canResize="true"
+      :bordered="true"
+      :showIndexColumn="false"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      :rowSelection="rowSelection"
+      :actionColumn="actionColumn"
+      :showTableSetting="true"
+      :clickToRowSelect="false"
+      :scroll="tableScroll"
+      @table-redo="reload"
+      :class="{ 'j-table-force-nowrap': enableScrollBar }"
+      @change="handleChangeInTable"
+    >
+      <template #tableTitle>
+        <a-button
+            v-if="buttonSwitch.add && cgBIBtnMap['add'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['add'].buttonIcon"
+            @click="handleAdd"
+        >
+          <span>{{cgBIBtnMap['add'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.import && cgBIBtnMap['import'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['import'].buttonIcon"
+            @click="onImportExcel"
+        >
+          <span>{{cgBIBtnMap['import'].buttonName}}</span>
+        </a-button>
+        <a-button
+            v-if="buttonSwitch.export && cgBIBtnMap['export'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['export'].buttonIcon"
+            :loading="exportLoading"
+            @click="onExportExcelOverride"
+        >
+          <span>{{cgBIBtnMap['export'].buttonName}}</span>
+        </a-button>
+
+        <!-- 自定义按钮 -->
+        <template v-if="cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+          <a-button
+            v-if="item.optType == 'js'"
+            :key="'cgbtn' + index"
+            @click="cgButtonJsHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+          <a-button
+            v-else-if="item.optType == 'action'"
+            :key="'cgbtn' + index"
+            @click="cgButtonActionHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+        </template>
+
+        <a-button
+            v-show="selectedKeys.length > 0"
+            v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+            :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+            @click="handleBatchDelete"
+        >
+          <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+        </a-button>
+
+        <online-super-query
+            v-if="buttonSwitch.super_query && cgBIBtnMap['super_query'].enabled"
+            ref="superQueryButtonRef"
+            online
+            :status="superQueryStatus"
+            :queryBtnCfg="cgBIBtnMap['super_query']"
+            @search="handleSuperQuery"
+        />
+      </template>
+
+      <template #fileSlot="{ text, record, column }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+          下载
+        </a-button>
+      </template>
+
+      <template #imgSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+        <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+      </template>
+
+      <template #htmlSlot="{ text, column, record }">
+        <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+        <template v-if="column.fieldHref">
+          <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+        </template>
+        <div v-else v-html="text"></div>
+        <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      </template>
+
+      <template #pcaSlot="{ text, column }">
+        <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+      </template>
+
+      <template #dateSlot="{ text, column }">
+        <span>{{ getFormatDate(text, column) }}</span>
+      </template>
+
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownActions(record)" />
+      </template>
+    </BasicTable>
+
+    <!-- 表单新增、修改弹框 -->
+    <OnlineAutoModal
+        @register="registerModal"
+        :id="ID"
+        :cgBIBtnMap="cgBIBtnMap"
+        :buttonSwitch="buttonSwitch"
+        :confirmBtnCfg="getFormConfirmButtonCfg"
+        @success="reload"
+        @formConfig="handleFormConfig"
+    />
+
+    <!-- 详情弹框 -->
+    <online-detail-modal :id="ID" @register="registerDetailModal" />
+
+    <!-- 导入 -->
+    <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+    <!-- 跳转Href的动态组件方式 -->
+    <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+      <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+    </a-modal>
+
+    <!-- 自定义弹窗 -->
+    <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+    <!-- 弹窗给href到另外一张表单用-详情表单 -->
+    <online-detail-modal :id="hrefMainTableId" @register="registerOnlineHrefModal" :defaultFullscreen="false" />
+
+    <!-- 弹窗到另外一张表单用-可编辑表单-关联记录的字段可在列表上打开modal编辑数据 -->
+    <online-pop-modal ref="onlinePopModalRef" :id="popTableId" @register="registerPopModal" @success="reload" request topTip></online-pop-modal>
+
+    <!-- 流程图查看modal -->
+    <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+    <!-- 页面loading[主要为了js增强使用] -->
+    <Loading :loading="pageLoading" :absolute="true" />
+  </div>
+</template>
+
+<script lang="ts" setup name="OnlCgformTabList">
+  import { ref, watch } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import OnlineAutoModal from './modal/OnlineTabAutoModal.vue';
+  import OnlineDetailModal from './modal/OnlineTabDetailModal.vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import OnlineSuperQuery from '../comp/superquery/SuperQuery.vue';
+  import { useOnlineListPopEvent } from '../../hooks/auto/useOnlinePopEvent';
+  import OnlinePopModal from '../comp/OnlinePopModal.vue';
+  import { TAB } from '../../util/constant';
+  import { Loading } from '/@/components/Loading';
+
+  const { createMessage: $message } = useMessage();
+  // 这行代码应该在每次进入新的路由都会走，不管该路由有没有被缓存--
+  const {
+    ID,
+    onlineTableContext,
+    onlineQueryFormOuter,
+    loading,
+    reload,
+    dataSource,
+    pagination,
+    handleSpecialConfig,
+    getColumnList,
+    handleChangeInTable,
+    loadData,
+    superQueryButtonRef,
+    superQueryStatus,
+    handleSuperQuery,
+    onlineExtConfigJson,
+    handleFormConfig,
+    registerCustomModal,
+    tableReloading,
+    pageLoading,
+  } = useOnlineTableContext();
+
+  // 判断 若ID不存在就终止后续逻辑
+  if (!ID.value) {
+    $message.warning('地址错误, 配置ID不存在!');
+    // update-begin--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+    throw new Error('地址错误, 配置ID不存在!');
+    // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+  }
+  // 处理增强
+  let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+  // 处理列表button
+  const {
+    buttonSwitch,
+    cgBIBtnMap,
+    getQueryButtonCfg,
+    getResetButtonCfg,
+    getFormConfirmButtonCfg,
+    cgTopButtonList,
+    importUrl,
+    registerModal,
+    handleAdd,
+    handleBatchDelete,
+    registerImportModal,
+    onImportExcel,
+    onExportExcel,
+    cgButtonJsHandler,
+    cgButtonActionHandler,
+    getDropDownActions,
+    getActions,
+    initButtonList,
+    initButtonSwitch,
+    registerDetailModal,
+    registerBpmModal,
+  } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+  const exportLoading = ref(false);
+
+  // 重写导出方法，防止频繁点击
+  async function onExportExcelOverride() {
+    try {
+      exportLoading.value = true;
+      await onExportExcel();
+    } finally {
+      // 防止频繁点击，延迟1.5s关闭loading
+      setTimeout(() => (exportLoading.value = false), 1500);
+    }
+  }
+
+  // 处理 BasicTable 的配置
+  const {
+    columns,
+    actionColumn,
+    selectedKeys,
+    rowSelection,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+  // 监听表单配置ID
+  watch(
+    ID,
+    () => {
+      console.log('watched id is change...');
+      initAutoList();
+    },
+    { immediate: true }
+  );
+
+  /**重新加载online配置*/
+  async function initAutoList() {
+    loading.value = true;
+    // 1.列配置信息
+    let columnResult = await getColumnList(TAB);
+    handleTableConfig(columnResult);
+    // 2.加载数据
+    await loadData();
+    loading.value = false;
+    // 3.执行js增强 setup
+    onlineTableContext.execButtonEnhance('setup');
+  }
+
+  // 将查询结果转成 table渲染需要的配置
+  function handleTableConfig(result) {
+    // js增强初始化
+    let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+    onlineTableContext['EnhanceJS'] = EnhanceJS;
+    // 自定义按钮设置
+    initButtonList(result.cgButtonList);
+    // 页面按钮显示隐藏状态设置
+    initButtonSwitch(result.hideColumns);
+    // 列配置
+    handleColumnResult(result);
+    // 表配置
+    handleSpecialConfig(result);
+  }
+
+  /**
+   * 查询控件 事件-执行查询
+   * @param data
+   */
+  function queryWithCondition(data) {
+    onlineTableContext['queryParam'] = data;
+    reload({mode:'search'});
+  }
+
+  /**
+   * 查询组件加载完成事件，获取高级查询需要的字段信息
+   */
+  async function onQueryFormLoaded(json) {
+    console.log('onQueryFormLoaded', json);
+    await getRefPromise(superQueryButtonRef);
+    superQueryButtonRef.value.init(json);
+  }
+
+  /**
+   * list页面打开 其他表单弹窗
+   * @param params
+   */
+  function openOnlinePopModal(params) {
+    console.log('openOnlinePopModal', params);
+    popTableId.value = params.id;
+    let data = {
+      title: params.describe,
+    };
+    if (params.record && params.record.id) {
+      data['record'] = params.record;
+      data['isUpdate'] = true;
+    }
+    openPopModal(true, data);
+  }
+  //绑定弹窗事件
+  useOnlineListPopEvent(openOnlinePopModal);
+</script>
+
+<style lang="less">
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tab/modal/OnlineTabAutoModal.vue b/src/views/super/online/cgform/auto/tab/modal/OnlineTabAutoModal.vue
new file mode 100644
index 0000000..e9bd2ca
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tab/modal/OnlineTabAutoModal.vue
@@ -0,0 +1,303 @@
+<template>
+  <BasicModal
+    :title="title"
+    @cancel="
+      () => {
+        onCloseEvent();
+        restTabIndex();
+      }
+    "
+    :enableComment="enableComment"
+    :width="modalWidth"
+    v-bind="$attrs"
+    :maxHeight="600"
+    @register="registerModal"
+    wrapClassName="jeecg-online-modal"
+    @ok="handleSubmit"
+    @commentOpen="handleCommentOpen"
+  >
+    <!--update-begin--author:liaozhiyang---date:20230821---for：【QQYUN-6305】tab主题一对多-->
+    <template v-if="themeTemplate === TAB" #title>
+      <div class="titleArea">
+        <div class="title">{{ title }}</div>
+        <div class="right">
+          <a-dropdown-button v-if="showDropdownBtn" trigger="click">
+            {{ tabNav[+tabIndex + 1].tableTxt }}
+            <template #overlay>
+              <a-menu @click="handleMenuClick">
+                <a-menu-item v-for="(item, index) in tabNav" :key="tabValue(index)">
+                  {{ item.tableTxt }}
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown-button>
+          <a-radio-group v-else v-model:value="tabIndex">
+            <a-radio-button v-for="(item, index) in tabNav" :value="tabValue(index)" :key="item.tableName">{{ item.tableTxt }}</a-radio-button>
+          </a-radio-group>
+        </div>
+      </div>
+    </template>
+    <!--update-end--author:liaozhiyang---date:20230821---for：【QQYUN-6305】tab主题一对多-->
+    <template #footer>
+      <a-row>
+        <a-col :span='24 - commentSpan'>
+          <a-button
+            v-for="btn in cgButtonList"
+            :key="btn.id"
+            type="primary"
+            @click="handleCgButtonClick(btn.optType, btn.buttonCode)"
+            :preIcon="btn.buttonIcon ? 'ant-design:' + btn.buttonIcon : ''"
+          >
+            {{ btn.buttonName }}
+          </a-button>
+
+          <a-button
+              v-if="!disableSubmit && confirmBtnCfg.enabled"
+              key="submit"
+              type="primary"
+              :preIcon="confirmBtnCfg.buttonIcon"
+              :loading="submitLoading"
+              @click="handleSubmit"
+          >
+            <span>{{ confirmBtnCfg.buttonName }}</span>
+          </a-button>
+          <a-button
+            key="back"
+            @click="
+              () => {
+                handleCancel();
+                restTabIndex();
+              }
+            "
+            >关闭</a-button
+          >
+        </a-col>
+      </a-row>
+    </template>
+    <online-form
+      ref="onlineFormCompRef"
+      :id="id"
+      :disabled="disableSubmit"
+      :form-template="formTemplate"
+      :isTree="isTreeForm"
+      :pidField="pidFieldName"
+      :themeTemplate="themeTemplate"
+      :tabIndex="tabIndex"
+      :cgBIBtnMap="cgBIBtnMap"
+      :buttonSwitch="buttonSwitch"
+      @rendered="renderSuccess"
+      @success="handleSuccess"
+      @toggleTab="handleToggleTab"
+    >
+    </online-form>
+
+    <template #comment>
+      <comment-panel ref="commentPanelRef" :tableName="tableName" :dataId="formDataId" />
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref, computed } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import OnlineForm from './OnlineTabForm.vue';
+  import { useAutoModal } from '../../../hooks/auto/useAutoModal';
+  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue';
+  import { TAB } from '../../../util/constant';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+
+  export default defineComponent({
+    name: 'OnlineTabAutoModal',
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      cgBIBtnMap: Object,
+      buttonSwitch: Object,
+      confirmBtnCfg: {
+        type: Object,
+        default: () => {
+          return {
+            enabled: true,
+            buttonName: '确定',
+            buttonIcon: '',
+          }
+        }
+      },
+    },
+    components: {
+      BasicModal,
+      OnlineForm,
+      CommentPanel,
+    },
+    emits: ['success', 'register', 'formConfig'],
+    setup(props, { emit }) {
+      console.log('进入表单弹框》》》》modal');
+      const commentPanelRef = ref();
+      const tabNav = ref<any>([]);
+      const tabIndex = ref<any>('-1');
+      const commentSpan = ref(0);
+      const { getIsMobile } = useAppInject();
+
+      function reloadComment() {
+        if (commentPanelRef.value) commentPanelRef.value.reload();
+      }
+
+      const {
+        title,
+        modalWidth,
+        registerModal,
+        closeModal,
+        cgButtonList,
+        handleCgButtonClick,
+        disableSubmit,
+        handleSubmit,
+        submitLoading,
+        handleCancel,
+        handleFormConfig,
+        onlineFormCompRef,
+        formTemplate,
+        isTreeForm,
+        pidFieldName,
+        renderSuccess,
+        formRendered,
+        tableName,
+        formDataId,
+        enableComment,
+        onCloseEvent,
+        themeTemplate,
+      } = useAutoModal(false, { emit }, reloadComment);
+
+      function handleSuccess(formData) {
+        emit('success', formData);
+        closeModal();
+        // 提交完成 触发关闭事件
+        onCloseEvent();
+        restTabIndex();
+      }
+
+      // 监听id变化 表单重新渲染
+      watch(() => props.id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!props.id) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        await handleFormConfig(props.id, {}, (result) => {
+          const nav: any = [];
+          const sub: any = [];
+          const { head, schema } = result;
+          const { properties } = schema;
+          nav.push({ tableName: head.tableName, tableTxt: head.tableTxt });
+          Object.entries(properties).forEach(([key, value]: any) => {
+            if (value.view == 'tab') {
+              sub.push({ tableName: key, tableTxt: value.describe, order: value.order });
+            }
+          });
+          sub.sort((a, b) => a.order - b.order);
+          tabNav.value = [...nav, ...sub];
+        });
+      }
+      const tabValue = (index) => {
+        return String(index - 1);
+      };
+      const restTabIndex = () => {
+        // 关闭的时候把索引重置第一位（防止下一条数据打开还是同样的tab）
+        setTimeout(() => {
+          tabIndex.value = '-1';
+        }, 500);
+      };
+      // 移动端且大于2条数据时显示下拉菜单
+      const showDropdownBtn = computed(() => {
+        return getIsMobile.value && tabNav.value.length > 2;
+      });
+      const handleMenuClick = ({ key }) => {
+        tabIndex.value = key;
+      };
+      const handleToggleTab = (key) => {
+        tabIndex.value = key;
+      };
+      // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-485】开启评论之后弹窗按钮居右隔一个评论的距离
+      const handleCommentOpen =  (visible, span) => { 
+        console.log('评论是否展开：', visible);
+        commentSpan.value = span;
+      }
+      // update-end--author:liaozhiyang---date:20240528---for：【TV360X-485】开启评论之后弹窗按钮居右隔一个评论的距离
+      const that = {
+        title,
+        onlineFormCompRef,
+        renderSuccess,
+        registerModal,
+        handleSubmit,
+        handleSuccess,
+        handleCancel,
+        modalWidth,
+        formTemplate,
+        disableSubmit,
+        cgButtonList,
+        handleCgButtonClick,
+        isTreeForm,
+        pidFieldName,
+        submitLoading,
+        tableName,
+        formDataId,
+        enableComment,
+        commentPanelRef,
+        onCloseEvent,
+        themeTemplate,
+        tabNav,
+        tabValue,
+        tabIndex,
+        TAB,
+        restTabIndex,
+        handleMenuClick,
+        showDropdownBtn,
+        handleToggleTab,
+        handleCommentOpen,
+        commentSpan,
+      };
+
+      return that;
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .titleArea {
+    display: flex;
+    align-content: center;
+    padding-right: 70px;
+    .title {
+      margin-right: 16px;
+      line-height: 32px;
+    }
+    .right {
+      overflow-x: auto;
+      overflow-y: hidden;
+      flex: 1;
+      white-space: nowrap;
+      .ant-radio-group {
+        font-weight: normal;
+        
+      }
+    }
+  }
+  .footerWrap {
+    &.center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  html[data-theme='light'] {
+    .right {
+      .ant-radio-group {
+        :deep(.ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked)) {
+          color: #555;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tab/modal/OnlineTabDetailModal.vue b/src/views/super/online/cgform/auto/tab/modal/OnlineTabDetailModal.vue
new file mode 100644
index 0000000..28b4a76
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tab/modal/OnlineTabDetailModal.vue
@@ -0,0 +1,196 @@
+<template>
+  <BasicModal
+    :title="title"
+    @cancel="
+      () => {
+        restTabIndex();
+      }
+    "
+    :width="modalWidth"
+    :maxHeight="600"
+    :enableComment="enableComment"
+    :defaultFullscreen="false"
+    v-bind="$attrs"
+    @register="registerModal"
+    wrapClassName="jeecg-online-detail-modal"
+  >
+    <template #title>
+      <div class="titleArea">
+        <div class="title">{{ title }}</div>
+        <div class="right">
+          <a-radio-group v-model:value="tabIndex">
+            <a-radio-button v-for="(item, index) in tabNav" :value="tabValue(index)" :key="item.tableName">{{ item.tableTxt }}</a-radio-button>
+          </a-radio-group>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <a-button
+        key="back"
+        @click="
+          () => {
+            handleCancel();
+            restTabIndex();
+          }
+        "
+        >关闭</a-button
+      >
+    </template>
+    <online-form-detail
+      ref="onlineFormCompRef"
+      :id="id"
+      :form-template="formTemplate"
+      :show-sub="showSub"
+      :themeTemplate="themeTemplate"
+      :tabIndex="tabIndex"
+      @rendered="renderSuccess"
+    />
+
+    <template #comment>
+      <comment-panel ref="commentPanelRef" :tableName="tableName" :dataId="formDataId"></comment-panel>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, ref } from 'vue';
+  import { BasicModal } from '/@/components/Modal';
+  import OnlineFormDetail from './OnlineTabFormDetail.vue';
+  import { useAutoModal } from '../../../hooks/auto/useAutoModal';
+  import CommentPanel from '/@/components/jeecg/comment/CommentPanel.vue';
+  import { TAB } from '../../../util/constant';
+
+  export default defineComponent({
+    name: 'OnlineTabDetailModal',
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    components: {
+      BasicModal,
+      OnlineFormDetail,
+      CommentPanel,
+    },
+    emits: ['success', 'register', 'formConfig'],
+    setup(props, { emit }) {
+      console.log('进入表单弹框》》》》modal');
+
+      const commentPanelRef = ref();
+      const tabNav = ref<any>([]);
+      const tabIndex = ref<string>('-1');
+      function reloadComment() {
+        if (commentPanelRef.value) commentPanelRef.value.reload();
+      }
+
+      const {
+        title,
+        modalWidth,
+        registerModal,
+        cgButtonList,
+        handleCgButtonClick,
+        disableSubmit,
+        handleSubmit,
+        submitLoading,
+        handleCancel,
+        handleFormConfig,
+        onlineFormCompRef,
+        formTemplate,
+        isTreeForm,
+        pidFieldName,
+        renderSuccess,
+        formRendered,
+        showSub,
+        tableName,
+        formDataId,
+        enableComment,
+        themeTemplate,
+      } = useAutoModal(false, { emit }, reloadComment);
+
+      // 监听id变化 表单重新渲染
+      watch(() => props.id, renderFormItems, { immediate: true });
+      async function renderFormItems() {
+        formRendered.value = false;
+        if (!props.id) {
+          return;
+        }
+        console.log('重新渲染表单》》》》modal');
+        await handleFormConfig(props.id, {}, (result) => {
+          const nav: any = [];
+          const sub: any = [];
+          const { head, schema } = result;
+          const { properties } = schema;
+          nav.push({ tableName: head.tableName, tableTxt: head.tableTxt });
+          Object.entries(properties).forEach(([key, value]: any) => {
+            if (value.view == 'tab') {
+              //update-begin---author:chenrui ---date:2025/8/27  for：[issues/8760]online表单中，主题模板为“TAB主题”时，附表TAB页面的标题和内容不一致 #8760------------
+              sub.push({ tableName: key, tableTxt: value.describe,order: value.order });
+              //update-end---author:chenrui ---date:2025/8/27  for：[issues/8760]online表单中，主题模板为“TAB主题”时，附表TAB页面的标题和内容不一致 #8760------------
+            }
+          });
+          sub.sort((a, b) => a.order - b.order);
+          tabNav.value = [...nav, ...sub];
+        });
+      }
+      const tabValue = (index) => {
+        return String(index - 1);
+      };
+      const restTabIndex = () => {
+        // 关闭的时候把索引重置第一位（防止下一条数据打开还是同样的tab）
+        setTimeout(() => {
+          tabIndex.value = '-1';
+        }, 500);
+      };
+
+      const that = {
+        title,
+        onlineFormCompRef,
+        renderSuccess,
+        registerModal,
+        handleSubmit,
+        handleCancel,
+        modalWidth,
+        formTemplate,
+        disableSubmit,
+        cgButtonList,
+        handleCgButtonClick,
+        isTreeForm,
+        pidFieldName,
+        submitLoading,
+        showSub,
+        tableName,
+        formDataId,
+        enableComment,
+        commentPanelRef,
+        themeTemplate,
+        tabNav,
+        tabValue,
+        tabIndex,
+        TAB,
+        restTabIndex,
+      };
+
+      return that;
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .titleArea {
+    display: flex;
+    align-content: center;
+    padding-right: 70px;
+    .title {
+      margin-right: 16px;
+      line-height: 32px;
+    }
+    .right {
+      overflow-x: auto;
+      overflow-y: hidden;
+      flex: 1;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tab/modal/OnlineTabForm.vue b/src/views/super/online/cgform/auto/tab/modal/OnlineTabForm.vue
new file mode 100644
index 0000000..dd32af5
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tab/modal/OnlineTabForm.vue
@@ -0,0 +1,1284 @@
+<template>
+  <div :id="tableName + '_form'" class="onlineFormWrap" :class="[`formTemplate_${formTemplate}`]">
+    <!-- update-begin--author:liaozhiyang---date:20240401---for：【QQYUN-8721】编辑页面不显示打印（配置了积木报表） -->
+    <!-- 积木报表的打印按钮，只有配置了 reportUrl 才显示 -->
+    <!-- <div
+      v-if="!!dbData.id && !!onlineExtConfigJson.reportPrintShow"
+      style="text-align: right; position: absolute; top: 6px; right: 20px; z-index: 999"
+    >
+      <PrinterOutlined title="打印" @click="onOpenReportPrint" style="font-size: 16px" />
+    </div> -->
+    <!-- update-end--author:liaozhiyang---date:20240401---for：【QQYUN-8721】编辑页面不显示打印（配置了积木报表） -->
+
+    <a-tabs class="tabTheme" v-model:activeKey="subActiveKey">
+      <a-tab-pane tab="主表" :key="'-1'">
+        <BasicForm ref="onlineFormRef" @register="registerForm" />
+      </a-tab-pane>
+      <template v-if="hasSubTable">
+        <a-tab-pane v-for="(sub, index) in subTabInfo" :tab="sub.describe" :key="index + ''" :forceRender="true">
+          <div :style="{ 'overflow-y': 'auto', 'overflow-x': 'hidden', 'max-height': subFormHeight + 'px' }" v-if="sub.relationType == 1">
+            <!-- 子表-一对一 -->
+            <online-sub-form
+              :ref="refMap[sub.key]"
+              :table="sub.key"
+              :id="sub.id"
+              :disabled="onlineFormDisabled"
+              :form-template="formTemplate"
+              :main-id="getSubTableForeignKeyValue(sub.foreignKey)"
+              :properties="sub.properties"
+              :required-fields="sub.requiredFields"
+              :is-update="isUpdate"
+              @formChange="(arg) => handleSubFormChange(arg, sub.key)"
+            />
+          </div>
+          <div v-else>
+            <!-- 子表-一对多 -->
+            <JVxeTable
+              :ref="refMap[sub.key]"
+              toolbar
+              keep-source
+              :row-number="rowNumber"
+              row-selection
+              :height="
+              // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+              subTableHeight
+            "
+              :disabled="onlineFormDisabled"
+              :columns="sub.columns"
+              :dataSource="subDataSource[sub.key]"
+              :addBtnCfg="getSubAddBtnCfg"
+              :removeBtnCfg="getSubRemoveBtnCfg"
+              @valueChange="(event) => handleValueChange(event, sub.key)"
+              @removed="(event) => handleRemoved(event, sub.key)"
+              :authPre="getSubTableAuthPre(sub.key)"
+              @added="handleAdded(sub, $event)"
+              @executeFillRule="handleSubTableDefaultValue(sub, $event)"
+            >
+              <template #toolbarSuffix>
+                <!-- 子表内弹出新增按钮 -->
+                <a-button
+                    v-if="!onlineFormDisabled && getSubOpenAddBtnCfg.enabled"
+                    type="primary"
+                    :preIcon="getSubOpenAddBtnCfg.buttonIcon"
+                    @click="openSubFormModalForAdd(sub)"
+                >
+                  <span>{{getSubOpenAddBtnCfg.buttonName}}</span>
+                </a-button>
+                <!-- 子表内弹出编辑按钮 -->
+                <a-button
+                    v-if="!onlineFormDisabled && getSubOpenEditBtnCfg.enabled"
+                    type="primary"
+                    :preIcon="getSubOpenEditBtnCfg.buttonIcon"
+                    @click="openSubFormModalForEdit(sub)"
+                >
+                  <span>{{getSubOpenEditBtnCfg.buttonName}}</span>
+                </a-button>
+              </template>
+            </JVxeTable>
+          </div>
+        </a-tab-pane>
+      </template>
+    </a-tabs>
+    <Loading :loading="loading" :absolute="false" />
+    <!-- 表单中可以通过slot自定义提交按钮，流程表单中用到 -->
+    <slot name="bottom"></slot>
+
+    <!-- 弹窗到另外一张表单用-可编辑表单 -->
+    <online-pop-modal
+      formTableType="3"
+      :request="popModalRequest"
+      :id="popTableName"
+      @register="registerPopModal"
+      @success="getPopFormData"
+      topTip
+      isVxeTableData
+    />
+  </div>
+</template>
+
+<script>
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed, ref, unref, watch, nextTick, toRaw, reactive, inject } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { SUBMIT_FLOW_ID, SUBMIT_FLOW_KEY, VALIDATE_FAILED, ONL_FORM_TABLE_NAME } from '../../../types/onlineRender';
+  import { defHttp } from '/@/utils/http/axios';
+  import { pick, omit } from 'lodash-es';
+  import { sleep } from '/@/utils';
+  import { useFormItems, getRefPromise, useOnlineFormContext } from '../../../hooks/auto/useAutoForm';
+  import { Loading } from '/@/components/Loading';
+  import { useEnhance } from '../../../hooks/auto/useEnhance';
+  import OnlineSubForm from '../../comp/OnlineSubForm.vue';
+  import { loadFormFieldsDefVal } from '../../../util/FieldDefVal';
+  import { getToken } from '/@/utils/auth';
+  import { goJmReportViewPage } from '/@/utils';
+  import { PrinterOutlined } from '@ant-design/icons-vue';
+  import OnlinePopModal from '../../comp/OnlinePopModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useCustomHook, GET_FUN_BODY_REG } from '../../../hooks/auto/useCustomHook';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+
+  const urlObject = {
+    optPre: '/online/cgform/api/form/',
+    urlButtonAction: '/online/cgform/api/doButton',
+  };
+  export default {
+    name: 'OnlineTabForm',
+    components: {
+      BasicForm,
+      Loading,
+      OnlineSubForm,
+      PrinterOutlined,
+      OnlinePopModal,
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isTree: {
+        type: Boolean,
+        default: false,
+      },
+      pidField: {
+        type: String,
+        default: '',
+      },
+      submitTip: {
+        type: Boolean,
+        default: true,
+      },
+      modalClass: {
+        type: String,
+        default: '',
+      },
+      themeTemplate: {
+        type: String,
+        default: '',
+      },
+      tabIndex: {
+        type: String,
+        default: '',
+      },
+      cgBIBtnMap: Object,
+      buttonSwitch: Object,
+    },
+    emits: ['success', 'rendered', 'toggleTab'],
+    setup(props, { emit }) {
+      console.log('onlineForm-setup》》');
+      const { createMessage: $message } = useMessage();
+
+      // 表单ref
+      const onlineFormRef = ref(null);
+      const single = ref(true);
+      // 加载状态
+      const loading = ref(false);
+      const tableType = ref(1);
+      // 自定义弹窗的编辑提交地址
+      const customEditSubmitUrl = ref('');
+
+      // 表单提交且提交流程
+      const submitFlowFlag = ref(false);
+      const isUpdate = ref(false);
+      const { getIsMobile } = useAppInject();
+      const rowNumber = ref(getIsMobile.value ? false : true);
+
+      /**
+       * online表单扩展配置
+       */
+      const onlineExtConfigJson = reactive({
+        reportPrintShow: 0,
+        reportPrintUrl: '',
+        joinQuery: 0,
+        modelFullscreen: 0,
+        modalMinWidth: '',
+        commentStatus: 0,
+      });
+
+      const {
+        onlineFormContext,
+        resetContext,
+
+        getSubAddBtnCfg,
+        getSubRemoveBtnCfg,
+        getSubOpenAddBtnCfg,
+        getSubOpenEditBtnCfg,
+      } = useOnlineFormContext(props);
+
+      const {
+        formSchemas,
+        defaultValueFields,
+        changeDataIfArray2String,
+        tableName,
+        dbData,
+        checkOnlyFieldValue,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+        subDataSource,
+        baseColProps,
+        createFormSchemas,
+        fieldDisplayStatus,
+        labelCol,
+        wrapperCol,
+        labelWidth
+      } = useFormItems(props, onlineFormRef);
+      let { EnhanceJS, initCgEnhanceJs } = useEnhance(onlineFormContext, false);
+
+      // 新的js增强
+      const { executeJsEnhanced } = useCustomHook({}, onlineFormContext);
+
+      //表单配置
+      const [registerForm, { setProps, validate, resetFields, clearValidate, setFieldsValue, updateSchema, getFieldsValue, scrollToField }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        baseColProps: baseColProps,
+        // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        labelWidth,
+        // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+        // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        labelCol,
+        wrapperCol
+        // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      });
+
+      // 表单禁用
+      const onlineFormDisabled = ref(false);
+      function handleFormDisabled() {
+        let flag = props.disabled;
+        onlineFormDisabled.value = flag;
+        setProps({ disabled: flag });
+      }
+
+      /**
+       * status: 是否是修改页面
+       * record: 列表页面的行数据
+       * param： 树形列表添加子节点 传入的父级节点id
+       * */
+      async function show(status, record, param) {
+        console.log('新增编辑进入表单》》form', record);
+        //update-begin-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+        //如果是树 需要重新设置pid的formSchema 让他刷新树控件的数据
+        await updatePidFieldDict();
+        //update-end-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+        //重置自定义弹窗的表单提交地址
+        customEditSubmitUrl.value = '';
+        await resetFields();
+        // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9345】点击编辑再点击新增一下组件会直接触发验证
+        setTimeout(() => {
+          clearValidate();
+        }, 0);
+        // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9345】点击编辑再点击新增一下组件会直接触发验证
+        dbData.value = '';
+        let flag = unref(status);
+        isUpdate.value = flag;
+        if (flag) {
+          // 编辑页面
+          await edit(record);
+        } else {
+          // 新增页面
+          editSubVxeTableData();
+        }
+        nextTick(() => {
+          if (!flag && param) {
+            //如果是新增页面 且 param传入有值 需要设置表单
+            setFieldsValue(param);
+          }
+          handleDefaultValue();
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+          //处理表单的禁用效果
+          handleFormDisabled();
+        });
+      }
+      //update-begin-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+      /**
+       * 如果是树 需要重新设置pid的formSchema--dict信息 让他刷新树控件的数据
+       */
+      async function updatePidFieldDict() {
+        if (props.isTree === true) {
+          let pidFieldName = props.pidField;
+          let arr = formSchemas.value;
+          if (arr && arr.length > 0) {
+            //先拿到pid的 componentProps配置
+            let temp = arr.filter((item) => item.field === pidFieldName);
+            if (temp.length > 0) {
+              await updateSchema({
+                field: pidFieldName,
+                componentProps: {
+                  reload: new Date().getTime(),
+                  // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+                  hiddenNodeKey: '',
+                  // update-end--author:liaozhiyang---date:20240529---for：【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+                },
+              });
+            }
+          } else {
+            console.log('没有拿到表单配置信息，可能是第一次打开新增页面');
+          }
+        }
+      }
+      //update-end-author:taoyan date:2022-5-17 for: VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的
+
+      /**
+       * 当前表单默认值逻辑-进入新增页面触发
+       */
+      function handleDefaultValue() {
+        if (unref(isUpdate) === false) {
+          let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+          loadFormFieldsDefVal(fieldProperties, (values) => {
+            setFieldsValue(values);
+          });
+        }
+      }
+
+      /**
+       * 子表默认值-子表新增行的时候触发此逻辑
+       */
+      function handleSubTableDefaultValue(sub, $event) {
+        //console.log('填值规则', sub, $event)
+        let subFieldProperties = toRaw(defaultValueFields[sub.key]);
+        loadFormFieldsDefVal(subFieldProperties, (values) => {
+          const { row, target } = $event;
+          let v = [{ rowKey: row.id, values: { ...values } }];
+          target.setValues(v);
+        });
+      }
+
+      async function edit(record) {
+        let formData = await getFormData(record.id);
+        //update-begin-author:taoyan date:2022-5-31 for: VUEN-1194 【online】字段填写完成后，设置权限不显示，再次编辑数据，则把原来的值替换成了空
+        dbData.value = Object.assign({}, record, formData);
+        //update-end-author:taoyan date:2022-5-31 for: VUEN-1194 【online】字段填写完成后，设置权限不显示，再次编辑数据，则把原来的值替换成了空
+        //表单赋值
+        let arr = realFormFieldNames.value;
+        //update-begin-author:taoyan date:2022-7-11 for:  2、online 查看详情还提示必填
+        let values = pick(formData, ...arr);
+        if (props.disabled) {
+          //详情页面 将空的数据丢弃
+          Object.keys(values).map((k) => {
+            if (!values[k] && values[k] !== 0 && values[k] !== '0') {
+              delete values[k];
+            }
+          });
+        }
+        await setFieldsValue(values);
+        //update-end-author:taoyan date:2022-7-11 for:  2、online 查看详情还提示必填
+        editSubVxeTableData(formData);
+      }
+
+      function editSubVxeTableData(record) {
+        if (!record) {
+          // 新增页面需要清空子表数据
+          record = {};
+        }
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            obj[key] = record[key] || [];
+          }
+          subDataSource.value = obj;
+        }
+      }
+
+      let realFormFieldNames = computed(() => {
+        let arr = formSchemas.value;
+        let names = [];
+        for (let a of arr) {
+          names.push(a.field);
+        }
+        return names;
+      });
+
+      function getFormData(dataId) {
+        let url = `${urlObject.optPre}${props.id}/${dataId}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject();
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+
+      // 渲染表单
+      async function createRootProperties(data) {
+        tableType.value = data.head.tableType;
+        tableName.value = data.head.tableName;
+        single.value = data.head.tableType == 1;
+        handleExtConfigJson(data.head.extConfigJson);
+
+        createFormSchemas(data.schema.properties, data.schema.required, checkOnlyFieldValue, onlineExtConfigJson);
+        EnhanceJS = initCgEnhanceJs(data.enhanceJs);
+        emit('rendered', onlineExtConfigJson);
+
+        //监听表单改变事件
+        let formRefObject = await getRefPromise(onlineFormRef);
+        formRefObject.$formValueChange = (field, value, changeFormData) => {
+          onValuesChange(field, value);
+          if (changeFormData) {
+            //如果存在其他表单控件的数据，直接设置该值
+            setFieldsValue(changeFormData);
+          }
+          onChangeEvent(field, value, changeFormData);
+        };
+        // QQYUN-5315【online表单】online表单也需要支持hook增强
+        if (EnhanceJS && EnhanceJS['setup']) {
+          executeEnhanceFormJsHook(EnhanceJS['setup']);
+        }
+      }
+
+      //  触发表单change事件 区别于老的onlchange
+      function onChangeEvent(field, value, changeFormData) {
+        onlineFormContext.changEvent(field, value, changeFormData);
+      }
+
+      // 添加表单change事件
+      function onlineFormValueChange(callback) {
+        onlineFormContext.addObject2Context('changEvent', callback);
+      }
+
+      /**
+       * 处理扩展配置
+       */
+      function handleExtConfigJson(jsonStr) {
+        //update-begin-author:taoyan date:2023-2-6 for: QQYUN-4082 默认打开online表单，默认全屏
+        let extConfigJson = { reportPrintShow: 0, reportPrintUrl: '', joinQuery: 0, modelFullscreen: 0, modalMinWidth: '', commentStatus: 0, formLabelLength: null };
+        //update-end-author:taoyan date:2023-2-6 for: QQYUN-4082 默认打开online表单，默认全屏
+        if (jsonStr) {
+          extConfigJson = JSON.parse(jsonStr);
+        }
+        Object.keys(extConfigJson).map((k) => {
+          onlineExtConfigJson[k] = extConfigJson[k];
+        });
+      }
+
+      // 提交表单和流程
+      function submitFormAndFlow() {
+        submitFlowFlag.value = true;
+        handleSubmit();
+      }
+
+      function handleSubmit() {
+        if (single.value === true) {
+          handleSingleSubmit();
+        } else {
+          handleOne2ManySubmit();
+        }
+      }
+
+      function handleOne2ManySubmit() {
+        validateAll().then((formData) => {
+          handleApplyRequest(formData);
+        });
+      }
+
+      // 触发所有表单验证
+      function validateAll() {
+        let temp = {};
+        return new Promise((resolve, reject) => {
+          // 验证主表表单
+          validate().then(
+            (values) => resolve(values),
+            ({ errorFields }) => {
+              reject({
+                code: VALIDATE_FAILED,
+                key: tableName.value,
+                // 滚动到未通过校验的字段上
+                scrollToField: () => errorFields[0] && scrollToField(errorFields[0].name, { behavior: 'smooth', block: 'center' }),
+              });
+            }
+          );
+        })
+          .then((result) => {
+            Object.assign(temp, changeDataIfArray2String(result));
+            return validateSubTableFields();
+          })
+          .then((allTableData) => {
+            Object.assign(temp, allTableData);
+            return Promise.resolve(temp);
+          })
+          .catch((e) => {
+            if (e === VALIDATE_FAILED || e?.code === VALIDATE_FAILED) {
+              $message.warning('校验未通过');
+              if (e.key) {
+                changeTab(e.key);
+                if (e.scrollToField) {
+                  setTimeout(() => e.scrollToField(), 150)
+                }
+              }
+            } else {
+              console.error(e);
+            }
+            return Promise.reject(null);
+          });
+      }
+
+      /**
+       * 切换tab到出现校验错误的页面
+       * */
+      function changeTab(key) {
+        // update-begin-author:liaozhiyang---date:20240523---for：【TV360X-126】主子表-tab风格，新建（编辑）时子表校验未通过，内容切换到子表了但是tab没切换
+        if (key === tableName.value) {
+          emit('toggleTab', '-1');
+          return;
+        }
+        // update-end-author:liaozhiyang---date:20240523---for：【TV360X-126】主子表-tab风格，新建（编辑）时子表校验未通过，内容切换到子表了但是tab没切换
+        let arr = subTabInfo.value;
+        for (let i = 0; i < arr.length; i++) {
+          if (key == arr[i].key) {
+            // update-begin-author:sunjianlei date:2022-7-7 for:【VUEN-1425】【vue3】对多子表中校验不通过不提示
+            let activeKey = i + '';
+            if (subActiveKey.value === activeKey) {
+              break;
+            }
+            // update-begin-author:liaozhiyang---date:20240523---for：【TV360X-126】主子表-tab风格，新建（编辑）时子表校验未通过，内容切换到子表了但是tab没切换
+            // subActiveKey.value = activeKey;
+            emit('toggleTab', activeKey);
+            // update-end-author:liaozhiyang---date:20240523---for：【TV360X-126】主子表-tab风格，新建（编辑）时子表校验未通过，内容切换到子表了但是tab没切换
+            // 如果切换的目标tab是一对多子表，则需要再次校验一下
+            if (arr[i].relationType === 0) {
+              let instance = getSubTableInstance(key);
+              sleep(300, () => instance?.validateTable());
+            }
+            // update-end-author:sunjianlei date:2022-7-7 for:【VUEN-1425】【vue3】对多子表中校验不通过不提示
+            break;
+          }
+        }
+      }
+
+      // 验证子表
+      function validateSubTableFields() {
+        return new Promise(async (resolve, reject) => {
+          let subData = {};
+          try {
+            let arr = subTabInfo.value;
+            for (let i = 0; i < arr.length; i++) {
+              let key = arr[i].key;
+              let instance = getSubTableInstance(key);
+              if (arr[i].relationType == 1) {
+                try {
+                  let subFormData = await instance.getAll();
+                  subData[key] = [];
+                  subData[key].push(subFormData);
+                } catch (e) {
+                  return reject({code: VALIDATE_FAILED, key, ...e});
+                }
+              } else {
+                let errMap = await instance.fullValidateTable();
+                if (errMap) {
+                  return reject({code: VALIDATE_FAILED, key});
+                }
+                subData[key] = instance.getTableData();
+              }
+            }
+          } catch (e) {
+            reject(e);
+          }
+          resolve(subData);
+        });
+      }
+
+      /**
+       * 表单提交-单表
+       */
+      async function handleSingleSubmit() {
+        try {
+          let values = await validate();
+          values = Object.assign({}, dbData.value, values);
+          values = changeDataIfArray2String(values);
+          loading.value = true;
+          handleApplyRequest(values);
+        } catch (e) {
+          if (Array.isArray(e?.errorFields) && e.errorFields[0]) {
+            // 滚动到未通过校验的字段上
+            scrollToField(e.errorFields[0].name, { behavior: 'smooth', block: 'center' });
+          }
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      //提交数据前 先走一下自定义的JS校验
+      function handleApplyRequest(formData) {
+        customBeforeSubmit(context, formData)
+          .then(() => {
+            doApplyRequest(formData);
+          })
+          .catch((msg) => {
+            $message.warning(msg);
+          });
+      }
+
+      /**
+       * 发起请求
+       * @param formData
+       */
+      function doApplyRequest(formData) {
+        // 数组没有元素直接置空
+        Object.keys(formData).map((key) => {
+          if (Array.isArray(formData[key])) {
+            if (formData[key].length == 0) {
+              formData[key] = '';
+            }
+          }
+        });
+        console.log('提交表单数据》》》form:', formData);
+        let customUrl = customEditSubmitUrl.value;
+        let url = `${urlObject.optPre}${props.id}?tabletype=${tableType.value}`;
+        if (customUrl) {
+          url = `${customUrl}?tabletype=${tableType.value}`;
+        }
+        // 如果需要提交流程 需要额外设置一个参数
+        if (submitFlowFlag.value === true) {
+          formData[SUBMIT_FLOW_KEY] = 1;
+        }
+        let method = isUpdate.value === true ? 'put' : 'post';
+        defHttp
+          .request({ url, method, params: formData }, { isTransformResponse: false })
+          .then((res) => {
+            //console.log('表单提交完成', res)
+            if (res.success) {
+              if (res.result) {
+                formData[SUBMIT_FLOW_ID] = res.result;
+              }
+              //刷新列表
+              emit('success', formData);
+              // 工单申请提交的表单也会走这个逻辑，保存成功不需要提示信息
+              if (props.submitTip === true) {
+                $message.success(res.message);
+              }
+            } else {
+              $message.warning(res.message);
+            }
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+      }
+
+      function triggleChangeValues(values, id, target) {
+        if (id && target) {
+          if (target.vxeProps) {
+            //一对多子表
+            target.setValues([
+              {
+                rowKey: id,
+                values: values,
+              },
+            ]);
+          } else {
+            //一对一子表
+            target.setValues(values);
+          }
+        } else {
+          //主表
+          setFieldsValue(values);
+        }
+      }
+      function triggleChangeValue(field, value) {
+        let obj = {};
+        obj[field] = value;
+        setFieldsValue(obj);
+      }
+
+      // 一对多子表Tab的Key，用于校验未通过时自动跳转
+      const subActiveKey = ref('0');
+      // update-begin-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subFormHeight = ref('auto');
+      // update-end-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      // 子表表格高度
+      // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+      const subTableHeight = ref(340);
+
+      function getSubTableForeignKeyValue(key) {
+        if (isUpdate.value === true) {
+          let formData = dbData.value;
+          return getValueIgnoreCase(formData, key);
+        }
+        return '';
+      }
+      watch(
+        () => props.tabIndex,
+        (value) => {
+          subActiveKey.value = value;
+        },
+        {
+          immediate: true,
+        }
+      );
+      /**
+       * VUEN-1056 30、生成的一对多，编辑的时候，子表数据挂不上
+       */
+      function getValueIgnoreCase(data, key) {
+        if (data) {
+          let temp = data[key];
+          if (!temp && temp !== 0) {
+            temp = data[key.toLowerCase()];
+            if (!temp && temp !== 0) {
+              temp = data[key.toUpperCase()];
+            }
+          }
+          return temp;
+        }
+        return '';
+      }
+
+      //处理一对一子表的表单改变事件
+      function handleSubFormChange(valueObj, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange']();
+          let columnKey = Object.keys(valueObj)[0];
+          if (tableChangeObj[columnKey]) {
+            let subRef = getSubTableInstance(tableKey);
+            let formEvent = subRef.getFormEvent();
+            let event = {
+              column: { key: columnKey },
+              value: valueObj[columnKey],
+              ...formEvent,
+            };
+            tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+          }
+        }
+      }
+
+      //处理一对多子表的改变事件
+      function handleValueChange(event, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange'](onlineFormContext);
+          //update-begin-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时，子表弹框修改了数据，主表字段未修改
+          if (event.column === 'all') {
+            let keys = Object.keys(tableChangeObj);
+            if (keys.length > 0) {
+              for (let key of keys) {
+                tableChangeObj[key].call(onlineFormContext, onlineFormContext, event);
+              }
+            }
+          } else {
+            let columnKey = event.column.key || event.col.key;
+            if (tableChangeObj[columnKey]) {
+              //event.row.id 加这个条件是： popform添加数据到vxetable的时候 不需要触发改变事件
+              if (event.row && event.row.id) {
+                tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+              }
+            }
+          }
+          //update-end-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时，子表弹框修改了数据，主表字段未修改
+        }
+      }
+
+      /**
+       * 2024-07-30
+       * liaozhiyang
+       * 【TV360X-1958】一对多子表删除时js增强 子表名_onlChange 事件没触发
+       *  处理一对多子表的删除事件
+       * */
+      function handleRemoved(event, tableKey) {
+        if (EnhanceJS && EnhanceJS[tableKey + '_onlChange']) {
+          let tableChangeObj = EnhanceJS[tableKey + '_onlChange'](onlineFormContext);
+          let keys = Object.keys(tableChangeObj);
+          if (keys.length > 0) {
+            for (let key of keys) {
+              tableChangeObj[key]?.call(onlineFormContext, onlineFormContext, {...event, row: event.deleteRows});
+            }
+          }
+        }
+      }
+
+      // 当行编辑新增完成后触发的事件
+      function handleAdded(sub, event) {
+        console.log('handleAdded', sub, event);
+        //update-begin-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+        // event.target.emit('executeFillRule', event);
+        if (!event.isModalData) {
+          handleSubTableDefaultValue(sub, event);
+        }
+        //update-end-author:taoyan date:2022-6-26 for: 控制台警告 这里直接调用函数 不触发事件了
+      }
+
+      function getSubTableAuthPre(table) {
+        return 'online_' + table + ':';
+      }
+
+      //监听表单改变事件
+      async function onValuesChange(columnKey, value) {
+        //console.log('columnKey-value', `${columnKey}-${value}`)
+        if (!EnhanceJS || !EnhanceJS['onlChange']) {
+          return false;
+        }
+        if (!columnKey) {
+          return false;
+        }
+        //let tableChangeObj = EnhanceJS["onlChange"].call(onlineFormContext);
+        let tableChangeObj = EnhanceJS['onlChange']();
+        if (tableChangeObj[columnKey]) {
+          // update-begin--author:liaozhiyang---date:20250106---for：【issues/7642】js增强onlchange事件event.row.字段获取的是变化前的值
+          setTimeout(async () => {
+            let formData = await getFieldsValue();
+            let event = {
+              row: formData,
+              column: { key: columnKey },
+              value: value,
+            };
+            tableChangeObj[columnKey].call(onlineFormContext, onlineFormContext, event);
+          }, 0);
+          // update-end--author:liaozhiyang---date:20250106---for：【issues/7642】js增强onlchange事件event.row.字段获取的是变化前的值
+        }
+      }
+
+      /**
+       * 执行online表单的 hook
+       * QQYUN-5315【online表单】online表单也需要支持hook增强
+       */
+      function executeEnhanceFormJsHook(funStr) {
+        let str = funStr.toLocaleString();
+        let arr = str.match(GET_FUN_BODY_REG);
+        if (arr.length > 1) {
+          let temp = arr[1];
+          executeJsEnhanced(temp);
+        }
+      }
+
+      // 自定义按钮 增强触发事件
+      function handleCgButtonClick(optType, buttonCode) {
+        if ('js' == optType) {
+          let hookFunName = buttonCode + '_hook';
+          if (EnhanceJS && EnhanceJS[buttonCode]) {
+            EnhanceJS[buttonCode].call(onlineFormContext, onlineFormContext);
+          } else if (EnhanceJS && EnhanceJS[hookFunName]) {
+            executeEnhanceFormJsHook(EnhanceJS[hookFunName]);
+          }
+        } else if ('action' == optType) {
+          let formData = dbData.value;
+          let params = {
+            formId: props.id,
+            buttonCode: buttonCode,
+            dataId: formData.id,
+            uiFormData: Object.assign({}, formData),
+          };
+          //console.log("自定义按钮请求后台参数：",params)
+          defHttp
+            .post(
+              {
+                url: `${urlObject.urlButtonAction}`,
+                params,
+              },
+              { isTransformResponse: false }
+            )
+            .then((res) => {
+              if (res.success) {
+                $message.success('处理完成!');
+              } else {
+                $message.warning('处理失败!');
+              }
+            });
+        }
+      }
+
+      // --------------------增强-------------------------
+
+      /**
+       * 清除子表数据
+       * @param tbname
+       */
+      function clearSubRows(tbname) {
+        let instance = getSubTableInstance(tbname);
+        let rows = [...instance.getNewDataWithId(), ...subDataSource.value[tbname]];
+        if (!rows || rows.length == 0) {
+          return false;
+        }
+        let ids = [];
+        for (let i of rows) {
+          ids.push(i.id);
+        }
+        instance.removeRowsById(ids);
+      }
+
+      /**
+       * 添加子表数据
+       * @param tbname
+       * @param rows 可以是数组也可以是对象
+       * @returns {boolean}
+       */
+      function addSubRows(tbname, rows) {
+        if (!rows) {
+          return false;
+        }
+        let instance = getSubTableInstance(tbname);
+        if (typeof rows == 'object') {
+          instance.addRows(rows, true);
+        } else {
+          this.$message.error('添加子表数据,参数不识别!');
+        }
+      }
+
+      /**
+       * 先删除后添加
+       * @param tbname
+       * @param rows
+       */
+      function clearThenAddRows(tbname, rows) {
+        clearSubRows(tbname);
+        addSubRows(tbname, rows);
+      }
+
+      /**
+       * 修改下拉框的下拉选项
+       * @param field
+       * @param options
+       */
+      function changeOptions(field, options) {
+        if (!options && options.length <= 0) {
+          options = [];
+        }
+        options.map((item) => {
+          if (!item.hasOwnProperty('label')) {
+            item['label'] = item.text;
+          }
+        });
+        updateSchema({
+          field,
+          componentProps: {
+            options,
+          },
+        });
+      }
+
+      /**
+       * 表单提交前事件
+       * @param that
+       * @param formData
+       * @returns {Promise<void>|*}
+       */
+      function customBeforeSubmit(that, formData) {
+        if (EnhanceJS && EnhanceJS['beforeSubmit']) {
+          return EnhanceJS['beforeSubmit'](that, formData);
+        } else {
+          return Promise.resolve();
+        }
+      }
+
+      /**
+       * 处理自定义弹框 字段的显示隐藏
+       * @param show
+       * @param hide
+       */
+      function handleCustomFormSh(show, hide) {
+        let plain = toRaw(fieldDisplayStatus);
+        if (show && show.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (!k.endsWith('_load') && show.indexOf(k) < 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        } else if (hide && hide.length > 0) {
+          Object.keys(plain).map((k) => {
+            if (hide.indexOf(k) >= 0) {
+              fieldDisplayStatus[k] = false;
+            }
+          });
+        }
+      }
+
+      async function handleCustomFormEdit(record, editSubmitUrl) {
+        console.log('自定义弹窗打开online表单2》》form', record);
+        customEditSubmitUrl.value = editSubmitUrl;
+        await resetFields();
+        dbData.value = '';
+        isUpdate.value = true;
+        // 编辑数据
+        await edit(record);
+        await nextTick(() => {
+          // 所有信息加载完毕 触发loaded事件
+          handleCgButtonClick('js', 'loaded');
+        });
+      }
+
+      /**
+       * VUEN-1036
+       * 获取子表的实例对象 可以直接调用子表的方法
+       */
+      function getSubTableInstance(tableName) {
+        let instance = refMap[tableName].value;
+        if (instance instanceof Array) {
+          instance = instance[0];
+        }
+        if (!instance) {
+          $message.warning('子表ref找不到:' + tableName);
+          return;
+        }
+        return instance;
+      }
+
+      //跳转至积木报表页面
+      function onOpenReportPrint() {
+        let url = onlineExtConfigJson.reportPrintUrl;
+        let id = dbData.value.id;
+        let token = getToken();
+        goJmReportViewPage(url, id, token);
+      }
+
+      //-----------------------------------一对多子表弹窗操作数据-begin-------------------------------------------------------------
+      const [registerPopModal, { openModal: openPopModal }] = useModal();
+      //表名/表ID都可以
+      const popTableName = ref('');
+      // 是否发起请求
+      const popModalRequest = ref(true);
+
+      /**
+       * 新增
+       * @param sub
+       */
+      function openSubFormModalForAdd(sub) {
+        console.log('openSubFormModalForAdd', sub);
+        popTableName.value = sub.id;
+        popModalRequest.value = false;
+        openPopModal(true, { isUpdate: false, tableType: '3' });
+      }
+
+      /**
+       * 编辑
+       * @param sub
+       */
+      function openSubFormModalForEdit(sub) {
+        let ref = getSubTableInstance(sub.key);
+        let arr = ref.getSelectedData();
+        if (arr.length != 1) {
+          $message.warning('请选择一条数据');
+          return;
+        }
+        popTableName.value = sub.id;
+        popModalRequest.value = false;
+        openPopModal(true, { isUpdate: true, record: arr[0] });
+      }
+
+      /**
+       * 将数据回填到当前vxe table
+       * @param data
+       */
+      function getPopFormData(data) {
+        const tableName = data[ONL_FORM_TABLE_NAME];
+        //   console.log('getFormData', data)
+        let record = omit(data, [ONL_FORM_TABLE_NAME]);
+        if (record.id) {
+          let values = omit({ ...record }, 'id');
+          let arr = [{ rowKey: record.id, values }];
+          let instance = getSubTableInstance(tableName);
+          instance.setValues(arr);
+        } else {
+          let instance = getSubTableInstance(tableName);
+          instance.addRows(record, { isOnlineJS: false, setActive: false, emitChange: true, isModalData: true });
+        }
+      }
+      //-----------------------------------一对多子表弹窗操作数据-end-------------------------------------------------------------
+
+      //update-begin-author:taoyan date:2022-10-17 for: VUEN-2480【严重bug】online vue3测试的问题 6、勾中弹窗编辑后，再次打开，发现不能取消勾中
+      function onCloseModal() {
+        let arr = subTabInfo.value;
+        if (arr && arr.length > 0) {
+          for (let item of arr) {
+            if (item.relationType == 1) {
+              //1对1忽略
+            } else {
+              let inst = getSubTableInstance(item.key);
+              if (inst) {
+                inst.clearSelection();
+              }
+            }
+          }
+        }
+      }
+      //update-end-author:taoyan date:2022-10-17 for: VUEN-2480【严重bug】online vue3测试的问题 6、勾中弹窗编辑后，再次打开，发现不能取消勾中
+
+      /** 供 js 增强调用：重新执行主表的填值规则  */
+      function executeMainFillRule() {
+        let formData = getFieldsValue();
+        let fieldProperties = toRaw(defaultValueFields[tableName.value]);
+        loadFormFieldsDefVal(
+          fieldProperties,
+          (values) => {
+            setFieldsValue(values);
+          },
+          formData
+        );
+      }
+
+      /** 供 js 增强调用：重新执行子表的填值规则  */
+      function executeSubFillRule(subKey, $event) {
+        let subList = subTabInfo.value;
+        if (subList && subList.length > 0) {
+          let arr = subList.filter((sub) => sub.key === subKey);
+          if (arr.length == 0) {
+            console.error('没找到与之匹配的子表', subKey);
+            return;
+          }
+          if (arr[0].relationType == 1) {
+            //一对一
+            let subInstance = getSubTableInstance(subKey);
+            subInstance.executeFillRule();
+          } else {
+            // 一对多
+            let subFieldProperties = toRaw(defaultValueFields[subKey]);
+            let row = toRaw($event.row);
+            loadFormFieldsDefVal(
+              subFieldProperties,
+              (values) => {
+                const { row, target } = $event;
+                let v = [{ rowKey: row.id, values: { ...values } }];
+                target.setValues(v);
+              },
+              row
+            );
+          }
+        }
+      }
+
+      let context = {
+        tableName,
+        loading,
+        subActiveKey,
+        onlineFormRef,
+        getFieldsValue,
+        setFieldsValue,
+        submitFlowFlag,
+        subFormHeight,
+        subTableHeight,
+        refMap,
+        triggleChangeValues,
+        triggleChangeValue,
+        sh: fieldDisplayStatus,
+        clearSubRows,
+        addSubRows,
+        clearThenAddRows,
+        changeOptions,
+        isUpdate,
+        getSubTableInstance,
+        updateSchema,
+        executeMainFillRule,
+        executeSubFillRule,
+        changEvent: () => {},
+        onlineFormValueChange,
+        // update-begin--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+        submitFormAndFlow,
+        // update-end--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+      };
+      resetContext(context);
+
+      return {
+        //主表
+        tableName,
+        onlineFormRef,
+        registerForm,
+        loading,
+
+        //子表
+        subActiveKey,
+        hasSubTable,
+        subTabInfo,
+        refMap,
+
+        //一对一子表
+        subFormHeight,
+        getSubTableForeignKeyValue,
+        isUpdate,
+        handleSubFormChange,
+
+        //一对多子表
+        subTableHeight,
+        onlineFormDisabled,
+        subDataSource,
+        getSubTableAuthPre,
+        handleAdded,
+        handleSubTableDefaultValue,
+        handleValueChange,
+        openSubFormModalForAdd,
+        openSubFormModalForEdit,
+        handleRemoved,
+        //父组件调用
+        show,
+        createRootProperties,
+        handleSubmit,
+        sh: fieldDisplayStatus,
+        handleCgButtonClick,
+        handleCustomFormSh,
+        handleCustomFormEdit,
+        //跳转
+        dbData,
+        onOpenReportPrint,
+        onlineExtConfigJson,
+        //一对多子表弹窗操作数据
+        registerPopModal,
+        popTableName,
+        getPopFormData,
+        popModalRequest,
+        onCloseModal,
+        rowNumber,
+
+        getSubAddBtnCfg,
+        getSubRemoveBtnCfg,
+        getSubOpenAddBtnCfg,
+        getSubOpenEditBtnCfg,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .onlineFormWrap {
+    // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    padding: 20px 1.5% 0;
+    // update-begin--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    &.formTemplate_1 {
+      > form {
+        padding-left: 5%;
+        padding-right: 5%;
+      }
+    }
+    &.formTemplate_2 {
+      > form {
+        padding-left: 1%;
+        padding-right: 1%;
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240506---for：【QQYUN-9229】间隔调整
+    :deep(.ant-form) {
+      > .ant-row {
+        > .ant-col {
+          padding: 0 6px;
+        }
+      }
+    }
+    // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    :deep(.vxe-buttons--wrapper) {
+      > div {
+        display: flex;
+      }
+    }
+    // update-begin--author:liaozhiyang---date:20240517---for：【QQYUN-9353】markdown全屏之后，弹窗的关闭和全屏按钮在markdown上面
+    :deep(.vditor--fullscreen) {
+      z-index: 1011 !important;
+    }
+    // update-end--author:liaozhiyang---date:20240517---for：【QQYUN-9353】markdown全屏之后，弹窗的关闭和全屏按钮在markdown上面
+  }
+  .tabTheme {
+    :deep(.ant-tabs-nav) {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tab/modal/OnlineTabFormDetail.vue b/src/views/super/online/cgform/auto/tab/modal/OnlineTabFormDetail.vue
new file mode 100644
index 0000000..6f11fb8
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tab/modal/OnlineTabFormDetail.vue
@@ -0,0 +1,343 @@
+<template>
+  <div :id="tableName + '_form'">
+    <!-- 积木报表的打印按钮，只有配置了 reportUrl 才显示 -->
+    <div
+      v-if="!!formData.id && !!onlineExtConfigJson.reportPrintShow"
+      style="text-align: right; position: absolute; top: 15px; right: 20px; z-index: 999"
+    >
+      <PrinterOutlined title="打印" @click="onOpenReportPrint" style="font-size: 16px" />
+    </div>
+
+    <a-tabs
+      class="tabTheme"
+      @change="onTabChange"
+      v-model:activeKey="subActiveKey"
+    >
+      <a-tab-pane tab="主表" :key="'-1'">
+        <detail-form :schemas="detailFormSchemas" :data="formData" :span="formSpan" />
+      </a-tab-pane>
+      <template v-if="hasSubTable && showSub">
+        <a-tab-pane v-for="(sub, index) in subTabInfo" :tab="sub.describe" :key="index + ''" :forceRender="true">
+          <div :style="{ 'overflow-y': 'auto', 'overflow-x': 'hidden', 'max-height': subFormHeight + 'px' }" v-if="sub.relationType == 1">
+            <!-- 子表-一对一 -->
+            <online-sub-form-detail
+              :key="subReloadKey"
+              :table="sub.key"
+              :form-template="formTemplate"
+              :main-id="getSubTableForeignKeyValue(sub.foreignKey)"
+              :properties="sub.properties"
+            >
+            </online-sub-form-detail>
+          </div>
+          <div v-else>
+            <!-- 子表-一对多 -->
+            <JVxeTable
+              v-if="showStatus[sub.key]"
+              :ref="refMap[sub.key]"
+              toolbar
+              keep-source
+              :row-number="rowNumber"
+              row-selection
+              :height="subTableHeight"
+              :disabled="true"
+              :columns="sub.columns"
+              :dataSource="subDataSource[sub.key]"
+              :authPre="getSubTableAuthPre(sub.key)"
+            />
+            <a-spin v-else :spinning="true" />
+          </div>
+        </a-tab-pane>
+      </template>
+    </a-tabs>
+    <Loading :loading="loading" :absolute="false" />
+    <slot name="bottom"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, reactive, watch } from 'vue';
+  import { Loading } from '/@/components/Loading';
+  import { getToken } from '/@/utils/auth';
+  import { goJmReportViewPage } from '/@/utils';
+  import { PrinterOutlined } from '@ant-design/icons-vue';
+  import DetailForm from '../../../extend/form/DetailForm.vue';
+  import OnlineSubFormDetail from '../../comp/OnlineSubFormDetail.vue';
+  import { getDetailFormSchemas } from '../../../hooks/auto/useAutoForm';
+  import { defHttp } from '/@/utils/http/axios';
+  import { ERP, TAB } from '../../../util/constant';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  
+  export default {
+    name: 'OnlineTabFormDetail',
+    components: {
+      DetailForm,
+      Loading,
+      PrinterOutlined,
+      OnlineSubFormDetail,
+    },
+    props: {
+      id: {
+        type: String,
+        default: '',
+      },
+      formTemplate: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isTree: {
+        type: Boolean,
+        default: false,
+      },
+      pidField: {
+        type: String,
+        default: '',
+      },
+      submitTip: {
+        type: Boolean,
+        default: true,
+      },
+      showSub: {
+        type: Boolean,
+        default: true,
+      },
+      themeTemplate: {
+        type: String,
+        default: '',
+      },
+      tabIndex: {
+        type: String,
+        default: '',
+      },
+    },
+    emits: ['success', 'rendered'],
+    setup(props, { emit }) {
+      console.log('onlineForm-setup》》');
+      const { createMessage: $message } = useMessage();
+      const { getIsMobile } = useAppInject();
+
+      const tableName = ref('');
+      const single = ref(true);
+      // 加载状态
+      const loading = ref(false);
+      const tableType = ref(1);
+      const formData = ref<any>({});
+      // update-begin-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subFormHeight = ref('auto');
+      // update-end-author:liaozhiyang---date:20240313---for：【QQYUN-9034】online弹窗一对一子表移动端内容高度设置不合理
+      const subReloadKey = ref(0);
+      // 子表表格高度
+      // 【VUEN-803】一对多子表固定340高度，修复自定义列组件被遮挡的问题
+      const subTableHeight = ref(340);
+      const subActiveKey = ref('0');
+
+      const rowNumber = ref(getIsMobile.value ? false : true);
+
+      watch(
+        () => props.tabIndex,
+        (value, oldValue) => {
+          subActiveKey.value = value;
+          if (oldValue) {
+            //第一次进来不执行，之后监听变化了才执行。(详情情界面序号错位了，点一下正常)
+            onTabChange();
+          }
+        },
+        {
+          immediate: true,
+        }
+      );
+      /**
+       * online表单扩展配置
+       */
+      const onlineExtConfigJson = reactive({
+        reportPrintShow: 0,
+        reportPrintUrl: '',
+        joinQuery: 0,
+        modelFullscreen: 0,
+        modalMinWidth: '',
+      });
+
+      const { detailFormSchemas, hasSubTable, subTabInfo, refMap, showStatus, subDataSource, createFormSchemas, formSpan } =
+        getDetailFormSchemas(props);
+
+      /**
+       * 处理扩展配置
+       */
+      function handleExtConfigJson(jsonStr) {
+        let extConfigJson = { reportPrintShow: 0, reportPrintUrl: '', joinQuery: 0, modelFullscreen: 1, modalMinWidth: '' };
+        if (jsonStr) {
+          extConfigJson = JSON.parse(jsonStr);
+        }
+        Object.keys(extConfigJson).map((k) => {
+          onlineExtConfigJson[k] = extConfigJson[k];
+        });
+      }
+
+      // 渲染表单
+      async function createRootProperties(data) {
+        tableType.value = data.head.tableType;
+        tableName.value = data.head.tableName;
+        single.value = data.head.tableType == 1;
+        handleExtConfigJson(data.head.extConfigJson);
+        createFormSchemas(data.schema.properties);
+        emit('rendered', onlineExtConfigJson);
+      }
+
+      /**
+       * status: 是否是修改页面
+       * record: 列表页面的行数据
+       * param： 树形列表添加子节点 传入的父级节点id
+       * */
+      async function show(_status, record) {
+        console.log('进入表单详情》》form', record);
+        // -update-begin--author:liaozhiyang---date:20251209---for：【QQYUN-13970】一对一子表编辑之后查看详情不会更新
+        subReloadKey.value++;
+        // -update-end--author:liaozhiyang---date:20251209---for：【QQYUN-13970】一对一子表编辑之后查看详情不会更新
+        await edit(record);
+        changeShowStatus(true);
+      }
+
+      function getFormData(dataId) {
+        let url = `/online/cgform/api/detail/${props.id}/${dataId}`;
+        return new Promise((resolve, reject) => {
+          defHttp
+            .get({ url }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                resolve(res.result);
+              } else {
+                reject();
+                $message.warning(res.message);
+              }
+            })
+            .catch(() => {
+              reject();
+            });
+        });
+      }
+
+      //update-begin-author:taoyan date:2023-2-13 for: QQYUN-4226【vue3】online 一对多子表 详情界面，序号错位了 点一下子表表格就正常了
+      function changeShowStatus(flag) {
+        Object.keys(showStatus).map((k) => {
+          showStatus[k] = flag;
+        });
+      }
+
+      function onTabChange() {
+        changeShowStatus(false);
+        setTimeout(() => {
+          changeShowStatus(true);
+        }, 300);
+      }
+      //update-end-author:taoyan date:2023-2-13 for: QQYUN-4226【vue3】online 一对多子表 详情界面，序号错位了 点一下子表表格就正常了
+
+      async function edit(record) {
+        let temp: any = await getFormData(record.id);
+        //表单赋值
+        formData.value = { ...temp };
+        editSubVxeTableData(temp);
+      }
+
+      function editSubVxeTableData(record) {
+        if (!record) {
+          // 新增页面需要清空子表数据
+          record = {};
+        }
+        let keys = Object.keys(subDataSource.value);
+        if (keys && keys.length > 0) {
+          let obj = {};
+          for (let key of keys) {
+            obj[key] = record[key] || [];
+          }
+          subDataSource.value = obj;
+        }
+      }
+
+      function getSubTableAuthPre(table) {
+        return 'online_' + table + ':';
+      }
+
+      //跳转至积木报表页面
+      function onOpenReportPrint() {
+        let url = onlineExtConfigJson.reportPrintUrl;
+        let temp: any = formData.value;
+        if (temp) {
+          let id = temp.id;
+          let token = getToken();
+          goJmReportViewPage(url, id, token);
+        }
+      }
+
+      function getSubTableForeignKeyValue(key) {
+        let temp = formData.value;
+        console.log('getValueIgnoreCase(temp, key)', temp, key, getValueIgnoreCase(temp, key));
+        return getValueIgnoreCase(temp, key);
+      }
+
+      /**
+       * VUEN-1056 30、生成的一对多，编辑的时候，子表数据挂不上
+       */
+      function getValueIgnoreCase(data, key) {
+        if (data) {
+          let temp = data[key];
+          if (!temp && temp !== 0) {
+            temp = data[key.toLowerCase()];
+            if (!temp && temp !== 0) {
+              temp = data[key.toUpperCase()];
+            }
+          }
+          return temp;
+        }
+        return '';
+      }
+
+      return {
+        detailFormSchemas,
+        formData,
+        formSpan,
+
+        //主表
+        tableName,
+        loading,
+
+        //子表
+        hasSubTable,
+        subTabInfo,
+        subFormHeight,
+        subTableHeight,
+        refMap,
+        onTabChange,
+        subReloadKey,
+        //一对多子表
+        subDataSource,
+        getSubTableAuthPre,
+
+        //父组件调用
+        show,
+        createRootProperties,
+
+        // 扩展配置
+        onOpenReportPrint,
+        onlineExtConfigJson,
+        getSubTableForeignKeyValue,
+        showStatus,
+        ERP,
+        TAB,
+        subActiveKey,
+        rowNumber,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .tabTheme {
+    :deep(.ant-tabs-nav) {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/auto/tree/OnlineAutoTreeList.vue b/src/views/super/online/cgform/auto/tree/OnlineAutoTreeList.vue
new file mode 100644
index 0000000..e54f940
--- /dev/null
+++ b/src/views/super/online/cgform/auto/tree/OnlineAutoTreeList.vue
@@ -0,0 +1,588 @@
+<template>
+  <div class="p-2">
+
+    <!-- 加载中骨架屏 -->
+    <a-skeleton v-if="tableReloading" active />
+
+    <!-- 查询条件 -->
+    <online-query-form
+        v-show="!tableReloading"
+        ref="onlineQueryFormOuter"
+        :id="ID"
+        :queryBtnCfg="getQueryButtonCfg"
+        :resetBtnCfg="getResetButtonCfg"
+        @search="queryWithCondition"
+        @loaded="onQueryFormLoaded"
+    />
+
+    <!-- 列表-树形列表前五个配置不一样【树】 -->
+    <BasicTable
+      v-if="!tableReloading"
+      ref="onlineTreeTableRef"
+      :isTreeTable="true"
+      :expandedRowKeys="expandedRowKeys"
+      @expandedRowsChange="handleExpandedRowsChange"
+      @expand="handleExpand"
+      rowKey="jeecg_row_key"
+      :canResize="true"
+      :bordered="true"
+      :showIndexColumn="false"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      :rowSelection="rowSelection"
+      :actionColumn="actionColumn"
+      :showTableSetting="true"
+      :clickToRowSelect="false"
+      :scroll="tableScroll"
+      @table-redo="reload"
+      :class="{ 'j-table-force-nowrap': enableScrollBar }"
+      @change="handleChangeInTable"
+    >
+      <template #tableTitle>
+        <a-button
+            v-if="buttonSwitch.add && cgBIBtnMap['add'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['add'].buttonIcon"
+            @click="handleAdd"
+        >
+          <span>{{cgBIBtnMap['add'].buttonName}}</span>
+        </a-button>
+<!--    <a-button-->
+<!--        v-if="buttonSwitch.import && cgBIBtnMap['import'].enabled"-->
+<!--        type="primary"-->
+<!--        :preIcon="cgBIBtnMap['import'].buttonIcon"-->
+<!--        @click="onImportExcel"-->
+<!--    >-->
+<!--        <span>{{cgBIBtnMap['import'].buttonName}}</span>-->
+<!--      </a-button>-->
+        <a-button
+            v-if="buttonSwitch.export && cgBIBtnMap['export'].enabled"
+            type="primary"
+            :preIcon="cgBIBtnMap['export'].buttonIcon"
+            @click="onExportExcel"
+        >
+          <span>{{cgBIBtnMap['export'].buttonName}}</span>
+        </a-button>
+
+        <!-- 自定义按钮 -->
+        <template v-if="cgTopButtonList && cgTopButtonList.length > 0" v-for="(item, index) in cgTopButtonList">
+          <a-button
+            v-if="item.optType == 'js'"
+            :key="'cgbtn' + index"
+            @click="cgButtonJsHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+          <a-button
+            v-else-if="item.optType == 'action'"
+            :key="'cgbtn' + index"
+            @click="cgButtonActionHandler(item.buttonCode)"
+            type="primary"
+            :preIcon="item.buttonIcon ? 'ant-design:' + item.buttonIcon : ''"
+          >
+            {{ item.buttonName }}
+          </a-button>
+        </template>
+
+        <a-button
+            v-show="selectedKeys.length > 0"
+            v-if="buttonSwitch.batch_delete && cgBIBtnMap['batch_delete'].enabled"
+            :preIcon="cgBIBtnMap['batch_delete'].buttonIcon"
+            @click="handleBatchDelete"
+        >
+          <span>{{cgBIBtnMap['batch_delete'].buttonName}}</span>
+        </a-button>
+
+        <online-super-query
+            v-if="buttonSwitch.super_query && cgBIBtnMap['super_query'].enabled"
+            ref="superQueryButtonRef"
+            online
+            :status="superQueryStatus"
+            :queryBtnCfg="cgBIBtnMap['super_query']"
+            @search="handleSuperQuery"
+        />
+      </template>
+
+      <template #fileSlot="{ text, record, column }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadRowFile(text, record, column, ID)">
+          下载
+        </a-button>
+      </template>
+
+      <template #imgSlot="{ text }">
+        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+        <img v-else :src="getImgView(text)" alt="图片不存在" class="online-cell-image" @click="viewOnlineCellImage(text)" />
+      </template>
+
+      <template #htmlSlot="{ text, column, record }">
+        <!-- update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+        <template v-if="column.fieldHref">
+          <a v-html="text" @click="handleClickFieldHref(column.fieldHref, record)"></a>
+        </template>
+        <div v-else v-html="text"></div>
+        <!-- update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转 -->
+      </template>
+
+      <template #pcaSlot="{ text, column }">
+        <div :title="getPcaText(text, column)">{{ getPcaText(text, column) }}</div>
+      </template>
+
+      <template #dateSlot="{ text, column }">
+        <span>{{ getFormatDate(text, column) }}</span>
+      </template>
+
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getTreeDropDownActions(record)" />
+      </template>
+    </BasicTable>
+
+    <!-- 表单新增、修改弹框 -->
+    <OnlineAutoModal
+        @register="registerModal"
+        :id="ID"
+        :cgBIBtnMap="cgBIBtnMap"
+        :buttonSwitch="buttonSwitch"
+        :confirmBtnCfg="getFormConfirmButtonCfg"
+        @success="handlerFormSuccess"
+        @formConfig="handleFormConfig"
+    />
+
+    <!-- 导入 -->
+    <JImportModal @register="registerImportModal" :url="importUrl()" @ok="reload" online></JImportModal>
+
+    <!-- 跳转Href的动态组件方式 -->
+    <a-modal v-bind="hrefComponent.model" v-on="hrefComponent.on">
+      <component :is="hrefComponent.is" v-bind="hrefComponent.params" />
+    </a-modal>
+
+    <!-- 自定义弹窗 -->
+    <online-custom-modal @register="registerCustomModal" @success="reload" />
+
+    <!-- 详情弹框 -->
+    <online-detail-modal :id="ID" @register="registerDetailModal"/>
+
+    <!-- 流程图查看modal -->
+    <BpmGraphicModal @register="registerBpmModal"></BpmGraphicModal>
+    <!-- 页面loading[主要为了js增强使用] -->
+    <Loading :loading="pageLoading" :absolute="true" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import OnlineAutoModal from '../default/OnlineAutoModal.vue';
+  import OnlineDetailModal from '../default/OnlineDetailModal.vue';
+  import OnlineCustomModal from '../default/OnlineCustomModal.vue';
+  import { ref, watch } from 'vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import { useOnlineTableContext } from '../../hooks/auto/useOnlineTableContext';
+  import { useListButton } from '../../hooks/auto/useListButton';
+  import { useTableColumns } from '../../hooks/auto/useTableColumns';
+  import { useEnhance } from '../../hooks/auto/useEnhance';
+  import { defHttp } from '/@/utils/http/axios';
+  import { getRefPromise } from '../../hooks/auto/useAutoForm';
+  import OnlineQueryForm from '../comp/OnlineQueryForm.vue';
+  import OnlineSuperQuery from '../comp/superquery/SuperQuery.vue';
+  import { Tree } from "../../util/constant";
+  import { Loading } from '/@/components/Loading';
+
+  export default {
+    name: 'DefaultOnlineList',
+    components: {
+      BasicTable,
+      TableAction,
+      OnlineAutoModal,
+      JImportModal,
+      OnlineQueryForm,
+      OnlineSuperQuery,
+      OnlineCustomModal,
+      OnlineDetailModal,
+      Loading,
+    },
+    setup() {
+      const { createMessage: $message } = useMessage();
+      const onlineTreeTableRef = ref();
+
+      // 树形列表增加了最后3个配置项【树】
+      const {
+        ID,
+        onlineTableContext,
+        onlineQueryFormOuter,
+        loading,
+        reload,
+        dataSource,
+        pagination,
+        handleSpecialConfig,
+        getColumnList,
+        handleChangeInTable,
+        loadData,
+        superQueryButtonRef,
+        superQueryStatus,
+        handleSuperQuery,
+        registerCustomModal,
+        getTreeDataByResult,
+        expandedRowKeys,
+        handleExpandedRowsChange,
+        tableReloading,
+        onlineExtConfigJson,
+        handleFormConfig,
+        pageLoading,
+      } = useOnlineTableContext();
+
+      if (!ID.value) {
+        $message.warning('地址错误, 配置ID不存在!');
+        // update-begin--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+        throw new Error('地址错误, 配置ID不存在!');
+        // update-end--author:liaozhiyang---date:20230825---for：【QQYUN-6326】部分代码找不到引用
+      }
+      // 树列表特定方法调用
+      onlineTableContext.isTree(true);
+
+      // 处理增强
+      let { initCgEnhanceJs } = useEnhance(onlineTableContext);
+      // 处理列表button
+      const {
+        buttonSwitch,
+        cgLinkButtonList,
+        cgBIBtnMap,
+        getQueryButtonCfg,
+        getResetButtonCfg,
+        getFormConfirmButtonCfg,
+        cgTopButtonList,
+        importUrl,
+        registerModal,
+        handleAdd,
+        handleEdit,
+        handleBatchDelete,
+        registerImportModal,
+        onImportExcel,
+        onExportExcel,
+        cgButtonJsHandler,
+        cgButtonActionHandler,
+        cgButtonLinkHandler,
+        handleSubmitFlow,
+        getDropDownActions,
+        getActions,
+        initButtonList,
+        initButtonSwitch,
+        registerDetailModal,
+        registerBpmModal,
+      } = useListButton(onlineTableContext, onlineExtConfigJson);
+
+      // 处理table的配置
+      const {
+        columns,
+        actionColumn,
+        selectedKeys,
+        rowSelection,
+        enableScrollBar,
+        tableScroll,
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+        handleColumnResult,
+        hrefComponent,
+        viewOnlineCellImage,
+        handleClickFieldHref,
+      } = useTableColumns(onlineTableContext, onlineExtConfigJson);
+
+      watch(
+        ID,
+        () => {
+          initAutoList();
+        },
+        { immediate: true }
+      );
+
+      async function initAutoList() {
+        loading.value = true;
+        // 1.列配置信息
+        let columnResult = await getColumnList(Tree);
+        handleTableConfig(columnResult);
+        // 2.加载数据
+        await loadData();
+        loading.value = false;
+        // 3.执行js增强 setup
+        onlineTableContext.execButtonEnhance('setup');
+      }
+
+      // 将查询结果转成 table渲染需要的配置
+      function handleTableConfig(result) {
+        // js增强初始化
+        let EnhanceJS = initCgEnhanceJs(result.enhanceJs);
+        onlineTableContext['EnhanceJS'] = EnhanceJS;
+        // 自定义按钮设置
+        initButtonList(result.cgButtonList);
+        // 页面按钮显示隐藏状态设置
+        initButtonSwitch(result.hideColumns);
+        // 列配置
+        handleColumnResult(result);
+        // 表配置
+        handleSpecialConfig(result);
+        //是否有子节点列-树列表特定【树】
+        onlineTableContext['hasChildrenField'] = result.hasChildrenField;
+        onlineTableContext['pidField'] = result.pidField;
+      }
+
+      /**
+       * 查询控件 事件-执行查询
+       * @param data
+       */
+      function queryWithCondition(data, status) {
+        onlineTableContext['queryParam'] = data;
+        if (status === true) {
+          // 正常查询
+          reload({mode:'search'});
+        } else {
+          //重置查询【树】
+          searchReset();
+        }
+      }
+
+      /**
+       * 查询组件加载完成事件，获取高级查询需要的字段信息
+       */
+      async function onQueryFormLoaded(json) {
+        await getRefPromise(superQueryButtonRef)
+        superQueryButtonRef.value.init(json);
+      }
+
+      /*-------------------------------以下方法是树列表专有的，或复写或新增-【树】----------------------------*/
+
+      // 展开节点调用
+      function handleExpand(expanded, record) {
+        // 判断是否是展开状态
+        let expandedRowKeysValue = expandedRowKeys.value;
+        if (expanded) {
+          addExpandedRowKey(record.id);
+          if (record.children.length > 0 && record.children[0].isLoading === true) {
+            let hasChildrenField = onlineTableContext.hasChildrenField;
+            const { sortField, sortType } = onlineTableContext;
+            let params = Object.assign({}, { column: sortField, order: sortType });
+            params[onlineTableContext['pidField']] = record.id;
+            params[hasChildrenField] = record[hasChildrenField];
+            let url = `${onlineTableContext.onlineUrl.getTreeData}${onlineTableContext.ID}`;
+            defHttp
+              .get({ url, params }, { isTransformResponse: false })
+              .then((res) => {
+                console.log('handleExpand', res.result);
+                if (res.success) {
+                  if (Number(res.result.total) > 0) {
+                    record.children = getTreeDataByResult(res.result.records);
+                    // dataSource.value =
+                  } else {
+                    record.children = '';
+                    record.hasChildrenField = '0';
+                  }
+                } else {
+                  $message.warning(res.message);
+                }
+              })
+              .catch(() => {
+                $message.warning('加载子节点失败!');
+              });
+          }
+        } else {
+          let keyIndex = expandedRowKeysValue.indexOf(record.id);
+          if (keyIndex >= 0) {
+            expandedRowKeys.value = expandedRowKeysValue.splice(keyIndex, 1);
+          }
+        }
+      }
+
+      /**
+       * 添加展开项的id
+       * */
+      function addExpandedRowKey(key) {
+        let arr = expandedRowKeys.value;
+        if (arr && arr.indexOf(key) < 0) {
+          arr.push(key);
+        }
+        expandedRowKeys.value = arr;
+      }
+
+      // 重置查询条件
+      async function searchReset() {
+        if (onlineTableContext.isTree() === true) {
+          expandedRowKeys.value = [];
+          onlineTreeTableRef.value.collapseAll();
+        }
+        reload();
+      }
+
+      /**
+       * 树表单新增、修改完成后 列表页面的回调事件
+       */
+      function handlerFormSuccess(formData) {
+        console.log('expandedRowKeys.value', expandedRowKeys.value);
+        if (loadParent.value === true) {
+          let pid = formData[onlineTableContext.pidField];
+          if (pid) {
+            let arr = expandedRowKeys.value;
+            if (arr.indexOf(pid) < 0) {
+              arr.push(pid);
+            }
+            expandedRowKeys.value = arr;
+          }
+        }
+        reload();
+      }
+
+      /**
+       *
+       * [更多]下拉项中的 [添加子节点]
+       */
+      const addChildButton = (record) => {
+        return {
+          label: '添加下级',
+          onClick: handleAddChild.bind(null, record),
+        };
+      };
+
+      const loadParent = ref(false);
+      function handleAddChild(record) {
+        loadParent.value = true;
+        let param = {
+          [onlineTableContext.pidField]: record['id'],
+        };
+        handleAdd(param);
+      }
+
+      /**
+       *  操作列[更多下拉项]
+       */
+      function getTreeDropDownActions(record) {
+        let arr = getDropDownActions(record, {'themeTemplate': Tree});
+        arr.unshift(addChildButton(record));
+        return arr;
+      }
+
+      const that = {
+        ID,
+        // 查询区域
+        onlineQueryFormOuter,
+        queryWithCondition,
+        onQueryFormLoaded,
+        reload,
+
+        //高级查询
+        superQueryButtonRef,
+        superQueryStatus,
+        handleSuperQuery,
+
+        // table区域
+        loading,
+        columns,
+        actionColumn,
+        dataSource,
+        pagination,
+        rowSelection,
+        selectedKeys,
+        tableScroll,
+        enableScrollBar,
+        handleChangeInTable,
+
+        //按钮
+        buttonSwitch,
+        handleAdd,
+        handleEdit,
+        onImportExcel,
+        onExportExcel,
+        cgBIBtnMap,
+        getQueryButtonCfg,
+        getResetButtonCfg,
+        getFormConfirmButtonCfg,
+        cgTopButtonList,
+        cgLinkButtonList,
+        cgButtonJsHandler,
+        cgButtonActionHandler,
+        cgButtonLinkHandler,
+        handleBatchDelete,
+
+        // table-slot
+        downloadRowFile,
+        getImgView,
+        getPcaText,
+        getFormatDate,
+
+        // 操作列
+        getActions,
+        getTreeDropDownActions,
+
+        // 弹窗
+        registerModal,
+        registerCustomModal,
+        registerImportModal,
+        importUrl,
+        handleFormConfig,
+
+        //其他
+        tableReloading,
+        handleSubmitFlow,
+        hrefComponent,
+        viewOnlineCellImage,
+
+        //树特定的配置
+        onlineTreeTableRef,
+        handlerFormSuccess,
+        searchReset,
+        handleExpand,
+        expandedRowKeys,
+        handleExpandedRowsChange,
+        registerDetailModal,
+        handleClickFieldHref,
+        registerBpmModal,
+
+        pageLoading,
+      };
+      //useCompatibleOldVersion(that);
+      return that;
+    },
+
+    // 1引入了loadsh   console.log(that.simpleDateFormat(new Date().getTime(),'yyyy-MM-dd'));
+    // 2. value的问题
+    // 3. 变量位置改变后需要 重写api
+
+    // 1添加按钮的时候 预留出样式对象 然后js增强中设置样式对象
+    // 2直接设置css字符串 然后通过js document 往head里面增加css片段 全局生效
+
+    // TODO 清空高级查询
+    // TODO 积木报表打印地址
+    // const reportPrintUrl = ref('')
+  };
+</script>
+
+<style lang="less">
+  /** [表格主题样式一] 表格强制列不换行 */
+  .j-table-force-nowrap {
+    td,
+    th {
+      white-space: nowrap;
+    }
+
+    .ant-table-selection-column {
+      padding: 12px 22px !important;
+    }
+
+    /** 列自适应，弊端会导致列宽失效 */
+    &.ant-table-wrapper .ant-table-content {
+      overflow-x: auto;
+    }
+  }
+
+  .online-cell-image {
+    height: 25px !important;
+    margin: 0 auto;
+    max-width: 80px;
+    font-size: 12px;
+    font-style: italic;
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/super/online/cgform/cgform.api.ts b/src/views/super/online/cgform/cgform.api.ts
new file mode 100644
index 0000000..cdabae9
--- /dev/null
+++ b/src/views/super/online/cgform/cgform.api.ts
@@ -0,0 +1,83 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export enum Api {
+  list = '/online/cgform/head/list',
+  delete = '/online/cgform/head/delete',
+  deleteBatch = '/online/cgform/head/deleteBatch',
+  databaseSync = '/online/cgform/api/doDbSynch',
+  removeRecord = '/online/cgform/head/removeRecord',
+  copyOnline = '/online/cgform/head/copyOnline',
+  copyTable = '/online/cgform/head/copyOnlineTable',
+
+  // CgformModal页面API
+  addAll = '/online/cgform/api/addAll',
+  editAll = '/online/cgform/api/editAll',
+  queryField = '/online/cgform/field/listByHeadId',
+  queryIndex = '/online/cgform/index/listByHeadId',
+  checkOnlyTable = '/online/cgform/api/checkOnlyTable',
+  // 只修改表配置，不改字段
+  editHead = '/online/cgform/head/edit'
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+// 批量移除（移除只会删除表单配置）
+export const doBatchRemove = (idList: string[]) => doRemove(idList, 0);
+export const doSingleRemove = (pid) => defHttp.delete({ url: Api.removeRecord, params: { id: pid } },
+  { joinParamsToUrl: true });
+// 批量删除（删除会删除对应的数据库表以及子表）
+export const doBatchDelete = (idList: string[]) => doRemove(idList, 1);
+export const doSingleDelete = (pid) => defHttp.delete({ url: Api.delete, params: { id: pid } },
+  { joinParamsToUrl: true });
+
+// 执行删除操作
+function doRemove(idList: string[], flag: number) {
+  return defHttp.delete(
+    {
+      url: Api.deleteBatch,
+      params: {
+        ids: idList.join(','),
+        flag: flag,
+      },
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+// 同步数据库
+export const doDatabaseSync = (id, method) =>
+  defHttp.post({ url: `${Api.databaseSync}/${id}/${method}`, timeout: 12000, timeoutErrorMessage: '同步数据库超时，已自动刷新' });
+
+export const doCopyOnlineView = (id) => defHttp.post({ url: `${Api.copyOnline}?code=${id}` });
+
+/**
+ * 复制表
+ * @param id 要复制的表的id
+ * @param tableName 新的表名
+ * @param params 其他参数
+ */
+export const doCopyTable = (id, tableName, params?) => defHttp.get({ url: `${Api.copyTable}/${id}`, params: { tableName, ...params } });
+
+// 弹窗formApi
+export const formApi = {
+  // 查询表字段 e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+  doQueryField: (headId: string, params?) => defHttp.get({ url: Api.queryField, params: { headId, ...params } }),
+  // 查询表index配置
+  doQueryIndexes: (headId: string, params?) => defHttp.get({ url: Api.queryIndex, params: { headId, ...params } }),
+  // 新增或修改
+  doSaveOrUpdate: (params, isUpdate) => {
+    if (isUpdate) {
+      return defHttp.put({ url: Api.editAll, params });
+    } else {
+      return defHttp.post({ url: Api.addAll, params });
+    }
+  },
+  //只是修改表配置不改字段
+  editHead: (params)=>{
+    return defHttp.put({ url: Api.editHead, params });
+  }
+};
diff --git a/src/views/super/online/cgform/cgform.data.ts b/src/views/super/online/cgform/cgform.data.ts
new file mode 100644
index 0000000..4e67255
--- /dev/null
+++ b/src/views/super/online/cgform/cgform.data.ts
@@ -0,0 +1,308 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { getDictItemsByCode } from '/@/utils/dict';
+import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
+import { buildUUID } from '/@/utils/uuid';
+
+// 校验失败 flag
+export const VALIDATE_FAILED = 'validate-failed';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '表类型',
+    align: 'center',
+    sorter: true,
+    dataIndex: 'tableType',
+    width: 140,
+    customRender({ text, record }) {
+      let tableTypeDictOptions = getDictItemsByCode('cgform_table_type');
+      let tbTypeText = filterDictText(tableTypeDictOptions, text);
+      if (record.isTree === 'Y') {
+        tbTypeText += '(树)';
+      }
+      if (record.themeTemplate === 'innerTable') {
+        tbTypeText += '(内嵌)';
+      } else if (record.themeTemplate === 'erp') {
+        tbTypeText += '(ERP)';
+      } else if (record.themeTemplate === 'tab') {
+        tbTypeText += '(TAB)';
+      }
+      return tbTypeText;
+    },
+  },
+  {
+    title: '表名',
+    sorter: true,
+    align: 'center',
+    dataIndex: 'tableName',
+    width: 240,
+  },
+  {
+    title: '表描述',
+    align: 'center',
+    dataIndex: 'tableTxt',
+    width: 220,
+  },
+  {
+    title: '版本',
+    align: 'center',
+    dataIndex: 'tableVersion',
+    width: 120,
+  },
+  {
+    title: '同步状态',
+    align: 'center',
+    sorter: true,
+    dataIndex: 'isDbSynch',
+    slots: { customRender: 'dbSync' },
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    sorter: true,
+    dataIndex: 'createTime',
+    width: 240,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '表名',
+    field: 'tableName',
+    component: 'JInput',
+  },
+  {
+    label: '表类型',
+    field: 'tableType_MultiString',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'cgform_table_type',
+      mode: 'multiple',
+    },
+  },
+  {
+    label: '表描述',
+    field: 'tableTxt',
+    component: 'JInput',
+  },
+];
+
+/** 扩展JSON默认值 */
+export const ExtConfigDefaultJson = {
+  // 对接报表打印
+  reportPrintShow: 0,
+  reportPrintUrl: '',
+  joinQuery: 0,
+  modelFullscreen: 0,
+  modalMinWidth: '',
+  commentStatus: 0,
+  tableFixedAction: 1,
+  tableFixedActionType: 'right',
+  // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+  formLabelLengthShow: 0,
+  formLabelLength: null,
+  // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+  // 是否启用外部链接
+  enableExternalLink: 0,
+  externalLinkActions: 'add,edit,detail',
+};
+
+/** 获取主表的初始化数据 */
+export function useInitialData() {
+  let initialData = [
+    {
+      dbFieldName: 'id',
+      dbFieldTxt: '主键',
+      dbLength: 36,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '1',
+      dbIsNull: '0',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      isReadOnly: '1',
+      fieldShowType: 'text',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'create_by',
+      dbFieldTxt: '创建人',
+      dbLength: 50,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'text',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'create_time',
+      dbFieldTxt: '创建日期',
+      dbLength: 0,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'Datetime',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'datetime',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'update_by',
+      dbFieldTxt: '更新人',
+      dbLength: 50,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'text',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'update_time',
+      dbFieldTxt: '更新日期',
+      dbLength: 0,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'Datetime',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'datetime',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'sys_org_code',
+      dbFieldTxt: '所属部门',
+      dbLength: 64,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'text',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    // {
+    //   dbFieldName: 'sys_org_code',
+    //   dbFieldTxt: '所属部门',
+    //   dbLength: 50,
+    //   dbPointLength: 0,
+    //   dbDefaultVal: '',
+    //   dbType: 'string',
+    //   dbIsKey: false,
+    //   dbIsNull: true
+    // },
+    // {
+    //   dbFieldName: 'sys_company_code',
+    //   dbFieldTxt: '所属公司',
+    //   dbLength: 50,
+    //   dbPointLength: 0,
+    //   dbDefaultVal: '',
+    //   dbType: 'string',
+    //   dbIsKey: false,
+    //   dbIsNull: true
+    // },
+    // {
+    //   dbFieldName: 'bpm_status',
+    //   dbFieldTxt: '流程状态',
+    //   dbLength: 32,
+    //   dbPointLength: 0,
+    //   dbDefaultVal: '',
+    //   dbType: 'string',
+    //   dbIsKey: false,
+    //   dbIsNull: true
+    // }
+  ];
+  // 临时 id，不保存到数据库
+  let tempIds: string[] = [];
+  initialData.forEach((record) => {
+    record['id'] = buildUUID();
+    tempIds.push(record['id']);
+  });
+  return { initialData, tempIds };
+}
+
+/** 获取树的初始化数据 */
+export function useTreeNeedFields() {
+  return [
+    {
+      dbFieldName: 'pid',
+      dbFieldTxt: '父级节点',
+      dbLength: 32,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '1',
+      isShowList: '0',
+      fieldShowType: 'text',
+      fieldLength: '200',
+      queryMode: 'single',
+      dbIsSync: '1'
+    },
+    {
+      dbFieldName: 'has_child',
+      dbFieldTxt: '是否有子节点',
+      dbLength: 3,
+      dbPointLength: 0,
+      dbDefaultVal: '',
+      dbType: 'string',
+      dbIsKey: '0',
+      dbIsNull: '1',
+      // table2
+      isShowForm: '0',
+      isShowList: '0',
+      fieldShowType: 'list',
+      fieldLength: '200',
+      queryMode: 'single',
+      // table3
+      dictField: 'yn',
+      dbIsSync: '1'
+    },
+  ];
+}
+
+/**
+ * online 默认按钮
+ */
+export const onlineDefaultButton = [
+  { code: 'add', title: '新增', status: 0 },
+  { code: 'edit', title: '编辑', status: 0 },
+  { code: 'delete', title: '删除', status: 0 },
+  { code: 'export', title: '导出', status: 0 },
+  { code: 'import', title: '导入', status: 0 },
+  { code: 'query', title: '查询', status: 0 },
+];
diff --git a/src/views/super/online/cgform/components/AiModal.vue b/src/views/super/online/cgform/components/AiModal.vue
new file mode 100644
index 0000000..014d130
--- /dev/null
+++ b/src/views/super/online/cgform/components/AiModal.vue
@@ -0,0 +1,116 @@
+<template>
+  <BasicModal
+    :height="180"
+    :title="title"
+    :width="600"
+    :maskClosable="false"
+    v-bind="$attrs"
+    @register="registerModal"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+    <div class="aiWrap">
+      <div class="titleArea">
+        <svg
+          t="1707100353985"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="4235"
+          width="26"
+          height="26"
+        >
+          <path
+            d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z"
+            p-id="4236"
+            fill="currentColor"
+          ></path>
+        </svg>
+        <h3>创建工作表字段需要专业建议?试试AI智能推荐吧</h3>
+      </div>
+      <p class="tip">可尝试添加修饰词，如:智能家居行业的生产计划表</p>
+      <div class="content">
+        <a-input v-model:value.trim="inputValue" placeholder="请输入修饰词" /><a-button :loading="loading" type="primary" @click="handleCreate"
+          >生成表</a-button
+        >
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  const configUrl = {
+    aigc: '/online/cgform/api/aigc',
+  };
+  const emit = defineEmits(['register', 'success']);
+  const [registerModal, { closeModal }] = useModalInner();
+  const { createMessage } = useMessage();
+  const inputValue = ref('');
+  const loading = ref(false);
+  const title = ref('ai创建表');
+  
+  const handleCancel = () => {
+    closeModal();
+  };
+  const handleCreate = () => {
+    if (inputValue.value.trim() === '') {
+      createMessage.warning('请输入修饰词~');
+    } else {
+      loading.value = true;
+      defHttp
+        // timeout：超时时间 5 分钟
+        .post({ url: `${configUrl.aigc}?prompt=${inputValue.value}`, timeout: 1e3 * 60 * 5 })
+        .then((res) => {
+          loading.value = false;
+          handleCancel();
+          emit('success');
+          inputValue.value = '';
+        })
+        .catch((err) => {
+          loading.value = false;
+        });
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  html[data-theme="light"] {
+    .aiWrap {
+      h3 {color: #333;}
+      .tip { color: #666;}
+    }
+  }
+  .aiWrap {
+    padding: 30px 20px 20px;
+    .titleArea {
+      position: relative;
+      color: #ffb308;
+      width: fit-content;
+      margin:0 auto;
+      svg {
+        position: absolute;
+        left: -30px;
+        margin-right: 8px;
+      }
+    }
+    h3 {
+      text-align: center;
+      margin-bottom: 0;
+    }
+    .tip {
+      text-align: center;
+      margin-bottom: 26px;
+    }
+    .content {
+      display: flex;
+    }
+    .ant-btn {
+      margin-left: 16px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/CgformAddressModal.vue b/src/views/super/online/cgform/components/CgformAddressModal.vue
new file mode 100644
index 0000000..32f19a6
--- /dev/null
+++ b/src/views/super/online/cgform/components/CgformAddressModal.vue
@@ -0,0 +1,232 @@
+<!-- Online表单，配置地址弹窗 -->
+<template>
+  <BasicModal
+      @register="registerModal"
+      title="配置地址"
+      :width="750"
+      :canFullscreen="false"
+      :showOkBtn="false"
+      cancelText="关闭"
+  >
+    <div class="content">
+      <a-collapse v-model:activeKey="collapseKey" class="j-collapse" :bordered="false" ghost>
+        <a-collapse-panel key="def" header="配置地址" class="j-collapse-panel no-header">
+          <a-row style="margin-bottom: 8px">
+            <a-col :span="24">
+              <a-input :readOnly="true" addonBefore="数据列表地址" :value="getAddress.list">
+                <template #addonAfter>
+                  <a :href="getAddress.list" target="_blank">打开</a>
+                </template>
+              </a-input>
+            </a-col>
+          </a-row>
+
+          <a-button class="copy-sql" type="primary" size="small" @click="copySqlClick">复制菜单SQL</a-button>
+        </a-collapse-panel>
+        <a-collapse-panel v-if="enableExternalLink" key="external" header="外部链接">
+          <a-row style="margin-bottom: 8px">
+            <a-col :span="24">
+              <a-input :readOnly="true" addonBefore="外部新增地址" :value="getAddress.extLink.add">
+                <template #addonAfter>
+                  <a :href="getAddress.extLink.add + '?token=' + accessToken" target="_blank">打开</a>
+                </template>
+              </a-input>
+            </a-col>
+          </a-row>
+
+          <a-row style="margin-bottom: 8px">
+            <a-col :span="24">
+              <a-input :readOnly="true" addonBefore="外部修改地址" :value="getAddress.extLink.edit">
+                <template #addonAfter>
+                  <a @click="openPage(getAddress.extLink.edit)">打开</a>
+                </template>
+              </a-input>
+            </a-col>
+          </a-row>
+
+          <a-row style="margin-bottom: 8px">
+            <a-col :span="24">
+              <a-input :readOnly="true" addonBefore="外部详情地址" :value="getAddress.extLink.detail">
+                <template #addonAfter>
+                  <a @click="openPage(getAddress.extLink.detail)">打开</a>
+                </template>
+              </a-input>
+            </a-col>
+          </a-row>
+          <div style="text-align: right; color: red">注意：<span style="font-weight: bold">{dataId}</span> 为数据id</div>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </BasicModal>
+
+  <!-- 让用户输入 dataId 的弹窗 -->
+  <BasicModal v-model:visible="dataIdProps.visible" v-bind="dataIdBind">
+    <a-input placeholder="请输入dataId" v-model:value="dataIdProps.value"></a-input>
+    <template #footer>
+      <a :href="dataIdHref" target="_blank">
+        <a-button type="primary" @click="onClickDataId">确定</a-button>
+      </a>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {BasicModal, useModalInner} from "@/components/Modal";
+import {parseExtConfigJson} from "../util/utils";
+import {copyTextToClipboard} from "@/hooks/web/useCopyToClipboard";
+import {getToken} from "@/utils/auth";
+import {useMessage} from "@/hooks/web/useMessage";
+import {buildUUID} from "@/utils/uuid";
+const emit = defineEmits(['register'])
+const {createMessage: $message} = useMessage();
+
+const accessToken = computed(() => getToken());
+
+const collapseKey = ref(['def'])
+const enableExternalLink = ref(false);
+const themeTemplate = ref('normal');
+const isTree = ref(false);
+const model = reactive({
+  title: '',
+  content: '',
+  copyText: '',
+  copyTitle: '',
+  formId: '',
+})
+
+const [registerModal] = useModalInner((data: Recordable) => {
+  Object.assign(model, data, {
+    formId: data.record.id,
+  })
+  // 解析扩展JSON
+  const extConfigJson = parseExtConfigJson(data.record);
+
+  enableExternalLink.value = extConfigJson.enableExternalLink === 1;
+  themeTemplate.value = data.record.themeTemplate;
+  isTree.value = data.record.isTree === 'Y';
+  if (enableExternalLink.value) {
+    collapseKey.value = ['def', 'external'];
+  } else {
+    collapseKey.value = ['def'];
+  }
+});
+
+const getAddress = computed(() => {
+
+  const extLink: Recordable = {}
+  if (enableExternalLink.value) {
+    const before = `/online/cgform/share/${model.formId}`;
+    extLink.add = `${before}/add`;
+    extLink.edit = `${before}/u/{dataId}`;
+    extLink.detail = `${before}/d/{dataId}`;
+  }
+
+  return {
+    list: model.content,
+    extLink,
+  };
+});
+
+/**
+ * 复制sql
+ */
+  function copySqlClick() {
+    // update-begin--author:liaozhiyang---date:20240308---for：【QQYUN-12348】online生成的菜单sql 自动带上组件名称
+    let component_name = 'OnlineAutoList';
+    if (themeTemplate.value === 'normal') {
+      component_name = 'OnlineAutoList';
+    } else if (themeTemplate.value === 'erp') {
+      component_name = 'CgformErpList';
+    } else if (themeTemplate.value === 'innerTable') {
+      component_name = 'OnlCgformInnerTableList';
+    } else if (themeTemplate.value === 'tab') {
+      component_name = 'OnlCgformTabList';
+    }
+    if (isTree.value) {
+      component_name = 'DefaultOnlineList';
+    }
+    // update-end--author:liaozhiyang---date:20240308---for：【QQYUN-12348】online生成的菜单sql 自动带上组件名称
+    const insertMenuSql = `-- 插入菜单
+INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external)
+VALUES ('${buildUUID()}', NULL, '${model.copyTitle}', '${model.copyText}', '1', '${component_name}', NULL, 0, NULL, '1', 0.00, 0, NULL, 0, 1, 0, 0, 0, NULL, '1', 0, 0, 'admin', null, NULL, NULL, 0)
+`;
+  copyText(insertMenuSql);
+}
+
+// 复制文本到剪贴板
+function copyText(text: string) {
+  const success = copyTextToClipboard(text)
+  if (success) {
+    $message.success('复制成功！')
+  } else {
+    $message.error('复制失败！')
+  }
+  return success
+}
+
+const dataIdProps = reactive({
+  base: '',
+  value: '',
+  visible: false,
+});
+const dataIdHref = computed(() => {
+  return dataIdProps.value ? dataIdProps.base.replace(/{dataId}/, dataIdProps.value) + '?token=' + accessToken.value : undefined;
+});
+const dataIdBind = computed(() => {
+  return {
+    title: '请输入dataId',
+    minHeight: 120,
+    centered: true,
+    canFullscreen: false,
+    onOk: () => (dataIdProps.visible = false),
+    onCancel: () => (dataIdProps.visible = false),
+  };
+});
+
+function openPage(url: string) {
+  dataIdProps.base = url;
+  dataIdProps.value = '';
+  dataIdProps.visible = true;
+}
+
+function onClickDataId() {
+  if (!dataIdProps.value) {
+    $message.warn('请输入dataId');
+    return
+  }
+  dataIdProps.visible = false;
+}
+
+</script>
+
+<style scoped lang="less">
+.j-collapse {
+  //background: red;
+  :deep(.ant-collapse-header) {
+    padding-left: 0;
+  }
+
+  :deep(.ant-collapse-content-box) {
+    padding: 0;
+  }
+
+  .j-collapse-panel {
+    &.no-header {
+      :deep(.ant-collapse-header) {
+        display: none;
+      }
+    }
+  }
+
+}
+
+.content {
+  padding: 20px;
+}
+
+.copy-sql {
+  float: right;
+  margin-top: 6px;
+}
+</style>
diff --git a/src/views/super/online/cgform/components/CgformFieldItem.vue b/src/views/super/online/cgform/components/CgformFieldItem.vue
new file mode 100644
index 0000000..3c06369
--- /dev/null
+++ b/src/views/super/online/cgform/components/CgformFieldItem.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="cgf-item">
+    <label class="cgf-label">
+      <span v-if="required" class="cgf-required">*</span>{{ label }}
+    </label>
+    <a-input
+      v-if="type === 'input'"
+      :value="modelValue"
+      :disabled="disabled"
+      :allow-clear="allowClear"
+      :status="status"
+      style="width: 100%"
+      @update:value="emit('update:modelValue', $event)"
+      @change="emit('change', $event)"
+    />
+    <a-input-number
+      v-else-if="type === 'input-number'"
+      :value="modelValue"
+      :disabled="disabled"
+      style="width: 100%"
+      @update:value="emit('update:modelValue', $event)"
+      @change="emit('change', $event)"
+    />
+    <a-select
+      v-else-if="type === 'select'"
+      :value="modelValue"
+      :options="options"
+      :allow-clear="false"
+      :disabled="disabled"
+      :status="status"
+      style="width: 100%"
+      @update:value="emit('update:modelValue', $event)"
+      @change="emit('change', $event)"
+    />
+    <a-radio-group
+      v-else-if="type === 'radio-group'"
+      :value="modelValue"
+      :options="options"
+      :disabled="disabled"
+      @update:value="emit('update:modelValue', $event)"
+      @change="emit('change', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps<{
+    label: string;
+    type: 'input' | 'select' | 'input-number' | 'radio-group';
+    modelValue?: any;
+    required?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    options?: { label: string; value: any }[];
+    status?: '' | 'error';
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: any): void;
+    (e: 'change', value: any): void;
+  }>();
+</script>
diff --git a/src/views/super/online/cgform/components/CgformHeadForm.vue b/src/views/super/online/cgform/components/CgformHeadForm.vue
new file mode 100644
index 0000000..94eb8e9
--- /dev/null
+++ b/src/views/super/online/cgform/components/CgformHeadForm.vue
@@ -0,0 +1,533 @@
+<template>
+  <div class="cgform-fields" :class="{ 'cgform-fields--inline': isInlineLayout }">
+    <CgformFieldItem
+      v-for="item in baseFields"
+      :key="item.field"
+      :label="item.label"
+      :type="item.type"
+      :model-value="(formModel as Recordable)[item.field]"
+      :required="item.required"
+      :disabled="item.disabled"
+      :allow-clear="item.allowClear"
+      :options="item.options"
+      :status="item.status"
+      @update:model-value="(formModel as Recordable)[item.field] = $event"
+      @change="item.onChange?.($event)"
+    />
+    <template v-if="[1, 2].includes(formModel.tableType)">
+      <!-- 非附表条件字段（单表/主表） -->
+      <CgformFieldItem
+        v-for="item in conditionalFields"
+        v-show="item.show !== false"
+        :key="item.field"
+        :label="item.label"
+        :type="item.type"
+        :model-value="(formModel as Recordable)[item.field]"
+        :required="item.required"
+        :disabled="item.disabled"
+        :allow-clear="item.allowClear"
+        :options="item.options"
+        :status="item.status"
+        @update:model-value="(formModel as Recordable)[item.field] = $event"
+        @change="item.onChange?.($event)"
+      />
+      <!-- 非附表类型按钮 -->
+      <div v-if="formModel.tableType !== 3" class="cgf-item cgf-item--buttons">
+        <a-button preIcon="ant-design:setting" @click="onOpenExtConfig">扩展配置</a-button>
+        <a-button type="link" :preIcon="expandStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" @click="expandStatus = !expandStatus">{{
+          expandStatus ? '收起' : '展开'
+        }}</a-button>
+      </div>
+    </template>
+    <template v-if="formModel.tableType === 3">
+      <!-- 附表类型展开：row2=显示复选框+表单风格+关联类型+序号 -->
+      <template v-if="expandStatus">
+        <CgformFieldItem
+          v-for="item in preGroupFields"
+          :key="item.field"
+          :label="item.label"
+          :type="item.type"
+          :model-value="(formModel as Recordable)[item.field]"
+          :options="item.options"
+          @update:model-value="(formModel as Recordable)[item.field] = $event"
+        />
+        <div class="cgf-item cgf-item--group">
+          <div class="cgf-item--group-left">
+            <a-radio-group v-model:value="formModel.relationType" :options="relationTypeOptions" @change="onRelationTypeChange" />
+            <label class="cgf-label cgf-label--inline">序号</label>
+            <a-input-number v-model:value="formModel.tabOrderNum" />
+          </div>
+          <div class="cgf-item--group-right">
+            <a-button preIcon="ant-design:setting" :disabled="formModel.relationType === 1" @click="onOpenExtConfig">扩展配置</a-button>
+            <a-button type="link" preIcon="ant-design:up-outlined" @click="expandStatus = !expandStatus">收起</a-button>
+          </div>
+        </div>
+        <CgformFieldItem
+          v-for="item in postGroupFields"
+          :key="item.field"
+          :label="item.label"
+          :type="item.type"
+          :model-value="(formModel as Recordable)[item.field]"
+          :options="item.options"
+          @update:model-value="(formModel as Recordable)[item.field] = $event"
+        />
+      </template>
+      <!-- 附表类型收起：col1+col2空格 + col3全部内容-->
+      <template v-else>
+        <div class="cgf-spacer"></div>
+        <div class="cgf-spacer"></div>
+        <div class="cgf-item cgf-item--group">
+          <div class="cgf-item--group-left">
+            <a-radio-group v-model:value="formModel.relationType" :options="relationTypeOptions" @change="onRelationTypeChange" />
+            <label class="cgf-label cgf-label--inline">序号</label>
+            <a-input-number v-model:value="formModel.tabOrderNum" style="width: 50px" />
+          </div>
+          <div class="cgf-item--group-right">
+            <a-button preIcon="ant-design:setting" :disabled="formModel.relationType === 1" @click="onOpenExtConfig">扩展配置</a-button>
+            <a-button type="link" preIcon="ant-design:down-outlined" @click="expandStatus = !expandStatus">展开</a-button>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+  <ExtendConfigModal @register="registerExtendConfigModal" :parentForm="formActionForModal" @ok="onExtConfigOk" />
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref, toRaw } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { duplicateValidate } from '/@/utils/helper/validator';
+  import ExtendConfigModal from './ExtendConfigModal.vue';
+  import CgformFieldItem from './CgformFieldItem.vue';
+  import { ExtConfigDefaultJson } from '../cgform.data';
+  import { parseExtConfigJson } from '../util/utils';
+
+  interface FieldItem {
+    label: string;
+    field: string;
+    type: 'input' | 'select' | 'input-number' | 'radio-group';
+    required?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    options?: { label: string; value: any }[];
+    onChange?: (value: any) => void;
+    show?: boolean;
+    status?: '' | 'error';
+  }
+
+  const fieldErrors = reactive<Record<string, '' | 'error'>>({
+    tableName: '',
+    tableTxt: '',
+    treeFieldname: '',
+  });
+
+  const emit = defineEmits<{
+    (e: 'tableTypeChange', value: number): void;
+    (e: 'relationTypeChange', value: number): void;
+    (e: 'isTreeChange', value: string): void;
+    (e: 'extConfigSaved', values: Recordable): void;
+  }>();
+
+  const { createMessage: $message } = useMessage();
+
+  const expandStatus = ref(false);
+
+  const tableTypeOptions = [
+    { label: '单表', value: 1 },
+    { label: '主表', value: 2 },
+    { label: '附表', value: 3 },
+  ];
+  const relationTypeOptions = [
+    { label: '一对多', value: 0 },
+    { label: '一对一', value: 1 },
+  ];
+  const isCheckboxOptions = [
+    { label: '显示', value: 'Y' },
+    { label: '不显示', value: 'N' },
+  ];
+  const themeTemplateOptions = [
+    { label: '默认主题', value: 'normal' },
+    { label: 'ERP主题(一对多)', value: 'erp' },
+    { label: '内嵌子表主题(一对多)', value: 'innerTable' },
+    { label: 'TAB主题(一对多)', value: 'tab' },
+  ];
+  const formTemplateOptions = [
+    { label: '一列', value: '1' },
+    { label: '两列', value: '2' },
+    { label: '三列', value: '3' },
+    { label: '四列', value: '4' },
+  ];
+  const scrollOptions = [
+    { label: '有', value: 1 },
+    { label: '无', value: 0 },
+  ];
+  const isPageOptions = [
+    { label: '显示', value: 'Y' },
+    { label: '不显示', value: 'N' },
+  ];
+  const isTreeOptions = [
+    { label: '是', value: 'Y' },
+    { label: '否', value: 'N' },
+  ];
+
+  const DEFAULT_FORM_MODEL = {
+    id: '',
+    tableVersion: null as any,
+    tableName: '',
+    tableTxt: '',
+    tableType: 1,
+    relationType: 0,
+    tabOrderNum: null as any,
+    idSequence: '',
+    isCheckbox: 'Y',
+    themeTemplate: 'normal',
+    formTemplate: '1',
+    scroll: 1,
+    isPage: 'Y',
+    isTree: 'N',
+    treeParentIdField: '',
+    treeIdField: '',
+    treeFieldname: '',
+    subTableStr: '',
+    extConfigJson: '',
+  };
+  const formModel = reactive({ ...DEFAULT_FORM_MODEL });
+
+  function onTableTypeChange(value: number) {
+    if (value === 1) {
+      formModel.themeTemplate = 'normal';
+    } else if (value === 3) {
+      formModel.isTree = 'N';
+      emit('isTreeChange', 'N');
+    }
+    emit('tableTypeChange', value);
+  }
+
+  function onRelationTypeChange(e: any) {
+    const value = e?.target?.value ?? e;
+    emit('relationTypeChange', value);
+  }
+
+  function onIsTreeChange(value: string) {
+    emit('isTreeChange', value);
+  }
+
+  let _tableNameLastMsg = '';
+  function validateTableNameSync(val: string) {
+    let msg = '';
+    if (!val) {
+      fieldErrors.tableName = 'error';
+    } else if (/[\u4E00-\u9FA5]/g.test(val)) {
+      fieldErrors.tableName = 'error';
+      msg = '表名不允许输入中文';
+    } else if (val.length > 50) {
+      fieldErrors.tableName = 'error';
+      msg = '表名最长50个字符';
+    } else {
+      fieldErrors.tableName = '';
+    }
+    if (msg && msg !== _tableNameLastMsg) {
+      $message.warning(msg);
+    }
+    _tableNameLastMsg = msg;
+  }
+
+  function validateTableTxtSync(val: string) {
+    fieldErrors.tableTxt = !val || val.length > 200 ? 'error' : '';
+  }
+
+  // 基础字段（始终显示）
+  const baseFields = computed<FieldItem[]>(() => [
+    {
+      label: '表名',
+      field: 'tableName',
+      type: 'input',
+      required: true,
+      disabled: !!(formModel.tableVersion && formModel.tableVersion != 1),
+      allowClear: true,
+      status: fieldErrors.tableName,
+      onChange: (e: any) => validateTableNameSync(e?.target?.value ?? e ?? ''),
+    },
+    {
+      label: '表描述',
+      field: 'tableTxt',
+      type: 'input',
+      required: true,
+      allowClear: true,
+      status: fieldErrors.tableTxt,
+      onChange: (e: any) => validateTableTxtSync(e?.target?.value ?? e ?? ''),
+    },
+    {
+      label: '表类型',
+      field: 'tableType',
+      type: 'select',
+      options: tableTypeOptions,
+      onChange: onTableTypeChange,
+    },
+  ]);
+
+  // 附表字段
+  const subTableField: FieldItem = {
+    label: '附表',
+    field: 'subTableStr',
+    type: 'input',
+    disabled: true,
+  };
+
+  // 关联类型字段
+  // const relationTypeField: FieldItem = {
+  //   label: '关联类型',
+  //   field: 'relationType',
+  //   type: 'radio-group',
+  //   options: relationTypeOptions,
+  //   onChange: onRelationTypeChange,
+  // };
+
+  // 序号字段
+  // const tabOrderNumField: FieldItem = {
+  //   label: '序号',
+  //   field: 'tabOrderNum',
+  //   type: 'input-number',
+  // };
+
+  // 展开后的通用字段
+  const expandCommonFields = computed<FieldItem[]>(() => [
+    { label: '复选框', field: 'isCheckbox', type: 'select', options: isCheckboxOptions },
+    { label: '表单风格', field: 'formTemplate', type: 'select', options: formTemplateOptions },
+    { label: '滚动条', field: 'scroll', type: 'select', options: scrollOptions },
+    { label: '分页', field: 'isPage', type: 'select', options: isPageOptions },
+  ]);
+
+  // 条件字段，根据 tableType 和 expandStatus 动态变化
+  const conditionalFields = computed<FieldItem[]>(() => {
+    const { tableType, isTree } = formModel;
+    const expanded = expandStatus.value;
+
+    // 附表 (tableType === 3)：完全由模板中的 preGroupFields/postGroupFields 处理
+    if (tableType === 3) return [];
+
+    // 主表 (tableType === 2)
+    if (tableType === 2) {
+      const fields: FieldItem[] = [{ ...subTableField, show: !!formModel.subTableStr }];
+      if (expanded) {
+        fields.push(...expandCommonFields.value, { label: '主题模板', field: 'themeTemplate', type: 'select', options: themeTemplateOptions });
+      }
+      return fields;
+    }
+
+    // 单表 (tableType === 1)
+    if (expanded) {
+      const fields: FieldItem[] = [
+        ...expandCommonFields.value,
+        { label: '是否树', field: 'isTree', type: 'select', options: isTreeOptions, onChange: onIsTreeChange },
+      ];
+      if (isTree === 'Y') {
+        fields.push(
+          { label: '树父ID', field: 'treeParentIdField', type: 'input' },
+          { label: '树表单列', field: 'treeFieldname', type: 'input', required: true, status: fieldErrors.treeFieldname }
+        );
+      }
+      return fields;
+    }
+
+    return [];
+  });
+
+  // 附表展开：关联类型+序号 group 前面的字段（isCheckbox, formTemplate → row2 col1-2）
+  const preGroupFields = computed<FieldItem[]>(() => {
+    if (formModel.tableType !== 3 || !expandStatus.value) return [];
+    return expandCommonFields.value.slice(0, 2);
+  });
+
+  // 附表展开：关联类型+序号 group 后面的字段（scroll, isPage → row3 col1-2）
+  const postGroupFields = computed<FieldItem[]>(() => {
+    if (formModel.tableType !== 3 || !expandStatus.value) return [];
+    return expandCommonFields.value.slice(2);
+  });
+
+  // 按钮是否与基础字段在同一行（无条件字段时）
+  const isInlineLayout = computed(() => {
+    if (expandStatus.value) return false;
+    if (formModel.tableType === 1) return true;
+    if (formModel.tableType === 2 && !formModel.subTableStr) return true;
+    return false;
+  });
+
+  function resetFields() {
+    Object.assign(formModel, DEFAULT_FORM_MODEL);
+    fieldErrors.tableName = '';
+    fieldErrors.tableTxt = '';
+  }
+
+  function setFieldsValue(values: Recordable) {
+    Object.assign(formModel, values);
+  }
+
+  function getFieldsValue(fields?: string[]) {
+    if (fields) {
+      return Object.fromEntries(fields.map((f) => [f, (formModel as Recordable)[f]]));
+    }
+    return { ...toRaw(formModel) };
+  }
+
+  async function validate() {
+    fieldErrors.tableName = '';
+    fieldErrors.tableTxt = '';
+    fieldErrors.treeFieldname = '';
+    if (!formModel.tableName) {
+      fieldErrors.tableName = 'error';
+      return Promise.reject('请输入表名');
+    }
+    if (/[\u4E00-\u9FA5]/g.test(formModel.tableName)) {
+      fieldErrors.tableName = 'error';
+      return Promise.reject('表名不允许输入中文');
+    }
+    if (formModel.tableName.length > 50) {
+      fieldErrors.tableName = 'error';
+      return Promise.reject('表名最长50个字符');
+    }
+    try {
+      await duplicateValidate('onl_cgform_head', 'table_name', formModel.tableName, formModel.id);
+    } catch (e: any) {
+      fieldErrors.tableName = 'error';
+      return Promise.reject('表名已存在');
+    }
+    if (!formModel.tableTxt) {
+      fieldErrors.tableTxt = 'error';
+      return Promise.reject('请输入表描述');
+    }
+    if (formModel.tableTxt.length > 200) {
+      fieldErrors.tableTxt = 'error';
+      return Promise.reject('表描述最长200个字');
+    }
+    if (formModel.isTree === 'Y' && formModel.tableType === 1 && !formModel.treeFieldname) {
+      fieldErrors.treeFieldname = 'error';
+      expandStatus.value = true;
+      return Promise.reject('请填写树表单列');
+    }
+    if (extConfigJson.joinQuery && ['erp'].includes(formModel.themeTemplate)) {
+      return Promise.reject('ERP不支持联合查询功能');
+    }
+    if (extConfigJson.joinQuery && ['innerTable'].includes(formModel.themeTemplate)) {
+      return Promise.reject('内嵌子表不支持联合查询功能');
+    }
+    return getFieldsValue();
+  }
+
+  // 扩展配置 JSON
+  let extConfigJson: Recordable = {};
+  const [registerExtendConfigModal, extendConfigModal] = useModal();
+
+  // ExtendConfigModal 需要的 parentForm 接口
+  const formActionForModal = {
+    getFieldsValue,
+    setFieldsValue,
+    validateFields: (_fields?: string[]) => Promise.resolve(),
+  };
+
+  function initialExtConfigJson(record: Recordable) {
+    const parseJSON = parseExtConfigJson(record);
+    extConfigJson = Object.assign({}, ExtConfigDefaultJson, parseJSON, {
+      isDesForm: record.isDesForm || 'N',
+      desFormCode: record.desFormCode || '',
+    });
+  }
+
+  function getExtConfigJson() {
+    return extConfigJson;
+  }
+
+  function onOpenExtConfig() {
+    extendConfigModal.openModal(true, { extConfigJson });
+  }
+
+  async function onExtConfigOk(values: Recordable) {
+    extConfigJson = values;
+    emit('extConfigSaved', values);
+  }
+
+  defineExpose({ formModel, resetFields, setFieldsValue, getFieldsValue, validate, initialExtConfigJson, getExtConfigJson });
+</script>
+
+<style lang="less" scoped>
+  .cgform-fields {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 5px;
+    :deep(.cgf-item) {
+      width: 33.333%;
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      .cgf-label {
+        flex-shrink: 0;
+        width: 75px;
+        text-align: right;
+        padding-right: 8px;
+        font-size: 14px;
+        .cgf-required {
+          color: #ff4d4f;
+          margin-right: 2px;
+        }
+      }
+    }
+    .cgf-item--buttons {
+      flex: 1;
+      min-width: 33.333%;
+      justify-content: flex-end;
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      // 附表收起时固定宽度（不 flex-grow）
+      &-fixed {
+        flex: 0 0 33.333%;
+        min-width: unset;
+      }
+    }
+    .cgf-spacer {
+      width: 33.333%;
+    }
+    .cgf-item--group {
+      width: 33.333%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 4px 8px;
+      padding-left: 34px;
+      .cgf-label {
+        width: 50px;
+      }
+      .cgf-item--group-left {
+        display: flex;
+        align-items: center;
+      }
+      .cgf-item--group-right {
+        display: flex;
+        align-items: center;
+      }
+    }
+    // 无条件字段时，按钮与基础字段同行（单表收起 / 主表无附表收起）
+    &--inline {
+      flex-wrap: nowrap;
+      :deep(.cgf-item) {
+        flex: 1 0 0;
+        width: auto;
+        min-width: 0;
+      }
+      .cgf-item--buttons {
+        flex: 0 0 auto;
+        min-width: unset;
+      }
+    }
+  }
+  :deep(.ant-btn) {
+    &.ant-btn-link {
+      margin-right: -5px;
+      padding-right: 5px;
+    }
+    & > .anticon + span {
+      margin-left: 4px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/CgformModal.vue b/src/views/super/online/cgform/components/CgformModal.vue
new file mode 100644
index 0000000..47af990
--- /dev/null
+++ b/src/views/super/online/cgform/components/CgformModal.vue
@@ -0,0 +1,894 @@
+<template>
+  <BasicModal
+    ref="modalRef"
+    :title="title"
+    :width="1200"
+    :maskClosable="false"
+    :defaultFullscreen="true"
+    :confirmLoading="confirmLoading"
+    v-bind="$attrs"
+    wrapClassName="onlForm-config-modal"
+    @cancel="onCancel"
+    @register="registerModal"
+  >
+    <div ref="onlFormContentRef" class="onlForm-content">
+      <a-spin ref="spinRef" wrapperClassName="pl-2 pr-2" :spinning="confirmLoading">
+        <div ref="onlFormContentFormRef" class="onlForm-content-form">
+          <CgformHeadForm
+            ref="cgformHeadFormRef"
+            @tableTypeChange="onTableTypeChange"
+            @relationTypeChange="onRelationTypeChange"
+            @isTreeChange="onIsTreeChange"
+            @extConfigSaved="onExtConfigSaved"
+          />
+        </div>
+        <a-spin :spinning="tableLoading || hideTabs">
+          <a-tabs v-show="!hideTabs" v-model:activeKey="activeKey" @change="onTabsChange">
+            <a-tab-pane tab="数据库属性" key="dbTable" forceRender>
+              <DBAttributeTable
+                ref="dbTable"
+                :isUpdate="isUpdate"
+                :tableName="oldTableName"
+                :actionButton="actionButton"
+                @added="onTableAdded"
+                @removed="onTableRemoved"
+                @dragged="onTableDragged"
+                @inserted="onTableInserted"
+                @syncDbType="onTableSyncDbType"
+                @syncDbIsPersist="onTableSyncDbIsPersist"
+                @syncDbIsNull="onTableSyncDbIsNull"
+              />
+            </a-tab-pane>
+            <a-tab-pane tab="页面属性" key="pageTable" forceRender>
+              <PageAttributeTable ref="pageTable" />
+            </a-tab-pane>
+            <a-tab-pane tab="校验字段" key="checkTable" forceRender>
+              <CheckDictTable ref="checkTable" />
+            </a-tab-pane>
+            <a-tab-pane tab="外键" key="fkTable" forceRender>
+              <ForeignKeyTable ref="fkTable" :actionButton="actionButton" />
+            </a-tab-pane>
+            <a-tab-pane tab="索引" key="idxTable" forceRender>
+              <IndexTable ref="idxTable" :actionButton="actionButton" />
+            </a-tab-pane>
+            <a-tab-pane key="queryTable" forceRender>
+              <template #tab>
+                <span>
+                  个性查询配置
+                  <a-tooltip>
+                    <template #title>允许自定义，查询表单字段控件类型！</template>
+                    <Icon icon="bx:help-circle"></Icon>
+                  </a-tooltip>
+                </span>
+              </template>
+              <QueryTable ref="queryTable" @query="onTableQuery" />
+            </a-tab-pane>
+          </a-tabs>
+        </a-spin>
+      </a-spin>
+    </div>
+
+    <template #footer>
+      <div class="footer-area">
+        <div class="rightArea">
+          <a-button @click="onCancel">关闭</a-button>
+          <a-button type="primary" :loading="confirmLoading" preIcon="ant-design:save" @click="onSubmit">保存</a-button>
+        </div>
+        <div class="leftArea">
+          <div v-if="aiTestMode && !isUpdate">
+            <a-select
+              v-model:value="aiTestTable"
+              placeholder="请选择测试的数据模型"
+              :getPopupContainer="(n) => n?.parentElement"
+              style="width: 300px; margin: 0 10px 0 0;text-align: left;"
+            >
+              <template v-for="(item, index) in aiTableList" :key="index">
+                <a-select-option :value="item.name">{{ item.title + '（' + item.name + '）' }}</a-select-option>
+              </template>
+            </a-select>
+            <a-button type="primary" ghost @click="initVirtualData">生成数据&gt;&gt;</a-button>
+          </div>
+          <div v-if="isUpdate" class="positioning-area">
+            <a-input v-model:value="positioning" placeholder="请输入字段名称或字段备注" allowClear @pressEnter="handlePositioning"></a-input>
+            <a-button type="primary" ghost @click="handlePositioning">定位</a-button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, computed, nextTick, provide, defineComponent, toRaw } from 'vue';
+  import { useResizeObserver } from '@vueuse/core';
+  import { Icon } from '/@/components/Icon';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import DBAttributeTable from './tables/DBAttributeTable.vue';
+  import CgformHeadForm from './CgformHeadForm.vue';
+  import PageAttributeTable from './tables/PageAttributeTable.vue';
+  import CheckDictTable from './tables/CheckDictTable.vue';
+  import ForeignKeyTable from './tables/ForeignKeyTable.vue';
+  import IndexTable from './tables/IndexTable.vue';
+  import QueryTable from './tables/QueryTable.vue';
+  import { CgformModal } from '../types';
+  import { useInitialData, VALIDATE_FAILED, useTreeNeedFields } from '../cgform.data';
+  import { formApi } from '../cgform.api';
+  import { simpleDebounce } from '/@/utils/common/compUtils';
+  import { useOnlineTest } from '../hooks/aitest/useOnlineTest';
+  import { buildUUID } from '/@/utils/uuid';
+  import { sleep } from '/@/utils';
+
+  export default defineComponent({
+    name: 'CgformModal',
+    components: {
+      BasicModal,
+      CgformHeadForm,
+      DBAttributeTable,
+      PageAttributeTable,
+      CheckDictTable,
+      ForeignKeyTable,
+      IndexTable,
+      QueryTable,
+      Icon,
+    },
+    emits: ['success', 'register'],
+    props: {
+      actionButton: {
+        type: Boolean,
+        default: true,
+        required: false,
+      },
+    },
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+      const modalRef = ref();
+      const spinRef = ref();
+      // 是否是更新模式
+      const isUpdate = ref(false);
+      // 编辑时存储的值
+      let model: Recordable = {};
+      const title = computed(() => (isUpdate.value ? '编辑' : '新增'));
+      // 当前是否正在加载中
+      const confirmLoading = ref(true);
+      // 表格区域正在加载中
+      const tableLoading = ref(false);
+      // tabs当前活动的页面
+      const activeKey = ref('dbTable');
+      // 解决打开弹窗速度缓慢的问题
+      const hideTabs = ref(true);
+      // 标记是否已经初始化过（v-show模式下组件不会被销毁）
+      let tabsInitialized = false;
+      // table refs
+      const tables: CgformModal.TablesRef = {
+        dbTable: ref<CgformModal.DBAttributeTableType>(),
+        pageTable: ref<CgformModal.PageAttributeTableType>(),
+        checkTable: ref<CgformModal.CheckDictTableType>(),
+        fkTable: ref<CgformModal.ForeignKeyTableType>(),
+        idxTable: ref<CgformModal.IndexTableType>(),
+        queryTable: ref<CgformModal.QueryTableType>(),
+      };
+      // 当前是否是全屏状态
+      const fullScreenRef = computed(() => modalRef.value?.fullScreenRef ?? false);
+      provide('tables', tables);
+      provide('fullScreenRef', fullScreenRef);
+      const positioning = ref('');
+      const onlFormContentRef = ref<HTMLElement>();
+      const onlFormContentFormRef = ref<HTMLElement>();
+      /** `.onlForm-content-form` 当前高度（随布局/展开收起等变化） */
+      const onlFormContentFormHeight = ref(0);
+      const vxetableHeight = ref(0);
+      provide('vxetableHeight', vxetableHeight);
+      useResizeObserver(onlFormContentFormRef, (entries) => {
+        const entry = entries[0];
+        if (entry) {
+          onlFormContentFormHeight.value = entry.contentRect.height;
+          vxetableHeight.value = onlFormContentRef.value!.offsetHeight - onlFormContentFormHeight.value - 128;
+        }
+      });
+
+      // 头部表单子组件 ref
+      const cgformHeadFormRef = ref<InstanceType<typeof CgformHeadForm>>();
+      // 代理 formAction 供 ExtendConfigModal 和 useOnlineTest 使用
+      const formAction = {
+        getFieldsValue: (fields?: string[]) => cgformHeadFormRef.value?.getFieldsValue(fields) ?? {},
+        setFieldsValue: (values: Recordable) => cgformHeadFormRef.value?.setFieldsValue(values),
+        validateFields: (_fields?: string[]) => Promise.resolve(),
+        resetFields: () => cgformHeadFormRef.value?.resetFields(),
+      };
+      // 表单赋值
+      const [registerModal, { closeModal }] = useModalInner((data) => {
+        isUpdate.value = data?.isUpdate ?? false;
+        if (isUpdate.value) {
+          edit(data?.record);
+        } else {
+          add();
+        }
+      });
+      // 旧表名
+      const oldTableName = ref('');
+      // 立即同步所有 table（防抖版）
+      const syncAllTableNowDebounce = simpleDebounce(() => syncAllTableNowPromise(), 150);
+      // 临时数据ID，不提交到后台
+      let fieldTempIds: string[] = [];
+      // 是否显示附表字段
+      let showSubTableStr = false;
+      // 是否已添加树表单字段
+      let treeFieldAdded = false;
+      // 已添加的树表单字段ID
+      let treeFieldIds: string[] = [];
+      let interval: any = null;
+
+      // hook OnlineTest
+      const { aiTestMode, aiTestTable, aiTableList, initVirtualData, tableJsonGetHelper, refreshCacheTableName } = useOnlineTest(
+        {
+          oldTableName,
+          tables,
+        },
+        {
+          initialAllShowItem,
+          setAllTableData,
+        },
+        formAction
+      );
+
+      function add() {
+        edit({});
+      }
+
+      async function edit(record) {
+        confirmLoading.value = false;
+        activeKey.value = 'dbTable';
+        // 重置表单
+        cgformHeadFormRef.value?.resetFields();
+        model = Object.assign({}, record);
+        initialAllShowItem(model);
+        // 重置定位内容
+        positioning.value = '';
+        
+        // 便于 ai test data 复制
+        tableJsonGetHelper(model);
+
+        cgformHeadFormRef.value?.initialExtConfigJson(model);
+        cgformHeadFormRef.value?.setFieldsValue(model);
+        oldTableName.value = model.tableName;
+        // update-begin--author:liaozhiyang---date:20260330---for:【QQYUN-13610】解决online打开慢的问题
+        // 解决打开弹窗速度缓慢的问题（第一次延迟显示，后续直接显示）
+        if (tabsInitialized) {
+          hideTabs.value = false;
+          // v-show模式下组件不会被销毁，需要先清空所有表的旧数据
+          clearAllTableData();
+        } else {
+          sleep(1, () => {
+            hideTabs.value = false;
+            tabsInitialized = true;
+          });
+        }
+        // update-end--author:liaozhiyang---date:20260330---for:【QQYUN-13610】解决online打开慢的问题
+        // update模式，加载数据库中的数据
+        if (isUpdate.value) {
+          // update-begin--author:liaozhiyang---date:20260210---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+          await getRefPromise(tables.dbTable);
+          // update-end--author:liaozhiyang---date:20260209---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+          tables.dbTable.value?.setDataSource([]);
+          await loadFields(model.id);
+          // 加载index的数据，由于默认不可见，所以可以分开加载，提升加载效率
+          await loadIndexes(model.id);
+          // 设置子表下拉选择
+          getRefPromise(tables.pageTable).then(() => {
+            tables.pageTable.value!.changePageType(model.tableType == 3, model.relationType);
+          });
+        } else {
+          // 添加初始数据
+          let { initialData, tempIds } = useInitialData();
+          await setAllTableData(initialData, true);
+          fieldTempIds = tempIds;
+        }
+      }
+
+      // 加载表字段配置
+      async function loadFields(headId) {
+        tableLoading.value = true;
+        try {
+          let fields = await formApi.doQueryField(headId);
+          // 便于 ai test data 复制
+          console.log("online fields:", fields)
+          tableLoading.value = false;
+          await setAllTableData(fields);
+        } finally {
+          tableLoading.value = false;
+        }
+      }
+
+      // 加载表索引配置
+      async function loadIndexes(headId) {
+        let indexes = await formApi.doQueryIndexes(headId);
+        // 便于 ai test data 复制
+        console.log("online indexs:", indexes)
+        // update-begin--author:liaozhiyang---date:20260210---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+        await getRefPromise(tables.idxTable);
+        // update-end--author:liaozhiyang---date:20260209---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+        tables.idxTable.value!.setDataSource(indexes);
+      }
+
+      function initialAllShowItem(model) {
+        treeFieldAdded = model.isTree == 'Y';
+        showSubTableStr = model.tableType === 2;
+      }
+      // update-begin--author:liaozhiyang---date:20260330---for:【QQYUN-13610】解决online打开慢的问题
+      // 清空所有表的数据（v-show模式下切换数据前调用，避免旧ID匹配报错）
+      function clearAllTableData() {
+        const { dbTable, pageTable, checkTable, fkTable, idxTable, queryTable } = tables;
+        dbTable.value?.setDataSource([]);
+        pageTable.value?.setDataSource([]);
+        checkTable.value?.setDataSource([]);
+        fkTable.value?.setDataSource([]);
+        idxTable.value?.setDataSource([]);
+        queryTable.value?.setDataSource([]);
+      }
+      // update-end--author:liaozhiyang---date:20260330---for:【QQYUN-13610】解决online打开慢的问题
+
+      // 设置除索引配置之外所有的JVxeTable的数据
+      async function setAllTableData(data: Recordable[], insert?) {
+        const { dbTable, pageTable, checkTable, fkTable, queryTable } = tables;
+        // update-begin--author:liaozhiyang---date:20260210---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+        await getRefPromise(dbTable);
+        // update-end--author:liaozhiyang---date:20260209---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+        dbTable.value!.setDataSource(data, insert);
+        // 先加载第一个tab的数据，延时加载其他tab，可以使打开速度的视觉效果更好
+        // update-begin--author:liaozhiyang---date:20260210---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+        setTimeout(async () => {
+          await Promise.all([
+            getRefPromise(pageTable),
+            getRefPromise(checkTable),
+            getRefPromise(fkTable),
+            getRefPromise(queryTable),
+          ]);
+          // update-end--author:liaozhiyang---date:20260209---for:【QQYUN-13658】Jvxetable、vxetable按需加载
+          pageTable.value!.setDataSource(data, insert);
+          checkTable.value!.setDataSource(data, insert);
+          fkTable.value!.setDataSource(data, insert);
+          queryTable.value!.setDataSource(data, insert);
+        }, 10);
+      }
+
+      /** ATab切换事件 */
+      function onTabsChange(activeKey) {
+        // 当切换了选项卡的时候只同步修改当前所能看到的table
+        if (['pageTable', 'checkTable', 'fkTable', 'idxTable', 'queryTable'].indexOf(activeKey) !== -1) {
+          const dbTable = tables.dbTable;
+          const table = tables[activeKey];
+          dbTable.value!.tableRef!.resetScrollTop();
+          // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+          clearInterval(interval);
+          interval = setTimeout(() => {
+            table.value.syncTable(dbTable);
+          }, 200);
+          // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+        }
+      }
+
+      // 表类型tableType字段change事件（由子组件 emit 触发，formModel 已在子组件内更新）
+      function onTableTypeChange(value) {
+        const relationType = cgformHeadFormRef.value?.formModel.relationType ?? 0;
+        tables.pageTable.value!.changePageType(value == 3, relationType);
+      }
+      // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      // 关联类型relationType字段change事件
+      function onRelationTypeChange(value) {
+        const tableType = cgformHeadFormRef.value?.formModel.tableType ?? 1;
+        tables.pageTable.value!.changePageType(tableType == 3, value);
+      }
+      // update-end--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+
+      // 是否树isTree字段change事件
+      function onIsTreeChange(value) {
+        value === 'Y' ? addTreeNeedField() : deleteTreeNeedField();
+      }
+
+      /** 立即主动同步所有table */
+      function syncAllTableNow() {
+        syncAllTableNowDebounce();
+      }
+
+      // 立即同步所有 table
+      async function syncAllTableNowPromise() {
+        let { dbTable, pageTable, checkTable, fkTable, queryTable } = tables;
+        await pageTable.value!.syncTable(dbTable);
+        await checkTable.value!.syncTable(dbTable);
+        await fkTable.value!.syncTable(dbTable);
+        await queryTable.value!.syncTable(dbTable);
+      }
+
+      // update-begin--author:liaozhiyang---date:20260414---for：【QQYUN-15128】新增字段时系统字段永远在最下面
+      const SYS_BUILT_IN_FIELDS = ['create_by', 'create_time', 'update_by', 'update_time', 'sys_org_code'];
+      // update-end--author:liaozhiyang---date:20260414---for：【QQYUN-15128】新增字段时系统字段永远在最下面
+
+      // update-begin--author:liaozhiyang---date:20260506---for:【issues/9593】树表的页面属性中子节点和父节点的属性串了
+      let onTableAddedQueue: Promise<unknown> = Promise.resolve();
+      // update-end--author:liaozhiyang---date:20260506---for:【issues/9593】树表的页面属性中子节点和父节点的属性串了
+
+      /** 当新增了的时候应立即同步 */
+      function onTableAdded() {
+        // update-begin--author:liaozhiyang---date:20260506---for: 【issues/9593】树表的页面属性中子节点和父节点的属性串了
+        onTableAddedQueue = onTableAddedQueue.then(async () => {
+          // update-begin--author:liaozhiyang---date:20260414---for：【QQYUN-15128】新增行时系统字段永远在最下面（系统字段被删除时退化为正常追加）
+          const dbJVxeRef = tables.dbTable.value?.tableRef;
+          if (dbJVxeRef) {
+            const fullData = dbJVxeRef.getXTable().internalData.tableFullData;
+            const sysIndex = fullData.findIndex((row) => SYS_BUILT_IN_FIELDS.includes(row.dbFieldName));
+            const lastIndex = fullData.length - 1;
+            // 末尾是新增行，且在系统字段后面，且本身不是系统字段
+            if (sysIndex !== -1 && lastIndex > sysIndex && !SYS_BUILT_IN_FIELDS.includes(fullData[lastIndex]?.dbFieldName)) {
+              const newRowData = { ...fullData[lastIndex] };
+              // 在 dbTable 中把末尾新行移到第一个系统字段前面
+              await dbJVxeRef.rowResort(lastIndex, sysIndex);
+              // 对其他 tables 直接在系统字段前面插入，不走 syncAllTableNow 的追加逻辑
+              const { pageTable, checkTable, fkTable, queryTable } = tables;
+              for (const t of [pageTable, checkTable, fkTable, queryTable]) {
+                const jvxeRef = t.value?.tableRef;
+                if (!jvxeRef) continue;
+                const tFullData = jvxeRef.getXTable().internalData.tableFullData;
+                const tSysIndex = tFullData.findIndex((row) => SYS_BUILT_IN_FIELDS.includes(row.dbFieldName));
+                // 串行 await 附表 insertRows/addRows，确保下一次队列任务读到的是完全收尾后的状态
+                if (tSysIndex !== -1) {
+                  await jvxeRef.insertRows(newRowData, tSysIndex);
+                } else {
+                  await jvxeRef.addRows(newRowData);
+                }
+              }
+              return;
+            }
+          }
+          // update-end--author:liaozhiyang---date:20260414---for：【QQYUN-15128】新增行时系统字段永远在最下面（系统字段被删除时退化为正常追加）
+          syncAllTableNow();
+        });
+        // 兜底：队列异常不阻塞后续调用
+        onTableAddedQueue = onTableAddedQueue.catch((e) => {
+          console.error('[onTableAdded] queue error:', e);
+        });
+        // update-end--author:liaozhiyang---date:20260506---for: 【issues/9593】树表的页面属性中子节点和父节点的属性串了
+      }
+
+      /** 当删除的时候也应立即同步 */
+      function onTableRemoved() {
+        syncAllTableNow();
+      }
+
+      /** 当拖动后立即同步 */
+      function onTableDragged(event) {
+        let { oldIndex, newIndex } = event;
+        syncAllOrderNumNow(oldIndex, newIndex);
+      }
+
+      /** 当插入后立即同步 */
+      async function onTableInserted(event) {
+        let { insertIndex, row } = event;
+        let { pageTable, checkTable, fkTable, queryTable } = tables;
+        pageTable.value!.tableRef!.insertRows(row, insertIndex);
+        checkTable.value!.tableRef!.insertRows(row, insertIndex);
+        fkTable.value!.tableRef!.insertRows(row, insertIndex);
+        queryTable.value!.tableRef!.insertRows(row, insertIndex);
+      }
+
+      /** 立即同步所有的表的排序顺序 */
+      function syncAllOrderNumNow(oldIndex: number, newIndex: number) {
+        let { pageTable, checkTable, fkTable, queryTable } = tables;
+        pageTable.value!.tableRef!.rowResort(oldIndex, newIndex);
+        checkTable.value!.tableRef!.rowResort(oldIndex, newIndex);
+        fkTable.value!.tableRef!.rowResort(oldIndex, newIndex);
+        queryTable.value!.tableRef!.rowResort(oldIndex, newIndex);
+      }
+
+      /** 当value变化时同步 date */
+      function onTableSyncDbType(event) {
+        tables.pageTable.value!.syncFieldShowType(event.row);
+      }
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+      /** 当dbIsPersist（同步数据库） value变化时同步 查询去掉勾选 */
+      function onTableSyncDbIsPersist(event) {
+        tables.pageTable.value!.syncIsQuery(event.row);
+      }
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+      /** 当dbIsNull(不允许空值) value变化时同步 校验必填 */
+      function onTableSyncDbIsNull(event) {
+        tables.checkTable.value!.syncFieldMustInput(event.row);
+      }
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+
+      function onTableQuery(id) {
+        tables.pageTable.value!.enableQuery(id);
+      }
+
+      /** 添加树字段 */
+      function addTreeNeedField() {
+        if (!treeFieldAdded) {
+          let { dbTable, pageTable, checkTable } = tables;
+          let treeFields = useTreeNeedFields();
+          treeFields = treeFields.filter((item: any) => {
+            let nameList = dbTable.value!.tableRef!.getTableData().map((o) => o.dbFieldName);
+            return !nameList.includes(item.dbFieldName);
+          });
+          treeFieldIds = [];
+          treeFields.forEach((newData: any) => {
+            let uuidTemp = buildUUID() + '__tempId';
+            treeFieldIds.push(uuidTemp);
+            newData.id = uuidTemp;
+          });
+          dbTable.value!.tableRef!.addRows(treeFields, { setActive: false });
+          // update-begin--author:liaozhiyang---date:20260506---for: 【issues/9593】树表的页面属性中子节点和父节点的属性串了
+          // pageTable.value!.tableRef!.addRows(treeFields, { setActive: false });
+          // checkTable.value!.tableRef!.addRows(treeFields, { setActive: false });
+          // update-end--author:liaozhiyang---date:20260506---for: 【issues/9593】树表的页面属性中子节点和父节点的属性串了
+          nextTick(() => syncAllTableNow());
+          treeFieldAdded = true;
+        }
+        nextTick(() => {
+          if (cgformHeadFormRef.value) {
+            cgformHeadFormRef.value.formModel.treeIdField = 'has_child';
+            cgformHeadFormRef.value.formModel.treeParentIdField = 'pid';
+          }
+        });
+      }
+
+      /** 删除树字段 */
+      function deleteTreeNeedField() {
+        if (treeFieldIds && treeFieldIds.length > 0) {
+          let { dbTable } = tables;
+          dbTable.value!.tableDeleteLines(treeFieldIds);
+          treeFieldIds = [];
+          treeFieldAdded = false;
+        }
+      }
+
+      // 触发所有表单验证
+      function validateAll() {
+        let options = {};
+        return new Promise((resolve, reject) => {
+          // 验证主表表单
+          cgformHeadFormRef.value!.validate().then(
+            (values) => resolve({ values }),
+            (errMsg) => {
+              if (errMsg) $message.warning(errMsg);
+              reject(VALIDATE_FAILED);
+            }
+          );
+        })
+          .then((result) => {
+            Object.assign(options, result);
+            return validateTableFields();
+          })
+          .then((allTableData) => {
+            Object.assign(options, allTableData);
+            let formData = classifyIntoFormData(options);
+            return validateForeignKey(formData);
+          })
+          .catch((e) => {
+            if (e === VALIDATE_FAILED || e?.code === VALIDATE_FAILED) {
+              // 表单校验失败时消息已在 validate() 内提示，此处不重复
+            } else {
+              // update-begin--author:liaozhiyang---date:20231226---for：【QQYUN-7503】附表配置多个外键，保存失败没提示
+              e?.msg ? $message.warning(e.msg) : console.error(e);
+              // update-end--author:liaozhiyang---date:20231226---for：【QQYUN-7503】附表配置多个外键，保存失败没提示
+            }
+            return Promise.reject(null);
+          });
+      }
+
+      /** 验证并获取所有表的数据 */
+      function validateTableFields() {
+        return new Promise(async (resolve, reject) => {
+          let tableKeys = Object.keys(tables);
+          let allTableData: any = {};
+          for (let i = 0; i < tableKeys.length; i++) {
+            let key = tableKeys[i];
+            let table = tables[key];
+            try {
+              allTableData[key] = await table.value!.validateData(key);
+            } catch (e: any) {
+              if (e.code === VALIDATE_FAILED) {
+                // 未通过就跳转到相应的tab选项卡
+                activeKey.value = e.activeKey;
+              } else {
+                console.error(e);
+              }
+              reject(e);
+              return;
+            }
+          }
+          resolve(allTableData);
+        });
+      }
+
+      /** 将所有表的数据整理整合成后台识别的formData */
+      function classifyIntoFormData(options) {
+        // 整理数据
+        let formData = {
+          head: {} as Recordable,
+          fields: [] as any[],
+          indexs: [] as any[],
+          deleteFieldIds: [] as any[],
+          deleteIndexIds: [] as any[],
+        };
+        formData.head = Object.assign(model, options.values);
+        // update-begin--author:liaozhiyang---date:20260401---for：【QQYUN-14949】online配置中尽可能多的显示vxetable字段
+        formData.head.formCategory = 'temp';
+        formData.head.idType = 'UUID';
+        // update-end--author:liaozhiyang---date:20260401---for：【QQYUN-14949】online配置中尽可能多的显示vxetable字段
+        // 整理online表单扩展JSON
+        const extConfigJson = { ...cgformHeadFormRef.value?.getExtConfigJson() };
+        formData.head.isDesForm = extConfigJson.isDesForm;
+        formData.head.desFormCode = extConfigJson.desFormCode;
+        delete extConfigJson.isDesForm;
+        delete extConfigJson.desFormCode;
+        formData.head.extConfigJson = JSON.stringify(extConfigJson);
+        // 整理 fields
+        options.dbTable.tableData.forEach((item, index) => {
+          // ID 以 dbTable 的 ID 为准
+          let rowId = item.id;
+          let fields = Object.assign({}, item);
+
+          let pageTable = options.pageTable.tableData[index];
+          fields = Object.assign(pageTable, fields);
+
+          let checkTable = options.checkTable.tableData[index];
+          fields = Object.assign(checkTable, fields);
+
+          let fkTable = options.fkTable.tableData[index];
+          fields = Object.assign(fkTable, fields);
+
+          let queryTable = options.queryTable.tableData[index];
+          fields = Object.assign(queryTable, fields);
+
+          // 如果 dbTable 没有返回id，则代表是新增的数据
+          if (rowId == null || rowId === '') {
+            delete fields.id;
+          } else {
+            fields.id = rowId;
+          }
+          // 去掉临时ID
+          let tempIds = ([] as string[]).concat(fieldTempIds, treeFieldIds);
+          if (tempIds.includes(fields.id)) {
+            delete fields.id;
+          }
+          formData.fields.push(fields);
+        });
+        formData.deleteFieldIds = options.dbTable.deleteIds;
+        // 整理 index
+        formData.indexs = options.idxTable.tableData;
+        formData.deleteIndexIds = options.idxTable.deleteIds;
+        return formData;
+      }
+
+      /** 外键配置校验 只能配置一个 */
+      function validateForeignKey(formData) {
+        // 1.配置两个 校验
+        // 2.配置一个后，保存，再配置新的 删除老的 校验
+        // 3.配置一个后，保存,修改当前为新的 校验
+        return new Promise((resolve, reject) => {
+          let fields = formData.fields;
+          let saved = true;
+          if (fields && fields.length > 0) {
+            let hasForeignKey = 0;
+            for (let i = 0; i < fields.length; i++) {
+              if (fields[i].mainField || fields[i].mainTable) {
+                hasForeignKey += 1;
+              }
+              if (hasForeignKey > 1) {
+                saved = false;
+                break;
+              }
+            }
+          }
+          if (saved) {
+            resolve(formData);
+          } else {
+            reject({
+              code: -1,
+              msg: '外键只允许配置一个!',
+              error: VALIDATE_FAILED,
+            });
+          }
+        });
+      }
+
+      // 表单提交事件
+      function onSubmit() {
+        confirmLoading.value = true;
+        validateAll()
+          .then(
+            async (formData: any) => {
+              // 表字段转小写
+              if (formData.fields && formData.fields.length > 0) {
+                for (let field of formData.fields) {
+                  field.dbFieldName = field.dbFieldName.toLowerCase().trim();
+                }
+              }
+              if (formData.head?.tableName) {
+                formData.head.tableName = formData.head.tableName.toLowerCase().trim();
+              }
+              // 发起请求
+              await formApi.doSaveOrUpdate(formData, isUpdate.value);
+              refreshCacheTableName(oldTableName.value, formData.head['tableName']);
+              emit('success');
+              // 解决关闭弹窗时会闪一下的问题，因为同时加载多个JVxeTable造成的卡顿影响了弹窗关闭效果
+              sleep(1, () => onCancel());
+            },
+            (e) => {
+              console.error(e);
+            }
+          )
+          .finally(() => {
+            confirmLoading.value = false;
+          });
+      }
+
+      //update-begin-author:taoyan date:2022-8-15 for: VUEN-1891 online表单编辑时 修改了扩展配置能否 确认即保存，不用再点整个表单得确定
+      async function onExtConfigSaved(values) {
+        if (isUpdate.value) {
+          const params = {
+            id: model.id,
+            extConfigJson: JSON.stringify(toRaw(values)),
+          };
+          await formApi.editHead(params);
+          emit('success');
+        }
+      }
+      //update-end-author:taoyan date:2022-8-15 for: VUEN-1891 online表单编辑时 修改了扩展配置能否 确认即保存，不用再点整个表单得确定
+
+      function onCancel() {
+        hideTabs.value = true;
+        // 解决关闭弹窗时会闪一下的问题，因为同时加载多个JVxeTable造成的卡顿影响了弹窗关闭效果
+        sleep(1, () => closeModal());
+      }
+      /**
+       * 2024-07-17
+       * liaozhiyang
+       * 【TV360X-829】根据字典名称和字段备注快速定位到行
+       * */
+      const handlePositioning = () => {
+        const val = positioning.value.trim();
+        if (val.length) {
+          const jVxe_instance = tables[activeKey.value].value.tableRef;
+          const vxe_instance = jVxe_instance.getXTable();
+          const fullData = vxe_instance.getTableData().fullData;
+          // 先精确，再模糊
+          const preciseIndex = fullData.findIndex((item) => val === item.dbFieldName || val === item.dbFieldTxt);
+          let index = -1;
+          if (preciseIndex == -1) {
+            // 模糊
+            const dimIndex = fullData.findIndex((item) => item.dbFieldName.includes(positioning.value) || item.dbFieldTxt.includes(positioning.value));
+            index = dimIndex;
+          } else {
+            index = preciseIndex;
+          }
+          if(index != -1) {
+            const row = fullData[index];
+            vxe_instance.scrollToRow(row).then(() => {
+              const { refTableBody } = vxe_instance.getRefMaps();
+              const tableBody = refTableBody.value;
+              const bodyElem = tableBody ? tableBody.$el : null;
+              if (bodyElem) {
+                const trElem = bodyElem.querySelector(`[rowid="${vxe_instance.getRowid(row)}"]`);
+                if (trElem) {
+                  trElem.classList.add('customHighlight');
+                  setTimeout(() => {
+                    trElem?.classList.remove('customHighlight');
+                  }, 1e3);
+                }
+              }
+              // update-begin--author:liaozhiyang---date:20260330---for：【QQYUN-15058】解决字段定位在小屏幕上看不见的问题
+              // 将弹窗竖向滚动条滚动到最底部
+              const spinEl = spinRef.value?.$el || spinRef.value;
+              const scrollContainer = spinEl?.closest('.scrollbar__wrap');
+              if (scrollContainer) {
+                scrollContainer.scrollTop = scrollContainer.scrollHeight;
+              }
+              // update-end--author:liaozhiyang---date:20260330---for：【QQYUN-15058】解决字段定位在小屏幕上看不见的问题
+            });
+          } else {
+            $message.warning('没搜到相关字段名称或字段备注~');
+          }
+        } else {
+          $message.warning('请输入字段名称或字段备注~');
+        }
+      };
+      function getRefPromise(componentRef) {
+        return new Promise((resolve) => {
+          function next() {
+            let ref = componentRef.value;
+            if (ref?.tableRef?.getXTable) {
+              resolve(ref);
+            } else {
+              requestAnimationFrame(next);
+            }
+          }
+          next();
+        });
+      }
+      return {
+        ...tables,
+        modalRef,
+        onlFormContentRef,
+        onlFormContentFormRef,
+        onlFormContentFormHeight,
+        spinRef,
+        title,
+        confirmLoading,
+        tableLoading,
+        activeKey,
+        onCancel,
+        formAction,
+        hideTabs,
+        onSubmit,
+        onTabsChange,
+        onTableAdded,
+        onTableRemoved,
+        onTableDragged,
+        onTableInserted,
+        onTableSyncDbType,
+        onTableQuery,
+        onExtConfigSaved,
+        registerModal,
+        // hook OnlineTest
+        aiTestMode,
+        aiTestTable,
+        aiTableList,
+        initVirtualData,
+        onTableSyncDbIsPersist,
+        onTableSyncDbIsNull,
+        isUpdate,
+        positioning,
+        handlePositioning,
+        oldTableName,
+        onIsTreeChange,
+        // 头部表单子组件
+        cgformHeadFormRef,
+        onTableTypeChange,
+        onRelationTypeChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .onlForm-content {
+    height: 100%;
+  }
+  // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-829】根据字典名称和字段备注快速定位到行
+  .footer-area {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    .leftArea {
+      display: flex;
+      > * {
+        &:not(:first-child) {
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .positioning-area {
+    width: 280px;
+    display: flex;
+    > :first-child {
+      margin-right: 8px;
+    }
+  }
+  :deep(.vxe-table) {
+    .vxe-body--row.customHighlight {
+      background-color: var(--vxe-ui-table-row-hover-background-color);
+    }
+  }
+  // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-829】根据字典名称和字段备注快速定位到行
+</style>
+<style>
+  .onlForm-config-modal {
+    .scroll-container .scrollbar__wrap {
+      margin-bottom: 0 !important;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/CodeFileListModal.vue b/src/views/super/online/cgform/components/CodeFileListModal.vue
new file mode 100644
index 0000000..049f03e
--- /dev/null
+++ b/src/views/super/online/cgform/components/CodeFileListModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <BasicModal @register="registerModal" :width="1200" :defaultFullscreen="false" :canFullscreen="false">
+    <template #title> <info-circle-two-tone /> 代码生成结果 </template>
+    <div :style="divStyle">
+      <p>
+        <template v-for="item in codeList"> {{ item }}<br /> </template>
+      </p>
+    </div>
+    <template #footer>
+      <a-button @click="handleClose">关闭</a-button>
+      <a-button type="primary" ghost @click="handleView">在线预览</a-button>
+      <a-button type="primary" @click="onDownloadGenerateCode" :loading="loading">下载到本地</a-button>
+    </template>
+  </BasicModal>
+  <code-file-view-modal @register="registerCodeViewModal" @download="onDownloadGenerateCode" @close="handleClose"></code-file-view-modal>
+</template>
+
+<script>
+  /**
+   * online代码生成后弹出的modal 文件列表
+   */
+  import { ref, reactive, computed, nextTick, defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { InfoCircleTwoTone } from '@ant-design/icons-vue';
+  import CodeFileViewModal from './CodeFileViewModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { downloadByData } from '/@/utils/file/download';
+  
+  export default {
+    name: 'CodeFileListModal',
+    components: {
+      BasicModal,
+      InfoCircleTwoTone,
+      CodeFileViewModal,
+    },
+    emits: ['register'],
+    setup() {
+      const { createMessage: $message } = useMessage();
+      const codeList = ref([]);
+      const height = window.innerHeight - 150;
+      const divStyle = reactive({
+        overflowY: 'auto',
+        maxHeight: height + 'px',
+      });
+      const loading = ref(false);
+      const tableName = ref('')
+      const pathKey = ref('')
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        codeList.value = data.codeList;
+        tableName.value = data.tableName;
+        pathKey.value = data.pathKey;
+      });
+
+      function handleClose() {
+        closeModal();
+      }
+      function onDownloadGenerateCode() {
+        //update-begin-author:taoyan date:2022-6-27 for:  VUEN-1433【vue3】一对多代码生成，点击下载失败
+        let codeFileList = codeList.value;
+        if (!codeFileList || codeFileList.length == 0) {
+          $message.warning('无代码！');
+          return;
+        }
+        let temp = codeFileList.join(',');
+        //console.log(temp);
+        //update-end-author:taoyan date:2022-6-27 for:  VUEN-1433【vue3】一对多代码生成，点击下载失败
+        return defHttp
+          .post(
+            {
+              url: '/online/cgform/api/downGenerateCode',
+              params: {
+                fileList: encodeURI(temp),
+                pathKey: pathKey.value
+              },
+              responseType: 'blob',
+            },
+            { isTransformResponse: false }
+          )
+          .then((data) => {
+            if (!data || data.size == 0) {
+              $message.warning('导出代码失败！');
+              return;
+            }
+            let fileName = '导到生成代码_' + tableName.value + '_' + new Date().getTime() + '.zip';
+            downloadByData(data, fileName, 'application/zip');
+          });
+      }
+
+      const [registerCodeViewModal, { openModal }] = useModal();
+      function handleView() {
+        let temp = codeList.value;
+        openModal(true, {
+          codeList: temp,
+          pathKey: pathKey.value
+        });
+      }
+
+      return {
+        registerModal,
+        registerCodeViewModal,
+        divStyle,
+        codeList,
+        onDownloadGenerateCode,
+        handleClose,
+        handleView,
+        loading,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/CodeFileViewModal.vue b/src/views/super/online/cgform/components/CodeFileViewModal.vue
new file mode 100644
index 0000000..a431e02
--- /dev/null
+++ b/src/views/super/online/cgform/components/CodeFileViewModal.vue
@@ -0,0 +1,378 @@
+<template>
+  <BasicModal :height="modalHeight" @register="registerModal" okText="" cancelText="关闭" :width="1200" :defaultFullscreen="true" :canFullscreen="false" @ok="onDownloadGenerateCode" :wrapClassName="prefixCls">
+    <template #title> <info-circle-two-tone /> 代码在线预览 </template>
+    <div>
+      <a-row class="code-gen">
+        <div class="left" style="border-right: 1px solid #eee" :style="{width:`calc(${defaultLeftWidthRate}% - 2px)`}">
+          <div :style="{ height: height + 'px', overflowY: 'auto' }">
+            <a-directory-tree v-if="treeData.length" :defaultExpandAll="true" :tree-data="treeData" @select="showCodeContent"> </a-directory-tree>
+          </div>
+        </div>
+        <div class="resize"/>
+        <div class="right" :style="{width:`calc(100% - ${defaultLeftWidthRate}% - 2px)`}">
+          <JCodeEditor 
+              v-if="activeCodeContent" 
+              v-model:value="activeCodeContent"
+              theme="idea"
+              :language="language" 
+              :fullScreen="false" 
+              :lineNumbers="true" 
+              :height="height + 'px'" 
+              :disabled="true"
+              :language-change="true">
+          </JCodeEditor>
+          <a-empty v-else style="margin-top: 50px" description="请选择左侧文件，显示详细代码" />
+        </div>
+      </a-row>
+    </div>
+    <template #footer>
+      <a-button @click="handleClose">关闭</a-button>
+      <a-button type="primary" @click="onDownloadGenerateCode">下载到本地</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  /**
+   * online代码生成后支持在线预览
+   */
+  import {ref, defineComponent, reactive, onMounted} from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { InfoCircleTwoTone } from '@ant-design/icons-vue';
+  import { message } from 'ant-design-vue';
+  import { JCodeEditor } from '/@/components/Form';
+  import 'codemirror/theme/idea.css';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'CodeFileViewModal',
+    components: {
+      BasicModal,
+      InfoCircleTwoTone,
+      JCodeEditor,
+    },
+    emits: ['download', 'register', 'close'],
+    setup(_p, { emit }) {
+      const codeList = ref([]);
+      const pathKey = ref('');
+      const treeData = ref<any[]>([]);
+      const expandStatus = ref(false);
+      const height = window.innerHeight - 142;
+      const language = ref('java');
+      const activeCodeContent = ref('');
+      let codeMap = reactive({});
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        codeMap = reactive({});
+        activeCodeContent.value = '';
+
+        codeList.value = data.codeList;
+        pathKey.value = data.pathKey;
+        getTreeData();
+        dragDiv();
+        expandStatus.value = true;
+      });
+      const { prefixCls } = useDesign('online-codeFileViewModal');
+
+      function getTreeData() {
+        let list = getPlainList();
+        let root = list[0];
+        assembleTree(root, list);
+        let treeList: any[] = [];
+        const getFinalTreeData = function (root) {
+          if (root.children) {
+            let children = root.children;
+            if (children.length == 1) {
+              getFinalTreeData(children[0]);
+            } else if (children.length > 1) {
+              treeList.push(root);
+            }
+          }
+        };
+        getFinalTreeData(root);
+        console.log(123, treeList)
+        treeData.value = treeList;
+        setTimeout(()=>{
+          loadFirstFileContent(root)
+        }, 300)
+      }
+
+      /**
+       * 默认加载第一个文件
+       * @param root
+       */
+      async function loadFirstFileContent(root){
+        const getFirstFile = function(temp){
+          if(temp.isLeaf === true){
+            return temp;
+          }else{
+            if (temp.children) {
+              return getFirstFile(temp.children[0])
+            }
+          }
+        }
+        let node = getFirstFile(root);
+        if(node && node.isLeaf === true){
+          let path = node.path;
+          if (!codeMap[path]) {
+            await loadCode(path);
+          }
+          language.value = getCodeLanguage(path);
+          activeCodeContent.value = codeMap[path];
+        }
+      }
+
+      function assembleTree(root, list) {
+        for (let item of list) {
+          if (root.key == item.pid) {
+            let children = root.children;
+            if (!children) {
+              root.children = [];
+            }
+            root.children.push(item);
+            assembleTree(item, list);
+          }
+        }
+      }
+
+      function getAbsolutePath(arr, index){
+        let i=0;
+        let str = ''
+        while(i<=index){
+          str+=arr[i];
+          i++;
+        }
+        return str;
+      }
+      
+      function getPlainList() {
+        // title key pid
+        let list: any[] = [];
+        let list2: any[] = [];
+        let arr: any[] = codeList.value;
+        for (let item of arr) {
+          let temp = item.replace(new RegExp('\\\\', 'g'), '/').replace('生成成功：', '').trim();
+          if (temp) {
+            let arr2 = temp.split('/');
+            for (let i = 0; i < arr2.length; i++) {
+              let a = arr2[i];
+              let id = getAbsolutePath(arr2, i)
+              //  let str = getAbsolutePath(arr2, i)
+              if (a) {
+                let item = {
+                  title: a,
+                  key: id,
+                };
+                if (a == 0) {
+                } else {
+                  let lastKey = getAbsolutePath(arr2, i-1)
+                          //arr2[i - 1] + (i - 1);
+                  if (lastKey) {
+                    item['pid'] = lastKey;
+                  } else {
+                  }
+                }
+                if (i == arr2.length - 1) {
+                  //最后一个元素
+                  item['isLeaf'] = true;
+                  item['path'] = temp;
+                }
+                if (list2.indexOf(id) < 0 || i == arr2.length - 1) {
+                  list.push(item);
+                  list2.push(id);
+                }
+              }
+            }
+          }
+        }
+        return list;
+      }
+
+      function handleClose() {
+        closeModal();
+        emit('close')
+      }
+      function onDownloadGenerateCode() {
+        emit('download');
+      }
+
+      function getCodeLanguage(path) {
+        if (path.endsWith('xml')) {
+          return 'application/xml';
+        }
+        if (path.endsWith('sql')) {
+          return 'text/x-sql';
+        }
+        if (path.endsWith('vue')) {
+          return 'text/x-vue';
+        }
+        if (path.endsWith('ts')) {
+          return 'text/typescript';
+        } else {
+          return 'text/x-java';
+        }
+      }
+
+      async function showCodeContent(_selectedKeys, e) {
+        let node = e.node.dataRef;
+        if (node.isLeaf) {
+          let path = node.path;
+          if (!codeMap[path]) {
+            await loadCode(path);
+          }
+          language.value = getCodeLanguage(path);
+          activeCodeContent.value = codeMap[path];
+        }
+      }
+      function loadCode(path) {
+        return new Promise((resolve) => {
+          let params = {
+            path: encodeURI(path),
+            pathKey: pathKey.value
+          };
+          defHttp.get({ url: '/online/cgform/api/codeView', params }, { isTransformResponse: false }).then((data) => {
+            if (!data || data.size === 0) {
+              message.warning('文件下载失败');
+              return;
+            }else{
+              if (data.message) {
+                message.warning(data.message);
+                return;
+              }
+            }
+            
+            let blob = new Blob([data]);
+            let reader = new FileReader();
+            reader.readAsText(blob, 'utf8');
+            reader.onload = function () {
+              let content = this.result;
+              codeMap[path] = content;
+              resolve(1);
+            };
+          });
+        });
+      }
+
+      //update-begin---author:wangshuai---date:2025-08-25---for:【QQYUN-13519】代码预览这个允许左右拖动---
+      //距离左侧的宽度
+      const defaultLeftWidthRate = ref(24)
+      //左侧显示最低半分比
+      const leftMin = ref<number>(14);
+      //右侧显示最低半分比
+      const rightMin = ref<number>(30);
+      
+      /**
+       * div拖拽事件
+       * 
+       */
+      function dragDiv(){
+        let resize:any = document.getElementsByClassName('resize');
+        let box:any = document.getElementsByClassName('code-gen');
+        let left:any = document.getElementsByClassName('left');
+        for (let i = 0; i < resize.length; i++) {
+          // 鼠标按下事件
+          resize[i].onmousedown = function (e: any) {
+            //整个div的宽度
+            let boxWidth = box[i].offsetWidth;
+            //左侧的宽度
+            let leftWidth = left[i].offsetWidth;
+            // 开始位置
+            let startX = e.clientX;
+            // 鼠标拖动事件
+            document.onmousemove = function (e: any) {
+              // 结束位置
+              let endX = e.clientX;
+              // 得到鼠标拖动的宽高距离：取绝对值
+              let distX = Math.abs(endX - startX);
+              // 向右拖拽
+              if (endX > startX) {
+                let moveLate = parseFloat(((leftWidth + distX) / boxWidth * 100).toFixed(4));
+                let right = parseFloat('100') - moveLate;
+                // 向右大于右侧的最小值才允许拖拽
+                if (right > rightMin.value) {
+                  defaultLeftWidthRate.value = moveLate;
+                }
+              }
+              // 向左拖拽
+              if (endX < startX) {
+                let moveLate = parseFloat(((leftWidth - distX) / boxWidth * 100).toFixed(4));
+                // 向左大于左侧的最小值才允许拖拽
+                if (moveLate > leftMin.value) {
+                  defaultLeftWidthRate.value = moveLate;
+                }
+              }
+            }
+            // 鼠标松开事件
+            document.onmouseup = function (e: any) {
+              document.onmousemove = null;
+              document.onmouseup = null;
+              //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+              resize[i].releaseCapture && resize[i].releaseCapture();
+            }
+            //该函数在属于当前线程的指定窗口里设置鼠标捕获
+            resize[i].setCapture && resize[i].setCapture();
+            return false;
+          }
+        }
+      }
+      //update-end---author:wangshuai---date:2025-08-25---for:【QQYUN-13519】代码预览这个允许左右拖动---
+
+      return {
+        registerModal,
+        codeList,
+        onDownloadGenerateCode,
+        handleClose,
+        treeData,
+        showCodeContent,
+        activeCodeContent,
+        expandStatus,
+        height,
+        language,
+        prefixCls,
+        modalHeight:1000,
+        defaultLeftWidthRate
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-227】代码生成弹窗在线预览样式优化
+  @prefix-cls: ~'@{namespace}-online-codeFileViewModal';
+  .@{prefix-cls} {
+    .scrollbar__wrap {
+      margin-bottom: 0 !important;
+    }
+    .ant-modal-footer {
+      padding-top: 32px;
+    }
+     //update-begin---author:wangshuai---date:2025-08-25---for:【QQYUN-13519】代码预览这个允许左右拖动---
+     .code-gen .left {
+      position: relative;
+      width: calc(24% - 2px);
+      height: 100%;
+      overflow-x: auto;
+    }
+
+    .code-gen .resize {
+      position: relative;
+      width: 4px;
+      color: #f7f7f7;
+      background: #f7f7f7;
+      cursor: w-resize;
+    }
+
+    .code-gen .right {
+      position: relative;
+      width: calc(76% - 2px);
+      height: 100%;
+      overflow-x: auto;
+    }
+    .ant-tree-node-content-wrapper{
+      display: flex;
+    }
+    //update-end---author:wangshuai---date:2025-08-25---for:【QQYUN-13519】代码预览这个允许左右拖动---
+  }
+  // update-end--author:liaozhiyang---date:20240617---for：【TV360X-227】代码生成弹窗在线预览样式优化
+</style>
diff --git a/src/views/super/online/cgform/components/CodeGeneratorModal.vue b/src/views/super/online/cgform/components/CodeGeneratorModal.vue
new file mode 100644
index 0000000..13fb649
--- /dev/null
+++ b/src/views/super/online/cgform/components/CodeGeneratorModal.vue
@@ -0,0 +1,345 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="title"
+    :width="modalWidth"
+    :confirmLoading="confirmLoading"
+    okText="开始生成"
+    cancelText="取消"
+    @ok="onSubmit"
+    @cancel="onCancel"
+    :wrapClassName="wrapClassName"
+  >
+    <a-spin :spinning="confirmLoading">
+      <BasicForm @register="registerForm">
+        <!-- update-begin--author:liaozhiyang---date:20240612---for：【TV360X-1057】代码生成页面代码鼠标移入给说明 -->
+        <template #pageCode="{ model, field }">
+          <a-radio-group v-model:value="model[field]">
+            <a-tooltip placement="top">
+              <template #title>
+                <span>深度封装表单，用户只需定义字段json即可渲染表单，优点简单便捷，缺点扩展有难度</span>
+              </template>
+              <a-radio value="vue3">封装表单(BasicForm)</a-radio>
+            </a-tooltip>
+            <a-tooltip placement="top">
+              <template #title>
+                <span>antd的原生表单，所有字段都需要硬编码，缺点编码繁琐，优点扩展容易</span>
+              </template>
+             <a-radio value="vue3Native" v-if="!(model.jspMode == 'innerTable' || model.jspMode == 'tab')">原生表单(a-form)</a-radio>
+            </a-tooltip>
+          </a-radio-group>
+        </template>
+        <!-- update-end--author:liaozhiyang---date:20240612---for：【TV360X-1057】代码生成页面代码鼠标移入给说明 -->
+      </BasicForm>
+      <a-card v-if="showSubTable" title="子表信息" size="small">
+        <JVxeTable ref="subTableRef" rowNumber :maxHeight="580" v-bind="subTable" />
+      </a-card>
+    </a-spin>
+  </BasicModal>
+  <FileSelectModal @register="registerFileSelectModal" @select="onFileSelect" />
+  <!-- 生成代码文件后弹窗显示 -->
+  <code-file-list-modal @register="registerCodeFileListModal"></code-file-list-modal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, computed, nextTick, defineComponent,h } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  // TODO import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+  import { useCodeGeneratorFormSchemas } from '../hooks/useSchemas';
+  import { underLine2CamelCase } from '/@/utils/common/compUtils';
+  import CodeFileListModal from './CodeFileListModal.vue'
+  import FileSelectModal from './FileSelectModal.vue';
+  import {message} from "ant-design-vue";
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { createLocalStorage } from '/@/utils/cache';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const $ls = createLocalStorage();
+  const { notification } = useMessage();
+  
+  enum Api {
+    tableInfo = '/online/cgform/head/tableInfo',
+    codeGenerate = '/online/cgform/api/codeGenerate',
+    downGenerateCode = '/online/cgform/api/downGenerateCode',
+  }
+
+  export default defineComponent({
+    name: 'CodeGenerator',
+    components: { BasicForm, BasicModal, FileSelectModal, CodeFileListModal },
+    emits: ['register'],
+    setup(props) {
+      const JEECG_ONL_PROJECT_PATH = 'JEECG_ONL_PROJECT_PATH';
+      const JEECG_ONL_PROJECT_NAME = 'JEECG_ONL_PROJECT_NAME';
+      const single = ref(true);
+      const subTableRef = ref<JVxeTableInstance>();
+      const modalWidth = computed(() => (single.value ? 800 : 1200));
+      const title = ref('代码生成');
+      const confirmLoading = ref(false);
+      const { prefixCls } = useDesign('code-generator-modal');
+      const wrapClassName = prefixCls;
+      const code = ref('');
+      const metaModel = reactive({
+        projectPath: '',
+        packageStyle: 'service',
+        jspMode: '',
+        jformType: '1',
+        tableName_tmp: '',
+        ftlDescription: '',
+        entityName: '',
+        codeTypes: 'controller,service,dao,mapper,entity,vue',
+      });
+      const model = reactive<Recordable>({});
+      const jspModeOptions = ref<any[]>([]);
+      // 子表配置
+      const subTable = reactive({
+        dataSource: [] as Recordable[],
+        columns: [
+          {
+            title: '子表名',
+            key: 'tableName',
+            type: JVxeTypes.input,
+            disabled: true,
+            validateRules: [{ required: true, message: '请输入${title}' }],
+          },
+          {
+            title: '子表实体',
+            key: 'entityName',
+            type: JVxeTypes.input,
+            validateRules: [{ required: true, message: '请输入${title}' }],
+          },
+          {
+            title: '功能说明',
+            key: 'ftlDescription',
+            type: JVxeTypes.input,
+            validateRules: [{ required: true, message: '请输入${title}' }],
+          },
+        ] as JVxeColumn[],
+      });
+      const showSubTable = computed<boolean>(() => subTable.dataSource.length > 0);
+
+      const { formSchemas } = useCodeGeneratorFormSchemas(
+        props,
+        {
+          onProjectPathChange,
+          onProjectPathSearch,
+          jspModeOptions,
+        },
+        single
+      );
+
+      // 表单配置
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        await resetFields();
+        // 当前主表ID
+        code.value = data.code;
+        confirmLoading.value = false;
+        subTable.dataSource = [];
+        jspModeOptions.value = [];
+        getStoreProjectPath();
+        Object.assign(model, metaModel);
+        loadData();
+      });
+
+      async function loadData() {
+        let { main, sub, jspModeList, projectPath } = await defHttp.get({
+          url: Api.tableInfo,
+          params: { code: code.value },
+        });
+        //update-begin-author:taoyan date:2022-5-17 for: vue3没有经典风格 默认是jvxe风格
+        let jspModeListForVue3: any[] = [];
+        for (let mode of jspModeList) {
+          const { code, note } = mode;
+          if (code == 'many') {
+            //经典风格不需要
+          } else {
+            jspModeListForVue3.push({
+              label: note,
+              value: code,
+            });
+          }
+        }
+        jspModeOptions.value = jspModeListForVue3;
+        if (main.isTree == 'Y') {
+          model.jspMode = 'tree';
+        } else {
+          // 获取主表风格
+          if (jspModeListForVue3.find(item => item.value === main.themeTemplate)) {
+            model.jspMode = main.themeTemplate
+          } else {
+            // 如果没有找到默认选中第一个
+            model.jspMode = jspModeListForVue3[0].value;
+          }
+        }
+        //update-end-author:taoyan date:2022-5-17 for: vue3没有经典风格 默认是jvxe风格
+        single.value = main.tableType == 1;
+        title.value = '代码生成【' + main.tableName + '】';
+        if (!model.projectPath) {
+          model.projectPath = projectPath;
+          window.localStorage.setItem(JEECG_ONL_PROJECT_PATH, projectPath);
+        }
+        // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-1054】代码生成包名缓存
+        const projectName = localStorage.getItem(JEECG_ONL_PROJECT_NAME);
+        if (projectName) {
+          model.entityPackage = projectName;
+        }
+        // update-end--author:liaozhiyang---date:20240611---for：【TV360X-1054】代码生成包名缓存
+        model.jformType = main.tableType + '';
+        model.tableName_tmp = main.tableName;
+        model.ftlDescription = main.tableTxt;
+
+        let entityNameTemp = underLine2CamelCase(main.tableName);
+        model.entityName = entityNameTemp.substring(0, 1).toUpperCase() + entityNameTemp.substring(1);
+        await nextTick();
+        setFieldsValue(model);
+        if (sub && sub.length > 0) {
+          subTable.dataSource = sub.map((item) => ({
+            tableName: item.tableName,
+            entityName: getCamelCase(item.tableName),
+            ftlDescription: item.tableTxt,
+          }));
+        }
+      }
+
+      // 生成代码文件后弹窗显示
+      const [registerCodeFileListModal, {openModal: openCodeFileListModal}] = useModal();
+
+      async function onSubmit() {
+        try {
+          const values = await validate();
+          let params = Object.assign({}, values, { code: code.value, tableName: values.tableName_tmp });
+          if (showSubTable.value) {
+            let errMap = await subTableRef.value!.validateTable();
+            if (errMap) {
+              return;
+            }
+            params.subList = subTableRef.value!.getTableData();
+          }
+          confirmLoading.value = true;
+        //  let codeList = await defHttp.post({ url: Api.codeGenerate, params });
+          let res:any = await codeGen(params);
+          //打开文件列表弹窗
+          openCodeFileListModal(true, {
+            codeList: res.codeList,
+            pathKey: res.pathKey,
+            tableName: values.tableName_tmp
+          });
+
+          //-----------------------------------------------------------------------------------------
+          // 前端代码直接生成vue3项目，会自动加载刷新，给有效期10秒的临时提示信息
+          const hasViewPath = res.codeList.some(
+            s => s.includes('src/views/') || s.includes('src\\views\\')
+          );
+          if(hasViewPath){
+            $ls.set(
+              'code.genenrate.success.msg',
+              `表【${values.tableName_tmp}】代码生成成功！前端代码已自动刷新，Java后台需重启生效！`,
+              15
+            );
+          }else{
+            notification.success({
+              message: `表【${values.tableName_tmp}】代码生成成功`,
+              description: h('div', [
+                '1. 前端代码请迁移到 VUE3项目', h('br'),
+                '2. 菜单SQL放到jeecg-system-start的flyway目录', h('br'),
+                '3. Java 后台需重启生效'
+              ]),
+              duration: 5,
+            });
+          }
+          //-----------------------------------------------------------------------------------------
+          
+          closeModal();
+          // update-begin--author:liaozhiyang---date:20240611---for：【TV360X-1054】代码生成包名缓存
+          localStorage.setItem(JEECG_ONL_PROJECT_NAME, values.entityPackage);
+          // update-end--author:liaozhiyang---date:20240611---for：【TV360X-1054】代码生成包名缓存
+        } catch (e) {
+          console.error(e);
+        } finally {
+          confirmLoading.value = false;
+        }
+      }
+      
+       function codeGen(params){
+        return new Promise((resolve, reject) => {
+          defHttp.post({ url: Api.codeGenerate, params }, {isTransformResponse: false}).then(res=>{
+            if(res.success){
+              let codeList = res.result;
+              let pathKey = res.message;
+              resolve({
+                codeList,
+                pathKey
+              })
+            }else{
+              message.error(res.message);
+              reject(res.message)
+            }
+          })
+        })
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      // 注册文件选择弹窗
+      const [registerFileSelectModal, fileSelectModal] = useModal();
+
+      function onProjectPathSearch() {
+        fileSelectModal.openModal(true, {});
+      }
+
+      function onFileSelect(url) {
+        window.localStorage.setItem(JEECG_ONL_PROJECT_PATH, url);
+        setFieldsValue({ projectPath: url });
+      }
+
+      function getCamelCase(val) {
+        let temp = underLine2CamelCase(val);
+        return temp.substring(0, 1).toUpperCase() + temp.substring(1);
+      }
+
+      function getStoreProjectPath() {
+        let path = window.localStorage.getItem(JEECG_ONL_PROJECT_PATH);
+        if (path) {
+          metaModel.projectPath = path;
+        }
+      }
+
+      function onProjectPathChange(e) {
+        if (e.target.value) window.localStorage.setItem(JEECG_ONL_PROJECT_PATH, e.target.value);
+      }
+
+      return {
+        title,
+        modalWidth,
+        confirmLoading,
+        subTable,
+        showSubTable,
+        onSubmit,
+        onCancel,
+        onFileSelect,
+        registerFileSelectModal,
+        subTableRef,
+        registerForm,
+        registerModal,
+        registerCodeFileListModal,
+        wrapClassName
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-code-generator-modal';
+.@{prefix-cls} {
+  .jeecg-basic-form .ant-input {font-size: 14px;}
+}
+</style>
diff --git a/src/views/super/online/cgform/components/DbToOnlineModal.vue b/src/views/super/online/cgform/components/DbToOnlineModal.vue
new file mode 100644
index 0000000..b6e5758
--- /dev/null
+++ b/src/views/super/online/cgform/components/DbToOnlineModal.vue
@@ -0,0 +1,205 @@
+<template>
+  <BasicModal @register="registerModal" :height="modalHeight" :width="500" title="从数据库导入表单" :confirmLoading="confirmLoading" @cancel="handleCancel" :wrapClassName="wrapClassName">
+    <a-spin :spinning="confirmLoading">
+      <BasicTable @register="registerTable" :rowSelection="rowSelection" @tableRedo="queryTables">
+        <template #tableTitle>
+          <div>
+            注：导入表会排除配置前缀表
+            <a href="http://doc.jeecg.com/2043924" target="_blank"> 参考文档</a>
+          </div>
+        </template>
+      </BasicTable>
+    </a-spin>
+
+    <template #footer>
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="handleTrans" type="primary" preIcon="ant-design:swap" :loading="confirmLoading || btnLoading"> 生成表单 </a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicTable } from '/@/components/Table';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useListTable } from '/@/hooks/system/useListPage';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  enum Api {
+    query = '/online/cgform/head/queryTables',
+    trans = '/online/cgform/head/transTables/',
+  }
+
+  export default defineComponent({
+    name: 'TransDb2Online',
+    components: { BasicModal, BasicTable },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const { createMessage: $message } = useMessage();
+      const emptyText = ref('暂无数据');
+      const confirmLoading = ref(false);
+      const btnLoading = ref(false);
+      const metaSource = ref<Recordable[]>([]);
+      const dataSource = ref<Recordable[]>([]);
+
+      const { prefixCls } = useDesign('online-db-import-form-modal');
+      const wrapClassName = prefixCls;
+      const clientHeight = document.documentElement.clientHeight;
+      const modalH = clientHeight - 180;
+      const modalHeight = modalH > 690 ? 690 : modalH;
+
+      const [registerTable, { setPagination, getForm }, { rowSelection, selectedRowKeys }] = useListTable({
+        bordered: true,
+        columns: [{ title: '表名', align: 'left', dataIndex: 'id' }],
+        dataSource: dataSource,
+        maxHeight: clientHeight - 400,
+        locale: { emptyText: emptyText },
+        pagination: {
+          showQuickJumper: false,
+          showSizeChanger: false,
+        },
+        clickToRowSelect: true,
+        showIndexColumn: true,
+        showActionColumn: false,
+        formConfig: {
+          schemas: [
+            {
+              label: '表名',
+              field: 'tableName',
+              component: 'Input',
+              componentProps: {
+                style: { width: '100%' },
+                placeholder: '请输入表名以模糊筛选',
+                onChange: (e) => searchFilter(e.target.value),
+              },
+              disabledLabelWidth: true,
+              itemProps: {
+                labelCol: { sm: 0, md: 0 },
+                wrapperCol: { sm: 24, md: 20 },
+              },
+            },
+          ],
+          baseColProps: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+          showActionButtonGroup: false,
+        },
+      });
+
+      const [registerModal, { closeModal }] = useModalInner(() => {
+        // 重置form
+        getForm()?.resetFields();
+
+        btnLoading.value = false;
+        emptyText.value = '暂无数据';
+        selectedRowKeys.value = [];
+        queryTables();
+      });
+
+      function queryTables() {
+        confirmLoading.value = true;
+        return defHttp
+          .get(
+            {
+              url: Api.query,
+            },
+            {
+              errorMessageMode: 'none',
+            }
+          )
+          .then(
+            (result) => {
+              dataSource.value = result;
+              metaSource.value = [...result];
+              return result;
+            },
+            (e) => {
+              if (e.message == 'noadminauth') {
+                emptyText.value = '非admin用户无权限操作！';
+                $message.warn(emptyText.value);
+              } else {
+                console.error(e);
+              }
+              dataSource.value = [];
+              metaSource.value = [];
+            }
+          )
+          .finally(() => {
+            confirmLoading.value = false;
+          });
+      }
+
+      function searchFilter(keyword) {
+        if (metaSource.value.length === 0) return;
+        if (!keyword) {
+          dataSource.value = [...metaSource.value];
+        } else {
+          dataSource.value = metaSource.value.filter((item) => item.id.toLowerCase().includes(keyword.toLowerCase()));
+          emptyText.value = dataSource.value.length === 0 ? '无筛选结果' : '暂无数据';
+        }
+        setPagination({ current: 1 });
+      }
+
+      function handleCancel() {
+        closeModal();
+      }
+
+      function handleTrans() {
+        if (!selectedRowKeys.value || selectedRowKeys.value.length == 0) {
+          $message.warning('请选择一张表');
+          return;
+        } else {
+          btnLoading.value = true;
+          let tbNames = selectedRowKeys.value.join(',');
+          defHttp
+            .post({url: Api.trans + tbNames}, {errorMessageMode: "modal"})
+            .then(() => {
+              closeModal();
+            })
+            .finally(() => {
+              btnLoading.value = false
+              emit('success')
+            });
+        }
+      }
+
+      return {
+        emptyText,
+        confirmLoading,
+        btnLoading,
+        metaSource,
+        handleTrans,
+        handleCancel,
+        queryTables,
+        registerModal,
+        registerTable,
+        rowSelection,
+        selectedRowKeys,
+        wrapClassName,
+        modalHeight,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  // update-begin--author:liaozhiyang---date:20240110---for：【QQYUN-7838】online导入到表界面优化
+  @prefix-cls: ~'@{namespace}-online-db-import-form-modal';
+  .@{prefix-cls} {
+    .ant-table-wrapper .ant-table-pagination.ant-pagination {
+      margin-bottom: 0;
+    }
+    .jeecg-basic-table-form-container {
+      padding-bottom: 0;
+      .ant-form {
+        padding: 0;
+      }
+    }
+    .jeecg-basic-table .ant-table-wrapper {
+      padding: 0;
+    }
+    .ant-form-item-label {width:40px;}
+    .ant-modal {top: 20px;}
+  }
+  // update-end--author:liaozhiyang---date:20240110---for：【QQYUN-7838】online导入到表界面优化
+</style>
diff --git a/src/views/super/online/cgform/components/ExtendConfigModal.vue b/src/views/super/online/cgform/components/ExtendConfigModal.vue
new file mode 100644
index 0000000..2ed195f
--- /dev/null
+++ b/src/views/super/online/cgform/components/ExtendConfigModal.vue
@@ -0,0 +1,147 @@
+<template>
+  <ConfigProvider :theme="{ token: { fontSize: 13 } }">
+    <BasicModal @register="registerModal" title="表单扩展配置项" :width="1000" @ok="handleOk" @cancel="handleCancel">
+      <BasicForm @register="registerForm" />
+    </BasicModal>
+  </ConfigProvider>
+</template>
+
+<script lang="ts">
+  import { ConfigProvider } from 'ant-design-vue';
+  import { nextTick, defineComponent } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useExtendConfigFormSchemas } from '../hooks/useSchemas';
+
+  export default defineComponent({
+    name: 'CgformExtConfigModel',
+    components: { BasicModal, BasicForm, ConfigProvider },
+    props: {
+      parentForm: {
+        type: Object,
+        required: true,
+      },
+    },
+    emits: ['register', 'ok'],
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+
+      const { formSchemas } = useExtendConfigFormSchemas(props, {
+        onIsDesformChange,
+        onJoinQueryChange,
+        onReportPrintShowChange,
+        onFormLabelLengthShow,
+      });
+
+      // 表单配置
+      const [registerForm, { resetFields, setFieldsValue, getFieldsValue, clearValidate, validate }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        await resetFields();
+        await setFieldsValue(data.extConfigJson);
+      });
+
+      async function handleOk() {
+        await clearValidate();
+        await nextTick();
+        try {
+          const values = await validate();
+          emit('ok', values);
+          closeModal();
+        } catch (e) {}
+      }
+
+      function handleCancel() {
+        closeModal();
+      }
+
+      // 对接表单设计更改事件
+      function onIsDesformChange(value) {
+        if (value === 'Y') {
+          let { themeTemplate } = props.parentForm.getFieldsValue(['themeTemplate']);
+          if ('erp' === themeTemplate) {
+            props.parentForm.setFieldsValue({ themeTemplate: 'normal' });
+            $message.warning('请注意：erp风格不支持对接表单设计，已自动改为默认风格！');
+          }
+        } else {
+          clearValidate('desFormCode');
+        }
+      }
+
+      // 默认提示积木报表地址
+      const defaultReportPrintUrl = `{{ window._CONFIG['domianURL'] }}/jmreport/view/{积木报表ID}`;
+
+      // 集成积木报表更改事件
+      async function onReportPrintShowChange(value) {
+        let reportPrintUrl = getFieldsValue()['reportPrintUrl'];
+        // 0 = 关闭时，清空默认提示地址
+        if (value === 0) {
+          if (reportPrintUrl === defaultReportPrintUrl) {
+            await setFieldsValue({ reportPrintUrl: '' });
+          }
+        } else if (value === 1) {
+          if (reportPrintUrl === '') {
+            await setFieldsValue({ reportPrintUrl: defaultReportPrintUrl });
+          }
+        }
+        clearValidate('reportPrintUrl');
+      }
+      /**
+       * 2024-03-29
+       * liaozhiyang
+       * 表单统一label长度关闭时,formLabelLength置空
+       */
+      async function onFormLabelLengthShow(value) {
+        if (value == 0) {
+          await setFieldsValue({ formLabelLength: null });
+        }
+        await clearValidate('formLabelLength');
+      }
+
+      // 联合查询更改事件
+      function onJoinQueryChange(value) {
+        if (value === 1) {
+          let { themeTemplate, isTree, tableType } = props.parentForm.getFieldsValue(['themeTemplate', 'isTree', 'tableType']);
+          if ('erp' === themeTemplate) {
+            $message.warning('请注意：erp风格不支持联合查询，配置无效!');
+            setFieldsValue({ joinQuery: 0 });
+          }
+          if ('innerTable' === themeTemplate) {
+            $message.warning('请注意：内嵌风格不支持联合查询，配置无效!');
+            setFieldsValue({ joinQuery: 0 });
+          }
+          if (1 === tableType) {
+            $message.warning('请注意：单表不支持联合查询，配置无效!');
+            setFieldsValue({ joinQuery: 0 });
+          } else if (3 === tableType) {
+            $message.warning('请注意：当前表为附表，请在对应主表配置!');
+            setFieldsValue({ joinQuery: 0 });
+          } else if ('Y' === isTree) {
+            $message.warning('请注意：树形列表不支持联合查询，配置无效!');
+            setFieldsValue({ joinQuery: 0 });
+          }
+        }
+      }
+
+      return {
+        handleOk,
+        handleCancel,
+        registerModal,
+        registerForm,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .onl-cgform-ext-config-form.ant-form-inline {
+    :deep(.ant-form-item) {
+      margin-bottom: 8px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/FileSelectModal.vue b/src/views/super/online/cgform/components/FileSelectModal.vue
new file mode 100644
index 0000000..c1f96c8
--- /dev/null
+++ b/src/views/super/online/cgform/components/FileSelectModal.vue
@@ -0,0 +1,86 @@
+<template>
+  <BasicModal @register="registerModal" title="选择目录" :width="500" @ok="onSubmit" @cancel="onCancel">
+    <a-spin :spinning="loading">
+      <div class="btnArea">
+        <a-button @click="hanldeRefresh">刷新</a-button>
+      </div>
+      <a-directory-tree v-if="directoryTreeShow" :treeData="treeData" :loadData="onLoadData" @select="onSelect" />
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  enum Api {
+    fileTreeUrl = '/online/cgform/head/fileTree',
+    rootFileUrl = '/online/cgform/head/rootFile',
+  }
+
+  export default defineComponent({
+    name: 'FileSelectModal',
+    components: { BasicModal },
+    emits: ['select', 'register'],
+    setup(_, { emit }) {
+      const loading = ref(true);
+      const treeData = ref<any[]>([]);
+      const selectedKey = ref('');
+      const directoryTreeShow = ref(false);
+
+      const [registerModal, { closeModal }] = useModalInner(async () => {
+        selectedKey.value = '';
+        if (treeData.value.length === 0) {
+          loadRoot();
+        }
+      });
+
+      function onSubmit() {
+        emit('select', selectedKey.value);
+        closeModal();
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      async function loadRoot() {
+        loading.value = true;
+        treeData.value = await defHttp.get({ url: Api.rootFileUrl }).finally(() => {
+          loading.value = false;
+          directoryTreeShow.value = true;
+        });
+      }
+
+      async function onLoadData(treeNode) {
+        if (treeNode.dataRef.children) {
+          return;
+        }
+        let params = {
+          parentPath: treeNode.dataRef.key,
+        };
+        treeNode.dataRef.children = await defHttp.get({ url: Api.fileTreeUrl, params });
+        treeData.value = [...treeData.value];
+      }
+
+      function onSelect(selectedKeys) {
+        selectedKey.value = selectedKeys[0];
+      }
+      // update-begin--author:liaozhiyang---date:20231017---for：【QQYUN-6102】新建文件夹需要刷新
+      const hanldeRefresh = () => {
+        selectedKey.value = '';
+        directoryTreeShow.value = false;
+        loadRoot();
+      };
+      // update-begin--author:liaozhiyang---date:20231017---for：【QQYUN-6102】新建文件夹需要刷新
+      return { loading, treeData, onLoadData, onSelect, onSubmit, onCancel, registerModal, hanldeRefresh, directoryTreeShow };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .btnArea {
+    margin-bottom: 10px;
+    text-align: left;
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/auth/AuthManagerDrawer.vue b/src/views/super/online/cgform/components/auth/AuthManagerDrawer.vue
new file mode 100644
index 0000000..28cf4b1
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/AuthManagerDrawer.vue
@@ -0,0 +1,78 @@
+<template>
+  <BasicDrawer @register="registerDrawer" title="权限管理" :width="800" @close="onClose">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane tab="字段权限" key="field" forceRender>
+        <AuthFieldConfig :headId="headId" v-model:authFields="authFields" />
+      </a-tab-pane>
+      <template v-if="hasDataAuth">
+        <a-tab-pane tab="按钮权限" key="button" forceRender>
+          <AuthButtonConfig :headId="headId" :tableType="curTableType" />
+        </a-tab-pane>
+        <a-tab-pane tab="数据权限" key="data" forceRender>
+          <!-- 数据权限不需要实时刷新 故而此处传原表单ID -->
+          <AuthDataConfig :cgformId="cgformId" :authFields="authFields" />
+        </a-tab-pane>
+      </template>
+    </a-tabs>
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import AuthFieldConfig from './manager/AuthFieldConfig.vue';
+  import AuthButtonConfig from './manager/AuthButtonConfig.vue';
+  import AuthDataConfig from './manager/AuthDataConfig.vue';
+
+  export default defineComponent({
+    name: 'AuthManagerDrawer',
+    components: {
+      BasicDrawer,
+      AuthFieldConfig,
+      AuthButtonConfig,
+      AuthDataConfig,
+    },
+    props: {
+      // 1单表 2主表 3附表
+      tableType: {
+        type: Number,
+        default: 1,
+      },
+    },
+    emits: ['register'],
+    setup(props) {
+      const cgformId = ref('');
+      const headId = ref('');
+      const authFields = ref([]);
+      const activeKey = ref('field');
+      const curTableType = ref(1);
+      const hasDataAuth = computed(() => props.tableType == 1 || props.tableType == 2);
+
+      const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
+        cgformId.value = data.cgformId;
+        headId.value = cgformId.value + '?' + new Date().getTime();
+        activeKey.value = 'field';
+        // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-187】去掉子表权限管理中按钮权限的高级查询
+        curTableType.value = data.tableType;
+        // update-end--author:liaozhiyang---date:20240520---for：【TV360X-187】去掉子表权限管理中按钮权限的高级查询
+      });
+
+      function onClose() {
+        closeDrawer();
+      }
+
+      return {
+        activeKey,
+        cgformId,
+        headId,
+        authFields,
+        hasDataAuth,
+        onClose,
+        registerDrawer,
+        curTableType,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/auth/AuthSetterModal.vue b/src/views/super/online/cgform/components/auth/AuthSetterModal.vue
new file mode 100644
index 0000000..c224431
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/AuthSetterModal.vue
@@ -0,0 +1,232 @@
+<template>
+  <BasicModal
+    title="Online权限授权"
+    :width="900"
+    :maskClosable="false"
+    defaultFullscreen
+    :okButtonProps="{ style: { display: 'none' } }"
+    cancelText="关闭"
+    @cancel="closeModal"
+    @register="registerModal"
+    @open-change="hanldeOpenChange"
+  >
+    <a-spin wrapperClassName="authsetting-container" :spinning="loading">
+      <a-row v-if="contentShow">
+        <a-col :span="12">
+          <a-tabs v-model:activeKey="authMode" @change="onAuthModeChange">
+            <a-tab-pane tab="角色授权" key="role" forceRender>
+              <LeftRole ref="roleRef" @select="onSelectRole" />
+            </a-tab-pane>
+            <a-tab-pane tab="部门授权" key="depart" forceRender>
+              <LeftDepart ref="departRef" @select="onSelectDepart" />
+            </a-tab-pane>
+            <a-tab-pane tab="人员授权" key="user" forceRender>
+              <LeftUser ref="userRef" @select="onSelectUser" />
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
+        <a-col :span="1"></a-col>
+        <a-col :span="11">
+          <a-tabs v-model:activeKey="activeKey" @change="onAuthTypeChange">
+            <a-tab-pane tab="字段权限" key="field" forceRender>
+              <AuthFieldTree class="authFieldTree" ref="fieldRef" :cgformId="cgformId" />
+            </a-tab-pane>
+            <template v-if="hasDataAuth">
+              <a-tab-pane tab="按钮权限" key="button" forceRender>
+                <AuthButtonTree class="authButtonTree" ref="buttonRef" :cgformId="cgformId" />
+              </a-tab-pane>
+              <a-tab-pane tab="数据权限" key="data" forceRender>
+                <AuthDataTree class="authDataTree" ref="dataRef" :cgformId="cgformId" />
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import LeftRole from './setter/LeftRole.vue';
+  import LeftDepart from './setter/LeftDepart.vue';
+  import LeftUser from './setter/LeftUser.vue';
+  import AuthFieldTree from './setter/AuthFieldTree.vue';
+  import AuthButtonTree from './setter/AuthButtonTree.vue';
+  import AuthDataTree from './setter/AuthDataTree.vue';
+
+  import { ref, computed, nextTick, defineComponent } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  export default defineComponent({
+    name: 'AuthSetterModal',
+    components: {
+      BasicModal,
+      LeftRole,
+      LeftDepart,
+      LeftUser,
+      AuthFieldTree,
+      AuthButtonTree,
+      AuthDataTree,
+    },
+    props: {
+      // 1单表 2主表 3附表
+      tableType: { type: Number, default: 1 },
+    },
+    setup(props) {
+      const cgformId = ref('');
+      const loading = ref(false);
+      const activeKey = ref('field');
+      const authMode = ref('role');
+      const refs = {
+        fieldRef: ref(),
+        buttonRef: ref(),
+        dataRef: ref(),
+        roleRef: ref(),
+        userRef: ref(),
+        departRef: ref(),
+      };
+      const activeRole = ref('');
+      const hasDataAuth = computed(() => props.tableType == 1 || props.tableType == 2);
+      const contentShow = ref(true);
+      // 表单赋值
+      const [registerModal, { closeModal }] = useModalInner((data) => {
+        activeKey.value = 'field';
+        // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-147】权限设置重置到角色tab
+        authMode.value = 'role';
+        // update-end--author:liaozhiyang---date:20240520---for：【TV360X-147】权限设置重置到角色tab
+        // QQYUN-4285【online表单】字段权限 勾选后不保存，关闭再次打开 还是选中状态
+        cgformId.value = data.cgformId;
+        reset();
+      });
+
+      function getActiveRef<T = any>(key = activeKey.value): T {
+        return refs[key + 'Ref']?.value;
+      }
+
+      async function reset() {
+        await nextTick();
+        clearLeftCurrentTabSelect();
+        getActiveRef().clear();
+      }
+
+      // 选中角色事件
+      function onSelectRole(roleId) {
+        activeRole.value = roleId;
+        onAuthTypeChange(activeKey.value);
+        clearLeftOtherTabSelect();
+      }
+
+      // 选中部门事件
+      function onSelectDepart(departid) {
+        activeRole.value = departid;
+        onAuthTypeChange(activeKey.value);
+        clearLeftOtherTabSelect();
+      }
+
+      // 选中用户事件
+      function onSelectUser(userId) {
+        activeRole.value = userId;
+        onAuthTypeChange(activeKey.value);
+        clearLeftOtherTabSelect();
+      }
+
+      // 清空左侧选中
+      function clearLeftOtherTabSelect() {
+        if (authMode.value == 'role') {
+          refs.departRef.value.clearSelected();
+          refs.userRef.value.clearSelected();
+        } else if (authMode.value == 'depart') {
+          refs.roleRef.value.clearSelected();
+          refs.userRef.value.clearSelected();
+        } else if (authMode.value == 'user') {
+          refs.departRef.value.clearSelected();
+          refs.roleRef.value.clearSelected();
+        }
+      }
+
+      function clearLeftCurrentTabSelect() {
+        if (authMode.value == 'role') {
+          refs.roleRef.value.clearSelected();
+        } else if (authMode.value == 'depart') {
+          refs.departRef.value.clearSelected();
+        } else if (authMode.value == 'user') {
+          refs.userRef.value.clearSelected();
+        }
+        getActiveRef().clearChecked();
+        // update-begin--author:liaozhiyang---date:20231226---for：【QQYUN-7543】左侧没选中角色、部门、人员时，右侧展示空
+        activeRole.value = '';
+        // update-end--author:liaozhiyang---date:20231226---for：【QQYUN-7543】左侧没选中角色、部门、人员时，右侧展示空
+      }
+
+      // 右侧授权类型切换 事件
+      async function onAuthTypeChange(key) {
+        // 切换 右侧tab 如果当前选中角色信息需要加载tab内选中信息
+        await nextTick();
+        if (activeRole.value) {
+          getActiveRef(key).loadChecked(activeRole.value, authMode.value);
+        }
+      }
+
+      // 左侧授权方式切换 事件
+      function onAuthModeChange() {
+        clearLeftCurrentTabSelect();
+      }
+      // update-begin--author:liaozhiyang---date:20240523---for：【TV360X-239】权限授权页面角色分页再次打开弹框时没有初始化为第一页
+      const hanldeOpenChange = (open: boolean) => {
+        contentShow.value = open;
+      };
+      // update-end--author:liaozhiyang---date:20240523---for：【TV360X-239】权限授权页面角色分页再次打开弹框时没有初始化为第一页
+      return {
+        ...refs,
+        cgformId,
+        loading,
+        activeKey,
+        hasDataAuth,
+        authMode,
+        onAuthModeChange,
+        onAuthTypeChange,
+        closeModal,
+        onSelectRole,
+        onSelectDepart,
+        onSelectUser,
+        registerModal,
+        hanldeOpenChange,
+        contentShow,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  // update-begin--author:liaozhiyang---date:20231226---for：【QQYUN-7540】角色权限弹窗右侧内容较长时局部滚动
+  .authsetting-container {
+    height: 100%;
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+    .ant-row,
+    .ant-col {
+      height: 100%;
+    }
+    .ant-tabs {
+      height: 100%;
+      :deep(.ant-tabs-content) {
+        height: 100%;
+      }
+      .ant-tabs-tabpane {
+        height: 100%;
+        .authFieldTree, .authButtonTree, .authDataTree {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          :deep(.ant-tree) {
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+          }
+        }
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20231226---for：【QQYUN-7540】角色权限弹窗右侧内容较长时局部滚动
+</style>
diff --git a/src/views/super/online/cgform/components/auth/auth.api.ts b/src/views/super/online/cgform/components/auth/auth.api.ts
new file mode 100644
index 0000000..810e056
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/auth.api.ts
@@ -0,0 +1,81 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export enum Api {
+  authField = '/online/cgform/api/authColumn',
+  authButton = '/online/cgform/api/authButton',
+  authData = '/online/cgform/api/authData',
+  authPage = '/online/cgform/api/authPage',
+  roleAuth = '/online/cgform/api/roleAuth',
+  saveButton = '/online/cgform/api/roleButtonAuth',
+  saveData = '/online/cgform/api/roleDataAuth',
+  validData = '/online/cgform/api/validAuthData',
+  saveField = '/online/cgform/api/roleColumnAuth',
+  batchAuthField = '/online/cgform/api/authColumn/batch',
+}
+
+// 字段权限，查询数据
+export const authFieldLoadData = (cgformId, params?) => defHttp.get({ url: `${Api.authField}/${cgformId}`, params });
+// 字段权限，更新启用状态
+export const authFieldUpdateStatus = (params) => defHttp.put({ url: Api.authField, params });
+// 字段权限，更新权限状态
+export const authFieldUpdateCheckbox = (params) => defHttp.post({ url: Api.authField, params });
+
+// 字段权限，批量更新启用状态
+export const batchAuthFieldUpdateStatus = (params) => defHttp.put({ url: Api.batchAuthField, params });
+// 字段权限，批量更新权限状态
+export const batchAuthFieldUpdateCheckbox = (params) => defHttp.post({ url: Api.batchAuthField, params });
+
+
+// 按钮权限，查询数据
+export const authButtonLoadData = (cgformId, params?) => defHttp.get({ url: `${Api.authButton}/${cgformId}`, params });
+// 按钮权限，启用
+export const authButtonEnable = (params) => defHttp.post({ url: Api.authButton, params });
+// 按钮权限，禁用
+export const authButtonDisable = (id: string, params?) => defHttp.put({ url: `${Api.authButton}/${id}`, params });
+
+// 数据权限，查询数据
+export const authDataLoadData = (cgformId, params?) => defHttp.get({ url: `${Api.authData}/${cgformId}`, params });
+// 数据权限，更新启用状态
+export const authDataUpdateStatus = (params) => defHttp.put({ url: Api.authData, params });
+// 数据权限，保存或修改
+export const authDataSaveOrUpdate = (params, isUpdate: boolean) => {
+  if (isUpdate) {
+    return defHttp.put({ url: Api.authData, params });
+  } else {
+    return defHttp.post({ url: Api.authData, params });
+  }
+};
+// 数据权限，删除
+export const authDataDelete = (id: string, params?) => defHttp.delete({ url: `${Api.authData}/${id}`, params });
+
+export const authFieldLoadTree = (cgformId: string, authType: number, params?) => {
+  let url = `${Api.authPage}/${cgformId}/${authType}`;
+  return defHttp.get({ url, params });
+};
+
+export const authDataLoadTree = (cgformId: string, params?) => {
+  let url = `${Api.validData}/${cgformId}`;
+  return defHttp.get({ url, params });
+};
+
+export const authButtonLoadTree = (cgformId: string, authType: number, params?) => {
+  let url = `${Api.authPage}/${cgformId}/${authType}`;
+  return defHttp.get({ url, params });
+};
+
+export const loadRoleAuthChecked = (params) => defHttp.get({ url: Api.roleAuth, params });
+
+export const saveAuthField = (roleId: string, cgformId: string, params?) => {
+  let url = `${Api.saveField}/${roleId}/${cgformId}`;
+  return defHttp.post({ url, params });
+};
+
+export const saveAuthData = (roleId: string, cgformId: string, params?) => {
+  let url = `${Api.saveData}/${roleId}/${cgformId}`;
+  return defHttp.post({ url, params });
+};
+
+export const saveAuthButton = (roleId: string, cgformId: string, params?) => {
+  let url = `${Api.saveButton}/${roleId}/${cgformId}`;
+  return defHttp.post({url, params}, {successMessageMode: 'none', isTransformResponse: false});
+};
diff --git a/src/views/super/online/cgform/components/auth/auth.data.ts b/src/views/super/online/cgform/components/auth/auth.data.ts
new file mode 100644
index 0000000..63f3f6b
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/auth.data.ts
@@ -0,0 +1,235 @@
+import { computed } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { useConditionFilter } from '/@/utils/index';
+
+// 字段权限列配置
+export const authFieldColumns: BasicColumn[] = [
+  {
+    title: '启用',
+    dataIndex: 'switch',
+    width: 100,
+    align: 'center',
+    slots: { customRender: 'switch' },
+  },
+  {
+    title: '字段名称',
+    width: 200,
+    dataIndex: 'code',
+  },
+  {
+    title: '字段描述',
+    // width: 200,
+    dataIndex: 'title',
+  },
+  {
+    title: '列表控制',
+    dataIndex: 'list',
+    width: 120,
+    slots: { customRender: 'list' },
+  },
+  {
+    title: '表单控制',
+    dataIndex: 'form',
+    width: 180,
+    slots: { customRender: 'form' },
+  },
+];
+
+// 按钮权限列配置
+export const authButtonColumns: BasicColumn[] = [
+  {
+    title: '启用',
+    dataIndex: 'switch',
+    width: 80,
+    slots: { customRender: 'switch' },
+  },
+  {
+    title: '名称',
+    dataIndex: 'title',
+  },
+  {
+    title: '编码',
+    dataIndex: 'code',
+  },
+  {
+    title: '权限控制',
+    dataIndex: 'control',
+    width: 180,
+    slots: { customRender: 'control' },
+  },
+];
+
+export const authButtonFixedList = [
+  { code: 'add', title: '新增', status: 0 },
+  { code: 'edit', title: '编辑', status: 0 },
+  { code: 'detail', title: '详情', status: 0 },
+  { code: 'delete', title: '删除', status: 0 },
+  { code: 'batch_delete', title: '批量删除', status: 0 },
+  { code: 'export', title: '导出', status: 0 },
+  { code: 'import', title: '导入', status: 0 },
+  { code: 'query', title: '查询', status: 0 },
+  { code: 'reset', title: '重置', status: 0 },
+  { code: 'aigc_mock_data', title: '生成测试数据', status: 0 },
+  { code: 'bpm', title: '提交流程', status: 0 },
+  { code: 'super_query', title: '高级查询', status: 0 },
+  { code: 'form_confirm', title: '确定', status: 0 },
+];
+
+export const USE_SQL_RULES = 'USE_SQL_RULES';
+// 数据权限列配置
+export const authDataColumns: BasicColumn[] = [
+  {
+    title: '启用',
+    dataIndex: 'switch',
+    width: 80,
+    slots: { customRender: 'switch' },
+  },
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 130,
+  },
+  {
+    title: '规则描述',
+    dataIndex: 'description',
+    customRender({ record: { ruleOperator, ruleValue, ruleColumn } }) {
+      if (ruleOperator == USE_SQL_RULES) {
+        return `自定义SQL: ${ruleValue}`;
+      } else {
+        return `${ruleColumn} ${ruleOperator} ${ruleValue}`;
+      }
+    },
+  },
+];
+
+export function useAuthDataFormSchemas(props, methods) {
+  const formSchemas = computed<FormSchema[]>(() => [
+    {
+      label: '规则名称',
+      field: 'ruleName',
+      required: true,
+      component: 'Input',
+      componentProps: {
+        onChange: methods.onRuleNameChange,
+      },
+    },
+    {
+      label: '规则字段',
+      field: 'ruleColumn',
+      component: 'JSearchSelect',
+      componentProps: {
+        dictOptions: props.authFields,
+        getPopupContainer: () => document.body,
+        onChange: methods.onRuleColumnChange,
+      },
+      dynamicRules({ model }) {
+        return [{ required: model.ruleOperator != USE_SQL_RULES, message: '请输入规则字段' }];
+      },
+      show: ({ model }) => model.ruleOperator != USE_SQL_RULES,
+    },
+    // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-201】权限管理条件根据控件过滤
+    {
+      label: '条件规则',
+      field: 'ruleOperator',
+      required: true,
+      component: 'JDictSelectTag',
+      componentProps: {
+        options: [],
+        onChange: methods.onRuleOperatorChange,
+        getPopupContainer: () => document.body,
+      },
+      dynamicPropskey: 'options',
+      dynamicPropsVal: ({ model, field }) => {
+        const getFieldType = (type) => {
+          if (['BigDecimal', 'double', 'int'].includes(type)) {
+            return 'number';
+          } else {
+            return;
+          }
+        };
+        const { filterCondition } = useConditionFilter();
+        if (model.ruleColumn) {
+          const findItem = props.authFields.find((item) => item.value === model.ruleColumn) ?? {};
+          const result = filterCondition({ view: findItem.view, fieldType: getFieldType(findItem.dbType) }).map((item) => ({
+            label: item.title ?? item.label,
+            value: item.val ?? item.value,
+          }));
+          result.push({ value: 'USE_SQL_RULES', label: '自定义SQL' });
+          return result;
+        } else {
+          return [{ value: 'USE_SQL_RULES', label: '自定义SQL' }];
+        }
+      },
+    },
+    // {
+    //   label: '条件规则',
+    //   field: 'ruleOperator',
+    //   required: true,
+    //   component: 'JDictSelectTag',
+    //   componentProps: {
+    //     dictCode: 'rule_conditions',
+    //     onChange: methods.onRuleOperatorChange,
+    //     getPopupContainer: () => document.body,
+    //   },
+    // },
+    // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-201】权限管理条件根据控件过滤
+    {
+      label: '规则值',
+      field: 'ruleValue',
+      required: true,
+      // -update-begin--author:liaozhiyang---date:20240607---for：【TV360X-536】数据权限配置配置优化及新增JInputSelect组件
+      component: 'JInputSelect',
+      componentProps: {
+        selectPlaceholder: '可选择系统变量',
+        inputPlaceholder: '请输入',
+        getPopupContainer: () => document.body,
+        selectWidth: '200px',
+        options: [
+          {
+            label: '登录用户账号',
+            value: '#{sys_user_code}',
+          },
+          {
+            label: '登录用户名称',
+            value: '#{sys_user_name}',
+          },
+          {
+            label: '当前日期',
+            value: '#{sys_date}',
+          },
+          {
+            label: '当前时间',
+            value: '#{sys_time}',
+          },
+          {
+            label: '登录用户部门',
+            value: '#{sys_org_code}',
+          },
+          {
+            label: '用户拥有的部门',
+            value: '#{sys_multi_org_code}',
+          },
+          {
+            label: '登录用户租户',
+            value: '#{tenant_id}',
+          },
+        ],
+      },
+      // -update-end--author:liaozhiyang---date:20240607---for：【TV360X-536】数据权限配置配置优化及新增JInputSelect组件
+    },
+    {
+      label: '状态',
+      field: 'status',
+      required: true,
+      component: 'RadioButtonGroup',
+      componentProps: {
+        options: [
+          { label: '有效', value: 1 },
+          { label: '无效', value: 0 },
+        ],
+      },
+      defaultValue: 1,
+    },
+  ]);
+  return { formSchemas };
+}
diff --git a/src/views/super/online/cgform/components/auth/manager/AuthButtonConfig.vue b/src/views/super/online/cgform/components/auth/manager/AuthButtonConfig.vue
new file mode 100644
index 0000000..32aa925
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/manager/AuthButtonConfig.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="auth-field-config">
+    <BasicTable @register="registerTable">
+      <template #switch="{ text, record }">
+        <a-switch size="small" :checked="record.status === 1" @change="(flag) => onUpdateStatus(flag, record)" />
+      </template>
+
+      <template #control> 可见 </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, watch } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { authButtonLoadData, authButtonEnable, authButtonDisable } from '../auth.api';
+  import { authButtonColumns, authButtonFixedList } from '../auth.data';
+
+  export default defineComponent({
+    name: 'AuthButtonConfig',
+    components: { BasicTable },
+    props: {
+      headId: {
+        type: String,
+        default: '',
+        required: true,
+      },
+      // 1单表 2主表 3附表
+      tableType: {
+        type: Number,
+        default: 1,
+      },
+    },
+    setup(props) {
+      const cgformId = ref('');
+      const pageType = ref(2);
+      const pageControlList = ref(3);
+      const pageControlForm = ref(5);
+      const [registerTable, { reload, getTableRef, setPagination }] = useTable({
+        api: loadData,
+        rowKey: 'code',
+        bordered: true,
+        columns: authButtonColumns,
+        showIndexColumn: false,
+      });
+
+      watch(
+        () => props.headId,
+        (headId) => {
+          cgformId.value = headId.split('?')[0];
+          // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-149】点击权限控制进入页面后，分页没有重置
+          getTableRef().value && setPagination({ current: 1, pageSize: 10 });
+          // update-end--author:liaozhiyang---date:20240520---for：【TV360X-149】点击权限控制进入页面后，分页没有重置
+          reload().catch(() => null);
+        },
+        { immediate: true }
+      );
+
+      /**
+       * 获取内置按钮
+       * liaozhiyang
+       * 2024-06-14
+       * 【TV360X-1017】子表权限管理按钮权限根据主表主题模版只显示所需按钮
+       * */
+      const getButtonList = (res) => {
+        const buttons = cloneDeep(authButtonFixedList);
+        if (res.mainRelationType != null && res.mainThemeTemplate != null && props.tableType == 3) {
+          // 子表（一对一、一对多）
+          let result: any = [];
+          switch (res.mainThemeTemplate) {
+            case 'normal':
+            case 'innerTable':
+            case 'tab':
+              if (res.mainRelationType == 1) {
+                // 一对一
+                result = [];
+              } else {
+                // 一对多
+                result = buttons.filter((item) => ['add', 'update', 'batch_delete'].includes(item.code));
+              }
+              break;
+            case 'erp':
+              result = buttons.filter((item) => !['super_query'].includes(item.code));
+              break;
+          }
+          return result;
+        } else {
+          // 主表\单表（全显示）
+          return buttons;
+        }
+      };
+
+      // 加载数据
+      async function loadData(params) {
+        let result = await authButtonLoadData(cgformId.value, params);
+        let { authList, buttonList } = result;
+        let dataSource: Recordable[] = [];
+        // concat 固定按钮
+        // -update-begin--author:liaozhiyang---date:20240614---for：【TV360X-1017】子表权限管理按钮权限根据主表主题模版只显示所需按钮
+        // 获取内置按钮
+        const buttons = getButtonList(result);
+        // -update-end--author:liaozhiyang---date:20240614---for：【TV360X-1017】子表权限管理按钮权限根据主表主题模版只显示所需按钮
+        for (let btn of buttons) {
+
+          // 去除重复数据
+          const findBtnIdx = buttonList.findIndex((item) => item.buttonCode === btn.code);
+          const findBtn: Recordable = {}
+          if (findBtnIdx !== -1) {
+            findBtn.title = buttonList[findBtnIdx].buttonName;
+            buttonList.splice(findBtnIdx, 1);
+          }
+
+          let item = {
+            status: 0,
+            page: pageControlList.value,
+          };
+          let auth = authList.find((auth) => auth.code == btn.code);
+          Object.assign(btn, item, auth, findBtn);
+          dataSource.push(btn);
+        }
+        // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-187】去掉子表权限管理中按钮权限的高级查询
+        if (props.tableType == 3) {
+          const findIndex = dataSource.findIndex((item) => item.code === 'super_query');
+          if (findIndex != -1) {
+            dataSource.splice(findIndex, 1);
+          }
+        }
+        // update-end--author:liaozhiyang---date:20240520---for：【TV360X-187】去掉子表权限管理中按钮权限的高级查询
+        // update-begin--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据
+        if ([2, 3].includes(+props.tableType)) {
+          const findIndex = dataSource.findIndex((item) => item.code == 'aigc_mock_data');
+          if (findIndex != -1) {
+            dataSource.splice(findIndex, 1);
+          }
+        }
+        // update-end--author:liaozhiyang---date:20250403---for：【QQYUN-11801】生成测试数据
+        // concat 查询的自定义按钮
+        return concatCustomButton(authList, buttonList, dataSource);
+      }
+
+      
+
+      function concatCustomButton(authList: any[], buttonList: any[], dataSource: any[]) {
+        for (let btn of buttonList) {
+          //update-begin-author:taoyan date:2022-5-25 for: VUEN-1103 自定义按钮，开启权限控制后，再打开未保存上
+          let auth = authList.find((auth) => auth.code == btn.buttonCode);
+          //update-end-author:taoyan date:2022-5-25 for: VUEN-1103 自定义按钮，开启权限控制后，再打开未保存上
+          let item = {
+            code: btn.buttonCode,
+            title: btn.buttonName,
+            status: 0,
+            page: btn.buttonStyle == 'form' ? pageControlForm.value : pageControlList.value,
+          };
+          dataSource.push(Object.assign(item, auth));
+        }
+        return dataSource;
+      }
+
+      async function onUpdateStatus(flag, record) {
+        flag ? doEnableAuthButton(record) : doDisableAuthButton(record);
+      }
+
+      // 启用按钮权限
+      async function doEnableAuthButton(record: Recordable) {
+        let result = await authButtonEnable({
+          id: record.id,
+          code: record.code,
+          page: record.page,
+          cgformId: cgformId.value,
+          type: pageType.value,
+          control: 5,
+          status: 1,
+        });
+        record.id = result.id;
+        record.status = 1;
+      }
+
+      // 禁用按钮权限
+      async function doDisableAuthButton(record: Recordable) {
+        await authButtonDisable(record.id);
+        record.status = 0;
+      }
+
+      return { registerTable, onUpdateStatus };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgform/components/auth/manager/AuthDataConfig.vue b/src/views/super/online/cgform/components/auth/manager/AuthDataConfig.vue
new file mode 100644
index 0000000..3652864
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/manager/AuthDataConfig.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :loading="loading">
+      <template #tableTitle>
+        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+      </template>
+
+      <template #switch="{ text, record }">
+        <a-switch size="small" :checked="record.status === 1" @click="() => onUpdateStatus(record)" />
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!-- 子表单 -->
+    <BasicModal v-bind="formModalProps" @openChange="handleOpenChange">
+      <a-spin :spinning="formModalProps.confirmLoading">
+        <BasicForm @register="registerForm" />
+      </a-spin>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { watch, defineComponent, ref, reactive, nextTick } from 'vue';
+  import { BasicTable, TableAction, ActionItem, useTable } from '/@/components/Table';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { authDataDelete, authDataLoadData, authDataSaveOrUpdate, authDataUpdateStatus } from '../auth.api';
+  import { authDataColumns, useAuthDataFormSchemas, USE_SQL_RULES } from '../auth.data';
+
+  export default defineComponent({
+    name: 'AuthDataConfig',
+    components: { BasicTable, TableAction, BasicModal, BasicForm },
+    props: {
+      cgformId: { type: String, required: true },
+      authFields: { type: Array, required: true },
+    },
+    setup(props) {
+      const loading = ref(false);
+      const [registerTable, { reload, setLoading }] = useTable({
+        api: (params) => authDataLoadData(props.cgformId, params),
+        rowKey: 'id',
+        bordered: true,
+        columns: authDataColumns,
+        showIndexColumn: false,
+        // 操作列
+        actionColumn: {
+          width: 120,
+          title: '操作',
+          fixed: false,
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+      watch(loading, (l) => setLoading(l));
+      const [registerModal, { openModal, closeModal }] = useModal();
+      const formModalProps = reactive({
+        title: '',
+        width: 800,
+        confirmLoading: false,
+        onOk: onSubmit,
+        onCancel: closeModal,
+        onRegister: registerModal,
+      });
+      let isUpdate = false;
+      let formRecord = {};
+      let isManualEnter = false;
+      const { formSchemas } = useAuthDataFormSchemas(props, {
+        onRuleOperatorChange,
+        onRuleColumnChange,
+        onRuleNameChange,
+      });
+      // 表单配置
+      const [registerForm, { validate, resetFields, setFieldsValue, getFieldsValue, clearValidate, updateSchema }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      watch(
+        () => props.cgformId,
+        () => {
+          reload().catch(() => null);
+        },
+        { immediate: true }
+      );
+
+      async function openFormModal(data) {
+        isUpdate = data.isUpdate ?? false;
+        formModalProps.title = data.title;
+        openModal();
+        await nextTick();
+        await resetFields();
+        formRecord = Object.assign({}, data.record);
+        await setFieldsValue(formRecord);
+      }
+
+      function onAdd() {
+        openFormModal({ title: '新增' });
+      }
+
+      function onEdit(record) {
+        openFormModal({ title: '编辑', record, isUpdate: true });
+      }
+
+      function onDelete(id) {
+        loading.value = true;
+        authDataDelete(id)
+          .then(reload)
+          .finally(() => (loading.value = false));
+      }
+
+      async function onSubmit() {
+        try {
+          formModalProps.confirmLoading = true;
+          let formData = await validate();
+          formData = Object.assign({}, formRecord, formData);
+          if (formData.ruleOperator == USE_SQL_RULES) {
+            formData.ruleColumn = '';
+          }
+          formData.cgformId = props.cgformId;
+          await authDataSaveOrUpdate(formData, isUpdate);
+          reload();
+          closeModal();
+        } finally {
+          formModalProps.confirmLoading = false;
+        }
+      }
+
+      function onUpdateStatus(record) {
+        loading.value = true;
+        let status = Math.abs(record.status - 1);
+        authDataUpdateStatus({ ...record, status })
+          .then(() => {
+            record.status = status;
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+      }
+
+      function onRuleOperatorChange(val) {
+        if (val == USE_SQL_RULES) {
+          setFieldsValue({
+            ruleColumn: '',
+            ruleValue: '',
+          });
+          updateSchema({
+            field: 'ruleValue',
+            component: 'InputTextArea',
+          });
+          clearValidate(['ruleValue']);
+        } else {
+          updateSchema({
+            field: 'ruleValue',
+            component: 'JInputSelect',
+          });
+        }
+      }
+      // -update-begin--author:liaozhiyang---date:20240607---for：【TV360X-536】数据权限配置配置优化及新增JInputSelect组件
+      function onRuleColumnChange(val) {
+        const values = getFieldsValue();
+        if (!values.ruleName || (values.ruleName && !isManualEnter)) {
+          const findItem: any = props.authFields.find((item: any) => item.value === val);
+          const text = findItem ? findItem.text : val;
+          setFieldsValue({
+            ruleName: text,
+          });
+        }
+      }
+      function onRuleNameChange(e) {
+        if (e.target.value.length) {
+          isManualEnter = true;
+        } else {
+          isManualEnter = false;
+        }
+      }
+      function handleOpenChange(visible) {
+        if (visible) {
+          isManualEnter = false;
+        }
+      }
+      // -update-end--author:liaozhiyang---date:20240607---for：【TV360X-536】数据权限配置配置优化及新增JInputSelect组件
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: () => onEdit(record),
+          },
+        ];
+      }
+
+      /**
+       * 下拉操作栏
+       */
+      function getDropDownAction(record): ActionItem[] {
+        return [
+          {
+            label: '删除',
+            popConfirm: {
+              title: '确定删除吗？',
+              placement: 'left',
+              confirm: () => onDelete(record.id),
+            },
+          },
+        ];
+      }
+
+      return {
+        loading,
+        formModalProps,
+        onAdd,
+        onUpdateStatus,
+        getTableAction,
+        getDropDownAction,
+        registerTable,
+        registerModal,
+        registerForm,
+        handleOpenChange,
+      };
+    },
+  });
+</script>
diff --git a/src/views/super/online/cgform/components/auth/manager/AuthFieldConfig.vue b/src/views/super/online/cgform/components/auth/manager/AuthFieldConfig.vue
new file mode 100644
index 0000000..3af8ed2
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/manager/AuthFieldConfig.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="auth-field-config">
+    <BasicTable @register="registerTable" @change="handleTableChange" :loading="tableLoading">
+      <!-- update-begin--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选 -->
+      <template #headerCell="{ column }">
+        <template v-if="column.dataIndex === 'switch'">
+          <a-switch :loading="allSloading" v-model:checked="allSwitch" size="small" @change="handleChangeSwitch"></a-switch>启用
+        </template>
+        <template v-else-if="column.dataIndex === 'list'">
+          <a-checkbox :indeterminate="listIndeterminate" v-model:checked="allListControl" :disabled="!allSwitch" @change="handleChangeList">{{ column.customTitle }}</a-checkbox>
+        </template>
+        <template v-else-if="column.dataIndex === 'form'">
+          <a-checkbox :indeterminate="formIndeterminate" v-model:checked="allFormControl" :disabled="!allSwitch" @change="handleChangeForm">{{ column.customTitle }}</a-checkbox>
+        </template>
+        <template v-else>
+          {{ column.customTitle }}
+        </template>
+      </template>
+      <!-- update-end--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选 -->
+      <template #switch="{ text, record }">
+        <a-switch size="small" :checked="record.status === 1" @change="(flag) => onUpdateStatus(flag, record)" />
+      </template>
+
+      <template #list="{ text, record }">
+        <a-checkbox :checked="record.listShow" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 1)"> 可见 </a-checkbox>
+      </template>
+
+      <template #form="{ text, record }">
+        <a-checkbox :checked="record.formShow" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 2)"> 可见 </a-checkbox>
+        <a-checkbox :checked="record.formEditable" :disabled="record.status === 0" @change="(e) => onCheckboxChange(e, record, 3)">
+          可编辑
+        </a-checkbox>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts">
+  import { watch, defineComponent, ref } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { authFieldLoadData, authFieldUpdateCheckbox, authFieldUpdateStatus, batchAuthFieldUpdateStatus, batchAuthFieldUpdateCheckbox } from '../auth.api';
+  import { authFieldColumns } from '../auth.data';
+
+  export default defineComponent({
+    name: 'AuthFieldConfig',
+    components: { BasicTable },
+    props: {
+      headId: {
+        type: String,
+        default: '',
+        required: true,
+      },
+    },
+    emits: ['update:authFields'],
+    setup(props, { emit }) {
+      const cgformId = ref('');
+      const [registerTable, { reload, getTableRef, setPagination }] = useTable({
+        api: loadData,
+        rowKey: 'code',
+        bordered: true,
+        columns: authFieldColumns,
+        showIndexColumn: false,
+      });
+      const allSwitch = ref(false);
+      const allListControl = ref(false);
+      const allFormControl = ref(false);
+      const allSloading = ref(false);
+      const tableLoading = ref(false);
+      const formIndeterminate = ref(false);
+      const listIndeterminate = ref(false);
+
+      watch(
+        () => props.headId,
+        (headId) => {
+          cgformId.value = headId.split('?')[0];
+          // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-149】点击权限控制进入页面后，分页没有重置
+          getTableRef().value && setPagination({ current: 1, pageSize: 10 });
+          // update-end--author:liaozhiyang---date:20240520---for：【TV360X-149】点击权限控制进入页面后，分页没有重置
+          reload().catch(() => null);
+        },
+        { immediate: true }
+      );
+
+      // 加载数据
+      async function loadData(params) {
+        const exclude = ['id'];
+        let data = await authFieldLoadData(cgformId.value, params);
+        let fields: any[] = [];
+        let filterData: any[] = [];
+        data.forEach((item) => {
+          if (exclude.indexOf(item.code) < 0) {
+            if (item.isShowForm == 1 || item.isShowList == 1) {
+              filterData.push(item);
+            }
+            //update-begin-author:taoyan date:2022-8-9 for: VUEN-1957 【online】同步数据库新增字段未提交
+            if(item.dbIsPersist==1){
+              fields.push({
+                text: item.title,
+                value: item.code,
+                // -update-begin--author:liaozhiyang---date:20240617---for：【TV360X-201】权限管理条件根据控件过滤
+                view: item.fieldShowType,
+                dbType: item.dbType,
+                // -update-end--author:liaozhiyang---date:20240617---for：【TV360X-201】权限管理条件根据控件过滤
+              });
+            }
+            //update-end-author:taoyan date:2022-8-9 for: VUEN-1957 【online】同步数据库新增字段未提交
+          }
+        });
+        
+        emit('update:authFields', fields);
+        // update-begin--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+        setCurDataStatus(params.pageNo, params.pageSize, filterData);
+        // update-end--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+        return filterData;
+      }
+
+      async function onUpdateStatus(flag, record) {
+        await authFieldUpdateStatus({
+          cgformId: cgformId.value,
+          code: record.code,
+          status: flag ? 1 : 0,
+        });
+        if (!(record.formEditable || record.formShow || record.listShow)) {
+          record.formEditable = true;
+          record.formShow = true;
+          record.listShow = true;
+        }
+        record.status = Math.abs(record.status - 1);
+        // update-begin--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+        itemChange();
+        // update-end--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+      }
+
+      async function onCheckboxChange(event, record, switchFlag) {
+        let checked = event.target.checked;
+        await authFieldUpdateCheckbox({
+          cgformId: cgformId.value,
+          code: record.code,
+          switchFlag: switchFlag,
+          listShow: checked,
+          formShow: checked,
+          formEditable: checked,
+        });
+        if (switchFlag == 1) {
+          record.listShow = checked;
+        } else if (switchFlag == 2) {
+          record.formShow = checked;
+        } else if (switchFlag == 3) {
+          record.formEditable = checked;
+        }
+        // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+        if (record.listShow === false && record.formShow === false && record.formEditable === false) {
+          record.status = 0;
+        }
+        // update-end--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+        // update-begin--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+        itemChange();
+        // update-end--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+      }
+      // update-begin--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+      // 加载每一页数据时设置状态
+      function setCurDataStatus(current, pageSize, data) {
+        const result: any = [];
+        if (data?.length) {
+          const max = current * pageSize > data.length ? data.length : current * pageSize;
+          for (let i = current * pageSize - pageSize; i < max; i++) {
+            const item = data[i];
+            result.push(item);
+          }
+        }
+        if (result.length) {
+          // 默认都是true，只有一项为false则总开关即是false
+          allSwitch.value = true;
+          allListControl.value = true;
+          allFormControl.value = true;
+          result.forEach((item) => {
+            if (allSwitch.value && item.status == 0) {
+              allSwitch.value = false;
+            }
+            if (allListControl.value && item.listShow == false) {
+              allListControl.value = false;
+            }
+            if (allFormControl.value && (item.formEditable == false || item.formShow == false)) {
+              allFormControl.value = false;
+            }
+          });
+          if (allListControl.value == true) {
+            listIndeterminate.value = false;
+          } else {
+            const findItem = result.find((item) => item.listShow);
+            if (findItem) {
+              listIndeterminate.value = true;
+            } else {
+              listIndeterminate.value = false;
+            }
+          }
+          if (allFormControl.value == true) {
+            formIndeterminate.value = false;
+          } else {
+            const findItem = result.find((item) => item.formEditable || item.formShow);
+            if (findItem) {
+              formIndeterminate.value = true;
+            } else {
+              formIndeterminate.value = false;
+            }
+          }
+        } else {
+          allSwitch.value = false;
+          allListControl.value = false;
+          allFormControl.value = false;
+        }
+      }
+      // 单独项状态变动时
+      const itemChange = () => {
+        const { current, pageSize } = getTableRef().value!.getPaginationRef();
+        const allDataSource = getTableRef().value!.getDataSource();
+        setCurDataStatus(current, pageSize, allDataSource);
+      };
+
+      // 获取某页dataSource
+      const getCurrentDataSource = (current, pageSize) => {
+        const result: any = [];
+        const allDataSource = getTableRef().value!.getDataSource();
+        if (allDataSource?.length) {
+          const max = current * pageSize > allDataSource.length ? allDataSource.length :current * pageSize;
+          for (let i = current * pageSize - pageSize; i < max; i++) {
+            const item = allDataSource[i];
+            result.push(item);
+          }
+        }
+        return result;
+      };
+      // 开关（表头|总的）
+      const handleChangeSwitch = async (checked) => {
+        tableLoading.value = true;
+        allSwitch.value = checked;
+        const { current, pageSize } = getTableRef().value!.getPaginationRef();
+        const dataSource = getCurrentDataSource(current, pageSize);
+        let params = dataSource.map((item) => ({ cgformId: item.cgformId, code: item.code, status: checked ? 1 : 0 }));
+        allSloading.value = true;
+        await batchAuthFieldUpdateStatus(params);
+        dataSource.forEach((item) => {
+          if (checked) {
+            item.status = 1;
+          } else {
+            item.status = 0;
+          }
+          // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-1992】数据权限-字段权限全选启用，列表控制和表单控制勾选
+          if (!(item.formEditable || item.formShow || item.listShow)) {
+            item.formEditable = true;
+            item.formShow = true;
+            item.listShow = true;
+          }
+        });
+        // update-end--author:liaozhiyang---date:20240807---for：【TV360X-1992】数据权限-字段权限全选启用，列表控制和表单控制勾选
+        allSloading.value = false;
+        tableLoading.value = false;
+        const allDataSource = getTableRef().value!.getDataSource();
+        setCurDataStatus(current, pageSize, allDataSource);
+      };
+      const handleChangeList = async (e) => {
+        tableLoading.value = true;
+        const checked = e.target.checked;
+        allListControl.value = checked;
+        const { current, pageSize } = getTableRef().value!.getPaginationRef();
+        const dataSource = getCurrentDataSource(current, pageSize);
+        let params = dataSource.map((item) => ({ cgformId: item.cgformId, code: item.code, switchFlag: 1, listShow: !!checked }));
+        await batchAuthFieldUpdateCheckbox(params);
+        dataSource.forEach((item) => {
+          item.listShow = !!checked;
+          // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+          if (item.listShow === false && item.formShow === false && item.formEditable === false) {
+            item.status = 0;
+            allSwitch.value = false;
+          }
+          // update-end--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+        });
+        if (checked) {
+          listIndeterminate.value = false;
+        }
+        tableLoading.value = false;
+      };
+      const handleChangeForm = async (e) => {
+        tableLoading.value = true;
+        const checked = e.target.checked;
+        allFormControl.value = checked;
+        const { current, pageSize } = getTableRef().value!.getPaginationRef();
+        const dataSource = getCurrentDataSource(current, pageSize);
+        const params = [
+          ...dataSource.map((item) => ({ cgformId: item.cgformId, code: item.code, switchFlag: 4, formShow: !!checked, formEditable: !!checked  })),
+        ];
+        await batchAuthFieldUpdateCheckbox(params);
+        dataSource.forEach((item) => {
+          item.formEditable = !!checked;
+          item.formShow = !!checked;
+          // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+          if (item.listShow === false && item.formShow === false && item.formEditable === false) {
+            item.status = 0;
+            allSwitch.value = false;
+          }
+          // update-end--author:liaozhiyang---date:20240807---for：【TV360X-2087】依次去掉当前行的列表控制可见、表单控制可见、可编辑时启动状态没变
+        });
+        if (checked) {
+          formIndeterminate.value = false;
+        }
+        tableLoading.value = false;
+      };
+      // 监听页码变动
+      const handleTableChange = (pagination) => {
+        // const { current, pageSize } = pagination;
+        // const dataSource = getCurrentDataSource(current, pageSize);
+        // // 先置初始值
+        // allSwitch.value = false;
+        // if(dataSource.length) {
+
+        // }
+      }
+      // update-end--author:liaozhiyang---date:20240612---for：【TV360X-148】权限配置加全选
+      return { registerTable, onUpdateStatus, onCheckboxChange, handleChangeSwitch, allSwitch, allFormControl, allListControl, allSloading, handleTableChange, handleChangeList, handleChangeForm, tableLoading, formIndeterminate, listIndeterminate, };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .auth-field-config :deep(.ant-checkbox + span) {
+    padding-left: 2px;
+  }
+  :deep(.ant-table-thead) {
+    .ant-switch {
+      margin-right: 5px;
+    }
+    .ant-checkbox-wrapper {
+      .ant-checkbox {
+        margin-right: 4px;
+      }
+      .ant-checkbox-disabled + span {
+        color: #000;
+      }
+    }
+  }
+  html[data-theme='light'] {
+    .auth-field-config {
+      :deep(.ant-table-thead) {
+        .ant-checkbox-wrapper {
+          .ant-checkbox-disabled + span {
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+  html[data-theme='dark'] {
+    .auth-field-config {
+      :deep(.ant-table-thead) {
+        .ant-checkbox-wrapper {
+          color: rgba(255, 255, 255, 0.65);
+          .ant-checkbox-disabled + span {
+            color: rgba(255, 255, 255, 0.65);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/auth/setter/AuthButtonTree.vue b/src/views/super/online/cgform/components/auth/setter/AuthButtonTree.vue
new file mode 100644
index 0000000..fed7e33
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/AuthButtonTree.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <a-empty v-if="disabled" description="请先选中左侧角色/部门/用户" />
+    <a-empty v-else-if="treeData.length === 0" description="无权限信息" />
+    <template v-else>
+      <div class="onl-auth-tree-btns">
+        <a-button @click="onRefresh" size="small" type="primary" preIcon="ant-design:redo" ghost>刷新</a-button>
+        <a-button @click="onSave" size="small" type="primary" preIcon="ant-design:save" ghost>保存</a-button>
+      </div>
+      <a-tree
+        checkable
+        v-model:checkedKeys="checkedKeys"
+        :expandedKeys="expandedKeys"
+        :autoExpandParent="autoExpandParent"
+        :treeData="treeData"
+        @expand="onExpand"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, watch, computed } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { authButtonFixedList } from '../auth.data';
+  import { authButtonLoadTree, loadRoleAuthChecked, saveAuthButton } from '../auth.api';
+
+  export default defineComponent({
+    name: 'AuthButtonTree',
+    props: {
+      cgformId: { type: String, required: true },
+    },
+    setup(props) {
+      const { createMessage: $message, createSuccessModal } = useMessage();
+      const roleId = ref('');
+      const authType = ref(2);
+      const autoExpandParent = ref(true);
+      const expandedKeys = ref<string[]>([]);
+      const checkedKeys = ref<string[]>([]);
+
+      const treeData = ref<Recordable[]>([]);
+      const authMode = ref('');
+      const disabled = computed(() => !roleId.value);
+      watch(() => props.cgformId, loadTree, { immediate: true });
+
+      async function loadTree() {
+        if (!props.cgformId) return;
+        let result = (await authButtonLoadTree(props.cgformId, authType.value)) as Recordable[];
+        //1.遍历第一次 根据code设置默认按钮名称
+        result.forEach((item) => {
+          for (const btn of authButtonFixedList) {
+            if (item.code == btn.code) {
+              if (!item['title']) {
+                item['title'] = btn.title;
+              }
+              break;
+            }
+          }
+        });
+        //2.拼树形数据
+        let trees: Recordable[] = [];
+        for (let item of result) {
+          let title = getTreeNodeTitle(item);
+          trees.push({ key: item.id, title });
+        }
+        treeData.value = trees;
+      }
+
+      function onRefresh() {
+        loadTree();
+        loadChecked(roleId.value, authMode.value);
+      }
+
+      // 给外部调用，加载当前选择的权限
+      async function loadChecked($roleId, $authMode) {
+        roleId.value = $roleId;
+        authMode.value = $authMode;
+        checkedKeys.value = [];
+        await loadTree();
+        let result = (await loadRoleAuthChecked({
+          roleId: $roleId,
+          cgformId: props.cgformId,
+          type: authType.value,
+          authMode: $authMode,
+        })) as Recordable[];
+        checkedKeys.value = result.map((item) => item.authId);
+      }
+
+      function clearChecked() {
+        roleId.value = '';
+        // QQYUN-4284 【online表单】权限管理 开启按钮后，在角色授权中显示，当关闭时，再打开角色权限仍然显示，需刷新页面才不显示
+        loadTree();
+      }
+
+      async function onSave() {
+        try {
+          const {success, message, result} = await saveAuthButton(roleId.value, props.cgformId, {
+            authId: JSON.stringify(checkedKeys.value),
+            authMode: authMode.value,
+          });
+          if (success) {
+            if (Array.isArray(result?.disabledNames)) {
+              createSuccessModal({
+                title: '保存成功',
+                content: `由于以下按钮未激活，所以权限未生效。<br>${result.disabledNames.join('<br>')}`,
+              });
+            } else {
+              $message.success('保存成功');
+            }
+          } else {
+            $message.error(message);
+          }
+        } catch (e) {
+          $message.error('保存出现异常');
+          console.error(e);
+        }
+      }
+
+      function getTreeNodeTitle(item) {
+        let str = item.title + '-';
+        if (item.code && item.code.includes('form_sub')) {
+          // 【TV360X-2711】当 code 以 form_sub 开头时，说明是附表
+          str += '表单可见（附表）'
+        } else if (item.page == 3) {
+          str += '列表可见';
+        } else if (item.page == 5) {
+          str += '表单可见';
+        }
+        return str;
+      }
+
+      function onExpand($expandedKeys) {
+        expandedKeys.value = $expandedKeys;
+        autoExpandParent.value = false;
+      }
+
+      function clear() {
+        roleId.value = '';
+        checkedKeys.value = [];
+      }
+
+      return {
+        loadChecked,
+        clear,
+        expandedKeys,
+        autoExpandParent,
+        checkedKeys,
+        treeData,
+        disabled,
+        onSave,
+        onExpand,
+        onRefresh,
+        clearChecked,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .onl-auth-tree-btns {
+    margin-left: 10px;
+  }
+
+  .onl-auth-tree-btns button {
+    margin: 0 5px 0 2px;
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/auth/setter/AuthDataTree.vue b/src/views/super/online/cgform/components/auth/setter/AuthDataTree.vue
new file mode 100644
index 0000000..967ef9b
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/AuthDataTree.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <a-empty v-if="disabled" description="请先选中左侧角色/部门/用户" />
+    <a-empty v-else-if="treeData.length === 0" description="无权限信息" />
+    <template v-else>
+      <div class="onl-auth-tree-btns">
+        <a-button @click="onRefresh" size="small" type="primary" preIcon="ant-design:redo" ghost>刷新</a-button>
+        <a-button @click="onSave" size="small" type="primary" preIcon="ant-design:save" ghost>保存</a-button>
+      </div>
+      <a-tree
+        checkable
+        v-model:checkedKeys="checkedKeys"
+        :expandedKeys="expandedKeys"
+        :autoExpandParent="autoExpandParent"
+        :treeData="treeData"
+        @expand="onExpand"
+      >
+      </a-tree>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref, watch } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { authDataLoadTree, loadRoleAuthChecked, saveAuthData } from '../auth.api';
+
+  export default defineComponent({
+    name: 'AuthDataTree',
+    props: {
+      cgformId: { type: String, required: true },
+    },
+    setup(props) {
+      const { createMessage: $message } = useMessage();
+      const roleId = ref('');
+      const authType = ref(3);
+      const autoExpandParent = ref(true);
+      const expandedKeys = ref<string[]>([]);
+      const checkedKeys = ref<string[]>([]);
+      const treeData = ref<Recordable[]>([]);
+      const authMode = ref('');
+      const disabled = computed(() => !roleId.value);
+      watch(() => props.cgformId, loadTree, { immediate: true });
+
+      async function loadTree() {
+        if (!props.cgformId) return;
+        let result = (await authDataLoadTree(props.cgformId)) as Recordable[];
+        treeData.value = result.map((item) => ({ key: item.id, title: item.ruleName }));
+      }
+
+      async function loadChecked($roleId, $authMode) {
+        roleId.value = $roleId;
+        authMode.value = $authMode;
+        checkedKeys.value = [];
+        await loadTree();
+        let result = (await loadRoleAuthChecked({
+          roleId: $roleId,
+          cgformId: props.cgformId,
+          type: authType.value,
+          authMode: $authMode,
+        })) as Recordable[];
+        checkedKeys.value = result.map((item) => item.authId);
+      }
+
+      function clearChecked() {
+        roleId.value = '';
+        // QQYUN-4284 【online表单】权限管理 开启按钮后，在角色授权中显示，当关闭时，再打开角色权限仍然显示，需刷新页面才不显示
+        loadTree();
+      }
+
+      function onRefresh() {
+        loadTree();
+        loadChecked(roleId.value, authMode.value);
+      }
+
+      async function onSave() {
+        await saveAuthData(roleId.value, props.cgformId, {
+          authId: JSON.stringify(checkedKeys.value),
+          authMode: authMode.value,
+        });
+        $message.success('保存成功');
+      }
+
+      function onExpand($expandedKeys) {
+        expandedKeys.value = $expandedKeys;
+        autoExpandParent.value = false;
+      }
+
+      function clear() {
+        roleId.value = '';
+        checkedKeys.value = [];
+      }
+
+      return {
+        loadChecked,
+        clear,
+        expandedKeys,
+        autoExpandParent,
+        checkedKeys,
+        treeData,
+        disabled,
+        onSave,
+        onExpand,
+        onRefresh,
+        clearChecked,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .onl-auth-tree-btns {
+    margin-left: 10px;
+  }
+
+  .onl-auth-tree-btns button {
+    margin: 0 5px 0 2px;
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/auth/setter/AuthFieldTree.vue b/src/views/super/online/cgform/components/auth/setter/AuthFieldTree.vue
new file mode 100644
index 0000000..45abe2a
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/AuthFieldTree.vue
@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <a-empty v-if="disabled" description="请先选中左侧角色/部门/用户" />
+    <a-empty v-else-if="treeData.length === 0" description="无权限信息" />
+    <template v-else>
+      <div class="onl-auth-tree-btns">
+        <a-button @click="onRefresh" size="small" type="primary" preIcon="ant-design:redo" ghost>刷新</a-button>
+        <a-button @click="onExpandAll" size="small" type="primary" ghost><DownCircleOutlined />展开</a-button>
+        <a-button @click="onCloseAll" size="small" type="primary" ghost><UpCircleOutlined />折叠</a-button>
+        <a-button @click="onSave" size="small" type="primary" preIcon="ant-design:save" ghost>保存</a-button>
+
+        <!-- update-begin-author:taoyan date:2022-5-25 for: VUEN-1102 字段授权 全选没有 -->
+        <a-button @click="onSelectAll" size="small" type="primary" ghost><CheckOutlined />全选</a-button>
+        <a-button @click="onClearSelected" size="small" type="primary" ghost><UndoOutlined />重置</a-button>
+        <!-- update-end-author:taoyan date:2022-5-25 for: VUEN-1102 字段授权 全选没有 -->
+      </div>
+      <a-tree
+        checkable
+        v-model:checkedKeys="checkedKeys"
+        :expandedKeys="expandedKeys"
+        :autoExpandParent="autoExpandParent"
+        :treeData="treeData"
+        @expand="onExpand"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, watch, computed, unref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { authFieldLoadTree, loadRoleAuthChecked, saveAuthField } from '../auth.api';
+  import { DownCircleOutlined, HomeOutlined, UpCircleOutlined, CheckOutlined, UndoOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'AuthFieldTree',
+    components: {
+      DownCircleOutlined,
+      HomeOutlined,
+      UpCircleOutlined,
+      UndoOutlined,
+      CheckOutlined,
+    },
+    props: {
+      cgformId: { type: String, required: true },
+    },
+    setup(props) {
+      const { createMessage: $message } = useMessage();
+      const roleId = ref('');
+      const authType = ref(1);
+      const autoExpandParent = ref(true);
+      const expandedKeys = ref<string[]>([]);
+      const checkedKeys = ref<string[]>([]);
+      const allCode = ref<string[]>([]);
+      const treeData = ref<Recordable[]>([]);
+      const authMode = ref('');
+      const disabled = computed(() => !roleId.value);
+      watch(() => props.cgformId, loadTree, { immediate: true });
+
+      async function loadTree() {
+        if (!props.cgformId) return;
+        let result = (await authFieldLoadTree(props.cgformId, authType.value)) as Recordable[];
+        // 1. 根据code找一级节点
+        let trees: Recordable[] = [];
+        let codes: string[] = [];
+        result.forEach((item) => {
+          if (!codes.includes(item.code)) {
+            codes.push(item.code);
+            trees.push({ key: item.code, title: item.title });
+          }
+        });
+        // 2.双重遍历，拼接树形数据
+        for (let node of trees) {
+          let children: Recordable[] = [];
+          for (let item of result) {
+            if (node.key === item.code) {
+              let temp = getTreeNodeTitle(item);
+              children.push({ key: item.id, title: temp });
+            }
+          }
+          node.children = children;
+        }
+        treeData.value = trees;
+        expandedKeys.value = [...codes];
+        allCode.value = codes;
+      }
+
+      function getTreeNodeTitle(item) {
+        let str = '';
+        if (item.page == 3) {
+          str += '列表';
+        } else if (item.page == 5) {
+          str += '表单';
+        }
+        if (item.control == 3) {
+          str += '可编辑';
+        } else if (item.control == 5) {
+          str += '可见';
+        }
+        return str;
+      }
+
+      // 给外部调用，加载当前选择的权限
+      async function loadChecked($roleId, $authMode) {
+        roleId.value = $roleId;
+        authMode.value = $authMode;
+        checkedKeys.value = [];
+        await loadTree();
+        let result = (await loadRoleAuthChecked({
+          roleId: $roleId,
+          cgformId: props.cgformId,
+          type: authType.value,
+          authMode: $authMode,
+        })) as Recordable[];
+        checkedKeys.value = result.map((item) => item.authId);
+      }
+
+      function clearChecked() {
+        roleId.value = '';
+        // QQYUN-4284 【online表单】权限管理 开启按钮后，在角色授权中显示，当关闭时，再打开角色权限仍然显示，需刷新页面才不显示
+        loadTree();
+      }
+
+      function onRefresh() {
+        loadTree();
+        loadChecked(roleId.value, authMode.value);
+      }
+
+      async function onSave() {
+        let ids = checkedKeys.value.filter((i) => allCode.value.indexOf(i) < 0);
+        await saveAuthField(roleId.value, props.cgformId, {
+          authId: JSON.stringify(ids),
+          authMode: authMode.value,
+        });
+        $message.success('保存成功');
+      }
+
+      function onExpandAll() {
+        expandedKeys.value = [...allCode.value];
+      }
+
+      function onCloseAll() {
+        expandedKeys.value = [];
+      }
+
+      function onExpand($expandedKeys) {
+        expandedKeys.value = $expandedKeys;
+        autoExpandParent.value = false;
+      }
+
+      function clear() {
+        roleId.value = '';
+        checkedKeys.value = [];
+      }
+
+      // update-begin-author:taoyan date:2022-5-25 for: VUEN-1102 字段授权 全选没有
+      // 取消选中--重置
+      function onClearSelected() {
+        checkedKeys.value = [];
+      }
+      // 全选
+      function onSelectAll() {
+        const selectFun = function (arr) {
+          for (let node of arr) {
+            checkedKeys.value.push(node.key);
+            if (node.children && node.children.length > 0) {
+              selectFun.call(null, node.children);
+            }
+          }
+        };
+        checkedKeys.value = [];
+        selectFun.call(null, unref(treeData));
+      }
+      // update-end-author:taoyan date:2022-5-25 for: VUEN-1102 字段授权 全选没有
+
+      return {
+        loadChecked,
+        clear,
+        expandedKeys,
+        autoExpandParent,
+        checkedKeys,
+        treeData,
+        disabled,
+        onSave,
+        onExpand,
+        clearChecked,
+        onCloseAll,
+        onExpandAll,
+        onRefresh,
+        onClearSelected,
+        onSelectAll,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .onl-auth-tree-btns {
+    margin-left: 10px;
+  }
+
+  .onl-auth-tree-btns button {
+    margin: 0 5px 0 2px;
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/auth/setter/LeftDepart.vue b/src/views/super/online/cgform/components/auth/setter/LeftDepart.vue
new file mode 100644
index 0000000..ad929b0
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/LeftDepart.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <a-tree
+      v-if="treeData.length > 0"
+      showIcon
+      autoExpandParent
+      :treeData="treeData"
+      :selectedKeys="selectedKeys"
+      v-model:expandedKeys="expandedKeys"
+      @select="onSelect"
+    >
+      <template #icon="{ selected }">
+        <a-icon :style="{ color: selected ? 'blue' : '' }" type="apartment" />
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { queryTreeList } from '/@/api/common/api';
+
+  export default defineComponent({
+    name: 'LeftDepart',
+    emits: ['select'],
+    setup(_, { emit }) {
+      const treeData = ref<Recordable[]>([]);
+      const selectedKeys = ref<string[]>([]);
+      const expandedKeys = ref<string[]>([]);
+
+      function onSelect(_, e) {
+        let record = e.node.dataRef;
+        selectedKeys.value = [record.key];
+        emit('select', record.id);
+      }
+
+      loadTree();
+
+      async function loadTree() {
+        let result = await queryTreeList();
+        treeData.value = [];
+        result.forEach((node) => initialNode(node));
+      }
+
+      function initialNode(node, level = 1) {
+        if (level === 1) {
+          treeData.value.push(node);
+          expandedKeys.value.push(node.id);
+        }
+        if (node.children && node.children.length > 0) {
+          for (const childNode of node.children) {
+            initialNode(childNode, level + 1);
+          }
+        }
+      }
+
+      function clearSelected() {
+        selectedKeys.value = [];
+      }
+
+      return {
+        treeData,
+        expandedKeys,
+        selectedKeys,
+        clearSelected,
+        onSelect,
+      };
+    },
+  });
+</script>
diff --git a/src/views/super/online/cgform/components/auth/setter/LeftRole.vue b/src/views/super/online/cgform/components/auth/setter/LeftRole.vue
new file mode 100644
index 0000000..146f448
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/LeftRole.vue
@@ -0,0 +1,72 @@
+<template>
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <template #tableTop><span></span></template>
+  </BasicTable>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  export default defineComponent({
+    name: 'LeftRole',
+    components: { BasicTable },
+    emits: ['select'],
+    setup(_, { emit }) {
+      const { tableContext, createMessage: $message } = useListPage({
+        tableProps: {
+          api: loadData,
+          rowKey: 'id',
+          size: 'small',
+          bordered: true,
+          columns: [
+            { title: '角色编码', align: 'center', dataIndex: 'roleCode' },
+            { title: '角色名称', align: 'center', dataIndex: 'roleName' },
+          ],
+          rowSelection: {
+            type: 'radio',
+            onChange(selectedRowKeys) {
+              if (selectedRowKeys.length > 0) {
+                emit('select', selectedRowKeys[0]);
+              }
+            },
+          },
+
+          canResize: false,
+          clickToRowSelect: true,
+          useSearchForm: false,
+          showActionColumn: false,
+          showTableSetting: false,
+        },
+      });
+      const [registerTable, { clearSelectedRowKeys }, { rowSelection }] = tableContext;
+
+      async function loadData(params) {
+        let { code, success, result, message } = await defHttp.get(
+          {
+            url: '/sys/role/list',
+            params,
+          },
+          { isTransformResponse: false }
+        );
+        if (success) {
+          return result;
+        }
+        if (code === 510) {
+          $message.warning(message);
+        }
+        return {};
+      }
+
+      function clearSelected() {
+        clearSelectedRowKeys();
+      }
+
+      return { rowSelection, registerTable, clearSelected };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/auth/setter/LeftUser.vue b/src/views/super/online/cgform/components/auth/setter/LeftUser.vue
new file mode 100644
index 0000000..686b277
--- /dev/null
+++ b/src/views/super/online/cgform/components/auth/setter/LeftUser.vue
@@ -0,0 +1,90 @@
+<template>
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <template #tableTop><span></span></template>
+  </BasicTable>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  export default defineComponent({
+    name: 'LeftUser',
+    components: { BasicTable },
+    emits: ['select'],
+    setup(_, { emit }) {
+      const { tableContext, createMessage: $message } = useListPage({
+        tableProps: {
+          api: loadData,
+          rowKey: 'id',
+          size: 'small',
+          bordered: true,
+          columns: [
+            { title: '账号', dataIndex: 'username', width: 200 },
+            { title: '姓名', dataIndex: 'realname', width: 200 },
+          ],
+          rowSelection: {
+            type: 'radio',
+            onChange(selectedRowKeys) {
+              if (selectedRowKeys.length > 0) {
+                emit('select', selectedRowKeys[0]);
+              }
+            },
+          },
+          formConfig: {
+            schemas: [
+              {
+                label: '账号',
+                field: 'username',
+                component: 'JInput',
+                componentProps: {
+                  placeholder: '输入账号',
+                },
+              },
+              {
+                label: '姓名',
+                field: 'realname',
+                component: 'JInput',
+                componentProps: {
+                  placeholder: '输入姓名',
+                },
+              },
+            ],
+          },
+          canResize: false,
+          clickToRowSelect: true,
+          showActionColumn: false,
+          showTableSetting: false,
+        },
+      });
+      const [registerTable, { clearSelectedRowKeys }, { rowSelection }] = tableContext;
+
+      async function loadData(params) {
+        let { code, success, result, message } = await defHttp.get(
+          {
+            url: '/sys/user/list',
+            params,
+          },
+          { isTransformResponse: false }
+        );
+        if (success) {
+          return result;
+        }
+        if (code === 510) {
+          $message.warning(message);
+        }
+        return {};
+      }
+
+      function clearSelected() {
+        clearSelectedRowKeys();
+      }
+
+      return { rowSelection, registerTable, clearSelected };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/button/BuiltInButtonList.vue b/src/views/super/online/cgform/components/button/BuiltInButtonList.vue
new file mode 100644
index 0000000..03798f3
--- /dev/null
+++ b/src/views/super/online/cgform/components/button/BuiltInButtonList.vue
@@ -0,0 +1,164 @@
+<template>
+  <BasicModal @register="registerModal" title="内置按钮" :width="1200" @cancel="onCancel">
+
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)"/>
+      </template>
+    </BasicTable>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+    </template>
+
+    <!-- 表单区域 -->
+    <BasicModal v-bind="formModalProps">
+      <a-spin :spinning="formModalProps.confirmLoading">
+        <div style="margin-top: 20px;">
+          <BasicForm @register="registerForm"/>
+        </div>
+      </a-spin>
+    </BasicModal>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, reactive, ref} from 'vue';
+import {useListPage} from '/@/hooks/system/useListPage';
+
+import {BasicTable, TableAction} from '/@/components/Table';
+import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
+import {BasicForm, useForm} from '/@/components/Form';
+import {builtInList, saveOrUpdate} from './button.api';
+import {columns, formSchemas} from './button.data';
+
+const props = defineProps({
+  record: {
+    type: Object,
+    required: true,
+  },
+})
+const emit = defineEmits(['register']);
+
+const code = computed(() => props.record?.id);
+// 1单表、2主表、3附表
+const tableType = computed(() => props.record?.tableType);
+
+const isSingleTable = computed(() => tableType.value === 1);
+
+// 列表页面公共参数、方法
+const {tableContext} = useListPage({
+  tableProps: {
+    api: async (params) => {
+      const list = await builtInList(code.value, params)
+      if (isSingleTable.value) {
+        // 过滤包含 sub_ 的按钮，说明是附表按钮，单表时不显示
+        return list.filter(item => !item.buttonCode.includes('sub_'));
+      }
+      return list;
+    },
+    columns: columns.filter(item => !['buttonStyle', 'optType', 'orderNum', 'exp'].includes(item.dataIndex as string)),
+    canResize: false,
+    useSearchForm: false,
+    pagination: false,
+  },
+});
+// 注册table数据
+const [registerTable, {reload}, {rowSelection}] = tableContext;
+// 注册弹窗
+const [registerModal, {closeModal}] = useModalInner(() => reload());
+
+// 注册 form 弹窗
+const [registerFormModal, formModal] = useModal();
+const isUpdate = ref(false);
+const formModalProps = reactive({
+  onRegister: registerFormModal,
+  title: computed(() => (isUpdate?.value ? '修改' : '新增')),
+  width: 600,
+  centered: true,
+  confirmLoading: false,
+  onOk: onSubmit,
+  onCancel: formModal.closeModal,
+});
+let formRecord = {};
+
+const schemas = [
+  ...formSchemas({redoModalHeight: formModal.redoModalHeight}),
+].filter((schema) => {
+  return ['buttonCode', 'buttonName', 'buttonIcon', 'buttonStatus'].includes(schema.field);
+}).map(schema => {
+  if ('buttonCode' === schema.field) {
+    return {
+      ...schema,
+      dynamicRules: () => [],
+      dynamicDisabled: () => true,
+    }
+  } else if ('buttonIcon' === schema.field) {
+    return {
+      ...schema,
+      ifShow: () => true,
+      // 以下按钮不允许设置图标
+      dynamicDisabled: ({values}) => ['bpm', 'edit', 'detail', 'delete'].includes(values.buttonCode),
+    }
+  }
+  return schema
+});
+
+// 注册 form
+const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
+  // update-begin--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+  schemas: schemas,
+  // update-end--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+  showActionButtonGroup: false,
+});
+
+async function openFormModal(data: Recordable) {
+  isUpdate.value = data.isUpdate;
+  formRecord = {...(data.record ?? {})};
+  formModal.openModal();
+  await nextTick();
+  await resetFields();
+  setFieldsValue(formRecord);
+}
+
+// 编辑按钮
+function onEdit(record: Recordable) {
+  openFormModal({isUpdate: true, record});
+}
+
+function onCancel() {
+  closeModal();
+}
+
+async function onSubmit() {
+  try {
+    formModalProps.confirmLoading = true;
+    let values = await validate();
+    values = Object.assign({cgformHeadId: code.value}, formRecord, values);
+
+    console.log('onSubmit - values :', values)
+    const isUpdate = values.id != null
+
+    await saveOrUpdate(values, isUpdate);
+    reload();
+    formModal.closeModal();
+  } finally {
+    formModalProps.confirmLoading = false;
+  }
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record: Recordable) {
+  return [
+    {
+      label: '编辑',
+      onClick: () => onEdit(record),
+    },
+  ];
+}
+
+
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgform/components/button/CustomButtonList.vue b/src/views/super/online/cgform/components/button/CustomButtonList.vue
new file mode 100644
index 0000000..ca4eb19
--- /dev/null
+++ b/src/views/super/online/cgform/components/button/CustomButtonList.vue
@@ -0,0 +1,228 @@
+<template>
+  <BasicModal @register="registerModal" title="自定义按钮" :width="1200" defaultFullscreen @cancel="onCancel">
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <div v-if="aiTestMode" style="float: left">
+        <a-button @click="onGenButtons">生成测试数据</a-button>
+      </div>
+    </template>
+
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+        <a-button @click="onOpenBIButton" preIcon="ant-design:setting">管理内置按钮</a-button>
+
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onBatchDelete">
+                <a-icon type="delete" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="margin-left: 8px">
+            批量操作
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+
+    <!-- 表单区域 -->
+    <BasicModal v-bind="formModalProps">
+      <a-spin :spinning="formModalProps.confirmLoading">
+        <BasicForm @register="registerForm" />
+      </a-spin>
+    </BasicModal>
+  </BasicModal>
+
+  <!-- 管理内置按钮 -->
+  <BuiltInButtonList @register="registerBIButtonModal" :record="record"/>
+
+</template>
+
+<script lang="ts">
+  import { ref, reactive, computed, nextTick, defineComponent } from 'vue';
+
+  import { useOnlineTest } from '../../hooks/aitest/useOnlineTest';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { list, doBatchDelete, saveOrUpdate } from './button.api';
+  import { columns, formSchemas } from './button.data';
+  import BuiltInButtonList from './BuiltInButtonList.vue';
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  export default defineComponent({
+    name: 'CustomButtonList',
+    components: { BasicModal, BasicTable, TableAction, BasicForm, BuiltInButtonList },
+    emits: ['register'],
+    setup() {
+      const {createMessage: $message} = useMessage();
+
+      const code = ref('');
+      const record = ref()
+      // 列表页面公共参数、方法
+      const { doRequest, doDeleteRecord, tableContext } = useListPage({
+        tableProps: {
+          api: (params) => list(code.value, params),
+          columns,
+          canResize: false,
+          useSearchForm: false,
+          beforeFetch(params) {
+            return Object.assign(params, { column: 'orderNum', order: 'asc' });
+          },
+        },
+      });
+      // 注册table数据
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+      // 注册弹窗
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        code.value = data.row.id;
+        record.value = data.row
+        reload();
+      });
+      // useOnlineAiTest
+      const { aiTestMode, genButtons } = useOnlineTest({}, { reload }, null);
+      // 注册 form 弹窗
+      const [registerFormModal, formModal] = useModal();
+      const isUpdate = ref(false);
+      const formModalProps = reactive({
+        onRegister: registerFormModal,
+        title: computed(() => (isUpdate?.value ? '修改' : '新增')),
+        width: 800,
+        confirmLoading: false,
+        onOk: onSubmit,
+        onCancel: formModal.closeModal,
+      });
+      let formRecord = {};
+      // 注册 form
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        // update-begin--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+        schemas: formSchemas({ redoModalHeight: formModal.redoModalHeight }),
+        // update-end--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+        showActionButtonGroup: false,
+      });
+
+      async function openFormModal(data) {
+        isUpdate.value = data.isUpdate;
+        formRecord = { ...(data.record ?? {}) };
+        formModal.openModal();
+        await nextTick();
+        await resetFields();
+        setFieldsValue(formRecord);
+      }
+
+      // 新增按钮
+      function onAdd() {
+        openFormModal({ isUpdate: false });
+      }
+
+      // 编辑按钮
+      function onEdit(record) {
+        openFormModal({ isUpdate: true, record });
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      function onGenButtons() {
+        genButtons(code.value);
+      }
+
+      // 批量删除事件
+      async function onBatchDelete() {
+        doRequest(() => doBatchDelete(selectedRowKeys.value));
+      }
+
+      async function onSubmit() {
+        try {
+          formModalProps.confirmLoading = true;
+          let values = await validate();
+          values = Object.assign({ cgformHeadId: code.value }, formRecord, values);
+          await saveOrUpdate(values, isUpdate.value);
+          reload();
+          formModal.closeModal();
+        } finally {
+          formModalProps.confirmLoading = false;
+        }
+      }
+
+      // -------------------- [Begin] 内置按钮弹窗 ------------------
+
+      const [registerBIButtonModal, bIButtonModal] = useModal()
+
+      /**
+       * 打开管理内置按钮弹窗
+       */
+      function onOpenBIButton() {
+        if (record.value?.tableType == 3) {
+          $message.warn('附表不支持管理内置按钮，请选择对应主表')
+          return
+        }
+        bIButtonModal.openModal(true, {});
+      }
+
+      // ---------------------- [End] 内置按钮弹窗 ------------------
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: () => onEdit(record),
+          },
+        ];
+      }
+
+      /**
+       * 下拉操作栏
+       */
+      function getDropDownAction(record): ActionItem[] {
+        return [
+          {
+            label: '删除',
+            popConfirm: {
+              title: '确定删除吗？',
+              placement: 'left',
+              confirm: () => doDeleteRecord(() => doBatchDelete([record.id])),
+            },
+          },
+        ];
+      }
+
+      return {
+        code,
+        record,
+        onAdd,
+        onEdit,
+        onBatchDelete,
+        aiTestMode,
+        onGenButtons,
+        registerModal,
+        registerTable,
+        selectedRowKeys,
+        rowSelection,
+        onCancel,
+        getTableAction,
+        getDropDownAction,
+        registerForm,
+        formModalProps,
+        registerBIButtonModal,
+        onOpenBIButton,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgform/components/button/button.api.ts b/src/views/super/online/cgform/components/button/button.api.ts
new file mode 100644
index 0000000..79eac35
--- /dev/null
+++ b/src/views/super/online/cgform/components/button/button.api.ts
@@ -0,0 +1,42 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export enum Api {
+  list = '/online/cgform/button/list/',
+  delete = '/online/cgform/button/delete',
+  deleteBatch = '/online/cgform/button/deleteBatch',
+  save = '/online/cgform/button/add',
+  edit = '/online/cgform/button/edit',
+
+  builtInList = '/online/cgform/button/builtInList/',
+}
+
+export const list = (code: string, params) => defHttp.get({ url: Api.list + code, params });
+
+// 执行删除操作
+export function doBatchDelete(idList: string[]) {
+  return defHttp.delete(
+    {
+      url: Api.deleteBatch,
+      params: {
+        ids: idList.join(','),
+      },
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+/**
+ * 保存或者更新
+ */
+export const saveOrUpdate = (params, isUpdate: boolean) => {
+  if (isUpdate) {
+    return defHttp.put({ url: Api.edit, params });
+  } else {
+    return defHttp.post({ url: Api.save, params });
+  }
+};
+
+/**
+ * 加载内置按钮列表
+ */
+export const builtInList = (code: string, params) => defHttp.get({url: Api.builtInList + code, params});
diff --git a/src/views/super/online/cgform/components/button/button.data.ts b/src/views/super/online/cgform/components/button/button.data.ts
new file mode 100644
index 0000000..696eb46
--- /dev/null
+++ b/src/views/super/online/cgform/components/button/button.data.ts
@@ -0,0 +1,194 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+// @ts-ignore
+import {getButtonIconRender} from "./button.data.tsx";
+
+export const columns: BasicColumn[] = [
+  { title: '按钮编码', align: 'center', dataIndex: 'buttonCode' },
+  { title: '按钮名称', align: 'center', dataIndex: 'buttonName' },
+  {
+    title: '按钮样式',
+    align: 'center',
+    dataIndex: 'buttonStyle',
+    customRender({ text, record }) {
+      if (text === 'form') {
+        let p = record.optPosition;
+        return text + '(' + (p == '2' ? '底部' : '侧面') + ')';
+      } else {
+        return text;
+      }
+    },
+  },
+  { title: '按钮类型', align: 'center', dataIndex: 'optType' },
+  { title: '排序', align: 'center', dataIndex: 'orderNum' },
+  {
+    title: '按钮图标',
+    align: 'center',
+    dataIndex: 'buttonIcon',
+    customRender: ({text}) => {
+      return getButtonIconRender({text});
+    },
+  },
+  { title: '表达式', align: 'center', dataIndex: 'exp' },
+  {
+    title: '按钮状态',
+    align: 'center',
+    dataIndex: 'buttonStatus',
+    customRender({ text }) {
+      if (text == 1) {
+        return '激活';
+      } else {
+        return '未激活';
+      }
+    },
+  },
+];
+
+export const formSchemas = ({ redoModalHeight }): FormSchema[] => {
+  return [
+    {
+      label: '按钮编码',
+      field: 'buttonCode',
+      component: 'Input',
+      required: true,
+      // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-139】按钮编码加上正则校验
+      dynamicRules: () => {
+        return [
+          {
+            validator: (_, value) => {
+              //需要return 一个Promise对象
+              return new Promise((resolve, reject) => {
+                const reg = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+                if (reg.test(value)) {
+                  resolve();
+                } else {
+                  reject('编码只能包含字母、数字、下划线 (_) 和美元符号 ($)且不能以数字开头');
+                }
+              });
+            },
+          },
+          // update-begin--author:liaozhiyang---date:20240701---for：【TV360X-1693】自定义按钮编码排除sql和java系统内置编码
+          {
+            validator: (_, value) => {
+              //需要return 一个Promise对象
+              return new Promise((resolve, reject) => {
+                const exclude = ['add', 'edit', 'detail', 'delete', 'batch_delete', 'import', 'export', 'query', 'reset', 'bpm', 'super_query', 'form_confirm'];
+                if (exclude.includes(value)) {
+                  reject('不可使用内置按钮编码，请在“管理内置按钮”中修改内置按钮');
+                } else {
+                  resolve();
+                }
+              });
+            },
+          },
+          // update-end--author:liaozhiyang---date:20240701---for：【TV360X-1693】自定义按钮编码排除sql和java系统内置编码
+        ];
+      },
+      // update-end--author:liaozhiyang---date:20240521---for：【TV360X-139】按钮编码加上正则校验
+    },
+    {
+      label: '按钮名称',
+      field: 'buttonName',
+      component: 'Input',
+      required: true,
+    },
+    {
+      label: '按钮样式',
+      field: 'buttonStyle',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: 'Link', value: 'link' },
+          { label: 'Button', value: 'button' },
+          { label: 'Form', value: 'form' },
+        ],
+        // update-begin--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+        onChange: () => {
+          redoModalHeight();
+        },
+        // update-end--author:liaozhiyang---date:20240618---for：【TV360X-1306】自定义按钮弹窗按钮样式切换是重置弹窗高度
+      },
+      defaultValue: 'link',
+    },
+    {
+      label: '按钮位置',
+      field: 'optPosition',
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        options: [
+          // { label: '侧面', value: '1' },
+          { label: '底部', value: '2' },
+        ],
+      },
+      defaultValue: '2',
+      show: ({ model }) => model.buttonStyle === 'form',
+    },
+    {
+      label: '按钮类型',
+      field: 'optType',
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        options: [
+          { label: 'Js', value: 'js' },
+          { label: 'Action', value: 'action' },
+        ],
+      },
+      defaultValue: 'js',
+    },
+    {
+      label: '排序',
+      field: 'orderNum',
+      component: 'InputNumber',
+      componentProps: {
+        style: 'width: 100%',
+      },
+    },
+    {
+      label: '按钮图标',
+      field: 'buttonIcon',
+      // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-136】按钮图标改成图标组件选择
+      component: 'IconPicker',
+      componentProps: {
+        clearSelect: true,
+        iconPrefixSave: false,
+      },
+      // update-end--author:liaozhiyang---date:20240528---for：【TV360X-136】按钮图标改成图标组件选择
+      ifShow: ({ values, model }) => {
+        if (values.buttonStyle == 'button' || values.buttonStyle == 'form') {
+          return true;
+        } else {
+          // model.buttonIcon = null;
+          return false;
+        }
+      },
+    },
+    {
+      label: '表达式',
+      field: 'exp',
+      component: 'Input',
+      // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-89】自定义按钮样式是link时，展示表达式配置
+      ifShow: ({ values, model }) => {
+        if (values.buttonStyle == 'link') {
+          return true;
+        } else {
+          model.exp = '';
+          return false;
+        }
+      },
+      // update-end--author:liaozhiyang---date:20240603---for：【TV360X-89】自定义按钮样式是link时，展示表达式配置
+    },
+    {
+      label: '按钮状态',
+      field: 'buttonStatus',
+      component: 'RadioButtonGroup',
+      componentProps: {
+        options: [
+          { label: '激活', value: '1' },
+          { label: '未激活', value: '0' },
+        ],
+      },
+      defaultValue: '1',
+    },
+  ]
+};
diff --git a/src/views/super/online/cgform/components/button/button.data.tsx b/src/views/super/online/cgform/components/button/button.data.tsx
new file mode 100644
index 0000000..4594d3f
--- /dev/null
+++ b/src/views/super/online/cgform/components/button/button.data.tsx
@@ -0,0 +1,9 @@
+import {Icon} from "@/components/Icon";
+
+export function getButtonIconRender({text}) {
+  if (!text) {
+    return ''
+  }
+  // @ts-ignore
+  return <Icon icon={'ant-design:' + text}/>;
+}
diff --git a/src/views/super/online/cgform/components/enhance/EnhanceJavaModal.vue b/src/views/super/online/cgform/components/enhance/EnhanceJavaModal.vue
new file mode 100644
index 0000000..73af6db
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/EnhanceJavaModal.vue
@@ -0,0 +1,209 @@
+<template>
+  <BasicModal @register="registerModal" title="JAVA增强" :width="1200" defaultFullscreen @cancel="onCancel">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onBatchDelete">
+                <a-icon type="delete" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="margin-left: 8px">
+            批量操作
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <div v-if="aiTestMode" style="float: left">
+        <a-button @click="onGenEnhanceJavaData">生成测试数据</a-button>
+      </div>
+    </template>
+
+    <!-- 表单区域 -->
+    <BasicModal v-bind="formModalProps">
+      <a-spin :spinning="formModalProps.confirmLoading">
+        <BasicForm @register="registerForm" />
+      </a-spin>
+    </BasicModal>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, computed, nextTick, defineComponent } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { TableAction, BasicTable, ActionItem } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useOnlineTest } from '../../hooks/aitest/useOnlineTest';
+  import { useJavaColumns, useJavaFormSchemas } from './enhance.data';
+  import { doEnhanceJavaBatchDelete, getEnhanceJavaByCode, saveEnhanceJava } from './enhance.api';
+
+  export default defineComponent({
+    name: 'EnhanceJavaModal',
+    components: { BasicModal, BasicTable, BasicForm, TableAction },
+    emits: ['register'],
+    setup() {
+      const code = ref('');
+      const btnList = ref<any[]>([]);
+      const { columns } = useJavaColumns(btnList);
+      // 列表页面公共参数、方法
+      const { doRequest, doDeleteRecord, tableContext } = useListPage({
+        tableProps: {
+          api: async (params) => {
+            let { dataSource, btnList: $btnList } = await getEnhanceJavaByCode(code.value, params);
+            btnList.value = $btnList;
+            return dataSource;
+          },
+          columns,
+          canResize: false,
+          useSearchForm: false,
+          beforeFetch(params) {
+            return Object.assign(params, { column: 'orderNum', order: 'asc' });
+          },
+        },
+      });
+      // 注册table数据
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+      // 注册弹窗
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        code.value = data.row.id;
+        reload();
+      });
+      // useOnlineAiTest
+      const { aiTestMode, genEnhanceJavaData } = useOnlineTest({}, { reload }, null);
+      // 注册 form 弹窗
+      const [registerFormModal, formModal] = useModal();
+      const isUpdate = ref(false);
+      const formModalProps = reactive({
+        onRegister: registerFormModal,
+        title: computed(() => (isUpdate?.value ? '修改' : '新增')),
+        width: 800,
+        confirmLoading: false,
+        bodyStyle: { height: '350px' },
+        onOk: onSubmit,
+        onCancel: formModal.closeModal,
+      });
+      let formRecord = {};
+      const { formSchemas } = useJavaFormSchemas(btnList);
+      // 注册 form
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        // update-begin--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+        labelCol: { xs: 24, sm: 5 },
+        wrapperCol: { xs: 24, sm: 16 },
+        // update-end--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+      });
+
+      function onCancel() {
+        closeModal();
+      }
+
+      async function openFormModal(data) {
+        isUpdate.value = data.isUpdate;
+        formRecord = { ...(data.record ?? {}) };
+        formModal.openModal();
+        await nextTick();
+        await resetFields();
+        setFieldsValue(formRecord);
+      }
+
+      function onAdd() {
+        openFormModal({ isUpdate: false });
+      }
+
+      // 编辑按钮
+      function onEdit(record) {
+        openFormModal({ isUpdate: true, record });
+      }
+
+      function onGenEnhanceJavaData() {
+        genEnhanceJavaData(code.value);
+      }
+
+      // 批量删除事件
+      async function onBatchDelete() {
+        doRequest(() => doEnhanceJavaBatchDelete(selectedRowKeys.value));
+      }
+
+      async function onSubmit() {
+        try {
+          formModalProps.confirmLoading = true;
+          let values = await validate();
+          values = Object.assign({}, formRecord, values);
+          await saveEnhanceJava(code.value, values, isUpdate.value);
+          reload();
+          formModal.closeModal();
+        } finally {
+          formModalProps.confirmLoading = false;
+        }
+      }
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: () => onEdit(record),
+          },
+        ];
+      }
+
+      /**
+       * 下拉操作栏
+       */
+      function getDropDownAction(record): ActionItem[] {
+        return [
+          {
+            label: '删除',
+            popConfirm: {
+              title: '确定删除吗？',
+              placement: 'left',
+              confirm: () => doDeleteRecord(() => doEnhanceJavaBatchDelete([record.id])),
+            },
+          },
+        ];
+      }
+
+      return {
+        rowSelection,
+        selectedRowKeys,
+        aiTestMode,
+        onCancel,
+        onAdd,
+        onGenEnhanceJavaData,
+        onBatchDelete,
+        getTableAction,
+        getDropDownAction,
+        formModalProps,
+        registerModal,
+        registerTable,
+        registerForm,
+      };
+    },
+    computed: {
+      tableScroll() {
+        let height = window.innerHeight;
+        return {
+          y: height - 320,
+        };
+      },
+    },
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgform/components/enhance/EnhanceJsHistory.vue b/src/views/super/online/cgform/components/enhance/EnhanceJsHistory.vue
new file mode 100644
index 0000000..39c5ddd
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/EnhanceJsHistory.vue
@@ -0,0 +1,146 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    title="JS增强历史记录"
+    :width="1200"
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    defaultFullscreen
+    @cancel="onCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-layout>
+        <a-layout-sider theme="light">
+          <a-list bordered :dataSource="dataList" :class="'enhance-list'">
+            <template #header>
+              <div>
+                <a-divider style="margin: 0">保存时间</a-divider>
+              </div>
+            </template>
+            <template #renderItem="{ item }">
+              <a-list-item :class="activeIndex === item.index ? 'bg-blue' : ''">
+                <a @click="fullCode(item)">{{ getFormatDate(item.date) }}</a>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-layout-sider>
+        <a-layout>
+          <a-layout-content :style="{ margin: '8px 8px', padding: '8px', background: '#fff', minHeight: '280px' }">
+            <JCodeEditor ref="codeEditorRef" language="javascript" :fullScreen="true" :lineNumbers="false" :language-change="false" />
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </a-spin>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { formatToDate } from '/@/utils/dateUtil';
+  import { ref, nextTick, defineComponent } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { JCodeEditor } from '/@/components/Form';
+  import { useEnhanceStore } from '../../store/enhance';
+
+  export default defineComponent({
+    name: 'EnhanceJsHistory',
+    components: { BasicModal, JCodeEditor },
+    setup() {
+      const enhanceStore = useEnhanceStore();
+      const codeEditorRef = ref<InstanceType<typeof JCodeEditor>>();
+      const confirmLoading = ref(false);
+      const dataList = ref<any[]>([]);
+      const jsStr = ref('');
+      const activeIndex = ref(0);
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        show(data.code, data.type);
+      });
+
+      function show(code, type) {
+        jsStr.value = '';
+        dataList.value = [];
+        let arr = enhanceStore.getEnhanceJs(code);
+        let ls: any[] = [];
+        let index = 0;
+        for (let item of arr) {
+          if (item.type === type) {
+            index++;
+            ls.push(Object.assign({}, item, { index }));
+          }
+        }
+        if (ls && ls.length > 0) {
+          ls.sort((a, b) => {
+            return b.date - a.date;
+          });
+        }
+        dataList.value = [...ls];
+        nextTick(() => fullCode(ls[0]));
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      function getFormatDate(date) {
+        return formatToDate(date, 'yyyy-MM-DD HH:mm:ss');
+      }
+
+      function fullCode(item) {
+        activeIndex.value = item.index;
+        codeEditorRef.value!.setValue(item.str);
+      }
+
+      return {
+        codeEditorRef,
+        fullCode,
+        registerModal,
+        getFormatDate,
+        onCancel,
+        confirmLoading,
+        dataList,
+        jsStr,
+        activeIndex,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .enhance-list {
+    :deep(.ant-list-items) {
+      .ant-list-item {
+        position: relative;
+        height: 42px;
+        line-height: 42px;
+        transition: background-color 300ms;
+      }
+
+      .bg-blue {
+        //noinspection LessResolvedByNameOnly
+        background-color: @primary-color;
+
+        a {
+          color: rgb(255, 255, 255);
+        }
+      }
+
+      a {
+        color: rgba(0, 0, 0, 0.85);
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    :deep(.ant-list-header) {
+      color: #000;
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/enhance/EnhanceJsModal.vue b/src/views/super/online/cgform/components/enhance/EnhanceJsModal.vue
new file mode 100644
index 0000000..d4e9550
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/EnhanceJsModal.vue
@@ -0,0 +1,283 @@
+<template>
+  <BasicModal @register="registerModal" title="JS增强" :width="800" @fullScreen="handleFullScreenChange">
+    <a-tabs v-model:activeKey="enhanceType" @change="onChangeType">
+      <a-tab-pane key="form" forceRender>
+        <template #tab>
+          <div class="titleBox">
+            <span class="title">form</span>
+            <Tooltip>
+              <template #title>
+                <span>表单js增强文档</span>
+              </template>
+              <QuestionCircleOutlined @click="handleGo('form')"/>
+            </Tooltip>
+          </div>
+        </template>
+        <JCodeEditor
+          v-if="!reloading && enhanceType === 'form'"
+          ref="formEditorRef"
+          v-model:value="enhanceValues.form"
+          language="javascript"
+          :fullScreen="true"
+          :lineNumbers="false"
+          :height="codeEditorHeight"
+          :language-change="false"
+          @change="onCodeChange"
+          :keywords="formKeyWords"
+          placeholder="代码提示技巧：&#10;全局对象: this.调用属性或方法&#10;事件方法：beforeSubmit、loaded、onlChange、getAction、postAction、putAction、deleteAction、deleteAction、openCustomModal等"
+        />
+      </a-tab-pane>
+      <a-tab-pane key="list" forceRender>
+        <template #tab>
+          <div class="titleBox">
+            <span class="title">list</span>
+            <Tooltip>
+              <template #title>
+                <span>列表js增强文档</span>
+              </template>
+              <QuestionCircleOutlined @click="handleGo('list')"/>
+            </Tooltip>
+          </div>
+        </template>
+        <JCodeEditor
+          v-if="!reloading && enhanceType === 'list'"
+          ref="listEditorRef"
+          v-model:value="enhanceValues.list"
+          language="javascript"
+          :fullScreen="true"
+          :lineNumbers="false"
+          :height="codeEditorHeight"
+          :language-change="false"
+          @change="onCodeChange"
+          :keywords="listKeyWords"
+          placeholder="代码提示技巧：&#10;全局对象: this.调用属性或方法 &#10;事件方法：beforeDelete、beforeEdit、getAction、postAction、putAction、deleteAction、deleteAction、openCustomModal等"
+        />
+      </a-tab-pane>
+    </a-tabs>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="onCancel">关闭</a-button>
+        <a-button type="primary" @click="onSubmit">确定</a-button>
+      </a-space>
+      <a-space style="float: left">
+        <a-button v-if="showHistory" @click="onShowHistory">查看历史版本</a-button>
+        <a-button v-if="aiTestMode" @click="onGenTestData">生成测试数据</a-button>
+      </a-space>
+    </template>
+
+    <EnhanceJsHistory @register="registerEnhanceJsHistory" />
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, defineComponent } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { JCodeEditor } from '/@/components/Form';
+  import { useOnlineTest } from '../../hooks/aitest/useOnlineTest';
+  import { useEnhanceStore } from '../../store/enhance';
+  import { getEnhanceJsByCode, saveEnhanceJs } from './enhance.api';
+  import EnhanceJsHistory from './EnhanceJsHistory.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { keywords } from './codeHinting';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
+  
+  type JCodeEditorType = InstanceType<typeof JCodeEditor>;
+  export default defineComponent({
+    name: 'EnhanceJs',
+    components: { BasicModal, JCodeEditor, EnhanceJsHistory, QuestionCircleOutlined, Tooltip },
+    emits: ['register'],
+    setup() {
+      const { createMessage: $message } = useMessage();
+      const enhanceStore = useEnhanceStore();
+      const formEditorRef = ref<JCodeEditorType>();
+      const listEditorRef = ref<JCodeEditorType>();
+      const models = reactive<{ form: Recordable; list: Recordable }>({ form: {}, list: {} });
+      const enhanceType = ref('list');
+      const code = ref('');
+      const showHistory = ref(false);
+      const codeChange = ref(false);
+      const tableName = ref('');
+      const enhanceValues = reactive({ form: '', list: '' });
+      // 每个tab只获取一遍值
+      const getFlag = { form: false, list: false };
+      const reloading = ref(false);
+      const listKeyWords = [ ...keywords.list, ...keywords.common];
+      const formKeyWords = [...keywords.form ,...keywords.common];
+      const codeEditorHeight = ref('240px');
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        show(data.row);
+      });
+      const [registerEnhanceJsHistory, enhanceJsHistory] = useModal();
+
+      const { aiTestMode, genEnhanceJsData } = useOnlineTest({}, {}, null);
+
+      function show(row) {
+        code.value = row.id;
+        codeChange.value = false;
+        tableName.value = row.tableName;
+        let enhances = enhanceStore.getEnhanceJs(code.value);
+        if (enhances?.length > 0) {
+          enhanceType.value = enhances[enhances.length - 1].type;
+          showHistory.value = true;
+        } else {
+          showHistory.value = false;
+        }
+        getFlag.form = false;
+        getFlag.list = false;
+        if (!enhanceType.value) {
+          onChangeType('form');
+        } else {
+          onChangeType(enhanceType.value);
+        }
+        // 【VUEN-48】代码编辑器，在弹窗里使用时，界面会显示错乱（解决方案参考JS增强，延时展示编辑器）
+        reloading.value = true;
+        setTimeout(() => (reloading.value = false), 150);
+      }
+
+      async function onSubmit() {
+        await Promise.all([saveEnhanceJsByType('form'), saveEnhanceJsByType('list')]);
+        closeModal();
+        $message.success('保存成功');
+      }
+
+      async function saveEnhanceJsByType(type) {
+        let model = models[type];
+        let params = {
+          cgJs: enhanceValues[type],
+          cgJsType: type,
+        };
+        // 如果从未获取过值，或未修改则不保存
+        if (!getFlag[type] || model.cgJs === params.cgJs) {
+          return;
+        }
+        let isUpdate = !!model.id;
+        if (isUpdate) {
+          params = Object.assign({}, model, params);
+        }
+        await saveEnhanceJs(code.value, params, isUpdate);
+        enhanceStore.addEnhanceJs({
+          code: code.value,
+          str: params.cgJs,
+          type: params.cgJsType,
+          date: new Date().getTime(),
+        });
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      async function onChangeType(type) {
+        enhanceType.value = type;
+        try {
+          if (!getFlag[type]) {
+            let result = await getEnhanceJsByCode(code.value, type);
+            Object.assign(models[type], { id: null }, result);
+            enhanceValues[type] = models[type].cgJs;
+            getFlag[type] = true;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        //update-begin-author:taoyan date:2022-10-18 for: VUEN-2480【严重bug】online vue3测试的问题 8、online js增强样式问题
+        setTimeout(()=>{
+          if(type=='list'){
+            listEditorRef.value.refresh();
+          }else{
+            formEditorRef.value.refresh();
+          }
+        }, 150);
+        //update-end-author:taoyan date:2022-10-18 for: VUEN-2480【严重bug】online vue3测试的问题 8、online js增强样式问题
+      }
+
+      function onShowHistory() {
+        enhanceJsHistory.openModal(true, {
+          code: code.value,
+          type: enhanceType.value,
+        });
+      }
+
+      function onCodeChange(value) {
+        if (enhanceValues[enhanceType.value] != value) {
+          codeChange.value = true;
+          enhanceValues[enhanceType.value] = value;
+        }
+      }
+
+      // 生成测试数据
+      function onGenTestData() {
+        if (enhanceType.value === 'form') {
+          genEnhanceJsData(tableName.value, enhanceType.value, formEditorRef.value!);
+        } else {
+          genEnhanceJsData(tableName.value, enhanceType.value, listEditorRef.value!);
+        }
+      }
+      // update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-8865】onlinejs强增标题加上icon链接到文档地址
+      const handleGo = (params) => {
+        window.open(`https://help.jeecg.com/java/online/enhanceJs/${params}`);
+      };
+      // update-end--author:liaozhiyang---date:20240429---for：【QQYUN-8865】onlinejs强增标题加上icon链接到文档地址
+      // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-1251】online增强最大化代码框跟着变大
+      const handleFullScreenChange = (zoom) => {
+        if (zoom) {
+          codeEditorHeight.value = `${document.documentElement.clientHeight - 250}px`;
+        } else {
+          codeEditorHeight.value = `240px`;
+        }
+      };
+      // update-end--author:liaozhiyang---date:20240617---for：【TV360X-1251】online增强最大化代码框跟着变大
+      return {
+        formEditorRef,
+        listEditorRef,
+        reloading,
+        enhanceValues,
+        enhanceType,
+        showHistory,
+        aiTestMode,
+        tableName,
+        genEnhanceJsData,
+        onGenTestData,
+        onChangeType,
+        onCodeChange,
+        onShowHistory,
+        onSubmit,
+        onCancel,
+        registerModal,
+        registerEnhanceJsHistory,
+        listKeyWords,
+        formKeyWords,
+        handleGo,
+        codeEditorHeight,
+        handleFullScreenChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .titleBox {
+    position: relative;
+    .title {
+      padding: 0 6px;
+    }
+    .anticon {
+      position: absolute;
+      top: 3px;
+      margin-right: 0;
+      color: rgba(0, 0, 0, 0.5);
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  html[data-theme="dark"] {
+    .titleBox { 
+      .anticon {
+       color: rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/enhance/EnhanceSqlModal.vue b/src/views/super/online/cgform/components/enhance/EnhanceSqlModal.vue
new file mode 100644
index 0000000..aefb907
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/EnhanceSqlModal.vue
@@ -0,0 +1,213 @@
+<template>
+  <BasicModal @register="registerModal" title="SQL增强" :width="1200" defaultFullscreen @cancel="onCancel">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onBatchDelete">
+                <a-icon type="delete" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="margin-left: 8px">
+            批量操作
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <div v-if="aiTestMode" style="float: left">
+        <a-button @click="onGenEnhanceSqlData">生成测试数据</a-button>
+      </div>
+    </template>
+
+    <!-- 表单区域 -->
+    <BasicModal v-bind="formModalProps">
+      <a-spin :spinning="formModalProps.confirmLoading">
+        <BasicForm class="popupForm" @register="registerForm" />
+      </a-spin>
+    </BasicModal>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, computed, nextTick, defineComponent } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { TableAction, BasicTable, ActionItem } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useOnlineTest } from '../../hooks/aitest/useOnlineTest';
+  import { useSqlColumns, useSqlFormSchemas } from './enhance.data';
+  import { doEnhanceSqlBatchDelete, getEnhanceSqlByCode, saveEnhanceSql } from './enhance.api';
+
+  export default defineComponent({
+    name: 'EnhanceSqlModal',
+    components: { BasicModal, BasicTable, BasicForm, TableAction },
+    emits: ['register'],
+    setup() {
+      const code = ref('');
+      const tableName = ref('');
+      const btnList = ref<any[]>([]);
+      const { columns } = useSqlColumns(btnList);
+      // 列表页面公共参数、方法
+      const { doRequest, doDeleteRecord, tableContext } = useListPage({
+        tableProps: {
+          api: async (params) => {
+            let { dataSource, btnList: $btnList } = await getEnhanceSqlByCode(code.value, params);
+            btnList.value = $btnList;
+            return dataSource;
+          },
+          columns,
+          canResize: false,
+          useSearchForm: false,
+          beforeFetch(params) {
+            return Object.assign(params, { column: 'orderNum', order: 'asc' });
+          },
+        },
+      });
+      // 注册table数据
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+      // 注册弹窗
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        code.value = data.row.id;
+        tableName.value = data.row.tableName;
+        reload();
+      });
+      // useOnlineAiTest
+      const { aiTestMode, genEnhanceSqlData } = useOnlineTest({}, { reload }, null);
+      // 注册 form 弹窗
+      const [registerFormModal, formModal] = useModal();
+      const isUpdate = ref(false);
+      const formModalProps = reactive({
+        onRegister: registerFormModal,
+        title: computed(() => (isUpdate?.value ? '修改' : '新增')),
+        width: 800,
+        confirmLoading: false,
+        onOk: onSubmit,
+        onCancel: formModal.closeModal,
+      });
+      let formRecord: Recordable = {};
+      const { formSchemas } = useSqlFormSchemas(btnList);
+      // 注册 form
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        // update-begin--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+        labelWidth: 80,
+        labelCol: null,
+        wrapperCol: null,
+        // update-end--author:liaozhiyang---date:20231017---for：【issues/790】弹窗内文本框不居中问题
+      });
+
+      function onCancel() {
+        closeModal();
+      }
+
+      async function openFormModal(data) {
+        isUpdate.value = data.isUpdate;
+        formRecord = { ...(data.record ?? {}) };
+        formModal.openModal();
+        await nextTick();
+        await resetFields();
+        setFieldsValue(formRecord);
+      }
+
+      function onAdd() {
+        openFormModal({ isUpdate: false });
+      }
+
+      // 编辑按钮
+      function onEdit(record) {
+        openFormModal({ isUpdate: true, record });
+      }
+
+      function onGenEnhanceSqlData() {
+        genEnhanceSqlData(code.value, tableName.value);
+      }
+
+      // 批量删除事件
+      async function onBatchDelete() {
+        doRequest(() => doEnhanceSqlBatchDelete(selectedRowKeys.value));
+      }
+
+      async function onSubmit() {
+        try {
+          formModalProps.confirmLoading = true;
+          let values = await validate();
+          values = Object.assign({}, formRecord, values);
+          await saveEnhanceSql(code.value, values, isUpdate.value);
+          reload();
+          formModal.closeModal();
+        } finally {
+          formModalProps.confirmLoading = false;
+        }
+      }
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: () => onEdit(record),
+          },
+        ];
+      }
+
+      /**
+       * 下拉操作栏
+       */
+      function getDropDownAction(record): ActionItem[] {
+        return [
+          {
+            label: '删除',
+            popConfirm: {
+              title: '确定删除吗？',
+              placement: 'left',
+              confirm: () => doDeleteRecord(() => doEnhanceSqlBatchDelete([record.id])),
+            },
+          },
+        ];
+      }
+
+      return {
+        rowSelection,
+        selectedRowKeys,
+        aiTestMode,
+        onCancel,
+        onAdd,
+        onGenEnhanceSqlData,
+        onBatchDelete,
+        getTableAction,
+        getDropDownAction,
+        formModalProps,
+        registerModal,
+        registerTable,
+        registerForm,
+      };
+    },
+    computed: {
+      tableScroll() {
+        let height = window.innerHeight;
+        return {
+          y: height - 320,
+        };
+      },
+    },
+  });
+</script>
+<style lang="less" scoped>
+.popupForm{ padding-left: 40px;padding-right:40px; }
+</style>
diff --git a/src/views/super/online/cgform/components/enhance/codeHinting.ts b/src/views/super/online/cgform/components/enhance/codeHinting.ts
new file mode 100644
index 0000000..20ad74e
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/codeHinting.ts
@@ -0,0 +1,268 @@
+export const keywords: any = {
+  list: [
+    //------  列表api -------
+    // 属性
+    { text: '.acceptHrefParams', displayText: 'acceptHrefParams', superiors: 'this', desc: '获取地址栏上的条件' },
+    { text: '.currentPage', displayText: 'currentPage', superiors: 'this', desc: '获取当前页数，默认1' },
+    { text: '.currentTableName', displayText: 'currentTableName', desc: '获取当前表名' },
+    { text: '.description', displayText: 'description', superiors: 'this', desc: '获取当前表描述' },
+    { text: '.hasChildrenField', displayText: 'hasChildrenField', superiors: 'this', desc: '如果是树形列表，获取是否有子节点字段名' },
+    { text: '.ID', displayText: 'ID', superiors: 'this', desc: '获取当前表的配置ID' },
+    { text: '.pageSize', displayText: 'pageSize', superiors: 'this', desc: '获取当前每页条数，默认10' },
+    { text: '.queryParam', displayText: 'queryParam', superiors: 'this', desc: '获取查询表单的查询条件' },
+    { text: '.selectedRowKeys', displayText: 'selectedRowKeys', superiors: 'this', desc: '获取选中行的id的数组' },
+    { text: '.selectedRows', displayText: 'selectedRows', superiors: 'this', desc: '获取选中行的数据数组' },
+    { text: '.sortField', displayText: 'sortField', superiors: 'this', desc: '获取排序字段，默认‘id’' },
+    { text: '.sortType', displayText: 'sortType', superiors: 'this', desc: '获取排序类型，默认升序‘asc’' },
+    { text: '.total', displayText: 'total', superiors: 'this', desc: '获取总条数' },
+    { text: '.loading', displayText: 'loading', superiors: 'this', desc: '设置/获取loading' },
+    // 方法
+    { text: '.loadData()', displayText: 'loadData()', superiors: 'this', desc: '加载数据' },
+    { text: '.clearSelectedRow()', displayText: 'clearSelectedRow()', superiors: 'this', desc: '清除选中的行' },
+    {
+      text: '.getLoadDataParams()',
+      displayText: 'getLoadDataParams()',
+      superiors: 'this',
+      desc: '获取所有的查询条件，返回一个对象，包括：查询表单，高级查询，地址栏参数，分页信息，排序信息等',
+    },
+    { text: '.isTree()', displayText: 'isTree()', superiors: 'this', desc: '判断当前表是不是树，返回布尔值' },
+    // 事件(前置)
+    {
+      text: `beforeEdit(row){
+  return new Promise((resolve, reject) => {
+    if(row.字段名 == '字段值'){
+      reject('测试~');
+    }else{
+      resolve();
+    }
+  })     
+}`,
+      displayText: 'beforeEdit(row){}',
+      desc: '点击操作列下的编辑按钮触发，返回promise对象',
+    },
+    {
+      text: `beforeDelete(row){
+	return new Promise((resolve, reject) => {
+  	if(row.字段名 == '字段值'){
+    	reject('测试~');
+    }else{
+    	resolve();
+    }
+  })     
+}`,
+      displayText: 'beforeDelete(row){}',
+      desc: '点击操作列下的删除按钮触发，返回promise对象',
+    },
+    { text: 'console.log()', displayText: 'console.log()', desc: '打印日志' },
+  ],
+  form: [
+    //------ 表单api -------
+    // 属性
+    { text: '.loading', displayText: 'loading', superiors: 'this', desc: '是否加载中，返回的是一个ref对象' },
+    { text: '.isUpdate', displayText: 'isUpdate', superiors: 'this', desc: '是否是编辑页面，返回的是一个ref对象' },
+    { text: '.onlineFormRef', displayText: 'onlineFormRef', superiors: 'this', desc: '主表/单表表单的ref对象' },
+    { text: '.refMap', displayText: 'refMap', superiors: 'this', desc: '子表表单/子表table的ref对象map，key为子表表名' },
+    { text: '.subActiveKey', displayText: 'subActiveKey', superiors: 'this', desc: '子表的激活的tab索引值对应的字符串，从‘0’开始，返回的是一个ref对象' },
+    { text: '.sh', displayText: 'sh', superiors: 'this', desc: '单表/主表字段的显示隐藏状态' },
+    { text: '.submitFlowFlag', displayText: 'submitFlowFlag', superiors: 'this', desc: '是否提交表单后自动提交流程，返回一个ref对象' },
+    { text: '.subFormHeight', displayText: 'subFormHeight', superiors: 'this', desc: '一对一子表表单的高度，不需要设置，返回一个ref对象' },
+    { text: '.subTableHeight', displayText: 'subTableHeight', superiors: 'this', desc: '一对多子表table的高度，不需要设置，返回一个ref对象' },
+    { text: '.tableName', displayText: 'tableName', superiors: 'this', desc: '当前表名，返回的是一个ref对象' },
+    { text: '.$nextTick', displayText: '$nextTick', superiors: 'this', desc: '调用的是vue3的nextTick' },
+    { text: '.字段名_load', displayText: '字段名_load', superiors: 'this', desc: '控制字段的加载与否，设置为false表示当前字段不加载' },
+    { text: '.字段名_disabled', displayText: '字段名_disabled', superiors: 'this', desc: '控制字段的禁用与否，设置为true表示当前字段禁用' },
+    // 方法
+    { text: '.addSubRows(tableName, rows)', displayText: 'addSubRows(tableName, rows)', superiors: 'this', desc: '往一对多子表table里添加数据' },
+    {
+      text: '.changeOptions(field, options)',
+      texdisplayTextt: 'changeOptions(field, options)',
+      superiors: 'this',
+      desc: '改变单表/主笔 下拉控件的下拉选项',
+    },
+    { text: '.clearSubRows(tableName)', displayText: 'clearSubRows(tableName)', superiors: 'this', desc: '清空一对多子表table的数据' },
+    {
+      text: '.clearThenAddRows(tableName, rows)',
+      displayText: 'clearThenAddRows(tableName, rows)',
+      superiors: 'this',
+      desc: '先清空一对多子表table的数据，再往里添加数据',
+    },
+    { text: '.getFieldsValue()', displayText: 'getFieldsValue()', superiors: 'this', desc: '获取主表/单表 所有字段的值' },
+    {
+      text: '.getSubTableInstance(tableName)',
+      displayText: 'getSubTableInstance(tableName)',
+      superiors: 'this',
+      desc: '获取子表的实例对象，这个对象可以调用子表table的方法',
+    },
+    { text: '.setFieldsValue(row)', displayText: 'setFieldsValue(row)', superiors: 'this', desc: '设置主表/单表 字段的值' },
+    {
+      text: '.triggleChangeValues(values,id,target)',
+      displayText: 'triggleChangeValues(values,id,target)',
+      superiors: 'this',
+      desc: '改变单表/主表/子表 字段的值，一般用于change事件，其中id，target需要通过change事件的内置参数获取，如果不传id，target的值，则改变的是主表的字段',
+    },
+    { text: '.triggleChangeValue(field, value)', displayText: 'triggleChangeValue(field, value)', superiors: 'this', desc: '设置单表/主表 字段的值' },
+    {
+      text: '.onlineFormValueChange(field, value, otherValus)',
+      displayText: 'onlineFormValueChange(field, value, otherValus)',
+      superiors: 'this',
+      desc: '定义后，当表单值改变的时候会触发该方法（因js增强hook方式不支持原来的onlChange，所以定义此方法）',
+    },
+    {
+      text: '.changeSubTableOptions(tableName，field，options)',
+      displayText: 'changeSubTableOptions(tableName，field，options)',
+      superiors: 'this',
+      desc: '改变一对一子表下拉框options',
+    },
+    {
+      text: '.changeSubFormbleOptions(tableName，field，options)',
+      displayText: 'changeSubFormbleOptions(tableName，field，options)',
+      superiors: 'this',
+      desc: '改变一对多子表下拉框options',
+    },
+    {
+      text: '.changeRemoteOptions({ field, dict, label, type?, subTableName? })',
+      displayText: 'changeRemoteOptions({ field, dict, label, type?, subTableName? })',
+      superiors: 'this',
+      desc: '改变动态下拉框options',
+    },
+    {
+      text: '.submitFormAndFlow()',
+      displayText: 'submitFormAndFlow()',
+      superiors: 'this',
+      desc: '表单提交且发起流程',
+    },
+    // 提交前置事件
+    {
+      text: `beforeSubmit(row){
+	return new Promise((resolve, reject)=>{
+    //此处模拟等待时间，可能需要发起请求
+    setTimeout(()=>{
+      if(row.字段名 == '字段值'){
+        // 当某个字段不满足要求的时候可以reject 
+        reject('测试~');
+      }else{
+        resolve();
+      }
+    },3000)
+  })
+}`,
+      displayText: 'beforeSubmit(row){}',
+      desc: '提交前置事件',
+    },
+    // 表单加载事件
+    {
+      text: `loaded(){
+  this.$nextTick(()=>{
+    // let text = '测试js增强设置默认值';
+    // if(this.isUpdate.value === true){
+    //   text = '测试js增强修改表单值';
+    // }
+    this.setFieldsValue({
+      字段名: 修改的值
+    })
+  })
+}`,
+      displayText: 'loaded(){}',
+      desc: '表单加载事件',
+    },
+    // 单表#表单值改变事件
+    {
+      text: `onlChange(){
+  return {
+    字段名(){
+      let value = event.value
+      console.log(value)
+      this.triggleChangeValues({'字段名': '修改后的值'})
+    }
+  }
+ }`,
+      displayText: 'onlChange(){}',
+      desc: '单表#表单值改变事件',
+    },
+    // 子表#表单值改变事件
+    {
+      text: `子表名_onlChange(){
+  return {
+    字段名(){
+      let value = event.value;
+      console.log(value);
+      let row = {'字段名': '测试一对多值改变：'+value};
+      this.triggleChangeValues(row, event.row.id, event.target)
+  }
+  }
+}`,
+      displayText: '子表名_onlChange(){}',
+      desc: '子表#表单值改变事件',
+    },
+    // 子改主#表单值改变事件
+    {
+      text: `子表名_onlChange(){
+  return {
+    子表字段01(){
+      this.getSubTableInstance('子表名').getValues((err,values)=>{
+        this.triggleChangeValues({'主表字段名': '修改后的值'})
+      }) 
+    },
+  }
+}
+`,
+      displayText: '子表名_onlChange(){}',
+      desc: '子改主#表单值改变事件',
+    },
+    // js增强实现下拉联动
+    {
+      text: `onlChange(){
+  return {
+    字段名01(){
+      let value = event.value
+      this.changeOptions('字段名02', '修改后的值');
+    }
+    字段名02(){
+      let value = event.value
+      this.changeOptions('字段名03', '修改后的值');
+    }
+  }
+}`,
+      displayText: 'changeOptions()',
+      desc: 'js增强实现下拉联动',
+    },
+    { text: 'console.log()', displayText: 'console.log()', desc: '打印日志' },
+  ],
+  common: [
+    // JS增强 http请求
+    {
+      text: `getAction('请求url', { 'key': 'value'}).then(res => {
+  console.log(res)
+})`,
+      displayText: 'getAction(url, param)',
+      desc: 'get请求',
+    },
+    {
+      text: `postAction('请求url', { 'key': 'value'}).then(res => {
+  console.log(res)
+})`,
+      displayText: 'postAction(url, param)',
+      desc: 'post请求',
+    },
+    {
+      text: `putAction('请求url', { 'key': 'value'}).then(res => {
+  console.log(res)
+})`,
+      displayText: 'putAction(url, param)',
+      desc: 'put请求',
+    },
+    {
+      text: `deleteAction('请求url', { 'key': 'value'}).then(res => {
+  console.log(res)
+})`,
+      displayText: 'deleteAction(url, param)',
+      desc: 'delete请求',
+    },
+    { text: 'this', displayText: 'this', desc: '上下文' },
+    {
+      text: '.openCustomModal({title,width,row,formComponent,requestUrl,hide,show})',
+      displayText: 'openCustomModal({title,width,row,formComponent,requestUrl,hide,show})',
+      desc: '打开一个弹窗-参考 Js增强打开自定义弹窗',
+    },
+  ],
+};
diff --git a/src/views/super/online/cgform/components/enhance/enhance.api.ts b/src/views/super/online/cgform/components/enhance/enhance.api.ts
new file mode 100644
index 0000000..d4e38f7
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/enhance.api.ts
@@ -0,0 +1,141 @@
+import { defHttp } from '/@/utils/http/axios';
+import { isArray } from '/@/utils/is';
+
+export enum Api {
+  enhanceJs = '/online/cgform/head/enhanceJs/',
+  enhanceButton = '/online/cgform/head/enhanceButton/',
+}
+
+export enum EnhanceJavaApi {
+  enhanceJava = '/online/cgform/head/enhanceJava',
+  deleteBatch = '/online/cgform/head/deleteBatchEnhanceJava',
+}
+
+export enum EnhanceSqlApi {
+  enhanceSql = '/online/cgform/head/enhanceSql',
+  deleteBatch = '/online/cgform/head/deletebatchEnhanceSql',
+}
+
+/**
+ * 获取JS增强
+ * @param code
+ * @param type
+ * @param params
+ */
+export async function getEnhanceJsByCode(code: string, type: string, params?) {
+  let { success, result } = await defHttp.get(
+    {
+      url: Api.enhanceJs + code,
+      params: {
+        ...params,
+        type,
+      },
+    },
+    { isTransformResponse: false }
+  );
+  if (!success) {
+    result = { cgJs: '' };
+  }
+  return result;
+}
+
+/**
+ * 保存 JS 增强
+ * @param code
+ * @param params
+ * @param isUpdate 是否更新
+ */
+export const saveEnhanceJs = (code: string, params, isUpdate: boolean) => {
+  let url = `${Api.enhanceJs}${code}`;
+  if (isUpdate) {
+    return defHttp.put({ url, params }, { successMessageMode: 'none' });
+  } else {
+    return defHttp.post({ url, params }, { successMessageMode: 'none' });
+  }
+};
+
+// 加载Java增强数据
+export async function getEnhanceJavaByCode(code: string, params) {
+  // 先加载按钮
+  let btnRes = await defHttp.get({ url: Api.enhanceButton + code }, { isTransformResponse: false });
+  let btnList = [];
+  if (btnRes.success && isArray(btnRes.result)) {
+    // 按钮过滤 java增强只看action按钮
+    btnList = btnRes.result.filter((item) => item.optType == 'action');
+  }
+  // 再加载数据
+  let path = `${EnhanceJavaApi.enhanceJava}/${code}`;
+  let dataSource = await defHttp.get({ url: path, params });
+  return { btnList, dataSource };
+}
+
+// 执行删除操作
+export function doEnhanceJavaBatchDelete(idList: string[]) {
+  return defHttp.delete(
+    {
+      url: EnhanceJavaApi.deleteBatch,
+      params: {
+        ids: idList.join(','),
+      },
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+/**
+ * 保存 Java 增强
+ * @param code
+ * @param params
+ * @param isUpdate 是否更新
+ */
+export const saveEnhanceJava = (code: string, params, isUpdate: boolean) => {
+  let url = `${EnhanceJavaApi.enhanceJava}/${code}`;
+  if (isUpdate) {
+    return defHttp.put({ url, params });
+  } else {
+    return defHttp.post({ url, params });
+  }
+};
+
+// 加载Sql增强数据
+export async function getEnhanceSqlByCode(code: string, params) {
+  // 先加载按钮
+  let btnRes = await defHttp.get({ url: Api.enhanceButton + code }, { isTransformResponse: false });
+  let btnList = [];
+  if (btnRes.success && isArray(btnRes.result)) {
+    // 按钮过滤 java增强只看action按钮
+    btnList = btnRes.result.filter((item) => item.optType == 'action');
+  }
+  // 再加载数据
+  let path = `${EnhanceSqlApi.enhanceSql}/${code}`;
+  let dataSource = await defHttp.get({ url: path, params });
+  return { btnList, dataSource };
+}
+
+// 执行删除操作
+export function doEnhanceSqlBatchDelete(idList: string[]) {
+  return defHttp.delete(
+    {
+      url: EnhanceSqlApi.deleteBatch,
+      params: {
+        ids: idList.join(','),
+      },
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+/**
+ * 保存 Java 增强
+ * @param code
+ * @param params
+ * @param isUpdate 是否更新
+ */
+export const saveEnhanceSql = (code: string, params, isUpdate: boolean) => {
+  let url = `${EnhanceSqlApi.enhanceSql}/${code}`;
+  if (isUpdate) {
+    return defHttp.put({ url, params });
+  } else {
+    return defHttp.post({ url, params });
+  }
+};
diff --git a/src/views/super/online/cgform/components/enhance/enhance.data.ts b/src/views/super/online/cgform/components/enhance/enhance.data.ts
new file mode 100644
index 0000000..a959635
--- /dev/null
+++ b/src/views/super/online/cgform/components/enhance/enhance.data.ts
@@ -0,0 +1,204 @@
+import { computed, Ref } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { onlineDefaultButton } from '../../cgform.data';
+
+export function useJavaColumns(btnList: Ref<any[]>) {
+  let columns: BasicColumn[] = [
+    {
+      title: '页面按钮',
+      align: 'center',
+      dataIndex: 'buttonCode',
+      customRender: ({ text }) => renderButtonText(text, btnList.value),
+    },
+    {
+      title: '事件状态',
+      align: 'center',
+      dataIndex: 'event',
+      customRender: ({ text }) => (text == 'start' ? '开始' : '结束'),
+    },
+    {
+      title: '类型',
+      align: 'center',
+      dataIndex: 'cgJavaType',
+      customRender: ({ text }) => {
+        if (text == 'spring') {
+          return 'spring-key';
+        } else if (text === 'class') {
+          return 'java-class';
+        } else if (text === 'http') {
+          return 'http-api';
+        } else {
+          return text;
+        }
+      },
+    },
+    {
+      title: '内容',
+      align: 'center',
+      dataIndex: 'cgJavaValue',
+    },
+    {
+      title: '是否生效',
+      align: 'center',
+      dataIndex: 'activeStatus',
+      customRender: ({ text }) => {
+        if (text == '1') {
+          return '有效';
+        } else {
+          return '无效';
+        }
+      },
+    },
+  ];
+  return { columns };
+}
+
+export function useJavaFormSchemas(btnList: Ref<any[]>) {
+  const formSchemas = computed<FormSchema[]>(() => {
+    return [
+      {
+        label: '页面按钮',
+        field: 'buttonCode',
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: '新增', value: 'add' },
+            { label: '编辑', value: 'edit' },
+            { label: '删除', value: 'delete' },
+            { label: '导入', value: 'import' },
+            { label: '导出', value: 'export' },
+            { label: '查询', value: 'query' },
+            ...btnList.value.map((item) => ({ label: item.buttonName, value: item.buttonCode })),
+          ],
+        },
+        defaultValue: 'add',
+      },
+      {
+        label: '事件状态',
+        field: 'event',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '开始', value: 'start' },
+            { label: '结束', value: 'end' },
+          ],
+        },
+        defaultValue: 'end',
+      },
+      {
+        label: '类型',
+        field: 'cgJavaType',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: 'spring-key', value: 'spring' },
+            { label: 'java-class', value: 'class' },
+            { label: 'http-api', value: 'http' },
+          ],
+        },
+        defaultValue: 'spring',
+      },
+      {
+        label: '内容',
+        field: 'cgJavaValue',
+        component: 'Input',
+        required: true,
+      },
+      {
+        label: '是否生效',
+        field: 'activeStatus',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '有效', value: '1' },
+            { label: '无效', value: '0' },
+          ],
+        },
+        defaultValue: '1',
+      },
+    ];
+  });
+
+  return { formSchemas };
+}
+
+export function useSqlColumns(btnList: Ref<any[]>) {
+  let columns: BasicColumn[] = [
+    {
+      title: '页面按钮',
+      align: 'center',
+      dataIndex: 'buttonCode',
+      customRender: ({ text }) => renderButtonText(text, btnList.value),
+    },
+    {
+      title: '增强SQL',
+      align: 'center',
+      dataIndex: 'cgbSql',
+      ellipsis: true,
+    },
+  ];
+  return { columns };
+}
+
+export function useSqlFormSchemas(btnList: Ref<any[]>) {
+  const formSchemas = computed<FormSchema[]>(() => {
+    return [
+      {
+        label: '页面按钮',
+        field: 'buttonCode',
+        component: 'Select',
+        componentProps: {
+          allowClear: false,
+          options: [
+            { label: '新增', value: 'add' },
+            { label: '编辑', value: 'edit' },
+            { label: '删除', value: 'delete' },
+            ...btnList.value.map((item) => ({ label: item.buttonName, value: item.buttonCode })),
+          ],
+        },
+        defaultValue: 'add',
+      },
+      {
+        label: '增强SQL',
+        field: 'cgbSql',
+        component: 'JCodeEditor',
+        componentProps: {
+          language: 'sql',
+          placeholder: '请输入SQL语句',
+          languageChange: false,
+          lineNumbers: false,
+          fullScreen: true,
+          height: '320px',
+        },
+        defaultValue: '',
+      },
+      {
+        label: '描述',
+        field: 'content',
+        component: 'InputTextArea',
+        defaultValue: '',
+      },
+    ];
+  });
+
+  return { formSchemas };
+}
+
+function renderButtonText(text: string, btnList: any[]) {
+  let str = '';
+  for (let item of onlineDefaultButton) {
+    if (item.code === text) {
+      str = item.title;
+      break;
+    }
+  }
+  if (!str) {
+    for (let item of btnList) {
+      if (item.buttonCode === text) {
+        str = item.buttonName;
+        break;
+      }
+    }
+  }
+  return str || text;
+}
diff --git a/src/views/super/online/cgform/components/tables/CheckDictTable.vue b/src/views/super/online/cgform/components/tables/CheckDictTable.vue
new file mode 100644
index 0000000..015695c
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/CheckDictTable.vue
@@ -0,0 +1,266 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    rowNumber
+    keyboardEdit
+    :class="[prefixCls]"
+    :maxHeight="tableHeight.noToolbar"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
+    v-bind="tableProps"
+  >
+    <template #fieldValidType="props">
+      <a-row type="flex" :class="['row-valid-type', { full: !isCustomRegexp(props.value) }]">
+        <a-col :class="['left']">
+          <a-select :value="props.value" :options="validTypeOptions" placeholder="空" style="width: 100%" @change="props.triggerChange" :virtual="false">
+            <template #dropdownRender="{ menuNode }">
+              <div class="menu">
+                <VNodes :vnodes="menuNode" />
+              </div>
+              <div
+                v-show="!isCustomRegexp(props.value)"
+                class="custom-option-list rc-virtual-list-holder-inner"
+                style="border-top: 1px solid #dfdfdf"
+              >
+                <div class="ant-select-item ant-select-item-option" title="使用自定义正则表达式作为校验规则" @click="onAddCustomRegexp(props)" @mousedown="e => e.preventDefault()">
+                  正则表达式
+                </div>
+              </div>
+            </template>
+          </a-select>
+        </a-col>
+        <a-col class="right" title="修改自定义正则表达式">
+          <a-button preIcon="ant-design:edit" @click="() => onChangeCustomRegexp(props)" />
+        </a-col>
+      </a-row>
+    </template>
+  </JVxeTable>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent, computed } from 'vue';
+  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+  import { useTableSync } from '../../hooks/useTableSync';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useJPrompt } from '/@/components/jeecg/JPrompt';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'CheckDictTable',
+    components: {
+      VNodes: (_, { attrs }) => attrs.vnodes,
+    },
+    setup() {
+      const { prefixCls } = useDesign('cgform-check-dict-table');
+      const { createMessage: $message } = useMessage();
+      // 定义列信息
+      const columns = ref<JVxeColumn[]>([
+        { title: '字段名称', key: 'dbFieldName', width: 100 },
+        { title: '字段备注', key: 'dbFieldTxt', width: 100 },
+        {
+          title: '字段Href',
+          key: 'fieldHref',
+          width: 130,
+          type: JVxeTypes.textarea,
+          defaultValue: '',
+        },
+        {
+          title: '验证规则',
+          key: 'fieldValidType',
+          width: 170,
+          type: JVxeTypes.slot,
+          slotName: 'fieldValidType',
+          allowInput: true,
+          defaultValue: '',
+          placeholder: '空',
+        },
+        {
+          title: '校验必填',
+          key: 'fieldMustInput',
+          width: 80,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: false,
+        },
+        {
+          title: '定义转换器',
+          key: 'converter',
+          width: 350,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+      ]);
+      
+      const setup = useTableSync(columns);
+      const { tableRef } = setup;
+      
+      const validTypeOptions = ref([
+        { label: '空', value: '' },
+        { label: '唯一校验', value: 'only' },
+        { label: '6到16位数字', value: 'n6-16' },
+        { label: '6到18位字母', value: 's6-18' },
+        { label: '6到16位任意字符', value: '*6-16' },
+        { label: '网址', value: 'url' },
+        { label: '电子邮件', value: 'e' },
+        { label: '手机号码', value: 'm' },
+        { label: '邮政编码', value: 'p' },
+        { label: '字母', value: 's' },
+        { label: '数字', value: 'n' },
+        { label: '整数', value: 'z' },
+        { label: '非空', value: '*' },
+        { label: '金额', value: 'money' },
+      ]);
+      const validTypeValues = computed(() => {
+        return validTypeOptions.value.map((opt) => opt.value);
+      });
+
+      const { createJPrompt } = useJPrompt();
+
+      /**
+       * 判断是否是自定义正则表达式
+       * @param value
+       */
+      function isCustomRegexp(value) {
+        return value != null && !validTypeValues.value.includes(value);
+      }
+
+      // 添加自定义正则表达式
+      function onAddCustomRegexp(props) {
+        createJPrompt({
+          title: '自定义正则表达式',
+          placeholder: '请输入正则表达式',
+          rules: [{ required: true, message: '正则表达式不能为空！' }, { validator: validatorCustomRegexp }],
+          onOk: (value) => {
+            props.triggerChange(value);
+            $message.success('添加成功');
+          },
+        });
+      }
+
+      // 更改自定义正则表达式
+      function onChangeCustomRegexp(props) {
+        createJPrompt({
+          title: '修改自定义正则表达式',
+          defaultValue: props.value,
+          placeholder: '请输入正则表达式',
+          rules: [{ required: true, message: '正则表达式不能为空！' }, { validator: validatorCustomRegexp }],
+          onOk: (value) => {
+            props.triggerChange(value);
+            if (value !== props.value) {
+              $message.success('修改成功');
+            }
+          },
+        });
+      }
+
+      // 校验自定义正则表达式
+      function validatorCustomRegexp(_, value) {
+        if (isCustomRegexp(value)) {
+          return Promise.resolve();
+        } else {
+          return Promise.reject('当前校验已存在');
+        }
+      }
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+      function syncFieldMustInput(row) {
+        if (row.dbIsNull === '0') {
+          tableRef.value!.setValues([
+            {
+              rowKey: row.id,
+              values: { fieldMustInput: '1' },
+            },
+          ]);
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+      return {
+        ...setup,
+        prefixCls,
+        columns,
+        isCustomRegexp,
+        validTypeOptions,
+        validTypeValues,
+
+        onAddCustomRegexp,
+        onChangeCustomRegexp,
+        syncFieldMustInput,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  //noinspection LessUnresolvedVariable
+  // --------------------- begin 自定义正则表达式插槽样式 ------------------
+  .row-valid-type {
+    .left,
+    .right {
+      &:hover {
+        z-index: 3;
+      }
+    }
+
+    &.full {
+      .right {
+        display: none;
+      }
+    }
+
+    .left {
+      flex: 1;
+      z-index: 2;
+      width: calc(100% - 33px);
+
+      :deep(.ant-select){
+        .ant-select-selector {
+          border-width: 0 !important;
+          border-color: transparent !important;
+          box-shadow: none !important;
+        }
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+
+      :deep(.ant-select:not(.ant-select-open)){
+        .ant-select-selector {
+          background-color: transparent !important;
+        }
+
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .right {
+      width: 33px;
+      z-index: 1;
+
+      :deep(.ant-btn){
+        padding: 4px 8px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border: none;
+        background-color: transparent;
+        box-shadow: none !important;
+      }
+    }
+  }
+  // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-497】表单校验类型选择最后项，二次打开偶尔显示不全
+  .menu {
+    :deep(.rc-virtual-list-holder) {
+      overflow-y: hidden !important;
+      &:hover {
+        overflow-y: auto !important;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240807---for：【TV360X-497】表单校验类型选择最后项，二次打开偶尔显示不全
+  // --------------------- end 自定义正则表达式插槽样式 ------------------
+</style>
diff --git a/src/views/super/online/cgform/components/tables/DBAttributeTable.vue b/src/views/super/online/cgform/components/tables/DBAttributeTable.vue
new file mode 100644
index 0000000..6b25ff4
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/DBAttributeTable.vue
@@ -0,0 +1,641 @@
+<template>
+  <JVxeTable
+    class="dBAttributeTable"
+    ref="tableRef"
+    rowNumber
+    rowSelection
+    dragSort
+    :notAllowDrag="[{'key':'dbFieldName','value':'id'}]"
+    keyboardEdit
+    sortKey="orderNum"
+    addButtonSettings
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :toolbar="actionButton"
+    :maxHeight="tableHeight.normal"
+    :disabledRows="{ dbFieldName: handleDisabledDbFieldName }"
+    v-bind="tableProps"
+    @added="handleAdded"
+    @removed="handleRemoved"
+    @dragged="handleDragged"
+    @inserted="handleInserted"
+    @valueChange="handleValueChange"
+  >
+    <template #toolbarSuffix>
+      <a-button type="primary" preIcon="ant-design:robot-outlined" @click="openAiModal">AI字段建议</a-button>
+    </template>
+  </JVxeTable>
+  <AiModal
+    :tableName="tableName"
+    :isUpdate="isUpdate"
+    @register="registerAiModal"
+    v-if="aiModalShow"
+    @close="() => (aiModalShow = false)"
+    :DBtableRef="tableRef"
+    @generate="handleGenerate"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, getCurrentInstance, defineComponent } from 'vue';
+  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+  import { useTableSync } from '../../hooks/useTableSync';
+  import AiModal from './components/aiModal.vue';
+  import { useModal } from '/@/components/Modal';
+
+  const MySQLKeywords = [
+    'ADD',
+    'ALL',
+    'ALTER',
+    'ANALYZE',
+    'AND',
+    'AS',
+    'ASC',
+    'ASENSITIVE',
+    'BEFORE',
+    'BETWEEN',
+    'BIGINT',
+    'BINARY',
+    'BLOB',
+    'BOTH',
+    'BY',
+    'CALL',
+    'CASCADE',
+    'CASE',
+    'CHANGE',
+    'CHAR',
+    'CHARACTER',
+    'CHECK',
+    'COLLATE',
+    'COLUMN',
+    'CONDITION',
+    'CONNECTION',
+    'CONSTRAINT',
+    'CONTINUE',
+    'CONVERT',
+    'CREATE',
+    'CROSS',
+    'CURRENT_DATE',
+    'CURRENT_TIME',
+    'CURRENT_TIMESTAMP',
+    'CURRENT_USER',
+    'CURSOR',
+    'DATABASE',
+    'DATABASES',
+    'DAY_HOUR',
+    'DAY_MICROSECOND',
+    'DAY_MINUTE',
+    'DAY_SECOND',
+    'DEC',
+    'DECIMAL',
+    'DECLARE',
+    'DEFAULT',
+    'DELAYED',
+    'DELETE',
+    'DESC',
+    'DESCRIBE',
+    'DETERMINISTIC',
+    'DISTINCT',
+    'DISTINCTROW',
+    'DIV',
+    'DOUBLE',
+    'DROP',
+    'DUAL',
+    'EACH',
+    'ELSE',
+    'ELSEIF',
+    'ENCLOSED',
+    'ESCAPED',
+    'EXISTS',
+    'EXIT',
+    'EXPLAIN',
+    'FALSE',
+    'FETCH',
+    'FLOAT',
+    'FLOAT4',
+    'FLOAT8',
+    'FOR',
+    'FORCE',
+    'FOREIGN',
+    'FROM',
+    'FULLTEXT',
+    'GOTO',
+    'GRANT',
+    'GROUP',
+    'HAVING',
+    'HIGH_PRIORITY',
+    'HOUR_MICROSECOND',
+    'HOUR_MINUTE',
+    'HOUR_SECOND',
+    'IF',
+    'IGNORE',
+    'IN',
+    'INDEX',
+    'INFILE',
+    'INNER',
+    'INOUT',
+    'INSENSITIVE',
+    'INSERT',
+    'INT',
+    'INT1',
+    'INT2',
+    'INT3',
+    'INT4',
+    'INT8',
+    'INTEGER',
+    'INTERVAL',
+    'INTO',
+    'IS',
+    'ITERATE',
+    'JOIN',
+    'KEY',
+    'KEYS',
+    'KILL',
+    'LABEL',
+    'LEADING',
+    'LEAVE',
+    'LEFT',
+    'LIKE',
+    'LIMIT',
+    'LINEAR',
+    'LINES',
+    'LOAD',
+    'LOCALTIME',
+    'LOCALTIMESTAMP',
+    'LOCK',
+    'LONG',
+    'LONGBLOB',
+    'LONGTEXT',
+    'LOOP',
+    'LOW_PRIORITY',
+    'MATCH',
+    'MEDIUMBLOB',
+    'MEDIUMINT',
+    'MEDIUMTEXT',
+    'MIDDLEINT',
+    'MINUTE_MICROSECOND',
+    'MINUTE_SECOND',
+    'MOD',
+    'MODIFIES',
+    'NATURAL',
+    'NOT',
+    'NO_WRITE_TO_BINLOG',
+    'NULL',
+    'NUMERIC',
+    'ON',
+    'OPTIMIZE',
+    'OPTION',
+    'OPTIONALLY',
+    'OR',
+    'ORDER',
+    'OUT',
+    'OUTER',
+    'OUTFILE',
+    'PRECISION',
+    'PRIMARY',
+    'PROCEDURE',
+    'PURGE',
+    'RAID0',
+    'RANGE',
+    'READ',
+    'READS',
+    'REAL',
+    'REFERENCES',
+    'REGEXP',
+    'RELEASE',
+    'RENAME',
+    'REPEAT',
+    'REPLACE',
+    'REQUIRE',
+    'RESTRICT',
+    'RETURN',
+    'REVOKE',
+    'RIGHT',
+    'RLIKE',
+    'SCHEMA',
+    'SCHEMAS',
+    'SECOND_MICROSECOND',
+    'SELECT',
+    'SENSITIVE',
+    'SEPARATOR',
+    'SET',
+    'SHOW',
+    'SMALLINT',
+    'SPATIAL',
+    'SPECIFIC',
+    'SQL',
+    'SQLEXCEPTION',
+    'SQLSTATE',
+    'SQLWARNING',
+    'SQL_BIG_RESULT',
+    'SQL_CALC_FOUND_ROWS',
+    'SQL_SMALL_RESULT',
+    'SSL',
+    'STARTING',
+    'STRAIGHT_JOIN',
+    'TABLE',
+    'TERMINATED',
+    'THEN',
+    'TINYBLOB',
+    'TINYINT',
+    'TINYTEXT',
+    'TO',
+    'TRAILING',
+    'TRIGGER',
+    'TRUE',
+    'UNDO',
+    'UNION',
+    'UNIQUE',
+    'UNLOCK',
+    'UNSIGNED',
+    'UPDATE',
+    'USAGE',
+    'USE',
+    'USING',
+    'UTC_DATE',
+    'UTC_TIME',
+    'UTC_TIMESTAMP',
+    'VALUES',
+    'VARBINARY',
+    'VARCHAR',
+    'VARCHARACTER',
+    'VARYING',
+    'WHEN',
+    'WHERE',
+    'WHILE',
+    'WITH',
+    'WRITE',
+    'X509',
+    'XOR',
+    'YEAR_MONTH',
+    'ZEROFILL',
+  ];
+
+  export default defineComponent({
+    name: 'DBAttributeTable',
+    props: {
+      actionButton: { type: Boolean, default: true },
+      tableName: { type: String, default: '' },
+      isUpdate: { type: Boolean, default: false },
+    },
+    components: {
+      AiModal,
+    },
+    emits: ['added', 'removed', 'inserted', 'dragged', 'syncDbType', 'syncDbIsPersist', 'syncDbIsNull'],
+    setup(props, { emit }) {
+      const instance = getCurrentInstance();
+      const addBatching = ref(false);
+      const columns = ref<JVxeColumn[]>([
+        {
+          title: '字段名称',
+          key: 'dbFieldName',
+          width: 140,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+          fixed: 'left',
+          validateRules: [
+            { required: true, message: '${title}不能为空' },
+            {
+              pattern: /^[a-zA-Z]{1}(?!_)[a-zA-Z0-9_\\$]+$/,
+              message: '命名规则：只能由字母、数字、下划线、$符号组成；必须以字母开头；不能以单个字母加下滑线开头',
+            },
+            { unique: true, message: '${title}不能重复' },
+            {
+              handler({ cellValue }, callback) {
+                /* 判断是否是关键字 */
+                if (MySQLKeywords.includes(cellValue.toUpperCase())) {
+                  callback(false, cellValue + '是关键字，不能作为字段名称使用！');
+                } else {
+                  callback(true);
+                }
+              },
+            },
+            { handler: validateExistIndex },
+            // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+            {
+              handler({ cellValue }, callback) {
+                if (cellValue.length > 32) {
+                  callback(false, '字段名最长32个字符');
+                } else {
+                  callback(true);
+                }
+              },
+            },
+            // update-end--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+          ],
+          disabled: !props.actionButton,
+        },
+        {
+          title: '字段备注',
+          key: 'dbFieldTxt',
+          width: 140,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+          fixed: 'left',
+          validateRules: [
+            { required: true, message: '${title}不能为空' },
+            // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+            {
+              handler({ cellValue }, callback) {
+                if (cellValue.length > 200) {
+                  callback(false, '字段名最长200个字');
+                } else {
+                  callback(true);
+                }
+              },
+            },
+            // update-end--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+          ],
+        },
+        {
+          title: '字段长度',
+          key: 'dbLength',
+          width: 120,
+          type: JVxeTypes.inputNumber,
+          defaultValue: 32,
+          placeholder: '请输入${title}',
+          validateRules: [{ required: true, message: '${title}不能为空' }],
+          disabled: !props.actionButton,
+        },
+        {
+          title: '小数点',
+          key: 'dbPointLength',
+          width: 100,
+          type: JVxeTypes.inputNumber,
+          defaultValue: 0,
+          placeholder: '请输入${title}',
+          validateRules: [{ required: true, message: '${title}不能为空' }],
+          disabled: !props.actionButton,
+        },
+        {
+          title: '默认值',
+          key: 'dbDefaultVal',
+          width: 140,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          disabled: !props.actionButton,
+        },
+        {
+          title: '字段类型',
+          key: 'dbType',
+          width: 140,
+          type: JVxeTypes.select,
+          options: [
+            { title: 'String', value: 'string' },
+            { title: 'Integer', value: 'int' },
+            { title: 'Double', value: 'double' },
+            { title: 'Long', value: 'long' },
+            { title: 'Date', value: 'Date' },
+            { title: 'Datetime', value: 'Datetime' },
+            { title: 'BigDecimal', value: 'BigDecimal' },
+            { title: 'Text', value: 'Text' },
+            { title: 'LongText', value: 'LongText' },
+            { title: 'Blob', value: 'Blob' },
+          ],
+          defaultValue: 'string',
+          placeholder: '请选择${title}',
+          disabled: !props.actionButton,
+          validateRules: [{ required: true, message: '请选择${title}' }, { handler: validateFieldDbType }],
+        },
+        {
+          title: '主键',
+          key: 'dbIsKey',
+          width: 80,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: false,
+          disabled: !props.actionButton,
+        },
+        {
+          title: '允许空值',
+          key: 'dbIsNull',
+          width: 80,
+          type: JVxeTypes.checkbox,
+          customValue: ['1', '0'],
+          defaultChecked: true,
+          disabled: !props.actionButton,
+        },
+        {
+          title: '同步数据库',
+          key: 'dbIsPersist',
+          minWidth: 80,
+          type: JVxeTypes.checkbox,
+          customValue: ['1', '0'],
+          defaultChecked: true,
+          disabled: !props.actionButton,
+        },
+        { title: 'orderNum', key: 'orderNum', type: JVxeTypes.hidden },
+      ]);
+      let removeIds = [];
+
+      const setup = useTableSync(columns);
+      const { tableRef, loading, dataSource, tableHeight, tableProps, setDataSource, validateData } = setup;
+      // update-begin--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+      const aiModalShow = ref(false);
+      const [registerAiModal, { openModal }] = useModal();
+      const handleGenerate = (data) => {
+        tableRef.value!.addRows(data);
+      };
+      // update-end--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+      function handleAdded() {
+        emit('added', instance);
+      }
+
+      function handleRemoved(event) {
+        removeIds = removeIds.concat(event.deleteRows.map((r) => r.id));
+        emit('removed', { ...event, removeIds, target: instance });
+      }
+
+      function handleDragged(event) {
+        emit('dragged', {
+          oldIndex: event.oldIndex,
+          newIndex: event.newIndex,
+          target: instance,
+        });
+      }
+
+      function handleInserted(event) {
+        emit('inserted', { ...event, target: instance });
+      }
+
+      function getRemoveIds() {
+        return removeIds;
+      }
+
+      function handleValueChange(event) {
+        let { type, row, col, value, target, oldValue } = event;
+        if (type === JVxeTypes.select && col.key === 'dbType') {
+          // 当字段类型改为Date时触发同步事件，同步控件类型为日期选择器
+          if (value === 'Date' || value === 'Datetime') {
+            emit('syncDbType', { row, value, target: instance });
+          }
+
+          // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7530】字段类型从Date和DateTime改成string，控件也变成文本框
+          if ((value !== 'Date' || value !== 'Datetime') && (oldValue == 'Date' || oldValue == 'Datetime')) {
+            emit('syncDbType', { row, value, target: instance });
+          }
+          // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7530】字段类型从Date和DateTime改成string，控件也变成文本框
+          // 字段类型Blob、Date、Text 将字段长度改为0
+          if (value === 'Blob' || value === 'Text' || value === 'Date') {
+            target.setValues([{ rowKey: row.id, values: { dbLength: '0' } }]);
+          } else if (value === 'string') {
+            // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-56】字段类型修改，改成string时给默认长度
+            target.setValues([{ rowKey: row.id, values: { dbLength: '32' } }]);
+            // update-end--author:liaozhiyang---date:20240517---for：【TV360X-56】字段类型修改，改成string时给默认长度
+          } else if (value === 'int' || value === 'double' || value === 'BigDecimal') {
+            target.setValues([{ rowKey: row.id, values: { dbLength: '10' } }]);
+          //update-begin---author:wangshuai---date:2025-10-24---for:【QQYUN-13901】增加Long类型---
+          } else if (value === 'long') {
+            target.setValues([{ rowKey: row.id, values: { dbLength: '19' } }]);
+          //update-end---author:wangshuai---date:2025-10-24---for:【QQYUN-13901】增加Long类型---
+          } else if (row['dbLength'] === '0') {
+            target.setValues([{ rowKey: row.id, values: { dbLength: '32' } }]);
+          }
+        } else if (col.key === 'dbIsPersist') {
+          // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+          emit('syncDbIsPersist', { row, value, target: instance });
+          // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+        } else if (col.key === 'dbIsNull') {
+          // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+          emit('syncDbIsNull', { row, value, target: instance });
+          // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】数据库不允许为空，校验默认相应勾上
+        }
+      }
+
+      // dbFieldName字段禁用
+      function handleDisabledDbFieldName(value, _row, rowIndex) {
+        if (value === 'has_child') {
+          return true;
+        }
+        if (value === 'id') {
+          // -update-begin--author:liaozhiyang---date:20240614---for：【TV360X-357】数据库属性其他行拖到id行之上时id可编辑了
+          const { tables } = setup;
+          const dataSource = tables.dbTable.value!.tableRef.getTableData() ?? [];
+          const findIndex = dataSource.findIndex((item) => item.dbFieldName === 'id');
+          const idIndex = findIndex === -1 ? 0 : findIndex;
+          // -update-end--author:liaozhiyang---date:20240614---for：【TV360X-357】数据库属性其他行拖到id行之上时id可编辑了
+          if (idIndex === rowIndex) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      /** 新增一行，并反馈给父组件 */
+      function tableAddLine(newLine) {
+        tableRef.value!.pushRows(newLine);
+        // 正在批量添加数据，不单独反馈
+        if (!addBatching.value) {
+          emit('added', instance);
+        }
+      }
+
+      function tableDeleteLines(ids: string[]) {
+        return tableRef.value!.removeRowsById(ids);
+      }
+
+      /** 开始批量添加数据，在此期间添加的数据不会反馈给父组件进行同步 */
+      function addBatchBegin() {
+        addBatching.value = true;
+        loading.value = true;
+      }
+
+      /** 结束批量添加数据，会立即反馈给父组件进行同步数据 */
+      function addBatchEnd() {
+        addBatching.value = false;
+        loading.value = false;
+        emit('added', instance);
+      }
+
+      //update-begin-author:taoyan date:2022-5-26 for: issues/I56ATQ Online代码功能，跨库数据库同步时报错（单库正常）：org.jeecg.modules.online.cgform.c.a:492
+      function validateExistIndex({ cellValue, row }, callback) {
+        const { tables } = setup;
+        if (tables) {
+          let dataSource = tables.dbTable.value!.tableRef.dataSource;
+          //获取 table的原始数据
+          let temp = dataSource.filter((item) => item.id === row.id);
+          if (!temp || temp.length <= 0) {
+            callback(true);
+          }
+          let dbFieldName = temp[0]['dbFieldName'];
+          if (dbFieldName == cellValue) {
+            callback(true);
+          }
+          //获取索引数据
+          let arr = tables.idxTable.value!.tableRef.getTableData();
+          for (let item of arr) {
+            let indexField = item.indexField;
+            //索引字段可能是多个字段
+            let indexFieldArray = indexField.split(',');
+            if (indexFieldArray.indexOf(dbFieldName) >= 0) {
+              callback(false, '当前字段存在索引配置，请先删除索引再修改字段');
+            }
+          }
+        }
+        callback(true);
+      }
+      //update-end-author:taoyan date:2022-5-26 for: issues/I56ATQ Online代码功能，跨库数据库同步时报错（单库正常）：org.jeecg.modules.online.cgform.c.a:492
+      // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-278】设置了小数点不可设置integer类型
+      function validateFieldDbType({ cellValue, row }, callback) {
+        if (row.dbType == 'int' && row.dbPointLength > 0) {
+          callback(false, '设置了小数点不可设置integer类型');
+        }
+        callback(true);
+      }
+      // update-end--author:liaozhiyang---date:20240522---for：【TV360X-278】设置了小数点不可设置integer类型
+      // update-begin--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+      const openAiModal = () => {
+        aiModalShow.value = true;
+        setTimeout(() => {
+          openModal(true);
+        }, 0);
+      };
+      // update-end--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+      return {
+        tableRef,
+        loading,
+        columns,
+        dataSource,
+        setDataSource,
+        addBatchBegin,
+        addBatchEnd,
+        tableAddLine,
+        tableHeight,
+        tableProps,
+        tableDeleteLines,
+        handleAdded,
+        handleRemoved,
+        handleDragged,
+        handleInserted,
+        handleValueChange,
+        handleDisabledDbFieldName,
+        validateData,
+        getRemoveIds,
+        validateExistIndex,
+        openAiModal,
+        registerAiModal,
+        aiModalShow,
+        handleGenerate,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-212】字段名称校验样式调整
+  .dBAttributeTable {
+    :deep(table) {
+      tr {
+        td:nth-child(4) {
+          .vxe-cell--valid-error-msg {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240521---for：【TV360X-212】字段名称校验样式调整
+</style>
diff --git a/src/views/super/online/cgform/components/tables/ForeignKeyTable.vue b/src/views/super/online/cgform/components/tables/ForeignKeyTable.vue
new file mode 100644
index 0000000..ac34c93
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/ForeignKeyTable.vue
@@ -0,0 +1,52 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    rowNumber
+    keyboardEdit
+    :maxHeight="tableHeight.noToolbar"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :disabled="!actionButton"
+    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
+    v-bind="tableProps"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+  import { useTableSync } from '../../hooks/useTableSync';
+
+  export default defineComponent({
+    name: 'ForeignKeyTable',
+    props: {
+      actionButton: { type: Boolean, default: true },
+    },
+    setup() {
+      // 定义列信息
+      const columns = ref<JVxeColumn[]>([
+        { title: '字段名称', key: 'dbFieldName', width: 160 },
+        { title: '字段备注', key: 'dbFieldTxt', width: 160 },
+        {
+          title: '主表名',
+          key: 'mainTable',
+          width: 280,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+        {
+          title: '主表字段',
+          key: 'mainField',
+          width: 280,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+      ]);
+      const setup = useTableSync(columns);
+      return { ...setup, columns };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/tables/IndexTable.vue b/src/views/super/online/cgform/components/tables/IndexTable.vue
new file mode 100644
index 0000000..d2d2e49
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/IndexTable.vue
@@ -0,0 +1,101 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    rowNumber
+    rowSelection
+    dragSort
+    keyboardEdit
+    sortKey="orderNum"
+    :maxHeight="tableHeight.normal"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :toolbar="actionButton"
+    v-bind="tableProps"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent, Ref } from 'vue';
+  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+  import { CgformModal } from '../../types';
+  import { useTableSync } from '../../hooks/useTableSync';
+
+  export default defineComponent({
+    name: 'IndexTable',
+    components: {},
+    props: {
+      actionButton: {
+        type: Boolean,
+        default: true,
+        required: false,
+      },
+    },
+    setup() {
+      const columns = ref<JVxeColumn[]>([
+        {
+          title: '索引名称',
+          key: 'indexName',
+          width: 330,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+          validateRules: [
+            { required: true, message: '${title}不能为空' },
+            // update-begin--author:liaozhiyang---date:20240807---for：【TV360X-1974】online索引名称增加校验
+            {
+              pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/,
+              message: '命名规则：只能由字母、数字、下划线组成；必须以字母开头',
+            },
+            // update-end--author:liaozhiyang---date:20240807---for：【TV360X-1974】online索引名称增加校验
+          ],
+        },
+        {
+          title: '索引栏位',
+          key: 'indexField',
+          width: 330,
+          type: JVxeTypes.selectMultiple,
+          options: [],
+          defaultValue: '',
+          placeholder: '请选择${title}',
+          validateRules: [{ required: true, message: '请选择${title}' }],
+        },
+        {
+          title: '索引类型',
+          key: 'indexType',
+          width: 330,
+          type: JVxeTypes.select,
+          options: [
+            { title: 'normal', value: 'normal' },
+            { title: 'unique', value: 'unique' },
+          ],
+          defaultValue: 'normal',
+          placeholder: '请选择${title}',
+          validateRules: [{ required: true, message: '请选择${title}' }],
+        },
+      ]);
+
+      const setup = useTableSync(columns);
+      const { tableRef, loading, dataSource, tableHeight, tableProps, setDataSource, validateData } = setup;
+
+      /** 同步列表 */
+      function syncTable(dbTable: Ref<CgformModal.DBAttributeTableType>) {
+        let options: any[] = [];
+        let data = dbTable.value!.tableRef!.getTableData();
+        data.forEach((value) => {
+          if (value.dbFieldName) {
+            options.push({
+              title: value.dbFieldTxt,
+              value: value.dbFieldName,
+            });
+          }
+        });
+        columns.value[1].options = options;
+      }
+
+      return { tableRef, loading, dataSource, columns, tableHeight, tableProps, syncTable, setDataSource, validateData };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/components/tables/PageAttributeTable.vue b/src/views/super/online/cgform/components/tables/PageAttributeTable.vue
new file mode 100644
index 0000000..fd70c05
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/PageAttributeTable.vue
@@ -0,0 +1,642 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    row-class-name="online-config-page"
+    rowNumber
+    keyboardEdit
+    :maxHeight="tableHeight.noToolbar"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
+    @valueChange="handleValueChange"
+    v-bind="tableProps" >
+    <!-- 定义插槽开始了 -->
+    <template #fieldConfig="props">
+      <a-space v-if="showConfigButton(props)">
+        <a-button type="primary" size="small" ghost @click="openConfig(props)">配置</a-button>
+        <a-button size="small" @click="openJsonConfig(props)">JSON</a-button>
+      </a-space>
+    </template>
+  </JVxeTable>
+  
+  <!-- 关联记录弹窗配置 -->
+  <link-table-config-modal @register="registerModal" @success="handleConfigData"/>
+  
+  <!-- 他表字段弹窗配置 -->
+  <link-table-field-config-modal :isSubTableOneToMany="isSubTableOneToMany" @register="registerFieldModal" @success="handleFieldConfigData"/>
+
+  <!-- 扩展参数弹窗配置 -->
+  <FieldExtendJsonModal @register="registerExtJsonModal" @success="handleExtJson"/>
+
+  <!-- 扩展参数JSON直接编辑弹窗 -->
+  <a-modal v-model:open="jsonModalVisible" title="扩展参数" okText="确认" cancelText="取消" :width="600" @ok="handleJsonSubmit">
+    <div class="p-4"> 
+      <a-textarea v-model:value="currentJsonStr" :rows="12" placeholder="请输入扩展参数JSON" />
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+  import { useTableSync } from '../../hooks/useTableSync';
+  import LinkTableConfigModal from '../../extend/linkTable/LinkTableConfigModal.vue'
+  import LinkTableFieldConfigModal from '../../extend/linkTable/LinkTableFieldConfigModal.vue'
+  import FieldExtendJsonModal from '../../extend/FieldExtendJsonModal.vue'
+  import { useModal } from '/@/components/Modal';
+
+  const commonPageOptions = [
+    { title: '文本框', value: 'text' },
+    { title: '密码', value: 'password' },
+    { title: '下拉框', value: 'list' },
+    { title: '单选框', value: 'radio' },
+    { title: '多选框', value: 'checkbox' },
+    { title: '开关', value: 'switch' },
+    { title: '日期(年月日)', value: 'date' },
+    { title: '日期(年月日时分秒)', value: 'datetime' },
+    { title: '时间(HH:mm:ss)', value: 'time' },
+    { title: '文件', value: 'file' },
+    { title: '图片', value: 'image' },
+    { title: '多行文本', value: 'textarea' },
+    { title: '富文本', value: 'umeditor' },
+    { title: 'MarkDown', value: 'markdown' },
+    { title: '用户选择', value: 'sel_user' },
+    { title: '部门选择', value: 'sel_depart' },
+    { title: '关联记录', value: 'link_table' },
+    { title: '他表字段', value: 'link_table_field' },
+    { title: '省市区组件', value: 'pca' },
+    { title: 'Popup弹框', value: 'popup' },
+    // update-begin--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+    { title: 'Popup字典', value: 'popup_dict' },
+    // update-end--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+    { title: '下拉多选框', value: 'list_multi' },
+    { title: '下拉搜索框', value: 'sel_search' },
+    { title: '分类字典树', value: 'cat_tree' },
+    { title: '自定义树控件', value: 'sel_tree' },
+    { title: '联动组件', value: 'link_down' }
+  ];
+  const subTablePageOptions = [
+    { title: '文本框', value: 'text' },
+    { title: '单选框', value: 'radio' },
+    { title: '开关', value: 'switch' },
+    { title: '日期(yyyy-MM-dd)', value: 'date' },
+    { title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime' },
+    { title: '时间（HH:mm:ss）', value: 'time' },
+    { title: '文件', value: 'file' },
+    { title: '图片', value: 'image' },
+    { title: '下拉框', value: 'list' },
+    { title: '下拉多选框', value: 'list_multi' },
+    { title: '下拉搜索框', value: 'sel_search' },
+    { title: 'popup弹出框', value: 'popup' },
+    { title: '关联记录', value: 'link_table' },
+    { title: '他表字段', value: 'link_table_field' },
+    // update-begin--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+    // { title: 'Popup字典', value: 'popup_dict' },
+    // update-end--author:liaozhiyang---date:20240130---for：【QQYUN-7961】popupDict字典
+    { title: '部门选择', value: 'sel_depart' },
+    { title: '用户选择', value: 'sel_user' },
+    { title: '省市区组件', value: 'pca' },
+    { title: '多行文本', value: 'textarea' },
+    { title: '分类字典树', value: 'cat_tree' },
+    { title: '自定义树控件', value: 'sel_tree' },
+  ];
+
+  export default defineComponent({
+    name: 'PageAttributeTable',
+    components: {
+      LinkTableConfigModal,
+      LinkTableFieldConfigModal,
+      FieldExtendJsonModal
+    },
+    setup() {
+      const columns = ref<JVxeColumn[]>([
+        { title: '字段名称', key: 'dbFieldName', width: 100, fixed: 'left' },
+        { title: '字段备注', key: 'dbFieldTxt', width: 120, fixed: 'left' },
+        {
+          title: '表单显示',
+          key: 'isShowForm',
+          width: 68,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: true,
+        },
+        {
+          title: '列显示',
+          key: 'isShowList',
+          width: 55,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: true,
+        },
+        {
+          title: '排序',
+          key: 'sortFlag',
+          width: 60,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: false,
+          // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-291】没勾选同步数据库禁用排序功能
+          props: {
+            isDisabledCell({ row, column }) {
+              let { dbTable } = tables;
+              // 获取到 dbTable（数据库属性） 中的数据
+              const dbRowData = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              return dbRowData?.dbIsPersist == '0' ? true : false;
+            },
+          },
+          // update-end--author:liaozhiyang---date:20240528---for：【TV360X-291】没勾选同步数据库禁用排序功能
+        },
+        {
+          title: '只读',
+          key: 'isReadOnly',
+          width: 60,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: false,
+        },
+        {
+          title: '控件类型',
+          key: 'fieldShowType',
+          width: 170,
+          type: JVxeTypes.select,
+          options: commonPageOptions,
+          defaultValue: 'text',
+          placeholder: '请选择${title}',
+          validateRules: [{ required: true, message: '请选择${title}' }, { handler: validateFieldShowType }],
+        },
+        {
+          title: '控件默认值',
+          key: 'fieldDefaultValue',
+          width: 140,
+          type: JVxeTypes.textarea,
+          props: {
+            allowClear: true,
+          },
+          defaultValue: '',
+        },
+        {
+          title: '长度',
+          key: 'fieldLength',
+          width: 90,
+          titleHelp: { message: '此控件长度只对子表列字段宽度有效！'},
+          type: JVxeTypes.inputNumber,
+          defaultValue: 120,
+          placeholder: '请输入控件长度',
+        },
+        {
+          title: '查询',
+          key: 'isQuery',
+          width: 60,
+          type: JVxeTypes.checkbox,
+          align: 'center',
+          customValue: ['1', '0'],
+          defaultChecked: false,
+          // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-423】未勾选同步数据库禁用查询
+          props: {
+            isDisabledCell({ row, column }) {
+              let { dbTable } = tables;
+              // 获取到 dbTable（数据库属性） 中的数据
+              const dbRowData = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              return dbRowData?.dbIsPersist == '0' ? true : false;
+            },
+          },
+          // update-end--author:liaozhiyang---date:20240528---for：【TV360X-423】未勾选同步数据库禁用查询
+        },
+        {
+          title: '查询类型',
+          key: 'queryMode',
+          width: 120,
+          type: JVxeTypes.select,
+          options: [
+            { title: '普通查询', value: 'single' },
+            { title: '模糊查询', value: 'like' },
+            { title: '范围查询', value: 'group' },
+          ],
+          defaultValue: 'single',
+          placeholder: '请选择${title}',
+          validateRules: [{ handler: validateQueryMode }],
+          props: {
+            isDisabledCell({ row, column }) {
+              // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-222】范围查询只支持数字和日期类型
+              // let { dbTable } = tables;
+              // // 获取到 dbTable（数据库属性） 中的数据
+              // const dbRowData = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              // if (['double', 'int', 'BigDecimal', 'Date', 'Datetime'].includes(dbRowData?.dbType)) {
+              //   return false;
+              // }
+              // return true;
+              // update-end--author:liaozhiyang---date:20240717---for：【TV360X-222】范围查询只支持数字和日期类型
+            },
+          },
+        },
+        {
+          title: '字典Table',
+          key: 'dictTable',
+          width: 150,
+          type: JVxeTypes.textarea,
+          defaultValue: '',
+        },
+        {
+          title: '字典Code',
+          key: 'dictField',
+          width: 210,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          validateRules: [{ handler: validateDictFieldOrDictText }]
+        },
+        {
+          title: '字典Text',
+          key: 'dictText',
+          width: 220,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          validateRules: [{ handler: validateDictFieldOrDictText }]
+        },
+        {
+          title: '扩展参数',
+          key: 'fieldExtendJson',
+          type: JVxeTypes.hidden,
+          defaultValue: '',
+        },
+        {
+          title: '更多配置',
+          minWidth: 150,
+          key: 'fieldConfig',
+          type: JVxeTypes.slot,
+          slotName: 'fieldConfig',
+        },
+      ]);
+      const setup = useTableSync(columns);
+      const { tableRef, tables } = setup;
+
+      function validateFieldShowType({ cellValue, row }, callback) {
+        let { dbTable } = tables;
+        // 获取到 dbTable（数据库属性） 中的数据
+        let dbType = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0].dbType;
+        //当控件类型为时间时，数据库类型必须是String类型
+        if (cellValue === 'time' && dbType !== 'string') {
+          callback(false, '当控件类型为时间时,数据库属性里的字段类型必须是String！');
+        }
+        // 当控件类型为日期时，数据库类型必须是Date类型
+        else if (cellValue === 'date' && dbType !== 'Date' && dbType !== 'Datetime') {
+          callback(false, '当控件类型为日期时，数据库属性里的字段类型必须是Date或Datetime！');
+        }
+        // 当控件类型为 yyyy-MM-dd HH:mm:ss 时，数据库类型必须是Datetime类型
+        else if (cellValue === 'datetime' && dbType !== 'Datetime') {
+          callback(false, '当控件类型为datetime时，数据库属性里的字段类型必须是Datetime！');
+        } else {
+          callback(true);
+        }
+      }
+
+      /** 同步控件类型 */
+      function syncFieldShowType(row) {
+        // update-begin--author:liaozhiyang---date:20240801---for：【TV360X-1963】当字段类型旧值是时间类型时再次选择只要不是时间类型，控件类型就重置到文本框，都重置成输入框
+        let showType = 'text';
+        if (row.dbType === 'Datetime') {
+          showType = 'datetime';
+        } else if (row.dbType === 'Date') {
+          showType = 'date';
+        }
+        // update-end--author:liaozhiyang---date:20240801---for：【TV360X-1963】当字段类型旧值是时间类型时再次选择只要不是时间类型，控件类型就重置到文本框，都重置成输入框
+        tableRef.value!.setValues([
+          {
+            rowKey: row.id,
+            values: { fieldShowType: showType },
+          },
+        ]);
+      }
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+      function syncIsQuery(row) {
+        if (row.dbIsPersist === '0') {
+          tableRef.value!.setValues([
+            {
+              rowKey: row.id,
+              values: { isQuery: '0', sortFlag: '0' },
+            },
+          ]);
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】不同步数据库的字段则去掉对应查询勾选
+
+      const isSubTableOneToMany = ref(false);
+      function changePageType(flag, relationType = 0) {
+        isSubTableOneToMany.value = flag && relationType == 0;
+        for (let col of columns.value) {
+          if (col.key == 'fieldShowType') {
+            col.options = !flag ? commonPageOptions : subTablePageOptions;
+            break;
+          }
+        }
+      }
+
+      function enableQuery(id) {
+        tableRef.value!.setValues([
+          {
+            rowKey: id,
+            values: { isQuery: '1' },
+          },
+        ]);
+      }
+
+      //update-begin-author:taoyan date:2022-8-11 for: VUEN-1940【online】关联记录和他表字段，配置智能化
+      //注册modal
+      const [registerModal, { openModal }] = useModal();
+      const [registerFieldModal, { openModal: openFieldModal }] = useModal();
+      const [registerExtJsonModal, { openModal: openExtJsonModal }] = useModal();
+      
+      //是否展示个性化配置按钮
+      function showConfigButton(props){
+        if(props.row.dbFieldName=='id'){
+          return false
+        }else{
+          return true;
+        }
+      }
+
+      /**
+       * 根据不同类型打开不同配置
+       */
+      function openConfig(props){
+        if(props.row.fieldShowType.indexOf('link_table')>=0){
+          showFieldConfig(props);
+        }else{
+          showExtJsonConfig(props);
+        }
+      }
+      
+      //点击按钮触发弹窗
+      function showFieldConfig(props){
+        let { row } = props;
+        // update-begin--author:liaozhiyang---date:20260413---for:【QQYUN-9776】字典放在页面属性tab中
+        if(props.row.fieldShowType == 'link_table'){
+          let record = getLinkTableModalData(row);
+          openModal(true, {
+            record,
+            fieldName: row.dbFieldName,
+            isSubTableOneToMany: isSubTableOneToMany.value,
+          })
+        }else if(props.row.fieldShowType == 'link_table_field'){
+          let data = getLinkTableFieldData(row);
+          openFieldModal(true, data)
+        }
+        // update-end--author:liaozhiyang---date:20260413---for:【QQYUN-9776】字典放在页面属性tab中
+      }
+      
+      // 获取他表字段的配置信息
+      function getLinkTableFieldData(row){
+        let tableData = tableRef.value!.getTableData();
+        let pageTableData = tableData.filter(item=>item.fieldShowType=='link_table');
+        // 获取关联记录的表名和相关字段信息
+        let tableAndFieldsMap = {}
+        if(pageTableData && pageTableData.length>0){
+          for(let pageTableItem of pageTableData){
+            tableAndFieldsMap[pageTableItem.dbFieldName] = {
+              title: pageTableItem.dbFieldTxt,
+              table: pageTableItem.dictTable,
+              fields: pageTableItem.dictText
+            }
+          }
+        }
+        const { dictTable, dictText, id, dbFieldTxt} = row;
+        let record = {
+          rowKey: id,
+          dbFieldTxt,
+          dictText,
+          dictTable,
+        };
+        return {
+          record,
+          tableAndFieldsMap
+        }
+      }
+      
+      //获取关联记录的配置数据
+      function getLinkTableModalData(row){
+        const { id, dbFieldTxt, fieldExtendJson, dictTable, dictText} = row;
+        //dbFieldTxt  dictTable titleField otherFields multiSelect showType
+        let result = {
+          rowKey: id,
+          dbFieldTxt,
+          dictTable
+        };
+        if(dictText){
+          let arr = dictText.split(',');
+          result['titleField'] = arr[0];
+          if(arr.length>1){
+            result['otherFields'] = dictText.substring(dictText.indexOf(',')+1)
+          }
+        }else{
+          result['titleField'] = ''
+          result['otherFields'] = ''
+        }
+        if(fieldExtendJson){
+          try{
+            let json = JSON.parse(fieldExtendJson);
+            if(json.multiSelect){
+              result['multiSelect'] = json.multiSelect
+            }else{
+              result['multiSelect'] = false
+            }
+            // update-begin--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+            if (json.isListReadOnly) {
+              result['isListReadOnly'] = json.isListReadOnly;
+            } else {
+              result['isListReadOnly'] = false;
+            }
+            // update-end--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+            if(json.showType){
+              result['showType'] = json.showType
+            }else{
+              result['showType'] = 'card'
+            }
+            if(json.imageField){
+              result['imageField'] = json.imageField
+            }else{
+              result['imageField'] = ''
+            }
+          }catch (e) {
+            console.error('解析扩展参数出错', fieldExtendJson)
+          }
+        }
+        return result;
+      }
+      
+      // 配置完成将数据填回vxe table
+      function handleConfigData(record){
+        //dbFieldTxt  dictTable titleField otherFields multiSelect showType
+        //1.设置扩展配置和字典信息
+        const { multiSelect, showType, imageField, isListReadOnly } = record;
+        let extJson = {showType, multiSelect, imageField, isListReadOnly};
+        // update-begin--author:liaozhiyang---date:20260413---for:【QQYUN-9776】字典放在页面属性tab中
+        let dictText = record.titleField;
+        if(record.otherFields){
+          dictText+=','+record.otherFields;
+        }
+        const {dictTable, dictField} = record;
+        let values = [{ rowKey: record.rowKey, values: { fieldExtendJson: JSON.stringify(extJson), dbFieldTxt: record.dbFieldTxt, dictTable, dictField, dictText } }];
+        // update-end--author:liaozhiyang---date:20260413---for:【QQYUN-9776】字典放在页面属性tab中
+        tableRef.value!.setValues(values);
+        
+        let { dbTable } = tables;
+        //2.设置字段描述
+        if(dbTable){
+          let dbTableValues = [{ rowKey: record.rowKey, values: { dbFieldTxt: record.dbFieldTxt } }];
+          dbTable.value!.tableRef!.setValues(dbTableValues)
+        }
+      }
+
+      // 配置完成将数据填回vxe table
+      function handleFieldConfigData(record){
+        const {dbFieldTxt, dictTable, dictText, rowKey } = record;
+        //1.设置字段描述和字典信息
+        let values = [{ rowKey, values: { dbFieldTxt, dictTable, dictText } }];
+        tableRef.value!.setValues(values);
+
+        let { dbTable } = tables;
+        //2.设置字段描述，取消同步数据库勾选状态
+        if(dbTable){
+          let tableValues = [{ rowKey, values: { dbFieldTxt, dbIsPersist:'0' } }];
+          dbTable.value!.tableRef!.setValues(tableValues)
+        }
+      }
+
+      /**
+       * 扩展参数的配置弹窗
+       * @param props
+       */
+      function showExtJsonConfig(props) {
+        let jsonStr = props.row.fieldExtendJson || '';
+        let id = props.rowId;
+        let fieldShowType = props.row.fieldShowType || '';
+        let sortFlag = props.row.sortFlag || '0';
+        const dbType = props.row.dbType;
+        openExtJsonModal(true, {
+          jsonStr,
+          fieldShowType,
+          sortFlag,
+          id,
+          dbType,
+        });
+      }
+
+      /**
+       * 扩展参数的 弹窗回调
+       * @param props
+       */
+      function handleExtJson(data, rowKey){
+        let values;
+        if(data && Object.keys(data).length>0){
+          values = [{ rowKey, values: { fieldExtendJson: JSON.stringify(data) } }];
+        }else{
+          values = [{ rowKey, values: { fieldExtendJson: '' } }];
+        }
+        tableRef.value!.setValues(values);
+      }
+
+      // 扩展参数JSON直接编辑
+      const jsonModalVisible = ref(false);
+      const currentJsonStr = ref('');
+      const currentJsonRowKey = ref('');
+
+      function openJsonConfig(props) {
+        currentJsonStr.value = props.row.fieldExtendJson || '';
+        currentJsonRowKey.value = props.rowId;
+        jsonModalVisible.value = true;
+      }
+
+      function handleJsonSubmit() {
+        let values = [{ rowKey: currentJsonRowKey.value, values: { fieldExtendJson: currentJsonStr.value } }];
+        tableRef.value!.setValues(values);
+        jsonModalVisible.value = false;
+      }
+      
+      const handleValueChange = (event) => {
+        console.log(event);
+      }
+      /**
+       * 2024-07-25
+       * liaozhiyang
+       * 【TV360X-1857】online查询增加模糊查询
+       * */
+      function validateQueryMode({ cellValue, row }, callback) {
+        let { dbTable } = tables;
+        // 获取到 dbTable（数据库属性） 中的数据
+        const dbType = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0].dbType;
+        if (cellValue === 'group') {
+          // 【TV360X-1967】范围查询只支持时间和数字类型且得支持控件类型是时间(HH:mm:ss)
+          if (['double', 'int', 'BigDecimal', 'Date', 'Datetime'].includes(dbType) || row.fieldShowType === 'time') {
+            callback(true);
+          } else {
+            callback(false, '范围查询，只支持数据库属里的字段类型为：Integer、Double、BigDecimal及Date、Datetime 或 控件类型是时间(HH:mm:ss)');
+          }
+        } else if (cellValue === 'like') {
+          if (['string'].includes(dbType) && row.fieldShowType === 'text') {
+            callback(true);
+          } else {
+            callback(false, '模糊查询，只支持控件类型是文本框且数据库属里的字段类型是String');
+          }
+        } else {
+          callback(true);
+        }
+      }
+      const syncQueryMode = ({oldValue, row}) => {
+        // 当字段类型旧值是string时，且查询类型是模糊查询，改成精确查询
+        if (row.dbType != 'string' && oldValue == 'string') {
+          const curTableRow = tableRef.value!.getTableData({ rowIds: [row.id] })[0];
+          if (curTableRow.queryMode == 'like') {
+            tableRef.value!.setValues([
+              {
+                rowKey: row.id,
+                values: { queryMode: 'single' },
+              },
+            ]);
+          }
+        }
+      };
+
+      /**
+       * 2024-04-17
+       * liaozhiyang
+       * 【QQYUN-8972】popup字典组件字典code和字典text只允许输入一个字段
+       * */
+      function validateDictFieldOrDictText({ cellValue, row }, callback) {
+        if (row?.fieldShowType === 'popup_dict') {
+          if (cellValue.indexOf(',') == -1) {
+            callback(true);
+          } else {
+            callback(false, 'popup字典组件只允许填写一个字段');
+          }
+        } else {
+          callback(true);
+        }
+      }
+
+      return { ...setup, columns, enableQuery, syncFieldShowType, changePageType, 
+        showConfigButton, showFieldConfig, 
+        registerExtJsonModal, handleExtJson, openConfig,
+        registerModal, handleConfigData,
+        registerFieldModal, handleFieldConfigData, syncIsQuery, handleValueChange, syncQueryMode, isSubTableOneToMany,
+        jsonModalVisible, currentJsonStr, openJsonConfig, handleJsonSubmit };
+      //update-end-author:taoyan date:2022-8-11 for: VUEN-1940【online】关联记录和他表字段，配置智能化
+      
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.online-config-page td:last-child.col--selected){
+    box-shadow:none !important;
+  }
+  //【QQYUN-8972】online隐藏控件长度前面的可编辑icon
+  :deep(.vxe-header--row) {
+    .vxe-header--column:nth-child(9) {
+      .vxe-cell--edit-icon {display:none;}
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/components/tables/QueryTable.vue b/src/views/super/online/cgform/components/tables/QueryTable.vue
new file mode 100644
index 0000000..a1f34af
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/QueryTable.vue
@@ -0,0 +1,158 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    rowNumber
+    keyboardEdit
+    :maxHeight="tableHeight.noToolbar"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
+    @valueChange="handleChange"
+    v-bind="tableProps"
+  />
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+  import { useTableSync } from '../../hooks/useTableSync';
+
+  export default defineComponent({
+    name: 'QueryTable',
+    emits: ['query'],
+    setup(_, { emit }) {
+      // 定义列信息
+      const columns = ref<JVxeColumn[]>([
+        { title: '字段名称', key: 'dbFieldName', fixed: 'left', width: 130 },
+        { title: '字段备注', key: 'dbFieldTxt', fixed: 'left', width: 130 },
+        {
+          title: '控件类型',
+          key: 'queryShowType',
+          width: 170,
+          type: JVxeTypes.select,
+          options: [
+            { title: '文本框', value: 'text' },
+            { title: '日期(yyyy-MM-dd)', value: 'date' },
+            { title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime' },
+            { title: '时间（HH:mm:ss）', value: 'time' },
+            // update-begin--author:liaozhiyang---date:20240531---for：【TV360X-415】个性化查询支持年、月、周、季度
+            // 虚拟的date_year、date_month、date_week、date_quarter其实走的还是date组件，为了查询
+            { title: '日期-年', value: 'date_year' },
+            { title: '日期-月', value: 'date_month' },
+            { title: '日期-周', value: 'date_week' },
+            { title: '日期-季度', value: 'date_quarter' },
+            // update-end--author:liaozhiyang---date:20240531---for：【TV360X-415】个性化查询支持年、月、周、季度
+            { title: '下拉框', value: 'list' },
+            { title: '下拉多选框', value: 'list_multi' },
+            { title: '下拉搜索框', value: 'sel_search' },
+            { title: '分类字典树', value: 'cat_tree' },
+            { title: 'Popup弹框', value: 'popup' },
+            { title: '部门选择', value: 'sel_depart' },
+            { title: '用户选择', value: 'sel_user' },
+            { title: '省市区组件', value: 'pca' },
+            { title: '自定义树控件', value: 'sel_tree' },
+            // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-8】个性化配置控件类型增加开关组件
+            { title: '开关', value: 'switch' },
+            // update-end--author:liaozhiyang---date:20240521---for：【TV360X-8】个性化配置控件类型增加开关组件
+            // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-415】个性化配置控件类型增加popup字典组件
+            { title: 'Popup字典', value: 'popup_dict' },
+            // update-end--author:liaozhiyang---date:20240529---for：【TV360X-415】个性化配置控件类型增加popup字典组件
+          ],
+          defaultValue: 'text',
+          placeholder: '请选择${title}',
+          validateRules: [{ handler: validateQueryShowType }]
+        },
+        {
+          title: '字典Table',
+          key: 'queryDictTable',
+          width: 130,
+          type: JVxeTypes.textarea,
+          defaultValue: '',
+        },
+        {
+          title: '字典Code',
+          key: 'queryDictField',
+          width: 130,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+        {
+          title: '字典Text',
+          key: 'queryDictText',
+          width: 130,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+        {
+          title: '默认值',
+          key: 'queryDefVal',
+          width: 130,
+          type: JVxeTypes.input,
+          defaultValue: '',
+        },
+        {
+          title: '是否启用',
+          key: 'queryConfigFlag',
+          minWidth: 80,
+          type: JVxeTypes.checkbox,
+          customValue: ['1', '0'],
+          defaultChecked: false,
+          // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-816】如果是关联记录或者没勾选数据库字段个性化查询checkbox禁用
+          props: {
+            isDisabledCell({ row, column }) {
+              let { pageTable, dbTable, fkTable } = tables;
+              // 获取到 pageTable（页面属性） 中的数据
+              const pageRowData = pageTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              if (['link_table'].includes(pageRowData?.fieldShowType)) {
+                row.queryConfigFlag = '0';
+                return true;
+              }
+              // 获取到 dbTable（数据库属性） 中的数据
+              const dbRowData = dbTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              if (dbRowData?.dbIsPersist == '0') {
+                row.queryConfigFlag = '0';
+                return true;
+              }
+              // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-199】自定义查询禁用外键
+              // 获取到 ForeignKeyTable（外键） 中的数据
+              const fkRowData = fkTable.value!.tableRef!.getTableData({ rowIds: [row.id] })[0];
+              if (fkRowData?.mainTable && fkRowData?.mainField) {
+                return true;
+              }
+              // update-end--author:liaozhiyang---date:20240717---for：【TV360X-199】自定义查询禁用外键
+              return false;
+            },
+          },
+          // update-end--author:liaozhiyang---date:20240603---for：【TV360X-816】如果是关联记录或者没勾选数据库字段个性化查询checkbox禁用
+        },
+      ]);
+      const setup = useTableSync(columns);
+      const { tables } = setup;
+
+      function handleChange({ row, column, value }) {
+        if (column.key === 'queryConfigFlag') {
+          //update-begin-author:taoyan date:2022-5-23 for: VUEN-1084 【vue3】online表单测试发现的新问题 3、高级查询，列表查询字段有问题，未按照查询配置展示
+          if (value === '1') {
+            emit('query', row.id);
+          }
+          //update-end-author:taoyan date:2022-5-23 for: VUEN-1084 【vue3】online表单测试发现的新问题 3、高级查询，列表查询字段有问题，未按照查询配置展示
+        }
+      }
+
+      /**
+       *  2024-05-27
+       *  liaozhiyang
+       *  【TV360X-307】查询启用状态下，控件类型必选~
+       */
+      function validateQueryShowType({ cellValue, row }, callback) {
+        // 启用开始状态下，控件类型必填
+        if (cellValue == null && row.queryConfigFlag == '1') {
+          callback(false, '查询启用状态下，控件类型必选~');
+        }
+        callback(true);
+      }
+      return { ...setup, columns, handleChange };
+    },
+  });
+</script>
diff --git a/src/views/super/online/cgform/components/tables/components/aiModal.vue b/src/views/super/online/cgform/components/tables/components/aiModal.vue
new file mode 100644
index 0000000..2f67cc0
--- /dev/null
+++ b/src/views/super/online/cgform/components/tables/components/aiModal.vue
@@ -0,0 +1,216 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    :title="getTitle()"
+    :width="600"
+    :max-height="500"
+    wrapClassName="ai-suggestion-modal"
+    @register="registerModal"
+    @open-change="handleOpen"
+    :canFullscreen="false"
+  >
+    <div class="ai-modal-content">
+      <template v-if="active == 'one'">
+        <div class="ai-header">
+          <SvgIcon name="robot" size="40" />
+          <p class="title">添加字段需要专业建议？试试AI智能字段推荐吧</p>
+          <p class="tip">可输入相应修饰词，如：员工信息登记表</p>
+        </div>
+        <div class="ai-body">
+          <a-input v-model:value.trim="one.qualifier" placeholder="请输入修饰词" @pressEnter="handleConfirm"></a-input>
+        </div>
+      </template>
+      <template v-else>
+        <div class="two">
+          <div class="field-list field-header">
+            <div class="field-row">
+              <a-checkbox v-model:checked="two.checked" :indeterminate="two.indeterminate" @change="handleAllChange"></a-checkbox>
+              <div class="field-list field-content">
+                <span class="dbFieldName">字段名称</span>
+                <span class="dbFieldTxt">字段备注</span>
+              </div>
+            </div>
+          </div>
+          <div class="field-list">
+            <div v-for="(item, index) in two.data" :key="index" class="field-row">
+              <a-checkbox v-model:checked="item.checked" @change="handleItemChange"></a-checkbox>
+              <div class="field-content">
+                <a-input class="dbFieldName" v-model:value="item.dbFieldName" placeholder="字段名称"></a-input>
+                <a-input class="dbFieldTxt" v-model:value="item.dbFieldTxt" placeholder="字段备注"></a-input>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <template #footer>
+      <template v-if="active == 'one'">
+        <a-button @click="handleCancel">取消</a-button>
+        <a-button type="primary" @click="handleConfirm" :loading="one.loading">{{ one.loading ? '生成中...' : '生成建议' }}</a-button>
+      </template>
+      <template v-else>
+        <a-button type="primary" @click="handleAdd" :disabled="!two.checked && !two.indeterminate">添加{{ count() }}个字段进online</a-button>
+      </template>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { defineEmits } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { defHttp } from '/@/utils/http/axios';
+  import { cloneDeep } from 'lodash-es';
+  const configUrl = {
+    fields: '/online/cgform/api/aigc/fields',
+  };
+  const props = defineProps(['dataSource', 'DBtableRef', 'tableName', 'isUpdate']);
+  const emit = defineEmits(['register', 'close', 'generate']);
+  const { createMessage } = useMessage();
+  const [registerModal, { closeModal }] = useModalInner();
+  const active = ref('one');
+  const one = reactive({
+    title: 'AI字段建议',
+    qualifier: '',
+    loading: false,
+  });
+  const two = reactive({
+    title: '推荐字段',
+    checked: false,
+    indeterminate: false,
+    data: [],
+  });
+  const getTitle = () => {
+    return active.value == 'one' ? one.title : two.title;
+  };
+  const handleOpen = (visible) => {
+    if (visible === false) {
+      setTimeout(() => {
+        emit('close');
+      }, 400);
+    }
+  };
+  const filter = (data: any = []) => {
+    // 过滤掉已存在的字段
+    const filteredData = data.filter((item) => {
+      return !props.DBtableRef.getTableData().some((existingItem) => existingItem.dbFieldName === item.dbFieldName);
+    });
+    if (data.length == 0 || filteredData.length == 0) {
+      createMessage.warn('请换一个修饰词再试~');
+    } else {
+      // 设置剩余字段为选中状态
+      filteredData.forEach((item) => {
+        item.checked = true;
+        // 设置其他规则
+        if (['Date', 'Datetime'].includes(item.dbType)) {
+          item.fieldShowType = item.dbType == 'Datetime' ? 'datetime' : 'date';
+        }
+      });
+
+      two.data = filteredData;
+      two.checked = true;
+      active.value = 'two';
+    }
+  };
+  const handleAllChange = ({ target }) => {
+    two.data.forEach((item: any) => (item.checked = target.checked));
+  };
+  const handleItemChange = () => {
+    const value = two.data.filter((item: any) => item.checked === true);
+    two.checked = value.length === two.data.length ? true : false;
+    two.indeterminate = value.length && two.checked == false ? true : false;
+  };
+  const handleConfirm = () => {
+    if (one.qualifier.length == 0) {
+      createMessage.warn('请输入修饰词~');
+      return;
+    }
+    one.loading = true;
+    defHttp
+      .post(
+        { url: `${configUrl.fields}?prompt=${one.qualifier}&code=${props.isUpdate && props.tableName ? props.tableName : ''}` },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.code == 200) {
+          filter(res.result);
+        } else {
+          createMessage.warn(res.message);
+        }
+        one.loading = false;
+      })
+      .catch((err) => {
+        one.loading = false;
+        console.log(err);
+      });
+  };
+  const handleAdd = () => {
+    const data = cloneDeep(two.data);
+    const _data = data.filter((item: any) => item.checked);
+    _data.forEach((item: any) => delete item.checked);
+    emit('generate', _data);
+    closeModal();
+  };
+  const count = () => {
+    return two.data.filter((item: any) => item.checked).length;
+  };
+  const handleCancel = () => {
+    closeModal();
+  };
+</script>
+
+<style lang="less" scoped>
+  .ai-modal-content {
+    padding-top: 16px;
+    p {
+      margin-bottom: 0;
+    }
+    .ai-header {
+      text-align: center;
+      margin-bottom: 16px;
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .tip {
+        font-size: 12px;
+        line-height: 18px;
+        color: #a0a0a0;
+        margin-top: 6px;
+      }
+    }
+    .ai-body {
+      padding: 16px;
+      padding-top: 0;
+    }
+  }
+  .two {
+    padding: 16px;
+    padding-top: 0;
+  }
+  .field-header {
+    font-weight: bold;
+  }
+  .field-list {
+    padding: 0 16px;
+    .field-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      .field-content {
+        flex: 1;
+        margin-left: 12px;
+        display: flex;
+        .dbFieldTxt,
+        .dbFieldName {
+          width: 50%;
+        }
+        .dbFieldName {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/extend/FieldExtendJsonModal.vue b/src/views/super/online/cgform/extend/FieldExtendJsonModal.vue
new file mode 100644
index 0000000..5e70ed6
--- /dev/null
+++ b/src/views/super/online/cgform/extend/FieldExtendJsonModal.vue
@@ -0,0 +1,380 @@
+<template>
+  <BasicModal
+    wrapClassName="field-extend-config-modal"
+    v-bind="$attrs"
+    title="字段扩展配置项"
+    @register="registerModal"
+    keyboard
+    :canFullscreen="false"
+    cancelText="关闭"
+    @ok="handleSubmit"
+  >
+    <a-spin :spinning="spinningLoading">
+      <BasicForm @register="registerForm">
+        <template #switchOptions="{ model, field }">
+          <SetSwitchOptions v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRaw, toRefs } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import SetSwitchOptions from './SetSwitchOptions.vue';
+  import { ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { pick } from 'lodash-es';
+  import { LABELLENGTH } from '../util/constant';
+  import { isArray } from '/@/utils/is';
+  export default defineComponent({
+    name: 'FieldExtendJsonModal',
+    components: {
+      BasicModal,
+      BasicForm,
+      SetSwitchOptions,
+    },
+    emits: ['success', 'register'],
+    setup(_p, { emit }) {
+      const spinningLoading = ref(false);
+
+      function initExtendConfig() {
+        extendConfig.uploadnum = 0;
+        extendConfig.showLength = '';
+        extendConfig.popupMulti = true;
+        extendConfig.multiSelect = true;
+        extendConfig.store = '';
+        extendConfig.text = '';
+        extendConfig.orderRule = '';
+        extendConfig.validateError = '';
+        extendConfig.labelLength = LABELLENGTH;
+        extendConfig.displayLevel = 'all';
+      }
+
+      const extendConfig = reactive({
+        uploadnum: 0,
+        showLength: '',
+        popupMulti: true,
+        store: '',
+        text: '',
+        multiSelect: true,
+        orderRule: '',
+        validateError: '',
+        labelLength: LABELLENGTH,
+        displayLevel: 'all',
+      });
+      const fieldShowType = ref('');
+      const rowKey = ref('');
+      const sortFlag = ref('0');
+      const dbType = ref('');
+
+      const formSchemas: any[] = [
+        {
+          label: 'rowKey',
+          field: 'rowKey',
+          component: 'Input',
+          show: false,
+        },
+        {
+          label: '文件上传数量',
+          field: 'uploadnum',
+          component: 'InputNumber',
+          componentProps: {
+            style: {
+              width: '100%',
+            },
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'file' || fieldShowType.value === 'image';
+          },
+        },
+        {
+          label: '是否多选',
+          field: 'popupMulti',
+          component: 'RadioGroup',
+          defaultValue: true,
+          componentProps: {
+            options: [
+              { label: '否', value: false },
+              { label: '是', value: true },
+            ],
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'popup' || fieldShowType.value === 'popup_dict';
+          },
+        },
+        {
+          label: '是否多选',
+          field: 'multiSelect',
+          component: 'RadioGroup',
+          defaultValue: true,
+          componentProps: {
+            options: [
+              { label: '否', value: false },
+              { label: '是', value: true },
+            ],
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
+          },
+        },
+        {
+          label: '存储字段',
+          field: 'store',
+          component: 'Input',
+          ifShow: () => {
+            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
+          },
+        },
+        {
+          label: '展示字段',
+          field: 'text',
+          component: 'Input',
+          ifShow: () => {
+            return fieldShowType.value === 'sel_user' || fieldShowType.value === 'sel_depart';
+          },
+        },
+        {
+          label: '默认排序',
+          field: 'orderRule',
+          component: 'RadioGroup',
+          defaultValue: '',
+          componentProps: {
+            options: [
+              { label: '降序', value: 'desc' },
+              { label: '升序', value: 'asc' },
+              { label: '不默认排序', value: '' },
+            ],
+          },
+          ifShow: () => {
+            // update-begin--author:liaozhiyang---date:20240523---for：【TV360X-308】Datetime、string、Date,int、BigDecimal、double类型默认展示排序功能
+            return sortFlag.value === '1' || ['Datetime', 'string', 'Date', 'int', 'BigDecimal', 'double'].includes(dbType.value);
+            // update-end--author:liaozhiyang---date:20240523---for：【TV360X-308】Datetime、string、Date,int、BigDecimal、double类型默认展示排序功能
+          },
+        },
+        {
+          label: '校验提示',
+          field: 'validateError',
+          component: 'Input',
+          componentProps: {
+            placeholder: '请输入校验提示文本',
+          },
+        },
+        {
+          label: '查询label长度',
+          field: 'labelLength',
+          component: 'InputNumber',
+          componentProps: {
+            placeholder: '请输入label长度',
+          },
+        },
+        {
+          label: '是否固定',
+          field: 'isFixed',
+          component: 'RadioGroup',
+          defaultValue: 0,
+          componentProps: {
+            options: [
+              { label: '是', value: 1 },
+              { label: '否', value: 0 },
+            ],
+          },
+        },
+        // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        {
+          label: '是否独占一行',
+          field: 'isOneRow',
+          component: 'RadioGroup',
+          defaultValue: false,
+          componentProps: {
+            options: [
+              { label: '否', value: false },
+              { label: '是', value: true },
+            ],
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'markdown' || fieldShowType.value === 'umeditor';
+          },
+        },
+        // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        {
+          label: '日期格式',
+          field: 'picker',
+          component: 'RadioGroup',
+          defaultValue: 'default',
+          componentProps: {
+            options: [
+              { label: '年', value: 'year' },
+              { label: '年月', value: 'month' },
+              { label: '年周', value: 'week' },
+              { label: '年季度', value: 'quarter' },
+              { label: '年月日', value: 'default' },
+            ],
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'date';
+          },
+        },
+        // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+        // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+        {
+          label: '显示级别',
+          field: 'displayLevel',
+          component: 'RadioGroup',
+          defaultValue: 'all',
+          componentProps: {
+            options: [
+              { label: '省市区', value: 'all' },
+              { label: '省', value: 'province' },
+              { label: '市', value: 'city' },
+              { label: '区', value: 'region' },
+            ],
+          },
+          ifShow: () => {
+            return fieldShowType.value === 'pca';
+          },
+        },
+        // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+        // update-begin--author:liaozhiyang---date:20240308---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+        {
+          label: '开关值',
+          field: 'switchOptions',
+          component: 'Input',
+          slot: 'switchOptions',
+          ifShow: () => {
+            return fieldShowType.value === 'switch';
+          },
+        },
+        // update-end--author:liaozhiyang---date:20240308---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+      ];
+
+      // 表单配置
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+        labelWidth: 100,
+      });
+
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        console.log('extend json', data);
+        initExtendConfig();
+        if (data.jsonStr) {
+          let json = JSON.parse(data.jsonStr);
+          // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-519】开关设置默认值及兼容数组写法
+          if (data.fieldShowType === 'switch') {
+            // 兼容[0,1]写法
+            if (isArray(json) && json.length == 2) {
+              extendConfig.switchOptions = json;
+            }
+          }
+          // update-end--author:liaozhiyang---date:20240524---for：【TV360X-519】开关设置默认值及兼容数组写法
+          Object.keys(json).map((k) => {
+            console.log('扩展参数:' + k + '=' + json[k]);
+            extendConfig[k] = json[k];
+          });
+        } else {
+          // update-begin--author:liaozhiyang---date:20240524---for：【TV360X-519】开关设置默认值及兼容数组写法
+          // 开关设置默认值
+          if (data.fieldShowType === 'switch') {
+            extendConfig.switchOptions = ['Y', 'N'];
+          }
+          // update-end--author:liaozhiyang---date:20240524---for：【TV360X-519】开关设置默认值及兼容数组写法
+        }
+        fieldShowType.value = data.fieldShowType;
+        rowKey.value = data.id;
+        sortFlag.value = data.sortFlag;
+        dbType.value = data.dbType;
+        let temp = toRaw(extendConfig);
+        await resetFields();
+        await setFieldsValue({
+          ...temp,
+          rowKey: data.id,
+        });
+      });
+
+      async function handleSubmit() {
+        let data = await validate();
+        console.log('datga', data);
+        let type = fieldShowType.value;
+        let obj: any = {};
+        if (type === 'file' || type === 'image') {
+          if (data.uploadnum && data.uploadnum > 0) {
+            obj.uploadnum = data.uploadnum;
+          }
+        } else if (type === 'textarea' || type === 'text') {
+          if (data.showLength && data.showLength > 0) {
+            obj.showLength = data.showLength;
+          }
+        } else if (type === 'sel_user' || type === 'sel_depart') {
+          obj = pick(data, 'store', 'text', 'multiSelect');
+        } else if (type === 'popup'||type === 'popup_dict') {
+          obj.popupMulti = data.popupMulti;
+        }
+        // update-begin--author:liaozhiyang---date:20240523---for：【TV360X-308】Datetime、string、Date,int、BigDecimal、double类型默认展示排序功能
+        if (data.orderRule) {
+          obj.orderRule = data.orderRule;
+        }
+        // update-end--author:liaozhiyang---date:20240523---for：【TV360X-308】Datetime、string、Date,int、BigDecimal、double类型默认展示排序功能
+        if (data.validateError) {
+          obj.validateError = data.validateError;
+        }
+        if (data.labelLength) {
+          obj.labelLength = data.labelLength;
+        }
+        // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-4161】列支持固定功能
+        if (data.isFixed) {
+          obj.isFixed = data.isFixed;
+        }
+        // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-4161】列支持固定功能
+        // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        if (data.isOneRow) {
+          obj.isOneRow = data.isOneRow;
+        }
+        // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+        if (data.picker) {
+          obj.picker = data.picker;
+        }
+        // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+        if (data.switchOptions) {
+          const arr = data.switchOptions.split(',');
+          let Y = Number(arr[0]);
+          let N = Number(arr[1]);
+          // 都能转成number就转，否则就是string
+          if (Number.isNaN(Y) || Number.isNaN(N)) {
+            Y = arr[0];
+            N = arr[1];
+          }
+          obj.switchOptions = [Y, N];
+        }
+        // update-end--author:liaozhiyang---date:20240522---for：【TV360X-25】扩展参数配置中增加开关是否选项配置
+        if (data.displayLevel) {
+          obj.displayLevel = data.displayLevel;
+        }
+        console.log('obj....', obj);
+        for (let key in obj) {
+          if (obj[key] === '') {
+            delete obj[key];
+          }
+        }
+        console.log(obj);
+        emit('success', obj, data.rowKey);
+        closeModal();
+      }
+
+      return {
+        spinningLoading,
+        registerModal,
+        registerForm,
+        fieldShowType,
+        rowKey,
+        handleSubmit,
+        ...toRefs(extendConfig),
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/extend/SetSwitchOptions.vue b/src/views/super/online/cgform/extend/SetSwitchOptions.vue
new file mode 100644
index 0000000..818ef5d
--- /dev/null
+++ b/src/views/super/online/cgform/extend/SetSwitchOptions.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="setSwitchOptions">
+    <p><span>是</span><a-input v-model:value="valueY" @change="handleChange" /></p>
+    <p><span>否</span><a-input v-model:value="valueN" @change="handleChange" /></p>
+  </div>
+</template>
+
+<script setup name="SwitchOptions">
+  import { ref, watch, onMounted } from 'vue';
+  import { isArray } from '/@/utils/is';
+  const props = defineProps({
+    value: {
+      type: [Array, String],
+      default: ['Y', 'N'],
+    },
+  });
+  const emit = defineEmits('change', 'update:value');
+  const defaultY = 'Y';
+  const defaultN = 'N';
+  const valueY = ref(defaultY);
+  const valueN = ref(defaultN);
+
+  watch(
+    () => props.value,
+    (value) => {
+      if (typeof value === 'string') {
+        const arr = value.split(',');
+        valueY.value = arr[0];
+        valueN.value = arr[1];
+      } else if (isArray(value)) {
+        valueY.value = value[0];
+        valueN.value = value[1];
+      }
+    },
+    { immediate: true }
+  );
+  const handleChange = () => {
+    if (valueY.value != '' && valueN.value != '') {
+      send();
+    }
+  };
+  const send = () => {
+    let Y = Number(valueY.value);
+    let N = Number(valueN.value);
+    // 都能转成number就转，否则就是string
+    if (Number.isNaN(Y) || Number.isNaN(N)) {
+      Y = valueY.value;
+      N = valueN.value;
+    }
+    emit('change', [Y, N]);
+    emit('update:value', [Y, N]);
+  };
+  // 进入组件就把默认值外传
+  onMounted(() => {
+    send();
+  })
+</script>
+
+<style lang="less" scoped>
+  .setSwitchOptions {
+    display: flex;
+    align-items: center;
+    p {
+      width: 30%;
+      display: flex;
+      align-items: center;
+      span {
+        margin-right: 5px;
+        font-size: 13px;
+      }
+      &:first-child {
+        margin-right: 16px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/extend/form/DetailForm.vue b/src/views/super/online/cgform/extend/form/DetailForm.vue
new file mode 100644
index 0000000..6186cf3
--- /dev/null
+++ b/src/views/super/online/cgform/extend/form/DetailForm.vue
@@ -0,0 +1,332 @@
+<template>
+  <div :class="formContainerClass">
+    <a-row>
+      <a-col v-for="(item, index) in schemas" :key="index" :span="getItemSpan(item)">
+        <template v-if="item.hidden"></template>
+        <div v-else class="detail-item">
+          <div class="item-title" :class="getLabelWidthClass(item)" :title="item.label"> {{ filterLable(item) }}： </div>
+          <div class="item-content" v-if="item.view === 'markdown'">
+             <MarkdownViewer v-model:value="detailFormData[item.field]" placeholder="" />
+          </div>
+          <div class="item-content" :class="item.view" v-else-if="item.isHtml" v-html="detailFormData[item.field]"></div>
+          <div class="item-content" v-else-if="item.view == 'textarea'" v-html="textareaLineBreak(detailFormData[item.field])"></div>
+          <div class="item-content" style="display: block;padding-top:10px" v-else-if="item.isCard">
+            <span v-if="!detailFormData[item.field]"></span>
+            <link-table-card v-else disabled detail :value="detailFormData[item.field]" :valueField="item.dictCode" :textField="item.dictText" :tableName="item.dictTable" :multi="item.multi"></link-table-card>
+          </div>
+          <div class="item-content" v-else-if="item.isImage">
+            <div class="ant-upload-list ant-upload-list-picture-card" style="display: flex">
+              <template v-for="url in detailFormData[item.field]">
+                <div class="ant-upload-list-picture-card-container" style="margin-top: 8px;">
+                  <span>
+                    <div class="ant-upload-list-width ant-upload-list-picture-border ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card" data-has-actions="true">
+                      <div class="ant-upload-list-item-thumbnail ant-upload-list-item-info">
+                        <img :src="url" alt="图片不存在" class="ant-upload-list-item-image" @click="handleViewImage(item.field)" />
+                      </div>
+                      <span class="ant-upload-list-item-actions">
+                        <download-outlined @click="handleDownloadFile(url)" />
+                        <eye-outlined @click="handleViewImage(item.field)" />
+                      </span>
+                    </div>
+                  </span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div class="item-content" v-else-if="item.isFile">
+            <div class="ant-upload-list ant-upload-list-text">
+              <template v-for="url in detailFormData[item.field]">
+                <div class="">
+                  <span>
+                    <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text">
+                      <div class="ant-upload-list-item-info">
+                        <span class="ant-upload-span">
+                          <div class="ant-upload-text-icon">
+                            <paper-clip-outlined />
+                          </div>
+                          <a :href="url" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name">
+                            {{ getFilename(url) }}
+                          </a>
+                          <span class="ant-upload-list-item-card-actions">
+                            <download-outlined @click="handleDownloadFile(url)" />
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div v-else class="item-content" >
+            {{ filter(detailFormData[item.field], item.view, item) }}
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useDetailForm } from './useDetailForm';
+  import { DownloadOutlined, EyeOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
+  import LinkTableCard from '../linkTable/LinkTableCard.vue'
+  import { MarkdownViewer } from '/@/components/Markdown';
+  import { getWeekMonthQuarterYear } from '/@/utils';
+
+  export default defineComponent({
+    name: 'DetailForm',
+    components: {
+      DownloadOutlined,
+      EyeOutlined,
+      PaperClipOutlined,
+      LinkTableCard,
+      MarkdownViewer,
+    },
+    props: {
+      span: propTypes.number.def(24),
+      //表单配置
+      schemas: propTypes.array.def([]),
+      //表单数据
+      data: propTypes.object.def({}),
+      containerClass: propTypes.string.def(''),
+    },
+    setup(props) {
+      const { formContainerClass, detailFormData, getItemSpan, handleDownloadFile, handleViewImage, getFilename, getLabelWidthClass } = useDetailForm(props);
+      // update-begin--author:liaozhiyang---date:20230925---for：【QQYUN-6647】页面配置中高级配置中设置的label长度，在列表与详情界面无效
+      const filterLable = (item) => {
+        if (item.fieldExtendJson) {
+          const json = JSON.parse(item.fieldExtendJson);
+          if (!!json.labelLength && item.label.length > 4) {
+            return item.label.substr(0, json.labelLength);
+          }
+        }
+        return item.label;
+      };
+      // update-end--author:liaozhiyang---date:20230925---for：【QQYUN-6647】页面配置中高级配置中设置的label长度，在列表与详情界面无效
+      // update-begin--author:liusq---date:20240527---for：【TV360X-464】多行文本换行显示
+      const textareaLineBreak = (content) => {
+        if (content && content.includes('\n')) {
+          content = content.replace(/\n/g, '<br>');
+        }
+        return content;
+      };
+      // update-end--author:liusq---date:20240527---for：【TV360X-464】多行文本换行显示
+      // update-begin--author:liaozhiyang---date:20230110---for：【QQYUN-7636】online详情oracle数据库日期类型字段会默认带上时分秒
+      const filter = (value, type, item) => {
+        if (type == 'date' && typeof value === 'string') {
+          // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+          // 【TV360X-29】数据是空的，日期如果是年、年月、年周、年季度详情里面是NAN
+          if (!value) {
+            return '';
+          }
+          let fieldExtendJson = item.fieldExtendJson;
+          if (fieldExtendJson) {
+            fieldExtendJson = JSON.parse(fieldExtendJson);
+            if (fieldExtendJson.picker && fieldExtendJson.picker != 'default') {
+              const result = getWeekMonthQuarterYear(value);
+              return result[fieldExtendJson.picker];
+            }
+          }
+          // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+          // oracle数据库日期类型字段会带上时分秒
+          return value.split(' ').shift();
+        } else {
+          return value;
+        }
+      };
+      // update-end--author:liaozhiyang---date:20230110---for：【QQYUN-7636】online详情oracle数据库日期类型字段会默认带上时分秒
+      return {
+        formContainerClass,
+        detailFormData,
+        getItemSpan,
+        handleDownloadFile,
+        handleViewImage,
+        getFilename,
+        getLabelWidthClass,
+        filterLable,
+        filter,
+        textareaLineBreak
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .jeecg-detail-form {
+    border: 1px solid @border-color-split;
+    border-left: none;
+    border-bottom: none;
+    .detail-item {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      line-height: 24px;
+      border-bottom: 1px solid @border-color-split;
+      height: 100%;
+      // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-21】多行文本框在详情弹框中不换行
+      word-break: break-all;
+      // update-end--author:liaozhiyang---date:20240517---for：【TV360X-21】多行文本框在详情弹框中不换行
+      .item-title {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        flex-grow: 0;
+        min-width: 100px;
+        width: 24%;
+        max-width: 220px;
+        border-right: 1px solid @border-color-split;
+        /* border-left: 1px solid #f0f0f0;*/
+        padding: 10px 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        &.span24{
+          width: 24%;
+        }
+        &.span12{
+          width: 12%;
+        }
+        &.span8{
+          width: 8%;
+        }
+        &.span6{
+          width: 6%;
+        }
+        // update-begin--author:liaozhiyang---date:20231228---for：【QQYUN-7769】详情label加上背景色和字体颜色
+        background: #fafafa;
+        color: #000;
+        font-weight: 500;
+        // update-end--author:liaozhiyang---date:20231228---for：【QQYUN-7769】详情label加上背景色和字体颜色
+      }
+      .item-content {
+        border-right: 1px solid @border-color-split;
+        flex-grow: 1;
+        padding-left: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        // update-begin--author:liaozhiyang---date:20231226---for：【QQYUN-7470】富文本详情中纵向显示
+        &.umeditor {
+          display: block;
+        }
+        // update-end--author:liaozhiyang---date:20231226---for：【QQYUN-7470】富文本详情中纵向显示
+        .anticon {
+          &:hover {
+            color: #40a9ff;
+          }
+        }
+
+        .detail-image-container {
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
+          color: #000000d9;
+          font-size: 14px;
+          font-variant: tabular-nums;
+          list-style: none;
+          font-feature-settings: 'tnum';
+          line-height: 1.5715;
+          .image-item {
+            display: inline-block;
+            width: 104px;
+            height: 104px;
+            margin: 5px;
+            border: 1px solid @border-color-split;
+            vertical-align: top;
+            img {
+            }
+          }
+        }
+      }
+    }
+  }
+  // update-begin--author:liaozhiyang---date:20231228---for：【QQYUN-7769】详情label加上背景色和字体颜色
+  @darkBorderColor: #3a3a3a;
+  html[data-theme='dark'] {
+    .jeecg-detail-form {
+      border: 1px solid @darkBorderColor;
+      .detail-item {
+        border-bottom-color: @darkBorderColor;
+        .item-title {
+          border-right-color: @darkBorderColor;
+          background: #1d1d1d;
+          color: rgba(255, 255, 255, 0.65);
+          
+        }
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20231228---for：【QQYUN-7769】详情label加上背景色和字体颜色
+  // update-begin--author:liaozhiyang---date:20240516---for：【TV360X-15】详情文件和图片样式美化
+  .ant-upload-list-text {
+    .ant-upload-span {
+      display: flex;
+      .ant-upload-list-item-name {
+        margin: 0 6px;
+      }
+      .ant-upload-list-item-card-actions {
+        display: none;
+      }
+      a {
+        color: rgba(51, 51, 51, 0.88);
+      }
+    }
+  }
+  .ant-upload-list-picture-card {
+      padding-bottom: 8px;
+      .ant-upload-list-item {
+        display: flex;
+        align-items: center;
+        .ant-upload-list-item-image {
+          max-height: 120px;
+          max-width: 120px;
+          cursor: pointer;
+        }
+        .ant-upload-list-item-actions {
+          .anticon:first-child {
+            margin:0 6px;
+          }
+        }
+        .ant-upload-list-item-actions {
+          display: none;
+        }
+      }
+    }
+    // update-begin--author:liaozhiyang---date:20231228---for：【TV360X-15】详情文件和图片样式美化
+
+  //update-begin---author:wangshuai---date:2025-08-26---for:【issues/8759】online表单的图片控件多图片显示问题---
+  .ant-upload-list-picture-border {
+    position: relative;
+    height: 100%;
+    margin: 0;
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.3s;
+    text-align: center;
+  }
+  
+  .ant-upload-list-item-thumbnail,.ant-upload-list-item-thumbnail img{
+    position: static;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  
+  .ant-upload-list-width{
+    display: inline-block;
+    width: 102px;
+    height: 102px;
+    margin-block: 0 8px;
+    margin-inline: 0 8px;
+    vertical-align: top;
+  }
+  //update-end---author:wangshuai---date:2025-08-26---for:【issues/8759】online表单的图片控件多图片显示问题---
+</style>
diff --git a/src/views/super/online/cgform/extend/form/useDetailForm.ts b/src/views/super/online/cgform/extend/form/useDetailForm.ts
new file mode 100644
index 0000000..7d91b73
--- /dev/null
+++ b/src/views/super/online/cgform/extend/form/useDetailForm.ts
@@ -0,0 +1,520 @@
+import { FormSchema, RenderCallbackParams } from '/@/components/Form';
+import { computed, ref, watch } from 'vue';
+import { getDictItemsByCode } from '/@/utils/dict';
+import { filterMultiDictText, filterDictText } from '/@/utils/dict/JDictSelectUtil';
+import { initDictOptions } from '/@/utils/dict/index';
+import { loadDictItem, queryDepartTreeSync, getUserList } from '/@/api/common/api';
+import { defHttp } from '/@/utils/http/axios';
+import { getAreaTextByCodeAnyLevel } from '/@/components/Form/src/utils/Area';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { createImgPreview } from '/@/components/Preview/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+/***
+ * 表单字段的扩展配置解析结果
+ */
+interface FieldExtends {
+  //上传数量
+  uploadnum?: number | string;
+
+  //限制大文本在列表页面的展示长度
+  showLength?: number | string;
+
+  //popup是否支持多选
+  popupMulti?: boolean;
+
+  //部门、用户组件 用于存储的字段名
+  store?: string;
+
+  //部门、用户组件 用于展示的字段名
+  text?: string;
+
+  //部门、用户组件 是否多选
+  multiSelect?: boolean;
+
+  //查询排序规则
+  orderRule?: 'asc' | 'desc';
+  //关联记录展示类型
+  showType?:string;
+}
+
+export interface DetailFormSchema {
+  field: string;
+  label: string;
+  span?: number;
+  view?: string;
+  isHtml?: boolean;
+  isImage?: boolean;
+  isFile?: boolean;
+  isCard?: boolean;
+  multi?:boolean;
+  order?: any;
+  dictTable?: string;
+  dictText?: string;
+  dictCode?: string;
+  dict?: string;
+  fieldExtendJson?: string;
+  ifShow?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+  // update-begin--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+  // js增强隐藏
+  hidden?: boolean;
+  // update-end--author:liaozhiyang---date:20240425---for：【issues/6139】online详情支持js增强loaded事件及设置值、获取值、隐藏功能
+}
+
+/*interface DetailFormProps {
+  span?: number;
+  schemas?: DetailFormSchema[];
+  data?: any;
+  containerClass?: string;
+}*/
+
+export function useDetailForm(props: any) {
+  console.log(props);
+  const dictOptionsMap = {};
+  const currentLinkFields: string[] = [];
+  const detailFormData = ref({});
+  const { createMessage } = useMessage();
+
+  const formContainerClass = computed(() => {
+    if (props.containerClass) {
+      return `jeecg-detail-form ${props.containerClass}`;
+    } else {
+      return 'jeecg-detail-form';
+    }
+  });
+
+  watch(
+    () => props.data,
+    async (formData) => {
+      if (formData) {
+        let arr = props.schemas;
+        let temp = {};
+        if (arr && arr.length > 0) {
+          for (let item of arr) {
+            let field = item.field;
+            try {
+              temp[field] = await getItemContent(item);
+            } catch (e) {
+              console.error('字段【' + field + '】文本获取失败', e);
+            }
+          }
+        }
+        detailFormData.value = temp;
+      }
+    },
+    { deep: true, immediate: true }
+  );
+
+  async function getItemContent(item) {
+    let formData = props.data;
+    if (formData) {
+      let value = formData[item.field];
+      if (!value && value !== '0' && value !== 0) {
+        return '';
+      }
+      let str = value;
+      let view = item.view;
+      if (view == 'list' || view == 'radio' || view == 'checkbox' || view == 'list_multi') {
+        str = await getSelectText(item, formData);
+      } else if (view == 'sel_search') {
+        str = await getTableDataText(item, formData);
+      } else if (view == 'cat_tree') {
+        //分类字典树
+        str = await getCategoryDataText(item, formData);
+      } else if (view == 'link_table') {
+        str = await getLinkTableData(item, formData);
+      } else if (view == 'sel_depart') {
+        //部门选择
+        str = await getDepartDataText(item, formData);
+      } else if (view == 'sel_user') {
+        // 用户选择
+        str = await getUserDataText(item, formData);
+      } else if (view == 'pca') {
+        //省市区
+        // update-begin--author:liaozhiyang---date:20260227---for:【QQYUN-14788】online详情单独的省市没显示
+        let includeParent = true;
+        let fieldExtendJson = item?.fieldExtendJson;
+        let level = 3;
+        if (fieldExtendJson) {
+          fieldExtendJson = JSON.parse(fieldExtendJson);
+          if (['province', 'city', 'region'].includes(fieldExtendJson.displayLevel)) {
+            if (fieldExtendJson.displayLevel === 'province') {
+              level = 1;
+            } else if (fieldExtendJson.displayLevel === 'city') {
+              level = 2;
+            } else if (fieldExtendJson.displayLevel === 'region') {
+              level = 3;
+            }
+            includeParent = false;
+          }
+        }
+        str = getAreaTextByCodeAnyLevel(value, includeParent, level as 1 | 2 | 3);
+        // update-end--author:liaozhiyang---date:20260227---for:【QQYUN-14788】online详情单独的省市没显示
+      } else if (view == 'link_down') {
+        //联动组件
+        str = await getLinkDownDataText(item, formData);
+      } else if (view == 'sel_tree') {
+        //自定义树控件
+        str = await getTreeDataText(item, formData);
+      } else if (view == 'switch') {
+        //开关组件
+        str = await getSwitchDataText(item, formData);
+      } else if (view == 'image' || view == 'file') {
+        str = getFileList(item, formData);
+      } else if (view == 'popup_dict') {
+        // update-begin--author:liaozhiyang---date:20240402---for：【QQYUN-8833】JPopupDict的列表翻译
+        const ditc = formData[`${item.field}_dictText`];
+        if (ditc !== undefined) {
+          str = ditc;
+        }
+        // update-end--author:liaozhiyang---date:20240402---for：【QQYUN-8833】JPopupDict的列表翻译
+      } else {
+        if (currentLinkFields.indexOf(item.field) >= 0) {
+          let arr = dictOptionsMap[item.field];
+          if (arr && arr.length > 0) {
+            str = filterMultiDictText(arr, value);
+          }
+        }
+      }
+      return str;
+    }
+    return '';
+  }
+
+  // 数据字典/表字典
+  async function getSelectText(item, formData) {
+    // 先从缓存取
+    let dictCode = getRequestDictCode(item);
+    let value = formData[item.field];
+    if (!dictCode) {
+      return value;
+    }
+    let options = getDictItemsByCode(dictCode);
+    if (options && options.length > 0) {
+      return filterMultiDictText(options, value);
+    } else {
+      let dictRes = [];
+      if (dictOptionsMap[dictCode]) {
+        dictRes = dictOptionsMap[dictCode];
+      } else {
+        //取不到再请求
+        dictRes = (await initDictOptions(dictCode)) || [];
+      }
+      if (dictRes && dictRes.length > 0) {
+        dictOptionsMap[dictCode] = dictRes;
+        return filterMultiDictText(dictRes, value);
+      }
+    }
+    return '';
+  }
+
+  function getRequestDictCode(item) {
+    let temp = '';
+    let { dictCode, dictTable, dictText } = item;
+    if (!dictTable) {
+      temp = dictCode;
+    } else {
+      temp = encodeURI(`${dictTable},${dictText},${dictCode}`);
+    }
+    return temp;
+  }
+
+  // 表字典-下拉搜索
+  async function getTableDataText(item, formData) {
+    let dictCode = getRequestDictCode(item);
+    let value = formData[item.field];
+    if (!value) {
+      return '';
+    }
+
+    let arr: any[] = [];
+    // update-begin--author:liaozhiyang---date:20250813---for：【issues/8689】online下拉搜索框详情时无法读取数据字典
+    // 系统字典
+    if (dictCode.indexOf(',') === -1) {
+      const options = await initDictOptions(dictCode);
+      if (options && options.length > 0) {
+        options.forEach((item: any) => {
+          if (item.value === value) {
+            arr.push(item.text || item.label);
+          }
+        });
+      }
+    } else {
+      // 表字典
+      if (dictOptionsMap[dictCode+value]) {
+        arr = dictOptionsMap[dictCode+value];
+      } else {
+        //取不到再请求
+        arr = (await defHttp.get({ url: `/sys/dict/loadDictItem/${dictCode}`, params: { key: value } })) || [];
+      }
+    }
+    // update-end--author:liaozhiyang---date:20250813---for：【issues/8689】online下拉搜索框详情时无法读取数据字典
+    if (arr && arr.length > 0) {
+      dictOptionsMap[dictCode+value] = arr;
+      return arr.join(',')
+      //return filterMultiDictText(arr, value);
+    }
+    return '';
+  }
+
+  // 分类字典
+  async function getCategoryDataText(item, formData) {
+    let value = formData[item.field];
+    if (!value) {
+      return '';
+    }
+    let arr = (await loadDictItem({ ids: value })) || [];
+    if (arr && arr.length > 0) {
+      return arr.join(',');
+    }
+    return '';
+  }
+
+  // 部门数据
+  async function getDepartDataText(item, formData) {
+    let value = formData[item.field];
+    if (!value) {
+      return '';
+    }
+    let extend = getExtendConfig(item);
+    let storeField = extend.store || 'id';
+    let labelKey = extend.text || 'departName';
+    let arr = (await queryDepartTreeSync({ ids: value, primaryKey: storeField })) || [];
+    if (arr && arr.length > 0) {
+      let temp: string[] = [];
+      for (let item of arr) {
+        if (item[labelKey]) {
+          temp.push(item[labelKey]);
+        } else {
+          temp.push(item.title);
+        }
+      }
+      return temp.join(',');
+    }
+    return '';
+  }
+
+  //用户数据
+  async function getUserDataText(item, formData) {
+    let value = formData[item.field];
+    if (!value) {
+      return '';
+    }
+    let extend = getExtendConfig(item);
+    let storeField = extend.store || 'username';
+    let params = {
+      [storeField]: value,
+    };
+    let res = (await getUserList(params)) || {};
+    let arr = res.records || [];
+    if (arr && arr.length > 0) {
+      let temp: string[] = [];
+      console.log('getUserDataText', arr);
+      let textField = extend.text || 'realname';
+      for (let item of arr) {
+        temp.push(item[textField]);
+      }
+      return temp.join(',');
+    }
+    return '';
+  }
+
+  function getExtendConfig(item) {
+    let extend: FieldExtends = {};
+    let { fieldExtendJson } = item;
+    if (fieldExtendJson) {
+      if (typeof fieldExtendJson == 'string') {
+        try {
+          let json = JSON.parse(fieldExtendJson);
+          extend = { ...json };
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+    return extend;
+  }
+
+  // 联动组件
+  async function getLinkDownDataText(item, formData) {
+    let { dictTable, field } = item;
+    let arr: any[] = [];
+    if (dictOptionsMap[field]) {
+      arr = dictOptionsMap[field];
+    } else {
+      if (dictTable) {
+        let json = JSON.parse(dictTable);
+        if (json) {
+          let { table, txt, key, linkField } = json;
+          let dictCode = `${table},${txt},${key}`;
+          let temp: any[] = (await initDictOptions(dictCode)) || [];
+          arr = [...temp];
+          if (arr && arr.length > 0) {
+            dictOptionsMap[field] = arr;
+            if (linkField) {
+              let fieldArray = linkField.split(',');
+              for (let item of fieldArray) {
+                dictOptionsMap[item] = arr;
+                currentLinkFields.push(item);
+              }
+            }
+          }
+        }
+      }
+    }
+    if (arr && arr.length > 0) {
+      let value = formData[field];
+      return filterMultiDictText(arr, value);
+    }
+    return '';
+  }
+
+  //自定义树
+  async function getTreeDataText(item, formData) {
+    let { dict, field } = item;
+    let arr = [];
+    if (dictOptionsMap[field]) {
+      arr = dictOptionsMap[field];
+    } else {
+      if (dict) {
+        arr = await initDictOptions(dict);
+      }
+    }
+    if (arr && arr.length > 0) {
+      let value = formData[field];
+      return filterMultiDictText(arr, value);
+    }
+    return '';
+  }
+
+  //开关
+  async function getSwitchDataText(item, formData) {
+    let { fieldExtendJson, field } = item;
+    let options = ['Y', 'N'];
+    if (fieldExtendJson) {
+      //update-begin---author:wangshuai---date:2025-11-03---for:【issues/9036】online 表单开发， 设置字段 控件类型为开关时，查看详情页时 开关字段显示原始值---
+      options = JSON.parse(fieldExtendJson)?.switchOptions;
+      //update-end---author:wangshuai---date:2025-11-03---for:【issues/9036】online 表单开发， 设置字段 控件类型为开关时，查看详情页时 开关字段显示原始值---
+    }
+    let arr: any[] = [
+      { value: options[0], text: '是' },
+      { value: options[1], text: '否' },
+      { value: options[0]+'', text: '是' },
+      { value: options[1]+'', text: '否' },
+    ];
+    let value = formData[field];
+    return filterDictText(arr, value);
+  }
+
+  function getItemSpan(item) {
+    if (item.span) {
+      return item.span;
+    }
+    return props.span;
+  }
+
+  function getFileList(item, formData) {
+    let str = formData[item.field];
+    if (!str) {
+      return [];
+    }
+    let arr = str.split(',');
+    let result: string[] = [];
+    for (let item of arr) {
+      let src = getFileAccessHttpUrl(item) || '';
+      if (src) {
+        result.push(src);
+      }
+    }
+    return result;
+  }
+
+  function handleDownloadFile(url) {
+    if (url) {
+      window.open(url);
+    }
+  }
+
+  function handleViewImage(field) {
+    let values = detailFormData.value[field];
+    if (!values || values.length == 0) {
+      createMessage.warning('无图片!');
+      return;
+    }
+    createImgPreview({ imageList: values });
+  }
+
+  function getFilename(url) {
+    if (!url) {
+      return '';
+    }
+    return url.substring(url.lastIndexOf('/') + 1);
+  }
+
+  /**
+   * VUEN-1772【vue3 online 详情】ai—ai_control_single 开关组件未翻译、字段为一行时，未居左对齐
+   */
+  const span24ViewArray = ['file', 'image', 'markdown', 'umeditor'];
+  function getLabelWidthClass(item) {
+    if(span24ViewArray.indexOf(item.view)>=0){
+      if(props.span==12){
+        return 'span12';
+      }else if(props.span==8){
+        return 'span8';
+      }else if(props.span==6){
+        return 'span6';
+      }else{
+        return 'span24';
+      }
+    }
+    return ''
+  }
+  
+  // 关联记录
+  async function getLinkTableData(item, formData) {
+    let value = formData[item.field];
+    let extend = getExtendConfig(item);
+    if(extend.showType=='select'){
+      if (!value) {
+        return '';
+      }
+      return formData[item.field+'_dictText'];
+    }else{
+      if (!value) {
+        return '';
+      }
+      return formData[item.field];
+    }
+    
+    let storeField = extend.store || 'id';
+    let arr = (await queryDepartTreeSync({ ids: value, primaryKey: storeField })) || [];
+    if (arr && arr.length > 0) {
+      let temp: string[] = [];
+      for (let item of arr) {
+        temp.push(item.title);
+      }
+      return temp.join(',');
+    }
+    return '';
+  }
+
+  return {
+    formContainerClass,
+    detailFormData,
+    getItemSpan,
+    handleDownloadFile,
+    handleViewImage,
+    getFilename,
+    getLabelWidthClass
+  };
+}
+
+/**
+ * TODO 尚未实现
+ * 获取 DetailFormSchema[自定义开发用]
+ */
+export function transDetailFormSchemas(formSchemas: FormSchema[]) {
+  const detailFormSchemas = ref<DetailFormSchema[]>([]);
+  console.log(formSchemas);
+  return detailFormSchemas;
+}
diff --git a/src/views/super/online/cgform/extend/linkTable/JModalTip.vue b/src/views/super/online/cgform/extend/linkTable/JModalTip.vue
new file mode 100644
index 0000000..f6c328c
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/JModalTip.vue
@@ -0,0 +1,127 @@
+<template>
+  <div :class="['jeecg-update-tip-bar', {'mobile': getIsMobile}]" v-if="flag">
+      <div class="container">
+          <div class="outer">
+              <div class="inner">
+                  <span class="tip">正在修改表单数据 ···</span>
+                  <div class="cancel" v-on:click="$emit('cancel')">取消</div>
+                  <div class="save" v-on:click="$emit('save')">保存</div>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+    import {computed} from 'vue'
+    import {useAppInject} from '/@/hooks/web/useAppInject'
+  export default {
+    name: 'JModalTip',
+    props:{
+      visible: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ['save', 'cancel'],
+    setup(props){
+      const {getIsMobile} = useAppInject()
+
+      const flag = computed(()=>{
+        return props.visible
+      });
+      
+      return {
+        flag,
+        getIsMobile,
+      }
+    }
+  };
+</script>
+
+<style scoped lang="less">
+  .jeecg-update-tip-bar {
+      width: calc(100% - 100px);
+      font-size: 14px;
+      .container{
+          position: relative;
+          margin: 0 auto;
+          .outer {
+              position: absolute;
+              display: flex;
+              -webkit-box-align: center;
+              align-items: center;
+              -webkit-box-pack: center;
+              justify-content: center;
+              width: 100%;
+              z-index: 11;
+              top: -30px;
+              .inner {
+                  height: 42px;
+                  border-radius: 42px;
+                  color: rgb(255, 255, 255);
+                  background-color: rgb(33, 150, 243);
+                  line-height: 42px;
+                  padding: 0px 10px 0px 24px;
+                  z-index: 9;
+                  box-shadow: rgb(0 0 0 / 12%) 0px 6px 24px, rgb(0 0 0 / 8%) 0px 2px 4px;
+                  display: flex;
+                  flex-direction: row;
+                  -webkit-box-align: center;
+                  align-items: center;
+                  min-width: 380px;
+                  .tip {
+                      -webkit-flex: 1;
+                      flex: 1 1 0%;
+                      -ms-flex: 1;
+                      font-weight: 700;
+                  }
+                  .cancel {
+                      cursor: pointer;
+                      display: inline-block;
+                      height: 28px;
+                      line-height: 28px;
+                      padding: 0px 18px;
+                      border-radius: 28px;
+                      color: rgb(255, 255, 255);
+                      margin-left: 30px !important;
+                      margin-right: 10px !important;
+                      &:hover {
+                          background-color: rgba(255, 255, 255, 0.16);
+                      }
+                  }
+
+                  .save {
+                      cursor: pointer;
+                      display: inline-block;
+                      height: 28px;
+                      line-height: 28px;
+                      padding: 0px 18px;
+                      border-radius: 28px;
+                      color: rgb(62, 164, 252);
+                      background-color: rgb(255, 255, 255);
+                      font-weight: 600;
+                      &:hover {
+                          background-color: rgb(226, 241, 254);
+                      }
+                  }
+              }
+          }
+      }
+  }
+
+  // 【QQYUN-7481】【移动端ONLINE表单】关联记录列表页修改，确认修改tip展示未居中
+  .mobile.jeecg-update-tip-bar {
+    .container {
+      .outer {
+        z-index: 99999;
+        left: 50px;
+
+        .inner {
+          min-width: 360px;
+        }
+      }
+    }
+  }
+
+</style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableCard.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableCard.vue
new file mode 100644
index 0000000..e20fd8b
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableCard.vue
@@ -0,0 +1,387 @@
+<template>
+    <div ref="tableLinkCardRef">
+        <div class="table-link-card">
+            <div style="width: 100%; height: 100%">
+                <div class="card-button" v-if="showButton">
+                    <a-button @click="handleAddRecord"><PlusOutlined />记 录</a-button>
+                </div>
+
+                <a-row>
+                    <a-col :span="fixedSpan ? fixedSpan : itemSpan" v-for="(record, index) in selectRecords">
+                        <div class="card-item" :class="{'disabled-chunk': detail==true}" @click="(e)=>handleClickEdit(e, record)">
+                            <!-- -->
+                            <div class="card-item-left" :class="{'show-right-image': getImageSrc(record)}">
+                                <span class="card-delete" v-if="disabled==false">
+                                    <minus-circle-filled @click="(e)=>handleDeleteRecord(e, index)"/>
+                                </span>
+                                <div class="card-inner">
+                                    <div class="card-main-content">{{ getMainContent(record) }}</div>
+                                    <div class="other-content">
+                                        <a-row>
+                                            <a-col :span="columnSpan" v-for="(col) in realShowColumns">
+                                                <span class="label ellipsis">{{ col.title }}</span>
+                                                <span class="text ellipsis">{{ record[col.dataIndex] }}</span>
+                                            </a-col>
+                                        </a-row>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="card-item-image" v-if="getImageSrc(record)">
+                                <img v-if="getImageSrc(record)" :src="getImageSrc(record)" alt="" @error="handleImageError">
+                            </div>
+                            
+                        </div>
+                    </a-col>
+                </a-row>
+            </div>
+        </div>
+
+        <online-pop-list-modal v-if="popListModalShow" @register="registerListModal" :multi="multi" :id="popTableName" :addAuth="auths.add" @success="addCard"></online-pop-list-modal>
+        <!-- 弹窗到另外一张表单用-可编辑表单 -->
+        <online-pop-modal v-if="popFormModalShow" :id="popTableName" @register="registerFormModal" @success="updateCardData" topTip></online-pop-modal>
+    </div>
+</template>
+
+<script>
+  import { propTypes } from '/@/utils/propTypes';
+  import { PlusOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
+  import { computed, ref, watch, onMounted, defineAsyncComponent } from 'vue'
+  import {useLinkTable } from './useLinkTable';
+  import { useModal } from '/@/components/Modal';
+  const OnlinePopListModal = defineAsyncComponent(() => import('../../auto/comp/OnlinePopListModal.vue'));
+  const OnlinePopModal = defineAsyncComponent(() => import('../../auto/comp/OnlinePopModal.vue'));
+  import placeholderImage from '/@/assets/images/placeholderImage.png';
+  
+  export default {
+    name: "LinkTableCard",
+    props:{
+      valueField: propTypes.string.def(''),
+      textField: propTypes.string.def(''),
+      tableName: propTypes.string.def(''),
+      multi: propTypes.bool.def(false),
+      value: propTypes.oneOfType([propTypes.string, propTypes.number]),
+      // ["表单字段,表字典字段","表单字段,表字典字段"]
+      linkFields: propTypes.array.def([]),
+      //是否是禁用页面
+      disabled: propTypes.bool.def(false),
+      // 是否是detail页面
+      detail: propTypes.bool.def(false),
+      imageField: propTypes.string.def(''),
+    },
+    components:{
+      PlusOutlined,
+      MinusCircleFilled,
+      OnlinePopListModal,
+      OnlinePopModal
+    },
+    emits:['change','update:value'],
+    setup(props, {emit}){
+      const popTableName = computed(()=>{
+        return props.tableName
+      });
+      const [registerListModal, { openModal: openListModal }] = useModal();
+      const [registerFormModal, { openModal: openFormModal }] = useModal();
+      // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      // 加上了online一对多关联记录、他表字段必须懒加载，否则构建循环调用了报错
+      const popListModalShow = ref(false);
+      const popFormModalShow = ref(false);
+      // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      
+      const selectValue = ref([]);
+      const selectRecords = ref([]);
+      const tableLinkCardRef = ref(null);
+      const fixedSpan = ref(0);
+
+      const showButton = computed(()=>{
+        if(props.disabled == true){
+          return false;
+        }
+        if(props.multi===false){
+          //单选且有值
+          if(selectRecords.value.length>0){
+            return false;
+          }
+        }
+        return true;
+      });
+      const {auths, otherColumns,realShowColumns,tableColumns, textFieldArray, transData, loadOne, compareData, formatData, initFormData, getImageSrc,showImage } = useLinkTable(props);
+       
+      const itemSpan = computed(()=>{
+        if(props.multi===true){
+          return 12;
+        }
+        return 24
+      });
+
+      const columnSpan = computed(()=>{
+        if(props.multi===true){
+          return 24;
+        }
+        return 12
+      });
+
+
+      function getMainContent(record){
+        if(record){
+          if(textFieldArray.value.length>0){
+            let field = textFieldArray.value[0]
+            return record[field]
+          }
+        }
+      }
+      
+      function prevent(e){
+        e?.stopPropagation();
+        e?.preventDefault();
+      }
+      
+      function handleClickEdit(e, record) {
+        prevent(e);
+        if(auths.update == false){
+          console.error('当前用户无编辑权限!');
+          return;
+        }
+        if(props.disabled==false){
+          popFormModalShow.value = true;
+          setTimeout(() => openFormModal(true, {
+            isUpdate: true,
+            record
+          }), 100);
+        }
+      }
+      
+      function handleAddRecord(e){
+       // prevent(e);
+        popListModalShow.value = true;
+        setTimeout(() => openListModal(true, {
+          // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+          selectedRowKeys: selectRecords.value.map((item) => item.id),
+          selectedRows: [...selectRecords.value],
+          // update-end--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+        }), 100);
+      }
+
+      
+      function addCard(data){
+        // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+        let arr = [];
+        // update-end--author:liaozhiyang---date:20240517---for：【TV360X-43】修复关联记录可以添加重复数据
+        for(let item of data){
+          let temp = {...item}
+          transData(temp)
+          arr.push(temp)
+        }
+        selectRecords.value = arr;
+        emitValue();
+      }
+      
+      function updateCardData(formData){
+        let arr = selectRecords.value
+        for(let i=0;i<arr.length;i++){
+          if(arr[i].id === formData.id){
+            let temp = {...formData}
+            transData(temp)
+            arr.splice(i, 1, temp)
+          }
+        }
+        selectRecords.value = arr;
+        emitValue();
+      }
+
+      function handleDeleteRecord(e, index){
+        prevent(e);
+        let temp = selectRecords.value;
+        if(temp && temp.length>index){
+          temp.splice(index, 1);
+          selectRecords.value = temp
+        }
+        emitValue();
+      }
+      
+      function emitValue(){
+        let arr = selectRecords.value
+        let values = [];
+        let formData = {}
+        let linkFieldArray = props.linkFields;
+        if(arr.length>0){
+          for(let i=0;i<arr.length;i++){
+            values.push(arr[i][props.valueField])
+            initFormData(formData, linkFieldArray, arr[i])
+          }
+        }else{
+          initFormData(formData, linkFieldArray)
+        }
+        let text = values.join(',');
+        formatData(formData)
+        emit('change', text, formData)
+        emit('update:value', text)
+      }
+      
+
+
+      watch(()=>props.value, async (val)=>{
+        if(val){
+          let flag = compareData(selectRecords.value, val);
+          if(flag===false){
+            let arr = await loadOne(val);
+            selectRecords.value = arr;
+          }
+          //保证表单其他值回显成功
+          if(props.linkFields && props.linkFields.length>0){
+            emitValue();
+          }
+        }else{
+          selectRecords.value = []
+        }
+      }, {immediate: true})
+      
+      onMounted(() => {
+        // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-281】分辨率小时关联记录文字被图片挤没了
+        if (tableLinkCardRef.value.offsetWidth < 250) {
+          fixedSpan.value = 24;
+        }
+        // update-end--author:liaozhiyang---date:20240522---for：【TV360X-281】分辨率小时关联记录文字被图片挤没了
+      });
+      // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-389】下拉和卡片关联记录图裂开给个默认图片
+      const handleImageError = (event) => {
+        event.target.src = placeholderImage;
+      };
+      // update-end--author:liaozhiyang---date:20240529---for：【TV360X-389】下拉和卡片关联记录图裂开给个默认图片
+
+      return {
+        popTableName,
+        selectRecords,
+        popListModalShow,
+        popFormModalShow,
+        otherColumns,
+        realShowColumns,
+        showButton,
+        selectValue,
+        handleAddRecord,
+        handleDeleteRecord,
+        getMainContent,
+        itemSpan,
+        columnSpan,
+        tableColumns,
+        addCard,
+        registerListModal,
+        registerFormModal,
+        handleClickEdit,
+        updateCardData,
+        getImageSrc,showImage,
+        auths,
+        tableLinkCardRef,
+        fixedSpan,
+        placeholderImage,
+        handleImageError,
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+    .table-link-card {
+        box-sizing: border-box;
+        position: relative;
+        width: 100%;
+        .card-button {
+            margin-bottom: 10px !important;
+        }
+        .card-item {
+            width: calc(100% - 10px);
+            display: inline-flex;
+            flex-direction: row;
+            margin: 0px 10px 10px 0px;
+            position: relative;
+            border-radius: 3px;
+            background-color: rgb(255, 255, 255);
+            box-shadow: rgb(0 0 0 / 12%) 0px 1px 4px 0px, rgb(0 0 0 / 12%) 0px 0px 2px 0px;
+            cursor: pointer;
+            &:hover{
+              /*  box-shadow: rgb(0 0 0 / 12%) 0px 4px 12px 0px, rgb(0 0 0 / 12%) 0px 0px 2px 0px;*/
+                .card-item-left{
+                    .card-delete{
+                        display: inline-block;
+                    } 
+                }
+            }
+            
+            &.disabled-chunk{
+                background: none;
+                box-shadow:none;
+            }
+            
+            .card-item-image{
+                width: 100px;
+                padding-right: 8px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                overflow: hidden;
+                img{
+                    width: 100%;
+                }
+            }
+            
+            .card-item-left{
+                width: 100%;
+                display: inline-block;
+                &.show-right-image{
+                    width: calc(100% - 100px);
+                }
+                .card-delete {
+                    position: absolute;
+                    top: -8px;
+                    right: -8px;
+                    font-size: 16px;
+                    color: #757575;
+                    line-height: 1em;
+                    overflow: hidden;
+                    display: none;
+                }
+
+                .card-inner {
+                    flex: 1 1 0%;
+                    padding: 12px 16px;
+                    overflow: hidden;
+                    padding-bottom: 10px;
+
+                    .card-main-content {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        vertical-align: top;
+                        white-space: nowrap;
+                        margin-bottom: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        line-height: 20px;
+                        color: rgb(51, 51, 51);
+                    }
+
+                    .other-content {
+                        .text {
+                            font-size: 12px !important;
+                            display: inline-block;
+                            width: 80%;
+                        }
+                        .label {
+                            max-width: 160px;
+                            color: rgb(158, 158, 158);
+                            padding-right: 0.7em;
+                            display: inline-block;
+                        }
+                        .ellipsis {
+                            overflow: hidden;
+                            height: 22px;
+                            line-height: 22px;
+                            text-overflow: ellipsis;
+                            /*   vertical-align: top;*/
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableConfigModal.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableConfigModal.vue
new file mode 100644
index 0000000..2647f82
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableConfigModal.vue
@@ -0,0 +1,289 @@
+<template>
+  <BasicModal wrapClassName="link-table-config-modal" v-bind="$attrs" title="关联记录配置" @register="registerModal" keyboard :canFullscreen="false" cancelText="关闭" @ok="handleSubmit">
+    <a-spin :spinning="spinningLoading">
+        <BasicForm @register="registerForm">
+        </BasicForm>
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref,computed,nextTick} from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { defHttp } from '/@/utils/http/axios';
+  import {  omit } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default {
+    name: 'LinkTableConfigModal',
+    emits: ['success', 'register'],
+    components: {
+      BasicModal,
+      BasicForm
+    },
+    setup(_p, { emit }) {
+      const spinningLoading = ref(false);
+      const { createMessage: $message } = useMessage();
+      // 是否是外键的关联记录配置
+      //const fkStatus = ref(false);
+      const fieldName = ref('')
+      // update-begin--author:liaozhiyang---date:20260312---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      const isSubTableOneToMany = ref(false);
+      // update-end--author:liaozhiyang---date:20260312---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      let oldValue = {}
+      //useModalInner
+      const [registerModal,{closeModal}] = useModalInner(async (data) => {
+        //fkStatus.value = data.isFk || false;
+        console.log('data', data);
+        //spinningLoading.value = true;
+        isSubTableOneToMany.value = data.isSubTableOneToMany || false;
+        oldValue = {...data.record};
+        await setFieldsValue({dictTable: data.record.dictTable});
+        // 字段设置值在表名之后 防止表名的change将字段的值置空
+        setTimeout(async ()=>{
+          let otherValue = omit(data.record, 'dictTable')
+          await setFieldsValue(otherValue);
+          await clearValidate();
+        }, 200);
+        fieldName.value = data.fieldName;
+      });
+      
+      const titleFieldName = ref('');
+      const imageFieldName = ref('')
+      const fieldOptions = ref([]);
+      const imageFieldOptions = ref([])
+      async function getFieldOptions(tableName){
+        if(tableName){
+          const url = '/online/cgform/field/listByHeadCode';
+          const dataList = await defHttp.get({ url, params:{headCode: tableName} });
+          if(dataList && dataList.length>0){
+            let arr1 = dataList.filter(item=>item.dbFieldName!='id' && item.dbIsPersist == 1 && item.isShowList == 1);
+            console.log('字段字典', arr1)
+            if(arr1.length>0){
+              fieldOptions.value = arr1.map(item=>{
+                return {
+                  text: item.dbFieldTxt,
+                  value: item.dbFieldName
+                }
+              });
+            }else{
+              fieldOptions.value = []
+            }
+            
+            let arr2 = dataList.filter(item=>item.dbFieldName!='id' && item.fieldShowType == 'image' && item.dbIsPersist == 1);
+            console.log('图片字段', arr2)
+            if(arr2.length>0){
+              imageFieldOptions.value = arr2.map(item=>{
+                return {
+                  text: item.dbFieldTxt,
+                  value: item.dbFieldName
+                }
+              });
+            }else{
+              imageFieldOptions.value = [{text:'无图片字段可以选择', value:'',key:'', disabled: true}]
+            }
+          }else{
+            fieldOptions.value = []
+            imageFieldOptions.value = [{text:'无图片字段可以选择', value:'', key:'',disabled: true}]
+          }
+        }
+      }
+      async function handleTableChange(tableName){
+        titleFieldName.value = '';
+        imageFieldName.value = ''
+        // 表名修改重新获取字段
+        await getFieldOptions(tableName);
+      }
+      const otherFieldOptions = computed(()=>{
+        let arr = fieldOptions.value;
+        let titleField = titleFieldName.value;
+        let imageField = imageFieldName.value;
+        return arr.filter(item=>item.value!=titleField && item.value!=imageField);
+      });
+      
+      
+      const formSchemas = [
+        {
+          label: 'rowKey',
+          field: 'rowKey',
+          component: 'Input',
+          show: false
+        },
+        {
+          label: 'dictField',
+          field: 'dictField',
+          component: 'Input',
+          defaultValue: 'id',
+          show: false
+        },
+        {
+          label: '字段描述',
+          field: 'dbFieldTxt',
+          component: 'Input',
+          required: true
+        },
+        {
+          label: '关联表',
+          field: 'dictTable',
+          component: 'JSearchSelect',
+          required: true,
+          componentProps:({ formActionType }) => {
+            return {
+              dict: 'onl_cgform_head where copy_type = 0,table_txt,table_name',
+              pageSize: 10,
+              async: true,
+              immediateChange: true,
+              popContainer: '.link-table-config-modal',
+              params:{order: 'desc', column: 'create_time'},
+              onChange:async (name)=>{
+                // 重新设置表单值
+                if(oldValue.titleField || oldValue.otherFields){
+                  await formActionType.setFieldsValue({
+                    titleField: '',
+                    otherFields: '',
+                    imageField: ''
+                  });
+                  await formActionType.clearValidate();
+                }
+                // 通过表名查询字段
+                await handleTableChange(name);
+              }
+            }
+          }
+        },
+        {
+          label: '标题字段',
+          field: 'titleField',
+          component: 'JSearchSelect',
+          required: true,
+          componentProps:{
+            async: false,
+            popContainer: '.link-table-config-modal',
+            dictOptions: fieldOptions,
+            immediateChange: true,
+            onChange:(str)=>{
+              titleFieldName.value = str;
+              oldValue['titleField'] = str;
+            }
+          }
+        },
+        {
+          label: '封面图片',
+          field: 'imageField',
+          component: 'JSearchSelect',
+          ifShow: () => !isSubTableOneToMany.value,
+          componentProps:{
+            async: false,
+            popContainer: '.link-table-config-modal',
+            dictOptions: imageFieldOptions,
+            immediateChange: true,
+            onChange:(str)=>{
+              imageFieldName.value = str;
+              oldValue['imageFieldName'] = str;
+            }
+          }
+        },
+        {
+          label: '其他字段',
+          field: 'otherFields',
+          component: 'JSelectMultiple',
+          ifShow: () => !isSubTableOneToMany.value,
+          // update-begin--author:liaozhiyang---date:20240320---for：【QQYUN-8574】关联记录最多选6个字段
+          componentProps: ({ schema, tableAction, formActionType, formModel }) => {
+            return {
+              popContainer: '.link-table-config-modal',
+              options: otherFieldOptions.value,
+              onChange: (str) => {
+                if (str.split(',').length > 6) {
+                  const result = str.split(',');
+                  result.pop();
+                  const eStr = result.join(',');
+                  setTimeout(() => {
+                    formModel.otherFields = eStr;
+                    oldValue['otherFields'] = eStr;
+                  }, 0);
+                  $message.warning('最多选择6个字段~');
+                } else {
+                  oldValue['otherFields'] = str;
+                }
+                console.info('oldValue', formModel);
+              },
+            };
+          },
+          // update-end--author:liaozhiyang---date:20240320---for：【QQYUN-8574】关联记录最多选6个字段
+        },
+        
+        {
+          label: '显示方式',
+          field: 'showType',
+          component: 'Select',
+          defaultValue: 'card',
+          ifShow: () => !isSubTableOneToMany.value,
+          componentProps: {
+            options: [
+              { label: '卡片', value: 'card' },
+              { label: '下拉框', value: 'select'},
+            ],
+          }
+        },
+        {
+          label: '是否多选',
+          field: 'multiSelect',
+          component: 'RadioGroup',
+          defaultValue: false,
+          componentProps: {
+            options: [
+              { label: '否', value: false },
+              { label: '是', value: true },
+            ],
+          }
+        },
+        {
+          label: '列表只读',
+          field: 'isListReadOnly',
+          component: 'RadioGroup',
+          defaultValue: false,
+          ifShow: () => !isSubTableOneToMany.value,
+          componentProps: {
+            options: [
+              { label: '否', value: false },
+              { label: '是', value: true },
+            ],
+          },
+        }
+      ]
+
+      // 表单配置
+      const [ registerForm, {validate, setFieldsValue, clearValidate, resetFields }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      async function handleSubmit(){
+        let data = await validate()
+        data['fieldName'] = fieldName.value;
+ /*     dbFieldTxt: "姓名"
+        dictTable: "test"
+        multiSelect: false
+        otherFields: "create_by,xxx"
+        showType: "card",
+        imageField: 'imagexx',
+        titleField: "namexx"*/
+        emit('success', data);
+        closeModal();
+      }
+      
+      
+      return {
+        registerModal,
+        spinningLoading,
+        registerForm,
+        handleSubmit
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableFieldConfigModal.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableFieldConfigModal.vue
new file mode 100644
index 0000000..220c681
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableFieldConfigModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <BasicModal wrapClassName="link-table-field-config-modal" v-bind="$attrs" title="他表字段配置" @register="registerModal" keyboard :canFullscreen="false" cancelText="关闭" @ok="handleSubmit">
+    <a-spin :spinning="spinningLoading">
+        <BasicForm @register="registerForm">
+        </BasicForm>
+    </a-spin>
+  </BasicModal>
+</template>
+
+<script>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref,computed } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { defHttp } from '/@/utils/http/axios';
+  import {  omit } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  
+  export default {
+    name: 'LinkTableFieldConfigModal',
+    emits: ['success', 'register'],
+    props: {
+      isSubTableOneToMany: {
+        type: Boolean,
+        default: false
+      }
+    },
+    components: {
+      BasicModal,
+      BasicForm
+    },
+    setup(props, { emit }) {
+      const spinningLoading = ref(false);
+      const linkTableOptions = ref([]);
+      const fieldOptions = ref([]);
+      let tableAndFieldsMap = {};
+      let oldValue = {}
+      const { createMessage: $message } = useMessage();
+      
+      //useModalInner
+      const [registerModal,{closeModal}] = useModalInner( async (data) => {
+        console.log('data', data);
+        oldValue = {...data.record};
+        //spinningLoading.value = true;
+        tableAndFieldsMap = data.tableAndFieldsMap;
+        await initLinkTableOptions()
+        await setFieldsValue({dictTable: data.record.dictTable});
+        // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-45】更关联记录中的其他字段，他表字段中显示字段没有更新
+        if (oldValue.dictTable) {
+          handleChange(oldValue.dictTable);
+        }
+        // update-end--author:liaozhiyang---date:20240517---for：【TV360X-45】更关联记录中的其他字段，他表字段中显示字段没有更新
+        setTimeout(async ()=>{
+          let otherValue = omit(data.record, 'dictTable')
+          await setFieldsValue(otherValue);
+          await clearValidate();
+        }, 200);
+      });
+      
+      async function initLinkTableOptions(){
+        let fieldNames = Object.keys(tableAndFieldsMap);
+        if(!fieldNames || fieldNames.length==0){
+          linkTableOptions.value = []
+        }else{
+          let arr = []
+          for(let name of fieldNames){
+            arr.push({
+              text: tableAndFieldsMap[name].title,
+              value: name
+            })
+          }
+          linkTableOptions.value = arr
+        }
+      }
+      
+      async function handleChange(fieldName){
+        if(fieldName){
+          const {table, fields} = tableAndFieldsMap[fieldName];
+          if(!table){
+            $message.warning('请先完善字段['+fieldName+']关联记录的配置')
+            return;
+          }
+          const url = '/online/cgform/field/listByHeadCode';
+          const dataList = await defHttp.get({ url, params:{headCode: table} });
+          if(dataList && dataList.length>0){
+            let arr = dataList.map(item=>{
+              return {
+                text: item.dbFieldTxt,
+                value: item.dbFieldName
+              }
+            });
+            console.log('字段字典', arr);
+            let fieldArray = fields.split(',')
+            // update-begin--author:liaozhiyang---date:20260323---for:【QQYUN-14951】一对多他表字段需能选择所有字段
+            if (props.isSubTableOneToMany) {
+              fieldOptions.value = arr;
+            } else {
+              fieldOptions.value = arr.filter(item=>fieldArray.includes(item.value));
+            }
+            // update-end--author:liaozhiyang---date:20260323---for:【QQYUN-14951】一对多他表字段需能选择所有字段
+          }else{
+            fieldOptions.value = []
+          }
+        }
+      }
+      
+      const formSchemas = [
+        {
+          label: 'rowKey',
+          field: 'rowKey',
+          component: 'Input',
+          show: false
+        },
+        {
+          label: '字段描述',
+          field: 'dbFieldTxt',
+          component: 'Input',
+          required: true
+        },
+        {
+          label: '关联记录',
+          field: 'dictTable',
+          component: 'JSearchSelect',
+          required: true,
+          componentProps:({ formActionType }) => {
+            let tempOptions = linkTableOptions.value;
+            return {
+              async: false,
+              popContainer: '.link-table-field-config-modal',
+              dictOptions: tempOptions,
+              immediateChange: true,
+              onChange:async (name)=>{
+                if(oldValue.dictText){
+                  await formActionType.setFieldsValue({
+                    dictText: ''
+                  });
+                  await formActionType.clearValidate();
+                }
+                handleChange(name);
+              }
+            }
+          }
+        },
+        {
+          label: '显示字段',
+          field: 'dictText',
+          component: 'JSearchSelect',
+          required: true,
+          componentProps:{
+            async: false,
+            popContainer: '.link-table-field-config-modal',
+            dictOptions: fieldOptions,
+            onChange: (value)=>{
+              oldValue['dictText'] = value;
+            }
+          }
+        }
+      ]
+
+      // 表单配置
+      const [ registerForm, {validate, setFieldsValue, clearValidate}] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      async function handleSubmit(){
+        const data = await validate()
+ /*     dbFieldTxt: "姓名"
+        dictTable: "test"
+        multiSelect: false
+        otherFields: "create_by,xxx"
+        showType: "card"
+        titleField: "namexx"*/
+        console.log('handlesub', data);
+        emit('success', data)
+        closeModal();
+      }
+      
+      
+      return {
+        registerModal,
+        spinningLoading,
+        registerForm,
+        handleSubmit
+      };
+    },
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableInput.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableInput.vue
new file mode 100644
index 0000000..32fa1d6
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableInput.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="LinkTablePopup">
+    <a-input v-bind="$attrs" :value="showText" readOnly @click.stop="handleAddRecord" />
+    <OnlinePopListModal
+      v-if="popListModalShow"
+      @register="registerListModal"
+      :multi="multi"
+      :id="popTableName"
+      :addAuth="auths.add"
+      @success="addCard"
+    />
+    <OnlinePopModal v-if="popFormModalShow" :id="popTableName" @register="registerFormModal" @success="updateCardData" topTip />
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, watch, defineAsyncComponent } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { useLinkTable } from './useLinkTable';
+  const OnlinePopListModal = defineAsyncComponent(() => import('../../auto/comp/OnlinePopListModal.vue'));
+  const OnlinePopModal = defineAsyncComponent(() => import('../../auto/comp/OnlinePopModal.vue'));
+  // 给vxetable使用
+  defineOptions({ name: 'LinkTable' });
+  const props = defineProps({
+    valueField: { type: String, default: 'id' },
+    textField: { type: String, default: '' },
+    tableName: { type: String, default: '' },
+    multi: { type: Boolean, default: false },
+    value: { type: [String, Number] },
+    // ["表单字段,表字典字段","表单字段,表字典字段"]
+    linkFields: { type: Array, default: () => [] },
+  });
+
+  const emit = defineEmits(['change', 'update:value']);
+  const popListModalShow = ref(false);
+  const popFormModalShow = ref(false);
+  // ---- Modal ----
+  const [registerListModal, { openModal: openListModal }] = useModal();
+  const [registerFormModal, { openModal: openFormModal }] = useModal();
+
+  // ---- 数据 ----
+  const selectRecords = ref([]);
+  const popTableName = computed(() => props.tableName);
+
+  const { auths, textFieldArray, transData, loadOne, compareData, formatData, initFormData } = useLinkTable(props);
+
+  const showText = computed(() => {
+    if (selectRecords.value.length === 0 || textFieldArray.value.length === 0) {
+      return '';
+    }
+    const field = textFieldArray.value[0];
+    return selectRecords.value.map((r) => r[field] ?? '').join(', ');
+  });
+
+  // ---- 操作 ----
+  function handleAddRecord() {
+    popListModalShow.value = true;
+    setTimeout(() => {
+      openListModal(true, {
+        selectedRowKeys: selectRecords.value.map((item) => item[props.valueField]),
+        selectedRows: [...selectRecords.value],
+      });
+    }, 300);
+  }
+
+  function addCard(data) {
+    selectRecords.value = data.map((item) => {
+      const temp = { ...item };
+      transData(temp);
+      return temp;
+    });
+    emitValue();
+  }
+
+  function updateCardData(formData) {
+    const arr = selectRecords.value;
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i][props.valueField] === formData[props.valueField]) {
+        const temp = { ...formData };
+        transData(temp);
+        arr.splice(i, 1, temp);
+        break;
+      }
+    }
+    selectRecords.value = arr;
+    emitValue();
+  }
+
+  // ---- emit ----
+  function emitValue() {
+    const arr = selectRecords.value;
+    const values = [];
+    const formData = {};
+    const linkFieldArray = props.linkFields;
+    if (arr.length > 0) {
+      for (let i = 0; i < arr.length; i++) {
+        values.push(arr[i][props.valueField]);
+        initFormData(formData, linkFieldArray, arr[i]);
+      }
+    } else {
+      initFormData(formData, linkFieldArray);
+    }
+    const text = values.join(',');
+    formatData(formData);
+    emit('change', text, formData);
+    emit('update:value', text);
+  }
+
+  // ---- 监听 value 回显 ----
+  watch(
+    () => props.value,
+    async (val) => {
+      if (val) {
+        const changed = compareData(selectRecords.value, val) === false;
+        if (changed) {
+          selectRecords.value = await loadOne(val);
+        }
+        if (props.linkFields?.length > 0) {
+          emitValue();
+        }
+      } else {
+        selectRecords.value = [];
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableListPiece.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableListPiece.vue
new file mode 100644
index 0000000..9caa01f
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableListPiece.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="link-table-piece" @click="handleClick">
+    <span>{{ text }}</span>
+  </div>
+</template>
+
+<script>
+  /**
+   * 关联记录 在列表上显示的 小块
+   */
+  import { propTypes } from '/@/utils/propTypes';
+  export default {
+    name: 'LinkTableListPiece',
+    props: {
+      text: propTypes.string.def(''),
+      id: propTypes.string.def(''),
+    },
+    emits: ['tab'],
+    setup(props, { emit }) {
+      function handleClick(e) {
+        e?.stopPropagation();
+        e?.preventDefault();
+        console.log(props.id);
+        emit('tab', props.id);
+      }
+      return {
+        handleClick,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+  .link-table-piece {
+    background-color: #e8e8e8;
+    border-radius: 3px;
+    color: #333;
+    display: inline-block;
+    padding: 0 10px;
+    position: relative;
+    cursor: pointer;
+    background-color: #e8e8e8;
+    border-radius: 3px;
+    line-height: 21px;
+    margin-right: 3px;
+    /*margin: 6px 0 0 6px;*/
+    padding: 0 7px;
+    max-width: 100px;
+    > span {
+      display: inline-block !important;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: top;
+      white-space: nowrap;
+    }
+    &:hover {
+      background-color: #dfebfa;
+      color: #2196f3;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/extend/linkTable/LinkTableSelect.vue b/src/views/super/online/cgform/extend/linkTable/LinkTableSelect.vue
new file mode 100644
index 0000000..c1cc4f3
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/LinkTableSelect.vue
@@ -0,0 +1,412 @@
+<template>
+    <div class="link-table-select-box" ref="boxRef">
+        <a-select
+                v-model:value="selectValue"
+                style="width: 100%"
+                placeholder="请选择"
+                option-label-prop="label"
+                popupClassName="table-link-select"
+                allowClear
+                show-search
+                v-bind="bindValue"
+                :options="selectOptions"
+                :filter-option="false"
+                :not-found-content="null"
+                @search="handleSearch"
+                @change="handleChange">
+            
+            <!-- antD 3.0之后使用此渲染tag
+            <template #tagRender="{ value: val, label, closable, onClose, option }">
+                <a-tag :closable="closable" style="margin-right: 3px" @close="onClose">
+                    {{ label }}&nbsp;&nbsp;
+                    <span role="img" :aria-label="val">{{ option.val }}</span>
+                </a-tag>
+            </template>
+            -->
+            <template #option="item">
+                <div v-if="!item.value && auths.add" class="opt-add" v-on:click="handleClickAdd">
+                    <PlusOutlined/> 记录
+                </div>
+                <div v-else class="online-select-item">
+                    <!-- 扩展配置后可设置左侧图片-->
+                    <div class="left-avatar" v-if="showImage">
+                        <img v-if="getImageSrc(item)" :src="getImageSrc(item)" alt="" @error="handleImageError">
+                        <img v-else :src="placeholderImage" alt="">
+                    </div>
+                    <div class="right-content">
+                        <div class="label" :class="{ noEditBtn: !(editBtnShow && auths.update) }">
+                            <EditOutlined v-if="editBtnShow && auths.update" @click="(e)=>handleClickEdit(e, item)"/>
+                            {{ item.label }}
+                        </div>
+
+                        <div class="others">
+                            <div v-for="pro in textFieldArray" class="other-item ellipsis">
+                                {{ item[pro] }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </a-select>
+
+        <!-- 弹窗到另外一张表单用-可编辑表单 -->
+        <online-pop-modal v-if="popFormModalShow" :id="popTableName" @register="registerPopModal" @success="getFormData" topTip></online-pop-modal>
+    </div>
+</template>
+
+<script lang="ts">
+  import type {Ref} from "vue";
+  import { propTypes } from '/@/utils/propTypes';
+  
+  import {ref, computed, watch,toRaw, inject, onMounted, onBeforeUnmount, defineAsyncComponent } from 'vue'
+  import { PlusOutlined,EditOutlined } from '@ant-design/icons-vue';
+  const OnlinePopModal = defineAsyncComponent(() => import('../../auto/comp/OnlinePopModal.vue'));
+  import { useModal } from '/@/components/Modal';
+  import {useLinkTable } from './useLinkTable';
+  import { useDebounceFn } from '@vueuse/core';
+  import placeholderImage from '/@/assets/images/placeholderImage.png';
+  
+  const pageSize = 10;
+  
+  export default {
+    name: "LinkTableSelect",
+    components:{
+      PlusOutlined,
+      EditOutlined,
+      OnlinePopModal
+    },
+    props:{
+      valueField: propTypes.string.def(''),
+      textField: propTypes.string.def(''),
+      tableName: propTypes.string.def(''),
+      multi: propTypes.bool.def(false),
+      value: propTypes.oneOfType([propTypes.string, propTypes.number, propTypes.array]),
+      linkFields: propTypes.array.def([]),
+      imageField: propTypes.string.def(''),
+      // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+      editBtnShow: propTypes.bool.def(true),
+      // update-end--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+    },
+    emits:['change','update:value'],
+    setup(props, { emit, attrs }){
+      // 当前表单id
+      const tableId = inject<Ref<string | null>>('tableId', ref(null));
+      const boxRef = ref<HTMLDivElement>();
+      // 选中的值
+      const selectValue = ref<string[]>([]);
+      const {auths, mainContentField, textFieldArray, selectOptions, reloadTableLinkOptions, addQueryParams, formatData, initFormData, getImageSrc,showImage } = useLinkTable(props);
+        
+      // 用于 online表单中 弹出别的表单
+      const [registerPopModal, { openModal: openPopModal }] = useModal();
+      // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      // 加上了online一对多关联记录、他表字段必须懒加载，否则构建循环调用了报错
+      const popFormModalShow = ref(false);
+      // update-end--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      const popTableName = computed(()=>{
+        return props.tableName
+      });
+    
+      const bindValue = computed(()=>{
+        if(props.multi === true){
+          return {
+            // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-988】关联记录组件下拉风格禁用未生效
+            ...attrs,
+            // update-end--author:liaozhiyang---date:20240617---for：【TV360X-988】关联记录组件下拉风格禁用未生效
+            mode: 'multiple',
+          }
+        }else{
+          return {
+            // update-begin--author:liaozhiyang---date:20240617---for：【TV360X-988】关联记录组件下拉风格禁用未生效
+            ...attrs,
+            // update-end--author:liaozhiyang---date:20240617---for：【TV360X-988】关联记录组件下拉风格禁用未生效
+          }
+        }
+      });
+      
+      // 新增记录
+      function handleClickAdd(e){
+        // 弹窗新增表单
+        e?.stopPropagation();
+        e?.preventDefault();
+        popFormModalShow.value = true;
+        setTimeout(() => openPopModal(true, {}), 100);
+      }
+
+      function handleClickEdit(e, record){
+        // 弹窗编辑表单
+        e?.stopPropagation();
+        e?.preventDefault();
+        if(auths.update == false){
+          console.error('当前用户无编辑权限!');
+          return;
+        }
+        popFormModalShow.value = true;
+        setTimeout(() => openPopModal(true, {
+          isUpdate: true,
+          record
+        }), 100);
+      }
+
+      const CUSTOM_RELOAD_EVENT = 'custom:online:reload';
+
+      onMounted(() => {
+        if (boxRef.value) {
+          boxRef.value.addEventListener(CUSTOM_RELOAD_EVENT, handleCustomReload)
+        }
+      })
+
+      onBeforeUnmount(() => {
+        if (boxRef.value) {
+          boxRef.value.removeEventListener(CUSTOM_RELOAD_EVENT, handleCustomReload)
+        }
+      })
+
+      /**
+       * 自定义刷新事件，用于刷新下拉项
+       */
+      function handleCustomReload() {
+        reloadTableLinkOptions();
+      }
+
+      //要想数据回显，必须表单里存在props.valueField对应的字段
+      async function getFormData(data) {
+        try {
+          // 【QQYUN-7153】给当前表单下所有的查询区域的下拉关联记录组件推送刷新数据事件
+          const queryFormLinkTables = document.querySelectorAll(`.online-list-${tableId.value} .jeecg-basic-table-form-container.online-query-form .link-table-select-box`);
+          if (queryFormLinkTables && queryFormLinkTables.length > 0) {
+            queryFormLinkTables.forEach((item) => item.dispatchEvent(new Event(CUSTOM_RELOAD_EVENT)))
+          }
+        } catch (e) {
+          console.error(e)
+        }
+
+        //1.刷新下拉项
+        await reloadTableLinkOptions();
+        //2.重置下拉值
+        let temp = data[props.valueField];
+        if (props.multi === true) {
+          selectValue.value = [temp];
+        } else {
+          selectValue.value = temp;
+        }
+        //3.触发change事件
+        handleChange(selectValue.value)
+      }
+      
+      function handleSearch(text){
+        addQueryParams(text)
+        reloadTableLinkOptions();
+      }
+      
+      function handleChange(text){
+        emitValue(text);
+        if(!text){
+          addQueryParams();
+          reloadTableLinkOptions();
+        }
+      }
+      
+      function emitValue(text){
+        let formData = {}
+        let linkFieldArray = props.linkFields;
+        let textArray = []
+        if(!text){
+          initFormData(formData, linkFieldArray)
+        }else{
+          let options = toRaw(selectOptions.value);
+          console.log('options>>', options)
+          let tempText = toRaw(text);
+          if(tempText instanceof Array){
+            textArray = [...tempText]
+          }else{
+            if(props.multi == true){
+              textArray = tempText.split(',')
+            }else{
+              textArray = [tempText]
+            }
+          }
+          let arr = options.filter(i=>textArray.indexOf(i[props.valueField])>=0)
+          if(arr && arr.length>0){
+            let record = {
+              ...arr[0]
+            };
+            if(arr.length>1){
+              for(let i=1;i<arr.length;i++){
+                record = hebing(record, arr[i])
+              }
+            }
+            let titleField = mainContentField.value;
+            record[titleField] = record.label;
+            initFormData(formData, linkFieldArray, record)
+          }
+        }
+        formatData(formData)
+        emit('change', textArray.join(',')||'', formData)
+        emit('update:value', textArray.join(',')||'')
+      }
+      
+      //合并数据
+      function hebing(oldObj, newObj){
+        let record = {}
+        Object.keys(oldObj).map(k=>{
+          record[k] = (oldObj[k]||'')+','+(newObj[k]||'')
+        })
+        return record;
+      }
+
+      watch(()=>props.value, async (val)=>{
+        if(val){
+          if(props.multi == true){
+            selectValue.value = val.split(',')
+          }else{
+            selectValue.value = val;
+          }
+          //保证表单其他值回显成功
+          if(props.linkFields && props.linkFields.length>0){
+            emitValue(val);
+          }
+        }else{
+          selectValue.value = []
+        }
+      }, {immediate: true})
+
+
+      //保证编辑页面 第一次进入表单能回显成功
+      watch(()=>selectOptions.value, (val)=>{
+        if(val && val.length>0){
+          if(props.linkFields && props.linkFields.length>0){
+            if(selectValue.value && selectValue.value.length>0){
+              emitValue(selectValue.value);
+            }
+          }
+        }
+      });
+      // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-389】下拉和卡片关联记录图裂开给个默认图片
+      const handleImageError = (event) => {
+        event.target.src = placeholderImage;
+      };
+      // update-end--author:liaozhiyang---date:20240529---for：【TV360X-389】下拉和卡片关联记录图裂开给个默认图片
+
+      return {
+        boxRef,
+        selectValue,
+        selectOptions,
+        registerPopModal,
+        popFormModalShow,
+        popTableName,
+        textFieldArray,
+        handleClickAdd,
+        handleClickEdit,
+        getFormData,
+        handleSearch:  useDebounceFn(handleSearch, 800),
+        handleChange,
+        bindValue,
+        showImage,
+        getImageSrc,
+        auths,
+        placeholderImage,
+        handleImageError,
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+    .table-link-select{
+        .opt-add{
+            cursor: pointer;
+            font-size: 14px;
+            margin: 3px 0;
+            padding: 0 8px;
+            color: #1565c0;
+        }
+        .online-select-item{
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            cursor: pointer;
+            padding: 0 12px;
+            position: relative;
+            border-bottom: 1px solid rgba(0,0,0,.06);
+            line-height: 22px;
+            padding: 6px 40px 6px 12px;
+            min-height: 56px;
+            display: flex;
+            .left-avatar{
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+                width: 44px;
+                height: 44px;
+                margin-right: 8px;
+                >img{
+                    width: 44px;
+                    height: 44px;
+                    border: 1px solid rgba(0, 0, 0, 0.06);
+                    border-radius: 4px;
+                }
+            }
+            .right-content{
+                overflow: hidden;
+                -webkit-flex: 1;
+                flex: 1 1 0%;
+                -ms-flex: 1;
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+                // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+                .noEditBtn {
+                  padding-left: 6px;
+                }
+                // update-end--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+                .anticon-edit{
+                    &:hover{
+                        color: #0c8fcf;
+                    }
+                }
+
+                .label{
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    display: -webkit-box;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    word-break: break-all;
+                    color: rgb(51, 51, 51);
+                    font-weight: bold;
+                    line-height: 1.5;
+                    margin-bottom: 4px;
+                }
+                .others{
+                    margin-left: -7px;
+                    box-sizing: border-box;
+                    .ellipsis{
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        vertical-align: top;
+                        white-space: nowrap;
+                    }
+                    .other-item{
+                        -webkit-line-clamp: 3;
+                        -webkit-box-orient: vertical;
+                        border-right: 1px solid #9e9e9e;
+                        color: #757575;
+                        display: inline-block;
+                        height: 1.2em!important;
+                        line-height: 1em;
+                        overflow: hidden;
+                        padding: 0 7px;
+                        text-overflow: ellipsis;
+                        word-break: break-all;
+                        // update-begin--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+                        &:first-child,
+                        &:last-child {
+                          border-right: none;
+                        }
+                        &:nth-child(2) {
+                          padding-left: 0;
+                        }
+                        // update-end--author:liaozhiyang---date:20240530---for：【TV360X-389】普通查询关联记录去掉编辑按钮
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/super/online/cgform/extend/linkTable/useLinkTable.ts b/src/views/super/online/cgform/extend/linkTable/useLinkTable.ts
new file mode 100644
index 0000000..e28f318
--- /dev/null
+++ b/src/views/super/online/cgform/extend/linkTable/useLinkTable.ts
@@ -0,0 +1,335 @@
+import { defHttp } from '/@/utils/http/axios';
+import { ref, watchEffect, computed, reactive } from 'vue'
+import { pick } from 'lodash-es';
+import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+function queryTableData(tableName, params){
+  const url = '/online/cgform/api/getData/'+tableName;
+  return defHttp.get({ url, params });
+}
+
+function queryTableColumns(tableName, params){
+  const url = '/online/cgform/api/getColumns/'+tableName;
+  return defHttp.get({ url, params });
+}
+
+export function useLinkTable(props) {
+  
+  //TODO 目前只支持查询第一页的数据，可以输入关键字搜索
+  const pageNo = ref('1');
+  // 查询列
+  const baseParam = ref<any>({});
+  // 搜素条件
+  const searchParam = ref<any>({});
+  // 第一个文本列
+  const mainContentField = ref('');
+  //权限数据
+  const auths = reactive({
+    add: true,
+    update: true
+  });
+
+  //显示列
+  const textFieldArray = computed(()=>{
+    if(props.textField){
+      return props.textField.split(',')
+    }
+    return []
+  });
+  const otherColumns = ref<any[]>([]);
+  // 展示的列 配置的很多列，但是只展示三行
+  const realShowColumns = computed(()=>{
+    let columns = otherColumns.value;
+    if(props.multi == true){
+      return columns.slice(0, 3)
+    }else{
+      return columns.slice(0, 6)
+    }
+  });
+
+  watchEffect(async ()=>{
+    let table = props.tableName;
+    if(table){
+      let valueField = props.valueField || '';
+      let textField = props.textField || '';
+      let arr:any[] = [];
+      if(valueField){
+        arr.push(valueField)
+      }
+      if(textField){
+        let temp = textField.split(',')
+        mainContentField.value = temp[0]
+        for(let field of temp){
+          arr.push(field)
+        }
+      }
+      let imageField = props.imageField || '';
+      if(imageField){
+        arr.push(imageField)
+      }
+      baseParam.value = {
+        linkTableSelectFields: arr.join(',')
+      };
+      await resetTableColumns()
+      await reloadTableLinkOptions()
+    }
+  });
+  
+  const otherFields = computed(()=>{
+    let textField = props.textField || '';
+    let others:any[] = [];
+    let labelField = ''
+    if(textField){
+      let temp = textField.split(',');
+      labelField = temp[0];
+      for(let i=0;i<temp.length;i++){
+        if(i>0){
+          others.push(temp[i])
+        }
+      }
+    }
+    return {
+      others,
+      labelField
+    };
+  });
+
+  // 选项
+  const selectOptions = ref<any[]>([]);
+  const tableColumns = ref<any[]>([]);
+  const dictOptions = ref<any>({});
+  //const tableTitle = ref('')
+
+  async function resetTableColumns(){
+    let params = baseParam.value;
+    const data = await queryTableColumns(props.tableName, params);
+    tableColumns.value = data.columns;
+    if(data.columns){
+      let imageField = props.imageField;
+      let arr = data.columns.filter(c=>c.dataIndex!=mainContentField.value && c.dataIndex!=imageField)
+      otherColumns.value = arr;
+    }
+    dictOptions.value = data.dictOptions;
+    // 权限数据
+    console.log('隐藏的按钮', data.hideColumns);
+    if(data.hideColumns){
+      let hideCols = data.hideColumns;
+      if(hideCols.indexOf('add')>=0){
+        auths.add = false
+      }else{
+        auths.add = true
+      }
+      if(hideCols.indexOf('update')>=0){
+        auths.update = false
+      }else{
+        auths.update = true
+      }
+    }
+  }
+  
+  async function reloadTableLinkOptions(){
+    let params = getLoadDataParams();
+    const data = await queryTableData(props.tableName, params);
+    let records = data.records;
+    //tableTitle.value = data.head.tableTxt;
+    let dataList:any[] = [];
+    let { others, labelField } = otherFields.value;
+    let imageField = props.imageField;
+    if(records && records.length>0){
+      for(let rd of records){
+        let temp = {...rd};
+        transData(temp);
+        let result = Object.assign({}, pick(temp, others), {id:temp.id, label: temp[labelField], value: temp[props.valueField]});
+        if(imageField){
+          result[imageField] = temp[imageField]
+        }
+        dataList.push(result);
+      }
+    }
+    //添加一个空对象 为add操作占位
+    // update-begin--author:liaozhiyang---date:20240607---for：【TV360X-1095】高级查询关联记录去掉编辑按钮及去掉记录按钮
+    props.editBtnShow && dataList.push({});
+    // update-end--author:liaozhiyang---date:20240607---for：【TV360X-1095】高级查询关联记录去掉编辑按钮及去掉记录按钮
+    selectOptions.value = dataList;
+  }
+
+  /**
+   * 数据简单翻译-字典
+   * @param data
+   */
+  function transData(data) {
+    let columns = tableColumns.value;
+    let dictInfo = dictOptions.value;
+    for (let c of columns) {
+      const { dataIndex, customRender } = c;
+      if (data[dataIndex] || data[dataIndex] === 0) {
+        if (customRender && customRender == dataIndex) {
+          //这样的就是 字典数据了 可以直接翻译
+          if (dictInfo[customRender]) {
+            data[dataIndex] = filterMultiDictText(dictInfo[customRender], data[dataIndex]);
+            continue;
+          }
+        }
+      }
+      // 兼容后台翻译字段
+      let dictText = data[dataIndex + '_dictText'];
+      if (dictText) {
+        data[dataIndex] = dictText
+      }
+    }
+  }
+
+
+  //获取加载数据的查询条件
+  function getLoadDataParams(){
+    let params = Object.assign({pageSize: 100, pageNo: pageNo.value}, baseParam.value, searchParam.value);
+    return params;
+  }
+
+  //设置查询条件
+  function addQueryParams(text){
+    if(!text){
+      searchParam.value = {}
+    }else{
+      let arr = textFieldArray.value;
+      let params:any[] = []
+      let fields:any[] = []
+      for(let i=0;i<arr.length;i++){
+        if(i<=1){
+          fields.push(arr[i]);
+          params.push({field: arr[i], rule: 'like', val: text})
+        }
+      }
+      // params[arr[i]] = `*${text}*`
+      // params['selectConditionFields'] = fields.join(',')
+      // searchParam.value = params;
+      params['superQueryMatchType'] = 'or';
+      params['superQueryParams'] = encodeURI(JSON.stringify(params));
+      searchParam.value = params;
+    }
+  }
+  
+  async function loadOne(value){
+    if(!value){
+      return []
+    }
+    let valueFieldName = props.valueField;
+    let params = {
+      ...baseParam.value,
+      pageSize: 100, 
+      pageNo: pageNo.value,
+    };
+    params['superQueryMatchType'] = 'and';
+    let valueCondition = [{field: valueFieldName, rule: 'in', val: value}]
+    params['superQueryParams'] = encodeURI(JSON.stringify(valueCondition));
+    const data = await queryTableData(props.tableName, params);
+    let records = data.records;
+    //tableTitle.value = data.head.tableTxt;
+    let dataList:any[] = [];
+    if(records && records.length>0){
+      for(let item of records){
+        let temp = {...item}
+        transData(temp);
+        dataList.push(temp);
+      }
+    }
+    return dataList;
+  }
+
+
+  /**
+   * true:数据一致；false:数据不一致
+   * @param arr
+   * @param value
+   */
+  function compareData(arr, value){
+    if(!arr || arr.length==0){
+      return false
+    }
+    let valueArray = value.split(',');
+    if(valueArray.length!=arr.length){
+      return false;
+    }
+    let flag = true;
+    for(let item of arr){
+      let temp = item[props.valueField];
+      if(valueArray.indexOf(temp)<0){
+        flag = false;
+      }
+    }
+    return flag;
+  }
+
+  function formatData(formData){
+    Object.keys(formData).map(k=>{
+      if(formData[k] instanceof Array){
+        formData[k] = formData[k].join(',')
+      }
+    })
+  }
+
+  function initFormData(formData, linkFieldArray, record){
+    if(!record){
+      record = {}
+    }
+    if(linkFieldArray && linkFieldArray.length>0){
+      for(let str of linkFieldArray){
+        let arr = str.split(',')
+        //["表单字段,表字典字段"]
+        let field = arr[0];
+        let dictField = arr[1];
+        if(!formData[field]){
+          let value = record[dictField] || '';
+          formData[field] = [value]
+        }else{
+          formData[field].push(record[dictField])
+        }
+      }
+    }
+  }
+
+
+  // 获取图片地址
+  function getImageSrc(item){
+    if(props.imageField){
+      let url = item[props.imageField];
+      // update-begin--author:liaozhiyang---date:20250517---for：【TV360X-38】关联记录空间，被关联数据优多个图片时，封面图片不展示
+      if(typeof url === 'string') {
+        // 有多张图时默认取第一张
+        url = url.split(',')[0]
+      }
+      // update-end--author:liaozhiyang---date:20250517---for：【TV360X-38】关联记录空间，被关联数据优多个图片时，封面图片不展示
+      return getFileAccessHttpUrl(url);
+    }
+    return ''
+  }
+  const showImage = computed(()=>{
+    if(props.imageField){
+      return true;
+    }else{
+      return false;
+    }
+  });
+  
+  
+  return {
+    pageNo,
+    otherColumns,
+    realShowColumns,
+    selectOptions,
+    reloadTableLinkOptions,
+    textFieldArray,
+    addQueryParams,
+    tableColumns,
+    transData,
+    mainContentField,
+    loadOne,
+    compareData,
+    formatData,
+    initFormData,
+    getImageSrc,
+    showImage,
+    auths
+  }
+}
diff --git a/src/views/super/online/cgform/hooks/aitest/useOnlineTest.ts b/src/views/super/online/cgform/hooks/aitest/useOnlineTest.ts
new file mode 100644
index 0000000..231a852
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/aitest/useOnlineTest.ts
@@ -0,0 +1,69 @@
+import { FormActionType, JCodeEditor } from '/@/components/Form';
+import { ref } from 'vue';
+
+export function useOnlineTest(data, methods, form: Nullable<FormActionType>) {
+  // Online单元测试开关
+  const aiTestMode = ref(false);
+  const aiTestTable = ref([]);
+  const aiTableList = ref([]);
+
+  function initVirtualData() {
+  }
+
+  // 自定义按钮
+  function genButtons(code) {
+  }
+
+  // 生成java增强
+  function genEnhanceJavaData(code) {
+  }
+
+  // 生成js增强
+  function genEnhanceJsData(tableName, type, codeEditor: InstanceType<typeof JCodeEditor>) {
+  }
+
+  // 自定义sql增强
+  function genEnhanceSqlData(code, tableName) {
+  }
+
+  /**
+   * 加载配置信息
+   */
+  function setTaleConfig() {
+  }
+
+  function tableJsonGetHelper(pickAfter) {
+    console.log('表的配置信息', JSON.stringify(pickAfter));
+    console.log('---------------------------------------');
+  }
+
+  /**
+   * json 获取小助手
+   * @param fields
+   */
+  function fieldsJsonGetHelper(fields) {
+  }
+
+  function refreshCacheTableName(oldValue, newValue) {
+  }
+
+  function getCacheTableName(name) {
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  return {
+    aiTestMode,
+    aiTestTable,
+    aiTableList,
+    initVirtualData,
+    genButtons,
+    genEnhanceJavaData,
+    genEnhanceJsData,
+    genEnhanceSqlData,
+    setTaleConfig,
+    tableJsonGetHelper,
+    fieldsJsonGetHelper,
+    refreshCacheTableName,
+    getCacheTableName,
+  };
+}
\ No newline at end of file
diff --git a/src/views/super/online/cgform/hooks/auto/useAutoForm.ts b/src/views/super/online/cgform/hooks/auto/useAutoForm.ts
new file mode 100644
index 0000000..af58fea
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useAutoForm.ts
@@ -0,0 +1,1128 @@
+import { ref, watch, reactive, toRaw, nextTick, computed } from 'vue';
+import { FormSchema } from '/@/components/Form';
+import FormSchemaFactory from '../../auto/comp/factory/FormSchemaFactory';
+import IFormSchema from '../../auto/comp/factory/IFormSchema';
+import { JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+import { duplicateCheck } from '/@/views/system/user/user.api';
+import { initDefValueConfig, initSubTableDefValueConfig } from '../../util/FieldDefVal';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { ONL_AUTH_PRE } from '../../types/onlineRender';
+import { pick } from 'lodash-es';
+import { DetailFormSchema } from '../../extend/form/useDetailForm';
+import {useExtendComponent} from './useExtendComponent'
+import componentSetting from '/@/settings/componentSetting';
+import { LABELLENGTH } from '../../util/constant';
+import { useAppInject } from '/@/hooks/web/useAppInject';
+
+export const LINK_DOWN = 'link_down';
+export const LINK_TABLE_FIELD = 'link_table_field';
+export const LINK_TABLE = 'link_table';
+
+export interface OnlSubTab {
+  key: string;
+  properties?: any[];
+  columns?: any[];
+  foreignKey: string;
+  describe: string;
+  relationType: number;
+  requiredFields?: string[];
+  order: number;
+  id?:string;
+}
+/**
+ * 获取实际表单的配置信息
+ */
+export function useFormItems(props, onlineFormRef) {
+  // 添加表单组件-专门给 online 表单用
+  useExtendComponent();
+  
+  // 下拉框等组件需要通过此class作为父级container
+  const modalClass = props.modalClass;
+  // 表单渲染用到的配置
+  const formSchemas = ref<any>([]);
+  // 表名
+  const tableName = ref('');
+  // 编辑页面 数据库原数据
+  const dbData = ref<any>({});
+  // 字段展示状态
+  const fieldDisplayStatus = reactive<any>({});
+  const hasSubTable = ref(false);
+
+  const subTabInfo = ref<OnlSubTab[]>([]);
+  const subDataSource = ref({});
+  const refMap = {};
+  // 联动组件列表
+  const linkDownList = ref<any>([]);
+  /**
+   * 有表单默认值的字段
+   * 表名: [{field, value, type}]
+   */
+  const defaultValueFields = reactive<any>({});
+  // 表单栅格
+  const baseColProps = ref<any>('');
+  baseColProps.value = { sm: 24, xs: 24, md: 12, lg: 12, xl: 12, xxl: 12 };
+  // update-begin--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 4 }, md: { span: 4 }, lg: { span: 4 }, xl: { span: 4 }, xxl: { span: 4 } });
+  // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+  const wrapperCol = ref<any>(null);
+  // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+  // update-end--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+  // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+  const labelWidth = ref<any>(6 * 14 + 10);
+  // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+
+  function createFormSchemas(properties: any[], required, checkOnlyFieldValue, onlineExtConfigJson = {}) {
+    //let properties:any[] = result.schema.properties
+    clearObj(defaultValueFields);
+    defaultValueFields[tableName.value] = [];
+    let subInfo: OnlSubTab[] = [];
+    let arr: IFormSchema[] = [];
+    let hideFields: string[] = [];
+    let dataSourceObj = {};
+    let tableLinkInfo:any = {}
+    Object.keys(properties).map((key) => {
+      const item = properties[key];
+      // uiSchema 无用
+      //const uiItem = this.uiSchema[key];// method、formTemplate、url
+      if (item.view == 'tab') {
+        hasSubTable.value = true;
+        defaultValueFields[key] = [];
+        let temp: OnlSubTab = {
+          key,
+          // 这个foreignKey是主表的字段
+          foreignKey: item['foreignKey'],
+          describe: item.describe,
+          relationType: item.relationType,
+          requiredFields: item.required || [],
+          order: item.order,
+          id: item.id
+        };
+        if (item.relationType == 1) {
+          refMap[key] = ref(null);
+          temp['properties'] = item.properties;
+        } else {
+          dealSubProerties(item);
+          refMap[key] = ref<JVxeTableInstance>();
+          temp['columns'] = item.columns;
+          dataSourceObj[key] = [];
+          // TODO 处理子表的新增删除按钮权限
+          //this.handleSubTableButtonAuth(item)
+        }
+        subInfo.push(temp);
+        // 记录子表按钮权限
+        handleSubTableButtonAuth(key, item);
+      } else {
+        initDefValueConfig(key, item, defaultValueFields[tableName.value]);
+        if (item.view === LINK_DOWN) {
+          let array = handleLinkDown(item, key);
+          for (let linkDownItem of array) {
+            // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-314】联动组件添加组件默认值
+            const fItem = linkDownItem.key == key ? item : item.others?.find((item) => item.field === linkDownItem.key);
+            fItem && initDefValueConfig(linkDownItem.key, fItem, defaultValueFields[tableName.value]);
+            // update-end--author:liaozhiyang---date:20240522---for：【TV360X-314】联动组件添加组件默认值
+            fieldDisplayStatus[linkDownItem.key] = true;
+            fieldDisplayStatus[linkDownItem.key + '_load'] = true;
+            // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-75】表单label长度设置，联动组件没生效
+            setFieldExtend(onlineExtConfigJson, linkDownItem);
+            // update-end--author:liaozhiyang---date:20240521---for：【TV360X-75】表单label长度设置，联动组件没生效
+            let temp = FormSchemaFactory.createFormSchema(linkDownItem.key, linkDownItem);
+            // update-begin--author:liaozhiyang---date:20251230---for：【issues/9223】js增强，用loaded方法里加入某个字段隐藏，导致打开窗口时其他已经设置只读字段，恢复成可写
+            fieldDisplayStatus[linkDownItem.key + '_disabled'] = temp.disabled ?? false;
+            // update-end--author:liaozhiyang---date:20251230---for：【issues/9223】js增强，用loaded方法里加入某个字段隐藏，导致打开窗口时其他已经设置只读字段，恢复成可写
+            if (checkOnlyFieldValue) {
+              temp.setOnlyValidateFun(checkOnlyFieldValue);
+            }
+            temp.isRequired(required);
+            temp.setFormRef(onlineFormRef);
+            // 联动控件 只读由第一个控件的只读状态决定
+            temp.handleWidgetAttr(item);
+            let tempIndex = getFieldIndex(arr, linkDownItem.key);
+            if (tempIndex == -1) {
+              arr.push(temp);
+            } else {
+              arr[tempIndex] = temp;
+            }
+          }
+        } else {
+          // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-314】联动组件添加组件默认值
+          initDefValueConfig(key, item, defaultValueFields[tableName.value]);
+          // update-end--author:liaozhiyang---date:20240522---for：【TV360X-314】联动组件添加组件默认值
+          fieldDisplayStatus[key] = true;
+          fieldDisplayStatus[key + '_load'] = true;
+          let tempIndex = getFieldIndex(arr, key);
+          if (tempIndex == -1) {
+            // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+            setFieldExtend(onlineExtConfigJson, item);
+            // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+            let temp = FormSchemaFactory.createFormSchema(key, item);
+            // update-begin--author:liaozhiyang---date:20251230---for：【issues/9223】js增强，用loaded方法里加入某个字段隐藏，导致打开窗口时其他已经设置只读字段，恢复成可写
+            fieldDisplayStatus[key + '_disabled'] = temp.disabled ?? false;
+            // update-end--author:liaozhiyang---date:20251230---for：【issues/9223】js增强，用loaded方法里加入某个字段隐藏，导致打开窗口时其他已经设置只读字段，恢复成可写
+            if (checkOnlyFieldValue) {
+              temp.setOnlyValidateFun(checkOnlyFieldValue);
+            }
+            temp.isRequired(required);
+            temp.setFormRef(onlineFormRef);
+            arr.push(temp);
+            hideFields.push(...temp.getRelatedHideFields());
+            
+            //update-begin-author:taoyan date:2022-8-5 for: 获取他表字段信息
+            //如果是他表字段获取关联信息
+            if(item.view === LINK_TABLE_FIELD){
+              let tempInfo = temp.getLinkFieldInfo();
+              if(tempInfo){
+                if(tableLinkInfo[tempInfo[0]]){
+                  let tableLinkInfoEle:string[] = tableLinkInfo[tempInfo[0]];
+                  tableLinkInfoEle.push(tempInfo[1]);
+                }else{
+                  tableLinkInfo[tempInfo[0]] = [tempInfo[1]]
+                }
+              }
+            }
+            //update-end-author:taoyan date:2022-8-5 for: 获取他表字段信息
+            
+          }
+        }
+        //fp.checkOnlyMethod = this.$Jdebounce(this.checkOnlyFieldValue, 1000);
+      }
+    });
+    // 1.对arr排序
+    arr.sort(function (a, b) {
+      return a.order - b.order;
+    });
+    // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+    const oneRowData: any = [];
+    (() => {
+      for (let i = 0, len = arr.length; i < len; i++) {
+        const item = arr[i];
+        if (getFieldExtend(item?._data, 'isOneRow')) {
+          oneRowData.push(arr.splice(i, 1)[0]);
+          i--;
+          len--;
+        }
+      }
+    })();
+    arr = [...arr,...oneRowData];
+    // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+    // 2.获取真实表单配置
+    let formSchemaArray: FormSchema[] = [];
+    formSchemaArray.push(FormSchemaFactory.createIdField());
+    let longestLabelComponet: any = null;
+    let isComponetRequired = false;
+    for (let a of arr) {
+      // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      const curLabelLen = a.label.length;
+      if (longestLabelComponet) {
+        if (longestLabelComponet.label.length < curLabelLen) {
+          longestLabelComponet = a;
+        } else if(longestLabelComponet.label.length === curLabelLen) {
+          // 文字labael相同，则判断是否必填。（必填*占13像素）
+          if(!longestLabelComponet.required && a.required) {
+            longestLabelComponet = a;
+          }
+        }
+      } else {
+        longestLabelComponet = a;
+      }
+      // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      // update-begin--author:liaozhiyang---date:20230105---for：【TV360X-209】表单label长度设置了且字段有必填宽度计算不正确
+      if (a.required) {
+        isComponetRequired = true;
+      }
+      // update-end--author:liaozhiyang---date:20230105---for：【TV360X-209】表单label长度设置了且字段有必填宽度计算不正确
+      //update-begin-author:taoyan date:2022-8-5 for: 将他表字段的配置信息 添加至 关联字段上
+      //关联记录字段设置新的配置
+      if(a['view'] && a['view']==LINK_TABLE){
+        if(tableLinkInfo[a.field]){
+          a.setOtherInfo(tableLinkInfo[a.field])
+        }
+      }
+      //update-end-author:taoyan date:2022-8-5 for: 将他表字段的配置信息 添加至 关联字段上
+      //设置hidden的字段
+      if (hideFields.indexOf(a.field) >= 0) {
+        a.isHidden();
+      }
+      // popModal-下拉框的父级容器需要自定义，否则会被遮挡
+      if(modalClass){
+        a.setCustomPopContainer(modalClass)
+      }
+      // update-begin--author:liaozhiyang---date:20231222---for：【QQYUN-7515】online 下拉字典、单选组件options跟随数据库类型
+      const result = a.getFormItemSchema();
+      if (result.component === 'JDictSelectTag' && a?._data?.type === 'number') {
+        result.componentProps.stringToNumber = true;
+      }
+      // update-end-author:liaozhiyang---date:20231222---for：【QQYUN-7515】online 下拉字典、单选组件options跟随数据库类型
+      // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      if (props.formTemplate > 1 && getFieldExtend(a?._data, 'isOneRow')) {
+        result.colProps = { span: 24 };
+        const colGrid = getFormItemColProps();
+        const { labelCol = {} } = colGrid;
+        const itemLabelCol = {};
+        const itemWrapperCol = {};
+        Object.keys(labelCol).forEach((key) => {
+          if (['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key)) {
+            const span = labelCol[key].span;
+            const value = Math.round(span / props.formTemplate);
+            itemLabelCol[key] = { span: value };
+            itemWrapperCol[key] = { span: 24 - value - 1 };
+          }
+        });
+        result.itemProps = { labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
+      }
+      // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+      // update-begin--author:liaozhiyang---date:20251011---for：【issues/8791】js增强popup弹框的onlChange()没生效
+      if (result.component === 'JPopup') {
+         result.changeEvent = 'popUpChange';
+      }
+      // update-end--author:liaozhiyang---date:20251011---for：【issues/8791】js增强popup弹框的onlChange()没生效
+      formSchemaArray.push(result);
+    }
+    formSchemas.value = formSchemaArray;
+    //return formSchemaArray;
+    //update-begin-author:taoyan date:2022-5-31 for: VUEN-1147 主子表 子表顺序并不是按照设置顺序排列
+    subInfo.sort(function (a, b) {
+      return a.order - b.order;
+    });
+    //update-end-author:taoyan date:2022-5-31 for: VUEN-1147 主子表 子表顺序并不是按照设置顺序排列
+    // update-begin--author:liaozhiyang---date:20231009---for：【issues/5371】一对多子表popup增加多选
+    subInfo.forEach((sItem) => {
+      const columns: any = sItem.columns;
+      if(sItem.columns){
+        columns.forEach((cItem) => {
+          // update-begin--author:liaozhiyang---date:20240529---for：【TV360X-452】一对多子表popup默认多选没生效
+          if (sItem.relationType == 0) {
+            if (['popup', 'popup_dict'].includes(cItem.type)) {
+              // 只有1对多才需要处理，1对1或者单表直接组件中处理了。
+              let popupMulti = true;
+              if (cItem.fieldExtendJson) {
+                const fieldExtendJson = JSON.parse(cItem.fieldExtendJson);
+                popupMulti = fieldExtendJson.popupMulti;
+              }
+              const props = cItem.props ?? {};
+              cItem.props = { ...props, multi: popupMulti };
+            }
+          }
+          // update-end--author:liaozhiyang---date:20240529---for：【TV360X-452】一对多子表popup默认多选没生效
+          // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+          if (cItem.type === 'date' && cItem.fieldExtendJson) {
+            const fieldExtendJson = JSON.parse(cItem.fieldExtendJson);
+            if (fieldExtendJson.picker && fieldExtendJson.picker != 'default') {
+              Object.assign(cItem, { picker: fieldExtendJson.picker });
+            }
+          }
+          // update-end--author:liaozhiyang---date:20240509---for：【QQYUN-9205】一对多(jVxetable组件date)支持年，年月，年度度，年周
+        });
+      }
+    });
+    // update-end--author:liaozhiyang---date:20231009---for：【issues/5371】一对多子表popup增加多选
+    subTabInfo.value = subInfo;
+    subDataSource.value = dataSourceObj;
+    // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+    if (onlineExtConfigJson.formLabelLengthShow && onlineExtConfigJson.formLabelLength) {
+      // 14是文字size，24是间隙
+      labelWidth.value = onlineExtConfigJson.formLabelLength * 14 + 10 + (+`${isComponetRequired ? 13 : 0}`);
+      wrapperCol.value = null;
+    } else {
+      // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      // num这个值是label没截取之前真实长度，如果大于初始值则还是得使用初始值
+      if (longestLabelComponet) {
+        let realLabelLen = longestLabelComponet.label.length;
+        realLabelLen = realLabelLen > LABELLENGTH ? LABELLENGTH : realLabelLen;
+        const required = longestLabelComponet.required;
+        const num = realLabelLen * 14 + 10 + (+`${required ? 13 : 0}`);
+        labelWidth.value = num;
+      }
+      // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+    }
+    // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+  }
+  
+  watch(
+    fieldDisplayStatus,
+    (val) => {
+      let ref = onlineFormRef.value;
+      let arr: any[] = [];
+      let map = toRaw(val);
+      Object.keys(map).map((k) => {
+        if (k.endsWith('_load')) {
+        } else {
+          let item = {
+            field: k,
+            show: map[k],
+          };
+          let loadKey = k + '_load';
+          if (map.hasOwnProperty(loadKey)) {
+            item['ifShow'] = map[loadKey];
+          }
+          // update-begin--author:liaozhiyang---date:20240321---for：【QQYUN-8537】js增强，控制表单字段的禁用
+          let disabledKey = k + '_disabled';
+          if (map.hasOwnProperty(disabledKey)) {
+            item['dynamicDisabled'] = () => {
+              return map[disabledKey];
+            };
+          }
+          // update-end--author:liaozhiyang---date:20240321---for：【QQYUN-8537】js增强，控制表单字段的禁用
+          arr.push(item);
+        }
+      });
+      if (ref) {
+        ref.updateSchema(arr);
+      }
+    },
+    { immediate: false }
+  );
+
+  function dealSubProerties(subInfo) {
+    useOnlineVxeTableColumns(subInfo, (column)=>{
+      initSubTableDefValueConfig(column, defaultValueFields[subInfo.key]);
+    })
+  }
+  /*
+   2024-03-06
+   liaozhiyang
+   表单中的扩展参数的labelLength设置为onlineExtConfigJson.formLabelLength
+  */
+  function setFieldExtend(onlineExtConfigJson, data, key = 'labelLength') {
+    const { formLabelLengthShow, formLabelLength } = onlineExtConfigJson;
+    if (formLabelLengthShow && formLabelLength) {
+      let fieldExtendJson = data?.fieldExtendJson;
+      if (fieldExtendJson) {
+        fieldExtendJson = JSON.parse(fieldExtendJson);
+        fieldExtendJson[key] = formLabelLength;
+      } else {
+        fieldExtendJson = { [key]: formLabelLength };
+      }
+      data.fieldExtendJson = JSON.stringify(fieldExtendJson);
+    }
+  }
+
+  /*
+   2024-01-05
+   liaozhiyang
+   获取扩展参数
+  */
+  function getFieldExtend(data: any = {}, key: string) {
+    let fieldExtendJson = data?.fieldExtendJson;
+    if (fieldExtendJson) {
+      fieldExtendJson = JSON.parse(fieldExtendJson);
+      return fieldExtendJson[key];
+    }
+  }
+
+  //监听主表表单的formTemplate
+  watch(
+    () => props.formTemplate,
+    () => {
+      //重新渲染表单
+      const result = getFormItemColProps()
+      baseColProps.value = result.baseColProps;
+      labelCol.value = result.labelCol;
+      wrapperCol.value = result.wrapperCol;
+    },
+    { immediate: true }
+  );
+
+  function getFormItemColProps() {
+    let temp = props.formTemplate;
+    // update-begin--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+    // update-begin--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+    // const form: any = componentSetting.form || {};
+    // const { labelCol = {} } = form;
+    // const { wrapperCol = {} } = form;
+    // update-end--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+    if (temp == 2) {
+      // update-begin--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+      return {
+        baseColProps: { sm: 24, xs: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
+        // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        // labelCol: { xs: { span: 24 }, sm: { span: 4 }, md: { span: 4 }, lg: { span: 4 }, xl: { span: 4 }, xxl: { span: 4 } },
+        // wrapperCol: { xs: { span: 24 }, sm: { span: 19 }, md: { span: 19 }, lg: { span: 19 }, xl: { span: 19 }, xxl: { span: 19 } },
+        // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      };
+      // update-end--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+    } else if (temp == 3) {
+      return {
+        baseColProps: { sm: 24, xs: 24, md: 8, lg: 8, xl: 8, xxl: 8 },
+        // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        // labelCol: { xs: { span: 24 }, sm: { span: 6 }, md: { span: 6 }, lg: { span: 6 }, xl: { span: 6 }, xxl: { span: 6 } },
+        // wrapperCol: { xs: { span: 24 }, sm: { span: 17 }, md: { span: 17 }, lg: { span: 17 }, xxl: { span: 17 } },
+        // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      };
+    } else if (temp == 4) {
+      return {
+        baseColProps: { sm: 24, xs: 24, md: 6, lg: 6, xl: 6, xxl: 6 },
+        // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        // labelCol: { xs: { span: 24 }, sm: { span: 4 }, md: { span: 4 }, lg: { span: 4 }, xl: { span: 4 }, xxl: { span: 4 } },
+        // wrapperCol: { xs: { span: 24 }, sm: { span: 18 }, md: { span: 18 }, lg: { span: 18 }, xl: { span: 18 }, xxl: { span: 18 } },
+        // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      };
+    } else {
+      // update-begin--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+      return {
+        baseColProps: { sm: 24, xs: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+        // update-begin--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+        // labelCol: { xs: { span: 24 }, sm: { span: 4 }, md: { span: 4 }, lg: { span: 4 }, xl: { span: 4 }, xxl: { span: 4 } },
+        // wrapperCol:{ xs: { span: 24 }, sm: { span: 18 }, md: { span: 18 }, lg: { span: 18 }, xl: { span: 18 }, xxl: { span: 18 } },
+        // update-end--author:liaozhiyang---date:20230105---for：【QQYUN-7632】 label栅格改成labelwidth固宽
+      };
+      // update-end--author:liaozhiyang---date:20240311---for：【QQYUN-8440】小屏幕居中(跟vue2栅格同步)
+    }
+    // update-end--author:liaozhiyang---date:20240105---for：【QQYUN-7499】多列风格富文本、markdown增加独占一行功能
+  }
+  // 唯一校验
+  function checkOnlyFieldValue(rule, value) {
+    return new Promise((resolve) => {
+      if (!value) {
+        resolve('');
+      }
+      //对于视图 需要将表名后的$+数字 取掉
+      let realTableName = tableName.value.replace(/\$\d+/, '');
+      let param = {
+        tableName: realTableName,
+        fieldName: rule.field,
+        fieldVal: value,
+      };
+      let formData: any = dbData.value;
+      if (formData.id) {
+        param['dataId'] = formData.id;
+      }
+      //console.log("唯一校验---》",param)
+      duplicateCheck(param)
+        .then((res) => {
+          if (res.success) {
+            resolve('');
+          } else {
+            resolve(res.message);
+          }
+        })
+        .catch((msg) => {
+          resolve(msg);
+        });
+    });
+  }
+
+  /**
+   * 有些数据是数组格式的 强转成字符串
+   */
+  function changeDataIfArray2String(data) {
+    Object.keys(data).map((k) => {
+      if (data[k]) {
+        if (data[k] instanceof Array) {
+          data[k] = data[k].join(',');
+        }
+      }
+    });
+    return data;
+  }
+
+  return {
+    formSchemas,
+    defaultValueFields,
+    tableName,
+    dbData,
+    checkOnlyFieldValue,
+    createFormSchemas,
+    fieldDisplayStatus,
+    subTabInfo,
+    hasSubTable,
+    subDataSource,
+    baseColProps,
+    changeDataIfArray2String,
+    linkDownList,
+    refMap: refMap,
+    labelCol,
+    wrapperCol,
+    labelWidth,
+  };
+}
+
+/**
+ * 处理online子表 jvxeTable的列配置信息
+ */
+export function useOnlineVxeTableColumns(subInfo, callback?){
+  // 新旧jvxetable 列的类型不一致
+  const vxeTypeMap = {
+    inputNumber: 'input-number',
+    sel_depart: 'depart-select',
+    sel_user: 'user-select',
+    list_multi: 'select-multiple',
+    input_pop: 'textarea',
+    sel_search: 'select-search',
+    'select-dict-search': 'selectDictSearch',
+  };
+  
+  //一对多子表如果为单选按钮改为下拉框
+  subInfo.columns.forEach((column) => {
+    if (column.type === 'radio') {
+      column.type = 'select';
+    } else if (vxeTypeMap[column.type]) {
+      column.type = vxeTypeMap[column.type];
+    } else if (column.type === 'popup') {
+      handleSubPopup(column);
+    } else if (column.type === 'link_table') {
+      handleSubLinkTable(column, subInfo.columns);
+    } else if (column.type === 'link_table_field') {
+      // update-begin--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+      column.type = 'input';
+      column.flag = 'link-table-field';
+      column.props = {
+        ...(column.props ?? {}),
+        disabled: true,
+      };
+      // update-end--author:liaozhiyang---date:20260317---for:【QQYUN-9441】online一对多加上关联记录和他表字段
+    }
+    // 部门树选择组件需要设置 父子节点不关联
+    if (column.type === 'depart-select') {
+      column['checkStrictly'] = true;
+    }
+    // 子表用户选择 控制是否多选
+    if (column.type === 'user-select') {
+      handleSubUserSelect(column);
+    }
+    if (column.type === 'pca') {
+      column.width = '230px';
+    }
+    // update-begin--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+    // 自定义树
+    if (column.type === 'sel_tree') {
+      const { dictTable, dictCode, dictText } = column;
+      const [id, pid, name, child] = dictText.split(',');
+      column.type = 'sel-tree';
+      column.dict = `${dictTable},${name},${id}`;
+      column.pidField = pid;
+      column.pidValue = dictCode ?? '0';
+      column.hasChildField = child;
+      delete column.dictText;
+      delete column.dictCode;
+      delete column.dictTable;
+    }
+    // 分类字典书
+    if (column.type === 'cat_tree') {
+       const { dictCode } = column;
+      column.type = 'cat-tree';
+      column.pcode = dictCode ?? '0';
+      delete column.dictCode;
+    }
+    // update-end--author:liaozhiyang---date:20260413---for:【issues/7633】online子表支持分类字典树，自定义树
+    //update-begin-author:taoyan date:2022-4-24 for: VUEN-855 对多子表 文件、图片右侧少个边框
+    if ((column.width == 120 || column.width == '120px') && (column.type == 'image' || column.type == 'file')) {
+      column.width = '130px';
+    }
+    //如果没有宽度 默认设置一个宽度
+    if (!column.width) {
+      column.width = '200px';
+    }
+    if(callback){
+      callback(column)
+    }
+    //update-end-author:taoyan date:2022-4-24 for: VUEN-855 对多子表 文件、图片右侧少个边框
+  });
+
+  // 子表popup特殊处理
+  function handleSubPopup(column) {
+    let { destFields, orgFields } = column;
+    let fieldConfig: any[] = [];
+    if (!destFields || destFields.length == 0) {
+    } else {
+      let arr1 = destFields.split(',');
+      let arr2 = orgFields.split(',');
+      for (let i = 0; i < arr1.length; i++) {
+        fieldConfig.push({
+          target: arr1[i],
+          source: arr2[i],
+        });
+      }
+    }
+    column.fieldConfig = fieldConfig;
+  }
+
+  // 子表 用户选择特殊处理
+  function handleSubUserSelect(column) {
+    let str = column.fieldExtendJson;
+    let isRadioSelection = false;
+    if (str) {
+      try {
+        let json = JSON.parse(str);
+        if (json.multiSelect === false) {
+          isRadioSelection = true;
+        }
+      } catch (e) {
+        console.log('子表获取用户组件的扩展配置出现错误', e);
+      }
+    }
+    column.isRadioSelection = isRadioSelection;
+  }
+  /**
+   * 20260317
+   * 【QQYUN-9441】online一对多加上关联记录和他表字段
+   * liaozhiang
+   * */
+  function handleSubLinkTable(column, columns) {
+    column.type = 'link-table';
+    column.tableName = column.dictTable || '';
+    column.valueField = column.dictCode || 'id';
+    column.textField = column.dictText || '';
+    column.multi = false;
+    column.linkFields = [];
+    columns.forEach(item => {
+      if (item.type === 'link_table_field' && item.dictTable === column.key) {
+        column.linkFields.push(`${item.key},${item.dictText}`);
+      }
+    });
+    delete column.dictTable;
+    delete column.dictCode;
+    delete column.dictText;
+    let str = column.fieldExtendJson;
+    if (str) {
+      try {
+        let json = JSON.parse(str);
+        if (json.multiSelect === true) {
+          column.multi = true;
+        }
+      } catch (e) {
+        console.log('子表获取关联记录组件的扩展配置出现错误', e);
+      }
+    }
+    if (!column.width || column.width === '200px') {
+      column.width = '240px';
+    }
+  }
+  
+}
+
+/***
+ * 表单上下文
+ */
+export function useOnlineFormContext(props) {
+  let that = {};
+  const CONTEXT_DESCRIPTION = {
+      addSubRows: '<m> 一对多子表，新增自定义行',
+      changeOptions: '<m> 改变下拉框选项',
+      clearSubRows: '<m> 清空一对多子表行',
+      clearThenAddRows: '<m> 清空一对多子表行，然后新增自定义行',
+      executeMainFillRule: '<m> 刷新主表的增值规制值',
+      executeSubFillRule: '<m> 刷新子表的增值规制值',
+      getFieldsValue: '<m> 获取表单控件的值',
+      getSubTableInstance: '<m> 获取子表实例',
+      isUpdate: '<p> 判断是否为编辑模式',
+      loading: '<p> 页面加载状态',
+      onlineFormRef: '<p> 当前表单ref对象',
+      refMap: '<p> 子表ref对象map',
+      setFieldsValue: '<m> 设置表单控件的值',
+      sh: '<p> 表单控件的显示隐藏状态',
+      subActiveKey: '<p> 子表激活tab，对应子表表名',
+      subFormHeight: '<p> 一对一子表表单高度',
+      submitFlowFlag: '<p> 是否提交流程状态',
+      subTableHeight: '<p> 一对多子表表格高度',
+      tableName: '<p> 当前表名',
+      triggleChangeValues: '<m> 修改多个表单值',
+      triggleChangeValue: '<m> 修改表单值',
+      updateSchema: '<m> 修改表单控件配置',
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+      changeSubTableOptions: '<m> 改变一对多子表下拉框选项',
+      changeSubFormbleOptions: '<m> 改变一对一子表下拉框选项',
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8350】js增强根据主表限制子表options
+      // update-begin--author:liaozhiyang---date:20240321---for：【QQYUN-5806】js增强改变下拉搜索options
+      changeRemoteOptions:'<m> 改变远程下拉框选项',
+     // update-end--author:liaozhiyang---date:20240321---for：【QQYUN-5806】js增强改变下拉搜索options
+     // update-begin--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+     submitFormAndFlow: '<m> 提交表单且发起流程',
+    // update-end--author:liaozhiyang---date:20240705---for：【TV360X-1754】js增强-提交表单并且发起流程
+  };
+  const onlineFormContext = new Proxy(CONTEXT_DESCRIPTION, {
+    get(_target: any, prop: string): any {
+      return Reflect.get(that, prop);
+    },
+  });
+
+  function addObject2Context(prop, object) {
+    that[prop] = object;
+  }
+
+  function resetContext(context) {
+    Object.keys(context).map((k) => {
+      that[k] = context[k];
+    });
+  }
+  addObject2Context('$nextTick', nextTick);
+  addObject2Context('addObject2Context', addObject2Context);
+
+  // 自定义按钮
+  const createBIButtonCfg = (btnKey, defBtn) => computed(() => {
+    const {buttonSwitch} = props
+    const cfg = {
+      enabled: true,
+      buttonIcon: defBtn[0],
+      buttonName: defBtn[1],
+    }
+    if (buttonSwitch?.[btnKey] === false) {
+      cfg.enabled = false
+      return cfg
+    }
+    const {cgBIBtnMap} = props
+    return cgBIBtnMap?.[btnKey] ? cgBIBtnMap[btnKey] : cfg
+  })
+
+  const getSubAddBtnCfg = createBIButtonCfg('form_sub_add', ['ant-design:plus-outlined', '新增'])
+  const getSubRemoveBtnCfg = createBIButtonCfg('form_sub_batch_delete', ['ant-design:minus-outlined', '删除'])
+  const getSubOpenAddBtnCfg = createBIButtonCfg('form_sub_open_add', ['ant-design:expand-alt-outlined', '新增'])
+  const getSubOpenEditBtnCfg = createBIButtonCfg('form_sub_open_edit', ['ant-design:form-outlined', ''])
+
+  return {
+    onlineFormContext,
+    addObject2Context,
+    resetContext,
+
+    getSubAddBtnCfg,
+    getSubRemoveBtnCfg,
+    getSubOpenAddBtnCfg,
+    getSubOpenEditBtnCfg,
+  };
+}
+
+/**
+ * 找联动组件
+ * @param properties
+ */
+export function handleLinkDown(item, field) {
+  const {
+    config: { table, key, txt, linkField, idField, pidField, condition },
+    others,
+    order,
+    title,
+  } = item;
+  let commonProp = {
+    dictTable: table,
+    dictText: txt,
+    dictCode: key,
+    pidField: pidField,
+    idField: idField,
+    view: LINK_DOWN,
+    type: item.type,
+  };
+  let array: any = [];
+  let main = {
+    key: field,
+    title,
+    order,
+    condition,
+    origin: true,
+    ...commonProp,
+  };
+
+  if (linkField && linkField.length > 0) {
+    let fields = linkField.split(',');
+    main['next'] = fields[0];
+    for (let i = 0; i < fields.length; i++) {
+      for (let o of others) {
+        if (o.field == fields[i]) {
+          let temp = {
+            key: o.field,
+            title: o.title,
+            order: o.order,
+            origin: false,
+            ...commonProp,
+          };
+          if (i + 1 < fields.length) {
+            temp['next'] = fields[i + 1];
+          }
+          array.push(temp);
+        }
+      }
+    }
+  }
+  array.push(main);
+  //let ls = linkDownList.value
+  // ls.push(...array)
+  // linkDownList.value = ls;
+  return array;
+}
+
+/**
+ * 获取 字段的索引
+ * @param arr
+ * @param key
+ */
+export function getFieldIndex(arr: IFormSchema[], key: string) {
+  let index = -1;
+  for (let i = 0; i < arr.length; i++) {
+    let item = arr[i];
+    if (item.field === key) {
+      index = i;
+      break;
+    }
+  }
+  return index;
+}
+
+/**
+ * 轮询获取 ref 对象的值，获取为true或是真实存在 就执行下一步逻辑，可用于判断状态或组件的加载是否完成
+ * @param componentRef
+ */
+export function getRefPromise(componentRef) {
+  return new Promise((resolve) => {
+    (function next() {
+      let ref = componentRef.value;
+      if (ref) {
+        resolve(ref);
+      } else {
+        setTimeout(() => {
+          next();
+        }, 100);
+      }
+    })();
+  });
+}
+
+function clearObj(obj) {
+  Object.keys(obj).map((k) => {
+    delete obj[k];
+  });
+}
+
+//update-begin-author:taoyan date:2022-6-1 for:  VUEN-1162 子表按钮没控制
+/**
+ * 记录子表按钮权限-隐藏的按钮编码
+ */
+const permissionStore = usePermissionStore();
+function handleSubTableButtonAuth(tableName, item) {
+  let arr = item.hideButtons;
+  let code = ONL_AUTH_PRE + tableName + ':';
+  if (!arr) {
+    arr = [];
+  }
+  permissionStore.setOnlineSubTableAuth(code, arr);
+}
+//update-end-author:taoyan date:2022-6-1 for:  VUEN-1162 子表按钮没控制
+
+
+
+/**
+ * 获取 DetailFormSchema[online用]
+ */
+export function getDetailFormSchemas(props) {
+  const detailFormSchemas = ref<DetailFormSchema[]>([]);
+  const refMap = {};
+  const showStatus = reactive({
+    
+  });
+  const hasSubTable = ref(false);
+  const subTabInfo = ref<OnlSubTab[]>([]);
+  const subDataSource = ref({});
+  const { getIsMobile } = useAppInject();
+  const formSpan = computed(() => {
+    let temp = props.formTemplate;
+    // update-begin--author:liaozhiyang---date:20240522---for：【TV360X-82】详情页移动端只显示一列
+    if (getIsMobile.value) {
+      return 24;
+    }
+    // update-end--author:liaozhiyang---date:20240522---for：【TV360X-82】详情页移动端只显示一列
+    if (temp == '2') {
+      return 12;
+    } else if (temp == '3') {
+      return 8;
+    } else if (temp == '4') {
+      return 6;
+    } else {
+      return 24;
+    }
+  });
+
+  function createFormSchemas(properties: any[]) {
+    //let properties:any[] = result.schema.properties
+    let subInfo: OnlSubTab[] = [];
+    console.log('111', properties);
+    let arr: DetailFormSchema[] = [];
+    let dataSourceObj = {};
+    // update-begin--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+    const tableLinkInfo: any = {};
+    // update-end--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+    Object.keys(properties).map((key) => {
+      const item = properties[key];
+      // uiSchema 无用
+      //const uiItem = this.uiSchema[key];// method、formTemplate、url
+      if (item.view == 'tab') {
+        hasSubTable.value = true;
+        let temp: OnlSubTab = {
+          key,
+          // 这个foreignKey是主表的字段
+          foreignKey: item['foreignKey'],
+          describe: item.describe,
+          relationType: item.relationType,
+          requiredFields: item.required || [],
+          order: item.order,
+        };
+        if (item.relationType == 1) {
+          refMap[key] = ref(null);
+          temp['properties'] = item.properties;
+        } else {
+          dealSubProerties(item);
+          refMap[key] = ref<JVxeTableInstance>();
+          temp['columns'] = item.columns;
+          dataSourceObj[key] = [];
+          showStatus[key] = false;
+        }
+        subInfo.push(temp);
+      } else {
+        if (item.view === LINK_DOWN) {
+          let array = handleLinkDown(item, key);
+          for (let linkDownItem of array) {
+            let tempIndex = getFieldIndex(arr, linkDownItem.key);
+            let temp = {
+              field: linkDownItem.key,
+              label: linkDownItem.title,
+              view: linkDownItem.view,
+              order: linkDownItem.order,
+              dictTable: linkDownItem.dictTable,
+              linkField: linkDownItem.linkField||'',
+            };
+            if (tempIndex == -1) {
+              arr.push(temp);
+            } else {
+              arr[tempIndex] = temp;
+            }
+          }
+        } else if (item.view == 'hidden') {
+          //隐藏的不处理
+        } else {
+          let tempIndex = getFieldIndex(arr, key);
+          if (tempIndex == -1) {
+            let temp = Object.assign(
+              {
+                field: key,
+                label: item.title,
+              },
+              pick(item, ['view', 'order', 'fieldExtendJson', 'dictTable', 'dictText', 'dictCode', 'dict'])
+            );
+            if (item.view == 'file') {
+              temp['span'] = 24;
+              temp['isFile'] = true;
+            }
+            if (item.view == 'image') {
+              temp['span'] = 24;
+              temp['isImage'] = true;
+            }
+            if (item.view == 'link_table') {
+              // 判断是不是卡片
+              if(item.fieldExtendJson){
+                try{
+                  let json = JSON.parse(item.fieldExtendJson);
+                  if(json.showType!='select'){
+                   // temp['span'] = 24;
+                    temp['isCard'] = true;
+                  }
+                  if(json.multiSelect==true){
+                    temp['multi'] = true;
+                  }
+                }catch (e) {
+                  console.error('解析json字符串出错', item.fieldExtendJson)
+                }
+              }
+            }
+            if (item.view == 'umeditor' || item.view == 'markdown') {
+              temp['isHtml'] = true;
+              temp['span'] = 24;
+            }
+            arr.push(temp);
+            // update-begin--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+            if (item.view === 'link_table_field') {
+              if (!tableLinkInfo[item.dictTable]) {
+                tableLinkInfo[item.dictTable] = [];
+              }
+              tableLinkInfo[item.dictTable].push(`${key},${item.dictText}`);
+            }
+            // update-end--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+          }
+        }
+      }
+    });
+    // 1.对arr排序
+    arr.sort(function (a, b) {
+      return a.order - b.order;
+    });
+    // update-begin--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+    arr.forEach((item) => {
+      if (item.view === 'link_table' && tableLinkInfo[item.field]) {
+        item['linkFields'] = tableLinkInfo[item.field];
+      }
+    });
+    // update-end--author:liaozhiyang---date:20260413---for：【QQYUN-14951】一对一他表字段详情没值
+    // 2.对子表排序
+    subInfo.sort(function (a, b) {
+      return a.order - b.order;
+    });
+    subTabInfo.value = subInfo;
+    for (let i = 0; i < arr.length; i++) {
+      let temp = arr[i];
+      if (temp.isFile === true || temp.isImage === true || temp.isHtml === true) {
+        if (i > 0) {
+          let last = arr[i - 1];
+          let span = last.span || formSpan.value;
+          last.span = span;
+        }
+      }
+    }
+    detailFormSchemas.value = arr;
+    subDataSource.value = dataSourceObj;
+    console.log('adadad', arr);
+  }
+
+  function dealSubProerties(subInfo) {
+    useOnlineVxeTableColumns(subInfo);
+  }
+
+  function getFieldIndex(arr: DetailFormSchema[], key: string) {
+    let index = -1;
+    for (let i = 0; i < arr.length; i++) {
+      let item = arr[i];
+      if (item.field === key) {
+        index = i;
+        break;
+      }
+    }
+    return index;
+  }
+
+  function handleLinkDown(item, field){
+    let all:any[] = []
+    const {
+      config: { table, key, txt, linkField },
+      order,
+      title,
+      others,
+    } = item;
+    let obj = {
+      table, key, txt
+    }
+    let temp = {
+      view: 'link_down',
+      order,
+      title,
+      dictTable: JSON.stringify(obj)
+    };
+    all.push(Object.assign({}, {linkField, key: field}, temp));
+    if(linkField){
+      let arr = linkField.split(',');
+      for(let a of arr){
+        let title = ''
+        for(let o of others){
+          if(o.field==a){
+            title = o.title
+          }
+        }
+        all.push(Object.assign({}, {key: a}, temp, {title}));
+      }
+    }
+    return all;
+  }
+  return {
+    detailFormSchemas,
+    hasSubTable,
+    subTabInfo,
+    refMap,
+    showStatus,
+    createFormSchemas,
+    formSpan,
+    subDataSource,
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useAutoFormDetail.ts b/src/views/super/online/cgform/hooks/auto/useAutoFormDetail.ts
new file mode 100644
index 0000000..5194a0c
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useAutoFormDetail.ts
@@ -0,0 +1,34 @@
+
+import { nextTick } from 'vue';
+
+/***
+ * 表单上下文
+ */
+export function useOnlineFormDetailContext() {
+  const that = {};
+  const CONTEXT_DESCRIPTION = {
+    setFieldsValue: '<m> 设置表单控件的值',
+    getFieldsValue: '<m> 获取表单控件的值',
+    sh: '<p> 表单控件的显示隐藏状态',
+    isUpdate: '<p> 判断是否为编辑模式',
+    isDetail: '<p> 判断是否为详情模式',
+  };
+  const onlineFormDetailContext = new Proxy(CONTEXT_DESCRIPTION, {
+    get(_target: any, prop: string): any {
+      return Reflect.get(that, prop);
+    },
+  });
+
+  function addObject2Context(prop, object) {
+    that[prop] = object;
+  }
+
+  function resetContext(context) {
+    Object.keys(context).map((k) => {
+      that[k] = context[k];
+    });
+  }
+  addObject2Context('$nextTick', nextTick);
+  addObject2Context('addObject2Context', addObject2Context);
+  return { onlineFormDetailContext, addObject2Context, resetContext };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useAutoModal.ts b/src/views/super/online/cgform/hooks/auto/useAutoModal.ts
new file mode 100644
index 0000000..242b6f9
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useAutoModal.ts
@@ -0,0 +1,377 @@
+import { useModalInner } from '/@/components/Modal';
+import { computed, nextTick, reactive, ref, unref } from 'vue';
+import { getRefPromise } from '../../hooks/auto/useAutoForm';
+import { defHttp } from '/@/utils/http/axios';
+import {ONL_FORM_TABLE_NAME} from '../../types/onlineRender'
+import { useAppInject } from '/@/hooks/web/useAppInject';
+/**
+ * 创建online表单弹窗用
+ */
+export function useAutoModal(isBpm?: boolean, { emit } = {} as any, callback?:any) {
+  const onlineFormCompRef = ref<any>(null);
+  // 是否隐藏确认按钮
+  const disableSubmit = ref(false);
+  //表单风格 1列 2列 3列 决定了弹框的宽度
+  const formTemplate = ref(1);
+  // 自定义按钮
+  const cgButtonList = ref([]);
+  // js增强
+  //const enhanceJsObject = ref<any>('')
+  // 表单是否渲染完成
+  const formRendered = ref(false);
+  // 表单弹框最小宽度 取决于扩展配置
+  const modalMinWidth = ref(0);
+  // 判断是否是树的表单- 【VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的】
+  const isTreeForm = ref(false);
+  // 如果是树，父id字段对应的字段名-【VUEN-1056 15、严重——online树表单，添加的时候，父亲节点是空的】
+  const pidFieldName = ref('');
+  // VUEN-1105 表单 确定按钮可多次点击，保存多条数据
+  const submitLoading = ref(false);
+  // 是否是修改页面
+  const isUpdate = ref(false);
+  // 是否是单表
+  const single = ref(true);
+  // extConfigJson
+  const extConfigJson = reactive<any>({});
+  // 显示子表- 详情页面modal 也会调用此hook，给详情页面用
+  const showSub = ref(true);
+  const customTitle = ref('')
+  // 表单保存完后是否关闭modal
+  const successThenClose = ref(true);
+  // 提示是否保存
+  const topTipVisible = ref(false)
+  // 弹窗高度控制
+  const { popModalFixedWidth, resetBodyStyle, popBodyStyle } = useFixedHeightModal();
+  // 没有编辑权限: 默认false
+  const FORM_DISABLE_UPDATE = ref(false);
+  // 主题模板类型
+  const themeTemplate = ref('');
+
+  const { getIsMobile } = useAppInject();
+  const modalObject = {
+    handleOpenModal: (_data) => {},
+  };
+
+  //评论区域参数
+  const tableId = ref('')
+  const tableName = ref('')
+  const formDataId = ref('')
+  const enableComment = ref(false);
+  let onlineExtConfig = {}
+
+  //弹框标题
+  const title = computed(() => {
+    let temp = customTitle.value;
+    if(temp){
+      return temp;
+    }
+    if (unref(disableSubmit) === true) {
+      return '详情';
+    }
+    if (unref(isUpdate) === true) {
+      return '编辑';
+    }
+    return '新增';
+  });
+
+  // 弹框显示 触发onlineFormCompRef---show
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    customTitle.value = '';
+    topTipVisible.value = false;
+    if (isBpm === true) {
+      await modalObject.handleOpenModal(data);
+    } else {
+      await handleOpenOnlineModal(data);
+    }
+    // 调整modal宽高
+    resetBodyStyle();
+    if(callback){
+      callback();
+    }
+  });
+
+  /**
+   * 用于控制关联记录的字段 在列表上的弹窗权限，若无编辑权限，只能打开详情页面
+   */
+  const loadItemSuccess = ref(false);
+  async function getFormStatus(){
+    await getRefPromise(loadItemSuccess);
+    return FORM_DISABLE_UPDATE.value;
+  }
+  
+  
+  async function handleOpenOnlineModal(data) {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = data.isUpdate;
+    disableSubmit.value = data.disableSubmit || false;
+    // href跳转的不需要查看子表
+    if(data?.hideSub===true){
+      showSub.value = false;
+    }
+    // 设置标题，支持从传入参数读取
+    if(data?.title){
+      customTitle.value = data.title;
+    }
+    if(data?.record){
+      formDataId.value = data.record.id;
+    }else{
+      formDataId.value = ''
+    }
+    await nextTick(async () => {
+      await getRefPromise(formRendered);
+      
+      //必须等formRendered之后才能调用
+      handleCommentConfig();
+      await onlineFormCompRef.value.show(data?.isUpdate, data?.record, data?.param);
+    });
+  }
+
+  // 渲染完成改变状态
+  function renderSuccess(extConfig) {
+    formRendered.value = true;
+    modalMinWidth.value = extConfig.modalMinWidth;
+    if (extConfig.modelFullscreen == 1) {
+      //如果全屏
+      setModalProps({ defaultFullscreen: true });
+    } else {
+      setModalProps({ defaultFullscreen: false });
+    }
+    onlineExtConfig = extConfig
+    // update-begin--author:liaozhiyang---date:20230327---for：【QQYUN-8644】移动端效果关闭聊天窗口（详情页）
+    if (getIsMobile.value) {
+      onlineExtConfig['commentStatus'] = 0;
+    }
+    // update-end--author:liaozhiyang---date:20230327---for：【QQYUN-8644】移动端效果关闭聊天窗口（详情页）
+  }
+
+  // 评论区域相关配置
+  function handleCommentConfig(){
+    let dataIdValue = formDataId.value;
+    //如果有评论配置 且 编辑/详情页面 才需要开启评论
+    if(onlineExtConfig['commentStatus'] == 1 && dataIdValue){
+      enableComment.value = true;
+      setModalProps({ defaultFullscreen: true });
+    }else{
+      enableComment.value = false;
+    }
+  }
+
+  const singleWidth = 800;
+  const one2ManyWidth = 1100;
+  const modalWidth = computed(() => {
+    // 不同的列数展示不同的宽度
+    let diff = 200 * (formTemplate.value - 1);
+    // 基值加上阈值
+    let width = (!unref(single) ? one2ManyWidth : singleWidth) + diff;
+    // 文本太长时，会遮挡页面【issues/I44F0R】
+    width = calcModalMixWidth(width);
+    let minWidth = modalMinWidth.value;
+    console.log({ minWidth });
+    //判断计算出来的宽度 是不是比扩展配置中的宽度参数小 如果是取扩展配置的参数
+    if (minWidth && width < minWidth) {
+      width = minWidth;
+    }
+    console.log({ width });
+    return width;
+  });
+
+  /** 计算弹窗最小宽度 */
+  function calcModalMixWidth(width) {
+    let minWidth = extConfigJson.modalMinWidth;
+    if (minWidth != null && minWidth !== '') {
+      try {
+        minWidth = Number.parseInt(minWidth);
+        if (width < minWidth) {
+          return minWidth;
+        }
+      } catch {
+        console.warn('error modalMinWidth value: ', minWidth);
+      }
+    }
+    return width;
+  }
+
+  // 自定义按钮 增强触发事件
+  function handleCgButtonClick(optType, buttonCode) {
+    onlineFormCompRef.value.handleCgButtonClick(optType, buttonCode);
+  }
+
+  function handleSubmit() {
+    //update-begin-author:taoyan date:2022-5-25 for:  VUEN-1105 表单 确定按钮可多次点击，保存多条数据
+    submitLoading.value = true;
+    setTimeout(() => {
+      submitLoading.value = false;
+    }, 1500);
+    //update-end-author:taoyan date:2022-5-25 for:  VUEN-1105 表单 确定按钮可多次点击，保存多条数据
+    onlineFormCompRef.value.handleSubmit();
+  }
+
+  function handleCancel() {
+    closeModal();
+  }
+
+  function loadFormItems(id, params={}) {
+    let url = `/online/cgform/api/getFormItem/${id}`;
+    return new Promise((resolve, reject) => {
+      defHttp
+        .get({ url, params }, { isTransformResponse: false })
+        .then((res) => {
+          console.log('表单结果》》modal:', res);
+          if (res.success) {
+            resolve(res.result);
+          } else {
+            reject(res.message);
+          }
+        })
+        .catch(() => {
+          reject();
+        });
+    });
+  }
+
+  async function handleFormConfig(id, params, callBack?, taskId?, currentTableName?) {
+    // -update-begin--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+    let result: any = null;
+    if (taskId && currentTableName) {
+      const url = `/online/cgform/api/getFormItemBytbname/${currentTableName}`;
+      const params = { taskId };
+      result = await defHttp.get({ url, params });
+    } else {
+      result = await loadFormItems(id, params);
+    }
+    // -update-end--author:liaozhiyang---date:20240613---for：【TV360X-1000】流程一对多走流程的接口
+    // modal页面只处理按钮、JS增强、弹框宽度
+    let dataFormTemplate = result.head.formTemplate;
+    formTemplate.value = dataFormTemplate ? Number(dataFormTemplate) : 1;
+    cgButtonList.value = result.cgButtonList;
+    isTreeForm.value = result.head.isTree === 'Y';
+    pidFieldName.value = result.head.treeParentIdField || '';
+    tableId.value = result.head.id;
+    tableName.value = result.head.tableName;
+    themeTemplate.value = result.head.themeTemplate;
+    //enhanceJsObject.value = initCgEnhanceJs(result.enhanceJs)
+    if(result['form_disable_update']===true){
+      FORM_DISABLE_UPDATE.value = true
+    }else{
+      FORM_DISABLE_UPDATE.value = false;
+    }
+    loadItemSuccess.value = true;
+    emit && emit('formConfig', result);
+    // -update-begin--author:liaozhiyang---date:20230823---for：【QQYUN-6305】tab主题一对多--
+    callBack && callBack(result);
+    // -update-end--author:liaozhiyang---date:20230823---for：【QQYUN-6305】tab主题一对多--
+    await nextTick(async () => {
+      let myForm = (await getRefPromise(onlineFormCompRef)) as any;
+      await myForm.createRootProperties(result);
+    });
+  }
+
+  /**
+   * 表单保存完后的事件
+   */
+  function handleSuccess(formData) {
+    // 将表名设置到数据中
+    formData[ONL_FORM_TABLE_NAME] = tableName.value;
+    emit('success', formData);
+    if(successThenClose.value == true){
+      closeModal();
+    }else{
+      // 不关闭弹窗 提示成功
+    }
+    //恢复默认值
+    topTipVisible.value = false;
+    successThenClose.value = true;
+  }
+
+  /**
+   * modal关闭事件
+   */
+  function onCloseEvent(){
+    if(onlineFormCompRef.value){
+      onlineFormCompRef.value.onCloseModal();
+    }
+    // update-begin--author:liaozhiyang---date:20240618---for：【TV360X-1305】打开评论编辑弹窗会全屏，关闭弹窗时把全屏去掉，否者会影响新增弹窗
+    if (isUpdate.value) {
+      const extConfig: any = onlineExtConfig ?? {};
+      if (extConfig.commentStatus == 1) {
+        setModalProps({ defaultFullscreen: false });
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240618---for：【TV360X-1305】打开评论编辑弹窗会全屏，关闭弹窗时把全屏去掉，否者会影响新增弹窗
+  }
+  
+  return {
+    // modal
+    title,
+    modalWidth,
+    registerModal,
+    closeModal,
+    modalObject,
+    onCloseEvent,
+
+    // 自定义按钮
+    cgButtonList,
+    handleCgButtonClick,
+
+    // 提交/关闭按钮
+    disableSubmit,
+    handleSubmit,
+    submitLoading,
+    handleCancel,
+    successThenClose,
+    handleSuccess,
+    topTipVisible,
+
+    //表单
+    handleFormConfig,
+    onlineFormCompRef,
+    formTemplate,
+    isTreeForm,
+    pidFieldName,
+    renderSuccess,
+    formRendered,
+    isUpdate,
+    showSub,
+    themeTemplate,
+
+    // 评论区域参数
+    tableId,
+    tableName,
+    formDataId,
+    enableComment,
+    popBodyStyle,
+    popModalFixedWidth,
+    getFormStatus
+  };
+}
+
+
+/**
+ * 使用固定高度的modal
+ */
+export function useFixedHeightModal() {
+  const minWidth = 800;
+  const popModalFixedWidth = ref(800);
+  let tempWidth = window.innerWidth - 300;
+  if(tempWidth < minWidth){
+    tempWidth = minWidth;
+  }
+  popModalFixedWidth.value = tempWidth;
+
+  // 弹窗高度控制
+  const popBodyStyle = ref({});
+  function resetBodyStyle(){
+    let height = window.innerHeight - 210;
+    popBodyStyle.value = {
+      height: height+'px',
+      overflowY: 'auto'
+    }
+  }
+  
+  return {
+    popModalFixedWidth,
+    popBodyStyle,
+    resetBodyStyle
+  }
+}
+
diff --git a/src/views/super/online/cgform/hooks/auto/useCustomHook.ts b/src/views/super/online/cgform/hooks/auto/useCustomHook.ts
new file mode 100644
index 0000000..ccda281
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useCustomHook.ts
@@ -0,0 +1,110 @@
+import * as vue from 'vue';
+import * as UTIL_CACHE from '/@/utils/cache';
+import * as UTIL_AXIOS from '/@/utils/http/axios';
+import * as HOOK_MESSAGE from '/@/hooks/web/useMessage';
+import { randomString } from '/@/utils/common/compUtils';
+import * as HOOK_USERINFO from '/@/store/modules/user';
+import * as UTIL_AUTH from "/@/utils/auth";
+
+// 在这里定义JS增强里可以使用的内容
+const $exports = {
+  vue,
+  '@': {
+    hooks: {
+      // 调用示例：@/hooks/useMessage
+      useMessage: HOOK_MESSAGE,
+      useUserStore: HOOK_USERINFO
+    },
+    utils: {
+      // 调用示例：@/utils/axios
+      axios: UTIL_AXIOS,
+      cache: UTIL_CACHE,
+      auth: UTIL_AUTH,
+    },
+  },
+};
+
+/**
+ * 用于处理js增强中自定义的hook代码
+ * 增强定义方法：useCustomHook()，建议不要使用双引号
+ * 其他导出对象
+ * @param otherExports
+ */
+export function useCustomHook(otherExports?: Recordable, context?: any) {
+  const assignExports = Object.assign({}, $exports, otherExports);
+
+  /**
+   * 自定义 import 方法
+   * @param path 引用路径
+   */
+  function doImport(path: string) {
+    if (path != null && path != '') {
+      let paths = path.toString().split('/');
+      let result = assignExports[paths[0]];
+      for (let i = 1; i < paths.length; i++) {
+        result = result[paths[i]];
+      }
+      return result;
+    }
+    return null;
+  }
+
+  function doExport() {}
+
+  /**
+   * 执行JS增强代码
+   * @param code 要执行的代码
+   */
+  function executeJsEnhanced(code: string, row?) {
+    // 为了避免方法名冲突，所以使用随机方法名
+    let randomKey = randomString(6);
+    // let importKey = '__import_' + randomKey
+    //let importKey = 'customImport'
+    let exportKey = '__export_' + randomKey;
+    // 替换 import 关键字
+    //code = replaceImportKey(code, importKey)
+    
+    //update-begin-author:taoyan date:2023-5-15 for: issues/516 自定义按钮_hook后的参数row未定义问题（参见#410） #516
+    if(row){
+      const executeCode = `return function (row, customImport, ${exportKey}) {"use strict"; ${code}}`;
+      console.group('executeJsEnhanced');
+      console.log(executeCode);
+      console.groupEnd();
+      const fun = new Function(executeCode)();
+      fun.call(context, row, doImport, doExport);
+    }else{
+      const executeCode = `return function (customImport, ${exportKey}) {"use strict"; ${code}}`;
+      console.group('executeJsEnhanced');
+      console.log(executeCode);
+      console.groupEnd();
+      const fun = new Function(executeCode)();
+      fun.call(context, doImport, doExport);
+    }
+    //update-end-author:taoyan date:2023-5-15 for: issues/516 自定义按钮_hook后的参数row未定义问题（参见#410） #516
+ 
+  }
+
+  /**
+   * 替换 import 关键字
+   * @param code
+   * @param fnKey import 方法的key
+   */
+  /*  function replaceImportKey(code: string, fnKey: string) {
+    let lines = code.split('\n')
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i].trim()
+      if (line.startsWith('import ')) {
+        let regexp = /import (.*) from (.*)/g
+        lines[i] = line.replace(regexp, `const $1 = ${fnKey}($2)`)
+      }
+    }
+    return lines.join('\n')
+  }*/
+
+  return {
+    executeJsEnhanced,
+  };
+}
+
+/**获取函数体的内容作为字符串*/
+export const GET_FUN_BODY_REG = /(?:\/\*[\s\S]*?\*\/|\/\/.*?\r?\n|[^{])+\{([\s\S]*)\}$/;
diff --git a/src/views/super/online/cgform/hooks/auto/useEnhance.ts b/src/views/super/online/cgform/hooks/auto/useEnhance.ts
new file mode 100644
index 0000000..e1e28b0
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useEnhance.ts
@@ -0,0 +1,142 @@
+/**
+ * js增强
+ */
+import { reactive } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { _eval } from '/@/utils';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export function useEnhance(onlineTableContext, isList = true) {
+  let EnhanceJS = reactive<any>({});
+
+  const getAction = (url, params) => {
+    return defHttp.get({ url: url, params }, { isTransformResponse: false });
+  };
+
+  const postAction = (url, params) => {
+    return defHttp.post({ url: url, params }, { isTransformResponse: false });
+  };
+
+  const putAction = (url, params) => {
+    return defHttp.put({ url: url, params }, { isTransformResponse: false });
+  };
+
+  const deleteAction = (url, params) => {
+    return defHttp.delete({ url: url, params }, { isTransformResponse: false });
+  };
+
+  if (isList === true) {
+    onlineTableContext['_getAction'] = getAction;
+    onlineTableContext['_postAction'] = postAction;
+    onlineTableContext['_putAction'] = putAction;
+    onlineTableContext['_deleteAction'] = deleteAction;
+    // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8342】js增强提供useMessage方法
+    onlineTableContext['_useMessage'] = useMessage;
+    // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8342】js增强提供useMessage方法
+  } else {
+    onlineTableContext.addObject2Context('_getAction', getAction);
+    onlineTableContext.addObject2Context('_postAction', postAction);
+    onlineTableContext.addObject2Context('_putAction', putAction);
+    onlineTableContext.addObject2Context('_deleteAction', deleteAction);
+    // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8342】js增强提供useMessage方法
+    onlineTableContext.addObject2Context('_useMessage', useMessage);
+    // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8342】js增强提供useMessage方法
+  }
+
+  /**
+   * 初始化
+   * @param str (res.result.enhanceJs)
+   */
+  function initCgEnhanceJs(str: string) {
+    //console.log("--onlineList-js增强"+isList,str)
+    if (str) {
+      // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-338】js增强代码报错不能影响页面渲染
+      let Obj: any;
+      let result;
+      try {
+        // update-begin--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+        Obj = _eval(str);
+        // update-end--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+        result = new Obj(getAction, postAction, deleteAction);
+        //return new Function(str)(getAction,postAction,deleteAction);
+      } catch (error) {
+        result = {};
+        const { createMessage } = useMessage();
+        createMessage.warning(`js增强代码有语法错误，请检查代码~ ${error}`);
+      }
+      return result;
+      // update-end--author:liaozhiyang---date:20240517---for：【TV360X-338】js增强代码报错不能影响页面渲染
+    } else {
+      return {};
+    }
+  }
+
+  /**
+   * 【】
+   * 触发js增强方法
+   * @param that
+   * @param formData
+   */
+  function triggerJsFun(that, buttonCode) {
+    if (EnhanceJS && EnhanceJS[buttonCode]) {
+      EnhanceJS[buttonCode](that);
+    }
+  }
+
+  /**
+   * 【表单】
+   * 处理js增强 自定义 提交前事件
+   * @param that
+   * @param formData
+   */
+  function customBeforeSubmit(that, formData) {
+    if (EnhanceJS && EnhanceJS['beforeSubmit']) {
+      return EnhanceJS['beforeSubmit'](that, formData);
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  /**
+   * 删除前业务处理
+   * @param that
+   * @param record
+   */
+  function beforeDelete(that, record) {
+    if (EnhanceJS && EnhanceJS['beforeDelete']) {
+      return EnhanceJS['beforeDelete'](that, record);
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  if (isList === true) {
+    if (onlineTableContext) {
+      onlineTableContext['beforeDelete'] = (record) => {
+        const onlEnhanceJS = onlineTableContext['EnhanceJS'];
+        if (onlEnhanceJS && onlEnhanceJS['beforeDelete']) {
+          return onlEnhanceJS['beforeDelete'](onlineTableContext, record);
+        } else {
+          return Promise.resolve();
+        }
+      };
+
+      onlineTableContext['beforeEdit'] = (record) => {
+        const onlEnhanceJS = onlineTableContext['EnhanceJS'];
+        if (onlEnhanceJS && onlEnhanceJS['beforeEdit']) {
+          return onlEnhanceJS['beforeEdit'](onlineTableContext, record);
+        } else {
+          return Promise.resolve();
+        }
+      };
+    }
+  }
+
+  return {
+    EnhanceJS,
+    initCgEnhanceJs,
+    customBeforeSubmit,
+    beforeDelete,
+    triggerJsFun,
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useExtendComponent.ts b/src/views/super/online/cgform/hooks/auto/useExtendComponent.ts
new file mode 100644
index 0000000..fe78b57
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useExtendComponent.ts
@@ -0,0 +1,41 @@
+import {add} from "/@/components/Form/src/componentMap";
+import LinkTableSelect from '../../extend/linkTable/LinkTableSelect.vue';
+import LinkTableCard from '../../extend/linkTable/LinkTableCard.vue';
+import OnlineSelectCascade from '../../auto/comp/OnlineSelectCascade.vue';
+
+const componentKeyMap = {};
+
+/**
+ * 用于往form中添加组件
+ */
+export function useExtendComponent() {
+
+  addComponent('OnlineSelectCascade', OnlineSelectCascade);
+  addComponent('LinkTableSelect', LinkTableSelect);
+  addComponent('LinkTableCard', LinkTableCard);
+
+  /**
+   * 避免重复添加
+   */
+  function addComponent(key, comp) {
+    if(!componentKeyMap[key]){
+      add(key, comp)
+      componentKeyMap[key] = 1;
+    }
+  }
+
+  /**
+   * 关联记录的查询控件不宜用卡片模式 统一使用下拉模式 
+   */
+  function linkTableCard2Select(schema) {
+    if("LinkTableCard"==schema.component){
+      schema.component = 'LinkTableSelect';
+      schema.componentProps.popContainer = 'body';
+    }
+  }
+
+  return {
+    addComponent,
+    linkTableCard2Select
+  }
+}
\ No newline at end of file
diff --git a/src/views/super/online/cgform/hooks/auto/useFormUrl.ts b/src/views/super/online/cgform/hooks/auto/useFormUrl.ts
new file mode 100644
index 0000000..04a671c
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useFormUrl.ts
@@ -0,0 +1,42 @@
+import { ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useUserStore } from '/@/store/modules/user';
+import { message } from 'ant-design-vue';
+
+export function useFormUrl() {
+  const route = useRoute();
+  const token = ref(route.query.token);
+  const createToken = ref('');
+  const userStore = useUserStore();
+  if (unref(token)) {
+    // 校验token是否合法
+  } else {
+    if (userStore.getToken) {
+      // 登录了系统弄，有了token
+      token.value = userStore.getToken;
+    } else {
+      // 既没登录，url也没token
+      getToken();
+    }
+  }
+  // 没有token，通过接口去获取token，再缓存到本地并设置到url上重新渲染
+  function getToken() {
+    const hide = message.loading('获取token中...', 0);
+    setTimeout(() => {
+      createToken.value =
+        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MTAwMTc2NzUsInVzZXJuYW1lIjoiYWRtaW4ifQ.0q5ywkLF144SaqumsSgEXO5ERtqaYp8jqouIUxxhELc';
+
+      setToken();
+      setUrlToken();
+      hide();
+    }, 3e3);
+  }
+  function setToken() {
+    userStore.setToken(createToken.value);
+    // userStore.setTenant(1);
+  }
+  function setUrlToken() {
+    window.location.replace(`${route.fullPath}?token=${createToken.value}`);
+  }
+  return { token };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useListButton.ts b/src/views/super/online/cgform/hooks/auto/useListButton.ts
new file mode 100644
index 0000000..f301cb9
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useListButton.ts
@@ -0,0 +1,717 @@
+import type { Ref } from 'vue';
+import type { ExtConfigType } from '../../types';
+import { computed, reactive, toRaw, ref } from 'vue';
+import { CgFormButton } from '../../types/onlineRender';
+import { pick } from 'lodash-es';
+import { useModal } from '/@/components/Modal';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Modal } from 'ant-design-vue';
+import { filterObj } from '/@/utils/common/compUtils';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { getToken } from '/@/utils/auth';
+import { goJmReportViewPage } from '/@/utils'
+import { Tree } from '../../util/constant';
+
+/**工作流编码前缀*/
+const FLOW_CODE_PRE = 'onl_';
+/**
+ * 负责列表页面按钮及其事件--在initAutoList之后执行,必须先获取按钮信息
+ * - 这个是所有风格都通用的且必须要有的
+ */
+export function useListButton(onlineTableContext, extConfigJson: Ref<ExtConfigType | undefined>, extraParameter = {}) {
+  const buttonStatus = {
+    add: true,
+    addSub: true,
+    // edit = 编辑按钮的code
+    edit: true,
+    // update = 编辑按钮的老code
+    update: true,
+    delete: true,
+    batch_delete: true,
+    import: true,
+    export: true,
+    detail: true,
+    query: true,
+    reset: true,
+    super_query: true,
+    bpm: true,
+    form_confirm: true,
+    // 子表新增
+    form_sub_add: true,
+    // 子表删除
+    form_sub_batch_delete: true,
+    // 子表新增
+    form_sub_open_add: true,
+    // 子表编辑
+    form_sub_open_edit: true,
+    // 生成测试数据
+    aigc_mock_data: true,
+  };
+
+  // 弹框事件
+  const [registerModal, { openModal }] = useModal();
+  const [registerImportModal, { openModal: openImportModal }] = useModal();
+  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
+  const [registerBpmModal, { openModal: openBpmModal }] = useModal();
+  const { createMessage: $message } = useMessage();
+
+  // 按钮相关
+  const buttonSwitch = reactive(buttonStatus);
+  const cgLinkButtonList = reactive<CgFormButton[]>([]);
+  const cgTopButtonList = reactive<CgFormButton[]>([]);
+
+  interface CgBIBtnType extends CgFormButton {
+    enabled: boolean,
+  }
+
+  // Online表单内置按钮列表
+  const cgBIBtnMap = reactive<Record<string, CgBIBtnType>>({});
+
+  // 创建内置按钮配置（用于控制按钮权限）
+  const createBIButtonCfg = (btnKey: string) => computed(() => buttonSwitch[btnKey] === true ? cgBIBtnMap[btnKey] : {enabled: false})
+  // 查询按钮配置
+  const getQueryButtonCfg = createBIButtonCfg('query')
+  // 重置按钮配置
+  const getResetButtonCfg = createBIButtonCfg('reset')
+  // 表单弹窗的确定按钮配置
+  const getFormConfirmButtonCfg = createBIButtonCfg('form_confirm')
+
+  const testDataLoading = ref(false);
+  const testDataBtnShow = ref(true);
+  setTimeout(() => {
+    testDataBtnShow.value = false;
+  }, 4e3);
+  /**
+   * 根据配置获取 button和link
+   */
+  function initButtonList(btnList) {
+    cgLinkButtonList.length = 0;
+    cgTopButtonList.length = 0;
+    if (btnList && btnList.length > 0) {
+      for (let i = 0; i < btnList.length; i++) {
+        let temp = pick(btnList[i], 'buttonCode', 'buttonName', 'buttonStyle', 'optType', 'exp', 'buttonIcon', 'buttonStatus', 'enabled');
+        if (temp.buttonStyle == 'button') {
+          cgTopButtonList.push(temp);
+        } else if (temp.buttonStyle == 'link') {
+          cgLinkButtonList.push(temp);
+        } else if (temp.buttonStyle == 'built-in') {
+          if (temp.buttonIcon) {
+            temp.buttonIcon = 'ant-design:' + temp.buttonIcon;
+          }
+          temp.enabled = temp.buttonStatus === '1'
+          cgBIBtnMap[temp.buttonCode] = temp;
+        }
+      }
+    }
+  }
+
+  /**
+   * 根据配置设置按钮的 显示/隐藏 状态
+   */
+  function initButtonSwitch(hideColumns) {
+    Object.keys(buttonSwitch).forEach((key) => {
+      buttonSwitch[key] = true;
+    });
+    if (hideColumns && hideColumns.length > 0) {
+      Object.keys(buttonSwitch).forEach((key) => {
+        if (hideColumns.indexOf(key) >= 0) {
+          buttonSwitch[key] = false;
+        }
+      });
+    }
+  }
+
+  // 增加事件
+  function handleAdd(param) {
+    let data = { isUpdate: false };
+    if (param) {
+      data['param'] = param;
+    }
+    openModal(true, data);
+  }
+
+  // 修改事件
+  function handleEdit(record) {
+    onlineTableContext
+      .beforeEdit(record)
+      .then(() => {
+        openModal(true, {
+          isUpdate: true,
+          record,
+        });
+      })
+      .catch((msg) => {
+        $message.warning(msg);
+      });
+  }
+
+  /**
+   *
+   * [更多]下拉项中的 [删除]
+   */
+  const getDeleteButton = (record) => {
+    return {
+      label: cgBIBtnMap['delete'].buttonName,
+      ifShow: () => cgBIBtnMap['delete'].enabled,
+      popConfirm: {
+        title: '是否删除？',
+        confirm: handleDeleteOne.bind(null, record),
+      },
+    };
+  };
+
+  // 删除事件
+  function handleDeleteOne(record) {
+    onlineTableContext
+      .beforeDelete(record)
+      .then(() => {
+        handleDelete(record.id, false);
+      })
+      .catch((msg) => {
+        $message.warning(msg);
+      });
+  }
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    //update-begin-author:taoyan date:2022-10-17 for: VUEN-2351【vue3 online表单】online表单 发起流程后，仍然可以编辑数据
+    let bpmStatusValue = getBpmStatusValue(record);
+    // 允许编辑的情况--> bpm有值且值为1，bpm没有值, 
+    //update-begin-author:taoyan date:2023-2-6 for:  QQYUN-4135【online】审批完成的流程和取回作废的流程，可以编辑
+    let canEdit = (bpmStatusValue && (bpmStatusValue=='1' || bpmStatusValue=='3' || bpmStatusValue=='4')) || !bpmStatusValue;
+    //update-end-author:taoyan date:2023-2-6 for:  QQYUN-4135【online】审批完成的流程和取回作废的流程，可以编辑
+    if ((toRaw(buttonSwitch.edit) === true && toRaw(buttonSwitch.update) === true) && canEdit) {
+    //update-end-author:taoyan date:2022-10-17 for: VUEN-2351【vue3 online表单】online表单 发起流程后，仍然可以编辑数据
+      return [
+        {
+          label: cgBIBtnMap['edit'].buttonName,
+          ifShow: () => cgBIBtnMap['edit'].enabled,
+          onClick: (e) => {
+            // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+            // erp主表点击编辑时需要防止当前选中数据反选
+            extraParameter['editClickCallback'] && extraParameter['editClickCallback'](record.id, e);
+            handleEdit(record);
+            // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+          },
+        },
+      ];
+    }
+    return [];
+  }
+
+  /**
+   *  操作列[提交流程]
+   */
+  function getSubmitFlowButton(record) {
+    return {
+      label: cgBIBtnMap['bpm'].buttonName,
+      ifShow: () => cgBIBtnMap['bpm'].enabled,
+      popConfirm: {
+        title: '确认提交流程吗？',
+        confirm: handleSubmitFlow.bind(null, record),
+      },
+    };
+  }
+
+  /**
+   * 操作列[审批进度]
+   * @param record
+   */
+  function getViewBpmGraphicButton(record){
+    return {
+      label: '审批进度',
+      onClick: handleViewGraphic.bind(null, record),
+    };
+  }
+
+  /**
+   * 查看流程图
+   * @param record
+   */
+  function handleViewGraphic(record){
+    const { currentTableName } = onlineTableContext;
+    
+    //判断 currentTableName如果是视图，截掉后缀
+    let currentTableNameVariable = currentTableName;
+    if (currentTableName.includes('$')) {
+      currentTableNameVariable = currentTableName.split('$')[0];
+    }
+    
+    let flowCode = FLOW_CODE_PRE + currentTableNameVariable;
+    let dataId = record.id;
+    openBpmModal(true, {
+      flowCode,
+      dataId
+    })
+  }
+
+  /**
+   *  操作列[更多下拉项]
+   */
+  function getDropDownActions(record, params = {} ) {
+    let arr: any = [];
+    if (toRaw(buttonSwitch.detail) === true) {
+      arr.push({
+        label: cgBIBtnMap['detail'].buttonName,
+        ifShow: () => cgBIBtnMap['detail'].enabled,
+        onClick: handleDetail.bind(null, record),
+      });
+    }
+    // update-begin--author:liaozhiyang---date:20240724---for：【TV360X-1101】树表放开提交流程按钮且加上审批详情弹窗
+    if (onlineTableContext['hasBpmStatus'] === true && toRaw(buttonSwitch.bpm) === true) {
+      // 提交流程按钮显示条件： 有bpm_status字段，并且有操作bpm按钮的权限
+      let bpmStatusValue = getBpmStatusValue(record);
+      if (!bpmStatusValue || bpmStatusValue == '1') {
+        //并且 bpm_status的值为1 或者为空
+        arr.push(getSubmitFlowButton(record));
+      }else{
+        arr.push(getViewBpmGraphicButton(record))
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240724---for：【TV360X-1101】树表放开提交流程按钮且加上审批详情弹窗
+    // 对接积木报表打印
+    if (extConfigJson.value) {
+      let { reportPrintShow, reportPrintUrl } = extConfigJson.value;
+      if (reportPrintShow && reportPrintUrl) {
+        arr.push({
+          label: '打印',
+          onClick() {
+            //跳转至积木报表页面
+            let url = reportPrintUrl;
+            let id = record.id;
+            let token = getToken();
+            goJmReportViewPage(url, id, token);
+          },
+        });
+      }
+    }
+    //update-begin-author:taoyan date:2022-10-17 for: VUEN-2351【vue3 online表单】online表单 发起流程后，仍然可以编辑数据
+    // 允许删除的情况--> bpm有值且值为1，bpm没有值
+    let bpmStatusValue = getBpmStatusValue(record);
+    let canDelete = (bpmStatusValue && bpmStatusValue=='1') || !bpmStatusValue;
+    if (toRaw(buttonSwitch.delete) === true && canDelete) {
+    //update-end-author:taoyan date:2022-10-17 for: VUEN-2351【vue3 online表单】online表单 发起流程后，仍然可以编辑数据
+      arr.push(getDeleteButton(record));
+    }
+    let buttonList = cgLinkButtonList;
+    if (buttonList && buttonList.length > 0) {
+      for (let item of buttonList) {
+        if (showLinkButtonOfExpression(item.exp || '', record) === true) {
+          arr.push({
+            label: item.buttonName,
+            onClick: cgButtonLinkHandler.bind(null, record, item.buttonCode, item.optType),
+          });
+        }
+      }
+    }
+    return arr;
+  }
+
+  /**
+   * 获取bpm_status的值 大小写都获取一遍
+   * @param record
+   */
+  function getBpmStatusValue(record) {
+    const key = 'bpm_status';
+    let value = record[key];
+    if (!value) {
+      value = record[key.toUpperCase()];
+    }
+    return value;
+  }
+
+  /**
+   * 查看详情
+   * @param record
+   */
+  function handleDetail(record) {
+    openDetailModal(true, {
+      isUpdate: true,
+      disableSubmit: true,
+      record,
+    });
+  }
+
+  /**
+   * 提交流程请求
+   * @param record
+   */
+  function startProcess(record) {
+    const {
+      currentTableName,
+      onlineUrl: { startProcess },
+    } = onlineTableContext;
+    
+    //判断 currentTableName如果是视图，截掉后缀
+    let currentTableNameVariable = currentTableName;
+    if (currentTableName.includes('$')) {
+      currentTableNameVariable = currentTableName.split('$')[0];
+    }
+    
+    let postConfig = {
+      url: startProcess,
+      params: {
+        flowCode: FLOW_CODE_PRE + currentTableNameVariable,
+        id: record.id,
+        // TODO 流程表单没有
+        formUrl: 'modules/bpm/task/form/OnlineFormDetail',
+        formUrlMobile: 'check/onlineForm/detail',
+      },
+    };
+    let postOption = { isTransformResponse: false };
+    return new Promise((resolve, reject) => {
+      defHttp.post(postConfig, postOption).then((res) => {
+        if (res.success) {
+          resolve(res);
+          $message.success(res.message);
+        } else {
+          reject();
+          $message.warning(res.message);
+        }
+      });
+    });
+  }
+
+  /**
+   * 提交流程按钮触发事件
+   * @param record
+   */
+  async function handleSubmitFlow(record) {
+    await startProcess(record);
+    onlineTableContext.loadData();
+  }
+
+  //删除请求
+  function handleDelete(dataId: String, isBatch = true) {
+    console.log('删除数据id值', dataId);
+    let url = `${onlineTableContext.onlineUrl.optPre}${onlineTableContext.ID}/${dataId}`;
+    // update-begin--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+    if (onlineTableContext['isErpSubTable'] === true) {
+      url = `${url}?tabletype=3`;
+    }
+    // update-end--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+    return new Promise((resolve, reject) => {
+      defHttp
+        .delete(
+          {
+            url,
+          },
+          { isTransformResponse: false }
+        )
+        .then((res) => {
+          if (res.success) {
+            $message.success(res.message);
+            // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-206】列表删除最后一页数据，页面跳到前一页数据为空
+            onlineTableContext.loadData({ delNum: dataId.split(',').length });
+            // update-end--author:liaozhiyang---date:20240528---for：【TV360X-206】列表删除最后一页数据，页面跳到前一页数据为空
+            // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+            // erp主表记录选中时被删除需要清空选中的key
+            if (!isBatch) {
+              extraParameter['singleDelCallback'] && extraParameter['singleDelCallback'](dataId);
+            }
+            // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+            resolve(true);
+          } else {
+            $message.warning(res.message);
+            reject();
+          }
+        });
+    });
+  }
+
+  // 批量删除事件
+  function handleBatchDelete() {
+    let arr = onlineTableContext['selectedRowKeys'];
+    if (arr.length <= 0) {
+      $message.warning('请选择一条记录！');
+      return false;
+    } else {
+      let idSet: any = [];
+      arr.forEach(function (val) {
+        let temp = val;
+        //树形列表 key后面会带有_loadChild
+        if (temp && temp.endsWith('_loadChild')) {
+          temp = temp.replace('_loadChild', '');
+        }
+        // 去重
+        if (idSet.indexOf(temp) < 0) {
+          idSet.push(temp);
+        }
+      });
+      let ids = idSet.join(',');
+      Modal.confirm({
+        title: '确认删除',
+        content: '是否删除选中数据',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: async () => {
+          await handleDelete(ids);
+          onlineTableContext.clearSelectedRow();
+        },
+      });
+    }
+  }
+  /*
+   * liaozhiyang
+   * 20250403
+   * 【QQYUN-11801】生成测试数据
+   * */
+  const handleAddTestData = (currentTableName, reload) => {
+    testDataLoading.value = true;
+    defHttp
+      .post({ url: `/online/cgform/api/aigc/mock/data/${currentTableName}`, timeout: 120000 }, { isTransformResponse: false })
+      .then((res) => {
+        if (res.code == 200) {
+          $message.success('生成测试数据成功~');
+          reload();
+        } else {
+          $message.warn(res.message);
+        }
+        testDataLoading.value = false;
+      })
+      .catch((err) => {
+        testDataLoading.value = false;
+        console.log(err);
+      });
+  }
+
+  /**
+   * 自定义按钮触发事件-link按钮
+   * @param record
+   * @param buttonCode
+   * @param optType js/bus
+   */
+  function cgButtonLinkHandler(record, buttonCode, optType) {
+    if (optType == 'js') {
+      onlineTableContext['execButtonEnhance'](buttonCode, record);
+    } else if (optType == 'action') {
+      let params = {
+        formId: onlineTableContext['ID'],
+        buttonCode: buttonCode,
+        dataId: record.id,
+      };
+      //console.log("自定义按钮link请求后台参数：",params)
+      let url = `${onlineTableContext.onlineUrl.buttonAction}`;
+      defHttp
+        .post(
+          {
+            url,
+            params,
+          },
+          { isTransformResponse: false }
+        )
+        .then((res) => {
+          if (res.success) {
+            onlineTableContext.loadData();
+            $message.success('处理完成!');
+          } else {
+            $message.warning(res.message);
+          }
+        });
+    }
+  }
+
+  /**
+   * 列表上方按钮 -js事件
+   * @param buttonCode
+   */
+  function cgButtonJsHandler(buttonCode) {
+    // 待测
+    onlineTableContext['execButtonEnhance'](buttonCode);
+  }
+
+  /**
+   * 列表上方按钮 -action事件
+   * @param buttonCode
+   */
+  function cgButtonActionHandler(buttonCode) {
+    let arr = onlineTableContext['selectedRowKeys'];
+    if (!arr || arr.length == 0) {
+      $message.warning('请先选中一条记录');
+      return false;
+    }
+    let dataId = arr.join(',');
+    let params = {
+      formId: onlineTableContext['ID'],
+      buttonCode: buttonCode,
+      dataId: dataId,
+    };
+    //console.log("自定义按钮请求后台参数：",params)
+    let url = `${onlineTableContext.onlineUrl.buttonAction}`;
+    defHttp
+      .post(
+        {
+          url,
+          params,
+        },
+        { isTransformResponse: false }
+      )
+      .then((res) => {
+        if (res.success) {
+          onlineTableContext.loadData();
+          onlineTableContext.clearSelectedRow();
+          $message.success('处理完成!');
+        } else {
+          $message.warning(res.message);
+        }
+      });
+  }
+
+  // 导入事件
+  function onImportExcel() {
+    // update-begin--author:liaozhiyang---date:20240429---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权导入从表数据
+    if (onlineTableContext['foreignKeyField'] && onlineTableContext['foreignKeyValue']) {
+      openImportModal(true, {
+        [onlineTableContext['foreignKeyField']]: onlineTableContext['foreignKeyValue'],
+      });
+    } else {
+      openImportModal(true);
+    }
+    // update-end--author:liaozhiyang---date:20240429---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权导入从表数据
+  }
+
+  // 导入地址
+  const importUrl = () => {
+    // update-begin--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+    let url = `${onlineTableContext.onlineUrl.importXls}${onlineTableContext.ID}`;
+    if (onlineTableContext['isErpSubTable'] === true) {
+      url = `${url}?tabletype=3`;
+    }
+    return url;
+    // update-end--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+  };
+
+  // 导出事件
+  const { handleExportXlsx } = useMethods();
+  function onExportExcel() {
+    let params = onlineTableContext.getLoadDataParams();
+    let selections = onlineTableContext['selectedRowKeys'];
+    if (selections && selections.length > 0) {
+      params['selections'] = selections.join(',');
+    }
+    // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+    let tabletype = {};
+    if (onlineTableContext['isErpSubTable'] === true) {
+      // update-begin--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+      tabletype = { tabletype: 3 };
+      // update-end--author:liaozhiyang---date:20240428---for：【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权删除和导出从表数据
+      if (onlineTableContext['foreignKeyField'] && onlineTableContext['foreignKeyValue']) {
+        params[onlineTableContext['foreignKeyField']] = onlineTableContext['foreignKeyValue'];
+      }
+    }
+    // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+    //console.log("导出参数",params)
+    let paramsStr = JSON.stringify(filterObj(params));
+    let url = `${onlineTableContext.onlineUrl.exportXls}${onlineTableContext.ID}`;
+    const description = onlineTableContext.description;
+    return handleExportXlsx(description, url, { paramsStr: paramsStr, ...tabletype });
+  }
+
+  /**
+   * liaozhiyang
+   * 20231008
+   * 先把自定义表单是转成布尔值，再利用new Function换算真正的规则
+   */
+  function multipleLinkButtonOfExpression(expression, row) {
+    const gather: any = [];
+    expression.split('||').forEach(oItem => {
+      const arr: any = [];
+      oItem
+        .trim()
+        .split('&&')
+        .forEach(nItem => {
+          arr.push(oneLinkButtonOfExpression(nItem.trim(), row));
+        });
+      gather.push(arr.join('&&'));
+    });
+    const r = gather.join('||');
+    console.log('---多个表达式---', r);
+    return new Function(`return ${r}`)();
+  }
+  /**
+   * liaozhiyang
+   * 20231008
+   * 区分有是否有表达式
+   */
+  function showLinkButtonOfExpression(expression, row) {
+    if (!expression || expression == '') {
+      return true;
+    }
+    if (expression.indexOf('||') == -1 && expression.indexOf('&&') == -1) {
+      return oneLinkButtonOfExpression(expression, row);
+    } else {
+      return multipleLinkButtonOfExpression(expression, row);
+    }
+  }
+
+  /**
+   *  用于处理 link按钮的表达式 返回布尔值
+   * @param expression 表达式
+   * @param row 所在行的数据
+   */
+  function oneLinkButtonOfExpression(expression: string, row: any): boolean {
+    if (!expression || expression == '') {
+      return true;
+    }
+    // 字段名#条件#值
+    let arr = expression.split('#');
+    //获取字段值
+    let fieldValue = row[arr[0]];
+    //获取表达式
+    let exp = arr[1].toLowerCase();
+    //判断表达式
+    if (exp === 'eq') {
+      return fieldValue == arr[2];
+    } else if (exp === 'ne') {
+      return !(fieldValue == arr[2]);
+    } else if (exp === 'empty') {
+      if (arr[2] === 'true') {
+        return !fieldValue || fieldValue == '';
+      } else {
+        return fieldValue && fieldValue.length > 0;
+      }
+    } else if (exp === 'in') {
+      let arr2 = arr[2].split(',');
+      return arr2.indexOf(String(fieldValue)) >= 0;
+    }
+    return false;
+  }
+
+  return {
+    buttonSwitch,
+    cgLinkButtonList,
+    cgBIBtnMap,
+    getQueryButtonCfg,
+    getResetButtonCfg,
+    getFormConfirmButtonCfg,
+    cgTopButtonList,
+    importUrl,
+    registerModal,
+    handleAdd,
+    handleEdit,
+    handleBatchDelete,
+    handleAddTestData,
+    testDataLoading,
+    testDataBtnShow,
+    registerImportModal,
+    onImportExcel,
+    onExportExcel,
+    getDropDownActions,
+    getActions,
+    cgButtonJsHandler,
+    cgButtonActionHandler,
+    cgButtonLinkHandler,
+    initButtonList,
+    initButtonSwitch,
+    getDeleteButton,
+    handleSubmitFlow,
+    getSubmitFlowButton,
+    registerDetailModal,
+    registerBpmModal,
+    openDetailModal
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useOnlinePopEvent.ts b/src/views/super/online/cgform/hooks/auto/useOnlinePopEvent.ts
new file mode 100644
index 0000000..29524e0
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useOnlinePopEvent.ts
@@ -0,0 +1,109 @@
+import type { InjectionKey } from 'vue';
+import type { Emitter } from '/@/utils/mitt';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+import mitt from '/@/utils/mitt';
+import {onMounted, onUnmounted} from 'vue'
+
+export interface OnlineEmitterContextProps {
+  /*activeName?: 'onlineEvent'*/
+  onlineEmitter: Emitter
+}
+const key: InjectionKey<OnlineEmitterContextProps> = Symbol();
+
+/**
+ * 事件编码-打开弹窗
+ */
+export const EVENT_OPEN_CODE: string = 'openpopmodal';
+/**
+ * 事件编码-关闭弹窗，获取表单数据
+ */
+const EVENT_SUCCESS_CODE: string = 'successpopmodal';
+
+/**
+ * 设置弹框事件-online列表
+ * @param callback
+ */
+export function useOnlineListPopEvent(callback){
+  const emitter = mitt();
+  function openPopModal(params){
+    callback(params);
+    console.log('事件触发完成,', params)
+  }
+
+  emitter.on(EVENT_OPEN_CODE, openPopModal)
+/*  onUnmounted(()=>{
+    emitter.off(EVENT_OPEN_CODE, openPopModal)
+    console.log('事件解绑完成-createOpenPopModalEvent')
+  });
+  onMounted(()=>{
+   
+    console.log('事件绑完成-createOpenPopModalEvent')
+  });*/
+  createOnlineEventContext({
+    onlineEmitter: emitter
+  });
+  console.log('事件绑完成,')
+}
+
+/**
+ * 关闭弹窗，返回表单数据
+ * @param params
+ */
+export function useOnlinePopFormEvent(){
+  const { onlineEmitter } = useOnlineEventContext();
+  function emitFormData(data){
+    onlineEmitter.emit(EVENT_SUCCESS_CODE, data)
+  }
+  return {
+    emitFormData
+  }
+}
+
+
+/**
+ * 关闭弹窗，返回表单数据
+ * @param params
+ */
+export function useOnlineFormEvent(callback){
+  const context = useOnlineEventContext();
+  const { onlineEmitter } = context;
+  function emitData(data){
+    callback(data);
+    console.log('useOnlineFormEvent事件触发完成,', data)
+  }
+  onUnmounted(()=>{
+    onlineEmitter && onlineEmitter.off(EVENT_SUCCESS_CODE, emitData)
+    console.log('事件解绑完成-createOpenPopModalEvent')
+  });
+  onMounted(()=>{
+    onlineEmitter && onlineEmitter.on(EVENT_SUCCESS_CODE, emitData)
+    console.log('事件绑完成-createOpenPopModalEvent')
+  });
+  function openPopModal(emitData){
+    console.log('openPopModal', emitData)
+    onlineEmitter && onlineEmitter.emit(EVENT_OPEN_CODE, emitData)
+  }
+  return {
+    openPopModal
+  }
+}
+
+/**
+ * 触发弹框事件
+ * @param params
+ */
+/*export function getOnlinePopEvent(){
+  const { onlineEmitter } = useOnlineEventContext();
+  return {
+    onlineEmitter,
+    eventCode: EVENT_OPEN_CODE
+  };
+}*/
+
+function createOnlineEventContext(context: OnlineEmitterContextProps) {
+  return createContext<OnlineEmitterContextProps>(context, key, { readonly: false, native: true });
+}
+
+export function useOnlineEventContext() {
+  return useContext<OnlineEmitterContextProps>(key);
+}
\ No newline at end of file
diff --git a/src/views/super/online/cgform/hooks/auto/useOnlineTableContext.ts b/src/views/super/online/cgform/hooks/auto/useOnlineTableContext.ts
new file mode 100644
index 0000000..de5c904
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useOnlineTableContext.ts
@@ -0,0 +1,903 @@
+import type { ExtConfigType } from '../../types';
+import { Page, SpecialConfig, SETUP, ENHANCEJS } from '../../../cgform/types/onlineRender';
+import { useRoute } from 'vue-router';
+import { router } from '/@/router';
+import { onBeforeUnmount, ref, toRaw, nextTick, provide } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { filterObj } from '/@/utils/common/compUtils';
+import { useCustomHook, GET_FUN_BODY_REG } from './useCustomHook';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+import { useModal } from '/@/components/Modal';
+import { ERP } from "../../util/constant";
+import {useMultipleTabStore} from "/@/store/modules/multipleTab";
+import {useCgformStore} from "../../store/cgformState";
+import { getMenus } from '/@/router/menus';
+/**
+ * context对象属性的描述
+ * 控制台写js增强的时候 打印console.log(this)可以获取到该对象说明
+ */
+const CONTEXT_PROP_DESCRIPTION = {
+  acceptHrefParams: '<p> 跳转时获取的参数信息',
+  currentPage: '<p> 当前页数',
+  currentTableName: '<p> 当前表名',
+  description: '<p> 当前表描述',
+  hasChildrenField: '<p> 是否有子节点的字段名，仅树形表单下有效',
+  isDesForm: '<p> xx',
+  isTree: '<m> 是否是树形表单 ',
+  loadData: '<m> 加载列表数据',
+  pageSize: '<p> 每一页显示条数',
+  queryParam: '<p> 查询条件对象，每次点击查询后才会更新此数据',
+  selectedRowKeys: '<p> 选中的行的id数组',
+  sortField: '<p> 排序字段',
+  sortType: '<p> 排序规则',
+  total: '<p> 总页数',
+  foreignKeyValue: '<p> Erp一对多子表外键选中对应主表字段的值',
+  isErpSubTable: '<p> 是否Erp一对多子表',
+  foreignKeyField: '<p> Erp一对多子表外键字段',
+  themeTemplate: '<p> 主题模板',
+  isInnerSubTable: '<p> 是否内嵌一对多子表',
+  innerSubTableId: '<p>内嵌一对多子表ID',
+  innerSubTableName: '<p> 内嵌一对多子表名',
+  mTableSelectedRcordId: '<p>内嵌主表展开行的id',
+  innerSubTableFk: '<p>内嵌子表的外键字段',
+  loading: '<p> 设置/获取loading',
+};
+
+/**
+ * online地址-常量
+ */
+const onlineUrl = {
+  getColumns: '/online/cgform/api/getColumns/',
+  getQueryInfo: '/online/cgform/api/getQueryInfo/',
+  getData: '/online/cgform/api/getData/',
+  getTreeData: '/online/cgform/api/getTreeData/',
+  optPre: '/online/cgform/api/form/',
+  buttonAction: '/online/cgform/api/doButton',
+  exportXls: '/online/cgform/api/exportXlsOld/',
+  importXls: '/online/cgform/api/importXls/',
+  startProcess: '/act/process/extActProcess/startMutilProcess',
+  getErpColumns: '/online/cgform/api/getErpColumns/',
+  // 内嵌主题一对多子表数据请求接口
+  list: '/online/cgform/api/subform/list/',
+};
+
+// 没一张表配置的初始值
+let config: SpecialConfig = {
+  sortField: 'id',
+  sortType: 'asc',
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  selectedRowKeys: [],
+  queryParam: {},
+  acceptHrefParams: {},
+  description: '',
+  currentTableName: '',
+  isDesForm: false,
+  desFormCode: '',
+  cache: false,
+  isTree: false,
+  hasChildrenField: '',
+};
+
+/**
+ * 分页配置
+ */
+const metaPagination = {
+  current: 1,
+  pageSize: 10,
+  pageSizeOptions: ['10', '20', '30'],
+  showTotal: (total, range) => {
+    return range[0] + '-' + range[1] + ' 共' + total + '条';
+  },
+  showQuickJumper: true,
+  showSizeChanger: true,
+  total: 0,
+};
+
+/**
+ * 获取online 列表上下文
+ * 1.常量，全局使用的- 请求url
+ * 2.特殊参数-查询条件，排序方式，分页信息，选中行的keys（待测试，是否只和key有关，如果和row有关需去掉此配置）
+ * 3.loadData方法，这个方法很多地方调用
+ * setup最开头执行一次即可
+ */
+const { createMessage: $message, createErrorModal } = useMessage();
+
+export function useOnlineTableContext(params: any = {}) {
+  console.log('-------------------------useOnlineTableContext----------------------->');
+  // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+  const tableId = params.code ?? '';
+  const ID = ref(tableId);
+  provide('tableId', ID);
+  // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+  const route = useRoute();
+  // 列表页面查询表单的ref
+  const onlineQueryFormOuter = ref<any>();
+  // 高级查询按钮
+  const superQueryButtonRef = ref<any>();
+  // 分页配置
+  const pagination = ref<Page | false>(false);
+  // table 数据 切换路由即发生数据改变 正常情况下会走一遍setup 缓存情况下 走事件onActivated----问题是不用重新请求column吗？ 只需要加载数据？ 待测试
+  const dataSource = ref<Array<object>>([]);
+  // 表格是否重载
+  const tableReloading = ref(true);
+  // online表单扩展配置
+  const onlineExtConfigJson = ref<ExtConfigType>();
+  // Online表单全局状态
+  const cgformStore = useCgformStore();
+  // 多Tab状态
+  const tabStore = useMultipleTabStore();
+
+  const isConfigCurRoute = ref(false);
+  const pageLoading = ref(false);
+  
+  let specialConfigMap: { [key: string | symbol ]: SpecialConfig } = {};
+  const methods = {
+    execButtonEnhance: function (code, record) {
+      if (onlineTableContext[ENHANCEJS][code]) {
+        if (SETUP === code) {
+          executeEnhanceJsHook(code);
+        } else {
+          let row = toRaw(record);
+          return onlineTableContext[ENHANCEJS][code].call(onlineTableContext, onlineTableContext, row);
+        }
+      } else if (onlineTableContext[ENHANCEJS][code + '_hook']) {
+
+        //update-begin-author:taoyan date:2023-5-15 for: issues/516 自定义按钮_hook后的参数row未定义问题（参见#410） #516
+        if(record){
+          let row = toRaw(record);
+          executeEnhanceJsHook(code + '_hook', row);
+        }else{
+          executeEnhanceJsHook(code + '_hook');
+        }
+        //update-end-author:taoyan date:2023-5-15 for: issues/516 自定义按钮_hook后的参数row未定义问题（参见#410） #516
+        
+      } else {
+        console.log('增强没找到!', code);
+      }
+    },
+    /**
+     * get 是否是树形表单
+     * @param status 如果有值 则视为set方法
+     */
+    isTree: function (status?) {
+      if (typeof status === 'boolean') {
+        //传了参数则设置值
+        onlineTableContext['isTreeTable'] = status;
+        return status;
+      } else {
+        return onlineTableContext['isTreeTable'];
+      }
+    },
+  };
+
+  function executeEnhanceJsHook(code, row?) {
+    let str = onlineTableContext[ENHANCEJS][code].toLocaleString();
+    let arr = str.match(GET_FUN_BODY_REG);
+    if (arr.length > 1) {
+      let temp = arr[1];
+      executeJsEnhanced(temp, row);
+    }
+  }
+  /**
+   * 定义数据代理 取值方便 onlineTableContext.queryParam
+   * 直接读取onlineTableContext 取到的是{}
+   */
+  const onlineTableContext: any = new Proxy(CONTEXT_PROP_DESCRIPTION, {
+    get(_target: any, prop: string): any {
+      //console.log('从SpecialConfig中读取属性:'+prop)
+      if (typeof methods[prop] === 'function') {
+        return methods[prop];
+      } else {
+        let temp = specialConfigMap[ID.value];
+        if (temp == null) {
+          return temp;
+        }
+        return Reflect.get(temp, prop);
+      }
+    },
+    set(_target: any, prop: string, value: any): boolean {
+      //  console.log('设置SpecialConfig属性：'+ prop, value)
+      let temp = getCurrentPageSpecialConfigMap();
+      if (typeof value === 'function') {
+        // 如果是函数放到methods中去
+        return Reflect.set(methods, prop, value);
+      } else {
+        return Reflect.set(temp, prop, value);
+      }
+    },
+    deleteProperty(_target, key) {
+      // 在路由切换、关闭页面的时候需要调用一下这个方法清除配置
+      if (key === ID.value) {
+        delete specialConfigMap[key];
+        return true;
+      } else {
+        return false;
+      }
+    },
+  });
+
+  // 新的js增强
+  const { executeJsEnhanced } = useCustomHook({}, onlineTableContext);
+
+  /**
+   * 获取路由地址上的表单ID
+   */
+  function getTableId() {
+    let idValue = route.params.id as string;
+    if (!idValue) {
+      idValue = '';
+    }
+    return idValue;
+  }
+
+  onMountedOrActivated(({type}) => {
+    // 缓存路由走Activated，没缓存的走Mounted，均需走一次
+    console.log('-------------------onMountedOrActivated-------------------');
+    // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+    //erp一对多子表的id不能从页面路由获取（当tableId存在时，不从页面路由获取）
+    !tableId && handlePageChange();
+    // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+
+    if (type === 'activated') {
+      // 【QQYUN-7151】表单修改后，已经打开的功能测试页面不会自动刷新
+      if (cgformStore.checkIsChanged(ID.value)) {
+        tabStore.refreshPage(router)
+      }
+    }
+
+    if (ID.value) {
+      cgformStore.removeChangedTable(ID.value);
+    }
+
+  });
+
+  // 路由关闭前 清空map里面的配置
+  onBeforeUnmount(() => {
+    console.log('-------------------onBeforeUnmount-------------------');
+    delete specialConfigMap[ID.value];
+    // 如果缓存了  关闭时会调用
+    // 没有缓存 切换路由就会调用--这个没关系
+    // 但是测试online无此效果
+  });
+
+  /**
+   * 获取当前页面配置
+   */
+  function getCurrentPageSpecialConfigMap() {
+    let temp = specialConfigMap[ID.value];
+    if (!temp) {
+      let obj = Object.assign({}, config, { onlineUrl });
+      temp = JSON.parse(JSON.stringify(obj));
+      // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      if (params['themeTemplate'] == ERP) {
+        // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8387】Erp风格和其他风格同时在，导致其他风格当前页码不正常
+        temp.pageSize = 5;
+        // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8387】Erp风格和其他风格同时在，导致其他风格当前页码不正常
+      }
+      // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      // update-begin--author:liaozhiyang---date:20250423---for：【issues/8117】js增强可设置获取loading
+      // @ts-ignore
+      temp.loading = pageLoading;
+      // update-end--author:liaozhiyang---date:20250423---for：【issues/8117】js增强可设置获取loading
+      specialConfigMap[ID.value] = temp;
+    }
+    return temp;
+  }
+
+  //接受URL参数
+  function handleAcceptHrefParams() {
+    let acceptHrefParams = {};
+    let hrefParam = route.query;
+    if (hrefParam) {
+      Object.keys(hrefParam).map((key) => {
+        acceptHrefParams[key] = hrefParam[key];
+      });
+      // queryParam.value raw对象
+      onlineTableContext['acceptHrefParams'] = acceptHrefParams;
+    }
+  }
+
+  /**
+   * 查询table列信息 及其他配置
+   */
+  function getColumnList(themeTemplate = '') {
+    let url;
+    // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+    if (themeTemplate == ERP) {
+      // Erp一对多获取主子表columns
+      url = `${onlineTableContext.onlineUrl.getErpColumns}${ID.value}`;
+    } else {
+      url = `${onlineTableContext.onlineUrl.getColumns}${ID.value}`;
+    }
+    // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+
+    //update-begin---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+    if(onlineTableContext['isInnerSubTable'] === true){
+      url = url+ '?tabletype=3';
+    }
+    //update-end---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+    return new Promise((resolve, reject) => {
+      defHttp
+        .get(
+          {
+            url,
+          },
+          { isTransformResponse: false }
+        )
+        .then((res) => {
+          // console.log(res)
+          if (res.success) {
+            resolve(res.result);
+          } else {
+            $message.warning(res.message);
+            reject();
+          }
+        })
+        .catch(() => {
+          reject();
+        });
+    });
+  }
+
+  //查询数据
+  /**
+   * @param delNum number 删除的条数【批量删除，删除】调用会传
+   */
+  function loadData(options = {}) {
+    const { delNum } = options;
+    return new Promise((resolve, reject) => {
+      // update-begin--author:liaozhiyang---date:20240528---for：【TV360X-206】列表删除最后一页数据，页面跳到前一页数据为空
+      if (delNum != null) {
+        const { total, pageSize, current } = pagination.value;
+        const lastPage = Math.ceil(total / pageSize);
+        // 只有当前页是最后一页时删除数据才判断是否要跳到前一页
+        if (current === lastPage) {
+          pagination.value.current = Math.ceil((total - delNum) / pageSize);
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240528---for：【TV360X-206】列表删除最后一页数据，页面跳到前一页数据为空
+      let params = getLoadDataParams();
+      let url = `${onlineTableContext.onlineUrl.getData}${ID.value}`;
+      if (onlineTableContext.isTree() === true) {
+        url = `${onlineTableContext.onlineUrl.getTreeData}${ID.value}`;
+      } else if (onlineTableContext['isInnerSubTable'] === true) {
+        // update-begin--author:liaozhiyang---date:20230822---for：【QQYUN-6305】内嵌主题一对多
+        url = `${onlineTableContext.onlineUrl.getData}${onlineTableContext['innerSubTableId']}`;
+        params = {pageSize: -521, }
+        // update-begin--author:liaozhiyang---date:20240514---for：【QQYUN-9340】内嵌子表数据都查出来了
+        if (onlineTableContext['innerSubTableFk'] && onlineTableContext['mTableSelectedRcordId']) {
+          params[onlineTableContext['innerSubTableFk']] = onlineTableContext['mTableSelectedRcordId'];
+        }
+        // update-end--author:liaozhiyang---date:20240514---for：【QQYUN-9340】内嵌子表数据都查出来了
+        // update-end--author:liaozhiyang---date:20230822---for：【QQYUN-6305】内嵌主题一对多
+        //update-begin---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+        url = url+ '?tabletype=3';
+        //update-end---author:wangshuai---date:2025-10-21---for:【issues/8933】内嵌子表主题（一对多）列表点+号展开明细提示：无权限访问(操作)---
+      }
+      // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      // erp一对多子表查询需加参数
+      if (onlineTableContext['isErpSubTable'] === true) {
+        // update-begin--author:liaozhiyang---date:20250722---for：【issues/8575】erp默认选中第一个及没选中主表时子表不查询
+        if (onlineTableContext['foreignKeyValue'] == undefined) {
+          return;
+        }
+        // update-end--author:liaozhiyang---date:20250722---for：【issues/8575】erp默认选中第一个及没选中主表时子表不查询
+        params[onlineTableContext['foreignKeyField']] = onlineTableContext['foreignKeyValue'];
+        // 【issues/6124】当用户没有【Online表单开发】页面的权限时用户无权查看从表的数据
+        params['tabletype'] = 3;
+        delete params.hasQuery;
+      }
+      // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      console.log('------查询参数-----', params);
+      defHttp
+        .get({ url, params }, { isTransformResponse: false })
+        .then((res) => {
+          console.log('--onlineList-查询列表数据', res);
+          if (res.success) {
+            handleDataResult(res.result);
+            resolve(true);
+          } else {
+            if (res.message === 'NO_DB_SYNC') {
+              createErrorModal({
+                title: '数据库未同步',
+                content: '请先同步数据库再查看此页面！',
+                // 点击确定后自动返回上一页
+                onOk: () => router.back(),
+              });
+            } else {
+              $message.warning(res.message);
+            }
+            reject(false);
+          }
+        })
+        .catch(() => {
+          let error = '请求列表数据异常!';
+          $message.warning(error);
+          reject(false);
+        });
+    });
+  }
+
+  /**
+   * 获取查询条件
+   */
+  function getLoadDataParams() {
+    const { sortField, sortType, acceptHrefParams, queryParam } = onlineTableContext;
+    // 树用到的参数
+    const treeParam = {
+      hasQuery: 'true',
+    };
+    if (onlineTableContext.isTree() === true) {
+      // update-begin--author:liaozhiyang---date:20231205---for：【issues/888】online树表子节点搜索不生效且有警告
+      if (!!queryParam || Object.keys(queryParam).length <= 0) {
+        treeParam['hasQuery'] = 'false';
+      }
+      // update-end--author:liaozhiyang---date:20231205---for：【issues/888】online树表子节点搜索不生效且有警告
+    }
+    let params = Object.assign({}, treeParam, acceptHrefParams, queryParam, { column: sortField, order: sortType });
+    // TODO 范围查询 原固定值需要清楚 待删除
+    /*let queryFields = queryFieldArray.value;
+    for(let item of queryFields){
+      if(item.mode!='single'){
+        params[item.field] = ''
+      }
+    }*/
+    if (pagination.value) {
+      //如果分页
+      params.pageNo = pagination.value.current;
+      params.pageSize = pagination.value.pageSize;
+    } else {
+      // 不分页传一个固定值
+      params['pageSize'] = -521;
+    }
+
+    let superQueryData = getSuperQueryData();
+    //高级查询
+    params.superQueryMatchType = superQueryData.matchType || '';
+    params.superQueryParams = superQueryData.params || '';
+    return filterObj(params);
+  }
+
+  // 查询玩数据后 获取页面数据、数据总数
+  function handleDataResult(result) {
+    let total = 0;
+    if (Number(result.total) > 0) {
+      if (onlineTableContext.isTree() === true) {
+        dataSource.value = getTreeDataByResult(result.records);
+        nextTick(() => {
+          loadDataByExpandedRows(dataSource.value);
+        });
+      } else {
+        // update-begin--author:liaozhiyang---date:20250508---for：【issues/8168】id重复排序数据重了
+        dataSource.value = [];
+        nextTick(() => {
+          dataSource.value = result.records;
+        });
+        // update-end--author:liaozhiyang---date:20250508---for：【issues/8168】id重复排序数据重了
+      }
+      total = Number(result.total);
+    } else {
+      dataSource.value = [];
+    }
+    if (pagination.value) {
+      pagination.value = { ...pagination.value, total };
+    }
+  }
+
+  //分页、排序、筛选变化时触发
+  function handleChangeInTable($pagination, _filters, sorter) {
+    if (sorter && sorter.order) {
+      // 需要排序，先获取排序规则
+      onlineTableContext['sortField'] = sorter.field;
+      onlineTableContext['sortType'] = 'ascend' == sorter.order ? 'asc' : 'desc';
+    } else {
+      // 没有规则 走默认排序
+      onlineTableContext['sortField'] = 'id';
+      onlineTableContext['sortType'] = 'asc';
+    }
+    if (pagination.value) {
+      //console.log('$pagination111', $pagination)
+      pagination.value = $pagination;
+    }
+    loadData();
+  }
+
+  /**
+   * 页面id改变后,执行查询loadData之前会执行该方法
+   * 根据查询的结果设置当前表信息、设置查询条件、设置高级查询条件、分页信息、排序信息
+   * @param result
+   */
+  function handleSpecialConfig(result) {
+    //1.根据查询的结果设置当前表信息
+    onlineTableContext['description'] = result.description;
+    onlineTableContext['currentTableName'] = result.currentTableName;
+    onlineTableContext['isDesForm'] = result.isDesForm;
+    onlineTableContext['desFormCode'] = result.desFormCode;
+    onlineTableContext['ID'] = ID.value;
+    //2.设置查询条件
+    let { acceptHrefParams, queryParam, superQuery, currentPage, pageSize } = onlineTableContext;
+    handleAcceptHrefParams();
+    if (!queryParam) {
+      onlineTableContext['queryParam'] = {};
+    } else {
+      // 加强判断，防止没有查询
+      if (onlineQueryFormOuter.value) {
+        onlineQueryFormOuter.value.initDefaultValues(queryParam, acceptHrefParams);
+      }
+    }
+    //3.设置高级查询条件
+    if (!superQuery) {
+      onlineTableContext['superQuery'] = { params: '', matchType: '' };
+    } else {
+      // erp一对多子表没有高级查询按钮
+      if (superQueryButtonRef.value) {
+        superQueryButtonRef.value.initDefaultValues(superQuery);
+      }
+    }
+    //4.分页信息
+    if (result.paginationFlag == 'Y') {
+      // update-begin--author:liaozhiyang---date:20240527---for：【TV360X-332】erp默认每页5条，切换之后每页5条没了
+      let pageSizeOptions: any = metaPagination.pageSizeOptions;
+      if (params['themeTemplate'] == ERP) {
+        pageSizeOptions = ['5', '10', '30'];
+      }
+      // update-end--author:liaozhiyang---date:20240527---for：【TV360X-332】erp默认每页5条，切换之后每页5条没了
+      pagination.value = { ...metaPagination, ...{ current: currentPage, pageSize, pageSizeOptions } };
+    } else {
+      pagination.value = false;
+    }
+    //5.排序信息 不需要设置 没有显示声明，所以缺点是：界面上看不出来哪一列被排序了
+  }
+
+  /** 重载表格，在columns等信息变化时需要调用 */
+  async function reloadTable() {
+    tableReloading.value = true;
+    await nextTick();
+    tableReloading.value = false;
+  }
+
+  const add2Context = {
+    loadData,
+    getLoadDataParams,
+    reloadTable,
+  };
+  Object.keys(add2Context).map((key) => {
+    onlineTableContext[key] = add2Context[key];
+  });
+
+  //----------------------------------- 以下为查询相关的--------------------------------
+
+  // 查询加载状态
+  let loading = ref(false);
+  // 查询首页
+  async function reload(parameter:any = {}) {
+    if (pagination.value) {
+      // update-begin--author:liaozhiyang---date:20231207---for：【QQYUN-7414】online操作除了查询其他数据刷新都是当前页（包括新增）
+      pagination.value = { ...pagination.value, current: parameter.mode == 'search' || !pagination.value.current ? 1 : pagination.value.current };
+      // update-end--author:liaozhiyang---date:20231207---for：【QQYUN-7414】online操作除了查询其他数据刷新都是当前页（包括新增）
+    }
+    // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+    if (params['themeTemplate'] !== ERP) {
+      onlineTableContext.clearSelectedRow();
+    }
+    // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7260】erp主表编辑时保存子表记录
+    //loading.value = true
+    await loadData();
+    //loading.value = false
+  }
+
+  //------------------------树形列表--------------------------
+  function getTreeDataByResult(result) {
+    if (result) {
+      return result.map((item) => {
+        //判断是否标记了带有子节点
+        let hasChildrenField = onlineTableContext['hasChildrenField'];
+        if (item[hasChildrenField] == '1') {
+          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
+          loadChild['jeecg_row_key'] = loadChild.id;
+          item.children = [loadChild];
+        }
+        return item;
+      });
+    }
+  }
+
+  const expandedRowKeys = ref<string[]>([]);
+
+  function handleExpandedRowsChange(expandedRowKeysValue) {
+    //console.log(a,b)
+    //console.log('handleExpandedRowsChange', expandedRowKeysValue, toRaw(expandedRowKeys.value))
+    expandedRowKeys.value = expandedRowKeysValue;
+  }
+
+  // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
+  function loadDataByExpandedRows(dataList) {
+    let expandedRowKeysValue = expandedRowKeys.value;
+    if (expandedRowKeysValue.length > 0) {
+      const { sortField, sortType, pidField } = onlineTableContext;
+      let params = Object.assign({}, { column: sortField, order: sortType });
+      params['hasQuery'] = 'in';
+      //已展开节点批量查询子节点
+      let superParams = Object.assign({});
+      superParams.rule = 'in';
+      superParams.type = 'text';
+      superParams.val = expandedRowKeysValue.join(',');
+      superParams.field = pidField;
+      superParams = [superParams];
+      params['superQueryParams'] = encodeURI(JSON.stringify(superParams));
+      params['superQueryMatchType'] = 'and';
+      params['batchFlag'] = 'true';
+      let url = `${onlineTableContext.onlineUrl.getTreeData}${ID.value}`;
+      console.log('--onlineList-查询子节点参数', superParams);
+      defHttp
+        .get({ url, params }, { isTransformResponse: false })
+        .then((res) => {
+          console.log('--onlineList-查询子节点列表数据', res);
+          if (res.success && res.result.records && res.result.records.length > 0) {
+            //已展开的数据批量子节点
+            let records = res.result.records;
+            const listMap = new Map();
+            for (let item of records) {
+              let pid = item[pidField];
+              if (expandedRowKeysValue.join(',').includes(pid)) {
+                let mapList = listMap.get(pid);
+                if (mapList == null) {
+                  mapList = [];
+                }
+                mapList.push(item);
+                listMap.set(pid, mapList);
+              }
+            }
+            let childrenMap = listMap;
+            let fn = (list) => {
+              if (list) {
+                list.forEach((data) => {
+                  if (expandedRowKeysValue.includes(data.id)) {
+                    data.children = getTreeDataByResult(childrenMap.get(data.id));
+                    fn(data.children);
+                  }
+                });
+              }
+            };
+            fn(dataList);
+          }
+        })
+        .catch(() => {
+          let error = 'loadDataByExpandedRows请求列表数据异常!';
+          $message.warning(error);
+        });
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  /**
+   * 获取高级查询条件
+   */
+  function getSuperQueryData() {
+    if (!onlineTableContext.superQuery) {
+      return {};
+    }
+    const {
+      superQuery: { params, matchType },
+      currentTableName,
+    } = onlineTableContext;
+    let pre = currentTableName + '@';
+    let arr: any[] = [];
+    if (params.length > 0) {
+      for (let data of params) {
+        let item = { ...data };
+        let field = item.field;
+        if (field.startsWith(pre)) {
+          item.field = field.replace(pre, '');
+        }
+        arr.push(item);
+      }
+    }
+    let str = arr.length > 0 ? JSON.stringify(arr) : '';
+    console.log('高级查询条件', arr, matchType);
+    return {
+      params: encodeURIComponent(str),
+      matchType,
+    };
+  }
+
+  /**高级查询状态-是否有查询条件*/
+  const superQueryStatus = ref(false);
+
+  /**
+   * 高级查询对象
+   * 1.执行高级查询组件的search事件，需要将值赋值给context
+   * 2.查询的时候从context中获取参数值
+   * 3.id发生改变需要做点什么？nothing，状态值需要改变
+   */
+  function handleSuperQuery(params, matchType) {
+    // params一定是个数组，可能size为0
+    onlineTableContext['superQuery'] = {
+      params,
+      matchType,
+    };
+    // update-begin--author:liaozhiyang---date:20231128---for：【QQYUN-7309】online高级查询第二次按钮没动画
+    if (params.length == 0 || params.length == undefined) {
+      superQueryStatus.value = false;
+    } else {
+      superQueryStatus.value = true;
+    }
+    // update-end--author:liaozhiyang---date:20231128---for：【QQYUN-7309】online高级查询第二次按钮没动画
+    // update-begin--author:liaozhiyang---date:20231207---for：【QQYUN-7414】online操作除了查询其他数据刷新都是当前页（包括新增）
+    pagination.value.current = 1;
+    // update-end--author:liaozhiyang---date:20231207---for：【QQYUN-7414】online操作除了查询其他数据刷新都是当前页（包括新增）
+    loadData();
+  }
+
+  /*------------------------自定义弹窗------------------------------*/
+  const [registerCustomModal, { openModal: doOpenCustomModal }] = useModal();
+  /**
+   * 自定义按钮 触发弹框
+   * @param param
+   */
+  function openCustomModal(param) {
+    if (!param) {
+      param = {};
+    }
+    if (!param.row) {
+      let rows = onlineTableContext['selectedRows'];
+      if (!rows || rows.length == 0 || rows.length > 1) {
+        $message.warning('请选择一条数据');
+        return;
+      }
+      param.row = rows[0];
+    }
+    param['code'] = ID.value;
+    doOpenCustomModal(true, param);
+  }
+  onlineTableContext['openCustomModal'] = openCustomModal;
+  /*------------------------自定义弹窗------------------------------*/
+
+  /**
+   * 页面发生改变的时候触发
+   */
+  function handlePageChange() {
+    let idValue = getTableId();
+    ID.value = idValue;
+  }
+  // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+  //erp子表的id不能从页面路由获取（当tableId存在时，不从页面路由获取）
+  if (!tableId && !ID.value) {
+    handlePageChange()
+  }
+  // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+
+  /** 表单配置查询成功后触发的事件（不用等表单打开才触发） */
+  function handleFormConfig(formConfig) {
+    // 处理扩展参数
+    let extConfigJson = formConfig.head.extConfigJson;
+    if (extConfigJson) {
+      onlineExtConfigJson.value = JSON.parse(extConfigJson);
+    }
+  }
+  /**
+   * liaozhiyang
+   * 20250407
+   * 【QQYUN-11801】生成测试数据
+   *  判断是配置的菜单还是功能测试打开的
+   * */
+  async function isConfigUrl() {
+    const getMatchingisConfigUrl = (menus, path) => {
+      for (let i = 0, len = menus.length; i < len; i++) {
+        const item = menus[i];
+        if (item.path === path && !item.redirect && !item.paramPath) {
+          return true;
+        } else if (item.children?.length) {
+          const result = getMatchingisConfigUrl(item.children, path);
+          if (result) {
+            return result;
+          }
+        }
+      }
+      return false;
+    };
+    const path = route.path;
+    const menus = await getMenus();
+    const result = getMatchingisConfigUrl(menus, path);
+    isConfigCurRoute.value = result;
+  }
+  isConfigUrl();
+  return {
+    ID,
+    onlineQueryFormOuter,
+    superQueryButtonRef,
+    loading,
+    reload,
+    dataSource,
+    pagination,
+    tableReloading,
+    handleSpecialConfig,
+    onlineTableContext,
+    handleChangeInTable,
+    getColumnList,
+    getTreeDataByResult,
+    expandedRowKeys,
+    handleExpandedRowsChange,
+    onlineExtConfigJson,
+    handleFormConfig,
+    superQueryStatus,
+    handleSuperQuery,
+    registerCustomModal,
+    isConfigCurRoute,
+    pageLoading,
+    ...add2Context,
+  };
+}
+
+/**
+ * 兼容老版js增强 封装对象--暂不支持
+ *
+ */
+export function useCompatibleOldVersion(context) {
+  Object.defineProperty(context, 'table', {
+    get() {
+      const arr = context['selectedRowKeys'];
+      const arr2 = context['selectedRows'];
+      return {
+        selectedRowKeys: arr,
+        selectedRows: arr2,
+      };
+    },
+  });
+}
+
+/**
+ * 链式调用？？
+ */
+export class AopSetup {
+  before: Function = () => {};
+  after: Function = () => {};
+
+  constructor(before, after) {
+    if (typeof before == 'function') {
+      this.before = before;
+    }
+    if (typeof after == 'function') {
+      this.after = after;
+    }
+  }
+
+  addTarget(prop, context) {
+    let key;
+    if (typeof prop == 'function') {
+      key = prop.name;
+    } else if (typeof prop == 'string') {
+      key = prop;
+    } else {
+      return;
+    }
+    if (typeof context == 'object') {
+      context[key] = this.around(context[key], context);
+    }
+  }
+  addTargets(array, context) {
+    for (let item of array) {
+      this.addTarget(item, context);
+    }
+  }
+
+  around(targetFunction, context) {
+    const _that = this;
+    return async function () {
+      //console.log('this2', this)
+      let res1 = await _that.before(arguments);
+      console.log('before返回值', res1);
+      if (res1) {
+        console.log('错误信息', res1);
+        return;
+      }
+      let result = await targetFunction.apply(context, arguments);
+      await _that.after(arguments);
+      return result;
+    };
+  }
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useSuperQuery.ts b/src/views/super/online/cgform/hooks/auto/useSuperQuery.ts
new file mode 100644
index 0000000..cc6ed1a
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useSuperQuery.ts
@@ -0,0 +1,494 @@
+import { useModalInner } from '/@/components/Modal';
+import { randomString } from '/@/utils/common/compUtils';
+import { reactive, ref, toRaw, watch } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { Modal } from 'ant-design-vue';
+import { createLocalStorage } from '/@/utils/cache';
+import { useRoute } from 'vue-router';
+import FormSchemaFactory from '../../auto/comp/factory/FormSchemaFactory';
+import { FORM_VIEW_TO_QUERY_VIEW } from '../../types/onlineRender';
+
+// 查询条件存储编码前缀
+const SAVE_CODE_PRE = 'JSuperQuerySaved_';
+
+/**
+ * 查询项
+ * */
+interface SuperQueryItem {
+  field: string | undefined;
+  rule: string | undefined;
+  val: string | number;
+  key: string;
+}
+/**
+ * 查询项-第一个控件树model
+ * */
+interface TreeModel {
+  title: string;
+  value: string;
+  isLeaf?: boolean;
+  disabled?: boolean;
+  children?: TreeModel[];
+  order?: number;
+}
+
+/**
+ * 查询信息保存结构
+ * */
+interface SaveModel {
+  title: string;
+  content: string;
+  type: string;
+}
+
+export function useSuperQuery() {
+  const { createMessage: $message } = useMessage();
+  /** 表单ref*/
+  const formRef = ref<any>();
+
+  /** 数据*/
+  const dynamicRowValues = reactive<{ values: SuperQueryItem[] }>({
+    values: [],
+  });
+  /** and/or */
+  const matchType = ref('and');
+
+  // 弹框显示
+  const [registerModal, { setModalProps }] = useModalInner(() => {
+    setModalProps({ confirmLoading: false });
+  });
+
+  // 高级查询类型不支持联动组件，需要额外设置联动组件的view为text
+  const view2QueryViewMap = Object.assign({}, { link_down: 'text' }, FORM_VIEW_TO_QUERY_VIEW);
+
+  /**
+   * 确认按钮事件
+   */
+  function handleSubmit() {
+    console.log('handleSubmit', dynamicRowValues.values);
+  }
+
+  /**
+   * 关闭按钮事件
+   */
+  function handleCancel() {
+    //closeModal();
+  }
+
+  /**
+   * val组件赋值
+   */
+  function setFormModel(key: string, value: any, item: any) {
+    console.log('setFormModel', key, value);
+    // formModel[key] = value;
+    item['val'] = value;
+  }
+
+  // 字段-Properties
+  const fieldProperties = ref<any>({});
+  // 字段-左侧查询项-树控件数据
+  const fieldTreeData = ref<any>([]);
+
+  /**
+   * 初始化数据-最开始的方法
+   * 1.获取 表名@字段名-->配置 这样的一个map
+   * 2.获取树形结构的数据 显示:文本； 存储:表名@字段名
+   * 当树改变时，及时获取配置更新表单
+   * @param json
+   */
+  function init(json) {
+    let { allFields, treeData } = getAllFields(json);
+    fieldProperties.value = allFields;
+    fieldTreeData.value = treeData;
+  }
+
+  /**
+   * 左侧查询项 添加一行
+   * @param index
+   */
+  function addOne(index) {
+    let item = {
+      field: undefined,
+      rule: 'eq',
+      val: '',
+      key: randomString(16),
+    };
+    if (index === false) {
+      // 重置后需要调用
+      dynamicRowValues.values = [];
+      dynamicRowValues.values.push(item);
+    } else if (index === true) {
+      // 打开弹框是需要调用
+      if (dynamicRowValues.values.length == 0) {
+        dynamicRowValues.values.push(item);
+      }
+    } else {
+      // 其余就是 正常的点击加号增加行
+      dynamicRowValues.values.splice(++index, 0, item);
+    }
+  }
+
+  /**
+   * 左侧查询项 删除一行
+   */
+  function removeOne(item: SuperQueryItem) {
+    let arr = toRaw(dynamicRowValues.values);
+    let index = -1;
+    for (let i = 0; i < arr.length; i++) {
+      if (item.key == arr[i].key) {
+        index = i;
+        break;
+      }
+    }
+    if (index != -1) {
+      dynamicRowValues.values.splice(index, 1);
+    }
+  }
+
+  // 默认的输入框
+  const defaultInput = {
+    field: 'val',
+    label: '测试',
+    component: 'Input',
+  };
+
+  /**
+   * 左侧查询项 val组件 schema获取, 替代左侧字段树的change事件
+   * @param item
+   * @param index
+   */
+  function getSchema(item, index) {
+    let map = fieldProperties.value;
+    let prop = map[item.field];
+    if (!prop) {
+      return defaultInput;
+    }
+    if (view2QueryViewMap[prop.view]) {
+      // 如果出现查询条件联动组件出来的场景，请跟踪此处
+      prop.view = view2QueryViewMap[prop.view];
+    }
+    let temp = FormSchemaFactory.createFormSchema(item.field, prop);
+    // temp.setFormRef(formRef)
+    temp.noChange();
+    // 查询条件中的 下拉框popContainer为parentNode
+    temp.asSearchForm();
+    temp.updateField(item.field + index);
+    const setFieldValue = (values) => {
+      item['val'] = values[item.field];
+    };
+    temp.setFunctionForFieldValue(setFieldValue);
+    let schema = temp.getFormItemSchema();
+    //schema['valueField'] = 'val'
+    return schema;
+  }
+
+  /*-----------------------右侧保存信息相关-begin---------------------------*/
+
+  /**
+   * 右侧树 的 数据
+   */
+  const saveTreeData = ref<any>('');
+  // 本地缓存
+  const $ls = createLocalStorage();
+  //需要保存的信息（一条）
+  const saveInfo = reactive({
+    visible: false,
+    title: '',
+    content: '',
+    saveCode: '',
+  });
+  //按钮loading
+  const loading = ref(false);
+
+  // 当前页面路由
+  const route = useRoute();
+  // 监听路由信息，路由发生改变，则重新获取保存的查询信息-->currentPageSavedArray
+  watch(
+    () => route.fullPath,
+    (val) => {
+      console.log('fullpath', val);
+      initSaveQueryInfoCode();
+    }
+  );
+
+  // 当前页面存储的 查询信息
+  const currentPageSavedArray = ref<SaveModel[]>([]);
+  // 监听当前页面是否有新的数据保存了，然后更新右侧数据->saveTreeData
+  watch(
+    () => currentPageSavedArray.value,
+    (val) => {
+      let temp: any[] = [];
+      if (val && val.length > 0) {
+        val.map((item) => {
+          let key = randomString(16);
+          temp.push({
+            title: item.title,
+            slots: { icon: 'custom' },
+            value: key,
+          });
+        });
+      }
+      saveTreeData.value = temp;
+    },
+    { immediate: true, deep: true }
+  );
+
+  // 重新获取保存的查询信息
+  function initSaveQueryInfoCode() {
+    let code = SAVE_CODE_PRE + route.fullPath;
+    saveInfo.saveCode = code;
+    let list = $ls.get(code);
+    if (list && list instanceof Array) {
+      currentPageSavedArray.value = list;
+    }
+  }
+
+  // 执行一次 获取保存的查询信息
+  initSaveQueryInfoCode();
+
+  /**
+   * 保存按钮事件
+   */
+  function handleSave() {
+    // 获取实际数据转成字符串
+    let fieldArray = getQueryInfo();
+    if (!fieldArray) {
+      $message.warning('空条件不能保存');
+      return;
+    }
+    let content = JSON.stringify(fieldArray);
+    openSaveInfoModal(content);
+  }
+
+  // 输入保存标题 弹框显示
+  function openSaveInfoModal(content) {
+    saveInfo.visible = true;
+    saveInfo.title = '';
+    saveInfo.content = content;
+  }
+
+  /**
+   * 确认保存查询信息
+   */
+  function doSaveQueryInfo() {
+    let { title, content, saveCode } = saveInfo;
+    let index = getTitleIndex(title);
+    if (index >= 0) {
+      // 已存在是否覆盖
+      Modal.confirm({
+        title: '提示',
+        content: `${title} 已存在，是否覆盖？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          currentPageSavedArray.value.splice(index, 1, {
+            content,
+            title,
+            type: matchType.value,
+          });
+          $ls.set(saveCode, currentPageSavedArray.value);
+          saveInfo.visible = false;
+        },
+      });
+    } else {
+      currentPageSavedArray.value.push({
+        content,
+        title,
+        type: matchType.value,
+      });
+      $ls.set(saveCode, currentPageSavedArray.value);
+      saveInfo.visible = false;
+    }
+  }
+
+  // 根据填入的 title找本地存储的信息，如果有需要询问是否覆盖
+  function getTitleIndex(title) {
+    let savedArray = currentPageSavedArray.value;
+    let index = -1;
+    for (let i = 0; i < savedArray.length; i++) {
+      if (savedArray[i].title == title) {
+        index = i;
+        break;
+      }
+    }
+    return index;
+  }
+
+  /**
+   * 获取左侧所有查询条件，如果没有/或者条件无效则返回false
+   */
+  function getQueryInfo(isEmit = false) {
+    let arr = dynamicRowValues.values;
+    if (!arr || arr.length == 0) {
+      return false;
+    }
+    let fieldArray: any = [];
+    let fieldProps = fieldProperties.value;
+    for (let item of arr) {
+      if (item.field && (item.val || item.val === 0) && item.rule) {
+        let tempVal: any = toRaw(item.val);
+        if (tempVal instanceof Array) {
+          tempVal = tempVal.join(',');
+        }
+        let obj = {
+          field: item.field,
+          rule: item.rule,
+          val: tempVal,
+        };
+        if (isEmit === true) {
+          //如果当前数据用于emit事件，需要设置dbtype和type
+          let prop = fieldProps[item.field];
+          if (prop) {
+            obj['type'] = prop.view;
+            obj['dbType'] = prop.type;
+          }
+        }
+        fieldArray.push(obj);
+      }
+    }
+    if (fieldArray.length == 0) {
+      return false;
+    }
+    return fieldArray;
+  }
+
+  /**
+   * 右侧数据 点击事件，重新将数据显示到左侧
+   * @param key
+   * @param node
+   */
+  function handleTreeSelect(key, { node }) {
+    console.log(key, node);
+    let title = node.dataRef.title;
+    let arr = currentPageSavedArray.value.filter((item) => item.title == title);
+    if (arr && arr.length > 0) {
+      // 拿到数据渲染
+      let { content, type } = arr[0];
+      let data = JSON.parse(content);
+      let rowsValues: SuperQueryItem[] = [];
+      for (let item of data) {
+        rowsValues.push(Object.assign({}, { key: randomString(16) }, item));
+      }
+      dynamicRowValues.values = rowsValues;
+      matchType.value = type;
+    }
+  }
+
+  /**
+   * 右侧数据 删除事件
+   */
+  function handleRemoveSaveInfo(title) {
+    console.log(title);
+    let index = getTitleIndex(title);
+    if (index >= 0) {
+      currentPageSavedArray.value.splice(index, 1);
+      $ls.set(saveInfo.saveCode, currentPageSavedArray.value);
+    }
+  }
+
+  /*-----------------------右侧保存信息相关-end---------------------------*/
+
+  // 获取所有字段配置信息
+  function getAllFields(json) {
+    // 获取所有配置 查询字段 是否联合查询
+    const { properties, table, title } = json;
+    let allFields = {};
+    let order = 1;
+    let treeData: TreeModel[] = [];
+    let mainNode: TreeModel = {
+      title,
+      value: table,
+      disabled: true,
+      children: [],
+    };
+    treeData.push(mainNode);
+    Object.keys(properties).map((field) => {
+      let item = properties[field];
+      if (item.view == 'table') {
+        // 子表字段
+        // 联合查询开启才需要子表字段作为查询条件
+        let subProps = item['properties'];
+        let subTableOrder = order * 100;
+        let subNode: TreeModel = {
+          title: item.title,
+          value: field,
+          disabled: true,
+          children: [],
+        };
+        Object.keys(subProps).map((subField) => {
+          let subItem = subProps[subField];
+          // 保证排序统一
+          subItem['order'] = subTableOrder + subItem['order'];
+          // 子表的分隔符要改成逗号，后台才能识别
+          let subFieldKey = field + ',' + subField;
+          allFields[subFieldKey] = subItem;
+          subNode.children!.push({
+            title: subItem.title,
+            value: subFieldKey,
+            isLeaf: true,
+            order: subItem['order'],
+          });
+        });
+        orderField(subNode);
+        treeData.push(subNode);
+        order++;
+      } else {
+        // 主表字段
+        let fieldKey = table + '@' + field;
+        allFields[fieldKey] = item;
+        mainNode.children!.push({
+          title: item.title,
+          value: fieldKey,
+          isLeaf: true,
+          order: item.order,
+        });
+      }
+    });
+    orderField(mainNode);
+    return { allFields, treeData };
+  }
+
+  //根据字段的order重新排序
+  function orderField(data) {
+    let arr = data.children;
+    arr.sort(function (a, b) {
+      return a.order - b.order;
+    });
+  }
+
+  function initDefaultValues(values) {
+    const { params, matchType } = values;
+    if (params) {
+      let rowsValues: SuperQueryItem[] = [];
+      for (let item of params) {
+        rowsValues.push(Object.assign({}, { key: randomString(16) }, item));
+      }
+      dynamicRowValues.values = rowsValues;
+      matchType.value = matchType;
+    }
+  }
+
+  return {
+    formRef,
+    init,
+    dynamicRowValues,
+    matchType,
+    registerModal,
+    handleSubmit,
+    handleCancel,
+    handleSave,
+    doSaveQueryInfo,
+    saveInfo,
+    saveTreeData,
+    handleRemoveSaveInfo,
+    handleTreeSelect,
+    fieldTreeData,
+    addOne,
+    removeOne,
+    setFormModel,
+    getSchema,
+    loading,
+    getQueryInfo,
+    initDefaultValues,
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/auto/useTableColumns.ts b/src/views/super/online/cgform/hooks/auto/useTableColumns.ts
new file mode 100644
index 0000000..4390782
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/auto/useTableColumns.ts
@@ -0,0 +1,648 @@
+import type { Ref } from 'vue';
+import type { ExtConfigType } from '../../types';
+import { HrefSlots, OnlineColumn } from '/@/components/jeecg/OnLine/types/onlineConfig';
+import { filterMultiDictObjs } from '/@/utils/dict/JDictSelectUtil';
+import { computed, defineAsyncComponent, h, reactive, ref, toRaw, unref, watch, markRaw } from 'vue';
+import { useRouter } from 'vue-router';
+import { Tag as ATag } from 'ant-design-vue';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { getAreaTextByCodeAnyLevel } from '/@/components/Form/src/utils/Area';
+import { createImgPreview } from '@/components/Preview';
+import { importViewsFile, _eval } from '/@/utils';
+import { useModal } from '/@/components/Modal';
+import LinkTableListPiece from '../../extend/linkTable/LinkTableListPiece.vue'
+import { getToken } from "/@/utils/auth";
+import { downloadFile } from '/@/api/common/api';
+import { getWeekMonthQuarterYear, split } from '/@/utils';
+import { getItemColor } from "@/utils/dict/DictColors";
+
+/**
+ * 获取实际列表需要的column配置
+ * @param onlineTableContext 从数据库中查出来的数据
+ * @param extConfigJson 扩展配置JSON
+ */
+export function useTableColumns(onlineTableContext, extConfigJson: Ref<ExtConfigType | undefined>) {
+  // 获取路由器对象 href跳转用到
+  let router = useRouter();
+
+  // 列信息
+  const columns = ref<Array<OnlineColumn>>([]);
+  /**
+   * 20260309
+   * liaozhiyang
+   * 【issues/9336】列宽拖动不了
+   * */
+  function applyResizableColumns(cols: OnlineColumn[]) {
+    cols.forEach((column) => {
+      if (!column.width) {
+        if (column.fieldType === 'date' || column.fieldType === 'Date') {
+          column.width = 120;
+        } else if (column.fieldType === 'link_table') {
+          column.width = 180;
+        } else {
+          column.width = 150;
+        }
+      }
+      column.resizable = true;
+    });
+  }
+
+  // 是否有bpm_status
+  //const hasBpmStatus = ref<boolean>(false)
+  // 字典信息
+  const dictOptionInfo = ref<any>({});
+  //已选择的值
+  const selectedKeys = ref<any[]>([]);
+  //选择的行记录
+  //const selectRows = ref<Array<any>>([]);
+  // 选择列配置 --computed有问题
+  const rowSelection = ref<any>(null);
+  // 是否有滚动条
+  let enableScrollBar = ref(true);
+  // table属性scroll
+  let tableScroll = computed(() => {
+    if (enableScrollBar.value == true) {
+      return undefined;
+    } else {
+      // X轴没有滚动条
+      return { x: false };
+    }
+  });
+
+  //用于 online列表的 某列的点击弹窗事件-弹窗显示其他表单
+  const [registerOnlineHrefModal, { openModal: openOnlineHrefModal }] = useModal();
+  const hrefMainTableId = ref('')
+  // 用于 online表单中 弹出别的表单
+  const [registerPopModal, { openModal: openPopModal }] = useModal();
+  const popTableId = ref('')
+
+  // 对查询列信息的请求结果 处理方法
+  function handleColumnResult(result, type = 'checkbox') {
+    // 字典设置
+    dictOptionInfo.value = result.dictOptions;
+    // rowSelection设置
+    if (result.checkboxFlag == 'Y') {
+      rowSelection.value = {
+        selectedRowKeys: selectedKeys,
+        onChange: onSelectChange,
+        type,
+      };
+    } else {
+      rowSelection.value = null;
+    }
+    // 是否允许滚动条
+    enableScrollBar.value = result.scrollFlag == 1;
+
+    let dataColumns = result.columns;
+    dataColumns.forEach((column) => {
+      if (extConfigJson?.value?.canResizeColumn === 1) {
+        // update-begin--author:liaozhiyang---date:20260309---for:【issues/9336】列宽拖动不了
+        applyResizableColumns([column]);
+        // update-end--author:liaozhiyang---date:20260309---for:【issues/9336】列宽拖动不了
+      }
+      
+      // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-4161】列支持固定功能
+      if (column.fieldExtendJson) {
+        const json = JSON.parse(column.fieldExtendJson);
+        if (!!json.isFixed) {
+          column.fixed = 'left';
+        }
+      }
+      // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-4161】列支持固定功能
+      // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转
+      if (column.hrefSlotName && column.scopedSlots) {
+        const obj = result.fieldHrefSlots?.find((item) => item.slotName === column.hrefSlotName);
+        if (obj) {
+          column.fieldHref = obj;
+        }
+      }
+      // update-end--author:liaozhiyang---date:20240517---for：【TV360X-129】增加富文本控件配置href跳转
+      Object.keys(column).map((key) => {
+        // 删掉空值的字段（不删除 空字符串('') 或 数字 0 ）
+        if (column[key] == null) {
+          delete column[key];
+        }
+      });
+    });
+
+    // href 跳转
+    let fieldHrefSlots: HrefSlots[] = result.fieldHrefSlots;
+    const fieldHrefSlotKeysMap = {};
+    fieldHrefSlots.forEach((item) => (fieldHrefSlotKeysMap[item.slotName] = item));
+
+    let tableColumns: OnlineColumn[] = [];
+    // 处理列中的 href 跳转和 dict 字典，使两者可以兼容存在
+    tableColumns = handleColumnHrefAndDict(dataColumns, fieldHrefSlotKeysMap);
+    // 是否有 bpm_status字段 如果有，列表操作按钮需要增加提交流程按钮
+    bpmStatusFilter(tableColumns);
+
+    console.log('-----列表列配置----', tableColumns);
+    // 如果是树列表 需要设置第一列字段 及 第一列align
+    if (onlineTableContext.isTree() === true) {
+      // 找到第一列的配置
+      let firstField = result.textField;
+      let index = -1;
+      for (let i = 0; i < tableColumns.length; i++) {
+        if (tableColumns[i].dataIndex == firstField) {
+          index = i;
+          break;
+        }
+      }
+      if (index > 0) {
+        //如果是0或是-1不需要处理
+        let deleteColumns = tableColumns.splice(index, 1);
+        tableColumns.unshift(deleteColumns[0]);
+      }
+      //第一列居左
+      if (tableColumns.length > 0) {
+        tableColumns[0].align = 'left';
+      }
+    }
+    columns.value = tableColumns;
+    // 列发生了变化，需要重新渲染表格
+    onlineTableContext.reloadTable();
+  }
+
+  /**
+   * 表格选择事件 [expose]
+   * @param selectedRowKeys
+   * @param selectRow
+   */
+  function onSelectChange(selectedRowKeys, selectedRows) {
+    selectedKeys.value = selectedRowKeys;
+    onlineTableContext['selectedRows'] = toRaw(selectedRows);
+    onlineTableContext['selectedRowKeys'] = toRaw(selectedRowKeys);
+  }
+
+  /**
+   * 处理列的href和字典翻译
+   */
+  function handleColumnHrefAndDict(columns: OnlineColumn[], fieldHrefSlotKeysMap: {}): OnlineColumn[] {
+    for (let column of columns) {
+      let { customRender, hrefSlotName, fieldType } = column;
+      // online 报表中类型配置为日期（yyyy-MM-dd ），但是实际展示为日期时间格式(yyyy-MM-dd HH:mm:ss) issues/3042
+      if (fieldType == 'date' || fieldType == 'Date') {
+        column.customRender = ({ text }) => {
+          if (!text) {
+            return '';
+          }
+          if (text.length > 10) {
+            return text.substring(0, 10);
+          }
+          return text;
+        };
+      } else if (fieldType == 'link_table') {
+        // 关联记录列表展示
+        // update-begin--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        const fieldExtendJson = column.fieldExtendJson ?? '{}';
+        const json = JSON.parse(fieldExtendJson);
+        // update-end--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        column.customRender = ({ text, record }) => {
+          if (!text) {
+            return '';
+          }
+          if(onlineTableContext.isPopList===true){
+            // 如果是弹窗的列表，关联记录的列只支持数据翻译，不需要跳转逻辑
+            return record[column.dataIndex+"_dictText"]
+          }else{
+            let tempIdArray = (text+'').split(',');
+            //update-begin-author:taoyan date:2023-2-15 for: QQYUN-4286【online表单】主子表开启联合查询 功能测试报错打不开
+            let tempLabelArray = [];
+            if(record[column.dataIndex+"_dictText"]){
+              tempLabelArray = record[column.dataIndex+"_dictText"].split(',');
+            }
+            //update-end-author:taoyan date:2023-2-15 for: QQYUN-4286【online表单】主子表开启联合查询 功能测试报错打不开
+            let renderResult:any = []
+            for(let i=0;i<tempIdArray.length;i++){
+              let renderObj = h(
+                LinkTableListPiece,
+                {
+                  id: tempIdArray[i],
+                  text: tempLabelArray[i],
+                  onTab:(id)=>handleClickLinkTable(id, hrefSlotName, json.isListReadOnly)
+                }
+              );
+              renderResult.push(renderObj)
+            }
+            if(renderResult.length==0){
+              return ''
+            }
+            //如果需要显示全，但是会换行：display: flex;width: 100%;flex-wrap: wrap;flex-direction: row;
+            return h('div',{style:{'overflow':'hidden'}}, renderResult);
+          }
+        };
+      } else if (fieldType === 'popup_dict') {
+        // update-begin--author:liaozhiyang---date:20240402---for：【QQYUN-8833】JPopupDict的列表翻译
+        column.customRender = ({ text, record }) => {
+          const dict = record[column.dataIndex + '_dictText'];
+          if (dict != undefined) {
+            return record[column.dataIndex + '_dictText'];
+          }
+          return text;
+        };
+        // update-end--author:liaozhiyang---date:20240402---for：【QQYUN-8833】JPopupDict的列表翻译
+      } else {
+        if (!hrefSlotName && column.scopedSlots && column.scopedSlots.customRender) {
+          //【Online报表】字典和href互斥 这里通过fieldHrefSlotKeysMap 先找到是href的列
+          if (fieldHrefSlotKeysMap.hasOwnProperty(column.scopedSlots.customRender)) {
+            hrefSlotName = column.scopedSlots.customRender;
+          }
+        }
+        // 如果 customRender 有值则代表使用了字典
+        // 如果 hrefSlotName 有值则代表使用了href跳转
+        // 两者可以兼容。兼容的具体思路为：先获取到字典替换的值，再添加href链接跳转
+        if (customRender || hrefSlotName) {
+          let dictCode = customRender as string;
+          let replaceFlag = '_replace_text_';
+          // 自定义渲染函数的列 需要手动配置ellipsis
+          column.ellipsis = true;
+          column.customRender = ({ text, record }) => {
+            let value = text;
+            const valueSpan: any[] = [];
+            const getValue = () => valueSpan.length ? valueSpan : value;
+            // 如果 dictCode 有值，就进行字典转换
+            if (dictCode) {
+              if (dictCode.startsWith(replaceFlag)) {
+                let textFieldName = dictCode.replace(replaceFlag, '');
+                value = record[textFieldName];
+              } else {
+                const dictItems = filterMultiDictObjs(unref(dictOptionInfo)[dictCode], text);
+                value = dictItems.map((item) => {
+                  if (item.hasColor) {
+                    //获取字体颜色
+                    const fontColor = getItemColor(item.color);
+                    valueSpan.push(h(ATag, {
+                      color: item.color,
+                      style: {
+                        'color': fontColor,
+                        'margin-left': '5px',
+                      },
+                    }, () => item.text))
+                  }
+                  return item.text;
+                }).join(',');
+              }
+            }
+            // 扩展参数设置列的内容长度
+            if (column.showLength) {
+              if (value && value.length > column.showLength) {
+                value = value.substr(0, column.showLength) + '...';
+              }
+            }
+            // 如果 hrefSlotName 有值，就生成一个 a 标签，包裹住字典替换后（或原生）的值
+            if (hrefSlotName) {
+              let field = fieldHrefSlotKeysMap[hrefSlotName];
+              if (field) {
+                return h(
+                  'a',
+                  {
+                    onClick: () => handleClickFieldHref(field, record),
+                  },
+                  getValue(),
+                );
+              }
+            }
+            return h('span', {}, getValue());
+          };
+        }
+
+        //  老版本叫scopedSlots 新版叫slots
+        if (column.scopedSlots) {
+          // slot的列 需要手动配置ellipsis
+          column.ellipsis = true;
+          let slots = column.scopedSlots;
+          column['slots'] = slots;
+          delete column.scopedSlots;
+        }
+      }
+    }
+    return columns;
+  }
+
+  /**
+   * href 点击事件
+   * @param field
+   * @param record
+   */
+  function handleClickFieldHref(field, record) {
+    let href = field.href;
+    let urlPattern = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/;
+    let compPattern = /\.vue(\?.*)?$/;
+    let jsPattern = /{{([^}]+)}}/g; // {{ xxx }}
+    if (typeof href === 'string') {
+      if(href.startsWith('ONLINE:')){
+        // ONLINE:tableId:fieldName
+        let arr = href.split(':')
+        hrefMainTableId.value = arr[1];
+        let fieldName = arr[2];
+        openOnlineHrefModal(true, {
+          isUpdate: true,
+          disableSubmit: true,
+          hideSub: true,
+          record:{id: record[fieldName]},
+        })
+      }else{
+        href = href.trim().replace(/\${([^}]+)?}/g, (_s1, s2) => record[s2]);
+        // 执行 {{...}} JS增强语句
+        if (jsPattern.test(href)) {
+          href = href.replace(jsPattern, function (text, s0) {
+            try {
+              // 支持 {{ ACCESS_TOKEN }} 占位符
+              if (s0.trim() === 'ACCESS_TOKEN') {
+                return getToken()
+              }
+
+              // update-begin--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+              return _eval(s0);
+              // update-end--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+            } catch (e) {
+              console.error(e);
+              return text;
+            }
+          });
+        }
+        if (urlPattern.test(href)) {
+          window.open(href, '_blank');
+        } else if (compPattern.test(href)) {
+          // 处理弹框
+          openHrefCompModal(href);
+        } else {
+          router.push(href);
+        }
+      }
+    }
+  }
+
+  // 样式
+  const dialogStyle = {
+    top: 0,
+    left: 0,
+    height: '100%',
+    margin: 0,
+    padding: 0,
+  };
+
+  // update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+  // 弹窗属性配置
+  const hrefComponent = reactive({
+    model: {
+      title: '',
+      okText: '关闭',
+      width: '100%',
+      open: false,
+      destroyOnClose: true,
+      style: dialogStyle,
+      // dialogStyle: dialogStyle,
+      bodyStyle: { padding: '8px', height: 'calc(100vh - 108px)', overflow: 'auto', overflowX: 'hidden' },
+      // 隐藏掉取消按钮
+      cancelButtonProps: { style: { display: 'none' } },
+    },
+    on: {
+      ok: () => (hrefComponent.model.open = false),
+      cancel: () => (hrefComponent.model.open = false),
+    },
+    is: <any>null,
+    params: {},
+  });
+  // update-end--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+
+  // 超链点击事件--> 打开一个modal窗口
+  function openHrefCompModal(href) {
+    // 解析 href 参数
+    let index = href.indexOf('?');
+    let path = href;
+    if (index !== -1) {
+      path = href.substring(0, index);
+      let paramString = href.substring(index + 1, href.length);
+      let paramArray = paramString.split('&');
+      let params = {};
+      paramArray.forEach((paramObject) => {
+        let paramItem = paramObject.split('=');
+        params[paramItem[0]] = paramItem[1];
+      });
+      hrefComponent.params = params;
+    } else {
+      hrefComponent.params = {};
+    }
+    // update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+    hrefComponent.model.open = true;
+    // update-end--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+    hrefComponent.model.title = '操作';
+    hrefComponent.is = markRaw(defineAsyncComponent(() => importViewsFile(path)));
+  }
+
+  //如果是树列表 操作列只能右侧固定
+  let fixedAction:any = 'right';
+  if(onlineTableContext.isTree()){
+    fixedAction = 'right'
+  }
+  const actionColumn = reactive<OnlineColumn>({
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: fixedAction,
+    align: 'center',
+    width: 150,
+  });
+
+  // 监听扩展参数的固定列配置，动态改变操作列的固定方式
+watch(() => extConfigJson?.value, () => {
+  if (extConfigJson?.value?.tableFixedAction === 1) {
+    actionColumn.fixed = extConfigJson?.value?.tableFixedActionType || 'right';
+    if (onlineTableContext.isTree()) {
+      actionColumn.fixed = 'right';
+    }
+  }
+  // update-begin--author:liaozhiyang---date:20260309---for:【issues/9336】列宽拖动不了
+  if (extConfigJson?.value?.canResizeColumn === 1 && columns.value.length > 0) {
+    applyResizableColumns(columns.value);
+    onlineTableContext.reloadTable();
+  }
+  // update-end--author:liaozhiyang---date:20260309---for:【issues/9336】列宽拖动不了
+});
+
+  // 流程按钮状态
+  function bpmStatusFilter(tableColumns: OnlineColumn[]): boolean {
+    let flag = false;
+    for (let i = 0; i < tableColumns.length; i++) {
+      let item = tableColumns[i];
+      let fieldName = item.dataIndex;
+      if (fieldName!.toLowerCase() == 'bpm_status') {
+        flag = true;
+        break;
+      }
+    }
+    onlineTableContext['hasBpmStatus'] = flag;
+    return flag;
+  }
+
+  /**
+   * 文件
+   * @param text
+   */
+  function downloadRowFile(text, record, column, id) {
+    if (!text) {
+      return;
+    }
+    // update-begin--author:liaozhiyang---date:20240124---for：【QQYUN-8020】online 表单有多个文件走下载接口
+    if (text.indexOf(',') > 0) {
+      downloadFile(`/online/cgform/field/download/${id}/${record.id}/${column.dataIndex}`, `文件_${record.id}.zip`);
+    } else {
+      const url = getFileAccessHttpUrl(text);
+      window.open(url);
+    }
+    // update-end--author:liaozhiyang---date:20240124---for：【QQYUN-8020】online 表单有多个文件走下载接口
+  }
+
+  /**
+   * 图片
+   * @param text
+   */
+  function getImgView(text) {
+    if (text && text.indexOf(',') > 0) {
+      // update-begin--author:liaozhiyang---date:20250325---for：【issues/7990】图片参数中包含逗号会错误的识别成多张图
+      text = split(text)[0];
+      // update-end--author:liaozhiyang---date:20250325---for：【issues/7990】图片参数中包含逗号会错误的识别成多张图
+    }
+    return getFileAccessHttpUrl(text);
+  }
+
+  /**
+   * 根据编码获取省市区文本
+   * @param code
+   */
+  function getPcaText(code, column) {
+    if (!code) {
+      return '';
+    }
+    // update-begin--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+    let includeParent = true;
+    let fieldExtendJson = column?.fieldExtendJson;
+    let level = 3;
+    if (fieldExtendJson) {
+      fieldExtendJson = JSON.parse(fieldExtendJson);
+      if (['province', 'city', 'region'].includes(fieldExtendJson.displayLevel)) {
+        if (fieldExtendJson.displayLevel === 'province') {
+          level = 1;
+        } else if (fieldExtendJson.displayLevel === 'city') {
+          level = 2;
+        } else if (fieldExtendJson.displayLevel === 'region') {
+          level = 3;
+        }
+        includeParent = false;
+      }
+    }
+    return getAreaTextByCodeAnyLevel(code, includeParent, level as 1 | 2 | 3);
+    // update-end--author:liaozhiyang---date:20260204---for:【QQYUN-14694】online支持配置独立的省、市、县
+  }
+
+  /**
+   * 日期格式化
+   * @param text
+   */
+  function getFormatDate(text, column) {
+    if (!text) {
+      return '';
+    }
+    let a = text;
+    if (a.length > 10) {
+      a = a.substring(0, 10);
+    }
+    // update-begin--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+    let fieldExtendJson = column?.fieldExtendJson;
+    if (fieldExtendJson) {
+      fieldExtendJson = JSON.parse(fieldExtendJson);
+      if (fieldExtendJson.picker && fieldExtendJson.picker != 'default') {
+        const result = getWeekMonthQuarterYear(a);
+        return result[fieldExtendJson.picker];
+      }
+    }
+    // update-end--author:liaozhiyang---date:20240430---for：【issues/6094】online 日期(年月日)控件增加年、年月，年周，年季度等格式
+    return a;
+  }
+
+  watch(selectedKeys, () => {
+    onlineTableContext['selectedRowKeys'] = toRaw(selectedKeys.value);
+  });
+
+  onlineTableContext['clearSelectedRow'] = () => {
+    selectedKeys.value = [];
+    onlineTableContext['selectedRows'] = [];
+    onlineTableContext['selectedRowKeys'] = [];
+  };
+
+  /**
+   * 预览列表 cell 图片
+   * @param text
+   */
+  function viewOnlineCellImage(text) {
+    if (text) {
+      let imgList: any = [];
+      // update-begin--author:liaozhiyang---date:20250325---for：【issues/7990】图片参数中包含逗号会错误的识别成多张图
+      const arr = split(text);
+      // update-end--author:liaozhiyang---date:20250325---for：【issues/7990】图片参数中包含逗号会错误的识别成多张图
+      for (let str of arr) {
+        if (str) {
+          imgList.push(getFileAccessHttpUrl(str));
+        }
+      }
+      createImgPreview({ imageList: imgList });
+    }
+  }
+
+  /**
+   * link table控件在列表上显示 支持点击跳转表单
+   * @param id
+   * @param hrefTableName
+   */
+  const onlinePopModalRef = ref();
+  async function handleClickLinkTable(id, hrefTableName, isListReadOnly){
+    popTableId.value = hrefTableName;
+    let formStatus =  await onlinePopModalRef.value.getFormStatus();
+    // 判断当前表单是否支持编辑，不能编辑跳详情表单
+    if(formStatus==true){
+      hrefMainTableId.value = hrefTableName;
+      openOnlineHrefModal(true, {
+        isUpdate: true,
+        disableSubmit: true,
+        hideSub: true,
+        record:{id: id},
+      })
+    }else{
+      openPopModal(true, {
+        isUpdate: true,
+        // update-begin--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        disableSubmit: isListReadOnly ? true : false,
+        // update-end--author:liaozhiyang---date:20250318---for：【issues/7930】表格列表中支持关联记录配置是否只读
+        record: {
+          id: id
+        }
+      });
+    }
+  }
+  
+  return {
+    columns,
+    actionColumn,
+    selectedKeys,
+    rowSelection,
+    enableScrollBar,
+    tableScroll,
+    downloadRowFile,
+    getImgView,
+    getPcaText,
+    getFormatDate,
+    handleColumnResult,
+    onSelectChange,
+    hrefComponent,
+    viewOnlineCellImage,
+    hrefMainTableId,
+    registerOnlineHrefModal,
+    registerPopModal,
+    openPopModal,
+    openOnlineHrefModal,
+    onlinePopModalRef,
+    popTableId,
+    handleClickFieldHref,
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/useCgformList.ts b/src/views/super/online/cgform/hooks/useCgformList.ts
new file mode 100644
index 0000000..e9f195c
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useCgformList.ts
@@ -0,0 +1,503 @@
+import { h, ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { Input, Radio, RadioGroup } from 'ant-design-vue';
+import { ActionItem, BasicColumn, FormSchema } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import { useDrawer } from '/@/components/Drawer';
+import { CgformPageType } from '../types';
+import { useListPage } from '/@/hooks/system/useListPage';
+import {
+  doBatchDelete,
+  doBatchRemove,
+  doSingleDelete,
+  doSingleRemove,
+  doCopyOnlineView,
+  doDatabaseSync,
+  doCopyTable,
+  list,
+} from '../cgform.api';
+// import { useCopyModal } from './useCopyCgformModal';
+import { isArray } from '/@/utils/is';
+import {useCgformStore} from "../store/cgformState";
+import {showListDeleteConfirm} from "./useCgformWidgets.jsx";
+
+interface IOptions {
+  // 页面类型
+  pageType: CgformPageType;
+  designScope: string;
+  columns: BasicColumn[];
+  formSchemas: FormSchema[];
+}
+
+export function useCgformList(options: IOptions) {
+  const isNormalPage = options.pageType === CgformPageType.normal;
+  const router = useRouter();
+  const cgformStore = useCgformStore();
+  const tableRef = ref();
+  // 列表页面公共参数、方法
+  const pageContext = useListPage({
+    designScope: options.designScope,
+    tableProps: {
+      api: list,
+      columns: options.columns,
+      formConfig: {
+        //labelWidth: 200,
+        schemas: options.formSchemas,
+      },
+      beforeFetch: (params) => {
+        let copyType = isNormalPage ? 0 : 1;
+        let physicId = isNormalPage ? undefined : router.currentRoute.value.params.code;
+        // TODO 等字典组件支持逗号分割后删除改代码【LOWCOD-2371】
+        if (isArray(params.tableType_MultiString)) {
+          params.tableType_MultiString = params.tableType_MultiString.join(',');
+        }
+        return Object.assign(params, { copyType, physicId });
+      },
+    },
+  });
+  const { tableContext, createMessage: $message, createConfirm: $confirm } = pageContext;
+  // 注册table数据
+  const [, { reload, setLoading }, { selectedRowKeys, selectedRows }] = tableContext;
+
+  // 注册编辑弹窗 e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+  const [registerCgformModal, cgformModal] = useModal();
+  // 注册从数据库导入表单
+  const [registerDbToOnlineModal, dbToOnlineModal] = useModal();
+  // 注册ai建表弹窗
+  const [registerAiToOnlineModal, aiToOnlineModal] = useModal();
+  // 注册代码生成弹窗
+  const [registerCodeGeneratorModal, codeGeneratorModal] = useModal();
+  // 注册自定义按钮弹窗
+  const [registerCustomButtonModal, customButtonModal] = useModal();
+  // 注册JS增强弹窗
+  const [registerEnhanceJsModal, enhanceJsModal] = useModal();
+  // 注册SQL增强弹窗
+  const [registerEnhanceSqlModal, enhanceSqlModal] = useModal();
+  // 注册Java增强弹窗
+  const [registerEnhanceJavaModal, enhanceJavaModal] = useModal();
+  // 注册权限管理抽屉
+  const [registerAuthManagerDrawer, authManagerDrawer] = useDrawer();
+  // 注册角色授权弹窗
+  const [registerAuthSetterModal, authSetterModal] = useModal();
+
+  function onAdd() {
+    cgformModal.openModal(true, { isUpdate: false });
+  }
+  function onAiCreateTable(){
+    aiToOnlineModal.openModal(true);
+  }
+  function  onCreateAiTable() {
+    reload();
+  }
+  let thatRecord: Nullable<Recordable> = null
+
+  function onEdit(record) {
+    thatRecord = record
+    cgformModal.openModal(true, { isUpdate: true, record });
+  }
+
+  function onSuccess() {
+    if (thatRecord?.id) {
+      cgformStore.addChangedTable(thatRecord.id)
+      thatRecord = null
+    }
+    reload();
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(id) {
+    await doSingleDelete(id);
+    reload();
+  }
+
+  /**
+   * 移除事件
+   */
+  async function handleRemove(id) {
+    await doSingleRemove(id);
+    reload();
+  }
+
+  /**
+   * 删除单条数据
+   * @param record
+   */
+  function onDeleteRecord(record: Recordable) {
+    return showListDeleteConfirm(() => handleDelete(record.id), () => handleRemove(record.id))
+  }
+
+  // 批量删除
+  function onDeleteBatch() {
+    let idList = selectedRowKeys.value as string[];
+    if (idList.length <= 0) {
+      $message.warning('请先选择一条记录！');
+      return;
+    }
+    showListDeleteConfirm(
+      () => executeDelete(doBatchDelete, idList, true),
+      () => executeDelete(doBatchRemove, idList, true)
+    )
+  }
+
+  /**
+   * 执行删除操作
+   * @param fn 删除方法
+   * @param idList 删除参数
+   * @param clearSelected 清空选择
+   */
+  async function executeDelete(fn: Fn, idList: string[], clearSelected = false) {
+    try {
+      setLoading(true);
+      const res = await fn(idList);
+      reload();
+      if (clearSelected) {
+        selectedRowKeys.value = [];
+      }
+      return res;
+    } finally {
+      setLoading(false);
+    }
+    return Promise.reject();
+  }
+
+  // 显示自定义按钮弹窗
+  function onShowCustomButton() {
+    getSelectedRows(([row]) => customButtonModal.openModal(true, { row }));
+  }
+
+  // 显示 js 增强弹窗
+  function onShowEnhanceJs() {
+    getSelectedRows(([row]) => enhanceJsModal.openModal(true, { row }));
+  }
+
+  // 显示 sql 增强弹窗
+  function onShowEnhanceSql() {
+    getSelectedRows(([row]) => enhanceSqlModal.openModal(true, { row }));
+  }
+
+  // 显示 java 增强弹窗
+  function onShowEnhanceJava() {
+    getSelectedRows(([row]) => enhanceJavaModal.openModal(true, { row }));
+  }
+
+  // 显示导入数据库表弹窗
+  function onImportDbTable() {
+    dbToOnlineModal.openModal(true, {});
+  }
+
+  function getSelectedRows(fn: Fn, min = 1, max = 1) {
+    if (selectedRows.value.length < min) {
+      $message.warning(`请先至少选中 ${min} 条记录`);
+    } else if (selectedRows.value.length > max) {
+      $message.warning(`最多只能选中 ${min} 条记录`);
+    } else {
+      fn(selectedRows.value);
+    }
+  }
+
+  // 显示代码生成弹窗
+  function onGenerateCode() {
+    if (selectedRows.value.length === 0) {
+      $message.warning('请先选中一条记录');
+    } else if (selectedRows.value.length > 1) {
+      $message.warning('代码生成只能选中一条记录');
+    } else {
+      let row = selectedRows.value[0];
+      if (!row) {
+        $message.warning('请选中当前页的数据！');
+      } else if (row.isDbSynch != 'Y') {
+        $message.warning('请先同步数据库！');
+      } else if (row.tableType == 3) {
+        $message.warning('请选中该表对应的主表');
+      } else {
+        codeGeneratorModal.openModal(true, { code: row.id });
+      }
+    }
+  }
+
+  // 功能测试
+  function onGoToTest(record) {
+    console.log(record);
+    if (record.isTree == 'Y') {
+      router.push({ path: '/online/cgformTreeList/' + record.id });
+    } else {
+      // update-begin--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+      switch (record.themeTemplate) {
+        case 'erp':
+          router.push({ path: '/online/cgformErpList/' + record.id });
+          break;
+        case 'tab':
+          router.push({ path: '/online/cgformTabList/' + record.id });
+          break;
+        case 'innerTable':
+          router.push({ path: '/online/cgformInnerTableList/' + record.id });
+          break;
+        default:
+          router.push({ path: '/online/cgformList/' + record.id });
+          break;
+      }
+      // update-end--author:liaozhiyang---date:20230818---for：【QQYUN-5803】online一对多Erp风格
+    }
+  }
+
+  // 同步数据库
+  function onSyncDatabase(record) {
+    const syncMethod = ref('normal');
+    const disabled = ref(false);
+    const modalFunc = $confirm({
+      iconType: 'info',
+      title: '同步数据库',
+      content: () =>
+        h(
+          'div',
+          {
+            style: 'margin: 20px 0;',
+          },
+          h(
+            RadioGroup,
+            {
+              value: syncMethod.value,
+              disabled: disabled.value,
+              'onUpdate:value': (v) => (syncMethod.value = v),
+            },
+            () => [h(Radio, { value: 'normal' }, () => '普通同步（保留表数据）'), h(Radio, { value: 'force' }, () => '强制同步（删除表，重新生成）')]
+          )
+        ),
+      maskClosable: true,
+      okText: '开始同步',
+      async onOk() {
+        disabled.value = true;
+        modalFunc.update({
+          maskClosable: false,
+          keyboard: false,
+          okText: '同步中…',
+          okButtonProps: { loading: disabled.value },
+          cancelButtonProps: { disabled: disabled.value },
+        });
+        try {
+          await doDatabaseSync(record.id, syncMethod.value);
+        } catch (e: any) {
+          // update-begin--author:liaozhiyang---date:20240521---for：【TV360X-244】同步数据库没权限时提示两次
+          // $message.warn(e.message || e);
+          // update-end--author:liaozhiyang---date:20240521---for：【TV360X-244】同步数据库没权限时提示两次
+        } finally {
+          await reload();
+          // update-begin--author:liaozhiyang---date:20250318---for：【issues/7931】勾选后再同步数据库，再点击代码生成无法生成代码
+          nextTick(() => {
+            if (selectedRows.value.length) {
+              selectedRows.value.forEach((item) => {
+                const dataSource = tableRef.value.getDataSource() ?? [];
+                const findItem = dataSource.find((o) => o['id'] === item['id']);
+                if (findItem) {
+                  Object.assign(item, findItem);
+                }
+              });
+            }
+          });
+          // update-end--author:liaozhiyang---date:20250318---for：【issues/7931】勾选后再同步数据库，再点击代码生成无法生成代码
+        }
+      },
+    });
+  }
+
+  // const { createCopyModal } = useCopyModal();
+  const [registerAddressModal, addressModal] = useModal();
+
+  // 显示online地址弹窗
+  function onShowOnlineUrl(record) {
+    let onlineUrl: string;
+    if (record.themeTemplate === 'erp') {
+      onlineUrl = `/online/cgformErpList/${record.id}`;
+    } else if (record.themeTemplate === 'innerTable') {
+      onlineUrl = `/online/cgformInnerTableList/${record.id}`;
+    } else if (record.themeTemplate === 'tab') {
+      onlineUrl = `/online/cgformTabList/${record.id}`;
+    } else if (record.isTree == 'Y') {
+      onlineUrl = `/online/cgformTreeList/${record.id}`;
+    } else {
+      onlineUrl = `/online/cgformList/${record.id}`;
+    }
+    addressModal.openModal(true, {
+      title: `菜单链接【${record.tableTxt}】`,
+      content: onlineUrl,
+      copyText: onlineUrl,
+      copyTitle: `${record.tableTxt}`,
+      record,
+    });
+  }
+
+  /**
+   * 显示复制表弹窗
+   * @param record
+   */
+  function onCopyTable(record) {
+    const tableName = ref(record.tableName + '_copy');
+    $confirm({
+      title: '复制表',
+      content: () =>
+        h(
+          'div',
+          {
+            style: 'margin: 20px 0;',
+          },
+          [
+            '请输入新表名：',
+            h(Input, {
+              value: tableName.value,
+              'onUpdate:value': (v) => (tableName.value = v),
+            }),
+          ]
+        ),
+      iconType: 'info',
+      closable: true,
+      okText: '复制',
+      onOk() {
+        if (!tableName.value) {
+          $message.warning('请输入新表名');
+        } else if (tableName.value === record.tableName) {
+          $message.warning('新表名和旧表名不能一致');
+        } else {
+          doCopyTable(record.id, tableName.value).then(reload);
+        }
+      },
+    });
+  }
+
+  /**
+   * 删除视图
+   */
+  function doDeleteView(record) {
+    $confirm({
+      title: '删除',
+      content: '确定要删除该视图吗？',
+      iconType: 'warning',
+      closable: true,
+      maskClosable: true,
+      onOk: () => {
+        handleRemove(record.id)
+      }
+    })
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: () => onEdit(record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      {
+        label: '同步数据库',
+        onClick: () => onSyncDatabase(record),
+        ifShow: () => isNormalPage && record.isDbSynch != 'Y',
+      },
+      {
+        // TODO 功能测试
+        label: '功能测试',
+        class: ['low-app-hide'],
+        onClick: () => onGoToTest(record),
+        ifShow: () => (isNormalPage ? record.isDbSynch == 'Y' && record.tableType !== 3 : true),
+      },
+      {
+        label: '配置地址',
+        class: ['low-app-hide'],
+        onClick: () => onShowOnlineUrl(record),
+        ifShow: () => (isNormalPage ? record.isDbSynch == 'Y' && record.tableType !== 3 : true),
+      },
+      {
+        label: '权限控制',
+        onClick: () => authManagerDrawer.openDrawer(true, { cgformId: record.id, tableType: record.tableType}),
+      },
+      {
+        label: '角色授权',
+        onClick: () => authSetterModal.openModal(true, { cgformId: record.id }),
+      },
+      {
+        label: '视图管理',
+        class: ['low-app-hide'],
+        onClick: () => router.push(`/online/copyform/${record.id}`),
+        ifShow: () => isNormalPage && record.hascopy == 1,
+      },
+      {
+        label: '生成视图',
+        class: ['low-app-hide'],
+        // @ts-ignore
+        popConfirm: {
+          title: '确定生成视图吗？',
+          placement: 'left',
+          confirm: () => {
+            setLoading(true);
+            doCopyOnlineView(record.id)
+              .then(() => {
+                $message.success('已成功生成视图');
+              })
+              .finally(() => {
+                setLoading(false);
+                reload();
+              });
+          },
+        },
+        ifShow: () => isNormalPage,
+      },
+      {
+        label: '复制表',
+        onClick: () => onCopyTable(record),
+        ifShow: () => isNormalPage,
+      },
+      // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8485】online删除提示优化
+      {
+        label: '删除',
+        onClick: () => onDeleteRecord(record),
+        ifShow: () => isNormalPage,
+      },
+      // update-end--author:liaozhiyang---date:20240313---for：【QQYUN-8485】online删除提示优化
+      {
+        label: '删除视图',
+        onClick: () => doDeleteView(record),
+        ifShow: () => !isNormalPage,
+      },
+    ];
+  }
+
+  return {
+    router,
+    pageContext,
+    onAdd,
+    onAiCreateTable,
+    onSuccess,
+    onDeleteBatch,
+    onImportDbTable,
+    onGenerateCode,
+    onShowCustomButton,
+    onShowEnhanceJs,
+    onShowEnhanceSql,
+    onShowEnhanceJava,
+    onCreateAiTable,
+    getTableAction,
+    getDropDownAction,
+    registerCustomButtonModal,
+    registerEnhanceJsModal,
+    registerEnhanceSqlModal,
+    registerEnhanceJavaModal,
+    registerAuthManagerDrawer,
+    registerAuthSetterModal,
+    registerCgformModal,
+    registerDbToOnlineModal,
+    registerCodeGeneratorModal,
+    registerAiToOnlineModal,
+    registerAddressModal,
+    tableRef,
+  };
+}
diff --git a/src/views/super/online/cgform/hooks/useCgformWidgets.jsx b/src/views/super/online/cgform/hooks/useCgformWidgets.jsx
new file mode 100644
index 0000000..70bb3ff
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useCgformWidgets.jsx
@@ -0,0 +1,42 @@
+import {Button, Space} from 'ant-design-vue'
+import {useMessage} from "@/hooks/web/useMessage";
+
+const {createConfirm} = useMessage()
+
+/**
+ * 创建列表删除时的提示弹窗
+ * @param deleteFn 删除方法
+ * @param removeFn 移出方法
+ */
+export function showListDeleteConfirm(deleteFn, removeFn) {
+  const {destroy} = createConfirm({
+    title: '确认删除表单吗？',
+    content: () => (
+      <div style="font-size: 13px; color: #666; line-height: 1.8;">
+        <div>移除：仅删除配置，保留数据库表和数据</div>
+        <div>删除：同时删除数据库表和数据（不可恢复）</div>
+      </div>
+    ),
+    iconType: 'info',
+    closable: true,
+    maskClosable: true,
+    width: 400,
+    footer: () => (
+      <div style="text-align: right; margin-top: 12px;">
+        <Space>
+          <Button onClick={() => destroy()}>取消</Button>
+          <Button type="primary" ghost onClick={getFn(removeFn)}>移除表单</Button>
+          <Button type="primary" danger onClick={getFn(deleteFn)}>删除表单</Button>
+        </Space>
+      </div>
+    ),
+  });
+
+  function getFn(func) {
+    return async () => {
+      await func()
+      destroy()
+    }
+  }
+
+}
diff --git a/src/views/super/online/cgform/hooks/useCopyCgformModal.ts b/src/views/super/online/cgform/hooks/useCopyCgformModal.ts
new file mode 100644
index 0000000..b211e8b
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useCopyCgformModal.ts
@@ -0,0 +1,94 @@
+import { isRef, unref, watch, Ref, ComputedRef } from 'vue';
+import Clipboard from 'clipboard';
+import { ModalOptionsEx, useMessage } from '/@/hooks/web/useMessage';
+import {buildUUID} from "/@/utils/uuid";
+
+/** 带复制按钮的弹窗 */
+interface IOptions extends ModalOptionsEx {
+  // 要复制的文本，可以是一个 ref 对象，动态更新
+  copyText: string | Ref<string> | ComputedRef<string>;
+  copyTitle: string;
+  componentName: string;
+}
+
+const COPY_CLASS = 'copy-this-text';
+const CLIPBOARD_TEXT = 'data-clipboard-text';
+
+export function useCopyModal() {
+  return { createCopyModal };
+}
+
+const { createMessage, createConfirm } = useMessage();
+
+/** 创建复制弹窗 */
+function createCopyModal(options: Partial<IOptions>) {
+  const url = unref(options.copyText);
+  let menuComponentName = options.componentName? unref(options.componentName): null;
+  const insertMenuSql = `INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external) 
+                       VALUES ('${buildUUID()}', NULL, '${options.copyTitle}', '${url}', '1', '${menuComponentName}', NULL, 0, NULL, '1', 0.00, 0, NULL, 0, 1, 0, 0, 0, NULL, '1', 0, 0, 'admin', null, NULL, NULL, 0)`;
+
+  
+  let modal = createConfirm({
+    ...options,
+    iconType: options.iconType ?? 'info',
+    width: options.width ?? 500,
+    title: options.title ?? '复制',
+    closable: true,
+    maskClosable: options.maskClosable ?? true,
+    cancelText: '复制SQL',
+    okText: options.okText ?? '复制URL',
+    cancelButtonProps: {
+      class: 'copy-this-sql',
+      'data-clipboard-text': insertMenuSql,
+    } as any,
+    okButtonProps: {
+      ...options.okButtonProps,
+      class: COPY_CLASS,
+      [CLIPBOARD_TEXT]: url,
+    } as any,
+    onOk() {
+      return new Promise((resolve: any) => {
+        const clipboard = new Clipboard('.' + COPY_CLASS);
+        clipboard.on('success', () => {
+          clipboard.destroy();
+          createMessage.success('复制URL成功');
+          resolve();
+        });
+        clipboard.on('error', () => {
+          createMessage.error('该浏览器不支持自动复制');
+          clipboard.destroy();
+          resolve();
+        });
+      });
+    },
+    onCancel() {
+      return new Promise((resolve: any) => {
+        const clipboard = new Clipboard('.copy-this-sql');
+        clipboard.on('success', () => {
+          clipboard.destroy();
+          createMessage.success('复制插入菜单SQL成功');
+          resolve();
+        });
+        clipboard.on('error', () => {
+          createMessage.error('该浏览器不支持自动复制');
+          clipboard.destroy();
+          resolve();
+        });
+      });
+    },
+  });
+
+  // 动态更新 copyText
+  if (isRef(options.copyText)) {
+    watch(options.copyText, (copyText) => {
+      modal.update({
+        okButtonProps: {
+          ...options.okButtonProps,
+          class: COPY_CLASS,
+          [CLIPBOARD_TEXT]: copyText,
+        } as any,
+      });
+    });
+  }
+  return modal;
+}
diff --git a/src/views/super/online/cgform/hooks/useGuide.ts b/src/views/super/online/cgform/hooks/useGuide.ts
new file mode 100644
index 0000000..e80ff0c
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useGuide.ts
@@ -0,0 +1,95 @@
+import { onMounted, ref } from 'vue';
+import { useDesign } from '/@/hooks/web/useDesign';
+import intro from 'intro.js';
+import 'intro.js/minified/introjs.min.css';
+
+export const useGuide = () => {
+  const { prefixVar } = useDesign('');
+  const aiCreateTable = ref(`${prefixVar}-online-aiCreateTable`);
+  const newAddBtn = ref(`${prefixVar}-online-newAddBtn`);
+  const customBtn = ref(`${prefixVar}-online-customBtn`);
+  const enhanceJsBtn = ref(`${prefixVar}-online-enhanceJsBtn`);
+  const enhanceSqlBtn = ref(`${prefixVar}-online-enhanceSqlBtn`);
+  const enhanceJavaBtn = ref(`${prefixVar}-online-enhanceJavaBtn`);
+  const exportDbBtn = ref(`${prefixVar}-online-exportDbBtn`);
+  const codeGeneratorBtn = ref(`${prefixVar}-online-codeGenerator`);
+  const key = `${prefixVar}-online-guide`;
+  const guide = () => {
+    let boot = intro();
+    boot.setOptions({
+      nextLabel: '下一步',
+      prevLabel: '上一步',
+      //skipLabel: '跳过',
+      doneLabel: '完成',
+      steps: [
+        {
+          title: '第一步',
+          element: document.querySelector(`.${newAddBtn.value}`)!,
+          intro: '点击<strong>新增</strong>按钮，新建一个表。',
+        },
+        {
+          title: '第二步',
+          intro: `在列表中找到刚才新建数据，在操作列点击<strong>"更多"</strong>，选择<strong>"同步数据库"</strong>。`,
+        },
+        {
+          title: '第三步',
+          intro: `在列表中找到刚才新建数据，在操作列点击<strong>"更多"</strong>，选择<strong>"功能测试"</strong>。`,
+        },
+        {
+          title: 'AI建表',
+          element: document.querySelector(`.${aiCreateTable.value}`)!,
+          intro: `输入修饰词即可通过AI创建工作表`,
+        },
+        {
+          title: '代码生成',
+          element: document.querySelector(`.${codeGeneratorBtn.value}`)!,
+          intro: `选中一条记录，通过代码生成可将已配置好的表单，一键生成前后端代码，复杂需求可在此基础上进行二次开发。`,
+        },
+        {
+          title: '自定义按钮',
+          element: document.querySelector(`.${customBtn.value}`)!,
+          intro: `选中一条记录，点击自定义按钮，配置按钮相关信息即可在当前记录的<strong>"功能测试"</strong>页面新增一个按钮`,
+        },
+        {
+          title: 'JS强增',
+          element: document.querySelector(`.${enhanceJsBtn.value}`)!,
+          intro: `选中一条记录，通过js增强可为<strong>"自定义按钮"</strong>添加不同操作，可操作列表和表单数据等，也可以添加表单前置事件。`,
+        },
+        {
+          title: 'SQL增强',
+          element: document.querySelector(`.${enhanceSqlBtn.value}`)!,
+          intro: `选中一条记录，通过增强SQL，可以关联修改业务数据。`,
+        },
+        {
+          title: 'java增强',
+          element: document.querySelector(`.${enhanceJavaBtn.value}`)!,
+          intro: `选中一条记录，通过Java增强可在表单的增加、修改、和删除数据时实现额外的功能，类似spring中的AOP切面编程。`,
+        },
+        {
+          title: '导入数据库表',
+          element: document.querySelector(`.${exportDbBtn.value}`)!,
+          intro: `可将已有数据库中的表，直接导入生成表单。`,
+        },
+      ],
+    });
+    boot.start();
+  };
+  onMounted(() => {
+    if (!localStorage.getItem(key)) {
+      setTimeout(() => {
+        guide();
+        localStorage.setItem(key, '1');
+      }, 2e3);
+    }
+  });
+  return {
+    newAddBtn,
+    customBtn,
+    enhanceJsBtn,
+    enhanceSqlBtn,
+    exportDbBtn,
+    enhanceJavaBtn,
+    codeGeneratorBtn,
+    aiCreateTable
+  };
+};
diff --git a/src/views/super/online/cgform/hooks/useSchemas.ts b/src/views/super/online/cgform/hooks/useSchemas.ts
new file mode 100644
index 0000000..56d4d43
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useSchemas.ts
@@ -0,0 +1,928 @@
+import { computed, h, Ref } from 'vue';
+import { FormSchema, RenderCallbackParams } from '/@/components/Form';
+import { Input, Button } from 'ant-design-vue';
+import { FolderOpenOutlined } from '@ant-design/icons-vue';
+import { bindMapFormSchema } from '/@/utils/common/compUtils';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { rules } from '/@/utils/helper/validator';
+
+const { isDisabledAuth } = usePermission();
+
+export function useFormSchemas(_props, expandingConfig, handlers) {
+  type SpanType = 'one' | 'tow' | 'three';
+  // 动态布局
+  const mapFormSchema = bindMapFormSchema<SpanType>(
+    {
+      // 一列
+      one: {
+        colProps: { xs: 24, sm: 24 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 2 },
+          wrapperCol: { xs: 24, sm: 22 },
+        },
+      },
+      // 两列
+      tow: {
+        colProps: { xs: 24, sm: 12 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 4 },
+          wrapperCol: { xs: 24, sm: 20 },
+        },
+      },
+      // 三列
+      three: {
+        colProps: { xs: 24, sm: 8 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 6 },
+          wrapperCol: { xs: 24, sm: 18 },
+        },
+      },
+    },
+    'three'
+  );
+
+  // 表单 FormSchemas
+  const formSchemas: FormSchema[] = [
+    { label: '', field: 'id', component: 'Input', show: false },
+    { label: '', field: 'tableVersion', component: 'Input', show: false },
+    mapFormSchema({
+      label: '表名',
+      field: 'tableName',
+      component: 'Input',
+      required: true,
+      // 如果版本号为1 表示未曾修改 未曾同步 可以修改表名
+      dynamicDisabled: ({ model }) => model.tableVersion && model.tableVersion != 1,
+      dynamicRules: ({ model, schema }) => {
+        // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8492】online表名校验不允许输入中文
+        return [
+          {
+            validator: (_, value) => {
+              return new Promise((resolve, reject) => {
+                let reg = /[\u4E00-\u9FA5]/g;
+                if (reg.test(value)) {
+                  reject('不允许输入中文');
+                }
+                resolve();
+              });
+            },
+          },
+          // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+          {
+            validator: (_, value) => {
+              return new Promise((resolve, reject) => {
+                if (value.length > 50) {
+                  reject('表名最长50个字符');
+                }
+                resolve();
+              });
+            },
+          },
+          // update-end--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+          ...rules.duplicateCheckRule('onl_cgform_head', 'table_name', model, schema, true),
+        ];
+        // update-begin--author:liaozhiyang---date:20240313---for：【QQYUN-8492】online表名校验不允许输入中文
+      },
+    }),
+    mapFormSchema({
+      label: '表描述',
+      field: 'tableTxt',
+      component: 'Input',
+      required: true,
+      // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+      dynamicRules: ({ model, schema }) => {
+        return [
+          {
+            validator: (_, value) => {
+              return new Promise((resolve, reject) => {
+                if (value.length > 200) {
+                  reject('表描述最长200个字');
+                }
+                resolve();
+              });
+            },
+          },
+        ];
+      },
+      // update-end--author:liaozhiyang---date:20240603---for：【TV360X-631】表名字段名表描述字段备注长度校验
+    }),
+    mapFormSchema({
+      label: '表类型',
+      field: 'tableType',
+      component: 'Select',
+      defaultValue: 1,
+      componentProps: {
+        options: [
+          { label: '单表', value: 1 },
+          { label: '主表', value: 2 },
+          { label: '附表', value: 3 },
+        ],
+        onChange: handlers.onTableTypeChange,
+        allowClear: false,
+      },
+    }),
+    // 此处为占位符，用于将 relationType 顶到最右边
+    {
+      label: '',
+      field: 'relationType',
+      component: 'InputNumber',
+      render: () => '',
+      colProps: { xs: 0, sm: 17 },
+      ifShow: fieldIfShow,
+    },
+    mapFormSchema({
+      label: '',
+      field: 'relationType',
+      component: 'RadioGroup',
+      defaultValue: 0,
+      componentProps: {
+        options: [
+          { label: '一对多', value: 0 },
+          { label: '一对一', value: 1 },
+        ],
+        allowClear: false,
+        onChange: handlers.onRelationTypeChange,
+      },
+      colProps: { xs: 24, sm: 4 },
+      itemProps: {
+        colon: false,
+        labelCol: { xs: 0, sm: 0 },
+        wrapperCol: { xs: 24, sm: 24 },
+      },
+      ifShow: fieldIfShow,
+    }),
+    mapFormSchema({
+      label: '序号',
+      field: 'tabOrderNum',
+      component: 'InputNumber',
+      componentProps: {
+        style: {
+          width: '100%',
+        },
+      },
+      colProps: { xs: 24, sm: 3 },
+      itemProps: {
+        labelCol: { xs: 24, sm: 7 },
+        wrapperCol: { xs: 24, sm: 24 - 7 },
+      },
+      ifShow: fieldIfShow,
+    }),
+    mapFormSchema({
+      label: '表单分类',
+      field: 'formCategory',
+      component: 'JDictSelectTag',
+      defaultValue: 'temp',
+      componentProps: {
+        dictCode: 'ol_form_biz_type',
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '主键策略',
+      field: 'idType',
+      component: 'Select',
+      defaultValue: 'UUID',
+      componentProps: {
+        options: [
+          { label: 'ID_WORKER(分布式自增)', value: 'UUID' },
+          // { label: 'NATIVE(自增长方式)', value: 'NATIVE' },
+          // { label: 'SEQUENCE(序列方式)', value: 'SEQUENCE' },
+        ],
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '序号名称',
+      field: 'idSequence',
+      component: 'Input',
+      componentProps: {},
+      ifShow: fieldIfShow,
+    }),
+    mapFormSchema({
+      label: '显示复选框',
+      field: 'isCheckbox',
+      component: 'Select',
+      defaultValue: 'Y',
+      componentProps: {
+        options: [
+          { label: '是', value: 'Y' },
+          { label: '否', value: 'N' },
+        ],
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '主题模板',
+      field: 'themeTemplate',
+      component: 'Select',
+      defaultValue: 'normal',
+      componentProps: {
+        options: [
+          { label: '默认主题', value: 'normal' },
+          { label: 'ERP主题(一对多)', value: 'erp' },
+          { label: '内嵌子表主题(一对多)', value: 'innerTable' },
+          { label: 'TAB主题(一对多)', value: 'tab' },
+        ],
+        allowClear: false,
+      },
+      // 单表时禁用该字段
+      dynamicDisabled: ({ model }) => model.tableType === 1,
+      // update-begin--author:liaozhiyang---date:20231123---for：【QQYUN-7073】提示ERP、内嵌子表不支持联合查询
+      dynamicRules() {
+        return [
+          {
+            validator({}, value) {
+              const data = expandingConfig.value;
+              if (value === 'erp') {
+                if (data.joinQuery) {
+                  return Promise.reject('ERP不支持联合查询功能');
+                }
+              } else if (value === 'innerTable') {
+                if (data.joinQuery) {
+                  return Promise.reject('内嵌子表不支持联合查询功能');
+                }
+              }
+              return Promise.resolve();
+            },
+          },
+        ];
+      },
+      // update-end--author:liaozhiyang---date:20231123---for：【QQYUN-7073】提示ERP、内嵌子表不支持联合查询
+    }),
+    mapFormSchema({
+      label: '表单风格',
+      field: 'formTemplate',
+      component: 'Select',
+      defaultValue: '1',
+      componentProps: {
+        options: [
+          { label: '一列', value: '1' },
+          { label: '两列', value: '2' },
+          { label: '三列', value: '3' },
+          { label: '四列', value: '4' },
+        ],
+        placeholder: '请选择PC表单风格',
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '移动表单风格',
+      field: 'formTemplateMobile',
+      component: 'Select',
+      defaultValue: '1',
+      componentProps: {
+        options: [
+          { label: 'AntDesign模板', value: '1' },
+          { label: 'Bootstrap模板', value: '2' },
+        ],
+        placeholder: '请选择移动表单风格',
+      },
+      // 暂时先隐藏
+      ifShow: false,
+    }),
+    mapFormSchema({
+      label: '滚动条',
+      field: 'scroll',
+      component: 'Select',
+      defaultValue: 1,
+      componentProps: {
+        options: [
+          { label: '有', value: 1 },
+          { label: '无', value: 0 },
+        ],
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '是否分页',
+      field: 'isPage',
+      component: 'Select',
+      defaultValue: 'Y',
+      componentProps: {
+        options: [
+          { label: '是', value: 'Y' },
+          { label: '否', value: 'N' },
+        ],
+        allowClear: false,
+      },
+    }),
+    mapFormSchema({
+      label: '是否树',
+      field: 'isTree',
+      component: 'Select',
+      defaultValue: 'N',
+      componentProps: {
+        options: [
+          { label: '是', value: 'Y' },
+          { label: '否', value: 'N' },
+        ],
+        onChange: handlers.onIsTreeChange,
+        allowClear: false,
+      },
+      dynamicRules({ model }) {
+        return [
+          {
+            validator({}, value) {
+              if (value === 'Y' && (model.tableType == 2 || model.tableType == 3)) {
+                return Promise.reject('主表和附表不支持树类型！');
+              } else {
+              }
+              return Promise.resolve();
+            },
+          },
+        ];
+      },
+      // update-begin--author:liaozhiyang---date:20240604---for：【TV360X-125】选择主表和附表时隐藏树表配置
+      show({ model, values }) {
+        if (model.tableType == 2 || model.tableType == 3) {
+          model.isTree = 'N';
+          handlers.onIsTreeChange('N');
+          return false;
+        }
+        return true;
+      },
+      // update-end--author:liaozhiyang---date:20240604---for：【TV360X-125】选择主表和附表时隐藏树表配置
+    }),
+    mapFormSchema({
+      // 空格不要删，否则布局会乱
+      label: ' ', // 扩展配置
+      field: 'extConfigJson',
+      component: 'Input',
+      slot: 'extConfigButton',
+      itemProps: { colon: false },
+      // 一对多子表时隐藏扩展配置按钮
+      ifShow: ({ model }) => !(model.tableType === 3 && model.relationType === 0),
+    }),
+    mapFormSchema({
+      label: '树表单父ID',
+      field: 'treeParentIdField',
+      component: 'Input',
+      ifShow: fieldIfShow,
+    }),
+    mapFormSchema({
+      label: '是否有子节点字段',
+      field: 'treeIdField',
+      component: 'Input',
+      show: false,
+    }),
+    mapFormSchema({
+      label: '树开表单列',
+      field: 'treeFieldname',
+      required: true,
+      component: 'Input',
+      ifShow: fieldIfShow,
+    }),
+    mapFormSchema(
+      {
+        label: '附表',
+        field: 'subTableStr',
+        component: 'Input',
+        componentProps: {
+          disabled: true,
+          placeholder: ' ',
+          allowClear: false,
+        },
+        ifShow: handlers.ifShowOfSubTableStr,
+      },
+      'one'
+    ),
+  ];
+
+  // 控制字段是否显示
+  function fieldIfShow({ field, model }: RenderCallbackParams) {
+    switch (field) {
+      case 'relationType':
+      case 'tabOrderNum':
+        return model.tableType === 3;
+      case 'treeParentIdField':
+      case 'treeIdField':
+      case 'treeFieldname':
+        return model.isTree === 'Y';
+      case 'idSequence':
+        return model.idType === 'SEQUENCE';
+    }
+    return true;
+  }
+
+  return { formSchemas };
+}
+
+/** 获取 扩展参数 FormSchemas */
+export function useExtendConfigFormSchemas(_props, handlers) {
+  type SpanType = 'left' | 'right';
+  // formItem 的绑定值，统一布局
+  const mapFormSchema = bindMapFormSchema<SpanType>(
+    {
+      left: {
+        colProps: { xs: 24, sm: 7 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 11 },
+          wrapperCol: { xs: 24, sm: 13 },
+        },
+        style: { width: '100%' },
+      },
+      right: {
+        colProps: { xs: 24, sm: 17 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 3 },
+          wrapperCol: { xs: 24, sm: 20 },
+        },
+        style: { width: '100%' },
+      },
+    },
+    'left'
+  );
+
+  // 一对一子表时只显示固定操作列、列宽拖动、表单Label长度
+  function isNotOneToOneSub() {
+    const { tableType, relationType } = _props.parentForm.getFieldsValue(['tableType', 'relationType']);
+    return !(tableType === 3 && relationType === 1);
+  }
+
+  const formSchemas: FormSchema[] = [
+    // 弹窗
+    mapFormSchema(
+      {
+        label: '弹窗默认全屏',
+        field: 'modelFullscreen',
+        ifShow: isNotOneToOneSub,
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+        },
+      },
+      'left'
+    ),
+    mapFormSchema(
+      {
+        label: '弹窗宽度',
+        field: 'modalMinWidth',
+        component: 'InputNumber',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          style: 'width: 80%',
+          placeholder: '弹窗最小宽度（单位：px）',
+        },
+        // update-begin--author:liaozhiyang---date:20240520---for：【TV360X-77】弹窗全屏后，输入宽度框禁用
+        dynamicDisabled: ({ model }) => model.modelFullscreen,
+        // update-end--author:liaozhiyang---date:20240520---for：【TV360X-77】弹窗全屏后，输入宽度框禁用
+      },
+      'right'
+    ),
+    //----------------------------表单评论 begin-----------------------------------------
+    mapFormSchema(
+      {
+        label: '开启表单评论',
+        field: 'commentStatus',
+        component: 'RadioButtonGroup',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+        },
+      },
+      'left'
+    ),
+    // 此处为占位符
+    mapFormSchema(
+      {
+        label: '',
+        field: 'commentStatus',
+        component: 'InputNumber',
+        ifShow: isNotOneToOneSub,
+        render: () => '',
+      },
+      'right'
+    ),
+    // 启用联合查询
+    mapFormSchema(
+      {
+        label: '启用联合查询',
+        field: 'joinQuery',
+        component: 'RadioButtonGroup',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+          onChange: handlers.onJoinQueryChange,
+        },
+      },
+      'left'
+    ),
+    // 此处为占位符
+    mapFormSchema(
+      {
+        label: '',
+        field: 'joinQuery',
+        component: 'InputNumber',
+        ifShow: isNotOneToOneSub,
+        render: () => '',
+      },
+      'right'
+    ),
+    // 积木报表打印
+    mapFormSchema(
+      {
+        label: '集成积木报表',
+        field: 'reportPrintShow',
+        component: 'RadioButtonGroup',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+          onChange: handlers.onReportPrintShowChange,
+        },
+      },
+      'left'
+    ),
+    mapFormSchema(
+      {
+        label: '报表地址',
+        field: 'reportPrintUrl',
+        component: 'Input',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          style: 'width: 80%',
+        },
+        dynamicDisabled: ({ model }) => !model.reportPrintShow,
+        dynamicRules: ({ model }) => {
+          return [
+            { required: !!model.reportPrintShow, message: '请输入报表地址！' },
+            {
+              validator({}, value) {
+                if (/\/jmreport\/view\/{积木报表ID}/.test(value)) {
+                  return Promise.reject('请将{积木报表ID}替换为真实的积木报表ID！');
+                }
+                return Promise.resolve();
+              },
+            },
+          ];
+        },
+      },
+      'right'
+    ),
+    // update-begin--author:liaozhiyang---date:20231213---for：【QQYUN-7421】vue3先注释集成设计表单功能
+    // mapFormSchema(
+    //   {
+    //     label: '集成设计表单',
+    //     field: 'isDesForm',
+    //     component: 'RadioButtonGroup',
+    //     componentProps: {
+    //       options: [
+    //         { label: '开启', value: 'Y' },
+    //         { label: '关闭', value: 'N' },
+    //       ],
+    //       buttonStyle: 'solid',
+    //       onChange: handlers.onIsDesformChange,
+    //     },
+    //   },
+    //   'left'
+    // ),
+    // mapFormSchema(
+    //   {
+    //     label: '表单编码',
+    //     field: 'desFormCode',
+    //     component: 'Input',
+    //     componentProps: {
+    //       style: 'width: 80%',
+    //     },
+    //     dynamicDisabled: ({ model }) => model.isDesForm !== 'Y',
+    //     dynamicRules: ({ model }) => {
+    //       return [{ required: model.isDesForm === 'Y', message: '请输入表单编码！' }];
+    //     },
+    //   },
+    //   'right'
+    // ),
+    // update-end--author:liaozhiyang---date:20231213---for：【QQYUN-7421】vue3先注释集成设计表单功能
+    // 列表操作列
+    mapFormSchema(
+      {
+        label: '固定操作列',
+        field: 'tableFixedAction',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+        },
+        defaultValue: 1,
+      },
+      'left'
+    ),
+    mapFormSchema(
+      {
+        label: '固定方式',
+        field: 'tableFixedActionType',
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: '固定到右侧', value: 'right' },
+            { label: '固定到左侧', value: 'left' },
+          ],
+          style: 'width: 80%',
+        },
+        defaultValue: 'right',
+        dynamicDisabled: ({ model }) => !model.tableFixedAction,
+        dynamicRules: ({ model }) => {
+          return [{ required: !!model.tableFixedAction, message: '请选择固定方式！' }];
+        },
+      },
+      'right'
+    ),
+    // 列宽拖动调整
+    mapFormSchema(
+      {
+        label: '列宽拖动',
+        field: 'canResizeColumn',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+        },
+        defaultValue: 0,
+      },
+      'left'
+    ),
+    // 此处为占位符
+    mapFormSchema(
+      {
+        label: '',
+        field: 'canResizeColumn',
+        component: 'InputNumber',
+        render: () => '',
+      },
+      'right'
+    ),
+    //--------------------------表单评论 end-----------------------------------------
+    // update-begin--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+    mapFormSchema(
+      {
+        label: '表单Label长度',
+        field: 'formLabelLengthShow',
+        component: 'RadioButtonGroup',
+        componentProps: {
+          options: [
+            { label: '开启', value: 1 },
+            { label: '关闭', value: 0 },
+          ],
+          buttonStyle: 'solid',
+          onChange: handlers.onFormLabelLengthShow,
+        },
+      },
+      'left'
+    ),
+    mapFormSchema(
+      {
+        label: 'Label长度',
+        field: 'formLabelLength',
+        component: 'InputNumber',
+        componentProps: {
+          style: 'width: 80%',
+          placeholder: '自定义表单Label长度',
+        },
+        dynamicDisabled: ({ model }) => !model.formLabelLengthShow,
+        dynamicRules: ({ model }) => {
+          return [{ required: !!model.formLabelLengthShow, message: '请填写表单label长度' }];
+        },
+      },
+      'right'
+    ),
+    // update-end--author:liaozhiyang---date:20240329---for：【QQYUN-7872】online表单label较长优化
+    mapFormSchema(
+      {
+        label: '启用外部链接',
+        field: 'enableExternalLink',
+        component: 'RadioButtonGroup',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          options: [
+            {label: '开启', value: 1},
+            {label: '关闭', value: 0},
+          ],
+          buttonStyle: 'solid',
+          defaultValue: 0,
+          // onChange: handlers.onFormLabelLengthShow,
+        },
+      },
+      'left'
+    ),
+    mapFormSchema(
+      {
+        label: '允许的操作',
+        field: 'externalLinkActions',
+        component: 'JCheckbox',
+        ifShow: isNotOneToOneSub,
+        componentProps: {
+          options: [
+            {label: '新增', value: 'add'},
+            {label: '编辑', value: 'edit'},
+            {label: '详情', value: 'detail'},
+          ],
+        },
+        dynamicDisabled: ({model}) => !model.enableExternalLink,
+      },
+      'right'
+    ),
+  ];
+
+  return { formSchemas };
+}
+
+/** 获取 代码生成 FormSchemas */
+export function useCodeGeneratorFormSchemas(_, handlers, single: Ref<boolean>) {
+  type SpanType = 'one' | 'tow' | 'towOne';
+  // 动态布局
+  const mapFormSchema = bindMapFormSchema<SpanType>(
+    {
+      // 一列
+      one: {
+        colProps: { xs: 24, sm: 24 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 5 },
+          wrapperCol: { xs: 24, sm: 16 },
+        },
+      },
+      // 两列中的一列
+      towOne: {
+        colProps: { xs: 24, sm: 24 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 3 },
+          wrapperCol: { xs: 24, sm: 20 },
+        },
+      },
+      // 两列
+      tow: {
+        colProps: { xs: 24, sm: 12 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 6 },
+          wrapperCol: { xs: 24, sm: 16 },
+        },
+      },
+    },
+    'one'
+  );
+  const getColSize = computed<SpanType>(() => (single.value ? 'one' : 'tow'));
+  // 由于需要动态改变布局，所以使用 computed
+  // e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+  const formSchemas = computed<FormSchema[]>(() => [
+    mapFormSchema(
+      {
+        label: '代码生成目录',
+        field: 'projectPath',
+        render: ({ model, field }) =>
+          h(
+            Input.Search,
+            {
+              value: model[field],
+              onChange: (e) => {
+                model[field] = e.target.value;
+                handlers.onProjectPathChange(e);
+              },
+              onSearch: handlers.onProjectPathSearch,
+              disabled: isDisabledAuth('online:codeGenerate:projectPath'),
+            },
+            {
+              enterButton: () =>
+                h(
+                  Button,
+                  {
+                    preIcon: 'ant-design:folder-open',
+                    disabled: isDisabledAuth('online:codeGenerate:projectPath'),
+                  },
+                  {
+                    default: () => '浏览',
+                    icon: () => h(FolderOpenOutlined),
+                  }
+                ),
+            }
+          ),
+        component: 'InputSearch',
+        required: true,
+        // 如果版本号为1 表示未曾修改 未曾同步 可以修改表名
+      },
+      single.value ? 'one' : 'towOne'
+    ),
+    mapFormSchema(
+      {
+        label: '页面风格',
+        field: 'jspMode',
+        component: 'Select',
+        componentProps: {
+          options: handlers.jspModeOptions.value,
+          // update-begin--author:liaozhiyang---date:20240603---for：【TV360X-895】页面风格去掉x
+          allowClear: false,
+          // update-end--author:liaozhiyang---date:20240603---for：【TV360X-895】页面风格去掉x
+        },
+      },
+      getColSize.value
+    ),
+    mapFormSchema(
+      {
+        label: '功能说明',
+        field: 'ftlDescription',
+        component: 'Input',
+      },
+      getColSize.value
+    ),
+    { label: '数据模型', field: 'jformType', component: 'Input', show: false },
+    mapFormSchema(
+      {
+        label: '表名',
+        field: 'tableName_tmp',
+        required: true,
+        dynamicDisabled: true,
+        component: 'Input',
+      },
+      getColSize.value
+    ),
+    mapFormSchema(
+      {
+        label: '实体类名',
+        field: 'entityName',
+        required: true,
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入实体类名(首字母大写)',
+        },
+      },
+      getColSize.value
+    ),
+    mapFormSchema(
+      {
+        label: '包名(小写)',
+        field: 'entityPackage',
+        component: 'Input',
+        rules: [{ required: true, pattern: /^[a-zA-Z0-9._]*$/, message: '包名必填，且只允许字母、数字、下划线、小数点组合' }],
+      },
+      getColSize.value
+    ),
+    mapFormSchema(
+      {
+        label: '代码分层样式',
+        field: 'packageStyle',
+        component: 'Select',
+        componentProps: {
+          disabled: true,
+          options: [
+            { label: '业务分层', value: 'service' },
+            { label: '代码分层', value: 'project' },
+          ],
+        },
+      },
+      getColSize.value
+    ),
+    mapFormSchema(
+      {
+        label: '页面代码',
+        field: 'vueStyle',
+        required: true,
+        component: 'Input',
+        defaultValue: 'vue3',
+        slot: 'pageCode',
+        // componentProps: {
+        //   options: [
+        //     { label: 'Vue3(BasicForm)', value: 'vue3' },
+        //     { label: 'Vue3原生(a-form)', value: 'vue3Native' },
+        //     { label: 'Vue2', value: 'vue' },
+        //   ],
+        // },
+        // update-begin--author:liaozhiyang---date:20240612---for：【TV360X-1057】代码生成页面代码鼠标移入给说明
+        // dynamicPropskey: 'options',
+        // dynamicPropsVal: ({ model }) => {
+        //   if (model.jspMode && (model.jspMode == 'innerTable' || model.jspMode == 'tab')) {
+        //     return [
+        //       { value: 'vue3', label: '封装表单(BasicForm)' },
+        //     ];
+        //   } else {
+        //     return [
+        //       { value: 'vue3', label: '封装表单(BasicForm)' },
+        //       { value: 'vue3Native', label: '原生表单(a-form)' },
+        //     ];
+        //   }
+        // },
+        // update-end--author:liaozhiyang---date:20240612---for：【TV360X-1057】代码生成页面代码鼠标移入给说明
+      },
+      getColSize.value
+    ),
+    { label: '需要生成的代码', field: 'codeTypes', component: 'Input', show: false },
+  ]);
+
+  return { formSchemas };
+}
diff --git a/src/views/super/online/cgform/hooks/useTableSync.ts b/src/views/super/online/cgform/hooks/useTableSync.ts
new file mode 100644
index 0000000..aee2f5a
--- /dev/null
+++ b/src/views/super/online/cgform/hooks/useTableSync.ts
@@ -0,0 +1,167 @@
+import type { Ref, ComputedRef } from 'vue';
+import { ref, computed, nextTick, inject } from 'vue';
+import { CgformModal } from '../types';
+import { JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+import { VALIDATE_FAILED } from '../cgform.data';
+import { pick } from 'lodash-es';
+
+export function useTableSync(columns: Ref<JVxeColumn[]>) {
+  const tables = inject<CgformModal.TablesRef>('tables');
+  const fullScreenRef = inject<ComputedRef<boolean>>('fullScreenRef');
+  const vxetableHeight = inject<ComputedRef<number>>('vxetableHeight');
+  const tableRef = ref<JVxeTableInstance>();
+  const loading = ref(false);
+  const dataSource = ref<Recordable[]>([]);
+  // 表格动态高度
+  const tableHeight = computed(() => ({
+    // 正常表格高度
+    normal: fullScreenRef?.value ? vxetableHeight?.value : 260,
+    // 没有 toolbar 的表格高度
+    noToolbar: fullScreenRef?.value ? vxetableHeight?.value : 320,
+  }));
+
+  // 当前表的所有列字段key
+  const columnKeys = computed<string[]>(() => ['id'].concat(columns.value.map((col) => col.key)));
+
+  // 表格其他props
+  const tableProps = computed(() => {
+    return {
+      // 针对Online表单对虚拟滚动做出优化
+      // 虚拟滚动配置，y轴（行数）大于xx条数据时启用虚拟滚动
+      // update-begin--author:liaozhiyang---date:20231025---for：【QQYUN-6808】online编辑字段多了卡顿
+      scrollY: {
+        enabled: true,
+        gt: 15,
+      },
+      // 列数
+      scrollX: {
+        enabled: true,
+        gt: 20,
+      },
+      // update-begin--author:liaozhiyang---date:20231025---for：【QQYUN-6808】online编辑字段多了卡顿
+    };
+  });
+
+  // 校验并获取表格数据
+  async function validateData(activeKey: string) {
+    let instance = tableRef.value!;
+    let errMap = await instance.fullValidateTable();
+    if (errMap) {
+      throw { code: VALIDATE_FAILED, activeKey };
+    }
+    // 过滤掉当前表中不存在的字段，以防止多个表冲突
+    let tableData = instance.getTableData().map((data) => pick(data, columnKeys.value));
+    // 获取被删除的ID
+    let deleteIds = instance.getDeleteData().map((d) => d.id);
+    return { tableData, deleteIds };
+  }
+
+  /**
+   * 设置数据源
+   * @param data
+   * @param insert
+   */
+  async function setDataSource(data, insert = false) {
+    if (insert) {
+      dataSource.value = [];
+      await nextTick();
+      await tableRef.value!.addOrInsert(data, 0, null, { setActive: false });
+      await nextTick();
+      tableRef.value!.recalcDisableRows();
+    } else {
+      dataSource.value = data;
+      // update-begin--author:liaozhiyang---date:20240705---for：【TV360X-1762】解决编辑时id可删除
+      await nextTick();
+      tableRef.value!.recalcDisableRows();
+      // update-end--author:liaozhiyang---date:20240705---for：【TV360X-1762】解决编辑时id可删除
+    }
+  }
+
+  /**
+   * 同步列表，可以同步新增、修改、删除
+   * @param dbTable
+   */
+  function syncTable(dbTable: Ref<CgformModal.DBAttributeTableType | undefined>) {
+    let targetTable = tableRef.value!;
+    let sourceTable = dbTable.value!.tableRef!;
+
+    let removeIds = dbTable.value!.getRemoveIds();
+    let sourceData = sourceTable.getXTable().internalData.tableFullData;
+    let targetData = targetTable.getXTable().internalData.tableFullData;
+    // update-begin--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    // 用 Map 索引 targetData，将查找从 O(N) 降到 O(1)
+    const targetMap = new Map<string, Recordable>();
+    targetData.forEach((targetValue) => {
+      if (targetValue.id) {
+        targetMap.set(targetValue.id, targetValue);
+      }
+    });
+    // 用 Set 索引 removeIds，将查找从 O(K) 降到 O(1)
+    const removeIdSet = new Set<string>(removeIds);
+    // update-begin--author:liaozhiyang---date:20240724---for：【TV360X-1852】新增时删除所有字段再新增一个字段，保存报错
+    // 先收集需要删除的ID，最后统一删除，避免在遍历中修改数组
+    const toRemoveIds: string[] = [];
+    // update-end--author:liaozhiyang---date:20240724---for：【TV360X-1852】新增时删除所有字段再新增一个字段，保存报错
+    // 批量收集需要修改的值，最后一次性调用 setValues
+    const batchSetValues: { rowKey: string; values: Recordable }[] = [];
+    // update-begin--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+    // 提前缓存列默认值映射，避免新增每行时重复遍历 columns
+    const columnDefaults: { key: string; defaultValue: any }[] = [];
+    columns.value.forEach((column) => {
+      if (column.key !== 'dbFieldName' && column.key !== 'dbFieldTxt') {
+        columnDefaults.push({ key: column.key, defaultValue: column.defaultValue });
+      }
+    });
+    // update-end--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+    sourceData.forEach((sourceValue) => {
+      const targetValue = targetMap.get(sourceValue.id);
+      if (targetValue) {
+        // 判断是否修改了值
+        let dbFieldName = targetValue['dbFieldName'];
+        let dbFieldTxt = targetValue['dbFieldTxt'];
+        if (sourceValue.dbFieldName !== dbFieldName || sourceValue.dbFieldTxt !== dbFieldTxt) {
+          // 收集修改字段，稍后批量同步
+          batchSetValues.push({
+            rowKey: targetValue.id,
+            values: {
+              dbFieldName: sourceValue.dbFieldName,
+              dbFieldTxt: sourceValue.dbFieldTxt,
+            },
+          });
+        }
+      } else {
+        // target中不存在，说明是新增的
+        let record = Object.assign({}, sourceValue);
+        // update-begin--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+        for (const { key, defaultValue } of columnDefaults) {
+          if (record[key] == undefined) {
+            record[key] = defaultValue;
+          }
+        }
+        // update-end--author:liaozhiyang---date:20250407---for：【QQYUN-11801】ai建表字段
+        targetTable.addRows(record);
+      }
+    });
+    // 批量同步修改
+    if (batchSetValues.length > 0) {
+      targetTable.setValues(batchSetValues);
+    }
+    // 处理删除：target中存在但已被删除的行
+    // update-begin--author:liaozhiyang---date:20240724---for：【TV360X-1852】新增时删除所有字段再新增一个字段，保存报错
+    targetData.forEach((targetValue) => {
+      if (targetValue.id && removeIdSet.has(targetValue.id)) {
+        toRemoveIds.push(targetValue.id);
+      }
+    });
+    if (toRemoveIds.length > 0) {
+      setTimeout(() => {
+        toRemoveIds.forEach((id) => targetTable.removeRowsById(id));
+      }, 0);
+    }
+    // update-end--author:liaozhiyang---date:20240724---for：【TV360X-1852】新增时删除所有字段再新增一个字段，保存报错
+    // update-end--author:liaozhiyang---date:20260316---for:【QQYUN-13751】jVxetable优化
+    return nextTick();
+  }
+
+  return { tables, tableRef, loading, dataSource, columnKeys, tableHeight, tableProps, syncTable, validateData, setDataSource };
+}
diff --git a/src/views/super/online/cgform/index.vue b/src/views/super/online/cgform/index.vue
new file mode 100644
index 0000000..bbbbd07
--- /dev/null
+++ b/src/views/super/online/cgform/index.vue
@@ -0,0 +1,198 @@
+<template>
+  <div :class="prefixCls">
+    <!--引用表格-->
+    <BasicTable ref="tableRef" @register="registerTable" :rowSelection="rowSelection" v-bind="$attrs">
+      <template #tableTitle>
+        <a-button :class="newAddBtn" @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+        <a-button :class="aiCreateTable" @click="onAiCreateTable" type="primary" preIcon="ant-design:plus">AI建表</a-button>
+        <a-button :class="customBtn" @click="onShowCustomButton" type="primary" preIcon="ant-design:highlight">自定义按钮</a-button>
+        <a-button :class="enhanceJsBtn" @click="onShowEnhanceJs" type="primary" preIcon="ant-design:strikethrough">JS增强</a-button>
+        <a-button :class="enhanceSqlBtn" @click="onShowEnhanceSql" type="primary" preIcon="ant-design:filter" v-auth="'online:form:enhanceSql:save'"> SQL增强 </a-button>
+        <a-button :class="enhanceJavaBtn" @click="onShowEnhanceJava" type="primary" preIcon="ant-design:tool">JAVA增强</a-button>
+        <a-button :class="exportDbBtn" @click="onImportDbTable" type="primary" preIcon="ant-design:database" v-auth="'online:form:importTable'">导入数据库表</a-button>
+        <a-button :class="codeGeneratorBtn" @click="onGenerateCode" type="primary" preIcon="bx:bx-code-alt" v-auth="'online:form:generateCode'"> 代码生成 </a-button>
+        <!--        <j-super-query :fieldList="superQueryFieldList" ref="superQueryModal"-->
+        <!--                       @handleSuperQuery="handleSuperQuery"></j-super-query>-->
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onDeleteBatch">
+                <a-icon type="delete" />
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <template #dbSync="{ text }">
+        <span v-if="text === 'Y'" style="color: limegreen">已同步</span>
+        <span v-if="text === 'N'" style="color: red">未同步</span>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+  <CgformModal @register="registerCgformModal" @success="onSuccess" />
+  <DbToOnlineModal @register="registerDbToOnlineModal" @success="onSuccess" />
+  <CodeGeneratorModal @register="registerCodeGeneratorModal" />
+  <CustomButtonList @register="registerCustomButtonModal" />
+  <EnhanceJsModal @register="registerEnhanceJsModal" />
+  <EnhanceJavaModal @register="registerEnhanceJavaModal" />
+  <EnhanceSqlModal @register="registerEnhanceSqlModal" />
+  <AuthManagerDrawer @register="registerAuthManagerDrawer" />
+  <AuthSetterModal @register="registerAuthSetterModal" />
+  <AiModal @register="registerAiToOnlineModal" @success="onCreateAiTable"/>
+  <CgformAddressModal @register="registerAddressModal" />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import CgformModal from './components/CgformModal.vue';
+  import DbToOnlineModal from './components/DbToOnlineModal.vue';
+  import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
+  import CustomButtonList from './components/button/CustomButtonList.vue';
+  import EnhanceJsModal from './components/enhance/EnhanceJsModal.vue';
+  import EnhanceJavaModal from './components/enhance/EnhanceJavaModal.vue';
+  import EnhanceSqlModal from './components/enhance/EnhanceSqlModal.vue';
+  import AuthManagerDrawer from './components/auth/AuthManagerDrawer.vue';
+  import AuthSetterModal from './components/auth/AuthSetterModal.vue';
+  import AiModal from './components/AiModal.vue';
+  import CgformAddressModal from "./components/CgformAddressModal.vue";
+  import { useCgformList } from './hooks/useCgformList';
+  import { CgformPageType } from './types';
+  import { columns, searchFormSchema } from './cgform.data';
+  import { useGuide } from './hooks/useGuide';
+  import { createLocalStorage } from '@/utils/cache';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const $ls = createLocalStorage();
+  const { createMessage: $message } = useMessage();
+  // noinspection JSUnusedGlobalSymbols
+  export default defineComponent({
+    name: 'CgformIndex',
+    components: {
+      BasicTable,
+      TableAction,
+      CgformModal,
+      DbToOnlineModal,
+      CodeGeneratorModal,
+      CustomButtonList,
+      EnhanceJsModal,
+      EnhanceJavaModal,
+      EnhanceSqlModal,
+      AuthManagerDrawer,
+      AuthSetterModal,
+      AiModal,
+      CgformAddressModal,
+    },
+    setup() {
+      const {
+        pageContext,
+        onAdd,
+        onAiCreateTable,
+        onSuccess,
+        onCreateAiTable,
+        onDeleteBatch,
+        onImportDbTable,
+        onGenerateCode,
+        onShowCustomButton,
+        onShowEnhanceJs,
+        onShowEnhanceSql,
+        onShowEnhanceJava,
+        getTableAction,
+        getDropDownAction,
+        registerAuthManagerDrawer,
+        registerAuthSetterModal,
+        registerCustomButtonModal,
+        registerEnhanceJsModal,
+        registerEnhanceSqlModal,
+        registerEnhanceJavaModal,
+        registerCgformModal,
+        registerDbToOnlineModal,
+        registerCodeGeneratorModal,
+        registerAiToOnlineModal,
+        registerAddressModal,
+        tableRef,
+      } = useCgformList({
+        pageType: CgformPageType.normal,
+        designScope: 'online-cgform-list',
+        columns: columns,
+        formSchemas: searchFormSchema,
+      });
+      const { prefixCls, tableContext } = pageContext;
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+      // 代码直接生成到前端，页面会自动加载刷新，给成功后提示
+      const genenrate_msg = $ls.get('code.genenrate.success.msg');
+      console.log('genenrate_msg:', genenrate_msg);
+      if (genenrate_msg) {
+        $message.success({
+          content: genenrate_msg,
+          duration: 10, // 停留10秒
+        });
+      }
+
+      const {
+        newAddBtn,
+        customBtn,
+        enhanceJsBtn,
+        enhanceSqlBtn,
+        exportDbBtn,
+        enhanceJavaBtn,
+        codeGeneratorBtn,
+        aiCreateTable
+      } = useGuide();
+      
+      return {
+        prefixCls,
+        reload,
+        rowSelection,
+        selectedRowKeys,
+        onAdd,
+        onAiCreateTable,
+        onSuccess,
+        onDeleteBatch,
+        onImportDbTable,
+        onGenerateCode,
+        onShowCustomButton,
+        onShowEnhanceJs,
+        onShowEnhanceSql,
+        onShowEnhanceJava,
+        onCreateAiTable,
+        getTableAction,
+        getDropDownAction,
+        registerAuthManagerDrawer,
+        registerAuthSetterModal,
+        registerCustomButtonModal,
+        registerEnhanceJsModal,
+        registerEnhanceSqlModal,
+        registerEnhanceJavaModal,
+        registerTable,
+        registerCgformModal,
+        registerDbToOnlineModal,
+        registerCodeGeneratorModal,
+        registerAiToOnlineModal,
+        registerAddressModal,
+        newAddBtn,
+        customBtn,
+        enhanceJsBtn,
+        enhanceSqlBtn,
+        enhanceJavaBtn,
+        exportDbBtn,
+        codeGeneratorBtn,
+        aiCreateTable,
+        tableRef,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/cgform/router/cgformRouter.ts b/src/views/super/online/cgform/router/cgformRouter.ts
new file mode 100644
index 0000000..a919a0c
--- /dev/null
+++ b/src/views/super/online/cgform/router/cgformRouter.ts
@@ -0,0 +1,48 @@
+import {router} from '/@/router';
+import {LAYOUT} from '/@/router/constant';
+
+export function registerCgformRouter() {
+  router.addRoute({
+    path: '/online-auto-cgform-router',
+    name: 'onl-auto-cgform-router',
+    component: LAYOUT,
+    redirect: '/online/cgform',
+    meta: {
+      title: 'OnlCgformAuto',
+      hideMenu: true,
+      hideBreadcrumb: true,
+    },
+    children: [
+      {
+        path: '/online/cgformList/:id',
+        name: 'OnlineAutoList',
+        component: () => import('../auto/default/OnlineAutoList.vue'),
+        meta: {title: 'AUTO在线表单'},
+      },
+      {
+        path: '/online/cgformTreeList/:id',
+        name: 'DefaultOnlineList',
+        component: () => import('../auto/tree/OnlineAutoTreeList.vue'),
+        meta: {title: 'AUTO在线树表单'},
+      },
+      {
+        path: '/online/cgformErpList/:id',
+        name: 'CgformErpList',
+        component: () => import('../auto/erp/OnlCgformErpList.vue'),
+        meta: {title: 'AUTO在线ERP表单'},
+      },
+      {
+        path: '/online/cgformInnerTableList/:id',
+        name: 'OnlCgformInnerTableList',
+        component: () => import('../auto/innerTable/OnlCgformInnerTableList.vue'),
+        meta: {title: 'AUTO在线一对多内嵌'},
+      },
+      {
+        path: '/online/cgformTabList/:id',
+        name: 'OnlCgformTabList',
+        component: () => import('../auto/tab/OnlCgformTabList.vue'),
+        meta: {title: 'AUTO在线Tab风格'},
+      },
+    ],
+  })
+}
diff --git a/src/views/super/online/cgform/share/README.md b/src/views/super/online/cgform/share/README.md
new file mode 100644
index 0000000..c8b3b41
--- /dev/null
+++ b/src/views/super/online/cgform/share/README.md
@@ -0,0 +1,3 @@
+# 目录说明
+
+本目录为 Online表单 的外部链接功能目录
diff --git a/src/views/super/online/cgform/share/components/ShareView.vue b/src/views/super/online/cgform/share/components/ShareView.vue
new file mode 100644
index 0000000..54a0486
--- /dev/null
+++ b/src/views/super/online/cgform/share/components/ShareView.vue
@@ -0,0 +1,157 @@
+<template>
+  <div v-if="cgformRef != null" :class="[prefixCls]">
+    <template v-if="showResult!=='none'">
+      <a-result
+          status="success"
+          :title="`${isUpdate ? '修改': '新增'}成功`"
+          subTitle="请选择下一步操作"
+      >
+        <template #extra>
+          <a-space>
+            <a-button type="primary" @click="onAddContinue">
+              <span>继续{{ isUpdate ? '修改' : '新增' }}</span>
+            </a-button>
+            <a-space-compact block>
+              <a-button @click="onOtherAction({key:'view'})">
+                <span>查看</span>
+                <span v-if="!isUpdate">新</span>
+                <span>数据</span>
+              </a-button>
+              <a-dropdown :trigger="['click', 'hover']">
+                <a-button preIcon="ant-design:down">
+                </a-button>
+                <template #overlay>
+                  <a-menu @click="onOtherAction">
+                    <a-menu-item v-if="isUpdate" key="add">添加数据</a-menu-item>
+                    <a-menu-item v-if="!isUpdate" key="edit">编辑新数据</a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </a-space-compact>
+            <a-button @click="onClose">关闭</a-button>
+          </a-space>
+        </template>
+      </a-result>
+    </template>
+    <!-- 单表页面 -->
+    <!--    <template v-else-if="isSingle">-->
+    <!--    </template>-->
+    <!-- 主子表页面 -->
+    <template v-else>
+      <SingleView
+          :ID="ID"
+          :formName="formName"
+          :isUpdate="isUpdate"
+          :isDetail="isDetail"
+          :isMobile="getIsMobile"
+          :buttonSwitch="buttonSwitch"
+          :cgBIBtnMap="cgBIBtnMap"
+          :confirmBtnCfg="confirmBtnCfg"
+
+          @ok="onOk"
+          @goEdit="goEdit"
+      />
+
+      <div v-show="false">
+        <OnlineAutoList ref="listRef"/>
+      </div>
+
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+import {useShareStore} from "../store/shareStore";
+import OnlineAutoList from "../../auto/default/OnlineAutoList.vue";
+import {useDesign} from "@/hooks/web/useDesign";
+
+import SingleView from "./SingleView.vue";
+import {useGo} from "@/hooks/web/usePage";
+import {useAppInject} from "@/hooks/web/useAppInject";
+
+const {prefixCls} = useDesign('online-share-view-box');
+
+const props = defineProps({
+  isUpdate: Boolean,
+  isDetail: Boolean,
+})
+
+const {getIsMobile} = useAppInject();
+
+const shareStore = useShareStore()
+
+const cgformRef = computed(() => shareStore.getCgformRecord);
+const ID = computed(() => cgformRef.value?.id);
+const formName = computed(() => cgformRef.value?.tableTxt);
+// 是否是单表
+// const isSingle = computed(() => cgformRef.value?.tableType == 1);
+
+const listRef = ref()
+const buttonSwitch = computed(() => listRef.value?.buttonSwitch);
+const cgBIBtnMap = computed(() => listRef.value?.cgBIBtnMap);
+const confirmBtnCfg = computed(() => listRef.value?.getFormConfirmButtonCfg);
+
+const showResult = ref<'none' | 'ok'>('none');
+const lastActionDataId = ref<string>();
+
+function onOk(dataId: string) {
+  showResult.value = 'ok';
+  lastActionDataId.value = dataId;
+  if (!props.isUpdate) {
+    shareStore.setDataRecord(null);
+  }
+}
+
+// 继续添加
+function onAddContinue() {
+  // window.location.reload();
+  showResult.value = 'none';
+  lastActionDataId.value = '';
+}
+
+const go = useGo();
+
+function onOtherAction({key}) {
+  const dataId = lastActionDataId.value!;
+  if (key === 'add') {
+    goDataAction('add', '');
+  } else if (key === 'view') {
+    goDetail(dataId);
+  } else if (key === 'edit') {
+    goEdit(dataId);
+  }
+  lastActionDataId.value = '';
+  showResult.value = 'none';
+}
+
+function goEdit(dataId: string) {
+  goDataAction('u', dataId);
+}
+
+function goDetail(dataId: string) {
+  goDataAction('d', dataId);
+}
+
+function goDataAction(action, dataId) {
+  if (action === 'add') {
+    go(`/online/cgform/share/${ID.value}/${action}`);
+    return;
+  }
+  if (!dataId) {
+    dataId = shareStore.getDataRecord?.id;
+  }
+
+  go(`/online/cgform/share/${ID.value}/${action}/${dataId}`);
+}
+
+function onClose() {
+  window.close()
+  setTimeout(() => alert('当前页面无法通过按钮关闭，请手动关闭'), 1000)
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/super/online/cgform/share/components/SingleView.vue b/src/views/super/online/cgform/share/components/SingleView.vue
new file mode 100644
index 0000000..ea6ecb6
--- /dev/null
+++ b/src/views/super/online/cgform/share/components/SingleView.vue
@@ -0,0 +1,200 @@
+<template>
+  <div ref="boxRef" :class="['view-box', {'is-mobile': isMobile}]" :style="boxStyle">
+    <template v-if="!loading">
+      <!-- 详情弹框 -->
+      <OnlineDetailModal v-if="isDetail" v-bind="getModalProps">
+        <template #footerBtn>
+          <a-button @click="emit('goEdit')">编辑该数据</a-button>
+        </template>
+      </OnlineDetailModal>
+      <!-- 编辑弹框 -->
+      <OnlineAutoModal v-else v-bind="getModalProps"/>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {ModalMethods} from "@/components/Modal";
+import {computed, nextTick, ref} from "vue";
+import {getRefPromise} from "@/utils";
+import {useShareStore} from "../store/shareStore";
+import OnlineAutoModal from "../../auto/default/OnlineAutoModal.vue";
+import {useOnlineTableContext} from "../../hooks/auto/useOnlineTableContext";
+import {useListButton} from "../../hooks/auto/useListButton";
+import {useEnhance} from "../../hooks/auto/useEnhance";
+import {useTableColumns} from "../../hooks/auto/useTableColumns";
+import OnlineDetailModal from "../../auto/default/OnlineDetailModal.vue";
+
+const props = defineProps({
+  ID: String,
+  formName: String,
+  buttonSwitch: Object,
+  cgBIBtnMap: Object,
+  confirmBtnCfg: Object,
+  isUpdate: Boolean,
+  isDetail: Boolean,
+  isMobile: Boolean,
+})
+const emit = defineEmits(['ok', 'goEdit'])
+
+const shareStore = useShareStore()
+
+const boxRef = ref()
+
+// box样式
+const boxStyle = computed(() => {
+  let paddingTop = 20;
+  let paddingLeft = 100;
+  // 兼容窄屏幕、移动端样式，不动态刷新
+  if (window.innerWidth < 1200) {
+    paddingTop = 0;
+    paddingLeft = 0;
+  }
+  return {
+    padding: `${paddingTop}px ${paddingLeft}px`,
+  };
+});
+
+const getModalProps = computed(() => {
+  // 业务属性
+  const titlePrefix = props.isDetail ? '详情' : (props.isUpdate ? '修改' : '新增');
+  const modalProps: Recordable = {
+    id: props.ID,
+    title: titlePrefix + ` [${props.formName}]`,
+    onRegister: registerModal,
+  }
+  if (!props.isDetail) {
+    // 新增、编辑参数
+    Object.assign(modalProps, {
+      cgBIBtnMap: props.cgBIBtnMap,
+      buttonSwitch: props.buttonSwitch,
+      confirmBtnCfg: props.confirmBtnCfg,
+      onSuccess: onSuccess,
+      onFormConfig: handleFormConfig,
+    });
+  }
+  // 自定义属性
+  Object.assign(modalProps, {
+    cancelBtnCfg: {enabled: false},
+
+    width: 1200,
+    getContainer: () => boxRef.value,
+    mask: false,
+    maskClosable: false,
+    bodyStyle: {height: bodyHeight.value},
+    draggable: false,
+    canFullscreen: false,
+    closeFunc: closeFunc,
+  })
+
+  return modalProps;
+});
+
+// 动态计算高度
+const bodyHeight = computed(() => {
+  let offset = 140;
+  if (props.isMobile) {
+    offset = 110;
+  }
+  return (boxRef.value?.offsetHeight ?? window.innerHeight) - offset + 'px';
+});
+
+const {
+  loading,
+  handleFormConfig,
+  onlineTableContext,
+  onlineExtConfigJson,
+} = useOnlineTableContext();
+
+// 处理列表button
+const {
+  registerModal: registerModalOrigin,
+
+  handleAdd,
+  handleEdit,
+} = useListButton(onlineTableContext, onlineExtConfigJson);
+
+async function registerModal(modalMethod: ModalMethods, uuid: string) {
+  registerModalOrigin(modalMethod, uuid);
+  await nextTick()
+  if (props.isUpdate) {
+    const dataRecord = await getDataRecordPromise();
+    handleEdit(dataRecord);
+  } else {
+    handleAdd({});
+  }
+}
+
+async function getDataRecordPromise() {
+  return await getRefPromise(computed(() => shareStore.getDataRecord));
+}
+
+// 处理 BasicTable 的配置
+const {} = useTableColumns(onlineTableContext, onlineExtConfigJson);
+// 处理增强
+const {} = useEnhance(onlineTableContext);
+
+function onSuccess(record: Recordable) {
+  let dataId: string;
+  if (props.isUpdate) {
+    dataId = shareStore.getDataRecord!.id;
+  } else {
+    dataId = record.flow_submit_id
+  }
+  if (!dataId) {
+    return;
+  }
+  emit('ok', dataId)
+}
+
+function closeFunc() {
+  alert('不允许关闭')
+  return false
+}
+
+</script>
+
+<style lang="less">
+// noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-auto-desform-data-view';
+
+.view-box {
+  height: calc(100vh - 50px);
+  background-color: #f0f2f5;
+
+  .jeecg-online-modal, .jeecg-online-detail-modal {
+    top: 80px !important;
+
+    > .ant-modal {
+      top: 0 !important;
+      // 取消动画
+      animation: none !important;
+
+      .jeecg-basic-title {
+        // 取消拖拽手势
+        cursor: default !important;
+      }
+
+      .ant-modal-content {
+        // 无阴影
+        box-shadow: none !important;
+
+        // 隐藏右上角 ×
+        > .ant-modal-close {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.is-mobile {
+    height: 100vh;
+
+    .jeecg-online-modal, .jeecg-online-detail-modal {
+      top: 0 !important;
+    }
+  }
+
+}
+
+</style>
diff --git a/src/views/super/online/cgform/share/components/add/ShareAddView.vue b/src/views/super/online/cgform/share/components/add/ShareAddView.vue
new file mode 100644
index 0000000..afa21ab
--- /dev/null
+++ b/src/views/super/online/cgform/share/components/add/ShareAddView.vue
@@ -0,0 +1,11 @@
+<template>
+  <ShareView :isUpdate="false"/>
+</template>
+
+<script setup lang="ts">
+import ShareView from "../ShareView.vue";
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/super/online/cgform/share/components/edit/ShareEditView.vue b/src/views/super/online/cgform/share/components/edit/ShareEditView.vue
new file mode 100644
index 0000000..0b90205
--- /dev/null
+++ b/src/views/super/online/cgform/share/components/edit/ShareEditView.vue
@@ -0,0 +1,17 @@
+<template>
+  <ShareView :isUpdate="true" :isDetail="isDetail"/>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {router} from "@/router";
+import {SHARE_DETAIL_ROUTER_NAME} from "../../route";
+import ShareView from "../ShareView.vue";
+
+const isDetail = computed(() => router.currentRoute.value.name === SHARE_DETAIL_ROUTER_NAME);
+
+</script>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/views/super/online/cgform/share/hooks/useCgformShare.ts b/src/views/super/online/cgform/share/hooks/useCgformShare.ts
new file mode 100644
index 0000000..a6d6c5d
--- /dev/null
+++ b/src/views/super/online/cgform/share/hooks/useCgformShare.ts
@@ -0,0 +1,120 @@
+import {ref} from 'vue';
+import {router} from "@/router";
+
+import {
+  SHARE_ADD_ROUTER_NAME,
+  SHARE_DETAIL_ROUTER_NAME,
+  SHARE_LOGIN__ROUTER_NAME,
+  SHARE_UPDATE_ROUTER_NAME
+} from "../route";
+import {useShareStore} from "../store/shareStore";
+import {useUserStore} from "@/store/modules/user";
+import {getCgformById, getCgformRecordById} from "../share.api";
+import {parseExtConfigJson} from "../../util/utils";
+
+export function useCgformShare() {
+  const userStore = useUserStore()
+  const shareStore = useShareStore()
+
+  const pageLoading = ref(true)
+  const pageErrorTip = ref('')
+
+  async function initCgformShare() {
+    try {
+      // 检查url中的token
+      await shareStore.checkUrlToken()
+      const route = router.currentRoute.value
+      // 检查缓存中的token
+      if (!userStore.getToken) {
+        // 跳转到登录页
+        router.push({
+          name: SHARE_LOGIN__ROUTER_NAME,
+          query: {
+            redirect: encodeURIComponent(route.path),
+          }
+        });
+        return
+      }
+      // 获取 Online表单 的信息
+      const {id: formId} = route.params
+      if (!formId) {
+        pageErrorTip.value = '参数错误'
+        return
+      }
+      let res = await getCgformById(formId as string);
+      if (!res.success) {
+        pageErrorTip.value = res.message
+        return
+      }
+      const record = res.result
+      // 判断是否开启了外部链接
+      const extJson = parseExtConfigJson(record);
+      if (!extJson?.enableExternalLink) {
+        pageErrorTip.value = '当前表单未开启外部链接'
+        return
+      }
+      // 判断是否支持当前操作
+      let externalLinkActions = extJson.externalLinkActions.split(',');
+      if (route.name === SHARE_ADD_ROUTER_NAME) {
+        if (!externalLinkActions.includes('add')) {
+          pageErrorTip.value = '当前表单不支持外部新增'
+          return
+        }
+      } else if (route.name === SHARE_UPDATE_ROUTER_NAME) {
+        if (!externalLinkActions.includes('edit')) {
+          pageErrorTip.value = '当前表单不支持外部编辑'
+          return
+        }
+      } else if (route.name === SHARE_DETAIL_ROUTER_NAME) {
+        if (!externalLinkActions.includes('detail')) {
+          pageErrorTip.value = '当前表单不支持外部详情'
+          return
+        }
+      } else {
+        pageErrorTip.value = '未知的页面';
+        return;
+      }
+
+      // 判断表单类型
+      if (record.tableType == 3) {
+        pageErrorTip.value = '不支持附表外部链接';
+        return;
+      }
+
+      shareStore.setCgformRecord(record);
+
+      // 查询数据
+      if (route.name === SHARE_UPDATE_ROUTER_NAME || route.name === SHARE_DETAIL_ROUTER_NAME) {
+        const {dataId} = route.params;
+        if (!dataId) {
+          pageErrorTip.value = '参数错误'
+          return
+        }
+        res = await getCgformRecordById(formId as string, dataId as string);
+        if (!res.success) {
+          pageErrorTip.value = res.message
+          return
+        }
+        const dataRecord = res.result
+        if (dataRecord?.id !== dataId) {
+          pageErrorTip.value = '数据不存在或已删除'
+          return
+        }
+        shareStore.setDataRecord(dataRecord);
+      }
+
+    } catch (e: any) {
+      pageErrorTip.value = e?.message || e
+      console.error(e)
+    } finally {
+      pageLoading.value = false
+    }
+  }
+
+  return {
+    pageLoading,
+    pageErrorTip,
+
+    initCgformShare,
+  }
+}
\ No newline at end of file
diff --git a/src/views/super/online/cgform/share/index.ts b/src/views/super/online/cgform/share/index.ts
new file mode 100644
index 0000000..9c30024
--- /dev/null
+++ b/src/views/super/online/cgform/share/index.ts
@@ -0,0 +1,10 @@
+import {router} from "@/router";
+
+import {routerBeforeEach, SHARE_LOGIN_ROUTE, SHARE_ROUTE} from "./route";
+
+export function register() {
+  router.addRoute(SHARE_LOGIN_ROUTE);
+  router.addRoute(SHARE_ROUTE);
+
+  router.beforeEach(routerBeforeEach);
+}
diff --git a/src/views/super/online/cgform/share/layouts/default/components/ErrorTip.vue b/src/views/super/online/cgform/share/layouts/default/components/ErrorTip.vue
new file mode 100644
index 0000000..24c1f97
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/components/ErrorTip.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-result
+      status="error"
+      :title="title"
+      :subTitle="subTitle"
+  >
+    <template #extra>
+      <a-button type="primary" @click="onGoToHome">返回首页</a-button>
+      <a-button @click="onReload">刷新页面</a-button>
+      <a-button @click="onClose">关闭</a-button>
+    </template>
+  </a-result>
+</template>
+
+<script setup lang="ts">
+import {router} from "@/router";
+import {PageEnum} from "@/enums/pageEnum";
+
+defineProps({
+  title: {
+    type: String,
+    default: '啊哦，页面出错了'
+  },
+  subTitle: String,
+})
+
+function onGoToHome() {
+  router.push(PageEnum.BASE_HOME);
+}
+
+function onReload() {
+  location.reload()
+}
+
+function onClose() {
+  window.close()
+  setTimeout(() => alert('当前页面无法通过按钮关闭，请手动关闭'), 1000)
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/super/online/cgform/share/layouts/default/content/index.vue b/src/views/super/online/cgform/share/layouts/default/content/index.vue
new file mode 100644
index 0000000..a411712
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/content/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+    <RouterView />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useContentViewHeight } from './useContentViewHeight';
+
+  export default defineComponent({
+    name: 'LayoutContent',
+    components: {},
+    setup() {
+      const { prefixCls } = useDesign('online-share-layout-content');
+      const { getOpenPageLoading } = useTransitionSetting();
+      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+
+      useContentViewHeight();
+
+      return {
+        prefixCls,
+        getOpenPageLoading,
+        getLayoutContentMode,
+        getPageLoading,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-online-share-layout-content';
+
+  .@{prefix-cls} {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    &.fixed {
+      width: 1200px;
+      margin: 0 auto;
+    }
+
+    &-loading {
+      position: absolute;
+      top: 200px;
+      z-index: @page-loading-z-index;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/default/content/useContentContext.ts b/src/views/super/online/cgform/share/layouts/default/content/useContentContext.ts
new file mode 100644
index 0000000..f12e77b
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/content/useContentContext.ts
@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface ContentContextProps {
+  contentHeight: ComputedRef<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<ContentContextProps> = Symbol();
+
+export function createContentContext(context: ContentContextProps) {
+  return createContext<ContentContextProps>(context, key, { native: true });
+}
+
+export function useContentContext() {
+  return useContext<ContentContextProps>(key);
+}
diff --git a/src/views/super/online/cgform/share/layouts/default/content/useContentViewHeight.ts b/src/views/super/online/cgform/share/layouts/default/content/useContentViewHeight.ts
new file mode 100644
index 0000000..b55b7e8
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/content/useContentViewHeight.ts
@@ -0,0 +1,42 @@
+import { ref, computed, unref } from 'vue';
+import { createPageContext } from '/@/hooks/component/usePageContext';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+
+const headerHeightRef = ref(0);
+const footerHeightRef = ref(0);
+
+export function useLayoutHeight() {
+  function setHeaderHeight(val) {
+    headerHeightRef.value = val;
+  }
+  function setFooterHeight(val) {
+    footerHeightRef.value = val;
+  }
+  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
+}
+
+export function useContentViewHeight() {
+  const contentHeight = ref(window.innerHeight);
+  const pageHeight = ref(window.innerHeight);
+  const getViewHeight = computed(() => {
+    return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0;
+  });
+
+  useWindowSizeFn(
+    () => {
+      contentHeight.value = window.innerHeight;
+    },
+    100,
+    { immediate: true }
+  );
+
+  async function setPageHeight(height: number) {
+    pageHeight.value = height;
+  }
+
+  createPageContext({
+    contentHeight: getViewHeight,
+    setPageHeight,
+    pageHeight,
+  });
+}
diff --git a/src/views/super/online/cgform/share/layouts/default/header/components/index.ts b/src/views/super/online/cgform/share/layouts/default/header/components/index.ts
new file mode 100644
index 0000000..4d3daef
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/header/components/index.ts
@@ -0,0 +1,5 @@
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+
+export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {
+  loading: true,
+});
diff --git a/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/DropMenuItem.vue b/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/DropMenuItem.vue
new file mode 100644
index 0000000..7bc9d76
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <MenuItem :key="itemKey">
+    <span class="flex items-center">
+      <Icon :icon="icon" class="mr-1" />
+      <span>{{ text }}</span>
+    </span>
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { Menu } from 'ant-design-vue';
+
+  import { computed, defineComponent, getCurrentInstance } from 'vue';
+
+  import Icon from '/@/components/Icon/index';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'DropdownMenuItem',
+    components: { MenuItem: Menu.Item, Icon },
+    props: {
+      // 【issues/6855】
+      itemKey: propTypes.string,
+      text: propTypes.string,
+      icon: propTypes.string,
+    },
+    setup(props) {
+      const instance = getCurrentInstance();
+      // update-begin--author:liaozhiyang---date:20240717---for：【issues/6855】组件使用key作props报警告，改为itemKey
+      const itemKey = computed(() => props.itemKey || instance?.vnode?.props?.itemKey);
+      // update-end--author:liaozhiyang---date:20240717---for：【issues/6855】组件使用key作props报警告，改为itemKey
+      return { itemKey };
+    },
+  });
+</script>
diff --git a/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/index.vue b/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/index.vue
new file mode 100644
index 0000000..15ced9d
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/header/components/user-dropdown/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
+    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
+      <img :class="`${prefixCls}__header`" :src="getAvatarUrl"/>
+      <span :class="`${prefixCls}__info hidden md:block`">
+        <span :class="`${prefixCls}__name  `" class="truncate">
+          {{ getUserInfo.realname }}
+        </span>
+      </span>
+    </span>
+
+    <template #overlay>
+      <Menu @click="handleMenuClick">
+        <MenuItem itemKey="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline"/>
+        <MenuItem itemKey="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline"/>
+      </Menu>
+    </template>
+  </Dropdown>
+</template>
+<script lang="ts">
+// components
+import {Dropdown, Menu} from 'ant-design-vue';
+
+import {computed, defineComponent} from 'vue';
+
+import {useUserStore} from '/@/store/modules/user';
+
+import {useHeaderSetting} from '/@/hooks/setting/useHeaderSetting';
+import {useI18n} from '/@/hooks/web/useI18n';
+import {useDesign} from '/@/hooks/web/useDesign';
+import {useMessage} from '/@/hooks/web/useMessage';
+import headerImg from '/@/assets/images/header.jpg';
+import {propTypes} from '/@/utils/propTypes';
+
+import {createAsyncComponent} from '/@/utils/factory/createAsyncComponent';
+
+import {queryAllDictItems, refreshCache} from '/@/views/system/dict/dict.api';
+import {DB_DICT_DATA_KEY} from '/@/enums/cacheEnum';
+import {removeAuthCache, setAuthCache} from '/@/utils/auth';
+import {getFileAccessHttpUrl} from '/@/utils/common/compUtils';
+
+type MenuEvent = 'logout' | 'doc' | 'lock' | 'cache' | 'depart';
+
+const {createMessage} = useMessage();
+
+export default defineComponent({
+  name: 'UserDropdown',
+  components: {
+    Dropdown,
+    Menu,
+    MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
+    MenuDivider: Menu.Divider,
+  },
+  props: {
+    theme: propTypes.oneOf(['dark', 'light']),
+  },
+  setup() {
+    const {prefixCls} = useDesign('online-share-header-user-dropdown');
+    const {t} = useI18n();
+    const {getUseLockPage} = useHeaderSetting();
+
+    const userStore = useUserStore();
+
+    const getUserInfo = computed(() => {
+      const {realname = 'NoLogin', avatar} = userStore.getUserInfo || {};
+      return {
+        realname,
+        avatar: avatar || headerImg
+      }
+    });
+
+    const getAvatarUrl = computed(() => {
+      let {avatar} = getUserInfo.value;
+      if (avatar == headerImg) {
+        return avatar;
+      } else {
+        return getFileAccessHttpUrl(avatar);
+      }
+    });
+
+    //  login out
+    function handleLoginOut() {
+      userStore.confirmLoginOut();
+    }
+
+    // 清除缓存
+    async function clearCache() {
+      const result = await refreshCache();
+      if (result.success) {
+        const res = await queryAllDictItems();
+        removeAuthCache(DB_DICT_DATA_KEY);
+        setAuthCache(DB_DICT_DATA_KEY, res.result);
+        // update-begin--author:liaozhiyang---date:20240124---for：【QQYUN-7970】国际化
+        createMessage.success(t('layout.header.refreshCacheComplete'));
+        // update-end--author:liaozhiyang---date:20240124---for：【QQYUN-7970】国际化
+        // update-begin--author:wangshuai---date:20241112---for：【issues/7433】vue3 数据字典优化建议
+        userStore.setAllDictItems(res.result);
+        // update-end--author:wangshuai---date:20241112---for：【issues/7433】vue3 数据字典优化建议
+      } else {
+        // update-begin--author:liaozhiyang---date:20240124---for：【QQYUN-7970】国际化
+        createMessage.error(t('layout.header.refreshCacheFailure'));
+        // update-end--author:liaozhiyang---date:20240124---for：【QQYUN-7970】国际化
+      }
+    }
+
+    function handleMenuClick(e: { key: MenuEvent }) {
+      switch (e.key) {
+        case 'logout':
+          handleLoginOut();
+          break;
+        case 'cache':
+          clearCache();
+          break;
+      }
+    }
+
+    return {
+      prefixCls,
+      t,
+      getUserInfo,
+      getAvatarUrl,
+      handleMenuClick,
+      getUseLockPage,
+    };
+  }
+});
+</script>
+<style lang="less">
+@prefix-cls: ~'@{namespace}-online-share-header-user-dropdown';
+
+.@{prefix-cls} {
+  height: @header-height;
+  padding: 0 0 0 10px;
+  padding-right: 10px;
+  overflow: hidden;
+  font-size: 12px;
+  cursor: pointer;
+  align-items: center;
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+  }
+
+  &__header {
+    border-radius: 50%;
+  }
+
+  &__name {
+    font-size: 14px;
+  }
+
+  &--dark {
+    &:hover {
+      background-color: @header-dark-bg-hover-color;
+    }
+  }
+
+  &--light {
+    &:hover {
+      background-color: @header-light-bg-hover-color;
+    }
+
+    .@{prefix-cls}__name {
+      color: @text-color-base;
+    }
+
+    .@{prefix-cls}__desc {
+      color: @header-light-desc-color;
+    }
+  }
+
+  &-dropdown-overlay {
+    // update-begin--author:liaozhiyang---date:20231226---for：【QQYUN-7512】顶部账号划过首次弹出时位置会变更一下
+    width: 160px;
+    // update-end--author:liaozhiyang---date:20231226---for：【QQYUN-7512】顶部账号划过首次弹出时位置会变更一下
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+}
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/default/header/index.less b/src/views/super/online/cgform/share/layouts/default/header/index.less
new file mode 100644
index 0000000..f3e15f9
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/header/index.less
@@ -0,0 +1,200 @@
+@header-trigger-prefix-cls: ~'@{namespace}-layout-header-trigger';
+@header-prefix-cls: ~'@{namespace}-online-share-layout-header';
+@breadcrumb-prefix-cls: ~'@{namespace}-layout-breadcrumb';
+@logo-prefix-cls: ~'@{namespace}-app-logo';
+
+.@{header-prefix-cls} {
+  display: flex;
+  height: @header-height;
+  padding: 0;
+  margin-left: -1px;
+  line-height: @header-height;
+  color: @white;
+  background-color: @white;
+  align-items: center;
+  justify-content: space-between;
+
+  &--mobile {
+    .@{breadcrumb-prefix-cls},
+    .error-action,
+    .notify-item,
+    .lock-item,
+    .fullscreen-item {
+      display: none;
+    }
+
+    .@{logo-prefix-cls} {
+      min-width: unset;
+      padding-right: 0;
+
+      &__title {
+        display: none;
+      }
+    }
+
+    .@{header-trigger-prefix-cls} {
+      padding: 0 4px 0 8px !important;
+    }
+
+    .@{header-prefix-cls}-action {
+      padding-right: 4px;
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: @layout-header-fixed-z-index;
+    width: 100%;
+  }
+
+  &-logo {
+    height: @header-height;
+    min-width: 192px;
+    padding: 0 10px;
+    font-size: 14px;
+
+    img {
+      width: @logo-width;
+      height: @logo-width;
+      margin-right: 2px;
+    }
+  }
+
+  &-left {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .@{header-trigger-prefix-cls} {
+      display: flex;
+      height: 100%;
+      padding: 1px 10px 0 10px;
+      cursor: pointer;
+      align-items: center;
+
+      .anticon {
+        font-size: 22px;
+      }
+
+      &.light {
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+
+        svg {
+          fill: #000;
+        }
+      }
+
+      &.dark {
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+
+  &-menu {
+    height: 100%;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+  }
+
+  &-action {
+    display: flex;
+    min-width: 180px;
+    // padding-right: 12px;
+    align-items: center;
+
+    &__item {
+      display: flex !important;
+      height: @header-height;
+      padding: 0 2px;
+      font-size: 1.2em;
+      cursor: pointer;
+      align-items: center;
+
+      .ant-badge {
+        height: @header-height;
+        line-height: @header-height;
+      }
+
+      .ant-badge-dot {
+        top: 10px;
+        right: 2px;
+      }
+    }
+
+    span[role='img'] {
+      padding: 0 8px;
+    }
+  }
+
+  &--light {
+    background-color: @white !important;
+    border-bottom: 1px solid @header-light-bottom-border-color;
+    border-left: 1px solid @header-light-bottom-border-color;
+
+    .@{header-prefix-cls}-logo {
+      color: @text-color-base;
+
+      &:hover {
+        background-color: @header-light-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        color: @text-color-base;
+
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
+        &:hover {
+          background-color: @header-light-bg-hover-color;
+        }
+      }
+
+      &-icon,
+      span[role='img'] {
+        color: @text-color-base;
+      }
+    }
+  }
+
+  &--dark {
+    background-color: @header-dark-bg-color !important;
+    // border-bottom: 1px solid @border-color-base;
+    border-left: 1px solid @border-color-base;
+
+    .@{header-prefix-cls}-logo {
+      &:hover {
+        background-color: @header-dark-bg-hover-color;
+      }
+    }
+
+    .@{header-prefix-cls}-action {
+      &__item {
+        .app-iconify {
+          padding: 0 10px;
+          font-size: 16px !important;
+        }
+
+        .ant-badge {
+          span {
+            color: @white;
+          }
+        }
+
+        &:hover {
+          background-color: @header-dark-bg-hover-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/super/online/cgform/share/layouts/default/header/index.vue b/src/views/super/online/cgform/share/layouts/default/header/index.vue
new file mode 100644
index 0000000..f83a297
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/header/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <Header :class="getHeaderClass">
+    <!-- left start -->
+    <div :class="`${prefixCls}-left`">
+      <!-- logo -->
+      <AppLogo
+          :class="`${prefixCls}-logo`"
+          :theme="getHeaderTheme"
+          :style="getLogoWidth"
+      />
+      <!-- 欢迎语 -->
+      <span
+          :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"
+      >
+        {{ t('layout.header.welcomeIn') }} {{ title }}
+      </span>
+    </div>
+    <!-- left end -->
+
+    <!-- action  -->
+    <div :class="`${prefixCls}-action`">
+      <FullScreen :class="`${prefixCls}-action__item fullscreen-item`"/>
+      <UserDropDown :theme="getHeaderTheme"/>
+    </div>
+  </Header>
+  <LoginSelect ref="loginSelectRef"/>
+  <div v-if="fixed" style="height: 60px;"></div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, onMounted, ref, toRaw, unref} from 'vue';
+import {useGlobSetting} from '/@/hooks/setting';
+import {propTypes} from '/@/utils/propTypes';
+
+import {Layout} from 'ant-design-vue';
+import {AppLogo} from '/@/components/Application';
+
+import {useHeaderSetting} from '/@/hooks/setting/useHeaderSetting';
+import {useMenuSetting} from '/@/hooks/setting/useMenuSetting';
+import {FullScreen, LayoutBreadcrumb} from "@/layouts/default/header/components";
+import {UserDropDown} from './components';
+import {useAppInject} from '/@/hooks/web/useAppInject';
+import {useDesign} from '/@/hooks/web/useDesign';
+
+import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
+import {useUserStore} from '/@/store/modules/user';
+import {useI18n} from '/@/hooks/web/useI18n';
+
+const {t} = useI18n();
+
+export default defineComponent({
+  name: 'LayoutHeader',
+  components: {
+    Header: Layout.Header,
+    AppLogo,
+    LayoutBreadcrumb,
+    UserDropDown,
+    FullScreen,
+    LoginSelect,
+  },
+  props: {
+    fixed: propTypes.bool,
+  },
+  setup(props) {
+    const {prefixCls} = useDesign('online-share-layout-header');
+    const userStore = useUserStore();
+    const {
+      getIsMixMode,
+      getMenuWidth,
+    } = useMenuSetting();
+    const {title} = useGlobSetting();
+
+    const {
+      getHeaderTheme,
+    } = useHeaderSetting();
+
+    const {getIsMobile} = useAppInject();
+
+    const getHeaderClass = computed(() => {
+      const theme = unref(getHeaderTheme);
+      return [
+        prefixCls,
+        {
+          [`${prefixCls}--fixed`]: props.fixed,
+          [`${prefixCls}--mobile`]: unref(getIsMobile),
+          [`${prefixCls}--${theme}`]: theme,
+        },
+      ];
+    });
+
+
+    const getLogoWidth = computed(() => {
+      if (!unref(getIsMixMode) || unref(getIsMobile)) {
+        return {};
+      }
+      const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
+      return {width: `${width}px`};
+    });
+
+    /**
+     * 首页多租户部门弹窗逻辑
+     */
+    const loginSelectRef = ref();
+
+    function showLoginSelect() {
+      //判断是否是登陆进来
+      const loginInfo = toRaw(userStore.getLoginInfo) || {};
+      if (!!loginInfo.isLogin) {
+        loginSelectRef.value.show(loginInfo);
+      }
+    }
+
+    onMounted(() => {
+      showLoginSelect();
+    });
+
+    return {
+      t,
+      title,
+      loginSelectRef,
+
+      prefixCls,
+      getHeaderClass,
+      getHeaderTheme,
+      getIsMobile,
+      getLogoWidth,
+    };
+  },
+});
+
+</script>
+<style lang="less">
+@import './index.less';
+// 顶部欢迎语展示样式
+// noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-online-share-layout-header';
+
+.ant-layout .@{prefix-cls} {
+  display: flex;
+  padding: 0 8px;
+  height: @header-height;
+  align-items: center;
+
+  .headerIntroductionClass {
+    margin-right: 4px;
+    margin-bottom: 2px;
+    border-bottom: 0;
+    border-left: 0;
+  }
+
+  &--light {
+    .headerIntroductionClass {
+      color: #000;
+    }
+  }
+
+  &--dark {
+    .headerIntroductionClass {
+      color: rgba(255, 255, 255, 1);
+    }
+
+    .anticon, .truncate {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+}
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/default/index.vue b/src/views/super/online/cgform/share/layouts/default/index.vue
new file mode 100644
index 0000000..26b74cd
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/default/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <template v-if="pageLoading">
+    <div style="text-align: center; padding-top: 120px;">
+      <a-spin tip="加载中…"/>
+    </div>
+  </template>
+  <template v-else-if="pageErrorTip">
+    <ErrorTip :subTitle="pageErrorTip"/>
+  </template>
+  <Layout v-else :class="prefixCls" v-bind="lockEvents">
+    <LayoutHeader v-if="!getIsMobile" fixed/>
+    <Layout :class="[layoutClass]">
+      <Layout :class="`${prefixCls}-main`">
+        <LayoutContent/>
+      </Layout>
+    </Layout>
+  </Layout>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, unref, watch} from 'vue';
+import {Layout} from 'ant-design-vue';
+
+import LayoutHeader from './header/index.vue';
+import LayoutContent from './content/index.vue';
+import ErrorTip from './components/ErrorTip.vue';
+
+import {useHeaderSetting} from '/@/hooks/setting/useHeaderSetting';
+import {useMenuSetting} from '/@/hooks/setting/useMenuSetting';
+import {useDesign} from '/@/hooks/web/useDesign';
+import {useLockPage} from '/@/hooks/web/useLockPage';
+
+import {useAppInject} from '/@/hooks/web/useAppInject';
+import {useCgformShare} from "../../hooks/useCgformShare";
+import {router} from "@/router";
+
+export default defineComponent({
+  name: 'DefaultLayout',
+  components: {
+    LayoutHeader,
+    LayoutContent,
+    ErrorTip,
+    Layout,
+  },
+  setup() {
+    const {prefixCls} = useDesign('online-share-default-layout');
+
+    const {initCgformShare, pageLoading, pageErrorTip} = useCgformShare();
+
+    const {getIsMobile} = useAppInject();
+    const {getShowFullHeaderRef} = useHeaderSetting();
+    const {getShowSidebar, getIsMixSidebar, getShowMenu} = useMenuSetting();
+
+    // Create a lock screen monitor
+    const lockEvents = useLockPage();
+
+    const layoutClass = computed(() => {
+      let cls: string[] = ['ant-layout'];
+      if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+        cls.push('ant-layout-has-sider');
+      }
+      return cls;
+    });
+
+    watch(router.currentRoute, () => {
+      initCgformShare()
+      console.warn('layout - watch(router.currentRoute :')
+    }, {immediate: true})
+
+    return {
+      pageLoading,
+      pageErrorTip,
+
+      getShowFullHeaderRef,
+      getShowSidebar,
+      prefixCls,
+      getIsMobile,
+      getIsMixSidebar,
+      layoutClass,
+      lockEvents,
+    };
+  },
+});
+</script>
+<style lang="less">
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-online-share-default-layout';
+
+.@{prefix-cls} {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  background-color: @content-bg;
+  flex-direction: column;
+
+  > .ant-layout {
+    min-height: 100%;
+  }
+
+  &-main {
+    width: 100%;
+    margin-left: 1px;
+  }
+}
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/AppLogin.api.ts b/src/views/super/online/cgform/share/layouts/login/AppLogin.api.ts
new file mode 100644
index 0000000..ba60229
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/AppLogin.api.ts
@@ -0,0 +1,22 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  saveTenantJoinUser = '/sys/tenant/saveTenantJoinUser',
+  joinTenantByHouseNumber = '/sys/tenant/joinTenantByHouseNumber',
+}
+
+/**
+ * 保存租户
+ * @param params
+ */
+export const saveTenantJoinUser = (params) => {
+  return defHttp.post({ url: Api.saveTenantJoinUser, params }, { isTransformResponse: false });
+};
+
+/**
+ * 加入租户
+ * @param params
+ */
+export const joinTenantByHouseNumber = (params) => {
+  return defHttp.post({ url: Api.joinTenantByHouseNumber, params }, { isTransformResponse: false });
+};
diff --git a/src/views/super/online/cgform/share/layouts/login/AppLogin.vue b/src/views/super/online/cgform/share/layouts/login/AppLogin.vue
new file mode 100644
index 0000000..72f611c
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/AppLogin.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="login-box" v-if="type === 'login'">
+    <div class="login-subject">
+      <AppLoginHeader />
+      <div class="flex-row align-items-center margin-top10">
+        <div class="login-title">
+          {{ loginType === 'accountLogin' ? t('sys.login.signInFormTitle') : t('sys.login.mobileSignInFormTitle') }}
+        </div>
+      </div>
+      <div class="content-box">
+        <div v-show="loginType === 'accountLogin'">
+          <AccountLoginForm ref="accountLoginRef" @login="loginHandleType" @forget-pwd="forgetPwdClick" @login-success="loginSuccess" />
+        </div>
+        <div v-show="loginType === 'phoneLogin'">
+          <PhoneLoginForm
+            @login="loginHandleType"
+            @login-success="loginSuccess"
+            :bindThirdAccount="bindThirdAccount"
+            @bind-third-phone="bindThirdPhone"
+          />
+        </div>
+        <div class="text-center" v-if="!bindThirdAccount">
+          <div class="login-other">
+            {{ t('sys.login.otherSignIn') }}
+          </div>
+          <div style="width: 100%; display: flex">
+            <div class="aui-third-login">
+              <a title="微信" @click="onThirdLogin('wechat_open')">
+                <WechatFilled style="color: rgb(75, 176, 79)" />
+              </a>
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="register-account pointer" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-show="type === 'register'">
+    <a-spin :spinning="spinningLogin">
+      <AppRegister
+        ref="appRegisterRef"
+        @return-login="returnLogin"
+        :bindThirdAccount="bindThirdAccount"
+        @login-account="loginAccount"
+        @bind-third-account = "bindAccountThird"
+      />
+    </a-spin>
+  </div>
+  <div v-show="type === 'forgetPwd'">
+    <AppForgetPassword ref="appForgetPwdRef" @return-login="returnLogin" @login-account="loginAccount" />
+  </div>
+  <div v-show="type === 'tenant'">
+    <AppTenant @success="windowReload"/>
+  </div>
+  <div class="login-language" v-show="type !== 'thirdLogin'">
+    <Icon icon="ant-design:global-outlined" style="font-size: 13px; color: #9e9e9e" />
+    <a-dropdown :trigger="['click']" placement="top">
+      <span class="language-drop pointer" @click.prevent>
+        {{ languageValue === 'zh_CN' ? 'CN' : 'EN' }}
+        <Icon icon="ant-design:down-outlined" style="color: #9e9e9e; font-size: 13px" />
+      </span>
+      <template #overlay>
+        <a-menu v-model:value="languageValue" @click="handleMenuEvent">
+          <a-menu-item key="zh_CN">
+            <span>简体中文</span>
+          </a-menu-item>
+          <a-menu-item key="en">
+            <span>English</span>
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </div>
+  <!-- 第三方登录相关弹框 -->
+  <AppThirdForm ref="thirdModalRef" @type="thirdLoginType" @login-success="loginSuccess" />
+</template>
+
+<script lang="ts" setup name="myapps-applogin">
+  import { ref, reactive, unref, computed, onMounted, toRaw, nextTick } from 'vue';
+  import AppLoginHeader from './component/AppLoginHeader.vue';
+  import AppRegister from './component/AppRegister.vue';
+  import AccountLoginForm from './component/AccountLoginForm.vue';
+  import PhoneLoginForm from './component/PhoneLoginForm.vue';
+  import AppForgetPassword from './component/AppForgetPassword.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { GithubFilled, WechatFilled, DingtalkCircleFilled } from '@ant-design/icons-vue';
+  import { IconFont } from '/@/utils/iconfont2';
+  import { Rule } from '/@/components/Form';
+  import { useFormRules } from '/@/views/sys/login/useLogin';
+  import { getCodeInfo } from '/@/api/sys/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+  import AppTenant from './component/AppTenant.vue';
+  import { router } from '/@/router';
+  import AppThirdForm from './component/AppThirdForm.vue';
+  import { LocaleType } from '/#/config';
+  import { DropMenu } from '/@/components/Dropdown';
+  import { useLocale } from '/@/locales/useLocale';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  const { changeLocale, getLocale } = useLocale();
+  const thirdModalRef = ref();
+  const userStore = useUserStore();
+  //登录方式：手机号/账号
+  const loginType = ref<string>('accountLogin');
+  //注册页面
+  const appRegisterRef = ref();
+  //登录页面
+  const accountLoginRef = ref();
+  //忘记密码页面
+  const appForgetPwdRef = ref();
+  const { t } = useI18n();
+
+  //方式 判端登录、注册、忘记密码等
+  const type = ref<string>('login');
+  //手机号登录表单
+  const loginPhoneRef = ref();
+  const formPhoneState = reactive<any>({
+    phone: '',
+    smscode: '',
+  });
+  const { notification, createErrorModal } = useMessage();
+  //中文还是英文
+  const languageValue = ref<string>('zh_CN');
+  //当前是否为绑定账号
+  const bindThirdAccount = ref<boolean>(false);
+  const spinningLogin = ref<boolean>(false);
+  /**
+   * 注册
+   */
+  function registerHandleClick() {
+    type.value = 'register';
+    setTimeout(() => {
+      appRegisterRef.value.clearValidate();
+    }, 300);
+  }
+
+  /**
+   * 返回登录页面
+   */
+  function returnLogin() {
+    type.value = 'login';
+    loginType.value = 'accountLogin';
+  }
+
+  /**
+   * 返回登录页面并赋值
+   */
+  function loginAccount(values) {
+    type.value = 'login';
+    loginType.value = 'accountLogin';
+    setTimeout(() => {
+      accountLoginRef.value.setAccountData(values);
+    }, 300);
+  }
+
+  /**
+   * 显示手机号登录
+   * @param type
+   */
+  function loginHandleType(type) {
+    loginType.value = type;
+  }
+
+  /**
+   * 忘记密码
+   */
+  function forgetPwdClick() {
+    type.value = 'forgetPwd';
+  }
+
+  /**
+   * 登陆成功
+   */
+  async function loginSuccess(value) {
+    //登录成功之后需要查询租户
+    const loginInfo = toRaw(userStore.getLoginInfo);
+    const { tenantList } = loginInfo;
+    if (!tenantList || tenantList.length === 0) {
+      type.value = 'tenant';
+    } else {
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${value}`,
+        duration: 3,
+      });
+      //update-begin---author:wangshuai ---date:20230424  for：【QQYUN-5195】登录之后直接刷新页面导致没有进入创建组织页面------------
+      let redirect = router.currentRoute.value?.query?.redirect as string;
+      if (redirect) {
+        // 当前页面打开
+        window.open(decodeURIComponent(redirect), '_self')
+        return;
+      }
+      //update-end---author:wangshuai ---date:20230424  for：【QQYUN-5195】登录之后直接刷新页面导致没有进入创建组织页面------------
+      await router.replace((userStore.getUserInfo && userStore.getUserInfo.homePath) || PageEnum.BASE_HOME);
+      windowReload();
+    }
+  }
+
+  /**
+   * 浏览器刷新
+   */
+  function windowReload() {
+    window.location.reload();
+  }
+
+  /**
+   * 第三方登录
+   * @param type
+   */
+  function onThirdLogin(type) {
+    thirdModalRef.value.onThirdLogin(type);
+  }
+
+  async function toggleLocale(lang: LocaleType | string) {
+    await changeLocale(lang as LocaleType);
+  }
+
+  function handleMenuEvent({ key }) {
+    languageValue.value = key;
+    if (unref(getLocale) === key) {
+      return;
+    }
+    toggleLocale(key);
+  }
+
+  //==================================绑定第三方登录账号=============================================
+  /**
+   * 第三方登录回调事件
+   * @param values
+   */
+  function thirdLoginType(values) {
+    nextTick(() => {
+      if (values.loginType != 'thirdLogin') {
+        bindThirdAccount.value = true;
+        thirdModalRef.value.hideBindThirdAccount();
+      }
+      if (values.loginType === 'login') {
+        loginType.value = 'phoneLogin';
+      }
+      type.value = values.loginType;
+    });
+  }
+
+  /**
+   * 绑定手机号
+   */
+  async function bindThirdPhone(values) {
+    spinningLogin.value = true;
+    await thirdModalRef.value.bindThirdAccount(values);
+    spinningLogin.value = false;
+  }
+
+  /**
+   * 绑定第三方账号
+   * @param values
+   */
+  async function bindAccountThird(values) {
+    spinningLogin.value = true;
+    await thirdModalRef.value.createAccountBindThird(values);
+    spinningLogin.value = false;
+  }
+  //==================================绑定第三方登录账号=============================================
+
+  onMounted(() => {
+    let app = document.getElementById('app');
+    app.style.height = 'auto';
+    let body = document.getElementsByTagName('body')[0].style;
+    body.backgroundColor = '#f2f5f7';
+  });
+</script>
+
+<style lang="less" scoped>
+  .login-box {
+    display: block;
+  }
+
+  .login-subject {
+    max-width: 420px;
+    padding: 48px 48px 23px;
+    box-sizing: border-box;
+    margin: 80px auto 0;
+    background: #ffffff;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    position: relative;
+  }
+
+  .flex-row {
+    display: flex;
+    min-width: 0;
+  }
+
+  .align-items-center {
+    align-items: center;
+  }
+
+  .margin-top40 {
+    margin-top: 40px;
+  }
+
+  .login-title {
+    text-align: left;
+    font-size: 20px;
+    color: #333333;
+  }
+
+  .webkit-flex {
+    -webkit-flex: 1;
+    flex: 1;
+    -ms-flex: 1;
+  }
+
+  .content-box {
+    margin-top: 5px;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .login-other {
+    text-align: center;
+    color: #bbb;
+    margin: 15px auto;
+  }
+
+  .aui-third-login {
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    font-size: 24px;
+
+    a {
+      color: #888;
+    }
+  }
+
+  .line {
+    width: 100%;
+    height: 0;
+    border-top: 1px solid #f0f0f0;
+    opacity: 1;
+    display: block;
+    margin-top: 20px;
+  }
+
+  .register-account {
+    font-size: 14px;
+    color: #2196f3;
+    display: block;
+    margin: 20px auto 0;
+    text-align: center;
+  }
+
+  .login-class {
+    color: 757575;
+    margin-right: 20px;
+  }
+
+  :deep(.ant-spin-dot-item) {
+    background: #757575;
+  }
+
+  .login-language {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    min-width: 0;
+  }
+
+  .language-drop {
+    padding: 5px 5px 5px 12px;
+    color: #757575;
+  }
+
+  .margin-top10{
+    margin-top: 10px;
+  }
+
+  @media screen and (max-width: 414px) {
+    .login-box {
+      padding: 46px 16px;
+    }
+
+    .login-subject {
+      margin: 0;
+      padding: 48px 24px 23px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/AppThirdLogin.ts b/src/views/super/online/cgform/share/layouts/login/AppThirdLogin.ts
new file mode 100644
index 0000000..c8b1644
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/AppThirdLogin.ts
@@ -0,0 +1,196 @@
+import { ref, unref, defineEmits } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useUserStore } from '/@/store/modules/user';
+import { setThirdCaptcha, getCaptcha } from '/@/api/sys/user';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export function useThirdLogin(emit) {
+  const { createMessage, notification } = useMessage();
+  const { t } = useI18n();
+  const glob = useGlobSetting();
+  const userStore = useUserStore();
+  //第三方类型
+  const thirdType = ref('');
+  //第三方登录相关信息
+  const thirdLoginInfo = ref<any>({});
+  //状态
+  const thirdLoginState = ref(false);
+  //注册或者绑定账户
+  const bindingAccount = ref(false);
+  //第三方用户UUID
+  const thirdUserUuid = ref('');
+  //提示窗
+  const thirdConfirmShow = ref(false);
+  //绑定手机号
+  const thirdPhone = ref('');
+  //验证码
+  const thirdCaptcha = ref('');
+  //第三方登录
+  function onThirdLogin(source) {
+    let url = `${glob.uploadUrl}/sys/thirdLogin/render/${source}`;
+    window.open(
+      url,
+      `login ${source}`,
+      'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
+    );
+    thirdType.value = source;
+    thirdLoginInfo.value = {};
+    thirdLoginState.value = false;
+    let receiveMessage = function (event) {
+      let token = event.data;
+      if (typeof token === 'string') {
+        //如果是字符串类型 说明是token信息
+        if (token === '登录失败') {
+          createMessage.warning(token);
+        } else if (token.includes('绑定手机号')) {
+          bindingAccount.value = true;
+          let strings = token.split(',');
+          thirdUserUuid.value = strings[1];
+          emit('type', { loginType: 'thirdLogin' });
+        } else {
+          doThirdLogin(token);
+        }
+      } else if (typeof token === 'object') {
+        //对象类型 说明需要提示是否绑定现有账号
+        if (token['isObj'] === true) {
+          thirdConfirmShow.value = true;
+          thirdLoginInfo.value = { ...token };
+        }
+      } else {
+        createMessage.warning('不识别的信息传递');
+      }
+      //update-begin---author:wangshuai---date:2024-02-20---for:【QQYUN-8156】连续登录失败，导致失败提醒累加---
+      window.removeEventListener('message', unref(receiveMessage),false);
+      //update-end---author:wangshuai---date:2024-02-20---for:【QQYUN-8156】连续登录失败，导致失败提醒累加---
+    };
+    window.addEventListener('message', receiveMessage, false);
+  }
+  // 根据token执行登录
+  function doThirdLogin(token) {
+    if (unref(thirdLoginState) === false) {
+      thirdLoginState.value = true;
+      userStore.ThirdLogin({ token, thirdType: unref(thirdType) }).then((res) => {
+        console.log('res====>doThirdLogin', res);
+        if (res && res.userInfo) {
+          notification.success({
+            message: t('sys.login.loginSuccessTitle'),
+            description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
+            duration: 3,
+          });
+        } else {
+          requestFailed(res);
+        }
+      });
+    }
+  }
+
+  function requestFailed(err) {
+    notification.error({
+      message: '登录失败',
+      description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+      duration: 4,
+    });
+  }
+
+  //绑定手机号点击确定按钮
+  function thirdHandleOk() {
+    if (!unref(thirdPhone)) {
+      cmsFailed('请输入手机号');
+    }
+    if (!unref(thirdCaptcha)) {
+      cmsFailed('请输入验证码');
+    }
+    let params = {
+      mobile: unref(thirdPhone),
+      captcha: unref(thirdCaptcha),
+      thirdUserUuid: unref(thirdUserUuid),
+    };
+    defHttp.post({ url: '/sys/thirdLogin/bindingThirdPhone', params }, { isTransformResponse: false }).then((res) => {
+      if (res.success) {
+        bindingAccount.value = false;
+        doThirdLogin(res.result);
+      } else {
+        createMessage.warning(res.message);
+      }
+    }).catch((e)=>{
+      createMessage.warning(e.message);
+    });
+  }
+  function cmsFailed(err) {
+    notification.error({
+      message: '登录失败',
+      description: err,
+      duration: 4,
+    });
+    return;
+  }
+
+  /**
+   * 登录并绑定
+   */
+  function loginAccountClick() {
+    emit('type', { loginType: 'login' });
+  }
+
+  /**
+   * 创建新账号
+   */
+  function registerAccountClick() {
+    emit('type', { loginType: 'register' });
+  }
+
+  /**
+   * 隐藏绑定页面
+   */
+  function hideBindThirdAccount() {
+    bindingAccount.value = false;
+  }
+
+  /**
+   * 注册用户并且绑定第三方
+   */
+  async function createAccountBindThird(values) {
+    let params = { ...values };
+    params.thirdUserUuid = unref(thirdUserUuid);
+    await defHttp
+      .put({ url: '/sys/thirdLogin/registerBindThirdAccount', params }, { isTransformResponse: false })
+      .then((res) => {
+        if (res.success) {
+          bindingAccount.value = false;
+          doThirdLogin(res.result);
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .catch((e) => {
+        createMessage.warning(e.message);
+      })
+  }
+
+  /**
+   * 绑定手机号
+   * @param values
+   */
+  function bindThirdAccount(values) {
+    thirdPhone.value = values.mobile;
+    thirdCaptcha.value = values.sms;
+    thirdHandleOk();
+  }
+
+  //返回数据和方法
+  return {
+    thirdConfirmShow,
+    bindingAccount,
+    thirdHandleOk,
+    thirdPhone,
+    thirdCaptcha,
+    onThirdLogin,
+    loginAccountClick,
+    registerAccountClick,
+    hideBindThirdAccount,
+    bindThirdAccount,
+    createAccountBindThird,
+  };
+}
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AccountLoginForm.vue b/src/views/super/online/cgform/share/layouts/login/component/AccountLoginForm.vue
new file mode 100644
index 0000000..b459218
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AccountLoginForm.vue
@@ -0,0 +1,285 @@
+<template>
+  <a-form id="loginContentForm" ref="loginRef" :model="formState" :rules="getFormRules" @keyup.enter.native="accountLoginClick">
+    <div class="content-item current-active" @click="formStateInputClick('account')">
+      <a-form-item name="account">
+        <a-input ref="accountRef" id="accountLogin" v-model:value="formState.account" style="height: 40px" @blur="formStateInputBlur" />
+        <div class="form-title" :class="activekey === 'account' ? 'active-title' : ''">
+          {{ t('sys.login.userName') }}
+        </div>
+      </a-form-item>
+    </div>
+    <div class="content-item current-active" @click="formStateInputClick('password')">
+      <a-form-item name="password">
+        <a-input id="pwdLogin" ref="" type="password" v-model:value="formState.password" style="height: 40px" @blur="formStateInputBlur"/>
+        <div class="form-title" :class="activekey === 'password' ? 'active-title' : ''">
+          {{ t('sys.login.password') }}
+        </div>
+      </a-form-item>
+    </div>
+    <div class="content-item current-active">
+      <a-row :span="24">
+        <a-col :span="15">
+          <a-form-item name="inputCode" @click="formStateInputClick('inputCode')">
+            <a-input ref="codeRef" v-model:value="formState.inputCode" style="height: 40px" @blur="formStateInputBlur" />
+            <div class="form-title" :class="activekey === 'inputCode' ? 'active-title' : ''">
+              {{ t('sys.login.inputCode') }}
+            </div>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <div class="code-image">
+            <img
+              class="pointer"
+              v-if="randCodeData.requestCodeSuccess"
+              style="margin-top: 2px; max-width: initial"
+              :src="randCodeData.randCodeImage"
+              @click="handleChangeCheckCode"
+            />
+            <img v-else style="margin-top: 2px; max-width: initial" :src="codeImage" @click="handleChangeCheckCode" />
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="forget-pwd">
+      <div style="float: left" class="pointer forget-login-pwd">
+        <span style="color: #757575" @click="forgetPwdClick">{{ t('sys.login.forgetPassword') }}</span>
+      </div>
+      <div class="remember-password pointer" style="float: right">
+        <a-checkbox v-model:checked="rememberMeCheck">{{ t('sys.login.rememberMe') }}</a-checkbox>
+      </div>
+    </div>
+    <div>
+      <a-button type="primary" @click="accountLoginClick" :loading="loginLoading" class="login-btn">{{ t('sys.login.loginButton') }}</a-button>
+    </div>
+    <div class="phone-login-btn pointer" @click="phoneLoginBtnClick">{{ t('sys.login.mobileSignInFormTitle') }}</div>
+  </a-form>
+</template>
+
+<script lang="ts" setup name="account-login-form">
+  //获取手机号的样式
+  import {computed, effect, nextTick, onMounted, reactive, ref, toRaw, unref, watch} from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useFormRules, useFormValid } from '/@/views/sys/login/useLogin';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getCodeInfo } from '/@/api/sys/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import codeImage from '/@/assets/images/checkcode.png';
+  import { RuleObject } from 'ant-design-vue/lib/form/interface';
+
+  const accountRef = ref();
+  const codeRef = ref();
+  const passwordRef = ref();
+  const { t } = useI18n();
+  //选中值
+  const activekey = ref<string>('');
+
+  //登录加载
+  const loginLoading = ref<boolean>(false);
+  //登录表单
+  const loginRef = ref();
+  const randCodeData = reactive({
+    randCodeImage: '',
+    requestCodeSuccess: false,
+    checkKey: -1,
+  });
+  //手机号表单
+  const formState = reactive<any>({
+    account: '',
+    password: '',
+    inputCode: '',
+  });
+  //登录规则
+  const { getFormRules } = useFormRules(formState);
+  const { validForm } = useFormValid(loginRef);
+  const userStore = useUserStore();
+  //记住我
+  const rememberMeCheck = ref<boolean>(false);
+  const getUsernameClass = computed(() => {
+    return formState.account != '' ? 'current-active' : '' || unref(activekey) === 'account' ? 'current-active' : '';
+  });
+  //获取密码的样式
+  const getPwdClass = computed(() => {
+    return formState.password != '' ? 'current-active' : '' || unref(activekey) === 'password' ? 'current-active' : '';
+  });
+  //获取验证码的样式
+  const getInputCodeClass = computed(() => {
+    return formState.inputCode != '' ? 'current-active' : '' || unref(activekey) === 'inputCode' ? 'current-active' : '';
+  });
+  const { notification, createErrorModal } = useMessage();
+  const emit = defineEmits(['login', 'forget-pwd', 'login-success']);
+
+  /**
+   * 表单组件点击事件
+   */
+  function formStateInputClick(val) {
+    activekey.value = val;
+  }
+
+  /**
+   * 表单组件失去焦点
+   */
+  function formStateInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 登录点击事件
+   */
+  async function accountLoginClick() {
+    let values = await validForm();
+    if (!values) {
+      return;
+    }
+    try {
+      loginLoading.value = true;
+      const { userInfo } = await userStore.login(
+        toRaw({
+          password: values.password,
+          username: values.account,
+          captcha: values.inputCode,
+          checkKey: randCodeData.checkKey,
+          mode: 'none', //不要默认的错误提示
+          goHome: false, //不跳转到首页
+        })
+      );
+      if (userInfo) {
+        emit('login-success', userInfo.realname);
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.api.networkExceptionMsg'),
+        duration: 3,
+      });
+      handleChangeCheckCode();
+    } finally {
+      loginLoading.value = false;
+    }
+  }
+
+  /**
+   * 获取验证码
+   */
+  function handleChangeCheckCode() {
+    formState.inputCode = '';
+    //TODO 兼容mock和接口，暂时这样处理
+    //update-begin---author:chenrui ---date:2025/1/7  for：[QQYUN-10775]验证码可以复用 #7674------------
+    randCodeData.checkKey = new Date().getTime() + Math.random().toString(36).slice(-4); // 1629428467008;
+    //update-end---author:chenrui ---date:2025/1/7  for：[QQYUN-10775]验证码可以复用 #7674------------
+    getCodeInfo(randCodeData.checkKey).then((res) => {
+      randCodeData.randCodeImage = res;
+      randCodeData.requestCodeSuccess = true;
+    });
+  }
+
+  /**
+   * 手机号登录
+   */
+  function phoneLoginBtnClick() {
+    emit('login', 'phoneLogin');
+  }
+
+  /**
+   * 忘记密码
+   */
+  function forgetPwdClick() {
+    emit('forget-pwd');
+  }
+
+  /**
+   * 设置账号数据
+   * @param values
+   */
+  function setAccountData(values) {
+    Object.assign(formState, values);
+    handleChangeCheckCode();
+  }
+
+  onMounted(() => {
+    handleChangeCheckCode();
+  });
+
+  defineExpose({
+    setAccountData,
+  });
+</script>
+
+<style lang="less" scoped>
+  .content-item {
+    position: relative;
+    margin-top: 24px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+    .active-title {
+      color: #2196f3;
+    }
+  }
+  .code-image {
+    margin-left: 15px;
+  }
+  .forget-login-pwd:hover {
+    span {
+      color: #1182dd !important;
+    }
+  }
+
+  .forget-pwd {
+    font-size: 14px;
+    margin-top: 20px;
+  }
+
+  .remember-password {
+    color: #757575;
+    line-height: 18px;
+    cursor: pointer;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+
+  .login-btn {
+    width: 100%;
+    height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 65px;
+    text-align: center;
+  }
+  .phone-login-btn {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    display: block;
+    background: #ffffff;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #333333;
+    margin-top: 20px;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppForgetPassword.vue b/src/views/super/online/cgform/share/layouts/login/component/AppForgetPassword.vue
new file mode 100644
index 0000000..52ceef9
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppForgetPassword.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="forget-pwd-box">
+    <div class="forget-pwd-subject">
+      <AppLoginHeader />
+      <div class="flex-row align-items-center margin-top40">
+        <div class="register-title">
+          {{ t('sys.login.forgetFormTitle') }}
+        </div>
+      </div>
+      <div class="register-content">
+        <a-form ref="phoneUpdateRef" :model="formState" :rules="getFormRules" v-show="activeUpdateKey === 'vailPhone'">
+          <div class="content-item" :class="getPhoneClass" @click="formStateInputClick('phone')">
+            <a-form-item name="phone">
+              <a-input ref="phoneRef" v-model:value="formState.phone" style="height: 40px" @blur="formStateInputBlur" />
+              <div class="form-title" :class="activekey === 'phone' ? 'active-title' : ''">
+                {{ t('sys.login.mobile') }}
+              </div>
+            </a-form-item>
+          </div>
+          <div class="content-item" :class="getSmsCodeClass">
+            <a-form-item name="smscode" @click="formStateInputClick('smscode')">
+              <a-input ref="smscodeRef" :maxLength="6" v-model:value="formState.smscode" style="height: 40px" @blur="formStateInputBlur" />
+              <div class="form-title" :class="activekey === 'smscode' ? 'active-title' : ''">
+                {{ t('sys.login.smsCode') }}
+              </div>
+            </a-form-item>
+            <a-input
+              type="button"
+              v-if="showInterval"
+              class="aui-code-line pointer"
+              :bordered="false"
+              @click="getLoginCode"
+              v-model:value="loginCode"
+            />
+            <a-input type="button" v-else class="aui-code-line disabled-btn" :bordered="false" v-model:value="loginDisabledCode" />
+          </div>
+          <div class="forget-btn pointer" @click="forgetPwdClick">
+            <span>{{ t('sys.login.nextStep') }}</span>
+          </div>
+          <div class="line"></div>
+        </a-form>
+        <a-form ref="pwdUpdateRef" :model="accountData" :rules="getFormPwdRules" v-show="activeUpdateKey === 'vailPwd'">
+          <div class="content-item" :class="getPhoneClass">
+            <a-form-item name="username">
+              <a-input ref="phoneRef" v-model:value="accountData.username" style="height: 40px" disabled />
+              <div class="active-form-title">
+                {{ t('sys.login.userName') }}
+              </div>
+            </a-form-item>
+          </div>
+          <div class="content-item" :class="getPasswordClass" @click="formStateInputClick('forgetPassword')">
+            <a-form-item name="forgetPassword">
+              <a-input ref="pwdRef" type="password" v-model:value="accountData.forgetPassword" style="height: 40px" @blur="formStateInputBlur" />
+              <div class="form-title" :class="activekey === 'password' ? 'active-title' : ''">
+                {{ t('sys.login.password') }}
+              </div>
+            </a-form-item>
+          </div>
+          <div class="content-item" :class="getConfirmPasswordClass" @click="formStateInputClick('confirmPassword')">
+            <a-form-item name="confirmPassword">
+              <a-input ref="conPwdRef" type="password" v-model:value="accountData.confirmPassword" style="height: 40px" @blur="formStateInputBlur" />
+              <div class="form-title" :class="activekey === 'password' ? 'active-title' : ''">
+                {{ t('sys.login.confirmPassword') }}
+              </div>
+            </a-form-item>
+          </div>
+          <div class="forget-btn pointer" @click="updatePwdClick">
+            <span>完成</span>
+          </div>
+          <div class="line"></div>
+        </a-form>
+        <span class="to-login pointer" @click="toLoginClick">{{ t('sys.exception.backLogin') }}</span>
+      </div>
+    </div>
+  </div>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+</template>
+
+<script lang="ts" setup name="app-forget-password">
+  import AppLoginHeader from './AppLoginHeader.vue';
+  import { computed, reactive, ref, toRaw, unref } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Rule } from '/@/components/Form';
+  import { getCaptcha, passwordChange, phoneVerify } from '/@/api/sys/user';
+  import { SmsEnum } from '/@/views/sys/login/useLogin';
+  import { RuleObject } from 'ant-design-vue/lib/form/interface';
+
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+  
+  const { createMessage } = useMessage();
+  const { t } = useI18n();
+  //手机号表单
+  const formState = reactive<any>({
+    phone: '',
+    smscode: '',
+    forgetPassword: '',
+    policy: true,
+  });
+  //input ref
+  const phoneRef = ref();
+  const pwdRef = ref();
+  const smscodeRef = ref();
+  const pwdUpdateRef = ref();
+  const conPwdRef = ref();
+  //修改密码值
+  const activeUpdateKey = ref<string>('vailPhone');
+  //选中值
+  const activekey = ref<string>('');
+
+  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
+  //忘记密码规则
+  const getFormRules = computed(() => {
+    return {
+      phone: unref(getMobileFormRule),
+      smscode: unref(getSmsFormRule),
+    };
+  });
+
+  const getFormPwdRules = computed(() => {
+    return {
+      forgetPassword: unref(getPasswordFormRule),
+      confirmPassword: [{ validator: validateConfirmPassword(unref(accountData).forgetPassword), trigger: 'change' }],
+    };
+  });
+
+  const { notification, createErrorModal } = useMessage();
+  const loginCode = computed(() => t('component.countdown.normalText'));
+  const loginDisabledCode = computed(() => t('component.countdown.sendText', [unref(timeRuning)]));
+
+  /**
+   * 验证二次密码
+   * @param password
+   */
+  const validateConfirmPassword = (password: string) => {
+    return async (_: RuleObject, value: string) => {
+      if (!value) {
+        return Promise.reject(t('sys.login.passwordPlaceholder'));
+      }
+      if (value !== password) {
+        return Promise.reject(t('sys.login.diffPwd'));
+      }
+      return Promise.resolve();
+    };
+  };
+
+  /**
+   * 创建规则
+   * @param message
+   */
+  function createRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+    ];
+  }
+
+  //获取手机号的样式
+  const getPhoneClass = computed(() => {
+    return formState.phone != '' ? 'current-active' : '' || unref(activekey) === 'phone' ? 'current-active' : '';
+  });
+
+  //获取手机号的样式
+  const getSmsCodeClass = computed(() => {
+    return formState.smscode != '' ? 'current-active' : '' || unref(activekey) === 'smscode' ? 'current-active' : '';
+  });
+
+  //获取密码的样式
+  const getPasswordClass = computed(() => {
+    return unref(accountData).forgetPassword != '' ? 'current-active' : '' || unref(activekey) === 'forgetPassword' ? 'current-active' : '';
+  });
+  //获取确认密码的样式
+  const getConfirmPasswordClass = computed(() => {
+    return unref(accountData).confirmPassword != '' ? 'current-active' : '' || unref(activekey) === 'confirmPassword' ? 'current-active' : '';
+  });
+
+  const emit = defineEmits(['return-login', 'login-account']);
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  //验证手机号表单
+  const phoneUpdateRef = ref();
+  //用户数据
+  const accountData = ref<any>([]);
+
+  /**
+   * 表单组件点击事件
+   */
+  function formStateInputClick(val) {
+    activekey.value = val;
+    if (val === 'phone') {
+      phoneRef.value.focus();
+    } else if (val === 'smscode') {
+      smscodeRef.value.focus();
+    } else if (val === 'confirmPassword') {
+      conPwdRef.value.focus();
+    } else {
+      pwdRef.value.focus();
+    }
+  }
+
+  /**
+   * 表单组件失去焦点
+   */
+  function formStateInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 获取验证码
+   */
+  async function getLoginCode() {
+    if (!formState.phone) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    //update-begin---author:wangshuai ---date:20230620  for：【QQYUN-5590】忘记密码不好使------------
+    //update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    const result = await getCaptcha({ mobile: formState.phone, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) =>{
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    //update-end---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    //update-end---author:wangshuai ---date:20230620  for：【QQYUN-5590】忘记密码不好使------------
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  /**
+   * 忘记密码
+   */
+  function forgetPwdClick() {
+    phoneUpdateRef.value.validateFields().then(async (values) => {
+      const resultInfo = await phoneVerify(
+        toRaw({
+          phone: values.phone,
+          smscode: values.smscode,
+        })
+      );
+      if (resultInfo.success) {
+        console.log(resultInfo);
+        let accountInfo = {
+          username: resultInfo.result.username,
+          phone: values.phone,
+          smscode: resultInfo.result.smscode,
+        };
+        accountData.value = accountInfo;
+        activeUpdateKey.value = 'vailPwd';
+      } else {
+        notification.error({
+          message: t('sys.api.errorTip'),
+          description: resultInfo.message || t('sys.api.networkExceptionMsg'),
+          duration: 3,
+        });
+      }
+    });
+  }
+
+  /**
+   * 完成
+   */
+  async function updatePwdClick() {
+    pwdUpdateRef.value.validateFields().then(async (values) => {
+      const resultInfo = await passwordChange(
+        toRaw({
+          username: values.username,
+          password: values.forgetPassword,
+          smscode: unref(accountData).smscode,
+          phone: unref(accountData).phone,
+        })
+      );
+      if (resultInfo.success) {
+        //修改密码
+        emit('login-account', { account: values.username, password: values.forgetPassword });
+        phoneUpdateRef.value.resetFields();
+        accountData.value = {};
+        activeUpdateKey.value = 'vailPhone';
+      } else {
+        //错误提示
+        createErrorModal({
+          title: t('sys.api.errorTip'),
+          content: resultInfo.message || t('sys.api.networkExceptionMsg'),
+        });
+      }
+    });
+  }
+
+  /**
+   * 返回登录
+   */
+  function toLoginClick() {
+    emit('return-login');
+  }
+</script>
+
+<style lang="less" scoped>
+  .forget-pwd-box {
+    display: block;
+  }
+
+  .forget-pwd-subject {
+    max-width: 420px;
+    padding: 48px 48px 23px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 80px auto 15px;
+    position: relative;
+  }
+
+  .flex-row {
+    display: flex;
+    min-width: 0;
+  }
+
+  .align-items-center {
+    align-items: center;
+  }
+
+  .margin-top40 {
+    margin-top: 40px;
+  }
+
+  .register-title {
+    text-align: left;
+    font-size: 20px;
+    color: #333333;
+  }
+
+  .register-content {
+    margin-top: 5px;
+  }
+
+  .content-item {
+    position: relative;
+    margin-top: 30px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+
+    .active-title {
+      color: #2196f3;
+    }
+  }
+
+  .aui-code-line {
+    background-color: #42a5f5;
+    display: inline-block;
+    width: 110px;
+    height: 32px;
+    border-radius: 4px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    text-align: center;
+    font-size: 13px;
+    color: #fff;
+  }
+
+  .register-rule {
+    margin-top: 13px;
+    font-size: 14px;
+    padding: 0;
+    line-height: 1.5;
+    color: #757575;
+  }
+
+  .forget-btn {
+    font-weight: 600;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 32px;
+    text-align: center;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .line {
+    width: 100%;
+    height: 0;
+    border-top: 1px solid #f0f0f0;
+    opacity: 1;
+    display: block;
+    margin-top: 84px;
+  }
+
+  .to-login {
+    font-size: 14px;
+    color: #2196f3;
+    display: block;
+    margin: 20px auto 0;
+    text-align: center;
+  }
+
+  .active-form-title {
+    position: absolute;
+    left: 12px;
+    top: -9px;
+    color: #757575;
+    font-size: 12px;
+    z-index: 0;
+    line-height: 1;
+    background: #fff;
+  }
+
+  .disabled-btn {
+    background-color: #ccc;
+  }
+
+  @media screen and (max-width: 414px) {
+    .login-box {
+      padding: 46px 16px;
+    }
+
+    .login-subject {
+      margin: 0;
+      padding: 48px 24px 23px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppLoginHeader.vue b/src/views/super/online/cgform/share/layouts/login/component/AppLoginHeader.vue
new file mode 100644
index 0000000..f33f983
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppLoginHeader.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="login-header">
+    <img :src="loginLogo" alt="敲敲云" class="login-image" @click="logoImgClick"/>
+    <span class="login-header-name"> </span>
+  </div>
+</template>
+
+<script lang="ts" setup name="app-login-header">
+  import loginLogo from '/@/assets/images/logo.png';
+
+  /**
+   * logo图片点击之后跳转敲敲云官网
+   */
+  function logoImgClick() {
+    window.open("https://www.qiaoqiaoyun.com/","_target")
+  }
+  
+</script>
+
+<style lang="less" scoped>
+  .login-header {
+    height: 60px;
+    display: flex;
+    vertical-align: middle;
+  }
+  .login-image {
+    height: 40px;
+    cursor: pointer;
+  }
+  .login-header-name {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 60px;
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppNameEmail.vue b/src/views/super/online/cgform/share/layouts/login/component/AppNameEmail.vue
new file mode 100644
index 0000000..113e899
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppNameEmail.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="name-email-subject">
+    <AppLoginHeader />
+<!--    <div  class="pointer" style="display: flex;margin-top: 40px" @click="backStepClick">-->
+<!--      <Icon icon="ant-design:arrow-left-outlined" style="color: #757575; margin-top: 2px" />-->
+<!--      <span style="margin-left: 10px">返回</span>-->
+<!--    </div>-->
+    <div class="flex-row align-items-center margin-top40">
+      <div class="register-title"> 请填写昵称和邮箱 </div>
+    </div>
+    <div class="name-email-desc align-items-center">
+      <span style="color: #9e9e9e">请填写昵称和邮箱，方便大家与您联系</span>
+    </div>
+    <div class="name-email-content">
+      <a-form ref="formRef" :model="formState" :rules="getFormRules">
+        <div class="content-item" :class="getUserNameClass" @click="formStateInputClick('realname')">
+          <a-form-item name="realname">
+            <a-input ref="realNameRef" v-model:value="formState.realname" style="height: 40px" @blur="formStateInputBlur" />
+            <div class="form-title" :class="activekey === 'username' ? 'active-title' : ''"> 昵称 </div>
+          </a-form-item>
+        </div>
+        <div class="content-item" :class="getEmailClass" @click="formStateInputClick('email')">
+          <a-form-item name="email">
+            <a-input ref="emailRef" v-model:value="formState.email" style="height: 40px" @blur="formStateInputBlur" />
+            <div class="form-title" :class="activekey === 'email' ? 'active-title' : ''"> {{ t('sys.login.email') }} </div>
+          </a-form-item>
+        </div>
+        <div class=" pointer" @click="finshClick">
+          <a-button type="primary" class="next-step" :loading="finshLoading">完成</a-button>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="app-name-email">
+  import AppLoginHeader from './AppLoginHeader.vue';
+  import { ref, reactive, computed, unref, toRaw } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { register } from '/@/api/sys/user';
+  import { useMessage } from "/@/hooks/web/useMessage";
+
+  const formState = reactive({
+    realname: '',
+    email: '',
+  });
+  const { t } = useI18n();
+  const realNameRef = ref();
+  const emailRef = ref();
+  //添加邮箱和真实姓名
+  const formRef = ref();
+
+  const getEmailFormRule = computed(() => [{required:true,message:'请填写邮箱',trigger: 'change'},{ type: 'email',message:'请填写正确的邮箱'}]);
+  const getUsernameFormRule = computed(() => [{required:true,message:'请填写昵称',trigger: 'change'}]);
+  const getFormRules = computed(() => {
+    return {
+      realname: unref(getUsernameFormRule),
+      email: unref(getEmailFormRule),
+    };
+  });
+  //选中值
+  const activekey = ref<string>('');
+  //获取真实姓名的样式
+  const getUserNameClass = computed(() => {
+    return formState.realname ? 'current-active' : '' || unref(activekey) === 'realname' ? 'current-active' : '';
+  });
+  //获取邮箱的样式
+  const getEmailClass = computed(() => {
+    return formState.email != '' ? 'current-active' : '' || unref(activekey) === 'email' ? 'current-active' : '';
+  });
+  const registerData = ref<any>({});
+  const emit = defineEmits(['login-account', 'bind-third-account']);
+  const { notification, createErrorModal } = useMessage();
+  const finshLoading = ref<boolean>(false);
+
+  /**
+   * 创建规则
+   * @param message
+   */
+  function createRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+    ];
+  }
+
+  /**
+   * 表单组件点击事件
+   */
+  function formStateInputClick(val) {
+    activekey.value = val;
+    if (val === 'realname') {
+      realNameRef.value.focus();
+    } else {
+      emailRef.value.focus();
+    }
+  }
+
+  /**
+   * 表单组件失去焦点
+   */
+  function formStateInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 绑定邮箱
+   */
+  async function finshClick() {
+    formRef.value.validateFields().then(async (values) => {
+      //当前是否为第三方注册绑定手机号,如果是那么就走绑定手机号的逻辑，否则直接注册
+      if (!unref(registerData).bindThirdAccount) {
+        try {
+          finshLoading.value = true;
+          const resultInfo = await register(
+            toRaw({
+              username: unref(registerData).phone,
+              email: values.email,
+              realname: values.realname,
+              password: unref(registerData).password,
+              phone: unref(registerData).phone,
+              smscode: unref(registerData).smscode,
+            })
+          );
+          if (resultInfo && resultInfo.data.success) {
+            //修改密码
+            emit('login-account', { account: unref(registerData).phone, password: unref(registerData).password });
+            notification.success({
+              message: undefined,
+              description: resultInfo.data.message || t('sys.api.registerMsg'),
+              duration: 3,
+            });
+          } else {
+            notification.warning({
+              message: t('sys.api.errorTip'),
+              description: resultInfo.data.message || t('sys.api.networkExceptionMsg'),
+              duration: 3,
+            });
+          }
+        } catch (error) {
+          notification.error({
+            message: t('sys.api.errorTip'),
+            description: error.message || t('sys.api.networkExceptionMsg'),
+            duration: 3,
+          });
+        } finally {
+          finshLoading.value = false;
+        }
+      } else {
+        emit("bind-third-account",{  
+          username: unref(registerData).phone,
+          email: values.email,
+          realname: values.realname,
+          password: unref(registerData).password,
+          phone: unref(registerData).phone,
+          smscode: unref(registerData).smscode
+        })
+      }
+    });
+  }
+
+  /**
+   * 设置注册数据
+   * @param values
+   */
+  function setRegisterData(values) {
+    registerData.value = values;
+    console.log(unref(registerData));
+  }
+  
+  defineExpose({
+    setRegisterData
+  })
+</script>
+
+<style lang="less" scoped>
+  .name-email-box {
+    display: block;
+  }
+  .name-email-subject {
+    max-width: 420px;
+    padding: 48px 48px 23px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 80px auto 15px;
+    position: relative;
+  }
+  .flex-row {
+    display: flex;
+    min-width: 0;
+  }
+  .align-items-center {
+    align-items: center;
+  }
+
+  .margin-top40 {
+    margin-top: 40px;
+  }
+
+  .register-title {
+    text-align: left;
+    font-size: 20px;
+    color: #333333;
+  }
+  .name-email-desc {
+    margin-top: 10px;
+    font-size: 15px;
+  }
+  .name-email-content {
+    margin-top: 5px;
+  }
+  .content-item {
+    position: relative;
+    margin-top: 30px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+    .active-title {
+      color: #2196f3;
+    }
+  }
+  .next-step {
+    font-weight: 600;
+    width: 100%;
+    height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 32px;
+    text-align: center;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .line {
+    width: 100%;
+    height: 0;
+    border-top: 1px solid #f0f0f0;
+    opacity: 1;
+    display: block;
+    margin-top: 48px;
+  }
+  .to-login {
+    font-size: 14px;
+    color: #2196f3;
+    display: block;
+    margin: 20px auto 0;
+    text-align: center;
+  }
+  @media screen and (max-width: 414px) {
+    .name-email-box {
+      padding: 46px 16px;
+    }
+    .name-email-subject {
+      margin: 0;
+      padding: 48px 24px 23px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppRegister.vue b/src/views/super/online/cgform/share/layouts/login/component/AppRegister.vue
new file mode 100644
index 0000000..642a592
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppRegister.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="register-box" v-show="showType==='register'">
+    <div class="register-subject">
+      <AppLoginHeader />
+      <div class="flex-row align-items-center margin-top40">
+        <div class="register-title">
+          {{ t('sys.login.signUpFormTitle') }}
+        </div>
+      </div>
+      <div class="register-content">
+        <a-form ref="registerRef" :model="formData" :rules="getFormRules">
+          <div class="content-item" :class="getPhoneClass" @click="formDataInputClick('mobile')">
+            <a-form-item name="mobile">
+              <a-input ref="phoneRef" v-model:value="formData.mobile" style="height: 40px" @blur="formDataInputBlur" />
+              <div class="form-title" :class="activekey === 'mobile' ? 'active-title' : ''">
+                {{ t('sys.login.mobile') }}
+              </div>
+            </a-form-item>
+          </div>
+          <div class="content-item" :class="getSmsCodeClass">
+            <a-form-item name="sms" @click="formDataInputClick('sms')">
+              <a-input ref="smscodeRef" :maxLength="6" v-model:value="formData.sms" style="height: 40px" @blur="formDataInputBlur" />
+              <div class="form-title" :class="activekey === 'sms' ? 'active-title' : ''">
+                {{ t('sys.login.smsCode') }}
+              </div>
+            </a-form-item>
+            <a-input
+              type="button"
+              v-if="showInterval"
+              class="aui-code-line pointer"
+              :bordered="false"
+              @click="getLoginCode"
+              v-model:value="loginCode"
+            />
+            <a-input type="button" v-else class="aui-code-line disabled-btn" :bordered="false" v-model:value="loginDisabledCode" />
+          </div>
+          <div class="content-item" :class="getPasswordClass" @click="formDataInputClick('regPassword')">
+            <a-form-item name="regPassword">
+              <a-input ref="pwdRef" type="password" v-model:value="formData.regPassword" style="height: 40px" @blur="formDataInputBlur" autocomplete="new-password"/>
+              <div class="form-title" :class="activekey === 'regPassword' ? 'active-title' : ''">
+                8-20位，需包含字母和数字
+              </div>
+            </a-form-item>
+          </div>
+          <p class="register-rule">
+            <a-form-item name="policy">
+              <a-checkbox v-model:checked="formData.policy">{{ t('sys.login.policy') }}</a-checkbox>
+            </a-form-item>
+          </p>
+          <div>
+            <a-button type="primary" :loading="registerLoading" class="registr-btn pointer" @click="registerClick">{{ t('sys.login.nextStep') }}</a-button>
+          </div>
+          <div class="line" v-if="!props.bindThirdAccount"></div>
+          <span v-if="!props.bindThirdAccount" class="to-login pointer" @click="toLoginClick">{{ t('sys.exception.backLogin') }}</span>
+        </a-form>
+      </div>
+    </div>
+  </div>
+  <div v-show="showType === 'email'">
+    <AppNameEmail ref="emailRef" @login-account="loginAccount" @bind-third-account="bindThirdAccount"/>
+  </div>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+</template>
+
+<script lang="ts" setup name="app-register">
+  import AppLoginHeader from './AppLoginHeader.vue';
+  import { computed, reactive, ref, toRaw, unref } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Rule } from '/@/components/Form';
+  import {getCaptcha, phoneVerify} from '/@/api/sys/user';
+  import { SmsEnum, useFormRules, useFormValid } from '/@/views/sys/login/useLogin';
+  import AppNameEmail  from './AppNameEmail.vue';
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+
+  const { createMessage } = useMessage();
+  const { t } = useI18n();
+  //手机号表单
+  const formData = reactive<any>({
+    mobile: '',
+    sms: '',
+    regPassword: '',
+    policy: true,
+  });
+  //input ref
+  const phoneRef = ref();
+  const pwdRef = ref();
+  const smscodeRef = ref();
+  const usernameRef = ref();
+  //加载按钮
+  const registerLoading = ref<boolean>(false);
+  //选中值
+  const activekey = ref<string>('');
+
+  //获取手机号的样式
+  const getPhoneClass = computed(() => {
+    return formData.mobile != '' ? 'current-active' : '' || unref(activekey) === 'mobile' ? 'current-active' : '';
+  });
+
+  //获取用户名的样式
+  const getUsernameClass = computed(() => {
+    return formData.username != '' ? 'current-active' : '' || unref(activekey) === 'username' ? 'current-active' : '';
+  });
+
+  //获取手机号的样式
+  const getSmsCodeClass = computed(() => {
+    return formData.sms != '' ? 'current-active' : '' || unref(activekey) === 'sms' ? 'current-active' : '';
+  });
+
+  //获取密码的样式
+  const getPasswordClass = computed(() => {
+    return formData.regPassword != '' ? 'current-active' : '' || unref(activekey) === 'regPassword' ? 'current-active' : '';
+  });
+  const emit = defineEmits(['return-login', 'login-account', 'bind-third-account']);
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  //注册表单
+  const registerRef = ref();
+  const getMobileFormRule = computed(() => createPhoneRule(t('sys.login.mobilePlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  const getPasswordFormRule = computed(() => [{ required: true, validator:checkPassword},{ pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/,message:'8-20位，需包含字母和数字'}]);
+  //登录规则
+  const getFormRules = computed(() => {
+    return {
+      mobile: unref(getMobileFormRule),
+      sms: unref(getSmsFormRule),
+      regPassword: unref(getPasswordFormRule),
+    };
+  });
+  const { notification, createErrorModal } = useMessage();
+  const loginCode = computed(() => t('component.countdown.normalText'));
+  const loginDisabledCode = computed(() => t('component.countdown.sendText', [unref(timeRuning)]));
+  const showType = ref<string>('register')
+  const emailRef = ref();
+  const props = defineProps({ 
+      bindThirdAccount: { type: Boolean,default: false },
+    });
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+  
+  /**
+   * 创建规则
+   * @param message
+   */
+  function createRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+    ];
+  }  
+  
+  /**
+   * 创建手机号规则
+   * @param message
+   */
+  function createPhoneRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+      {
+        pattern: /^1[3456789]\d{9}$/,
+        message: t('sys.login.mobileCorrectPlaceholder')
+      },
+    ];
+  }
+  
+  /**
+   * 表单组件点击事件
+   */
+  function formDataInputClick(val) {
+    activekey.value = val;
+    if (val === 'mobile') {
+      phoneRef.value.focus();
+    } else if (val === 'sms') {
+      smscodeRef.value.focus();
+    } else if (val === 'username') {
+      usernameRef.value.focus();
+    } else {
+      pwdRef.value.focus();
+    }
+  }
+
+  /**
+   * 表单组件失去焦点
+   */
+  function formDataInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 获取验证码
+   */
+  async function getLoginCode() {
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    //update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.REGISTER }).catch((res) =>{
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    //update-end---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  /**
+   * 验证新密码是否为空
+   */
+  function checkPassword(_rule: Rule, value: string) {
+    if (value === '') {
+      return Promise.reject(t('sys.login.passwordPlaceholder'));
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * 返回登录
+   */
+  function toLoginClick() {
+    emit('return-login');
+  }
+
+  /**
+   * 注册
+   */
+  async function registerClick() {
+    registerRef.value.validateFields().then(async (values) => {
+      registerLoading.value = true;
+      await phoneVerify({phone:values.mobile,smscode:values.sms}).then((res) =>{
+        if(res.success){
+          if(res.result && res.result.username){
+            notification.warning({
+              message: t('sys.api.errorTip'),
+              description: '手机号已注册' || t('sys.api.networkExceptionMsg'),
+              duration: 3,
+            });
+          }
+        }else{
+          if(res.message === '用户信息不存在'){
+            let params = { password: values.regPassword,phone: values.mobile,smscode: values.sms, bindThirdAccount: false, thirdUserUuid: '', thirdType: '' }
+            showType.value = 'email';
+            setTimeout(()=>{
+              params.bindThirdAccount = props.bindThirdAccount
+              emailRef.value.setRegisterData(params);
+            },300)
+          }else{
+            notification.warning({
+              message: t('sys.api.errorTip'),
+              description: res.message || t('sys.api.networkExceptionMsg'),
+              duration: 3,
+            });
+          }
+        }
+      }).finally(()=>{
+        registerLoading.value = false;
+      })
+    });
+  }
+
+  /**
+   * 清除表单验证
+   */
+  function clearValidate() {
+    showType.value = 'register';
+    Object.assign(formData, { mobile: '', sms: '', regPassword: '', policy: true});
+    registerRef.value.clearValidate();
+  }
+
+  /**
+   * 注册成功返回结果
+   * @param values
+   */
+  function loginAccount(values){
+    emit('login-account', values);
+  }
+  
+  /**
+   * 绑定第三方账号
+   */
+  function bindThirdAccount(values) {
+    emit('bind-third-account',values)
+  }
+
+  defineExpose({
+    clearValidate,
+  });
+</script>
+
+<style lang="less" scoped>
+  .register-box {
+    display: block;
+  }
+  .register-subject {
+    max-width: 420px;
+    padding: 48px 48px 23px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 80px auto 15px;
+    min-height: 578px;
+    position: relative;
+  }
+  .flex-row {
+    display: flex;
+    min-width: 0;
+  }
+  .align-items-center {
+    align-items: center;
+  }
+
+  .margin-top40 {
+    margin-top: 40px;
+  }
+  .register-title {
+    text-align: left;
+    font-size: 20px;
+    color: #333333;
+  }
+  .register-content {
+    margin-top: 5px;
+  }
+  .content-item {
+    position: relative;
+    margin-top: 30px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+    .active-title {
+      color: #2196f3;
+    }
+  }
+  .aui-code-line {
+    background-color: #42a5f5;
+    display: inline-block;
+    width: 110px;
+    height: 32px;
+    border-radius: 4px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    text-align: center;
+    font-size: 13px;
+    color: #fff;
+  }
+  .register-rule {
+    margin-top: 13px;
+    font-size: 14px;
+    padding: 0;
+    line-height: 1.5;
+    color: #757575;
+  }
+  .registr-btn {
+    font-weight: 600;
+    width: 100%;
+    height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 32px;
+    text-align: center;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .line {
+    width: 100%;
+    height: 0;
+    border-top: 1px solid #f0f0f0;
+    opacity: 1;
+    display: block;
+    margin-top: 48px;
+  }
+  .to-login {
+    font-size: 14px;
+    color: #2196f3;
+    display: block;
+    margin: 20px auto 0;
+    text-align: center;
+  }
+
+  .disabled-btn {
+    background-color: #ccc;
+  }
+
+  @media screen and (max-width: 414px) {
+    .register-box {
+      padding: 46px 16px;
+    }
+    .register-subject {
+      margin: 0;
+      padding: 48px 24px 23px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppTenant.vue b/src/views/super/online/cgform/share/layouts/login/component/AppTenant.vue
new file mode 100644
index 0000000..5f49c41
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppTenant.vue
@@ -0,0 +1,462 @@
+<template>
+  <div class="organ-box">
+    <div class="organ-subject" :class="tenantType !== '' ? 'subject-margin' : ''">
+      <AppLoginHeader :showLocalePicker="false" />
+      <template v-if="organType === 'home'">
+        <div class="flex-row align-items-center" style="margin-top: 20px">
+          <div class="organ-title"> 创建或者加入组织 </div>
+        </div>
+        <div class="organ-desc align-items-center">
+          <div class="content-box pointer" @click="joinOrganClick">
+            <div class="organ-title-desc"> 加入<span style="color: rgb(141, 198, 216)">已有</span>组织 </div>
+            <div> 如果被告知要使用，或有同事已经在用，请选择此项。 </div>
+          </div>
+          <div class="content-box pointer" style="margin-top: 35px" @click="createOrganClick">
+            <div class="organ-title-desc"> 创建<span style="color: rgb(74, 79, 175)">新的</span>组织 </div>
+            <div> 如果想为企业或者组织创建账号，请选择此项。 </div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="organType === 'join'">
+        <div class="margin-top40 pointer" style="display: flex" @click="returnHome" v-if="tenantType === ''">
+          <Icon icon="ant-design:arrow-left-outlined" style="color: #757575; margin-top: 2px" />
+          <span style="margin-left: 10px">返回</span>
+        </div>
+        <div class="align-items-center" style="margin-top: 20px">
+          <div class="organ-title"> 请填写组织门牌号 </div>
+          <div class="organ-join-desc">
+            <span style="color: #9e9e9e">组织门牌号可以通过管理员获取</span>
+          </div>
+          <a-form ref="joinRef" :model="formJoinState" :rules="getFormJoinRules">
+            <div class="content-item" :class="getHouseNumberClass" @click="formStateInputClick('houseNumber')">
+              <a-form-item name="houseNumber">
+                <a-input ref="hoseNumberRef" v-model:value="formJoinState.houseNumber" style="height: 40px" @blur="formStateInputBlur" />
+                <div class="form-title" :class="activekey === 'houseNumber' ? 'active-title' : ''"> 示例: J9A2K8R </div>
+              </a-form-item>
+            </div>
+            <div class="tenant-number">
+              <a href="http://help.qiaoqiaoyun.com/org/new.html" target="_blank">没有组织门牌号？</a>
+            </div>
+            <div class="create-btn pointer" @click="joinTenantClick"> 加入 </div>
+          </a-form>
+        </div>
+      </template>
+      <template v-else-if="organType === 'create'">
+        <div class="margin-top40 pointer" style="display: flex" @click="returnHome" v-if="tenantType === ''">
+          <Icon icon="ant-design:arrow-left-outlined" style="color: #757575; margin-top: 2px" />
+          <span style="margin-left: 10px">返回</span>
+        </div>
+        <div class="align-items-center" style="margin-top: 20px">
+          <div class="organ-title"> 创建组织 </div>
+          <div class="organ-join-desc">
+            <span style="color: #9e9e9e">您当前账号默认成为组织的管理员</span>
+          </div>
+
+          <a-form ref="createRef" :model="formCreateState" :rules="getFormCreateRules">
+            <div class="content-item" :class="getNameClass" @click="formStateInputClick('name')">
+              <a-form-item name="name">
+                <a-input
+                  ref="nameRef"
+                  v-model:value="formCreateState.name"
+                  style="height: 40px; font-size: 13px; color: rgba(0, 0, 0, 0.65)"
+                  @blur="formStateInputBlur"
+                />
+                <div class="form-title" :class="activekey === 'name' ? 'active-title' : ''"> 组织名称 </div>
+              </a-form-item>
+            </div>
+            <div class="content-item">
+              <a-form-item name="trade">
+                <a-select placeholder="请选择" style="height: 40px" :options="tradeOption" v-model:value="formCreateState.trade" />
+                <div class="active-form-title"> 行业 </div>
+              </a-form-item>
+            </div>
+            <div class="content-item">
+              <a-form-item name="companySize">
+                <a-select placeholder="请选择" style="height: 40px" :options="companySizeOption" v-model:value="formCreateState.companySize" />
+                <div class="active-form-title"> 规模 </div>
+              </a-form-item>
+            </div>
+            <div class="content-item">
+              <a-form-item name="position">
+                <a-select placeholder="请选择" style="height: 40px" :options="positionOption" v-model:value="formCreateState.position" />
+                <div class="active-form-title"> 您的职级 </div>
+              </a-form-item>
+            </div>
+            <div class="content-item">
+              <a-form-item name="department">
+                <a-select placeholder="请选择" style="height: 40px" :options="departmentOption" v-model:value="formCreateState.department" />
+                <div class="active-form-title"> 您的部门 </div>
+              </a-form-item>
+            </div>
+            <div class="create-btn pointer" @click="addOrganClick"> 创建 </div>
+          </a-form>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="app-organization">
+  import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
+  import AppLoginHeader from './AppLoginHeader.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { saveTenantJoinUser, joinTenantByHouseNumber } from '../AppLogin.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { router } from '/@/router';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const props = defineProps({
+    tenantType: { type: String, default: '' },
+  });
+
+  const { createMessage } = useMessage();
+  //创建租户表单
+  const createRef = ref();
+  //加入租户表单
+  const joinRef = ref();
+  //租户类别：主页，加入，创建
+  const organType = ref<string>('home');
+  //租户加入
+  const formJoinState = reactive<any>({
+    houseNumber: '',
+  });
+  //租户创建
+  const formCreateState = reactive<any>({
+    name: '',
+    trade: undefined,
+    companySize: undefined,
+    position: undefined,
+    department: undefined,
+  });
+  //选中值
+  const activekey = ref<string>('');
+  //获取门牌号样式
+  const getHouseNumberClass = computed(() => {
+    return formJoinState.houseNumber != '' ? 'current-active' : '' || unref(activekey) === 'houseNumber' ? 'current-active' : '';
+  });
+  //获取租户名称样式
+  const getNameClass = computed(() => {
+    return formCreateState.name != '' ? 'current-active' : '' || unref(activekey) === 'name' ? 'current-active' : '';
+  });
+  const hoseNumberRef = ref();
+  const nameRef = ref();
+  //加入租户的表单验证
+  const getFormJoinRules = {
+    houseNumber: [{ required: true, message: '请输入组织门牌号' }],
+  };
+  const { t } = useI18n();
+  const getNameRule = computed(() => createRule('请输入组织名称'));
+  //创建租户的表单验证
+  const getFormCreateRules = computed(() => {
+    return {
+      name: unref(getNameRule),
+    };
+  });
+  //所属行业
+  const tradeOption = ref<any>([
+    { label: '信息传输、软件和信息技术服务业', value: '1' },
+    { label: '制造业', value: '2' },
+    { label: '租赁和商务服务业', value: '3' },
+    { label: '教育', value: '4' },
+    { label: '金融业', value: '5' },
+    { label: '建筑业', value: '6' },
+    { label: '科学研究和技术服务业', value: '7' },
+    { label: '批发和零售业', value: '8' },
+    { label: '住宿和餐饮业', value: '9' },
+    { label: '电子商务', value: '10' },
+    { label: '线下零售与服务业', value: '11' },
+    { label: '文化、体育和娱乐业', value: '12' },
+    { label: '房地产业', value: '13' },
+    { label: '交通运输、仓储和邮政业', value: '14' },
+    { label: '卫生和社会工作', value: '15' },
+    { label: '公共管理、社会保障和社会组织', value: '16' },
+    { label: '电力、热力、燃气及水生产和供应业', value: '17' },
+    { label: '水利、环境和公共设施管理业', value: '18' },
+    { label: '居民服务、修理和其他服务业', value: '19' },
+    { label: '政府机构', value: '20' },
+    { label: '农、林、牧、渔业', value: '21' },
+    { label: '采矿业', value: '22' },
+    { label: '国际组织', value: '23' },
+    { label: '其他', value: '24' },
+  ]);
+  //公司规模
+  const companySizeOption = ref<any>([
+    { label: '20人以下', value: '1' },
+    { label: '21-99人', value: '2' },
+    { label: '100-499人', value: '3' },
+    { label: '500-999人', value: '4' },
+    { label: '1000-9999人', value: '5' },
+    { label: '10000人以上', value: '6' },
+  ]);
+  //职位
+  const positionOption = ref<any>([
+    { label: '总裁/总经理/CEO', value: '1' },
+    { label: '副总裁/副总经理/VP', value: '2' },
+    { label: '总监/主管/经理', value: '3' },
+    { label: '员工/专员/执行', value: '4' },
+    { label: '其他', value: '5' },
+  ]);
+  //职位
+  const departmentOption = ref<any>([
+    { label: '总经办', value: '1' },
+    { label: '技术/IT/研发', value: '2' },
+    { label: '产品/设计', value: '3' },
+    { label: '销售/市场/运营', value: '4' },
+    { label: '人事/财务/行政', value: '5' },
+    { label: '资源/仓储/采购', value: '6' },
+    { label: '其他', value: '7' },
+  ]);
+  const emit = defineEmits(['success']);
+  const userStore = useUserStore();
+
+  /**
+   * 创建规则
+   * @param message
+   */
+  function createRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+    ];
+  }
+
+  /**
+   * 加入租户
+   */
+  function joinOrganClick() {
+    organType.value = 'join';
+  }
+
+  /**
+   * 创建租户
+   */
+  function createOrganClick() {
+    organType.value = 'create';
+  }
+
+  /**
+   * 表单组件点击事件
+   */
+  function formStateInputClick(val) {
+    activekey.value = val;
+    if (val === 'houseNumber') {
+      hoseNumberRef.value.focus();
+    } else {
+      nameRef.value.focus();
+    }
+  }
+
+  /**
+   * 清除选中值
+   */
+  function formStateInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 创建租户
+   */
+  async function addOrganClick() {
+    createRef.value.validateFields().then(async (values) => {
+      values.status = '1';
+      await saveTenantJoinUser(values).then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          userStore.setTenant(res.result);
+          router.replace((userStore.getUserInfo && userStore.getUserInfo.homePath) || PageEnum.BASE_HOME);
+          emit('success');
+        } else {
+          createMessage.warning(res.message);
+        }
+      });
+    });
+  }
+
+  /**
+   * 加入租户
+   */
+  function joinTenantClick() {
+    joinRef.value.validateFields().then(async (values) => {
+      await joinTenantByHouseNumber(values).then((res) => {
+        if (res.success) {
+          createMessage.success(res.message);
+          //userStore.setTenant(res.result);
+          if (!props.tenantType) {
+            router.replace((userStore.getUserInfo && userStore.getUserInfo.homePath) || PageEnum.BASE_HOME);
+          }
+          emit('success');
+        } else {
+          createMessage.warning(res.message);
+        }
+      }).catch((e)=>{
+        createMessage.warning(e.message);
+      });
+    });
+  }
+
+  /**
+   * 返回选择页面
+   */
+  function returnHome() {
+    organType.value = 'home';
+  }
+
+  watch(
+    () => props.tenantType,
+    (val) => {
+      if (val) {
+        organType.value = val;
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .organ-box {
+    display: block;
+  }
+  .organ-subject {
+    max-width: 420px;
+    padding: 48px 48px 23px;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 80px auto 15px;
+    min-height: 578px;
+    position: relative;
+  }
+  .flex-row {
+    display: flex;
+    min-width: 0;
+  }
+  .align-items-center {
+    align-items: center;
+  }
+
+  .margin-top40 {
+    margin-top: 40px;
+  }
+
+  .organ-title {
+    text-align: left;
+    font-size: 20px;
+    color: #333333;
+  }
+  .organ-desc {
+    margin-top: 20px;
+  }
+  .content-box {
+    width: 100%;
+    height: 150px;
+    background: #ffffff;
+    box-shadow: rgba(0, 0, 0, 0.24) 0 0 3px;
+    padding: 40px 20px;
+    border-radius: 6px;
+  }
+  .organ-title-desc {
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .organ-join-desc {
+    margin-top: 10px;
+    align-items: center;
+    font-size: 15px;
+  }
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+  .content-item {
+    position: relative;
+    margin-top: 30px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+    .active-title {
+      color: #2196f3;
+    }
+  }
+  .active-form-title {
+    position: absolute;
+    left: 12px;
+    top: -9px;
+    color: #757575;
+    font-size: 12px;
+    z-index: 0;
+    line-height: 1;
+    background: #fff;
+  }
+  .content-item :deep(.ant-select-selector) {
+    height: 40px;
+  }
+  .content-item :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder) {
+    line-height: 40px !important;
+  }
+  .content-item :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
+    line-height: 40px !important;
+  }
+  .create-btn {
+    font-weight: 600;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 32px;
+    text-align: center;
+  }
+
+  :deep(.ant-input-number-input) {
+    font-size: 14px;
+  }
+
+  .subject-margin {
+    margin: 15px auto 15px !important;
+  }
+
+  .tenant-number {
+    align-items: center;
+    color: #1e88e5;
+    margin-top: 16px;
+    vertical-align: middle;
+  }
+
+  @media screen and (max-width: 414px) {
+    .organ-box {
+      padding: 46px 16px;
+    }
+    .organ-subject {
+      margin: 0;
+      padding: 48px 24px 48px;
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/AppThirdForm.vue b/src/views/super/online/cgform/share/layouts/login/component/AppThirdForm.vue
new file mode 100644
index 0000000..1ab047e
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/AppThirdForm.vue
@@ -0,0 +1,75 @@
+<template>
+  <!-- 绑定账号或者注册 -->
+  <div class="third-account" v-show="bindingAccount">
+    <div class="content">
+      <div class="bind-title">
+        <span>还未绑定敲敲云账号</span>
+      </div>
+      <div class="bind-title-desc">
+        <span>请选择绑定已有帐户，或创建新帐号</span>
+      </div>
+      <div class="enter-x bind-btn">
+        <a-button type="primary" @click="loginAccountClick">登录并绑定</a-button>
+      </div>
+      <div class="enter-x bind-btn" style="margin-top: 20px">
+        <a-button type="primary" @click="registerAccountClick">注册新账号</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" name="app-third-form">
+  import { defineComponent } from 'vue';
+  import { Form, Input } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { useThirdLogin } from '../AppThirdLogin';
+  import { QuestionCircleFilled } from '@ant-design/icons-vue';
+
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+
+  export default defineComponent({
+    name: 'AppThirdForm',
+    components: { FormItem, Form, InputPassword, CountdownInput, QuestionCircleFilled },
+    setup(_p, { emit }) {
+      return {
+        ...useThirdLogin(emit),
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .third-account {
+    width: 100%;
+    .content {
+      width: 350px;
+      text-align: center;
+      margin: 60px auto 0;
+      padding: 30px;
+      background: #ffffff;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
+      border-radius: 3px;
+    }
+    .bind-title {
+      font-size: 18px;
+      color: #333333;
+      margin-bottom: 15px;
+    }
+    .bind-title-desc {
+      font-size: 13px;
+      color: #aaa;
+      margin-bottom: 30px;
+    }
+    .bind-btn {
+      button {
+        color: white;
+        height: 44px;
+        text-align: center;
+        border-radius: 4px;
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        font-size: 14px;
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/component/PhoneLoginForm.vue b/src/views/super/online/cgform/share/layouts/login/component/PhoneLoginForm.vue
new file mode 100644
index 0000000..1bf6c6a
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/component/PhoneLoginForm.vue
@@ -0,0 +1,285 @@
+<template>
+  <a-form ref="loginPhoneRef" :model="formData" :rules="getFormRules" @keyup.enter.native="phoneLoginClick">
+    <div class="content-item" :class="geMobileClass" @click="formDataInputClick('mobile')">
+      <a-form-item name="mobile">
+        <a-input ref="mobileRef" v-model:value="formData.mobile" style="height: 40px" @blur="formDataInputBlur" />
+        <div class="form-title" :class="activekey === 'mobile' ? 'active-title' : ''">
+          {{ t('sys.login.mobile') }}
+        </div>
+      </a-form-item>
+    </div>
+    <div class="content-item" :class="getSmsCodeClass">
+      <a-form-item name="sms" @click="formDataInputClick('sms')">
+        <a-input ref="smsCodeRef" :maxLength="6" v-model:value="formData.sms" style="height: 40px" @blur="formDataInputBlur" />
+        <div class="form-title" :class="activekey === 'sms' ? 'active-title' : ''">
+          {{ t('sys.login.smsCode') }}
+        </div>
+      </a-form-item>
+      <a-input type="button" v-if="showInterval" class="aui-code-line pointer" :bordered="false" @click="getLoginCode" v-model:value="loginCode" />
+      <a-input type="button" v-else class="aui-code-line disabled-btn" :bordered="false" v-model:value="loginDisabledCode" />
+    </div>
+    <div>
+      <a-button type="primary" @click="phoneLoginClick" :loading="loginLoading" class="login-btn">{{ t('sys.login.loginButton') }}</a-button>
+    </div>
+    <div v-if="!props.bindThirdAccount" class="phone-login-btn pointer" @click="accountHandleLogin">{{ t('sys.login.backSignIn') }}</div>
+  </a-form>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+</template>
+
+<script lang="ts" setup name="phone-login-form">
+  //获取手机号的样式
+  import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { SmsEnum, useFormRules, useFormValid } from '/@/views/sys/login/useLogin';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+
+  const { createMessage } = useMessage();
+
+  const { t } = useI18n();
+  //选中值
+  const activekey = ref<string>('');
+  //登录加载
+  const loginLoading = ref<boolean>(false);
+  //登录表单
+  const loginPhoneRef = ref();
+  const randCodeData = reactive({
+    randCodeImage: '',
+    requestCodeSuccess: false,
+    checkKey: -1,
+  });
+  //手机号表单
+  const formData = reactive({
+    mobile: '',
+    sms: '',
+  });
+  const userStore = useUserStore();
+  const emit = defineEmits(['login', 'login-success','bind-third-phone']);
+  //记住我
+  const rememberMeCheck = ref<boolean>(false);
+  //获取手机号的样式
+  const geMobileClass = computed(() => {
+    return formData.mobile != '' ? 'current-active' : '' || unref(activekey) === 'mobile' ? 'current-active' : '';
+  });
+  //获取手机验证码的样式
+  const getSmsCodeClass = computed(() => {
+    return formData.sms != '' ? 'current-active' : '' || unref(activekey) === 'sms' ? 'current-active' : '';
+  });
+  const { notification, createErrorModal } = useMessage();
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  const smsCodeRef = ref();
+  const mobileRef = ref();
+  const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  //登录规则
+  const getFormRules = computed(() => {
+    return {
+      mobile: unref(getAccountFormRule),
+      sms: unref(getSmsFormRule),
+    };
+  });
+  const loginCode = computed(() => t('component.countdown.normalText'));
+  const loginDisabledCode = computed(() => t('component.countdown.sendText', [unref(timeRuning)]));
+  const props = defineProps({ bindThirdAccount: { type: Boolean, default: false } });
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+
+  /**
+   * 创建规则
+   * @param message
+   */
+  function createRule(message: string) {
+    return [
+      {
+        required: true,
+        message,
+        trigger: 'change',
+      },
+    ];
+  }
+
+  /**
+   * 表单组件点击事件
+   */
+  function formDataInputClick(val) {
+    activekey.value = val;
+    if (val === 'sms') {
+      smsCodeRef.value.focus();
+    } else {
+      mobileRef.value.focus();
+    }
+  }
+
+  /**
+   * 表单组件失去焦点
+   */
+  function formDataInputBlur() {
+    activekey.value = '';
+  }
+
+  /**
+   * 登录点击事件
+   */
+  async function phoneLoginClick() {
+    loginPhoneRef.value.validateFields().then(async (values) => {
+      //当前是否为第三方绑定手机号,如果是那么就走绑定手机号的逻辑，否则直接登录
+      if(!props.bindThirdAccount){
+        try {
+          loginLoading.value = true;
+          const { userInfo } = await userStore.phoneLogin(
+            toRaw({
+              mobile: values.mobile,
+              captcha: values.sms,
+              mode: 'none', //不要默认的错误提示
+              goHome: false,
+            })
+          );
+          if (userInfo) {
+            emit('login-success', userInfo.realname);
+          }
+        } catch (error) {
+          notification.error({
+            message: t('sys.api.errorTip'),
+            description: error.message || t('sys.api.networkExceptionMsg'),
+            duration: 3,
+          });
+        } finally {
+          loginLoading.value = false;
+        }
+      }else{
+        emit('bind-third-phone',values)
+      }
+    });
+  }
+
+  /**
+   * 获取验证码
+   */
+  async function getLoginCode() {
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    //update-begin---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    //update-begin---author:wangshuai---date:2025-07-15---for:【issues/8567】严重：修改密码存在水平越权问题：登录应该用登录模板不应该用忘记密码的模板---
+    const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.LOGIN }).catch((res) =>{
+    //update-end---author:wangshuai---date:2025-07-15---for:【issues/8567】严重：修改密码存在水平越权问题：登录应该用登录模板不应该用忘记密码的模板---
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    //update-end---author:wangshuai---date:2024-04-18---for:【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  /**
+   * 手机号登录
+   */
+  function accountHandleLogin() {
+    emit('login', 'accountLogin');
+  }
+</script>
+
+<style lang="less" scoped>
+  .content-item {
+    position: relative;
+    margin-top: 30px;
+    background: #ffffff;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  .form-title {
+    position: absolute;
+    left: 12px;
+    top: 13px;
+    color: #9e9e9e;
+    font-size: 14px;
+    z-index: 0;
+    line-height: 1;
+    transition: all 0.3s;
+  }
+  .current-active {
+    .form-title {
+      font-size: 12px;
+      color: #757575;
+      top: -9px;
+      z-index: 1;
+      background: #fff;
+      padding: 0 4px;
+    }
+    .active-title {
+      color: #2196f3;
+    }
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .login-btn {
+    width: 100%;
+    height: 40px;
+    display: block;
+    background: #2296f3;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 40px;
+    text-align: center;
+  }
+  .phone-login-btn {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    display: block;
+    background: #ffffff;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #333333;
+    margin-top: 20px;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .aui-code-line {
+    background-color: #42a5f5;
+    display: inline-block;
+    width: 110px;
+    height: 32px;
+    border-radius: 4px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    text-align: center;
+    font-size: 13px;
+    color: #fff;
+  }
+
+  .disabled-btn {
+    background-color: #ccc;
+  }
+</style>
diff --git a/src/views/super/online/cgform/share/layouts/login/index.vue b/src/views/super/online/cgform/share/layouts/login/index.vue
new file mode 100644
index 0000000..2ad97ba
--- /dev/null
+++ b/src/views/super/online/cgform/share/layouts/login/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>这里是你的登录页面</div>
+</template>
+
+<script setup lang="ts">
+
+import {useUserStore} from "@/store/modules/user";
+
+const userStore = useUserStore();
+
+// 获取路由的 r
+
+if (userStore.getToken) {
+
+}
+
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/super/online/cgform/share/route/index.ts b/src/views/super/online/cgform/share/route/index.ts
new file mode 100644
index 0000000..705fcb6
--- /dev/null
+++ b/src/views/super/online/cgform/share/route/index.ts
@@ -0,0 +1,99 @@
+import type {RouteRecordRaw} from 'vue-router';
+import {PageEnum} from "@/enums/pageEnum";
+
+// 外部链接路由名称（新增）
+export const SHARE_ADD_ROUTER_NAME = 'online-cgform-@formId-share-add'
+
+// 外部链接路由名称（编辑）
+export const SHARE_UPDATE_ROUTER_NAME = 'online-cgform-@formId-share-u-@dataId'
+
+// 外部链接路由名称（详情）
+export const SHARE_DETAIL_ROUTER_NAME = 'online-cgform-@formId-share-d-@dataId'
+
+export const SHARE_ROUTE: RouteRecordRaw = {
+  path: "/online/cgform/share",
+  name: "online-cgform-share",
+  component: () => import("../layouts/default/index.vue"),
+  meta: {
+    title: 'Online表单外部页面',
+    ignoreAuth: true,
+  },
+  children: [
+    {
+      path: ':id/add',
+      name: SHARE_ADD_ROUTER_NAME,
+      component: () => import("../components/add/ShareAddView.vue"),
+      meta: {
+        title: 'Online表单外部新增页面',
+      },
+    },
+    {
+      path: ':id/u/:dataId',
+      name: SHARE_UPDATE_ROUTER_NAME,
+      component: () => import("../components/edit/ShareEditView.vue"),
+      meta: {
+        title: 'Online表单外部编辑页面',
+      },
+    },
+    {
+      path: ':id/d/:dataId',
+      name: SHARE_DETAIL_ROUTER_NAME,
+      component: () => import("../components/edit/ShareEditView.vue"),
+      meta: {
+        title: 'Online表单外部详情页面',
+      },
+    },
+  ]
+}
+
+
+// 外部链接路由名称（详情）
+export const SHARE_LOGIN__ROUTER_NAME = 'online-cgform-share-login'
+
+export const SHARE_LOGIN_ROUTE: RouteRecordRaw = {
+  path: "/online/cgform/share/login",
+  name: SHARE_LOGIN__ROUTER_NAME,
+  // component: () => import("../layouts/login/index.vue"),
+  component: () => import("../layouts/login/AppLogin.vue"),
+  meta: {
+    title: '登录 · Online表单',
+    ignoreAuth: true,
+  },
+}
+
+//
+// Online表单外部链接页面
+const ONLINE_CGFORM_SHARE = '/online/cgform/share';
+
+export async function routerBeforeEach(to: any, _from: any, next: any) {
+  // 如果是登录路由
+  if (to.path === PageEnum.BASE_LOGIN) {
+    // 获取 redirect
+    let redirect = ((redirect: string) => {
+      if (!redirect) {
+        return '';
+      }
+      // 判断 redirect 是否是 online表单 外部页面
+      if (redirect.startsWith(ONLINE_CGFORM_SHARE)) {
+        return redirect;
+      }
+      redirect = decodeURIComponent(redirect)
+      if (redirect.startsWith(ONLINE_CGFORM_SHARE)) {
+        return redirect;
+      }
+      return '';
+    })(to.query.redirect as string)
+    // 如果是则跳转到 online表单 外部专属登录页面
+    if (redirect) {
+      redirect = redirect.split('?')[0];
+      next({
+        name: SHARE_LOGIN__ROUTER_NAME,
+        query: {
+          redirect: encodeURIComponent(redirect),
+        }
+      });
+      return;
+    }
+  }
+  next();
+}
diff --git a/src/views/super/online/cgform/share/share.api.ts b/src/views/super/online/cgform/share/share.api.ts
new file mode 100644
index 0000000..e8aee7a
--- /dev/null
+++ b/src/views/super/online/cgform/share/share.api.ts
@@ -0,0 +1,16 @@
+import {defHttp} from "@/utils/http/axios";
+
+const enum Api {
+  getCgformById = '/online/cgform/head/queryById',
+  getCgformRecordById = '/online/cgform/api/form/{formId}/{recordId}',
+}
+
+export const getCgformById = (id: string) => defHttp.get({
+  url: Api.getCgformById,
+  params: {id}
+}, {isTransformResponse: false});
+
+export const getCgformRecordById = (formId: string, dataId: string) => defHttp.get({
+  url: Api.getCgformRecordById.replace('{formId}', formId).replace('{recordId}', dataId),
+  params: {}
+}, {isTransformResponse: false});
diff --git a/src/views/super/online/cgform/share/store/shareStore.ts b/src/views/super/online/cgform/share/store/shareStore.ts
new file mode 100644
index 0000000..f84a72f
--- /dev/null
+++ b/src/views/super/online/cgform/share/store/shareStore.ts
@@ -0,0 +1,69 @@
+import {defineStore} from 'pinia';
+import {useUserStoreWithOut} from "@/store/modules/user";
+import {removeCacheByDynKey} from "@/utils/auth";
+import {TOKEN_KEY} from "@/enums/cacheEnum";
+import {getUserInfo} from "@/api/sys/user";
+
+interface StateType {
+  cgformRecord: Nullable<Recordable>,
+  dataRecord: Nullable<Recordable>,
+}
+
+const userStore = useUserStoreWithOut()
+
+export const useShareStore = defineStore({
+  id: 'online-cgform-share',
+  state: (): StateType => ({
+    cgformRecord: null,
+    dataRecord: null,
+  }),
+  getters: {
+
+    getCgformRecord(): Nullable<Recordable> {
+      return this.cgformRecord;
+    },
+    getDataRecord(): Nullable<Recordable> {
+      return this.dataRecord;
+    },
+
+  },
+  actions: {
+
+    // 检查 url 参数是否携带token
+    async checkUrlToken(): Promise<boolean> {
+      const token = new URLSearchParams(window.location.search).get('token');
+      const flag = token != null && token.length > 0;
+      if (flag) {
+        userStore.setToken(token);
+        // 检查 token 是否有效
+        try {
+          const res = await getUserInfo();
+          if (!res?.userInfo) {
+            throw new Error('token无效');
+          } else {
+            userStore.setUserInfo(res.userInfo)
+            if (res.sysAllDictItems) {
+              userStore.setAllDictItems(res.sysAllDictItems);
+            }
+          }
+          return true;
+        } catch (e) {
+          userStore.setToken('');
+          removeCacheByDynKey(TOKEN_KEY)
+          return false;
+        }
+      }
+      return flag;
+    },
+
+    setCgformRecord(value: Nullable<Recordable>) {
+      this.cgformRecord = value;
+    },
+
+    setDataRecord(value: Nullable<Recordable>) {
+      this.dataRecord = value;
+    },
+
+  }
+});
+
diff --git a/src/views/super/online/cgform/store/cgformState.ts b/src/views/super/online/cgform/store/cgformState.ts
new file mode 100644
index 0000000..0d36e2e
--- /dev/null
+++ b/src/views/super/online/cgform/store/cgformState.ts
@@ -0,0 +1,38 @@
+import {defineStore} from 'pinia';
+import {store} from '/@/store';
+
+interface CgformState {
+  // 近期被修改过的表，存储表id
+  changedTables: string[];
+}
+
+export const useCgformStore = defineStore({
+  id: 'cgform-state',
+  state: (): CgformState => ({
+    changedTables: [],
+  }),
+  getters: {},
+  actions: {
+    /**
+     * 检查是否同步过数据库
+     * @param tableId 表id
+     */
+    checkIsChanged(tableId: string) {
+      return this.changedTables.includes(tableId);
+    },
+    addChangedTable(tableId: string) {
+      this.changedTables.push(tableId);
+    },
+    removeChangedTable(tableId: string) {
+      const index = this.changedTables.findIndex((item) => item === tableId);
+      if (index !== -1) {
+        this.changedTables.splice(index, 1);
+      }
+    },
+  },
+});
+
+// 在 setup 之外使用
+export function useCgformStoreWithOut() {
+  return useCgformStore(store);
+}
diff --git a/src/views/super/online/cgform/store/enhance.ts b/src/views/super/online/cgform/store/enhance.ts
new file mode 100644
index 0000000..aecfe74
--- /dev/null
+++ b/src/views/super/online/cgform/store/enhance.ts
@@ -0,0 +1,41 @@
+import { store } from '/@/store';
+import { defineStore } from 'pinia';
+import { createLocalStorage } from '/@/utils/cache';
+
+const ls = createLocalStorage();
+const ENHANCE_PRE = 'enhance_';
+
+interface EnhanceStore {
+  enhanceJs: Recordable;
+}
+
+export const useEnhanceStore = defineStore({
+  id: 'online-cgform-enhance',
+  state: (): EnhanceStore => ({
+    enhanceJs: {},
+  }),
+  getters: {},
+  actions: {
+    getEnhanceJs(code: string): Recordable[] {
+      this.enhanceJs[code] = ls.get(ENHANCE_PRE + code);
+      return this.enhanceJs[code];
+    },
+    addEnhanceJs(record: Recordable) {
+      if (!this.enhanceJs[record.code]) {
+        this.enhanceJs[record.code] = [{ ...record }];
+      } else {
+        this.enhanceJs[record.code].push({ ...record });
+      }
+      let enhanceJsArray = this.enhanceJs[record.code];
+      while (enhanceJsArray.length > 16) {
+        enhanceJsArray.shift();
+      }
+      ls.set(ENHANCE_PRE + record.code, enhanceJsArray);
+    },
+  },
+});
+
+// 在setup函数之外使用
+export function useEnhanceStoreWithOut() {
+  return useEnhanceStore(store);
+}
diff --git a/src/views/super/online/cgform/types/index.ts b/src/views/super/online/cgform/types/index.ts
new file mode 100644
index 0000000..5e70224
--- /dev/null
+++ b/src/views/super/online/cgform/types/index.ts
@@ -0,0 +1,54 @@
+import { Ref } from 'vue';
+import DBAttributeTable from '../components/tables/DBAttributeTable.vue';
+import PageAttributeTable from '../components/tables/PageAttributeTable.vue';
+import CheckDictTable from '../components/tables/CheckDictTable.vue';
+import ForeignKeyTable from '../components/tables/ForeignKeyTable.vue';
+import IndexTable from '../components/tables/IndexTable.vue';
+import QueryTable from '../components/tables/QueryTable.vue';
+
+// 定义弹窗form的类型
+export namespace CgformModal {
+  export type DBAttributeTableType = InstanceType<typeof DBAttributeTable>;
+  export type PageAttributeTableType = InstanceType<typeof PageAttributeTable>;
+  export type CheckDictTableType = InstanceType<typeof CheckDictTable>;
+  export type ForeignKeyTableType = InstanceType<typeof ForeignKeyTable>;
+  export type IndexTableType = InstanceType<typeof IndexTable>;
+  export type QueryTableType = InstanceType<typeof QueryTable>;
+
+  export type TablesRef = {
+    dbTable: Ref<DBAttributeTableType | undefined>;
+    pageTable: Ref<PageAttributeTableType | undefined>;
+    checkTable: Ref<CheckDictTableType | undefined>;
+    fkTable: Ref<ForeignKeyTableType | undefined>;
+    idxTable: Ref<IndexTableType | undefined>;
+    queryTable: Ref<QueryTableType | undefined>;
+  };
+}
+
+// 定义页面类型，normal = 普通页面，copy=视图页面
+export enum CgformPageType {
+  normal,
+  copy,
+}
+
+/**
+ * Online扩展配置类型
+ */
+export type ExtConfigType = Partial<{
+  // 是否启用积木报表打印（0否，1是）
+  reportPrintShow: number,
+  // 积木报表地址
+  reportPrintUrl: string,
+  // 是否启用联合查询（0否，1是）
+  joinQuery: number,
+  // 弹窗是否默认全屏（0否，1是）
+  modelFullscreen: number,
+  // 弹窗的最小宽度（px）
+  modalMinWidth: string,
+  // 是否固定操作列（0否，1是）
+  tableFixedAction: number,
+  // 操作列固定方式
+  tableFixedActionType: 'left' | 'right',
+  // 是否允许调整列表列宽
+  canResizeColumn?: number,
+}>
diff --git a/src/views/super/online/cgform/types/onlineRender.ts b/src/views/super/online/cgform/types/onlineRender.ts
new file mode 100644
index 0000000..f2f6ae3
--- /dev/null
+++ b/src/views/super/online/cgform/types/onlineRender.ts
@@ -0,0 +1,157 @@
+/**
+ * 因为online列表渲染 公用一个list 所以一些独有的属性配置 需要单独放到map中存放 避免切换路由冲突
+ */
+interface SpecialConfig {
+  // 排序字段
+  sortField: string;
+  // 排序方式
+  sortType: 'asc' | 'desc';
+  // 当前页数
+  currentPage: number;
+  // 当前每页数目
+  pageSize: number;
+  // 总页数
+  total: number;
+  // 选中的行key
+  selectedRowKeys: string[];
+  // 查询条件
+  queryParam: object;
+  // href跳转至online列表页 会携带参数
+  acceptHrefParams: object;
+  // 路由是否被缓存
+  cache: boolean;
+  // 表描述
+  description: string;
+  // 表名
+  currentTableName: string;
+  // 是否启用表单设计器表单
+  isDesForm: boolean;
+  // 表单设计器表单编码
+  desFormCode: string;
+  isTree: boolean;
+  hasChildrenField?: string;
+}
+
+interface Page {
+  current?: number;
+  pageSize?: number;
+  pageSizeOptions?: string[];
+  showTotal?: Function;
+  showQuickJumper?: boolean;
+  showSizeChanger?: boolean;
+  total?: number;
+}
+
+interface CgFormButton {
+  buttonCode?: string;
+  buttonName?: string;
+  buttonStyle?: string;
+  optType?: 'js' | 'bus';
+  exp?: string;
+  buttonIcon?: string;
+}
+
+/***
+ * 表单页面的扩展配置
+ */
+interface ExtendConfig {
+  modalMinWidth: number;
+}
+
+/***
+ * 表单字段的扩展配置解析结果
+ */
+interface FieldExtends {
+  //上传数量
+  uploadnum?: number | string;
+
+  //限制大文本在列表页面的展示长度
+  showLength?: number | string;
+
+  //popup是否支持多选
+  popupMulti?: boolean;
+
+  //部门、用户组件 用于存储的字段名
+  store?: string;
+
+  //部门、用户组件 用于展示的字段名
+  text?: string;
+
+  //部门、用户组件 是否多选
+  multiSelect?: boolean;
+
+  //查询排序规则
+  orderRule?: 'asc' | 'desc';
+  
+  // 关联记录展示风格 card/select
+  showType?: string;
+  // 关联记录封面图
+  imageField?: string;
+  // label长度
+  labelLength?: number;
+}
+
+// online提交表单和流程标识 默认只提交表单
+const SUBMIT_FLOW_KEY = 'jeecg_submit_form_and_flow';
+// 表单提交成功后回传表单数据的id key用于提交流程取id
+const SUBMIT_FLOW_ID = 'flow_submit_id';
+// 表单提交成功后 在formData中添加设置表名的属性
+const ONL_FORM_TABLE_NAME = 'online_form_table_name';
+// 校验失败
+const VALIDATE_FAILED = 'validate-failed';
+
+/*
+ * 查询表单的样式-label
+ * */
+const ONL_QUERY_LABEL_COL = { xs: { span: 24 }, sm: { span: 6 } };
+
+/*
+ * 查询表单的样式-wrapper
+ * */
+const ONL_QUERY_WRAPPER_COL = { xs: { span: 24 }, sm: { span: 18 } };
+
+/**setup*/
+const SETUP = 'setup';
+
+/**EnhanceJS*/
+const ENHANCEJS = 'EnhanceJS';
+
+/**
+ * 表单类型转换成查询类型
+ * 普通查询和高级查询组件区别 ：高级查询不支持联动组件
+ */
+const FORM_VIEW_TO_QUERY_VIEW = {
+  password: 'text',
+  file: 'text',
+  image: 'text',
+  textarea: 'text',
+  umeditor: 'text',
+  markdown: 'text',
+  checkbox: 'list_multi',
+  radio: 'list',
+};
+
+/**下拉组件PopupContainer类选择器*/
+const POP_CONTAINER = '.jeecg-online-modal .ant-modal-content';
+
+/**online权限前缀-现主要用于子表button*/
+const ONL_AUTH_PRE = 'online_';
+
+export {
+  SpecialConfig,
+  Page,
+  CgFormButton,
+  ExtendConfig,
+  FieldExtends,
+  SUBMIT_FLOW_KEY,
+  SUBMIT_FLOW_ID,
+  VALIDATE_FAILED,
+  ONL_QUERY_LABEL_COL,
+  ONL_QUERY_WRAPPER_COL,
+  SETUP,
+  ENHANCEJS,
+  FORM_VIEW_TO_QUERY_VIEW,
+  POP_CONTAINER,
+  ONL_AUTH_PRE,
+  ONL_FORM_TABLE_NAME
+};
diff --git a/src/views/super/online/cgform/util/FieldDefVal.ts b/src/views/super/online/cgform/util/FieldDefVal.ts
new file mode 100644
index 0000000..ae18fd0
--- /dev/null
+++ b/src/views/super/online/cgform/util/FieldDefVal.ts
@@ -0,0 +1,452 @@
+import dayjs from 'dayjs';
+import { useUserStore } from '/@/store/modules/user';
+import { defHttp } from '/@/utils/http/axios';
+import { replaceAll, _eval } from '/@/utils';
+import * as CustomExpression from '/@/utils/desform/customExpression';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+dayjs.extend(weekOfYear);
+dayjs.extend(quarterOfYear);
+// 获取所有用户自定义表达式的Key
+const ceKeys = Object.keys(CustomExpression);
+// 将key用逗号拼接，可以拼接成方法参数，例：a,b,c --> function(a,b,c){}
+const ceJoin = ceKeys.join(',');
+// 将用户自定义的表达式按key的顺序放到数组中，可以使用 apply 传递给方法直接调用
+const $CE$ = ceKeys.map((key) => CustomExpression[key]);
+
+/** 普通规则表达式 #{...} */
+const normalRegExp = /#{([^}]+)?}/g;
+/** 用户自定义规则表达式 {{...}} */
+const customRegExp = /{{([^}]+)?}}/g;
+/** 填值规则表达式 ${...} */
+const fillRuleRegExp = /\${([^}]+)?}/g;
+
+/** action 类型 */
+export const ACTION_TYPES = { ADD: 'add', EDIT: 'edit', DETAIL: 'detail', RELOAD: 'reload' };
+
+/**
+ * 将主表/一对一子表 默认值配置信息暂存
+ * @param field
+ * @param item
+ * @param config
+ */
+export function initDefValueConfig(field, item, config) {
+  if (hasEffectiveValue(item.defVal)) {
+    const obj = { field: field, type: item.type, value: item.defVal, view: item.view, fieldExtendJson: item.fieldExtendJson }
+    // 避免重复添加
+    const index = config.findIndex((c) => c.field === field);
+    if (index === -1) {
+      config.push(obj);
+    } else {
+      config[index] = obj;
+    }
+  }
+}
+
+/**
+ * 将一对多子表 默认值配置信息暂存
+ * @param item
+ * @param config
+ */
+export function initSubTableDefValueConfig(item, config) {
+  if (hasEffectiveValue(item.fieldDefaultValue)) {
+    config.push({ field: item.key, type: item.type, value: item.fieldDefaultValue });
+  }
+}
+
+/**
+ * 加载form组件默认值-仅用于新增页面
+ * @param properties 字段配置
+ * @param callback 回调传值
+ * @param formData 表单值 
+ */
+export async function loadFormFieldsDefVal(properties, callback, formData?) {
+  if (Array.isArray(properties) && properties.length > 0) {
+    let formValues = {};
+    for (let prop of properties) {
+      let { value, type, field } = prop;
+      value = await handleDefaultValue(value, ACTION_TYPES.ADD, formData||{});
+      // 处理数字类型，如果type=number并且value有值
+      if ('number' === type && value) {
+        // parseFloat() 可以直接处理字符串、整数、小数、null和undefined，
+        // 非数字类型直接返回NaN，不必担心报错
+        value = Number.parseFloat(value);
+      }
+      // update-begin--author:liaozhiyang---date:20240517---for：【TV360X-321】日期组件(date)中设置了年，年月，年周，年季度等格式的默认值需要转化成YYYY-MM-DD
+      value = transformDefValDate(prop, value);
+      // update-end--author:liaozhiyang---date:20240517---for：【TV360X-321】日期组件(date)中设置了年，年月，年周，年季度等格式的默认值需要转化成YYYY-MM-DD
+      formValues[field] = value;
+    }
+    callback(formValues);
+  }
+}
+
+/**
+ * 2024-05-22
+ * liaozhiyang
+ * 日期组件(date)中设置了年，年月，年周，年季度等格式的默认值需要转化成YYYY-MM-DD
+ */
+function transformDefValDate(prop, value) {
+  const { type, field, view, fieldExtendJson } = prop;
+  if (view == 'date' && fieldExtendJson) {
+    const extendJson = JSON.parse(fieldExtendJson);
+    const { picker } = extendJson;
+    if (picker && picker != 'default' && value) {
+      let result;
+      try {
+        // 年 (2020)
+        if (picker === 'year') {
+          // update-begin--author:liaozhiyang---date:20240717---for：【TV360X-1790】年默认值设置YYYY-MM-DD格式，出现invaild Date
+          const data = value.split('-');
+          const y = data[0];
+          // update-end--author:liaozhiyang---date:20240717---for：【TV360X-1790】年默认值设置YYYY-MM-DD格式，出现invaild Date
+          result = dayjs().year(y).format('YYYY-MM-DD');
+        }
+        // 年 - 月 (2024-02)
+        if (picker === 'month') {
+          const data = value.split('-');
+          const y = data[0];
+          const m = +data[1] + 1;
+          result = dayjs().year(y).month(m).format('YYYY-MM-DD');
+        }
+        // 年 - 周 (2024-14周)
+        if (picker === 'week') {
+          const data = value.split('-');
+          const y = data[0];
+          const w = data[1].match(/^(\d+)周$/)[1];
+          result = dayjs().year(y).week(w).format('YYYY-MM-DD');
+        }
+        // 年 - 季度 (2024-Q4)
+        if (picker === 'quarter') {
+          const data = value.split('-');
+          const y = data[0];
+          const q = data[1].match(/^[Qq](\d)$/)[1];
+          result = dayjs().year(y).quarter(q).format('YYYY-MM-DD');
+        }
+      } catch (error) {
+        result = value;
+      }
+      return result;
+    }
+    return value;
+  }
+  return value;
+}
+
+export async function loadOneFieldDefVal(field, item, formValues) {
+  let { defVal, type } = item;
+  if (hasEffectiveValue(defVal)) {
+    let value = await handleDefaultValue(defVal, ACTION_TYPES.ADD, {});
+    if ('number' === type && value) {
+      // update-begin--author:liaozhiyang---date:20240618---for：online普通查询默认值范围查询不好使
+      if (item.mode == 'group' && typeof value === 'string' && value.indexOf(',') != -1) {
+        const arr = value.split(',');
+        value = [];
+        if (arr[0]) {
+          value.push(Number.parseFloat(arr[0]));
+        }
+        if (arr[1]) {
+          value.push(Number.parseFloat(arr[1]));
+        }
+      } else {
+        value = Number.parseFloat(value);
+      }
+      // update-end--author:liaozhiyang---date:20240618---for：online普通查询默认值范围查询不好使
+    }
+    formValues[field] = value;
+  }
+}
+
+/**
+ * 判断给定的值是不是有效的
+ */
+function hasEffectiveValue(val) {
+  if (val || val === 0) {
+    return true;
+  }
+  return false;
+}
+
+/** 加载JEditableTable组件默认值 */
+export function loadFieldDefValForSubTable({ subForms, subTable, row, action, getFormData }) {
+  if (subTable && Array.isArray(subTable.columns) && subTable.columns.length > 0) {
+    subTable.columns.forEach(async (column) => {
+      let { key, fieldDefaultValue: defVal } = column;
+      eachHandler(
+        defVal,
+        action,
+        (value) => {
+          if (subForms.form) {
+            subForms.form.setFieldsValue({ [key]: value });
+          } else {
+            // update-begin---author:sunjianlei  Date:20200725 for：online功能测试，行操作切换成新的行编辑-----------
+            let v = [{ rowKey: row.id, values: { [key]: value } }];
+            (subForms.jvt || subForms.jet).setValues(v);
+            // update-end---author:sunjianlei    Date:20200725 for：online功能测试，行操作切换成新的行编辑------------
+          }
+        },
+        getFormData
+      );
+    });
+  }
+}
+
+async function eachHandler(defVal, action, callback, getFormData) {
+  if (defVal != null) {
+    // 检查类型，如果类型错误则不继续运行
+    if (checkExpressionType(defVal)) {
+      let value = await getDefaultValue(defVal, action, getFormData);
+      if (value != null) {
+        callback(value);
+        return value;
+      }
+    } else {
+      // 不合法的表达式直接返回不解析
+      callback(defVal);
+    }
+  }
+}
+
+/**
+ * 处理默认值
+ * @param defVal
+ * @param action
+ * @param getFormData
+ */
+async function handleDefaultValue(defVal, action, getFormData) {
+  if (defVal != null) {
+    // 检查类型，如果类型错误则不继续运行
+    if (checkExpressionType(defVal)) {
+      let value = await getDefaultValue(defVal, action, getFormData);
+      if (value != null) {
+        return value;
+      }
+    }
+  }
+  return defVal;
+}
+
+/**
+ * 检查表达式类型是否合法，规则：
+ * 1、填值规则表达式不能和其他表达式混用
+ * 2、每次只能填写一个填值规则表达式
+ * 3、普通表达式和用户自定义表达式可以混用
+ */
+export function checkExpressionType(defVal) {
+  // 获取各个表达式的数量
+  let normalCount = 0,
+    customCount = 0,
+    fillRuleCount = 0;
+  defVal.replace(fillRuleRegExp, () => fillRuleCount++);
+  if (fillRuleCount > 1) {
+    logWarn(`表达式[${defVal}]不合法：只能同时填写一个填值规则表达式！`);
+    return false;
+  }
+  defVal.replace(normalRegExp, () => normalCount++);
+  defVal.replace(customRegExp, () => customCount++);
+  // 除填值规则外其他规则的数量
+  let fillRuleOtherCount = normalCount + customCount;
+  if (fillRuleCount > 0 && fillRuleOtherCount > 0) {
+    logWarn(`表达式[${defVal}]不合法：填值规则表达式不能和其他表达式混用！`);
+    return false;
+  }
+  return true;
+}
+
+/** 获取所有匹配的表达式 */
+function getRegExpMap(text, exp) {
+  let map = new Map();
+  text.replace(exp, function (match, param) {
+    map.set(match, param.trim());
+    return match;
+  });
+  return map;
+}
+
+/** 获取默认值，可以执行表达式，可以执行用户自定义方法，可以异步获取用户信息等 */
+async function getDefaultValue(defVal, action, getFormData) {
+  // 只有在 add 和 reload 模式下才执行填值规则
+  if (action === ACTION_TYPES.ADD || action === ACTION_TYPES.RELOAD) {
+    // 判断是否是填值规则表达式，如果是就执行填值规则
+    if (fillRuleRegExp.test(defVal)) {
+      let arr: any[] = [getFormData];
+      return await executeRegExp(defVal, fillRuleRegExp, executeFillRuleExpression, arr);
+    }
+  }
+  // 只有在 add 模式下才执行其他表达式
+  if (action === ACTION_TYPES.ADD) {
+    // 获取并替换所有常规表达式
+    defVal = await executeRegExp(defVal, normalRegExp, executeNormalExpression);
+    // 获取并替换所有用户自定义表达式
+    defVal = await executeRegExp(defVal, customRegExp, executeCustomExpression);
+    return defVal;
+  }
+  return null;
+}
+
+async function executeRegExp(defVal, regExp, execFun, otherParams: any[] = []) {
+  let map = getRegExpMap(defVal, regExp);
+  for (let origin of map.keys()) {
+    let exp = map.get(origin);
+    let result = await execFun.apply(null, [exp, origin, ...otherParams]);
+    // 如果只有一个表达式，那么就不替换（因为一旦替换，类型就会被转成String），直接返回执行结果，保证返回的类型不变
+    if (origin === defVal) {
+      return result;
+    }
+    defVal = replaceAll(defVal, origin, result);
+  }
+  return defVal;
+}
+
+/** 执行【普通表达式】#{xxx} */
+async function executeNormalExpression(expression, origin) {
+  switch (expression) {
+    case 'date':
+      return dayjs().format('YYYY-MM-DD');
+    case 'time':
+      return dayjs().format('HH:mm:ss');
+    case 'datetime':
+      return dayjs().format('YYYY-MM-DD HH:mm:ss');
+    default:
+      // 获取当前登录用户的信息
+      let result = getUserInfoByExpression(expression);
+      if (result != null) {
+        return result;
+      }
+      // 没有符合条件的表达式，返回原始值
+      return origin;
+  }
+}
+
+/** 根据表达式获取相应的用户信息 */
+function getUserInfoByExpression(expression) {
+  const userStore = useUserStore();
+  let userInfo = userStore.getUserInfo;
+  if (userInfo) {
+    switch (expression) {
+      case 'sysUserId':
+        return userInfo.id;
+      // 当前登录用户登录账号
+      case 'sysUserCode':
+      case 'sys_user_code':
+        return userInfo.username;
+      // 当前登录用户真实名称
+      case 'sysUserName':
+        return userInfo.realname;
+      // 当前登录用户部门编号
+      case 'sysOrgCode':
+      case 'sys_org_code':
+        return userInfo.orgCode;
+    }
+  }
+  return null;
+}
+
+/** 执行【用户自定义表达式】 {{xxx}} */
+async function executeCustomExpression(expression, origin) {
+  // update-begin--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+  // 利用 eval 生成一个方法，这个方法的参数就是用户自定义的所有的表达式
+  let fn = _eval(`(function (${ceJoin}){ return ${expression} })`);
+  // update-end--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+  try {
+    // 然后调用这个方法，并把表达式传递进去，从而完成表达式的执行
+    return fn.apply(null, $CE$);
+  } catch (e) {
+    // 执行失败，输出错误并返回原始值
+    logError(e);
+    return origin;
+  }
+}
+
+/** 执行【填值规则表达式】 ${xxx} */
+async function executeFillRuleExpression(expression, origin, getFormData) {
+  let formData = {};
+  if (typeof getFormData === 'function') {
+    formData = getFormData();
+  }else if(getFormData){
+    formData = {...getFormData}
+  }
+  // 解析 url 参数
+  expression = handleFillRuleQueryString(expression).exp;
+  let url = `/sys/fillRule/executeRuleByCode/${expression}`;
+  let { success, message, result } = await defHttp.put({ url, params: formData }, { isTransformResponse: false });
+  if (success) {
+    return result;
+  } else {
+    logError(`填值规则（${expression}）执行失败：${message}`);
+    return origin;
+  }
+}
+
+// 处理填值规则 queryString 参数
+export function handleFillRuleQueryString(expression: string) {
+  let arr = expression.split('?');
+  if (arr.length > 1) {
+    let queryString = '';
+    let watchFields: string[] = [];
+    let str = arr[1];
+    let pairs = str.split('&');
+    pairs.forEach((pair, idx) => {
+      let [key, value] = pair.split('=');
+      value = value.trim();
+      // 取出监听的字段，多个用逗号分隔
+      if (key === 'onl_watch') {
+        watchFields = value.split(',');
+      } else {
+        queryString += `${key}=${value}`;
+        if (idx < pairs.length - 1) {
+          queryString += '&';
+        }
+      }
+    });
+    return {
+      exp: arr[0] + (queryString === '' ? '' : ('?' + queryString)),
+      watchFields: watchFields,
+    };
+  }
+  return {exp: expression, watchFields: []};
+}
+
+export function handleFillRuleWatchKeysMap(properties: Recordable[]) {
+  const watchKeyMap = new Map<string, string[]>();
+  if (Array.isArray(properties) && properties.length > 0) {
+    for (let prop of properties) {
+      let {value: defVal, field} = prop;
+      if (defVal == null || defVal == '') {
+        continue;
+      }
+      // 检查类型，如果类型错误则不继续运行
+      if (!checkExpressionType(defVal)) {
+        continue;
+      }
+      // 判断是否是填值规则，如果是就解析填值规则
+      if (fillRuleRegExp.test(defVal)) {
+        let map = getRegExpMap(defVal, fillRuleRegExp);
+        for (let origin of map.keys()) {
+          let exp = map.get(origin);
+          const {watchFields} = handleFillRuleQueryString(exp);
+          for (const watchField of watchFields) {
+            let arr = watchKeyMap.get(watchField)
+            if (!Array.isArray(arr)) {
+              arr = []
+              watchKeyMap.set(watchField, arr)
+            }
+            if (arr.includes(field)) {
+              continue;
+            }
+            arr.push(field);
+          }
+        }
+      }
+    }
+  }
+  return watchKeyMap;
+}
+
+function logWarn(message) {
+  console.warn('[loadFieldDefVal]:', message);
+}
+
+function logError(message) {
+  console.error('[loadFieldDefVal]:', message);
+}
diff --git a/src/views/super/online/cgform/util/constant.ts b/src/views/super/online/cgform/util/constant.ts
new file mode 100644
index 0000000..d4079a6
--- /dev/null
+++ b/src/views/super/online/cgform/util/constant.ts
@@ -0,0 +1,9 @@
+
+
+export const ERP = 'erp';
+export const Tree = 'tree';
+export const NORMAL = 'normal';
+export const INNER_TABLE = 'innerTable';
+export const TAB = 'tab';
+export const LABELLENGTH = 6;
+export const ERPSUBTABLE = 'erpSubTable';
diff --git a/src/views/super/online/cgform/util/utils.ts b/src/views/super/online/cgform/util/utils.ts
new file mode 100644
index 0000000..b111c5d
--- /dev/null
+++ b/src/views/super/online/cgform/util/utils.ts
@@ -0,0 +1,19 @@
+import {ExtConfigDefaultJson} from "../cgform.data";
+
+// 初始化扩展JSON
+export function parseExtConfigJson(record: Recordable) {
+  // 解析扩展JSON
+  let parseJSON = {};
+  if (record.extConfigJson) {
+    try {
+      parseJSON = JSON.parse(record.extConfigJson);
+    } catch (e) {
+      console.error('online扩展JSON转换失败：', e);
+    }
+  }
+  // 从数据库中取值，并合并
+  return Object.assign({}, ExtConfigDefaultJson, parseJSON, {
+    isDesForm: record.isDesForm || 'N',
+    desFormCode: record.desFormCode || '',
+  });
+}
diff --git a/src/views/super/online/cgreport/auto/OnlCgReportList.vue b/src/views/super/online/cgreport/auto/OnlCgReportList.vue
new file mode 100644
index 0000000..0adad11
--- /dev/null
+++ b/src/views/super/online/cgreport/auto/OnlCgReportList.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="p-2">
+    <JPopupOnlReport :id="id" :multi="true" :clickToRowSelect="false"></JPopupOnlReport>
+  </div>
+</template>
+<script lang="ts">
+  import JPopupOnlReport from '/@/components/jeecg/OnLine/JPopupOnlReport.vue';
+  import { defineComponent } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute } from 'vue-router';
+
+  export default defineComponent({
+    name: 'OnlCgReportList',
+    components: {
+      JPopupOnlReport,
+    },
+    setup(props, { emit, refs }) {
+      const { createMessage } = useMessage();
+      const route = useRoute();
+      const path = route.path;
+      const id = path.substr(path.lastIndexOf('/') + 1);
+      return {
+        id,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/cgreport/cgreport.api.ts b/src/views/super/online/cgreport/cgreport.api.ts
new file mode 100644
index 0000000..8345bc8
--- /dev/null
+++ b/src/views/super/online/cgreport/cgreport.api.ts
@@ -0,0 +1,96 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/online/cgreport/head/list',
+  save = '/online/cgreport/head/add',
+  edit = '/online/cgreport/head/editAll',
+  deleteOne = '/online/cgreport/head/delete',
+  deleteBatch = '/online/cgreport/head/deleteBatch',
+  onlCgreportParamList = '/online/cgreport/param/listByHeadId',
+  onlCgreportItemList = '/online/cgreport/item/listByHeadId',
+  getDataSourceList = '/sys/dataSource/options',
+  getParamsInfo = '/online/cgreport/api/getParamsInfo/',
+  analyzeSql = '/online/cgreport/head/parseSql',
+}
+
+/**
+ * 查询子表数据
+ * @param params
+ */
+export const onlCgreportParamList = Api.onlCgreportParamList;
+/**
+ * 查询子表数据
+ * @param params
+ */
+export const onlCgreportItemList = Api.onlCgreportItemList;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除
+ * e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    iconType: 'warning',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  if (isUpdate) {
+    return defHttp.put({ url: Api.edit, params });
+  } else {
+    return defHttp.post({ url: Api.save, params });
+  }
+};
+
+/**
+ * 获取参数地址
+ * @param params
+ */
+export const getReportParam = (id) => {
+  return defHttp.get({ url: Api.getParamsInfo + id });
+};
+
+/**
+ * 获取数据源列表
+ */
+export const getDataSourceList = () => {
+  return defHttp.get({ url: Api.getDataSourceList });
+};
+
+/**
+ * 解析sql
+ * @param params
+ */
+export const analyzeSql = (params) => {
+  return defHttp.get({
+    url: Api.analyzeSql + '?' + params,
+  });
+};
diff --git a/src/views/super/online/cgreport/cgreport.data.ts b/src/views/super/online/cgreport/cgreport.data.ts
new file mode 100644
index 0000000..e73af55
--- /dev/null
+++ b/src/views/super/online/cgreport/cgreport.data.ts
@@ -0,0 +1,345 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
+import { duplicateCheckDelay } from '/@/views/system/user/user.api';
+import { getDataSourceList } from './cgreport.api';
+import {usePermissionStore} from "/@/store/modules/permission";
+const permissionStore = usePermissionStore();
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '报表名字',
+    align: 'center',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '报表编码',
+    align: 'center',
+    dataIndex: 'code',
+    width: 120,
+  },
+  {
+    title: '报表SQL',
+    align: 'center',
+    dataIndex: 'cgrSql',
+    width: 360,
+  },
+  {
+    title: '数据源',
+    align: 'center',
+    dataIndex: 'dbSource',
+    customRender: ({ text, record }) => {
+      return record["dbSource_dictText"] ? record["dbSource_dictText"] : text
+    },
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '报表名称',
+    field: 'name',
+    component: 'JInput',
+  },
+  {
+    label: '报表编码',
+    field: 'code',
+    component: 'JInput',
+  },
+];
+
+// 编码校验 仅online报表用
+const codePattern = /^[a-z|A-Z][a-z|A-Z|\d|_|-]{0,}$/;
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '报表编码',
+    field: 'code',
+    component: 'Input',
+    colProps: {
+      sm: 24,
+      xs: 24,
+      md: 12,
+      lg: 8,
+      xl: 8,
+      xxl: 8,
+    },
+    dynamicRules: ({ values, model }) => {
+      console.log('values:', values);
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            return new Promise((resolve, reject) => {
+              if (!value) {
+                return reject('请输入报表编码！');
+              }
+              if (!codePattern.test(value)) {
+                return reject('编码必须以字母开头，可包含数字、下划线、横杠！');
+              }
+              let params = {
+                tableName: 'onl_cgreport_head',
+                fieldName: 'code',
+                fieldVal: value,
+                dataId: model.id,
+              };
+              duplicateCheckDelay(params)
+                .then((res) => {
+                  res.success ? resolve() : reject('报表编码已存在!');
+                })
+                .catch((err) => {
+                  reject(err.message || '校验失败');
+                });
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    label: '报表名字',
+    field: 'name',
+    component: 'Input',
+    colProps: {
+      sm: 24,
+      xs: 24,
+      md: 12,
+      lg: 8,
+      xl: 8,
+      xxl: 8,
+    },
+    dynamicRules: () => {
+      return [{ required: true, message: '请输入报表名字!' }];
+    },
+  },
+  {
+    label: '动态数据源',
+    field: 'dbSource',
+    colProps: {
+      sm: 24,
+      xs: 24,
+      md: 12,
+      lg: 8,
+      xl: 8,
+      xxl: 8,
+    },
+    component: 'ApiSelect',
+    rules: [{ required: permissionStore.sysSafeMode, message: '请选择数据源！' }],
+    componentProps: {
+      api: getDataSourceList,
+    },
+  },
+  /*    {
+        label: ' ',
+        field: 'line1',
+        component: 'Input',
+        slot: 'line1',
+        colProps: {
+            span: 24
+        },
+        itemProps:{
+            labelCol: { xs: 1, sm: 1 },
+            wrapperCol: { xs: 23, sm: 23 },
+            colon: false
+        },
+    },*/
+  {
+    label: '报表SQL',
+    field: 'cgrSql',
+    component: 'JCodeEditor',
+    rules: [{ required: true, message: '请填写报表SQL' }],
+    // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+    // itemProps: {
+    //   labelCol: { xs: 24, sm: 4, md: 2, lg: 2, xl: 3, xxl: 2 },
+    //   wrapperCol: { xs: { span: 24 }, sm: { span: 18 }, md: { span: 24 } },
+    // },
+    // update-end--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+    componentProps: {
+      height: '200px',
+      fullScreen: true,
+    },
+    colProps: {
+      sm: 24,
+      xs: 24,
+      md: 18,
+      lg: 16,
+      xl: 16,
+      xxl: 16,
+    },
+  },
+  {
+    label: ' ',
+    field: 'analyseButton',
+    component: 'Input',
+    slot: 'analyseButton',
+    colProps: {
+      xs: 24,
+      sm: 24,
+      md: 6,
+      lg: 8,
+      xl: 8,
+      xxl: 8,
+    },
+    itemProps: {
+      labelCol: { xs: 1, sm: 1 },
+      wrapperCol: { xs: 23, sm: 23 },
+      colon: false,
+    },
+  },
+];
+//子表表格配置
+export const onlCgreportParamColumns: JVxeColumn[] = [
+  {
+    title: '参数字段',
+    key: 'paramName',
+    type: JVxeTypes.input,
+    width: '150px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+    validateRules: [{ required: true, message: '${title}不能为空' }],
+  },
+  {
+    title: '参数文本',
+    key: 'paramTxt',
+    type: JVxeTypes.input,
+    width: '150px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+    validateRules: [{ required: true, message: '${title}不能为空' }],
+  },
+  {
+    title: '默认值',
+    key: 'paramValue',
+    type: JVxeTypes.input,
+    width: '150px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+];
+export const onlCgreportItemColumns: JVxeColumn[] = [
+  {
+    title: '字段名字',
+    key: 'fieldName',
+    type: JVxeTypes.input,
+    width: '160px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+    validateRules: [{ required: true, message: '${title}不能为空' }],
+  },
+  {
+    title: '字段文本',
+    key: 'fieldTxt',
+    type: JVxeTypes.input,
+    width: '160px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+    validateRules: [{ required: true, message: '${title}不能为空' }],
+  },
+  {
+    title: '宽度',
+    key: 'fieldWidth',
+    type: JVxeTypes.input,
+    width: '80px',
+    defaultValue: '',
+  },
+  {
+    title: '类型',
+    key: 'fieldType',
+    width: '120px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+    validateRules: [{ required: true, message: '${title}不能为空' }],
+    type: JVxeTypes.select,
+    options: [
+      { title: '数值类型', value: 'Integer' },
+      { title: '字符类型', value: 'String' },
+      { title: '日期类型', value: 'Date' },
+      { title: '时间类型', value: 'Datetime' },
+      { title: '长整型', value: 'Long' },
+      { title: '图片类型', value: 'Image' },
+    ],
+  },
+  {
+    title: '列显示',
+    key: 'isShow',
+    width: '80px',
+    align: 'center',
+    type: JVxeTypes.checkbox,
+    customValue: [1, 0],
+    defaultChecked: true,
+  },
+  {
+    title: '字段href',
+    key: 'fieldHref',
+    type: JVxeTypes.input,
+    width: '120px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+  {
+    title: '查询',
+    key: 'isSearch',
+    type: JVxeTypes.checkbox,
+    customValue: ['1', '0'],
+    width: '80px',
+    align: 'center',
+    defaultChecked: false,
+  },
+  {
+    title: '查询模式',
+    key: 'searchMode',
+    type: JVxeTypes.select,
+    width: '120px',
+    placeholder: '请选择${title}',
+    options: [
+      { title: '单值查询', value: 'single' },
+      { title: '范围查询', value: 'group' },
+    ],
+  },
+  {
+    title: '取值表达式',
+    key: 'replaceVal',
+    type: JVxeTypes.input,
+    width: '120px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+  {
+    title: '字典code',
+    key: 'dictCode',
+    type: JVxeTypes.input,
+    width: '120px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+  {
+    title: '分组标题',
+    key: 'groupTitle',
+    type: JVxeTypes.input,
+    width: '120px',
+    placeholder: '请输入${title}',
+    defaultValue: '',
+  },
+  {
+    title: '合计列',
+    align: 'center',
+    key: 'isTotal',
+    type: JVxeTypes.checkbox,
+    customValue: ['1', '0'],
+    width: '80px',
+    defaultChecked: false,
+  },
+];
diff --git a/src/views/super/online/cgreport/components/CgreportAigcModal.vue b/src/views/super/online/cgreport/components/CgreportAigcModal.vue
new file mode 100644
index 0000000..f520748
--- /dev/null
+++ b/src/views/super/online/cgreport/components/CgreportAigcModal.vue
@@ -0,0 +1,222 @@
+<template>
+  <BasicModal v-bind="getProps" destroyOnClose>
+    <a-spin wrapperClassName="p-2" :spinning="loading">
+
+      <div class="aiWrap">
+        <div class="titleArea">
+          <svg
+              t="1707100353985"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="4235"
+              width="26"
+              height="26"
+          >
+            <path
+                d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z"
+                p-id="4236"
+                fill="currentColor"
+            ></path>
+          </svg>
+          <h3>创建报表需要专业建议？试试AI智能建表吧</h3>
+        </div>
+        <p class="tip">请选择Online表单，并输入报表需求，例如：统计男生女生各自的数量</p>
+        <a-space class="content" direction="vertical">
+          <a-select
+              v-model:value="model.cgformTableName"
+              placeholder="请选择Online表单"
+              show-search
+              :filter-option="false"
+              not-found-content="没有符合的表单"
+              style="width: 100%"
+              @search="handleCgformSearch"
+          >
+            <template v-for="item of cgformList">
+              <a-select-option :value="item.value">{{ item.text }}</a-select-option>
+            </template>
+            <a-select-option value="2">女</a-select-option>
+          </a-select>
+          <a-textarea v-model:value.trim="model.prompt" placeholder="请输入报表需求" :rows="3"/>
+        </a-space>
+
+      </div>
+    </a-spin>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <a-button type="primary" :loading="loading" preIcon="carbon:ai-generate" @click="onSubmit">
+        立即生成
+      </a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import type {ModalProps} from '/@/components/Modal';
+import {BasicModal, useModalInner} from '/@/components/Modal';
+import {computed, ref, unref} from 'vue';
+import {debounce} from 'lodash-es';
+import {useAttrs} from '/@/hooks/core/useAttrs';
+import {useMessage} from '/@/hooks/web/useMessage';
+import {defHttp} from "@/utils/http/axios";
+
+import {getDictItems} from "@/api/common/api";
+
+enum Api {
+  AIGC = '/online/cgreport/head/api/aigc',
+}
+
+const props = defineProps();
+const emit = defineEmits(['register', 'generate']);
+const attrs = useAttrs();
+
+const {createMessage: $message} = useMessage();
+
+// model
+const model = ref<Recordable>({
+  prompt: '',
+  cgformTableName: void 0,
+});
+// 当前是否正在加载中
+const loading = ref(true);
+
+// 注册弹窗
+const [registerModal, {closeModal, setModalProps}] = useModalInner(() => {
+  queryOnlineCgform();
+  setLoading(false)
+  model.value.prompt = '';
+  model.value.cgformTableName = void 0;
+});
+
+// 弹窗最终props
+const getProps = computed(() => {
+  let modalProps: Partial<ModalProps> = {
+    width: 600,
+    height:  240,
+    title: '通过Ai生成报表',
+    maskClosable: false,
+    canFullscreen: false,
+    confirmLoading: unref(loading),
+  };
+  let finalProps: Recordable = {
+    ...modalProps,
+    ...unref(attrs),
+    ...props,
+    onCancel: close,
+    onRegister: registerModal,
+  };
+  return finalProps;
+});
+
+/** 设置加载状态*/
+function setLoading(flag) {
+  loading.value = flag;
+  setModalProps({confirmLoading: flag});
+}
+
+const handleCgformSearch = debounce(function (val: string) {
+  queryOnlineCgform(val);
+}, 500);
+
+const cgformList = ref<any[]>([]);
+
+function queryOnlineCgform(keywords: string = '') {
+  const queryWhere = keywords ? `table_txt like '%25${keywords}%25' and ` : '';
+  const where = `${queryWhere}is_db_synch='Y' and (table_type = 1 or table_type = 2)`
+  const order = `order by create_time desc`
+  getDictItems(`onl_cgform_head,table_txt,table_name,${where} ${order}`).then((res) => {
+    cgformList.value = res;
+  });
+}
+
+async function onSubmit() {
+    await onStepGenerate()
+}
+
+async function onStepGenerate() {
+  const {cgformTableName, prompt} = model.value
+  if (!cgformTableName) {
+    $message.warning('请选择Online表单');
+    return
+  }
+  if (!prompt) {
+    $message.warning('请输入报表需求');
+    return
+  }
+  setLoading(true);
+  try {
+    const url = Api.AIGC + '?cgformTableName=' + cgformTableName + '&prompt=' + prompt;
+    const {success, result, message} = await defHttp.post({url: url, timeout: 60000}, {isTransformResponse: false})
+    if (success) {
+      const {code, name, cgrSql} = result;
+      if (code && name && cgrSql) {
+        emit('generate', result);
+        closeModal();
+      } else {
+        $message.warn('生成失败，Ai开小差了，请稍后重试…');
+      }
+    } else {
+      $message.error(message);
+    }
+  } finally {
+    setLoading(false);
+  }
+}
+
+function onCancel() {
+  closeModal();
+}
+
+</script>
+
+<style scoped lang="less">
+
+html[data-theme="light"] {
+  .aiWrap {
+    h3 {
+      color: #333;
+    }
+
+    .tip {
+      color: #666;
+    }
+  }
+}
+
+.aiWrap {
+  padding: 30px 20px 20px;
+
+  .titleArea {
+    position: relative;
+    color: #ffb308;
+    width: fit-content;
+    margin: 0 auto;
+
+    svg {
+      position: absolute;
+      left: -30px;
+      margin-right: 8px;
+    }
+  }
+
+  h3 {
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  .tip {
+    text-align: center;
+    margin-bottom: 26px;
+  }
+
+  .content {
+    display: flex;
+  }
+
+  .ant-btn {
+    margin-left: 16px;
+  }
+}
+</style>
diff --git a/src/views/super/online/cgreport/components/CgreportModal.vue b/src/views/super/online/cgreport/components/CgreportModal.vue
new file mode 100644
index 0000000..545e22f
--- /dev/null
+++ b/src/views/super/online/cgreport/components/CgreportModal.vue
@@ -0,0 +1,332 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    :width="1200"
+    :maskClosable="false"
+    :defaultFullscreen="true"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" ref="formRef">
+      <template #analyseButton>
+        <div style="flex: 1; text-align: left">
+          <a-popover title="使用指南" trigger="hover" style="margin: 0 10px 0 6px">
+            <template #content>
+              您可以键入“”作为一个参数，这里abc是参数的名称。例如：<br />
+              select * from table where id = ${abc}。<br />
+              select * from table where id like concat('%',${abc},'%')。(mysql模糊查询)<br />
+              select * from table where id like '%'||${abc}||'%'。(oracle模糊查询)<br />
+              select * from table where id like '%'+${abc}+'%'。(sqlserver模糊查询)<br />
+              <span style="color: red">注：参数只支持动态报表，popup暂不支持</span>
+            </template>
+            <a-icon type="question-circle" />
+          </a-popover>
+          <a-button style="margin-left: 10px" type="primary" @click="handleSQLAnalyze">SQL解析</a-button>
+        </div>
+      </template>
+    </BasicForm>
+    <a-divider style="margin: 1px 0" class="cust-divider"></a-divider>
+    <!-- 子表单区域 -->
+    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
+      <a-tab-pane tab="动态报表配置明细" :key="refKeys[0]" :forceRender="true">
+        <JVxeTable
+          keep-source
+          dragSort
+          resizable
+          ref="onlCgreportItem"
+          :loading="onlCgreportItemTable.loading"
+          :columns="onlCgreportItemTable.columns"
+          :dataSource="onlCgreportItemTable.dataSource"
+          :height="390"
+          :rowNumber="true"
+          :rowSelection="true"
+          dragSortFixed="none"
+          rowNumberFixed="none"
+          rowSelectionFixed="none"
+          :toolbar="true"
+          :scrollX="{ enabled: true, gt: 0 }"
+          :scrollY="{ enabled: true, gt: 10 }"
+        />
+      </a-tab-pane>
+
+      <a-tab-pane tab="报表参数" :key="refKeys[1]" :forceRender="true">
+        <JVxeTable
+          keep-source
+          resizable
+          dragSort
+          ref="onlCgreportParam"
+          :loading="onlCgreportParamTable.loading"
+          :columns="onlCgreportParamTable.columns"
+          :dataSource="onlCgreportParamTable.dataSource"
+          :height="390"
+          :rowNumber="true"
+          :rowSelection="true"
+          dragSortFixed="none"
+          rowNumberFixed="none"
+          rowSelectionFixed="none"
+          :toolbar="true"
+          :scrollX="{ enabled: true, gt: 0 }"
+          :scrollY="{ enabled: true, gt: 10 }"
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
+  import { formSchema, onlCgreportParamColumns, onlCgreportItemColumns } from '../cgreport.data';
+  import { saveOrUpdate, onlCgreportParamList, onlCgreportItemList, analyzeSql } from '../cgreport.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  // 当前是否正在加载中
+  const confirmLoading = ref(true);
+  const refKeys = ref(['onlCgreportItem', 'onlCgreportParam']);
+  const activeKey = ref('onlCgreportItem');
+  const onlCgreportParam = ref();
+  const onlCgreportItem = ref();
+  const tableRefs = { onlCgreportItem, onlCgreportParam };
+  const onlCgreportParamTable = reactive({
+    loading: false,
+    dataSource: <any[]>[],
+    columns: onlCgreportParamColumns,
+  });
+  const onlCgreportItemTable = reactive({
+    loading: false,
+    dataSource: <any[]>[],
+    columns: onlCgreportItemColumns,
+  });
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, validateFields }] = useForm({
+    // labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+    labelWidth: 100,
+    wrapperCol: null
+    // update-end--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await reset();
+    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+      requestSubTableData(onlCgreportParamList, { headId: data?.record?.id }, onlCgreportParamTable);
+      requestSubTableData(onlCgreportItemList, { headId: data?.record?.id }, onlCgreportItemTable);
+    }
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+
+    // 当传递了 aigc 时，说明是通过 ai 生成的报表
+    if (data?.aigc) {
+      await setFieldsValue({
+        ...data.aigc,
+      });
+      // 等待 0.5s 后，自动执行SQL解析
+      setTimeout(() => handleSQLAnalyze())
+    }
+  });
+  //方法配置
+  const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod(
+    requestAddOrEdit,
+    classifyIntoFormData,
+    tableRefs,
+    activeKey,
+    refKeys
+  );
+
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+
+  async function reset() {
+    await resetFields();
+    activeKey.value = 'onlCgreportItem';
+    onlCgreportParamTable.dataSource = [];
+    onlCgreportItemTable.dataSource = [];
+  }
+  function classifyIntoFormData(allValues) {
+    let main = Object.assign({}, allValues.formValue);
+    return {
+      ...main, // 展开
+      onlCgreportParamList: allValues.tablesValue[1].tableData,
+      onlCgreportItemList: allValues.tablesValue[0].tableData,
+    };
+  }
+  //表单提交事件
+  async function requestAddOrEdit(values) {
+    try {
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      let params = [],
+        items = [],
+        head = {};
+      Object.keys(values).map((k) => {
+        if (k == 'onlCgreportItemList') {
+          items = values[k];
+        } else if (k == 'onlCgreportParamList') {
+          params = values[k];
+        } else {
+          head[k] = values[k];
+        }
+      });
+      let obj = { head, params, items };
+      console.log('报表配置保存请求参数', obj);
+      await saveOrUpdate(obj, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  //解析SQL
+  function handleSQLAnalyze() {
+    setModalProps({ confirmLoading: true });
+    validateFields(['cgrSql', 'dbSource'])
+      .then((values) => {
+        let { cgrSql, dbSource } = values;
+        let urlParam = 'sql=' + encodeURIComponent(cgrSql);
+        if (dbSource) {
+          urlParam += '&dbKey=' + dbSource;
+        }
+        console.log('urlParam----', urlParam);
+        analyzeSql(urlParam).then((res) => {
+          if (res) {
+            createMessage.success('解析成功');
+            let { fields, params } = res;
+            let newFields = fields.filter((item) => item.fieldName != '__row_number__');
+            // 从vxeTable中获取当前数据
+            let itemDataSource = onlCgreportItem.value.getTableData()
+            // 合并后台数据
+            let newItemDataList = getTabData(itemDataSource, newFields || [], 'fieldName');
+            // 排序数据
+            newItemDataList = newItemDataList.sort((a, b) => a.orderNum - b.orderNum);
+            onlCgreportItemTable.dataSource = newItemDataList;
+
+            let paramDataSource = onlCgreportParam.value.getTableData()
+            let newParamList = getTabData(paramDataSource, params || [], 'paramName');
+            newParamList = newParamList.sort((a, b) => a.orderNum - b.orderNum);
+            onlCgreportParamTable.dataSource = newParamList;
+          }
+        });
+      })
+      .catch(() => {
+        console.log('解析失败');
+      })
+      .finally(() => {
+        setModalProps({ confirmLoading: false });
+      });
+  }
+
+  /**
+   * 获取tab的table的datasource
+   * @param old_arr 原datasource
+   * @param new_arr 从数据库查询出来的datasource
+   * @param columnName 字段列
+   */
+  function getTabData(old_arr: any[], new_arr: any[], columnName: string): any[] {
+    if (old_arr.length > 0) {
+      let need: any[] = [],
+        field_arr: any[] = [],
+        max_order = 1;
+      for (let t of new_arr) {
+        for (let o of old_arr) {
+          if (o[columnName] == t[columnName]) {
+            need.push(o);
+            field_arr.push(t[columnName]);
+            if (o.orderNum > max_order) {
+              max_order = o.orderNum;
+            }
+            break;
+          }
+        }
+      }
+      for (let t of new_arr) {
+        if (field_arr.indexOf(t[columnName]) < 0) {
+          t.orderNum = ++max_order;
+          need.push(t);
+        }
+      }
+      return need;
+    } else {
+      let max_order = 0;
+      for (let t of new_arr) {
+        if (!t.orderNum) {
+          t.orderNum = ++max_order;
+        }
+      }
+      return new_arr;
+    }
+  }
+
+  // 手动设置table的数据 解析后调用
+  async function setDataSource(tableRef, data) {
+    await nextTick();
+    await tableRef.value!.getXTable().insert(data);
+    await nextTick();
+  }
+</script>
+<style lang='less' scoped>
+  // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+  form {
+    padding-right: 22px;
+  }
+  :deep(.ant-tabs-content-holder) {
+    padding: 0 10px;
+  }
+  // update-end--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+  
+  // ==================== 滚动条优化 - 开始 ====================
+  // 目的：美化表格滚动条，减少视觉干扰
+  // 效果：更细的滚动条，更美观的样式
+  // 时间：2024年优化
+  :deep(.vxe-table--body-wrapper) {
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+      border-radius: 3px;
+      
+      &:hover {
+        background: #a8a8a8;
+      }
+    }
+    
+    &::-webkit-scrollbar-corner {
+      background: #f1f1f1;
+    }
+  }
+  
+  // 优化表格容器，确保内容不会溢出
+  :deep(.vxe-table) {
+    .vxe-table--body-wrapper {
+      overflow: auto;
+    }
+  }
+  // ==================== 滚动条优化 - 结束 ====================
+</style>
diff --git a/src/views/super/online/cgreport/demo/ModalFormDemo.vue b/src/views/super/online/cgreport/demo/ModalFormDemo.vue
new file mode 100644
index 0000000..def058a
--- /dev/null
+++ b/src/views/super/online/cgreport/demo/ModalFormDemo.vue
@@ -0,0 +1,79 @@
+<template>
+  <div style="margin: 50px auto; width: 800px">
+    <BasicForm @register="registerForm" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { defHttp } from '/@/utils/http/axios';
+  import { pick } from 'lodash-es';
+
+  const getSchemas = (): FormSchema[] => {
+    return [
+      {
+        field: 'name',
+        component: 'Input',
+        label: '名称',
+      },
+      {
+        field: 'age',
+        component: 'InputNumber',
+        label: '年龄',
+        componentProps: {
+          style: {
+            width: '100%',
+          },
+        },
+      },
+      {
+        field: 'sex',
+        label: '性别',
+        component: 'JDictSelectTag',
+        componentProps: {
+          dictCode: 'sex',
+        },
+      },
+      {
+        field: 'birthday',
+        component: 'DatePicker',
+        label: '生日',
+        componentProps: {
+          valueFormat: 'YYYY-MM-DD',
+          style: {
+            width: '100%',
+          },
+        },
+      },
+      {
+        field: 'email',
+        component: 'Input',
+        label: '邮箱',
+      },
+    ];
+  };
+
+  export default defineComponent({
+    components: { BasicForm },
+    props: ['id'],
+    setup(props) {
+      //表单配置
+      const [registerForm, { setFieldsValue }] = useForm({
+        schemas: getSchemas(),
+        showActionButtonGroup: false,
+        baseColProps: { span: 24 },
+      });
+      let params = { id: props.id };
+      defHttp.get({ url: '/test/jeecgDemo/queryById', params }, { isTransformResponse: false }).then((res) => {
+        if (res.success) {
+          let values = pick(res.result, 'name', 'age', 'birthday', 'sex', 'email');
+          setFieldsValue(values);
+        }
+      });
+
+      return {
+        registerForm,
+      };
+    },
+  });
+</script>
diff --git a/src/views/super/online/cgreport/index.vue b/src/views/super/online/cgreport/index.vue
new file mode 100644
index 0000000..8bcd465
--- /dev/null
+++ b/src/views/super/online/cgreport/index.vue
@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" v-bind="$attrs">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">录入</a-button>
+        <a-button preIcon="bxs:bot" type="primary" style="margin-right: 5px" @click="onCreateByAi">AI生成报表</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <CgreportModal @register="registerModal" @success="handleSuccess"></CgreportModal>
+    <!-- 通过Ai生成报表 -->
+    <CgreportAigcModal @register="registerCgreportAigcModal" @generate="onAigcGenerate" />
+  </div>
+</template>
+
+<script lang="ts" name="online-cgreport" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columns, searchFormSchema } from './cgreport.data';
+  import { list, deleteOne, batchDelete, getReportParam } from './cgreport.api';
+  import { useModal } from '/@/components/Modal';
+  import CgreportModal from './components/CgreportModal.vue';
+  import CgreportAigcModal from "./components/CgreportAigcModal.vue";
+  import Clipboard from 'clipboard';
+  import { useRouter } from 'vue-router';
+  import { buildUUID } from '/@/utils/uuid';
+  let router = useRouter();
+  const [registerModal, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const {
+    prefixCls,
+    tableContext,
+    createMessage: $message,
+    createConfirm: $confirm,
+  } = useListPage({
+    designScope: 'online-cgreport-list',
+    pagination: true,
+    tableProps: {
+      title: 'Online报表',
+      api: list,
+      rowKey: 'id',
+      columns: columns,
+      formConfig: {
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        schemas: searchFormSchema,
+      },
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  // 注册Aigc弹窗
+  const [registerCgreportAigcModal, cgreportAigcModal] = useModal();
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+  /**
+   * 编辑事件 e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+   */
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+
+  function onCreateByAi() {
+    cgreportAigcModal.openModal(true, {});
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, () => {
+      reload();
+      selectedRowKeys.value = [];
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+  }
+
+  function onAigcGenerate(aigcResult: Recordable) {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+      aigc: aigcResult
+    });
+  }
+
+  /**
+   * 操作栏
+   */
+  function getAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '功能测试',
+        class: ['low-app-hide'],
+        onClick: () => onShowList(record.id),
+      },
+      {
+        label: '配置地址',
+        class: ['low-app-hide'],
+        onClick: () => onShowOnlineUrl(record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 功能测试
+   * @param id
+   */
+  function onShowList(id) {
+    router.push({ path: '/online/cgreport/' + id });
+  }
+
+  /**
+   * 配置地址
+   * @param record
+   */
+  function onShowOnlineUrl(record) {
+    let id = record.id;
+    let baseUrl = `/online/cgreport/${id}`;
+    // 生成插入菜单sql
+    let insertMenuSql = `INSERT INTO sys_permission(id, parent_id, name, url, component, component_name, redirect, menu_type, perms, perms_type, sort_no, always_show, icon, is_route, is_leaf, keep_alive, hidden, hide_tab, description, status, del_flag, rule_flag, create_by, create_time, update_by, update_time, internal_or_external) 
+                         VALUES ('${buildUUID()}', NULL, '${record.name}', '${baseUrl}', '1', 'OnlineAutoList', NULL, 0, NULL, '1', 0.00, 0, NULL, 0, 1, 0, 0, 0, NULL, '1', 0, 0, 'admin', null, NULL, NULL, 0)`;
+    
+    getReportParam(id)
+      .then((arr) => {
+        // 处理参数
+        let urlParam = '';
+        if (arr && arr.length > 0) {
+          for (let i of arr) {
+            urlParam += i.paramName + '=${' + i.paramName + '}&';
+          }
+        }
+        if (urlParam.length > 0) {
+          urlParam = urlParam.substring(0, urlParam.length - 1);
+          baseUrl += '?' + urlParam;
+        }
+      })
+      .catch(() => {
+        $message.warning('获取参数失败!');
+      })
+      .finally(() => {
+        // 无论获取失败与否 都弹框显示跳转地址
+        $confirm({
+          iconType: 'info',
+          width: 500,
+          title: `菜单链接【${record.name}】`,
+          content: baseUrl,
+          closable: true,
+          maskClosable: true,
+          cancelText: '复制SQL',
+          okText: '复制URL',
+          cancelButtonProps: {
+            class: 'copy-this-sql',
+            'data-clipboard-text': insertMenuSql,
+          } as any,
+          okButtonProps: {
+            class: 'copy-this-text',
+            'data-clipboard-text': baseUrl,
+          } as any,
+          onOk() {
+            return new Promise((resolve: any) => {
+              const clipboard = new Clipboard('.copy-this-text');
+              clipboard.on('success', () => {
+                clipboard.destroy();
+                $message.success('复制URL成功');
+                resolve();
+              });
+              clipboard.on('error', () => {
+                $message.error('该浏览器不支持自动复制');
+                clipboard.destroy();
+                resolve();
+              });
+            });
+          },
+          onCancel() {
+            return new Promise((resolve: any) => {
+              const clipboard = new Clipboard('.copy-this-sql');
+              clipboard.on('success', () => {
+                clipboard.destroy();
+                $message.success('复制插入菜单SQL成功');
+                resolve();
+              });
+              clipboard.on('error', () => {
+                $message.error('该浏览器不支持自动复制');
+                clipboard.destroy();
+                resolve();
+              });
+            });
+          },
+        });
+      });
+  }
+  
+  // 抛出方法，让外部可以调用
+  // 目前【lowApp】页面用到
+  defineExpose({
+    handleAdd,
+  })
+
+</script>
diff --git a/src/views/super/online/cgreport/router/cgreportRouter.ts b/src/views/super/online/cgreport/router/cgreportRouter.ts
new file mode 100644
index 0000000..bda2b7c
--- /dev/null
+++ b/src/views/super/online/cgreport/router/cgreportRouter.ts
@@ -0,0 +1,24 @@
+import {router} from '/@/router';
+import {LAYOUT} from '/@/router/constant';
+
+export function registerCgreportRouter() {
+  router.addRoute({
+    path: '/online-auto-cgreport-router',
+    name: 'onl-auto-cgreport-router',
+    component: LAYOUT,
+    redirect: '/online/cgreport',
+    meta: {
+      title: 'OnlCgreportAuto',
+      hideMenu: true,
+      hideBreadcrumb: true,
+    },
+    children: [
+      {
+        path: '/online/cgreport/:id',
+        name: 'OnlCgReportList',
+        component: () => import('../auto/OnlCgReportList.vue'),
+        meta: {title: 'AUTO在线报表'},
+      },
+    ],
+  })
+}
diff --git a/src/views/super/online/graphreport/GraphreportList.vue b/src/views/super/online/graphreport/GraphreportList.vue
new file mode 100644
index 0000000..4837000
--- /dev/null
+++ b/src/views/super/online/graphreport/GraphreportList.vue
@@ -0,0 +1,206 @@
+<template>
+  <div :class="prefixCls">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" v-bind="$attrs">
+      <template #tableTitle>
+        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
+        <a-button preIcon="bxs:bot" type="primary" style="margin-right: 5px" @click="onCreateByAi">AI生成图表</a-button>
+        <ExcelButton :config="excelConfig" />
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onBatchDelete">
+                <a-icon type="delete" />
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <a-icon type="down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+  <GraphreportModal @register="registerFormModal" @success="reload" />
+  <!-- 通过Ai生成图表 -->
+  <GraphreportAigcModal @register="registerAigcModal" @generate="onAigcGenerate" />
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent, h } from 'vue';
+  import { router } from '/@/router';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { doBatchDelete, list, Api, queryParamsList } from './graphreport.api';
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import ExcelButton from '/@/components/jeecg/ExcelButton.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useCopyModal } from '../cgform/hooks/useCopyCgformModal';
+  import GraphreportModal from './components/GraphreportModal.vue';
+  import GraphreportAigcModal from "./components/GraphreportAigcModal.vue";
+
+  // noinspection JSUnusedGlobalSymbols
+  export default defineComponent({
+    name: 'GraphreportList',
+    components: {GraphreportAigcModal, ExcelButton, BasicTable, TableAction, GraphreportModal },
+    setup() {
+      // 列表页面公共参数、方法
+      const { prefixCls, doRequest, doDeleteRecord, tableContext } = useListPage({
+        designScope: 'online-graphreport-list',
+        tableProps: {
+          api: list,
+          columns: [
+            { title: '图表名称', dataIndex: 'name' },
+            { title: '编码', dataIndex: 'code' },
+            { title: '数据', dataIndex: 'cgrSql' },
+            {
+              title: '数据源',
+              dataIndex: 'dbSource',
+              customRender: ({ text, record }) => {
+                return record['dbSource_dictText'] ? record['dbSource_dictText'] : text;
+              },
+            },
+            { title: 'Y轴字段', dataIndex: 'yaxisField' },
+            { title: 'X轴字段', dataIndex: 'xaxisField' },
+          ],
+          formConfig: {
+            //labelWidth: 200,
+            schemas: [
+              { label: '图表名称', field: 'name', component: 'JInput' },
+              { label: '编码', field: 'code', component: 'JInput' },
+            ],
+          },
+        },
+      });
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+      /**
+       * excel导入导出配置
+       * e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+       */
+      const excelConfig = {
+        export: {
+          name: 'Online图表',
+          url: Api.exportXls,
+        },
+        import: {
+          url: Api.importXls,
+          success: reload,
+        },
+      };
+      // 注册编辑弹窗
+      const [registerFormModal, formModal] = useModal();
+      // 注册Aigc弹窗
+      const [registerAigcModal, aigcModal] = useModal();
+
+      function onAdd() {
+        formModal.openModal(true, { isUpdate: false });
+      }
+
+      function onCreateByAi() {
+        aigcModal.openModal(true, {});
+      }
+
+      function onAigcGenerate(aigcResult: Recordable) {
+        formModal.openModal(true, { isUpdate: false, aigc: aigcResult });
+      }
+
+      function onEdit(record) {
+        formModal.openModal(true, { isUpdate: true, record });
+      }
+
+      // 批量删除事件
+      async function onBatchDelete() {
+        doRequest(() => doBatchDelete(selectedRowKeys.value));
+      }
+
+      // 功能测试
+      function onGoToTest(record) {
+        router.push('/online/graphreport/chart/' + record.id);
+      }
+
+      const { createCopyModal } = useCopyModal();
+
+      // 显示配置地址弹窗
+      async function onShowOnlineUrl(record) {
+        let baseUrl = `/online/graphreport/chart/${record.id}`;
+        let copyText = ref(baseUrl);
+        createCopyModal({
+          title: `配置地址【${record.name}】`,
+          content: () => h('div', {}, copyText.value),
+          copyText: copyText,
+          copyTitle: `${record.name}`,
+          componentName: 'GraphreportAutoChart'
+        });
+        let result = await queryParamsList(record.id);
+        if (result && result.length > 0) {
+          let str = '?';
+          result.forEach((item) => {
+            str += item.paramName + '=${' + item.paramName + '}&';
+          });
+          str = str.substring(0, str.length - 1);
+          copyText.value = `${baseUrl}${str}`;
+        }
+      }
+
+      /**
+       * 操作栏
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '编辑',
+            onClick: () => onEdit(record),
+          },
+        ];
+      }
+
+      /**
+       * 下拉操作栏
+       */
+      function getDropDownAction(record): ActionItem[] {
+        return [
+          {
+            label: '功能测试',
+            class: ['low-app-hide'],
+            onClick: () => onGoToTest(record),
+          },
+          {
+            label: '配置地址',
+            class: ['low-app-hide'],
+            onClick: () => onShowOnlineUrl(record),
+          },
+          {
+            label: '删除',
+            popConfirm: {
+              title: '确定删除吗？',
+              placement: 'left',
+              confirm: () => doDeleteRecord(() => doBatchDelete([record.id])),
+            },
+          },
+        ];
+      }
+
+      return {
+        reload,
+        prefixCls,
+        rowSelection,
+        selectedRowKeys,
+        onAdd,
+        getTableAction,
+        getDropDownAction,
+        onBatchDelete,
+        registerTable,
+        registerFormModal,
+        excelConfig,
+        registerAigcModal,
+        onCreateByAi,
+        onAigcGenerate,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/graphreport/auto/GraphreportAutoChart.vue b/src/views/super/online/graphreport/auto/GraphreportAutoChart.vue
new file mode 100644
index 0000000..86b8fba
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/GraphreportAutoChart.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="p-2">
+    <a-spin :spinning="loading">
+      <ErrorTip v-if="errorTip" :tip="errorTip" />
+      <template v-else>
+        <!--update-begin--author:liaozhiyang---date:20240316---for：【QQYUN-8426】图表查询区域适配暗黑色-->
+        <Card v-if="showSearchField">
+          <BasicForm @register="registerSearchForm" :model="searchFormModal" />
+        </Card>
+        <!--update-end--author:liaozhiyang---date:20240316---for：【QQYUN-8426】图表查询区域适配暗黑色-->
+        <ErrorTip v-if="errors.resultIsEmpty" tip="没有查询到任何数据" />
+        <ChartAutoRender v-else :chartsData="chartsData" />
+      </template>
+    </a-spin>
+  </div>
+</template>
+
+<script lang="ts">
+  import {computed, defineComponent, nextTick, provide, reactive, ref, watch} from 'vue';
+  import { router } from '/@/router';
+  import ErrorTip from './components/ErrorTip.vue';
+  import ChartAutoRender from './components/render/ChartAutoRender.vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
+  import { getChartsData, getParamsInfo } from '../graphreport.api';
+  import { useParseFormSchemas } from './hooks/useParseFormSchemas';
+  import { isArray } from '/@/utils/is';
+  import { formatToDate } from '/@/utils/dateUtil';
+  import { Card } from "ant-design-vue"
+
+  // noinspection JSUnusedGlobalSymbols
+  export default defineComponent({
+    name: 'GraphreportAutoChart',
+    components: { BasicForm, ErrorTip, ChartAutoRender, Card },
+    props: {},
+    setup() {
+      provide('setErrorTip', setErrorTip);
+      const $route = router.currentRoute;
+      const loading = ref(false);
+      const code = ref<string>();
+      const errorTip = ref<Nullable<string>>(null);
+      // 根据不同的运行时错误显示不同的提示信息  e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+      const errors = reactive({ resultIsEmpty: false });
+      const chartsData = ref();
+      // 查询条件（map根据code隔离）
+      const paramsMap = reactive({});
+      // 用户自定义查询条件（map根据code隔离）
+      const selfParamsMap = reactive({});
+      // 查询条件form（map根据code隔离）
+      const searchFormMap = reactive({});
+      // 多页面params缓存
+      const paramsRef = getPageComputed<string>(paramsMap, '');
+      // 用户自定义查询条件
+      const selfParamsRef = getPageComputed<Nullable<Recordable>>(selfParamsMap);
+      // 查询条件form
+      const searchFormModal = getPageComputed(searchFormMap, {});
+      // 是否显示查询条件
+      const showSearchField = ref(false);
+      // 自适应列配置
+      const adaptiveColProps = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };
+      const [registerSearchForm, searchForm] = useForm({
+        schemas: [],
+        // 紧凑模式
+        compact: true,
+        // label默认宽度
+        labelWidth: 120,
+        // 按下回车后自动提交
+        autoSubmitOnEnter: true,
+        // 默认 row 配置
+        rowProps: { gutter: 8 },
+        // 默认 col 配置
+        baseColProps: {
+          ...adaptiveColProps,
+        },
+        labelCol: { xs: 24, sm: 8, md: 6, lg: 8, xl: 6, xxl: 6 },
+        wrapperCol: {},
+        // 是否显示 展开/收起 按钮
+        showAdvancedButton: true,
+        // 超过指定列数默认折叠
+        autoAdvancedCol: 3,
+        // 操作按钮配置
+        actionColOptions: {
+          ...adaptiveColProps,
+          style: { textAlign: 'left' },
+        },
+        resetFunc: onReset,
+        submitFunc: onSubmit,
+      });
+
+      // 【VUEN-1554】缓存路由走Activated，没缓存的走Mounted，均只走一次
+      onMountedOrActivated(() => {
+        code.value = $route.value.params.code as string;
+      });
+
+      // 刷新参数放到这里去触发，就可以刷新相同界面了
+      watch(
+        code,
+        () => {
+          selfParamsRef.value = null;
+          loadChartsData();
+        },
+        { immediate: true }
+      );
+
+      function setErrorTip(tip: string | null) {
+        errorTip.value = tip;
+      }
+
+      // 加载图表数据
+      async function loadChartsData() {
+        loading.value = true;
+        if (!code.value) {
+          loading.value = false;
+          return false;
+        }
+        let params = { id: code.value, params: paramsRef.value };
+        // 查询图表参数
+        if (selfParamsRef.value == null) {
+          selfParamsRef.value = {};
+          try {
+            let result = await getParamsInfo({ headId: params.id });
+            if (result && result.length > 0) {
+              for (let i of result) {
+                selfParamsRef.value['self_' + i.paramName] = !$route.value.query[i.paramName] ? '' : $route.value.query[i.paramName];
+              }
+            }
+          } catch {
+            return;
+          }
+        }
+        try {
+          let result = await getChartsData({ ...params, ...selfParamsRef.value });
+          let { head, data, items, dictOptions } = result;
+          if (data && data.length === 0) {
+            errors.resultIsEmpty = true;
+          } else {
+            errors.resultIsEmpty = false;
+            chartsData.value = { head, data, items, dictOptions };
+            parseChartsData();
+          }
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      function getPageComputed<T = Recordable>(map, defVal?: T) {
+        return computed<T>({
+          get(): T {
+            if (map[code.value!] == null) {
+              map[code.value!] = defVal;
+            }
+            return map[code.value!];
+          },
+          set: (val: T) => (map[code.value!] = val),
+        });
+      }
+
+      const { parseFormSchemas } = useParseFormSchemas(chartsData, showSearchField);
+
+      // 解析图表数据
+      async function parseChartsData() {
+        let schemas = await parseFormSchemas();
+        if (schemas && schemas.length>0) {
+          nextTick(() => {
+            searchForm.resetSchema(schemas);
+          });
+        }
+      }
+
+      async function onReset() {
+        paramsRef.value = '';
+        loadChartsData();
+      }
+
+      //表单提交
+      async function onSubmit() {
+        const data = await searchForm.validate();
+        let { items } = chartsData.value;
+        let params: Recordable[] = [];
+        for (let field of items) {
+          if (field.searchFlag !== 'Y') continue;
+          let values: any = null;
+          if (!field.searchMode) field.searchMode = 'single';
+          if (field.searchMode === 'single') {
+            // 单条件查询
+            values = data[field.fieldName];
+          } else {
+            // 范围查询
+            let _begin = data[field.fieldName];
+            let _end = data[`${field.fieldName}_end`];
+            values = [_begin, _end];
+          }
+          // 日期格式化
+          if (field.fieldType === 'Date') {
+            values = formatDate(values);
+          }
+          // 封装成 params
+          if (values != null && (values[0] != null || values[1] != null)) {
+            params.push({
+              value: values,
+              fieldTxt: field.fieldTxt,
+              fieldName: field.fieldName,
+              fieldType: field.fieldType,
+              searchMode: field.searchMode,
+            });
+          }
+        }
+        paramsRef.value = encodeURIComponent(JSON.stringify(params));
+        loadChartsData();
+      }
+
+      // 格式化日期
+      function formatDate(values) {
+        if (values) {
+          if (isArray(values)) {
+            if (values[0]) {
+              values[0] = formatToDate(values[0]);
+            }
+            if (values[1]) {
+              values[1] = formatToDate(values[1]);
+            }
+          } else {
+            return formatToDate(values);
+          }
+        }
+        return values;
+      }
+
+      return {
+        loading,
+        errors,
+        errorTip,
+        chartsData,
+        showSearchField,
+        searchFormModal,
+        registerSearchForm,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .ant-card {
+    margin-bottom: 20px;
+    :deep(.ant-card-body){
+      padding: 10px 20px;
+    }
+
+    :deep(.ant-calendar-picker) {
+      width: 100%;
+    }
+
+    // 范围查询
+    :deep(.range-query) {
+      .range-span {
+        width: 12px;
+        text-align: center;
+        display: inline-block;
+      }
+
+      .ant-form-item-control {
+        .ant-calendar-picker {
+          width: calc(50% - 8px);
+
+          .ant-input {
+            width: 100%;
+          }
+        }
+
+        .ant-input,
+        .ant-input-number {
+          width: calc(50% - 8px);
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/super/online/graphreport/auto/components/ErrorTip.vue b/src/views/super/online/graphreport/auto/components/ErrorTip.vue
new file mode 100644
index 0000000..2f6d588
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/components/ErrorTip.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { defineComponent, h } from 'vue';
+  import { Empty } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'ErrorTip',
+    props: {
+      // 提示文本
+      tip: String,
+      // 外层标签名
+      tag: { type: String, default: 'div' },
+    },
+    render() {
+      return h(
+        this.tag,
+        {
+          class: ['error-tip'],
+        },
+        h(Empty, { description: this.tip })
+      );
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .error-tip {
+    padding: 20px;
+    background: white;
+    text-align: center;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/super/online/graphreport/auto/components/render/ChartAutoRender.vue b/src/views/super/online/graphreport/auto/components/render/ChartAutoRender.vue
new file mode 100644
index 0000000..33447aa
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/components/render/ChartAutoRender.vue
@@ -0,0 +1,74 @@
+<template>
+  <ChartTabsRender v-if="isTabs" v-bind="templateProps" />
+  <ChartSingleRender v-else-if="isSingle" v-bind="templateProps" />
+  <ChartDoubleRender v-else-if="isDouble" v-bind="templateProps" />
+  <!--  <ChartCombinationRender v-else-if="isCombination" v-bind="templateProps"/>-->
+</template>
+
+<script lang="ts">
+  import { ref, watch, computed, inject, defineComponent } from 'vue';
+  import ErrorTip from '../ErrorTip.vue';
+  // tabs 布局模板
+  import ChartTabsRender from './ChartTabsRender.vue';
+  // 单排布局模板
+  import ChartSingleRender from './ChartSingleRender.vue';
+  // 双排布局模板
+  import ChartDoubleRender from './ChartDoubleRender.vue';
+  // 组合布局
+  // import ChartCombinationRender from './ChartCombinationRender.vue'
+
+  export default defineComponent({
+    name: 'ChartAutoRender',
+    components: { ErrorTip, ChartTabsRender, ChartSingleRender, ChartDoubleRender },
+    props: {
+      // 图表数据
+      chartsData: { type: Object, default: null },
+      // 是否是组合模式
+      isCombination: { type: Boolean, default: false },
+    },
+    setup(props) {
+      const setErrorTip = inject('setErrorTip') as Fn;
+      // 图表标题
+      const chartTitle = ref(null);
+      // 展示模板
+      const displayTemplate = ref('tab');
+      // 数据源
+      const dataSource = ref<Recordable>({});
+      const isTabs = computed(() => displayTemplate.value === 'tab');
+      const isSingle = computed(() => displayTemplate.value === 'single');
+      const isDouble = computed(() => displayTemplate.value === 'double');
+      // const isCombination = computed(() => displayTemplate.value === 'combination')
+      const templateProps = computed(() => {
+        return {
+          // 组件模式下不显示 title
+          title: props.isCombination ? null : chartTitle.value,
+          chartsData: props.chartsData,
+          isCombination: props.isCombination,
+          onError: (tip) => setErrorTip(tip),
+        };
+      });
+
+      watch(
+        () => props.chartsData,
+        () => parseChartsData(props.chartsData),
+        { immediate: true }
+      );
+
+      // 解析图表数据
+      function parseChartsData(data) {
+        if (data) {
+          chartTitle.value = data.head.name;
+          displayTemplate.value = data.head.displayTemplate;
+          dataSource.value = data;
+          if (!isTabs.value && !isDouble.value && !isSingle.value) {
+            setErrorTip('未识别的布局模式');
+          }
+        }
+      }
+
+      return { isTabs, isSingle, isDouble, templateProps };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/graphreport/auto/components/render/ChartDoubleRender.vue b/src/views/super/online/graphreport/auto/components/render/ChartDoubleRender.vue
new file mode 100644
index 0000000..ee39013
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/components/render/ChartDoubleRender.vue
@@ -0,0 +1,57 @@
+<template>
+  <div :id="printId">
+    <a-card v-bind="chartCardProps">
+      <template #extra>
+        <div :ignore-print="true">
+          <a-button v-if="showPrint" type="primary" ghost @click="onPrint">打印</a-button>
+          <a-button v-if="showDetail" type="primary" ghost @click="onGoToDetail">详情</a-button>
+        </div>
+      </template>
+      <!-- 展示双列数据并排序 -->
+      <a-row v-for="(type, index) of chartTypes" :key="type + index">
+        <template v-if="index % 2 === 0" v-for="idx of [index, index + 1]" :key="idx">
+          <a-col v-if="idx < chartTypes.length" v-bind="buildSpan(idx)">
+            <LineMulti v-if="chartTypes[idx] === 'line'" v-bind="lineProps" />
+            <BarMulti v-if="chartTypes[idx] === 'bar'" v-bind="barProps" />
+            <Pie v-if="chartTypes[idx] === 'pie'" v-bind="pieProps" />
+          </a-col>
+        </template>
+      </a-row>
+    </a-card>
+    <a-card v-if="hasTable" v-bind="tableCardProps">
+      <a-row>
+        <a-col :ignore-print="true">
+          <a-button v-bind="exportButtonProps" @click="onExportXls">{{ exportButtonProps.text }}</a-button>
+          <a-switch v-bind="pageSwitchProps" v-model:checked="pageSwitch" />
+        </a-col>
+        <a-col>
+          <a-table v-bind="tableProps" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { ChartRenderCommon, useChartRender } from '../../hooks/useChartRender';
+
+  export default defineComponent({
+    name: 'ChartTabsRender',
+    ...ChartRenderCommon,
+    setup(props, ctx) {
+      let setup = useChartRender(props, ctx);
+
+      function buildSpan(idx) {
+        let length = setup.chartTypes.value.length;
+        // 如果当前项是最后一个且length是奇数，则扩展到全屏
+        let span = idx + 1 === length && length % 2 !== 0 ? 24 : 12;
+        return { xs: 24, md: span };
+      }
+
+      return { ...setup, buildSpan };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/graphreport/auto/components/render/ChartSingleRender.vue b/src/views/super/online/graphreport/auto/components/render/ChartSingleRender.vue
new file mode 100644
index 0000000..6ec9adb
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/components/render/ChartSingleRender.vue
@@ -0,0 +1,42 @@
+<template>
+  <div :id="printId">
+    <a-card v-bind="chartCardProps">
+      <template #extra>
+        <div :ignore-print="true">
+          <a-button v-if="showPrint" type="primary" ghost @click="onPrint">打印</a-button>
+          <a-button v-if="showDetail" type="primary" ghost @click="onGoToDetail">详情</a-button>
+        </div>
+      </template>
+      <!-- 排序显示图表 -->
+      <template v-for="(type, index) of chartTypes" :key="index">
+        <LineMulti v-if="type === 'line'" v-bind="lineProps" />
+        <BarMulti v-if="type === 'bar'" v-bind="barProps" />
+        <Pie v-if="type === 'pie'" v-bind="pieProps" />
+      </template>
+    </a-card>
+    <!-- 数据列表 -->
+    <a-card v-if="hasTable" v-bind="tableCardProps">
+      <a-row>
+        <a-col :ignore-print="true">
+          <a-button v-bind="exportButtonProps" @click="onExportXls">{{ exportButtonProps.text }}</a-button>
+          <a-switch v-bind="pageSwitchProps" v-model:checked="pageSwitch" />
+        </a-col>
+        <a-col>
+          <a-table v-bind="tableProps" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ChartRenderCommon, useChartRender } from '../../hooks/useChartRender';
+
+  export default {
+    name: 'ChartSingleRender',
+    ...ChartRenderCommon,
+    setup: useChartRender,
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/graphreport/auto/components/render/ChartTabsRender.vue b/src/views/super/online/graphreport/auto/components/render/ChartTabsRender.vue
new file mode 100644
index 0000000..4548bde
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/components/render/ChartTabsRender.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :id="printId">
+    <a-card v-bind="chartCardProps">
+      <template #extra>
+        <div :ignore-print="true">
+          <a-button v-if="showPrint" type="primary" ghost @click="onPrint">打印</a-button>
+          <a-button v-if="showDetail" type="primary" ghost @click="onGoToDetail">详情</a-button>
+        </div>
+      </template>
+      <div>
+        <a-radio-group buttonStyle="solid" v-model:value="activeKey" :ignore-print="true">
+          <!-- 排序显示图标 -->
+          <template v-for="(type, index) of chartTypes">
+            <template v-if="type === 'line'">
+              <a-radio-button v-if="hasLine" value="line" :key="index">曲线图</a-radio-button>
+            </template>
+            <template v-if="type === 'bar'">
+              <a-radio-button v-if="hasBar" value="bar" :key="index">柱状图</a-radio-button>
+            </template>
+            <template v-if="type === 'pie'">
+              <a-radio-button v-if="hasPie" value="pie" :key="index">饼图</a-radio-button>
+            </template>
+          </template>
+        </a-radio-group>
+        <a-tabs v-model:activeKey="activeKey" size="small" :tabBarStyle="{ display: 'none' }">
+          <a-tab-pane v-if="hasLine" tab="曲线图" key="line">
+            <LineMulti v-bind="lineProps" />
+          </a-tab-pane>
+          <a-tab-pane v-if="hasBar" tab="柱状图" key="bar">
+            <BarMulti v-bind="barProps" />
+          </a-tab-pane>
+          <a-tab-pane v-if="hasPie" tab="饼图" key="pie">
+            <Pie v-bind="pieProps" />
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+    <a-card v-if="hasTable" v-bind="tableCardProps">
+      <a-row>
+        <a-col :ignore-print="true">
+          <a-button v-bind="exportButtonProps" @click="onExportXls">{{ exportButtonProps.text }}</a-button>
+          <a-switch v-bind="pageSwitchProps" v-model:checked="pageSwitch" />
+        </a-col>
+        <a-col>
+          <a-table v-bind="tableProps" />
+        </a-col>
+      </a-row>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { ChartRenderCommon, useChartRender } from '../../hooks/useChartRender';
+
+  export default {
+    name: 'ChartTabsRender',
+    ...ChartRenderCommon,
+    setup: useChartRender,
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/super/online/graphreport/auto/hooks/useChartRender.ts b/src/views/super/online/graphreport/auto/hooks/useChartRender.ts
new file mode 100644
index 0000000..cf22c8c
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/hooks/useChartRender.ts
@@ -0,0 +1,499 @@
+import { ref, watch, computed, reactive, ExtractPropTypes } from 'vue';
+import { router } from '/@/router';
+import { cloneDeep } from 'lodash-es';
+import { propTypes } from '/@/utils/propTypes';
+import { printJS } from '/@/hooks/web/usePrintJS';
+import { downloadByData } from '/@/utils/file/download';
+import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
+import Bar from '/@/components/chart/Bar.vue';
+import Pie from '/@/components/chart/Pie.vue';
+import BarMulti from '/@/components/chart/BarMulti.vue';
+import LineMulti from '/@/components/chart/LineMulti.vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { isFunction } from '/@/utils/is';
+
+export const ChartRenderProps = {
+  // 图表标题
+  title: propTypes.string,
+  // 图表数据
+  chartsData: propTypes.object,
+  // 是否运行在组件模式
+  asComponent: propTypes.bool.def(false),
+};
+type PropsType = ExtractPropTypes<typeof ChartRenderProps>;
+
+export const ChartRenderEmits = ['error'];
+export const ChartRenderComponents = {
+  LineMulti,
+  BarMulti,
+  Pie,
+  Bar,
+};
+
+export const ChartRenderCommon = {
+  components: ChartRenderComponents,
+  props: ChartRenderProps,
+  emits: ChartRenderEmits,
+};
+
+const errorText = {
+  jsonFormattingFailed: 'JSON字符串格式化失败',
+};
+
+export function useChartRender(props: PropsType, { emit }) {
+  const {
+    createMessage: $message,
+    createConfirm: $confirm,
+    createInfoModal: $info,
+    createErrorModal: $error,
+    createSuccessModal: $success,
+    createWarningModal: $warning,
+  } = useMessage();
+  const headId = ref(null);
+  // 图表的高度
+  const height = ref('400px');
+  // 当前显示的图表
+  const activeKey = ref('bar');
+  // 图表类型
+  const chartTypes = ref<string[]>([]);
+  // 是否开启分页
+  const pageSwitch = ref(true);
+  // 打印ID
+  const printId = computed(() => `print-content-${headId.value}`);
+  // 曲线图参数配置
+  const lineParams = reactive({
+    chartData: [] as Recordable[],
+  });
+  // 柱状图参数配置
+  const barParams = reactive({
+    chartData: [] as Recordable[],
+  });
+  // 饼图参数配置
+  const pieParams = reactive({
+    chartData: [] as Recordable[],
+  });
+  // 折柱图参数配置
+  const barLineParams = reactive({
+    dataSource: [] as Recordable[],
+  });
+  // 表格参数配置
+  const tableParams = reactive({
+    // 固定的列数据
+    fixedColumns: [
+      {
+        title: '#',
+        key: 'rowIndex',
+        width: '10%',
+        align: 'center',
+        customRender: function ({ record, index }) {
+          if (record.isTotal === true) {
+            return '总计';
+          } else {
+            return parseInt(index) + 1;
+          }
+        },
+      },
+    ],
+    columns: [] as Recordable[],
+    dataSource: [] as Recordable[],
+  });
+  // 用户JS增强的事件暂存处（通过headId隔离）
+  const extendJsHandlerIsolation = reactive<Recordable>({});
+  // 当前图表的JS增强
+  const extendJsHandler = computed<Nullable<Recordable>>({
+    get() {
+      if (headId.value == null) {
+        return null;
+      } else {
+        return extendJsHandlerIsolation[headId.value];
+      }
+    },
+    set(obj) {
+      if (headId.value != null) {
+        extendJsHandlerIsolation[headId.value] = obj;
+      }
+    },
+  });
+  // 是否包含曲线图
+  const hasLine = computed(() => chartTypes.value.includes('line'));
+  // 是否包含柱状图
+  const hasBar = computed(() => chartTypes.value.includes('bar'));
+  // 是否包含饼图
+  const hasPie = computed(() => chartTypes.value.includes('pie'));
+  // 是否包含数据表格
+  const hasTable = ref(false);
+  // 曲线图参数
+  const lineProps = computed(() => {
+    return {
+      type: 'line',
+      height: height.value,
+      chartData: lineParams.chartData,
+      onClick(params) {
+        // console.debug('lineProps-click: ', arguments)
+        emitExtendJsEvent(params);
+      },
+    };
+  });
+  // 柱状图参数
+  const barProps = computed(() => {
+    return {
+      height: height.value,
+      chartData: barParams.chartData,
+      onClick(params) {
+        // console.debug('barProps-click: ', arguments)
+        emitExtendJsEvent(params);
+      },
+    };
+  });
+  // 饼图参数
+  const pieProps = computed(() => {
+    return {
+      height: height.value,
+      chartData: pieParams.chartData,
+      onClick(params) {
+        // console.debug('pieProps-click: ', arguments)
+        emitExtendJsEvent(params);
+      },
+    };
+  });
+  // 折柱图参数
+  const barLineProps = computed(() => {
+    return {
+      height: height.value,
+      dataSource: barLineParams.dataSource,
+      onClick(_event, _chart) {
+        console.debug('barLineProps-click: ', arguments);
+      },
+    };
+  });
+  // 图表区域 ACard 标签的固定属性
+  const chartCardProps = computed(() => {
+    return {
+      title: props.title,
+      headStyle: { paddingLeft: '20px' },
+      bodyStyle: { padding: '10px' },
+      bordered: !props.asComponent,
+    };
+  });
+  // 数据表格区域 ACard 标签的固定属性
+  const tableCardProps = computed(() => {
+    return {
+      title: '数据明细',
+      headStyle: { paddingLeft: '20px' },
+      bodyStyle: { padding: '0' },
+      style: { marginTop: '20px' },
+      bordered: !props.asComponent,
+    };
+  });
+  // 导出按钮固定属性
+  const exportButtonProps = computed(() => {
+    return {
+      type: 'primary',
+      preIcon: 'ant-design:download',
+      text: '导出',
+      style: { margin: '12px' },
+    };
+  });
+  /** 分页开关固定属性 */
+  const pageSwitchProps = computed(() => {
+    return {
+      checkedChildren: '分页',
+      unCheckedChildren: '分页',
+      style: {
+        position: 'absolute',
+        top: '17px',
+        right: '12px',
+      },
+    };
+  });
+  // 数据表格的固定属性
+  const tableProps = computed(() => {
+    return {
+      size: 'middle',
+      rowKey: 'id',
+      // bordered: true,
+      pagination: pageSwitch.value ? { pageSize: 10 } : false,
+      columns: tableParams.columns,
+      dataSource: tableParams.dataSource,
+      style: { borderTop: '1px solid #e8e8e8' },
+    };
+  });
+  // 是否显示打印按钮
+  const showPrint = computed(() => !props.asComponent);
+  // 是否显示详情按钮
+  const showDetail = computed(() => props.asComponent);
+
+  watch(
+    () => props.chartsData,
+    (data) => parseChartsData(data),
+    { immediate: true }
+  );
+
+  /** 执行JS扩展 */
+  function executeExtendJs(headId, jsCode) {
+    if (!jsCode || !headId) {
+      return;
+    }
+    let onClick = { line: null, bar: null, pie: null };
+    // update-begin--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+    // 执行JS增强
+    new Function('onClick', 'headId', `${jsCode}`)(onClick, headId);
+    // update-end--author:liaozhiyang---date:20230904---for：【QQYUN-6390】eval替换成new Function，解决build警告
+    if (extendJsHandler.value == null) {
+      extendJsHandler.value = { click: onClick };
+    } else {
+      extendJsHandler.value.click = onClick;
+    }
+  }
+
+  // click 事件的 this 指向
+  const onClickThis = {
+    $router: router,
+    $http: defHttp,
+    $message,
+    $confirm,
+    $info,
+    $error,
+    $success,
+    $warning,
+  };
+
+  /** 触发JS增强里定义的事件 */
+  function emitExtendJsEvent(params) {
+    if (extendJsHandler.value != null) {
+      let clickType = params.seriesType;
+      let fn: Fn = extendJsHandler.value.click[clickType];
+      if (isFunction(fn)) {
+        fn.call(onClickThis, params);
+      }
+    }
+  }
+
+  /** 解析 chartData */
+  function parseChartsData(chartsData) {
+    if (chartsData == null) return null;
+    let { head, data, items, dictOptions } = chartsData;
+    if (head == null) return;
+    let { id, xaxisField, yaxisField, dataType, cgrSql, graphType, extendJs } = head;
+    headId.value = id;
+    executeExtendJs(id, extendJs);
+    try {
+      data = dataType === 'sql' || dataType === 'api' ? data : JSON.parse(cgrSql);
+    } catch {
+      emit('error', errorText.jsonFormattingFailed);
+      return;
+    }
+    let dictList = dictOptions[xaxisField];
+    let graphTypes = graphType.split(',');
+    activeKey.value = graphTypes[0];
+    if (activeKey.value == 'table') {
+      activeKey.value = graphTypes[1];
+    }
+    chartTypes.value = graphTypes;
+    let yaxisFields: string[] = yaxisField.split(',');
+    let fieldMap = new Map<string, Recordable>();
+    items.forEach((item) => fieldMap.set(item.fieldName, item));
+    // 判断是否定义了数据表格，如果定义了则删除该项，不参与动态渲染，只显示在最底部
+    let index = graphTypes.indexOf('table');
+    hasTable.value = index !== -1;
+    if (hasTable.value) {
+      graphTypes.splice(index, 1);
+    }
+    let parseOption = { graphTypes, data, items, fieldMap, xaxisField, yaxisFields, dictList, dictOptions };
+    parseLineData(parseOption);
+    parseBarData(parseOption);
+    parsePicData(parseOption);
+    parseTableData(parseOption);
+  }
+
+  type ParseDataOption = {
+    graphTypes: string[];
+    data: Recordable[];
+    items: Recordable[];
+    fieldMap: Map<string, Recordable>;
+    xaxisField: string;
+    yaxisFields: string[];
+    dictList;
+    dictOptions;
+  };
+
+  // 根据用户配置构造出通用数据
+  function parseCommonData(option: ParseDataOption) {
+    let { data, fieldMap, xaxisField, yaxisFields, dictList } = option;
+    let chartData: Recordable[] = [];
+    for (let yField of yaxisFields) {
+      for (let item of data) {
+        let name = item[xaxisField];
+        // 判断是否有字典
+        if (dictList) {
+          name = filterDictText(dictList, name);
+        }
+        chartData.push({
+          name: name,
+          value: item[yField],
+          type: fieldMap.get(yField)?.fieldTxt || yField,
+        });
+      }
+    }
+    return chartData;
+  }
+
+  // 根据用户配置构造出 lineChartData
+  function parseLineData(option: ParseDataOption) {
+    let { graphTypes } = option;
+    if (graphTypes.includes('line')) {
+      lineParams.chartData = parseCommonData(option);
+    }
+  }
+
+  // 根据用户配置构造出 barChartData
+  function parseBarData(option: ParseDataOption) {
+    let { graphTypes } = option;
+    if (graphTypes.includes('bar')) {
+      barParams.chartData = parseCommonData(option);
+    }
+  }
+
+  // 根据用户配置构造出 pieChartData
+  function parsePicData(option: ParseDataOption) {
+    let { graphTypes, data, xaxisField, yaxisFields, dictList } = option;
+    let yField = yaxisFields[0];
+    if (graphTypes.includes('pie')) {
+      let chartData: Recordable[] = [];
+      for (let item of data) {
+        let name = item[xaxisField];
+        // 判断是否有字典
+        if (dictList) {
+          name = filterDictText(dictList, name);
+        }
+        chartData.push({
+          name: name,
+          value: item[yField],
+        });
+      }
+      pieParams.chartData = chartData;
+    }
+  }
+
+  // 根据用户配置构造出 tableData
+  function parseTableData(option: ParseDataOption) {
+    let { data, items, xaxisField, yaxisFields, dictList, dictOptions } = option;
+    if (hasTable.value) {
+      tableParams.dataSource = data.map((item, index) => {
+        item.id = index;
+        let pieData = {
+          item: item[xaxisField],
+          count: item[yaxisFields[0]],
+        };
+        // 判断是否有字典
+        if (dictList) {
+          pieData.item = filterDictText(dictList, pieData.item);
+        }
+        return item;
+      });
+      // 根据用户配置构造出 tableColumns
+      let tableColumns: Recordable[] = cloneDeep(tableParams.fixedColumns);
+      let isTotals: string[] = [];
+      items.forEach((item) => {
+        if (item.isShow === 'Y') {
+          let column: Recordable = {
+            align: 'center',
+            width: '10%',
+            title: item.fieldTxt,
+            dataIndex: item.fieldName,
+          };
+          if (item.dictCode) {
+            column.customRender = ({ text }) => filterDictText(dictOptions[item.fieldName], text);
+          }
+          tableColumns.push(column);
+          // 判断是否计算总数
+          if (item.isTotal === 'Y') isTotals.push(item.fieldName);
+        }
+      });
+      tableParams.columns = tableColumns;
+      // 如果有计算需要的值就进行计算
+      if (isTotals.length > 0) {
+        let totalRow = { id: tableParams.dataSource.length, isTotal: true };
+        isTotals.forEach((column) => {
+          let count = 0;
+          tableParams.dataSource.forEach((row) => {
+            count += parseFloat(row[column]);
+          });
+          totalRow[column] = isNaN(count) ? '包含非数字内容' : count.toFixed(2);
+        });
+        tableParams.dataSource.push(totalRow);
+      }
+    }
+  }
+
+  // 导出Excel
+  function onExportXls() {
+    let fileName = props.title;
+    defHttp
+      .get(
+        {
+          url: '/online/graphreport/api/exportXlsById',
+          params: {
+            id: headId.value,
+            name: fileName,
+          },
+          responseType: 'blob',
+        },
+        { isTransformResponse: false }
+      )
+      .then((data) => {
+        if (!data || data.size == 0) {
+          $message.warning('导出失败！');
+          return;
+        }
+        downloadByData(data, fileName + '.xls');
+      });
+  }
+
+  // 打印
+  function onPrint() {
+    printJS({
+      type: 'html',
+      printable: '#' + printId.value,
+    });
+  }
+
+  /** 跳转到详情页 */
+  function onGoToDetail() {
+    goToInfo(props.chartsData);
+  }
+
+  function goToInfo(data) {
+    let url = `/online/graphreport/chart/${data.head.id}`;
+    router.push({ path: url });
+  }
+
+  return {
+    headId,
+    printId,
+    height,
+    activeKey,
+    chartTypes,
+    pageSwitch,
+    showPrint,
+    showDetail,
+    hasLine,
+    hasBar,
+    hasPie,
+    hasTable,
+    lineProps,
+    barProps,
+    pieProps,
+    tableProps,
+    barLineProps,
+    chartCardProps,
+    tableCardProps,
+    exportButtonProps,
+    pageSwitchProps,
+    extendJsHandlerIsolation,
+    onPrint,
+    onGoToDetail,
+    onExportXls,
+  };
+}
diff --git a/src/views/super/online/graphreport/auto/hooks/useParseFormSchemas.ts b/src/views/super/online/graphreport/auto/hooks/useParseFormSchemas.ts
new file mode 100644
index 0000000..2a32c3f
--- /dev/null
+++ b/src/views/super/online/graphreport/auto/hooks/useParseFormSchemas.ts
@@ -0,0 +1,101 @@
+import { nextTick, Ref, h } from 'vue';
+import { FormSchema } from '/@/components/Form';
+import { InputNumber, Input, DatePicker } from 'ant-design-vue';
+
+type PSchema = Partial<FormSchema>;
+
+export function useParseFormSchemas(chartsData: Ref<any>, showSearchField: Ref<boolean>) {
+  // 解析查询条件 FormSchemas
+  async function parseFormSchemas() {
+    let { head, items, dictOptions } = chartsData.value;
+    if (head.dataType === 'sql') {
+      let formSchemas: FormSchema[] = [];
+      items.forEach((field) => {
+        // 判断是否查询
+        if (field.searchFlag !== 'Y') return;
+        let isRange = field.searchMode === 'group';
+        let schema: PSchema = {};
+        let schemas: FormSchema[] = [];
+        // 判断是否有字典，字典组件不能范围查询
+        if (field.dictCode && dictOptions[field.dictCode]) {
+          schema.component = 'Select';
+          schema.componentProps = {
+            options: dictOptions[field.dictCode],
+          };
+        } else if (['Integer', 'Long'].includes(field.fieldType)) {
+          // 数字输入框
+          schema.component = 'InputNumber';
+          if (isRange) {
+            schema.render = getRangeRender(schemas, field, InputNumber);
+          }
+        } else if (field.fieldType === 'Date') {
+          // 日期选择组件
+          schema.component = 'DatePicker';
+          schema.componentProps = {
+            format: 'YYYY-MM-DD',
+          };
+          if (isRange) {
+            schema.render = getRangeRender(schemas, field, DatePicker);
+          }
+        } else {
+          // 普通文本框
+          schema.component = 'Input';
+          if (isRange) {
+            schema.render = getRangeRender(schemas, field, Input);
+          }
+        }
+        formSchemas = formSchemas
+          .concat({
+            label: field.fieldTxt,
+            field: field.fieldName,
+            component: 'Input',
+            itemProps: {
+              class: { 'range-query': isRange },
+            } as any,
+            ...schema,
+          })
+          .concat(schemas);
+      });
+      showSearchField.value = formSchemas.length > 0;
+      await nextTick();
+      return formSchemas;
+    } else {
+      showSearchField.value = false;
+      return null;
+    }
+  }
+
+  return { parseFormSchemas };
+}
+
+/**
+ * 获取范围渲染方法
+ *
+ * @param schemas 显示名
+ * @param fieldItem 字段
+ * @param component vue 组件
+ */
+function getRangeRender(schemas: FormSchema[], fieldItem, component: any) {
+  let { fieldTxt: label, fieldName: beginField } = fieldItem;
+  let endField = beginField + '_end';
+  // 添加占位符
+  schemas.push({ label: '', field: endField, component: 'Input', show: false });
+  return function ({ model }) {
+    return [
+      h(component, {
+        value: model[beginField],
+        'onUpdate:value': (v) => (model[beginField] = v),
+        placeholder: '请输入开始' + label,
+
+        format: 'YYYY-MM-DD',
+      }),
+      h('span', { class: 'range-span' }, '~'),
+      h(component, {
+        value: model[endField],
+        'onUpdate:value': (v) => (model[endField] = v),
+        placeholder: '请输入结束' + label,
+        format: 'YYYY-MM-DD',
+      }),
+    ];
+  };
+}
diff --git a/src/views/super/online/graphreport/components/GraphreportAigcModal.vue b/src/views/super/online/graphreport/components/GraphreportAigcModal.vue
new file mode 100644
index 0000000..796a1c5
--- /dev/null
+++ b/src/views/super/online/graphreport/components/GraphreportAigcModal.vue
@@ -0,0 +1,222 @@
+<template>
+  <BasicModal v-bind="getProps" destroyOnClose>
+    <a-spin wrapperClassName="p-2" :spinning="loading">
+
+      <div class="aiWrap">
+        <div class="titleArea">
+          <svg
+              t="1707100353985"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="4235"
+              width="26"
+              height="26"
+          >
+            <path
+                d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z"
+                p-id="4236"
+                fill="currentColor"
+            ></path>
+          </svg>
+          <h3>创建图表需要专业建议？试试AI智能建表吧</h3>
+        </div>
+        <p class="tip">请选择Online表单，并输入图表需求，例如：统计男生女生各自的数量</p>
+        <a-space class="content" direction="vertical">
+          <a-select
+              v-model:value="model.cgformTableName"
+              placeholder="请选择Online表单"
+              show-search
+              :filter-option="false"
+              not-found-content="没有符合的表单"
+              style="width: 100%"
+              @search="handleCgformSearch"
+          >
+            <template v-for="item of cgformList">
+              <a-select-option :value="item.value">{{ item.text }}</a-select-option>
+            </template>
+            <a-select-option value="2">女</a-select-option>
+          </a-select>
+          <a-textarea v-model:value.trim="model.prompt" placeholder="请输入图表需求" :rows="3"/>
+        </a-space>
+
+      </div>
+    </a-spin>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <a-button type="primary" :loading="loading" preIcon="carbon:ai-generate" @click="onSubmit">
+        立即生成
+      </a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import type {ModalProps} from '/@/components/Modal';
+import {BasicModal, useModalInner} from '/@/components/Modal';
+import {computed, ref, unref} from 'vue';
+import {debounce} from 'lodash-es';
+import {useAttrs} from '/@/hooks/core/useAttrs';
+import {useMessage} from '/@/hooks/web/useMessage';
+import {defHttp} from "@/utils/http/axios";
+
+import {getDictItems} from "@/api/common/api";
+
+enum Api {
+  AIGC = '/online/graphreport/head/api/aigc',
+}
+
+const props = defineProps();
+const emit = defineEmits(['register', 'generate']);
+const attrs = useAttrs();
+
+const {createMessage: $message} = useMessage();
+
+// model
+const model = ref<Recordable>({
+  prompt: '',
+  cgformTableName: void 0,
+});
+// 当前是否正在加载中
+const loading = ref(true);
+
+// 注册弹窗
+const [registerModal, {closeModal, setModalProps}] = useModalInner(() => {
+  queryOnlineCgform();
+  setLoading(false)
+  model.value.prompt = '';
+  model.value.cgformTableName = void 0;
+});
+
+// 弹窗最终props
+const getProps = computed(() => {
+  let modalProps: Partial<ModalProps> = {
+    width: 600,
+    height:  240,
+    title: '通过Ai生成图表',
+    maskClosable: false,
+    canFullscreen: false,
+    confirmLoading: unref(loading),
+  };
+  let finalProps: Recordable = {
+    ...modalProps,
+    ...unref(attrs),
+    ...props,
+    onCancel: close,
+    onRegister: registerModal,
+  };
+  return finalProps;
+});
+
+/** 设置加载状态*/
+function setLoading(flag) {
+  loading.value = flag;
+  setModalProps({confirmLoading: flag});
+}
+
+const handleCgformSearch = debounce(function (val: string) {
+  queryOnlineCgform(val);
+}, 500);
+
+const cgformList = ref<any[]>([]);
+
+function queryOnlineCgform(keywords: string = '') {
+  const queryWhere = keywords ? `table_txt like '%25${keywords}%25' and ` : '';
+  const where = `${queryWhere}is_db_synch='Y' and (table_type = 1 or table_type = 2)`
+  const order = `order by create_time desc`
+  getDictItems(`onl_cgform_head,table_txt,table_name,${where} ${order}`).then((res) => {
+    cgformList.value = res;
+  });
+}
+
+async function onSubmit() {
+  await onStepGenerate()
+}
+
+async function onStepGenerate() {
+  const {cgformTableName, prompt} = model.value
+  if (!cgformTableName) {
+    $message.warning('请选择Online表单');
+    return
+  }
+  if (!prompt) {
+    $message.warning('请输入图表需求');
+    return
+  }
+  setLoading(true);
+  try {
+    const url = Api.AIGC + '?cgformTableName=' + cgformTableName + '&prompt=' + prompt;
+    const {success, result, message} = await defHttp.post({url: url, timeout: 60000}, {isTransformResponse: false})
+    if (success) {
+      const {code, name, cgrSql} = result;
+      if (code && name && cgrSql) {
+        emit('generate', result);
+        closeModal();
+      } else {
+        $message.warn('生成失败，Ai开小差了，请稍后重试…');
+      }
+    } else {
+      $message.error(message);
+    }
+  } finally {
+    setLoading(false);
+  }
+}
+
+function onCancel() {
+  closeModal();
+}
+
+</script>
+
+<style scoped lang="less">
+
+html[data-theme="light"] {
+  .aiWrap {
+    h3 {
+      color: #333;
+    }
+
+    .tip {
+      color: #666;
+    }
+  }
+}
+
+.aiWrap {
+  padding: 30px 20px 20px;
+
+  .titleArea {
+    position: relative;
+    color: #ffb308;
+    width: fit-content;
+    margin: 0 auto;
+
+    svg {
+      position: absolute;
+      left: -30px;
+      margin-right: 8px;
+    }
+  }
+
+  h3 {
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  .tip {
+    text-align: center;
+    margin-bottom: 26px;
+  }
+
+  .content {
+    display: flex;
+  }
+
+  .ant-btn {
+    margin-left: 16px;
+  }
+}
+</style>
diff --git a/src/views/super/online/graphreport/components/GraphreportModal.vue b/src/views/super/online/graphreport/components/GraphreportModal.vue
new file mode 100644
index 0000000..7a22507
--- /dev/null
+++ b/src/views/super/online/graphreport/components/GraphreportModal.vue
@@ -0,0 +1,346 @@
+<template>
+  <BasicModal
+    :title="title"
+    :width="1200"
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    defaultFullscreen
+    v-bind="$attrs"
+    @cancel="onCancel"
+    @register="registerModal"
+  >
+    <a-spin :spinning="confirmLoading">
+      <BasicForm @register="registerForm">
+        <template #SQLAnalyzeButton>
+          <div style="flex: 1; text-align: right">
+            <a-button v-if="dataType === 'sql'" type="primary" @click="onSQLAnalyze">SQL解析</a-button>
+            <a-button v-if="dataType === 'json'" type="primary" @click="onJSONAnalyze">JSON解析</a-button>
+            <a-button v-if="dataType === 'api'" type="primary" @click="onAPIAnalyze">API解析</a-button>
+          </div>
+        </template>
+      </BasicForm>
+      <!-- 子表单区域 -->
+      <a-tabs animated v-model:activeKey="activeKey">
+        <a-tab-pane tab="列表字段" key="field" forceRender>
+          <FieldTable ref="fieldTableRef" :dataSource="fieldTable.dataSource" />
+        </a-tab-pane>
+        <a-tab-pane tab="图表参数" key="params" forceRender>
+          <ParamsTable ref="paramsTableRef" :dataSource="paramsTable.dataSource" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+
+    <template #footer>
+      <a-button @click="onCancel">关闭</a-button>
+      <a-button type="primary" :loading="confirmLoading" preIcon="ant-design:save" @click="onSubmit">保存</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { ref, reactive, computed, nextTick, defineComponent } from 'vue';
+
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useFormSchemas } from '../graphreport.data';
+  import FieldTable from './tables/FieldTable.vue';
+  import ParamsTable from './tables/ParamsTable.vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { isArray } from '/@/utils/is';
+  import { parseField } from '/@/views/super/online/graphreport/graphreport.api';
+
+  enum Api {
+    add = '/online/graphreport/head/add',
+    edit = '/online/graphreport/head/edit',
+    sql = '/online/cgreport/head/parseSql',
+  }
+
+  enum FieldApi {
+    list = '/online/graphreport/head/queryOnlGraphreportItemByMainId',
+  }
+
+  enum ParamsApi {
+    list = '/online/graphreport/params/listByHeadId',
+  }
+
+  export default defineComponent({
+    name: 'GraphreportModal',
+    components: { ParamsTable, FieldTable, BasicModal, BasicForm },
+    emits: ['register', 'success'],
+    setup(props, { emit }) {
+      const { createMessage: $message } = useMessage();
+      // 是否是更新模式
+      const isUpdate = ref(false);
+      const fieldTableRef = ref<InstanceType<typeof FieldTable>>();
+      const paramsTableRef = ref<InstanceType<typeof ParamsTable>>();
+      // 编辑时存储的值
+      let model: Recordable = {};
+      const title = computed(() => (isUpdate.value ? '编辑' : '新增'));
+      // tabs当前活动的页面
+      const activeKey = ref('field');
+      // 当前是否正在加载中
+      const confirmLoading = ref(false);
+      // 数据源类型
+      const dbSourceOptions = ref<any[]>([]);
+
+      const fieldTable = reactive({
+        dataSource: [],
+      });
+      const paramsTable = reactive({
+        dataSource: [],
+      });
+
+      //  注册弹窗
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        isUpdate.value = data?.isUpdate ?? false;
+        if (isUpdate.value) {
+          await edit(data?.record);
+        } else {
+          await add();
+        }
+
+        // 当传递了 aigc 时，说明是通过 ai 生成的报表
+        if (data?.aigc) {
+          console.log('top - data.aigc :', data.aigc)
+          await setFieldsValue({
+            ...data.aigc,
+          });
+          // 等待 0.5s 后，自动执行SQL解析
+          setTimeout(() => onSQLAnalyze())
+        }
+      });
+      const { formSchemas, dataType, isCombination } = useFormSchemas(props, {
+        dbSourceOptions,
+      });
+      // 注册表单
+      const [registerForm, { resetFields, clearValidate, setFieldsValue, validate, validateFields }] = useForm({
+        schemas: formSchemas,
+        showActionButtonGroup: false,
+        labelAlign: 'right',
+      });
+
+      async function add() {
+        // 清空数据
+        fieldTable.dataSource = [];
+        paramsTable.dataSource = [];
+        await nextTick();
+        // 默认添加一行
+        fieldTableRef.value?.tableRef?.addRows({}, { setActive: false });
+        edit({});
+      }
+
+      async function edit(record) {
+        confirmLoading.value = false;
+        activeKey.value = 'field';
+        // 重置表单
+        await resetFields();
+        model = Object.assign({}, record);
+        model.dbSource = model.dbSource == null ? '' : model.dbSource;
+        // 如果是组合模式，那么就分割字符串成数组
+        if (isCombination.value === 'combination' && typeof model.graphType === 'string') {
+          model.graphType = model.graphType.split(',');
+        }
+        if (typeof model.yaxisField === 'string') {
+          model.yaxisField = model.yaxisField.split(',');
+        }
+        // 给表单赋值
+        await setFieldsValue(model);
+        await clearValidate();
+        // 处理数据
+        dataType.value = model.dataType ?? 'sql';
+        // isCombination.value = model.isCombination ?? 'combination'
+        // 加载子表数据
+        if (model.id) {
+          requestSubData(model.id);
+        }
+      }
+
+      /** 查询子表数据 */
+      function requestSubData(headId) {
+        confirmLoading.value = true;
+        requestTabData(FieldApi.list, { id: headId }, fieldTable).finally(() => {
+          confirmLoading.value = false;
+        });
+        requestTabData(ParamsApi.list, { headId }, paramsTable);
+      }
+
+      /** 查询某个tab的数据 */
+      function requestTabData(url, params, tab) {
+        return defHttp.get({ url, params }).then((result) => {
+          tab.dataSource = result || [];
+        });
+      }
+
+      /** SQL 解析 */
+      async function onSQLAnalyze() {
+        confirmLoading.value = true;
+        try {
+          let { cgrSql } = await validate(['cgrSql']);
+          let result = await defHttp.get({ url: Api.sql, params: { sql: cgrSql } });
+          $message.success('解析成功');
+          let newData = (result.fields || []).map((item) => {
+            item.isShow = item.isShow === 1 ? 'Y' : 'N';
+            return item;
+          });
+          let oldData = fieldTableRef.value?.tableRef?.getTableData();
+          fieldTable.dataSource = getTableData(oldData, newData, 'fieldName');
+          // 解析参数
+          paramsTable.dataSource = getTableData(paramsTable.dataSource, result.params || [], 'paramName');
+        } finally {
+          confirmLoading.value = false;
+        }
+      }
+
+      /** JSON 解析 */
+      async function onJSONAnalyze() {
+        await doBackAnalyze('JSON');
+      }
+
+      /** API 解析 */
+      async function onAPIAnalyze() {
+        await doBackAnalyze('API');
+      }
+
+      /**
+       * 后台解析字段
+       *
+       * @param type 解析类型
+       */
+      async function doBackAnalyze(type: string) {
+        let { cgrSql } = await validateFields(['cgrSql']);
+        let result = await parseField(type, cgrSql);
+        let fields = Array.isArray(result) ? result: result.fields;
+        let newData = (fields || []).map((item) => {
+          item.isShow = item.isShow === 1 ? 'Y' : 'N';
+          return item;
+        });
+        let oldData = fieldTableRef.value?.tableRef?.getTableData();
+        fieldTable.dataSource = getTableData(oldData, newData, 'fieldName');
+        // 解析参数
+        if (Array.isArray(result?.params)) {
+          paramsTable.dataSource = getTableData(paramsTable.dataSource, result.params, 'paramName');
+        }
+      }
+
+      /** 【重写】确定按钮点击事件 */
+      async function onSubmit() {
+        try {
+          // 校验主表
+          let mainValues = await validate();
+          // 校验字段表
+          let errMap = await fieldTableRef.value?.tableRef?.validateTable();
+          if (errMap) {
+            activeKey.value = 'field';
+            return;
+          }
+          // 校验参数表
+          errMap = await paramsTableRef.value?.tableRef?.validateTable();
+          if (errMap) {
+            activeKey.value = 'params';
+            return;
+          }
+          // 整理数据
+          let formData = classifyIntoFormData(mainValues);
+          // 发起请求
+          confirmLoading.value = true;
+          await request(formData);
+          emit('success');
+          closeModal();
+        } finally {
+          confirmLoading.value = false;
+        }
+      }
+
+      /** 发起请求，自动判断是执行新增还是修改操作 */
+      function request(params) {
+        if (isUpdate.value) {
+          return defHttp.put({ url: Api.edit, params });
+        } else {
+          return defHttp.post({ url: Api.add, params });
+        }
+      }
+
+      /** 整理成formData */
+      function classifyIntoFormData(mainValues) {
+        let main = Object.assign(model, mainValues);
+        if (isArray(main.graphType)) {
+          main.graphType = main.graphType.join(',');
+        }
+        if (isArray(main.yaxisField)) {
+          main.yaxisField = main.yaxisField.join(',');
+        }
+        return {
+          ...main,
+          onlGraphreportItemList: fieldTableRef.value?.tableRef?.getTableData(),
+          paramsList: paramsTableRef.value?.tableRef?.getTableData(),
+        };
+      }
+
+      function onCancel() {
+        closeModal();
+      }
+
+      // 查询数据源类型
+      async function queryDataSourceOptions() {
+        let url = '/sys/dataSource/options';
+        try {
+          let result = await defHttp.get({ url });
+          dbSourceOptions.value = result || [];
+          dbSourceOptions.value.unshift({ label: '请选择', value: '' });
+        } catch {
+          dbSourceOptions.value = [{ label: '加载失败', value: undefined }];
+        }
+      }
+
+      queryDataSourceOptions();
+
+      return {
+        fieldTableRef,
+        paramsTableRef,
+        title,
+        confirmLoading,
+        dataType,
+        activeKey,
+        fieldTable,
+        paramsTable,
+        onSubmit,
+        onCancel,
+        onSQLAnalyze,
+        onAPIAnalyze,
+        onJSONAnalyze,
+        registerModal,
+        registerForm,
+      };
+    },
+  });
+
+  /**
+   * 获取tab的table的datasource
+   * @param oldData 原datasource
+   * @param newData 从数据库查询出来的datasource
+   * @param columnName 字段列，用于比较数据是否相同
+   */
+  function getTableData(oldData, newData, columnName) {
+    newData.forEach((newItem) => {
+      for (let oldItem of oldData) {
+        if (oldItem[columnName] === newItem[columnName]) {
+          Object.assign(newItem, oldItem);
+          break;
+        }
+      }
+    });
+    return newData;
+  }
+</script>
+
+<style lang="less" scoped>
+  // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+  form {
+    padding-right: 3.5%;
+  }
+  :deep(.ant-tabs-content-holder) {
+    padding: 0 10px;
+  }
+  // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9230】报表图表弹窗样式调整
+</style>
diff --git a/src/views/super/online/graphreport/components/tables/FieldTable.vue b/src/views/super/online/graphreport/components/tables/FieldTable.vue
new file mode 100644
index 0000000..77468cf
--- /dev/null
+++ b/src/views/super/online/graphreport/components/tables/FieldTable.vue
@@ -0,0 +1,152 @@
+<template>
+  <JVxeTable
+    ref="tableRef"
+    toolbar
+    rowNumber
+    rowSelection
+    dragSort
+    sortKey="orderNum"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :height="398"
+  >
+    <template #toolbarSuffix>
+      <a-dropdown>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="fieldNameConvertCase('Upper', '大写')">
+              <a-icon type="sort-descending" />
+              <span>转换为大写</span>
+            </a-menu-item>
+            <a-menu-item key="2" @click="fieldNameConvertCase('Lower', '小写')">
+              <a-icon type="sort-ascending" />
+              <span>转换为小写</span>
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button preIcon="ant-design:down">转换字段名</a-button>
+      </a-dropdown>
+    </template>
+  </JVxeTable>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'ParamsTable',
+    props: {
+      loading: Boolean,
+      dataSource: Array,
+    },
+    setup() {
+      const tableRef = ref<JVxeTableInstance>();
+      const columns = ref<JVxeColumn[]>([
+        {
+          title: '字段名',
+          key: 'fieldName',
+          width: 180,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          validateRules: [{ required: true, message: '${title}不能为空' }],
+          placeholder: '请输入${title}',
+        },
+        {
+          title: '字段文本',
+          key: 'fieldTxt',
+          width: 180,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+        },
+        {
+          title: '字段类型',
+          key: 'fieldType',
+          width: 200,
+          type: JVxeTypes.select,
+          options: [
+            { title: '数值类型', value: 'Integer' },
+            { title: '日期类型', value: 'Date' },
+            { title: '字符类型', value: 'String' },
+            { title: '长整型', value: 'Long' },
+          ],
+          defaultValue: '',
+          placeholder: '请选择${title}',
+        },
+        {
+          title: '计算总计',
+          key: 'isTotal',
+          width: 80,
+          type: JVxeTypes.checkbox,
+          defaultChecked: false,
+          customValue: ['Y', 'N'],
+        },
+        {
+          title: '是否查询',
+          key: 'searchFlag',
+          width: 80,
+          type: JVxeTypes.checkbox,
+          defaultChecked: false,
+          customValue: ['Y', 'N'],
+        },
+        {
+          title: '查询模式',
+          key: 'searchMode',
+          width: 180,
+          type: JVxeTypes.select,
+          options: [
+            { title: '单条件查询', value: 'single' },
+            { title: '范围查询', value: 'group' },
+          ],
+          defaultValue: '',
+          placeholder: '请选择${title}',
+        },
+        {
+          title: '字典Code',
+          key: 'dictCode',
+          width: 200,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请选择${title}',
+        },
+        {
+          title: '是否显示',
+          key: 'isShow',
+          type: JVxeTypes.checkbox,
+          defaultChecked: true,
+          customValue: ['Y', 'N'],
+        },
+      ]);
+      const { createConfirm: $confirm } = useMessage();
+
+      /** 字段名转换大小写 */
+      function fieldNameConvertCase(convertCase, name) {
+        $confirm({
+          iconType: 'info',
+          title: '转换字段名',
+          content: `确定要将所有的字段名都转换为${name}吗？`,
+          onOk() {
+            let fn = `to${convertCase}Case`;
+            let values = tableRef.value!.getTableData();
+            let newValues = values.map((item) => {
+              return {
+                rowKey: item.id,
+                values: {
+                  fieldName: item['fieldName'][fn](),
+                },
+              };
+            });
+            tableRef.value!.setValues(newValues);
+          },
+        });
+      }
+
+      return { tableRef, columns, fieldNameConvertCase };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/graphreport/components/tables/ParamsTable.vue b/src/views/super/online/graphreport/components/tables/ParamsTable.vue
new file mode 100644
index 0000000..c0839bf
--- /dev/null
+++ b/src/views/super/online/graphreport/components/tables/ParamsTable.vue
@@ -0,0 +1,62 @@
+<template>
+  <a-alert type="info" showIcon message="目前只有SQL模式才支持报表参数！" />
+  <br />
+  <JVxeTable
+    ref="tableRef"
+    toolbar
+    rowNumber
+    rowSelection
+    dragSort
+    sortKey="orderNum"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :height="336"
+  />
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent } from 'vue';
+  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+
+  export default defineComponent({
+    name: 'FieldTable',
+    props: {
+      loading: Boolean,
+      dataSource: Array,
+    },
+    setup() {
+      const tableRef = ref<JVxeTableInstance>();
+      const columns = ref<JVxeColumn[]>([
+        {
+          title: '参数',
+          key: 'paramName',
+          width: 230,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+          validateRules: [{ required: true, message: '${title}不能为空' }],
+        },
+        {
+          title: '参数文本',
+          key: 'paramTxt',
+          width: 230,
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+          validateRules: [{ required: true, message: '${title}不能为空' }],
+        },
+        {
+          title: '默认值',
+          key: 'paramValue',
+          type: JVxeTypes.input,
+          defaultValue: '',
+          placeholder: '请输入${title}',
+        },
+      ]);
+      return { tableRef, columns };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/super/online/graphreport/graphreport.api.ts b/src/views/super/online/graphreport/graphreport.api.ts
new file mode 100644
index 0000000..7ea45b0
--- /dev/null
+++ b/src/views/super/online/graphreport/graphreport.api.ts
@@ -0,0 +1,39 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export enum Api {
+  list = '/online/graphreport/head/list',
+  delete = '/online/graphreport/head/delete',
+  deleteBatch = '/online/graphreport/head/deleteBatch',
+  exportXls = '/online/graphreport/head/exportXls',
+  importXls = '/online/graphreport/head/importExcel',
+  parseField = '/online/graphreport/head/parseField',
+  paramsList = '/online/graphreport/params/listByHeadId',
+  getChartsData = '/online/graphreport/api/getChartsData',
+  getParamsInfo = '/online/graphreport/params/listByHeadId',
+}
+
+/**
+ * 列表接口
+ * e3e3NcxzbUiGa53YYVXxWc8ADo5ISgQGx/gaZwERF91oAryDlivjqBv3wqRArgChupi+Y/Gg/swwGEyL0PuVFg==
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+// 批量删除
+export function doBatchDelete(idList: string[]) {
+  return defHttp.delete(
+    {
+      url: Api.deleteBatch,
+      params: { ids: idList.join(',') },
+    },
+    { joinParamsToUrl: true }
+  );
+}
+
+export const queryParamsList = (headId: string) => defHttp.get({ url: Api.paramsList, params: { headId } });
+
+// 查询图表数据
+export const getChartsData = (params) => defHttp.get({ url: Api.getChartsData, params: params });
+export const getParamsInfo = (params) => defHttp.get({ url: Api.getParamsInfo, params: params });
+
+export const parseField = (type, data, params = {}) => defHttp.post({ url: Api.parseField, params: { type, data, ...params } });
diff --git a/src/views/super/online/graphreport/graphreport.data.ts b/src/views/super/online/graphreport/graphreport.data.ts
new file mode 100644
index 0000000..1cce46d
--- /dev/null
+++ b/src/views/super/online/graphreport/graphreport.data.ts
@@ -0,0 +1,241 @@
+import { FormSchema } from '/@/components/Form';
+import { duplicateCheckDelay } from '/@/views/system/user/user.api';
+import { bindMapFormSchema } from '/@/utils/common/compUtils';
+import { computed, ref } from 'vue';
+import { usePermissionStore } from '/@/store/modules/permission';
+
+// 弹窗表单
+export function useFormSchemas(_, handler) {
+  const permissionStore = usePermissionStore();
+  // 由于需要动态改变布局，所以使用 computed
+  type SpanType = 'one' | 'tow' | 'threeTow' | 'three';
+  // 动态布局
+  const mapFormSchema = bindMapFormSchema<SpanType>(
+    {
+      // 一列
+      one: {
+        colProps: { xs: 24, sm: 24 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 2 },
+          wrapperCol: { xs: 24, sm: 22 },
+        },
+      },
+      // 两列
+      tow: {
+        colProps: { xs: 24, sm: 12 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 4 },
+          wrapperCol: { xs: 24, sm: 20 },
+        },
+      },
+      // 三分之二列
+      threeTow: {
+        colProps: { xs: 24, sm: 16 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 3 },
+          wrapperCol: { xs: 24, sm: 21 },
+        },
+      },
+      // 三列
+      three: {
+        colProps: { xs: 24, sm: 8 },
+        itemProps: {
+          labelCol: { xs: 24, sm: 6 },
+          wrapperCol: { xs: 24, sm: 18 },
+        },
+      },
+    },
+    'three'
+  );
+
+  const dataType = ref('sql');
+  const isCombination = ref('combination');
+  // 根据不同的值展示不同的form
+  const formInfo = {
+    cgrSql: {
+      sql: { label: '查询SQL', placeholder: '请输入查询SQL', language: 'sql' },
+      json: { label: '数据JSON', placeholder: '请输入数据JSON', language: 'javascript' },
+      api: { label: 'API接口', placeholder: '请输入API接口', language: 'javascript' },
+    },
+  };
+  const cgrSqlFormInfo = computed<typeof formInfo.cgrSql.sql>(() => {
+    return formInfo.cgrSql[dataType.value];
+  });
+
+  const formSchemas = computed<FormSchema[]>(() => [
+    { label: 'ID', field: 'id', component: 'Input', show: false },
+    mapFormSchema({
+      label: '图表名称',
+      field: 'name',
+      component: 'Input',
+      required: true,
+    }),
+    mapFormSchema({
+      label: '编码',
+      field: 'code',
+      component: 'Input',
+      dynamicRules({ model }) {
+        return [
+          { required: true, message: '请输入编码!' },
+          {
+            async validator({}, value) {
+              if (/[\u4E00-\u9FA5]/g.test(value)) {
+                return Promise.reject('编码不能为汉字');
+              }
+              let { success, message } = await duplicateCheckDelay({
+                tableName: 'onl_graphreport_head',
+                fieldName: 'code',
+                fieldVal: value,
+                dataId: model.id,
+              });
+              if (!success) {
+                return Promise.reject(message);
+              }
+            },
+          },
+        ];
+      },
+    }),
+    mapFormSchema({
+      label: '展示模板',
+      field: 'displayTemplate',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: 'Tab风格', value: 'tab' },
+          { label: '单排布局', value: 'single' },
+          { label: '双排布局', value: 'double' },
+        ],
+      },
+      defaultValue: 'tab',
+    }),
+    mapFormSchema({
+      label: 'X轴字段',
+      field: 'xaxisField',
+      component: 'Input',
+      required: true,
+    }),
+    mapFormSchema(
+      {
+        label: 'Y轴字段',
+        field: 'yaxisField',
+        component: 'JDictSelectTag',
+        componentProps: {
+          mode: 'tags',
+          open: false,
+          dictCode: 'online_graph_display_template',
+        },
+        required: true,
+      },
+      'threeTow'
+    ),
+    mapFormSchema({
+      label: '数据类型',
+      field: 'dataType',
+      component: 'JDictSelectTag',
+      componentProps: {
+        dictCode: 'online_graph_data_type',
+        showChooseOption: false,
+        onChange: (value) => (dataType.value = value),
+      },
+      defaultValue: 'sql',
+    }),
+    mapFormSchema({
+      label: '数据源',
+      field: 'dbSource',
+      component: 'Select',
+      componentProps: {
+        options: handler.dbSourceOptions.value,
+      },
+      rules: [{ required: permissionStore.sysSafeMode, message: '请选择数据源！' }],
+      ifShow: ({ model }) => model.dataType === 'sql',
+    }),
+    mapFormSchema(
+      {
+        label: '图表类型',
+        field: 'graphType',
+        component: 'JDictSelectTag',
+        componentProps: {
+          mode: isCombination.value === 'single' ? 'default' : 'multiple',
+          dictCode: 'online_graph_type',
+          showChooseOption: false,
+        },
+        defaultValue: ['bar'],
+      },
+      dataType.value === 'sql' ? 'three' : 'threeTow'
+    ),
+    mapFormSchema(
+      {
+        label: '描述',
+        field: 'content',
+        component: 'Input',
+      },
+      'one'
+    ),
+    mapFormSchema(
+      {
+        label: cgrSqlFormInfo.value?.label,
+        field: 'cgrSql',
+        required: true,
+        component: 'JCodeEditor',
+        componentProps: {
+          placeholder: cgrSqlFormInfo.value?.placeholder,
+          language: cgrSqlFormInfo.value?.language,
+          fullScreen: true,
+          autoHeight: '!ie',
+          height: '100px',
+        },
+        dynamicRules() {
+          return [
+            {
+              required: true,
+              // 根据数据类型的不同显示不同的错误信息
+              message: cgrSqlFormInfo.value?.placeholder,
+            },
+            {
+              // 自定义校验：校验JSON字符串格式是否正确
+              async validator({}, value) {
+                if (value && dataType.value === 'json') {
+                  try {
+                    JSON.parse(value);
+                  } catch {
+                    return Promise.reject('JSON格式不正确！');
+                  }
+                }
+              },
+            },
+          ];
+        },
+      },
+      'one'
+    ),
+    mapFormSchema(
+      {
+        label: ' ', // SQL解析
+        field: 'cgrSql',
+        component: 'Input',
+        slot: 'SQLAnalyzeButton',
+        itemProps: { colon: false },
+        // ifShow: ({ model }) => model.dataType === 'sql',
+      },
+      'one'
+    ),
+    mapFormSchema(
+      {
+        label: 'JS增强',
+        field: 'extendJs',
+        component: 'JCodeEditor',
+        componentProps: {
+          placeholder: 'JS增强',
+          language: 'javascript',
+          fullScreen: true,
+          autoHeight: '!ie',
+          height: '100px',
+        },
+      },
+      'one'
+    ),
+  ]);
+
+  return { formSchemas, dataType, isCombination };
+}
diff --git a/src/views/super/online/graphreport/router/graphreportRouter.ts b/src/views/super/online/graphreport/router/graphreportRouter.ts
new file mode 100644
index 0000000..5bad015
--- /dev/null
+++ b/src/views/super/online/graphreport/router/graphreportRouter.ts
@@ -0,0 +1,24 @@
+import {router} from '/@/router';
+import {LAYOUT} from '/@/router/constant';
+
+export function registerGraphreportRouter() {
+  router.addRoute({
+    path: '/online-auto-graphreport-router',
+    name: 'onl-auto-graphreport-router',
+    component: LAYOUT,
+    redirect: '/online/graphreport',
+    meta: {
+      title: 'OnlGraphreportAuto',
+      hideMenu: true,
+      hideBreadcrumb: true,
+    },
+    children: [
+      {
+        path: '/online/graphreport/chart/:code',
+        name: 'GraphreportAutoChart',
+        component: () => import('../auto/GraphreportAutoChart.vue'),
+        meta: {title: 'AUTO在线图表'},
+      },
+    ],
+  })
+}
diff --git a/src/views/super/online/register.ts b/src/views/super/online/register.ts
new file mode 100644
index 0000000..843a479
--- /dev/null
+++ b/src/views/super/online/register.ts
@@ -0,0 +1,47 @@
+import type {App} from 'vue';
+import {createAsyncComponent} from "@/utils/factory/createAsyncComponent";
+import {registerCgformRouter} from "./cgform/router/cgformRouter";
+import {registerCgreportRouter} from "./cgreport/router/cgreportRouter";
+import {registerGraphreportRouter} from "./graphreport/router/graphreportRouter";
+
+/** 注册 online */
+export async function register(app: App) {
+
+  // 注册Online弹窗
+  const OnlineAutoModalAsync = createAsyncComponent(() => import('./cgform/auto/default/OnlineAutoModal.vue'), {loading: true});
+  app.component('OnlineAutoModal', OnlineAutoModalAsync);
+
+  // 注册Online表单路由
+  registerCgformRouter();
+  // 注册Online报表路由
+  registerCgreportRouter();
+  // 注册Online图表路由
+  registerGraphreportRouter();
+
+  // 注册外部链接页面（如果有）
+  await registerCgformShareView();
+
+  console.log('[online] 注册完成！');
+}
+
+// 注册外部链接页面，自动判断是否存在
+async function registerCgformShareView() {
+  try {
+    const globModels = import.meta.glob('./cgform/share/index.ts');
+    if (!globModels) {
+      return
+    }
+    const models = Object.values(globModels);
+    if (models.length == 0) {
+      return
+    }
+    const shareModel = await models[0]() as Recordable;
+    if (typeof shareModel?.register !== 'function') {
+      return
+    }
+    await shareModel.register();
+
+    console.debug('[online] Online表单外部链接路由注册完成！');
+  } catch (e) {
+  }
+}
diff --git a/src/views/super/registerSuper.ts b/src/views/super/registerSuper.ts
new file mode 100644
index 0000000..d00198e
--- /dev/null
+++ b/src/views/super/registerSuper.ts
@@ -0,0 +1,16 @@
+import type { App } from 'vue';
+
+/**
+ * 动态引入 super 下的组件
+ */
+export async function registerSuper(app: App) {
+  const modules = import.meta.glob('./**/register.ts');
+  for (let [url, module] of Object.entries(modules)) {
+    let { register } = await module();
+    if (typeof register === 'function') {
+      await register(app);
+    } else {
+      console.error(`${url} 没有导出 register 函数，无法完成注册！`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/sys/about/index.vue b/src/views/sys/about/index.vue
new file mode 100644
index 0000000..3d6dd07
--- /dev/null
+++ b/src/views/sys/about/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <PageWrapper title="关于">
+    <template #headerContent>
+      <div class="flex justify-between items-center">
+        <span class="flex-1">
+          <a :href="GITHUB_URL" target="_blank"> JeecgBoot </a>
+          是一款基于BPM的低代码平台！前后端分离架构 SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发！ JeecgBoot引领新低代码开发模式 OnlineCoding-> 代码生成器-> 手工MERGE， 帮助Java项目解决70%的重复工作，让开发更多关注业务，既能快速提高效率，节省研发成本，同时又不失灵活性！一系列低代码能力：Online表单、Online报表、Online图表、表单设计、流程设计、报表设计、大屏设计 等等...。
+        </span>
+      </div>
+    </template>
+    <Description @register="infoRegister" class="enter-y" />
+    <Description @register="register" class="my-4 enter-y" />
+    <Description @register="registerDev" class="enter-y" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+  import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
+
+  const { pkg, lastBuildTime } = __APP_INFO__;
+
+  const { dependencies, devDependencies, name, version } = pkg;
+
+  const schema: DescItem[] = [];
+  const devSchema: DescItem[] = [];
+
+  const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
+  const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
+
+  const infoSchema: DescItem[] = [
+    {
+      label: '版本',
+      field: 'version',
+      render: commonTagRender('blue'),
+    },
+    {
+      label: '最后编译时间',
+      field: 'lastBuildTime',
+      render: commonTagRender('blue'),
+    },
+    {
+      label: '文档地址',
+      field: 'doc',
+      render: commonLinkRender('文档地址'),
+    },
+    {
+      label: '预览地址',
+      field: 'preview',
+      render: commonLinkRender('预览地址'),
+    },
+    {
+      label: 'Github',
+      field: 'github',
+      render: commonLinkRender('Github'),
+    },
+  ];
+
+  const infoData = {
+    version,
+    lastBuildTime,
+    doc: DOC_URL,
+    preview: SITE_URL,
+    github: GITHUB_URL,
+  };
+
+  Object.keys(dependencies).forEach((key) => {
+    schema.push({ field: key, label: key });
+  });
+
+  Object.keys(devDependencies).forEach((key) => {
+    devSchema.push({ field: key, label: key });
+  });
+
+  const [register] = useDescription({
+    title: '生产环境依赖',
+    data: dependencies,
+    schema: schema,
+    column: 3,
+  });
+
+  const [registerDev] = useDescription({
+    title: '开发环境依赖',
+    data: devDependencies,
+    schema: devSchema,
+    column: 3,
+  });
+
+  const [infoRegister] = useDescription({
+    title: '项目信息',
+    data: infoData,
+    schema: infoSchema,
+    column: 2,
+  });
+</script>
diff --git a/src/views/sys/error-log/DetailModal.vue b/src/views/sys/error-log/DetailModal.vue
new file mode 100644
index 0000000..2047707
--- /dev/null
+++ b/src/views/sys/error-log/DetailModal.vue
@@ -0,0 +1,27 @@
+<template>
+  <BasicModal :width="800" :title="t('sys.errorLog.tableActionDesc')" v-bind="$attrs">
+    <Description :data="info" @register="register" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { ErrorLogInfo } from '/#/store';
+  import { BasicModal } from '/@/components/Modal/index';
+  import { Description, useDescription } from '/@/components/Description/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getDescSchema } from './data';
+
+  defineProps({
+    info: {
+      type: Object as PropType<ErrorLogInfo>,
+      default: null,
+    },
+  });
+
+  const { t } = useI18n();
+
+  const [register] = useDescription({
+    column: 2,
+    schema: getDescSchema()!,
+  });
+</script>
diff --git a/src/views/sys/error-log/data.tsx b/src/views/sys/error-log/data.tsx
new file mode 100644
index 0000000..3ffc2f4
--- /dev/null
+++ b/src/views/sys/error-log/data.tsx
@@ -0,0 +1,67 @@
+import { Tag } from 'ant-design-vue';
+import { BasicColumn } from '/@/components/Table/index';
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+
+export function getColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'type',
+      title: t('sys.errorLog.tableColumnType'),
+      width: 80,
+      customRender: ({ text }) => {
+        const color =
+          text === ErrorTypeEnum.VUE
+            ? 'green'
+            : text === ErrorTypeEnum.RESOURCE
+            ? 'cyan'
+            : text === ErrorTypeEnum.PROMISE
+            ? 'blue'
+            : ErrorTypeEnum.AJAX
+            ? 'red'
+            : 'purple';
+        return <Tag color={color}>{() => text}</Tag>;
+      },
+    },
+    {
+      dataIndex: 'url',
+      title: 'URL',
+      width: 200,
+    },
+    {
+      dataIndex: 'time',
+      title: t('sys.errorLog.tableColumnDate'),
+      width: 160,
+    },
+    {
+      dataIndex: 'file',
+      title: t('sys.errorLog.tableColumnFile'),
+      width: 200,
+    },
+    {
+      dataIndex: 'name',
+      title: 'Name',
+      width: 200,
+    },
+    {
+      dataIndex: 'message',
+      title: t('sys.errorLog.tableColumnMsg'),
+      width: 300,
+    },
+    {
+      dataIndex: 'stack',
+      title: t('sys.errorLog.tableColumnStackMsg'),
+    },
+  ];
+}
+
+export function getDescSchema(): any {
+  return getColumns().map((column) => {
+    return {
+      field: column.dataIndex!,
+      label: column.title,
+    };
+  });
+}
diff --git a/src/views/sys/error-log/index.vue b/src/views/sys/error-log/index.vue
new file mode 100644
index 0000000..1895524
--- /dev/null
+++ b/src/views/sys/error-log/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="p-4">
+    <template v-for="src in imgList" :key="src">
+      <img :src="src" v-show="false" />
+    </template>
+    <DetailModal :info="rowInfo" @register="registerModal" />
+    <BasicTable @register="register" class="error-handle-table">
+      <template #toolbar>
+        <a-button @click="fireVueError" type="primary">
+          {{ t('sys.errorLog.fireVueError') }}
+        </a-button>
+        <a-button @click="fireResourceError" type="primary">
+          {{ t('sys.errorLog.fireResourceError') }}
+        </a-button>
+        <a-button @click="fireAjaxError" type="primary">
+          {{ t('sys.errorLog.fireAjaxError') }}
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[{ label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) }]" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { ErrorLogInfo } from '/#/store';
+  import { watch, ref, nextTick } from 'vue';
+  import DetailModal from './DetailModal.vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useErrorLogStore } from '/@/store/modules/errorLog';
+  import { fireErrorApi } from '/@/api/demo/error';
+  import { getColumns } from './data';
+  import { cloneDeep } from 'lodash-es';
+
+  const rowInfo = ref<ErrorLogInfo>();
+  const imgList = ref<string[]>([]);
+
+  const { t } = useI18n();
+  const errorLogStore = useErrorLogStore();
+  const [register, { setTableData }] = useTable({
+    title: t('sys.errorLog.tableTitle'),
+    columns: getColumns(),
+    actionColumn: {
+      width: 80,
+      title: 'Action',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  });
+  const [registerModal, { openModal }] = useModal();
+
+  watch(
+    () => errorLogStore.getErrorLogInfoList,
+    (list) => {
+      nextTick(() => {
+        setTableData(cloneDeep(list));
+      });
+    },
+    {
+      immediate: true,
+    }
+  );
+  const { createMessage } = useMessage();
+  if (import.meta.env.DEV) {
+    createMessage.info(t('sys.errorLog.enableMessage'));
+  }
+  // 查看详情
+  function handleDetail(row: ErrorLogInfo) {
+    rowInfo.value = row;
+    openModal(true);
+  }
+
+  function fireVueError() {
+    throw new Error('fire vue error!');
+  }
+
+  function fireResourceError() {
+    imgList.value.push(`${new Date().getTime()}.png`);
+  }
+
+  async function fireAjaxError() {
+    await fireErrorApi();
+  }
+</script>
diff --git a/src/views/sys/exception/Exception.vue b/src/views/sys/exception/Exception.vue
new file mode 100644
index 0000000..c3db956
--- /dev/null
+++ b/src/views/sys/exception/Exception.vue
@@ -0,0 +1,143 @@
+<script lang="tsx">
+  import type { PropType } from 'vue';
+  import { Result, Button } from 'ant-design-vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+  import notDataSvg from '/@/assets/svg/no-data.svg';
+  import netWorkSvg from '/@/assets/svg/net-error.svg';
+  import { useRoute } from 'vue-router';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useGo, useRedo } from '/@/hooks/web/usePage';
+  import { PageEnum } from '/@/enums/pageEnum';
+
+  interface MapValue {
+    title: string;
+    subTitle: string;
+    btnText?: string;
+    icon?: string;
+    handler?: Fn;
+    status?: string;
+  }
+
+  export default defineComponent({
+    name: 'ErrorPage',
+    props: {
+      // 状态码
+      status: {
+        type: Number as PropType<number>,
+        default: ExceptionEnum.PAGE_NOT_FOUND,
+      },
+
+      title: {
+        type: String as PropType<string>,
+        default: '',
+      },
+
+      subTitle: {
+        type: String as PropType<string>,
+        default: '',
+      },
+
+      full: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+      },
+    },
+    setup(props) {
+      const statusMapRef = ref(new Map<string | number, MapValue>());
+
+      const { query } = useRoute();
+      const go = useGo();
+      const redo = useRedo();
+      const { t } = useI18n();
+      const { prefixCls } = useDesign('app-exception-page');
+
+      const getStatus = computed(() => {
+        const { status: routeStatus } = query;
+        const { status } = props;
+        return Number(routeStatus) || status;
+      });
+
+      const getMapValue = computed((): MapValue => {
+        return unref(statusMapRef).get(unref(getStatus)) as MapValue;
+      });
+
+      const backLoginI18n = t('sys.exception.backLogin');
+      const backHomeI18n = t('sys.exception.backHome');
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
+        title: '403',
+        status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
+        subTitle: t('sys.exception.subTitle403'),
+        btnText: props.full ? backLoginI18n : backHomeI18n,
+        handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
+        title: '404',
+        status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
+        subTitle: t('sys.exception.subTitle404'),
+        btnText: props.full ? backLoginI18n : backHomeI18n,
+        handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.ERROR, {
+        title: '500',
+        status: `${ExceptionEnum.ERROR}`,
+        subTitle: t('sys.exception.subTitle500'),
+        btnText: backHomeI18n,
+        handler: () => go(),
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
+        title: t('sys.exception.noDataTitle'),
+        subTitle: '',
+        btnText: t('common.redo'),
+        handler: () => redo(),
+        icon: notDataSvg,
+      });
+
+      unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
+        title: t('sys.exception.networkErrorTitle'),
+        subTitle: t('sys.exception.networkErrorSubTitle'),
+        btnText: t('common.redo'),
+        handler: () => redo(),
+        icon: netWorkSvg,
+      });
+
+      return () => {
+        const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
+        return (
+          <Result class={prefixCls} status={status as any} title={props.title || title} sub-title={props.subTitle || subTitle}>
+            {{
+              extra: () =>
+                btnText && (
+                  <Button type="primary" onClick={handler}>
+                    {() => btnText}
+                  </Button>
+                ),
+              icon: () => (icon ? <img src={icon} /> : null),
+            }}
+          </Result>
+        );
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-app-exception-page';
+
+  .@{prefix-cls} {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .ant-result-icon {
+      img {
+        max-width: 400px;
+        max-height: 300px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/sys/exception/NetworkErrorException.vue b/src/views/sys/exception/NetworkErrorException.vue
new file mode 100644
index 0000000..e4ce2b9
--- /dev/null
+++ b/src/views/sys/exception/NetworkErrorException.vue
@@ -0,0 +1,11 @@
+<template>
+  <Exception :status="status" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Exception } from '/@/views/sys/exception/index';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+
+  const status = ref(ExceptionEnum.NET_WORK_ERROR);
+</script>
diff --git a/src/views/sys/exception/NotAccessException.vue b/src/views/sys/exception/NotAccessException.vue
new file mode 100644
index 0000000..a5b2a5f
--- /dev/null
+++ b/src/views/sys/exception/NotAccessException.vue
@@ -0,0 +1,11 @@
+<template>
+  <Exception :status="status" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Exception } from '/@/views/sys/exception/index';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+
+  const status = ref(ExceptionEnum.PAGE_NOT_ACCESS);
+</script>
diff --git a/src/views/sys/exception/NotDataErrorException.vue b/src/views/sys/exception/NotDataErrorException.vue
new file mode 100644
index 0000000..9a09dd0
--- /dev/null
+++ b/src/views/sys/exception/NotDataErrorException.vue
@@ -0,0 +1,11 @@
+<template>
+  <Exception :status="status" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Exception } from '/@/views/sys/exception/index';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+
+  const status = ref(ExceptionEnum.PAGE_NOT_DATA);
+</script>
diff --git a/src/views/sys/exception/ServerErrorException.vue b/src/views/sys/exception/ServerErrorException.vue
new file mode 100644
index 0000000..9742f55
--- /dev/null
+++ b/src/views/sys/exception/ServerErrorException.vue
@@ -0,0 +1,11 @@
+<template>
+  <Exception :status="status" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Exception } from '/@/views/sys/exception/index';
+  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+
+  const status = ref(ExceptionEnum.ERROR);
+</script>
diff --git a/src/views/sys/exception/index.ts b/src/views/sys/exception/index.ts
new file mode 100644
index 0000000..fb57528
--- /dev/null
+++ b/src/views/sys/exception/index.ts
@@ -0,0 +1,5 @@
+export { default as Exception } from './Exception.vue';
+export { default as NotAccessException } from './NotAccessException.vue';
+export { default as NetworkErrorException } from './NetworkErrorException.vue';
+export { default as NotDataErrorException } from './NotDataErrorException.vue';
+export { default as ServerErrorException } from './ServerErrorException.vue';
diff --git a/src/views/sys/forget-password/step1.vue b/src/views/sys/forget-password/step1.vue
new file mode 100644
index 0000000..7a7892f
--- /dev/null
+++ b/src/views/sys/forget-password/step1.vue
@@ -0,0 +1,96 @@
+<template>
+  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <FormItem name="mobile" class="enter-x">
+      <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+    </FormItem>
+    <FormItem name="sms" class="enter-x">
+      <CountdownInput size="large" v-model:value="formData.sms" :placeholder="t('sys.login.smsCode')" :sendCodeApi="sendCodeApi" />
+    </FormItem>
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handleNext" :loading="loading"> 下一步 </Button>
+      <Button size="large" block class="mt-4" @click="handleBackLogin">
+        {{ t('sys.login.backSignIn') }}
+      </Button>
+    </FormItem>
+  </Form>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, unref, toRaw } from 'vue';
+
+  import { Form, Input, Button, steps } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum, SmsEnum } from '../login/useLogin';
+  import { phoneVerify, getCaptcha } from '/@/api/sys/user';
+
+  export default defineComponent({
+    name: 'step1',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      Input,
+      CountdownInput,
+    },
+    emits: ['nextStep'],
+    setup(_, { emit }) {
+      const { t } = useI18n();
+      const { handleBackLogin } = useLoginState();
+      const { notification } = useMessage();
+
+      const formRef = ref();
+      const { validForm } = useFormValid(formRef);
+      const { getFormRules } = useFormRules();
+
+      const loading = ref(false);
+      const formData = reactive({
+        mobile: '',
+        sms: '',
+      });
+
+      /**
+       * 下一步
+       */
+      async function handleNext() {
+        const data = await validForm();
+        if (!data) return;
+        const resultInfo = await phoneVerify(
+          toRaw({
+            phone: data.mobile,
+            smscode: data.sms,
+          })
+        );
+        if (resultInfo.success) {
+          let accountInfo = {
+            username: resultInfo.result.username,
+            phone: data.mobile,
+            smscode: resultInfo.result.smscode,
+          };
+          emit('nextStep', accountInfo);
+        } else {
+          notification.error({
+            message: t('sys.api.errorTip'),
+            description: resultInfo.message || t('sys.api.networkExceptionMsg'),
+            duration: 3,
+          });
+        }
+      }
+      //倒计时执行前的函数
+      function sendCodeApi() {
+        return getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
+      }
+      return {
+        t,
+        formRef,
+        formData,
+        getFormRules,
+        handleNext,
+        loading,
+        handleBackLogin,
+        sendCodeApi,
+      };
+    },
+  });
+</script>
diff --git a/src/views/sys/forget-password/step2.vue b/src/views/sys/forget-password/step2.vue
new file mode 100644
index 0000000..b81d49e
--- /dev/null
+++ b/src/views/sys/forget-password/step2.vue
@@ -0,0 +1,103 @@
+<template>
+  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <FormItem name="username" class="enter-x">
+      <Input size="large" v-model:value="formData.username" :placeholder="t('sys.login.userName')" disabled />
+    </FormItem>
+
+    <FormItem name="password" class="enter-x">
+      <StrengthMeter size="large" v-model:value="formData.password" :placeholder="t('sys.login.password')" />
+    </FormItem>
+
+    <FormItem name="confirmPassword" class="enter-x">
+      <InputPassword size="large" visibilityToggle v-model:value="formData.confirmPassword" :placeholder="t('sys.login.confirmPassword')" />
+    </FormItem>
+
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handlePrev"> 上一步 </Button>
+      <Button size="large" block class="mt-4" @click="handleNext"> 下一步 </Button>
+    </FormItem>
+  </Form>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, unref, toRaw, toRefs } from 'vue';
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useFormRules, useFormValid } from '../login/useLogin';
+  import { passwordChange } from '/@/api/sys/user';
+
+  export default defineComponent({
+    name: 'step2',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      InputPassword: Input.Password,
+      Input,
+      StrengthMeter,
+    },
+    props: {
+      accountInfo: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    emits: ['prevStep', 'nextStep'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const { createErrorModal } = useMessage();
+      const { accountInfo } = props;
+      const formRef = ref();
+      const formData = reactive({
+        username: accountInfo.obj.username || '',
+        password: '',
+        confirmPassword: '',
+      });
+      const { getFormRules } = useFormRules(formData);
+      const { validForm } = useFormValid(formRef);
+
+      /**
+       * 上一步
+       */
+      function handlePrev() {
+        emit('prevStep', accountInfo.obj);
+      }
+
+      /**
+       * 下一步
+       */
+      async function handleNext() {
+        const data = await validForm();
+        if (!data) return;
+        const resultInfo = await passwordChange(
+          toRaw({
+            username: data.username,
+            password: data.password,
+            smscode: accountInfo.obj.smscode,
+            phone: accountInfo.obj.phone,
+          })
+        );
+        if (resultInfo.success) {
+          //修改密码
+          emit('nextStep', accountInfo.obj);
+        } else {
+          //错误提示
+          createErrorModal({
+            title: t('sys.api.errorTip'),
+            content: resultInfo.message || t('sys.api.networkExceptionMsg'),
+          });
+        }
+      }
+
+      return {
+        t,
+        formRef,
+        formData,
+        getFormRules,
+        handleNext,
+        handlePrev,
+      };
+    },
+  });
+</script>
diff --git a/src/views/sys/forget-password/step3.vue b/src/views/sys/forget-password/step3.vue
new file mode 100644
index 0000000..77ab02b
--- /dev/null
+++ b/src/views/sys/forget-password/step3.vue
@@ -0,0 +1,71 @@
+<template>
+  <Result status="success" title="更改密码成功" :sub-title="getSubTitle">
+    <template #extra>
+      <a-button key="console" type="primary" @click="finish"> 返回登录 </a-button>
+    </template>
+  </Result>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref, onMounted, watchEffect, watch } from 'vue';
+  import { Form, Input, Button, Result } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useLoginState } from '../login/useLogin';
+  import { useCountdown } from '/@/components/CountDown/src/useCountdown';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'step3',
+    components: {
+      Button,
+      Form,
+      FormItem: Form.Item,
+      Input,
+      Result,
+    },
+    props: {
+      accountInfo: {
+        type: Object,
+        default: () => ({}),
+      },
+      count: propTypes.number.def(5),
+    },
+    emits: ['finish'],
+    setup(props, { emit }) {
+      const { t } = useI18n();
+      const { accountInfo } = props;
+      const { handleBackLogin } = useLoginState();
+
+      const { currentCount, start } = useCountdown(props.count);
+      const getSubTitle = computed(() => {
+        return t('sys.login.subTitleText', [unref(currentCount)]);
+      });
+      /**
+       * 倒计时
+       */
+      watchEffect(() => {
+        if (unref(currentCount) === 1) {
+          setTimeout(() => {
+            finish();
+          }, 500);
+        }
+      });
+
+      /**
+       * 结束回调
+       */
+      function finish() {
+        handleBackLogin();
+        emit('finish');
+      }
+
+      onMounted(() => {
+        start();
+      });
+
+      return {
+        getSubTitle,
+        finish,
+      };
+    },
+  });
+</script>
diff --git a/src/views/sys/iframe/FrameBlank.vue b/src/views/sys/iframe/FrameBlank.vue
new file mode 100644
index 0000000..a8a61f5
--- /dev/null
+++ b/src/views/sys/iframe/FrameBlank.vue
@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'FrameBlank',
+  });
+</script>
diff --git a/src/views/sys/iframe/index.vue b/src/views/sys/iframe/index.vue
new file mode 100644
index 0000000..e73bef3
--- /dev/null
+++ b/src/views/sys/iframe/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div :class="prefixCls" :style="getWrapStyle">
+    <Spin :spinning="loading" size="large" :style="getWrapStyle">
+      <iframe :src="frameSrc" :class="`${prefixCls}__main`" ref="frameRef" @load="hideLoading"></iframe>
+    </Spin>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { ref, unref, computed } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+
+  defineProps({
+    frameSrc: propTypes.string.def(''),
+  });
+
+  const loading = ref(true);
+  const topRef = ref(50);
+  const heightRef = ref(window.innerHeight);
+  const frameRef = ref<HTMLFrameElement>();
+  const { headerHeightRef } = useLayoutHeight();
+
+  const { prefixCls } = useDesign('iframe-page');
+  useWindowSizeFn(calcHeight, 150, { immediate: true });
+
+  const getWrapStyle = computed((): CSSProperties => {
+    return {
+      height: `${unref(heightRef)}px`,
+    };
+  });
+
+  function calcHeight() {
+    const iframe = unref(frameRef);
+    if (!iframe) {
+      return;
+    }
+    const top = headerHeightRef.value;
+    topRef.value = top;
+    heightRef.value = window.innerHeight - top;
+    const clientHeight = document.documentElement.clientHeight - top;
+    iframe.style.height = `${clientHeight}px`;
+  }
+
+  function hideLoading() {
+    loading.value = false;
+    calcHeight();
+  }
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-iframe-page';
+
+  .@{prefix-cls} {
+    .ant-spin-nested-loading {
+      position: relative;
+      height: 100%;
+
+      .ant-spin-container {
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+      }
+    }
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__main {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background-color: @component-background;
+      border: 0;
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue
new file mode 100644
index 0000000..b43df99
--- /dev/null
+++ b/src/views/sys/lock/LockPage.vue
@@ -0,0 +1,241 @@
+<template>
+  <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center">
+    <div
+      :class="`${prefixCls}__unlock`"
+      class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <LockOutlined />
+      <span>{{ t('sys.lock.unlock') }}</span>
+    </div>
+
+    <div class="flex w-screen h-screen justify-center items-center">
+      <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+        <span>{{ hour }}</span>
+        <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
+        <span> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="`${prefixCls}-entry`" v-show="!showDate">
+        <div :class="`${prefixCls}-entry-content`">
+          <div :class="`${prefixCls}-entry__header enter-x`">
+            <img :src="userinfo.avatar || headerImg" :class="`${prefixCls}-entry__header-img`" />
+            <p :class="`${prefixCls}-entry__header-name`">
+              {{ userinfo.realname }}
+            </p>
+          </div>
+          <InputPassword @change="unLock('change')" @keyup.enter="unLock('enter')" :placeholder="t('sys.lock.placeholder')" class="enter-x" v-model:value="password" />
+          <span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
+            {{ t('sys.lock.alert') }}
+          </span>
+          <div :class="`${prefixCls}-entry__footer enter-x`" style="justify-content:center;margin-top: 4px">
+            <!-- <a-button type="link" size="small" class="mt-2 mr-2 enter-x" :disabled="loading" @click="handleShowForm(true)">
+               {{ t('common.back') }}
+             </a-button>-->
+            <a-button  type="link" size="small" :disabled="loading" @click="goLogin">
+              {{ t('sys.lock.backToLogin') }}
+            </a-button>
+            <!-- <a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loading">
+               {{ t('sys.lock.entry') }}
+             </a-button>-->
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
+      <div class="text-5xl mb-4 enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ref, computed, onMounted, onUnmounted} from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useLockStore } from '/@/store/modules/lock';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useNow } from './useNow';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { LockOutlined } from '@ant-design/icons-vue';
+  import headerImg from '/@/assets/images/header.jpg';
+
+  const InputPassword = Input.Password;
+
+  const password = ref('');
+  const loading = ref(false);
+  const errMsg = ref(false);
+  const showDate = ref(true);
+
+  const { prefixCls } = useDesign('lock-page');
+  const lockStore = useLockStore();
+  const userStore = useUserStore();
+
+  const { hour, month, minute, meridiem, year, day, week } = useNow(true);
+
+  const { t } = useI18n();
+
+  const userinfo = computed(() => {
+    return userStore.getUserInfo || {};
+  });
+
+  /**
+   * @description: unLock
+   * 
+   * @param type enter 回车 change input值发生改变 不提示锁屏密码错误
+   */
+  async function unLock(type) {
+    if (!password.value) {
+      return;
+    }
+    let pwd = password.value;
+    try {
+      loading.value = true;
+      const res = await lockStore.unLock(pwd);
+      if(type === 'enter'){
+        errMsg.value = !res;
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function goLogin() {
+    userStore.logout(true);
+    lockStore.resetLockInfo();
+  }
+
+  function handleShowForm(show = false) {
+    showDate.value = show;
+  }
+
+  /**
+   * 监听键盘触发事件
+   * 
+   * @param event
+   */
+  function handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      // 处理回车键按下事件
+      handleShowForm(true);
+      password.value = '';
+    }
+  }
+  
+  onMounted(()=>{
+    window.addEventListener('keydown', handleKeyDown);
+  })
+
+  onUnmounted(()=>{
+    window.removeEventListener('keydown', handleKeyDown);
+  })
+
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-lock-page';
+
+  .@{prefix-cls} {
+    z-index: @lock-page-z-index;
+
+    &__unlock {
+      transform: translate(-50%, 0);
+    }
+
+    &__hour,
+    &__minute {
+      display: flex;
+      font-weight: 700;
+      color: #bababa;
+      background-color: #141313;
+      border-radius: 30px;
+      justify-content: center;
+      align-items: center;
+
+      @media screen and (max-width: @screen-md) {
+        span:not(.meridiem) {
+          font-size: 160px;
+        }
+      }
+
+      @media screen and (min-width: @screen-md) {
+        span:not(.meridiem) {
+          font-size: 160px;
+        }
+      }
+
+      @media screen and (max-width: @screen-sm) {
+        span:not(.meridiem) {
+          font-size: 90px;
+        }
+      }
+      @media screen and (min-width: @screen-lg) {
+        span:not(.meridiem) {
+          font-size: 220px;
+        }
+      }
+
+      @media screen and (min-width: @screen-xl) {
+        span:not(.meridiem) {
+          font-size: 260px;
+        }
+      }
+      @media screen and (min-width: @screen-2xl) {
+        span:not(.meridiem) {
+          font-size: 320px;
+        }
+      }
+    }
+
+    &-entry {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(8px);
+      justify-content: center;
+      align-items: center;
+
+      &-content {
+        width: 260px;
+      }
+
+      &__header {
+        text-align: center;
+
+        &-img {
+          width: 70px;
+          margin: 0 auto;
+          border-radius: 50%;
+        }
+
+        &-name {
+          margin-top: 5px;
+          font-weight: 500;
+          color: #bababa;
+        }
+      }
+
+      &__err-msg {
+        display: inline-block;
+        margin-top: 10px;
+        color: @error-color;
+      }
+
+      &__footer {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+</style>
diff --git a/src/views/sys/lock/index.vue b/src/views/sys/lock/index.vue
new file mode 100644
index 0000000..e8c4d55
--- /dev/null
+++ b/src/views/sys/lock/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <transition name="fade-bottom" mode="out-in">
+    <LockPage v-if="getIsLock" />
+  </transition>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import LockPage from './LockPage.vue';
+  import { useLockStore } from '/@/store/modules/lock';
+
+  const lockStore = useLockStore();
+  const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
+</script>
diff --git a/src/views/sys/lock/useNow.ts b/src/views/sys/lock/useNow.ts
new file mode 100644
index 0000000..ee461fc
--- /dev/null
+++ b/src/views/sys/lock/useNow.ts
@@ -0,0 +1,60 @@
+import { dateUtil } from '/@/utils/dateUtil';
+import { reactive, toRefs } from 'vue';
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+
+export function useNow(immediate = true) {
+  let timer: IntervalHandle;
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: '',
+  });
+
+  const update = () => {
+    const now = dateUtil();
+
+    const h = now.format('HH');
+    const m = now.format('mm');
+    const s = now.get('s');
+
+    state.year = now.get('y');
+    state.month = now.get('M') + 1;
+    state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()];
+    state.day = now.get('date');
+    state.hour = h;
+    state.minute = m;
+    state.second = s;
+
+    state.meridiem = now.format('A');
+  };
+
+  function start() {
+    update();
+    clearInterval(timer);
+    timer = setInterval(() => update(), 1000);
+  }
+
+  function stop() {
+    clearInterval(timer);
+  }
+
+  tryOnMounted(() => {
+    immediate && start();
+  });
+
+  tryOnUnmounted(() => {
+    stop();
+  });
+
+  return {
+    ...toRefs(state),
+    start,
+    stop,
+  };
+}
diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue
new file mode 100644
index 0000000..1c9596d
--- /dev/null
+++ b/src/views/sys/login/LoginForm.vue
@@ -0,0 +1,194 @@
+<template>
+  <LoginFormTitle v-show="getShow" class="enter-x" />
+  <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef" v-show="getShow" @keypress.enter="handleLogin">
+    <FormItem name="account" class="enter-x">
+      <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
+    </FormItem>
+    <FormItem name="password" class="enter-x">
+      <InputPassword size="large" visibilityToggle v-model:value="formData.password" :placeholder="t('sys.login.password')" />
+    </FormItem>
+
+    <!--验证码-->
+    <ARow class="enter-x">
+      <ACol :span="12">
+        <FormItem name="inputCode" class="enter-x">
+          <Input size="large" v-model:value="formData.inputCode" :placeholder="t('sys.login.inputCode')" style="min-width: 100px" />
+        </FormItem>
+      </ACol>
+      <ACol :span="8">
+        <FormItem :style="{ 'text-align': 'right', 'margin-left': '20px' }" class="enter-x">
+          <img
+            v-if="randCodeData.requestCodeSuccess"
+            style="margin-top: 2px; max-width: initial"
+            :src="randCodeData.randCodeImage"
+            @click="handleChangeCheckCode"
+          />
+          <img v-else style="margin-top: 2px; max-width: initial" src="../../../assets/images/checkcode.png" @click="handleChangeCheckCode" />
+        </FormItem>
+      </ACol>
+    </ARow>
+
+    <ARow class="enter-x">
+      <ACol :span="12">
+        <FormItem>
+          <!-- No logic, you need to deal with it yourself -->
+          <Checkbox v-model:checked="rememberMe" size="small">
+            {{ t('sys.login.rememberMe') }}
+          </Checkbox>
+        </FormItem>
+      </ACol>
+      <ACol :span="12">
+        <FormItem :style="{ 'text-align': 'right' }">
+          <!-- No logic, you need to deal with it yourself -->
+          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
+            {{ t('sys.login.forgetPassword') }}
+          </Button>
+        </FormItem>
+      </ACol>
+    </ARow>
+
+    <FormItem class="enter-x">
+      <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+        {{ t('sys.login.loginButton') }}
+      </Button>
+      <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
+              {{ t('sys.login.registerButton') }}
+            </Button> -->
+    </FormItem>
+    <ARow class="enter-x">
+      <ACol :md="8" :xs="24">
+        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
+          {{ t('sys.login.mobileSignInFormTitle') }}
+        </Button>
+      </ACol>
+      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
+        <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
+          {{ t('sys.login.qrSignInFormTitle') }}
+        </Button>
+      </ACol>
+      <ACol :md="7" :xs="24">
+        <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
+          {{ t('sys.login.registerButton') }}
+        </Button>
+      </ACol>
+    </ARow>
+
+    <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
+
+    <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
+      <a @click="onThirdLogin('github')" title="github"><GithubFilled /></a>
+      <a @click="onThirdLogin('wechat_enterprise')" title="企业微信"> <icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
+      <a @click="onThirdLogin('dingtalk')" title="钉钉"><DingtalkCircleFilled /></a>
+      <a @click="onThirdLogin('wechat_open')" title="微信"><WechatFilled /></a>
+    </div>
+  </Form>
+  <!-- 第三方登录相关弹框 -->
+  <ThirdModal ref="thirdModalRef"></ThirdModal>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, toRaw, unref, computed, onMounted } from 'vue';
+
+  import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
+  import { GithubFilled, WechatFilled, DingtalkCircleFilled } from '@ant-design/icons-vue';
+  import { IconFont } from '/@/utils/iconfont2';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import ThirdModal from './ThirdModal.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { useUserStore } from '/@/store/modules/user';
+  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getCodeInfo } from '/@/api/sys/user';
+  import {  encryptAESCBC } from '/@/utils/cipher';
+
+  const ACol = Col;
+  const ARow = Row;
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+  const { t } = useI18n();
+  const { notification, createErrorModal } = useMessage();
+  const { prefixCls } = useDesign('login');
+  const userStore = useUserStore();
+
+  const { setLoginState, getLoginState } = useLoginState();
+  const { getFormRules } = useFormRules();
+
+  const formRef = ref();
+  const thirdModalRef = ref();
+  const loading = ref(false);
+  const rememberMe = ref(false);
+
+  const formData = reactive({
+    account: 'admin',
+    password: '123456',
+    inputCode: '',
+  });
+  const randCodeData = reactive({
+    randCodeImage: '',
+    requestCodeSuccess: false,
+    checkKey: null,
+  });
+
+  const { validForm } = useFormValid(formRef);
+
+  //onKeyStroke('Enter', handleLogin);
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
+
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+    try {
+      loading.value = true;
+
+      // 密码使用AES加密传输
+      const encryptedPassword = encryptAESCBC(data.password);
+      const { userInfo } = await userStore.login(
+        toRaw({
+          password: encryptedPassword,
+          username: data.account,
+          captcha: data.inputCode,
+          checkKey: randCodeData.checkKey,
+          mode: 'none', //不要默认的错误提示
+        })
+      );
+      if (userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.api.networkExceptionMsg'),
+        duration: 3,
+      });
+      loading.value = false;
+      handleChangeCheckCode();
+    }
+  }
+  function handleChangeCheckCode() {
+    formData.inputCode = '';
+    // 代码逻辑说明: [QQYUN-10775]验证码可以复用 #7674------------
+    randCodeData.checkKey = new Date().getTime() + Math.random().toString(36).slice(-4); // 1629428467008;
+    getCodeInfo(randCodeData.checkKey).then((res) => {
+      randCodeData.randCodeImage = res;
+      randCodeData.requestCodeSuccess = true;
+    });
+  }
+
+  /**
+   * 第三方登录
+   * @param type
+   */
+  function onThirdLogin(type) {
+    thirdModalRef.value.onThirdLogin(type);
+  }
+  //初始化验证码
+  onMounted(() => {
+    handleChangeCheckCode();
+  });
+</script>
diff --git a/src/views/sys/login/LoginFormTitle.vue b/src/views/sys/login/LoginFormTitle.vue
new file mode 100644
index 0000000..a673636
--- /dev/null
+++ b/src/views/sys/login/LoginFormTitle.vue
@@ -0,0 +1,25 @@
+<template>
+  <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
+    {{ getFormTitle }}
+  </h2>
+</template>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { LoginStateEnum, useLoginState } from './useLogin';
+
+  const { t } = useI18n();
+
+  const { getLoginState } = useLoginState();
+
+  const getFormTitle = computed(() => {
+    const titleObj = {
+      [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
+      [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
+      [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
+      [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
+      [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+    };
+    return titleObj[unref(getLoginState)];
+  });
+</script>
diff --git a/src/views/sys/login/LoginSelect.vue b/src/views/sys/login/LoginSelect.vue
new file mode 100644
index 0000000..486d0a2
--- /dev/null
+++ b/src/views/sys/login/LoginSelect.vue
@@ -0,0 +1,332 @@
+<template>
+  <BasicModal v-bind="config" @register="registerModal" :title="currTitle" wrapClassName="loginSelectModal" v-model:visible="visible" :maxHeight="500">
+    <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout" :colon="false" class="loginSelectForm">
+      <!--多租户选择-->
+      <a-form-item v-if="isMultiTenant" name="tenantId" :validate-status="validate_status">
+        <!--label内容-->
+        <template #label>
+          <a-tooltip placement="topLeft">
+            <template #title>
+              <span>您隶属于多租户，请选择登录租户</span>
+            </template>
+            <a-avatar style="background-color: #87d068" :size="30"> 租户 </a-avatar>
+          </a-tooltip>
+        </template>
+        <template #extra v-if="validate_status == 'error'">
+          <span style="color: #ed6f6f">请选择登录租户</span>
+        </template>
+        <!--租户下拉内容-->
+        <a-select
+          v-model:value="formState.tenantId"
+          @change="handleTenantChange"
+          placeholder="请选择登录租户"
+          :class="{ 'valid-error': validate_status == 'error' }"
+        >
+          <template v-for="tenant in tenantList" :key="tenant.id">
+            <a-select-option :value="tenant.id">{{ tenant.name }}</a-select-option>
+          </template>
+        </a-select>
+      </a-form-item>
+      <!--多部门选择-->
+      <a-form-item v-if="isMultiDepart" :validate-status="validate_status1" :colon="false">
+        <!--label内容-->
+        <template #label>
+          <a-tooltip placement="topLeft">
+            <template #title>
+              <span>您隶属于多部门，请选择登录部门</span>
+            </template>
+            <a-avatar style="background-color: rgb(104, 208, 203)" :size="30"> 部门 </a-avatar>
+          </a-tooltip>
+        </template>
+        <template #extra v-if="validate_status1 == 'error'">
+          <span style="color: #ed6f6f">请选择登录部门</span>
+        </template>
+        <!--部门下拉内容-->
+        <a-select
+          v-model:value="formState.orgCode"
+          @change="handleDepartChange"
+          placeholder="请选择登录部门"
+          :class="{ 'valid-error': validate_status1 == 'error' }"
+        >
+          <template v-for="depart in departList" :key="depart.orgCode">
+            <a-select-option :value="depart.orgCode">{{ depart.departName }}</a-select-option>
+          </template>
+        </a-select>
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-button @click="handleSubmit" type="primary">确认</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, computed, watch, unref, reactive, UnwrapRef } from 'vue';
+  import { Avatar } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+  import { defHttp } from '/@/utils/http/axios';
+  interface FormState {
+    orgCode: string | undefined;
+    tenantId: number;
+  }
+  export default defineComponent({
+    name: 'loginSelect',
+    components: {
+      Avatar,
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup(props, { emit }) {
+      const userStore = useUserStore();
+      const { notification } = useMessage();
+      //租户配置
+      const isMultiTenant = ref(false);
+      const tenantList = ref([]);
+      const validate_status = ref('');
+      //部门配置
+      const isMultiDepart = ref(false);
+      const departList = ref([]);
+      const validate_status1 = ref('');
+      //弹窗显隐
+      const visible = ref(false);
+      //登录用户
+      const username = ref('');
+      //表单
+      const formRef = ref();
+      //选择的租户部门信息
+      const formState: UnwrapRef<FormState> = reactive({
+        orgCode: undefined,
+        tenantId: null,
+      });
+
+      const config = {
+        maskClosable: false,
+        closable: false,
+        canFullscreen: false,
+        width: '500px',
+        minHeight: 20,
+        maxHeight: 20,
+      };
+      //弹窗操作
+      const [registerModal, { closeModal }] = useModalInner();
+
+      //当前标题
+      const currTitle = computed(() => {
+        if (unref(isMultiDepart) && unref(isMultiTenant)) {
+          return '请选择租户和部门';
+        } else if (unref(isMultiDepart) && !unref(isMultiTenant)) {
+          return '请选择部门';
+        } else if (!unref(isMultiDepart) && unref(isMultiTenant)) {
+          return '请选择租户';
+        }
+      });
+
+      const rules = ref({
+        tenantId: [{ required: unref(isMultiTenant), type: 'number', message: '请选择租户', trigger: 'change' }],
+        orgCode: [{ required: unref(isMultiDepart), message: '请选择部门', trigger: 'change' }],
+      });
+
+      const layout = {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 },
+      };
+      /**
+       * 处理部门情况
+       */
+      function bizDepart(loginResult) {
+        //如果登录接口返回了用户上次登录租户ID，则不需要重新选择
+        if(loginResult.userInfo?.orgCode && loginResult.userInfo?.orgCode!==''){
+          isMultiDepart.value = false;
+          return;
+        }
+        
+        let multi_depart = loginResult.multi_depart;
+        //0:无部门 1:一个部门 2:多个部门
+        if (multi_depart == 0) {
+          // notification.warn({
+          //   message: '提示',
+          //   description: `您尚未归属部门,请确认账号信息`,
+          //   duration: 3,
+          // });
+          isMultiDepart.value = false;
+        } else if (multi_depart == 2) {
+          isMultiDepart.value = true;
+          departList.value = loginResult.departs;
+        } else {
+          isMultiDepart.value = false;
+        }
+      }
+
+      /**
+       * 处理租户情况
+       */
+      function bizTenantList(loginResult) {
+        //如果登录接口返回了用户上次登录租户ID，则不需要重新选择
+        if(loginResult.userInfo?.loginTenantId && loginResult.userInfo?.loginTenantId!==0){
+          isMultiTenant.value = false;
+          return;
+        }
+        
+        let tenantArr = loginResult.tenantList;
+        if (Array.isArray(tenantArr)) {
+          if (tenantArr.length === 0) {
+            isMultiTenant.value = false;
+            userStore.setTenant(formState.tenantId);
+          } else if (tenantArr.length === 1) {
+            formState.tenantId = tenantArr[0].id;
+            isMultiTenant.value = false;
+            userStore.setTenant(formState.tenantId);
+          } else {
+            isMultiTenant.value = true;
+            tenantList.value = tenantArr;
+          }
+        }
+      }
+
+      /**
+       * 确认选中的租户和部门信息
+       */
+      function handleSubmit() {
+        if (unref(isMultiTenant) && !formState.tenantId) {
+          validate_status.value = 'error';
+          return false;
+        }
+        if (unref(isMultiDepart) && !formState.orgCode) {
+          validate_status1.value = 'error';
+          return false;
+        }
+        formRef.value
+          .validate()
+          .then(() => {
+            departResolve()
+              .then(() => {
+                userStore.setTenant(formState.tenantId);
+                emit('success');
+              })
+              .catch((e) => {
+                console.log('登录选择出现问题', e);
+              })
+              .finally(() => {
+                close();
+              });
+          })
+          .catch((err) => {
+            console.log('表单校验未通过error', err);
+          });
+      }
+      /**
+       *切换选择部门
+       */
+      function departResolve() {
+        return new Promise((resolve, reject) => {
+          if (!unref(isMultiDepart) && !unref(isMultiTenant)) {
+            resolve();
+          } else {
+            let params = { orgCode: formState.orgCode,loginTenantId: formState.tenantId, username: unref(username) };
+            defHttp.put({ url: '/sys/selectDepart', params }).then((res) => {
+              if (res.userInfo) {
+                userStore.setUserInfo(res.userInfo);
+                resolve();
+              } else {
+                requestFailed(res);
+                userStore.logout();
+                reject();
+              }
+            });
+          }
+        });
+      }
+
+      /**
+       * 请求失败处理
+       */
+      function requestFailed(err) {
+        notification.error({
+          message: '登录失败',
+          description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
+          duration: 4,
+        });
+      }
+
+      /**
+       * 关闭model
+       */
+      function close() {
+        closeModal();
+        reset();
+      }
+      /**
+       * 弹窗打开前处理
+       */
+      async function show(loginResult) {
+        if (loginResult) {
+          username.value = userStore.username;
+          await reset();
+          await bizDepart(loginResult);
+          await bizTenantList(loginResult);
+          if (!unref(isMultiDepart) && !unref(isMultiTenant)) {
+            emit('success', userStore.getUserInfo);
+          } else {
+            visible.value = true;
+          }
+        }
+        //登录弹窗完成后，将登录的标识设置成false
+        loginResult.isLogin = false;
+        userStore.setLoginInfo(loginResult);
+      }
+
+      /**
+       *重置数据
+       */
+      function reset() {
+        tenantList.value = [];
+        validate_status.value = '';
+
+        departList.value = [];
+        validate_status1.value = '';
+      }
+
+      function handleTenantChange(e) {
+        validate_status.value = '';
+      }
+
+      function handleDepartChange(e) {
+        validate_status1.value = '';
+      }
+
+      return {
+        registerModal,
+        visible,
+        tenantList,
+        isMultiTenant,
+        validate_status,
+        isMultiDepart,
+        departList,
+        validate_status1,
+        formState,
+        rules,
+        layout,
+        formRef,
+        currTitle,
+        config,
+        handleTenantChange,
+        handleDepartChange,
+        show,
+        handleSubmit,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .loginSelectForm {
+    margin-bottom: -20px;
+  }
+
+  .loginSelectModal {
+    top: 10px;
+  }
+</style>
diff --git a/src/views/sys/login/MobileForm.vue b/src/views/sys/login/MobileForm.vue
new file mode 100644
index 0000000..d9b386f
--- /dev/null
+++ b/src/views/sys/login/MobileForm.vue
@@ -0,0 +1,90 @@
+<template>
+  <template v-if="getShow">
+    <LoginFormTitle class="enter-x" />
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="mobile" class="enter-x">
+        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" class="fix-auto-fill" />
+      </FormItem>
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+          :sendCodeApi="sendCodeApi"
+        />
+      </FormItem>
+
+      <FormItem class="enter-x">
+        <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+          {{ t('sys.login.loginButton') }}
+        </Button>
+        <Button size="large" block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </Button>
+      </FormItem>
+    </Form>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, computed, unref, toRaw } from 'vue';
+  import { Form, Input, Button } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import LoginFormTitle from './LoginFormTitle.vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum, SmsEnum } from './useLogin';
+  import { useUserStore } from '/@/store/modules/user';
+  import { getCaptcha } from '/@/api/sys/user';
+  const FormItem = Form.Item;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+  const { getFormRules } = useFormRules();
+  const { notification, createErrorModal } = useMessage();
+  const userStore = useUserStore();
+  const formRef = ref();
+  const loading = ref(false);
+  const formData = reactive({
+    mobile: '',
+    sms: '',
+  });
+  const { validForm } = useFormValid(formRef);
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
+  /**
+   * 登录
+   */
+  async function handleLogin() {
+    const data = await validForm();
+    if (!data) return;
+    try {
+      loading.value = true;
+      const userInfo = await userStore.phoneLogin(
+        toRaw({
+          mobile: data.mobile,
+          captcha: data.sms,
+          mode: 'none', //不要默认的错误提示
+        })
+      );
+      if (userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.api.networkExceptionMsg'),
+        duration: 3,
+      });
+    } finally {
+      loading.value = false;
+    }
+  }
+  //倒计时执行前的函数
+  function sendCodeApi() {
+    // 代码逻辑说明: 【issues/8567】严重：修改密码存在水平越权问题：登录应该用登录模板不应该用忘记密码的模板---
+    return getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.LOGIN });
+  }
+</script>
diff --git a/src/views/sys/login/OAuth2Login.vue b/src/views/sys/login/OAuth2Login.vue
new file mode 100644
index 0000000..c36d2b4
--- /dev/null
+++ b/src/views/sys/login/OAuth2Login.vue
@@ -0,0 +1,129 @@
+<template>
+  <div> </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import {isOAuth2AppEnv, sysOAuth2Callback, sysOAuth2Login} from '/@/views/sys/login/useLogin';
+  import { useRouter } from 'vue-router';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { router } from '/@/router';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getAuthCache, getTenantId, getToken } from "/@/utils/auth";
+  import { OAUTH2_THIRD_LOGIN_TENANT_ID } from "@/enums/cacheEnum";
+  import { defHttp } from "@/utils/http/axios";
+  import { requestAuthCode } from "dingtalk-jsapi";
+
+  const isOAuth = ref<boolean>(isOAuth2AppEnv());
+  const env = ref<any>({ thirdApp: false, wxWork: false, dingtalk: false });
+  const { currentRoute } = useRouter();
+  const route = currentRoute.value;
+  if (!isOAuth2AppEnv()) {
+    router.replace({ path: PageEnum.BASE_LOGIN, query: route.query });
+  }
+
+  if (isOAuth.value) {
+    checkEnv();
+  }
+
+  /**
+   * 检测当前的环境
+   */
+  function checkEnv() {
+    // 判断当时是否是企业微信环境
+    if (/wxwork/i.test(navigator.userAgent)) {
+      env.value.thirdApp = true;
+      env.value.wxWork = true;
+    }
+    // 判断当时是否是钉钉环境
+    if (/dingtalk/i.test(navigator.userAgent)) {
+      env.value.thirdApp = true;
+      env.value.dingtalk = true;
+    }
+    doOAuth2Login();
+  }
+
+  /**
+   * 进行OAuth2登录操作
+   */
+  function doOAuth2Login() {
+    if (env.value.thirdApp) {
+      // 判断是否携带了Token，是就说明登录成功
+      if (route.query.oauth2LoginToken) {
+        let token = route.query.oauth2LoginToken;
+        //执行登录操作
+        thirdLogin({ token, thirdType: route.query.thirdType,tenantId: getTenantId });
+      } else if (env.value.wxWork) {
+        sysOAuth2Login('wechat_enterprise');
+      } else if (env.value.dingtalk) {
+        //新版钉钉登录
+        dingdingLogin();
+      }
+    }
+  }
+
+  /**
+   * 第三方登录
+   * @param params
+   */
+  function thirdLogin(params) {
+    const userStore = useUserStore();
+    const { notification } = useMessage();
+    const { t } = useI18n();
+    userStore.ThirdLogin(params).then((res) => {
+      if (res && res.userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
+          duration: 3,
+        });
+      } else {
+        notification.error({
+          message: '登录失败',
+          description: ((res.response || {}).data || {}).message || res.message || '请求出现错误，请稍后再试',
+          duration: 4,
+        });
+      }
+    });
+  }
+
+  /**
+   * 钉钉登录
+   */
+  function dingdingLogin() {
+    //先获取钉钉的企业id，如果没有配置 还是走原来的逻辑，走原来的逻辑 需要判断存不存在token，存在token直接去首页
+    let tenantId = getAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID) || 0;
+    let url = `/sys/thirdLogin/get/corpId/clientId?tenantId=${tenantId}`;
+    // 代码逻辑说明: 不要使用getAction online里面的，要用defHttp---
+    defHttp.get({ url:url },{ isTransformResponse: false }).then((res) => {
+      if (res.success) {
+        if(res.result && res.result.corpId && res.result.clientId){
+          requestAuthCode({ corpId: res.result.corpId, clientId: res.result.clientId }).then((res) => {
+            let { code } = res;
+            sysOAuth2Callback(code);
+          });
+        }else{
+          toOldAuthLogin();
+        }
+      } else {
+        toOldAuthLogin();
+      }
+    }).catch((err) => {
+      toOldAuthLogin();
+    });
+  }
+
+  /**
+   * 旧版钉钉登录
+   */
+  function toOldAuthLogin() {
+    let token = getToken();
+    if (token) {
+      router.replace({ path: PageEnum.BASE_HOME });
+    } else {
+      sysOAuth2Login('dingtalk');
+    }
+  }
+</script>
diff --git a/src/views/sys/login/SessionTimeoutLogin.vue b/src/views/sys/login/SessionTimeoutLogin.vue
new file mode 100644
index 0000000..d78a2f3
--- /dev/null
+++ b/src/views/sys/login/SessionTimeoutLogin.vue
@@ -0,0 +1,53 @@
+<template>
+  <transition>
+    <div :class="prefixCls">
+      <MiniLogin sessionTimeout />
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import MiniLogin from '/@/views/system/loginmini/MiniLogin.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useUserStore } from '/@/store/modules/user';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { useAppStore } from '/@/store/modules/app';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+
+  const { prefixCls } = useDesign('st-login');
+  const userStore = useUserStore();
+  const permissionStore = usePermissionStore();
+  const appStore = useAppStore();
+  const userId = ref<Nullable<number | string>>(0);
+
+  const isBackMode = () => {
+    return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+  };
+
+  onMounted(() => {
+    // 记录当前的UserId
+    userId.value = userStore.getUserInfo?.userId;
+    console.log('Mounted', userStore.getUserInfo);
+  });
+
+  onBeforeUnmount(() => {
+    if (userId.value && userId.value !== userStore.getUserInfo.userId) {
+      // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
+      document.location.reload();
+    } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
+      // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
+      document.location.reload();
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-st-login';
+
+  .@{prefix-cls} {
+    position: fixed;
+    z-index: 9999999;
+    width: 100%;
+    height: 100%;
+    background: @component-background;
+  }
+</style>
diff --git a/src/views/sys/login/ThirdModal.vue b/src/views/sys/login/ThirdModal.vue
new file mode 100644
index 0000000..607bdfa
--- /dev/null
+++ b/src/views/sys/login/ThirdModal.vue
@@ -0,0 +1,64 @@
+<template>
+  <!-- 第三方登录绑定账号密码输入弹框 -->
+  <a-modal title="请输入密码" v-model:open="thirdPasswordShow" @ok="thirdLoginCheckPassword" @cancel="thirdLoginNoPassword">
+    <a-input-password placeholder="请输入密码" v-model:value="thirdLoginPassword" style="margin: 15px; width: 80%" />
+  </a-modal>
+
+  <!-- 第三方登录提示是否绑定账号弹框 -->
+  <a-modal :footer="null" :closable="false" v-model:open="thirdConfirmShow" :class="'ant-modal-confirm'">
+    <div class="ant-modal-confirm-body-wrapper">
+      <div class="ant-modal-confirm-body">
+        <QuestionCircleFilled style="color: #faad14" />
+        <span class="ant-modal-confirm-title">提示</span>
+        <div class="ant-modal-confirm-content"> 已有同名账号存在,请确认是否绑定该账号？ </div>
+      </div>
+      <div class="ant-modal-confirm-btns">
+        <a-button @click="thirdLoginUserCreate" :loading="thirdCreateUserLoding">创建新账号</a-button>
+        <a-button @click="thirdLoginUserBind" type="primary">确认绑定</a-button>
+      </div>
+    </div>
+  </a-modal>
+
+  <!-- 第三方登录绑定手机号 -->
+  <a-modal title="绑定手机号" v-model:open="bindingPhoneModal" :maskClosable="false">
+    <Form class="p-4 enter-x" style="margin: 15px 10px">
+      <FormItem class="enter-x">
+        <a-input size="large" placeholder="请输入手机号" v-model:value="thirdPhone" class="fix-auto-fill">
+          <template #prefix>
+            <Icon icon="ant-design:mobile-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
+          </template>
+        </a-input>
+      </FormItem>
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput size="large" class="fix-auto-fill" v-model:value="thirdCaptcha" placeholder="请输入验证码" :sendCodeApi="sendCodeApi">
+          <template #prefix>
+            <Icon icon="ant-design:mail-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
+          </template>
+        </CountdownInput>
+      </FormItem>
+    </Form>
+    <template #footer>
+      <a-button type="primary" @click="thirdHandleOk">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Form, Input } from 'ant-design-vue';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { useThirdLogin } from '/@/hooks/system/useThirdLogin';
+  import { QuestionCircleFilled } from '@ant-design/icons-vue';
+
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+
+  export default defineComponent({
+    name: 'ThirdModal',
+    components: { FormItem, Form, InputPassword, CountdownInput, QuestionCircleFilled },
+    setup() {
+      return {
+        ...useThirdLogin(),
+      };
+    },
+  });
+</script>
diff --git a/src/views/sys/login/TokenLoginPage.vue b/src/views/sys/login/TokenLoginPage.vue
new file mode 100644
index 0000000..66acab7
--- /dev/null
+++ b/src/views/sys/login/TokenLoginPage.vue
@@ -0,0 +1,217 @@
+<template>
+    <div class="app-loading">
+        <div class="app-loading-wrap">
+            <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo">
+            <div class="app-loading-dots">
+                <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+            </div>
+            <div class="app-loading-title">JeecgBoot 企业级低代码平台</div>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts">
+  /**
+   * 地址中携带token，跳转至此页面进行登录操作
+   */
+  import { useRoute, useRouter } from 'vue-router';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  
+  export default {
+    name: "TokenLogin",
+    setup(){
+      const route = useRoute();
+      let router = useRouter();
+      const {createMessage, notification} = useMessage()
+      const {t} = useI18n();
+      const routeQuery:any = route.query;
+      if(!routeQuery){
+        createMessage.warning('参数无效')
+      }
+     
+      const token = routeQuery['loginToken'];
+      if(!token){
+        createMessage.warning('token无效')
+      }
+      const userStore = useUserStore();
+      userStore.ThirdLogin({ token, thirdType:'email', goHome: false }).then(res => {
+        console.log("res====>doThirdLogin",res)
+        if(res && res.userInfo){
+          requestSuccess(res)
+        }else{
+          requestFailed(res)
+        }
+      });
+
+      function requestFailed (err) {
+        notification.error({
+          message: '登录失败',
+          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
+          duration: 4,
+        });
+      }
+      
+      function requestSuccess(res){
+        let info = routeQuery.info;
+        if(info){
+          let query = JSON.parse(info);
+          
+          // 代码逻辑说明: QQYUN-4882【简流】节点消息通知 邮箱 点击办理跳到了应用首页
+          let path = '';
+          if(query.isLowApp === 1){
+            path = '/myapps/personalOffice/myTodo'
+          }else{
+            let taskId = query.taskId;
+            path = '/task/handle/' + taskId
+          }
+          
+          router.replace({ path, query });
+          notification.success({
+            message: t('sys.login.loginSuccessTitle'),
+            description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
+            duration: 3,
+          });
+        }else{
+          notification.error({
+            message: '参数失效',
+            description: "页面跳转参数丢失，请查看日志",
+            duration: 4,
+          });
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+    html[data-theme='dark'] .app-loading {
+        background-color: #2c344a;
+    }
+
+    html[data-theme='dark'] .app-loading .app-loading-title {
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    .app-loading {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        background-color: #f4f7f9;
+    }
+
+    .app-loading .app-loading-wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        -webkit-transform: translate3d(-50%, -50%, 0);
+        transform: translate3d(-50%, -50%, 0);
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .app-loading .dots {
+        display: flex;
+        padding: 98px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .app-loading .app-loading-title {
+        display: flex;
+        margin-top: 30px;
+        font-size: 30px;
+        color: rgba(0, 0, 0, 0.85);
+        justify-content: center;
+        align-items: center;
+    }
+
+    .app-loading .app-loading-logo {
+        display: block;
+        width: 90px;
+        margin: 0 auto;
+        margin-bottom: 20px;
+    }
+
+    .dot {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        margin-top: 30px;
+        font-size: 32px;
+        transform: rotate(45deg);
+        box-sizing: border-box;
+        animation: antRotate 1.2s infinite linear;
+    }
+
+    .dot i {
+        position: absolute;
+        display: block;
+        width: 20px;
+        height: 20px;
+        background-color: #0065cc;
+        border-radius: 100%;
+        opacity: 0.3;
+        transform: scale(0.75);
+        animation: antSpinMove 1s infinite linear alternate;
+        transform-origin: 50% 50%;
+    }
+
+    .dot i:nth-child(1) {
+        top: 0;
+        left: 0;
+    }
+
+    .dot i:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+    }
+
+    .dot i:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+    }
+
+    .dot i:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+    }
+    @keyframes antRotate {
+        to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+        }
+    }
+    @-webkit-keyframes antRotate {
+        to {
+            -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+        }
+    }
+    @keyframes antSpinMove {
+        to {
+            opacity: 1;
+        }
+    }
+    @-webkit-keyframes antSpinMove {
+        to {
+            opacity: 1;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/sys/login/useLogin.ts b/src/views/sys/login/useLogin.ts
new file mode 100644
index 0000000..5a20bbe
--- /dev/null
+++ b/src/views/sys/login/useLogin.ts
@@ -0,0 +1,211 @@
+import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
+import type { RuleObject } from 'ant-design-vue/lib/form/interface';
+import { ref, computed, unref, Ref } from 'vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { checkOnlyUser } from '/@/api/sys/user';
+import { defHttp } from '/@/utils/http/axios';
+import { OAUTH2_THIRD_LOGIN_TENANT_ID } from "/@/enums/cacheEnum";
+import { getAuthCache } from "/@/utils/auth";
+
+export enum LoginStateEnum {
+  LOGIN,
+  REGISTER,
+  RESET_PASSWORD,
+  MOBILE,
+  QR_CODE,
+}
+
+export enum SmsEnum {
+  LOGIN = '0',
+  REGISTER = '1',
+  FORGET_PASSWORD = '2',
+}
+const currentState = ref(LoginStateEnum.LOGIN);
+
+export function useLoginState() {
+  function setLoginState(state: LoginStateEnum) {
+    currentState.value = state;
+  }
+
+  const getLoginState = computed(() => currentState.value);
+
+  function handleBackLogin() {
+    setLoginState(LoginStateEnum.LOGIN);
+  }
+
+  return { setLoginState, getLoginState, handleBackLogin };
+}
+
+export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
+  async function validForm() {
+    const form = unref(formRef);
+    if (!form) return;
+    const data = await form.validate();
+    return data as T;
+  }
+
+  return { validForm };
+}
+
+export function useFormRules(formData?: Recordable) {
+  const { t } = useI18n();
+
+  const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
+  const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
+  const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
+  const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
+
+  const getRegisterAccountRule = computed(() => createRegisterAccountRule('account'));
+  const getRegisterMobileRule = computed(() => createRegisterAccountRule('mobile'));
+
+  const validatePolicy = async (_: RuleObject, value: boolean) => {
+    return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
+  };
+
+  const validateConfirmPassword = (password: string) => {
+    return async (_: RuleObject, value: string) => {
+      if (!value) {
+        return Promise.reject(t('sys.login.passwordPlaceholder'));
+      }
+      if (value !== password) {
+        return Promise.reject(t('sys.login.diffPwd'));
+      }
+      return Promise.resolve();
+    };
+  };
+
+  const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
+    const accountFormRule = unref(getAccountFormRule);
+    const passwordFormRule = unref(getPasswordFormRule);
+    const smsFormRule = unref(getSmsFormRule);
+    const mobileFormRule = unref(getMobileFormRule);
+
+    const registerAccountRule = unref(getRegisterAccountRule);
+    const registerMobileRule = unref(getRegisterMobileRule);
+
+    const mobileRule = {
+      sms: smsFormRule,
+      mobile: mobileFormRule,
+    };
+    switch (unref(currentState)) {
+      // register form rules
+      case LoginStateEnum.REGISTER:
+        return {
+          account: registerAccountRule,
+          password: passwordFormRule,
+          mobile: registerMobileRule,
+          sms: smsFormRule,
+          confirmPassword: [{ validator: validateConfirmPassword(formData?.password), trigger: 'change' }],
+          policy: [{ validator: validatePolicy, trigger: 'change' }],
+        };
+
+      // reset password form rules
+      case LoginStateEnum.RESET_PASSWORD:
+        return {
+          username: accountFormRule,
+          confirmPassword: [{ validator: validateConfirmPassword(formData?.password), trigger: 'change' }],
+          ...mobileRule,
+        };
+
+      // mobile form rules
+      case LoginStateEnum.MOBILE:
+        return mobileRule;
+
+      // login form rules
+      default:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+        };
+    }
+  });
+  return { getFormRules };
+}
+
+function createRule(message: string) {
+  return [
+    {
+      required: true,
+      message,
+      trigger: 'change',
+    },
+  ];
+}
+function createRegisterAccountRule(type) {
+  return [
+    {
+      validator: type == 'account' ? checkUsername : checkPhone,
+      trigger: 'change',
+    },
+  ];
+}
+
+function checkUsername(rule, value, callback) {
+  const { t } = useI18n();
+  if (!value) {
+    return Promise.reject(t('sys.login.accountPlaceholder'));
+  } else {
+    return new Promise((resolve, reject) => {
+      checkOnlyUser({ username: value }).then((res) => {
+        res.success ? resolve() : reject('用户名已存在!');
+      });
+    });
+  }
+}
+async function checkPhone(rule, value, callback) {
+  const { t } = useI18n();
+  var reg = /^1[3456789]\d{9}$/;
+  if (!reg.test(value)) {
+    return Promise.reject(new Error('请输入正确手机号'));
+  } else {
+    return new Promise((resolve, reject) => {
+      checkOnlyUser({ phone: value }).then((res) => {
+        res.success ? resolve() : reject('手机号已存在!');
+      });
+    });
+  }
+}
+
+/**
+ * 判断是否是OAuth2APP环境
+ */
+export function isOAuth2AppEnv() {
+  return /wxwork|dingtalk/i.test(navigator.userAgent);
+}
+
+/**
+ * 判断是否是钉钉环境
+ */
+export function isOAuth2DingAppEnv() {
+  return /dingtalk/i.test(navigator.userAgent);
+}
+
+/**
+ * 后台构造oauth2登录地址
+ * @param source
+ * @param tenantId
+ */
+export function sysOAuth2Login(source) {
+  let url = `${window._CONFIG['domianURL']}/sys/thirdLogin/oauth2/${source}/login`;
+  url += `?state=${encodeURIComponent(window.location.origin)}`;
+  // 代码逻辑说明: [QQYUN-3440]新建企业微信和钉钉配置表，通过租户模式隔离------------
+  let tenantId = getAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID);
+  if(tenantId){
+    url += `&tenantId=${tenantId}`;
+  }
+  window.location.href = url;
+}
+
+/**
+ * 后台callBack
+ * @param code
+ */
+export function sysOAuth2Callback(code:string) {
+  let url = `${window._CONFIG['domianURL']}/sys/thirdLogin/oauth2/dingding/login`;
+  url += `?state=${encodeURIComponent(window.location.origin)}&authCode=${code}`;
+  let tenantId = getAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID);
+  if(tenantId){
+    url += `&tenantId=${tenantId}`;
+  }
+  window.location.href = url;
+}
diff --git a/src/views/sys/redirect/index.vue b/src/views/sys/redirect/index.vue
new file mode 100644
index 0000000..1cdec5d
--- /dev/null
+++ b/src/views/sys/redirect/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div></div>
+</template>
+<script lang="ts" setup>
+  import { unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  // 代码逻辑说明: 【QQYUN-7099】动态路由匹配右键重新加载404
+  const { currentRoute, replace } = useRouter();
+  const { params, query } = unref(currentRoute);
+  const { path } = params;
+  const tabStore = useMultipleTabStore();
+  const redirectPageParam = tabStore.redirectPageParam;
+  const _path = Array.isArray(path) ? path.join('/') : path;
+  if (redirectPageParam) {
+    if (redirectPageParam.redirect_type === 'name') {
+      replace({
+        name: redirectPageParam.name,
+        query: redirectPageParam.query,
+        params: redirectPageParam.params,
+      });
+    } else {
+      replace({
+        path: _path.startsWith('/') ? _path : '/' + _path,
+        query,
+      });
+    }
+  }
+</script>
diff --git a/src/views/system/address/address.api.ts b/src/views/system/address/address.api.ts
new file mode 100644
index 0000000..12b482e
--- /dev/null
+++ b/src/views/system/address/address.api.ts
@@ -0,0 +1,19 @@
+import { defHttp } from '/@/utils/http/axios';
+
+export enum Api {
+  list = '/sys/user/queryDepartUserByOrgCode',
+  positionList = '/sys/position/list',
+  queryDepartTreeSync = '/sys/sysDepart/queryDepartTreeSync',
+}
+/**
+ * 获取部门树列表
+ */
+export const queryDepartTreeSync = (params?) => defHttp.get({ url: Api.queryDepartTreeSync, params });
+/**
+ * 部门用户信息
+ */
+export const list = (params?) => defHttp.get({ url: Api.list, params });
+/**
+ * 职务list
+ */
+export const positionList = (params?) => defHttp.get({ url: Api.positionList, params });
diff --git a/src/views/system/address/address.data.ts b/src/views/system/address/address.data.ts
new file mode 100644
index 0000000..32efb1e
--- /dev/null
+++ b/src/views/system/address/address.data.ts
@@ -0,0 +1,69 @@
+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+import { getDepartName } from "@/utils/common/compUtils";
+
+export const columns: BasicColumn[] = [
+  {
+    title: '姓名',
+    dataIndex: 'realname',
+    width: 100,
+  },
+  {
+    title: '部门',
+    dataIndex: 'departName',
+    customRender:({ text })=>{
+      return getDepartName(text);
+    }
+  },
+  {
+    title: '主岗位',
+    dataIndex: 'postName',
+    customRender:({ text })=>{
+      return getDepartName(text);
+    }
+  },
+  {
+    title: '兼职岗位',
+    dataIndex: 'otherPostName',
+    customRender:({ text })=>{
+      return getDepartName(text);
+    }
+  },
+/*  {
+    title: '职务',
+    dataIndex: 'post',
+    width: 150,
+    slots: { customRender: 'post' },
+  },*/
+  {
+    title: '手机',
+    width: 110,
+    dataIndex: 'phone',
+    customRender:( { record, text })=>{
+      if(record.izHideContact && record.izHideContact === '1'){
+        return '/';
+      }
+      return text;
+    }
+  },
+  {
+    title: '邮箱',
+    width: 180,
+    dataIndex: 'email',
+    customRender:( { record, text })=>{
+      if(record.izHideContact && record.izHideContact === '1'){
+        return text?'/':'';
+      }
+      return text;
+    }
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '姓名',
+    field: 'realname',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
diff --git a/src/views/system/address/components/DepartLeftTree.vue b/src/views/system/address/components/DepartLeftTree.vue
new file mode 100644
index 0000000..9b82646
--- /dev/null
+++ b/src/views/system/address/components/DepartLeftTree.vue
@@ -0,0 +1,190 @@
+<template>
+  <a-card :bordered="false" style="height: 100%;" :body-style="{ background: backgroundColor }" >
+    <a-spin :spinning="loading">
+      <a-input-search v-if="showSearch" placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" allowClear />
+      <!--组织机构树-->
+      <template v-if="treeData.length > 0">
+        <a-tree
+          v-if="!treeReloading"
+          :style="{ background: backgroundColor }"
+          showLine
+          :clickRowToExpand="false"
+          :treeData="treeData"
+          :selectedKeys="selectedKeys"
+          :load-data="loadChildrenTreeData"
+          v-model:expandedKeys="expandedKeys"
+          @select="onSelect"
+          style="overflow-y: auto;height: calc(100vh - 330px);"
+        >
+          <template #title="{ orgCategory, title, departNameAbbr }">
+            <TreeIcon :orgCategory="orgCategory" :title="getTitle(title,departNameAbbr)"></TreeIcon>
+          </template>
+        </a-tree>
+      </template>
+      <a-empty v-else description="暂无数据" />
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { inject, nextTick, ref, unref } from 'vue';
+  import { queryDepartTreeSync } from '../address.api';
+  import { searchByKeywords } from '/@/views/system/departUser/depart.user.api';
+  import { Popconfirm } from 'ant-design-vue';
+  import TreeIcon from "@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue";
+
+  const prefixCls = inject('prefixCls');
+  // 定义props
+  const props = defineProps({
+    // 是否显示搜索框
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    // 背景色
+    backgroundColor: {
+      type: String,
+      default: 'inherit',
+    },
+  });
+  const emit = defineEmits(['select', 'rootTreeData']);
+
+  const loading = ref<boolean>(false);
+  // 部门树列表数据
+  const treeData = ref<any[]>([]);
+  // 当前展开的项
+  const expandedKeys = ref<any[]>([]);
+  // 当前选中的项
+  const selectedKeys = ref<any[]>([]);
+  // 树组件重新加载
+  const treeReloading = ref<boolean>(false);
+  // 当前选中的部门
+  const currentDepart = ref<any>(null);
+  // 搜索关键字
+  const searchKeyword = ref('');
+
+  // 加载顶级部门信息
+  async function loadRootTreeData() {
+    try {
+      loading.value = true;
+      treeData.value = [];
+      const result = await queryDepartTreeSync();
+      if (Array.isArray(result)) {
+        treeData.value = result;
+      }
+      if (expandedKeys.value.length === 0) {
+        autoExpandParentNode();
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  loadRootTreeData();
+
+  // 加载子级部门信息
+  async function loadChildrenTreeData(treeNode) {
+    try {
+      const result = await queryDepartTreeSync({
+        pid: treeNode.dataRef.id,
+      });
+      if (result.length == 0) {
+        treeNode.dataRef.isLeaf = true;
+      } else {
+        treeNode.dataRef.children = result;
+        if (expandedKeys.value.length > 0) {
+          // 判断获取的子级是否有当前展开的项
+          let subKeys: any[] = [];
+          for (let key of expandedKeys.value) {
+            if (result.findIndex((item) => item.id === key) !== -1) {
+              subKeys.push(key);
+            }
+          }
+          if (subKeys.length > 0) {
+            expandedKeys.value = [...expandedKeys.value];
+          }
+        }
+      }
+      treeData.value = [...treeData.value];
+    } catch (e) {
+      console.error(e);
+    }
+    return Promise.resolve();
+  }
+
+  // 自动展开父节点，只展开一级
+  function autoExpandParentNode() {
+    let item = treeData.value[0];
+    if (item) {
+      if (!item.isLeaf) {
+        expandedKeys.value = [item.key];
+      }
+      reloadTree();
+    }
+  }
+
+  // 重新加载树组件，防止无法默认展开数据
+  async function reloadTree() {
+    await nextTick();
+    treeReloading.value = true;
+    await nextTick();
+    treeReloading.value = false;
+  }
+
+  /**
+   * 设置当前选中的行
+   */
+  function setSelectedKey(key: string, data?: object) {
+    selectedKeys.value = [key];
+    if (data) {
+      currentDepart.value = data;
+      emit('select', data);
+    }
+  }
+
+  // 搜索事件
+  async function onSearch(value: string) {
+    if (value) {
+      try {
+        loading.value = true;
+        treeData.value = [];
+        let result = await searchByKeywords({ keyWord: value, orgCategory: '1,2,4' });
+        if (Array.isArray(result)) {
+          treeData.value = result;
+        }
+        autoExpandParentNode();
+      } finally {
+        loading.value = false;
+      }
+    } else {
+      loadRootTreeData();
+    }
+    searchKeyword.value = value;
+  }
+
+  // 树选择事件
+  function onSelect(selKeys, event) {
+    if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
+      setSelectedKey(selKeys[0], event.selectedNodes[0]);
+    } else {
+      // 这样可以防止用户取消选择
+      setSelectedKey(selectedKeys.value[0]);
+    }
+  }
+
+  /**
+   * 获取标题
+   * @param title 部门名称
+   * @param departNameAbbr 缩写
+   */
+  function getTitle(title, departNameAbbr) {
+    if (departNameAbbr){
+      return departNameAbbr;
+    }
+    return title;
+  }
+
+  defineExpose({
+    loadRootTreeData,
+  });
+</script>
diff --git a/src/views/system/address/index.less b/src/views/system/address/index.less
new file mode 100644
index 0000000..61b73d4
--- /dev/null
+++ b/src/views/system/address/index.less
@@ -0,0 +1,13 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-address-list';
+
+.@{prefix-cls} {
+  // update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
+  background-color: @component-background;
+  // update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
+  &--box {
+    .ant-tabs-nav {
+      padding: 0 20px;
+    }
+  }
+}
diff --git a/src/views/system/address/index.vue b/src/views/system/address/index.vue
new file mode 100644
index 0000000..da77b31
--- /dev/null
+++ b/src/views/system/address/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10" style="max-height: 800px">
+    <a-col :xl="6" :lg="24" :md="24" style="margin-bottom: 10px">
+      <DepartLeftTree ref="leftTree" @select="onTreeSelect" />
+    </a-col>
+    <a-col :xl="18" :lg="24" :md="24" style="margin-bottom: 10px">
+      <div style="height: 100%;" class="address-book">
+        <!--引用表格-->
+        <BasicTable @register="registerTable">
+          <template #post="{ text }">
+            {{
+              (text || '')
+                .split(',')
+                .map((t) => (positionInfo[t] ? positionInfo[t] : t))
+                .join(',')
+            }}
+          </template>
+          <template #action="{ record }">
+            <TableAction :actions="getTableAction(record)" />
+          </template>
+        </BasicTable>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+  import { provide, ref, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DepartLeftTree from './components/DepartLeftTree.vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columns, searchFormSchema } from './address.data';
+  import { list, positionList } from './address.api';
+  import { getCacheByDynKey } from "@/utils/auth";
+  import { JEECG_CHAT_UID } from "@/enums/cacheEnum";
+
+  const { prefixCls } = useDesign('address-list');
+  provide('prefixCls', prefixCls);
+
+  // 给子组件定义一个ref变量
+  const leftTree = ref();
+
+  // 当前选中的部门code
+  const orgCode = ref('');
+  const positionInfo = ref({});
+
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      api: list,
+      columns,
+      // 代码逻辑说明: [VUEN-1485]进入系统管理--通讯录页面后，网页命令行报错------------
+      rowKey: 'id',
+      showIndexColumn: true,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      canResize: false,
+      showTableSetting: false,
+      actionColumn:{
+        width: 80
+      },
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        params.orgCode = orgCode.value;
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload }] = tableContext;
+
+  // 左侧树选择后触发
+  function onTreeSelect(data) {
+    orgCode.value = data.orgCode;
+    reload();
+  }
+
+  /**
+   * 操作栏
+   * 
+   * @param record
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '发消息',
+        onClick: handleSendChat.bind(null, record),
+      },
+    ];
+  }
+  
+  // 查询职务信息
+  async function queryPositionInfo() {
+    const result = await positionList({ pageSize: 99999 });
+    if (result) {
+      let obj = {};
+      result.records.forEach((position) => {
+        obj[position['id']] = position['name'];
+      });
+      positionInfo.value = obj;
+    }
+  }
+  queryPositionInfo();
+  
+  /**
+   * 聊天
+   *
+   * @param record
+   */
+  function handleSendChat(record) {
+    //获取messageId
+    let cacheByDynKey = getCacheByDynKey(JEECG_CHAT_UID);
+    let iframes:any = document.getElementById("jChatOnline");
+    let id = record.id;
+    //发送打开聊天窗口的请求
+    iframes.contentWindow.postMessage({
+      type: "open-chat",
+      messageId: cacheByDynKey,
+      data: { id: id, type: "friend", groupName: "", avatar: record.avatar, username: record.realname }
+    }, "*");
+  }
+</script>
+
+<style lang="less">
+  @import './index.less';
+</style>
diff --git a/src/views/system/appVersion/SysAppVersion.vue b/src/views/system/appVersion/SysAppVersion.vue
new file mode 100644
index 0000000..b9afc8e
--- /dev/null
+++ b/src/views/system/appVersion/SysAppVersion.vue
@@ -0,0 +1,215 @@
+<template>
+  <PageWrapper contentFullHeight>
+    <a-card :bordered="false" title="版本管理">
+      <!--编辑模式-->
+      <a-spin v-if="active" :spinning="confirmLoading">
+        <a-form ref="formRef" :model="model" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="validatorRules">
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="版本" name="appVersion">
+                <a-input v-model:value="model.appVersion" placeholder="请输入版本" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="APP安装apk" name="downloadUrl">
+                <a-input placeholder="设置APP安装apk" v-model:value="model.downloadUrl">
+                  <template #addonAfter>
+                    <Icon icon="ant-design:upload-outlined" style="cursor: pointer" @click="showUploadModal('apk')" />
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="APP热更新文件" name="wgtUrl">
+                <a-input placeholder="设置APP热更新文件" v-model:value="model.wgtUrl">
+                  <template #addonAfter>
+                    <Icon icon="ant-design:upload-outlined" style="cursor: pointer" @click="showUploadModal('wgt')" />
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="桌面应用" name="webDownloadUrl">
+                <a-input placeholder="桌面应用安装路径" v-model:value="model.webDownloadUrl">
+                  <template #addonAfter>
+                    <Icon icon="ant-design:upload-outlined" style="cursor: pointer" @click="showUploadModal('web')" />
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="更新内容">
+                <a-textarea :rows="4" v-model:value="model.updateNote" placeholder="请输入更新内容" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+        <JUploadModal :value="modalValue" :bizPath="filePath" :maxCount="1" @register="registerModel" @change="uploadBack" />
+      </a-spin>
+      <!--详情模式-->
+      <Description v-else class="desc" :column="1" :data="model" :schema="schema" />
+      <!--底部按钮-->
+      <div class="anty-form-btn" v-if="hasPermission('app:edit:version')">
+        <a-button v-if="active" @click="handleSubmit" type="primary" preIcon="ant-design:save-outlined">保存</a-button>
+        <a-button v-else @click="active = true" type="primary" preIcon="ant-design:edit-outlined">开启编辑模式</a-button>
+      </div>
+    </a-card>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup name="portalapp-sysAppVersion">
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { JUploadModal } from '@/components/Form/src/jeecg/components/JUpload';
+  import { useModal } from '@/components/Modal';
+  import { reactive, ref, toRaw, unref, onMounted } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { queryAppVersion, saveAppVersion } from './appVersion.api';
+  import { Description, DescItem } from '/@/components/Description/index';
+
+  const { hasPermission } = usePermission();
+  const { createMessage } = useMessage();
+
+  const [registerModel, { openModal }] = useModal();
+  const confirmLoading = ref(false);
+  const active = ref(false);
+  const formRef = ref<any>(null);
+  const appKey = 'E0CC280';
+  const filePath = 'appVersion';
+  const uploadType = ref('');
+  const modalValue = ref('');
+  const labelCol = {
+    xs: { span: 24 },
+    sm: { span: 5 },
+  };
+  const wrapperCol = {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  };
+  const model = reactive({
+    id: 'E0CC280',
+    appVersion: '',
+    versionNum: 0,
+    updateNote: '',
+    downloadUrl: '',
+    wgtUrl: '',
+    webDownloadUrl: '',
+  });
+
+  /**
+   * 初始化表单数据
+   * @param record
+   */
+  async function initFormData() {
+    const appVersion = await queryAppVersion({ key: appKey });
+    if (appVersion) {
+      Object.assign(model, appVersion);
+    }
+  }
+
+  /**
+   * 提交保存版本信息
+   */
+  function handleSubmit() {
+    const form = unref(formRef);
+    form.validate().then(async () => {
+      let obj = toRaw(model);
+      if (obj.appVersion.indexOf('.') != -1) {
+        obj.versionNum = Number(obj.appVersion.replace(/\./g, ''));
+      }
+      obj.id = appKey;
+      confirmLoading.value = true;
+      await saveAppVersion(obj);
+      createMessage.success('保存成功');
+      confirmLoading.value = false;
+      active.value = false;
+    }).finally(() => {
+      confirmLoading.value = false;
+    });
+  }
+
+  /**
+   * 显示设置弹窗
+   * @param type
+   */
+  function showUploadModal(type) {
+    uploadType.value = type;
+    modalValue.value = type == 'web'? model.webDownloadUrl :type == 'apk' ? model.downloadUrl : model.wgtUrl;
+    openModal(true, {
+      maxCount: 1,
+      bizPath: filePath,
+    });
+  }
+
+  /**
+   *上传返回
+   */
+  function uploadBack(value) {
+    if (unref(uploadType) == 'apk') {
+      model.downloadUrl = value;
+    } else if (unref(uploadType) == 'wgt') {
+      model.wgtUrl = value;
+    }else{
+      model.webDownloadUrl = value;
+    }
+  }
+  //表单校验规则
+  const validatorRules = {
+    appVersion: [{ required: true, message: '版本不能为空', trigger: 'blur' }],
+    downloadUrl: [{ required: true, message: 'APP安装apk不能为空', trigger: 'change' }],
+    wgtUrl: [{ required: false, message: 'APP热更新文件不能为空', trigger: 'change' }],
+  };
+  // 显示字段
+  const schema: DescItem[] = [
+    {
+      field: 'appVersion',
+      label: '版本',
+    },
+    {
+      field: 'downloadUrl',
+      label: 'APP安装apk',
+    },
+    {
+      field: 'wgtUrl',
+      label: 'APP热更新文件',
+    },
+    {
+      field: 'webDownloadUrl',
+      label: '桌面应用下载地址',
+    },
+    {
+      field: 'updateNote',
+      label: '更新内容',
+    },
+  ];
+
+  onMounted(() => {
+    initFormData();
+  });
+</script>
+
+<style scoped>
+  .anty-form-btn {
+    width: 100%;
+    text-align: center;
+  }
+  .anty-form-btn button {
+    margin: 20px;
+  }
+  .approveDiv span {
+    margin: 0 20px;
+  }
+  .desc {
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  :deep(.ant-descriptions-item-label) {
+    width: 30% !important;
+    min-width: 150px !important;
+  }
+  :deep(.ant-descriptions-item-content) {
+    padding: 16px !important;
+    width: 60% !important;
+  }
+</style>
diff --git a/src/views/system/appVersion/appVersion.api.ts b/src/views/system/appVersion/appVersion.api.ts
new file mode 100644
index 0000000..855ada6
--- /dev/null
+++ b/src/views/system/appVersion/appVersion.api.ts
@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  //查询app版本
+  queryAppVersion = '/sys/version/app3version',
+  //保存app版本
+  saveAppVersion = '/sys/version/saveVersion',
+}
+/**
+ * 查询APP版本
+ * @param params
+ */
+export const queryAppVersion = (params) => defHttp.get({ url: Api.queryAppVersion, params });
+/**
+ * 保存APP版本
+ * @param params
+ */
+export const saveAppVersion = (params) => {
+  return defHttp.post({ url: Api.saveAppVersion, params });
+};
diff --git a/src/views/system/appconfig/ThirdApp.api.ts b/src/views/system/appconfig/ThirdApp.api.ts
new file mode 100644
index 0000000..8db4ccd
--- /dev/null
+++ b/src/views/system/appconfig/ThirdApp.api.ts
@@ -0,0 +1,81 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  //第三方登录配置
+  addThirdAppConfig = '/sys/thirdApp/addThirdAppConfig',
+  editThirdAppConfig = '/sys/thirdApp/editThirdAppConfig',
+  getThirdConfigByTenantId = '/sys/thirdApp/getThirdConfigByTenantId',
+  syncDingTalkDepartUserToLocal = '/sys/thirdApp/sync/dingtalk/departAndUser/toLocal',
+  getThirdUserByWechat = '/sys/thirdApp/getThirdUserByWechat',
+  wechatEnterpriseToLocal = '/sys/thirdApp/sync/wechatEnterprise/departAndUser/toLocal',
+  getThirdUserBindByWechat = '/sys/thirdApp/getThirdUserBindByWechat',
+  deleteThirdAccount = '/sys/thirdApp/deleteThirdAccount',
+  deleteThirdAppConfig = '/sys/thirdApp/deleteThirdAppConfig',
+}
+
+/**
+ * 第三方配置保存或者更新
+ */
+export const saveOrUpdateThirdConfig = (params, isUpdate) => {
+  let url = isUpdate ? Api.editThirdAppConfig : Api.addThirdAppConfig;
+  return defHttp.post({ url: url, params }, { joinParamsToUrl: true });
+};
+
+/**
+ * 获取第三方配置
+ * @param params
+ */
+export const getThirdConfigByTenantId = (params) => {
+  return defHttp.get({ url: Api.getThirdConfigByTenantId, params });
+};
+
+/**
+ * 同步钉钉部门用户到本地
+ * @param params
+ */
+export const syncDingTalkDepartUserToLocal = () => {
+  return defHttp.get({ url: Api.syncDingTalkDepartUserToLocal, timeout: 60000 }, { isTransformResponse: false });
+};
+
+/**
+ * 获取企业微信绑定的用户信息
+ * @param params
+ */
+export const getThirdUserByWechat = () => {
+  return defHttp.get({ url: Api.getThirdUserByWechat }, { isTransformResponse: false });
+};
+
+/**
+ * 同步企业微信用户部门到本地
+ * @param params
+ */
+export const wechatEnterpriseToLocal = (params) => {
+  return defHttp.get({ url: Api.wechatEnterpriseToLocal, params }, { isTransformResponse: false });
+};
+
+/**
+ * 获取绑定企业微信的用户
+ * @param params
+ */
+export const getThirdUserBindByWechat = () => {
+  return defHttp.get({ url: Api.getThirdUserBindByWechat }, { isTransformResponse: false });
+};
+
+/**
+ * 根据第三方账号表的id解绑账号
+ * @param params
+ */
+export const deleteThirdAccount = (params) => {
+  return defHttp.delete({ url: Api.deleteThirdAccount, params }, { isTransformResponse:false, joinParamsToUrl: true });
+};
+
+/**
+ * 根据配置表的id删除第三方配置
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteThirdAppConfig = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteThirdAppConfig, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
\ No newline at end of file
diff --git a/src/views/system/appconfig/ThirdApp.data.ts b/src/views/system/appconfig/ThirdApp.data.ts
new file mode 100644
index 0000000..f2b207c
--- /dev/null
+++ b/src/views/system/appconfig/ThirdApp.data.ts
@@ -0,0 +1,61 @@
+//第三方app配置表单
+import { FormSchema } from '/@/components/Form';
+
+//第三方app表单
+export const thirdAppFormSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: 'thirdType',
+    field: 'thirdType',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: 'CorpId',
+    field: 'corpId',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return values.thirdType === 'dingtalk';
+    },
+    required: true,
+  },
+  {
+    label: 'Agentld',
+    field: 'agentId',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: 'AppKey',
+    field: 'clientId',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: 'AppSecret',
+    field: 'clientSecret',
+    component: 'Input',
+    required: true,
+  },{
+    label: '启用',
+    field: 'status',
+    component: 'Switch',
+    componentProps:{
+      checkedChildren:'关闭',
+      checkedValue:1,
+      unCheckedChildren:'开启',
+      unCheckedValue: 0
+    },
+    defaultValue: 1
+  },{
+    label: '租户id',
+    field: 'tenantId',
+    component: 'Input',
+    show: false,
+  },
+];
diff --git a/src/views/system/appconfig/ThirdAppBindWeEnterpriseModal.vue b/src/views/system/appconfig/ThirdAppBindWeEnterpriseModal.vue
new file mode 100644
index 0000000..9293ae7
--- /dev/null
+++ b/src/views/system/appconfig/ThirdAppBindWeEnterpriseModal.vue
@@ -0,0 +1,316 @@
+<!--弹窗绑定企业微信页面-->
+<template>
+  <BasicModal @register="registerModal" :width="800" :title="title" destroyOnClose>
+    <a-spin :spinning="loading">
+      <div class="we-bind">
+        <a-row :span="24" class="we-title-background">
+          <a-col :span="12" class="border-right">
+            <span>组织用户</span>
+          </a-col>
+          <a-col :span="12" class="padding-left">
+            <span>企业微信用户</span>
+          </a-col>
+        </a-row>
+        <a-row :span="24">
+          <template v-for="(item, index) in bindData.jwUserDepartVos">
+            <a-col :span="12" class="border-right padding-left border-bottom">
+              <div class="we-account">
+                <a-avatar v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)" :size="28"></a-avatar>
+                <a-avatar v-else :size="28">
+                  {{ item.realName.length > 2 ? item.realName.substr(0, 2) : item.realName }}
+                </a-avatar>
+                <a-input style="margin-left: 20px" :value="item.realName" readonly />
+              </div>
+            </a-col>
+            <a-col :span="12" class="padding-left border-bottom">
+              <div class="we-account">
+                <span v-if="item.wechatUserId || izBind" class="we-remove"
+                  >{{ item.wechatRealName }} <span style="margin-right: 20px" @click="handleRemoveClick(index, item)">移出</span></span
+                >
+                <a-select
+                  v-else
+                  v-model:value="item.wechatUserId"
+                  :options="userList"
+                  :fieldNames="{ label: 'wechatRealName', value: 'wechatUserId' }"
+                  style="width: 200px"
+                  showSearch
+                  @select="(val, option) => handleSelect(val, option, index)"
+                />
+              </div>
+            </a-col>
+          </template>
+        </a-row>
+      </div>
+    </a-spin>
+    <template #footer>
+      <a-button v-if="!izBind" type="primary" @click="handleSubmit">同步</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, h, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getThirdUserByWechat, wechatEnterpriseToLocal, getThirdUserBindByWechat, deleteThirdAccount } from './ThirdApp.api';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Modal } from 'ant-design-vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  export default defineComponent({
+    name: 'ThirdAppBindWeEnterpriseModal',
+    components: { BasicModal },
+    setup(props, { emit }) {
+      const title = ref<string>('企业微信绑定');
+      //企业微信的绑定数据
+      const bindData = ref<any>({});
+      const loading = ref<boolean>(false);
+      const btnLoading = ref<boolean>(false);
+      const { createMessage } = useMessage();
+      const userList = ref<any>([]);
+      //同步文本信息展示
+      const syncText = ref<string>('');
+      //是否已绑定数据，展示不同的列表
+      const izBind = ref<boolean>(false);
+      const userStore = useUserStore();
+      //表单赋值
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        loading.value = true;
+        console.log('izBind：：', izBind);
+        if (!data.izBind) {
+          await getUnboundData();
+        } else {
+          await getBoundData();
+        }
+        izBind.value = data.izBind;
+      });
+
+      /**
+       * 未绑定的数据
+       */
+      async function getUnboundData() {
+        await getThirdUserByWechat().then((res) => {
+          if (res.success) {
+            let userLists = res.result.userList;
+            bindData.value = res.result;
+            userList.value = res.result.userList;
+            /*   if (userLists && userLists.length > 0) {
+            syncText.value = "";
+          } else {
+            syncText.value = "企业微信用户均已同步";
+          }*/
+            loading.value = false;
+          } else {
+            createMessage.warning(res.message);
+            loading.value = false;
+          }
+        });
+      }
+
+      /**
+       * 已绑定的数据
+       */
+      async function getBoundData() {
+        await getThirdUserBindByWechat().then((res) => {
+          if (res.success) {
+            bindData.value.jwUserDepartVos = res.result;
+            loading.value = false;
+          } else {
+            createMessage.warn(res.message);
+            loading.value = false;
+          }
+        });
+      }
+
+      /**
+       * 第三方配置点击事件
+       */
+      async function handleSubmit() {
+        btnLoading.value = true;
+        let userList = bindData.value.userList;
+        //重新封装数据，只留用户id和企业微信id即可,还需要把没绑定的用户传给后台
+        let params: any = [];
+        //查询用户绑定的企业微信用户
+        for (const item of bindData.value.jwUserDepartVos) {
+          if (item.wechatUserId) {
+            userList = userList.filter((a) => a.wechatUserId != item.wechatUserId);
+            params.push({
+              wechatUserId: item.wechatUserId,
+              wechatDepartId: item.wechatDepartId,
+              wechatRealName: item.wechatRealName,
+              userId: item.userId,
+            });
+          }
+        }
+        let text: string = '';
+        //查询未被绑定的租户
+        if (userList && userList.length > 0) {
+          for (const item of userList) {
+            params.push({ wechatUserId: item.wechatUserId, wechatDepartId: item.wechatDepartId, wechatRealName: item.wechatRealName });
+          }
+          text = '检测到未绑定的企业微信用户 ' + userList.length + ' 位，平台将会为这 ' + userList.length + ' 位用户创建新的账号';
+        }
+
+        Modal.confirm({
+          title: '确认同步',
+          content: text,
+          okText: '确认',
+          onOk: () => {
+            let json = JSON.stringify(params);
+            console.log('json：：', json);
+            wechatEnterpriseToLocal({ jwUserDepartJson: json })
+              .then((res) => {
+                let options = {};
+                if (res.success) {
+                  if (res.result) {
+                    options = {
+                      width: 600,
+                      title: res.message,
+                      content: () => {
+                        let nodes;
+                        let successInfo = [`成功信息如下：`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
+                        if (res.success) {
+                          nodes = [...successInfo, h('br'), `无失败信息！`];
+                        } else {
+                          nodes = [
+                            `失败信息如下：`,
+                            renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
+                            h('br'),
+                            ...successInfo,
+                          ];
+                        }
+                        return nodes;
+                      },
+                    };
+                  }
+                  closeModal();
+                  emit('success', options, res);
+                }
+              })
+              .finally(() => {
+                btnLoading.value = false;
+              });
+          },
+        });
+      }
+
+      /**
+       * 下拉框选择事件
+       */
+      function handleSelect(val, option, index) {
+        bindData.value.jwUserDepartVos[index].wechatUserId = option.wechatUserId;
+        bindData.value.jwUserDepartVos[index].wechatRealName = option.wechatRealName;
+        bindData.value.jwUserDepartVos[index].wechatDepartId = option.wechatDepartId;
+        userList.value = userList.value.filter((item) => item.wechatUserId != option.wechatUserId);
+      }
+
+      /**
+       * 移出事件
+       * @param index
+       * @param item
+       */
+      function handleRemoveClick(index, item) {
+        if (!izBind.value) {
+          userList.value.push({
+            wechatUserId: item.wechatUserId,
+            wechatRealName: item.wechatRealName,
+            wechatDepartId: item.wechatDepartId,
+          });
+          bindData.value.jwUserDepartVos[index].wechatUserId = '';
+          bindData.value.jwUserDepartVos[index].wechatRealName = '';
+          bindData.value.jwUserDepartVos[index].wechatDepartId = '';
+        } else {
+          Modal.confirm({
+            title: '确认取消绑定吗',
+            okText: '确认',
+            onOk: async () => {
+              await deleteThirdAccount({ id: item.thirdId, sysUserId: userStore.getUserInfo.id }).then((res) => {
+                if (res.success) {
+                  createMessage.success('取消绑定成功！');
+                  getBoundData();
+                } else {
+                  createMessage.warning(res.message);
+                }
+              });
+            },
+          });
+        }
+      }
+
+      function renderTextarea(h, value) {
+        return h(
+          'div',
+          {
+            id: 'box',
+            style: {
+              minHeight: '100px',
+              border: '1px solid #d9d9d9',
+              fontSize: '14px',
+              maxHeight: '250px',
+              whiteSpace: 'pre',
+              overflow: 'auto',
+              padding: '10px',
+            },
+          },
+          value
+        );
+      }
+
+      return {
+        title,
+        registerModal,
+        handleSubmit,
+        bindData,
+        getFileAccessHttpUrl,
+        loading,
+        userList,
+        handleSelect,
+        handleRemoveClick,
+        btnLoading,
+        izBind,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .we-bind {
+    overflow-y: auto;
+    border: 1px @border-color-base solid;
+    border-bottom: none;
+    .we-title-background {
+      background: @component-background;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+    }
+    .we-account {
+      display: flex;
+      height: 40px;
+      line-height: 40px;
+      align-items: center;
+    }
+
+    :deep(.ant-input) {
+      border: none;
+      padding: 0;
+      box-shadow: none;
+    }
+
+    .we-remove {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      cursor: pointer;
+    }
+    .border-right {
+      border-right: 1px @border-color-base solid;
+    }
+    .border-bottom {
+      border-bottom: 1px @border-color-base solid;
+    }
+    .padding-left {
+      padding-left: 10px;
+    }
+  }
+</style>
diff --git a/src/views/system/appconfig/ThirdAppConfigList.vue b/src/views/system/appconfig/ThirdAppConfigList.vue
new file mode 100644
index 0000000..6d55f97
--- /dev/null
+++ b/src/views/system/appconfig/ThirdAppConfigList.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="ding-ding-container" :class="[`${prefixCls}`]">
+    <div class="ding-header">
+      <ul class="ding-menu-tab">
+        <li :class="activeKey === 'ding' ? 'active' : ''" @click="dingLiClick('ding')"><a>钉钉集成</a></li>
+        <li :class="activeKey === 'wechat' ? 'active' : ''" @click="dingLiClick('wechat')"><a>企业微信集成</a></li>
+      </ul>
+    </div>
+    <div v-show="activeKey === 'ding'" class="base-collapse">
+      <ThirdAppDingTalkConfigForm />
+    </div>
+    <div v-show="activeKey === 'wechat'" class="base-collapse">
+      <ThirdAppWeEnterpriseConfigForm />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import ThirdAppDingTalkConfigForm from './ThirdAppDingTalkConfigForm.vue';
+  import ThirdAppWeEnterpriseConfigForm from './ThirdAppWeEnterpriseConfigForm.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'ThirdAppConfigList',
+    components: {
+      ThirdAppDingTalkConfigForm,
+      ThirdAppWeEnterpriseConfigForm,
+    },
+    setup() {
+      const { prefixCls } = useDesign('j-dd-container');
+
+      //选中的key
+      const activeKey = ref<string>('ding');
+
+      /**
+       * tab点击事件
+       * @param key
+       */
+      function dingLiClick(key) {
+        activeKey.value = key;
+      }
+
+      return {
+        activeKey,
+        dingLiClick,
+        prefixCls,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .ding-ding-container {
+    border-radius: 4px;
+    height: calc(100% - 80px);
+    margin: 16px;
+  }
+  .ding-header {
+    align-items: center;
+    /*begin 兼容暗夜模式*/
+    border-bottom: 1px solid @border-color-base;
+    /*end 兼容暗夜模式*/
+    box-sizing: border-box;
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    padding: 0 24px;
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+  .ding-menu-tab {
+    display: flex;
+    height: 100%;
+
+    li {
+      align-items: center;
+      border-bottom: 2px solid transparent;
+      display: flex;
+      height: 100%;
+      margin-right: 38px;
+
+      a {
+        /*begin 兼容暗夜模式*/
+        color: @text-color !important;
+        /*end 兼容暗夜模式*/
+        font-size: 15px;
+        font-weight: 700;
+      }
+    }
+  }
+  .active {
+    border-bottom-color: #2196f3 !important;
+
+    a {
+      color: #333 !important;
+    }
+  }
+  .empty-image{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 50px);
+    justify-content: center;
+    width: 100%;
+  }
+</style>
+
+<style lang="less">
+  /* update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效*/
+  @prefix-cls: ~'@{namespace}-j-dd-container';
+  /*begin 兼容暗夜模式*/
+  .@{prefix-cls} {
+    background: @component-background;
+
+    .ding-header {
+      border-bottom: 1px solid @border-color-base;
+    }
+
+    .ding-menu-tab {
+      li {
+        a {
+          color: @text-color !important;
+        }
+      }
+    }
+
+    .ant-collapse-borderless {
+      background-color: @component-background;
+    }
+
+    .ant-collapse{
+      background-color: @component-background;
+    }
+  }
+  /*end 兼容暗夜模式*/
+/* update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效*/
+</style>
diff --git a/src/views/system/appconfig/ThirdAppConfigModal.vue b/src/views/system/appconfig/ThirdAppConfigModal.vue
new file mode 100644
index 0000000..12a6b48
--- /dev/null
+++ b/src/views/system/appconfig/ThirdAppConfigModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <BasicModal @register="registerModal" :width="800" :title="title" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { thirdAppFormSchema } from './ThirdApp.data';
+  import { getThirdConfigByTenantId, saveOrUpdateThirdConfig } from './ThirdApp.api';
+  export default defineComponent({
+    name: 'ThirdAppConfigModal',
+    components: { BasicModal, BasicForm },
+    setup(props, { emit }) {
+      const title = ref<string>('钉钉配置');
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        schemas: thirdAppFormSchema,
+        showActionButtonGroup: false,
+        labelCol: { span: 24 },
+        wrapperCol: { span: 24 },
+      });
+      //表单赋值
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        setModalProps({ confirmLoading: true });
+        if (data.thirdType == 'dingtalk') {
+          title.value = '钉钉配置';
+        } else {
+          title.value = '企业微信配置';
+        }
+        //重置表单
+        await resetFields();
+        let values = await getThirdConfigByTenantId({ tenantId: data.tenantId, thirdType: data.thirdType });
+        setModalProps({ confirmLoading: false });
+        //表单赋值
+        if (values) {
+          await setFieldsValue(values);
+        } else {
+          await setFieldsValue(data);
+        }
+      });
+
+      /**
+       * 第三方配置点击事件
+       */
+      async function handleSubmit() {
+        let values = await validate();
+        let isUpdate = false;
+        if (values.id) {
+          isUpdate = true;
+        }
+        await saveOrUpdateThirdConfig(values, isUpdate);
+        emit('success');
+        closeModal();
+      }
+
+      return {
+        title,
+        registerForm,
+        registerModal,
+        handleSubmit,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/appconfig/ThirdAppDingTalkConfigForm.vue b/src/views/system/appconfig/ThirdAppDingTalkConfigForm.vue
new file mode 100644
index 0000000..94e30c7
--- /dev/null
+++ b/src/views/system/appconfig/ThirdAppDingTalkConfigForm.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="base-collapse">
+    <div class="header"> 钉钉集成 </div>
+    <a-collapse expand-icon-position="right" :bordered="false">
+      <a-collapse-panel key="1">
+        <template #header>
+          <div style="font-size: 16px"> 1.获取对接信息</div>
+        </template>
+        <div class="base-desc">从钉钉开放平台获取对接信息，即可开始集成以及同步通讯录</div>
+        <div style="margin-top: 5px">
+          <a href='https://help.qiaoqiaoyun.com/expand/dingding.html' target='_blank'>如何获取对接信息?</a>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+    <div class="sync-padding">
+      <a-collapse expand-icon-position="right" :bordered="false">
+        <a-collapse-panel key="2">
+          <template #header>
+            <div style="width: 100%; justify-content: space-between; display: flex">
+              <div style="font-size: 16px"> 2.对接信息录入及解绑</div>
+            </div>
+          </template>
+          <div class="base-desc">完成步骤1后，填入Agentld、 AppKey、AppSecret后 可对接应用与同步通讯录</div>
+          <div class="flex-flow">
+            <div class="base-title">CorpId</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.corpId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">Agentld</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.agentId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppKey</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppSecret</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientSecret" readonly />
+            </div>
+          </div>
+          <div style="margin-top: 20px; width: 100%; text-align: right">
+            <a-button @click="dingEditClick">编辑</a-button>
+            <a-button v-if="appConfigData.id" @click="cancelBindClick" danger style="margin-left: 10px">取消绑定</a-button>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+      <div class="sync-padding">
+        <div style="font-size: 16px; width: 100%"> 3.数据同步</div>
+        <div style="margin-top: 20px" class="base-desc">
+          从钉钉同步到本地
+          <ul style='list-style-type: disc;margin-left: 20px;'>
+            <li>同步部门到本地</li>
+            <li>
+              同步部门下的用户到本地
+              <a-tooltip title='同步用户与部门文档'>
+                <a-icon @click='handleIconClick' type="question-circle" class="sync-text"/>
+              </a-tooltip>
+            </li>
+          </ul>
+          <div style="float: right">
+            <a-button :loading="btnLoading" @click="syncDingTalk">{{ !btnLoading ? '同步' : '同步中' }}</a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ThirdAppConfigModal @register="registerAppConfigModal" @success="handleSuccess" />
+</template>
+
+<script lang="ts">
+  import { defineComponent, h, onMounted, ref } from 'vue';
+  import { getThirdConfigByTenantId, syncDingTalkDepartUserToLocal, deleteThirdAppConfig } from './ThirdApp.api';
+  import { useModal } from '/@/components/Modal';
+  import ThirdAppConfigModal from './ThirdAppConfigModal.vue';
+  import { Modal } from 'ant-design-vue';
+  import { getTenantId } from '/@/utils/auth';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'OrganDingConfigForm',
+    components: {
+      ThirdAppConfigModal,
+    },
+    setup() {
+      const { createMessage } = useMessage();
+      //折叠面板选中key
+      const collapseActiveKey = ref<string>('');
+      //按钮加载事件
+      const btnLoading = ref<boolean>(false);
+      //第三方配置数据
+      const appConfigData = ref<any>({
+        agentId: undefined,
+        clientId: '',
+        clientSecret: '',
+      });
+
+      //企业微信钉钉配置modal
+      const [registerAppConfigModal, { openModal }] = useModal();
+
+      /**
+       * 钉钉编辑
+       */
+      async function dingEditClick() {
+        let tenantId = getTenantId();
+        openModal(true, {
+          tenantId: tenantId,
+          thirdType: 'dingtalk',
+        });
+      }
+
+      /**
+       * 初始化第三方数据
+       */
+      async function initThirdAppConfigData(params) {
+        let values = await getThirdConfigByTenantId(params);
+        if (values) {
+          appConfigData.value = values;
+        } else {
+          appConfigData.value = "";
+        }
+      }
+
+      /**
+       * 成功回调
+       */
+      function handleSuccess() {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'dingtalk' });
+      }
+
+      /**
+       * 同步钉钉
+       */
+      async function syncDingTalk() {
+        btnLoading.value = true;
+        await syncDingTalkDepartUserToLocal()
+          .then((res) => {
+            let options = {};
+            if (res.result) {
+              options = {
+                width: 600,
+                title: res.message,
+                content: () => {
+                  let nodes;
+                  let successInfo = [`成功信息如下：`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
+                  if (res.success) {
+                    nodes = [...successInfo, h('br'), `无失败信息！`];
+                  } else {
+                    nodes = [
+                      `失败信息如下：`,
+                      renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
+                      h('br'),
+                      ...successInfo,
+                    ];
+                  }
+                  return nodes;
+                },
+              };
+            }
+            if (res.success) {
+              if (options != null) {
+                Modal.success(options);
+              } else {
+                createMessage.warning(res.message);
+              }
+            } else {
+              if (options && options.title) {
+                Modal.warning(options)
+              } else {
+                createMessage.warning({
+                  content: res.message || "同步失败，请检查对接信息录入中是否填写正确，并确认是否已开启钉钉配置！",
+                  duration: 5
+                });
+              }
+            }
+          })
+          .finally(() => {
+            btnLoading.value = false;
+          });
+      }
+
+      /**
+       * 渲染文本
+       * @param h
+       * @param value
+       */
+      function renderTextarea(h, value) {
+        return h(
+          'div',
+          {
+            id: 'box',
+            style: {
+              minHeight: '100px',
+              border: '1px solid #d9d9d9',
+              fontSize: '14px',
+              maxHeight: '250px',
+              whiteSpace: 'pre',
+              overflow: 'auto',
+              padding: '10px',
+            },
+          },
+          value
+        );
+      }
+
+      /**
+       * 钉钉同步文档
+       */
+      function handleIconClick(){
+        window.open("https://help.qiaoqiaoyun.com/expand/dingdingsyn.html","_target")
+      }
+
+      /**
+       * 取消绑定
+       */
+      function cancelBindClick() {
+        if(!appConfigData.value.id){
+          createMessage.warning("请先绑定钉钉应用！");
+          return;
+        }
+        Modal.confirm({
+          title: '取消绑定',
+          content: '是否要解除当前组织的钉钉应用配置绑定？',
+          okText: '确认',
+          cancelText: '取消',
+          onOk: () => {
+            deleteThirdAppConfig({ id: appConfigData.value.id }, handleSuccess);
+          },
+        });
+      }
+
+      onMounted(() => {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'dingtalk' });
+      });
+
+      return {
+        appConfigData,
+        collapseActiveKey,
+        registerAppConfigModal,
+        dingEditClick,
+        handleSuccess,
+        syncDingTalk,
+        btnLoading,
+        handleIconClick,
+        cancelBindClick,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .header {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: 18px;
+    color: @text-color;
+  }
+
+  .flex-flow {
+    display: flex;
+    min-height: 0;
+  }
+
+  .sync-padding {
+    padding: 12px 0 16px;
+    color: @text-color;
+  }
+
+  .base-collapse {
+    margin-top: 20px;
+    padding: 0 24px;
+    font-size: 20px;
+
+    .base-desc {
+      font-size: 14px;
+    }
+
+    .base-title {
+      width: 100px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    .base-message {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    :deep(.ant-collapse-header) {
+      padding: 12px 0 16px;
+    }
+
+    :deep(.ant-collapse-content-box) {
+      padding-left: 0;
+    }
+  }
+  /*begin 兼容暗夜模式*/
+  //暗黑模式下卡片的边框设置成none
+  [data-theme='dark'] .base-collapse .ant-collapse{
+    border: none !important;
+  }
+  /*end 兼容暗夜模式*/
+  /*文档按钮问号样式*/
+  .sync-text{
+    margin-left: 2px;
+    cursor: pointer;
+    position: relative;
+    top: 2px
+  }
+ :deep(.ant-collapse-borderless >.ant-collapse-item:last-child) {border-bottom-width:1px;}
+</style>
diff --git a/src/views/system/appconfig/ThirdAppWeEnterpriseConfigForm.vue b/src/views/system/appconfig/ThirdAppWeEnterpriseConfigForm.vue
new file mode 100644
index 0000000..410d2c6
--- /dev/null
+++ b/src/views/system/appconfig/ThirdAppWeEnterpriseConfigForm.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="base-collapse">
+    <div class="header"> 企业微信集成 </div>
+    <a-collapse expand-icon-position="right" :bordered="false">
+      <a-collapse-panel key="1">
+        <template #header>
+          <div style="font-size: 16px"> 1.获取对接信息</div>
+        </template>
+        <div class="base-desc">从企业微信平台获取对接信息，即可开始集成以及同步通讯录</div>
+        <div style="margin-top: 5px">
+          <a href="https://help.qiaoqiaoyun.com/expand/dingding.html" target="_blank">如何获取对接信息?</a>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+    <div>
+      <a-collapse expand-icon-position="right" :bordered="false">
+        <a-collapse-panel key="2">
+          <template #header>
+            <div style="width: 100%; justify-content: space-between; display: flex">
+              <div style="font-size: 16px"> 2.对接信息录入及解绑</div>
+            </div>
+          </template>
+          <div class="flex-flow">
+            <div class="base-title">Agentld</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.agentId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppKey</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppSecret</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientSecret" readonly />
+            </div>
+          </div>
+          <div style="margin-top: 20px; width: 100%; text-align: right">
+            <a-button @click="weEnterpriseEditClick">编辑</a-button>
+            <a-button v-if="appConfigData.id" @click="cancelBindClick" danger style="margin-left: 10px">取消绑定</a-button>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+      <div class="sync-padding">
+        <div style="font-size: 16px; width: 100%"> 3.数据同步</div>
+        <div style="margin-top: 20px" class="base-desc">
+          从企业微信同步到敲敲云
+          <a style="margin-left: 10px" @click="seeBindWeChat">查看已绑定的企业微信用户</a>
+          <div style="float: right">
+            <a-button @loading="btnLoading" @click="thirdUserByWechat">同步</a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ThirdAppConfigModal @register="registerAppConfigModal" @success="handleSuccess" />
+  <ThirdAppBindWeEnterpriseModal @register="registerBindAppConfigModal" @success="handleBindSuccess" />
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import { getThirdConfigByTenantId, deleteThirdAppConfig } from './ThirdApp.api';
+  import ThirdAppConfigModal from './ThirdAppConfigModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getTenantId } from '@/utils/auth';
+  import ThirdAppBindWeEnterpriseModal from './ThirdAppBindWeEnterpriseModal.vue';
+  import { Modal } from "ant-design-vue";
+
+  export default defineComponent({
+    name: 'ThirdAppWeEnterpriseConfigForm',
+    components: {
+      ThirdAppConfigModal,
+      ThirdAppBindWeEnterpriseModal,
+    },
+    setup() {
+      const btnLoading = ref<boolean>(false);
+      //第三方配置数据
+      const appConfigData = ref<any>({
+        agentId: '',
+        clientId: '',
+        clientSecret: '',
+      });
+      //企业微信钉钉配置modal
+      const [registerAppConfigModal, { openModal }] = useModal();
+      const [registerBindAppConfigModal, { openModal: openBindModal }] = useModal();
+      const { createMessage } = useMessage();
+
+      /**
+       * 初始化数据
+       *
+       * @param params
+       */
+      async function initThirdAppConfigData(params) {
+        let values = await getThirdConfigByTenantId(params);
+        if (values) {
+          appConfigData.value = values;
+        } else {
+          appConfigData.value = "";
+        }
+      }
+
+      /**
+       * 企业微信编辑
+       */
+      async function weEnterpriseEditClick() {
+        let tenantId = getTenantId();
+        openModal(true, {
+          tenantId: tenantId,
+          thirdType: 'wechat_enterprise',
+        });
+      }
+
+      /**
+       * 获取企业微信绑定的用户
+       */
+      async function thirdUserByWechat() {
+        openBindModal(true, { izBind: false });
+      }
+
+      /**
+       * 成功回调
+       */
+      function handleSuccess() {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
+      }
+
+      /**
+       * 绑定成功返回值
+       *
+       * @param options
+       * @param item
+       */
+      function handleBindSuccess(options, item) {
+        console.log("options:::",options)
+        console.log("item:::",item)
+        if (item.success) {
+          if (options != null) {
+            Modal.success(options);
+          } else {
+            createMessage.warning(item.message);
+          }
+        } else {
+          if (options && options.title) {
+            Modal.warning(options);
+          } else {
+            createMessage.warning({
+              content: '同步失败，请检查对接信息录入中是否填写正确，并确认是否已开启企业微信配置！',
+              duration: 5,
+            });
+          }
+        }
+      }
+      
+      /**
+       * 查看已绑定的企业微信
+       */
+      function seeBindWeChat() {
+        openBindModal(true,{ izBind: true })
+      }
+
+      /**
+       * 取消绑定
+       */
+      function cancelBindClick() {
+        if(!appConfigData.value.id){
+          createMessage.warning("请先绑定企业微信应用！");
+          return;
+        }
+        Modal.confirm({
+          title: '取消绑定',
+          content: '是否要解除当前组织的企业微信应用配置绑定？',
+          okText: '确认',
+          cancelText: '取消',
+          onOk: () => {
+            deleteThirdAppConfig({ id: appConfigData.value.id }, handleSuccess);
+          },
+        });
+      }
+      
+      onMounted(() => {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
+      });
+
+      return {
+        appConfigData,
+        weEnterpriseEditClick,
+        registerAppConfigModal,
+        registerBindAppConfigModal,
+        handleSuccess,
+        btnLoading,
+        thirdUserByWechat,
+        handleBindSuccess,
+        seeBindWeChat,
+        cancelBindClick,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .header {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: 18px;
+    color: @text-color;
+  }
+
+  .flex-flow {
+    display: flex;
+    min-height: 0;
+  }
+
+  .sync-padding {
+    padding: 12px 0 16px;
+    color: @text-color;
+  }
+
+  .base-collapse {
+    margin-top: 20px;
+    padding: 0 24px;
+    font-size: 20px;
+
+    .base-desc {
+      font-size: 14px;
+      color: @text-color;
+    }
+
+    .base-title {
+      width: 100px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    .base-message {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    :deep(.ant-collapse-header) {
+      padding: 12px 0 16px;
+    }
+
+    :deep(.ant-collapse-content-box) {
+      padding-left: 0;
+    }
+  }
+  /*begin 兼容暗夜模式*/
+  //暗黑模式下卡片的边框设置成none
+  [data-theme='dark'] .base-collapse .ant-collapse {
+    border: none !important;
+  }
+  /*end 兼容暗夜模式*/
+  /*文档按钮问号样式*/
+  .sync-text {
+    margin-left: 2px;
+    cursor: pointer;
+    position: relative;
+    top: 2px;
+  }
+</style>
diff --git a/src/views/system/category/category.api.ts b/src/views/system/category/category.api.ts
new file mode 100644
index 0000000..9295745
--- /dev/null
+++ b/src/views/system/category/category.api.ts
@@ -0,0 +1,78 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/category/rootList',
+  save = '/sys/category/add',
+  edit = '/sys/category/edit',
+  deleteCategory = '/sys/category/delete',
+  deleteBatch = '/sys/category/deleteBatch',
+  importExcel = '/sys/category/importExcel',
+  exportXls = '/sys/category/exportXls',
+  loadTreeData = '/sys/category/loadTreeRoot',
+  getChildList = '/sys/category/childList',
+  getChildListBatch = '/sys/category/getChildListBatch',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ * @param params
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+/**
+ * 删除
+ */
+export const deleteCategory = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteCategory, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDeleteCategory = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdateDict = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 查询全部树形节点数据
+ * @param params
+ */
+export const loadTreeData = (params) => defHttp.get({ url: Api.loadTreeData, params });
+/**
+ * 查询子节点数据
+ * @param params
+ */
+export const getChildList = (params) => defHttp.get({ url: Api.getChildList, params });
+/**
+ * 批量查询子节点数据
+ * @param params
+ */
+export const getChildListBatch = (params) => defHttp.get({ url: Api.getChildListBatch, params }, { isTransformResponse: false });
diff --git a/src/views/system/category/category.data.ts b/src/views/system/category/category.data.ts
new file mode 100644
index 0000000..31e0b5a
--- /dev/null
+++ b/src/views/system/category/category.data.ts
@@ -0,0 +1,66 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '分类名称',
+    dataIndex: 'name',
+    width: 350,
+    align: 'left',
+  },
+  {
+    title: '分类编码',
+    dataIndex: 'code',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '名称',
+    field: 'name',
+    component: 'JInput',
+    colProps: { span: 6 },
+  },
+  {
+    label: '编码',
+    field: 'code',
+    component: 'JInput',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '父级节点',
+    field: 'pid',
+    component: 'TreeSelect',
+    componentProps: {
+      // 代码逻辑说明: replaceFields已过期，使用fieldNames代替------------
+      fieldNames: {
+        value: 'key',
+      },
+      dropdownStyle: {
+        maxHeight: '50vh',
+      },
+      getPopupContainer: () => document.body,
+    },
+    show: ({ values }) => {
+      return values.pid !== '0';
+    },
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+  },
+  {
+    label: '分类名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+];
diff --git a/src/views/system/category/components/CategoryModal.vue b/src/views/system/category/components/CategoryModal.vue
new file mode 100644
index 0000000..ee9671e
--- /dev/null
+++ b/src/views/system/category/components/CategoryModal.vue
@@ -0,0 +1,106 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose width="550px" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { formSchema } from '../category.data';
+  import { loadTreeData, saveOrUpdateDict } from '../category.api';
+  // 获取emit
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const expandedRowKeys = ref([]);
+  const treeData = ref([]);
+  const isSubAdd = ref(false);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    expandedRowKeys.value = [];
+    setModalProps({ confirmLoading: false, minHeight: 80 });
+    isUpdate.value = !!data?.isUpdate;
+    // 代码逻辑说明: 分类字典data.record为空报错------------
+    isSubAdd.value = !data?.isUpdate && data.record && data.record.id;
+    if (data?.record) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    //父级节点树信息
+    treeData.value = await loadTreeData({ async: false, pcode: '' });
+    updateSchema({
+      field: 'pid',
+      componentProps: { treeData },
+    });
+  });
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增字典' : '编辑字典'));
+
+  /**
+   * 根据pid获取展开的节点
+   * @param pid
+   * @param arr
+   */
+  function getExpandKeysByPid(pid, arr) {
+    if (pid && arr && arr.length > 0) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].key == pid && unref(expandedRowKeys).indexOf(pid) < 0) {
+          //需要获取同一级的key
+          getSameLevelExpandKeysByPid(arr[i]);
+          expandedRowKeys.value.push(arr[i].key);
+          getExpandKeysByPid(arr[i]['parentId'], unref(treeData));
+        } else {
+          getExpandKeysByPid(pid, arr[i].children);
+        }
+      }
+    }
+  }
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDict(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //展开的节点信息
+      await getExpandKeysByPid(values['pid'], unref(treeData));
+      //刷新列表(isUpdate:是否编辑;values:表单信息;expandedArr:展开的节点信息)
+      emit('success', { isUpdate: unref(isUpdate), isSubAdd:unref(isSubAdd), values: { ...values }, expandedArr: unref(expandedRowKeys).reverse() });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 获取同一级的id和同一级的子级id
+   */
+  function getSameLevelExpandKeysByPid(arr) {
+    if (arr.children && arr.children.length > 0) {
+      for (const children of arr.children) {
+        if (unref(expandedRowKeys).indexOf(children.key) < 0 && children.children && children.children.length > 0) {
+          getSameLevelExpandKeysByPid(children);
+          expandedRowKeys.value.push(children.key);
+        }
+      }
+    }
+  }
+</script>
diff --git a/src/views/system/category/index.vue b/src/views/system/category/index.vue
new file mode 100644
index 0000000..dbae42d
--- /dev/null
+++ b/src/views/system/category/index.vue
@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable
+      @register="registerTable"
+      :rowSelection="rowSelection"
+      :expandedRowKeys="expandedRowKeys"
+      @expand="handleExpand"
+      @fetch-success="onFetchSuccess"
+    >
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <!--字典弹窗-->
+    <CategoryModal @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" name="system-category" setup>
+  //ts语法
+  import { ref, computed, unref, toRaw, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { useDrawer } from '/src/components/Drawer';
+  import CategoryModal from './components/CategoryModal.vue';
+  import { useModal } from '/src/components/Modal';
+  import { useMethods } from '/src/hooks/system/useMethods';
+  import { columns, searchFormSchema } from './category.data';
+  import { list, deleteCategory, batchDeleteCategory, getExportUrl, getImportUrl, getChildList, getChildListBatch } from './category.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  const expandedRowKeys = ref([]);
+  const { handleExportXls, handleImportXls } = useMethods();
+  //字典model
+  const [registerModal, { openModal }] = useModal();
+  // 列表页面公共参数、方法
+  const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
+    designScope: 'category-template',
+    tableProps: {
+      title: '分类字典',
+      api: list,
+      columns: columns,
+      actionColumn: {
+        width: 180,
+      },
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      isTreeTable: true,
+    },
+    exportConfig: {
+      name: '分类字典列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  //注册table数据
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] =
+    tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  async function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 详情
+   */
+  async function handleDetail(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      hideFooter: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteCategory({ id: record.id }, importSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    const ids = selectedRowKeys.value.filter((item) => !item.includes('loading'));
+    await batchDeleteCategory({ ids: ids }, importSuccess);
+  }
+  /**
+   * 导入
+   */
+  function importSuccess() {
+    // 代码逻辑说明: [issues/54]树字典，勾选，然后批量删除，系统错误------------
+    (selectedRowKeys.value = []) && reload();
+  }
+  /**
+   * 添加下级
+   */
+  function handleAddSub(record) {
+    openModal(true, {
+      record,
+      isUpdate: false,
+    });
+  }
+  /**
+   * 成功回调
+   */
+  async function handleSuccess({ isUpdate,isSubAdd, values, expandedArr }) {
+    if (isUpdate) {
+      //编辑回调
+      updateTableDataRecord(values.id, values);
+    } else {
+      if (!values['pid']) {
+        //新增根节点
+        reload();
+      } else {
+        //新增子集
+        // 代码逻辑说明: [issue/4550]分类字典数据量过多会造成数据查询时间过长---
+        if(isSubAdd){
+          await expandTreeNode(values.pid);
+        }else{
+          //expandedRowKeys.value = [];
+          for (let key of unref(expandedArr)) {
+            await expandTreeNode(key);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 接口请求成功后回调
+   */
+  function onFetchSuccess(result) {
+    getDataByResult(result.items) && loadDataByExpandedRows();
+  }
+  /**
+   * 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
+   */
+  async function loadDataByExpandedRows() {
+    if (unref(expandedRowKeys).length > 0) {
+      const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') });
+      if (res.success && res.result.records.length > 0) {
+        //已展开的数据批量子节点
+        let records = res.result.records;
+        const listMap = new Map();
+        for (let item of records) {
+          let pid = item['pid'];
+          if (unref(expandedRowKeys).includes(pid)) {
+            let mapList = listMap.get(pid);
+            if (mapList == null) {
+              mapList = [];
+            }
+            mapList.push(item);
+            listMap.set(pid, mapList);
+          }
+        }
+        let childrenMap = listMap;
+        let fn = (list) => {
+          if (list) {
+            list.forEach((data) => {
+              if (unref(expandedRowKeys).includes(data.id)) {
+                data.children = getDataByResult(childrenMap.get(data.id));
+                fn(data.children);
+              }
+            });
+          }
+        };
+        fn(getDataSource());
+      }
+    }
+  }
+  /**
+   * 处理数据集
+   */
+  function getDataByResult(result) {
+    if (result && result.length > 0) {
+      return result.map((item) => {
+        //判断是否标记了带有子节点
+        if (item['hasChild'] == '1') {
+          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
+          item.children = [loadChild];
+        }
+        return item;
+      });
+    }
+  }
+  /**
+   *树节点展开合并
+   * */
+  async function handleExpand(expanded, record) {
+    // 判断是否是展开状态，展开状态(expanded)并且存在子集(children)并且未加载过(isLoading)的就去查询子节点数据
+    if (expanded) {
+      expandedRowKeys.value.push(record.id);
+      if (record.children.length > 0 && !!record.children[0].isLoading) {
+        let result = await getChildList({ pid: record.id });
+        if (result && result.length > 0) {
+          record.children = getDataByResult(result);
+        } else {
+          record.children = null;
+          record.hasChild = '0';
+        }
+      }
+    } else {
+      let keyIndex = expandedRowKeys.value.indexOf(record.id);
+      if (keyIndex >= 0) {
+        expandedRowKeys.value.splice(keyIndex, 1);
+      }
+    }
+  }
+  /**
+   *操作表格后处理树节点展开合并
+   * */
+  async function expandTreeNode(key) {
+    let record:any = findTableDataRecord(key);
+    // 代码逻辑说明: [issue/4550]分类字典数据量过多会造成数据查询时间过长，显示“接口请求超时,请刷新页面重试!”---
+    if(!expandedRowKeys.value.includes(key)){
+      expandedRowKeys.value.push(key);
+    }
+    let result = await getChildList({ pid: key });
+    if (result && result.length > 0) {
+      record.children = getDataByResult(result);
+    } else {
+      record.children = null;
+      record.hasChild = '0';
+    }
+    updateTableDataRecord(key, record);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '确定删除吗?',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+      {
+        label: '添加下级',
+        onClick: handleAddSub.bind(null, { pid: record.id }),
+      },
+    ];
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/checkRule/CheckRuleModal.vue b/src/views/system/checkRule/CheckRuleModal.vue
new file mode 100644
index 0000000..466c3ba
--- /dev/null
+++ b/src/views/system/checkRule/CheckRuleModal.vue
@@ -0,0 +1,247 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" @ok="handleSubmit" :title="title" :width="1200" destroyOnClose>
+    <BasicForm @register="registerForm" />
+
+    <a-tabs v-model:activeKey="activeKey" animated>
+      <a-tab-pane tab="局部规则" key="1" :forceRender="true">
+        <JVxeTable ref="vTable1" toolbar rowNumber dragSort rowSelection :maxHeight="580" :dataSource="dataSource1" :columns="columns1">
+          <template #toolbarAfter>
+            <a-alert type="info" showIcon message="局部规则按照你输入的位数有序的校验" style="margin-bottom: 8px" />
+          </template>
+        </JVxeTable>
+      </a-tab-pane>
+      <a-tab-pane tab="全局规则" key="2" :forceRender="true">
+        <JVxeTable
+          ref="vTable2"
+          toolbar
+          rowNumber
+          dragSort
+          rowSelection
+          :maxHeight="580"
+          :dataSource="dataSource2"
+          :addSetActive="false"
+          :columns="columns2"
+        >
+          <template #toolbarAfter>
+            <a-alert type="info" showIcon message="全局规则可校验用户输入的所有字符；全局规则的优先级比局部规则的要高。" style="margin-bottom: 8px" />
+          </template>
+        </JVxeTable>
+      </a-tab-pane>
+    </a-tabs>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { computed, ref, unref } from 'vue';
+  import { formSchema } from './check.rule.data';
+  import { saveCheckRule, updateCheckRule } from './check.rule.api';
+  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
+  import { pick } from 'lodash-es';
+
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const activeKey = ref('1');
+  let arr1: any[] = [];
+  let dataSource1 = ref(arr1);
+  let arr2: any[] = [];
+  let dataSource2 = ref(arr2);
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    activeKey.value = '1';
+    dataSource1.value = [];
+    dataSource2.value = [];
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+
+      let ruleJson = data.record.ruleJson;
+      if (ruleJson) {
+        let ruleList = JSON.parse(ruleJson);
+        // 筛选出全局规则和局部规则
+        let global: any[] = [],
+          design: any[] = [],
+          priority = '1';
+        ruleList.forEach((rule) => {
+          if (rule.digits === '*') {
+            global.push(Object.assign(rule, { priority }));
+          } else {
+            priority = '0';
+            design.push(rule);
+          }
+        });
+        dataSource1.value = design;
+        dataSource2.value = global;
+      }
+    }
+  });
+
+  const vTable1 = ref<JVxeTableInstance>();
+  const vTable2 = ref<JVxeTableInstance>();
+
+  // 验证表格 返回表格数据
+  function validateMyTable(tableRef, key) {
+    return new Promise((resolve, reject) => {
+      tableRef.value!.validateTable().then((errMap) => {
+        if (errMap) {
+          activeKey.value = key;
+          reject();
+        } else {
+          const values = tableRef.value!.getTableData();
+          resolve(values);
+        }
+      });
+    });
+  }
+
+  //表单提交事件
+  async function handleSubmit() {
+    let mainData;
+    let globalValues = [];
+    let designValues = [];
+    validate()
+      .then((formValue) => {
+        mainData = formValue;
+        return validateMyTable(vTable1, '1');
+      })
+      .then((tableData1: []) => {
+        if (tableData1 && tableData1.length > 0) {
+          designValues = tableData1;
+        }
+        return validateMyTable(vTable2, '2');
+      })
+      .then((tableData2: []) => {
+        if (tableData2 && tableData2.length > 0) {
+          globalValues = tableData2;
+        }
+        // 整合两个子表的数据
+        let firstGlobal: any[] = [],
+          afterGlobal: any[] = [];
+        for (let i = 0; i < globalValues.length; i++) {
+          let v: any = globalValues[i];
+          v.digits = '*';
+          if (v.priority === '1') {
+            firstGlobal.push(v);
+          } else {
+            afterGlobal.push(v);
+          }
+        }
+        let concatValues = firstGlobal.concat(designValues).concat(afterGlobal);
+        let subValues = concatValues.map((i) => pick(i, 'digits', 'pattern', 'message'));
+        // 生成 formData，用于传入后台
+        let ruleJson = JSON.stringify(subValues);
+        let formData = Object.assign({}, mainData, { ruleJson });
+        saveOrUpdateFormData(formData);
+      })
+      .catch(() => {
+        setModalProps({ confirmLoading: false });
+        console.error('验证未通过!');
+      });
+  }
+
+  // 表单提交请求
+  async function saveOrUpdateFormData(formData) {
+    try {
+      console.log('表单提交数据', formData);
+      setModalProps({ confirmLoading: true });
+      if (isUpdate.value) {
+        await updateCheckRule(formData);
+      } else {
+        await saveCheckRule(formData);
+      }
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 校验
+   * @param cellValue
+   * @param callback
+   */
+  const validatePatternHandler = ({ cellValue }, callback) => {
+    try {
+      new RegExp(cellValue);
+      callback(true);
+    } catch (e) {
+      callback(false, '请输入正确的正则表达式');
+    }
+  };
+
+  const columns1 = ref<JVxeColumn[]>([
+    {
+      title: '位数',
+      key: 'digits',
+      type: JVxeTypes.inputNumber,
+      minWidth: 180,
+      validateRules: [
+        { required: true, message: '${title}不能为空' },
+        { pattern: /^[1-9]\d*$/, message: '请输入零以上的正整数' },
+      ],
+    },
+    {
+      title: '规则（正则表达式）',
+      key: 'pattern',
+      minWidth: 320,
+      type: JVxeTypes.input,
+      validateRules: [{ required: true, message: '规则不能为空' }, { handler: validatePatternHandler }],
+    },
+    {
+      title: '提示文本',
+      key: 'message',
+      minWidth: 180,
+      type: JVxeTypes.input,
+      validateRules: [{ required: true, message: '${title}不能为空' }],
+    },
+  ]);
+
+  const columns2 = ref<JVxeColumn[]>([
+    {
+      title: '优先级',
+      key: 'priority',
+      type: JVxeTypes.select,
+      defaultValue: '1',
+      options: [
+        { title: '优先运行', value: '1' },
+        { title: '最后运行', value: '0' },
+      ],
+      validateRules: [],
+    },
+    {
+      title: '规则（正则表达式）',
+      key: 'pattern',
+      width: '40%',
+      type: JVxeTypes.input,
+      validateRules: [{ required: true, message: '规则不能为空' }, { handler: validatePatternHandler }],
+    },
+    {
+      title: '提示文本',
+      key: 'message',
+      width: '20%',
+      type: JVxeTypes.input,
+      validateRules: [{ required: true, message: '${title}不能为空' }],
+    },
+  ]);
+</script>
diff --git a/src/views/system/checkRule/CheckRuleTestModal.vue b/src/views/system/checkRule/CheckRuleTestModal.vue
new file mode 100644
index 0000000..06dd10c
--- /dev/null
+++ b/src/views/system/checkRule/CheckRuleTestModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <BasicModal v-bind="$attrs" :okButtonProps="okButtonProps" @register="registerModal" destroyOnClose>
+    <BasicForm @register="registerForm" />
+    <div style="display: flex; flex-flow: row wrap">
+      <div style="padding: 0 4px" v-for="(str, index) of realTestValue" :key="index">
+        <a-row>
+          <a-col style="text-align: center">
+            <a-input :value="str" style="text-align: center; width: 40px" />
+          </a-col>
+          <a-col style="text-align: center">{{ index + 1 }}</a-col>
+        </a-row>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { checkRuleInput } from '/@/views/system/checkRule/check.rule.data';
+  import { ref } from 'vue';
+  let realTestValue = ref('');
+  const okButtonProps = {
+    style: { display: 'none' },
+  };
+  const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
+    schemas: checkRuleInput,
+    showActionButtonGroup: false,
+    labelCol: {
+      span: 24,
+    },
+    wrapperCol: {
+      span: 24,
+    },
+  });
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    realTestValue.value = '';
+    setModalProps({
+      confirmLoading: false,
+      cancelText: '关闭',
+      title: '功能测试',
+      width: '1000px',
+    });
+    await setFieldsValue({
+      ruleCode: data.ruleCode,
+      testValue: realTestValue,
+    });
+  });
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/checkRule/check.rule.api.ts b/src/views/system/checkRule/check.rule.api.ts
new file mode 100644
index 0000000..c4b5391
--- /dev/null
+++ b/src/views/system/checkRule/check.rule.api.ts
@@ -0,0 +1,86 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/checkRule/list',
+  delete = '/sys/checkRule/delete',
+  deleteBatch = '/sys/checkRule/deleteBatch',
+  exportXls = 'sys/checkRule/exportXls',
+  importXls = 'sys/checkRule/importExcel',
+  checkByCode = '/sys/checkRule/checkByCode',
+  save = '/sys/checkRule/add',
+  edit = '/sys/checkRule/edit',
+}
+
+/**
+ * 导出地址
+ */
+export const exportUrl = Api.exportXls;
+/**
+ * 导入地址
+ */
+export const importUrl = Api.importXls;
+
+/**
+ * 列表查询
+ * @param params
+ */
+export const getCheckRuleList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 删除
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteCheckRule = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDeleteCheckRule = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 根据编码校验规则code，校验传入的值是否合法
+ * @param ruleCode
+ * @param value
+ */
+export const validateCheckRule = (ruleCode, value) => {
+  value = encodeURIComponent(value);
+  let params = { ruleCode, value };
+  return defHttp.get({ url: Api.checkByCode, params }, { isTransformResponse: false });
+};
+
+/**
+ * 保存
+ * @param params
+ */
+export const saveCheckRule = (params) => {
+  return defHttp.post({ url: Api.save, params });
+};
+
+/**
+ * 更新
+ * @param params
+ */
+export const updateCheckRule = (params) => {
+  return defHttp.put({ url: Api.edit, params });
+};
diff --git a/src/views/system/checkRule/check.rule.data.ts b/src/views/system/checkRule/check.rule.data.ts
new file mode 100644
index 0000000..b7da750
--- /dev/null
+++ b/src/views/system/checkRule/check.rule.data.ts
@@ -0,0 +1,152 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+import { duplicateCheckDelay } from '/@/views/system/user/user.api';
+import { validateCheckRule } from '/@/views/system/checkRule/check.rule.api';
+import { array } from 'vue-types';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 200,
+    align: 'center',
+  },
+  {
+    title: '规则编码',
+    dataIndex: 'ruleCode',
+    width: 200,
+    align: 'center',
+  },
+  {
+    title: '规则描述',
+    dataIndex: 'ruleDescription',
+    width: 300,
+    align: 'center',
+    customRender: function ({ text }) {
+      return render.renderTip(text, 30);
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'ruleCode',
+    label: '规则编码',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+    colProps: { span: 24 },
+  },
+  {
+    field: 'ruleCode',
+    label: '规则编码',
+    component: 'Input',
+    colProps: { span: 24 },
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ model }) => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            return new Promise((resolve, reject) => {
+              if (!value) {
+                return reject('请输入规则编码！');
+              }
+              let params = {
+                tableName: 'sys_check_rule',
+                fieldName: 'rule_code',
+                fieldVal: value,
+                dataId: model.id,
+              };
+              duplicateCheckDelay(params)
+                .then((res) => {
+                  res.success ? resolve() : reject('规则编码已存在!');
+                })
+                .catch((err) => {
+                  reject(err.message || '校验失败');
+                });
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'ruleDescription',
+    label: '规则描述',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入规则描述',
+      rows: 2,
+    },
+  },
+];
+
+export const checkRuleInput: FormSchema[] = [
+  {
+    label: '123',
+    field: 'ruleCode',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'testValue',
+    label: '需要测试的值:',
+    component: 'Input',
+    componentProps: ({ formModel }) => {
+      return {
+        onChange: (e) => {
+          formModel.testValue = e.target.value;
+        },
+      };
+    },
+    dynamicRules: ({ model }) => {
+      const { ruleCode } = model;
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            return new Promise((resolve, reject) => {
+              if (ruleCode && value) {
+                /*console.log({ruleCode,value})*/
+                validateCheckRule(ruleCode, value)
+                  .then((res) => {
+                    //console.log(1233, res)
+                    res['success'] ? resolve() : reject(res['message']);
+                  })
+                  .catch((err) => {
+                    reject(err.message || err);
+                  });
+              } else {
+                resolve();
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+];
diff --git a/src/views/system/checkRule/index.vue b/src/views/system/checkRule/index.vue
new file mode 100644
index 0000000..9dbf249
--- /dev/null
+++ b/src/views/system/checkRule/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div :class="prefixCls">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+
+    <CheckRuleTestModal @register="testModal"></CheckRuleTestModal>
+    <CheckRuleModal @register="registerModal" @success="reload"></CheckRuleModal>
+  </div>
+</template>
+
+<script name="system-fillrule" lang="ts" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  import { useModal } from '/@/components/Modal';
+  import {
+    getCheckRuleList,
+    exportUrl,
+    importUrl,
+    deleteCheckRule,
+    batchDeleteCheckRule,
+    validateCheckRule,
+  } from '/@/views/system/checkRule/check.rule.api';
+  import { columns, searchFormSchema } from '/@/views/system/checkRule/check.rule.data';
+  import { ActionItem } from '/@/components/Table';
+
+  import CheckRuleTestModal from '/@/views/system/checkRule/CheckRuleTestModal.vue';
+  const [testModal, { openModal: openTestModal }] = useModal();
+
+  import CheckRuleModal from '/@/views/system/checkRule/CheckRuleModal.vue';
+  const [registerModal, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, createMessage, onExportXls, onImportXls, createSuccessModal } = useListPage({
+    designScope: 'check-rule',
+    tableProps: {
+      title: '编码校验规则管理页面',
+      api: getCheckRuleList,
+      columns: columns,
+      showIndexColumn: true,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+    },
+    exportConfig: {
+      url: exportUrl,
+      name: '编码校验规则列表',
+    },
+    importConfig: {
+      url: importUrl,
+      success: () => reload(),
+    },
+  });
+  // 注册 ListTable
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    console.log('record....', record);
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    console.log(12345, record);
+    await deleteCheckRule({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteCheckRule({ ids: selectedRowKeys.value }, () => {
+      selectedRowKeys.value = [];
+      reload();
+    });
+  }
+
+  /**
+   * 功能测试
+   */
+  function testRule(record) {
+    openTestModal(true, { ruleCode: record.ruleCode });
+  }
+
+  /**
+   * 编辑
+   */
+  function getTableAction(record): ActionItem[] {
+    return [{ label: '编辑', onClick: handleEdit.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      { label: '功能测试', onClick: testRule.bind(null, record) },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '确认要删除吗？',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/depart/TenantDepartList.vue b/src/views/system/depart/TenantDepartList.vue
new file mode 100644
index 0000000..a60bcd6
--- /dev/null
+++ b/src/views/system/depart/TenantDepartList.vue
@@ -0,0 +1,97 @@
+<template>
+  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10">
+    <a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
+      <DepartLeftTree
+        v-if="showDepart"
+        ref="leftTree"
+        @select="onTreeSelect"
+        @rootTreeData="onRootTreeData"
+        :isTenantDepart="true"
+        :loginTenantName="loginTenantName"
+      />
+    </a-col>
+    <a-col :xl="12" :lg="24" :md="24" style="margin-bottom: 10px">
+      <div style="height: 100%" :class="[`${prefixCls}`]">
+        <a-tabs v-show="departData != null" defaultActiveKey="base-info">
+          <a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
+            <div style="padding: 20px">
+              <DepartFormTab v-if="showDepart" :data="departData" :rootTreeData="rootTreeData" @success="onSuccess" :isTenantDepart="true" />
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+        <div v-show="departData == null" style="padding-top: 40px">
+          <a-empty description="尚未选择部门" />
+        </div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup name="TenantDepartList">
+  import { onMounted, provide, ref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DepartLeftTree from '/@/views/system/depart/components/DepartLeftTree.vue';
+  import DepartFormTab from '/@/views/system/depart/components/DepartFormTab.vue';
+  import { getLoginTenantName } from '@/views/system/tenant/tenant.api';
+  import { tenantSaasMessage } from '@/utils/common/compUtils';
+
+  const { prefixCls } = useDesign('tenant-depart-manage');
+  provide('prefixCls', prefixCls);
+
+  // 给子组件定义一个ref变量
+  const leftTree = ref();
+  //是否显示部门
+  const showDepart = ref(false);
+
+  // 当前选中的部门信息
+  const departData = ref({});
+  const rootTreeData = ref<any[]>([]);
+  const loginTenantName = ref<string>('');
+
+  /**
+   * 获取租户名称
+   */
+  getTenantName();
+
+  async function getTenantName() {
+    loginTenantName.value = await getLoginTenantName();
+    if (loginTenantName.value) {
+      showDepart.value = true;
+    } else {
+      showDepart.value = false;
+    }
+  }
+
+  // 左侧树选择后触发
+  function onTreeSelect(data) {
+    departData.value = data;
+  }
+
+  // 左侧树rootTreeData触发
+  function onRootTreeData(data) {
+    rootTreeData.value = data;
+  }
+
+  function onSuccess() {
+    leftTree.value.loadRootTreeData();
+  }
+
+  onMounted(() => {
+    //提示信息
+    tenantSaasMessage('租户部门');
+  });
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-tenant-depart-manage';
+
+  .@{prefix-cls} {
+    background: @component-background;
+
+    &--box {
+      .ant-tabs-nav {
+        padding: 0 20px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/depart/components/DepartDataRuleDrawer.vue b/src/views/system/depart/components/DepartDataRuleDrawer.vue
new file mode 100644
index 0000000..3427872
--- /dev/null
+++ b/src/views/system/depart/components/DepartDataRuleDrawer.vue
@@ -0,0 +1,78 @@
+<template>
+  <BasicDrawer title="数据规则/按钮权限配置" :width="365" @close="onClose" @register="registerDrawer">
+    <a-spin :spinning="loading">
+      <a-tabs defaultActiveKey="1">
+        <a-tab-pane tab="数据规则" key="1">
+          <a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
+            <a-row>
+              <a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
+                <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
+              </a-col>
+              <a-col :span="24">
+                <div style="width: 100%; margin-top: 15px">
+                  <a-button type="primary" :loading="loading" :size="'small'" preIcon="ant-design:save-filled" @click="saveDataRuleForRole">
+                    <span>点击保存</span>
+                  </a-button>
+                </div>
+              </a-col>
+            </a-row>
+          </a-checkbox-group>
+          <a-empty v-else description="无配置信息" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { queryDepartDataRule, saveDepartDataRule } from '../depart.api';
+
+  defineEmits(['register']);
+  const loading = ref<boolean>(false);
+  const departId = ref('');
+  const functionId = ref('');
+  const dataRuleList = ref<Array<any>>([]);
+  const dataRuleChecked = ref<Array<any>>([]);
+
+  // 注册抽屉组件
+  const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    departId.value = unref(data.departId);
+    functionId.value = unref(data.functionId);
+    loadData();
+  });
+
+  async function loadData() {
+    try {
+      loading.value = true;
+      const { datarule, drChecked } = await queryDepartDataRule(functionId, departId);
+      dataRuleList.value = datarule;
+      if (drChecked) {
+        dataRuleChecked.value = drChecked.split(',');
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function saveDataRuleForRole() {
+    let params = {
+      departId: departId.value,
+      permissionId: functionId.value,
+      dataRuleIds: dataRuleChecked.value.join(','),
+    };
+    saveDepartDataRule(params);
+  }
+
+  function onClose() {
+    doReset();
+  }
+
+  function doReset() {
+    functionId.value = '';
+    dataRuleList.value = [];
+    dataRuleChecked.value = [];
+  }
+</script>
diff --git a/src/views/system/depart/components/DepartFormModal.vue b/src/views/system/depart/components/DepartFormModal.vue
new file mode 100644
index 0000000..2458c23
--- /dev/null
+++ b/src/views/system/depart/components/DepartFormModal.vue
@@ -0,0 +1,154 @@
+<template>
+  <BasicModal :title="title" :width="800" v-bind="$attrs" @ok="handleOk" @register="registerModal">
+    <BasicForm @register="registerForm" >
+      <template #depPostParentId="{ model, field }">
+        <a-tree-select v-model:value="depPostValue" :treeData="treeData" allowClear treeCheckable @select="treeSelect">
+          <template #title="{ orgCategory, title }">
+            <TreeIcon :orgCategory="orgCategory" :title="title"></TreeIcon>
+          </template>
+          <template #tagRender="{option}">
+            <span style="margin-left: 10px" v-if="orgNameMap[option.id]">{{orgNameMap[option.id]}}</span>
+          </template>
+        </a-tree-select>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { watch, computed, inject, ref, unref, onMounted } from 'vue';
+
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  import { saveOrUpdateDepart } from '../depart.api';
+  import { useBasicFormSchema, orgCategoryOptions } from '../depart.data';
+  import TreeIcon from "@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue";
+  import { getDepartPathNameByOrgCode } from "@/utils/common/compUtils";
+
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({
+    rootTreeData: { type: Array, default: () => [] },
+  });
+  const prefixCls = inject('prefixCls');
+  // 当前是否是更新模式
+  const isUpdate = ref<boolean>(false);
+  // 当前的弹窗数据
+  const model = ref<object>({});
+  const title = computed(() => (isUpdate.value ? '编辑' : '新增'));
+  const treeData = ref<any>([]);
+  //上级岗位
+  const depPostValue = ref<any>([]);
+  //上级岗位名称映射
+  const orgNameMap = ref<Record<string, string>>({});
+
+  //注册表单
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: useBasicFormSchema(treeData).basicFormSchema,
+    showActionButtonGroup: false,
+  });
+
+  // 注册弹窗
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    isUpdate.value = unref(data?.isUpdate);
+    // 当前是否为添加子级
+    let isChild = unref(data?.isChild);
+    let categoryOptions = isChild ? orgCategoryOptions.child : orgCategoryOptions.root;
+    
+    if(data.record?.orgCategory && data.record?.orgCategory === '2'){
+      categoryOptions = orgCategoryOptions.childDepartPost; 
+    }
+    if(data.record?.orgCategory && data.record?.orgCategory === '3'){
+      categoryOptions = orgCategoryOptions.childPost; 
+    }
+    if(data.record?.depPostParentId){
+      orgNameMap.value[data.record.depPostParentId] = await getDepartPathNameByOrgCode('', '', data.record.depPostParentId);
+      depPostValue.value = [data.record.depPostParentId];
+    }
+    // 隐藏不需要展示的字段
+    updateSchema([
+      {
+        field: 'parentId',
+        show: isChild,
+        componentProps: {
+          // 如果是添加子部门，就禁用该字段
+          disabled: isChild,
+          treeData: props.rootTreeData,
+        },
+      },
+      {
+        field: 'orgCode',
+        show: false,
+      },
+      {
+        field: 'orgCategory',
+        componentProps: { options: categoryOptions },
+      },
+    ]);
+
+    let record = unref(data?.record);
+    if (typeof record !== 'object') {
+      record = {};
+    }
+    let orgCategory = data.record?.orgCategory;
+    let company = orgCategory === '1' || orgCategory === '4';
+    delete data.record?.orgCategory;
+    // 赋默认值
+    record = Object.assign(
+      {
+        departOrder: 0,
+        orgCategory: company?categoryOptions[1].value:categoryOptions[0].value,
+      },
+      record
+    );
+    model.value = record;
+    await setFieldsValue({ ...record });
+  });
+
+  // 提交事件
+  async function handleOk() {
+    try {
+      setModalProps({ confirmLoading: true });
+      let values = await validate();
+      if(depPostValue.value && depPostValue.value.length > 0){
+        values.depPostParentId = depPostValue.value[0];
+      }else{
+        values.depPostParentId = "";
+      }
+      //提交表单
+      await saveOrUpdateDepart(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 树选中事件
+   *
+   * @param info
+   * @param keys
+   */
+  async function treeSelect(keys,info) {
+    if (info.checkable) {
+      //解决闪动问题
+      orgNameMap.value[info.id] = "";
+      depPostValue.value = [info.value];
+      orgNameMap.value[info.id] = await getDepartPathNameByOrgCode(info.orgCode,info.label,info.id);
+    } else {
+      depPostValue.value = [];
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-select-selector .ant-select-selection-item){
+    svg {
+      display: none !important;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/system/depart/components/DepartFormTab.vue b/src/views/system/depart/components/DepartFormTab.vue
new file mode 100644
index 0000000..e0199de
--- /dev/null
+++ b/src/views/system/depart/components/DepartFormTab.vue
@@ -0,0 +1,177 @@
+<template>
+  <a-spin :spinning="loading">
+    <BasicForm @register="registerForm" >
+      <template #depPostParentId="{ model, field }">
+        <a-tree-select v-model:value="depPostValue" :treeData="treeData" allowClear treeCheckable @select="treeSelect">
+          <template #title="{ orgCategory, title }">
+            <TreeIcon :orgCategory="orgCategory" :title="title"></TreeIcon>
+          </template>
+          <template #tagRender="{ option }">
+            <span style="margin-left: 10px">{{ orgNameMap[option.id] }}</span>
+          </template>
+        </a-tree-select>
+      </template>
+    </BasicForm>
+    <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
+      <div class="j-box-bottom-button-float" :class="[`${prefixCls}`]">
+        <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
+        <a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { watch, computed, inject, ref, unref, onMounted } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { saveOrUpdateDepart } from '../depart.api';
+  import { useBasicFormSchema, orgCategoryOptions, positionChange } from '../depart.data';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import TreeIcon from "@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue";
+  import { getDepartPathNameByOrgCode } from '@/utils/common/compUtils';
+
+  const { prefixCls } = useDesign('j-depart-form-content');
+
+  const emit = defineEmits(['success']);
+  const props = defineProps({
+    data: { type: Object, default: () => ({}) },
+    rootTreeData: { type: Array, default: () => [] },
+  });
+  const loading = ref<boolean>(false);
+  // 当前是否是更新模式
+  const isUpdate = ref<boolean>(true);
+  // 当前的弹窗数据
+  const model = ref<object>({});
+  const treeData = ref<any>([]);
+  //上级岗位
+  const depPostValue = ref<any>([]);
+  //上级岗位名称映射
+  const orgNameMap = ref<Record<string, string>>({});
+
+  //注册表单
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: useBasicFormSchema(treeData).basicFormSchema,
+    showActionButtonGroup: false,
+  });
+
+  const categoryOptions = computed(() => {
+    if (!!props?.data?.parentId) {
+      return orgCategoryOptions.child;
+    } else {
+      return orgCategoryOptions.root;
+    }
+  });
+
+  onMounted(() => {
+    // 禁用字段
+    updateSchema([
+      { field: 'parentId', componentProps: { disabled: true } },
+      { field: 'orgCode', componentProps: { disabled: true } },
+    ]);
+    // data 变化，重填表单
+    watch(
+      () => props.data,
+      async () => {
+        let record = unref(props.data);
+        if (typeof record !== 'object') {
+          record = {};
+        }
+        model.value = record;
+        if (record.depPostParentId) {
+          orgNameMap.value[record.depPostParentId] = await getDepartPathNameByOrgCode('', '', record.depPostParentId);
+          depPostValue.value = [record.depPostParentId];
+        }
+        positionChange(record.positionId, record, treeData);
+        await resetFields();
+        await setFieldsValue({ ...record });
+      },
+      { deep: true, immediate: true }
+    );
+    // 更新 父部门 选项
+    watch(
+      () => props.rootTreeData,
+      async () => {
+        updateSchema([
+          {
+            field: 'parentId',
+            componentProps: { treeData: props.rootTreeData },
+          },
+        ]);
+      },
+      { deep: true, immediate: true }
+    );
+    // 监听并更改 orgCategory options
+    watch(
+      categoryOptions,
+      async () => {
+        updateSchema([
+          {
+            field: 'orgCategory',
+            componentProps: { options: categoryOptions.value },
+          },
+        ]);
+      },
+      { immediate: true }
+    );
+  });
+
+  // 重置表单
+  async function onReset() {
+    await resetFields();
+    await setFieldsValue({ ...model.value });
+  }
+
+  // 提交事件
+  async function onSubmit() {
+    try {
+      loading.value = true;
+      let values = await validate();
+      values = Object.assign({}, model.value, values);
+      if (depPostValue.value && depPostValue.value.length > 0) {
+        values.depPostParentId = depPostValue.value[0];
+      } else {
+        values.depPostParentId = '';
+      }
+      //提交表单
+      await saveOrUpdateDepart(values, isUpdate.value);
+      //刷新列表
+      emit('success');
+      Object.assign(model.value, values);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 树选中事件
+   *
+   * @param info
+   * @param keys
+   */
+  async function treeSelect(keys, info) {
+    if (info.checkable) {
+      orgNameMap.value[info.id] = '';
+      depPostValue.value = [info.value];
+      orgNameMap.value[info.id] = await getDepartPathNameByOrgCode(info.orgCode, info.label, info.id);
+    } else {
+      depPostValue.value = [];
+    }
+  }
+</script>
+<style lang="less">
+
+  @prefix-cls: ~'@{namespace}-j-depart-form-content';
+  /*begin 兼容暗夜模式*/
+  .@{prefix-cls} {
+    background: @component-background;
+    border-top: 1px solid @border-color-base;
+  }
+  /*end 兼容暗夜模式*/
+</style>
+<style lang="less" scoped>
+  :deep(.ant-select-selector .ant-select-selection-item){
+    svg{
+      display: none !important;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/system/depart/components/DepartLeftTree.vue b/src/views/system/depart/components/DepartLeftTree.vue
new file mode 100644
index 0000000..2343884
--- /dev/null
+++ b/src/views/system/depart/components/DepartLeftTree.vue
@@ -0,0 +1,481 @@
+<template>
+  <a-card :bordered="false" style="height: 100%">
+    <div class="j-table-operator" style="width: 100%;display: flex;align-items: center">
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddDepart">新增</a-button>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddChildDepart()">添加下级</a-button>
+      <a-upload name="file" :showUploadList="false" :customRequest="onImportXls" v-if="!isTenantDepart">
+        <a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button>
+      </a-upload>
+      <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-if="!isTenantDepart">导出</a-button>
+      <template v-if="checkedKeys.length > 0">
+        <a-dropdown>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onDeleteBatch">
+                <icon icon="ant-design:delete-outlined" />
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作 </span>
+            <icon icon="akar-icons:chevron-down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <Icon icon="ant-design:question-circle-outlined" style="margin-left: 10px;cursor: pointer" @click="tipShow = true"></Icon>
+      <div v-if="loginTenantName" style="margin-left: 10px;"
+      >当前登录租户: <span class="tenant-name">{{ loginTenantName }}</span>
+      </div>
+    </div>
+    <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
+      <template #message>
+        <template v-if="checkedKeys.length > 0">
+          <span>已选中 {{ checkedKeys.length }} 条记录</span>
+          <a-divider type="vertical" />
+          <a @click="checkedKeys = []">清空</a>
+        </template>
+        <template v-else>
+          <span>未选中任何数据</span>
+        </template>
+      </template>
+    </a-alert>
+    <a-spin :spinning="loading">
+      <a-input-search placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" />
+      <!--组织机构树-->
+      <template v-if="treeData.length > 0">
+        <a-tree
+          v-if="!treeReloading"
+          checkable
+          :clickRowToExpand="false"
+          :treeData="treeData"
+          :selectedKeys="selectedKeys"
+          :checkStrictly="checkStrictly"
+          :load-data="loadChildrenTreeData"
+          :checkedKeys="checkedKeys"
+          v-model:expandedKeys="expandedKeys"
+          @check="onCheck"
+          @select="onSelect"
+          draggable
+          @drop="onDrop"
+          @dragstart="onDragStart"
+          style="overflow-y: auto;height: calc(100vh - 330px);"
+        >
+          <template #title="{ key: treeKey, title, dataRef, data }">
+            <a-dropdown :trigger="['contextmenu']">
+              <Popconfirm
+                :open="visibleTreeKey === treeKey"
+                title="确定要删除吗？"
+                ok-text="确定"
+                cancel-text="取消"
+                placement="rightTop"
+                @confirm="onDelete(dataRef)"
+                @openChange="onVisibleChange"
+              >
+                <TreeIcon :orgCategory="dataRef.orgCategory" :title="title"></TreeIcon>
+              </Popconfirm>
+
+              <template #overlay>
+                <a-menu @click="">
+                  <a-menu-item key="1" @click="onAddChildDepart(dataRef)" v-if="data.orgCategory !== '3'">添加下级</a-menu-item>
+                  <a-menu-item key="2" @click="visibleTreeKey = treeKey">
+                    <span style="color: red">删除</span>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </template>
+        </a-tree>
+      </template>
+      <a-empty v-else description="暂无数据" />
+    </a-spin>
+    <DepartFormModal :rootTreeData="treeData" @register="registerModal" @success="loadRootTreeData" />
+  </a-card>
+  <a-modal v-model:open="tipShow" :footer="null" title="部门规则说明" :width="800">
+      <ul class="departmentalRulesTip">
+        <li>当前部门机构设置支持集团组织架构，第一级默认为公司，下级可创建子公司、部门和岗位。</li>
+        <li><br/></li>
+        <li>1、岗位下不能添加下级。</li>
+        <li>2、部门下不能直接添加子公司。</li>
+        <li>3、子公司下可继续添加子公司。</li>
+        <li>4、岗位需配置职务级别，岗位的级别高低和上下级关系均以职务级别及上级岗位设置为准。</li>
+        <li>5、董事长岗位仅可选择上级公司（子公司或总公司）各部门的所有岗位为上级岗位。</li>
+        <li>6、非董事长岗位仅可选择当前父级部门及本部门内级别更高的岗位为上级岗位。</li>
+        <li><br/></li>
+        <li><b>特别说明：</b>董事长相关逻辑为固定写死，职务等级“董事长”的表述请勿修改。</li>
+      </ul>
+    <div style="height: 10px"></div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { inject, nextTick, ref, unref, defineEmits, h } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { Api, deleteBatchDepart, queryDepartAndPostTreeSync, updateChangeDepart } from '../depart.api';
+  import { searchByKeywords } from '/@/views/system/departUser/depart.user.api';
+  import DepartFormModal from '/@/views/system/depart/components/DepartFormModal.vue';
+  import { Modal, Popconfirm } from 'ant-design-vue';
+  import TreeIcon from "@/components/Form/src/jeecg/components/TreeIcon/TreeIcon.vue";
+
+  const prefixCls = inject('prefixCls');
+  const emit = defineEmits(['select', 'rootTreeData']);
+  const { createMessage } = useMessage();
+  const { handleImportXls, handleExportXls } = useMethods();
+  const props = defineProps({
+    //是否为租户部门
+    isTenantDepart: { default: false, type: Boolean },
+    //当前登录租户
+    loginTenantName: { default: "", type: String },
+  })
+
+  const loading = ref<boolean>(false);
+  // 部门树列表数据
+  const treeData = ref<any[]>([]);
+  // 当前选中的项
+  const checkedKeys = ref<any[]>([]);
+  // 当前展开的项
+  const expandedKeys = ref<any[]>([]);
+  // 当前选中的项
+  const selectedKeys = ref<any[]>([]);
+  // 树组件重新加载
+  const treeReloading = ref<boolean>(false);
+  // 树父子是否关联
+  const checkStrictly = ref<boolean>(true);
+  // 当前选中的部门
+  const currentDepart = ref<any>(null);
+  // 控制确认删除提示框是否显示
+  const visibleTreeKey = ref<any>(null);
+  // 搜索关键字
+  const searchKeyword = ref('');
+  // 提示弹窗是否显示
+  const tipShow = ref<boolean>(false);
+
+  // 注册 modal
+  const [registerModal, { openModal }] = useModal();
+
+  // 加载顶级部门信息
+  async function loadRootTreeData() {
+    try {
+      loading.value = true;
+      treeData.value = [];
+      const result = await queryDepartAndPostTreeSync();
+      if (Array.isArray(result)) {
+        treeData.value = result;
+      }
+      if (expandedKeys.value.length === 0) {
+        autoExpandParentNode();
+      } else {
+        if (selectedKeys.value.length === 0) {
+          let item = treeData.value[0];
+          if (item) {
+            // 默认选中第一个
+            setSelectedKey(item.id, item);
+          }
+        } else {
+          emit('select', currentDepart.value);
+        }
+      }
+      emit('rootTreeData', treeData.value);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  loadRootTreeData();
+
+  // 加载子级部门信息
+  async function loadChildrenTreeData(treeNode) {
+    try {
+      const result = await queryDepartAndPostTreeSync({
+        pid: treeNode.dataRef.id,
+      });
+      if (result.length == 0) {
+        treeNode.dataRef.isLeaf = true;
+      } else {
+        treeNode.dataRef.children = result;
+        if (expandedKeys.value.length > 0) {
+          // 判断获取的子级是否有当前展开的项
+          let subKeys: any[] = [];
+          for (let key of expandedKeys.value) {
+            if (result.findIndex((item) => item.id === key) !== -1) {
+              subKeys.push(key);
+            }
+          }
+          if (subKeys.length > 0) {
+            expandedKeys.value = [...expandedKeys.value];
+          }
+        }
+      }
+      treeData.value = [...treeData.value];
+      emit('rootTreeData', treeData.value);
+    } catch (e) {
+      console.error(e);
+    }
+    return Promise.resolve();
+  }
+
+  // 自动展开父节点，只展开一级
+  function autoExpandParentNode() {
+    let item = treeData.value[0];
+    if (item) {
+      if (!item.isLeaf) {
+        expandedKeys.value = [item.key];
+      }
+      // 默认选中第一个
+      setSelectedKey(item.id, item);
+      reloadTree();
+    } else {
+      emit('select', null);
+    }
+  }
+
+  // 重新加载树组件，防止无法默认展开数据
+  async function reloadTree() {
+    await nextTick();
+    treeReloading.value = true;
+    await nextTick();
+    treeReloading.value = false;
+  }
+
+  /**
+   * 设置当前选中的行
+   */
+  function setSelectedKey(key: string, data?: object) {
+    selectedKeys.value = [key];
+    if (data) {
+      currentDepart.value = data;
+      emit('select', data);
+    }
+  }
+
+  // 添加一级部门
+  function onAddDepart() {
+    openModal(true, { isUpdate: false, isChild: false });
+  }
+
+  // 添加子级部门
+  function onAddChildDepart(data = currentDepart.value) {
+    if (data == null) {
+      createMessage.warning('请先选择一个部门');
+      return;
+    }
+    if(data.orgCategory === '3'){
+      createMessage.warning('岗位下无法添加子级！');
+      return;
+    }
+    const record = { parentId: data.id, orgCategory: data.orgCategory };
+    openModal(true, { isUpdate: false, isChild: true, record });
+  }
+
+  // 搜索事件
+  async function onSearch(value: string) {
+    if (value) {
+      try {
+        loading.value = true;
+        treeData.value = [];
+        let result = await searchByKeywords({ keyWord: value, orgCategory: "1,2,3,4" });
+        if (Array.isArray(result)) {
+          treeData.value = result;
+        }
+        autoExpandParentNode();
+      } finally {
+        loading.value = false;
+      }
+    } else {
+      loadRootTreeData();
+    }
+    searchKeyword.value = value;
+  }
+
+  // 树复选框选择事件
+  function onCheck(e) {
+    if (Array.isArray(e)) {
+      checkedKeys.value = e;
+    } else {
+      checkedKeys.value = e.checked;
+    }
+  }
+
+  // 树选择事件
+  function onSelect(selKeys, event) {
+    console.log('select: ', selKeys, event);
+    if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
+      setSelectedKey(selKeys[0], event.selectedNodes[0]);
+    } else {
+      // 这样可以防止用户取消选择
+      setSelectedKey(selectedKeys.value[0]);
+    }
+  }
+
+  /**
+   * 根据 ids 删除部门
+   * @param idListRef array
+   * @param confirm 是否显示确认提示框
+   */
+  async function doDeleteDepart(idListRef, confirm = true) {
+    const idList = unref(idListRef);
+    if (idList.length > 0) {
+      try {
+        loading.value = true;
+        await deleteBatchDepart({ ids: idList.join(',') }, confirm);
+        await loadRootTreeData();
+      } finally {
+        loading.value = false;
+      }
+    }
+  }
+
+  // 删除单个部门
+  async function onDelete(data) {
+    if (data) {
+      onVisibleChange(false);
+      doDeleteDepart([data.id], false);
+    }
+  }
+
+  // 批量删除部门
+  async function onDeleteBatch() {
+    try {
+      await doDeleteDepart(checkedKeys);
+      checkedKeys.value = [];
+    } finally {
+    }
+  }
+
+  function onVisibleChange(visible) {
+    if (!visible) {
+      visibleTreeKey.value = null;
+    }
+  }
+
+  function onImportXls(d) {
+    handleImportXls(d, Api.importExcelUrl, () => {
+      loadRootTreeData();
+    });
+  }
+
+  function onExportXls() {
+    // 代码逻辑说明: 【TV360X-1671】部门管理不支持选中的记录导出---
+    let params = {}
+    if(checkedKeys.value && checkedKeys.value.length > 0) {
+      params['selections'] = checkedKeys.value.join(',')
+    }
+    handleExportXls('部门信息', Api.exportXlsUrl,params);
+  }
+
+  /**
+   * 拖拽开始时，只关闭被拖拽的当前节点
+   * 
+   * @param info
+   */
+  function onDragStart(info: any) {
+    const dragKey = info.node?.key;
+    if (!dragKey){
+      return;
+    }
+    // 只关闭被拖拽的当前节点，不关闭其子节点
+    if (expandedKeys.value.includes(dragKey)) {
+      expandedKeys.value = expandedKeys.value.filter(key => key !== dragKey);
+    }
+  }
+  
+  /**
+   * 拖拽结束
+   * @param info
+   */
+  function onDrop (info){
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split('-');
+    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+    const dropTitle = info.node.title;
+    const dragTitle = info.dragNode.title;
+    //禁止拖拽到子节点
+    if (isDescendant(info.dragNode, info.node.key)) {
+      createMessage.warning('不能拖拽到自身后代');
+      return;
+    }
+    if(dropKey === dragKey){
+      createMessage.warning('不能自身拖拽到自身');
+      return;
+    }
+    let pos = "中";
+    if(dropPosition === -1){
+      pos = "上方";
+    }else if (dropPosition === 1){
+      pos = "下方";
+    }
+    let text = "将【" + dragTitle + "】移动到【" + dropTitle + "】" + pos + "？";
+    Modal.confirm({
+      title: '确认移动',
+      content: h('div', {}, [
+        h('p', { style: { marginBottom: '12px', fontSize: '14px' } }, text),
+        h('p', { 
+          style: { 
+            color: '#ff4d4f', 
+            fontSize: '13px',
+            margin: '0'
+          } 
+        }, '移动后：机构编码会改变，历史业务数据保留原机构编码，此操作不可撤销！')
+      ]),
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        updateChangeDepart({ dragId: dragKey, dropId: dropKey, dropPosition: dropPosition, sort: info.dropPosition }).then(res=>{
+          if(res.success){
+            createMessage.success('部门顺序调整成功');
+            //重新加载树
+            treeData.value = [];
+            selectedKeys.value = [];
+            loadRootTreeData();
+          } else {
+            createMessage.error(res.message);
+          }
+        }).catch(e=>{
+          createMessage.error(e.message);
+        })
+      }
+    })
+  }
+
+  /**
+   * 判断目标节点是否在拖拽节点的子树中（避免循环引用）
+   * 
+   * @param dragNode
+   * @param targetKey
+   */
+  function isDescendant(dragNode, targetKey) {
+    const stack = [...(dragNode.children ?? [])];
+    while (stack.length) {
+      const node = stack.pop()!;
+      if (node.key === targetKey){
+        return true;
+      }
+      if (node.children){
+        stack.push(...node.children);
+      }
+    }
+    return false;
+  }
+  
+  defineExpose({
+    loadRootTreeData,
+  });
+</script>
+
+<style lang="less" scoped>
+  .departmentalRulesTip{
+    margin: 20px;
+    background-color: #f8f9fb;
+    color: #99a1a9;
+    border-radius: 4px;
+    padding: 12px;
+  }
+  .tenant-name {
+    text-decoration: underline;
+    margin: 5px;
+    font-size: 15px;
+  }
+</style>
diff --git a/src/views/system/depart/components/DepartRankRelation.vue b/src/views/system/depart/components/DepartRankRelation.vue
new file mode 100644
index 0000000..3b09b2f
--- /dev/null
+++ b/src/views/system/depart/components/DepartRankRelation.vue
@@ -0,0 +1,92 @@
+<template>
+  <a-spin :spinning="loading">
+    <template v-if="treeData && treeData.length > 0">
+      <div style="margin-top: 10px;margin-bottom: 10px;display: flex">
+        <a-button preIcon="ant-design:down-outlined" @click="expandAll(true)" type="primary">展开全部</a-button>
+        <a-button preIcon="ant-design:up-outlined" @click="expandAll(false)" type="primary" style="margin-left: 10px">折叠全部</a-button>
+      </div>
+      <BasicTree
+        :expandedKeys="expandedKeys"
+        :fieldNames="{ children: 'children', title: 'title', key: 'value' }"
+        ref="basicTree"
+        :treeData="treeData"
+        :checkStrictly="true"
+        style="height: 500px; overflow: auto"
+      ></BasicTree>
+    </template>
+    <a-empty v-else description="无岗位消息" />
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import { BasicTree } from '/@/components/Tree/index';
+  import { getRankRelation } from '../depart.api';
+
+  const props = defineProps({
+    data: { type: Object, default: () => ({}) },
+  });
+  // 当前选中的部门ID，可能会为空，代表未选择部门
+  const departId = computed(() => props.data?.id);
+
+  const basicTree = ref();
+  const loading = ref<boolean>(false);
+  //树的全部节点信息
+  const treeData = ref<any[]>([]);
+  //选中的key
+  const expandedKeys = ref<any[]>([]);
+  //所有的部门id
+  const departIds = ref<any[]>([]);
+
+  watch(departId, (val) => loadData(val), { immediate: true });
+
+  async function loadData(val) {
+    try {
+      loading.value = true;
+      await getRankRelation({ departId: val }).then((res) => {
+        if (res.success) {
+          treeData.value = res.result;
+          departIds.value = getParentDepartmentIds(res.result);
+        }
+      });
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 折叠全部
+   *
+   * @param expandAll
+   */
+  async function expandAll(expandAll) {
+    if (!expandAll) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = departIds.value;
+    }
+  }
+
+  /**
+   * 获取存在子级的部门id
+   * @param departments
+   */
+  function getParentDepartmentIds(departments) {
+    const ids: any = [];
+    departments.forEach((dept) => {
+      // 检查是否有 children 数组且不为空
+      if (dept.children && Array.isArray(dept.children) && dept.children.length > 0) {
+        ids.push(dept.id);
+        // 递归检查子部门是否也有子级
+        ids.push(...getParentDepartmentIds(dept.children));
+      }
+    });
+    return ids;
+  }
+</script>
+
+<style lang="less" scoped>
+  .depart-rule-tree :deep(.scrollbar__bar) {
+    pointer-events: none;
+  }
+</style>
diff --git a/src/views/system/depart/components/DepartRuleTab.vue b/src/views/system/depart/components/DepartRuleTab.vue
new file mode 100644
index 0000000..f16b755
--- /dev/null
+++ b/src/views/system/depart/components/DepartRuleTab.vue
@@ -0,0 +1,267 @@
+<template>
+  <a-spin :spinning="loading">
+    <template v-if="treeData.length > 0">
+      <BasicTree
+        ref="basicTree"
+        class="depart-rule-tree"
+        checkable
+        :treeData="treeData"
+        :checkedKeys="checkedKeys"
+        :selectedKeys="selectedKeys"
+        :expandedKeys="expandedKeys"
+        :checkStrictly="true"
+        style="height: 500px; overflow: auto"
+        @check="onCheck"
+        @expand="onExpand"
+        @select="onSelect"
+      >
+        <template #title="{ slotTitle, ruleFlag }">
+          <span>{{ slotTitle }}</span>
+          <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
+        </template>
+      </BasicTree>
+    </template>
+    <a-empty v-else description="无可配置部门权限" />
+
+    <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
+      <div class="j-box-bottom-button-float" :class="[`${prefixCls}`]">
+        <a-dropdown :trigger="['click']" placement="top">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="3" @click="toggleCheckALL(true)">{{ t('component.tree.selectAll') }}</a-menu-item>
+              <a-menu-item key="4" @click="toggleCheckALL(false)">{{ t('component.tree.unSelectAll') }}</a-menu-item>
+              <a-menu-item key="5" @click="toggleExpandAll(true)">{{ t('component.tree.expandAll') }}</a-menu-item>
+              <a-menu-item key="6" @click="toggleExpandAll(false)">{{ t('component.tree.unExpandAll') }}</a-menu-item>
+              <a-menu-item key="7" @click="toggleRelationAll(false)">{{ t('component.tree.checkStrictly') }}</a-menu-item>
+              <a-menu-item key="8" @click="toggleRelationAll(true)">{{ t('component.tree.checkUnStrictly') }}</a-menu-item>
+            </a-menu>
+          </template>
+          <a-button style="float: left">
+            树操作
+            <Icon icon="ant-design:up-outlined" />
+          </a-button>
+        </a-dropdown>
+        <a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
+      </div>
+    </div>
+  </a-spin>
+  <DepartDataRuleDrawer @register="registerDataRuleDrawer" />
+</template>
+
+<script lang="ts" setup>
+  import { watch, computed, inject, ref, nextTick } from 'vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { BasicTree } from '/@/components/Tree/index';
+  import DepartDataRuleDrawer from './DepartDataRuleDrawer.vue';
+  import { queryRoleTreeList, queryDepartPermission, saveDepartPermission } from '../depart.api';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { translateTitle } from '/@/utils/common/compUtils';
+  import { DEPART_MANGE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  const { prefixCls } = useDesign('j-depart-form-content');
+  const props = defineProps({
+    data: { type: Object, default: () => ({}) },
+  });
+  // 当前选中的部门ID，可能会为空，代表未选择部门
+  const departId = computed(() => props.data?.id);
+
+  const basicTree = ref();
+  const loading = ref<boolean>(false);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  const treeData = ref<any[]>([]);
+  const expandedKeys = ref<Array<any>>([]);
+  const selectedKeys = ref<Array<any>>([]);
+  const checkedKeys = ref<Array<any>>([]);
+  const lastCheckedKeys = ref<Array<any>>([]);
+  const checkStrictly = ref(false);
+  const { t } = useI18n();
+
+  // 注册数据规则授权弹窗抽屉
+  const [registerDataRuleDrawer, dataRuleDrawer] = useDrawer();
+
+  // onCreated
+  loadData({
+    success: (ids) => {
+      // 代码逻辑说明: 【TV360X-1689】同步系统角色改法加上缓存层级关联等功能
+      const localData = localStorage.getItem(DEPART_MANGE_AUTH_CONFIG_KEY);
+      if (localData) {
+        const obj = JSON.parse(localData);
+        obj.level && toggleRelationAll(obj.level == 'relation' ? false : true);
+        obj.expand && toggleExpandAll(obj.expand == 'openAll' ? true :false);
+      } else {
+        // expandedKeys.value = ids;
+      }
+    }
+  });
+  watch(departId, () => loadDepartPermission(), { immediate: true });
+
+  async function loadData(options: any = {}) {
+    try {
+      loading.value = true;
+      let { treeList, ids } = await queryRoleTreeList();
+      // 代码逻辑说明: 【issues/1169】部门管理功能中的【部门权限】中未翻译 t('') 多语言---
+      treeData.value = translateTitle(treeList);
+      // 代码逻辑说明: 【TV360X-1689】同步系统角色改法加上缓存层级关联等功能
+      allTreeKeys.value = ids;
+      options.success?.(ids);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function loadDepartPermission() {
+    if (departId.value) {
+      try {
+        loading.value = true;
+        let keys = await queryDepartPermission({ departId: departId.value });
+        checkedKeys.value = keys;
+        lastCheckedKeys.value = [...keys];
+      } finally {
+        loading.value = false;
+      }
+    }
+  }
+
+  async function onSubmit() {
+    try {
+      loading.value = true;
+      await saveDepartPermission({
+        departId: departId.value,
+        permissionIds: checkedKeys.value.join(','),
+        lastpermissionIds: lastCheckedKeys.value.join(','),
+      });
+      await loadData();
+      await loadDepartPermission();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 点击选中
+   * 2024-07-04
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  // tree展开事件
+  function onExpand($expandedKeys) {
+    expandedKeys.value = $expandedKeys;
+  }
+
+  // tree选中事件
+  function onSelect($selectedKeys, { selectedNodes }) {
+    if (selectedNodes[0]?.ruleFlag) {
+      let functionId = $selectedKeys[0];
+      dataRuleDrawer.openDrawer(true, { departId, functionId });
+    }
+    selectedKeys.value = [];
+  }
+
+  // 切换父子关联
+  async function toggleCheckStrictly(flag) {
+    checkStrictly.value = flag;
+    await nextTick();
+    checkedKeys.value = basicTree.value.getCheckedKeys();
+  }
+
+  // 切换展开收起
+  async function toggleExpandAll(flag) {
+    // 代码逻辑说明: 【TV360X-1689】同步系统角色改法加上缓存层级关联等功能
+    if (flag) {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    }
+  }
+
+  // 切换全选
+  async function toggleCheckALL(flag) {
+    // 代码逻辑说明: 【TV360X-1689】同步系统角色改法加上缓存层级关联等功能
+    if (flag) {
+      checkedKeys.value = allTreeKeys.value;
+    } else {
+      checkedKeys.value = [];
+    }
+  }
+
+  // 切换层级关联(独立)
+  const toggleRelationAll = (flag) => {
+    // 代码逻辑说明: 【TV360X-1689】同步系统角色改法加上缓存层级关联等功能
+    checkStrictly.value = flag;
+    if (flag) {
+      saveLocalOperation('level', 'standAlone');
+    } else {
+      saveLocalOperation('level', 'relation');
+    }
+  };
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * 缓存
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(DEPART_MANGE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(DEPART_MANGE_AUTH_CONFIG_KEY, JSON.stringify(obj))
+  };
+</script>
+
+<style lang="less" scoped>
+  // 【VUEN-188】解决滚动条不灵敏的问题
+  .depart-rule-tree :deep(.scrollbar__bar) {
+    pointer-events: none;
+  }
+</style>
diff --git a/src/views/system/depart/components/DepartUserList.vue b/src/views/system/depart/components/DepartUserList.vue
new file mode 100644
index 0000000..ec80c1b
--- /dev/null
+++ b/src/views/system/depart/components/DepartUserList.vue
@@ -0,0 +1,182 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <!--插槽:table标题-->
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="createUser" :disabled="!orgCode">新建用户</a-button>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="selectAddUser" :disabled="!orgCode || props.data?.orgCategory === '3'"
+        >添加已有用户</a-button
+      >
+    </template>
+    <!-- 插槽：行内操作按钮 -->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <UserDrawer @register="registerDrawer" @success="onUserDrawerSuccess" />
+  <UserSelectModal ref="userSelectModalRef" rowKey="id" @register="registerSelUserModal" @getSelectResult="onSelectUserOk" />
+</template>
+
+<script lang="ts" setup>
+  import { computed, inject, ref, watch } from 'vue';
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  import UserDrawer from '/@/views/system/user/UserDrawer.vue';
+  import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue';
+  import { queryDepartPostByOrgCode } from '../depart.api';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { userColumns } from '@/views/system/depart/depart.data';
+  import { linkDepartUserBatch } from '@/views/system/departUser/depart.user.api';
+
+  const prefixCls = inject('prefixCls');
+  const props = defineProps({
+    data: { require: true, type: Object },
+  });
+  const userSelectModalRef: any = ref(null);
+  // 当前选中的部门code，可能会为空，代表未选择部门
+  const orgCode = computed(() => props.data?.orgCode);
+  // 当前部门id
+  const departId = computed(() => props.data?.id);
+
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 12, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  // 列表页面公共参数、方法
+  const { tableContext, createMessage } = useListPage({
+    tableProps: {
+      api: queryDepartPostByOrgCode,
+      columns: userColumns,
+      canResize: false,
+      rowKey: 'id',
+      formConfig: {
+        // schemas: userInfoSearchFormSchema,
+        baseColProps: adaptiveColProps,
+        labelAlign: 'left',
+        labelCol: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 5,
+        },
+        // 操作按钮配置
+        actionColOptions: {
+          ...adaptiveColProps,
+          style: { textAlign: 'left' },
+        },
+      },
+      tableSetting: { cacheKey: 'depart_user_userInfo' },
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        return Object.assign(params, { orgCode: orgCode.value });
+      },
+      immediate: !!orgCode.value,
+    },
+  });
+
+  // 注册 ListTable
+  const [registerTable, { reload, setProps, setLoading, updateTableDataRecord }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  watch(
+    () => props.data,
+    () => reload()
+  );
+  //注册drawer
+  const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
+  const [registerUserAuthDrawer, userAuthDrawer] = useDrawer();
+  // 注册用户选择 modal
+  const [registerSelUserModal, selUserModal] = useModal();
+
+  // 清空选择的行
+  function clearSelection() {
+    selectedRowKeys.value = [];
+  }
+
+  // 创建用户
+  async function createUser() {
+    if (!departId.value) {
+      createMessage.warning('请先选择一个部门');
+    } else {
+      let mainDepPostId = '';
+      let selecteddeparts = departId.value;
+      if (props.data?.orgCategory === '3') {
+        mainDepPostId = departId.value;
+        selecteddeparts = props.data.parentId;
+      }
+      openDrawer(true, {
+        isUpdate: false,
+        // 初始化负责部门
+        nextDepartOptions: { value: props.data?.key, label: props.data?.title },
+        //初始化岗位
+        record: {
+          mainDepPostId: mainDepPostId,
+          activitiSync: 1,
+          userIdentity: 1,
+          selecteddeparts: selecteddeparts,
+        },
+      });
+    }
+  }
+
+  // 查看用户详情
+  function showUserDetail(record) {
+    record.activitiSync = record.activitiSync? Number(record.activitiSync) : 1;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+
+  // 编辑用户信息
+  function editUserInfo(record) {
+    record.activitiSync = record.activitiSync? Number(record.activitiSync) : 1;
+    openDrawer(true, { isUpdate: true, record, departDisabled: true, departPostDisabled: true });
+  }
+
+  // 选择添加已有用户
+  function selectAddUser() {
+    userSelectModalRef.value.rowSelection.selectedRowKeys = [];
+    selUserModal.openModal();
+  }
+
+  // 选择用户成功
+  async function onSelectUserOk(options, userIdList) {
+    if (userIdList.length > 0) {
+      try {
+        setLoading(true);
+        await linkDepartUserBatch(departId.value, userIdList);
+        reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+  }
+
+  /**
+   * 用户抽屉表单成功回调
+   */
+  function onUserDrawerSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [
+      { label: '编辑', onClick: editUserInfo.bind(null, record) },
+      { label: '详情', onClick: showUserDetail.bind(null, record) },
+    ];
+  }
+</script>
diff --git a/src/views/system/depart/components/DepartmentHeadList.vue b/src/views/system/depart/components/DepartmentHeadList.vue
new file mode 100644
index 0000000..879d785
--- /dev/null
+++ b/src/views/system/depart/components/DepartmentHeadList.vue
@@ -0,0 +1,44 @@
+<!-- 部门负责人页面 -->
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable"></BasicTable>
+</template>
+
+<script setup lang="ts" name="DepartmentHeadList">
+  import { BasicTable } from '@/components/Table';
+  import { useListPage } from '@/hooks/system/useListPage';
+  import { userColumns } from '@/views/system/depart/depart.data';
+  import { getDepartmentHead } from '../depart.api';
+  import { computed, watch } from 'vue';
+  const props = defineProps({
+    data: { require: true, type: Object },
+  });
+  // 当前部门id
+  const departId = computed(() => props.data?.id);
+ 
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      api: getDepartmentHead,
+      columns: userColumns,
+      canResize: false,
+      rowKey: 'id',
+      tableSetting: { cacheKey: 'depart_head_list' },
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        return Object.assign(params, { departId: departId.value });
+      },
+      showActionColumn: false,
+      immediate: !!departId.value,
+    },
+  });
+  // 注册 ListTable
+  const [registerTable, { reload }] = tableContext;
+
+  watch(
+    () => props.data,
+    () => reload()
+  );
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/depart/depart.api.ts b/src/views/system/depart/depart.api.ts
new file mode 100644
index 0000000..d8d8510
--- /dev/null
+++ b/src/views/system/depart/depart.api.ts
@@ -0,0 +1,171 @@
+import { unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+export enum Api {
+  queryDepartTreeSync = '/sys/sysDepart/queryDepartTreeSync',
+  save = '/sys/sysDepart/add',
+  edit = '/sys/sysDepart/edit',
+  delete = '/sys/sysDepart/delete',
+  deleteBatch = '/sys/sysDepart/deleteBatch',
+  exportXlsUrl = '/sys/sysDepart/exportXls',
+  importExcelUrl = '/sys/sysDepart/importExcel',
+
+  roleQueryTreeList = '/sys/role/queryTreeList',
+  queryDepartPermission = '/sys/permission/queryDepartPermission',
+  saveDepartPermission = '/sys/permission/saveDepartPermission',
+
+  dataRule = '/sys/sysDepartPermission/datarule',
+
+  getCurrentUserDeparts = '/sys/user/getCurrentUserDeparts',
+  selectDepart = '/sys/selectDepart',
+  getUpdateDepartInfo = '/sys/user/getUpdateDepartInfo',
+  doUpdateDepartInfo = '/sys/user/doUpdateDepartInfo',
+  changeDepartChargePerson = '/sys/user/changeDepartChargePerson',
+  //根据部门id获取岗位信息
+  getPositionByDepartId = '/sys/sysDepart/getPositionByDepartId',
+  //根据部门id获取岗位上下级关系
+  getRankRelation = '/sys/sysDepart/getRankRelation',
+  //异步获取部门和岗位
+  queryDepartAndPostTreeSync = '/sys/sysDepart/queryDepartAndPostTreeSync',
+  //获取部门和岗位下的成员
+  queryDepartPostByOrgCode = '/sys/user/queryDepartPostByOrgCode',
+  //更新拖拽部门后的位置
+  updateChangeDepart = '/sys/sysDepart/updateChangeDepart',
+  //获取负责部门
+  getDepartmentHead = '/sys/sysDepart/getDepartmentHead',
+}
+
+/**
+ * 获取部门树列表
+ */
+export const queryDepartTreeSync = (params?) => defHttp.get({ url: Api.queryDepartTreeSync, params });
+
+/**
+ * 获取部门和岗位树列表
+ */
+export const queryDepartAndPostTreeSync = (params?) => defHttp.get({ url: Api.queryDepartAndPostTreeSync, params });
+
+/**
+ * 保存或者更新部门角色
+ */
+export const saveOrUpdateDepart = (params, isUpdate) => {
+  if (isUpdate) {
+    return defHttp.put({ url: Api.edit, params });
+  } else {
+    return defHttp.post({ url: Api.save, params });
+  }
+};
+
+/**
+ * 批量删除部门角色
+ */
+export const deleteBatchDepart = (params, confirm = false) => {
+  return new Promise((resolve, reject) => {
+    const doDelete = () => {
+      resolve(defHttp.delete({ url: Api.deleteBatch, params }, { joinParamsToUrl: true }));
+    };
+    if (confirm) {
+      createConfirm({
+        iconType: 'warning',
+        title: '删除',
+        content: '确定要删除吗？',
+        onOk: () => doDelete(),
+        onCancel: () => reject(),
+      });
+    } else {
+      doDelete();
+    }
+  });
+};
+
+/**
+ * 获取权限树列表
+ */
+export const queryRoleTreeList = (params?) => defHttp.get({ url: Api.roleQueryTreeList, params });
+/**
+ * 查询部门权限
+ */
+export const queryDepartPermission = (params?) => defHttp.get({ url: Api.queryDepartPermission, params });
+/**
+ * 保存部门权限
+ */
+export const saveDepartPermission = (params) => defHttp.post({ url: Api.saveDepartPermission, params });
+
+/**
+ *  查询部门数据权限列表
+ */
+export const queryDepartDataRule = (functionId, departId, params?) => {
+  let url = `${Api.dataRule}/${unref(functionId)}/${unref(departId)}`;
+  return defHttp.get({ url, params });
+};
+/**
+ * 保存部门数据权限
+ */
+export const saveDepartDataRule = (params) => defHttp.post({ url: Api.dataRule, params });
+/**
+ * 获取登录用户部门信息
+ */
+export const getUserDeparts = (params?) => defHttp.get({ url: Api.getCurrentUserDeparts, params });
+/**
+ * 切换选择部门
+ */
+export const selectDepart = (params?) => defHttp.put({ url: Api.selectDepart, params });
+
+/**
+ * 编辑部门前获取部门相关信息
+ * @param id
+ */
+export const getUpdateDepartInfo = (id) => defHttp.get({ url: Api.getUpdateDepartInfo, params: {id} });
+
+/**
+ * 编辑部门
+ * @param params
+ */
+export const doUpdateDepartInfo = (params) => defHttp.put({ url: Api.doUpdateDepartInfo, params });
+
+/**
+ * 删除部门
+ * @param id
+ */
+export const deleteDepart = (id) => defHttp.delete({ url: Api.delete, params:{ id } }, { joinParamsToUrl: true });
+
+/**
+ * 设置负责人 取消负责人
+ * @param params
+ */
+export const changeDepartChargePerson = (params) => defHttp.put({ url: Api.changeDepartChargePerson, params });
+
+/**
+ * 根据部门id获取岗位信息
+ */
+export const getPositionByDepartId = (params) => defHttp.get({ url: Api.getPositionByDepartId, params }, { isTransformResponse: false });
+
+/**
+ * 根据部门id获取岗位上下级关系
+ * @param params
+ */
+export const getRankRelation = (params) => defHttp.get({ url: Api.getRankRelation, params,timeout: 2 * 60 * 1000 }, { isTransformResponse: false });
+
+/**
+ * 根据部门或岗位编码获取通讯录成员
+ * 
+ * @param params
+ */
+export const queryDepartPostByOrgCode = (params) => defHttp.get({ url: Api.queryDepartPostByOrgCode, params });
+
+/**
+ * 更新拖拽部门后的位置
+ * 
+ * @param params
+ */
+export const updateChangeDepart = (params) => defHttp.put({ url: Api.updateChangeDepart, params },{ isTransformResponse: false });
+
+/**
+ * 获取负责部门
+ * 
+ * @param params
+ */
+export const getDepartmentHead = (params) => defHttp.get({ url: Api.getDepartmentHead, params });
diff --git a/src/views/system/depart/depart.data.ts b/src/views/system/depart/depart.data.ts
new file mode 100644
index 0000000..dd77194
--- /dev/null
+++ b/src/views/system/depart/depart.data.ts
@@ -0,0 +1,247 @@
+import { FormSchema } from '/@/components/Form';
+import { getPositionByDepartId } from "./depart.api";
+import { useMessage } from "@/hooks/web/useMessage";
+import { BasicColumn } from "@/components/Table";
+import {
+  getDepartName,
+  getDepartPathName,
+  getDepartPathNameByOrgCode,
+  getMultiDepartPathName
+} from '@/utils/common/compUtils';
+import { h, ref } from 'vue';
+
+const { createMessage: $message } = useMessage();
+//部门名称
+const departNamePath = ref<Record<string, string>>({});
+
+// 部门基础表单
+export function useBasicFormSchema(treeData) {
+  const basicFormSchema: FormSchema[] = [
+    {
+      field: 'departName',
+      label: '机构名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入机构/部门名称',
+      },
+      rules: [{ required: true, message: '机构名称不能为空' }],
+    },
+    {
+      field: 'departNameAbbr',
+      label: '机构简称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入机构/部门简称',
+      }
+    },
+    {
+      field: 'parentId',
+      label: '上级部门',
+      component: 'TreeSelect',
+      componentProps: {
+        treeData: [],
+        placeholder: '无',
+        treeCheckAble: true,
+        multiple: true,
+        dropdownStyle: { maxHeight: '200px', overflow: 'auto' },
+        tagRender: (options) => {
+          const { value, label, option } = options;
+          if (departNamePath.value[value]) {
+            return h(
+                'span', {  style: { marginLeft: '10px' } },
+                departNamePath.value[value]
+            );
+          }
+          getDepartPathNameByOrgCode('', label, option.id).then((data) => {
+            departNamePath.value[value] = data;
+          });
+        },
+      },
+    },
+    {
+      field: 'orgCode',
+      label: '机构编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入机构编码',
+      },
+    },
+    {
+      field: 'orgCategory',
+      label: '机构类型',
+      component: 'RadioButtonGroup',
+      componentProps: { options: [] },
+    },
+    {
+      field: 'positionId',
+      label: '职务级别',
+      component: 'JDictSelectTag',
+      componentProps: ({ formModel, formActionType }) => {
+        return {
+          dictCode: "sys_position,name,id, 1=1 order by post_level asc",
+          getPopupContainer: ()=> document.body,
+          onChange: (value) => {
+            formModel.depPostParentId = "";
+            return positionChange(value, formModel, treeData);
+          },
+        }
+      },
+      ifShow:({ values })=>{
+        return values.orgCategory === '3'
+      },
+      required: true,
+    },
+    {
+      field: 'depPostParentId',
+      label: '上级岗位',
+      component: 'TreeSelect',
+      ifShow:({ values })=>{
+        return values.orgCategory === '3'
+      },
+      slot: 'depPostParentId',
+    },
+    {
+      field: 'departOrder',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {},
+    },
+    {
+      field: 'mobile',
+      label: '电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
+      ifShow:({ values })=>{
+        return values.orgCategory !== '3'
+      },
+    },
+    {
+      field: 'fax',
+      label: '传真',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入传真',
+      },
+      ifShow:({ values })=>{
+        return values.orgCategory !== '3'
+      },
+    },
+    {
+      field: 'address',
+      label: '地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入地址',
+      },
+      ifShow:({ values })=>{
+        return values.orgCategory !== '3'
+      },
+    },
+    {
+      field: 'memo',
+      label: '备注',
+      component: 'InputTextArea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+      ifShow:({ values })=>{
+        return values.orgCategory !== '3'
+      },
+    },
+    {
+      field: 'id',
+      label: 'ID',
+      component: 'Input',
+      show: false,
+    },
+  ];
+  return { basicFormSchema };
+}
+
+// 机构类型选项
+export const orgCategoryOptions = {
+  // 一级部门
+  root: [{ value: '1', label: '公司' }],
+  // 子级部门
+  child: [
+    { value: '4', label: '子公司' },
+    { value: '2', label: '部门' },
+    { value: '3', label: '岗位' },
+  ],
+  //部门岗位
+  childDepartPost: [
+    { value: '2', label: '部门' },
+    { value: '3', label: '岗位' },
+  ],
+  //岗位
+  childPost: [
+    { value: '3', label: '岗位' },
+  ]
+};
+
+/**
+ * 用户列表
+ */
+export const userColumns: BasicColumn[] = [
+  {
+    title: '姓名',
+    dataIndex: 'realname',
+    width: 150,
+  },
+  {
+    title: '手机',
+    width: 150,
+    dataIndex: 'phone',
+    customRender:( { record, text })=>{
+      if(record.izHideContact && record.izHideContact === '1'){
+        return '/';
+      }
+      return text;
+    }
+  },
+  {
+    title: '主岗位',
+    dataIndex: 'mainDepPostId',
+    customRender: ({ record, text })=>{
+      if(!text){
+        return '';
+      }
+      return getDepartName(getDepartPathName(record.mainDepPostId_dictText,text,false));
+    },
+    width: 200,
+  },
+  {
+    title: '兼职岗位',
+    dataIndex: 'otherDepPostId',
+    customRender: ({ record, text })=>{
+      if(!text){
+        return '';
+      }
+      return getDepartName(getMultiDepartPathName(record.otherDepPostId_dictText,text));
+    },
+    width: 200,
+  },
+];
+
+/**
+ * 职位改变事件
+ * @param value
+ * @param model
+ * @param treeData
+ */
+export function positionChange(value, model, treeData) {
+  if(value && model.parentId){
+    getPositionByDepartId({ parentId: model.parentId, departId: model.id ? model.id:'', positionId: value }).then((res) =>{
+      if(res.success){
+        treeData.value = res.result;
+      }else{
+        treeData.value = [];
+        $message.warning(res.message);
+      }
+    });
+  } else {
+    treeData.value = [];
+  }
+}
diff --git a/src/views/system/depart/index.less b/src/views/system/depart/index.less
new file mode 100644
index 0000000..67e0e08
--- /dev/null
+++ b/src/views/system/depart/index.less
@@ -0,0 +1,14 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-depart-manage';
+
+.@{prefix-cls} {
+  // update-begin-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
+  background: @component-background;
+  // update-end-author:liusq date:20230625 for: [issues/563]暗色主题部分失效
+
+  &--box {
+    .ant-tabs-nav {
+      padding: 0 20px;
+    }
+  }
+}
diff --git a/src/views/system/depart/index.vue b/src/views/system/depart/index.vue
new file mode 100644
index 0000000..4a7b11e
--- /dev/null
+++ b/src/views/system/depart/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10">
+    <a-col :xl="10" :lg="24" :md="24" style="margin-bottom: 10px">
+      <DepartLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
+    </a-col>
+    <a-col :xl="14" :lg="24" :md="24" style="margin-bottom: 10px">
+      <div style="height: 100%;" :class="[`${prefixCls}`]">
+        <a-tabs v-show="departData != null" defaultActiveKey="base-info">
+          <a-tab-pane tab="基本信息" key="base-info" forceRender style="position: relative">
+            <div style="padding: 20px">
+              <DepartFormTab :data="departData" :rootTreeData="rootTreeData" @success="onSuccess" />
+            </div>
+          </a-tab-pane>
+          <a-tab-pane tab="部门权限" key="role-info">
+            <div style="padding: 0 20px 20px">
+              <DepartRuleTab :data="departData" />
+            </div>
+          </a-tab-pane>
+          <a-tab-pane tab="职级汇报关系" key="rank">
+            <div style="padding: 0 20px 20px">
+              <DepartRankRelation :data="departData" />
+            </div>
+          </a-tab-pane>
+          <a-tab-pane tab="用户列表" key="user">
+            <div style="padding: 0 20px 20px">
+              <DepartUserList :data="departData" :key="reRender"></DepartUserList>
+            </div>
+          </a-tab-pane>
+          <a-tab-pane tab="部门负责人" key="departmentHead">
+            <DepartmentHeadList :data="departData"></DepartmentHeadList>
+          </a-tab-pane>
+        </a-tabs>
+        <div v-show="departData == null" style="padding-top: 40px">
+          <a-empty description="尚未选择部门" />
+        </div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup name="system-depart">
+  import { provide, ref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DepartLeftTree from './components/DepartLeftTree.vue';
+  import DepartFormTab from './components/DepartFormTab.vue';
+  import DepartRuleTab from './components/DepartRuleTab.vue';
+  import DepartRankRelation from './components/DepartRankRelation.vue';
+  import DepartUserList from './components/DepartUserList.vue';
+  import DepartmentHeadList from './components/DepartmentHeadList.vue';
+
+  const { prefixCls } = useDesign('depart-manage');
+  provide('prefixCls', prefixCls);
+
+  // 给子组件定义一个ref变量
+  const leftTree = ref();
+
+  // 当前选中的部门信息
+  const departData = ref({});
+  const rootTreeData = ref<any[]>([]);
+  const reRender = ref(-1);
+
+  // 左侧树选择后触发
+  function onTreeSelect(data) {
+    console.log('onTreeSelect: ', data);
+    if (reRender.value == -1) {
+      // 重新渲染组件
+      reRender.value = Math.random();
+    }
+    departData.value = data;
+  }
+
+  // 左侧树rootTreeData触发
+  function onRootTreeData(data) {
+    rootTreeData.value = data;
+  }
+
+  function onSuccess() {
+    leftTree.value.loadRootTreeData();
+  }
+</script>
+
+<style lang="less">
+  @import './index.less';
+</style>
diff --git a/src/views/system/departUser/components/DepartBaseInfoTab.vue b/src/views/system/departUser/components/DepartBaseInfoTab.vue
new file mode 100644
index 0000000..911319f
--- /dev/null
+++ b/src/views/system/departUser/components/DepartBaseInfoTab.vue
@@ -0,0 +1,40 @@
+<template>
+  <Description @register="registerDesc" />
+</template>
+
+<script lang="ts" setup>
+  import { ref, inject, onMounted, watch } from 'vue';
+  import { queryIdTree } from '../depart.user.api';
+  import { useBaseInfoForm } from '../depart.user.data';
+  import { Description, useDescription } from '/@/components/Description/index';
+
+  const prefixCls = inject('prefixCls');
+  const props = defineProps({
+    data: { require: true, type: Object },
+  });
+  const treeData = ref([]);
+  const { descItems } = useBaseInfoForm(treeData);
+
+  const [registerDesc, { setDescProps }] = useDescription({
+    data: props.data,
+    schema: descItems,
+    column: 1,
+    labelStyle: {
+      width: '180px',
+    },
+  });
+
+  function setData(data) {
+    setDescProps({ data });
+  }
+
+  onMounted(() => {
+    watch(
+      () => props.data,
+      () => setData(props.data),
+      { immediate: true }
+    );
+  });
+  // 动态查询 parentId 组件的 treeData
+  queryIdTree().then((data) => (treeData.value = data));
+</script>
diff --git a/src/views/system/departUser/components/DepartRoleAuthDrawer.vue b/src/views/system/departUser/components/DepartRoleAuthDrawer.vue
new file mode 100644
index 0000000..3762d8e
--- /dev/null
+++ b/src/views/system/departUser/components/DepartRoleAuthDrawer.vue
@@ -0,0 +1,294 @@
+<template>
+  <BasicDrawer
+    :width="650"
+    :loading="loading"
+    showFooter
+    okText="保存并关闭"
+    @ok="onSubmit(true)"
+    @close="onClose"
+    @register="registerDrawer"
+  >
+    <template #title>
+      部门角色权限配置
+      <a-dropdown>
+        <Icon icon="ant-design:more-outlined" class="more-icon" />
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">{{ t('component.tree.selectAll') }}</a-menu-item>
+            <a-menu-item key="cancelCheck">{{ t('component.tree.unSelectAll') }}</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">{{ t('component.tree.expandAll') }}</a-menu-item>
+            <a-menu-item key="closeAll">{{ t('component.tree.unExpandAll') }}</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">{{ t('component.tree.checkStrictly') }}</a-menu-item>
+            <a-menu-item key="standAlone">{{ t('component.tree.checkUnStrictly') }}</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <div>
+      <a-spin :spinning="loading">
+        <template v-if="treeData.length > 0">
+          <BasicTree
+            title="所拥有的部门权限"
+            checkable
+            :treeData="treeData"
+            :checkedKeys="checkedKeys"
+            :selectedKeys="selectedKeys"
+            :expandedKeys="expandedKeys"
+            :checkStrictly="true"
+            :clickRowToExpand="false"
+            @check="onCheck"
+            @expand="onExpand"
+            @select="onSelect"
+          >
+            <template #title="{ slotTitle, ruleFlag }">
+              <span>{{ slotTitle }}</span>
+              <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
+            </template>
+          </BasicTree>
+        </template>
+        <a-empty v-else description="无可配置部门权限" />
+      </a-spin>
+    </div>
+
+    <template #centerFooter>
+      <a-button type="primary" :loading="loading" ghost @click="onSubmit(false)">仅保存</a-button>
+    </template>
+  </BasicDrawer>
+  <DepartRoleDataRuleDrawer @register="registerDataRuleDrawer" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  import { BasicTree } from '/@/components/Tree/index';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import DepartRoleDataRuleDrawer from './DepartRoleDataRuleDrawer.vue';
+  import { queryTreeListForDeptRole, queryDeptRolePermission, saveDeptRolePermission } from '../depart.user.api';
+  import { translateTitle } from "@/utils/common/compUtils";
+  import { DEPART_ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+
+  defineEmits(['register']);
+  const { createMessage } = useMessage();
+  const loading = ref(false);
+  const departId = ref('');
+  const roleId = ref('');
+  const treeData = ref<Array<any>>([]);
+  const checkedKeys = ref<Array<any>>([]);
+  const lastCheckedKeys = ref<Array<any>>([]);
+  const expandedKeys = ref<Array<any>>([]);
+  const selectedKeys = ref<Array<any>>([]);
+  const allTreeKeys = ref<Array<any>>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref(false);
+  const { t } = useI18n();
+
+  // 注册抽屉组件
+  const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    roleId.value = data.record.id;
+    departId.value = data.record.departId;
+    loadData({
+      success: (ids) => {
+        // 代码逻辑说明: 【TV360X-1619】同步系统角色改法加上缓存，默认层级关联修正原生层级关联bug
+        const localData = localStorage.getItem(DEPART_ROLE_AUTH_CONFIG_KEY);
+        if (localData) {
+          const obj = JSON.parse(localData);
+          obj.level && treeMenuClick({ key: obj.level });
+          obj.expand && treeMenuClick({ key: obj.expand });
+        } else {
+          // expandedKeys.value = ids;
+        }
+      },
+    });
+  });
+  // 注册数据规则授权弹窗抽屉
+  const [registerDataRuleDrawer, dataRuleDrawer] = useDrawer();
+
+  async function loadData(options: any = {}) {
+    try {
+      loading.value = true;
+      // 用户角色授权功能，查询菜单权限树
+      const { ids, treeList } = await queryTreeListForDeptRole({ departId: departId.value });
+      if (ids.length > 0) {
+        allTreeKeys.value = ids;
+        // 代码逻辑说明: 【TV360X-1619】同步系统角色改法加上缓存，默认层级关联修正原生层级关联bug
+        options.success?.(ids);
+        // 代码逻辑说明: 【issues/1169】我的部门功能中的【部门权限】中未翻译 t('') 多语言---
+        treeData.value = translateTitle(treeList);
+        // 查询角色授权
+        checkedKeys.value = await queryDeptRolePermission({ roleId: roleId.value });
+        lastCheckedKeys.value = [checkedKeys.value];
+      } else {
+        reset();
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // 重置页面
+  function reset() {
+    treeData.value = [];
+    expandedKeys.value = [];
+    checkedKeys.value = [];
+    lastCheckedKeys.value = [];
+    loading.value = false;
+  }
+
+  /**
+   * 点击选中
+   * 2024-07-04
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  // tree展开事件
+  function onExpand($expandedKeys) {
+    expandedKeys.value = $expandedKeys;
+  }
+
+  // tree选中事件
+  function onSelect($selectedKeys, { selectedNodes }) {
+    if (selectedNodes[0]?.ruleFlag) {
+      let functionId = $selectedKeys[0];
+      dataRuleDrawer.openDrawer(true, { roleId, departId, functionId });
+    }
+    selectedKeys.value = [];
+  }
+
+  function doClose() {
+    reset();
+    closeDrawer();
+  }
+
+  function onClose() {
+    reset();
+  }
+
+  async function onSubmit(exit) {
+    try {
+      loading.value = true;
+      let params = {
+        roleId: roleId.value,
+        permissionIds: checkedKeys.value.join(','),
+        lastpermissionIds: lastCheckedKeys.value.join(','),
+      };
+      await saveDeptRolePermission(params);
+      if (exit) {
+        doClose();
+      }
+    } finally {
+      loading.value = false;
+      if (!exit) {
+        loadData();
+      }
+    }
+  }
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 2024-07-04
+   * liaozhiyang
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(DEPART_ROLE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(DEPART_ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj));
+  };
+</script>
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+    font-size: 20px !important;
+    color: black;
+    display: inline-flex;
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+</style>
diff --git a/src/views/system/departUser/components/DepartRoleDataRuleDrawer.vue b/src/views/system/departUser/components/DepartRoleDataRuleDrawer.vue
new file mode 100644
index 0000000..04f2e45
--- /dev/null
+++ b/src/views/system/departUser/components/DepartRoleDataRuleDrawer.vue
@@ -0,0 +1,82 @@
+<template>
+  <BasicDrawer title="数据规则/按钮权限配置" :width="365" @close="onClose" @register="registerDrawer">
+    <a-spin :spinning="loading">
+      <a-tabs defaultActiveKey="1">
+        <a-tab-pane tab="数据规则" key="1">
+          <a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
+            <a-row>
+              <a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
+                <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
+              </a-col>
+              <a-col :span="24">
+                <div style="width: 100%; margin-top: 15px">
+                  <a-button type="primary" :loading="loading" :size="'small'" preIcon="ant-design:save-filled" @click="saveDataRuleForRole">
+                    <span>点击保存</span>
+                  </a-button>
+                </div>
+              </a-col>
+            </a-row>
+          </a-checkbox-group>
+          <a-empty v-else description="无配置信息" />
+        </a-tab-pane>
+        <!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
+      </a-tabs>
+    </a-spin>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { queryDepartRoleDataRule, saveDepartRoleDataRule } from '../depart.user.api';
+
+  defineEmits(['register']);
+  const loading = ref<boolean>(false);
+  const departId = ref('');
+  const functionId = ref('');
+  const roleId = ref('');
+  const dataRuleList = ref<Array<any>>([]);
+  const dataRuleChecked = ref<Array<any>>([]);
+
+  // 注册抽屉组件
+  const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    roleId.value = unref(data.roleId);
+    departId.value = unref(data.departId);
+    functionId.value = unref(data.functionId);
+    loadData();
+  });
+
+  async function loadData() {
+    try {
+      loading.value = true;
+      const { datarule, drChecked } = await queryDepartRoleDataRule(functionId, departId, roleId);
+      dataRuleList.value = datarule;
+      if (drChecked) {
+        dataRuleChecked.value = drChecked.split(',');
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function saveDataRuleForRole() {
+    let params = {
+      permissionId: functionId.value,
+      roleId: roleId.value,
+      dataRuleIds: dataRuleChecked.value.join(','),
+    };
+    saveDepartRoleDataRule(params);
+  }
+
+  function onClose() {
+    doReset();
+  }
+
+  function doReset() {
+    functionId.value = '';
+    roleId.value = '';
+    dataRuleList.value = [];
+    dataRuleChecked.value = [];
+  }
+</script>
diff --git a/src/views/system/departUser/components/DepartRoleInfoTab.vue b/src/views/system/departUser/components/DepartRoleInfoTab.vue
new file mode 100644
index 0000000..8725a6b
--- /dev/null
+++ b/src/views/system/departUser/components/DepartRoleInfoTab.vue
@@ -0,0 +1,202 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <!--插槽:table标题-->
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="addDepartRole" :disabled="!departId">添加部门角色</a-button>
+      <template v-if="selectedRowKeys.length > 0">
+        <a-divider type="vertical" />
+        <a-dropdown>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onDeleteDepartRoleBatch">
+                <icon icon="ant-design:delete-outlined" />
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作 </span>
+            <icon icon="akar-icons:chevron-down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+    </template>
+    <!-- 插槽：行内操作按钮 -->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+    </template>
+  </BasicTable>
+  <!-- 添加部门弹窗 -->
+  <DepartRoleModal :departId="departId" @register="registerFormModal" @success="onFormModalSuccess" />
+  <DepartRoleAuthDrawer @register="registerAuthDrawer" />
+</template>
+
+<script lang="ts" setup>
+  import { inject, ref, unref, watch, computed, onMounted } from 'vue';
+
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  import DepartRoleModal from './DepartRoleModal.vue';
+  import DepartRoleAuthDrawer from './DepartRoleAuthDrawer.vue';
+  import { deleteBatchDepartRole, departRoleList } from '../depart.user.api';
+  import { departRoleColumns, departRoleSearchFormSchema } from '../depart.user.data';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  const prefixCls = inject('prefixCls');
+  const props = defineProps({
+    data: { require: true, type: Object },
+  });
+  defineEmits(['register']);
+  // 当前选中的部门ID，可能会为空，代表未选择部门
+  const departId = computed(() => props.data?.id);
+
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 12, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  // 列表页面公共参数、方法
+  const { tableContext, createMessage } = useListPage({
+    tableProps: {
+      api: departRoleList,
+      columns: departRoleColumns,
+      canResize: false,
+      formConfig: {
+        labelWidth: 100,
+        schemas: departRoleSearchFormSchema,
+        baseColProps: adaptiveColProps,
+        labelAlign: 'left',
+        labelCol: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 6,
+        },
+        wrapperCol: {},
+        // 操作按钮配置
+        actionColOptions: {
+          ...adaptiveColProps,
+          style: { textAlign: 'left' },
+        },
+        showResetButton: !!departId.value,
+        showSubmitButton: !!departId.value,
+      },
+      // 【issues/1064】列设置的 cacheKey
+      tableSetting: { cacheKey: 'depart_user_departInfo' },
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        params.deptId = departId.value;
+      },
+      // 代码逻辑说明: 【TV360X-53】未选择部门的情况下，部门角色全查出来了
+      immediate: !!departId.value,
+    },
+  });
+
+  // 注册 ListTable
+  const [registerTable, { reload, setProps, setLoading, updateTableDataRecord }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  // 注册Form弹窗
+  const [registerFormModal, formModal] = useModal();
+  // 注册授权弹窗抽屉
+  const [registerAuthDrawer, authDrawer] = useDrawer();
+
+  // 监听 data 更改，重新加载数据
+  watch(
+    () => props.data,
+    () => reload()
+  );
+  onMounted(() => {
+    // reload();
+  });
+
+  // 清空选择的行
+  function clearSelection() {
+    selectedRowKeys.value = [];
+  }
+
+  // 添加部门角色
+  function addDepartRole() {
+    formModal.openModal(true, {
+      isUpdate: false,
+      record: {},
+    });
+  }
+
+  // 编辑部门角色
+  function editDepartRole(record) {
+    formModal.openModal(true, {
+      isUpdate: true,
+      record: record,
+    });
+  }
+
+  // 授权部门角色
+  function permissionDepartRole(record) {
+    authDrawer.openDrawer(true, { record });
+  }
+
+  // 批量删除部门角色
+  async function deleteDepartRole(idList, confirm) {
+    if (!departId.value) {
+      createMessage.warning('请先选择一个部门');
+    } else {
+      setLoading(true);
+      let ids = unref(idList).join(',');
+      try {
+        await deleteBatchDepartRole({ ids }, confirm);
+        return reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+    return Promise.reject();
+  }
+
+  // 批量删除部门角色事件
+  async function onDeleteDepartRoleBatch() {
+    try {
+      await deleteDepartRole(selectedRowKeys, true);
+      // 批量删除成功后清空选择
+      clearSelection();
+    } catch (e) {}
+  }
+
+  // 表单弹窗成功后的回调
+  function onFormModalSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [{ label: '编辑', onClick: editDepartRole.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      { label: '授权', onClick: permissionDepartRole.bind(null, record) },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '确认要删除吗？',
+          confirm: deleteDepartRole.bind(null, [record.id], false),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/departUser/components/DepartRoleModal.vue b/src/views/system/departUser/components/DepartRoleModal.vue
new file mode 100644
index 0000000..4eec504
--- /dev/null
+++ b/src/views/system/departUser/components/DepartRoleModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <BasicModal :title="title" :width="800" v-bind="$attrs" @ok="handleOk" @register="registerModal">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, inject, ref, unref } from 'vue';
+
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  // noinspection ES6UnusedImports
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  import { saveOrUpdateDepartRole } from '../depart.user.api';
+  import { departRoleModalFormSchema } from '../depart.user.data';
+
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({
+    // 当前部门ID
+    departId: { require: true, type: String },
+  });
+  const prefixCls = inject('prefixCls');
+  // 当前是否是更新模式
+  const isUpdate = ref<boolean>(true);
+  // 当前的弹窗数据
+  const model = ref<object>({});
+  const title = computed(() => (isUpdate.value ? '编辑' : '新增'));
+
+  //注册表单
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: departRoleModalFormSchema,
+    showActionButtonGroup: false,
+  });
+
+  // 注册弹窗
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    isUpdate.value = unref(data?.isUpdate);
+    // 无论新增还是编辑，都可以设置表单值
+    let record = unref(data?.record);
+    if (typeof record === 'object') {
+      model.value = record;
+      await setFieldsValue({ ...record });
+    }
+  });
+
+  //提交事件
+  async function handleOk() {
+    try {
+      setModalProps({ confirmLoading: true });
+      let values = await validate();
+      values.departId = unref(props.departId);
+      //提交表单
+      await saveOrUpdateDepartRole(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', { isUpdate: unref(isUpdate), values });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/departUser/components/DepartRoleUserAuthDrawer.vue b/src/views/system/departUser/components/DepartRoleUserAuthDrawer.vue
new file mode 100644
index 0000000..78dbc1b
--- /dev/null
+++ b/src/views/system/departUser/components/DepartRoleUserAuthDrawer.vue
@@ -0,0 +1,91 @@
+<template>
+  <BasicDrawer title="部门角色分配" :width="365" @close="onClose" @register="registerDrawer">
+    <a-spin :spinning="loading">
+      <template v-if="desformList.length > 0">
+        <a-checkbox-group v-model:value="designNameValue">
+          <a-row>
+            <a-col :span="24" v-for="item of desformList">
+              <a-checkbox :value="item.id">{{ item.roleName }}</a-checkbox>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+        <div style="width: 100%; margin-top: 15px">
+          <a-button type="primary" :loading="loading" :size="'small'" preIcon="ant-design:save-filled" @click="onSubmit">
+            <span>点击保存</span>
+          </a-button>
+        </div>
+      </template>
+      <a-empty v-else description="无配置信息" />
+    </a-spin>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { queryDepartRoleByUserId, queryDepartRoleUserList, saveDepartRoleUser } from '../depart.user.api';
+
+  defineEmits(['register']);
+  const loading = ref<boolean>(false);
+  const userId = ref('');
+  const departId = ref('');
+  const oldRoleId = ref('');
+  const desformList = ref<Array<any>>([]);
+  const designNameValue = ref<Array<any>>([]);
+
+  // 注册抽屉组件
+  const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
+    userId.value = unref(data.userId);
+    departId.value = unref(data.departId);
+    loadData();
+  });
+
+  async function loadData() {
+    try {
+      loading.value = true;
+      const params = {
+        departId: departId.value,
+        userId: userId.value,
+      };
+      // 查询 DepartRole
+      const [$desformList, $departRoleList] = await Promise.all([queryDepartRoleUserList(params), queryDepartRoleByUserId(params)]);
+      desformList.value = $desformList;
+      designNameValue.value = $departRoleList.map((item) => item.droleId);
+      oldRoleId.value = designNameValue.value.join(',');
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function onSubmit() {
+    try {
+      loading.value = true;
+      await saveDepartRoleUser({
+        userId: userId.value,
+        newRoleId: designNameValue.value.join(','),
+        oldRoleId: oldRoleId.value,
+      });
+      doClose();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function onClose() {
+    doReset();
+  }
+
+  function doClose() {
+    doReset();
+    closeDrawer();
+  }
+
+  function doReset() {
+    userId.value = '';
+    departId.value = '';
+    oldRoleId.value = '';
+    desformList.value = [];
+    designNameValue.value = [];
+  }
+</script>
diff --git a/src/views/system/departUser/components/DepartTree.vue b/src/views/system/departUser/components/DepartTree.vue
new file mode 100644
index 0000000..5a150a8
--- /dev/null
+++ b/src/views/system/departUser/components/DepartTree.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="bg-white m-4 mr-0 overflow-hidden">
+    <div v-if="userIdentity === '2'" class="j-table-operator" style="width: 100%">
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAddChildDepart">添加下级</a-button>
+      <!--      <a-button type="primary" preIcon="ant-design:edit-outlined" @click="editDepart">编辑</a-button>-->
+      <a-button :disabled="!(checkedKeys && checkedKeys.length > 0)" preIcon="ant-design:delete-outlined" @click="onDeleteBatch">删除</a-button>
+    </div>
+    <a-spin :spinning="loading">
+      <template v-if="userIdentity === '2'">
+        <a-input-search placeholder="按部门名称搜索…" style="margin-bottom: 10px" @search="onSearch" />
+        <!--组织机构树-->
+        <BasicTree
+          v-if="!treeReloading"
+          :toolbar="false"
+          :search="false"
+          :showLine="false"
+          :clickRowToExpand="false"
+          :multiple="false"
+          :checkStrictly="true"
+          :treeData="treeData"
+          :checkedKeys="checkedKeys"
+          :selectedKeys="selectedKeys"
+          :expandedKeys="expandedKeys"
+          :autoExpandParent="autoExpandParent"
+          :beforeRightClick="getRightMenuList"
+          @select="onSelect"
+          @expand="onExpand"
+          @check="onCheck"
+        />
+      </template>
+      <a-empty v-else description="普通员工无此权限" />
+    </a-spin>
+    <DepartFormModal :rootTreeData="treeData" @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { inject, nextTick, ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BasicTree, ContextMenuItem } from '/@/components/Tree';
+  import { queryMyDepartTreeList, searchByKeywords } from '../depart.user.api';
+  import DepartFormModal from '@/views/system/depart/components/DepartFormModal.vue';
+  import { useModal } from '@/components/Modal';
+  import { deleteBatchDepart } from '@/views/system/depart/depart.api';
+
+  const prefixCls = inject('prefixCls');
+  const emit = defineEmits(['select']);
+  const { createMessage } = useMessage();
+
+  let loading = ref<boolean>(false);
+  // 负责部门ID
+  let myDepIds = ref<any[]>([]);
+  // 部门树列表数据
+  let treeData = ref<any[]>([]);
+  // 当前展开的项
+  let expandedKeys = ref<any[]>([]);
+  // 当前选中的项
+  let selectedKeys = ref<any[]>([]);
+  // 当前选中的项
+  let selectedNode = ref<any>({});
+  // 当前选中的项
+  let checkedKeys = ref<any[]>([]);
+  // 是否自动展开父级
+  let autoExpandParent = ref<boolean>(true);
+  // 用户身份(1:普通员工  2:上级)
+  let userIdentity = ref<string>('2');
+  // 树组件重新加载
+  let treeReloading = ref<boolean>(false);
+  // 注册 modal
+  const [registerModal, { openModal }] = useModal();
+  // 加载部门信息
+  function loadDepartTreeData() {
+    loading.value = true;
+    treeReloading.value = true;
+    treeData.value = [];
+    queryMyDepartTreeList()
+      .then((res) => {
+        if (res.success) {
+          if (Array.isArray(res.result)) {
+            treeData.value = res.result;
+            myDepIds.value = res.result.map((item) => item.id);
+            userIdentity.value = res.message;
+            autoExpandParentNode();
+          }
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .finally(async () => {
+        await nextTick();
+        loading.value = false;
+        treeReloading.value = false;
+      });
+  }
+
+  loadDepartTreeData();
+
+  // 自动展开父节点，只展开一级
+  function autoExpandParentNode() {
+    let keys: Array<any> = [];
+    treeData.value.forEach((item, index) => {
+      if (item.children && item.children.length > 0) {
+        keys.push(item.key);
+      }
+      if (index === 0) {
+        // 默认选中第一个
+        setSelectedKey(item.id, item);
+      }
+    });
+    if (keys.length > 0) {
+      reloadTree();
+      expandedKeys.value = keys;
+    }
+  }
+
+  // 添加子级部门
+  function onAddChildDepart() {
+    if (selectedKeys.value && selectedKeys.value.length === 0) {
+      createMessage.warning('请先选择一个部门');
+      return;
+    }
+    const record = { parentId: selectedKeys.value[0] };
+    openModal(true, { isUpdate: false, isChild: true, record });
+  }
+
+  // 编辑部门
+  function editDepart() {
+    if (selectedKeys.value && selectedKeys.value.length === 0) {
+      createMessage.warning('请先选择一个部门');
+      return;
+    }
+    if (myDepIds.value.includes(selectedKeys.value[0])) {
+      createMessage.warning('不能编辑负责部门');
+      return;
+    }
+    console.log('selectedNode', selectedNode.value);
+    openModal(true, { isUpdate: false, isChild: true, record: { ...selectedNode.value } });
+  }
+
+  // 删除部门
+  async function onDeleteBatch() {
+    const idList = checkedKeys.value;
+    if (myDepIds.value.includes(idList[0])) {
+      createMessage.warning('不能删除负责部门');
+      return;
+    }
+    if (idList.length > 0) {
+      try {
+        loading.value = true;
+        await deleteBatchDepart({ ids: idList.join(',') }, true);
+        await loadDepartTreeData();
+      } finally {
+        loading.value = false;
+      }
+    }
+  }
+  // 重新加载树组件，防止无法默认展开数据
+  async function reloadTree() {
+    await nextTick();
+    treeReloading.value = true;
+    await nextTick();
+    treeReloading.value = false;
+  }
+
+  /**
+   * 设置当前选中的行
+   */
+  function setSelectedKey(key: string, data?: object) {
+    selectedKeys.value = [key];
+    checkedKeys.value = [key];
+    if (data) {
+      selectedNode.value = { ...data };
+      emit('select', data);
+    }
+  }
+
+  // 搜索事件
+  function onSearch(value: string) {
+    if (value) {
+      loading.value = true;
+      searchByKeywords({ keyWord: value, myDeptSearch: '1' })
+        .then((result) => {
+          if (Array.isArray(result)) {
+            treeData.value = result;
+          } else {
+            createMessage.warning('未查询到部门信息');
+            treeData.value = [];
+          }
+        })
+        .finally(() => (loading.value = false));
+    } else {
+      loadDepartTreeData();
+    }
+  }
+
+  // 树选择事件
+  function onSelect(selKeys, event) {
+    if (selKeys.length > 0 && selectedKeys.value[0] !== selKeys[0]) {
+      setSelectedKey(selKeys[0], event.selectedNodes[0]);
+    } else {
+      // 这样可以防止用户取消选择
+      setSelectedKey(selectedKeys.value[0]);
+    }
+    checkedKeys.value = [selectedKeys.value[0]];
+  }
+
+  // 树选中事件
+  function onCheck(keys) {
+    if (keys.checked && keys.checked.length > 0) {
+      checkedKeys.value = [...keys.checked];
+    } else {
+      checkedKeys.value = [];
+    }
+  }
+
+  // 树展开事件
+  function onExpand(keys) {
+    expandedKeys.value = keys;
+    autoExpandParent.value = false;
+  }
+
+  //成功回调
+  async function handleSuccess() {
+    await loadDepartTreeData();
+  }
+  /**
+   *
+   * @param node
+   */
+  function getRightMenuList(node: any): ContextMenuItem[] {
+    return [
+      {
+        label: '添加下级',
+        disabled: myDepIds.value.includes(node.key),
+        handler: () => {
+          setSelectedKey(node.key);
+          onAddChildDepart();
+        },
+        icon: 'ant-design:plus-outlined',
+      },
+      {
+        label: '编辑',
+        disabled: myDepIds.value.includes(node.key),
+        handler: () => {
+          setSelectedKey(node.key);
+          const record = { ...node.dataRef };
+          openModal(true, { isUpdate: true, record, isChild: true });
+        },
+        icon: 'ant-design:edit-outlined',
+      },
+    ];
+  }
+</script>
+<style lang="less" scoped>
+  /*升级antd3后，查询框与树贴的太近，样式优化*/
+  :deep(.jeecg-tree-header) {
+    margin-bottom: 6px;
+  }
+</style>
diff --git a/src/views/system/departUser/components/DepartUserInfoTab.vue b/src/views/system/departUser/components/DepartUserInfoTab.vue
new file mode 100644
index 0000000..b910bf4
--- /dev/null
+++ b/src/views/system/departUser/components/DepartUserInfoTab.vue
@@ -0,0 +1,238 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <!--插槽:table标题-->
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="selectAddUser" :disabled="!departId">添加已有用户</a-button>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="createUser" :disabled="!departId">新建用户</a-button>
+      <template v-if="selectedRowKeys.length > 0">
+        <a-dropdown>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onUnlinkDepartUserBatch">
+                <icon icon="bx:bx-unlink" />
+                <span>取消关联</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作 </span>
+            <icon icon="akar-icons:chevron-down" />
+          </a-button>
+        </a-dropdown>
+      </template>
+    </template>
+    <!-- 插槽：行内操作按钮 -->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+    </template>
+  </BasicTable>
+  <UserDrawer @register="registerDrawer" @success="onUserDrawerSuccess" />
+  <DepartRoleUserAuthDrawer @register="registerUserAuthDrawer" />
+  <UserSelectModal ref="userSelectModalRef" rowKey="id" @register="registerSelUserModal" @getSelectResult="onSelectUserOk" />
+</template>
+
+<script lang="ts" setup>
+  import { computed, inject, ref, unref, watch } from 'vue';
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  import UserDrawer from '/@/views/system/user/UserDrawer.vue';
+  import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue';
+  import DepartRoleUserAuthDrawer from './DepartRoleUserAuthDrawer.vue';
+  import { departUserList, linkDepartUserBatch, unlinkDepartUserBatch } from '../depart.user.api';
+  import { userInfoColumns, userInfoSearchFormSchema } from '../depart.user.data';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  const prefixCls = inject('prefixCls');
+  const props = defineProps({
+    data: { require: true, type: Object },
+  });
+  const userSelectModalRef: any = ref(null);
+  // 当前选中的部门ID，可能会为空，代表未选择部门
+  const departId = computed(() => props.data?.id);
+
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 12, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  // 列表页面公共参数、方法
+  const { tableContext, createMessage } = useListPage({
+    tableProps: {
+      api: departUserList,
+      columns: userInfoColumns,
+      canResize: false,
+      formConfig: {
+        schemas: userInfoSearchFormSchema,
+        baseColProps: adaptiveColProps,
+        labelAlign: 'left',
+        labelCol: {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 9,
+          xl: 7,
+          xxl: 5,
+        },
+        wrapperCol: {},
+        // 操作按钮配置
+        actionColOptions: {
+          ...adaptiveColProps,
+          style: { textAlign: 'left' },
+        },
+        showResetButton: !!departId.value,
+        showSubmitButton: !!departId.value,
+      },
+      // 【issues/1064】列设置的 cacheKey
+      tableSetting: { cacheKey: 'depart_user_userInfo' },
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        params.depId = departId.value;
+      },
+      // 代码逻辑说明: 【TV360X-1861】没部门时不加载用户信息
+      immediate: !!departId.value,
+    },
+  });
+
+  // 注册 ListTable
+  const [registerTable, { reload, setProps, setLoading, updateTableDataRecord }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  watch(
+    () => props.data,
+    () => reload()
+  );
+  //注册drawer
+  const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
+  const [registerUserAuthDrawer, userAuthDrawer] = useDrawer();
+  // 注册用户选择 modal
+  const [registerSelUserModal, selUserModal] = useModal();
+
+  // 清空选择的行
+  function clearSelection() {
+    selectedRowKeys.value = [];
+  }
+
+  // 查看部门角色
+  function showDepartRole(record) {
+    userAuthDrawer.openDrawer(true, { userId: record.id, departId });
+  }
+
+  // 创建用户
+  function createUser() {
+    if (!departId.value) {
+      createMessage.warning('请先选择一个部门');
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+        departDisabled: true,
+        // 初始化负责部门
+        nextDepartOptions: { value: props.data?.key, label: props.data?.title },
+        record: {
+          activitiSync: 1,
+          userIdentity: 1,
+          selecteddeparts: departId.value,
+        },
+      });
+    }
+  }
+
+  // 查看用户详情
+  function showUserDetail(record) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      departDisabled: true,
+      showFooter: false,
+    });
+  }
+
+  // 编辑用户信息
+  function editUserInfo(record) {
+    openDrawer(true, { isUpdate: true, record, departDisabled: true });
+  }
+
+  // 选择添加已有用户
+  function selectAddUser() {
+    // 代码逻辑说明: 【TV360X-1613】再次打开还是上次的选中用户，没置空
+    userSelectModalRef.value.rowSelection.selectedRowKeys = [];
+    selUserModal.openModal();
+  }
+
+  // 批量取消关联部门和用户之间的关系
+  async function unlinkDepartUser(idList, confirm) {
+    if (!departId.value) {
+      createMessage.warning('请先选择一个部门');
+    } else {
+      setLoading(true);
+      let userIds = unref(idList).join(',');
+      try {
+        await unlinkDepartUserBatch({ depId: departId.value, userIds }, confirm);
+        return reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+    return Promise.reject();
+  }
+
+  // 批量取消关联事件
+  async function onUnlinkDepartUserBatch() {
+    try {
+      await unlinkDepartUser(selectedRowKeys, true);
+      // 批量删除成功后清空选择
+      clearSelection();
+    } catch (e) {}
+  }
+
+  // 选择用户成功
+  async function onSelectUserOk(options, userIdList) {
+    if (userIdList.length > 0) {
+      try {
+        setLoading(true);
+        await linkDepartUserBatch(departId.value, userIdList);
+        reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+  }
+
+  /**
+   * 用户抽屉表单成功回调
+   */
+  function onUserDrawerSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [{ label: '编辑', onClick: editUserInfo.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      { label: '部门角色', onClick: showDepartRole.bind(null, record) },
+      { label: '用户详情', onClick: showUserDetail.bind(null, record) },
+      {
+        label: '取消关联',
+        color: 'error',
+        popConfirm: {
+          title: '确认取消关联吗？',
+          confirm: unlinkDepartUser.bind(null, [record.id], false),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/departUser/depart.user.api.ts b/src/views/system/departUser/depart.user.api.ts
new file mode 100644
index 0000000..d5a37ed
--- /dev/null
+++ b/src/views/system/departUser/depart.user.api.ts
@@ -0,0 +1,159 @@
+import { unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  treeList = '/sys/sysDepart/queryMyDeptTreeList',
+  queryIdTree = '/sys/sysDepart/queryIdTree',
+  searchBy = '/sys/sysDepart/searchBy',
+}
+
+// 部门用户API
+enum DepartUserApi {
+  list = '/sys/user/departUserList',
+  link = '/sys/user/editSysDepartWithUser',
+  unlink = '/sys/user/deleteUserInDepartBatch',
+}
+
+// 部门角色API
+enum DepartRoleApi {
+  list = '/sys/sysDepartRole/list',
+  deleteBatch = '/sys/sysDepartRole/deleteBatch',
+  save = '/sys/sysDepartRole/add',
+  edit = '/sys/sysDepartRole/edit',
+  queryTreeListForDeptRole = '/sys/sysDepartPermission/queryTreeListForDeptRole',
+  queryDeptRolePermission = '/sys/sysDepartPermission/queryDeptRolePermission',
+  saveDeptRolePermission = '/sys/sysDepartPermission/saveDeptRolePermission',
+  dataRule = '/sys/sysDepartRole/datarule',
+  getDeptRoleList = '/sys/sysDepartRole/getDeptRoleList',
+  getDeptRoleByUserId = '/sys/sysDepartRole/getDeptRoleByUserId',
+  saveDeptRoleUser = '/sys/sysDepartRole/deptRoleUserAdd',
+}
+
+/**
+ * 获取部门树列表
+ */
+export const queryMyDepartTreeList = (params?) => defHttp.get({ url: Api.treeList, params }, { isTransformResponse: false });
+
+/**
+ * 查询数据，以树结构形式加载所有部门的名称
+ */
+export const queryIdTree = (params?) => defHttp.get({ url: Api.queryIdTree, params });
+
+/**
+ * 根据关键字搜索部门
+ */
+export const searchByKeywords = (params) => defHttp.get({ url: Api.searchBy, params });
+
+/**
+ * 查询部门下的用户信息
+ */
+export const departUserList = (params) => defHttp.get({ url: DepartUserApi.list, params });
+
+/**
+ * 批量添加部门和用户的关联关系
+ *
+ * @param departId 部门ID
+ * @param userIdList 用户ID列表
+ */
+export const linkDepartUserBatch = (departId: string, userIdList: string[]) =>
+  defHttp.post({ url: DepartUserApi.link, params: { depId: departId, userIdList } });
+
+/**
+ * 批量取消部门和用户的关联关系
+ */
+export const unlinkDepartUserBatch = (params, confirm = false) => {
+  return new Promise((resolve, reject) => {
+    const doDelete = () => {
+      resolve(defHttp.delete({ url: DepartUserApi.unlink, params }, { joinParamsToUrl: true }));
+    };
+    if (confirm) {
+      createConfirm({
+        iconType: 'warning',
+        title: '取消关联',
+        content: '确定要取消关联吗？',
+        onOk: () => doDelete(),
+        onCancel: () => reject(),
+      });
+    } else {
+      doDelete();
+    }
+  });
+};
+
+/**
+ * 查询部门角色信息
+ */
+export const departRoleList = (params) => defHttp.get({ url: DepartRoleApi.list, params });
+
+/**
+ * 保存或者更新部门角色
+ */
+export const saveOrUpdateDepartRole = (params, isUpdate) => {
+  if (isUpdate) {
+    return defHttp.put({ url: DepartRoleApi.edit, params });
+  } else {
+    return defHttp.post({ url: DepartRoleApi.save, params });
+  }
+};
+
+/**
+ * 批量删除部门角色
+ */
+export const deleteBatchDepartRole = (params, confirm = false) => {
+  return new Promise((resolve, reject) => {
+    const doDelete = () => {
+      resolve(defHttp.delete({ url: DepartRoleApi.deleteBatch, params }, { joinParamsToUrl: true }));
+    };
+    if (confirm) {
+      createConfirm({
+        iconType: 'warning',
+        title: '删除',
+        content: '确定要删除吗？',
+        onOk: () => doDelete(),
+        onCancel: () => reject(),
+      });
+    } else {
+      doDelete();
+    }
+  });
+};
+
+/**
+ * 用户角色授权功能，查询菜单权限树
+ */
+export const queryTreeListForDeptRole = (params) => defHttp.get({ url: DepartRoleApi.queryTreeListForDeptRole, params });
+/**
+ * 查询角色授权
+ */
+export const queryDeptRolePermission = (params) => defHttp.get({ url: DepartRoleApi.queryDeptRolePermission, params });
+/**
+ * 保存角色授权
+ */
+export const saveDeptRolePermission = (params) => defHttp.post({ url: DepartRoleApi.saveDeptRolePermission, params });
+
+/**
+ *  查询部门角色数据权限列表
+ */
+export const queryDepartRoleDataRule = (functionId, departId, roleId, params?) => {
+  let url = `${DepartRoleApi.dataRule}/${unref(functionId)}/${unref(departId)}/${unref(roleId)}`;
+  return defHttp.get({ url, params });
+};
+/**
+ * 保存部门角色数据权限
+ */
+export const saveDepartRoleDataRule = (params) => defHttp.post({ url: DepartRoleApi.dataRule, params });
+/**
+ * 查询部门角色用户授权
+ */
+export const queryDepartRoleUserList = (params) => defHttp.get({ url: DepartRoleApi.getDeptRoleList, params });
+/**
+ * 根据 userId 查询部门角色用户授权
+ */
+export const queryDepartRoleByUserId = (params) => defHttp.get({ url: DepartRoleApi.getDeptRoleByUserId, params });
+/**
+ * 保存部门角色用户授权
+ */
+export const saveDepartRoleUser = (params) => defHttp.post({ url: DepartRoleApi.saveDeptRoleUser, params });
diff --git a/src/views/system/departUser/depart.user.data.ts b/src/views/system/departUser/depart.user.data.ts
new file mode 100644
index 0000000..79e78e8
--- /dev/null
+++ b/src/views/system/departUser/depart.user.data.ts
@@ -0,0 +1,197 @@
+import { Ref } from 'vue';
+import { duplicateCheckDelay } from '/@/views/system/user/user.api';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { DescItem } from '/@/components/Description';
+import { findTree } from '/@/utils/common/compUtils';
+
+// 用户信息 columns
+export const userInfoColumns: BasicColumn[] = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+    width: 150,
+  },
+  {
+    title: '用户名称',
+    dataIndex: 'realname',
+    width: 180,
+  },
+  {
+    title: '部门',
+    dataIndex: 'orgCode',
+    width: 200,
+  },
+  {
+    title: '性别',
+    dataIndex: 'sex_dictText',
+    width: 80,
+  },
+  {
+    title: '电话',
+    dataIndex: 'phone',
+    width: 120,
+  },
+];
+
+// 用户信息查询条件表单
+export const userInfoSearchFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '用户账号',
+    component: 'Input',
+  },
+];
+
+// 部门角色 columns
+export const departRoleColumns: BasicColumn[] = [
+  {
+    title: '部门角色名称',
+    dataIndex: 'roleName',
+    width: 100,
+  },
+  {
+    title: '部门角色编码',
+    dataIndex: 'roleCode',
+    width: 100,
+  },
+  {
+    title: '部门',
+    dataIndex: 'departId_dictText',
+    width: 100,
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    width: 100,
+  },
+];
+
+// 部门角色查询条件表单
+export const departRoleSearchFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '部门角色名称',
+    component: 'Input',
+  },
+];
+
+// 部门角色弹窗form表单
+export const departRoleModalFormSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'roleName',
+    label: '部门角色名称',
+    component: 'Input',
+    rules: [
+      { required: true, message: '部门角色名称不能为空！' },
+      { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
+    ],
+  },
+  {
+    field: 'roleCode',
+    label: '部门角色编码',
+    component: 'Input',
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ model }) => {
+      return [
+        { required: true, message: '部门角色编码不能为空！' },
+        { min: 0, max: 64, message: '长度不能超过 64 个字符', trigger: 'blur' },
+        {
+          validator: (_, value) => {
+            if (/[\u4E00-\u9FA5]/g.test(value)) {
+              return Promise.reject('部门角色编码不可输入汉字！');
+            }
+            return new Promise((resolve, reject) => {
+              let params = {
+                tableName: 'sys_depart_role',
+                fieldName: 'role_code',
+                fieldVal: value,
+                dataId: model.id,
+              };
+              duplicateCheckDelay(params)
+                .then((res) => {
+                  res.success ? resolve() : reject(res.message || '校验失败');
+                })
+                .catch((err) => {
+                  reject(err.message || '验证失败');
+                });
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'Input',
+    rules: [{ min: 0, max: 126, message: '长度不能超过 126 个字符', trigger: 'blur' }],
+  },
+];
+
+// 基本信息form
+export function useBaseInfoForm(treeData: Ref<any[]>) {
+  const descItems: DescItem[] = [
+    {
+      field: 'departName',
+      label: '机构名称',
+    },
+    {
+      field: 'parentId',
+      label: '上级部门',
+      render(val) {
+        if (val) {
+          let data = findTree(treeData.value, (item) => item.key == val);
+          return data?.title ?? val;
+        }
+        return val;
+      },
+    },
+    {
+      field: 'orgCode',
+      label: '机构编码',
+    },
+    {
+      field: 'orgCategory',
+      label: '机构类型',
+      render(val) {
+        if (val === '1') {
+          return '公司';
+        } else if (val === '2') {
+          return '部门';
+        } else if (val === '3') {
+          return '岗位';
+        } else if(val === '4'){
+          return '子公司';
+        }
+        return val;
+      },
+    },
+    {
+      field: 'departOrder',
+      label: '排序',
+    },
+
+    {
+      field: 'mobile',
+      label: '手机号',
+    },
+    {
+      field: 'address',
+      label: '地址',
+    },
+    {
+      field: 'memo',
+      label: '备注',
+    },
+  ];
+
+  return { descItems };
+}
diff --git a/src/views/system/departUser/index.less b/src/views/system/departUser/index.less
new file mode 100644
index 0000000..df2d981
--- /dev/null
+++ b/src/views/system/departUser/index.less
@@ -0,0 +1,48 @@
+@prefix-cls: ~'@{namespace}-depart-user';
+
+.@{prefix-cls} {
+  &--tree-search {
+    width: 100%;
+    margin: 10px 0 20px;
+  }
+
+  &--base-info-form {
+    @media (min-width: 576px) {
+      .no-border {
+        border: 0;
+        box-shadow: none;
+      }
+
+      .ant-select.ant-select-disabled {
+        .ant-select-selector {
+          border: 0;
+          color: black;
+          background-color: transparent;
+        }
+
+        .ant-select-selector,
+        .ant-select-selection-item {
+          cursor: text !important;
+          user-select: initial !important;
+        }
+
+        .ant-select-selection-search,
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+// 夜间模式样式兼容
+[data-theme='dark'] .@{prefix-cls} {
+  &--base-info-form {
+    .ant-select.ant-select-disabled {
+      .ant-select-selector {
+        color: #c9d1d9;
+        background-color: transparent;
+      }
+    }
+  }
+}
diff --git a/src/views/system/departUser/index.vue b/src/views/system/departUser/index.vue
new file mode 100644
index 0000000..675d10b
--- /dev/null
+++ b/src/views/system/departUser/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <a-row :class="['p-4', `${prefixCls}--box`]" :gutter="10">
+    <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
+      <a-card :bordered="false" style="height: 100%">
+        <DepartTree @select="onTreeSelect" />
+      </a-card>
+    </a-col>
+    <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
+      <a-card :bordered="false" style="height: 100%">
+        <a-tabs defaultActiveKey="user-info">
+          <a-tab-pane tab="基本信息" key="base-info" forceRender>
+            <DepartBaseInfoTab :data="departData" />
+          </a-tab-pane>
+          <a-tab-pane tab="用户信息" key="user-info">
+            <DepartUserInfoTab :key="reRender" :data="departData" />
+          </a-tab-pane>
+          <a-tab-pane tab="部门角色" key="role-info">
+            <DepartRoleInfoTab :key="reRender" :data="departData" />
+          </a-tab-pane>
+        </a-tabs>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup name="system-depart-user">
+  import { provide, ref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import DepartTree from './components/DepartTree.vue';
+  import DepartBaseInfoTab from './components/DepartBaseInfoTab.vue';
+  import DepartUserInfoTab from './components/DepartUserInfoTab.vue';
+  import DepartRoleInfoTab from './components/DepartRoleInfoTab.vue';
+
+  const { prefixCls } = useDesign('depart-user');
+  provide('prefixCls', prefixCls);
+
+  // 当前选中的部门信息
+  let departData = ref({});
+
+  const reRender = ref(-1);
+
+  // 左侧树选择后触发
+  function onTreeSelect(data) {
+    // 代码逻辑说明: 【issues/7658】我的部门无部门列表数据时，点击查询或者重置能查出数据
+    if (reRender.value == -1) {
+      // 重新渲染组件
+      reRender.value = Math.random();
+    }
+    departData.value = data;
+  }
+</script>
+
+<style lang="less">
+  @import './index.less';
+</style>
diff --git a/src/views/system/dict/components/DictItemList.vue b/src/views/system/dict/components/DictItemList.vue
new file mode 100644
index 0000000..1ea5e43
--- /dev/null
+++ b/src/views/system/dict/components/DictItemList.vue
@@ -0,0 +1,140 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="字典列表" width="800px">
+    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleCreate"> 新增</a-button>
+      </template>
+      <template v-slot:bodyCell="{column, record, index}">
+        <template v-if="column.dataIndex ==='action'">
+          <TableAction :actions="getTableAction(record)" />
+        </template>
+      </template>
+     
+    </BasicTable>
+  </BasicDrawer>
+  <DictItemModal @register="registerModal" @success="reload" :dictId="dictId" />
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { useModal } from '/src/components/Modal';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DictItemModal from './DictItemModal.vue';
+  import { dictItemColumns, dictItemSearchFormSchema } from '../dict.data';
+  import { itemList, deleteItem } from '../dict.api';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  const { prefixCls } = useDesign('row-invalid');
+  const dictId = ref('');
+  //字典配置model
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer] = useDrawerInner(async (data) => {
+    dictId.value = data.id;
+    setProps({ searchInfo: { dictId: unref(dictId) } });
+    reload();
+  });
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 12, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  const [registerTable, { reload, setProps }] = useTable({
+    //需要配置rowKey，否则会有警告
+    rowKey:'dictId',
+    api: itemList,
+    columns: dictItemColumns,
+    formConfig: {
+      baseColProps: adaptiveColProps,
+      labelAlign: 'right',
+      labelCol: {
+        offset: 1,
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 9,
+        xl: 7,
+        xxl: 4,
+      },
+      wrapperCol: {},
+      schemas: dictItemSearchFormSchema,
+      autoSubmitOnEnter: true,
+      actionColOptions: {
+        span: 8
+      }
+    },
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    immediate: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      //slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteItem({ id: record.id }, reload);
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+  function getRowClassName(record) {
+    return record.status == 0 ? prefixCls : '';
+  }
+</script>
+<style scoped lang="less">
+  @prefix-cls: ~'@{namespace}-row-invalid';
+
+  :deep(.@{prefix-cls}) {
+    background: #f4f4f4;
+    color: #bababa;
+  }
+</style>
diff --git a/src/views/system/dict/components/DictItemModal.vue b/src/views/system/dict/components/DictItemModal.vue
new file mode 100644
index 0000000..5638da9
--- /dev/null
+++ b/src/views/system/dict/components/DictItemModal.vue
@@ -0,0 +1,124 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="800px">
+    <BasicForm @register="registerForm" >
+      <template #itemColor="{ model, field }">
+        <div class="item-tool">
+          <div
+              v-for="(item,index) in Colors"
+              :style="{ color: item[0] }"
+              :class="model.itemColor===item[0]?'item-active':''"
+              class="item-color"
+              @click="itemColorClick(item)">
+            <div class="item-color-border"></div>
+            <div class="item-back" :style="{ background: item[0] }"></div>
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { defineProps, ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { itemFormSchema } from '../dict.data';
+  import { saveOrUpdateDictItem } from '../dict.api';
+  import { Colors } from '/@/utils/dict/DictColors.js'
+  
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({ dictId: String });
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: itemFormSchema,
+    showActionButtonGroup: false,
+    mergeDynamicData: props,
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      values.dictId = props.dictId;
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDictItem(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+  
+  /**
+   * 字典颜色点击事件
+   * 
+   * @param index
+   * @param item
+   * @param model
+   */
+  function itemColorClick(item) {
+    console.log(item)
+    setFieldsValue({ itemColor: item[0] })
+  }
+  
+</script>
+<style lang="less" scoped>
+   /*begin 字典颜色配置样式*/
+  .item-tool{
+    display: flex;
+    flex-wrap: wrap;
+    .item-color{
+      width: 18px;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-items: center;
+      margin-right: 10px;
+    }
+    .item-back{
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+    }
+  }
+  .item-color-border{
+    visibility: hidden;
+  }
+  .item-active .item-color-border{
+    visibility: visible;
+    position: absolute;
+    border: 1px solid;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+   /*end 字典颜色配置样式*/
+</style>
diff --git a/src/views/system/dict/components/DictModal.vue b/src/views/system/dict/components/DictModal.vue
new file mode 100644
index 0000000..e8f0808
--- /dev/null
+++ b/src/views/system/dict/components/DictModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" width="550px" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { formSchema } from '../dict.data';
+  import { saveOrUpdateDict } from '../dict.api';
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, minHeight: 80 });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增字典' : '编辑字典'));
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDict(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/dict/components/DictRecycleBinModal.vue b/src/views/system/dict/components/DictRecycleBinModal.vue
new file mode 100644
index 0000000..c32aafe
--- /dev/null
+++ b/src/views/system/dict/components/DictRecycleBinModal.vue
@@ -0,0 +1,137 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="字典回收站" :showOkBtn="false" width="1000px" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                批量删除
+              </a-menu-item>
+              <a-menu-item key="2" @click="batchHandleRevert">
+                <Icon icon="ant-design:redo-outlined"></Icon>
+                批量取回
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, toRaw } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { recycleBincolumns } from '../dict.data';
+  import { getRecycleBinList, putRecycleBin, deleteRecycleBin, batchPutRecycleBin, batchDeleteRecycleBin } from '../dict.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
+    checkedKeys.value = [];
+  });
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    rowKey: 'id',
+    api: getRecycleBinList,
+    columns: recycleBincolumns,
+    striped: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    pagination: false,
+    tableSetting: { fullScreen: true },
+    canResize: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+  /**
+   * 还原事件
+   */
+  async function handleRevert(record) {
+    await putRecycleBin(record.id, reload);
+    emit('success');
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRecycleBin(record.id, reload);
+  }
+  /**
+   * 批量还原事件
+   */
+  function batchHandleRevert() {
+    batchPutRecycleBin({ ids: toRaw(checkedKeys.value).join(',') }, () => {
+      // 代码逻辑说明: 【TV360X-1663】数据字典回收增加批量功能
+      reload();
+      checkedKeys.value = [];
+      emit('success');
+    });
+  }
+  /**
+   * 批量删除事件
+   */
+  function batchHandleDelete() {
+    batchDeleteRecycleBin({ ids: toRaw(checkedKeys.value).join(',') }, () => {
+      // 代码逻辑说明: 【TV360X-1663】数据字典回收增加批量功能
+      checkedKeys.value = [];
+      reload();
+    });
+  }
+  //获取操作栏事件
+  function getTableAction(record) {
+    return [
+      {
+        label: '取回',
+        icon: 'ant-design:redo-outlined',
+        popConfirm: {
+          title: '是否确认取回',
+          confirm: handleRevert.bind(null, record),
+        },
+      },
+      {
+        label: '彻底删除',
+        icon: 'ant-design:scissor-outlined',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/dict/dict.api.ts b/src/views/system/dict/dict.api.ts
new file mode 100644
index 0000000..36fe729
--- /dev/null
+++ b/src/views/system/dict/dict.api.ts
@@ -0,0 +1,156 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+enum Api {
+  list = '/sys/dict/list',
+  save = '/sys/dict/add',
+  edit = '/sys/dict/edit',
+  duplicateCheck = '/sys/duplicate/check',
+  deleteDict = '/sys/dict/delete',
+  deleteBatch = '/sys/dict/deleteBatch',
+  importExcel = '/sys/dict/importExcel',
+  exportXls = '/sys/dict/exportXls',
+  recycleBinList = '/sys/dict/deleteList',
+  putRecycleBin = '/sys/dict/back',
+  batchPutRecycleBin = '/sys/dict/putRecycleBin',
+  batchDeleteRecycleBin = '/sys/dict/deleteRecycleBin',
+  deleteRecycleBin = '/sys/dict/deletePhysic',
+  itemList = '/sys/dictItem/list',
+  deleteItem = '/sys/dictItem/delete',
+  itemSave = '/sys/dictItem/add',
+  itemEdit = '/sys/dictItem/edit',
+  dictItemCheck = '/sys/dictItem/dictItemCheck',
+  refreshCache = '/sys/dict/refleshCache',
+  queryAllDictItems = '/sys/dict/queryAllDictItems',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ * @param params
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 字典列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+/**
+ * 删除字典
+ */
+export const deleteDict = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteDict, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除字典
+ * @param params
+ */
+export const batchDeleteDict = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新字典
+ * @param params
+ */
+export const saveOrUpdateDict = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 唯一校验
+ * @param params
+ */
+export const duplicateCheck = (params) => defHttp.get({ url: Api.duplicateCheck, params }, { isTransformResponse: false });
+/**
+ * 字典回收站列表
+ * @param params
+ */
+export const getRecycleBinList = (params) => defHttp.get({ url: Api.recycleBinList, params });
+
+/**
+ * 回收站批量还原
+ * @param params
+ */
+export const batchPutRecycleBin = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.batchPutRecycleBin, params}).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 回收站还原
+ * @param params
+ */
+export const putRecycleBin = (id, handleSuccess) => {
+  return defHttp.put({ url: Api.putRecycleBin + `/${id}` }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 回收站批量删除
+ * @param params
+ */
+export const batchDeleteRecycleBin = (params, handleSuccess) => {
+  return defHttp.delete({ url: `${Api.batchDeleteRecycleBin}?ids=${params.ids}`}).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 回收站删除
+ * @param params
+ */
+export const deleteRecycleBin = (id, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteRecycleBin + `/${id}` }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 字典配置列表
+ * @param params
+ */
+export const itemList = (params) => defHttp.get({ url: Api.itemList, params });
+/**
+ * 字典配置删除
+ * @param params
+ */
+export const deleteItem = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteItem, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 保存或者更新字典配置
+ * @param params
+ */
+export const saveOrUpdateDictItem = (params, isUpdate) => {
+  let url = isUpdate ? Api.itemEdit : Api.itemSave;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 校验字典数据值
+ * @param params
+ */
+export const dictItemCheck = (params) => defHttp.get({ url: Api.dictItemCheck, params }, { isTransformResponse: false });
+/**
+ * 刷新字典
+ * @param params
+ */
+export const refreshCache = () => defHttp.get({ url: Api.refreshCache }, { isTransformResponse: false });
+/**
+ * 获取所有字典项
+ * @param params
+ */
+export const queryAllDictItems = () => defHttp.get({ url: Api.queryAllDictItems }, { isTransformResponse: false });
diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts
new file mode 100644
index 0000000..8e7ea97
--- /dev/null
+++ b/src/views/system/dict/dict.data.ts
@@ -0,0 +1,203 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { dictItemCheck } from './dict.api';
+import { rules } from '/@/utils/helper/validator';
+import { h } from "vue";
+
+export const columns: BasicColumn[] = [
+  {
+    title: '字典名称',
+    dataIndex: 'dictName',
+    width: 240,
+  },
+  {
+    title: '字典编码',
+    dataIndex: 'dictCode',
+    width: 240,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    // width: 120
+  },
+];
+
+export const recycleBincolumns: BasicColumn[] = [
+  {
+    title: '字典名称',
+    dataIndex: 'dictName',
+    width: 120,
+  },
+  {
+    title: '字典编码',
+    dataIndex: 'dictCode',
+    width: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '字典名称',
+    field: 'dictName',
+    component: 'JInput',
+    colProps: { span: 6 },
+  },
+  {
+    label: '字典编码',
+    field: 'dictCode',
+    component: 'JInput',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '字典名称',
+    field: 'dictName',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '字典编码',
+    field: 'dictCode',
+    component: 'Input',
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ model, schema }) => rules.duplicateCheckRule('sys_dict', 'dict_code', model, schema, true),
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'Input',
+  },
+];
+
+export const dictItemColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'itemText',
+    width: 80,
+  },
+  {
+    title: '数据值',
+    dataIndex: 'itemValue',
+    width: 80,
+  },
+  {
+    title: '字典颜色',
+    dataIndex: 'itemColor',
+    width: 80,
+    align:'center',
+    customRender:({ text }) => {
+      return h('div', {
+        style: {"background": text, "width":"18px","height":"18px","border-radius":"50%","margin":"0 auto"}
+      })
+    }
+  },
+];
+
+export const dictItemSearchFormSchema: FormSchema[] = [
+  {
+    label: '名称',
+    field: 'itemText',
+    component: 'Input',
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'dict_item_status',
+      stringToNumber: true,
+    },
+  },
+];
+
+export const itemFormSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '名称',
+    field: 'itemText',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '数据值',
+    field: 'itemValue',
+    component: 'Input',
+    dynamicRules: ({ values, model }) => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (!value) {
+              return Promise.reject('请输入数据值');
+            }
+            if (new RegExp("[`~!@#$^&*()=|{}'.<>《》/?！￥（）—【】‘；：”“。，、？]").test(value)) {
+              return Promise.reject('数据值不能包含特殊字符！');
+            }
+            return new Promise<void>((resolve, reject) => {
+              let params = {
+                dictId: values.dictId,
+                id: model.id,
+                itemValue: value,
+              };
+              dictItemCheck(params)
+                .then((res) => {
+                  res.success ? resolve() : reject(res.message || '校验失败');
+                })
+                .catch((err) => {
+                  reject(err.message || '验证失败');
+                });
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    label: '颜色值',
+    field: 'itemColor',
+    component: 'Input',
+    slot:'itemColor'
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'Input',
+  },
+  {
+    field: 'sortOrder',
+    label: '排序',
+    component: 'InputNumber',
+    defaultValue: 1,
+  },
+  {
+    field: 'status',
+    label: '是否启用',
+    defaultValue: 1,
+    component: 'JDictSelectTag',
+    componentProps: {
+      type: 'radioButton',
+      dictCode: 'dict_item_status',
+      stringToNumber: true,
+    },
+  },
+];
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000..29361b2
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,194 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <!--插槽:table标题-->
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+      <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+      <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+      <a-button type="primary" @click="handlerRefreshCache" preIcon="ant-design:sync-outlined"> 刷新缓存</a-button>
+      <a-button type="primary" @click="openRecycleModal(true)" preIcon="ant-design:hdd-outlined"> 回收站</a-button>
+
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="batchHandleDelete">
+              <Icon icon="ant-design:delete-outlined"></Icon>
+              删除
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button
+          >批量操作
+          <Icon icon="ant-design:down-outlined"></Icon>
+        </a-button>
+      </a-dropdown>
+    </template>
+    <!--操作栏-->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <!--字典弹窗-->
+  <DictModal @register="registerModal" @success="handleSuccess" />
+  <!--字典配置抽屉-->
+  <DictItemList @register="registerDrawer" />
+  <!--回收站弹窗-->
+  <DictRecycleBinModal @register="registerModal1" @success="reload" />
+</template>
+
+<script lang="ts" name="system-dict" setup>
+  //ts语法
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, TableAction } from '/src/components/Table';
+  import { useDrawer } from '/src/components/Drawer';
+  import { useModal } from '/src/components/Modal';
+  import DictItemList from './components/DictItemList.vue';
+  import DictModal from './components/DictModal.vue';
+  import DictRecycleBinModal from './components/DictRecycleBinModal.vue';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { removeAuthCache, setAuthCache } from '/src/utils/auth';
+  import { columns, searchFormSchema } from './dict.data';
+  import { list, deleteDict, batchDeleteDict, getExportUrl, getImportUrl, refreshCache, queryAllDictItems } from './dict.api';
+  import { DB_DICT_DATA_KEY } from '/src/enums/cacheEnum';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const { createMessage } = useMessage();
+  //字典model
+  const [registerModal, { openModal }] = useModal();
+  //字典配置drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  import { useListPage } from '/@/hooks/system/useListPage';
+
+  //回收站model
+  const [registerModal1, { openModal: openRecycleModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    designScope: 'dict-template',
+    tableProps: {
+      title: '数据字典',
+      api: list,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 240,
+      },
+    },
+    // 代码逻辑说明: [issues/I5AMDD]导入/导出功能，操作后提示没有传递 export.url/import.url 参数------------
+    exportConfig: {
+      name: '数据字典列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  //注册table数据
+  const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  async function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  async function handleDetail(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteDict({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteDict({ ids: selectedRowKeys.value }, () => {
+      // 代码逻辑说明: 【TV360X-1665】数据字典批量删除后选中也清空
+      reload();
+      selectedRowKeys.value = [];
+      selectedRows.value = [];
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      updateTableDataRecord(values.id, values);
+    } else {
+      reload();
+    }
+  }
+  /**
+   * 刷新缓存
+   */
+  async function handlerRefreshCache() {
+    const result = await refreshCache();
+    if (result.success) {
+      const res = await queryAllDictItems();
+      removeAuthCache(DB_DICT_DATA_KEY);
+      // 代码逻辑说明: 【QQYUN-6417】生产环境字典慢的问题
+      const userStore = useUserStore();
+      userStore.setAllDictItems(res.result);
+      createMessage.success('刷新缓存完成！');
+    } else {
+      createMessage.error('刷新缓存失败！');
+    }
+  }
+  /**
+   * 字典配置
+   */
+  function handleItem(record) {
+    openDrawer(true, {
+      id: record.id,
+    });
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '字典配置',
+        onClick: handleItem.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '确定删除吗?',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/examples/demo/DemoModal.vue b/src/views/system/examples/demo/DemoModal.vue
new file mode 100644
index 0000000..53121c6
--- /dev/null
+++ b/src/views/system/examples/demo/DemoModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm" :disabled="isDisabled" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './demo.data';
+  import { saveOrUpdateDemo, getDemoById } from './demo.api';
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+
+  //自定义接受参数
+  const props = defineProps({
+    //是否禁用页面
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    //labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, showOkBtn: !props.isDisabled});
+    isUpdate.value = !!data?.isUpdate;
+    if(data.createBy){
+      await setFieldsValue({createBy: data.createBy})
+    }
+    if(data.createTime){
+      await setFieldsValue({createTime: data.createTime})
+    }
+    if (unref(isUpdate)) {
+      //获取详情
+      data.record = await getDemoById({ id: data.record.id });
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateDemo(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', values);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/examples/demo/demo.api.ts b/src/views/system/examples/demo/demo.api.ts
new file mode 100644
index 0000000..1cde92b
--- /dev/null
+++ b/src/views/system/examples/demo/demo.api.ts
@@ -0,0 +1,73 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/test/jeecgDemo/list',
+  save = '/test/jeecgDemo/add',
+  edit = '/test/jeecgDemo/edit',
+  get = '/test/jeecgDemo/queryById',
+  delete = '/test/jeecgDemo/delete',
+  deleteBatch = '/test/jeecgDemo/deleteBatch',
+  exportXls = '/test/jeecgDemo/exportXls',
+  importExcel = '/test/jeecgDemo/importExcel',
+}
+/**
+ * 导出api
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 查询示例列表
+ * @param params
+ */
+export const getDemoList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新示例
+ * @param params
+ */
+export const saveOrUpdateDemo = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 查询示例详情
+ * @param params
+ */
+export const getDemoById = (params) => {
+  return defHttp.get({ url: Api.get, params });
+};
+
+/**
+ * 删除示例
+ * @param params
+ */
+export const deleteDemo = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除示例
+ * @param params
+ */
+export const batchDeleteDemo = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
diff --git a/src/views/system/examples/demo/demo.data.ts b/src/views/system/examples/demo/demo.data.ts
new file mode 100644
index 0000000..e4b00f4
--- /dev/null
+++ b/src/views/system/examples/demo/demo.data.ts
@@ -0,0 +1,223 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 170,
+    align: 'left',
+    resizable: true,
+    sorter: {
+      multiple:1
+    }
+  },
+  {
+    title: '关键词',
+    dataIndex: 'keyWord',
+    width: 130,
+    resizable: true,
+  },
+  {
+    title: '打卡时间',
+    dataIndex: 'punchTime',
+    width: 140,
+    resizable: true,
+  },
+  {
+    title: '工资',
+    dataIndex: 'salaryMoney',
+    width: 140,
+    resizable: true,
+    sorter: {
+      multiple: 2
+    }
+  },
+  {
+    title: '奖金',
+    dataIndex: 'bonusMoney',
+    width: 140,
+    resizable: true,
+  },
+  {
+    title: '性别',
+    dataIndex: 'sex',
+    sorter: {
+      multiple: 3
+    },
+    customRender: ({ record }) => {
+      return render.renderDict(record.sex, 'sex', true);
+      // let v = record.sex ? (record.sex == '1' ? '男' : '女') : '';
+      // return h('span', v);
+    },
+    width: 120,
+    resizable: true,
+  },
+  {
+    title: '生日',
+    dataIndex: 'birthday',
+    width: 120,
+    resizable: true,
+  },
+  {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 120,
+    resizable: true,
+  },
+  {
+    title: '个人简介',
+    dataIndex: 'content',
+    width: 120,
+    resizable: true,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '姓名',
+    component: 'Input',
+    componentProps: {
+      trim: true,
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'birthday',
+    label: '生日',
+    component: 'RangePicker',
+    componentProps: {
+      valueType: 'Date'
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    component: 'Input',
+    slot: 'age',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    colProps: { span: 8 },
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'sex',
+      placeholder: '请选择性别',
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'createBy',
+    label: 'createBy',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'createTime',
+    label: 'createTime',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'name',
+    label: '名字',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '请输入名字',
+    },
+  },
+  {
+    field: 'keyWord',
+    label: '关键词',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入关键词',
+    },
+  },
+  {
+    field: 'punchTime',
+    label: '打卡时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: '请选择打卡时间',
+    },
+  },
+  {
+    field: 'salaryMoney',
+    label: '工资',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入工资',
+    },
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    component: 'JDictSelectTag',
+    defaultValue: '1',
+    componentProps: {
+      type: 'radio',
+      dictCode: 'sex',
+      placeholder: '请选择性别',
+    },
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    component: 'InputNumber',
+    defaultValue: 1,
+    componentProps: {
+      placeholder: '请输入年龄',
+    },
+  },
+  {
+    field: 'birthday',
+    label: '生日',
+    component: 'DatePicker',
+    defaultValue: '',
+    componentProps: {
+      valueFormat: 'YYYY-MM-DD',
+      placeholder: '请选择生日',
+    },
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    rules: [{ required: false, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
+    componentProps: {
+      placeholder: '请输入邮箱',
+    },
+  },
+  {
+    field: 'content',
+    label: '个人简介 - To introduce myself',
+    component: 'InputTextArea',
+    labelLength: 4,
+    componentProps: {
+      placeholder: '请输入个人简介',
+    },
+  },
+  {
+    field: 'updateCount',
+    label: '乐观锁',
+    show: false,
+    component: 'Input',
+  },
+];
diff --git a/src/views/system/examples/demo/index.vue b/src/views/system/examples/demo/index.vue
new file mode 100644
index 0000000..43367f5
--- /dev/null
+++ b/src/views/system/examples/demo/index.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <!--自定义查询区域-->
+    <div class="jeecg-basic-table-form-container" @keyup.enter="searchQuery" v-if="customSearch">
+      <a-form ref="formRef" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="8">
+            <a-form-item label="用户名">
+              <a-input placeholder="请输入名称模糊查询" v-model:value="queryParam.name"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8">
+            <a-form-item label="年龄">
+              <a-input placeholder="最小年龄" type="ge" v-model:value="queryParam.age_begin" style="width: calc(50% - 15px)"></a-input>
+              <span>~</span>
+              <a-input placeholder="最大年龄" type="le" v-model:value="queryParam.age_end" style="width: calc(50% - 15px)"></a-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :lg="8">
+              <a-form-item label="性别">
+                <JDictSelectTag v-model:value="queryParam.sex" placeholder="请选择性别" dictCode="sex" />
+              </a-form-item>
+            </a-col>
+            <a-col :lg="8">
+              <a-form-item label="选择用户">
+                <JDictSelectTag v-model:value="queryParam.id" placeholder="请选择用户" dictCode="demo,name,id" />
+              </a-form-item>
+            </a-col>
+          </template>
+          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+            <a-col :lg="6">
+              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+              <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+              <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
+              </a>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" :class="{ 'p-4': customSearch }">
+      <template #form-age="{ model, field }">
+        <a-input placeholder="最小年龄" type="ge" v-model:value="min" style="width: calc(50% - 15px)" @change="ageChange(model, field)"></a-input>
+        <span>~</span>
+        <a-input placeholder="最大年龄" type="le" v-model:value="max" style="width: calc(50% - 15px)" @change="ageChange(model, field)"></a-input>
+      </template>
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+        <a-upload name="file" :showUploadList="false" :customRequest="(file) => handleImportXls(file, getImportUrl, reload)">
+          <a-button preIcon="ant-design:import-outlined" type="primary">导入</a-button>
+        </a-upload>
+        <a-button preIcon="ant-design:export-outlined" type="primary" @click="handleExportXls('单表示例', getExportUrl,exportParams)">导出</a-button>
+        <a-button preIcon="ant-design:filter" type="primary" @click="">高级查询</a-button>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="openTab">打开Tab页</a-button>
+        <a-button preIcon="ant-design:retweet-outlined" type="primary" @click="customSearch = !customSearch">{{
+          customSearch ? '表单配置查询' : '自定义查询'
+        }}</a-button>
+        <a-button preIcon="ant-design:import-outlined" type="primary" @click="handleImport">弹窗导入</a-button>
+
+        <super-query :config="superQueryConfig" @search="handleSuperQuery"/>
+
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon style="fontsize: 12px" icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <DemoModal @register="registerModal" @success="reload" :isDisabled="isDisabled"/>
+    <JImportModal @register="registerModalJimport" :url="getImportUrl" online />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, reactive, toRaw, watch,computed } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import DemoModal from './DemoModal.vue';
+  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMethods } from '/@/hooks/system/useMethods';
+  import { getDemoList, deleteDemo, batchDeleteDemo, getExportUrl, getImportUrl } from './demo.api';
+  import { columns, searchFormSchema } from './demo.data';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { router } from '/@/router';
+  import { filterObj } from '/@/utils/common/compUtils';
+  
+  const go = useGo();
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal, { openModal }] = useModal();
+  const [registerModalJimport, { openModal: openModalJimport }] = useModal();
+  const { handleExportXls, handleImportXls } = useMethods();
+  const min = ref();
+  const max = ref();
+  const isDisabled = ref(false);
+  
+  const [registerTable, { reload, setProps }] = useTable({
+    title: '单表示例',
+    api: getDemoList,
+    columns,
+    formConfig: {
+      //labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['birthday', ['birthday_begin', 'birthday_end'], 'YYYY-MM-DD']],
+      fieldMapToNumber: [['age', ['age_begin', 'age_end']]],
+      autoAdvancedCol: 2,
+      actionColOptions: {
+        style: { textAlign: 'left' },
+      },
+    },
+    //自定义默认多字段排序
+    defSort: [
+      {
+        column: 'name',
+        order: 'desc',
+      },
+      {
+        column: 'sex',
+        order: 'asc',
+      },
+    ],
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    tableSetting: { fullScreen: true },
+    canResize: false,
+    rowKey: 'id',
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 40,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  function handleImport() {
+    openModalJimport(true);
+  }
+
+  const exportParams = computed(()=>{
+    let paramsForm = {};
+    if (checkedKeys.value && checkedKeys.value.length > 0) {
+      paramsForm['selections'] = checkedKeys.value.join(',');
+    }
+    return filterObj(paramsForm)
+  })
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    console.log("checkedKeys------>",checkedKeys)
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    isDisabled.value = false;
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    isDisabled.value = false;
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 详情页面
+   */
+  function handleDetail(record) {
+    isDisabled.value = true;
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteDemo({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteDemo({ ids: checkedKeys.value }, reload);
+  }
+  /**
+   * 年龄修改事件
+   */
+  function ageChange(model, field) {
+    model[field] = [unref(min), unref(max)];
+  }
+
+  /**
+   * 打开tab页面
+   */
+  function openTab() {
+    go(`/comp/jeecg/basic`);
+  }
+  //-----自定义查询----begin--------
+  const formElRef = ref();
+  const labelCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 7 },
+  });
+  const wrapperCol = reactive({
+    xs: { span: 24 },
+    sm: { span: 16 },
+  });
+  const toggleSearchStatus = ref(false);
+  const customSearch = ref(false);
+  const queryParam = reactive({
+    name: '',
+    age_begin: '',
+    age_end: '',
+    sex: '',
+    id: '',
+  });
+  watch(customSearch, () => {
+    setProps({ useSearchForm: !unref(customSearch) });
+  });
+  function searchQuery() {
+    setProps({ searchInfo: toRaw(queryParam) });
+    reload();
+  }
+  function searchReset() {
+    Object.assign(queryParam, { name: '', age_begin: '', age_end: '', sex: '', id: '' });
+    reload();
+  }
+  //自定义查询----end---------
+
+  const superQueryConfig = reactive({
+    name:{ title: "名称", view: "text", type: "string", order: 1 },
+    sex:{ title: "性别", view: "list", type: "string", dictCode:'sex', order: 2 },
+  });
+  
+  function handleSuperQuery(params) {
+    Object.keys(params).map(k=>{
+      queryParam[k] = params[k]
+    });
+    searchQuery();
+  }
+</script>
+<style lang="less" scoped>
+  .jeecg-basic-table-form-container {
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/src/views/system/fillRule/FillRuleModal.vue b/src/views/system/fillRule/FillRuleModal.vue
new file mode 100644
index 0000000..81f824d
--- /dev/null
+++ b/src/views/system/fillRule/FillRuleModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" :width="800" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './fill.rule.data';
+  import { saveFillRule, updateFillRule } from './fill.rule.api';
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  const { createMessage: $message } = useMessage();
+
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 12 },
+  });
+
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let formValue = await validate();
+
+      // 检查参数是否合法
+      let ruleParams = formValue.ruleParams;
+      if (!!ruleParams) {
+        ruleParams = JSON.parse(ruleParams);
+        for (const key of Object.keys(ruleParams)) {
+          // online 保留字检查
+          if (key === 'onl_watch') {
+            $message.error('参数名称不能是onl_watch');
+            return
+          }
+        }
+      }
+
+      setModalProps({ confirmLoading: true });
+      if (isUpdate.value) {
+        let allFieldsValue = getFieldsValue();
+        // 编辑页面 如果表单没有父级下拉框 则提交时候 validate方法不返该值 需要手动设置
+        if (!formValue.parentId && allFieldsValue.parentId) {
+          formValue.parentId = allFieldsValue.parentId;
+        }
+        await updateFillRule(formValue);
+      } else {
+        await saveFillRule(formValue);
+      }
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/fillRule/fill.rule.api.ts b/src/views/system/fillRule/fill.rule.api.ts
new file mode 100644
index 0000000..1348a12
--- /dev/null
+++ b/src/views/system/fillRule/fill.rule.api.ts
@@ -0,0 +1,83 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/fillRule/list',
+  test = '/sys/fillRule/testFillRule',
+  save = '/sys/fillRule/add',
+  edit = '/sys/fillRule/edit',
+  delete = '/sys/fillRule/delete',
+  deleteBatch = '/sys/fillRule/deleteBatch',
+  exportXls = '/sys/fillRule/exportXls',
+  importExcel = '/sys/fillRule/importExcel',
+}
+
+/**
+ * 导出地址
+ */
+export const exportUrl = Api.exportXls;
+/**
+ * 导入地址
+ */
+export const importUrl = Api.importExcel;
+
+/**
+ * 列表查询
+ * @param params
+ */
+export const getFillRuleList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 删除
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteFillRule = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDeleteFillRule = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 规则功能测试
+ * @param params
+ */
+export const handleTest = (params) => {
+  return defHttp.get({ url: Api.test, params }, { isTransformResponse: false });
+};
+
+/**
+ * 保存
+ * @param params
+ */
+export const saveFillRule = (params) => {
+  return defHttp.post({ url: Api.save, params });
+};
+
+/**
+ * 更新
+ * @param params
+ */
+export const updateFillRule = (params) => {
+  return defHttp.put({ url: Api.edit, params });
+};
diff --git a/src/views/system/fillRule/fill.rule.data.ts b/src/views/system/fillRule/fill.rule.data.ts
new file mode 100644
index 0000000..f249163
--- /dev/null
+++ b/src/views/system/fillRule/fill.rule.data.ts
@@ -0,0 +1,112 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { duplicateCheckDelay } from '/@/views/system/user/user.api';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 200,
+    align: 'center',
+  },
+  {
+    title: '规则编码',
+    dataIndex: 'ruleCode',
+    width: 200,
+    align: 'center',
+  },
+  {
+    title: '规则实现类',
+    dataIndex: 'ruleClass',
+    width: 300,
+    align: 'center',
+  },
+  {
+    title: '规则参数',
+    dataIndex: 'ruleParams',
+    width: 200,
+    align: 'center',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'ruleCode',
+    label: '规则编码',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+    colProps: { span: 24 },
+  },
+  {
+    field: 'ruleCode',
+    label: '规则编码',
+    component: 'Input',
+    colProps: { span: 24 },
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ model }) => {
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            return new Promise((resolve, reject) => {
+              if (!value) {
+                return reject('请输入规则编码！');
+              }
+              let params = {
+                tableName: 'sys_fill_rule',
+                fieldName: 'rule_code',
+                fieldVal: value,
+                dataId: model.id,
+              };
+              duplicateCheckDelay(params)
+                .then((res) => {
+                  res.success ? resolve() : reject('规则编码已存在!');
+                })
+                .catch((err) => {
+                  reject(err.message || '校验失败');
+                });
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'ruleClass',
+    label: '规则实现类',
+    component: 'Input',
+    required: true,
+    colProps: { span: 24 },
+  },
+  {
+    field: 'ruleParams',
+    label: '规则参数',
+    colProps: { span: 24 },
+    component: 'JAddInput',
+    componentProps: {
+      min: 0,
+    },
+  },
+];
diff --git a/src/views/system/fillRule/index.vue b/src/views/system/fillRule/index.vue
new file mode 100644
index 0000000..93d5e1c
--- /dev/null
+++ b/src/views/system/fillRule/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div :class="prefixCls">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <FillRuleModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+
+<script name="system-fillrule" lang="ts" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getFillRuleList, exportUrl, importUrl, deleteFillRule, batchDeleteFillRule, handleTest } from '/@/views/system/fillRule/fill.rule.api';
+  import { columns, searchFormSchema } from '/@/views/system/fillRule/fill.rule.data';
+  import { useModal } from '/@/components/Modal';
+  import { ActionItem } from '/@/components/Table';
+  const [registerModal, { openModal }] = useModal();
+  import FillRuleModal from '/@/views/system/fillRule/FillRuleModal.vue';
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, createMessage, createSuccessModal, onExportXls, onImportXls } = useListPage({
+    designScope: 'fill-rule',
+    tableProps: {
+      title: '填值规则管理页面',
+      api: getFillRuleList,
+      columns: columns,
+      showIndexColumn: true,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+    },
+    exportConfig: {
+      url: exportUrl,
+      name: '填值规则列表',
+    },
+    importConfig: {
+      url: importUrl,
+      success: () => reload(),
+    },
+  });
+  // 注册 ListTable
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    console.log('record....', record);
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    console.log(12345, record);
+    await deleteFillRule({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteFillRule({ ids: selectedRowKeys.value }, () => {
+      selectedRowKeys.value = [];
+      reload();
+    });
+  }
+
+  /**
+   * 功能测试
+   */
+  function testRule(record) {
+    let params = { ruleCode: record.ruleCode };
+    handleTest(params).then((res) => {
+      if (res.success) {
+        createSuccessModal({
+          title: '填值规则功能测试',
+          content: '生成结果：' + res.result,
+        });
+      } else {
+        createMessage.warn(res.message);
+      }
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function getTableAction(record): ActionItem[] {
+    return [{ label: '编辑', onClick: handleEdit.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      { label: '功能测试', onClick: testRule.bind(null, record) },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '确认要删除吗？',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/homeConfig/components/HomeConfigModal.vue b/src/views/system/homeConfig/components/HomeConfigModal.vue
new file mode 100644
index 0000000..c33b974
--- /dev/null
+++ b/src/views/system/homeConfig/components/HomeConfigModal.vue
@@ -0,0 +1,68 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="首页配置" @ok="handleSubmit" :width="600">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../home.data';
+  import { saveOrUpdate } from '../home.api';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(false);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    baseRowStyle: { marginTop: '10px' },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      const record = {...data.values}
+      //表单赋值
+      if (record.relationType == 'USER') {
+        record.userCode = record.roleCode;
+      }
+      //表单赋值
+      if (record.relationType == 'DEFAULT') {
+        record.roleCode = '';
+      }
+      await setFieldsValue({
+        ...record,
+      });
+    }
+  });
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      if(values.relationType == 'USER'){
+        values.roleCode = values.userCode;
+      }
+      if(values.relationType == 'DEFAULT'){
+        values.roleCode = 'DEF_INDEX_ALL';
+      }
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/homeConfig/home.api.ts b/src/views/system/homeConfig/home.api.ts
new file mode 100644
index 0000000..0f9600a
--- /dev/null
+++ b/src/views/system/homeConfig/home.api.ts
@@ -0,0 +1,55 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/sysRoleIndex/list',
+  save = '/sys/sysRoleIndex/add',
+  edit = '/sys/sysRoleIndex/edit',
+  deleteIndex = '/sys/sysRoleIndex/delete',
+  deleteBatch = '/sys/sysRoleIndex/deleteBatch',
+  queryIndexByCode = '/sys/sysRoleIndex/queryByCode',
+}
+/**
+ * 系统角色列表
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除角色
+ */
+export const deleteIndex = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteIndex, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除角色
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新首页配置
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 查询首页配置
+ * @param params
+ */
+export const queryIndexByCode = (params) => defHttp.get({ url: Api.queryIndexByCode, params }, { isTransformResponse: false });
diff --git a/src/views/system/homeConfig/home.data.ts b/src/views/system/homeConfig/home.data.ts
new file mode 100644
index 0000000..86562ad
--- /dev/null
+++ b/src/views/system/homeConfig/home.data.ts
@@ -0,0 +1,129 @@
+import { FormSchema } from '/@/components/Table';
+
+//列配置
+export const columns = [
+  {
+    title: '关联类型(用户/角色)',
+    dataIndex: 'relationType_dictText',
+    width: 80,
+    slots: { customRender: 'relationType' },
+  },
+  {
+    title: '用户/角色编码',
+    dataIndex: 'roleCode',
+    width: 80,
+    slots: { customRender: 'roleCode' },
+  },
+  {
+    title: '首页路由',
+    dataIndex: 'url',
+    width: 100,
+  },
+  {
+    title: '组件地址',
+    dataIndex: 'component',
+    width: 100,
+  },
+  {
+    title: '是否开启',
+    dataIndex: 'status',
+    slots: { customRender: 'status' },
+    width: 60,
+  },
+];
+//查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'relationType',
+    label: '关联类型',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'relation_type',
+    },
+  },
+  {
+    field: 'route',
+    label: '是否路由菜单',
+    helpMessage: '非路由菜单设置成首页，需开启',
+    component: 'Switch',
+    show: false,
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'relationType',
+    label: '关联类型',
+    component: 'JDictSelectTag',
+    required: true,
+    defaultValue: 'ROLE',
+    componentProps: {
+      dictCode: 'relation_type',
+      type: 'radioButton',
+    },
+  },
+  {
+    label: '角色编码',
+    field: 'roleCode',
+    component: 'JSelectRole',
+    required: true,
+    componentProps: {
+      rowKey: 'roleCode',
+      isRadioSelection: true,
+    },
+    ifShow: ({ values }) => values.relationType == 'ROLE',
+  },
+  {
+    label: '用户编码',
+    field: 'userCode',
+    component: 'JSelectUser',
+    required: true,
+    componentProps: {
+      isRadioSelection: true,
+    },
+    ifShow: ({ values }) => values.relationType == 'USER',
+  },
+  {
+    label: '首页路由',
+    field: 'url',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '组件地址',
+    field: 'component',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入前端组件',
+    },
+    required: true,
+  },
+  {
+    label: '优先级',
+    field: 'priority',
+    component: 'InputNumber',
+  },
+  {
+    field: 'route',
+    label: '是否路由菜单',
+    helpMessage: '非路由菜单设置成首页，需开启',
+    component: 'Switch',
+    defaultValue: true,
+    show: false,
+  },
+  {
+    label: '是否开启',
+    field: 'status',
+    component: 'JSwitch',
+    defaultValue: '1',
+    componentProps: {
+      options: ['1', '0'],
+    },
+  },
+];
diff --git a/src/views/system/homeConfig/index.vue b/src/views/system/homeConfig/index.vue
new file mode 100644
index 0000000..93cfbdb
--- /dev/null
+++ b/src/views/system/homeConfig/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate">新增</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" /> 删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>批量操作<Icon icon="mdi:chevron-down" /></a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template #status="{ text }">
+        <a-tag color="pink" v-if="text == 0">禁用</a-tag>
+        <a-tag color="#87d068" v-if="text == 1">启用</a-tag>
+      </template>
+      <template #relationType="{ text, record }">
+        <span>{{ record.roleCode == 'DEF_INDEX_ALL' ? '全局默认' : text }}</span>
+      </template>
+      <template #roleCode="{ text, record }">
+        <span>{{ record.roleCode == 'DEF_INDEX_ALL' ? '菜单默认首页' : text }}</span>
+      </template>
+    </BasicTable>
+    <!--角色首页配置-->
+    <HomeConfigModal @register="register" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="home-config" setup>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import HomeConfigModal from './components/HomeConfigModal.vue';
+  import { columns, searchFormSchema } from './home.data';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { list, deleteIndex, batchDelete } from './home.api';
+
+  //弹窗配置
+  const [register, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    designScope: 'home-config',
+    tableProps: {
+      title: '首页配置',
+      api: list,
+      columns: columns,
+      formConfig: {
+        labelAlign: 'left',
+        labelWidth: 80,
+        schemas: searchFormSchema,
+        baseRowStyle: {
+          marginLeft: '2px',
+        },
+      },
+      actionColumn: {
+        width: 80,
+      },
+      //自定义默认排序
+      defSort: {
+        column: 'id',
+        order: 'desc',
+      },
+    },
+  });
+  const [registerTable, { reload, clearSelectedRowKeys }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  async function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  async function handleEdit(record) {
+    openModal(true, {
+      isUpdate: true,
+      values: record,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteIndex({ id: record.id }, () => {
+      reload();
+    });
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, () => {
+      clearSelectedRowKeys();
+      reload();
+    });
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/loginmini/MiniCodelogin.vue b/src/views/system/loginmini/MiniCodelogin.vue
new file mode 100644
index 0000000..bb9989e
--- /dev/null
+++ b/src/views/system/loginmini/MiniCodelogin.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="aui-content">
+    <div class="aui-container">
+      <div class="aui-form">
+        <div class="aui-image">
+          <div class="aui-image-text">
+            <img :src="adTextImg" alt="" />
+          </div>
+        </div>
+        <div class="aui-formBox aui-formEwm">
+          <div class="aui-formWell">
+            <form>
+              <div class="aui-flex aui-form-nav investment_title" style="padding-bottom: 19px">
+                <div class="aui-flex-box activeNav">{{t('sys.login.qrSignInFormTitle')}}</div>
+              </div>
+              <div class="aui-form-box">
+                <div class="aui-account" style="padding: 30px 0">
+                  <div class="aui-ewm">
+                    <QrCode :value="qrCodeUrl" class="enter-x flex justify-center xl:justify-start" :width="280" />
+                  </div>
+                </div>
+              </div>
+              <div class="aui-formButton">
+                <a class="aui-linek-code aui-link-register" @click="goBackHandleClick">{{t('sys.login.backSignIn')}}</a>
+              </div>
+            </form>
+          </div>
+          <div class="aui-flex aui-third-text">
+            <div class="aui-flex-box aui-third-border">
+              <span>{{ t('sys.login.otherSignIn') }}</span>
+            </div>
+          </div>
+          <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
+            <div class="aui-flex-box">
+              <div class="aui-third-login">
+                <a href="" title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
+              </div>
+            </div>
+            <div class="aui-flex-box">
+              <div class="aui-third-login">
+                <a href="" title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
+              </div>
+            </div>
+            <div class="aui-flex-box">
+              <div class="aui-third-login">
+                <a href="" title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
+              </div>
+            </div>
+            <div class="aui-flex-box">
+              <div class="aui-third-login">
+                <a href="" title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 第三方登录相关弹框 -->
+  <ThirdModal ref="thirdModalRef"></ThirdModal>
+</template>
+
+<script lang="ts" setup name="mini-code-login">
+  import { ref, onUnmounted } from 'vue';
+  import { getLoginQrcode, getQrcodeToken } from '/@/api/sys/user';
+  import { useUserStore } from '/@/store/modules/user';
+  import { QrCode } from '/@/components/Qrcode/index';
+  import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
+  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
+  import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from "/@/hooks/web/useDesign";
+  import { GithubFilled, WechatFilled, DingtalkCircleFilled } from '@ant-design/icons-vue';
+  import { IconFont } from '/@/utils/iconfont2';
+
+  const { prefixCls } = useDesign('minilogin');
+  const { t } = useI18n();
+  const qrCodeUrl = ref<string>('');
+  let timer: IntervalHandle;
+  const state = ref('0');
+  const thirdModalRef = ref();
+  const userStore = useUserStore();
+  const emit = defineEmits(['go-back', 'success', 'register']);
+
+  //加载二维码信息
+  function loadQrCode() {
+    state.value = '0';
+    getLoginQrcode().then((res) => {
+      qrCodeUrl.value = res.qrcodeId;
+      if (res.qrcodeId) {
+        openTimer(res.qrcodeId);
+      }
+    });
+  }
+  //监控扫码状态
+  function watchQrcodeToken(qrcodeId) {
+    getQrcodeToken({ qrcodeId: qrcodeId }).then((res) => {
+      let token = res.token;
+      if (token == '-2') {
+        //二维码过期重新获取
+        loadQrCode();
+        clearInterval(timer);
+      }
+      //扫码成功
+      if (res.success) {
+        state.value = '2';
+        clearInterval(timer);
+        setTimeout(() => {
+          userStore.qrCodeLogin(token);
+        }, 500);
+      }
+    });
+  }
+
+  /** 开启定时器 */
+  function openTimer(qrcodeId) {
+    watchQrcodeToken(qrcodeId);
+    closeTimer();
+    timer = setInterval(() => {
+      watchQrcodeToken(qrcodeId);
+    }, 1500);
+  }
+
+  /** 关闭定时器 */
+  function closeTimer() {
+    if (timer) clearInterval(timer);
+  }
+
+  /**
+   * 第三方登录
+   * @param type
+   */
+  function onThirdLogin(type) {
+    thirdModalRef.value.onThirdLogin(type);
+  }
+
+  /**
+   * 初始化表单
+   */
+  function initFrom() {
+    loadQrCode();
+  }
+
+  /**
+   * 返回
+   */
+  function goBackHandleClick() {
+    emit('go-back');
+    closeTimer();
+  }
+
+  onUnmounted(() => {
+    closeTimer();
+  });
+
+  defineExpose({
+    initFrom,
+  });
+</script>
+<style lang="less" scoped>
+@import '/@/assets/loginmini/style/home.less';
+@import '/@/assets/loginmini/style/base.less';
+</style>
diff --git a/src/views/system/loginmini/MiniForgotpad.vue b/src/views/system/loginmini/MiniForgotpad.vue
new file mode 100644
index 0000000..6a02b93
--- /dev/null
+++ b/src/views/system/loginmini/MiniForgotpad.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="aui-content">
+    <div class="aui-container">
+      <div class="aui-form">
+        <div class="aui-image">
+          <div class="aui-image-text">
+            <img :src="adTextImg" alt="" />
+          </div>
+        </div>
+        <div class="aui-formBox">
+          <div class="aui-formWell">
+            <div class="aui-step-box">
+              <div class="aui-step-item" :class="activeKey === 1 ? 'activeStep' : ''">
+                <div class="aui-step-tags">
+                  <em>1</em>
+                  <p>{{t('sys.login.authentication')}}</p>
+                </div>
+              </div>
+              <div class="aui-step-item" :class="activeKey === 2 ? 'activeStep' : ''">
+                <div class="aui-step-tags">
+                  <em>2</em>
+                  <p>{{t('sys.login.resetLoginPassword')}}</p>
+                </div>
+              </div>
+              <div class="aui-step-item" :class="activeKey === 3 ? 'activeStep' : ''">
+                <div class="aui-step-tags">
+                  <em>3</em>
+                  <p>{{t('sys.login.resetSuccess')}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="" style="height: 230px; position: relative">
+              <a-form ref="formRef" :model="formData" v-if="activeKey === 1">
+                <!-- 身份验证 begin -->
+                <div class="aui-account aui-account-line aui-forgot">
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <a-input type="text" :placeholder="t('sys.login.mobile')" v-model:value="formData.mobile" />
+                    </div>
+                  </a-form-item>
+                  <div class="aui-input-line">
+                    <a-form-item>
+                      <a-input type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" />
+                    </a-form-item>
+                    <div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div>
+                    <div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</div>
+                  </div>
+                </div>
+                <!-- 身份验证 end -->
+              </a-form>
+              <a-form ref="pwdFormRef" :model="pwdFormData" v-else-if="activeKey === 2">
+                <!-- 重置密码 begin -->
+                <div class="aui-account aui-account-line aui-forgot">
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <a-input type="password" :placeholder="t('sys.login.passwordPlaceholder')" v-model:value="pwdFormData.password" />
+                    </div>
+                  </a-form-item>
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <a-input type="password" :placeholder="t('sys.login.confirmPassword')" v-model:value="pwdFormData.confirmPassword" />
+                    </div>
+                  </a-form-item>
+                </div>
+                <!-- 重置密码 end -->
+              </a-form>
+                <!-- 重置成功 begin -->
+                <div class="aui-success" v-else>
+                  <div class="aui-success-icon">
+                    <img :src="successImg"/>
+                  </div>
+                  <h3>恭喜您，重置密码成功！</h3>
+                </div>
+                <!-- 重置成功 end -->
+            </div>
+            <div class="aui-formButton" style="padding-bottom: 40px">
+              <div class="aui-flex" v-if="activeKey === 1 || activeKey === 2">
+                <a class="aui-link-login aui-flex-box" @click="nextStepClick">{{t('sys.login.nextStep')}}</a>
+              </div>
+              <div class="aui-flex" v-else>
+                <a class="aui-linek-code aui-flex-box" @click="toLogin">{{t('sys.login.goToLogin')}}</a>
+              </div>
+              <div class="aui-flex">
+                <a class="aui-linek-code aui-flex-box" @click="goBack"> {{ t('sys.login.backSignIn') }}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+</template>
+<script lang="ts" name="mini-forgotpad" setup>
+  import { reactive, ref, toRaw, unref } from 'vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { SmsEnum, useFormRules, useFormValid, useLoginState } from '/@/views/sys/login/useLogin';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getCaptcha, passwordChange, phoneVerify } from '/@/api/sys/user';
+  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png'
+  import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'
+  import successImg from '/@/assets/loginmini/icon/icon-success.png'
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+
+  //下一步控制
+  const activeKey = ref<number>(1);
+  const { t } = useI18n();
+  const { handleBackLogin } = useLoginState();
+  const { notification, createMessage, createErrorModal } = useMessage();
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  const formRef = ref();
+  const pwdFormRef = ref();
+  //账号数据
+  const accountInfo = reactive<any>({});
+  //手机号表单
+  const formData = reactive({
+    mobile: '',
+    smscode: '',
+  });
+  //密码表单
+  const pwdFormData = reactive<any>({
+    password: '',
+    confirmPassword: '',
+  });
+  const emit = defineEmits(['go-back', 'success', 'register']);
+
+  /**
+   * 下一步
+   */
+  async function handleNext() {
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    if (!formData.smscode) {
+      createMessage.warn(t('sys.login.smsPlaceholder'));
+      return;
+    }
+    const resultInfo = await phoneVerify(
+      toRaw({
+        phone: formData.mobile,
+        smscode: formData.smscode,
+      })
+    );
+    if (resultInfo.success) {
+      Object.assign(accountInfo, {
+        username: resultInfo.result.username,
+        phone: formData.mobile,
+        smscode: formData.smscode,
+      });
+      activeKey.value = 2;
+      setTimeout(()=>{
+        pwdFormRef.value.resetFields();
+      },300)
+    } else {
+      notification.error({
+        message: '错误提示',
+        description: resultInfo.message || t('sys.api.networkExceptionMsg'),
+        duration: 3,
+      });
+    }
+  }
+
+  /**
+   * 完成修改密码
+   */
+  async function finishedPwd() {
+    if (!pwdFormData.password) {
+      createMessage.warn(t('sys.login.passwordPlaceholder'));
+      return;
+    }
+    if (!pwdFormData.confirmPassword) {
+      createMessage.warn(t('sys.login.confirmPassword'));
+      return;
+    }
+    if (pwdFormData.password !== pwdFormData.confirmPassword) {
+      createMessage.warn(t('sys.login.diffPwd'));
+      return;
+    }
+    const resultInfo = await passwordChange(
+      toRaw({
+        username: accountInfo.username,
+        password: pwdFormData.password,
+        smscode: accountInfo.smscode,
+        phone: accountInfo.phone,
+      })
+    );
+    if (resultInfo.success) {
+      accountInfo.password = pwdFormData.password;
+      //修改密码
+      activeKey.value = 3;
+    } else {
+      //错误提示
+      createErrorModal({
+        title: t('sys.api.errorTip'),
+        content: resultInfo.message || t('sys.api.networkExceptionMsg'),
+      });
+    }
+  }
+  /**
+   * 下一步
+   */
+  function nextStepClick() {
+    if (unref(activeKey) == 1) {
+      handleNext();
+    } else if (unref(activeKey) == 2) {
+      finishedPwd();
+    }
+  }
+
+  /**
+   * 去登录
+   */
+  function toLogin() {
+    emit('success', { username: accountInfo.username, password: accountInfo.password });
+    initForm();
+  }
+
+  /**
+   * 返回
+   */
+  function goBack() {
+    emit('go-back');
+    initForm();
+  }
+
+  /**
+   * 获取手机验证码
+   */
+  async function getLoginCode() {
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    // 代码逻辑说明: 【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD }).catch((res) =>{
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  /**
+   * 初始化表单
+   */
+  function initForm() {
+    activeKey.value = 1;
+    Object.assign(formData, { phone: '', smscode: '' });
+    Object.assign(pwdFormData, { password: '', confirmPassword: '' });
+    Object.assign(accountInfo, {});
+    if(unref(timer)){
+      clearInterval(unref(timer));
+      timer.value = null;
+      showInterval.value = true;
+    }
+    setTimeout(()=>{
+      formRef.value.resetFields();
+    },300)
+  }
+
+  defineExpose({
+    initForm,
+  });
+</script>
+<style lang="less" scoped>
+@import '/@/assets/loginmini/style/home.less';
+@import '/@/assets/loginmini/style/base.less';
+</style>
diff --git a/src/views/system/loginmini/MiniLogin.vue b/src/views/system/loginmini/MiniLogin.vue
new file mode 100644
index 0000000..25d0394
--- /dev/null
+++ b/src/views/system/loginmini/MiniLogin.vue
@@ -0,0 +1,722 @@
+<template>
+  <div :class="prefixCls" class="login-background-img">
+    <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
+    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
+    <div class="aui-logo" v-if="!getIsMobile">
+      <div>
+        <h3>
+          <img :src="logoImg" alt="jeecg" />
+        </h3>
+      </div>
+    </div>
+    <div v-else class="aui-phone-logo">
+      <img :src="logoImg" alt="jeecg" />
+    </div>
+    <div v-show="type === 'login'">
+      <div class="aui-content">
+        <div class="aui-container">
+          <div class="aui-form">
+            <div class="aui-image">
+              <div class="aui-image-text">
+                <img :src="adTextImg" />
+              </div>
+            </div>
+            <div class="aui-formBox">
+              <div class="aui-formWell">
+                <div class="aui-flex aui-form-nav investment_title">
+                  <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
+                    >{{ t('sys.login.signInFormTitle') }}
+                  </div>
+                  <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
+                    >{{ t('sys.login.mobileSignInFormTitle') }}
+                  </div>
+                </div>
+                <div class="aui-form-box" style="height: 240px">
+                  <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
+                    <div class="aui-account">
+                      <div class="aui-inputClear">
+                        <i class="icon icon-code"></i>
+                        <a-form-item>
+                          <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
+                        </a-form-item>
+                      </div>
+                      <div class="aui-inputClear">
+                        <i class="icon icon-password"></i>
+                        <a-form-item>
+                          <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
+                        </a-form-item>
+                      </div>
+                      <div class="aui-inputClear">
+                        <i class="icon icon-code"></i>
+                        <a-form-item>
+                          <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
+                        </a-form-item>
+                        <div class="aui-code">
+                          <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
+                          <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
+                        </div>
+                      </div>
+                      <div class="aui-inputClear" v-if="showDepart">
+                        <i class="icon icon-depart"></i>
+                        <div class="JLoginSelectDept">
+                          <a-select allow-clear style="width: 100%" :bordered="false" v-model:value="formData.loginOrgCode" :placeholder="t('sys.login.loginOrgCode')">
+                            <template #suffixIcon>
+                              <Icon icon="ant-design:gold-outline" />
+                            </template>
+                            <template v-for="depart in departList" :key="depart.orgCode">
+                              <a-select-option :value="depart.orgCode">{{ getShortDeptName(depart.label) }}</a-select-option>
+                            </template>
+                          </a-select>
+                        </div>
+                      </div>
+                      <div class="aui-flex">
+                        <div class="aui-flex-box">
+                          <div class="aui-choice">
+                            <a-checkbox v-model:checked="rememberMe">{{ t('sys.login.rememberMe') }}</a-checkbox>
+                          </div>
+                        </div>
+                        <div class="aui-forget">
+                          <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a>
+                        </div>
+                      </div>
+                    </div>
+                  </a-form>
+                  <a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
+                    <div class="aui-account phone">
+                      <div class="aui-inputClear phoneClear">
+                        <a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
+                      </div>
+                      <div class="aui-inputClear">
+                        <a-input class="fix-auto-fill" :maxlength="6" :placeholder="t('sys.login.smsCode')" v-model:value="phoneFormData.smscode" />
+                        <div v-if="showInterval" class="aui-code" @click="getLoginCode">
+                          <a>{{ t('component.countdown.normalText') }}</a>
+                        </div>
+                        <div v-else class="aui-code">
+                          <span class="aui-get-code code-shape">{{ t('component.countdown.sendText', [unref(timeRuning)]) }}</span>
+                        </div>
+                      </div>
+                      <div class="aui-inputClear" v-if="showDepart">
+                        <div class="JLoginSelectDept">
+                          <a-select allow-clear style="width: 100%" :bordered="false" v-model:value="phoneFormData.loginOrgCode" :placeholder="t('sys.login.loginOrgCode')">
+                            <template #suffixIcon>
+                              <Icon icon="ant-design:gold-outline" />
+                            </template>
+                            <template v-for="depart in departList" :key="depart.orgCode">
+                              <a-select-option :value="depart.orgCode">{{ getShortDeptName(depart.label) }}</a-select-option>
+                            </template>
+                          </a-select>
+                        </div>
+                      </div>
+                    </div>
+                  </a-form>
+                </div>
+                <div class="aui-formButton">
+                  <div class="aui-flex">
+                    <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
+                      {{ t('sys.login.loginButton') }}</a-button>
+                  </div>
+                  <div class="aui-flex">
+                    <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
+                  </div>
+                  <div class="aui-flex">
+                    <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
+                  </div>
+                </div>
+              </div>
+              <a-form @keyup.enter.native="loginHandleClick">
+                <div class="aui-flex aui-third-text">
+                  <div class="aui-flex-box aui-third-border">
+                    <span>{{ t('sys.login.otherSignIn') }}</span>
+                  </div>
+                </div>
+                <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
+                  <div class="aui-flex-box">
+                    <div class="aui-third-login">
+                      <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
+                    </div>
+                  </div>
+                  <div class="aui-flex-box">
+                    <div class="aui-third-login">
+                      <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
+                    </div>
+                  </div>
+                  <div class="aui-flex-box">
+                    <div class="aui-third-login">
+                      <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
+                    </div>
+                  </div>
+                  <div class="aui-flex-box">
+                    <div class="aui-third-login">
+                      <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
+                    </div>
+                  </div>
+                </div>
+              </a-form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="forgotLoaded" v-show="type === 'forgot'" :class="`${prefixCls}-form`">
+      <MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
+    </div>
+    <div v-if="registerLoaded" v-show="type === 'register'" :class="`${prefixCls}-form`">
+      <MiniRegister ref="registerRef" @go-back="goBack" @success="handleSuccess" />
+    </div>
+    <div v-if="codeLoginLoaded" v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
+      <MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
+    </div>
+    <!-- 第三方登录相关弹框 -->
+    <ThirdModal ref="thirdModalRef"></ThirdModal>
+
+    <!-- 图片验证码弹窗 -->
+    <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+  </div>
+</template>
+<script lang="ts" setup name="login-mini">
+  import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
+  import { computed, defineAsyncComponent, onMounted, reactive, ref, toRaw, unref, watch } from 'vue';
+  import codeImg from '/@/assets/images/checkcode.png';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { SmsEnum } from '/@/views/sys/login/useLogin';
+  import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
+  const MiniForgotpad = defineAsyncComponent(() => import('./MiniForgotpad.vue'));
+  const MiniRegister = defineAsyncComponent(() => import('./MiniRegister.vue'));
+  const MiniCodelogin = defineAsyncComponent(() => import('./MiniCodelogin.vue'));
+  import logoImg from '/@/assets/images/ghb-logo.svg';
+  import adTextImg from '/@/assets/loginmini/icon/ghb_ad_text.svg';
+  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { createLocalStorage } from '/@/utils/cache';
+  import { useDesign } from "/@/hooks/web/useDesign";
+  import { useAppInject } from "/@/hooks/web/useAppInject";
+  import { GithubFilled, WechatFilled, DingtalkCircleFilled } from '@ant-design/icons-vue';
+  import '/@/utils/iconfont2';
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+  import { encryptAESCBC } from '/@/utils/cipher';
+  import { defHttp } from "@/utils/http/axios";
+  import { IconFont } from '/@/utils/iconfont2';
+
+  const { prefixCls } = useDesign('mini-login');
+  const { notification, createMessage } = useMessage();
+  const userStore = useUserStore();
+  const { t } = useI18n();
+  const $ls = createLocalStorage();
+  const localeStore = useLocaleStore();
+  const showLocale = localeStore.getShowPicker;
+  const randCodeData = reactive<any>({
+    randCodeImage: '',
+    requestCodeSuccess: false,
+    checkKey: null,
+  });
+  // 记住用户名
+  const rememberMe = ref<boolean>(false);
+  const REMEMBER_USERNAME_KEY = 'LOGIN_REMEMBER_USERNAME';
+  //手机号登录还是账号登录
+  const activeIndex = ref<string>('accountLogin');
+  const type = ref<string>('login');
+  //账号登录表单字段
+  const formData = reactive<any>({
+    inputCode: '',
+    username: 'admin',
+    password: '123456',
+    loginOrgCode: '',
+  });
+  //手机登录表单字段
+  const phoneFormData = reactive<any>({
+    mobile: '',
+    smscode: '',
+    loginOrgCode: '',
+  });
+  const loginRef = ref();
+  //第三方登录弹窗
+  const thirdModalRef = ref();
+  //扫码登录
+  const codeRef = ref();
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  //忘记密码
+  const forgotRef = ref();
+  //注册
+  const registerRef = ref();
+  const loginLoading = ref<boolean>(false);
+  // 以下三个组件懒加载控制标志位，点击时才挂载
+  const forgotLoaded = ref<boolean>(false);
+  const registerLoaded = ref<boolean>(false);
+  const codeLoginLoaded = ref<boolean>(false);
+  const { getIsMobile } = useAppInject();
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+  defineProps({
+    sessionTimeout: {
+      type: Boolean,
+    },
+  });
+ //**********************查询部门逻辑begin**********************************************
+  //用户部门
+  const departList = ref([]);
+  //部门显示
+  const showDepart = computed(()=>{
+    return departList.value.length > 1
+  })
+  //获取部门缩写
+  const getShortDeptName = computed(()=>{
+    return (deptName) => {
+      if (!deptName) return '';
+      if (deptName.length > 18) {
+        return '...' + deptName.substring(deptName.length-18, deptName.length) ;
+      }
+      return deptName;
+    };
+  })
+  //监听验证码和输入框的修改
+  watch(
+      () => [formData.inputCode, phoneFormData.smscode],
+      () => {
+        if ((formData.inputCode && formData.inputCode.length == 4)
+            || (phoneFormData.smscode && phoneFormData.smscode.length == 6)) {
+            checkAccount()
+        }
+      },
+  );
+  /**
+   * 监听账号变化，清除部门信息
+   */
+  watch(
+      () => [formData.username,phoneFormData.mobile,activeIndex.value],
+      () => {
+        formData.loginOrgCode = null;
+        phoneFormData.loginOrgCode = null;
+        departList.value = [];
+        if ((formData.inputCode && formData.inputCode.length == 4)
+            || (phoneFormData.smscode && phoneFormData.smscode.length == 6)) {
+          checkAccount()
+        }
+      }
+  );
+
+  //初始化数据
+  let deptTimer;
+  function checkAccount() {
+    deptTimer && clearTimeout(deptTimer);
+    deptTimer = setTimeout(async () => {
+      let loginType = activeIndex.value === 'accountLogin' ? 'account' : 'phone';
+      // 验证条件提取
+      const isValidAccount = loginType === 'account' && formData.username && formData.password;
+      const isValidPhone = loginType == 'phone' && phoneFormData.mobile && phoneFormData.smscode;
+      let finalFormData = loginType == 'phone' ? {...phoneFormData} : {...formData};
+      if (!isValidAccount && !isValidPhone) {
+        return;
+      }
+      //查询部门信息前，优先进行账户校验
+      if (departList.value && departList.value.length == 0) {
+        let params = {...finalFormData, loginType: activeIndex.value === 'accountLogin' ? 'account' : 'phone'};
+        if (loginType == 'account') {
+          params['password'] = encryptAESCBC(formData.password);
+          params['checkKey'] = randCodeData.checkKey;
+        }
+        const res = await defHttp.post({
+          url: '/sys/loginGetUserDeparts',
+          params: {...params}
+        }, {isTransformResponse: false});
+        if (res.success && res.result) {
+          let {departs,currentOrgCode} = res.result;
+          // 判断当前部门是否在所属的部门列表中
+          if (departs && departs.length > 0) {
+            // 代码逻辑说明: JHHB-790 用户部门变更，会出现这个情况（因为之前设置的这里只切换部门，过滤了公司和岗位信息）
+            const hasCurrentDepart = departs.some(item => item.orgCode == currentOrgCode);
+            formData.loginOrgCode = hasCurrentDepart?currentOrgCode:null;
+            phoneFormData.loginOrgCode = hasCurrentDepart?currentOrgCode:null;
+            departList.value = departs.map((item) => {
+              return {
+                label: item.departName,
+                value: item.orgCode,
+                orgCode: item.orgCode,
+                departName: item.departName,
+              };
+            });
+          }
+        } else {
+          //createMessage.warn(res.message);
+        }
+      }
+    },500)
+  }
+ //**********************查询部门逻辑end*************************************************
+  /**
+   * 获取验证码
+   */
+  function handleChangeCheckCode() {
+    formData.inputCode = '';
+    // 代码逻辑说明: [QQYUN-10775]验证码可以复用 #7674------------
+    randCodeData.checkKey = new Date().getTime() + Math.random().toString(36).slice(-4); // 1629428467008;
+    getCodeInfo(randCodeData.checkKey).then((res) => {
+      randCodeData.randCodeImage = res;
+      randCodeData.requestCodeSuccess = true;
+    });
+  }
+
+  /**
+   * 切换登录方式
+   */
+  function loginClick(type) {
+    activeIndex.value = type;
+  }
+
+  /**
+   * 账号或者手机登录
+   */
+  async function loginHandleClick() {
+    if (unref(activeIndex) === 'accountLogin') {
+      accountLogin();
+    } else {
+      //手机号登录
+      phoneLogin();
+    }
+  }
+
+  async function accountLogin() {
+    if (!formData.username) {
+      createMessage.warn(t('sys.login.accountPlaceholder'));
+      return;
+    }
+    if (!formData.password) {
+      createMessage.warn(t('sys.login.passwordPlaceholder'));
+      return;
+    }
+    try {
+      loginLoading.value = true;
+
+      // 密码使用AES加密传输
+      const encryptedPassword = encryptAESCBC(formData.password);
+      const { userInfo } = await userStore.login(
+        toRaw({
+          password: encryptedPassword,
+          username: formData.username,
+          loginOrgCode: formData.loginOrgCode,
+          captcha: formData.inputCode,
+          checkKey: randCodeData.checkKey,
+          mode: 'none', //不要默认的错误提示
+        })
+      );
+      if (userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+          duration: 3,
+        });
+        // 登录成功后处理记住用户名
+        if (rememberMe.value && formData.username) {
+          $ls.set(REMEMBER_USERNAME_KEY, formData.username)
+        } else {
+          $ls.remove(REMEMBER_USERNAME_KEY)
+        }
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.login.networkExceptionMsg'),
+        duration: 3,
+      });
+      handleChangeCheckCode();
+    } finally {
+      loginLoading.value = false;
+    }
+  }
+
+  /**
+   * 手机号登录
+   */
+  async function phoneLogin() {
+    if (!phoneFormData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    if (!phoneFormData.smscode) {
+      createMessage.warn(t('sys.login.smsPlaceholder'));
+      return;
+    }
+    try {
+      loginLoading.value = true;
+      const { userInfo }: any = await userStore.phoneLogin({
+        mobile: phoneFormData.mobile,
+        captcha: phoneFormData.smscode,
+        loginOrgCode: phoneFormData.loginOrgCode,
+        mode: 'none', //不要默认的错误提示
+      });
+      if (userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.login.networkExceptionMsg'),
+        duration: 3,
+      });
+    } finally {
+      loginLoading.value = false;
+    }
+  }
+
+  /**
+   * 获取手机验证码
+   */
+  async function getLoginCode() {
+    if (!phoneFormData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    // 代码逻辑说明: 【issues/8567】严重：修改密码存在水平越权问题：登录应该用登录模板不应该用忘记密码的模板---
+    const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.LOGIN }).catch((res) =>{
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  /**
+   * 第三方登录
+   * @param type
+   */
+  function onThirdLogin(type) {
+    thirdModalRef.value.onThirdLogin(type);
+  }
+
+  /**
+   * 忘记密码
+   */
+  function forgetHandelClick() {
+    forgotLoaded.value = true;
+    type.value = 'forgot';
+    setTimeout(() => {
+      forgotRef.value?.initForm();
+    }, 300);
+  }
+
+  /**
+   * 返回登录页面
+   */
+  function goBack() {
+    activeIndex.value = 'accountLogin';
+    type.value = 'login';
+  }
+
+  /**
+   * 忘记密码/注册账号回调事件
+   * @param value
+   */
+  function handleSuccess(value) {
+    Object.assign(formData, value);
+    Object.assign(phoneFormData, { mobile: "", smscode: "" });
+    type.value = 'login';
+    activeIndex.value = 'accountLogin';
+    handleChangeCheckCode();
+  }
+
+  /**
+   * 注册
+   */
+  function registerHandleClick() {
+    registerLoaded.value = true;
+    type.value = 'register';
+    setTimeout(() => {
+      registerRef.value?.initForm();
+    }, 300);
+  }
+
+  /**
+   * 注册
+   */
+  function codeHandleClick() {
+    codeLoginLoaded.value = true;
+    type.value = 'codeLogin';
+    setTimeout(() => {
+      codeRef.value?.initFrom();
+    }, 300);
+  }
+
+  onMounted(() => {
+    //加载验证码
+    handleChangeCheckCode();
+    // 恢复已记住的用户名
+    const saved = $ls.get(REMEMBER_USERNAME_KEY);
+    if (saved) {
+      formData.username = saved;
+      rememberMe.value = true;
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/assets/loginmini/style/home.less';
+  @import '/@/assets/loginmini/style/base.less';
+
+  :deep(.ant-input:focus) {
+    box-shadow: none;
+  }
+  .aui-get-code {
+    float: right;
+    position: relative;
+    z-index: 3;
+    background: #ffffff;
+    color: #1573e9;
+    border-radius: 100px;
+    padding: 5px 16px;
+    margin: 7px;
+    border: 1px solid #1573e9;
+    top: 12px;
+  }
+
+  .aui-get-code:hover {
+    color: #1573e9;
+  }
+
+  .code-shape {
+    border-color: #dadada !important;
+    color: #aaa !important;
+  }
+
+  :deep(.jeecg-dark-switch){
+    position:absolute;
+    margin-right: 10px;
+  }
+  .aui-link-login{
+    height: 42px;
+    padding: 10px 15px;
+    font-size: 14px;
+    border-radius: 8px;
+    margin-top: 15px;
+    margin-bottom: 8px;
+    flex: 1;
+    color: #fff;
+  }
+  .aui-phone-logo{
+    position: absolute;
+    margin-left: 10px;
+    width: 60px;
+    top:2px;
+    z-index: 4;
+  }
+  .top-3{
+    top: 0.45rem;
+  }
+  .JLoginSelectDept {
+    margin:5px auto;
+    :deep(.ant-select-selection-placeholder) {
+      font-size: 14px;
+      color: #9a9a9a;
+    }
+  }
+</style>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-mini-login';
+@dark-bg: #293146;
+
+html[data-theme='dark'] {
+  .@{prefix-cls} {
+    background-color: @dark-bg !important;
+    background-image: none;
+
+    &::before {
+      background-image: url(/@/assets/svg/login-bg-dark.svg);
+    }
+    .aui-inputClear{
+      background-color: #232a3b !important;
+    }
+    .ant-input,
+    .ant-input-password {
+      background-color: #232a3b !important;
+    }
+
+    .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+      border: 1px solid #4a5569 !important;
+    }
+
+    &-form {
+      background: @dark-bg !important;
+    }
+
+    .app-iconify {
+      color: #fff !important;
+    }
+    .aui-inputClear input,.aui-input-line input,.aui-choice{
+      color: #c9d1d9 !important;
+    }
+
+    .aui-formBox{
+      background-color: @dark-bg !important;
+    }
+    .aui-third-text span{
+      background-color: @dark-bg !important;
+    }
+    .aui-form-nav .aui-flex-box{
+      color: #c9d1d9 !important;
+    }
+
+    .aui-formButton .aui-linek-code{
+      background:  @dark-bg !important;
+      color: white !important;
+    }
+    .aui-code-line{
+      border-left: none !important;
+    }
+    .ant-checkbox-inner,.aui-success h3{
+      border-color: #c9d1d9;
+    }
+    // 代码逻辑说明: 【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
+    &-sign-in-way {
+      .anticon {
+        font-size: 22px !important;
+        color: #888 !important;
+        cursor: pointer !important;
+
+        &:hover {
+          color: @primary-color !important;
+        }
+      }
+    }
+  }
+
+  input.fix-auto-fill,
+  .fix-auto-fill input {
+    -webkit-text-fill-color: #c9d1d9 !important;
+    box-shadow: inherit !important;
+  }
+
+  .ant-divider-inner-text {
+    font-size: 12px !important;
+    color: @text-color-secondary !important;
+  }
+  .aui-third-login a{
+    background: transparent;
+  }
+}
+</style>
diff --git a/src/views/system/loginmini/MiniRegister.vue b/src/views/system/loginmini/MiniRegister.vue
new file mode 100644
index 0000000..20c60cc
--- /dev/null
+++ b/src/views/system/loginmini/MiniRegister.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="aui-content">
+    <div class="aui-container">
+      <div class="aui-form">
+        <div class="aui-image">
+          <div class="aui-image-text">
+            <img :src="jeecgAdTextImg" alt="" />
+          </div>
+        </div>
+        <div class="aui-formBox">
+          <div class="aui-formWell">
+            <a-form ref="formRef" :model="formData">
+              <div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px">
+                <div class="aui-flex-box activeNav on">{{t('sys.login.signUpFormTitle')}}</div>
+              </div>
+              <div class="aui-form-box">
+                <div class="aui-account aui-account-line">
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <Icon class="aui-icon" icon="ant-design:user-outlined"/>
+                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
+                    </div>
+                  </a-form-item>
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <Icon class="aui-icon" icon="ant-design:mobile-outlined"/>
+                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.mobile')" v-model:value="formData.mobile" />
+                    </div>
+                  </a-form-item>
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <Icon class="aui-icon" icon="ant-design:mail-outlined"/>
+                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" />
+                      <div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div>
+                      <div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</div>
+                    </div>
+                  </a-form-item>
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <Icon class="aui-icon" icon="ant-design:lock-outlined"/>
+                      <a-input class="fix-auto-fill" :type="pwdIndex==='close'?'password':'text'" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
+                      <div class="aui-eye">
+                        <img :src="eyeKImg" alt="开启" v-if="pwdIndex==='open'"  @click="pwdClick('close')" />
+                        <img :src="eyeGImg" alt="关闭"  v-else-if="pwdIndex==='close'"  @click="pwdClick('open')" />
+                      </div>
+                    </div>
+                  </a-form-item>
+                  <a-form-item>
+                    <div class="aui-input-line">
+                      <Icon class="aui-icon" icon="ant-design:lock-outlined"/>
+                      <a-input class="fix-auto-fill" :type="confirmPwdIndex==='close'?'password':'text'" :placeholder="t('sys.login.confirmPassword')" v-model:value="formData.confirmPassword" />
+                      <div class="aui-eye">
+                        <img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex==='open'" @click="confirmPwdClick('close')" />
+                        <img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex==='close'" @click="confirmPwdClick('open')" />
+                      </div>
+                    </div>
+                  </a-form-item>
+                  <a-form-item name="policy">
+                    <div class="aui-flex">
+                      <div class="aui-flex-box">
+                        <div class="aui-choice">
+                          <a-checkbox  v-model:checked="formData.policy" />
+                          <span style="color: #1b90ff;margin-left: 4px">{{ t('sys.login.policy') }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </a-form-item>
+                </div>
+              </div>
+              <div class="aui-formButton">
+                <div class="aui-flex">
+                  <a class="aui-link-login aui-flex-box" @click="registerHandleClick"> {{ t('sys.login.registerButton') }}</a>
+                </div>
+                <div class="aui-flex">
+                  <a class="aui-linek-code aui-flex-box" @click="goBackHandleClick">{{ t('sys.login.backSignIn') }}</a>
+                </div>
+              </div>
+            </a-form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 图片验证码弹窗 -->
+  <CaptchaModal @register="captchaRegisterModal" @ok="getLoginCode" />
+</template>
+
+<script lang="ts" setup name="mini-register">
+  import { ref, reactive, unref, toRaw } from 'vue';
+  import { getCaptcha, register } from '/@/api/sys/user';
+  import { SmsEnum } from '/@/views/sys/login/useLogin';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
+  import jeecgAdTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
+  import eyeKImg from '/@/assets/loginmini/icon/icon-eye-k.png';
+  import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
+  import { useModal } from "@/components/Modal";
+  import { ExceptionEnum } from "@/enums/exceptionEnum";
+
+  const { t } = useI18n();
+  const { notification, createErrorModal, createMessage } = useMessage();
+  const emit = defineEmits(['go-back', 'success', 'register']);
+  const formRef = ref();
+  const formData = reactive<any>({
+    username: '',
+    mobile: '',
+    smscode: '',
+    password: '',
+    confirmPassword: '',
+    policy: false,
+  });
+  //是否显示获取验证码
+  const showInterval = ref<boolean>(true);
+  //60s
+  const timeRuning = ref<number>(60);
+  //定时器
+  const timer = ref<any>(null);
+  //密码眼睛打开关闭
+  const pwdIndex = ref<string>('close');
+  //确认密码眼睛打开关闭
+  const confirmPwdIndex = ref<string>('close');
+  const [captchaRegisterModal, { openModal: openCaptchaModal }] = useModal();
+
+  /**
+   * 返回
+   */
+  function goBackHandleClick() {
+    emit('go-back');
+    initForm();
+  }
+
+  /**
+   * 获取手机验证码
+   */
+  async function getLoginCode() {
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    // 代码逻辑说明: 【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+    const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.REGISTER }).catch((res) =>{
+      if(res.code === ExceptionEnum.PHONE_SMS_FAIL_CODE){
+        openCaptchaModal(true, {});
+      }
+    });
+    if (result) {
+      const TIME_COUNT = 60;
+      if (!unref(timer)) {
+        timeRuning.value = TIME_COUNT;
+        showInterval.value = false;
+        timer.value = setInterval(() => {
+          if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
+            timeRuning.value = timeRuning.value - 1;
+          } else {
+            showInterval.value = true;
+            clearInterval(unref(timer));
+            timer.value = null;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  function registerHandleClick() {
+    if (!formData.username) {
+      createMessage.warn(t('sys.login.accountPlaceholder'));
+      return;
+    }
+    if (!formData.mobile) {
+      createMessage.warn(t('sys.login.mobilePlaceholder'));
+      return;
+    }
+    if (!formData.smscode) {
+      createMessage.warn(t('sys.login.smsPlaceholder'));
+      return;
+    }
+    if (!formData.password) {
+      createMessage.warn(t('sys.login.passwordPlaceholder'));
+      return;
+    }
+    if (!formData.confirmPassword) {
+      createMessage.warn(t('sys.login.confirmPassword'));
+      return;
+    }
+    if (formData.password !== formData.confirmPassword) {
+      createMessage.warn(t('sys.login.diffPwd'));
+      return;
+    }
+    if(!formData.policy){
+      createMessage.warn(t('sys.login.policyPlaceholder'));
+      return;
+    }
+    registerAccount();
+  }
+
+  /**
+   * 注册账号
+   */
+  async function registerAccount() {
+    try {
+      const resultInfo = await register(
+        toRaw({
+          username: formData.username,
+          password: formData.password,
+          phone: formData.mobile,
+          smscode: formData.smscode,
+        })
+      );
+      if (resultInfo && resultInfo.data.success) {
+        notification.success({
+          description: resultInfo.data.message || t('sys.api.registerMsg'),
+          duration: 3,
+        });
+        emit('success', { username: formData.username, password: formData.password });
+        initForm();
+      } else {
+        notification.warning({
+          message: t('sys.api.errorTip'),
+          description: resultInfo.data.message || t('sys.api.networkExceptionMsg'),
+          duration: 3,
+        });
+      }
+    } catch (error) {
+      notification.error({
+        message: t('sys.api.errorTip'),
+        description: error.message || t('sys.api.networkExceptionMsg'),
+        duration: 3,
+      });
+    }
+  }
+
+  /**
+   * 初始化表单
+   */
+  function initForm() {
+    Object.assign(formData,{username:'',mobile: '', smscode: '', password: '', confirmPassword: '', policy: false})
+    if(!unref(timer)){
+      showInterval.value = true;
+      clearInterval(unref(timer));
+      timer.value = null;
+    }
+    formRef.value.resetFields();
+  }
+
+  /**
+   * 密码打开或关闭
+   * @param value
+   */
+  function pwdClick(value) {
+    pwdIndex.value = value;
+  }
+
+  /**
+   * 确认密码打开或关闭
+   * @param value
+   */
+  function confirmPwdClick(value) {
+    confirmPwdIndex.value = value;
+  }
+
+  defineExpose({
+    initForm
+  })
+</script>
+<style lang="less" scoped>
+@import '/@/assets/loginmini/style/home.less';
+@import '/@/assets/loginmini/style/base.less';
+.aui-input-line .aui-icon{
+  position: absolute;
+  z-index: 2;
+  top: 10px;
+  left: 10px;
+  font-size: 20px !important;
+}
+</style>
diff --git a/src/views/system/loginmini/OAuth2Login.vue b/src/views/system/loginmini/OAuth2Login.vue
new file mode 100644
index 0000000..baa671e
--- /dev/null
+++ b/src/views/system/loginmini/OAuth2Login.vue
@@ -0,0 +1,129 @@
+<template>
+  <div> </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { isOAuth2AppEnv, sysOAuth2Callback, sysOAuth2Login } from '/@/views/sys/login/useLogin';
+  import { useRouter } from 'vue-router';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { router } from '/@/router';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getAuthCache, getTenantId, getToken } from "/@/utils/auth";
+  import { requestAuthCode } from 'dingtalk-jsapi';
+  import { defHttp } from '/@/utils/http/axios';
+  import { OAUTH2_THIRD_LOGIN_TENANT_ID } from "/@/enums/cacheEnum";
+
+  const isOAuth = ref<boolean>(isOAuth2AppEnv());
+  const env = ref<any>({ thirdApp: false, wxWork: false, dingtalk: false });
+  const { currentRoute } = useRouter();
+  const route = currentRoute.value;
+  if (!isOAuth2AppEnv()) {
+    router.replace({ path: PageEnum.BASE_LOGIN, query: route.query });
+  }
+
+  if (isOAuth.value) {
+    checkEnv();
+  }
+
+  /**
+   * 检测当前的环境
+   */
+  function checkEnv() {
+    // 判断当时是否是企业微信环境
+    if (/wxwork/i.test(navigator.userAgent)) {
+      env.value.thirdApp = true;
+      env.value.wxWork = true;
+    }
+    // 判断当时是否是钉钉环境
+    if (/dingtalk/i.test(navigator.userAgent)) {
+      env.value.thirdApp = true;
+      env.value.dingtalk = true;
+    }
+    doOAuth2Login();
+  }
+
+  /**
+   * 进行OAuth2登录操作
+   */
+  function doOAuth2Login() {
+    if (env.value.thirdApp) {
+      // 判断是否携带了Token，是就说明登录成功
+      if (route.query.oauth2LoginToken) {
+        let token = route.query.oauth2LoginToken;
+        //执行登录操作
+        thirdLogin({ token, thirdType: route.query.thirdType,tenantId: getTenantId });
+      } else if (env.value.wxWork) {
+        sysOAuth2Login('wechat_enterprise');
+      } else if (env.value.dingtalk) {
+        //新版钉钉登录
+        dingdingLogin();
+      }
+    }
+  }
+
+  /**
+   * 第三方登录
+   * @param params
+   */
+  function thirdLogin(params) {
+    const userStore = useUserStore();
+    const { notification } = useMessage();
+    const { t } = useI18n();
+    userStore.ThirdLogin(params).then((res) => {
+      if (res && res.userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
+          duration: 3,
+        });
+      } else {
+        notification.error({
+          message: t('sys.login.errorTip'),
+          description: ((res.response || {}).data || {}).message || res.message || t('sys.login.networkExceptionMsg'),
+          duration: 4,
+        });
+      }
+    });
+  }
+
+  /**
+   * 钉钉登录
+   */
+  function dingdingLogin() {
+    //先获取钉钉的企业id，如果没有配置 还是走原来的逻辑，走原来的逻辑 需要判断存不存在token，存在token直接去首页
+    let tenantId = getAuthCache(OAUTH2_THIRD_LOGIN_TENANT_ID) || 0;
+    let url = `/sys/thirdLogin/get/corpId/clientId?tenantId=${tenantId}`;
+    // 代码逻辑说明: 不要使用getAction online里面的，要用defHttp---
+    defHttp.get({ url:url },{ isTransformResponse: false }).then((res) => {
+        if (res.success) {
+          if(res.result && res.result.corpId && res.result.clientId){
+            requestAuthCode({ corpId: res.result.corpId, clientId: res.result.clientId }).then((res) => {
+              let { code } = res;
+              sysOAuth2Callback(code);
+            });
+          }else{
+            toOldAuthLogin();
+          }
+        } else {
+          toOldAuthLogin();
+        }
+      }).catch((err) => {
+        toOldAuthLogin();
+      });
+  }
+  
+  /**
+   * 旧版钉钉登录
+   */
+  function toOldAuthLogin() {
+    let token = getToken();
+    if (token) {
+      router.replace({ path: PageEnum.BASE_HOME });
+    } else {
+      sysOAuth2Login('dingtalk');
+    }
+  }
+</script>
diff --git a/src/views/system/menu/DataRuleList.vue b/src/views/system/menu/DataRuleList.vue
new file mode 100644
index 0000000..97ed574
--- /dev/null
+++ b/src/views/system/menu/DataRuleList.vue
@@ -0,0 +1,144 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据权限规则" :width="adaptiveWidth" :rootClassName="prefixCls">
+    <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleCreate"> 新增</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicDrawer>
+  <DataRuleModal @register="registerModal" @success="reload" :permissionId="permissionId" />
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import DataRuleModal from './DataRuleModal.vue';
+  import { dataRuleColumns, dataRuleSearchFormSchema } from './menu.data';
+  import { dataRuleList, deleteRule } from './menu.api';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  const permissionId = ref('');
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+  const { prefixCls } = useDesign('sys-menu-dataRulelist');
+  //权限规则model
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer] = useDrawerInner(async (data) => {
+    permissionId.value = data.id;
+    setProps({ searchInfo: { permissionId: unref(permissionId) } });
+    reload();
+  });
+  // 自适应列配置
+  const adaptiveColProps: Partial<ColEx> = {
+    xs: 24, // <576px
+    sm: 24, // ≥576px
+    md: 24, // ≥768px
+    lg: 12, // ≥992px
+    xl: 8, // ≥1200px
+    xxl: 8, // ≥1600px
+  };
+  const [registerTable, { reload, setProps }] = useTable({
+    api: dataRuleList,
+    columns: dataRuleColumns,
+    size: 'small',
+    formConfig: {
+      baseColProps: adaptiveColProps,
+      labelAlign: 'right',
+      labelCol: {
+        offset: 1,
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 8,
+        xl: 8,
+        xxl: 8,
+      },
+      wrapperCol: {},
+      schemas: dataRuleSearchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    bordered: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    canResize: false,
+    immediate: false,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteRule({ id: record.id }, reload);
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+<style lang="less">
+  // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1660】菜单管理-数据权限的查询和按钮没间隙
+  @prefix-cls: ~'@{namespace}-sys-menu-dataRulelist';
+  .@{prefix-cls} {
+    .jeecg-basic-table {
+      padding: 0;
+    }
+    .btnArea {
+      .ant-btn {
+        &:last-child {
+          margin-right: 0;
+        }
+        &:first-child {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1660】菜单管理-数据权限的查询和按钮没间隙
+</style>
diff --git a/src/views/system/menu/DataRuleModal.vue b/src/views/system/menu/DataRuleModal.vue
new file mode 100644
index 0000000..3c94a6b
--- /dev/null
+++ b/src/views/system/menu/DataRuleModal.vue
@@ -0,0 +1,54 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" width="700px" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { dataRuleFormSchema } from './menu.data';
+  import { saveOrUpdateRule } from './menu.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const props = defineProps({ permissionId: String });
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: dataRuleFormSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增规则' : '编辑规则'));
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      values.permissionId = props.permissionId;
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRule(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/menu/MenuDrawer.vue b/src/views/system/menu/MenuDrawer.vue
new file mode 100644
index 0000000..aecf915
--- /dev/null
+++ b/src/views/system/menu/MenuDrawer.vue
@@ -0,0 +1,139 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="adaptiveWidth" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" class="menuForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, useAttrs } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema, ComponentTypes } from './menu.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { list, saveOrUpdateMenu } from './menu.api';
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const menuType = ref(0);
+  const isButton = (type) => type === 2;
+  const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
+    labelCol: {
+      md: { span: 4 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      md: { span: 20 },
+      sm: { span: 18 },
+    },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    menuType.value = data?.record?.menuType;
+
+    //获取下拉树信息
+    const treeData = await list();
+    updateSchema([
+      {
+        field: 'parentId',
+        // 代码逻辑说明: 【QQYUN-8379】菜单管理页菜单国际化
+        componentProps: { treeData: translateMenu(treeData, 'name') },
+      },
+      {
+        field: 'name',
+        label: isButton(unref(menuType)) ? '按钮/权限' : '菜单名称',
+      },
+      {
+        field: 'url',
+        required: !isButton(unref(menuType)),
+        componentProps: {
+          onChange: (e) => onUrlChange(e.target.value),
+        },
+      },
+    ]);
+
+    // 无论新增还是编辑，都可以设置表单值
+    if (typeof data.record === 'object') {
+      let values = { ...data.record };
+      setFieldsValue(values);
+      onUrlChange(values.url);
+    }
+    //按钮类型情况下，编辑时候清除一下地址的校验
+    if (menuType.value == 2) {
+      clearValidate();
+    }
+    //禁用表单
+    setProps({ disabled: !attrs.showFooter });
+  });
+  //获取弹窗标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+  //提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      // iframe兼容
+      if (ComponentTypes.IFrame === values.component) {
+        values.component = values.frameSrc;
+      }
+      setDrawerProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateMenu(values, unref(isUpdate));
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+
+  /** url 变化时，动态设置组件名称placeholder */
+  function onUrlChange(url) {
+    let placeholder = '';
+    let httpUrl = url;
+    if (url != null && url != '') {
+      if (url.startsWith('/')) {
+        url = url.substring(1);
+      }
+      url = url.replaceAll('/', '-');
+      // 特殊标记
+      url = url.replaceAll(':', '@');
+      placeholder = `${url}`;
+    } else {
+      placeholder = '请输入组件名称';
+    }
+    updateSchema([{ field: 'componentName', componentProps: { placeholder } }]);
+    // 代码逻辑说明: [QQYUN-4058]菜单添加智能化处理------------
+    if (httpUrl != null && httpUrl != '') {
+      if (httpUrl.startsWith('http://') || httpUrl.startsWith('https://')) {
+        setFieldsValue({ component: httpUrl });
+      }
+    }
+  }
+
+  /**
+  * 2024-03-06
+  * liaozhiyang
+  * 翻译菜单名称
+  */
+  function translateMenu(data, key) {
+    if (data?.length) {
+      const { t } = useI18n();
+      data.forEach((item) => {
+        if (item[key]) {
+          if (item[key].includes("t('") && t) {
+            item[key] = new Function('t', `return ${item[key]}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateMenu(item.children, key);
+        }
+      });
+    }
+    return data;
+  }
+</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
new file mode 100644
index 0000000..024e90e
--- /dev/null
+++ b/src/views/system/menu/index.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增菜单</a-button>
+        <a-button type="primary" preIcon="ic:round-expand" @click="expandAll">展开全部</a-button>
+        <a-button type="primary" preIcon="ic:round-compress" @click="collapseAll">折叠全部</a-button>
+
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <MenuDrawer @register="registerDrawer" @success="handleSuccess" :showFooter="showFooter" />
+    <DataRuleList @register="registerDrawer1" />
+  </div>
+</template>
+<script lang="ts" name="system-menu" setup>
+  import { nextTick, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useDrawer } from '/@/components/Drawer';
+  import MenuDrawer from './MenuDrawer.vue';
+  import DataRuleList from './DataRuleList.vue';
+  import { columns,searchFormSchema } from './menu.data';
+  import { list, deleteMenu, batchDeleteMenu } from './menu.api';
+  import { useDefIndexStore } from "@/store/modules/defIndex";
+  import { useI18n } from "/@/hooks/web/useI18n";
+
+  const checkedKeys = ref<Array<string | number>>([]);
+  const showFooter = ref(true);
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
+  const { t } = useI18n();
+
+  // 自定义菜单名称列渲染
+  columns[0].customRender = function ({ text, record }) {
+    // date-begin--author:liaozhiyang---date:20250716---for：【issues/8317】默认首页菜单名称适配国际化报错
+    let displayText = text;
+    // 先处理国际化，避免在添加默认首页标记后影响国际化检查
+    if (displayText && displayText.includes("t('") && t) {
+      try {
+        displayText = new Function('t', `return ${displayText}`)(t);
+      } catch (error) {
+        console.warn('国际化处理失败:', error);
+        // 如果国际化处理失败，使用原始文本
+        displayText = text;
+      }
+    }
+    // 在国际化处理完成后，再添加默认首页标记
+    const isDefIndex = checkDefIndex(record);
+    if (isDefIndex) {
+      displayText += `（${t('routes.basic.defaultHomePage')}）`;
+    }
+    return displayText;
+    // date-end--author:liaozhiyang---date:20250716---for：【issues/8317】默认首页菜单名称适配国际化报错
+  };
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      title: '菜单列表',
+      api: list,
+      columns: columns,
+      size: 'small',
+      pagination: false,
+      isTreeTable: true,
+      striped: true,
+      useSearchForm: true,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      tableSetting: { fullScreen: true },
+      formConfig: {
+        // 代码逻辑说明: 【QQYUN-5873】查询区域lablel默认居左
+        labelWidth: 74,
+        rowProps: { gutter: 24 },
+        schemas: searchFormSchema,
+        autoAdvancedCol: 4,
+        baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+        actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+      },
+      actionColumn: {
+        width: 120,
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload, expandAll, collapseAll }] = tableContext;
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 30,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    showFooter.value = true;
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    showFooter.value = true;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record) {
+    showFooter.value = false;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 添加下级
+   */
+  function handleAddSub(record) {
+    openDrawer(true, {
+      record: { parentId: record.id, menuType: 1 },
+      isUpdate: false,
+    });
+  }
+  /**
+   * 数据权限弹窗
+   */
+  function handleDataRule(record) {
+    openDataRule(true, { id: record.id });
+  }
+
+  /**
+   * 删除
+   */
+  async function handleDelete(record) {
+    await deleteMenu({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteMenu({ ids: checkedKeys.value }, () => {
+      // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+      reload();
+      checkedKeys.value = [];
+      // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1662】菜单管理、定时任务批量删除清空选中
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+    reloadDefIndex();
+  }
+
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
+  }
+
+  // --------------- begin 默认首页配置 ------------
+
+  const defIndexStore = useDefIndexStore()
+
+  // 设置默认主页
+  async function handleSetDefIndex(record: Recordable) {
+    defIndexStore.update(record.url, record.component, record.route)
+  }
+
+  /**
+   * 检查是否为默认主页
+   * @param record
+   */
+  function checkDefIndex(record: Recordable) {
+    return defIndexStore.check(record.url)
+  }
+
+  // 重新加载默认首页配置
+  function reloadDefIndex() {
+    try {
+      defIndexStore.query();
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  reloadDefIndex()
+
+  // --------------- end 默认首页配置 ------------
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      // {
+      //   label: '详情',
+      //   onClick: handleDetail.bind(null, record),
+      // },
+      {
+        label: '添加下级',
+        onClick: handleAddSub.bind(null, record),
+      },
+      {
+        label: '数据规则',
+        onClick: handleDataRule.bind(null, record),
+      },
+      {
+        label: '设为默认首页',
+        onClick: handleSetDefIndex.bind(null, record),
+        ifShow: () => !record.internalOrExternal && record.component && !checkDefIndex(record),
+      },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/menu/menu.api.ts b/src/views/system/menu/menu.api.ts
new file mode 100644
index 0000000..ce51569
--- /dev/null
+++ b/src/views/system/menu/menu.api.ts
@@ -0,0 +1,122 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/permission/list',
+  save = '/sys/permission/add',
+  edit = '/sys/permission/edit',
+  delete = '/sys/permission/delete',
+  deleteBatch = '/sys/permission/deleteBatch',
+  ruleList = '/sys/permission/queryPermissionRule',
+  ruleSave = '/sys/permission/addPermissionRule',
+  ruleEdit = '/sys/permission/editPermissionRule',
+  ruleDelete = '/sys/permission/deletePermissionRule',
+  checkPermDuplication = '/sys/permission/checkPermDuplication',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => {
+  return defHttp.get({ url: Api.list, params });
+}
+
+/**
+ * 删除菜单
+ */
+export const deleteMenu = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除菜单
+ * @param params
+ */
+export const batchDeleteMenu = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新菜单
+ * @param params
+ */
+export const saveOrUpdateMenu = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 菜单数据权限列表接口
+ * @param params
+ */
+export const dataRuleList = (params) => defHttp.get({ url: Api.ruleList, params });
+/**
+ * 保存或者更新数据规则
+ * @param params
+ */
+export const saveOrUpdateRule = (params, isUpdate) => {
+  let url = isUpdate ? Api.ruleEdit : Api.ruleSave;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 删除数据权限
+ */
+export const deleteRule = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.ruleDelete, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 根据code获取字典数值
+ * @param params
+ */
+export const ajaxGetDictItems = (params) => defHttp.get({ url: `/sys/dict/getDictItems/${params.code}` });
+
+/**
+ * 唯一校验
+ * @param params
+ */
+export const getCheckPermDuplication = (params) => defHttp.get({ url: Api.checkPermDuplication, params }, { isTransformResponse: false });
+
+/**
+ * 校验菜单是否存在
+ * @param model
+ * @param schema
+ * @param required
+ */
+export const checkPermDuplication=(model, schema, required?)=>{
+  return [
+    {
+      validator: (_, value) => {
+        if (!required) {
+          return Promise.resolve();
+        }
+        if (!value && required) {
+          return Promise.reject(`请输入${schema.label}`);
+        }
+        return new Promise<void>((resolve, reject) => {
+          getCheckPermDuplication({
+            id: model.id,
+            url:model.url,
+            alwaysShow:model.alwaysShow
+          }).then((res) => {
+              res.success ? resolve() : reject(res.message || '校验失败');
+          }).catch((err) => {
+              reject(err.message || '验证失败');
+          });
+        });
+      },
+    },
+  ];
+}
diff --git a/src/views/system/menu/menu.data.ts b/src/views/system/menu/menu.data.ts
new file mode 100644
index 0000000..d7f21ab
--- /dev/null
+++ b/src/views/system/menu/menu.data.ts
@@ -0,0 +1,456 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Icon } from '/@/components/Icon';
+import { duplicateCheck } from '../user/user.api';
+import { ajaxGetDictItems ,checkPermDuplication } from './menu.api';
+import { render } from '/@/utils/common/renderUtils';
+
+const isDir = (type) => type === 0;
+const isMenu = (type) => type === 1;
+const isButton = (type) => type === 2;
+
+// 定义可选择的组件类型
+export enum ComponentTypes {
+  Default = 'layouts/default/index',
+  IFrame = 'sys/iframe/FrameBlank',
+}
+
+export const columns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'name',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '菜单类型',
+    dataIndex: 'menuType',
+    width: 150,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'menu_type');
+    },
+  },
+  {
+    title: '图标',
+    dataIndex: 'icon',
+    width: 50,
+    customRender: ({ record }) => {
+      return h(Icon, { icon: record.icon });
+    },
+  },
+  {
+    title: '组件',
+    dataIndex: 'component',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: '路径',
+    dataIndex: 'url',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sortNo',
+    width: 50,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '菜单名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'menuType',
+    label: '菜单类型',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: ({ formActionType, formModel }) => {
+      return {
+        options: [
+          { label: '一级菜单', value: 0 },
+          { label: '子菜单', value: 1 },
+          { label: '按钮/权限', value: 2 },
+        ],
+        onChange: (e) => {
+          const { updateSchema, clearValidate } = formActionType;
+          const label = isButton(e) ? '按钮/权限' : '菜单名称';
+          //清除校验
+          clearValidate();
+          updateSchema([
+            {
+              field: 'name',
+              label: label,
+            },
+            {
+              field: 'url',
+              required: !isButton(e),
+            },
+          ]);
+          // 代码逻辑说明: [VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
+          if (isMenu(e) && !formModel.id && (formModel.component=='layouts/default/index' || formModel.component=='layouts/RouteView')) {
+            formModel.component = '';
+          }
+        },
+      };
+    },
+  },
+  {
+    field: 'name',
+    label: '菜单名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'parentId',
+    label: '上级菜单',
+    component: 'TreeSelect',
+    required: true,
+    componentProps: {
+      // 代码逻辑说明: replaceFields已过期，使用fieldNames代替------------
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+      dropdownStyle: {
+        maxHeight: '50vh',
+      },
+      getPopupContainer: (node) => node?.parentNode,
+    },
+    ifShow: ({ values }) => !isDir(values.menuType),
+  },
+  {
+    field: 'url',
+    label: '访问路径',
+    component: 'Input',
+    required: true,
+    // 代码逻辑说明: [issues/5008]子表数据权限设置不生效
+    ifShow: ({ values }) => !(values.component === ComponentTypes.IFrame && values.internalOrExternal),
+    // 代码逻辑说明: 聚合路由允许路径重复
+     dynamicRules: ({ model, schema,values }) => {
+       return checkPermDuplication(model, schema,  values.menuType !== 2?true:false);
+    },
+  },
+  {
+    field: 'component',
+    label: '前端组件',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入前端组件',
+    },
+    defaultValue:'layouts/default/index',
+    required: true,
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'componentName',
+    label: '组件名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入组件名称',
+    },
+    helpMessage: [
+      '此处名称应和vue组件的name属性保持一致。',
+      '组件名称不能重复，主要用于路由缓存功能。',
+      '如果组件名称和vue组件的name属性不一致，则会导致路由缓存失效。',
+      '非必填，留空则会根据访问路径自动生成。',
+    ],
+    defaultValue: '',
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'frameSrc',
+    label: 'Iframe地址',
+    component: 'Input',
+    rules: [
+      { required: true, message: '请输入Iframe地址' },
+      { type: 'url', message: '请输入正确的url地址' },
+    ],
+    ifShow: ({ values }) => !isButton(values.menuType) && values.component === ComponentTypes.IFrame,
+  },
+  {
+    field: 'redirect',
+    label: '默认跳转地址',
+    component: 'Input',
+    ifShow: ({ values }) => isDir(values.menuType),
+  },
+  {
+    field: 'perms',
+    label: '授权标识',
+    component: 'Input',
+    ifShow: ({ values }) => isButton(values.menuType),
+    // dynamicRules: ({ model }) => {
+    //   return [
+    //     {
+    //       required: false,
+    //       validator: (_, value) => {
+    //         return new Promise((resolve, reject) => {
+    //           let params = {
+    //             tableName: 'sys_permission',
+    //             fieldName: 'perms',
+    //             fieldVal: value,
+    //             dataId: model.id,
+    //           };
+    //           duplicateCheck(params)
+    //             .then((res) => {
+    //               res.success ? resolve() : reject(res.message || '校验失败');
+    //             })
+    //             .catch((err) => {
+    //               reject(err.message || '校验失败');
+    //             });
+    //         });
+    //       },
+    //     },
+    //   ];
+    // },
+  },
+  {
+    field: 'permsType',
+    label: '授权策略',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    helpMessage: ['可见/可访问(授权后可见/可访问)', '可编辑(未授权时禁用)'],
+    componentProps: {
+      options: [
+        { label: '可见/可访问', value: '1' },
+        { label: '可编辑', value: '2' },
+      ],
+    },
+    ifShow: ({ values }) => isButton(values.menuType),
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '有效', value: '1' },
+        { label: '无效', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => isButton(values.menuType),
+  },
+  {
+    field: 'icon',
+    label: '菜单图标',
+    component: 'IconPicker',
+    ifShow: ({ values }) => !isButton(values.menuType),
+    componentProps: {
+      allowClear: true
+    },
+  },
+  {
+    field: 'sortNo',
+    label: '排序',
+    component: 'InputNumber',
+    defaultValue: 1,
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'route',
+    label: '是否路由菜单',
+    component: 'Switch',
+    defaultValue: true,
+    componentProps: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'hidden',
+    label: '隐藏路由',
+    component: 'Switch',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'hideTab',
+    label: '隐藏Tab',
+    component: 'Switch',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'keepAlive',
+    label: '是否缓存路由',
+    component: 'Switch',
+    defaultValue: false,
+    componentProps: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'alwaysShow',
+    label: '聚合路由',
+    component: 'Switch',
+    defaultValue: false,
+    componentProps: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'internalOrExternal',
+    label: '打开方式',
+    component: 'Switch',
+    defaultValue: false,
+    componentProps: {
+      checkedChildren: '外部',
+      unCheckedChildren: '内部',
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+];
+
+export const dataRuleColumns: BasicColumn[] = [
+  {
+    title: '规则名称',
+    dataIndex: 'ruleName',
+    width: 150,
+  },
+  {
+    title: '规则字段',
+    dataIndex: 'ruleColumn',
+    width: 100,
+  },
+  {
+    title: '规则值',
+    dataIndex: 'ruleValue',
+    width: 100,
+  },
+];
+
+export const dataRuleSearchFormSchema: FormSchema[] = [
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    // colProps: { span: 6 },
+  },
+  {
+    field: 'ruleValue',
+    label: '规则值',
+    component: 'Input',
+    // colProps: { span: 6 },
+  },
+];
+
+export const dataRuleFormSchema: FormSchema[] = [
+  {
+    label: 'id',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'ruleName',
+    label: '规则名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'ruleColumn',
+    label: '规则字段',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      const ruleConditions = Array.isArray(values.ruleConditions) ? values.ruleConditions[0] : values.ruleConditions;
+      return ruleConditions !== 'USE_SQL_RULES';
+    },
+  },
+  {
+    field: 'ruleConditions',
+    label: '条件规则',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: ajaxGetDictItems,
+      params: { code: 'rule_conditions' },
+      labelField: 'text',
+      valueField: 'value',
+      getPopupContainer: (node) => document.body,
+    },
+  },
+  // 代码逻辑说明: 【TV360X-1864】添加系统变量
+  {
+    field: 'ruleValue',
+    component: 'JInputSelect',
+    label: '规则值',
+    required: true,
+    componentProps: {
+      selectPlaceholder: '可选择系统变量',
+      inputPlaceholder: '请输入',
+      getPopupContainer: () => document.body,
+      selectWidth: '200px',
+      options: [
+        {
+          label: '登录用户账号',
+          value: '#{sys_user_code}',
+        },
+        {
+          label: '登录用户名称',
+          value: '#{sys_user_name}',
+        },
+        {
+          label: '当前日期',
+          value: '#{sys_date}',
+        },
+        {
+          label: '当前时间',
+          value: '#{sys_time}',
+        },
+        {
+          label: '登录用户部门',
+          value: '#{sys_org_code}',
+        },
+        {
+          label: '用户拥有部门',
+          value: '#{sys_multi_org_code}',
+        },
+        {
+          label: '登录用户租户',
+          value: '#{tenant_id}',
+        },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '1',
+    componentProps: {
+      options: [
+        { label: '无效', value: '0' },
+        { label: '有效', value: '1' },
+      ],
+    },
+  },
+];
diff --git a/src/views/system/message/components/SysMessageList.vue b/src/views/system/message/components/SysMessageList.vue
new file mode 100644
index 0000000..d983f26
--- /dev/null
+++ b/src/views/system/message/components/SysMessageList.vue
@@ -0,0 +1,317 @@
+<template>
+  <a-list item-layout="horizontal" :data-source="messageList" :locale="locale">
+    <template #loadMore>
+      <div
+        v-if="messageList && messageList.length > 0 && !loadEndStatus && !loadingMoreStatus"
+        :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
+      >
+        <a-button @click="onLoadMore">加载更多</a-button>
+      </div>
+      <div
+        v-if="messageList && messageList.length > 0 && loadEndStatus"
+        :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
+      >
+        没有更多了
+      </div>
+    </template>
+
+    <template #renderItem="{ item }">
+      <a-list-item :style="{ background: item?.izTop && item.izTop == 1 ? '#f7f7f7' : 'auto' }">
+        <template #actions>
+          <span>{{formatData(item.sendTime)}}</span>
+          <a-rate class="antd-rate" :value="item.starFlag=='1'?1:0" :count="1" @click="clickStar(item)" style="cursor: pointer" disabled />
+        </template>
+
+        <a-list-item-meta>
+          <template #description>
+            <div v-if="isFormComment(item)" style="background: #f7f7f7;color: #555;padding: 2px 5px;white-space:nowrap;overflow: hidden">
+              <div v-html="getHtml(item.msgContent)"></div>
+            </div>
+            <div>
+              {{item.createTime}}
+            </div>
+          </template>
+
+          <template #title>
+            <div style="position: relative">
+           <!--   <span style="display: inline-block; position: absolute; left: -16px">
+                <exclamation-outlined v-if="noRead(item)" title="未读消息" style="color: red" />
+              </span>-->
+
+              <span>{{ getMsgCategory(item) }}</span>
+              <span v-if="item.busType == 'bpm' || item.busType == 'bpm_cc' || item.busType == 'msg_node' || item.busType == 'bpm_msg_node'" class="bpm-cuiban-content" v-html="item.msgContent">
+              </span>
+<!--              <a-tooltip v-else>-->
+<!--                <template #title>-->
+<!--                  <div v-html="item.msgContent"></div>-->
+<!--                </template>-->
+<!--                {{ item.titile }}-->
+<!--              </a-tooltip>-->
+              <span v-else>{{ item.titile }}</span>
+
+              <a @click="showMessageDetail(item)" style="margin-left: 16px">{{ getHrefText(item) }}</a>
+            </div>
+          </template>
+          <template #avatar>
+            <template v-if="item.busType=='email'">
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><mail-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><mail-outlined style="font-size: 16px"/></a-avatar>
+            </template>
+
+            <template v-else-if="item.busType=='bpm_task'">
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><interaction-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><interaction-outlined style="font-size: 16px"/></a-avatar>
+            </template>
+
+            <template v-else-if="item.busType=='bpm'">
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><alert-outlined style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><alert-outlined style="font-size: 16px"/></a-avatar>
+            </template>
+
+            <template v-else-if="['eoa_co_remind', 'eoa_co_notify'].includes(item.busType)">
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><GatewayOutlined style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><GatewayOutlined style="font-size: 16px"/></a-avatar>
+            </template>
+
+            <template v-else-if="['eoa_sup_remind', 'eoa_sup_notify'].includes(item.busType)">
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><AlertOutlined style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><AlertOutlined style="font-size: 16px"/></a-avatar>
+            </template>
+
+            <template v-else>
+              <a-badge dot v-if="noRead(item)" class="msg-no-read">
+                <a-avatar style="background: #79919d"><bell-filled style="font-size: 16px" title="未读消息"/></a-avatar>
+              </a-badge>
+              <a-avatar v-else style="background: #79919d"><bell-filled style="font-size: 16px" /></a-avatar>
+            </template>
+          </template>
+        </a-list-item-meta>
+      </a-list-item>
+    </template>
+  </a-list>
+
+  <keep-alive>
+    <component v-if="currentModal" v-bind="bindParams" :key="currentModal" :is="currentModal" @register="modalRegCache[currentModal].register" />
+  </keep-alive>
+</template>
+
+<script>
+
+  import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, MailOutlined,InteractionOutlined, AlertOutlined, GatewayOutlined } from '@ant-design/icons-vue';
+  import { useSysMessage, useMessageHref } from './useSysMessage';
+  import {getGloablEmojiIndex, useEmojiHtml} from "/@/components/jeecg/comment/useComment";
+  import { ref, h, watch } from "vue";
+  import dayjs from 'dayjs';
+
+  export default {
+    name: 'SysMessageList',
+    components: {
+      FilterOutlined,
+      CloseOutlined,
+      BellFilled,
+      ExclamationOutlined,
+      MailOutlined,
+      InteractionOutlined,
+      AlertOutlined,
+      GatewayOutlined,
+    },
+    props:{
+      star: {
+        type:Boolean,
+        default: false
+      },
+      isLowApp:{
+        type:Boolean,
+        default: false
+      },
+      messageCount: {
+        type: Number,
+        default: 0
+      },
+      cancelStarAfterDel: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits:['close', 'detail', 'clear', 'close-modal'],
+    setup(props, {emit}){
+      const { messageList,loadEndStatus,loadingMoreStatus,onLoadMore,noRead, getMsgCategory, getHrefText, searchParams, reset, loadData, updateStarMessage } = useSysMessage(setLocaleText);
+
+      //系统消息
+      const messageCount = ref(0);
+
+      function reload(params){
+        let { fromUser, rangeDateKey, rangeDate, noticeType } = params;
+        searchParams.fromUser = fromUser||'';
+        searchParams.rangeDateKey = rangeDateKey||'';
+        searchParams.rangeDate = rangeDate||[];
+        searchParams.noticeType = noticeType || '';
+        //list列表为空时赋初始值
+        locale.value = { locale: { emptyText: `<a-empty />` }};
+        if(props.star===true){
+          searchParams.starFlag = '1'
+        }else{
+          searchParams.starFlag = ''
+        }
+        reset();
+        loadData();
+      }
+
+      function clickStar(item){
+        console.log(item)
+        updateStarMessage(item);
+        // 代码逻辑说明: 【TV360X-349】通知-标星消息tab列表取消标星后，该条信息从标星列表移除
+        if (item.starFlag == '1' && props.cancelStarAfterDel) {
+          const findIndex = messageList.value.findIndex((item) => item.id === item.id);
+          if (findIndex !== -1) {
+            messageList.value.splice(findIndex, 1);
+            return;
+          }
+        }
+        if(item.starFlag=='1'){
+          item.starFlag = '0'
+        }else{
+          item.starFlag = '1'
+        }
+      }
+
+      // 代码逻辑说明: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接
+      const { goPage, currentModal, modalRegCache, bindParams, isFormComment } = useMessageHref(emit, props);
+      //const emojiIndex = inject('$globalEmojiIndex')
+      const emojiIndex = getGloablEmojiIndex()
+      const { getHtml } = useEmojiHtml(emojiIndex);
+
+      function showMessageDetail(record){
+        record.readFlag = '1'
+        goPage(record);
+        emit('close', record.id)
+        // 代码逻辑说明: 【TV360X-791】收到邮件通知，点击回复，应该把通知公告列表关闭---
+        if(record.busType==='email'){
+          emit('close-modal')
+        // 代码逻辑说明: 【JHHB-224】【我的消息】点击去处理后应该关闭弹窗---
+        } else if(['bpm', 'bpm_task', 'tenant_invite'].includes(record.busType)){
+          //判断是否是查看详情
+          if (record.msgAbstract) {
+            try {
+              const json = JSON.parse(record.msgAbstract);
+              //查看详情，非去处理
+              if (json.taskDetail) {
+                return;
+              }
+            } catch (e) {
+              console.error('getHrefText:msgAbstract参数不是JSON格式', record.msgAbstract);
+            }
+          }
+          emit('close-modal');
+        } else if (['eoa_co_notify', 'eoa_co_remind', 'eoa_sup_notify', 'eoa_sup_remind'].includes(record.busType)) {
+          emit('close-modal');
+        }
+      }
+
+      //返回list列表为空数据时展示的内容
+      const locale = ref({});
+
+      /**
+       * 日期格式化
+       */
+      function formatData(data) {
+        return data?dayjs(data).format('YYYY-MM-DD hh:mm'): '';
+      }
+      /**
+       * 未读点击事件
+       */
+      function noReadClick() {
+        emit('clear')
+      }
+
+      /**
+       * 设置list为空的时候提示文本
+       *
+       */
+      function setLocaleText() {
+        // 代码逻辑说明: 【QQYUN-9105】未读有问题---
+        let rangeDateKey = searchParams.rangeDateKey;
+        let value = messageCount.value;
+        if (value > 0 && !props.star && rangeDateKey && rangeDateKey === '7day') {
+          locale.value = {
+            emptyText: h(
+                'span',
+                {
+                  style: {'color': 'rgb(255,154,0)', 'cursor': 'pointer', 'text-align': 'left', 'display': 'block'},
+                  onClick: () => {
+                    noReadClick();
+                  },
+                }, `还剩余未读消息(${value > 99 ? '99+' : value})`)
+          }
+        } else {
+          locale.value = { locale: {emptyText: `<a-empty />` }};
+        }
+      }
+
+      //监听信息数量
+      watch(() => props.messageCount, (value) => {
+        messageCount.value = value;
+      }, { immediate: true })
+
+      return {
+        messageList,
+        loadEndStatus,
+        loadingMoreStatus,
+        onLoadMore,
+        noRead,
+        getMsgCategory,
+        getHrefText,
+        reload,
+        clickStar,
+        showMessageDetail,
+        isFormComment,
+        getHtml,
+        modalRegCache,
+        currentModal,
+        bindParams,
+        locale,
+        formatData,
+      };
+    },
+  };
+</script>
+
+<style scoped lang="less">
+   .msg-no-read{
+     :deep(.ant-badge-dot){
+      top: 5px;
+      right: 3px;
+    }
+  }
+   :deep(.bpm-cuiban-content) p{
+    display: inherit;
+     margin-bottom: 0;
+     margin-top: 0;
+   }
+
+   /** QQYUN-5688 【样式】鼠标放上去怎么不是手 */
+   :deep(.ant-rate-disabled){
+     .ant-rate-star{
+       cursor: pointer !important;
+     }
+   }
+   .antd-rate{
+     :deep(.ant-rate-star-first),
+     :deep(.ant-rate-star-second) {
+       color: #dddddd;
+     }
+     :deep(.ant-rate-star-full .ant-rate-star-second){
+       color: #fadb14 !important;
+     }
+   }
+</style>
diff --git a/src/views/system/message/components/SysMessageModal.vue b/src/views/system/message/components/SysMessageModal.vue
new file mode 100644
index 0000000..e14c0a7
--- /dev/null
+++ b/src/views/system/message/components/SysMessageModal.vue
@@ -0,0 +1,648 @@
+<template>
+  <BasicModal
+    :canFullscreen="false"
+    :draggable="false"
+    :closable="false"
+    @register="registerModal"
+    wrapClassName="sys-msg-modal"
+    :width="800"
+    :footer="null"
+    destroyOnClose
+  >
+    <template #title>
+      <div class="sys-msg-modal-title">
+        <div class="title"></div>
+        <div class="ant-tabs-nav-wrap">
+          <div class="ant-tabs-nav-scroll">
+            <div class="ant-tabs-nav ant-tabs-nav-animated">
+              <div>
+                <div
+                  @click="(e) => handleChangeTab(e, 'all')"
+                  role="tab"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class="ant-tabs-tab"
+                  :class="{ 'ant-tabs-tab-active': activeKey == 'all' }"
+                >
+                  全部消息
+                </div>
+                <div
+                  @click="(e) => handleChangeTab(e, 'star')"
+                  role="tab"
+                  aria-disabled="false"
+                  aria-selected="true"
+                  class="ant-tabs-tab"
+                  :class="{ 'ant-tabs-tab-active': activeKey == 'star' }"
+                >
+                  标星消息
+                </div>
+              </div>
+              <div
+                class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+                :style="{
+                  transform: activeKey == 'all' ? 'translate3d(130px, 0px, 0px)' : 'translate3d(215px, 0px, 0px)',
+                  display: 'block',
+                  width: '88px',
+                  height: '1px'
+                }"
+              ></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 头部图标 -->
+        <div class="icon-right">
+          <div class="icons">
+            <a-popover placement="bottomRight" :overlayStyle="{ width: '400px' }" trigger="click" v-model:open="showSearch">
+              <template #content>
+                <div>
+                  <span class="search-label">回复、提到我的人?：</span>
+                  <span style="display: inline-block;">
+                    <div v-if="searchParams.fromUser" class="selected-user">
+                      <span>{{searchParams.realname}}</span>
+                      <span class="clear-user-icon"><close-outlined style="font-size: 12px" @click="clearSearchParamsUser"/></span>
+                    </div>
+                    <a-button v-else type="dashed" shape="circle" @click="openSelectPerson">
+                      <plus-outlined />
+                    </a-button>
+
+                  </span>
+                </div>
+                <div class="search-date">
+                  <div class="date-label">时间：</div>
+                  <div class="date-tags">
+                    <div class="tags-container">
+                      <div v-for="item in dateTags" :class="item.active == true ? 'tag active' : 'tag'" @click="handleClickDateTag(item)">{{
+                        item.text
+                      }}</div>
+                    </div>
+                    <div class="cust-range-date" v-if="showRangeDate">
+                      <a-range-picker v-model:value="searchRangeDate" @change="handleChangeSearchDate" />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="search-date">
+                  <div class="date-label">类型：</div>
+                  <div class="date-tags">
+                    <div class="tags-container">
+                      <div v-for="item in noticeTypeOption" :class="item.active == true ? 'tag active flex' : 'tag flex'" @click="handleClickNoticeType(item)">
+                        <img class="notice-type-img" v-if="item.img" :src="item.img" />
+                        {{ item.text }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <span v-if="conditionStr" class="anticon filtera">
+                <img v-if="noticeImg" :src="noticeImg" class="notice-type-header-img">
+                <filter-outlined v-else/>
+                <span style="font-size:12px;margin-left: 3px;position: relative;">{{conditionStr}}</span>
+                <span style="display: flex;margin:0 5px;">
+                  <svg @click="clearAll" t="1715689724802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10694" width="14" height="14"><path d="M624.593455 23.272727a93.090909 93.090909 0 0 1 93.090909 93.090909v168.587637l143.406545 0.023272a116.363636 116.363636 0 0 1 116.247273 111.313455l0.116363 5.050182V861.090909a116.363636 116.363636 0 0 1-116.363636 116.363636H162.909091a116.363636 116.363636 0 0 1-116.363636-116.363636V401.338182a116.363636 116.363636 0 0 1 116.363636-116.363637l146.664727-0.023272V116.363636a93.090909 93.090909 0 0 1 88.459637-92.974545l4.654545-0.116364zM139.636364 581.818182v279.272727a23.272727 23.272727 0 0 0 23.272727 23.272727h302.545454v-162.909091a46.545455 46.545455 0 1 1 93.09091 0v162.909091h93.090909v-162.909091a46.545455 46.545455 0 1 1 93.090909 0v162.909091h116.363636a23.272727 23.272727 0 0 0 23.272727-23.272727V581.818182H139.636364z m0-93.090909h744.727272v-87.389091a23.272727 23.272727 0 0 0-23.272727-23.272727h-166.679273a69.818182 69.818182 0 0 1-69.818181-69.818182V116.363636h-221.905455v191.883637a69.818182 69.818182 0 0 1-69.818182 69.818182H162.909091a23.272727 23.272727 0 0 0-23.272727 23.272727V488.727273z" fill="currentColor" p-id="10695"></path></svg>
+                </span>
+              </span>
+              <div v-else style="align-content: center;">
+                 <img v-if="noticeImg" :src="noticeImg" class="notice-type-header-img" style="position: relative;top: -2px">
+                 <filter-outlined v-else />
+              </div>
+            </a-popover>
+            <close-outlined @click="closeModal" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div class="sys-message-card">
+      <a-tabs :activeKey="activeKey" center @tabClick="handleChangePanel" animated>
+        <template #renderTabBar>
+          <div></div>
+        </template>
+
+        <a-tab-pane tab="全部消息" key="all" forceRender>
+          <sys-message-list :isLowApp="isLowApp" ref="allMessageRef" @close="hrefThenClose" @detail="showDetailModal" @clear="clearAll" :messageCount="messageCount" @closeModal="closeModal"/>
+        </a-tab-pane>
+
+        <!-- 标星 -->
+        <a-tab-pane tab="标星消息" key="star" forceRender>
+          <sys-message-list :isLowApp="isLowApp" ref="starMessageRef" star @close="hrefThenClose" @detail="showDetailModal" @clear="clearAll" :messageCount="messageCount" @closeModal="closeModal" :cancelStarAfterDel="true"/>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </BasicModal>
+
+  <user-select-modal isRadioSelection :showButton="false" labelKey="realname" rowKey="username" @register="regModal" @getSelectResult="getSelectedUser"></user-select-modal>
+
+  <DetailModal @register="registerDetail" :zIndex="1001"/>
+</template>
+
+<script>
+  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
+  import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
+  import { ref, unref, reactive, computed } from 'vue';
+  // import SysMessageList from './SysMessageList.vue'
+  import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue'
+  import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import calendar from '/@/assets/icons/calendarNotice.png';
+  import folder from '/@/assets/icons/folderNotice.png';
+  import system from '/@/assets/icons/systemNotice.png';
+  import flow from '/@/assets/icons/flowNotice.png';
+  import collaboration from '/@/assets/icons/collaborationNotice.png';
+  import superviseNotice from '/@/assets/icons/superviseNotice.png';
+  export default {
+    name: 'SysMessageModal',
+    components: {
+      BasicModal,
+      FilterOutlined,
+      CloseOutlined,
+      BellFilled,
+      ExclamationOutlined,
+      JSelectUser,
+      // 代码逻辑说明: 【QQYUN-8241】emoji-mart-vue-fast库异步加载
+      SysMessageList: createAsyncComponent(() => import('./SysMessageList.vue')),
+      // SysMessageList,
+      UserSelectModal,
+      PlusOutlined,
+      DetailModal
+    },
+    props:{
+      messageCount: {
+        type: Number,
+        default: 0
+      }
+    },
+    emits:['register', 'refresh'],
+    setup(_p, {emit}) {
+      const allMessageRef = ref();
+      const starMessageRef = ref();
+      const activeKey = ref('all');
+      //通知类型
+      const noticeType = ref('');
+      //通知类型数组
+      const noticeTypeOption = reactive([
+        { key: 'system', text: '系统通知', active: false, img: system },
+        { key: 'flow', text: '流程通知', active: false, img: flow },
+        { key: 'plan', text: '日程通知', active: false, img: calendar },
+        { key: 'file', text: '知识通知', active: false, img: folder },
+      ]);
+      const noticeImg = ref('');
+      function handleChangeTab(e, key) {
+        activeKey.value = key;
+        loadData();
+      }
+      function handleChangePanel(key) {
+        activeKey.value = key;
+      }
+
+      // 查询区域存储值
+      const searchParams = reactive({
+        fromUser: '',
+        realname: '',
+        rangeDateKey: '7day',
+        rangeDate: [],
+      });
+
+      function loadData(){
+        let params = {
+          fromUser: searchParams.fromUser,
+          rangeDateKey: searchParams.rangeDateKey,
+          rangeDate: searchParams.rangeDate,
+          noticeType: noticeType.value ? noticeType.value:''
+        }
+        if(activeKey.value == 'all'){
+          getRefPromise(allMessageRef).then(() => {
+            allMessageRef.value.reload(params);
+          });
+        }else{
+          starMessageRef.value.reload(params);
+        }
+      }
+
+      const isLowApp = ref(false);
+      //useModalInner
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        showSearch.value = false
+        if(data.noticeType){
+          noticeType.value = data.noticeType;
+          // 代码逻辑说明: 【QQYUN-12998】点击完聊天的系统图标，再点击系统上面的铃铛就不出数据了---
+          for (const item of noticeTypeOption) {
+            if(item.key === data.noticeType){
+              item.active = true;
+              noticeImg.value = item.img;
+            }else{
+              item.active = false;
+            }
+          }
+          delete data.noticeType;
+        }
+        //每次弹窗打开 加载最新的数据
+        loadData();
+        if(data){
+          isLowApp.value = data.isLowApp||false
+        }else{
+          isLowApp.value = false;
+        }
+      });
+
+      const showSearch = ref(false);
+
+      function handleChangeSearchPerson(value, a) {
+        console.log('选择改变', value, a);
+        showSearch.value = true;
+      }
+
+      const dateTags = reactive([
+        { key: 'jt', text: '今天', active: false },
+        { key: 'zt', text: '昨天', active: false },
+        { key: 'qt', text: '前天', active: false },
+        { key: 'bz', text: '本周', active: false },
+        { key: 'sz', text: '上周', active: false },
+        { key: 'by', text: '本月', active: false },
+        { key: 'sy', text: '上月', active: false },
+        { key: '7day', text: '七日', active: true },
+        { key: 'zdy', text: '自定义', active: false },
+      ]);
+      function handleClickDateTag(item) {
+        for (let a of dateTags) {
+          if(a.key != item.key){
+            a.active = false;
+          }
+        }
+        item.active = !item.active;
+        if(item.active == false){
+          searchParams.rangeDateKey = ''
+        }else{
+          searchParams.rangeDateKey = item.key;
+        }
+        if (item.key == 'zdy') {
+          // 自定义日期查询走的是 handleChangeSearchDate
+          if(item.active == false){
+            searchParams.rangeDate = []
+            loadData();
+          }
+        }else{
+          loadData();
+        }
+      }
+      const showRangeDate = computed(() => {
+        let temp = dateTags.filter((i) => i.active == true);
+        if (temp && temp.length > 0) {
+          if (temp[0].text == '自定义') {
+            return true;
+          }
+        }
+        return false;
+      });
+      const searchRangeDate = ref([]);
+      function handleChangeSearchDate(_value, dateStringArray) {
+        searchParams.rangeDate = [...dateStringArray]
+        loadData();
+      }
+
+      function hrefThenClose(id){
+        emit('refresh', id)
+       // closeModal();
+      }
+
+      // 有查询条件值的时候显示该字符串
+      const conditionStr = computed(()=>{
+        const { fromUser, rangeDateKey, realname } = searchParams;
+        if(!fromUser && !rangeDateKey){
+          return ''
+        }
+        let arr = [];
+        if(fromUser){
+          arr.push(realname)
+        }
+        if(rangeDateKey){
+          let rangDates = dateTags.filter(item=>item.key == rangeDateKey);
+          if(rangDates && rangDates.length>0){
+            arr.push(rangDates[0].text)
+          }
+        }
+        return arr.join('、')
+      });
+
+      //注册model
+      const [regModal, { openModal }] = useModal();
+
+      function getSelectedUser(options, value){
+        if(options && options.length>0){
+          searchParams.fromUser = value
+          searchParams.realname = options[0].label;
+        }
+      }
+      
+      function openSelectPerson(){
+        openModal(true, {})
+      }
+
+      function clearSearchParamsUser(){
+        searchParams.fromUser = ''
+        searchParams.realname = ''
+      }
+
+      function clearAll(){
+        searchParams.fromUser='';
+        searchParams.realname='';
+        searchParams.rangeDateKey='';
+        searchParams.rangeDate=[];
+        for (let a of dateTags) {
+          a.active = false;
+        }
+        noticeType.value = "";
+        noticeImg.value = "";
+        for (const item of noticeTypeOption) {
+          item.active = false;
+        }
+        loadData();
+      }
+
+      function getRefPromise(componentRef) {
+        return new Promise((resolve) => {
+          (function next() {
+            let ref = componentRef.value;
+            if (ref) {
+              resolve(ref);
+            } else {
+              setTimeout(() => {
+                next();
+              }, 100);
+            }
+          })();
+        });
+      }
+      const [registerDetail, { openModal: openDetailModal }] = useModal();
+      function showDetailModal(record){
+        openDetailModal(true, {record: unref(record), isUpdate: true})
+      }
+
+      function handleDetailColse(){
+        loadData();
+      }
+
+      /**
+       * 只是通知
+       * @param item
+       */
+      function handleClickNoticeType(item) {
+        for (let a of noticeTypeOption) {
+          if(a.key !== item.key){
+            a.active = false;
+          }
+        }
+        item.active = !item.active;
+        if(item.active === false){
+          noticeType.value = "";
+          noticeImg.value = "";
+        }else{
+          noticeType.value = item.key;
+          noticeImg.value = item.img;
+        }
+        loadData();
+      }
+      
+      return {
+        conditionStr,
+        regModal,
+        getSelectedUser,
+        openSelectPerson,
+        clearSearchParamsUser,
+        clearAll,
+
+        registerModal,
+        activeKey,
+        handleChangePanel,
+        handleChangeTab,
+
+        showSearch,
+        searchParams,
+        handleChangeSearchPerson,
+        dateTags,
+        handleClickDateTag,
+        showRangeDate,
+        searchRangeDate,
+        handleChangeSearchDate,
+        closeModal,
+        hrefThenClose,
+
+        allMessageRef,
+        starMessageRef,
+        registerDetail,
+        showDetailModal,
+        isLowApp,
+        handleDetailColse,
+        noticeTypeOption,
+        handleClickNoticeType,
+        noticeImg,
+      };
+    },
+  };
+</script>
+
+<style lang="less">
+
+  @keyframes move22{
+    0%{ transform:translateY(0px); }
+    100%{transform:translateY(600px);}
+  }
+
+
+  .sys-msg-modal {
+    .ant-modal-header {
+      padding-bottom: 0;
+      padding-top: 6px;
+      padding-right: 12px;
+    }
+    .ant-modal-body {
+      height: 550px;
+      overflow-y: auto;
+      //update-begin-author:liusq---date:2026-04-23--for: JHHB-1390 【PC端】消息列表展示问题，下面有一块空白，刷新换账号也存在，Edge、Chrome都是这样
+      // 让 .ant-modal-body 作为唯一滚动容器，禁用内部 ModalWrapper ScrollContainer 的 overflow 限制
+      // 否则 ScrollContainer 会自动收缩到内容高度（如3条消息≈200px），导致只有上方小区域可滚动
+      .scrollbar__wrap {
+        overflow-y: visible !important;
+        max-height: none !important;
+        min-height: 0 !important;
+      }
+      //update-end-author:liusq---date:2026-04-23--for: JHHB-1390 【PC端】消息列表展示问题，下面有一块空白，刷新换账号也存在，Edge、Chrome都是这样
+    }
+    .ant-modal {
+      position: absolute;
+      right: 10px;
+      top: calc(100% - 600px);
+/*      animation-name: move22;
+      animation-duration:0.8s;
+      animation-timing-function:ease;*/
+    }
+  }
+  .sys-msg-modal-title {
+    .title {
+      display: inline-block;
+      width: 120px;
+    }
+    .icon-right {
+      display: inline-block;
+      width: 220px;
+      vertical-align: top;
+
+      .icons {
+        display: flex;
+        height: 100%;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        > span.anticon {
+          padding: 10px;
+          display: inline-block;
+          cursor: pointer;
+        }
+
+        > span.filtera{
+          //background-color: #d3eafd;
+          background-color: #eff1f2;
+          border-radius: 4px;
+          cursor: pointer;
+          height: 27px;
+          padding-top: 7px;
+          margin-top: 3px;
+          line-height: 25px;
+          //color: #2196f3;
+          display: flex;
+
+          >span.anticon{
+            height: auto;
+            line-height: 9px;
+            display: inline-block;
+          }
+        }
+
+
+      }
+    }
+    .ant-tabs-nav-wrap {
+      display: inline-block;
+      width: calc(100% - 340px);
+      .ant-tabs-tab {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding: 12px 0;
+        font-size: 14px;
+        background: transparent;
+        border: 0;
+        outline: none;
+        cursor: pointer;
+      }
+      .ant-tabs-tab {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding: 12px 0;
+        font-size: 14px;
+        background: transparent;
+        border: 0;
+        outline: none;
+        cursor: pointer;
+      }
+      .ant-tabs-tab+.ant-tabs-tab {
+         margin: 0 0 0 32px;
+      }
+      .ant-tabs-ink-bar {
+        background: @primary-color;
+      }
+    }
+    .ant-tabs-nav-scroll {
+      text-align: center;
+      font-size: 14px;
+      font-weight: normal;
+    }
+  }
+
+  .sys-message-card {
+  }
+
+  .search-label {
+    font-weight: 500;
+    font-size: 14px !important;
+    color: #757575 !important;
+    display: inline-block;
+    margin-right: 15px !important;
+  }
+  .search-date {
+    display: flex;
+    min-width: 0;
+    margin-top: 15px;
+    .date-label {
+      margin-top: 4px;
+      font-weight: 500;
+      font-size: 14px !important;
+      color: #757575 !important;
+      margin-right: 15px !important;
+    }
+
+    .date-tags {
+      display: -ms-flexbox;
+      display: flex;
+      display: -webkit-flex;
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+      -webkit-flex: 1;
+      flex: 1;
+      -ms-flex: 1;
+      .tags-container {
+        display: flex;
+        min-width: 0;
+        -webkit-flex: 1;
+        flex: 1;
+        -ms-flex: 1;
+        flex-wrap: wrap;
+        .tag {
+          background-color: #f5f5f5;
+          border-radius: 17px;
+          font-size: 13px;
+          margin-bottom: 10px;
+          margin-right: 10px;
+          padding: 6px 12px;
+          cursor: pointer;
+          &.active {
+            background-color: #d3eafd !important;
+          }
+        }
+      }
+    }
+  }
+
+  .selected-user{
+    background: #f5f5f5;
+    padding: 2px 14px;
+    border-radius: 30px;
+    .clear-user-icon{
+      margin-left: 5px;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .notice-type-img{
+      width: 16px;
+      height: 16px;
+      position: relative;
+      top: 2px;
+      margin-right: 1px;
+  }
+  .notice-type-header-img{
+    width: 16px;
+    height: 16px;
+    position: relative;
+    left: 2px;
+    top: 1px;
+  }
+  .flex{
+    display: flex;
+    flex: unset;
+  }
+</style>
diff --git a/src/views/system/message/components/useSysMessage.ts b/src/views/system/message/components/useSysMessage.ts
new file mode 100644
index 0000000..f43765d
--- /dev/null
+++ b/src/views/system/message/components/useSysMessage.ts
@@ -0,0 +1,591 @@
+import { ref, reactive, nextTick } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { getDictItemsByCode } from '/@/utils/dict/index';
+import { useRouter, useRoute } from 'vue-router'
+import { useAppStore } from '/@/store/modules/app';
+import { useTabs } from '/@/hooks/web/useTabs';
+import { useModal } from '/@/components/Modal';
+import {useMessage} from "/@/hooks/web/useMessage";
+
+/**
+ * 列表接口
+ * @param params
+ */
+const queryMessageList = (params) => {
+  const url = '/sys/annountCement/vue3List';
+  return defHttp.get({ url, params });
+};
+
+/**
+ * 获取消息列表数据
+ *
+ * setLocaleText 设置未读消息
+ */
+export function useSysMessage(setLocaleText) {
+  const { createMessage } = useMessage();
+  const rangeDateArray = getDictItemsByCode('rangeDate');
+  console.log('+++++++++++++++++++++');
+  console.log('rangeDateArray', rangeDateArray);
+  console.log('+++++++++++++++++++++');
+
+  const messageList = ref<any[]>([]);
+  const pageNo = ref(1)
+  let pageSize = 10;
+
+  const searchParams = reactive({
+    fromUser: '',
+    rangeDateKey: '',
+    rangeDate: [],
+    starFlag: '',
+    noticeType: ''
+  });
+
+
+  function getQueryParams() {
+    let { fromUser, rangeDateKey, rangeDate, starFlag, noticeType } = searchParams;
+    let params = {
+      fromUser,
+      starFlag,
+      rangeDateKey,
+      beginDate: '',
+      endDate: '',
+      pageNo: pageNo.value,
+      pageSize,
+      noticeType
+    };
+    if (rangeDateKey == 'zdy') {
+      params.beginDate = rangeDate[0]+' 00:00:00';
+      params.endDate = rangeDate[1]+' 23:59:59';
+    }
+    return params;
+  }
+
+  // 数据是否加载完了
+  const loadEndStatus = ref(false);
+
+  //请求数据
+  async function loadData() {
+    if(loadEndStatus.value === true){
+      return;
+    }
+    let params = getQueryParams();
+    const data = await queryMessageList(params);
+    console.log('获取结果', data);
+    if(!data || data.length<=0){
+      loadEndStatus.value = true;
+      setLocaleText();
+      return;
+    }
+    if(data.length<pageSize){
+      loadEndStatus.value = true;
+    }
+    pageNo.value = pageNo.value+1
+    let temp:any[] = messageList.value;
+    temp.push(...data);
+    messageList.value = temp;
+    setLocaleText();
+  }
+
+  //重置
+  function reset(){
+    messageList.value = []
+    pageNo.value = 1;
+    loadEndStatus.value = false;
+  }
+
+  //标星
+  async function updateStarMessage(item){
+    const url = '/sys/sysAnnouncementSend/edit';
+    let starFlag = '1';
+    if(item.starFlag==starFlag){
+      starFlag = '0'
+    }
+    const params = {
+      starFlag,
+      id: item.sendId
+    }
+    // 代码逻辑说明: QQYUN-4491【应用】一些小问题  4、标星不需要提示吧
+    const data:any = await defHttp.put({url, params}, {isTransformResponse: false});
+    if(data.success === true){
+    }else{
+      createMessage.warning(data.message)
+    }
+  }
+
+
+  const loadingMoreStatus = ref(false);
+  async function onLoadMore() {
+    loadingMoreStatus.value = true;
+    await loadData();
+    loadingMoreStatus.value = false;
+  }
+
+  function noRead(item) {
+    if (item.readFlag === '1') {
+      return false;
+    }
+    return true;
+  }
+
+  // 消息类型
+  function getMsgCategory(item) {
+    if(item.busType=='email'){
+      return '邮件提醒:';
+    } else if(item.busType=='bpm'){
+      return '流程催办:';
+    } else if(item.busType=='bpm_cc'){
+      return '流程抄送:';
+    }else if(item.busType=='bpm_task'){
+      return '流程任务:';
+    } else if (item.busType == 'eoa_co_remind') {
+      return '协同催办:';
+    } else if (item.busType == 'eoa_co_notify') {
+      return '协同提醒:';
+    } else if (item.busType == 'eoa_sup_remind') {
+      return '督办催办:';
+    } else if (item.busType == 'eoa_sup_notify') {
+      return '督办提醒:';
+    } else if (item.msgCategory == '2') {
+      return '系统消息:';
+    } else if (item.msgCategory == '1') {
+      return '通知公告:';
+    }
+    return '';
+  }
+
+  // QQYUN-4472 来消息了没有提醒--查看详情改为去处理
+  function getHrefText(item) {
+    if(item.busType === 'bpm'|| item.busType === 'bpm_task' || item.busType === 'tenant_invite'){
+      //判断是否是查看详情
+      if (item.msgAbstract) {
+        try {
+          const json = JSON.parse(item.msgAbstract);
+          if (json.taskDetail) {
+            return '查看详情';
+          }
+        } catch (e) {
+          console.error('getHrefText:msgAbstract参数不是JSON格式', item.msgAbstract);
+        }
+      }
+      return '去处理'
+    } else if (['eoa_co_notify', 'eoa_co_remind', 'eoa_sup_notify', 'eoa_sup_remind'].includes(item.busType)) {
+      // 代码逻辑说明: 【JHHB-133】消息列表打开协同工作
+      return '去处理';
+    } else {
+      return '查看详情'
+    }
+  }
+
+  return {
+    messageList,
+    reset,
+    loadData,
+    loadEndStatus,
+    searchParams,
+    updateStarMessage,
+    onLoadMore,
+    noRead,
+    getMsgCategory,
+    getHrefText
+
+  };
+}
+
+/**
+ * 用于消息跳转
+ */
+export function useMessageHref(emit, props){
+  //const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
+  //const [registerTaskModal, { openModal: openTaskModal }] = useModal();
+  // 注册表单弹窗
+  //const [registerDesignFormModal, { openModal: openDesignFormModal }] = useModal();
+  let messageHrefArray: any[] = getDictItemsByCode('messageHref');
+  // 代码逻辑说明: 【JHHB-133】消息列表打开协同工作
+  messageHrefArray = [
+    ...messageHrefArray,
+    { value: 'eoa_co_remind', text: '/collaboration/pending', url: '/collaboration/launch' },
+    { value: 'eoa_co_notify', text: '/collaboration/pending', url: '/collaboration/launch' },
+    { value: 'eoa_sup_notify', text: '/superviser/pending' },
+    { value: 'eoa_sup_remind', text: '/superviser/pending' },
+  ];
+  const router = useRouter();
+  const appStore = useAppStore();
+  const rt = useRoute();
+  const { close: closeTab, closeSameRoute } = useTabs();
+
+  //*********************************[QQYUN-6713]系统通知打开弹窗修改，动态设置弹窗begin******************************************
+  //当前表单弹窗
+  const currentModal = ref<string | null>(null);
+  //当前表单参数
+  const modalParams = ref<Recordable>({});
+  //表单注册缓存
+  const modalRegCache = ref<Recordable>({});
+  //组件绑定参数
+  const bindParams = ref<Recordable>({});
+
+  /**
+   * 根据类型打开不同弹窗
+   * @param type
+   * @param params
+   */
+  async function handleOpenType(type, params) {
+    currentModal.value = null;
+    modalParams.value = { ...params };
+    switch (type) {
+      case 'task':
+        //流程办理
+        bindParams.value = { actionType: 'todo' };
+        currentModal.value = 'ProcessTaskHandleModal';
+        break;
+      case 'history':
+        bindParams.value = {};
+        //历史流程
+        currentModal.value = 'MyTaskHandleModal';
+        break;
+      case 'design':
+        //表单设计
+        currentModal.value = 'DesformViewModal';
+        bindParams.value = {
+          showRecordCopy: false,
+          showRecordShare: false,
+          showRecordSysPrint: false,
+          showDesignFormBtn: false,
+        };
+        break;
+      case 'cgform':
+        //Online表单
+        currentModal.value = 'OnlineAutoModal';
+        bindParams.value = {
+          id: params.formId,
+        }
+        break;
+      default:
+        currentModal.value = null;
+        break;
+    }
+    //注册表单弹窗
+    initModalRegister();
+    await nextTick(() => {
+      if (modalRegCache.value[currentModal.value!]?.isRegister) {
+        console.log('已注冊，走缓存');
+        modalRegCache.value[currentModal.value!].modalMethods.openModal(true, modalParams.value);
+      }
+    });
+  }
+
+  /**
+   * 初始化弹窗注册
+   */
+  function initModalRegister() {
+    //如果当前选择表单为null，就不处理
+    if (!currentModal.value) {
+      return;
+    }
+    //判断缓存中是否存在，不存在就走缓存逻辑
+    if (!modalRegCache.value[currentModal.value]) {
+      const [registerModal, modalMethods] = useModal();
+      modalRegCache.value[currentModal.value] = {
+        isRegister: false,
+        register: bindRegisterModal(registerModal, modalMethods),
+        modalMethods,
+      };
+    }
+  }
+
+  /**
+   * 绑定注册弹窗
+   * @param regFn
+   * @param modalMethod
+   */
+  function bindRegisterModal(regFn, modalMethod) {
+    return async (...args) => {
+      console.log('开始注册：', currentModal.value);
+      await regFn(...args);
+      console.log('注册完成：', currentModal.value);
+      //打开弹窗
+      modalMethod.openModal(true, modalParams.value);
+      //设置缓存标识
+      modalRegCache.value[currentModal.value!].isRegister = true;
+    };
+  }
+  //*************************************[QQYUN-6713]系统通知打开弹窗修改，动态设置弹窗end*********************************************
+  // const defaultPath = '/monitor/mynews';
+  //const bpmPath = '/task/handle/'
+
+  async function goPage(record, openModalFun?){
+    if(!record.busType || record.busType == 'msg_node'){
+      if(!openModalFun){
+        // 从首页的消息通知跳转
+        await goPageFromOuter(record);
+      }else{
+        // 从消息页面列表点击详情查看 直接打开modal
+        openModalFun()
+      }
+      // 代码逻辑说明: QQYUN-4744【系统通知】6、系统通知@人后，对方看不到是哪个表单@的，没有超链接
+    }else if(record.busType == 'comment'){
+      // de
+      let msgAbstract = record.msgAbstract;
+      if(msgAbstract){
+        try {
+          let data = JSON.parse(msgAbstract.toString());
+          if(data.type == 'designForm'){
+            showDesignFormModal(data);
+          } else {
+            showOnlineCgformModal(data);
+          }
+        }catch (e) {
+          console.error('打开评论表单，但是msgAbstract参数不是JSON格式', msgAbstract)
+          if(openModalFun){
+            openModalFun();
+          }
+        }
+      }
+    }else if(record.busType == 'tenant_invite'){
+      if(props.isLowApp===true){
+        router.push({ name:"myapps-settings-user", query:{ page:'tenantSetting' }})
+      }else{
+        router.push({ name:"system-usersetting", query:{ page:'tenantSetting' }})
+      }
+    }else{
+      if(props && props.isLowApp===true){
+        openLowAppFlowModal(record)
+      }else{
+        await goPageWithBusType(record)
+      }
+    }
+/*    busId: "1562035005173587970"
+    busType: "email"
+    openPage: "modules/eoa/email/modals/EoaEmailInForm"
+    openType: "component"*/
+  }
+
+  /**
+   * 打开表单设计器 表单弹窗
+   * @param data
+   */
+  function showDesignFormModal(data) {
+    handleOpenType('design', {
+      mode: 'detail',
+      desformCode: data.code,
+      dataId: data.dataId,
+      isOnline: false,
+    });
+  }
+
+  /**
+   * 打开Online表单 弹窗
+   * @param data
+   */
+  function showOnlineCgformModal(data) {
+    handleOpenType('cgform', {
+      formId: data.formId,
+      isUpdate: true,
+      disableSubmit: true,
+      record: {
+        id: data.dataId,
+      },
+    });
+  }
+
+  /**
+   * 判断是不是表单的评论消息
+   * @param record
+   */
+  function isFormComment(record) {
+    if(record.busType == 'comment'){
+      let msgAbstract = record.msgAbstract;
+      if(msgAbstract){
+        try {
+          let data = JSON.parse(msgAbstract);
+          if(['cgform', 'designForm'].includes(data.type)){
+            return true
+          }
+        }catch (e) {
+          console.error('打开评论表单，但是msgAbstract参数不是JSON格式', msgAbstract)
+        }
+      }
+    }
+    return false
+  }
+
+  /**
+   * 如果是工作流任务 在lowApp中 直接打开modal
+   */
+  function openLowAppFlowModal(record){
+    const { busType, busId, msgAbstract } = record;
+    let temp = messageHrefArray.filter(item=>item.value === busType);
+    if(!temp || temp.length==0){
+      console.error('当前业务类型不识别', busType);
+      return;
+    }
+    if(busType.indexOf('bpm')<0){
+      console.error('low-app不支持跳转邮箱', busType);
+      return;
+    }
+    //固定参数 detailId 用于查询表单数据
+    let query:any = {
+      detailId: busId
+    };
+    // 额外参数处理
+    if(msgAbstract){
+      try {
+        let json = JSON.parse(msgAbstract);
+        Object.keys(json).map(k=>{
+          query[k] = json[k]
+        });
+      }catch (e) {
+        console.error('msgAbstract参数不是JSON格式', msgAbstract)
+      }
+    }
+    console.log("busType = ", busType)
+    handleOpenType('task', {
+      record: {
+        id: busId,
+        procInsId: query.procInsId,
+        processDefinitionId: query.processDefinitionId,
+        isDetail: query.taskDetail || 'bpm_cc' == busType
+      }
+    })
+  }
+
+  /**
+   * 根据busType不同跳转不同页面
+   * @param record
+   */
+  async function goPageWithBusType(record){
+    const { busType, busId, msgAbstract } = record;
+    let temp = messageHrefArray.filter(item=>item.value === busType);
+    if(!temp || temp.length==0){
+      console.error('当前业务类型不识别', busType);
+      return;
+    }
+    let path = temp[0].text;
+    if (['eoa_co_notify', 'eoa_co_remind'].includes(busType)) {
+      if (busId.startsWith('coId-')) {
+        path = temp[0].url;
+      } else if (busId.startsWith('nodeId-')) {
+        path = temp[0].text;
+      }
+    }
+    path = path.replace('{DETAIL_ID}', busId)
+    //固定参数 detailId 用于查询表单数据
+    let query:any = {
+      detailId: busId
+    };
+    // 额外参数处理
+    if(msgAbstract){
+      try {
+        let json = JSON.parse(msgAbstract);
+        Object.keys(json).map(k=>{
+          query[k] = json[k]
+        });
+      }catch (e) {
+        console.error('msgAbstract参数不是JSON格式', msgAbstract)
+      }
+    }
+    if(query.taskDetail){
+      // 查看任务详情的弹窗
+      await showHistory(query.procInsId, {taskOriginalId:query.taskId,busType,id:busId,readFlag:record.readFlag})
+    }else{
+      // 跳转路由
+      appStore.setMessageHrefParams(query);
+      if(rt.path.indexOf(path)>=0){
+        await closeTab();
+        await router.replace({ path: path, query:{ time: new Date().getTime() } });
+      }else{
+        closeSameRoute(path)
+        await router.push({ path: path });
+      }
+    }
+  }
+
+  /**
+   * 从首页的消息通知跳转消息列表打开modal
+   * @param record
+   */
+  async function goPageFromOuter(record){
+    //没有定义业务类型 直接跳转我的消息页面
+    emit('detail', record)
+  }
+
+  //===============================================================================================================
+  // 代码逻辑说明: QQYUN-3485 【查看流程】做一个查看页面，非办理页面，只通过流程实例参数即可
+  async function showHistory(processInstanceId, data?) {
+    let { formData, formUrl } = await getTaskInfoForHistory({ processInstanceId });
+    formData['PROCESS_TAB_TYPE'] = 'history';
+    handleOpenType('history', {
+      formData,
+      formUrl,
+      isCc: data && data.busType == 'bpm_cc',
+      record: data,
+      title: '流程历史',
+    });
+  }
+
+  const nodeInfoUrl = '/act/process/extActProcessNode/getHisProcessNodeInfo'
+  const taskNodeInfo = (params) => defHttp.get({ url: nodeInfoUrl, params });
+
+  async function getTaskInfoForHistory(record) {
+    //查询条件
+    let params = { procInstId: record.processInstanceId };
+    const result = await taskNodeInfo(params);
+    console.log('获取历史任务信息', result);
+    let formData: any = {
+      dataId: result.dataId,
+      taskId: record.id,
+      taskDefKey: record.taskId,
+      procInsId: record.processInstanceId,
+      tableName: result.tableName,
+      vars: result.records,
+    };
+    let tempFormUrl = result.formUrl;
+    console.log('获取流程节点表单URL', tempFormUrl);
+    //节点配置表单URL，VUE组件类型对应的拓展参数
+    if (tempFormUrl && tempFormUrl.indexOf('?') != -1 && !isURL(tempFormUrl) && tempFormUrl.indexOf('{{DOMAIN_URL}}') == -1) {
+      tempFormUrl = result.formUrl.split('?')[0];
+      console.log('获取流程节点表单URL（去掉参数）', tempFormUrl);
+      formData.extendUrlParams = getQueryVariable(result.formUrl);
+    }
+    return {
+      formData,
+      formUrl: tempFormUrl,
+    };
+  }
+
+  /**
+   * 获取URL上参数
+   * @param url
+   */
+  function getQueryVariable(url) {
+    if (!url) return;
+
+    let t,
+      n,
+      r,
+      i = url.split('?')[1],
+      s = {};
+    (t = i.split('&')), (r = null), (n = null);
+    for (let o in t) {
+      let u = t[o].indexOf('=');
+      u !== -1 && ((r = t[o].substr(0, u)), (n = t[o].substr(u + 1)), (s[r] = n));
+    }
+    return s;
+  }
+
+  /**
+   * URL地址
+   * @param {*} s
+   */
+  function isURL(s) {
+    return /^http[s]?:\/\/.*/.test(s);
+  }
+  //===============================================================================================================
+
+  return {
+    goPage,
+    isFormComment,
+    modalRegCache,
+    currentModal,
+    bindParams,
+  }
+}
diff --git a/src/views/system/message/manage/ManageDrawer.vue b/src/views/system/message/manage/ManageDrawer.vue
new file mode 100644
index 0000000..407888c
--- /dev/null
+++ b/src/views/system/message/manage/ManageDrawer.vue
@@ -0,0 +1,24 @@
+<template>
+  <BasicDrawer @register="registerModal" title="详情" :width="600" v-bind="$attrs" @ok="closeDrawer">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { formSchemas } from './manage.data';
+
+  // 声明 emits
+  const emit = defineEmits(['register']);
+  // 注册 form
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+  // 注册 modal
+  const [registerModal, { closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    await setFieldsValue({ ...data.record });
+  });
+</script>
diff --git a/src/views/system/message/manage/index.less b/src/views/system/message/manage/index.less
new file mode 100644
index 0000000..63b7bd0
--- /dev/null
+++ b/src/views/system/message/manage/index.less
@@ -0,0 +1,5 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-message-manage';
+
+.@{prefix-cls} {
+}
diff --git a/src/views/system/message/manage/index.vue b/src/views/system/message/manage/index.vue
new file mode 100644
index 0000000..2602be1
--- /dev/null
+++ b/src/views/system/message/manage/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div :class="prefixCls">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-dropdown v-if="showBatchBtn">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onDeleteBatch">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <ManageDrawer @register="registerDrawer" />
+  </div>
+</template>
+
+<script lang="ts" setup name="message-manage">
+  import { unref, computed } from 'vue';
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import ManageDrawer from './ManageDrawer.vue';
+  import { Api, list, deleteBatch } from './manage.api';
+  import { columns, searchFormSchema } from './manage.data';
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'message-manage',
+    tableProps: {
+      title: '消息中心模板列表数据',
+      api: list,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+    },
+    exportConfig: {
+      url: Api.exportXls,
+      name: '消息中心模板列表',
+    },
+    importConfig: {
+      url: Api.importXls,
+      success: () => reload(),
+    },
+  });
+
+  // 注册 ListTable
+  const [registerTable, { reload, setLoading }, { rowSelection, selectedRowKeys }] = tableContext;
+  const showBatchBtn = computed(() => selectedRowKeys.value.length > 0);
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  function onDetail(record) {
+    openDrawer(true, { record: record });
+  }
+
+  function onDelete(record) {
+    if (record) {
+      doDeleteDepart([record.id], false);
+    }
+  }
+
+  async function onDeleteBatch() {
+    try {
+      await doDeleteDepart(selectedRowKeys);
+      selectedRowKeys.value = [];
+    } finally {
+    }
+  }
+
+  /**
+   * 根据 ids 批量删除
+   * @param idListRef array
+   * @param confirm 是否显示确认提示框
+   */
+  async function doDeleteDepart(idListRef, confirm = true) {
+    const idList = unref(idListRef);
+    if (idList.length > 0) {
+      try {
+        setLoading(true);
+        await deleteBatch({ ids: idList.join(',') }, confirm);
+        await reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [{ label: '详情', onClick: onDetail.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '确认要删除吗？',
+          confirm: onDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style lang="less">
+  @import 'index';
+</style>
diff --git a/src/views/system/message/manage/manage.api.ts b/src/views/system/message/manage/manage.api.ts
new file mode 100644
index 0000000..b83d6c2
--- /dev/null
+++ b/src/views/system/message/manage/manage.api.ts
@@ -0,0 +1,52 @@
+import { unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+export enum Api {
+  list = '/sys/message/sysMessage/list',
+  delete = '/sys/message/sysMessage/delete',
+  deleteBatch = '/sys/message/sysMessage/deleteBatch',
+  exportXls = 'sys/message/sysMessage/exportXls',
+  importXls = 'sys/message/sysMessage/importExcel',
+  save = '/sys/message/sysMessage/add',
+  edit = '/sys/message/sysMessage/edit',
+}
+
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 批量删除
+ * @param params
+ * @param confirm
+ */
+export const deleteBatch = (params, confirm = false) => {
+  return new Promise((resolve, reject) => {
+    const doDelete = () => {
+      resolve(defHttp.delete({ url: Api.deleteBatch, params }, { joinParamsToUrl: true }));
+    };
+    if (confirm) {
+      createConfirm({
+        iconType: 'warning',
+        title: '删除',
+        content: '确定要删除吗？',
+        onOk: () => doDelete(),
+        onCancel: () => reject(),
+      });
+    } else {
+      doDelete();
+    }
+  });
+};
+
+/**
+ * 保存或者更改消息模板
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  if (unref(isUpdate)) {
+    return defHttp.put({ url: Api.edit, params });
+  } else {
+    return defHttp.post({ url: Api.save, params });
+  }
+};
diff --git a/src/views/system/message/manage/manage.data.ts b/src/views/system/message/manage/manage.data.ts
new file mode 100644
index 0000000..3806fda
--- /dev/null
+++ b/src/views/system/message/manage/manage.data.ts
@@ -0,0 +1,134 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '消息标题',
+    dataIndex: 'esTitle',
+    width: 140,
+  },
+  {
+    title: '发送内容',
+    dataIndex: 'esContent',
+    width: 200,
+    // slots: { customRender: 'esContent' },
+  },
+  {
+    title: '接收人',
+    dataIndex: 'esReceiver',
+    width: 140,
+  },
+  {
+    title: '发送次数',
+    dataIndex: 'esSendNum',
+    width: 120,
+  },
+  {
+    title: '发送状态',
+    dataIndex: 'esSendStatus_dictText',
+    width: 120,
+  },
+  {
+    title: '发送时间',
+    dataIndex: 'esSendTime',
+    width: 140,
+  },
+  {
+    title: '发送方式',
+    dataIndex: 'esType_dictText',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '消息标题',
+    field: 'esTitle',
+    component: 'Input',
+  },
+  {
+    label: '发送状态',
+    field: 'esSendStatus',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'msgSendStatus',
+    },
+  },
+  {
+    label: '发送方式',
+    field: 'esType',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'messageType',
+    },
+  },
+];
+
+export const formSchemas: FormSchema[] = [
+  {
+    label: 'ID',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '消息标题',
+    field: 'esTitle',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '发送内容',
+    field: 'esContent',
+    component: 'InputTextArea',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '发送参数',
+    field: 'esParam',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+
+  {
+    label: '接收人',
+    field: 'esReceiver',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '发送方式',
+    field: 'esType',
+    component: 'JDictSelectTag',
+    componentProps: { disabled: true, dictCode: 'messageType' },
+  },
+  {
+    label: '发送时间',
+    field: 'esSendTime',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '发送状态',
+    field: 'esSendStatus',
+    component: 'JDictSelectTag',
+    componentProps: { disabled: true, dictCode: 'msgSendStatus' },
+  },
+  {
+    label: '发送次数',
+    field: 'esSendNum',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '发送失败原因',
+    field: 'esResult',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    componentProps: { readOnly: true },
+  },
+];
diff --git a/src/views/system/message/template/TemplateModal.vue b/src/views/system/message/template/TemplateModal.vue
new file mode 100644
index 0000000..9daad11
--- /dev/null
+++ b/src/views/system/message/template/TemplateModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <BasicModal @register="registerModal" :title="title" :width="600" v-bind="$attrs" @ok="onSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { formSchemas } from './template.data';
+  import { saveOrUpdate } from './template.api';
+
+  // 声明 emits
+  const emit = defineEmits(['success', 'register']);
+  const title = ref<string>('');
+  const isUpdate = ref<boolean>(false);
+  // 注册 form
+  // 代码逻辑说明: [VUEN-2807]消息模板加一个查看功能------------
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema, setProps }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    baseRowStyle: {
+      marginTop: '10px',
+    },
+    labelCol: {
+      span: 5,
+    },
+    wrapperCol: {
+      span: 17,
+    },
+  });
+  // 注册 modal
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
+    isUpdate.value = unref(data.isUpdate);
+    title.value = unref(data.title);
+    await resetFields();
+    await setFieldsValue({ ...data.record });
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter })
+  });
+
+  //表单提交事件
+  async function onSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // 提交表单
+      await saveOrUpdate(values, isUpdate);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/message/template/TemplateTestModal.vue b/src/views/system/message/template/TemplateTestModal.vue
new file mode 100644
index 0000000..eeea2f5
--- /dev/null
+++ b/src/views/system/message/template/TemplateTestModal.vue
@@ -0,0 +1,40 @@
+<template>
+  <BasicModal @register="registerModal" title="发送测试" :width="800" v-bind="$attrs" @ok="onSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { sendTestFormSchemas } from './template.data';
+  import { sendMessageTest } from './template.api';
+
+  // 声明 emits
+  const emit = defineEmits(['register']);
+  // 注册 form
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    schemas: sendTestFormSchemas,
+    showActionButtonGroup: false,
+  });
+  // 注册 modal
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    await setFieldsValue({ ...unref(data.record) });
+  });
+
+  //表单提交事件
+  async function onSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // 提交表单
+      await sendMessageTest(values);
+      //关闭弹窗
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/message/template/index.less b/src/views/system/message/template/index.less
new file mode 100644
index 0000000..15e8d49
--- /dev/null
+++ b/src/views/system/message/template/index.less
@@ -0,0 +1,5 @@
+//noinspection LessUnresolvedVariable
+@prefix-cls: ~'@{namespace}-message-template';
+
+.@{prefix-cls} {
+}
diff --git a/src/views/system/message/template/index.vue b/src/views/system/message/template/index.vue
new file mode 100644
index 0000000..94d827d
--- /dev/null
+++ b/src/views/system/message/template/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <div :class="prefixCls">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="onAdd">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="showBatchBtn">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="onDeleteBatch">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                <span>删除</span>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            <span>批量操作</span>
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <TemplateModal @register="registerModal" @success="reload" />
+    <TemplateTestModal @register="registerTestModal" />
+  </div>
+</template>
+
+<script lang="ts" setup name="message-template">
+  import { unref, computed, toRaw } from 'vue';
+  import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import TemplateModal from './TemplateModal.vue';
+  import TemplateTestModal from './TemplateTestModal.vue';
+  import { Api, saveOrUpdate, list, deleteBatch } from './template.api';
+  import { columns, searchFormSchema } from './template.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
+    designScope: 'message-template',
+    tableProps: {
+      title: '消息中心模板列表数据',
+      api: list,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+    },
+    exportConfig: {
+      url: Api.exportXls,
+      name: '消息中心模板列表',
+    },
+    importConfig: {
+      url: Api.importXls,
+      success: () => reload(),
+    },
+  });
+
+  // 注册 ListTable
+  const [registerTable, { reload, setLoading }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+  const [registerModal, { openModal }] = useModal();
+  const [registerTestModal, testModal] = useModal();
+  const showBatchBtn = computed(() => selectedRowKeys.value.length > 0);
+
+  function onAdd() {
+    openModal(true, {
+      title: '新增消息模板',
+      isUpdate: false,
+      showFooter: true,
+      record: {},
+    });
+  }
+
+  function onEdit(record) {
+    if (record.useStatus === '1') {
+      createMessage.warning('此模板已被应用，禁止编辑!');
+      return;
+    }
+    openModal(true, {
+      title: '修改消息模板',
+      isUpdate: true,
+      record: record,
+      showFooter: true,
+    });
+  }
+
+  function onDelete(record) {
+    if (record) {
+      // 代码逻辑说明: VUEN-1652【bug】应用状态下不允许删除
+      if(record.useStatus == '1'){
+        createMessage.warning('该模板已被应用禁止删除!');
+        return;
+      }
+      doDeleteDepart([record.id], false);
+    }
+  }
+
+  /**
+   * 根据 ids 批量删除
+   * @param idListRef array
+   * @param confirm 是否显示确认提示框
+   */
+  async function doDeleteDepart(idListRef, confirm = true) {
+    const idList = unref(idListRef);
+    if (idList.length > 0) {
+      try {
+        setLoading(true);
+        await deleteBatch({ ids: idList.join(',') }, confirm);
+        await reload();
+      } finally {
+        setLoading(false);
+      }
+    }
+  }
+
+  async function onDeleteBatch() {
+    try {
+      // 代码逻辑说明: VUEN-1652【bug】应用状态下不允许删除
+      let arr = toRaw(selectedRows.value);
+      let temp = arr.filter(item=>item.useStatus=='1')
+      if(temp.length>0){
+        createMessage.warning('选中的模板已被应用禁止删除!');
+        return;
+      }
+      await doDeleteDepart(selectedRowKeys);
+      selectedRowKeys.value = [];
+    } finally {
+    }
+  }
+
+  // 发送消息测试
+  function onSendTest(record) {
+    testModal.openModal(true, { record });
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    // 代码逻辑说明: [VUEN-2807]消息模板加一个查看功能------------
+    return [{ label: '查看', onClick: handleDetail.bind(null, record)}, { label: '编辑', onClick: onEdit.bind(null, record) }];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      { label: '应用', onClick: handleUse.bind(null, record) },
+      { label: '停用', onClick: handleNotUse.bind(null, record) },
+      { label: '发送测试', onClick: onSendTest.bind(null, record) },
+      {
+        label: '删除',
+        color: 'error',
+        popConfirm: {
+          title: '确认要删除吗？',
+          confirm: onDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 应用
+   */
+  async function handleUse(record) {
+    let param = { id: record.id, useStatus: '1' };
+    await saveOrUpdate(param, true);
+    await reload();
+  }
+
+  /**
+   * 停用
+   */
+  async function handleNotUse(record) {
+    let param = { id: record.id, useStatus: '0' };
+    await saveOrUpdate(param, true);
+    await reload();
+  }
+
+  /**
+   * 查看
+   * @param record
+   */
+  function handleDetail(record) {
+    openModal(true,{
+      title: "消息模板详情",
+      isUpdate: true,
+      showFooter: false,
+      record:record
+    })
+  }
+</script>
+
+<style lang="less">
+  @import 'index';
+</style>
diff --git a/src/views/system/message/template/template.api.ts b/src/views/system/message/template/template.api.ts
new file mode 100644
index 0000000..fe4f03c
--- /dev/null
+++ b/src/views/system/message/template/template.api.ts
@@ -0,0 +1,60 @@
+import { unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createConfirm } = useMessage();
+
+export enum Api {
+  list = '/sys/message/sysMessageTemplate/list',
+  delete = '/sys/message/sysMessageTemplate/delete',
+  deleteBatch = '/sys/message/sysMessageTemplate/deleteBatch',
+  exportXls = 'sys/message/sysMessageTemplate/exportXls',
+  importXls = 'sys/message/sysMessageTemplate/importExcel',
+  save = '/sys/message/sysMessageTemplate/add',
+  edit = '/sys/message/sysMessageTemplate/edit',
+  // 发送测试
+  send = '/sys/message/sysMessageTemplate/sendMsg',
+}
+
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 批量删除
+ * @param params
+ * @param confirm
+ */
+export const deleteBatch = (params, confirm = false) => {
+  return new Promise((resolve, reject) => {
+    const doDelete = () => {
+      resolve(defHttp.delete({ url: Api.deleteBatch, params }, { joinParamsToUrl: true }));
+    };
+    if (confirm) {
+      createConfirm({
+        iconType: 'warning',
+        title: '删除',
+        content: '确定要删除吗？',
+        onOk: () => doDelete(),
+        onCancel: () => reject(),
+      });
+    } else {
+      doDelete();
+    }
+  });
+};
+
+/**
+ * 保存或者更改消息模板
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  if (unref(isUpdate)) {
+    return defHttp.put({ url: Api.edit, params });
+  } else {
+    return defHttp.post({ url: Api.save, params });
+  }
+};
+
+/**
+ * 发送消息测试
+ * @param params
+ */
+export const sendMessageTest = (params) => defHttp.post({ url: Api.send, params });
diff --git a/src/views/system/message/template/template.data.ts b/src/views/system/message/template/template.data.ts
new file mode 100644
index 0000000..1b779bb
--- /dev/null
+++ b/src/views/system/message/template/template.data.ts
@@ -0,0 +1,197 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { rules } from '/@/utils/helper/validator';
+import { filterDictTextByCache } from '/@/utils/dict/JDictSelectUtil';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '模板标题',
+    dataIndex: 'templateName',
+    width: 80,
+  },
+  {
+    title: '模板编码',
+    dataIndex: 'templateCode',
+    width: 100,
+  },
+  {
+    title: '通知模板',
+    dataIndex: 'templateContent',
+    width: 150,
+  },
+  {
+    title: '模板类型',
+    dataIndex: 'templateType',
+    width: 100,
+    customRender: ({ text }) => filterDictTextByCache('msgType', text),
+  },
+  {
+    title: '是否应用',
+    dataIndex: 'useStatus',
+    width: 90,
+    customRender: function ({ text }) {
+      if (text == '1') {
+        return '是';
+      } else {
+        return '否';
+      }
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '模板标题',
+    field: 'templateName',
+    component: 'Input',
+  },
+  {
+    label: '模板编码',
+    field: 'templateCode',
+    component: 'Input',
+  },
+  {
+    label: '模板类型',
+    field: 'templateType',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'msgType',
+    },
+  },
+];
+
+export const formSchemas: FormSchema[] = [
+  {
+    label: 'ID',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '模板标题',
+    field: 'templateName',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '模板编码',
+    field: 'templateCode',
+    component: 'Input',
+    required: true,
+    dynamicRules: ({ model, schema }) => {
+      return [ ...rules.duplicateCheckRule('sys_sms_template', 'template_code', model, schema, true)];
+    },
+    // 编辑模式下不可修改编码
+    dynamicDisabled: (params) => !!params.values.id,
+  },
+  {
+    label: '模板类型',
+    field: 'templateType',
+    component: 'JDictSelectTag',
+    defaultValue: '1',
+    componentProps: {
+      dictCode: 'msgType',
+      type: 'radio',
+      placeholder: '请选择模板类型',
+    },
+    required: true,
+  },
+  {
+    label: '模板分类',
+    field: 'templateCategory',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'msgCategory',
+      placeholder: '请选择模板分类',
+    }
+  },
+  {
+    label: '是否应用',
+    field: 'useStatus',
+    component: 'JSwitch',
+    componentProps: {
+      options: ['1', '0'],
+    },
+  },
+  {
+    label: '模板内容',
+    field: 'templateContent',
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        minRows: 8,
+        maxRows: 8,
+      },
+    },
+    ifShow: ({ values }) => {
+      return !['2', '4', '5'].includes(values.templateType);
+    },
+  },
+
+  {
+    label: '模板内容',
+    field: 'templateContent',
+    component: 'JEditor',
+    ifShow: ({ values }) => {
+      return ['2', '4'].includes(values.templateType);
+    },
+  },
+  {
+    label: '模板内容',
+    field: 'templateContent',
+    component: 'JMarkdownEditor',
+    ifShow: ({ values }) => {
+      return ['5'].includes(values.templateType);
+    },
+  },
+];
+
+export const sendTestFormSchemas: FormSchema[] = [
+  {
+    label: '模板编码',
+    field: 'templateCode',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '模板标题',
+    field: 'templateName',
+    component: 'Input',
+    componentProps: { disabled: true },
+  },
+  {
+    label: '模板内容',
+    field: 'templateContent',
+    component: 'InputTextArea',
+    componentProps: { disabled: true, rows: 5 },
+  },
+  {
+    label: '测试数据',
+    field: 'testData',
+    component: 'InputTextArea',
+    required: true,
+    helpMessage: 'JSON数据',
+    defaultValue: '{}',
+    componentProps: {
+      placeholder: '请输入JSON格式测试数据',
+      rows: 5,
+    },
+  },
+  {
+    label: '消息类型',
+    field: 'msgType',
+    component: 'JDictSelectTag',
+    required: true,
+    defaultValue:'system',
+    componentProps: { dictCode: 'messageType',type:'radio' },
+  },
+  {
+    label: '消息接收方',
+    field: 'receiver',
+    required: true,
+    component: 'JSelectUser',
+    componentProps: {
+      labelKey: 'username',
+      rowKey: 'username',
+    },
+  },
+];
diff --git a/src/views/system/notice/DetailModal.vue b/src/views/system/notice/DetailModal.vue
new file mode 100644
index 0000000..3568a47
--- /dev/null
+++ b/src/views/system/notice/DetailModal.vue
@@ -0,0 +1,176 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="查看详情" :showCancelBtn="false" :showOkBtn="false" :maxHeight="500">
+    <template #title>
+      <span class="basic-title">查看详情</span>
+      <div class="print-btn" @click="onPrinter">
+        <Icon icon="ant-design:printer-filled" />
+        <span class="print-text">打印</span>
+      </div>
+    </template>
+    <iframe ref="iframeRef" :src="frameSrc" class="detail-iframe" @load="onIframeLoad"></iframe>
+    <template v-if="noticeFiles && noticeFiles.length > 0">
+      <div class="files-title">相关附件：</div>
+      <template v-for="(file, index) in noticeFiles" :key="index">
+        <div class="files-area">
+          <div class="files-area-text">
+            <span>
+              <paper-clip-outlined />
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                :title="file.fileName"
+                :href="getFileAccessHttpUrl(file.filePath)"
+                class="ant-upload-list-item-name"
+                >{{ file.fileName }}</a
+              >
+            </span>
+          </div>
+          <div class="files-area-operate">
+            <download-outlined class="item-icon" @click="handleDownloadFile(file.filePath)" />
+            <eye-outlined class="item-icon" @click="handleViewFile(file.filePath)" />
+          </div>
+        </div>
+      </template>
+      <a v-if="noticeFiles.length > 1" :href="downLoadFiles + '?id=' + noticeId + '&token=' + getToken()" target="_blank"  style="margin: 15px 6px;color: #5ac0fa;">
+        <download-outlined class="item-icon" style="margin-right: 5px"  /><span>批量下载所有附件</span>
+      </a>
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { propTypes } from '/@/utils/propTypes';
+  import { ref } from 'vue';
+  import { buildUUID } from '@/utils/uuid';
+  import {getElectronFileUrl, getFileAccessHttpUrl} from '@/utils/common/compUtils';
+  import { DownloadOutlined, EyeOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
+  import { encryptByBase64 } from '@/utils/cipher';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { getToken } from "@/utils/auth";
+  import {$electron} from "@/electron";
+  const glob = useGlobSetting();
+  // 获取props
+  defineProps({
+    frameSrc: propTypes.string.def(''),
+  });
+  /**
+   * 下载文件路径
+   */
+  const downLoadFiles = `${glob.domainUrl}/sys/annountCement/downLoadFiles`;
+
+  //附件内容
+  const noticeFiles = ref([]);
+  //数据ID
+  const noticeId = ref('');
+  //表单赋值
+  const [registerModal] = useModalInner((data) => {
+    noticeFiles.value = [];
+    noticeId.value = data.record.id;
+    if (data.record?.files && data.record?.files.length > 0) {
+      noticeFiles.value = data.record.files.split(',').map((item) => {
+        return {
+          fileName: item.split('/').pop(),
+          filePath: item,
+        };
+      });
+    }
+  });
+  // iframe引用
+  const iframeRef = ref<HTMLIFrameElement>();
+  // 存储当前打印会话ID
+  const printSessionId = ref<string>('');
+  // iframe加载完成后初始化通信
+  const onIframeLoad = () => {
+    printSessionId.value = buildUUID(); // 每次加载生成新的会话ID
+  };
+  //打印
+  function onPrinter() {
+    if (!iframeRef.value) return;
+    console.log('onPrinter', iframeRef.value);
+    iframeRef.value?.contentWindow?.postMessage({ printSessionId: printSessionId.value, type: 'action:print' }, '*');
+  }
+  /**
+   * 下载文件
+   * @param filePath
+   */
+  function handleDownloadFile(filePath) {
+    window.open(getFileAccessHttpUrl(filePath), '_blank');
+  }
+  /**
+   * 预览文件
+   * @param filePath
+   */
+  function handleViewFile(filePath) {
+    if (filePath) {
+      //update-begin-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，filePath需要先拼接完整URL再编码
+      let url = encodeURIComponent(encryptByBase64(getFileAccessHttpUrl(filePath)));
+      //update-end-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，filePath需要先拼接完整URL再编码
+      let previewUrl = `${glob.viewUrl}?url=` + url;
+      //update-begin-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改 
+      if($electron.isElectron()){
+        previewUrl = getElectronFileUrl(filePath);
+      }
+      //update-end-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改
+      window.open(previewUrl, '_blank');
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .print-btn {
+    position: absolute;
+    top: 20px;
+    right: 100px;
+    cursor: pointer;
+    color: #a3a3a5;
+    z-index: 999;
+    .print-text {
+      margin-left: 5px;
+    }
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+  .detail-iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 500px;
+    // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1685】通知公告查看出现两个滚动条
+    display: block;
+    // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1685】通知公告查看出现两个滚动条
+  }
+  .files-title {
+    font-size: 16px;
+    margin: 10px;
+    font-weight: 600;
+    color: #333;
+  }
+  .files-area {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 6px;
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    .files-area-text {
+      display: flex;
+      .ant-upload-list-item-name {
+        margin: 0 6px;
+        color: #56befa;
+      }
+    }
+    .files-area-operate {
+      display: flex;
+      margin-left: 10px;
+      .item-icon {
+        cursor: pointer;
+        margin: 0 6px;
+        &:hover {
+          color: #56befa;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/notice/NoticeForm.vue b/src/views/system/notice/NoticeForm.vue
new file mode 100644
index 0000000..750fc7c
--- /dev/null
+++ b/src/views/system/notice/NoticeForm.vue
@@ -0,0 +1,116 @@
+<template>
+  <div style="min-height: 400px">
+    <BasicForm @register="registerForm">
+      <template #msgTemplate="{ model, field }">
+        <a-select v-model:value="model[field]" placeholder="请选择消息模版" :options="templateOption" @change="handleChange" />
+      </template>
+      <template #msgContent="{ model, field }">
+        <div v-html="model[field]" class="article-content"></div>
+      </template>
+    </BasicForm>
+    <div class="footer-btn" v-if="!formDisabled">
+      <a-button @click="submitForm" pre-icon="ant-design:check" type="primary">提 交</a-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { getBpmFormSchema } from './notice.data';
+  import { getTempList, queryById, saveOrUpdate } from './notice.api';
+  import { computed, ref } from 'vue';
+  // 定义属性
+  const props = defineProps({
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  //表单禁用
+  const formDisabled = computed(() => {
+    if (props.formData.disabled === false) {
+      return false;
+    }
+    return true;
+  });
+  const templateOption = ref([]);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: getBpmFormSchema(props.formData),
+    showActionButtonGroup: false,
+    disabled: formDisabled.value,
+    labelWidth: 100,
+    baseRowStyle: { marginTop: '10px' },
+    baseColProps: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
+  });
+
+  //表单提交
+  async function submitForm() {
+    let values = await validate();
+    if (values.msgType === 'ALL') {
+      values.userIds = '';
+    } else {
+      values.userIds += ',';
+    }
+    console.log('表单数据', values);
+    await saveOrUpdate(values, true);
+  }
+  //初始化模板
+  async function initTemplate() {
+    const res = await getTempList({ templateCategory: 'notice', pageSize: 100 });
+    console.log('res', res);
+    if (res.records && res.records.length > 0) {
+      templateOption.value = res.records.map((item) => {
+        return {
+          label: item.templateName,
+          value: item.templateCode,
+          content: item.templateContent,
+        };
+      });
+    }
+  }
+  /**
+   * 模版修改
+   * @param val
+   */
+  function handleChange(val) {
+    const content = templateOption.value.find((item: any) => item.value === val)?.content;
+    if (content) {
+      setFieldsValue({
+        msgContent: content,
+      });
+    }
+  }
+  /**
+   * 加载数据
+   */
+  async function initFormData() {
+    let res = await queryById({ id: props.formData.dataId });
+    if (res.success) {
+      //重置表单
+      await resetFields();
+      const record = res.result;
+      if (record.userIds) {
+        record.userIds = record.userIds.substring(0, record.userIds.length - 1);
+      }
+      //表单赋值
+      await setFieldsValue({
+        ...record,
+      });
+    }
+  }
+  //加载模版
+  initTemplate();
+  //加载数据
+  initFormData();
+</script>
+<style lang="less" scoped>
+  .footer-btn {
+    width: 100%;
+    text-align: center;
+  }
+  .article-content {
+    max-width: 100%;
+    max-height: 500px;
+    overflow-y: auto;
+  }
+</style>
diff --git a/src/views/system/notice/NoticeModal.vue b/src/views/system/notice/NoticeModal.vue
new file mode 100644
index 0000000..ddaa596
--- /dev/null
+++ b/src/views/system/notice/NoticeModal.vue
@@ -0,0 +1,120 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    @ok="handleSubmit"
+    :title="title"
+    width="900px"
+    wrapClassName="notice-cls-modal"
+    :maxHeight="800"
+    destroyOnClose
+  >
+    <BasicForm @register="registerForm">
+      <template #msgTemplate="{ model, field }">
+        <a-select v-model:value="model[field]" placeholder="请选择消息模版" :options="templateOption" @change="handleChange" />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './notice.data';
+  import { getTempList, saveOrUpdate } from './notice.api';
+  // 声明Emits
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const record = ref<any>({});
+  const templateOption = ref([]);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    labelWidth: 100,
+    baseRowStyle: { marginTop: '10px' },
+    baseColProps: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //加载模版
+    await initTemplate();
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      if (data.record.userIds) {
+        data.record.userIds = data.record.userIds.substring(0, data.record.userIds.length - 1);
+      }
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+      record.value = data.record;
+    } else {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      // 代码逻辑说明: [issue#429]新增通知公告提交指定用户参数有undefined ---
+      if(values.msgType==='ALL'){
+        values.userIds = '';
+      }else{
+        values.userIds += ',';
+      }
+      if (isUpdate.value && record.value.sendStatus != '2') {
+        values.sendStatus = '0';
+      }
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+  //初始化模板
+  async function initTemplate() {
+    const res = await getTempList({ templateCategory: 'notice', pageSize: 100 });
+    console.log('res', res);
+    if (res.records && res.records.length > 0) {
+      templateOption.value = res.records.map((item) => {
+        return {
+          label: item.templateName,
+          value: item.templateCode,
+          content: item.templateContent,
+        };
+      });
+    }
+  }
+
+  /**
+   * 模版修改
+   * @param val
+   */
+  function handleChange(val) {
+    const content = templateOption.value.find((item: any) => item.value === val)?.content;
+    if (content) {
+      setFieldsValue({
+        msgContent: content,
+      });
+    }
+  }
+</script>
+<style scoped>
+  .notice-cls-modal {
+    top: 20px !important;
+  }
+</style>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
new file mode 100644
index 0000000..848176b
--- /dev/null
+++ b/src/views/system/notice/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新建</a-button>
+<!--        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>-->
+<!--        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>-->
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon style="fontsize: 12px" icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <NoticeModal @register="registerModal" @success="reload" />
+    <DetailModal @register="register" :frameSrc="iframeUrl" />
+  </div>
+</template>
+<script lang="ts" name="system-notice" setup>
+  import { ref, onMounted } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import NoticeModal from './NoticeModal.vue';
+  import DetailModal from './DetailModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getToken } from '/@/utils/auth';
+  import { columns, searchFormSchema } from './notice.data';
+  import { getList, deleteNotice, batchDeleteNotice,editIzTop, getExportUrl, getImportUrl, doReleaseData, doReovkeData } from './notice.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useAppStore } from '/@/store/modules/app';
+
+  const appStore = useAppStore();
+  const glob = useGlobSetting();
+  const [registerModal, { openModal }] = useModal();
+  const [register, { openModal: openDetail }] = useModal();
+  const iframeUrl = ref('');
+  const { createMessage, createConfirm } = useMessage();
+  // 列表页面公共参数、方法
+  const { prefixCls, onExportXls, onImportXls, tableContext, doRequest } = useListPage({
+    designScope: 'notice-template',
+    tableProps: {
+      title: '消息通知',
+      api: getList,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+        fieldMapToTime: [['sendTime', ['sendTime_begin', 'sendTime_end'], 'YYYY-MM-DD']]
+      }
+    },
+    exportConfig: {
+      name: '消息通知列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+  //流程编码
+  const flowCode = 'dev_sys_announcement_001';
+  /**
+   * 新增事件
+   */
+  function handleAdd(record = {}) {
+    openModal(true, {
+      isUpdate: false,
+      record,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteNotice({ id: record.id }, reload);
+  }
+  /**
+   * 置顶操作
+   */
+  async function handleTop(record, izTop) {
+     await editIzTop({ id: record.id, izTop }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    doRequest(() => batchDeleteNotice({ ids: selectedRowKeys.value }));
+  }
+  /**
+   * 发布
+   */
+  async function handleRelease(id) {
+    await doReleaseData({ id });
+    reload();
+  }
+  /**
+   * 撤销
+   */
+  async function handleReovke(id) {
+    await doReovkeData({ id });
+    reload();
+  }
+  /**
+   * 查看
+   */
+  function handleDetail(record) {
+    iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
+    openDetail(true, { record });
+  }
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: record.sendStatus == 0 || record.sendStatus == '2',
+      },
+      {
+        label: '查看',
+        onClick: handleDetail.bind(null, record),
+        ifShow: record.sendStatus == 1,
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '删除',
+        ifShow: record.sendStatus != 1,
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+      {
+        label: '发布',
+        ifShow: (!record?.izApproval || record.izApproval == '0') && record.sendStatus == 0,
+        onClick: handleRelease.bind(null, record.id),
+      },
+      {
+        label: '撤销',
+        ifShow: record.sendStatus == 1,
+        popConfirm: {
+          title: '确定要撤销吗？',
+          confirm: handleReovke.bind(null, record.id),
+        },
+      },
+      {
+        label: '发布',
+        ifShow: record.sendStatus == '2',
+        popConfirm: {
+          title: '确定要再次发布吗？',
+          confirm: handleRelease.bind(null, record.id),
+        },
+      },
+      {
+        label: '置顶',
+        onClick: handleTop.bind(null, record, 1),
+        ifShow: record.sendStatus == 1 && record.izTop == 0,
+      },
+      {
+        label: '取消置顶',
+        onClick: handleTop.bind(null, record, 0),
+        ifShow: record.sendStatus == 1 && record.izTop == 1,
+      },
+    ];
+  }
+
+  onMounted(() => {
+    // 代码逻辑说明: 【JHHB-128】转公告
+    const params = appStore.getMessageHrefParams;
+    if (params?.add) {
+      delete params.add;
+      handleAdd(params);
+      appStore.setMessageHrefParams('');
+    }
+  });
+</script>
diff --git a/src/views/system/notice/notice.api.ts b/src/views/system/notice/notice.api.ts
new file mode 100644
index 0000000..c8a6eb0
--- /dev/null
+++ b/src/views/system/notice/notice.api.ts
@@ -0,0 +1,95 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/annountCement/list',
+  save = '/sys/annountCement/add',
+  edit = '/sys/annountCement/edit',
+  delete = '/sys/annountCement/delete',
+  queryById = '/sys/annountCement/queryById',
+  deleteBatch = '/sys/annountCement/deleteBatch',
+  exportXls = '/sys/annountCement/exportXls',
+  importExcel = '/sys/annountCement/importExcel',
+  releaseData = '/sys/annountCement/doReleaseData',
+  reovkeData = '/sys/annountCement/doReovkeData',
+  editIzTop = '/sys/annountCement/editIzTop',
+  addVisitsNum = '/sys/annountCement/addVisitsNumber',
+  tempList = '/sys/message/sysMessageTemplate/list',
+}
+
+/**
+ * 导出url
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入url
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 查询消息列表
+ * @param params
+ */
+export const getList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新通告
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  const url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 删除通告
+ * @param params
+ */
+export const deleteNotice = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 置顶编辑
+ * @param params
+ */
+export const editIzTop = (params, handleSuccess) => {
+  return defHttp.post({ url: Api.editIzTop, data: params }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量消息公告
+ * @param params
+ */
+export const batchDeleteNotice = (params) => defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true });
+
+/**
+ * 发布
+ * @param id
+ */
+export const doReleaseData = (params) => defHttp.get({ url: Api.releaseData, params });
+/**
+ * 撤销
+ * @param id
+ */
+export const doReovkeData = (params) => defHttp.get({ url: Api.reovkeData, params });
+/**
+ * 新增访问量
+ * @param id
+ */
+export const addVisitsNum = (params) => defHttp.get({ url: Api.addVisitsNum, params }, { successMessageMode: 'none' });
+/**
+ * 根据ID查询数据
+ * @param id
+ */
+export const queryById = (params) => defHttp.get({ url: Api.queryById, params }, { isTransformResponse: false });
+/**
+ * 查询模板列表
+ * @param params
+ */
+export const getTempList = (params) => {
+  return defHttp.get({ url: Api.tempList, params });
+};
diff --git a/src/views/system/notice/notice.data.ts b/src/views/system/notice/notice.data.ts
new file mode 100644
index 0000000..e99ba30
--- /dev/null
+++ b/src/views/system/notice/notice.data.ts
@@ -0,0 +1,434 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { render } from '/@/utils/common/renderUtils';
+import { h } from 'vue';
+import { Tinymce } from '@/components/Tinymce';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '标题',
+    width: 150,
+    dataIndex: 'titile',
+  },
+  {
+    title: '消息类型',
+    dataIndex: 'msgCategory',
+    width: 100,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'msg_category');
+    },
+  },
+  {
+    title: '发布人',
+    width: 100,
+    dataIndex: 'sender_dictText',
+  },
+  {
+    title: '优先级',
+    dataIndex: 'priority',
+    width: 70,
+    customRender: ({ text }) => {
+      const color = text == 'L' ? 'blue' : text == 'M' ? 'yellow' : 'red';
+      return render.renderTag(render.renderDict(text, 'priority'), color);
+    },
+  },
+  {
+    title: '通告对象',
+    dataIndex: 'msgType',
+    width: 100,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'msg_type');
+    },
+  },
+  {
+    title: '发布状态',
+    dataIndex: 'sendStatus',
+    width: 70,
+    customRender: ({ text }) => {
+      const color = text == '0' ? 'red' : text == '1' ? 'green' : 'gray';
+      return render.renderTag(render.renderDict(text, 'send_status'), color);
+    },
+  },
+  {
+    title: '发布时间',
+    width: 100,
+    dataIndex: 'sendTime',
+  },
+  {
+    title: '撤销时间',
+    width: 100,
+    dataIndex: 'cancelTime',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'titile',
+    label: '标题',
+    component: 'JInput',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'msgCategory',
+    label: '消息类型',
+    component: 'JDictSelectTag',
+    defaultValue: '1',
+    componentProps: {
+      dictCode: 'msg_category',
+      placeholder: '请选择类型',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'msgClassify',
+    label: '公告分类',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'notice_type',
+      placeholder: '请选择公告分类',
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'sendTime',
+    label: '发布时间',
+    component: 'RangePicker',
+    componentProps: {
+      valueType: 'Date',
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'msgCategory',
+    label: '消息类型',
+    required: true,
+    component: 'JDictSelectTag',
+    defaultValue: '1',
+    componentProps: {
+      type: 'radio',
+      dictCode: 'msg_category',
+      placeholder: '请选择类型',
+    },
+  },
+  {
+    field: 'izTop',
+    label: '是否置顶',
+    defaultValue: '0',
+    component: 'JSwitch',
+    componentProps: {
+      //取值 options
+      options: ['1', '0'],
+      //文本option
+      labelOptions: ['是', '否'],
+      placeholder: '是否置顶',
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+  },
+  {
+    field: 'titile',
+    label: '通告标题',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      placeholder: '请输入标题',
+    },
+    // 代码逻辑说明: 【TV360X-1632】标题过长保存报错，长度校验
+    dynamicRules() {
+      return [
+        {
+          validator: (_, value) => {
+            return new Promise<void>((resolve, reject) => {
+              if (value.length > 100) {
+                reject('最长100个字符');
+              }
+              resolve();
+            });
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: 'msgAbstract',
+    label: '通告摘要',
+    component: 'InputTextArea',
+    componentProps: {
+      allowClear: true,
+      autoSize: {
+        minRows: 2,
+        maxRows: 5,
+      },
+    },
+    required: true,
+  },
+  // {
+  //   field: 'endTime',
+  //   label: '截至日期',
+  //   component: 'DatePicker',
+  //   componentProps: {
+  //     showTime: true,
+  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  //     placeholder: '请选择截至日期',
+  //   },
+  //   dynamicRules: ({ model }) => rules.endTime(model.startTime, true),
+  // },
+  {
+    field: 'msgType',
+    label: '接收用户',
+    defaultValue: 'ALL',
+    component: 'JDictSelectTag',
+    required: true,
+    componentProps: {
+      type: 'radio',
+      dictCode: 'msg_type',
+      placeholder: '请选择发布范围',
+    },
+  },
+  {
+    field: 'userIds',
+    label: '指定用户',
+    component: 'JSelectUserByDepartment',
+    required: true,
+    componentProps: {
+      rowKey: 'id',
+      // 代码逻辑说明: 【TV360X-1627】通知公告用户选择组件没翻译
+      labelKey: 'realname',
+    },
+    ifShow: ({ values }) => values.msgType == 'USER',
+  },
+  {
+    field: 'msgClassify',
+    label: '公告分类',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'notice_type',
+      placeholder: '请选择公告分类',
+    },
+  },
+  {
+    field: 'priority',
+    label: '优先级别',
+    defaultValue: 'H',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'priority',
+      type: 'radio',
+      placeholder: '请选择优先级',
+    },
+  },
+  {
+    field: 'izApproval',
+    label: '是否审批',
+    component: 'RadioGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        {
+          label: '是',
+          value: '1',
+        },
+        {
+          label: '否',
+          value: '0',
+        },
+      ],
+    },
+  },
+  {
+    field: 'msgTemplate',
+    label: '公告模版',
+    component: 'Input',
+    slot: 'msgTemplate',
+  },
+  {
+    field: 'files',
+    label: '通告附件',
+    component: 'JUpload',
+    componentProps: {
+      //是否显示选择按钮
+      text: '文件上传',
+      //最大上传数
+      maxCount: 20,
+      //是否显示下载按钮
+      download: true,
+    },
+  },
+  {
+    field: 'msgContent',
+    label: '通告内容',
+    component: 'Input',
+    colProps: { span: 24 },
+    render: render.renderTinymce,
+  },
+];
+
+/**
+ * 流程表单调用这个方法获取formSchema
+ * @param param
+ */
+export function getBpmFormSchema(_formData): FormSchema[] {
+  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
+  return [
+    {
+      field: 'id',
+      label: 'id',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: 'msgCategory',
+      label: '消息类型',
+      required: true,
+      component: 'JDictSelectTag',
+      defaultValue: '1',
+      componentProps: {
+        type: 'radio',
+        dictCode: 'msg_category',
+        placeholder: '请选择类型',
+      },
+    },
+    {
+      field: 'izTop',
+      label: '是否置顶',
+      defaultValue: '0',
+      component: 'JSwitch',
+      componentProps: {
+        //取值 options
+        options: ['1', '0'],
+        //文本option
+        labelOptions: ['是', '否'],
+        placeholder: '是否置顶',
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+    },
+    {
+      field: 'titile',
+      label: '通告标题',
+      component: 'Input',
+      required: true,
+      componentProps: {
+        placeholder: '请输入标题',
+      },
+      // 代码逻辑说明: 【TV360X-1632】标题过长保存报错，长度校验
+      dynamicRules() {
+        return [
+          {
+            validator: (_, value) => {
+              return new Promise<void>((resolve, reject) => {
+                if (value.length > 100) {
+                  reject('最长100个字符');
+                }
+                resolve();
+              });
+            },
+          },
+        ];
+      },
+    },
+    {
+      field: 'msgAbstract',
+      label: '通告摘要',
+      component: 'InputTextArea',
+      required: true,
+    },
+    {
+      field: 'msgType',
+      label: '接收用户',
+      defaultValue: 'ALL',
+      component: 'JDictSelectTag',
+      required: true,
+      componentProps: {
+        type: 'radio',
+        dictCode: 'msg_type',
+        placeholder: '请选择发布范围',
+      },
+    },
+    {
+      field: 'userIds',
+      label: '指定用户',
+      component: 'JSelectUserByDepartment',
+      required: true,
+      componentProps: {
+        rowKey: 'id',
+        // 代码逻辑说明: 【TV360X-1627】通知公告用户选择组件没翻译
+        labelKey: 'realname',
+      },
+      ifShow: ({ values }) => values.msgType == 'USER',
+    },
+    {
+      field: 'msgClassify',
+      label: '公告分类',
+      component: 'JDictSelectTag',
+      componentProps: {
+        dictCode: 'notice_type',
+        placeholder: '请选择公告分类',
+      },
+    },
+    {
+      field: 'priority',
+      label: '优先级别',
+      defaultValue: 'H',
+      component: 'JDictSelectTag',
+      componentProps: {
+        dictCode: 'priority',
+        type: 'radio',
+        placeholder: '请选择优先级',
+      },
+    },
+    {
+      field: 'msgTemplate',
+      label: '公告模版',
+      component: 'Input',
+      slot: 'msgTemplate',
+    },
+    {
+      field: 'files',
+      label: '通告附件',
+      component: 'JUpload',
+      componentProps: {
+        //是否显示选择按钮
+        text: '文件上传',
+        //最大上传数
+        maxCount: 2,
+        //是否显示下载按钮
+        download: true,
+      },
+    },
+    {
+      field: 'msgContent',
+      label: '通告内容',
+      component: 'Input',
+      colProps: { span: 24 },
+      ifShow: ({}) => _formData.disabled == false,
+      render: ({ model, field }) => {
+        return h(Tinymce, {
+          showImageUpload: false,
+          disabled: _formData.disabled !== false,
+          height: 300,
+          value: model[field],
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+        });
+      },
+    },
+    {
+      field: 'msgContent',
+      label: '通告内容',
+      component: 'Input',
+      colProps: { span: 24 },
+      ifShow: ({}) => _formData.disabled !== false,
+      slot: 'msgContent',
+    },
+  ];
+}
diff --git a/src/views/system/onlineuser/OnlineUser.api.ts b/src/views/system/onlineuser/OnlineUser.api.ts
new file mode 100644
index 0000000..e7438dc
--- /dev/null
+++ b/src/views/system/onlineuser/OnlineUser.api.ts
@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/online/list',
+  forceLogout = '/sys/online/forceLogout'
+}
+
+/**
+ * 列表
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 批量删除角色
+ * @param params
+ */
+export const forceLogout = (params) => {
+  return defHttp.post({url:Api.forceLogout,params},{isTransformResponse:false})
+};
diff --git a/src/views/system/onlineuser/OnlineUser.data.ts b/src/views/system/onlineuser/OnlineUser.data.ts
new file mode 100644
index 0000000..bf6f8eb
--- /dev/null
+++ b/src/views/system/onlineuser/OnlineUser.data.ts
@@ -0,0 +1,54 @@
+import { FormSchema } from '/@/components/Table';
+import { render } from "/@/utils/common/renderUtils";
+import { getToken } from '/@/utils/auth';
+
+//列表
+export const columns = [
+  {
+    title:'用户账号',
+    align:"center",
+    dataIndex: 'username',
+    customRender: ( {text,record} ) => {
+      let token = getToken();
+      if(record.token === token) {
+        return text + '（我）'
+      }
+      return text
+    },
+  },{
+    title:'用户姓名',
+    align:"center",
+    dataIndex: 'realname'
+  },{
+    title: '头像',
+    align: "center",
+    width: 120,
+    dataIndex: 'avatar',
+    customRender: render.renderAvatar,
+  },{
+    title:'生日',
+    align:"center",
+    dataIndex: 'birthday'
+  },{
+    title: '性别',
+    align: "center",
+    dataIndex: 'sex',
+    customRender: ({text}) => {
+      return render.renderDict(text, 'sex');
+    }
+  },{
+    title:'手机号',
+    align:"center",
+    dataIndex: 'phone'
+  }
+];
+
+//查询区域
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '用户账号',
+    component: 'Input',
+    colProps: { span: 6 },
+  }
+];
diff --git a/src/views/system/onlineuser/OnlineUserList.vue b/src/views/system/onlineuser/OnlineUserList.vue
new file mode 100644
index 0000000..d68d68e
--- /dev/null
+++ b/src/views/system/onlineuser/OnlineUserList.vue
@@ -0,0 +1,67 @@
+<template>
+  <BasicTable @register="registerTable" :rowSelection="rowSelection">
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+</template>
+
+<script lang="ts" name="online-user" setup>
+import { BasicTable, TableAction } from '/@/components/Table';
+import { columns, searchFormSchema } from './OnlineUser.data';
+import { list, forceLogout } from './OnlineUser.api';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { useMessage } from "/@/hooks/web/useMessage";
+// 列表页面公共参数、方法
+const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
+  designScope: 'online-user',
+  tableProps: {
+    //在线用户rowKey默认id会造成key重复，导致页面出现重复数据
+    rowKey:'token',
+    title: '在线用户',
+    api: list,
+    columns: columns,
+    formConfig: {
+      schemas: searchFormSchema,
+    },
+    actionColumn: {
+      width: 120,
+    },
+    rowSelection: null,
+  },
+});
+const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+const $message = useMessage();
+
+//操作栏
+function getTableAction(record) {
+  return [
+    {
+      label: '强退',
+      popConfirm: {
+        title: '强制退出用户？',
+        confirm: handleForce.bind(null, record),
+      },
+    },
+  ];
+}
+
+/**
+ * 强退
+ * @param record
+ */
+function handleForce(record) {
+   forceLogout({ token: record.token }).then((res)=>{
+     if(res.success){
+       reload();
+       $message.createMessage.success('强制退出用户”'+record.realname+'“成功！');
+     }else{
+       $message.createMessage.warn(res.message);
+     }
+   })
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/ossfile/index.vue b/src/views/system/ossfile/index.vue
new file mode 100644
index 0000000..1c63c3a
--- /dev/null
+++ b/src/views/system/ossfile/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-upload name="file" :showUploadList="false" :action="ossAction" :headers="tokenHeader" :beforeUpload="beforeUpload" @change="handleChange">
+          <a-button type="primary" preIcon="ant-design:upload-outlined">OSS文件上传</a-button>
+        </a-upload>
+        <a-upload
+          name="file"
+          :showUploadList="false"
+          :action="minioAction"
+          :headers="tokenHeader"
+          :beforeUpload="beforeUpload"
+          @change="handleChange"
+        >
+          <a-button type="primary" preIcon="ant-design:upload-outlined">MINIO文件上传</a-button>
+        </a-upload>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="system-ossfile" setup>
+  //ts语法
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { columns, searchFormSchema } from './ossfile.data';
+  import { list, deleteFile, getOssUrl, getMinioUrl } from './ossfile.api';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getToken } from '/@/utils/auth';
+  import {encryptByBase64} from "@/utils/cipher";
+  import { getFileAccessHttpUrl } from '@/utils/common/compUtils';
+
+  const { createMessage } = useMessage();
+  const glob = useGlobSetting();
+  const tokenHeader = { 'X-Access-Token': getToken() };
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    api: list,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    tableSetting: { fullScreen: true },
+    beforeFetch: (params) => {
+      return Object.assign({ column: 'createTime', order: 'desc' }, params);
+    },
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+  /**
+   * 上传url
+   */
+  const ossAction = computed(() => `${glob.uploadUrl}${getOssUrl}`);
+  const minioAction = computed(() => `${glob.uploadUrl}${getMinioUrl}`);
+
+  /**
+   * 预览
+   */
+  function handleView(record) {
+    if (record && record.url) {
+      console.log('glob.onlineUrl', glob.viewUrl);
+      // let filePath = encodeURIComponent(record.url);
+      //update-begin-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，url需要先拼接完整URL再编码
+      let url = encodeURIComponent(encryptByBase64(getFileAccessHttpUrl(record.url)));
+      //update-end-author:scott---date:2026-04-16--for: 【Github #8855】修复文件预览路径处理问题，url需要先拼接完整URL再编码
+      // //文档采用pdf预览高级模式
+      // if(filePath.endsWith(".pdf") || filePath.endsWith(".doc") || filePath.endsWith(".docx")){
+      //   filePath = filePath
+      // }
+      let previewUrl = `${glob.viewUrl}?url=` + url;
+      
+      window.open(previewUrl, '_blank');
+    }
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteFile({ id: record.id }, reload);
+  }
+
+  /**
+   * 上传前事件
+   */
+  function beforeUpload(file) {
+    var fileType = file.type;
+    if (fileType === 'image') {
+      if (fileType.indexOf('image') < 0) {
+        createMessage.warning('请上传图片');
+        return false;
+      }
+    } else if (fileType === 'file') {
+      if (fileType.indexOf('image') >= 0) {
+        createMessage.warning('请上传文件');
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * 文件上传事件
+   */
+  function handleChange(info) {
+    if (info.file.status === 'done') {
+      if (info.file.response.success) {
+        reload();
+        createMessage.success(`${info.file.name} 上传成功!`);
+      } else {
+        createMessage.error(`${info.file.response.message}`);
+      }
+    } else if (info.file.status === 'error') {
+      createMessage.error(`${info.file.response.message}`);
+    }
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '预览',
+        onClick: handleView.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/ossfile/ossfile.api.ts b/src/views/system/ossfile/ossfile.api.ts
new file mode 100644
index 0000000..fe08466
--- /dev/null
+++ b/src/views/system/ossfile/ossfile.api.ts
@@ -0,0 +1,33 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/sys/oss/file/list',
+  deleteFile = '/sys/oss/file/delete',
+  ossUpload = '/sys/oss/file/upload',
+  minioUpload = '/sys/upload/uploadMinio',
+}
+
+/**
+ * oss上传
+ * @param params
+ */
+export const getOssUrl = Api.ossUpload;
+/**
+ * minio上传
+ * @param params
+ */
+export const getMinioUrl = Api.minioUpload;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 删除用户
+ */
+export const deleteFile = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteFile, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
diff --git a/src/views/system/ossfile/ossfile.data.ts b/src/views/system/ossfile/ossfile.data.ts
new file mode 100644
index 0000000..abd0839
--- /dev/null
+++ b/src/views/system/ossfile/ossfile.data.ts
@@ -0,0 +1,30 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '文件名称',
+    dataIndex: 'fileName',
+    width: 120,
+  },
+  {
+    title: '文件地址',
+    dataIndex: 'url',
+    width: 100,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '文件名称',
+    field: 'fileName',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    label: '文件地址',
+    field: 'url',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
diff --git a/src/views/system/position/PositionModal.vue b/src/views/system/position/PositionModal.vue
new file mode 100644
index 0000000..4f7a55f
--- /dev/null
+++ b/src/views/system/position/PositionModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" :width="700">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './position.data';
+  import { saveOrUpdatePosition, getPositionById } from './position.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    //labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      //获取详情
+      data.record = await getPositionById({ id: data.record.id });
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  //设置标题
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增职务级别' : '编辑职务级别'));
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdatePosition(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="less" scoped>
+  :deep(.ant-input-number){
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/system/position/TenantPositionList.vue b/src/views/system/position/TenantPositionList.vue
new file mode 100644
index 0000000..8562cb5
--- /dev/null
+++ b/src/views/system/position/TenantPositionList.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <PositionModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="TenantPositionList" setup>
+  import { onMounted } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { getPositionList, deletePosition, batchDeletePosition, getExportUrl, getImportUrl } from './position.api';
+  import { columns, searchFormSchema } from './position.data';
+  import PositionModal from './PositionModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { tenantSaasMessage } from '@/utils/common/compUtils';
+  import { getTenantId } from '@/utils/auth';
+  const [registerModal, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { onExportXls, onImportXls, tableContext } = useListPage({
+    tableProps: {
+      title: '租户职务列表',
+      api: getPositionList,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 180,
+      },
+      showIndexColumn: true,
+      defSort: {
+        column: '',
+        order: '',
+      },
+      beforeFetch(params) {
+        return Object.assign({ tenantId: getTenantId() }, params);
+      },
+    },
+    exportConfig: {
+      name: '租户职务列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deletePosition({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeletePosition({ ids: selectedRowKeys.value }, () => {
+      selectedRowKeys.value = [];
+      reload();
+    });
+  }
+
+  onMounted(() => {
+    //提示信息
+    tenantSaasMessage('租户职务');
+  });
+</script>
diff --git a/src/views/system/position/index.vue b/src/views/system/position/index.vue
new file mode 100644
index 0000000..482215d
--- /dev/null
+++ b/src/views/system/position/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <PositionModal @register="registerModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="system-position" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { getPositionList, deletePosition, batchDeletePosition, customUpload, getExportUrl, getImportUrl } from './position.api';
+  import { columns, searchFormSchema } from './position.data';
+  import PositionModal from './PositionModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
+    designScope: 'position-template',
+    tableProps: {
+      title: '职务列表',
+      api: getPositionList,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 180,
+      },
+      showIndexColumn: true,
+      defSort: {
+        column: "",
+        order: ""
+      }
+    },
+    exportConfig: {
+      name: '职务列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deletePosition({ id: record.id }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeletePosition({ ids: selectedRowKeys.value }, () => {
+      // 代码逻辑说明: 【QQYUN-8334】批量删除之后，按钮未隐藏，选中记录还在
+      selectedRowKeys.value = [];
+      reload();
+    });
+  }
+</script>
diff --git a/src/views/system/position/position.api.ts b/src/views/system/position/position.api.ts
new file mode 100644
index 0000000..5e5e58b
--- /dev/null
+++ b/src/views/system/position/position.api.ts
@@ -0,0 +1,79 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/position/list',
+  save = '/sys/position/add',
+  edit = '/sys/position/edit',
+  get = '/sys/position/queryById',
+  delete = '/sys/position/delete',
+  importExcel = '/sys/position/importExcel',
+  exportXls = '/sys/position/exportXls',
+  deleteBatch = '/sys/position/deleteBatch',
+}
+/**
+ * 导出api
+ */
+export const getExportUrl = Api.exportXls;
+
+export const getImportUrl = Api.importExcel;
+/**
+ * 查询列表
+ * @param params
+ */
+export const getPositionList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdatePosition = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 查询详情
+ * @param params
+ */
+export const getPositionById = (params) => {
+  return defHttp.get({ url: Api.get, params });
+};
+
+/**
+ * 单条删除
+ * @param params
+ */
+export const deletePosition = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDeletePosition = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 自定义上传
+ * @param customUpload
+ */
+export const customUpload = (params) => {
+  defHttp.uploadFile({ url: Api.importExcel }, params);
+};
diff --git a/src/views/system/position/position.data.ts b/src/views/system/position/position.data.ts
new file mode 100644
index 0000000..bf9e241
--- /dev/null
+++ b/src/views/system/position/position.data.ts
@@ -0,0 +1,70 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { rules } from '/@/utils/helper/validator';
+
+export const columns: BasicColumn[] = [
+  // {
+  //   title: '职务编码',
+  //   dataIndex: 'code',
+  //   width: 200,
+  //   align: 'left',
+  // },
+  {
+    title: '职务级别名称',
+    dataIndex: 'name',
+    align: 'left'
+    // width: 200,
+  },
+  {
+    title: '职务级别(越小级别越高)',
+    dataIndex: 'postLevel',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '职务级别名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '主键',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'name',
+    label: '职务级别名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '职务级别',
+    field: 'postLevel',
+    component: 'InputNumber',
+    required: true,
+    componentProps: {
+      min: 1,
+      max: 99
+    },
+    dynamicRules: ({ model, schema }) => {
+      return [{ required: true, message: '请输入职务级别!' }];
+    },
+  },
+  // {
+  //   field: 'code',
+  //   label: '职务编码',
+  //   component: 'Input',
+  //   required: true,
+  //   dynamicDisabled: ({ values }) => {
+  //     return !!values.id;
+  //   },
+  //   dynamicRules: ({ model, schema }) => {
+  //     return rules.duplicateCheckRule('sys_position', 'code', model, schema, true);
+  //   },
+  // },
+];
diff --git a/src/views/system/role/TenantRoleList.vue b/src/views/system/role/TenantRoleList.vue
new file mode 100644
index 0000000..0408e32
--- /dev/null
+++ b/src/views/system/role/TenantRoleList.vue
@@ -0,0 +1,184 @@
+<template>
+  <BasicTable @register="registerTable">
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="batchHandleDelete">
+              <Icon icon="ant-design:delete-outlined"></Icon>
+              删除
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button
+          >批量操作
+          <Icon icon="mdi:chevron-down"></Icon>
+        </a-button>
+      </a-dropdown>
+      <div style="margin-left: 10px;margin-top: 5px">当前登录租户: <span class="tenant-name">{{loginTenantName}}</span> </div>
+    </template>
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+    </template>
+  </BasicTable>
+  <!--角色用户表格-->
+  <RoleUserTable @register="roleUserDrawer" :disableUserEdit="true"/>
+  <!--角色编辑抽屉-->
+  <RoleDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
+  <!--角色详情-->
+  <RoleDesc @register="registerDesc"></RoleDesc>
+</template>
+<script lang="ts" name="tenant-role-list" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useModal } from '/@/components/Modal';
+  import RoleDesc from './components/RoleDesc.vue';
+  import RoleDrawer from './components/RoleDrawer.vue';
+  import RoleUserTable from './components/RoleUserTable.vue';
+  import { columns, searchFormSchema } from './role.data';
+  import { listByTenant, deleteRole, batchDeleteRole, getExportUrl, getImportUrl } from './role.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { getLoginTenantName } from "/@/views/system/tenant/tenant.api";
+  import { tenantSaasMessage } from "@/utils/common/compUtils";
+  
+  const showFooter = ref(true);
+  const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerModal, { openModal }] = useModal();
+  const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer();
+  
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
+    designScope: 'role-template',
+    tableProps: {
+      title: '租户角色列表',
+      api: listByTenant,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 120,
+      },
+      rowSelection: null,
+      //自定义默认排序
+      defSort: {
+        column: 'id',
+        order: 'desc',
+      },
+    },
+    exportConfig: {
+      name: '角色列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    showFooter.value = true;
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 编辑
+   */
+  function handleEdit(record: Recordable) {
+    showFooter.value = true;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record) {
+    showFooter.value = false;
+    openRoleDesc(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRole({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteRole({ ids: selectedRowKeys.value }, reload);
+  }
+  /**
+   * 角色用户
+   */
+  function handleUser(record) {
+    //onSelectChange(selectedRowKeys)
+    openRoleUserDrawer(true, record);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '用户',
+        onClick: handleUser.bind(null, record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  const loginTenantName = ref<string>('');
+  
+  getTenantName();
+  
+  async function getTenantName(){
+    loginTenantName.value = await getLoginTenantName();
+  }
+
+  onMounted(()=>{
+    tenantSaasMessage('租户角色')
+  })
+</script>
+
+<style scoped lang="less">
+  .tenant-name{
+    text-decoration:underline;
+    margin: 5px;
+    font-size: 15px;
+  }
+</style>
diff --git a/src/views/system/role/components/RoleDataRuleDrawer.vue b/src/views/system/role/components/RoleDataRuleDrawer.vue
new file mode 100644
index 0000000..d5b0596
--- /dev/null
+++ b/src/views/system/role/components/RoleDataRuleDrawer.vue
@@ -0,0 +1,85 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据规则配置" width="450px" destroyOnClose>
+    <a-tabs defaultActiveKey="1">
+      <a-tab-pane tab="数据规则" key="1">
+        <a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
+          <a-row>
+            <a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
+              <a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
+            </a-col>
+
+            <a-col :span="24">
+              <div style="width: 100%; margin-top: 15px">
+                <a-button @click="saveDataRuleForRole" type="primary" size="small"> <Icon icon="ant-design:save-outlined"></Icon>点击保存</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-checkbox-group>
+        <div v-else><h3>无配置信息!</h3></div>
+      </a-tab-pane>
+    </a-tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { useMessage } from '/src/hooks/web/useMessage';
+  import { queryDataRule, saveDataRule } from '../role.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  // 声明数据
+  const functionId = ref('');
+  const roleId = ref('');
+  const dataRuleList = ref([]);
+  const dataRuleChecked = ref([]);
+
+  /**
+   * 数据
+   */
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false });
+    //权限的id
+    functionId.value = data.functionId;
+    //角色的id
+    roleId.value = data.roleId;
+    //查询数据
+    const res = await queryDataRule({ functionId: unref(functionId), roleId: unref(roleId) });
+    if (res.success) {
+      dataRuleList.value = res.result.datarule;
+      if (res.result.drChecked) {
+        dataRuleChecked.value = res.result.drChecked.split(',');
+      }
+    }
+  });
+
+  /**
+   * 重置
+   */
+  function reset() {
+    functionId.value = '';
+    roleId.value = '';
+    dataRuleList.value = [];
+    dataRuleChecked.value = [];
+  }
+
+  /**
+   * 提交
+   */
+  async function saveDataRuleForRole() {
+    if (!unref(dataRuleChecked) || unref(dataRuleChecked).length == 0) {
+      createMessage.warning('请注意，现未勾选任何数据权限!');
+    }
+    let params = {
+      permissionId: unref(functionId),
+      roleId: unref(roleId),
+      dataRuleIds: unref(dataRuleChecked).join(','),
+    };
+    await saveDataRule(params);
+    //关闭弹窗
+    closeDrawer();
+    //刷新列表
+    emit('success');
+  }
+</script>
diff --git a/src/views/system/role/components/RoleDesc.vue b/src/views/system/role/components/RoleDesc.vue
new file mode 100644
index 0000000..2a4edc6
--- /dev/null
+++ b/src/views/system/role/components/RoleDesc.vue
@@ -0,0 +1,18 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="角色详情" width="500px" destroyOnClose>
+    <Description :column="1" :data="roleData" :schema="formDescSchema" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, useAttrs } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { formDescSchema } from '../role.data';
+  import { Description, useDescription } from '/@/components/Description/index';
+  const emit = defineEmits(['register']);
+  const attrs = useAttrs();
+  const roleData = ref({});
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ confirmLoading: false });
+    roleData.value = data.record;
+  });
+</script>
diff --git a/src/views/system/role/components/RoleDrawer.vue b/src/views/system/role/components/RoleDrawer.vue
new file mode 100644
index 0000000..2d4c14e
--- /dev/null
+++ b/src/views/system/role/components/RoleDrawer.vue
@@ -0,0 +1,53 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="500px" @ok="handleSubmit" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, useAttrs } from 'vue';
+  import { BasicForm, useForm } from '/src/components/Form';
+  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { BasicTree, TreeItem } from '/src/components/Tree';
+  import { formSchema } from '../role.data';
+  import { saveOrUpdateRole } from '../role.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    isUpdate.value = !!data?.isUpdate;
+    setDrawerProps({ confirmLoading: false });
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    //禁用表单
+    setProps({ disabled: !attrs.showFooter });
+  });
+  /**
+   * 标题
+   */
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+  /**
+   * 提交
+   */
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRole(values, isUpdate.value);
+      closeDrawer();
+      emit('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/role/components/RoleIndexModal.vue b/src/views/system/role/components/RoleIndexModal.vue
new file mode 100644
index 0000000..07b35d3
--- /dev/null
+++ b/src/views/system/role/components/RoleIndexModal.vue
@@ -0,0 +1,55 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="首页配置" @ok="handleSubmit" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { roleIndexFormSchema } from '../role.data';
+  import { saveOrUpdateRoleIndex, queryIndexByCode } from '../role.api';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 150,
+    schemas: roleIndexFormSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    setFieldsValue({ roleCode: data.roleCode });
+    let res = await queryIndexByCode({ roleCode: data.roleCode });
+    isUpdate.value = !!res.result?.id;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...res.result,
+      });
+    }
+  });
+
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateRoleIndex(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success', { isUpdate: isUpdate.value, values });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/role/components/RolePermissionDrawer.vue b/src/views/system/role/components/RolePermissionDrawer.vue
new file mode 100644
index 0000000..7e7e2ea
--- /dev/null
+++ b/src/views/system/role/components/RolePermissionDrawer.vue
@@ -0,0 +1,306 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
+    <template #title>
+      角色权限配置
+      <a-dropdown>
+        <a-button class="more-icon">
+          更多操作
+          <Icon icon="ant-design:down-outlined" size="14px" style="position: relative;top: 1px;right: 5px"></Icon>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">选择全部</a-menu-item>
+            <a-menu-item key="cancelCheck">取消选择</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">展开全部</a-menu-item>
+            <a-menu-item key="closeAll">折叠全部</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">层级关联</a-menu-item>
+            <a-menu-item key="standAlone">层级独立</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <BasicTree
+      ref="treeRef"
+      checkable
+      :treeData="treeData"
+      :checkedKeys="checkedKeys"
+      :expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :clickRowToExpand="false"
+      :checkStrictly="true"
+      title="所拥有的的权限"
+      @check="onCheck"
+      @select="onTreeNodeSelect"
+    >
+      <template #title="{ slotTitle, ruleFlag }">
+        {{ slotTitle }}
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+      </template>
+    </BasicTree>
+    <!--右下角按钮-->
+    <template #footer>
+      <!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
+      <a-button @click="closeDrawer">取消</a-button>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
+    </template>
+    <RoleDataRuleDrawer @register="registerDrawer1" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { PopConfirmButton } from '/@/components/Button';
+  import RoleDataRuleDrawer from './RoleDataRuleDrawer.vue';
+  import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../role.api';
+  import { useI18n } from "/@/hooks/web/useI18n";
+  import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  const emit = defineEmits(['register']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([]);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  //树的选择节点信息
+  const checkedKeys = ref<any>([]);
+  const defaultCheckedKeys = ref([]);
+  //树的选中的节点信息
+  const selectedKeys = ref([]);
+  const roleId = ref('');
+  //树的实例
+  const treeRef = ref(null);
+  const loading = ref(false);
+
+  //展开折叠的key
+  const expandedKeys = ref<any>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref<boolean>(false);
+  const [registerDrawer1, { openDrawer: openDataRuleDrawer }] = useDrawer();
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false, loading: true });
+    roleId.value = data.roleId;
+    //初始化数据
+    const roleResult = await queryTreeListForRole();
+    // 代码逻辑说明: 【QQYUN-8355】角色权限配置的菜单翻译
+    treeData.value = translateTitle(roleResult.treeList);
+    allTreeKeys.value = roleResult.ids;
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    if (localData) {
+      const obj = JSON.parse(localData);
+      obj.level && treeMenuClick({ key: obj.level });
+      obj.expand && treeMenuClick({ key: obj.expand });
+    } else {
+      expandedKeys.value = roleResult.ids;
+    }
+    //初始化角色菜单数据
+    const permResult = await queryRolePermission({ roleId: unref(roleId) });
+    checkedKeys.value = permResult;
+    defaultCheckedKeys.value = permResult;
+    setDrawerProps({ loading: false });
+  });
+  /**
+  * 2024-02-28
+  * liaozhiyang
+  * 翻译菜单名称
+   */
+  function translateTitle(data) {
+    if (data?.length) {
+      data.forEach((item) => {
+        if (item.slotTitle) {
+          const { t } = useI18n();
+          if (item.slotTitle.includes("t('") && t) {
+            item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateTitle(item.children);
+        }
+      });
+    }
+    return data;
+  }
+  /**
+   * 点击选中
+   * 2024-04-26
+   * liaozhiyang
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 2024-04-26
+   * liaozhiyang
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+
+  /**
+   * 选中节点，打开数据权限抽屉
+   */
+  function onTreeNodeSelect(key) {
+    if (key && key.length > 0) {
+      selectedKeys.value = key;
+    }
+    openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
+  }
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = [];
+    allTreeKeys.value = [];
+    checkedKeys.value = [];
+    defaultCheckedKeys.value = [];
+    selectedKeys.value = [];
+    roleId.value = '';
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      roleId: unref(roleId),
+      permissionIds: unref(getTree().getCheckedKeys()).join(','),
+      lastpermissionIds: unref(defaultCheckedKeys).join(','),
+    };
+    // 代码逻辑说明: issues/352 VUE角色授权重复保存
+    if(loading.value===false){
+      await doSave(params)
+    }else{
+      console.log('请等待上次执行完毕!');
+    }
+    if(exit){
+      // 如果关闭
+      closeDrawer();
+    }else{
+      // 没有关闭需要重新获取选中数据
+      const permResult = await queryRolePermission({ roleId: unref(roleId) });
+      defaultCheckedKeys.value = permResult;
+    }
+  }
+
+  // VUE角色授权重复保存 #352
+  async function doSave(params) {
+    loading.value = true;
+    try {
+      await saveRolePermission(params);
+    } catch (e) {
+      loading.value = false;
+    }
+    setTimeout(()=>{
+      loading.value = false;
+    }, 500)
+  }
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 2024-05-31
+   * liaozhiyang
+   * 【TV360X-590】角色授权弹窗操作缓存
+   * */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  // 代码逻辑说明: 抽屉弹窗标题图标下拉样式------------
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+/*    font-size: 20px !important;
+    color: black;
+    display: inline-flex;*/
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+</style>
diff --git a/src/views/system/role/components/RoleUserTable.vue b/src/views/system/role/components/RoleUserTable.vue
new file mode 100644
index 0000000..f9d626c
--- /dev/null
+++ b/src/views/system/role/components/RoleUserTable.vue
@@ -0,0 +1,198 @@
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="角色用户" width="800" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleCreate" v-if="!disableUserEdit"> 新增用户</a-button>
+        <a-button type="primary" @click="handleSelect"> 已有用户</a-button>
+
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="bx:bx-unlink"></Icon>
+                取消关联
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <!--用户操作抽屉-->
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!--用户选择弹窗-->
+    <UseSelectModal @register="registerModal" @select="selectOk" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
+  import { useModal } from '/src/components/Modal';
+  import UserDrawer from '../../user/UserDrawer.vue';
+  import UseSelectModal from './UseSelectModal.vue';
+  import { userList, deleteUserRole, batchDeleteUserRole, addUserRole } from '../role.api';
+  import { userColumns, searchUserFormSchema } from '../role.data';
+  import { getUserRoles } from '../../user/user.api';
+
+  const emit = defineEmits(['register', 'hideUserList']);
+  const props = defineProps({
+    disableUserEdit: {type:Boolean,default:false}
+  })
+  
+  const checkedKeys = ref<Array<string | number>>([]);
+  const roleId = ref('');
+  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    roleId.value = data.id;
+    setProps({ searchInfo: { roleId: data.id } });
+    reload();
+  });
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //注册drawer
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload, updateTableDataRecord, setProps }] = useTable({
+    title: '用户列表',
+    api: userList,
+    columns: userColumns,
+    formConfig: {
+      // 代码逻辑说明: 【QQYUN-5685】3、租户角色下,查询居左显示
+      labelWidth: 60,
+      schemas: searchUserFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    // 【issues/1064】列设置的 cacheKey
+    tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
+    canResize: false,
+    rowKey: 'id',
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+      selectedroles: [roleId.value],
+      isRole: true,
+    });
+  }
+  /**
+   * 编辑
+   */
+  async function handleEdit(record: Recordable) {
+    try {
+      const userRoles = await getUserRoles({ userid: record.id });
+      if (userRoles && userRoles.length > 0) {
+        record.selectedroles = userRoles;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      isRole: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteUserRole({ userId: record.id, roleId: roleId.value }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteUserRole({ userIds: checkedKeys.value.join(','), roleId: roleId.value }, () => {
+      // 代码逻辑说明: 【TV360X-1655】批量取消关联之后清空选中记录
+      reload();
+      checkedKeys.value = [];
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+  /**
+   * 选择已有用户
+   */
+  function handleSelect() {
+    openModal(true);
+  }
+  /**
+   * 添加已有用户
+   */
+  async function selectOk(val) {
+    await addUserRole({ roleId: roleId.value, userIdList: val }, reload);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => !props.disableUserEdit,
+      },
+      {
+        label: '取消关联',
+        popConfirm: {
+          title: '是否确认取消关联',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped>
+  /*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+  :deep(.ant-form-item-control-input-content){
+    text-align: left;
+  }
+  /*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+</style>
diff --git a/src/views/system/role/components/UseSelectModal.vue b/src/views/system/role/components/UseSelectModal.vue
new file mode 100644
index 0000000..b43c34b
--- /dev/null
+++ b/src/views/system/role/components/UseSelectModal.vue
@@ -0,0 +1,67 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户选择列表" width="1000px" @ok="handleSubmit" destroyOnClose @openChange="handleOpenChange">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, toRaw } from 'vue';
+  import { BasicModal, useModalInner } from '/src/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/src/components/Table';
+  import { userColumns, searchUserFormSchema } from '../role.data';
+  import { list } from '../../user/user.api';
+  // 声明Emits
+  const emit = defineEmits(['select', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    api: list,
+    rowKey: 'id',
+    columns: userColumns,
+    formConfig: {
+      labelWidth: 60,
+      schemas: searchUserFormSchema,
+      baseRowStyle: { maxHeight: '20px' },
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+  });
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  const handleOpenChange = (visible) => {
+    // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
+    if (visible) {
+      checkedKeys.value = [];
+    }
+    // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
+  };
+
+  //提交事件
+  function handleSubmit() {
+    setModalProps({ confirmLoading: true });
+    //关闭弹窗
+    closeModal();
+    //刷新列表
+    emit('select', toRaw(unref(checkedKeys)));
+    setModalProps({ confirmLoading: false });
+  }
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..d73bc47
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <BasicTable @register="registerTable">
+    <template #tableTitle>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+      <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+      <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="1" @click="batchHandleDelete">
+              <Icon icon="ant-design:delete-outlined"></Icon>
+              删除
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button
+          >批量操作
+          <Icon icon="mdi:chevron-down"></Icon>
+        </a-button>
+      </a-dropdown>
+    </template>
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+    </template>
+  </BasicTable>
+  <!--角色用户表格-->
+  <RoleUserTable @register="roleUserDrawer" />
+  <!--角色编辑抽屉-->
+  <RoleDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
+  <!--角色详情-->
+  <RoleDesc @register="registerDesc"></RoleDesc>
+  <!--角色菜单授权抽屉-->
+  <RolePermissionDrawer @register="rolePermissionDrawer" />
+  <!--角色首页配置-->
+  <RoleIndexModal @register="registerIndexModal" />
+</template>
+<script lang="ts" name="system-role" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useModal } from '/@/components/Modal';
+  import RoleDrawer from './components/RoleDrawer.vue';
+  import RoleDesc from './components/RoleDesc.vue';
+  import RolePermissionDrawer from './components/RolePermissionDrawer.vue';
+  import RoleIndexModal from './components/RoleIndexModal.vue';
+  import RoleUserTable from './components/RoleUserTable.vue';
+  import { columns, searchFormSchema } from './role.data';
+  import { list, deleteRole, batchDeleteRole, getExportUrl, getImportUrl } from './role.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  const showFooter = ref(true);
+  const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerIndexModal, { openModal: openIndexModal }] = useModal();
+  const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
+  const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
+    designScope: 'role-template',
+    tableProps: {
+      title: '系统角色列表',
+      api: list,
+      columns: columns,
+      formConfig: {
+        // 代码逻辑说明: 【QQYUN-5873】查询区域lablel默认居左
+        labelWidth:65,
+        rowProps: { gutter: 24 },
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 120,
+      },
+      rowSelection: null,
+      //自定义默认排序
+      defSort: {
+        column: 'id',
+        order: 'desc',
+      },
+    },
+    exportConfig: {
+      name: '角色列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增
+   */
+  function handleCreate() {
+    showFooter.value = true;
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+  /**
+   * 编辑
+   */
+  function handleEdit(record: Recordable) {
+    showFooter.value = true;
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record) {
+    showFooter.value = false;
+    openRoleDesc(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRole({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteRole({ ids: selectedRowKeys.value }, reload);
+  }
+  /**
+   * 角色授权弹窗
+   */
+  function handlePerssion(record) {
+    openRolePermissionDrawer(true, { roleId: record.id });
+  }
+  /**
+   * 首页配置弹窗
+   */
+  function handleIndexConfig(roleCode) {
+    openIndexModal(true, { roleCode });
+  }
+  /**
+   * 角色用户
+   */
+  function handleUser(record) {
+    //onSelectChange(selectedRowKeys)
+    openRoleUserDrawer(true, record);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '用户',
+        onClick: handleUser.bind(null, record),
+      },
+      {
+        label: '授权',
+        onClick: handlePerssion.bind(null, record),
+      },
+    ];
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/role/role.api.ts b/src/views/system/role/role.api.ts
new file mode 100644
index 0000000..0972dbc
--- /dev/null
+++ b/src/views/system/role/role.api.ts
@@ -0,0 +1,188 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/role/list',
+  listByTenant = '/sys/role/listByTenant',
+  save = '/sys/role/add',
+  edit = '/sys/role/edit',
+  deleteRole = '/sys/role/delete',
+  deleteBatch = '/sys/role/deleteBatch',
+  exportXls = '/sys/role/exportXls',
+  importExcel = '/sys/role/importExcel',
+  isRoleExist = '/sys/role/checkRoleCode',
+  queryTreeListForRole = '/sys/role/queryTreeList',
+  queryRolePermission = '/sys/permission/queryRolePermission',
+  saveRolePermission = '/sys/permission/saveRolePermission',
+  queryDataRule = '/sys/role/datarule',
+  getParentDesignList = '/act/process/extActDesignFlowData/getDesFormFlows',
+  getRoleDegisnList = '/joa/designform/designFormCommuse/getRoleDegisnList',
+  saveRoleDesign = '/joa/designform/designFormCommuse/sysRoleDesignAdd',
+  userList = '/sys/user/userRoleList',
+  deleteUserRole = '/sys/user/deleteUserRole',
+  batchDeleteUserRole = '/sys/user/deleteUserRoleBatch',
+  addUserRole = '/sys/user/addSysUserRole',
+  saveRoleIndex = '/sys/sysRoleIndex/add',
+  editRoleIndex = '/sys/sysRoleIndex/edit',
+  queryIndexByCode = '/sys/sysRoleIndex/queryByCode',
+}
+/**
+ * 导出api
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 系统角色列表
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+/**
+ * 租户角色列表
+ * @param params
+ */
+export const listByTenant = (params) => defHttp.get({ url: Api.listByTenant, params });
+
+/**
+ * 删除角色
+ */
+export const deleteRole = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteRole, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除角色
+ * @param params
+ */
+export const batchDeleteRole = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新角色
+ * @param params
+ */
+export const saveOrUpdateRole = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 编码校验
+ * @param params
+ */
+// 代码逻辑说明: 【QQYUN-7415】表单调用接口进行校验的添加防抖
+let timer;
+export const isRoleExist = (params) => {
+  return new Promise((resolve, rejected) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      defHttp
+        .get({ url: Api.isRoleExist, params }, { isTransformResponse: false })
+        .then((res) => {
+          resolve(res);
+        })
+        .catch((error) => {
+          rejected(error);
+        });
+    }, 500);
+  });
+};
+/**
+ * 根据角色查询树信息
+ */
+export const queryTreeListForRole = () => defHttp.get({ url: Api.queryTreeListForRole });
+/**
+ * 查询角色权限
+ */
+export const queryRolePermission = (params) => defHttp.get({ url: Api.queryRolePermission, params });
+/**
+ * 保存角色权限
+ */
+export const saveRolePermission = (params) => defHttp.post({ url: Api.saveRolePermission, params });
+/**
+ * 查询角色数据规则
+ */
+export const queryDataRule = (params) =>
+  defHttp.get({ url: `${Api.queryDataRule}/${params.functionId}/${params.roleId}` }, { isTransformResponse: false });
+/**
+ * 保存角色数据规则
+ */
+export const saveDataRule = (params) => defHttp.post({ url: Api.queryDataRule, params });
+/**
+ * 获取表单数据
+ * @return List<Map>
+ */
+export const getParentDesignList = () => defHttp.get({ url: Api.getParentDesignList });
+/**
+ * 获取角色表单数据
+ * @return List<Map>
+ */
+export const getRoleDegisnList = (params) => defHttp.get({ url: Api.getRoleDegisnList, params });
+/**
+ * 提交角色工单信息
+ */
+export const saveRoleDesign = (params) => defHttp.post({ url: Api.saveRoleDesign, params });
+/**
+ * 角色列表接口
+ * @param params
+ */
+export const userList = (params) => defHttp.get({ url: Api.userList, params });
+/**
+ * 删除角色用户
+ */
+export const deleteUserRole = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteUserRole, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除角色用户
+ * @param params
+ */
+export const batchDeleteUserRole = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.batchDeleteUserRole, params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 添加已有用户
+ */
+export const addUserRole = (params, handleSuccess) => {
+  return defHttp.post({ url: Api.addUserRole, params }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate 是否是更新数据
+ */
+export const saveOrUpdateRoleIndex = (params, isUpdate) => {
+  let url = isUpdate ? Api.editRoleIndex : Api.saveRoleIndex;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 根据code查询首页配置
+ * @param params
+ */
+export const queryIndexByCode = (params) => defHttp.get({ url: Api.queryIndexByCode, params }, { isTransformResponse: false });
diff --git a/src/views/system/role/role.data.ts b/src/views/system/role/role.data.ts
new file mode 100644
index 0000000..9195102
--- /dev/null
+++ b/src/views/system/role/role.data.ts
@@ -0,0 +1,191 @@
+import { FormSchema } from '/@/components/Table';
+import { isRoleExist } from './role.api';
+export const columns = [
+  {
+    title: '角色名称',
+    dataIndex: 'roleName',
+    width: 100,
+  },
+  {
+    title: '角色编码',
+    dataIndex: 'roleCode',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 100,
+  },
+];
+/**
+ * 角色用户Columns
+ */
+export const userColumns = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status_dictText',
+    width: 80,
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'roleCode',
+    label: '角色编码',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+/**
+ * 角色用户搜索form
+ */
+export const searchUserFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '用户账号',
+    component: 'JInput',
+    colProps: { span: 8 },
+    labelWidth: 74,
+  },
+  {
+    field: 'realname',
+    label: '用户名称',
+    component: 'JInput',
+    colProps: { span: 8 },
+    labelWidth: 74,
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'roleName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'roleCode',
+    label: '角色编码',
+    required: true,
+    component: 'Input',
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ values, model }) => {
+      console.log('values:', values);
+      return [
+        {
+          required: true,
+          validator: (_, value) => {
+            if (!value) {
+              return Promise.reject('请输入角色编码');
+            }
+            if (values) {
+              return new Promise((resolve, reject) => {
+                isRoleExist({ id: model.id, roleCode: value })
+                  .then((res) => {
+                    res.success ? resolve() : reject(res.message || '校验失败');
+                  })
+                  .catch((err) => {
+                    reject(err.message || '验证失败');
+                  });
+              });
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    label: '备注',
+    field: 'description',
+    component: 'InputTextArea',
+  },
+];
+
+export const formDescSchema = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+  },
+  {
+    field: 'roleCode',
+    label: '角色编码',
+  },
+  {
+    label: '备注',
+    field: 'description',
+  },
+];
+
+export const roleIndexFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '角色编码',
+    field: 'roleCode',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    label: '首页路由',
+    field: 'url',
+    component: 'Input',
+    required: true,
+    helpMessage: '首页路由的访问地址',
+  },
+  {
+    label: '组件地址',
+    field: 'component',
+    component: 'Input',
+    helpMessage: '首页路由的组件地址',
+    componentProps: {
+      placeholder: '请输入前端组件',
+    },
+    required: true,
+  },
+  {
+    field: 'route',
+    label: '是否路由菜单',
+    helpMessage: '非路由菜单设置成首页，需开启',
+    component: 'Switch',
+    defaultValue: true
+  },
+  {
+    label: '优先级',
+    field: 'priority',
+    component: 'InputNumber',
+  },
+  {
+    label: '是否开启',
+    field: 'status',
+    component: 'JSwitch',
+    componentProps: {
+      options: ['1', '0'],
+    },
+  },
+];
diff --git a/src/views/system/tableWhiteList/SysTableWhiteList.api.ts b/src/views/system/tableWhiteList/SysTableWhiteList.api.ts
new file mode 100644
index 0000000..ee725e9
--- /dev/null
+++ b/src/views/system/tableWhiteList/SysTableWhiteList.api.ts
@@ -0,0 +1,69 @@
+import {defHttp} from '/@/utils/http/axios';
+import {Modal} from 'ant-design-vue';
+
+enum Api {
+  list = '/sys/tableWhiteList/list',
+  save = '/sys/tableWhiteList/add',
+  edit = '/sys/tableWhiteList/edit',
+  deleteOne = '/sys/tableWhiteList/delete',
+  deleteBatch = '/sys/tableWhiteList/deleteBatch',
+  importExcel = '/sys/tableWhiteList/importExcel',
+  exportXls = '/sys/tableWhiteList/exportXls',
+}
+
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+
+/**
+ * 删除单个
+ * @param params
+ * @param handleSuccess
+ */
+export const deleteOne = (params, handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ * @param handleSuccess
+ */
+export const batchDelete = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({
+        url: Api.deleteBatch,
+        data: params
+      }, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ * @param isUpdate 是否是更新数据
+ */
+export const saveOrUpdate = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({url: url, params});
+}
diff --git a/src/views/system/tableWhiteList/SysTableWhiteList.data.ts b/src/views/system/tableWhiteList/SysTableWhiteList.data.ts
new file mode 100644
index 0000000..473fc46
--- /dev/null
+++ b/src/views/system/tableWhiteList/SysTableWhiteList.data.ts
@@ -0,0 +1,76 @@
+import {BasicColumn, FormSchema} from '/@/components/Table';
+
+const statusOptions = [
+  {label: '禁用', value: '0'},
+  {label: '启用', value: '1'},
+]
+
+export const columns: BasicColumn[] = [
+  {
+    title: '允许的表名',
+    dataIndex: 'tableName',
+  },
+  {
+    title: '允许的字段名',
+    dataIndex: 'fieldName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    customRender({text}) {
+      const find = statusOptions.find(opt => opt.value === text);
+      return find?.label || '未知';
+    }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '允许的表名',
+    field: 'tableName',
+    component: 'Input',
+  },
+  {
+    label: '允许的字段名',
+    field: 'fieldName',
+    component: 'Input',
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'Select',
+    componentProps: {
+      options: statusOptions,
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {label: '', field: 'id', component: 'Input', show: false},
+  {
+    label: '允许的表名',
+    field: 'tableName',
+    component: 'Input',
+    required: true,
+  },
+  {
+    label: '允许的字段名',
+    field: 'fieldName',
+    component: 'Input',
+    required: true,
+    helpMessage: '多个用逗号分割',
+  },
+  {
+    label: '状态',
+    field: 'status',
+    component: 'Select',
+    defaultValue: '1',
+    componentProps: {
+      options: statusOptions,
+    },
+  },
+];
diff --git a/src/views/system/tableWhiteList/SysTableWhiteListList.vue b/src/views/system/tableWhiteList/SysTableWhiteListList.vue
new file mode 100644
index 0000000..65451f6
--- /dev/null
+++ b/src/views/system/tableWhiteList/SysTableWhiteListList.vue
@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined">
+          新增
+        </a-button>
+<!--        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">-->
+<!--          导出-->
+<!--        </a-button>-->
+<!--        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">-->
+<!--          导入-->
+<!--        </j-upload-button>-->
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button>
+            批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction
+          :actions="getTableAction(record)"
+          :dropDownActions="getDropDownAction(record)"
+        />
+      </template>
+    </BasicTable>
+
+    <!-- 表单区域 -->
+    <SysTableWhiteListModal @register="registerModal" @success="handleSuccess"/>
+  </div>
+</template>
+
+<script lang="ts" name="ahh-sysTableWhiteList" setup>
+import {BasicTable, TableAction} from '/@/components/Table';
+import {useModal} from '/@/components/Modal';
+import {useListPage} from '/@/hooks/system/useListPage'
+import SysTableWhiteListModal from './modules/SysTableWhiteListModal.vue'
+import {columns, searchFormSchema} from './SysTableWhiteList.data';
+import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from './SysTableWhiteList.api';
+
+//注册model
+const [registerModal, {openModal}] = useModal();
+//注册table数据
+const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
+  tableProps: {
+    title: '系统表白名单',
+    api: list,
+    columns,
+    canResize: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      showAdvancedButton: true,
+    },
+    actionColumn: {
+      width: 120,
+    },
+  },
+  exportConfig: {
+    name: "系统表白名单",
+    url: getExportUrl,
+  },
+  importConfig: {
+    url: getImportUrl
+  },
+})
+
+const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext
+
+/**
+ * 新增事件
+ */
+function handleAdd() {
+  openModal(true, {
+    isUpdate: false,
+    showFooter: true,
+  });
+}
+
+/**
+ * 编辑事件
+ */
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: true,
+  });
+}
+
+/**
+ * 详情
+ */
+function handleDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await deleteOne({id: record.id}, reload);
+}
+
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
+  await batchDelete({ids: selectedRowKeys.value}, reload);
+}
+
+/**
+ * 成功回调
+ */
+function handleSuccess({isUpdate, values}) {
+  reload();
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '编辑',
+      onClick: handleEdit.bind(null, record),
+    }
+  ]
+}
+
+/**
+ * 下拉操作栏
+ */
+function getDropDownAction(record) {
+  return [
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    }, {
+      label: '删除',
+      popConfirm: {
+        title: '是否确认删除',
+        confirm: handleDelete.bind(null, record),
+      }
+    }
+  ]
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/system/tableWhiteList/modules/SysTableWhiteListModal.vue b/src/views/system/tableWhiteList/modules/SysTableWhiteListModal.vue
new file mode 100644
index 0000000..d5d7c57
--- /dev/null
+++ b/src/views/system/tableWhiteList/modules/SysTableWhiteListModal.vue
@@ -0,0 +1,73 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="title"
+    width="40%"
+    v-bind="$attrs"
+    @ok="handleSubmit"
+  >
+    <div class="content"> 
+      <BasicForm  @register="registerForm"/>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref, unref} from 'vue';
+import {BasicModal, useModalInner} from '/@/components/Modal';
+import {BasicForm, useForm} from '/@/components/Form/index';
+import {formSchema} from '../SysTableWhiteList.data';
+import {saveOrUpdate} from '../SysTableWhiteList.api';
+// Emits声明
+const emit = defineEmits(['register', 'success']);
+const isUpdate = ref(true);
+//表单配置
+const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
+  labelWidth: 120,
+  wrapperCol: null,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+//表单赋值
+const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+  //重置表单
+  await resetFields();
+  setModalProps({
+    confirmLoading: false,
+    showCancelBtn: data?.showFooter,
+    showOkBtn: data?.showFooter
+  });
+  isUpdate.value = !!data?.isUpdate;
+  if (unref(isUpdate)) {
+    //表单赋值
+    await setFieldsValue({
+      ...data.record,
+    });
+  }
+  setProps({ disabled: !data?.showFooter })
+});
+//设置标题
+const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
+
+//表单提交事件
+async function handleSubmit(v) {
+  try {
+    let values = await validate();
+    setModalProps({confirmLoading: true});
+    //提交表单
+    await saveOrUpdate(values, isUpdate.value);
+    //关闭弹窗
+    closeModal();
+    //刷新列表
+    emit('success', {isUpdate: isUpdate.value, values});
+  } finally {
+    setModalProps({confirmLoading: false});
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .content {
+    padding: 20px 8% 0 4%;
+  }
+</style>
diff --git a/src/views/system/tenant/TenantUserList.vue b/src/views/system/tenant/TenantUserList.vue
new file mode 100644
index 0000000..23c9936
--- /dev/null
+++ b/src/views/system/tenant/TenantUserList.vue
@@ -0,0 +1,377 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate">新增</a-button>
+        <a-button
+            preIcon="ant-design:user-add-outlined"
+            type="primary"
+            @click="handleInvitation"
+            style="margin-right: 5px">
+            邀请用户加入
+        </a-button>
+        <JThirdAppButton biz-type="user" :selected-row-keys="selectedRowKeys" syncToApp syncToLocal @sync-finally="onSyncFinally" />
+        <a-button type="primary" @click="openQuitModal(true, {})" preIcon="ant-design:user-delete-outlined">离职人员</a-button>
+        <div style="margin-left: 10px;margin-top: 5px"> 当前登录租户: <span class="tenant-name">{{loginTenantName}}</span> </div>
+        <a-tooltip title="租户用户更多操作说明">
+          <a-icon type="question-circle" style="margin-left: 8px; cursor: pointer " @click="tipShow = true"/>
+        </a-tooltip>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!--用户抽屉-->
+    <TenantUserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!-- 离职人员列弹窗 -->
+    <UserQuitModal @register="registerQuitModal" @success="reload" />
+    <!--  变更拥有者弹窗  -->
+    <UserSelectModal @register="registerUserModal" :excludeUserIdList="excludeUserIdList" :maxSelectCount="1" @getSelectResult="selectResult" />
+    <!--  套餐分配弹窗  -->
+    <TenantPackAllotModal @register="registerPackAllotModal"></TenantPackAllotModal>
+    <!--  邀请人弹窗  -->
+    <TenantInviteUserModal @register="registerSelUserModal" @inviteOk="handleInviteUserOk" />
+    <a-modal v-model:open="tipShow" :footer="null" title="租户用户更多操作说明" :width="800">
+      <ul class="user-tenant-tip">
+        <li>移除：将用户从当前租户中移除</li>
+        <li>删除：仅可删除当天创建的用户，删除后可在系统用户回收站恢复</li>
+        <li>离职：非租户创建者可进行离职操作，离职员工可在离职人员列表查看</li>
+        <li>交接：租户创建者可进行租户交接，交接后员工信息可在离职人员列表查看</li>
+      </ul>
+      <div style="height: 10px"></div>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" name="tenant-system-user" setup>
+  //ts语法
+  import { onMounted, ref, unref } from 'vue';
+  import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
+  import UserDrawer from '../user/UserDrawer.vue';
+  import JThirdAppButton from '/@/components/jeecg/thirdApp/JThirdAppButton.vue';
+  import UserQuitModal from '../user/UserQuitModal.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { columns, searchFormSchema } from '../user/user.data';
+  import { list , deleteUser, batchDeleteUser, getImportUrl, getExportUrl, frozenBatch, getUserTenantPageList, updateUserTenantStatus } from '../user/user.api';
+  // import { usePermission } from '/@/hooks/web/usePermission'
+  // const { hasPermission } = usePermission();
+  import { userTenantColumns, userTenantFormSchema } from '../user/user.data';
+  import { useUserStore } from '/@/store/modules/user';
+  import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue';
+  import { getTenantId } from "/@/utils/auth";
+  import { changeOwenUserTenant } from "/@/views/system/usersetting/UserSetting.api";
+  import {getLoginTenantName, invitationUserJoin, leaveTenant} from "/@/views/system/tenant/tenant.api";
+  import TenantUserDrawer from './components/TenantUserDrawer.vue';
+  import { sameDay, tenantSaasMessage } from "@/utils/common/compUtils";
+  import TenantPackAllotModal from './components/TenantPackAllotModal.vue'
+  import TenantInviteUserModal from "@/views/system/tenant/components/TenantInviteUserModal.vue";
+
+  const { createMessage, createConfirm } = useMessage();
+
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //离职代理人model
+  const [registerQuitAgentModal, { openModal: openQuitAgentModal }] = useModal();
+  //离职用户列表model
+  const [registerQuitModal, { openModal: openQuitModal }] = useModal();
+  //分配套餐弹窗
+  const [registerPackAllotModal, { openModal: openPackAllotModal }] = useModal();
+  const userStore = useUserStore();
+  const createBy = userStore.getUserInfo.username;
+  //弹窗提示显示
+  const tipShow = ref<boolean>(false);
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    designScope: 'user-list',
+    tableProps: {
+      title: '租户用户列表',
+      api: getUserTenantPageList,
+      columns: userTenantColumns,
+      size: 'small',
+      formConfig: {
+        schemas: userTenantFormSchema,
+      },
+      actionColumn: {
+        width: 120,
+      },
+      beforeFetch: (params) => {
+        params['userTenantStatus'] = '1,3,4';
+        return Object.assign({ column: 'createTime', order: 'desc' }, params);
+      },
+    },
+  });
+
+  //注册table数据
+  const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: true,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  async function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+      tenantSaas: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  async function handleDetail(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+      tenantSaas: true,
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+  }
+
+  /**
+   *同步钉钉和微信回调
+   */
+  function onSyncFinally({ isToLocal }) {
+    // 同步到本地时刷新下数据
+    if (isToLocal) {
+      reload();
+    }
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        // ifShow: () => hasPermission('system:user:edit'),
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      {
+        label: '查看详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '移除用户',
+        onClick: handleLeave.bind(null, record.id),
+      },
+      {
+        label: '删除用户',
+        popConfirm: {
+          title: '是否确认删除该用户',
+          confirm: handleDeleteUser.bind(null, record),
+        },
+        ifShow: () => record.username!== userStore.getUserInfo?.username && sameDay(record.createTime),
+      },
+      {
+        label: '变更拥有者',
+        onClick: handleHandover.bind(null, record),
+        ifShow: () =>{
+          return record.username === record.createBy;
+        }
+      },
+      {
+        label: '同意',
+        onClick: updateStatus.bind(null, record.id, '1'),
+        ifShow: () => {
+          return (record.status === '3' || record.status === '4') && record.createBy === createBy;
+        },
+      },
+      {
+        label: '拒绝',
+        popConfirm: {
+          title: '是否确认拒绝',
+          confirm: updateStatus.bind(null, record.id, '4'),
+        },
+        ifShow: () => {
+          return record.status === '3' && record.createBy === createBy;
+        },
+      },
+      {
+        label: '用户套餐',
+        onClick: handleAllotPack.bind(null, record),
+      }
+    ];
+  }
+
+  /**
+   * 更新用户租户状态
+   * @param id
+   * @param status
+   */
+  function updateStatus(id, status) {
+    updateUserTenantStatus({ userId: id, status: status })
+      .then((res) => {
+        if (res.success) {
+          handleSuccess();
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .catch((e) => {
+        createMessage.warning(e.message);
+      });
+  }
+
+  //============================================ 租户离职交接  ============================================
+  //租户id
+  const tenantId = ref<string>('');
+  //排除自己的编号集合
+  const excludeUserIdList = ref<any>([]);
+  //离职代理人model
+  const [registerUserModal, { openModal: openUserModal }] = useModal();
+  //邀请用户加入弹窗
+  const [registerSelUserModal, { openModal: userOpenModal }] = useModal();
+  const handOverUserName = ref<string>('');
+  
+  /**
+   * 人员交接
+   */
+  function handleHandover(record) {
+    tenantId.value = getTenantId();
+    excludeUserIdList.value = [record.id];
+    //记录一下当前需要交接的用户名
+    handOverUserName.value = record.createBy;
+    openUserModal(true)
+  }
+
+  /**
+   * 用户选择回调
+   * @param options
+   * @param values
+   */
+  function selectResult(options,values) {
+    console.log(values)
+    if(values && values.length>0){
+      let userId = values[0];
+      changeOwenUserTenant({ userId:userId, tenantId:unref(tenantId) }).then((res) =>{
+        if(res.success){
+          createMessage.success("交接成功");
+          let username = userStore.getUserInfo?.username;
+          if(username == handOverUserName.value){
+            userStore.logout(true);
+          }else{
+            reload();
+          }
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+    }
+  }
+  //============================================  租户离职交接  ============================================
+
+
+  // 代码逻辑说明: 【QQYUN-5723】4、显示当前登录租户------------
+  const loginTenantName = ref<string>('');
+
+  getTenantName();
+
+  async function getTenantName(){
+    loginTenantName.value = await getLoginTenantName();
+  }
+  //update-end---author:wangshuai ---date:20230710  for：【QQYUN-5723】4、显示当前登录租户------------
+  
+
+  /**
+   * 分配套餐
+   * 
+   * @param record
+   */
+  function handleAllotPack(record) {
+    openPackAllotModal(true,{
+      record
+    })
+  }
+
+  /**
+   * 删除用户
+   */
+  function handleDeleteUser(record) {
+    deleteUser({ id: record.id }, reload);
+  }
+
+  /**
+   * 邀请用户加入租户
+   */
+  function handleInvitation() {
+    userOpenModal(true, {});
+  }
+  
+  /**
+   * 用户选择回调事件
+   * @param username
+   * @param phone
+   * @param userSelectId
+   */
+  async function handleInviteUserOk(phone, username) {
+    let tId = getTenantId();
+    if (phone) {
+      await invitationUserJoin({ ids: tId, phone: phone });
+      reload();
+    }
+    if (username) {
+      await invitationUserJoin({ ids: tId, username: username });
+      reload();
+    }
+  }
+
+  /**
+   * 请离
+   * @param id
+   */
+  async function handleLeave(id) {
+    await leaveTenant({ userIds: id, tenantId: getTenantId() }, reload)
+  }
+  
+  
+  onMounted(()=>{
+    tenantSaasMessage('租户用户')
+  })
+</script>
+
+<style scoped>
+  .tenant-name{
+    text-decoration:underline;
+    margin: 5px;
+    font-size: 15px;
+  }
+  .user-tenant-tip{
+    margin: 20px;
+    background-color: #f8f9fb;
+    color: #99a1a9;
+    border-radius: 4px;
+    padding: 12px;
+  }
+</style>
diff --git a/src/views/system/tenant/components/TenantInviteUserModal.vue b/src/views/system/tenant/components/TenantInviteUserModal.vue
new file mode 100644
index 0000000..15e21cb
--- /dev/null
+++ b/src/views/system/tenant/components/TenantInviteUserModal.vue
@@ -0,0 +1,86 @@
+<!--邀请用户加入租户弹窗-->
+<template>
+  <BasicModal @register="registerModal" :width="500" :title="title" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts">
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  name: 'TenantInviteUserModal',
+  components: {
+    BasicModal,
+    BasicForm,
+  },
+  setup(props, { emit }) {
+    const title = ref<string>('邀请成员');
+    const [registerForm, { resetFields, validate }] = useForm({
+      schemas: [
+        {
+          label: '邀请方式',
+          field: 'invitedMode',
+          component: 'RadioButtonGroup',
+          defaultValue: 1,
+          componentProps: {
+            options: [
+              { label: '手机号', value: 1 },
+              { label: '用户账号', value: 2 },
+            ],
+          },
+        },
+        {
+          label: '手机号',
+          field: 'phone',
+          component: 'Input',
+          ifShow: ({ values }) => values.invitedMode === 1,
+          dynamicRules: ({ values }) => {
+            return values.invitedMode === 1
+              ? [
+                  { required: true, message: '请填写手机号' },
+                  { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' },
+                ]
+              : [{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' }];
+          },
+        },
+        {
+          field: 'user',
+          component: 'Input',
+          label: '用户账号',
+          ifShow: ({ values }) => values.invitedMode === 2,
+          dynamicRules: ({ values }) => {
+            return values.invitedMode === 2 ? [{ required: true, message: '请输入用户账号' }] : [];
+          },
+        },
+      ],
+      showActionButtonGroup: false,
+    });
+    //表单赋值
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      //重置表单
+      await resetFields();
+      setModalProps({ minHeight: 100 });
+    });
+
+    /**
+     * 提交，返回给租户list页面
+     */
+    async function handleSubmit() {
+      let values = await validate();
+      emit('inviteOk', values.phone, values.user);
+      closeModal();
+    }
+
+    return {
+      title,
+      registerModal,
+      registerForm,
+      handleSubmit,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/tenant/components/TenantModal.vue b/src/views/system/tenant/components/TenantModal.vue
new file mode 100644
index 0000000..a828b94
--- /dev/null
+++ b/src/views/system/tenant/components/TenantModal.vue
@@ -0,0 +1,57 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="700px">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../tenant.data';
+  import { saveOrUpdateTenant, getTenantById } from '../tenant.api';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    // labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 编辑模式下禁用id字段
+      updateSchema({ field: 'id', dynamicDisabled: true });
+      //获取详情
+      data.record = await getTenantById({ id: data.record.id });
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    } else {
+      updateSchema({ field: 'id', dynamicDisabled: false });
+    }
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增租户' : '编辑租户'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdateTenant(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/tenant/components/TenantPackAllotModal.vue b/src/views/system/tenant/components/TenantPackAllotModal.vue
new file mode 100644
index 0000000..01daf7b
--- /dev/null
+++ b/src/views/system/tenant/components/TenantPackAllotModal.vue
@@ -0,0 +1,77 @@
+<!--  用户套餐分配页面 -->
+<template>
+  <BasicModal @register="registerModal" :width="500" title="分配套餐" @ok="handleSubmit">
+    <BasicForm @register="registerForm">
+      <template #packId="{ model, field }">
+        <a-checkbox-group v-model:value="model[field]" :options="packOption"></a-checkbox-group>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { packUserAllotSchemas } from '@/views/system/tenant/tenant.data';
+  import { listPackByTenantUserId } from '@/views/system/tenant/tenant.api';
+  import { getTenantId } from '@/utils/auth';
+  import { ref, defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'TenantCurrentPackList',
+    components: {
+      BasicModal,
+      BasicForm,
+    },
+    setup() {
+      //产品包的option
+      const packOption = ref<any>([]);
+      //表单配置
+      const [registerForm, { resetFields, setFieldsValue, setProps }] = useForm({
+        schemas: packUserAllotSchemas,
+        showActionButtonGroup: false,
+      });
+      //表单赋值
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false });
+        //重置表单
+        await resetFields();
+        let tenantId = getTenantId();
+        let result = await listPackByTenantUserId({ tenantId: tenantId, userId: data.record.id });
+        if (result) {
+          if (result.packList) {
+            for (const item of result.packList) {
+              if (item.packCode) {
+                item.label = item.packName + "(默认产品包)";
+              } else {
+                item.label = item.packName;
+              }
+              item.value = item.id;
+              item.key = item.id;
+            }
+            packOption.value = result.packList;
+          } else {
+            packOption.value = [];
+          }
+          if(result.userPackIdList){
+            data.record.packId = result.userPackIdList;
+          }
+        }
+        setModalProps({ confirmLoading: false });
+        await setFieldsValue({
+          ...data.record,
+          userId: data.record.id,
+        });
+        setProps({ disabled: true });
+      })
+
+      return {
+        registerForm,
+        registerModal,
+        packOption,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/tenant/components/TenantRecycleBinModal.vue b/src/views/system/tenant/components/TenantRecycleBinModal.vue
new file mode 100644
index 0000000..942d5a1
--- /dev/null
+++ b/src/views/system/tenant/components/TenantRecycleBinModal.vue
@@ -0,0 +1,147 @@
+<!--回收站-->
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户回收站" :showOkBtn="false" width="1000px" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                批量删除
+              </a-menu-item>
+              <a-menu-item key="1" @click="batchHandleRevert">
+                <Icon icon="ant-design:redo-outlined"></Icon>
+                批量还原
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup name="tenant-recycle-bin-modal">
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { recycleBinPageList, deleteLogicDeleted, revertTenantLogic } from '../tenant.api';
+  import { recycleColumns, searchRecycleFormSchema } from '../tenant.data';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Modal } from 'ant-design-vue';
+  import { toRaw, unref } from 'vue';
+
+  const { createMessage: $message } = useMessage();
+  const [registerModal] = useModalInner(() => {});
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      api: recycleBinPageList,
+      columns: recycleColumns,
+      size: 'small',
+      formConfig: {
+        schemas: searchRecycleFormSchema,
+      },
+      actionColumn: {
+        width: 120,
+      },
+      ellipsis: true,
+    },
+  });
+  const emit = defineEmits(['success', 'register']);
+  //注册table数据
+  const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+
+  //获取操作栏事件
+  function getTableAction(record) {
+    return [
+      {
+        label: '还原',
+        icon: 'ant-design:redo-outlined',
+        popConfirm: {
+          title: '是否确认还原',
+          confirm: handleRevert.bind(null, record),
+        },
+      },
+      {
+        label: '彻底删除',
+        icon: 'ant-design:scissor-outlined',
+        popConfirm: {
+          title: '是否确认彻底删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 还原
+   * @param record
+   */
+  function handleRevert(record) {
+    revertTenantLogic({ ids: record.id }, handleSuccess);
+    emit('success');
+  }
+
+  /**
+   * 成功刷新表格
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 彻底删除
+   * @param record
+   */
+  async function handleDelete(record) {
+    await deleteLogicDeleted({ ids: record.id }, handleSuccess);
+  }
+
+  /**
+   * 批量彻底删除
+   */
+  function batchHandleDelete() {
+    Modal.confirm({
+      title: '彻底删除',
+      content: '是否确认彻底删除',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        deleteLogicDeleted({ ids: toRaw(unref(selectedRowKeys)).join(',') }, handleSuccess);
+      },
+    });
+  }
+
+  /**
+   * 批量还原
+   */
+  function batchHandleRevert() {
+    Modal.confirm({
+      title: '还原',
+      content: '是否确认还原',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        revertTenantLogic({ ids: toRaw(unref(selectedRowKeys)).join(',') }, handleSuccess);
+        emit('success');
+      },
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-popover-inner-content) {
+    width: 185px !important;
+  }
+</style>
diff --git a/src/views/system/tenant/components/TenantUserDrawer.vue b/src/views/system/tenant/components/TenantUserDrawer.vue
new file mode 100644
index 0000000..63223c9
--- /dev/null
+++ b/src/views/system/tenant/components/TenantUserDrawer.vue
@@ -0,0 +1,100 @@
+<template>
+  <BasicDrawer @register="registerDrawer" :title="title" :width="580" destroyOnClose @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref, computed } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { getUserDepartList } from '../../user/user.api';
+  import { tenantUserSchema } from '../tenant.data';
+  import { saveOrUpdateTenantUser } from '../tenant.api';
+
+  export default defineComponent({
+    name: 'TenantUserDrawer',
+    components: {
+      BasicDrawer,
+      BasicForm,
+    },
+    emits: ['success', 'register'],
+    setup(_p, { emit }) {
+      const status = ref<string>('');
+      const isUpdate = ref(false);
+      const title = computed(() => {
+        return isUpdate.value ? '编辑人员' : '添加人员';
+      });
+
+      //表单
+      const [registerForm, { setFieldsValue, resetFields, validate, setProps, clearValidate }] = useForm({
+        schemas: tenantUserSchema,
+        showActionButtonGroup: false,
+        labelCol: { span: 24 },
+        wrapperCol: { span: 24 },
+      });
+
+      const showFooter = ref<boolean>(true);
+      // modal
+      const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
+        isUpdate.value = data.isUpdate;
+        await resetFields();
+        showFooter.value = data?.showFooter ?? true;
+        setDrawerProps({ showFooter: showFooter.value });
+        if (unref(isUpdate)) {
+          const userDepart = await getUserDepartList({ userId: data.record.id });
+          let departData: any = '';
+          if (userDepart && userDepart.length > 0) {
+            departData = userDepart.map((item) => item.value);
+          }
+          let formData = {
+            ...data.record,
+            selecteddeparts: departData,
+            selectedroles: data.record.selectedroles,
+          };
+          status.value = data.status;
+          await setFieldsValue(formData);
+        }
+        // 隐藏底部时禁用整个表单
+        setProps({ disabled: !data?.showFooter });
+        if(!data?.showFooter){
+          await clearValidate();
+        }
+      });
+
+      const confirmLoading = ref<boolean>(false);
+
+      //提交事件
+      async function handleSubmit() {
+        const data: any = await validate();
+        if (!data.username) {
+          data.username = data.phone;
+        }
+        data.password = '123456';
+        confirmLoading.value = true;
+        await saveOrUpdateTenantUser(data, isUpdate.value);
+        confirmLoading.value = false;
+        emit('success');
+        handleClose();
+      }
+
+      /**
+       * 取消
+       */
+      function handleClose() {
+        closeDrawer();
+      }
+
+      return {
+        isUpdate,
+        title,
+        registerForm,
+        registerDrawer,
+        handleSubmit,
+        handleClose,
+        status,
+        confirmLoading,
+      };
+    },
+  });
+</script>
diff --git a/src/views/system/tenant/components/TenantUserList.vue b/src/views/system/tenant/components/TenantUserList.vue
new file mode 100644
index 0000000..1c23767
--- /dev/null
+++ b/src/views/system/tenant/components/TenantUserList.vue
@@ -0,0 +1,102 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="800px">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button v-if="selectedRowKeys.length>0" preIcon="ant-design:delete-outlined" type="primary" @click="handleLeaveBatch" style="margin-right: 5px">批量请离</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { ref, computed, unref } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { userColumns, userSearchFormSchema } from "../tenant.data";
+import { getTenantUserList, leaveTenant } from "../tenant.api";
+import { useListPage } from "/@/hooks/system/useListPage";
+import { BasicTable, TableAction } from '/@/components/Table';
+
+const tenantId = ref<number>(0);
+// 列表页面公共参数、方法
+const { prefixCls, tableContext } = useListPage({
+  designScope: 'tenant-template',
+  tableProps: {
+    api: getTenantUserList,
+    columns: userColumns,
+    immediate:false,
+    formConfig: {
+      schemas: userSearchFormSchema,
+      // 代码逻辑说明: 【QQYUN-5698】样式问题------------
+      labelWidth: 40,
+      actionColOptions: {
+        xs: 24,
+        sm: 8,
+        md: 8,
+        lg: 8,
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, { userTenantId: unref(tenantId) });
+    },
+  },
+});
+const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+// Emits声明
+const emit = defineEmits(['register', 'success']);
+//表单赋值
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  tenantId.value = data.id;
+  success();
+});
+//设置标题
+const title = '成员';
+//表单提交事件
+async function handleSubmit(v) {
+  closeModal();
+}
+
+function getActions(record) {
+  return [
+    {
+      label: '移除',
+      onClick: handleLeave.bind(null, record.id),
+    },
+  ]
+}
+
+/**
+ * 成功
+ */
+function success() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+/**
+ * 请离
+ * @param id
+ */
+async function handleLeave(id) {
+  await leaveTenant({userIds:id,tenantId:unref(tenantId)},success)
+}
+
+/**
+ * 批量请离
+ */
+async function  handleLeaveBatch(){
+  await leaveTenant({userIds:selectedRowKeys.value.join(","),tenantId:unref(tenantId)},success)
+}
+</script>
+
+<style scoped>
+  /*update-begin---author:wangshuai ---date:20220705  for：查询组件input有后缀，隐藏掉------------*/
+  :deep(.ant-input-suffix){
+    display: none;
+  }
+  /*update-begin---author:wangshuai ---date:20220705  for：查询组件input有后缀，隐藏掉------------*/
+</style>
diff --git a/src/views/system/tenant/components/TenantUserRightList.vue b/src/views/system/tenant/components/TenantUserRightList.vue
new file mode 100644
index 0000000..e61d23e
--- /dev/null
+++ b/src/views/system/tenant/components/TenantUserRightList.vue
@@ -0,0 +1,181 @@
+<template>
+  <BasicTable @register="registerTable" style="padding-top: 10px">
+    <template #departNames="{ text, record }">
+      <template v-if="text && text.length > 0">
+        {{ getName(text) }}
+      </template>
+    </template>
+    <template #positionNames="{ text, record }">
+      <template v-if="text && text.length > 0">
+        {{ getName(text) }}
+      </template>
+    </template>
+    <template #tableTitle>
+      <a-button preIcon="ant-design:usergroup-add-outlined" type="primary" @click="addUser" :disabled="tenantPackData.izSysn == '1'">邀请成员</a-button>
+      <a-button preIcon="ant-design:rollback-outlined" @click="cancel">关闭</a-button>
+    </template>
+    <!--操作栏-->
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <tenant-user-select-modal :multi="true" @register="registerUserModal" @on-select="onSelected" :tenantId="getTenantId"></tenant-user-select-modal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, defineEmits } from 'vue';
+  import { BasicModal } from '@/components/Modal';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import TenantUserSelectModal from '@/views/system/tenant/components/TenantUserSelectModal.vue';
+  import { addTenantPackUser, deleteTenantPackUser } from '@/views/system/tenant/tenant.api';
+  //注册table数据
+  import { useListPage } from '@/hooks/system/useListPage';
+  import { queryTenantPackUserList } from '@/views/system/tenant/tenant.api';
+  import { tenantPackUserColumns } from '@/views/system/tenant/tenant.data';
+  import { useModal } from '@/components/Modal';
+  import { computed, reactive } from 'vue';
+
+  export default defineComponent({
+    name: 'TenantUserRightList',
+    components: { BasicModal, BasicTable, TableAction, TenantUserSelectModal },
+    emits: ['cancel'],
+    setup(props, { emit }) {
+      const [registerUserModal, { openModal: openUserModal, closeModal: closeUserModal }] = useModal();
+      //获取租户id
+      const getTenantId = computed(() => {
+        return tenantPackData.tenantId;
+      });
+
+      //套餐包信息
+      const tenantPackData = reactive<any>({});
+      const { tableContext } = useListPage({
+        tableProps: {
+          api: queryTenantPackUserList,
+          immediate: false,
+          columns: tenantPackUserColumns,
+          canResize: false,
+          useSearchForm: false,
+          beforeFetch: (params) => {
+            params.tenantId = tenantPackData.tenantId;
+            params.packId = tenantPackData.id;
+            params.status = 1;
+            return params;
+          },
+          actionColumn: {
+            width: 120,
+            fixed: 'right',
+          },
+        },
+      });
+
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+      /**
+       * 初始化数据
+       * @param value
+       */
+      function initData(value) {
+        console.log('value：：', value);
+        Object.assign(tenantPackData, value);
+        reload();
+      }
+
+      /**
+       * 表格操作列
+       * @param record
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '移除',
+            popConfirm: {
+              title: '是否确认移除',
+              confirm: handleDelete.bind(null, record),
+            },
+            ifShow:() => tenantPackData.izSysn != '1'
+          },
+        ];
+      }
+
+      /**
+       * 删除
+       */
+      async function handleDelete(record) {
+        let params = {
+          packId: record.packId,
+          packName: record.packName,
+          tenantId: tenantPackData.tenantId,
+          userId: record.id,
+          realname: record.realname,
+        };
+        await deleteTenantPackUser(params);
+        await reload();
+      }
+
+      /**
+       * 添加用户弹窗
+       */
+      function addUser() {
+        openUserModal(true, {
+          list: [],
+        });
+      }
+
+      /**
+       * 邀请人回调事件
+       * @param arr
+       */
+      async function onSelected(arr) {
+        if (arr && arr.length > 0) {
+          let names: any[] = [];
+          let ids: any[] = [];
+          for (let u of arr) {
+            names.push(u.realname);
+            ids.push(u.id);
+          }
+          let params = {
+            packId: tenantPackData.id,
+            packName: tenantPackData.packName,
+            tenantId: tenantPackData.tenantId,
+            userId: ids.join(','),
+            realname: names.join(','),
+          };
+          await addTenantPackUser(params);
+          await reload();
+          closeUserModal();
+        }
+      }
+
+      /**
+       * 获取部门/职务名称
+       * @param value
+       */
+      function getName(value) {
+        return value.join(',');
+      }
+
+      /**
+       * 关闭
+       */
+      function cancel() {
+        emit('cancel');
+      }
+
+      return {
+        getTableAction,
+        onSelected,
+        registerTable,
+        registerUserModal,
+        getTenantId,
+        rowSelection,
+        addUser,
+        initData,
+        getName,
+        cancel,
+        tenantPackData,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/tenant/components/TenantUserSelectModal.vue b/src/views/system/tenant/components/TenantUserSelectModal.vue
new file mode 100644
index 0000000..ace70aa
--- /dev/null
+++ b/src/views/system/tenant/components/TenantUserSelectModal.vue
@@ -0,0 +1,159 @@
+<!--套餐中使用的用户选择框-->
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      @register="register"
+      :title="modalTitle"
+      width="900px"
+      wrapClassName="j-user-select-modal"
+      @ok="handleOk"
+      destroyOnClose
+    >
+      <BasicTable ref="tableRef" @register="registerTable" :rowSelection="rowSelection">
+        <template #tableTitle></template>
+      </BasicTable>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getTenantUserList } from '../tenant.api';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { userColumns, userSearchFormSchema } from '../tenant.data';
+
+  export default defineComponent({
+    name: 'TenantUserSelectModal',
+    components: {
+      //此处需要异步加载BasicTable
+      BasicModal,
+      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+        loading: true,
+      }),
+    },
+    props: {
+      //选择框标题
+      modalTitle: {
+        type: String,
+        default: '选择用户',
+      },
+      //查询参数
+      tenantId: {
+        type: Number,
+        default: 0,
+      },
+      //排除用户id的集合
+      excludeUserIdList: {
+        type: Array,
+        default: [],
+      },
+    },
+    emits: ['register', 'on-select'],
+    setup(props, { emit, refs }) {
+      const tableScroll = ref<any>({ x: false });
+      const tableRef = ref();
+      //注册弹框
+      const [register, { closeModal }] = useModalInner(() => {
+        if (window.innerWidth < 900) {
+          tableScroll.value = { x: 900 };
+        } else {
+          tableScroll.value = { x: false };
+        }
+        setTimeout(() => {
+          if (tableRef.value) {
+            tableRef.value.setSelectedRowKeys([]);
+          }
+        }, 800);
+      });
+
+      //定义表格列
+      const columns = [
+        {
+          title: '账号',
+          dataIndex: 'username',
+          width: 40,
+          align: 'left',
+        },
+        {
+          title: '姓名',
+          dataIndex: 'realname',
+          width: 40,
+        },
+        {
+          title: '性别',
+          dataIndex: 'sex_dictText',
+          width: 20,
+        },
+        {
+          title: '手机号码',
+          dataIndex: 'phone',
+          width: 30,
+        },
+        {
+          title: '邮箱',
+          dataIndex: 'email',
+          width: 40,
+        },
+        {
+          title: '状态',
+          dataIndex: 'status_dictText',
+          width: 20,
+        },
+      ];
+
+      // 列表页面公共参数、方法
+      const { prefixCls, tableContext } = useListPage({
+        designScope: 'tenant-template',
+        tableProps: {
+          api: getTenantUserList,
+          columns: userColumns,
+          scroll: { y: 390 },
+          rowKey: 'id',
+          showActionColumn: false,
+          formConfig: {
+            schemas: userSearchFormSchema,
+            labelWidth: 60,
+            actionColOptions: {
+              xs: 24,
+              sm: 8,
+              md: 8,
+              lg: 8,
+              xl: 8,
+              xxl: 8,
+            },
+          },
+          beforeFetch: (params) => {
+            return Object.assign(params, { userTenantId: props.tenantId });
+          },
+        },
+      });
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+      /**
+       * 确定选择
+       */
+      function handleOk() {
+        //返回选中事件
+        emit('on-select', rowSelection.selectedRows, rowSelection.selectedRowKeys);
+      }
+
+      return {
+        handleOk,
+        register,
+        columns,
+        rowSelection,
+        tableScroll,
+        tableRef,
+        registerTable,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  :deep(.ant-input-suffix) {
+    display: none;
+  }
+</style>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
new file mode 100644
index 0000000..7ff50ed
--- /dev/null
+++ b/src/views/system/tenant/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+        <a-button
+          preIcon="ant-design:user-add-outlined"
+          type="primary"
+          @click="handleInvitation"
+          style="margin-right: 5px"
+          :disabled="selectedRowKeys.length === 0"
+          >邀请用户加入</a-button
+        >
+        <a-button
+          preIcon="ant-design:sliders-outlined"
+          type="primary"
+          @click="handlePack"
+          style="margin-right: 5px"
+          :disabled="selectedRowKeys.length === 0"
+          >套餐管理</a-button
+        >
+        <a-button type="primary" @click="recycleBinClick" preIcon="ant-design:hdd-outlined">回收站</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <TenantModal @register="registerModal" @success="reload" />
+    <TenantInviteUserModal @register="registerSelUserModal" @inviteOk="handleInviteUserOk"/>
+    <TenantUserModal @register="registerTenUserModal" />
+    <!--  产品包  -->
+    <TenantPackList @register="registerPackModal" />
+    <!--  租户回收站  -->
+    <TenantRecycleBinModal @register="registerRecycleBinModal" @success="reload" />
+  </div>
+</template>
+<script lang="ts" name="system-tenant" setup>
+  import { ref, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { getTenantList, deleteTenant, batchDeleteTenant, invitationUserJoin } from './tenant.api';
+  import { columns, searchFormSchema } from './tenant.data';
+  import TenantModal from './components/TenantModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import TenantInviteUserModal from './components/TenantInviteUserModal.vue';
+  import TenantUserModal from './components/TenantUserList.vue';
+  import TenantPackList from './pack/TenantPackList.vue';
+  import TenantRecycleBinModal from './components/TenantRecycleBinModal.vue';
+
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerSelUserModal, { openModal: userOpenModal }] = useModal();
+  const [registerTenUserModal, { openModal: tenUserOpenModal }] = useModal();
+  const [registerPackModal, { openModal: packModal }] = useModal();
+  const [registerRecycleBinModal, { openModal: recycleBinModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'tenant-template',
+    tableProps: {
+      title: '租户列表',
+      api: getTenantList,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+        fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
+      },
+      actionColumn:{
+        width: 150,
+        fixed:'right'
+      }
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          placement: 'left',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+      {
+        label: '用户',
+        onClick: handleSeeUser.bind(null, record.id),
+      },
+    ];
+  }
+
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteTenant({ id: record.id }, handleSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteTenant({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+
+  /**
+   * 邀请用户加入租户
+   */
+  function handleInvitation() {
+    userOpenModal(true, {});
+  }
+
+  /**
+   * 用户选择回调事件
+   * @param options
+   * @param phone
+   * @param userSelectId
+   */
+  async function handleInviteUserOk(phone, username) {
+    // 代码逻辑说明: 【QQYUN-4605】后台的邀请谁加入租户，没办法选不是租户下的用户------------
+    if (phone) {
+      await invitationUserJoin({ ids: selectedRowKeys.value.join(','), phone: phone });
+    }
+    if (username) {
+      await invitationUserJoin({ ids: selectedRowKeys.value.join(','), username: username });
+    }
+  }
+
+  /**
+   * 查看用户
+   * @param id
+   */
+  function handleSeeUser(id) {
+    tenUserOpenModal(true, {
+      id: id,
+    });
+  }
+
+  /**
+   * 新增产品包
+   */
+  function handlePack() {
+    if (unref(selectedRowKeys).length > 1) {
+      createMessage.warn('请选择一个');
+      return;
+    }
+    packModal(true, {
+      tenantId: unref(selectedRowKeys.value.join(',')),
+      //我的租户显示新增和编辑产品包
+      showPackAddAndEdit: true
+    });
+  }
+
+  /**
+   * 回收站
+   */
+  function recycleBinClick() {
+    recycleBinModal(true, {});
+  }
+
+  /**
+   * 删除成功之后回调事件
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+</script>
diff --git a/src/views/system/tenant/my/MyTenantDetail.vue b/src/views/system/tenant/my/MyTenantDetail.vue
new file mode 100644
index 0000000..8c5ce75
--- /dev/null
+++ b/src/views/system/tenant/my/MyTenantDetail.vue
@@ -0,0 +1,432 @@
+<!--我的租户详情-->
+<template>
+  <div class="message-set-container">
+    <div class="message-set-box">
+      <div class="message-set-header">
+        <span class="font17">组织信息</span>
+      </div>
+      <a-form :model="formState">
+        <div class="message-set-content">
+          <div class="common-info">
+            <div class="common-info-row">
+              <div class="common-info-row-label">组织LOGO</div>
+              <div class="common-info-row-content">
+                <JImageUpload v-model:value="formState.companyLogo" @change="handleCompanyLogoChange"></JImageUpload>
+              </div>
+            </div>
+            <div class="common-info-row m-top24">
+              <div class="common-info-row-label">组织名称</div>
+              <span class="m-right16">{{ formState.name }}</span>
+              <span class="edit-name" @click="goUpdate('name')">修改</span>
+            </div>
+            <div class="common-info-row m-top24">
+              <div class="common-info-row-label">组织门牌号</div>
+              <div class="common-info-row-content">
+                <span class="pointer">
+                  <span>{{ formState.houseNumber }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="common-info-row m-top24">
+              <div class="common-info-row-label">组织编号(ID)</div>
+              <div class="common-info-row-content">
+                <span class="pointer">
+                  <span>{{ formState.id }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="split-line"></div>
+            <div class="common-info-row">
+              <div class="common-info-row-label">所在地</div>
+              <span class="m-right16">{{ formState.companyAddress_dictText }}</span>
+              <span class="edit-name" @click="goUpdate('companyAddress')">修改</span>
+            </div>
+            <div class="common-info-row m-top24">
+              <div class="common-info-row-label">所在行业</div>
+              <span class="m-right16">{{ formState.trade_dictText }}</span>
+              <span class="edit-name" @click="goUpdate('trade')">修改</span>
+            </div>
+            <div class="common-info-row m-top24">
+              <div class="common-info-row-label">工作地点</div>
+              <span class="m-right16">{{ formState.workPlace }}</span>
+              <span class="edit-name" @click="goUpdate('workPlace')">修改</span>
+            </div>
+            <div class="cancel-split-line"></div>
+          </div>
+        </div>
+      </a-form>
+    </div>
+  </div>
+  <!-- 组织名称修改弹窗 -->
+  <a-modal v-model:open="modalVisible.name" title="修改组织名称" width="500" destroy-on-close @ok="doUpdate('name')">
+    <a-form ref="manageNameRef" :model="updateInfo" :rules="getManageNameRules">
+      <a-form-item name="name" class="form-item-padding">
+        <div class="form-group">
+              <span class="form-label">
+                组织名称
+                <span class="txt-middle red">*</span>
+              </span>
+          <a-input v-model:value="updateInfo.name" />
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+  
+  <!-- 组织所在地弹窗 -->
+  <a-modal v-model:open="modalVisible.companyAddress" title="所在地" width="500" destroy-on-close @ok="doUpdate('companyAddress')">
+    <a-form :model="updateInfo">
+      <a-form-item name="companyAddress" class="form-item-padding">
+        <div style="margin-top: 20px">
+          <j-area-select v-model:value="updateInfo.companyAddress" />
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+
+  <!-- 组织所在行业弹窗 -->
+  <a-modal v-model:open="modalVisible.trade" title="设置所在行业" width="500" destroy-on-close @ok="doUpdate('trade')">
+    <a-form :model="updateInfo">
+      <a-form-item name="trade" class="form-item-padding">
+        <div style="margin-top: 20px">
+          <j-dict-select-tag v-model:value="updateInfo.trade" dictCode="trade" />
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+
+  <!-- 工作地点弹窗 -->
+  <a-modal v-model:open="modalVisible.workPlace" title="设置工作地点" width="500" destroy-on-close @ok="doUpdate('workPlace')">
+    <a-form ref="workPlaceRef" :model="updateInfo">
+      <a-form-item name="name" class="form-item-padding">
+        <div style="margin-top: 20px">
+          <a-textarea placeholder="请填写工作地点" v-model:value="updateInfo.workPlace" />
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script lang="ts" name="tenant-my-tenant-list" setup>
+  import { onMounted, reactive, ref } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {getFileAccessHttpUrl, tenantSaasMessage} from '@/utils/common/compUtils';
+  import { getTenantById, saveOrUpdateTenant } from '@/views/system/tenant/tenant.api';
+  import { getTenantId } from '@/utils/auth';
+  import { getDataByCode, getRealCode, provinceOptions } from '@/components/Form/src/utils/areaDataUtil';
+  import { initDictOptions } from '@/utils/dict';
+  import {createImgPreview} from "@/components/Preview";
+  import { JImageUpload } from "@/components/Form";
+  // import {updateTenantInfo} from "@/views/super/myapps/organization/organization.api";
+  import { defHttp } from "/@/utils/http/axios";
+  import JAreaSelect from "/@/components/Form/src/jeecg/components/JAreaSelect.vue";
+  import JDictSelectTag from "/@/components/Form/src/jeecg/components/JDictSelectTag.vue";
+
+  const { createMessage } = useMessage();
+  const formState = reactive({
+    id: '',
+    name: '',
+    houseNumber: '',
+    companyAddress_dictText: '',
+    trade_dictText: '',
+    workPlace: '',
+    createBy: '',
+    companyLogo: '',
+  });
+  let tradeOptions: any[] = [];
+  //组织名称ref
+  const manageNameRef= ref();
+  // modal显示
+  const modalVisible = reactive<any>({
+    name: false,
+    trade: false,
+    companyAddress: false
+  });
+
+  // 组织名称检验规则
+  const getManageNameRules =  {
+    name: [{ required: true, message: '组织名称不能为空', trigger: 'blur' }],
+  };
+
+  //修改对象
+  const updateInfo = reactive<any>({
+    name: '',
+    trade:'',
+    companyAddress: '',
+    workPlace: '',
+  });
+  
+  /**
+   * 初始化租户信息
+   */
+  async function initTenant() {
+    let result = await getTenantById({ id: getTenantId() });
+    if (result) {
+      if (result.companyAddress) {
+        formState.companyAddress_dictText = getPcaText(result.companyAddress);
+      } else {
+        formState.companyAddress_dictText = '';
+      }
+      if (result.trade) {
+        formState.trade_dictText = await getTradeText(result.trade);
+      } else {
+        formState.trade_dictText = '';
+      }
+      Object.assign(formState, result);
+    }
+  }
+
+  /**
+   * 获取省市区文本
+   * @param code
+   */
+  function getPcaText(code) {
+    let arr = getRealCode(code, 3);
+    console.log("arr:::",arr)
+    let provinces: any = provinceOptions.filter((item) => item.value == arr[0]);
+    let cities: any[] = getDataByCode(arr[0]);
+    let areas: any[] = getDataByCode(arr[1]);
+    let str = '';
+    if (provinces && provinces.length > 0) {
+      str = provinces[0].label;
+      if (cities && cities.length > 0) {
+        let temp1 = cities.filter((item) => item.value == arr[1]);
+        str = str + '/' + temp1[0].label;
+        if (areas && areas.length > 0) {
+          let temp2 = areas.filter((item) => item.value == arr[2]);
+          str = str + '/' + temp2[0].label;
+        }
+      }
+    }
+    return str;
+  }
+
+  /**
+   * 获取行业文本
+   *
+   * @param trade
+   */
+  async function getTradeText(trade) {
+    if (tradeOptions.length == 0) {
+      let options: any = await initDictOptions('trade');
+      tradeOptions = options;
+    }
+    let arr = tradeOptions.filter((item) => item.value == trade);
+    if (arr.length > 0) {
+      return arr[0].label;
+    }
+    return '';
+  }
+
+  /**
+   * 公司logo上传成功事件
+   * 
+   * @param val
+   */
+  function handleCompanyLogoChange(val) {
+    if(val){
+      saveOrUpdateTenant({ id: formState.id, companyLogo: val }, true)
+    }
+  }
+
+  /**
+   * 更新打开弹窗
+   * 
+   * @param key
+   */
+  function goUpdate(key){
+    modalVisible[key] = true;
+    updateInfo[key] = formState[key];
+  }
+
+  /**
+   * 编辑租户信息
+   * @param params
+   */
+  async function updateTenantInfo(params){
+    return defHttp.put({ url: '/sys/tenant/editOwnTenant', params });
+  }
+
+  /**
+   * 更新数据
+   * @param key
+   */
+  async function doUpdate(key) {
+    if(key=='name'){
+      await manageNameRef.value.validateFields();
+    }
+    //所在地为空报错
+    if(key == 'companyAddress'){
+      if(updateInfo[key] instanceof Array){
+        updateInfo[key] = '';
+      }
+    }
+    let params = {
+      id: formState.id,
+      [key]: updateInfo[key]
+    };
+    await updateTenantInfo(params);
+    initTenant();
+    modalVisible[key] = false
+  }
+
+  onMounted(() => {
+    //提示信息
+    tenantSaasMessage('我的租户');
+    initTenant();
+  });
+</script>
+<style lang="less" scoped>
+  .message-set-container {
+    box-sizing: border-box;
+    flex: 1;
+    margin: 16px;
+    min-height: 0;
+  }
+  .message-set-box {
+    background: #fff;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    min-width: 750px;
+    position: relative;
+    height: 100%;
+  }
+  .message-set-header {
+    align-items: center;
+    background: #fff;
+    border-bottom: 1px solid #eaeaea;
+    box-sizing: border-box;
+    color: #333;
+    display: flex;
+    font-weight: 600;
+    height: 57px;
+    line-height: 57px;
+    padding: 0 18px 0 24px;
+  }
+  .message-set-content {
+    box-sizing: border-box;
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+  }
+  .font17 {
+    font-size: 17px;
+  }
+  .common-info {
+    padding: 20px 24px;
+    background: #ffffff;
+    margin-bottom: 20px;
+  }
+  .common-info-row {
+    color: #333;
+    display: flex;
+    font-size: 13px;
+  }
+  .common-info-row-label {
+    color: #757575;
+    display: flex;
+    justify-content: flex-start;
+    width: 140px;
+  }
+  .common-info-row-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+  .pointer {
+    cursor: pointer;
+  }
+  .delete-color {
+    color: #f51744;
+    cursor: pointer;
+  }
+  .set-describe {
+    color: #757575;
+    margin-top: 10px !important;
+  }
+  .m-top24 {
+    margin-top: 24px;
+  }
+  .edit-name {
+    border: none;
+    border-radius: 3px;
+    box-sizing: border-box;
+    color: #1e88e5;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    text-shadow: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+  .m-right16 {
+    margin-right: 16px;
+  }
+  .split-line {
+    background: #eaeaea;
+    height: 1px;
+    margin: 40px 0;
+    width: 100%;
+  }
+  .cancel-split-line {
+    background: #eaeaea;
+    height: 1px;
+    margin: 40px 0 20px;
+    width: 100%;
+  }
+  .form-item-padding {
+    padding: 0 24px 22px;
+  }
+  .form-group {
+    display: table;
+    font-size: 13px;
+    position: relative;
+    width: 100%;
+    .form-label {
+      color: #333;
+      font-weight: 600;
+      line-height: 29px;
+    }
+    .txt-middle {
+      vertical-align: middle !important;
+    }
+  }
+  .red {
+    color: red;
+  }
+  .domain-background {
+    height: 56px;
+    margin-top: 6px;
+    width: 100px;
+    margin-left: 142px;
+  }
+  .cancellation {
+    color: #333333;
+    font-size: 20px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  :deep(.ant-upload.ant-upload-select){
+    width: 80px !important;
+    height: 80px !important;
+    border: unset !important;
+  }
+  :deep(.ant-upload-list-item-container){
+    width: 80px !important;
+    height: 80px !important;
+    border: unset !important;
+  }
+  .edit-name {
+    border: none;
+    border-radius: 3px;
+    box-sizing: border-box;
+    color: #1e88e5;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    text-shadow: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/views/system/tenant/my/MyTenantList.vue b/src/views/system/tenant/my/MyTenantList.vue
new file mode 100644
index 0000000..1a526f3
--- /dev/null
+++ b/src/views/system/tenant/my/MyTenantList.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" @fetch-success="onFetchSuccess">
+      <template #tableTitle>
+        <a-button
+          preIcon="ant-design:user-add-outlined"
+          type="primary"
+          @click="handleInvitation"
+          style="margin-right: 5px"
+          :disabled="selectedRowKeys.length === 0"
+          >邀请用户加入</a-button
+        >
+<!--        <a-button
+          preIcon="ant-design:plus-outlined"
+          type="primary"
+          @click="handlePack"
+          style="margin-right: 5px"
+          :disabled="selectedRowKeys.length === 0"
+          >套餐</a-button
+        >-->
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <TenantInviteUserModal @register="registerSelUserModal" @inviteOk="handleInviteUserOk" />
+    <TenantUserModal @register="registerTenUserModal" />
+    <!--  产品包  -->
+    <TenantPackList @register="registerPackModal" />
+  </div>
+</template>
+<script lang="ts" name="tenant-my-tenant-list" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { invitationUserJoin, getTenantPageListByUserId } from '../tenant.api';
+  import { columns, searchFormSchema } from '../tenant.data';
+  import TenantModal from '../components/TenantModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import TenantInviteUserModal from '../components/TenantInviteUserModal.vue';
+  import TenantUserModal from '../components/TenantUserList.vue';
+  import TenantPackList from '../pack/TenantPackList.vue';
+  import { getTenantId } from '/@/utils/auth';
+  import { useUserStore } from '/@/store/modules/user';
+  import { tenantSaasMessage } from "@/utils/common/compUtils";
+
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerSelUserModal, { openModal: userOpenModal }] = useModal();
+  const [registerTenUserModal, { openModal: tenUserOpenModal }] = useModal();
+  const [registerPackModal, { openModal: packModal }] = useModal();
+  const userStore = useUserStore();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'tenant-template',
+    tableProps: {
+      title: '租户列表',
+      api: getTenantPageListByUserId,
+      columns: columns,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 150,
+        fixed: 'right',
+      },
+      rowSelection:{
+        type: "radio",
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, { userTenantStatus: '1,3,4' });
+      },
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  // 默认选中当前租户
+  function onFetchSuccess(data) {
+    let items = data.items;
+    console.log('items:', items);
+    // 当前登录租户ID
+    let loginTenantId = getTenantId();
+    console.log('loginTenantId:', loginTenantId);
+    // 如果当前登录租户ID在列表中，则默认选中
+    if (items && items.length > 0 && loginTenantId) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].id == loginTenantId) {
+          console.log('items[i].id:', items[i].id);
+          selectedRowKeys.value = [items[i].id];
+          selectedRows.value = [items[i]];
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '用户',
+        onClick: handleSeeUser.bind(null, record.id),
+      },
+    ];
+  }
+
+  /**
+   * 邀请用户加入租户
+   */
+  function handleInvitation() {
+    userOpenModal(true, {});
+  }
+
+  /**
+   * 用户选择回调事件
+   * @param options
+   * @param phone
+   * @param userSelectId
+   */
+  async function handleInviteUserOk(phone, username) {
+    if (phone) {
+      await invitationUserJoin({ ids: selectedRowKeys.value.join(','), phone: phone });
+    }
+    if (username) {
+      await invitationUserJoin({ ids: selectedRowKeys.value.join(','), username: username });
+    }
+  }
+
+  /**
+   * 查看用户
+   * @param id
+   */
+  async function handleSeeUser(id) {
+    tenUserOpenModal(true, {
+      id: id,
+    });
+  }
+
+  /**
+   * 新增产品包
+   */
+  async function handlePack() {
+    if (unref(selectedRowKeys).length > 1) {
+      createMessage.warn('请选择一个');
+      return;
+    }
+    packModal(true, {
+      tenantId: unref(selectedRowKeys.value.join(',')),
+      //我的租户不显示新增和编辑产品包
+      showPackAddAndEdit: false
+    });
+  }
+
+  /**
+   * 删除成功之后回调事件
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  onMounted(()=>{
+    //提示信息
+    tenantSaasMessage('我的租户')
+  })
+</script>
diff --git a/src/views/system/tenant/pack/PackPermissionDrawer.vue b/src/views/system/tenant/pack/PackPermissionDrawer.vue
new file mode 100644
index 0000000..2eae4ff
--- /dev/null
+++ b/src/views/system/tenant/pack/PackPermissionDrawer.vue
@@ -0,0 +1,272 @@
+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
+    <template #title>
+      权限配置
+      <a-dropdown>
+        <a-button class="more-icon">
+          更多操作
+          <Icon icon="ant-design:down-outlined" size="14px" style="position: relative; top: 1px; right: 5px"></Icon>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="treeMenuClick">
+            <a-menu-item key="checkAll">选择全部</a-menu-item>
+            <a-menu-item key="cancelCheck">取消选择</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="openAll">展开全部</a-menu-item>
+            <a-menu-item key="closeAll">折叠全部</a-menu-item>
+            <div class="line"></div>
+            <a-menu-item key="relation">层级关联</a-menu-item>
+            <a-menu-item key="standAlone">层级独立</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </template>
+    <BasicTree
+      ref="treeRef"
+      checkable
+      :treeData="treeData"
+      :checkedKeys="checkedKeys"
+      :expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :clickRowToExpand="false"
+      :checkStrictly="true"
+      title="所拥有的的权限"
+      @check="onCheck"
+    >
+      <template #title="{ slotTitle, ruleFlag }">
+        {{ slotTitle }}
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+      </template>
+    </BasicTree>
+    <!--右下角按钮-->
+    <template #footer>
+      <!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
+      <a-button @click="closeDrawer">取消</a-button>
+      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
+      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
+    </template>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { queryPremTreeList, editPackPermission } from '../tenant.api';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { PACK_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
+  const emit = defineEmits(['register','success']);
+  //树的信息
+  const treeData = ref<TreeItem[]>([]);
+  //树的全部节点信息
+  const allTreeKeys = ref([]);
+  //树的选择节点信息
+  const checkedKeys = ref<any>([]);
+  //树的选中的节点信息
+  const selectedKeys = ref([]);
+  const packId = ref('');
+  //树的实例
+  const treeRef = ref(null);
+  const loading = ref(false);
+
+  //展开折叠的key
+  const expandedKeys = ref<any>([]);
+  //父子节点选中状态是否关联 true不关联，false关联
+  const checkStrictly = ref<boolean>(false);
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await reset();
+    setDrawerProps({ confirmLoading: false, loading: true });
+    packId.value = data.packId;
+    //初始化数据
+    const roleResult = await queryPremTreeList();
+    treeData.value = translateTitle(roleResult.treeList);
+    allTreeKeys.value = roleResult.ids;
+    const localData = localStorage.getItem(PACK_AUTH_CONFIG_KEY);
+    if (localData) {
+      const obj = JSON.parse(localData);
+      obj.level && treeMenuClick({ key: obj.level });
+      obj.expand && treeMenuClick({ key: obj.expand });
+    } else {
+      expandedKeys.value = roleResult.ids;
+    }
+
+    //初始化角色菜单数据
+    if(data.permissionIds){
+      checkedKeys.value = data.permissionIds.split(",");
+    }
+
+    setDrawerProps({ loading: false });
+  });
+  /**
+   * 翻译菜单名称
+   */
+  function translateTitle(data) {
+    if (data?.length) {
+      data.forEach((item) => {
+        if (item.slotTitle) {
+          const { t } = useI18n();
+          if (item.slotTitle.includes("t('") && t) {
+            item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
+          }
+        }
+        if (item.children?.length) {
+          translateTitle(item.children);
+        }
+      });
+    }
+    return data;
+  }
+  /**
+   * 点击选中
+   */
+  function onCheck(o, e) {
+    // checkStrictly: true=>层级独立，false=>层级关联.
+    if (checkStrictly.value) {
+      checkedKeys.value = o.checked ? o.checked : o;
+    } else {
+      const keys = getNodeAllKey(e.node, 'children', 'key');
+      if (e.checked) {
+        // 反复操作下可能会有重复的keys，得用new Set去重下
+        checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
+      } else {
+        const result = removeMatchingItems(checkedKeys.value, keys);
+        checkedKeys.value = result;
+      }
+    }
+  }
+  /**
+   * 删除相匹配数组的项
+   */
+  function removeMatchingItems(arr1, arr2) {
+    // 使用哈希表记录 arr2 中的元素
+    const hashTable = {};
+    for (const item of arr2) {
+      hashTable[item] = true;
+    }
+    // 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
+    return arr1.filter((item) => !hashTable[item]);
+  }
+  /**
+   * 获取当前节点及以下所有子孙级的key
+   */
+  function getNodeAllKey(node: any, children: any, key: string) {
+    const result: any = [];
+    result.push(node[key]);
+    const recursion = (data) => {
+      data.forEach((item: any) => {
+        result.push(item[key]);
+        if (item[children]?.length) {
+          recursion(item[children]);
+        }
+      });
+    };
+    node[children]?.length && recursion(node[children]);
+    return result;
+  }
+  
+  /**
+   * 数据重置
+   */
+  function reset() {
+    treeData.value = [];
+    allTreeKeys.value = [];
+    checkedKeys.value = [];
+    selectedKeys.value = [];
+    packId.value = '';
+  }
+  /**
+   * 获取tree实例
+   */
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  /**
+   * 提交
+   */
+  async function handleSubmit(exit) {
+    let params = {
+      id: unref(packId),
+      permissionIds: unref(getTree()?.getCheckedKeys()).join(','),
+    };
+    if (loading.value === false) {
+      await doSave(params);
+    } else {
+      console.log('请等待上次执行完毕!');
+    }
+    if (exit) {
+      // 如果关闭
+      closeDrawer();
+    }
+  }
+
+  // VUE角色授权重复保存 #352
+  async function doSave(params) {
+    loading.value = true;
+    try {
+      await editPackPermission(params);
+      emit("success")
+    } catch (e) {
+      loading.value = false;
+    }
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  /**
+   * 树菜单选择
+   * @param key
+   */
+  function treeMenuClick({ key }) {
+    if (key === 'checkAll') {
+      checkedKeys.value = allTreeKeys.value;
+    } else if (key === 'cancelCheck') {
+      checkedKeys.value = [];
+    } else if (key === 'openAll') {
+      expandedKeys.value = allTreeKeys.value;
+      saveLocalOperation('expand', 'openAll');
+    } else if (key === 'closeAll') {
+      expandedKeys.value = [];
+      saveLocalOperation('expand', 'closeAll');
+    } else if (key === 'relation') {
+      checkStrictly.value = false;
+      saveLocalOperation('level', 'relation');
+    } else {
+      checkStrictly.value = true;
+      saveLocalOperation('level', 'standAlone');
+    }
+  }
+  /**
+   * 角色授权弹窗操作缓存
+   */
+  const saveLocalOperation = (key, value) => {
+    const localData = localStorage.getItem(PACK_AUTH_CONFIG_KEY);
+    const obj = localData ? JSON.parse(localData) : {};
+    obj[key] = value;
+    localStorage.setItem(PACK_AUTH_CONFIG_KEY, JSON.stringify(obj));
+  };
+</script>
+
+<style lang="less" scoped>
+  /** 固定操作按钮 */
+  .jeecg-basic-tree {
+    position: absolute;
+    width: 618px;
+  }
+  .line {
+    height: 1px;
+    width: 100%;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .more-icon {
+    float: right;
+    margin-right: 2px;
+    cursor: pointer;
+  }
+  :deep(.jeecg-tree-header) {
+    border-bottom: none;
+  }
+</style>
diff --git a/src/views/system/tenant/pack/TenantCurrentPackList.vue b/src/views/system/tenant/pack/TenantCurrentPackList.vue
new file mode 100644
index 0000000..9965022
--- /dev/null
+++ b/src/views/system/tenant/pack/TenantCurrentPackList.vue
@@ -0,0 +1,188 @@
+<!-- 当前租户下套餐 -->
+<template>
+  <div style="display: flex; width: 100%">
+    <div :style="leftStyle">
+      <BasicTable @register="registerTable">
+        <template #tableTitle>
+          <div style="margin-left: 10px; margin-top: 5px"
+            >当前登录租户: <span class="tenant-name">{{ loginTenantName }}</span>
+          </div>
+        </template>
+        <!--操作栏-->
+        <template #action="{ record }">
+          <TableAction :actions="getTableAction(record)" />
+        </template>
+      </BasicTable>
+    </div>
+    <div v-if="showRight" style="width: 49%; transition: width 0.3s">
+      <TenantUserRightList ref="rightListRef" @cancel="handleCancel"></TenantUserRightList>
+    </div>
+  </div>
+  <TenantPackMenuModal @register="registerPackMenu" @success="success" />
+</template>
+<script lang="ts">
+  import { ref, unref, defineComponent, defineEmits } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { packFormSchema, tenantPackColumns } from '../tenant.data';
+  import { getLoginTenantName, packList } from '../tenant.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import TenantPackMenuModal from './TenantPackMenuModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getTenantId } from '/@/utils/auth';
+  import TenantUserRightList from '../components/TenantUserRightList.vue';
+
+  export default defineComponent({
+    name: 'TenantCurrentPackList',
+    components: {
+      TenantUserRightList,
+      BasicTable,
+      TableAction,
+      TenantPackMenuModal,
+    },
+    setup() {
+      const [registerPackMenu, { openModal }] = useModal();
+      const [registerPackUser, { openModal: packUserOpenModal }] = useModal();
+
+      const tenantId = ref<number>();
+      const rightListRef = ref<any>();
+      //是否显示右侧用户列表
+      const showRight = ref<any>();
+      //左侧样式
+      const leftStyle = ref<any>({
+        width: '100%',
+        transition: 'width 0.3s',
+      });
+
+      // 列表页面公共参数、方法
+      const { prefixCls, tableContext } = useListPage({
+        designScope: 'tenant-template',
+        tableProps: {
+          api: packList,
+          columns: tenantPackColumns,
+          immediate: false,
+          formConfig: {
+            schemas: packFormSchema,
+            labelCol: {
+              xxl: 8,
+            },
+            actionColOptions: {
+              xs: 24,
+              sm: 8,
+              md: 8,
+              lg: 8,
+              xl: 8,
+              xxl: 8,
+            },
+          },
+          beforeFetch: (params) => {
+            return Object.assign(params, { tenantId: tenantId.value, status: '1', packType: 'custom' });
+          },
+        },
+      });
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+      //当前登录的租户名称
+      const loginTenantName = ref<string>('');
+      const { createMessage } = useMessage();
+
+      /**
+       * 获取租户名称
+       */
+      getTenantName();
+
+      async function getTenantName() {
+        let id = getTenantId();
+        if (id) {
+          loginTenantName.value = await getLoginTenantName();
+          tenantId.value = Number(id);
+          await reload();
+        }
+      }
+
+      /**
+       * 表格操作
+       * @param record
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '用户',
+            onClick: seeTenantPackUser.bind(null, record),
+          },
+          {
+            label: '权限详情',
+            onClick: handleDetail.bind(null, record),
+          },
+        ];
+      }
+
+      /**
+       * 成功
+       */
+      function success() {
+        (selectedRowKeys.value = []) && reload();
+      }
+
+      /**
+       * 套餐包下面的用户
+       * @param record
+       */
+      function seeTenantPackUser(record) {
+        showRight.value = true;
+        leftStyle.value = {
+          width: '50%',
+          transition: 'width 0.3s',
+        };
+        setTimeout(() => {
+          rightListRef.value.initData(record);
+        }, 300);
+      }
+
+      /**
+       * 详情
+       * @param record
+       */
+      function handleDetail(record) {
+        openModal(true, {
+          isUpdate: true,
+          record: record,
+          tenantId: unref(tenantId),
+          packType: 'custom',
+          showFooter: false,
+        });
+      }
+
+      /**
+       * 关闭回调
+       */
+      function handleCancel() {
+        showRight.value = false;
+        leftStyle.value = {
+          width: '100%',
+          transition: 'width 0.3s',
+        };
+      }
+
+      return {
+        registerPackMenu,
+        success,
+        getTableAction,
+        registerTable,
+        rowSelection,
+        rightListRef,
+        showRight,
+        registerPackUser,
+        loginTenantName,
+        leftStyle,
+        handleCancel,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .tenant-name {
+    text-decoration: underline;
+    margin: 5px;
+    font-size: 15px;
+  }
+</style>
diff --git a/src/views/system/tenant/pack/TenantDefaultPackList.vue b/src/views/system/tenant/pack/TenantDefaultPackList.vue
new file mode 100644
index 0000000..7aba735
--- /dev/null
+++ b/src/views/system/tenant/pack/TenantDefaultPackList.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">租户默认套餐
+        </a-button>
+        <a-button
+          v-if="selectedRowKeys.length > 0"
+          preIcon="ant-design:delete-outlined"
+          type="primary"
+          @click="handlePackBatch"
+          style="margin-right: 5px"
+        >批量删除
+        </a-button>
+        <span style="color: #666; font-size: 14px; margin-left: 12px; margin-top: 4px; display: inline-block;">
+          租户默认套餐是指新建租户时自动拥有的基础套餐，所有租户都将继承这些套餐权限
+        </span>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" />
+      </template>
+    </BasicTable>
+    <!--  套餐包  -->
+    <TenantPackMenuModal @register="registerPackMenuModal" @success="handleSuccess"/>
+    <PackPermissionDrawer @register="registerPackPermDrawer" @success="handleSuccess"/>
+  </div>
+</template>
+<script lang="ts" name="tenant-default-pack" setup>
+  import { ref, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { deleteTenantPack, packList } from '../tenant.api';
+  import { defalutPackColumns, defaultPackFormSchema } from "../tenant.data";
+  import TenantPackMenuModal from './TenantPackMenuModal.vue';
+  import PackPermissionDrawer from './PackPermissionDrawer.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useUserStore } from '/@/store/modules/user';
+  import {Modal} from "ant-design-vue";
+  import {useDrawer} from "@/components/Drawer";
+
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerPackMenuModal, { openModal: packModal }] = useModal();
+  const userStore = useUserStore();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'tenant-template',
+    tableProps: {
+      api: packList,
+      columns: defalutPackColumns,
+      formConfig: {
+        schemas: defaultPackFormSchema,
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, { packType: 'default' });
+      },
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+  const [registerPackPermDrawer, { openDrawer: openPackPermDrawer }] = useDrawer();
+
+  /**
+   * 操作列定义
+   * @param record
+   */
+  function getActions(record) {
+    return [
+      {
+        label: '授权',
+        onClick: handleRolePrem.bind(null, record),
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除租户套餐包',
+          confirm: handleDelete.bind(null, record.id),
+        },
+      },
+    ];
+  }
+
+  /**
+   * 编辑套餐包
+   */ 
+  function handleAdd() {
+    packModal(true, {
+      isUpdate: false,
+      packType:'default',
+      showFooter: true
+    });
+  }
+  
+  
+  /**
+   * 删除默认套餐包
+   */ 
+  async function handleDelete(id) {
+    await deleteTenantPack({ ids: id }, handleSuccess);
+  }
+  /**
+   * 编辑
+   */
+  function handleEdit(record) {
+    packModal(true, {     
+      isUpdate: true,
+      record: record,
+      packType:'default',
+      showFooter: true
+    });
+  }
+
+  /**
+   * 新增套餐包
+   */
+  async function handlePack() {
+    if (unref(selectedRowKeys).length > 1) {
+      createMessage.warn('请选择一个');
+      return;
+    }
+    packModal(true, {
+      tenantId: unref(selectedRowKeys.value.join(',')),
+    });
+  }
+
+  /**
+   * 删除成功之后回调事件
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 批量删除套餐包
+   */
+  async function handlePackBatch() {
+    Modal.confirm({
+      title: '删除租户套餐包',
+      content: '是否删除租户套餐包',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        await deleteTenantPack({ ids: selectedRowKeys.value.join(',')}, handleSuccess);
+      }
+    })
+  }
+
+  /**
+   * 授权
+   * 
+   * @param record
+   */
+  function handleRolePrem(record) {
+    openPackPermDrawer(true,{
+      packId: record.id,
+      permissionIds: record.permissionIds
+    })
+  }
+</script>
diff --git a/src/views/system/tenant/pack/TenantPackList.vue b/src/views/system/tenant/pack/TenantPackList.vue
new file mode 100644
index 0000000..23d41f7
--- /dev/null
+++ b/src/views/system/tenant/pack/TenantPackList.vue
@@ -0,0 +1,266 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="800px" :showCancelBtn="false" :showOkBtn="false">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px" v-if="showPackAddAndEdit">新增 </a-button>
+        <a-button
+          v-if="selectedRowKeys.length > 0"
+          preIcon="ant-design:delete-outlined"
+          type="primary"
+          @click="handlePackBatch"
+          style="margin-right: 5px"
+          >批量删除
+        </a-button>
+        <a-button
+          preIcon="ant-design:sync-outlined"
+          type="primary"
+          @click="handleSyncDefaultPack"
+          style="margin-right: 5px"
+          >初始化默认套餐
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+  <TenantPackMenuModal @register="registerPackMenu" @success="success" />
+  <TenantPackUserModal @register="registerPackUser" @success="success" />
+  <PackPermissionDrawer @register="registerPackPermDrawer" @success="success"/>
+</template>
+<script lang="ts" setup name="tenant-pack-modal">
+  import { reactive, ref, unref } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { packColumns, userColumns, packFormSchema } from '../tenant.data';
+  import { getTenantUserList, leaveTenant, packList, deleteTenantPack, syncDefaultTenantPack } from '../tenant.api';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import TenantPackMenuModal from './TenantPackMenuModal.vue';
+  import {Modal} from "ant-design-vue";
+  import TenantPackUserModal from './TenantPackUserModal.vue';
+  import {useMessage} from "/@/hooks/web/useMessage";
+  import PackPermissionDrawer from "@/views/system/tenant/pack/PackPermissionDrawer.vue";
+  import { useDrawer } from "@/components/Drawer";
+
+  const [registerPackMenu, { openModal }] = useModal();
+  const [registerPackUser, { openModal: packUserOpenModal }] = useModal();
+  const [registerPackPermDrawer, { openDrawer: openPackPermDrawer }] = useDrawer();
+  
+  const tenantId = ref<number>(0);
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext } = useListPage({
+    designScope: 'tenant-template',
+    tableProps: {
+      api: packList,
+      columns: packColumns,
+      immediate: false,
+      formConfig: {
+        schemas: packFormSchema,
+        labelCol: {
+          xxl: 8,
+        },
+        actionColOptions: {
+          xs: 24,
+          sm: 8,
+          md: 8,
+          lg: 8,
+          xl: 8,
+          xxl: 8,
+        },
+      },
+      beforeFetch: (params) => {
+        return Object.assign(params, { tenantId: unref(tenantId), packType:'custom' });
+      },
+    },
+  });
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  //是否显示新增和编辑套餐包
+  const showPackAddAndEdit = ref<boolean>(false);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    tenantId.value = data.tenantId;
+    showPackAddAndEdit.value = data.showPackAddAndEdit;
+    success();
+  });
+  //设置标题
+  const title = '租户个性化套餐包';
+
+  //表单提交事件
+  async function handleSubmit(v) {
+    closeModal();
+  }
+
+  function getActions(record) {
+    return [
+      {
+        label: '用户',
+        onClick: seeTenantPackUser.bind(null, record),
+      },
+      {
+        label: '授权',
+        onClick: handleRolePrem.bind(null, record),
+        ifShow: ()=>{ return showPackAddAndEdit.value }
+      },
+    ];
+  }
+
+  /**
+   * 成功
+   */
+  function success() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 编辑
+   * @param record
+   */
+  async function handleEdit(record) {
+    openModal(true, {
+      isUpdate: true,
+      record: record,
+      tenantId: unref(tenantId),
+      packType:'custom',
+      showFooter: true
+    });
+  }
+
+  //默认系统套餐包不允许删除,包含(超级管理员、组织账户管理员、组织应用管理员)
+  const packCode = reactive<any>(['superAdmin','accountAdmin','appAdmin']);
+  const { createMessage } = useMessage();
+  
+  /**
+   * 删除套餐包
+   * @param 删除
+   */
+  async function handleDelete(record) {
+    // 代码逻辑说明: 系统默认套餐包不允许删除------------
+    if(packCode.indexOf(record.packCode) != -1){
+        createMessage.warning("默认系统套餐包不允许删除");
+       return;
+    }
+    if(record.packCode && record.packCode.indexOf("default") != -1){
+      createMessage.warning("默认套餐包不允许删除");
+      return;
+    }
+    await deleteTenantPack({ ids: record.id }, success);
+  }
+
+  /**
+   * 批量删除套餐包
+   */
+  async function handlePackBatch() {
+    let value = selectedRows.value;
+    if(value && value.length>0){
+      for (let i = 0; i < value.length; i++) {
+        if(packCode.indexOf(value[i].packCode) != -1){
+          createMessage.warning("默认系统套餐包不允许删除");
+          return;
+        }
+        // 代码逻辑说明: 默认套餐不允许删除---
+        if(value[i].packCode && value[i].packCode.indexOf("default") != -1){
+          createMessage.warning("默认套餐包不允许删除");
+          return;
+        }
+      }
+    }
+    Modal.confirm({
+      title: '删除租户套餐包',
+      content: '是否删除租户套餐包',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        await deleteTenantPack({ ids: selectedRowKeys.value.join(',')}, success);
+      }
+    })
+  }
+
+  async function handleSyncDefaultPack() {
+    Modal.confirm({
+      title: '初始化默认套餐包',
+      content: '是否初始化默认套餐包',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        await syncDefaultTenantPack({tenantId: unref(tenantId)}, success);
+      },
+    });
+  }
+
+  /**
+   *
+   * 新增表单
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      tenantId: unref(tenantId),
+      packType:'custom',
+      showFooter: true
+    });
+  }
+
+  /**
+   * 套餐包下面的用户
+   * @param record
+   */
+  function seeTenantPackUser(record) {
+    packUserOpenModal(true,{
+      record:record
+    })
+  }
+
+  /**
+   * 更多
+   * @param record
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: ()=>{ return showPackAddAndEdit.value }
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除租户套餐包',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ]
+  }
+
+  /**
+   * 详情
+   * @param record
+   */
+  function handleDetail(record) {
+    openModal(true, {
+      isUpdate: true,
+      record: record,
+      tenantId: unref(tenantId),
+      packType:'custom',
+      showFooter: false
+    });
+  }
+
+
+  /**
+   * 授权
+   *
+   * @param record
+   */
+  function handleRolePrem(record) {
+    openPackPermDrawer(true,{
+      packId: record.id,
+      permissionIds: record.permissionIds
+    })
+  }
+</script>
diff --git a/src/views/system/tenant/pack/TenantPackMenuModal.vue b/src/views/system/tenant/pack/TenantPackMenuModal.vue
new file mode 100644
index 0000000..f2f640b
--- /dev/null
+++ b/src/views/system/tenant/pack/TenantPackMenuModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="800px" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="tenant-pack-menu-modal">
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { packMenuFormSchema } from '../tenant.data';
+  import { addPackPermission, editPackPermission } from '../tenant.api';
+
+  const isUpdate = ref<boolean>(false);
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
+    schemas: packMenuFormSchema,
+    showActionButtonGroup: false,
+  });
+  //租户
+  const tenantId = ref<number>();
+  //套餐包类型
+  const packType = ref<number>();
+  //权限
+  const permissionIds = ref<string>();
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    isUpdate.value = !!data?.isUpdate;
+    if(data.tenantId){
+      tenantId.value = data.tenantId;
+    }
+    packType.value = data.packType;
+    if (unref(isUpdate)) {
+      //表单赋值
+      console.log(data.record)
+      await setFieldsValue({ ...data.record });
+      permissionIds.value = data.record.permissionIds;
+    }
+    // 代码逻辑说明: 【QQYUN-5685】2 套餐包增加一个查看：添加底部有没有按钮及表单禁用------------
+    setModalProps({ confirmLoading: false, showCancelBtn:!!data?.showFooter, showOkBtn:!!data?.showFooter });
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter })
+  });
+  //设置标题
+  const title = computed(() => (unref(isUpdate) ? '编辑 租户套餐' : '新增 租户套餐'));
+  //表单提交事件
+  async function handleSubmit(v) {
+    const values = await validate();
+    
+    setModalProps({ confirmLoading: true });
+    values.packType = unref(packType);
+    if(values.packType === 'custom'){
+      values.tenantId = unref(tenantId);
+    }else{
+      values.tenantId = 0;
+    }
+    values.permissionIds = permissionIds.value;
+    if (!unref(isUpdate)) {
+      await addPackPermission(values);
+    } else {
+      await editPackPermission(values);
+    }
+    emit('success');
+    setModalProps({ confirmLoading: false });
+    closeModal();
+  }
+</script>
diff --git a/src/views/system/tenant/pack/TenantPackUserModal.vue b/src/views/system/tenant/pack/TenantPackUserModal.vue
new file mode 100644
index 0000000..cffec08
--- /dev/null
+++ b/src/views/system/tenant/pack/TenantPackUserModal.vue
@@ -0,0 +1,170 @@
+<template>
+  <BasicModal @register="registerModal" destroyOnClose :title="title" :width="1000" :footer="null">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #departNames="{ text, record }">
+        <template v-if="text && text.length > 0">
+          {{ getName(text) }}
+        </template>
+      </template>
+      <template #positionNames="{ text, record }">
+        <template v-if="text && text.length > 0">
+          {{ getName(text) }}
+        </template>
+      </template>
+      <template #tableTitle>
+        <a-button preIcon="ant-design:usergroup-add-outlined" type="primary" @click="addUser">邀请成员</a-button>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <tenant-user-select-modal :multi="true" @register="registerUserModal" @on-select="onSelected" :tenantId="getTenantId"></tenant-user-select-modal>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, reactive, ref } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { tenantPackUserColumns } from '../tenant.data';
+  import { queryTenantPackUserList, deleteTenantPackUser, addTenantPackUser } from '../tenant.api';
+  import TenantUserSelectModal from '../components/TenantUserSelectModal.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+
+  export default defineComponent({
+    name: 'TenantPackUserModal',
+    components: { BasicModal, BasicTable, TableAction, TenantUserSelectModal },
+    setup() {
+      //获取租户id
+      const getTenantId = computed(()=>{
+        return tenantPackData.tenantId;
+      })
+      
+      //套餐包信息
+      const tenantPackData = reactive<any>({});
+      //表单赋值
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        setModalProps({ confirmLoading: false, showCancelBtn: true, showOkBtn: false });
+        Object.assign(tenantPackData, data.record);
+        await reload();
+      });
+      const { createMessage } = useMessage();
+      //设置标题
+      const title = ref<string>('用户');
+      //注册table数据
+      const { tableContext } = useListPage({
+        tableProps: {
+          api: queryTenantPackUserList,
+          immediate: false,
+          columns: tenantPackUserColumns,
+          canResize: false,
+          useSearchForm: false,
+          beforeFetch: (params) => {
+            params.tenantId = tenantPackData.tenantId;
+            params.packId = tenantPackData.id;
+            params.status = 1;
+            return params;
+          },
+          actionColumn: {
+            width: 120,
+            fixed: 'right',
+          },
+        },
+      });
+      const [registerUserModal, { openModal: openUserModal, closeModal: closeUserModal }] = useModal();
+      const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+
+      /**
+       * 获取部门/职务名称
+       * @param value
+       */
+      function getName(value) {
+        return value.join(',');
+      }
+
+      /**
+       * 表格操作列
+       * @param record
+       */
+      function getTableAction(record) {
+        return [
+          {
+            label: '移除',
+            popConfirm: {
+              title: '是否确认移除',
+              confirm: handleDelete.bind(null, record),
+            }
+          },
+        ];
+      }
+
+      /**
+       * 删除
+       */
+      async function handleDelete(record) {
+        let params = {
+          packId: record.packId,
+          packName: record.packName,
+          tenantId: tenantPackData.tenantId,
+          userId: record.id,
+          realname: record.realname,
+        };
+        await deleteTenantPackUser(params);
+        await reload();
+      }
+
+      /**
+       * 添加用户弹窗
+       */
+      function addUser() {
+        openUserModal(true, {
+          list: [],
+        });
+      }
+
+      /**
+       * 邀请人回调事件
+       * @param arr
+       */
+      async function onSelected(arr) {
+        if (arr && arr.length > 0) {
+          let names: any[] = [];
+          let ids: any[] = [];
+          for (let u of arr) {
+            names.push(u.realname);
+            ids.push(u.id);
+          }
+          console.log(tenantPackData);
+          let params = {
+            packId: tenantPackData.id,
+            packName: tenantPackData.packName,
+            tenantId: tenantPackData.tenantId,
+            userId: ids.join(','),
+            realname: names.join(','),
+          };
+          await addTenantPackUser(params);
+          await reload();
+        }
+        closeUserModal();
+      }
+
+      return {
+        title,
+        registerModal,
+        registerTable,
+        rowSelection,
+        getName,
+        getTableAction,
+        registerUserModal,
+        addUser,
+        onSelected,
+        getTenantId,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/tenant/tenant.api.ts b/src/views/system/tenant/tenant.api.ts
new file mode 100644
index 0000000..0844de8
--- /dev/null
+++ b/src/views/system/tenant/tenant.api.ts
@@ -0,0 +1,274 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+import { getTenantId } from "/@/utils/auth";
+
+enum Api {
+  list = '/sys/tenant/list',
+  save = '/sys/tenant/add',
+  edit = '/sys/tenant/edit',
+  get = '/sys/tenant/queryById',
+  delete = '/sys/tenant/delete',
+  deleteBatch = '/sys/tenant/deleteBatch',
+  getCurrentUserTenants = '/sys/tenant/getCurrentUserTenant',
+  invitationUserJoin = '/sys/tenant/invitationUserJoin',
+  getTenantUserList = '/sys/tenant/getTenantUserList',
+  leaveTenant = '/sys/tenant/leaveTenant',
+  packList = '/sys/tenant/packList',
+  addPackPermission = '/sys/tenant/addPackPermission',
+  editPackPermission = '/sys/tenant/editPackPermission',
+  deleteTenantPack = '/sys/tenant/deleteTenantPack',
+  recycleBinPageList = '/sys/tenant/recycleBinPageList',
+  deleteLogicDeleted = '/sys/tenant/deleteLogicDeleted',
+  revertTenantLogic = '/sys/tenant/revertTenantLogic',
+  syncDefaultPack = '/sys/tenant/syncDefaultPack',
+  //用户产品包关系api
+  queryTenantPackUserList = '/sys/tenant/queryTenantPackUserList',
+  deleteTenantPackUser = '/sys/tenant/deleteTenantPackUser',
+  addTenantPackUser = '/sys/tenant/addTenantPackUser',
+  //获取用户租户列表
+  getTenantPageListByUserId = '/sys/tenant/getTenantPageListByUserId',
+  
+  //新增、编辑用户租户
+  saveUser = '/sys/user/addTenantUser',
+  editUser = '/sys/user/editTenantUser',
+  //根据租户id和用户获取用户的产品包列表和当前用户下的产品包id
+  listPackByTenantUserId = '/sys/tenant/listPackByTenantUserId',
+  // 获取菜单权限
+  queryPremTreeList = '/sys/role/queryTreeList',
+}
+
+/**
+ * 查询租户列表
+ * @param params
+ */
+export const getTenantList = (params) => {
+  return defHttp.get({ url: Api.list, params });
+};
+
+/**
+ * 保存或者更新租户
+ * @param params
+ */
+export const saveOrUpdateTenant = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 查询租户详情
+ * @param params
+ */
+export const getTenantById = (params) => {
+  return defHttp.get({ url: Api.get, params });
+};
+
+/**
+ * 删除租户
+ * @param params
+ */
+export const deleteTenant = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.delete, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 批量删除租户
+ * @param params
+ */
+export const batchDeleteTenant = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 获取登录用户部门信息
+ */
+export const getUserTenants = (params?) => defHttp.get({ url: Api.getCurrentUserTenants, params });
+
+/**
+ * 邀请用户加入租户
+ * @param params
+ */
+export const invitationUserJoin = (params) => defHttp.put({ url: Api.invitationUserJoin, params }, { joinParamsToUrl: true });
+
+/**
+ * 通过租户id获取数据
+ * @param params
+ */
+export const getTenantUserList = (params) => {
+  return defHttp.get({ url: Api.getTenantUserList, params });
+};
+
+/**
+ * 用户离开租户
+ * @param params
+ */
+export const leaveTenant = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '请离',
+    content: '是否将此用户请离当前租户',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.put({ url: Api.leaveTenant, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+
+/**
+ * 获取产品包列表
+ * @param params
+ */
+export const packList = (params) => {
+  return defHttp.get({ url: Api.packList, params });
+};
+
+/**
+ * 添加菜单
+ * @param params
+ */
+export const addPackPermission = (params) => {
+  return defHttp.post({ url: Api.addPackPermission, params });
+};
+
+/**
+ * 添加菜单
+ * @param params
+ */
+export const editPackPermission = (params) => {
+  return defHttp.put({ url: Api.editPackPermission, params });
+};
+
+/**
+ * 删除菜单
+ * @param params
+ */
+export const deleteTenantPack = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteTenantPack, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 初始化套餐包
+ * @param params
+ * @param handleSuccess
+ */
+export const syncDefaultTenantPack = (params, handleSuccess) => {
+  return defHttp.post({ url: Api.syncDefaultPack, data: params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 获取租户回收站的列表
+ * @param params
+ */
+export const recycleBinPageList = (params) => {
+  return defHttp.get({ url: Api.recycleBinPageList, params });
+};
+
+/**
+ * 租户彻底删除
+ * @param params
+ */
+export const deleteLogicDeleted = (params,handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteLogicDeleted, params },{ joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  }).catch(()=>{
+    handleSuccess();
+  });
+};
+
+/**
+ * 租户还原
+ * @param params
+ */
+export const revertTenantLogic = (params,handleSuccess) => {
+  return defHttp.put({ url: Api.revertTenantLogic, params },{ joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  })
+};
+
+/**
+ * 获取租户产品包下面的用户
+ * @param params
+ */
+export const queryTenantPackUserList = (params) => {
+  return defHttp.get({ url: Api.queryTenantPackUserList, params });
+};
+
+/**
+ * 移除用户和产品包的关系数据
+ * @param params
+ */
+export const deleteTenantPackUser = (params)=>{
+  return defHttp.put({ url: Api.deleteTenantPackUser, params });
+}
+
+/**
+ * 添加用户和产品包的关系数据
+ * @param params
+ */
+export const addTenantPackUser = (params)=>{
+  return defHttp.post({ url: Api.addTenantPackUser, params });
+}
+
+/**
+ * 查询用户租户列表
+ * @param params
+ */
+export const getTenantPageListByUserId = (params) => {
+  return defHttp.get({ url: Api.getTenantPageListByUserId, params });
+};
+
+
+/**
+ * 获取当前登录租户名称
+ */
+export async function getLoginTenantName() {
+  let tenantId = getTenantId();
+  if(tenantId){
+    let result = await getTenantById({ id:tenantId });
+    if(result){
+      return result.name;
+    }
+  }
+  return "空";
+}
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdateTenantUser = (params, isUpdate) => {
+  let url = isUpdate ? Api.editUser : Api.saveUser;
+  return defHttp.post({ url: url, params },{ joinParamsToUrl: true });
+};
+/**
+ * 根据租户id和用户获取用户的产品包列表和当前用户下的产品包id
+ * 
+ * @param params
+ */
+export const listPackByTenantUserId = (params) => {
+  return defHttp.get({ url: Api.listPackByTenantUserId, params });
+}
+
+/**
+ * 获取菜单树
+ */
+export const queryPremTreeList = () =>{
+  return defHttp.get({ url: Api.queryPremTreeList });
+}
diff --git a/src/views/system/tenant/tenant.data.ts b/src/views/system/tenant/tenant.data.ts
new file mode 100644
index 0000000..a91a0c0
--- /dev/null
+++ b/src/views/system/tenant/tenant.data.ts
@@ -0,0 +1,609 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+import { render } from "/@/utils/common/renderUtils";
+import { rules } from "/@/utils/helper/validator";
+
+export const columns: BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'name',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '租户编号(ID)',
+    dataIndex: 'id',
+    width: 180,
+  },{
+    title: '组织LOGO',
+    dataIndex: 'companyLogo',
+    width: 100,
+    customRender: ({ text }) => {
+      if(!text){
+        return text;
+      }
+      return render.renderImage({text});
+    },
+  },
+  {
+    dataIndex: 'trade_dictText',
+    title: '所属行业',
+    width: 150
+  },
+  {
+    dataIndex: 'companySize_dictText',
+    title: '公司规模',
+    width: 100
+  },
+  {
+    dataIndex: 'houseNumber',
+    title: '门牌号',
+    width: 100,
+  },
+  // {
+  //   dataIndex: 'position_dictText',
+  //   title: '职级',
+  //   width: 150
+  // },
+  // {
+  //   dataIndex: 'department_dictText',
+  //   title: '部门',
+  //   width: 150
+  // },
+  {
+    dataIndex: 'createBy_dictText',
+    title: '创建者(拥有)',
+    width: 150
+  },
+/*  {
+    title: '开始时间',
+    dataIndex: 'beginDate',
+    sorter: true,
+    width: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endDate',
+    sorter: true,
+    width: 180,
+  },*/
+  {
+    title: '状态',
+    dataIndex: 'status_dictText',
+    width: 100,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '租户名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '正常', value: 1 },
+        { label: '冻结', value: 0 },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+  // {
+  //   field: 'fieldTime',
+  //   component: 'RangePicker',
+  //   label: '时间字段',
+  //   componentProps: {
+  //     valueType: 'Date',
+  //   },
+  //   colProps: {
+  //     span: 8,
+  //   },
+  // },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '租户名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'id',
+    label: '租户编号(ID)',
+    component: 'InputNumber',
+    required: true,
+    ifShow: ({ values }) => {
+      return values.id!=null;
+    },
+  },
+  {
+    field: 'companyLogo',
+    label: '组织LOGO',
+    component: 'JImageUpload',
+    componentProps:{
+      text:'logo'
+    }
+  },
+  {
+    field: 'trade',
+    label: '所属行业',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode:'trade',
+    }
+  }, {
+    field: 'companySize',
+    label: '公司规模',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode:'company_size',
+    }
+  }, {
+    field: 'companyAddress',
+    label: '公司地址',
+    component: 'JAreaSelect',
+    componentProps: {
+      placeholder: '请输入公司地址',
+      rows: 4,
+    }
+  },
+  {
+    field: 'workPlace',
+    label: '工作地点',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入工作地点',
+      rows: 4,
+    }
+  },
+/*  {
+    field: 'beginDate',
+    label: '开始时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer: getAutoScrollContainer,
+    },
+  },
+  {
+    field: 'endDate',
+    label: '结束时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer: getAutoScrollContainer,
+    },
+  },*/
+  {
+    field: 'houseNumber',
+    label: '门牌号',
+    component: 'Input',
+    dynamicDisabled: true,
+    ifShow: ({ values }) => {
+      return values.id!=null;
+    },
+  },
+  {
+    field: 'position',
+    label: '职级',
+    component: 'JDictSelectTag',
+    componentProps:{
+      dictCode: 'company_rank'
+    }
+  },
+  {
+    field: 'department',
+    label: '部门',
+    component: 'JDictSelectTag',
+    componentProps:{
+      dictCode:'company_department'
+    }
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 1,
+    componentProps: {
+      options: [
+        { label: '正常', value: 1 },
+        { label: '冻结', value: 0 },
+      ],
+    },
+  },
+];
+
+//定义用户表格列
+export const userColumns: BasicColumn[] =[
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+    width: 100,
+    align: 'left',
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+    width: 100,
+  },
+  {
+    title: '性别',
+    dataIndex: 'sex_dictText',
+    width: 100,
+  },
+  {
+    title: '手机号码',
+    dataIndex: 'phone',
+    width: 100,
+  },
+];
+
+//邀请用户搜索表单
+export const userSearchFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '账号',
+    component: 'Input',
+  },
+  {
+    field: 'realname',
+    label: '姓名',
+    component: 'Input',
+  },
+];
+
+//套餐包列表
+export const packColumns: BasicColumn[] = [
+  {
+    title: '套餐包名称',
+    dataIndex: 'packName',
+    width: 100,
+    customRender: ( { record, text }) => {
+      if(record.packCode && record.packCode.indexOf('default') != -1) {
+        return text + '(默认产品包)';
+      } else {
+        return text;
+      }
+    }
+  },
+  {
+    title: '是否自动分配用户',
+    dataIndex: 'izSysn',
+    width: 100,
+    customRender: ( { text }) => {
+      if(text === '1') {
+        return '是';
+      } else {
+        return '否';
+      }
+    }
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender: ({ text }) => {
+      if (text === '1') {
+        return '开启';
+      } else {
+        return '关闭';
+      }
+    },
+  },
+  {
+    title: '备注说明',
+    dataIndex: 'remarks',
+    width: 150,
+  },
+];
+
+//套餐包列表
+export const tenantPackColumns: BasicColumn[] = [
+  {
+    title: '套餐包名称',
+    dataIndex: 'packName',
+    width: 100,
+    customRender: ( { record, text }) => {
+      if(record.packCode && record.packCode.indexOf('default') != -1) {
+        return text + '(默认产品包)';
+      } else {
+        return text;
+      }
+    }
+  },
+  {
+    title: '是否自动分配用户',
+    dataIndex: 'izSysn',
+    width: 100,
+    customRender: ( { text }) => {
+      if(text === '1') {
+        return '是';
+      } else {
+        return '否';
+      }
+    }
+  },
+  {
+    title: '备注说明',
+    dataIndex: 'remarks',
+    width: 150,
+  },
+];
+
+//套餐包列表
+export const defalutPackColumns: BasicColumn[] = [
+  {
+    title: '默认套餐名称',
+    dataIndex: 'packName',
+    width: 100,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender: ({ text }) => {
+      if (text === '1') {
+        return '开启';
+      } else {
+        return '关闭';
+      }
+    },
+  },
+  {
+    title: '备注说明',
+    dataIndex: 'remarks',
+    width: 150,
+  },
+];
+
+//套餐包搜索表单
+export const packFormSchema: FormSchema[] = [
+  {
+    field: 'packName',
+    label: '套餐包名',
+    component: 'JInput',
+    colProps: { xxl: 8 },
+  },
+];
+
+//套餐包搜索表单
+export const defaultPackFormSchema: FormSchema[] = [
+  {
+    field: 'packName',
+    label: '默认套餐名',
+    component: 'JInput',
+    colProps: { xxl: 8 },
+  },
+];
+
+//套餐包表单
+export const packMenuFormSchema: FormSchema[] = [
+  {
+    field: 'packName',
+    label: '套餐包名称',
+    component: 'Input',
+  },
+/*  {
+    field: 'permissionIds',
+    label: '授权菜单',
+    component: 'JTreeSelect',
+    componentProps: {
+      dict: 'sys_permission,name,id',
+      pidField: 'parent_id',
+      hasChildField:'is_leaf',
+      multiple: true,
+      treeCheckAble:true,
+      treeCheckStrictly: true,
+      converIsLeafVal: 0,
+      getPopupContainer: () => document.body,
+    },
+  },*/
+  {
+    field: 'remarks',
+    label: '备注说明',
+    component: 'InputTextArea',
+  },
+  {
+    field: 'izSysn',
+    label: '自动分配用户',
+    component: 'Switch',
+    componentProps: {
+      checkedValue: "1",
+      checkedChildren: '是',
+      unCheckedValue: "0",
+      unCheckedChildren: '否',
+    },
+    defaultValue: "1",
+    helpMessage: "默认会自动分配给用户，个性高级套餐，需要租户管理员手工分配人员(拥有更灵活性权限控制)"
+  },  
+  {
+    field: 'status',
+    label: '开启状态',
+    component: 'Switch',
+    componentProps: {
+      checkedValue: '1',
+      checkedChildren: '开启',
+      unCheckedValue: '0',
+      unCheckedChildren: '关闭',
+    },
+    defaultValue: '1',
+  },
+  {
+    field: 'id',
+    label: '开启状态',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'packCode',
+    label: '产品包编码',
+    component: 'Input',
+    show: false
+  },  
+  {
+    field: 'packType',
+    label: '产品包类型',
+    component: 'Input',
+    show: false
+  },
+];
+
+//回收站列表
+export const recycleColumns : BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'name',
+    width: 100,
+    align: 'left',
+  },
+  {
+    title: '租户编号(ID)',
+    dataIndex: 'id',
+    width: 100,
+  },
+  {
+    title: '组织LOGO',
+    dataIndex: 'companyLogo',
+    width: 100,
+    customRender: ({ text }) => {
+      if(!text){
+        return text;
+      }
+      return render.renderImage({text});
+    },
+  },
+  {
+    dataIndex: 'houseNumber',
+    title: '门牌号',
+    width: 100,
+  }
+]
+
+//租户回收站搜索表单
+export const searchRecycleFormSchema : FormSchema[] = [
+  {
+    field: 'name',
+    label: '租户名称',
+    component: 'Input',
+  },
+  {
+    field: 'houseNumber',
+    label: '门牌号',
+    component: 'Input',
+  },
+]
+
+//套餐包用户列表
+export const tenantPackUserColumns: BasicColumn[] = [
+  {
+    title: '用户',
+    dataIndex: 'realname',
+    width: 200,
+  },
+  {
+    title: '部门',
+    dataIndex: 'departNames',
+    width: 200,
+    ellipsis: true,
+    slots: { customRender: 'departNames' }
+  },
+  {
+    title: '职位',
+    dataIndex: 'positionNames',
+    ellipsis: true,
+    width: 200,
+    slots: { customRender: 'positionNames' }
+  }
+]
+
+/**
+ * 用户租户新增编辑表单
+ */
+export const tenantUserSchema: FormSchema[] = [
+  { field: 'id', label: 'id', component: 'Input', show: false },
+  { field: 'username', label: 'username', component: 'Input', show: false },
+  {
+    field: 'realname',
+    label: '姓名',
+    component: 'Input',
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+  },
+  {
+    field: 'phone',
+    label: '手机',
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => {
+      if (model.id) {
+        return [];
+      }
+      return [{ ...rules.phone(true)[0] }, { ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, false)[0] }];
+    },
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => {
+      if (model.id) {
+        return [];
+      }
+      return [{ ...rules.email(true)[0] }, { ...rules.duplicateCheckRule('sys_user', 'email', model, schema, false)[0] }];
+    },
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+  },
+  { field: 'selecteddeparts', label: '部门', component: 'JSelectDept', componentProps: { checkStrictly: true } },
+ /* {
+    field: 'post',
+    label: '职位',
+    component: 'JSelectPosition',
+  },
+  {
+    field: 'workNo',
+    label: '工号',
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => {
+      return [{ required: false, message: '请输入工号' }, { ...rules.duplicateCheckRule('sys_user', 'work_no', model, schema, false)[0] }];
+    },
+  },*/
+  { field: 'relTenantIds', label: '租户', component: 'Input',show:false },
+  { field: 'selectedroles', label: '角色', component: 'Input',show:false },
+];
+
+// 分配用户套餐
+export const packUserAllotSchemas: FormSchema[] = [
+  { 
+    field: 'userId', 
+    label: '用户id', 
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'realname',
+    label: '用户姓名',
+    component: 'Input',
+    componentProps:{
+      readonly : true
+    },
+  },
+  {
+    field: 'packId',
+    label: '套餐',
+    component: 'Select',
+    slot: 'packId'
+  }
+];
\ No newline at end of file
diff --git a/src/views/system/ugroup/SysUgroupList.vue b/src/views/system/ugroup/SysUgroupList.vue
new file mode 100644
index 0000000..6ace530
--- /dev/null
+++ b/src/views/system/ugroup/SysUgroupList.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" v-auth="'system:sys_ugroup:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
+        <a-button type="primary" v-auth="'system:sys_ugroup:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
+        <j-upload-button type="primary" v-auth="'system:sys_ugroup:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls"
+          >导入</j-upload-button
+        >
+
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button v-auth="'system:sys_ugroup:deleteBatch'"
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!-- 表单区域 -->
+    <SysUgroupModal @register="registerModal" @success="handleSuccess"></SysUgroupModal>
+    <!--角色用户表格-->
+    <GroupUserTable @register="groupUserDrawer" />
+  </div>
+</template>
+
+<script lang="ts" name="system-sysUgroup" setup>
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columns, searchFormSchema } from './ugroup.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './ugroup.api';
+  import SysUgroupModal from './components/SysUgroupModal.vue';
+  import GroupUserTable from './components/GroupUserTable.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  //注册model
+  const [registerModal, { openModal }] = useModal();
+  //注册table数据
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: '用户组表',
+      api: list,
+      columns,
+      canResize: true,
+      formConfig: {
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+      },
+      actionColumn: {
+        width: 150,
+        fixed: 'right',
+      },
+    },
+    exportConfig: {
+      name: '用户组',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess,
+    },
+  });
+
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
+  const [groupUserDrawer, { openDrawer: openGroupUserDrawer }] = useDrawer();
+  /**
+   * 新增事件
+   */
+  function handleAdd() {
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteOne({ id: record.id }, handleSuccess);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+  /**
+   * 用户组用户
+   */
+  function handleUser(record) {
+    openGroupUserDrawer(true, record);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '用户',
+        onClick: handleUser.bind(null, record),
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        auth: 'system:sys_ugroup:edit',
+      },
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+          placement: 'topLeft',
+        },
+        auth: 'system:sys_ugroup:delete',
+      },
+    ];
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/system/ugroup/components/GroupUserTable.vue b/src/views/system/ugroup/components/GroupUserTable.vue
new file mode 100644
index 0000000..a37a5e9
--- /dev/null
+++ b/src/views/system/ugroup/components/GroupUserTable.vue
@@ -0,0 +1,176 @@
+<template>
+  <BasicDrawer @register="registerBaseDrawer" title="用户组用户" width="800" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button type="primary" @click="handleSelect"> 添加用户</a-button>
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="bx:bx-unlink"></Icon>
+                取消关联
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+    <!--用户操作抽屉-->
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!--用户选择弹窗-->
+    <UseSelectModal @register="registerModal" @select="selectOk" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useModal } from '/@/components/Modal';
+  import UserDrawer from '../../user/UserDrawer.vue';
+  import UseSelectModal from '@/views/system/role/components/UseSelectModal.vue';
+  import { userList, deleteUserGroup, batchDeleteUserGroup, addUserGroup } from '../ugroup.api';
+  import { userColumns, searchUserFormSchema } from '../ugroup.data';
+
+  const emit = defineEmits(['register', 'hideUserList']);
+  const props = defineProps({
+    disableUserEdit: { type: Boolean, default: false },
+  });
+
+  const checkedKeys = ref<Array<string | number>>([]);
+  const groupId = ref('');
+  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    groupId.value = data.id;
+    setProps({ searchInfo: { groupId: data.id } });
+    reload();
+  });
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //注册drawer
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload, updateTableDataRecord, setProps }] = useTable({
+    title: '用户列表',
+    api: userList,
+    columns: userColumns,
+    formConfig: {
+      // 代码逻辑说明: 【QQYUN-5685】3、租户角色下,查询居左显示
+      labelWidth: 60,
+      schemas: searchUserFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    // 【issues/1064】列设置的 cacheKey
+    tableSetting: { fullScreen: true, cacheKey: 'group_user_table' },
+    canResize: false,
+    rowKey: 'id',
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
+    checkedKeys.value = selectedRowKeys;
+  }
+
+  /**
+   * 编辑
+   */
+  async function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteUserGroup({ userId: record.id, groupId: groupId.value }, reload);
+  }
+
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    await batchDeleteUserGroup({ userIds: checkedKeys.value.join(','), groupId: groupId.value }, () => {
+      // 代码逻辑说明: 【TV360X-1655】批量取消关联之后清空选中记录
+      reload();
+      checkedKeys.value = [];
+    });
+  }
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess({ isUpdate, values }) {
+    isUpdate ? updateTableDataRecord(values.id, values) : reload();
+  }
+  /**
+   * 选择已有用户
+   */
+  function handleSelect() {
+    openModal(true);
+  }
+  /**
+   * 添加已有用户
+   */
+  async function selectOk(val) {
+    await addUserGroup({ groupId: groupId.value, userIdList: val }, reload);
+  }
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => !props.disableUserEdit,
+      },
+      {
+        label: '取消关联',
+        popConfirm: {
+          title: '是否确认取消关联',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped>
+  /*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+  :deep(.ant-form-item-control-input-content) {
+    text-align: left;
+  }
+  /*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
+</style>
diff --git a/src/views/system/ugroup/components/SysUgroupModal.vue b/src/views/system/ugroup/components/SysUgroupModal.vue
new file mode 100644
index 0000000..2daa432
--- /dev/null
+++ b/src/views/system/ugroup/components/SysUgroupModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :maxHeight="500" :width="800" @ok="handleSubmit">
+    <BasicForm @register="registerForm" name="SysUgroupForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from '../ugroup.data';
+  import { saveOrUpdate } from '../ugroup.api';
+  // Emits声明
+  const emit = defineEmits(['register', 'success']);
+  const isUpdate = ref(true);
+  const isDetail = ref(false);
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, scrollToField }] = useForm({
+    labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 },
+    baseRowStyle: { padding: '0 20px' },
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.showFooter;
+    if (unref(isUpdate)) {
+      //表单赋值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+    // 隐藏底部时禁用整个表单
+    setProps({ disabled: !data?.showFooter });
+  });
+  //设置标题
+  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await saveOrUpdate(values, isUpdate.value);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } catch ({ errorFields }) {
+      if (errorFields) {
+        const firstField = errorFields[0];
+        if (firstField) {
+          scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+        }
+      }
+      return Promise.reject(errorFields);
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /** 时间和数字输入框样式 */
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+
+  :deep(.ant-calendar-picker) {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/system/ugroup/ugroup.api.ts b/src/views/system/ugroup/ugroup.api.ts
new file mode 100644
index 0000000..2c2b85b
--- /dev/null
+++ b/src/views/system/ugroup/ugroup.api.ts
@@ -0,0 +1,107 @@
+import {defHttp} from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+import { Modal } from 'ant-design-vue';
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/sys/ugroup/list',
+  save='/sys/ugroup/add',
+  edit='/sys/ugroup/edit',
+  deleteOne = '/sys/ugroup/delete',
+  deleteBatch = '/sys/ugroup/deleteBatch',
+  importExcel = '/sys/ugroup/importExcel',
+  exportXls = '/sys/ugroup/exportXls',
+
+  userList = '/sys/user/groupUserList',
+  deleteUserGroup = '/sys/user/deleteGroupUser',
+  batchDeleteUserGroup = '/sys/user/deleteUserGroupBatch',
+  addUserGroup = '/sys/user/addSysUserGroup',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) =>
+  defHttp.get({url: Api.list, params});
+
+/**
+ * 删除单个
+ */
+export const deleteOne = (params,handleSuccess) => {
+  return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+}
+/**
+ * 批量删除
+ * @param params
+ */
+export const batchDelete = (params, handleSuccess) => {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => {
+        handleSuccess();
+      });
+    }
+  });
+}
+/**
+ * 保存或者更新
+ * @param params
+ */
+export const saveOrUpdate = (params, isUpdate,showTip = true) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({url: url, params},{successMessageMode:showTip?'success':'none'});
+}
+/**
+ * 角色列表接口
+ * @param params
+ */
+export const userList = (params) => defHttp.get({ url: Api.userList, params });
+/**
+ * 删除角色用户
+ */
+export const deleteUserGroup = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteUserGroup, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除角色用户
+ * @param params
+ */
+export const batchDeleteUserGroup = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.batchDeleteUserGroup, params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 添加已有用户
+ */
+export const addUserGroup = (params, handleSuccess) => {
+  return defHttp.post({ url: Api.addUserGroup, params }).then(() => {
+    handleSuccess();
+  });
+};
diff --git a/src/views/system/ugroup/ugroup.data.ts b/src/views/system/ugroup/ugroup.data.ts
new file mode 100644
index 0000000..decfb7f
--- /dev/null
+++ b/src/views/system/ugroup/ugroup.data.ts
@@ -0,0 +1,93 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+// 名称最大长度
+export const NAME_MAX_LENGTH = 40;
+
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '用户组名称',
+    align: 'center',
+    dataIndex: 'groupName',
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'createTime',
+  },
+];
+//查询数据
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '用户组名称',
+    field: 'groupName',
+    component: 'JInput',
+  },
+];
+
+//表单数据
+export const formSchema: FormSchema[] = [
+  {
+    label: '用户组名称',
+    field: 'groupName',
+    component: 'Input',
+    dynamicRules() {
+      return [
+        {required: true, message: '请输入用户组名称'},
+        {
+          max: NAME_MAX_LENGTH,
+          message: `名称长度不能超过${NAME_MAX_LENGTH}个字符`,
+        },
+      ];
+    }
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+];
+
+/**
+ * 角色用户搜索form
+ */
+export const searchUserFormSchema: FormSchema[] = [
+  {
+    field: 'username',
+    label: '用户账号',
+    component: 'Input',
+    colProps: { span: 8 },
+    labelWidth: 74,
+  },
+  {
+    field: 'realname',
+    label: '用户名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    labelWidth: 74,
+  },
+];
+/**
+ * 角色用户Columns
+ */
+export const userColumns = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status_dictText',
+    width: 80,
+  },
+];
diff --git a/src/views/system/user/PasswordModal.vue b/src/views/system/user/PasswordModal.vue
new file mode 100644
index 0000000..d638c86
--- /dev/null
+++ b/src/views/system/user/PasswordModal.vue
@@ -0,0 +1,42 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="修改密码" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" name="PassWordModal" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formPasswordSchema } from './user.data';
+  import { changePassword } from './user.api';
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: formPasswordSchema,
+    showActionButtonGroup: false,
+  });
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    //重置表单
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    //表单赋值
+    await setFieldsValue({ ...data });
+  });
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      await changePassword(values);
+      //关闭弹窗
+      closeModal();
+      //刷新列表
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/system/user/UserDrawer.vue b/src/views/system/user/UserDrawer.vue
new file mode 100644
index 0000000..697df06
--- /dev/null
+++ b/src/views/system/user/UserDrawer.vue
@@ -0,0 +1,195 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="getTitle"
+    :width="adaptiveWidth"
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+    destroyOnClose
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './user.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { saveOrUpdateUser, getUserRoles, getUserDepartList, getAllRolesListNoByTenant, getAllRolesList } from './user.api';
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+  import { getTenantId } from "/@/utils/auth";
+
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const attrs = useAttrs();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const departOptions = ref([]);
+  let isFormDepartUser = false;
+  //表单配置
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+    labelWidth: 90,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  // TODO [VUEN-527] https://www.teambition.com/task/6239beb894b358003fe93626
+  const showFooter = ref(true);
+  //表单赋值
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    showFooter.value = data?.showFooter ?? true;
+    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      rowId.value = data.record.id;
+      //租户信息定义成数组
+   /*   if (data.record.relTenantIds && !Array.isArray(data.record.relTenantIds)) {
+        data.record.relTenantIds = data.record.relTenantIds.split(',');
+      } else {
+        //【issues/I56C5I】用户管理中连续点两次编辑租户配置就丢失了
+        //data.record.relTenantIds = [];
+      }*/
+
+      //查角色/赋值/try catch 处理，不然编辑有问题
+      try {
+        const userRoles = await getUserRoles({ userid: data.record.id });
+        if (userRoles && userRoles.length > 0) {
+          data.record.selectedroles = userRoles;
+        }
+      } catch (error) {}
+
+      //查所属部门/赋值
+      const userDepart = await getUserDepartList({ userId: data.record.id });
+      if (userDepart && userDepart.length > 0) {
+        data.record.selecteddeparts = userDepart;
+        let selectDepartKeys = Array.from(userDepart, ({ key }) => key);
+        data.record.selecteddeparts = selectDepartKeys.join(',');
+        departOptions.value = userDepart.map((item) => {
+          return { label: item.title, value: item.key };
+        });
+      }
+      //负责部门/赋值
+      data.record.departIds && !Array.isArray(data.record.departIds) && (data.record.departIds = data.record.departIds.split(','));
+      // 代码逻辑说明: [issues/772]避免空值显示异常------------
+      data.record.departIds =  (!data.record.departIds || data.record.departIds == '') ? [] : data.record.departIds;
+      data.record.sort = data.record.sort ? data.record.sort: 1000; 
+    }
+    //处理角色用户列表情况(和角色列表有关系)
+    data.selectedroles && (await setFieldsValue({ selectedroles: data.selectedroles }));
+    // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+    isFormDepartUser = data?.departDisabled === true ? true : false;
+    // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+    //编辑时隐藏密码/角色列表隐藏角色信息/我的部门时隐藏所属部门
+    updateSchema([
+      {
+        field: 'password',
+        // 【QQYUN-8324】
+        ifShow: !unref(isUpdate),
+      },
+      {
+        field: 'confirmPassword',
+        ifShow: !unref(isUpdate),
+      },
+      {
+        field: 'selectedroles',
+        show: !data.isRole,
+      },
+      {
+        field: 'departIds',
+        componentProps: { options: departOptions },
+      },
+      {
+        field: 'selecteddeparts',
+        show: !data?.departDisabled,
+      },
+      {
+        field: 'selectedroles',
+        show: !data?.departDisabled,
+        //判断是否为多租户模式
+        componentProps:{
+          api: data.tenantSaas?getAllRolesList:getAllRolesListNoByTenant
+        }
+      },
+      // 代码逻辑说明: 【issues/4935】租户用户编辑界面中租户下拉框未过滤，显示当前系统所有的租户------------
+      {
+        field: 'relTenantIds',
+        componentProps:{
+          disabled: !!data.tenantSaas,
+        },
+      },
+    ]);
+    // 代码逻辑说明: 【issues/4935】租户用户编辑界面中租户下拉框未过滤，显示当前系统所有的租户------------
+    if(!unref(isUpdate) && data.tenantSaas){
+      await setFieldsValue({ relTenantIds: getTenantId().toString() })
+    }
+    // 无论新增还是编辑，都可以设置表单值
+    if (typeof data.record === 'object') {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+    // 隐藏底部时禁用整个表单
+    // 代码逻辑说明: VUEN-1117【issue】0523周开源问题
+    setProps({ disabled: !showFooter.value });
+    if(unref(isUpdate)){
+      updateSchema([
+        //修改主岗位和兼职岗位的参数
+        {
+          field: 'mainDepPostId',
+          componentProps: { params: { departIds: data.record.selecteddeparts, parentId: data.record.selecteddeparts } },
+        },
+        {
+          field: 'otherDepPostId',
+          componentProps: { params: { departIds: data.record.selecteddeparts, parentId: data.record.selecteddeparts } },
+        }
+      ]);
+    }
+    //部门管理，新增用户，在岗位下添加人员的时候默认当前岗位为主岗位
+    updateSchema([
+      {
+        field: 'mainDepPostId',
+        defaultValue: data?.mainDepPostId || '',
+      }
+    ])
+  });
+  //获取标题
+  const getTitle = computed(() => {
+    // 代码逻辑说明: 【QQYUN-8389】系统用户详情抽屉title更改
+    if (!unref(isUpdate)) {
+      return '新增用户';
+    } else {
+      return unref(showFooter) ? '编辑用户' : '用户详情';
+    }
+  });
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+
+  //提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      values.userIdentity === 1 && (values.departIds = '');
+      let isUpdateVal = unref(isUpdate);
+      // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+      let params = values;
+      if (isFormDepartUser) {
+        params = { ...params, updateFromPage: 'deptUsers' };
+      }
+      // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+      //提交表单
+      await saveOrUpdateUser(params, isUpdateVal);
+      //关闭弹窗
+      closeDrawer();
+      //刷新列表
+      emit('success',{isUpdateVal ,values});
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style scoped lang="less">
+  :deep(.ant-input-number){
+    width: 100%;
+  }
+</style>
diff --git a/src/views/system/user/UserQuitModal.vue b/src/views/system/user/UserQuitModal.vue
new file mode 100644
index 0000000..7822269
--- /dev/null
+++ b/src/views/system/user/UserQuitModal.vue
@@ -0,0 +1,110 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="离职人员信息" :showOkBtn="false" width="1000px" destroyOnClose>
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleRevert">
+                <Icon icon="ant-design:redo-outlined"></Icon>
+                批量取消
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup name="user-quit-modal">
+  import { ref, toRaw, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { recycleColumns } from './user.data';
+  import { getQuitList, putCancelQuit, deleteRecycleBin } from './user.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { Modal } from 'ant-design-vue';
+  import { defHttp } from '/@/utils/http/axios';
+
+  const { createConfirm } = useMessage();
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal] = useModalInner(() => {
+    checkedKeys.value = [];
+  });
+  //注册table数据
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      api: getQuitList,
+      columns: recycleColumns,
+      rowKey: 'id',
+      canResize: false,
+      useSearchForm: false,
+      actionColumn: {
+        width: 120,
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+
+  /**
+   * 取消离职事件
+   * @param record
+   */
+  async function handleCancelQuit(record) {
+    await putCancelQuit({ userIds: record.id, usernames: record.username }, reload);
+    emit('success');
+  }
+  /**
+   * 批量取消离职事件
+   */
+  function batchHandleRevert() {
+    Modal.confirm({
+      title: '取消离职',
+      content: '取消离职交接人也会清空',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        let rowValue = selectedRows.value;
+        let rowData: any = [];
+        for (const value of rowValue) {
+          rowData.push(value.username);
+        }
+        handleCancelQuit({ id: toRaw(unref(selectedRowKeys)).join(','), username: rowData.join(',') });
+      },
+    });
+  }
+
+  //获取操作栏事件
+  function getTableAction(record) {
+    return [
+      {
+        label: '取消离职',
+        icon: 'ant-design:redo-outlined',
+        popConfirm: {
+          title: '是否取消离职,取消离职交接人也会清空',
+          confirm: handleCancelQuit.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
+
+<style scoped lang="less">
+:deep(.ant-popover-inner-content){
+  width: 185px !important;
+}
+</style>
diff --git a/src/views/system/user/UserRecycleBinModal.vue b/src/views/system/user/UserRecycleBinModal.vue
new file mode 100644
index 0000000..31a0f30
--- /dev/null
+++ b/src/views/system/user/UserRecycleBinModal.vue
@@ -0,0 +1,165 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="用户回收站" :showOkBtn="false" width="1000px" destroyOnClose @fullScreen="handleFullScreen">
+    <BasicTable @register="registerTable" :rowSelection="rowSelection" :scroll="scroll">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-dropdown v-if="checkedKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                批量删除
+              </a-menu-item>
+              <a-menu-item key="1" @click="batchHandleRevert">
+                <Icon icon="ant-design:redo-outlined"></Icon>
+                批量还原
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="ant-design:down-outlined"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="getTableAction(record)" />
+        </template>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, toRaw, unref, watch } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { recycleColumns } from './user.data';
+  import { getRecycleBinList, putRecycleBin, deleteRecycleBin } from './user.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const { createConfirm } = useMessage();
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const checkedKeys = ref<Array<string | number>>([]);
+  const [registerModal] = useModalInner(() => {
+    checkedKeys.value = [];
+  });
+  const scroll = ref({ y: 0 });
+  //注册table数据
+  const [registerTable, { reload }] = useTable({
+    api: getRecycleBinList,
+    columns: recycleColumns,
+    rowKey: 'id',
+    striped: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    clickToRowSelect: false,
+    bordered: true,
+    showIndexColumn: false,
+    pagination: true,
+    tableSetting: { fullScreen: true },
+    canResize: false,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+  // 代码逻辑说明: 【TV360X-1657】系统用户回收站弹窗分页展示在可视区内
+  const handleFullScreen = (maximize) => {
+    setTableHeight(maximize);
+  };
+  const setTableHeight = (maximize) => {
+    const clientHeight = document.documentElement.clientHeight;
+    scroll.value = {
+      y: clientHeight - (maximize ? 300 : 500),
+    };
+  };
+  setTableHeight(false);
+  watch(
+    checkedKeys,
+    (newValue, oldValue) => {
+      if (checkedKeys.value.length && oldValue.length == 0) {
+        scroll.value = {
+          y: scroll.value.y - 50,
+        };
+      } else if (checkedKeys.value.length == 0 && oldValue.length) {
+        scroll.value = {
+          y: scroll.value.y + 50,
+        };
+      }
+    },
+    { deep: true }
+  );
+  /**
+   * 选择列配置
+   */
+  const rowSelection = {
+    type: 'checkbox',
+    columnWidth: 50,
+    selectedRowKeys: checkedKeys,
+    onChange: onSelectChange,
+  };
+  /**
+   * 选择事件
+   */
+  function onSelectChange(selectedRowKeys: (string | number)[]) {
+    checkedKeys.value = selectedRowKeys;
+  }
+  /**
+   * 还原事件
+   */
+  async function handleRevert(record) {
+    await putRecycleBin({ userIds: record.id }, reload);
+    emit('success');
+  }
+  /**
+   * 批量还原事件
+   */
+  function batchHandleRevert() {
+    handleRevert({ id: toRaw(unref(checkedKeys)).join(',') });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await deleteRecycleBin({ userIds: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  function batchHandleDelete() {
+    createConfirm({
+      iconType: 'warning',
+      title: '删除',
+      content: '确定要永久删除吗？删除后将不可恢复！',
+      onOk: () => handleDelete({ id: toRaw(unref(checkedKeys)).join(',') }),
+      onCancel() {},
+    });
+  }
+  //获取操作栏事件
+  function getTableAction(record) {
+    return [
+      {
+        label: '取回',
+        icon: 'ant-design:redo-outlined',
+        popConfirm: {
+          title: '是否确认还原',
+          confirm: handleRevert.bind(null, record),
+        },
+      },
+      {
+        label: '彻底删除',
+        icon: 'ant-design:scissor-outlined',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+    ];
+  }
+</script>
diff --git a/src/views/system/user/components/ImportExcelProgress.vue b/src/views/system/user/components/ImportExcelProgress.vue
new file mode 100644
index 0000000..e0b8950
--- /dev/null
+++ b/src/views/system/user/components/ImportExcelProgress.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <a-upload
+      :headers="headers"
+      :action="uploadAction"
+      :showUploadList="false"
+      :multiple="false"
+      :maxCount="1"
+      :data="uploadData"
+      accept=".xls,.xlsx"
+      @change="onFileChange"
+      :beforeUpload="beforeUpload"
+      ref="uploadRef"
+      style="width: 100%"
+    >
+      <a-button type="primary" preIcon="ant-design:import-outlined" v-if="percent === 0 || percent === 100">{{ btnText }}</a-button>
+      <a-button @click.prevent.stop="progressOpen = true" type="primary" v-else>
+        <LoadingOutlined />
+        导入中
+      </a-button>
+    </a-upload>
+    <a-modal v-model:open="progressOpen" title="文件上传" :body-style="{ padding: '20px' }" :destroyOnClose="true" :footer="null">
+      <div>
+        <div style="display: flex">
+          <div class="label">当前上传文件：</div>
+          <div class="file-name">{{ fileName }}</div>
+        </div>
+        <div style="margin-top: 10px; display: flex">
+          <div class="label">当前文件上传进度:</div>
+          <a-progress :percent="percent" style="width: 300px; margin-left: 10px" :format="(percent) => `${percent}%`"></a-progress>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onUnmounted, ref, computed, watch } from 'vue';
+  import { getTenantId, getToken } from '@/utils/auth';
+  import { randomString } from '@/utils/common/compUtils';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { defHttp } from '@/utils/http/axios';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'ImportExcelProgress',
+    components: { LoadingOutlined },
+    props: {
+      //上传路径
+      uploadUrl: {
+        type: String,
+        required: true,
+      },
+      //按钮文字
+      btnText: {
+        type: String,
+        default: '导入',
+      },
+      //上传类型
+      type: {
+        type: String,
+        default: 'user',
+      },
+    },
+    emit: ['success', 'register'],
+    setup(props, { emit }) {
+      const fileName = ref<string>('');
+      //上传数据
+      const uploadData = ref({});
+      //上传请求头
+      const headers = ref({});
+      const { createMessage, createWarningModal } = useMessage();
+      //文件上传定时任务
+      const fileUploadInterval = ref<any>();
+      const glob = useGlobSetting();
+      const progressOpen = ref(false);
+      //上传进度
+      const percent = ref<number>(0);
+      const uploadRef = ref();
+      //随机数
+      const uuid = ref();
+      const baseApiUrl = glob.domainUrl;
+      const uploadAction = computed(() => {
+        return baseApiUrl + props.uploadUrl;
+      });
+      //文件发生改变回调
+      function onFileChange(info) {
+        if (info.file.name) {
+          fileName.value = info.file.name;
+        }
+        if (info.file.status === 'done') {
+          if (info.file.response.success) {
+            if (info.file.response && info.file.response.code === 201) {
+              let {
+                message,
+                result: { msg, fileUrl, fileName },
+              } = info.file.response;
+              let href = glob.uploadUrl + fileUrl;
+              createWarningModal({
+                title: message,
+                centered: false,
+                content: `<div>
+                        <span>${msg}</span><br/> 
+                        <span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span> 
+                      </div>`,
+              });
+              percent.value = 100;
+              emit('success');
+            } else {
+              createMessage.success('文件导入成功!');
+              percent.value = 100;
+              emit('success');
+            }
+          } else {
+            createMessage.error(info.file.response.message || `${info.file.name} 导入失败.`);
+          }
+          clear();
+        } else if (info.file.status === 'error' || (info.file.response && info.file.response.code === 500)) {
+          clear();
+          createMessage.error(info.file.response?.message || `导入失败，可能原因文件超出上传大小，请查看控制台或服务端日志`);
+        }
+      }
+
+      /**
+       * 清除定时器
+       */
+      function clear() {
+        //查看状态 讲以导入的改成导入失败
+        clearInterval(fileUploadInterval.value);
+      }
+
+      /**
+       * 上传之前的回调
+       */
+      function beforeUpload() {
+        percent.value = 1;
+        headers.value = {
+          'X-Access-Token': getToken(),
+          'X-Tenant-Id': getTenantId() ? getTenantId() : '0',
+        };
+        uuid.value = randomString(16);
+        uploadData.value['fileKey'] = uuid.value;
+        progressOpen.value = true;
+        fileUploadInterval.value = setInterval(() => {
+          defHttp
+            .get({ url: '/sys/user/getUploadFileProgress', params: { fileKey: uuid.value, type: props.type } }, { isTransformResponse: false })
+            .then((res) => {
+              if (res.success) {
+                if (res.result) {
+                  percent.value = Math.round(res.result);
+                  if (res.result == 100) {
+                    clear();
+                  }
+                }
+              }
+            })
+            .catch(() => {
+              clear();
+            });
+        }, 2000);
+      }
+
+      onUnmounted(() => {
+        clear();
+      });
+
+      return {
+        fileName,
+        uploadData,
+        headers,
+        onFileChange,
+        beforeUpload,
+        progressOpen,
+        percent,
+        uploadAction,
+        uploadRef,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less">
+  .label {
+    font-size: 14px;
+    color: #666;
+  }
+  .file-name {
+    color: #151515;
+    font-size: 12px;
+    margin-top: 2px;
+  }
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000..d04d655
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,309 @@
+<template>
+  <div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" > 导出</a-button>
+<!--        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls" v-auth="'system:user:import'">导入</j-upload-button>-->
+        <import-excel-progress :upload-url="getImportUrl" @success="reload"></import-excel-progress>
+        <a-button type="primary" @click="openModal(true, {})" preIcon="ant-design:hdd-outlined"> 回收站</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+              <a-menu-item key="2" @click="batchFrozen(2)">
+                <Icon icon="ant-design:lock-outlined"></Icon>
+                冻结
+              </a-menu-item>
+              <a-menu-item key="3" @click="batchFrozen(1)">
+                <Icon icon="ant-design:unlock-outlined"></Icon>
+                解冻
+              </a-menu-item>
+              <a-menu-item v-if="hasPermission('system:user:resetPassword')" key="4" @click="batchResetPassword()">
+                <Icon icon="ant-design:reload-outlined"></Icon>
+                重置密码
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+          >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
+      </template>
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
+      </template>
+    </BasicTable>
+    <!--用户抽屉-->
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!--修改密码-->
+    <PasswordModal @register="registerPasswordModal" @success="reload" />
+    <!--回收站-->
+    <UserRecycleBinModal @register="registerModal" @success="reload" />
+    <!-- 离职人员列弹窗 -->
+    <UserQuitModal @register="registerQuitModal" @success="reload" />
+  </div>
+</template>
+
+<script lang="ts" name="system-user" setup>
+  //ts语法
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
+  import UserDrawer from './UserDrawer.vue';
+  import UserRecycleBinModal from './UserRecycleBinModal.vue';
+  import PasswordModal from './PasswordModal.vue';
+  import JThirdAppButton from '/@/components/jeecg/thirdApp/JThirdAppButton.vue';
+  import UserQuitModal from './UserQuitModal.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { columns, searchFormSchema } from './user.data';
+  import { listNoCareTenant, deleteUser, batchDeleteUser, getImportUrl, getExportUrl, frozenBatch, resetPassword } from './user.api';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import ImportExcelProgress from './components/ImportExcelProgress.vue';
+
+  const { createMessage, createConfirm } = useMessage();
+  const { isDisabledAuth, hasPermission } = usePermission();
+  
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //回收站model
+  const [registerModal, { openModal }] = useModal();
+  //密码model
+  const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
+  //代理人model
+  const [registerAgentModal, { openModal: openAgentModal }] = useModal();
+  //离职代理人model
+  const [registerQuitAgentModal, { openModal: openQuitAgentModal }] = useModal();
+  //离职用户列表model
+  const [registerQuitModal, { openModal: openQuitModal }] = useModal();
+
+  // 列表页面公共参数、方法
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    designScope: 'user-list',
+    tableProps: {
+      title: '用户列表',
+      api: listNoCareTenant,
+      columns: columns,
+      canResize: true,
+      size: 'small',
+      formConfig: {
+        // labelWidth: 200,
+        schemas: searchFormSchema,
+      },
+      actionColumn: {
+        width: 120,
+      },
+      beforeFetch: (params) => {
+        return Object.assign({ column: 'createTime', order: 'desc' }, params);
+      },
+      defSort: {
+        column: "",
+        order: ""
+      },
+    },
+    exportConfig: {
+      name: '用户列表',
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+    },
+  });
+
+  //注册table数据
+  const [registerTable, { reload, updateTableDataRecord, clearSelectedRowKeys }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;
+
+  /**
+   * 新增事件
+   */
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+  /**
+   * 编辑事件
+   */
+  async function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+  /**
+   * 详情
+   */
+  async function handleDetail(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+      tenantSaas: false,
+    });
+  }
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    if ('admin' == record.username) {
+      createMessage.warning('管理员账号不允许此操作！');
+      return;
+    }
+    await deleteUser({ id: record.id }, reload);
+  }
+  /**
+   * 批量删除事件
+   */
+  async function batchHandleDelete() {
+    let hasAdmin = unref(selectedRows).filter((item) => item.username == 'admin');
+    if (unref(hasAdmin).length > 0) {
+      createMessage.warning('管理员账号不允许此操作！');
+      return;
+    }
+    await batchDeleteUser({ ids: selectedRowKeys.value }, () => {
+      selectedRowKeys.value = [];
+      reload();
+    });
+  }
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+  }
+
+  /**
+   * 打开修改密码弹窗
+   */
+  function handleChangePassword(username) {
+    openPasswordModal(true, { username });
+  }
+  /**
+   * 冻结解冻
+   */
+  async function handleFrozen(record, status) {
+    if ('admin' == record.username) {
+      createMessage.warning('管理员账号不允许此操作！');
+      return;
+    }
+    await frozenBatch({ ids: record.id, status: status }, reload);
+  }
+  /**
+   * 批量冻结解冻
+   */
+  function batchFrozen(status) {
+    let hasAdmin = selectedRows.value.filter((item) => item.username == 'admin');
+    if (unref(hasAdmin).length > 0) {
+      createMessage.warning('管理员账号不允许此操作！');
+      return;
+    }
+    createConfirm({
+      iconType: 'warning',
+      title: '确认操作',
+      content: '是否' + (status == 1 ? '解冻' : '冻结') + '选中账号?',
+      onOk: async () => {
+        await frozenBatch({ ids: unref(selectedRowKeys).join(','), status: status }, reload);
+      },
+    });
+  }
+  /**
+   * 批量重置密码
+   */
+  function batchResetPassword() {
+    let hasAdmin = selectedRows.value.filter((item) => item.username == 'admin');
+    if (unref(hasAdmin).length > 0) {
+      createMessage.warning('所选用户中包含管理员，管理员账号不允许重置密码！！');
+      return;
+    }
+    if (selectedRows.value.length > 0) {
+      createConfirm({
+        iconType: 'warning',
+        title: '确认操作',
+        content: '是否重置选中的账号密码?',
+        onOk: async () => {
+          const usernames = selectedRows.value.map((item) => item.username).join(',');
+          await resetPassword({ usernames: usernames }, ()=>{reload();clearSelectedRowKeys();});
+        },
+      });
+    }
+  }
+
+
+  /**
+   *同步钉钉和微信回调
+   */
+  function onSyncFinally({ isToLocal }) {
+    // 同步到本地时刷新下数据
+    if (isToLocal) {
+      reload();
+    }
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        // ifShow: () => hasPermission('system:user:edit'),
+      },
+    ];
+  }
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record): ActionItem[] {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '密码',
+        //auth: 'user:changepwd',
+        onClick: handleChangePassword.bind(null, record.username),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        },
+      },
+      {
+        label: '冻结',
+        ifShow: record.status == 1,
+        popConfirm: {
+          title: '确定冻结吗?',
+          confirm: handleFrozen.bind(null, record, 2),
+        },
+      },
+      {
+        label: '解冻',
+        ifShow: record.status == 2,
+        popConfirm: {
+          title: '确定解冻吗?',
+          confirm: handleFrozen.bind(null, record, 1),
+        },
+      },
+    ];
+  }
+
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/user/user.api.ts b/src/views/system/user/user.api.ts
new file mode 100644
index 0000000..f12d975
--- /dev/null
+++ b/src/views/system/user/user.api.ts
@@ -0,0 +1,249 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+import { isObject } from '/@/utils/is';
+enum Api {
+  listNoCareTenant = '/sys/user/listAll',
+  list = '/sys/user/list',
+  save = '/sys/user/add',
+  edit = '/sys/user/edit',
+  getUserRole = '/sys/user/queryUserRole',
+  duplicateCheck = '/sys/duplicate/check',
+  deleteUser = '/sys/user/delete',
+  deleteBatch = '/sys/user/deleteBatch',
+  importExcel = '/sys/user/importExcel',
+  exportXls = '/sys/user/exportXls',
+  recycleBinList = '/sys/user/recycleBin',
+  putRecycleBin = '/sys/user/putRecycleBin',
+  deleteRecycleBin = '/sys/user/deleteRecycleBin',
+  allRolesList = '/sys/role/queryall',
+  allRolesListNoByTenant = '/sys/role/queryallNoByTenant',
+  allTenantList = '/sys/tenant/queryList',
+  allPostList = '/sys/position/list',
+  userDepartList = '/sys/user/userDepartList',
+  changePassword = '/sys/user/changePassword',
+  frozenBatch = '/sys/user/frozenBatch',
+  getUserAgent = '/sys/sysUserAgent/queryByUserName',
+  userQuitAgent = '/sys/user/userQuitAgent',
+  getQuitList = '/sys/user/getQuitList',
+  putCancelQuit = '/sys/user/putCancelQuit',
+  resetPassword = '/sys/user/resetPassword',
+  updateUserTenantStatus='/sys/tenant/updateUserTenantStatus',
+  getUserTenantPageList='/sys/tenant/getUserTenantPageList',
+  getDepPostIdByDepId = '/sys/sysDepart/getDepPostIdByDepId',
+}
+/**
+ * 导出api
+ * @param params
+ */
+export const getExportUrl = Api.exportXls;
+/**
+ * 导入api
+ */
+export const getImportUrl = Api.importExcel;
+/**
+ * 列表接口(查询用户，通过租户隔离)
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
+
+/**
+ * 列表接口(查询全部用户，不通过租户隔离)
+ * @param params
+ */
+export const listNoCareTenant = (params) => defHttp.get({ url: Api.listNoCareTenant, params });
+
+/**
+ * 用户角色接口
+ * @param params
+ */
+export const getUserRoles = (params) => defHttp.get({ url: Api.getUserRole, params }, { errorMessageMode: 'none' });
+
+/**
+ * 删除用户
+ */
+export const deleteUser = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteUser, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 批量删除用户
+ * @param params
+ */
+export const batchDeleteUser = (params, handleSuccess) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '是否删除选中数据',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
+        handleSuccess();
+      });
+    },
+  });
+};
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const saveOrUpdateUser = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.save;
+  return defHttp.post({ url: url, params });
+};
+/**
+ * 唯一校验
+ * @param params
+ */
+export const duplicateCheck = (params) => defHttp.get({ url: Api.duplicateCheck, params }, { isTransformResponse: false });
+
+/**
+ * 20231215
+ * liaozhiyang
+ * 唯一校验（ 延迟【防抖】）
+ * @param params
+ */
+const timer = {};
+export const duplicateCheckDelay = (params) => {
+  return new Promise((resove, rejected) => {
+    // -update-begin--author:liaozhiyang---date:20240619---for：【TV360X-1380】表单中使用多个duplicateCheckDelay，validate方法调用时会导致promise被挂起保存不了
+    let key;
+    if (isObject(params)) {
+      key = `${params.tableName}_${params.fieldName}`;
+    } else {
+      key = params;
+    }
+    clearTimeout(timer[key]);
+    // -update-end--author:liaozhiyang---date:20240619---for：【TV360X-1380】表单中使用多个duplicateCheckDelay，validate方法调用时会导致promise被挂起保存不了
+    timer[key] = setTimeout(() => {
+      defHttp
+        .get({ url: Api.duplicateCheck, params }, { isTransformResponse: false })
+        .then((res: any) => {
+          resove(res as any);
+        })
+        .catch((error) => {
+          rejected(error);
+        });
+      delete timer[key];
+    }, 500);
+  });
+};
+/**
+ * 获取全部角色（租户隔离）
+ * @param params
+ */
+export const getAllRolesList = (params) => defHttp.get({ url: Api.allRolesList, params });
+/**
+ * 获取全部角色（不租户隔离）
+ * @param params
+ */
+export const getAllRolesListNoByTenant = (params) => defHttp.get({ url: Api.allRolesListNoByTenant, params });
+/**
+ * 获取全部租户
+ */
+export const getAllTenantList = (params) => defHttp.get({ url: Api.allTenantList, params });
+/**
+ * 获取指定用户负责部门
+ */
+export const getUserDepartList = (params) => defHttp.get({ url: Api.userDepartList, params }, { successMessageMode: 'none' });
+/**
+ * 获取全部职务
+ */
+export const getAllPostList = (params) => {
+  return new Promise((resolve) => {
+    defHttp.get({ url: Api.allPostList, params }).then((res) => {
+      resolve(res.records);
+    });
+  });
+};
+/**
+ * 回收站列表
+ * @param params
+ */
+export const getRecycleBinList = (params) => defHttp.get({ url: Api.recycleBinList, params });
+/**
+ * 回收站还原
+ * @param params
+ */
+export const putRecycleBin = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.putRecycleBin, params }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 回收站删除
+ * @param params
+ */
+export const deleteRecycleBin = (params, handleSuccess) => {
+  return defHttp.delete({ url: Api.deleteRecycleBin, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 修改密码
+ * @param params
+ */
+export const changePassword = (params) => {
+  return defHttp.put({ url: Api.changePassword, params });
+};
+/**
+ * 冻结解冻
+ * @param params
+ */
+export const frozenBatch = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.frozenBatch, params }).then(() => {
+    handleSuccess();
+  });
+};
+/**
+ * 重置密码
+ * @param params
+ */
+export const resetPassword = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.resetPassword, params },{joinParamsToUrl: true}).then(() => {
+    handleSuccess();
+  });
+};
+
+
+/**
+ * 用户离职列表
+ * @param params
+ */
+export const getQuitList = (params) => {
+  return defHttp.get({ url: Api.getQuitList, params });
+};
+
+/**
+ * 取消离职
+ * @param params
+ */
+export const putCancelQuit = (params, handleSuccess) => {
+  return defHttp.put({ url: Api.putCancelQuit, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};
+
+/**
+ * 待审批获取列表数据
+ */
+export const getUserTenantPageList = (params) => {
+  return defHttp.get({ url: Api.getUserTenantPageList, params });
+};
+
+/**
+ * 更新租户状态
+ * @param params
+ */
+export const updateUserTenantStatus = (params) => {
+  return defHttp.put({ url: Api.updateUserTenantStatus, params }, { joinParamsToUrl: true, isTransformResponse: false });
+};
+
+/**
+ * 根据部门id和已选中的部门岗位id获取部门下的岗位id
+ * 
+ * @param params
+ */
+export const getDepPostIdByDepId = (params) => {
+  return defHttp.get({ url: Api.getDepPostIdByDepId, params },{ isTransformResponse: false });
+};
diff --git a/src/views/system/user/user.data.ts b/src/views/system/user/user.data.ts
new file mode 100644
index 0000000..cfbdee9
--- /dev/null
+++ b/src/views/system/user/user.data.ts
@@ -0,0 +1,704 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { getAllRolesListNoByTenant, getDepPostIdByDepId } from './user.api';
+import { rules } from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+import { getDepartPathNameByOrgCode, getDepartName, getMultiDepartPathName, getDepartPathName } from '@/utils/common/compUtils';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+export const columns: BasicColumn[] = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+    width: 120,
+    resizable: true,
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+    width: 100,
+    resizable: true,
+  },
+/*  {
+    title: '头像',
+    dataIndex: 'avatar',
+    width: 120,
+    customRender: render.renderAvatar,
+  },*/
+  {
+    title: '性别',
+    dataIndex: 'sex',
+    width: 80,
+    resizable: true,
+    sorter: true,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'sex');
+    },
+  },
+/*  {
+    title: '生日',
+    dataIndex: 'birthday',
+    width: 100,
+  },*/
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+    width: 100,
+    resizable: true,
+    customRender:( { record, text })=>{
+      if(record.izHideContact && record.izHideContact === '1'){
+        return '/';
+      }
+      return text;
+    }
+  },
+  {
+    title: '部门',
+    width: 150,
+    resizable: true,
+    dataIndex: 'belongDepIds',
+    customRender:( { record, text })=>{
+      if(!text){
+        return '';
+      }
+      return getDepartName(getMultiDepartPathName(record.orgCodeTxt,text));
+    }
+  },
+  {
+    title: '负责部门',
+    width: 150,
+    resizable: true,
+    dataIndex: 'departIds',
+    customRender:( { record, text })=>{
+      if(!text){
+        return '';
+      }
+      return getDepartName(getMultiDepartPathName(record.departIds_dictText,text));
+    }
+  },
+  {
+    title: '主岗位',
+    width: 150,
+    resizable: true,
+    dataIndex: 'mainDepPostId',
+    customRender: ({ record, text })=>{
+      return getDepartName(getDepartPathName(record.mainDepPostId_dictText,text,false));
+    }
+  },
+  {
+    title: '兼职岗位',
+    width: 150,
+    resizable: true,
+    dataIndex: 'otherDepPostId',
+    customRender:({ record, text })=>{
+      if(!text){
+        return '';
+      }
+      return getDepartName(getMultiDepartPathName(record.otherDepPostId_dictText,text));
+    }
+  },
+  {
+    title: '状态',
+    dataIndex: 'status_dictText',
+    width: 80,
+    resizable: true,
+  },
+];
+
+export const recycleColumns: BasicColumn[] = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+    width: 100,
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+    width: 100,
+  },
+  {
+    title: '头像',
+    dataIndex: 'avatar',
+    width: 80,
+    customRender: render.renderAvatar,
+  },
+  {
+    title: '性别',
+    dataIndex: 'sex',
+    width: 80,
+    sorter: true,
+    customRender: ({ text }) => {
+      return render.renderDict(text, 'sex');
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '账号',
+    field: 'username',
+    component: 'JInput',
+    //colProps: { span: 6 },
+  },
+  {
+    label: '名字',
+    field: 'realname',
+    component: 'JInput',
+   //colProps: { span: 6 },
+  },
+  {
+    label: '性别',
+    field: 'sex',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'sex',
+      placeholder: '请选择性别',
+      stringToNumber: true,
+    },
+    //colProps: { span: 6 },
+  },
+  {
+    label: '手机号码',
+    field: 'phone',
+    component: 'Input',
+    //colProps: { span: 6 },
+  },
+  {
+    label: '用户状态',
+    field: 'status',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'user_status',
+      placeholder: '请选择状态',
+      stringToNumber: true,
+    },
+   //colProps: { span: 6 },
+  },
+  {
+    label: '所属部门',
+    field: 'departId',
+    component: 'JSelectDept',
+    componentProps: {
+      placeholder: '请选择所属部门',
+      showButton: false,
+      checkStrictly: true
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '用户账号',
+    field: 'username',
+    component: 'Input',
+    required: true,
+    dynamicDisabled: ({ values }) => {
+      return !!values.id;
+    },
+    dynamicRules: ({ model, schema }) => rules.duplicateCheckRule('sys_user', 'username', model, schema, true),
+  },
+  {
+    label: '登录密码',
+    field: 'password',
+    component: 'StrengthMeter',
+    componentProps:{
+      autocomplete: 'new-password',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入登录密码',
+      },
+      {
+        pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+        message: '密码由 8 位及以上数字、大小写字母和特殊符号组成！',
+      },
+    ],
+  },
+  {
+    label: '确认密码',
+    field: 'confirmPassword',
+    component: 'InputPassword',
+    dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+  },
+  {
+    label: '用户姓名',
+    field: 'realname',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '工号',
+    field: 'workNo',
+    required: false,
+    component: 'Input',
+    dynamicRules: ({ model, schema }) => rules.duplicateCheckRule('sys_user', 'work_no', model, schema, false),
+  },
+/*  {
+    label: '职务',
+    field: 'post',
+    required: false,
+    component: 'JSelectPosition',
+    componentProps: {
+      labelKey: 'name',
+    },
+  },*/
+  {
+    label: '职务',
+    field: 'positionType',
+    required: false,
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: "user_position",
+      mode: 'multiple',
+    },
+  },
+  {
+    label: '角色',
+    field: 'selectedroles',
+    component: 'ApiSelect',
+    componentProps: {
+      mode: 'multiple',
+      api: getAllRolesListNoByTenant,
+      labelField: 'roleName',
+      valueField: 'id',
+      immediate: false,
+    },
+  },
+  {
+    label: '所属部门',
+    field: 'selecteddeparts',
+    component: 'JSelectDept',
+    componentProps: ({ formActionType, formModel }) => {
+      return {
+        sync: false,
+        checkStrictly: true,
+        defaultExpandLevel: 2,
+
+        onSelect: (options, values) => {
+          const { updateSchema } = formActionType;
+          //所属部门修改后更新负责部门下拉框数据
+          updateSchema([
+            //修改主岗位和兼职岗位的参数
+            {
+              field: 'mainDepPostId',
+              componentProps: { params: { departIds: values?values.value.join(","): "" } },
+            },
+            {
+              field: 'otherDepPostId',
+              componentProps: { params: { departIds: values?values.value.join(","): "" } },
+            }
+          ]);
+          //更新负责部门的option
+          updateDepartOption(options, updateSchema);
+          if(!values){
+            formModel.departIds = [];
+            formModel.mainDepPostId = "";
+            formModel.otherDepPostId = "";
+            return;
+          }
+          //所属部门修改后更新负责部门数据
+          formModel.departIds && (formModel.departIds = formModel.departIds.filter((item) => values.value.indexOf(item) > -1));
+        },
+        onChange: async (values) => {
+          // 当所属部门发生改变时，需要取消主岗位和兼职岗位的选中值
+          await removeDepPostByDepId(formModel, values, formActionType);
+        }
+      };
+    },
+  },
+  {
+    label: '主岗位',
+    field: 'mainDepPostId',
+    component: 'JSelectDepartPost',
+    componentProps: {
+      rowKey: 'id',
+      multiple: false,
+      izShowDepPath: true,
+    },
+    ifShow:  ({ values }) => {
+      if(!values.selecteddeparts){
+        return false;
+      }
+      return !(values.selecteddeparts instanceof Array && values.selecteddeparts.length == 0);
+    },
+  },
+  {
+    label: '兼职岗位',
+    field: 'otherDepPostId',
+    component: 'JSelectDepartPost',
+    componentProps: {
+      rowKey: 'id',
+      izShowDepPath: true,
+    },
+    ifShow:  ({ values }) => {
+      if(!values.selecteddeparts){
+        return false;
+      }
+      return !(values.selecteddeparts instanceof Array && values.selecteddeparts.length == 0);
+    },
+  },
+  {
+    label: '租户',
+    field: 'relTenantIds',
+    component: 'JSearchSelect',
+    componentProps: {
+      dict:"sys_tenant,name,id",
+      async: true,
+      multiple: true
+    },
+  },
+  {
+    label: '身份',
+    field: 'userIdentity',
+    component: 'RadioGroup',
+    defaultValue: 1,
+    componentProps: ({ formModel }) => {
+      return {
+        options: [
+          { label: '普通用户', value: 1, key: '1' },
+          { label: '上级', value: 2, key: '2' },
+        ],
+        onChange: () => {
+          formModel.userIdentity == 1 && (formModel.departIds = []);
+        },
+      };
+    },
+  },
+  {
+    label: '负责部门',
+    field: 'departIds',
+    component: 'Select',
+    componentProps: {
+      mode: 'multiple',
+      tagRender: ({ label, value, closable, onClose }) => {
+        // 计算显示文本：前面省略号 + 后面字符
+        let displayLabel = label;
+        if(displayLabel && label.length >= 20) {
+          displayLabel = "..." + displayLabel.substring(label.length - 20);
+        }
+        return h(Tag, {
+          style: {
+            position: 'relative',
+            boxSizing: 'border-box',
+            height: '24px',
+            marginTop: '2px',
+            fontSize: '14px',
+            marginBottom: '2px',
+            lineHeight: '22px',
+            background: 'rgba(51, 51, 51, 0.06)',
+            border: '1px solid rgba(5, 5, 5, 0.06)',
+            borderRadius: '4px',
+            cursor: 'default'
+          },
+          title: label,
+          closable,
+          onClose:(e)=>{
+            e.stopPropagation();
+            onClose();
+          }
+        }, () => displayLabel);
+      }
+    },
+    ifShow: ({ values }) => values.userIdentity == 2,
+  },
+  {
+    label: '排序',
+    field: 'sort',
+    component: 'InputNumber',
+    defaultValue: 1000,
+    componentProps: {
+      min: 1,
+      max: 999999,
+      step: 1,
+      precision: 0
+    }
+  },
+  {
+    label: '头像',
+    field: 'avatar',
+    component: 'JImageUpload',
+    componentProps: {
+      fileMax: 1,
+    },
+  },
+  {
+    label: '生日',
+    field: 'birthday',
+    component: 'DatePicker',
+  },
+  {
+    label: '性别',
+    field: 'sex',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'sex',
+      placeholder: '请选择性别',
+      stringToNumber: true,
+    },
+  },
+  {
+    label: '邮箱',
+    field: 'email',
+    component: 'Input',
+    required: false,
+    dynamicRules: ({ model, schema }) => {
+      return [
+        { ...rules.duplicateCheckRule('sys_user', 'email', model, schema, false)[0], trigger: 'blur' },
+        { ...rules.rule('email', false)[0], trigger: 'blur' },
+      ];
+    },
+  },
+  {
+    label: '手机号码',
+    field: 'phone',
+    component: 'Input',
+    required: true,
+    dynamicRules: ({ model, schema }) => {
+      return [
+        { ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0], trigger: 'blur' },
+        { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' },
+      ];
+    },
+  },
+  {
+    label: '座机',
+    field: 'telephone',
+    component: 'Input',
+    rules: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }],
+  },
+  {
+    label: '工作流引擎',
+    field: 'activitiSync',
+    defaultValue: 1,
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'activiti_sync',
+      type: 'radio',
+      stringToNumber: true,
+    },
+  },
+  {
+    label: '隐藏联系方式',
+    field: 'izHideContact',
+    defaultValue: '0',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'yn',
+      type: 'radio',
+    },
+  },
+];
+
+export const formPasswordSchema: FormSchema[] = [
+  {
+    label: '用户账号',
+    field: 'username',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '登录密码',
+    field: 'password',
+    component: 'StrengthMeter',
+    componentProps: {
+      placeholder: '请输入登录密码',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入登录密码',
+      },
+      {
+        pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+        message: '密码由 8 位及以上数字、大小写字母和特殊符号组成！',
+      },
+    ],
+  },
+  {
+    label: '确认密码',
+    field: 'confirmPassword',
+    component: 'InputPassword',
+    dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+  },
+];
+
+
+//租户用户列表
+export const userTenantColumns: BasicColumn[] = [
+  {
+    title: '用户账号',
+    dataIndex: 'username',
+    width: 120,
+  },
+  {
+    title: '用户姓名',
+    dataIndex: 'realname',
+    width: 100,
+  },
+  {
+    title: '头像',
+    dataIndex: 'avatar',
+    width: 120,
+    customRender: render.renderAvatar,
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+    width: 100,
+  },
+  {
+    title: '部门',
+    width: 150,
+    dataIndex: 'orgCodeTxt',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({ text }) => {
+      if (text === '1') {
+        return '正常';
+      } else if (text === '3') {
+        return '审批中';
+      } else {
+        return '已拒绝';
+      }
+    },
+  },
+];
+
+//用户租户搜索表单
+export const userTenantFormSchema: FormSchema[] = [
+  {
+    label: '账号',
+    field: 'username',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    label: '名字',
+    field: 'realname',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    label: '性别',
+    field: 'sex',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'sex',
+      placeholder: '请选择性别',
+      stringToNumber: true,
+    },
+    colProps: { span: 6 },
+  },
+];
+
+
+/**
+ * 删除非当前部门下的数据
+ * 当所属部门发生改变时，取消主岗位和兼职岗位的选中值
+ * 
+ * @param formModel 表单模型
+ * @param values 选中的部门值
+ * @param formActionType 表单操作方法
+ */
+async function removeDepPostByDepId(formModel, values, formActionType) {
+  const { setFieldsValue } = formActionType;
+  if (values) {
+    let departIds = "";
+    if (values instanceof Array) {
+      departIds = values.join(",");
+    } else {
+      departIds = values;
+    }
+    if (departIds) {
+      try {
+        // 查询当前选中部门下的岗位ID
+        const { result } = await getDepPostIdByDepId({ depIds: departIds });
+        const validPostIds = result.split(",") || [];
+        
+        // 检查主岗位是否在当前部门下
+        if (formModel.mainDepPostId) {
+          const mainPostId = Array.isArray(formModel.mainDepPostId) 
+            ? formModel.mainDepPostId[0] 
+            : formModel.mainDepPostId;
+          
+          if (mainPostId && !validPostIds.includes(mainPostId)) {
+            // 主岗位不在当前部门下，清空主岗位
+            setFieldsValue({ mainDepPostId: null });
+            formModel.mainDepPostId = null;
+          }
+        }
+
+        // 检查兼职岗位是否在当前部门下
+        if(typeof formModel.otherDepPostId === "string"){
+          formModel.otherDepPostId = formModel.otherDepPostId.split(",");
+        }
+        if (formModel.otherDepPostId && Array.isArray(formModel.otherDepPostId)) {
+          const validOtherPosts = formModel.otherDepPostId.filter(postId => 
+            validPostIds.includes(postId)
+          );
+          // 有兼职岗位不在当前部门下，更新兼职岗位
+          setFieldsValue({ otherDepPostId: validOtherPosts });
+          formModel.otherDepPostId = validOtherPosts;
+        }
+      } catch (error) {
+        console.error('查询部门岗位失败:', error);
+        // 查询失败时，清空所有岗位选择
+        setFieldsValue({
+          mainDepPostId: null,
+          otherDepPostId: []
+        });
+        formModel.mainDepPostId = null;
+        formModel.otherDepPostId = [];
+      }
+    } else {
+      // 没有选中部门时，清空所有岗位选择
+      setFieldsValue({
+        mainDepPostId: null,
+        otherDepPostId: []
+      });
+      formModel.mainDepPostId = null;
+      formModel.otherDepPostId = [];
+    }
+  }
+}
+
+/**
+ * 更新负责部门的options
+ *
+ * @param options
+ * @param updateSchema
+ */
+async function updateDepartOption(options, updateSchema) {
+  if (options && options.length > 0) {
+    // 并行处理所有异步操作
+    const updatedOptions = await Promise.all(
+      options.map(async (item) => {
+        const departPathName = await getDepartPathNameByOrgCode('', item.label, item.value);
+        return { ...item, label: departPathName };
+      })
+    );
+    updateSchema([
+      {
+        field: 'departIds',
+        componentProps: { options: updatedOptions },
+      },
+    ]);
+  } else {
+    updateSchema([
+      {
+        field: 'departIds',
+        componentProps: { options: [] },
+      },
+    ]);
+  }
+}
diff --git a/src/views/system/user/userDetails.vue b/src/views/system/user/userDetails.vue
new file mode 100644
index 0000000..c0a8cd4
--- /dev/null
+++ b/src/views/system/user/userDetails.vue
@@ -0,0 +1,54 @@
+<template>
+  <Description @register="register" class="mt-4" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+  const mockData = {
+    username: 'test',
+    nickName: 'VB',
+    age: '123',
+    phone: '15695909xxx',
+    email: '190848757@qq.com',
+    addr: '厦门市思明区',
+    sex: '男',
+    certy: '3504256199xxxxxxxxx',
+    tag: 'orange',
+  };
+  const schema: DescItem[] = [
+    {
+      field: 'username',
+      label: '用户名',
+    },
+    {
+      field: 'nickName',
+      label: '昵称',
+      render: (curVal, data) => {
+        return `${data.username}-${curVal}`;
+      },
+    },
+    {
+      field: 'phone',
+      label: '联系电话',
+    },
+    {
+      field: 'email',
+      label: '邮箱',
+    },
+    {
+      field: 'addr',
+      label: '地址',
+    },
+  ];
+  export default defineComponent({
+    components: { Description },
+    setup() {
+      const [register] = useDescription({
+        title: 'useDescription',
+        data: mockData,
+        schema: schema,
+      });
+      return { mockData, schema, register };
+    },
+  });
+</script>
diff --git a/src/views/system/usersetting/AccountSetting.vue b/src/views/system/usersetting/AccountSetting.vue
new file mode 100644
index 0000000..5911bb8
--- /dev/null
+++ b/src/views/system/usersetting/AccountSetting.vue
@@ -0,0 +1,221 @@
+<template>
+  <div :class="[`${prefixCls}`]">
+    <div class="my-account">账户</div>
+    <div class="account-row-item clearfix">
+      <div class="account-label gray-75">手机</div>
+      <span class="gray" v-if="userDetail.phoneText">{{ userDetail.phoneText}}</span>
+      <span class="pointer blue-e5 phone-margin" @click="updatePhone" v-if="userDetail.phone">修改</span>
+      <span class="pointer blue-e5 phone-margin" @click="bindPhone" v-else>绑定</span>
+      <!--      <span class="pointer blue-e5" @click="unbindPhone" v-if="userDetail.phone">解绑?</span>-->
+      <!--      <span class="pointer blue-e5" @click="unbindPhone" v-else>绑定?</span>-->
+    </div>
+    <div class="account-row-item clearfix">
+      <div class="account-label gray-75">邮箱</div>
+      <span class="gray">{{ userDetail.email ? userDetail.email : '未填写' }}</span>
+      <span class="pointer blue-e5 phone-margin" @click="updateEmail">修改</span>
+      <!--      <span class="pointer blue-e5" @click="unbindEmail" v-if="userDetail.email">解绑?</span>-->
+      <!--      <span class="pointer blue-e5" @click="unbindEmail" v-else>绑定?</span>-->
+      <!--      <span class="pointer blue-e5" style="margin-left:5px" @click="checkEmail" v-if="userDetail.email">验证?</span>-->
+    </div>
+    <div class="account-row-item">
+      <div class="account-label gray-75">密码</div>
+      <Icon icon="ant-design:lock-outlined" style="color: #9e9e9e" />
+      <span class="pointer blue-e5" style="margin-left: 10px" @click="updatePassWord">修改</span>
+    </div>
+
+    <!--    <div class="account-row-item clearfix">-->
+    <!--      <div class="account-label gray-75">账户注销?</div>-->
+    <!--      <span style="color: red" class="pointer" @click="cancellation">注销?</span>-->
+    <!--    </div>-->
+  </div>
+
+  <UserReplacePhoneModal @register="registerModal" @success="initUserDetail" />
+  <UserReplaceEmailModal @register="registerEmailModal" @success="initUserDetail" />
+  <UserPasswordModal @register="registerPassModal" @success="initUserDetail" />
+  <UserPasswordNotBindPhone @register="registerPassNotBindPhoneModal" @success="initUserDetail" />
+  <UserCancellationModal @register="registerCancelModal" />
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, reactive } from 'vue';
+  import { CollapseContainer } from '/@/components/Container';
+  import { getUserData } from './UserSetting.api';
+  import { useUserStore } from '/@/store/modules/user';
+  import UserReplacePhoneModal from './commponents/UserPhoneModal.vue';
+  import UserReplaceEmailModal from './commponents/UserEmailModal.vue';
+  import UserPasswordModal from './commponents/UserPasswordModal.vue';
+  import UserPasswordNotBindPhone from './commponents/UserPasswordNotBindPhone.vue';
+  import UserCancellationModal from './commponents/UserCancellationModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { WechatFilled } from '@ant-design/icons-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const { prefixCls } = useDesign('j-user-account-setting-container');
+
+  const userDetail = ref<any>([]);
+  const userStore = useUserStore();
+  const [registerModal, { openModal }] = useModal();
+  const [registerEmailModal, { openModal: openEmailModal }] = useModal();
+  const [registerPassModal, { openModal: openPassModal }] = useModal();
+  const [registerPassNotBindPhoneModal, { openModal: openPassNotBindPhoneModal }] = useModal();
+  const [registerCancelModal, { openModal: openCancelModal }] = useModal();
+
+  const wechatData = reactive<any>({
+    bindWechat: false,
+    name: '昵称',
+  });
+
+  /**
+   * 初始化用户数据
+   */
+  function initUserDetail() {
+    //获取用户数据
+    getUserData().then((res) => {
+      if (res.success) {
+        userDetail.value = res.result;
+        if(res.result.phone){
+          userDetail.value.phoneText = res.result.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+        }
+      }
+    });
+  }
+
+  /**
+   * 修改手机号
+   */
+  function updatePhone() {
+    openModal(true, {
+      record: { phone: userDetail.value.phone, username: userDetail.value.username, id: userDetail.value.id, phoneText: userDetail.value.phoneText },
+    });
+  }
+  
+  /**
+   * 绑定手机号
+   */ 
+  function bindPhone() {
+    openModal(true, {
+      record: { username: userDetail.value.username, id: userDetail.value.id },
+    });
+  }
+
+  /**
+   * 修改邮箱
+   */
+  function updateEmail() {
+    openEmailModal(true, {
+      record: { email: userDetail.value.email, id: userDetail.value.id },
+    });
+  }
+
+  /**
+   * 密码修改
+   */
+  function updatePassWord() {
+    //存在手机号手机号修改密码
+    if(userDetail.value.phone){
+      openPassModal(true, {
+        record: { username: userDetail.value.username },
+      });
+    } else {
+      //没有手机号走直接修改密码弹窗
+      openPassNotBindPhoneModal(true, {
+        record: { username: userDetail.value.username },
+      });
+    }
+  }
+
+  /**
+   * 手机号解绑
+   */
+  function unbindPhone() {
+    console.log('手机号解绑');
+  }
+
+  /**
+   * 邮箱解绑
+   */
+  function unbindEmail() {
+    console.log('邮箱解绑');
+  }
+
+  /**
+   * 邮箱验证
+   */
+  function checkEmail() {
+    console.log('邮箱验证');
+  }
+
+  /**
+   * 微信绑定解绑事件
+   */
+  function wechatBind() {
+    console.log('微信绑定解绑事件');
+  }
+
+  /**
+   * 注销事件
+   */
+  function cancellation() {}
+
+  onMounted(() => {
+    initUserDetail();
+  });
+</script>
+<style lang="less">
+    // 代码逻辑说明: [issues/563]暗色主题部分失效
+  @prefix-cls: ~'@{namespace}-j-user-account-setting-container';
+
+  .@{prefix-cls}{
+     padding: 30px 40px 0 20px;
+    .account-row-item {
+      align-items: center;
+      /*begin 兼容暗夜模式*/
+      border-bottom: 1px solid @border-color-base;
+      /*end 兼容暗夜模式*/
+      box-sizing: border-box;
+      display: flex;
+      height: 71px;
+      position: relative;
+    }
+
+    .account-label {
+      text-align: left;
+      width: 160px;
+    }
+
+    .gray-75 {
+      /*begin 兼容暗夜模式*/
+      color: @text-color !important;
+      /*end 兼容暗夜模式*/
+    }
+
+    .pointer {
+      cursor: pointer;
+    }
+
+    .blue-e5 {
+      color: #1e88e5;
+    }
+
+    .phone-margin {
+      margin-left: 24px;
+      margin-right: 24px;
+    }
+
+    .clearfix:after {
+      clear: both;
+    }
+
+    .clearfix:before {
+      content: "";
+      display: table;
+    }
+    .my-account{
+      font-size: 17px;
+      font-weight: 700!important;
+      /*begin 兼容暗夜模式*/
+      color: @text-color;
+      /*end 兼容暗夜模式*/
+      margin-bottom: 20px;
+    }
+  }
+</style>
diff --git a/src/views/system/usersetting/BaseSetting.vue b/src/views/system/usersetting/BaseSetting.vue
new file mode 100644
index 0000000..2fa0132
--- /dev/null
+++ b/src/views/system/usersetting/BaseSetting.vue
@@ -0,0 +1,550 @@
+<template>
+  <div class="account-padding" :class="[`${prefixCls}`]">
+    <div class="user-setting-top">
+      <div class="account-avatar">
+        <CropperAvatar
+          :uploadApi="uploadImg"
+          :showBtn="false"
+          :value="avatar"
+          :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+          @change="updateAvatar"
+          width="80"
+        />
+        <div class="account-right border-bottom">
+          <div v-if="!isEdit">
+            <span class="font-size-17 account-name">{{ userInfo.realname }}</span>
+            <a-tooltip content="编辑姓名">
+              <Icon class="pointer font-size-17 gray-bd account-icon" icon="ant-design:edit-outlined"
+                    @click="editHandleClick" />
+            </a-tooltip>
+          </div>
+          <div v-else>
+            <a-input ref="accountNameEdit" :maxlength="100" v-model:value="userInfo.realname" @blur="editRealName" />
+          </div>
+          <div class="use-day">
+            使用：<span>{{userInfo.createTimeText}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="account-data border-bottom">
+      <!-- 详细资料 -->
+      <div class="account-detail">
+        <div class="font-size-15 font-bold font-color-gray" style="margin-bottom: 16px">详细资料</div>
+        <div class="margin-bottom-10 font-size-13">
+          <span class="gray-75 item-label">生日</span>
+          <span class="gray-3">{{ userInfo.birthday }}</span>
+        </div>
+        <div class="margin-bottom-10 font-size-13">
+          <span class="gray-75 item-label">性别</span>
+          <span class="gray-3">{{ userInfo.sexText }}</span>
+        </div>
+        <div class="margin-bottom-10 nowarp font-size-13">
+          <span class="gray-75 item-label">职位</span>
+          <span class="gray-3">{{ userInfo.postText ? userInfo.postText : "未填写" }}</span>
+        </div>
+        <div class="font-size-13">
+          <span class="item-label"></span>
+          <span class="item-label pointer" style="color:#1e88e5" @click="openEditModal">编辑</span>
+        </div>
+      </div>
+      <!-- 联系信息 -->
+      <div class="account-info">
+        <div class="font-size-15 font-bold font-color-gray" style="margin-bottom: 16px">联系信息</div>
+        <div class="margin-bottom-10 font-size-13">
+          <span class="gray-75 item-label">邮箱</span>
+          <span class="gray-3">{{ userInfo.email ? userInfo.email : "未填写" }}</span>
+        </div>
+        <div class="margin-bottom-10 font-size-13">
+          <span class="gray-75 item-label">手机</span>
+          <span class="gray-3">{{ userInfo.phone ? userInfo.phone : "未填写" }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="account-data">
+      <!-- 个性签名 -->
+      <div class="account-detail">
+        <div class="font-size-15 font-bold font-color-gray" style="margin-bottom: 16px">个性签名</div>
+        <div class="font-size-13 flex">
+          <span class="gray-75 item-label">签名</span>
+          <a-upload
+            accept="jpg,jpeg,png"  
+            :max-count="1"
+            :multiple="false"
+            name = "file"
+            :headers="uploadHeader"
+            :action="uploadUrl"
+            v-model:fileList="uploadFileList"
+            @beforeUpload="beforeUpload"
+            @change="handleChange"
+            list-type="picture-card"
+            @preview="handlePreview"
+          >
+            <div v-if="uploadVisible">
+              <UploadOutlined></UploadOutlined>
+              <div class="ant-upload-text">上传</div>
+            </div>
+          </a-upload>
+          <a-modal :width="500" :open="previewVisible" :footer="null" @cancel="handleCancel">
+            <img alt="example" style="width: 100%" :src="previewImage" />
+          </a-modal>
+        </div>
+        <div style="font-size: 12px;color:#93a6aa" class="margin-bottom-10">
+          <p>建议上传尺寸为200*80，大小不超过1M且格式为png或jpeg的图片</p>
+          <p>生成签名方法一：手写扫描进行上传。</p>
+          <p>生成签名方法二：使用在线转换，生成后进行上传。
+            <a href="http://www.diyiziti.com/qianming" target="_blank">http://www.diyiziti.com/qianming</a>
+          </p>
+        </div>
+        <div class="margin-bottom-10 font-size-13 flex" style="margin-top: 10px">
+          <span class="gray-75 item-label">开启状态</span>
+          <a-switch v-model:checked="userInfo.signEnable" :checkedValue="1" :unCheckedValue="0" @change="handleEnableSignChange"></a-switch>
+        </div>
+      </div>
+    </div>
+  </div>
+  <UserAccountModal @register="registerModal" @success="getUserDetail"></UserAccountModal>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { CollapseContainer } from '/@/components/Container';
+import { CropperAvatar } from '/@/components/Cropper';
+import { useMessage } from '/@/hooks/web/useMessage';
+import headerImg from '/@/assets/images/header.jpg';
+import { defHttp } from '/@/utils/http/axios';
+import { useUserStore } from '/@/store/modules/user';
+import { uploadImg } from '/@/api/sys/upload';
+import { getFileAccessHttpUrl, getRandom } from '/@/utils/common/compUtils';
+import dayjs from 'dayjs';
+import { ajaxGetDictItems, getDictItemsByCode, initDictOptions } from '/@/utils/dict';
+import { userEdit, getUserData, queryNameByCodes } from './UserSetting.api';
+import UserAccountModal from './commponents/UserAccountModal.vue';
+import { useModal } from '/@/components/Modal';
+import { cloneDeep } from 'lodash-es';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { getToken } from "@/utils/auth";
+import { uploadUrl } from "@/api/common/api";
+import { UploadOutlined } from "@ant-design/icons-vue";
+
+//TODO 当字典租户隔离时，数据会查不到，默认一个
+const sexOption = getDictItemsByCode("sex") || [{text:'男',value:'1'},{text:'女',value:'2'}];
+const { createMessage } = useMessage();
+const userStore = useUserStore();
+  const { prefixCls } = useDesign('j-base-setting-container');
+//是否编辑
+const isEdit = ref<boolean>(false);
+//用户信息
+const userInfo = ref<any>({});
+//编辑时input触发事件
+const accountNameEdit = ref();
+const [registerModal, { openModal }] = useModal();
+//头像动态计算
+const avatar = computed(() => {
+  return getFileAccessHttpUrl(userInfo.value.avatar) || headerImg;
+});
+//headers
+const uploadHeader = computed(() => {
+  let headers = {};
+  headers['X-Access-Token'] = getToken();
+  return headers;
+});
+const { createMessage: $message } = useMessage();
+//上传列表
+const uploadFileList = ref<any>([]);
+//计算是否可以继续上传
+const uploadVisible = computed(() => {
+  if(!uploadFileList){
+    return true;
+  }
+  return uploadFileList.value.length < 1;
+});
+//图片预览
+const previewVisible = ref<boolean>(false);
+//图片预览路径
+const previewImage = ref<string>('');
+
+/**
+ * 更新用户头像
+ */
+function updateAvatar(src: string, data: string) {
+  const userinfo = userStore.getUserInfo;
+  userinfo.avatar = data;
+  userStore.setUserInfo(userinfo);
+  if (data) {
+    updateUserInfo({ avatar: data, id: userinfo.id });
+  }
+}
+
+/**
+ * 更新用户信息
+ * @params 参数
+ */
+function updateUserInfo(params) {
+  userEdit(params).then((res) => {
+    if (!res.success) {
+      createMessage.warn(res.message);
+    }
+  });
+}
+
+/**
+ * 编辑按钮点击事件
+ */
+function editHandleClick() {
+  isEdit.value = true;
+  setTimeout(() => {
+    accountNameEdit.value.focus();
+  }, 100);
+}
+
+/**
+ * 修改真实姓名
+ */
+function editRealName() {
+  if (userInfo.value.realname) {
+    updateUserInfo({ realname: userInfo.value.realname, id: userInfo.value.id });
+    userStore.setUserInfo(userInfo.value);
+  } else {
+    createMessage.warn("请输入姓名");
+  }
+  isEdit.value = false;
+}
+
+/**
+ * 获取生日信息
+ */
+function getBirthDay(val) {
+  if (val) {
+    return dayjs(val).format("YYYY-MM-DD");
+  } else {
+    return "未填写";
+  }
+}
+
+/**
+ * 获取性别
+ * @param val
+ */
+function getSex(val) {
+  let findOption = sexOption.find(item => parseInt(item.value) === val);
+  let sex = "未填写";
+  if (findOption) {
+    sex = findOption.text;
+  }
+  return sex;
+}
+
+/**
+ * 打开编辑弹窗
+ */
+function openEditModal() {
+  let value = cloneDeep(userInfo.value);
+  openModal(true, {
+    record: value
+  });
+}
+
+/**
+ * 获取用户信息
+ */
+function getUserDetail() {
+  uploadFileList.value = [];
+  getUserData().then((async res => {
+    if (res.success) {
+      if (res.result) {
+        res.result.sexText = getSex(res.result.sex);
+        res.result.birthday = getBirthDay(res.result.birthday);
+        res.result.createTimeText = getDiffDay(res.result.createTime);
+        userInfo.value = res.result;
+        if(userInfo.value.sign){
+          let sign = userInfo.value.sign;
+          let url = getFileAccessHttpUrl(sign);
+          uploadFileList.value.push({
+            uid: getRandom(10),
+            name: getFileName(sign),
+            status: 'done',
+            url: url,
+            response: {
+              status: 'history',
+              message: sign,
+            },
+          })
+        }
+      } else {
+        userInfo.value = {};
+      }
+    }
+  }));
+}
+
+/**
+ * 获取使用时间
+ * @param date
+ */
+function getDiffDay(date) {
+  // 计算两个日期之间的天数差值
+  let totalDays, diffDate
+  let createDate = Date.parse(date);
+  let nowDate = new Date().getTime();
+  // 将两个日期都转换为毫秒格式，然后做差
+  diffDate = Math.abs(nowDate - createDate) // 取相差毫秒数的绝对值
+  totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
+  return totalDays+" 天";
+}
+
+/**
+ * 上传图片之前进行验证
+ * 
+ * @param file
+ */
+function beforeUpload({ file }) {
+  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
+  if (!isJpgOrPng) {
+    $message.error("上传文件格式只能是jpg/png");
+    return false;
+  }
+  const isLimit = file.size / 1024 / 1024 < 1;
+  if (!isLimit) {
+    $message.error("上传图片大小不能超过 1MB!");
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 上传成功事件
+ */
+function handleChange({ file, fileList }) {
+  if (file.status === 'error') {
+    createMessage.error(`${file.name} 上传失败.`);
+  }
+  if (file.status === 'done' && file.response.success === false) {
+    const failIndex = uploadFileList.value.findIndex((item) => item.uid === file.uid);
+    if (failIndex != -1) {
+      uploadFileList.value.splice(failIndex, 1);
+    }
+    createMessage.warning(file.response.message);
+    return;
+  }
+  if (file.status != 'uploading') {
+    fileList.forEach((file) => {
+      if (file.status === 'done') {
+        //上传成功事件
+        uploadSuccess(file.response.message);
+      }
+    });
+    if (file.status === 'removed') {
+      handleDelete();
+    }
+  }
+}
+
+/**
+ * 移除
+ */
+function handleDelete() {
+  updateUser({ sign: "", id: userInfo.value.id },"删除个性签名成功")
+}
+
+/**
+ * 上传成功事件
+ * @param url
+ */
+function uploadSuccess(url) {
+   updateUser({ sign: url, id: userInfo.value.id },"上传个性签名成功")
+}
+
+function updateUser(params,message) {
+  userEdit(params).then((res) => {
+    if(res.success){
+      createMessage.success(message);
+    }
+  });
+}
+
+/**
+ * 图片预览
+ * @param file
+ */
+function handlePreview(file) {
+  previewImage.value = file.url || file.thumbUrl;
+  previewVisible.value = true;
+}
+
+/**
+ * 获取文件名
+ * @param path
+ */
+function getFileName(path) {
+  if (path.lastIndexOf('\\') >= 0) {
+    let reg = new RegExp('\\\\', 'g');
+    path = path.replace(reg, '/');
+  }
+  return path.substring(path.lastIndexOf('/') + 1);
+}
+
+/**
+ * 图片预览关闭
+ */
+function handleCancel() {
+  previewVisible.value = false;
+}
+
+/**
+ * 个性签名开启状态更新
+ */
+function handleEnableSignChange() {
+  updateUser({ signEnable: userInfo.value.signEnable, id: userInfo.value.id },"修改成功")
+}
+
+onMounted(async () => {
+  getUserDetail();
+});
+</script>
+
+<style lang="less">
+    // 代码逻辑说明: [issues/563]暗色主题部分失效
+  @prefix-cls: ~'@{namespace}-j-base-setting-container';
+
+  .@{prefix-cls}{
+    .user-setting-top {
+      padding-top: 40px;
+      width: 100%;
+      border-bottom: 1px solid @border-color-base;
+      display: flex;
+      padding-bottom: 40px;
+    }
+
+    .account-avatar {
+      align-items: center;
+      display: flex;
+      margin-right: 30px;
+      flex: 1;
+    }
+
+    .change-avatar {
+      img {
+        display: block;
+        margin-bottom: 15px;
+        border-radius: 50%;
+      }
+    }
+
+    .account-right {
+      margin-left: 25px !important;
+    }
+
+    .font-size-15 {
+      font-size: 15px;
+    }
+
+    .font-size-17 {
+      font-size: 17px;
+    }
+
+    .pointer {
+      cursor: pointer;
+    }
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      width: 200px;
+      text-overflow: ellipsis;
+      line-height: 32px !important;
+      /*begin 兼容暗夜模式*/
+      color: @text-color;
+      /*end 兼容暗夜模式*/
+      font-weight: 500;
+    }
+
+    .gray-bd {
+      color: #bdbdbd;
+    }
+
+    .account-icon {
+      margin-left: 4px;
+    }
+
+    .account-data {
+      width: 100% !important;
+      display: flex;
+      min-width: 0;
+    }
+
+    .account-detail {
+      width: 40%;
+      display: flex;
+      flex-direction: column;
+      padding: 40px 0;
+
+      .item-label {
+        display: inline-block;
+        text-align: left;
+        width: 80px;
+      }
+    }
+
+    .font-bold {
+      font-weight: 700 !important;
+    }
+
+    .margin-bottom-10 {
+      margin-bottom: 10px;
+    }
+
+    .account-info {
+      width: 60%;
+      display: flex;
+      flex-direction: column;
+      padding: 40px 0;
+      box-sizing: border-box;
+      margin-left: 10px;
+
+      .item-label {
+        display: inline-block;
+        text-align: left;
+        width: 80px;
+      }
+    }
+
+    .nowarp {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .account-padding {
+      padding-left: 20px !important;
+      padding-right: 40px !important;
+    }
+
+    .use-day {
+      /*begin 兼容暗夜模式*/
+      color: @text-color;
+      /*end 兼容暗夜模式*/
+      margin-top: 10px;
+      font-size: 13px;
+      span {
+        color: #1e88e5;
+        margin-left: 5px;
+      }
+    }
+    .font-size-13 {
+      font-size: 13px;
+    }
+    .ant-upload-select,.ant-upload-list-item-container{
+      width: 200px !important;
+      height: 80px !important;
+    }
+    .ant-upload-list-item-thumbnail .ant-upload-list-item-image {
+      object-fit: cover !important;
+    }
+    p{
+      margin-bottom: 5px;
+    }
+    .border-bottom{
+      border-bottom: 1px solid @border-color-base;
+    }
+  }
+</style>
diff --git a/src/views/system/usersetting/TenantSetting.vue b/src/views/system/usersetting/TenantSetting.vue
new file mode 100644
index 0000000..03128b7
--- /dev/null
+++ b/src/views/system/usersetting/TenantSetting.vue
@@ -0,0 +1,772 @@
+<template>
+  <div class="tenant-padding" :class="[`${prefixCls}`]">
+    <div class="my-tenant">
+      <span style="flex: 1">我的组织</span>
+      <span class="invited" @click="invitedClick">我的受邀信息<span class="approved-count" v-if="invitedCount>0">{{invitedCount}}</span></span>
+    </div>
+    <div class="tenant-list" v-if="dataSource.length>0">
+      <div v-for="item in dataSource" class="tenant-list-item" @click="drownClick(item)">
+        <div class="tenant-title">
+          <div class="item-left">
+            <div class="item-name">{{ item.name }}</div>
+            <div class="vip-message">
+              <div class="item-house" @click.stop="copyClick(item.houseNumber)">
+                <span>
+                  组织门牌号：{{ item.houseNumber }}
+                  <Icon icon="ant-design:copy-outlined" style="font-size: 13px; margin-left: 2px" />
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="item-right">
+            <span v-if="item.userTenantStatus === '3'">
+              <span class="pointer examine">待审核</span>
+              <span class="pointer cancel-apply" @click.stop="cancelApplyClick(item.tenantUserId)">取消申请</span>
+            </span>
+            <span v-else-if="item.userTenantStatus === '5'">
+              <span class="pointer examine" @click="joinOrRefuseClick(item.tenantUserId,'1')">加入</span>
+              <span class="pointer cancel-apply" @click.stop="joinOrRefuseClick(item.tenantUserId,'4')">拒绝</span>
+            </span>
+            <div v-else style="width: 75px"></div>
+            <span style="margin-left: 24px">
+              <Icon v-if="item.show" icon="ant-design:down-outlined" style="font-size: 13px; color: #707070" />
+              <Icon v-else icon="ant-design:right-outlined" style="font-size: 13px; color: #707070" />
+            </span>
+          </div>
+        </div>
+        <div class="item-content" v-show="item.show">
+          <div class="content-box">
+            <div class="content-name"> 组织名片 </div>
+            <div class="content-desc">
+              <div class="flex-flow">
+                <div class="content-des-text">姓名</div>
+                <div style="font-size: 13px;color: #000000">
+                  {{ userDetail.realname }}
+                </div>
+              </div>
+              <div class="flex-flow">
+                <div class="content-des-text">部门</div>
+                <div style="font-size: 13px">
+                  {{ userDetail.orgCodeTxt ? userDetail.orgCodeTxt : '未填写' }}
+                </div>
+              </div>
+              <div class="flex-flow">
+                <div class="content-des-text">职业</div>
+                <div style="font-size: 13px">
+                  {{ userDetail.postText ? userDetail.postText : '未填写' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="footer-box">
+            <span
+              v-if="item.userTenantStatus !== '3'"
+              @click.stop="footerClick('editTenant', item)"
+              class="font-color333 flex-center margin-right40 font-size13 pointer"
+            >
+              <Icon icon="ant-design:edit-outlined" class="footer-icon" />
+              <span>查看租户名片</span>
+            </span>
+            <span v-else class="font-color9e flex-center margin-right40 font-size13">
+              <Icon icon="ant-design:edit-outlined" class="footer-icon" />
+              <span>查看租户名片</span>
+            </span>
+            <span
+              v-if="item.userTenantStatus !== '3'"
+              @click.stop="footerClick('exitTenant', item)"
+              class="font-color333 flex-center margin-right40 font-size13 pointer"
+            >
+              <Icon icon="ant-design:export-outlined" class="footer-icon" />
+              <span>退出租户</span>
+            </span>
+            <span v-else class="font-color9e flex-center margin-right40 font-size13">
+              <Icon icon="ant-design:export-outlined" class="footer-icon" />
+              <span>退出租户</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a-empty v-else description="暂无数据" style="position: relative;top: 50px;"/>
+  </div>
+  <a-modal v-model:open="tenantVisible" width="400px" wrapClassName="edit-tenant-setting">
+    <template #title>
+      <div style="font-size: 17px; font-weight: 700">查看名片</div>
+      <div style="color: #9e9e9e; margin-top: 10px; font-size: 13px"> 名片是您在该组织下的个人信息，只在本组织中展示。 </div>
+    </template>
+    <div style="margin-top: 24px; font-size: 13px; padding: 0 24px">
+      <div class="font-color75">姓名</div>
+      <div class="margin-top6 margin-bottom-16">{{ userDetail.realname }}</div>
+      <div>部门</div>
+      <div class="margin-top6 margin-bottom-16">{{ userDetail.orgCodeTxt ? userDetail.orgCodeTxt : '未填写' }}</div>
+      <div>职位</div>
+      <div class="margin-top6 margin-bottom-16">{{ userDetail.postText ? userDetail.postText : '未填写' }}</div>
+      <div>工作地点</div>
+      <div class="margin-top6 margin-bottom-16">{{ userData.workPlace ? userData.workPlace : '未填写' }}</div>
+      <div>工号</div>
+      <div class="margin-top6 margin-bottom-16">{{ userDetail.workNo ? userDetail.workNo : '未填写' }}</div>
+    </div>
+  </a-modal>
+
+  <!-- 退出租户 -->
+  <a-modal v-model:open="cancelVisible" width="800" destroy-on-close>
+    <template #title>
+      <div class="cancellation">
+        <Icon icon="ant-design:warning-outlined" style="font-size: 20px;color: red"/>
+        退出租户 {{myTenantInfo.name}}
+      </div>
+    </template>
+    <a-form :model="formCancelState" ref="cancelTenantRef">
+      <a-form-item name="tenantName">
+        <a-row :span="24" style="padding: 20px 20px 0;font-size: 13px">
+          <a-col :span="24">
+            请输入租户名称
+          </a-col>
+          <a-col :span="24" style="margin-top: 10px">
+            <a-input v-model:value="formCancelState.tenantName" @change="tenantNameChange"/>
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item name="loginPassword">
+        <a-row :span="24" style="padding: 0 20px;font-size: 13px">
+          <a-col :span="24">
+            请输入您的登录密码
+          </a-col>
+          <a-col :span="24" style="margin-top: 10px">
+            <a-input-password v-model:value="formCancelState.loginPassword" />
+          </a-col>
+        </a-row>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button type="primary" @click="handleOutClick" :disabled="outBtnDisabled">确定</a-button>
+      <a-button @click="handleCancelOutClick">取消</a-button>
+    </template>
+  </a-modal>
+
+  <a-modal
+    title="变更拥有者"
+    v-model:open="owenVisible"
+    width="800"
+    destroy-on-close
+    :cancelButtonProps="{display:'none'}"
+    @ok="changeOwen">
+      <div style="padding: 20px">
+        <a-row :span="24">
+          <div class="change-owen">
+            只有变更拥有着之后,才能退出
+          </div>
+        </a-row>
+        <a-row :span="24" style="margin-top: 10px">
+          <UserSelect v-model:value="tenantOwen" izExcludeMy/>
+        </a-row>
+      </div>
+  </a-modal>
+  
+  <!-- begin 我的受邀信息 -->
+  <a-modal title="我的受邀信息" v-model:open="invitedVisible" :footer="null">
+      <a-row :span="24" class="invited-row">
+        <a-col :span="16">
+          组织
+        </a-col>
+        <a-col :span="8">
+          操作
+        </a-col>
+      </a-row>
+    <a-row :span="24" class="invited-row-list" v-for="item in invitedList">
+      <a-col :span="16">
+        {{item.name}}
+      </a-col>
+      <a-col :span="8">
+        <span class="common" @click="joinOrRefuseClick(item.tenantUserId,'1')">加入</span>
+        <span class="common refuse" @click="joinOrRefuseClick(item.tenantUserId,'4')">拒绝</span>
+      </a-col>
+    </a-row>
+    <div style="height: 20px"></div>
+  </a-modal>
+  <!-- end 我的受邀信息 -->
+</template>
+
+<script lang="ts" name="tenant-setting" setup>
+import { onMounted, ref, unref } from "vue";
+import { getTenantListByUserId, cancelApplyTenant, exitUserTenant, changeOwenUserTenant, agreeOrRefuseJoinTenant } from "./UserSetting.api";
+import { useUserStore } from "/@/store/modules/user";
+import { CollapseContainer } from "/@/components/Container";
+import { getFileAccessHttpUrl, userExitChangeLoginTenantId } from "/@/utils/common/compUtils";
+import headerImg from "/@/assets/images/header.jpg";
+import {useMessage} from "/@/hooks/web/useMessage";
+import { initDictOptions } from '/@/utils/dict';
+import { uniqWith } from 'lodash-es';
+import { Modal } from 'ant-design-vue';
+import UserSelect from '/@/components/Form/src/jeecg/components/userSelect/index.vue';
+import {router} from "/@/router";
+import { useDesign } from '/@/hooks/web/useDesign';
+
+const { prefixCls } = useDesign('j-user-tenant-setting-container');
+//数据源
+const dataSource = ref<any>([]);
+const userStore = useUserStore();
+
+//数据源
+const { createMessage } = useMessage();
+//部门字典
+const departOptions = ref<any>([]);
+//租户编辑是或否隐藏
+const tenantVisible = ref<boolean>(false);
+//用户数据
+const userData = ref<any>([]);
+//用户
+const userDetail = ref({
+  realname: userStore.getUserInfo.realname,
+  workNo: userStore.getUserInfo.workNo,
+  orgCodeTxt: userStore.getUserInfo.orgCodeTxt,
+  postText: userStore.getUserInfo.postText,
+});
+/**
+ * 初始化租户数据
+ */
+  async function initDataSource() {
+  //获取用户数据
+    // 代码逻辑说明: [QQYUN-5608]用户导入后，邀请后,被导入人同意即可,新增被邀信息-----------
+    getTenantListByUserId({ userTenantStatus: '1,3,5' }).then((res) => {
+      if (res.success) {
+        if(res.result && res.result.length>0){
+          let result = res.result;
+          //存放正常和审核中的数组
+          let normal:any = [];
+          //存放受邀的信息
+          let invited:any = [];
+          for (let i = 0; i < result.length; i++) {
+            let status = result[i].userTenantStatus;
+            //状态为邀请的放入invited数组中
+            if(status === '5'){
+              invited.push(result[i]);
+            }
+            normal.push(result[i]);
+          }
+          dataSource.value = normal;
+          invitedList.value = invited;
+          invitedCount.value = invited.length;
+        }else{
+          setInitedValue();
+        }
+      } else {
+        setInitedValue();
+      }
+    });
+  }
+  function setInitedValue() {
+    dataSource.value = [];
+    invitedList.value = [];
+    invitedCount.value = 0;  
+  }
+
+  /**
+   * 复制门户
+   * @param value
+   */
+  function copyClick(value) {
+    // 创建input元素
+    const el = document.createElement('input');
+    // 给input元素赋值需要复制的文本
+    el.setAttribute('value', value);
+    // 将input元素插入页面
+    document.body.appendChild(el);
+    // 选中input元素的文本
+    el.select();
+    // 复制内容到剪贴板
+    document.execCommand('copy');
+    // 删除input元素
+    document.body.removeChild(el);
+    createMessage.success('复制成功');
+  };
+
+  /**
+   * 取消申请
+   * @param id
+   */
+  function cancelApplyClick(id) {
+    Modal.confirm({
+      title: '取消申请',
+      content: '是否取消申请',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        cancelApplyTenant({ tenantId: id }).then((res) => {
+          if (res.success) {
+            createMessage.success('取消申请成功');
+            initDataSource();
+          }else{
+            createMessage.warning(res.message);
+          }
+        }).catch((e)=>{
+           createMessage.warning(e.message);
+        });
+      },
+    });
+  };
+
+  /**
+   * 展开关闭事件
+   */
+  function drownClick(value) {
+    if (!value.show) {
+      value.show = true;
+    } else {
+      value.show = false;
+    }
+  };
+
+  /**
+   * 获取部门文本
+   * @param value
+   */
+  function getDepartText(value) {
+    let arr = departOptions.value.filter((item) => {
+      item.value == value;
+    });
+    if (arr && arr.length > 0) {
+      return arr[0].label;
+    }
+    return '未填写';
+  };
+
+  /**
+   * 底部文本点击事件
+   */
+  function footerClick(type, item) {
+    userData.value = item;
+    //编辑组织名片
+    if (type === 'editTenant') {
+      tenantVisible.value = true;
+    }else if(type === 'exitTenant'){
+      //退出租户
+      formCancelState.value = {loginPassword:'', tenantName:''};
+      outBtnDisabled.value = true;
+      cancelVisible.value = true;
+      myTenantInfo.value = item;
+    }
+  }
+
+  //退出租户弹窗
+  const cancelVisible = ref<boolean>(false);
+  //退出租户数据
+  const formCancelState = ref<any>({});
+  //租户数据
+  const myTenantInfo = ref<any>({});
+  //注销租户弹窗确定按钮是否可以点击
+  const outBtnDisabled = ref<boolean>(true);
+  //拥有者
+  const tenantOwen = ref<string>('');
+  //拥有者弹窗
+  const owenVisible = ref<boolean>(false);
+
+  /**
+   * 租户名称值改变事件
+   */
+  function tenantNameChange() {
+    let name = unref(myTenantInfo).name;
+    let tenantName = unref(formCancelState).tenantName;
+    if(name === tenantName){
+      outBtnDisabled.value = false;
+    }else{
+      outBtnDisabled.value = true;
+    }
+  }
+
+  /**
+   * 退出确定点击事件
+   */
+  async function handleOutClick() {
+    if(!unref(formCancelState).loginPassword){
+        createMessage.warning("请输入登录密码");
+        return;
+    }
+    console.log("myTenantInfo::::",myTenantInfo);
+    await exitUserTenant({ id: unref(myTenantInfo).tenantUserId, loginPassword: unref(formCancelState).loginPassword }).then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        cancelVisible.value = false;
+        initDataSource();
+        // 代码逻辑说明: 【QQYUN-6822】7、登录拥有多个租户身份的用户，退出租户，只剩下一个租户后显示为空---
+        userExitChangeLoginTenantId(unref(myTenantInfo).tenantUserId);
+      } else {
+        if (res.message === 'assignedOwen') {
+          //需要指定变更者
+          owenVisible.value = true;
+          cancelVisible.value = false;
+        // 代码逻辑说明: 【QQYUN-5270】名下租户全部退出后，再次登录，提示租户全部冻结。拥有者提示前往注销------------
+        }else if(res.message === 'cancelTenant'){
+          cancelVisible.value = false;
+          let fullPath = router.currentRoute.value.fullPath;
+          Modal.confirm({
+            title: '您是该组织的拥有者',
+            content: '该组织下没有其他成员，需要您前往注销',
+            okText: '前往注销',
+            okType: 'danger',
+            cancelText: '取消',
+            onOk: () => {
+              if(fullPath === '/system/usersetting'){
+                return;
+              }
+              router.push('/myapps/settings/organization/organMessage/'+unref(myTenantInfo).tenantUserId)
+            }
+          })
+        } else {
+          createMessage.warning(res.message);
+        }
+      }
+    }).catch((res) => {
+      createMessage.warning(res.message);
+    })
+  }
+
+  /**
+   * 退出租户取消事件
+   */
+  function handleCancelOutClick() {
+    cancelVisible.value = false;
+    outBtnDisabled.value = true;
+  }
+
+  /**
+   * 变更拥有着
+   */
+  function changeOwen() {
+    if(!unref(tenantOwen)){
+      createMessage.warning("请选择变更拥有者");
+      return;
+    }
+    changeOwenUserTenant({ userId:unref(tenantOwen), tenantId:unref(myTenantInfo).tenantUserId }).then((res) =>{
+      if(res.success){
+        createMessage.success(res.message);
+        initDataSource();
+        // 代码逻辑说明: 【QQYUN-6822】7、登录拥有多个租户身份的用户，退出租户，只剩下一个租户后显示为空---
+        userExitChangeLoginTenantId(unref(myTenantInfo).tenantUserId);
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+  }
+  
+  //邀请数量
+  const invitedCount = ref<number>(0);
+  //受邀信息
+  const invitedList = ref<any>([]);
+  //受邀信息弹窗
+  const invitedVisible = ref<boolean>(false);
+
+  /**
+   * 受邀信息点击事件
+   */
+  function invitedClick() {
+    invitedVisible.value = true;
+  }
+
+  /**
+   * 加入组织点击事件
+   */
+  async function joinOrRefuseClick(tenantId,status) {
+    await agreeOrRefuseJoinTenant( { tenantId:Number.parseInt(tenantId), status:status });
+    initDataSource();
+  }
+
+  onMounted(() => {
+    initDataSource();
+  });
+
+</script>
+
+<style lang="less" scoped>
+.tenant-padding{
+  padding: 30px 40px 0 20px;
+}
+.my-tenant{
+  display: flex;
+  font-size: 17px;
+  font-weight: 700!important;
+  /*begin 兼容暗夜模式*/
+  color: @text-color;
+  /*end 兼容暗夜模式*/
+  margin-bottom: 20px;
+  .invited{
+    font-size: 14px;
+    text-align: right;
+    cursor: pointer;
+  }
+}
+.tenant-list{
+  box-sizing: border-box;
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+}
+.tenant-list-item{
+  /*begin 兼容暗夜模式*/
+  border: 1px solid @border-color-base;
+  /*end 兼容暗夜模式*/
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  overflow: hidden;
+  padding: 0 25px;
+  width: 100%;
+  .item-name{
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 0;
+    cursor: pointer;
+    font-size:17px;
+    /*begin 兼容暗夜模式*/
+    color: @text-color;
+    /*end 兼容暗夜模式*/
+    font-weight: 700!important;
+  }
+}
+.tenant-list-item:hover{
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
+}
+.pointer {
+  cursor: pointer;
+}
+
+.examine {
+  color: #2c9cff;
+  font-size: 13px;
+}
+
+.cancel-apply {
+  margin-left: 24px;
+  color: red;
+  font-size: 13px;
+}
+
+.item-content {
+  transition: ease-in 2s;
+
+  .content-box {
+    /*begin 兼容暗夜模式*/
+    border-top: 1px solid @border-color-base;
+    /*end 兼容暗夜模式*/
+    box-sizing: border-box;
+    display: flex;
+    padding: 24px 0;
+  }
+
+  .content-name {
+    /*begin 兼容暗夜模式*/
+    color: @text-color;
+    /*end 兼容暗夜模式*/
+    text-align: center;
+    width: 100px;
+    font-size: 13px;
+  }
+
+  .content-desc {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .content-des-text {
+    /*begin 兼容暗夜模式*/
+    color: @text-color;
+    /*end 兼容暗夜模式*/
+    text-align: left;
+    width: 76px;
+    font-size: 13px;
+  }
+}
+
+.flex-flow {
+  display: flex;
+  min-width: 0;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+}
+
+.footer-box {
+  /*begin 兼容暗夜模式*/
+  border-top: 1px solid @border-color-base;
+  /*end 兼容暗夜模式*/
+  box-sizing: border-box;
+  display: flex;
+  padding: 24px 0;
+  color: #757575;
+}
+
+.margin-right40 {
+  margin-right: 40px;
+}
+
+/*begin 兼容暗夜模式*/
+.font-color333 {
+  color: @text-color;
+  font-weight: normal;
+}
+
+.font-color9e {
+  color: @text-color;
+}
+
+.font-color75 {
+  color: @text-color;
+}
+/*end 兼容暗夜模式*/
+
+.font-size13 {
+  font-size: 13px;
+}
+
+.footer-icon {
+  font-size: 13px !important;
+  margin-right: 13px;
+  position: relative;
+  top: 0px;
+}
+:deep(.edit-tenant-setting) {
+  color: #0a8fe9;
+}
+.margin-top6 {
+  margin-top: 6px;
+}
+.margin-bottom-16 {
+  margin-bottom: 16px;
+}
+.item-right {
+  align-items: center;
+  display: flex;
+  .buy-margin{
+    margin-left: 10px;
+    width: 66px;
+    border-radius: 20px;
+    background: rgba(255, 154, 0, 1);
+    height: 28px;
+    line-height: 28px;
+    cursor: pointer;
+    text-align: center;
+    span{
+      font-size: 14px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+  .ordinary-user{
+    margin-left: 10px;
+    width: 66px;
+    span{
+      font-size: 14px;
+      font-weight: 400;
+      color: #9e9e9e;
+    }
+  }
+}
+.tenant-title {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 0;
+  .vip-message{
+    display: flex;
+    .vip-message-margin{
+      margin-right: 20px;
+    }
+  }
+}
+.change-owen{
+  font-size: 14px;
+  font-weight: 700;
+}
+// 代码逻辑说明: 被邀弹窗样式------------
+.approved-count{
+  background: #ffd2d2;
+  border-radius: 19px;
+  color: red;
+  display: inline-block;
+  font-weight: 500;
+  height: 19px;
+  line-height: 18px;
+  margin-left: 8px;
+  min-width: 19px;
+  padding: 0 6px;
+  text-align: center;
+}
+
+.invited-row{
+  padding: 10px 34px;
+}
+.invited-row-list{
+  padding: 0px 34px;
+  .common{
+    color: #1e88e5;
+    cursor: pointer;
+  }
+  .refuse{
+    color: red;
+    margin-left: 20px;
+  }
+}
+.pointer{
+  cursor: pointer;
+}
+</style>
+
+<style lang="less">
+  // 代码逻辑说明: [issues/563]暗色主题部分失效
+@prefix-cls: ~'@{namespace}-j-user-tenant-setting-container';
+/*begin 兼容暗夜模式*/
+.@{prefix-cls} {
+
+  .my-tenant{
+    color: @text-color;
+  }
+
+  .tenant-list-item{
+    border: 1px solid @border-color-base;
+
+    .item-name{
+      color: @text-color;
+    }
+  }
+
+  .item-content {
+
+    .content-box {
+      border-top: 1px solid @border-color-base;
+    }
+
+    .content-name {
+      color: @text-color;
+    }
+
+    .content-des-text {
+      color: @text-color;
+    }
+  }
+  .footer-box {
+    border-top: 1px solid @border-color-base;
+  }
+
+  /*begin 兼容暗夜模式*/
+  .font-color333 {
+    color: @text-color;
+  }
+
+  .font-color9e {
+    color: @text-color;
+  }
+
+  .font-color75 {
+    color: @text-color;
+  }
+}
+/*end 兼容暗夜模式*/
+</style>
diff --git a/src/views/system/usersetting/UserSetting.api.ts b/src/views/system/usersetting/UserSetting.api.ts
new file mode 100644
index 0000000..4125bfb
--- /dev/null
+++ b/src/views/system/usersetting/UserSetting.api.ts
@@ -0,0 +1,151 @@
+import { defHttp } from "/@/utils/http/axios";
+
+enum Api {
+  userEdit='/sys/user/login/setting/userEdit',
+  getUserData='/sys/user/login/setting/getUserData',
+  queryNameByCodes='/sys/position/queryByCodes',
+  updateMobile='/sys/user/updateMobile',
+  updateUserPassword='/sys/user/passwordChange',
+  getTenantListByUserId = '/sys/tenant/getTenantListByUserId',
+  cancelApplyTenant = '/sys/tenant/cancelApplyTenant',
+  exitUserTenant = '/sys/tenant/exitUserTenant',
+  changeOwenUserTenant = '/sys/tenant/changeOwenUserTenant',
+  getThirdAccountByUserId = '/sys/thirdApp/getThirdAccountByUserId',
+  bindThirdAppAccount = '/sys/thirdApp/bindThirdAppAccount',
+  deleteThirdAccount = '/sys/thirdApp/deleteThirdAccount',
+  agreeOrRefuseJoinTenant = '/sys/tenant/agreeOrRefuseJoinTenant',
+  //更改手机号
+  changePhone = '/sys/user/changePhone',
+  //用户注销
+  userLogOff = '/sys/user/userLogOff',
+  //没有绑定手机号用的修改密码请求地址
+  updatePasswordNotBindPhone = '/sys/user/updatePasswordNotBindPhone',
+}
+
+/**
+ * 用户编辑
+ * @param params
+ */
+export const userEdit = (params) => {
+  return defHttp.post({ url: Api.userEdit, params },{ isTransformResponse:false });
+}
+
+/**
+ * 获取用户信息
+ * @param params
+ */
+export const getUserData = () => {
+  return defHttp.get({ url: Api.getUserData },{ isTransformResponse:false });
+}
+
+/**
+ * 获取多个职务信息
+ * @param params
+ */
+export const queryNameByCodes = (params) => {
+  return defHttp.get({ url: Api.queryNameByCodes, params },{isTransformResponse:false});
+}
+
+/**
+ * 修改手机号
+ * @param params
+ */
+export const updateMobile = (params) => {
+  return defHttp.put({ url: Api.updateMobile, params },{isTransformResponse:false});
+}
+
+/**
+ * 修改密码
+ * @param params
+ */
+export const updateUserPassword = (params) => {
+  return defHttp.get({ url: Api.updateUserPassword, params },{isTransformResponse:false});
+}
+
+/**
+ * 修改密码
+ * @param params
+ */
+export const updatePasswordNotBindPhone = (params) => {
+  return defHttp.put({ url: Api.updatePasswordNotBindPhone, params },{ isTransformResponse:false, joinParamsToUrl: true });
+}
+
+/**
+ * 通过用户id获取租户列表
+ * @param params
+ */
+export const getTenantListByUserId = (params) => {
+  return defHttp.get({ url: Api.getTenantListByUserId, params }, { isTransformResponse: false });
+};
+
+/**
+ * 取消申请
+ * @param params
+ */
+export const cancelApplyTenant = (params) => {
+  return defHttp.put({ url: Api.cancelApplyTenant, data: params }, { joinParamsToUrl: true, isTransformResponse: false });
+};
+
+/**
+ * 用户退出租户
+ * @param params
+ */
+export const exitUserTenant = (params)=>{
+  return defHttp.delete({ url: Api.exitUserTenant, params },{ isTransformResponse: false, joinParamsToUrl: true });
+}
+
+/**
+ * 变更租户拥有者
+ * @param params
+ */
+export const changeOwenUserTenant = (params)=>{
+  return defHttp.post({ url: Api.changeOwenUserTenant, params },{ isTransformResponse: false, joinParamsToUrl: true });
+}
+
+/**
+ * 获取账号第三方信息通过第三方类型
+ * @param params
+ */
+export const getThirdAccountByUserId = (params) => {
+  return defHttp.get({ url: Api.getThirdAccountByUserId, params }, { isTransformResponse: false });
+};
+
+/**
+ * 根据第三方uuid绑定账号
+ * @param params
+ */
+export const bindThirdAppAccount = (params) => {
+  return defHttp.post({ url: Api.bindThirdAppAccount, params }, { isTransformResponse: false, joinParamsToUrl: true });
+};
+
+/**
+ * 根据第三方uuid绑定账号
+ * @param params
+ */
+export const deleteThirdAccount = (params) => {
+  return defHttp.delete({ url: Api.deleteThirdAccount, params }, { isTransformResponse:false, joinParamsToUrl: true });
+};
+
+/**
+ * 同意和拒绝加入租户
+ * @param params
+ */
+export const agreeOrRefuseJoinTenant = (params) => {
+  return defHttp.put({ url: Api.agreeOrRefuseJoinTenant, params },{ joinParamsToUrl: true });
+};
+
+/**
+ * 更改手机号
+ * @param params
+ */
+export const changePhone = (params) => {
+  return defHttp.put({ url: Api.changePhone, params },{ joinParamsToUrl: true, isTransformResponse: false });
+};
+
+/**
+ * 用户注销
+ * @param params
+ */
+export const userLogOff = (params) => {
+  return defHttp.put({ url: Api.userLogOff, params },{ isTransformResponse:false });
+}
diff --git a/src/views/system/usersetting/UserSetting.data.ts b/src/views/system/usersetting/UserSetting.data.ts
new file mode 100644
index 0000000..d94301e
--- /dev/null
+++ b/src/views/system/usersetting/UserSetting.data.ts
@@ -0,0 +1,165 @@
+import { FormSchema } from '/@/components/Form/index';
+import { rules } from '/@/utils/helper/validator';
+import anquan1 from './icons/anquan1.png'
+import anquan2 from './icons/anquan2.png'
+import app1 from './icons/app1.png'
+import app2 from './icons/app2.png'
+import geren1 from './icons/geren1.png'
+import geren2 from './icons/geren2.png'
+import zuhu1 from './icons/zuhu1.png'
+import zuhu2 from './icons/zuhu2.png'
+import { calculateFileSize } from "/@/utils/common/compUtils";
+import { BasicColumn } from "@/components/Table";
+
+export interface ListItem {
+  key: string;
+  title: string;
+  description: string;
+  extra?: string;
+  avatar?: string;
+  color?: string;
+}
+
+// tab的list
+export const settingList = [
+  {
+    key: '1',
+    name: '个人信息',
+    component: 'BaseSetting',
+    icon:'ant-design:user-outlined',
+    img1: geren1,
+    img2: geren2,
+  },
+  {
+    key: '2',
+    name: '我的组织',
+    component: 'TenantSetting',
+    isSlot:false,
+    icon:'ant-design:team-outlined',
+    img1: zuhu1,
+    img2: zuhu2,
+  },
+   {
+    key: '3',
+    name: '账号安全',
+    component: 'AccountSetting',
+    icon:'ant-design:lock-outlined',
+    img1: anquan1,
+    img2: anquan2,
+  },
+  {
+    key: '4',
+    name: '第三方APP',
+    component: 'WeChatDingSetting',
+    icon: 'ant-design:contacts-outlined',
+    img1: app1,
+    img2: app2,
+  },
+];
+
+
+/**
+ * 用户表单
+ */
+export const formSchema: FormSchema[] = [
+  {
+    field: 'realname',
+    component: 'Input',
+    label: '姓名',
+    colProps: { span: 24 },
+    required:true
+  },
+  {
+    field: 'birthday',
+    component: 'DatePicker',
+    label: '生日',
+    colProps: { span: 24 },
+    componentProps:{
+      showTime:false,
+      valueFormat:"YYYY-MM-DD",
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: 'sex',
+    component: 'RadioGroup',
+    label: '性别',
+    colProps: { span: 24 },
+    componentProps:{
+      options: [
+        {
+          label: '男',
+          value: 1,
+        },
+        {
+          label: '女',
+          value: 2,
+        },
+      ],
+    }
+  },
+  {
+    field: 'relTenantIds',
+    component: 'JDictSelectTag',
+    label: '租户',
+    colProps: { span: 24 },
+    componentProps:{
+      mode:'multiple',
+      dictCode:'sys_tenant,name,id',
+      disabled:true
+    }
+  },
+  {
+    field: 'post',
+    component: 'JDictSelectTag',
+    label: '职位',
+    colProps: { span: 24 },
+    componentProps:{
+      mode:'multiple',
+      dictCode:'sys_position,name,id',
+      disabled:true
+    }
+  },
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+]
+
+//密码弹窗
+export const formPasswordSchema: FormSchema[] = [
+  {
+    label: '用户账号',
+    field: 'username',
+    component: 'Input',
+    componentProps: { readOnly: true },
+  },
+  {
+    label: '旧密码',
+    field: 'oldpassword',
+    component: 'InputPassword',
+    required: true,
+  },
+  {
+    label: '新密码',
+    field: 'password',
+    component: 'StrengthMeter',
+    componentProps: {
+      placeholder: '请输入新密码',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入新密码',
+      },
+    ],
+  },
+  {
+    label: '确认新密码',
+    field: 'confirmpassword',
+    component: 'InputPassword',
+    dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+  },
+];
diff --git a/src/views/system/usersetting/UserSetting.vue b/src/views/system/usersetting/UserSetting.vue
new file mode 100644
index 0000000..588088b
--- /dev/null
+++ b/src/views/system/usersetting/UserSetting.vue
@@ -0,0 +1,179 @@
+<template>
+  <ScrollContainer>
+    <div ref="wrapperRef" class="user-account-setting" :class="[prefixCls]">
+      <Tabs tab-position="left" :tabBarStyle="tabBarStyle" @tabClick="componentClick" v-model:activeKey="activeKey">
+        <template v-for="item in componentList" :key="item.key">
+          <TabPane>
+            <template #tab>
+                <span style="display:flex;align-items: center;cursor: pointer">
+                  <!--<Icon :icon="item.icon" class="icon-font-color"/>-->
+                  <span style="width: 30px">
+                    <img v-if="activeKey === item.key || isDark" :src="item.img2" style="height: 18px"/>
+                    <img v-else :src="item.img1" style="height: 16px"/>
+                  </span>
+                  {{item.name}}
+                </span>
+            </template>
+            <component :is="item.component" v-if="activeKey === item.key && !item.isSlot" />
+            <slot name="component" v-if="activeKey === item.key && item.isSlot" />
+          </TabPane>
+        </template>
+      </Tabs>
+    </div>
+  </ScrollContainer>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, onMounted, provide, computed } from "vue";
+import { Tabs } from "ant-design-vue";
+import { ScrollContainer } from "/@/components/Container";
+import { settingList } from "./UserSetting.data";
+import BaseSetting from "./BaseSetting.vue";
+import AccountSetting from "./AccountSetting.vue";
+import TenantSetting from "./TenantSetting.vue";
+import WeChatDingSetting from './WeChatDingSetting.vue';
+import { useRouter } from "vue-router";
+import { useDesign } from '/@/hooks/web/useDesign';
+import {useRootSetting} from "/@/hooks/setting/useRootSetting";
+import {ThemeEnum} from "/@/enums/appEnum";
+export default defineComponent({
+  components: {
+    ScrollContainer,
+    Tabs,
+    TabPane: Tabs.TabPane,
+    BaseSetting,
+    AccountSetting,
+    TenantSetting,
+    WeChatDingSetting,
+  },
+  props:{
+    componentList:{
+      type:Array,
+      default:settingList
+    }
+  },
+  setup() {
+    const { prefixCls } = useDesign('user-account-setting-container');
+    const { getDarkMode} = useRootSetting();
+    const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+    const activeKey = ref<string>('1');
+    //是否为vip
+    const showVip = ref<boolean>(false);
+    //vip编码
+    const vipCode = ref<string>('');
+    const router = useRouter();
+    const componentList = computed(()=>{
+      if(showVip.value){
+        return settingList;
+      }
+      return settingList.filter((item)=> item.component != 'MyVipSetting');
+    })
+
+    /**
+     * 组件标题点击事件,解决第二次不加载数据
+     * @param key
+     */
+    function componentClick(key) {
+      activeKey.value = key;
+    }
+
+    function goToMyTeantPage(){
+      //update-begin---author:wangshuai ---date:20230721  for：【QQYUN-5726】邀请加入租户加个按钮直接跳转过去------------
+      //如果请求参数包含我的租户，直接跳转过去
+      let query = router.currentRoute.value.query;
+      if(query && query.page === 'tenantSetting'){
+        activeKey.value = "2";
+      }
+      //update-end---author:wangshuai ---date:20230721  for：【QQYUN-5726】邀请加入租户加个按钮直接跳转过去------------
+    }
+    
+    onMounted(()=>{
+      goToMyTeantPage();
+    })
+    
+    return {
+      prefixCls,
+      settingList,
+      tabBarStyle: {
+        width: "220px",
+        marginBottom: "200px"
+      },
+      componentClick,
+      activeKey,
+      isDark
+    };
+  }
+});
+</script>
+<style lang="less" scoped>
+.user-account-setting {
+  margin: 20px;
+
+  .base-title {
+    padding-left: 0;
+  }
+
+  //tabs弹窗左边样式
+  :deep(.ant-tabs-nav){
+    height: 260px;
+  }
+  //tabs弹窗右边边样式
+  :deep(.ant-tabs-content-holder){
+    position: relative;
+    left: 12px;
+    height: auto !important;
+  }
+}
+//tab点击样式
+:deep(.ant-tabs-tab-active){
+  border-radius: 0 20px 20px 0;
+  background-color: #1294f7!important;
+  color: #fff!important;
+  .icon-font-color{
+    color: #fff;
+  }
+}
+:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn){
+  color: white !important;
+}
+:deep(.ant-tabs-ink-bar){
+  visibility: hidden;
+}
+:deep(.ant-tabs-nav-list){
+  padding-top:14px;
+  padding-right:14px;
+}
+
+.vip-height{
+  //tabs弹窗左边样式
+  :deep(.ant-tabs-nav){
+    height: 310px !important;
+  }
+}
+.vip-background{
+  :deep(.ant-tabs-content-holder){
+    background: transparent;
+  }
+  :deep(.ant-tabs-tabpane){
+    padding-left: 0 !important;
+  }
+}
+</style>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-user-account-setting-container';
+
+.@{prefix-cls} {
+  .ant-tabs-tab-active {
+    background-color: @item-active-bg;
+  }
+  //tabs弹窗左边样式
+ .ant-tabs-nav{
+    background-color: @component-background;
+  }
+  //tabs弹窗右边边样式
+  .ant-tabs-content-holder{
+    background: @component-background;
+  }
+}
+</style>
diff --git a/src/views/system/usersetting/WeChatDingSetting.vue b/src/views/system/usersetting/WeChatDingSetting.vue
new file mode 100644
index 0000000..5903268
--- /dev/null
+++ b/src/views/system/usersetting/WeChatDingSetting.vue
@@ -0,0 +1,306 @@
+<template>
+  <div :class="[`${prefixCls}`]">
+    <div class="my-account">第三方APP</div>
+<!--    <div class="account-row-item">-->
+<!--      <div class="account-label gray-75">企业微信绑定</div>-->
+<!--      <span>-->
+<!--        <icon-font :style="!bindEnterpriseData.sysUserId ? { color: '#9e9e9e' } : { color: '#0082EF' }" class="item-icon" type="icon-qiyeweixin3" />-->
+<!--        <span class="gray-75" style="margin-left: 12px">企业微信</span>-->
+<!--        <span class="gray-75" style="margin-left: 8px" v-if="bindEnterpriseData.realname">{{ '已绑定：' + bindEnterpriseData.realname }}</span>-->
+<!--        <span class="blue-e5 pointer" style="margin-left: 24px" @click="wechatEnterpriseBind">{{-->
+<!--          !bindEnterpriseData.sysUserId ? '绑定' : '解绑'-->
+<!--        }}</span>-->
+<!--      </span>-->
+<!--    </div>-->
+    <div class="account-row-item">
+      <div class="account-label gray-75">钉钉绑定</div>
+      <span>
+        <DingtalkCircleFilled :style="!bindDingData.sysUserId ? { color: '#9e9e9e' } : { color: '#007FFF' }" class="item-icon" />
+        <span class="gray-75" style="margin-left: 12px">钉钉</span>
+        <span class="gray-75" style="margin-left: 8px" v-if="bindDingData.realname">{{ '已绑定：' + bindDingData.realname }}</span>
+        <span class="blue-e5 pointer" style="margin-left: 24px" @click="dingDingBind">{{ !bindDingData.sysUserId ? '绑定' : '解绑' }}</span>
+      </span>
+    </div>
+    <div class="account-row-item">
+      <div class="account-label gray-75">账号绑定</div>
+      <span>
+        <WechatFilled :style="!bindWechatData.sysUserId ? { color: '#9e9e9e' } : { color: '#1ec563' }" class="item-icon" />
+        <span class="gray-75" style="margin-left: 12px">微信</span>
+        <span class="gray-75" style="margin-left: 8px" v-if="bindWechatData.realname">{{ '已绑定：' + bindWechatData.realname }}</span>
+        <span class="blue-e5 pointer" style="margin-left: 24px" @click="wechatBind">{{ !bindWechatData.sysUserId ? '绑定' : '解绑' }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="we-chat-ding-setting">
+  import { onMounted, ref, reactive, unref } from 'vue';
+  import { CollapseContainer } from '/@/components/Container';
+  import { bindThirdAppAccount, deleteThirdAccount, getThirdAccountByUserId } from './UserSetting.api';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useModal } from '/@/components/Modal';
+  import { DingtalkCircleFilled, WechatFilled } from '@ant-design/icons-vue';
+  import { IconFont } from '/@/utils/iconfont2';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Modal } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  const { prefixCls } = useDesign('j-user-tenant-setting-container');
+
+  const userStore = useUserStore();
+
+  //绑定微信的数据
+  const bindWechatData = ref<any>({});
+  //绑定钉钉的数据
+  const bindDingData = ref<any>({});
+  //绑定企业微信的数据
+  const bindEnterpriseData = ref<any>({});
+
+  const glob = useGlobSetting();
+  //第三方类型
+  const thirdType = ref('');
+  //第三方用户UUID
+  const thirdUserUuid = ref('');
+  //第三方详情
+  const thirdDetail = ref<any>({});
+  const { createMessage } = useMessage();
+  //windows对象，用于关闭窗口事件
+  const windowsIndex = ref<any>('');
+  //窗口监听事件
+  const receiveMessage = ref<any>('');
+  
+  /**
+   * 初始化钉钉和企业微信数据
+   */
+  async function initUserDetail() {
+    let values = await getThirdAccountByUserId({ thirdType: 'wechat_open,dingtalk,wechat_enterprise' });
+    bindWechatData.value = "";
+    bindDingData.value = "";
+    bindEnterpriseData.value = "";
+    if (values && values.result) {
+      let result = values.result;
+      for (let i = 0; i < result.length; i++) {
+        setThirdDetail(result[i]);
+      }
+    }
+  }
+
+  /**
+   * 企业微信绑定解绑事件
+   */
+  function wechatEnterpriseBind() {
+    console.log('企业微信绑定解绑事件');
+    let data = unref(bindEnterpriseData);
+    if (!data.sysUserId) {
+      onThirdLogin('wechat_enterprise');
+    }else{
+      deleteAccount({ sysUserId: data.sysUserId, id: data.id }, '企业微信');
+    }
+  }
+
+  /**
+   * 钉钉绑定解绑事件
+   */
+  function dingDingBind() {
+    let data = unref(bindDingData);
+    if (!data.sysUserId) {
+      onThirdLogin('dingtalk');
+    } else {
+      deleteAccount({ sysUserId: data.sysUserId, id: data.id }, '钉钉');
+    }
+    console.log('钉钉绑定解绑事件');
+  }
+
+  /**
+   * 微信绑定
+   */
+  function wechatBind() {
+    let data = unref(bindWechatData);
+    if (!data.sysUserId) {
+      onThirdLogin('wechat_open');
+    }else{
+      deleteAccount({ sysUserId: data.sysUserId, id: data.id }, '微信');
+    }
+  }
+
+  /**
+   * 第三方登录
+   * @param source
+   */
+  function onThirdLogin(source) {
+    let url = `${glob.uploadUrl}/sys/thirdLogin/render/${source}`;
+    //窗口为不空关闭
+    console.log("unref(windowsIndex) ::",unref(windowsIndex))
+    if(unref(windowsIndex)){
+      //确保只有一个窗口
+      windowsIndex.value.close();
+      //确保只有一个监听
+      window.removeEventListener('message', unref(receiveMessage),false);
+    }
+    
+    windowsIndex.value = window.open(
+      url,
+      `login ${source}`,
+      'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
+    );
+    thirdType.value = source;
+    receiveMessage.value = async function (event) {
+      let token = event.data;
+      if (typeof token === 'string') {
+        //如果是字符串类型 说明是token信息
+        if (token === '登录失败') {
+          cmsFailed();
+        } else if (token.includes('绑定手机号')) {
+          let strings = token.split(',');
+          thirdUserUuid.value = strings[1];
+          await bindThirdAccount();
+        }else{
+          if(token){
+            createMessage.warning('该敲敲云账号已被其它第三方账号绑定,请解绑或绑定其它敲敲云账号');
+          }
+        }
+      } else {
+        cmsFailed();
+      }
+      window.removeEventListener('message', unref(receiveMessage),false);
+      windowsIndex.value = "";
+    };
+    window.addEventListener('message', unref(receiveMessage), false);
+  }
+
+  /**
+   * 绑定当前用户
+   */
+  async function bindThirdAccount() {
+    if (!unref(thirdUserUuid)) {
+      cmsFailed();
+      return;
+    }
+    let params = { thirdUserUuid: unref(thirdUserUuid), thirdType: unref(thirdType) };
+    await bindThirdAppAccount(params)
+      .then((res) => {
+        if (res.success) {
+          if (res.result) {
+            setThirdDetail(res.result);
+          }
+        } else {
+          createMessage.warning(res.message);
+        }
+      })
+      .catch((res) => {
+        createMessage.warning(res.message);
+      });
+  }
+
+  /**
+   * 失败提示信息
+   */
+  function cmsFailed() {
+    createMessage.warning('第三方账号绑定异常');
+    return;
+  }
+
+  /**
+   * 设置第三方数据
+   * @param value
+   */
+  function setThirdDetail(value) {
+    let type = value.thirdType;
+    if (type == 'wechat_open') {
+      bindWechatData.value = value;
+    } else if (type == 'dingtalk') {
+      bindDingData.value = value;
+    } else if (type == 'wechat_enterprise') {
+      bindEnterpriseData.value = value;
+    }
+  }
+
+  /**
+   * 删除第三方信息表
+   * @param params
+   */
+  async function deleteAccount(params, text) {
+    Modal.confirm({
+      title: '解绑' + text,
+      content: '确定要解绑吗',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        await deleteThirdAccount(params).then((res) =>{
+          if(res.success){
+            initUserDetail();
+            createMessage.success(res.message)
+          }else{
+            createMessage.warning(res.message)
+          }
+        });
+      },
+    });
+  }
+
+  onMounted(() => {
+    initUserDetail();
+  });
+</script>
+<style lang="less">
+// 代码逻辑说明: [issues/563]暗色主题部分失效
+@prefix-cls: ~'@{namespace}-j-user-tenant-setting-container';
+.@{prefix-cls} {
+   padding: 30px 40px 0 20px;
+  .account-row-item {
+    align-items: center;
+    /*begin 兼容暗夜模式*/
+    border-bottom: 1px solid @border-color-base;
+    /*end 兼容暗夜模式*/
+    box-sizing: border-box;
+    display: flex;
+    height: 71px;
+    position: relative;
+  }
+
+  .account-label {
+    text-align: left;
+    width: 160px;
+  }
+
+  .gray-75 {
+    /*begin 兼容暗夜模式*/
+    color: @text-color !important;
+    /*end 兼容暗夜模式*/
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .blue-e5 {
+    color: #1e88e5;
+  }
+
+  .phone-margin {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+
+  .clearfix:before {
+    content: '';
+    display: table;
+  }
+
+  .my-account {
+    font-size: 17px;
+    font-weight: 700 !important;
+    /*begin 兼容暗夜模式*/
+    color: @text-color !important;
+    /*end 兼容暗夜模式*/
+    margin-bottom: 20px;
+  }
+  .item-icon {
+    font-size: 16px !important;
+  }
+}
+</style>
diff --git a/src/views/system/usersetting/commponents/UserAccountModal.vue b/src/views/system/usersetting/commponents/UserAccountModal.vue
new file mode 100644
index 0000000..1d187f4
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserAccountModal.vue
@@ -0,0 +1,69 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" width="500px"  :title="title" @ok="handleSubmit" destroyOnClose>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form';
+import { formSchema } from '../UserSetting.data';
+import { ref, unref, defineEmits } from 'vue';
+import { userEdit } from "../UserSetting.api";
+import { useUserStore } from "/@/store/modules/user";
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const userStore = useUserStore();
+const { createMessage } = useMessage();
+const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+const userDetail = ref<any>({});
+const isUpdate = ref<boolean>(false);
+const title = ref<string>('');
+const emit = defineEmits(['register','success']);
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  await resetFields();
+  setModalProps({ confirmLoading: false });
+  title.value = '编辑个人资料';
+  if(data.record.post){
+    data.record.post = data.record.post.split(",")
+  }
+  if(data.record.relTenantIds){
+    data.record.relTenantIds = data.record.relTenantIds.split(",")
+  }
+  userDetail.value = data.record;
+  // 代码逻辑说明: [QQYUN-3976]个人信息 编辑时，刚注册没有设置生日 生日显示有问题------------
+  if(data.record.birthday === '未填写'){
+    data.record.birthday = undefined;
+  }
+  await setFieldsValue({ ...data.record });
+});
+
+/**
+ * 数据修改和新增
+ */
+async function handleSubmit() {
+  try {
+    let values = await validate();
+    setModalProps({ confirmLoading: true });
+    //提交表单
+    await userEdit(values).then((res) =>{
+      if(res.success){
+        createMessage.success(res.message)
+      }else{
+        createMessage.warn(res.message)
+      }
+    });
+    //更新缓存
+    Object.assign(userDetail.value,values)
+    userStore.setUserInfo(unref(userDetail));
+    emit('success')
+    //关闭弹窗
+    closeModal();
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
diff --git a/src/views/system/usersetting/commponents/UserCancellationModal.vue b/src/views/system/usersetting/commponents/UserCancellationModal.vue
new file mode 100644
index 0000000..87e13be
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserCancellationModal.vue
@@ -0,0 +1,118 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="注销" @ok="handleSubmit" destroyOnClose :width="400">
+    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+      <div class="cancellation-tip">
+        <p style="color: red;margin-bottom: 10px !important;">注销后账号会保留10天，如需恢复请QQ管理员 </p>
+      </div>
+      <a-form-item label="" name="phone" class="cancellation-tip">
+        <div class="black font-size-13" style="margin-bottom: 6px">验证方式</div>
+        <div class="pass-padding">
+          <a-input placeholder="请输入手机号" v-model:value="formState.phone" />
+        </div>
+      </a-form-item>
+      <a-form-item label="" name="smscode" class="cancellation-tip">
+        <CountdownInput v-model:value="formState.smscode" placeholder="请输入6位验证码" :sendCodeApi="sendCodeApi" />
+      </a-form-item>
+    </a-form>
+  </BasicModal>
+</template>
+<script lang="ts" name="UserCancellationModal" setup>
+  import { ref, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Rule } from '/@/components/Form/index';
+  import { userLogOff } from '../UserSetting.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+  import { CountdownInput } from '/@/components/CountDown';
+  import { defHttp } from '@/utils/http/axios';
+
+  const { createMessage, createErrorModal } = useMessage();
+  //用户名
+  const username = ref<string>('');
+  const formRef = ref();
+  const formState = reactive({
+    smscode: '',
+    phone: '',
+  });
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    username.value = data.record.username;
+    Object.assign(formState, { password: '', smscode: '', phone: '' });
+  });
+  const userStore = useUserStore();
+  const validatorRules: Record<string, Rule[]> = {
+    phone: [{ required: true, message: '请输入手机号' }],
+    smscode: [{ required: true, message: '请输入6位验证码' }],
+  };
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await formRef.value.validateFields();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      values.username = unref(username);
+      await userLogOff(values).then((res) => {
+        if (res.success) {
+          createMessage.info({
+            content: '注销成功！',
+            duration: 1,
+          });
+          //返回登录页面
+          setTimeout(() => {
+            userStore.logout(true);
+          }, 1000);
+          //关闭弹窗
+          closeModal();
+        } else {
+          createMessage.warn(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 倒计时执行前的函数
+   */
+  function sendCodeApi() {
+    return new Promise((resolve, reject) => {
+      if(!formState.phone){
+        createErrorModal({ title: '错误提示', content: '请输入手机号！' });
+        reject();
+        return;
+      }
+      let params = { phone: formState.phone, username: username.value };
+      defHttp
+        .post({ url: '/sys/user/sendLogOffPhoneSms', params }, { isTransformResponse: false })
+        .then((res) => {
+          if (res.success) {
+            resolve(true);
+          } else {
+            createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+            reject();
+          }
+        })
+        .catch((res) => {
+          createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+          reject();
+        });
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .black {
+    color: @text-color;
+  }
+  .font-size-13 {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .cancellation-tip {
+    padding: 0 10px;
+  }
+</style>
diff --git a/src/views/system/usersetting/commponents/UserEmailModal.vue b/src/views/system/usersetting/commponents/UserEmailModal.vue
new file mode 100644
index 0000000..dd90b4c
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserEmailModal.vue
@@ -0,0 +1,73 @@
+<template>
+<BasicModal v-bind="$attrs" @register="registerModal" width="500px"  :title="title" :showCancelBtn="false" :showOkBtn="false">
+  <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+    <a-form-item name="email">
+      <a-input size="large" v-model:value="formState.email" placeholder="请输入邮箱" />
+    </a-form-item>
+    <a-form-item>
+      <a-button size="large" type="primary" block @click="updateEmail">
+        确认
+      </a-button>
+    </a-form-item>
+  </a-form>
+</BasicModal>
+</template>
+
+<script lang="ts" setup name="user-replace-email-modal">
+import BasicModal from "/@/components/Modal/src/BasicModal.vue";
+import { CountdownInput } from '/@/components/CountDown';
+import { useUserStore } from "/@/store/modules/user";
+import { useMessage } from "/@/hooks/web/useMessage";
+import { defineEmits, ref, reactive, toRaw } from "vue";
+import { useModalInner } from "/@/components/Modal";
+import { getCaptcha } from "/@/api/sys/user";
+import { SmsEnum } from "/@/views/sys/login/useLogin";
+import { Rule } from "/@/components/Form";
+import { rules } from "/@/utils/helper/validator";
+import { Form } from "ant-design-vue";
+import { updateMobile, userEdit } from "../UserSetting.api";
+import { duplicateCheck } from "/@/views/system/user/user.api";
+
+const userStore = useUserStore();
+const { createMessage } = useMessage();
+const formState = reactive<Record<string, any>>({
+  email:'',
+});
+const formRef = ref();
+
+const validatorRules: Record<string, Rule[]> = {
+  email: [{...rules.duplicateCheckRule("sys_user",'email',formState,{ label:'邮箱' })[0]},{ required: true, type: 'email', message: '邮箱格式不正确' }],
+};
+const useForm = Form.useForm;
+const title = ref<string>('');
+const emit = defineEmits(['register','success']);
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  formRef.value.resetFields();
+  formRef.value.clearValidate();
+  setModalProps({ confirmLoading: false });
+  title.value = '修改邮箱';
+  //赋值
+  data.record.smscode = '';
+  Object.assign(formState, data.record);
+});
+
+/**
+ * 更新邮箱
+ */
+async function updateEmail() {
+  await formRef.value.validateFields();
+  userEdit(formState).then((res) =>{
+    if(res.success){
+      createMessage.success("修改邮箱成功")
+      emit("success")
+      closeModal();
+    }else{
+      createMessage.warning(res.message)
+    }
+  })
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/usersetting/commponents/UserPasswordModal.vue b/src/views/system/usersetting/commponents/UserPasswordModal.vue
new file mode 100644
index 0000000..05be344
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserPasswordModal.vue
@@ -0,0 +1,142 @@
+<template>
+  <BasicModal v-bind="$attrs"  @register="registerModal" title="修改密码" @ok="handleSubmit" destroyOnClose :width="400">
+    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+      <a-form-item name="phone">
+        <div class="black font-size-13">验证手机号</div>
+        <div class="pass-padding">
+          <a-input placeholder="请输入手机号" v-model:value="formState.phone"/>
+        </div>
+      </a-form-item>
+      <a-form-item name="smscode">
+        <CountdownInput v-model:value="formState.smscode" placeholder="请输入6位验证码" :sendCodeApi="sendCodeApi" />
+      </a-form-item>
+      <a-form-item name="password">
+        <span class="black font-size-13">新密码</span>
+        <div class="pass-padding">
+          <a-input-password v-model:value="formState.password" placeholder="新密码" autocomplete="new-password"/>
+        </div>
+        <span class="gray-9e font-size-13">8-20位，需包含字母和数字</span>
+      </a-form-item>
+    </a-form>
+  </BasicModal>
+</template>
+<script lang="ts" name="user-pass-word-modal" setup>
+  import { ref, computed, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Rule } from '/@/components/Form/index';
+  import { updateUserPassword } from '../UserSetting.api';
+  import { useMessage } from "/@/hooks/web/useMessage";
+  import { useUserStore, useUserStoreWithOut } from "/@/store/modules/user";
+  import { getCaptcha } from "@/api/sys/user";
+  import { SmsEnum } from "@/views/sys/login/useLogin";
+  import { CountdownInput } from '/@/components/CountDown';
+  import { defHttp } from "@/utils/http/axios";
+
+  const { createMessage, createErrorModal } = useMessage();
+  //用户名
+  const username = ref<string>('')
+  const formRef = ref();
+  const formState = reactive({
+    oldpassword:'',
+    password:'',
+    smscode:'',
+    phone:'',
+  });
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    username.value = data.record.username
+    Object.assign(formState, { password:'', smscode:'', phone:'',})
+  });
+  const userStore = useUserStore();
+  const validatorRules: Record<string, Rule[]> = {
+    password: [{ required: true, validator:checkPassword},{ pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/,message:'8-20位，需包含字母和数字'}],
+    phone: [{ required: true, message: '请输入手机号' }],
+    smscode: [{ required: true, message: '请输入6位验证码' }],
+  };
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await formRef.value.validateFields();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      values.username = unref(username);
+      await updateUserPassword(values).then((res) =>{
+        if(res.success){
+          createMessage.info({
+            content:'密码修改成功，请重新登录！3s后自动退出登录',
+            duration: 3
+          })
+          //3s后返回登录页面
+          setTimeout(()=>{
+            userStore.logout(true);
+          },3000)
+          //关闭弹窗
+          closeModal();
+        }else{
+          createMessage.warn(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 验证新密码是否为空
+   */
+  function checkPassword(_rule: Rule, value: string) {
+    if(value === ''){
+      return Promise.reject('请输入新密码');
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * 倒计时执行前的函数
+   */
+  function sendCodeApi() {
+    return new Promise((resolve, reject) => {
+      let params = { mobile: formState.phone };
+      defHttp.post({ url: "/sys/sendChangePwdSms", params }, { isTransformResponse: false }).then((res) => {
+        if (res.success) {
+          resolve(true);
+        } else {
+          createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+          reject();
+        }
+      }).catch((res)=>{
+        createErrorModal({ title: '错误提示', content: res.message || '未知问题' });
+        reject();
+      });
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .black {
+    color: @text-color;
+  }
+  .font-size-13 {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .gray-9e {
+    color: #9e9e9e;
+  }
+  .float-left {
+    float: left;
+  }
+  .pass-padding {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .antd-modal-form {
+    padding: 10px 24px 10px 24px;
+  }
+  :deep(.ant-form-item){
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/system/usersetting/commponents/UserPasswordNotBindPhone.vue b/src/views/system/usersetting/commponents/UserPasswordNotBindPhone.vue
new file mode 100644
index 0000000..2ed2a47
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserPasswordNotBindPhone.vue
@@ -0,0 +1,115 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="修改密码" @ok="handleSubmit" destroyOnClose :width="400">
+    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+      <a-form-item name="oldPassword">
+        <div class="black font-size-13">旧密码</div>
+        <div class="pass-padding">
+          <a-input-password placeholder="请输入旧密码" v-model:value="formState.oldPassword" />
+        </div>
+      </a-form-item>
+      <a-form-item name="password">
+        <span class="black font-size-13">新密码</span>
+        <div class="pass-padding">
+          <a-input-password v-model:value="formState.password" placeholder="新密码" autocomplete="new-password" />
+        </div>
+        <span class="gray-9e font-size-13">8-20位，需包含字母和数字</span>
+      </a-form-item>
+    </a-form>
+  </BasicModal>
+</template>
+<script lang="ts" name="user-pass-word-modal" setup>
+  import { ref, unref, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Rule } from '@/components/Form';
+  import { updatePasswordNotBindPhone } from '../UserSetting.api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useUserStore } from '/@/store/modules/user';
+
+  const { createMessage } = useMessage();
+  //用户名
+  const username = ref<string>('');
+  const formRef = ref();
+  const formState = reactive({
+    oldPassword: '',
+    password: '',
+  });
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    username.value = data.record.username;
+    Object.assign(formState, { password: '', oldPassword: '' });
+  });
+  const userStore = useUserStore();
+  const validatorRules: Record<string, Rule[]> = {
+    oldPassword: [{ required: true, message: '请输入旧密码' }],
+    password: [
+      { required: true, validator: checkPassword },
+      { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/, message: '8-20位，需包含字母和数字' },
+    ],
+  };
+
+  //表单提交事件
+  async function handleSubmit() {
+    try {
+      let values = await formRef.value.validateFields();
+      setModalProps({ confirmLoading: true });
+      //提交表单
+      values.username = unref(username);
+      await updatePasswordNotBindPhone(values).then((res) => {
+        if (res.success) {
+          createMessage.info({
+            content: '密码修改成功，请重新登录！3s后自动退出登录',
+            duration: 3,
+          });
+          //3s后返回登录页面
+          setTimeout(() => {
+            userStore.logout(true);
+          }, 3000);
+          //关闭弹窗
+          closeModal();
+        } else {
+          createMessage.warn(res.message);
+        }
+      });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+  /**
+   * 验证新密码是否为空
+   */
+  function checkPassword(_rule: Rule, value: string) {
+    if (value === '') {
+      return Promise.reject('请输入新密码');
+    }
+    return Promise.resolve();
+  }
+</script>
+<style lang="less" scoped>
+  .black {
+    color: @text-color;
+  }
+  .font-size-13 {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  .gray-9e {
+    color: #9e9e9e;
+  }
+  .float-left {
+    float: left;
+  }
+  .pass-padding {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .antd-modal-form {
+    padding: 10px 24px 10px 24px;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/system/usersetting/commponents/UserPhoneModal.vue b/src/views/system/usersetting/commponents/UserPhoneModal.vue
new file mode 100644
index 0000000..b772511
--- /dev/null
+++ b/src/views/system/usersetting/commponents/UserPhoneModal.vue
@@ -0,0 +1,250 @@
+<template>
+<BasicModal v-bind="$attrs" @register="registerModal" width="500px"  :title="title" :showCancelBtn="false" :showOkBtn="false">
+  <a-form v-if="type==='updatePhone'" class="antd-modal-form" ref="updateFormRef" :model="updateFormState"
+          :rules="updateValidatorRules">
+    <div v-if="current === 0">
+      <a-form-item name="phoneText">
+        <span class="black font-size-13">原手机号</span>
+        <div class="phone-padding">
+          <span>{{ updateFormState.phoneText }}</span>
+        </div>
+      </a-form-item>
+      <a-form-item name="smscode">
+        <span class="black font-size-13">验证码</span>
+        <CountdownInput class="phone-padding" size="large" v-model:value="updateFormState.smscode" placeholder="输入6位验证码"
+                        :sendCodeApi="()=>updateSendCodeApi('verifyOriginalPhone')"/>
+      </a-form-item>
+      <a-form-item>
+        <a-button size="large" type="primary" block @click="nextStepClick">
+          下一步
+        </a-button>
+      </a-form-item>
+    </div>
+    <div v-else-if="current === 1">
+      <a-form-item name="newPhone">
+        <span class="black font-size-13">新手机号</span>
+        <div class="phone-padding">
+          <a-input v-model:value="updateFormState.newPhone" placeholder="请输入新手机号"/>
+        </div>
+      </a-form-item>
+      <a-form-item name="smscode">
+        <span class="black font-size-13">验证码</span>
+        <CountdownInput class="phone-padding" size="large" v-model:value="updateFormState.smscode" placeholder="输入6位验证码"
+                        :sendCodeApi="()=>updateSendCodeApi('updatePhone')"/>
+      </a-form-item>
+      <a-form-item>
+        <a-button size="large" type="primary" block @click="finishedClick">
+          完成
+        </a-button>
+      </a-form-item>
+    </div>
+  </a-form>
+
+  <a-form v-else-if="type==='bindPhone'" class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
+    <a-form-item  name="phone">
+      <a-input size="large" v-model:value="formState.phone" placeholder="请输入手机号" />
+    </a-form-item>
+    <a-form-item name="smscode">
+      <CountdownInput size="large" v-model:value="formState.smscode" placeholder="输入6位验证码" :sendCodeApi="sendCodeApi" />
+    </a-form-item>
+    <a-form-item>
+      <a-button size="large" type="primary" block @click="updatePhone">
+        确认
+      </a-button>
+    </a-form-item>
+  </a-form>
+</BasicModal>
+</template>
+
+<script lang="ts" setup name="user-replace-phone-modal">
+import BasicModal from "/@/components/Modal/src/BasicModal.vue";
+import { CountdownInput } from '/@/components/CountDown';
+import { useUserStore } from "/@/store/modules/user";
+import { useMessage } from "/@/hooks/web/useMessage";
+import { defineEmits, ref, reactive, toRaw } from "vue";
+import { useModalInner } from "/@/components/Modal";
+import { getCaptcha } from "/@/api/sys/user";
+import { SmsEnum } from "/@/views/sys/login/useLogin";
+import { Rule } from "/@/components/Form";
+import { rules } from "/@/utils/helper/validator";
+import { Form } from "ant-design-vue";
+import { updateMobile, changePhone } from "../UserSetting.api";
+import { duplicateCheck } from "/@/views/system/user/user.api";
+import {defHttp} from "@/utils/http/axios";
+import { ExceptionEnum } from "@/enums/exceptionEnum";
+
+const userStore = useUserStore();
+const { createMessage } = useMessage();
+const formState = reactive<Record<string, any>>({
+  phone:'',
+  smscode:''
+});
+
+//修改手机号
+const updateFormState = reactive<Record<string, any>>({
+  phone:'',
+  smscode:'',
+  newPhone:'',
+  phoneText:'',
+  newSmsCode:''
+});
+
+const formRef = ref();
+const userData = ref<any>({})
+
+const validatorRules: Record<string, Rule[]> = {
+  phone: [{...rules.duplicateCheckRule("sys_user",'phone',formState,{ label:'手机号' })[0]},{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' }],
+  smscode: [{ required: true,message:'请输入验证码' }],
+};
+
+//修改手机号验证规则
+const updateValidatorRules: Record<string, Rule[]> = {
+  newPhone: [{...rules.duplicateCheckRule("sys_user",'phone',formState,{ label:'手机号' })[0]},{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误' }],
+  smscode: [{ required: true,message:'请输入验证码' }],
+  newSmsCode: [{ required: true,message:'请输入验证码' }],
+};
+const useForm = Form.useForm;
+const title = ref<string>('');
+const emit = defineEmits(['register','success']);
+//修改手机号还是绑定手机号
+const type = ref<string>('updatePhone');
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  setModalProps({ confirmLoading: false });
+  if(data.record.phone){
+    updateFormState.phone = "";
+    updateFormState.smscode = "";
+    current.value = 0;
+    title.value = '修改手机号';
+    type.value = "updatePhone";
+    Object.assign(updateFormState, data.record);
+  }else{
+    title.value = '绑定手机号';
+    type.value = "bindPhone"
+    //赋值
+    data.record.smscode = '';
+    Object.assign(formState, data.record);
+    setTimeout(()=>{
+      formRef.value.resetFields();
+      formRef.value.clearValidate();
+    },300)
+  }
+  userData.value = data.record;
+});
+
+/**
+ * 倒计时执行前的函数
+ */
+function sendCodeApi() {
+  return getCaptcha({ mobile: formState.phone, smsmode: SmsEnum.REGISTER });
+}
+
+/**
+ * 倒计时执行前的函数
+ * 
+ * @param type 类型 verifyOriginalPhone 验证员手机号 updatePhone 修改手机号
+ */
+function updateSendCodeApi(type) {
+  let phone = ""
+  if(current.value === 0){
+    phone = updateFormState.phone;
+  }else{
+    phone = updateFormState.newPhone;
+  }
+  let params = { phone: phone,  type: type };
+  return new Promise((resolve, reject) => {
+    defHttp.post({ url: "/sys/user/sendChangePhoneSms", params }, { isTransformResponse: false }).then((res) => {
+      console.log(res);
+      if (res.success) {
+        resolve(true);
+      } else {
+        // 代码逻辑说明: 【QQYUN-9005】同一个IP，1分钟超过5次短信，则提示需要验证码---
+        if(res.code != ExceptionEnum.PHONE_SMS_FAIL_CODE){
+          createMessage.error(res.message || '未知问题');
+          reject();
+        }
+        reject(res);
+      }
+    }).catch((res)=>{
+      createMessage.error(res.message || '未知问题');
+      reject();
+    });
+  });
+}
+
+/**
+ * 更新手机号
+ */
+async function updatePhone() {
+  await formRef.value.validateFields();
+  updateMobile(formState).then((res) =>{
+    if(res.success){
+      createMessage.success(type.value === "updatePhone"?"修改手机号成功":"绑定手机号成功")
+      emit("success")
+      closeModal();
+    }else{
+      createMessage.warning(res.message)
+    }
+  })
+}
+  //走到第几步
+  const current = ref<number>(0);
+  const updateFormRef = ref();
+
+  /**
+   * 下一步点击事件
+   */
+  async function nextStepClick() {
+    let params = { phone: updateFormState.phone, smscode: updateFormState.smscode, type: 'verifyOriginalPhone' };
+    changeAndVerifyPhone(params,1)
+  }
+
+  /**
+   * 完成
+   */
+  function finishedClick() {
+    changeAndVerifyPhone({ phone: updateFormState.phone, newPhone: updateFormState.newPhone, smscode: updateFormState.smscode, type: 'updatePhone' },0);
+  }
+
+  /**
+   * 修改并验证手机号
+   * @param params
+   * @param index
+   */
+  async function changeAndVerifyPhone(params, index) {
+    await updateFormRef.value.validateFields();
+    changePhone(params).then((res)=>{
+      if(res.success){
+        current.value = index;
+        if(index == 0){
+          createMessage.success(res.message);
+          emit("success");
+          closeModal();
+        }
+        updateFormState.smscode = "";
+      }else{
+        createMessage.warn(res.message);
+      }
+    }).catch((res) =>{
+      createMessage.warn(res.message);
+    })
+  }
+</script>
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 10px 24px 10px 24px;
+  }
+ .black {
+   color: #000000;
+ }
+ .font-size-13 {
+   font-size: 13px;
+   line-height: 15px;
+ }
+  .phone-padding {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  :deep(.ant-form-item){
+    margin-bottom: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/system/usersetting/icons/anquan1.png b/src/views/system/usersetting/icons/anquan1.png
new file mode 100644
index 0000000..c41ee33
Binary files /dev/null and b/src/views/system/usersetting/icons/anquan1.png differ
diff --git a/src/views/system/usersetting/icons/anquan2.png b/src/views/system/usersetting/icons/anquan2.png
new file mode 100644
index 0000000..69b4bb9
Binary files /dev/null and b/src/views/system/usersetting/icons/anquan2.png differ
diff --git a/src/views/system/usersetting/icons/app1.png b/src/views/system/usersetting/icons/app1.png
new file mode 100644
index 0000000..157ef45
Binary files /dev/null and b/src/views/system/usersetting/icons/app1.png differ
diff --git a/src/views/system/usersetting/icons/app2.png b/src/views/system/usersetting/icons/app2.png
new file mode 100644
index 0000000..c1e2805
Binary files /dev/null and b/src/views/system/usersetting/icons/app2.png differ
diff --git a/src/views/system/usersetting/icons/geren1.png b/src/views/system/usersetting/icons/geren1.png
new file mode 100644
index 0000000..21c3a1d
Binary files /dev/null and b/src/views/system/usersetting/icons/geren1.png differ
diff --git a/src/views/system/usersetting/icons/geren2.png b/src/views/system/usersetting/icons/geren2.png
new file mode 100644
index 0000000..18097fd
Binary files /dev/null and b/src/views/system/usersetting/icons/geren2.png differ
diff --git a/src/views/system/usersetting/icons/zuhu1.png b/src/views/system/usersetting/icons/zuhu1.png
new file mode 100644
index 0000000..7e977e3
Binary files /dev/null and b/src/views/system/usersetting/icons/zuhu1.png differ
diff --git a/src/views/system/usersetting/icons/zuhu2.png b/src/views/system/usersetting/icons/zuhu2.png
new file mode 100644
index 0000000..75aecd6
Binary files /dev/null and b/src/views/system/usersetting/icons/zuhu2.png differ
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 0000000..66baee5
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,71 @@
+module.exports = {
+  root: true,
+  plugins: ['stylelint-order'],
+  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['v-deep'],
+        ignorePseudoElements: ['deep'],
+      },
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin',
+        ],
+      },
+    ],
+    'no-empty-source': null,
+    'named-grid-areas-no-invalid': null,
+    'unicode-bom': 'never',
+    'no-descending-specificity': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    // 'declaration-block-trailing-semicolon': 'always',
+    'rule-empty-line-before': [
+      'always',
+      {
+        ignore: ['after-comment', 'first-nested'],
+      },
+    ],
+    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
+    'order/order': [
+      [
+        'dollar-variables',
+        'custom-properties',
+        'at-rules',
+        'declarations',
+        {
+          type: 'at-rule',
+          name: 'supports',
+        },
+        {
+          type: 'at-rule',
+          name: 'media',
+        },
+        'rules',
+      ],
+      { severity: 'warning' },
+    ],
+  },
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+};
diff --git a/tests/__mocks__/fileMock.ts b/tests/__mocks__/fileMock.ts
new file mode 100644
index 0000000..08d725c
--- /dev/null
+++ b/tests/__mocks__/fileMock.ts
@@ -0,0 +1 @@
+export default '';
diff --git a/tests/__mocks__/styleMock.ts b/tests/__mocks__/styleMock.ts
new file mode 100644
index 0000000..ff8b4c5
--- /dev/null
+++ b/tests/__mocks__/styleMock.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/tests/__mocks__/workerMock.ts b/tests/__mocks__/workerMock.ts
new file mode 100644
index 0000000..0b8b671
--- /dev/null
+++ b/tests/__mocks__/workerMock.ts
@@ -0,0 +1,5 @@
+export default jest.fn().mockImplementation(() => ({
+  postMessage: jest.fn(),
+  onmessage: jest.fn(),
+  onerror: jest.fn(),
+}));
diff --git a/tests/server/README.md b/tests/server/README.md
new file mode 100644
index 0000000..33db6bf
--- /dev/null
+++ b/tests/server/README.md
@@ -0,0 +1,15 @@
+# Test Server
+
+It is used to start the test interface service, which can test the upload, websocket, login and other interfaces.
+
+## Usage
+
+```bash
+
+cd ./test/server
+
+yarn
+
+yarn start
+
+```
diff --git a/tests/server/controller/FileController.ts b/tests/server/controller/FileController.ts
new file mode 100644
index 0000000..cf6d90d
--- /dev/null
+++ b/tests/server/controller/FileController.ts
@@ -0,0 +1,18 @@
+import FileService from '../service/FileService';
+
+class FileController {
+  private service: FileService = new FileService();
+
+  upload = async (ctx) => {
+    const files = ctx.request.files.file;
+    console.log(files);
+
+    if (files.length === undefined) {
+      this.service.upload(ctx, files, false);
+    } else {
+      this.service.upload(ctx, files, true);
+    }
+  };
+}
+
+export default new FileController();
diff --git a/tests/server/controller/UserController.ts b/tests/server/controller/UserController.ts
new file mode 100644
index 0000000..db815c2
--- /dev/null
+++ b/tests/server/controller/UserController.ts
@@ -0,0 +1,15 @@
+import UserService from '../service/UserService';
+
+class UserController {
+  private service: UserService = new UserService();
+
+  login = async (ctx) => {
+    ctx.body = await this.service.login();
+  };
+
+  getUserInfoById = async (ctx) => {
+    ctx.body = await this.service.getUserInfoById();
+  };
+}
+
+export default new UserController();
diff --git a/tests/server/ecosystem.config.js b/tests/server/ecosystem.config.js
new file mode 100644
index 0000000..a31e457
--- /dev/null
+++ b/tests/server/ecosystem.config.js
@@ -0,0 +1,18 @@
+const { name } = require('./package.json');
+const path = require('path');
+
+module.exports = {
+  apps: [
+    {
+      name,
+      script: path.resolve(__dirname, './dist/index.js'),
+      instances: require('os').cpus().length,
+      autorestart: true,
+      watch: true,
+      env_production: {
+        NODE_ENV: 'production',
+        PORT: 8080,
+      },
+    },
+  ],
+};
diff --git a/tests/server/index.ts b/tests/server/index.ts
new file mode 100644
index 0000000..d0b0931
--- /dev/null
+++ b/tests/server/index.ts
@@ -0,0 +1,63 @@
+import Koa from 'koa';
+import path from 'path';
+import Router from 'koa-router';
+import body from 'koa-body';
+import cors from 'koa2-cors';
+import koaStatic from 'koa-static';
+import websockify from 'koa-websocket';
+import route from 'koa-route';
+
+import AppRoutes from './routes';
+
+const PORT = 3300;
+
+const app = websockify(new Koa());
+
+app.ws.use(function (ctx, next) {
+  ctx.websocket.send('connection succeeded!');
+  return next(ctx);
+});
+
+app.ws.use(
+  route.all('/test', function (ctx) {
+    // ctx.websocket.send('Hello World');
+    ctx.websocket.on('message', function (message) {
+      // do something with the message from client
+
+      if (message !== 'ping') {
+        const data = JSON.stringify({
+          id: Math.ceil(Math.random() * 1000),
+          time: new Date().getTime(),
+          res: `${message}`,
+        });
+        ctx.websocket.send(data);
+      }
+      console.log(message);
+    });
+  })
+);
+
+const router = new Router();
+
+// router
+AppRoutes.forEach((route) => router[route.method](route.path, route.action));
+
+app.use(cors());
+app.use(
+  body({
+    encoding: 'gzip',
+    multipart: true,
+    formidable: {
+      // uploadDir: path.join(__dirname, '/upload/'), // 设置文件上传目录
+      keepExtensions: true,
+      maxFieldsSize: 20 * 1024 * 1024,
+    },
+  })
+);
+app.use(router.routes());
+app.use(router.allowedMethods());
+app.use(koaStatic(path.join(__dirname)));
+
+app.listen(PORT, () => {
+  console.log(`Application started successfully: http://localhost:${PORT}`);
+});
diff --git a/tests/server/nodemon.json b/tests/server/nodemon.json
new file mode 100644
index 0000000..59fa5af
--- /dev/null
+++ b/tests/server/nodemon.json
@@ -0,0 +1,8 @@
+{
+  "watch": ["src"],
+  "ext": "ts",
+  "exec": "ts-node -r tsconfig-paths/register index.ts",
+  "events": {
+    "restart": "clear"
+  }
+}
diff --git a/tests/server/package.json b/tests/server/package.json
new file mode 100644
index 0000000..d530d59
--- /dev/null
+++ b/tests/server/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "nodemon",
+    "build": "rimraf ./dist && tsup ./index.ts --dts --format cjs,esm  ",
+    "prod": "npx pm2 start ecosystem.config.js --env production",
+    "restart": "pm2 restart ecosystem.config.js --env production",
+    "stop": "npx pm2 stop ecosystem.config.js"
+  },
+  "dependencies": {
+    "fs-extra": "^10.0.0",
+    "koa": "^2.13.1",
+    "koa-body": "^4.2.0",
+    "koa-bodyparser": "^4.3.0",
+    "koa-route": "^3.2.0",
+    "koa-router": "^10.1.1",
+    "koa-static": "^5.0.0",
+    "koa-websocket": "^6.0.0",
+    "koa2-cors": "^2.0.6"
+  },
+  "devDependencies": {
+    "@types/koa": "^2.13.4",
+    "@types/koa-bodyparser": "^5.0.2",
+    "@types/koa-router": "^7.4.4",
+    "@types/node": "^16.7.1",
+    "nodemon": "^2.0.12",
+    "pm2": "^5.1.1",
+    "rimraf": "^3.0.2",
+    "ts-node": "^10.2.1",
+    "tsconfig-paths": "^3.11.0",
+    "tsup": "^4.14.0",
+    "typescript": "^4.3.5"
+  }
+}
diff --git a/tests/server/routes.ts b/tests/server/routes.ts
new file mode 100644
index 0000000..7fe6475
--- /dev/null
+++ b/tests/server/routes.ts
@@ -0,0 +1,23 @@
+import UserController from './controller/UserController';
+import FileController from './controller/FileController';
+
+export default [
+  // user
+  {
+    path: '/login',
+    method: 'post',
+    action: UserController.login,
+  },
+  {
+    path: '/getUserInfoById',
+    method: 'get',
+    action: UserController.getUserInfoById,
+  },
+
+  // file
+  {
+    path: '/upload',
+    method: 'post',
+    action: FileController.upload,
+  },
+];
diff --git a/tests/server/service/FileService.ts b/tests/server/service/FileService.ts
new file mode 100644
index 0000000..dfd378f
--- /dev/null
+++ b/tests/server/service/FileService.ts
@@ -0,0 +1,54 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+const uploadUrl = 'http://localhost:3300/static/upload';
+const filePath = path.join(__dirname, '../static/upload/');
+
+fs.ensureDir(filePath);
+export default class UserService {
+  async upload(ctx, files, isMultiple) {
+    let fileReader, fileResource, writeStream;
+
+    const fileFunc = function (file) {
+      fileReader = fs.createReadStream(file.path);
+      fileResource = filePath + `/${file.name}`;
+      console.log(fileResource);
+
+      writeStream = fs.createWriteStream(fileResource);
+      fileReader.pipe(writeStream);
+    };
+
+    const returnFunc = function (flag) {
+      if (flag) {
+        let url = '';
+        for (let i = 0; i < files.length; i++) {
+          url += uploadUrl + `/${files[i].name},`;
+        }
+        url = url.replace(/,$/gi, '');
+        ctx.body = {
+          url: url,
+          code: 0,
+          message: 'upload Success!',
+        };
+      } else {
+        ctx.body = {
+          url: uploadUrl + `/${files.name}`,
+          code: 0,
+          message: 'upload Success!',
+        };
+      }
+    };
+    console.log(isMultiple, files.length);
+
+    if (isMultiple) {
+      for (let i = 0; i < files.length; i++) {
+        const f1 = files[i];
+        fileFunc(f1);
+      }
+    } else {
+      fileFunc(files);
+    }
+    fs.ensureDir(filePath);
+    returnFunc(isMultiple);
+  }
+}
diff --git a/tests/server/service/UserService.ts b/tests/server/service/UserService.ts
new file mode 100644
index 0000000..da61628
--- /dev/null
+++ b/tests/server/service/UserService.ts
@@ -0,0 +1,25 @@
+import { Result } from '../utils';
+
+const fakeUserInfo = {
+  userId: '1',
+  username: 'Jeecg',
+  realname: 'Jeecg Admin',
+  desc: 'manager',
+  password: '123456',
+  token: 'fakeToken1',
+  roles: [
+    {
+      roleName: 'Super Admin',
+      value: 'super',
+    },
+  ],
+};
+export default class UserService {
+  async login() {
+    return Result.success(fakeUserInfo);
+  }
+
+  async getUserInfoById() {
+    return Result.success(fakeUserInfo);
+  }
+}
diff --git a/tests/server/tsconfig.json b/tests/server/tsconfig.json
new file mode 100644
index 0000000..76203ed
--- /dev/null
+++ b/tests/server/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": false,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es6",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "baseUrl": "./"
+  },
+  "exclude": ["node_modules"]
+}
diff --git a/tests/server/utils.ts b/tests/server/utils.ts
new file mode 100644
index 0000000..7fd0b3f
--- /dev/null
+++ b/tests/server/utils.ts
@@ -0,0 +1,9 @@
+export class Result {
+  static success(data: any) {
+    return {
+      code: 0,
+      success: true,
+      result: data,
+    };
+  }
+}
diff --git a/tests/test.spec.ts b/tests/test.spec.ts
new file mode 100644
index 0000000..a8b4454
--- /dev/null
+++ b/tests/test.spec.ts
@@ -0,0 +1,16 @@
+// import { mount } from '@vue/test-utils';
+// import { Button } from '/@/components/Button';
+
+test('if jest is normal.', async () => {
+  expect('jest').toEqual('jest');
+});
+
+// TODO Vue component testing is not supported temporarily
+// test('is a Vue instance.', async () => {
+//   const wrapper = mount(Button, {
+//     slots: {
+//       default: 'Button text',
+//     },
+//   });
+//   expect(wrapper.html()).toContain('Button text');
+// });
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..18b6cdf
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "strictFunctionTypes": false,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "allowJs": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": ["dom", "esnext"],
+    "types": ["vite/client", "jest"],
+    "typeRoots": ["./node_modules/@types/", "./types","./node_modules"],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "paths": {
+      "@rys-fe/vite-plugin-theme/es/client": ["build/vite/plugin/theme-plugin/client/client.ts"],
+      "@rys-fe/vite-plugin-theme/es/colorUtils": ["build/vite/plugin/theme-plugin/client/colorUtils.ts"],
+      "@rys-fe/vite-plugin-theme": ["build/vite/plugin/theme-plugin/index.ts"],
+      "/@/*": ["src/*"],
+      "/#/*": ["types/*"],
+      "@/*": ["src/*"],
+      "#/*": ["types/*"],
+      "~icons/*": ["node_modules/unplugin-icons/types/*"]
+    }
+  },
+  "include": [
+    "tests/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts",
+    "build/**/*.ts",
+    "build/**/*.d.ts",
+    "mock/**/*.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
+}
diff --git a/types/axios.d.ts b/types/axios.d.ts
new file mode 100644
index 0000000..c64a764
--- /dev/null
+++ b/types/axios.d.ts
@@ -0,0 +1,55 @@
+export type ErrorMessageMode = 'none' | 'modal' | 'message' | undefined;
+export type SuccessMessageMode = 'none' | 'success' | 'error' | undefined;
+
+export interface RequestOptions {
+  // 将请求参数拼接到url
+  joinParamsToUrl?: boolean;
+  // 格式化请求参数时间
+  formatDate?: boolean;
+  // 是否处理请求结果
+  isTransformResponse?: boolean;
+  // 是否返回本地响应头,需要获取响应头时使用此属性
+  isReturnNativeResponse?: boolean;
+  // 默认将prefix 添加到url
+  joinPrefix?: boolean;
+  // 接口地址，如果保留为空，则使用默认值
+  apiUrl?: string;
+  // 请求拼接路径
+  urlPrefix?: string;
+  // 错误消息提示类型
+  errorMessageMode?: ErrorMessageMode;
+  // 成功消息提示类型
+  successMessageMode?: SuccessMessageMode;
+  // 是否添加时间戳
+  joinTime?: boolean;
+  ignoreCancelToken?: boolean;
+  //是否在标头中发送令牌
+  withToken?: boolean;
+}
+
+export interface Result<T = any> {
+  code: number;
+  type: 'success' | 'error' | 'warning';
+  message: string;
+  result: T;
+}
+
+//文件上传参数
+export interface UploadFileParams {
+  // 其他参数
+  data?: Recordable;
+  // 文件参数接口字段名
+  name?: string;
+  // 文件
+  file: File | Blob;
+  // 文件名
+  filename?: string;
+  [key: string]: any;
+}
+//文件返回参数
+export interface UploadFileCallBack {
+  // 成功回调方法
+  success?: any;
+  // 是否返回响应头,需要获取响应头时使用此属性
+  isReturnResponse?: boolean;
+}
diff --git a/types/config.d.ts b/types/config.d.ts
new file mode 100644
index 0000000..21d7f95
--- /dev/null
+++ b/types/config.d.ts
@@ -0,0 +1,207 @@
+import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
+import {
+  ContentEnum,
+  PermissionModeEnum,
+  ThemeEnum,
+  RouterTransitionEnum,
+  SettingButtonPositionEnum,
+  SessionTimeoutProcessingEnum,
+} from '/@/enums/appEnum';
+
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
+
+export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
+
+export interface MenuSetting {
+  bgColor: string;
+  fixed: boolean;
+  collapsed: boolean;
+  canDrag: boolean;
+  show: boolean;
+  hidden: boolean;
+  split: boolean;
+  menuWidth: number;
+  mode: MenuModeEnum;
+  type: MenuTypeEnum;
+  theme: ThemeEnum;
+  // 代码逻辑说明: 【QQYUN-8922】左侧导航栏文字颜色调整区分彩色和暗黑
+  isThemeBright: boolean;
+  topMenuAlign: 'start' | 'center' | 'end';
+  trigger: TriggerEnum;
+  accordion: boolean;
+  closeMixSidebarOnChange: boolean;
+  collapsedShowTitle: boolean;
+  mixSideTrigger: MixSidebarTriggerEnum;
+  mixSideFixed: boolean;
+}
+
+export interface MultiTabsSetting {
+  cache: boolean;
+  show: boolean;
+  showQuick: boolean;
+  canDrag: boolean;
+  showRedo: boolean;
+  showFold: boolean;
+  theme: string;
+}
+
+export interface HeaderSetting {
+  bgColor: string;
+  fixed: boolean;
+  show: boolean;
+  theme: ThemeEnum;
+  // 是否显示全屏按钮
+  showFullScreen: boolean;
+  // 是否显示锁屏按钮
+  useLockPage: boolean;
+  // 是否显示文档连接
+  showDoc: boolean;
+  // 是否显示消息图标
+  showNotice: boolean;
+  // 是否显示搜索按钮
+  showSearch: boolean;
+}
+
+export interface LocaleSetting {
+  // 是否显示国际化切换按钮
+  showPicker: boolean;
+  // Current language
+  locale: LocaleType;
+  // default language
+  fallback: LocaleType;
+  // available Locales
+  availableLocales: LocaleType[];
+}
+
+export interface TransitionSetting {
+  //  Whether to open the page switching animation
+  enable: boolean;
+  // Route basic switching animation
+  basicTransition: RouterTransitionEnum;
+  // Whether to open page switching loading
+  openPageLoading: boolean;
+  // Whether to open the top progress bar
+  openNProgress: boolean;
+}
+
+export interface ProjectConfig {
+  // Storage location of permission related information
+  permissionCacheType: CacheTypeEnum;
+  // Whether to show the configuration button
+  showSettingButton: boolean;
+  // Whether to show the theme switch button
+  showDarkModeToggle: boolean;
+  // Configure where the button is displayed
+  settingButtonPosition: SettingButtonPositionEnum;
+  // Permission mode
+  permissionMode: PermissionModeEnum;
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum;
+  // Website gray mode, open for possible mourning dates
+  grayMode: boolean;
+  // Whether to turn on the color weak mode
+  colorWeak: boolean;
+  // Theme color
+  themeColor: string;
+  // Theme Mode
+  themeMode: string;
+
+  // The main interface is displayed in full screen, the menu is not displayed, and the top
+  fullContent: boolean;
+  // content width
+  contentMode: ContentEnum;
+  // Whether to display the logo
+  showLogo: boolean;
+  // Whether to show the global footer
+  showFooter: boolean;
+  // menuType: MenuTypeEnum;
+  headerSetting: HeaderSetting;
+  // menuSetting
+  menuSetting: MenuSetting;
+  // Multi-tab settings
+  multiTabsSetting: MultiTabsSetting;
+  // Animation configuration
+  transitionSetting: TransitionSetting;
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean;
+  // Lock screen time
+  lockTime: number;
+  // Show breadcrumbs
+  showBreadCrumb: boolean;
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean;
+  // Use error-handler-plugin
+  useErrorHandle: boolean;
+  // Whether to open back to top
+  useOpenBackTop: boolean;
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean;
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean;
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean;
+  aiIconShow: boolean;
+}
+
+export interface GlobConfig {
+  // Site title
+  title: string;
+  // Service interface url
+  apiUrl: string;
+  domainUrl: string;
+  // Upload url (作废)
+  uploadUrl?: string;
+  openSso?: string;
+  openQianKun?: string;
+  casBaseUrl?: string;
+  // onlineview url
+  viewUrl?: string;
+  //  Service interface url prefix
+  urlPrefix?: string;
+  // Project abbreviation
+  shortName: string;
+  // 短标题
+  shortTitle: string;
+  // 使用新任务弹窗
+  useNewTaskModal: boolean;
+  // 当前是否运行在 electron 平台
+  isElectronPlatform: boolean;
+
+  // 【JEECG作为乾坤子应用】是否以乾坤子应用模式启动
+  isQiankunMicro: boolean;
+  // 【JEECG作为乾坤子应用】乾坤子应用入口
+  qiankunMicroAppEntry?: string;
+}
+export interface GlobEnvConfig {
+  // Site title
+  VITE_GLOB_APP_TITLE: string;
+  // Service interface url
+  VITE_GLOB_API_URL: string;
+  VITE_USE_MOCK: string;
+  // Service interface url prefix
+  VITE_GLOB_API_URL_PREFIX?: string;
+  // Project abbreviation
+  VITE_GLOB_APP_SHORT_NAME: string;
+  //是否开启单点登录
+  VITE_GLOB_APP_OPEN_SSO: string;
+  //是否开启微应用模式
+  VITE_GLOB_APP_OPEN_QIANKUN: string;
+  //单点服务端地址
+  VITE_GLOB_APP_CAS_BASE_URL: string;
+  VITE_GLOB_DOMAIN_URL: string;
+  // Upload url
+  VITE_GLOB_UPLOAD_URL?: string;
+  // view url
+  VITE_GLOB_ONLINE_VIEW_URL?: string;
+  // 全局隐藏哪些布局，多个用逗号隔开
+  VITE_GLOB_HIDE_LAYOUT_TYPES?: string;
+
+  // 【JEECG作为乾坤子应用】填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致
+  VITE_GLOB_QIANKUN_MICRO_APP_NAME?: string;
+  // 【JEECG作为乾坤子应用】作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+  VITE_GLOB_QIANKUN_MICRO_APP_ENTRY?: string;
+  //在线文档编辑版本。可选属性：wps, onlyoffice
+  VITE_GLOB_ONLINE_DOCUMENT_VERSION?: string;
+  // 当前运行在什么平台
+  VITE_GLOB_RUN_PLATFORM?: 'web' | 'electron';
+}
diff --git a/types/global.d.ts b/types/global.d.ts
new file mode 100644
index 0000000..b0f1ea1
--- /dev/null
+++ b/types/global.d.ts
@@ -0,0 +1,100 @@
+import type { ComponentRenderProxy, VNode, VNodeChild, ComponentPublicInstance, FunctionalComponent, PropType as VuePropType } from 'vue';
+
+declare global {
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+  // declare interface Window {
+  //   // Global vue app instance
+  //   __APP__: App<Element>;
+  // }
+
+  // vue
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element | JSX.IntrinsicElements;
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T;
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: T;
+  };
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement;
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[];
+  }
+  interface ImportMetaEnv extends ViteEnv {
+    readonly BASE_URL: string;
+    readonly MODE: string;
+    readonly DEV: boolean;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+    __: unknown;
+  }
+
+  declare interface ViteEnv {
+    VITE_PORT: number;
+    VITE_USE_MOCK: boolean;
+    VITE_PUBLIC_PATH: string;
+    VITE_PROXY: [string, string][];
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_USE_CDN: boolean;
+    VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+    // 【JEECG作为乾坤子应用】乾坤子应用名，主应用注册时AppName需保持一致
+    VITE_GLOB_QIANKUN_MICRO_APP_NAME?: string;
+    // 【JEECG作为乾坤子应用】非必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
+    VITE_GLOB_QIANKUN_MICRO_APP_ENTRY?: string;
+    // 当前运行在什么平台
+    VITE_GLOB_RUN_PLATFORM?: 'web' | 'electron';
+    // iconify图标使用在线还是本地。可选属性：online, local
+    VITE_GLOB_ICONIFY_USE_TYPE?: 'online' | 'local';
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode;
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy;
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module 'vue' {
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
+}
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 0000000..b279c0a
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,27 @@
+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R;
+}
+
+declare interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>;
+}
+
+declare type RefType<T> = T | null;
+
+declare type LabelValueOptions = {
+  label: string;
+  value: any;
+  [key: string]: string | number | boolean;
+}[];
+
+declare type EmitType = (event: string, ...args: any[]) => void;
+
+declare type TargetContext = '_self' | '_blank';
+
+declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+  $el: T;
+}
+
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
diff --git a/types/main.d.ts b/types/main.d.ts
new file mode 100644
index 0000000..fb0f998
--- /dev/null
+++ b/types/main.d.ts
@@ -0,0 +1,10 @@
+// 应用参数
+export type MainAppProps = {
+  container?: HTMLElement;
+  // 隐藏侧边栏（菜单）
+  hideSider?: boolean;
+  // 隐藏顶部
+  hideHeader?: boolean;
+  // 隐藏 多Tab 切换
+  hideMultiTabs?: boolean;
+}
diff --git a/types/module.d.ts b/types/module.d.ts
new file mode 100644
index 0000000..eda5c85
--- /dev/null
+++ b/types/module.d.ts
@@ -0,0 +1,35 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
+}
+
+declare module 'ant-design-vue/es/locale/*' {
+  import { Locale } from 'ant-design-vue/types/locale-provider';
+  const locale: Locale & ReadonlyRecordable;
+  export default locale as Locale & ReadonlyRecordable;
+}
+
+declare module 'virtual:*' {
+  const result: any;
+  export default result;
+}
+
+declare module 'virtual:pwa-register/vue' {
+  import type { Ref } from 'vue';
+
+  export interface RegisterSWOptions {
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+    onRegisterError?: (error: any) => void;
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: Ref<boolean>;
+    offlineReady: Ref<boolean>;
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+  };
+}
+
diff --git a/types/store.d.ts b/types/store.d.ts
new file mode 100644
index 0000000..7b9349a
--- /dev/null
+++ b/types/store.d.ts
@@ -0,0 +1,59 @@
+import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { RoleInfo } from '/@/api/sys/model/userModel';
+
+// Lock screen information
+export interface LockInfo {
+  // Password required
+  pwd?: string | undefined;
+  // Is it locked?
+  isLock?: boolean;
+}
+
+// Error-log information
+export interface ErrorLogInfo {
+  // Type of error
+  type: ErrorTypeEnum;
+  // Error file
+  file: string;
+  // Error name
+  name?: string;
+  // Error message
+  message: string;
+  // Error stack
+  stack?: string;
+  // Error detail
+  detail: string;
+  // Error url
+  url: string;
+  // Error time
+  time?: string;
+}
+
+export interface UserInfo {
+  id: string | number;
+  userId: string | number;
+  username: string;
+  realname: string;
+  avatar: string;
+  desc?: string;
+  homePath?: string;
+  tenantid?: string | number;
+  roles: RoleInfo[];
+  orgCode?: string;
+}
+
+export interface LoginInfo {
+  multi_depart?: string | number;
+  userInfo?: object;
+  departs?: [];
+  tenantList?: [];
+  isLogin?: boolean;
+}
+
+export interface BeforeMiniState {
+  menuCollapsed?: boolean;
+  menuSplit?: boolean;
+  menuMode?: MenuModeEnum;
+  menuType?: MenuTypeEnum;
+}
diff --git a/types/unplugin-icons.d.ts b/types/unplugin-icons.d.ts
new file mode 100644
index 0000000..878a992
--- /dev/null
+++ b/types/unplugin-icons.d.ts
@@ -0,0 +1,10 @@
+/**
+ * unplugin-icons 类型声明
+ * 为 ~icons 路径提供类型支持
+ */
+
+declare module '~icons/*' {
+  import { FunctionalComponent, SVGAttributes } from 'vue';
+  const component: FunctionalComponent<SVGAttributes>;
+  export default component;
+}
diff --git a/types/utils.d.ts b/types/utils.d.ts
new file mode 100644
index 0000000..6500d44
--- /dev/null
+++ b/types/utils.d.ts
@@ -0,0 +1,5 @@
+import type { ComputedRef, Ref } from 'vue';
+
+export type DynamicProps<T> = {
+  [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
+};
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
new file mode 100644
index 0000000..93fd788
--- /dev/null
+++ b/types/vue-router.d.ts
@@ -0,0 +1,45 @@
+export {};
+
+declare module 'vue-router' {
+  interface RouteMeta extends Record<string | number | symbol, unknown> {
+    orderNo?: number;
+    // title
+    title: string;
+    // dynamic router level.
+    dynamicLevel?: number;
+    // dynamic router real route path (For performance).
+    realPath?: string;
+    // Whether to ignore permissions
+    ignoreAuth?: boolean;
+    // role info
+    roles?: RoleEnum[];
+    // Whether not to cache
+    ignoreKeepAlive?: boolean;
+    // Is it fixed on tab
+    affix?: boolean;
+    // icon on tab
+    icon?: string;
+    frameSrc?: string;
+    // current page transition
+    transitionName?: string;
+    // Whether the route has been dynamically added
+    hideBreadcrumb?: boolean;
+    // Hide submenu
+    hideChildrenInMenu?: boolean;
+    // Carrying parameters
+    carryParam?: boolean;
+    // Used internally to mark single-level menus
+    single?: boolean;
+    // Currently active menu
+    currentActiveMenu?: string;
+    // Never show in tab
+    hideTab?: boolean;
+    // Never show in menu
+    hideMenu?: boolean;
+    isLink?: boolean;
+    // only build for Menu
+    ignoreRoute?: boolean;
+    // Hide path for children
+    hidePathForChildren?: boolean;
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ff5a849
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,199 @@
+import type { UserConfig, ConfigEnv } from 'vite';
+import pkg from './package.json';
+import dayjs from 'dayjs';
+import { loadEnv } from 'vite';
+import { resolve } from 'path';
+import { generateModifyVars } from './build/generate/generateModifyVars';
+import { createProxy } from './build/vite/proxy';
+import { wrapperEnv } from './build/utils';
+import { createVitePlugins } from './build/vite/plugin';
+import { OUTPUT_DIR } from './build/constant';
+
+function pathResolve(dir: string) {
+  return resolve(process.cwd(), '.', dir);
+}
+
+const { dependencies, devDependencies, name, version } = pkg;
+const __APP_INFO__ = {
+  pkg: { dependencies, devDependencies, name, version },
+  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+};
+
+export default async ({ command, mode }: ConfigEnv): Promise<UserConfig> => {
+  const root = process.cwd();
+
+  const env = loadEnv(mode, root);
+
+  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
+  const viteEnv = wrapperEnv(env);
+
+  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv;
+
+  const isBuild = command === 'build';
+
+  const serverOptions: Recordable = {}
+
+  // ----- [begin] 【JEECG作为乾坤子应用】 -----
+  const {VITE_GLOB_QIANKUN_MICRO_APP_NAME, VITE_GLOB_QIANKUN_MICRO_APP_ENTRY} = viteEnv;
+  const isQiankunMicro = VITE_GLOB_QIANKUN_MICRO_APP_NAME != null && VITE_GLOB_QIANKUN_MICRO_APP_NAME !== '';
+  if (isQiankunMicro && !isBuild) {
+    serverOptions.cors = true;
+    serverOptions.origin = VITE_GLOB_QIANKUN_MICRO_APP_ENTRY!.split('/').slice(0, 3).join('/');
+  }
+  // ----- [end] 【JEECG作为乾坤子应用】 -----
+  
+  console.log('[init] Start Port: ', VITE_PORT);
+  console.debug('[init] Vite Proxy Config: ', VITE_PROXY);
+  
+  
+  return {
+    base: isQiankunMicro ? VITE_GLOB_QIANKUN_MICRO_APP_ENTRY : VITE_PUBLIC_PATH,
+    root,
+    resolve: {
+      alias: [
+        // @logicflow/vue-node-registry 1.1.13 的 npm 包只发布了 src/，但 package.json
+        // main/module 指向 lib/、es/（不存在）。vite 6 esbuild 宽松能找到 src，rolldown 严格直接报错。
+        // 暂时直接把 import 重定向到 src/index.ts。
+        {
+          find: /^@logicflow\/vue-node-registry$/,
+          replacement: pathResolve('node_modules/@logicflow/vue-node-registry/src/index.ts'),
+        },
+        // 把 @rys-fe/vite-plugin-theme 的客户端运行时重定向到项目内置版本（vite 8 适配）
+        // 用 RegExp 精确匹配，避免被父级别名误吞；不写后缀让 vite 自动用 resolve.extensions 补全
+        {
+          find: /^@rys-fe\/vite-plugin-theme\/es\/client$/,
+          replacement: pathResolve('build/vite/plugin/theme-plugin/client/client'),
+        },
+        {
+          find: /^@rys-fe\/vite-plugin-theme\/es\/colorUtils$/,
+          replacement: pathResolve('build/vite/plugin/theme-plugin/client/colorUtils'),
+        },
+        {
+          find: /^@rys-fe\/vite-plugin-theme$/,
+          replacement: pathResolve('build/vite/plugin/theme-plugin/index'),
+        },
+        {
+          find: 'vue-i18n',
+          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
+        },
+        // /@/xxxx => src/xxxx
+        {
+          find: /\/@\//,
+          replacement: pathResolve('src') + '/',
+        },
+        // /#/xxxx => types/xxxx
+        {
+          find: /\/#\//,
+          replacement: pathResolve('types') + '/',
+        },
+        {
+          find: /@\//,
+          replacement: pathResolve('src') + '/',
+        },
+        // /#/xxxx => types/xxxx
+        {
+          find: /#\//,
+          replacement: pathResolve('types') + '/',
+        },
+      ],
+    },
+    server: {
+      // Listening on all local IPs
+      host: true,
+      // @ts-ignore
+      https: false,
+      port: VITE_PORT,
+      // Load proxy configuration from .env
+      proxy: createProxy(VITE_PROXY),
+      // 合并 server 配置
+      ...serverOptions,
+      // update-begin--author:liaozhiyang---date:20260306---for:【QQYUN-14801】vite启动的时候，预构建一些入口页面，访问时快一些
+      // 启动时预构建
+      warmup: {
+        clientFiles: [
+          './src/main.ts',
+          './src/App.vue',
+          './src/views/system/loginmini/MiniLogin.vue',
+          'src/layouts/default/index.vue'
+        ],
+      },
+      // update-end--author:liaozhiyang---date:20260306---for:【QQYUN-14801】vite启动的时候，预构建一些入口页面，访问时快一些
+    },
+    build: {
+      minify: 'esbuild',
+      target: 'es2015',
+      cssTarget: 'chrome80',
+      outDir: OUTPUT_DIR,
+      rollupOptions: {
+        // 关闭除屑优化，防止删除重要代码，导致打包后功能出现异常
+        // treeshake: false,
+        output: {
+          chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
+          entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
+          // manualChunks配置 (依赖包从大到小排列)
+          manualChunks: {
+            // vue vue-router合并打包
+            'vue-vendor': ['vue', 'vue-router'],
+            'emoji-mart-vue-fast': ['emoji-mart-vue-fast'],
+          },
+        },
+      },
+      // 关闭brotliSize显示可以稍微减少打包时间
+      reportCompressedSize: false,
+      // 提高超大静态资源警告大小
+      chunkSizeWarningLimit: 2000,
+    },
+    esbuild: {
+      //清除全局的console.log和debug
+      drop: isBuild ? ['console', 'debugger'] : [],
+    },
+    define: {
+      // setting vue-i18-next
+      // Suppress warning
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          modifyVars: generateModifyVars(),
+          javascriptEnabled: true,
+        },
+      },
+    },
+
+    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
+    plugins: await createVitePlugins(viteEnv, isBuild, isQiankunMicro),
+
+    optimizeDeps: {
+      esbuildOptions: {
+        target: 'es2020',
+      },
+      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
+      include: [
+        // 强制预构建clipboard，解决Vite6对CommonJS模块的严格检查
+        'clipboard',
+        '@vue/shared',
+        '@iconify/iconify',
+        'ant-design-vue/es/locale/zh_CN',
+        'ant-design-vue/es/locale/en_US',
+        // update-begin--author:scott---date:20260427---for: 集成 @jeecg/aiflow（预编译 lib 在 node_modules）时，
+        // Vite 默认不扫描 node_modules 里已打包的 mjs，导致 ant-design-vue/es/vc-picker/generate/dayjs.js
+        // 引入的 dayjs 插件子路径（UMD/CJS）未被预打包，运行时报 "does not provide an export named 'default'"。
+        // 显式列出 vc-picker 用到的全部 dayjs 插件，强制 esbuild 预打包成 ESM。
+        'dayjs/plugin/advancedFormat',
+        'dayjs/plugin/customParseFormat',
+        'dayjs/plugin/weekday',
+        'dayjs/plugin/localeData',
+        'dayjs/plugin/weekOfYear',
+        'dayjs/plugin/weekYear',
+        'dayjs/plugin/quarterOfYear',
+        // update-end--author:scott---date:20260427---for: 集成 @jeecg/aiflow 时 dayjs 插件 default 导出报错
+      ],
+      exclude: [
+        //升级vite4后，需要排除online和aiflow依赖
+        '@jeecg/aiflow',
+      ],
+    },
+  };
+};
diff --git a/开发规范-人工版.md b/开发规范-人工版.md
new file mode 100644
index 0000000..1d7c24b
--- /dev/null
+++ b/开发规范-人工版.md
@@ -0,0 +1,154 @@
+# ghb-base 开发规范（人工版）
+
+> 给不用 AI 编码的开发者阅读。用 AI 写代码的看 `.claude/` 目录。
+
+## 一、返回格式（不变式）
+
+**所有接口必须用 `Result<T>` 包装：**
+
+```java
+// ✅ 正确
+return Result.OK(data);
+return Result.OK("操作成功", data);
+return Result.error("参数错误");
+
+// ❌ 禁止
+return data;
+return "success";
+return Map.of(...);
+```
+
+**分页格式：** `{ code, message, data: { records, total, size, current } }`
+
+**日期格式：** 统一 `yyyy-MM-dd HH:mm:ss`
+
+**状态值：** 枚举中文值必须从 `contract/common/status-map.md` 取，不许硬编码前端文案同义替换（"已拒绝"="拒绝"之类）。
+
+## 二、分层规则
+
+```
+controller/     — 参数校验 + 调用 service + 返回 Result，不许写业务逻辑
+service/        — 业务逻辑，事务管理
+mapper/         — SQL（MyBatis XML 或 @Select），不许写业务逻辑
+entity/         — 表映射，纯数据对象
+```
+
+**禁止：Controller 超过 20 行、Controller 里有 if/else 嵌套、Service 里直接操作 HttpServletRequest**
+
+## 三、命名规则
+
+| 元素   | 规则               | 示例                                  |
+| ------ | ------------------ | ------------------------------------- |
+| 类名   | 大驼峰，名词       | `TaskController`，❌ `taskController` |
+| 方法名 | 小驼峰，动词开头   | `getById()`，❌ `getbyid()`           |
+| 变量   | 小驼峰，有意义     | `taskList`，❌ `list` `data`          |
+| 包名   | 全小写             | `com.ghb.base.modules.business`       |
+| 表名   | 小写，下划线，单数 | `task_apply`，❌ `TaskApply`          |
+| 字段名 | 小写，下划线       | `create_time`，❌ `createdAt`         |
+| 主键   | 统一 `id`          | ❌ `task_id`                          |
+| 外键   | `关联表_id`        | `user_id`，❌ `uid`                   |
+| 布尔   | `is_` 前缀         | `is_deleted`，❌ `deleted`            |
+
+**长度控制：** 类名/表名超过 3 个单词或 30 字符必须缩写。缩写必须一眼能认出含义：
+
+| 完整       | 缩写 |
+| ---------- | ---- |
+| department | dept |
+| permission | perm |
+| message    | msg  |
+| enterprise | ent  |
+
+## 四、字段类型
+
+| 场景 | 类型                                 |
+| ---- | ------------------------------------ |
+| 金额 | `DECIMAL(15,2)`，❌ `FLOAT` `DOUBLE` |
+| 时间 | `DATETIME`，❌ `VARCHAR` `TIMESTAMP` |
+| 状态 | `VARCHAR(20)`，存英文枚举值          |
+| 文本 | `VARCHAR(N)`（长度写死，不用 TEXT）  |
+
+**必有字段：** 每张表必须包含 `id` `create_by` `create_time` `update_by` `update_time`。每个字段必须有 `COMMENT`。
+
+## 五、索引规则
+
+| 场景           | 索引            |
+| -------------- | --------------- |
+| 外键           | 必须建索引      |
+| WHERE 高频字段 | 必须建索引      |
+| 唯一约束       | `uk_表名_字段`  |
+| 普通索引       | `idx_表名_字段` |
+
+## 六、Git 规则
+
+**分支：** `dev`（开发）/ `master`（生产）。新功能从 `dev` 拉，合回 `dev`。
+
+**Commit 格式：**
+
+```
+<type>: <简短描述>
+
+[AI: 模型名]
+```
+
+**Type：** feat / fix / refactor / docs / style / test / chore
+
+**禁止：** `git push --force`、commit 只写 "update"、提交含硬编码密钥
+
+## 七、安全规则
+
+- 所有接口（除登录）必须验证 JWT Token
+- 涉及租户数据的 SQL 必须带 `tenant_id` 条件
+- 密码/密钥/Token 禁止硬编码、禁止 log 输出、禁止提交到 Git
+- 文件上传限制大小（≤10MB）和类型（白名单）
+- 用户输入必须做 XSS 过滤
+- 日志不输出敏感信息（手机号脱敏 176\*\*\*\*2303）
+
+## 八、编码规则
+
+- 所有源文件：UTF-8 无 BOM
+- 禁止 GBK/GB2312
+- `ghb-backend/.editorconfig` 和 `ghb-frontend/.editorconfig` 各一个，不要覆盖
+- **Windows 终端重定向（`>` `>>`）会按 GBK 写入，不要用**
+
+## 九、测试规则
+
+**必须写测试：**
+
+- 新增 Service 方法 → 单元测试
+- 新增 Controller 接口 → 集成测试
+- 涉及金额计算 → 单元测试（多组边界值）
+- 涉及状态流转 → 单元测试（覆盖所有路径）
+
+**错误码：** 200 成功 / 400 参数错误 / 401 未登录 / 403 无权限 / 500 服务器异常
+
+## 十、前端规则
+
+**样式铁律：**
+
+- 颜色禁硬编码（`color: #333` ❌），走主题变量
+- 字号/间距禁硬编码，走全局类或 Less 变量
+- 所有文案必须走 i18n，不能写死中文
+
+**命名规则：**
+
+| 元素      | 规则       | 示例                               |
+| --------- | ---------- | ---------------------------------- |
+| 组件文件  | kebab-case | `task-card.vue`，❌ `TaskCard.vue` |
+| 组件 name | PascalCase | `TaskCard`                         |
+| CSS 类名  | kebab-case | `.task-card`，❌ `.taskCard`       |
+| JS 变量   | 小驼峰     | `taskList`，❌ `task_list`         |
+
+**代码修改痕迹：** 所有新增或修改的代码块必须用 `// update-begin` / `// update-end` 包裹，注明 author/date/原因。
+
+## 十一、提交前检查表
+
+```
+□ 接口变更 → contract/ 同步更新
+□ 返回格式 → 全部用 Result 包装
+□ 手写 SQL → 有 tenant_id 条件
+□ 新增表 → create_time / update_time / COMMENT 完整
+□ 金额字段 → DECIMAL 类型
+□ 无硬编码魔法数字/裸色值
+□ Commit 格式正确
+□ 测试通过
+```